/*==================================================
  style.css — 所有者不明土地相談室
  スマホファースト（min-width でPC最適化）
==================================================*/

/* ============================================================
   RESET & 変数
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* カラーパレット */
  --c-ink:       #0b1d30;
  --c-navy:      #0f2e4e;
  --c-navy-mid:  #12375c;
  --c-blue:      #1a5c96;
  --c-blue-lt:   #2874bc;
  --c-gold:      #9a6e10;
  --c-gold-mid:  #b07c14;
  --c-gold-lt:   #c99030;
  --c-gold-pale: #fdf4e3;
  --c-green:     #145a3c;
  --c-red:       #9e2020;
  --c-stone:     #3d556b;
  --c-mist:      #b0c4d8;
  --c-line:      #d4e2ee;
  --c-bg:        #f2f6fa;
  --c-bg-alt:    #e8f0f8;
  --c-white:     #ffffff;

  /* タイポグラフィ */
  --f-serif: 'Hiragino Mincho ProN','Yu Mincho','游明朝','Noto Serif JP',Georgia,serif;
  --f-sans:  'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','游ゴシック Medium',YuGothic,'Noto Sans JP',sans-serif;

  /* レイアウト */
  --max-w: 1060px;
  --px:    20px;
  --py:    52px;
  --r:     5px;
  --r-lg:  10px;
  --sh:    0 2px 14px rgba(11,29,48,.09);
  --sh-lg: 0 6px 30px rgba(11,29,48,.13);
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--f-sans); color: var(--c-ink); background: var(--c-bg); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a    { color: var(--c-blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-blue-lt); }
ul, ol { list-style: none; }
img    { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }

/* ============================================================
   レイアウト共通
============================================================ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }

.sec        { padding: var(--py) 0; }
.sec--white { background: var(--c-white); }
.sec--bg    { background: var(--c-bg); }
.sec--navy  { background: var(--c-navy); }
.sec--contact { background: linear-gradient(158deg, var(--c-ink) 0%, var(--c-navy) 100%); }

/* セクションヘッダー */
.sec__head  { margin-bottom: 36px; }
.sec__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--c-blue); margin-bottom: 10px;
}
.sec__kicker::before { content: ''; display: block; width: 14px; height: 2px; background: var(--c-blue); }
.sec--navy  .sec__kicker,
.sec--contact .sec__kicker { color: rgba(255,255,255,.6); }
.sec--navy  .sec__kicker::before,
.sec--contact .sec__kicker::before { background: rgba(255,255,255,.4); }

.sec__title {
  font-family: var(--f-serif);
  font-size: clamp(19px,4vw,26px); font-weight: 600;
  color: var(--c-navy); line-height: 1.45; margin-bottom: 10px;
}
.sec--navy  .sec__title { color: var(--c-white); }
.sec__desc { font-size: 17px; color: var(--c-stone); line-height: 1.85; }
.sec--navy  .sec__desc { color: rgba(255,255,255,.82); }

/* ============================================================
   ボタン
============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-sans); font-size: 15px; font-weight: 700;
  letter-spacing: .04em; min-height: 50px; padding: 12px 22px;
  border-radius: var(--r); border: none; cursor: pointer;
  text-decoration: none; transition: all .22s; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--gold  { background: var(--c-gold);  color: var(--c-white); }
.btn--gold:hover { background: var(--c-gold-lt); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(154,110,16,.3); }
.btn--ghost { background: transparent; color: var(--c-white); border: 1.5px solid rgba(255,255,255,.38); }
.btn--ghost:hover { border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.07); }
.btn--arrow::after { content: '›'; font-size: 20px; line-height: 1; transition: transform .2s; }
.btn--arrow:hover::after { transform: translateX(4px); }

/* ============================================================
   ヘッダー
============================================================ */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(11,29,48,.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: box-shadow .3s;
}
#site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.3); }

.hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px var(--px); }

.hdr__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.hdr__logo img { height: 36px; width: auto; }
.hdr__logo-text { font-family: var(--f-serif); font-size: 14px; color: var(--c-white); letter-spacing: .03em; line-height: 1.3; }
.hdr__logo-text span { display: block; font-family: var(--f-sans); font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; margin-top: 2px; }

.hdr__nav { display: none; }
.hdr__nav a { font-size: 13px; color: rgba(255,255,255,.78); transition: color .2s; }
.hdr__nav a:hover { color: var(--c-white); }

.hdr__cta { font-size: 13px; min-height: 36px; padding: 7px 13px; flex-shrink: 0; }

/* ハンバーガー */
.hamburger { display: flex; flex-direction: column; gap: 5px; width: 28px; min-height: 28px; cursor: pointer; background: none; border: none; padding: 4px; flex-shrink: 0; }
.hamburger span { display: block; height: 2px; background: var(--c-white); border-radius: 2px; }

/* SPドロワー */
.drawer-overlay { display: none; position: fixed; inset: 0; z-index: 550; background: rgba(0,0,0,.5); }
.drawer-overlay.is-open { display: block; }
.drawer { position: fixed; top: 0; right: -280px; width: 280px; height: 100%; z-index: 600; background: var(--c-navy); padding: 66px 20px 20px; display: flex; flex-direction: column; overflow-y: auto; transition: right .28s ease; }
.drawer.is-open { right: 0; }
.drawer a { font-size: 15px; color: rgba(255,255,255,.88); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .2s; }
.drawer a:hover { color: var(--c-white); }
.drawer__close { position: absolute; top: 14px; right: 16px; font-size: 26px; color: rgba(255,255,255,.6); cursor: pointer; background: none; border: none; line-height: 1; }
.drawer__cta { margin-top: 14px; background: var(--c-gold); color: var(--c-white); font-weight: 700; text-align: center; padding: 13px; border-radius: var(--r); border-bottom: none; }

/* パンくず */
.breadcrumb-bar { background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); padding-top: 60px; }
.breadcrumb { padding: 9px 0; font-size: 12px; color: var(--c-stone); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--c-blue); }
.breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   ヒーロー
============================================================ */
#hero {
  min-height: calc(100svh - 60px);
  background: linear-gradient(162deg, var(--c-ink) 0%, var(--c-navy) 44%, var(--c-navy-mid) 100%);
  display: flex; align-items: center; position: relative; overflow: hidden;
  padding: 54px 0 68px;
}
#hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size: 72px 72px; pointer-events: none;
}
#hero::after {
  content: ''; position: absolute; bottom: -60px; right: -60px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(154,110,16,.1) 0%, transparent 65%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(180,210,240,.85); font-weight: 700; margin-bottom: 14px;
}
.hero__eyebrow::before { content: ''; display: block; width: 18px; height: 1px; background: rgba(180,210,240,.6); }

/* h1：視覚的に小さく表示、SEO的に正しい役割を担う */
.hero__h1 { font-family: var(--f-serif); font-size: clamp(13px,3vw,17px); color: rgba(255,255,255,.55); font-weight: 400; line-height: 1.6; margin-bottom: 14px; letter-spacing: .02em; }

.hero__catch { font-family: var(--f-serif); font-size: clamp(24px,7vw,40px); color: var(--c-white); line-height: 1.38; font-weight: 600; letter-spacing: -.015em; margin-bottom: 18px; }
.hero__catch em { font-style: normal; color: rgba(180,210,240,.95); display: block; }

.hero__sub   { font-size: 17px; color: rgba(255,255,255,.88); line-height: 1.9; margin-bottom: 12px; }
.hero__note  { font-size: 10.5px; color: rgba(255,255,255,.38); line-height: 1.7; margin-bottom: 22px; padding-left: 10px; border-left: 2px solid rgba(255,255,255,.14); }
.hero__tags  { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.hero__tags span { font-size: 11px; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 16px; padding: 4px 11px; }
.hero__ctas  { display: flex; flex-wrap: wrap; gap: 10px; }

/* ヒーロー右カード（SPで非表示） */
.hero__card { display: none; }
.hero__card-label { font-size: 10px; letter-spacing: .16em; color: rgba(180,210,240,.85); font-weight: 700; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; gap: 7px; }
.hero__card-label::before { content: ''; display: block; width: 10px; height: 2px; background: rgba(180,210,240,.6); }
.hero__card-dl { margin-bottom: 14px; }
.hero__card-dl dt { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 10px; }
.hero__card-dl dd { font-family: var(--f-serif); font-size: 17px; font-weight: 700; color: var(--c-white); white-space: nowrap; }
.hero__card-dl small { font-size: 10.5px; color: rgba(255,255,255,.44); font-family: var(--f-sans); font-weight: 400; margin-left: 2px; }
.hero__card-sep { height: 1px; background: rgba(255,255,255,.08); margin-top: 10px; }
.hero__card-note { font-size: 10px; color: rgba(255,255,255,.4); line-height: 1.65; }

/* ============================================================
   問題提起
============================================================ */
.problem-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.problem-card { background: var(--c-white); border: 1px solid var(--c-line); border-left: 3px solid var(--c-blue); border-radius: 0 var(--r) var(--r) 0; padding: 16px 18px; transition: box-shadow .2s, border-left-color .2s; }
.problem-card:hover { box-shadow: var(--sh); border-left-color: var(--c-blue); }
.problem-card__num  { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--c-blue); margin-bottom: 6px; text-transform: uppercase; }
.problem-card__q    { font-size: 17px; font-weight: 700; color: var(--c-navy); line-height: 1.5; margin-bottom: 5px; }
.problem-card__desc { font-size: 17px; color: var(--c-stone); line-height: 1.7; }

/* ============================================================
   サービス位置づけ
============================================================ */
.position-box { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; margin-bottom: 18px; }
.position-box__inner { padding: 22px 18px; border-left: 4px solid var(--c-navy); }
.position-box__lead { font-family: var(--f-serif); font-size: clamp(17px,3.5vw,19px); color: var(--c-navy); font-weight: 600; line-height: 1.6; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.position-box__body { font-size: 17px; color: var(--c-ink); line-height: 1.85; margin-bottom: 12px; }
.position-box__body:last-child { margin-bottom: 0; }

.not-list-box { margin: 16px 0; }
.not-list-box__title { font-size: 12px; font-weight: 700; color: var(--c-stone); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); }
.not-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 17px; color: var(--c-stone); padding: 7px 0; border-bottom: 1px dashed var(--c-line); line-height: 1.55; }
.not-list li:last-child { border-bottom: none; }
.not-list li::before { content: '–'; color: var(--c-mist); font-weight: 700; flex-shrink: 0; }

.position-notice { background: rgba(26,92,150,.05); border: 1px solid rgba(26,92,150,.15); border-left: 4px solid var(--c-blue); border-radius: 0 var(--r) var(--r) 0; padding: 13px 15px; font-size: 17px; color: var(--c-navy-mid); line-height: 1.8; }
.position-notice strong { color: var(--c-navy); font-size: 17px; display: block; margin-bottom: 4px; }

/* ============================================================
   役割整理
============================================================ */
.roles-fig { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: var(--c-white); margin-bottom: 20px; }
.roles-fig__others { padding: 20px 18px 16px; border-bottom: 2px solid var(--c-line); }
.roles-fig__label  { font-size: 10.5px; font-weight: 700; color: var(--c-stone); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.roles-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--c-line); align-items: flex-start; }
.roles-row:last-child { border-bottom: none; }
.roles-row__who  { font-size: 17px; font-weight: 700; color: var(--c-navy-mid); flex-shrink: 0; min-width: 80px; }
.roles-row__what { font-size: 17px; color: var(--c-stone); line-height: 1.6; }
.roles-fig__ours { padding: 18px; background: linear-gradient(135deg, var(--c-bg-alt) 0%, var(--c-bg) 100%); }
.roles-fig__badge { display: inline-block; font-size: 10px; font-weight: 700; color: var(--c-blue); background: rgba(26,92,150,.1); border: 1px solid rgba(26,92,150,.2); border-radius: 3px; padding: 2px 8px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
.roles-fig__name  { font-family: var(--f-serif); font-size: 17px; font-weight: 600; color: var(--c-navy); margin-bottom: 5px; }
.roles-fig__role  { font-size: 17px; color: var(--c-navy-mid); line-height: 1.6; margin-bottom: 10px; }
.roles-fig__note  { font-size: 16px; color: var(--c-stone); line-height: 1.7; padding: 9px 11px; background: rgba(255,255,255,.7); border-radius: var(--r); }
.roles-body { font-size: 17px; color: var(--c-stone); line-height: 1.9; margin-top: 20px; }
.roles-body strong { color: var(--c-navy); }

/* ============================================================
   成果物
============================================================ */
.dlv__label { font-size: 17px; font-weight: 700; color: var(--c-navy); margin-bottom: 10px; }
.dlv__list li, .dlv__can li { display: flex; align-items: flex-start; gap: 8px; font-size: 17px; color: var(--c-stone); padding: 8px 0; border-bottom: 1px dashed var(--c-line); line-height: 1.6; }
.dlv__list li:last-child, .dlv__can li:last-child { border-bottom: none; }
.dlv__list li::before { content: '・'; color: var(--c-navy); font-weight: 700; flex-shrink: 0; }
.dlv__can  li::before { content: '✓'; color: var(--c-green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.dlv__notice { background: #e6f3eb; border: 1.5px solid #96cba8; border-radius: var(--r-lg); padding: 14px 16px; font-size: 17px; color: var(--c-navy-mid); line-height: 1.82; margin-top: 20px; }
.dlv__notice strong { color: var(--c-green); display: block; font-size: 17px; margin-bottom: 6px; }

/* ============================================================
   業務フロー
============================================================ */
.flow-list { display: flex; flex-direction: column; }
.flow-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--c-line); }
.flow-item:last-child { border-bottom: none; }
.flow-item__num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-serif); font-size: 16px; font-weight: 700; }
.flow-item__num--blue { background: var(--c-navy); color: var(--c-white); }
.flow-item__num--gold { background: var(--c-blue);  color: var(--c-white); }
.flow-item__num--gray { background: var(--c-stone); color: var(--c-white); }
.flow-item__title { font-size: 17px; font-weight: 700; color: var(--c-navy); margin-bottom: 4px; line-height: 1.45; }
.flow-item__desc  { font-size: 17px; color: var(--c-stone); line-height: 1.7; }
.flow-item__tag   { display: inline-block; font-size: 10px; font-weight: 700; color: var(--c-blue); background: rgba(26,92,150,.1); border: 1px solid rgba(26,92,150,.2); border-radius: 3px; padding: 1px 7px; margin-bottom: 4px; }
.flow-item__tag--gold { color: var(--c-blue); background: rgba(26,92,150,.08); border-color: rgba(26,92,150,.2); }
.flow-divider { margin: 16px 0; padding: 11px 14px; background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--r); font-size: 17px; color: var(--c-stone); text-align: center; }
.flow-divider strong { color: var(--c-navy); }
.flow-after { display: flex; gap: 14px; padding: 16px 0; }

/* ============================================================
   料金
============================================================ */
/* SP: カード型（デフォルト） */
.fee-table { display: none; }
.fee-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.fee-card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px 15px; box-shadow: var(--sh); }
.fee-card__name   { font-size: 17px; font-weight: 700; color: var(--c-navy); margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: 7px; }
.fee-card__name::before { content: ''; display: block; width: 3px; height: 13px; background: var(--c-blue); border-radius: 2px; flex-shrink: 0; }
.fee-card__amount { font-family: var(--f-serif); font-size: 21px; font-weight: 700; color: var(--c-navy); white-space: nowrap; margin-bottom: 6px; }
.fee-card__amount small { font-size: 12px; font-family: var(--f-sans); font-weight: 400; color: var(--c-stone); margin-left: 3px; }
.fee-card__desc   { font-size: 17px; color: var(--c-stone); line-height: 1.7; }

.fee-definition { background: rgba(26,92,150,.04); border: 1px solid rgba(26,92,150,.12); border-left: 4px solid var(--c-blue); border-radius: 0 var(--r) var(--r) 0; padding: 13px 15px; font-size: 17px; color: var(--c-navy-mid); line-height: 1.8; margin-bottom: 12px; }
.fee-definition strong { color: var(--c-navy); font-size: 17px; display: block; margin-bottom: 4px; }
.fee-note { font-size: 16px; color: var(--c-stone); line-height: 1.75; margin-bottom: 20px; }

/* ============================================================
   事例
============================================================ */
.cases-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.case-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 20px 17px; transition: background .2s; }
.case-card:hover { background: rgba(255,255,255,.09); }
.case-card__tag    { display: inline-block; font-size: 10px; font-weight: 700; color: var(--c-blue); background: rgba(26,92,150,.08); border: 1px solid rgba(26,92,150,.2); border-radius: 3px; padding: 2px 8px; letter-spacing: .06em; margin-bottom: 10px; text-transform: uppercase; }
.case-card__title  { font-family: var(--f-serif); font-size: 17px; font-weight: 600; color: var(--c-white); margin-bottom: 13px; line-height: 1.5; }
.case-card__block  { margin-bottom: 9px; }
.case-card__label  { font-size: 10.5px; font-weight: 700; color: var(--c-blue); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.case-card__text   { font-size: 17px; color: rgba(255,255,255,.85); line-height: 1.7; }
.case-card__sep    { height: 1px; background: rgba(255,255,255,.08); margin: 10px 0; border: none; }
.case-card__result { font-size: 17px; color: #8ecfac; line-height: 1.7; padding-left: 11px; border-left: 2px solid #8ecfac; }
.case-card__meta   { margin-top: 10px; font-size: 10.5px; color: rgba(255,255,255,.38); }


/* ============================================================
   問題提起（details/summary UI）
============================================================ */
.case-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

#problem .case-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 0;
  box-shadow: var(--sh);
}
#problem .case-card:hover { background: var(--c-white); }
#problem .case-card__details { display: block; }
#problem .case-card__summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: background .18s ease;
}
#problem .case-card__summary:hover { background: #f8fbfe; }
#problem .case-card__summary::-webkit-details-marker { display: none; }
#problem .case-card__num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--f-serif);
  font-size: 14px;
  font-weight: 700;
}
#problem .case-card__summary-inner { flex: 1; min-width: 0; }
#problem .case-card__label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 5px;
  line-height: 1.55;
}
#problem .case-card__subdesc {
  display: block;
  font-size: 17px;
  color: var(--c-stone);
  line-height: 1.7;
}
#problem .case-card__toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--c-mist);
  position: relative;
  margin-top: 2px;
}
#problem .case-card__toggle::before,
#problem .case-card__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--c-blue);
  transform: translate(-50%, -50%);
}
#problem .case-card__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
#problem .case-card__details[open] .case-card__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
#problem .case-card__details[open] .case-card__summary {
  background: #f6f9fc;
  padding-bottom: 14px;
}
#problem .case-card__body {
  border-top: 1px solid var(--c-line);
  padding: 2px 18px 18px;
}
#problem .case-card__body-title {
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-navy);
  line-height: 1.55;
  margin: 16px 0 10px;
}
#problem .case-card__body p {
  font-size: 17px;
  color: var(--c-stone);
  line-height: 1.85;
  margin-bottom: 10px;
}
#problem .case-card__body p:last-child { margin-bottom: 0; }

/* ============================================================
   FAQ
============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 4px; }
.faq-item { border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; background: var(--c-white); transition: border-color .2s; }
.faq-item.is-open { border-color: var(--c-blue); }
.faq-item__q {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 15px; cursor: pointer; user-select: none;
  transition: background .15s; min-height: 50px;
  width: 100%; background: none; border: none; text-align: left;
}
.faq-item__q:hover { background: #f2f7fc; }
.faq-item__badge { flex-shrink: 0; font-family: var(--f-serif); font-size: 14px; font-weight: 700; color: var(--c-blue); margin-top: 1px; }
.faq-item__text  { flex: 1; font-size: 17px; font-weight: 600; color: var(--c-navy); line-height: 1.5; }
.faq-item__icon  {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--c-mist);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--c-blue); transition: transform .22s, background .2s, border-color .2s; margin-top: 2px;
}
.faq-item__icon::after { content: '+'; font-weight: 300; }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }
.faq-item__a { display: none; padding: 0 15px 13px 43px; font-size: 17px; color: var(--c-stone); line-height: 1.85; border-top: 1px solid var(--c-line); }
.faq-item.is-open .faq-item__a { display: block; }
.faq-item__a p { padding-top: 10px; }

/* ============================================================
   フォームセクション
============================================================ */
.contact-intro { font-size: 17px; color: rgba(255,255,255,.82); line-height: 1.9; margin-top: 10px; margin-bottom: 28px; }

/* 3ステップ */
.steps { display: flex; flex-direction: column; margin: 22px 0; }
.step  { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.step:last-child { border-bottom: none; }
.step__num   { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--c-blue); color: var(--c-white); font-family: var(--f-serif); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.step__title { font-size: 17px; font-weight: 700; color: var(--c-white); margin-bottom: 3px; }
.step__desc  { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.6; }

/* 安心材料 */
.assurances { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 16px 15px; margin: 18px 0; display: flex; flex-direction: column; }
.assurances li { display: flex; align-items: flex-start; gap: 8px; font-size: 17px; color: rgba(255,255,255,.9); padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.08); line-height: 1.6; }
.assurances li:last-child { border-bottom: none; }
.assurances li::before { content: '✓'; color: var(--c-blue); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* フォームカード */
.form-card { background: var(--c-white); border-radius: var(--r-lg); padding: 22px 18px; box-shadow: var(--sh-lg); }
.form-card__title { font-family: var(--f-serif); font-size: 17px; color: var(--c-navy); font-weight: 600; margin-bottom: 5px; }
.form-card__sub   { font-size: 17px; color: var(--c-stone); line-height: 1.7; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }

.form-grid { display: grid; grid-template-columns: 1fr; }
.f-row  { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.f-row--full { grid-column: 1 / -1; }
.f-label { font-size: 13px; font-weight: 600; color: var(--c-navy-mid); display: flex; align-items: center; gap: 5px; }
.f-req   { font-size: 9.5px; background: var(--c-red);   color: var(--c-white); padding: 1px 5px; border-radius: 2px; }
.f-opt   { font-size: 9.5px; background: var(--c-stone); color: var(--c-white); padding: 1px 5px; border-radius: 2px; }

/* font-size 16px 以上（iOS ズーム防止） */
.f-ctrl {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--c-line); border-radius: var(--r);
  font-family: var(--f-sans); font-size: 16px; color: var(--c-navy-mid);
  background: var(--c-bg); transition: border-color .2s, box-shadow .2s;
  outline: none; -webkit-appearance: none; appearance: none;
}
select.f-ctrl { appearance: auto; -webkit-appearance: auto; }
.f-ctrl:focus { border-color: var(--c-blue); background: var(--c-white); box-shadow: 0 0 0 3px rgba(26,92,150,.1); }
textarea.f-ctrl { resize: vertical; min-height: 80px; }
.f-err { display: none; font-size: 12px; color: var(--c-red); margin-top: 3px; }
.f-err.is-show { display: block; }

/* 添付ファイル */
.file-section       { background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px 15px; margin: 16px 0; }
.file-section__title { font-size: 14px; font-weight: 700; color: var(--c-navy); margin-bottom: 5px; }
.file-section__note  { font-size: 11px; color: var(--c-stone); line-height: 1.65; margin-bottom: 14px; padding: 7px 9px; background: rgba(26,92,150,.04); border-left: 3px solid var(--c-blue); border-radius: 0 var(--r) var(--r) 0; }
.file-grid  { display: grid; grid-template-columns: 1fr; gap: 10px; }
.file-row   { display: flex; flex-direction: column; gap: 4px; }
.file-label { font-size: 12.5px; font-weight: 600; color: var(--c-navy-mid); display: flex; align-items: center; gap: 5px; }
.f-file     { width: 100%; padding: 8px 10px; border: 1.5px dashed var(--c-mist); border-radius: var(--r); background: var(--c-white); font-family: var(--f-sans); font-size: 14px; color: var(--c-navy-mid); cursor: pointer; transition: border-color .2s; }
.f-file:hover { border-color: var(--c-blue); }

/* 同意 */
.form-agree { margin: 16px 0; background: rgba(26,92,150,.04); border: 1px solid rgba(26,92,150,.15); border-radius: var(--r); padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; }
.agree-row  { display: flex; align-items: flex-start; gap: 9px; }
.agree-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--c-blue); cursor: pointer; }
.agree-label { font-size: 13px; color: var(--c-navy-mid); line-height: 1.65; cursor: pointer; }
.agree-label a { color: var(--c-blue); text-decoration: underline; }

.form-notice      { font-size: 11px; color: var(--c-stone); line-height: 1.75; padding: 10px 12px; background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--r); margin-bottom: 12px; }
.form-err-summary { display: none; padding: 10px 12px; background: #fdf0f0; border: 1px solid #d8a4a4; border-radius: var(--r); font-size: 13px; color: var(--c-red); line-height: 1.7; margin-bottom: 12px; }
.form-err-summary.is-show { display: block; }

.btn-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 54px; padding: 14px 20px;
  background: var(--c-gold); color: var(--c-white);
  font-size: 15.5px; font-weight: 700; font-family: var(--f-sans);
  letter-spacing: .06em; border: none; border-radius: var(--r);
  cursor: pointer; transition: all .22s;
}
.btn-submit:hover  { background: var(--c-gold-lt); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(154,110,16,.28); }
.btn-submit::after { content: '›'; font-size: 22px; transition: transform .2s; }
.btn-submit:hover::after { transform: translateX(4px); }
.btn-submit:disabled {
  background: var(--c-stone) !important; /* グレーに変更 */
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  transition: background 0.3s ease; /* 有効になった時にスムーズに色を変える */
}

/* ============================================================
   中段CTA
============================================================ */
.mid-cta { text-align: center; margin-top: 36px; }
.mid-cta__note { margin-top: 8px; font-size: 11px; color: var(--c-stone); }
.mid-cta__note--light { color: rgba(255,255,255,.45); }

/* ============================================================
   フッター
============================================================ */
#site-footer  { background: var(--c-ink); color: rgba(255,255,255,.6); padding: 42px 0 22px; }
.footer__inner { margin-bottom: 22px; }
.footer__logo  { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; text-decoration: none; }
.footer__logo img { height: 32px; width: auto; }
.footer__logo span { font-family: var(--f-serif); font-size: 15px; color: var(--c-white); }
.footer__tagline   { font-size: 12.5px; color: rgba(255,255,255,.5); margin-bottom: 12px; line-height: 1.6; }
.footer__info      { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.8; margin-bottom: 14px; }
.footer__info-link { color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; }
.footer__info-link:hover { color: var(--c-white); }
.footer__disclaimer { font-size: 12.5px; line-height: 1.9; color: rgba(255,255,255,.5); padding: 11px 13px; background: rgba(255,255,255,.03); border-left: 2px solid rgba(255,255,255,.1); margin-bottom: 20px; }
.footer__nav   { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 18px; }
.footer__nav a { color: rgba(255,255,255,.6); font-size: 13px; transition: color .2s; }
.footer__nav a:hover { color: var(--c-white); }
.footer__copy  { border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,.4); }

/* ============================================================
   スクロールアニメーション
============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-on { opacity: 1; transform: none; }

/* ============================================================
   レスポンシブ: 640px+
============================================================ */
@media (min-width: 640px) {
  :root { --px: 28px; --py: 68px; }
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .case-grid    { grid-template-columns: 1fr 1fr; }
  .cases-grid   { grid-template-columns: 1fr 1fr; }
  .form-card    { padding: 32px 28px; }
  .file-grid    { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   レスポンシブ: 960px+（PC最適化）
============================================================ */
@media (min-width: 960px) {
  :root { --py: 88px; }

  /* ヘッダー */
  .hdr__nav { display: flex; align-items: center; gap: 20px; }
  .hamburger { display: none; }
  .hdr__cta  { font-size: 14px; }

  /* ヒーロー */
  .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
  .hero__card  { display: block; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 26px 22px; backdrop-filter: blur(6px); }

  /* 問題提起 */
  .problem-grid { grid-template-columns: repeat(3, 1fr); }
  .case-grid    { grid-template-columns: repeat(2, 1fr); }

  /* 役割整理図 */
  .roles-fig { display: grid; grid-template-columns: 1fr 1fr; }
  .roles-fig__others { border-bottom: none; border-right: 2px solid var(--c-line); }

  /* フロー */
  .flow-list { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
  .flow-list::before { content: ''; position: absolute; top: 20px; left: calc(100%/14); right: calc(100%/14); height: 2px; background: linear-gradient(90deg, var(--c-navy), var(--c-mist)); z-index: 0; }
  .flow-item { flex-direction: column; align-items: center; text-align: center; padding: 0 6px; border-bottom: none; position: relative; z-index: 1; }
  .flow-item__num { margin-bottom: 11px; }
  .flow-divider { grid-column: 1 / -1; }
  .flow-after { display: grid; grid-template-columns: calc(100%/7) 1fr; gap: 6px; }

  /* 料金：テーブル切り替え */
  .fee-cards { display: none; }
  .fee-table {
    display: table; width: 100%; border-collapse: collapse;
    background: var(--c-white); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; margin-bottom: 18px;
  }
  .fee-table th { background: var(--c-navy); color: var(--c-white); padding: 12px 18px; text-align: left; font-size: 12.5px; letter-spacing: .06em; font-weight: 600; }
  .fee-table td { padding: 15px 18px; border-bottom: 1px solid var(--c-line); font-size: 17px; color: var(--c-navy-mid); vertical-align: top; line-height: 1.7; }
  .fee-table tr:last-child td { border-bottom: none; }
  .fee-table td:first-child  { font-weight: 700; color: var(--c-navy); white-space: nowrap; min-width: 150px; }
  .fee-table td:nth-child(2) { white-space: nowrap; min-width: 140px; }
  .fee-table__amount { font-family: var(--f-serif); font-size: 20px; font-weight: 700; color: var(--c-navy); white-space: nowrap; }

  /* 事例 */
  .cases-grid { grid-template-columns: repeat(3, 1fr); }

  /* フォーム */
  .form-grid { grid-template-columns: 1fr 1fr; gap: 13px 20px; }
  .form-card { padding: 44px; }

  /* フッター */
  .footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
  .footer__nav   { flex-direction: column; align-items: flex-end; gap: 10px; }
}


/* ============================================================
   ハニポ
============================================================ */
.f-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}
/* =========================================
   Flow Visual
========================================= */
.flow-visual {
  margin-top: 40px;
}

.flow-zone {
  position: relative;
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 28px;
  border: 2px solid transparent;
}

.flow-zone--ours {
  background: #f7fbff;
  border-color: #2d6ea3;
}

.flow-zone--legal {
  background: #fff8f4;
  border-color: #b87432;
}

.flow-zone__label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.flow-zone--ours .flow-zone__label {
  background: #2d6ea3;
  color: #fff;
}

.flow-zone--legal .flow-zone__label {
  background: #b87432;
  color: #fff;
}

.flow-zone__sub {
  margin-bottom: 24px;
  font-size: 17px;
  color: #2d3b4a;
}

.flow-steps {
  display: grid;
  gap: 14px;
}

.flow-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  background: #fff;
  border: 1px solid #d9e3ec;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.flow-zone--legal .flow-step {
  border-color: #ead8c7;
}

.flow-step--accent {
  border-width: 2px;
}

.flow-zone--ours .flow-step--accent {
  border-color: #2d6ea3;
  background: #fafdff;
}

.flow-step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: #12385a;
}

.flow-zone--legal .flow-step__num {
  background: #8a5728;
}

.flow-step__body h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.5;
  color: #0f2d46;
}

.flow-zone--legal .flow-step__body h3 {
  color: #5c3a1d;
}

.flow-step__body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #1e2d3d;
}

.flow-arrow {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #3d556b;
}

.flow-branch {
  margin-top: 22px;
  padding: 18px;
  border-radius: 16px;
}

.flow-branch__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.flow-branch__arrow {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}

.flow-branch__box {
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
}

.flow-branch__box strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}

.flow-branch__box p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
}

.flow-branch--success {
  background: #eaf5ff;
  border: 1px solid #b8d6ef;
}

.flow-branch--success .flow-branch__title,
.flow-branch--success .flow-branch__arrow,
.flow-branch--success .flow-branch__box strong {
  color: #1e5d8f;
}

.flow-branch--court {
  background: #fff1e8;
  border: 1px solid #ebc8ac;
}

.flow-branch--court .flow-branch__title,
.flow-branch--court .flow-branch__arrow,
.flow-branch--court .flow-branch__box strong {
  color: #9a5720;
}

.flow-divider-center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 22px 0 28px;
  text-align: center;
}

.flow-divider-center span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 17px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .flow-zone {
    padding: 20px 16px;
  }

  .flow-step {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .flow-step__num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .flow-step__body h3 {
    font-size: 17px;
  }

  .flow-step__body p,
  .flow-zone__sub,
  .flow-branch__box p {
    font-size: 17px;
  }
}

/* =========================================
   Pre Flow
========================================= */
.pre-flow {
  margin-top: 40px;
}

.pre-flow__group {
  border-radius: 20px;
  padding: 28px 24px;
}

.pre-flow__group + .pre-flow__group {
  margin-top: 0;
}

.pre-flow__group--basic {
  background: #ffffff;
  border: 1px solid #d8e1ea;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.pre-flow__group--ours {
  background: #f7fbff;
  border: 2px solid #2d6ea3;
}

.pre-flow__label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.pre-flow__group--basic .pre-flow__label {
  background: #e8eef4;
  color: #1e2d3d;
}

.pre-flow__group--ours .pre-flow__label {
  background: #2d6ea3;
  color: #fff;
}

.pre-flow__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}

.pre-flow__steps--stack {
  grid-template-columns: 1fr;
}

.pre-flow__step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  background: #fff;
  border: 1px solid #d8e1ea;
  border-radius: 16px;
  padding: 18px;
}

.pre-flow__step--stuck {
  border: 2px solid #94a3b8;
  background: #f8fafc;
}

.pre-flow__step--accent {
  border: 2px solid #2d6ea3;
  background: #ffffff;
}

.pre-flow__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #12385a;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.pre-flow__step--stuck .pre-flow__num {
  background: #64748b;
}

.pre-flow__step--accent .pre-flow__num {
  background: #2d6ea3;
}

.pre-flow__body h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.5;
  color: #0f2d46;
}

.pre-flow__body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #1e2d3d;
}

.pre-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #3d556b;
}

.pre-flow__arrow--down {
  padding: 6px 0;
}

.pre-flow__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}

.pre-flow__connector span {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #eef2f7;
  color: #1e2d3d;
  font-size: 17px;
  font-weight: 700;
}

.pre-flow__connector-arrow {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  color: #3d556b;
  line-height: 1;
}

.pre-flow__result-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.pre-flow__result {
  border-radius: 16px;
  padding: 18px;
  background: #fff;
}

.pre-flow__result strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.5;
}

.pre-flow__result p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
}

.pre-flow__result--success {
  border: 1px solid #b8d6ef;
  background: #eaf5ff;
}

.pre-flow__result--success strong {
  color: #1e5d8f;
}

.pre-flow__result--next {
  border: 1px solid #ead8c7;
  background: #fff6ef;
}

.pre-flow__result--next strong {
  color: #9a5720;
}

@media (max-width: 900px) {
  .pre-flow__steps {
    grid-template-columns: 1fr;
  }

  .pre-flow__arrow {
    transform: rotate(90deg);
    padding: 0;
  }

  .pre-flow__result-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pre-flow__group {
    padding: 20px 16px;
  }

  .pre-flow__step {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .pre-flow__num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .pre-flow__body h3 {
    font-size: 17px;
  }

  .pre-flow__body p,
  .pre-flow__result p {
    font-size: 17px;
  }
}

/* =========================================
   Flow Scope
========================================= */
.flow-scope {
  margin-top: 40px;
}

.flow-scope__block {
  border-radius: 20px;
  padding: 28px 24px;
}

.flow-scope__block--basic {
  background: #ffffff;
  border: 1px solid #d8e1ea;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.flow-scope__block--ours {
  background: #f7fbff;
  border: none;   /* ←これ追加 */
}

.flow-scope__block--court {
  background: #fff8f4;
  border: 2px solid #b87432;
}

.flow-scope__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.flow-scope__block--basic .flow-scope__label {
  background: #e8eef4;
  color: #1e2d3d;
}

.flow-scope__block--ours .flow-scope__label {
  background: #2d6ea3;
  color: #fff;
}

.flow-scope__block--court .flow-scope__label {
  background: #b87432;
  color: #fff;
}

.flow-scope__sub {
  margin-bottom: 22px;
  font-size: 17px;
  line-height: 1.8;
  color: #2d3b4a;
}

.flow-scope__steps {
  display: grid;
  gap: 14px;
}

.flow-scope__steps--h {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.flow-scope__steps--v {
  grid-template-columns: 1fr;
}

.flow-scope__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  background: #fff;
  border: 1px solid #d9e3ec;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.flow-scope__block--court .flow-scope__step {
  border-color: #ead8c7;
}

.flow-scope__step--stuck {
  background: #f8fafc;
  border: 2px solid #94a3b8;
}

.flow-scope__step--accent {
  border: 2px solid #2d6ea3;
  background: #fff;
}

.flow-scope__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: #12385a;
}

.flow-scope__step--stuck .flow-scope__num {
  background: #64748b;
}

.flow-scope__step--accent .flow-scope__num {
  background: #2d6ea3;
}

.flow-scope__block--court .flow-scope__num {
  background: #8a5728;
}

.flow-scope__body h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.5;
  color: #0f2d46;
}

.flow-scope__block--court .flow-scope__body h3 {
  color: #5c3a1d;
}

.flow-scope__body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #1e2d3d;
}

.flow-scope__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #3d556b;
}

.flow-scope__arrow--down {
  padding: 6px 0;
}

.flow-scope__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}

.flow-scope__connector span {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #eef2f7;
  color: #1e2d3d;
  font-size: 17px;
  font-weight: 700;
}

.flow-scope__connector--legal span {
  background: #fff1e8;
  color: #8a5728;
}

.flow-scope__connector-arrow {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #3d556b;
}

.flow-scope__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.flow-scope__branch {
  border-radius: 16px;
  padding: 18px;
}

.flow-scope__branch-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.flow-scope__branch-arrow {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}

.flow-scope__branch-box {
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
}

.flow-scope__branch-box strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.5;
}

.flow-scope__branch-box p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
}

.flow-scope__branch--direct {
  background: #eaf5ff;
  border: 1px solid #b8d6ef;
}

.flow-scope__branch--direct .flow-scope__branch-title,
.flow-scope__branch--direct .flow-scope__branch-arrow,
.flow-scope__branch--direct .flow-scope__branch-box strong {
  color: #1e5d8f;
}

.flow-scope__branch--legal {
  background: #fff1e8;
  border: 1px solid #ebc8ac;
}

.flow-scope__branch--legal .flow-scope__branch-title,
.flow-scope__branch--legal .flow-scope__branch-arrow,
.flow-scope__branch--legal .flow-scope__branch-box strong {
  color: #9a5720;
}

.flow-scope__note {
  margin-top: 16px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--c-stone);
}

@media (max-width: 900px) {
  .flow-scope__steps--h {
    grid-template-columns: 1fr;
  }

  .flow-scope__arrow {
    transform: rotate(90deg);
    padding: 0;
  }

  .flow-scope__branches {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .flow-scope__block {
    padding: 20px 16px;
  }

  .flow-scope__step {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .flow-scope__num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .flow-scope__body h3 {
    font-size: 17px;
  }

  .flow-scope__body p,
  .flow-scope__sub,
  .flow-scope__branch-box p {
    font-size: 17px;
  }
}
/* =========================================
   Flow Scope
========================================= */
.flow-scope {
  margin-top: 40px;
}

.flow-scope__frame {
  position: relative;
  border-radius: 24px;
  padding: 28px 24px;
  margin-bottom: 28px;
}

.flow-scope__frame--ours {
  background: #f7fbff;
  border: 2px solid #2d6ea3;
}

.flow-scope__frame-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #12385a;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(18, 56, 90, 0.18);
}

.flow-scope__frame-range {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #d7ebfb;
  color: #12385a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.flow-scope__frame-desc {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.8;
  color: #2d3b4a;
}

.flow-scope__group {
  border-radius: 18px;
  padding: 22px 18px;
}

.flow-scope__group + .flow-scope__group {
  margin-top: 18px;
}

.flow-scope__group--basic {
  background: #ffffff;
  border: 1px solid #d8e1ea;
}

.flow-scope__group--original {
  background: #eef7ff;
  border: 2px solid #7fb3df;
}

.flow-scope__group-label {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.flow-scope__group--basic .flow-scope__group-label {
  background: #e8eef4;
  color: #1e2d3d;
}

.flow-scope__group-label--original {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e5d8f 0%, #2d6ea3 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(45, 110, 163, 0.22);
}

.flow-scope__group-label-main {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.flow-scope__group-label-sub {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.flow-scope__steps {
  display: grid;
  gap: 14px;
}

.flow-scope__steps--h {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.flow-scope__steps--v {
  grid-template-columns: 1fr;
}

.flow-scope__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  background: #fff;
  border: 1px solid #d9e3ec;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.flow-scope__step--stuck {
  background: #f8fafc;
  border: 2px solid #94a3b8;
}

.flow-scope__step--accent {
  border: 2px solid #2d6ea3;
  background: #fff;
}

.flow-scope__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: #12385a;
}

.flow-scope__step--stuck .flow-scope__num {
  background: #64748b;
}

.flow-scope__step--accent .flow-scope__num {
  background: #2d6ea3;
}

.flow-scope__court .flow-scope__num {
  background: #8a5728;
}

.flow-scope__body h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.5;
  color: #0f2d46;
}

.flow-scope__court .flow-scope__body h3 {
  color: #5c3a1d;
}

.flow-scope__body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #1e2d3d;
}

.flow-scope__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #3d556b;
}

.flow-scope__arrow--down {
  padding: 6px 0;
}

.flow-scope__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}

.flow-scope__connector span {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #eef2f7;
  color: #1e2d3d;
  font-size: 17px;
  font-weight: 700;
}

.flow-scope__connector-arrow {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #3d556b;
}


.flow-scope__message strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.5;
  color: #1e5d8f;
}

.flow-scope__message p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #1e2d3d;
}

.flow-scope__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.flow-scope__branch {
  border-radius: 16px;
  padding: 18px;
}

.flow-scope__branch-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.flow-scope__branch-arrow {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}

.flow-scope__branch-box {
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
}

.flow-scope__branch-box strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.5;
}

.flow-scope__branch-box p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
}

.flow-scope__branch--direct {
  background: #eaf5ff;
  border: 1px solid #b8d6ef;
}

.flow-scope__branch--direct .flow-scope__branch-title,
.flow-scope__branch--direct .flow-scope__branch-arrow,
.flow-scope__branch--direct .flow-scope__branch-box strong {
  color: #1e5d8f;
}

.flow-scope__branch--legal {
  background: #fff1e8;
  border: 1px solid #ebc8ac;
}

.flow-scope__branch--legal .flow-scope__branch-title,
.flow-scope__branch--legal .flow-scope__branch-arrow,
.flow-scope__branch--legal .flow-scope__branch-box strong {
  color: #9a5720;
}

.flow-scope__court {
  border-radius: 20px;
  padding: 24px 20px;
  background: #fff8f4;
  border: 2px solid #b87432;
}

.flow-scope__court-label {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #b87432;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.flow-scope__court-steps {
  display: grid;
  gap: 14px;
}

.flow-scope__note {
  margin-top: 16px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--c-stone);
}

@media (max-width: 900px) {
  .flow-scope__steps--h {
    grid-template-columns: 1fr;
  }

  .flow-scope__arrow {
    transform: rotate(90deg);
    padding: 0;
  }

  .flow-scope__branches {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .flow-scope__frame,
  .flow-scope__court {
    padding: 20px 16px;
  }

  .flow-scope__group {
    padding: 16px 14px;
  }

  .flow-scope__step {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .flow-scope__num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .flow-scope__body h3 {
    font-size: 17px;
  }

  .flow-scope__body p,
  .flow-scope__frame-desc,
  .flow-scope__message p,
  .flow-scope__branch-box p {
    font-size: 17px;
  }

  .flow-scope__message strong,
  .flow-scope__branch-box strong {
    font-size: 16px;
  }
}


/* =========================================================
CASEセクション UI改善（クリックしやすさ・視認性向上）
========================================================= */

/* summary全体 */
.case-card__summary {
  cursor: pointer;
  padding: 16px 14px;
  border-radius: 8px;
  border: 1px solid #eee;
  transition: all 0.2s ease;
}

/* ホバー時（PC） */
.case-card__summary:hover {
  background: #f7f7f7;
  border-color: #ddd;
}

/* 番号 */
.case-card__num {
  font-size: 14px;
  font-weight: 700;
  margin-right: 8px;
  color: #999;
}

/* タイトル（最重要） */
.case-card__label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: #222;
}

/* サブ説明 */
.case-card__subdesc {
  display: block;
  font-size: 17px;
  color: #3d556b;
  margin-top: 4px;
  line-height: 1.6;
}

/* ▶トグルアイコン */
.case-card__toggle {
  font-size: 16px;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

/* 開いたとき回転 */
.case-card__details[open] .case-card__toggle {
  transform: rotate(90deg);
}

/* 開いた後の本文 */
.case-card__body {
  padding: 12px 14px 16px;
}

/* =========================================================
スマホ最適化
========================================================= */
@media (max-width: 768px) {

  .case-card__summary {
    padding: 14px 12px;
  }

  .case-card__label {
    font-size: 17px;
  }

  .case-card__subdesc {
    font-size: 17px;
  }
}
.case-card__summary:active {
  transform: scale(0.98);
}

/* =========================================================
CASEカード UI最終調整（クリック性・視認性・操作感）
#problem配下限定（他に影響なし）
========================================================= */

/* カード全体 */
#problem .case-card {
  border: 1.5px solid #dfe5ec;              /* 枠を強く */
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);    /* 軽く浮かせる */
  transition: all 0.2s ease;
}

/* ホバー時（押せる感） */
#problem .case-card:hover {
  border-color: var(--c-blue);              /* 枠色変化 */
  transform: translateY(-2px);              /* 浮く */
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* summary（クリックエリア） */
#problem .case-card__summary {
  cursor: pointer;
  padding: 16px 14px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

/* summaryホバー */
#problem .case-card__summary:hover {
  background: #eef5fb;
}

/* 番号 */
#problem .case-card__num {
  font-size: 14px;
  font-weight: 700;
  margin-right: 8px;
  color: #999;
}

/* タイトル（主役） */
#problem .case-card__label {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
}

/* サブ説明 */
#problem .case-card__subdesc {
  display: block;
  font-size: 17px;
  color: #3d556b;
  margin-top: 4px;
  line-height: 1.6;
}

/* ▶トグルボタン */
#problem .case-card__toggle {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--c-blue);
  border-radius: 50%;
  position: relative;
  margin-left: 8px;
  transition: all 0.2s ease;
}

/* ▶中の矢印（横線・縦線） */
#problem .case-card__toggle::before,
#problem .case-card__toggle::after {
  content: "";
  position: absolute;
  background: var(--c-blue);
}

/* 横線 */
#problem .case-card__toggle::before {
  width: 10px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 縦線（閉じてる時だけ） */
#problem .case-card__toggle::after {
  width: 2px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 開いたら「−」にする */
#problem .case-card__details[open] .case-card__toggle::after {
  display: none;
}

/* 本文 */
#problem .case-card__body {
  padding: 12px 14px 16px;
}

/* =========================================================
スマホ最適化
========================================================= */
@media (max-width: 768px) {

  #problem .case-card__summary {
    padding: 14px 12px;
  }

  #problem .case-card__label {
    font-size: 17px;
  }

  #problem .case-card__subdesc {
    font-size: 17px;
  }
}



/* =========================================
  独自調査（差別化ブロック）
========================================= */
.recommended-flow__step--unique {
  border: 2px solid #d4af37; /* ゴールド */
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.08),
    rgba(212, 175, 55, 0.02)
  );
  position: relative;
}

/* 左アクセントバー */
.recommended-flow__step--unique::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  background: #d4af37;
  border-radius: 4px 0 0 4px;
}

/* タイトルを強調 */
.recommended-flow__step--unique .recommended-flow__title {
  color: #b8962e;
  font-weight: 700;
  font-size: 1.15rem;
}

/* 番号も少し強く */
.recommended-flow__step--unique .recommended-flow__num {
  background: #d4af37;
  color: #fff;
  font-weight: bold;
}


/* ===== 独自調査エリア（④⑤）強調 ===== */

/* グループ全体 */
.flow-scope__group--original {
  background: linear-gradient(135deg, #fff9e6, #fff);
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 20px;
}

/* ラベル */
.flow-scope__group-label--original {
  color: #b8962e;
  font-weight: bold;
}

/* ステップ */
.flow-scope__step--unique {
  border: 2px solid #d4af37;
  background: #fffdf5;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

/* ホバー */
.flow-scope__step--unique:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}

/* 番号 */
.flow-scope__step--unique .flow-scope__num {
  background: #d4af37;
  color: #fff;
}

/* 差別化ラベル */
.flow-scope__highlight {
  color: #b8962e;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.flow-scope__court-inner {
  max-width: 960px;
  margin: 0 auto;
}

.flow-scope__step--court {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.flow-scope__message {
  font-size: 17px;
  line-height: 1.6;
  margin-top: 16px;
}
.flow-scope__message strong {
  font-size: 17px;
  font-weight: 600;
}

/* ============================================================
   Flow Order v2 追記CSS
   index.html 内の fo2-* クラス用
============================================================ */

/* ============================================================
   分岐診断セクション（diag）
============================================================ */
.diag { padding-top: 56px; padding-bottom: 56px; }

.diag__body {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.diag__q {
  border: none;
  padding: 0;
  margin: 0;
}

.diag__q-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
  margin-bottom: 14px;
  line-height: 1.5;
}

.diag__q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-blue, #1a5c96);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.diag__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.diag__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--c-line, #d4e2ee);
  border-radius: 10px;
  cursor: pointer;
  font-size: 17px;
  color: var(--c-navy, #0f2e4e);
  background: #fff;
  transition: border-color .2s, background .2s;
  flex: 0 1 auto;
}

.diag__opt:hover {
  border-color: var(--c-blue, #1a5c96);
  background: rgba(26,92,150,.04);
}

.diag__opt input { display: none; }

.diag__opt input:checked + span {
  font-weight: 700;
}

.diag__opt:has(input:checked) {
  border-color: var(--c-blue, #1a5c96);
  background: rgba(26,92,150,.08);
}

/* 診断結果 */
.diag__result {
  max-width: 720px;
  margin: 32px auto 0;
}

.diag__result-inner {
  padding: 24px 28px;
  border-radius: 14px;
  text-align: center;
}

/* 結果カード配色バリエーション（JSで付与） */
.diag__result--blue .diag__result-inner {
  background: rgba(26,92,150,.06);
  border: 1.5px solid rgba(26,92,150,.18);
}
.diag__result--red .diag__result-inner {
  background: rgba(176,58,46,.05);
  border: 1.5px solid rgba(176,58,46,.15);
}
.diag__result--neutral .diag__result-inner {
  background: rgba(15,46,78,.04);
  border: 1.5px solid var(--c-line, #d4e2ee);
}

.diag__result-icon {
  font-size: 22px;
  color: var(--c-blue, #1a5c96);
  margin-bottom: 6px;
}
.diag__result--red .diag__result-icon {
  color: #b03a2e;
}

.diag__result-title {
  font-family: var(--f-serif, 'Hiragino Mincho ProN', Georgia, serif);
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
  margin-bottom: 8px;
  line-height: 1.45;
}

.diag__result-desc {
  font-size: 17px;
  color: var(--c-stone, #3d556b);
  line-height: 1.7;
  margin-bottom: 16px;
}

.diag__result-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-blue, #1a5c96);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.diag__result-link:hover {
  border-bottom-color: var(--c-blue, #1a5c96);
}

/* 診断結果内の本命CTA */
.diag__result-cta {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 16px auto 0;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}

/* 診断CTA */
.diag__cta {
  text-align: center;
  margin-top: 28px;
}

/* モバイル */
@media (max-width: 767px) {
  .diag { padding-top: 40px; padding-bottom: 40px; }
  .diag__opts { flex-direction: column; }
  .diag__opt { width: 100%; }
  .diag__result-inner { padding: 20px 16px; }
}

/* ============================================================
   End: 分岐診断セクション
============================================================ */

/* セクション */
#flow-choice.sec--bg {
  padding-top: 52px;
  padding-bottom: 60px;
}

/* ヘッド */
.fo2-head {
  text-align: center;
  margin-bottom: 36px;
}
.fo2-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-blue, #1a5c96);
  margin-bottom: 10px;
}
.fo2-head__kicker::before {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  background: var(--c-blue, #1a5c96);
}
.fo2-head__title {
  font-family: var(--f-serif, 'Hiragino Mincho ProN', Georgia, serif);
  font-size: clamp(20px, 3.5vw, 27px);
  font-weight: 600;
  color: var(--c-navy, #0f2e4e);
  line-height: 1.4;
  margin-bottom: 10px;
}
.fo2-head__desc {
  font-size: 17px;
  color: var(--c-stone, #3d556b);
  line-height: 1.9;
}

/* 全体 */
.fo2-body {
  max-width: 760px;
  margin: 0 auto;
}

/* 1〜5メイン枠 */
.fo2-frame {
  background: var(--c-white, #fff);
  border: 2px solid var(--c-blue, #1a5c96);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(26,92,150,.10);
  overflow: hidden;
}
.fo2-frame__badge-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(26,92,150,.08), rgba(26,92,150,.03));
  border-bottom: 1px solid rgba(26,92,150,.12);
}
.fo2-frame__badge-text {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-blue, #1a5c96);
  background: rgba(26,92,150,.10);
  border: 1px solid rgba(26,92,150,.18);
  border-radius: 999px;
  padding: 4px 10px;
}
.fo2-frame__badge-range {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-white, #fff);
  background: var(--c-blue, #1a5c96);
  border-radius: 999px;
  padding: 4px 10px;
}
.fo2-frame__badge-msg {
  font-size: 13px;
  color: var(--c-stone, #3d556b);
  line-height: 1.6;
}
.fo2-frame__inner {
  padding: 18px;
}

/* グループバー */
.fo2-group-bar,
.fo2-key-bar,
.fo2-frame-red__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.fo2-group-bar {
  background: var(--c-bg-alt, #e8f0f8);
  border: 1px solid var(--c-line, #d4e2ee);
}
.fo2-group-bar__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
}
.fo2-group-bar__range {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-stone, #3d556b);
  background: rgba(255,255,255,.8);
  border-radius: 999px;
  padding: 3px 8px;
}

.fo2-key-bar {
  background: linear-gradient(135deg, rgba(26,92,150,.10), rgba(176,124,20,.08));
  border: 1px solid rgba(26,92,150,.16);
}
.fo2-key-bar__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
}
.fo2-key-bar__range {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-white, #fff);
  background: var(--c-blue, #1a5c96);
  border-radius: 999px;
  padding: 3px 8px;
}
.fo2-key-bar__msg {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-blue, #1a5c96);
}

/* 分岐メッセージ */
.fo2-pivot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(26,92,150,.12), rgba(26,92,150,.04));
  border: 1px solid rgba(26,92,150,.18);
}
.fo2-pivot__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-blue, #1a5c96);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.fo2-pivot__text {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
  line-height: 1.45;
}
.fo2-pivot__sub {
  font-size: 12.5px;
  color: var(--c-stone, #3d556b);
  line-height: 1.6;
  margin-top: 2px;
}

/* ステップ */
.fo2-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--c-line, #d4e2ee);
}
.fo2-step + .fo2-step {
  margin-top: 0;
}
.fo2-step__num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--f-serif, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
}
.fo2-step__body {
  flex: 1;
  padding-top: 3px;
}
.fo2-step__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 4px;
}
.fo2-step__desc {
  font-size: 17px;
  line-height: 1.75;
}

/* 1〜2 */
.fo2-step--basic .fo2-step__num {
  background: var(--c-bg-alt, #e8f0f8);
  color: var(--c-stone, #3d556b);
  border: 1.5px solid var(--c-line, #d4e2ee);
}
.fo2-step--basic .fo2-step__title {
  color: var(--c-navy, #0f2e4e);
}
.fo2-step--basic .fo2-step__desc {
  color: var(--c-stone, #3d556b);
}

/* 3 */
.fo2-step--stuck {
  background: #fff8f7;
  border: 1.5px solid #f0c7c2;
}
.fo2-step--stuck .fo2-step__num {
  background: #c0392b;
  color: #fff;
}
.fo2-step--stuck .fo2-step__title {
  color: #b03020;
}
.fo2-step--stuck .fo2-step__desc {
  color: #9a4d43;
}

/* 4〜5 */
.fo2-step--key {
  background: linear-gradient(135deg, rgba(26,92,150,.05), rgba(176,124,20,.04));
  border: 1.5px solid rgba(26,92,150,.16);
}
.fo2-step--key .fo2-step__num {
  background: var(--c-navy, #0f2e4e);
  color: #fff;
  border: 2px solid var(--c-blue, #1a5c96);
}
.fo2-step--key .fo2-step__title {
  color: var(--c-navy, #0f2e4e);
  font-size: 17px;
}
.fo2-step--key .fo2-step__desc {
  color: var(--c-stone, #3d556b);
}

/* 6〜7 赤 */
.fo2-step--red {
  background: #fff8f7;
  border: 1.5px solid #efc9c3;
}
.fo2-step--red .fo2-step__num {
  background: #b03a2e;
  color: #fff;
}
.fo2-step--red .fo2-step__title {
  color: #7c2f27;
}
.fo2-step--red .fo2-step__desc {
  color: #6b3d38;
}

/* 矢印 */
.fo2-arr {
  text-align: center;
  font-size: 18px;
  line-height: 1;
  color: var(--c-mist, #b0c4d8);
  padding: 8px 0;
}
.fo2-arr--key {
  color: var(--c-blue, #1a5c96);
}
.fo2-arr--red {
  color: #c87a6b;
}
.fo2-big-arrow {
  text-align: center;
  font-size: 28px;
  line-height: 1;
  color: #d0d9e2;
  padding: 16px 0 12px;
}

/* 結果ボックス */
.fo2-result {
  margin-top: 16px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(26,92,150,.12), rgba(26,92,150,.05));
  border: 2px solid rgba(26,92,150,.25);
}
.fo2-result__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-blue, #1a5c96);
  margin-bottom: 8px;
}
.fo2-result__label::before {
  content: '→';
}
.fo2-result__title {
  font-family: var(--f-serif, 'Hiragino Mincho ProN', Georgia, serif);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
  line-height: 1.45;
  margin-bottom: 8px;
}
.fo2-result__title em {
  font-style: normal;
  color: var(--c-blue, #1a5c96);
}
.fo2-result__body {
  font-size: 17px;
  color: var(--c-stone, #3d556b);
  line-height: 1.8;
}

/* 赤フレーム */
.fo2-frame-red {
  background: #fcf8f8;
  border: 1.5px solid #e4c8c4;
  border-radius: 14px;
  overflow: hidden;
}
.fo2-frame-red__bar {
  background: linear-gradient(135deg, rgba(176,58,46,.08), rgba(176,58,46,.03));
  border-bottom: 1px solid rgba(176,58,46,.12);
  padding: 12px 14px;
}
.fo2-frame-red__bar-text {
  font-size: 12px;
  font-weight: 700;
  color: #7c2f27;
}
.fo2-frame-red__bar-range {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #b03a2e;
  border-radius: 999px;
  padding: 3px 8px;
}
.fo2-frame-red__bar-msg {
  font-size: 12px;
  color: #6b3d38;
}
.fo2-frame-red__inner {
  padding: 16px;
}

/* 注記 */
.fo2-footnote {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 10.5px;
  color: var(--c-stone, #3d556b);
  line-height: 1.8;
  padding: 12px 16px;
  background: var(--c-white, #fff);
  border: 1px solid var(--c-line, #d4e2ee);
  border-radius: 8px;
}

/* 比較 */
.fo2-cmp-head {
  margin-bottom: 24px;
}
.fo2-cmp-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-blue, #1a5c96);
  margin-bottom: 8px;
}
.fo2-cmp-head__kicker::before {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  background: var(--c-blue, #1a5c96);
}
.fo2-cmp-head__title {
  font-family: var(--f-serif, 'Hiragino Mincho ProN', Georgia, serif);
  font-size: clamp(18px, 3vw, 23px);
  font-weight: 600;
  color: var(--c-navy, #0f2e4e);
  line-height: 1.4;
  margin-bottom: 6px;
}
.fo2-cmp-head__desc {
  font-size: 17px;
  color: var(--c-stone, #3d556b);
  line-height: 1.8;
}

.fo2-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(11,29,48,.07);
  background: #fff;
}
.fo2-cmp-table thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
}
.fo2-cmp-table thead th:first-child {
  background: var(--c-navy, #0f2e4e);
  color: rgba(255,255,255,.65);
  width: 22%;
}
.fo2-cmp-table thead th:nth-child(2) {
  background: var(--c-blue, #1a5c96);
  color: #fff;
}
.fo2-cmp-table thead th:nth-child(3) {
  background: #7b3b33;
  color: rgba(255,255,255,.75);
}
.fo2-cmp-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-line, #d4e2ee);
  vertical-align: top;
  line-height: 1.65;
}
.fo2-cmp-table tbody td:first-child {
  font-weight: 700;
  font-size: 12px;
  color: var(--c-stone, #3d556b);
  background: var(--c-bg, #f2f6fa);
}
.fo2-cmp-table tbody td:nth-child(2) {
  background: rgba(26,92,150,.03);
  color: var(--c-navy, #0f2e4e);
}
.fo2-cmp-table tbody td:nth-child(3) {
  background: rgba(176,58,46,.02);
  color: #5a3535;
}
.fo2-cmp-table tbody tr:last-child td {
  border-bottom: none;
}

.fo2-cmp-note {
  font-size: 11px;
  color: var(--c-stone, #3d556b);
  line-height: 1.8;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--c-bg, #f2f6fa);
  border-radius: 6px;
  border-left: 3px solid var(--c-blue, #1a5c96);
}

/* モバイル */
@media (max-width: 767px) {
  .fo2-frame__inner,
  .fo2-frame-red__inner {
    padding: 14px;
  }

  .fo2-frame__badge-bar,
  .fo2-group-bar,
  .fo2-key-bar,
  .fo2-frame-red__bar {
    padding: 10px 12px;
  }

  .fo2-step {
    gap: 12px;
    padding: 12px;
  }

  .fo2-step__num {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .fo2-result {
    padding: 14px;
  }

  .fo2-cmp-table {
    font-size: 12px;
  }

  .fo2-cmp-table thead th,
  .fo2-cmp-table tbody td {
    padding: 9px 10px;
  }
}

/* ============================================================
   Flow section tuning
   fo2-* の視認性改善
============================================================ */

/* セクション全体の文字を少し大きく */
.fo2-head__desc {
  font-size: 17px;
  line-height: 1.95;
}

.fo2-frame__badge-msg,
.fo2-key-bar__msg,
.fo2-frame-red__bar-msg {
  font-size: 17px;
  line-height: 1.7;
}

/* 各ステップのタイトル・本文を少し大きく */
.fo2-step__title {
  font-size: 17px;
  line-height: 1.55;
}

.fo2-step__desc {
  font-size: 17px;
  line-height: 1.85;
}

/* 分岐メッセージ */
.fo2-pivot__text {
  font-size: 17px;
  line-height: 1.5;
}

.fo2-pivot__sub {
  font-size: 17px;
  line-height: 1.7;
}

/* 結果ボックス */
.fo2-result {
  padding: 20px;
}

.fo2-result__label {
  font-size: 11.5px;
}

.fo2-result__title {
  font-size: clamp(20px, 3.2vw, 26px);
  line-height: 1.5;
}

.fo2-result__body {
  font-size: 17px;
  line-height: 1.9;
  color: var(--c-stone, #3d556b);
}

/* ご指定の一文を濃く、少し大きく */
.fo2-result__lead {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
}

/* 比較表の可読性も少し上げる */
.fo2-cmp-head__desc {
  font-size: 17px;
  line-height: 1.9;
}

.fo2-cmp-table {
  font-size: 17px;
}

.fo2-cmp-table thead th {
  font-size: 12px;
}

.fo2-cmp-table tbody td {
  padding: 12px 16px;
  line-height: 1.75;
}

.fo2-cmp-note {
  font-size: 11px;
  line-height: 1.85;
}

/* 注記も少しだけ読みやすく */
.fo2-footnote {
  font-size: 10.5px;
  line-height: 1.9;
}

/* スマホ */
@media (max-width: 767px) {
  .fo2-head__desc {
    font-size: 17px;
  }

  .fo2-step__title {
    font-size: 17px;
  }

  .fo2-step__desc {
    font-size: 17px;
  }

  .fo2-pivot__text {
    font-size: 17px;
  }

  .fo2-pivot__sub {
    font-size: 17px;
  }

  .fo2-result__title {
    font-size: 20px;
  }

  .fo2-result__body {
    font-size: 17px;
  }

  .fo2-result__lead {
    font-size: 17px;
    line-height: 1.75;
  }

  .fo2-cmp-table {
    font-size: 17px;
  }

  .fo2-cmp-table tbody td {
    padding: 10px 10px;
  }
}

/* ============================================================
   Flow overview banner（分岐案内帯）
============================================================ */
.fo2-overview {
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 20px 24px;
  background: var(--c-white, #fff);
  border: 1.5px solid var(--c-line, #d4e2ee);
  border-radius: 14px;
  text-align: center;
}
.fo2-overview__title {
  font-family: var(--f-serif, 'Hiragino Mincho ProN', Georgia, serif);
  font-size: clamp(17px, 2.6vw, 22px);
  font-weight: 700;
  color: var(--c-navy, #0f2e4e);
  line-height: 1.4;
  margin-bottom: 6px;
}
.fo2-overview__desc {
  font-size: 17px;
  color: var(--c-stone, #3d556b);
  line-height: 1.7;
  margin-bottom: 16px;
}
.fo2-overview__cols {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.fo2-overview__col {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  flex: 0 1 auto;
}
.fo2-overview__col--blue {
  background: rgba(26,92,150,.07);
  border: 1px solid rgba(26,92,150,.18);
}
.fo2-overview__col--red {
  background: rgba(176,58,46,.06);
  border: 1px solid rgba(176,58,46,.15);
}
.fo2-overview__col-range {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  flex-shrink: 0;
}
.fo2-overview__col--blue .fo2-overview__col-range {
  background: var(--c-blue, #1a5c96);
}
.fo2-overview__col--red .fo2-overview__col-range {
  background: #b03a2e;
}
.fo2-overview__col-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-navy, #0f2e4e);
  white-space: nowrap;
}
.fo2-overview__col-note {
  font-size: 12px;
  color: var(--c-stone, #3d556b);
  line-height: 1.4;
}
.fo2-overview__arrow {
  font-size: 18px;
  color: #d0d9e2;
  flex-shrink: 0;
}

/* モバイル：案内帯を縦積み */
@media (max-width: 767px) {
  .fo2-overview {
    padding: 16px 16px;
  }
  .fo2-overview__cols {
    flex-direction: column;
    gap: 8px;
  }
  .fo2-overview__col {
    width: 100%;
    justify-content: center;
  }
  .fo2-overview__arrow {
    transform: rotate(90deg);
  }
}

/* ============================================================
   Flow 2-column layout（デスクトップ）
   fo2-body を左右2カラムに分割
   左: 1〜5（当法人の担当範囲）  右: 6〜7 + 注記 + CTA
============================================================ */

/* デスクトップ：2カラム */
@media (min-width: 1024px) {
  .fo2-body {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 63fr 37fr;
    gap: 28px;
    align-items: start;
  }

  .fo2-col-left,
  .fo2-col-right {
    min-width: 0;
  }

  /* 右カラム内の注記はカラム幅に合わせる */
  .fo2-col-right .fo2-footnote {
    max-width: none;
    margin-top: 20px;
  }

  /* 右カラム内の CTA は左寄せ */
  .fo2-col-right .mid-cta {
    text-align: left;
    margin-top: 16px;
  }

  /* 大矢印はPC非表示 */
  .fo2-big-arrow {
    display: none;
  }
}

/* ============================================================
   Flow PC高さ圧縮 — 1画面収容
============================================================ */
@media (min-width: 1024px) {

  /* セクション自体の上下余白を圧縮 */
  #flow.sec { padding-top: 32px; padding-bottom: 28px; }

  /* 見出し */
  .fo2-head { margin-bottom: 10px; }
  .fo2-head__title { margin-bottom: 4px; }
  .fo2-head__desc { line-height: 1.6; margin-bottom: 0; }

  /* 概要バナー */
  .fo2-overview { padding: 8px 18px; margin-bottom: 10px; }
  .fo2-overview__title { margin-bottom: 2px; }
  .fo2-overview__desc { margin-bottom: 6px; font-size: 15px; }
  .fo2-overview__col { padding: 4px 10px; }

  /* 2カラム間ギャップ */
  .fo2-body { gap: 14px; }

  /* フレーム内部 */
  .fo2-frame__badge-bar { padding: 5px 12px; }
  .fo2-frame__inner { padding: 6px 12px; }
  .fo2-frame-red__inner { padding: 6px 12px; }
  .fo2-frame-red__bar { padding: 5px 10px; }

  /* グループバー・キーバー */
  .fo2-group-bar,
  .fo2-key-bar { padding: 4px 10px; margin-bottom: 4px; }

  /* 分岐ピボット */
  .fo2-pivot { margin: 4px 0; padding: 6px 10px; }
  .fo2-pivot__text { line-height: 1.35; }
  .fo2-pivot__sub { margin-top: 0; }

  /* ステップカード */
  .fo2-step { gap: 8px; padding: 7px 10px; }
  .fo2-step__num { width: 28px; height: 28px; font-size: 13px; }
  .fo2-step__body { padding-top: 0; }
  .fo2-step__title { margin-bottom: 1px; line-height: 1.35; }
  .fo2-step__desc { line-height: 1.45; }

  /* 矢印 */
  .fo2-arr { padding: 1px 0; font-size: 14px; }

  /* 右カラム注記 */
  .fo2-footnote {
    padding: 6px 10px;
    line-height: 1.45;
    margin-top: 8px;
    font-size: 10px;
  }

  /* 右カラムCTA */
  .fo2-col-right .mid-cta { margin-top: 8px; }
}

/* スマホ：従来通り縦並び */
@media (max-width: 1023px) {
  .fo2-col-left,
  .fo2-col-right {
    display: contents;
  }
}

/* ============================================================
   HERO SECTION — 可読性・優先順位再設計
   上書き対象：既存 style.css の #hero 〜 .hero__card-note
   追加対象：PC用 hero__inner grid（960px以上）
   ネイビー×ゴールドのブランド感は維持
============================================================ */

/* ── ヒーローセクション本体 ─────────────────────── */
#hero {
  min-height: calc(100svh - 60px);
  background: linear-gradient(162deg, var(--c-ink) 0%, var(--c-navy) 44%, var(--c-navy-mid) 100%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* SP: 上下余白を広めに取り読み込みやすくする */
  padding: 60px 0 72px;
}

/* グリッド背景テクスチャ（変更なし） */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

/* ゴールドグロー（変更なし） */
#hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(154,110,16,.1) 0%, transparent 65%);
  pointer-events: none;
}

/* ── レイアウト：SP=1カラム（デフォルト） ──────── */
.hero__inner {
  position: relative;
  z-index: 1;
  /* SP: 縦積み */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── 優先度1：アイブロウ（専門家ラベル） ──────── */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 既存より少し大きく：認識しやすさ向上 */
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(180,210,240,.85);
  font-weight: 700;
  margin-bottom: 12px;
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(180,210,240,.6);
}

/* ── h1：SEO用（視覚的には小さく・変更なし） ───── */
.hero__h1 {
  font-family: var(--f-serif);
  /* clamp はそのまま維持：SEO文字を目立たせない設計 */
  font-size: clamp(12px, 2.5vw, 15px);
  color: rgba(255,255,255,.45);
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 16px;
  letter-spacing: .02em;
}

/* ── 優先度1：メインキャッチコピー ─────────────── */
.hero__catch {
  font-family: var(--f-serif);
  /* SP: clamp下限を上げて読みやすく */
  font-size: clamp(28px, 8.5vw, 44px);
  color: var(--c-white);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: 22px;
}
.hero__catch em {
  font-style: normal;
  color: rgba(180,210,240,.95);
  display: block;
}

/* ── 優先度2：サービス説明文（既存14pxを引き上げ） ── */
.hero__sub {
  font-size: 17px;
  color: rgba(255,255,255,.9);
  line-height: 2.0;
  margin-bottom: 16px;
}

/* ── 優先度4（補足）：注記 ─────────────────────── */
.hero__note {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  line-height: 1.8;
  margin-bottom: 24px;
  padding-left: 11px;
  border-left: 2px solid rgba(255,255,255,.18);
}

/* ── タグ群（ターゲット表示） ────────────────────── */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.hero__tags span {
  /* 既存 11px → 12px。タップ時の視認性向上 */
  font-size: 12px;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 5px 13px;
}

/* ── 優先度3：CTAボタン群 ───────────────────────── */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── ボタン共通：既存より大きく・押しやすく ──────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-sans);
  /* 既存 15px → 16px */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  /* 既存 50px → 54px */
  min-height: 54px;
  padding: 14px 26px;
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .22s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn--gold {
  background: var(--c-gold);
  color: var(--c-white);
}
.btn--gold:hover {
  background: var(--c-gold-lt);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(154,110,16,.35);
}

.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border: 1.5px solid rgba(255,255,255,.42);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.08);
}

.btn--arrow::after {
  content: '›';
  font-size: 22px;
  line-height: 1;
  transition: transform .2s;
}
.btn--arrow:hover::after { transform: translateX(4px); }

/* ── 料金カード：SP=非表示（既存通り） ──────────── */
.hero__card { display: none; }

.hero__card-label {
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(180,210,240,.85);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero__card-label::before {
  content: '';
  display: block;
  width: 10px;
  height: 2px;
  background: rgba(180,210,240,.6);
}

.hero__card-dl { margin-bottom: 14px; }

/* dt：ラベル。既存11px → 12px で少し読みやすく */
.hero__card-dl dt {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-top: 12px;
}

/* dd：金額。既存17px → 15px に抑制して主役にしすぎない */
.hero__card-dl dd {
  font-family: var(--f-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-white);
  white-space: nowrap;
}

/* small（税別等）：既存10.5px → 11px */
.hero__card-dl small {
  font-size: 11px;
  color: rgba(255,255,255,.48);
  font-family: var(--f-sans);
  font-weight: 400;
  margin-left: 3px;
}

.hero__card-sep {
  height: 1px;
  background: rgba(255,255,255,.09);
  margin-top: 11px;
}

.hero__card-note {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
}


/* ============================================================
   PC最適化：960px以上
   ・hero__inner を2カラムグリッドに
   ・コピー左、料金カード右（表示）
   ・フォントサイズ各段階で調整
============================================================ */
@media (min-width: 960px) {

  /* hero内部を横並びに */
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 52px;
    align-items: center;
    flex-direction: unset;
  }

  /* 料金カード：PC=表示 */
  .hero__card {
    display: block;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: var(--r-lg);
    padding: 26px 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* 視覚的な重さを下げるために影を控えめに */
    box-shadow: 0 4px 18px rgba(0,0,0,.15);
  }

  /* ── PC: 見出しサイズ調整 ── */
  .hero__eyebrow {
    font-size: 10.5px;
  }

  /* h1：SEO用のまま */
  .hero__h1 {
    font-size: clamp(13px, 1.4vw, 16px);
  }

  /* キャッチ：PC用 */
  .hero__catch {
    font-size: clamp(32px, 4.2vw, 44px);
    margin-bottom: 24px;
  }

  /* 説明文：PC用 */
  .hero__sub {
    font-size: 17px;
    line-height: 1.95;
    margin-bottom: 14px;
  }

  /* 注記：PC用 */
  .hero__note {
    font-size: 12px;
    margin-bottom: 26px;
  }

  /* タグ */
  .hero__tags {
    margin-bottom: 30px;
  }
  .hero__tags span {
    font-size: 12px;
  }

  /* ボタン：PC用 */
  .btn {
    font-size: 15px;
    min-height: 52px;
    padding: 13px 24px;
  }

  /* 料金カードdt：PC用 */
  .hero__card-dl dt {
    font-size: 11.5px;
  }

  /* 料金カードdd：PCでも抑制維持 */
  .hero__card-dl dd {
    font-size: 16px;
  }
}


/* ============================================================
   スマホ調整：768px以下
   ・縦積み維持
   ・本文・ボタンの読みやすさ優先
============================================================ */
@media (max-width: 768px) {

  #hero {
    padding: 56px 0 68px;
  }

  /* キャッチ：SP下限 */
  .hero__catch {
    font-size: clamp(26px, 8vw, 38px);
    margin-bottom: 18px;
  }

  /* 説明文：SP */
  .hero__sub {
    font-size: 17px;
    line-height: 1.95;
  }

  /* 注記：SP */
  .hero__note {
    font-size: 11.5px;
    color: rgba(255,255,255,.55);
    margin-bottom: 22px;
  }

  /* タグ */
  .hero__tags span {
    font-size: 12px;
    padding: 5px 12px;
  }

  /* CTA：SP=横幅フルで押しやすく */
  .hero__ctas {
    flex-direction: column;
    gap: 10px;
  }

  .btn {
    font-size: 16px;
    min-height: 54px;
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }
}


/* ============================================================
   スマホ最小：480px以下
   ・極端に小さい端末での読みやすさ担保
============================================================ */
@media (max-width: 480px) {

  .hero__catch {
    font-size: clamp(24px, 7.5vw, 32px);
  }

  .hero__sub {
    font-size: 17px;
  }

  .hero__note {
    font-size: 11px;
  }

  .hero__tags span {
    font-size: 11.5px;
    padding: 4px 11px;
  }

  .btn {
    font-size: 15.5px;
    min-height: 52px;
  }
}


/* ===== スマホで料金カードを表示させる ===== */
@media (ma.hero__card {
  visibility: hidden;
}x-width: 768px) {

  /* レイアウトを縦並びに */
  .hero__inner {
    display: flex;
    flex-direction: column;
  }

  /* 料金カードを表示 */
  .hero__card {
    display: block !important;
    width: 100%;
    margin-top: 24px;
  }

}

.hero__card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
}

@media (max-width: 768px) {
  .hero__card {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
    margin-top: 24px;
  }
}
/* ===== 文字を大きく ===== */

/* 本文 */
body {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  body {
    font-size: 17px;
  }
}

/* 見出し */
h1 {
  font-size: 32px;
  line-height: 1.3;
}

h2 {
  font-size: 24px;
  line-height: 1.4;
}

h3 {
  font-size: 18px;
}

/* ===== 余白を狭く ===== */

/* セクション */
section {
  padding: 40px 0;
}

@media (max-width: 768px) {
  section {
    padding: 28px 0;
  }
}

/* 見出し下 */
h1, h2, h3 {
  margin-bottom: 10px;
}

/* 段落 */
p {
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 36px;
}

.hero p {
  font-size: 18px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 17px;
  }
}
.hero__card {
  font-size: 16px;
  line-height: 1.5;
}

.hero__card strong {
  font-size: 18px;
}

/* =========================================================
   column-guide のボタンを見えるようにする
========================================================= */
#column-guide .mid-cta {
  margin-top: 20px;
}

#column-guide .btn--ghost {
  color: var(--c-blue);
  border: 1.5px solid rgba(26, 92, 150, 0.28);
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 29, 48, 0.06);
}

#column-guide .btn--ghost:hover {
  color: var(--c-blue-lt);
  border-color: rgba(26, 92, 150, 0.5);
  background: #f8fbfe;
}

/* =========================================================
   Case Study の「状況・調査内容・結果」を読みやすくする
========================================================= */
#case-study .case-card {
  padding: 24px 20px;
}

#case-study .case-card__title {
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 16px;
}

#case-study .case-card__block {
  margin-bottom: 14px;
}

#case-study .case-card__label {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  color: #f0c86a;
}

#case-study .case-card__text {
  font-size: 17px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.9);
}

#case-study .case-card__result {
  font-size: 17px;
  line-height: 1.95;
  color: #c1f0d0;
  border-left: 3px solid #8ecfac;
  padding-left: 12px;
}

#case-study .case-card__sep {
  margin: 14px 0;
}

#case-study .case-card__meta {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
}

/* スマホ */
@media (max-width: 768px) {
  #column-guide .btn--ghost {
    width: 100%;
  }

  #case-study .case-card {
    padding: 20px 16px;
  }

  #case-study .case-card__title {
    font-size: 16px;
  }

  #case-study .case-card__label {
    font-size: 12.5px;
  }

  #case-study .case-card__text,
  #case-study .case-card__result {
    font-size: 17px;
    line-height: 1.9;
  }
}
/* ===============================
   コラムカード
=============================== */

.column-card-wrap{
  max-width: 760px;
  margin: 0 auto 40px;
}

.column-card{
  display:block;
  text-decoration:none;
  color:inherit;

  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;

  padding:28px 28px 24px;

  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:all .25s ease;
}

/* ホバー */
.column-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

/* ラベル */
.column-card__label{
  font-size:12px;
  color:#3d556b;
  margin-bottom:10px;
  letter-spacing:.05em;
}

/* タイトル */
.column-card__title{
  font-size:22px;
  font-weight:700;
  line-height:1.5;
  margin-bottom:14px;
  color:#0f2e4e;
}

/* 説明 */
.column-card__desc{
  font-size:17px;
  color:#2d3b4a;
  line-height:1.7;
}

/* スマホ */
@media (max-width:640px){
  .column-card{
    padding:22px 18px;
  }

  .column-card__title{
    font-size:18px;
  }

  .column-card__desc{
    font-size:17px;
  }
}
.section-featured{
  margin-bottom:2.4rem;
}

.featured-grid--improved{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.featured-card--improved{
  display:block;
  text-decoration:none;
  background:#f7f7f5;
  border:1px solid rgba(83,74,183,.16);
  border-radius:18px;
  padding:22px 22px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.featured-card--improved:hover{
  transform:translateY(-2px);
  background:#ffffff;
  border-color:rgba(83,74,183,.34);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.featured-card--improved .featured-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  color:#3c3489;
  background:#eeedfe;
  border:1px solid rgba(83,74,183,.22);
  border-radius:999px;
  padding:4px 10px;
  margin-bottom:12px;
  letter-spacing:.02em;
}

.featured-card--improved .featured-title{
  font-size:18px;
  line-height:1.55;
  font-weight:700;
  color:#183153;
  margin-bottom:12px;
}

.featured-card--improved .featured-desc{
  font-size:17px;
  line-height:1.85;
  color:#2d3b4a;
  margin-bottom:14px;
}

.featured-card--improved .featured-link{
  font-size:14px;
  font-weight:700;
  color:#534ab7;
}

@media (max-width: 900px){
  .featured-grid--improved{
    grid-template-columns:1fr;
    gap:14px;
  }

  .featured-card--improved{
    padding:20px 18px 16px;
  }

  .featured-card--improved .featured-title{
    font-size:17px;
    line-height:1.5;
  }

  .featured-card--improved .featured-desc{
    font-size:14px;
    line-height:1.75;
  }
}
















/* ============================================================
   READABILITY PATCH — 文字サイズ・行間・余白の可読性改善
   追加日：2025-04
   ※ 既存スタイルへの上書きパッチ。配色・構造は変更なし。
============================================================ */

/* ── ベース行間 ── */
body { line-height: 1.85; }

/* ── セクション見出し ── */
.sec__title {
  font-size: clamp(21px, 4.5vw, 28px);
  line-height: 1.42;
  margin-bottom: 14px;
}
.sec__desc  { font-size: 17px; line-height: 1.9; }
.sec__head  { margin-bottom: 44px; }

/* ── 問題提起カード ── */
.problem-card__q    { font-size: 17px; }
.problem-card__desc { font-size: 17px; line-height: 1.82; }

/* ── サービス位置づけ ── */
.position-box__lead  { font-size: clamp(17px, 3.5vw, 19px); }
.position-box__body  { font-size: 17px; line-height: 1.92; }
.not-list li         { font-size: 17px; line-height: 1.68; }
.position-notice     { font-size: 17px; line-height: 1.88; }

/* ── 役割整理 ── */
.roles-row__who  { font-size: 17px; }
.roles-row__what { font-size: 17px; line-height: 1.68; }
.roles-fig__name { font-size: 17px; }
.roles-fig__role { font-size: 17px; line-height: 1.68; }
.roles-fig__note { font-size: 16px; line-height: 1.78; }
.roles-body      { font-size: 17px; line-height: 1.98; }

/* ── 成果物 ── */
.dlv__list li,
.dlv__can  li  { font-size: 17px; }
.dlv__notice   { font-size: 17px; }
.dlv__notice strong { font-size: 17px; }

/* ── 業務フロー ── */
.flow-item__title { font-size: 17px; }
.flow-item__desc  { font-size: 17px; line-height: 1.78; }
.flow-divider     { font-size: 17px; }

/* ── 料金 ── */
.fee-card__desc   { font-size: 17px; line-height: 1.78; }
.fee-definition   { font-size: 17px; line-height: 1.85; }
.fee-note         { font-size: 16px; line-height: 1.82; }

/* ── 事例カード ── */
.case-card__title  { font-size: 17px; }
.case-card__text   { font-size: 17px; line-height: 1.78; }
.case-card__result { font-size: 17px; line-height: 1.78; }

/* ── 問題提起（details/summary UI） ── */
#problem .case-card__label      { font-size: 17px; }
#problem .case-card__subdesc    { font-size: 17px; line-height: 1.78; }
#problem .case-card__body-title { font-size: 17px; }
#problem .case-card__body p     { font-size: 17px; line-height: 1.92; }

/* ── FAQ ── */
.faq-item__text { font-size: 17px; }
.faq-item__a    { font-size: 17px; line-height: 1.92; }

/* ── お問い合わせ・フォーム ── */
.contact-intro  { font-size: 17px; line-height: 1.98; }
.step__title    { font-size: 17px; }
.step__desc     { font-size: 17px; line-height: 1.72; }
.assurances li  { font-size: 17px; }
.form-card__sub { font-size: 17px; line-height: 1.78; }

/* ── ヒーロー ── */
.hero__sub  { font-size: 17px; line-height: 1.98; }

/* ── スマホ追加補正 ── */
@media (max-width: 639px) {
  .sec__head  { margin-bottom: 32px; }
  .problem-card__q    { font-size: 17px; }
  .faq-item__text     { font-size: 17px; }
  .hero__catch { font-size: clamp(22px, 7vw, 40px); }
}

/* ── PC 追加余白 ── */
@media (min-width: 960px) {
  .sec__head { margin-bottom: 52px; }
}

/* LP本文フォントサイズ最小値 */
main p,
main li,
main td,
main dd,
main dt,
main span:not(.btn):not(.tag):not(.badge),
main label {
  font-size: max(17px, 1em) !important;
}

/* ============================================================
   モバイルヘッダー修正
   ① 本文がfixedヘッダーに隠れない
   ② CTAボタンがスマホで見切れない
============================================================ */

/* ── ① 本文隠れ防止：fixedヘッダー分の余白 ── */
/* ヒーローはヘッダーの裏に潜り込むダーク背景なのでpadding-topで対処 */
/* コラムページ等は .breadcrumb-bar の padding-top:60px で既に対処済み */

/* ── ② スマホ：ヘッダー2段構成 + CTA見切れ防止 ── */
@media (max-width: 768px) {

  /* ヘッダーを2段に */
  .hdr {
    flex-wrap: wrap;
    padding: 8px var(--px) 6px;
    gap: 6px 8px;
  }

  /* 1段目：ロゴ（左） + ハンバーガー（右） */
  .hdr__logo {
    order: 1;
    flex: 1 1 0%;
    min-width: 0;
  }
  .hamburger {
    order: 2;
  }

  /* 2段目：CTAボタン（幅100%） */
  .hdr__cta {
    order: 3;
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 12px;
    min-height: 32px;
    padding: 6px 12px;
    white-space: nowrap;
  }

  /* 2段ヘッダーの実高さ（約90px）に合わせてヒーローの上余白を拡大 */
  #hero {
    padding-top: 100px;
  }

  /* コラムページ等のパンくず */
  .breadcrumb-bar {
    padding-top: 96px;
  }
}

/* ── 極小画面（360px以下）：CTAテキストを縮小 ── */
@media (max-width: 360px) {
  .hdr__cta {
    font-size: 11px;
    padding: 5px 8px;
  }
}