@charset "UTF-8";

/* ==========================================================================
   responsive.css  ―  画面幅ごとの上書き用ファイル
   --------------------------------------------------------------------------
   本ファイルは style.css の後に読み込みます。
   今回はPC版（1280–1920px）のみの制作のため、タブレット／スマートフォン向けの
   レイアウトは実装していません。追加時は下記の区分に上書きを記述してください。

   style.css 側は次の方針で組んでいるため、上書きは最小限で済みます。
     ・幅はすべて grid / minmax / clamp() による可変指定
     ・余白・文字サイズはカスタムプロパティ（--section-py / --gutter / --fs-*）で集約
     ・固定幅・絶対配置・負のマージンは装飾（.botanical）以外で使用していない
   主な調整点は「grid-template-columns を1カラムへ変更」「--header-h の再設定」
   「.global-nav の開閉UI追加」の3点です。
   ========================================================================== */


/* ==========================================================================
   〜1279px：小さめのノートPC・タブレット横
   ========================================================================== */
@media screen and (max-width: 1279px) {
  /* 例）:root { --container: min(100%, 60rem); } */

  /* ヒーロー背景：レンガのアーチが窮屈にならないよう焦点をわずかに上へ */
  .hero__bg { background-position: center 38%; }
  .hero__scrim {
    background-image: radial-gradient(
      ellipse 64% 74% at 50% 50%,
      rgba(var(--hero-scrim-rgb), 0.9) 0%,
      rgba(var(--hero-scrim-rgb), 0.79) 26%,
      rgba(var(--hero-scrim-rgb), 0.6) 46%,
      rgba(var(--hero-scrim-rgb), 0.4) 62%,
      rgba(var(--hero-scrim-rgb), 0.18) 80%,
      rgba(var(--hero-scrim-rgb), 0) 98%
    );
  }
}


/* ==========================================================================
   〜1023px：タブレット縦
   ========================================================================== */
@media screen and (max-width: 1023px) {
  /* 例）.profile,
         .contact,
         .threads { grid-template-columns: minmax(0, 1fr); } */

  /* ヒーロー：縦横比が縦長になる分、焦点を上げてスクリーンをやや広げる */
  .hero__bg { background-position: center 34%; }
  .hero__scrim {
    background-image: radial-gradient(
      ellipse 72% 68% at 50% 50%,
      rgba(var(--hero-scrim-rgb), 0.9) 0%,
      rgba(var(--hero-scrim-rgb), 0.79) 26%,
      rgba(var(--hero-scrim-rgb), 0.6) 46%,
      rgba(var(--hero-scrim-rgb), 0.4) 62%,
      rgba(var(--hero-scrim-rgb), 0.18) 80%,
      rgba(var(--hero-scrim-rgb), 0) 98%
    );
  }
}


/* ==========================================================================
   〜767px：スマートフォン
   ========================================================================== */
@media screen and (max-width: 767px) {
  :root { --header-h: 3.75rem; }

  /* 背景写真と、写真内の被写体（椅子・木・レンガ・花）へ追従する白ぼかし座標が共有する長さの単位。
     基準は390×844の画面での1vh相当（844/390 = 2.1641026vw）。画面の高さ（vh・svh・dvh）には依存させず、
     幅だけで写真の大きさと位置を決めるため、ブラウザUIの有無で構図が動かない。 */
  .hero { --hero-photo-u: 2.1641026vw; }
  /* 例）--section-py: 4.5rem; */

  /* ナビゲーション：開閉UIを実装するまでの間は非表示にし、ロゴ＋CTAの1行を維持する */
  .global-nav { display: none; }
  .site-header__inner {
    grid-template-columns: auto auto;
    gap: 0.75rem;
  }
  /* CTAはロゴと並んでも折り返さない大きさに縮小（文言・リンク先は変更しない） */
  .site-header__cta .btn--sm {
    padding-inline: 0.875rem;
    min-height: 2.625rem;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
  }

  /* ヒーロー：スマートフォン専用の縦位置構図の背景に差し替える（PC・タブレットの画像/配置は変更しない）
     アーチの太い曲線を画面上端の外へ逃がすため、通常のcoverより拡大し、
     下端は常に画像の最下部に揃える（石畳・植栽が自然に続き、根元側は切れない）。 */
  .hero__bg {
    inset: 0;
    background-image: url("../images/hero-bg-mobile-2.png");
    /* 内容が増えてヒーローが写真の高さを超える場合は、上端を固定したまま写真を縦横比のまま拡大して、下端まで写真を続ける */
    background-size: auto max(320.29vw, calc(100% + 99.72vw));
    background-position: center -99.72vw;
  }
  /* 左右のヴェールは、柱のレンガが残る程度まで大きく弱める（PC・タブレットの値は変更しない） */
  .hero__media::before {
    background-image: linear-gradient(
      90deg,
      rgba(var(--hero-scrim-rgb), 0.16) 0%,
      rgba(var(--hero-scrim-rgb), 0.06) 15%,
      rgba(var(--hero-scrim-rgb), 0) 32%,
      rgba(var(--hero-scrim-rgb), 0) 68%,
      rgba(var(--hero-scrim-rgb), 0.05) 85%,
      rgba(var(--hero-scrim-rgb), 0.12) 100%
    );
  }
  /* 中央スクリーンはコピー周辺だけに範囲を絞り、上のアーチ・下の柱根元まで白くしない。
     1層目（線形）：ヘッダー直下〜英字ラベル付近だけに、中央の白ぼかしより弱い縦方向の光を足す。
     2層目（楕円・ベンチ用）：メインコピー右の椅子だけコントラストを抑える不定形の光。
     3〜9層目：コピーと競合する濃い緑（1行目左右の木・人生/整の左・サブコピー左・る右）を、PC版1440pxの
     コピー周辺と同程度の霞み具合へ近づけるアイボリーのヴェール（中心の不透明度0.19〜0.75（前回比＋約5pt・広がり＋約6%）、周辺へ多段でフェード）。
     位置は背景写真の構図に追従する calc(50vw ± Nvh) 指定。ピンクの花・レンガ・椅子・ラベンダー・空・小道の
     座標には掛からない位置に置く。最終層（既存の中央楕円）は変更しない。 */
  .hero__scrim {
    background-image:
      linear-gradient(
        to bottom,
        rgba(var(--hero-scrim-rgb), 0.32) 0%,
        rgba(var(--hero-scrim-rgb), 0.22) 9%,
        rgba(var(--hero-scrim-rgb), 0.11) 18%,
        rgba(var(--hero-scrim-rgb), 0) 30%
      ),
      radial-gradient(
        ellipse 78px 70px at calc(50vw + calc(17.1 * var(--hero-photo-u))) calc(44.5 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.58) 0%,
        rgba(var(--hero-scrim-rgb), 0.36) 45%,
        rgba(var(--hero-scrim-rgb), 0.15) 75%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 76px 70px at calc(50vw - calc(8.29 * var(--hero-photo-u))) calc(25.47 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.47) 0%,
        rgba(var(--hero-scrim-rgb), 0.282) 40%,
        rgba(var(--hero-scrim-rgb), 0.117) 70%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 87px 81px at calc(50vw + calc(11.26 * var(--hero-photo-u))) calc(25.47 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.45) 0%,
        rgba(var(--hero-scrim-rgb), 0.27) 40%,
        rgba(var(--hero-scrim-rgb), 0.113) 70%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 61px 106px at calc(50vw - calc(15.28 * var(--hero-photo-u))) calc(41.71 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.67) 0%,
        rgba(var(--hero-scrim-rgb), 0.402) 40%,
        rgba(var(--hero-scrim-rgb), 0.168) 70%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 66px 93px at calc(50vw - calc(15.05 * var(--hero-photo-u))) calc(55.92 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.75) 0%,
        rgba(var(--hero-scrim-rgb), 0.45) 40%,
        rgba(var(--hero-scrim-rgb), 0.188) 70%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 42px 51px at calc(50vw + calc(16.94 * var(--hero-photo-u))) calc(26.30 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.49) 0%,
        rgba(var(--hero-scrim-rgb), 0.294) 40%,
        rgba(var(--hero-scrim-rgb), 0.122) 70%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 175px 154px at calc(50vw + calc(2.37 * var(--hero-photo-u))) calc(31.40 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.31) 0%,
        rgba(var(--hero-scrim-rgb), 0.186) 40%,
        rgba(var(--hero-scrim-rgb), 0.077) 70%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 180px 95px at calc(50vw + calc(0.00 * var(--hero-photo-u))) calc(53.91 * var(--hero-photo-u)),
        rgba(var(--hero-scrim-rgb), 0.19) 0%,
        rgba(var(--hero-scrim-rgb), 0.114) 40%,
        rgba(var(--hero-scrim-rgb), 0.048) 70%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      ),
      radial-gradient(
        ellipse 70% 50% at 50% 47%,
        rgba(var(--hero-scrim-rgb), 0.88) 0%,
        rgba(var(--hero-scrim-rgb), 0.74) 24%,
        rgba(var(--hero-scrim-rgb), 0.54) 44%,
        rgba(var(--hero-scrim-rgb), 0.32) 62%,
        rgba(var(--hero-scrim-rgb), 0.14) 82%,
        rgba(var(--hero-scrim-rgb), 0) 100%
      );
  }
  /* メインコピー背後の白ぼかしを前回よりさらに強化し、実画面で確実に効果が見えるようにする。
     楕円を広げつつ、左側のピンクの花（人の左上）だけmask-imageで効果を弱め、巻き込みを防ぐ。 */
  .hero__title::before {
    background-image: radial-gradient(
      ellipse 72% 70% at 50% 50%,
      rgba(var(--hero-scrim-rgb), 0.76) 0%,
      rgba(var(--hero-scrim-rgb), 0.5) 38%,
      rgba(var(--hero-scrim-rgb), 0.24) 64%,
      rgba(var(--hero-scrim-rgb), 0) 90%
    );
    mask-image: radial-gradient(
      ellipse 55px 75px at calc(50vw - calc(20.5 * var(--hero-photo-u))) calc(20.73 * var(--hero-photo-u)),
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.22) 55%,
      rgba(255, 255, 255, 1) 100%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 55px 75px at calc(50vw - calc(20.5 * var(--hero-photo-u))) calc(20.73 * var(--hero-photo-u)),
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.22) 55%,
      rgba(255, 255, 255, 1) 100%
    );
  }
  /* 3行構成でタイトル全体の縦幅が伸びたことで、このレイヤー（元は「人」の左の植物用）の
     中心が「整」の左側のレンガに移動し、そこだけ白く浮いて見えていた。
     周囲（左右ヴェールなど）と同程度の弱さまで濃度を落とし、レンガの局所的な白飛びを解消する。 */
  .hero__title::after {
    background-image: radial-gradient(
      ellipse 64% 70% at 62% 50%,
      rgba(var(--hero-scrim-rgb), 0.17) 0%,
      rgba(var(--hero-scrim-rgb), 0.1) 42%,
      rgba(var(--hero-scrim-rgb), 0.04) 68%,
      rgba(var(--hero-scrim-rgb), 0) 90%
    );
  }
  .hero__lead::before {
    background-image: radial-gradient(
      ellipse 60% 68% at 50% 50%,
      rgba(var(--hero-scrim-rgb), 0.45) 0%,
      rgba(var(--hero-scrim-rgb), 0.25) 42%,
      rgba(var(--hero-scrim-rgb), 0.11) 68%,
      rgba(var(--hero-scrim-rgb), 0) 90%
    );
  }

  /* メインコピー：文字そのものに広く柔らかい白光彩を足し、背景から輪郭なく分離させる
     （前回値では実画面での効果が不足していたため、4段階でより強く・より広くぼかす） */
  .hero__title {
    text-shadow:
      0 1px 1px rgba(25, 52, 42, 0.14),
      0 0 10px rgba(255, 255, 255, 0.9),
      0 0 24px rgba(255, 255, 255, 0.68),
      0 0 44px rgba(255, 255, 255, 0.44),
      0 0 64px rgba(255, 255, 255, 0.22);
  }

  /* 1行目「タロットカードで、」だけ光彩を強化（アイボリー系）。極小シャドーは維持し、2・3行目は継承のまま。 */
  .hero__line--1 {
    text-shadow:
      0 1px 1px rgba(25, 52, 42, 0.12),
      0 0 8px rgba(255, 253, 248, 0.95),
      0 0 22px rgba(255, 253, 248, 0.65),
      0 0 40px rgba(255, 253, 248, 0.3);
  }

  /* サブコピー：メインより一段弱い光彩にする（新規レイヤーの追加はせず既存値を上書き） */
  .hero__lead {
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.6),
      0 0 14px rgba(255, 255, 255, 0.32);
  }

  /* メインコピー3行：文字色と同色（currentColor）の極細アウトラインで明朝の細線を安定させる。
     paint-orderで線を塗りの下に回し、字面を内側へ食い込ませない。 */
  .hero__title .hero__word {
    -webkit-text-stroke: 0.2px currentColor;
    paint-order: stroke fill;
  }

  .hero__body { max-width: 24rem; }
  /* メインコピー拡大後も「人生を整える。」が1行に収まるよう、タイトル周辺の左右余白だけ控えめにする。
     縦方向はcenterをやめ、ヘッダー直下からの開始位置を固定して上部の間延びを解消する。 */
  .hero__inner {
    width: calc(100% - 1.5rem);
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 3.06rem);
    padding-bottom: 3rem;   /* 2つ目のボタンの下に約48pxの余韻。この余白の最後まで背景写真が続く */
  }
  /* 高さは内容で決まる（100svhの下限は外す）。次のセクションは通常のフローで背景写真の直後から始まる */
  .hero { min-height: 0; }

  /* ---- メインコピー：スマートフォンのみ3行構成 ----
     「タロットカードで、」／「人生を」／「整える。」。
     「人生を」「整える。」は一つの主コピーとして扱い、行間を詰めてまとまりを保つ。 */
  .hero__title-break--sp { display: block; }

  :root {
    /* 導入行は一段小さくまとめる：タロットカード 26/27/29px（375/390/430） */
    --fs-hero-1:          clamp(1.69rem, 0.3605rem + 5.6727vw, 1.885rem);
    /* で、：導入行の縮小に合わせるが、極端に小さくしない */
    --fs-hero-1-particle: clamp(1.235rem, 0.3486rem + 3.7818vw, 1.365rem);
    /* 人生：「タロットカードで、」と視覚的な横幅が揃うよう約9.7%拡大 63.5/65.7/71.2px */
    --fs-hero-2:          clamp(4.095rem, 0.725rem + 14.377vw, 4.59rem);
    /* を：人生の約72% 45.8/47.3/51.3px */
    --fs-hero-2-particle: clamp(2.949rem, 0.5221rem + 10.353vw, 3.304rem);
  }

  /* 整える：句点を除いた分、人生をより明確に大きく＝現在より約15%拡大 73.6/76/82px */
  .hero__word--totonoeru {
    font-size: clamp(4.784rem, 0.9616rem + 16.308vw, 5.3462rem);
  }

  /* メインコピーの文字色：1行目は緑を含むチャコール、2行目・3行目は同系色の濃淡（3行目が最も濃い）。
     hero-color-inアニメーションの到達色はvar(--hero-moss)なので、要素側で上書きして着地色を変える。 */
  .hero__word--main,
  .hero__word--particle { color: #242d29; }
  .hero__word--jinsei,
  .hero__word--particle2 { --hero-moss: #345648; }
  .hero__word--totonoeru { --hero-moss: #2b493d; }

  /* 句点はスマートフォンのみ非表示にし「整える」で止める（PC・タブレットは残す） */
  .hero__word--kuten { display: none; }

  /* 導入行：字間を少し締めて短くまとめる（密着はさせない） */
  .hero__word--main { letter-spacing: 0.045em; }
  .hero__word--particle { margin-inline-start: 0.1em; }

  /* 「人生を」「整える。」の行間は詰めて主コピーとしてまとめる */
  .hero__line--2 { line-height: 1.13; }

  /* サブコピーの改行位置を3行構成へ切り替える（文章そのものは変更しない） */
  .hero__lead-break--pc { display: none; }
  .hero__lead-break--sp { display: inline; }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 21rem;
    margin-inline: auto;
  }
  .hero__actions .btn { width: 100%; }

  /* 緑ボタン：スマートフォンのみ影を少し強める（色・角丸・サイズは既存のまま） */
  .hero__actions .btn--primary {
    box-shadow:
      0 10px 26px rgba(45, 70, 57, 0.22),
      0 3px 8px rgba(45, 70, 57, 0.12);
  }

  /* 白いアウトラインボタン：スマートフォンのみ背景の不透明度を上げ、文字の可読性を上げる */
  .hero__actions .btn--outline {
    background-color: rgba(var(--hero-scrim-rgb), 0.82);
  }

  /* 例）.strength, .tool, .step, .price-item { grid-template-columns: minmax(0, 1fr); } */
}

/* ヘッダーCTA：359px以下では「ご相談・」を省き「お問い合わせ」だけを1行で表示する（360px以上は「ご相談・お問い合わせ」）。
   リンクの aria-label は常に「ご相談・お問い合わせ」。 */
@media (max-width: 359px) {
  .site-header__cta .hdr-cta-opt { display: none; }
}