/* ============================================
   Brand Theme: Marine (Blue) — Trust & Gentle
   ============================================ */

/* リセットとベーススタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    /* Brand blues */
    --c-brand-700:#1F4E8C;
    --c-brand-600:#2B6CB0;
    --c-brand-500:#3F83D1;
    --c-brand-400:#6CA8E8;
    /* Gentle background tints */
    --c-soft-1:#F0F6FF;
    --c-soft-2:#E8F2FF;
    --c-text:#4a4a4a;
}

body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
    line-height: 1.7;
    color: var(--c-text);
    background-color: #fefefe;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* コンテナ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
.header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* padding: 20px 0; */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 24px;
    color: var(--c-brand-600);
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: .02em;
}

.tagline {
    font-size: 14px;
    color: #7a8aa1;
}

.nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav a {
    font-size: 15px;
    color: #59657a;
    font-weight: 500;
}

.nav a:hover {
    color: var(--c-brand-600);
}

.btn-primary {
    background-color: var(--c-brand-600);
    color: #fff !important;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 700;
}

.btn-primary:hover {
    background-color: var(--c-brand-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 78, 140, 0.25);
}

.header-content{
  /* ロゴ / ナビ / 右上ボタン の3カラム */
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
}

.site-title { margin: 0; }
.site-home{
  color: var(--c-brand-600);
  text-decoration: none;
}
.site-home:hover{ color: var(--c-brand-700); }
.site-home:focus-visible{
  outline: 2px solid var(--c-brand-400);
  outline-offset: 2px;
}


.header-actions{
  display: flex;
  margin-left: 24px;
  gap: 12px;
  align-items: center;
  justify-self: end;
}

.btn-square{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 23px 20px;  /* ← 縦24px, 横20px に */
  border: 1.6px solid var(--c-brand-600);
  border-radius: 10px;          /* 角丸は 6〜12px でお好み */
  color: #fff;
  font-weight: 700; font-size: 14px; line-height: 1;
  background: #2B6CB0; white-space: nowrap;
}
.btn-square:hover{
  background: #6CA8E8;
  box-shadow: 0 4px 12px rgba(43,108,176,.18);
  transform: translateY(-1px);
}
.btn-icon .icon{ width: 18px; height: 18px; display: inline-flex; }
.btn-icon svg{ display: block; }

/* ロゴリンクをアイコンとテキストで横並びに */
.site-home{
  display: inline-flex;
  align-items: center;
  gap: .5em;               /* アイコンと文字の間隔 */
  text-decoration: none;   /* 既に指定済みなら不要 */
}

/* ハートを“青”に。SVGは currentColor を拾う */
.icon-heart{
  line-height: 0;          /* 行のはみ出し防止 */
  color: #3B82F6;          /* お好みの青に（例：--c-brand-600でもOK） */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); /* ほんのり立体感（任意） */
  transform: translateY(1px);  /* 垂直位置の微調整（±1～2pxでお好み） */
}

/* ===== Header: 左右の余白を詰める（コンパクト化）===== */
.header{
  /* つまみ（必要に応じて数値だけ調整） */
  --header-pad-x: clamp(8px, 1vw, 14px);   /* 左右のパディング量 ←これを小さくすると更に詰まる */
  --header-gap:   clamp(8px, 1.2vw, 16px); /* ロゴ/ナビ/右ボタンの間隔 */
  --nav-gap-x:    clamp(10px, 1.2vw, 18px);/* ナビ項目の横間隔 */
  --nav-gap-y:    6px;                     /* 折り返し時の段間隔 */
  --btn-pad-y:    10px;                    /* 右上ボタンの上下 */
  --btn-pad-x:    12px;                    /* 右上ボタンの左右 */
}

/* コンテナの左右パディングだけ絞る（他セクションに影響させないため header 内に限定） */
.header .container{
  max-width: 1360px;                       /* ここを少し広げると“外側の余白”も減る（例: 1320/1360） */
  padding-left:  var(--header-pad-x);
  padding-right: var(--header-pad-x);
}

/* 3カラムの隙間を少しだけ圧縮 */
.header-content{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--header-gap);
  /* padding-block: clamp(8px, 1.2vw, 14px); ヘッダーの上下余白もほんのり詰める */
}

/* ナビ：折り返し可＋中央寄せは維持しつつ横間隔だけ詰める */
.nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--nav-gap-x);
  row-gap: var(--nav-gap-y);
  margin-inline: auto;
  max-width: 100%;
}

/* ナビ文字の“あたり”を小さめに */
.nav a{
  padding: 4px 6px;
  font-size: clamp(13.5px, 1.02vw, 15px);
}

/* 右上ボタンの横幅を譲る（パディング縮小＆隙間縮小） */
.header-actions{ gap: 8px; margin-left: 8px; }
.btn-square{ padding:24px 20px ; font-size: 13.5px; }

/* タグラインが食い込む場合は一定幅以下で非表示（任意） */
@media (max-width: 1140px){
  .tagline{ display:none; }
}




/* =========================
   HERO (完全置き換え)
   ========================= */
:root{
  --header-h: 72px;                         /* 実ヘッダー高 */
  --peek: 160px;                            /* 下セクションの“のぞかせ”量 */
  --hero-gutter: clamp(24px, 6vw, 80px);    /* 両サイド余白（白） */
  --fade-stop: 88%;                         /* 下端の白フェード開始位置 */
  --vstack-out: clamp(40px, 8vh, 140px);    /* 縦書きをどれだけ下に抜かせるか */
  --vstack-gap: clamp(14px, 2.2vw, 28px);   /* 2列の間隔 */
}

/* コンテナ（背景とレイアウト） */
.hero{
  position: relative;
  overflow: visible;                                    /* はみ出しOK（重要） */
  min-height: calc(150vh - var(--header-h) - var(--peek));
  padding-inline: var(--hero-gutter);                   /* 両サイド白余白 */

  /* ①白フェード → ②画像（上：透明→下：白） */
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) var(--fade-stop),
      #fff 100%
    ),
    url('assets/トップの奈良鹿.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-clip: content-box;                         /* 画像は余白内にだけ */
  background-origin: content-box;
}

/* 安全域（横書き要素を置く場合に使用。空でもOK） */
.hero-content{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(12px, 2vw, 24px);
}

/* ====== 中央下：縦書き2列（左=サブ／右=タイトル） ====== */
.hero > .v-stack{
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--vstack-out));                 /* 下に抜ける */
  transform: translateX(-50%);                          /* 横中央 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-flex;
  flex-direction: row-reverse;                          /* 先頭を左列にする */
  align-items: flex-end;                                 /* 2列の下端をそろえる */
  gap: var(--vstack-gap);
  color: var(--c-brand-600);                            /* 両方とも青 */
  text-shadow: none;
  pointer-events: none;                                  /* クリック邪魔しない */
  z-index: 3;
}

/* 文字組み共通 */
.hero > .v-stack > *{
  margin: 0;
  letter-spacing: .08em;
  line-height: 2;                                       /* 列内の密度 */
  white-space: nowrap;                                   /* 1列内で改行しない */
}

/* サイズ：右列(タイトル)を大きく、左列(サブ)を小さめに */
.v-stack .hero-title   { order: 2; font-size: clamp(22px, 2.2vw, 36px); font-weight: 800; }
.v-stack .hero-subtitle{ order: 1; font-size: clamp(22px, 2.2vw, 36px); font-weight: 800; }

/* タブレット：のぞかせ量を少し減らす */
@media (max-width: 1024px){
  :root{ --peek: 120px; }
}

/* スマホ：縦書きをやめて通常フローに */
@media (max-width: 768px){
  :root{ --peek: 0px; }
  .hero{ min-height: calc(100vh - var(--header-h)); background-position: center 30%, center 30%; }
  .hero > .v-stack{
    position: static;
    transform: none;
    writing-mode: horizontal-tb;
    display: block;
    text-align: center;
    margin-top: 16px;
    pointer-events: auto;
  }
}

/* ===== Hero: 2本の縦書きを中央下で“下へ抜け”＋上端そろえ ===== */
.hero{ position: relative; overflow: visible; }

.hero-vstack{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10vh;                   /* ← 下に抜ける量（-8〜-14vhで調整） */
  display: grid;
  grid-auto-flow: column;          /* 横に2本並べる */
  align-items: start;              /* ★上端そろえ★ */
  gap: 24px;                       /* 列間（px固定→後で好みで） */
  pointer-events: none;
  z-index: 3;
}

/* 共通（縦書き・青） */
.hero-vstack .v{
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin: 0;
  color: var(--c-brand-600);
  line-height: 2;
  white-space: nowrap;

}

/* 右列＝タイトル / 左列＝サブ（順番はそのまま） */
.hero-vstack .v-title{ font-weight: 800; font-size: clamp(20px, 2.4vw, 32px); }
.hero-vstack .v-sub  { font-weight: 800; font-size: clamp(20px, 2.4vw, 32px); }

/* スマホでは横書きに戻す（任意） */
@media (max-width: 768px){
  .hero-vstack{
    position: static; transform:none; display:block;
    text-align:center; pointer-events:auto; margin-top:16px;
  }
  .hero-vstack .v{
    writing-mode: horizontal-tb; display:block; margin:0 0 6px 0;
  }
}

/* 落ち着いたオレンジ（お好みで調整可） */
:root{ --hero-accent: #DE8740; }  /* 例: #CF6E2A, #DE8740 なども○ */

/* 2 本とも同じスタイルに揃える＆色変更 */
.hero-vstack .v{
  color: #DE8740 !important;
  /* text-shadow: 0 2px 10px rgba(0,0,0,.25);   背景で沈み防止 */
  /* もう少しくっきりさせたい時は↓を追加（任意）
     -webkit-text-stroke: 0.6px rgba(255,255,255,.3); */
  line-height: 2;
}

/* Hero を低くする（数値を大きくするとさらに低くなる） */
:root{ --peek: 200px; }   /* ← 900pxは過剰。200pxに修正 */

/* どれだけ下へ抜けるか（-12vh などにするとさらに下へ） */
:root { --vstack-bleed: -30vh; } /* 例: -10vh → -12vh / -14vh など */

/* .hero-vstack{
  bottom: var(--vstack-bleed) !important;
} */


/* ===== Hero 下の3枚フォト ===== */
:root{
  --photo-overlap: 110px;       /* どれだけヒーロー領域に食い込ませるか */
  --photo-gap: 28px;            /* 写真同士の間隔 */
  --photo-radius: 18px;         /* 角丸 */
}

.photo-panel{
  position: relative;
  z-index: 2;                                  /* ヒーローのグラデの上に出す */
  margin-top: calc(var(--photo-overlap) * -1); /* 上に食い込ませる */
  padding-bottom: 40px;                         /* セクション間の余白 */
}

/* レイアウト：左に大きい1枚、右に2枚を上下で */
.photo-wrap{
  width: min(1100px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 220px 220px;
  gap: var(--photo-gap);
}

.ph{
  position: relative;
  border-radius: var(--photo-radius);
  overflow: hidden;
  background: #fff;                            /* ポラロイド風の縁取り用（任意） */
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.ph-1{ grid-row: 1 / 3; }                      /* 左の写真を縦に大きく */
.ph img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* レスポンシブ */
@media (max-width: 1024px){
  :root{ --photo-overlap: 90px; }
  .photo-wrap{ grid-template-rows: 200px 200px; }
}
@media (max-width: 768px){
  :root{ --photo-overlap: 36px; }
  .photo-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: 200px 180px 180px;
  }
  .ph-1{ grid-row: auto; }
  .ph-2, .ph-3{ transform: none; }
}

/* 左端の笑顔写真を参考画像っぽい位置とサイズに */
:root{
  --photo-overlap: 110px;              /* ヒーローへの食い込み量（必要なら調整） */
  --photo-left-w: min(420px, 42vw);    /* 左写真の横幅：小さめにする */
  --photo-left-inset: clamp(12px, 2.2vw, 24px);  /* 左内側の余白（“端にピッタリ”にしない） */
  --photo-row-h: 240px;                /* 右2枚の高さ（そろえ用） */
}

/* レイアウト：左は1枚、右は上下2枚 */
.photo-wrap{
  width: min(1100px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: var(--photo-row-h);
  gap: var(--photo-gap);
}

/* ← 左の笑顔写真（小さめ・コンテンツ左寄せ・少しだけ内側に） */
.ph-1{
  grid-column: 1;
  grid-row: 1;
  width: var(--photo-left-w);
  justify-self: start;                 /* 左寄せ */
  align-self: start;                   /* 上にそろえる */
  margin-left: var(--photo-left-inset);/* ほんの少し内側に */
  transform: translateY(0);            /* 位置をフラットに（好みで -4pxなど） */
}

/* 右側の2枚を上下に */
.ph-2{ grid-column: 2; grid-row: 1; }
.ph-3{ grid-column: 2; grid-row: 2; }

/* 共通の見た目（角丸・影など） */
.ph{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* タブレット～スマホ調整 */
@media (max-width: 1024px){
  :root{ --photo-overlap: 90px; --photo-row-h: 210px; }
  .ph-1{ width: min(380px, 50vw); }
}
@media (max-width: 768px){
  :root{ --photo-overlap: 36px; --photo-row-h: 180px; }
  .photo-wrap{
    grid-template-columns: 1fr;
    grid-auto-rows: 200px 180px 180px;
  }
  .ph-1{ width: 100%; margin-left: 0; }
  .ph-2, .ph-3{ grid-column: 1; }
}

/* 左写真を左へスライドさせる量（大きいほど左） */
:root{ --photo-shift: clamp(40px, 10vw, 240px); }

/* グリッドの位置は保ったまま左へ移動（レイアウト崩れにくい） */
.photo-panel{ overflow: visible; }        /* はみ出しを許可 */
.ph-1{
  transform: translateX(calc(-1 * var(--photo-shift)));
}

/* タブレット/スマホは戻す（任意） */
@media (max-width: 768px){
  :root{ --photo-shift: 0px; }
}

/* 画面の左端に合わせて大きく押し出す */
:root{ --edge-pad: 0px; }  /* 0px=端ピッタリ / 16px=少し内側 */

.photo-panel{ overflow: visible; }
.photo-wrap{ position: relative; }

.ph-1{
  /* いまの translateX は無効化してOK */
  transform: none !important;

  /* ここが肝：ビューポート左端に揃える */
  margin-left: calc(50% - 50vw + var(--edge-pad)) !important;

  /* 必要ならサイズも少し大きめ/小さめに調整 */
  width: min(460px, 45vw);
}

/* 端からの余白を増やすだけ */
:root{ --edge-pad: 400px; }   /* 例: 16px → 32px → 48px … と増やす */
.ph-1{
  margin-left: calc(50% - 50vw + var(--edge-pad)) !important;
}

/* タブレット以下はレイアウトを戻す（任意） */
@media (max-width: 768px){
  .ph-1{ margin-left: 0 !important; width: 100%; }
}

/* 右下の縦書き「CONCEPT」 */
.photo-panel{ position: relative; }           /* 基準にする */

/* 写真を上に（必要なら） */
.photo-wrap{ position: relative; z-index: 2; }

/* ===== 右側 2 枚をオシャレに配置 ===== */
.photo-panel{ overflow: visible; }      /* はみ出しを許可 */
.photo-wrap{ position: relative; }

/* 共通（白いフレームと影） */
.ph-2, .ph-3{
  position: relative;
  isolation: isolate;                   /* 疑似要素の重なり管理 */
  border-radius: 16px;
  overflow: hidden;
}
.ph-2::before, .ph-3::before{
  content: "";
  position: absolute;
  inset: -12px;                         /* 外側に“白フレーム”を作る */
  border-radius: 20px;
  background: #fff;
  z-index: -1;
  box-shadow: 0 18px 36px rgba(0,0,0,.14);
}

/* ちょいアクセント（小さな色帯）—不要なら削除OK */
.ph-2::after, .ph-3::after{
  content: "";
  position: absolute;
  top: 14px; left: 14px;
  width: 46px; height: 4px;
  border-radius: 9999px;
  background: var(--c-brand-400);
  opacity: .7;
}

/* 重なりと回転（数値はお好みで微調整可） */
.ph-2{ 
  transform: rotate(-1.2deg) translateY(6px);
  z-index: 2;
}
.ph-3{
  /* 右下へ少しズラしつつ、上へ重ねる */
  transform: rotate(1.4deg) translate(22px, -42px);
  margin-top: -42px;                    /* 上へ寄せて重なり感を出す */
  z-index: 1;
}

/* 画像は中でしっかりトリミング */
.ph-2 img, .ph-3 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ホバーでほんの少しだけ“ふわっ”と */
.ph-2:hover, .ph-3:hover{
  transform: translateY(-2px) scale(1.01) rotate(0deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ph-2:hover::before, .ph-3:hover::before{
  box-shadow: 0 22px 40px rgba(0,0,0,.16);
}

/* キャプション（任意） */
.ph-2 figcaption, .ph-3 figcaption{
  position: absolute;
  left: 14px; bottom: 12px;
  padding: 6px 10px;
  font-size: 12px;
  color: #556275;
  background: rgba(255,255,255,.92);
  border-radius: 9999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* タブレット以下は重なり・回転を抑えて見やすく */
@media (max-width: 1024px){
  .ph-2{ transform: rotate(-.6deg) translateY(4px); }
  .ph-3{ transform: rotate(.8deg) translate(12px, -24px); margin-top: -24px; }
}
@media (max-width: 768px){
  .ph-2, .ph-3{
    transform: none; margin-top: 0;
  }
  .ph-2::before, .ph-3::before{ inset: -8px; }
  .ph-2::after, .ph-3::after{ display: none; }  /* モバイルは装飾を抑える */
}

/* ヒーローと同じ左右余白を使って右端風にする */
.ph-2{
  justify-self: end;
  margin-right: calc(var(--hero-gutter) * -1 + 0px) !important; /* +8pxは微調整 */
  transform: rotate(-1.2deg) translateY(6px);
}

/* 重なりをやめる（顔が隠れないように） */
.ph-3{
  transform: rotate(1.4deg) translate(0, 0);
  margin-top: 16px;
}

/* 右へどれだけ押し出すか（大きいほど右） */
:root{ --ph2-push: 500px; }  /* 0 → 24 → 48 → 72… と調整 */

.photo-panel{ overflow: visible; }
.ph-2{
  justify-self: end;
  /* ガターぶん(−)に、さらに −push を上乗せして右へ */
  margin-right: calc(var(--hero-gutter) * -1 - var(--ph2-push)) !important;
  transform: rotate(-1.2deg) translateY(6px);
}

/* 右へ押し出す量（大きいほど右） */
:root{ --ph3-push: 32px; }  /* 32 → 48 → 64 … と調整 */

.photo-panel{ overflow: visible; }
.ph-3{
  justify-self: end;
  margin-right: calc(var(--hero-gutter) * -1 - var(--ph3-push)) !important;
  transform: rotate(1.4deg);   /* 必要ならそのまま */
  margin-top: 16px;            /* 重なりをやめたい時用。重ねるなら負数でもOK */
}

/* ── Hero 左下のやさしい押し文句 ─────────────────── */
.hero{ position: relative; }  /* 念のため */

.hero-slogan{
  position: absolute;
  left: calc(var(--hero-gutter) - 4px);  /* 左余白にそろえる（微調整は ± 数値） */
  bottom: clamp(22px, 5vh, 80px);        /* 下からの距離：もう少し下なら数値↓ */
  max-width: 60ch;
  z-index: 3;

  /* 見た目 */
  background: rgba(255,255,255,.65);     /* うっすら白で読みやすく */
  backdrop-filter: blur(2px);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(31,78,140,.08);

  color: #5b6b80;
  letter-spacing: .03em;
  line-height: 1.9;
  font-size: clamp(13px, 1.4vw, 15px);
}

/* 小さなアクセントライン */
.hero-slogan::before{
  content:"";
  display:block;
  width: 60px;
  height: 2px;
  border-radius: 9999px;
  background: var(--c-brand-400);
  opacity:.7;
  margin-bottom: 8px;
}

/* 先頭行だけ少しだけ強めに */
.hero-slogan .lead{
  font-weight: 700;
  color: var(--c-brand-700);
}

/* モバイルは邪魔しない配置に */
@media (max-width: 768px){
  .hero-slogan{
    margin: 10px auto 0;
    text-align: center;
    background: rgba(255,255,255,.9);
  }
}

:root{
  --peek: 0px;          /* のぞかせ無し */
  --vstack-out: 0px;    /* はみ出し無し */
}
.hero{
  min-height: calc(100dvh - var(--header-h)) !important;  /* 1画面に収める */
}

/* ===== Fold-fit for hero (1画面に収めて下をのぞかせる) ===== */
:root{
  --peek: 120px;        /* 下をどれだけ見せるか：80〜160pxで調整 */
  --vstack-bleed: -8vh; /* 縦書きテキストの“下抜け”量：-6〜-12vhで調整 */
}

.hero{
  /* 1画面 - ヘッダー高 - のぞかせ分 */
  min-height: calc(100dvh - var(--header-h) - var(--peek)) !important;
}

/* 縦書きを少しだけ持ち上げ（下に抜け過ぎないように） */
/* .hero-vstack{ bottom: var(--vstack-bleed) !important; } */

/* 下の3枚フォトの食い込みが強すぎる場合は少し控えめに（任意） */
@media (min-width: 769px){
  :root{ --photo-overlap: 90px; } /* 110→90px に弱める。もっと見せたいなら 80px など */
}

/* ===== hero 縦書きの位置を少しだけ下げる（微調整） ===== */
/* どれくらい下げるか：2vh〜8vhくらいで好み調整 */
:root{ --vstack-nudge: 4vh; }

.hero-vstack{
  position: absolute !important;
  left: clamp(28px, 4vw, 64px) !important;
  top: auto !important;
  bottom: clamp(20px, 3.5vh, 52px) !important;
  transform: none !important;
}

/* スマホでは従来どおり（必要なら） */
@media (max-width: 768px){
  .hero-vstack{
    position: static !important;
    transform: none !important;
    margin-top: 16px;
  }
}

/* ── 縦書きコピーの視認性アップ ───────────────── */

/* ① ハロー：白の極細アウトライン＋柔らかい影 */


/* ② ガラスの帯：縦書き1列ごとにうっすら帯を敷く（強すぎない程度） */
.hero-vstack .v{
  position: relative;
  z-index: 1;
}

.hero-vstack .v::before{
  content:"";
  position:absolute;
  inset: -8px -10px;                 /* 文字の周囲に少しマージン */
  border-radius: 12px;
  background: linear-gradient(180deg,
              rgba(255,255,255,.28), rgba(255,255,255,.16));
  backdrop-filter: blur(2px);        /* 背景をほんの少しだけぼかす */
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  z-index:-1;                        /* 文字の背面へ */
  pointer-events:none;
}







/* セクション共通 */
.section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: clamp(22px, 3.2vw, 36px);
    color: var(--c-brand-600);
    margin-bottom: 15px;
    font-weight: 800;
}

.section-subtitle {
    font-size: clamp(13px, 1.4vw, 16px);
    color: #7a8aa1;
}

/* 施設について */
.about {
    background-color: #fff;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text p {
    margin-bottom: 20px;
    line-height: 1.9;
}

.about-features {
    list-style: none;
    margin-top: 30px;
}

.about-features li {
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    color: #59657a;
}

.about-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-brand-600);
    font-weight: bold;
    font-size: 18px;
}

.about-image img {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* サービス */
.services {
    background: linear-gradient(135deg, var(--c-soft-1) 0%, var(--c-soft-2) 100%);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(43, 108, 176, 0.18);
}

.service-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: clamp(15px, 1.6vw, 20px);
    color: var(--c-brand-600);
    margin-bottom: 15px;
    font-weight: 700;
}

.service-card p {
    font-size: clamp(13px, 1.1vw, 14px);
    line-height: 1.8;
    color: #59657a;
}

/* 施設紹介 */
.facilities {
    background-color: #fff;
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.facility-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.facility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.facility-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.facility-info {
    padding: 25px;
    background-color: #fff;
}

.facility-info h3 {
    font-size: clamp(15px, 1.6vw, 20px);
    color: var(--c-brand-600);
    margin-bottom: 10px;
    font-weight: 700;
}

.facility-info p {
    font-size: clamp(13px, 1.1vw, 14px);
    color: #59657a;
    line-height: 1.8;
}

/* スタッフ */
.staff {
    background: linear-gradient(135deg, var(--c-soft-2) 0%, var(--c-soft-1) 100%);
}

.staff-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}

.staff-message {
    background-color: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.staff-message h3 {
    font-size: clamp(17px, 1.9vw, 24px);
    color: var(--c-brand-600);
    margin-bottom: 25px;
    font-weight: 800;
}

.staff-message p {
    margin-bottom: 20px;
    line-height: 1.9;
}

.staff-signature {
    text-align: right;
    font-weight: 700;
    color: var(--c-brand-600);
    margin-top: 30px;
}

.staff-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.stat-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.stat-number {
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 800;
    color: var(--c-brand-600);
    margin-bottom: 8px;
}

.stat-label {
    font-size: clamp(13px, 1.2vw, 15px);
    color: #7a8aa1;
}

/* アクセス */
.access {
    background-color: #fff;
}

.access-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
}

.access-info h3 {
    font-size: clamp(17px, 1.9vw, 24px);
    color: var(--c-brand-600);
    margin-bottom: 30px;
    font-weight: 800;
}

.info-item {
    margin-bottom: 25px;
}

.info-item strong {
    display: block;
    color: var(--c-brand-600);
    margin-bottom: 8px;
    font-size: 15px;
}

.info-item p {
    color: #59657a;
    line-height: 1.8;
}

.access-map img {
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
}

/* お問い合わせ */
.contact {
    background: linear-gradient(135deg, var(--c-soft-1) 0%, var(--c-soft-2) 100%);
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #59657a;
    font-weight: 600;
}

.required {
    color: var(--c-brand-600);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #eef2f7;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-brand-500);
    box-shadow: 0 0 0 3px rgba(63, 131, 209, 0.15);
}

.form-group textarea {
    resize: vertical;
}

.btn-submit {
    width: 100%;
    padding: 16px;
    background-color: var(--c-brand-600);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: .02em;
}

.btn-submit:hover {
    background-color: var(--c-brand-700);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 78, 140, 0.25);
}

/* フッター */
.footer {
    background-color: #394150;
    color: #fff;
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-info h3 {
    color: var(--c-brand-400);
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 800;
}

.footer-info p {
    margin-bottom: 8px;
    font-size: 14px;
    color: #cbd5e1;
}

.footer-links h4,
.footer-hours h4 {
    color: var(--c-brand-400);
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 800;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #cbd5e1;
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--c-brand-400);
}

.footer-hours p {
    color: #cbd5e1;
    font-size: 14px;
    margin-bottom: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #4b5563;
}

.footer-bottom p {
    font-size: 13px;
    color: #a5b4cc;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 20px;
    }

    .nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .hero {
        height: 500px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .section {
        padding: 50px 0;
    }

    .about-content,
    .staff-content,
    .access-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .services-grid,
    .facilities-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 30px 20px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* =========================
   Mobile fix (≤768px) — one pass override
   ========================= */
@media (max-width: 768px){

  /* 基本トークン */
  :root{
    --header-h: 64px;
    --hero-gutter: 16px;
    --peek: 0px; /* のぞかせ無し＝1画面に収める */
    --photo-overlap: 24px;
  }

  /* ===== Header ===== */
  .header .container{ padding: 0 12px; }
  .header-content{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 8px;
  }
  .tagline{ display: none; }

  /* ナビは横スクロールで窮屈回避（2行折返しより安全） */
  .nav{
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    column-gap: 14px;
    row-gap: 0;
    padding: 6px 0;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{
    font-size: 14px;
    padding: 8px 6px;
  }

  /* 右上ボタンは“お問い合わせ”だけ残す（幅節約） */
  .header-actions{ justify-self: stretch; justify-content: center; gap: 8px; }
  .header-actions .btn-square:first-child{ display:none; } /* 資料請求を隠す */
  .btn-square{ padding: 14px 14px; font-size: 14px; width: 100%; justify-content: center; }

  /* ===== Hero ===== */
  .hero{
    min-height: calc(100dvh - var(--header-h)) !important;  /* 1画面に収める */
    padding-inline: var(--hero-gutter);
    background-position: center 24%; /* やや上寄せで人物や文字を見せる */
  }

  /* 縦書きはスマホでは横書き・中央寄せに（視認性重視） */
  .hero-vstack{
    position: static !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    pointer-events: auto;
  }
  .hero-vstack .v{
    writing-mode: horizontal-tb;
    line-height: 1.6;
    font-weight: 800;
  }
  .hero-vstack .v-title{ font-size: 18px; }
  .hero-vstack .v-sub  { font-size: 14px; }

  /* 背景に沈まないよう、帯を控えめに強化 */
  .hero-vstack .v::before{
    inset: -4px -6px;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
  }

  /* ===== Photo strip under hero ===== */
  .photo-panel{ margin-top: 8px; padding-bottom: 28px; overflow: visible; }
  .photo-wrap{
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
    gap: 14px;
    width: min(640px, 92%);
  }
  .ph-1{
    width: 100%;
    margin-left: 0 !important;
    transform: none !important;
  }
  .ph-2, .ph-3{
    margin-right: 0 !important;
    transform: none !important;
    margin-top: 0;
  }
  .ph-2::before, .ph-3::before{ inset: -8px; }

  /* 左下のやさしいコピーは通常フローへ */
  .hero-slogan{
    margin: 8px auto 0;
    text-align: center;
    background: rgba(255,255,255,.9);
    max-width: 90%;
  }

  /* ===== Sections ===== */
  .section{ padding: 48px 0; }

  .about-content,
  .staff-content,
  .access-content{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .services-grid,
  .facilities-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* フォーム */
  .contact-form{ padding: 24px 16px; }
  .form-row{ grid-template-columns: 1fr; }

  /* Map iframeを流動化 */
  .access-map iframe{
    width: 100% !important;
    height: 240px !important;
  }

  /* フッター */
  .footer-content{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===== Mobile hero: use the uploaded image & hide overlaid texts ===== */
@media (max-width: 768px){

  /* 画像の置き場所に合わせてパスだけ調整してください */
  .hero{
    /* 下に向かって白フェード + 背景画像（2枚レイヤー） */
    background:
      linear-gradient(to bottom, rgba(255,255,255,0) var(--fade-stop,88%), #fff 100%),
      url('assets/スマホ版トップ画像.png'); /* 例: assets/hero-mobile.webp にしてもOK */

    background-size: cover, cover;
    background-position: center 58%, center 58%;   /* 鹿と縦書きが見切れない位置 */
    min-height: calc(100dvh - var(--header-h));    /* 1画面に収める */
  }



  /* モバイルはヒーロー直下の写真が食い込み過ぎないよう少し調整（任意） */
  .photo-panel{ margin-top: -24px; }
}

  /* ====== SP ヘッダー：ロゴは表示、他はハンバーガーへ ====== */
@media (max-width: 768px){
  .header-content{ justify-content: space-between; gap: 8px; }
  .logo{ display:flex; align-items:center; gap:10px; }
  .site-title{ font-size: 18px; }        /* ロゴは見えるサイズを維持 */
  .tagline{ display:none; }              /* サブコピーは隠す */

  /* 既存のナビとアクションはSPでは隠す */
  .nav, .header-actions{ display: none !important; }

  /* ハンバーガー */
  .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: var(--c-text, #334);
  }
}

/* ====== ドロワー（右からスライド） ====== */
.drawer{ position: fixed; inset: 0; z-index: 1000; }
.drawer[hidden]{ display:none; }
.drawer__backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.45);
  opacity:0; transition: opacity .2s ease;
}
.drawer__panel{
  position:absolute; top:0; right:0; height:100%;
  width: min(86vw, 360px);
  background:#fff; box-shadow: -20px 0 40px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .25s ease;
  display:flex; flex-direction:column; gap: 8px; padding: 18px 18px 24px;
}
.drawer__close{
  margin-left:auto; background:#fff; border:1px solid rgba(0,0,0,.08);
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:#334;
}

/* オープン時 */
.drawer.open .drawer__backdrop{ opacity:1; }
.drawer.open .drawer__panel{ transform: translateX(0); }
body.is-menu-open{ overflow:hidden; }

/* リストとボタン */
.drawer__list{ list-style:none; padding:6px 0 10px; margin:0; }
.drawer__list li + li{ border-top:1px solid #eef1f4; }
.drawer__list a{
  display:block; padding:12px 4px; color:#223; text-decoration:none; font-size:16px;
}
.drawer__actions{ margin-top:auto; display:grid; gap:10px; }
.drawer__actions .btn-square{ width:100%; justify-content:center; padding:12px 14px; }

/* さらに狭い端末で微調整 */
@media (max-width: 360px){
  .site-title{ font-size: 17px; }
  .menu-toggle{ width:36px; height:36px; }
  .drawer__list a{ font-size:15px; padding:11px 2px; }
}

/* 右上ハンバーガー（SPのみ表示） */
.menu-toggle{ display:none; }
@media (max-width:768px){
  .header-content{ display:flex; align-items:center; gap:8px; }
  .menu-toggle{
    display:flex; margin-left:auto;
    width:40px; height:40px; border-radius:10px;
    border:1px solid rgba(0,0,0,.08); background:#fff; color:#334;
    z-index:1001;
  }
  .nav, .header-actions, .tagline{ display:none !important; }
}

/* ドロワー */
.drawer[hidden]{ display:none; }
.drawer{ position:fixed; inset:0; z-index:1500; }
.drawer__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(86vw,380px); background:#fff; overflow:auto;
  padding:20px 16px; box-shadow:-20px 0 40px rgba(0,0,0,.2);
}
.no-scroll{ overflow:hidden; }

/* PC ではハンバーガーを隠す */
.menu-toggle{ display:none; }

/* SP だけロゴとボタンを横並びに（ハンバーガーはタイトルの右） */
@media (max-width:768px){
  .logo{
    display:flex;
    align-items:center;
    gap:8px;                   /* タイトルとのすき間 */
  }
  .logo .site-title{ margin:0; }     /* 余白をリセット */
  .menu-toggle{
    display:flex;
    width:40px; height:40px;         /* タップ幅 */
    padding:0;
    margin-left:8px !important;      /* ← 右端に飛ばないよう固定 */
    border:1px solid rgba(0,0,0,.08);
    border-radius:10px;
    background:#fff; color:#334;
  }

  /* SPではナビ等はドロワーに任せて非表示 */
  .nav, .header-actions, .tagline{ display:none !important; }
}

/* ---- SP：タイトル左の青ハートを常に表示、"…" を出さない ---- */
@media (max-width: 768px){
  /* タイトル行をアイコン＋テキストで横並び */
  .site-title a{
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;     /* 折り返しなし */
    overflow: visible;       /* ← ellipsis を無効化 */
    text-overflow: clip;     /* ← ellipsis を無効化 */
    min-width: 0;            /* flex 計算の安全策 */
    font-size: 16px;         /* 320px端末での見え方が厳しければ 15px に */
    line-height: 1.1;
  }

  /* ハートの見た目（青／大きさ固定 & 省略の対象外） */
  .icon-heart{
    color: #1e88ff;          /* お好みの青に */
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex: 0 0 auto;          /* 省略されないよう固定幅 */
  }
  .icon-heart svg{ display:block; }

  /* もしどこかで "…" を擬似要素で入れていた場合の保険 */
  .icon-heart::before{ content: none !important; }
}

/* ロゴ行の並び（タイトルの右にハンバーガー） */
@media (max-width: 768px){
  .logo{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .menu-toggle{
    display:flex;
    width:40px; height:40px;
    padding:0;
    margin-left:8px;         /* タイトルのすぐ右に置く */
    border:1px solid rgba(0,0,0,.08);
    border-radius:10px;
    background:#fff; color:#334;
  }
  /* ナビや右上ボタンはドロワーに任せて非表示 */
  .nav, .header-actions, .tagline{ display:none !important; }
}

/* ============== SP: ヒーローを“きゅっと” ============== */
@media (max-width: 768px){
  :root{
    /* 数値だけ触れば微調整できます */
    --sp-hero-h: 72svh;       /* ヒーローの高さ（68〜78svhで好みに） */
    --sp-hero-y: 68%;         /* 画像の見せる縦位置（%が大きいほど下寄りを見せる） */
  }

  /* 余白が大きいと感じる場合は header 高さも控えめに */
  .header{ min-height: 56px; }

  .hero{
    min-height: var(--sp-hero-h);     /* 以前の100vh系を上書き */
    padding-block: 0;                 /* 上下パディングを詰める */
    background-position: 50% var(--sp-hero-y); /* 鹿/地面が切れない位置に調整 */
    background-size: cover;
  }

  /* ヒーロー左下の“やさしい押し文句”は、画面内に収まるよう少し上げる */
  .hero-slogan{
    left: 16px;
    bottom: 16px;
    max-width: 84%;
  }
}

/* ============== SP: 3枚写真を均等に1列 ============== */
@media (max-width: 768px){
  :root{
    --sp-photo-h: clamp(160px, 38vw, 210px);  /* 各写真の高さを均等に */
    --sp-photo-gap: 14px;                     /* 写真同士の間隔 */
  }

  .photo-panel{ 
    margin-top: 16px; 
    padding-bottom: 24px; 
    overflow: visible; 
  }

  .photo-wrap{
    width: min(640px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: var(--sp-photo-h);
    gap: var(--sp-photo-gap);
  }

  /* 左の大きい1枚も含め、すべて同じ見た目&幅に */
  .ph-1, .ph-2, .ph-3{
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;     /* 回転やズラしを解除 */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  .ph-1 img, .ph-2 img, .ph-3 img{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }

  /* PC用の“白フレーム装飾”や帯はSPでは外す */
  .ph-2::before, .ph-3::before,
  .ph-2::after,  .ph-3::after{ display: none !important; }

  /* これまでの“左端に押し出す”指定をSPでは打ち消す */
  .ph-1{ margin-left: 0 !important; }
}

/* ===== SP：ヒーローを短く＆スマホ画像に差し替え ===== */
@media (max-width: 768px){
  :root{
    --sp-hero-h: 45svh;   /* 68〜78svhあたりで好みに調整 */
    --sp-hero-y: 68%;     /* 画像の見せる縦位置（%大きい=下寄りを見せる） */
  }

  /* ここで background を丸ごと上書き（!important付き） */
  .hero{
    min-height: var(--sp-hero-h) !important;
    background:
      linear-gradient(to bottom, rgba(255,255,255,0) 82%, #fff 100%),
      url("assets/スマホ版トップ画像.png") 50% var(--sp-hero-y)/cover no-repeat !important;
    padding-block: 0;
  }

  /* 左下の押し文句が消えないよう位置を控えめに */
  .hero-slogan{
     left:16px; bottom:16px; max-width:84%;
  }
}

/* ===== SP：下の3枚を等間隔の1列に＆必ず3枚出す ===== */
@media (max-width: 768px){
  :root{
    --sp-photo-h: clamp(170px, 38vw, 220px);
    --sp-photo-gap: 14px;
  }

  .photo-panel{
    position: relative;
    z-index: 5;                 /* ヒーローの上に出す */
    margin-top: 16px !important;/* PCの“食い込み”を打ち消す */
    padding-bottom: 24px;
    overflow: visible;
  }

  .photo-wrap{
    width: min(640px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr !important;
    grid-auto-rows: var(--sp-photo-h) !important;
    gap: var(--sp-photo-gap);
  }

  /* PCの回転/押し出しを完全解除して3枚とも表示 */
  .ph-1, .ph-2, .ph-3{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }

  /* 白フレーム装飾はSPでは外す */
  .ph-2::before, .ph-3::before,
  .ph-2::after,  .ph-3::after{ display: none !important; }

  /* 念のため行を確定（順番ズレ防止） */
  .ph-1{ grid-row: 1 !important; }
  .ph-2{ grid-row: 2 !important; }
  .ph-3{ grid-row: 3 !important; }
}

/* SP：ハンバーガーをさらに右へ */
@media (max-width: 768px){
  .header .header-content{ position: relative; }

  /* 右端の余白量（数pxで微調整できます） */
  :root{ --sp-menu-right: 0px; }  /* 0～12pxくらいで好み調整 */

  .menu-toggle{
    position: absolute;
    right: var(--sp-menu-right);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
  }

  /* タイトルに被らないよう右側に余白を確保 */
  .logo{ padding-right: 44px; }   /* 40～48px 目安でOK */

  /* もしコンテナの左右パディングが邪魔なら少しだけ詰める */
  .header .container{ padding-inline: 10px; } /* 必要なければ削除 */
}

/* ===== SPヘッダーの縦中央そろえ & 右上ハンバーガー ===== */
@media (max-width: 768px){
  /* ヘッダー自体の高さと上下余白 */
  .header{ --header-h: 56px; }                  /* 好みで 56〜64px */
  .header .container{ padding-block: 6px; }     /* 上下の詰め/ゆとり調整 */

  /* 中身を縦中央に */
  .header-content{
    position: relative;
    display: flex;
    align-items: center;                         /* ←縦中央そろえ */
    min-height: var(--header-h);
  }

  /* ロゴ行（ハート＋テキスト） */
  .logo{ display:flex; align-items:center; gap: 6px; }

  /* h1 既定マージンを消し、行の高さを詰める */
  .site-title{ margin: 0; line-height: 1; }
  .site-title a{
    display: flex;
    align-items: center;                         /* ハートと文字を縦中央 */
    gap: 6px;
    font-size: clamp(15px, 4.2vw, 18px);        /* 小さすぎ/大きすぎ防止 */
    text-decoration: none;
  }
  .icon-heart svg{ width: 16px; height: 16px; color: var(--c-brand-500); }

  /* ハンバーガーを常に“右上の縦中央”に */
  .menu-toggle{
    position: absolute;
    right: clamp(10px, 3vw, 16px);
    top: 50%;
    transform: translateY(-50%);                /* ←縦中央固定 */
    padding: 8px;                                /* タップ領域 */
    border-radius: 8px;
  }

  /* PC専用ナビ/ボタンはSPで非表示（ハンバーガーに入れるため） */
  .nav, .header-actions{ display: none !important; }
}

/* ===== SPヘッダー：ロゴとハンバーガーを同じ高さに ===== */
@media (max-width: 768px){
  .header{ --header-h: 56px; }                 /* 好みで 56〜64px */
  .header .container{ padding-block: 6px; }

  /* グリッドで左右に配置 & 縦中央そろえ */
  .header-content{
    display: grid;
    grid-template-columns: 1fr auto;           /* 左：ロゴ／右：ボタン */
    align-items: center;                        /* ←縦中央 */
    min-height: var(--header-h);
    position: relative;
  }

  /* ロゴ行（ハート＋テキスト） */
  .logo{ display:flex; align-items:center; gap:6px;padding-left: 50px; }
  .site-title{ margin:0; line-height:1; }
  .site-title a{
    display:flex; align-items:center; gap:6px;
    font-size: clamp(15px, 4.2vw, 18px);
    text-decoration:none;
    padding-right: 40px;
  }
  .icon-heart svg{ width:16px; height:16px; color: var(--c-brand-500); }

  /* ハンバーガーは右端・縦中央（絶対配置はやめる） */
  .menu-toggle{
    position: static;           /* ←以前の absolute/transform を無効化 */
    transform: none;
    justify-self: end;          /* 右端へ */
    margin-right: clamp(8px, 3vw, 12px);
    padding: 8px;
    border-radius: 8px;
  }

  /* PC専用ナビ/ボタンはSPで非表示（メニュー内に格納） */
  .nav, .header-actions{ display:none !important; }
}

/* PC/SP 出し分けの基本 */
.only-pc{ display:block; }
.only-sp{ display:none; }

/* ===== SP：写真3枚セクションの“一番下”に表示 ===== */
@media (max-width:768px){
  /* PC用は隠し、SP専用だけ見せる */
  .only-pc{ display:none !important; }
  .only-sp{ display:block !important; }

  /* 写真セクション最下部に、余白を取って素直に配置 */
  .photo-panel .photo-slogan{
    position: static !important;
    margin: 16px auto 0 !important;     /* ← ここを 24px/32px に増やすと下げられます */
    max-width: 92%;
    text-align: center;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
}

/* ========== PC/SP 出し分けの基本 ========== */
.only-pc{ display:block; }
.only-sp{ display:none; }

/* PC：ヒーロー内のコピーを左下に重ねる */
@media (min-width: 769px){
  .hero{ position: relative; }
  .hero .hero-slogan.only-pc{
    position: absolute !important;
    left: calc(var(--hero-gutter, 32px) - 4px);
    bottom: clamp(22px, 5vh, 80px);
    margin: 0;
    z-index: 3;
  }
}

/* SP：写真3枚セクションの一番下に表示（通常フロー） */
@media (max-width: 768px){
  .only-pc{ display:none !important; }
  .only-sp{ display:block !important; }

  /* 以前の absolute / display:none を完全無効化 */
  .photo-panel .photo-slogan{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    /* 画像の下に少し余白を付けて見やすく */
    margin: 16px auto 0 !important;
    max-width: 92%;
    text-align: center;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
}


/* ==== place .hero-vstack just below the hero image ==== */
.hero{ position: relative; overflow: visible; } /* はみ出し許可 */

.hero-vstack{
  position: absolute !important;
  left: clamp(28px, 4vw, 64px) !important;
  top: auto !important;
  bottom: clamp(20px, 3.5vh, 52px) !important;
  transform: none !important;
  z-index: 3 !important;
  pointer-events: none;
}
/* 端末幅で微調整したいとき（任意） */
@media (max-width: 768px){
  .hero-vstack{ bottom: -1vh !important; } /* SPは少し控えめに */
}

/* 共通の見た目（PC/SP共通） */
.photo-slogan{
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(2px);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(31,78,140,.08);
  color: #5b6b80;
  line-height: 1.85;
  font-size: clamp(11px, 1vw, 13px); /* PC：コンパクトに */
}
.photo-slogan .lead{
  font-weight: 700;
  color: var(--c-brand-700, #1e3a8a);
  font-size: clamp(12px, 1.1vw, 14px);
}

/* SP：少し大きめに読みやすく */
@media (max-width: 768px){
  .photo-slogan{
    font-size: clamp(11.5px, 3.2vw, 13px);
  }
  .photo-slogan .lead{
    font-size: clamp(12px, 3.4vw, 14px);
  }
}

/* SP（〜768px）：3枚写真の“下”に中央寄せでそのまま流す */
@media (max-width: 768px){
  .photo-slogan{
    width: min(680px, 92%);
    margin: 14px auto 0;   /* 上だけ少し空けて中央寄せ */
    position: static;      /* 念のため重ね無効 */
  }
}

/* PC（769px〜）：左の大きい写真（ph-1）の“下”に左寄せで揃える */
@media (min-width: 769px){
  /* photo-wrap の左端 + 左写真の内側インセットに合わせて位置決め */
  .photo-slogan{
    width: min(460px, 45vw); /* 左写真と同等〜やや小さめ */
    /* photo-wrap は中央寄せ＆幅: min(1100px, 92%) を前提に左端へ合わせる */
    margin-left: calc((100% - min(1100px, 92%)) / 2 + var(--photo-left-inset, 16px));
    margin-top: clamp(16px, 2.2vw, 28px); /* 左写真と“離す”距離。好みで調整 */
  }
}

/* === PC：左写真と同じ列に photo-slogan を置く ===================== */
@media (min-width: 769px){
  .photo-panel > .photo-slogan{
    /* 既存の中央寄せ＆absolute等を安全に打ち消し */
    position: static !important;
    display: block !important;

    /* 左写真(.ph-1)と同じ式で左端を合わせる */
    margin: -80px 0 0 calc(50% - 60vw + var(--edge-pad)) !important;

    /* 横幅は左写真と同等〜やや小さめ */
    width: clamp(340px, 36vw, 520px);
    max-width: 100%;
    text-align: left;
  }

    /* 左上の青いライン */
  .photo-panel > .photo-slogan::before{
    content: "";
    position: absolute;
    top: 8px;         /* 上からの距離（調整OK） */
    left: 16px;        /* 左からの距離（調整OK） */
    width: 260px;       /* ラインの長さ */
    height: 2px;       /* ラインの太さ */
    border-radius: 9999px;
    background: var(--c-brand-400); /* ブランドの青 */
    opacity: .80;      /* 少しだけ柔らかく */
}





/* === Photo: 3枚を同サイズに & 青い線を消す === */

/* 見た目の基準サイズ（お好みで調整OK） */
:root{
  --photo-unified-w: min(460px, 45vw);   /* 横幅 */
  --photo-unified-h: 260px;              /* 高さ */
}

/* 3枚とも同じサイズにする */
.photo-wrap{
  grid-template-columns: 1fr 1fr;        /* 既定まま */
  grid-auto-rows: var(--photo-unified-h) !important;
}

.ph-1, .ph-2, .ph-3{
  width: var(--photo-unified-w) !important;
  height: var(--photo-unified-h) !important;
}

/* 左上の“青い線”（アクセント帯）を消す */
.ph-2::after, .ph-3::after{
  display: none !important;
}

/* もし白フレームの外枠が強い場合は少し控えめに
.ph-2::before, .ph-3::before{ inset: -8px !important; } */

/* SPはすでに縦1列＆均等なので従来どおりでOK */
@media (max-width: 768px){
  .ph-1, .ph-2, .ph-3{
    width: 100% !important;
    height: 200px !important;            /* モバイルの見え方を固定 */
  }
}}

/* ラッパーで角を作って、はみ出す画像をクリップ */
.staff-photo{
  border-radius: 60px;   /* 好みの丸み。もっと丸く → 80px など */
  overflow: hidden;      /* ← これが無いと角が見えません */
  display: block;
}

/* 中の画像も角丸に追従＋にじみ防止 */
.staff-photo img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: inherit;
}

/* === SP：サイズは維持しつつ左右の余白を揃える（はみ出しも封じる） === */
@media (max-width: 768px){
  :root{ --sp-gutter: 16px; }          /* 好みで 14〜20px に調整OK */
  html, body{ overflow-x: hidden; }     /* 横スクロール原因を無効化 */

  /* すべてのセクションの左右余白を同じに */
  .container,
  .header .container{
    padding-left: var(--sp-gutter) !important;
    padding-right: var(--sp-gutter) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ヒーローも同じガターで揃える（背景だけが広がって見えるのを防止） */
  .hero{
    padding-inline: var(--sp-gutter) !important;
  }

  /* ヒーロー直下の3枚写真：幅を“ビューポート − ガター×2”に固定 */
  .photo-panel .photo-wrap{
    width: calc(100% - var(--sp-gutter) * 2) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 万一のズレを消す保険（PC用の微調整を上書き） */
  .ph-1, .ph-2, .ph-3{
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* === SP：ヒーロー直下の3枚を縦に等間隔で並べる & 重なりを完全リセット === */
@media (max-width: 768px){
  :root{ --photo-gap-sp: 16px; }  /* 14〜24pxで好みに調整OK */

  .photo-panel .photo-wrap{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: var(--photo-gap-sp) !important;  /* ← “三枚目との間” と同じ感じの空間 */
    column-gap: 0 !important;
    width: calc(100% - var(--sp-gutter,16px) * 2) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* PC用の回転・ズラし・余計なマージンをSPで無効化 */
  .photo-panel .ph{
    margin: 0 !important;
    transform: none !important;
    z-index: 0 !important;
  }

  /* 念のため、個別の残りも確実に打ち消す */
  .photo-panel .ph-2,
  .photo-panel .ph-3{
    margin-top: 0 !important;
  }

  /* モバイルは装飾を控えめに（重なり感や見切れの予防） */
  .photo-panel .ph-2::after,
  .photo-panel .ph-3::after{
    display: none !important;
  }
}

/* SP：ヒーローを画面高にしつつ、背景はトリミングせず全体表示 */
@media (max-width: 768px){
  .hero{
    height: calc(100dvh - var(--header-h)) !important; /* 画面内に収める */
    background-size: contain !important;               /* ← cover から contain へ */
    background-position: top center !important;
    background-repeat: no-repeat !important;
  }
  /* 下の縦書きテキストが被るなら少し下げる */
  .hero-vstack{ bottom: 30vh !important; }
}


/* ===== SP：写真の重なりを無効化し、均等な間隔で縦に並べる ===== */
@media (max-width: 768px){
  /* 3枚を縦並び＋等間隔で配置（gapが確実に効く） */
  .photo-panel .photo-wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;                 /* ← 等間隔の量。12〜20pxで調整可 */
    width: min(620px, 92%) !important;
    margin-inline: auto !important;
  }

  /* 既存の「ずらし・重なり」系を完全オフ */
  .photo-panel .photo-wrap > figure{
    position: static !important;
    margin: 0 !important;
    transform: none !important;
    z-index: auto !important;
  }
  .photo-panel .photo-wrap > figure::before,
  .photo-panel .photo-wrap > figure::after{
    content: none !important;
    display: none !important;
  }

  /* 画像もはみ出さないようにフラット化 */
  .photo-panel .photo-wrap > figure > img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;       /* 角丸はお好みで */
  }
}



/* ===== SP：ヒーロー直下の余白をきゅっと詰める ===== */
@media (max-width: 768px){

  /* ヒーロー自体の下余白を最小に */
  .hero{
    margin-bottom: -380px !important;   /* 必要なら 8〜16pxで微調整 */
    padding-bottom: 0 !important;
  }

  /* ヒーローの白フェード（疑似要素/専用マスク）を無効化
     ※ 使っていない側は無視されます（保険でまとめてOFF） */
  .hero::after,
  .hero::before,
  .hero .hero-fade,
  .hero .hero-mask{
    content: none !important;
    display: none !important;
    height: 0 !important;
  }

  /* ヒーローの次に来る写真ブロックの上余白も抑える */
  section.hero + .photo-panel{
    margin-top: 8px !important;       /* 必要なら 0〜16pxで微調整 */
    padding-top: 0 !important;
  }
  .photo-panel{
    margin-top: 8px !important;       /* 念のためセーフティ */
    padding-top: 0 !important;
  }
}

@media (max-width: 768px){
  .hero::after{ 
    height: 48px !important;          /* 既存が長いと白い“空白”に見えるため短縮 */
    bottom: -1px !important;
    pointer-events: none !important;
  }
}

/* ===== SP：ヘッダーのハンバーガーを右上に再配置 ===== */
@media (max-width: 768px){

  /* 配置基準をつくる */
  .header .container{ position: relative; }
  /* .logo が position 指定されていると基準がズレる対策 */
  .header .logo{ position: static !important; }

  /* ボタンのレイアウト */
  .menu-toggle{
    position: absolute !important;   /* 右上に固定 */
    right: clamp(12px, 4vw, 16px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: auto !important;           /* 念のため左寄せ指定を打ち消し */
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    z-index: 30;                     /* タイトルより前面に */
    background: transparent;
    border: 0;
    outline: 0;
    border-radius: 10px;             /* 触りやすい大きさ/形 */
  }
  .menu-toggle svg{ width: 22px; height: 22px; }

  /* タイトルがボタンに重ならないよう右に余白を確保 */
  .header .header-content{
    min-height: 56px;                /* ヘッダー高さ */
    display: flex;
    align-items: center;
    padding-right: 56px;             /* ←ボタンぶんの退避スペース */
  }

  /* SPではナビ&右上アクションをドロワーへ（ヘッダーからは隠す） */
  .header .nav,
  .header .header-actions{
    display: none !important;
  }
}

/* ===== SP：タイトル＆ハートをハンバーガーと同じ高さへ ===== */
@media (max-width: 768px){

  /* ヘッダー行そのものを中央揃えに */
  .header .header-content{
    display: flex;
    align-items: center;          /* 縦中央 */
    min-height: 56px;             /* 行の高さ */
    padding: 8px 56px 8px 14px;   /* 右はハンバーガー分を空ける */
    box-sizing: border-box;
  }

  /* 左側ロゴブロック（ハート＋サイト名）を中央揃えに */
  .header .logo{
    display: flex;
    align-items: center;          /* 縦中央 */
    gap: 8px;
    margin: 0;                    /* 余白の暴れを抑止 */
  }

  /* h1 のデフォルト上下余白がズレの元なのでリセット */
  .header .site-title{
    margin: 11px 0;                    /* ←重要 */
    line-height: 1;               /* 文字の行高を詰める */
    font-size: clamp(15px, 4.2vw, 18px);
  }

  /* タイトル内のリンクを行の中央に */
  .header .site-title > a{
    display: inline-flex;
    align-items: center;          /* 縦中央 */
    gap: 6px;                     /* ハートとの間隔 */
    text-decoration: none;
  }

  /* ハートをアイコンとして中央に。微妙な上下ズレを打ち消し */
  .icon-heart{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;               /* 余白を消す */
  }
  .icon-heart svg{
    width: 18px; height: 18px;
  }

  /* ハンバーガーは右上・縦中央（前回の指定に合わせておきます） */
  .menu-toggle{
    position: absolute !important;
    right: clamp(12px, 4vw, 16px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: auto !important;
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    background: transparent; border: 0;
    z-index: 30;
  }
  .menu-toggle svg{ width: 22px; height: 22px; }
}


/* ===== SP：ヒーロー縦コピーを白文字に ===== */
@media (max-width: 768px){
  .hero-vstack .v,
  .hero .hero-vstack .v{
    color: #fff !important;
  }
  /* 視認性アップ（必要なければ消してOK） */
  .hero-vstack .v-title{ text-shadow: 0 2px 8px rgba(0,0,0,.35); }
  .hero-vstack .v-sub  { text-shadow: 0 1px 6px rgba(0,0,0,.30); }
}

/* ===== 375px以下：視認性を強化 ===== */
@media (max-width: 407px){
  .hero-vstack .v{
    color: #fff !important;
    text-shadow:
      0 2px 12px rgba(0,0,0,.75),
      0 1px 4px  rgba(0,0,0,.60) !important;
  }

  /* ガラス帯を不透明度高め・ぼかし強めに */
  .hero-vstack .v::before{
    background: linear-gradient(180deg,
      rgba(0,0,0,.42),
      rgba(0,0,0,.32)) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    inset: -6px -12px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .hero-vstack .v-title{ font-size: 16px !important; }
  .hero-vstack .v-sub  { font-size: 13px !important; }
}


/* ============================================
   FV 確定修正（最終）
   ============================================ */

/* ── PC（769px 以上）──────────────────────── */
@media (min-width: 769px) {

  /* ① ヒーロー：上限なし・画面いっぱい（鹿が全部見える） */
  .hero {
    min-height: calc(100dvh - var(--header-h)) !important;
    overflow: visible !important;
  }

  /* ② hero-content：右上に見出しを配置 */
  .hero-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding-top: clamp(40px, 5vh, 72px) !important;
    padding-right: clamp(56px, 6vw, 100px) !important;
    padding-left: clamp(40px, 5vw, 80px) !important;
    padding-bottom: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
  }

  /* ③ 見出し：右上・白文字 */
  .hero-headline {
    color: #fff !important;
    font-size: clamp(20px, 2.0vw, 32px) !important;
    font-weight: 900 !important;
    line-height: 1.7 !important;
    letter-spacing: 0.04em !important;
    text-align: right !important;
    max-width: min(500px, 44vw) !important;
    margin: 0 !important;
    text-shadow:
      0 2px 18px rgba(0,0,0,.65),
      0 1px 5px  rgba(0,0,0,.4) !important;
  }

  /* ④ 縦書き：中央・ヒーロー下端 */
  .hero-vstack {
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: clamp(16px, 3vh, 48px) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ── SP（768px 以下）─────────────────────── */
@media (max-width: 768px) {
  .hero-content {
    display: block !important;
    text-align: center !important;
    padding: 20px 16px 0 !important;
    min-height: 0 !important;
  }
  .hero-headline {
    color: #fff !important;
    font-size: clamp(19px, 5.2vw, 26px) !important;
    font-weight: 900 !important;
    text-align: center !important;
    max-width: 100% !important;
    line-height: 1.65 !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.7) !important;
    margin: 0 auto !important;
  }
}


/* ============================================================
   PHOTO-PANEL 確定（ph-1:-240px / ph-2:-240px / ph-3:110px）
   ============================================================ */
:root {
  --edge-pad: 0px !important; --ph2-push: 0px !important;
  --ph3-push: 0px !important; --photo-overlap: 120px !important;
}
.photo-panel {
  position: relative !important; z-index: 2 !important;
  margin-top: calc(var(--photo-overlap) * -1) !important;
  padding-bottom: 80px !important; overflow: visible !important;
}
.photo-wrap {
  position: relative !important; display: block !important;
  width: min(1100px, 92%) !important; height: 480px !important;
  margin: 0 auto !important; overflow: visible !important;
}
.ph {
  position: absolute !important; overflow: hidden !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.15) !important; margin: 0 !important;
}
.ph img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }

.ph-1 { left: -240px !important; top: 30px !important; width: 320px !important; height: 260px !important; transform: none !important; }
.ph-2 { right: -240px !important; top: 0 !important; width: 460px !important; height: 280px !important; transform: rotate(-1.2deg) !important; z-index: 2 !important; justify-self: unset !important; margin-right: 0 !important; }
.ph-3 { right: 110px !important; top: 190px !important; width: 380px !important; height: 250px !important; transform: rotate(1deg) !important; z-index: 1 !important; justify-self: unset !important; margin-right: 0 !important; margin-top: 0 !important; }

.ph-2::before,.ph-3::before,.ph-2::after,.ph-3::after { display: none !important; }

.photo-panel > .photo-slogan {
  position: static !important; display: block !important;
  width: min(380px, 36vw) !important;
  margin: 20px 0 0 calc((100% - min(1100px, 92%)) / 2 - 240px) !important;
  text-align: left !important;
}

@media (max-width: 1024px) {
  :root { --photo-overlap: 80px !important; }
  .photo-wrap { height: 380px !important; }
  .ph-1 { left: -120px !important; width: 260px !important; height: 210px !important; }
  .ph-2 { right: -120px !important; width: 370px !important; height: 225px !important; }
  .ph-3 { right: 90px !important; top: 155px !important; width: 310px !important; height: 200px !important; }
  .photo-panel > .photo-slogan { margin-left: calc((100% - min(1100px, 92%)) / 2 - 120px) !important; }
}
@media (max-width: 768px) {
  :root { --photo-overlap: 30px !important; }
  .photo-wrap { display: flex !important; flex-direction: column !important; height: auto !important; gap: 14px !important; width: min(600px, 92%) !important; overflow: hidden !important; }
  .ph { position: static !important; width: 100% !important; height: 220px !important; transform: none !important; left: auto !important; right: auto !important; }
  .photo-panel > .photo-slogan { margin: 14px auto 0 !important; text-align: center !important; width: min(600px, 92%) !important; }
}