/* Local design study. Common site styles are reused outside #ai-page. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { background: #fff; }
.ai-skip { position: fixed; top: -100px; z-index: 2000; background: white; padding: 16px; }
.ai-skip:focus { top: 0; }
#ai-page { color: #293344; font: 16px/1.9 'Noto Sans JP','Yu Gothic',Meiryo,sans-serif; overflow: hidden; }
#ai-page * { box-sizing: border-box; }
#ai-page h1,#ai-page h2,#ai-page h3 { font-weight: 700; color: #293344; line-height: 1.55; }
#ai-page h1 { font-size: clamp(30px,3.3vw,48px); margin: 20px 0 24px; letter-spacing: .01em; }
#ai-page h2 { font-size: clamp(26px,2.5vw,36px); margin: 12px 0 28px; }
#ai-page h3 { font-size: 22px; margin: 10px 0 16px; }
#ai-page p { margin: 0 0 18px; }
#ai-page a { color: #575095; text-underline-offset: 5px; }
#ai-page a:hover { color: #14799b; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 3px solid #14799b; outline-offset: 5px; }
#ai-page img { max-width: 100%; height: auto; }
#ai-page em { color: #61508f; font-style: normal; }
#ai-page .wrap { width: min(1160px,calc(100% - 64px)); margin: auto; }
#ai-page .ai-breadcrumb { padding: 18px max(32px,calc((100% - 1160px)/2)); background: #f4f3f9; display:flex; flex-wrap:wrap; gap: 10px; font-size: 13px; color: #697181; }
#ai-page .ai-breadcrumb a { color: #697181; }
#ai-page .hero { position: relative; background: #f4f3f9; }
#ai-page .hero:before { content: ''; position:absolute; inset:0; background:url('/wp-content/themes/webg_2024/resource/images/service/object-right.png') right top / 240px auto no-repeat; opacity:.6; pointer-events:none; }
#ai-page .hero-inner { position:relative; padding:70px 0 75px; }
#ai-page .hero-inner > :not(.hero-illustration) { position: relative; z-index:1; max-width:58%; }
#ai-page .hero-illustration { position:absolute; width:40%; right:-20px; top:100px; }
#ai-page .hero-copy { font-size:16px; max-width:610px; }
#ai-page .service-name { font-size:23px; font-weight:700; }
#ai-page .hero-note { font-size:14px; color:#596174; margin-top:24px; }
#ai-page .eyebrow,#ai-page .ey,#ai-page .tag { color:#64508f; font-size:12px; letter-spacing:.12em; font-weight:700; }
#ai-page .actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
#ai-page .button,#ai-page a.btn,#ai-page a.cta { display:inline-flex; justify-content:center; align-items:center; gap:18px; padding:17px 30px; border-radius:60px; background:linear-gradient(100deg,#df8792,#f8bc73); color:#fff; font-weight:700; text-decoration:none; border:0; box-shadow:0 5px 15px #73679520; line-height:1.6; }
#ai-page .button:hover,#ai-page a.btn:hover,#ai-page a.cta:hover { filter:brightness(1.04); transform:translateY(-2px); }
#ai-page .button.secondary { color:#60508f; background:white; border:1px solid #d7d2e5; box-shadow:none; }
#ai-page .strip { background:#fff; border-bottom:1px solid #ebe9f1; }
#ai-page .strip .wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:30px 0; }
#ai-page .strip-item { display:flex; align-items:center; gap:16px; font-weight:700; }
#ai-page .strip-item b { color:#70609b; font-size:24px; }
#ai-page .section { padding:88px 0; }
#ai-page .section:nth-of-type(odd) { background:#f4f3f9; }
#ai-page .intro { max-width:800px; color:#576174; }
#ai-page .problems { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:42px; }
#ai-page .problem { padding:30px; background:#fff; border:1px solid #e6e1ee; border-radius:12px; }
#ai-page .problem h3 { font-size:21px; }
#ai-page .issue-illustration { display:block; height:145px; width:auto; margin:0 auto 25px; }
#ai-page .num,#ai-page .step-number { color:#67558f; font-weight:700; }
#ai-page .num { font-size:12px; letter-spacing:.1em; }
#ai-page .process { margin:36px 0; }
#ai-page .step { display:grid; grid-template-columns:65px 1fr 1.5fr; gap:24px; align-items:start; padding:32px 0; border-top:1px solid #dcd6e8; }
#ai-page .step-number { font-size:36px; }
#ai-page .step small { font-size:12px; color:#7d7195; }
#ai-page .fde { padding:25px 30px; border-left:4px solid #8c7ba8; background:#f4f3f9; }
#ai-page .examples-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:40px 0 25px; }
#ai-page .example-card { background:white; padding:32px; border:1px solid #ddd8e8; border-radius:14px; }
#ai-page .example-top { display:flex; align-items:center; gap:18px; color:#6d5a98; font-size:12px; letter-spacing:.08em; }
#ai-page .example-top b { font-size:32px; }
#ai-page .example-pain { color:#626a79; }
#ai-page .demo-flow { padding:15px 20px; background:#f4f3f9; border:1px solid #e3deed; border-radius:6px; font-weight:700; }
#ai-page .demo-flow span { display:block; font-size:13px; font-weight:400; color:#697181; }
#ai-page .flow-arrow { text-align:center; color:#b199c6; }
#ai-page .example-workflow .demo-flow { animation:ai-flow-step 6.6s linear infinite; }
#ai-page .example-workflow .demo-flow:nth-child(3) { animation-delay:-4.4s; }
#ai-page .example-workflow .demo-flow:nth-child(5) { animation-delay:-2.2s; }
@keyframes ai-flow-step {
  0%, 28% { border-color:#7053a0; background:#eeE9f6; box-shadow:0 0 0 1px #7053a030; }
  33.333%, 95% { border-color:#e3deed; background:#f4f3f9; box-shadow:0 0 0 0 transparent; }
  100% { border-color:#7053a0; background:#eee9f6; box-shadow:0 0 0 1px #7053a030; }
}
@media (prefers-reduced-motion:reduce) {
  #ai-page .example-workflow .demo-flow { animation:none; }
}
#ai-page .example-support { border-top:1px solid #e6e1ee; margin-top:24px; padding-top:20px; font-size:14px; }
#ai-page .example-support b { display:block; color:#67558f; margin-bottom:6px; }
#ai-page .example-note { font-size:14px; }
#ai-page .pricing-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; }
#ai-page .pricing-heading > p { max-width:350px; }
#ai-page .pricing { border:1px solid #ddd6e9; border-radius:14px; overflow:hidden; margin-top:30px; background:#fff; }
#ai-page .price-tag { background:linear-gradient(110deg,#6d579b,#227d9c); color:white; padding:16px 32px; font-weight:700; }
#ai-page .price-grid { display:grid; grid-template-columns:1fr 1fr; }
#ai-page .price-main,#ai-page .price-info { padding:32px 40px; }
#ai-page .price-main { border-right:1px solid #e4deec; }
#ai-page .price-value { display:flex; gap:10px; align-items:baseline; }
#ai-page .price-value strong { color:#685393; font-size:88px; line-height:1.4; }
#ai-page .price-value b { color:#685393; font-size:28px; }
#ai-page .price-info .limit { border-top:1px solid #e4deec; padding-top:16px; font-size:14px; }
#ai-page .terms { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:36px; }
#ai-page .terms h3 { font-size:20px; }
#ai-page .faq { margin-top:35px; }
#ai-page details { background:#fff; border-bottom:1px solid #ddd8e8; padding:22px 26px; }
#ai-page summary { font-size:18px; font-weight:700; cursor:pointer; }
#ai-page details p { padding-top:20px; margin-bottom:0; }
#ai-page .contact { text-align:center; padding:80px 0; background:#fff8f8; }
#ai-page .contact .note { font-size:13px; margin-top:18px; }
#ai-page .ai-subnav { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1160px; margin:0 auto; padding:50px 24px; font-size:16px; }
#ai-page .ai-subnav a { border:1px solid #dad3e5; border-radius:8px; padding:18px; display:flex; justify-content:space-between; gap:14px; background:#fff; text-decoration:none; }
#ai-page .ai-subnav a[aria-current] { background:#f4f3f9; font-weight:700; }
#ai-page.ai-fde > section { padding:60px max(32px,calc((100% - 1160px)/2)); }
#ai-page.ai-fde > section:first-of-type { padding-top:0; background:#f4f3f9; }
#ai-page.ai-fde section:first-of-type .hero { padding:65px 0 45px; }
#ai-page.ai-fde section:first-of-type .hero > :not(.hero-illustration) { position:relative; max-width:60%; }
#ai-page.ai-fde .hero-illustration { right:0; top:140px; width:36%; }
#ai-page.ai-fde section:not(:first-of-type) .hero { padding:0 0 24px; background:transparent; }
#ai-page.ai-fde section:not(:first-of-type) .hero:before { content:none; }
#ai-page.ai-fde h1 em { font-size:.64em; }
#ai-page.ai-fde h1 { font-size:42px; }
#ai-page.ai-fde .entry { display:grid; grid-template-columns:60px 180px 1fr; gap:28px; align-items:start; padding:32px 0; border-top:1px solid #ddd8e8; }
#ai-page.ai-fde .workflow-illustration { width:180px; height:150px; object-fit:contain; align-self:center; }
#ai-page.ai-fde .entry .num { font-size:30px; }
#ai-page.ai-fde .box { padding:28px 32px; border-left:4px solid #8571a6; background:white; margin:24px 0; box-shadow:0 5px 22px #6960800c; }
#ai-page.ai-fde section:nth-of-type(2) .box { background:#f4f3f9; }
#ai-page.ai-cost > article { background:#f4f3f9; padding:0 max(32px,calc((100% - 1160px)/2)) 60px; }
#ai-page.ai-cost .hero { padding:65px 0 40px; display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
#ai-page.ai-cost .hero h1 { font-size:38px; }
#ai-page.ai-cost .hero h1 span { display:block; word-break:keep-all; }
#ai-page.ai-cost .hero figure { position:relative; margin:0; }
#ai-page.ai-cost .by { color:#697181; font-size:13px; }
#ai-page.ai-cost .price { display:grid; grid-template-columns:repeat(3,1fr); background:white; border:1px solid #e1dbea; border-radius:12px; margin:10px 0 48px; }
#ai-page.ai-cost .price > div { padding:24px; text-align:center; }
#ai-page.ai-cost .price > div + div { border-left:1px solid #e1dbea; }
#ai-page.ai-cost .price b { display:block; font-size:30px; color:#685393; }
#ai-page.ai-cost .copy { width:100%; margin:auto; padding:45px 60px; border-radius:14px; background:white; }
#ai-page.ai-cost .copy section + section { border-top:1px solid #e1dbea; margin-top:35px; padding-top:35px; }
#ai-page.ai-cost .copy h2 { font-size:28px; }
#ai-page.ai-cost .step { display:block; padding:0 0 10px 24px; border-top:0; border-left:3px solid #b6a7ca; margin:25px 0; }
#ai-page.ai-cost .compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
#ai-page.ai-cost .compare > div { background:#f4f3f9; padding:24px; border-radius:8px; }
@media(max-width:767px) {
  html { scroll-padding-top:80px; }
  #ai-page .wrap { width:calc(100% - 40px); }
  #ai-page .ai-breadcrumb { padding:16px 20px; font-size:11px; gap:7px; }
  #ai-page .hero-inner { padding:35px 0 40px; }
  #ai-page .hero-inner > :not(.hero-illustration) { max-width:100%; }
  #ai-page .hero-illustration { position:static; display:block; width:85%; max-width:400px; margin:35px auto 0; }
  #ai-page .hero:before { background-size:130px; opacity:.25; }
  #ai-page .hero h1 { font-size:32px; }
  #ai-page .service-name { font-size:19px; }
  #ai-page .button { width:100%; font-size:14px; padding:16px 18px; }
  #ai-page .actions { width:100%; }
  #ai-page .strip .wrap { gap:12px; }
  #ai-page .strip-item { display:block; font-size:12px; }
  #ai-page .strip-item b { display:block; font-size:22px; }
  #ai-page .section { padding:52px 0; }
  #ai-page .problems,#ai-page .examples-grid,#ai-page .terms,#ai-page .price-grid,#ai-page .ai-subnav { grid-template-columns:1fr; }
  #ai-page .step { grid-template-columns:42px 1fr; gap:12px; }
  #ai-page .step p { grid-column:2; }
  #ai-page .step-number { font-size:28px; }
  #ai-page h3 { font-size:20px; }
  #ai-page .example-card,#ai-page .problem { padding:24px; }
  #ai-page .pricing-heading { display:block; }
  #ai-page .price-main,#ai-page .price-info { padding:24px; }
  #ai-page .price-main { border-right:0; border-bottom:1px solid #e4deec; }
  #ai-page .price-value strong { font-size:72px; }
  #ai-page .price-value { gap:7px; }
  #ai-page .price-value span { font-size:13px; }
  #ai-page details { padding:20px 16px; }
  #ai-page summary { font-size:16px; }
  #ai-page.ai-fde > section { padding:36px 20px; }
  #ai-page.ai-fde section:first-of-type .hero { padding:35px 0; display:flex; flex-direction:column; }
  #ai-page.ai-fde section:first-of-type .hero > :not(.hero-illustration) { max-width:100%; }
  #ai-page.ai-fde .hero-illustration { position:static; width:90%; order:2; margin-top:22px; }
  #ai-page.ai-fde .entry { grid-template-columns:44px 1fr; gap:16px; }
  #ai-page.ai-fde .workflow-illustration { width:140px; height:110px; justify-self:center; }
  #ai-page.ai-fde .entry > div { grid-column:1 / -1; }
  #ai-page.ai-fde .box { padding:22px; }
  #ai-page.ai-cost > article { padding:0 20px 35px; }
  #ai-page.ai-cost .hero { display:flex; flex-direction:column; padding:35px 0; gap:20px; }
  #ai-page.ai-cost .hero h1 { font-size:30px; }
  #ai-page.ai-cost .price > div { padding:14px 6px; }
  #ai-page.ai-cost .price { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #ai-page.ai-cost .price > div:last-child { grid-column:1 / -1; border-left:0; border-top:1px solid #e1dbea; }
  #ai-page.ai-cost .price small { font-size:10px; }
  #ai-page.ai-cost .price b { font-size:20px; }
  #ai-page.ai-cost .copy { padding:28px 20px; }
  #ai-page.ai-cost .copy h2 { font-size:25px; }
  #ai-page.ai-cost .compare { grid-template-columns:1fr; }
  #ai-page .ai-subnav { padding:30px 20px; gap:12px; }
}