:root{
  --paper-soft:        #FDF4E6;   /* パネル・カード・表・hover面（アイボリー） */
  --paper:             #FFFFFF;   /* ページ地・ヘッダー（白） */
  --paper-2:           #F2A23F;   /* アクセント帯・ハイライト（オレンジ） */
  --gray:              #F0F4F7;   /* ボックス・補足面・カードボタン（淡いアイスブルーグレー） */
  --midori:            #48A057;   /* 濃い緑（ボタン用） */
  --midori-deep:       #388445;   /* 濃い緑（ホバー用） */
  --paper-dark:        #1B2F47;   /* .band.dark / .cta-band（ダーク帯背景） */

  --ink: #000000;
  --ink-soft: #595757;
  --kaki: #B15A34;
  --kaki-deep: #8C4527;
  --kaki-on-ink: #D98A63;
  --primary: #D96029;
  --primary-deep: #B54A18;
  /* 料金表の記帳方法の色分け（自分で記帳＝淡い紺／おまかせ＝淡い朱） */
  --col-self-line:  #8FA3B5;
  --col-omakase-bg: #FFF6F0;
  --col-omakase-th: #FBE9DD;

  /* ---- rules ----
     --line       : 構造の境界（カード外枠・表の外枠・ヘッダー/フッターの区切り）
     --line-soft  : 反復する行区切り（リスト・FAQ・表の内部罫線）
     --line-strong: タグ枠など、強く締めたい箇所のみ */
  --line-soft:   #CCC3B3;
  --line:        #A89E8B;
  --line-strong: #847862;

  --paper-on-ink: #F7F7F7;
  --soft-on-ink: #AEB9C6;
  --line-on-ink: rgba(246,242,231,0.22);

  /* ---- elevation ---- */
  --shadow-panel: 0 1px 2px rgba(27,47,71,.04), 0 8px 24px rgba(27,47,71,.05);
  --shadow-lift:  0 6px 20px rgba(27,47,71,.10);

  --font-sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  /* タイポグラフィスケール（8段）。詳細は §2 を参照。
     .column-body / .news-body（コラム本文）と金額表示はこのスケールの対象外。 */
  --fs-note:  12px;  /* タグ・必須マーク・営業時間 */
  --fs-small: 14px;  /* 注記・キャプション・パンくず・英字アイブロウ・日付・フッター */
  --fs-body:  16px;  /* 本文・ナビ・ボタン・表本文・フォーム */
  --fs-lead:  18px;  /* リード文・導入文 */
  --fs-h3:    20px;  /* 小見出し・カード見出し・電話番号 */
  --fs-h2s:   24px;  /* 引用・氏名・準見出し */
  --fs-h2:    30px;  /* セクション見出し */
  --fs-h1:    42px;  /* ページタイトル・ヒーロー */

  --fs-price:    28px;
  --fs-price-sm: 24px;

  --head-h-mobile: 60px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.8;
}
.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(24px, 3.5vw, 48px);
}
a{ color: inherit; }
:focus-visible{
  outline: 2px solid var(--kaki-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- reveal ---------- */
.reveal{ opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ---------- header ---------- */
.utility-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 48px 4px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  gap: 16px;
  flex-wrap: wrap;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.utility-links{ display: flex; align-items: center; gap: 18px; }
.utility-links a{ color: var(--ink-soft); text-decoration: none; }
.utility-links a:hover{ color: var(--ink); }
.utility-phone{ display: none; }
.nav-menu-cta{ display: none; }
/* すりガラス（モザイク・ブラー）背景オーバーレイ（ヘッダー以外のメイン画面にかける） */
.nav-backdrop{
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(27, 47, 71, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 90;
}
body.nav-open .nav-backdrop,
.site-head.nav-open .nav-backdrop,
.nav-wrap.open ~ .nav-backdrop{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.nav-open{
  overflow: hidden;
}

.site-head{
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  z-index: 100;
}
.site-head-placeholder{
  display: none;
}

/* ヘッダー各パーツ：不透明な地色を敷いてモザイクの影響を受けないクリアな状態に */
.utility-bar,
.topbar,
.nav-wrap{
  background: var(--paper);
  position: relative;
  z-index: 101;
}

/* PC時のスタイル（861px以上）：固定追従なし・常時フルヘッダー */
@media (min-width: 861px){
  /* PCではMENUボタンおよびナビ内CTAを完全非表示 */
  .nav-toggle{
    display: none !important;
  }
  .nav-menu-cta{
    display: none !important;
  }
}
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px clamp(24px, 3.5vw, 48px) 10px;
  gap: 24px;
  transition: padding 0.2s ease;
}
.mark{
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.mark span{
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.16em;
  margin-top: 4px;
}
.header-actions{
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.head-tel{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tel-number,
.nav-menu-tel .tel-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tel-number::before,
.nav-menu-tel .tel-link::before,
.utility-phone::before{
  content: "";
  display: inline-block;
  width: 0.88em;
  height: 0.88em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
  transition: background-color .2s ease;
}
.head-tel .tel-number{
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-soft);
  padding: 0 16px;
  height: 44px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}
.head-tel .tel-number:hover{
  background: var(--paper-2);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}
.head-tel .tel-note{
  position: static;
  transform: none;
  font-size: var(--fs-note);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.2;
}
.topbar .btn-primary{
  padding: 0 16px 0 20px;
  height: 44px;
  gap: 8px;
  font-size: var(--fs-small);
  border-radius: 8px;
  box-sizing: border-box;
}
.topbar .btn-primary::after{
  width: 18px;
  height: 18px;
  background-size: 10px 10px;
}

/* 追従ヘッダーの高さぶん、アンカー着地位置を下げる（PC） */
[id]{ scroll-margin-top: 80px; }
#fee-option{ scroll-margin-top: 80px; }

.nav-wrap{ border-top: none; }
.nav-row{
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 2px clamp(24px, 3.5vw, 48px) 8px;
  flex-wrap: nowrap;
}
.nav-row a{ color: var(--ink); text-decoration: none; }
/* PC（861px以上）：上の帯を出さずヘッダーを薄くする。お知らせ・お問い合わせはメニューの右端へ */
.head-links{ display: none; }
@media (min-width: 861px){
  .utility-bar{ display: none; }
  .topbar{ padding-top: 6px; padding-bottom: 2px; }
  .nav-row{ padding-top: 0; padding-bottom: 6px; }
  .head-links{ display: flex; align-items: center; margin-left: auto; }
  .head-links a{
    padding: 4px 12px; font-size: 13px; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  }
  .head-links a + a{ border-left: 1px solid var(--line, rgba(0, 0, 0, .15)); }
  .head-links a:hover{ color: var(--primary); text-decoration: underline; }
}
/* 幅の狭いPCではメニューと横に並びきらないので、縦に積む */
@media (min-width: 861px) and (max-width: 1023px){
  .head-links{ flex-direction: column; align-items: flex-start; }
  .head-links a{ padding: 0 0 0 8px; font-size: 12px; line-height: 1.5; }
  .head-links a + a{ border-left: 0; }
}
.nav-row > a,
.nav-item > :is(a, button){
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px clamp(10px, 1.2vw, 16px);
  font-size: clamp(13px, 1.1vw, 15px);
  white-space: nowrap;
  background: var(--paper-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  border: none;
  font: inherit;
  color: var(--ink);
  letter-spacing: inherit;
}
.nav-row > a:hover,
.nav-item > :is(a, button):hover{
  color: var(--kaki-deep);
  background: var(--paper-2);
  transform: translateY(-1px);
}
.nav-row .current{ color: var(--kaki-deep); font-weight: 700; }
.nav-item{ position: relative; display: inline-flex; }
.nav-item > :is(a, button)::after{ content: "▾"; font-size: 10px; color: var(--ink-soft); }
.dropdown{
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  min-width: 196px;
  padding: 6px;
  z-index: 20;
}
.dropdown::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -30px;
  right: -30px;
  height: 20px;
  background: transparent;
}
@media (hover: hover){
  .nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ display: block; }
}
.nav-item.open .dropdown{ display: block; }
.dropdown a{
  display: block;
  padding: 9px 14px;
  font-size: var(--fs-small);
  white-space: nowrap;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: background .15s ease, color .15s ease;
}
.dropdown a:last-child{ margin-bottom: 0; }
.dropdown a:hover{ color: var(--kaki-deep); background: var(--paper-2); }

.nav-toggle{
  display: none;
  background: var(--paper);
  border: 1.25px solid rgba(27, 47, 71, 0.18);
  border-radius: 4px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--paper-dark);
  cursor: pointer;
}

/* ---------- breadcrumb ---------- */
.breadcrumb{ padding: 16px 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.breadcrumb a{ color: var(--ink-soft); text-decoration: none; }
.breadcrumb span.sep{ margin: 0 8px; }
.breadcrumb span.current{ color: var(--ink); }

/* ---------- inline emphasis ---------- */
/* 本文中の語句を立てる唯一の手段。1段落につき1箇所までを運用ルールとする。 */
p strong,
li strong,
dd strong{
  font-weight: 700;
  color: var(--ink);
}
.dark p strong,
.band.dark strong{
  color: var(--paper-on-ink);
}

/* ---------- buttons ---------- */
.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 15px 22px 15px 28px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 14px rgba(217, 96, 41, 0.28);
}
.btn-primary::after{
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D96029' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 12px 12px;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.btn-primary:hover{
  background: var(--primary-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(181, 74, 24, 0.35);
}
.btn-primary:hover::after{
  transform: translateX(2px);
}
.btn-primary:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn-secondary,
.btn-midori{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--paper);
  color: var(--paper-dark);
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 13.75px 20.75px 13.75px 26.75px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.05em;
  border: 1.25px solid rgba(27, 47, 71, 0.18);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 10px rgba(27, 47, 71, 0.06);
}
.btn-secondary::after,
.btn-midori::after{
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gray) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2F47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 12px 12px;
  flex-shrink: 0;
  transition: transform .18s ease, background-color .18s ease;
}
.btn-secondary:hover,
.btn-midori:hover{
  background: var(--paper-dark);
  color: #FFFFFF;
  border-color: var(--paper-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(27, 47, 71, 0.22);
}
.btn-secondary:hover::after,
.btn-midori:hover::after{
  background-color: #FFFFFF;
  transform: translateX(2px);
}
.btn-secondary:active,
.btn-midori:active{
  transform: translateY(0);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce){
  .btn-primary, .btn-secondary, .btn-midori{ transition: background .18s ease; }
  .btn-primary:hover, .btn-secondary:hover, .btn-midori:hover{ transform: none; }
}
.link-secondary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.link-secondary::after{
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2F47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .2s ease, background-image .2s ease;
}
.link-secondary:hover{
  border-color: var(--primary-deep);
  color: var(--primary-deep);
}
.link-secondary:hover::after{
  background-color: var(--primary-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  transform: translateX(3px);
}
.btn-card-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 18px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--paper-dark);
  background: var(--gray);
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(27,47,71,.08);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-card-link--paper{
  background: var(--paper);
}
.btn-card-link--paper::after{
  background-color: var(--paper-soft);
}
.btn-card-link .arrow{
  display: none;
}
.btn-card-link::after{
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2F47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .2s ease;
}
.btn-card-link:hover{
  background: var(--primary-deep);
  color: #FFFFFF;
  box-shadow: var(--shadow-panel);
  transform: translateY(-1px);
}
.btn-card-link:hover::after{
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54A18' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  transform: translateX(3px);
}

.hero{ padding: 48px 0 96px; position: relative; overflow: hidden; background-color: #F3EBDF; }


.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(215px, 1fr);
  grid-template-areas:
    "intro photo"
    "copy  photo";
  grid-template-rows: auto 1fr;
  column-gap: clamp(18px, 3.2vw, 64px);
  row-gap: 0;
  align-items: stretch;
}
.hero-intro{
  grid-area: intro;
  position: relative;
  z-index: 2;
}
.hero-side{ grid-area: photo; position: relative; z-index: 2; }
.hero-copy{ grid-area: copy; position: relative; z-index: 2; }

.hero-eyebrow{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(13.5px, 2.3vw, var(--fs-body));
  letter-spacing: clamp(0.08em, 1.8vw, 0.2em);
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-weight: 500;
}
.hero-eyebrow .nobr{
  white-space: nowrap;
}
.hero-title{
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.2vw, var(--fs-h1));
  line-height: 1.6;
  font-weight: 600;
  margin-top: clamp(38px, 4.4vw, 56px);
  margin-bottom: clamp(68px, 7.2vw, 92px);
  letter-spacing: 0.03em;
}
.hero-title .nobr{
  display: inline-block;
  white-space: nowrap;
}
#business-owners .hero{
  background-color: var(--paper);
}
#business-owners .hero-grid{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: 0;
}
#business-owners .hero-intro{
  text-align: center;
  width: 100%;
}
#business-owners .hero-intro .hero-title{
  text-align: center;
  margin-top: 0;
  margin-bottom: 28px;
}
#business-owners .hero-copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
/* 罫線つきチェックリスト（事業者向けページのヒーロー／料金ページ「料金に含まれるもの」で共用） */
#business-owners .hero-ruled-list,
.ruled-check-list{
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  border-top: 1px solid rgba(27, 47, 71, 0.12);
  text-align: left;
}
#business-owners .hero-ruled-list li,
.ruled-check-list li{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(27, 47, 71, 0.12);
  font-size: 17.5px;
  font-weight: 500;
  color: var(--paper-dark);
  line-height: 1.5;
}
#business-owners .hero-ruled-list .check-icon,
.ruled-check-list .check-icon{
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D96029' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
#business-owners .hero-lead{
  text-align: center;
  max-width: 36em;
  margin: 0 auto 28px;
}
#business-owners .hero-actions{
  justify-content: center;
  margin-bottom: 12px;
}
#business-owners .hero-cta-note{
  text-align: center;
  margin: 0 0 40px;
}
#business-owners .hero-cred{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.hero-lead{
  font-size: clamp(15px, 2.5vw, var(--fs-lead));
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  max-width: 32em;
  margin: 0 0 24px;
}
.hero-lead .nobr{
  white-space: nowrap;
}
.hero-price{
  display: block;
  width: 100%;
  max-width: 486px;
  background: var(--paper);
  border: 1.25px solid rgba(27, 47, 71, 0.18);
  border-radius: 8px;
  box-shadow: none;
  padding: 22px 24px;
  margin: 0 0 20px;
  box-sizing: border-box;
}
.hero-price-label{
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
}
.hero-price-figure{
  font-family: var(--font-serif);
  font-size: var(--fs-price);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}
.hero-price-figure .unit{ font-size: var(--fs-body); font-family: var(--font-sans); }
.hero-price-figure .tax{
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-left: 6px;
}
/* 「+決算申告◯万円〜」：月額の後ろに添える。数字・単位は月額と同じ大きさ */
.hero-price-settle{
  display: inline-block;
  margin-left: 12px;
}
.hps-label{
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-right: 3px;
}
.hero-price-sub{
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0;
}
.hero-sublink{
  display: block;
  width: 100%;
  max-width: 486px;
  padding: 0 24px;
  margin: 0 0 32px;
  text-align: left;
}
.hero-sublink a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.hero-sublink a .sublink-text{
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.hero-sublink a:hover .sublink-text{
  text-decoration-thickness: 2px;
}
.hero-sublink a .sublink-arrow{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.hero-sublink a:hover .sublink-arrow{
  transform: translateX(3px);
}
.hero-actions{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-cta-note{
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 0;
}
.hero-action-cluster{ display: contents; }
.hero-action-main{ display: contents; }
.hero-mobile-avatar{ display: none; }
.sp-only{ display: none; }
.hero-cta-pipe{ display: inline; }
.hero-cred{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.cred-item{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 22px 18px 20px;
  box-sizing: border-box;
  text-align: left;
}
.cred-num{
  display: block;
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: left;
}
.cred-label{
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  line-height: 1.65;
  text-align: left;
}
.cred-label .nobr{
  display: inline;
}
/* 実績バー：740px以下は縦積み独立カード */
@media (max-width: 740px){
  .hero-cred{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cred-item{
    padding: 18px 16px;
    border: none;
  }
}
.hero-side{
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}
.hero-photo-wrap{
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  justify-content: flex-end;
}
.hero-photo{
  position: relative;
  flex: 1;
  border-radius: 16px;
  background: var(--paper);
  min-height: 480px;
  box-shadow: 0 18px 44px -10px rgba(27, 47, 71, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.hero-photo picture{
  display: contents;
}
.hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  filter: brightness(1.07) contrast(0.95);
}
/* 740px以下：写真枠が縦長になった際、左右の余白が均等になるよう微調整（36%基準） */
@media (max-width: 740px){
  .hero-photo img{
    object-position: 36% 15%;
  }
}
.hero-photo-caption{
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: right;
  padding-right: 8px;
}
.hero-photo-caption strong{
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-left: 8px;
}
/* モバイル専用写真内要素（PCでは非表示） */
.hero-photo-sp-title{
  display: none;
}
.hero-photo-sp-caption{
  display: none;
}
/* ---------- section shell ---------- */
.band{ padding: 84px 0; }
.band--major{ padding: 80px 0; }
.band--minor{ padding: 48px 0; }
.band--ruled{ border-top: 1px solid var(--line); }

.band.tinted{
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#name.band{
  background: var(--paper-soft);
}
.band.dark{
  background: var(--paper-dark);
  color: var(--paper-on-ink);
  border-top: none;
}
.section-head{ margin: 0 0 40px; }
.band--major .section-head{ margin: 0 0 56px; }
.band--minor .section-head{ margin: 0 0 28px; }
.section-head.centered{ text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-weight: 500;
}
.dark .section-eyebrow{ color: var(--kaki-on-ink); }
.section-head h2{
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 0;
  line-height: 1.6;
  word-break: auto-phrase;
  text-wrap: balance;
}
.band--major .section-head h2{ line-height: 1.5; }
.band--minor .section-head h2{ font-size: var(--fs-h2s); }
.section-note{
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.8;
  max-width: 42em;
  margin: 14px 0 0;
}
.section-head.centered .section-note{
  margin: 14px auto 0;
}

/* ---------- page hero (subpages) ---------- */
.page-hero{ padding: 24px 0 68px; }
.page-hero-inner{ max-width: 900px; }
.page-eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin: 0 0 18px;
  font-weight: 500;
  width: fit-content;
}
.page-title{
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1.5;
  font-weight: 600;
  margin: 0 0 24px;
  word-break: auto-phrase;   /* 日本語を文節で折り返す（Chrome/Edge） */
  overflow-wrap: anywhere;   /* 極端に狭い画面での溢れ防止 */
  text-wrap: balance;        /* 行長を均等化。auto-phrase と併用が前提 */
}
/* 下層ページ見出しのマーカーは非表示 */
.page-title::before{
  display: none;
}
.page-title--article{
  text-wrap: wrap;
}
.page-title--article::before{
  display: none !important;
}
.page-lead{
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 42em;
  margin: 0 0 34px;
}
.page-hero .btn-primary{ margin-bottom: 8px; }

/* ---------- concerns ---------- */
.concern-list{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 960px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.concern-list li{
  display: block;
  padding: 20px 28px;
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  font-size: var(--fs-lead);
  line-height: 1.8;
  text-align: left;
}
.concern-list .nobr{ display: inline; }
@media (max-width: 860px){
  .concern-list .nobr{ display: inline-block; }
}

/* ---------- stance (why tandem) ---------- */
#stance .container{
  max-width: 1200px;
}
.stance-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 2本柱レイアウト（advisory.html の POLICY セクション用） */
.stance-grid--duo{ grid-template-columns: repeat(2, 1fr); }
.stance-item{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
}
.stance-item .rail{ margin-bottom: 20px; }
.stance-item h3{
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
}
.stance-item p{
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- teaser cards ---------- */
.teaser-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.teaser-card{
  background: var(--paper-soft);
  box-shadow: var(--shadow-panel);
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.teaser-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(27, 47, 71, 0.12);
}
.teaser-card h3{
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 10px;
  transition: color .2s ease;
}
.teaser-card:hover h3{
  color: var(--primary-deep);
}
.teaser-card p{
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
  flex: 1;
}
.teaser-card .go{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px 6px 16px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--paper-dark);
  background: #FFFFFF;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  letter-spacing: 0.04em;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.teaser-card .go::after{
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2F47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .2s ease, background-image .2s ease;
}
.teaser-card:hover .go{
  background: var(--primary-deep);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(181, 74, 24, 0.35);
}
.teaser-card:hover .go::after{
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54A18' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  transform: translateX(3px);
}
.teaser-grid .teaser-card:nth-child(2){ transition-delay: .07s; }
.teaser-grid .teaser-card:nth-child(3){ transition-delay: .14s; }
.teaser-grid .teaser-card:nth-child(4){ transition-delay: .21s; }
@media (prefers-reduced-motion: reduce){
  .teaser-card{ transition: none; }
  .teaser-card:hover{ transform: none; }
  .teaser-grid .teaser-card{ transition-delay: 0s !important; }
}

/* サービス下の年1回申告導線リンク（左寄せ・上品な下線付き） */
.service-annual-lead{
  text-align: left;
  margin: 28px 0 0;
}
.service-annual-lead a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.service-annual-lead a:hover{
  color: var(--primary-deep);
  border-color: var(--primary-deep);
}
/* リンクを縦に並べるときは間を詰めて、ひとまとまりに見せる */
.service-annual-lead + .service-annual-lead{ margin-top: 14px; }
.service-annual-lead .arrow{
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2F47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  flex-shrink: 0;
  font-size: 0;
  transition: transform 0.2s ease, background-color 0.2s ease, background-image 0.2s ease;
}
.service-annual-lead a:hover .arrow{
  background-color: var(--primary-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  transform: translateX(3px);
}

@media (max-width: 860px){
  .service-annual-lead{
    margin: 20px 0 0;
  }
}

/* ---------- message band (代表メッセージ) ---------- */
.message-grid{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}
.message-photo{
  width: 210px;
  min-height: 260px;
  border: 1px dashed var(--line-on-ink);
  border-radius: 8px;
  color: var(--soft-on-ink);
  font-size: var(--fs-small);
  line-height: 1.8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  overflow: hidden;
}
.message-photo:has(img),
.message-photo--filled{
  border: none;
  padding: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.message-photo img{
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  border-radius: 8px;
}
.message-body blockquote{
  margin: 0 0 26px;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  line-height: 1.9;
}
.message-body p{
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--soft-on-ink);
  margin: 0 0 26px;
}
.message-sign{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.message-sign .who{
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--paper-on-ink);
}
.message-sign .who strong{
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-left: 10px;
}
.message-sign a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--paper-on-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-on-ink);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.message-sign a::after{
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F2E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 10px 10px;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .2s ease;
}
.message-sign a:hover{
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.message-sign a:hover::after{
  background-color: var(--primary);
  transform: translateX(2px);
}

/* ---------- news ---------- */
.news-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
  flex-wrap: wrap;
}
.news-head h2{ font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; margin: 0; }
.news-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-list li{
  border: none;
  margin-bottom: 14px;
}
.news-list li:first-child{
  border-top: none;
}
.news-list a{
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "date tag ."
    "title title title";
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  padding: 22px 26px;
  font-size: var(--fs-body);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .16s ease;
}
.news-list a:hover{
  background: var(--paper-soft);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.news-list a:hover .news-title{
  color: var(--kaki-deep);
}
@media (prefers-reduced-motion: reduce){
  .news-list a{ transition: none; }
  .news-list a:hover{ transform: none; }
}
.news-date{
  grid-area: date;
  flex: none;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
}
.news-tag{
  grid-area: tag;
  justify-self: start;
  flex: none;
  font-size: var(--fs-note);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 4px;
  background: #FFFFFF;
}
.news-title{
  grid-area: title;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* ---------- column list ---------- */
/* お知らせ用の .news-list とは別系統。
   一覧の主役はタイトルなので横並びをやめ、
   日付＋カテゴリ → タイトル → 概要 の縦積みにしている。 */
.column-list{
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.column-list li{
  border: none;
  background: var(--paper-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.column-list li:hover{
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.column-list a{
  display: block;
  padding: 0;
  margin: 0;
  text-decoration: none;
  transition: background .16s ease;
}
.column-list a:hover{ background: transparent; }
@media (prefers-reduced-motion: reduce){
  .column-list a{ transition: none; }
}
.column-card{
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.column-panel{
  flex: none;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column-panel-text{
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--paper-on-ink);
  white-space: nowrap;
}
.column-card-body{
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 24px 24px 4px;
}
.column-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.column-date{
  color: var(--ink-soft);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
}
.column-cat{
  flex: none;
  font-size: var(--fs-note);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.6;
}
.column-list-title{
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 6px;
}
.column-excerpt{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.column-more{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--kaki-deep);
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color .2s ease;
}
.column-more::after{
  content: "›";
  font-size: 15px;
  font-weight: 700;
  color: var(--kaki-deep);
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.column-empty{
  padding: 24px 4px;
  color: var(--ink-soft);
  font-size: var(--fs-body);
}
.column-list a:hover .column-list-title{ color: var(--kaki-deep); }
.column-list a:hover .column-more{
  color: var(--primary-deep);
  background: transparent;
  box-shadow: none;
  transform: none;
}
.column-list a:hover .column-more::after{
  color: var(--primary-deep);
  transform: translateX(3px);
}

/* ---------- profile ---------- */
.profile-grid{
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.profile-side{ position: sticky; top: 24px; }
.profile-photo-slot{
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.9;
  padding: 90px 20px;
  text-align: center;
  margin: 0 0 22px;
  overflow: hidden;
}
.profile-photo-slot:has(img),
.profile-photo-slot--filled{
  border: none;
  background: transparent;
  padding: 0 !important;
  box-shadow: 0 10px 30px rgba(27, 47, 71, 0.10);
}
.profile-photo-slot img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: 8px;
}
.profile-name-block{ border-top: 1px solid var(--line); padding-top: 18px; }
.profile-name-block .role{ font-size: var(--fs-small); letter-spacing: 0.14em; color: var(--kaki-deep); margin: 0 0 6px; }
.profile-name-block .name{
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
}
.profile-name-block .meta{ font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.8; margin: 0; }
.profile-block{ max-width: 42em; }
.profile-block h3{
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-block h3 .rail{ width: 26px; }
.profile-block .para-summary{
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.9;
  margin: 0 0 18px;
}
.profile-block p{
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.profile-block .para-group{ margin-bottom: 40px; }

/* ---------- office summary table ---------- */
.office-table{ width: 100%; max-width: 720px; border-collapse: collapse; font-size: var(--fs-body); }
.office-table th, .office-table td{
  text-align: left;
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.office-table th{
  width: 180px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.office-table tr:first-child th, .office-table tr:first-child td{ border-top: 1px solid var(--line); }

/* ---------- audience ---------- */
.audience-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: transparent;
  border: none;
}
.audience-card{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 28px 24px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-soft);
}
.band:not(.tinted) .audience-card{ background: var(--paper-soft); }
.audience-card .label{
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ink);
}
#questions .audience-card .label{
  min-height: 2.9em;
}

/* カード型フロー（ご契約までの流れ等） */
.flow-card-list{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
}
.flow-card{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 14px;
}
.flow-step-num{
  display: inline-block;
  flex: none;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--kaki-deep);
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding-top: 1px;
}
.flow-card-body{
  flex: 1;
  min-width: 0;
}
.flow-card-body h3{
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.flow-card-body p{
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0;
}

/* 写真付きフローカード（アクセス案内等） */
.flow-card--media{
  align-items: center;
  gap: 28px;
  padding: 24px;
}
.flow-card-photo{
  flex: 0 0 clamp(200px, 32%, 260px);
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.flow-card-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flow-card--media .flow-card-content{
  flex: 1;
  min-width: 0;
}
.flow-card--media .flow-card-head{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.flow-card--media .flow-card-head h3{
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
.flow-card--media p{
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 680px){
  .flow-card--media{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px 18px;
  }
  .flow-card-photo{
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 4px;
  }
  .flow-card--media .flow-card-head{
    margin-bottom: 8px;
  }
}
.flow-photo-credit{
  max-width: 900px;
  margin: 10px auto 0;
  padding: 0 4px;
  font-size: var(--fs-note);
  color: var(--ink-muted);
  text-align: right;
  line-height: 1.5;
}

/* ---------- year track (advisory) ---------- */
.year-flow{
  max-width: 900px;
  margin: 0 auto;
}
.year-card{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
.year-card-head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.year-tag{
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--kaki-deep);
  background: #FFFFFF;
  border: 1px solid var(--kaki);
  border-radius: 4px;
  padding: 2px 10px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.year-tag--accent{
  background: var(--kaki);
  color: #FFFFFF;
  border-color: var(--kaki);
  border-radius: 4px;
}
.year-card-head h3{
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.year-card p{
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}
.year-card p + p:not(.year-card-note){
  margin-top: 8px;
}
.year-card-note{
  margin-top: 10px !important;
  font-size: var(--fs-small) !important;
  color: var(--ink-soft);
}
.year-card-note a{
  color: var(--ink);
  text-decoration: underline;
}
.year-card-note a:hover{
  color: var(--kaki-deep);
}
.year-card--special{
  margin-top: 36px;
  border-top: none;
  background: var(--gray);
}

.policy-note{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0 0 40px;
}

/* ---------- pricing ---------- */
.pricing-table{
  width: 100%;
  max-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  font-size: var(--fs-body);
}
.pricing-table th, .pricing-table td{
  text-align: left;
  padding: 16px 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.pricing-table thead th{
  font-size: var(--fs-body);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-top: none;
}
.pricing-table tbody td:first-child{
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.pricing-table td.amount{
  font-size: var(--fs-lead);
}
.pricing-table td.amount, .pricing-table th.amount{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricing-table tr.total td{ font-weight: 700; color: var(--ink); background: var(--paper-2); }
.pricing-table tr.total:first-of-type td{ border-top: 1px solid var(--ink); }
.pricing-table tbody tr{ transition: background .16s ease; }
.pricing-table tbody tr:hover{ background: var(--paper-soft); }
.band.tinted .pricing-table tbody tr:hover{ background: var(--paper); }
.pricing-table tr.total:hover{ background: var(--paper-2); }
@media (prefers-reduced-motion: reduce){
  .pricing-table tbody tr{ transition: none; }
}
.pricing-caption{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 24px 0 0;
  line-height: 1.8;
  max-width: 760px;
}

/* ---------- 個人/法人 切替（小さな丸い切り替え。選択中は朱色で塗る） ---------- */
/* 条件の行：左に見出し、右に切り替え（事業形態／消費税の申告） */
.pricing-ctrl-row{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.pricing-ctrl-label{
  flex-shrink: 0;
  width: 6.5em;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-soft);
}
.no-js .pricing-ctrl-row{ display: none; }
.seg-toggle{
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.seg-btn{
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  padding: 7px 18px;
  text-align: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.seg-btn:hover{ color: var(--ink); }
.seg-btn.is-active{
  background: var(--primary);
  color: #FFFFFF;
  font-weight: 700;
}
/* 消費税申告の切り替えは柿色にして、事業形態の切り替えと見分ける */
.seg-toggle--vat .seg-btn.is-active{ background: var(--kaki-deep); }
.pricing-table--wide tbody[data-segment]{ display: none; }
.pricing-table--wide tbody[data-segment].is-active{ display: table-row-group; }

/* スマホ幅（600px以下）：見出しは2段とも同じ幅にして、切り替えの書き出し位置を揃える */
@media (max-width: 600px){
  .pricing-ctrl-row{ gap: 10px; }
  .pricing-ctrl-label{ width: 6em; font-size: var(--fs-note); font-weight: 500; }
  .seg-btn{ padding: 7px 16px; }
}

/* --- 約束（【約】）：灰色の※と視覚的に分ける肯定キャプション --- */
.fee-promise{
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink);
  max-width: 760px;
  margin: 20px 0 0;
  padding: 3px 0 3px 14px;
  border-left: 2px solid var(--kaki-deep);
}


/* ---------- 料金ページ：状況別ジャンプ目次（カード型・2カラム） ---------- */
#pricing .page-hero{
  padding-bottom: 40px;
}

/* 章番号（アイブロウ内）
   料金ページの eyebrow は英字ラベルを持たず番号のみ。
   長いページの章アンカーとして機能させるため、本文スケールから外して大きく組む。 */
.section-eyebrow .sec-num{
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--kaki-deep);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.band--major .section-eyebrow .sec-num{ font-size: 32px; }
@media (max-width: 640px){
  .section-eyebrow .sec-num{ font-size: 22px; }
  .band--major .section-eyebrow .sec-num{ font-size: 26px; }
}
/* 章番号（ジャンプ目次カード内） */
.fee-index .fee-num{
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--kaki-deep);
  flex: none;
  transition: color .2s ease;
}
.fee-index .fee-label{ flex: 1; text-align: left; }

/* 目次バンド：前後の余白を詰めた専用バンド */
.band--index{
  border-top: 1px solid var(--line);
  padding-top: 32px;
  padding-bottom: 32px;
}
.band--index .section-head{
  margin: 0 0 20px;
}
.fee-index{
  padding: 0;
}
.fee-index ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 760px;
}
.fee-index a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: none;
  border-radius: 8px;
  background: var(--paper-soft);
  box-shadow: 0 1px 3px rgba(27,47,71,.08);
  padding: 16px 20px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fee-index .fee-num{
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--kaki-deep);
  flex: none;
  transition: color .2s ease;
}
.fee-index .fee-label{ flex: 1; text-align: left; }
.fee-index .fee-label-group{
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fee-index .fee-main{
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: 0.02em;
  transition: color .2s ease;
}
.fee-index .fee-sub{
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.4;
  letter-spacing: 0.02em;
  transition: color .2s ease;
}
.fee-index a::after{
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2F47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform .2s ease, background-color .2s ease;
}
.fee-index a:hover{
  background: var(--primary-deep);
  color: #FFFFFF;
  box-shadow: var(--shadow-panel);
  transform: translateY(-1px);
}
.fee-index a:hover .fee-num{
  color: #FFFFFF;
}
.fee-index a:hover .fee-main{
  color: #FFFFFF;
}
.fee-index a:hover .fee-sub{
  color: rgba(255, 255, 255, 0.85);
}
.fee-index a:hover::after{
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54A18' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  transform: translateY(2px);
}
.section-head h2 .section-title-sub{
  font-size: clamp(16px, 2.4vw, var(--fs-h3));
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 4px;
}
@media (max-width: 640px){
  .fee-index ul{ grid-template-columns: 1fr; }
  .fee-index a{ padding: 15px 16px; }
}

/* ---------- faq ---------- */
.faq-list{ max-width: 100%; }
.faq-list.centered{ max-width: 900px; margin: 0 auto; }
.faq-item{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  margin-bottom: 16px;
  overflow: hidden;
}
.faq-item summary{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin: 0;
  font-size: var(--fs-lead);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: 0;
  transition: background .16s ease;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:hover{ background: rgba(0, 0, 0, 0.015); }
.band.tinted .faq-item summary:hover{ background: rgba(0, 0, 0, 0.015); }

/* 開閉インジケーター */
.faq-item summary::after{
  content: "";
  flex: none;
  margin-left: auto;
  align-self: center;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.faq-item[open] summary::after{
  transform: rotate(-135deg) translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .faq-item summary,
  .faq-item summary::after{ transition: none; }
}
.faq-q-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--kaki-deep);
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.faq-answer{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 20px 20px;
  padding: 18px 20px;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid rgba(27, 47, 71, 0.06);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink);
}
.faq-answer > div{ flex: 1; min-width: 0; }
.faq-answer > span:last-child{ flex: 1; min-width: 0; }
.faq-a-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--kaki-deep);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}

/* FAQ下部の補足導線 */
.faq-more{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 28px 0 0;
  text-align: left;
}
.faq-list.centered ~ .faq-more{
  max-width: 900px;
  margin: 28px auto 0;
  text-align: left;
}

/* ---------- closing cta ---------- */
.cta-band{
  background: var(--paper-dark);
  color: var(--paper-on-ink);
  padding: 76px 0;
}
.cta-inner{ text-align: center; max-width: 620px; margin: 0 auto; }
.cta-inner .rail{ margin-bottom: 24px; }
.cta-inner h2{
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.7;
}
.cta-inner p{ font-size: var(--fs-body); color: var(--soft-on-ink); margin: 0 0 32px; line-height: 1.9; }
.cta-actions{ display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-tel{ text-align: left; line-height: 1.5; }
.cta-tel .tel-number{
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--paper-on-ink);
  text-decoration: none;
  display: inline-flex;
}
.cta-tel .tel-note{
  display: block;
  font-size: var(--fs-note);
  color: var(--soft-on-ink);
  margin-top: 2px;
}

/* ---------- footer ---------- */
.footer{ border-top: 1px solid var(--line); padding: 52px 0 40px; background: var(--paper-soft); }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 2fr; gap: 24px; margin-bottom: 36px; }
.footer-title,
.footer-grid h4{
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 16px;
  letter-spacing: 0.08em;
}
.footer-sitemap-cols{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  max-width: 400px;
}
.footer-mark{ font-family: var(--font-serif); font-size: var(--fs-lead); font-weight: 600; margin: 0 0 10px; }
.footer-address{ font-size: var(--fs-small); line-height: 1.8; color: var(--ink-soft); margin: 0; }
.footer-tel{ color: inherit; text-decoration: none; }
.footer-tel:hover{ color: var(--kaki-deep); text-decoration: underline; }
.footer-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a{ font-size: var(--fs-small); color: var(--ink); text-decoration: none; }
.footer-links a:hover{ color: var(--kaki-deep); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- responsive: mobile hero (768px以下) ---------- */
@media (max-width: 768px){
  .hero{
    padding: 0 0 48px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .hero-grid{
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 1. 写真をトップに配置（ボックスではなく画面左右いっぱいにそのまま貼る） */
  .hero-side{
    order: 1;
    display: block !important;
    width: 100vw;
    max-width: 100vw;
    height: auto !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 28px;
  }
  .hero-photo-wrap{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  .hero-photo{
    position: relative;
    width: 100% !important;
    height: clamp(410px, 62vh, 530px) !important;
    min-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important; /* 角丸なし：ボックス感を排除 */
    box-shadow: none !important;  /* 影なし */
    border: none !important;      /* 枠線なし */
    background: transparent;
    overflow: hidden;
  }
  .hero-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    display: block !important;
    border-radius: 0 !important;
    filter: none !important;
  }

  /* 2. 写真右上：縦書きタイトル（最大30px・位置調整：左へ5mm／下へ5mm） */
  .hero-photo-sp-title{
    display: block;
    position: absolute;
    top: calc(clamp(10px, 3vw, 16px) + 5mm);
    right: calc(clamp(12px, 3.8vw, 18px) + 5mm);
    z-index: 3;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: clamp(23.5px, 6.8vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ink); /* サイト共通の品格ある濃紺黒 */
    /* 写真の上でも読めるよう、文字の周りに白い光をにじませる */
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.9),
      0 0 8px rgba(255, 255, 255, 0.85),
      0 0 16px rgba(255, 255, 255, 0.6);
    pointer-events: none;
  }
  .hero-photo-sp-title .sp-title-line{
    position: relative;
    display: inline-block;
    white-space: nowrap;
    z-index: 1;
  }
  /* 文字の背後だけ写真をすりガラス状にぼかす（縁はフェードさせて箱に見せない） */
  .hero-photo-sp-title .sp-title-line::before{
    content: "";
    position: absolute;
    inset: -14px -10px;
    z-index: -1;
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    pointer-events: none;
  }
  .hero-photo-sp-title .sp-title-line:last-child{
    margin-top: clamp(6px, 1.5vw, 10px);
  }

  /* 3. 写真左下：資格・氏名キャプション（黒半透明・角揃え・1行表示） */
  .hero-photo-sp-caption{
    display: flex;
    align-items: baseline;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    background: rgba(26, 29, 34, 0.72);
    padding: 8px 14px;
    border-radius: 0;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #FFFFFF;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    white-space: nowrap;
    pointer-events: none;
  }
  .hero-photo-sp-caption .sp-caption-org{
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    line-height: 1.6;
  }
  .hero-photo-sp-caption .sp-caption-name{
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    line-height: 1.6;
    margin-left: 0.35em;
  }

  /* 写真下の外側キャプションはモバイルで非表示 */
  .hero-photo-caption{
    display: none;
  }

  /* 4. 写真の下に続く「松山市の税理士事務所」 */
  .hero-intro{
    order: 2;
    display: block;
  }
  .hero-intro .hero-eyebrow{
    margin-bottom: 12px;
  }
  /* 写真内に縦書きタイトルを重ねているため、トップページの本文側のタイトルは非表示（マーカーも消去） */
  .hero-intro .hero-title{
    display: none;
  }
  /* すでに事業をされている方ページは写真がないため、モバイルでもタイトルを表示 */
  #business-owners .hero-intro .hero-title{
    display: block;
  }

  /* 5. リード文・料金・ボタン群 */
  .hero-copy{
    order: 3;
    display: block;
  }
  .sp-only{ display: block; }
  .hero-lead{
    font-size: clamp(15.5px, 4.2vw, 17px);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .hero-cta-pipe{ display: none; }
  .hero-price{
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
  }
  .hero-sublink{
    font-size: 13px !important;
    padding: 0 4px 0 calc(4px + 1em) !important;
    margin: 0 0 20px !important;
    max-width: 100%;
  }
  .hero-sublink a{
    font-size: 13px !important;
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-weight: 600;
  }
  .hero-action-cluster{
    display: block;
    margin: 0;
  }
  .hero-action-main{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .hero-action-main .hero-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    width: 100%;
  }
  .hero-action-main .hero-actions .btn-primary,
  .hero-action-main .hero-actions .btn-secondary{
    width: 100%;
    max-width: none;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    gap: 8px;
  }
  .hero-action-main .hero-cta-note{
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
    text-align: center;
    padding-left: 0;
  }
  /* 最上部に写真があるため、下部の重複アバターは非表示 */
  .hero-mobile-avatar{
    display: none !important;
  }
}

/* ---------- responsive: tablet & mobile (860px以下) ---------- */
@media (max-width: 860px){
  .stance-grid{ grid-template-columns: 1fr; gap: 20px; }
  .stance-item{ padding: 28px 24px; }
  .message-grid{ grid-template-columns: 1fr; gap: 36px; }
  .message-photo{
    width: 200px;
    max-width: 200px;
    height: auto;
    aspect-ratio: 3 / 4;
    min-height: unset;
    margin: 0 auto;
  }
  .profile-grid{ grid-template-columns: 1fr; gap: 40px; }
  .profile-side{ position: static; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: end; }
  .profile-photo-slot{ margin: 0; padding: 60px 16px; }
  .profile-block p,
  .profile-block .para-summary{
    font-size: var(--fs-body);
  }
  .profile-block h3{
    font-size: var(--fs-h3);
  }
  .profile-block .profile-lead-title{
    font-size: var(--fs-h3);
  }
}
@media (max-width: 860px){
  .container{ padding: 0 24px; }
  .band{ padding: 56px 0; }
  .band--major{ padding: 56px 0; }
  .band--minor{ padding: 36px 0; }
  .section-head h2,
  .band--major .section-head h2{ font-size: var(--fs-h2s); }
  .band--major .section-head{ margin: 0 0 36px; }
  .stance-item h3,
  .path-card h3{
    font-size: var(--fs-h3);
    line-height: 1.55;
    margin-bottom: 12px;
  }
  .teaser-card h3{
    font-size: 18px;
    line-height: 1.5;
    margin-top: 1px;
    margin-bottom: 10px;
  }
  #questions .audience-card .label{
    min-height: auto;
  }
  .topbar .mark {
    font-size: var(--fs-body);
  }
  .utility-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    max-height: 36px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  }
  .utility-bar span{ display: none; }
  .utility-phone{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
  }
  .utility-phone:hover{ color: var(--ink); }
  .head-tel{ display: none; }
  .nav-toggle{ display: inline-flex; }

  .topbar{
    padding: 10px 16px;
    transition: padding 0.2s ease-in-out;
  }
  .header-actions{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  /* 2ボタンの寸法をそろえる（スクロール後も幅132pxのまま固定） */
  .topbar .btn-primary,
  .nav-toggle{
    box-sizing: border-box;
    width: 100%;
    min-width: 132px;
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }
  .topbar .btn-primary{
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  /* モバイル時のボタン右矢印（丸バッジ型 >）：16px */
  .btn-primary::after,
  .btn-secondary::after,
  .btn-midori::after,
  .btn-card-link::after,
  .topbar .btn-primary::after{
    width: 16px;
    height: 16px;
    background-size: 8.5px 8.5px;
  }
  .mark span{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* MENUボタン：背景色（白）・線の色・線の太さ（1.25px）をセカンダリボタンと統一 */
  .nav-toggle{
    gap: 6px;
    border: 1.25px solid rgba(27, 47, 71, 0.18);
    background: var(--paper);
    color: var(--paper-dark);
    letter-spacing: 0.06em;
    border-radius: 4px;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
  }
  .nav-toggle:hover{
    border-color: rgba(27, 47, 71, 0.32);
  }
  /* メニュー展開中のみ薄いグレー背景にする */
  .nav-toggle[aria-expanded="true"]{
    background: var(--gray);
    border-color: rgba(27, 47, 71, 0.28);
  }

  /* 固定ヘッダーの高さぶん、アンカー着地位置を下げる */
  [id]{ scroll-margin-top: 48px; }
  #fee-option{ scroll-margin-top: 48px; }

  /* ヘッダーを上部に固定 */
  .site-head{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: var(--paper);
    transition: box-shadow 0.25s ease;
    box-shadow: 0 0 0 rgba(27, 47, 71, 0);
  }
  .site-head-placeholder{
    display: block;
    width: 100%;
    height: 125px;
    pointer-events: none;
  }

  /* スクロール後（.is-scrolled）は細いバーに折りたたむ */
  .site-head.is-scrolled{
    box-shadow: 0 4px 16px rgba(27, 47, 71, 0.08);
  }
  .site-head.is-scrolled .utility-bar{
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
  .site-head.is-scrolled .topbar{ padding-top: 6px; padding-bottom: 6px; }
  .site-head.is-scrolled .topbar .btn-primary{
    display: none;
  }
  .site-head.is-scrolled .mark span{
    display: none;
  }

  /* ヘッダー各パーツ：不透明な地色を敷いてモザイクの影響を受けないクリアな状態に */
  .utility-bar,
  .topbar,
  .nav-wrap{
    background: var(--paper);
    position: relative;
    z-index: 101;
  }

  /* すりガラス（モザイク・ブラー）背景オーバーレイ（ヘッダー以外のメイン画面にかける） */
  .nav-backdrop{
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(27, 47, 71, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 90;
  }
  body.nav-open .nav-backdrop,
  .site-head.nav-open .nav-backdrop,
  .nav-wrap.open ~ .nav-backdrop{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.nav-open{
    overflow: hidden;
  }

  /* 開いたナビの背面が透けないよう地色を敷く */
  .nav-wrap{
    background: var(--paper);
    position: relative;
    z-index: 102;
    box-shadow: 0 12px 32px rgba(27, 47, 71, 0.12);
  }
  .nav-row{
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 16px 20px 36px;
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .site-head.is-scrolled .nav-row{
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
  }
  .nav-wrap.open .nav-row{ display: flex; }
  .nav-item{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--paper-soft);
  }

  /* 「トップ」〜「コラム」を隙間なく連結し、1つの連続したアイボリーパネルに */
  .nav-row > a,
  .nav-item > button.nav-parent{
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
    padding: 0 24px 0 32px;
    margin: 0;
    background: var(--paper-soft);
    border-radius: 0;
    box-shadow: none;
    border: none;
    transform: none;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: inherit;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-item > button.nav-parent{
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-item > button.nav-parent::after{
    content: "▾";
    display: inline-block;
    font-size: 11px;
    color: var(--ink-soft);
    margin-left: 6px;
    transform: translateY(-1px);
    transition: transform 0.2s ease;
  }
  .nav-item > button.nav-parent:hover,
  .nav-item > button.nav-parent:active,
  .nav-item > button.nav-parent:focus{
    background: var(--paper-soft);
    color: var(--ink);
    outline: none;
  }
  .nav-item > button.nav-parent:hover::after,
  .nav-item > button.nav-parent:active::after,
  .nav-item > button.nav-parent:focus::after{
    color: var(--ink-soft);
  }

  /* サービス内の各項目：さらに一段右へ字下げ（インデント） */
  .dropdown{
    display: flex;
    flex-direction: column;
    gap: 0;
    position: static;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    background: transparent;
    width: 100%;
    min-width: 0;
  }
  .dropdown::before{ display: none; }

  /* 閉じた時は非表示 */
  .nav-item.is-collapsed .dropdown{
    display: none;
  }

  .dropdown a{
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
    padding: 0 24px 0 64px;
    margin: 0;
    background: var(--paper-soft);
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }

  /* 最上部（トップ）：上側の角丸 ＋ 上部ゆとり */
  .nav-row > a:first-child{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 50px;
    min-height: 50px;
    padding-top: 6px;
  }

  /* 最下部（コラム）：下側の角丸 ＋ 下部ゆとり */
  .nav-row > a:nth-last-child(2){
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 50px;
    min-height: 50px;
    padding-bottom: 6px;
    margin-bottom: 0;
  }

  .nav-row > a:hover,
  .dropdown a:hover{
    color: var(--kaki-deep);
    background: var(--paper-2);
  }
  .nav-row .current,
  .dropdown .current{
    color: var(--kaki-deep);
    font-weight: 700;
  }
  .nav-menu-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 14px;
    padding-top: 0;
    border-top: none;
    box-sizing: border-box;
  }
  .nav-menu-cta .btn-primary{
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: var(--fs-small);
    font-weight: 500;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 8px;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 12px;
  }
  .nav-menu-cta .btn-primary:hover{
    background: var(--primary-deep);
    color: #FFFFFF;
  }
  .nav-menu-tel{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .nav-menu-tel .tel-link{
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.04em;
  }
  .nav-menu-tel .tel-note{
    font-size: var(--fs-note);
    color: var(--ink-soft);
    letter-spacing: 0.02em;
  }
  @media (min-width: 581px){
    .hero{ padding: clamp(36px, 4.5vw, 48px) 0 clamp(48px, 6vw, 80px); }
  }
  .hero-price{ padding: 16px 18px; margin-bottom: 6px; }
  .hero-sublink{ padding: 0 4px 0 calc(4px + 1em); margin-bottom: 14px; }
  .hero-sublink a{ font-size: 13px; }
  .hero-price-figure{ font-size: var(--fs-price-sm); }
  .hero-price-figure .unit{ font-size: var(--fs-small); }
  .hero-price-figure .tax{ font-size: var(--fs-note); }
  .hero-price-settle{ margin-left: 8px; }
  .hps-label{ font-size: var(--fs-note); }
  #business-owners .hero-ruled-list{ width: fit-content; max-width: 100%; margin: 0 auto 24px; }
  #business-owners .hero-ruled-list li,
  .ruled-check-list li{ padding: 15px 12px; font-size: 16px; gap: 11px; }
  #business-owners .hero-ruled-list .check-icon,
  .ruled-check-list .check-icon{ width: 20px; height: 20px; background-size: 18px 18px; }
  .breadcrumb{ padding: 12px 0 0; }
  .page-title{ font-size: 32px; }
  #consumption-tax .page-title{
    font-size: clamp(25px, 7.2vw, 31px);
    white-space: nowrap;
  }
  .band{ padding: 60px 0; }
  .teaser-grid{ grid-template-columns: 1fr 1fr; }
  .audience-grid{ grid-template-columns: 1fr; gap: 20px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  .pricing-table{ font-size: var(--fs-small); }
  .pricing-table th, .pricing-table td{ padding: 14px 8px; }
  .message-body blockquote{ font-size: var(--fs-h3); }
  .concern-list{ padding: 0; gap: 10px; }
  .concern-list li{ padding: 16px 18px; font-size: var(--fs-body); line-height: 1.7; }
  .faq-item{ margin-bottom: 20px; }
  .faq-item summary{ padding: 16px 16px; font-size: var(--fs-body); gap: 12px; }
  .faq-answer{ margin: 0 12px 14px; padding: 14px 14px; gap: 10px; }
  .faq-q-mark, .faq-a-mark{ width: 24px; height: 24px; min-width: 24px; font-size: 13px; }
  .cta-actions{ flex-direction: column; gap: 20px; }
  .cta-tel{ text-align: center; }
  .cta-tel .tel-number{ justify-content: center; width: 100%; }
  .cta-tel .tel-note{ text-align: center; margin-top: 4px; }
}
@media (max-width: 560px){
  .teaser-grid{ grid-template-columns: 1fr; gap: 20px; }
  .hero-side{ grid-template-columns: 1fr auto; }
}

/* 開業支援ページ: 対応範囲リスト（ミニレール・マーカー） */
.scope-list{
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.scope-list li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: var(--fs-body);
  line-height: 1.8;
}
.scope-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--kaki-deep);
  font-size: 14px;
  font-weight: bold;
}
.band.dark .scope-list{
  border-top: 1px solid var(--line-on-ink);
  color: var(--paper-on-ink);
}
.band.dark .scope-list li::before{
  color: var(--kaki);
}

/* 料金表の横スクロール用ラッパー */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
}
@media (min-width: 601px) {
  .table-wrapper table {
    min-width: 720px;
  }
}
/* 料金ページ専用スタイル
   参照資料としての性格上、全体スケールより一段圧縮した階層値を使う。
   #pricing が ID を含むため、グローバルの .band--major / .band--minor は
   このページでは効かない。必ずここで対応値を定義すること。 */
#pricing .band{ padding: 72px 0; }
#pricing .band--major{ padding: 80px 0; }
#pricing .band--minor{ padding: 44px 0; }
#pricing .band--index{ padding: 32px 0; }

.pricing-col-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
  align-items: stretch;
}
.pricing-card {
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 32px;
}
.pricing-card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 16px;
  border-bottom: none;
  padding-bottom: 0;
  color: var(--ink);
}
.pricing-card.accent-card {
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 28px 32px;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing-card ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
}
.pricing-card ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--kaki-deep);
}
/* 料金ページ：サービス内容カード詳細（案A） */
.pricing-card .service-section {
  margin-top: 18px;
}
.pricing-card .service-section:first-of-type {
  margin-top: 14px;
}
.pricing-card .service-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.03em;
  padding-bottom: 6px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.pricing-card .service-section-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kaki-deep);
  flex-shrink: 0;
}
.pricing-card .service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing-card .service-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.pricing-card .service-list li:last-child {
  margin-bottom: 0;
}
.pricing-card .service-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--kaki-deep);
  font-weight: 700;
}
.pricing-card .service-item-head {
  font-weight: 700;
  color: var(--ink);
}
.pricing-card .service-item-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 2px;
}
.pricing-card .service-item-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 3px 0 0;
}
@media (max-width: 600px) {
  .pricing-card .service-section-title {
    font-size: 14px;
  }
  .pricing-card .service-list li {
    font-size: 13.5px;
    margin-bottom: 11px;
  }
  .pricing-card .service-item-desc {
    font-size: 11.5px;
  }
}
.pricing-card .card-note {
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 16px;
}
.pricing-card .card-note--sub {
  color: var(--ink-soft);
}
.pricing-card .card-note-sub {
  color: var(--ink-soft);
  font-weight: 400;
}
/* 個人の方の確定申告：左右分割レイアウト（fee-split-list） */
.pricing-card .fee-split-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.pricing-card .fee-split-list--compact {
  max-width: 380px;
}
@media (max-width: 600px) {
  .pricing-card .fee-split-list--compact {
    max-width: 100%;
  }
}
.pricing-card .fee-split-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  margin-bottom: 0;
  border-bottom: 1px dashed var(--line-soft);
  position: static;
  color: var(--ink);
}
.pricing-card .fee-split-list li:first-child {
  padding-top: 2px;
}
.pricing-card .fee-split-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pricing-card .fee-split-list li::before {
  content: none !important;
}
.pricing-card .fee-split-list .fsl-name {
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.45;
  font-weight: 500;
}
.pricing-card .fee-split-list .fsl-sub {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
}
.pricing-card .fee-split-list .fsl-sub-inline {
  font-size: 13.5px;
  color: var(--ink-soft);
}
.pricing-card .fee-split-list .fsl-val {
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
.pricing-card .fee-split-list .fsl-main {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.pricing-card .fee-split-list .fsl-tax {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.3;
  margin-top: 2px;
}
.pricing-card .fee-split-list .fsl-wave {
  display: inline-block;
  width: 1.1em;
  text-align: left;
  flex-shrink: 0;
  margin-left: 1px;
}
.pricing-card .fee-split-list .fsl-tag {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-soft);
  background: rgba(168, 158, 139, 0.16);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.pricing-card .fee-split-list .fsl-unit {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 2px;
}
.pricing-card .fee-split-list .fsl-note-block {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.4;
}
.pricing-card .fee-split-list .fsl-prefix {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-right: 4px;
}
.pricing-card .fee-split-list li.fsl-item-stack {
  display: block;
}
.pricing-card .fee-split-list .fsl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.pricing-card .fee-split-list .fsl-note-full {
  width: 100%;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .pricing-card .card-note {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .pricing-card .fee-split-list li {
    padding: 8px 0;
    gap: 10px;
  }
  .pricing-card .fee-split-list .fsl-row {
    gap: 10px;
  }
  .pricing-card .fee-split-list .fsl-name {
    font-size: 14.5px;
  }
  .pricing-card .fee-split-list .fsl-sub {
    font-size: 12px;
  }
  .pricing-card .fee-split-list .fsl-main {
    font-size: 15px;
  }
  .pricing-card .fee-split-list .fsl-tax {
    font-size: 11px;
  }
  .pricing-card .fee-split-list .fsl-tag {
    font-size: 12px;
    padding: 2px 6px;
  }
  .pricing-card .fee-split-list .fsl-unit {
    font-size: 11px;
  }
  .pricing-card .fee-split-list .fsl-note-block {
    font-size: 11.5px;
  }
  .pricing-card .fee-split-list .fsl-note-full {
    font-size: 11px;
    letter-spacing: -0.02em;
    margin-top: 2px;
  }
  .pricing-card .fee-split-list .fsl-prefix {
    font-size: 11px;
    margin-right: 3px;
  }
}
@media (max-width: 360px) {
  .pricing-card .fee-split-list .fsl-note-full {
    font-size: 10px;
    letter-spacing: -0.03em;
  }
}
@media (max-width: 860px) {
  .pricing-col-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---------- 開業・会社設立支援カード：手数料行と総額ボックス ---------- */
.pricing-col-wrapper--flush .pricing-card h3 {
  margin-bottom: 8px;
}
.startup-fee {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 16px 0 0;
  font-size: var(--fs-body);
  color: var(--ink);
}
.startup-fee + .startup-fee {
  margin-top: 12px;
}
.startup-fee-amount {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
}
.startup-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--paper);
  border-left: none;
  border-radius: 6px;
}
.startup-total-label {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
}
.startup-total-sub {
  display: block;
  font-size: var(--fs-note);
  color: var(--ink-soft);
  margin-top: 2px;
}
.startup-total-amount {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.startup-total-unit {
  font-size: var(--fs-small);
}

/* 特例申告カードの全幅化（PC表示時のみ） */
@media (min-width: 861px) {
  .full-width-card {
    grid-column: 1 / -1;
  }
}

/* 料金ページ全体の要素の幅をコンテナ幅（100%）に揃える */
#pricing .pricing-caption {
  max-width: 100%;
}
#pricing .pricing-table--wide {
  max-width: 100%;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}
#pricing .pricing-table--wide .col-revenue  { width: 17%; }
#pricing .pricing-table--wide .col-advisory { width: 16%; }
#pricing .pricing-table--wide .col-booking  { width: 16%; }
#pricing .pricing-table--wide .col-closing  { width: 16%; }
#pricing .pricing-table--wide .col-vat      { width: 17%; }
#pricing .pricing-table--wide .col-total    { width: 18%; }

/* 料金ページのテーブルレイアウト・文字配置（すべて中央揃え） */
#pricing .pricing-table th,
#pricing .pricing-table td,
#pricing .pricing-table td.amount,
#pricing .pricing-table th.amount,
#pricing .pricing-table tbody td:first-child {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 表の面(サーフェス)とヘッダー・第1列スタイル */
#pricing .pricing-table tbody td {
  background: var(--gray);
  vertical-align: middle;
  position: relative;
}
#pricing .pricing-table thead th {
  background: var(--paper-soft);
  color: var(--ink);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
}
#pricing .pricing-table tbody td:first-child {
  background: var(--paper-soft);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}

/* 2段ヘッダー・列強調・参考値のスタイル */
.pricing-table .group-head {
  text-align: center;
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}
.pricing-table .th-sub {
  display: block;
  font-size: var(--fs-note);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
}
/* 表のデータセル内の上限併記（例: 記帳代行の「〜月60仕訳」）
   デスクトップでは金額を上下中央に保ち、仕訳数をセル下部に配置 */
.pricing-table .td-cap{
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-variant-numeric: normal;
}
/* 顧問料列: 他の内訳項目と同じ標準ウェイト */
.pricing-table .col-emphasis {
  color: var(--ink);
  font-weight: 400;
}
/* 年間合計列: このページの主役の数字（ヒーローの価格アンカー・モデルケースと同じ軸） */
.pricing-table .col-ref {
  color: var(--ink);
  font-weight: 700;
}
#pricing .pricing-table tbody td.col-ref {
  font-size: var(--fs-lead);
  background: var(--gray);
}
#pricing .pricing-table tbody td.col-ref.col-ref--est {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
}

/* 料金表のデータセル: UI用の15pxではなく本文サイズで読ませる。
   年間合計列(.col-ref)は tbody を含むセレクタで指定されており
   詳細度が上回るため、17pxのまま影響を受けない。 */
#pricing .pricing-table td.amount {
  font-size: var(--fs-lead);
}

/* ---------- 料金表：モバイル横スクロール対応 ---------- */

/* 横スクロール中も「年間売上」列が見えるよう固定 */
@media (max-width: 740px) {
  #pricing .pricing-table--wide thead tr:first-child th:first-child,
  #pricing .pricing-table--wide tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
  }
}

/* スクロールできることを伝えるテキストヒント（PC幅では非表示） */
.scroll-hint {
  display: none;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 10px;
}
@media (max-width: 740px) {
  .scroll-hint {
    display: block;
  }
}



/* 右端に「まだ続きがある」ことを示すフェードグラデーション */
.table-scroll-container {
  position: relative;
}
.table-scroll-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, rgba(246, 242, 231, 0), var(--paper));
  pointer-events: none;
}
@media (min-width: 741px) {
  .table-scroll-container::after {
    display: none;
  }
}

/* 2段ヘッダーの「毎月」「年1回」のグループ下線に隙間（切れ目）を作る */
#pricing .pricing-table thead th.group-head {
  position: relative;
  border-bottom: none !important;
}
#pricing .pricing-table thead th.group-head::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1.5px;
  background-color: var(--line);
}

#pricing .pricing-table thead tr:nth-child(2) th {
  border-top: none !important;
}

/* ---------- 03：申告・決算のみの料金表（02 の3列表と同じ見た目に揃える） ----------
   白地＋角丸のアイボリー見出し帯＋淡い横線。売上規模・金額は明朝体。 */
#fee-annual .pricing-table{
  border-radius: 0;
  overflow: visible;
  table-layout: fixed;
}
#fee-annual .pricing-table thead th{
  padding: 11px 8px;
  border-bottom: none;
  font-size: var(--fs-body);
  letter-spacing: 0;
}
#fee-annual .pricing-table thead th:first-child{ border-radius: 8px 0 0 8px; }
#fee-annual .pricing-table thead th:last-child{ border-radius: 0 8px 8px 0; }
/* 列の色分け：02 と同じく2列目に淡い紺の下線、3列目に朱色の下線＋淡い朱の地色 */
#fee-annual .pricing-table thead th:nth-child(2){ box-shadow: inset 0 -3px 0 var(--col-self-line); }
#fee-annual .pricing-table thead th:nth-child(3){
  background: var(--col-omakase-th);
  box-shadow: inset 0 -3px 0 var(--primary);
}
#fee-annual .pricing-table tbody td,
#fee-annual .pricing-table tbody td:first-child{
  background: transparent;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line-soft);
}
/* 見出し帯と1行目の間に 02 と同じ余白 */
#fee-annual .pricing-table tbody tr:first-child td{ border-top: 8px solid transparent; }
#fee-annual .pricing-table tbody tr:hover{ background: transparent; }
#fee-annual .pricing-table tbody td:nth-child(3){
  background: var(--col-omakase-bg);
  background-clip: padding-box; /* 見出し帯との間の余白は白のまま（02と同じ） */
}
#fee-annual .pricing-table tbody td:first-child{
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
}
#fee-annual .pricing-table td.amount{
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: 0.01em;
}
#fee-annual .pricing-table td.amount .curr{
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
}
/* 「別途お見積もり」：02 と同じ控えめなグレー */
#fee-annual .pricing-table td.amount[colspan]{
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}
@media (max-width: 600px){
  #fee-annual .pricing-table thead th{ padding: 8px 4px; font-size: var(--fs-small); }
  #fee-annual .pricing-table tbody td,
  #fee-annual .pricing-table tbody td:first-child{ padding: 11px 4px; }
  #fee-annual .pricing-table tbody td:first-child{ font-size: 15px; }
  #fee-annual .pricing-table td.amount{ font-size: 16px; }
  #fee-annual .pricing-table td.amount .curr{ font-size: 11px; }
  #fee-annual .pricing-table td.amount[colspan]{ font-size: 13px; }
}

/* ==========================================================================
   顧問料：2列料金比較表（金額を押すと内訳が開く展開式）
   ・配色はアイボリー（--paper-soft）と白の暖色系に統一。--gray は使わない
   ・強調色は柿色（--kaki / --kaki-deep）のみ
   ・枠線で囲まず、角丸と淡い影で面を分ける
   ========================================================================== */

/* ---------- 金額ボタン（PC・モバイル共通） ---------- */
.card-price-btn{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 6px 12px 5px;
  font-family: inherit;
  color: var(--ink);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card-price-btn:hover{
  background: var(--paper-soft);
  border-color: var(--line);
}
/* 開いている状態：枠の太さは変えず、影で太く見せてガタつきを防ぐ */
.card-price-btn[aria-expanded="true"]{
  background: var(--paper-soft);
  border-color: var(--kaki);
  box-shadow: 0 0 0 .5px var(--kaki);
}
.card-price-chevron{
  position: absolute;
  top: 7px;
  right: 9px;
  width: 12px;
  height: 12px;
  color: var(--kaki);
  transition: transform .2s ease;
  pointer-events: none;
}
.card-price-btn[aria-expanded="true"] .card-price-chevron{ transform: rotate(180deg); }
.card-price-chevron svg{
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
/* 金額：月額を主役（明朝・大）、その下に「+決算申告◯円」を添える */
.card-price-fee{
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}
/* 月額を少し左、決算申告を少し右にずらし、「月額に決算申告を足す」流れを見せる */
.cpf-main{ white-space: nowrap; transform: translateX(-16px); }
.cpf-label{
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  margin-right: 2px;
}
.cpf-num{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.cpf-yen{
  font-size: 13px;
  font-weight: 500;
  margin-left: 1px;
}
/* 決算申告：「注意書き」に見えないよう、数字は月額と同じ明朝・黒にする（大きさで月額が主役） */
.cpf-sub{
  margin-top: 1px;
  transform: translateX(16px);
  line-height: 1.3;
}
/* 狭い列では「+決算申告」と金額の間でだけ折り返す */
.cpf-sub-label,
.cpf-sub-amt{ display: inline-block; white-space: nowrap; }
.cpf-sub-label{
  margin-right: 3px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.cpf-sub-num{
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.cpf-sub-yen{
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--ink);
  margin-left: 1px;
}
.card-price-est{
  font-size: 15px;
  color: var(--ink-soft);
}

.pricing-table-desktop-wrap{ display: block; width: 100%; }

/* ---------- 3列表（PC・モバイル共通。モバイル寸法は下の 600px 以下で上書き） ---------- */
/* 囲みを一重にするため、表は外枠・縦罫・左列の地色を持たず、行間の横線だけで区切る
   （枠を持つのは金額ボタンのみ） */
.pc-pricing-table{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.pc-pricing-table .col-scale{ width: 30%; }
.pc-pricing-table .col-price{ width: 35%; }
.pc-pricing-table thead th{
  background: var(--paper-soft);
  padding: 11px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: var(--fs-body);  /* サイト内の他の表見出しと同じ 16px 太字 */
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.pc-pricing-table thead th:first-child{ border-radius: 8px 0 0 8px; }
.pc-pricing-table thead th:last-child{ border-radius: 0 8px 8px 0; }
/* 記帳方法の2列を色で区別：見出しに色の下線、「記帳もおまかせ」列は地色も淡い朱に */
.pc-pricing-table thead th:nth-child(2){ box-shadow: inset 0 -3px 0 var(--col-self-line); }
.pc-pricing-table thead th:nth-child(3){
  background: var(--col-omakase-th);
  box-shadow: inset 0 -3px 0 var(--primary);
}
.pc-pricing-table tbody tr:not(.breakdown-row-pc) td:nth-child(3){ background: var(--col-omakase-bg); }
.th-col-sub{
  display: block;
  font-size: var(--fs-note);
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 3px;
}
.pc-pricing-table tbody td{
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
.pc-pricing-table tbody tr:first-child td{ border-top: none; }
.pc-pricing-table .td-scale-name{
  padding: 8px 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
}
.pc-pricing-table .td-estimate-pc{
  padding: 14px 12px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* 見出しの上の段：「記帳の方法で選べます」。左右の線の両端を下に折り、下の2列をまとめて指す */
.pc-pricing-table thead tr.th-group td{
  padding: 2px 0 8px;
  background: none;
  border: none;
  text-align: center;
}
.th-group-label{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.th-group-label::before,
.th-group-label::after{
  content: "";
  flex: 1;
  height: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.th-group-label::before{ border-left: 1px solid var(--line-soft); }
.th-group-label::after{ border-right: 1px solid var(--line-soft); }

/* 表の右上：「月数＋」（押すと月数を選ぶパネルが開く）と、その下に「（税抜）」 */
.pricing-unit-row{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
}
/* 「（税抜）」は表の金額の注記なので、表のすぐ上に寄せる */
.pricing-unit-row .table-unit-note{ line-height: 1.2; }
.pricing-unit-row .table-unit-note{ margin: 0; }
.pricing-sim{ position: relative; }
/* 枠・背景のない控えめな文字リンク（押せる範囲は余白で確保し、見た目の位置は変えない） */
.pricing-sim-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  padding: 8px 0 8px 10px;
  margin: -8px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .2s ease;
}
.pricing-sim-toggle::-webkit-details-marker{ display: none; }
.pricing-sim-toggle::after{
  content: "＋";
  font-size: var(--fs-body);
  line-height: 1;
}
.pricing-sim[open] .pricing-sim-toggle::after{ content: "－"; }
.pricing-sim-toggle:hover,
.pricing-sim[open] .pricing-sim-toggle{ color: var(--ink); }
/* 12ヶ月から変えているときは、柿色の文字と右上の丸で知らせる */
.pricing-sim.is-modified .pricing-sim-toggle{ color: var(--kaki-deep); }
.pricing-sim.is-modified .pricing-sim-toggle::before{
  content: "";
  position: absolute;
  top: 2px;
  right: -5px;
  width: 8px;
  height: 8px;
  background: var(--kaki);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--paper);
}
.pricing-sim-panel{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  width: 300px;
  padding: 14px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  white-space: nowrap;
}
/* パネル上部の注意書き（いつ使うものか） */
.pricing-sim-note{
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: normal;
}
.pricing-sim-field{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.pricing-sim-field select{
  font-family: inherit;
  font-size: var(--fs-small);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.pricing-sim-reset{
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pricing-sim-reset:hover{ color: var(--ink); }
.no-js .pricing-sim{ display: none; }

/* 1行目：開業・創業初年度特別プラン（行全体を朱色の枠で囲む） */
.pc-pricing-table tbody tr.pc-row-spacer td{
  height: 8px;
  padding: 0;
  border: none;
}
.pc-pricing-table tbody tr.pc-row-startup td{
  border-top: 1.5px solid var(--primary);
  border-bottom: 1.5px solid var(--primary);
}
.pc-pricing-table tbody tr.pc-row-startup td:first-child{
  border-left: 1.5px solid var(--primary);
  border-radius: 10px 0 0 10px;
}
.pc-pricing-table tbody tr.pc-row-startup td:last-child{
  border-right: 1.5px solid var(--primary);
  border-radius: 0 10px 10px 0;
}
.pc-pricing-table .startup-badge{
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 700;
  line-height: 1.6;
}
.pc-pricing-table .startup-row-name{
  display: block;
  font-size: var(--fs-body);
  line-height: 1.4;
}
/* 「通常料金」の小見出し */
.pc-pricing-table tbody tr.pc-row-group td{
  padding: 18px 12px 6px;
  border-top: none;
  text-align: left;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--kaki-deep);
}

/* JavaScript なしの表示（build.js が書き出した静的な表）
   ・個人事業主・法人を区分の見出し行つきで両方表示する
   ・金額はリンクで、押すと対応する内訳行が :target で開く
   ・JavaScript が動く環境（html.js）ではこれらは使わない */
.pc-pricing-table a.card-price-btn{ text-decoration: none; }
.pc-pricing-table .breakdown-row-pc:target{ display: table-row; }
.pc-pricing-table tbody tr.pc-row-segment td{
  padding: 22px 8px 4px;
  border-top: none;
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
}
.js .pc-static-only,
.js .pc-pricing-table tr.pc-row-segment{ display: none; }

/* 02の料金表まわり：文字情報が多いので、後ろに余白をとって区切りを見せる */
.pricing-table-foot{ margin-bottom: 64px; }
@media (max-width: 600px){
  .pricing-table-foot{ margin-bottom: 48px; }
}

/* 内訳行：金額2列分の幅で開く */
.breakdown-row-pc{ display: none; }
.breakdown-row-pc.is-open{ display: table-row; }
.pc-pricing-table tbody .breakdown-row-pc td{ border-top: none; }
.pc-pricing-table tbody .breakdown-row-pc .breakdown-td-pc{ padding: 4px 16px 16px; }

/* ---------- 内訳ボックス（PC・モバイル共通） ---------- */
.breakdown-box{
  position: relative;
  background: #FFFBF4;
  border: 1px solid #E6DBC6;
  border-radius: 6px;
  padding: 14px 22px;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
/* 押した列を指す三角（PCのみ） */
.breakdown-box.point-left::before,
.breakdown-box.point-right::before{
  content: "";
  position: absolute;
  top: -8px;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: #E6DBC6;
  transform: translateX(-50%);
}
.breakdown-box.point-left::after,
.breakdown-box.point-right::after{
  content: "";
  position: absolute;
  top: -6px;
  border: 7px solid transparent;
  border-top: 0;
  border-bottom-color: #FFFBF4;
  transform: translateX(-50%);
}
.breakdown-box.point-left::before,
.breakdown-box.point-left::after{ left: 25%; }
.breakdown-box.point-right::before,
.breakdown-box.point-right::after{ left: 75%; }

.breakdown-header-title{
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--kaki-deep);
  margin-bottom: 4px;
}
.breakdown-item-sub-note{
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: 8px;
  white-space: nowrap;
}
/* 内訳の表：項目・お支払いの時期・金額（3列のグリッド） */
.breakdown-table{ font-size: var(--fs-body); }
.bd-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 7.5em;
  column-gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.bd-head{
  padding-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.bd-item{ color: var(--ink-soft); }
.bd-when{
  white-space: nowrap;
  color: var(--ink-soft);
}
.bd-val{
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bd-head .bd-val{ color: var(--ink-soft); }
/* 内訳の年間合計（毎月の金額×月数＋決算・申告時の金額） */
.bd-total{
  padding: 8px 0 2px;
  border-top: 1px solid var(--line-soft);
  margin-top: -1px;
}
.bd-total-main{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.bd-total-label{
  font-weight: 600;
  color: var(--ink);
}
.bd-total-num{
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bd-total-calc{
  margin-top: 2px;
  text-align: right;
  font-size: 13px;
  color: var(--ink-soft);
}

/* 内訳の下の注記：「・見出し：説明」の箇条書き。2行目以降は見出しの先頭にそろえる */
.breakdown-notes{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.6;
}
.breakdown-notes li{
  position: relative;
  padding-left: 1em;
}
.breakdown-notes li + li{ margin-top: 4px; }
.breakdown-notes li::before{
  content: "・";
  position: absolute;
  left: 0;
}
/* 見出しは太字にせず、色だけ本文より濃くして表の項目名と強さをそろえる */
.breakdown-notes strong{
  font-weight: 500;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce){
  .card-price-btn,
  .card-price-chevron{ transition: none; }
}

/* ---------- モバイル（600px以下）：3列表を詰めて表示 ---------- */
@media (max-width: 600px){
  .pc-pricing-table thead tr.th-group td{ padding: 2px 0 6px; }
  .th-group-label{ gap: 8px; font-size: var(--fs-note); font-weight: 500; letter-spacing: 0.04em; }
  /* 文字の大きさは 補足11px／ラベル12px／行の名前13px／金額 の4段階にそろえる */
  #fee-advisory .table-unit-note{ font-size: var(--fs-note); }
  .pricing-unit-row{ gap: 14px; }
  .pricing-sim-toggle{ font-size: var(--fs-note); }
  .pricing-sim-toggle::after{ font-size: var(--fs-small); }
  .pricing-sim-panel{ flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
  .pricing-sim-note{ font-size: var(--fs-note); }
  .pc-pricing-table .bd-total-num{ font-size: var(--fs-body); }
  .pc-pricing-table .bd-total-calc{ font-size: var(--fs-note); }
  #fee-advisory .pricing-caption{ font-size: var(--fs-small); }
  /* 金額を2行に収めるため、表だけ左右の余白を8pxずつ詰めて幅を広げる */
  .pc-pricing-table{
    width: calc(100% + 16px);
    margin-left: -8px;
    margin-right: -8px;
  }
  .pc-pricing-table .col-scale{ width: 20%; }
  .pc-pricing-table .col-price{ width: 40%; }
  .pc-pricing-table thead th{
    padding: 7px 2px 8px;
    font-size: var(--fs-note);
  }
  /* 2つの記帳方法の見出しだけ一段大きくして、選ぶ場所だと分かるようにする */
  .pc-pricing-table thead tr:not(.th-group) th:not(:first-child){ font-size: var(--fs-small); }
  .pc-pricing-table .th-col-sub{ font-size: 11px; margin-top: 1px; }
  /* 行の区切り線は消してボタンの枠だけで区切る（「通常料金」の下と表の一番下の線は残す） */
  .pc-pricing-table tbody td{ padding: 5px 2px; border-top: none; }
  .pc-pricing-table tbody tr.pc-row-group + tr td{ border-top: 1px solid var(--line-soft); padding-top: 8px; }
  .pc-pricing-table .td-scale-name{
    padding: 4px 2px;
    font-size: 13px;
    line-height: 1.35;
  }
  .pc-pricing-table .td-estimate-pc{ padding: 10px 4px; font-size: 13px; }

  /* 特別プラン：バッジは「初年度」だけにして細い列に収める */
  .pc-pricing-table .startup-badge{ padding: 0 6px; font-size: 11px; }
  .pc-pricing-table .startup-badge .sb-extra{ display: none; }
  .pc-pricing-table .startup-row-name{ font-size: 12px; }
  .pc-pricing-table tbody tr.pc-row-group td{ padding: 12px 4px 4px; font-size: var(--fs-note); }

  /* 金額ボタン */
  .pc-pricing-table .card-price-btn{
    min-height: 0;
    padding: 5px 1px 4px;
    border-radius: 7px;
  }
  .pc-pricing-table .cpf-main{ transform: translateX(-6px); }
  .pc-pricing-table .cpf-label{ font-size: 11px; margin-right: 1px; }
  .pc-pricing-table .cpf-num{ font-size: 17px; }
  .pc-pricing-table .cpf-yen{ font-size: 11px; }
  /* 「+決算申告◯円」は1行に収める（幅の広い端末ほど数字を少し大きく） */
  .pc-pricing-table .cpf-sub{ transform: none; white-space: nowrap; }
  .pc-pricing-table .cpf-sub-label,
  .pc-pricing-table .cpf-sub-amt{ display: inline; }
  .pc-pricing-table .cpf-sub-label{ font-size: 11px; letter-spacing: -0.03em; margin-right: 1px; }
  .pc-pricing-table .cpf-sub-num{ font-size: clamp(14px, 4vw, 16px); letter-spacing: 0; }
  .pc-pricing-table .cpf-sub-yen{ font-size: 11px; }
  .pc-pricing-table .card-price-chevron{ top: 3px; right: 4px; width: 10px; height: 10px; }
  .pc-pricing-table .card-price-est{ font-size: 12px; }

  /* 内訳：表の幅いっぱいに開き、三角は押した列の中央を指す */
  .pc-pricing-table tbody .breakdown-row-pc .breakdown-td-pc{ padding: 4px 0 12px; }
  .pc-pricing-table .breakdown-box{ padding: 12px 14px; font-size: 14px; }
  .pc-pricing-table .breakdown-box.point-left::before,
  .pc-pricing-table .breakdown-box.point-left::after{ left: 40%; }
  .pc-pricing-table .breakdown-box.point-right::before,
  .pc-pricing-table .breakdown-box.point-right::after{ left: 80%; }
  .pc-pricing-table .breakdown-header-title{ font-size: var(--fs-small); }
  .pc-pricing-table .breakdown-table{ font-size: var(--fs-small); }
  .pc-pricing-table .bd-row{ column-gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(6.5em, auto); padding: 7px 0; }
  .pc-pricing-table .bd-head{ font-size: 13px; }
  .pc-pricing-table .breakdown-notes{ font-size: 13px; line-height: 1.7; }
  .pc-pricing-table .breakdown-item-sub-note{ display: block; margin-left: 0; font-size: var(--fs-note); }
}

/* ---------- office wrap & map slot ---------- */
.office-wrap {
  max-width: 720px;
  margin: 24px 0 0;
}
.office-table {
  width: 100%;
  margin: 0;
}
/* --- アクセス先頭：住所カード ＋ 所在地マップ --- */
.access-map-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 28px auto 36px;
  align-items: stretch;
}
.access-address-card {
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.access-office-name {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.4;
}
.access-address-text {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0;
}
.access-map {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--paper);
}
.access-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .access-map-block {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 20px auto 28px;
  }
  .access-address-card {
    padding: 8px 0 0;
  }
}

/* --- お車でお越しの方へ（CAR：案1 左右スプリット構成） --- */
.car-split-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
  background: var(--paper-soft);
  border-radius: 8px;
  padding: 32px 28px;
  align-items: stretch;
}
.car-split-map-col {
  display: flex;
  flex-direction: column;
}
.car-split-map {
  width: 100%;
  flex: 1;
  min-height: 320px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--paper);
  position: relative;
}
.car-split-map iframe {
  width: 100%;
  height: calc(100% + 64px);
  margin-top: -64px;
  border: 0;
  display: block;
}
.car-map-action {
  margin-top: 12px;
  margin-bottom: 0;
}
.car-split-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.car-info-item {
  display: flex;
  flex-direction: column;
}
.car-info-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.4;
}
.car-info-item .car-text {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.car-info-item .car-action {
  margin-top: auto;
  padding-top: 2px;
}
.car-info-divider {
  height: 1px;
  background: var(--line-soft);
  width: 100%;
}
.car-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--kaki-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  line-height: 1.5;
  transition: color .2s ease;
}
.car-link:hover {
  color: var(--primary);
}

@media (max-width: 820px) {
  .car-split-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }
  .car-split-map {
    min-height: 250px;
    height: 250px;
    flex: none;
  }
  .car-split-info {
    gap: 20px;
  }
  .car-info-divider {
    margin: 4px 0;
  }
}



/* ---------- print ---------- */
@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   料金ページ 顧問料テーブル：モバイル表示（600px以下）
   ・表を「売上規模ごとのカード」に組み替える（HTMLは無変更・CSSのみ）
   ・左側ラベルは各tdの data-label 属性を ::before で表示
   ・年間合計はカード内の主役（デスクトップの強調と同じ軸）
   ・only-wide スパンは再表示され「円」の単位が各値に付く
   PC（601px以上）には一切影響しない
   ========================================================== */

/* 料金表の右上「（単位：円／税抜）」右寄せスタイル */
.table-unit-note {
  text-align: right;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 8px auto;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  /* --- 横スクロール用の装飾を撤去（カード表示では不要） --- */
  .scroll-hint {
    display: none;
  }
  .table-scroll-container::after {
    display: none;
  }

  /* --- 表をカードのリストに組み替える --- */
  #pricing .pricing-table--wide {
    display: block;
    width: 100%;
  }
  #pricing .pricing-table--wide colgroup,
  #pricing .pricing-table--wide thead {
    display: none;
  }
  #pricing .pricing-table--wide tbody[data-segment].is-active {
    display: block;
  }

  /* 1つの売上規模＝1カード */
  #pricing .pricing-table--wide tbody tr {
    display: block;
    background: var(--paper-soft);
    border: none;
    border-radius: 8px;
    padding: 16px 16px 14px;
    margin: 0 0 30px;
  }

  /* 内訳の各行：左にラベル（data-label）・右に金額 */
  #pricing .pricing-table--wide tbody td {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 6.5px 0;
    border-bottom: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    white-space: normal;
  }
  #pricing .pricing-table--wide tbody td::before {
    content: attr(data-label);
    margin-right: auto;
    padding-right: 12px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
  }

  /* カード見出し：年間売上（左端にラベル、売上規模を中央揃え） */
  #pricing .pricing-table--wide tbody td:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    box-shadow: none;
    padding: 6px 0 8px;
    margin: 0 0 8px;
    border-bottom: none;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
  #pricing .pricing-table--wide tbody td:first-child::before {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--kaki-deep);
  }
  /* 開業・創業初年度カード：売上規模区分ではなくプラン名のため「年間売上」を非表示 */
  #pricing .pricing-table--wide tbody tr:first-child td:first-child::before {
    display: none;
    content: none;
  }

  /* 顧問料：内訳の各行と同じウェイト */
  #pricing .pricing-table--wide tbody td.col-emphasis {
    font-weight: 500;
  }

  /* 年間合計：カード内の主役（グレーの角丸帯） */
  #pricing .pricing-table--wide tbody td.col-ref {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--gray);
    border-left: none;
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
  }
  /* 「別途お見積もり」の日本語テキストのみ15pxにして数字(17px)と視覚バランスを統一 */
  #pricing .pricing-table--wide tbody td.amount.td-estimate,
  #pricing .pricing-table--wide tbody td.col-ref.col-ref--est {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
  }
  #pricing .pricing-table--wide tbody td.col-ref::before {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    align-self: center;
  }

  /* 「◯◯円超／別途お見積もり」行：ラベルなしの1行表示 */
  #pricing .pricing-table--wide tbody td[colspan] {
    display: block;
    padding: 2px 0 0;
    font-size: 14px;
    color: var(--ink);
  }
  #pricing .pricing-table--wide tbody td[colspan]::before {
    content: none;
  }

  /* 記帳代行の上限併記：カード内では金額の前に表示 */
  #pricing .pricing-table--wide tbody td::before {
    order: -2;
  }
  #pricing .pricing-table--wide tbody td .td-cap{
    position: static;
    order: -1;
    margin: 0 16px 0 0;
    font-size: var(--fs-note);
    white-space: nowrap;
  }
}

/* 360px以下（iPhone SE 等）：カードの内側余白のみ一段詰める */
@media (max-width: 360px) {
  #pricing .pricing-table--wide tbody tr {
    padding: 14px 12px 12px;
  }
  #pricing .pricing-table--wide tbody td.col-ref {
    padding: 9px 10px;
    font-size: 17px;
  }
}

/* 改行防止用のユーティリティクラス */
.nobr {
  display: inline-block;
}

/* PCのみ改行（モバイルでは非表示） */
.pc-br {
  display: inline;
}
@media (max-width: 860px) {
  .pc-br {
    display: none;
  }
}

/* スマホのみ改行（PC・タブレットでは非表示） */
.sp-br {
  display: none;
}
@media (max-width: 600px) {
  .sp-br {
    display: inline;
  }
}

/* 事務所概要テーブル モバイル対応（左右幅の調整） */
@media (max-width: 600px) {
  .office-table th {
    width: 85px;
    padding-right: 0;
  }
  .office-table td {
    padding-left: 12px;
  }
  .profile-side {
    display: block;
  }
  .profile-photo-slot {
    margin: 0 0 20px;
    padding: 70px 20px;
  }
  .profile-photo-slot--filled {
    max-width: 260px;
    margin: 0 auto 20px;
  }
}

.nav-toggle-icon{ flex-shrink: 0; }
.nav-toggle-icon line{
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon line:nth-child(1){
  transform: translateY(4px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon line:nth-child(2){
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon line:nth-child(3){
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 360px) {
  .topbar .mark {
    font-size: var(--fs-small);
  }
}

/* ---------- page actions ---------- */
.page-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* カード内の「ゴシック体・短い断り書き見出し」 */
.card-title-sans{
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  color: var(--ink);
}
/* カード内の本文 */
.card-body{
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink);
  margin: 0;
}
/* 表の外に置く小見出し（枠なし・カード風でないもの） */
.table-title{
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
  margin: 0 0 20px;
  padding: 0;
  border: none;
}
.table-title .table-title-note{
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 8px;
}
/* カード枠を持たない、表だけを包むブロック */
.pricing-plain{
  padding: 0;
  border: none;
  background: transparent;
}
/* 本文中のリンク */
.link-inline{
  color: var(--kaki-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 余白ユーティリティ */
.mt-32{ margin-top: 32px; }
.mb-32{ margin-bottom: 32px; }
.pricing-col-wrapper--flush{
  margin-top: 0;
  align-items: start;
}
.card-note{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.card-footnote{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.li-amount{ margin-left: 12px; color: var(--ink); }
.li-sub{
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.card-body--soft{ color: var(--ink-soft); }

@media (max-width: 640px) {
  #pricing .band{ padding: 56px 0; }
  #pricing .band--major{ padding: 56px 0; }
  #pricing .band--minor{ padding: 32px 0; }
  #pricing .band--index{ padding: 28px 0; }
  #pricing .section-head{ margin: 0 0 28px; }
  .pricing-card{ padding: 24px 20px; }
}


/* 事業形態などの小さなタグ（事業者向けページ「料金の例」のモデルケースで使用） */
.pa-tag{
  display: inline-block;
  vertical-align: middle;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  margin-bottom: 0;
  width: fit-content;
  white-space: nowrap;
  line-height: 1.4;
  background: #FFFFFF;
  color: var(--paper-dark);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* モデルケース（事業者向けページ「料金の例」） */
.case-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case-item{
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 22px 22px 20px;
}
.case-cond{
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* 金額：料金表と同じく、月額を主役に「+決算申告◯円」を小さく添える */
/* 事業形態のタグは1行目の右に置く。中央揃えは「年商◯万円」の文字だけで決まるよう、タグは位置計算から外す */
.case-rev{ position: relative; display: inline-block; }
.case-rev .pa-tag{
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 6px;
  transform: translateY(-50%);
}
.case-fee{
  margin: auto 0 0;
  line-height: 1.3;
  white-space: nowrap;
  transform: translateX(-16px); /* 料金表と同じく、月額は少し左・決算申告は少し右にずらし、2行のまとまりを中央に保つ */
}
.case-fee .cpf-num{ font-size: var(--fs-price); }
.case-fee-sub{
  margin: 4px 0 0;
  transform: translateX(16px);
  line-height: 1.4;
}
.case-fee-sub .cpf-sub-num{ font-size: var(--fs-lead); }

@media (max-width: 860px){
  .case-list{ grid-template-columns: 1fr; gap: 16px; }
  .case-item{ padding: 20px; }
  .case-fee .cpf-num{ font-size: var(--fs-price-sm); }
}

/* ---------- 中間CTA（本文中・控えめ版） ---------- */
.cta-inline{
  margin: 36px auto 0;
  max-width: 960px;
  padding: 24px 32px;
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.cta-inline-text{
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  text-align: center;
}
.cta-inline-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-inline .btn-primary{
  padding: 14px 28px;
  font-size: var(--fs-body);
}
.cta-inline-tel{
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cta-inline-tel .tel-number{
  display: inline-flex;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink);
}
.cta-inline-tel .tel-note{
  font-size: var(--fs-note);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

@media (max-width: 640px){
  .cta-inline{
    margin-top: 36px;
    padding: 24px 20px;
    align-items: stretch;
    gap: 16px;
  }
  .cta-inline-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .cta-inline-text{ text-align: center; }
  .cta-inline .btn-primary{ text-align: center; }
  .cta-inline-tel{ justify-content: center; }
}

/* ============================================
   コラム・お知らせ本文(Markdown自動生成)のスタイル統一
   ============================================ */
.column-body h1,
.news-body h1{
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 48px 0 20px;
}
/* 見出し部分に淡い面を敷く。背景は --paper-2 を使用し、
   銅色系は使わない。画面内の銅色は上罫線・H3の縦線・マーカー・リンクで
   既に4系統あり、これ以上増やすと色が散らかるため。
   面は本文カラムより左右24px広く取る。本文と同じ幅で色を変えると、
   区切りではなくカードに見えてしまう。 */
.column-body h2,
.news-body h2{
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 64px 0 24px;
  padding: 20px 24px;
  background: var(--paper-soft);
  border-top: none;
  border-radius: 8px;
}
.column-body h3,
.news-body h3{
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.7;
  margin: 72px 0 17px;
  padding-left: 20px;
  border-left: 3px solid var(--kaki-deep);
}

.column-body h2 + h3,
.news-body h2 + h3{
  margin-top: 32px;
}
.column-body h4,
.news-body h4{
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 10px;
}
.column-body h5,
.news-body h5{
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 8px;
}
.column-body h6,
.news-body h6{
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 8px;
}
.column-body p,
.news-body p{
  font-size: 18px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 32px;
}
.column-body ul,
.news-body ul{
  margin: 0 0 32px;
  padding-left: 1.2em;
}
.column-body li,
.news-body li{
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 14px;
}
/* 項目名を示す役割に限定する。太字まで足すと em のマーカーと
   強調の強さが並んでしまうため、色のみで表現する。 */
.column-body strong,
.news-body strong{
  color: var(--ink);
  font-weight: 700;
}
.column-body a,
.news-body a{
  color: var(--kaki-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(140, 69, 39, 0.45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.column-body a::after,
.news-body a::after{
  content: "›";
  font-size: 13px;
  font-weight: 700;
  color: var(--kaki-deep);
  margin-left: 3px;
  display: inline-block;
  text-decoration: none !important;
  transition: transform .2s ease, color .2s ease;
}
.column-body a:hover,
.news-body a:hover{
  color: var(--primary-deep);
  text-decoration-color: var(--primary-deep);
}
.column-body a:hover::after,
.news-body a:hover::after{
  color: var(--primary-deep);
  transform: translateX(2px);
}
/* 目次(TOC)内のリンクには ::after 矢印を出さない */
.column-body .column-toc a::after{
  content: none !important;
}

/* ============================================
   コラム・お知らせ記事のみに適用する見出し調整
   ※ .column-body は privacy-policy.html でも使われているため、
     .column-article でスコープを限定している。
   ※ このブロックは必ず :first-child のリセットより前に置くこと
     （詳細度が同じため、後ろに置くと margin-top: 0 が効かなくなる）
   ============================================ */

/* 大見出しの前に十分な間隔を取り、記事を大きなかたまりとして分節する */
.column-article .column-body h2,
.news-body h2{
  font-size: 28px;
  margin-top: 80px;
}

/* h4 は本文と同サイズだったため、見出しとして認識できる大きさに上げる */
.column-article .column-body h4,
.news-body h4{
  font-size: 19px;
}

/* マーカー。build.js の inlineMd() が *テキスト* を <em> に変換する。
   斜体（日本語では合成イタリックになる）をやめ、敷き色にする。
   下端を行間に流さず文字の足元で止めることで、折り返し時に
   下線が途切れて見えるのを防ぐ。 */
.column-article .column-body em,
.news-body em{
  font-style: normal;
  background: linear-gradient(
    transparent 42%,
    rgba(242, 162, 63, 0.32) 42%,
    rgba(242, 162, 63, 0.32) 84%,
    transparent 84%
  );
  padding: 0 2px;
}

/* 小見出し。本文との差が4pxしかなく、かつ明朝の細さがゴシック本文より
   軽く見えるため、サイズと字重の両方を上げて見出しとして認識させる。
   Shippori Mincho は wght@600;700 を読み込み済み。 */
.column-article .column-body h3,
.news-body h3{
  font-size: 22px;
  font-weight: 700;
}



.column-body h1:first-child,
.news-body h1:first-child,
.column-body h2:first-child,
.news-body h2:first-child,
.column-body h3:first-child,
.news-body h3:first-child,
.column-body h4:first-child,
.news-body h4:first-child,
.column-body h5:first-child,
.news-body h5:first-child,
.column-body h6:first-child,
.news-body h6:first-child{
  margin-top: 0;
}

/* ============================================
   お知らせ・コラム一覧のモバイル対応
   ============================================ */
@media (max-width: 640px){
  .news-list a{
    padding: 18px 18px;
    row-gap: 10px;
  }
}
@media (max-width: 640px){
  .column-card-body{ padding: 20px 16px 20px 2px; }
  .column-list-title{ font-size: var(--fs-lead); }
  .column-panel{ width: 48px; }
  .column-panel-text{ font-size: var(--fs-body); letter-spacing: 0.14em; }
}

/* ============================================
   お問い合わせ・予約フォーム
   ============================================ */
#contact .page-hero,
#reservation .page-hero{
  padding-bottom: 0;
}
#contact .page-hero-inner,
#reservation .page-hero-inner{
  max-width: 640px;
  margin: 0 auto;
}
#contact .page-lead,
#reservation .page-lead{
  margin-bottom: 0;
}
#contact .band,
#reservation .band{
  padding-top: 24px;
}
.simple-form{ max-width: 640px; margin: 0 auto; }
.simple-form .form-row{ margin-bottom: 24px; }
.simple-form label{
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.simple-form .required-mark{
  color: var(--kaki-deep);
  font-size: var(--fs-note);
  font-weight: 700;
  margin-left: 6px;
  border: 1px solid var(--kaki-deep);
  padding: 1px 6px;
  border-radius: 2px;
}
.simple-form input[type="text"],
.simple-form input[type="email"],
.simple-form input[type="tel"],
.simple-form select,
.simple-form textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: #fff;
}
.simple-form textarea{ min-height: 140px; resize: vertical; }
.simple-form .form-hint{ font-size: var(--fs-small); color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.simple-form .form-hint + .form-hint{ margin-top: 3px; }
/* スパム対策用の隠しフィールド。display:none だとボットに無視されるため画面外へ退避させる。 */
.simple-form .form-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
}
.simple-form .form-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 400;
}
.simple-form .form-checkbox input{ margin-top: 3px; }
.simple-form .form-status{
  margin-top: 20px;
  padding: 16px;
  border-radius: 4px;
  display: none;
  font-size: var(--fs-body);
  line-height: 1.8;
}
.simple-form .form-status.success{
  display: block;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--kaki-deep);
}
.simple-form .form-status.error{
  display: block;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid #b3261e;
}

/* フォーム送信中の全画面オーバーレイ（閉じられないよう画面全体で知らせる） */
.sending-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(27,47,71,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.sending-overlay.is-active{
  opacity: 1;
  visibility: visible;
}
.sending-overlay__box{
  background: var(--paper);
  border-radius: 8px;
  box-shadow: var(--shadow-lift);
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.sending-overlay__spinner{
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border: 4px solid var(--line-soft);
  border-top-color: var(--midori);
  border-radius: 50%;
  animation: sending-spin .9s linear infinite;
}
.sending-overlay__title{
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.sending-overlay__note{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0;
}
@keyframes sending-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .sending-overlay{ transition: none; }
  .sending-overlay__spinner{ animation-duration: 2.4s; }
}
body.is-sending{ overflow: hidden; }

/* Markdown 拡張要素のスタイル */
.column-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}
.column-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}
.column-body code {
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9em;
  color: var(--ink);
  font-weight: 500;
}
.column-body del {
  color: var(--ink-soft);
  text-decoration: line-through;
}
.column-body ol {
  margin: 0 0 32px;
  padding-left: 26px;
}
.column-body ol li {
  margin-bottom: 10px;
  line-height: 1.9;
}
.column-body .table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 28px 0 36px;
  border-radius: 8px;
}
/* table-layout は指定しない（初期値 auto）。
   列幅をブラウザに中身から計算させることで、記事ごとに列の長さが違っても
   1列目だけ広く、数値の列は狭く、といった配分が自動で行われる。 */
.column-body .md-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  border: none;
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
  width: 100%;
}
.column-body .md-table th,
.column-body .md-table td {
  padding: 12px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-top: none;
  border-left: none;
}
.column-body .md-table th:last-child,
.column-body .md-table td:last-child {
  border-right: none;
}
.column-body .md-table tbody tr:last-child td {
  border-bottom: none;
}
.column-body .md-table td {
  background: var(--paper-soft);
}
.column-body .md-table th {
  background: var(--paper-2);
  font-weight: 700;
  color: var(--ink);
}

/* 1列目の着色は、Markdown で **項目名** と太字にしたセルにのみ適用する。
   1列目が項目名ではなく文章の表では、着色しないほうが読みやすいため。 */
.column-body .md-table tbody td:first-child:has(strong) {
  background: var(--paper-2);
}
.column-body .md-table tbody td:first-child strong {
  color: inherit;
  font-weight: 700;
}



/* 列ごとの整列（Markdownの :---: に対応） */
.column-body .md-table .ta-left   { text-align: left; }
.column-body .md-table .ta-center { text-align: center; }
.column-body .md-table .ta-right  { text-align: right; }

/* セル内で折り返したくない範囲を囲むためのヘルパー */
.column-body .md-table .nw { white-space: nowrap; }

/* ============================================
   コラム記事本文のラッパー・補足ボックス・モバイル調整
   ============================================ */

.column-article{
  max-width: 700px;
  margin: 0 auto;
}
.column-eyecatch{
  width: 280px;
  max-width: 100%;
  height: 120px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.column-eyecatch-text{
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--paper-on-ink);
  white-space: nowrap;
}

/* 補足ボックス（Markdown の引用記法「> 」で生成） */
.column-body blockquote,
.news-body blockquote{
  margin: 0 0 32px;
  padding: 22px 24px;
  background: var(--gray);
  border-left: none;
  border-radius: 8px;
}
.column-body blockquote p,
.news-body blockquote p{
  font-size: 17px;
  line-height: 1.85;
  margin: 0 0 14px;
}
.column-body blockquote p:last-child,
.news-body blockquote p:last-child{
  margin-bottom: 0;
}

/* モバイル調整 */
@media (max-width: 640px){
  .page-title--article{
    font-size: 24px;
    line-height: 1.45;
  }
  .column-body p,
  .news-body p,
  .column-body li,
  .news-body li{
    font-size: 16.5px;
  }
  .column-body p,
  .news-body p,
  .column-body ul,
  .news-body ul,
  .column-body ol{
    margin-bottom: 28px;
  }
  .column-body h2,
  .news-body h2{
    font-size: 18px;
    padding: 20px 18px;
    margin-top: 52px;
  }
  .column-body h3,
  .news-body h3{
    font-size: 17px;
    margin-top: 44px;
  }

  .column-body h2 + h3,
  .news-body h2 + h3{
    margin-top: 26px;
  }
  .column-body blockquote,
  .news-body blockquote{
    padding: 18px;
    margin-bottom: 28px;
  }
  .column-body blockquote p,
  .news-body blockquote p{
    font-size: 15.5px;
  }
  /* 列幅は auto でブラウザが中身から決めるため、min-width は原則不要。
     5列の表のみ、354pxでは1列あたり70px前後しか取れず
     全セルが4行前後に割れるため、最小幅を与えて2行に収める。 */
  .column-body .md-table{
    font-size: 13.5px;
  }
  .column-body .md-table--cols-5{ min-width: 420px; }
  .column-body .md-table th,
  .column-body .md-table td{
    padding: 9px 10px;
  }
}

/* ---------- column TOC (目次・和紙色ボックス型・完全グリッド整列) ---------- */
.column-body .column-toc{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 24px 28px 26px;
  margin: 28px 0 36px;
}
.column-body .column-toc-header{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.column-body .column-toc-title{
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
}
.column-body .column-toc-list{
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.column-body .column-toc-item{
  list-style: none !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 親リンク：grid-template-columns: 2.4em 1fr で数字とタイトルを分離（折り返し時もぶら下がる） */
.column-body .column-toc-link{
  color: var(--ink);
  text-decoration: none;
  display: grid !important;
  grid-template-columns: 2.4em 1fr !important;
  align-items: baseline !important;
  font-weight: 500;
  transition: color 0.2s ease;
}
.column-body .column-toc-link:hover{
  color: var(--kaki-deep);
}
.column-body .column-toc-link:hover .column-toc-text{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.column-body .column-toc-num{
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--kaki-deep);
  letter-spacing: 0.05em;
}
.column-body .column-toc-text{
  /* 2列目に配置 */
}
/* 子リスト：padding-left: 2.4em で親タイトルの左端と垂直に完全一致 */
.column-body .column-toc-sublist{
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 10px 0 0 0 !important;
  padding: 0 0 0 2.4em !important;
}
.column-body .column-toc-subitem{
  list-style: none !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.column-body .column-toc-sublink{
  color: var(--ink-soft);
  text-decoration: none;
  display: grid !important;
  grid-template-columns: 1.2em 1fr !important;
  align-items: baseline !important;
  transition: color 0.2s ease;
}
.column-body .column-toc-sublink::before{
  content: "─";
  color: var(--line-strong);
  font-size: 12px;
}
.column-body .column-toc-sublink:hover{
  color: var(--ink);
}
.column-body .column-toc-sublink:hover .column-toc-subtext{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* スクロールジャンプ時にヘッダーに被らないようにする */
.column-body h2[id],
.column-body h3[id]{
  scroll-margin-top: 80px;
}

@media (max-width: 860px){
  .column-body .column-toc{
    padding: 18px 18px 20px;
    margin: 20px 0 28px;
  }
  .column-body .column-toc-link{
    grid-template-columns: 2.2em 1fr;
  }
  .column-body .column-toc-sublist{
    padding-left: 2.2em !important;
  }
  .column-body h2[id],
  .column-body h3[id]{
    scroll-margin-top: 60px;
  }
}

/* 下書きプレビュー用の通知バー */
.draft-notice{
  margin: 0 0 28px;
  padding: 14px 18px;
  background: var(--kaki-deep);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.draft-notice span{
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

@media (max-width: 640px){
  .draft-notice{
    padding: 12px 14px;
    font-size: 13px;
  }
  .draft-notice span{
    font-size: 12px;
  }
}

.profile-block .profile-lead-title{
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 32px;
}
.note-caption{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---------- 改行位置の最適化 ---------- */
.section-head h2,
.audience-card .label,
.pricing-card h3{
  text-wrap: balance;
}

/* CMSの「タイトルの改行位置」を入力した記事のみ付与される。
   | の位置に挿入された <wbr> だけを折り返し候補にする（全ブラウザ対応）。
   .page-title より後方に書くこと（同詳細度のため後勝ち）。 */
.page-title--manual{
  word-break: keep-all;
}

/* ============================================
   establishment.html 専用スタイル
   ============================================ */

/* おすすめカード: 3枚を横一列に */
#establishment .audience-grid{
  grid-template-columns: repeat(3, 1fr);
}

/* --- 二つの道: 個人／法人の対比レイアウト --- */
.path-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.path-card{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
}
.path-card .path-eyebrow{
  font-size: var(--fs-note);
  letter-spacing: 0.22em;
  color: var(--kaki-deep);
  margin: 0 0 14px;
}
.path-card h3{
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.45;
}
.path-card .path-sub{
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.path-card > p{
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.path-card .scope-list{ margin-top: auto; }

/* --- 会社設立カードの真下の関連コラム導線 --- */
.path-related-columns{
  grid-column: 2;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: none;
}
.concern-related-columns{
  max-width: 960px;
  margin: 40px auto 0;
  padding: 0;
}
.path-related-title{
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.path-related-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.path-related-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-small);
  line-height: 1.6;
  transition: color 0.2s ease;
  text-align: left;
}
.path-related-link:hover{
  color: var(--kaki-deep);
}
.path-related-link:hover .path-related-text{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.path-related-label{
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--kaki-deep);
  border: 1px solid var(--kaki-deep);
  padding: 1px 6px;
  border-radius: 2px;
  line-height: 1.2;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.path-related-text{
  flex: 1;
}
.path-related-arrow{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C4527' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 9px 9px;
  flex-shrink: 0;
  font-size: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.path-related-link:hover .path-related-arrow{
  background-color: #FFFFFF;
  transform: translateX(2px);
}

@media (max-width: 860px){
  .path-related-columns{
    grid-column: 1;
    margin-top: 16px;
  }
  .path-related-link{
    align-items: flex-start;
    gap: 10px;
  }
  .path-related-label{
    margin-top: 2px;
  }
}

/* --- 創業融資: 濃紺の宣言帯 --- */
.band.dark .policy-grid{
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 56px;
  align-items: start;
}
.policy-quote{
  font-family: var(--font-serif);
  font-size: var(--fs-h2s);
  font-weight: 600;
  line-height: 1.9;
  margin: 18px 0 0;
  color: var(--paper-on-ink);
}
.policy-body p{
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--soft-on-ink);
  margin: 0 0 20px;
}

/* --- 創業支援制度ブロック --- */
.support-body p{
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 0 22px;
}
.support-benefit-panel{
  background: var(--paper-soft);
  border: none;
  border-radius: 8px;
  padding: 28px 32px;
  margin: 24px 0 26px;
  max-width: 760px;
}
.support-benefit-title{
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: none;
}
.support-benefit-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.support-benefit-list li{
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  border-bottom: none;
}
.support-benefit-list li:first-child{
  padding-top: 0;
}
.support-benefit-list li:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.support-benefit-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--kaki-deep);
  font-weight: bold;
  font-size: 15px;
}
.support-benefit-list li:first-child::before{
  top: 0;
}
.support-benefit-sub{
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: 2px;
}
.support-body .support-caption{
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 4px 0 0;
}

@media (max-width: 860px){
  #establishment .audience-grid{ grid-template-columns: 1fr; }
  .path-grid{ grid-template-columns: 1fr; }
  .band.dark .policy-grid{ grid-template-columns: 1fr; gap: 28px; }
  .policy-quote{ font-size: var(--fs-h3); }
}

/* ============================================
   tax-audit.html 専用スタイル
   ============================================ */
.flow-phase{
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 600;
  margin: 40px 0 18px;
  padding: 0 0 0 16px;
  border-bottom: none;
  border-left: 3px solid var(--kaki-deep);
  line-height: 1.4;
}
.flow-phase:first-of-type{ margin-top: 0; }

/* ============================================
   モバイル可読性の改善
   ・このセクションのルールは必ずメディアクエリの内側に置くこと。
     外側に書くとPC表示が変わる。
   ・既存ルールと同詳細度のものがあるため、
     このセクションは必ずファイル末尾に置くこと（後勝ちで有効化）。
   ============================================ */

/* ---- スマートフォン縦持ち ---- */
@media (max-width: 600px){

  /* モバイル専用：輪郭・仕切り線・影のコントラスト最適化 */
  :root {
    --line: #9A8E78;
    --line-soft: #B5A88F;
    --line-on-ink: rgba(246, 242, 231, .40);
    --shadow-panel: 0 1px 2px rgba(27,47,71,.08), 0 4px 12px rgba(27,47,71,.10);
  }

  /* 1-A. ページリード内の .nobr のみ通常の折り返しに戻す。
     文中に混ざった塊が次行へ落ちて隙間を作るのを防ぐ。
     見出し・ラベル・金額の .nobr は対象外（§4 の除外リスト参照）。 */
  .page-lead .nobr{ display: inline; }

  /* 2. カード内側余白の圧縮：本文の実効行長を19字前後まで戻す */
  .flow-card{
    display: block;
    padding: 20px 18px;
    margin-bottom: 48px;
  }
  .flow-card--media{
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .flow-step-num{
    display: block;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 4px;
    padding-top: 0;
  }
  .audience-card{ padding: 22px 18px; }
  .year-card{ padding: 20px 18px; margin-bottom: 48px; }
  .path-card{ padding: 24px 18px 20px; }
  .teaser-card{ padding: 16px 18px 16px; }
  .stance-item{ padding: 24px 18px; }

  /* ===== A-2. 余白スケールの再構築 =====
     8px（見出し→本文）／16px（段落間）／48px（ブロック間）／96px（セクション間）
     ブロック間を14〜32pxから48pxへ広げ、見出しを本文に近づけることで、
     枠線に頼らずブロックの境界が読めるようにする。 */

  /* セクション：96px（48+48）へ */
  .band{ padding: 48px 0; }
  .band--major{ padding: 48px 0; }
  .band--minor{ padding: 32px 0; }
  .section-head{ margin: 0 0 28px; }
  .band--major .section-head{ margin: 0 0 28px; }

  /* ブロック間：ボックス間を16pxで統一 */
  .stance-grid{ row-gap: 20px; gap: 20px; }
  .teaser-grid{ row-gap: 20px; gap: 20px; }
  .path-grid{ row-gap: 20px; gap: 20px; }
  .pricing-col-wrapper{ row-gap: 20px; gap: 20px; }
  #fee-startup .pricing-card.mt-32,
  #fee-annual .pricing-card.mt-32{ margin-top: 20px; }
  .flow-card{ margin-bottom: 20px; }
  .flow-card:last-child{ margin-bottom: 0; }
  .year-card{ margin-bottom: 20px; }
  .year-card:last-child{ margin-bottom: 0; }
  .case-list{ row-gap: 20px; gap: 20px; }

  /* 顧問料表：モバイルでは <tr> がカードに組み替わる（style.css:2688）。
     セレクタは元の宣言と完全に同一にすること（詳細度 1,1,2）。 */
  #pricing .pricing-table--wide tbody tr{ margin-bottom: 30px; }

  /* 見出し → 直下の本文：8pxへ */
  .flow-card-body h3{ margin-bottom: 8px; }
  .stance-item h3{ margin-bottom: 8px; }
  .teaser-card h3{ margin-top: 1px; margin-bottom: 9px; font-size: 18px; }
  .path-card h3{ margin-bottom: 8px; }
  .audience-card .label{ margin-bottom: 8px; }
  .year-card-head{ margin-bottom: 8px; }
  .pricing-card h3{ margin-bottom: 10px; }

  /* 段落間：16pxへ */
  .profile-block p{ margin-bottom: 16px; }

  /* tax-audit のフェーズ見出し（事前／当日／事後）。
     HTMLのインラインstyleで margin が指定されているため、
     !important でしか上書きできない。
     フェーズ境界はブロック間より大きくする（48 × 1.5 = 72px）。 */
  .flow-phase{ margin-bottom: 12px !important; }
  .flow-card-list + .flow-phase{ margin-top: 72px !important; }
}

/* ---- 狭幅端末（360px級Android／iPhone SE／拡大表示の320pt） ---- */
@media (max-width: 380px){
  /* 画面幅が狭い場合のみ、2行目（12文字）が1行に収まるサイズに微小調整してマーカー崩れを防ぐ */
  .hero-title{
    font-size: 26.5px;
    line-height: 1.6;
  }

  /* 1-B. 本文幅を超える塊だけが問題になる帯域。
     390px以上ではチャンク分割のほうが行が揃うため、ここに限定する。 */
  .cta-inner p .nobr,
  .cta-inline-text .nobr,
  .concern-list .nobr{ display: inline; }
}

/* ==========================================================================
   PC版ヒーローセクション改修（769px以上・トップページ専用）
   - 写真を右端・上下端まで裁ち落とし
   - 1920x1080 / 1440x900 で1画面収容（スクロールなし）
   - 左カラム縦方向中央揃え
   ========================================================================== */
@media (min-width: 769px){
  .hero-photo picture{
    display: contents;
  }

  /* ヒーローコンテナ全体：画面幅（vw）に連動してエリアの高さ自体をスムーズにスケールダウン */
  #top .hero{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    height: clamp(620px, 46vw, 800px) !important; /* 画面幅に応じて高さ（写真の高さ）自体を確実にスケールダウン（さらに+10%拡大） */
    min-height: 620px !important;
    max-height: none !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--paper-soft) !important; /* 左側全面を塗りつぶすアイボリー */
    border-radius: 0 !important;
    border: none !important;
  }

  /* 以前のオフィス背景写真（::before疑似要素）を完全無効化・純粋なアイボリー塗りに統一 */
  #top .hero::before{
    display: none !important;
    content: none !important;
  }

  /* ヒーロー内グリッド：上下の1frにより、コンテンツ全体を完全に上下中央均等配置 */
  #top .hero-grid{
    display: grid !important;
    grid-template-columns: minmax(0, clamp(520px, 54%, 660px)) 1fr !important;
    grid-template-rows: 1fr auto auto 1fr !important;
    grid-template-areas:
      ".     photo"
      "intro photo"
      "copy  photo"
      ".     photo" !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto;
  }

  /* 写真エリア（.hero-side）：右カラム全面に配置し、ヒーロー枠の全高（上端から下端まで）をカバー */
  #top .hero-side{
    grid-area: photo !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 1 !important;
  }

  #top .hero-photo-wrap{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
  }

  #top .hero-photo{
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(27, 47, 71, 0.08) !important; /* 左右を美しく仕切る極細ライン */
    box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  /* モバイル用の縦写真（人が立っている写真）を右側全面に美しくフィット */
  #top .hero-photo img{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center 18% !important; /* 先生のお顔・立ち姿が綺麗に収まる位置 */
    display: block !important;
    filter: none !important; /* ナチュラルな色味 */
  }

  /* 全面写真時代のグラデーションは解除 */
  #top .hero-photo::after{
    display: none !important;
  }

  /* 写真の外にあるキャプションはPCで非表示 */
  #top .hero-photo-caption{
    display: none !important;
  }

  /* 写真内のキャプション：右下に配置 */
  #top .hero-photo-sp-caption{
    display: flex !important;
    align-items: baseline;
    position: absolute;
    bottom: 16px;
    right: 20px;
    left: auto;
    z-index: 3;
    background: rgba(26, 29, 34, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8px 18px !important;
    border-radius: 5px !important;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #FFFFFF;
    font-size: 15px !important;
    letter-spacing: 0.08em;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
  }

  #top .hero-photo-sp-caption .sp-caption-org{
    font-size: 14.5px !important;
    letter-spacing: 0.08em;
    color: #FFFFFF;
  }

  #top .hero-photo-sp-caption .sp-caption-name{
    font-family: var(--font-serif);
    font-size: 17.5px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    margin-left: 0.35em;
  }

  /* 左カラム共通のインセット（案2）：1464pxまでしっかり写真側へ寄せる */
  #top .hero-intro,
  #top .hero-copy{
    padding-left: clamp(70px, 7.5vw, 110px) !important;
    padding-right: clamp(16px, 1.8vw, 24px) !important;
    box-sizing: border-box !important;
  }

  #top .hero-intro{
    grid-area: intro !important;
    align-self: end !important;
    margin-top: 0 !important;
    padding-top: clamp(12px, 1.8vw, 28px) !important; /* キャッチコピーの上を詰まって見せない */
  }

  #top .hero-copy{
    grid-area: copy !important;
    align-self: start !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 見出し（キャッチコピー）：アイボリー背景の上でクリアに読めるためシャドウ不要 */
  #top .hero-title{
    margin-top: 0 !important;
    margin-bottom: clamp(22px, 2.6vw, 36px) !important;
    font-size: clamp(36px, 3.0vw + 6px, 54px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.03em !important;
    color: var(--ink) !important;
    text-shadow: none !important;
  }

  /* 料金ボックス：アイボリー背景の上に映える、端正な白パネル */
  #top .hero-price{
    margin-top: 0 !important;
    margin-bottom: clamp(10px, 1.4vh, 16px) !important;
    padding: 16px 22px !important;
    background: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border: 1px solid rgba(27, 47, 71, 0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 下層リンク：ボタンとの余白を少し広げてスッキリ配置 */
  #top .hero-sublink{
    margin-top: 0 !important;
    margin-bottom: clamp(24px, 3.2vh, 36px) !important;
    padding: 0 4px !important;
  }
  #top .hero-sublink a{
    text-shadow: none !important;
  }

  /* CTAボタン群：PC・タブレット表示で横並び（1段）を美しくキープ */
  #top .hero-actions{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
    width: 100% !important;
  }

  #top .hero-actions .btn-primary,
  #top .hero-actions .btn-secondary{
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 13px clamp(14px, 1.6vw, 24px) !important;
    font-size: clamp(14px, 1.1vw, 16px) !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
    min-height: unset !important;
  }

  #top .hero-actions .btn-primary::after,
  #top .hero-actions .btn-secondary::after{
    width: 18px !important;
    height: 18px !important;
    background-size: 9px 9px !important;
    flex-shrink: 0 !important;
  }

  #top .hero-cta-note{
    margin: 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    color: var(--ink-soft) !important;
    text-shadow: none !important;
  }
}

/* 769px〜1080px（タブレット横〜小型PC帯）：先生の配置最適化・カラム幅とボタン横並びの維持 */
@media (min-width: 769px) and (max-width: 1080px){
  #top .hero-photo img{
    object-position: center 15% !important;
    transform: none !important;
  }

  /* 2. 左カラムのインセット（案2）：写真との距離感を縮め、中央の余白を解消 */
  #top .hero-intro,
  #top .hero-copy{
    padding-left: clamp(32px, 10vw - 40px, 70px) !important;
    padding-right: clamp(14px, 1.5vw, 20px) !important;
  }

  /* 3. グリッドの左カラム幅：見出し(38px)とボタン2つが余裕をもって収まる幅を確保 */
  #top .hero-grid{
    grid-template-columns: minmax(0, clamp(440px, 55vw, 540px)) 1fr !important;
  }

  /* 4. 料金ボックスも程よくフィット */
  #top .hero-price{
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
  }
}

/* 769px〜880px（小型PC・タブレット横狭幅）：文字サイズ最低値38pxを保証 */
@media (min-width: 769px) and (max-width: 880px){
  #top .hero-title{
    font-size: clamp(34px, 4.0vw, 38px) !important;
    line-height: 1.4 !important;
  }
}

/* 1515px以上：中央に寄りすぎて写真と被るのを防ぐため、インデントを最適化して写真との距離を確保 */
@media (min-width: 1515px){
  #top .hero-intro,
  #top .hero-copy{
    padding-left: 80px !important;
  }
}

/* ============================================
   advisory.html 専用スタイル
   ============================================ */

/* ヒーロー：チェックマーク3点（.ruled-check-list を左寄せで使う） */
#advisory .hero-checks{ margin: 20px 0 28px; }

/* --- お届けするもの：一覧 ＋ 業績レポートのイメージ --- */
.deliver-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: start;
}
.deliver-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.deliver-list li{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.deliver-when{ font-size: var(--fs-small); color: var(--kaki); font-weight: 700; }
.deliver-what{ font-weight: 700; font-size: var(--fs-body); }
.deliver-what > span{
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* 業績レポートのイメージ（様式は未確定のため数字はぼかす） */
.report-mock{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-panel);
  padding: 20px 22px;
  color: var(--paper-dark);
}
.rm-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 2px solid var(--paper-dark);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.rm-head small{ display: block; font-size: 11px; color: var(--ink-soft); }
.rm-head b{ font-size: 17px; }
.rm-head .rm-month{ font-size: 13px; font-weight: 700; text-align: right; }
.rm-table{ width: 100%; border-collapse: collapse; font-size: 12px; }
.rm-table th{
  padding: 6px;
  border-bottom: 1px solid var(--paper-dark);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: right;
}
.rm-table td{ padding: 6px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.rm-table th:first-child,
.rm-table td:first-child{ text-align: left; }
.rm-table td.n{ filter: blur(2.2px); user-select: none; }
.rm-table td.prev{ color: #8FA3B5; }
.rm-table tr.hl td{ background: var(--gray); font-weight: 700; }
.rm-table tr.sub td:first-child{ padding-left: 16px; }
.rm-bars-title{
  margin: 18px 0 10px;
  padding-left: 8px;
  border-left: 3px solid var(--paper-dark);
  font-size: 13px;
  font-weight: 700;
}
.rm-bar{ display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
.rm-bar i{ display: block; height: 12px; background: var(--paper-dark); filter: blur(.6px); }
.rm-bar i.etc{ background: #BFCBD8; }
.rm-caption{ margin-top: 12px; font-size: var(--fs-note); color: var(--ink-soft); text-align: right; }

/* --- 相談事例：ご相談 → 対応 → 結論 --- */
.case-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
}
.case-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.case-card h3{ margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); }
.case-step{ display: grid; grid-template-columns: 72px 1fr; gap: 12px; font-size: 15px; line-height: 1.75; }
.case-step .tag{
  height: fit-content;
  padding: 3px 0;
  border-radius: 3px;
  font-size: var(--fs-note);
  font-weight: 700;
  text-align: center;
}
.case-step .tag--q{ background: var(--gray); color: var(--ink); }
.case-step .tag--do{ background: var(--paper-soft); color: var(--kaki-deep); border: 1px solid var(--kaki); }
.case-step .tag--res{ background: var(--midori); color: #fff; }
.case-card details{
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.case-card summary{ cursor: pointer; color: var(--kaki); font-weight: 700; }
.model-note{ margin-top: 16px; font-size: var(--fs-note); color: var(--ink-soft); }

/* --- 顧問契約が必要か、申告のみで十分か --- */
.fit-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fit-col{ display: flex; flex-direction: column; padding: 24px; border-radius: 6px; }
.fit-col h3{ margin: 0 0 14px; font-size: var(--fs-h3); }
.fit-col ul{ margin: 0; padding-left: 1.2em; line-height: 2; }
.fit-col--adv{ background: var(--col-omakase-bg); border: 2px solid var(--primary); }
.fit-col--self{ background: var(--gray); border: 1px solid var(--col-self-line); }
.fit-link{ margin-top: auto; padding-top: 20px; }
.fit-link a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 4px;
  background: var(--paper);
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.fit-col--adv .fit-link a{ border: 2px solid var(--primary); color: var(--primary); }
.fit-col--adv .fit-link a:hover{ background: var(--primary); color: #fff; }
.fit-col--self .fit-link a{ border: 2px solid var(--paper-dark); color: var(--paper-dark); }
.fit-col--self .fit-link a:hover{ background: var(--paper-dark); color: #fff; }
.fit-link a::after{
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gray) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231B2F47%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%279 18 15 12 9 6%27%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 12px 12px;
  transition: transform .18s ease, background-color .18s ease;
}
.fit-link a:hover::after{ background-color: #FFFFFF; transform: translateX(2px); }
.fit-col--adv .fit-link a:hover::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23D96029%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%279 18 15 12 9 6%27%3E%3C/polyline%3E%3C/svg%3E"); }

/* --- ご相談・やりとりの方法 --- */
.comm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}
.comm-item{ padding: 20px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 6px; }
.comm-item small{ display: block; margin-bottom: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--kaki); }
.comm-item p{ margin: 0; font-weight: 700; }
.comm-item p > span{
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

@media (max-width: 860px){
  .deliver-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .fit-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .deliver-list li{ grid-template-columns: 1fr; gap: 4px; }
}
/* 業績レポートのイメージが狭い画面ではみ出さないように */
.deliver-wrap > *{ min-width: 0; }
.report-mock{ overflow-x: auto; }
@media (max-width: 480px){
  .report-mock{ padding: 16px 14px; }
  .rm-table{ font-size: 11px; }
  .rm-table th,
  .rm-table td{ padding: 5px 3px; }
  .rm-table th:nth-child(3),
  .rm-table td:nth-child(3){ display: none; } /* 前年同月の列は省略 */
  .rm-caption{ text-align: left; } /* 折り返すと右揃えは読みにくいので左揃えに */
}

/* ============================================
   トップページ：ヒーローの特徴3点と入口カード
   ============================================ */
#top .hero-checks{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding: 0;
}
#top .hero-checks li{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper-dark);
  white-space: nowrap;
}
#top .hero-checks .check-icon{
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23D96029%27 stroke-width=%272.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
/* ============================================
   establishment.html：改修分（迷い・時系列・費用の2段階）
   ============================================ */

/* ヒーロー：チェックマーク3点（.ruled-check-list を左寄せで使う） */
#establishment .hero-checks{ margin: 20px 0 28px; }

/* --- 開業前に、よくある迷い --- */
.doubt-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 20px;
}
.doubt-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* 見出しが折り返しても、2行目以降は「Q」の右側から始める（ぶら下げ） */
.doubt-q{ position: relative; margin: 0; padding-left: 36px; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; line-height: 1.5; }
.doubt-q::before{
  content: "Q";
  position: absolute;
  top: calc((1.5em - 26px) / 2);
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper-dark);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
}
.doubt-label{ margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--kaki); }
.doubt-a{ margin: 0; font-size: 15px; line-height: 1.8; }

/* --- 個人での開業か、会社の設立か（時系列＋当事務所が行うこと） --- */
.sched-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
/* 左右のカードで段（見出し・説明・時系列・当事務所が行うこと）の高さを揃える */
.sched-col{
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.sched-col h3{
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 18px;
  font-size: var(--fs-h3);
}
.sched-col h3 span{ font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--kaki); }
.sched-lead{ margin: -12px 0 18px; font-size: var(--fs-small); color: var(--ink-soft); }
.sched-list{ position: relative; margin: 0; padding: 0; list-style: none; }
.sched-list::before{
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 2px;
  background: var(--line-soft);
}
.sched-list li{ position: relative; padding: 0 0 18px 30px; }
.sched-list li:last-child{ padding-bottom: 0; }
.sched-list li::before{
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--primary);
}
.sched-list li.is-key::before{ background: var(--primary); }
.sched-when{ display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--kaki); }
.sched-what{ display: block; margin-top: 2px; font-weight: 700; }
.sched-note{ display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-soft); }
.sched-scope-title{
  margin: 24px 0 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--kaki);
}
.sched-col .scope-list{ margin: 0; }
.sched-foot{ margin-top: 20px; font-size: var(--fs-small); color: var(--ink-soft); }
.sched-foot strong{ color: var(--ink); }

/* --- 費用：① 開業するとき ② 開業してから --- */
.fee-step + .fee-step{ margin-top: 56px; }
.fee-step-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 6px;
  font-size: var(--fs-h3);
  font-weight: 700;
}
.fee-step-num{
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
}
.fee-step-sub{
  padding: 2px 10px;
  border: 1px solid var(--kaki);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--kaki);
}
.fee-sub-note{ margin: 0 0 12px; font-size: var(--fs-small); color: var(--ink-soft); }

/* 初年度特別プランの表（料金ページの表と同じ「記帳の方法」2列） */
.sp-table-wrap{ max-width: 760px; }
.startup-plan-table{ width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.startup-plan-table th,
.startup-plan-table td{ padding: 14px 16px; border-bottom: 1px solid var(--line-soft); text-align: center; }
.startup-plan-table thead th{ background: var(--paper-soft); font-size: 15px; font-weight: 700; line-height: 1.5; }
.startup-plan-table thead th small{ display: block; font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.startup-plan-table thead th.spt-self{ border-bottom: 3px solid var(--col-self-line); }
.startup-plan-table thead th.spt-omakase{ background: var(--col-omakase-th); border-bottom: 3px solid var(--primary); }
.startup-plan-table td.spt-omakase{ background: var(--col-omakase-bg); }
.startup-plan-table .spt-group td{ padding: 0 0 8px; border: none; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.startup-plan-table .spt-group td span{ display: block; padding-top: 6px; border-top: 1px solid var(--line); }
.startup-plan-table tbody th{ font-size: 15px; font-weight: 700; text-align: left; }
.startup-plan-table tbody th .spt-th-sub{ font-size: 0.87em; font-weight: 500; }
.startup-plan-table tbody th small{ display: block; font-size: 12px; font-weight: 500; color: var(--kaki); }
.startup-plan-table tbody td{ font-family: var(--font-serif); font-size: 22px; font-weight: 600; white-space: nowrap; }
.startup-plan-table .spt-u{ margin: 0 2px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; }
.startup-plan-table tr.spt-freee td{ white-space: normal; line-height: 1.5; }
.startup-plan-table .spt-text{ display: block; font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.startup-plan-table .spt-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 12px;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
}
.startup-plan-table .spt-links a{ color: var(--kaki); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

@media (max-width: 860px){
  .sched-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .startup-plan-table th,
  .startup-plan-table td{ padding: 12px 8px; }
  .startup-plan-table thead th,
  .startup-plan-table tbody th{ font-size: 13px; }
  .startup-plan-table tbody td{ font-size: 17px; }
  .startup-plan-table .spt-text{ font-size: 13px; }
  /* 左の項目列を少し広げ、freeeの料金リンクは縦に並べる */
  .startup-plan-table .spt-group td:first-child{ width: 34%; }
  .startup-plan-table .spt-links{ flex-direction: column; align-items: center; gap: 4px; }
}

/* 黄色マーカー（期限など、特に見てほしい語句の強調） */
.ph{ background: #FFF3B0; padding: 0 3px; }

/* ============================================
   tax-audit.html：改修分（連絡が来た方へ・2つのケース）
   ============================================ */

/* ヒーロー：チェックマーク3点＋予約ボタンと電話番号 */
#tax-audit .hero-checks{ margin: 20px 0 28px; }
.hero-actions-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero-actions-row .tel-number{ font-size: var(--fs-h3); font-weight: 700; color: var(--ink); text-decoration: none; }
.hero-actions-row .tel-note{ display: block; font-size: 12px; color: var(--ink-soft); }

/* --- いま連絡が来た方へ --- */
.urgent-box{
  padding: 28px clamp(18px, 3vw, 36px);
  background: var(--paper);
  border: 2px solid var(--primary);
  border-radius: 8px;
}
.urgent-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 6px; }
.urgent-tag{
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.urgent-title{ margin: 0; font-family: var(--font-serif); font-size: var(--fs-h2s); font-weight: 600; }
.urgent-lead{ margin: 0 0 22px; font-size: 15px; color: var(--ink-soft); }
.urgent-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: urgent-step;
}
.urgent-steps li{ padding: 18px 18px 16px; background: var(--paper-soft); border-radius: 6px; counter-increment: urgent-step; }
.urgent-steps li::before{
  content: counter(urgent-step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.urgent-steps b{ display: block; margin-bottom: 4px; font-size: 16px; }
.urgent-steps span{ display: block; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.urgent-prep{
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--line-soft);
  font-size: 14px;
  color: var(--ink-soft);
}
.urgent-prep strong{ color: var(--ink); }

/* --- 顧問契約の有無で、始まり方が違います（.fit-grid / .fit-col を流用） --- */
#tax-audit .fit-col p{ margin: 0; font-size: 15px; line-height: 1.8; }
#tax-audit .fit-col p + p{ margin-top: 10px; }
#tax-audit .fit-col .fit-tag{ display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
#tax-audit .fit-col--adv .fit-tag{ color: var(--primary); }
#tax-audit .fit-col--self .fit-tag{ color: var(--paper-dark); }

/* --- 調査までの流れ：事前／当日／事後の見出し --- */
.flow-phase-head{ margin: 0 0 14px; font-size: var(--fs-lead); font-weight: 600; color: var(--kaki-deep); }
.flow-phase-head + .flow-card-list{ margin-bottom: 28px; }

@media (max-width: 860px){
  .urgent-steps{ grid-template-columns: 1fr; }
}

/* ============================================
   consumption-tax.html：改修分（よくある迷い・費用の2枠）
   ============================================ */

/* ヒーロー：チェックマーク3点（.ruled-check-list を左寄せで使う） */
#consumption-tax .hero-checks{ margin: 20px 0 28px; }

/* --- 費用の目安（.fit-grid / .fit-col を流用） --- */
#consumption-tax .fit-col p{ margin: 0; font-size: 15px; line-height: 1.8; }
#consumption-tax .fit-col .fit-tag{ display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
#consumption-tax .fit-col--adv .fit-tag{ color: var(--primary); }
#consumption-tax .fit-col--self .fit-tag{ color: var(--paper-dark); }

/* ============================================
   トップページ：サービスのカード（アイコン・強みの一言・カード全体を押せる見た目）
   ============================================ */
.teaser-card{
  padding: 22px 26px 20px;
  border: 1.5px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.teaser-card:hover{ border-color: var(--primary); }
.teaser-card h3{ margin-bottom: 10px; }
/* 文章は伸ばさず、余った高さは「詳しく見る」の上に回す */
.teaser-card p{ flex: 0 0 auto; }

/* アイコン＋英字 */
.tc-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tc-icon{
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(27, 47, 71, .08);
  transition: background .2s, transform .2s;
}
.tc-icon svg{ width: 40px; height: 40px; }
.teaser-card:hover .tc-icon{ background: var(--col-omakase-th); transform: rotate(-4deg) scale(1.04); }
.tc-en{ font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--kaki); }

/* 強みの一言 */
.teaser-card p.tc-point{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--primary-deep);
}
.teaser-card p.tc-point::before{
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D96029' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

/* 「詳しく見る」はカード下端の帯に（カード全体がリンクだと伝える） */
.teaser-card .go{
  align-self: stretch;
  justify-content: space-between;
  margin-top: auto;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.teaser-card .go::after{ width: 22px; height: 22px; background-color: var(--paper); background-size: 11px 11px; }
.teaser-card:hover .go{ background: none; box-shadow: none; color: var(--primary-deep); }
.teaser-card:hover .go::after{
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  transform: translateX(3px);
}

/* ============================================
   アイコン：サービスページの SERVICE 横・料金ページの目次と見出し
   （絵柄はトップのサービスのカードと共通）
   ============================================ */
/* サービスページ：SERVICE の右に透かしのように小さく */
.eyebrow-mark{
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -14px 0 -14px 2px; /* 見出しとの間隔を変えない */
  transform: rotate(-8deg);
  opacity: .35;
}
.eyebrow-mark svg{ display: block; width: 100%; height: 100%; }

/* 料金ページ：各セクション見出しの番号の左 */
.sec-eyebrow--icon{ display: flex; align-items: center; gap: 14px; }
/* アイコン・番号・見出しを1行に並べる（説明文などは次の行に全幅で） */
.section-head:has(> .sec-eyebrow--icon){
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 16px;
}
.section-head:has(> .sec-eyebrow--icon) > .sec-eyebrow--icon,
.section-head:has(> .sec-eyebrow--icon) > h2{ margin-top: 0; margin-bottom: 0; }
.section-head:has(> .sec-eyebrow--icon) > :not(.sec-eyebrow--icon):not(h2){ grid-column: 1 / -1; }
.sec-icon{
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(27, 47, 71, .08);
}
.sec-icon svg{ width: 37px; height: 37px; }
/* 番号は目次と同じく、アイコン左上のバッジに */
.sec-icon{ position: relative; }
.section-eyebrow.sec-eyebrow--icon .sec-icon .sec-num{
  position: absolute;
  top: -8px;
  left: -8px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--paper-dark);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* 料金ページ：目次（番号はアイコン左上のバッジに） */
.fee-index a{ padding-left: 16px; padding-right: 16px; }
.fee-index .fi-icon{
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(27, 47, 71, .08);
}
.fee-index .fi-icon svg{ width: 30px; height: 30px; }
.fee-index .fi-icon .fee-num{
  position: absolute;
  top: -7px;
  left: -7px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--paper-dark);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 560px){
  /* スマホは見出しが細くなりすぎるので、アイコンと番号の行の下に見出しを置く */
  .section-head:has(> .sec-eyebrow--icon){ display: block; }
  .section-head:has(> .sec-eyebrow--icon) > .sec-eyebrow--icon{ margin-bottom: 10px; }
  /* 見出しと下の文章の間をあけ、見出しを認識しやすく */
  .section-head:has(> .sec-eyebrow--icon) > h2 + *{ margin-top: 28px; }
  .sec-icon{ width: 44px; height: 44px; border-radius: 11px; }
  .sec-icon svg{ width: 31px; height: 31px; }
}

/* ===== トップ：動画ヒーロー（再生終了またはSKIPでボタンを表示） ===== */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hero.hero--video{ padding: 0 0 clamp(28px, 4vw, 48px); }
/* 旧ヒーロー用の高さ固定（#top .hero）を解除。残すと動画の下が切れる */
#top .hero.hero--video{
  height: auto !important; min-height: 0 !important;
  padding: 0 0 clamp(28px, 4vw, 48px) !important;
}
/* 動画内に文字があるため切り抜かず、16:10のまま画面の高さに収める
   （スマホの横向きなど画面が低いと小さくなりすぎるので、幅は最低560pxにする） */
.hv-stage{
  position: relative;
  width: min(100%, max(calc((100vh - 220px) * 1.6), 560px));
  width: min(100%, max(calc((100svh - 220px) * 1.6), 560px));
  margin: 0 auto;
  overflow: hidden;
}
.hv-media{ position: relative; }
.hv-video{ display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #F3EBDF; cursor: pointer; }
.hero--video.is-ended .hv-video{ cursor: default; }

.hv-skip{
  position: absolute; right: clamp(10px, 1.6vw, 20px); bottom: clamp(10px, 1.6vw, 20px); z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 16px;
  font: 700 12px/1 var(--font-sans, sans-serif); letter-spacing: .14em; color: #fff;
  background: rgba(17, 28, 42, .55);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background-color .2s, opacity .4s;
}
.hv-skip:hover{ background: rgba(17, 28, 42, .8); }
.hv-skip:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
/* 早送り（▶▶）アイコン */
.hv-skip-icon{
  width: 12px; height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 50% 50%, 50% 0, 100% 50%, 50% 100%, 50% 50%, 0 100%);
}
.hero--video.is-ended .hv-skip{ opacity: 0; visibility: hidden; pointer-events: none; }

.hv-actions{ padding: clamp(14px, 3vw, 24px) 16px 0; }
/* PCはボタンが動画に重なるので、再生が終わってから表示する（スマホは動画の下なので最初から表示） */
@media (min-width: 900px){
  .hero--video .hv-actions{
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: opacity .8s ease, transform .8s ease, visibility 0s .8s;
  }
  .hero--video.is-ended .hv-actions{
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .8s ease, transform .8s ease, visibility 0s;
  }
}

/* 画像ボタン（無料相談予約・料金表・開業・顧問） */
.fv-btn{ display: block; transition: transform .25s ease, filter .25s ease; }
.fv-btn picture{ display: contents; }
.fv-btn img{ display: block; width: 100%; height: auto; }
.fv-btn:hover{ filter: brightness(1.06); }
.fv-btn:focus-visible{ outline: 3px solid var(--primary); outline-offset: 3px; }
/* 角丸は画像側にないので付ける */
.fv-card{ border-radius: 4.4%; overflow: hidden; }
.fv-card:hover{ transform: translateY(-3px); }

/* スマホ・タブレット：動画の下に「無料相談予約 → 料金表 → カード2枚」の順に縦に並べる（横幅はカードとそろえる） */
.fv-tabs{
  display: grid; gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.fv-cards{
  display: grid; grid-template-columns: 1fr; gap: 12px;
  max-width: 420px; margin: 12px auto 0;
}
@media (min-width: 600px){
  .fv-tabs{ max-width: 560px; }
  .fv-cards{ grid-template-columns: 1fr 1fr; max-width: 560px; }
}
/* スマホ（600px未満）：カード2枚の代わりに「あなたはどちら？」の1枚画像を画面幅いっぱいに表示 */
.fv-choice{ display: none; }
@media (max-width: 599px){
  /* 画像の下端を次のセクションにそのままつなげる（下の余白をなくす） */
  #top .hero.hero--video{ padding-bottom: 0 !important; }
  .fv-cards{ display: none; }
  .fv-choice{ display: block; position: relative; margin: 20px -16px 0; }
  .fv-choice img{ display: block; width: 100%; height: auto; }
  /* リンクの範囲は画像に対する割合（上：吹き出しの上端〜境目の線、下：境目の線〜下端） */
  .fv-choice-link{ position: absolute; left: 0; right: 0; }
  .fv-choice-establishment{ top: 6.4%; height: 49%; }
  .fv-choice-advisory{ top: 55.4%; bottom: 0; }
  .fv-choice-link:focus-visible{ outline: 3px solid var(--primary); outline-offset: -3px; }
}

/* PC：完成イメージどおり動画の上に重ねる（位置は動画に対する割合） */
@media (min-width: 900px){
  /* 動画の下端を画面の下端に合わせ、次のセクションとの間をあけない（122px＝PCのヘッダーの高さ） */
  #top .hero.hero--video{ padding-bottom: 0 !important; }
  .hv-stage{
    width: min(100%, calc((100vh - 122px) * 1.6));
    width: min(100%, calc((100svh - 122px) * 1.6));
  }
  .hero--video .hv-actions{
    position: absolute; inset: 0; z-index: 3;
    padding: 0;
  }
  .fv-tabs, .fv-cards{ display: contents; }
  .fv-btn{ position: absolute; }
  .fv-reservation{ left: -4.3%; top: 12.9%; width: 34.3%; }
  .fv-reservation:hover{ transform: translateX(6px); }
  .fv-pricing{ left: 90%; top: 5.4%; width: 19.4%; }
  .fv-pricing:hover{ transform: translateX(-6px); }
  .fv-card{ top: 50.6%; width: 26.4%; }
  .fv-establishment{ left: 6.3%; }
  .fv-advisory{ left: 36.3%; }
}
@media (prefers-reduced-motion: reduce){
  .hero--video .hv-actions{ transition: none; transform: none; }
  .fv-btn{ transition: none; }
  .fv-btn:hover{ transform: none; }
}