/* ═══════════════════════════════════════════════════════════
   はつ旅 デザイン刷新レイヤー ── editorial.css
   site.css / 各ページのCSSの後に読み込む。既存クラス名に上書きする。

   方針（庄原DMOの品位に学ぶ）：
     ・影（box-shadow）を全廃する。奥行きは罫線と余白で出す。
     ・角丸を捨てる。エッジは直角。
     ・セクションに番号を振り、欧文ラベルを罫線とセットで置く。
     ・見出しの階調を大きくとる（本文14px ↔ 見出し60px）。
     ・画像は角丸なし・大きく・彩度をわずかに落として上品に。
     ・カードは「浮く箱」ではなく「罫線で仕切られた面」にする。
   ═══════════════════════════════════════════════════════════ */

/* ── 0. 影と角丸の全廃 ────────────────────────────────── */
.cn, .tri, .field, .stay img, .avail .board, .mosaic figure,
.gallery img, .alt img.ph, .stay .direct{
  box-shadow: none !important;
  border-radius: 0 !important;
}
.btn, .btn.ghost, .btn.dark, .cta-sm{ border-radius: 0 !important; }
img.ph, .gallery img, .cn img, .tri img, .field img, .mosaic img{ border-radius: 0 !important; }

/* ── 1. セクション番号と欧文ラベル ────────────────────── */
body{ counter-reset: sec; }
section{ position: relative; }

.eyebrow{
  display: block;
  font-family: "Inter", "Zen Kaku Gothic New", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .34em !important;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid currentColor;
  margin-bottom: 26px;
  width: fit-content;
  max-width: 100%;
  opacity: .9;
}
.eyebrow .jp{
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: .2em !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-top: 9px !important;
  text-transform: none;
  opacity: .75;
}

/* 大見出し：階調を拡大し、字間を締める */
.section-head h2{
  font-size: clamp(30px, 4.9vw, 58px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em !important;
  font-weight: 600 !important;
}
.section-head{ max-width: 920px !important; }
.section-head h2{ max-width: 15em; }

/* ── 2. HERO：もっと大きく、もっと静かに ─────────────── */
.hero .eyebrow{ margin-bottom: 30px !important; opacity: 1 !important; }
.hero h1{
  margin-top: 0 !important;
  font-size: clamp(38px, 6.6vw, 84px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.022em !important;
  text-shadow: none !important;
}
.hero p.lead{
  font-size: 15.5px !important;
  line-height: 2.0 !important;
  letter-spacing: .01em;
  max-width: 34em !important;
  text-shadow: none !important;
}
.hero .bg::after{
  background: linear-gradient(180deg, rgba(24,19,13,.60) 0%, rgba(24,19,13,.28) 34%, rgba(24,19,13,.72) 62%, rgba(24,19,13,.93) 100%) !important;
}
.hero .wrap{ padding-bottom: 110px !important; }
.scroll-cue{
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: .26em !important; text-transform: uppercase;
}

/* ── 3. カード → 罫線で仕切られた面 ───────────────────── */
.cn, .tri, .field{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(42,33,24,.16) !important;
  padding-top: 0 !important;
  overflow: visible !important;
}
.cn img, .tri img, .field img{
  height: 260px !important;
  filter: saturate(.92) contrast(1.02);
  transition: filter .6s ease;
}
.cn:hover img, .tri:hover img, .field:hover img{ filter: saturate(1) contrast(1); }
.cn .body, .tri .body, .field .body{ padding: 26px 0 0 !important; }

.tri .en, .field .season, .cn .tag{
  font-family: "Inter", sans-serif !important;
  font-size: 9.5px !important; font-weight: 600 !important;
  letter-spacing: .3em !important; text-transform: uppercase;
}
.tri h3, .field h3, .cn h3{
  font-size: clamp(21px, 2.5vw, 28px) !important;
  line-height: 1.28 !important; letter-spacing: -.01em !important;
  margin: 12px 0 14px !important;
}
.tri p, .field p, .cn p{ font-size: 14.5px !important; line-height: 1.95 !important; }

/* 三分割：余白を広げる */
.triad{ gap: 44px !important; }
.contrast-grid{ gap: 48px !important; }
.field-grid{ gap: 48px !important; }

/* 暗背景側 */
.state{
  background: transparent !important;
  border: 0 !important; border-top: 1px solid rgba(217,178,90,.28) !important;
  padding: 26px 0 0 !important;
}
.state h3{ font-size: clamp(22px,2.6vw,30px) !important; line-height:1.26 !important; margin:12px 0 14px !important; }
.state .tag{ font-size:9.5px !important; letter-spacing:.3em !important; font-weight:600 !important; }

/* ── 4. 標高の旅 / タイムライン ───────────────────────── */
.climb::before, .timeline::before{ display: none !important; }
.climb, .timeline{ margin-top: 0 !important; }
.alt, .hour{ padding-left: 0 !important; }
.alt .dot, .hour .dot{ display: none !important; }
.alt .elev, .hour .time{
  display: flex; align-items: center; gap: 16px;
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic; font-size: 20px !important; letter-spacing: .02em !important;
  padding-left: 0 !important;
}
.alt .elev::before, .hour .time::before{
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex-shrink: 0;
}
.alt h3, .hour h3{
  font-size: clamp(24px, 3.4vw, 38px) !important;
  line-height: 1.2 !important; letter-spacing: -.015em !important; margin: 12px 0 16px !important;
}
.alt p, .hour p{ font-size: 15px !important; line-height: 2.0 !important; max-width: 34em !important; }
.alt img.ph{
  margin-top: 30px !important; max-height: 520px !important;
  filter: saturate(.94); width: 100% !important;
}

/* ── 5. モザイク：隙間を締め、キャプションを小さく ────── */
.mosaic{ gap: 3px !important; grid-template-rows: 260px 260px !important; }
.mosaic figcaption{
  font-family: "Inter", sans-serif; font-size: 10.5px !important;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 30px 18px 14px !important;
}
.mosaic img{ filter: saturate(.93); }
.mosaic figure:hover img{ filter: saturate(1); transform: scale(1.03) !important; }

/* ── 6. ギャラリー帯 ──────────────────────────────────── */
.gallery .strip{ gap: 3px !important; }
.gallery img{ height: 340px !important; filter: saturate(.93); }
.gallery .cap{
  font-family: "Inter", "Zen Kaku Gothic New", sans-serif;
  font-size: 11.5px !important; letter-spacing: .04em; font-style: normal !important;
  padding-top: 18px; border-top: 1px solid rgba(217,178,90,.2); margin-top: 20px !important;
}

/* ── 7. 泊まる：非対称に ─────────────────────────────── */
.stay-grid{ gap: 72px !important; align-items: start !important; }
.stay img{ filter: saturate(.94); }
.stay h2{ font-size: clamp(28px,4.2vw,46px) !important; line-height:1.18 !important; letter-spacing:-.015em !important; }
.stay p{ font-size:15px !important; line-height:2.0 !important; }
.stay .direct{
  border-left: 0 !important; border-top: 1px solid rgba(196,99,43,.4) !important;
  background: transparent !important; padding: 18px 0 0 !important; margin-top: 28px !important;
  font-size: 13px !important;
}

/* ── 8. Pitch / CTA ──────────────────────────────────── */
.pitch h2{
  font-size: clamp(30px, 5.4vw, 62px) !important;
  line-height: 1.16 !important; letter-spacing: -.02em !important;
}
.pitch p.body{ font-size:15.5px !important; line-height:2.0 !important; }
.pitch .bg img{ filter: saturate(.55) contrast(1.05); }

.cta h2{
  font-size: clamp(32px, 5.4vw, 64px) !important;
  line-height: 1.14 !important; letter-spacing: -.02em !important;
}
.cta p{ font-size:15px !important; line-height:1.95 !important; }
.btn{
  padding: 20px 54px !important;
  font-family: "Inter", "Zen Kaku Gothic New", sans-serif !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .2em !important; text-transform: uppercase;
  transition: background .28s ease, color .28s ease !important;
}
.btn:hover{ transform: none !important; }

/* ── 9. Trade / To-other ─────────────────────────────── */
.trade{ border-top: 1px solid rgba(42,33,24,.14); }
.trade h3{ font-size: clamp(24px,3.2vw,34px) !important; line-height:1.24 !important; letter-spacing:-.012em !important; }
.trade p{ font-size:14.5px !important; line-height:1.9 !important; }
.to-deep h2, .to-wild h2{
  font-size: clamp(26px,4vw,42px) !important; line-height:1.18 !important; letter-spacing:-.015em !important;
}
.to-deep p, .to-wild p{ font-size:14.5px !important; line-height:1.9 !important; }

/* ── 10. Footer ──────────────────────────────────────── */
footer{ padding: 64px 0 76px !important; }
footer .org{ font-size: 20px !important; letter-spacing: .01em; }
footer .note{ font-size: 11px !important; letter-spacing: .08em !important; }

/* ── 11. 全体の呼吸 ──────────────────────────────────── */
section{ padding: clamp(88px, 12vw, 156px) 0 !important; }
.wrap{ max-width: 1240px !important; padding: 0 32px !important; }
.gallery{ padding-top: 0 !important; }
.hero .wrap{ padding-top: 130px !important; }

/* 旧・ページ内空き状況セクションは廃止（左ドックへ移設） */
.avail{ display: none !important; }

@media (max-width: 900px){
  .cn img, .tri img, .field img{ height: 220px !important; }
  .gallery img{ height: 240px !important; }
  .stay-grid{ gap: 40px !important; }
  .mosaic{ grid-template-rows: 200px 200px 200px !important; }
}

/* ═══════════════════════════════════════════════════════════
   Deep Miyajima 夜間演出 ── 暗い写真を徐々に浮かび上がらせる
   スクロールで暗→本来の明るさへ。高級感のあるフェード。
   ═══════════════════════════════════════════════════════════ */

/* 夜の写真：初期は暗く沈め、ビューイン時に本来の輝きへ */
.night-img{position:relative;overflow:hidden;}
.night-img img{
  filter:brightness(.35) saturate(.75) contrast(1.05);
  transform:scale(1.06);
  transition:filter 2.4s cubic-bezier(.22,.61,.36,1),
             transform 3.2s cubic-bezier(.22,.61,.36,1),
             opacity 1.8s ease;
  opacity:.6;
  will-change:filter,transform,opacity;
}
.night-img.lit img{
  filter:brightness(1) saturate(1) contrast(1);
  transform:scale(1);
  opacity:1;
}
/* 灯りが「点る」ような微光 */
.night-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 62%, rgba(196,99,43,.14) 0%, rgba(196,99,43,0) 60%);
  opacity:0;transition:opacity 2.6s ease;
}
.night-img.lit::after{opacity:1;}

/* タイムライン内の夜写真の枠 */
.hour .night-img{margin-top:24px;border-radius:0;}
.hour .night-img img{width:100%;height:auto;max-height:540px;object-fit:cover;display:block;}
.hour .cap{margin-top:12px;font-size:12px;color:#8A8478;letter-spacing:.04em;font-style:italic;}

/* 夜の対比セクション（島は独りになる）に実写 */
.state.night.has-img{padding:0;border-top:0;overflow:hidden;}
.state.night.has-img .night-img img{width:100%;height:230px;object-fit:cover;display:block;}
.state.night.has-img .body{padding:26px 0 0;}

/* 万灯堂：全幅の圧巻カット */
.mando{position:relative;overflow:hidden;background:#0A1024;}
.mando .night-img img{width:100%;height:auto;max-height:78vh;object-fit:cover;display:block;}
.mando .cap-over{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:80px 32px 40px;
  background:linear-gradient(180deg, rgba(10,16,36,0), rgba(10,16,36,.82));
}
.mando .cap-over .inner{max-width:1240px;margin:0 auto;}
.mando .cap-over .eyebrow{color:var(--gold-soft);border-color:rgba(217,178,90,.4);}
.mando .cap-over h3{
  font-family:"Cormorant Garamond","Shippori Mincho B1",serif;font-weight:600;
  font-size:clamp(24px,3.4vw,40px);line-height:1.3;color:#FFF;margin:16px 0 0;letter-spacing:-.01em;
}

/* 空撮パノラマ：セクション区切りの帯 */
.aerial{position:relative;overflow:hidden;background:#0A1024;line-height:0;}
.aerial .night-img img{width:100%;height:auto;max-height:60vh;object-fit:cover;display:block;}

@media (prefers-reduced-motion:reduce){
  .night-img img{filter:none;transform:none;opacity:1;transition:none;}
  .night-img::after{opacity:1;}
}

/* ═══════════════════════════════════════════════════════════
   ヒーロー刷新 ── 3パターン（data-hero属性で切替）
   A: cinematic … 暗黒→写真ロードイン→文字が後から重なる
   B: kenburns  … 全画面写真をゆっくり拡大（スローズーム）
   C: slideshow … 昼→夕→夜の緩やかな時間経過
   トップ写真：夜の大鳥居・水鏡
   ═══════════════════════════════════════════════════════════ */

.hero.photo{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:#080B16;
}
.hero.photo .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero.photo .hero-media img,
.hero.photo .hero-media .layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;
}
/* 上品な階調オーバーレイ */
.hero.photo .hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(8,11,22,.60) 0%, rgba(8,11,22,.12) 34%, rgba(8,11,22,.72) 74%, rgba(8,11,22,.94) 100%),
    radial-gradient(120% 90% at 50% 120%, rgba(196,99,43,.16) 0%, rgba(196,99,43,0) 55%);
}
.hero.photo .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(64px,10vh,120px);padding-top:130px;}
.hero.photo .eyebrow{color:var(--gold-soft);border-color:rgba(217,178,90,.5);}
.hero.photo .eyebrow .jp{color:rgba(233,225,208,.8);}
.hero.photo h1{color:#FCFAF4;text-shadow:0 2px 40px rgba(0,0,0,.5);}
.hero.photo h1 .shu{color:var(--shu-soft,#D46A5C);}
.hero.photo p.lead{color:#E4DDCE;text-shadow:0 1px 20px rgba(0,0,0,.6);max-width:32em;}
.hero.photo .scroll-cue{color:var(--gold-soft);}
.hero.photo .scroll-cue .line{background:var(--gold-soft);}

/* ── A: Cinematic（暗→ロードイン→文字） ── */
.hero[data-hero="cinematic"] .hero-media img{
  opacity:0;transform:scale(1.12);filter:brightness(.4) saturate(.7);
  animation:heroCine 3.4s cubic-bezier(.2,.6,.2,1) .2s forwards;
}
@keyframes heroCine{
  0%{opacity:0;transform:scale(1.12);filter:brightness(.4) saturate(.7);}
  60%{opacity:1;}
  100%{opacity:1;transform:scale(1.04);filter:brightness(1) saturate(1);}
}
.hero[data-hero="cinematic"] .eyebrow{opacity:0;animation:heroFadeUp .9s ease 1.6s forwards;}
.hero[data-hero="cinematic"] h1{opacity:0;animation:heroFadeUp 1.1s ease 2.0s forwards;}
.hero[data-hero="cinematic"] p.lead{opacity:0;animation:heroFadeUp 1.1s ease 2.5s forwards;}
.hero[data-hero="cinematic"] .scroll-cue{opacity:0;animation:heroFadeUp 1s ease 3.0s forwards;}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* ── B: Ken Burns（スローズーム） ── */
.hero[data-hero="kenburns"] .hero-media img{
  animation:heroKen 22s ease-out infinite alternate;transform-origin:center 55%;
}
@keyframes heroKen{from{transform:scale(1.02);}to{transform:scale(1.14);}}

/* ── C: Slideshow（昼→夕→夜） ── */
.hero[data-hero="slideshow"] .hero-media .layer{opacity:0;animation:heroSlide 18s infinite;}
.hero[data-hero="slideshow"] .hero-media .layer:nth-child(1){animation-delay:0s;}
.hero[data-hero="slideshow"] .hero-media .layer:nth-child(2){animation-delay:6s;}
.hero[data-hero="slideshow"] .hero-media .layer:nth-child(3){animation-delay:12s;}
@keyframes heroSlide{
  0%{opacity:0;transform:scale(1.08);}
  8%{opacity:1;}
  30%{opacity:1;transform:scale(1.02);}
  38%{opacity:0;}
  100%{opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .hero[data-hero="cinematic"] .hero-media img,
  .hero[data-hero="cinematic"] .eyebrow,
  .hero[data-hero="cinematic"] h1,
  .hero[data-hero="cinematic"] p.lead,
  .hero[data-hero="cinematic"] .scroll-cue{animation:none;opacity:1;transform:none;filter:none;}
  .hero[data-hero="kenburns"] .hero-media img{animation:none;}
  .hero[data-hero="slideshow"] .hero-media .layer{animation:none;}
  .hero[data-hero="slideshow"] .hero-media .layer:nth-child(3){opacity:1;}
}

/* ═══════════════════════════════════════════════════════════
   写真展示の刷新 ── ギャラリーの脱・グリッド化
   ・大小非対称の「編集レイアウト」
   ・写真ごとに視差（parallax）でゆっくり動く
   ・キャプションは写真に静かに寄り添う
   ═══════════════════════════════════════════════════════════ */

/* 昼ギャラリー：3枚均等 → 主役1枚＋従2枚の非対称 */
.gallery{background:var(--indigo-2);padding:clamp(72px,10vw,120px) 0 !important;}
.gallery .strip{
  display:grid !important;
  grid-template-columns:1.7fr 1fr !important;
  grid-template-rows:auto auto;gap:14px !important;
}
.gallery .strip img:nth-child(1){grid-row:span 2;height:100% !important;min-height:520px;}
.gallery .strip img:nth-child(2),
.gallery .strip img:nth-child(3){height:253px !important;}
.gallery img{filter:saturate(.94) brightness(.97);transition:filter 1.2s ease,transform 1.4s ease;}
.gallery img:hover{filter:saturate(1) brightness(1);}
@media (max-width:720px){
  .gallery .strip{grid-template-columns:1fr !important;}
  .gallery .strip img:nth-child(1){grid-row:auto;min-height:0;height:300px !important;}
}

/* タイムライン写真：全幅に近い大判＋視差 */
.hour .night-img{
  margin-top:32px !important;margin-left:calc(-1 * clamp(0px,3vw,60px));
  margin-right:calc(-1 * clamp(0px,3vw,60px));
}
.hour .night-img img{max-height:640px !important;}

/* 視差レイヤー（JSでtranslateYをCSS変数に流す） */
.parallax{overflow:hidden;}
.parallax img{
  transform:translateY(var(--py,0));
  transition:filter 2.4s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* 万灯堂：さらに没入。天地いっぱい＋ゆっくりズーム */
.mando .night-img img{max-height:88vh !important;}
.mando.lit-zoom .night-img img{animation:mandoZoom 20s ease-out forwards;}
@keyframes mandoZoom{from{transform:scale(1.0);}to{transform:scale(1.08);}}

/* 空撮：シネマスコープ帯（超横長で映画のよう） */
.aerial .night-img img{max-height:56vh !important;}
.aerial::before,.aerial::after{
  content:"";position:absolute;left:0;right:0;height:0;z-index:2;pointer-events:none;
}

/* セクション見出しに小さな写真番号（編集的アクセント） */
.section-head .plate{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;
  color:var(--gold-soft);opacity:.85;margin-bottom:6px;letter-spacing:.04em;
}

/* cinematic/kenburns では最後の夜カット1枚のみ表示（chrono/slideshowは全layer使用） */
.hero.photo[data-hero="cinematic"] .hero-media .layer:nth-child(1),
.hero.photo[data-hero="cinematic"] .hero-media .layer:nth-child(2),
.hero.photo[data-hero="cinematic"] .hero-media .layer:nth-child(3),
.hero.photo[data-hero="kenburns"] .hero-media .layer:nth-child(1),
.hero.photo[data-hero="kenburns"] .hero-media .layer:nth-child(2),
.hero.photo[data-hero="kenburns"] .hero-media .layer:nth-child(3){display:none;}

/* ═══════════════════════════════════════════════════════════
   写真と背景の境界を溶かす ── 「置いてある」感の解消
   夜の暗い写真の縁を、周囲の闇へ自然に還元する。
   ═══════════════════════════════════════════════════════════ */

/* --- 夜写真：縁を背景へ溶かすフェザリング --- */
.night-img{
  position:relative;
  /* 写真の四辺を内側からわずかに暗く落とし、背景の闇と地続きにする */
}
.night-img::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  /* 上下を濃く、左右を淡く。周囲の紺(indigo)へ吸い込ませる */
  box-shadow:
    inset 0 60px 70px -30px rgba(14,23,48,.85),
    inset 0 -70px 80px -30px rgba(14,23,48,.9),
    inset 60px 0 70px -50px rgba(14,23,48,.5),
    inset -60px 0 70px -50px rgba(14,23,48,.5);
  transition:opacity 2.4s ease;
}
/* 点灯前は溶け込みを強め、点灯後もほんのり縁を残して馴染ませる */
.night-img::before{opacity:.9;}
.night-img.lit::before{opacity:.55;}

/* タイムライン内：はみ出す大判写真の左右端を特に馴染ませる */
.hour .night-img::before{
  box-shadow:
    inset 0 50px 60px -28px rgba(14,23,48,.7),
    inset 0 -80px 90px -30px rgba(14,23,48,.92),
    inset 90px 0 90px -60px rgba(14,23,48,.75),
    inset -90px 0 90px -60px rgba(14,23,48,.75);
}

/* --- 昼ギャラリー：indigo-2 背景へ溶かす（暗すぎないよう控えめ） --- */
.gallery{position:relative;}
.gallery .strip img{position:relative;}
.gallery .strip{position:relative;}
.gallery .strip::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:
    inset 0 40px 50px -34px rgba(24,38,69,.6),
    inset 0 -50px 60px -34px rgba(24,38,69,.7);
}

/* --- 対比セクションの夜写真（島では独りになる） --- */
.state.night.has-img .night-img::before{
  box-shadow:
    inset 0 40px 50px -28px rgba(14,23,48,.7),
    inset 0 -50px 60px -28px rgba(14,23,48,.85),
    inset 50px 0 60px -46px rgba(14,23,48,.55),
    inset -50px 0 60px -46px rgba(14,23,48,.55);
}

/* --- 万灯堂：全幅の没入カット。上端を闇へ、下端はキャプション帯へ橋渡し --- */
.mando{position:relative;}
.mando .night-img::before{
  box-shadow:
    inset 0 90px 120px -50px rgba(10,16,36,.85),
    inset 0 -40px 60px -30px rgba(10,16,36,.5);
}
/* 万灯堂の上に、前セクションの紺から続く帯を重ねて継ぎ目を消す */
.mando::before{
  content:"";position:absolute;top:0;left:0;right:0;height:22%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, #0A1024 0%, rgba(10,16,36,.5) 45%, rgba(10,16,36,0) 100%);
}

/* --- 空撮パノラマ：上下を闇へ溶かし、宙に浮くシネマ帯に --- */
.aerial{position:relative;}
.aerial .night-img::before{
  box-shadow:
    inset 0 80px 90px -40px rgba(10,16,36,.9),
    inset 0 -80px 90px -40px rgba(10,16,36,.9);
}
.aerial::before{
  content:"";position:absolute;top:0;left:0;right:0;height:30%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, var(--sumi,#171512) 0%, rgba(23,21,18,0) 100%);
}
.aerial::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:30%;z-index:2;pointer-events:none;
  background:linear-gradient(0deg, var(--sumi,#171512) 0%, rgba(23,21,18,0) 100%);
}

/* --- ヒーロー：写真下端を次セクションの紺へ完全に continuity --- */
.hero.photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:16%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(14,23,48,0) 0%, var(--indigo,#0E1730) 100%);
}

@media (prefers-reduced-motion:reduce){
  .night-img::before{transition:none;}
}

/* ═══════════════════════════════════════════════════════════
   ヒーロー最終版 ── シネマ質感 × 時間経過
   暗転からロードインで始まり(シネマ)、朝→昼→夕→夜と流れる。
   各カットはゆっくりズーム(ケンバーン)しながらクロスフェード。
   data-hero="chrono" で発動。
   ═══════════════════════════════════════════════════════════ */

.hero[data-hero="chrono"] .hero-media{background:#05070E;}
.hero[data-hero="chrono"] .hero-media .layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;
  opacity:0;
  will-change:opacity,transform;
}

/* 4カット×各11秒 = 44秒で一巡。3秒のクロスフェード。 */
.hero[data-hero="chrono"] .hero-media .layer:nth-child(1){animation:chrono 44s infinite;animation-delay:0s;}
.hero[data-hero="chrono"] .hero-media .layer:nth-child(2){animation:chrono 44s infinite;animation-delay:11s;}
.hero[data-hero="chrono"] .hero-media .layer:nth-child(3){animation:chrono 44s infinite;animation-delay:22s;}
.hero[data-hero="chrono"] .hero-media .layer:nth-child(4){animation:chrono 44s infinite;animation-delay:33s;}

@keyframes chrono{
  0%   {opacity:0;transform:scale(1.11);}
  3%   {opacity:1;}                         /* フェードイン(約1.3s) */
  22%  {opacity:1;transform:scale(1.03);}   /* 表示中ゆっくりズーム */
  25%  {opacity:0;transform:scale(1.0);}    /* フェードアウト */
  100% {opacity:0;}                          /* 次の3カット分は待機 */
}

/* 初回だけシネマの暗転ロードイン：メディア全体を暗→明に一度だけ */
.hero[data-hero="chrono"] .hero-media{
  animation:chronoBoot 2.6s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes chronoBoot{
  0%{filter:brightness(.25) saturate(.6);}
  100%{filter:brightness(1) saturate(1);}
}

/* テキストはシネマ同様、後から降りてくる（質感の統一） */
.hero[data-hero="chrono"] .eyebrow{opacity:0;animation:heroFadeUp .9s ease 1.2s forwards;}
.hero[data-hero="chrono"] h1{opacity:0;animation:heroFadeUp 1.1s ease 1.6s forwards;}
.hero[data-hero="chrono"] p.lead{opacity:0;animation:heroFadeUp 1.1s ease 2.1s forwards;}
.hero[data-hero="chrono"] .scroll-cue{opacity:0;animation:heroFadeUp 1s ease 2.6s forwards;}

/* 時間帯を示す小さなインジケーター（右下・上品に） */
.hero-chrono-label{
  position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(64px,10vh,120px);z-index:3;
  display:flex;align-items:center;gap:14px;
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:rgba(244,240,231,.7);font-size:15px;letter-spacing:.08em;
}
.hero-chrono-label .dots{display:flex;gap:7px;}
.hero-chrono-label .dots i{
  width:6px;height:6px;border-radius:50%;background:rgba(217,178,90,.35);
  transition:background .6s ease,transform .6s ease;font-style:normal;
}
.hero-chrono-label .dots i.on{background:var(--gold-soft);transform:scale(1.35);}
@media (max-width:640px){.hero-chrono-label{display:none;}}

@media (prefers-reduced-motion:reduce){
  .hero[data-hero="chrono"] .hero-media,
  .hero[data-hero="chrono"] .hero-media .layer,
  .hero[data-hero="chrono"] .eyebrow,
  .hero[data-hero="chrono"] h1,
  .hero[data-hero="chrono"] p.lead,
  .hero[data-hero="chrono"] .scroll-cue{animation:none;}
  .hero[data-hero="chrono"] .hero-media .layer:nth-child(4){opacity:1;}
}

/* ═══════════════════════════════════════════════════════════
   守り人（keeper）── ストーリーの後、千年が維持された理由
   廿日市市 観光マナー啓発「神をいつきまつる島 宮島へようこそ」と接続
   ═══════════════════════════════════════════════════════════ */
.keeper{background:var(--washi,#F4EFE4);color:var(--sumi,#171512);position:relative;}
.keeper .lead-row{max-width:44em;margin:0 auto;text-align:center;}
.keeper .eyebrow{justify-content:center;margin-left:auto;margin-right:auto;color:var(--shu,#C0392B);border-color:rgba(192,57,43,.4);}
.keeper h2{
  font-family:"Cormorant Garamond","Shippori Mincho B1",serif;font-weight:600;
  font-size:clamp(26px,4vw,44px);line-height:1.5;letter-spacing:-.01em;
  color:var(--sumi,#171512);margin:18px 0 26px;
}
.keeper h2 .shu{color:var(--shu,#C0392B);}
.keeper .say{
  font-family:"Shippori Mincho B1",serif;font-size:clamp(16px,2vw,20px);line-height:2.0;
  color:#3B372F;max-width:38em;margin:0 auto 14px;
}
.keeper .attrib{font-size:12.5px;color:var(--muted-on-light,#6B6558);letter-spacing:.06em;margin-bottom:44px;}
.keeper .attrib .mincho{font-family:"Shippori Mincho B1",serif;color:#3B372F;}

/* 3つの心得 */
.keeper .creed{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(32,25,15,.14);border:1px solid rgba(32,25,15,.14);
  max-width:1000px;margin:0 auto;
}
.keeper .creed .c{background:var(--washi,#F4EFE4);padding:34px 30px;}
.keeper .creed .n{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;
  color:var(--gold,#B8912E);margin-bottom:14px;
}
.keeper .creed h3{
  font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:18px;
  color:var(--sumi,#171512);margin:0 0 10px;line-height:1.5;
}
.keeper .creed p{font-size:13px;color:#5A554A;line-height:1.9;margin:0;}
.keeper .bridge{
  max-width:40em;margin:46px auto 0;text-align:center;
  font-size:14.5px;line-height:2.05;color:#3B372F;
}
.keeper .bridge strong{color:var(--shu,#C0392B);font-weight:600;}
.keeper .more{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-family:"Inter","Zen Kaku Gothic New",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--shu,#C0392B);text-decoration:none;
  border-bottom:1px solid rgba(192,57,43,.4);padding-bottom:4px;transition:border-color .2s ease;
}
.keeper .more:hover{border-bottom-color:var(--shu,#C0392B);}
@media (max-width:820px){
  .keeper .creed{grid-template-columns:1fr;}
}

/* 英語版：明朝→セリフに寄せる */
html[lang="en"] .keeper .say,
html[lang="en"] .keeper h2{font-family:"Cormorant Garamond",serif;}