@charset "utf-8";

/* =========================================================
   サロンド・すまいる / 案件固有CSS
   ※ 汎用ユーティリティ（余白・カラム・flex・幅など）は
     Bootstrap 5.3.3 と common.css を優先し、ここには
     案件固有のレイアウト・装飾・重なり・可変タイポのみを記述
   ========================================================= */

/* ---------------------------------------------------------
   1. 変数
   --------------------------------------------------------- */
:root {
  /* フォント */
  --font-base:
    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "Yu Gothic", sans-serif;
  --font-mincho:
    "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "Noto Serif JP", serif;
  --font-script:
    "WindSong", "Shippori Mincho B1", "Hiragino Mincho ProN", cursive;

  /* カラー */
  --c-green: #4e6535;
  --c-green-d: #546d40;
  --c-green-l: #a4c084;
  --c-yellow: #cbcb48;
  --c-yellow-d: #afaf48;
  --c-yellow-h: #afaf25;
  --c-drawer: #f2f4c3;
  --c-bg: #f6f7eb;
  --c-pink: #f3ded3;
  --c-text: #1a1a1a;

  --grad: linear-gradient(90deg, var(--c-yellow) 0%, var(--c-pink) 100%);

  /* サイズ */
  --header-h: 64px;
  --sec-pd: clamp(56px, 9.7vw, 147px);
}

@media (min-width: 992px) {
  :root {
    --header-h: 106px;
  }
}

/* ---------------------------------------------------------
   2. ベース
   --------------------------------------------------------- */
html {
  overflow-x: clip;
}

body {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-green);
  background-color: #fff;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

/* CMSが読み込む bootstrap.phantom.min.css の
   a:hover { text-decoration: underline } を打ち消す */
a:hover {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* デザイン基準幅1512px / 本文幅1212px
   1200px未満はBootstrap既定の段階的なmax-width（540/720/960px）を解除し、
   左右余白のみの可変コンテナにする（kinari-care.com と同じ考え方） */
.container {
  max-width: none;
  padding-left: clamp(20px, 5vw, 60px);
  padding-right: clamp(20px, 5vw, 60px);
}

@media (min-width: 1200px) {
  /* コンテンツ幅1212px + 左右パディング60px */
  .container {
    max-width: 1332px;
  }
}

/* CMSが自動で読み込む bootstrap.phantom.min.css（Bootstrap 4）が
   Bootstrap 5.3.3 の後に読み込まれ、.row / .col-* の余白を 15px 固定で
   上書きしてしまう。--bs-gutter-x が効かなくなり、セクションごとに
   指定したカラム間隔（Service 70px・STEP 75px・バナー 37px など）が
   すべて 30px になるため、Bootstrap 5 の指定を復元する */
.row {
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* ---------------------------------------------------------
   3. 共通パーツ
   --------------------------------------------------------- */

.word {
  word-break: auto-phrase;
}
/* 英字見出し（About / Message / News / Reservation ほか） */
.c-en {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(28px, 2.65vw, 40px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

/* 筆記体見出し（Service） */
.c-script {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: clamp(46px, 5.95vw, 90px);
  line-height: 1.2;
  color: var(--c-green);
}

/* 見出しに添える和文 */
.c-head__ja {
  font-family: var(--font-base);
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: var(--c-green);
}

/* 英字と和文を横並びにする場合（HTML側で d-flex align-items-baseline） */
.c-head.d-flex .c-head__ja {
  margin-left: clamp(10px, 1.32vw, 20px);
}

/* 中央揃え見出し */
.c-head--center .c-head__ja {
  margin-top: clamp(6px, 0.66vw, 10px);
}

/* 992px未満（kinari-care.com の構成に準拠）
   ・見出し（英字＋和文）、サブキャッチ、本文は左揃えのまま
   ・View more ボタンだけを右寄せにする
   ※ 中央揃えはFVと、デザイン上もともと中央のセクション（News・
     Reservation・STEP・バナー）のみ */
@media (max-width: 991.98px) {
  .p-about .c-btn,
  .p-message .c-btn,
  .p-service__item .c-btn {
    display: flex;
    margin-left: auto;
    margin-right: 0;
  }
}

/* 576px以下はサブキャッチをデザイン通りの2行に戻す
   （.c-lines > p の流し込み指定に勝たせるため詳細度を上げる） */
@media (max-width: 575.98px) {
  .c-lines.c-lead > p {
    display: block;
  }
}

/* リード文 */
.c-lead {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--c-green-l);
}

/* デザインの改行位置を保つテキスト塊 */
.c-lines p {
  margin: 0;
}

/* 992px未満では改行位置を固定せず、自然に折り返す。
   親を font-size:0 にして、要素間の余白（半角スペース）が
   出ないようにしている。住所など行ごとに意味が異なる
   フッターはブロックのまま。 */
@media (max-width: 991.98px) {
  .c-lines {
    font-size: 0;
  }

  .c-lines > p,
  .c-lines > h2 {
    display: inline;
    font-size: clamp(14px, 3.8vw, 16px);
  }

  .c-lead > p {
    font-size: clamp(17px, 4.8vw, 20px);
  }

  /* このタイトルだけはデザインの改行を保ちたいので行を結合しない。
     下限を18pxにしているのは、320px幅でも1行に収めるため */
  .p-step__head .c-lines > h2 {
    display: block;
    font-size: clamp(18px, 5.4vw, 30px);
  }

  .l-footer .c-lines {
    font-size: inherit;
  }

  .l-footer .c-lines > p {
    display: block;
  }
}

/* ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(190px, 15.21vw, 230px);
  height: clamp(42px, 2.98vw, 45px);
  padding-left: clamp(18px, 1.65vw, 25px);
  padding-right: clamp(18px, 1.65vw, 25px);
  border-radius: 50px;
  background: var(--grad);
  color: #fff;
  transition: box-shadow 0.3s ease;
}

.c-btn p {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(13px, 0.99vw, 15px);
  line-height: 1;
  letter-spacing: 0.04em;
}

.c-btn img {
  flex: 0 0 auto;
  width: 20px;
  height: auto;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

/* ホバーはボタンの色を変えず、影が入って矢印が右へ動くだけ */
.c-btn:hover {
  color: #fff;
  box-shadow: 0 8px 18px rgba(78, 101, 53, 0.22);
}

.c-btn:hover img {
  transform: translateX(6px);
}

/* 白抜きボタン。線・文字色は --btn-c で切り替える（既定は #cbcb48） */
.c-btn--outline {
  background: #fff;
  border: 1.5px solid var(--btn-c, var(--c-yellow));
  color: var(--btn-c, var(--c-yellow));
}

.c-btn--outline:hover {
  color: var(--btn-c, var(--c-yellow));
}

/* ピル型ボタン（ヘッダー） */
.c-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.99vw, 15px);
  height: clamp(38px, 2.98vw, 45px);
  min-width: clamp(132px, 12.24vw, 185px);
  padding-left: clamp(14px, 1.98vw, 30px);
  padding-right: clamp(14px, 1.98vw, 30px);
  border-radius: 50px;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(12px, 0.99vw, 15px);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.c-pill p {
  margin: 0;
  line-height: 1;
}

.c-pill img {
  width: clamp(18px, 1.59vw, 24px);
  flex: 0 0 auto;
}

.c-pill--outline {
  background: #fff;
  border: 1px solid var(--c-yellow);
  color: var(--c-yellow);
}

.c-pill--outline:hover {
  background: var(--c-yellow-h);
  border-color: var(--c-yellow-h);
  color: #fff;
}

.c-pill--line {
  background: var(--c-yellow);
  color: #fff;
}

.c-pill--line:hover {
  background: var(--c-yellow-h);
  color: #fff;
}

/* ---------------------------------------------------------
   4. ヘッダー / ドロワー
   --------------------------------------------------------- */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  padding-left: clamp(12px, 2.31vw, 35px);
  padding-right: clamp(12px, 2.31vw, 35px);
  z-index: 1000;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* common.js が1画面分スクロール後に .has-bg を付与 */
.l-header.has-bg {
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 12px rgba(78, 101, 53, 0.08);
}

.l-header__logo {
  display: block;
  line-height: 0;
  flex: 0 0 auto;
}

.l-header__logo img {
  width: auto;
  height: clamp(40px, 5.03vw, 76px);
}

/* ハンバーガー（3本線） */
.a-burger {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 16px;
  margin-left: clamp(12px, 1.65vw, 25px);
  cursor: pointer;
}

.a-burger div {
  position: absolute;
  left: 0;
  width: 30px;
  height: 1.5px;
  background-color: var(--c-yellow);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    top 0.3s ease;
}

.a-burger div:nth-child(1) {
  top: 0;
}
.a-burger div:nth-child(2) {
  top: 7px;
}
.a-burger div:nth-child(3) {
  top: 14px;
}

.a-burger.is-active div:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.a-burger.is-active div:nth-child(2) {
  opacity: 0;
}
.a-burger.is-active div:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* ドロワー（common.js が display:flex / none を制御）
   992px未満：画面フル幅／992px以上：画面幅の約1/3を右側に */
.a-nav-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
}

.a-nav-menu__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: calc(var(--header-h) + 16px) 20px 40px;
  background-color: var(--c-drawer);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 区切り線の幅＝デザインの286px。行の間隔はaの上下paddingで作る */
.a-nav-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 286px;
  margin: auto;
}

/* 一覧とLINEボタンの間隔。
   Bootstrapの .mt-4 が !important のため同じ強さで上書きする */
.a-nav-menu__list .c-pill {
  margin-top: clamp(28px, 3.38vw, 52px) !important;
}

/* 767px以下は画面フル幅。メニューはデザイン通り中央寄せにする */
@media (max-width: 767.98px) {
  .a-nav-menu a:not(.c-pill) {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .a-nav-menu {
    background-color: rgba(78, 101, 53, 0.14);
  }

  .a-nav-menu__inner {
    width: 41%;
    min-width: 340px;
    padding-left: clamp(24px, 2.5vw, 40px);
    padding-right: clamp(24px, 2.5vw, 40px);
    box-shadow: -10px 0 30px rgba(78, 101, 53, 0.12);
  }

  /* パネル幅に対して区切り線が45%になるデザイン比率 */
  .a-nav-menu__list {
    max-width: clamp(220px, 18.5vw, 286px);
  }
}

/* ドロワーを開いている間はヘッダー右上の2つのボタンを隠す。
   :has() は一部ブラウザで子孫のクラス変更時にスタイルが
   再計算されないため、script.js がヘッダーへ付与する
   .is-nav-open を主指定にしている */
.l-header.is-nav-open .c-pill,
.l-header:has(.a-burger.is-active) .c-pill {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.l-header .c-pill {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    opacity 0.25s ease,
    visibility 0.25s ease;
}

/* 開いている間はドロワーがヘッダーごと覆い、閉じる×だけが手前に残るようにする。
   position:fixed のヘッダーは必ず重なり文脈を作ってしまい、中の×だけを
   前に出すことができないので、ヘッダーごとドロワーより手前に上げたうえで、
   背景とロゴを消し、×以外はクリックが下のドロワーに抜けるようにしている */
.l-header.is-nav-open,
.l-header:has(.a-burger.is-active) {
  z-index: 1010;
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.l-header.is-nav-open .l-header__logo,
.l-header:has(.a-burger.is-active) .l-header__logo {
  opacity: 0;
  visibility: hidden;
}

.l-header.is-nav-open .a-burger,
.l-header:has(.a-burger.is-active) .a-burger {
  pointer-events: auto;
}

.a-nav-menu a:not(.c-pill) {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(11px, 1vw, 15px) 0;
  border-bottom: 1px solid var(--c-yellow);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(15px, 1.19vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--c-green);
  transition: color 0.3s ease;
}

.a-nav-menu a:not(.c-pill):hover {
  color: var(--c-yellow);
}

/* ホバーでクローバーが行の左外側にキラッと現れる。
   小さく傾いた状態から、回りながら開いて左へ少し滑り出す。
   ホバーの無い767px以下では出さない（左に置く余白が無く、
   透明でも横スクロールの原因になるため） */
@media (min-width: 768px) {
  .a-nav-menu a:not(.c-pill)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(clamp(28px, 2.47vw, 38px) * -1.13);
    width: clamp(28px, 2.47vw, 38px);
    height: clamp(28px, 2.47vw, 38px);
    background-image: url("../images/clover-nav.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateY(-50%) scale(0.55) rotate(-35deg);
    transition:
      opacity 0.35s ease,
      left 0.35s ease,
      transform 0.35s ease;
    pointer-events: none;
  }

  .a-nav-menu a:not(.c-pill):hover::before {
    left: calc(clamp(28px, 2.47vw, 38px) * -1.39);
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
}

.a-nav-menu p {
  margin: 0;
}

/* ---------------------------------------------------------
   5. FV
   --------------------------------------------------------- */
.p-fv {
  position: relative;
  margin-top: var(--header-h);
  background-color: #fff;
}

/* 画像に重なる下部の帯 */
.p-fv__band {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  background-color: var(--c-bg);
}

.p-fv__media {
  position: relative;
  z-index: 1;
  /* Swiper既定の margin:auto を打ち消し、デザイン通り左端寄せにする */
  margin-left: 0;
  margin-right: auto;
}

.p-fv__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FVのテキストは、コンテナ幅に対する比率で文字サイズを決めることで
   PC・SPともデザイン通りの改行位置（見出し1行＋リード文2行）を保つ。
   1行目「美容カイロ…で、」の実寸が 26.32em なので
   100 / 26.32 = 3.80 → 余裕をみて 3.6cqw、下限12px。 */
.p-fv__text {
  container-type: inline-size;
}

.p-fv__text .c-en {
  white-space: nowrap;
  font-size: clamp(20px, 7.8cqw, 40px);
}

.p-fv__text .c-lines > p {
  display: block;
  white-space: nowrap;
  font-size: clamp(12px, 3.6cqw, 16px);
  line-height: 1.875;
}

/* 375px未満は12pxでも収まらないため、字間と左右余白を詰めて2行を維持する */
@media (max-width: 374.98px) {
  .p-fv__text {
    padding-left: 12px;
    padding-right: 12px;
  }

  .p-fv__text .c-lines > p {
    letter-spacing: 0.02em;
  }
}

/* 340px未満は2行維持が物理的に不可能なため、切れる代わりに折り返す */
@media (max-width: 339.98px) {
  .p-fv__text .c-lines > p {
    white-space: normal;
  }
}

.p-fv__clover {
  pointer-events: none;
  user-select: none;
}

/* スクロール誘導 */
.p-fv__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-fv__scroll p {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(14px, 1.19vw, 18px);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--c-green-d);
}

.p-fv__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 11.24vw;
  margin-top: 10px;
  background-color: var(--c-green-d);
  animation: fvScrollLine 2.4s ease-in-out infinite;
}

@keyframes fvScrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* --- PC ---
   高さは「ビューポート − ヘッダー」で常に画面内に収め、
   画像・テキスト・装飾はFV高さに対する％で絶対配置する。
   （画面幅に比例して高さが伸び続けないようにするため） */
@media (min-width: 992px) {
  .p-fv {
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    min-height: 540px;
  }

  .p-fv__band {
    height: 15.5%;
  }

  .p-fv__media {
    position: absolute;
    left: 0;
    top: 0;
    width: 63.69%;
    height: 91.1%;
    aspect-ratio: auto;
  }

  .p-fv__media .swiper-slide {
    height: 100%;
  }

  .p-fv__text {
    position: absolute;
    z-index: 2;
    left: 60.85%;
    top: 35.4%;
    width: 36%;
  }

  /* 高さ基準で大きさを決めると、iPad Proのような縦長の画面で
     クローバーが巨大になり画面右へはみ出してしまう。
     幅は画面幅基準にし、下端がグリーンの帯の少し上に来る位置で固定する。
     デザインの22.89vw（1512px幅で346px）から一回り小さくした21vwで、
     left はクローバーの見た目の中心が動かない値にしている。
     z-index はテキスト（.p-fv__text は2）より下げて、画面を狭く・
     低くしてキャッチコピーと重なったときも文字が読めるようにしている */
  .p-fv__clover {
    position: absolute;
    z-index: 1;
    left: 78.08%;
    bottom: 28.7%;
    width: 21vw;
    height: auto;
  }

  .p-fv__scroll {
    position: absolute;
    z-index: 2;
    left: 4.37%;
    top: 72.4%;
  }

  .p-fv__scroll::after {
    height: 17vh;
  }
}

/* --- タブレット・スマートフォン ---
   FVで画面の9割を占め、残り1割に次セクションの緑をのぞかせる。
   内側は「写真7割 ＋ 白いテキストブロック3割」の構成。 */
@media (max-width: 991.98px) {
  .p-fv {
    height: calc(90vh - var(--header-h));
    height: calc(90svh - var(--header-h));
    min-height: 460px;
    padding-bottom: 0;
    background-color: var(--c-bg);
  }

  .p-fv__band {
    display: none;
  }

  .p-fv__media {
    width: 100%;
    height: 70%;
    aspect-ratio: auto;
  }

  .p-fv__media .swiper-slide {
    height: 100%;
  }

  .p-fv__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 30%;
    padding: 10px 20px;
    background-color: #fff;
    text-align: center;
  }

  /* 写真の右下からテキストブロックへ少しはみ出させる
     （幅34% ÷ 縦横比1.331 = 高さ25.6vw を使って下端を合わせる） */
  .p-fv__clover {
    position: absolute;
    z-index: 3;
    right: -3%;
    top: calc(70% + 15px - 25.6vw);
    width: 34%;
  }

  .p-fv__scroll {
    display: none;
  }
}

/* ---------------------------------------------------------
   6. About
   --------------------------------------------------------- */
.p-about {
  padding-top: var(--sec-pd);
  padding-bottom: var(--sec-pd);
  background-color: var(--c-bg);
}

/* 本文は濃色。ただしリード文（.c-lead = #a4c084）は対象外にする */
.p-about .c-lines:not(.c-lead) p {
  color: var(--c-text);
}

/* 2枚の画像を段違いに配置（意図的な非対称） */
.p-about__imgs {
  gap: clamp(12px, 2.31vw, 35px);
}

/* 枠の位置・サイズは固定。中の画像だけがスクロールに合わせて上下する
   （画像を枠より16%高くして、はみ出した分の中で動かす） */
.p-about__img {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 317 / 436;
  overflow: hidden;
}

.p-about__img:nth-child(2) {
  margin-top: clamp(20px, 4.43vw, 67px);
}

.p-about__img img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

@media (max-width: 991.98px) {
  /* 写真カラムが先頭に来るため、余白は下側に付ける */
  .p-about__imgs {
    margin-bottom: clamp(32px, 6vw, 56px);
    max-width: 669px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------------------------------------------------
   7. Service
   --------------------------------------------------------- */
.p-service {
  position: relative;
  background-color: var(--c-bg);
}

.p-service__panel {
  padding-top: clamp(48px, 6.28vw, 95px);
  padding-bottom: clamp(90px, 16.87vw, 255px);
  background-color: #fff;
}

/* 白い面が右端で切れ、うすい黄緑がのぞく（デザイン再現）。
   画面が狭いと帯が数十pxしか出ず不自然なため、992px未満は白のみにする */
@media (min-width: 992px) {
  .p-service__panel {
    background: linear-gradient(
      90deg,
      #fff 0,
      #fff 95.11%,
      var(--c-bg) 95.11%,
      var(--c-bg) 100%
    );
  }
}

/* 写真カラムとテキストカラムの間隔は最大70px（デザイン実測値）。
   Bootstrapのガター幅で取ると col-lg-5 / col-lg-7 が
   デザインの 462px / 680px にほぼ一致する */
.p-service__item {
  --bs-gutter-x: clamp(24px, 4.63vw, 70px);
  margin-top: clamp(40px, 6.61vw, 100px);
}

.p-service__item > div > img {
  display: block;
  width: 100%;
  aspect-ratio: 462 / 316;
  object-fit: cover;
}

.p-service__item .c-lines p {
  color: var(--c-text);
}

@media (max-width: 991.98px) {
  .p-service__item > div + div {
    margin-top: clamp(20px, 4vw, 32px);
  }
}

/* メニュー一覧ボタン */
.p-service__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 592px);
  min-height: clamp(76px, 6.22vw, 94px);
  margin: clamp(50px, 7.94vw, 120px) auto 0;
  padding: 10px 16px;
  border: 1px solid var(--c-yellow-d);
  border-radius: 15px;
  background-color: #fff;
  color: var(--c-yellow-d);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.p-service__menu:hover {
  background-color: var(--c-yellow-d);
  color: #fff;
}

.p-service__menu p {
  margin: 0;
  line-height: 1.5;
  font-size: clamp(13px, 0.99vw, 15px);
  letter-spacing: 0.1em;
}

.p-service__menu-en {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(20px, 1.65vw, 25px) !important;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
   8. 施術風景スライダー（左右が画面外へはみ出す・無限ループ）
   同じ6枚を3セット並べ、1セット分だけ等速で移動して先頭に戻すため
   原理的に途切れない。移動量は％ではなく1セット分の実寸で指定し、
   端数のズレが蓄積しないようにしている。
   余白はgapではなくitemのpadding-rightで持たせている。
   --------------------------------------------------------- */
.p-gallery {
  --g-w: clamp(200px, 25.07vw, 379px);
  --g-gap: clamp(12px, 1.98vw, 30px);
  position: relative;
  z-index: 1;
  margin-top: clamp(-135px, -8.93vw, -48px);
  overflow: hidden;
}

.p-gallery__track {
  display: flex;
  width: max-content;
  animation: galleryMarquee 45s linear infinite;
}

.p-gallery__item {
  flex: 0 0 auto;
  width: calc(var(--g-w) + var(--g-gap));
  padding-right: var(--g-gap);
}

.p-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 379 / 272;
  object-fit: cover;
}

@keyframes galleryMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--g-w) * -6 + var(--g-gap) * -6), 0, 0);
  }
}

/* ---------------------------------------------------------
   9. Message（写真が画面右端までフルブリード）
   --------------------------------------------------------- */
.p-message {
  position: relative;
  padding-top: clamp(60px, 9.59vw, 145px);
  padding-bottom: clamp(70px, 12.7vw, 192px);
}

/* 枠の位置・サイズは固定。中の画像だけがスクロールに合わせて上下する */
.p-message__img {
  position: relative;
  aspect-ratio: 746 / 443;
  overflow: hidden;
}

.p-message__img img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

.p-message .c-lines p {
  color: var(--c-text);
}

@media (min-width: 992px) {
  .p-message__img {
    position: absolute;
    right: 0;
    top: clamp(60px, 9.59vw, 145px);
    width: 49.34%;
  }

  .p-message .row {
    min-height: 29.3vw;
  }

  /* 写真は右から49.34%の位置から始まるので、
     テキストカラムの幅を絞って間隔を最大75pxにする */
  .p-message .col-lg-6 {
    max-width: 45.7%;
  }
}

/* 992px未満（kinari-care.com の店舗紹介セクションに準拠）
   写真は右端まで抜き、左だけコンテナ余白分をインデントして
   非対称のフルブリードにする */
@media (max-width: 991.98px) {
  .p-message__img {
    margin-left: clamp(20px, 5vw, 60px);
    margin-bottom: clamp(24px, 5vw, 40px);
  }
}

/* ---------------------------------------------------------
   10. セルフケア3STEP
   --------------------------------------------------------- */
.p-step {
  padding-bottom: clamp(70px, 8.86vw, 134px);
}

.p-step__head {
  position: relative;
  text-align: center;
}

.p-step__head .c-lines {
  position: relative;
  z-index: 1;
}

.p-step__head h2 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(20px, 1.98vw, 30px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--c-green);
}

/* 見出しの背面に重なるクローバー装飾 */
.p-step__clover {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* デザインの実レンダリングに合わせた配置（1512px基準）。
   左は見出しの左上、右は見出しの右下に置く。
   見出しは1512pxで30pxに頭打ちになるため、px値で上限を止めている */
.p-step__clover--l {
  left: calc(50% - min(26.06vw, 394px));
  top: max(-4.03vw, -61px);
  width: min(12.37vw, 187px);
  transform: scaleX(-1);
}

.p-step__clover--r {
  left: calc(50% + min(10.98vw, 166px));
  top: min(0.66vw, 10px);
  width: min(14.09vw, 213px);
}

/* 見出しと本文の間隔（デザイン1512px時100px）。
   固定値だと狭い画面で空きすぎるため可変にする */
.p-step__head + .c-lines {
  margin-top: clamp(28px, 6.61vw, 100px);
}

.p-step .c-lines.text-center p {
  font-size: clamp(14px, 1.06vw, 16px);
}

/* 576px以下は行が細かく折り返すため左揃えにする。
   Bootstrapの .text-center が !important のため同じ強さで上書きする */
@media (max-width: 575.98px) {
  .p-step .c-lines.text-center {
    text-align: left !important;
  }
}

/* カード（デザイン：308px幅×3枚、間隔75px、中央寄せ） */
.p-step__list {
  --bs-gutter-x: clamp(16px, 4.96vw, 75px);
  max-width: calc(1074px + var(--bs-gutter-x));
  margin-left: auto;
  margin-right: auto;
}

.p-step__card {
  position: relative;
  height: 100%;
  padding: clamp(24px, 2.31vw, 35px) clamp(20px, 1.98vw, 30px);
  border-radius: 20px;
  background-color: #fff;
  text-align: center;
}

.p-step__no,
.p-step__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--c-green);
}

.p-step__title {
  margin-bottom: clamp(10px, 1.19vw, 18px);
}

.p-step__text {
  margin: 0;
  text-align: left;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* カード間の三角 */
@media (min-width: 768px) {
  .p-step__list > div:not(:last-child) .p-step__card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-0.5 * var(--bs-gutter-x) - 6px);
    width: 12px;
    height: 26px;
    transform: translateY(-50%);
    background: url("../images/arrow-step.svg") center / contain no-repeat;
  }
}

@media (max-width: 991.98px) {
  .p-step__clover--l {
    left: 0;
    top: -5vw;
    width: 30vw;
  }

  .p-step__clover--r {
    left: auto;
    right: 0;
    top: 0;
    width: 26vw;
  }
}

@media (max-width: 767.98px) {
  .p-step__list > div + div {
    margin-top: clamp(16px, 4vw, 24px);
  }
}

/* ---------------------------------------------------------
   11. News
   --------------------------------------------------------- */
.p-news {
  padding-top: var(--sec-pd);
  padding-bottom: var(--sec-pd);
  background-color: #fff;
}

.p-news__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 789px;
  margin-left: auto;
  margin-right: auto;
}

.p-news__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: clamp(14px, 1.65vw, 23px) clamp(18px, 2.31vw, 35px);
  background-color: var(--c-bg);
  transition: background-color 0.3s ease;
}

.p-news__item:hover {
  background-color: #eef1d9;
}

.p-news__date {
  flex: 0 0 auto;
  width: clamp(100px, 16.53vw, 250px);
  margin: 0;
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-yellow);
}

.p-news__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(15px, 1.19vw, 18px);
  line-height: 1.94;
  letter-spacing: 0.05em;
  color: var(--c-text);
}

@media (max-width: 575.98px) {
  .p-news__date {
    width: 100%;
  }
}

/* 記事データブロック（indexNews）の出力。
   CMSは <section class="webgene-blog"> と空の <header> を自動で出し、
   その中に indexNews の <article class="webgene-item"> を件数ぶん繰り返す。
   行の見た目は静的版と同じ .p-news__item / __date / __title を使うため、
   ここではCMS既定の見出しを隠し、行間だけを指定する */
.p-news__list .webgene-header {
  display: none;
}

.p-news__list .webgene-item + .webgene-item {
  margin-top: 20px;
}

/* ---------------------------------------------------------
   12. バナー（Salon Info / FAQ / Products / Join Us）
   --------------------------------------------------------- */
.p-bnr__list {
  --bs-gutter-x: clamp(16px, 2.45vw, 37px);
  --bs-gutter-y: clamp(16px, 2.38vw, 36px);
  max-width: calc(795px + var(--bs-gutter-x));
  margin-left: auto;
  margin-right: auto;
}

/* バナーごとにボタンの線・文字・矢印の色を変える（Figma実測値） */
.p-bnr {
  --btn-c: var(--c-yellow);
}

.p-bnr--faq {
  --btn-c: #a2bcc0;
}

.p-bnr--products {
  --btn-c: #b4bb8c;
}

.p-bnr--join {
  --btn-c: #af99a0;
}

.p-bnr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 379 / 294;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.p-bnr__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* 通常時はベールなし。ホバー時だけ暗転させる */
.p-bnr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.p-bnr:hover .p-bnr__bg {
  transform: scale(1.05);
}

.p-bnr:hover::after {
  background-color: rgba(78, 101, 53, 0.38);
}

.p-bnr__en,
.p-bnr__ja,
.p-bnr .c-btn {
  position: relative;
  z-index: 2;
}

.p-bnr__en {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(26px, 2.65vw, 40px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #fff;
}

.p-bnr__ja {
  margin: clamp(4px, 0.66vw, 10px) 0 0;
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: #fff;
}

.p-bnr .c-btn {
  margin-top: clamp(14px, 2.05vw, 31px);
}

/* ---------------------------------------------------------
   13. Reservation
   --------------------------------------------------------- */
.p-reserve {
  padding-top: clamp(56px, 7.61vw, 115px);
  padding-bottom: clamp(56px, 8.33vw, 126px);
  background: linear-gradient(89.5deg, #cbcb48 0.8%, #d9d6be 99.9%);
  color: #fff;
}

.p-reserve .c-en,
.p-reserve .c-head__ja {
  color: #fff;
}

.p-reserve .c-head__ja {
  margin-top: clamp(6px, 0.66vw, 10px);
}

.p-reserve__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.79vw, 27px);
  width: min(100%, 629px);
  min-height: clamp(76px, 6.55vw, 99px);
  margin: clamp(24px, 3.31vw, 50px) auto 0;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #fff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.p-reserve__line img {
  width: clamp(38px, 3.31vw, 50px);
  flex: 0 0 auto;
}

.p-reserve__line p {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(20px, 1.65vw, 25px);
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--c-yellow);
}

.p-reserve__line:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* 「当サロンは」だけを576px以下で省くため、p を並べて行内に流している */
.p-reserve__note {
  margin: clamp(14px, 1.32vw, 20px) 0 0;
  font-size: 0;
}

.p-reserve__note > p {
  display: inline;
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.45;
  letter-spacing: 0.1em;
}

/* 576px以下は「当サロンは」を省いて1行に収める */
@media (max-width: 575.98px) {
  .p-reserve__note > .p-reserve__note--sp-off {
    display: none;
  }
}

/* ---------------------------------------------------------
   14. フッター
   --------------------------------------------------------- */
.l-footer {
  padding-top: clamp(50px, 7.94vw, 120px);
  padding-bottom: clamp(30px, 2.78vw, 42px);
  background-color: #fff;
}

.l-footer__logo {
  width: clamp(90px, 8vw, 121px);
}

.l-footer__top .c-lines p {
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
}

/* PCは郵便番号と住所を1行に流し込む（992px未満は2行に分けて
   中途半端な位置で折り返さないようにする） */
@media (min-width: 992px) {
  .l-footer__top .c-lines > p:nth-child(1),
  .l-footer__top .c-lines > p:nth-child(2) {
    display: inline;
  }
}

.l-footer__sns {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.86vw, 13px);
}

.l-footer__sns a {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.06vw, 16px);
  transition: color 0.3s ease;
}

.l-footer__sns a:hover {
  color: var(--c-yellow);
}

.l-footer__sns img {
  width: clamp(18px, 1.39vw, 21px);
  flex: 0 0 auto;
}

.l-footer__sns p {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.45;
  letter-spacing: 0.1em;
}

.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.66vw, 10px) clamp(14px, 1.65vw, 25px);
  margin-top: clamp(24px, 2.45vw, 37px);
  padding-top: clamp(14px, 1.12vw, 17px);
  border-top: 1px solid var(--c-yellow);
}

.l-footer__nav a {
  transition: color 0.3s ease;
}

.l-footer__nav a:hover {
  color: var(--c-yellow);
}

.l-footer__nav p {
  margin: 0;
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
}

.l-footer__copy {
  margin: clamp(50px, 8.6vw, 130px) 0 0;
  text-align: center;
  font-family: var(--font-mincho);
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: var(--c-yellow);
}

/* デザイン通り、罫線とナビをロゴの右側から始める */
@media (min-width: 992px) {
  .l-footer__nav {
    margin-left: 25%;
  }
}

/* 992px未満（kinari-care.com のフッターに準拠）
   ロゴ・住所・SNSはセンター、SNSは横並び、サイトメニューは左寄せ */
@media (max-width: 991.98px) {
  .l-footer__top {
    text-align: center;
  }

  .l-footer__top > div + div {
    margin-top: clamp(20px, 5vw, 32px);
  }

  .l-footer__sns {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(18px, 5.5vw, 36px);
  }

  .l-footer__nav {
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------
   15. アニメーション抑制
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .p-fv__scroll::after {
    animation: none;
    transform: scaleY(1);
  }

  .p-gallery__track {
    animation: none;
  }
}

/* =========================================================
   下層ページ：About（当サロンについて）
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ========================================================= */

/* ---------------------------------------------------------
   16. 下層ページ共通 ページヘッダー
   --------------------------------------------------------- */
.p-pagehead {
  --pagehead-h: clamp(300px, 39.68vw, 600px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--pagehead-h);
  background-color: #f5f5c8;
  overflow: hidden;
  text-align: center;
}

.p-pagehead__inner {
  position: relative;
  z-index: 1;
}

.p-pagehead__en {
  font-size: clamp(40px, 4.96vw, 75px);
  line-height: 1.45;
}

.p-pagehead .c-head__ja {
  margin: 0;
  font-size: clamp(14px, 1.19vw, 18px);
  line-height: 1.67;
}

/* 装飾のクローバー。Figmaの反転・26.66度の回転は画像に焼き込み済み。
   デザイン（1512×600）での位置は 右64px / 上233px / 幅431px。
   幅や右位置を画面幅の％にすると、ヘッダーの高さが600pxで
   頭打ちになる1512px以上で比率が崩れてしまうため、
   3つともページヘッダーの高さを基準にしている。
   高さが600pxのとき 431 / 64 / 233 になり、デザインと重なる。
   下層ページは全ページこの1つの指定で揃える */
.p-pagehead__clover {
  position: absolute;
  z-index: 0;
  top: calc(var(--pagehead-h) * 0.3883);
  right: calc(var(--pagehead-h) * 0.1067);
  bottom: auto;
  width: calc(var(--pagehead-h) * 0.7183);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* スマホサイズではヘッダーの高さ基準だと大きく見えるため、
   画面幅の40％に小さくして15px下げる */
@media (max-width: 575.98px) {
  .p-pagehead__clover {
    top: auto;
    bottom: -15px;
    width: 40%;
  }
}

/* ---------------------------------------------------------
   17. Philosophy
   --------------------------------------------------------- */
.p-philosophy {
  padding-top: clamp(56px, 7.94vw, 120px);
  padding-bottom: clamp(60px, 9.13vw, 138px);
  background-color: #fff;
}

.p-philosophy__head {
  text-align: center;
}

/* 見出しの背面に薄く敷く筆記体 */
.p-philosophy__script {
  margin: 0;
  font-size: clamp(48px, 6.61vw, 100px);
  line-height: 1;
  color: var(--c-bg);
}

.p-philosophy__title {
  position: relative;
  margin-top: clamp(-41px, -2.71vw, -16px);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(21px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

.p-philosophy__body {
  margin-top: clamp(28px, 4.96vw, 75px);
}

.p-philosophy__body .c-lines {
  text-align: center;
}

/* 576px以下は行が細かく折り返すため左揃えにする */
@media (max-width: 575.98px) {
  .p-philosophy__body .c-lines {
    text-align: left;
  }
}

.p-philosophy__body .c-lines + .c-lines {
  margin-top: clamp(20px, 1.98vw, 30px);
}

.p-philosophy__body p {
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-philosophy__imgs {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.65vw, 40px);
  margin-top: clamp(40px, 6.94vw, 105px);
}

.p-philosophy__img {
  flex: 0 1 445px;
  min-width: 0;
}

.p-philosophy__img img {
  display: block;
  width: 100%;
  aspect-ratio: 445 / 331;
  object-fit: cover;
}

/* ---------------------------------------------------------
   18. Our Method
   --------------------------------------------------------- */
.p-method {
  padding-top: clamp(48px, 4.96vw, 75px);
  padding-bottom: clamp(70px, 10.71vw, 162px);
  background-color: #fff;
}

.p-method .c-head__ja {
  margin-top: clamp(6px, 0.99vw, 15px);
  font-size: clamp(15px, 1.32vw, 20px);
  font-family: var(--font-mincho);
  font-weight: 600;
}

.p-method__line {
  width: 100%;
  max-width: 944px;
  height: 1.5px;
  margin: clamp(28px, 5.49vw, 83px) auto 0;
  background-color: var(--c-green);
}

.p-method__item {
  margin-top: clamp(28px, 3.31vw, 50px);
}

.p-method__item + .p-method__item {
  margin-top: clamp(48px, 6.61vw, 100px);
}

.p-method__no {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(24px, 2.31vw, 35px);
  line-height: 1.72;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--c-green-l);
}

.p-method__title {
  margin-top: clamp(6px, 0.99vw, 15px);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--c-green-l);
}

/* 写真596px・テキスト541px・間隔75px（デザイン実測値） */
.p-method__row {
  --bs-gutter-x: clamp(24px, 4.96vw, 75px);
  margin-top: clamp(24px, 3.31vw, 50px);
}

.p-method__img {
  display: block;
  width: 100%;
  aspect-ratio: 596 / 375;
  object-fit: cover;
}

.p-method__lead p {
  margin: 0;
  font-weight: 500;
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-method__text {
  margin-top: clamp(14px, 3.31vw, 50px);
}

.p-method__text p {
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

@media (min-width: 992px) {
  .p-method__row > div:first-child {
    flex: 0 0 52.27%;
    max-width: 52.27%;
  }

  .p-method__row > div:last-child {
    flex: 0 0 47.73%;
    max-width: 47.73%;
  }

  /* テキストは写真より70px下から始まる */
  .p-method__col {
    padding-top: clamp(0px, 4.63vw, 70px);
  }
}

@media (max-width: 991.98px) {
  .p-method__col {
    margin-top: clamp(20px, 4vw, 32px);
  }

  .p-method__lead > p {
    font-size: clamp(17px, 4.8vw, 20px);
  }
}

/* ---------------------------------------------------------
   19. 相乗効果の図
   --------------------------------------------------------- */
.p-synergy {
  padding-top: clamp(40px, 4.63vw, 70px);
  padding-bottom: clamp(50px, 9.59vw, 145px);
  background-color: #fff;
}

/* レスポンシブでも改行位置を変えず2行を維持する */
.c-lines.p-synergy__head > h2 {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(20px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

/* 狭い画面でも1行に収まるよう、画面幅に応じて縮める */
@media (max-width: 575.98px) {
  .c-lines.p-synergy__head > h2 {
    font-size: min(20px, 5.3vw);
  }
}

.p-synergy__text {
  margin-top: clamp(20px, 3.31vw, 50px);
  text-align: center;
}

/* 576px以下は行が細かく折り返すため左揃えにする */
@media (max-width: 575.98px) {
  .p-synergy__text {
    text-align: left;
  }
}

.p-synergy__text p {
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 5つの箱と矢印。箱と隙間の比率を変数にし、
   矢印の長さ（箱3つ＋隙間2つ）を同じ式で算出している */
.p-synergy__chart {
  --box: 12.29%;
  --gap: 9.69%;
  max-width: 1001px;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(40px, 8.4vw, 127px);
}

.p-synergy__band {
  display: flex;
  flex-direction: column;
}

.p-synergy__band--chiro {
  align-items: flex-start;
}

.p-synergy__band--lymph {
  align-items: flex-end;
  margin-top: clamp(8px, 1.32vw, 20px);
}

.p-synergy__arrow,
.p-synergy__label {
  width: calc(var(--box) * 3 + var(--gap) * 2);
}

.p-synergy__arrow {
  display: block;
  height: auto;
}

.p-synergy__label {
  margin: 0;
  text-align: center;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(15px, 1.65vw, 25px);
  line-height: 1.45;
  letter-spacing: 0.05em;
}

.p-synergy__band--chiro .p-synergy__label {
  color: var(--c-green);
}

.p-synergy__band--chiro .p-synergy__arrow {
  margin-top: clamp(4px, 0.66vw, 10px);
}

.p-synergy__band--lymph .p-synergy__label {
  margin-top: clamp(4px, 0.66vw, 10px);
  color: #a47160;
}

.p-synergy__row {
  display: flex;
  align-items: center;
  margin-top: clamp(8px, 1.32vw, 20px);
}

.p-synergy__box {
  flex: 0 0 var(--box);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 123 / 171;
  border-radius: clamp(8px, 1.32vw, 20px);
}

/* 幅を1文字分にして1文字ずつ改行させる（Figmaと同じ組み方） */
.p-synergy__box p {
  width: 1em;
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(14px, 2.31vw, 35px);
  line-height: 1.286;
  text-align: center;
  color: #fff;
}

.p-synergy__box--bone {
  background-color: #cecd53;
}
.p-synergy__box--nerve {
  background-color: #dad27d;
}
.p-synergy__box--muscle {
  background-color: #e4d79e;
}
.p-synergy__box--fat {
  background-color: #d5c499;
}
.p-synergy__box--skin {
  background-color: #e0c8ae;
}

.p-synergy__gap {
  flex: 0 0 var(--gap);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-synergy__gap img {
  width: 38.1%;
  height: auto;
}

/* 768px未満は隙間を詰めて箱を大きく保つ */
@media (max-width: 767.98px) {
  .p-synergy__chart {
    --box: 16.8%;
    --gap: 4%;
  }
}

/* ---------------------------------------------------------
   20. 心までゆるめる時間
   --------------------------------------------------------- */
.p-relax {
  position: relative;
  padding-top: clamp(60px, 13.36vw, 202px);
  padding-bottom: clamp(60px, 13.36vw, 202px);
  overflow: hidden;
}

.p-relax__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-relax::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(246, 247, 235, 0.26);
}

.p-relax::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    #f5f9cf 100%
  );
}

.p-relax .container {
  position: relative;
  z-index: 3;
}

.p-relax__body {
  width: 45.38%;
  margin-left: auto;
}

/* デザインでは1行の見出し。字間はFigmaに合わせて0。
   576px以下だけ「身体だけでなく、」で改行させる */
.c-lines.p-relax__title {
  font-size: 0;
}

.c-lines.p-relax__title > h2 {
  display: inline;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--c-green);
}

@media (max-width: 575.98px) {
  .c-lines.p-relax__title > h2 {
    display: block;
  }
}

.p-relax__text {
  margin-top: clamp(20px, 3.31vw, 50px);
}

.p-relax__text p {
  margin: 0 0 30px;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-relax__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .p-relax__body {
    width: 100%;
  }
}

/* =========================================================
   下層ページ：美容カイロプラクティック
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ========================================================= */

/* ---------------------------------------------------------
   21. ページヘッダーのクローバー（横並びの群れ）
   --------------------------------------------------------- */
/* 配置は 16. の .p-pagehead__clover に一本化した。
   ページパーツ側に残っている .p-pagehead__clover--cluster は
   何も指定しないので、下層ページはどれも同じ位置になる */

/* ---------------------------------------------------------
   22. 美容カイロプラクティックとは
   --------------------------------------------------------- */
.p-cwhat {
  padding-top: clamp(56px, 7.94vw, 120px);
  padding-bottom: clamp(64px, 9.85vw, 149px);
  background-color: #fff;
}

.p-cwhat__head {
  text-align: center;
}

/* 見出しの背面に薄く敷く筆記体 */
.p-cwhat__script {
  margin: 0;
  font-size: clamp(48px, 6.61vw, 100px);
  line-height: 1;
  color: var(--c-bg);
}

.p-cwhat__title {
  position: relative;
  margin: clamp(-41px, -2.71vw, -16px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(21px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

.p-cwhat__row {
  --bs-gutter-x: clamp(24px, 4.96vw, 75px);
  margin-top: clamp(32px, 5.95vw, 90px);
}

.p-cwhat__img {
  display: block;
  width: 100%;
  aspect-ratio: 558 / 389;
  object-fit: cover;
}

.p-cwhat__text p {
  margin: 0 0 clamp(20px, 1.98vw, 30px);
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-cwhat__text p:last-child {
  margin-bottom: 0;
}

/* 991px以下は図版が上に積まれるので本文の上に余白を足す */
@media (max-width: 991.98px) {
  .p-cwhat__col {
    margin-top: clamp(20px, 3.31vw, 32px);
  }
}

/* ---------------------------------------------------------
   23. 4ステップの円
   --------------------------------------------------------- */
/* 円222px・間隔108px（本文幅1212px基準）を％で保持する */
.p-cflow {
  --box: 18.32%;
  --gap: 8.91%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(48px, 6.61vw, 100px);
}

.p-cflow__item {
  flex: 0 0 var(--box);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.p-cflow__item p {
  margin: 0;
  font-weight: 700;
  font-size: clamp(11px, 1.19vw, 18px);
  line-height: 1.667;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}

.p-cflow__item--1 {
  background-color: #cecd53;
}
.p-cflow__item--2 {
  background-color: #dad27d;
}
.p-cflow__item--3 {
  background-color: #d5c499;
}
.p-cflow__item--4 {
  background-color: #e0c8ae;
}

.p-cflow__gap {
  flex: 0 0 var(--gap);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ドット37px ÷ 間隔108px */
.p-cflow__gap img {
  width: 34.26%;
  height: auto;
}

/* 991px以下は「施術前 → 身体が変わる」までの流れが読み取れるよう
   横並びではなく上から下への縦の流れにする。ドットも縦向きにする */
@media (max-width: 991.98px) {
  .p-cflow {
    flex-direction: column;
  }

  .p-cflow__item {
    flex: 0 0 auto;
    width: clamp(180px, 48vw, 260px);
  }

  .p-cflow__item p {
    font-size: clamp(12px, 3.2vw, 16px);
  }

  .p-cflow__gap {
    flex: 0 0 auto;
    width: clamp(30px, 8vw, 37px);
    height: clamp(40px, 10vw, 52px);
  }

  .p-cflow__gap img {
    width: clamp(30px, 8vw, 37px);
    transform: rotate(90deg);
  }
}

/* ---------------------------------------------------------
   24. こんなお悩みの方へ
   --------------------------------------------------------- */
.p-cworry {
  padding-top: clamp(48px, 5.22vw, 79px);
  padding-bottom: clamp(56px, 8.73vw, 132px);
  background-color: #fff;
}

.p-cworry__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(21px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--c-green);
}

.p-cworry__list {
  --bs-gutter-x: clamp(12px, 1.32vw, 20px);
  --bs-gutter-y: clamp(12px, 1.45vw, 22px);
  margin-top: clamp(32px, 4.83vw, 73px);
}

.p-cworry__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(46px, 3.97vw, 60px);
  margin: 0;
  padding-left: 8px;
  padding-right: 8px;
  border: 1px solid var(--c-yellow);
  border-radius: 50px;
  background-color: #fff;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(12px, 1.95vw, 15px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--c-green);
}

.p-cworry__text {
  margin-top: clamp(32px, 4.96vw, 75px);
  text-align: center;
}

/* 576px以下は行が細かく折り返すため左揃えにする */
@media (max-width: 575.98px) {
  .p-cworry__text {
    text-align: left;
  }
}

/* ---------------------------------------------------------
   25. Changes（美容カイロプラクティックを通して生まれる変化）
   --------------------------------------------------------- */
.p-change {
  padding-top: clamp(56px, 7.94vw, 120px);
  padding-bottom: clamp(60px, 8.93vw, 135px);
  background-color: var(--c-bg);
}

.p-change__head {
  position: relative;
  text-align: center;
}

.p-change__sub {
  margin: clamp(10px, 1.45vw, 22px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(15px, 1.32vw, 20px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

/* 見出し右の装飾。デザイン座標 x1146 y169 / 216×162 */
.p-change__clover {
  position: absolute;
  z-index: 0;
  top: clamp(16px, 3.24vw, 49px);
  right: 0;
  width: 17.82%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 3つの変化。デザインでは本文幅1212pxの中で右寄せの1140px */
.p-change__item {
  max-width: 1140px;
  margin-top: clamp(48px, 6.94vw, 105px);
  margin-left: auto;
  margin-right: 0;
}

.p-change__item + .p-change__item {
  margin-top: clamp(48px, 6.61vw, 100px);
}

.p-change__row {
  --bs-gutter-x: clamp(24px, 4.96vw, 75px);
}

.p-change__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.p-change__no {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(34px, 3.97vw, 60px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-green);
}

.p-change__title {
  margin-top: clamp(10px, 1.16vw, 18px);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

.p-change__line {
  width: 100%;
  height: 1.5px;
  margin-top: clamp(16px, 1.98vw, 30px);
  background-color: var(--c-green-l);
}

.p-change__lead {
  margin: clamp(16px, 1.88vw, 28px) 0 0;
  font-weight: 500;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-change__text {
  margin-top: clamp(16px, 2.71vw, 41px);
}

.p-change__text p {
  margin: 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 写真450px・テキスト615px・間隔75px（1140px基準） */
@media (min-width: 992px) {
  .p-change__row > div:first-child {
    flex: 0 0 43.21%;
    max-width: 43.21%;
  }

  .p-change__row > div:last-child {
    flex: 0 0 56.79%;
    max-width: 56.79%;
  }

  .p-change__col {
    padding-top: clamp(0px, 2.48vw, 37.5px);
  }
}

@media (max-width: 991.98px) {
  .p-change__col {
    margin-top: clamp(20px, 3.31vw, 32px);
  }
}

/* =========================================================
   下層ページ：初めての方へ
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ========================================================= */

/* ---------------------------------------------------------
   26. Guide（初めての方にも、安心してお越しいただけるように。）
   --------------------------------------------------------- */
.p-guide {
  padding-top: clamp(56px, 7.94vw, 120px);
  padding-bottom: clamp(48px, 4.5vw, 68px);
  background-color: #fff;
}

.p-guide__head {
  text-align: center;
}

/* 見出しの背面に薄く敷く筆記体 */
.p-guide__script {
  margin: 0;
  font-size: clamp(48px, 6.61vw, 100px);
  line-height: 1;
  color: var(--c-bg);
}

.c-lines.p-guide__title {
  position: relative;
  margin-top: clamp(-41px, -2.71vw, -16px);
}

.c-lines.p-guide__title > h2 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(21px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

.p-guide__text {
  margin-top: clamp(28px, 4.96vw, 75px);
  text-align: center;
}

/* 576px以下は行が細かく折り返すため左揃えにする */
@media (max-width: 575.98px) {
  .p-guide__text {
    text-align: left;
  }
}

/* デザイン通り「〜お帰りまでの流れや、」の後で改行させたいので、
   .c-lines の行結合（992px未満）をこのブロックだけ解除する。
   767.98px以下は結合したまま自然に折り返す */
@media (min-width: 768px) and (max-width: 991.98px) {
  .p-guide__text > p {
    display: block;
  }
}

/* ---------------------------------------------------------
   27. ご予約から施術までの流れ
   --------------------------------------------------------- */
/* 上端の #fefefe から下端の #f6f7eb へ流れるグラデーション */
.p-flow {
  position: relative;
  padding-top: clamp(48px, 7.28vw, 110px);
  padding-bottom: clamp(32px, 3.31vw, 50px);
  background: linear-gradient(180deg, #fefefe 0%, var(--c-bg) 100%);
}

/* 装飾の基準。スクロール演出のtransformの有無で基準がずれないよう、
   ここで明示的に位置の基準にしている */
.p-flow__head {
  position: relative;
  text-align: center;

  /* 装飾の配置は、見出しに対する相対値で決めている。
     --deco-t は見出しの片側の幅（font-size の clamp と同じ形）。
     --deco-e は「見出しの端からクローバーの外端まで」に使える距離で、
     デザイン比率（--deco-t の1.036倍）と、画面内に収まる上限の
     小さい方を採る。これで320pxから広い画面まで、デザイン基準幅
     1512pxと同じ余白比率のまま拡縮する */
  --deco-t: clamp(110.1px, 12.11vw, 183.6px);
  --deco-e: min(calc(var(--deco-t) * 1.036), calc(50vw - 12px - var(--deco-t)));
}

.p-flow__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.98vw, 30px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

/* 見出しを挟む装飾。このページだけで使うクラスなので、
   他ページのクローバー（.p-fv__clover / .p-step__clover /
   .p-pagehead__clover）には影響しない。
   top は見出しの上端からの位置。デザインでは見出しより上から
   重なり始めるため負の値にしている */
.p-flow__deco {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 係数は .p-flow__head の --deco-t / --deco-e 基準。
   デザイン基準幅1512pxでの値（left 310.6px / width 259px など）を
   そのまま比率に直したもの。個別のブレイクポイントは持たせず、
   1本の式で全幅をまかなっている */
.p-flow__deco--l {
  top: calc(var(--deco-e) * -0.5045);
  left: calc(50% - var(--deco-t) - var(--deco-e) * 1.3752);
  width: calc(var(--deco-e) * 1.3594);
}

.p-flow__deco--r {
  top: calc(var(--deco-e) * -0.1586);
  left: calc(50% + var(--deco-t) + var(--deco-e) * 0.0591);
  width: calc(var(--deco-e) * 1.1419);
}

/* STEPの並び。デザインでは本文幅1212pxの中で中央の1048px */
.p-flow__list {
  max-width: 1048px;
  margin: clamp(40px, 9.52vw, 144px) auto 0;
}

.p-flow__item + .p-flow__item {
  margin-top: clamp(36px, 4.96vw, 75px);
}

.p-flow__row {
  --bs-gutter-x: clamp(24px, 4.96vw, 75px);
}

.p-flow__img {
  display: block;
  width: 100%;
  aspect-ratio: 450 / 300;
  object-fit: cover;
}

.p-flow__no {
  margin: 0 0 clamp(6px, 0.79vw, 12px);
  padding-top: clamp(10px, 1.39vw, 21px);
  padding-left: 0.95%;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(15px, 1.32vw, 20px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-green-l);
}

.p-flow__name {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-green-l);
}

.p-flow__text {
  margin-top: clamp(20px, 3.47vw, 52px);
  font-size: clamp(14px, 1.06vw, 16px);
}

.p-flow__text p {
  margin: 0 0 clamp(20px, 1.98vw, 30px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-flow__text p:last-child {
  margin-bottom: 0;
}

.p-flow__line {
  width: 100%;
  height: 1.5px;
  margin-top: clamp(36px, 4.96vw, 75px);
  background-color: var(--c-yellow);
}

/* 写真450px・テキスト523px・間隔75px（1048px基準） */
@media (min-width: 992px) {
  .p-flow__row > div:first-child {
    flex: 0 0 46.75%;
    max-width: 46.75%;
  }

  .p-flow__row > div:last-child {
    flex: 0 0 53.25%;
    max-width: 53.25%;
  }
}

/* 991px以下は写真が上に積まれるのでテキストの上に余白を足す */
@media (max-width: 991.98px) {
  .p-flow__col {
    margin-top: clamp(20px, 3.31vw, 32px);
  }

  .p-flow__no {
    padding-top: 0;
  }
}

/* ---------------------------------------------------------
   28. Attention（ご予約の前に）
   --------------------------------------------------------- */
/* 白のパネルはデザイン通り右端まで届かない（1512pxのうち1363px）。
   幅が狭いと中の文章がパネルからはみ出すため、
   本文の右端＋106px を確保できない幅では画面いっぱいに広げる */
.p-attention {
  position: relative;
  padding-top: clamp(56px, 8.6vw, 130px);
  padding-bottom: clamp(60px, 9.33vw, 141px);
  background-color: var(--c-bg);
}

.p-attention::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(56px, 8.6vw, 130px);
  bottom: clamp(60px, 9.33vw, 141px);
  left: 0;
  width: min(100%, calc(50% + 606px));
  background-color: #fff;
}

/* 下端の余白は白パネルの内側に入る（デザインでは127px） */
.p-attention > .container {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(56px, 8.4vw, 127px);
}

.p-attention__head {
  margin-top: clamp(32px, 5.56vw, 84px);
  text-align: center;
}

.p-attention__head > .c-script {
  margin: 0;
}

.p-attention__sub {
  margin: clamp(10px, 1.45vw, 22px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(15px, 1.32vw, 20px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

.p-attention__list {
  max-width: 1001px;
  margin: clamp(32px, 4.96vw, 75px) auto 0;
}

.p-attention__item {
  position: relative;
  padding-left: clamp(30px, 3.57vw, 54px);
}

.p-attention__item + .p-attention__item {
  margin-top: clamp(24px, 3.31vw, 50px);
}

.p-attention__icon {
  position: absolute;
  top: clamp(2px, 0.26vw, 4px);
  left: 0;
  width: clamp(20px, 1.92vw, 29px);
  height: auto;
}

.p-attention__name {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

.p-attention__text {
  margin-top: clamp(12px, 1.32vw, 20px);
  font-size: clamp(14px, 1.06vw, 16px);
}

.p-attention__text p {
  margin: 0;
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 文中の一部だけ色を変える箇所。CMSがspanを使えないため
   p を並べて親を font-size:0 にし、行内に流し込んでいる */
.p-attention__text--inline {
  font-size: 0;
}

.p-attention__text--inline > p {
  display: inline;
  font-size: clamp(14px, 1.06vw, 16px);
}

.p-attention__em {
  font-weight: 500;
  color: #a47160;
}

/* =========================================================
   下層ページ：よくあるご質問
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ページヘッダーのクローバーは 21. の
   .p-pagehead__clover--cluster をそのまま流用している。
   ========================================================= */

/* ---------------------------------------------------------
   29. Q&Aアコーディオン
   --------------------------------------------------------- */
.p-faq {
  padding-top: clamp(56px, 10.3vw, 156px);
  padding-bottom: clamp(56px, 9.92vw, 150px);
  background-color: #fff;
}

/* デザインの本文幅1131px（左右190pxの余白） */
.p-faq__list {
  max-width: 1131px;
  margin: 0 auto;
}

.p-faq__item {
  padding-bottom: clamp(28px, 3.31vw, 50px);
  border-bottom: 1.5px solid var(--c-green);
}

.p-faq__item + .p-faq__item {
  padding-top: clamp(32px, 3.69vw, 56px);
}

/* --- 質問行 ---------------------------------------------
   質問が2行以上に折り返しても、丸と＋アイコンは
   1行目に揃うようにしている（--band＝1行目の高さ）。 */
.p-faq__q {
  --mark: clamp(34px, 3.19vw, 48px);
  --icon-h: clamp(18px, 1.72vw, 26px);
  --qlh: calc(clamp(15px, 1.19vw, 18px) * 1.75);
  --band: max(var(--mark), var(--qlh));
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.p-faq__q > .p-faq__mark {
  margin-top: calc((var(--band) - var(--mark)) / 2);
}

.p-faq__q > .p-faq__qt {
  margin-top: calc((var(--band) - var(--qlh)) / 2);
}

.p-faq__q > .p-faq__icon {
  margin-top: calc((var(--band) - var(--icon-h)) / 2);
}

/* Q・Aの丸 */
.p-faq__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3.19vw, 48px);
  height: clamp(34px, 3.19vw, 48px);
  /* 丸の直径ぶんだけ縮まないようにする */
  min-width: clamp(34px, 3.19vw, 48px);
  margin: 0;
  border-radius: 50%;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.p-faq__mark--q {
  background-color: #cecd53;
}
.p-faq__mark--a {
  background-color: #e0c8ae;
}

/* 丸との間隔28.9px */
.p-faq__qt {
  flex: 1 1 auto;
  margin: 0 clamp(12px, 1.65vw, 25px) 0 clamp(14px, 1.91vw, 29px);
  font-weight: 500;
  font-size: clamp(15px, 1.19vw, 18px);
  line-height: 1.75;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* ＋アイコン。開いている時は縦棒を回して − にする */
.p-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: clamp(18px, 1.65vw, 25px);
  height: clamp(18px, 1.72vw, 26px);
}

.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--c-green);
  transform: translate(-50%, -50%);
  transition: transform 0.4s ease;
}

.p-faq__icon::before {
  width: 100%;
  height: 2px;
}

.p-faq__icon::after {
  width: 2px;
  height: 100%;
}

.p-faq__item.is-open .p-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* --- 回答行（開閉する） ---------------------------------- */
.p-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.3s ease,
    margin-top 0.4s ease;
}

.p-faq__item.is-open .p-faq__a {
  grid-template-rows: 1fr;
  margin-top: clamp(16px, 2.23vw, 34px);
  opacity: 1;
}

.p-faq__abody {
  display: flex;
  align-items: flex-start;
  min-height: 0;
}

/* 丸との間隔38.48px */
.p-faq__at {
  max-width: 948px;
  padding-top: clamp(3px, 0.48vw, 7px);
  margin-left: clamp(14px, 2.54vw, 38px);
}

.p-faq__at p {
  margin: 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 991px以下は丸を小さくして本文の幅を稼ぐ */
@media (max-width: 991.98px) {
  .p-faq__at {
    max-width: none;
  }
}

/* =========================================================
   下層ページ：美容カイロを学ぶ
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ページヘッダーのクローバーは 21. の
   .p-pagehead__clover--cluster をそのまま流用している。
   ========================================================= */

/* ---------------------------------------------------------
   30. About（仲間を募集しています）
   --------------------------------------------------------- */
.p-join {
  padding-top: clamp(56px, 7.94vw, 120px);
  padding-bottom: clamp(64px, 8.99vw, 136px);
  background-color: #fff;
}

.p-join__head {
  text-align: center;
}

/* 見出しの背面に薄く敷く筆記体。26. の .p-guide__head と同じ構成 */
.p-join__script {
  margin: 0;
  font-size: clamp(48px, 6.61vw, 100px);
  line-height: 1;
  color: var(--c-bg);
}

.p-join__title {
  position: relative;
  margin: clamp(-41px, -2.71vw, -16px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(21px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

/* デザインの904×472。本文幅1212pxの中で中央 */
.p-join__img {
  display: block;
  width: 100%;
  max-width: 904px;
  margin: clamp(28px, 4.96vw, 75px) auto 0;
  aspect-ratio: 904 / 472;
  object-fit: cover;
}

.p-join__lead {
  margin-top: clamp(28px, 4.96vw, 75px);
  text-align: center;
}

.p-join__lead > p {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--c-green-l);
}

.p-join__text {
  margin-top: clamp(24px, 3.31vw, 50px);
  text-align: center;
}

/* 段落の間は1行ぶん空ける */
.p-join__text > .c-lines + .c-lines {
  margin-top: clamp(22px, 1.98vw, 30px);
}

.p-join__text p {
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-join__sub {
  margin: clamp(48px, 10.71vw, 162px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(21px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--c-green);
}

/* カード581px×2＋間隔35px＝1197px。
   Bootstrapのrowだとガターぶん内側に寄ってデザイン幅に合わないため
   このブロックだけgridで組んでいる */
.p-join__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.31vw, 35px);
  max-width: 1197px;
  margin: clamp(28px, 4.96vw, 75px) auto 0;
}

@media (min-width: 992px) {
  .p-join__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1カラムのときは緑→茶→緑→茶と交互になるよう3枚目と4枚目を入れ替える */
@media (max-width: 991.98px) {
  .p-join__card:nth-child(3) {
    order: 4;
  }
  .p-join__card:nth-child(4) {
    order: 3;
  }
}

.p-join__card {
  height: 100%;
  padding: clamp(28px, 3.17vw, 48px) clamp(16px, 1.32vw, 20px)
    clamp(28px, 3.44vw, 52px);
  border-radius: 20px;
  text-align: center;
}

.p-join__card--y {
  background-color: #f5f5cd;
}
.p-join__card--p {
  background-color: #ffede1;
}

.p-join__card-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.p-join__card--y .p-join__card-title {
  color: var(--c-green);
}
.p-join__card--p .p-join__card-title {
  color: #a47160;
}

.p-join__card-text {
  margin: clamp(10px, 1.32vw, 20px) 0 0;
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 576px以下は行が細かく折り返すため左揃えにする */
@media (max-width: 575.98px) {
  .p-join__text {
    text-align: left;
  }
}

/* 576px以上は992px以上と同じ改行位置を保ちたいので、
   .c-lines の行結合（992px未満）をこのブロックだけ解除する。
   575.98px以下は結合したまま自然に折り返す */
@media (min-width: 576px) and (max-width: 991.98px) {
  .p-join__text > .c-lines > p {
    display: block;
  }
}

/* ---------------------------------------------------------
   31. 美容カイロを学ぶ 4つのポイント
   --------------------------------------------------------- */
.p-point {
  padding-top: clamp(56px, 9.92vw, 150px);
  padding-bottom: clamp(40px, 3.77vw, 57px);
  background-color: var(--c-bg);
}

.p-point__title {
  text-align: center;
}

.p-point__title > h2 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(21px, 2.31vw, 35px);
  line-height: 1.46;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

/* デザインの本文幅944px */
.p-point__list {
  max-width: 944px;
  margin: clamp(32px, 3.31vw, 50px) auto 0;
}

.p-point__item {
  display: flex;
  align-items: flex-start;
  padding-top: clamp(32px, 4.96vw, 75px);
  padding-bottom: clamp(32px, 4.96vw, 75px);
  border-top: 1.5px solid var(--c-green);
}

.p-point__item:last-child {
  border-bottom: 1.5px solid var(--c-green);
}

/* 数字は120px・行送り60pxで、上端をラベルと揃えている */
.p-point__no {
  flex: 0 0 auto;
  width: clamp(64px, 9.52vw, 144px);
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(54px, 7.94vw, 120px);
  line-height: 0.5;
  letter-spacing: 0;
  color: var(--c-green-l);
}

.p-point__body {
  flex: 1 1 auto;
  margin-left: clamp(16px, 3.31vw, 50px);
}

.p-point__label {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

.p-point__lead {
  margin: clamp(6px, 0.66vw, 10px) 0 0;
  font-weight: 500;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-point__text {
  max-width: 750px;
  margin: clamp(10px, 0.93vw, 14px) 0 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 575px以下は数字を本文の上に置いて横幅を稼ぐ。
   数字・ラベル・サブキャッチは中央、本文だけ左揃え */
@media (max-width: 575.98px) {
  .p-point__item {
    display: block;
    text-align: center;
  }

  .p-point__no {
    width: auto;
    margin-bottom: clamp(18px, 5.33vw, 20px);
  }

  .p-point__body {
    margin-left: 0;
  }

  .p-point__text {
    text-align: left;
  }
}

/* ---------------------------------------------------------
   32. Message（「やってみたい」という気持ちが、最初の一歩。）
   --------------------------------------------------------- */
.p-jmsg {
  position: relative;
  padding-top: clamp(56px, 10.85vw, 164px);
  padding-bottom: clamp(56px, 14.15vw, 214px);
  background-color: var(--c-bg);
}

/* 白いパネル。デザインは1149×724 */
.p-jmsg__panel {
  position: relative;
  z-index: 1;
  max-width: 1149px;
  margin: 0 auto;
  padding: clamp(52px, 6.75vw, 102px) clamp(20px, 2.65vw, 40px)
    clamp(48px, 5.75vw, 87px);
  background-color: #fff;
}

.p-jmsg__title {
  text-align: center;
}

.p-jmsg__title > h2 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #364921;
}

/* 本文はデザイン幅550pxの中央寄せ */
.p-jmsg__text {
  max-width: 550px;
  margin: clamp(28px, 4.96vw, 75px) auto 0;
  text-align: center;
}

/* 段落の間は1行ぶん空ける */
.p-jmsg__text > .c-lines + .c-lines {
  margin-top: clamp(22px, 1.98vw, 30px);
}

.p-jmsg__text p {
  margin: 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 筆記体のMessage。デザインの-18.41度をそのまま再現している */
.p-jmsg__script {
  position: absolute;
  z-index: 2;
  top: clamp(64px, 11.51vw, 174px);
  left: 19.09%;
  /* デザインの412px（90px時）。文字サイズに比例させて折り返さないようにする */
  width: 4.58em;
  margin: 0;
  font-size: clamp(34px, 5.95vw, 90px);
  line-height: 1.11;
  color: var(--c-green);
  transform: translate(-50%, -50%) rotate(-18.41deg);
  pointer-events: none;
  user-select: none;
}

/* 装飾のクローバー。左は反転・回転を画像に焼き込み済み
   （「初めての方へ」の clover-step-l.png と同じもの） */
.p-jmsg__deco {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.p-jmsg__deco--l {
  top: clamp(52px, 11.51vw, 174px);
  left: 21.49%;
  width: 17.11%;
}

.p-jmsg__deco--r {
  top: clamp(72px, 15.81vw, 239px);
  left: 62.63%;
  width: 14.29%;
}

/* 991px以下はパネルの上で「Message」を中央に置き、
   その左右にクローバーを並べる。傾きは外して水平にする */
@media (max-width: 991.98px) {
  .p-jmsg {
    padding-top: clamp(48px, 11.5vw, 110px);
  }

  .p-jmsg__deco-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(16px, 3.4vw, 32px);
  }

  .p-jmsg__deco {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    /* 文字に少しだけ重ねる */
    width: clamp(64px, 16.5vw, 128px);
    margin-top: clamp(10px, 3.5vw, 30px);
  }

  .p-jmsg__deco--l {
    margin-right: clamp(-24px, -3vw, -10px);
  }

  .p-jmsg__deco--r {
    margin-left: clamp(-24px, -3vw, -10px);
  }

  .p-jmsg__script {
    position: static;
    width: auto;
    font-size: clamp(36px, 9vw, 70px);
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .p-jmsg__text {
    text-align: left;
  }
}

/* =========================================================
   下層ページ：店舗情報
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ページヘッダーのクローバーは 21. の
   .p-pagehead__clover--cluster をそのまま流用している。
   ========================================================= */

/* ---------------------------------------------------------
   33. 店舗情報（写真＋概要＋SNSボタン）
   --------------------------------------------------------- */
.p-shop {
  padding-top: clamp(56px, 9.92vw, 150px);
  padding-bottom: clamp(40px, 4.5vw, 68px);
  background-color: #fff;
}

/* 写真546px・概要596px・間隔73px（本文幅1212px基準） */
.p-shop__row {
  --bs-gutter-x: clamp(24px, 4.83vw, 73px);
}

.p-shop__img {
  display: block;
  width: 100%;
  aspect-ratio: 546 / 710;
  object-fit: cover;
}

@media (min-width: 992px) {
  .p-shop__row > div:first-child {
    flex: 0 0 48.06%;
    max-width: 48.06%;
  }

  .p-shop__row > div:last-child {
    flex: 0 0 51.94%;
    max-width: 51.94%;
  }
}

/* デザインでは写真より26px下から概要が始まる */
@media (min-width: 992px) {
  .p-shop__list {
    margin-top: clamp(0px, 1.72vw, 26px);
  }
}

/* 991px以下は写真が全幅になり縦に伸びすぎるため幅を抑えて中央に置く */
@media (max-width: 991.98px) {
  .p-shop__col {
    margin-top: clamp(24px, 3.97vw, 40px);
  }

  .p-shop__img {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 575px以下は高さ300pxの帯にする */
@media (max-width: 575.98px) {
  .p-shop__img {
    max-width: none;
    height: 300px;
    aspect-ratio: auto;
  }
}

/* --- 概要の行 ------------------------------------------- */
.p-shop__item {
  display: flex;
  align-items: center;
  padding-bottom: clamp(14px, 2.08vw, 31.5px);
  border-bottom: 1.5px solid var(--c-green);
}

.p-shop__item + .p-shop__item {
  margin-top: clamp(14px, 1.98vw, 30px);
}

/* 見出し195px（デザインの766→961） */
.p-shop__label {
  flex: 0 0 auto;
  width: clamp(90px, 12.9vw, 195px);
  margin: 0;
  font-weight: 500;
  font-size: clamp(15px, 1.19vw, 18px);
  line-height: 2.22;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-shop__value {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* --- 公式LINE／Instagramボタン --------------------------- */
.p-shop__btns {
  display: flex;
  gap: clamp(12px, 2.25vw, 34px);
  margin-top: clamp(20px, 1.98vw, 30px);
}

.p-shop__btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  max-width: 281px;
  height: clamp(48px, 4.37vw, 66px);
  border-radius: 15px;
  background: var(--grad);
  transition: box-shadow 0.3s ease;
}

.p-shop__btn img {
  width: clamp(26px, 2.38vw, 36px);
  height: auto;
}

.p-shop__btn p {
  margin: 0 0 0 clamp(8px, 0.99vw, 15px);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
}

.p-shop__btn:hover {
  box-shadow: 0 6px 16px rgba(78, 101, 53, 0.25);
}

/* --- 店内写真の帯（TOPの 10. と同じマーキー） ------------- */
.p-gallery--info {
  margin-top: clamp(48px, 7.94vw, 120px);
}

/* --- Access見出し --------------------------------------- */
.p-shop__access {
  margin-top: clamp(56px, 9.92vw, 150px);
  text-align: center;
}

.p-shop__script {
  margin: 0;
  line-height: 1.11;
}

.p-shop__accessja {
  margin: clamp(6px, 0.99vw, 15px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--c-green);
}

/* ---------------------------------------------------------
   34. Googleマップ（画面幅いっぱい）
   --------------------------------------------------------- */
.p-map {
  position: relative;
  width: 100%;
  height: clamp(280px, 50.99vw, 771px);
  background-color: var(--c-bg);
}

/* CMSの「地図」パーツは div でラップした iframe を出力するため、
   ラッパーと iframe の両方に高さを持たせている */
.p-map > div,
.p-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   下層ページ：取扱商品
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ページヘッダーのクローバーは 21. の
   .p-pagehead__clover--cluster を、
   Philosophy見出しは 17. の .p-philosophy を、
   背景写真のメッセージは 20. の .p-relax をそれぞれ流用し、
   デザインの差分だけを下記で上書きしている。
   ========================================================= */

/* ---------------------------------------------------------
   35. Philosophy（取扱商品ページの差分）
   --------------------------------------------------------- */
/* このページは見出しの下に写真を並べないため下余白だけ差し替える */
.p-philosophy--products {
  padding-bottom: clamp(48px, 7.28vw, 110px);
}

/* ---------------------------------------------------------
   36. 取扱商品一覧
   --------------------------------------------------------- */
/* 背景は白→#f6f7eb のグラデーション。次のセクションへ自然につなげる */
.p-prod {
  padding-top: clamp(32px, 3.97vw, 60px);
  padding-bottom: clamp(64px, 9.33vw, 141px);
  background: linear-gradient(180deg, #fff 0%, var(--c-bg) 100%);
}

.p-prod__list {
  max-width: 1048px;
  margin: 0 auto;
}

/* 992px未満は写真を上に回すため column-reverse にしている。
   下余白73.5pxと境界線1.5pxを足して、行の間隔がデザインの75pxになる */
.p-prod__item {
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: calc(clamp(32px, 4.96vw, 75px) - 1.5px);
  border-bottom: 1.5px solid var(--c-yellow);
}

.p-prod__item + .p-prod__item {
  padding-top: clamp(32px, 4.96vw, 75px);
}

/* 992px未満は写真を上に回す。元画像が450pxのため、
   引き伸ばしすぎないよう上限を設けて中央に置く */
.p-prod__img {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto clamp(20px, 3.31vw, 30px);
  aspect-ratio: 450 / 300;
  object-fit: cover;
}

.p-prod__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.4;
  color: var(--c-green-l);
}

.p-prod__sub {
  margin-top: clamp(14px, 1.85vw, 28px);
}

.p-prod__sub p {
  font-weight: 500;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-prod__text {
  margin: clamp(16px, 1.98vw, 30px) 0 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 992px以上は本文541px・写真450px・間隔57px（一覧幅1048px基準） */
@media (min-width: 992px) {
  .p-prod__item {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .p-prod__body {
    flex: 0 1 51.62%;
    min-width: 0;
  }

  .p-prod__img {
    flex: 0 0 42.94%;
    width: 42.94%;
    max-width: none;
    margin: 0;
  }
}

/* 992px未満は .c-lines が行を結合して文字サイズを上書きするため、
   サブキャッチだけ元の指定に戻す */
@media (max-width: 991.98px) {
  .p-prod__sub.c-lines > p {
    font-size: clamp(16px, 1.32vw, 20px);
  }
}

/* ---------------------------------------------------------
   37. 背景写真のメッセージ（取扱商品ページの差分）
   --------------------------------------------------------- */
/* デザイン上の白ベールの濃度が About ページより薄い */
.p-relax--products::before {
  background-color: rgba(246, 247, 235, 0.21);
}

/* 本文に意図した改行があるため .c-lines で行を包んでいる。
   段落間の30pxは .c-lines どうしの余白で作る */
.p-relax__text .c-lines p {
  margin-bottom: 0;
}

.p-relax__text .c-lines + .c-lines {
  margin-top: 30px;
}

/* =========================================================
   下層ページ：メニュー
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ページヘッダーのクローバーは 21. の
   .p-pagehead__clover--cluster を、
   セクション見出しは 17. の
   .p-philosophy__head / __script / __title をそのまま流用し、
   このページ固有の部分だけを 38. / 39. で定義している。
   ========================================================= */

/* ---------------------------------------------------------
   38. メニュー内リンク（ページ内アンカー）
   --------------------------------------------------------- */
.p-menu {
  --menu-rowgap: clamp(14px, 1.65vw, 25px);
  padding-top: clamp(56px, 7.94vw, 120px);
  padding-bottom: clamp(56px, 8.73vw, 132px);
  background-color: #fff;
}

/* 3ボタン316px＋間隔25pxで998px。768px未満は1列に落とす */
.p-menu__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.65vw, 25px);
  max-width: 998px;
  margin: 0 auto clamp(56px, 8.6vw, 130px);
}

@media (min-width: 768px) {
  .p-menu__nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-menu__nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.89vw, 13.5px);
  height: clamp(64px, 5.89vw, 89px);
  padding: 6px 12px;
  border: 1px solid var(--c-green-l);
  border-radius: 20px;
  background-color: #fff;
  transition: box-shadow 0.3s ease;
}

.p-menu__nav-btn p {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(14px, 1.19vw, 18px);
  line-height: 1.55;
  color: var(--c-green-l);
}

/* 下向きのシェブロン。CMSで使えるタグにsvgが無いため
   2本の疑似要素を±30度に倒して作っている */
.p-menu__nav-arrow {
  position: relative;
  width: clamp(16px, 1.52vw, 23px);
  aspect-ratio: 23 / 7;
  transition: transform 0.3s ease;
}

.p-menu__nav-arrow::before,
.p-menu__nav-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 57.7%;
  height: 1px;
  background-color: var(--c-green-l);
}

.p-menu__nav-arrow::before {
  transform-origin: left bottom;
  transform: rotate(-30deg);
}

.p-menu__nav-arrow::after {
  margin-left: -57.7%;
  transform-origin: right bottom;
  transform: rotate(30deg);
}

/* ホバーはボタンの色を変えず、影が入って矢印が下へ動くだけ */
.p-menu__nav-btn:hover {
  box-shadow: 0 8px 18px rgba(78, 101, 53, 0.22);
}

.p-menu__nav-btn:hover .p-menu__nav-arrow {
  transform: translateY(4px);
}

/* ---------------------------------------------------------
   39. 料金表
   --------------------------------------------------------- */
.p-menu__sec + .p-menu__sec {
  margin-top: clamp(56px, 9.92vw, 150px);
}

/* 直前が料金表の行で終わるセクションだけ、デザインどおり6px広く取る */
.p-menu__sec + .p-menu__sec--gap-wide {
  margin-top: clamp(58px, 10.32vw, 156px);
}

/* スムーススクロールの着地点。ヘッダー分はcommon.jsが引いている */
.p-menu__list {
  max-width: 825px;
  margin: clamp(40px, 6.61vw, 100px) auto 0;
}

.p-menu__group + .p-menu__group {
  margin-top: clamp(48px, 7.94vw, 120px);
}

.p-menu__gtitle {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.4;
  color: var(--c-green-l);
}

.p-menu__gtitle + .p-menu__rows {
  margin-top: clamp(20px, 2.31vw, 35px);
}

.p-menu__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 1.32vw, 20px);
  padding-bottom: var(--menu-rowgap);
}

/* 区切り線は疑似要素で描く。border-bottomだと1.5pxがブラウザ側で
   1pxに丸められ、行が積み上がるほどデザインとずれていくため */
.p-menu__row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5px;
  background-color: var(--c-green);
}

.p-menu__row + .p-menu__row {
  padding-top: var(--menu-rowgap);
}

.p-menu__label {
  margin: 0;
  font-weight: 500;
  font-size: clamp(15px, 1.32vw, 20px);
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-menu__price {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(15px, 1.32vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: right;
  white-space: nowrap;
  color: var(--c-text);
}

.p-menu__ticket {
  margin-top: clamp(24px, 3.31vw, 50px);
  padding: clamp(24px, 2.65vw, 40px) clamp(20px, 3.57vw, 54px)
    clamp(32px, 4.03vw, 61px);
  background-color: var(--c-bg);
}

.p-menu__ticket-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.45;
  text-align: center;
  color: var(--c-green);
}

.p-menu__ticket-title + .p-menu__rows {
  margin-top: clamp(14px, 1.65vw, 25px);
}

/* =========================================================
   下層ページ：お知らせ（記事一覧）
   記事データブロック newsList の出力に当てるスタイル。
   行の見た目はTOPページと共通の
   .p-news__item / __date / __title をそのまま使い、
   ここでは一覧の幅・行間・ページ送りだけを定義する。
   TOPページ（indexNews）に影響が出ないよう、セレクタは
   newsList だけが出力する .p-newslist__item を起点にしている。
   ========================================================= */

/* ---------------------------------------------------------
   40. お知らせ一覧
   --------------------------------------------------------- */
.p-newslist__item {
  max-width: 789px;
  margin-left: auto;
  margin-right: auto;
}

.p-newslist__item + .p-newslist__item {
  margin-top: 20px;
}

/* ページ送り。
   CMSが <div class="webgene-pagination"><ul><li class="prev|next"><a>…
   という形で自動出力し、データブロック側で付けたclassは消えてしまうため、
   newsListだけが出力する .p-newslist__item の弟要素として限定している。
   余白はulに持たせている。1ページしかないときは中身が空になるので、
   ul:empty で余白ごと消える */
.p-newslist__item ~ .webgene-pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.32vw, 20px);
  margin: clamp(40px, 4.96vw, 75px) 0 0;
  padding: 0;
  list-style: none;
}

.p-newslist__item ~ .webgene-pagination ul:empty {
  display: none;
}

/* 最初と最後のページは片方のボタンしか出ない。
   そのとき中央に寄ってボタンの位置が動かないよう、
   ボタン幅＋間隔の半分だけずらして2つ並んだときと同じ位置に置く */
.p-newslist__item ~ .webgene-pagination li.next:only-child {
  transform: translateX(
    calc((clamp(132px, 12.24vw, 185px) + clamp(12px, 1.32vw, 20px)) / 2)
  );
}

.p-newslist__item ~ .webgene-pagination li.prev:only-child {
  transform: translateX(
    calc((clamp(132px, 12.24vw, 185px) + clamp(12px, 1.32vw, 20px)) / -2)
  );
}

/* ボタンはヘッダーの白抜きボタンと同じ見た目にそろえる */
.p-newslist__item ~ .webgene-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(38px, 2.98vw, 45px);
  min-width: clamp(132px, 12.24vw, 185px);
  padding-left: clamp(14px, 1.98vw, 30px);
  padding-right: clamp(14px, 1.98vw, 30px);
  border: 1px solid var(--c-yellow);
  border-radius: 50px;
  background-color: #fff;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(12px, 0.99vw, 15px);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--c-yellow);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.p-newslist__item ~ .webgene-pagination a:hover {
  background-color: var(--c-yellow-h);
  border-color: var(--c-yellow-h);
  color: #fff;
}

/* =========================================================
   下層ページ：お知らせ（記事詳細）
   記事データブロック newsDetails の出力に当てるスタイル。
   このページだけページヘッダーが無く、固定ヘッダーの下から
   本文が始まるので、上余白だけこちらで足している。
   お知らせ一覧（newsList）・TOP（indexNews）と
   クラス名がぶつからないよう、セレクタはすべて
   newsDetails だけが出力する .p-newsdetail 配下に限定している。
   ========================================================= */

/* ---------------------------------------------------------
   41. お知らせ詳細
   --------------------------------------------------------- */

/* 上余白。.p-philosophy の上余白と足して
   「ヘッダーの高さ＋最大100px」になるように差分を足している。
   1512pxで 120 + 86 = 206px、デザインの日付の位置と同じ */
.p-newsdetail {
  padding-top: calc(
    var(--header-h) - clamp(56px, 7.94vw, 120px) + clamp(40px, 6.61vw, 100px)
  );
}

.p-newsdetail__date {
  margin: 0;
  font-size: clamp(14px, 1.19vw, 18px);
  line-height: 1.67;
  letter-spacing: 0.1em;
  color: var(--c-yellow);
}

.p-newsdetail__title {
  margin: clamp(8px, 0.79vw, 12px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.44;
  color: var(--c-green);
}

/* 画像はデザインの1212×691で比率を固定し、
   縦横比の違う画像が入ってもトリミングで収まるようにする */
.p-newsdetail__img {
  margin-top: clamp(32px, 4.96vw, 75px);
  aspect-ratio: 1212 / 691;
  overflow: hidden;
}

/* 画像が登録されていない記事では中身が空になるので、余白ごと消す */
.p-newsdetail__img:empty {
  display: none;
}

.p-newsdetail__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文は記事投稿の内容がそのまま入る。改行は<br>で入ってくる */
.p-newsdetail__text {
  margin: clamp(32px, 4.96vw, 75px) 0 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* 前へ／次へ。
   最初と最後の記事ではリンクが出ず、代わりに指定した文字だけが入るため、
   pの側で文字を消し、幅はボタン1つぶんで固定している。
   こうすると片方が無い回でも2つ並んだときと同じ位置にボタンが残る */
.p-newsdetail__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.32vw, 20px);
  margin-top: clamp(40px, 4.96vw, 75px);
}

.p-newsdetail__nav p {
  flex: 0 0 auto;
  width: clamp(132px, 12.24vw, 185px);
  margin: 0;
  font-size: 0;
}

/* リンクはCMSが<a>だけを出力しclassを付けられないため、
   ヘッダーの .c-pill--outline と同じ見た目をここで当てている */
.p-newsdetail__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(38px, 2.98vw, 45px);
  border: 1px solid var(--c-yellow);
  border-radius: 50px;
  background-color: #fff;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(12px, 0.99vw, 15px);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--c-yellow);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.p-newsdetail__nav a:hover {
  background-color: var(--c-yellow-h);
  border-color: var(--c-yellow-h);
  color: #fff;
}

.p-newsdetail__back {
  margin-top: clamp(20px, 2.31vw, 35px);
  text-align: center;
}

/* =========================================================
   共通：図版の拡大モーダル
   script.js が body の末尾に組み立てるライトボックス。
   タップ／クリックで開き、ピンチ・ホイール・ボタンで拡大縮小、
   拡大中はドラッグで移動できる。
   ========================================================= */

/* ---------------------------------------------------------
   42. 拡大モーダル
   --------------------------------------------------------- */
.c-zoomable {
  cursor: zoom-in;
}

body.is-lightbox-open {
  overflow: hidden;
}

.c-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
}

.c-lightbox.is-open {
  display: block;
}

.c-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.82);
}

/* 画像を置く面。ピンチをブラウザに取られないよう touch-action を切る。
   上下の余白は閉じる×とズームボタンのぶんを avoid して広めに取っている */
.c-lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 5.29vw, 80px) clamp(16px, 3.31vw, 50px)
    clamp(72px, 7.28vw, 110px);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* common.css の img { width: 100% } が効いたままだと幅が確定してしまい、
   max-height で高さだけ詰められて縦横比が崩れるため、
   width / height をどちらも auto に戻している */
.c-lightbox__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
  -webkit-user-drag: none;
}

.c-lightbox.is-zoomed .c-lightbox__img {
  cursor: grab;
}

.c-lightbox__close {
  position: absolute;
  top: clamp(10px, 1.32vw, 20px);
  right: clamp(10px, 1.32vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.31vw, 50px);
  height: clamp(40px, 3.31vw, 50px);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.c-lightbox__close:hover {
  background-color: #fff;
}

.c-lightbox__close p {
  margin: 0;
  font-size: clamp(22px, 1.85vw, 28px);
  line-height: 1;
  color: var(--c-green);
}

/* 拡大・縮小ボタン。画面下中央に並べる */
.c-lightbox__tools {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2.31vw, 35px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.79vw, 12px);
  transform: translateX(-50%);
}

.c-lightbox__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(44px, 3.57vw, 54px);
  height: clamp(40px, 2.98vw, 45px);
  padding-left: clamp(12px, 1.32vw, 20px);
  padding-right: clamp(12px, 1.32vw, 20px);
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.c-lightbox__btn:hover {
  background-color: #fff;
}

.c-lightbox__btn p {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(13px, 0.99vw, 15px);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--c-green);
}

/* =========================================================
   下層ページ：代表紹介
   デザイン基準幅1512px。座標・サイズは clamp() で可変化。
   ページヘッダーは 16. / 21. を、
   予約CTAは 13. をそのまま流用し、
   このページ固有の部分だけを 43. / 44. で定義している。
   ========================================================= */

/* ---------------------------------------------------------
   43. 代表あいさつ
   --------------------------------------------------------- */
.p-greet {
  padding-top: clamp(48px, 9.92vw, 150px);
  padding-bottom: clamp(56px, 9.92vw, 150px);
  background-color: #fff;
  /* クローバーが写真の右へはみ出すため、狭い幅で横スクロールが
     出ないように念のため抑えている */
  overflow: hidden;
}

.p-greet__photo {
  position: relative;
  width: 100%;
  max-width: 545px;
  margin: 0 auto;
}

.p-greet__img {
  display: block;
  width: 100%;
  aspect-ratio: 545 / 406;
  object-fit: cover;
}

/* 写真の右下に少し重ねて置く飾り */
.p-greet__clover {
  position: absolute;
  z-index: 1;
  left: 76.51%;
  top: 70.94%;
  width: 46.97%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 992px未満は写真の右に飾りを置く余白が無くなるため、内側に寄せる */
@media (max-width: 991.98px) {
  .p-greet__clover {
    left: auto;
    right: -4%;
    top: 66%;
    width: 36%;
  }
}

.p-greet__name {
  margin-top: clamp(20px, 2.98vw, 45px);
  text-align: center;
}

.p-greet__role {
  margin: 0;
  font-size: clamp(15px, 1.32vw, 20px);
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-greet__ja {
  margin: clamp(8px, 1.46vw, 22px) 0 0;
  font-weight: 500;
  font-size: clamp(26px, 2.31vw, 35px);
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

.p-greet__en {
  margin: clamp(8px, 0.99vw, 15px) 0 0;
  font-family: var(--font-script);
  font-weight: 500;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 1.5;
  color: var(--c-green-l);
}

/* 375px前後でも1行に収まるよう、狭い幅では少し小さくする。
   それでも折り返す320px付近では text-wrap で2行を均等に割る */
.p-greet__title {
  margin: clamp(32px, 4.96vw, 75px) 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(16px, 4.53vw, 25px);
  line-height: 1.44;
  text-align: center;
  text-wrap: balance;
  color: var(--c-green);
}

.p-greet__text {
  margin-top: clamp(24px, 3.37vw, 51px);
}

.p-greet__text .c-lines {
  text-align: center;
}

/* 576px以下は行が細かく折り返すため左揃えにする */
@media (max-width: 575.98px) {
  .p-greet__text .c-lines {
    text-align: left;
  }
}

.p-greet__text .c-lines + .c-lines {
  margin-top: clamp(20px, 1.98vw, 30px);
}

.p-greet__text p {
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* ---------------------------------------------------------
   44. 代表の想い
   --------------------------------------------------------- */
.p-story {
  padding-top: clamp(48px, 8.66vw, 131px);
  padding-bottom: clamp(56px, 9.33vw, 141px);
  background-color: var(--c-bg);
}

/* 写真450px＋間隔75px＋テキスト615px＝1140px（デザイン実測値） */
.p-story__item {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.p-story__item + .p-story__item {
  margin-top: clamp(48px, 7.94vw, 120px);
}

.p-story__row {
  --bs-gutter-x: clamp(24px, 4.96vw, 75px);
}

.p-story__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.p-story__title h2 {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.6;
  color: var(--c-green);
}

/* 見出し下の罫線。border-bottomだと1.5pxがブラウザ側で1pxに
   丸められるため、高さを持つ要素として描いている */
.p-story__line {
  height: 1.5px;
  margin-top: clamp(14px, 1.98vw, 30px);
  background-color: var(--c-green-l);
}

.p-story__text {
  margin-top: clamp(14px, 1.88vw, 28.5px);
}

.p-story__text .c-lines + .c-lines {
  margin-top: clamp(20px, 1.98vw, 30px);
}

.p-story__text p {
  margin: 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

@media (min-width: 992px) {
  /* .row の左右にガター分の負マージンが付くため、
     カラム幅は 1140+75=1215px を基準に割り出している */
  .p-story__row > div:first-child {
    flex: 0 0 43.21%;
    max-width: 43.21%;
  }

  .p-story__row > div:last-child {
    flex: 0 0 56.79%;
    max-width: 56.79%;
  }
}

@media (max-width: 991.98px) {
  .p-story__col {
    margin-top: clamp(20px, 4vw, 32px);
  }
}