@charset "utf-8";
/* =========================================================
   岡村俊輝税理士事務所 — 共通スタイルシート
   カラー：薄紫（エレガント）＋ ダークパープル #5b3b73
   フォント：見出し Noto Serif JP／本文 Noto Sans JP
   構成：1) 変数  2) 基本  3) レイアウト部品  4) ヘッダー/ナビ
          5) フッター/固定バー  6) セクション共通  7) ページ個別
          8) レスポンシブ
   ========================================================= */

/* ---------- 1) デザイン変数 ---------- */
:root {
  --bg:          #fdfcfe;
  --bg-alt:      #f7f2fb;
  --surface:     #ffffff;
  --ink:         #1f1a26;   /* 本文 */
  --ink-soft:    #4a4356;   /* 補足テキスト */
  --ink-mute:    #6b6377;   /* キャプション */
  --brand:       #5b3b73;   /* メインパープル */
  --brand-dark:  #422a56;   /* ホバー・強調 */
  --brand-mid:   #7a4f9a;   /* 見出しラベル（コントラスト確保） */
  --brand-soft:  #8a63a8;
  --line:        #ece4f3;
  --line-strong: #e2d5ee;
  --accent-bg:   #f4edfa;
  --gold:        #96702a;   /* ゴールド（強調） */
  --gold-light:  #d9b76c;
  --gold-deep:   #7d5c1f;
  --shadow-sm:   0 6px 18px rgba(51, 32, 63, .08);
  --shadow-md:   0 14px 34px rgba(51, 32, 63, .10);
  --radius:      6px;
  --radius-sm:   4px;
  --container:   1200px;
  --header-h:    72px;
}

/* ---------- 2) 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; transition: color .15s ease, opacity .15s ease; }
a:hover { color: var(--brand-soft); }

h1, h2, h3, h4 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: #33203f;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid rgba(138, 99, 168, .5); outline-offset: 2px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 700; transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.about-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }

/* ---------- 3) レイアウト部品 ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 900px; }

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--alt  { background: var(--bg-alt); }
.section--tint { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.section + .section { border-top: 1px solid var(--line); }

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--brand-mid);
  text-transform: uppercase;
}

.section__title {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.45;
  margin: 0 0 16px;
}

.section__lead {
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 2;
  color: var(--ink-soft);
  max-width: 40em;
  margin: 0 0 40px;
}

.text-center { text-align: center; }
.text-center .section__lead { margin-left: auto; margin-right: auto; }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-align: center; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost { background: var(--surface); color: var(--brand); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--bg-alt); color: var(--brand-dark); }
.btn--lg { font-size: 16px; padding: 18px 34px; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* カード */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 30px 28px;
}

.pill {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: var(--brand);
  padding: 5px 12px; border-radius: 999px;
}
.pill--soft { color: var(--brand); background: var(--accent-bg); }

/* ---------- 4) ヘッダー / ナビ ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 254, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }
.brand__name {
  font-family: "Noto Serif JP", serif; font-size: 16px; font-weight: 600;
  color: #33203f; letter-spacing: .02em; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 12px; }
.nav__list { display: flex; gap: 2px; list-style: none; }
.nav__list a {
  display: block; padding: 8px 9px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; color: #2a2333; white-space: nowrap;
}
.nav__list a:hover { color: var(--brand); background: var(--accent-bg); }
.nav__list a[aria-current="page"] { color: var(--brand); font-weight: 700; }

.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-tel {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 8px 14px; color: var(--brand); font-weight: 700; font-size: 12.5px;
}
.header-tel:hover { background: var(--accent-bg); color: var(--brand-dark); border-color: var(--brand-soft); }
.header-tel__ico { width: 14px; height: 14px; flex-shrink: 0; }
.header-tel__num { font-family: "Noto Serif JP", serif; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.header-cta .btn { padding: 10px 15px; font-size: 12px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 8px;
  cursor: pointer; color: var(--brand);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: currentColor; margin: 0 auto;
  position: relative; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { content: ""; position: absolute; top: -6px; left: 0; }
.nav-toggle span::after  { content: ""; position: absolute; top: 6px;  left: 0; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5) フッター / 固定バー ---------- */
.site-footer {
  background: #33203f; color: #d4c4e2;
  padding: 56px 0 110px;
}
.site-footer a { color: #d4c4e2; }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start;
}
.site-footer__brand p { font-size: 13px; line-height: 2; margin-top: 8px; color: #c3b2d4; }
.site-footer__reg { margin-top: 10px; font-size: 12px; line-height: 1.8; color: #c3b2d4; }
.site-footer__brand strong {
  font-family: "Noto Serif JP", serif; font-size: 19px; font-weight: 600; color: #fff;
}
.site-footer nav { display: grid; gap: 10px; font-size: 13.5px; }
.site-footer__copy {
  max-width: var(--container); margin: 40px auto 0; padding: 22px 20px 0;
  border-top: 1px solid rgba(212, 196, 226, .22);
  font-size: 12px; color: #b7a7c6;
}

/* スマホ固定フッターCTA */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  background: rgba(51, 32, 63, .97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 -6px 24px rgba(51, 32, 63, .22);
  padding: 10px 14px;
  gap: 10px;
}
.mobile-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; padding: 12px 8px; border-radius: 999px;
  white-space: nowrap;
}
.mobile-bar .m-tel { color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.mobile-bar .m-form { background: #fff; color: #33203f; }

/* ---------- 5-2) オープニング（ファーストビュー） ----------
   トップページのみ。背景・紫の帯・人物写真・キャッチコピーを重ねて表示し、
   文字が出そろってから約3秒見せたあとフェードアウトして本編を表示します。
   縦長の画面（スマホ・タブレット縦）と横長の画面（PC・横向き）で配置を切り替えます。
   表示時間を変えるときは .splash の animation の「5s」（待機）と
   main.js の保険タイマー（7500）をあわせて調整してください。
   JS が無効でも CSS だけで必ず消えます。                        */
.splash {
  --vh: 1vh;                /* 画面の高さの1%（iPhone等では下の svh に置き換え：ツールバーを隠した高さではなく実際に見える高さで計算するため） */
  --c: min(8.4vw, 44px);    /* キャッチコピーの文字サイズ */
  --s: min(4.1vw, 21px);    /* サブコピーの文字サイズ */
  /* 人物写真の高さ：横幅の100%までに収め左端が切れないようにし、さらに画面が低いとき（アプリ内ブラウザ等）は
     コピーの下端より下に頭が収まる高さまで縮める（78vh − コピーの高さ − 余白） */
  --ph: max(130px, min(calc(58 * var(--vh)), 100vw, calc(calc(78 * var(--vh)) - 3.1 * var(--c) - 2.6 * var(--s) - 22px)));
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  background: #f6f3f9;
  animation: splash-out .9s ease 5s forwards;
}
.splash__bg {
  position: absolute; inset: -30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(248, 244, 252, .25) 100%),
    url("../images/splash-bg.jpg") center / cover no-repeat;
  filter: blur(6px);
  animation: splash-fade .8s ease both;
}
.splash__swoosh { position: absolute; display: block; pointer-events: none; }
.splash__swoosh--top    { left: 0; top: 0; width: 72vw; height: calc(30 * var(--vh)); z-index: 1; }
.splash__swoosh--bottom { left: 0; bottom: 0; width: 100%; height: calc(30 * var(--vh)); z-index: 3; }
.splash__person {
  position: absolute; z-index: 2;
  height: var(--ph); width: auto; max-width: none;
  left: 0; bottom: calc(4 * var(--vh));
  /* 写真は JPEG ＋ 透過マスク（軽量化のため2枚に分けています） */
  -webkit-mask-image: url("../images/splash-person-mask.png"); mask-image: url("../images/splash-person-mask.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: splash-rise 1.1s cubic-bezier(.2, .7, .25, 1) .15s both;
}
.splash__copy {
  position: absolute; z-index: 4; right: 4vw; top: calc(18 * var(--vh)); width: 80vw;
  text-align: center; color: #2a1850;
}
.splash__catch {
  position: relative; margin: 0; padding-bottom: .4em;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 700;
  font-size: var(--c); line-height: 1.32; letter-spacing: .03em; color: #241046;
  text-shadow: 0 0 22px rgba(255, 255, 255, .98), 0 0 8px rgba(255, 255, 255, .95), 0 2px 2px rgba(255, 255, 255, .9);
}
.splash__catch span { display: block; animation: splash-rise .9s cubic-bezier(.2, .7, .25, 1) both; }
.splash__catch span:nth-child(1) { animation-delay: .6s; }
.splash__catch span:nth-child(2) { animation-delay: 1s; }
.splash__catch::after {
  content: ""; position: absolute; left: -3%; right: -1%; bottom: 0; height: .24em;
  background: linear-gradient(90deg, #6d4a9c 0%, #9b7cc4 55%, rgba(190, 165, 222, .25) 100%);
  clip-path: polygon(0 55%, 100% 0, 100% 35%, 0 100%);
  transform-origin: left center;
  animation: splash-draw .8s cubic-bezier(.3, .7, .3, 1) 1.5s both;
}
.splash__sub {
  margin: .9em 0 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 600;
  font-size: var(--s); letter-spacing: .05em; line-height: 1.65; color: #2a2038;
  text-shadow: 0 0 12px rgba(255, 255, 255, .95);
  animation: splash-rise .9s cubic-bezier(.2, .7, .25, 1) 1.9s both;
}
@keyframes splash-fade { from { opacity: 0; } }
@keyframes splash-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes splash-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}
/* 横長の画面（PC・タブレット横向き）：人物を左、コピーを右に大きく */
@media (orientation: landscape) {
  .splash { --ph: min(calc(88 * var(--vh)), 70vw); }
  .splash__swoosh--top    { width: 40vw; height: calc(44 * var(--vh)); }
  .splash__swoosh--bottom { height: calc(24 * var(--vh)); }
  .splash__person { left: clamp(0px, calc(42vw - var(--ph) * .572), 12vw); bottom: calc(2 * var(--vh)); }
  .splash__copy { left: 45vw; right: auto; width: auto; top: 50%; transform: translateY(-58%); text-align: left; }
  .splash__catch { font-size: min(5.2vw, calc(9.5 * var(--vh))); }
  .splash__catch::after { left: -3%; right: -6%; }
  .splash__sub { font-size: min(2.3vw, calc(4.2 * var(--vh))); }
}
/* 2回目以降の表示・アンカー付き遷移・動きを減らす設定のときは出さない */
@supports (height: 1svh) { .splash { --vh: 1svh; } }
.splash-skip .splash { display: none !important; }

/* ---------- 6) セクション共通パーツ ---------- */

/* パンくず */
.breadcrumb {
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-mute);
}
.breadcrumb ol {
  max-width: var(--container); margin: 0 auto; padding: 12px 20px;
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
}
.breadcrumb li::after { content: "／"; margin-left: 8px; color: var(--line-strong); }
.breadcrumb li:last-child::after { content: ""; }

/* ページ見出し */
.page-hero {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  padding: clamp(40px, 6vw, 68px) 0;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.4; margin: 8px 0 0; }
.page-hero p { margin: 18px 0 0; font-size: 15px; line-height: 2; color: var(--ink-soft); max-width: 42em; }

/* 桜の花びら配置（中央に花・周囲に5枚のカード） */
.blossom {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 380px; margin: 8px auto 0;
}
.blossom__flower { width: 86px; height: auto; opacity: .9; }
.blossom__cards {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; width: 100%;
}
.blossom__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 20px 18px; text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.blossom__card .num {
  font-family: "Noto Serif JP", serif; font-size: 13px; letter-spacing: .12em; color: var(--brand-soft);
}
.blossom__card .ttl {
  font-family: "Noto Serif JP", serif; font-size: 16px; font-weight: 600; color: #33203f; line-height: 1.55;
}
.blossom__card .txt { font-size: 12.5px; line-height: 1.85; color: var(--ink-soft); }
.blossom__card .txt strong { color: var(--brand); font-weight: 700; }
.blossom__card .tax { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }

@media (min-width: 880px) {
  .blossom {
    display: block; position: relative;
    max-width: 600px; width: 100%; margin-inline: auto;
    aspect-ratio: 1 / 1;
  }
  /* 中央の桜。周囲の5枚は正五角形の頂点（＝花びらの先）に配置します。
     配置の基準：中心 (50%, 52%)／半径 39%。花のサイズを変えたときは
     カードが花に重ならないよう、半径もあわせて調整してください。 */
  .blossom__flower {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
    width: 36%; margin: 0;
  }
  .blossom__cards { position: absolute; inset: 0; display: block; }
  .blossom__card {
    position: absolute; width: clamp(130px, 30%, 190px);
    transform: translate(-50%, -50%);
    min-height: 128px; padding: 15px 11px; gap: 5px;
  }
  .blossom__card .ttl { font-size: 15.5px; }
  .blossom__card .txt { font-size: 12px; line-height: 1.75; }
  .blossom__card:nth-child(1) { left: 50%;   top: 13%; }    /* 上 */
  .blossom__card:nth-child(2) { left: 87.1%; top: 40%; }    /* 右上 */
  .blossom__card:nth-child(3) { left: 72.9%; top: 83.6%; }  /* 右下 */
  .blossom__card:nth-child(4) { left: 27.1%; top: 83.6%; }  /* 左下 */
  .blossom__card:nth-child(5) { left: 12.9%; top: 40%; }    /* 左上 */

  /* 大きい版（選ばれる理由・5つの仕組み）：中心 (50%, 54%)／半径 41% */
  .blossom--lg { max-width: 820px; aspect-ratio: 1 / 1.02; }
  .blossom--lg .blossom__flower { width: 40%; top: 54%; }
  .blossom--lg .blossom__card {
    width: clamp(180px, 30%, 244px); min-height: 190px; padding: 20px 18px; gap: 6px;
  }
  .blossom--lg .blossom__card .ttl { font-size: 17px; }
  .blossom--lg .blossom__card .txt { font-size: 12.5px; line-height: 1.9; }
  .blossom--lg .blossom__card:nth-child(1) { left: 50%;   top: 13%; }
  .blossom--lg .blossom__card:nth-child(2) { left: 89%;   top: 41.3%; }
  .blossom--lg .blossom__card:nth-child(3) { left: 74.1%; top: 87.2%; }
  .blossom--lg .blossom__card:nth-child(4) { left: 25.9%; top: 87.2%; }
  .blossom--lg .blossom__card:nth-child(5) { left: 11%;   top: 41.3%; }
}

/* 定義リスト風テーブル（比較表） */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.compare {
  width: 100%; min-width: 640px; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md); border-radius: var(--radius); overflow: hidden;
}
.compare th, .compare td {
  padding: 15px 18px; font-size: 14px; line-height: 1.8; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.compare thead th {
  background: var(--bg-alt); font-family: "Noto Serif JP", serif; font-size: 15px; color: #282232;
}
.compare thead th:last-child { background: var(--brand); color: #fff; }
.compare tbody th { font-weight: 700; color: #3b2549; font-size: 13.5px; }
.compare td:last-child, .compare tbody tr td:last-child { background: #faf7fd; color: #33203f; font-weight: 600; }
.compare .num { font-family: "Noto Serif JP", serif; }
.compare tr.is-total th, .compare tr.is-total td { background: var(--accent-bg); border-top: 2px solid var(--brand); font-family: "Noto Serif JP", serif; }
.compare tr.is-total td:last-child { background: var(--brand); color: #fff; font-size: clamp(18px, 2.4vw, 24px); }
.compare small { color: var(--ink-mute); font-size: 12px; }
.note { margin: 14px 0 0; font-size: 12px; line-height: 1.9; color: var(--ink-mute); }

/* サービス／料金の説明ブロック */
.detail__body { min-width: 0; }
.detail {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 34px 32px;
}
.detail + .detail { margin-top: 18px; }
.detail__head .num {
  font-family: "Noto Serif JP", serif; font-size: 13px; letter-spacing: .14em; color: var(--brand-soft);
  display: block; margin-bottom: 8px;
}
.detail__head h3 { font-size: clamp(20px, 2.2vw, 25px); margin-bottom: 10px; }
.detail__head .price {
  font-family: "Noto Serif JP", serif; font-size: 20px; font-weight: 600; color: var(--brand); line-height: 1.6;
}
.detail__head .price small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-mute); margin-top: 4px; }
/* 税込価格の併記（総額表示）。本体価格より小さく、ただし読みやすい大きさ・濃さを保つ */
.price__tax {
  display: inline-block; margin-left: .25em;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-soft);
}
.detail__body p { font-size: 14.5px; line-height: 2; color: var(--ink); }
.detail__body p + p { margin-top: 12px; }
.detail__body .catch { color: var(--brand); font-weight: 700; margin-bottom: 12px; }
.detail__list { list-style: none; display: grid; gap: 8px; margin: 12px 0 16px; }
.detail__list li {
  font-size: 14px; color: var(--ink); padding-left: 14px;
  border-left: 2px solid var(--line-strong); line-height: 1.7;
}

/* ステップ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 20px; }
.step__no { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; color: var(--brand-soft); font-weight: 700; }
.step__title { font-size: 15px; font-weight: 700; color: #33203f; line-height: 1.7; }
.step__title span { display: block; font-size: 13px; font-weight: 400; color: var(--ink-soft); margin-top: 4px; }

/* CTA 帯 */
.cta-band { background: var(--brand); color: #fff; }
.cta-band .container {
  padding-top: clamp(48px, 7vw, 72px); padding-bottom: clamp(48px, 7vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.cta-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
.cta-band p { color: #efe6f6; font-size: 14.5px; line-height: 2; }
.cta-band .btn--primary { background: #fff; color: var(--brand); }
.cta-band .btn--primary:hover { background: var(--accent-bg); color: var(--brand-dark); }
.cta-band__list { display: grid; gap: 10px; }
.cta-band__list li {
  list-style: none; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .12); padding: 13px 16px; border-radius: 4px; line-height: 1.6;
}
.cta-band__list li.cta-band__note {
  background: none; padding: 0 2px; font-size: 12px; font-weight: 400; line-height: 1.7; color: #efe6f6;
}

/* 事例カード */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.case { display: flex; flex-direction: column; gap: 16px; }
.case__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.case__tags span:not(.pill) { font-size: 12.5px; color: var(--ink-mute); }
.case__title { font-family: "Noto Serif JP", serif; font-size: 19px; font-weight: 600; color: #33203f; line-height: 1.6; }
.case__row { font-size: 14px; line-height: 1.95; color: var(--ink); }
.case__row b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--brand-soft); margin-bottom: 3px; }

/* ご支援事例：一覧のカード（左に縦長の写真）と個別ページ */
.case-grid--posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.card.case-card {
  display: grid; grid-template-columns: 38% minmax(0, 1fr);
  padding: 0; overflow: hidden; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card.case-card:hover { border-color: var(--brand-soft); box-shadow: var(--shadow-sm); color: inherit; }
/* 写真：縦長（3:4）。スマホで撮った写真がそのまま収まります */
.case-card__photo {
  aspect-ratio: 3 / 4; height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #efe5f8 0%, #f9f5fd 100%);
}
.case-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card.case-card:hover .case-card__photo img { transform: scale(1.03); }
.case-card__photo .case-card__noimage { width: 46%; height: auto; object-fit: contain; opacity: .45; }
.card.case-card:hover .case-card__photo .case-card__noimage { transform: none; }
.case-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; min-width: 0; }
.case-card__body .case__title { font-size: 17px; }
.case-card__excerpt { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.case-card__more { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--brand); }
@media (max-width: 560px) {
  .card.case-card { grid-template-columns: 40% minmax(0, 1fr); }
  .case-card__body { gap: 8px; padding: 16px 16px 14px; }
  .case-card__body .case__title { font-size: 15px; line-height: 1.6; }
  .case-card__body .case__tags { gap: 6px; }
  .case-card__body .case__tags span:not(.pill) { font-size: 11.5px; }
  .case-card__excerpt { display: none; }
}
.case-empty { max-width: 640px; margin: 0 auto; padding: 44px 28px; text-align: center; }
.case-empty img { margin: 0 auto 14px; opacity: .6; }
.case-empty__title { font-family: "Noto Serif JP", serif; font-size: 19px; font-weight: 600; color: #33203f; margin-bottom: 8px; }
.case-empty p:not(.case-empty__title) { font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
/* 個別ページ：写真は見出しの横（スマホでは下）に縦長で */
.case-single__head { display: grid; gap: 24px; margin-bottom: 36px; }
.case-single__photo {
  width: 100%; max-width: 250px; margin: 0 auto; aspect-ratio: 3 / 4;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  background: linear-gradient(160deg, #efe5f8 0%, #f9f5fd 100%);
}
.case-single__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .case-single__head--photo { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 40px; }
  .case-single__head--photo .case-single__photo { max-width: none; }
}

/* ブログカード */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.post { display: flex; flex-direction: column; gap: 12px; }
.post:hover { border-color: var(--brand-soft); }
.post__meta { display: flex; align-items: center; gap: 10px; }
.post__meta time { font-size: 12px; color: var(--ink-mute); }
.post__title { font-family: "Noto Serif JP", serif; font-size: 17px; font-weight: 600; color: #33203f; line-height: 1.7; }
.post__excerpt { font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); }

/* 事務所概要テーブル */
.info-table { display: grid; }
.info-table div {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.info-table dt { font-size: 13px; color: var(--ink-mute); }
.info-table dd { margin: 0; font-size: 14.5px; color: #3b2549; line-height: 1.8; }

.map-frame {
  width: 100%; min-height: 320px; height: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.map-note { margin-top: 10px; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); }
.map-placeholder {
  width: 100%; min-height: 320px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
  background: var(--accent-bg);
  background-image: repeating-linear-gradient(135deg, rgba(91,59,115,.06) 0 8px, rgba(91,59,115,0) 8px 16px);
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.8;
}

/* フォーム */
.form-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(28px, 5vw, 44px); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field:last-of-type { margin-bottom: 0; }
.field > span { font-size: 13px; font-weight: 700; color: #3b2549; }
.field .req { color: #b23b6b; margin-left: 6px; font-size: 12px; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 13px 15px; background: var(--bg); width: 100%;
}
.field textarea { line-height: 1.9; resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-soft); box-shadow: 0 0 0 3px rgba(138, 99, 168, .16);
}
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.form-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; margin: 0; }
.form-status { display: none; padding: 28px 4px; text-align: center; }
.form-status.is-visible { display: block; }
.form-status h3 { font-size: 24px; margin-bottom: 12px; }
.form-status p { font-size: 14.5px; line-height: 2; color: var(--ink); }

.contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 36px; }
.contact-methods a, .contact-methods div {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 24px 20px; text-align: center;
}
.contact-methods a:hover { border-color: var(--brand-soft); }
.contact-methods .label { font-size: 12px; letter-spacing: .08em; color: var(--ink-mute); margin-bottom: 6px; }
.contact-methods .value { font-family: "Noto Serif JP", serif; font-size: 20px; font-weight: 600; color: var(--brand); word-break: break-word; }
.contact-methods .value--sm { font-family: inherit; font-size: 15px; font-weight: 700; }

/* LINE（お問い合わせページのカード・QRコード・スマホ下部バー） */
.contact-line__id { margin-top: 6px; font-size: 12px; color: var(--ink-mute); }
.contact-methods .contact-line:hover { border-color: #06c755; }
.line-qr {
  display: flex; align-items: center; gap: 22px;
  margin: -14px 0 36px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.line-qr img { width: 132px; height: 132px; flex-shrink: 0; }
.line-qr__title { font-weight: 700; font-size: 15px; color: #33203f; margin-bottom: 6px; }
.line-qr__text { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
@media (max-width: 560px) {
  .line-qr { flex-direction: column; text-align: center; gap: 14px; padding: 22px 18px; }
  .line-qr img { width: 150px; height: 150px; }
}
.mobile-bar .m-line { background: #06c755; color: #fff; flex: 0 0 auto; padding-inline: 20px; }
.mobile-bar .m-line:hover { color: #fff; }
@media (max-width: 380px) {
  .mobile-bar { gap: 8px; padding: 10px 10px; }
  .mobile-bar a { font-size: 12.5px; padding: 12px 4px; }
  .mobile-bar .m-line { padding-inline: 14px; }
}

/* CTAボタン内のアイコン・矢印 */
.btn__ico { width: 19px; height: 19px; flex-shrink: 0; }
.btn__arrow { flex-shrink: 0; font-weight: 400; }
.btn__label span { display: inline-block; }   /* 変な位置で改行させない */


/* トップの導線カード */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.guide-card:hover { border-color: var(--brand-soft); box-shadow: var(--shadow-sm); }
.guide-card h3 { font-size: 18px; }
.guide-card p { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.guide-card .arrow { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--brand); }

/* 汎用 prose */
.prose p { font-size: 15px; line-height: 2.05; color: var(--ink); }
.prose p + p { margin-top: 16px; }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 40px 0 14px; }
.prose h3 { font-size: 19px; margin: 28px 0 10px; }

/* ---------- 8) レスポンシブ ---------- */
@media (max-width: 1300px) {
  .header-tel { display: none; }
}

@media (max-width: 1080px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 8px 16px 20px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { padding: 14px 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .header-cta { margin-top: 14px; flex-direction: column; align-items: stretch; }
  .header-cta .btn { padding: 14px 18px; font-size: 14px; }
  .header-tel { display: flex; justify-content: center; font-size: 14px; padding: 13px; }
  .header-tel__num { font-size: 15px; }

  .cta-band .container { grid-template-columns: 1fr; gap: 28px; }
  .detail { grid-template-columns: 1fr; gap: 18px; padding: 28px 24px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr !important; }
  .mobile-bar { display: flex; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .section { padding: 48px 0; }
  .card { padding: 24px 20px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .info-table div { grid-template-columns: 96px 1fr; gap: 12px; }
  .contact-methods { grid-template-columns: 1fr; }
  .btn--lg { font-size: 15px; padding: 17px 22px; }
}

/* ---------- 8-2) トップのファーストビュー ----------
   PC（1081px以上）：左に「エリア・見出し・割引の帯・ボタン」、右に「5つのサポート」。
   スマホ・タブレット（1080px以下）：縦1列（エリア → 見出し → 5つのサポート → 帯 → ボタン）。
   「5つのサポート」の円は、中央の桜を中心とした正五角形の頂点に配置しています。 */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(16px, 3.4vw, 48px) 0 clamp(30px, 4.4vw, 60px);
  background:
    radial-gradient(120% 38% at 105% 6%, rgba(255, 255, 255, .95) 0 28%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(110% 30% at -10% 52%, rgba(255, 255, 255, .9) 0 22%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(165deg, #ece0f8 0%, #f8f3fd 38%, #efe4f9 66%, #f6f0fb 100%);
}
/* 背景の金の細いライン */
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%;
}
.hero::before {
  width: 200vw; height: 80vw; left: -70vw; top: min(52vw, 300px);
  border-top: 1.5px solid rgba(201, 162, 85, .5); transform: rotate(-12deg);
}
.hero::after {
  width: 220vw; height: 90vw; left: -40vw; top: min(196vw, 860px);
  border-top: 1.5px solid rgba(201, 162, 85, .42); transform: rotate(-9deg);
}
.hero > .hero__grid {
  position: relative; z-index: 1; max-width: var(--container);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 56px); align-items: center;
}

/* 対応エリア */
.hero__badge {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: fit-content; max-width: 100%; margin: 0 0 20px;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  font-size: clamp(10.5px, 3vw, 13px); font-weight: 700; letter-spacing: 0; line-height: 1.5;
  color: #33203f; background: rgba(255, 255, 255, .88); border: 1.5px solid #d9c6ec;
  box-shadow: 0 4px 14px rgba(91, 59, 115, .08);
}
.hero__pin { display: block; width: 1.4em; height: 1.4em; flex-shrink: 0; fill: var(--brand); }

/* 見出し：3行・少し傾けて筆のラインを添える */
.hero h1 {
  margin: 14px 0 26px; padding-left: 4px;
  color: #2a1850; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  transform: rotate(-3deg); transform-origin: left center;
}
.hero h1 em { font-style: normal; }
.hero h1 > span { display: block; position: relative; width: fit-content; padding-bottom: 7px; }
.h1-a { font-size: min(7vw, 40px); }
.h1-b { font-size: min(7.1vw, 40px); margin-top: 4px; }
.h1-b em { font-size: 1.36em; }
.h1-c { font-size: min(9.6vw, 56px); }
.h1-c em { font-size: 1.4em; }
.hero h1 > span::after {
  content: ""; position: absolute; left: -3%; right: -8%; bottom: 0; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(138, 99, 168, 0) 0%, #9a73bd 16%, #6a3f98 72%, rgba(106, 63, 152, 0) 100%);
  transform: skewX(-30deg);
}

/* 5つのサポート */
.hero__figure-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 8px 10px; font-size: clamp(14px, 4.1vw, 20px); letter-spacing: .03em; color: #33203f;
}
.hero__figure-title::before, .hero__figure-title::after {
  content: ""; flex: 1; max-width: 44px; height: 1.5px;
  background: linear-gradient(90deg, rgba(201, 162, 85, 0), #c9a255);
}
.hero__figure-title::after { transform: scaleX(-1); }

.hero-blossom { position: relative; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 100 / 96; }
.hero-blossom__flower {
  position: absolute; left: 50%; top: 53.1%; width: 27%;
  transform: translate(-50%, -50%); margin: 0;
}
.hero-blossom__list { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; }
.hero-circle {
  position: absolute; width: 36%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 6px; border-radius: 50%; border: 2px solid transparent; text-align: center; line-height: 1.3;
  background:
    radial-gradient(circle at 50% 40%, #fff 0 58%, #fdf9f2 100%) padding-box,
    linear-gradient(140deg, #f1dfae 0%, #b98d3e 35%, #ecd49a 62%, #a87f33 100%) border-box;
  box-shadow: 0 8px 18px rgba(91, 59, 115, .12);
}
/* 中心 (50, 51)／半径 33（幅を100とした値）で計算した五角形の頂点 */
.hero-circle:nth-child(1) { left: 50%;   top: 18.75%; }  /* 上 */
.hero-circle:nth-child(2) { left: 81.4%; top: 42.5%; }   /* 右上 */
.hero-circle:nth-child(3) { left: 69.4%; top: 80.9%; }   /* 右下 */
.hero-circle:nth-child(4) { left: 30.6%; top: 80.9%; }   /* 左下 */
.hero-circle:nth-child(5) { left: 18.6%; top: 42.5%; }   /* 左上 */
.hero-circle__ico { width: clamp(19px, 5.8vw, 27px); height: clamp(19px, 5.8vw, 27px); color: #4b2c73; margin-bottom: 1px; }
.hero-circle__ttl { font-size: clamp(11.5px, 3.3vw, 15.5px); font-weight: 700; color: #33203f; }
.hero-circle__val {
  font-family: "Noto Serif JP", serif; font-weight: 700; line-height: 1.1;
  font-size: clamp(22px, 7vw, 34px); letter-spacing: 0;
  background: linear-gradient(175deg, var(--gold-light) 0%, #b98d3e 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.hero-circle__val small { font-size: .56em; }
.hero-circle__val--sm { font-size: clamp(17px, 5.3vw, 26px); }
.hero-circle__val--sm small { font-size: .62em; }
.hero-circle__txt { font-size: clamp(10px, 2.8vw, 13px); line-height: 1.4; color: var(--ink-soft); margin-top: 1px; }
.hero-circle__tax { font-size: clamp(10.5px, 2.95vw, 13.5px); font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--ink-soft); margin-top: 2px; }

/* 「さらにホームページからのお問い合わせで 顧問料5万円割引」の帯 */
.hero-banner {
  position: relative; max-width: 540px; margin: 0 0 26px; padding: 9px 16px 11px 50px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(100deg, #3a2063 0%, #573489 58%, #8757bd 100%);
  clip-path: polygon(3.5% 0, 100% 0, 96.5% 100%, 0 100%);
  color: #fff; text-align: center;
}
.hero-banner__crown {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; fill: var(--gold-light);
}
.hero-banner__pre {
  font-size: clamp(11px, 3.05vw, 14.5px); letter-spacing: .02em; line-height: 1.5; color: #ece0f7;
  text-wrap: balance;
}
.hero-banner__main {
  font-family: "Noto Serif JP", serif; font-weight: 700; line-height: 1.2;
  font-size: min(7.2vw, 36px); letter-spacing: .06em;
}
.hero-banner__main b {
  font-size: 1.5em; margin: 0 .06em; letter-spacing: 0;
  background: linear-gradient(175deg, #f6e2a8 0%, var(--gold-light) 40%, #b98d3e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-light);
}
.hero-banner__main b small { font-size: .6em; }
.hero-banner__note {
  margin-top: 3px; font-size: clamp(10.5px, 2.8vw, 12.5px); line-height: 1.4; letter-spacing: .02em; color: #ece0f7;
}

/* ボタン（縦に2つ） */
.hero .btn-row { flex-direction: column; gap: 12px; max-width: 540px; }
.hero .btn-row .btn { width: 100%; }
.hero .btn-row .btn--primary {
  font-size: clamp(13px, 3.75vw, 16px); padding: 17px 14px; gap: 10px;
  background: linear-gradient(90deg, #3a2063 0%, #5b3b8c 100%);
  box-shadow: 0 10px 22px rgba(58, 32, 99, .26);
}
.hero .btn-row .btn--primary:hover { background: linear-gradient(90deg, #2e1850 0%, #4b2f76 100%); }
.hero .btn-row .btn--primary .btn__label { border-left: 1px solid rgba(255, 255, 255, .35); padding-left: 11px; }
.hero .btn-row .btn--ghost { padding: 15px 16px; background: rgba(255, 255, 255, .85); border-color: #cdb5e6; }
.hero .btn-row .btn--ghost::after { content: "→"; font-weight: 400; margin-left: 6px; }

/* スマホ・タブレット：縦1列に並べ替え、中身を中央に寄せる */
@media (max-width: 1080px) {
  .hero > .hero__grid { display: flex; flex-direction: column; align-items: stretch; max-width: 600px; }
  .hero__body { display: contents; }
  .hero__badge { order: 1; align-self: center; margin: 0 auto 20px; }
  .hero h1 { order: 2; }
  .hero__figure { order: 3; margin: 0 -8px; }
  .hero-banner { order: 4; width: calc(100% - 4px); margin: 16px 2px 24px; max-width: none; }
  .hero .btn-row { order: 5; max-width: none; }
  .hero-blossom { max-width: 480px; }
}

/* スクロールでふわっと登場 */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal[data-reveal-delay="1"] { transition-delay: .08s; }
  .js .reveal[data-reveal-delay="2"] { transition-delay: .16s; }
  .js .reveal[data-reveal-delay="3"] { transition-delay: .24s; }
  .js .reveal[data-reveal-delay="4"] { transition-delay: .32s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================
   9) WordPress 用の追加スタイル
   ========================================================= */

/* 読み上げ専用テキスト（WordPress 標準クラス） */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ログイン中に表示される管理バーとヘッダーが重ならないように */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* ブログ記事の本文 */
.entry { font-size: 15.5px; line-height: 2.05; color: var(--ink); }
.entry > * + * { margin-top: 1.2em; }
.entry h2 {
  font-size: clamp(21px, 2.4vw, 26px); margin-top: 2.4em;
  padding-bottom: .45em; border-bottom: 2px solid var(--line-strong);
}
.entry h3 { font-size: 19px; margin-top: 2em; padding-left: 12px; border-left: 4px solid var(--brand-soft); }
.entry h4 { font-size: 16.5px; margin-top: 1.8em; }
.entry ul, .entry ol { padding-left: 1.4em; }
.entry li + li { margin-top: .4em; }
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.entry img { border-radius: var(--radius-sm); }
.entry figure { margin: 1.8em 0; }
.entry figcaption { font-size: 12.5px; color: var(--ink-mute); text-align: center; margin-top: 8px; }
.entry blockquote {
  margin: 1.8em 0; padding: 16px 20px; background: var(--bg-alt);
  border-left: 4px solid var(--brand-soft); color: var(--ink-soft);
}
.entry table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry th, .entry td { border: 1px solid var(--line-strong); padding: 10px 12px; text-align: left; }
.entry th { background: var(--bg-alt); }
.entry .aligncenter { margin-left: auto; margin-right: auto; }
.entry .wp-block-button__link { background: var(--brand); color: #fff; border-radius: 999px; text-decoration: none; }

.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 4px 0 28px; font-size: 13px; color: var(--ink-mute); }
.post-thumb { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; }
.post-thumb img { width: 100%; }
.post-back { margin-top: 48px; }

/* 記事カード（一覧） */
a.card.post { color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
a.card.post:hover { box-shadow: var(--shadow-sm); }
.post__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; margin-bottom: 4px; }

/* ページ送り */
.pagination { margin-top: 44px; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 14px;
}
.pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination a.page-numbers:hover { background: var(--accent-bg); }

/* お問い合わせフォーム（Contact Form 7） */
.wpcf7 .field { margin-bottom: 20px; }
.wpcf7 .form-grid .field { margin-bottom: 0; }
.wpcf7 .form-grid { margin-bottom: 20px; }
.wpcf7 .field > .wpcf7-form-control-wrap { display: block; font-size: inherit; font-weight: 400; color: inherit; }
.wpcf7 .wpcf7-submit { font-family: inherit; }
.wpcf7 .wpcf7-submit:disabled { opacity: .6; cursor: not-allowed; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 6px; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 12.5px; color: #b23b6b; margin-top: 6px; }
.wpcf7 .field .wpcf7-not-valid { border-color: #d98aa9; }
.wpcf7 form .wpcf7-response-output { margin: 22px 0 0; padding: 14px 16px; border-radius: 4px; font-size: 14px; line-height: 1.8; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #9ccfae; background: #f1faf4; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: #e7b3c6; background: #fdf3f7; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; font-size: 13.5px; }
/* 同意チェックボックス：入力欄用の幅100%・余白を打ち消し、文字と横並びに */
.field input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; }
.wpcf7-acceptance label { display: inline-flex; align-items: center; gap: 10px; line-height: 1.7; cursor: pointer; }
.form-fallback { text-align: center; padding: 16px 0; font-size: 14.5px; line-height: 2; }

/* 記事・事例の下から、トップページ（会社設立の費用比較）へ案内するカード／ブログ一覧の案内 */
.to-top { padding-top: 0; border-top: 0 !important; }
.to-top__card {
  background: var(--accent-bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
}
.to-top__card h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 10px; }
.to-top__card p { font-size: 14.5px; line-height: 2; color: var(--ink-soft); }
.to-top__card .note { margin-top: 14px; }
.to-top-line {
  background: var(--accent-bg); border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
  padding: 14px 18px; margin: 0 0 28px; font-size: 14.5px; line-height: 1.9; color: var(--ink-soft);
}
.to-top-line a { font-weight: 700; text-decoration: underline; }
.to-top-line__note { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-mute); }

/* ===== トップ改善案：追加CSS（本番では assets/css/style.css の末尾に追加します） ===== */
.hero__lead { margin: 16px 0 20px; font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); max-width: 36em; }
.hero__hours { margin: 16px 0 0; font-size: 13px; line-height: 1.9; color: var(--ink-soft); }
.hero__hours strong { color: var(--brand); font-weight: 700; margin-right: 6px; }

.faq { display: grid; gap: 12px; margin-top: 8px; }
.faq__item { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.faq__item[open] { box-shadow: var(--shadow-sm); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 52px 18px 58px; font-weight: 700; font-size: 15.5px; line-height: 1.7; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "Q"; position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff; font-family: "Noto Serif JP", serif; font-size: 14px; line-height: 28px; text-align: center;
}
.faq__item summary::after {
  content: "+"; position: absolute; right: 20px; top: 14px; font-size: 24px; line-height: 1.4; color: var(--brand); font-weight: 400;
}
.faq__item[open] summary::after { content: "−"; }
.faq__a { padding: 0 24px 20px 58px; font-size: 14.5px; line-height: 2; color: var(--ink-soft); }
.faq__a p + p { margin-top: .6em; }
.faq__a a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.guide-card--static { cursor: default; }
.guide-card--static:hover { transform: none; box-shadow: none; }
@media (max-width: 600px) {
  .faq__item summary { padding: 16px 44px 16px 52px; font-size: 14.5px; }
  .faq__item summary::before { left: 14px; top: 14px; }
  .faq__a { padding: 0 18px 18px 18px; }
}
/* スマホ・タブレット：既存の並び順（バッジ→見出し→円→割引帯→ボタン）に合わせる */
@media (max-width: 1080px) {
  .hero__lead { order: 2; margin: 14px 0 6px; }
  .hero__hours { order: 6; margin: 4px 2px 0; }
}

/* 記事・事例の下：会社設立手数料0円・顧問料5万円割引のカード */
.to-top__eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--brand); }
.to-top__card .to-top__lead { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--ink); }
.to-top__offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 4px; }
.to-top__card .to-top__badge {
  margin: 0; padding: 14px 16px 12px; text-align: center; border-radius: var(--radius-sm);
  background: linear-gradient(100deg, #3a2063 0%, #573489 58%, #8757bd 100%); color: #fff;
}
.to-top__badge span { display: block; font-size: 13px; line-height: 1.5; color: #ece0f7; }
.to-top__badge b {
  display: block; font-family: "Noto Serif JP", serif; font-size: clamp(36px, 8vw, 48px); line-height: 1.2; letter-spacing: 0;
  background: linear-gradient(175deg, #f6e2a8 0%, var(--gold-light) 40%, #b98d3e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-light);
}
.to-top__badge b small { font-size: .42em; margin-left: .1em; }

/* トップ：弊所で会社設立をした場合の流れ */
.flow { list-style: none; display: grid; gap: 12px; margin: 8px 0 0; padding: 0; }
.flow__item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px;
}
.flow__no {
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff;
  font-family: "Noto Serif JP", serif; font-size: 18px; font-weight: 600; line-height: 44px; text-align: center;
}
.flow__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.6; color: #33203f; }
.flow__who {
  display: inline-block; margin-left: 10px; padding: 1px 10px; border-radius: 999px; vertical-align: middle;
  background: var(--accent-bg); color: var(--brand); font-size: 11.5px; font-weight: 700; line-height: 1.7;
}
.flow__txt { margin: 0; font-size: 14px; line-height: 1.95; color: var(--ink-soft); }
@media (max-width: 600px) {
  .flow__item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px 16px; }
  .flow__no { width: 36px; height: 36px; font-size: 16px; line-height: 36px; }
  .flow__who { display: block; width: fit-content; margin: 4px 0 0; }
}

/* ブログ記事：本文の1段落目の直後に入れる0円・5万円割引のカード（本文用の見出し・リンクの装飾を打ち消す） */
.to-top--inline { margin: 28px 0 32px; }
.entry .to-top__card h2 { margin-top: 0; padding-bottom: 0; border-bottom: 0; }
.entry .to-top__card p { margin: 0; }
.entry .to-top__card .to-top__eyebrow { margin: 0 0 6px; }
.entry .to-top__card .to-top__lead { margin: 6px 0 0; }
.entry .to-top__card .to-top__offer { margin: 16px 0 4px; }
.entry .to-top__card .note { margin: 14px 0 0; }
.entry .to-top__card a.btn { text-decoration: none; }