/* ふくしDX株式会社 — サイト共通スタイル v2（2026-08 新ロゴ対応）
   色は必ずカスタムプロパティ経由で参照すること。ハードコード禁止。
   Core3色（--teal/--amber/--ink）はロゴ実測値。文字には暗いシェードを使う。 */

:root{
  /* ===== Core：ロゴ実測値。この3色が正 ===== */
  --teal:        #66B7BB;   /* ロゴのノード・接続線／面に使う */
  --amber:       #CC9962;   /* ロゴのL字フレーム／面に使う */
  --ink:         #727071;   /* ロゴの社名部分 */

  /* ===== Teal shades ===== */
  --teal-deep:   #2F7E84;   /* ティール系の文字・リンク・見出しアクセント */
  --teal-dark:   #24666B;   /* 濃い帯・フッター背景／淡い面の上の文字 */
  --teal-pale:   #EAF5F5;
  --teal-line:   #C9E3E4;

  /* ===== Amber shades ===== */
  --amber-deep:  #8F6635;   /* アンバー系の文字（指示#A5763F→AA確保のため最小限暗く 3.83→4.89:1） */
  --amber-pale:  #FAF2E8;
  --amber-line:  #E8D3B8;
  --amber-on-dark:#EFD9B4;  /* 濃い帯の上のアンバー系アクセント */

  /* ===== Neutral ===== */
  --ink-strong:  #4A4849;   /* 見出し。黒の代わり 8.70:1 */
  --ink-mid:     #706E6F;   /* 本文（指示#727071→全背景AA確保のため2段階のみ暗く 4.55〜5.06:1） */
  --ink-soft:    #706E6F;   /* 補助テキスト。AA確保のためmidと同値／階層はサイズ・太さで表現 */
  --line:        #E2E0E0;
  --surface-mute:#EFEDEC;   /* BEFORE等の中立チップ */
  --paper:       #FBFAF8;
  --white:       #FFFFFF;

  /* ===== CTA上の文字（アンバー面 5.48:1） ===== */
  --on-amber:    #3A2A05;   /* アンバー面の上の文字 5.48:1 */

  --serif:'Noto Serif JP', serif;
  /* 本文は端末標準の丸ゴシックを優先（iPhone/Mac=ヒラギノ丸ゴ）。Webフォントを読まないぶん軽い */
  --sans:'Hiragino Maru Gothic ProN','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic Pro',
         'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN',
         'Noto Sans JP','Yu Gothic Medium','游ゴシック Medium','Yu Gothic','游ゴシック',
         Meiryo,'メイリオ',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --r-lg:24px; --r-md:16px;
  --shadow:0 8px 28px rgba(36,102,107,.07);
  --shadow-lg:0 14px 44px rgba(36,102,107,.11);
  --header-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink-mid);
  font-family:var(--sans); font-size:17px; line-height:1.95;
  font-weight:400; letter-spacing:.02em;
  font-feature-settings:"palt";
  overflow-wrap:break-word;
  hanging-punctuation:allow-end;
}
/* 日本語の折返しを文節単位に（対応ブラウザのみ）。1文字だけの折返しを防ぐ */
h1,h2,h3,h4,.lead,.hero .sub{word-break:auto-phrase}
.nw{white-space:nowrap}
img{max-width:100%; display:block}
a{color:var(--teal-dark); text-underline-offset:.2em}  /* 白・淡色いずれの背景でもAAを満たす濃さ */
:focus-visible{outline:3px solid var(--amber-deep); outline-offset:2px; border-radius:4px}
/* 濃い帯・フッター・ヒーロー上では、明るい色のリングに切り替える */
.band-dark :focus-visible, .page-head :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .gnav :focus-visible, .sim-sticky :focus-visible{
  outline-color:var(--amber-on-dark);
}

/* ===== レイアウト ===== */
.container{max-width:1080px; margin:0 auto; padding:0 24px}
.narrow{max-width:820px}
section{padding:96px 0}
@media(max-width:720px){ section{padding:64px 0} }  /* 本文は縮小しない：17px以上を維持 */

/* セクション見出し */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  color:var(--teal-deep); font-size:13.5px; font-weight:700;
  letter-spacing:.22em; margin:0 0 18px;
}
.eyebrow::after{content:""; flex:0 0 44px; height:1px; background:var(--teal-line)}
h1,h2,h3{font-family:var(--serif); line-height:1.55; letter-spacing:.02em; margin:0}
h2{font-size:clamp(26px,3.6vw,38px); font-weight:700; margin-bottom:20px}
h3{font-size:clamp(19px,2.4vw,23px); font-weight:700}
.lead{color:var(--ink-mid); font-size:clamp(17px,1.8vw,17.5px); max-width:640px; margin:0 0 8px}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{display:none}
.center .lead{margin-inline:auto}

/* ===== ボタン ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s;
}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}
.btn-amber{background:var(--amber); color:var(--on-amber); box-shadow:0 8px 26px rgba(204,153,98,.30)}
.btn-amber:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(204,153,98,.42)}
.btn-teal{background:var(--teal-deep); color:var(--white); box-shadow:0 8px 26px rgba(36,102,107,.22)}
.btn-teal:hover{transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.8); color:var(--white); background:rgba(255,255,255,.10)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-line{border-color:var(--teal-line); color:var(--teal-deep); background:var(--white)}
.btn-line:hover{background:var(--teal-pale)}
.btn-xl{padding:19px 44px; font-size:17px}

/* ===== ヘッダー ===== */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header .container{width:100%; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; text-decoration:none; margin-right:auto; min-height:48px}
.brand-logo{height:34px; width:auto; display:block}
.brand-logo--white{display:none}
@media(max-width:520px){ .brand-logo{height:29px} }
.gnav{display:flex; align-items:center; gap:6px}
.gnav a{
  text-decoration:none; color:var(--ink-strong); font-weight:500; font-size:15px;
  padding:9px 14px; border-radius:999px; transition:background .2s, color .2s;
}
.gnav a:hover{background:var(--teal-pale)}
.gnav a[aria-current="page"]{color:var(--teal-dark); font-weight:700; background:var(--teal-pale)}
.gnav .cta{background:var(--amber); color:var(--on-amber); font-weight:700; margin-left:8px; padding:10px 22px}
.gnav .cta:hover{background:var(--amber-line)}

/* ホームのみ：ヒーロー上では透過（白文字）、スクロールで白背景へ */
.site-header.solid, body:not(.is-home) .site-header{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 var(--line);
}
/* 磨りガラスは、余力のある大画面だけに限定（スクロール中の再描画コストを避ける） */
@media(min-width:901px){
  .site-header.solid, body:not(.is-home) .site-header{
    background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
}
body.is-home .site-header:not(.solid) .gnav a{color:var(--white)}
body.is-home .site-header:not(.solid) .gnav a:hover{background:rgba(255,255,255,.14)}
body.is-home .site-header:not(.solid) .gnav a[aria-current="page"]{background:rgba(255,255,255,.18); color:var(--white)}
body.is-home .site-header:not(.solid) .brand-logo--color{display:none}
body.is-home .site-header:not(.solid) .brand-logo--white{display:block}
body.menu-open .brand-logo--color{display:none}
body.menu-open .brand-logo--white{display:block}
body:not(.is-home) main{padding-top:var(--header-h)}

/* ハンバーガー（モバイル） */
.nav-toggle{display:none; width:48px; height:48px; border:0; background:transparent; cursor:pointer; position:relative; z-index:130}
.nav-toggle span{position:absolute; left:11px; right:11px; height:2px; background:var(--ink-strong); border-radius:2px; transition:.3s}
body.is-home .site-header:not(.solid) .nav-toggle span{background:var(--white)}
.nav-toggle span:nth-child(1){top:16px}.nav-toggle span:nth-child(2){top:22px}.nav-toggle span:nth-child(3){top:28px}
body.menu-open .nav-toggle span{background:var(--white)}
body.menu-open .nav-toggle span:nth-child(1){top:22px; transform:rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){top:22px; transform:rotate(-45deg)}
@media(max-width:900px){
  .nav-toggle{display:block}
  .gnav{
    position:fixed; top:0; left:0; width:100vw; height:100dvh; z-index:120;
    background:linear-gradient(160deg,var(--teal-dark),var(--teal-deep));
    flex-direction:column; justify-content:center; gap:6px;
    opacity:0; visibility:hidden; transition:opacity .35s ease;
  }
  body.menu-open .gnav{opacity:1; visibility:visible}
  body.menu-open{overflow:hidden}
  /* 重要：backdrop-filterはfixed要素の基準をヘッダーに変えてしまうため、
     メニュー展開中はヘッダーの磨りガラス・背景を無効化（全画面メニューを正しく表示） */
  body.menu-open .site-header,
  body.menu-open .site-header.solid,
  body.menu-open:not(.is-home) .site-header{
    background:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .gnav a{color:var(--white) !important; font-size:19px; font-family:var(--serif); padding:11px 26px}
  .gnav a[aria-current="page"]{background:rgba(255,255,255,.14) !important; color:var(--white) !important}
  .gnav .cta{margin:16px 0 0; background:var(--amber) !important; color:var(--on-amber) !important}
}

/* ===== ヒーロー（ホーム） ===== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:var(--white); overflow:hidden; padding:calc(var(--header-h) + 40px) 0 80px;
}
.hero-slides{position:absolute; inset:0; z-index:-2; background:var(--teal-dark)}
.hero-slides .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 2.4s ease;
}
.hero-slides .slide.on{opacity:1; animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.06)} to{transform:scale(1.14)}}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(95deg, rgba(36,102,107,.70) 0%, rgba(36,102,107,.42) 34%, rgba(36,102,107,.08) 62%, rgba(9,38,31,0) 80%),
    linear-gradient(180deg, rgba(36,102,107,.30) 0%, rgba(36,102,107,.10) 36%, rgba(36,102,107,.30) 66%, rgba(36,102,107,.70) 100%);
}
@media(max-width:720px){
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(36,102,107,.34) 0%, rgba(36,102,107,.20) 30%, rgba(36,102,107,.52) 62%, rgba(36,102,107,.78) 100%);
  }
}
.hero .container{position:relative}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:700; letter-spacing:.24em;
  color:var(--amber-on-dark); margin-bottom:26px;
  padding:9px 18px; border:1px solid rgba(255,233,191,.45); border-radius:999px;
  background:rgba(36,102,107,.30);
}
.em-ai{font-weight:700; letter-spacing:.06em; font-size:1.18em; color:var(--amber-on-dark); text-shadow:0 1px 10px rgba(36,102,107,.35)}
.hero h1{
  font-size:clamp(34px,6.2vw,68px); font-weight:700; line-height:1.42;
  letter-spacing:.03em; margin:0 0 26px;
  text-shadow:0 2px 30px rgba(36,102,107,.40);
}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line>span{display:inline-block; transform:translateY(110%); opacity:0}
.hero.ready h1 .line>span{animation:rise 1.1s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.22s}
@keyframes rise{to{transform:translateY(0); opacity:1}}
.hero .sub{
  max-width:600px; font-size:clamp(15.5px,1.9vw,18px); line-height:2.1;
  color:rgba(255,255,255,.94); text-shadow:0 1px 16px rgba(36,102,107,.45);
  opacity:0; transform:translateY(14px);
}
.hero .actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; opacity:0; transform:translateY(14px)}
.hero.ready .sub{animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .7s forwards}
.hero.ready .actions{animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .95s forwards}
@keyframes fadeUp{to{opacity:1; transform:none}}
.hero .note{margin-top:16px; font-size:13px; color:rgba(255,255,255,.8)}
.hero-dots{position:absolute; right:28px; bottom:96px; display:grid; gap:10px}
.hero-dots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); transition:.4s}
.hero-dots i.on{background:var(--white); box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  color:rgba(255,255,255,.85); font-size:11px; letter-spacing:.3em; text-align:center;
}
.scroll-cue::after{
  content:""; display:block; width:1px; height:44px; margin:10px auto 0;
  background:linear-gradient(var(--white),transparent);
  animation:cue 2s ease-in-out infinite;
}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ===== スクロールリビール ===== */
.reveal{opacity:0; transform:translateY(32px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.10s}
.reveal[data-delay="2"]{transition-delay:.20s}
.reveal[data-delay="3"]{transition-delay:.30s}
.reveal[data-delay="4"]{transition-delay:.40s}

/* ===== 汎用カード・帯 ===== */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px; box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.grid .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.grid{display:grid; gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.band{background:var(--teal-pale)}
.band-dark{background:linear-gradient(155deg,var(--teal-dark),var(--teal-deep)); color:var(--white)}
.band-dark h2, .band-dark h3{color:var(--white)}
.band-dark .lead{color:rgba(255,255,255,.85)}
.band-dark .eyebrow{color:var(--amber-on-dark)}
.band-dark .eyebrow::after{background:rgba(255,255,255,.3)}

.icon-dot{
  width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
  background:var(--teal-pale); color:var(--teal-dark); font-size:26px; margin-bottom:18px;
}
.char-face{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-size:34px; font-weight:700; color:var(--white); flex:none;
}
.face-t{background:linear-gradient(150deg,var(--teal-deep),var(--teal-dark))}
.face-a{background:linear-gradient(150deg,var(--amber-line),var(--amber-deep))}
.char-photo{
  width:96px; height:96px; border-radius:50%; flex:none; object-fit:cover;
  background:var(--teal-pale); padding:0;
  box-shadow:0 6px 18px rgba(36,102,107,.15); border:3px solid var(--white);
}
.char-photo.t{background:var(--teal)}
.char-photo.a{background:var(--amber)}
@media(max-width:720px){ .char-photo{width:76px; height:76px} }
.tag{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.08em;
  color:var(--teal-dark); background:var(--teal-pale); border-radius:999px; padding:5px 14px;
}
.tag.amber{color:var(--amber-deep); background:var(--amber-pale)}

/* 機能リスト */
.func{display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line)}
.func:last-child{border-bottom:0}
.func .no{
  flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:19px;
  background:var(--teal-pale); color:var(--teal-dark);
}
.func.amber .no{background:var(--amber-pale); color:var(--amber-deep)}
.func h4, .func .func-title{margin:2px 0 6px; font-size:17px; font-weight:700; font-family:var(--sans); line-height:1.7}
.func p{margin:0; color:var(--ink-mid); font-size:15px; line-height:1.9}

/* BEFORE/AFTER */
.ba{display:grid; gap:14px}
.ba .row{display:grid; grid-template-columns:86px 1fr; gap:14px; align-items:start}
.ba .lb{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-align:center; border-radius:8px; padding:6px 0}
.ba .before .lb{background:var(--surface-mute); color:var(--ink-mid)}
.ba .after .lb{background:var(--amber-pale); color:var(--amber-deep)}
.ba p{margin:0; font-size:14.5px; line-height:1.85; color:var(--ink-mid)}
.ba .after p{color:var(--ink-strong); font-weight:500}

/* ===== 料金 ===== */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
@media(max-width:960px){.price-grid{grid-template-columns:1fr}}
.plan{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 28px 30px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.plan.featured{border:2px solid var(--teal-deep); box-shadow:var(--shadow-lg)}
.plan .ribbon{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--teal-deep); color:var(--white); font-size:12.5px; font-weight:700;
  padding:6px 18px; border-radius:999px; letter-spacing:.06em;
}
.plan .pname{font-family:var(--serif); font-size:21px; font-weight:700}
.plan .prange{color:var(--teal-deep); font-weight:700; font-size:14px; margin:2px 0 18px}
.plan .base{color:var(--ink-mid); font-size:14px; padding:14px 16px; background:var(--paper); border-radius:12px}
.plan .base b{font-size:20px; color:var(--ink-strong)}
.plan .disc{margin-top:14px; padding:18px 16px; background:var(--teal-pale); border-radius:14px}
.plan .disc .dlabel{font-size:12.5px; font-weight:700; color:var(--teal-deep); letter-spacing:.06em}
.plan .disc .dprice{font-family:var(--serif); font-size:34px; font-weight:700; color:var(--teal-dark); line-height:1.3}
.plan .disc .dprice small{font-size:14px; font-family:var(--sans); font-weight:500; color:var(--ink-mid)}
.plan .annual{margin-top:10px; font-size:13.5px; color:var(--ink-mid)}
.plan .annual b{color:var(--ink-strong)}
.plan .init{margin-top:auto; padding-top:18px; font-size:13.5px; color:var(--ink-mid); border-top:1px dashed var(--line)}
.plan.ent{justify-content:center; text-align:center; background:linear-gradient(155deg,var(--teal-dark),var(--teal-deep)); color:var(--white); border:0}
.plan.ent .pname{color:var(--white)}
.plan.ent p{color:rgba(255,255,255,.88); font-size:14.5px}

/* テーブル */
.tbl{width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow); font-size:15px}
.tbl th,.tbl td{padding:16px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.tbl th{background:var(--teal-pale); color:var(--teal-dark); font-weight:700; width:30%; white-space:nowrap}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
@media(max-width:640px){.tbl th{width:38%}}

/* 権限設計テーブル：モバイルはカード積み上げ */
@media(max-width:640px){
  .perm-tbl, .perm-tbl tbody, .perm-tbl tr, .perm-tbl th, .perm-tbl td{display:block; width:auto!important}
  .perm-tbl tr{border:1px solid var(--line); border-radius:14px; margin-bottom:14px; padding:6px 4px; background:var(--white)}
  .perm-tbl tr:first-child{display:none}          /* ヘッダー行は非表示 */
  .perm-tbl th{background:transparent; color:var(--ink-strong); white-space:normal; padding:12px 16px 4px; border:0}
  .perm-tbl td{padding:6px 16px; border:0; position:relative}
  .perm-tbl td:nth-of-type(1)::before{content:"たすけさん："; color:var(--teal-dark); font-weight:700}
  .perm-tbl td:nth-of-type(2)::before{content:"あいちゃん："; color:var(--teal-dark); font-weight:700}
  .perm-tbl td:nth-of-type(3){color:var(--ink-mid)}
}

/* FLOW */
.flow{display:grid; gap:0}
.phase{display:grid; grid-template-columns:64px 1fr; gap:20px; position:relative; padding-bottom:34px}
.phase::before{content:""; position:absolute; left:31px; top:56px; bottom:6px; width:2px; background:var(--teal-line)}
.phase:last-child::before{display:none}
.phase .pn{
  width:64px; height:64px; border-radius:50%; background:var(--white); border:2px solid var(--teal-line);
  display:grid; place-items:center; font-family:var(--serif); font-weight:700; color:var(--teal-deep); font-size:15px;
}
.phase h4, .phase .func-title{margin:8px 0 4px; font-size:17.5px; font-family:var(--sans); font-weight:700; line-height:1.7}
.phase .dur{font-size:13px; color:var(--amber-deep); font-weight:700; letter-spacing:.05em}
.phase p{margin:6px 0 0; color:var(--ink-mid); font-size:15px}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; gap:16px; align-items:baseline;
  padding:22px 8px; font-weight:700; font-size:16.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; font-family:var(--serif); color:var(--teal-deep); font-size:20px; flex:none}
.faq summary::after{content:"＋"; margin-left:auto; color:var(--teal-deep); transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{display:flex; gap:16px; padding:0 8px 24px; color:var(--ink-mid)}
.faq .a::before{content:"A"; font-family:var(--serif); color:var(--amber-deep); font-size:20px; flex:none}

/* ===== 最新情報 ===== */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:860px){.news-grid{grid-template-columns:1fr}}
.news-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; color:inherit; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.news-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.news-card .thumb{aspect-ratio:16/9; background:var(--teal-pale) center/cover no-repeat; position:relative}
.news-card .thumb.noimg::after{
  content:"ふ"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:42px; color:var(--teal-line);
}
.news-card .body{padding:20px 22px 24px}
.news-card time{font-size:13px; color:var(--ink-mid); letter-spacing:.04em}
.news-card .cat{margin-left:10px}
.news-card h3{font-size:16.5px; margin-top:10px; line-height:1.7}
.news-empty{padding:56px 20px; text-align:center; color:var(--ink-mid); background:var(--white); border:1px dashed var(--teal-line); border-radius:var(--r-lg)}

/* 記事ビュー */
.article{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.article .hero-img{max-height:420px; width:100%; object-fit:cover}
.article .inner{padding:clamp(26px,5vw,56px)}
.article h1{font-size:clamp(23px,3.4vw,32px); line-height:1.6; margin:14px 0 26px}
.article .meta{color:var(--ink-mid); font-size:14px}
.article .content p{margin:0 0 1.6em}
.back-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; margin-bottom:26px}

/* ===== CTA帯 ===== */
.cta-band{position:relative; overflow:hidden}
.cta-band .container{position:relative}
.cta-band h2{font-size:clamp(25px,3.4vw,36px)}
.cta-actions{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:34px}

/* ===== フッター ===== */
.site-footer{background:var(--teal-dark); color:rgba(255,255,255,.88); padding:72px 0 36px; font-size:14.5px}
.site-footer a{color:var(--teal-line)}
.f-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px}
@media(max-width:820px){.f-grid{grid-template-columns:1fr}}
.f-brand{margin-bottom:20px}
.f-logo{height:38px; width:auto; display:block}
.f-mission{font-family:var(--serif); color:var(--white); font-size:16px; margin:0 0 14px}
.f-note{font-size:12.5px; color:rgba(255,255,255,.62); line-height:1.9}
.f-title{font-size:12.5px; letter-spacing:.2em; color:rgba(255,255,255,.6); font-weight:700; margin:0 0 16px}
.f-nav{display:grid; gap:2px}
.f-nav a{text-decoration:none; display:flex; align-items:center; min-height:48px}
.f-nav a:hover{color:var(--white)}
.copyright{margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; color:rgba(255,255,255,.55); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between}

/* ページタイトル（下層） */
.page-head{
  background:linear-gradient(155deg,var(--teal-dark),var(--teal-deep)); color:var(--white);
  padding:88px 0 64px; position:relative; overflow:hidden;
}
.page-head .eyebrow{color:var(--amber-on-dark)}
.page-head .eyebrow::after{background:rgba(255,255,255,.3)}
.page-head h1{font-size:clamp(28px,4.4vw,44px); font-weight:700; line-height:1.5}
.page-head .lead{color:rgba(255,255,255,.85); margin-top:14px}
.page-head::after{
  content:"ふ"; position:absolute; right:-30px; bottom:-70px;
  font-family:var(--serif); font-size:280px; color:rgba(255,255,255,.05); line-height:1;
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-slides .slide{transition:opacity .8s; animation:none !important; transform:none}
  .hero h1 .line>span{transform:none; opacity:1; animation:none !important}
  .hero .sub,.hero .actions{opacity:1; transform:none; animation:none !important}
  .reveal{opacity:1; transform:none; transition:none}
  .scroll-cue::after{animation:none}
  .card{transition:none}
  .grid .card:hover{transform:none; box-shadow:var(--shadow)}
}

/* DXへの取り組み：代表メッセージ（company） */
.dx-message{
  margin-top:56px; border-radius:var(--r-lg); padding:52px 48px;
  background:linear-gradient(155deg,var(--teal-dark),var(--teal-deep)); color:var(--white);
}
.dx-message .eyebrow{color:var(--amber-on-dark)}
.dx-message .eyebrow::after{background:rgba(255,255,255,.3)}
.dx-message blockquote{
  margin:16px 0 0; font-family:var(--serif); font-weight:700;
  font-size:clamp(17px,2.2vw,21px); line-height:2.1; color:var(--white);
}
.dx-message .sign{margin:26px 0 0; font-size:14.5px; color:rgba(255,255,255,.85); text-align:right}
@media(max-width:720px){ .dx-message{padding:36px 24px} }

/* DXへの取り組み：KPI目標（company） */
.dx-kpi{
  margin-top:28px; background:var(--amber-pale); border:1px solid var(--amber-line);
  border-radius:var(--r-lg); padding:28px 32px; text-align:center;
}
.dx-kpi .kpi-cap{
  margin:0 0 16px; font-size:13px; font-weight:700; letter-spacing:.14em;
  color:var(--amber-deep);
}
.dx-kpi .kpi-row{
  display:flex; align-items:center; justify-content:center; gap:clamp(18px,5vw,44px);
}
.dx-kpi .kpi-item{display:flex; flex-direction:column; gap:6px}
.dx-kpi .kpi-when{font-size:12px; color:var(--ink-mid); font-weight:700; letter-spacing:.02em; line-height:1.5}
.dx-kpi .kpi-when .d{display:block; white-space:nowrap; color:var(--ink-strong); font-size:13.5px}
.dx-kpi .kpi-num{
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(40px,10vw,60px); color:var(--teal-dark);
}
.dx-kpi .kpi-num small{font-family:var(--sans); font-size:.32em; font-weight:700; color:var(--ink-strong); margin-left:4px}
.dx-kpi .kpi-arrow{font-size:clamp(24px,6vw,34px); color:var(--amber); font-weight:700; flex:none}
@media(max-width:720px){ .dx-kpi{padding:24px 18px} }

/* ===== 3本柱：イラストカード ===== */
.pillar{text-align:center}
.pillar .pillar-img{
  width:150px; height:150px; border-radius:50%; object-fit:cover;
  margin:0 auto 20px; background:var(--teal-pale);
  box-shadow:0 8px 24px rgba(36,102,107,.10); border:4px solid var(--white);
}
.pillar .pillar-svg{
  display:grid; place-items:center; color:var(--teal-deep);
  box-shadow:none; border:4px solid var(--white);
}
.pillar p{text-align:left}
@media(max-width:720px){ .pillar .pillar-img{width:128px; height:128px} }

/* ===== 料金プラン：メリハリ強化 ===== */
.plan-head{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.plan-ico{
  width:54px; height:54px; border-radius:16px; flex:none;
  background:var(--teal-pale); color:var(--teal-dark);
  display:grid; place-items:center;
}
.plan.featured .plan-ico{background:var(--amber-pale); color:var(--amber-deep)}
.plan-head .pname{margin:0}
.plan-head .prange{margin:2px 0 0}
.plan .disc .dlabel{
  display:inline-block; background:var(--teal-deep); color:var(--white);
  border-radius:999px; padding:4px 14px; letter-spacing:.08em;
}
.plan .disc .dprice{font-size:clamp(36px,9vw,42px); margin:10px 0 0}
.plan.featured .disc{background:var(--amber-pale)}
.plan.featured .disc .dlabel{background:var(--amber); color:var(--on-amber)}
.plan.featured .disc .dprice{color:var(--amber-deep)}
.plan .base{font-size:13.5px}
.plan .base b{font-size:17px}

/* 機能セクション見出しのキャラ顔 */
.func-head{display:flex; align-items:center; gap:14px}
.func-head .char-photo{width:64px; height:64px}


/* ===== DESIGN：最後に決めるのは人（トップ／ヒーロー直下） ===== */
.design-note{background:var(--teal-pale); padding:72px 0}
.design-note h2{color:var(--ink-strong)}
.design-note .lead{color:var(--ink-strong); line-height:1.95}
@media(max-width:720px){ .design-note{padding:56px 0} }


/* ===== タップ領域：48×48px以上を確保（文中のインラインリンクは除く） ===== */
.gnav a{min-height:48px; display:inline-flex; align-items:center}
.btn{min-height:48px}
.faq summary{min-height:48px}


/* ===== 体感速度・タップの気持ちよさ ===== */
/* タップ後の 300ms 待ちを無くし、押した瞬間に反応させる */
a, button, summary, .opt, [role="button"]{ touch-action:manipulation; }
/* 既定の青いハイライトではなく、ブランド色のごく淡い反応に */
html{ -webkit-tap-highlight-color:rgba(47,126,132,.12); }

/* 押した瞬間のフィードバック（hoverの無いスマホでも「効いた」と分かる） */
.btn:active{ transform:translateY(1px) scale(.985); }
.gnav a:active, .f-nav a:active{ opacity:.7; }
.news-card:active{ transform:translateY(-2px); }
.btn, .gnav a, .f-nav a, .news-card{ -webkit-user-select:none; user-select:none; }

/* 合成レイヤーのヒント（スライドとリビールのみ。使いすぎない） */
.hero-slides .slide{ will-change:opacity, transform; backface-visibility:hidden; }
.reveal{ will-change:opacity, transform; }
.reveal.in{ will-change:auto; }

/* iOSの慣性スクロールと、URLバー伸縮によるガタつきを抑える */
body{ -webkit-overflow-scrolling:touch; }

/* 画像の読み込み中に高さが飛ばないよう、比率を固定 */
.pillar-img, .char-photo{ aspect-ratio:1/1; }

/* 動きを減らす設定では、タップ時の変形も止める */
@media (prefers-reduced-motion: reduce){
  .btn:active{ transform:none; }
  .news-card:active{ transform:none; }
  .hero-slides .slide, .reveal{ will-change:auto; }
}


/* ===== 淡い面の上の文字は teal-dark（teal-deep は 4.25:1 で AA に僅かに届かない） ===== */
.band .eyebrow, .design-note .eyebrow, .band b, .design-note b,
.band .tag, .card .tag{ color:var(--teal-dark); }
.band a:not(.btn), .design-note a:not(.btn){ color:var(--teal-dark); }
/* BEFORE ラベルも AA を満たす濃さに */
.ba .before .lb{ background:var(--surface-mute); color:var(--ink-strong); }


/* ===== 代表プロフィール（運営会社） ===== */
.ceo{display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:start; margin-top:34px}
.ceo-photo{width:200px; aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:var(--teal-pale)}
.ceo-photo--placeholder{
  display:grid; place-items:center; border:2px dashed var(--teal-line);
  color:var(--teal-dark); font-size:14px; font-weight:700; letter-spacing:.08em;
}
.ceo-name{font-family:var(--serif); font-size:22px; font-weight:700; color:var(--ink-strong); margin:0 0 16px}
.ceo-name small{display:block; font-family:var(--sans); font-size:13.5px; font-weight:400; color:var(--ink-mid); letter-spacing:.04em; margin-top:6px}
.ceo-body p{margin:0 0 1.2em; color:var(--ink-mid)}
.ceo-body p:last-child{margin-bottom:0}
@media(max-width:720px){
  .ceo{grid-template-columns:1fr; gap:22px; justify-items:center; text-align:center}
  .ceo-photo{width:160px}
  .ceo-body{text-align:left}
}


/* ===== 監修体制（_experts.html。現時点ではどのページからも読み込まない） ===== */
.expert{text-align:center}
.expert-photo{width:132px; aspect-ratio:1/1; border-radius:50%; overflow:hidden; margin:0 auto 18px; background:var(--teal-pale)}
.expert-photo--placeholder{display:grid; place-items:center; border:2px dashed var(--teal-line); color:var(--teal-dark); font-size:13px; font-weight:700; letter-spacing:.08em}
.expert-name{font-family:var(--serif); font-size:19px; font-weight:700; color:var(--ink-strong); margin:0 0 6px}
.expert-role{font-size:14px; color:var(--ink-mid); margin:0 0 14px}
.expert-area{font-size:14.5px; color:var(--ink-strong); margin:0 0 12px}
.expert-note{font-size:14.5px; color:var(--ink-mid); margin:0; text-align:left}


/* ===== 見出しのはみ出し防止 ===== */
/* キャラ顔を伴う見出しは、画像ぶん幅が狭いので少し小さく組む */
.func-head{align-items:center; gap:14px}
.func-head h2, h2.func-head{font-size:clamp(22px,3.2vw,32px)}
@media(max-width:420px){
  .func-head{gap:12px}
  .func-head .char-photo{width:56px; height:56px}
  h2.func-head{font-size:21px}
}
/* nowrap 指定が画面幅を超えてしまう極小画面では、折り返しを許して破綻を防ぐ */
@media(max-width:360px){
  .nw{white-space:normal}
}

/* 表組み・カード内の単独リンクもタップ領域48pxを確保 */
.tbl td > a:only-child{display:inline-flex; align-items:center; min-height:48px}

/* ==========================================================================
   料金・補助金シミュレーター
   サイト共通のトークンだけで組み、他ページと地続きに見えるようにする
   ========================================================================== */

/* 使い方の3ステップ */
.sim-steps{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:0 0 28px; padding:0;
}
.sim-steps li{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 8px; text-align:center; font-size:14px; color:var(--ink-mid); line-height:1.6;
}
.sim-steps .n{
  display:grid; place-items:center; width:30px; height:30px; margin:0 auto 8px;
  border-radius:50%; background:var(--teal-pale); color:var(--teal-dark);
  font-family:var(--serif); font-weight:700; font-size:15px;
}
@media(max-width:420px){ .sim-steps{gap:8px} .sim-steps li{font-size:13px; padding:14px 4px} }

/* 質問カード */
.sim-q{margin-bottom:20px; padding:28px 24px}
.sim-q h2{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(19px,2.6vw,23px); margin:0 0 6px; color:var(--ink-strong);
}
.sim-q .qn{
  flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--teal-deep); color:var(--white); font-size:16px; font-family:var(--serif);
}
.sim-q .hint{margin:0 0 18px 46px; font-size:15px; color:var(--ink-mid)}
@media(max-width:520px){ .sim-q{padding:24px 18px} .sim-q .hint{margin-left:0} }

/* 選択肢 */
.sim-opts{display:grid; gap:12px}
@media(min-width:560px){ .sim-opts{grid-template-columns:1fr 1fr} }
.sim-opt{
  display:flex; align-items:center; gap:14px; width:100%; min-height:64px;
  background:var(--white); border:2px solid var(--line); border-radius:var(--r-md);
  padding:14px 18px; font-family:inherit; font-size:17px; color:var(--ink-strong);
  text-align:left; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.sim-opt .mark{
  flex:none; position:relative; width:26px; height:26px; border-radius:50%;
  border:2.5px solid var(--line); background:var(--white); transition:border-color .18s, background .18s;
}
.sim-opt.is-sel{border-color:var(--teal-deep); background:var(--teal-pale)}
.sim-opt.is-sel .mark{border-color:var(--teal-deep); background:var(--teal-deep)}
.sim-opt.is-sel .mark::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:10px; height:10px; border-radius:50%; background:var(--white);
}
.sim-opt .txt{flex:1; line-height:1.5}
.sim-opt .txt small{display:block; margin-top:3px; font-size:13.5px; color:var(--ink-mid)}
.sim-opt.is-sel .txt small{color:var(--teal-dark)}
.sim-opt:active{transform:scale(.99)}

/* 補足の帯 */
.sim-flag{
  margin:16px 0 0; padding:14px 16px; border-radius:var(--r-md);
  font-size:15px; line-height:1.8;
  background:var(--amber-pale); border:1px solid var(--amber-line); color:var(--ink-strong);
}
.sim-flag b{color:var(--amber-deep)}

/* 結果カード */
.sim-q, .sim-result{padding-top:0; padding-bottom:0}   /* section既定の96px/64pxを打ち消す */
.sim-q{padding:28px 24px}
.sim-result{
  margin-top:32px; background:var(--white);
  border:2px solid var(--teal-deep); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow);
}
.sim-result .rhead{
  margin:0; padding:15px 24px; background:var(--teal-deep); color:var(--white);
  font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:.04em;
}
.sim-result .rbody{padding:26px 24px 28px}
@media(max-width:520px){ .sim-result .rbody{padding:22px 18px 24px} }

.sim-lead-figure{text-align:center; padding-bottom:20px; border-bottom:1px dashed var(--line)}
.sim-lead-figure .cap{margin:0 0 4px; font-size:15px; color:var(--ink-mid)}
.sim-lead-figure .fig{
  margin:0; font-family:var(--serif); font-weight:700; line-height:1.25;
  font-size:clamp(32px,9vw,44px); color:var(--teal-dark);
  font-variant-numeric:tabular-nums; transition:color .2s ease;
}
.sim-lead-figure .fig .u{font-size:.46em; margin-left:2px}
.sim-lead-figure .per{margin:8px 0 0; font-size:15px; color:var(--ink-mid)}
.sim-lead-figure .per b{color:var(--ink-strong)}
.sim-lead-figure.is-flash .fig{color:var(--amber-deep)}

.sim-badge{
  margin:16px auto 0; width:fit-content; padding:7px 18px; border-radius:999px;
  background:var(--amber-pale); border:1px solid var(--amber-line); color:var(--amber-deep);
  font-size:14.5px; font-weight:700;
}

/* 内訳 */
.sim-rows{margin:18px 0 0}
.sim-rows > div{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:4px 16px; padding:14px 0; border-bottom:1px solid var(--line);
}
.sim-rows > div:last-child{border-bottom:0}
.sim-rows dt{margin:0; color:var(--ink-mid); font-size:16px; line-height:1.6}
.sim-rows dt small{display:block; font-size:13px; color:var(--ink-mid); line-height:1.5}
.sim-rows dd{
  margin:0; font-weight:700; color:var(--ink-strong); font-size:17px;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}
.sim-rows dd small{font-weight:500; font-size:13.5px; color:var(--ink-mid)}
.sim-rows .is-total{
  background:var(--teal-pale); border-radius:var(--r-md); border-bottom:0;
  padding:14px 16px; margin:8px 0;
}
.sim-rows .is-total dt{color:var(--teal-dark); font-weight:700}
.sim-rows .is-total dd{color:var(--teal-dark); font-size:20px}
/* 合計は強調行。幅の狭い端末では縦に積み、金額を主役にする */
@media(max-width:560px){
  .sim-rows .is-total{grid-template-columns:1fr; gap:8px}
  .sim-rows .is-total dd{text-align:left; font-size:23px}
  .sim-rows .is-total dt small{display:inline; margin-left:6px}
}

/* 補助金 */
.sim-subsidy{margin-top:22px; padding:20px 18px; background:var(--teal-pale); border-radius:var(--r-md)}
.sim-subsidy h3{margin:0 0 8px; font-size:18px; color:var(--teal-dark)}
.sim-subsidy .exp{margin:0 0 16px; font-size:15px; line-height:1.85; color:var(--ink-strong)}
.sim-bar{
  display:flex; height:32px; border-radius:10px; overflow:hidden;
  border:1px solid var(--teal-line); background:var(--white);
}
.sim-bar .hojo{
  background:repeating-linear-gradient(45deg,var(--teal-deep),var(--teal-deep) 8px,var(--teal-dark) 8px,var(--teal-dark) 16px);
  transition:width .45s ease;
}
.sim-bar .jiko{background:var(--amber); transition:width .45s ease}
.sim-legend{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.sim-legend p{
  margin:0; font-size:14px; line-height:1.6;
  padding:10px 12px; background:var(--white); border-radius:10px;
}
.sim-legend small{display:block; font-size:12.5px; color:var(--ink-mid); margin-top:1px}
.sim-legend b{
  display:block; margin-top:6px; font-size:19px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* バーの色と対応づける小さな印 */
.sim-legend p::before{
  content:""; display:inline-block; vertical-align:middle;
  width:12px; height:12px; border-radius:3px; margin-right:7px;
}
.sim-legend .l1{color:var(--teal-dark)}
.sim-legend .l1::before{background:repeating-linear-gradient(45deg,var(--teal-deep),var(--teal-deep) 3px,var(--teal-dark) 3px,var(--teal-dark) 6px)}
.sim-legend .l2{color:var(--amber-deep)}
.sim-legend .l2::before{background:var(--amber)}
@media(max-width:430px){ .sim-legend{grid-template-columns:1fr} }
.sim-best{
  margin:14px 0 0; padding:13px 15px; background:var(--white); border-radius:10px;
  font-size:14.5px; line-height:1.85; color:var(--ink-strong);
}
.sim-best b{color:var(--amber-deep)}

.sim-cta{display:flex; width:100%; margin-top:24px}
.sim-cta-sub{margin:12px 0 0; text-align:center; font-size:14px; line-height:1.8; color:var(--ink-mid)}

/* 補足カード・注意書き */
.sim-note, .sim-caution{margin-top:24px}
.sim-note h3, .sim-caution h3{font-size:18px; color:var(--ink-strong); margin-bottom:12px}
.sim-note p{margin:0 0 10px; font-size:15.5px; color:var(--ink-mid)}
.sim-note p:last-child{margin-bottom:0}
.sim-note .sub{font-size:14.5px}
.sim-caution{background:var(--amber-pale); border-color:var(--amber-line)}
.sim-caution ul{margin:0; padding-left:1.2em}
.sim-caution li{margin:8px 0; font-size:15px; line-height:1.85; color:var(--ink-strong)}
.sim-caution .asof{margin:14px 0 0; font-size:13.5px; color:var(--ink-mid)}

/* 画面下の常時表示バー */
.sim-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; align-items:center; gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--teal-dark); color:var(--white);
  box-shadow:0 -2px 14px rgba(36,102,107,.22);
}
.sim-sticky[hidden]{display:none}
.sim-sticky .info{flex:1; min-width:0}
.sim-sticky .lab{display:block; font-size:12px; opacity:.9; line-height:1.4}
.sim-sticky .amt{
  display:block; font-family:var(--serif); font-weight:700; font-size:21px; line-height:1.3;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sim-sticky .amt .u{font-size:.62em}
.sim-sticky .go{
  flex:none; display:inline-flex; align-items:center; min-height:48px;
  padding:0 20px; border-radius:12px;
  background:var(--amber); color:var(--on-amber);
  font-weight:700; font-size:16px; text-decoration:none;
}
.sim-sticky .go:active{transform:translateY(1px)}

@media (prefers-reduced-motion: reduce){
  .sim-opt:active, .sim-sticky .go:active{transform:none}
  .sim-bar .hojo, .sim-bar .jiko{transition:none}
  .sim-lead-figure .fig{transition:none}
}

/* お問い合わせカードの見出し（h2だが視覚サイズはh3相当に保つ） */
.contact-h{font-size:clamp(19px,2.4vw,23px); margin-bottom:0}


/* ===== 2026-09-05 追記 ===== */
/* キャラ写真を <picture> で包むと、flex の子が縮んで画像が縦長に潰れる。親を縮ませない */
.char-pic{flex:none; display:block; line-height:0}
.char-pic .char-photo{display:block}

/* 導入の流れ：貴法人にご用意いただくもの */
.ready-grid .card{text-align:center; padding:28px 22px}
.ready-k{font-size:12.5px; letter-spacing:.16em; font-weight:700; color:var(--teal-dark); margin:0}
.ready-v{font-family:var(--serif); font-size:clamp(20px,2.6vw,23px); font-weight:700; color:var(--ink-strong); margin:8px 0 10px; line-height:1.5}
.ready-grid p.ready-d{margin:0; font-size:14.5px; color:var(--ink-mid); line-height:1.85}

/* 近日公開ページ：カードの余白をスマホで詰める */
.soon-card{padding:clamp(40px,7vw,64px) 30px}
@media(max-width:480px){ .soon-card{padding:36px 20px} }

/* 導入の流れ：丸の中に「STEP／1」を2行で収める */
.phase .pn{line-height:1.15; text-align:center; font-size:13px; letter-spacing:.04em}


/* =====================================================================
   2026-09-05 v2：読みやすさ（50〜60代・スマホ）／中央揃え／改行
   ===================================================================== */
/* 文字サイズの底上げ。階層はサイズ・太さ・色で保つ */
body{font-size:18px; line-height:1.95}
.lead{font-size:clamp(17.5px,1.9vw,18.5px); line-height:1.95}
h2{font-size:clamp(28px,3.8vw,40px); line-height:1.5}
h3{font-size:clamp(20px,2.5vw,24px)}
.eyebrow{font-size:14px}
.tag{font-size:14px; padding:6px 15px}
.btn{font-size:17px}
.btn-xl{font-size:18px; padding:20px 44px}
.hero .sub{font-size:clamp(17px,2vw,19px)}
.hero .note{font-size:14.5px}
.hero-eyebrow{font-size:14px}
.gnav a{font-size:16px}
.func .func-title{font-size:18.5px}
.func p{font-size:16.5px}
.ba p{font-size:16px}
.ba .after p{font-size:16.5px}
.ba .lb{font-size:12.5px}
.plan .prange{font-size:15px}
.plan .disc .dlabel{font-size:13.5px}
.plan .disc .dprice small{font-size:15px}
.plan .annual{font-size:15.5px}
.plan .init{font-size:15.5px}
.tbl{font-size:16px}
.phase .func-title{font-size:18.5px}
.phase .dur{font-size:14px}
.phase p{font-size:16.5px}
.faq summary{font-size:17.5px; line-height:1.7}
.faq .a{font-size:17px}
.news-card h3{font-size:18px}
.news-card time{font-size:14px}
.site-footer{font-size:15.5px}
.f-note{font-size:13.5px}
.f-title{font-size:13px}
.copyright{font-size:13px}
.ceo-name small{font-size:14.5px}
.ready-grid p.ready-d{font-size:16px}
.dx-kpi .kpi-when{font-size:13px}
.sim-caution li, .sim-note p{font-size:16.5px}
.design-note .lead{font-size:clamp(17.5px,2vw,19px)}

/* 見出しの折返しを整える（対応ブラウザのみ。非対応でも崩れない） */
h1,h2,h3{text-wrap:balance}
p,.lead,li,dd{text-wrap:pretty}

/* キャラクター紹介カード：画像は必ず正円、スマホでは縦積み・中央揃え */
.char-card{display:flex; gap:22px; align-items:flex-start}
.char-card-head{display:flex; gap:20px; align-items:center; margin-bottom:18px}
.char-name{margin:10px 0 8px}
h2.char-name{font-size:clamp(24px,3.2vw,28px); margin:8px 0 0}
.char-photo{width:96px; height:96px; min-width:96px; aspect-ratio:1/1; object-fit:cover; border-radius:50%}
.func-head .char-photo{width:64px; height:64px; min-width:64px}
@media(max-width:720px){
  .char-card, .char-card-head{flex-direction:column; align-items:center; text-align:center; gap:14px}
  .char-card-head{margin-bottom:12px}
  .char-card > div, .char-card-head > div{width:100%}
  .char-card p{text-align:left}                 /* 説明文だけは左揃えで読みやすく */
  .char-photo{width:104px; height:104px; min-width:104px}
  .func-head .char-photo{width:56px; height:56px; min-width:56px}
  .char-name{margin-top:6px}
}

/* スマホでは1カラムになるカード類を中央揃えに（不自然な右側の余白をなくす） */
@media(max-width:860px){
  .grid-3 > .card, .grid-2 > .card, .pillar, .pillar p{text-align:center}
  .grid-3 > .card .ba, .grid-2 > .card .ba{text-align:left}   /* BEFORE/AFTER の行は左揃え */
  .ba .row{grid-template-columns:78px 1fr}
  .plan{text-align:center; padding:34px 24px 28px}
  .plan-head{justify-content:center}
  .plan .disc{padding:20px 16px}
  .plan .init{text-align:center}
  .ready-grid .card{text-align:center}
  .dx-message{text-align:center}
  .dx-message .sign{text-align:center}
  .dx-message .eyebrow{justify-content:center}
  .dx-message .eyebrow::after{display:none}
  .card .tag{margin-inline:auto}
}
@media(max-width:720px){
  .container{padding:0 20px}
  .card{padding:30px 22px}
  .center .lead{padding:0 2px}
  .site-footer{text-align:center}
  .f-nav a{justify-content:center}
  .copyright{justify-content:center; text-align:center}
  .f-logo{margin-inline:auto}
}


/* =====================================================================
   2026-09-05 v3：Refero DESIGN.md（Notion / Steep / Seline / ElevenLabs / Airbnb）
   から抽出した「静かな編集デザイン」の原則を適用。
   ・グラデーションを使わない（面はベタ）／・カードは影ではなく1pxの罫線
   ・色付きの影を使わない／・強調色（アンバー）は1画面に1つの主ボタンだけ
   ・紙色の地（--paper）に白いカード、階層は文字のサイズ・太さ・濃さで
   ===================================================================== */
/* 面：ベタ塗りに統一（AI生成っぽい斜めグラデーションを排除） */
.band-dark, .page-head, .dx-message, .plan.ent{background:var(--teal-dark)}
@media(max-width:900px){ .gnav{background:var(--teal-dark)} }
.hero-slides{background:var(--teal-dark)}

/* カード：影→細い罫線。浮遊感より「紙の上に置いた紙」 */
.card, .plan, .news-card, .tbl, .news-empty{box-shadow:none}
.card, .plan, .news-card{border:1px solid var(--line)}
.plan.featured{border:2px solid var(--teal-deep); box-shadow:none}
.grid .card:hover{transform:none; box-shadow:none; border-color:var(--teal-line)}
.news-card:hover{transform:none; box-shadow:none; border-color:var(--teal-line)}
.card{transition:border-color .2s}
.band .card, .band .plan, .band .news-card{border-color:var(--teal-line)}   /* 淡いティール面の上では罫線もティール寄りに */

/* キャラ・イラストの円：色付きの影を外し、白の縁だけ残す */
.char-photo{box-shadow:none; border:3px solid var(--white)}
.pillar .pillar-img{box-shadow:none}

/* ボタン：色付きの発光影を外す。押せることは形（ピル）と色で伝える */
.btn-amber, .btn-teal{box-shadow:none}
.btn-amber:hover{transform:none; box-shadow:none; background:var(--amber-line)}
.btn-teal:hover{transform:none; background:var(--teal-dark)}
.btn-ghost{-webkit-backdrop-filter:none; backdrop-filter:none}

/* 見出し：字間をわずかに詰めて編集物らしく */
h1,h2{letter-spacing:.005em}
h3{letter-spacing:.01em}
.hero h1{letter-spacing:.01em; text-shadow:0 1px 18px rgba(36,102,107,.35)}

/* ヒーローの覆い：斜め方向を弱め、上下方向の落ち着いた暗さに */
.hero-veil{
  background:
    linear-gradient(180deg, rgba(36,102,107,.42) 0%, rgba(36,102,107,.22) 35%, rgba(36,102,107,.38) 65%, rgba(36,102,107,.74) 100%);
}
@media(min-width:721px){
  .hero-veil{
    background:
      linear-gradient(90deg, rgba(36,102,107,.62) 0%, rgba(36,102,107,.36) 45%, rgba(36,102,107,.10) 100%),
      linear-gradient(180deg, rgba(36,102,107,.18) 0%, rgba(36,102,107,.10) 50%, rgba(36,102,107,.55) 100%);
  }
}

/* ヘッダー：磨りガラスをやめ、白地＋1px罫線 */
.site-header.solid, body:not(.is-home) .site-header{background:var(--white); box-shadow:0 1px 0 var(--line)}
@media(min-width:901px){
  .site-header.solid, body:not(.is-home) .site-header{background:var(--white); -webkit-backdrop-filter:none; backdrop-filter:none}
}

/* 帯の中のカード（濃い面の上）は透過白のまま、罫線だけ整える */
.band-dark .card{border-color:rgba(255,255,255,.18)}

/* テーブル：影→罫線 */
.tbl{border:1px solid var(--line)}

/* hidden 属性のリンクは必ず非表示（.f-nav a の display:flex が UA の hidden を上書きしていた） */
.f-nav a[hidden], [hidden]{display:none !important}

/* PCだけ改行（スマホでは文を流して、数文字だけの行を作らない） */
@media(max-width:720px){ br.pc{display:none} }