/* =========================================================
   パターンA｜信頼・誠実
   紺 #1E3A5F × 白／見出しは明朝（Noto Serif JP）／控えめなフェードイン
   参考サイトなしのオリジナル。写真は脇役（ヒーロー＋1枚のみ）。
   ========================================================= */

:root {
  /* --- 色（紺・アクセント青・グレー・白の4色） --- */
  --c-primary: #1E3A5F;
  --c-primary-dark: #14293F;
  --c-accent: #3E6E9E;
  --c-on-primary: #FFFFFF;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F3F6F9;
  --c-surface: #FFFFFF;
  --c-text: #1F2733;
  --c-text-sub: #56616F;
  --c-border: #D7DFE7;
  --c-band: #212121;
  /* ① ヒーローのフィルタは黒（2026-09-11 Uiさん指定・3パターン共通のルール）。
        Aは引き算のデザインなので、斜めに切らず一様な濃さで重ねる。
        写真が明るくても白文字は9.2:1で読める。 */
  --c-hero-overlay: rgba(0, 0, 0, 0.72);

  /* --- フォント：見出しは明朝 --- */
  --font-head: 'Noto Serif JP', serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-en: 'Noto Serif JP', serif;

  --fs-h1: clamp(27px, 3.2vw, 40px);
  --fs-h2: clamp(23px, 2.6vw, 31px);
  --fs-h3: clamp(17px, 1.5vw, 19px);
  --fs-section-en: clamp(18px, 1.7vw, 22px);
  --fs-hero-en: clamp(20px, 2vw, 26px);
  --fs-footer-org: 24px;

  --ls-head: 0.02em;
  --ls-en: 0.16em;
  --fw-head: 600;
  --section-en-weight: 500;
  --lh-body: 1.9;

  /* --- 余白（スマホ） --- */
  --sp-section: 64px;
  --sp-block: 32px;
  --sp-inner: 16px;
  --max-width: 1080px;

  /* --- 動き：控えめ --- */
  --motion-y: 16px;
  --motion-dur: 0.55s;
  --motion-stagger: 0.08s;

  /* --- スイッチ：装飾はすべてオフ、写真は最小限 --- */
  --photo-offset: 0px;
  --band-skew: 0px;
  --chip-display: none;
  --rule-display: none;
  --fig-optional-display: none;   /* 脇役の写真を出さない（ヒーロー＋1枚だけ） */
  --nav-en-display: none;
  --header-transparent: 0;        /* ヘッダーは最初から白背景で固定 */
  --hero-media-opacity: 1;
}

/* ヒーローだけ少しゆっくり出す */
#hero .fade-in { --motion-dur: 0.7s; }

@media (min-width: 768px) {
  :root {
    --sp-section: 112px;
    --sp-block: 48px;
    --sp-inner: 20px;
  }
  /* 脇役の写真を出さないパターンなので、写真列を作らず1カラムにする */
  .media-row.optional-figure { grid-template-columns: 1fr; }
}

/* =========================================================
   FLOW（受け入れの流れ）— 2026-09-11 Uiさんのご指定
   ・カード1〜6を上から下へ1列に並べる（PC・スマホ共通）
   ・カードとカードの間を縦向きの点線でつなぎ、流れを示す
   ※ 当初は「PCだけ左→右の縦書き6列」にしていたが、
     不自然だったため上→下の1列に統一した（2026-09-11 変更）。
   ========================================================= */

:root {
  --c-flow-line: #A8BCD0;   /* 流れを示す点線の色 */
  --flow-gap: 26px;
}

.flow-steps {
  grid-template-columns: 1fr;
  gap: var(--flow-gap);
}

.flow-step { position: relative; }

/* カードとカードの間をつなぐ縦向きの点線。
   番号（40px角・左パディング20px）の中心＝左から40pxの位置に通す。 */
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 40px;
  margin-left: -1px;
  top: 100%;
  height: var(--flow-gap);
  border-left: 2px dashed var(--c-flow-line);
}