/* =====================================================================
   Ouver サイト共通の見た目（下層ページ用）
   LP v2 の色・書体・部品を引き継ぎ、下層ページの決まり（2026-10-20、Codex の診断を反映）をまとめたもの。
   Astro に移すときは、このファイルをそのまま共通 CSS にする。
   色：紺 #0b2560 / 深い紺 #06153a / 紙 #faf8f4 / 机 #f3efe8 / 淡い青 #eef3fa / 白
       差し色オレンジ #dd4f28（主ボタン）・#c23f1f（文字の印・重要な数字）
   文字の階層：H1 52〜56px / H2 40px / H3 22〜24px / 本文 16px / 注記 14px / 英字ラベル 12px
   余白：8px 刻み。セクションの上下 96px（スマホ 64px）、見出しから中身まで 48px
   決まり：同じ見せ方を 3 セクション続けない。紺の大きな面は、成果・費用・相談だけに使う
   ===================================================================== */
html{scroll-behavior:smooth}
body{margin:0;background:#faf8f4;color:#14202f;font-family:"Noto Sans JP",sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1}
*,*:before,*:after{box-sizing:border-box}
img{display:block;max-width:100%}
a{color:#0b2560;text-decoration:none}
a:hover{color:#c23f1f}
:focus-visible{outline:3px solid #70a2ff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 改行：文節で折り返す。見出しは行の長さをそろえ、本文は最後の行を短くしすぎない */
body{word-break:auto-phrase;overflow-wrap:break-word}
h1,h2,h3,h4{text-wrap:balance}
p,dd,li{text-wrap:pretty}
.nb{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
b,strong{font-weight:700;color:#0b2560}

/* ---- 枠と余白 ---- */
.wrap{max-width:1296px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.sec{padding:clamp(64px,6.7vw,96px) 0;scroll-margin-top:64px}
.bg-white{background:#fff}
.bg-paper{background:#faf8f4}
.bg-blue{background:#eef3fa}

/* ---- セクションの頭：罫線＋英字ラベル → 見出し。説明は右に置く ---- */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 64px;margin-bottom:clamp(36px,4vw,48px)}
.sec-head-l{flex:1 1 520px;max-width:760px}
.sec-lead{flex:1 1 320px;max-width:440px;margin:0;color:#3f4a5e;font-size:16px;line-height:1.95}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:#c23f1f;font:600 12px/1 'DM Sans',sans-serif;letter-spacing:.16em}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.h2{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(28px,2.8vw,40px);line-height:1.42;letter-spacing:-.02em}
.h3{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(20px,1.7vw,24px);line-height:1.5;letter-spacing:-.015em}
.no{color:#c23f1f;font:700 13px/1 'DM Sans',sans-serif;letter-spacing:.14em}
.txt{margin:0;color:#3f4a5e;font-size:16px;line-height:1.9}
.txt+.txt{margin-top:14px}

/* ---- ボタン：主（オレンジ）・線（紺）・電話（紺の上の線） ---- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;height:56px;padding:0 28px;border-radius:3px;font-size:14.5px;font-weight:700;letter-spacing:.06em;transition:background .2s,color .2s,border-color .2s}
.btn .ar{font-family:'DM Sans';transition:transform .25s cubic-bezier(.16,.84,.3,1)}
.btn:hover .ar{transform:translateX(3px)}
.btn-primary{background:#dd4f28;color:#fff}
.btn-primary:hover{background:#c23f1f;color:#fff}
.btn-line{border:1px solid #0b2560;color:#0b2560;background:rgba(255,255,255,.4)}
.btn-line:hover{background:#0b2560;color:#fff}
.btn-tel{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;border:1px solid rgba(255,255,255,.35);color:#fff;font:500 15px 'DM Sans','Noto Sans JP',sans-serif;letter-spacing:.02em}
.btn-tel:hover{border-color:#fff;color:#fff}
.btn-tel small{color:rgba(255,255,255,.65);font-size:12px}
.more{display:inline-flex;align-items:center;gap:10px;color:#0b2560;font-size:14.5px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:3px}
.more .ar{font-family:'DM Sans';transition:transform .25s cubic-bezier(.16,.84,.3,1)}
.more:hover .ar{transform:translateX(3px)}

/* ---- ヘッダー（SiteHeader）：固定。上ではすき通り、下ろすとすりガラス。紺の面の上では紺のすりガラス ---- */
.hd{position:fixed;z-index:100;inset:0 0 auto;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.hd-in{display:flex;align-items:center;gap:32px;height:76px}
.hd-logo{position:relative;display:flex;align-items:center;margin-right:auto}
.hd-logo img{transition:opacity .3s}
.hd-nav{display:flex;gap:28px}
.hd-nav a{position:relative;font-size:14px;font-weight:500;letter-spacing:.04em;transition:opacity .2s}
.hd-nav a:hover{opacity:.6}
.hd-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:#dd4f28}
.hd-cta{height:44px;padding:0 22px;font-size:13px}
.hd-burger{position:relative;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;cursor:pointer}
.hd-burger span{position:absolute;left:10px;width:24px;height:1.5px;transition:transform .25s}
.hd-menu{position:fixed;inset:64px 0 0;background:#faf8f4;padding:16px 24px 32px;display:flex;flex-direction:column;overflow:auto}
.hd-menu a.it{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid #e2e8f2;color:#0b2560;font-size:17px;font-weight:700}
.hd-menu a.it span:last-child{font:600 11px 'DM Sans';letter-spacing:.16em;color:#c23f1f}
@media (max-width:1079px){.hd-in{height:64px}}

/* ---- ページの頭（下層ページ共通）
   1 段目：写真の帯。机の写真を全幅に敷き、物のない左側に見出しを載せる（LP の「課題の整理から」の帯と同じ作り）
   2 段目：説明と要点。左に説明、右に数字で言える要点
   3 段目：このページの目次 ---- */
.ph{position:relative;background:#f3efe8;overflow:hidden}
.ph-photo{position:absolute;inset:0}
.ph-photo img{width:100%;height:100%;object-fit:cover;object-position:right center}
.ph-scrim{position:absolute;top:0;bottom:0;left:0;width:max(60%,640px);pointer-events:none;
  background:linear-gradient(90deg,rgba(243,239,232,.94) 0%,rgba(243,239,232,.9) 34%,rgba(243,239,232,.72) 50%,rgba(243,239,232,.44) 64%,rgba(243,239,232,.18) 80%,rgba(243,239,232,0) 100%)}
.ph-photo::after{content:"";position:absolute;inset:0 0 auto;height:150px;pointer-events:none;background:linear-gradient(180deg,rgba(243,239,232,.9) 0%,rgba(243,239,232,.6) 45%,rgba(243,239,232,0) 100%)}
/* 下層ページの頭は、写真のあり・なしにかかわらず見出しを同じ高さに置く（上の余白は sv-head・cf-head と同じ。写真は帯の高さを保つだけ） */
.ph-copy{position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:clamp(440px,36vw,540px);padding:clamp(100px,8.6vw,124px) 0 56px}
.ph .crumb{margin-bottom:24px}
.ph .ph-h1{margin-top:4px}
.ph-copy>.wrap{width:100%}
.ph-box{max-width:660px}
.crumb{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 clamp(32px,4vw,48px);padding:0;list-style:none;color:#5c667a;font-size:12.5px}
.crumb li{display:flex;align-items:center;gap:10px}
.crumb li:not(:last-child)::after{content:"/";color:#a3abbb}
.crumb a{color:#5c667a}
.crumb a:hover{color:#c23f1f}
.ph-h1{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(34px,3.9vw,56px);line-height:1.3;letter-spacing:-.025em}
.ph-catch{max-width:34em;margin:14px 0 0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:clamp(18px,1.5vw,21px);line-height:1.6}
.ph-acts{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:36px}
.ph-intro{background:#faf8f4;padding:clamp(56px,6vw,80px) 0 0}
.ph-intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.ph-lead{max-width:600px;margin:0;color:#3f4a5e;font-size:16px;line-height:2}
.ph-lead+.ph-lead{margin-top:16px}
/* 要点：数字で言えることだけ。2×2 */
.facts{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid #0b2560}
.facts>div{padding:20px 0 22px;border-bottom:1px solid #d6dfec}
.facts>div:nth-child(odd){padding-right:20px}
.facts>div:nth-child(even){padding-left:24px;border-left:1px solid #d6dfec}
.facts dt{color:#5c667a;font-size:13px;line-height:1.5}
.facts dd{margin:8px 0 0;color:#0b2560;font:700 clamp(26px,2.3vw,32px)/1.2 'DM Sans','Noto Sans JP',sans-serif;letter-spacing:-.01em}
.facts dd.free{color:#c23f1f}
.facts-note{margin:10px 0 0;color:#5c667a;font-size:12.5px}
/* ページ内の目次 */
.toc{display:flex;flex-wrap:wrap;gap:0 36px;margin:clamp(48px,5vw,64px) 0 0;padding:0;list-style:none;border-top:1px solid #d6dfec}
.toc a{display:inline-flex;align-items:center;height:60px;color:#0b2560;font-size:14px;font-weight:700;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.toc a:hover{color:#c23f1f;border-bottom-color:#c23f1f}

/* ---- FAQ：見出しを上に、10 問を読みやすい幅（960px）で ---- */
.faq-wrap{max-width:960px;margin:0 auto}
.faq-l{margin-bottom:clamp(32px,4vw,44px)}
.faq-list{border-top:1px solid #0b2560}
.faq-item{border-bottom:1px solid #d6dfec}
.faq-q{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;gap:12px;align-items:center;width:100%;min-height:76px;padding:20px 0;border:0;background:transparent;text-align:left;cursor:pointer;color:#0b2560;font-family:'Noto Sans JP',sans-serif;font-size:17px;font-weight:700;line-height:1.6}
.faq-q:hover{color:#c23f1f}
.faq-q .no{font-size:13px;letter-spacing:.08em}
.faq-pm{position:relative;width:20px;height:20px;justify-self:end}
.faq-pm::before,.faq-pm::after{content:"";position:absolute;left:0;top:9.25px;width:20px;height:1.5px;background:#0b2560;transition:transform .3s}
.faq-pm::after{transform:rotate(90deg)}
.faq-item.open .faq-pm::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 48px 26px 64px;color:#3f4a5e;font-size:16px;line-height:1.9}

/* ---- ページ末の相談（紺）：左に見出しと説明、右に連絡の手段 ---- */
.cta{position:relative;overflow:hidden;background:#06153a;color:#fff;padding:clamp(72px,7.5vw,104px) 0}
.cta-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px clamp(40px,5vw,72px);align-items:center}
.cta .eyebrow{color:#ff9c78}
.cta h2{margin:0;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(28px,2.8vw,40px);line-height:1.42;letter-spacing:-.02em}
.cta p.lead{max-width:36em;margin:20px 0 0;color:rgba(255,255,255,.8);font-size:16px;line-height:1.9}
.cta-acts{display:flex;flex-direction:column;gap:14px}
.cta-acts .btn{width:100%;height:60px;font-size:15px}
.cta .note{margin:4px 0 0;color:rgba(255,255,255,.65);font-size:13px;line-height:1.7}

/* ---- フッターの見た目は SiteFooter.dc.html の中にある（LP からも単独で使うため） ---- */

/* ---- 狭い画面 ---- */
@media (max-width:999px){
  .ph-intro-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
}
@media (max-width:699px){
  .sec{padding:64px 0}
  /* ページの頭：写真は見出しの後ろに敷き、紙色を重ねて薄くする（写真だけの帯を作らない。2026-10-24 茗荷さん） */
  .ph{background:#faf8f4}
  .ph-photo img{object-position:86% 70%}
  .ph-photo::after{display:none}
  .ph-scrim{width:100%;background:linear-gradient(180deg,rgba(250,248,244,.9) 0%,rgba(250,248,244,.74) 45%,rgba(250,248,244,.36) 100%)}
  .ph-copy{min-height:0;padding:88px 0 44px}
  .crumb{margin-bottom:16px}
  .ph .crumb,.sv-head .crumb,.cf-head .crumb{margin-bottom:24px}
  .ph-h1{font-size:30px;line-height:1.4}
  .ph-catch{margin-top:14px;font-size:17px}
  .ph-acts{margin-top:24px}
  .ph-acts .btn{width:100%}
  .ph-intro{padding-top:40px}
  .facts dd{font-size:24px}
  .facts>div:nth-child(even){padding-left:16px}
  /* 目次は 2 列の格子に。1 項目ずつ下罫線で区切り、押しやすい高さに */
  .toc{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;border-top:1px solid #0b2560}
  .toc a{display:flex;width:100%;height:52px;border-bottom:1px solid #d6dfec;font-size:13.5px}
  .faq-q{grid-template-columns:40px minmax(0,1fr) 24px;font-size:16px}
  .faq-a p{padding:0 0 24px;font-size:15.5px;line-height:1.85}
  .cta{padding:72px 0}
}

/* =====================================================================
   装飾：方眼（2026-10-20 決定。A ロゴの弧・C 透かし文字・D 紙の質感と比べて選んだ）
   紙色の面にごく薄い方眼（設計図のイメージ）、カードの角に紺とオレンジの小さな L 字の印
   新しいカードを作ったら、下のカードの一覧にクラスを足す
   ===================================================================== */
.sv-head,.ph-intro,.bg-paper,.nf{background-image:linear-gradient(rgba(11,37,96,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,37,96,.045) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
:is(.sv-item,.ex-lead,.ex-card,.pr-box,.sp-box,.pl2>article,.fr2>article,.dx-case,.dv-case,.se-tech article,.ih-feat,.dv-ex,.fl-map,.fl-fig-in){position:relative}
:is(.sv-item,.ex-lead,.ex-card,.pr-box,.sp-box,.pl2>article,.fr2>article,.dx-case,.dv-case,.se-tech article,.ih-feat,.dv-ex,.fl-map,.fl-fig-in)::before,
:is(.sv-item,.ex-lead,.ex-card,.pr-box,.sp-box,.pl2>article,.fr2>article,.dx-case,.dv-case,.se-tech article,.ih-feat,.dv-ex,.fl-map,.fl-fig-in)::after{content:"";position:absolute;z-index:2;width:14px;height:14px;pointer-events:none}
:is(.sv-item,.ex-lead,.ex-card,.pr-box,.sp-box,.pl2>article,.fr2>article,.dx-case,.dv-case,.se-tech article,.ih-feat,.dv-ex,.fl-map,.fl-fig-in)::before{left:-1px;top:-1px;border-left:2px solid #0b2560;border-top:2px solid #0b2560}
:is(.sv-item,.ex-lead,.ex-card,.pr-box,.sp-box,.pl2>article,.fr2>article,.dx-case,.dv-case,.se-tech article,.ih-feat,.dv-ex,.fl-map,.fl-fig-in)::after{right:-1px;bottom:-1px;border-right:2px solid #dd4f28;border-bottom:2px solid #dd4f28}
/* FAQ の面は読むための面なので方眼を敷かない。スマホは方眼を薄く（小さな画面では目立ちすぎる） */
#faq{background-image:none}
@media (max-width:699px){.sv-head,.ph-intro,.bg-paper,.nf{background-image:linear-gradient(rgba(11,37,96,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(11,37,96,.028) 1px,transparent 1px)}#faq{background-image:none}}

/* ---- 動き：ページの頭の机の写真（2026-10-21。動画は使わず CSS だけ。docs/video-assets.md の案 1・案 2） ----
   案 1：写真がゆっくり寄り続ける（24 秒で 1.00 → 1.03、往復）。始めの「わずかに寄って落ち着く」（img に JS で 1.8 秒）のあと、
         写真の枠（.ph-photo）のほうを動かすので、2 つの動きはぶつからない
   案 2：窓から差す光の帯が、写真の上をゆっくり横切る（22 秒、往復）。暖かい白をごく薄く（いちばん明るい所で 10%）、帯は広くぼかして、screen で重ねる。光沢やきらめきにはしない
   トップは山の写真の版（光の粒と差し込む光がすでに動く）なので足さない
   transform と opacity だけで動かす。写真の読み込み（LCP）には触らない。動きを減らす設定では止める。スマホは寄りを止め、光を弱める */
.ph-photo{animation:ph-drift 24s ease-in-out 1.8s infinite alternate both;transform-origin:72% 50%;will-change:transform}
.ph-photo::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-30%;width:160%;pointer-events:none;mix-blend-mode:screen;opacity:.9;
  background:linear-gradient(112deg,rgba(255,244,224,0) 22%,rgba(255,244,224,.04) 36%,rgba(255,248,236,.10) 50%,rgba(255,244,224,.04) 64%,rgba(255,244,224,0) 78%);
  animation:ph-light 22s ease-in-out infinite alternate;will-change:transform}
@keyframes ph-drift{from{transform:scale(1)}to{transform:scale(1.03)}}
@keyframes ph-light{from{transform:translateX(-22%)}to{transform:translateX(22%)}}
@media (max-width:699px){
  .ph-photo{animation:none;transform:none}
  .ph-photo::before{opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  .ph-photo,.ph-photo::before{animation:none}
  .ph-photo::before{display:none}
}

/* サービスページの「特徴 01」の写真：スマホでは写真だけの帯を作らず、番号と見出しの後ろに敷いて下へ薄くする（2026-10-24 茗荷さん） */
@media (max-width:699px){
  .tk-feat-top{position:relative;display:block !important}
  .tk-feat-top .tk-feat-photo{position:absolute;inset:0 -20px auto;aspect-ratio:auto;height:260px;background:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%)}
  .tk-feat-top .tk-feat-photo::after{content:"";position:absolute;inset:0;background:rgba(250,248,244,.62)}
  .tk-feat-top>div:not(.tk-feat-photo){position:relative;padding-top:120px}
}
/* スマホのページ頭：パンくず・英字の見出し・日本語の見出しで同じ言葉が 3 回続くのを避ける（2026-10-24 茗荷さん）
   英字の見出しは出さない。パンくずは今のページ（見出しと同じ）を省き、上の階層だけを残す。上が「ホーム」だけなら出さない */
@media (max-width:699px){
  :is(.ph,.sv-head,.cf-head,.ar-head,.rq-sub-head) .eyebrow{display:none}
  .crumb li[aria-current="page"]{display:none!important}
  .crumb li:nth-last-child(2)::after{content:none}
  .crumb:has(li:nth-child(2):last-child){display:none}
  /* 高さも詰める：ヘッダーの下から見出しまで、見出しの下の余白 */
  .ph .ph-copy{padding:80px 0 28px}
  .ph .crumb,.sv-head .crumb,.cf-head .crumb,.ar-head .crumb{margin-bottom:14px}
  .ph-catch{margin-top:10px}
}