@charset "UTF-8";
/* ============================================================
   YADOTOMO  style.css
   セクションごとに「===== ファイル名 =====」の見出しで区切っています。
============================================================ */

/* ===== 00-base ===== */
/* ============================================================
   00-base … 土台（リセット・色や文字の変数・ページの額縁・共通部品・動きの初期状態）
   各セクションのCSSは、ここの変数とクラスを使う。
============================================================ */

/* ------------------------------------------------------------
   1. デザインの変数（色・文字・大きさ）
------------------------------------------------------------ */
@property --fy { syntax: "<length>"; inherits: false; initial-value: 0px; }      /* data-float のゆれ */
@property --plx-x { syntax: "<length>"; inherits: false; initial-value: 0px; }   /* パララックス（横） */
@property --plx-y { syntax: "<length>"; inherits: false; initial-value: 0px; }   /* パララックス（縦） */

:root {
  /* 色 */
  --ink: #131415;
  --navy: #1A3A52;
  --slate: #5F7888;
  --peri: #8AA1DB;
  --tealb: #7CACBD;
  --light: #D5E0E7;
  --bg: #F2F1F0;
  --beige: #F7F2EA;
  --white: #fff;
  --gray: #B8BDC1;
  --warm: #DB9A7B;   /* 暖色はこの1色だけ・少量 */
  --pink: #ED397B;   /* ハート・CTAのみ */
  --marker: #FFE873; /* 強調の黄色い下線（.c-marker）だけに使う */
  --hair: #5F5F5F;

  /* 文字 */
  --font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Jost", "Zen Kaku Gothic New", sans-serif;

  /* 大きさ：PCはデザイン(1440)の数値Nを calc(var(--px) * N) で書く。1440で等倍、狭いと比例縮小 */
  --px: calc(min(var(--vw, 100vw), 1440px) / 1440);
  /* SP用：幅390で1px（SPで比例させたいときだけ使う） */
  --sp: calc(min(var(--vw, 100vw), 600px) / 390);

  --frame: calc(var(--px) * 12);        /* 紺の額縁の太さ */
  --page-r: calc(var(--px) * 49);       /* 左上の角丸（額縁の内側） */
  --gutter: calc(var(--px) * 65);       /* 左右の余白（.l-inner） */
  --header-offset: 96px;                /* ページ内リンクで止まる位置（固定ヘッダーの高さ分） */

  /* 動き */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* 重なり順（セクションの中は 1〜30 を使う） */
  --z-header: 30;
  --z-frame: 40;
  --z-guide: 70;
  --z-bar: 80;
  --z-drawer: 100;
}

@media (max-width: 900px) {
  :root {
    --frame: 6px;
    --page-r: 22px;
    --gutter: 20px;
    --header-offset: 80px;
  }
}

/* ------------------------------------------------------------
   2. リセット
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: only light;   /* 端末がダークモードでも、ブラウザに色を勝手に暗く変えさせない（00-head.html の meta とセット） */
  background: var(--navy);
  scrollbar-gutter: stable;
  scroll-padding-top: var(--header-offset);
  scroll-behavior: auto;   /* なめらかなスクロールは main.js が担当 */
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  line-break: strict;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 700; }
ul, ol { padding: 0; list-style: none; }
img, picture, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
table { border-collapse: collapse; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
::selection { background: rgba(237, 57, 123, .18); }

/* ------------------------------------------------------------
   3. ページの額縁
   body が紺、.page がページ本体（背景 --bg）。
   紺の額縁は .page::after で「上に重ねて」描く（Figma と同じく、端の要素は額縁の下に隠れる）。
   左上の角丸（額縁の内側の凹カーブ）は .page::before。
   → .page の中は Figma の x 座標（0〜1440）がそのまま使える。
------------------------------------------------------------ */
.page {
  position: relative;
  display: flow-root;
  background: var(--bg);
}
/* 表示アニメ（右からスライド等）で一瞬はみ出しても横スクロールが出ないように。
   ?static（スクショ）では切らない → 本当のはみ出しは main.js が赤い帯で知らせる */
html:not(.is-static) .page { overflow-x: clip; }
/* overflow: clip が使えない古い Safari（iOS 15 以前）用：横スクロールだけ止める。
   ※ body や .page には付けない（代表メッセージの写真の position: sticky が止まらなくなる） */
@supports not (overflow: clip) {
  html:not(.is-static) { overflow-x: hidden; }
}
.page::before,
.page::after {
  content: "";
  position: absolute;
  z-index: var(--z-frame);
  pointer-events: none;
}
.page::before {
  top: 0;
  left: 0;
  width: calc(var(--frame) + var(--page-r));
  height: calc(var(--frame) + var(--page-r));
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--page-r) - .6px), var(--navy) calc(var(--page-r) + .4px));
}
.page::after {
  inset: 0;
  box-shadow: inset 0 0 0 var(--frame) var(--navy);
}

/* 中身の幅（左右の余白 PC:65 / SP:20） */
.l-inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* 1440幅の舞台（Figmaの座標で absolute 配置したいとき。広い画面では中央に置く） */
.l-stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

/* ------------------------------------------------------------
   4. 文字の共通部品
------------------------------------------------------------ */
/* ラベル：―― 実績 WORKS */
.c-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: max(15px, calc(var(--px) * 20));
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--ink);
}
.c-label__line {
  flex: none;
  width: calc(var(--px) * 73);
  height: 1px;
  margin-right: calc(var(--px) * 24);
  background: currentColor;
}
.c-label__en {
  margin-left: calc(var(--px) * 22);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: max(11px, calc(var(--px) * 13));
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--slate);
}
.c-label--white { color: var(--white); }
.c-label--white .c-label__en { color: var(--peri); }

/* セクション見出し */
.c-title {
  font-weight: 700;
  font-size: max(28px, calc(var(--px) * 48));
  line-height: 1.42;
  letter-spacing: .02em;
}
.c-title--l {           /* 「実績」型の見出し（36） */
  font-weight: 500;
  font-size: max(24px, calc(var(--px) * 36));
  line-height: 1.8;
}
.c-title--white { color: var(--white); }

/* リード文 */
.c-lead {
  font-weight: 500;
  font-size: max(15px, calc(var(--px) * 20));
  line-height: 1.8;
  letter-spacing: .02em;
}
/* 本文・注記（追加） */
.c-text { font-size: max(14px, calc(var(--px) * 16)); line-height: 1.9; }
.c-note { font-size: max(11px, calc(var(--px) * 13)); line-height: 1.7; color: var(--slate); }

/* 小見出し：■ CASE 01 —— カテゴリ */
.c-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 14));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--slate);
}
.c-sub::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: calc(var(--px) * 10);
  background: var(--warm);
}
.c-sub__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 13));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.c-sub__ja { display: inline-flex; align-items: center; }
.c-sub__en + .c-sub__ja::before {
  content: "";
  flex: none;
  width: calc(var(--px) * 32);
  height: 1px;
  margin: 0 calc(var(--px) * 14) 0 calc(var(--px) * 13);
  background: var(--hair);
}
.c-sub--white { color: var(--light); }
.c-sub--white .c-sub__en { color: var(--white); }
.c-sub--white .c-sub__en + .c-sub__ja::before { background: var(--white); }

/* ------------------------------------------------------------
   5. ピル・ボタン・カード
------------------------------------------------------------ */
/* ピル（塗り＋黒い細線＋白い太字。左にアイコン可） */
.c-pill {
  --pill-bg: var(--navy);
  --pill-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: .45em 1.1em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 700;
  font-size: var(--pill-fs, max(13px, calc(var(--px) * 15)));
  line-height: 1.4;
  letter-spacing: .04em;
  white-space: nowrap;
}
.c-pill svg, .c-pill__icon {
  flex: none;
  width: var(--pill-icon, 1.1em);
  height: var(--pill-icon, 1.1em);
}
.c-pill--navy { --pill-bg: var(--navy); }
.c-pill--slate { --pill-bg: var(--slate); }
.c-pill--peri { --pill-bg: var(--peri); }
.c-pill--tealb { --pill-bg: var(--tealb); }
.c-pill--warm { --pill-bg: var(--warm); }
.c-pill--white { --pill-bg: var(--white); --pill-fg: var(--navy); }
.c-pill--s { --pill-fs: max(12px, calc(var(--px) * 14)); padding: .42em 1em; }
.c-pill--l { --pill-fs: max(16px, calc(var(--px) * 24)); padding: .34em 1.05em; }
.c-pill--notch-bl { border-bottom-left-radius: 0; }   /* 吹き出し風：左下だけ角 */
.c-pill--notch-br { border-bottom-right-radius: 0; }  /* 吹き出し風：右下だけ角 */

/* ボタン（ピル形）。矢印は <span class="c-btn__arrow">→</span> */
.c-btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  min-height: var(--btn-h, max(48px, calc(var(--px) * 56)));
  padding: .5em 2.2em;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.4;
  letter-spacing: .06em;
  text-align: center;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), scale .2s var(--ease);
}
.c-btn__arrow {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 400;
  transition: transform .4s var(--ease);
}
.c-btn:active { scale: .98; }
.c-btn--pink { --btn-bg: var(--pink); }
.c-btn--navy { --btn-bg: var(--navy); }
.c-btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.c-btn--outline-white { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, .7); }
.c-btn--s { --btn-h: 44px; padding: .4em 1.4em; font-size: 13px; gap: .6em; }
.c-btn--l { --btn-h: max(56px, calc(var(--px) * 64)); }
.c-btn--block { display: flex; width: 100%; }
@media (hover: hover) {
  .c-btn:hover .c-btn__arrow { transform: translateX(5px); }
  .c-btn--pink:hover { --btn-bg: #DE2D6D; box-shadow: 0 14px 28px -14px rgba(237, 57, 123, .8); }
  .c-btn--navy:hover { --btn-bg: #24506F; box-shadow: 0 14px 28px -16px rgba(26, 58, 82, .7); }
  .c-btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }
  .c-btn--outline-white:hover { --btn-bg: var(--white); --btn-fg: var(--navy); --btn-bd: var(--white); }
}

/* 白いカード（角丸は --r で上書き） */
.c-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r, calc(var(--px) * 24));
}
/* マウスをのせて浮き上がるのは「押せるカード（リンク）」だけ。
   押せないカードが浮くとボタンと勘違いされるので、.c-card--lift（リンクでないカード）は浮かせない（クラス名はHTMLに残っているが、動きなし） */
a.c-card { transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) {
  a.c-card:hover {
    translate: 0 -6px;
    box-shadow: 0 24px 44px -26px rgba(26, 58, 82, .38);
  }
}

/* ------------------------------------------------------------
   6. 通知カード・ハート・?
------------------------------------------------------------ */
/* アプリの通知カード。大きさは --n（1デザインpxの大きさ）でまとめて変えられる */
.c-notice {
  --n: var(--px);
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--n) * 12);
  width: var(--notice-w, calc(var(--n) * 283));
  min-height: calc(var(--n) * 58);
  padding: calc(var(--n) * 12) calc(var(--n) * 44) calc(var(--n) * 12) calc(var(--n) * 14);
  border-radius: calc(var(--n) * 18);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 calc(var(--n) * 22) calc(var(--n) * 44) calc(var(--n) * -20) rgba(15, 44, 58, .3);
  text-align: left;
  letter-spacing: .02em;
}
.c-notice::after {                  /* 吹き出しのしっぽ（左下） */
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: var(--tail-x, calc(var(--n) * 52));
  width: calc(var(--n) * 25);
  height: calc(var(--n) * 19);
  background: var(--white);
  clip-path: polygon(0 0, 80% 0, 100% 100%);
}
.c-notice--tail-right::after {      /* しっぽ（右下） */
  left: auto;
  right: var(--tail-x, calc(var(--n) * 28));
  clip-path: polygon(20% 0, 100% 0, 0 100%);
}
.c-notice--no-tail::after { display: none; }
.c-notice__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--n) * 38);
  height: calc(var(--n) * 38);
  border-radius: calc(var(--n) * 11);
  background: var(--pink);
  color: var(--white);
}
.c-notice__icon svg { width: calc(var(--n) * 21); height: auto; }
.c-notice__icon--dark { background: #13303F; }
.c-notice__icon--navy { background: var(--navy); }
.c-notice__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* 文字の大きさ：カードと一緒に比例して縮むが、10px（説明は9px）より小さくはしない。
   ただしカードがとても小さくなる幅（--n が約0.71px未満：幅320のスマホや、幅900〜1000のPC）では、
   10pxのままだと文字がカードに入りきらず「いま」と重なるので、入りきる大きさ（--n × 14 ／ × 12.3）まで下げる。
   タイトルを13文字以上・説明を15文字以上にするときは、この 14 と 12.3 を小さくする（目安：175 ÷ 文字数） */
.c-notice__title {
  font-weight: 700;
  font-size: max(calc(var(--n) * 13), min(10px, calc(var(--n) * 14)));
  line-height: 1.5;
  color: #13303F;
  white-space: nowrap;
}
.c-notice__text {
  font-size: max(calc(var(--n) * 11.5), min(9px, calc(var(--n) * 12.3)));
  line-height: 1.5;
  color: #50656F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-notice__time {
  position: absolute;
  top: calc(var(--n) * 12);
  right: calc(var(--n) * 14);
  font-size: max(8px, calc(var(--n) * 10.5));
  line-height: 1.4;
  color: #50656F;
}

/* ハート（ピンクの丸＋白いハート）。大きさは --size */
.c-heart {
  --size: calc(var(--px) * 40);
  position: relative;
  display: block;
  flex: none;
  width: var(--size);
  height: var(--size);
  border: max(1px, calc(var(--size) * .028)) solid var(--white);
  border-radius: 50%;
  background: var(--pink);
}
.c-heart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.53 0.53 38.06 38.06'%3E%3Cpath d='M19.356 26.5287C19.356 26.5287 12.7882 22.6398 11.3191 18.4053C10.3685 15.5535 12.1833 12.7017 15.0351 12.7017C16.7635 12.7017 18.0598 13.6523 19.356 15.2943C20.6523 13.6523 21.9486 12.7017 23.677 12.7017C26.5288 12.7017 28.3436 15.5535 27.393 18.4053C25.9239 22.6398 19.356 26.5287 19.356 26.5287Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.53 0.53 38.06 38.06'%3E%3Cpath d='M19.356 26.5287C19.356 26.5287 12.7882 22.6398 11.3191 18.4053C10.3685 15.5535 12.1833 12.7017 15.0351 12.7017C16.7635 12.7017 18.0598 13.6523 19.356 15.2943C20.6523 13.6523 21.9486 12.7017 23.677 12.7017C26.5288 12.7017 28.3436 15.5535 27.393 18.4053C25.9239 22.6398 19.356 26.5287 19.356 26.5287Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ?バッジ（ペリウィンクルの丸＋白い?） */
.c-q {
  --size: calc(var(--px) * 122);
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border: max(2px, calc(var(--size) * .031)) solid var(--white);
  border-radius: 50%;
  background: var(--peri);
  color: var(--white);
}
.c-q::before {
  content: "?";
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: calc(var(--size) * .74);
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-.03em);
}

/* ------------------------------------------------------------
   7. 端に付く紺パネル・セクションのカーブ
------------------------------------------------------------ */
/* 画面端（額縁）に付く紺パネル。外側（額縁側）はページの端にぴったり付ける。
   額縁側の上下に凹カーブ（::before 上 / ::after 下） */
.c-edge-panel {
  --edge-bg: var(--navy);
  --edge-r: calc(var(--px) * 37);    /* 内側の角丸 */
  --edge-c: calc(var(--px) * 52);    /* 額縁側の凹カーブの大きさ */
  position: relative;
  background: var(--edge-bg);
  color: var(--white);
}
.c-edge-panel::before,
.c-edge-panel::after {
  content: "";
  position: absolute;
  width: calc(var(--edge-c) + var(--frame));   /* 額縁の下まで伸ばして、すき間が出ないように */
  height: var(--edge-c);
  pointer-events: none;
}
.c-edge-panel--right { border-radius: var(--edge-r) 0 0 var(--edge-r); }
.c-edge-panel--right::before {
  bottom: calc(100% - 1px);
  right: 0;
  background: radial-gradient(circle at 0 0, transparent calc(var(--edge-c) - .6px), var(--edge-bg) calc(var(--edge-c) + .4px));
}
.c-edge-panel--right::after {
  top: calc(100% - 1px);
  right: 0;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--edge-c) - .6px), var(--edge-bg) calc(var(--edge-c) + .4px));
}
.c-edge-panel--left { border-radius: 0 var(--edge-r) var(--edge-r) 0; }
.c-edge-panel--left::before {
  bottom: calc(100% - 1px);
  left: 0;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--edge-c) - .6px), var(--edge-bg) calc(var(--edge-c) + .4px));
}
.c-edge-panel--left::after {
  top: calc(100% - 1px);
  left: 0;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--edge-c) - .6px), var(--edge-bg) calc(var(--edge-c) + .4px));
}
.c-edge-panel--no-top::before, .c-edge-panel--no-bottom::after { display: none; }

/* セクション上端のカーブ（Figmaの「角丸130の大きなカーブ」）。
   セクション（position:relative）の中の最初に置き、角の外側を color の色で塗る
   （= となりのセクションの色）。--a 左、--b 右、両方付けると左右。--bottom で下端。 */
.c-curve {
  --curve-r: calc(var(--px) * 130);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--curve-r);
  color: var(--bg);
  pointer-events: none;
}
.c-curve::before,
.c-curve::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--curve-r);
  height: var(--curve-r);
}
.c-curve--a::before { left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--curve-r) - .6px), currentColor calc(var(--curve-r) + .4px)); }
.c-curve--b::after { right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--curve-r) - .6px), currentColor calc(var(--curve-r) + .4px)); }
.c-curve--bottom { top: auto; bottom: 0; }
.c-curve--bottom.c-curve--a::before { background: radial-gradient(circle at 100% 0, transparent calc(var(--curve-r) - .6px), currentColor calc(var(--curve-r) + .4px)); }
.c-curve--bottom.c-curve--b::after { background: radial-gradient(circle at 0 0, transparent calc(var(--curve-r) - .6px), currentColor calc(var(--curve-r) + .4px)); }

/* ------------------------------------------------------------
   8. 数字・線・表示切り替え
------------------------------------------------------------ */
/* 数字＋単位＋ラベル */
.c-kpi { display: flex; flex-direction: column; gap: calc(var(--px) * 8); }
.c-kpi__value { display: flex; align-items: baseline; gap: calc(var(--px) * 6); line-height: 1; white-space: nowrap; }
.c-kpi__num {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--kpi-size, max(34px, calc(var(--px) * 56)));
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.c-kpi__unit {
  font-weight: 500;
  font-size: var(--kpi-unit, max(12px, calc(var(--px) * 16)));
  letter-spacing: .02em;
}
.c-kpi__label {
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 14));
  line-height: 1.6;
  color: var(--slate);
}

/* 0.5px の区切り線 */
.c-hair {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: .5px solid var(--hair);
}
.c-hair--v { width: 0; height: auto; align-self: stretch; border-top: 0; border-left: .5px solid var(--hair); }
.c-hair--light { border-color: rgba(95, 120, 136, .35); }
.c-hair--white { border-color: rgba(255, 255, 255, .4); }

/* 表示切り替え・補助 */
@media (min-width: 901px) { .u-sp { display: none !important; } }
@media (max-width: 900px) { .u-pc { display: none !important; } }
.u-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.u-en { font-family: var(--font-en); }
.u-nowrap { white-space: nowrap; }
.u-ib { display: inline-block; }   /* 見出しの改行位置をそろえる：<span class="u-ib">〜</span> */

/* 短い説明文は、PCでは文節で折り返す（「宿泊施／設」「リピー／ター」のように言葉の途中で切れないように）。
   ・Chrome・Edge に効く書き方。Safari・Firefox では今までどおり（どこでも折れる）
   ・長い文章（代表メッセージなど）とスマホには付けない：行の右端がそろわなくなるため
   ・文末の「ます。」だけが次の行に落ちるのを、どのブラウザでも防ぎたい所は、
     HTML側で最後の言葉を <span class="u-ib">〜します。</span> と囲む（イントロ・解決・FAQの答えで使用） */
@media (min-width: 901px) {
  .intro__text, .solution__text, .solution__lead, .service__lead, .service__text,
  .works__text, .voice__text, .about__team-text, .about__desc,
  .process__step-text, .process__next-lead, .process__next-text, .faq__answer {
    word-break: auto-phrase;
  }
}

/* ------------------------------------------------------------
   9. 動き（main.js と組み）
   ・data-reveal … 画面に入ったら .is-in が付く
   ・data-float … ずっとふわふわ（--float-delay / --float-dur / --float-amp で調整）
   ・data-parallax … main.js が --plx-x / --plx-y を入れる（CSSの translate を使う）
------------------------------------------------------------ */
/* パララックスとふわふわは translate を合成（transform は reveal 用に空けておく） */
[data-parallax], [data-parallax-x], [data-float], .c-heart--float {
  translate: var(--plx-x, 0px) calc(var(--plx-y, 0px) + var(--fy, 0px));
}
/* @property が使えない古いブラウザ（iOS 16.3 以前）では --plx-* が子に受け継がれて、パララックスの中のふわふわが2倍ずれる。
   → 要素ごとに 0 から始める（main.js が入れる値は style 属性なので、そちらが優先される） */
[data-parallax], [data-parallax-x], [data-float], .c-heart--float { --plx-x: 0px; --plx-y: 0px; }
[data-float], .c-heart--float {
  animation: c-float var(--float-dur, 5.2s) ease-in-out var(--float-delay, 0s) infinite;
}
@keyframes c-float {
  0%, 100% { --fy: 0px; }
  50% { --fy: calc(var(--float-amp, 10px) * -1); }
}

/* reveal：初期状態（JSがあるときだけ隠す） */
html.js [data-reveal] {
  transition:
    opacity .9s var(--ease) var(--delay, 0s),
    transform .9s var(--ease) var(--delay, 0s),
    clip-path 1.1s var(--ease-out) var(--delay, 0s),
    filter .9s var(--ease) var(--delay, 0s);
}
html.js [data-reveal]:not(.is-in) { opacity: 0; }
html.js [data-reveal=""]:not(.is-in),
html.js [data-reveal="up"]:not(.is-in) { transform: translate3d(0, 32px, 0); }
html.js [data-reveal="down"]:not(.is-in) { transform: translate3d(0, -32px, 0); }
html.js [data-reveal="left"]:not(.is-in) { transform: translate3d(-48px, 0, 0); }    /* 左から */
html.js [data-reveal="right"]:not(.is-in) { transform: translate3d(48px, 0, 0); }    /* 右から */
html.js [data-reveal="zoom"]:not(.is-in) { transform: scale(.92); }
html.js [data-reveal="pop"]:not(.is-in) { transform: scale(.6); }
html.js [data-reveal="blur"]:not(.is-in) { filter: blur(10px); transform: translate3d(0, 16px, 0); }
html.js [data-reveal="clip"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }        /* 下から開く */
html.js [data-reveal="clip-left"]:not(.is-in) { opacity: 1; clip-path: inset(0 100% 0 0); }   /* 左から開く */
html.js [data-reveal="clip-in"]:not(.is-in) { clip-path: inset(12% 12% 12% 12% round var(--clip-r, 24px)); transform: scale(1.04); }
html.js [data-reveal="pop"] { transition-timing-function: var(--ease-spring), var(--ease-spring), var(--ease), var(--ease); transition-duration: .6s; }
html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
html.js [data-reveal="clip"].is-in,
html.js [data-reveal="clip-left"].is-in { clip-path: inset(0 0 0 0); }
html.js [data-reveal="clip-in"].is-in { clip-path: inset(0 0 0 0 round var(--clip-r, 24px)); }

/* data-split：見出しが左から右へ、すっと現れる（main.js が .c-char に分ける）
   上品に見せるため、1文字ごとのずれは小さく（--split-step）、動く幅も小さく、ぼかしは使わない。
   もっとゆっくり → 1.1s / 1.3s を大きく。文字ごとの差をなくす → --split-step: 0s */
.c-char { display: inline-block; white-space: pre; }
html.js [data-split] .c-char {
  transition:
    opacity 1.1s var(--ease) calc(var(--delay, 0s) + var(--i, 0) * var(--split-step, .022s)),
    transform 1.3s var(--ease-out) calc(var(--delay, 0s) + var(--i, 0) * var(--split-step, .022s));
}
html.js [data-split]:not(.is-in) .c-char { opacity: 0; transform: translate3d(0, .2em, 0); }
html.js [data-split]:not(.is-split) { visibility: hidden; }   /* 1文字ずつに分けるまで隠す */

/* data-notice：通知カードが順番にポップ（.is-pop） */
html.js [data-notice] {
  transform-origin: var(--notice-origin, 24% 100%);
  transition: opacity .45s var(--ease), transform .7s var(--ease-spring);
}
html.js [data-notice]:not(.is-pop) { opacity: 0; transform: translate3d(0, 14px, 0) scale(.88); }
html.js [data-notice].is-out { opacity: 0; transition-duration: .4s, .4s; transition-timing-function: var(--ease), var(--ease); transform: translate3d(0, -8px, 0) scale(.96); }

/* data-draw：線を描く（JSが準備できるまで見せない） */
html.js [data-draw]:not(.is-draw-ready) { opacity: 0; }

/* data-count：数字の幅がカウント中にゆれにくいように */
[data-count] { font-variant-numeric: tabular-nums; }

/* data-count-confetti：紙吹雪を描く canvas（main.js がカードの中に入れて、終わったら消す） */
.c-confetti {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 強調の黄色い下線（マーカー）：<span class="c-marker">強調したい言葉</span>
   親（または先祖）に data-reveal があると、表示されたあとに左からすっと引かれる。色は --marker、太さは 62% / 92% の数字。
   文字は太字にして、まわりより少しだけ大きくする（大きさは 1.1em の数字。同じ大きさにするなら 1em）。
   line-height: 1 は、大きくした行だけ行の間が広がらないようにするため（消さない） */
.c-marker {
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
  background-image: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.js [data-reveal] .c-marker { transition: background-size 1s var(--ease-out) calc(var(--delay, 0s) + .55s); }
html.js [data-reveal]:not(.is-in) .c-marker { background-size: 0% 100%; }

/* data-carousel：横スクロールの土台（並べ方・すき間は各セクションで） */
[data-carousel-track] {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
[data-carousel-track]::-webkit-scrollbar { display: none; }
[data-carousel-track] > * { scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) {
  [data-carousel-track] { cursor: grab; }
  [data-carousel].is-dragging [data-carousel-track] { cursor: grabbing; }
  [data-carousel].is-dragging [data-carousel-track] * { pointer-events: none; -webkit-user-select: none; user-select: none; }
}
[data-carousel-prev][aria-disabled="true"],
[data-carousel-next][aria-disabled="true"] { opacity: .35; cursor: default; }

/* data-accordion：閉じている中身（hidden="until-found" でページ内検索にも対応） */
[data-accordion-panel][hidden] { height: 0; overflow: hidden; padding-block: 0 !important; }

/* ページ内リンクの移動先（JSがフォーカスを移す）に枠を出さない */
[tabindex="-1"]:focus { outline: none; }

/* JSが読み込めなかったときの保険（3秒後に全部見せる） */
html.js:not(.is-ready) [data-reveal],
html.js:not(.is-ready) [data-split] .c-char,
html.js:not(.is-ready) [data-notice],
html.js:not(.is-ready) [data-draw],
html.js:not(.is-ready) [data-split] { animation: c-failsafe 0s linear 3s forwards; }
@keyframes c-failsafe { to { opacity: 1; transform: none; clip-path: none; filter: none; visibility: visible; } }
html.js:not(.is-ready) .c-marker { animation: c-failsafe-marker 0s linear 3s forwards; }
@keyframes c-failsafe-marker { to { background-size: 100% 100%; } }

/* ------------------------------------------------------------
   10. 動きを減らす設定 / ?static（スクショ用の静止モード）
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-split] .c-char, html.js [data-notice] {
    opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important;
  }
  [data-float], .c-heart--float { animation: none !important; }
  [data-parallax], [data-parallax-x], [data-float], .c-heart--float { translate: none !important; }
  html.js [data-draw] { opacity: 1 !important; }
  html.js .c-marker { background-size: 100% 100% !important; transition: none !important; }
}
html.is-reduced [data-reveal], html.is-reduced [data-split] .c-char, html.is-reduced [data-notice],
html.is-static [data-reveal], html.is-static [data-split] .c-char, html.is-static [data-notice] {
  opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important;
}
html.is-reduced [data-draw], html.is-static [data-draw] { opacity: 1 !important; }
html.is-reduced .c-marker, html.is-static .c-marker { background-size: 100% 100% !important; transition: none !important; }
html.is-reduced [data-split], html.is-static [data-split] { visibility: visible !important; }
html.is-reduced [data-float], html.is-reduced .c-heart--float { animation: none !important; }
html.is-reduced [data-parallax], html.is-reduced [data-parallax-x] { translate: none !important; }

/* static：動きを全部止める。html の外側はマゼンタ（shot.py がページの終わりを見つける目印） */
html.is-static { background: #ff00ff; scroll-padding-top: 0; scrollbar-gutter: auto; overflow: hidden; }
html.is-static body { background: var(--navy); }
html.is-static *, html.is-static *::before, html.is-static *::after {
  transition: none !important;
  animation: none !important;
  caret-color: transparent;
}
html.is-static [data-parallax], html.is-static [data-parallax-x], html.is-static [data-float], html.is-static .c-heart--float { translate: none !important; }

/* ------------------------------------------------------------
   11. SP（900px以下）
------------------------------------------------------------ */
@media (max-width: 900px) {
  body { font-size: 15px; }
  .c-label { font-size: 15px; }
  .c-label__line { width: 40px; margin-right: 14px; }
  .c-label__en { margin-left: 14px; font-size: 11px; }
  .c-title { font-size: 27px; line-height: 1.45; }
  .c-title--l { font-size: 24px; line-height: 1.6; }
  .c-lead { font-size: 15px; line-height: 1.85; }
  .c-text { font-size: 14.5px; }
  .c-note { font-size: 11.5px; }
  .c-sub { font-size: 12px; }
  .c-sub::before { margin-right: 8px; }
  .c-sub__en { font-size: 11px; }
  .c-sub__en + .c-sub__ja::before { width: 20px; margin: 0 10px; }
  .c-pill { --pill-fs: 13px; }
  .c-pill--s { --pill-fs: 12px; }
  .c-pill--l { --pill-fs: 16px; }
  .c-btn { font-size: 15px; --btn-h: 52px; padding-inline: 1.8em; }
  .c-btn--s { --btn-h: 44px; font-size: 13px; padding-inline: 1.3em; }
  .c-card { border-radius: var(--r, 18px); }
  .c-notice { --n: .86px; }
  .c-heart { --size: 32px; }
  .c-q { --size: 64px; }
  .c-edge-panel { --edge-r: 24px; --edge-c: 22px; }
  .c-curve { --curve-r: 48px; }
  .c-kpi { gap: 6px; }
  .c-kpi__value { gap: 4px; }
  .c-kpi__num { font-size: var(--kpi-size, 38px); }
  .c-kpi__unit { font-size: var(--kpi-unit, 13px); }
  .c-kpi__label { font-size: 12px; }
}
@media (max-width: 480px) {
  .c-title { font-size: 25px; }
}


/* ===== 01-header ===== */
/* ============================================================
   01-header … ヘッダー
   ・.header__top  … ページ最上部（ロゴ＋右上の紺ブロック）。ページと一緒にスクロールして消える
   ・.header__bar  … 120pxスクロールすると上に出る小さな固定ヘッダー（.header.is-compact）
   ・.header__drawer … SPの全画面メニュー
============================================================ */
/* .header 自体には z-index を付けない。付けると中の固定ヘッダー（--z-bar）と全画面メニュー（--z-drawer）が
   .header の重なり順（30）に閉じ込められて、右下のお悩みガイド（--z-guide: 70）がメニューの上に出てしまう */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;   /* 下のFVの要素をさわれるように。リンクだけ auto に戻す */
}
.header a, .header button { pointer-events: auto; }

/* ---------- ページ最上部 ---------- */
.header__top {
  position: relative;
  z-index: var(--z-header);
  height: calc(var(--px) * 175);
}
.header__logo {
  position: absolute;
  left: calc(var(--px) * 66);
  top: calc(var(--px) * 58);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(22px, calc(var(--px) * 38));
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
  transition: opacity .3s var(--ease);
}

/* 右上の紺ブロック（Figma 47:861。左下だけ角丸37） */
.header__block {
  --cut: calc(var(--px) * 49);   /* 凹カーブの大きさ（47:862 / 47:864） */
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--px) * 411);
  height: calc(var(--px) * 175);
  background: var(--navy);
  border-bottom-left-radius: calc(var(--px) * 37);
}
.header__block::before,
.header__block::after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--cut) - .6px), var(--navy) calc(var(--cut) + .4px));
  pointer-events: none;
}
/* 左上：額縁の上辺とつながる（額縁の下まで伸ばして、すき間が出ないように） */
.header__block::before { top: 0; right: calc(100% - 1px); width: var(--cut); height: calc(var(--cut) + var(--frame)); }
/* 右下：額縁の右辺とつながる */
.header__block::after { top: calc(100% - 1px); right: 0; width: calc(var(--cut) + var(--frame)); height: var(--cut); }

/* ナビ2列 */
.header__nav {
  display: flex;
  padding: calc(var(--px) * 49) 0 0 calc(var(--px) * 65);
}
.header__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 15);
}
.header__list:first-child { width: calc(var(--px) * 190); }
.header__list li { display: flex; }
.header__link {
  position: relative;
  display: inline-block;
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.32;
  letter-spacing: .02em;
  color: var(--white);
  transition: color .3s var(--ease);
}
/* 項目の前の短い線（最初の項目に出ていて、ホバーした項目へ移る） */
.header__link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + var(--px) * 14);
  width: calc(var(--px) * 24);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}
.header__list:first-child li:first-child .header__link::before { transform: scaleX(1); }
@media (hover: hover) {
  .header__nav:hover .header__list li .header__link::before { transform: scaleX(0); }
  .header__nav:hover .header__list li .header__link:hover::before { transform: scaleX(1); }
  .header__link:hover { color: var(--light); }
}

/* メニューボタン（SPのみ） */
.header__menu {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
}
.header__menu-lines {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
}
.header__menu-lines::before,
.header__menu-lines::after {
  content: "";
  position: absolute;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width .35s var(--ease);
}
.header__menu-lines::before { top: 0; width: 100%; }
.header__menu-lines::after { bottom: 0; width: 64%; }
@media (hover: hover) {
  .header__menu:hover .header__menu-lines::after { width: 100%; }
}

/* ---------- 小さな固定ヘッダー（スクロール後） ---------- */
.header__bar {
  position: fixed;
  z-index: var(--z-bar);
  top: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1180px, calc(100% - 56px));
  height: 60px;
  padding: 0 8px 0 28px;
  border-radius: 999px;
  background: rgba(242, 241, 240, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
          backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 18px 40px -26px rgba(26, 58, 82, .55), inset 0 0 0 1px rgba(255, 255, 255, .7);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -130%, 0);
  transition: transform .7s var(--ease-out), opacity .4s var(--ease), visibility 0s linear .7s;
}
.header.is-compact .header__bar {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0);
  transition: transform .7s var(--ease-out), opacity .4s var(--ease), visibility 0s;
}
.header__bar-logo {
  margin-right: auto;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
}
.header__bar-list { display: flex; gap: 26px; }
.header__bar-link {
  position: relative;
  display: block;
  padding: 8px 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
/* いま見ているセクション（スクロールスパイ）… 下にピンクの点 */
.header__bar-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--pink);
  transform: scale(0);
  transition: transform .45s var(--ease-spring);
}
.header__bar-link.is-current { color: var(--navy); }
.header__bar-link.is-current::after { transform: scale(1); }
@media (hover: hover) {
  .header__bar-link:hover { color: var(--slate); }
}
.header__bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header__bar-cta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}
@media (hover: hover) {
  .header__bar-cta:hover { background: #DE2D6D; box-shadow: 0 10px 22px -12px rgba(237, 57, 123, .9); }
}
.header__menu--bar {
  background: var(--navy);
  color: var(--white);
}
/* 読んだ位置のライン（ごく細く） */
.header__bar-progress {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
  opacity: .7;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

/* ---------- 全画面メニュー（SP） ---------- */
.header__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: 16px 20px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy);
  color: var(--white);
  pointer-events: auto;
  visibility: hidden;
  clip-path: circle(0px at calc(100% - 42px) 38px);
  transition: clip-path .75s var(--ease-out), visibility 0s linear .75s;
}
.header__drawer.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 42px) 38px);
  transition: clip-path .75s var(--ease-out), visibility 0s;
}
.header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.header__drawer-logo {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--white);
}
.header__close {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.header__close-x::before,
.header__close-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: var(--white);
  transform: rotate(45deg);
}
.header__close-x::after { transform: rotate(-45deg); }
.header__drawer-nav { margin-top: 36px; }
.header__drawer-list { border-top: 1px solid rgba(255, 255, 255, .16); }
.header__drawer-list li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.header__drawer-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 4px 15px;
}
.header__drawer-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1.4;
  color: var(--peri);
}
.header__drawer-ja {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: .04em;
}
.header__drawer-link.is-current .header__drawer-ja::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 .3em .5em;
  border-radius: 50%;
  background: var(--pink);
  vertical-align: middle;
}
.header__drawer-foot {
  margin-top: auto;
  padding-top: 32px;
}
.header__drawer-note {
  margin-top: 14px;
  font-size: 12px;
  text-align: center;
  color: var(--light);
  opacity: .8;
}
.header__drawer-heart {
  position: absolute;
  top: 118px;
  right: 22px;
  --size: 34px;
  animation: c-float 4.6s ease-in-out infinite;
  translate: 0 var(--fy, 0px);
}
/* 開いたとき、項目が順番に出る */
.header__drawer-list li,
.header__drawer-foot {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .5s var(--ease), transform .7s var(--ease-out);
}
.header__drawer.is-open .header__drawer-list li,
.header__drawer.is-open .header__drawer-foot { opacity: 1; transform: none; }
.header__drawer.is-open .header__drawer-list li:nth-child(1) { transition-delay: .12s; }
.header__drawer.is-open .header__drawer-list li:nth-child(2) { transition-delay: .17s; }
.header__drawer.is-open .header__drawer-list li:nth-child(3) { transition-delay: .22s; }
.header__drawer.is-open .header__drawer-list li:nth-child(4) { transition-delay: .27s; }
.header__drawer.is-open .header__drawer-list li:nth-child(5) { transition-delay: .32s; }
.header__drawer.is-open .header__drawer-list li:nth-child(6) { transition-delay: .37s; }
.header__drawer.is-open .header__drawer-foot { transition-delay: .44s; }

/* メニューが開いている間はページをスクロールさせない */
html.is-locked { overflow: hidden; }

/* ---------- 幅が少し狭いPC ---------- */
@media (max-width: 1180px) and (min-width: 901px) {
  .header__bar { gap: 20px; padding-left: 22px; }
  .header__bar-list { gap: 18px; }
  .header__bar-link { font-size: 13px; }
  .header__bar-cta { padding: 0 18px; font-size: 13px; }
}
@media (min-width: 901px) {
  .header__drawer { display: none !important; }
  .header__menu--bar { display: none; }
}

/* ---------- SP ---------- */
@media (max-width: 900px) {
  .header__top { height: 72px; }
  .header__logo { left: 20px; top: 26px; font-size: 21px; }
  .header__logo::after { content: ""; position: absolute; inset: -12px -8px; }   /* 指で押しやすいように、押せる範囲を上下左右に広げる（見た目は変わらない） */
  .header__nav { display: none; }
  .header__block {
    --cut: 20px;
    width: 76px;
    height: 70px;
    border-bottom-left-radius: 24px;
  }
  .header__menu { display: grid; }
  .header__block .header__menu {
    position: absolute;
    top: calc(var(--frame) + 10px);
    right: calc(var(--frame) + 13px);
  }

  .header__bar {
    top: 10px;
    gap: 12px;
    width: calc(100% - 24px);
    height: 56px;
    padding: 0 6px 0 18px;
  }
  .header__bar-logo { font-size: 18px; }
  .header__bar-nav { display: none; }
  .header__bar-cta { height: 40px; padding: 0 14px; font-size: 12px; gap: 6px; }
  .header__bar-progress { left: 26px; right: 26px; }
}
@media (max-width: 349px) {
  .header__bar-cta { display: none; }   /* これより狭いと、ロゴとボタンが並ばない */
}

/* ---------- ?static（スクショ用） ---------- */
html.is-static .header__bar,
html.is-static .header__drawer { display: none !important; }


/* ===== 10-fv ===== */
/* ============================================================
   10-fv … ファーストビュー
   ・PC：Figma（幅1440）の座標をそのまま使う。1デザインpx = var(--u) = var(--px)
   ・SP：幅390の座標で組み直し。1px = var(--u) = var(--sp)（600pxより広いと中央に600幅で置く）
   ・各パーツは --x / --y（左上の座標）と --w（幅）を数字で持つ → 位置の調整はここだけ
   ・.fv__layer … パララックスの層。ページの一番上を中心にした高い透明の箱なので、
     スクロール0ではデザインどおりの位置、スクロールすると層ごとの速さでずれる
============================================================ */
.fv {
  --u: var(--px);                      /* 座標の単位 */
  --o: calc(var(--u) * 1300);          /* 層の中心合わせ（中身より少し大きい数） */
  position: relative;
  z-index: 1;
  overflow-x: clip;                    /* 画面の外にはみ出す人物を切る（縦ははみ出してOK） */
}
.fv__stage {
  height: calc(var(--u) * 1024);       /* 下の白いカード（イントロ）が始まる位置 */
}

/* ---------- パララックスの層 ---------- */
.fv__layer {
  position: absolute;
  top: calc(var(--o) * -1);
  left: 0;
  width: 100%;
  height: calc(var(--o) * 2);
  pointer-events: none;
}
.fv__layer > * {
  position: absolute;
  left: calc(var(--u) * var(--x, 0));
  top: calc(var(--o) + var(--u) * var(--y, 0));
  pointer-events: auto;
}
/* 重なり順（Figmaと同じ：奥のスマホ → 見出し → 右のスマホ → 通知・ハート → 人物 → 手前の通知） */
.fv__layer--mid { z-index: 1; }
.fv__layer--left { z-index: 2; }
.fv__layer--copy { z-index: 3; }
.fv__layer--right { z-index: 4; }
.fv__layer--hearts { z-index: 5; }
.fv__layer--notices { z-index: 5; }
.fv__layer--people { z-index: 6; }
.fv__layer--front { z-index: 7; }

/* ---------- 見出し ---------- */
.fv__copy {
  --y: 249;
  left: 0;
  width: 100%;
  text-align: center;
}
.fv__title {
  /* 「。」の右の余白ぶん右へ寄せて、見た目の中心をそろえる */
  padding-left: calc(var(--u) * 30);
  font-weight: 700;
  font-size: max(30px, calc(var(--u) * 64));
  line-height: 1.32;
  letter-spacing: .02em;
  white-space: nowrap;
}
.fv__sub {
  margin-top: calc(var(--u) * 18.5);
  padding-right: calc(var(--u) * 10);
  font-weight: 700;
  font-size: max(14px, calc(var(--u) * 24));
  line-height: 1.32;
  letter-spacing: .02em;
}

/* ---------- ハート ---------- */
.fv__heart { --size: calc(var(--u) * var(--s, 37)); }
/* ポンと出る動き（reveal）に、ホバーで少し大きくなる動きを足す */
html.js .fv__heart[data-reveal] {
  transition:
    opacity .6s var(--ease-spring) var(--delay, 0s),
    transform .6s var(--ease-spring) var(--delay, 0s),
    scale .45s var(--ease-spring);
}
.fv__heart--1 { --x: 678; --y: 139; --s: 70; }
.fv__heart--2 { --x: 197; --y: 301; }
.fv__heart--3 { --x: 311; --y: 131; }
.fv__heart--4 { --x: 1300; --y: 326; }
.fv__heart--5 { --x: 904; --y: 460; }
@media (hover: hover) {
  .fv__heart:hover { scale: 1.18; }
}

/* ---------- スマホ（写真を端末の形で切り抜き＋白い縁） ---------- */
.fv__phone {
  width: calc(var(--u) * 346);
  aspect-ratio: 346 / 747;
}
.fv__phone--left { --x: 150; --y: 516; }
.fv__phone--mid { --x: 539; --y: 424; }
.fv__phone--right { --x: 920; --y: 516; }
.fv__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--light);
  /* 端末の形（上のノッチ付き・角丸）で切り抜く */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 348 748.6' preserveAspectRatio='none'%3E%3Cpath d='M106.8 19.41C106.8 26.15 112.27 31.61 119 31.61H232.34C239.08 31.61 244.54 26.15 244.54 19.41V1H310.3C331.68 1 349.02 18.33 349.02 39.71V710.88C349.02 732.26 331.68 749.59 310.3 749.59H39.71C18.33 749.59 1 732.26 1 710.88V39.71C1 18.33 18.33 1 39.71 1H100.48C103.96 1 106.8 3.82 106.8 7.3V19.41Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 348 748.6' preserveAspectRatio='none'%3E%3Cpath d='M106.8 19.41C106.8 26.15 112.27 31.61 119 31.61H232.34C239.08 31.61 244.54 26.15 244.54 19.41V1H310.3C331.68 1 349.02 18.33 349.02 39.71V710.88C349.02 732.26 331.68 749.59 310.3 749.59H39.71C18.33 749.59 1 732.26 1 710.88V39.71C1 18.33 18.33 1 39.71 1H100.48C103.96 1 106.8 3.82 106.8 7.3V19.41Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.fv__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease);
}
/* 白い縁（端末の形の線） */
.fv__phone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 348 748.6' preserveAspectRatio='none'%3E%3Cpath d='M106.8 19.41C106.8 26.15 112.27 31.61 119 31.61H232.34C239.08 31.61 244.54 26.15 244.54 19.41V1H310.3C331.68 1 349.02 18.33 349.02 39.71V710.88C349.02 732.26 331.68 749.59 310.3 749.59H39.71C18.33 749.59 1 732.26 1 710.88V39.71C1 18.33 18.33 1 39.71 1H100.48C103.96 1 106.8 3.82 106.8 7.3V19.41Z' fill='none' stroke='white' stroke-width='4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@media (hover: hover) {
  .fv__phone:hover .fv__screen img { scale: 1.05; }
}

/* 画面の中で「いいね」が上がっていく（Instagramのライブ風） */
.fv__like {
  --size: calc(var(--u) * 30);
  position: absolute;
  right: 11%;
  bottom: 50%;
  opacity: 0;                         /* ?static・動きを減らす設定では出さない */
  animation: fv-like 4.8s var(--ease) infinite;
}
.fv__like:nth-of-type(2) { --size: calc(var(--u) * 22); right: 17%; animation-delay: 1.2s; }
.fv__like:nth-of-type(3) { --size: calc(var(--u) * 26); right: 8%; animation-delay: 2.4s; }
.fv__like:nth-of-type(4) { --size: calc(var(--u) * 20); right: 14%; animation-delay: 3.6s; }
@keyframes fv-like {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.3); }
  12% { opacity: 1; transform: translate3d(-8%, -60%, 0) scale(1); }
  45% { opacity: 1; transform: translate3d(40%, -260%, 0) scale(1); }
  75% { opacity: .9; transform: translate3d(-30%, -440%, 0) scale(.95); }
  100% { opacity: 0; transform: translate3d(20%, -600%, 0) scale(.85); }
}

/* ---------- 通知カード ---------- */
.fv__notice { --n: var(--u); }
/* ポップの動き（data-notice）に、ホバーで少し大きくなる動きを足す（消えるときは共通の動きのまま） */
html.js .fv__notice[data-notice]:not(.is-out),
html.js .fv__cal[data-notice]:not(.is-out) {
  transition: opacity .45s var(--ease), transform .7s var(--ease-spring), scale .45s var(--ease-spring);
}
.fv__notice--a { --x: 224; --y: 429; }
.fv__notice--b { --x: 47; --y: 675; --tail-x: calc(var(--n) * 77); }
.fv__notice--c { --x: 488; --y: 671; background: var(--white); }
.fv__notice--c::after { width: calc(var(--n) * 30); height: calc(var(--n) * 25); }
.fv__notice--d { --x: 1004; --y: 403; background: var(--white); }
.fv__notice--e { --x: 849; --y: 636; --tail-x: calc(var(--n) * 30); }
.fv__notice .c-notice__icon svg { width: calc(var(--n) * 21); height: calc(var(--n) * 19); }
.fv__notice .c-notice__icon--dark svg { width: calc(var(--n) * 19); height: calc(var(--n) * 19); }
@media (hover: hover) {
  .fv__notice:hover, .fv__cal:hover { scale: 1.04; }
}

/* ---------- カレンダー ---------- */
.fv__cal {
  --n: var(--u);
  --x: 1236;
  --y: 565;
  width: calc(var(--n) * 170);
  padding: calc(var(--n) * 14) calc(var(--n) * 12.5) calc(var(--n) * 15.5) calc(var(--n) * 10.5);
  border: 1px solid var(--white);
  border-radius: calc(var(--n) * 22);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 calc(var(--n) * 16) calc(var(--n) * 32) calc(var(--n) * -10) rgba(42, 84, 112, .16);
  --notice-origin: 22% 100%;
}
.fv__cal::after {                     /* 吹き出しのしっぽ（左下） */
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: calc(var(--n) * 38);
  width: calc(var(--n) * 25);
  height: calc(var(--n) * 19);
  background: var(--white);
  clip-path: polygon(0 0, 80% 0, 100% 100%);
}
.fv__cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: calc(var(--n) * 19);
  padding: 0 calc(var(--n) * 4) 0 calc(var(--n) * 5.5);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}
.fv__cal-month { font-size: max(9px, calc(var(--n) * 13)); color: var(--navy); }
.fv__cal-stay { font-size: max(8px, calc(var(--n) * 11)); color: var(--pink); }
.fv__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: calc(var(--n) * 21.5) repeat(4, calc(var(--n) * 25));
  align-items: center;
  justify-items: center;
  font-family: var(--font-en);
  font-size: max(7px, calc(var(--n) * 10));
  line-height: 1;
  letter-spacing: 0;
  color: var(--navy);
}
.fv__cal-week {
  font-family: var(--font-ja);
  font-size: max(7px, calc(var(--n) * 9));
  color: var(--slate);
}
/* 予約が入った3日間（?static・動きを減らす設定では最初からピンク） */
.fv__day {
  display: grid;
  place-items: center;
  width: calc(var(--n) * 20);
  height: calc(var(--n) * 20);
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
}
.fv__cal.is-pop .fv__day {
  animation: fv-day .55s var(--ease-spring) both;
  animation-delay: calc(.55s + var(--i, 0) * .32s);
}
@keyframes fv-day {
  from { background-color: rgba(237, 57, 123, 0); color: var(--navy); scale: .55; }
  to { background-color: var(--pink); color: var(--white); scale: 1; }
}

/* ---------- 人物イラスト ---------- */
.fv__person { display: block; width: calc(var(--u) * var(--w)); }
.fv__person img {
  width: 100%;
  height: auto;
  /* 下端をやわらかく消す（広い画面で、白いカードの外に見える人物の切れ目を目立たせない） */
  -webkit-mask: linear-gradient(to bottom, #000 86%, transparent 99%);
          mask: linear-gradient(to bottom, #000 86%, transparent 99%);
}
.fv__person--b04 { --x: -111; --y: 777; --w: 247; }
.fv__person--01 { --x: 182; --y: 775; --w: 295; }
.fv__person--b01 { --x: 508; --y: 779; --w: 243; z-index: 1; }
/* まん中の人はイントロの白いカードのくり抜き（半円）から服が見えるので、下端を消さない */
.fv__person--b01 img { -webkit-mask: none; mask: none; }
.fv__person--04 { --x: 796; --y: 779; --w: 300; }
.fv__person--b05 { --x: 1110; --y: 779; --w: 252; }
.fv__person--03 { --x: 1373; --y: 781; --w: 289; }
/* PCだけ交代で出てくる4人（fv__person--extra）。ふだんは置かない。下の「PC … 人物の入れかわり」のときだけ出る。
   立ち位置は、交代する相手と「顔の中心」と「頭のてっぺん」がそろう数字にしてある（大きさは6人と同じ縮尺） */
.fv__person--extra { display: none; }
.fv__person--b02 { --x: 209; --y: 775; --w: 254; }   /* 01 の場所 */
.fv__person--02 { --x: 824; --y: 755; --w: 266; }    /* 04 の場所（頭の上の電球のぶん、絵が上に長いので y が小さい） */
.fv__person--05 { --x: 810; --y: 779; --w: 294; }    /* 04 の場所 */
.fv__person--b03 { --x: 1103; --y: 779; --w: 259; }  /* b05 の場所 */

/* ---------- 動きを減らす設定・?static ---------- */
@media (prefers-reduced-motion: reduce) {
  .fv__like { display: none; }
  .fv__cal .fv__day { animation: none !important; }
}
html.is-reduced .fv__like,
html.is-static .fv__like { display: none; }

/* ============================================================
   SP（900px以下）… 幅390の座標で組み直し（見出し → スマホ3台を少し重ねて → 人物3人）
============================================================ */
@media (max-width: 900px) {
  .fv {
    --u: var(--sp);
    --o: calc(var(--u) * 900);
  }
  /* 見出しは「、」のあとで2行（2026-10-05 に見出しの文が長くなったため。1行だったころより 46 高い）。
     そのぶん、見出しを 6 上へ、見出しより下のもの（通知・カレンダー・スマホ・人物・全体の高さ）を 40 ずつ下へ動かしてある。
     見出しを1行に戻すときは、下の数字を 40 ずつ引く（見出し --y 144・ハート1 --y 84・高さ 600 が元の数字） */
  .fv__stage {
    max-width: calc(var(--u) * 390);
    height: calc(var(--u) * 640);
  }

  /* 見出しの大きさ：35 → 32（2026-10-05）。
     小さくしたぶん見出しが少し低くなるので、上のハートと下の通知カードとのすき間がそろうよう、位置を 138 → 141 にしてある。
     大きさを変えるときは、この2つの数字をいっしょに見直す */
  .fv__copy { --y: 141; }
  .fv__title { padding-left: calc(var(--u) * 15); font-size: calc(var(--u) * 32); white-space: normal; }
  .fv__sub { margin-top: calc(var(--u) * 10); padding-right: 0; font-size: calc(var(--u) * 15); }

  .fv__heart--1 { --x: 172; --y: 78; --s: 46; }
  .fv__heart--2 { --x: 26; --y: 104; --s: 26; }
  .fv__heart--3 { --x: 326; --y: 112; --s: 24; }
  .fv__heart--4 { --x: 356; --y: 266; --s: 22; }
  .fv__heart--5 { --x: 20; --y: 340; --s: 22; }

  /* スマホ：まん中を手前にして少し重ねる */
  .fv__phone--mid { --x: 118; --y: 324; width: calc(var(--u) * 154); }
  .fv__phone--left { --x: 12; --y: 380; width: calc(var(--u) * 124); }
  .fv__phone--right { --x: 254; --y: 380; width: calc(var(--u) * 124); }
  .fv__layer--mid { z-index: 4; }
  .fv__layer--right { z-index: 2; }

  /* 通知：2枚＋カレンダーだけ */
  .fv__notice { --n: calc(var(--u) * .8); }
  .fv__notice--b, .fv__notice--c, .fv__notice--d { display: none; }
  .fv__notice--a { --x: 10; --y: 274; }
  .fv__notice--e { --x: 150; --y: 460; }
  .fv__cal { --n: calc(var(--u) * .68); --x: 262; --y: 302; }

  /* 人物：3人（のこりの3人は、下の「人物の入れかわり」で同じ場所に交代で出てくる） */
  .fv__person--b04, .fv__person--b05, .fv__person--03 { display: none; }
  .fv__person--01 { --x: -18; --y: 518; --w: 132; }                  /* -18：指さす手の端が、左の額縁の内側に細くのぞかない位置（交代する b04 も同じだけ左へ） */
  .fv__person--b01 { --x: 130; --y: 520; --w: 110; }
  .fv__person--04 { --x: 244; --y: 520; --w: 136; }
  /* 交代で出てくる3人の立ち位置（相手と頭の位置・大きさがそろうように置いてある） */
  .fv__person--b04 { --x: -6; --y: 519; --w: 111; }                  /* 左　　：01 と交代 */
  .fv__person--b05 { --x: 127.5; --y: 520; --w: 115; z-index: 1; }   /* まん中：b01 と交代（服の色が下の半円と同じ） */
  .fv__person--03 { --x: 246; --y: 521; --w: 132; }                  /* 右　　：04 と交代 */
}

/* ============================================================
   SP（900px以下）… 人物の入れかわり
   ・PCは6人並ぶが、SPは3人ぶんの場所しかない → 同じ場所に2人ずつ、交代で立つ
       左：01 ⇄ b04 ／ まん中：b01 ⇄ b05 ／ 右：04 ⇄ 03
   ・今の人が少し沈みながらすっと消えて、消えきってから、次の人が下からすっと出てくる
     → 2人が同じ場所に重なって見える瞬間をつくらない（2026-10-03）
       消える 約0.45秒 → 出る 約0.55秒。合わせて約1秒
   ・1か所ずつ。18s のとき、最初は 左（読み込みから約6.5秒後）→ 右（約12.5秒後）、そのあとは3秒おきに
     左 → まん中 → 右 → 左 … の順。2か所が同時に入れかわることはない
   ・3か所を1周の 1/3 ずつずらしているので、最初の入れかわりのあとは、いつも
     「はじめの3人」と「交代の3人」がまざって立つ
     （交代の3人は服がクリーム色。3人そろうと、下の白いカードとつながって白っぽく見えるので、そろえない）
   ・動くのは「SP幅・動きを減らす設定なし・?static でない」ときだけ。
     それ以外（PC・スクショ・動きを減らす設定）は、これまでどおり（SPは 01・b01・04 の3人が出たまま）
   ・調整するところ
       --swap-dur   … 1周の長さ。18s で「1人で立っている時間 約8秒 ／ 入れかわり 約1秒」。
                       長くすると、どちらも同じ割合でゆっくりになる（例：24s で 約10.7秒 ／ 約1.3秒）。
                       場所ごとのずれは自動で計算するので、変えるのはここだけでOK
       --swap-drop  … 沈む深さ（小さいほど控えめ。0 にすると、その場でふわっと入れかわるだけ）
       --swap-start … 最初の入れかわりを早める時間。最初（左）は、読み込みから「--swap-dur の 42% ＋ --swap-start」あと。
                       18s・-1s なら約6.5秒後（0s なら約7.5秒後、-3s なら約4.5秒後。-5s くらいまで）
       --swap-order … 場所の順番（0・1・2）。1つ増えるごとに --swap-dur の 1/3（18s なら 6秒）遅れて始まる。
                       3か所に 0・1・2 を1つずつ（同じ数字を2か所に付けると、同時に入れかわってしまう）
   ・やめたいとき：この @media のかたまりと、下の @keyframes 2つを消すだけで元にもどる
============================================================ */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.is-static):not(.is-reduced) .fv__person:not(.fv__person--extra) {
    --swap-dur: 18s;
    --swap-drop: calc(var(--u) * 12);
    --swap-start: -1s;
    display: block;                     /* 交代の3人も置く（中の画像は透明のまま出番を待つ） */
  }
  /* 順番（18s のとき、最初の入れかわりは 左 約6秒後 → 右 約12秒後 → まん中 約18秒後） */
  html.js:not(.is-static):not(.is-reduced) .fv__person--01,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b04 { --swap-order: 0; }   /* 左 */
  html.js:not(.is-static):not(.is-reduced) .fv__person--04,
  html.js:not(.is-static):not(.is-reduced) .fv__person--03 { --swap-order: 1; }    /* 右 */
  html.js:not(.is-static):not(.is-reduced) .fv__person--b01,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b05 { --swap-order: 2; }   /* まん中 */

  /* はじめから見えている3人（01・b01・04）
     ※ 動きは中の img に付ける（外側の picture は data-reveal の表示アニメが使うので、ぶつからないように）
     ※ calc(…) は「始まるまでの時間」＝ 1周の 1/3 × 順番 ＋ --swap-start */
  html.js:not(.is-static):not(.is-reduced) .fv__person--01 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b01 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--04 img {
    animation: fv-swap-a var(--swap-dur) linear calc(var(--swap-dur) / 3 * var(--swap-order, 0) + var(--swap-start, 0s)) infinite backwards;
  }
  /* 交代で出てくる3人（b04・b05・03）… 出番までは透明
     ※ 上の3人と、セレクタの書き方（強さ）を必ずそろえる。上だけ :not(…) などを足して強くすると、
        こちらの fv-swap-b が負けて、6人とも同じ動き（2人が重なって出て、いっしょに消える）になる（2026-10-03 に起きた不具合） */
  html.js:not(.is-static):not(.is-reduced) .fv__person--b04 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b05 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--03 img {
    opacity: 0;
    animation: fv-swap-b var(--swap-dur) linear calc(var(--swap-dur) / 3 * var(--swap-order, 0) + var(--swap-start, 0s)) infinite backwards;
  }
}
/* はじめから見えている人：立っている → 沈みながら消える → 相手の出番のあいだ待つ → 相手が消えたら、また出る
   （% は --swap-dur を100%とした位置。右の「◯秒」は 18s のとき。a と b は半周ずれた同じ動き。
     ・消える 2.5%（0.45秒）→ 消えきった瞬間に、相手が出はじめる 3%（0.54秒）
       → 2人が同じ場所に同時に見えることがない（重ならない）。順番を逆にしたり、時間を重ねたりしない
     ・消えるときは ease-in（だんだん速く、すっと去る）、出るときは ease-out（すっと出て、ふわっと止まる）
     ・もっとゆっくりにしたいときは、42 → 44.5 → 47.5（と 92 → 94.5 → 97.5）の間をひろげる。
       ただし「消えきる％」と「相手が出はじめる％」は、いつも同じ数字にそろえる（そろえないと重なる） */
@keyframes fv-swap-a {
  0%, 42% { opacity: 1; transform: translate3d(0, 0, 0); animation-timing-function: ease-in; }                           /* 〜7.56秒：見えている → 沈みはじめる */
  44.5% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); }                                                  /* 8.0秒：消えた（ここから相手が出る） */
  94.5% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); animation-timing-function: ease-out; }             /* 17.0秒：相手が消えた → 出はじめる */
  97.5%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }                                                           /* 17.55秒：出きった */
}
/* 交代で出てくる人 */
@keyframes fv-swap-b {
  0%, 44.5% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); animation-timing-function: ease-out; }         /* 〜8.0秒：待つ → 相手が消えたら出はじめる */
  47.5% { opacity: 1; transform: translate3d(0, 0, 0); }                                                                 /* 8.55秒：出きった */
  92% { opacity: 1; transform: translate3d(0, 0, 0); animation-timing-function: ease-in; }                               /* 16.56秒：沈みはじめる */
  94.5%, 100% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); }                                            /* 17.0秒：消えた（ここから相手が出る） */
}

/* ============================================================
   PC（901px以上）… 人物の入れかわり
   ・6人のうち3か所で、FVに出ていなかった4人が交代で出てくる
       01 ⇄ b02 ／ 04 ⇄ 02 と 05（04 → 02 → 04 → 05 → … と、かわるがわる）／ b05 ⇄ b03
     （左端の b04・まん中の b01・右端の 03 は、そのまま。まん中は下の半円と服の色がつながっているので替えない）
   ・動き方は SP と同じ（今の人が少し沈みながらすっと消えて、消えきってから、次の人が下から出てくる。2人は重ならない）。1か所ずつ
     36s のとき … 最初の入れかわりは読み込みから約7秒後（01 の場所）。そのあとは約6秒おきに1か所ずつ。
                   1人が立っている時間は約17秒、入れかわりは約1秒（消える 0.45秒 → 出る 0.54秒。SPと同じ速さ）
     ※ 入れかわりの速さを SP と同じにするため、PC は専用の @keyframes（fv-swap-a-pc / fv-swap-b-pc / fv-swap-b2）を使う。
        1周が SP の2倍（36s）なので、％の幅は SP の半分にしてある
   ・動くのは「PC幅・動きを減らす設定なし・?static でない」ときだけ。それ以外は、これまでどおり6人が立ったまま
   ・調整するところ
       --swap-dur   … 1周の長さ。長くすると、ゆっくりになる（例：48s で約8秒おき）
       --swap-drop  … 沈む深さ（0 にすると、その場でふわっと入れかわるだけ）
       --swap-start … 最初の入れかわりを早める時間（-8s で約6秒後。0s なら約14秒後）
   ・やめたいとき：この @media のかたまりと、下の @keyframes 1つを消す（HTML はそのままでよい）
============================================================ */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.is-static):not(.is-reduced) .fv__person {
    --swap-dur: 36s;
    --swap-drop: calc(var(--u) * 14);
    --swap-start: -8s;
  }
  html.js:not(.is-static):not(.is-reduced) .fv__person--extra { display: block; }
  /* 順番（1周の 1/3 ずつずらす → 2か所が同時に入れかわらない） */
  html.js:not(.is-static):not(.is-reduced) .fv__person--01,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b02 { --swap-order: 0; }
  html.js:not(.is-static):not(.is-reduced) .fv__person--04,
  html.js:not(.is-static):not(.is-reduced) .fv__person--02,
  html.js:not(.is-static):not(.is-reduced) .fv__person--05 { --swap-order: 1; }
  html.js:not(.is-static):not(.is-reduced) .fv__person--b05,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b03 { --swap-order: 2; }

  /* はじめから立っている3人（01・04・b05）。動きは中の img に付ける（外側は data-reveal が使う） */
  html.js:not(.is-static):not(.is-reduced) .fv__person--01 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--04 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b05 img {
    animation: fv-swap-a-pc var(--swap-dur) linear calc(var(--swap-dur) / 3 * var(--swap-order, 0) + var(--swap-start, 0s)) infinite backwards;
  }
  /* 交代で出てくる人（b02・b03）… 出番までは透明 */
  html.js:not(.is-static):not(.is-reduced) .fv__person--b02 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--b03 img {
    opacity: 0;
    animation: fv-swap-b-pc var(--swap-dur) linear calc(var(--swap-dur) / 3 * var(--swap-order, 0) + var(--swap-start, 0s)) infinite backwards;
  }
  /* 04 の場所の2人（02・05）… 2周で1回ずつ出る（05 は1周おくれ） */
  html.js:not(.is-static):not(.is-reduced) .fv__person--02 img,
  html.js:not(.is-static):not(.is-reduced) .fv__person--05 img {
    opacity: 0;
    animation: fv-swap-b2 calc(var(--swap-dur) * 2) linear calc(var(--swap-dur) / 3 * var(--swap-order, 0) + var(--swap-start, 0s)) infinite backwards;
  }
  html.js:not(.is-static):not(.is-reduced) .fv__person--05 img {
    animation-delay: calc(var(--swap-dur) / 3 * var(--swap-order, 0) + var(--swap-start, 0s) + var(--swap-dur));
  }
}
/* PC用（1周36s）。動きは SP の fv-swap-a / fv-swap-b と同じで、％の幅だけ半分（消える 1.25%＝0.45秒 → 出る 1.5%＝0.54秒）。
   ここでも「消えきる％」と「相手が出はじめる％」は同じ数字にそろえてある（43.25 と 93.25）。そろえないと2人が重なる */
@keyframes fv-swap-a-pc {
  0%, 42% { opacity: 1; transform: translate3d(0, 0, 0); animation-timing-function: ease-in; }                           /* 〜15.1秒：見えている → 沈みはじめる */
  43.25% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); }                                                 /* 15.6秒：消えた（ここから相手が出る） */
  93.25% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); animation-timing-function: ease-out; }            /* 33.6秒：相手が消えた → 出はじめる */
  94.75%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }                                                          /* 34.1秒：出きった */
}
@keyframes fv-swap-b-pc {
  0%, 43.25% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); animation-timing-function: ease-out; }        /* 〜15.6秒：待つ → 相手が消えたら出はじめる */
  44.75% { opacity: 1; transform: translate3d(0, 0, 0); }                                                                /* 16.1秒：出きった */
  92% { opacity: 1; transform: translate3d(0, 0, 0); animation-timing-function: ease-in; }                               /* 33.1秒：沈みはじめる */
  93.25%, 100% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); }                                           /* 33.6秒：消えた（ここから相手が出る） */
}
/* fv-swap-b-pc を「2周に1回だけ出る」形にしたもの（% は fv-swap-b-pc の半分。2周＝72s＝100%） */
@keyframes fv-swap-b2 {
  0%, 21.625% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); animation-timing-function: ease-out; }       /* 待つ → 相手（04）が消えたら出はじめる */
  22.375% { opacity: 1; transform: translate3d(0, 0, 0); }                                                               /* 出きった */
  46% { opacity: 1; transform: translate3d(0, 0, 0); animation-timing-function: ease-in; }                               /* 沈みはじめる */
  46.625%, 100% { opacity: 0; transform: translate3d(0, var(--swap-drop), 0); }                                          /* 消えた（次の出番まで待つ） */
}


/* ===== 11-intro ===== */
/* ============================================================
   11-intro … イントロ（白いカード＋数字4つ）
   ・FV（10）の人物・スマホの下側に重なる → FVより上の重なり順（z-index 2）
   ・カードの上のまん中の半円：Figmaと同じく、PCはカードを「くり抜き」（mask）→ 後ろの人物の服と
     スマホの写真がそのまま見える。SPは人物の下端が浅いので、服と同じ色の半円（.intro__notch）で描く
   ・PCはFigmaのカード内の座標（カード左上 = x67, y1024）で余白を決めている
============================================================ */
.intro {
  --intro-gray: #8A949B;               /* 数字の説明・注記（Figmaは #B8BDC1。読みやすさのため少し濃く） */
  --intro-line: rgba(95, 120, 136, .32);  /* 数字の区切り線（Figmaの 0.5px の線の見え方に合わせて淡く） */
  position: relative;
  z-index: 2;
  padding-bottom: calc(var(--px) * 14);
}
.intro__card {
  position: relative;
  width: calc(var(--px) * 1274);
  min-height: calc(var(--px) * 802);
  margin-left: calc(var(--px) * 67);
  padding: calc(var(--px) * 120) calc(var(--px) * 101) calc(var(--px) * 60);
  border-radius: calc(var(--px) * 60);
  background: var(--white);
  /* 上のまん中のくり抜き（Figma：中心 x644・半径49） */
  --notch-x: calc(var(--px) * 644);
  --notch-r: calc(var(--px) * 49);
  -webkit-mask: radial-gradient(circle at var(--notch-x) 0, transparent calc(var(--notch-r) - .5px), #000 calc(var(--notch-r) + .5px));
          mask: radial-gradient(circle at var(--notch-x) 0, transparent calc(var(--notch-r) - .5px), #000 calc(var(--notch-r) + .5px));
}
.intro__notch {                        /* SPだけ使う（PCはくり抜き） */
  display: none;
  position: absolute;
  top: 0;
  left: calc(var(--px) * 595);
  width: calc(var(--px) * 98);
  height: calc(var(--px) * 49);
  border-radius: 0 0 999px 999px;
  background: #00313B;
}

/* ---------- 見出し・文 ---------- */
.intro__head {
  display: grid;
  grid-template-columns: calc(var(--px) * 564) calc(var(--px) * 415);
  align-items: start;
  min-height: calc(var(--px) * 390);
  padding-left: calc(var(--px) * 49);
}
.intro__title {
  font-weight: 700;
  font-size: max(28px, calc(var(--px) * 48));
  line-height: 1.42;
  letter-spacing: .02em;
}
.intro__catch {
  margin-top: calc(var(--px) * 24);
  padding-left: calc(var(--px) * 5);
  font-weight: 500;
  font-size: max(15px, calc(var(--px) * 20));
  line-height: 1.8;
  letter-spacing: .02em;
}
.intro__text {
  margin-top: calc(var(--px) * 8);
  font-size: max(14px, calc(var(--px) * 18));
  line-height: 2.05;
  letter-spacing: .02em;
  text-wrap: pretty;                    /* 最後の行が1〜2文字だけにならないように */
}

/* ---------- 数字4つ ---------- */
.intro__stats {
  display: grid;
  /* 4つのマスの幅の割合。「数字＋単位」の右はしから次の区切り線までのすき間が、どのマスも同じ（約40）になる数字にしてある。
     数字のけた数を変えたら見直す（けたが増えたマスを大きく、そのぶん余っているマスを小さく。4つの合計は 1072）。
     2026-10-05：累計再生数が「500」→「3,000」になり、2つ目のマスが窮屈だったので 250・290・310・222 から変更 */
  grid-template-columns: 264fr 328fr 270fr 210fr;
  border-top: 1px solid var(--intro-line);
}
.intro__stat {
  --kpi-size: calc(var(--px) * 64);
  --kpi-unit: max(13px, calc(var(--px) * 20));
  justify-content: flex-end;
  gap: calc(var(--px) * 4);
  min-height: calc(var(--px) * 148);
  padding-left: calc(var(--px) * 42);
}
.intro__stat + .intro__stat { border-left: 1px solid var(--intro-line); }
.intro__stat--main {
  --kpi-size: calc(var(--px) * 96);
  padding-left: calc(var(--px) * 48);
}
.intro__stat .c-kpi__value { gap: calc(var(--px) * 12); margin-bottom: calc(var(--px) * -5); color: var(--ink); }
.intro__stat--main .c-kpi__value { margin-bottom: calc(var(--px) * -10); }
.intro__stat .c-kpi__num { letter-spacing: -.02em; }
.intro__stat--main .c-kpi__num { margin-left: calc(var(--px) * -12); }   /* 「1」の左の余白ぶん */
.intro__stat .c-kpi__unit {
  position: relative;
  bottom: calc(var(--px) * 8);          /* 数字の下の線より少し上（Figmaの位置） */
  font-weight: 500;
}
.intro__stat .c-kpi__label {
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.8;
  color: var(--intro-gray);
}
.intro__mark { margin-left: calc(var(--px) * 15); }

.intro__note {
  margin-top: calc(var(--px) * 57);
  padding-right: calc(var(--px) * 8);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 15));
  line-height: 1.8;
  letter-spacing: .02em;
  text-align: right;
  color: var(--intro-gray);
}

/* ============================================================
   SP（900px以下）
============================================================ */
@media (max-width: 900px) {
  .intro { padding-bottom: 12px; }
  .intro__stage { max-width: 600px; }
  .intro__card {
    width: auto;
    min-height: 0;
    margin: 0 12px;
    padding: 60px 22px 30px;
    border-radius: 28px;
    -webkit-mask: none;
            mask: none;
  }
  .intro__notch {
    display: block;
    left: 50%;
    width: 56px;
    height: 28px;
    margin-left: -28px;
  }
  .intro__head {
    display: block;
    min-height: 0;
    padding-left: 0;
  }
  .intro__title { font-size: 26px; line-height: 1.5; }
  .intro__catch { margin-top: 16px; padding-left: 0; font-size: 15px; line-height: 1.85; }
  .intro__text { margin-top: 18px; font-size: 14.5px; line-height: 1.95; text-align: left; }

  .intro__stats {
    grid-template-columns: 1fr 1fr;
    margin-top: 32px;
  }
  .intro__stat,
  .intro__stat--main {
    --kpi-size: 34px;
    --kpi-unit: 13px;
    gap: 4px;
    min-height: 0;
    padding: 20px 0 16px 16px;
  }
  .intro__stat--main { --kpi-size: 44px; }
  .intro__stat + .intro__stat { border-left: 0; }
  .intro__stat:nth-child(even) { border-left: 1px solid var(--intro-line); }
  .intro__stat:nth-child(n+3) { border-top: 1px solid var(--intro-line); }
  .intro__stat .c-kpi__value { gap: 6px; margin-bottom: -1px; }
  .intro__stat--main .c-kpi__value { margin-bottom: -3px; }
  .intro__stat--main .c-kpi__num { margin-left: -4px; }
  .intro__stat .c-kpi__unit { bottom: 3px; }
  .intro__stat .c-kpi__label { font-size: 12px; line-height: 1.6; }
  .intro__mark { margin-left: 6px; }
  .intro__note { margin-top: 16px; padding-right: 0; font-size: 11px; line-height: 1.7; text-align: left; }
}
@media (max-width: 480px) {
  .intro__card { margin: 0 10px; padding-inline: 20px; }
  /* 見出しの2行目「予約につながる発信へ」（10文字）が1行に入る大きさまで小さくする（最後の「へ」だけ落ちないように）。
     62px ＝ カードの外の余白（10×2）＋内側の余白（20×2）＋少しの余裕。10.3 ＝ 文字数ぶん */
  .intro__title { font-size: min(26px, calc((var(--vw, 100vw) - 62px) / 10.3)); }
  .intro__stat, .intro__stat--main { padding-left: 12px; }
  .intro__stat:nth-child(odd) { padding-left: 2px; }
}

/* 幅の狭いスマホ（360px以下）：数字4つを少し小さくする。
   「3,000万回超」がマスいっぱいになり、となりの「200組以上」が区切り線にくっつくため（数字のけたを変えたら見直す） */
@media (max-width: 360px) {
  .intro__stat, .intro__stat--main { --kpi-size: 30px; --kpi-unit: 12px; }
  .intro__stat--main { --kpi-size: 40px; }
}
@media (max-width: 340px) {
  .intro__stat, .intro__stat--main { --kpi-size: 27px; --kpi-unit: 11.5px; }
  .intro__stat--main { --kpi-size: 36px; }
  .intro__stat .c-kpi__value { gap: 4px; }
}
/* 狭いPC（幅901〜1000px）：4つめのラベル「予約数前年度比※」の「※」だけが2行目に落ちないように */
@media (min-width: 901px) and (max-width: 1000px) {
  .intro__stat .c-kpi__label { letter-spacing: 0; }
  .intro__mark { margin-left: 2px; }
}


/* ===== 12-problem ===== */
/* ============================================================
   12-problem … 悩み
   ・PC：Figma（Desktop - 1）の y=1840〜3160 をそのまま再現。
         .problem__stage（1440幅の舞台）の中に、Figmaの座標（セクション上端からの距離）で置く
   ・右の紺パネルは、画面の右端（額縁）にぴったり付ける（.c-edge-panel--right）
   ・SP：発信前の準備 → 紺パネル → 発信後の運用 → まとめ の順に縦に積む
============================================================ */
.sec-problem {
  position: relative;
  isolation: isolate;          /* 中の重なり順（1〜3）をこのセクションの中だけにする */
  background: var(--bg);
}
.problem__stage {
  /* 高さは中身に合わせて決まる（2026-10-05）。
     右の列（困り顔＋紺パネル → まとめ）は、上から順に積んでいる → 文が長くなって背が高くなっても、
     下のものが自動で下がり、セクションも伸びる（前は高さを数字で決めていて、文を変えるたびに重なっていた）。
     左の列（投稿カード・発信後の運用）は、これまでどおり Figma の座標で置いている。
     1320 ＝ Figma でのセクションの高さ（これより低くはしない）。60 ＝ まとめの下の余白 */
  display: flow-root;
  min-height: calc(var(--px) * 1320);
  padding-bottom: calc(var(--px) * 60);
}

/* ------------------------------------------------------------
   ラベル（―― 発信前の準備 / ―― 発信後の運用）
------------------------------------------------------------ */
.problem__label {
  position: absolute;
  left: calc(var(--px) * 65);
}
.problem__label--prep { top: calc(var(--px) * 140); }
.problem__label--after { top: calc(var(--px) * 857); }

/* ------------------------------------------------------------
   投稿カード3枚＋作業のピル
   中の大きさはすべて --u（デザインの1px）で書く → SPでは --u を小さくして、まとめて縮める
   Figma の座標から (56, 196) を引いた位置に置いている
------------------------------------------------------------ */
.problem__posts {
  --u: var(--px);
  position: absolute;
  left: calc(var(--px) * 56);
  top: calc(var(--px) * 196);
  width: calc(var(--u) * 700);
  height: calc(var(--u) * 604);
}

/* カード（白・角丸11・写真＋アイコン＋キャプション） */
.problem__card {
  --rot: 0deg;
  position: absolute;
  width: calc(var(--u) * 436);
  height: calc(var(--u) * 498);
  margin: 0;
  padding: calc(var(--u) * 17);
  border-radius: calc(var(--u) * 11);
  background: var(--white);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) calc(var(--u) * -18) rgba(26, 58, 82, .22);
  transform-origin: 0 0;
  transform: translate(0, 0) rotate(var(--rot));
  transition:
    transform 1.3s var(--ease-out) .35s,
    rotate .6s var(--ease),
    translate .6s var(--ease);
}
.problem__card--right { --rot: 7deg; left: calc(var(--u) * 261); top: calc(var(--u) * 5); z-index: 0; }   /* 右うしろ */
.problem__card--left { --rot: -7deg; left: calc(var(--u) * 30); top: calc(var(--u) * 105); z-index: 1; }  /* 左うしろ */
.problem__card--front {                                                                                   /* 手前 */
  left: calc(var(--u) * 121);
  top: calc(var(--u) * 49);
  z-index: 2;
  box-shadow: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 18) rgba(0, 0, 0, .16);
}

/* 表示前：3枚が重なった状態（手前のカードの位置）→ .is-in で扇状に開く */
html.js .problem__posts:not(.is-in) .problem__card--left { transform: translate(calc(var(--u) * 91), calc(var(--u) * -56)) rotate(0deg); }
html.js .problem__posts:not(.is-in) .problem__card--right { transform: translate(calc(var(--u) * -140), calc(var(--u) * 44)) rotate(0deg); }
html.js .problem__posts:not(.is-in) .problem__card--front { transform: translate(0, calc(var(--u) * 28)) rotate(0deg); }

.problem__photo {
  display: block;
  width: 100%;
  height: calc(var(--u) * 262);
  border-radius: calc(var(--u) * 11);
  object-fit: cover;
}
.problem__photo--sky { object-position: 50% 30%; }

/* ♡ 紙飛行機 しおり */
.problem__actions {
  position: absolute;
  left: calc(var(--u) * 51);
  top: calc(var(--u) * 301);
  display: flex;
  gap: calc(var(--u) * 15);
  width: calc(var(--u) * 340);
  color: #1E1E1E;
}
.problem__icon {
  display: block;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  stroke-width: 1.2;
  transition: fill .35s var(--ease), color .35s var(--ease), scale .45s var(--ease-spring);
}
.problem__icon--save { margin-left: auto; }

/* 投稿のキャプション */
.problem__caption {
  position: absolute;
  left: calc(var(--u) * 41);
  top: calc(var(--u) * 343);
  width: calc(var(--u) * 353);
  font-size: calc(var(--u) * 15);
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--navy);
}
.problem__tag { display: block; color: var(--slate); }   /* ハッシュタグは2行目に */
.problem__card--left .problem__tag { visibility: hidden; }   /* 左うしろのカードは、ピルの下からのぞく文字を減らす */
.problem__card--left .problem__actions { visibility: hidden; }   /* 同じく、ハートの端だけが手前のカードの横から「(」のようにのぞくのを消す */
/* 手前のカードのハッシュタグは「文章作成」のピルの下に1行あけて置く（ピルに隠れて「貸し #…」と途中から見えないように）。
   ピルは、キャプションの1行目（「海の見える…」）とハッシュタグの行のあいだに入る → 下の .problem__task--write の top とセットで動かす */
.problem__card--front .problem__tag { margin-top: calc(var(--u) * 56); }

/* 作業のピル（撮影・画像作成・文章作成・動画編集）。吹き出しの角（角ばった側）から、ポンと出る */
.sec-problem .problem__task {
  --pill-fs: calc(var(--u) * 24);
  --pill-icon: 1em;
  position: absolute;
  z-index: 3;
  gap: 0;                      /* アイコンと文字のすき間は、下の margin-right で取る */
  padding: 0;
  line-height: 1.42;
  letter-spacing: .02em;
}
.problem__task--shoot { left: calc(var(--u) * 94); top: calc(var(--u) * 40); width: calc(var(--u) * 170); height: calc(var(--u) * 58); transform-origin: 100% 100%; }
.problem__task--image { left: calc(var(--u) * 428); top: calc(var(--u) * 112); width: calc(var(--u) * 185); height: calc(var(--u) * 57); transform-origin: 0 100%; }
.problem__task--write { left: calc(var(--u) * 1); top: calc(var(--u) * 424); width: calc(var(--u) * 203); height: calc(var(--u) * 55); transform-origin: 100% 100%; }   /* top 424：キャプションの1行目の文字（「海の」）に重ならない高さ */
.problem__task--edit { left: calc(var(--u) * 410); top: calc(var(--u) * 445); width: calc(var(--u) * 179); height: calc(var(--u) * 60); transform-origin: 0 100%; }
.problem__task { --float-amp: calc(var(--u) * 7); --float-dur: 5.6s; }

/* マウスを乗せると、扇が少し広がり、手前のハートがピンクに。
   ※ カードは「押せるもの」ではないので、浮き上がらせない・影も濃くしない（浮き上がるのはリンクやボタンだけ、というサイト全体のきまり） */
@media (hover: hover) {
  .problem__posts.is-in:hover .problem__card--left { rotate: -2.5deg; translate: calc(var(--u) * -12) calc(var(--u) * 6); }
  .problem__posts.is-in:hover .problem__card--right { rotate: 2.5deg; translate: calc(var(--u) * 12) calc(var(--u) * -4); }
  .problem__posts:hover .problem__card--front .problem__icon--heart { color: var(--pink); fill: var(--pink); scale: 1.18; }
}

/* ------------------------------------------------------------
   右：困り顔＋?バッジ＋紺パネル
   .problem__worry は Figma の x=797 から、画面の右端（1440より広い画面でも右端）まで
------------------------------------------------------------ */
.problem__worry {
  position: relative;
  margin-left: calc(var(--px) * 797);
  margin-right: calc((min(var(--vw, 100vw), 1440px) - var(--vw, 100vw)) / 2);
  padding-top: calc(var(--px) * 291);   /* 紺パネルの上端（Figma の y=291）。この上の空きに、困り顔と ? が出る */
}
/* 困り顔（パネルのうしろ。下半分はパネルに隠れる） */
.problem__man-wrap {
  position: absolute;
  z-index: 1;
  left: calc(var(--px) * 92);
  top: calc(var(--px) * 65);
  width: calc(var(--px) * 296.4);
}
.problem__man img { width: 100%; height: auto; }
/* 表示前はパネルのうしろに隠れていて、下から顔を出す。
   頭の先までパネルの上端より下に置く → パネルより先に表示が始まらず、
   半透明のパネル越しに体が透けて見えない（パララックスでずれても大丈夫なように85%） */
html.js .problem__man[data-reveal]:not(.is-in) { transform: translate3d(0, 85%, 0); }
html.js .problem__man[data-reveal] { transition-duration: .5s, 1.2s; transition-timing-function: var(--ease), var(--ease-out); }

/* ?バッジ（Figma：122＋白い線の外側3.8 → 130） */
.problem__q {
  --size: calc(var(--px) * 130);
  position: absolute;
  z-index: 3;
  left: calc(var(--px) * -22);
  top: calc(var(--px) * 200);
}

/* 紺パネル（右端の額縁につながる。上下の凹カーブは .c-edge-panel が描く） */
.problem__panel {
  position: relative;
  z-index: 2;
  min-height: calc(var(--px) * 554);
  padding: calc(var(--px) * 44) calc(var(--px) * 48) calc(var(--px) * 64) calc(var(--px) * 70);
}
/* 見出し「日々の運営をしながら、」は11文字。パネルの内側にちょうど入るよう、ほかの見出し（48）より少しだけ小さい 46 にしている */
.problem__title { white-space: nowrap; font-size: max(27px, calc(var(--px) * 46)); }
/* 作業ごとの悩み（いつも見えている一覧）：左に作業の名前、右に白い吹き出し。
   吹き出しの形は、左の投稿カードのピルの吹き出し（.problem__bubble）と同じ見た目にそろえてある */
.problem__voices {
  display: grid;
  row-gap: calc(var(--px) * 11);
  margin: calc(var(--px) * 24) 0 0 calc(var(--px) * 6);
}
.problem__voice {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);   /* 7.5em ＝ アイコン＋5文字ぶん（「予約サイト」）。名前を長くしたら広げる */
  align-items: center;
  justify-items: start;
  font-size: max(13px, calc(var(--px) * 16));
}
.problem__voice-step {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--white);
}
.problem__voice-step svg { flex: none; width: 1.1em; height: 1.1em; opacity: .85; }
.problem__voice-text {
  position: relative;
  margin-left: .85em;                  /* しっぽの先が、作業の名前の文字に触れないように */
  padding: .5em 1.1em;
  border-radius: 1.1em;
  background: var(--white);
  color: var(--navy);
  font-weight: 500;
  font-size: max(12.5px, calc(var(--px) * 15));
  line-height: 1.5;
  letter-spacing: .02em;
}
.problem__voice-text::before {        /* しっぽ（作業の名前の方を向く三角） */
  content: "";
  position: absolute;
  right: calc(100% - 1px);
  top: 50%;
  width: .62em;
  height: .8em;
  margin-top: -.4em;
  background: var(--white);
  clip-path: polygon(100% 0, 100% 100%, 0 62%);
}
.problem__panel-text {
  margin: calc(var(--px) * 22) 0 0 calc(var(--px) * 6);
  font-weight: 500;
  font-size: max(14px, calc(var(--px) * 17));
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--white);
}

/* ------------------------------------------------------------
   発信後の運用：4つのピル＋ひとこと
------------------------------------------------------------ */
.problem__manage {
  position: absolute;
  left: calc(var(--px) * 138);
  top: calc(var(--px) * 915);
  display: grid;
  /* 2列。列の幅は、中のいちばん長い名前に合わせる（2026-10-05 に名前が長くなったので、決まった幅 259 をやめた。
     文字も 24 → 20 に。右どなりの「まとめ」（左端 720）に届かない大きさ） */
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: calc(var(--px) * 22) calc(var(--px) * 12);
}
.problem__manage-label { white-space: nowrap; }
.sec-problem .problem__manage-item {
  --pill-fs: max(13px, calc(var(--px) * 20));
  --pill-icon: 1em;
  height: calc(var(--px) * 51);
  padding: 0 .5em;
  gap: 0;                      /* アイコンと文字のすき間は、下の margin-right で取る */
  line-height: 1.42;
  letter-spacing: .02em;
}
.problem__after-note {
  position: absolute;
  left: calc(var(--px) * 138);
  /* Figma は 1087。狭いPC（幅1280くらいより下）では、下の段のピル（下端 1039）との間を 42px より狭くしない
     （「マーケティング」「次回発信準備」の吹き出しが、この文字に重ならないように。幅1280以上では 1087 のまま） */
  top: max(calc(var(--px) * 1087), calc(var(--px) * 1039 + 42px));
}
.problem__after-lead {
  font-weight: 500;
  font-size: max(15px, calc(var(--px) * 20));
  line-height: 1.45;
}
.problem__after-sub {
  margin-top: calc(var(--px) * 10);
  font-size: max(13px, calc(var(--px) * 16));
  line-height: 1.45;
  color: var(--slate);
}

/* ------------------------------------------------------------
   右下：まとめ（労力のわりに、成果につながらない。）
------------------------------------------------------------ */
.problem__result {
  position: relative;
  /* 紺パネルの下に 101 あけて置く（Figma：パネルの下端 845 → まとめ 946）。左右は Figma の x=720〜1380 */
  margin: calc(var(--px) * 101) calc(var(--px) * 60) 0 calc(var(--px) * 720);
}
.problem__result-title { margin-top: calc(var(--px) * 9); }
.problem__result-text {
  max-width: max(calc(var(--px) * 600), 33em);   /* 最後の行「「発信しているのに…状態になりがちです。」が1行に入る幅 */
  margin: calc(var(--px) * 30) 0 0 calc(var(--px) * 4);
  font-size: max(14px, calc(var(--px) * 18));
  line-height: 1.9;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------
   ピルの「悩み」の吹き出し（発信前の準備の4つ・発信後の運用の4つ）
   ・ピルにマウスを乗せる／Tabキーで選ぶ／スマホでタップ → 白い吹き出しが、ピルのそばにふわっと出る。離れると消える
   ・文は HTML の <span class="problem__bubble"> と </span> の間（ピルの <li> の中）。16文字くらいまでの1行で
   ・出る場所：何も付けない＝ピルの上・左そろえ ／ --down＝ピルの下 ／ --end＝右そろえ
     （画面の外に出ないように、左側のピルは左そろえ・右側のピルは右そろえにしている）
   ・反応するのは吹き出しだけ。ピルは「押せるもの」ではないので、指のカーソル・浮き上がり・影は付けない
     （HTML実装ガイド 6章「マウスをのせたときの動きのルール」）
   ・JSは使っていない。ふだんは透明（opacity:0）なだけなので、読み上げソフトには文がいつも伝わる
   ・静止モード（?static）ではマウスが乗らないので、何も出ない（見た目は変わらない）
------------------------------------------------------------ */
/* アイコンと文字のすき間（gap ではなく margin で取る：HTML で吹き出しの </span> のあとに改行が入っても、
   ピルの中の文字が左にずれないように） */
.problem__task .c-pill__icon,
.problem__manage-item .c-pill__icon { margin-right: .34em; }

/* 乗せてから出はじめるまでの「ため」（秒）。マウスがピルの上を通り過ぎるだけのときに、ちらっと出ないように。
   0s にすると、すぐ出る。消えるときは待たない */
.sec-problem { --bubble-wait: .12s; }

.problem__task,
.problem__manage-item {
  cursor: default;             /* 矢印のまま（文字の上でも「Ｉ」の形に変わらない） */
  -webkit-tap-highlight-color: transparent;
  scroll-margin-block: 72px;   /* Tabキーで選んだとき、吹き出しのぶんまで画面に入るように */
}
@media (hover: none) {
  /* スマホ：iPhoneでタップを受け取るために必要（指で触るので、カーソルは見えない） */
  .problem__task,
  .problem__manage-item { cursor: pointer; }
}
.sec-problem .problem__manage-item {
  position: relative;          /* 吹き出しの位置の基準 */
  z-index: 1;                  /* 吹き出しを、ラベルや下のひとことより手前に */
}

/* 出す合図（--bubble-on を 1 にすると、吹き出しが出る）
   キーボード＝:focus-visible ／ マウス＝:hover ／ タップ＝:focus（マウスのない端末だけ）
   ※ それぞれの最後の行（:has … .problem__tag）は、「文章作成」の吹き出しの下になる、手前のカードの
     ハッシュタグの行を、出ている間だけ消すため（文字が途中から・半分だけのぞかないように） */
.problem__task:focus-visible,
.problem__manage-item:focus-visible { --bubble-on: 1; --bubble-hit: auto; animation-play-state: paused; }
.sec-problem .problem__task:focus-visible { z-index: 4; }
.sec-problem .problem__manage-item:focus-visible { z-index: 2; }
.problem__posts:has(.problem__task--write:focus-visible) .problem__card--front .problem__tag { opacity: 0; transition-delay: var(--bubble-wait); }
@media (hover: hover) {
  .problem__task:hover,
  .problem__manage-item:hover { --bubble-on: 1; --bubble-hit: auto; animation-play-state: paused; }   /* 読んでいる間は、ふわふわを止める */
  .sec-problem .problem__task:hover { z-index: 4; }
  .sec-problem .problem__manage-item:hover { z-index: 2; }
  .problem__posts:has(.problem__task--write:hover) .problem__card--front .problem__tag { opacity: 0; transition-delay: var(--bubble-wait); }
}
@media (hover: none) {
  .problem__task:focus,
  .problem__manage-item:focus { --bubble-on: 1; --bubble-hit: auto; animation-play-state: paused; }
  .sec-problem .problem__task:focus { z-index: 4; }
  .sec-problem .problem__manage-item:focus { z-index: 2; }
  .problem__posts:has(.problem__task--write:focus) .problem__card--front .problem__tag { opacity: 0; transition-delay: var(--bubble-wait); }
}
.problem__card--front .problem__tag { transition: opacity .32s var(--ease); }   /* ↑のハッシュタグの行が消える・戻る速さ（吹き出しと同じ） */

/* 吹き出し本体（白・角丸・しっぽ・やわらかい影・紺の文字） */
.problem__bubble {
  --bubble-gap: .7em;          /* ピルとのすき間（しっぽの長さ＋少し） */
  --bubble-slide: 7px;         /* 出るときに動く距離（ピルの側から、すっと離れる） */
  position: absolute;
  z-index: 1;
  bottom: calc(100% + var(--bubble-gap));
  left: 0;
  padding: .46em 1.05em;
  border-radius: 1em;
  background: var(--white);
  /* 影はしっぽにも付くように drop-shadow（1つ目＝やわらかい影、2つ目＝輪郭をうっすら） */
  filter: drop-shadow(0 .4em .6em rgba(15, 44, 58, .2)) drop-shadow(0 0 .6px rgba(15, 44, 58, .4));
  color: var(--navy);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 14));
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: default;
  /* ふだんは透明。--bubble-on が 1 になると、0.3〜0.4秒でふわっと出る（時間はここの数字）。
     最後の calc(…) は「出るときだけ --bubble-wait のぶん待つ」という意味（消えるときは 0秒） */
  opacity: var(--bubble-on, 0);
  transform: translate3d(0, calc(var(--bubble-slide) * (1 - var(--bubble-on, 0))), 0);
  pointer-events: var(--bubble-hit, none);
  transition:
    opacity .32s var(--ease) calc(var(--bubble-on, 0) * var(--bubble-wait)),
    transform .42s var(--ease-out) calc(var(--bubble-on, 0) * var(--bubble-wait));
}
.problem__bubble--end { left: auto; right: 0; }
.problem__bubble--down {
  --bubble-slide: -7px;
  bottom: auto;
  top: calc(100% + var(--bubble-gap));
}
/* しっぽ（ピルの方を向く三角）。左右の位置は --tail-x */
.problem__bubble::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: var(--tail-x, 2em);
  width: 1em;
  height: .6em;
  background: var(--white);
  clip-path: polygon(0 0, 80% 0, 100% 100%);
}
.problem__bubble--end::after { left: auto; right: var(--tail-x, 2em); clip-path: polygon(20% 0, 100% 0, 0 100%); }
.problem__bubble--down::after { top: auto; bottom: calc(100% - 1px); clip-path: polygon(0 100%, 80% 100%, 100% 0); }
.problem__bubble--down.problem__bubble--end::after { clip-path: polygon(20% 100%, 100% 100%, 0 0); }
/* 文の終わりの「…」：サイトのフォント（Zen Kaku Gothic New）は「…」の点が文字の足もとに付くので、
   文字の中央の高さ（「・」と同じ高さ）まで上げる。HTML では <span class="problem__dots">…</span> と書く */
.problem__dots {
  position: relative;
  top: -.32em;
}
/* ピルと吹き出しのすき間をつなぐ透明の橋（マウスを吹き出しへ動かしても消えないように） */
.problem__bubble::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--bubble-gap);
}
.problem__bubble--down::before { top: auto; bottom: 100%; }
/* 「インサイト分析」（発信後の運用の1つ目）だけ、ラベル「発信後の運用」に重ならないように右へずらす（PC） */
.problem__manage-item:first-child .problem__bubble {
  --tail-x: 1.2em;
  left: max(calc(var(--px) * 156), 118px);
}

/* ------------------------------------------------------------
   動きを止めるとき（static・動きを減らす設定）/ JSが動かなかったときの保険
------------------------------------------------------------ */
html.is-static .problem__card,
html.is-reduced .problem__card { transition: none; }
/* 吹き出し（と、いっしょに隠す ハッシュタグの行・スマホのラベル）：動かさず、ぱっと出して、ぱっと消す。
   出るときの「ため」（--bubble-wait）だけは残す → マウスが通り過ぎるだけのときに、ぱっと出て消える、を防ぐ */
html.is-static .problem__bubble { transition: none; transform: none; }
html.is-reduced .problem__bubble { transition-duration: 0s; transform: none; }
html.is-reduced .problem__manage-item::before,
html.is-reduced .problem__card--front .problem__tag { transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  .problem__card { transition: none !important; }
  .problem__bubble { transition-duration: 0s !important; transform: none !important; }
  .problem__manage-item::before,
  .problem__card--front .problem__tag { transition-duration: 0s !important; }
}
html.js:not(.is-ready) .problem__posts .problem__card { animation: problem-open 0s linear 3s forwards; }
@keyframes problem-open { to { transform: translate(0, 0) rotate(var(--rot)); } }

/* ------------------------------------------------------------
   SP（900px以下）：縦に積む
------------------------------------------------------------ */
@media (max-width: 900px) {
  .sec-problem { padding: 56px 0 72px; }
  .problem__stage {
    height: auto;
    min-height: 0;
    max-width: 640px;
    padding-bottom: 0;
  }

  .problem__label,
  .problem__posts,
  .problem__worry,
  .problem__manage,
  .problem__after-note,
  .problem__result {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
  }
  .problem__label { padding-inline: var(--gutter); }

  /* 投稿カード：小さくして中央に（幅390で約364px） */
  .problem__posts {
    --u: calc(var(--sp) * .52);
    margin: 18px auto 0;
  }
  /* nowrap：幅320前後では文字が最小の8pxになり、1行目の最後の「ん。」だけが2行目（ピルの下）に落ちて「…朝ごは」で切れて見えるため */
  .problem__caption { font-size: max(8px, calc(var(--u) * 15)); white-space: nowrap; }

  /* 悩みの吹き出し：スマホは小さめの文字（幅390で12px、広くても14pxまで） */
  .problem__bubble { font-size: clamp(12px, calc(var(--sp) * 12), 14px); }
  /* 「インサイト分析」は左そろえに戻す（スマホは横の余白がないので、ラベル「発信後の運用」の場所に出る） */
  .problem__manage-item:first-child .problem__bubble { --tail-x: 2em; left: 0; }
  /* ↑の吹き出しが出ている間だけ、下になるラベルを背景色でそっと隠す（文字が半分だけのぞかないように）。
     隠す範囲＝ピルの上 50px（height）。ラベルとピルの間（18px）を変えたら、height も見直す */
  .problem__manage-item:nth-child(-n+2)::before {
    position: absolute;
    bottom: calc(100% + 1px);
    height: 50px;
    background: var(--bg);
    opacity: var(--bubble-on, 0);
    pointer-events: none;
    transition: opacity .32s var(--ease) calc(var(--bubble-on, 0) * var(--bubble-wait));   /* 吹き出しと同じ速さ・同じ「ため」 */
  }
  .problem__manage-item:first-child::before { content: ""; left: -2px; right: -24px; }
  /* 「画像作成」は、スマホではピルの下に出す（上に出すと、となりの「撮影」のピルに重なるため） */
  .problem__task--image .problem__bubble {
    --bubble-slide: -7px;
    bottom: auto;
    top: calc(100% + var(--bubble-gap));
  }
  .problem__task--image .problem__bubble::after { top: auto; bottom: calc(100% - 1px); clip-path: polygon(20% 100%, 100% 100%, 0 0); }
  .problem__task--image .problem__bubble::before { top: auto; bottom: 100%; }
  /* 作業のピルは小さいので、タップの当たり判定を上下左右に8px広げる */
  .problem__task::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  /* 困り顔＋?＋紺パネル */
  .problem__worry {
    height: auto;
    margin: 28px 0 0;
    padding-top: calc(var(--sp) * 116);
  }
  .problem__man-wrap {
    left: calc(50% - var(--sp) * 58);
    top: 0;
    width: calc(var(--sp) * 160);
  }
  .problem__q {
    --size: calc(var(--sp) * 64);
    left: 10px;
    top: calc(var(--sp) * 76);
  }
  .problem__panel {
    position: relative;
    top: auto;
    min-height: 0;
    margin-inline: var(--gutter);
    padding: 40px 24px 36px;
    border-radius: 24px;
  }
  .problem__panel::before,
  .problem__panel::after { display: none; }   /* SPは額縁に付けず、角丸の箱に */
  .problem__title { white-space: normal; font-size: 27px; }
  /* 作業ごとの悩み：スマホでも「名前｜吹き出し」の横並び。入りきらない吹き出しは、言葉の切れ目で2行になる */
  .problem__voices { row-gap: 9px; margin: 20px 0 0; }
  .problem__voice { grid-template-columns: 7.3em minmax(0, 1fr); font-size: 12px; }   /* 7.3em：「予約サイト」が吹き出しのしっぽにふれない幅 */
  .problem__voice-step { letter-spacing: .02em; }
  .problem__voice-step svg { width: 1em; height: 1em; }
  .problem__voice-text { justify-self: stretch; margin-left: .65em; padding: .5em .95em; font-size: 12px; }   /* stretch：2行になる吹き出しと1行の吹き出しで、右はしがそろうように */
  .problem__panel-text {
    margin: 20px 0 0;
    font-size: 14.5px;
    line-height: 1.95;
  }

  /* 発信後の運用 */
  .problem__after { margin-top: 56px; }
  .problem__manage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;                 /* 上の段と下の段で、ピルの高さをそろえる */
    gap: 10px;
    margin: 18px var(--gutter) 0;
  }
  .sec-problem .problem__manage-item {
    --pill-fs: 13.5px;
    height: auto;
    min-height: 46px;
    min-width: 0;
    padding: 6px .4em;
    line-height: 1.3;
  }
  /* 名前が入りきらないときは、言葉の切れ目（u-ib）で2行にする */
  .problem__manage-label { min-width: 0; white-space: normal; text-align: left; }
  /* ピルとの間：幅390で42px（広いスマホ・タブレットは、吹き出しの文字が大きくなるぶん48pxまで）。
     下の段の吹き出しがこのすき間に出るので、これより狭くしない */
  .problem__after-note { margin: clamp(42px, calc(var(--sp) * 42), 48px) var(--gutter) 0; }
  .problem__after-lead { font-size: 16px; line-height: 1.6; }
  .problem__after-sub { margin-top: 4px; font-size: 13px; line-height: 1.7; }

  /* まとめ */
  .problem__result {
    width: auto;
    margin: 48px var(--gutter) 0;
  }
  .problem__result-lead { font-size: 15px; }
  .problem__result-title { margin-top: 6px; }
  .problem__result-text {
    max-width: none;
    margin: 18px 0 0;
    font-size: 14.5px;
  }
}
@media (max-width: 480px) {
  /* 紺パネルの見出し：1行目「日々の運営をしながら、」（11文字）が1行に入る大きさまで小さくする（最後の「、」だけ落ちないように）。
     88px ＝ 左右の余白（20×2）＋パネルの内側の余白（24×2）。11.3 ＝ 文字数ぶん */
  .problem__title { font-size: min(25px, calc((var(--vw, 100vw) - 88px) / 11.3)); }
}
@media (max-width: 374px) {
  /* 紺パネルの悩みの一覧：幅の狭いスマホでは、名前の右に吹き出しを置くと文が入りきらず、言葉の途中で折れる。
     → 名前の下に吹き出しを置く（しっぽは上向き） */
  .problem__voices { row-gap: 12px; }
  .problem__voice { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .problem__voice-text { justify-self: start; margin-left: 0; }
  .problem__voice-text::before {
    right: auto;
    left: 1.3em;
    top: auto;
    bottom: calc(100% - 1px);
    width: .85em;
    height: .5em;
    margin-top: 0;
    clip-path: polygon(0 100%, 100% 100%, 25% 0);
  }
  .sec-problem .problem__manage-item { --pill-fs: 12.5px; }
  /* 小さいスマホでは「コメント返信」の吹き出しもラベルにかかるので、同じように出ている間だけラベルを隠す
     （左どなりの「インサイト分析」の上までを隠す） */
  .problem__manage-item:nth-child(2)::before { content: ""; left: calc(-100% - 15px); right: 100%; }
}
/* スマホ：長い名前のピル（2つめ・3つめ）は、入りきらない幅になったら言葉の切れ目で必ず2行にする
   （なりゆきで折ると、2行のピルだけ左に寄って見えるため）。4つの並び順を変えたら、nth-child の数字も合わせる */
@media (max-width: 429px) {
  .problem__manage-item:nth-child(3) .problem__manage-label .u-ib { display: block; }
}
@media (max-width: 402px) {
  .problem__manage-item:nth-child(2) .problem__manage-label .u-ib { display: block; }
}


/* ===== 20-solution ===== */
/* ============================================================
   20-solution … 解決（まるごとお任せ＋全体最適の導線）
   Figma 50:459（y 3160〜4740）。PCは Figma の数値 N を calc(var(--px) * N) で書く。
============================================================ */

.sec-solution {
  /* 1440より広い画面で、左の紺パネルを画面の端までのばすための余白 */
  --side: max(0px, (var(--vw, 100vw) - 1440px) / 2);
  position: relative;
  padding-top: calc(var(--px) * 130);
  padding-bottom: calc(var(--px) * 67);
}

/* ------------------------------------------------------------
   上段：紺パネル＋チーム写真
------------------------------------------------------------ */
.solution__hero {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--side) + var(--px) * 660) calc(var(--px) * 641);
  column-gap: calc(var(--px) * 72);
  min-height: calc(var(--px) * 640);
}

/* 紺パネル（左端の額縁につながる。上下の凹カーブは .c-edge-panel） */
.solution__panel {
  --edge-c: calc(var(--px) * 50);
  padding: calc(var(--px) * 90) calc(var(--px) * 64) calc(var(--px) * 72) calc(var(--side) + var(--px) * 150);
}
.solution__title { position: relative; }
.solution__text {
  max-width: calc(var(--px) * 430);
  margin-top: calc(var(--px) * 46);
  font-weight: 500;
  font-size: max(15px, calc(var(--px) * 20));
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--white);
}

/* ピンクのハート（パネルの右上） */
.solution__badge {
  --size: calc(var(--px) * 122);
  --float-amp: 8px;
  --float-dur: 4.6s;
  position: absolute;
  z-index: 2;
  top: calc(var(--px) * -60);
  left: calc(var(--side) + var(--px) * 520);
  border-width: max(2px, calc(var(--px) * 3.8));
}

/* チーム写真 */
.solution__photo {
  --clip-r: calc(var(--px) * 37);
  position: relative;
  margin: 0;
  min-height: calc(var(--px) * 640);
  border-radius: calc(var(--px) * 37);
  overflow: hidden;
  isolation: isolate;
  background: var(--light);
}
.solution__photo-inner {
  position: absolute;
  inset: -3% 0;           /* パララックスで動くぶん、上下に少し大きめ */
}
.solution__photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.solution__caption {
  --pill-fs: max(13px, calc(var(--px) * 16));
  position: absolute;
  z-index: 1;
  left: calc(var(--px) * 32);
  bottom: calc(var(--px) * 25);
  padding: .6em 1.45em;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------
   下段：YADOTOMOができること
------------------------------------------------------------ */
.solution__approach { margin-top: calc(var(--px) * 110); }
.solution__head {
  display: grid;
  grid-template-columns: 1fr calc(var(--px) * 593);
  align-items: start;
  margin-top: calc(var(--px) * 28);
}
.solution__lead { margin-top: calc(var(--px) * 14); }

/* 導線（幅1200・中央） */
.solution__route {
  position: relative;
  width: calc(var(--px) * 1200);
  margin: calc(var(--px) * 90) auto 0;
}
.solution__wave {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  color: var(--navy);
  overflow: visible;
}

.solution__stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.solution__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--px) * 34);
  text-align: center;
}

/* 丸（01〜04） */
.solution__pin {
  display: grid;
  place-items: center;
  width: calc(var(--px) * 52);
  height: calc(var(--px) * 52);
  border: max(1px, calc(var(--px) * 1.5)) solid var(--navy);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-weight: 400;
  font-size: max(13px, calc(var(--px) * 17));
  line-height: 1;
  letter-spacing: 0;
}
.solution__pin--navy { background: var(--navy); color: var(--white); }
.solution__pin--pink { background: var(--pink); color: var(--white); }

/* 04 の丸：点いたあと、波紋が1回広がる */
.solution__pin--pink { position: relative; }
.solution__pin--pink::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  opacity: 0;
  pointer-events: none;
}
html.js .solution__pin--pink.is-in::after { animation: solution-ping 1.6s var(--ease-out) calc(var(--delay, 0s) + .35s) 2; }
@keyframes solution-ping {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

.solution__stop-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--px) * 26);
}
.solution__en {
  font-weight: 400;
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--slate);
}
.solution__stop--03 .solution__en { color: var(--navy); }
.solution__stop--04 .solution__en { color: var(--pink); }
.solution__stop-title {
  margin-top: calc(var(--px) * 4);
  font-weight: 700;
  font-size: max(20px, calc(var(--px) * 30));
  line-height: 1.5;
  letter-spacing: .02em;
}
.solution__stop-sub {
  margin-top: calc(var(--px) * 4);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--slate);
}
.solution__stop-list {
  margin-top: calc(var(--px) * 18);
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.87;
  letter-spacing: .02em;
}

/* PC：点線が丸に届くタイミングで、丸と文字が順番に出る（線は0.2秒後から2.8秒で描かれる） */
@media (min-width: 901px) {
  .solution__stop--01 .solution__pin { --delay: .95s; }
  .solution__stop--02 .solution__pin { --delay: 1.35s; }
  .solution__stop--03 .solution__pin { --delay: 1.65s; }
  .solution__stop--04 .solution__pin { --delay: 2.1s; }
  .solution__stop--01 .solution__stop-body { --delay: 1.1s; }
  .solution__stop--02 .solution__stop-body { --delay: 1.5s; }
  .solution__stop--03 .solution__stop-body { --delay: 1.8s; }
  .solution__stop--04 .solution__stop-body { --delay: 2.25s; }
}

/* 動きを減らす設定では波紋なし */
@media (prefers-reduced-motion: reduce) {
  .solution__pin--pink::after { animation: none !important; }
}

/* ------------------------------------------------------------
   SP（900px以下）
------------------------------------------------------------ */
@media (max-width: 900px) {
  .sec-solution {
    --side: 0px;
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .solution__hero {
    display: block;
    min-height: 0;
  }
  .solution__panel {
    margin-right: 20px;
    padding: 58px 28px 44px 26px;
  }
  .solution__title { line-height: 1.5; }
  .solution__text {
    max-width: none;
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.95;
  }
  .solution__badge {
    --size: 74px;
    --float-amp: 6px;
    top: -30px;
    left: auto;
    right: 38px;
    border-width: 3px;
  }

  .solution__photo {
    --clip-r: 24px;
    min-height: 0;
    aspect-ratio: 6 / 5;
    margin: 36px 20px 0;
    border-radius: 24px;
  }
  .solution__caption {
    /* ふつうは13px。幅375より狭いスマホでは、1行に入る大きさまで少し小さくする（360で約12px、320で10.5px）。
       それでも入らないときは、HTMLの u-ib の切れ目（「…まで、／ひとつのチームで。」）で2行になる */
    --pill-fs: clamp(10.5px, calc((var(--vw, 100vw) - 66px) / 24.2), 13px);
    left: 12px;
    right: auto;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: .6em 1.15em;
    white-space: normal;
    text-align: left;
  }

  .solution__approach { margin-top: 72px; }
  .solution__head {
    display: block;
    margin-top: 16px;
  }
  .solution__lead { margin-top: 18px; }

  /* 導線 → 縦のタイムライン（左に丸、右に文字） */
  .solution__route {
    width: auto;
    margin: 40px 20px 0;
    padding-bottom: 4px;
  }
  .solution__wave { display: none; }

  .solution__stops {
    --stop-gap: 30px;   /* ステップ同士の間隔（縦の点線の長さもこれに合わせて伸びる） */
    display: flex;
    flex-direction: column;
    gap: var(--stop-gap);
  }
  .solution__stop {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 18px;
    align-items: start;
    padding-top: 0;
    text-align: left;
  }
  /* 縦の点線：丸の下から、次の丸の上まで（01→02→03→04。04 の丸で終わる）。
     点は約10pxおきで、丸との間が上下で同じになるように自動で等間隔に並ぶ（round）。
     丸が出たあと、上から下へ描かれる。:has() が使えない古いブラウザでは、動かずに最初から見えている */
  .solution__stop:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 51px;                             /* 丸（高さ48px）の下の端から 3px あける */
    bottom: calc(3px - var(--stop-gap));   /* 次の丸の上の端の 3px 手前まで */
    left: 23px;
    width: 3px;
    background: radial-gradient(circle, var(--navy) 1.15px, transparent 1.6px) 50% 0 / 3px 10px no-repeat round;
    transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1) .3s;
  }
  html.js.is-ready:not(.is-static):not(.is-reduced) .solution__stop:not(:has(.solution__pin.is-in))::before { clip-path: inset(0 0 100% 0); }

  .solution__pin {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-width: 1.5px;
    font-size: 16px;
  }
  .solution__stop-body {
    align-items: flex-start;
    margin-top: 2px;
  }
  .solution__en { font-size: 13px; }
  /* ↓ タイトル・ひとこと・リストの文字サイズ（22px／13.5px／14px）は、幅559px以下で使われる。
       幅560〜900pxの文字サイズは、このファイルの最後のブロックにある */
  .solution__stop-title { margin-top: 0; font-size: 22px; line-height: 1.45; }
  .solution__stop-sub { margin-top: 2px; font-size: 13.5px; }
  .solution__stop-list {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
  }
  .solution__stop-list li {
    position: relative;
    padding-left: 14px;
  }
  .solution__stop-list li::before {
    content: "";
    position: absolute;
    top: .85em;
    left: 0;
    width: 6px;
    height: 1px;
    background: var(--slate);
  }
}

/* タブレット幅（600〜900px）：写真が縦に大きくなりすぎないよう、元の写真と同じ3:2に */
@media (min-width: 600px) and (max-width: 900px) {
  .solution__photo { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------
   横に広いSP・タブレット（560〜900px）：導線の右側が空かないように、
   各ステップを「左＝見出し（英字・タイトル・ひとこと）／右＝項目のリスト」の2列にする。
   ・4つのステップで右の列の始まりがそろう（列の幅を全ステップ共通の式にしているため）
   ・HTMLはそのまま（CSSのグリッドで並べ替えているだけ）。559px以下は今までどおり1列
   ・並べ方と文字サイズを変えるだけで、動きは足していない（?static・動きを減らす設定でも同じ見た目）
   ・この幅だけ文字を少し大きくしている（タイトル 24px／ひとこと 14px／リスト 15px）。
     上の「SP（900px以下）」の数字（22px／13.5px／14px）を変えても、560〜900pxではここの数字が優先される
   ・調整：右の列の幅＝ minmax(228px, 45%) の 45%（大きくすると右の列が左へ寄る）
           228px は「リストが 15px のとき、いちばん長い項目が1行に収まる幅」。
           項目の文字を増やしたり、リストの文字サイズを変えたら、228px も合わせて変える
           左の列は幅560pxのとき約206px（いちばん長い「ひとこと」は 14px で約186px）。
           「ひとこと」を長く・大きくして2行になるときは、下の @media の 560px を大きくする（例 600px）
           ステップ同士の間隔＝ .solution__stops の --stop-gap
------------------------------------------------------------ */
@media (min-width: 560px) and (max-width: 900px) {
  .solution__stops { --stop-gap: 38px; }
  .solution__stop-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(228px, 45%);
    grid-template-rows: auto auto auto 1fr;   /* 4行目の 1fr は、リストが見出しより長いときの余りを受ける行 */
    column-gap: 20px;
    align-items: start;
  }
  .solution__en,
  .solution__stop-title,
  .solution__stop-sub { grid-column: 1; }
  .solution__stop-title { font-size: 24px; }
  .solution__stop-sub { font-size: 14px; }
  .solution__stop-list {
    grid-column: 2;
    grid-row: 1 / -1;          /* 見出し3行の右に、上端をそろえて置く */
    margin-top: 0;
    font-size: 15px;
  }
}


/* ===== 21-service ===== */
/* ============================================================
   21-service … サービス概要
   Figma 51:459（y 4740〜5990）。PCは Figma の数値 N を calc(var(--px) * N) で書く。
   カード上部のイメージ（写真・カレンダー・通知）は --u（イメージ用の1px）で組む。
   PCは --u = --px、SPはカードの幅に合わせて縮める。
============================================================ */

.sec-service {
  --u: var(--px);
  position: relative;
  padding-bottom: calc(var(--px) * 100);
}

/* 見出し＋リード */
.service__head {
  display: grid;
  grid-template-columns: 1fr calc(var(--px) * 593);
  align-items: start;
  margin-top: calc(var(--px) * 28);
}
.service__lead {
  max-width: calc(var(--px) * 520);
  margin-top: calc(var(--px) * 32);
}

/* ------------------------------------------------------------
   カード3枚
------------------------------------------------------------ */
.service__cards {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--px) * 400));
  column-gap: calc(var(--px) * 37);
  margin: calc(var(--px) * 96) 0 0 calc(var(--px) * 2);
}
.service__card {
  --r: calc(var(--px) * 40);
  display: flex;
  flex-direction: column;
  min-height: calc(var(--px) * 720);
  padding: calc(var(--px) * 18);
}

/* 上のイメージ（ベージュの箱） */
.service__visual {
  position: relative;
  flex: none;
  height: calc(var(--u) * 300);
  border-radius: calc(var(--px) * 24);
  background: var(--beige);
  overflow: hidden;
  isolation: isolate;
}

/* 下の文字 */
.service__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: calc(var(--px) * 30) calc(var(--px) * 18) calc(var(--px) * 24);
}
.service__num {
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 18));
  line-height: 1.45;
  letter-spacing: .08em;
  color: var(--slate);
}
.service__name {
  margin-top: calc(var(--px) * 2);
  font-weight: 700;
  font-size: max(20px, calc(var(--px) * 28));
  line-height: 1.42;
  letter-spacing: .02em;
}
.service__text {
  margin-top: calc(var(--px) * 14);
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.9;
  letter-spacing: .02em;
}
.service__pills {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 10) calc(var(--px) * 8);
  margin-top: auto;
  padding-top: calc(var(--px) * 30);
}
.service__pills .c-pill,
.service__more-list .c-pill { padding-inline: 1.14em; letter-spacing: .02em; }

/* ---------- 01 写真（ベージュの箱いっぱいに入れる） ---------- */
.service__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.service__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .9s var(--ease);
}
.service__photo--top img { object-position: 50% 0; }   /* 上をそろえる（Instagramの一覧：上の段から見せる） */

/* ---------- 02 カレンダー ---------- */
.service__cal {
  --float-amp: 6px;
  --float-dur: 6s;
  position: absolute;
  top: calc(var(--u) * 40);
  left: calc(var(--u) * 36);
  width: calc(var(--u) * 178.5);
  height: calc(var(--u) * 178.5);
  border: calc(var(--u) * 1.05) solid var(--white);
  border-radius: calc(var(--u) * 23.1);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 calc(var(--u) * 16.8) calc(var(--u) * 33.6) calc(var(--u) * -10.5) rgba(42, 84, 112, .16);   /* Figma の影の色 */
  color: var(--navy);
}
.service__cal-month {
  position: absolute;
  top: calc(var(--u) * 14);
  left: calc(var(--u) * 16);
  font-weight: 700;
  font-size: calc(var(--u) * 13.65);
  line-height: 1.45;
  letter-spacing: 0;
}
.service__cal-stay {
  position: absolute;
  top: calc(var(--u) * 15);
  right: calc(var(--u) * 19);
  font-weight: 700;
  font-size: calc(var(--u) * 11.55);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--pink);
}
.service__cal-grid {
  position: absolute;
  top: calc(var(--u) * 41);
  left: calc(var(--u) * 10);
  display: grid;
  grid-template-columns: repeat(7, calc(var(--u) * 22));
  grid-template-rows: calc(var(--u) * 21);
  grid-auto-rows: calc(var(--u) * 26.4);
  font-family: var(--font-en);
  font-size: calc(var(--u) * 10.5);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
.service__cal-grid > span { display: flex; justify-content: center; }
.service__cal-wd {
  font-family: var(--font-ja);
  font-size: calc(var(--u) * 9.45);
  line-height: 1.5;
  color: var(--slate);
}
.service__cal-grid i {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
  margin-top: calc(var(--u) * -3);
  border-radius: 50%;
  font-style: normal;
}
.service__cal-grid i.is-on {
  background: var(--pink);
  color: var(--white);
}
/* カードが出たら、11〜13日が順番に点く */
html.js .service__card.is-in .service__cal-grid i.is-on {
  animation: service-day .55s var(--ease-spring) both;
  animation-delay: calc(.7s + var(--d, 0) * .18s);
}
@keyframes service-day {
  0% { background-color: transparent; color: var(--navy); scale: .4; }
  60% { scale: 1.12; }
  100% { background-color: var(--pink); color: var(--white); scale: 1; }
}

/* ---------- 通知（02・03） ---------- */
.service__notice {
  --n: var(--u);
  --notice-origin: 30% 100%;
  position: absolute;
  z-index: 2;
}
.service__notice--book { top: calc(var(--u) * 188); left: calc(var(--u) * 118); }
.service__notice--reel { top: calc(var(--u) * 206); left: calc(var(--u) * 60); }
.service__notice .c-notice__icon svg { width: calc(var(--n) * 21); }
.service__notice--reel .c-notice__icon svg { width: calc(var(--n) * 19); }
/* イメージの中の通知は、カードと同じ比率で縮める
   （共通の最小文字サイズのままだと、幅1100px前後以下で「いま」と重なり、文が「…」で切れるため） */
.service__notice .c-notice__title { font-size: calc(var(--n) * 13); }
.service__notice .c-notice__text { font-size: calc(var(--n) * 11.5); }
.service__notice .c-notice__time { font-size: calc(var(--n) * 10.5); }

/* ---------- 03 施設の写真 ---------- */
.service__shot {
  position: absolute;
  top: calc(var(--u) * 40);
  left: calc(var(--u) * 37);
  width: calc(var(--u) * 290);
  height: calc(var(--u) * 200);
  border-radius: calc(var(--u) * 14);
  overflow: hidden;
  isolation: isolate;
}
.service__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .9s var(--ease);
}

/* ホバー：写真がゆっくり寄る */
@media (hover: hover) {
  .service__card:hover .service__photo img,
  .service__card:hover .service__shot img { scale: 1.05; }
}

/* ------------------------------------------------------------
   ほかにも、まとめて。（白い帯）
------------------------------------------------------------ */
.service__more {
  --r: 999px;
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 36);
  width: calc(var(--px) * 1274);
  margin: calc(var(--px) * 40) 0 0 calc(var(--px) * 2);
  padding: calc(var(--px) * 20) calc(var(--px) * 40);
}
.service__more-title {
  flex: none;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: max(15px, calc(var(--px) * 18));
  line-height: 1.5;
  letter-spacing: .04em;
}
.service__more-en {
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.6;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate);
}
.service__more-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 8);
  padding-left: calc(var(--px) * 36);
  border-left: .5px solid var(--hair);
}

/* 動きを減らす設定では点灯アニメなし */
@media (prefers-reduced-motion: reduce) {
  .service__cal-grid i.is-on { animation: none !important; }
}
html.is-reduced .service__cal-grid i.is-on { animation: none !important; }

/* ------------------------------------------------------------
   SP（900px以下）
------------------------------------------------------------ */
@media (max-width: 900px) {
  .sec-service {
    /* カードの幅（最大480）に合わせて、イメージを縮める */
    --card-w: min(calc(var(--vw, 100vw) - 40px), 480px);
    --u: calc((var(--card-w) - 24px) / 364);
    padding-top: 8px;
    padding-bottom: 72px;
  }
  .service__head {
    display: block;
    margin-top: 16px;
  }
  .service__lead {
    max-width: none;
    margin-top: 18px;
  }

  .service__cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 40px 0 0;
  }
  .service__card {
    --r: 28px;
    width: var(--card-w);
    min-height: 0;
    padding: 12px;
  }
  .service__visual { border-radius: 18px; }
  .service__body { padding: 22px 12px 16px; }
  .service__num { font-size: 14px; }
  .service__name { margin-top: 2px; font-size: 22px; }
  .service__text { margin-top: 10px; font-size: 14.5px; }
  .service__pills {
    gap: 8px 6px;
    padding-top: 20px;
  }

  .service__more {
    --r: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: var(--card-w);
    margin: 20px auto 0;
    padding: 22px 20px 24px;
  }
  .service__more-title { font-size: 17px; }
  .service__more-en { font-size: 12px; }
  .service__more-list {
    gap: 8px 6px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: .5px solid var(--hair);
  }
}

/* 見出しの1行目「宿の集客に必要なことを、」（12文字）が、幅360より狭いスマホでも1行に入るように少し小さくする
   （最後の「、」だけが次の行に落ちないように。12.4 ＝ 1行目の文字数ぶん。見出しの文を長くしたら、この数字を大きくする） */
@media (max-width: 480px) {
  .service__title { font-size: min(25px, calc((var(--vw, 100vw) - 40px) / 12.4)); }   /* 25px ＝ このサイズ帯のふつうの見出しの大きさ */
}


/* ===== 30-works ===== */
/* ============================================================
   30-works … 実績（白い帯・左上と右下が大きなカーブ）
   PC は Figma（幅1440）の数値 N を calc(var(--px) * N) で書いています。
   事例は .works__case（写真・左／文・右）。--02 は左右が逆（SPは写真が先）。
============================================================ */

.works {
  --works-line: rgba(95, 95, 95, .5);            /* 細い線（Figmaの 0.5px #5F5F5F と同じ見え方） */
  position: relative;
  z-index: 1;
  margin-top: calc(var(--px) * 80);                /* 上のセクションとのすき間（背景色が見える） */
  background: var(--white);
  border-radius: calc(var(--px) * 130) 0 calc(var(--px) * 130) 0;   /* 左上・右下のカーブ */
}
.works__inner {
  position: relative;
  padding-top: calc(var(--px) * 84);
  padding-bottom: calc(var(--px) * 153);
}

/* ---------- 見出し ---------- */
.works__head { padding-left: calc(var(--px) * 4); }
.works__title { color: var(--ink); }
.works__desc {
  margin-top: calc(var(--px) * 14);
  font-size: max(13px, calc(var(--px) * 15));
  line-height: 1.5;
  color: var(--slate);
}
/* 右端の縦書き「WORKS」 */
.works__en {
  position: absolute;
  top: calc(var(--px) * 104);
  right: calc(var(--px) * 51);
  writing-mode: vertical-rl;
  font-weight: 400;
  font-size: max(11px, calc(var(--px) * 13));
  line-height: 1.45;
  letter-spacing: .2em;
  color: var(--slate);
}
.works__en > span { display: block; }

/* ---------- 事例（共通） ---------- */
.works__case {
  display: grid;
  grid-template-columns: calc(var(--px) * 626) minmax(0, 1fr);
  column-gap: calc(var(--px) * 60);
  align-items: start;
  min-height: calc(var(--px) * 640);               /* 事例どうしの間隔（Figmaは640ごと） */
  padding-bottom: calc(var(--px) * 36);            /* 文が長くなっても、次とのすき間を確保 */
}
.works__case--01 {
  margin-top: calc(var(--px) * 85);
  padding-bottom: calc(var(--px) * 110);   /* 右の列が「インフルエンサー施策」のカードで終わるので、次の事例との間を広めに（ほかの事例の間と同じくらい） */
}
.works__case--02 { grid-template-columns: minmax(0, 1fr) calc(var(--px) * 626); }
.works__case--02 .works__media { grid-column: 2; grid-row: 1; }
.works__case--02 .works__body { grid-column: 1; grid-row: 1; }
.works__case--03 { min-height: calc(var(--px) * 570); }

.works__media { position: relative; }
.works__body { padding-top: calc(var(--px) * 7); }

/* 小見出し ■ CASE 01 —— カテゴリ（.c-sub） */
.works__sub { flex-wrap: nowrap; line-height: 1.5; }
.works__sub .c-sub__en { flex: none; }
.works__sub .c-sub__en + .c-sub__ja::before { background: var(--works-line); }
.works__sub .c-sub__ja { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; color: var(--slate); }   /* 狭いときは「｜」の前で折り返す */

/* お名前（GIFTHOUSE 様） */
.works__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: calc(var(--px) * 16);
  font-weight: 700;
  font-size: max(20px, calc(var(--px) * 26));
  line-height: calc(var(--px) * 49);
  letter-spacing: .02em;
  color: var(--ink);
}
.works__name--en .works__name-main {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: max(26px, calc(var(--px) * 34));
  letter-spacing: .04em;
}
.works__sama {
  margin-left: calc(var(--px) * 8);
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 16));
  letter-spacing: .02em;
}

/* 成果の見出し・本文 */
/* 成果の見出し：地の文は中くらいの太さ（500）。「成果」のところだけ .c-marker で太字＋黄色い下線にする
   （全部を太字に戻すなら 500 → 700。そのときは下線と大きさだけで強調される） */
.works__headline {
  margin-top: calc(var(--px) * 22);
  font-weight: 500;
  font-size: max(19px, calc(var(--px) * 26));
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink);
}
.works__text {
  margin-top: calc(var(--px) * 16);
  font-size: max(14px, calc(var(--px) * 15));
  line-height: 2;
  letter-spacing: .02em;
}

/* 数字の上の横線（左から描かれる） */
.works__line {
  display: block;
  height: 1px;
  margin-top: calc(var(--px) * 90);
  background: var(--works-line);
}
.works__case--02 .works__line { margin-top: calc(var(--px) * 56); }

/* 数字（3つ並び・間に縦線） */
.works__kpis {
  display: grid;
  grid-template-columns: calc(var(--px) * 212) calc(var(--px) * 212) minmax(0, 1fr);
  margin-top: calc(var(--px) * 23);
}
.works__kpi {
  --kpi-size: max(34px, calc(var(--px) * 56));
  --kpi-unit: max(13px, calc(var(--px) * 16));
  position: relative;
  gap: calc(var(--px) * 2);
  color: var(--navy);
}
.works__kpi + .works__kpi { padding-left: calc(var(--px) * 26); }
.works__kpi + .works__kpi::before {                /* 縦線 */
  content: "";
  position: absolute;
  top: calc(var(--px) * 4);
  left: 0;
  width: 1px;
  height: calc(var(--px) * 100);
  background: var(--works-line);
}
.works__kpi .c-kpi__value { gap: calc(var(--px) * 4); }
.works__kpi .c-kpi__num { line-height: 1.45; letter-spacing: 0; font-variant-numeric: normal; }
.works__kpi .c-kpi__unit { line-height: 1.45; color: var(--navy); }
.works__kpi .c-kpi__label {
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--slate);
}

/* 注記 */
.works__note {
  margin-top: calc(var(--px) * 20);
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--slate);
}

/* ---------- 同じお客さまの、もう1つの実績（CASE 01 の中の小さなカード：インフルエンサー施策） ---------- */
.works__more {
  margin-top: calc(var(--px) * 30);
  padding: max(20px, calc(var(--px) * 26)) max(20px, calc(var(--px) * 30)) max(18px, calc(var(--px) * 24));
  border-radius: max(14px, calc(var(--px) * 16));
  background: var(--bg);
}
.works__more-tag {
  display: grid;
  width: fit-content;
  place-items: center;
  min-height: 24px;
  padding: 0 1em;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1;
  letter-spacing: .06em;
}
.works__more-headline {
  margin-top: calc(var(--px) * 12);
  font-weight: 500;
  font-size: max(17px, calc(var(--px) * 21));
  line-height: 1.6;
  letter-spacing: .02em;
}
.works__more-sub { font-size: .8em; }
.works__more-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(var(--px) * 12);
}
.works__more-kpis li { display: flex; flex-direction: column; }
.works__more-kpis li + li { padding-left: max(14px, calc(var(--px) * 24)); border-left: 1px solid var(--works-line); }
.works__more-num {
  font-weight: 600;
  font-size: max(30px, calc(var(--px) * 40));
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--navy);
  white-space: nowrap;
}
.works__more-num small {
  margin-inline: .12em;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: max(13px, calc(var(--px) * 15));
}
.works__more-label {
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--slate);
}
.works__more-tasks {
  margin-top: calc(var(--px) * 14);
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--slate);
}

/* 通知カード（位置は事例ごと。中の .c-notice はポップ） */
.works__notice-wrap { position: absolute; z-index: 3; }
.works__notice { --notice-origin: 30% 100%; }
@media (min-width: 901px) {
  /* 狭いPC（〜1100px）でカードだけ縮みすぎて文字（最小サイズあり）がはみ出さないよう、0.8倍より小さくしない */
  .works__notice { --n: max(var(--px), .8px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* 狭いPC：CASE 02・03 は、通知カードがグラフの線に重なるので、この2枚だけもう少し小さくする */
  .works__notice-wrap--02 .works__notice,
  .works__notice-wrap--03 .works__notice { --n: max(var(--px), .66px); }
}

/* ---------- CASE 01：写真6枚 ---------- */
.works__gallery { position: relative; }
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--px) * 4);
}
.works__cell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 206 / 258;
  background: var(--light);
}
.works__cell:nth-child(1) { border-top-left-radius: calc(var(--px) * 16); }
.works__cell:nth-child(3) { border-top-right-radius: calc(var(--px) * 16); }
.works__cell:nth-child(4) { border-bottom-left-radius: calc(var(--px) * 16); }
.works__cell:nth-child(6) { border-bottom-right-radius: calc(var(--px) * 16); }
.works__cell img,
.works__photo img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
@media (hover: hover) {
  .works__cell:hover img,
  .works__photo:hover img { transform: scale(1.06); }
}

/* ---------- CASE 01：公式Movie（横・16:9）。下の写真3枚（.works__grid--row）と合わせて、角丸のひとかたまりに見せる ---------- */
.works__movie {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--px) * 16) calc(var(--px) * 16) 0 0;
  background: var(--navy);               /* 表紙の画像が読み込まれるまでの色 */
}
.works__movie-video {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__movie-tag {                      /* 左上の札「公式Movie」 */
  position: absolute;
  left: max(10px, calc(var(--px) * 14));
  top: max(10px, calc(var(--px) * 14));
  padding: .3em .95em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-weight: 700;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.5;
  letter-spacing: .06em;
}
.works__movie-btn {                      /* 左下の丸いボタン（止める／再生する） */
  position: absolute;
  left: max(10px, calc(var(--px) * 14));
  bottom: max(10px, calc(var(--px) * 14));
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(19, 20, 21, .46);
  color: var(--white);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background-color .3s var(--ease), scale .45s var(--ease-spring);
}
.works__movie-icon { width: 14px; height: 14px; }
.works__movie-icon--pause { display: none; }
.works__movie.is-playing .works__movie-icon--pause { display: block; }
.works__movie.is-playing .works__movie-icon--play { display: none; }
@media (hover: hover) {
  .works__movie-btn:hover { background: rgba(19, 20, 21, .68); scale: 1.08; }
}
.works__movie-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* 縦の動画（ショート動画）の並び：3本が見える幅。4本以上は横に送れる（ドラッグ・スワイプ・矢印）。
   上の公式Movieとつながって見えるよう、上の角は丸めず、下の角だけ丸める */
.works__shorts { position: relative; margin-top: calc(var(--px) * 4); }
.works__shorts-track {
  display: flex;
  gap: calc(var(--px) * 4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 0 0 calc(var(--px) * 16) calc(var(--px) * 16);
}
.works__shorts-track::-webkit-scrollbar { display: none; }
.works__short {
  position: relative;
  flex: 0 0 calc((100% - var(--px) * 8) / 3);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--light);              /* 表紙の画像が読み込まれるまでの色 */
  scroll-snap-align: start;
}
.works__short-video {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__short-btn {                      /* 動画の全体が、再生／停止のボタン。丸いしるしは左下 */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.works__short-mark {
  position: absolute;
  left: max(8px, calc(var(--px) * 12));
  bottom: max(8px, calc(var(--px) * 12));
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(19, 20, 21, .46);
  color: var(--white);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background-color .3s var(--ease), scale .45s var(--ease-spring), opacity .3s var(--ease);
}
.works__short-mark .works__movie-icon { width: 12px; height: 12px; }
.works__short.is-playing .works__movie-icon--pause { display: block; }
.works__short.is-playing .works__movie-icon--play { display: none; }
.works__short.is-playing .works__short-mark { opacity: .72; }
@media (hover: hover) {
  .works__short-btn:hover .works__short-mark { background: rgba(19, 20, 21, .68); scale: 1.08; }
}
.works__short-btn:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
/* 施設名の札（GIFTHOUSE様以外の動画に付ける）。ボタンの上に重ねるが、押すじゃまはしない */
.works__short-tag {
  position: absolute;
  left: max(6px, calc(var(--px) * 8));
  top: max(6px, calc(var(--px) * 8));
  max-width: calc(100% - 12px);
  padding: .28em .8em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-weight: 700;
  font-size: max(10px, calc(var(--px) * 11));
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
/* とても小さいスマホ（幅359px以下）：施設名の札が動画の幅に入りきらないので、2行にする */
@media (max-width: 359px) {
  .works__short-tag { white-space: normal; border-radius: 10px; letter-spacing: 0; line-height: 1.35; padding: .35em .8em; }
  .works__short-tag .u-ib { display: block; }
}
/* 矢印：横に送れるとき（4本以上）だけ出す。data-carousel が .is-scrollable を付ける */
.works__shorts-ctrl { display: none; position: absolute; right: 0; top: calc(100% + var(--px) * 10); gap: 8px; }
.works__shorts.is-scrollable .works__shorts-ctrl { display: flex; }
.works__shorts-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(26, 58, 82, .35);
  border-radius: 50%;
  color: var(--navy);
  transition: background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.works__shorts-arrow svg { width: 16px; height: 16px; }
.works__shorts-arrow.is-disabled { opacity: .3; cursor: default; }
@media (hover: hover) {
  .works__shorts-arrow:not(.is-disabled):hover { background: var(--navy); color: var(--white); }
}

/* ハートのバッジ（右上にはみ出す） */
.works__heart-wrap {
  position: absolute;
  z-index: 3;
  top: calc(var(--px) * -20);
  left: calc(var(--px) * 600);
}
.works__heart { --size: calc(var(--px) * 44); --float-amp: 7px; }

.works__notice-wrap--01 {                         /* 動画の右端から少しはみ出す。公式Movieと縦の動画の境目あたり */
  top: calc(var(--px) * 300);
  right: calc(var(--px) * -33);
  pointer-events: none;                           /* 飾りなので、下の動画のボタンを押すじゃまをしない */
}
@media (min-width: 901px) and (max-width: 1100px) {
  .works__notice-wrap--01 { top: calc(var(--px) * 300 - 16px); }   /* 狭いPC：通知カードが、縦の動画の施設名の札にかからないように少し上へ */
}
.works__caption {
  margin-top: calc(var(--px) * 14);
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--slate);
}

/* ---------- CASE 02：明るい数字のカード（写真なし・グラフの絵）。カードの形は CASE 03 の .works__visual と共通 ---------- */
.works__visual.works__visual--light {             /* 下の .works__visual（紺）より優先させるため、クラスを2つ重ねて書く */
  border: 1px solid var(--works-line);
  background: var(--beige);
  color: var(--navy);
}
.works__visual.works__visual--light .works__big-label,
.works__visual.works__visual--light .works__mini-label { color: var(--slate); }
.works__visual.works__visual--light .works__visual-line { background: var(--works-line); }
/* フォロワーの伸びのグラフ（イメージ図）。カードの上のほうに敷いて、数字の後ろに回す */
.works__growth {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 0 !important;
  width: 100%;
  height: auto;
}

/* 写真1枚の型（いまは使っていません。写真で見せる事例を足すときに使えます） */
.works__photo {
  --clip-r: calc(var(--px) * 16);
  position: relative;
  overflow: hidden;
  aspect-ratio: 626 / 470;
  border: 1px solid var(--works-line);
  border-radius: calc(var(--px) * 16);
  background: var(--bg);
}
/* Figmaと同じトリミング（写真の横17〜83%・縦20〜86%を見せる）。上下の余白はパララックスで動くぶん */
.works__photo img { left: -25.76%; top: -30.3%; width: 151.5%; max-width: none; height: 151.5%; }
.works__notice-wrap--02,
.works__notice-wrap--03 {                         /* カードの左上（数字は下に寄せてあるので重ならない） */
  top: calc(var(--px) * 24);
  left: calc(var(--px) * 24);
}

/* ---------- CASE 03：紺のカード（写真なし・階段のグラフの絵）。写真を入れるときは .works__visual-img を使う ---------- */
.works__visual {
  --clip-r: calc(var(--px) * 16);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  aspect-ratio: 626 / 470;
  padding: 0 calc(var(--px) * 40) calc(var(--px) * 49);
  border-radius: calc(var(--px) * 16);
  background: var(--navy);
  color: var(--white);
}
/* 写真を入れたとき：写真＋下を暗くするグラデーション（数字が読めるように） */
.works__visual-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__visual:has(.works__visual-img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(26, 58, 82, .15) 20%, rgba(26, 58, 82, .88) 78%);
}
.works__visual > :not(.works__visual-img) { position: relative; z-index: 1; }
/* 階段のグラフの絵を入れたカード（CASE 03）：絵の下に数字が来るよう、上の余白をカードの幅に比例させる。
   狭いPCでは文字が最小サイズより小さくならないぶん、カードを縦に少し伸ばす（縦横比を固定すると、階段の線が数字に重なるため）。
   150 ＝ 階段のいちばん低い段（絵の中の y=158）より少し上に、数字の箱の上端が来る数字 */
@media (min-width: 901px) {
  .works__visual.works__visual--steps {
    aspect-ratio: auto;
    min-height: calc(var(--px) * 470);
    padding-top: calc(var(--px) * 150);
  }
}
.works__tag {
  position: absolute !important;
  top: calc(var(--px) * 20);
  left: calc(var(--px) * 20);
  padding: 0 calc(var(--px) * 12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: calc(var(--px) * 30);
  letter-spacing: .02em;
  color: var(--navy);
  white-space: nowrap;
}
.works__big { display: flex; flex-direction: column; }
.works__big-num {
  font-weight: 600;
  font-size: calc(var(--px) * 92);
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}
.works__big-num [data-count], .works__mini-num [data-count] { font-variant-numeric: normal; }
.works__big-label {
  margin-top: calc(var(--px) * 7);
  padding-left: calc(var(--px) * 4);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--light);
}
.works__visual-line {
  display: block;
  height: 1px;
  margin-top: calc(var(--px) * 24);
  background: rgba(255, 255, 255, .35);
}
.works__mini {
  display: grid;
  grid-template-columns: calc(var(--px) * 190) calc(var(--px) * 190) minmax(0, 1fr);
  margin-top: calc(var(--px) * 19);
}
.works__mini li { display: flex; flex-direction: column; min-width: 0; }
.works__mini-num {
  font-weight: 700;
  font-size: max(20px, calc(var(--px) * 30));
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}
.works__mini-num.u-en, .works__mini-num .u-en { font-weight: 600; }
.works__mini-label {
  margin-top: calc(var(--px) * 5);
  padding-left: calc(var(--px) * 2);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--light);
}

/* ---------- OTA・予約システムの運用実績 ---------- */
.works__ota {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--px) * 87);
  padding-block: calc(var(--px) * 16);
}
.works__ota-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--works-line);
}
.works__ota-line--top { top: 0; }
.works__ota-line--bottom { bottom: 0; }
.works__ota-title {
  flex: none;
  width: calc(var(--px) * 355);
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 15));
  line-height: 1.45;
  letter-spacing: .02em;
}
.works__ota-list {
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 16));
  line-height: 1.45;
  letter-spacing: .04em;
}
.works__ota-list li { white-space: nowrap; }
.works__ota-list li:not(:last-child)::after {      /* 区切りの「／」（折り返しても行頭に来ないよう、後ろに付ける） */
  content: "／";
  margin-inline: 1.04em;
  color: var(--ink);
}
/* 最後の「など」：前に「／」を付けず、少しあけて小さめに添える */
.works__ota-list li:nth-last-child(2)::after { content: none; }
.works__ota-list .works__ota-etc { margin-left: .9em; font-size: .88em; color: var(--slate); }

/* ============================================================
   SP（900px以下）… 写真 → 文 の順に1カラム
============================================================ */
@media (max-width: 900px) {
  .works {
    margin-top: 32px;
    border-radius: 48px 0 48px 0;
  }
  .works__inner { padding-top: 64px; padding-bottom: 72px; }
  .works__head { padding-left: 0; padding-right: 28px; }
  .works__desc { margin-top: 6px; font-size: 13.5px; line-height: 1.75; }
  .works__en { top: 72px; right: 14px; font-size: 11px; }

  .works__case,
  .works__case--02 {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 72px;
    padding-bottom: 0;
  }
  .works__case--01 { margin-top: 40px; }
  .works__case--03 { min-height: 0; }
  .works__media { width: 100%; }
  .works__body { width: 100%; padding-top: 0; margin-top: 28px; }

  /* 小見出し：カテゴリは2行目へ（線なし） */
  .works__sub { flex-wrap: wrap; }
  .works__sub .c-sub__ja { width: 100%; margin-top: 3px; padding-left: 15px; line-height: 1.6; }
  .works__sub .c-sub__en + .c-sub__ja::before { display: none; }

  .works__name { margin-top: 10px; font-size: 21px; line-height: 1.45; }
  .works__name--en .works__name-main { font-size: 28px; }
  .works__sama { margin-left: 6px; font-size: 13px; }
  .works__headline { margin-top: 12px; font-size: 19px; line-height: 1.6; }
  .works__text { margin-top: 12px; font-size: 14.5px; line-height: 1.9; }

  .works__line,
  .works__case--02 .works__line { margin-top: 26px; }
  .works__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
  .works__kpi { --kpi-size: 30px; --kpi-unit: 12px; gap: 2px; }
  .works__kpi + .works__kpi { padding-left: 12px; }
  .works__kpi + .works__kpi::before { top: 2px; height: calc(100% - 2px); }
  .works__kpi .c-kpi__value { gap: 3px; flex-wrap: wrap; row-gap: 0; }
  .works__kpi .c-kpi__label { font-size: 11px; line-height: 1.5; white-space: normal; }
  .works__note { margin-top: 16px; font-size: 11px; line-height: 1.6; }
  .works__more { margin-top: 22px; }
  .works__more-headline { margin-top: 10px; font-size: 17px; }
  .works__more-kpis { margin-top: 10px; }
  .works__more-num { font-size: 30px; }
  .works__more-tasks { margin-top: 12px; font-size: 12px; }
  .works__desc, .works__text, .works__note { text-wrap: pretty; }   /* 最後の行が1〜2文字だけにならないように */

  /* CASE 01 */
  .works__grid { gap: 3px; }
  .works__cell:nth-child(1) { border-top-left-radius: 14px; }
  .works__cell:nth-child(3) { border-top-right-radius: 14px; }
  .works__cell:nth-child(4) { border-bottom-left-radius: 14px; }
  .works__cell:nth-child(6) { border-bottom-right-radius: 14px; }
  .works__heart-wrap { top: -14px; left: auto; right: -8px; }
  .works__heart { --size: 38px; }
  .works__notice-wrap--01 { top: auto; left: auto; right: -6px; bottom: -48px; }   /* 縦の動画の再生マークにかからない位置まで下げる（下のキャプションの margin-top とセット） */
  .works__movie { border-radius: 14px 14px 0 0; }
  /* 縦の動画：スマホは2本と少しが見える幅（3本めがのぞいて、横に送れることが分かる）。矢印は出さない（指で送る） */
  .works__shorts { margin-top: 3px; }
  .works__shorts-track { gap: 3px; border-radius: 0 0 14px 14px; }
  .works__short { flex-basis: 42%; }
  .works__shorts.is-scrollable .works__shorts-ctrl { display: none; }
  .works__caption { margin-top: 58px; padding-right: 0; font-size: 11px; }

  /* CASE 02 */
  .works__photo { --clip-r: 14px; border-radius: 14px; aspect-ratio: 4 / 3; }
  .works__notice-wrap--02,
  .works__notice-wrap--03 { top: 12px; left: 12px; }
  /* 上のグラフと数字が重ならないよう、上を広めに（グラフは画面の幅に合わせて大きくなるので、幅に比例させる） */
  .works__visual.works__visual--light { padding-top: max(112px, calc(var(--vw, 100vw) * .27)); }

  /* CASE 03 */
  .works__visual {
    --clip-r: 14px;
    aspect-ratio: auto;
    min-height: 300px;
    padding: 72px 22px 26px;
    border-radius: 14px;
  }
  .works__tag { top: 14px; left: 14px; padding: 0 10px; font-size: 11px; line-height: 28px; }
  /* 上のグラフと数字が重ならないよう、上を広めに（グラフは画面の幅に合わせて大きくなるので、幅に比例させる。CASE 02 と同じ） */
  .works__visual.works__visual--steps { padding-top: max(104px, calc(var(--vw, 100vw) * .25)); }
  .works__big-num { font-size: min(46px, calc(var(--sp) * 46)); }
  .works__big-label { margin-top: 2px; padding-left: 2px; font-size: 13px; }
  .works__visual-line { margin-top: 18px; }
  .works__mini { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; margin-top: 14px; }
  .works__mini-num { font-size: 20px; }
  .works__mini-label { margin-top: 2px; padding-left: 1px; font-size: 10.5px; line-height: 1.5; }

  /* OTA */
  .works__ota {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 64px;
    padding-block: 20px;
  }
  .works__ota-title { width: auto; font-size: 14px; }
  /* SPは「／」をやめて、小さなタグの並びに */
  .works__ota-list { gap: 8px; font-size: 13px; line-height: 1.4; letter-spacing: .03em; }
  .works__ota-list li { padding: 7px 13px; border: 1px solid var(--works-line); border-radius: 999px; }
  .works__ota-list li:not(:last-child)::after { content: none; }
  .works__ota-list .works__ota-etc { align-self: center; margin-left: 2px; padding: 0; border: 0; }
}

@media (max-width: 480px) {
  .works__kpi { --kpi-size: 28px; }
  /* 成果の見出しは <br> で2行にしているので、狭い画面では少し小さくして1行ずつに収める（390で19px） */
  .works__headline { font-size: max(16px, min(19px, calc(var(--sp) * 19))); }
  /* 紺カードの小さい数字：等分だと「インフルエンサー」が途中で折れるので、中身の幅で並べて間をあける */
  .works__mini { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  /* CASE 03 だけ：2つ目（「招待した／インフルエンサー」）のラベルが2行に折れるので、その列は中身の最小幅にする。
     そうしないと「50,000+」と「約50組」がくっつき、「約50組」と「数百名」の間だけ広く空く */
  .works__case--03 .works__mini { grid-template-columns: auto min-content auto; }
  .works__mini li { min-width: auto; }
  .works__mini-label .u-ib { white-space: nowrap; }
}
@media (max-width: 360px) {
  /* 幅320前後の小さいスマホ：数字の列と紺カードの中身が重ならない・途中で折れないように少しだけ詰める */
  .works__kpis { grid-template-columns: minmax(0, 1fr) minmax(0, .86fr) minmax(0, 1.14fr); }   /* 3つ目の「インフルエンサー」が折れないよう少し広く */
  .works__kpi { --kpi-size: 26px; }
  .works__kpi + .works__kpi { padding-left: 9px; }
  .works__kpi .c-kpi__label { letter-spacing: 0; }
  .works__visual { padding-inline: 18px; }
  .works__tag { font-size: 10px; letter-spacing: 0; }
  .works__mini { column-gap: 8px; }
  .works__mini-num { font-size: 18px; }
  .works__mini-label { letter-spacing: 0; }
}
/* 小さいスマホ（幅367px以下）：CASE 02 の小見出しが2行になり、2行目が「｜」で始まるので、区切りの「｜」を消す */
@media (max-width: 367px) {
  .works__case--02 .works__sub-bar { display: none; }
}


/* ===== 31-voice ===== */
/* ============================================================
   31-voice … お客様の声（背景 --bg・白い吹き出しカード4枚）
   PC：2枚ずつ2段（文が長いので、3枚横並びより読みやすい幅にしている。3枚に戻すなら repeat(2, …) を repeat(3, …) に）
   SP：横スクロール（data-carousel・スナップ・前後ボタン）
============================================================ */

.voice {
  position: relative;
  background: var(--bg);
}
.voice__inner {
  position: relative;
  padding-top: calc(var(--px) * 84);
  padding-bottom: calc(var(--px) * 130);
}

/* ---------- 見出し ---------- */
.voice__head { padding-left: calc(var(--px) * 4); }
.voice__title { color: var(--ink); }
.voice__desc {
  margin-top: calc(var(--px) * 14);
  font-size: max(13px, calc(var(--px) * 15));
  line-height: 1.5;
  color: var(--slate);
}
.voice__en {                                       /* 右端の縦書き「VOICE」 */
  position: absolute;
  top: calc(var(--px) * 90);
  right: calc(var(--px) * 51);
  writing-mode: vertical-rl;
  font-weight: 400;
  font-size: max(11px, calc(var(--px) * 13));
  line-height: 1.45;
  letter-spacing: .2em;
  color: var(--slate);
}
.voice__en > span { display: block; }

/* ---------- カードの並び ---------- */
.voice__carousel { margin-top: calc(var(--px) * 65); }
.voice__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--px) * 23.5);
  row-gap: calc(var(--px) * 52);     /* 段と段の間（上の段の「お名前」と、下の段のカードの間） */
}
@media (min-width: 901px) {
  /* PCは横スクロールしない（カードが浮く動きが切れないように） */
  .voice__list[data-carousel-track] { overflow: visible; scroll-snap-type: none; cursor: auto; }
  .voice__carousel.is-dragging .voice__list * { pointer-events: auto; user-select: auto; }
}
.voice__figure { display: flex; flex-direction: column; height: 100%; transform-origin: 12% 85%; }   /* transform-origin：ポンと出るときの起点（しっぽのあたり） */

/* 吹き出し */
.voice__card {
  --r: calc(var(--px) * 16);
  flex: 1;
  min-height: calc(var(--px) * 250);
  padding: calc(var(--px) * 74) calc(var(--px) * 40) calc(var(--px) * 34) calc(var(--px) * 32);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.voice__card::after {                              /* しっぽ（左下） */
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: calc(var(--px) * 44);
  width: calc(var(--px) * 26);
  height: calc(var(--px) * 20);
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 15.4% 100%);
}
.voice__quote {                                    /* アプリコットの “ */
  position: absolute;
  top: calc(var(--px) * 14);
  left: calc(var(--px) * 30);
  font-weight: 600;
  font-size: calc(var(--px) * 48);
  line-height: 1.44;
  color: var(--warm);
}
.voice__text {
  font-weight: 500;
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink);
}
/* （マウスをのせて浮き上がる動きは、ボタンと勘違いされるのでやめました） */

/* お名前（アイコン＋肩書き） */
.voice__who {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 14);
  margin-top: calc(var(--px) * 34);
  padding-left: calc(var(--px) * 30);
}
.voice__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: max(38px, calc(var(--px) * 44));
  height: max(38px, calc(var(--px) * 44));
  border-radius: 50%;
  background: var(--light);
  color: var(--navy);
}
.voice__avatar svg { width: 50%; height: 50%; }
.voice__name {
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 14));
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--navy);
}

/* ============================================================
   SP（900px以下）… 横スクロール
============================================================ */
@media (max-width: 900px) {
  .voice__inner { padding-top: 64px; padding-bottom: 64px; }
  .voice__head { padding-left: 0; padding-right: 28px; }
  .voice__desc { margin-top: 6px; font-size: 13px; line-height: 1.7; }
  .voice__en { top: 72px; right: 14px; font-size: 11px; }

  .voice__carousel { margin-top: 28px; }
  .voice__list {
    display: flex;
    gap: 12px;
    margin-inline: -20px;
    padding: 6px 20px 8px;
    scroll-padding-inline: 20px;
  }
  .voice__item { flex: 0 0 min(86%, 340px); }
  .voice__card {
    --r: 16px;
    min-height: 0;
    padding: 50px 22px 24px;
  }
  .voice__card::after { left: 32px; width: 22px; height: 16px; }
  .voice__quote { top: 6px; left: 20px; font-size: 40px; }
  .voice__text { font-size: 14.5px; line-height: 1.85; }
  .voice__desc, .voice__text { text-wrap: pretty; }   /* 最後の行が1〜2文字だけにならないように */
  .voice__who { gap: 10px; margin-top: 26px; padding-left: 12px; }
  .voice__name { font-size: 12px; }

  /* 位置のバー＋前後ボタン */
  .voice__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }
  .voice__bar {
    position: relative;
    flex: 1;
    height: 2px;
    margin-right: 10px;
    border-radius: 2px;
    background: rgba(95, 120, 136, .22);
    overflow: hidden;
  }
  .voice__bar-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--progress, 0) * 64%);
    width: 36%;
    border-radius: 2px;
    background: var(--navy);
    transition: left .15s linear;
  }
  .voice__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    transition: background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
  }
  .voice__arrow svg { width: 18px; height: 18px; }
  .voice__arrow:active { background: var(--navy); color: var(--white); }
}


/* ===== 40-about ===== */
/* ============================================================
   40-about … 私たちについて（ミッション・代表メッセージ・代表アカウント・体制・提携クリエイター・会社概要）
   PC は Figma（幅1440）の数値 N を calc(var(--px) * N) で書いています。
   x 座標は .l-inner の左（x=65）からの距離。
============================================================ */

.sec-about {
  --about-hair: var(--hair);   /* 0.5px の線の色（下の @media で、等倍の画面では少し薄く） */
  position: relative;
  padding: calc(var(--px) * 62) 0 calc(var(--px) * 150);
  background: var(--bg);
}

/* ------------------------------------------------------------
   ミッション（左：ラベル / 右：Our Mission・見出し・リード）
------------------------------------------------------------ */
.about__mission {
  display: grid;
  grid-template-columns: calc(var(--px) * 673) minmax(0, 1fr);
  align-items: start;
}
.about__label {
  padding-left: calc(var(--px) * 41);   /* 線の左端 x=106 */
  margin-top: calc(var(--px) * 12);
}
.about__eyebrow {
  font-weight: 300;
  font-size: max(15px, calc(var(--px) * 20));
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--slate);
}
.about__mission-title {
  margin-top: calc(var(--px) * 7);
  white-space: nowrap;
}
.about__mission-lead {
  max-width: max(440px, calc(var(--px) * 600));
  margin-top: calc(var(--px) * 16);
  font-weight: 500;
  font-size: max(14px, calc(var(--px) * 18));
  line-height: 1.9;
}

/* ------------------------------------------------------------
   代表メッセージ（左：写真＋ハート / 右：文章・署名・数字）
------------------------------------------------------------ */
.about__message {
  display: grid;
  grid-template-columns: calc(var(--px) * 495) minmax(0, 1fr);
  column-gap: calc(var(--px) * 127);
  align-items: start;
  margin-top: calc(var(--px) * 128);
  padding-left: calc(var(--px) * 48);   /* 写真の左端 x=113 */
}
.about__portrait {
  position: relative;
  z-index: 1;
}
.about__photo {
  --clip-r: calc(var(--px) * 16);
  position: relative;
  overflow: hidden;
  aspect-ratio: 495 / 619;
  border-radius: calc(var(--px) * 16);
  background: var(--light);
}
/* 写真は Figma と同じ切り抜き（約1.38倍に拡大・上半身）。枠より大きいので、中でゆっくり動かせる（パララックス） */
.about__photo-img {
  position: absolute;
  left: -16.8%;
  top: -29.5%;
  width: 137.75%;
  height: auto;
  max-width: none;
}
.about__heart {
  position: absolute;
  top: calc(var(--px) * -18);
  right: calc(var(--px) * -43);
  z-index: 2;
}
.about__heart .c-heart {
  --size: calc(var(--px) * 59);
  box-shadow: 0 calc(var(--px) * 10) calc(var(--px) * 24) calc(var(--px) * -10) rgba(237, 57, 123, .55);
}

/* 小見出し（■ なし版：MESSAGE —— 代表メッセージ） */
.about__sub--plain::before { display: none; }

.about__message-title {
  margin-top: calc(var(--px) * 21);
  font-size: max(26px, calc(var(--px) * 42));
  line-height: 1.5;
  letter-spacing: .02em;
}
/* 本文（2026-10-05 に組み直し：文字を大きく・番号を左に出す・段落を短く・課題は箇条書き・最後は白いカード） */
.about__message-text {
  margin-top: calc(var(--px) * 44);
  font-size: max(15px, calc(var(--px) * 16));
  line-height: 1.95;
  letter-spacing: .03em;
}
/* 本文のまとまり（左：番号 ／ 右：小見出し＋文章） */
.about__chapter {
  display: grid;
  grid-template-columns: max(40px, calc(var(--px) * 52)) minmax(0, 1fr);
  align-items: start;
}
.about__chapter + .about__chapter { margin-top: max(36px, calc(var(--px) * 48)); }
.about__chapter-num {                 /* 番号（暖色）。下に、次の番号までの点線（01 → 02 → 03 とつながる） */
  position: relative;
  align-self: stretch;
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 15));
  line-height: calc(max(18px, calc(var(--px) * 22)) * 1.6);   /* 右の小見出しの1行目と高さをそろえる */
  letter-spacing: .1em;
  color: var(--warm);
}
.about__chapter-num::after {
  content: "";
  position: absolute;
  left: .55em;
  top: calc(max(18px, calc(var(--px) * 22)) * 1.6 + 6px);
  bottom: calc(max(36px, calc(var(--px) * 48)) * -1 + 8px);   /* 次のまとまりの番号のすぐ上まで（上の「まとまりの間」と同じ数字を使う） */
  width: 3px;
  background: radial-gradient(circle, rgba(95, 120, 136, .45) 1.1px, transparent 1.5px) 50% 0 / 3px 9px repeat-y;
}
.about__chapter:last-child .about__chapter-num::after { display: none; }
.about__chapter-title {
  font-weight: 700;
  font-size: max(18px, calc(var(--px) * 22));
  line-height: 1.6;
  letter-spacing: .02em;
}
.about__chapter-main > p { margin-top: calc(var(--px) * 12); }
.about__chapter-title + p { margin-top: calc(var(--px) * 16); }
/* 気づいた課題（白いカードの箇条書き） */
.about__issues {
  display: grid;
  row-gap: .7em;
  margin-top: calc(var(--px) * 20);
  padding: max(18px, calc(var(--px) * 24)) max(20px, calc(var(--px) * 28));
  border-radius: max(14px, calc(var(--px) * 16));
  background: var(--white);
  line-height: 1.8;
}
.about__issues li { position: relative; padding-left: 1.4em; }
.about__issues li::before {           /* 行頭の丸（暖色・小さく） */
  content: "";
  position: absolute;
  left: .2em;
  top: .68em;
  width: .44em;
  height: .44em;
  border-radius: 50%;
  background: var(--warm);
}
.about__issues + p { margin-top: calc(var(--px) * 20); }
/* 最後のひとこと＋署名（白いカード） */
.about__closing {
  margin-top: max(36px, calc(var(--px) * 46));
  padding: max(24px, calc(var(--px) * 36)) max(22px, calc(var(--px) * 40)) max(22px, calc(var(--px) * 32));
  border-radius: max(16px, calc(var(--px) * 20));
  background: var(--white);
}
.about__message-close {
  font-weight: 700;
  font-size: max(16px, calc(var(--px) * 18));
  line-height: 1.9;
  letter-spacing: .03em;
}
/* PC：文章が長いので、読んでいる間、左の写真が画面の上のほうに止まってついてくる（やめるときはこの3行を消す） */
@media (min-width: 901px) {
  /* top は 100px より小さくしない：狭いPC（幅901〜1010px）で、写真の右上のハートが固定ヘッダー（下の端が74px）にもぐらないように */
  .about__portrait { position: sticky; top: max(100px, calc(var(--px) * 124)); }
  html.is-static .about__portrait { position: relative; top: auto; }   /* スクショ用の静止モードでは止めない（分割撮影で写真が2回写るため）。relative のまま：中のハートの位置の基準なので */
}

/* 署名 */
.about__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;            /* カードの右下に */
  column-gap: calc(var(--px) * 14);
  margin-top: calc(var(--px) * 22);
}
.about__sign-role {
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 13));
  letter-spacing: .04em;
  color: var(--slate);
}
.about__sign-name {
  font-weight: 700;
  font-size: max(20px, calc(var(--px) * 26));
  line-height: 1.46;
  letter-spacing: .08em;
}

/* 代表の数字（約12万人 / 1,000軒以上） */
.about__stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(var(--px) * 48);
  row-gap: 16px;
  margin-top: calc(var(--px) * 34);
  padding-left: max(22px, calc(var(--px) * 40));   /* 上の白いカードの中の文字と、左をそろえる */
}
.about__stat {
  --kpi-size: max(34px, calc(var(--px) * 46));
  --kpi-unit: max(14px, calc(var(--px) * 16));
  gap: calc(var(--px) * 2);
  color: var(--navy);
}
.about__stat .c-kpi__value { gap: calc(var(--px) * 4); }
.about__stat .c-kpi__num { line-height: 1.43; }
.about__stat .c-kpi__unit { font-weight: 700; }
.about__stat-pre {
  font-weight: 700;
  font-size: max(13px, calc(var(--px) * 15));
}
.about__stat .c-kpi__label {
  font-weight: 400;
  font-size: max(11px, calc(var(--px) * 12.5));
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   代表アカウントでのご紹介（白いパネル）
   左：説明・プロフィール・フォロワー数・料金 / 右：投稿の一例（写真 3列×2段）
------------------------------------------------------------ */
.about__creator {
  --r: calc(var(--px) * 24);
  display: grid;
  /* 右の列の幅＝写真の大きさ。676 にすると、写真の下の端が、左の小さいマス（Threads など）の下の端とそろう */
  grid-template-columns: minmax(0, 1fr) calc(var(--px) * 676);
  column-gap: calc(var(--px) * 40);
  align-items: stretch;
  margin-top: calc(var(--px) * 105);
  padding: calc(var(--px) * 48) calc(var(--px) * 48) calc(var(--px) * 44);
}
.about__creator-title {
  margin-top: calc(var(--px) * 17);
  font-size: max(20px, calc(var(--px) * 26));
  line-height: 1.5;
  letter-spacing: .02em;
}
.about__creator-text {
  margin-top: calc(var(--px) * 14);
  font-size: max(13px, calc(var(--px) * 15));
  line-height: 1.8;
  color: var(--slate);
  word-break: auto-phrase;   /* 対応ブラウザでは文節で折り返す（「施／設」のように言葉の途中で切れないように） */
}

/* プロフィール（アイコン＋名前＋紹介文） */
.about__profile {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--px) * 20);
  margin-top: calc(var(--px) * 20);
}
.about__avatar {
  flex: none;
  width: max(52px, calc(var(--px) * 72));
  height: max(52px, calc(var(--px) * 72));
  border: 2px solid var(--light);
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
}
.about__profile-body { min-width: 0; padding-top: calc(var(--px) * 4); }
.about__profile-name {
  font-weight: 700;
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.45;
}
.about__profile-id {
  display: block;
  width: fit-content;
  margin-top: calc(var(--px) * 5);
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--slate);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .4s var(--ease), color .3s var(--ease);
}
.about__profile-text {
  margin-top: calc(var(--px) * 3);
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1.75;
  word-break: auto-phrase;   /* 対応ブラウザでは文節で折り返す（「中／心」のように言葉の途中で切れないように。70-faq・80-contact と同じ書き方） */
}

/* 料金（PR投稿） */
.about__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: calc(var(--px) * 26);
  color: var(--navy);
}
.about__price-tag {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: max(24px, calc(var(--px) * 28));
  margin-right: calc(var(--px) * 14);
  padding: 0 max(10px, calc(var(--px) * 13));
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  letter-spacing: .02em;
}
.about__price-num {
  font-weight: 600;
  font-size: max(22px, calc(var(--px) * 28));
  line-height: 1.43;
  letter-spacing: 0;
}
.about__price-unit {
  margin-left: calc(var(--px) * 4);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 14));
}
.about__price-note {
  margin-top: calc(var(--px) * 7);
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.45;
  color: var(--slate);
}

/* フォロワー数のマス
   上の段：Instagram（いちばん大きい数字）＋ 総フォロワー数（紺）
   下の段：そのほかの SNS 4つ（小さく）
   16列に分けて、Instagram＝9列・総フォロワー＝7列・小さいマス＝4列ずつ */
.about__tiles {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 24);
}
.about__tile {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--px) * 15) 2px calc(var(--px) * 12);
  border-radius: calc(var(--px) * 14);
  background: var(--bg);
  color: var(--navy);
  text-align: center;
}
.about__tile-head {                    /* アイコン＋SNSの名前（小さいマスは縦に並べる） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 6);
}
.about__tile-icon {
  flex: none;
  width: max(16px, calc(var(--px) * 18));
  height: max(16px, calc(var(--px) * 18));
}
.about__tile-name {
  font-weight: 500;
  font-size: max(9.5px, calc(var(--px) * 10));
  line-height: 1.45;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}
.about__tile-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--px) * 2);
  margin-top: calc(var(--px) * 1);
  line-height: 1;
  white-space: nowrap;
}
.about__tile-num {
  font-weight: 600;
  font-size: max(16px, calc(var(--px) * 21));
  line-height: 1.43;
  letter-spacing: 0;
}
.about__tile-unit {
  font-weight: 500;
  font-size: max(10px, calc(var(--px) * 11.5));
}

/* 上の段の2つ（Instagram・総フォロワー数）：名前は横並び、数字は下にそろえる */
.about__tile--hero,
.about__tile--total {
  justify-content: space-between;
  padding: calc(var(--px) * 20) calc(var(--px) * 12) calc(var(--px) * 18);
  border-radius: calc(var(--px) * 16);
}
.about__tile--hero { grid-column: span 9; }
.about__tile--total { grid-column: span 7; background: var(--navy); color: var(--white); }
.about__tile--hero .about__tile-head,
.about__tile--total .about__tile-head {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--px) * 8);
}
.about__tile--hero .about__tile-icon,
.about__tile--total .about__tile-icon {
  width: max(18px, calc(var(--px) * 22));
  height: max(18px, calc(var(--px) * 22));
}
.about__tile--hero .about__tile-name {
  font-size: max(10.5px, calc(var(--px) * 12.5));
  letter-spacing: .2em;
}
.about__tile--total .about__tile-name {
  font-family: var(--font-ja);
  font-size: max(11px, calc(var(--px) * 13));
  letter-spacing: .04em;
  color: var(--light);
}
.about__tile--hero .about__tile-value,
.about__tile--total .about__tile-value { margin-top: calc(var(--px) * 12); }
/* Instagram の数字（カードの中でいちばん大きく） */
.about__tile--hero .about__tile-value { gap: calc(var(--px) * 5); }
.about__tile--hero .about__tile-num {
  font-size: max(58px, calc(var(--px) * 96));
  line-height: .9;
  letter-spacing: -.01em;
}
.about__tile--hero .about__tile-unit {
  font-weight: 700;
  font-size: max(17px, calc(var(--px) * 26));
}
/* 総フォロワー数（Instagram の数字と下の線＝ベースラインをそろえるため、少し持ち上げる） */
.about__tile--total .about__tile-value {
  gap: calc(var(--px) * 3);
  padding-bottom: max(2.4px, calc(var(--px) * 4.3));
}
.about__tile--total .about__tile-num {
  font-size: max(34px, calc(var(--px) * 54));
  line-height: .9;
}
.about__tile--total .about__tile-unit {
  font-weight: 700;
  font-size: max(11px, calc(var(--px) * 15));
}
/* カウントアップ中（0 → 12 と数える間）に、けたが増えても数字と「万人」が横に動かないよう、
   2けたぶんの幅を先に取っておく（em なのでスマホの文字サイズにもそのまま合います）。
   フォロワー数が3けた（100万人〜）になったら、下の 1.21em・1.23em を 1.82em・1.85em に */
.about__tile--hero .about__tile-num { min-width: 1.21em; text-align: right; }
.about__tile--total .about__tile-num { min-width: 1.23em; text-align: right; }
@media (hover: hover) {
  .about__profile-id:hover { color: var(--navy); background-size: 100% 1px; }
}

/* 投稿の一例（Instagram のプロフィール画面のように、同じ大きさの写真を 3列×2段）
   写真は HTML の <img> を差し替えるだけ。ここは並べ方と角丸だけ決めています */
.about__posts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.about__posts-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(var(--px) * 14);
  font-weight: 700;
  font-size: max(13px, calc(var(--px) * 15));
  line-height: 1.45;
  letter-spacing: .04em;
}
.about__posts-note {
  font-weight: 400;
  font-size: max(11px, calc(var(--px) * 12.5));
  letter-spacing: .04em;
  color: var(--slate);
}
.about__posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--px) * 10);
  margin: calc(var(--px) * 14) 0 calc(var(--px) * 16);
}
.about__post {
  overflow: hidden;
  aspect-ratio: 4 / 5;                 /* 枠の形は 4:5。いまの画像も 4:5 なので、ほぼそのまま入る（3:4 の画像は下が少しだけ切れる。左右は切れないので、表紙の文字が欠けない） */
  border-radius: calc(var(--px) * 14);
  background: var(--light);            /* 写真が読み込まれるまでの色 */
}
.about__post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;              /* 上はそのまま、下を少しだけ切る（右上の再生アイコンを切らない） */
}
/* 上下に白いふちが入っている画像用：<li class="about__post about__post--trim"> にすると、
   上と下を同じだけ切って、白いふちだけを隠す（左右は切らない） */
.about__post--trim img { object-position: 50% 50%; }
.about__posts-link {
  align-self: flex-end;                /* 右寄せ */
  margin-top: auto;                    /* 左の列のほうが長いときは、カードの下にそろう */
}

/* ------------------------------------------------------------
   体制（左：見出し / 右：体制図）
------------------------------------------------------------ */
.about__team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--px) * 735);
  column-gap: calc(var(--px) * 40);
  align-items: start;
  margin-top: calc(var(--px) * 120);
}
.about__team-title {
  margin-top: calc(var(--px) * 23);
  font-size: max(20px, calc(var(--px) * 30));
  line-height: 1.6;
  letter-spacing: .02em;
}
.about__team-text {
  max-width: calc(var(--px) * 505);
  margin-top: calc(var(--px) * 20);
  font-size: max(14px, calc(var(--px) * 15));
  line-height: 2;
}

/* 体制図 */
.about__chart {
  --line: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about__chart-client,
.about__chart-director {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(256px, calc(var(--px) * 340));
  text-align: center;
  letter-spacing: .02em;
}
.about__chart-client {
  min-height: calc(var(--px) * 58);
  padding: 6px 12px;
  border: .5px solid var(--about-hair);
  border-radius: calc(var(--px) * 12);
  background: var(--white);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.45;
}
.about__chart-director {
  min-height: calc(var(--px) * 62);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: max(13px, calc(var(--px) * 17));
  line-height: 1.45;
}
.about__chart-line {
  display: block;
  width: 1px;
  background: var(--line);
  transform-origin: 50% 0;
}
.about__chart-line--1 { height: calc(var(--px) * 40); }
.about__chart-line--2 { height: calc(var(--px) * 34); }

/* 6つの担当（上に横線と縦の短い線） */
.about__roles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(var(--px) * 10.2);
  width: 100%;
  margin-top: calc(var(--px) * 26);
}
.about__roles::before {               /* 横線（左右の箱の中心どうしをつなぐ） */
  content: "";
  position: absolute;
  top: calc(var(--px) * -26);
  left: calc((100% - var(--px) * 51) / 12);
  right: calc((100% - var(--px) * 51) / 12);
  height: 1px;
  background: var(--line);
}
.about__role {
  position: relative;
  display: flex;
  flex-direction: column;              /* アイコン → 名前 を縦に */
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 8);
  min-height: calc(var(--px) * 112);
  padding: calc(var(--px) * 12) 2px;
  border: .5px solid var(--about-hair);
  border-radius: calc(var(--px) * 12);
  background: var(--white);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 14));
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
}
.about__role-icon {                   /* 担当のアイコン（線の色は紺） */
  flex: none;
  width: max(18px, calc(var(--px) * 26));
  height: auto;
  color: var(--navy);
}
.about__role::before {                /* 横線から箱へ下りる縦線 */
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: calc(var(--px) * 26);
  margin-left: -.5px;
  background: var(--line);
  transform-origin: 50% 0;
}
.about__chart-note {
  margin-top: calc(var(--px) * 20);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 13));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--slate);
  text-align: center;
}

/* 体制図の動き：施設さま → 線 → ディレクター → 線 → 横線 → 各担当が順番に
   （.about__chart に main.js が .is-in を付けたら動く。static・動きを減らす設定では最初から表示） */
html.js .about__chart.is-in .about__chart-client,
html.js .about__chart.is-in .about__chart-director,
html.js .about__chart.is-in .about__role,
html.js .about__chart.is-in .about__chart-note {
  transition: opacity .7s var(--ease) var(--d, 0s), transform .8s var(--ease-out) var(--d, 0s);
}
html.js .about__chart.is-in .about__chart-line,
html.js .about__chart.is-in .about__roles::before,
html.js .about__chart.is-in .about__role::before {
  transition: transform .45s cubic-bezier(.65, 0, .35, 1) var(--d, 0s);
}
.about__chart-client { --d: .1s; }
.about__chart-line--1 { --d: .4s; }
.about__chart-director { --d: .65s; }
.about__chart-line--2 { --d: .95s; }
.about__roles { --d: 1.2s; }
.about__role { --d: calc(1.55s + var(--i, 0) * .07s); }
.about__role::before { --d: 1.45s; }
.about__chart-note { --d: 2.1s; }
html.js.is-ready:not(.is-static):not(.is-reduced) .about__chart:not(.is-in) .about__chart-client { opacity: 0; transform: translate3d(0, 14px, 0); }
html.js.is-ready:not(.is-static):not(.is-reduced) .about__chart:not(.is-in) .about__chart-director { opacity: 0; transform: scale(.9); }
html.js.is-ready:not(.is-static):not(.is-reduced) .about__chart:not(.is-in) .about__chart-line { transform: scaleY(0); }
html.js.is-ready:not(.is-static):not(.is-reduced) .about__chart:not(.is-in) .about__roles::before { transform: scaleX(0); }
html.js.is-ready:not(.is-static):not(.is-reduced) .about__chart:not(.is-in) .about__role::before { transform: scaleY(0); }
html.js.is-ready:not(.is-static):not(.is-reduced) .about__chart:not(.is-in) .about__role { opacity: 0; transform: translate3d(0, 14px, 0); }
html.js.is-ready:not(.is-static):not(.is-reduced) .about__chart:not(.is-in) .about__chart-note { opacity: 0; }

/* ------------------------------------------------------------
   提携クリエイター（横スクロールのカード）
------------------------------------------------------------ */
.about__partners { margin-top: calc(var(--px) * 115); }
.about__partners-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow ."
    "title   nav"
    "lead    ."
    "note    .";
  align-items: center;
  column-gap: 24px;
}
.about__partners-eyebrow {
  grid-area: eyebrow;
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 16));
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--slate);
}
.about__partners-title {
  grid-area: title;
  margin-top: calc(var(--px) * 17);
  font-size: max(24px, calc(var(--px) * 40));
  line-height: 1.42;
  letter-spacing: .02em;
}
.about__partners-lead {                 /* 見出しの下の1文（サブタイトル） */
  grid-area: lead;
  max-width: 46em;
  margin-top: calc(var(--px) * 16);
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.9;
  letter-spacing: .03em;
}
.about__partners-note {
  grid-area: note;
  margin-top: calc(var(--px) * 14);
  font-size: max(11px, calc(var(--px) * 12.5));
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--slate);
}
.about__nav {
  grid-area: nav;
  display: flex;
  gap: calc(var(--px) * 18);
  margin-top: calc(var(--px) * 17);
}
.about__nav-btn {
  display: grid;
  place-items: center;
  width: max(44px, calc(var(--px) * 56));
  height: max(44px, calc(var(--px) * 56));
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease), scale .2s var(--ease);
}
.about__nav-btn svg { width: max(18px, calc(var(--px) * 20)); height: max(18px, calc(var(--px) * 20)); }
.about__nav-btn:not([aria-disabled="true"]):active { scale: .94; }
@media (hover: hover) {
  .about__nav-btn:not([aria-disabled="true"]):hover { background: var(--ink); color: var(--white); }
}

/* カードの列（右端は画面の端まで。左は本文の位置にそろえる） */
.about__track {
  /* 100% ＝ 列の幅（画面幅）。.l-inner と同じ計算なので、1440より広い画面でも本文の左端とそろう */
  --track-pad: calc((100% - min(100%, 1440px)) / 2 + var(--gutter));
  display: flex;
  gap: calc(var(--px) * 28);
  margin: calc(var(--px) * 42 - 10px) 0 -44px;
  padding: 10px var(--track-pad) 44px;   /* 上下の余白＝ホバーで浮いたときの影が切れないように */
  scroll-padding-inline: var(--track-pad);
}
.about__card {
  --r: calc(var(--px) * 16);
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(var(--px) * 360);
  min-height: calc(var(--px) * 560);
  overflow: hidden;
}

/* カード上の作品エリア（仮の色面 or 写真） */
.about__media {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 12);
  height: calc(var(--px) * 230);
  color: var(--navy);
}
.about__media--light { background: var(--light); }
.about__media--navy { background: var(--navy); color: var(--white); }
.about__media--peri { background: rgba(138, 161, 219, .35); }
.about__media--teal { background: rgba(124, 172, 189, .4); }
.about__media-icon {
  width: max(44px, calc(var(--px) * 56));
  height: max(44px, calc(var(--px) * 56));
  transition: transform .6s var(--ease-spring);
}
.about__media-text {
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  letter-spacing: .06em;
}
/* 作例の写真。もとの形は「2列×2段」
   ・--a / --b / --c を付けると、左に2枚・右に縦長1枚（清水さん）
   ・何も付けずに4枚入れると、2枚ずつ2段（Cafreeさん）
   ・about__media--duo … 縦長2枚を横に並べる（Maeda.Nさん） ／ about__media--one … 1枚だけ（ざわちんさん） */
.about__media--photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));   /* 写真の元の大きさで枠が伸びないように */
  gap: calc(var(--px) * 4);
  background: var(--white);
}
.about__media-img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transition: scale .8s var(--ease);
}
.about__media-img--a { grid-area: 1 / 1 / 2 / 2; }
.about__media-img--b { grid-area: 2 / 1 / 3 / 2; }
.about__media-img--c { grid-area: 1 / 2 / 3 / 3; }
.about__media--duo { grid-template-rows: minmax(0, 1fr); }
.about__media--one { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.about__media-img--top { object-position: 50% 0; }      /* 上をそろえる（見出しや上の段が切れないように） */
.about__media-img--face { object-position: 50% 18%; }   /* 人物：顔が切れない位置 */
.about__media-img--left { object-position: 0 50%; }      /* 左をそろえる（左上の番号の丸が、画像の中の文字に重ならないように） */
.about__num {
  position: absolute;
  top: calc(var(--px) * 16);
  left: calc(var(--px) * 16);
  display: grid;
  place-items: center;
  width: max(30px, calc(var(--px) * 34));
  height: max(30px, calc(var(--px) * 34));
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1;
  letter-spacing: .04em;
}
.about__num--right { left: auto; right: calc(var(--px) * 16); }   /* 番号を右上に置く（左上に文字のある画像のカード用） */

/* カードの本文 */
.about__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(var(--px) * 10);
  padding: calc(var(--px) * 24) calc(var(--px) * 26) calc(var(--px) * 26);
}
.about__role-en {
  font-weight: 600;
  font-size: max(10px, calc(var(--px) * 11.5));
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}
.about__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(var(--px) * 8);
  font-weight: 700;
  font-size: max(18px, calc(var(--px) * 22));
  line-height: 1.45;
  letter-spacing: .04em;
}
.about__name.u-en { font-weight: 600; }
.about__name-sub {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12.5));
  letter-spacing: .02em;
  color: var(--slate);
}
.about__name-sub--ja { font-family: var(--font-ja); font-weight: 400; letter-spacing: .01em; }
.about__desc {
  font-size: max(13px, calc(var(--px) * 14));
  line-height: 1.8;
}
.about__credits {
  font-weight: 500;
  font-size: max(11.5px, calc(var(--px) * 12.5));
  line-height: 1.7;
  color: var(--navy);
}
.about__award {
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.7;
  color: var(--slate);
}
/* フォロワー数（ざわちん・Cafree） */
.about__follow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--px) * 3);
  color: var(--navy);
}
.about__follow-num {
  font-weight: 600;
  font-size: max(22px, calc(var(--px) * 28));
  line-height: 1.43;
  letter-spacing: 0;
}
.about__follow-unit { font-weight: 700; font-size: max(12px, calc(var(--px) * 13)); }
.about__follow-label {
  margin-left: calc(var(--px) * 12);
  font-size: max(11px, calc(var(--px) * 12));
  color: var(--slate);
}
/* Instagram → などのリンク */
.about__links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 8);
  margin-top: auto;
  padding-top: calc(var(--px) * 10);
}
.about__link {
  display: inline-flex;
  align-items: center;
  min-height: max(34px, calc(var(--px) * 34));
  padding: 0 max(14px, calc(var(--px) * 16));
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1;
  letter-spacing: .02em;
  white-space: pre;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.about__link { position: relative; }
.about__link::after {                 /* 押せる範囲を上下に広げる（見た目はそのまま・高さ44px以上） */
  content: "";
  position: absolute;
  inset: -5px 0;
}
.about__link--soon { cursor: default; }
@media (hover: hover) {
  a.about__link:hover { background: var(--ink); color: var(--white); }
  .about__card:hover .about__media-icon { transform: scale(1.08); }
  .about__card:hover .about__media-img { scale: 1.05; }
}

/* ------------------------------------------------------------
   会社概要（左：見出し / 右：表）
------------------------------------------------------------ */
.about__company {
  display: grid;
  grid-template-columns: calc(var(--px) * 455) minmax(0, 1fr);
  align-items: start;
  margin-top: calc(var(--px) * 140);
}
.about__company-title {
  margin-top: calc(var(--px) * 23);
  font-size: max(20px, calc(var(--px) * 30));
  line-height: 1.6;
  letter-spacing: .02em;
}
.about__row {
  display: grid;
  grid-template-columns: calc(var(--px) * 200) minmax(0, 1fr);
  align-items: center;
  min-height: calc(var(--px) * 72);
  padding: 8px 0;
  border-bottom: .5px solid var(--about-hair);
}
.about__row:first-child { border-top: .5px solid var(--about-hair); }
.about__row dt {
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 15));
  line-height: 1.45;
  color: var(--slate);
}
.about__row dd {
  margin: 0;
  font-size: max(14px, calc(var(--px) * 15));
  line-height: 1.9;
}
.about__row-sub {                      /* 社名の下のひとこと（「宿とともに、…」） */
  display: block;
  font-size: max(12.5px, calc(var(--px) * 13.5));
  line-height: 1.7;
  color: var(--slate);
}

/* 等倍（dpr1）の画面では 0.5px の線が 1px の濃い線になるので、色を半分にして Figma の見え方に合わせる */
@media (max-resolution: 1.5dppx) {
  .sec-about { --about-hair: rgba(95, 95, 95, .55); }
}

/* ------------------------------------------------------------
   PC でも狭め（901〜1100px）：体制図の文字を詰める
------------------------------------------------------------ */
/* 文中の改行（<br class="about__br">）は、1200px 未満では外して自然に折り返す */
@media (max-width: 1199px) {
  .about__br { display: none; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .about__role { padding-inline: 0; font-size: max(10.5px, calc(var(--px) * 14)); letter-spacing: 0; }
  .about__name { flex-direction: column; align-items: flex-start; }
  /* 代表アカウント：この幅では左の列のほうがずっと長くなるので、「Instagramで見る」は写真のすぐ下に置く（下に離れて浮かないように） */
  .about__posts-link { margin-top: 0; }
}
/* 901〜1000px：代表アカウントの見出しが3行にならないように、少しだけ小さく */
@media (min-width: 901px) and (max-width: 1000px) {
  .about__creator-title { font-size: 18.5px; }
}

/* ------------------------------------------------------------
   SP（900px以下）… 1カラムに組み直す
------------------------------------------------------------ */
@media (max-width: 900px) {
  .sec-about { padding: 64px 0 88px; }

  /* ミッション */
  .about__mission { display: block; }
  .about__label { padding-left: 0; margin-top: 0; }
  .about__mission-body { margin-top: 28px; }
  .about__eyebrow { font-size: 15px; }
  .about__mission-title { margin-top: 4px; white-space: normal; }
  .about__mission-lead { max-width: none; margin-top: 16px; font-size: 15px; line-height: 1.85; }

  /* 代表メッセージ */
  .about__message { display: block; margin-top: 56px; padding-left: 0; }
  .about__portrait { width: min(calc(100% - 22px), 420px); }
  .about__photo { --clip-r: 16px; border-radius: 16px; }
  .about__heart { top: -14px; right: -22px; }
  .about__heart .c-heart { --size: 48px; box-shadow: 0 8px 18px -8px rgba(237, 57, 123, .55); }
  .about__message-body { margin-top: 40px; }
  .about__message-title { margin-top: 14px; font-size: 24px; line-height: 1.6; }
  /* 本文：スマホは番号を小見出しの上に置く（左に出すと、1行の文字数が少なくなりすぎるため）。点線は出さない */
  .about__message-text { margin-top: 28px; font-size: 15.5px; line-height: 1.9; letter-spacing: .02em; }
  .about__chapter { display: block; }
  .about__chapter + .about__chapter { margin-top: 40px; }
  .about__chapter-num { font-size: 13px; line-height: 1.6; }
  .about__chapter-num::after { display: none; }
  .about__chapter-title { margin-top: 2px; font-size: 18.5px; line-height: 1.65; }
  .about__chapter-main > p { margin-top: 12px; }
  .about__chapter-title + p { margin-top: 12px; }
  .about__issues { margin-top: 16px; padding: 18px 18px 18px 16px; border-radius: 14px; font-size: 15px; }
  .about__issues + p { margin-top: 16px; }
  .about__closing { margin-top: 40px; padding: 24px 20px 20px; border-radius: 16px; }
  .about__message-close { font-size: 16px; line-height: 1.9; }
  .about__sign { column-gap: 12px; margin-top: 16px; }
  .about__sign-role { font-size: 12px; }
  .about__sign-name { font-size: 22px; }
  .about__stats { column-gap: 32px; margin-top: 24px; padding-left: 0; }
  .about__stat { --kpi-size: 38px; --kpi-unit: 14px; gap: 2px; }
  .about__stat .c-kpi__value { gap: 3px; }
  .about__stat-pre { font-size: 13px; }
  .about__stat .c-kpi__label { font-size: 11.5px; }

  /* 代表アカウントでのご紹介：説明 → プロフィール → フォロワー数 → 投稿の一例 → 料金 の順に（order で並べ替え） */
  .about__creator {
    --r: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 64px;
    padding: 28px 20px 26px;
  }
  .about__creator-main { display: contents; }
  .about__creator-title { margin-top: 14px; font-size: 18px; line-height: 1.6; }
  .about__creator-text { margin-top: 12px; font-size: 13.5px; }
  .about__profile { gap: 14px; margin-top: 20px; }
  .about__avatar { width: 56px; height: 56px; }
  .about__profile-body { padding-top: 2px; }
  .about__profile-name { font-size: 14px; }
  .about__profile-id { position: relative; margin-top: 2px; font-size: 12px; }
  .about__profile-id::after { content: ""; position: absolute; inset: -14px -8px; }   /* 指で押しやすいように範囲を広げる */
  .about__profile-text { margin-top: 4px; font-size: 12.5px; }

  /* フォロワー数（大きい数字は画面の幅に合わせて伸び縮み：--sp ＝ 幅390で1px） */
  .about__tiles { order: 1; gap: 8px; margin: 22px 0 0; }
  .about__tile { padding: 12px 2px 9px; border-radius: 12px; }
  .about__tile-head { gap: 4px; }
  .about__tile-icon { width: 16px; height: 16px; }
  .about__tile-name { font-size: 10px; letter-spacing: .06em; }
  .about__tile-value { gap: 1px; margin-top: 0; }
  .about__tile-num { font-size: calc(var(--sp) * 16); }
  .about__tile-unit { font-size: max(9px, calc(var(--sp) * 10)); }
  .about__tile--hero,
  .about__tile--total { padding: 16px 8px 14px; border-radius: 14px; }
  .about__tile--total { padding-inline: 4px; }   /* 幅360pxのスマホで「総フォロワー数」が2段に折れないように（中身は中央寄せなので見た目は同じ） */
  .about__tile--hero .about__tile-head,
  .about__tile--total .about__tile-head { gap: 6px; }
  .about__tile--hero .about__tile-icon,
  .about__tile--total .about__tile-icon { width: 18px; height: 18px; }
  .about__tile--hero .about__tile-name { font-size: 10.5px; letter-spacing: .16em; }
  .about__tile--total .about__tile-name { font-size: 11px; letter-spacing: .02em; }
  .about__tile--hero .about__tile-value,
  .about__tile--total .about__tile-value { margin-top: 10px; }
  .about__tile--hero .about__tile-value { gap: 3px; }
  .about__tile--hero .about__tile-num { font-size: calc(var(--sp) * 66); }
  .about__tile--hero .about__tile-unit { font-size: calc(var(--sp) * 19); }
  .about__tile--total .about__tile-value { gap: 2px; padding-bottom: calc(var(--sp) * 3); }
  .about__tile--total .about__tile-num { font-size: calc(var(--sp) * 37); }
  .about__tile--total .about__tile-unit { font-size: calc(var(--sp) * 11); }

  /* 投稿の一例（3列×2段。600px より広い画面では 6枚を横一列に） */
  .about__posts { order: 2; margin-top: 26px; }
  .about__posts-label { column-gap: 10px; font-size: 13.5px; }
  .about__posts-note { font-size: 11px; }
  .about__posts-grid { gap: 6px; margin: 10px 0 0; }
  .about__post { border-radius: 10px; }
  .about__posts-link { margin-top: 12px; }

  .about__price { order: 3; margin-top: 22px; }
  .about__price-tag { min-height: 26px; margin-right: 12px; padding: 0 11px; font-size: 11.5px; }
  .about__price-num { font-size: 26px; }
  .about__price-unit { margin-left: 4px; font-size: 13px; }
  .about__price-note { order: 4; margin-top: 6px; font-size: 11px; line-height: 1.6; }

  /* 体制：見出し → 体制図（担当は3列×2段のまとまりに） */
  .about__team { display: block; margin-top: 72px; }
  .about__team-title { margin-top: 14px; font-size: 22px; line-height: 1.6; }
  .about__team-text { max-width: none; margin-top: 14px; font-size: 14.5px; line-height: 1.9; }
  .about__chart { margin-top: 32px; }
  .about__chart-client { width: 100%; max-width: 340px; min-height: 52px; border-radius: 12px; font-size: 13.5px; }
  .about__chart-director { width: 100%; max-width: 340px; min-height: 54px; font-size: 15.5px; }
  .about__chart-line--1 { height: 26px; }
  .about__chart-line--2 { height: 22px; }
  .about__roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
    padding: 12px;
    border-radius: 18px;
    background: rgba(213, 224, 231, .55);
  }
  .about__roles::before, .about__role::before { display: none; }
  .about__role { gap: 6px; min-height: 88px; padding: 10px 2px; border-radius: 10px; font-size: 12.5px; letter-spacing: 0; }
  .about__role-icon { width: 22px; }
  .about__chart-note { margin-top: 14px; font-size: 12px; line-height: 1.7; }

  /* 提携クリエイター */
  .about__partners { margin-top: 80px; }
  .about__partners-head {
    grid-template-areas:
      "eyebrow eyebrow"
      "title   title"
      "lead    lead"
      "note    nav";
    column-gap: 12px;
  }
  .about__partners-lead { max-width: none; margin-top: 10px; font-size: 14px; line-height: 1.85; }
  .about__partners-eyebrow { font-size: 14px; }
  .about__partners-title { margin-top: 6px; font-size: min(22px, calc((var(--vw, 100vw) - 40px) / 13.5)); line-height: 1.55; }   /* 1行め（13文字）が、幅320pxでも1行に入る大きさ */
  .about__partners-note { margin-top: 14px; font-size: 11px; line-height: 1.6; }
  .about__nav { gap: 10px; margin-top: 14px; }
  .about__nav-btn { width: 44px; height: 44px; }
  .about__nav-btn svg { width: 18px; height: 18px; }
  .about__track { --track-pad: 20px; gap: 14px; margin-top: 12px; }
  .about__card { --r: 16px; flex-basis: min(280px, 76%); min-height: 0; }
  .about__media { height: auto; min-height: 0; aspect-ratio: 360 / 230; gap: 10px; }   /* min-height:0 … 写真カードの枠が写真の高さまで伸びないように */
  .about__media--photos { gap: 3px; }
  .about__media-icon { width: 44px; height: 44px; }
  .about__media-text { font-size: 11px; }
  .about__num { top: 12px; left: 12px; width: 30px; height: 30px; font-size: 11px; }
  .about__num--right { left: auto; right: 12px; }
  .about__card-body { gap: 8px; padding: 18px 20px 22px; }
  .about__role-en { font-size: 10.5px; letter-spacing: .1em; }
  .about__name { column-gap: 8px; font-size: 19px; }
  .about__name-sub { font-size: 11.5px; }
  .about__desc { font-size: 13px; line-height: 1.75; }
  .about__credits { font-size: 11.5px; line-height: 1.65; }
  .about__award { font-size: 11px; }
  .about__follow-num { font-size: 24px; }
  .about__follow-unit { font-size: 12px; }
  .about__follow-label { margin-left: 8px; font-size: 11px; }
  .about__links { gap: 8px; padding-top: 8px; }
  .about__link { min-height: 36px; padding: 0 14px; font-size: 12px; }

  /* 会社概要 */
  .about__company { display: block; margin-top: 80px; }
  .about__company-title { margin-top: 12px; font-size: 22px; }
  .about__table { margin-top: 22px; }
  .about__row { grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; min-height: 0; padding: 14px 0; }
  .about__row dt { font-size: 12.5px; }
  .about__row dd { font-size: 14px; line-height: 1.8; }
}
/* タブレット縦など（600〜900px）：投稿の写真は 6枚を横一列に */
@media (min-width: 600px) and (max-width: 900px) {
  .about__posts-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 480px) {
  /* 見出しは、幅360より狭いスマホでは1行に入る大きさまで少し小さくする（最後の1文字や「。」だけが次の行に落ちないように）。
     13.4 ＝ いちばん長い行の文字数ぶん。見出しの文を長くしたら、この数字を大きくする */
  .about__mission-title { font-size: min(24px, calc((var(--vw, 100vw) - 40px) / 13.4)); }
  .about__message-title { font-size: min(24px, calc((var(--vw, 100vw) - 40px) / 13.4)); }   /* 2行目「選ばれるきっかけをつくる。」が13文字 */
  .about__team-title { font-size: min(22px, calc((var(--vw, 100vw) - 40px) / 13.4)); }
  .about__tile-name { letter-spacing: .05em; }   /* 小さいマスの SNS 名がはみ出さないように */
}
/* とても小さいスマホ（幅350px以下）：上の段の見出し（アイコン＋名前）を少し詰めて、「総フォロワー数」を1段に保つ */
@media (max-width: 350px) {
  .about__tile--hero .about__tile-head,
  .about__tile--total .about__tile-head { gap: 4px; }
  .about__tile--hero .about__tile-icon,
  .about__tile--total .about__tile-icon { width: 16px; height: 16px; }
  .about__tile--total .about__tile-name { font-size: 10px; }
  .about__role { font-size: 11.5px; }   /* 体制図の「エンサー施策」が箱に入りきらず、「策」だけ3行目に落ちるのを防ぐ */
  /* PR投稿の料金：「円（税抜）」だけが2行目に落ちないように */
  .about__price-num { font-size: 22px; }
  .about__price-tag { margin-right: 8px; }
}
/* 体制図の「インフルエンサー施策」：言葉の途中（インフル／エンサー施策）で折れないよう、入る幅では「インフルエンサー／施策」にする。
   この1つだけ、文字をほんの少し小さくして入れている。入らない幅（901〜1199px・374px以下）は、もとの折り方のまま */
.about__role-br2 { display: none; }
@media (min-width: 1200px), (min-width: 375px) and (max-width: 900px) {
  .about__role-br1 { display: none; }
  .about__role-br2 { display: inline; }
  .about__role--long .about__role-name { font-size: .92em; letter-spacing: -.04em; }
}


/* ===== 50-process ===== */
/* ============================================================
   50-process … 支援の進め方（Figma 69:462）
   白い帯（右上・左下が角丸130）
   ・見出し＋リード
   ・進め方の図：スタート時（01・02）→ 毎月くり返す（点線のゾーン：03・04＋戻り矢印）
   ・月次レポート（左の額縁に付く紺パネル）＋ こんな施設さまに
   PCの数値は Figma の座標（セクション上端＝0）を calc(var(--px) * N) で書いています。
============================================================ */
.sec-process {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 0 calc(var(--px) * 130) 0 calc(var(--px) * 130);
  padding: calc(var(--px) * 150) 0 calc(var(--px) * 180);
}

/* ---------- 見出し ---------- */
.process__head { padding-inline: var(--gutter); }
.process__head-row {
  display: flex;
  align-items: flex-start;
  margin-top: calc(var(--px) * 28);
}
.process__title { flex: none; width: calc(var(--px) * 715); }
.process__lead {
  flex: 1;
  margin-top: calc(var(--px) * 44);
  font-weight: 500;
  font-size: max(15px, calc(var(--px) * 18));
  line-height: 1.9;
  letter-spacing: .02em;
}

/* ---------- 進め方の図 ---------- */
.process__flow {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: calc(var(--px) * 70);           /* 見出しの下 → ゾーンの上端（y420） */
  padding-left: var(--gutter);
}
.process__phase--start {
  flex: none;
  width: calc(var(--px) * 626);
  padding-top: calc(var(--px) * 20);          /* ゾーンの見出しと高さをそろえる */
}

/* フェーズの見出し：スタート時（はじめに一度） START ──── */
.process__phase-head {
  display: flex;
  align-items: center;
  height: calc(var(--px) * 22);
  margin-bottom: calc(var(--px) * 20);
  color: var(--navy);
  white-space: nowrap;
}
.process__phase-ja {
  font-weight: 700;
  font-size: max(13px, calc(var(--px) * 15));
  line-height: 1.45;
  letter-spacing: .06em;
}
.process__phase-en {
  margin-left: calc(var(--px) * 12);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1;
  letter-spacing: .2em;
  color: var(--slate);
}
.process__phase-line {
  flex: 1;
  height: 1px;
  margin-left: calc(var(--px) * 14);
  background: var(--hair);
  transform: scaleY(.5);
}
.process__loop-icon {
  width: calc(var(--px) * 18);
  min-width: 14px;
  height: auto;
  margin-right: calc(var(--px) * 8);
  color: var(--warm);
}
/* ゾーンが表示されたら、くるっと1回転 */
.process__zone.is-in .process__loop-icon { animation: process-spin 1.4s var(--ease-out) .8s 1 both; }
@keyframes process-spin { from { transform: rotate(-360deg); } to { transform: none; } }

/* ステップのカード（グレー） */
.process__steps {
  display: flex;
  align-items: stretch;
}
.process__step {
  flex: none;
  width: calc(var(--px) * 284);
  min-height: calc(var(--px) * 300);
  padding: 0 calc(var(--px) * 24) calc(var(--px) * 24);
  border-radius: calc(var(--px) * 16);
  background: var(--bg);
}
.process__illust {
  display: block;
  width: calc(100% + var(--px) * 48);
  height: auto;
  margin-inline: calc(var(--px) * -24);
  aspect-ratio: 284 / 168;
}
.process__step-title {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 12);
  margin-top: calc(var(--px) * 12);
  font-weight: 700;
  font-size: max(15px, calc(var(--px) * 22));   /* 狭いPC（900〜1000px）でも「レポート・改善」が1行に入るように */
  line-height: 1.45;
  letter-spacing: .04em;
}
.process__step-num {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: max(18px, calc(var(--px) * 26));
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--navy);
}
.process__step-text {
  margin-top: calc(var(--px) * 8);
  font-size: max(12.5px, calc(var(--px) * 14));
  line-height: 1.75;
  letter-spacing: .02em;
}
/* PC：説明文の行数がカードごとにちがう（2行と3行）と、4枚のカードの高さがそろわない
   → どのカードも3行ぶんの高さを取ってそろえる（幅1023px以下は 02 が4行になるので、4行ぶん）。
   説明文を長くして4行以上になったら、ここの数字も合わせる */
@media (min-width: 901px) {
  .process__step-text { min-height: calc(1.75em * 3); }
}
@media (min-width: 901px) and (max-width: 1023px) {
  .process__step-text { min-height: calc(1.75em * 4); }
}

/* カードの間の矢印 → */
.process__arrow {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 58);
  padding-top: calc(var(--px) * 77);
  color: var(--navy);
}
.process__arrow svg { width: calc(var(--px) * 32); min-width: 22px; height: auto; }
.process__arrow--join { padding-top: calc(var(--px) * 139); }   /* 02 → 03（ゾーンの外） */

/* 毎月くり返す：点線のゾーン */
.process__zone {
  position: relative;
  flex: none;
  width: calc(var(--px) * 670);
  margin-left: calc(var(--px) * -22);
  padding: calc(var(--px) * 20) calc(var(--px) * 22) calc(var(--px) * 77);
  border-radius: calc(var(--px) * 28);
  background: rgba(213, 224, 231, .28);
}
.process__zone-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.process__zone .process__phase-head { padding-right: calc(var(--px) * 2); }
.process__cycle { position: relative; }

/* 04 → 03 へ戻る矢印（PC：カードの下のU字） */
.process__loop {
  position: absolute;
  top: 100%;
  left: calc(var(--px) * 132);
  width: calc(var(--px) * 362);
  height: calc(var(--px) * 50);
}
.process__loop-pc { display: block; width: 100%; height: 100%; overflow: visible; }
.process__loop-sp { display: none; }
.process__loop-label {
  position: absolute;
  left: 50%;
  top: calc(var(--px) * 31);
  translate: -50% 0;
  display: flex;
  align-items: center;
  height: calc(var(--px) * 30);
  padding: 0 calc(var(--px) * 16);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 14));
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ---------- 月次レポート（紺パネル）＋ こんな施設さまに ---------- */
.process__bottom {
  display: flex;
  align-items: flex-start;
  margin-top: calc(var(--px) * 114);
}
/* 左の額縁に付く紺パネル。1440より広い画面では、左端まで伸ばす */
.process__report {
  --edge-c: calc(var(--px) * 50);
  flex: none;
  width: calc((100% - var(--px) * 1440) / 2 + var(--px) * 845);
  min-height: calc(var(--px) * 600);
  padding: calc(var(--px) * 40) calc(var(--px) * 40) calc(var(--px) * 21) calc((100% - var(--px) * 1440) / 2 + var(--px) * 105);
}
.process__report-inner { width: calc(var(--px) * 700); }
.process__report-sub { color: var(--light); }
.process__report-sub .c-sub__en { color: var(--white); }

/* レポート画面のイメージ（白いカード） */
.process__mock-wrap { margin-top: calc(var(--px) * 29); }
.process__mock {
  padding: calc(var(--px) * 26) calc(var(--px) * 36) calc(var(--px) * 40) calc(var(--px) * 32);
  border-radius: calc(var(--px) * 24);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 calc(var(--px) * 18) calc(var(--px) * 36) calc(var(--px) * -24) rgba(4, 20, 32, .5);
}
.process__mock-title {
  font-weight: 700;
  font-size: max(14px, calc(var(--px) * 18));
  line-height: 1.5;
  letter-spacing: .02em;
}
.process__mock-client {
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 13));
  line-height: 1.5;
  color: var(--slate);
}
.process__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--px) * 16);
  margin-top: calc(var(--px) * 21);
}
.process__kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--px) * 94);
  padding: calc(var(--px) * 13) calc(var(--px) * 20) calc(var(--px) * 12);
  border-radius: calc(var(--px) * 16);
  background: var(--beige);
}
.process__kpi-label {
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 13));
  line-height: 1.5;
  color: var(--slate);
}
.process__kpi-value {
  margin-top: calc(var(--px) * 5);
  font-weight: 700;
  font-size: max(20px, calc(var(--px) * 32));
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
}
.process__kpi-value small { font-size: max(11px, calc(var(--px) * 14)); font-weight: 700; }
.process__kpi-diff {
  position: absolute;
  right: calc(var(--px) * 20);
  bottom: calc(var(--px) * 23);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 14));
  line-height: 1.4;
  color: #3F9F7C;
}
.process__kpi-diff--muted { font-family: var(--font-ja); color: var(--slate); }

/* 数字カードの下：左＝予約数の推移（棒グラフ）／右＝予約経路の内訳。その下に「次月の打ち手」が横いっぱいに入る */
.process__mock-bottom {
  display: grid;
  grid-template-columns: calc(var(--px) * 294) 1fr;
  column-gap: calc(var(--px) * 38);
  align-items: start;
  margin-top: calc(var(--px) * 22);
  padding-left: calc(var(--px) * 16);
}
.process__chart { position: relative; min-height: calc(var(--px) * 128); }   /* 128：右の「予約経路の内訳」と高さをそろえる（棒は下の端にそろう） */
.process__chart-label {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  color: var(--slate);
}
.process__bars {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--px) * 18);
  height: calc(var(--px) * 96);
}
.process__bar {
  flex: none;
  width: calc(var(--px) * 34);
  height: calc(var(--px) * var(--h));
  border-radius: calc(var(--px) * 6);
  background: var(--light);
}
.process__bar--now { background: var(--pink); }
html.js .process__bar[data-reveal] { transition-duration: .9s, .9s, 1.2s, .9s; }

/* 予約経路の内訳：名前｜横の棒｜件数。棒の長さは HTML の --w（0〜100）。自社サイトの行だけピンク */
.process__routes-label {
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  color: var(--slate);
}
.process__routes-list {
  display: grid;
  row-gap: calc(var(--px) * 9);
  margin-top: calc(var(--px) * 12);
}
.process__route {
  display: grid;
  /* 3列目（件数）の幅はどの行も同じにする → まん中の棒の長さが、どの行も同じものさしで比べられる */
  grid-template-columns: max(70px, calc(var(--px) * 86)) minmax(0, 1fr) max(76px, calc(var(--px) * 88));
  column-gap: max(8px, calc(var(--px) * 10));
  align-items: center;
  font-size: max(11px, calc(var(--px) * 12.5));
  line-height: 1.4;
  letter-spacing: .02em;
}
.process__route-name { font-weight: 500; white-space: nowrap; }
.process__route-bar {
  display: block;
  width: calc(var(--w, 50) * 1%);
  height: max(7px, calc(var(--px) * 9));
  border-radius: 999px;
  background: var(--light);
}
.process__route--own .process__route-bar { background: var(--pink); }
.process__route-num {
  min-width: 2.2em;
  font-weight: 700;
  font-size: max(12px, calc(var(--px) * 14));
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}
.process__route-num small { font-weight: 500; font-size: max(10.5px, calc(var(--px) * 11.5)); }
.process__route--own .process__route-num { color: var(--pink); }
.process__route--own .process__route-num small { color: var(--ink); }

/* 次月の打ち手（数字カード・グラフの下に、横いっぱいで入る） */
.process__next {
  margin-top: calc(var(--px) * 22);
  padding-top: calc(var(--px) * 18);
  border-top: 1px solid rgba(95, 120, 136, .2);
}
.process__next-title {
  font-weight: 700;
  font-size: max(12px, calc(var(--px) * 14));
  line-height: 1.45;
  letter-spacing: .02em;
}
.process__next-lead {                 /* 見出しの下のひとこと（何の一覧かを説明） */
  margin-top: calc(var(--px) * 3);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--slate);
}
/* 打ち手の行：左にタグ（どこの打ち手か）、右にやること。タグの幅をそろえて、文の頭を一列に */
.process__next-list {
  display: grid;
  row-gap: calc(var(--px) * 8);
  margin-top: calc(var(--px) * 12);
  font-size: max(11px, calc(var(--px) * 13));
  line-height: 1.5;
  letter-spacing: .02em;
}
.process__next-list li {
  display: grid;
  grid-template-columns: max(60px, calc(var(--px) * 72)) minmax(0, 1fr);
  column-gap: max(8px, calc(var(--px) * 10));
  align-items: center;
}
.process__next-tag {
  display: grid;
  place-items: center;
  min-height: max(20px, calc(var(--px) * 22));
  border-radius: 999px;
  background: var(--light);
  color: var(--navy);
  font-weight: 700;
  font-size: max(10px, calc(var(--px) * 11));
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.process__next-text { font-weight: 500; }
.process__report-note {
  margin-top: calc(var(--px) * 12);
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--light);
}

/* こんな施設さまに */
.process__for {
  flex: none;
  width: calc(var(--px) * 470);
  margin-left: calc(var(--px) * 60);
  padding-top: calc(var(--px) * 40);
}
.process__for-list { margin-top: calc(var(--px) * 29); border-bottom: .5px solid var(--hair); }
.process__for-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--px) * 72);
  padding: calc(var(--px) * 10) 0 calc(var(--px) * 10) calc(var(--px) * 20);
  font-weight: 500;
  font-size: max(15px, calc(var(--px) * 17));
  line-height: 1.5;
  letter-spacing: .02em;
}
.process__for-label { min-width: 0; }   /* 文のかたまり（この中で、言葉の切れ目ごとに折り返す） */
.process__for-item::before {       /* 上の区切り線（表示のときに左から伸びる） */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: .5px solid var(--hair);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) calc(var(--delay, 0s) + .1s);
}
.process__for-item::after {        /* 紺の四角 */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--navy);
}
html.js .process__for-item:not(.is-in)::before { transform: scaleX(0); }
html.js:not(.is-ready) .process__for-item::before { animation: c-failsafe 0s linear 3s forwards; }
.process__for-text {
  margin-top: calc(var(--px) * 29);
  font-size: max(14px, calc(var(--px) * 15));
  line-height: 1.9;
  letter-spacing: .02em;
}

/* ※ ステップのカードは「押せるもの」ではないので、マウスをのせても浮かない・影も付かない・指のカーソルにもならない。
     （浮き上がるのはリンクやボタンだけ、というサイト全体のきまり。ここには :hover を書かない） */

/* ============================================================
   ステップのイラストの動き（01〜04）
   カードそのものは動かない。動くのは中のイラストだけで、次の2種類。

   ① 登場 … カード（.process__step）が画面に入って .is-in が付いたら、中の部品が順番に出る（1回だけ）。
        順番は HTML の style="--i:0" の数字。カード自体の遅れ（--delay）のあとに始まる
   ② ひとりでに動く … 画面に見えている間、main.js がカードに「動いてよい」の合図（.is-play）を付けて、しばらくして外す。
        これを十数秒おきにくり返す。合図のたびに、イラストが1回だけ静かに動いて、もとの絵にぴったり戻る。
        ・PC（4枚が横に並ぶ）… 01 → 02 → 03 → 04 の順に、1枚ずつ。同時に動くのは1枚だけ。
          ひと回りしたら、しばらく止まって休み、また 01 から（にぎやかにしない）
        ・スマホ・タブレット（縦に並ぶ）… 画面に入ったカードから動く（下のカードを待たせない）。
          となり合う2枚（01と02、03と04）は、1秒ずらして続けて動く
        ・いつ動くか … 順番と間隔 ＝ このファイルの --play-wait（「② ひとりでに動く」の最初）
                       始まりとくり返し ＝ HTML の data-play-〜（50-process.html のコメント）
        ・どう動くか（長さ・大きさ）… このファイルの「② ひとりでに動く（.is-play）」

   きまり
   ・マウスをのせても、タップしても、何も起きない
   ・動かすのは transform と opacity だけ（ほかは、ハートの塗り fill-opacity と、main.js が線を描く stroke-dashoffset）。
     大きさ・位置の計算には影響しないので、まわりの文字や余白は動かない
   ・①は中の図形に、②は外側の <g>（または別の部品）に付けて、要素を分けてある → 2つの動きがぶつからない
   ・隠れるのは「①のアニメーションの最中」だけ（@keyframes の from）。
     .is-in が付く前、JSが動かないとき、?static、動きを減らす設定では、最初から完成形で見える
   ・②の @keyframes は、始まり（0%）と終わり（100%）が必ず「もとの絵」

   ◎ 速さ：animation の1つめの秒数＝動く長さ ／ calc( ) の中の秒数＝そのカードの中での、部品1つずつのずれ
   ◎ 大きさ：各 @keyframes の中の数字（px や scale。横にコメントあり）
   ◎ 順番・間隔：--play-wait（「② ひとりでに動く」の最初）
   ◎ ②の動きを長くしたら、HTML の data-play-duration も直す（決め方は、--play-wait のところのコメント）
============================================================ */
/* ②の「行って戻る」動き用のカーブ：ゆっくり動き出して、ゆっくり止まる（main.js の「線を描く」と同じ）。
   ①の登場は、サイト共通の --ease / --ease-out を使う */
.process__illust { --process-io: cubic-bezier(.65, 0, .35, 1); }

/* 基準点：SVGの中の部品は「自分の箱」を基準に伸び縮みさせる */
.process__col,
.process__col-bar { transform-box: fill-box; transform-origin: 50% 100%; }     /* 棒：下の中央から */
.process__target,
.process__ring,
.process__dot,
.process__tick,
.process__tick-mark,
.process__like,
.process__heart,
.process__cell,
.process__cell-lit { transform-box: fill-box; transform-origin: 50% 50%; }     /* 丸・チェック・ハート・マス：中心から */

/* 線を描き始める目印（HTML の「見えない四角」）
   main.js の「線を描く」（data-draw）は、その線が画面の下から12%より上に入ったときに始まる。
   線だけを目印にすると、カードが登場しても、線だけしばらく描かれないことがある（点や棒は出ているのに、折れ線がない）。
   そこで、イラスト全体をおおう見えない四角を、線といっしょに data-draw の中に入れてある
   → カードが登場したら、かならず線も描かれ始める。
   ・四角は、イラストより上に少しだけ（24）はみ出させてある。カードが登場する位置と、線を描き始める位置の差をうめるため
     → そのはみ出した分も数えてもらえるように、イラストの overflow を visible にしている（はみ出すのは見えない四角だけ）
   ・四角そのものは、塗りも線もないので見えない。main.js が付ける「描く動き」も、この四角には不要なので止めてある */
.process__illust { overflow: visible; }
.process__draw-area { fill: none; stroke: none; transition: none !important; }

/* ---------- ① 登場（.is-in）---------- */
/* 01・04 棒グラフ：左から順に、下から伸びる */
html.js .process__step.is-in .process__col-bar {
  animation: process-in-grow .9s var(--ease-out) calc(var(--delay, 0s) + .25s + var(--i, 0) * .09s) backwards;
}
/* 04 今月（青緑）の棒は、ひと呼吸おいて最後にゆっくり。そのあと矢印が描かれる（data-draw） */
html.js .process__step.is-in .process__col--now .process__col-bar {
  animation-duration: 1.2s;
  animation-delay: calc(var(--delay, 0s) + .8s);
}
/* 01 折れ線の点：左から順に */
html.js .process__step.is-in .process__dot {
  animation: process-in-pop .6s var(--ease) calc(var(--delay, 0s) + .7s + var(--i, 0) * .2s) backwards;
}
/* 01 虫めがね：最後に、右下からすっと入る */
html.js .process__step.is-in .process__lens {
  animation: process-in-lens 1.2s var(--ease-out) calc(var(--delay, 0s) + 1.1s) backwards;
}
/* 02 的：外の輪から順に、ふわっと広がっておさまる */
html.js .process__step.is-in .process__ring {
  animation: process-in-ring 1s var(--ease-out) calc(var(--delay, 0s) + .2s + var(--i, 0) * .12s) backwards;
}
/* 02 矢じり：線（data-draw）が的に届くころに出る */
html.js .process__step.is-in .process__dart-head {
  animation: process-in-fade .5s var(--ease) calc(var(--delay, 0s) + 1.05s) backwards;
}
/* 02 チップ：上から順に右から入り、少しおくれてチェックが入る */
html.js .process__step.is-in .process__chip {
  animation: process-in-slide .8s var(--ease) calc(var(--delay, 0s) + .5s + var(--i, 0) * .16s) backwards;
}
html.js .process__step.is-in .process__tick {
  animation: process-in-pop .5s var(--ease-out) calc(var(--delay, 0s) + 1s + var(--i, 0) * .16s) backwards;
}
/* 03 投稿画面 → カレンダー：下からふわっと */
html.js .process__step.is-in .process__post,
html.js .process__step.is-in .process__calendar {
  animation: process-in-rise .9s var(--ease) calc(var(--delay, 0s) + .2s) backwards;
}
html.js .process__step.is-in .process__calendar { animation-delay: calc(var(--delay, 0s) + .4s); }
/* 03 ハート → カレンダーのマス（左上から順に） */
html.js .process__step.is-in .process__like {
  animation: process-in-pop .6s var(--ease-out) calc(var(--delay, 0s) + .95s) backwards;
}
html.js .process__step.is-in .process__cell {
  animation: process-in-pop .5s var(--ease) calc(var(--delay, 0s) + .85s + var(--i, 0) * .05s) backwards;
}
/* 登場の始まりの形（終わりは、もとの絵のまま）。小さな部品は、はねずに、ふわっと出す */
@keyframes process-in-grow  { from { transform: scaleY(0); } }
@keyframes process-in-pop   { from { opacity: 0; transform: scale(.6); } }
@keyframes process-in-ring  { from { opacity: 0; transform: scale(.8); } }
@keyframes process-in-fade  { from { opacity: 0; } }
@keyframes process-in-slide { from { opacity: 0; transform: translate(10px, 0); } }
@keyframes process-in-rise  { from { opacity: 0; transform: translate(0, 12px); } }
@keyframes process-in-lens  { from { opacity: 0; transform: translate(16px, 10px); } }

/* ---------- ② ひとりでに動く（.is-play）：1回だけ静かに動いて、もとの絵に戻る ----------
   どのカードも、いちばん遅い動きが 2.2秒以内に終わるようにしてある */

/* いつ動き出すか ＝ 順番と間隔（--play-wait）
   main.js が出す合図（.is-play）は、「そのカードが画面にしっかり入ってから」数えて出る。
   HTML の data-play-〜 は4枚とも同じ数字なので、4枚が横に並ぶ PC では、合図も4枚同時。
   合図のあと何秒待って動き出すかを、カードごとに --play-wait で決めている。

   ・PC（4枚が横に並ぶ）：1 → 3.2 → 5.4 → 7.6秒
       2.2秒おき ＝ 前のカードが止まってから、次が動き出す。
       01 の「1秒」は、登場の動きがすっかり終わってから、ひと呼吸おくための待ち
   ◎ 間隔を変える → 下の4つの数字の差。2.2秒より短くすると、2枚が同時に動く
   ◎ いちばん大きい --play-wait（04 の 7.6）＋ 04 の動き（2.1秒）＝ 9.7秒。
      HTML の data-play-duration（合図を出しておく時間）は、これより少し長くしておく（いまは 10）。
      短いと、04 が動いている途中で止まってしまう */
.process__step--01 { --play-wait: 1s; }
.process__step--02 { --play-wait: 3.2s; }
.process__step--03 { --play-wait: 5.4s; }
.process__step--04 { --play-wait: 7.6s; }
/* ・スマホ・タブレット（カードが縦に並ぶ）：画面に入るのは1〜2枚ずつ。
       下のカードを長く待たせると、動く前に通り過ぎてしまうので、01 から順番に、とはしない。
       画面に入ったカードから動く。01・03 は待たずに、02・04 は 1秒あとに
       （となりのカードと同時に入ってきても、動き出しがそろわないように） */
@media (max-width: 900px) {
  .process__step--01, .process__step--03 { --play-wait: 0s; }
  .process__step--02, .process__step--04 { --play-wait: 1s; }
}

/* 01 現状分析：虫めがねがグラフをのぞきに行き、少し止まって、戻る。
   のぞかれた棒が、右から順にほんの少しだけ伸びて戻る（棒は 1.7秒まで、虫めがねは 2.2秒で終わる） */
html.js .process__step--01.is-play .process__lens-move {
  animation: process-play-lens 2.2s var(--process-io) var(--play-wait, 0s);
}
html.js .process__step--01.is-play .process__col {
  animation: process-play-breathe 1s var(--process-io) calc(var(--play-wait, 0s) + .3s + (4 - var(--i, 0)) * .1s);
}
@keyframes process-play-lens {
  0%, 100% { transform: translate(0, 0); }
  44%, 56% { transform: translate(-60px, -22px); }      /* 行き先（左へ60・上へ22）。44〜56%の間は止まっている */
}
@keyframes process-play-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.05); }                       /* 棒が5%だけ高くなる */
}

/* 02 KPI設計：矢が少し引いて、もう一度まん中へ → 的がふわっと応える → チェックが上から1つずつ、すっと消えて入り直す
   （いちばん遅い動きは 1.95秒で終わる） */
html.js .process__step--02.is-play .process__dart {
  animation: process-play-dart 1.3s var(--process-io) var(--play-wait, 0s);
}
html.js .process__step--02.is-play .process__target {
  animation: process-play-pulse 1s var(--process-io) calc(var(--play-wait, 0s) + .85s);
}
html.js .process__step--02.is-play .process__tick-mark {
  animation: process-play-tick .9s var(--process-io) calc(var(--play-wait, 0s) + .45s + var(--i, 0) * .3s);
}
@keyframes process-play-dart {
  0%, 100% { transform: translate(0, 0); }
  36% { transform: translate(6px, -6px); }               /* 右上へ6ずつ引く */
}
@keyframes process-play-pulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.035); }                       /* 的が3.5%だけ大きくなる */
}
@keyframes process-play-tick {
  0%, 100% { opacity: 1; transform: scale(1); }
  30%, 40% { opacity: 0; transform: scale(.7); }         /* すっと消えて、少し間をおいて、ふわっと入り直す */
}

/* 03 実行：ハートが1回やわらかく脈打ち（塗りがふっと入って戻る）→ カレンダーの色つきのマスが、1つずつ順にともり直す
   （いちばん遅い動きは 2.05秒で終わる） */
html.js .process__step--03.is-play .process__heart {
  animation: process-play-heart 1.9s var(--process-io) var(--play-wait, 0s);
}
html.js .process__step--03.is-play .process__cell-lit {
  animation: process-play-cell .8s var(--process-io) calc(var(--play-wait, 0s) + .35s + var(--k, 0) * .18s);
}
@keyframes process-play-heart {
  0% { transform: scale(1); fill-opacity: 0; }
  20% { transform: scale(1.18); fill-opacity: 1; }       /* ハートが18%だけ大きくなり、塗りが入る */
  44%, 70% { transform: scale(1); fill-opacity: 1; }
  100% { transform: scale(1); fill-opacity: 0; }         /* ふだんの「線だけ」に戻る */
}
@keyframes process-play-cell {
  0%, 100% { opacity: 1; transform: scale(1); }
  40% { opacity: .4; transform: scale(.92); }            /* いったん薄く・少し小さくなって、ふわっと戻る */
}

/* 04 レポート・改善：棒が左から順に、少し沈んで伸び直す。今月の棒は最後に、ほんの少し高く伸びてから戻る。
   矢印も右上へすっと動いて戻る（いちばん遅い動きは 2.1秒で終わる） */
html.js .process__step--04.is-play .process__col {
  animation: process-play-regrow 1.1s var(--process-io) calc(var(--play-wait, 0s) + var(--i, 0) * .11s);
}
html.js .process__step--04.is-play .process__col--now {
  animation: process-play-lift 1.6s var(--process-io) calc(var(--play-wait, 0s) + .44s);
}
html.js .process__step--04.is-play .process__trend {
  animation: process-play-nudge 1.3s var(--process-io) calc(var(--play-wait, 0s) + .8s);
}
@keyframes process-play-regrow {
  0%, 100% { transform: scaleY(1); }
  36% { transform: scaleY(.88); }                        /* 12%だけ低くなって、伸び直す */
}
@keyframes process-play-lift {
  0%, 100% { transform: scaleY(1); }
  24% { transform: scaleY(.88); }
  62% { transform: scaleY(1.04); }                       /* 今月の棒だけ、4%高く伸びてから戻る */
}
@keyframes process-play-nudge {
  0%, 100% { transform: translate(0, 0); }
  45% { transform: translate(3.5px, -2px); }             /* 矢印の向きに、ほんの少し */
}

/* 動きを減らす設定では回転しない。イラストも動かさず、完成形のまま見せる（①も②も止まる） */
@media (prefers-reduced-motion: reduce) {
  .process__zone.is-in .process__loop-icon { animation: none; }
  .process__for-item::before { transition: none; }
  .process__illust * { animation: none !important; }
}
html.is-reduced .process__for-item::before { transition: none; }
html.is-reduced .process__illust *,
html.is-static .process__illust * { animation: none !important; }

/* ============================================================
   SP（900px以下）… 図は縦の流れに。毎月のゾーンは 03 ⇅ 04 を縦に、戻り矢印は右側
============================================================ */
@media (max-width: 900px) {
  .sec-process {
    border-radius: 0 48px 0 48px;
    padding: 72px 0 88px;
  }
  .process__head-row { display: block; margin-top: 16px; }
  .process__title { width: auto; }
  .process__lead { margin-top: 18px; font-size: 15px; line-height: 1.85; }

  .process__flow {
    display: block;
    margin-top: 44px;
    padding-inline: var(--gutter);
  }
  .process__phase--start { width: auto; padding-top: 0; }
  .process__phase-head { height: auto; margin-bottom: 14px; }
  .process__phase-ja { font-size: 14px; letter-spacing: .04em; }
  .process__phase-en { margin-left: 10px; font-size: 11px; }
  .process__phase-line { margin-left: 12px; }
  .process__loop-icon { width: 17px; margin-right: 7px; }

  .process__steps { display: block; }
  .process__step {
    width: auto;
    min-height: 0;
    padding: 12px 20px 22px;
    border-radius: 16px;
  }
  .process__illust {
    width: 100%;
    height: 132px;
    margin-inline: 0;
    aspect-ratio: auto;
  }
  .process__step-title { gap: 10px; margin-top: 8px; font-size: 19px; }
  .process__step-num { font-size: 23px; }
  .process__step-text { margin-top: 4px; font-size: 14px; line-height: 1.8; }

  /* 矢印は下向きに */
  .process__arrow {
    width: auto;
    height: 44px;
    padding-top: 0;
    align-items: center;
  }
  .process__arrow svg { width: 24px; min-width: 0; rotate: 90deg; }
  .process__arrow--join { padding-top: 0; height: 52px; }

  /* 毎月のゾーン */
  .process__zone {
    width: auto;
    margin: 0 -8px;
    padding: 18px 14px 20px;
    border: 1px dashed rgba(26, 58, 82, .5);
    border-radius: 22px;
  }
  .process__zone-line { visibility: hidden; }     /* PC用の点線の枠は使わない（上の border の点線が代わり） */
  /* JSが読み込めなかったときの保険（00-base.css：3秒後に全部見せる）で、この枠まで出てきて点線が二重にならないように */
  html.js:not(.is-ready) .process__zone .process__zone-line { animation: none; }
  .process__zone .process__phase-head { padding-right: 0; }

  /* 03 と 04 を同じ高さにして、右に戻り矢印のスペース */
  .process__cycle { padding-right: 40px; }
  .process__steps--loop {
    display: grid;
    grid-template-rows: 1fr 44px 1fr;
  }
  .process__loop {
    top: calc((100% - 44px) / 4);
    bottom: calc((100% - 44px) / 4);
    left: auto;
    right: 0;
    width: 40px;
    height: auto;
  }
  .process__loop-pc { display: none; }
  /* コの字の線（04の右 → 上へ → 03の右へ戻る）
     data-draw の clip-path で矢じりが切れないよう、箱は線より少し大きくして、線は ::after で描く */
  .process__loop-sp {
    position: absolute;
    inset: -8px 10px -2px -6px;
    display: block;
  }
  .process__loop-sp::after {
    content: "";
    position: absolute;
    inset: 8px 2px 2px 6px;
    border: 1.5px solid var(--navy);
    border-left: 0;
    border-radius: 0 14px 14px 0;
  }
  .process__loop-sp::before {        /* 03 に向かう矢じり */
    content: "";
    position: absolute;
    top: 2.5px;
    left: 6px;
    width: 9px;
    height: 9px;
    border-left: 1.5px solid var(--navy);
    border-bottom: 1.5px solid var(--navy);
    transform: rotate(45deg);
    transform-origin: center;
  }
  .process__loop-label {
    left: auto;
    right: 12px;
    top: 50%;
    translate: 50% -50%;
    height: auto;
    padding: 12px 5px;
    writing-mode: vertical-rl;
    font-size: 12px;
    letter-spacing: .12em;
    line-height: 1;
    background: var(--white);
    border: 1px solid rgba(26, 58, 82, .12);
  }

  /* 月次レポート：左の額縁に付いたまま、幅いっぱいに近く */
  .process__bottom { display: block; margin-top: 64px; }
  .process__report {
    width: calc(100% - 14px);
    min-height: 0;
    padding: 30px 16px 18px calc(var(--frame) + 20px);
  }
  .process__report-inner { width: auto; }
  .process__mock-wrap { margin-top: 18px; }
  .process__mock { padding: 20px 16px 22px; border-radius: 18px; }
  .process__mock-title { font-size: 15px; }
  .process__mock-client { font-size: 11.5px; }
  .process__kpis { gap: 8px; margin-top: 14px; }
  .process__kpi { min-height: 0; padding: 10px 12px 11px; border-radius: 12px; }
  .process__kpi-label { font-size: 11px; padding-right: 3.2em; }
  /* margin-top: auto … 「プロフィール／アクセス」のようにラベルが2行になるカードがあっても、横に並ぶ2枚で数字の高さがそろう */
  .process__kpi-value { margin-top: auto; padding-top: 4px; font-size: 23px; }
  .process__kpi-value small { font-size: 11px; }
  .process__kpi-diff { top: 10px; right: 10px; bottom: auto; font-size: 11px; }
  .process__mock-bottom {
    display: block;
    margin-top: 18px;
    padding-left: 0;
  }
  .process__chart { min-height: 98px; }
  .process__chart-label { font-size: 11px; }
  .process__bars {
    gap: 10px;
    height: 80px;
  }
  .process__bar { width: 26px; height: calc(var(--h) * .8px); border-radius: 5px; }
  .process__routes { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(95, 120, 136, .2); }
  .process__routes-label { font-size: 11px; }
  .process__routes-list { row-gap: 8px; margin-top: 10px; }
  .process__route { grid-template-columns: 78px minmax(0, 1fr) 80px; column-gap: 8px; font-size: 12px; }
  .process__route-bar { height: 8px; }
  .process__route-num { font-size: 13px; }
  .process__route-num small { font-size: 11px; }
  .process__next { margin-top: 16px; padding-top: 14px; }
  .process__next-title { font-size: 13px; }
  .process__next-lead { margin-top: 2px; font-size: 11.5px; }
  .process__next-list { row-gap: 7px; margin-top: 10px; font-size: 12.5px; }
  .process__next-list li { grid-template-columns: 66px minmax(0, 1fr); column-gap: 9px; }
  .process__next-tag { min-height: 21px; font-size: 10.5px; }
  .process__report-note { margin-top: 10px; font-size: 11px; }

  .process__for {
    width: auto;
    margin: 0;
    padding: 48px var(--gutter) 0;
  }
  .process__for-list { margin-top: 16px; }
  .process__for-item { min-height: 58px; padding: 8px 0 8px 18px; font-size: 15px; }   /* 上下の8px：3行になる項目が、区切り線にくっつかないように */
  .process__for-text { margin-top: 18px; font-size: 14px; }
}
/* タブレット（600〜900px）：カードはイラストと文を横に並べる */
@media (min-width: 600px) and (max-width: 900px) {
  .process__step {
    display: grid;
    grid-template-columns: minmax(0, 46%) 1fr;
    grid-template-rows: 1fr auto 1fr;
    column-gap: 24px;
    align-items: center;
    padding: 14px 28px 14px 16px;
  }
  .process__illust { grid-row: 1 / 4; height: auto; aspect-ratio: 284 / 168; }
  .process__step-title { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
  .process__step-text { grid-column: 2; grid-row: 2; align-self: start; }
}
@media (max-width: 480px) {
  .process__illust { height: 118px; }
  /* 幅320前後：見出しの2行目「数字で改善しつづける。」（11文字）が入りきらず、「る。」や「。」だけ次の行に落ちるのを防ぐ。
     11.4 ＝ その行の文字数ぶん（見出しの文を長くしたら、この数字を大きくする） */
  .process__title { font-size: min(25px, calc((var(--vw, 100vw) - 40px) / 11.4)); }
}
@media (max-width: 359px) {
  /* レポート見本の数字カード：ラベル（「自社予約比率」「OTA手数料」）が右上の「+6pt」をよけて2行に折れるのを防ぐ */
  .process__kpi { padding-inline: 10px; }
  .process__kpi-label { font-size: 10px; letter-spacing: 0; padding-right: 2.9em; }
}
/* とても小さいスマホ（幅339px以下）：レポート見本の「フォロワー数」が、右上の「+3.2%」にふれないよう、内側の余白を少し詰める */
@media (max-width: 339px) {
  .process__mock { padding-inline: 12px; }
  .process__kpi { padding-inline: 8px; }
  .process__kpi-diff { right: 8px; }
}
/* 狭いPC（幅901〜1099px）：レポート見本の「予約経路の内訳」の棒が、点のように短くなる
   → 左のグラフの列を少し狭くして、棒の列を広げる（棒の長さの比は、件数どおりのまま） */
@media (min-width: 901px) and (max-width: 1099px) {
  .process__mock-bottom { grid-template-columns: calc(var(--px) * 244) 1fr; column-gap: calc(var(--px) * 26); }
  .process__bars { gap: calc(var(--px) * 8); }
  .process__route { grid-template-columns: 66px minmax(0, 1fr) 62px; column-gap: 6px; }
}


/* ===== 60-price ===== */
/* ============================================================
   60-price … 料金（Figma 69:539）
   背景は --bg（ページの色）。上は「支援の進め方」の左下の角丸、下は「よくある質問」の右上の角丸。
   ・SNS運用代行：プランカード3枚（SPは横スクロール）
   ・全プラン共通（アイコン5つ）
   ・そのほかのサービス 4枚
   ・複数施設・グループ運営の方へ（紺の帯）＋ 注記
   PCの数値は Figma の座標（セクション上端 = Figma の y70）を calc(var(--px) * N) で書いています。
============================================================ */
.sec-price {
  position: relative;
  padding: calc(var(--px) * 80) 0 calc(var(--px) * 93);   /* 下：注記の下端 → FAQ の上端（Figma y1640） */
}

/* 小見出し（SNS運用代行 / そのほかのサービス） */
.price__h3 {
  font-weight: 700;
  font-size: max(18px, calc(var(--px) * 22));
  line-height: 1.45;
  letter-spacing: .02em;
}
.price__plans-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: calc(var(--px) * 51);
  row-gap: 4px;
  margin-top: calc(var(--px) * 54);
}
.price__plans-note {
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--slate);
}

/* ---------- プランカード ---------- */
.price__plans { margin-top: calc(var(--px) * 18); }
.price__plans-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--px) * 23.5);
}
.price__plan {
  --r: calc(var(--px) * 16);
  display: flex;
  flex-direction: column;
  min-height: calc(var(--px) * 462);
  padding: calc(var(--px) * 31) calc(var(--px) * 36) calc(var(--px) * 22);
}
.price__plan--pick::after {        /* おすすめ：紺の枠（ホバーの影と重ならないよう疑似要素で） */
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--navy);
  border-radius: inherit;
  pointer-events: none;
}
.price__plan-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.6;
  letter-spacing: .2em;
  color: var(--slate);
}
.price__plan-name {
  margin-top: calc(var(--px) * 5);
  font-weight: 700;
  font-size: max(17px, calc(var(--px) * 20));
  line-height: 1.45;
  letter-spacing: .02em;
}
.price__plan-badge {
  position: absolute;
  top: calc(var(--px) * 32);
  right: calc(var(--px) * 37);
  display: grid;
  place-items: center;
  height: calc(var(--px) * 28);
  min-height: 24px;
  padding: 0 calc(var(--px) * 12);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--warm);
  color: var(--white);
  font-weight: 700;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1;
  letter-spacing: .02em;
}
.price__plan-price {
  display: flex;
  align-items: baseline;
  margin-top: calc(var(--px) * 17);
  color: var(--navy);
  white-space: nowrap;
}
.price__plan-per {
  margin-right: calc(var(--px) * 8);
  font-size: max(12px, calc(var(--px) * 13));
  letter-spacing: .02em;
  color: var(--ink);
}
.price__plan-num {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: max(34px, calc(var(--px) * 46));
  line-height: 1.43;
  letter-spacing: 0;
}
.price__plan-yen {
  margin-left: calc(var(--px) * 4);
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 15));
}
.price__plan-rows {
  margin: calc(var(--px) * 18) 0 calc(var(--px) * 10);
  padding-top: calc(var(--px) * 12);
  border-top: .5px solid var(--hair);
}
.price__plan-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: calc(var(--px) * 8) 0;
}
.price__plan-rows dt {
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 14));
  line-height: 1.5;
  color: var(--slate);
}
.price__plan-rows dd {
  margin: 0;
  font-weight: 500;
  font-size: max(14px, calc(var(--px) * 15));
  line-height: 1.5;
  text-align: right;
}
.price__plan-for {
  margin: auto calc(var(--px) * -12) 0;       /* 下にそろえる／カードの内側 24px */
  padding: calc(var(--px) * 16) calc(var(--px) * 18) calc(var(--px) * 20);
  border-radius: calc(var(--px) * 12);
  background: var(--bg);
}
.price__plan-for-title {
  font-weight: 700;
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--navy);
}
.price__checks { margin-top: calc(var(--px) * 9); }
.price__checks li {
  position: relative;
  padding-left: calc(var(--px) * 22);
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 14));
  line-height: 1.5;
  letter-spacing: .02em;
}
.price__checks li + li { margin-top: calc(var(--px) * 9); }
.price__checks li::before {       /* ✓ */
  content: "";
  position: absolute;
  left: 0;
  top: calc(.75em - var(--px) * 7);
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 14);
  min-width: 12px;
  min-height: 12px;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3.1 2.8 5.9-6.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3.1 2.8 5.9-6.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- アイコン（グレーの丸） ---------- */
.price__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--px) * 44);
  height: calc(var(--px) * 44);
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--navy);
}
.price__icon svg { width: calc(var(--px) * 24); min-width: 20px; height: auto; }
.price__icon--l { width: calc(var(--px) * 52); height: calc(var(--px) * 52); min-width: 42px; min-height: 42px; }

/* ---------- 全プラン共通 ----------
   3つのプランすべてに付く内容なので、白いプランカードの下で目立つように、紺の面に白い文字にしている。
   白いカードに戻すときは、下の「紺の面」の3行と、.price__common の中の色の指定（tag・icon・区切り線）を消す */
.price__common {
  --r: calc(var(--px) * 16);
  display: flex;
  align-items: flex-start;
  min-height: calc(var(--px) * 156);
  margin-top: calc(var(--px) * 20);
  padding: calc(var(--px) * 30) calc(var(--px) * 35) calc(var(--px) * 14) calc(var(--px) * 40);
}
.c-card.price__common {            /* 紺の面（.c-card の白より優先させるため、クラスを2つ重ねて書く） */
  background: var(--navy);
  color: var(--white);
}
.price__common .price__icon { background: var(--white); }   /* アイコンの丸は白（中の線は紺のまま） */
.price__common-head { flex: none; width: calc(var(--px) * 335); padding-top: calc(var(--px) * 6); }
.price__common-tag {
  display: grid;                  /* inline だと行の高さぶん下にずれるので block で */
  width: fit-content;
  place-items: center;
  height: calc(var(--px) * 30);
  min-height: 26px;
  padding: 0 calc(var(--px) * 16);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1;
  letter-spacing: .02em;
}
.price__common-title {
  margin-top: calc(var(--px) * 12);
  font-weight: 700;
  font-size: max(18px, calc(var(--px) * 25));
  line-height: 1.5;
  letter-spacing: .02em;
}
.price__common-list {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.1fr 1.1fr 1fr;   /* 名前の長い2〜4つめを少し広く（「Instagram・TikTok運用」が区切り線にふれないように） */
}
.price__common-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 16);
  padding-inline: max(8px, calc(var(--px) * 8));   /* 文字が区切り線にふれないように */
  text-align: center;
}
.price__common-item + .price__common-item::before {   /* 縦の区切り線 */
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--px) * 4);
  height: calc(var(--px) * 88);
  border-left: 1px solid rgba(255, 255, 255, .55);
  transform: scaleX(.5);
  transform-origin: left;
}
.price__common-name {
  font-weight: 700;
  font-size: max(12px, calc(var(--px) * 15));
  line-height: 1.45;
  letter-spacing: .02em;
}
/* 1200px以上は1行に。それより狭いPCでは文字の最小12pxが効いて枠からはみ出すので、<wbr> で折り返す */
@media (min-width: 1200px) {
  .price__common-name { white-space: nowrap; }
}
@media (min-width: 901px) {
  .price__common-item:nth-child(3) .price__common-name { white-space: nowrap; }   /* 「ストーリーズ運用」は切れ目がないので、途中で折らない */
}

/* ---------- そのほかのサービス ---------- */
.price__h3--other { margin-top: calc(var(--px) * 72); }
.price__services {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* カード5枚を横一列（2026-10-05 に「ホームページ・LP制作」を足して 4 → 5） */
  gap: calc(var(--px) * 14);
  margin-top: calc(var(--px) * 18);
}
.price__service {
  --r: calc(var(--px) * 16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: calc(var(--px) * 250);
  padding: calc(var(--px) * 26) calc(var(--px) * 22) calc(var(--px) * 10);
}
.price__service-name {
  margin-top: calc(var(--px) * 16);
  font-weight: 700;
  font-size: max(15px, calc(var(--px) * 17));
  line-height: 1.45;
  letter-spacing: .02em;
}
.price__service-text {
  margin-top: calc(var(--px) * 7);
  font-size: max(12px, calc(var(--px) * 13));
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--slate);
}
.price__service-per {
  margin-top: auto;
  padding-top: calc(var(--px) * 14);
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--slate);
}
.price__service-price {
  display: flex;
  align-items: baseline;
  color: var(--navy);
  white-space: nowrap;
}
.price__service-num {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: max(26px, calc(var(--px) * 32));
  line-height: 1.43;
  letter-spacing: 0;
}
.price__service-yen {
  margin-left: calc(var(--px) * 5);
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 14));
}
/* 狭いPC（幅901〜1099px）：5枚を横一列にすると、カードが細くて「インフルエンサー／施策」のように名前が割れる。
   上の段に3枚・下の段に2枚（下の2枚は幅を広げて、左右の端をそろえる）にする */
@media (min-width: 901px) and (max-width: 1099px) {
  .price__services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .price__service { grid-column: span 2; min-height: 0; }
  .price__service:nth-child(n+4) { grid-column: span 3; }
}
.price__service-quote {                /* 金額の代わりの文字「別途お見積もり」。ほかのカードの数字と、下の線（文字の足もと）がそろう高さにしてある */
  font-weight: 700;
  font-size: max(15px, calc(var(--px) * 17));
  line-height: calc(max(26px, calc(var(--px) * 32)) * 1.43);
  letter-spacing: .02em;
}

/* ---------- 複数施設・グループ運営の方へ ---------- */
.price__enterprise {
  --clip-r: calc(var(--px) * 24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--px) * 40);
  min-height: calc(var(--px) * 170);
  margin-top: calc(var(--px) * 34);
  padding: calc(var(--px) * 34) calc(var(--px) * 40);
  border-radius: calc(var(--px) * 24);
  background: var(--navy);
  color: var(--white);
}
.price__enterprise-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  letter-spacing: .2em;
  color: var(--peri);
}
.price__enterprise-title {
  margin-top: calc(var(--px) * 7);
  font-weight: 700;
  font-size: max(20px, calc(var(--px) * 26));
  line-height: 1.45;
  letter-spacing: .02em;
}
.price__enterprise-text {
  margin-top: calc(var(--px) * 10);
  font-size: max(14px, calc(var(--px) * 15));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--light);
}
.price__enterprise-btn {
  flex: none;
  min-width: calc(var(--px) * 240);
  padding-inline: calc(var(--px) * 36);
  gap: 1.2em;
  border-color: var(--white);
}

.price__note { margin-top: calc(var(--px) * 26); font-size: max(11px, calc(var(--px) * 12)); line-height: 1.45; }

/* PCでは横スクロールにしない（カードの影・浮きが切れないように） */
@media (min-width: 901px) {
  .price__plans-track { overflow: visible; cursor: auto; }
}

/* ============================================================
   SP（900px以下）
============================================================ */
@media (max-width: 900px) {
  .sec-price { padding: 64px 0 80px; }
  .price__h3 { font-size: 19px; }
  .price__plans-head { display: block; margin-top: 30px; }
  .price__plans-note { margin-top: 6px; font-size: 12px; line-height: 1.7; }

  /* プラン：横スクロール（画面の端まで） */
  .price__plans { margin-top: 18px; }
  .price__plans-track {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 10px;
    scroll-padding-inline: var(--gutter);
  }
  .price__plan {
    --r: 16px;
    flex: none;
    width: min(310px, 84%);
    min-height: 0;
    padding: 24px 20px 20px;
  }
  .price__plan-en { font-size: 11px; }
  .price__plan-name { font-size: 18px; }
  .price__plan-badge { top: 22px; right: 20px; height: 26px; padding: 0 11px; font-size: 11.5px; }
  .price__plan-price { margin-top: 10px; }
  .price__plan-per { margin-right: 6px; font-size: 12px; }
  .price__plan-num { font-size: 38px; }
  .price__plan-yen { margin-left: 3px; font-size: 14px; }
  .price__plan-rows { margin-top: 12px; padding-top: 8px; }
  .price__plan-rows > div { padding: 6px 0; }
  .price__plan-rows dt { font-size: 13px; }
  .price__plan-rows dd { font-size: 14px; }
  .price__plan-for { margin: 14px -6px 0; padding: 14px 14px 16px; border-radius: 12px; }
  .price__plan-for-title { font-size: 12.5px; }
  .price__checks { margin-top: 6px; }
  .price__checks li { padding-left: 21px; font-size: 13.5px; letter-spacing: .02em; }
  .price__checks li + li { margin-top: 6px; }
  .price__checks li::before { top: calc(.75em - 7px); width: 14px; height: 14px; }

  /* 前後ボタン＋位置のバー */
  .price__plans-ctrl {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
  }
  .price__plans-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(26, 58, 82, .35);
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    transition: opacity .3s var(--ease), background-color .3s var(--ease);
  }
  .price__plans-btn svg { width: 20px; height: 20px; }
  .price__plans-bar {
    position: relative;
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(26, 58, 82, .15);
    overflow: hidden;
  }
  .price__plans-bar > span {
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: inherit;
    background: var(--navy);
    translate: calc(var(--progress, 0) * 150%) 0;   /* 0〜1 → 左端〜右端 */
    transition: translate .2s linear;
  }
  .price__plans:not(.is-scrollable) .price__plans-ctrl { visibility: hidden; }

  /* 全プラン共通 */
  .price__common {
    --r: 16px;
    display: block;
    min-height: 0;
    margin-top: 22px;
    padding: 24px 20px 22px;
  }
  .price__common-head { width: auto; padding-top: 0; }
  .price__common-tag { height: 26px; padding: 0 12px; font-size: 11.5px; }
  .price__common-title { margin-top: 10px; font-size: 19px; letter-spacing: .06em; }
  .price__common-title br { display: none; }
  .price__common-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin-top: 14px;
  }
  .price__common-item {
    flex-direction: row;
    gap: 10px;
    min-height: 60px;
    padding: 9px 0;
    border-top: .5px solid rgba(255, 255, 255, .4);
    text-align: left;
  }
  .price__common-item + .price__common-item::before { display: none; }
  .price__common-name { font-size: 13px; line-height: 1.4; }
  .price__icon--l { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .price__icon--l svg { width: 20px; min-width: 0; }

  /* そのほかのサービス：2列 → 480以下で1列 */
  .price__h3--other { margin-top: 48px; }
  .price__services { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
  .price__service { --r: 16px; min-height: 0; padding: 20px 18px 16px; }
  .price__service-name { margin-top: 12px; font-size: 15.5px; }
  .price__service-text { margin-top: 5px; font-size: 12.5px; }
  .price__service-per { padding-top: 12px; font-size: 11.5px; }
  .price__service-num { font-size: 28px; }
  .price__service-yen { font-size: 13px; }
  .price__service-quote { font-size: 16px; line-height: 40px; }
  /* 5枚めは1枚だけ残るので、横いっぱいに広げる（2列のとき） */
  .price__service:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* 紺の帯：縦に積む */
  .price__enterprise {
    --clip-r: 20px;
    display: block;
    min-height: 0;
    margin-top: 32px;
    padding: 28px 22px 24px;
    border-radius: 20px;
  }
  .price__enterprise-en { font-size: 11px; }
  .price__enterprise-title { margin-top: 6px; font-size: 20px; line-height: 1.5; }
  .price__enterprise-text { margin-top: 8px; font-size: 14px; line-height: 1.8; }
  .price__enterprise-btn { min-width: 0; margin-top: 20px; }

  .price__note { margin-top: 20px; font-size: 11.5px; line-height: 1.7; }
}
@media (max-width: 480px) {
  .price__enterprise-btn { display: flex; width: 100%; }
  .price__services { grid-template-columns: 1fr; }
  .price__service { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .price__service > .price__icon { grid-row: 1; }
  .price__service-name { grid-column: 2; margin-top: 0; }
  .price__service-text, .price__service-per, .price__service-price { grid-column: 1 / -1; }
  .price__service-per { margin-top: 0; }
  .price__common-list { grid-template-columns: 1fr; }
  .price__common-item { min-height: 54px; }
}
/* とても小さいスマホ（幅350px以下）：プランの月額の「円」が、下の区切り線より右に出ないように */
@media (max-width: 350px) {
  .price__plan-num { font-size: 34px; }
}
/* PC（幅901〜1359px）：3つのプランで「こんな方に」の中の行数がちがうと、灰色の箱の高さがそろわず、下の位置がずれる
   → 2行の項目が2つ入る高さを、どの箱にも取っておく（項目を増やしたり長くしたりしたら、この数字も見直す） */
@media (min-width: 901px) and (max-width: 1359px) {
  .price__plan-for { min-height: calc(var(--px) * 54 + 1.5 * max(12px, var(--px) * 13) + 6 * max(13px, var(--px) * 14)); }
}


/* ===== 70-faq ===== */
/* ============================================================
   70 よくある質問（FAQ）
   Figma 70:462（白・右上だけ角丸130）。左に見出しとイラスト、右に開閉リスト。
============================================================ */
.sec-faq {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-top-right-radius: calc(var(--px) * 130);   /* 上のセクション(--bg)との境目のカーブ */
  overflow: clip;                                    /* イラストの下端をセクションの境目で切る */
}
.faq__inner {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--px) * 555) minmax(0, 1fr);   /* 左65〜620／右620〜1375 */
  align-items: start;
  min-height: calc(var(--px) * 919);                 /* お問合わせの紺が始まるところまで */
  padding-top: calc(var(--px) * 150);
  padding-bottom: calc(var(--px) * 136);
}

/* 見出し（32px） */
.faq__title {
  margin-top: calc(var(--px) * 28);
  font-weight: 700;
  font-size: max(22px, calc(var(--px) * 32));
  line-height: 1.42;
  letter-spacing: .02em;
}

/* ---------- 質問リスト ---------- */
.faq__list {
  border-bottom: 1px solid rgba(95, 95, 95, .5);   /* 0.5px の線と同じ見え方 */
}
.faq__item { border-top: 1px solid rgba(95, 95, 95, .5); }
.faq__q { font-size: inherit; }

.faq__btn {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--px) * 42) minmax(0, 1fr) calc(var(--px) * 18);
  align-items: center;
  width: 100%;
  min-height: calc(var(--px) * 79);
  padding: calc(var(--px) * 16) calc(var(--px) * 5) calc(var(--px) * 16) 0;
  text-align: left;
}
.faq__mark {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: max(17px, calc(var(--px) * 22));
  line-height: 1;
  color: var(--slate);
  transform: translateY(-.04em);
  transition: color .35s var(--ease);
}
.faq__question {
  font-weight: 700;
  font-size: max(14px, calc(var(--px) * 17));
  line-height: 1.55;
  letter-spacing: .02em;
  word-break: auto-phrase;   /* 対応ブラウザでは文節で折り返す */
  transition: color .35s var(--ease), transform .45s var(--ease);
}

/* ＋／− のアイコン（縦の線が回って − になる） */
.faq__icon {
  position: relative;
  width: calc(var(--px) * 18);
  height: calc(var(--px) * 18);
  color: var(--navy);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(13px, calc(var(--px) * 15));
  height: 1px;
  margin: -.5px 0 0 calc(max(13px, calc(var(--px) * 15)) / -2);
  background: currentColor;
  border-radius: 1px;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after,
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); opacity: 0; }

/* 答え（パネルの余白は中の p に付ける） */
.faq__answer {
  max-width: calc(var(--px) * 682);
  margin-top: calc(var(--px) * -10);
  padding: 0 0 calc(var(--px) * 26) calc(var(--px) * 42);
  font-size: max(14px, calc(var(--px) * 15));
  line-height: 1.9;
  letter-spacing: .02em;
}
.faq__item.is-open .faq__answer { animation: faq-answer-in .6s var(--ease) both; }
@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .faq__item.is-open .faq__answer { animation: none; } }
html.is-reduced .faq__item.is-open .faq__answer { animation: none; }

@media (hover: hover) {
  .faq__btn:hover .faq__mark { color: var(--pink); }
  .faq__btn:hover .faq__question { color: var(--navy); transform: translateX(4px); }
  .faq__btn:hover .faq__icon { color: var(--pink); }
}

/* ---------- イラスト（左下・下の端はお問合わせの紺の下へ） ---------- */
.faq__illust {
  position: absolute;
  left: calc(var(--px) * 134);
  bottom: calc(var(--px) * -13);
  width: calc(var(--px) * 371);
  pointer-events: none;
}
.faq__illust img { width: 100%; }
/* 下から大きめにせり上がる */
html.js .faq__illust[data-reveal]:not(.is-in) { transform: translate3d(0, 28%, 0); opacity: 1; }
html.js .faq__illust[data-reveal] { transition-duration: 1.2s, 1.2s; }

/* ------------------------------------------------------------
   SP（900px以下）
------------------------------------------------------------ */
@media (max-width: 900px) {
  .sec-faq { border-top-right-radius: 48px; }
  .faq__inner {
    max-width: 680px;                 /* タブレットで横に広がりすぎないように */
    display: block;
    min-height: 0;
    padding-top: 72px;
    padding-bottom: 0;
  }
  .faq__title { margin-top: 14px; font-size: 24px; line-height: 1.5; }
  .faq__list { margin-top: 32px; }
  .faq__btn {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    min-height: 64px;
    padding: 16px 4px 16px 0;
  }
  .faq__mark { font-size: 19px; }
  .faq__question { font-size: 15px; line-height: 1.6; padding-right: 14px; }   /* 右の14px：1行にぴったり入る質問が、＋のマークにくっつかないように */
  .faq__icon { width: 18px; height: 18px; }
  .faq__icon::before, .faq__icon::after { width: 15px; margin-left: -7.5px; }
  .faq__answer {
    max-width: none;
    margin-top: -4px;
    padding: 0 4px 20px 30px;
    font-size: 14px;
    line-height: 1.85;
  }
  /* イラストはリストの下・左寄せ（左下のカーブにかからない位置） */
  .faq__illust {
    position: relative;
    left: auto;
    bottom: auto;
    width: 176px;
    margin: 28px 0 -6px 44px;
  }
}


/* ===== 80-contact ===== */
/* ============================================================
   80 お問合わせ（CONTACT）
   Figma 70:497（紺・上の左右に角丸130）。左に見出し・流れ・ロゴ、右に白いフォーム。
============================================================ */
.sec-contact {
  position: relative;
  z-index: 2;
  background: var(--navy);
  color: var(--white);
}
.contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(var(--px) * 480) calc(var(--px) * 735);   /* 左65〜545／フォーム640〜1375 */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro card"
    "site  card";
  justify-content: space-between;
  padding-top: calc(var(--px) * 150);
  padding-bottom: calc(var(--px) * 72);
}
.contact__intro { grid-area: intro; }
.contact__card { grid-area: card; }
.contact__site { grid-area: site; align-self: end; }

/* ---------- 左：見出し・リード ---------- */
.contact__title {
  margin-top: calc(var(--px) * 28);
  font-weight: 700;
  font-size: max(26px, calc(var(--px) * 42));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--white);
}
.contact__lead {
  margin-top: calc(var(--px) * 20);
  font-weight: 500;
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.9;
  color: var(--light);
  word-break: auto-phrase;   /* 狭いPCで「す。」だけが次の行に落ちないよう、文節で折り返す */
}

/* ご相談の流れ */
.contact__flow-label { margin-top: calc(var(--px) * 59); }
.contact__flow {
  margin-top: calc(var(--px) * 24);
  border-top: 1px solid rgba(255, 255, 255, .3);
  counter-reset: none;
}
.contact__step {
  display: flex;
  align-items: center;
  min-height: calc(var(--px) * 58);
  padding-block: calc(var(--px) * 8);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  font-weight: 500;
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1.5;
  letter-spacing: .02em;
}
.contact__step-num {
  flex: none;
  width: calc(var(--px) * 47);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: max(14px, calc(var(--px) * 16));
  line-height: 1;
  letter-spacing: 0;
  color: var(--peri);
  transform: translateY(.08em);   /* 和文と中心をそろえる */
}

/* LINE・Instagram（白い線のピル） */
.contact__sns {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 53);
}
.contact__sns-btn {
  --btn-h: max(46px, calc(var(--px) * 52));
  min-width: calc(var(--px) * 230);   /* 狭い画面では文字に合わせて広がり、2段になる */
  padding: 0 1.45em;
  font-weight: 500;
  font-size: max(12px, calc(var(--px) * 13));
  letter-spacing: .02em;
  white-space: nowrap;
}
.contact__note {
  margin-top: calc(var(--px) * 20);
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--light);
}

/* ---------- 左下：ロゴ・コピーライト・リンク ---------- */
.contact__site {
  display: grid;
  /* リンクの列は左から342（1440のとき）。狭いPCではリンクの幅(約138px)を残して左へ寄せ、フォームに近づきすぎないように */
  grid-template-columns: min(calc(var(--px) * 342), calc(100% - 138px)) max-content;
  align-items: start;
}
.contact__logo {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(20px, calc(var(--px) * 24));
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--white);
}
.contact__copy {
  margin-top: calc(var(--px) * 14);
  font-family: var(--font-en);
  font-size: max(11px, calc(var(--px) * 12));
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--light);
}
.contact__copy small { font-size: inherit; }
.contact__links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 5);
  padding-top: calc(var(--px) * 12);
}
.contact__links li { display: flex; }
.contact__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 14));
  line-height: 1.45;
  letter-spacing: .02em;   /* Figma: Zen Medium 14・字間2% */
  white-space: nowrap;
  color: var(--white);
}
.contact__link--en { font-size: max(12px, calc(var(--px) * 13)); letter-spacing: .02em; }
.contact__link::after {                   /* ホバーで下線がのびる */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.contact__link-arrow { font-family: var(--font-en); transition: transform .4s var(--ease); }

/* ---------- 右：フォームのカード ---------- */
.contact__card {
  position: relative;
  align-self: start;
  padding: calc(var(--px) * 48);
  border-radius: calc(var(--px) * 24);
  background: var(--white);
  color: var(--ink);
}
.contact__heart {
  --size: calc(var(--px) * 56);
  position: absolute;
  top: calc(var(--px) * -24);
  left: calc(var(--px) * -24);
  z-index: 1;
  animation: contact-beat 2.8s var(--ease) 1s infinite;
}
@keyframes contact-beat {   /* トクン、トクン（scale を使うので reveal の transform とぶつからない） */
  0%, 30%, 100% { scale: 1; }
  8% { scale: 1.14; }
  16% { scale: .96; }
  22% { scale: 1.08; }
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 24);
}
.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--px) * 20);
}
.contact__field { min-width: 0; }
.contact__field--half { width: calc(50% - var(--px) * 10); }
.contact__field--message { margin-top: calc(var(--px) * 8); }

/* fieldset の初期スタイルを消す */
.contact__group { margin: 0; padding: 0; border: 0; }
.contact__group legend { padding: 0; }

.contact__label {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 10);
  margin-bottom: calc(var(--px) * 10);
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 14));
  line-height: max(20px, calc(var(--px) * 20));
  letter-spacing: .02em;
}
.contact__req {
  display: inline-grid;
  place-items: center;
  height: max(18px, calc(var(--px) * 20));
  padding: 0 max(6px, calc(var(--px) * 7));
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: max(10px, calc(var(--px) * 11));
  line-height: 1;
  letter-spacing: .02em;
}

/* 入力欄 */
.contact__input {
  display: block;
  width: 100%;
  height: max(48px, calc(var(--px) * 52));
  padding: 0 max(14px, calc(var(--px) * 16));
  border: 1px solid transparent;
  border-radius: max(8px, calc(var(--px) * 10));
  background: var(--bg);
  font-size: max(15px, calc(var(--px) * 15));   /* iPhoneで拡大されないよう 15px以上 */
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.contact__input::placeholder { color: #9AA0A6; font-size: max(14px, calc(var(--px) * 14)); opacity: 1; }
.contact__input:focus-visible,
.contact__input:focus {
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(138, 161, 219, .28);
}
.contact__textarea {
  height: calc(var(--px) * 120);
  min-height: 120px;
  padding-block: max(12px, calc(var(--px) * 14));
  resize: vertical;
}
/* お悩みガイドから入力したときだけ出る、小さなお知らせ（ふだんは hidden。出し入れは main.js のお悩みガイド）。
   フォームのいちばん上に出る。margin-bottom … すぐ下の「会社名」とのすき間を、少しだけ詰める */
.contact__filled {
  position: relative;
  margin-bottom: calc(var(--px) * -8);
  padding-left: 1.5em;
  font-size: max(12px, calc(var(--px) * 12));
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--slate);
}
.contact__filled::before {               /* 小さなチェックの印 */
  content: "";
  position: absolute;
  top: .36em;
  left: .4em;
  width: .36em;
  height: .68em;
  border: solid var(--slate);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* 施設の種類：ピル形のボタン（中身はラジオボタン） */
.contact__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 10);
}
.contact__chip { position: relative; display: block; cursor: pointer; }
.contact__chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.contact__chip span {
  display: grid;
  place-items: center;
  height: max(40px, calc(var(--px) * 40));
  padding: 0 max(16px, calc(var(--px) * 18));
  border: 1px solid rgba(95, 95, 95, .6);
  border-radius: 999px;
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 14));
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), scale .2s var(--ease);
}
.contact__chip input:checked + span {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.contact__chip input:active + span { scale: .96; }
.contact__chip input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 3px; }

/* チェックボックス（ご相談内容・同意） */
.contact__group--topics .contact__label { margin-bottom: calc(var(--px) * 12); }
.contact__checks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 14) calc(var(--px) * 26);
}
.contact__check {
  display: inline-flex;
  align-items: center;
  gap: max(8px, calc(var(--px) * 8));
  font-size: max(13px, calc(var(--px) * 14));
  line-height: max(20px, calc(var(--px) * 20));
  letter-spacing: .02em;
  cursor: pointer;
}
.contact__check input {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: max(16px, calc(var(--px) * 16));
  height: max(16px, calc(var(--px) * 16));
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.contact__check input::after {           /* チェックの印 */
  content: "";
  width: 36%;
  height: 62%;
  margin-top: -12%;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .3s var(--ease-spring);
}
.contact__check input:checked { border-color: var(--navy); background: var(--navy); }
.contact__check input:checked::after { transform: rotate(45deg) scale(1); }
.contact__check input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.contact__agree { align-self: flex-start; margin-top: calc(var(--px) * 6); }
.contact__policy {                     /* 同意の文の中の「プライバシーポリシー」（リンクだと分かるように下線） */
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  color: var(--navy);
}

/* 送信ボタン */
.contact__submit {
  --btn-h: max(56px, calc(var(--px) * 64));
  font-size: max(15px, calc(var(--px) * 17));
  letter-spacing: .04em;
}
.contact__submit .c-btn__arrow { margin-left: .4em; }
/* 送信先が未設定のあいだ、送信ボタンを押したときに出るお知らせ（ふだんは hidden） */
.contact__pending {
  margin-top: calc(var(--px) * -8);
  font-size: max(12.5px, calc(var(--px) * 13));
  line-height: 1.6;
  letter-spacing: .02em;
  text-align: center;
  color: var(--slate);
}
/* 指でさわる端末（スマホ・タブレット）では、入力欄の文字を16px以上にする（15px以下だと、iPhone が入力のときに画面を拡大するため。
   スマホ幅は下で16pxにしてあるが、横向きの大きいiPhoneやタブレットはPCの並びになるので、ここで補う） */
@media (pointer: coarse) {
  .contact__input { font-size: max(16px, calc(var(--px) * 15)); }
}

@media (hover: hover) {
  .contact__link:hover::after { transform: scaleX(1); transform-origin: left; }
  .contact__link:hover .contact__link-arrow { transform: translateX(4px); }
  .contact__chip:hover span { border-color: var(--navy); }
  .contact__chip:hover input:not(:checked) + span { background: var(--light); }
  .contact__check:hover input:not(:checked) { border-color: var(--navy); }
  .contact__input:hover:not(:focus) { background: #ECEAE8; }
}

/* 動きを減らす設定・static では心臓の動きを止める */
@media (prefers-reduced-motion: reduce) { .contact__heart { animation: none; } }
html.is-reduced .contact__heart { animation: none; }

/* ------------------------------------------------------------
   SP（900px以下）
------------------------------------------------------------ */
@media (max-width: 900px) {
  .contact__inner {
    max-width: 680px;                 /* タブレットで横に広がりすぎないように */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "intro" "card" "site";
    padding-top: 76px;
    padding-bottom: 56px;
  }
  /* 文字は26px。幅340より狭いスマホでは、1行目（「まずは、いまの課題から」11文字）が入る大きさまで小さくする（「ら」だけ落ちないように） */
  .contact__title { margin-top: 14px; font-size: min(26px, calc((var(--vw, 100vw) - 40px) / 11.4)); line-height: 1.55; word-break: auto-phrase; }
  .contact__lead { margin-top: 14px; font-size: 14px; }
  .contact__flow-label { margin-top: 36px; }
  .contact__flow { margin-top: 16px; }
  .contact__step { min-height: 52px; font-size: 15px; }
  .contact__step-num { width: 40px; font-size: 15px; }
  .contact__sns { flex-direction: column; gap: 10px; margin-top: 32px; }
  .contact__sns-btn { --btn-h: 50px; width: 100%; font-size: 14px; }
  .contact__note { margin-top: 14px; font-size: 12px; }

  .contact__card {
    margin-top: 48px;
    padding: 36px 20px 28px;
    border-radius: 18px;
  }
  .contact__heart { --size: 44px; top: -18px; left: -8px; }
  .contact__form { gap: 22px; }
  .contact__row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .contact__field--half { width: 100%; }
  .contact__field--message { margin-top: 4px; }
  .contact__label { gap: 8px; margin-bottom: 8px; font-size: 14px; }
  .contact__req { height: 19px; padding: 0 7px; font-size: 10.5px; }
  .contact__input { height: 50px; border-radius: 10px; font-size: 16px; }
  .contact__textarea { height: 140px; }
  .contact__filled { margin-bottom: -6px; }
  .contact__chips { gap: 8px; }
  .contact__chip span { height: 44px; padding: 0 17px; font-size: 14px; }
  .contact__checks { flex-direction: column; gap: 0; }
  .contact__check { font-size: 14px; line-height: 22px; min-height: 44px; }   /* タップしやすい高さ44px */
  .contact__check input { width: 18px; height: 18px; }
  .contact__agree { margin-top: 4px; }
  .contact__submit { --btn-h: 58px; font-size: 16px; }

  .contact__site {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .25);
  }
  .contact__logo { font-size: 22px; }
  .contact__copy { margin-top: 8px; font-size: 11px; }
  .contact__links { gap: 0; padding-top: 0; align-items: flex-end; margin-bottom: -10px; }
  .contact__link { font-size: 13px; min-height: 44px; }
  .contact__link--en { font-size: 13px; }
}
/* 小さいスマホ（幅374px以下）：送信ボタンの文が「…送信す／る」と2行にならないように、少しだけ詰める */
@media (max-width: 374px) {
  .contact__submit { padding-inline: 1.2em; font-size: 14px; }
}
/* とても小さいスマホ（幅340px以下）：「プライバシーポリシーに同意する」を1行に */
@media (max-width: 340px) {
  .contact__agree { font-size: 13px; letter-spacing: 0; }
}


/* ===== 90-footer ===== */
/* ============================================================
   90 フッター（いいね、から始まるブランド作り）
   Figma 74:467（見出し）＋ 70:573（紺・スマホ・人物・通知・ハート）
   絵の部品は HTML の style に書いた Figma 座標（--x / --y / --w）で置く。
   PC … 1デザインpx = --px（1440で等倍）
   SP … 1デザインpx = --sp × 0.5、スマホ（x=730）が画面の中央に来るように
============================================================ */
.footer {
  --u: var(--px);           /* 絵の1デザインpx */
  --cx: 720;                /* 画面の中央に来る Figma の x */
  --oy: 0;                  /* 絵を下にずらす量（SPで使う） */
  position: relative;
  z-index: 1;
  overflow: hidden;         /* はみ出した人物・スマホの下を切る */
  background: var(--navy);
  color: var(--white);
}

/* 見出し */
.footer__title {
  position: relative;
  z-index: 2;
  padding: calc(var(--px) * 40) 0 0 calc(var(--px) * 423);
  font-weight: 700;
  font-size: max(24px, calc(var(--px) * 40));
  line-height: 1.45;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 絵の舞台（Figma のフッター枠 1440×560） */
.footer__scene {
  position: relative;
  height: calc(var(--u) * (560 + var(--oy)));
  margin-top: calc(var(--px) * 33);
}
.footer__scene > * {
  position: absolute;
  left: calc(50% + (var(--sx, var(--x)) - var(--cx)) * var(--u));   /* --sx … SPだけ別の x にしたいとき */
  top: calc((var(--y) + var(--oy)) * var(--u));
}

/* ---------- スマホ ---------- */
.footer__phone {
  z-index: 1;
  width: calc(var(--u) * var(--w));
  aspect-ratio: 350 / 751;
}
.footer__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 751'%3E%3Cpath d='M106.804 19.4102C106.804 26.1473 112.267 31.6092 119.004 31.6094H232.342C239.079 31.6092 244.541 26.1473 244.541 19.4102V1H310.302L311.301 1.0127C332.219 1.54266 349.015 18.6665 349.015 39.7129V710.88C349.015 732.26 331.682 749.593 310.302 749.593H39.7129C18.3325 749.593 1.00008 732.26 1 710.88V39.7129C1 18.3324 18.3324 1 39.7129 1H100.481L100.797 1.00781C103.93 1.16194 106.464 3.5966 106.772 6.6875L106.796 6.99902L106.797 7.01172V7.02539L106.804 7.2998V19.4102Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 751'%3E%3Cpath d='M106.804 19.4102C106.804 26.1473 112.267 31.6092 119.004 31.6094H232.342C239.079 31.6092 244.541 26.1473 244.541 19.4102V1H310.302L311.301 1.0127C332.219 1.54266 349.015 18.6665 349.015 39.7129V710.88C349.015 732.26 331.682 749.593 310.302 749.593H39.7129C18.3325 749.593 1.00008 732.26 1 710.88V39.7129C1 18.3324 18.3324 1 39.7129 1H100.481L100.797 1.00781C103.93 1.16194 106.464 3.5966 106.772 6.6875L106.796 6.99902L106.797 7.01172V7.02539L106.804 7.2998V19.4102Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.footer__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
html.js .footer__screen img[data-reveal] { transition-duration: 1.4s, 1.6s; }
html.js .footer__screen img[data-reveal]:not(.is-in) { transform: scale(1.14); }
.footer__phone-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- 人物 ---------- */
.footer__person {
  z-index: 2;
  width: calc(var(--u) * var(--w));
}
.footer__person img { width: 100%; }

/* ---------- 通知カード ---------- */
.footer__notice {
  --n: max(var(--u), .82px);   /* 1440より狭いPCでも文字が切れない大きさに */
  z-index: 3;
  position: absolute;
}
.footer__notice--solid { background: var(--white); }
.footer__notice--open { --tail-x: calc(var(--n) * 30); --notice-origin: 86% 100%; }
.footer__notice--booking2 { --tail-x: calc(var(--n) * 28); --notice-origin: 86% 100%; }
.footer__notice--booking2::after { width: calc(var(--n) * 30); height: calc(var(--n) * 25); }
.footer__notice .footer__ico { height: auto; }
.footer__notice .footer__ico--bookmark { width: calc(var(--n) * 11); }
.footer__notice .footer__ico--link { width: calc(var(--n) * 15); }
.footer__notice .footer__ico--logo { width: calc(var(--n) * 21); }

/* ---------- ハート ---------- */
.footer__heart {
  --size: calc(var(--u) * var(--w));
  z-index: 4;
}
.footer__heart--big { --float-amp: 12px; }

/* ------------------------------------------------------------
   狭いPC（901〜1100px）… 通知カードは文字が読める大きさ（--n 最小 .82px）を保つので、
   1440の配置のままだと重なる・右端で切れる → 右端の4枚目を隠し、左右の2枚を少し外側へ
------------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1100px) {
  .footer__notice--booking2 { display: none; }
  .footer__notice--reel { --sx: 90; }
  .footer__notice--open { --sx: 850; }
}

/* ------------------------------------------------------------
   SP（900px以下）… スマホを中央に、人物は4人ぶん・通知は3枚
------------------------------------------------------------ */
@media (max-width: 900px) {
  .footer {
    --u: calc(var(--sp) * .5);
    --cx: 730;
    --oy: 140;              /* 上に通知カードを置くぶん、絵を下げる（デザインpx） */
  }
  .footer__title {
    padding: 8px 20px 0;
    font-size: 23px;
    line-height: 1.55;
    text-align: center;
    white-space: normal;
  }
  .footer__scene { margin-top: 4px; }
  .footer__person--b04,
  .footer__person--03 { display: none; }
  .footer__person--01 { --sx: 320; }    /* SPでは左右の人を少し内側へ */
  .footer__person--b01 { --sx: 500; }
  .footer__person--b05 { --sx: 900; }   /* 990 だと、スマホで右端の人の顔が半分で切れる */

  /* 通知カード：画面の中央からの位置（390幅での px）で置く */
  .footer__notice { --n: calc(var(--sp) * .78); }
  .footer__notice--reel { left: calc(50% - var(--sp) * 181); top: calc(var(--sp) * 14); }
  .footer__notice--open { left: calc(50% - var(--sp) * 40); top: calc(var(--sp) * 76); }
  .footer__notice--booking { left: calc(50% - var(--sp) * 171); top: calc(var(--sp) * 140); }
  .footer__notice--booking2 { display: none; }

  /* ハート */
  .footer__heart--1 { left: calc(50% + var(--sp) * 150); top: calc(var(--sp) * 10); }
  .footer__heart--2 { left: calc(50% + var(--sp) * 120); top: calc(var(--sp) * 150); }
  .footer__heart--4 { left: calc(50% - var(--sp) * 186); top: calc(var(--sp) * 96); }
  .footer__heart--5 { display: none; }
}


/* ===== 95-guide ===== */
/* ============================================================
   95-guide … お悩みガイド（右下に固定）
   閉じた状態 = Figma 47:705 の紺のピル / 開いた状態 = 47:674 の白いパネル
   ・.guide.is-visible … 表示中（200pxスクロール後）
   ・.guide.is-open    … パネルが開いている
   ・.guide.is-busy    … 開いた直後・中身を切り替えた直後（約0.6秒）。中身はまだ押せない（押しまちがい防止）
   ・パネルの中は2段階：① お悩みを選ぶ（.guide__step） → ② くわしい項目（.guide__step--detail）
     表示していないほうは hidden。切り替えは main.js
   ※ .guide 自体には transform を付けない（SPのシートが position:fixed のため）
============================================================ */
.guide {
  --g: max(.8px, var(--px));   /* 1デザインpxの大きさ */
  --guide-foot: calc(var(--g) * 115);   /* 閉じているときのピルの高さ(91)＋画面の下からの距離(24)。パネルの高さの上限に使う */
  position: fixed;
  z-index: var(--z-guide);
  right: calc(var(--g) * 31);
  bottom: calc(var(--g) * 24);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  transition: z-index 0s linear .56s;   /* 閉じるとき：パネルが消えおわってから、重なり順を元にもどす */
}
/* 開いている間は、スクロール後の固定ヘッダー（--z-bar）より上に重ねる。
   画面が低いと、パネルの上の端がヘッダーの位置まで届く。ヘッダーの下になると「戻る」「×」が隠れて押せなくなるため
   （SPのシートも同じ）。SPの全画面メニュー（--z-drawer）よりは下 */
.guide.is-open { z-index: calc(var(--z-bar) + 5); transition: z-index 0s; }

/* ---------- 閉じているときのピル ---------- */
.guide__toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(var(--g) * 372);
  height: calc(var(--g) * 91);
  padding: 0 calc(var(--g) * 30) 0 calc(var(--g) * 13);
  border-radius: 999px;
  background: rgba(26, 58, 82, .96);
  -webkit-backdrop-filter: blur(26px);
          backdrop-filter: blur(26px);
  box-shadow:
    inset 0 0 0 calc(var(--g) * 1.47) var(--white),
    0 calc(var(--g) * 26) calc(var(--g) * 58) calc(var(--g) * -14) rgba(42, 84, 112, .22);
  color: var(--white);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 24px, 0) scale(.96);
  transform-origin: right bottom;
  transition: opacity .5s var(--ease), transform .7s var(--ease-out), visibility 0s linear .7s, box-shadow .4s var(--ease);
}
.guide.is-visible .guide__toggle,
.guide.is-open .guide__toggle {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease-out), visibility 0s, box-shadow .4s var(--ease);
}
.guide__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--g) * 64.6);
  height: calc(var(--g) * 64.6);
  border-radius: 50%;
  background: rgba(247, 242, 234, .65);
}
.guide__icon svg { width: calc(var(--g) * 32.3); height: calc(var(--g) * 32.3); }
.guide__badge {
  position: absolute;
  top: calc(var(--g) * -1);
  left: calc(var(--g) * 46);
  width: calc(var(--g) * 14.7);
  height: calc(var(--g) * 14.7);
  border: calc(var(--g) * 2.9) solid var(--white);
  border-radius: 50%;
  background: var(--pink);
  animation: guide-ping 2.4s var(--ease) infinite;
}
@keyframes guide-ping {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(237, 57, 123, .55); }
  35% { box-shadow: 0 0 0 calc(var(--g) * 8) rgba(237, 57, 123, 0); }
}
.guide__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin-left: calc(var(--g) * 18);
}
.guide__sub {
  font-size: max(11px, calc(var(--g) * 15.4));
  line-height: 1.4;
  letter-spacing: .06em;
}
.guide__main {
  font-weight: 700;
  font-size: max(14px, calc(var(--g) * 21.3));
  line-height: 1.45;
  letter-spacing: .04em;
  white-space: nowrap;
}
.guide__chev {
  flex: none;
  width: calc(var(--g) * 29.4);
  height: calc(var(--g) * 29.4);
  transition: transform .5s var(--ease);
}
.guide__chev svg { width: 100%; height: 100%; }
.guide.is-open .guide__chev { transform: rotate(180deg); }
@media (hover: hover) {
  .guide__toggle:hover {
    box-shadow:
      inset 0 0 0 calc(var(--g) * 1.47) var(--white),
      0 calc(var(--g) * 30) calc(var(--g) * 60) calc(var(--g) * -14) rgba(42, 84, 112, .42);
  }
  .guide__toggle:hover .guide__chev { transform: translateY(-3px); }
  .guide.is-open .guide__toggle:hover .guide__chev { transform: rotate(180deg) translateY(-3px); }
}

/* ---------- 開いたときのパネル ---------- */
.guide__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--g) * 14);
  display: flex;
  flex-direction: column;
  gap: calc(var(--g) * 10);
  width: calc(var(--g) * 320);
  /* 画面の高さが足りないときだけ効く上限（はみ出さず、中がスクロールする）。
     下のピルの分（--guide-foot）＋ピルとのすき間(14)＋上の余白16px を引いた高さ。固定パネルの上限なので、ここだけ vh を使う */
  max-height: calc(100vh - var(--guide-foot) - var(--g) * 14 - 16px);
  max-height: calc(100dvh - var(--guide-foot) - var(--g) * 14 - 16px);   /* dvh＝ツールバーを除いた「いま見えている高さ」（iPad の Safari など）。使えないブラウザは上の行のまま */
  overflow: hidden auto;
  scrollbar-width: thin;                       /* スクロールバーが出るときは、細く・控えめに（②の中と同じ） */
  scrollbar-color: var(--gray) transparent;
  padding: calc(var(--g) * 20) calc(var(--g) * 18) calc(var(--g) * 18);
  border: 1px solid var(--white);
  border-radius: calc(var(--g) * 30);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: 0 calc(var(--g) * 18) calc(var(--g) * 40) calc(var(--g) * -10) rgba(42, 84, 112, .22);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.96);
  transform-origin: right bottom;
  /* height … ①と②を切り替えるとき、パネルの高さをなめらかに変える（main.js が高さを入れている間だけ） */
  transition: opacity .35s var(--ease), transform .5s var(--ease-out), height .36s var(--ease);
}
.guide.is-open .guide__panel { opacity: 1; transform: none; }
.guide__panel.is-sizing,
.guide__panel.is-sizing .guide__body { overflow: hidden; }   /* 高さが変わる間は、スクロールバーを出さない */
@media (min-width: 901px) {
  /* PC：パネルは 94% より小さくしない（幅 約300px）。
     中の文字は 12px より小さくならないので、パネルだけ縮むと文が折り返して縦に長くなり、ノートPCの画面に入りきらなくなる。
     1440px のデザインどおりの画面では変わらない（効くのは、画面の幅が 約1370px より狭いとき）。
     元にもどす（パネルもピルと同じ割合で小さくする）ときは、この1行を消す */
  .guide__panel { --g: max(.94px, var(--px)); }
}
.guide__handle { display: none; }

/* 1段階ぶんの中身（① と ②）。並べ方はパネルと同じ */
.guide__step {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: calc(var(--g) * 10);
  min-width: 0;
  margin-top: auto;   /* 高さが変わる途中も、中身は下にそろえる（下のボタンの位置が動かない） */
}
/* 切り替えたとき、新しい中身が横からすっと出る（main.js が .is-enter / .is-enter-back を付ける） */
.guide__step.is-enter { animation: guide-step-in .36s var(--ease) both; }
.guide__step.is-enter-back { animation: guide-step-back .36s var(--ease) both; }
@keyframes guide-step-in {
  from { opacity: 0; transform: translate3d(12px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes guide-step-back {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to { opacity: 1; transform: none; }
}
/* 開いた直後・切り替わった直後（約0.6秒。main.js が .is-busy を付ける）は、中身を押せないようにする。
   ダブルクリックの2回目が、あとから出てきた項目やリンクに当たるのを防ぐため。
   押せない間は、マウスをのせても反応しない（文字も選択されない） */
.guide.is-busy .guide__step {
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.guide__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 calc(var(--g) * 2) calc(var(--g) * 6) calc(var(--g) * 4);
}
.guide__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(10px, calc(var(--g) * 11));
  line-height: 1.4;
  letter-spacing: .2em;
  color: var(--slate);
}
.guide__title {
  margin-top: calc(var(--g) * 4);
  font-weight: 700;
  font-size: max(15px, calc(var(--g) * 19));
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--ink);
}
.guide__close {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--g) * 34);
  height: calc(var(--g) * 34);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--bg);
  color: var(--navy);
  transition: transform .4s var(--ease), background-color .3s var(--ease);
}
.guide__close svg { width: calc(var(--g) * 16); height: calc(var(--g) * 16); }
@media (hover: hover) {
  .guide__close:hover { transform: rotate(90deg); background: var(--white); }
}
.guide__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--g) * 10);
}
.guide__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: max(44px, calc(var(--g) * 46));
  padding: calc(var(--g) * 6) calc(var(--g) * 6) calc(var(--g) * 6) calc(var(--g) * 18);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: max(12px, calc(var(--g) * 12.5));
  line-height: 1.4;
  letter-spacing: .02em;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.guide__num {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--g) * 32);
  height: calc(var(--g) * 32);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(12px, calc(var(--g) * 14));
  line-height: 1;
  letter-spacing: 0;
  transition: transform .45s var(--ease-spring);
}
.guide__num--navy { background: var(--navy); }
.guide__num--slate { background: var(--slate); }
.guide__num--tealb { background: var(--tealb); }
.guide__num--peri { background: var(--peri); }
.guide__num--warm { background: var(--warm); }
@media (hover: hover) {
  .guide__option:hover { background: var(--beige); }
  .guide__option:hover .guide__num { transform: translateX(-3px) scale(1.08); }
}
.guide__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--g) * 8);
  min-height: max(44px, calc(var(--g) * 45));
  padding: calc(var(--g) * 12) 0;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  font-weight: 700;
  font-size: max(12px, calc(var(--g) * 13));
  line-height: 1.4;
  letter-spacing: .06em;
  transition: background-color .3s var(--ease);
}
.guide__cta-dot {
  width: calc(var(--g) * 7);
  height: calc(var(--g) * 7);
  border-radius: 50%;
  background: var(--white);
}
@media (hover: hover) {
  .guide__cta:hover { background: #DE2D6D; }
}
/* 開いたとき、選択肢が順番に出る */
.guide__list li, .guide__cta {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .4s var(--ease), transform .55s var(--ease-out), background-color .3s var(--ease);
}
.guide.is-open .guide__list li, .guide.is-open .guide__cta { opacity: 1; transform: none; }
.guide.is-open .guide__list li:nth-child(1) { transition-delay: .06s; }
.guide.is-open .guide__list li:nth-child(2) { transition-delay: .1s; }
.guide.is-open .guide__list li:nth-child(3) { transition-delay: .14s; }
.guide.is-open .guide__list li:nth-child(4) { transition-delay: .18s; }
.guide.is-open .guide__list li:nth-child(5) { transition-delay: .22s; }
.guide.is-open .guide__cta { transition-delay: .26s, .26s, 0s; }

/* ---------- ② くわしい項目（お悩みを選んだあと） ----------
   上：戻る・×／選んだお悩み（番号の丸＋文）
   中：どう力になれるかの一文＋「くわしく見る」／チェック項目（長いときは、ここだけスクロール）
   下：「この内容で相談する」（①のピンクのボタンと同じ見た目） */
.guide__step--detail {
  --gap: calc(var(--g) * 12);    /* 上・中・下のかたまりどうしのすき間（中身 .guide__body の下の余白にも、同じ数字を使う） */
  flex: 0 1 auto;
  gap: var(--gap);
  min-height: 0;
  container-type: inline-size;   /* この幅（＝パネルの中身の幅）を、下の .guide__detail が 100cqw として使う */
}
.guide__head--detail {
  align-items: center;
  padding: 0 calc(var(--g) * 2) 0 0;
}
/* ← 戻る（× と対になる小さなピル） */
.guide__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: calc(var(--g) * 5);
  height: calc(var(--g) * 34);
  padding: 0 calc(var(--g) * 14) 0 calc(var(--g) * 10);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  color: var(--navy);
  font-weight: 700;
  font-size: max(12px, calc(var(--g) * 12.5));
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color .3s var(--ease);
}
.guide__back svg {
  width: calc(var(--g) * 14);
  height: calc(var(--g) * 14);
  transition: transform .4s var(--ease);
}
/* 見た目は小さいまま、押せる範囲だけ40px以上に広げる（戻る・×） */
.guide__back::after,
.guide__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 40px;
  min-height: 40px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .guide__back:hover { background: var(--white); }
  .guide__back:hover svg { transform: translateX(-3px); }
}
/* 選んだお悩み（見出し）。押せないので、マウスをのせても変化しない */
.guide__picked {
  display: flex;
  align-items: center;
  flex: none;
  gap: calc(var(--g) * 9);
  padding: 0 calc(var(--g) * 4);
  font-weight: 700;
  font-size: max(15px, calc(var(--g) * 16.5));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
}
.guide__picked .guide__num {
  width: calc(var(--g) * 28);
  height: calc(var(--g) * 28);
  font-size: max(11px, calc(var(--g) * 13));
}
.guide__picked-text {
  flex: 1;
  min-width: 0;
  word-break: auto-phrase;   /* 2行になるとき、文節で折り返す */
  text-wrap: balance;
}
/* 中身（画面の高さが足りないときは、ここだけがスクロールする）。
   ・フォーカスの枠が切れないよう、まわりに余白をとる（同じだけ margin で戻すので、見た目の位置は変わらない）。
     下は、ボタンとのすき間（--gap）のぶんまで広げる
   ・右は 14px 外へのばす。スクロールバーは、この中（パネルの右の余白）に出る
   ・スクロールしたとき、上下の端はふわっと消える（mask。余白の部分だけなので、ふだんは何も変わらない。
     下は、フォーカスの枠のぶん 4px を残して消える）
   ・scroll-padding … キーボードで項目に移ったとき、端にぴったり付けない（フォーカスの枠が、消える部分にかからないように） */
.guide__body {
  flex: 0 1 auto;
  min-height: 0;
  margin: -6px -14px calc(var(--gap) * -1) -6px;
  padding: 6px 0 var(--gap) 6px;
  overflow: hidden auto;
  scroll-padding: 12px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gray) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5px, #000 calc(100% - var(--gap) + 4px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 5px, #000 calc(100% - var(--gap) + 4px), transparent);
}
/* お悩みごとの中身。幅は、いつも「パネルの中身の幅」（100cqw ＝ 上の .guide__step--detail の幅）。
   中がスクロールするときも、スクロールバーのぶん狭くならない（項目のピルが、下のピンクのボタンと同じ幅のまま）。
   100cqw が使えない古いブラウザでは、margin-right で幅を合わせる（右にのばした 14px のぶんを戻す） */
.guide__detail { margin-right: 14px; }
@supports (width: 1cqw) {
  .guide__detail { width: 100cqw; margin-right: 0; }
}
/* 折り返すときは文節で（対応していないブラウザでは、HTMLの <span class="u-ib"> の区切りで折り返す） */
.guide__help,
.guide__pick,
.guide__check > span { word-break: auto-phrase; }
.guide__help {
  padding: 0 calc(var(--g) * 4);
  font-size: max(12px, calc(var(--g) * 12.5));
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--ink);
}
/* くわしく見る（文末の小さなリンク） */
.guide__more {
  position: relative;
  display: inline-block;
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.guide__more::after {            /* 押せる範囲を広げる（高さ40px以上） */
  content: "";
  position: absolute;
  inset: -11px -6px;
}
.guide__more-arrow {
  display: inline-block;
  margin-left: .3em;
  font-family: var(--font-en);
  font-weight: 400;
  transition: transform .4s var(--ease);
}
@media (hover: hover) {
  .guide__more:hover { text-decoration-color: transparent; }
  .guide__more:hover .guide__more-arrow { transform: translateX(3px); }
}
/* チェック項目（白いピル。選ぶと紺になる） */
.guide__checks {
  min-width: 0;
  margin: calc(var(--g) * 12) 0 0;
  padding: 0;
  border: 0;
}
.guide__check + .guide__check { margin-top: calc(var(--g) * 6); }
.guide__pick {
  margin-bottom: calc(var(--g) * 8);
  padding: 0 calc(var(--g) * 4);
  font-weight: 500;
  font-size: max(11px, calc(var(--g) * 11.5));
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--slate);
}
.guide__check { position: relative; display: block; cursor: pointer; }
.guide__check input {            /* 本物のチェックボックス（透明にして、ピル全体に重ねる） */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.guide__check > span {
  --check-h: max(40px, calc(var(--g) * 40));   /* 1行のときの高さ（押しやすい高さ40px以上） */
  position: relative;
  display: block;
  /* 上下の余白＝（高さ − 線2px − 1行ぶん）÷2。2行になると、そのぶん高くなる。左は四角のぶんを空ける */
  padding: calc((var(--check-h) - 2px - 1.45em) / 2) calc(var(--g) * 16) calc((var(--check-h) - 2px - 1.45em) / 2) calc(var(--g) * 40);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 500;
  font-size: max(12px, calc(var(--g) * 12.5));
  line-height: 1.45;
  letter-spacing: .02em;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.guide__check > span::before {     /* チェックの四角 */
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--g) * 12);
  width: calc(var(--g) * 18);
  height: calc(var(--g) * 18);
  margin-top: calc(var(--g) * -9);
  border: 1px solid var(--ink);
  border-radius: calc(var(--g) * 5);
  background: var(--white);
  transition: border-color .3s var(--ease);
}
.guide__check > span::after {      /* チェックの印 */
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--g) * 18.4);
  width: calc(var(--g) * 5.2);
  height: calc(var(--g) * 9.6);
  margin-top: calc(var(--g) * -6.4);
  border: solid var(--navy);
  border-width: 0 max(1.5px, calc(var(--g) * 1.8)) max(1.5px, calc(var(--g) * 1.8)) 0;
  transform: rotate(45deg) scale(0);
  transition: transform .3s var(--ease-spring);
}
.guide__check input:checked + span { background: var(--navy); color: var(--white); }
.guide__check input:checked + span::before { border-color: var(--white); }
.guide__check input:checked + span::after { transform: rotate(45deg) scale(1); }
.guide__check input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
@media (hover: hover) {
  .guide__check:hover input:not(:checked) + span { background: var(--beige); }
}
/* この内容で相談する（button なので幅をいっぱいに） */
button.guide__cta { width: 100%; flex: none; }

/* ---------- 画面が低いPC（ノートPCなど。高さ 640px 以下） ----------
   ②は①より縦に長いので、そのままだと入りきらず、中がスクロールになる。
   ②の余白を少しずつ詰めて、スクロールなしで全部見えるようにする（①の見た目は変えない）。
   右のコメントは「ふだんの数字 → ここでの数字」。それでも入りきらない高さでは、中だけがスクロールする */
@media (min-width: 901px) and (max-height: 640px) {
  .guide__panel { max-height: calc(100vh - var(--guide-foot) - var(--g) * 14 - 4px); max-height: calc(100dvh - var(--guide-foot) - var(--g) * 14 - 4px); }   /* 上の余白 16px → 4px */
  .guide__panel:has(> .guide__step--detail:not([hidden])) {      /* ②を表示しているときだけ：パネルの上下の余白 20・18 → 14・12 */
    padding-top: calc(var(--g) * 14);
    padding-bottom: calc(var(--g) * 12);
  }
  .guide__step--detail { --gap: calc(var(--g) * 8); }            /* かたまりどうしのすき間 12 → 8 */
  .guide__picked { line-height: 1.4; }                           /* 行の高さ 1.5 → 1.4 */
  .guide__help { line-height: 1.65; }                            /* 行の高さ 1.75 → 1.65 */
  .guide__checks { margin-top: calc(var(--g) * 8); }             /* 12 → 8 */
  .guide__check + .guide__check { margin-top: calc(var(--g) * 4); }   /* 6 → 4 */
  .guide__pick { margin-bottom: calc(var(--g) * 6); }            /* 8 → 6 */
}

/* 動きを減らす設定では、切り替えの動きを止める（高さの変化は main.js が止める） */
@media (prefers-reduced-motion: reduce) { .guide__step { animation: none !important; } .guide__badge { animation: none; } }
html.is-reduced .guide__step { animation: none !important; }
html.is-reduced .guide__badge { animation: none; }   /* ピルの丸い印の、くり返す波紋も止める */

.guide__scrim { display: none; }

/* ---------- SP：小さいピル＋下から出るシート ---------- */
@media (max-width: 900px) {
  .guide {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .guide__toggle {
    width: auto;
    height: 56px;
    padding: 0 16px 0 7px;
    box-shadow: inset 0 0 0 1px var(--white), 0 14px 30px -12px rgba(26, 58, 82, .45);
  }
  .guide__icon { width: 42px; height: 42px; }
  .guide__icon svg { width: 22px; height: 22px; }
  .guide__badge { top: -1px; left: 29px; width: 12px; height: 12px; border-width: 2px; }
  .guide__text { flex: none; margin-left: 10px; }
  .guide__sub { font-size: 10px; letter-spacing: .04em; }
  .guide__main { font-size: 13.5px; letter-spacing: .02em; }
  .guide__chev { width: 20px; height: 20px; margin-left: 10px; }

  .guide__panel {
    position: fixed;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 10px;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 24px 24px 0 0;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -16px 40px -20px rgba(19, 20, 21, .35);
    opacity: 1;
    transform: translate3d(0, 100%, 0);
    transition: transform .55s var(--ease-out), height .36s var(--ease);
  }
  .guide.is-open .guide__panel { transform: none; }
  .guide__step { gap: 10px; }
  .guide__handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 4px;
    background: var(--gray);
  }
  .guide__head { padding: 0 2px 4px 4px; }
  .guide__en { font-size: 10px; }
  .guide__title { font-size: 18px; }
  .guide__close { width: 44px; height: 44px; }
  .guide__close svg { width: 16px; height: 16px; }
  .guide__option { min-height: 50px; padding: 6px 6px 6px 18px; font-size: 14px; }
  .guide__num { width: 36px; height: 36px; font-size: 14px; }
  .guide__cta { min-height: 52px; font-size: 14px; gap: 8px; }
  .guide__cta-dot { width: 7px; height: 7px; }

  /* ② くわしい項目 */
  .guide__step--detail { --gap: 12px; gap: var(--gap); }
  .guide__head--detail { padding: 0 2px 0 0; }
  .guide__back { gap: 6px; height: 44px; padding: 0 18px 0 13px; font-size: 14px; }
  .guide__back svg { width: 16px; height: 16px; }
  .guide__picked { gap: 10px; padding: 0 4px; font-size: 17px; }
  .guide__picked .guide__num { width: 32px; height: 32px; font-size: 13px; }
  .guide__help { padding: 0 4px; font-size: 13px; }
  .guide__checks { margin-top: 14px; }
  .guide__check + .guide__check { margin-top: 8px; }
  .guide__pick { margin-bottom: 8px; padding: 0 4px; font-size: 12px; }
  .guide__check > span { --check-h: 46px; padding-right: 18px; padding-left: 46px; font-size: 14px; }
  .guide__check > span::before { left: 14px; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; }
  .guide__check > span::after { left: 21px; width: 6px; height: 11px; margin-top: -7.5px; border-width: 0 2px 2px 0; }

  .guide__scrim {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: block;
    background: rgba(19, 20, 21, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility 0s linear .4s;
  }
  .guide.is-open .guide__scrim {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity .4s var(--ease), visibility 0s;
  }
}

/* ---------- ?static（スクショ用）：FVの右下（Figmaの位置）に置く ---------- */
html.is-static .guide {
  position: absolute;
  top: calc(var(--px) * 987);
  bottom: auto;
}
html.is-static .guide__toggle { opacity: 1; visibility: visible; transform: none; }
html.is-static .guide__badge { animation: none; }
html.is-static .guide__scrim { display: none; }
@media (max-width: 900px) {
  /* SPもFVの下の端（人物イラストの上）に置く … イントロの見出しに重ならないように */
  html.is-static .guide { top: calc(var(--sp) * 528); }
}


/* ===== 96-policy ===== */
/* ============================================================
   96-policy … プライバシーポリシーのページ（privacy.html）
   文章だけの静かなページ。紺の額縁・地の色・文字はトップページと同じものを使う。
   HTML は _制作/pages/privacy.html
============================================================ */
.policy { min-height: 100vh; min-height: 100dvh; }

.policy__header,
.policy__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.policy__header { padding-top: max(26px, calc(var(--px) * 58)); }
.policy__logo {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: max(21px, calc(var(--px) * 38));
  line-height: 1;
  letter-spacing: .01em;
}
.policy__back {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: 0 1.2em;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-weight: 500;
  font-size: max(13px, calc(var(--px) * 14));
  line-height: 1;
  letter-spacing: .04em;
  color: var(--navy);
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
@media (hover: hover) {
  .policy__back:hover { background: var(--navy); color: var(--white); }
}

.policy__main {
  width: 100%;
  max-width: calc(760px + var(--gutter) * 2);
  margin-inline: auto;
  padding: max(48px, calc(var(--px) * 96)) var(--gutter) max(56px, calc(var(--px) * 110));
}
/* 下書きのお知らせ（内容が確定したら、HTML側でこの1行ごと消す） */
.policy__draft {
  display: inline-block;
  margin-bottom: 28px;
  padding: .5em 1.1em;
  border-radius: 999px;
  background: var(--marker);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ink);
}
.policy__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .2em;
  color: var(--slate);
}
.policy__title {
  margin-top: 14px;
  font-weight: 700;
  font-size: min(max(28px, calc(var(--px) * 44)), calc((100vw - 40px) / 10.4));   /* 幅320pxでも「プライバシーポリシー」が1行に入るように */
  line-height: 1.4;
  letter-spacing: .02em;
}
.policy__lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
}
.policy__section {
  margin-top: 44px;
  padding-top: 32px;
  border-top: .5px solid var(--hair);
}
.policy__section h2 {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: .02em;
}
.policy__lead,
.policy__section p,
.policy__section li { word-break: auto-phrase; }   /* 対応ブラウザでは文節で折り返す（「しま／す。」のように1文字だけ落ちないように） */
.policy__section p,
.policy__section ul { margin-top: 14px; font-size: 15px; line-height: 2; }
.policy__section li {
  position: relative;
  padding-left: 1.2em;
}
.policy__section li::before {
  content: "";
  position: absolute;
  top: .92em;
  left: .2em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
}
.policy__section a {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  color: var(--navy);
}
.policy__info { margin-top: 20px; border-top: .5px solid var(--hair); }
.policy__info > div {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: .5px solid var(--hair);
  font-size: 15px;
  line-height: 1.8;
}
.policy__info dt { font-weight: 500; color: var(--slate); }
/* 項目の下に添える小さい一文（所在地の「詳しい所在地は、ご請求をいただいた場合に…」） */
.policy__info-note {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--slate);
}
.policy__date {
  margin-top: 40px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--slate);
}
.policy__footer {
  padding-top: 28px;
  padding-bottom: max(40px, calc(var(--px) * 64));
  border-top: .5px solid var(--hair);
  max-width: calc(760px + var(--gutter) * 2);
}
.policy__copy {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--slate);
}

@media (max-width: 900px) {
  .policy__lead { font-size: 15px; }
  .policy__section { margin-top: 36px; padding-top: 26px; }
  .policy__section h2 { font-size: 17px; }
  .policy__section p, .policy__section ul, .policy__info > div { font-size: 14.5px; line-height: 1.95; }
  .policy__info > div { grid-template-columns: 5.5em minmax(0, 1fr); }
}

/* 送信完了のページ（thanks.html）：見出しの2行目「ありがとうございました」（11文字）が、幅320pxでも1行に入るように */
.policy__title--thanks { font-size: min(max(28px, calc(var(--px) * 44)), calc((100vw - 40px) / 11.6)); }