/* 本文と共通部品の境界、生成済みHTMLとスマホの動きに必要な差分。 */
/* デモへ直接進む主導線を、タブの説明・動画・3段の図より先に置く。 */
.redesign .demo-panel>.demo-actions{border-top:0;margin:0 0 22px;padding:0}
.redesign .demo-actions>.button.primary{min-height:58px;padding:16px 30px;font-size:16px;background:#245e4c;color:#fff;border:0}
.redesign .demo-actions>.text-link{border:0;text-decoration:underline;text-underline-offset:5px}
/* JSの初期化を待たず最初の場面だけ表示する。JSなしでは全場面を残す。 */
@media (scripting: enabled){
 :where(.redesign) .hero-scenes:not([data-flow-ready]) .hero-scene-panel:not(:first-child){display:none}
}
 .top-image-open{overflow:hidden}

 .redesign{--green:#245e4c;--deep:#17382f;--navy:#13223c;--lime:#c5f45b;--pale:#f0f5ef;--line:#d2dfd5;--muted:#5c6e67;--cream:#fff2d7}
 :where(.redesign) [hidden]{display:none!important}
 :where(.redesign) .hero-scene-panel{min-width:0}
 :where(.redesign) .hero-scene-panel+.hero-scene-panel{margin-top:28px}
 :where(.redesign) .hero-scene-panel[hidden]+.hero-scene-panel{margin-top:0}
 :where(.redesign) .scene-transcript{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 :where(.redesign) .demo-panel{display:block;background:white;border:1px solid #cad9c5;border-radius:14px;padding:32px;scroll-margin-top:110px}
 :where(.redesign) .demo-panel+.demo-panel{margin-top:28px}
 :where(.redesign) .demo-panel[hidden]+.demo-panel{margin-top:0}
 :where(.redesign) .demo-heading{font-size:28px;line-height:1.65}
 :where(.redesign) .journey{margin-top:25px}
 :where(.redesign) .mini-actor{position:absolute;left:0;top:0;width:72px;height:72px;z-index:4;pointer-events:none}
 :where(.redesign) .scene-buttons{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}
 :where(.redesign) .tabs{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
 :where(.redesign) .flow-scene{display:block}
 :where(.redesign) .mini-scene{display:none}
 :where(.redesign) .pose-receive{opacity:1}
 .catalog-main:where(.redesign){padding:42px 0 70px}
 .redesign.catalog-main{padding:42px 0 70px}
 :where(.redesign) .image-dialog{max-width:min(1200px,calc(100vw - 30px));padding:0;border-radius:10px}
 :where(.redesign) .image-dialog-box img{width:100%;height:auto;max-height:78dvh;object-fit:contain}
 :where(.redesign) .journey-label h4{margin:0}
 :where(.redesign) .mini-bars svg{display:block}
 :where(.redesign) .hero .hero-copy>.eyebrow{white-space:normal}
 :where(.redesign) .flow-hero h1{margin:0 0 20px}
 :where(.redesign) .flow-hero h1>span{background:none;padding:0;color:var(--navy)}
 @media(max-width:860px){
  :where(.redesign) .flow-hero .hero-grid{min-height:0}
  :where(.redesign) .flow-hero h1{font-size:35px}
  :where(.redesign) .flow-hero h1>span{max-width:335px}
  :where(.redesign) .flow-visual{display:flex;flex-direction:column}
  :where(.redesign) .hero-scenes{order:2;width:100%}
  :where(.redesign) .flow-scene,:where(.redesign) .flow-kicker,:where(.redesign) .fiction,:where(.redesign) .scene-example{display:none}
  :where(.redesign) .flow-legend{display:block;font-size:8px;line-height:1.5;margin:3px 0 5px;letter-spacing:-.25px}
  :where(.redesign) .legend-auto:before,:where(.redesign) .legend-human:before{display:none}
  :where(.redesign) .scene-buttons{order:0;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
  :where(.redesign) .mini-scene{display:block;position:relative;padding:5px 6px 54px;min-height:200px}
  :where(.redesign) .mini-ai-action{height:18px;font-size:10px;line-height:1.5;color:#245e4c;padding-left:0;position:relative}
  :where(.redesign) .mini-ai-action>span{position:absolute;left:0;top:0;opacity:0}
  :where(.redesign) .mini-ai-action .mini-phase-done{opacity:1}
  :where(.redesign) .mini-flow{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:6px}
  :where(.redesign) .mini-step{min-width:0;padding:4px;border:1px solid transparent;border-radius:6px;position:relative}
  :where(.redesign) .mini-flow .mini-human{border-color:#13223c;background:#eef1f7}
  :where(.redesign) .mini-step .mini-caption{display:flex;align-items:center;justify-content:center;gap:3px;font-size:10px;white-space:nowrap}
  :where(.redesign) .mini-step+div:before{left:-8px;font-size:9px}
  :where(.redesign) .mini-caption .badge{font-size:8px;line-height:1.5;padding:1px 4px;letter-spacing:0}
  :where(.redesign) .mini-human-only{font-size:8px;line-height:1.5;white-space:normal;color:#13223c;margin:3px -3px}
  :where(.redesign) .mini-checklist{padding:3px;background:white;border:1px solid #91ac97;border-radius:4px;text-align:left}
  :where(.redesign) .mini-checklist>strong{display:block;font-size:8px;line-height:1.5}
  :where(.redesign) .mini-row{display:flex;align-items:center;justify-content:space-between;height:19px;border-top:1px solid #e1e7de;font-size:9px;letter-spacing:-.4px;white-space:nowrap;position:relative}
  :where(.redesign) .mini-question{background:#fff1bd}
  :where(.redesign) .mini-row-label,:where(.redesign) .mini-question-label,:where(.redesign) .mini-resolved{max-width:calc(100% - 15px);white-space:normal;font-size:8px;line-height:9px}
  :where(.redesign) .mini-resolved{position:absolute;left:0;background:#fff1bd}
  :where(.redesign) .mini-row .mini-box{display:block;flex-shrink:0;width:13px;height:13px;border:1px solid #13223c;border-radius:2px;color:#13223c;font-size:11px;line-height:11px;text-align:center;background:white;margin:0}
  :where(.redesign) .mini-original{position:absolute;left:0;right:0;top:0;bottom:auto;z-index:6;background:#13223c;color:white;border-radius:4px;padding:4px 1px;font-size:9px;line-height:12px;text-align:center;opacity:0;white-space:normal}
  :where(.redesign) .mini-cursor{position:absolute;left:0;top:0;width:21px;height:25px;z-index:7;opacity:0;pointer-events:none}
  :where(.redesign) .mini-paper,:where(.redesign) .mini-result{margin:11px auto 0;padding:5px 3px;border:1px solid #91ac97;border-radius:4px;background:white;max-width:100%;font-size:8px;line-height:1.5;text-align:left}
  :where(.redesign) .mini-paper strong,:where(.redesign) .mini-result strong,:where(.redesign) .mini-paper span{display:block;font-size:8px}
  :where(.redesign) .mini-paper i,:where(.redesign) .mini-result i{display:block;border-top:2px solid #c8d6c7;margin-top:5px}
  :where(.redesign) .mini-result i{border-top:4px solid #d8e8d4}
  :where(.redesign) .mini-complete{display:block;color:#245e4c;margin-top:3px;font-size:8px}
  :where(.redesign) .mini-actor{width:48px;height:48px;top:auto;bottom:2px;left:8px}
  :where(.redesign) .mini-scene[data-motion-ready] .mini-actor{top:0;bottom:auto;left:0}
  :where(.redesign) .mini-packet{position:absolute;top:0;left:0;font-size:8px;line-height:12px;padding:2px 3px;border:1px solid #91ac97;border-radius:3px;background:white;z-index:5;opacity:0;white-space:nowrap}
  :where(.redesign) .scene-actions{order:3;flex-wrap:nowrap;min-height:30px}
  :where(.redesign) #scene-state{max-width:200px;font-size:9px}
  :where(.redesign) #scene-demo-link{font-size:10px}
  :where(.redesign) .flow-controls{order:4}
  :where(.redesign) .hero-copy>.hero-consult{font-size:12px!important;margin-top:10px;min-height:44px;padding:10px 12px!important}
  :where(.redesign) .hero-copy>.fine{font-size:9px}
  :where(.redesign) .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.redesign) .demo-panel{padding:20px 16px}
  :where(.redesign) .demo-heading{font-size:22px}
 }
 @media(prefers-reduced-motion:reduce){:where(.redesign) *{scroll-behavior:auto!important}}

/* JavaScript がないときは完成図にそろえる（確認前と確認後の文が重なって見えていた。2026-10-17 Codex のレビューの指摘）。動くときはアニメーションが不透明度を切り替える */
.redesign .mini-question-label{opacity:0}
.redesign .mini-resolved{opacity:1}

/* 場面が5件でも、スマホの最初の画面に流れと相談ボタンを収める。タブの正式な文は保つ。 */
:where(.redesign) .scene-label-short{display:none}
@media(max-width:860px){
 :where(.redesign) .scene-label-full{display:none}
 :where(.redesign) .scene-label-short{display:inline}
}

/* 進め方の紺背景では本文を明るくし、スマホも16pxで読む。 */
.redesign .process .section-heading > p,
.redesign .process-grid p { color:#e4ecef; font-size:16px; line-height:1.9; }
.redesign .process .price-row > p { color:#354c44; font-size:16px; line-height:1.9; }
.redesign .process .price-row .text-link { color:#245e4c; font-size:15px; }
/* 紺背景のラベルと番号は、本文と同様に明るくする。料金枠は白背景のまま。 */
.redesign .process > .wrap > .eyebrow,
.redesign .process .step-num { color:#c5f45b; }
.redesign .process .step-num:after { background:#3c526a; }
.redesign #process-title > span { display:inline-block; }
/* 見出し右の説明に、段落の既定余白を重ねない。 */
.redesign .demo-intro { align-items:start; margin-bottom:16px; }
.redesign .demo-intro > p { margin:0; }
/* FAQの後の補助案内。カードの高さと見出しの強さを4件ともそろえる。 */
.redesign .services-small { padding:36px 0; }
.redesign .services-small h2 { font-size:22px; margin-bottom:18px; }
.redesign .services-small .service-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.redesign .services-small .service-card { padding:16px 36px 16px 16px; }
.redesign .services-small .service-card h3 { font-size:14px; line-height:1.65; margin:0; }
.redesign .services-small .service-card h3 br { display:none; }
.redesign .services-small .service-card p { font-size:12px; line-height:1.7; margin:6px 0 0; }
.redesign .services-small .service-card .service-kicker { font-size:11px; margin:0 0 4px; }
.redesign .services-small .card-arrow { right:10px; bottom:14px; width:20px; height:20px; font-size:12px; }
.redesign .services-small .non-ai-example { margin-top:16px; padding-top:12px; }
.redesign .services-small .non-ai-example a { font-size:13px; }
@media(max-width:1024px) { .redesign .services-small .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .redesign .services-small .service-grid { grid-template-columns:1fr; gap:8px; } }

/* タブの語を途中で分断しない。 */
.redesign .tabs button{word-break:normal;overflow-wrap:normal;text-wrap:balance}