/* ============ サブページ共通 (service/shikumi/roadmap/company/news) ============ */
/* style.css のトークンを前提とする。読み物レイアウト+和の意匠を軽量に */

/* --- ヘッダー(ページ版): 常時背景 + モバイルドロワー --- */
.hd-page{background:rgba(16,18,35,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-dk);}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative;z-index:60;}
.menu-btn span{display:block;width:22px;height:2px;background:var(--paper);margin:5px auto;transition:transform .3s,opacity .3s;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-0px) rotate(-45deg);margin-top:-7px;}
@media (max-width:760px){
  /* backdrop-filter は fixed 子(ドロワー)の containing block を作るため、モバイルでは solid 背景に切替 */
  .hd{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,18,35,.96);}
  .menu-btn{display:block;margin-left:auto;}
  .hd .nav{position:fixed;inset:0;display:flex;background:rgba(16,18,35,.97);flex-direction:column;align-items:center;justify-content:center;gap:34px;margin:0;
    opacity:0;pointer-events:none;transition:opacity .28s;z-index:50;}
  .hd .nav a{font-size:17px;letter-spacing:.2em;}
  .hd .nav.open{opacity:1;pointer-events:auto;}
  .hd .btn-s{display:none;}
}

/* --- ページヒーロー --- */
.phero{min-height:46vh;display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,72px);
  padding:120px 24px 56px;position:relative;}
.phero-t{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--serif);font-weight:800;
  font-size:clamp(34px,6vw,58px);letter-spacing:.14em;color:var(--white);}
.phero-t em{font-style:normal;color:var(--gold);}
.phero-lead{max-width:30em;font-size:15px;color:#c7cadd;line-height:2.3;}
.phero-lead b{color:var(--white);}
.phero-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.34em;color:var(--mist);display:block;margin-bottom:14px;}
@media (max-width:700px){.phero{flex-direction:column;min-height:0;padding-top:104px;}.phero-t{writing-mode:horizontal-tb;letter-spacing:.1em;}}

/* --- 金継ぎ細線 (区切り) --- */
.kin-rule{max-width:840px;margin:0 auto;padding:0 24px;}
.kin-rule svg{width:100%;height:26px;display:block;}
.kin-rule path{fill:none;stroke-width:1.6;stroke-linecap:round;}

/* --- 本文 --- */
.pbody{max-width:800px;margin:0 auto;padding:24px 24px 80px;}
.psec{margin:72px 0;scroll-margin-top:96px;}
.psec-h{font-family:var(--serif);font-weight:800;font-size:clamp(22px,3.4vw,30px);color:var(--white);margin-bottom:10px;line-height:1.7;}
.psec-h .gd, .psec-h .ai-c{font-weight:800;}
.psec-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:10px;}
.psec-x{font-size:15px;color:#c7cadd;max-width:42em;}
.psec-x b{color:var(--white);}
.psec-x + .psec-x{margin-top:14px;}

/* 大一言 (ページの核) */
.pcopy{font-family:var(--serif);font-weight:800;font-size:clamp(20px,3vw,27px);color:var(--white);
  line-height:2.2;border-left:3px solid var(--gold);padding-left:22px;margin:34px 0;}

/* --- 定義リスト (誰のため/何を/いくら) --- */
.deflist{display:grid;gap:0;border-top:1px solid var(--rule-dk);}
.deflist>div{display:grid;grid-template-columns:9.5em 1fr;gap:18px;padding:20px 4px;border-bottom:1px solid var(--rule-dk);}
.deflist dt{font-family:var(--serif);font-weight:700;color:var(--gold);font-size:14.5px;letter-spacing:.06em;}
.deflist dd{font-size:14.5px;color:#c7cadd;}
.deflist dd b{color:var(--white);}
@media (max-width:620px){.deflist>div{grid-template-columns:1fr;gap:6px;}}

/* --- 旅程 (ステップ) --- */
.steps{counter-reset:st;display:grid;gap:0;margin-top:26px;position:relative;}
.steps::before{content:"";position:absolute;left:17px;top:22px;bottom:22px;width:2px;
  background:linear-gradient(var(--ai-b),var(--gold));opacity:.5;}
.step{position:relative;padding:16px 0 16px 58px;}
.step::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:14px;width:36px;height:36px;
  border:1.6px solid var(--gold);border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:13.5px;color:var(--gold);background:var(--ink);}
.step-t{font-weight:700;color:var(--white);font-size:15px;}
.step-x{font-size:13.5px;color:#aeb3cc;margin-top:2px;}
.step--hu .step-t::after{content:"人";margin-left:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink);background:var(--gold);border-radius:3px;padding:2px 7px;vertical-align:2px;}
.step--ai .step-t::after{content:"AI";margin-left:10px;font-family:var(--mono);font-size:10.5px;color:var(--white);background:var(--ai);border-radius:3px;padding:2px 7px;vertical-align:2px;}

/* --- 表 (価格/タイムライン) --- */
.tscroll{overflow-x:auto;margin:26px -24px 0;padding:0 24px;-webkit-overflow-scrolling:touch;}
table.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px;}
.tbl th{font-family:var(--serif);font-weight:700;color:var(--gold);text-align:left;
  border-bottom:1.6px solid var(--gold);padding:10px 14px 8px;white-space:nowrap;font-size:13px;letter-spacing:.05em;}
.tbl td{border-bottom:1px solid var(--rule-dk);padding:12px 14px;color:#c7cadd;vertical-align:top;line-height:1.9;}
.tbl td b, .tbl td .price{color:var(--white);}
.tbl .price{font-family:var(--mono);font-size:15px;}
.tbl tr.hl td{background:rgba(216,144,31,.07);}
.tbl-note{font-size:12px;color:var(--mist);margin-top:10px;line-height:2;}

/* --- 正直の注記 (仮説の明示) --- */
.honest{border:1px solid rgba(216,144,31,.4);border-radius:6px;padding:18px 22px;margin:30px 0;position:relative;background:rgba(216,144,31,.05);}
.honest::before{content:"正直な注記";position:absolute;top:-10px;left:16px;background:var(--ink);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--gold);padding:0 8px;}
.honest p{font-size:13.5px;color:#c7cadd;}

/* --- FAQ --- */
.faq{border-top:1px solid var(--rule-dk);margin-top:26px;}
.faq details{border-bottom:1px solid var(--rule-dk);}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:16px;align-items:baseline;padding:20px 4px;font-weight:700;color:var(--white);font-size:14.5px;}
.faq summary::before{content:"問";font-family:var(--serif);color:var(--gold);flex:0 0 auto;}
.faq summary::after{content:"+";margin-left:auto;color:var(--mist);font-family:var(--mono);transition:transform .25s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .faq-a{display:flex;gap:16px;padding:0 4px 22px;}
.faq .faq-a::before{content:"答";font-family:var(--serif);color:var(--ai-b);flex:0 0 auto;}
.faq .faq-a p{font-size:14px;color:#c7cadd;}

/* --- ことばカード (シェア) --- */
.kotoba{margin:88px auto 0;max-width:800px;padding:0 24px;}
.kotoba-card{border:1px solid var(--rule-dk);border-radius:8px;padding:44px 28px 30px;text-align:center;position:relative;
  background:
    radial-gradient(ellipse 90% 70% at 20% 10%, rgba(43,58,140,.16), transparent),
    radial-gradient(ellipse 80% 60% at 85% 90%, rgba(216,144,31,.10), transparent);}
.kotoba-card::before{content:"ことば";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--mist);padding:0 10px;}
.kotoba-t{font-family:var(--serif);font-weight:800;font-size:clamp(21px,3.6vw,30px);color:var(--white);line-height:2;}
.kotoba-t em{font-style:normal;color:var(--gold);}
.kotoba-knot{margin:16px auto 4px;display:block;width:34px;height:38px;}
.share-row{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.share-row a,.share-row button{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:#c7cadd;
  border:1px solid var(--rule-dk);border-radius:999px;padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;
  background:none;cursor:pointer;text-decoration:none;transition:border-color .25s,color .25s;}
.share-row a:hover,.share-row button:hover{border-color:var(--gold);color:var(--gold);}
.share-note{font-size:11px;color:var(--mist);margin-top:12px;}

/* --- 次に読む --- */
.next-nav{max-width:800px;margin:56px auto 0;padding:0 24px;}
.next-card{display:block;border:1px solid var(--rule-dk);border-radius:8px;padding:24px 26px;text-decoration:none;transition:border-color .3s;}
.next-card:hover{border-color:var(--gold);}
.next-l{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--mist);}
.next-t{font-family:var(--serif);font-weight:800;font-size:20px;color:var(--white);margin-top:6px;}
.next-t::after{content:"→";color:var(--gold);margin-left:12px;}

/* --- CTA帯 --- */
.pcta{text-align:center;margin:90px auto 0;padding:0 24px;}
.pcta-h{font-family:var(--serif);font-weight:800;font-size:clamp(22px,3.4vw,30px);color:var(--white);}
.pcta-x{font-size:14px;color:#c7cadd;margin:12px 0 22px;}

/* --- リビール --- */
body.page [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.22,.6,.2,1),transform .9s cubic-bezier(.22,.6,.2,1);}
body.page [data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){body.page [data-reveal]{opacity:1;transform:none;transition:none;}}

/* --- news --- */
.article{border-top:1px solid var(--rule-dk);padding:34px 0;}
.article time{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.1em;}
.article h2{font-family:var(--serif);font-weight:800;font-size:21px;color:var(--white);margin:8px 0 12px;line-height:1.8;}
.article p{font-size:14.5px;color:#c7cadd;}
.article p + p{margin-top:12px;}

/* --- 4層ゲート図 (shikumi) --- */
.gates{display:grid;gap:12px;margin-top:26px;}
.gate{display:grid;grid-template-columns:64px 1fr;gap:18px;border:1px solid var(--rule-dk);border-radius:6px;padding:16px 18px;align-items:center;}
.gate-n{font-family:var(--mono);font-size:13px;color:var(--gold);border-right:1px solid var(--rule-dk);align-self:stretch;display:flex;align-items:center;}
.gate-t{font-weight:700;color:var(--white);font-size:14.5px;}
.gate-x{font-size:13px;color:#aeb3cc;margin-top:2px;}

/* --- 5箇条 (company) --- */
.values{counter-reset:v;display:grid;gap:0;border-top:1px solid var(--rule-dk);margin-top:20px;}
.value{padding:26px 4px;border-bottom:1px solid var(--rule-dk);position:relative;}
.value::before{counter-increment:v;content:"其の" counter(v);font-family:var(--serif);font-size:12.5px;color:var(--gold);letter-spacing:.2em;}
.value h3{font-family:var(--serif);font-weight:800;font-size:19px;color:var(--white);margin:6px 0 8px;}
.value p{font-size:13.5px;color:#aeb3cc;}
.value .reject{display:inline-block;margin-top:8px;font-size:12px;color:var(--mist);border:1px dashed var(--rule-dk);border-radius:4px;padding:3px 10px;}
.value .reject b{color:var(--gold);font-weight:700;}

/* --- footer ナビ --- */
.ft-nav a{color:#c7cadd;text-decoration:none;font-size:12.5px;letter-spacing:.08em;}
.ft-nav a:hover{color:var(--gold);}

/* --- a11y: skip link (フォーカス時のみ出現) --- */
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;background:var(--gold);color:var(--ink);
  font-family:var(--sans);font-size:13px;font-weight:700;padding:12px 20px;border-radius:0 0 8px 8px;
  text-decoration:none;transition:top .2s;}
.skip-link:focus{top:0;}

/* --- モバイル: 横スクロール表のヒント --- */
@media (max-width:760px){
  .tscroll{position:relative;}
  .tscroll::before{content:"← 横にスクロールできます →";display:block;text-align:right;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--gold);margin-bottom:6px;}
  .tscroll::after{content:"";position:absolute;top:28px;right:0;bottom:0;width:34px;
    background:linear-gradient(to left,rgba(16,18,35,.9),rgba(16,18,35,0));pointer-events:none;}
  /* ドロワー内リンクのタップターゲット 44px+ */
  .hd .nav a{padding:12px 24px;}
}

/* --- メールコピー (インライン小ボタン) --- */
.copy-mail{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:#c7cadd;
  border:1px solid var(--rule-dk);border-radius:999px;padding:6px 14px;min-height:32px;margin-left:8px;
  background:none;cursor:pointer;transition:border-color .25s,color .25s;vertical-align:middle;}
.copy-mail:hover{border-color:var(--gold);color:var(--gold);}
.pcta-alt{font-size:12.5px;color:var(--mist);margin-top:14px;}