/* ==========================================================================
   ありがとうポスト｜FANBASSADOR powered by STAFF START
   ブランドサイト
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --red: #bd1b21;
  /* ボタンのホバー用。--red を12%暗くした値。白文字とのコントラストは
     6.28:1 → 7.58:1 と上がるので、可読性は落ちない */
  --red-dark: #a6181d;
  /* テキスト色は2段だけ。以前は #1a1a1a〜#8b8b8b の4段で強弱を付けていたが、
     本文系は1色に統一し、強弱は文字サイズと太さで表現する方針に変更した。
     --ink-muted は「二次情報」専用（注釈・出典・カウンター＋メタラベル）。
     白地5.88:1 / オフ白地5.55:1 で WCAG AA 4.5:1 をクリアする値
     （以前の #a5a5a5 は2.4:1 で読みにくかった）。この2色以外は増やさない */
  --ink: #182343;
  --ink-muted: #5a6480;
  --bg: #fff;
  --bg-alt: #faf8f6;
  --rule: #e4dfda;
  --rule-soft: #e8e4e0;
  --rule-strong: #dad4ce;

  --font-jp: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --font-en: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --------------------------------------------------------------------
     レイアウトの基準線
     ページ全体を通して縦のラインが2本だけ通るようにするための値。
     すべてのブロックはこのどちらかの幅に乗せる（個別の max-width を
     セクションごとに足さないこと。ラインが増えて「中央に浮いた」印象になる）。
       --container … 全セクション共通の外枠
       --measure   … 読ませる文章の幅（本文・リード・FAQ）
     -------------------------------------------------------------------- */
  --container: 1160px;
  --measure: 720px;
  /* 12カラムを意識したときの列間。カラム区切りの罫線もこの値の中央に置く */
  --col-gap: clamp(20px, 2.2vw, 32px);
  /* 「感謝が届くしくみ」の列間だけは他より広く取りたいので専用の値を持つ。
     区切り罫線と連結線の位置もこの値から計算している。
     .features のローカル宣言だったが、兄弟の .flow から参照できず
     calc() ごと無効になって margin が 0 に落ちる不具合を出したため
     :root に上げた（変数はスコープ外からは見えない） */
  --features-gap: clamp(32px, 4.4vw, 64px);

  /* セクション上下の余白。以前は上限190pxで、通しで見ると間延びして
     見えたため一段詰めた（下げすぎるとセクションの切り替わりが弱くなる） */
  --section-y: clamp(64px, 8.5vw, 120px);
  --gutter: clamp(20px, 4vw, 56px);
  --label-size: 14px;

  /* --------------------------------------------------------------------
     余白スケール
     セクションごとに個別の margin を足さず、この5段から選ぶ。
       --space-xs … 英語ラベル→見出し（ラベルは見出しの一部として近づける）
       --space-sm … 見出し→リード文
       --space-md … ブロック内の小見出し→本文
       --space-lg … 見出しブロック→本体
       --space-xl … セクション内のブロック同士
     -------------------------------------------------------------------- */
  --space-xs: clamp(10px, 1.2vw, 14px);
  --space-sm: clamp(16px, 2vw, 22px);
  --space-md: clamp(20px, 2.6vw, 30px);
  --space-lg: clamp(32px, 4vw, 52px);
  --space-xl: clamp(40px, 4.8vw, 68px);

  /* 角丸。ボタン・矢印は pill / 円にするので、実質「半径を効かせない大きな値」
     と「面を柔らかくする値」の2段だけ持つ */
  --radius-pill: 999px;
  --radius-lg: 22px;
  --radius-md: 14px;
  /* 見出しサイズは3段。全セクションを同寸にすると平坦に見えるため、
     主要セクション（訴えたい所）と補助セクション（読ませる所）で差をつける。
       --h2-size-lg … IMPACT など主張の中心
       --h2-size    … 標準（ABOUT / FEATURES / VALUE / CYCLE / HOW / REAL THANKS）
       --h2-size-sm … FAQ など補助 */
  --h2-size-lg: clamp(30px, 5.2vw, 58px);
  --h2-size: clamp(26px, 4.2vw, 46px);
  --h2-size-sm: clamp(23px, 3.2vw, 34px);
  --body-size: clamp(16px, 1.9vw, 18px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* sticky ヘッダー分のアンカーオフセット */
  scroll-padding-top: clamp(60px, 7vw, 84px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  font-weight: 500;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--red);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.65;
}

img {
  max-width: 100%;
  /* width / height 属性を CLS 対策で入れているため、height: auto が無いと
     高さが属性値のまま固定され、幅だけ伸縮して縦横比が崩れる。
     縦横比を保つ側の指定はここに集約する（.slide__avatar のように
     意図的に箱サイズを固定するものだけがクラス側で上書きする） */
  height: auto;
}

button {
  font-family: inherit;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* スクロール出現演出。要素単位・セクション単位のどちらにも同じクラスを
   付けるだけで使える汎用ユーティリティ（挙動は main.js の IntersectionObserver）。
   一度 is-visible が付いたら二度と外さないので、再生は初回のみ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */
.section {
  padding: var(--section-y) var(--gutter);
}

.section--alt {
  background: var(--bg-alt);
}

/* 各セクションの外枠。すべての `*__inner` がこれを継ぐことで、
   ページ全体で左端（PCでは gutter + (100vw-container)/2）が一致する */
.about__inner,
.service__inner,
.how__inner,
.value__inner,
.cycle__inner,
.impact__inner,
.thanks__inner,
.faq__inner,
.hero__inner,
.cta__inner,
.footer__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* **見出しブロックは左揃えが既定**（2026-09-18 に中央寄せから変更）。
   ページ全体を左の基準線（1440pxで140px）に揃えたほうが締まる、という判断。
   中央に残すのは IMPACT だけで、そこがページ唯一の「引きの見せ場」になる */
.section__head {
  text-align: left;
}

/* 中央に残すのは IMPACT と #service の2つ。
   IMPACT はストーリーの山、#service は図（インフィニティ）が中央に来るので、
   見出しも中央のほうが収まる */
#impact > .impact__inner > .section__head,
#service > .service__inner > .section__head {
  text-align: center;
}

/* 見出しブロックの直後に来る本体の余白は、セクションを問わずこの1か所で決める */
.section__head + * {
  margin-top: var(--space-lg);
}

/* ラベルは見出しと1つのカタマリとして読ませたいので、間隔は詰める */
.label {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-en);
  font-size: var(--label-size);
  letter-spacing: 0.26em;
  color: var(--red);
}

/* 英語ラベルの枠に日本語を入れる場合の修飾子。
   .label は Outfit ＋ 字間0.26em だが、Outfit は日本語グリフを持たず、
   0.26em は日本語だと開きすぎる（.poc__eyebrow と同じ理由） */
.label--jp {
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
}

/* 本文のうしろに続く「※〜」の注記。注釈系なので --ink-muted・13px
   （.stat__note と同じ扱い。色は2段のままで3段目を作らない） */
.desc-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.section__title {
  font-size: var(--h2-size);
  font-weight: 900;
  line-height: 1.6;
}

.section__title--lg {
  font-size: var(--h2-size-lg);
}

.section__title--sm {
  font-size: var(--h2-size-sm);
}

/* 補助セクションは上下の余白も少し詰めて、主要セクションとの差をつける */
.section--tight {
  padding-block: calc(var(--section-y) * 0.72);
}

/* ロゴ画像。サイズ指定は width 側だけで行い、高さはベースCSSの
   img{height:auto} と width/height 属性の縦横比にまかせる。
   ベースの max-width:100% も効かせたままにしてあるので、ヘッダーが
   狭まって枠が縮んだときはロゴが縦横比を保ったまま小さくなる
   （height を固定すると幅だけ縮んで歪むため、この形は崩さないこと） */
.brand-logo {
  display: block;
}

/* ボタン：pill（左右が半円）・影なし。
   border-radius: 50% は「幅の50%×高さの50%」の楕円になり、横長のボタンでは
   意図した形にならないため、高さを超える固定値を入れて半円に丸めている */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  height: 60px;
  padding: 0 26px;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color 0.25s ease;
}

/* ホバーは「少し暗い赤」＋矢印だけ右へ6px。地色を紺に変える派手な
   反転ではなく、同系色のまま沈める。キーボード操作でも同じ状態に
   なるよう :focus-visible にも当てている */
.btn:hover,
.btn:focus-visible {
  opacity: 1;
  background: var(--red-dark);
}

.btn__arrow {
  font-family: var(--font-en);
  /* 動かすのは矢印だけ。ボタンごと動かすと落ち着かない */
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(6px);
}

.btn--wide {
  justify-content: space-between;
  min-width: 260px;
}

.btn--header {
  height: 46px;
  padding: 0 22px;
  gap: 12px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  height: clamp(60px, 7vw, 84px);
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

/* FANBASSADOR と STAFF START を並列に置く。区切りは他のカラム区切りと
   同じ1本罫。2つのロゴは高さを揃えるのではなく、ワードマークの
   目方（文字の太さ×大きさ）が釣り合うように STAFF START 側を
   6割強の幅に落としている（FANBASSADOR 側は下に "powered by" の
   小さい行を抱えているぶん、同じ高さにすると相手が勝って見える） */
.header__brands {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  min-width: 0;
  margin-right: auto;
}

.header__brand {
  flex: 0 1 auto;
  /* CTAに押されたときはロゴ側が縮む（歪まずに小さくなる） */
  min-width: 0;
}

.header__brand .brand-logo {
  width: clamp(150px, 21vw, 224px);
}

.header__brand-sep {
  flex: none;
  width: 1px;
  height: clamp(20px, 2.4vw, 28px);
  background: var(--rule-strong);
}

/* FANBASSADOR 側と「ロゴマーク（パズルのアイコン）の高さ」を揃えた幅。
   画像解析の実測値:
     FANBASSADOR  マーク 66×66 / 箱 500×66 → マークは箱の高さの 100%
     STAFF START  マーク 27×27 / 箱 189×28 → マークは箱の高さの 96.4%
   224px 表示時の FANBASSADOR のマークは 29.6px。これに合わせると
   STAFF START は 207px になる。以降は FANBASSADOR 側の 0.9255 倍で
   追従させている（150→139 / 21vw→19.4vw / 224→207）。
   片方だけ幅を変えるとマークの大きさがズレる。
   なお字面（ワードマーク）の高さでは揃っていない。FANBASSADOR 側は箱の中に
   "powered by" の行を抱えているぶん文字が小さく、STAFF START の文字のほうが
   14%大きくなる。**マークの大きさを優先する判断**でこうしてある。 */
.brand-logo--partner {
  flex: none;
  width: clamp(139px, 19.4vw, 207px);
  height: auto;
}

/* モバイルではヘッダーのボタンが画面幅の50%を占めてロゴと詰まっていたので、
   ボタン・ロゴともに一段小さくする（余白が0だと窮屈に見える） */
@media (max-width: 767px) {
  .btn {
    height: 52px;
    padding: 0 20px;
    gap: 16px;
    font-size: 15.5px;
  }

  .btn--header {
    height: 36px;
    padding: 0 13px;
    font-size: 12.5px;
    gap: 6px;
    letter-spacing: 0.02em;
  }

  /* 1行に収めるための寸法。375pxでの内訳は
       ロゴ98 + 隙間8 + 罫線1 + 隙間8 + ロゴ90 + 隙間10 + CTA109 = 324 / 335
     で11px余る。ここを詰めすぎると flex が先にロゴを縮め、
     FANBASSADOR だけ潰れてマーク高がズレる（実際に99pxまで潰れた） */
  .header__brand .brand-logo {
    width: clamp(80px, 26vw, 120px);
  }

  /* FANBASSADOR 側を縮めたら、こちらも同じ 0.9255 倍で縮めること。
     片方だけだとマークの大きさがズレる（80→74 / 26vw→24.06vw / 120→111） */
  .header__brands .brand-logo--partner {
    width: clamp(74px, 24.06vw, 111px);
  }

  /* ロゴ2つとCTAは必ず1行に収める。そのためにヘッダーのCTAだけ文言を
     「お問い合せ」に短くし（Hero・CTA帯は「導入について相談する」のまま）、
     ロゴも一段小さくしてある。折り返しは使わない */
  .header {
    gap: 10px;
  }

  .header__brands {
    gap: 8px;
  }
}

/* 360px以下は上の寸法でも収まらないので、CTAだけもう一段小さくする
   （320pxでの内訳: ロゴ83 + 25 + ロゴ77 + 10 + CTA89 = 284 → 余白ぎりぎり） */
@media (max-width: 360px) {
  .btn--header {
    height: 34px;
    padding: 0 10px;
    gap: 4px;
    font-size: 11.5px;
  }
}

/* --------------------------------------------------------------------------
   Hero
   写真をセクション全体のフルブリード背景にし、コピーはその上の白地に重ねる
   （CTA帯と同じ構成。人物・スマホは写真の右側にあるため、コピーは左寄せ）
   -------------------------------------------------------------------------- */
.hero {
  /* コピーの文字色。PCは動画の上に載るので白、780px以下は白地に載るので紺。
     1か所で切り替えるためにセクション単位の変数にしてある */
  --hero-fg: #fff;

  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 62vw, 860px);
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 9vw, 120px);
  background-color: #faf8f6;
  /* 動画が再生できない・読み込み前でも同じ絵が出るように、
     動画（hero-pc.mp4）の 0.5 秒目のフレームを敷いておく */
  background-image: url("assets/hero-poster.jpg");
  background-size: cover;
  /* スマホは写真の右寄りにあるので、切り抜きは右を基準にする */
  background-position: right center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 背景動画。静止画と同じ位置・比率で重ねる */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* 動きを減らす設定の人には動画を出さず、下に敷いた静止画を見せる */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* 白文字を読ませるための暗幕。左（コピー側）を濃く、右へ抜く。
   純黒ではなく --ink 寄りの紺にして、サイト全体の色味と揃えている */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(16, 22, 40, 0.58) 0%,
    rgba(16, 22, 40, 0.50) 32%,
    rgba(16, 22, 40, 0.34) 54%,
    rgba(16, 22, 40, 0.16) 76%,
    rgba(16, 22, 40, 0.08) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
}

.hero__copy {
  container-type: inline-size;
  max-width: 640px;
}

.hero__title {
  /* カラム幅基準：PCでは改行は <br> の位置だけで起きる。
     1行目「お客さまからの“ありがとう”が、」は実測で font-size の約14.9倍の幅を
     取る（14文字＋全角引用符の字幅）。.hero__copy 幅 ÷ 14.9 ≒ 6.7cqi が上限なので
     余裕を見て 6.5cqi、640px のとき 41.6px → 上限 42px。
     以前の2行×8文字コピーのときは 56px だった */
  font-size: clamp(30px, 6.5cqi, 42px);
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--hero-fg);
}

/* 暗幕の上では赤が沈むので、動画の上では見出しを白一色にする
   （780px以下の白地に戻ったときだけ、従来どおり赤のアクセントを出す） */
.hero__title em {
  font-style: normal;
  color: inherit;
}

/* 「“ありがとう”が、」を途中で割らない。スマホでは1行目がここで折れて
   「お客さまからの / “ありがとう”が、 / 明日も頑張る力になる。」の3行になる */
.hero__title-unit {
  display: inline-block;
}

.hero__lead {
  margin: clamp(28px, 4vw, 44px) 0 0;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 2.2;
  color: var(--hero-fg);
}

.hero__cta {
  margin-top: clamp(32px, 4.6vw, 52px);
}

/* 背景が写真（植物や棚の陰影で明度が一定しない）なので、赤文字を直置きすると
   コントラスト不足で読めなくなる箇所が出る。ぼかした白地を薄く敷いて、
   どの位置でも可読性を確保する */
.hero__tagline {
  position: absolute;
  right: clamp(14px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  padding: 20px 10px;
  writing-mode: vertical-rl;
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 700;
  line-height: 2.4;
  letter-spacing: 0.22em;
  color: var(--hero-fg);
  /* タグラインは暗幕がほぼ効かない右端に置くため、明るいフレームだと
     白文字のコントラストが2.2:1まで落ちる。元デザインが白地パネルを
     敷いていたのと同じ理由で、こちらは暗いパネルを敷いて可読性を担保する */
  background: rgba(16, 22, 40, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
}

/* 780〜1180px は横並びを保つが、コピー幅を固定640pxのままにすると
   写真右側のスマホに重なるので、列幅に対する割合で絞り、
   白グラデーションの効く範囲も右へ伸ばす */
@media (max-width: 1180px) and (min-width: 768px) {
  .hero__copy {
    max-width: min(640px, 56%);
  }

  /* 縦書きは高さが要る。この幅では字を詰めて1列に収める */
  .hero__tagline {
    font-size: clamp(11px, 1.5vw, 13px);
    line-height: 2;
    letter-spacing: 0.16em;
    padding: 14px 8px;
  }

  /* コピー欄が狭くなるぶん暗幕を少しだけ手前まで効かせる。
     ここを白グラデーションにすると、白文字が白地に乗って完全に消える
     （実際にその状態を作ってしまったので、必ず暗幕側で調整すること） */
  .hero::before {
    background: linear-gradient(
      90deg,
      rgba(16, 22, 40, 0.62) 0%,
      rgba(16, 22, 40, 0.54) 38%,
      rgba(16, 22, 40, 0.34) 60%,
      rgba(16, 22, 40, 0.16) 80%,
      rgba(16, 22, 40, 0.08) 100%
    );
  }
}

/* 横並びを保つには、写真右側のスマホを避けてコピーを置ける幅が要る。
   780px を下回るとコピーがスマホに重なるため積み替える。
   スマホは縦長の被写体なので、CTA帯のように「セクション全体を背景として
   覆う」やり方だと高さ方向も cover で引き伸ばされ、スマホ自体がコピーの
   高さまで伸びて結局重なってしまう。そのため積み替え時は写真を固定比率の
   帯として独立させ、下端をグラデーションで白地に溶かし込み、コピーは
   その帯の外（純粋な白地）に流し込む */
/* 768px未満（スマホ）も積み替えず、動画の上に白文字を重ねる。
   コピーが横幅いっぱいに広がるので、暗幕は左右で振らずほぼ均一に敷く。
   動画はスマホ用の縦長素材（hero-sp.mp4）に main.js が差し替える */
@media (max-width: 767px) {
  .hero {
    /* スマホは縦長の専用素材に差し替える（PC用の横長素材だと
       cover で大きく切り取られて被写体が収まらないため）。
       被写体（顔）を上に残したいので切り抜きは上基準、
       コピーは flex-end で下に寄せる。静止画は hero-sp.mp4 の 0.5 秒目 */
    background-image: url("assets/hero-sp.jpg?v=20260924b");
    background-position: center top;
    align-items: flex-end;
    /* 素材は608×1080（約 9:16）。390px幅で全体を出すには約693px要るので、
       cover での切り取りが目立たない高さまで上げる */
    min-height: clamp(620px, 178vw, 860px);
    /* 下パディングを16px上乗せしてコピー・CTAを少し上へ */
    padding: clamp(28px, 7vw, 48px) var(--gutter) clamp(48px, 8vw + 16px, 72px);
  }

  /* 動画も静止画と同じく上基準で切り抜く（被写体の顔を残す） */
  .hero__video {
    object-position: center top;
  }

  /* コピーが下寄せなので、上は薄くして写真を見せ、下だけ濃くする */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(16, 22, 40, 0.18) 0%,
      rgba(16, 22, 40, 0.30) 38%,
      rgba(16, 22, 40, 0.62) 68%,
      rgba(16, 22, 40, 0.78) 100%
    );
  }

  .hero__copy {
    max-width: none;
  }

  .hero__title {
    /* 最長行「明日も頑張る力になる。」11文字が 390px 幅（内側 350px）に
       収まる 1文字 ≤ 31px を上限にする。8.6vw だと 33.5px で折れていた */
    font-size: clamp(26px, 8vw, 36px);
  }

  .hero__lead {
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 2;
  }

  /* 縦書きは高さを食うので、この幅では出さない */
  .hero__tagline {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about {
  position: relative;
  /* ゆらぎのブロブがセクションの外へはみ出さないように切る */
  overflow: hidden;
  background: url("assets/about-bg.png") center / cover no-repeat;
}

/* 背景をゆっくり揺らがせる。色は about-bg.png から拾った2色だけで、
   新しい色相は足していない（デザイン方針どおり）。
   **動かすのは transform だけ**にしてある。border-radius を毎フレーム
   変えると再描画が走り、blur と重なって重くなるため。
   ぼかした塊を非均等に拡縮＋回転させることで「うにょうにょ」を作る。
   2つの周期をずらしている（24秒と31秒）ので、動きが揃って見えることがない */
.about::before,
.about::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
  pointer-events: none;
  animation: about-drift 20s ease-in-out infinite;
}

.about::before {
  top: -14vw;
  left: -12vw;
  width: 46vw;
  height: 46vw;
  background: #fecbae;
}

.about::after {
  right: -14vw;
  bottom: -16vw;
  width: 40vw;
  height: 40vw;
  background: #d9e6d1;
  animation-duration: 26s;
  animation-direction: reverse;
}

/* 中身は必ずブロブより前に出す */
.about > * {
  position: relative;
  z-index: 1;
}

/* 振れ幅の目安（589pxのブロブの場合）: 移動は左右におよそ±45px、
   拡縮は 0.88〜1.18倍。**強すぎると感じたら translate と scale を下げる**。
   速さは .about::before の animation-duration（20秒 / ::after は26秒） */
@keyframes about-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1);
  }
  25% {
    transform: translate3d(7%, -8%, 0) rotate(12deg) scale(1.18, 0.88);
  }
  50% {
    transform: translate3d(2%, 6%, 0) rotate(-4deg) scale(0.9, 1.12);
  }
  75% {
    transform: translate3d(-7%, 3%, 0) rotate(-11deg) scale(1.08, 1.16);
  }
}

/* 動きを減らす設定では止める（形と色はそのまま残す） */
@media (prefers-reduced-motion: reduce) {
  .about::before,
  .about::after {
    animation: none;
  }
}

/* ブランドメッセージなので中央寄せは維持する。ただし外枠は共通の
   --container に合わせ、中身は --measure に収めて他セクションの
   本文と同じ縦ラインに乗せる */
.about__inner {
  text-align: left;
}

.about__title,
.about__body,
.about__note {
  max-width: var(--measure);
  /* 左の基準線に付ける。中央寄せに戻すとページの縦ラインが1本増える */
  margin-inline: 0;
}

.about__title {
  font-size: var(--h2-size);
  font-weight: 900;
  line-height: 1.62;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* スマホでは ABOUT の見出しだけ一段小さくする。--h2-size は :root で全セクション共通
   なので、ここ（.about__title）に限定して上書きし、他の見出しには影響させない */
@media (max-width: 767px) {
  .about__title {
    --h2-size: clamp(24px, 4.1vw, 44px);
  }
}

.about__body {
  margin-top: var(--space-lg);
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 2.3;
  /* 3行目「その一言が自信になり…と思える。」が 38字で 722px となり、
     --measure(720px) をわずか2px超えて4行目に折り返していた（レビュー指摘）。
     幅を広げると縦の基準線が増えるので、字間側で 7px 詰めて収めている。
     本文を増減するときは1行目〜3行目の実測幅を確認すること */
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.about__body p + p {
  margin-top: 30px;
}

.about__body strong {
  color: var(--ink);
  font-weight: 700;
}

.about__note {
  margin-top: var(--space-lg);
  padding-top: 26px;
  border-top: 1px solid var(--rule-soft);
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink-muted);
  text-align: left;
}

/* --------------------------------------------------------------------------
   ファンバサダーとは（#service）
   本文は他セクションと同じ --measure に乗せる。
   -------------------------------------------------------------------------- */
.service__body {
  /* 見出しと図が中央なので、**ブロックは**中央に置く。
     ただし**中の文字は左揃え**にすること。中央揃えにすると4行のうち
     最後が「を実現します。」だけの短い行になって落ち着かず、
     日本語は行頭が毎行ずれて読みづらくもなる（レビュー指摘） */
  /* **`margin` の一括指定を使わないこと。** `margin: 0 auto` と書くと
     上マージンまで0になり、`.section__head + *` が与える見出し→本体の
     52px を打ち消してしまう（実際に間隔が0pxになっていた）。
     横方向だけ auto にする */
  margin-inline: auto;
  max-width: var(--measure);
  font-size: var(--body-size);
  line-height: 1.9;
  color: var(--ink);
  text-align: left;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   FANBASSADOR × STAFF START の対の図（.infinity）
   左右に円を置き、その間に向かい合う2本の矢印で「感謝」と「より良い接客」の
   循環を示す。画像はロゴのSVGと写真アバターだけで、円・矢印・吹き出しは
   border と CSS で組んでいるので、幅が変わっても線が太らず、文字も実テキストのまま。
   担当の区別は赤(FANBASSADOR)と紺(STAFF START)の2色だけ。3色目は足さない。
   図全体を role="img" + aria-label にしてあるので中の文字は読み上げ対象から
   外れる（中に見出しやリンクを置かないこと）。
   （以前は円2つを1点で接した無限大の形に、8の字を回る三角形を重ねていた。
     「何が・どちらへ届くのか」を目立たせるため、接点をほどいて矢印に置き換えた） */
.infinity {
  --lobe: clamp(158px, 21vw, 230px);
  /* アバターのサイズ。円(--lobe)に対して常に一定の見た目比率になるよう
     vw で可変にしつつ、小さすぎ／大きすぎを clamp で止める */
  --avatar: clamp(40px, 5.4vw, 60px);
  /* 円と円の間＝矢印を置く幅。ラベル「より良い接客」（14px太字・6文字＋余白）が
     収まる 120px を下限にする */
  --flow: clamp(120px, 14vw, 160px);

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: var(--space-lg);
}

.infinity__lobe {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--lobe);
  height: var(--lobe);
  border: 2px solid;
  border-radius: 50%;
}

.infinity__lobe--fanba {
  border-color: var(--red);
}

.infinity__lobe--ss {
  border-color: var(--ink);
}

.infinity__logo {
  display: block;
  width: min(68%, 156px);
  height: auto;
}

.infinity__role {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;   /* 日本語なので英字ラベルの 0.26em は使わない */
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   円のまわりを漂うアバター（.infinity__avatar）
   FANBASSADOR側＝お客さま3人、STAFF START側＝スタッフ4人を円周のすぐ外側に
   浮かせる。中身は写真（円形切り出しの WebP）で、枠線の色だけで
   お客さま(赤)／スタッフ(紺)の担当を示す。図の線色は増やさない。 */
.infinity__avatar {
  position: absolute;
  width: var(--avatar);
  height: var(--avatar);
  /* 中央寄せは個別プロパティの translate で行い、transform は
     下の float アニメーション専用に空けておく（centering と animation を
     同じプロパティで奪い合わないための切り分け） */
  translate: -50% -50%;
  filter: drop-shadow(0 4px 10px rgba(24, 35, 67, 0.12));
  pointer-events: none;   /* 図全体が role="img" の装飾要素なのでクリック対象にしない */
  animation: infinity-float var(--avatar-dur, 4.8s) ease-in-out infinite;
  animation-delay: var(--avatar-delay, 0s);
}

/* 上下にふわっと7px浮く＋わずかに傾いて揺れて見える有機的な動き。
   transform のみを動かす（位置の中心決めは上の translate が別に持っている） */
/* アバターは両側とも写真（リング内側だけを円形に切り出した透過WebP）。
   枠線はここで描いて、お客さま側は --red、スタッフ側は --ink に揃える。
   元画像に焼き込まれたリング（約10px）をそのまま縮小すると 60px 表示で
   0.7px になって消えかかるのと、色がブランド色と微妙にずれる（赤 #c90000 /
   紺 #202945）ため、画像側のリングは切り落として使わない。
   太さ 2px は円本体の border と同じ */
.infinity__avatar {
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.infinity__lobe--fanba .infinity__avatar {
  border-color: var(--red);
}

@keyframes infinity-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .infinity__avatar {
    animation: none;   /* 揺れは止めるが、アバター自体は表示したままにする */
  }
}

/* 角度は「0°=3時方向、時計回りに増える」で統一し、円中心からの半径を
   円のフレーム(border)の外側にちょうど出る 57%（--lobeの57%）に固定している。
   50%ちょうどだと円周線の真上に重なってしまうため、56〜58%の間で
   フレームの外に逃がす。位置は
     left = 50% + 57% * cos(角度), top = 50% + 57% * sin(角度)
   をあらかじめ計算した数値。接点（左円3時 / 右円9時）と矢じり
   （左円12時 / 右円6時）の角度は避けてある。 */

/* お客さま3人（FANBASSADOR側・左円） */
.infinity__lobe--fanba .infinity__avatar--1 {
  /* 220° 左上 */
  top: 13.36%;
  left: 6.34%;
  --avatar-dur: 4.6s;
  --avatar-delay: -0.6s;
}

.infinity__lobe--fanba .infinity__avatar--2 {
  /* 180° 真左（円の中心の高さ） */
  top: 50.00%;
  left: -7.00%;
  --avatar-dur: 5.2s;
  --avatar-delay: -1.9s;
}

.infinity__lobe--fanba .infinity__avatar--3 {
  /* 135° 左下 */
  top: 90.31%;
  left: 9.69%;
  --avatar-dur: 4.9s;
  --avatar-delay: -3.1s;
}

/* スタッフ4人（STAFF START側・右円） */
.infinity__lobe--ss .infinity__avatar--1 {
  /* 315° 上右 */
  top: 9.70%;
  left: 90.30%;
  --avatar-dur: 5.5s;
  --avatar-delay: -0.9s;
}

.infinity__lobe--ss .infinity__avatar--2 {
  /* 345° 右（少し上寄り） */
  top: 35.25%;
  left: 105.06%;
  --avatar-dur: 4.3s;
  --avatar-delay: -2.4s;
}

.infinity__lobe--ss .infinity__avatar--3 {
  /* 15° 右（少し下寄り） */
  top: 64.75%;
  left: 105.06%;
  --avatar-dur: 5.0s;
  --avatar-delay: -3.6s;
}

.infinity__lobe--ss .infinity__avatar--4 {
  /* 55° 下右 */
  top: 96.69%;
  left: 82.70%;
  --avatar-dur: 4.7s;
  --avatar-delay: -1.4s;
}

/* --------------------------------------------------------------------------
   吹き出し（.infinity__bubble）
   矢印の上を進むマーカー（.infinity__arrow-line::before / 8s）に同期して、
     前半 0〜4s（感謝の矢印を右へ進む間）………… お客さま3人が順に
     後半 4〜8s（より良い接客の矢印を左へ進む間）… スタッフ3人が順に
   ひとことずつ言う。keyframes は1種類（約1.1秒だけ出て消える）で、
   animation-delay で出す時刻をずらしている。周期は三角形と同じ 8s。
   **周期を変えるときは infinity-flow-*・infinity-bubble・各 delay を必ず揃えること。**

   置き場所は「主のアバターの外側」。各吹き出しは
     --ax / --ay … 主アバターの中心（アバターの top/left と同じ値）
     --bx / --by … アバターから見て吹き出しを出す方向の単位ベクトル
   を持ち、translate で「自分の半分＋アバター半径＋6px」だけその方向へずらす。
   しっぽ（::after）は --tx/--ty（吹き出し箱の中の位置）と --tclip（見せる半分）で
   アバター側の辺に付ける。向きは横並び／縦積みで変わるので、@media 内では
   これらの変数だけを差し替える（構造は触らない）。
   色は円と同じ2色。文字は 12px 太字。
   -------------------------------------------------------------------------- */
.infinity__bubble {
  --bx: 0;
  --by: -1;
  --tx: 50%;
  --ty: 100%;
  --tclip: polygon(100% 0, 100% 100%, 0 100%);

  position: absolute;
  z-index: 1;                 /* アバターより手前 */
  left: var(--ax);
  top: var(--ay);
  padding: 5px 11px;
  border: 2px solid var(--ink);
  /* pill にせず角丸を小さめに留める。しっぽを辺の端寄りに付けるので直線部分が要る */
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(24, 35, 67, 0.12);
  pointer-events: none;
  /* 位置決めは translate、出現の scale は transform に分ける（アバターと同じ切り分け）。
     % は自分の箱基準なので「アバター中心から、方向ベクトル×(自分の半分＋半径＋6px)」になる */
  translate: calc(-50% + var(--bx) * (50% + var(--avatar) / 2 + 6px))
             calc(-50% + var(--by) * (50% + var(--avatar) / 2 + 6px));
  transform-origin: var(--tx) var(--ty);   /* しっぽの根元から膨らむ */
  opacity: 0;
  animation: infinity-bubble 8s linear infinite;
  animation-delay: var(--bubble-delay, 0s);
}

/* しっぽ。4辺に枠線を持つ小さな正方形を45°回し、辺の上に中心を置いて、
   clip-path で外にはみ出す半分だけ見せる。辺の枠線は白背景で上書きされて
   吹き出し本体とつながる。どの半分を見せるかは --tclip（下に出す＝右下の三角形、
   右＝右上、上＝左上、左＝左下） */
.infinity__bubble::after {
  content: "";
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid;
  border-color: inherit;
  translate: -50% -50%;
  rotate: 45deg;
  clip-path: var(--tclip);
}

.infinity__lobe--fanba .infinity__bubble {
  border-color: var(--red);
  color: var(--red);
}

/* ---- 横並び時の向き。角度はアバターの角度（0°=3時・時計回り）に合わせる ---- */
/* お客さま1（220°・左上）… 左上へ。しっぽは下辺の右寄り */
.infinity__lobe--fanba .infinity__bubble--1 {
  --ax: 6.34%;
  --ay: 13.36%;
  --bx: -0.766;
  --by: -0.643;
  --tx: 74%;
  --ty: 100%;
  --bubble-delay: 0.2s;
}

/* お客さま2（180°・左）… 真左へ。しっぽは右辺の中央 */
.infinity__lobe--fanba .infinity__bubble--2 {
  --ax: -7.00%;
  --ay: 50.00%;
  --bx: -1;
  --by: 0;
  --tx: 100%;
  --ty: 50%;
  --tclip: polygon(0 0, 100% 0, 100% 100%);
  --bubble-delay: 1.45s;
}

/* お客さま3（135°・左下）… 左下へ。しっぽは上辺の右寄り */
.infinity__lobe--fanba .infinity__bubble--3 {
  --ax: 9.69%;
  --ay: 90.31%;
  --bx: -0.707;
  --by: 0.707;
  --tx: 74%;
  --ty: 0%;
  --tclip: polygon(0 0, 100% 0, 0 100%);
  --bubble-delay: 2.7s;
}

/* スタッフ1（315°・右上）… 右上へ。しっぽは下辺の左寄り */
.infinity__lobe--ss .infinity__bubble--1 {
  --ax: 90.30%;
  --ay: 9.70%;
  --bx: 0.707;
  --by: -0.707;
  --tx: 22%;
  --ty: 100%;
  --bubble-delay: 4.2s;
}

/* スタッフ2（345°・右やや上）… 真右だと右上のアバター1と重なるので右上寄り(330°)へ。
   しっぽは左辺の下寄り */
.infinity__lobe--ss .infinity__bubble--2 {
  --ax: 105.06%;
  --ay: 35.25%;
  --bx: 0.866;
  --by: -0.5;
  --tx: 0%;
  --ty: 68%;
  --tclip: polygon(0 0, 0 100%, 100% 100%);
  --bubble-delay: 5.45s;
}

/* スタッフ3の吹き出しはアバター4（55°・右下）に付ける … 右下へ。しっぽは上辺の左寄り */
.infinity__lobe--ss .infinity__bubble--3 {
  --ax: 82.70%;
  --ay: 96.69%;
  --bx: 0.574;
  --by: 0.819;
  --tx: 32%;
  --ty: 0%;
  --tclip: polygon(0 0, 100% 0, 0 100%);
  --bubble-delay: 6.7s;
}

/* 出現は「ぽん」と少し膨らんでから戻り、約1.1秒（8sの13.5%）で縮みながら消える。
   3人ぶんを 1.25s 間隔で並べると 0.2→3.8s に収まり、マーカーが届く 4s の前に終わる */
@keyframes infinity-bubble {
  0%          { opacity: 0; transform: scale(0.7); }
  1.5%        { opacity: 1; transform: scale(1.06); }
  3%          { transform: scale(1); }
  11%         { opacity: 1; transform: scale(1); }
  13.5%, 100% { opacity: 0; transform: scale(0.85); }
}

/* 動きを減らす設定ではマーカーが出ないので、各側の最初のひとことだけ出したままにする
   （6つ全部出すとアバターの周りが埋まる） */
@media (prefers-reduced-motion: reduce) {
  .infinity__bubble {
    animation: none;
  }

  .infinity__bubble--1 {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   円の間の矢印（.infinity__flow / .infinity__arrow）
   上：赤の右向き矢印＋ラベル「感謝」……… お客さま → スタッフ
   下：紺の左向き矢印＋ラベル「より良い接客」… スタッフ → お客さま
   線は 3px（円の 2px より僅かに太く、主役だと分かる程度）、矢じりは塗りの三角、
   ラベルは塗りの角丸に白文字で、図の中で一番目に入るようにしている。
   線の上を小さな三角のマーカーが進む（前半4秒は上を右へ、後半4秒は下を左へ）。
   吹き出しと同じ 8s 周期なので、お客さまの声と一緒に感謝が渡り、
   スタッフの声と一緒に接客が返る、という順で見える。
   -------------------------------------------------------------------------- */
.infinity__flow {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;                 /* 2本の矢印の間。中央の高さに対して上下対称 */
  width: var(--flow);
  /* 線の端が円の線にぶつからないよう、両端に少し余白を取る */
  padding-inline: 10px;
  box-sizing: border-box;
}

.infinity__arrow {
  --arrow: var(--ink);       /* 矢印の色。上の矢印だけ --red に差し替える */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--arrow);
}

.infinity__arrow--thanks {
  --arrow: var(--red);
}

.infinity__arrow-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--arrow);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: nowrap;
}

/* 線。矢じり（::after）と進むマーカー（::before）を両端・線上に置く */
.infinity__arrow-line {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--arrow);
}

/* 矢じり。線の色で塗った三角形。右向きを基本に、下の矢印は左向きに反転 */
.infinity__arrow-line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--arrow);
  translate: 0 -50%;
}

.infinity__arrow--service .infinity__arrow-line::after {
  right: auto;
  left: -2px;
  border-width: 7px 12px 7px 0;
  border-color: transparent var(--arrow) transparent transparent;
}

/* 進むマーカー。線より一段濃く見えるよう白フチ付きの小さな丸にする。
   位置は --from → --to（線に対する%）を keyframes で動かし、
   表示の窓は infinity-flow-vis で切る。下の矢印は delay 4s で後半に回す */
.infinity__arrow-line::before {
  --from: 0%;
  --to: 100%;

  content: "";
  position: absolute;
  top: 50%;
  left: var(--from);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--arrow);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--arrow);
  translate: -50% -50%;
  opacity: 0;
  animation: infinity-flow-h 8s linear infinite, infinity-flow-vis 8s linear infinite;
  animation-delay: var(--flow-delay, 0s);
}

.infinity__arrow--service .infinity__arrow-line::before {
  --from: 100%;
  --to: 0%;
  --flow-delay: 4s;
}

/* 0〜45%（3.6秒）で端から端まで進み、残りは終点で待つ。
   ease-in-out で「送り出して・届く」感じを出す */
@keyframes infinity-flow-h {
  0%   { left: var(--from); animation-timing-function: ease-in-out; }
  45%, 100% { left: var(--to); }
}

@keyframes infinity-flow-v {
  0%   { top: var(--from); animation-timing-function: ease-in-out; }
  45%, 100% { top: var(--to); }
}

@keyframes infinity-flow-vis {
  0%, 100% { opacity: 0; }
  2%, 43%  { opacity: 1; }
  46%      { opacity: 0; }
}

/* 動きを減らす設定ではマーカーを出さない。向きは矢じりとラベルで伝わる */
@media (prefers-reduced-motion: reduce) {
  .infinity__arrow-line::before {
    display: none;
  }
}

/* 円2つと矢印を横に並べると 1 行で 560px 前後になり、左右の吹き出し
   （幅 100〜160px）も外側に出るので、700px を切ったら縦に積む。
   縦積みでは矢印も縦向きにし、左に「感謝↓」右に「↑より良い接客」を並べる */
@media (max-width: 700px) {
  .infinity {
    flex-direction: column;
  }

  .infinity__flow {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 36px;
    width: auto;
    height: 132px;              /* 縦書きラベル「より良い接客」6文字が収まる高さ */
    padding-inline: 0;
    padding-block: 10px;
  }

  /* 上の矢印は [ラベル][線] の順で左に、下の矢印は [線][ラベル] の順で右に。
     HTML の順のまま row にすると「感謝」が線の左に来るので、そのまま使える */
  .infinity__arrow {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }

  .infinity__arrow-label {
    writing-mode: vertical-rl;
    padding: 12px 4px;
    font-size: 13px;
    letter-spacing: 0.12em;
    align-self: center;
  }

  .infinity__arrow-line {
    width: 3px;
    height: auto;
  }

  /* 矢じりを下向き（感謝）／上向き（接客）に */
  .infinity__arrow-line::after {
    top: auto;
    right: auto;
    bottom: -2px;
    left: 50%;
    border-width: 12px 7px 0 7px;
    border-color: var(--arrow) transparent transparent transparent;
    translate: -50% 0;
  }

  /* 横並び用の `left: -2px`（.infinity__arrow--service … ::after）は詳細度が高く、
     上の `left: 50%` より勝ってしまうので、ここでも left を中央に戻す。
     戻し忘れると上向きの矢じりだけ線から右にずれる */
  .infinity__arrow--service .infinity__arrow-line::after {
    bottom: auto;
    top: -2px;
    left: 50%;
    border-width: 0 7px 12px 7px;
    border-color: transparent transparent var(--arrow) transparent;
  }

  /* マーカーは top を動かす */
  .infinity__arrow-line::before {
    left: 50%;
    top: var(--from);
    animation-name: infinity-flow-v, infinity-flow-vis;
  }

  /* 縦積みでは上下（90°/270°）が矢印側になるので、
     アバターは4つの方位を避けた斜め45°刻みの位置に組み直す。
     半径は横並び時と同じ57%のまま（%指定なので円の直径が変わっても
     フレームの外にちょうど出る比率は保たれる）。狭い画面向けに
     アバター自体も少し小さくする */
  .infinity {
    --avatar: 40px;
  }

  /* 上の円は 真上(270°) と 左右やや下(155°/25°) の3点。下の円（矢印側）に
     近い真下(90°)は空ける */
  .infinity__lobe--fanba .infinity__avatar--1 {
    /* 155° 左やや下 */
    top: 74.09%;
    left: -1.66%;
  }

  .infinity__lobe--fanba .infinity__avatar--2 {
    /* 270° 真上 */
    top: -7.00%;
    left: 50.00%;
  }

  .infinity__lobe--fanba .infinity__avatar--3 {
    /* 25° 右やや下（1枚目と左右対称） */
    top: 74.09%;
    left: 101.66%;
  }

  .infinity__lobe--ss .infinity__avatar--1 {
    /* 35° 右下寄り（接点90°・矢じり0°を避ける） */
    top: 82.70%;
    left: 96.69%;
  }

  .infinity__lobe--ss .infinity__avatar--2 {
    /* 145° 左下寄り */
    top: 82.70%;
    left: 3.31%;
  }

  .infinity__lobe--ss .infinity__avatar--3 {
    /* 215° 左上寄り */
    top: 17.30%;
    left: 3.31%;
  }

  .infinity__lobe--ss .infinity__avatar--4 {
    /* 325° 右上寄り */
    top: 17.30%;
    left: 96.69%;
  }

  /* 吹き出し（縦積み）。位置と向きを縦積み用に差し替える。
     アバターの座標（--ax/--ay）と向き（--bx/--by）、しっぽの位置を縦積み用に差し替える。
     上の円の吹き出しが図の上端より約37px上に出るので、本文との間を少し広げる */
  .infinity {
    margin-top: calc(var(--space-lg) + 16px);
  }

  .infinity__bubble {
    padding: 4px 9px;
    font-size: 11px;
  }

  /* お客さま1（155°・左やや下）… 左上(240°)へ。真左や45°だと画面の左端を越える。
     しっぽは下辺の右寄り */
  .infinity__lobe--fanba .infinity__bubble--1 {
    --ax: -1.66%;
    --ay: 74.09%;
    --bx: -0.5;
    --by: -0.866;
    --tx: 76%;
    --ty: 100%;
    --tclip: polygon(100% 0, 100% 100%, 0 100%);
  }

  /* お客さま2（270°・真上）… 右横へ。真上に出すと図の上の本文（注記）に掛かる。
     しっぽは左辺の中央 */
  .infinity__lobe--fanba .infinity__bubble--2 {
    --ax: 50.00%;
    --ay: -7.00%;
    --bx: 1;
    --by: 0;
    --tx: 0%;
    --ty: 50%;
    --tclip: polygon(0 0, 0 100%, 100% 100%);
  }

  /* お客さま3（25°・右やや下）… 右上(300°)へ。真右や45°だと画面の右端を越える。
     しっぽは下辺の左寄り */
  .infinity__lobe--fanba .infinity__bubble--3 {
    --ax: 101.66%;
    --ay: 74.09%;
    --bx: 0.5;
    --by: -0.866;
    --tx: 24%;
    --ty: 100%;
    --tclip: polygon(100% 0, 100% 100%, 0 100%);
  }

  /* スタッフ1（35°・右下）… 下へ。2行で幅が広く、真下に置くと右端が画面外に出るので
     0.3ぶん左へ寄せ、しっぽも右寄り(70%)にしてアバターを指す */
  .infinity__lobe--ss .infinity__bubble--1 {
    --ax: 96.69%;
    --ay: 82.70%;
    --bx: -0.3;
    --by: 1;
    --tx: 70%;
    --ty: 0%;
    --tclip: polygon(0 0, 100% 0, 0 100%);
  }

  /* スタッフ2（145°・左下）… 真下へ。しっぽは上辺の中央 */

  .infinity__lobe--ss .infinity__bubble--2 {
    --ax: 3.31%;
    --ay: 82.70%;
    --bx: 0;
    --by: 1;
    --tx: 50%;
    --ty: 0%;
    --tclip: polygon(0 0, 100% 0, 0 100%);
  }

  /* スタッフ3 … 縦積みでは右上のアバター4の外側に幅がない（真右は画面外、真上は上の
     赤い円の線に掛かる、右上でもはみ出す）ので、左下のアバター2（145°）の下に出す。
     同じ場所に出るスタッフ2とは表示時刻が重ならないので共存できる */
  .infinity__lobe--ss .infinity__bubble--3 {
    --ax: 3.31%;
    --ay: 82.70%;
    --bx: 0;
    --by: 1;
    --tx: 50%;
    --ty: 0%;
    --tclip: polygon(0 0, 100% 0, 0 100%);
  }
}

/* --------------------------------------------------------------------------
   自社アンケートの棒グラフ（.poll）
   本文の主張を裏づける「引用」として見せる。唐突に出てこないよう:
     - 幅は本文と同じ --measure（--container まで広げると急に張り出して浮く）
     - 左に1本罫を引き、出典名を頭に置く（サイト内の引用は .poc__quote +
       .poc__source と同じく「囲まずに、線と出典で示す」方針）
     - 設問は本文より少し小さくして、主張ではなく参照だと分かるようにする
   画像ではなく HTML+CSS。ラベルが長いので画像だと狭い画面で読めない。
   数値は各行の `--v` に入れ、**バーの幅とパーセントの位置の両方**を
   そこから計算する（同じ数字を2箇所に書かないため）。
   色は赤（1位）と罫線グレー（他）の2つだけ。3色目を足さないこと。
   -------------------------------------------------------------------------- */
.poll {
  max-width: var(--measure);
  margin: var(--space-xl) auto 0;
  padding-left: clamp(16px, 2.2vw, 28px);
  border-left: 1px solid var(--rule-strong);
  text-align: left;
}

.poll__head {
  margin-bottom: var(--space-md);
}

/* 出典名。これが無いと数字が唐突に出てくる */
.poll__src {
  display: block;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.poll__q {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.poll__q-mark {
  flex: none;
  font-family: var(--font-en);
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 600;
  line-height: 1;
  color: var(--red);
}

/* 本文（16〜18px）より少し小さく。主張ではなく参照として読ませる */
.poll__q-text {
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

.poll__list {
  display: grid;
  gap: clamp(10px, 1.3vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ラベル列は固定幅。可変にするとバーの起点が行ごとにずれる */
.poll__row {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}

.poll__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.poll__row--top .poll__label {
  color: var(--red);
}

.poll__track {
  position: relative;
  height: clamp(26px, 3vw, 36px);
}

.poll__fill {
  position: absolute;
  inset: 0 auto 0 0;
  /* バーの長さ＝パーセントそのもの。最大値で正規化して帯を埋めると、
     64.2%が満杯に見えて誤読を招くうえ、パーセントの置き場が無くなって
     横スクロールが出る（実際に出した）。
     伸びる演出のため、初期値は0にして .is-visible 側で本来の長さにする */
  width: 0;
  background: var(--rule);
  border-radius: var(--radius-md);
}

.poll__row--top .poll__fill {
  background: var(--red);
}

/* パーセントはバーの終端に置く。位置もバーと同じ式から出すのでズレない */
.poll__value {
  position: absolute;
  top: 50%;
  /* バーの終端に追従させるので、初期値もバーと揃えて0にする */
  left: 0;
  transform: translate(10px, -50%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

/* バーが伸びる演出。ABOUT の `.about__inner.reveal` に is-visible が付いた
   タイミングで、0から本来の長さまで伸ばす。パーセントの数字も同じ式・同じ
   イージング・同じ遅延で動かすので、バーの終端から離れない。
   セクションのフェード（0.8秒）に紛れないよう 0.3 秒待ってから始め、
   **下の行から** 0.07 秒ずつずらして「ぎゅーん」と流れるように見せる。
   下から上へ順に伸びて、最後に1位（最上段・赤）が伸びきる形にしてある */
.poll__fill,
.poll__value {
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.3s + var(--i, 0) * 0.07s);
}

.is-visible .poll__fill {
  width: calc(var(--v) * 1%);
}

.is-visible .poll__value {
  left: calc(var(--v) * 1%);
}

/* 下の行ほど先に動かす（7行目が0、1行目が6） */
.poll__row:nth-child(1) { --i: 6; }
.poll__row:nth-child(2) { --i: 5; }
.poll__row:nth-child(3) { --i: 4; }
.poll__row:nth-child(4) { --i: 3; }
.poll__row:nth-child(5) { --i: 2; }
.poll__row:nth-child(6) { --i: 1; }
.poll__row:nth-child(7) { --i: 0; }

/* 動きを減らす設定では、待たされずにすぐ確定値を見せる（全体の指定で
   transition-duration は潰れるが、delay は残るため個別に打ち消す） */
@media (prefers-reduced-motion: reduce) {
  .poll__fill,
  .poll__value {
    transition-delay: 0s;
  }
}

.poll__value b {
  font-family: var(--font-en);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 1位だけは数字を大きくして、ここが答えだと分かるようにする。
   赤は既に使っていて差が付かないので、差は大きさだけで付ける
   （放射線などの装飾は入れない。DESIGN.md の方針どおり） */
.poll__row--top .poll__value {
  color: var(--red);
  font-size: 13px;
}

.poll__row--top .poll__value b {
  font-size: clamp(27px, 3.2vw, 40px);
}


.poll__note {
  margin: var(--space-sm) 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* 狭い画面ではラベルを上、バーを下に積む。横並びのままだと
   ラベルが2〜3行に折れてバーが潰れる */
@media (max-width: 640px) {
  .poll__row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* --------------------------------------------------------------------------
   感謝が届くしくみ の連結線（.flow）
   3列 → 中央に集約 → 見出し → 2列へ分岐、という流れを罫線だけで描く。
   画像を使わないので、列幅が変わっても線の位置が自動で追従する。
   左右の差し込み量は「列の中心」ちょうどに合わせる。単純に 16.67% / 25%
   とすると列間のすき間を勘定に入れられず、実測で ±18px ずれた。
   列幅 = (全幅 - すき間の合計) / 列数 なので、その半分を calc で出す:
     3列 → (100% - すき間×2) / 6
     2列 → (100% - すき間×1) / 4
   すき間の変数をそのまま使うので、画面幅が変わっても追従する。
   -------------------------------------------------------------------------- */
.flow {
  margin-top: var(--space-lg);
  text-align: center;
}

/* 3列から下りてきて中央で合流する部分。上が開いた箱＋下の角丸で表す */
.flow__join {
  height: clamp(28px, 3.4vw, 44px);
  margin-inline: calc((100% - var(--features-gap) * 2) / 6);
  border: 1px solid var(--rule-strong);
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

/* 合流点の赤い点と、そこから見出しへ下りる縦線 */
.flow__title {
  position: relative;
  margin: 0;
  padding-top: clamp(30px, 4vw, 50px);
  font-size: var(--h2-size-sm);
  font-weight: 900;
  line-height: 1.65;
  color: var(--ink);
}

.flow__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: clamp(18px, 2.4vw, 30px);
  background: var(--rule-strong);
  transform: translateX(-50%);
}

.flow__title::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  transform: translate(-50%, -50%);
}

/* 見出しから2列へ分岐する部分。下が開いた箱＋上の角丸 */
.flow__split {
  position: relative;
  height: clamp(30px, 3.8vw, 48px);
  margin-top: clamp(20px, 2.6vw, 32px);
  margin-inline: calc((100% - var(--col-gap)) / 4);
  border: 1px solid var(--rule-strong);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

/* 分岐の先端につける矢じり（細線を回転させた小さな三角） */
.flow__split::before,
.flow__split::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
  transform: translate(-50%, 2px) rotate(45deg);
}

.flow__split::before { left: 0; }
.flow__split::after  { left: 100%; }

/* --------------------------------------------------------------------------
   届いた先の2項目（スタッフ／本部）
   -------------------------------------------------------------------------- */
.reach-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--col-gap);
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

/* 見出し・本文は左揃え。3カラム側の .feature と同じ扱いに揃える
   （中央寄せは .section__head だけ） */
.reach-item {
  text-align: left;
}

/* 2枚の縦横比がわずかに違うので、高さを決めて contain で揃える
   （.value__img と同じ手法）。
   contain だと箱(566px)の中で実描画(438px)が中央に寄り、左揃えの本文と
   左端がずれるので object-position で左に寄せる */
.reach-item__img {
  display: block;
  width: 100%;
  height: clamp(150px, 17vw, 240px);
  object-fit: contain;
  object-position: left center;
}

.reach-item__title {
  margin: var(--space-sm) 0 0;
  /* 下限は .reach-item__desc（16px）より大きく取る */
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  line-height: 1.6;
  color: var(--ink);
}

.reach-item__desc {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}

/* 見出し・本文の幅は画像の実描画幅（約440px）に合わせて止める。
   列幅(566px)いっぱいに伸ばすと画像より本文が広くなって形が崩れ、
   1行が34文字前後になって日本語としても読みにくい。
   左端は列の左端のままなので、ページの縦ラインは増えない */
.reach-item__title,
.reach-item__desc {
  max-width: 27.5em;
}

/* 狭い画面では2項目を縦積みに。分岐線は左右に振る意味が無くなるので
   中央の1本だけにする */
@media (max-width: 767px) {
  /* 3項目が縦積みになるので「3列から集約する」形は意味を失う。
     上下とも中央の縦線1本にそろえる */
  .flow__join {
    margin-inline: 50%;
    border: 0;
    border-right: 1px solid var(--rule-strong);
    border-radius: 0;
  }

  .flow__split {
    margin-inline: 50%;
    border-radius: 0;
    border-left: 0;
    border-right: 1px solid var(--rule-strong);
  }

  .flow__split::before { display: none; }
  .flow__split::after  { left: 0; }

  .reach-list {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   企業にもたらす3つの価値（VALUE）
   画像を上、タイトル・本文を下に積む縦積みカードを3列
   -------------------------------------------------------------------------- */
/* 見出しは他セクションと同じ .section__head + .label + .section__title を使う。
   数字だけアクセント色にするのは .hero__title em と同じ扱い
   （赤は CTA・リンク・数字・ラベルに限る、というデザイン方針の範囲内） */
.value__inner .section__title em {
  font-style: normal;
  color: var(--red);
  /* 「３」だけ一回り大きく。全角なので字幅も一緒に広がる。
     line-height を 1 にしているのは、1.2em にしたぶん行の高さが
     1.6×55.2=88px まで伸びて見出しの行間が空いてしまうため
     （親は 46px×1.6＝73.6px。1 にすれば 55.2px で収まり行間は変わらない） */
  font-size: 1.2em;
  line-height: 1;
}

/* 3列固定＋列間の縦罫。auto-fit にすると折り返した行の先頭に罫線が
   残ってしまうため、.stats と同じく列数を固定して nth-child で引く */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--col-gap);
  padding: 0;
  list-style: none;
}

/* 左右の padding は入れない（3列の本文幅が揃わなくなるため）。
   列の区切りは .feature と同じく gap の中央に置く */
.value {
  position: relative;
}

.value:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--col-gap) / -2);
  width: 1px;
  background: var(--rule);
}

/* 素材ごとに縦横比が微妙に異なるため、幅ではなく高さを揃えて
   3枚がそろって見えるようにする（contain なので中身は切り取らない） */
/* VALUE はオフ白地（--bg-alt）。イラストの素材は白〜ほぼ白なので、
   背景を透過にしたまま置くと輪郭が消えて地に溶ける（レビュー指摘）。
   白い板を敷いて受け止める。border-radius は元からここにあり、
   板を敷く前提の指定だった。影は付けない（カードと影は排除の方針） */
.value__img {
  display: block;
  width: 100%;
  height: clamp(150px, 15vw, 210px);
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.value__num {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-en);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1;
  color: var(--red);
}

.value__name {
  margin: 10px 0 0;
  /* 下限は .value__desc（16px）より大きく取る */
  font-size: clamp(17.5px, 2.1vw, 19px);
  font-weight: 700;
  line-height: 1.65;
  /* 3列だと2行に割れるので、文節単位で折り返して
     「エンゲージメ／ント」のような語中改行を避ける
     （非対応ブラウザでは通常の折り返しに戻るだけ） */
  word-break: auto-phrase;
  text-wrap: pretty;
}

.value__desc {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink);
  /* 見出しと同様、語中改行（「モチベーショ／ン」など）を避ける */
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 3列だと1列300px弱まで詰まり見出しが3行に割れるので、縦積みに切り替える。
   縦積みでは縦罫の向きが合わないので横罫に置き換える */
@media (max-width: 900px) {
  .values {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .value:not(:first-child)::before {
    display: none;
  }

  .value:not(:first-child) {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   FEATURES
   -------------------------------------------------------------------------- */
/* 2列固定＋列間・行間に罫線（.values/.stats と同じ方針）。auto-fit にすると
   折り返した行の先頭に罫線が残るため、列数を固定して nth-child で引く */
/* 行間は gap と 3〜4件目の padding-top が足し算になるので、
   ここで --space-xl を使うと開きすぎる（罫線を挟んで上下同値にしてある） */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--features-gap);
  padding: 0;
  list-style: none;
}

/* 文字（番号・タイトル・説明文）と画像を1セットとして横並びに。
   左右の padding は入れない（入れると中身が --container の基準線から
   ずれて、ページ全体の縦ラインが通らなくなる） */
.feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--col-gap);
  text-align: left;
}

.feature__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* 列の区切りは gap の中央に置く。border-left だとカラムの内側に
   食い込み、2列の本文幅が左右で変わってしまう */
.feature:nth-child(even)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--features-gap) / -2);
  width: 1px;
  background: var(--rule);
}

.feature:nth-child(n + 3) {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

/* 文字と画像を横に並べるには1列あたり340px前後では足りない（本文が
   180px程度まで潰れる）ので、900px以下では縦積み＋横罫だけに切り替える */
@media (max-width: 900px) {
  /* 縦積みでも幅は container のまま使う（max-width を足して中央寄せすると
     基準線から内側にずれ、縦のラインが1本増えてしまう） */
  .features {
    grid-template-columns: 1fr;
  }

  .feature:nth-child(even)::before {
    display: none;
  }

  .feature:not(:first-child) {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--rule);
  }
}

/* --------------------------------------------------------------------------
   3カラム（#features のお客さまの体験01〜03）
   1行に3件だと1列340px前後しかなく、文字と画像を横に並べると本文が
   180pxまで潰れる。そこで .value と同じ縦積み（画像→番号→タイトル→本文）
   に切り替える。
   このブロックは .features の @media(900px) より後ろに置いてあるので、
   狭い画面用の打ち消しも自前の @media で書く必要がある
   （メディアクエリは詳細度を上げないため、後ろの単独クラスが勝つ）。
   -------------------------------------------------------------------------- */
.features--cols3 {
  grid-template-columns: repeat(3, 1fr);
}

.features--cols3 .feature {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* 画像を先頭へ。素材の縦横比がばらばら（QRは縦長・クーポンは横長）なので
   .value__img と同じく高さ固定＋contain で見た目の高さを揃える */
.features--cols3 .feature__img {
  order: -1;
  width: 100%;
  height: clamp(150px, 15vw, 210px);
  object-fit: contain;
}

.features--cols3 .feature__text {
  margin-top: var(--space-sm);
}

/* 3件が1行に並ぶので、2・3件目の左に縦罫（位置は gap の中央） */
.features--cols3 .feature:nth-child(n + 2)::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--features-gap) / -2);
  width: 1px;
  background: var(--rule);
}

/* 全件が同じ行なので、基底の「3件目から上に横罫」は打ち消す */
.features--cols3 .feature:nth-child(n + 3) {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  /* 1列に落ちたら、元どおり文字と画像の横並びに戻す（縦積みのままだと
     画像が全幅まで伸びて1件あたりの丈が伸びすぎる） */
  .features--cols3 {
    grid-template-columns: 1fr;
  }

  .features--cols3 .feature {
    flex-direction: row;
    align-items: center;
    gap: var(--col-gap);
  }

  .features--cols3 .feature__img {
    order: 0;
    width: clamp(104px, 27vw, 310px);
    height: auto;
  }

  .features--cols3 .feature__text {
    margin-top: 0;
  }

  .features--cols3 .feature:nth-child(n + 2)::before {
    display: none;
  }

  .features--cols3 .feature:nth-child(n + 2) {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--rule);
  }
}

.feature__num {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(30px, 3.8vw, 42px);
  font-weight: 500;
  line-height: 1;
  color: var(--red);
}

.feature__title {
  margin: clamp(10px, 1.4vw, 14px) 0 0;
  /* 下限は .feature__desc（16px）より大きく取る */
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.6;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.feature__desc {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 素材ごとに縦横比が異なる（QRは縦長、ダッシュボードは横長など）ため、
   幅を揃えて自然な比率のままサムネイルとして並べる */
.feature__img {
  flex-shrink: 0;
  width: clamp(104px, 12.5vw, 168px);
  height: auto;
}

/* --------------------------------------------------------------------------
   The cycle
   -------------------------------------------------------------------------- */
.cycle__body {
  margin: var(--space-sm) 0 0;
  max-width: var(--measure);
  font-size: var(--body-size);
  line-height: 2.2;
  color: var(--ink);
  text-align: left;
  text-wrap: pretty;
}

.cycle__figure {
  margin: var(--space-lg) 0 0;
}

.cycle__figure img {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   The impact
   -------------------------------------------------------------------------- */
.impact__lead {
  margin: var(--space-sm) auto 0;
  max-width: var(--measure);
  font-size: var(--body-size);
  line-height: 1.9;
  color: var(--ink);
}

/* Case study：どこで・いつ・何を・何のために実施したのかを一目で */
.case-study {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
  text-align: left;
}

.case-study__title {
  margin: var(--space-sm) 0 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.6;
}

.case-study__title strong {
  font-weight: 900;
  color: var(--red);
}

/* 3列固定＋最終項目だけ全幅。auto-fit だと画面幅によって列数が変わり、
   4項目が「3+1」に見えない（空きトラックができる）ため列数を固定する */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md) var(--col-gap);
  margin-top: var(--space-lg);
  text-align: left;
}

.facts__item {
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--rule);
}

/* 3列だと1列220px前後まで詰まり、日付や検証内容が細かく折り返すので段階的に落とす */
@media (max-width: 860px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

.facts__item--wide {
  grid-column: 1 / -1;
}

/* 中身は日本語（実施場所・実施期間…）なので font-jp。Jost は日本語グリフを
   持たずフォールバックで別フォントになってしまうため、英字用は使わない */
.facts__label {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.facts__value {
  margin: 10px 0 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.7;
  text-wrap: pretty;
}

/* 「どこで検証したか」は特に強調する */
.facts__value--place {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  color: var(--red);
}

/* 4つの数字を横1列に置く。左2つ（効果）と右2つ（生まれた「ありがとう」）は
   意味の異なるグループだが、レビューでラベルを削除したため、
   区切りは1本の縦罫だけで表す */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md) var(--col-gap);
  margin-top: var(--space-lg);
  text-align: center;
  container-type: inline-size;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
}

/* グループの境目（3つ目の数字の左）にだけ縦罫を引く */
.stat--group-start::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--col-gap) / -2);
  width: 1px;
  background: var(--rule);
}

/* 数字そのものをビジュアルに。4列に収めるため上限は 84px
   （2,750件 が列幅を超えない範囲。列幅は container 1160 で約266px） */
.stat__num {
  font-family: var(--font-en);
  font-size: clamp(38px, 7.2cqi, 84px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--red);
}

.stat__unit {
  font-size: 0.42em;
}

.stat__unit--jp {
  font-size: 0.34em;
}

.stat__label {
  font-size: var(--body-size);
  font-weight: 700;
  line-height: 1.7;
}

.stat__note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* 文章とポスターの2カラム。1200px未満では文章が窮屈になるので縦積みへ */
.poc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--col-gap);
  align-items: start;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

@media (max-width: 860px) {
  .poc {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* 縦積みでは行が全幅になるので、`margin-left: auto` のままだとポスターが
     右端に張り付いて左に大きな空白ができる。文章が全幅になるこの幅では
     中央に置く */
  .poc__poster {
    margin-inline: auto;
  }
}

/* .label を継いでいるが中身は日本語（実証した取り組み）なので font-jp に戻す */
.poc__eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
}

.poc__lead {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.6;
}

.poc__title {
  margin: var(--space-md) 0 0;
  font-size: clamp(16.5px, 2.1vw, 21px);
  font-weight: 900;
  line-height: 1.75;
}

.poc__body {
  margin: var(--space-sm) 0 0;
  font-size: 16.5px;
  line-height: 2.1;
  color: var(--ink);
  text-wrap: pretty;
}

.poc__quote {
  margin: 20px 0 0;
  font-size: 16.5px;
  line-height: 2.1;
  color: var(--ink);
  text-wrap: pretty;
}

.poc__source {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-muted);
}

.poc__poster {
  display: block;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  /* 角丸も影も付けない。ポスター自体に白い余白があるため、角を丸めると
     そこだけ切り取られて「枠」に見える（レビュー指摘） */
}

/* THE RESULT：実証で得られた4つの数字をまとめて置くブロック。
   見出しは左揃え。数字（.stats）だけは各列で中央に置く（自前の
   text-align: center を持っているので、ここを left にしても影響しない） */
.result {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
  text-align: left;
}

.result__title {
  margin: var(--space-sm) 0 0;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 900;
  line-height: 1.6;
}

/* 数字は少し遅れて表示されるとインパクトが出る（過度にならない程度に） */
.stats .stat:nth-of-type(2),
.stats .stat:nth-of-type(4) {
  transition-delay: 0.12s;
}

/* 4列だと1列170px程度まで詰まるので2列に落とす */
@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--col-gap);
  }

  .stat--group-start::before {
    display: none;
  }
}

.impact__footnote {
  margin: var(--space-lg) 0 0;
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 2.1;
  color: var(--ink-muted);
}



/* 実際に届いた「ありがとう」の一覧。
   もとは1件ずつ送るスライダーだったが、4件目（清掃員さん宛）が隠れて
   「店舗スタッフ以外にも感謝が集まっている」ことが伝わらないため一覧にした。
   2列にすると1件あたり約548pxで、人物イラスト(〜180px)＋吹き出しが
   横に収まる。900px以下は1列。 */
.real-thanks {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

.real-thanks__head {
  text-align: left;
}

/* 一覧では1件あたりの幅が半分になるので、人物列を詰めて吹き出しに幅を回す
   （180pxのままだと吹き出しが319pxしかなく、147文字が8行に折れる） */
.thanks-list .slide__person {
  width: clamp(96px, 10.5vw, 132px);
}

/* イラストは小さめに。列の幅（132px）は詰めないこと —
   下の「客Aさん → アパレル店員Kさんへ」が入らなくなり折り返しが増える */
.thanks-list .slide__illust {
  height: clamp(66px, 7.6vw, 92px);
}

.thanks-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--col-gap);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

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

.slide {
  width: 100%;
  flex: 0 0 100%;
  padding-right: clamp(16px, 3vw, 40px);
}

/* イラスト＋吹き出しの横並び。吹き出しは人物イラストの高さに合わせて
   縦中央に揃え、しっぽ（::before）を人物側に向ける */
.slide__row {
  display: flex;
  align-items: center;
  gap: var(--col-gap);
}

/* 人物列は幅を固定する。イラストの実寸幅が素材ごとに 81〜158px と違うため、
   width:auto のままだとスライドを送るたびに吹き出しの左端が動いてしまう */
.slide__person {
  flex: 0 0 auto;
  width: clamp(120px, 15vw, 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.slide__illust {
  display: block;
  height: clamp(150px, 23vw, 230px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* 人物列の幅が固定になったので、注記もその幅いっぱいを使う */
.slide__who {
  max-width: 100%;
  font-size: 16.5px;
  line-height: 1.5;
  /* 改行位置は HTML の <br> で固定し、PC / SP で同じ折り返しにする */
  white-space: nowrap;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-align: center;
}

.slide__quote {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* 地は白。IMPACT の枠がオフ白（--bg-alt）なので、吹き出しも --bg-alt だと
     背景と同色になって輪郭が消える */
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 32px) clamp(24px, 3.4vw, 36px);
  /* 実際のコメントは長文になりやすいので、説明文と同じ16px固定・weight 500
     にして落ち着かせる（.value__desc / .feature__desc / .reach-item__desc と
     同じ段）。CLAUDE.md の「本文は16px以上」がここの下限 */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.005em;
  text-wrap: pretty;
  box-shadow: 0 20px 40px -26px rgba(26, 26, 26, 0.18);
}

.slide__quote::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 11px 14px 11px 0;
  border-color: transparent var(--bg) transparent transparent;
}

/* 横幅が足りない画面では、イラストを上・吹き出しを下に積み、
   しっぽも上向きに切り替える */
@media (max-width: 560px) {
  .slide__row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .slide__who {
    max-width: none;
  }

  .slide__quote {
    width: 100%;
  }

  .slide__quote::before {
    left: 50%;
    top: -13px;
    transform: translateX(-50%);
    border-width: 0 11px 14px 11px;
    border-color: transparent transparent var(--bg) transparent;
  }
}








.thanks__note {
  margin: var(--space-md) 0 0;
  font-size: 13.5px;
  line-height: 2;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
/* 写真を画面幅いっぱいの帯として敷き、コピーは写真右側の余白に重ねる。
   背景を2枚重ねているのは、cta-photo.png が未配置でも下の縞プレース
   ホルダーがそのまま見えるようにするため（差し替えれば自動で切り替わる） */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  /* 締めのブロックなので写真は主役ではない。高さはコピーとボタンに寄せる
     （2026-09-18 に 46vw/660px から下げた。1440px で 660→547px）。
     **一度 440px まで詰めたが「前後の余白が窮屈」となり、中間に戻した経緯がある。**
     コピーの上下に確保できる余白は 660px時=224px / 547px時=167px /
     432px時=110px。**160px を下回ると窮屈に見える。**
     また下げるほど背景写真の縦の切り取りが強くなり人物の顔が切れ始める */
  min-height: clamp(400px, 38vw, 560px);
  padding: clamp(52px, 6.5vw, 96px) var(--gutter);
  background-color: #f2eeea;
  background-image: url("assets/cta-photo.png"),
    repeating-linear-gradient(
      135deg,
      rgba(26, 26, 26, 0.05) 0 2px,
      transparent 2px 12px
    );
  background-size: cover, auto;
  /* 人物は写真の左寄りなので、横の切り抜きは左を基準にする。
     縦は 12%（上寄り）。center のままだと高さを下げたぶん上下が強く切られ、
     **頭頂部が切れる**（1440pxで71px、1920pxで162px欠けていた）。
     髪の上端は画像の y=100。12% なら 2560px 幅まで頭が収まる
     （15%だと2560pxで余裕が15pxしかないので12%にしてある） */
  background-position: left 12%, 0 0;
  background-repeat: no-repeat, repeat;
}

/* **1181px 以上では暗幕を敷かない。**
   いまの写真は x=851（＝幅の48.6%）から右が元から白い。そこへさらに白を
   重ねると白同士が重なって「光って見える」（レビュー指摘）。しかも中間に
   0.35 を置いていたため人物まで白ばんでいた。
   この幅ではコピーの左端と写真の白の開始位置がほぼ一致する
   （1440px で コピー700px / 白699px、1920px で 940px / 933px）ので、
   暗幕なしでも紺の文字は白地に乗る。
   **写真を差し替えたら、白の開始位置とコピーの左端を測り直すこと。** */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
}

.cta__inner {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.cta__body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vw, 42px);
  width: 100%;
  /* 「スタッフに届く「ありがとう」を、」が1行に収まる幅（実測544px）。
     狭めると3行に折れて写真とのバランスが崩れるので 560px 未満にしない。
     680px だとコピーの左端が人物の5px手前まで来て窮屈だったため、
     600px にしてデザイン通りの間隔（人物から約75px）に合わせている */
  max-width: 600px;
  container-type: inline-size;
}

.cta__title {
  /* 上限は --h2-size-sm と同じ34px。他セクションの見出し（46px）より
     一段小さく、締めのコピーとして落ち着かせる。
     cqi の係数は 6.0。1行目「スタッフに届く「ありがとう」を、」が16字なので、
     係数が 1/16=6.25 を超えると狭い幅で1行に収まらず、「ありがと／う」と
     語中で折れて3行になる（6.8 で実際に発生。1000px幅で確認）。
     上限34pxには幅567px以上で張り付くので、PCでの見え方は変わらない */
  font-size: clamp(20px, 6cqi, 34px);
  font-weight: 900;
  line-height: 1.6;
  text-wrap: pretty;
}

/* 780〜1180px は横並びのままなので、コピー幅を列幅比で絞り、
   右側の白を強めて人物・手元のスマホへの重なりを防ぐ */
@media (max-width: 1180px) and (min-width: 781px) {
  .cta__body {
    max-width: min(600px, 58%);
  }

  /* この帯ではコピーが写真の白より 55〜67px 手前から始まるので、その分だけ
     白を足す。人物は画面の 9〜32% に居るので 30% までは素通しにして、
     写真が白ばまないようにしている。48.6% から先は元から白いので、
     そこで頭打ちにして重ねすぎない */
  .cta::before {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.85) 46%,
      rgba(255, 255, 255, 0.85) 100%
    );
  }
}

/* 横並びを保つには、人物（写真左寄り）を避けてコピーを置ける幅が要る。
   780px を下回ると手元のスマホ・ボタンが重なり始めるため、写真を上・コピーを
   下に積み替え、ぼかしの向きも縦に切り替える */
@media (max-width: 780px) {
  .cta {
    align-items: flex-end;
    min-height: clamp(520px, 125vw, 760px);
    /* 顔が画面の横中央に来る位置。顔は画像の x=539（幅の30.7%）にあり、
       375px幅では描画1015pxのうち中央に置くには 19% になる
       （480〜600px でも 17.4% なのでほぼ揃う）。
       写真を差し替えたら顔の位置を測り直してこの値を出し直すこと */
    background-position: 19% top, 0 0;
  }

  /* 縦積みでは写真の白い部分が画面外に出る（375px では画像の x=179〜554 しか
     見えず、白は x=851 から）ので、暗幕が可読性を全部引き受ける。
     ただし以前は 40% で既に 0.5 あり、人物の顔まで白ばんで光って見えていた。
     コピーの上端が 59.6% なので、38% までは素通しにして、そこから
     コピーの直前で白く抜ける形に寄せた */
  .cta::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.8) 60%,
      rgba(255, 255, 255, 0.8) 100%
    );
  }

  .cta__inner {
    justify-content: flex-start;
  }
}

.cta__btn {
  justify-content: space-between;
  width: fit-content;
  min-width: 280px;
  height: 62px;
  padding: 0 28px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
/* PCでは見出しを左・項目を右に置く（2026-09-18）。項目は --measure(720px) の
   ままなので、1行の長さは他セクションの本文と変わらない。
   **閾値を1180pxより下げないこと** — 見出し列が320pxを切ると
   「よくあるご質問」が折り返す（1180pxでちょうど322px）。
   なお項目の左端（1440pxで580px）はこのセクション専用の縦ラインになる。
   見出しを左に置く以上どうしても1本増えるので、ここは例外として許容している */
@media (min-width: 1180px) {
  .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
    gap: var(--col-gap);
    align-items: start;
  }

  /* 横並びなので、見出しブロックの下の余白（--space-lg）は要らない */
  .faq__inner .section__head + * {
    margin-top: 0;
  }
}

/* 1列のときは読みやすさ優先で --measure に収める（他セクションの本文と
   同じ縦ラインに乗る） */
.faq__list {
  max-width: var(--measure);
  margin-inline: 0;
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 26px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  /* 下限は .faq__a の本文（16.5px）より大きく。
     15.5px だと狭い画面で「質問 < 回答」になり階層が逆転する */
  font-size: clamp(17px, 2vw, 18px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  transition: color 0.2s ease;
}

.faq__q[aria-expanded="true"] {
  color: var(--red);
}

.faq__q-text {
  flex: 1 1 auto;
}

.faq__icon {
  font-family: var(--font-en);
  font-size: 17px;
  color: var(--red);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq__q[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
}

.faq__a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

.faq__a[data-open="true"] {
  opacity: 1;
}

.faq__a p {
  padding: 0 0 26px;
  font-size: 16.5px;
  line-height: 2.1;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: clamp(56px, 7vw, 84px) var(--gutter) clamp(40px, 5vw, 56px);
  background: #fff;
}

.footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 64px);
}

/* フッターもヘッダーと同じ2ロゴ並列。こちらは横に CTA ボタンが無く
   幅に余裕があるので、狭い画面でも両方出したまま折り返させる */
.footer__brand {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
}

.footer__brand .brand-logo {
  width: 224px;
}

/* 折り返したときは区切り罫が宙に浮くので出さない */
.footer__brand-sep {
  flex: none;
  width: 1px;
  height: 28px;
  background: var(--rule-strong);
}

.footer__brand .brand-logo--partner {
  width: 207px;
}

/* 375px では2つ横に並べると合計336pxで、使える335pxを1px超えて折り返し、
   区切り罫だけが1行目の末尾に取り残される。縮めて収めるより縦に積むほうが
   ロゴが読める大きさのまま残るので、積む側を選んでいる */
@media (max-width: 560px) {
  .footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 3.4vw, 18px);
  }

  .footer__brand-sep {
    display: none;
  }

  .footer__brand .brand-logo {
    width: clamp(160px, 46vw, 224px);
  }

  .footer__brand .brand-logo--partner {
    width: clamp(148px, 42.6vw, 207px);
  }
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  font-family: var(--font-en);
  font-size: 13.5px;
  letter-spacing: 0.12em;
}

.footer__nav a {
  color: var(--ink);
}

.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
  margin-left: auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
  font-size: 12px;
}

.footer__links a {
  color: var(--ink);
}

.footer__copy {
  font-style: normal;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .footer__meta {
    margin-left: 0;
    text-align: left;
  }

  .footer__links {
    justify-content: flex-start;
  }
}