/* ============================================================
   第10世代 下層ページ用CSS(gen10.css の後に読み込む)
   トップと同じ地・ガラスカード。固定ステージのイラストは第10世代で廃止
   ============================================================ */

/* 1枚パネルのページは上下の余白を少し詰め、フッターまで通す */
.s.pg{min-height:calc(100svh - 120px); padding-top:clamp(120px,17vh,190px)}
.pg .wrap{max-width:900px}

/* ページ見出し: 英大見出し + 日本語の題 */
.pg-head{margin-bottom:clamp(28px,4.4vw,44px)}
.pg-head h1{
  font-family:var(--en); font-weight:800; font-size:clamp(26px,3.4vw,42px);
  letter-spacing:.03em; line-height:1;
}
.pg-head .jp{
  display:block; margin-top:14px; font-size:14px; color:var(--ink2); letter-spacing:.04em;
}

/* ---------- 規約・ポリシー本文 ---------- */
.legal{padding:clamp(30px,4.4vw,58px)}
.legal h2{
  font-size:15px; font-weight:700; letter-spacing:.04em; margin-top:clamp(30px,3.6vw,42px);
  padding-top:clamp(24px,3vw,30px); border-top:1px solid var(--line2);
}
.legal h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.legal p{margin-top:14px; font-size:13.5px; line-height:1.95; color:var(--ink2)}
.legal ul{margin-top:12px}
.legal li{
  position:relative; padding-left:18px; margin-top:8px;
  font-size:13.5px; line-height:1.95; color:var(--ink2);
}
.legal li::before{content:""; position:absolute; left:2px; top:.95em; width:5px; height:1px; background:var(--mute)}
.legal a{color:var(--ink); text-underline-offset:4px}
.legal .rev{margin-top:clamp(30px,4vw,42px); font-size:12px; color:var(--mute)}

/* ---------- 404 ---------- */
.nf{text-align:center}
.nf .wrap{max-width:680px}
.nf .nf-code{
  font-family:var(--en); font-weight:800; font-size:clamp(76px,12vw,150px);
  line-height:.9; letter-spacing:-.02em; color:rgba(20,23,26,.08);
}
.nf h1{
  font-family:var(--mincho); font-weight:700; font-size:clamp(21px,3vw,34px);
  line-height:1.7; letter-spacing:.04em; margin-top:clamp(14px,2vw,20px);
}
.nf p{margin-top:clamp(20px,2.6vw,28px); font-size:13.5px; line-height:2.15; color:var(--ink2)}
.nf .btn{margin-top:clamp(28px,4vw,40px)}

/* ---------- 戻り導線 ---------- */
.back-link{
  display:inline-block; margin-top:clamp(28px,4vw,40px);
  font-size:13px; color:var(--ink2); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:3px;
  transition:border-color .3s, color .3s;
}
.back-link:hover{color:var(--ink); border-bottom-color:var(--accent-solid)}

@media (max-width:760px){
  .s.pg{min-height:0; padding-top:clamp(104px,15vh,150px)}
  .legal{padding:clamp(22px,5vw,30px)}
}

/* ============================================================
   Contact ページ
   ============================================================ */
.pg-lede{font-size:14px; line-height:1.95; color:var(--ink2); margin-bottom:clamp(26px,3.6vw,40px); max-width:38em}

.cform{padding:clamp(28px,4vw,52px)}
.cform-row{margin-bottom:clamp(22px,2.6vw,30px)}
.cform-label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ink); margin-bottom:10px;
}
.cform-label em{font-style:normal; color:var(--mute); margin-left:6px; font-size:11px}
.cform-input{
  width:100%; font:inherit; font-size:14px; color:var(--ink);
  background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; transition:border-color .25s, background .25s;
}
.cform-input:focus{outline:none; border-color:var(--ink); background:#fff}
.cform-textarea{resize:vertical; min-height:150px; line-height:1.95}
.cform-checks{display:flex; flex-wrap:wrap; gap:10px}
.cform-check{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-size:13px; background:rgba(255,255,255,.6); transition:border-color .25s, background .25s;
}
.cform-check:hover{border-color:var(--ink)}
.cform-check input{accent-color:var(--ink); width:14px; height:14px; margin:0}
.cform-check:has(input:checked){border-color:var(--ink); background:#fff}

/* ハニーポット(botだけが埋める。人間には見えない) */
.cform-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.cform-line{border:0; border-top:1px solid var(--line2); margin:clamp(24px,3vw,32px) 0}
.cform-agree{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink2); cursor:pointer}
.cform-agree input{accent-color:var(--ink); width:15px; height:15px; margin-top:4px}
.cform-agree a{color:var(--ink)}
.cform-turnstile{margin-top:clamp(20px,2.6vw,26px); min-height:66px}

.cform-status{margin-top:16px; font-size:13px; line-height:1.9}
.cform-status.is-ok{color:var(--ink)}
.cform-status.is-err{color:#B4483B}
.cform-done{
  margin-top:14px; font-family:var(--mincho); font-size:15px; line-height:2; color:var(--ink);
}
.cform-done a{margin-left:10px; font-family:var(--jp); font-size:13px; color:var(--ink2)}
.cform-actions{margin-top:clamp(24px,3vw,32px)}
.cform-submit{
  font:inherit; font-size:14px; letter-spacing:.06em; cursor:pointer;
  background:var(--ink); color:#fff; border:0; border-radius:999px; padding:15px 46px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .25s;
}
.cform-submit:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,23,26,.2)}
.cform-submit:disabled{opacity:.5; transform:none; box-shadow:none; cursor:default}

/* ご相談の流れ */
.cflow{margin-top:clamp(56px,8vw,96px)}
.cflow-label{font-family:var(--en); font-weight:800; font-size:12px; letter-spacing:.2em; color:var(--mute)}
.cflow-title{font-size:17px; font-weight:700; letter-spacing:.04em; margin-top:10px}
.cflow-grid{
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
  border-radius:var(--card-r); margin-top:clamp(22px,3vw,30px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035);
}
.cflow-step{padding:clamp(22px,2.4vw,30px) clamp(16px,1.6vw,22px); border-left:1px solid var(--line2)}
.cflow-step:first-child{border-left:0}
.cflow-step .no{display:block; font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.18em; color:var(--mute); margin-bottom:9px}
.cflow-step .w{display:block; font-family:var(--en); font-weight:800; font-size:clamp(14px,1.4vw,18px); color:var(--ink)}
.cflow-step .jp{display:block; margin-top:8px; font-size:11.5px; line-height:1.9; color:var(--ink2)}
.cflow-note{margin-top:clamp(20px,2.6vw,28px); font-size:12.5px; line-height:2; color:var(--mute)}
@media (max-width:900px){
  .cflow-grid{grid-template-columns:repeat(2,1fr)}
  .cflow-step:nth-child(odd){border-left:0}
  .cflow-step:nth-child(n+3){border-top:1px solid var(--line2)}
}

/* ============================================================
   Impact ページ(価値創出レポート型。第7世代の impv-* を第9世代の組みへ)
   ============================================================ */
.pg.impact .wrap{max-width:1080px}
.impact-lead{font-size:14px; line-height:1.95; color:var(--ink2); max-width:46em; margin-bottom:clamp(30px,4.4vw,46px)}

/* サマリー3枚 */
.imp-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px)}
.imp-stat{
  padding:clamp(22px,2.6vw,32px); border-radius:var(--card-r); text-align:center;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035);
}
.imp-stat strong{
  display:block; font-family:var(--mincho); font-weight:700;
  font-size:clamp(24px,3vw,38px); letter-spacing:.02em; line-height:1.3;
}
.imp-unit{font-size:.5em; margin-left:3px; letter-spacing:.04em}
.imp-label{display:block; margin-top:10px; font-size:11.5px; color:var(--mute); letter-spacing:.04em}
.imp-note{margin-top:clamp(16px,2vw,22px); font-size:11.5px; line-height:2; color:var(--mute)}

/* 明細(アコーディオン) */
.imp-list{margin-top:clamp(34px,5vw,56px); display:grid; gap:clamp(12px,1.6vw,18px)}
.imp-row{
  border-radius:var(--card-r); overflow:hidden;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035);
}
.imp-row summary{
  display:flex; align-items:flex-start; gap:clamp(14px,2vw,26px); cursor:pointer;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,32px); list-style:none;
}
.imp-row summary::-webkit-details-marker{display:none}
.imp-row .no{font-family:var(--en); font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--mute); padding-top:.4em}
.imp-row .ttl{flex:1; font-size:15.5px; font-weight:700; line-height:1.75; letter-spacing:.02em}
.impv-sum{display:block; margin-top:9px; font-size:12.5px; font-weight:400; color:var(--ink2)}
.impv-sum b{font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--ink)}
.impv-status{
  display:inline-block; margin-left:10px; font-size:10.5px; letter-spacing:.1em; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; vertical-align:2px;
}
.imp-row .ic{
  width:22px; height:22px; border:1px solid var(--line); border-radius:50%; flex:none;
  position:relative; margin-top:.2em; transition:border-color .3s, transform .4s var(--ease);
}
.imp-row .ic::before,.imp-row .ic::after{
  content:""; position:absolute; inset:50% 5px auto 5px; height:1px; background:var(--ink);
  transition:transform .3s var(--ease);
}
.imp-row .ic::after{transform:rotate(90deg)}
.imp-row[open] .ic{border-color:var(--ink)}
.imp-row[open] .ic::after{transform:rotate(0)}
.imp-row summary:hover .ic{transform:scale(1.08)}

.imp-detail{padding:0 clamp(20px,2.6vw,32px) clamp(26px,3vw,38px)}
.imp-cardlead{font-size:13.5px; line-height:1.95; color:var(--ink2); padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--line2)}

/* フェーズ一覧(01のみ) */
.impv-phases{margin-top:clamp(20px,2.4vw,28px); display:grid; gap:12px}
.impv-phase{display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:start}
.impv-phase .ph{font-family:var(--en); font-weight:800; font-size:10.5px; letter-spacing:.12em; color:var(--mute); padding-top:.5em}
.impv-phase .tx{font-size:12.5px; line-height:2; color:var(--ink2)}
.impv-phase .tx b{color:var(--ink)}

/* 実測KPI */
.impv-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:clamp(20px,2.4vw,28px)}
.impv-kpi{
  padding:16px 14px; border-radius:12px; text-align:center;
  background:rgba(255,255,255,.55); border:1px solid var(--line2);
}
.impv-kpi b{display:block; font-family:var(--mincho); font-weight:700; font-size:clamp(15px,1.6vw,20px)}
.impv-kpi span{display:block; margin-top:6px; font-size:10.5px; color:var(--mute); line-height:1.7}

/* 外注 vs 内製の比較バー */
.impv-bars{margin-top:clamp(22px,2.6vw,30px); display:grid; gap:14px}
.impv-bar{display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; align-items:center}
.impv-bar .lb{font-size:11.5px; color:var(--ink2); line-height:1.7}
.impv-bar .lb small{display:block; font-size:10px; color:var(--mute)}
.impv-track{position:relative; display:block; height:30px; background:var(--line2); border-radius:999px; overflow:hidden}
.impv-track i{
  position:absolute; inset:0 auto 0 0; width:var(--w,0); border-radius:999px;
  background:var(--ink); transform-origin:left; transform:scaleX(0);
}
.js .impv-track i{transition:transform 1.1s var(--ease)}
.impv-bars.is-in .impv-track i{transform:scaleX(1)}
.impv-track.alt i{background:var(--mute)}
.impv-track b{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--mincho); font-weight:700; font-size:12.5px; color:#fff; white-space:nowrap;
}
.impv-track.thin b{left:auto; right:14px; color:var(--ink)}
@media (prefers-reduced-motion:reduce){.impv-track i{transform:scaleX(1) !important}}
.impv-sub{margin-top:14px; font-size:11.5px; line-height:2; color:var(--mute)}

/* 要点・技術ピル・前提 */
.impv-points{margin-top:clamp(20px,2.4vw,28px); display:grid; gap:10px}
.impv-points li{position:relative; padding-left:18px; font-size:13px; line-height:1.9; color:var(--ink2)}
.impv-points li::before{content:""; position:absolute; left:2px; top:.95em; width:6px; height:1px; background:var(--mute)}
.impv-points li b{color:var(--ink)}
.impv-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:clamp(18px,2.2vw,24px)}
.impv-tags li{
  font-family:var(--en); font-size:10.5px; letter-spacing:.06em; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:rgba(255,255,255,.7);
}
.impv-basis{margin-top:clamp(18px,2.2vw,24px)}
.impv-basis summary{cursor:pointer; font-size:11.5px; color:var(--mute); letter-spacing:.04em}
.impv-basis summary:hover{color:var(--ink)}
.impv-basis p{margin-top:10px; font-size:11.5px; line-height:2; color:var(--mute)}

/* 相談CTA */
.imp-cta{margin-top:clamp(44px,6vw,72px); text-align:center}
.imp-cta-lede{font-size:14px; line-height:2.1; color:var(--ink2); margin-bottom:clamp(20px,2.6vw,28px)}

@media (max-width:900px){
  .imp-summary{grid-template-columns:1fr}
  .impv-kpis{grid-template-columns:repeat(2,1fr)}
  .impv-bar{grid-template-columns:1fr; gap:8px}
  .impv-phase{grid-template-columns:1fr; gap:4px}
}


/* ============================================================
   narrow でカードの外に出る小さい文字
   ------------------------------------------------------------
   1200px以下では人物が本文の背面に来る。--mute(#676D72)は素の地で
   ちょうど4.6:1しかなく、背面に何か重なると即座にAA割れするため、
   カードの外に出るものだけ本文色(--ink2 = 7.3:1)まで濃くする。
   **このブロックは基本ルールより後に置くこと**(前に置くと負ける)
   ============================================================ */
.imp-note, .cflow-label, .cflow-note{color:var(--ink2)}

/* ============================================================
   LOG ページ(このサイト自身の制作記録。9世代のギャラリー)
   ============================================================ */
.pg.log .wrap{max-width:920px}
.log-list{display:grid; gap:clamp(16px,2.2vw,26px)}
.log-item{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:0; padding:0; overflow:hidden;
}
.log-fig{margin:0; aspect-ratio:1.9; overflow:hidden; background:var(--w2); border-right:1px solid var(--line2)}
.log-fig img{width:100%; height:100%; object-fit:cover; display:block}
.log-body{padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px); align-self:center}
.log-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.log-no{font-family:var(--en); font-weight:800; font-size:12px; letter-spacing:.12em; color:var(--mute)}
.log-head h2{font-size:16px; font-weight:700; letter-spacing:.02em; line-height:1.6}
.log-tag{
  font-size:10px; letter-spacing:.12em; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.log-tag.is-now{color:var(--on-accent); background-image:var(--accent); border-color:var(--accent-edge)}
.log-tag.is-turn{color:var(--ink); border-color:var(--ink)}
.log-period{display:block; margin-top:6px; font-family:var(--en); font-size:11px; letter-spacing:.08em; color:var(--mute)}
.log-body p{margin-top:10px; font-size:13px; line-height:1.9; color:var(--ink2)}
.log-close{margin-top:clamp(30px,4.4vw,46px); font-size:13.5px; line-height:2.1; color:var(--mute)}
.log-close a{color:var(--ink2); font-weight:500; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:1px}
.log-close a:hover{color:var(--ink); border-bottom-color:var(--accent-solid)}
@media (max-width:860px){
  .log-item{grid-template-columns:1fr}
  .log-fig{border-right:0; border-bottom:1px solid var(--line2)}
}