/*
 * トップページ固有スタイル（front-page.php）。
 * 2026-06-26 改定のスリム構成：FV／対応領域／深掘り導線／相談のみ。
 * 共通部品（.ey / .h2 / .btn / .linkcta / ヘッダー / フッター）は common.css を前提にする。
 */

.ink-panel{background:#16120d; color:#ffffff;}
/* 暗色パネル上のフォーカスリングは明色に（墨リングは1.04:1で不可視＝uiux-audit P1-3。フッターと同値） */
.ink-panel :focus-visible{outline-color:#efe9df;}
.consult-section :focus-visible{outline-color:#fff;}
.ink-panel .ey{color:#ffffff;}
.ink-panel .ey .ja{color:#b7ae9f;}
.ink-panel .h2{color:#ffffff;}
.ink-panel .s-intro,
.ink-panel .capabilities-close p{color:#ffffff;}
.ink-panel .h2 strong{color:inherit;}
.ink-panel .linkcta{color:#ffffff;}
/* 墨地のテキストリンクの赤（矢印・下線）＝暗い --red は黒地で沈むため明るい赤に（2026-07-14 代表） */
.ink-panel .linkcta .arr{color:var(--red-bright);}
.ink-panel .linkcta .ln::after{background:var(--red-bright);}
/* 墨パネル上のCTAボタンは反転（墨地に墨ボタンが沈むため、明色ボタン＋墨文字に） */
/* 墨パネル上の主CTA＝白ボタン＋墨文字（墨塗りは黒地に沈むため白ボタン）。hover は寒色グレー（--bg-tint）＋浮き
   ＝暖色ベージュのくすみを避けクールに（2026-07-14 代表確定）。迫り上げフィル(::before)は使わず background で切替。 */
.ink-panel .btn{background:#ffffff; color:#16120d;}
.ink-panel .btn::before{display:none;}
.ink-panel .btn:focus-visible{background:var(--hover-surface); box-shadow:0 14px 30px -12px rgba(0,0,0,.5);}
@media(hover:hover) and (pointer:fine){
  .ink-panel .btn:hover{background:var(--hover-surface); box-shadow:0 14px 30px -12px rgba(0,0,0,.5);}
}

/* ===== FV：固定canvas線アート＋領域firstコピー（2カラム・FV低め） ===== */
.fv{position:relative; overflow:hidden; padding:64px 0 84px; background:transparent;}
.fv-canvas{position:fixed; inset:0; z-index:-1; width:100vw; height:100vh; pointer-events:none; display:block;}
.fv .wrap{position:relative; z-index:2;}
/* 左：領域firstコピー／右：領域アイコン縦並び */
.fv-grid{display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1.02fr); gap:clamp(30px,3.4vw,56px); align-items:center;}
.fv-text{min-width:0;}
.fv .ey{margin-bottom:1.5em;}
.fv h1{font-family:var(--serif); font-weight:600; font-size:clamp(2rem, 1.1rem + 2.3vw, 3.05rem); line-height:1.5; letter-spacing:.01em; margin:0; color:var(--ink); font-feature-settings:"palt"; text-wrap:balance;}
.fv h1 .ln{display:block;}
.fv-foot{margin-top:1.9em;}
.fv .lead1{font-size:1.02rem; line-height:1.95; max-width:36em; margin:0 0 1.7em; color:var(--ink);}
.fv-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.fv-note{margin:1.9em 0 0; max-width:36em; font-size:.9rem; line-height:1.95; color:var(--ink-sub); padding-left:1.1em; border-left:2px solid var(--line);}
.fv-note small{font-size:inherit; line-height:inherit;}

/* 右：領域アイコンを縦並び（綴じ目の縦罫＋ハイラインで区切る／canvas上でも読めるよう白ハロー） */
.fv-domains{border-left:1px solid var(--line); padding-left:clamp(26px,2.6vw,40px);}
.dom{display:flex; align-items:center; gap:20px; padding:21px 2px; border-top:1px solid var(--line);}
.dom:first-child{border-top:none;}
.dom svg{width:42px; height:42px; flex:none; stroke:var(--ink); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.dom .dl{display:flex; flex-direction:column; line-height:1.36; min-width:0; text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 10px #fff;}
.dom .en{font-size:.7rem; letter-spacing:.14em; color:var(--ink-sub); font-weight:700; text-transform:uppercase;}
.dom .dl b{font-size:1.14rem; font-weight:700; letter-spacing:.02em; color:var(--ink);}
.dom .dl small{font-size:.82rem; color:var(--ink-sub);}

.scrollcue{position:absolute; left:38px; bottom:30px; z-index:2; display:flex; align-items:center; gap:11px; font-size:.7rem; font-weight:700; color:var(--ink-sub); text-transform:uppercase;}
.scrollcue i{width:40px; height:1px; background:var(--line); display:block;}

/* ===== S2 対応領域：実行手段としての4カード ===== */
.capabilities{position:relative; background:var(--bg); padding:110px 0 118px;}
.capabilities-head{max-width:55em;}
.capabilities-head .h2{max-width:none; font-size:2rem; line-height:1.55; letter-spacing:0;}
.capabilities-head .h2 strong{text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.22em; text-decoration-thickness:2px;}
.capabilities-head .s-intro{margin:1em 0 0; font-size:1.04rem;}
.cards4{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:46px;}
.card{position:relative; background:var(--bg); padding:46px 44px 50px; overflow:hidden; transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); cursor:pointer; text-decoration:none;}
.card::before{content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .3s var(--ease);}  /* 伸び演出はtransform＝非compositorのwidthアニメを避ける（seo-audit T-19。absolute＝視覚同一）。duration は hover 基準 .3s に統一（症状3・旧 .35s） */
.card::after{content:"→"; position:absolute; right:22px; bottom:18px; font-size:1.05rem; color:var(--ink-sub); opacity:.78; transition:transform .3s var(--ease), color .3s var(--ease);}
.card:focus-visible{background:var(--hover-surface); transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(25,23,20,.4);}  /* 押せる面は hover で浮かせる＝svc-card と統一（2026-07-14 代表・hover挙動の統一） */
.card:focus-visible::before{transform:scaleX(1);}
.card:focus-visible::after{color:var(--red); transform:translateX(5px);}
.card .lab{position:relative; z-index:1; display:inline-flex; align-items:center; gap:.55em; font-size:.64rem; font-weight:700; color:var(--ink-sub); text-transform:uppercase;}
.card .lab::before{content:""; width:14px; height:2px; background:var(--red); transition:width .35s var(--ease);}
.card:focus-visible .lab::before{width:26px;}
@media(hover:hover) and (pointer:fine){
  .card:hover{background:var(--hover-surface); transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(25,23,20,.4);}
  .card:hover::before{transform:scaleX(1);}
  .card:hover::after{color:var(--red); transform:translateX(5px);}
  .card:hover .lab::before{width:26px;}
}
.card h3{position:relative; z-index:1; font-family:var(--serif); font-size:1.34rem; font-weight:700; margin:.55em 0 .55em; color:var(--ink); line-height:1.55; letter-spacing:0;}
.card p{position:relative; z-index:1; font-size:.97rem; color:var(--ink-sub); margin:0; line-height:1.9;}
.capabilities-close{margin:66px auto 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; max-width:34em;}
.capabilities-close p{margin:0; font-size:1.32rem; line-height:1.65; font-weight:700;}
/* 枠線ボタン（副CTA）＝subpage.css の .btn-secondary と同仕様（front-page は subpage.css を読まないためここで定義）。
   hover は寒色グレー（--hover-surface）＋墨枠維持＋浮き＝「白いボタンは全て寒色グレーhover」ルール（2026-07-14 代表）。 */
.btn-secondary{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}
.btn-secondary::before{display:none;}
.btn-secondary:focus-visible{background:var(--hover-surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink), 0 14px 30px -12px rgba(25,23,20,.4);}
@media(hover:hover) and (pointer:fine){
  .btn-secondary:hover{background:var(--hover-surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink), 0 14px 30px -12px rgba(25,23,20,.4);}
}
.capabilities-close .btn-secondary{font-size:1.02rem; padding:.9em 1.9em;}

/* ===== S3 深掘り導線：外した論点を行き先へつなぐ ===== */
.deep-links-section{position:relative; background:var(--bg); padding:104px 0; border-top:1px solid var(--line);}
.deep-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:72px; align-items:start;}
.deep-meta{position:sticky; top:112px;}
.deep-meta .h2{margin-top:.35em; max-width:12em; letter-spacing:0;}
.deep-links{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.deep-links li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line);}
.deep-links p{margin:0; line-height:1.95; color:var(--ink-sub);}
.deep-links strong{color:var(--ink);}
.deep-links .linkcta{white-space:nowrap;}

/* ===== S3「心当たり」（Fix時デザインを復活：チェックリスト＋相談＋あわせて読む。背景＝s3-bg固定） ===== */
.symptoms{background-image:url('../img/index/s3-bg.svg'); background-repeat:no-repeat; background-position:center; background-size:cover; background-attachment:fixed; background-color:#16120d;}
.symptoms .deep-meta .h2{max-width:14em;}
/* 墨パネル化：白ハローは外し、本文を明色に（s3背景は墨地で淡いテクスチャとして残る） */
.symptoms .deep-meta,.symptoms .checklist,.symptoms .s3-close,.symptoms .sym-more{text-shadow:none;}
.symptoms .checklist li,.symptoms .s3-close{color:#ffffff;}
.symptoms .checklist strong,.symptoms .s3-close strong{color:#ffffff;}
.checklist{list-style:none; margin:0; padding:0; counter-reset:ck;}
.checklist li{position:relative; padding:26px 0 26px 60px; border-top:1px solid var(--line); font-size:1.06rem; line-height:1.85;}
.checklist li:last-child{border-bottom:1px solid var(--line);}
.checklist li::before{counter-increment:ck; content:"0" counter(ck); position:absolute; left:0; top:25px; font-family:var(--serif); font-weight:600; font-size:1.2rem; color:#cdc5b7; opacity:.75;}
.s3-close{margin:40px 0 0; max-width:40em; line-height:1.95;}
.s3-close .em-line{font-weight:700;}
.symptoms .fv-actions{margin-top:2.3em;}
/* あわせて読む（深掘り3リンクの併設＝小さく添える） */
.sym-more{margin-top:34px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 26px;}
.sym-more-l{font-size:.72rem; letter-spacing:.14em; font-weight:700; color:#b7ae9f;}
/* チェックリストの出現（順に上げフェード） */
:where(html.is-js) .symptoms.reveal .checklist li{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease);}  /* is-jsゲート（:where＝詳細度0）＝seo-audit T-16 */
.symptoms.reveal.in .checklist li{opacity:1; transform:none;}
.symptoms.reveal.in .checklist li:nth-child(1){transition-delay:.14s;}
.symptoms.reveal.in .checklist li:nth-child(2){transition-delay:.26s;}
.symptoms.reveal.in .checklist li:nth-child(3){transition-delay:.38s;}
.symptoms.reveal.in .checklist li:nth-child(4){transition-delay:.50s;}

/* ===== S4 相談：前版の赤いクロージングを維持 ===== */
.consult-section{text-align:center; position:relative; overflow:hidden; background:var(--red); color:#fff; padding:140px 0;}
/* 相談（赤）の背景＝会心の角印（白の透かし）。正＝docs/mock/top-synth-c.html .s7 .seal-bg */
.consult-section .seal-bg{position:absolute; left:50%; top:50%; width:min(108vw,900px); transform:translate(-50%,-50%); opacity:.08; z-index:0; pointer-events:none;}
.consult-section .seal-bg svg{width:100%; height:auto; display:block;}
.consult-section .seal-bg path,.consult-section .seal-bg polygon,.consult-section .seal-bg rect{fill:#ffffff;}
.consult-section .wrap{position:relative; z-index:1;}
.consult-section .ey{justify-content:center; color:#f3c9cc;}
.consult-section .ey .ja{color:#f3c9cc;}
.consult-section .ey::before{background:#ffffff;}
.consult-section .h2{max-width:24em; margin:.2em auto .9em; line-height:1.55; letter-spacing:0; color:#ffffff;}
.consult-section p{max-width:40em; margin:0 auto 2.2em; line-height:2; color:#fbe3e5;}
.consult-section p strong{color:#ffffff;}
.consult-section .fv-actions{justify-content:center;}
/* 赤クロージングの主CTA＝白ボタン反転（墨ボタンは赤地2.20:1で沈む＝uiux-audit P2-4・2026-07-16 代表採用。
   .ink-panel .btn と同型＝「白いボタンは寒色グレーhover」ルール（2026-07-14 代表）に従う。 */
.consult-section .btn{background:#ffffff; color:#16120d;}
.consult-section .btn::before{display:none;}
.consult-section .btn:focus-visible{background:var(--hover-surface); box-shadow:0 14px 30px -12px rgba(0,0,0,.5);}
@media(hover:hover) and (pointer:fine){
  .consult-section .btn:hover{background:var(--hover-surface); box-shadow:0 14px 30px -12px rgba(0,0,0,.5);}
}

/* ===== 実績・対応例（信頼ブロック：ダミーロゴ＋対応例カード） ===== */
.proof{background:#16120d; padding:104px 0; border-top:1px solid var(--line);}
.proof .h2{max-width:18em;}
.logos{margin:34px 0 8px;}
.logos-cap{font-size:.72rem; letter-spacing:.14em; font-weight:700; color:#b7ae9f; margin:0 0 14px;}
.logo-row{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
/* 墨セクション上でも、ロゴは1枚ずつ純白タイルに載せる（白背景前提のロゴも確実に表示） */
.logo-tile{aspect-ratio:16/9; border:1px solid var(--line); border-radius:4px; background:#ffffff; display:flex; align-items:center; justify-content:center; padding:10px 14px; color:#b9b3a8; font-size:.74rem; font-weight:700; letter-spacing:.12em; position:relative; overflow:hidden;}
/* 実ロゴ差し替え時：タイル内の画像は余白を持たせて中央に収める */
.logo-tile img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;}
.logo-tile::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(0,0,0,.018) 9px 18px);}  /* ダミーと一目で分かる斜線 */
.dummy-note{margin:14px 0 0; font-size:.74rem; color:#b7ae9f;}
.dummy-note .pl{display:inline-block; font-weight:700; color:#cdc5b7; border:1px solid rgba(233,227,214,.3); border-radius:3px; padding:.05em .5em; margin-right:.5em; font-size:.68rem; letter-spacing:.1em;}
.cases2{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:46px 0 0;}
.case{border-top:2px solid #cdc5b7; padding:24px 0 0;}
.case .tag{font-size:.72rem; letter-spacing:.12em; font-weight:700; color:var(--red-bright);}  /* 墨地で --red は2.29:1＝黒地用トークンへ（uiux-audit P1-7） */
.case h3{font-family:var(--serif); font-size:1.24rem; font-weight:600; margin:.5em 0 .5em; line-height:1.5; letter-spacing:0; color:#f7f2ea;}
.case p{margin:0; color:#cdc5b7; line-height:1.95; font-size:.95rem;}
.proof-foot{margin:34px 0 0;}

/* 実績＝テキスト列挙（守秘で固有名詞を伏せる・墨セクション上＝明色・約10件を2カラムでスキャンしやすく） */
.rec{margin:30px 0 0;}
.rec-cap{font-size:.72rem; letter-spacing:.1em; font-weight:700; color:#b7ae9f; margin:0 0 6px;}
.rec-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(30px,3.4vw,56px); border-top:1px solid rgba(233,227,214,.22);}
.rec-list li{padding:15px 0 14px; border-bottom:1px solid rgba(233,227,214,.18);}
.rec-meta{display:block; font-size:.72rem; letter-spacing:.03em; color:#b7ae9f; line-height:1.5; margin:0 0 .4em;}
.rec-desc{margin:0; font-family:var(--serif); font-size:1.02rem; font-weight:600; line-height:1.55; color:#f7f2ea; letter-spacing:0;}
.rec-more{margin:18px 0 0; font-size:.86rem; color:#b7ae9f;}
.rec-dl{margin:24px 0 0;}

/* ===== よくある相談（想定 FAQ） ===== */
.faq{background:var(--bg-warm); padding:104px 0; border-top:1px solid var(--line);}
.faq .h2{max-width:16em;}
.faq-list{margin:38px 0 0; border-top:1px solid var(--line);}
.faq-item{padding:28px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:30px; align-items:start;}
.faq-q{font-family:var(--serif); font-weight:600; font-size:1.12rem; line-height:1.6; color:var(--ink); letter-spacing:0; margin:0;}
.faq-q .qm{color:var(--red); margin-right:.4em; font-weight:700;}
.faq-a{margin:0; color:var(--ink-sub); line-height:1.95; font-size:.96rem;}
.faq-a .linkcta{margin-top:.5em; font-size:.9rem;}
.sec-note{font-size:.76rem; color:var(--ink-sub); margin:14px 0 0;}

@media(max-width:900px){
  .proof,.faq{padding:72px 0;}
  .logo-row{grid-template-columns:repeat(3,1fr);}
  .rec-list{grid-template-columns:1fr;}
  .cases2{grid-template-columns:1fr; gap:24px;}
  .faq-item{grid-template-columns:1fr; gap:8px;}
}

/* ===== モーション ===== */
.up{opacity:0; transform:translateY(18px); animation:top-up 1s var(--ease) forwards;}
.fv .ey.up{animation-delay:.05s;}
/* LCP候補（h1の行・リード文）は初期描画から完成位置に置く。
   opacity:1 でも transform animation 中はLCP確定が遅れるため、主要テキスト自体は動かさない。
   演出はラベル・CTA・補足・対応領域とFV canvasに限定する（PSI mobile 2026-07-20実測）。 */
.fv h1 .ln,
.fv .lead1.up{opacity:1; transform:none; animation:none;}
.fv-actions.up{animation-delay:.58s;}
.fv-note.up{animation-delay:.7s;}
.fv-domains.up{animation-delay:.62s;}
@keyframes top-up{to{opacity:1; transform:none;}}

/* reveal の初期非表示は html.is-js（header.php で付与）でゲート＝JS無効環境では素の表示のまま（seo-audit T-16）。
   ゲートは :where() で詳細度0に包む＝素の html.is-js 前置だと初期非表示(0,4,2)が表示側 .reveal.in(0,4,1) に
   勝ち続け、.in が付いても現れない（実測で検出）。.in 側（表示状態）は無ゲートでよい */
:where(html.is-js) .reveal .ey,
:where(html.is-js) .reveal .h2,
:where(html.is-js) .reveal .s-intro,
:where(html.is-js) .reveal .capabilities-close,
:where(html.is-js) .reveal .deep-links li,
:where(html.is-js) .consult-section.reveal p,
:where(html.is-js) .consult-section.reveal .fv-actions{
  opacity:0; transform:translateY(16px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.in .ey,
.reveal.in .h2,
.reveal.in .s-intro,
.reveal.in .capabilities-close,
.reveal.in .deep-links li,
.consult-section.reveal.in p,
.consult-section.reveal.in .fv-actions{opacity:1; transform:none;}
.reveal.in .h2{transition-delay:.06s;}
.reveal.in .s-intro{transition-delay:.13s;}
:where(html.is-js) .reveal .ey::before{width:0; transition:width .6s var(--ease) .18s;}
.reveal.in .ey::before{width:22px;}
:where(html.is-js) .capabilities.reveal .cards4 .card{opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease), background .3s var(--ease);}
.capabilities.reveal.in .cards4 .card{opacity:1; transform:none;}
.capabilities.reveal.in .cards4 .card:nth-child(1){transition-delay:.10s;}
.capabilities.reveal.in .cards4 .card:nth-child(2){transition-delay:.20s;}
.capabilities.reveal.in .cards4 .card:nth-child(3){transition-delay:.30s;}
.capabilities.reveal.in .cards4 .card:nth-child(4){transition-delay:.40s;}
.deep-links-section.reveal.in .deep-links li:nth-child(1){transition-delay:.10s;}
.deep-links-section.reveal.in .deep-links li:nth-child(2){transition-delay:.20s;}
.deep-links-section.reveal.in .deep-links li:nth-child(3){transition-delay:.30s;}

@media(max-width:960px){
  .deep-grid{grid-template-columns:1fr; gap:30px;}
  .deep-meta{position:static;}
  .deep-meta .h2{max-width:none;}
  .deep-links li{grid-template-columns:1fr; gap:16px;}
}

@media(max-width:900px){
  .fv{padding:44px 0 60px;}
  .fv-grid{grid-template-columns:1fr; gap:30px;}
  .fv-domains{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:6px;}
  .scrollcue{display:none;}
  .capabilities{padding:76px 0 86px;}
  .capabilities-head .h2{font-size:1.72rem;}
  .cards4{grid-template-columns:1fr;}
  .card{padding:36px 28px;}
  .deep-links-section{padding:72px 0;}
  .consult-section{padding:72px 0 88px;}
}

@media(max-width:560px){
  .fv h1{font-size:2.05rem; line-height:1.48;}
  .fv-actions .btn,
  .consult-section .btn{width:100%; justify-content:center;}
  .capabilities-close .btn-secondary{width:100%; justify-content:center; padding:.9em 1.2em;}
  .deep-links .linkcta{white-space:normal;}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .up,
  .fv h1 .ln,
  .reveal .ey,
  .reveal .h2,
  .reveal .s-intro,
  .reveal .capabilities-close,
  .reveal .deep-links li,
  .consult-section.reveal p,
  .consult-section.reveal .fv-actions,
  .symptoms.reveal .checklist li,
  .capabilities.reveal .cards4 .card{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;}
  .reveal .ey::before{width:22px !important; transition:none !important;}
}

/* タッチ中はhover由来の浮き・影を即時解除し、タップ後へ残さない。 */
.ink-panel .btn:active,
.consult-section .btn:active,
.capabilities.reveal .cards4 .card:active{transform:translateY(0); box-shadow:none; transition:none;}
.btn.btn-secondary:active{transform:translateY(0); box-shadow:inset 0 0 0 1px var(--ink); transition:none;}