@charset "utf-8";
/* GROUND ARCH-X 開発ストーリー（page-groundarchx.php）専用のスタイル。
 *
 * デザイナー提供の standalone HTML(ground_arch_x v2-1) から起こしたもの。
 * 作りは page-cockpit.php / page-onepole.php と同じ。共通の約束事は
 * cockpit.css の冒頭を見ること。このページ固有の扱いは以下:
 *
 *   - すべて .groundarchx の下にスコープ
 *   - :root の変数と body の指定は .groundarchx に移動
 *   - standalone 自前のクロム（.site-header / .site-logo / .site-nav /
 *     .nav-menu / footer）とハンバーガーの script は捨てた。テーマが出す
 *   - 元CSSにはコメントが入っていたので、スコープ前に除去している。
 *     コメントが残っているとセレクタに混ざって取りこぼす
 *
 * このページは .container を使っていないのでリネームは不要（.wrap を使う）。
 * テーマの common.css と当たるのは .copy と .series だけだが、
 * どちらも無関係な親の下にしか定義が無いので実害なし。
 *
 * 読み込みは functions.php の tf_groundarchx_styles()。
 */

/* --- テーマのリセット対策 -------------------------------------------------
 * このページは standalone 側で p/h1-h4/figure の margin を自分で 0 にして
 * いるため、ABOUT 2026 や COCKPIT のような既定値の復元は要らない。
 * ただし common.css の img{margin:auto} だけは効いてしまうので打ち消す。
 */
.groundarchx img{margin:0}

/* --- ここからデザイナー版（機械変換） ----------------------------------- */
.groundarchx{--black:#101310;--black2:#161a16;--black3:#1e241e;--cream:#f3f2ed;--white:#fff;--ink:#222720;--olive:#73816e;--olive-light:#adbaa5;--fog:#b3b9b1;--line:#343a34;--pale-line:#d7dad1;--gold:#bba78a;--max:1160px;--pad:clamp(22px,4.4vw,78px)}
.groundarchx *, .groundarchx *::before, .groundarchx *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
.groundarchx{margin:0;background:var(--black);font-family:"Noto Sans JP","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--cream);font-size:15px;-webkit-font-smoothing:antialiased}
.groundarchx a{color:inherit;text-decoration:none}
.groundarchx button{font:inherit}
.groundarchx p, .groundarchx h1, .groundarchx h2, .groundarchx h3, .groundarchx h4, .groundarchx figure{margin:0}
.groundarchx img{max-width:100%}
.groundarchx .photo-slot>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.groundarchx p{line-height:2.15;letter-spacing:.015em}
.groundarchx ::selection{background:#81907a;color:#fff}
.groundarchx .wrap{width:min(var(--max),calc(100% - var(--pad)*2));margin-inline:auto}
.groundarchx .overline{font-size:11px;font-weight:750;letter-spacing:.22em;text-transform:uppercase;color:var(--olive-light)}
.groundarchx .overline .count{font-family:Georgia,serif;font-size:17px;color:var(--gold);letter-spacing:0;margin-right:12px}
.groundarchx .subtle{color:var(--fog)}
.groundarchx .hero{position:relative;min-height:714px;overflow:hidden;border-bottom:1px solid var(--line)}
.groundarchx .hero::after{position:absolute;content:"";inset:0;pointer-events:none;background:radial-gradient(circle at 77% 20%,rgba(110,123,101,.12),transparent 40%)}
.groundarchx .hero-grid{display:grid;grid-template-columns:53% 47%;min-height:714px}
.groundarchx .hero-copy{position:relative;z-index:2;padding:96px 54px 90px max(var(--pad),calc((100vw - var(--max))/2));display:flex;flex-direction:column;justify-content:center}
.groundarchx .hero .series{display:flex;align-items:center;gap:13px;color:#b4bdb0;letter-spacing:.20em;font-weight:650;font-size:10px}
.groundarchx .hero .series::before{content:"";width:32px;height:1px;background:var(--olive-light)}
.groundarchx .hero h1{font-family:Arial,"Noto Sans JP",sans-serif;letter-spacing:-.075em;font-weight:850;font-size:clamp(68px,8vw,123px);line-height:.87;margin:39px 0 32px}
.groundarchx .hero h1 span{display:block}
.groundarchx .hero h1 span:last-child{color:#899a81}
.groundarchx .hero .small-name{font-size:12px;font-weight:600;letter-spacing:.16em;color:#a8b4a2;margin-bottom:45px}
.groundarchx .hero h2{font-size:clamp(23px,2.4vw,34px);line-height:1.58;letter-spacing:-.05em;font-weight:750;margin-bottom:21px}
.groundarchx .hero p{color:#d0d5cd;font-size:14px;max-width:460px;line-height:2.1}
.groundarchx .hero-meta{display:flex;gap:30px;flex-wrap:wrap;padding-top:42px;margin-top:44px;border-top:1px solid #394039;font-size:10px;letter-spacing:.12em;color:#bcc5b9}
.groundarchx .hero-meta span strong{color:#fff;font-size:12px;margin-right:9px}
.groundarchx .hero-art{padding:clamp(20px,3vw,46px) var(--pad) clamp(20px,3vw,46px) 0;min-height:670px;display:flex;position:relative}
.groundarchx .photo-slot{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #596057;background:repeating-linear-gradient(135deg,rgba(164,179,153,.025) 0 2px,transparent 2px 13px),linear-gradient(140deg,#232a23,#111611 77%);color:#abb5a7;text-align:center;min-height:230px}
.groundarchx .photo-slot::before, .groundarchx .photo-slot::after{content:"";position:absolute;width:28px;height:28px;pointer-events:none}
.groundarchx .photo-slot::before{left:15px;top:15px;border-top:1px solid #8d9989;border-left:1px solid #8d9989}
.groundarchx .photo-slot::after{right:15px;bottom:15px;border-bottom:1px solid #8d9989;border-right:1px solid #8d9989}
.groundarchx .photo-slot .placeholder{position:relative;padding:22px;z-index:1}
.groundarchx .slot-no{font-family:Georgia,serif;color:#c2cebb;font-size:15px;font-style:italic}
.groundarchx .slot-icon{height:64px;width:80px;display:block;margin:16px auto;opacity:.65}
.groundarchx .slot-title{display:block;font-size:15px;font-weight:750;letter-spacing:.07em;color:#e0e7db;margin-bottom:7px}
.groundarchx .slot-details{font-size:11px;line-height:1.8;letter-spacing:.03em;color:#a7b0a2}
.groundarchx .photo-slot .corner-name{position:absolute;left:20px;bottom:19px;font-size:10px;letter-spacing:.20em;opacity:.55}
.groundarchx .hero-art .photo-slot{width:100%;min-height:625px}
.groundarchx .hero-art .photo-slot .slot-icon{width:126px;height:102px}
.groundarchx .section-nav{border-bottom:1px solid #353c35;background:#171c17}
.groundarchx .section-nav-inner{min-height:64px;display:flex;justify-content:space-between;gap:24px;align-items:center}
.groundarchx .section-nav .label{font-family:Georgia,serif;color:#95a18e;font-size:12px;letter-spacing:.09em}
.groundarchx .section-nav-links{display:flex;gap:36px;flex-wrap:wrap;font-size:10px;font-weight:700;letter-spacing:.16em;color:#d4dcd0}
.groundarchx .section-nav-links a{transition:color .15s}
.groundarchx .section-nav-links a:hover{color:#99b090}
.groundarchx .intro{background:var(--cream);color:var(--ink);padding:116px 0 113px}
.groundarchx .intro .overline{color:#697966}
.groundarchx .intro-grid{display:grid;grid-template-columns:46% 1fr;gap:9%;align-items:start}
.groundarchx .intro h2{font-weight:800;font-size:clamp(32px,3.5vw,50px);line-height:1.55;letter-spacing:-.06em;margin-top:31px}
.groundarchx .intro h2 em{font-style:normal;color:#566a54}
.groundarchx .intro .intro-copy{padding-top:43px}
.groundarchx .intro p{font-size:15px}
.groundarchx .intro p+p{margin-top:22px}
.groundarchx .borderline{height:1px;background:var(--pale-line);margin-top:72px}
.groundarchx .intro-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:29px}
.groundarchx .compare-card{padding:0 13px 0 18px;border-left:2px solid #879681}
.groundarchx .compare-card span{font-size:11px;font-weight:700;letter-spacing:.15em;color:#62745e}
.groundarchx .compare-card strong{display:block;font-size:17px;margin:8px 0}
.groundarchx .compare-card p{font-size:12px;color:#687068;line-height:1.9}
.groundarchx .chapter{padding:125px 0 126px;position:relative}
.groundarchx .chapter.dark{background:#111511}
.groundarchx .chapter.dark-alt{background:#1a1f1a}
.groundarchx .chapter.paper{background:var(--cream);color:var(--ink)}
.groundarchx .chapter.paper .overline{color:#65765e}
.groundarchx .chapter.paper .chapter-lead{color:#455144}
.groundarchx .chapter.paper .copy{color:#3d443c}
.groundarchx .chapter .chapter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.89fr);gap:clamp(48px,7vw,116px);align-items:center}
.groundarchx .chapter-grid.reverse{grid-template-columns:minmax(0,.89fr) minmax(0,1fr)}
.groundarchx .chapter-grid.reverse .chapter-content{order:2}
.groundarchx .chapter-grid.reverse .visual{order:1}
.groundarchx .chapter h2{font-size:clamp(29px,3.4vw,47px);font-weight:800;line-height:1.55;letter-spacing:-.063em;margin:21px 0 30px}
.groundarchx .chapter .chapter-lead{font-size:clamp(16px,1.5vw,20px);line-height:1.9;font-weight:700;letter-spacing:-.03em;margin-bottom:27px;color:#d8e3d3}
.groundarchx .copy p{font-size:14px;color:#bfc8bc;line-height:2.2}
.groundarchx .copy p+p{margin-top:21px}
.groundarchx .chapter.paper .copy p{color:#424b41}
.groundarchx .visual .photo-slot{aspect-ratio:4/5}
.groundarchx .visual .photo-slot.wide{aspect-ratio:4/3}
.groundarchx .ch-line{display:flex;align-items:center;gap:18px;margin-top:36px;color:#96a88e;font-size:10px;letter-spacing:.1em}
.groundarchx .ch-line:before{width:39px;height:1px;content:"";background:#8da086}
.groundarchx .paper .ch-line{color:#667a60}
.groundarchx .pullquote{border-left:2px solid #a7b8a1;padding:1px 0 1px 21px;color:#e4ebdf;line-height:1.75;font-size:clamp(17px,2vw,24px);font-weight:700;letter-spacing:-.035em;margin:32px 0 4px}
.groundarchx .chapter.paper .pullquote{color:#3e5140;border-color:#7b8e75}
.groundarchx .interview{padding:90px 0;background:#20261f;border-top:1px solid #3a4637;border-bottom:1px solid #3a4637}
.groundarchx .interview-layout{display:grid;grid-template-columns:43% 1fr;gap:9%;align-items:start}
.groundarchx .interview h2{font-size:clamp(25px,3vw,40px);line-height:1.6;letter-spacing:-.055em;margin:22px 0 20px}
.groundarchx .interview .intro-note{color:#abb9a7;font-size:13px;line-height:2}
.groundarchx .question-frame{border:1px solid #485648;padding:36px 42px;background:#222b22}
.groundarchx .question-frame .status{font-size:10px;letter-spacing:.18em;color:#adbeaa;padding-bottom:15px;border-bottom:1px solid #465247}
.groundarchx .question-frame ul{margin:23px 0 0;padding:0;list-style:none}
.groundarchx .question-frame li{font-size:14px;line-height:1.8;color:#e2e6df;padding:11px 0 11px 24px;position:relative}
.groundarchx .question-frame li::before{content:"+";position:absolute;left:0;color:#a4ba9f}
.groundarchx .interview .bottom-note{margin-top:25px;font-size:11px;color:#879784;letter-spacing:.02em}
.groundarchx .statement{background:#6c7b65;padding:68px 20px 72px;text-align:center;color:#fff}
.groundarchx .statement p{font-size:10px;letter-spacing:.2em;margin-bottom:19px;color:#e0e8dc}
.groundarchx .statement h2{font-weight:750;font-size:clamp(24px,3vw,39px);line-height:1.6;letter-spacing:-.05em}
.groundarchx .metric-row{border-top:1px solid #353d34;display:grid;grid-template-columns:1fr 1fr;margin-top:45px}
.groundarchx .metric{padding:25px 20px 9px 0}
.groundarchx .metric+.metric{padding-left:30px;border-left:1px solid #353d34}
.groundarchx .metric strong{font-family:Arial,sans-serif;color:#c5d1bd;font-size:52px;line-height:1;font-weight:450;letter-spacing:-.075em}
.groundarchx .metric small{display:block;font-size:11px;color:#abb7a6;line-height:1.8;margin-top:9px}
.groundarchx .chapter.paper .metric-row{border-color:var(--pale-line)}
.groundarchx .chapter.paper .metric+.metric{border-color:var(--pale-line)}
.groundarchx .chapter.paper .metric strong{color:#6b7e64}
.groundarchx .chapter.paper .metric small{color:#667460}
.groundarchx .choosing{background:#171c17;padding:110px 0 118px}
.groundarchx .choosing-heading{display:grid;grid-template-columns:1fr .9fr;gap:90px;align-items:end;margin-bottom:43px}
.groundarchx .choosing h2{font-size:clamp(30px,3.4vw,47px);letter-spacing:-.055em;line-height:1.55;margin:22px 0 0}
.groundarchx .choosing-heading>p{font-size:14px;color:#b9c2b4}
.groundarchx .choose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.groundarchx .choose-card{padding:35px 32px 39px;border:1px solid #414b40;background:#1f251f;min-height:240px}
.groundarchx .choose-card .n{font-family:Georgia,serif;font-size:26px;font-style:italic;color:#9eae97}
.groundarchx .choose-card h3{font-size:20px;margin:24px 0 13px;letter-spacing:-.035em}
.groundarchx .choose-card p{font-size:12px;color:#b5c0b1;line-height:2}
.groundarchx .choose-note{font-size:11px;color:#a4b09e;margin-top:21px;line-height:1.9}
.groundarchx .letter{background:var(--cream);color:var(--ink);padding:128px 0}
.groundarchx .letter-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,7vw,116px);align-items:center}
.groundarchx .letter .portrait{aspect-ratio:4/5}
.groundarchx .letter .overline{color:#6d7e66}
.groundarchx .letter h2{font-size:clamp(29px,3vw,42px);line-height:1.55;letter-spacing:-.05em;margin:22px 0 28px}
.groundarchx .letter .copy p{color:#3f493e}
.groundarchx .letter .signature{border-top:1px solid #ccd2c8;margin-top:28px;padding-top:25px;font-size:12px;line-height:2.2}
.groundarchx .letter .signature strong{display:block;font-size:21px}
.groundarchx .end-cta{padding:104px 0 113px;background:#0b0e0b;text-align:center}
.groundarchx .end-cta .overline{color:#b4c3ad}
.groundarchx .end-cta h2{font-family:Arial,"Noto Sans JP",sans-serif;font-size:clamp(50px,7.5vw,99px);font-weight:800;letter-spacing:-.075em;line-height:1;margin:24px 0 24px}
.groundarchx .end-cta h2 span{color:#788d73}
.groundarchx .end-cta h3{font-size:clamp(22px,2.7vw,34px);margin:0 0 20px;letter-spacing:-.04em}
.groundarchx .end-cta p{font-size:13px;color:#b6c2b3;max-width:580px;margin:0 auto 35px}
.groundarchx .link-live{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:#71836d;color:#fff;border:1px solid #859783;padding:19px 31px;font-size:13px;font-weight:750;letter-spacing:.05em;transition:background .2s ease,transform .2s ease}
.groundarchx .link-live:hover, .groundarchx .link-live:focus-visible{background:#8b9d86;transform:translateY(-2px)}
.groundarchx .link-live span{font-size:20px}
.groundarchx .hero-cta{display:inline-flex;align-items:center;align-self:flex-start;gap:18px;margin-top:28px;padding:13px 20px;border:1px solid #8b9b86;color:#e5eee2;background:#344335;font-size:12px;font-weight:700;letter-spacing:.05em;transition:background .2s ease}
.groundarchx .hero-cta:hover, .groundarchx .hero-cta:focus-visible{background:#50654d}
.groundarchx .hero-cta span{font-size:17px}
.groundarchx .end-cta .disclaimer{margin-top:25px;color:#7f8c7d;font-size:11px}
.groundarchx .editor-notes{background:#e9ebe4;color:#4d584b;border-top:1px solid #d4d9ce;padding:17px var(--pad) 19px;font-size:12px}
.groundarchx .editor-notes summary{cursor:pointer;font-weight:750}
.groundarchx .editor-notes div{max-width:900px;padding-top:16px;line-height:1.9}
.groundarchx .editor-notes ul{margin:0;padding-left:19px}
.groundarchx .only-mobile{display:none}
@media(max-width:1130px){
.groundarchx .hero h1{font-size:clamp(64px,8.3vw,100px)}
.groundarchx .hero-copy{padding-right:30px}
.groundarchx .section-nav-links{gap:20px}
}
@media(max-width:820px){
.groundarchx .hero-grid{grid-template-columns:1fr;min-height:auto}
.groundarchx .hero-copy{padding:90px var(--pad) 70px}
.groundarchx .hero h1{font-size:clamp(72px,13vw,126px)}
.groundarchx .hero-art{padding:0 var(--pad) 50px;min-height:auto}
.groundarchx .hero-art .photo-slot{height:420px;min-height:0}
.groundarchx .section-nav-inner{flex-direction:column;align-items:start;gap:18px;padding:17px 0}
.groundarchx .section-nav-links{gap:22px}
.groundarchx .intro-grid, .groundarchx .chapter .chapter-grid, .groundarchx .chapter-grid.reverse, .groundarchx .interview-layout, .groundarchx .choosing-heading, .groundarchx .letter-grid{grid-template-columns:1fr;gap:37px}
.groundarchx .chapter-grid.reverse .chapter-content, .groundarchx .chapter-grid.reverse .visual{order:initial}
.groundarchx .intro .intro-copy{padding-top:0}
.groundarchx .chapter, .groundarchx .intro, .groundarchx .letter{padding:85px 0}
.groundarchx .chapter .visual .photo-slot{aspect-ratio:16/10}
.groundarchx .chapter .visual .photo-slot.wide{aspect-ratio:16/10}
.groundarchx .interview{padding:78px 0}
.groundarchx .choosing{padding:86px 0}
.groundarchx .choosing-heading{gap:20px}
.groundarchx .letter .portrait{aspect-ratio:16/10}
}
@media(max-width:570px){
.groundarchx{font-size:14px}
.groundarchx .hero-copy{padding-top:80px;padding-bottom:46px}
.groundarchx .hero h1{font-size:clamp(63px,16vw,91px);margin:31px 0 26px}
.groundarchx .hero h2{font-size:24px}
.groundarchx .hero p{font-size:13px}
.groundarchx .hero .small-name{margin-bottom:26px}
.groundarchx .hero-meta{gap:15px;font-size:9px;margin-top:31px;padding-top:29px}
.groundarchx .hero-art .photo-slot{height:320px}
.groundarchx .section-nav-links{gap:14px 18px;font-size:9px}
.groundarchx .intro h2{font-size:31px;margin:20px 0 18px}
.groundarchx .intro-compare{grid-template-columns:1fr}
.groundarchx .intro{padding:76px 0}
.groundarchx .chapter, .groundarchx .letter{padding:79px 0}
.groundarchx .chapter h2{font-size:29px;margin:18px 0 22px}
.groundarchx .chapter .chapter-lead{font-size:16px}
.groundarchx .chapter .visual .photo-slot{aspect-ratio:4/3}
.groundarchx .interview h2{font-size:28px}
.groundarchx .question-frame{padding:28px 24px}
.groundarchx .question-frame li{font-size:13px}
.groundarchx .choose-grid{grid-template-columns:1fr}
.groundarchx .choose-card{min-height:0}
.groundarchx .choosing{padding:80px 0}
.groundarchx .statement{padding:62px 22px}
.groundarchx .letter .portrait{aspect-ratio:4/3}
.groundarchx .end-cta{padding:90px 0 95px}
.groundarchx .end-cta h2{font-size:clamp(56px,13vw,86px)}
.groundarchx .end-cta h3{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.groundarchx *{transition:none!important}
}

/* ==========================================================================
 * テーマとの折り合い（ここから下は手で足した部分）
 * ========================================================================== */

/* ページ内アンカーの着地点。
 * standalone のヘッダーは 76px だったので 110px だった。
 * テーマのヘッダーは position:fixed で 65px、768px 以下で 40px。
 * 合わせないと section-nav で飛んだ先の見出しが黒いヘッダーの裏に隠れる。
 */
html{scroll-padding-top:98px}
@media screen and (max-width:768px){
  html{scroll-padding-top:65px}
}

/* 写真が入ったスロット。
 *
 * .photo-slot は「まだ写真が無い」状態のための見た目（点線風の罫と
 * 四隅のカギ括弧、斜線の地）を持っている。写真を入れるとその上に
 * 罫と隅マークが重なるので、filled のときは全部止める。
 * 仮枠のまま残すスロットがあっても困らないよう、クラスで分けている。
 */
.groundarchx .photo-slot.filled{
  border:0;background:#161a16;color:inherit;min-height:0;
}
.groundarchx .photo-slot.filled::before,
.groundarchx .photo-slot.filled::after{content:none}


/* subnav のラベル。
 *
 * v3 で章見出しがドキュメンタリー調になったので、飛んだ先の見出しと
 * 同じ言葉に揃えてある。リンクの文字と着地点の見出しが違うと、
 * 押したあと「ここで合っているのか」が分からなくなる。
 *
 * 一度は章番号を頭に付けたが、拾っているのが8章のうち5本なので
 * 01 / 05 / 06 / 08 と飛び飛びになり、抜けているように見えた。
 * 番号を出すと「全章ある」と読まれるので、番号は付けない。
 * ここは目次ではなく、長い記事の中で拾って読むための導線。
 *
 * 全8章を並べると 1160px に収まらず2行になる。その形にするなら
 * .section-nav の min-height も見直すこと。
 */

/* --- ジレンマの図解 -------------------------------------------------------
 * 04章(素材・dark-alt)と05章(THE CHALLENGE・interview)の間に挟む。
 * 前後が暗いので、ここは紙色にして図の線を見せる。
 * 04 dark-alt → ここ paper → 05 interview → 06 paper で明暗が交互になる。
 *
 * 断面図は模式図なので実寸比ではない。SVG は viewBox だけで寸法を持たず、
 * 幅は親に追従する。線の太さは vector-effect を使っていないので、
 * 拡大すると太く見える。カードの幅を大きく変えるときは stroke-width を見直すこと。
 */
.groundarchx .dilemma{background:var(--cream);color:var(--ink);padding:clamp(80px,9vw,120px) 0}
.groundarchx .dilemma .overline{color:#65765e}
.groundarchx .dilemma h2{
  font-size:clamp(29px,3.4vw,47px);font-weight:800;line-height:1.55;
  letter-spacing:-.063em;margin:20px 0 24px;
}
.groundarchx .dilemma-lead{color:#424b41;font-size:15px;max-width:640px;margin:0 0 54px}

.groundarchx .fig{margin:0 0 56px}
.groundarchx .fig figcaption{
  display:flex;align-items:baseline;gap:14px;
  font-size:clamp(17px,1.9vw,21px);font-weight:800;letter-spacing:-.035em;
  color:var(--ink);padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--pale-line);
}
.groundarchx .fig-no{font-family:Georgia,serif;font-style:italic;color:#9a8a6c;font-size:19px}
.groundarchx .fig-note{font-size:12.5px;line-height:1.95;color:#5c665a;margin:14px 0 0}

/* 断面図の比較。左右で同じ高さに揃える */
.groundarchx .fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px)}
.groundarchx .fig-cell{background:#fff;border:1px solid var(--pale-line);padding:20px 22px 22px}
.groundarchx .fig-label{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;
  color:#6b7566;border:1px solid #cdd3c7;padding:5px 12px;margin-bottom:10px;
}
.groundarchx .fig-label.is-answer{color:#3d5540;border-color:#8fa088;background:#eef1ea}
.groundarchx .fig-cell svg{display:block;width:100%;height:auto}

/* 図の中の線。断面図も融合の図も同じ指定で描く。
 * .fig の下だけに限定すると、.answer 内の融合の図に当たらず
 * fill:none が効かないので真っ黒に潰れる。 */
.groundarchx .dilemma svg .shell{fill:none;stroke:#2a312a;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.groundarchx .dilemma svg .shell.is-thin{stroke-width:2;stroke:#7c8a78}
.groundarchx .dilemma svg .ground{stroke:#2a312a;stroke-width:3}
.groundarchx .dilemma svg .guide{stroke:#9aa396;stroke-width:1;stroke-dasharray:4 4}
.groundarchx .dilemma svg .dead{fill:#e2c98f;opacity:.5}
.groundarchx .dilemma svg .person{fill:none;stroke:#2a312a;stroke-width:2.4;stroke-linecap:round}
.groundarchx .dilemma svg .person circle{fill:#2a312a}
.groundarchx .dilemma svg .person.is-ghost{opacity:.3}
.groundarchx .dilemma svg .node{fill:#b4603a}
.groundarchx .dilemma svg .dim{stroke:#b4603a;stroke-width:2;fill:#b4603a}
.groundarchx .dilemma svg .t-dim{
  fill:#b4603a;font-size:13px;font-weight:700;text-anchor:middle;
  font-family:"Noto Sans JP",sans-serif;
}
.groundarchx .dilemma svg .t-note{
  fill:#8a7a52;font-size:12px;text-anchor:middle;
  font-family:"Noto Sans JP",sans-serif;
}

/* ポールが増える連鎖 */
.groundarchx .chain{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch}
.groundarchx .chain-item{
  background:#fff;border:1px solid var(--pale-line);padding:22px 18px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13.5px;line-height:1.85;font-weight:700;color:#3d443c;
}
.groundarchx .chain-item.is-bad{border-color:#c8a98c;background:#faf4ea;color:#7a4a28}
.groundarchx .chain-arrow{display:flex;align-items:center;color:#a8b0a4;font-size:19px}
.groundarchx .tradeoff{
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,26px);
  flex-wrap:wrap;margin-top:22px;padding:22px 16px;background:#20261f;color:#e8ece5;
  font-size:clamp(16px,2vw,22px);font-weight:750;letter-spacing:-.04em;text-align:center;
}
.groundarchx .tradeoff em{font-style:normal;color:#9aae93}

/* 答え（アーチ × X の融合） */
.groundarchx .dilemma .answer{border-top:1px solid var(--pale-line);padding-top:46px}
.groundarchx .dilemma .answer h3{
  font-size:clamp(23px,2.6vw,34px);font-weight:800;line-height:1.55;
  letter-spacing:-.05em;margin:18px 0 32px;color:var(--ink);
}
.groundarchx .fusion{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:clamp(10px,1.6vw,20px);align-items:center;margin-bottom:30px;
}
.groundarchx .fusion-cell{
  background:#fff;border:1px solid var(--pale-line);padding:16px 16px 20px;text-align:center;
}
.groundarchx .fusion-cell.is-result{border-color:#8fa088;background:#f6f8f3}
.groundarchx .fusion-cell strong{
  display:block;margin:10px 0 6px;font-size:15px;letter-spacing:-.02em;color:var(--ink);
}
.groundarchx .fusion-cell span{display:block;font-size:11.5px;line-height:1.85;color:#5c665a}
.groundarchx .fusion-op{
  font-size:clamp(20px,2.4vw,30px);font-weight:300;color:#8d9889;text-align:center;
}
.groundarchx .dilemma .answer-body{color:#424b41;font-size:14px;max-width:760px;margin:0}
.groundarchx .dilemma .ch-line{color:#78836f}

@media (max-width:820px){
  .groundarchx .fig-pair{grid-template-columns:1fr}
  .groundarchx .chain{grid-template-columns:1fr}
  /* 横並びが縦になるので、矢印も下向きにする */
  .groundarchx .chain-arrow{justify-content:center;transform:rotate(90deg);font-size:17px}
  .groundarchx .fusion{grid-template-columns:1fr}
  .groundarchx .fusion-op{padding:2px 0}
}
.groundarchx .fusion-cell svg{display:block;width:100%;max-width:190px;height:auto;margin:0 auto}

/* --- よくある不安に答える節 -----------------------------------------------
 * 動画の帯と07章(BEFORE YOU CHOOSE)の間。
 * 先に不安を解いてから、07 で正直な注意点を述べる順にしている。
 *
 * 明暗: 06 紙 → 動画 暗 → ここ 紙 → 07 暗 → 08 紙 で交互。
 * ここを暗い地にすると動画・07 と三連続で暗くなるので紙色のままにすること。
 */
.groundarchx .doubts{background:var(--cream);color:var(--ink);padding:clamp(76px,8vw,110px) 0}
.groundarchx .doubts .overline{color:#65765e}
.groundarchx .doubts h2{
  font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.55;
  letter-spacing:-.06em;margin:20px 0 22px;
}
.groundarchx .doubts-lead{color:#424b41;font-size:15px;max-width:620px;margin:0 0 46px}

.groundarchx .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);align-items:start}
.groundarchx .qa{background:#fff;border:1px solid var(--pale-line);padding:0 0 26px;display:flex;flex-direction:column}
/* 疑問は濃い地に白。本文（答え）と役割をはっきり分ける */
.groundarchx .qa .q{
  background:#20261f;color:#eef1ea;padding:22px 26px;
  font-size:clamp(16px,1.8vw,20px);font-weight:750;line-height:1.6;letter-spacing:-.04em;
}
.groundarchx .qa .a{padding:24px 26px 0}
.groundarchx .qa .a p{font-size:13.5px;line-height:2.05;color:#424b41;margin:0 0 15px}
.groundarchx .qa .a p:last-child{margin-bottom:0}
.groundarchx .qa .a strong{font-weight:800;color:#2f3a2e}

.groundarchx .checks{list-style:none;margin:0 0 18px;padding:0;background:#f4f5f0;border-left:2px solid #8fa088}
.groundarchx .checks li{
  font-size:12.5px;line-height:1.85;color:#3d443c;
  padding:11px 16px 11px 38px;position:relative;
}
.groundarchx .checks li+li{border-top:1px solid #e6e8e0}
/* チェック記号は文字ではなく罫で描く。フォントに依存させない */
.groundarchx .checks li::before{
  content:"";position:absolute;left:16px;top:16px;width:11px;height:6px;
  border-left:2px solid #7d9076;border-bottom:2px solid #7d9076;transform:rotate(-45deg);
}

.groundarchx .qa-metric{margin:0 0 16px}
.groundarchx .qa-metric .fig-row{display:flex;align-items:baseline;gap:8px}
.groundarchx .qa-metric strong{
  font-family:Arial,sans-serif;font-size:50px;line-height:1;font-weight:450;
  letter-spacing:-.075em;color:#6b7e64;
}
.groundarchx .qa-metric span{font-size:15px;font-weight:700;color:#5c665a}
.groundarchx .qa-metric > em{display:block}
.groundarchx .qa-metric em{
  display:block;font-style:normal;font-size:11px;font-weight:400;
  line-height:1.7;color:#7a8276;margin-top:6px;
}
.groundarchx .doubts .ch-line{color:#78836f;margin-top:30px}

@media (max-width:820px){
  .groundarchx .qa-grid{grid-template-columns:1fr}
}

/* --- v4 で足された部品 -----------------------------------------------------
 * デザイナー提供の v4（GROUND_ARCH_X_story_v4.html）で追加された CSS を
 * 機械変換でスコープしたもの。中身は触っていない。
 *
 *   .challenge-panel 系 … 02章の「開発で向き合った2つの課題」
 *   .price-explainer 系 … 03章の「価格の考え方」
 *   .letter-closing     … 08章の結び
 *
 * v4 で 02章と05章が .interview から .chapter に変わったため、
 * .interview 系の指定は使われなくなったが、消さずに残してある
 * （次の版で戻る可能性があるため）。
 */
.groundarchx .challenge-panel{align-self:stretch;padding:clamp(25px,3.3vw,45px);border:1px solid #435042;background:linear-gradient(160deg,#273126,#151b16);display:flex;flex-direction:column;justify-content:center;gap:0}
.groundarchx .challenge-top{font-size:11px;letter-spacing:.19em;color:#c3d0bc;padding-bottom:27px;border-bottom:1px solid #485447;font-weight:700}
.groundarchx .challenge-top span{font-size:11px;letter-spacing:.02em;font-weight:400;color:#aeb9a9}
.groundarchx .challenge-point{display:flex;gap:21px;padding:28px 0;border-bottom:1px solid #435041}
.groundarchx .challenge-point b{font:italic 26px Georgia,serif;color:#b8c9b0;line-height:1.35}
.groundarchx .challenge-point strong{display:block;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.04em;line-height:1.5}
.groundarchx .challenge-point p{color:#b0bead;font-size:12px;line-height:1.9;margin-top:10px}
.groundarchx .challenge-goal{padding:30px 0 4px}
.groundarchx .challenge-goal span{color:#acbda7;font-size:10px;letter-spacing:.16em;font-weight:700;display:block;margin-bottom:11px}
.groundarchx .challenge-goal strong{font-size:19px;line-height:1.65;letter-spacing:-.04em;color:#f5f5ee;display:block}
.groundarchx .price-explainer{border:1px solid #c4cfc0;background:#e9eee6;margin:29px 0 6px;padding:24px 25px 23px;color:#324331}
.groundarchx .price-label{font-size:11px;letter-spacing:.12em;font-weight:800;color:#61775b;margin-bottom:9px}
.groundarchx .price-explainer p{font-size:12px!important;line-height:1.95;color:#42523f!important}
.groundarchx .price-explainer a{display:inline-flex;gap:9px;border-bottom:1px solid #71846c;padding:6px 0 3px;color:#395439;font-size:12px;font-weight:750;margin-top:10px}
.groundarchx .price-explainer a:hover{opacity:.65}
.groundarchx .letter-closing{font-size:clamp(19px,2vw,25px)!important;font-weight:800;color:#3b573c;line-height:1.7!important;letter-spacing:-.03em;margin-top:35px}
@media(max-width:820px){
.groundarchx .challenge-panel{margin-top:10px}
}
@media(max-width:570px){
.groundarchx .challenge-panel{padding:25px 23px}
.groundarchx .challenge-point{gap:15px}
.groundarchx .price-explainer{padding:22px 20px}
.groundarchx .hero-cta{font-size:11px}
.groundarchx .letter-closing{font-size:19px!important}
}

/* --- v5 で足された部品 -----------------------------------------------------
 * デザイナー提供の v5（GROUND_ARCH_X_story_v5.html）の追加 CSS を
 * 機械変換でスコープしたもの。中身は触っていない。
 *
 *   .editorial-line   … 02章の引き（かつて手がけた一張が〜）
 *   .detail-note      … 04章の「あえて残した機能」（スカート）
 *   .decisions-panel  … 05章の「開発で選んだ3つの工夫」
 *   .field-insight    … 06章の本人の実感（ハンギングチェーン）
 *   .aftercare-panel  … 07章の「長く使うために」
 *   .story-archive    … 08章の後ろ。公開を続ける宣言の節
 */
.groundarchx .editorial-line{border-left:2px solid #8fa286;padding-left:20px;font-weight:700;font-size:18px;line-height:1.85;color:#e6eae1;margin-top:35px;letter-spacing:-.025em}
.groundarchx .detail-note{margin-top:32px;padding:21px 23px;background:#252e25;border-left:2px solid #a2b09b}
.groundarchx .detail-note>span, .groundarchx .field-insight span{display:block;color:#aabb9f;font-size:10px;letter-spacing:.13em;font-weight:750;margin-bottom:10px}
.groundarchx .detail-note strong{font-size:17px;color:#f0f2eb;display:block;margin-bottom:7px}
.groundarchx .detail-note p{font-size:12px;color:#bfceba;line-height:1.85}
.groundarchx .decisions-panel{display:grid;gap:0;margin-top:29px;border-top:1px solid #435044}
.groundarchx .decision{display:grid;grid-template-columns:110px 1fr;gap:4px 16px;padding:17px 0;border-bottom:1px solid #364136}
.groundarchx .decision>span{grid-row:span 2;font-size:10px;color:#a9b79e;letter-spacing:.09em;padding-top:4px}
.groundarchx .decision>strong{font-size:15px;color:#eef0e9}
.groundarchx .decision>p{font-size:12px;color:#b6c0b2;line-height:1.7}
.groundarchx .field-insight{margin-top:26px;border-left:2px solid #788d72;padding:12px 16px;font-size:16px;line-height:1.8;color:#40503d;font-weight:700}
.groundarchx .field-insight span{color:#657c5e}
.groundarchx .aftercare-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;margin:50px 0 15px;padding:36px 42px;background:#252c25;border:1px solid #485646;color:#eaf0e5}
.groundarchx .aftercare-panel span{display:block;color:#aebba8;font-size:10px;letter-spacing:.14em;margin-bottom:14px;font-weight:700}
.groundarchx .aftercare-panel h3{font-size:clamp(22px,2.4vw,29px);letter-spacing:-.04em;line-height:1.6}
.groundarchx .aftercare-panel p{font-size:13px;line-height:2;color:#d8dfd3}
.groundarchx .aftercare-panel p+p{margin-top:12px}
.groundarchx .aftercare-panel small{display:block;margin-top:14px;color:#b8c1b4;font-size:11px;line-height:1.8}
@media(max-width:760px){
.groundarchx .aftercare-panel{grid-template-columns:1fr;gap:17px;padding:25px 23px}
.groundarchx .decision{grid-template-columns:1fr;gap:5px}
.groundarchx .decision>span{grid-row:auto}
.groundarchx .editorial-line{font-size:16px}
.groundarchx .field-insight{font-size:15px}
}
.groundarchx .story-archive{background:#101611;border-top:1px solid #344036;border-bottom:1px solid #344036;padding:76px 0 83px;color:#edf1e9}
.groundarchx .story-archive .archive-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,6vw,95px);align-items:start}
.groundarchx .story-archive .overline{font-size:11px;color:#9cae95;letter-spacing:.16em;font-weight:700}
.groundarchx .story-archive h2{font-weight:780;font-size:clamp(24px,3vw,40px);line-height:1.6;letter-spacing:-.055em;margin-top:21px}
.groundarchx .story-archive .archive-body p{line-height:2.25;font-size:14px;color:#c9d1c6;margin-bottom:17px}
.groundarchx .story-archive .archive-sign{display:block;margin-top:30px;padding-top:17px;border-top:1px solid #3b463b;font-size:10px;font-weight:700;color:#9fac99;letter-spacing:.17em}
@media(max-width:820px){
.groundarchx .story-archive .archive-grid{grid-template-columns:1fr;gap:16px}
.groundarchx .story-archive{padding:65px 0}
.groundarchx .story-archive h2{margin-bottom:9px}
.groundarchx .story-archive .archive-body p{font-size:13px}
}

/* --- v6 / v7 で足された部品 ------------------------------------------------
 * デザイナー提供の v7（GROUND_ARCH_X_story_v7.html）の追加 CSS を
 * 機械変換でスコープしたもの。中身は触っていない。
 *
 *   .price-logic 系   … 03章の価格の考え方（従来 → 今回の2枠と矢印）
 *   .field-voices 系  … 06章と07章の間。使う人の声のエピソード
 *   .letter-address   … 08章の宛先見出し（既存ユーザー／初めての方／この先）
 */
.groundarchx .price-logic{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:13px;align-items:center;margin:18px 0 18px}
.groundarchx .price-logic>div{min-width:0;border:1px solid rgba(136,152,127,.32);border-radius:2px;padding:13px 14px;background:rgba(255,255,255,.04)}
.groundarchx .price-logic>div>span{display:block;font-size:10px;letter-spacing:.07em;color:#61765e;font-weight:700;margin-bottom:7px}
.groundarchx .price-logic strong{display:block;font-size:12px;line-height:1.7;letter-spacing:.01em}
.groundarchx .price-logic .price-arrow{text-align:center;color:#73816e;font-size:19px}
.groundarchx .price-explainer .price-footnote{font-size:11px!important;line-height:1.7!important;color:#637160!important;margin:4px 0 19px!important}
@media(max-width:510px){
.groundarchx .price-logic{grid-template-columns:1fr;gap:5px}
.groundarchx .price-logic .price-arrow{transform:rotate(90deg);line-height:20px}
}
.groundarchx .field-voices{background:#253026;color:#eef2e9;border-top:1px solid #40503e;border-bottom:1px solid #40503e;padding:86px 0 90px}
.groundarchx .voices-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,8vw,120px);align-items:start}
.groundarchx .field-voices .overline{color:#c0c9b7}
.groundarchx .field-voices h2{font-size:clamp(27px,3vw,42px);line-height:1.55;letter-spacing:-.06em;font-weight:780;margin:24px 0 30px}
.groundarchx .field-voices h2 em{font-style:normal;color:#bfd1b8}
.groundarchx .voices-line{height:1px;max-width:140px;background:#849980;margin:0 0 20px}
.groundarchx .voices-caption{font-size:12px;color:#aab9a5;line-height:2}
.groundarchx .voices-copy{border-left:1px solid #5f715d;padding-left:32px}
.groundarchx .voices-copy p{font-size:14px;line-height:2.25;color:#d1dbcf}
.groundarchx .voices-copy p+p{margin-top:19px}
.groundarchx .voices-copy strong{color:#fff;font-weight:750}
.groundarchx .letter-address{margin:38px 0 19px;border-top:1px solid #cbd3c7;padding-top:25px}
.groundarchx .letter-address span{display:block;color:#667b62;font-size:10px;letter-spacing:.12em;font-weight:800;line-height:1.75}
.groundarchx .letter-address h3{color:#2e402e;font-size:clamp(17px,1.55vw,21px);line-height:1.55;letter-spacing:-.04em;font-weight:780;margin-top:8px}
@media(max-width:820px){
.groundarchx .field-voices{padding:72px 0}
.groundarchx .voices-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:570px){
.groundarchx .field-voices{padding:66px 0}
.groundarchx .field-voices h2{font-size:28px}
.groundarchx .voices-copy{padding-left:20px}
.groundarchx .letter-address{margin:33px 0 17px}
}

/* --- v8 で足された設営動画の帯 ---------------------------------------------
 * v8 でデザイナー側に .setup-film（左に文章・右に16:9の枠）が入ったため、
 * こちらで作っていた全幅の .film 帯は役目を終えた。重複するので削除してある
 * （必要になったら git の履歴から戻せる）。
 *
 * 置き場所も指示書どおり、06章 → 使う人の声 → ここ → 07章 の順にした。
 * 動画の実体はこちらで差し込んでいる。仮枠用の罫と内側の線は
 * filled のときだけ止める。
 */
.groundarchx .setup-film .film-placeholder small{display:block;color:#a7b9a3;font-size:11px;line-height:1.9;margin-top:12px}
.groundarchx .setup-film .film-placeholder strong{display:block;font-size:17px;font-weight:730;line-height:1.6;letter-spacing:-.025em}
.groundarchx .setup-film .film-placeholder span{display:block;color:#b8c8b2;font-size:10px;font-weight:750;letter-spacing:.19em;margin-bottom:15px}
.groundarchx .setup-film .film-placeholder{position:relative;z-index:1;max-width:340px}
.groundarchx .setup-film .film-video-slot::before{content:'';position:absolute;inset:12px;border:1px solid rgba(179,194,173,.24);pointer-events:none}
.groundarchx .setup-film .film-video-slot{aspect-ratio:16/9;width:100%;border:1px solid #60735e;background:linear-gradient(145deg,#29362b,#111a14);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;text-align:center;padding:20px}
.groundarchx .setup-film .film-description{font-size:14px;line-height:2.12;color:#c7d1c3;max-width:480px}
.groundarchx .setup-film h2{font-size:clamp(26px,3vw,39px);line-height:1.55;letter-spacing:-.055em;margin:22px 0 22px}
.groundarchx .setup-film .overline{color:#a5b9a0}
.groundarchx .setup-film .film-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,6vw,90px);align-items:center}
.groundarchx .setup-film{padding:82px 0 89px;background:#121913;border-top:1px solid #3b4939;border-bottom:1px solid #3b4939;color:#f1f3ed}
@media(max-width:820px){
.groundarchx .setup-film{padding:70px 0}
.groundarchx .setup-film .film-grid{grid-template-columns:1fr;gap:30px}
.groundarchx .setup-film h2{margin:15px 0}
.groundarchx .setup-film .film-video-slot{max-width:850px}
}
@media(max-width:570px){
.groundarchx .setup-film{padding:60px 0 65px}
.groundarchx .setup-film h2{font-size:28px}
.groundarchx .setup-film .film-description{font-size:13px}
.groundarchx .setup-film .film-placeholder strong{font-size:14px}
}
/* 仮枠は flex の中央寄せで文字を置いていた。動画を入れたら枠いっぱいに
 * 敷きたいので block に戻す。flex のままだと height:100% が解決されず、
 * 動画が中央に小さく置かれて上下左右に黒帯が出る。 */
.groundarchx .setup-film .film-video-slot.filled{
  border:0;background:#000;display:block;position:relative;
}
.groundarchx .setup-film .film-video-slot.filled::before{content:none}
.groundarchx .setup-film .film-video-slot video{
  display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}