/* ==========================================================================
   AI×クラウド会計 経理効率化コンサル サイト共通スタイル
   山下税理士・行政書士事務所
   配色は freee のブルーと Claude のクレイ／クリームを組み合わせている。
   見出しは明朝、本文はゴシック。
   ========================================================================== */

:root{
  /* --- 配色の出どころ ------------------------------------------------
     青   … freee の青 #2864F0（freee.co.jp の実測値。サイト全体で最も
            使われている色）。白地で 5.1:1 出るので、大きい文字にも
            小さい文字にもそのまま使える
     淡青 … #EEF3FF。freee のヒーロー背景と同じ、淡い水色の面
     濃青 … #143278 / #1E46AA。freee の深い青。濃色ブロックに使う
     橙   … Claude のクレイ #D97757（ボタンは白文字が読める濃度に落とした
            #B4552F を使う。コントラスト比 4.8:1）
            ※ freee 自身も「青の面＋橙のCTA」で組んでいるので、役割の
              分け方は本家と同じになる
     地色 … Claude のクリーム #FAF9F5
     ------------------------------------------------------------------ */
  --ink:#1f1e1d;
  --ink-soft:#5c5a55;
  --ink-faint:#6f6b63;
  --sky:#2864f0;
  --ai:#2864f0;
  --ai-deep:#143278;
  --ai-pale:#eef3ff;
  --shu:#b4552f;
  --shu-bright:#d97757;
  --shu-pale:#fbf0eb;
  --white:#ffffff;
  --paper:#faf9f5;
  --line:#e8e5dd;
  --line-2:#d5d1c7;
  --ok:#1f7a52;
  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho",serif;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif;
  --en:"Helvetica Neue",Arial,"Hiragino Sans",sans-serif;
  --wrap:1080px;
  --narrow:820px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ai);text-underline-offset:.22em}

/* --- 共通の器 --------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,5vw,2rem)}
.narrow{max-width:var(--narrow)}
section{padding:clamp(3.5rem,9vw,6rem) 0}
section[id]{scroll-margin-top:72px}
section.tight{padding:clamp(2.5rem,6vw,4rem) 0}
.bg-paper{background:var(--paper)}
.bg-navy{background:var(--ai-deep);color:#eef2fb}
.bg-navy a:not(.btn){color:#a9c4ff}

/* --- 見出し ----------------------------------------------------------- */
.eyebrow{
  font-family:var(--en);
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ai);margin-bottom:.9rem;
}
.bg-navy .eyebrow{color:#a9c4ff}
h2{
  font-family:var(--mincho);
  font-size:clamp(23px,4.4vw,32px);
  font-weight:600;line-height:1.5;letter-spacing:.02em;
  margin-bottom:.7rem;
}
h2 .thin{font-weight:400;color:var(--ink-soft)}
.bg-navy h2 .thin{color:rgba(238,242,251,.72)}
h3{
  font-family:var(--mincho);
  font-size:clamp(18px,3vw,21px);
  font-weight:600;line-height:1.6;margin-bottom:.5rem;
}
.lead{font-size:clamp(15px,2.4vw,17px);color:var(--ink-soft);margin-bottom:2.4rem;max-width:44em}
.bg-navy .lead{color:rgba(238,242,251,.85)}
.sec-head{margin-bottom:clamp(2rem,5vw,3rem)}

/* --- ヘッダー --------------------------------------------------------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .inner{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:58px;padding-top:.5rem;padding-bottom:.5rem;
}
.brand{display:flex;flex-direction:column;line-height:1.3;text-decoration:none;color:var(--ink);min-width:0}
.brand .b1{font-family:var(--mincho);font-size:15px;font-weight:600;letter-spacing:.03em;white-space:nowrap}
.brand .b2{font-size:10.5px;color:var(--ink-faint);letter-spacing:.04em;white-space:nowrap}
/* 狭い画面：事務所名は小さく1行、肩書きは省く。申込ボタンは残す */
@media(max-width:560px){
  .brand .b1{font-size:13px}
  .brand .b2{display:none}
  header.site .nav a.btn{padding:.55em .85em;font-size:12px;white-space:nowrap}
}
@media(max-width:380px){
  .brand .b1{font-size:12px;letter-spacing:0}
}
.nav{display:flex;align-items:center;gap:1.35rem;font-size:13.5px}
.nav a:not(.btn){color:var(--ink-soft);text-decoration:none}
.nav a:not(.btn):hover{color:var(--ai)}
.nav a.btn{text-decoration:none}
/* 狭い画面ではテキストリンクを隠し、申込ボタンだけ残す */
.nav a:not(.btn){display:none}
@media(min-width:900px){.nav a:not(.btn){display:inline}}

/* --- ボタン ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.6em;border-radius:6px;
  font-size:14.5px;font-weight:600;letter-spacing:.03em;
  text-decoration:none;border:1.5px solid transparent;
  transition:.16s ease;
}
.btn-main{background:var(--shu);color:#fff;border-color:var(--shu)}
.btn-main:hover{background:#98461f;border-color:#98461f}
.btn-sub{background:transparent;color:var(--ai);border-color:var(--line-2)}
.btn-sub:hover{border-color:var(--ai);background:var(--ai-pale)}
.bg-navy .btn-sub{color:#eef2fb;border-color:rgba(238,242,251,.34)}
.bg-navy .btn-sub:hover{background:rgba(255,255,255,.08);border-color:rgba(238,242,251,.6)}
.btn-sm{padding:.6em 1.15em;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn-note{font-size:12.5px;color:var(--ink-faint);margin-top:.9rem}
.bg-navy .btn-note{color:rgba(238,242,251,.76)}

/* --- ヒーロー --------------------------------------------------------- */
.hero{
  background:
    radial-gradient(ellipse 72% 62% at 84% 0%,rgba(40,100,240,.10),transparent 64%),
    linear-gradient(180deg,#ffffff 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(3rem,8vw,5rem);
}
.hero-tag{
  display:inline-block;font-size:12px;letter-spacing:.1em;
  color:var(--ai);background:var(--ai-pale);
  border:1px solid #cddbfd;border-radius:999px;
  padding:.35em .9em;margin-bottom:1.5rem;
}
.hero h1{
  font-family:var(--mincho);
  font-size:clamp(28px,6.4vw,50px);
  font-weight:600;line-height:1.42;letter-spacing:.01em;
  margin-bottom:1.3rem;
}
.hero h1 em{font-style:normal;color:var(--sky)}
.hero p.sub{font-size:clamp(15px,2.5vw,17.5px);color:var(--ink-soft);max-width:38em;margin-bottom:2rem}
/* AI税理士の定義。広告規程まわりの担保も兼ねるので、目立つ位置に置く */
.define{
  margin:-.6rem 0 2rem;padding:1.1rem 1.3rem;
  background:var(--ai-pale);border:1px solid #cddbfd;border-radius:6px;
  font-size:14.5px;line-height:1.9;max-width:44em;
}
.define b{color:var(--ai-deep)}

.hero-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(2.5rem,6vw,3.5rem);
}
.hero-facts div{background:var(--white);padding:1.1rem 1rem}
.hero-facts .n{font-family:var(--en);font-size:clamp(22px,4.4vw,28px);font-weight:600;color:var(--sky);line-height:1.2;white-space:nowrap}
.hero-facts .n small{font-size:.55em;font-weight:400;margin-left:.15em;white-space:nowrap;color:var(--ink-soft)}
.hero-facts .t{font-size:12px;color:var(--ink-soft);margin-top:.25rem;line-height:1.55}

/* --- 悩みリスト ------------------------------------------------------- */
.pains{display:grid;gap:.75rem}
@media(min-width:760px){.pains{grid-template-columns:1fr 1fr}}
.pain{
  display:flex;gap:.8rem;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--shu-bright);
  padding:1.05rem 1.2rem;
}
.pain .mk{color:var(--shu);font-weight:700;flex:0 0 auto;line-height:1.7}
.pain p{font-size:14.5px;line-height:1.8}
.pain p b{font-weight:600}
.pain-after{
  margin-top:2rem;padding:1.4rem 1.5rem;
  background:var(--ai-pale);border:1px solid #cddbfd;
  font-size:15px;line-height:1.9;
}
.pain-after b{color:var(--ai-deep)}

/* --- Before / After 表 ------------------------------------------------ */
.ba{width:100%;border-collapse:collapse;font-size:14px;background:var(--white)}
.ba th,.ba td{border:1px solid var(--line);padding:.85rem .9rem;vertical-align:top;text-align:left}
.ba thead th{background:var(--paper);font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.ba thead th.aft{background:var(--ai-deep);color:#fff}
.ba tbody th{width:9.5em;font-weight:600;background:#f4f2ec;font-size:13.5px}
.ba td.bef{color:var(--ink-soft);width:34%}
.ba td.aft{background:#f5f8ff;font-weight:500}
.ba td.aft b{color:var(--ai-deep)}
.ba{table-layout:fixed}
.ba-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ba-scroll table{min-width:600px}

/* 狭い画面では表をカード状に積み替える（横スクロールさせない） */
@media(max-width:640px){
  .ba-scroll{overflow-x:visible}
  .ba-scroll table{min-width:0}
  .ba,.ba tbody,.ba tr,.ba th,.ba td{display:block;width:auto}
  .ba{table-layout:auto;background:transparent}
  .ba thead{display:none}
  .ba tbody tr{border:1px solid var(--line);background:var(--white);margin-bottom:.9rem}
  .ba tbody th{width:auto;border:0;border-bottom:1px solid var(--line);font-size:14px;padding:.7rem .9rem}
  .ba td{border:0;width:auto;padding:.8rem .9rem}
  .ba td.bef{width:auto;padding-bottom:.4rem}
  .ba tbody th{width:auto}
  .ba td.bef::before,.ba td.aft::before{
    display:block;font-size:11px;letter-spacing:.1em;margin-bottom:.25rem;
    color:var(--ink-faint);font-weight:600;
  }
  .ba td.bef::before{content:"いままで"}
  .ba td.aft::before{content:"入れたあと";color:var(--ai)}
}

/* --- 仕事の流れ（図解） -----------------------------------------------
   4工程を横に並べ、工程ごとに「誰がやるか」をバッジで示す。
   AI（青）と税理士（橙）の色分けが、AI税理士の定義そのもの。 */
.flow{list-style:none;display:grid;gap:1.25rem;counter-reset:none}
@media(min-width:640px){.flow{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.flow{grid-template-columns:repeat(4,1fr);gap:1rem}}
.flow-step{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:8px;padding:1.35rem 1.3rem 1.4rem;
  border-top:4px solid var(--line-2);
}
.flow-step[data-who="ai"]{border-top-color:var(--sky)}
.flow-step[data-who="pro"]{border-top-color:var(--shu-bright)}
.flow-step[data-who="owner"]{border-top-color:var(--ai-deep)}
/* 工程の間の矢印。横並びのときは右向き、縦積みのときは下向き */
.flow-step:not(:last-child)::after{
  content:"";position:absolute;width:10px;height:10px;
  border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);
  left:50%;bottom:-1.05rem;transform:translateX(-50%) rotate(45deg);
}
@media(min-width:640px){
  .flow-step:nth-child(odd)::after{display:none}
  .flow-step:nth-child(2)::after{left:50%;bottom:-1.05rem;transform:translateX(-50%) rotate(45deg)}
}
@media(min-width:1000px){
  .flow-step:not(:last-child)::after{
    display:block;left:auto;right:-.85rem;bottom:auto;top:2.6rem;
    transform:rotate(-45deg);
  }
}
.fs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.fs-no{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--ink-faint)}
.fs-who{
  font-size:11.5px;font-weight:600;letter-spacing:.08em;
  padding:.2em .7em;border-radius:999px;
  color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);
}
.flow-step[data-who="ai"] .fs-who{color:var(--ai);background:var(--ai-pale);border-color:#cddbfd}
.flow-step[data-who="pro"] .fs-who{color:#fff;background:var(--shu);border-color:var(--shu)}
.flow-step[data-who="owner"] .fs-who{color:#fff;background:var(--ai-deep);border-color:var(--ai-deep)}
.fs-icon{
  width:44px;height:44px;margin-bottom:.8rem;
  fill:none;stroke:var(--ink-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.fs-icon .dot{fill:var(--ink-soft);stroke:none}
.fs-icon .base{stroke:var(--line-2)}
.flow-step[data-who="ai"] .fs-icon{stroke:var(--ai)}
.flow-step[data-who="ai"] .fs-icon .dot{fill:var(--ai)}
.flow-step[data-who="pro"] .fs-icon{stroke:var(--shu)}
.flow-step[data-who="pro"] .fs-icon .check{stroke:var(--shu);stroke-width:2.6}
.flow-step[data-who="owner"] .fs-icon{stroke:var(--ai-deep)}
.flow-step[data-who="owner"] .fs-icon .bars{stroke:var(--ai-deep);stroke-width:2.6}
.flow-step h3{font-size:19px;margin-bottom:.45rem}
.flow-step p{font-size:13.5px;color:var(--ink-soft);line-height:1.8}
.flow-step .fs-sub{
  margin-top:.7rem;padding-top:.65rem;border-top:1px dotted var(--line-2);
  font-size:12.5px;color:var(--ink-faint);
}
.flow-step[data-who="pro"] .fs-sub{color:var(--shu)}
.flow-note{
  margin-top:1.75rem;padding:1.1rem 1.3rem;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--shu-bright);
  font-size:14.5px;line-height:1.85;color:var(--ink-soft);
}
.flow-note b{color:var(--ink)}

/* --- 仕組みカード ----------------------------------------------------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards.c3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);padding:1.6rem 1.5rem}
.card .no{
  font-family:var(--en);font-size:11px;letter-spacing:.2em;
  color:var(--shu);margin-bottom:.6rem;
}
.card p{font-size:14px;color:var(--ink-soft);line-height:1.85}
.card p + p{margin-top:.6rem}
.card .real{
  margin-top:.9rem;padding-top:.8rem;border-top:1px dotted var(--line-2);
  font-size:12.5px;color:var(--ink-faint);line-height:1.75;
}
.card .real b{color:var(--ai);font-weight:600}

/* --- 紺地セクションの上に置くカード -----------------------------------
   .cards はグリッド線をコンテナ背景（クリーム）で描いているため、
   紺地の上ではコンテナごと色を差し替えないと白文字が読めなくなる。 */
.bg-navy .cards{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.17)}
.bg-navy .card{background:#1e46aa}
.bg-navy .card h3{color:#fff}
.bg-navy .card p{color:rgba(238,242,251,.86)}
.bg-navy .card .no{color:#ffcdb8}
.bg-navy .note{color:rgba(238,242,251,.74)}
.cta-bring{font-size:13.5px;color:rgba(238,242,251,.82);margin-bottom:1.3rem}

/* --- 進め方 ----------------------------------------------------------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:840px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--white);padding:1.5rem 1.35rem;position:relative}
.step .st{
  font-family:var(--en);font-size:10.5px;letter-spacing:.18em;
  color:var(--ink-faint);margin-bottom:.55rem;
}
.step h3{font-size:17px;margin-bottom:.45rem}
.step p{font-size:13.5px;color:var(--ink-soft);line-height:1.8}
.step .when{
  display:inline-block;margin-top:.8rem;font-size:11.5px;
  color:var(--ai);background:var(--ai-pale);border:1px solid #cddbfd;
  padding:.2em .6em;
}

/* --- 比較（誰に頼むか） ------------------------------------------------ */
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--white)}
.cmp th,.cmp td{border:1px solid var(--line);padding:.8rem .85rem;text-align:left;vertical-align:top}
.cmp thead th{background:var(--paper);font-size:12.5px;color:var(--ink-soft);font-weight:600}
.cmp thead th:last-child{background:var(--ai-deep);color:#fff}
.cmp tbody th{width:8.5em;background:#f4f2ec;font-weight:600;font-size:13px}
.cmp td:last-child{background:#f5f8ff}
.cmp .mk-o{color:var(--ok);font-weight:700}
.cmp .mk-x{color:var(--ink-faint);font-weight:700}
.cmp{table-layout:fixed}

/* 4列の比較表も、狭い画面では縦に積む */
@media(max-width:700px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp{table-layout:auto;background:transparent}
  .cmp thead{display:none}
  .cmp tbody tr{border:1px solid var(--line);background:var(--white);margin-bottom:.9rem}
  .cmp tbody th{width:auto;border:0;border-bottom:1px solid var(--line);font-size:14px;padding:.7rem .9rem}
  .cmp td{border:0;padding:.7rem .9rem .2rem}
  .cmp td:last-child{padding-bottom:.9rem}
  .cmp td::before{
    display:block;font-size:11px;letter-spacing:.08em;margin-bottom:.2rem;
    color:var(--ink-faint);font-weight:600;
  }
  .cmp td:nth-of-type(1)::before{content:"IT導入支援・ベンダー"}
  .cmp td:nth-of-type(2)::before{content:"一般的な税理士事務所"}
  .cmp td:nth-of-type(3)::before{content:"当事務所";color:var(--ai)}
}

/* --- 料金 ------------------------------------------------------------- */
.plans{display:grid;gap:1.25rem}
@media(min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{
  background:var(--white);border:1px solid var(--line);
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;
}
.plan.reco{border:2px solid var(--ai);position:relative}
.plan.reco::before{
  content:"いちばん多い入り方";
  position:absolute;top:-.85rem;left:1.2rem;
  background:var(--ai);color:#fff;font-size:11px;letter-spacing:.06em;
  padding:.2em .7em;
}
.plan .pname{font-family:var(--mincho);font-size:19px;font-weight:600;margin-bottom:.35rem}
.plan .ptag{font-size:12.5px;color:var(--ink-faint);margin-bottom:1rem}
.plan .price{
  font-family:var(--en);font-size:clamp(26px,5vw,32px);font-weight:600;
  color:var(--ai-deep);line-height:1.2;margin-bottom:.15rem;
}
.plan .price small{font-size:.44em;font-weight:400;color:var(--ink-soft);margin-left:.25em}
.plan .punit{font-size:12px;color:var(--ink-faint);margin-bottom:1.1rem}
.plan ul{list-style:none;font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin-bottom:1.3rem}
.plan ul li{padding-left:1.15em;position:relative;margin-bottom:.35rem}
.plan ul li::before{content:"—";position:absolute;left:0;color:var(--line-2)}
.plan .foot{margin-top:auto}
.price-note{
  margin-top:1.5rem;font-size:13px;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);padding:1.1rem 1.25rem;line-height:1.85;
}

/* --- プロフィール ----------------------------------------------------- */
.prof{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
@media(min-width:800px){.prof{grid-template-columns:290px 1fr}}
.prof figure{border:1px solid var(--line);background:var(--white);overflow:hidden}
.prof figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:82% center}
.prof figcaption{
  font-size:12px;color:var(--ink-faint);text-align:center;
  padding:.7rem .5rem .9rem;line-height:1.7;letter-spacing:.04em;
  border-top:1px solid var(--line);
}
.prof p{font-size:15px;line-height:1.95;color:var(--ink-soft)}
.prof p + p{margin-top:1rem}
.prof .name{font-family:var(--mincho);font-size:22px;color:var(--ink);font-weight:600;margin-bottom:.2rem}
.rec{list-style:none;margin-top:1.4rem;border-top:1px solid var(--line)}
.rec li{
  display:grid;grid-template-columns:7.5em 1fr;gap:.8rem;
  border-bottom:1px solid var(--line);padding:.75rem .1rem;font-size:13.5px;line-height:1.75;
}
.rec li span{color:var(--ink-faint);font-family:var(--en);font-size:12.5px;letter-spacing:.04em}
@media(max-width:560px){.rec li{grid-template-columns:1fr;gap:.1rem}}

/* --- FAQ -------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem .2rem;
  font-size:15px;font-weight:600;line-height:1.75;
  display:flex;gap:.8rem;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--en);color:var(--shu);font-weight:700;flex:0 0 auto}
.faq summary::after{content:"＋";margin-left:auto;color:var(--ink-faint);font-weight:400;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq .a{
  display:flex;gap:.8rem;padding:0 .2rem 1.3rem;
  font-size:14.5px;color:var(--ink-soft);line-height:1.9;
}
.faq .a::before{content:"A";font-family:var(--en);color:var(--ai);font-weight:700;flex:0 0 auto}

/* --- 最後のCTA -------------------------------------------------------- */
.cta-final{text-align:left}
.cta-final h2{color:#fff}
.cta-box{
  margin-top:2rem;border:1px solid rgba(238,242,251,.22);
  background:rgba(255,255,255,.04);padding:clamp(1.4rem,4vw,2rem);
}
.cta-list{list-style:none;font-size:14.5px;line-height:1.9;margin-bottom:1.5rem}
.cta-list li{padding-left:1.3em;position:relative}
.cta-list li::before{content:"✓";position:absolute;left:0;color:#8fb0ff}

/* --- 申込フォーム -----------------------------------------------------
   紺地セクションの上に白いカードで置く。入力欄は白地のほうが書きやすい。 */
.form-card{
  margin-top:1.75rem;background:var(--white);color:var(--ink);
  border-radius:8px;padding:clamp(1.4rem,4vw,2.2rem);
}
.fhead{
  font-family:var(--mincho);font-size:19px;font-weight:600;
  padding-bottom:.9rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line);
}
/* スパム対策の隠し項目。画面にも読み上げにも出さない */
.form input[name="_gotcha"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.frow{display:grid;gap:1rem;margin-bottom:1rem}
@media(min-width:620px){.frow{grid-template-columns:1fr 1fr}}
.form label{display:block}
.form label span{
  display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
  margin-bottom:.4rem;letter-spacing:.03em;
}
.form label span b{
  display:inline-block;margin-left:.5em;padding:.1em .45em;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:#fff;background:var(--shu);border-radius:3px;vertical-align:.1em;
}
.form input,.form select,.form textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--line-2);border-radius:5px;
  padding:.7em .8em;line-height:1.6;
}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);background-position:calc(100% - 18px) 1.1em,calc(100% - 13px) 1.1em;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4em}
.form textarea{resize:vertical;min-height:7em}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky);
}
.form .fwide{display:block;margin-bottom:1.4rem}
.fnote{font-size:12.5px;color:var(--ink-faint);margin:-.2rem 0 1.2rem;line-height:1.75}
/* フォームカードは紺地の上の「白い島」。リンク色は紺地用ではなく通常色に戻す */
.bg-navy .form-card a{color:var(--ai)}
.form button[type="submit"]{width:100%;padding:1em 1.6em;font-size:15.5px}
.form button[type="submit"]:disabled{opacity:.6;cursor:progress}
.memo{font-size:12.5px;color:var(--ink-soft);line-height:1.85;margin-top:1.1rem}
.memo b{color:var(--ink)}

/* --- フッター --------------------------------------------------------- */
footer.site{
  background:var(--paper);border-top:1px solid var(--line);
  padding:2.5rem 0 3rem;font-size:13px;color:var(--ink-soft);
}
footer.site .fgrid{display:grid;gap:1.5rem}
@media(min-width:760px){footer.site .fgrid{grid-template-columns:1.4fr 1fr 1fr}}
footer.site h4{font-size:12.5px;letter-spacing:.08em;color:var(--ink);margin-bottom:.6rem;font-weight:600}
footer.site ul{list-style:none;line-height:2}
footer.site a{color:var(--ink-soft);text-decoration:none}
footer.site a:hover{color:var(--ai);text-decoration:underline}
footer.site .copy{
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-faint);
}

/* --- 補助 ------------------------------------------------------------- */
.note{font-size:12.5px;color:var(--ink-faint);line-height:1.8;margin-top:1rem}
.mark-hl{background:linear-gradient(transparent 62%,rgba(217,119,87,.28) 62%)}
.hr-thin{border:0;border-top:1px solid var(--line);margin:clamp(2rem,5vw,3rem) 0}