@charset "UTF-8";

/* =====================================================================
   脱毛・リラクSOCU
   色を変えたいときは、下の :root { } の中の値を書き換えてください。
   ===================================================================== */

@layer reset, base, layout, components, utilities;

/* ---------------------------------------------------------------
   デザイントークン
   --------------------------------------------------------------- */
@layer base {
  :root {
    /* 色 ------------------------------------------------------- */
    --paper:      #f6f6f2;  /* 白しっくいの壁 */
    --paper-warm: #efefe8;  /* ひとつ沈めた背景 */
    --card:       #fffffc;
    --ink:        #1b241e;  /* 文字。緑みのある黒 */
    --ink-soft:   #4b554d;  /* 補足の文字。明朝は線が細いので少し濃いめ */
    --pine:       #0e5c36;  /* ロゴの濃い緑。主役 */
    --pine-deep:  #084025;
    --leaf:       #8cbf3f;  /* ロゴの黄緑。ごく少量だけ */
    --lamp:       #c8873c;  /* 店内のランプの色 */
    --gold:       #c9a45c;  /* メニュー画像の金色。黒いカードと、クチコミの★だけ */
    --line:       #dedfd7;  /* 罫線 */
    --line-soft:  #ebece5;

    /* 文字 -----------------------------------------------------
       サイト全体を明朝体で統一しています。
       主役は Zen Old Mincho(Webフォント。index.html の <link> で読み込み)。
       和文も欧文も数字もこの1書体でまかなうので、書体が混ざりません。
       端末任せだった頃と違い、Windows・iPhone・海外の端末で見た目が揃います。

       以前は数字だけ別フォント(Segoe UIを切り出した SiteNumerals)に
       差し替えていましたが、それは「端末ごとに数字がバラつくのを防ぐ」ためでした。
       Webフォントを入れて全端末で同じ字になったので役目を終え、
       数字だけゴシックで浮いて見えるという指摘もあり削除しました。

       Zen Old Mincho より後ろは、読み込みに失敗したときの控えです。 */
    --font-display: "Zen Old Mincho", Georgia,
                    "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
                    "Noto Serif JP", "BIZ UDMincho", "MS PMincho", serif;
    --font-body:    var(--font-display);

    /* 余白 ----------------------------------------------------- */
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --section-y: clamp(4rem, 10vw, 8rem);
    --measure: 42rem;
    --wide: 70rem;

    /* ヘッダーとスマホ固定バーの高さ。ヒーローの高さの計算に使います */
    --head-h: 4.25rem;
    --bar-h:  3.5rem;

    color-scheme: light;
    accent-color: var(--pine);
  }
}

/* ---------------------------------------------------------------
   リセット
   --------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  :where(body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
    padding: 0;
  }

  :where(ul, ol) { list-style: none; }

  :where(img, video, iframe) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(button, input, textarea) { font: inherit; color: inherit; }

  :where(a) { color: inherit; }
}

/* ---------------------------------------------------------------
   ベース
   --------------------------------------------------------------- */
@layer base {
  html { scroll-behavior: smooth; }

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

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.85;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    /* 数字の高さを揃える(控えのGeorgiaが使われたとき、既定だと高さがバラつくため) */
    font-variant-numeric: lining-nums;
    /* 一番下までスクロールしたときの跳ね返りを抑える */
    overscroll-behavior-block: none;
  }

  /* 折り返しはブラウザ標準のまま。
     text-wrap の balance / pretty や word-break: auto-phrase は、
     見た目を整えるために右側をわざと余らせて早めに改行してしまうので使わない。 */

  a { text-underline-offset: .25em; }

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

  ::selection { background: var(--leaf); color: var(--pine-deep); }

  /* 言語切り替え ------------------------------------------------ */
  :root:not(.lang-en) [lang="en"] { display: none; }
  :root.lang-en       [lang="ja"] { display: none; }
}

/* ---------------------------------------------------------------
   レイアウト
   --------------------------------------------------------------- */
@layer layout {
  .section {
    padding-inline: var(--gutter);
    padding-block: var(--section-y);
    margin-inline: auto;
    max-inline-size: var(--wide);
  }

  /* 中身の幅はそのままに、背景色だけを画面の端まで広げる */
  .section--tint {
    background: var(--paper-warm);
    box-shadow: 0 0 0 100vmax var(--paper-warm);
    clip-path: inset(0 -100vmax);
  }

  .skip {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--gutter);
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--pine);
    color: #fff;
    text-decoration: none;
  }
  .skip:focus { inset-block-start: .5rem; }
}

/* ---------------------------------------------------------------
   見出しまわりの共通パーツ
   --------------------------------------------------------------- */
@layer components {
  .eyebrow {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pine);
    margin-block-end: 1rem;
    display: flex;
    align-items: center;
    gap: .9em;
  }
  .eyebrow::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--line);
  }

  .section__title {
    font-family: var(--font-display);
    /* Zen Old Mincho に 300 は無いので 400。指定しないと見出しが太字になる */
    font-weight: 400;
    font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem);
    line-height: 1.35;
    letter-spacing: .01em;
    margin-block-end: 1.25rem;
  }

  .section__lead {
    max-inline-size: var(--measure);
    color: var(--ink-soft);
    margin-block-end: 2.5rem;
  }

  .subhead {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: .04em;
    margin-block: 3.5rem .4rem;
    padding-block-end: .6rem;
    border-block-end: 1px solid var(--line);
  }

  .subhead__note {
    font-size: .9rem;
    color: var(--ink-soft);
    margin-block-end: 1.25rem;
  }

  .note {
    font-size: .875rem;
    line-height: 1.9;
    color: var(--ink-soft);
    margin-block-start: 1.5rem;
    max-inline-size: var(--measure);
  }

  .note--offer {
    color: var(--pine-deep);
    background: color-mix(in srgb, var(--leaf) 14%, transparent);
    border-inline-start: 3px solid var(--leaf);
    padding: .9rem 1.1rem;
    max-inline-size: none;
  }

  .note--warn {
    border-inline-start: 3px solid var(--lamp);
    padding: .9rem 1.1rem;
    background: color-mix(in srgb, var(--lamp) 8%, transparent);
    max-inline-size: none;
  }
}

/* ---------------------------------------------------------------
   ヘッダー
   --------------------------------------------------------------- */
@layer components {
  .site-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* ヒーローの高さを計算で出しているので、ここは高さを固定する */
    block-size: var(--head-h);
    padding-inline: var(--gutter);
    /* 不透明にして backdrop-filter を外している。
       元は 94% の半透明 + blur(10px) だったが、94% も塗ってあれば
       ぼかしはほぼ見えないうえ、スクロール中ずっと背後(再生中の動画)を
       ぼかし直すためスマホで引っかかる原因になっていた。 */
    background: #fff;
    color: var(--pine);
    /* 白い背景のままだと、下のヒーロー(動画)との境目が消えるので細い罫線を引く */
    border-block-end: 1px solid var(--line);
  }

  .site-head__brand { display: block; line-height: 0; }
  .site-head__brand img {
    /* 白抜きだった頃より線が細く見えるので、白い帯では少し大きめにしている */
    inline-size: 3.6rem;
    block-size: auto;
    /* 白い帯なので、ロゴは元の緑のまま出す */
  }

  /* ---- ナビゲーション ---- */
  /* スマホでは閉じた引き出し、パソコンでは横並び */
  .site-nav {
    display: none;
    font-size: .85rem;
    letter-spacing: .08em;
  }

  .site-nav a {
    text-decoration: none;
    color: var(--ink-soft);
    transition: color .2s, border-color .2s;
  }
  .site-nav a:hover { color: var(--pine); }

  /* パソコン ------------------------------------------------ */
  @media (min-width: 52rem) {
    .site-nav {
      display: flex;
      margin-inline-start: auto;
      /* 項目が7つあるので、狭いパソコン幅では間隔を詰めて折り返しを防ぐ */
      gap: clamp(.9rem, 2.2vw, 1.75rem);
    }
    .site-nav a {
      padding-block: .35rem;
      border-block-end: 1px solid transparent;
    }
    .site-nav a:hover { border-block-end-color: var(--pine); }

    /* 「ご予約」だけは、いつでも行き先だと分かるように下線を出しておく */
    .site-nav .nav-cta {
      color: var(--pine);
      border-block-end-color: var(--pine);
    }
  }

  /* スマホ ------------------------------------------------- */
  @media (max-width: 51.999rem) {
    .site-head.is-open .site-nav {
      display: grid;
      position: fixed;
      inset-block-start: var(--head-h);
      inset-inline: 0;
      max-block-size: calc(100svh - var(--head-h));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: .5rem var(--gutter) 1.25rem;
      background: #fff;
      border-block-start: 1px solid var(--line);
      box-shadow: 0 12px 24px rgb(27 36 30 / .12);
    }

    .site-head.is-open .site-nav a {
      padding-block: .95rem;
      font-size: 1rem;
      border-block-end: 1px solid var(--line-soft);
    }
    .site-head.is-open .site-nav a:last-child { border-block-end: 0; }
  }

  /* ---- ハンバーガーボタン ---- */
  .nav-toggle {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-inline-start: .25rem;
    padding: 0;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--pine) 35%, transparent);
    border-radius: 999px;
    cursor: pointer;
  }
  @media (min-width: 52rem) { .nav-toggle { display: none; } }

  /* 3本線。開いているときは×印になる */
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    display: block;
    inline-size: 1.05rem;
    block-size: 1.5px;
    background: var(--pine);
    border-radius: 2px;
    transition: transform .22s ease, opacity .15s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before { position: absolute; translate: 0 -.36rem; }
  .nav-toggle__bars::after  { position: absolute; translate: 0 .36rem; }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { translate: 0 0; rotate: 45deg; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { translate: 0 0; rotate: -45deg; }

  @media (prefers-reduced-motion: reduce) {
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after { transition: none; }
  }

  /* 画面読み上げ用。目には見えないが読み上げソフトには伝わる */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lang-toggle {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--pine) 35%, transparent);
    border-radius: 999px;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    overflow: hidden;
    min-block-size: 2.25rem;
  }
  @media (min-width: 52rem) { .lang-toggle { margin-inline-start: 1.75rem; } }

  .lang-toggle__opt {
    display: grid;
    place-items: center;
    padding-inline: .8rem;
    font-size: .75rem;
    letter-spacing: .08em;
    border-radius: 999px;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  :root:not(.lang-en) .lang-toggle__opt[data-opt="ja"],
  :root.lang-en       .lang-toggle__opt[data-opt="en"] {
    background: var(--pine);
    color: #fff;
  }

  .site-head :focus-visible { outline-color: var(--pine); }
}

/* ---------------------------------------------------------------
   ヒーロー
   --------------------------------------------------------------- */
@layer components {
  .hero {
    position: relative;
    display: grid;
    align-items: end;
    /* スマホは「ヘッダーを除いた画面いっぱい」。
       dvh ではなく svh を使うのが重要。dvh はスクロール中にブラウザのバーが
       出入りするたび値が変わるため、高さが伸び縮みして画面が震える原因になる。
       svh は変動しないので、その揺れが起きない。 */
    min-block-size: calc(100svh - var(--head-h));
    /* 固定バーにボタンが隠れないよう、下に固定バーぶんの余白を足す。
       左右の余白はここではなく .hero__inner に持たせる。
       .section が「余白こみで --wide の箱」なのに対し、ここで左右に余白を取ると
       「余白を引いた残りの中で --wide」になり、本文より余白1個ぶん左にズレてしまうため。 */
    padding: clamp(3rem, 8vw, 6rem) 0
             calc(clamp(2.5rem, 6vw, 4.5rem) + var(--bar-h));
    overflow: clip;
    color: #fff;
  }

  @media (min-width: 48rem) {
    .hero {
      min-block-size: min(82svh, 46rem);
      padding-block-end: clamp(2.5rem, 6vw, 4.5rem);
    }
  }

  /* 背景の動画とポスター画像。
     ここで z-index にマイナスの値を使うと、iPhone(Safari系)で動画が
     再生を始めた瞬間に、上に載っている文字が一瞬消える不具合が起きる。
     マイナスを使わず、動画側を独立した描画レイヤーに固定して回避している。 */
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--pine-deep) url("assets/hero-poster.webp") center / cover no-repeat;
    transform: translateZ(0);
  }

  /* 文字を読みやすくするための暗い膜。動画と同じレイヤーの中に入れる */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top,
        color-mix(in srgb, var(--pine-deep) 92%, transparent) 0%,
        color-mix(in srgb, #12160f 68%, transparent) 42%,
        color-mix(in srgb, #12160f 48%, transparent) 100%);
  }

  .hero__video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* 手元が中心にくるように寄せる */
    object-position: 28% 22%;
  }

  /* スマホでは動画の高さを固定して、スクロール中に拡大しないようにする。
     ヒーローの枠は 100svh 基準だが、実機ではブラウザのバーが引っ込むと
     画面が広がり、枠につられて動画まで伸びてしまう。
     そこで動画だけ「バーが引っ込んだときの高さ(lvh)」に先に合わせておく。
     lvh はスクロールで変化しないので、動画の大きさが動かない。
     はみ出したぶんは .hero の overflow: clip で切り取られる。
     ヒーローが中身の量で svh より高くなる場合もあるため、
     max() で「枠の高さ(100%)」を下限にして隙間が出ないようにしている。 */
  @media (max-width: 47.9375rem) {
    .hero__media { overflow: clip; }

    .hero__video {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      block-size: max(100%, calc(100lvh - var(--head-h)));
    }
  }

  /* 動きを抑える設定の人には静止画(ポスター)だけを見せる */
  @media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
  }

  /* 文字は動画より必ず手前に置く。
     幅と左右の余白は .section とまったく同じ指定にして、
     ヒーローの文字と本文の左端がぴったり縦に揃うようにしている。 */
  .hero__inner {
    position: relative;
    z-index: 1;
    max-inline-size: var(--wide);
    inline-size: 100%;
    padding-inline: var(--gutter);
    margin-inline: auto;
  }

  .hero__eyebrow {
    font-family: var(--font-display);
    font-size: .78rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 82%, var(--leaf));
    margin-block-end: 1.1rem;
  }

  .hero__title {
    display: grid;
    justify-items: start;
    gap: .35rem;
    margin-block-end: 1.4rem;
    font-weight: 400;
  }

  .hero__wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3.4rem, 2rem + 8vw, 7rem);
    line-height: .95;
    letter-spacing: .18em;
    /* 文字送りで右側に空きができるぶんを戻す */
    margin-inline-end: -.18em;
  }

  .hero__name {
    font-size: clamp(.85rem, .78rem + .3vw, 1rem);
    letter-spacing: .18em;
    color: color-mix(in srgb, #fff 78%, transparent);
  }

  .hero__lead {
    max-inline-size: 34rem;
    /* スマホでは「…完全個室サロ / ン。」と1文字だけ折り返されてしまうため、
       狭い画面のときだけ小さくしている(360px幅で1行に収まる大きさ)。
       パソコン幅での大きさは変えていない */
    font-size: clamp(.86rem, .7rem + .74vw, 1.12rem);
    line-height: 1.95;
    color: color-mix(in srgb, #fff 92%, transparent);
    margin-block-end: 1.6rem;
  }

  .hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block-end: 2rem;
    font-size: .8rem;
    letter-spacing: .06em;
  }
  /* backdrop-filter(すりガラス)は使わない。
     再生中の動画の上に重なると、スクロール中ずっと動画をぼかし直すことになり、
     スマホ実機で文字やボタンが引っかかる原因になる。
     半透明の黒を少し濃くするだけで読みやすさは同じに保てる。 */
  .hero__badges li {
    padding: .35rem .85rem;
    border: 1px solid color-mix(in srgb, #fff 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #000 32%, transparent);
  }
  .hero__badges strong { color: var(--leaf); font-weight: 500; }

  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
}

/* ---------------------------------------------------------------
   ボタン
   --------------------------------------------------------------- */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding: .7rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    letter-spacing: .06em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, translate .2s;
  }
  .btn:hover { translate: 0 -2px; }

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: background-color .2s, color .2s, border-color .2s; }
    .btn:hover { translate: none; }
  }

  .btn--line  { background: #06c755; color: #fff; }
  .btn--line:hover { background: #05b34c; }

  .btn--ig    { background: var(--ink); color: #fff; }
  .btn--ig:hover { background: #000; }

  .btn--solid { background: var(--pine); color: #fff; }
  .btn--solid:hover { background: var(--pine-deep); }

  .btn--ghost {
    border-color: color-mix(in srgb, #fff 55%, transparent);
    color: #fff;
  }
  .btn--ghost:hover { background: color-mix(in srgb, #fff 14%, transparent); }

  .btn--lg { min-block-size: 3.5rem; padding-inline: 2.2rem; font-size: 1rem; }
}

/* ---------------------------------------------------------------
   3つの特徴
   --------------------------------------------------------------- */
@layer components {
  .features {
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.75rem);
  }
  @media (min-width: 48rem) {
    .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .feature img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
    margin-block-end: 1.25rem;
  }

  .feature h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: .04em;
    margin-block-end: .5rem;
  }

  .feature p { font-size: .92rem; color: var(--ink-soft); }
}

/* ---------------------------------------------------------------
   チネイザン3コース ── このページの主役
   --------------------------------------------------------------- */
@layer components {
  /* 3枚セットなので「2＋1」に割れないよう、1列→3列で切り替える */
  .courses {
    display: grid;
    gap: 1.25rem;
  }
  @media (min-width: 54rem) {
    .courses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* お店の公式メニュー画像(筆文字＋仏像)をそのまま主役に置いた黒基調のカード */
  .course {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #10130f;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 3px;
    overflow: clip;
    color: #fff;
  }

  .course__art {
    inline-size: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
  }

  .course__body {
    display: grid;
    align-content: start;
    padding: clamp(1.35rem, 3vw, 1.9rem);
  }

  .course--featured { border-color: var(--gold); }

  .course__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 1;
    padding: .4rem 1rem;
    background: var(--gold);
    color: #1a1508;
    font-size: .72rem;
    letter-spacing: .12em;
    border-end-start-radius: 3px;
  }

  .course__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.3rem;
    letter-spacing: .1em;
    color: #fff;
  }
  :root:not(.lang-en) .course__name {
    font-size: .95rem;
    letter-spacing: .22em;
    color: color-mix(in srgb, #fff 66%, transparent);
  }

  .course__meta {
    font-size: .85rem;
    letter-spacing: .12em;
    color: color-mix(in srgb, #fff 58%, transparent);
    margin-block-start: .5rem;
  }

  .course__price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin-block: .35rem .7rem;
  }

  .course__desc {
    font-size: .9rem;
    color: color-mix(in srgb, #fff 76%, transparent);
  }
}

/* ---------------------------------------------------------------
   料金リスト
   --------------------------------------------------------------- */
@layer components {
  .pricelist {
    display: grid;
    gap: .1rem;
    max-inline-size: 44rem;
  }

  .pricelist li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding-block: .8rem;
    border-block-end: 1px solid var(--line-soft);
  }

  .pricelist__name { flex: 1; }
  .pricelist__name em {
    font-style: normal;
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--lamp);
    margin-inline-start: .4em;
  }

  .pricelist__price {
    font-family: var(--font-display);
    font-size: 1.15rem;
    white-space: nowrap;
  }

  .pricelist--lead .pricelist__price { font-size: 1.35rem; }
  .pricelist--compact li { padding-block: .55rem; font-size: .92rem; }
  .pricelist--compact .pricelist__price { font-size: 1rem; }
}

/* ---------------------------------------------------------------
   料金表＋写真の2列
   料金表は 44rem で止まるため、広い画面では右側が大きく空く。
   そこに店内の写真を1枚置いて埋めている。
   --------------------------------------------------------------- */
@layer components {
  .menu-extra,
  .flow-wrap {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  /* 見出しの上の余白は、列がずれないように外側のまとまり側に持たせる */
  .menu-extra { margin-block-start: 3.5rem; }
  .menu-extra__lists > .subhead:first-child { margin-block-start: 0; }

  @media (min-width: 54rem) {
    .menu-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
    .flow-wrap  { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }

    .menu-extra,
    .flow-wrap { align-items: start; }
  }

  /* スマホでは1列に積まれるので、背を低めに切って写真が画面を占領しないようにする */
  .menu-extra__photo img,
  .flow__photo img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
  }

  /* 写真ごとに、見せたい部分が中心にくるよう寄せる */
  .menu-extra__photo img { object-position: 50% 42%; }
  .flow__photo img       { object-position: 50% 62%; }

  @media (min-width: 54rem) {
    /* 写真の高さを、隣の列(料金表・流れ)にぴったり合わせる。
       縦横比を決め打ちにすると、隣の列より少し短かったり少しはみ出したりして
       「あと少しで揃わない」状態になり、そこが余白の穴に見えてしまう。
       枠を列いっぱいに伸ばし、写真は枠を埋める形にして、下端を必ず揃える。 */
    .menu-extra__photo,
    .flow__photo {
      align-self: stretch;
      position: relative;
      overflow: clip;
      border-radius: 2px;
      /* 隣の列が短くなったときでも写真がつぶれないようにする下限 */
      min-block-size: 20rem;
    }

    .menu-extra__photo img,
    .flow__photo img {
      position: absolute;
      inset: 0;
      block-size: 100%;
      aspect-ratio: auto;
      border-radius: 0;
    }
  }
}

/* ---------------------------------------------------------------
   アコーディオン(開閉)
   --------------------------------------------------------------- */
@layer components {
  .accordion {
    border-block-end: 1px solid var(--line);
    max-inline-size: 44rem;
  }

  .accordion summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-block: 1.05rem;
    cursor: pointer;
    list-style: none;
    font-size: .98rem;
    min-block-size: 3rem;
  }
  .accordion summary::-webkit-details-marker { display: none; }

  .accordion summary::after {
    content: "";
    margin-inline-start: auto;
    inline-size: .6rem;
    block-size: .6rem;
    border-inline-end: 1.5px solid var(--pine);
    border-block-end: 1.5px solid var(--pine);
    rotate: 45deg;
    translate: 0 -25%;
    transition: rotate .2s;
  }
  .accordion[open] summary::after { rotate: 225deg; translate: 0 15%; }

  .accordion > p {
    padding-block-end: 1.25rem;
    font-size: .92rem;
    color: var(--ink-soft);
    max-inline-size: var(--measure);
  }

  .accordion > .pricelist { padding-block-end: 1.25rem; }

  .accordion--form { margin-block-start: 2.5rem; }
}

/* ---------------------------------------------------------------
   施術の流れ
   --------------------------------------------------------------- */
@layer components {
  .flow {
    display: grid;
    gap: 0;
    counter-reset: step;
    max-inline-size: 48rem;
  }

  .flow__step {
    counter-increment: step;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0 1.25rem;
    padding-block: 1.5rem;
    position: relative;
  }

  .flow__step::before {
    content: counter(step, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .1em;
    color: var(--pine);
    padding-block-start: .35rem;
  }

  /* 縦につながる1本の線 */
  .flow__step::after {
    content: "";
    position: absolute;
    inset-block: 2.6rem -.4rem;
    inset-inline-start: .55rem;
    inline-size: 1px;
    background: var(--line);
  }
  .flow__step:last-child::after { display: none; }

  .flow__step h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: .05em;
    margin-block-end: .35rem;
  }

  .flow__step p { font-size: .92rem; color: var(--ink-soft); }
}

/* ---------------------------------------------------------------
   お客様の声
   --------------------------------------------------------------- */
@layer components {
  /* 横に流れるクチコミの帯 --------------------------------------
     .voices が窓、.voices__group が中身の一列。
     2組目は index.html の一番下のJSがコピーで作ります。
     1組ぶんの幅+すき間だけ左へずらすのを繰り返すと、2組目が1組目のいた
     位置にぴったり重なるので、つなぎ目が見えません。

     既定は「指で横スワイプするリスト」で、JSがコピーを作り終えて
     .is-looping が付いたときだけ流れ始めます。
     こうしておくと、JSが動かない環境でもカードが全部読めます。

     流れる速さは --voices-speed(カード1枚が通り過ぎるのにかかる秒数)で
     調整します。枚数(--voices-count)はJSが数えて入れるので、
     カードを足しても速さは変わりません。 */
  .voices {
    --voices-gap: 1.25rem;
    --voices-card: min(20rem, 78vw);
    --voices-count: 1;
    --voices-speed: 9s;

    display: flex;
    gap: var(--voices-gap);
    /* JSが動かないとき用。横スワイプで全部読めるようにしておく */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .voices__group {
    display: flex;
    gap: var(--voices-gap);
    /* 縮まないようにする。縮むとカードの幅が揃わず、つなぎ目がズレる */
    flex: 0 0 auto;
  }

  /* ---- ここから下は、JSがコピーを作れたときだけ効く ---- */
  .voices.is-looping {
    /* はみ出したカードを切る。clip は overflow: hidden と違って
       スクロール位置を持たないので、流れている最中にズレません */
    overflow: clip;
    scroll-snap-type: none;
    /* 左右の端をぼかして、カードがぶつ切りになる線を目立たなくする */
    mask-image: linear-gradient(to right,
                transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  }

  .voices.is-looping .voices__group {
    animation: voices-flow calc(var(--voices-speed) * var(--voices-count))
               linear infinite;
  }

  @keyframes voices-flow {
    to { translate: calc(-100% - var(--voices-gap)) 0; }
  }

  /* 読みたい人のために、指を置いている間とキーボードで選んでいる間は止める */
  .voices:hover .voices__group,
  .voices:focus-within .voices__group { animation-play-state: paused; }

  /* 動きが苦手な人の設定では流さず、手でスクロールする形に戻す。
     コピーした2組目は不要なので隠す */
  @media (prefers-reduced-motion: reduce) {
    .voices.is-looping {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      mask-image: none;
    }
    .voices.is-looping .voices__group { animation: none; }
    .voices__group[inert] { display: none; }
    .voice { scroll-snap-align: start; }
  }

  .voice {
    /* 全部のカードを同じ幅にする。幅がバラバラだとつなぎ目がズレる */
    inline-size: var(--voices-card);
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    /* 中のリンクを、カード全体に広げるための基準 */
    position: relative;
  }

  .voice__stars {
    /* Googleのクチコミらしく金色。白いカードの上だと --gold のままでは
       薄く飛んでしまうので、少しだけランプの色を混ぜて濃くしている */
    color: color-mix(in oklab, var(--gold) 78%, var(--lamp));
    font-size: .85rem;
    letter-spacing: .12em;
    line-height: 1;
  }

  .voice blockquote p {
    font-size: .92rem;
    line-height: 1.95;
  }

  .voice blockquote p::before { content: "「"; }
  .voice blockquote p::after  { content: "」"; }

  :root.lang-en .voice blockquote p::before { content: "“"; }
  :root.lang-en .voice blockquote p::after  { content: "”"; }

  .voice figcaption {
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--ink-soft);
  }
  .voice figcaption::before { content: "— "; }

  /* カードのどこを押してもGoogleのクチコミへ飛べるようにする。
     リンクの中身は投稿者名だけなので、読み上げソフトが本文を
     まるごと読み上げてしまうことがありません */
  .voice figcaption a {
    text-decoration: none;
    color: inherit;
  }
  .voice figcaption a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .voice:hover { border-color: var(--pine); }
  /* カード全体に広がったリンクなので、枠線をカードの外側に出す */
  .voice:focus-within { outline: 2px solid var(--pine); outline-offset: 3px; }
  .voice figcaption a:focus-visible { outline: none; }

  .voices__link {
    margin-block-start: 1.75rem;
    font-size: .9rem;
  }
  .voices__link a { color: var(--pine); }
}

/* ---------------------------------------------------------------
   セラピスト紹介(写真＋文章)
   --------------------------------------------------------------- */
@layer components {
  .section--split {
    display: grid;
    gap: clamp(1.75rem, 5vw, 3.5rem);
    align-items: center;
  }

  @media (min-width: 48rem) {
    .section--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }

  /* キシさんの写真は顔が切れないよう、元の縦横比のまま表示する */
  .split__media img {
    inline-size: 100%;
    border-radius: 2px;
  }

  .split__body p + p { margin-block-start: 1rem; }
  .split__body p { color: var(--ink-soft); font-size: .95rem; }
}

/* ---------------------------------------------------------------
   アクセス
   --------------------------------------------------------------- */
@layer components {
  .access {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  @media (min-width: 48rem) {
    .access { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  .info dt {
    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pine);
    margin-block-start: 1.5rem;
  }
  .info dt:first-child { margin-block-start: 0; }

  .info dd { font-size: .95rem; margin-block-start: .3rem; }

  .access__map {
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .access__map iframe { inline-size: 100%; block-size: 100%; }

  /* お支払い方法 */
  .payments {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-block-start: clamp(2rem, 4vw, 3rem);
    border-block-start: 1px solid var(--line);
  }

  .payments__title {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pine);
    margin-block-end: .5rem;
  }

  .payments__note {
    font-size: .92rem;
    color: var(--ink-soft);
    margin-block-end: 1.5rem;
    max-inline-size: var(--measure);
  }

  .payments__chart {
    inline-size: 100%;
    max-inline-size: 22rem;
    /* 22rem で止まるぶん左右に余りが出るので、真ん中に置く。
       スマホでは画面の中央、パソコンでは右の列の中央にそろう */
    margin-inline: auto;
    block-size: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: .75rem;
  }

  /* 広い画面では、説明を左・決済表を右に並べる */
  @media (min-width: 48rem) {
    .payments {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      /* 3行目に余りを逃がして、見出しと本文がくっつくようにする */
      grid-template-rows: auto auto 1fr;
      column-gap: clamp(1.75rem, 4vw, 3rem);
    }
    .payments__title { grid-area: 1 / 1; }
    .payments__note  { grid-area: 2 / 1; margin-block-end: 0; }
    .payments__chart { grid-area: 1 / 2 / span 3 / auto; }
  }
}

/* ---------------------------------------------------------------
   ご予約
   --------------------------------------------------------------- */
@layer components {
  /* ページで唯一の目的が予約なので、ここだけヘッダー・フッターと同じ緑を敷いて
     「ここが行動する場所」だと分かるようにしている。
     背景を画面の端まで広げる仕組みは .section--tint と同じ。 */
  .section--reserve {
    text-align: center;
    background: var(--pine-deep);
    color: #fff;
    box-shadow: 0 0 0 100vmax var(--pine-deep);
    clip-path: inset(0 -100vmax);
  }

  .section--reserve .eyebrow { justify-content: center; }
  .section--reserve .eyebrow::after { display: none; }

  .section--reserve .section__lead,
  .section--reserve .note {
    margin-inline: auto;
  }

  /* ---- 緑地の上での文字と線の色 ---- */
  .section--reserve .eyebrow {
    color: color-mix(in srgb, #fff 80%, var(--leaf));
  }
  .section--reserve .section__lead {
    color: color-mix(in srgb, #fff 88%, transparent);
  }
  .section--reserve .note,
  .section--reserve .form__note,
  .section--reserve .field__label {
    color: color-mix(in srgb, #fff 74%, transparent);
  }
  .section--reserve .accordion {
    border-block-end-color: color-mix(in srgb, #fff 28%, transparent);
  }
  .section--reserve .accordion summary::after {
    border-color: color-mix(in srgb, #fff 70%, transparent);
  }
  .section--reserve :focus-visible { outline-color: var(--leaf); }

  /* ---- 緑地の上でのボタン ----
     既定の Instagram(濃い墨色)と送信(緑)は、緑の上だと沈んで見えないので白に置き換える。 */
  .section--reserve .btn--ig,
  .section--reserve .btn--solid {
    background: #fff;
    color: var(--pine-deep);
  }
  .section--reserve .btn--ig:hover,
  .section--reserve .btn--solid:hover {
    background: color-mix(in srgb, #fff 86%, var(--leaf));
  }

  .reserve__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    margin-block-end: 1.5rem;
  }

  .reserve__story {
    font-size: .92rem;
    color: color-mix(in srgb, #fff 74%, transparent);
  }
  .reserve__story a { color: #fff; }

  .accordion--form {
    margin-inline: auto;
    text-align: start;
  }
  .accordion--form summary { justify-content: center; }
  .accordion--form summary::after { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------
   フォーム
   --------------------------------------------------------------- */
@layer components {
  .form { padding-block: .5rem 1.75rem; display: grid; gap: 1.1rem; }

  .form__note { font-size: .88rem; color: var(--ink-soft); }

  .field { display: grid; gap: .4rem; }

  .field__label {
    font-size: .82rem;
    letter-spacing: .08em;
    color: var(--ink-soft);
  }

  .field :where(input, textarea) {
    inline-size: 100%;
    padding: .75rem .9rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 1rem;
  }

  .field :where(input, textarea):focus-visible { border-color: var(--pine); }

  .field textarea { resize: vertical; }

  .form .btn { justify-self: start; }
}

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
@layer components {
  .faq { max-inline-size: 48rem; }
  .faq .accordion:first-child { border-block-start: 1px solid var(--line); }
}

/* ---------------------------------------------------------------
   フッター
   --------------------------------------------------------------- */
@layer components {
  .site-foot {
    background: var(--pine-deep);
    color: color-mix(in srgb, #fff 82%, transparent);
    text-align: center;
    padding: clamp(3rem, 7vw, 4.5rem) var(--gutter);
    font-size: .88rem;
    line-height: 1.9;
  }

  /* スマホでは、フッターの緑を固定バーの下まで伸ばす。
     body に下余白をつける方式だと、フッターの下に白い帯が見えてしまうため。 */
  @media (max-width: 47.999rem) {
    .site-foot {
      padding-block-end: calc(clamp(3rem, 7vw, 4.5rem) + var(--bar-h)
                              + env(safe-area-inset-bottom));
    }
  }

  .site-foot__logo {
    inline-size: 3.4rem;
    margin-inline: auto;
    margin-block-end: 1rem;
    /* 濃い緑の上に置くので白抜きにする */
    filter: brightness(0) invert(1);
    opacity: .9;
  }

  .site-foot__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: .16em;
    color: #fff;
    margin-block-end: 1rem;
  }

  .site-foot__addr { font-style: normal; }

  .site-foot__sns {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-block: 1.75rem 1.5rem;
    font-size: .82rem;
    letter-spacing: .12em;
  }
  .site-foot__sns a {
    text-decoration: none;
    padding-block: .4rem;
    border-block-end: 1px solid color-mix(in srgb, #fff 35%, transparent);
  }
  .site-foot__sns a:hover { border-block-end-color: var(--leaf); color: #fff; }

  .site-foot__copy {
    font-size: .72rem;
    letter-spacing: .14em;
    color: color-mix(in srgb, #fff 55%, transparent);
  }
}

/* ---------------------------------------------------------------
   スマホの固定バー
   --------------------------------------------------------------- */
@layer components {
  .stickybar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-block-start: 1px solid var(--line);
    padding-block-end: env(safe-area-inset-bottom);
  }

  @media (min-width: 48rem) { .stickybar { display: none; } }

  .stickybar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-block-size: 3.5rem;
    font-size: .9rem;
    letter-spacing: .06em;
    text-decoration: none;
    color: #fff;
  }

  /* 各サービスのアイコン。文字サイズに合わせて拡縮する */
  .stickybar__icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: none;
  }

  .stickybar__btn--line { background: #06c755; }
  .stickybar__btn--ig   { background: var(--ink); }
}