/**
Hi-Tata Wedding Style Sheet
**/

/* Define variables in root */
:root {
    --main-color: #1e2273;
    --main-hover-color: #1e2273ad;
    --primary-bright-color: #ffffff;
    --primary-dark-color: #000000;
    --transparent-color: #00000000;
    --menu-icon-color: var(--main-color);
    --primary-font-family: "Times New Roman", "Times", serif;
    --primary-font-size: clamp(1.5rem, 4vw, 3rem);
    --title-font-size: clamp(1.5rem, 4vw, 3rem);
    --subject-font-size: clamp(1.5rem, 4vw, 3rem);
    --text-font-size: clamp(1.5rem, 4vw, 3rem);
    --useful-padding: 1rem;
    --useful-margin: 1rem;
}
/* 追記：hero上だけ白に */
body.on-hero{
  --menu-icon-color: var(--primary-bright-color);
}
/* 追加：メニュー開いている間は常にメイン色に戻す（順序は↑の直後に置く） */
.sidemenu__sub.active{
  --menu-icon-color: var(--main-color);
}

/* Common */
html, body {
    height: 100%; 
    margin: 0;
}
a {
    color: var(--main-color); 
    text-decoration: none;
}
img {
    max-width: 100%; 
    display: block;
}
h1, h2, h3 {
    font-family: var(--primary-font-family); 
    letter-spacing: .03em;
}
h2 {
    font-size: clamp(24px, 2.2vw + 16px, 40px); 
    margin: .2em 0 .5em;
}
h3 {
    font-size: clamp(18px, 1.2vw + 14px, 28px); 
    margin: .2em 0 .4em;
}
.inner {
    width: min(1080px,92vw); 
    margin-inline: auto;
}
.btn {
    display: inline-flex; 
    align-items: center; 
    gap: .6rem; 
    padding: .9rem 1.2rem; 
    border-radius: 999px; 
    border: 1px solid var(--line); 
    background: linear-gradient(180deg,#fff,#f5f7ff); 
    box-shadow: 0 8px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6); 
    color: #1f2142; 
    font-weight: 600;
}
.thin {
    font-weight: 300;
}
.card {
    background: var(--card); 
    border: 1px solid var(--line); 
    border-radius: var(--radius); 
    box-shadow: 0 8px 40px rgba(18,18,18,.06); 
    overflow: hidden;
}

/* Splash */
#splash { 
    position: fixed; 
    inset: 0; 
    z-index: 9999; 
    display: grid; 
    place-items: center; 
    background: var(--primary-bright-color); 
    transition: opacity .8s ease .1s, visibility 0s linear .95s; 
}
#splash .wrap{ text-align:center; padding:24px }
#splash .logo{ width:min(62vw, 520px); filter: drop-shadow(0 14px 32px rgba(0,0,0,.15)); animation: swell 1400ms cubic-bezier(.2,.8,.2,1) both; }
#splash .date{ margin-top:14px; font-family:"Playfair Display","Noto Serif JP",serif; letter-spacing:.3em; color:#13204b; opacity:.85; }
#splash .skip{ position:fixed; right:16px; bottom:16px; z-index:10000; cursor:pointer; padding:.45rem .8rem; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; color:#13204b; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.08); }
@keyframes swell{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}
body.ready #splash{ opacity:0; visibility:hidden }
@media (prefers-reduced-motion: reduce){ #splash .logo{ animation:none } }

/* Sections */
section{
    min-height: 100svh; 
    display: grid; 
    place-items: center; 
    position: relative; 
    padding: 28px 0; 
}


/* header */
.site-header {
    z-index: 100;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--transparent-color);
}
.site-header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--useful-padding);
    padding-bottom: var(--useful-padding);
}
.site-header__start {
    display: flex;
    align-items: center;
  
    > * + * {
      margin-right: 1rem;
    }
  }
.sidemenu {
    position: fixed;
    top: 0;
    right: 0;
    width: 20vw;
    height: 100vh;
    z-index: 10010;
    visibility: visible;
    opacity: 0;
    transform: translateX(85%);
    background-color: var(--transparent-color);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
@media screen and (max-aspect-ratio: 1/1) {
    .sidemenu {
    width: 100%;
    height: 100vh;
    }
}
.sidemenu.active {
    visibility: visible;
    opacity: 1;
    background-color: var(--transparent-color);
    transform: translateX(0);
}
.sidemenu__inner {
    display: grid;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: var(--primary-bright-color);
    padding-top: 10vh;
    padding-bottom: 10vh;
    font-family: var(--primary-font-family);
}
.nav__item {
    border-bottom: 1px solid var(--primary-bright-color);
}
.nav__item a{
    display: block;
    color: var(--main-color);
    text-decoration-line: none;
}
.sidemenu__inner dl{
    clear: both;
    font-size: 1.6rem;
    padding-top: 4vh;
    padding-bottom: 4vh;
}
.sidemenu__inner dl:hover {
    color: var(--main-hover-color);
}
.sidemenu__sub {
    z-index: 11000;
    position: fixed;
    top: 0;
    right: 0;
}
#menu_icon {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    background-color: var(--transparent-color);
    transition: background-color 0.3s ease;
}
#menu_icon::before {
    position: absolute;
    top: 30%;
    right: 25%;
    display: block;
    content: "";
    width: 50%;
    height: 2px;
    background: var(--menu-icon-color);
    transform: rotate(0deg);
    transition: transform 0.3s ease, top 0.1s ease;
}
#menu_icon::after {
    position: absolute;
    bottom: 30%;
    right: 25%;
    display: block;
    content: "";
    width: 50%;
    height: 2px;
    background: var(--menu-icon-color);
    transform: rotate(0deg);
    transition: transform 0.3s ease, bottom 0.1s ease;
}
#menu_icon span {
    position: absolute;
    top: calc(50% - 1px);
    right: 25%;
    display: block;
    overflow: hidden;
    width: 50%;
    height: 2px;
    color: var(--menu-icon-color);
    opacity: 1;
    background-color: var(--menu-icon-color);
    transition: opacity 0.1s ease;
}
#menu_icon:hover {
    z-index: 110;
    background-color: var(--transparent-color);
}
.sidemenu__sub.active #menu_icon::before {
    background: var(--menu-icon-color);
}
.sidemenu__sub.active #menu_icon::after {
    background: var(--menu-icon-color);
}
.sidemenu__sub.active #menu_icon span {
    color: var(--menu-icon-color);
    background-color: var(--menu-icon-color);
}


/* footer */
.footer a {
    color: var(--main-color);
    text-decoration: none;
    font-size: 1rem;
    font-family: var(--primary-font-family);
}
.footer a:hover {
    color: var(--main-hover-color);
}
.footer hr {
    height: 1px;
    border: 0;
    border-top: 1px solid var(--main-color);
}
.footer {
    z-index: 100;
    padding: 2rem;
    font-family: var(--primary-font-family);
    color: var(--main-color);
    background: var(--primary-bright-color);
}
.footer__grid {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px;
    margin-bottom: 2.5rem;
    background: var(--primary-bright-color);
}
.footer__left {
    display: flex;
    justify-content: center;
    background:var(--primary-bright-color);
    grid-area: 'b';
}
.footer__left img {
    object-fit: cover;
    width: 26vh;
}
.footer__logo {
    display: flex;
    justify-content: center;
    background:var(--primary-bright-color);
    grid-area: 'a';
}
.footer__logo img {
    object-fit: cover;
    width: 16vh;
}
.footer__right {
    display: flex;
    justify-content: center;
    background:var(--primary-bright-color);
    grid-area: 'c';
}
.footer__right img {
    object-fit: cover;
    width: 26vh;
}
@media screen and (max-aspect-ratio: 1/1) {
    .footer__left img,
    .footer__right img {
      object-fit: cover;
      width: 26vw;
    }
    .footer__logo img {
      object-fit: cover;
      width: 16vw;
    }
}
.copyright {
    text-align: left;
    font-size: 0.8rem;
    font-family: var(--primary-font-family);
}


/* cookie */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-bright-color);
    color: var(--main-color);
    padding: 20px;
    z-index: 10000;
    display: none;
    font-size: 14px;
}
.cookie-banner-inner {
    flex: 1 1 60%;
    font-size: 14px;
    line-height: 1.6;
} 
.cookie-banner-inner a {
    color: var(--main-hover-color);
    text-decoration: underline;
}
.cookie-buttons {
    flex: 1 1 35%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}
.cookie-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    color: var(--primary-bright-color);
    background-color: var(--main-color);
}
.cookie-settings {
    background-color: var(--main-color);
    border: 1px solid #000;
    color: var(--primary-bright-color);
}
.cookie-accept {
    background-color: var(--main-color);
    color: var(--primary-bright-color);
}
.cookie-modal {
    display: none !important;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    z-index: 10001;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cookie-modal.show {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}
.cookie-modal-content {
    background: var(--primary-bright-color);
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 90%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    font-size: 15px;
    color: var(--main-color);
}
.cookie-modal-content h3 {
    margin-top: 0;
}
.modal-buttons {
    margin-top: 15px;
    text-align: right;
}
.modal-buttons button {
    background-color: var(--main-color);
    color: var(--primary-bright-color);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}


/* home */
/* 既存: 位置づけ */
#home .Top_main_area {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

/* ===== 0. SPLASH ===== */
#splash{
    position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:#fff;
    transition:opacity .8s ease .1s, visibility 0s linear .95s;
}
#splash .wrap{ text-align:center; padding:24px }
#splash .logo{
    width:min(62vw, 520px);
    filter: drop-shadow(0 14px 32px rgba(0,0,0,.15));
    animation: swell 1400ms cubic-bezier(.2,.8,.2,1) both;
}
#splash .date{
    margin-top:14px; font-family:"Playfair Display","Noto Serif JP",serif;
    letter-spacing:.3em; color:#13204b; opacity:.85;
}
#splash .skip{
    position:fixed; right:16px; bottom:16px; z-index:10000; cursor:pointer;
    padding:.45rem .8rem; border-radius:999px; border:1px solid rgba(0,0,0,.08);
    background:#fff; color:#13204b; font-weight:600;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}
@keyframes swell{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}
body.ready #splash{ opacity:0; visibility:hidden }
@media (prefers-reduced-motion: reduce){ #splash .logo{ animation:none } }



#home .Top_main_area > [class^="Top_main_container"]{
  width: 100%;
  display: grid;
  place-items: center;
  height: 100vh;        /* 互換 */
  height: 100dvh;       /* 動的VP（最新） */
  min-height: 100svh;   /* スマホのアドレスバー対策 */
  overflow: hidden;     /* ←コレが重要：はみ出しをカット */
  background: var(--primary-bright-color, #0000);
}



/* ===== 1. HERO ===== */
#hero { 
    padding: 0; 
    background: var(--primary-bright-color); 
    color: var(--primary-bright-color);
}
#hero .hero-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;         /* 横にはみ出してもスクロールが出ないように */
}
/* ヒーロー画像：重ねて表示＆スムーズ化 */
.hero-slider {
  position: absolute;     /* 画面いっぱいに広げるため親の .hero-wrap に密着 */
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;       /* はみ出す分は隠す（cover挙動） */
  margin: 0;
}
.hero-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 縦横比固定で画面を覆う */
  object-position: center;
  opacity: 0;
  will-change: transform, opacity;
}

/* アニメ：ゆっくりズーム→キープ→ふわっと消える */
@keyframes zoomFade {
  0%   { opacity: 0; transform: scale(1); }
  10%  { opacity: 1; transform: scale(1.01); }
  85%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* “active” になった画像だけ 1 枚ずつ再生 */
.hero-slider img.active{
  animation: zoomFade 6000ms ease-in-out forwards;
  z-index: 2;
}


/* Top_design.png を前面＆中央に */
#hero .Top_main_logo{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  pointer-events: none;
}
#hero .Top_design-img{
  max-height: 100vh;
  max-width: 100vw;
  width: auto;
  height: auto;
  display: block;
}



/* 2枚のフレーム画像を前景に固定。クリックは貫通させる */
.fg-split{
  position: fixed;
  inset: 0;
  z-index: 9990;              /* splash(9999)より下、UIより上にしたければ数値調整 */
  pointer-events: none;
  opacity: 0;                 /* HEROでは非表示。#greeting以降で表示 */
  transition: opacity .35s ease;

  /* 画像サイズの“基準高さ”を1か所で調整できるように変数化 */
  --frameH: clamp(260px, 46vmin, 820px);

  /* 背景を2レイヤで描画：左上／右下。高さ基準で等比拡大縮小（幅はauto） */
  background:
    url("../image/Message_frame_1920x1080_Left.png")  left  top    / auto var(--frameH) no-repeat,
    url("../image/Message_frame_1920x1080_Right.png") right bottom / auto var(--frameH) no-repeat;
}

/* #greeting 以降でON（既存の切替ロジックを流用） */
body.frame-on .fg-split{ opacity: 1; }

/* さらに縦長デバイスでの微調整（任意） */
@media (max-aspect-ratio: 3/4){
  .fg-split{ --frameH: clamp(220px, 48vmin, 700px); }
}
@media (min-aspect-ratio: 16/9){
  .fg-split{ --frameH: clamp(220px, 38vmin, 700px); }
}
@media (min-width: 1200px) and (min-aspect-ratio: 4/3){
  .fg-split{ --frameH: clamp(260px, 48vmin, 860px); }
}


/* Greeting を全画面で中央表示するレイアウト */
#greeting { padding: 0; } /* セクションの上下28pxパディングを無しにして“きっちり100svh”に */

#greeting .card{
  background: transparent;
  border: none;
  box-shadow: none;      /* 画像だけを見せたいのでカード装飾を外す（必要なら残してOK） */
}

/* 中央寄せの器。高さ＝ビューポート高、横はサイトの既定幅以内 */
.greeting-img-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100svh;              /* ←ここが“縦ピッタリ100%” */
  width: min(1080px, 92vw);    /* 既存のレイアウト幅に合わせて安全に収める */
  margin: 0 auto;
  overflow: hidden;            /* 念のためはみ出し防止 */
}

/* 画像は比率を保ったまま、基本は“高さ基準”でフィット */
.greeting-img{
  height: 100%;        /* ←縦を基準にフィット */
  width: auto;         /* 比率維持 */
  max-width: 100%;     /* 横に狭い端末では幅優先で縮む（比率維持） */
  object-fit: contain; /* 念のため（<img>でもOK） */
  display: block;
}


/* ===== Profiles ===== */
#profiles{
  --bg-ratio: 1080 / 1920; /* Profiles_bg.png の縦横比（横/縦）。違う場合ここだけ直す */
  padding: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;     /* 背景舞台を常に画面中央へ */
  overflow-x: hidden;      /* 念のため横スクロール抑止 */
}
/* 背景の“舞台”。比率固定でサイズを切り替え */
#profiles .profiles-stage{
  position: relative;
  aspect-ratio: var(--bg-ratio);
  width: min(100vw, calc(100vh  * (var(--bg-ratio))));
  width: min(100vw, calc(100svh * (var(--bg-ratio))));
  width: min(100vw, calc(100dvh * (var(--bg-ratio))));
  height: auto;
  margin: 0 auto;
}
/* 背景画像そのものは擬似要素で敷く（中の絶対配置と干渉させない） */
#profiles .profiles-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/Profiles_bg_1080x1920px.png") center / 100% 100% no-repeat;
  /* 舞台と画像の比率を同じにしているので 100% 100% でジャスト合致 */
  pointer-events: none;
}
/* ===== 写真スロット（Profiles_design1.png に合わせた相対配置） ===== */
#profiles .slot{
  position: absolute;
}
/* Groom：高さ%を指定し、横幅は aspect-ratio で自動決定（常に比率固定） */
#profiles .slot.groom{
  left: 8%;
  top:  20%;
  height: 32%;        /* 背景舞台の高さに対する割合 */
  aspect-ratio: 3 / 2;   /* 画像の元比率（横/縦） */
}
/* Bride */
#profiles .slot.bride{
  right: 8%;
  bottom:  8%;
  height: 32%;
  aspect-ratio: 3 / 2;
}
/* 画像は必ず全体を使う（トリミングしない／見切れない） */
#profiles .profile-photo{
  width: 100%;
  height: 100%;
  object-fit: contain;    /* 常に100%見せる */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;        /* クリック切替のヒント */
}
/* === Profiles: クリック時の3回転アニメ === */
/* 立体感を出すための遠近 */
#profiles .profiles-stage {
  perspective: 1200px; /* 既存に無ければ有効化。既にある場合はそのままでOK */
}
/* 画像側のアニメ設定 */
#profiles .profile-photo {
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden; /* 写真なので裏面もほぼ問題なし */
  will-change: transform;
  touch-action: manipulation;
}
/* 3回転（1080deg） */
@keyframes profileSpinY {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(1080deg); } /* 360 x 3 */
}
/* クリック中に一時的に付くクラス */
#profiles .profile-photo.spin3 {
  /* 必要に応じて速度調整：--spinMs を変えればOK（JS側のDURATIONと合わせる） */
  --spinMs: 1200ms;
  animation: profileSpinY var(--spinMs) cubic-bezier(.2,.6,.2,1) 1 both;
}
/* 動きに弱い利用者配慮：アニメ無しで即切替 */
@media (prefers-reduced-motion: reduce) {
  #profiles .profile-photo.spin3 {
    animation: none;
  }
}


/* ===== Album 背景 ===== */
#album { --album-ratio: 1080 / 1920; --cover-ratio: 1080 / 1920; }
#album{
  padding: 0; min-height: 100vh; display: grid; place-items: center; overflow-x: hidden;
}
#album .album-stage{
  position: relative; 
  aspect-ratio: var(--album-ratio);
  width: min(100vw, calc(100vh  * (var(--album-ratio))));
  width: min(100vw, calc(100svh * (var(--album-ratio))));
  width: min(100vw, calc(100dvh * (var(--album-ratio))));
  height: auto;
  margin: 0 auto; 
  overflow: visible;
}
#album .album-stage::before{
  content: ""; position: absolute; inset: 0;
  background: url("../image/Album_bg_1080x1920px.png") center / 100% 100% no-repeat;
  pointer-events: none; /* 背景はクリック貫通 */
}
/* ===== 小さな表紙（背景上の相対配置） ===== */
#album .album-slot{
  position: absolute; aspect-ratio: 1414 / 2000;
  height: 38%; border: 0; padding: 0; background: none; cursor: pointer;
  z-index: 4;  /* 背景より前、拡大ビューより後ろ */
}
#album .album-slot.jp{ left: 1%; top: 25%; }
#album .album-slot.kr{ right: 1%; bottom: 5%; }

#album .album-cover{
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
#album .album-slot:hover .album-cover{
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.26);
}
/* ===== 拡大ビュー（背景に対して padding:10% で contain） ===== */
#album .book-view{
  position: absolute; inset: 10%;
  display: none; grid-template-rows: 1fr auto;
  align-items: center; justify-items: center;
  overflow: hidden; z-index: 70; /* 表紙より上 */
}
#album .album-stage.open .book-view.active{ display: grid; }
/* 本（右めくり） */
#album .book{
  position: relative; width: 100%; height: 100%;
  aspect-ratio: var(--cover-ratio);
  perspective: 2000px; transform-style: preserve-3d;
}
/* ページ（表のみ使用） */
#album .sheet{
  position: absolute; inset: 0;
  transform-origin: right center;       /* 右綴じ（右軸） */
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
#album .sheet::before{
  content: "";
  position: absolute; inset: 0;
  backface-visibility: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  background-image: var(--img);       /* 表だけ表示（裏は使わない） */
}
#album .sheet.flipped{                 /* 裏へ回った面は見せない（次のシートが見える） */
  transform: rotateY(180deg) translateX(0%);
}
#album .sheet.cover.flipped{           /* 表紙だけ少し残すなら調整可（現状維持） */
  transform: rotateY(180deg) translateX(-5%);
}
/* 黒い半透明の枠（背景より前・拡大ビューより後ろ） */
#album .album-dim{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  z-index: 60;
  pointer-events: none; /* 基本は透過。子のボタンでだけ反応させる */
}
#album .album-stage.open .album-dim{ display: block; }
/* 矢印／閉じる（album-dimの子だがクリックできるように） */
#album .album-dim .dim-arrow,
#album .album-dim .dim-close{
  pointer-events: auto;
}
#album .album-dim .dim-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: #fff;
  font-size: clamp(28px, 4vmin, 48px);
  width: min(10vw, 80px); height: min(10vw, 80px);
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  z-index: 80;
}
#album .album-dim .dim-arrow:hover{ background: rgba(255,255,255,.12); }
#album .album-dim .dim-arrow:active{ transform: translateY(-50%) scale(.96); }
#album .album-dim .dim-arrow[disabled]{ opacity:.35; pointer-events:none; }
#album .album-dim .dim-arrow.prev{ left: 0%; }
#album .album-dim .dim-arrow.next{ right: 0%; }

#album .album-dim .dim-close{
  position: absolute; top: 5%; left: 5%;
  border: 0; background: none; color: #fff;
  font-size: clamp(18px, 3.5vmin, 32px);
  width: 44px; height: 44px; display: grid; place-items: center;
  cursor: pointer; border-radius: 8px; z-index: 80;
}
#album .album-dim .dim-close:hover{ background: rgba(255,255,255,.12); }
/* 黒枠（アルバム拡大）表示中はサイドメニューを完全に無効化 */
body.album-open .sidemenu__sub,
body.album-open .sidemenu,
body.album-open #menu_icon {
  pointer-events: none !important;
}


/* ===== Ceremony / Reception 背景 ===== */
/* 画像の “横 / 縦” 比率を設定（例は 1414x2000 のとき 1414 / 2000） */
#ceremony { --ceremony-ratio: 1080 / 1920; /* ←実画像に合わせて更新 */ }
#reception{ --reception-ratio: 1080 / 1920; /* ←実画像に合わせて更新 */ }

#ceremony,
#reception{
  padding: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;   /* 舞台を常に画面中央へ */
  overflow-x: hidden;    /* 横スクロール抑止 */
}
/* Ceremony: 比率固定の“舞台” */
#ceremony .ceremony-stage{
  position: relative;
  aspect-ratio: var(--ceremony-ratio);
  /* 基本は高さ基準（= 横長画面時に縦100vhピッタリ） */
  width: min(100vw, calc(100vh  * (var(--ceremony-ratio))));
  width: min(100vw, calc(100svh * (var(--ceremony-ratio))));
  width: min(100vw, calc(100dvh * (var(--ceremony-ratio))));
  height: auto;
  margin: 0 auto;
}
/* 背景画像を舞台にぴったり敷く（舞台が画像と同比率なので 100% 100% でジャスト） */
#ceremony .ceremony-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/Ceremony_bg_1080x1920px.png") center / 100% 100% no-repeat; /* ←画像パス調整 */
  pointer-events: none;
}

/* Reception: 上と全く同じパターン */
#reception .reception-stage{
  position: relative;
  aspect-ratio: var(--reception-ratio);
  width: min(100vw, calc(100vh  * (var(--reception-ratio))));
  width: min(100vw, calc(100svh * (var(--reception-ratio))));
  width: min(100vw, calc(100dvh * (var(--reception-ratio))));
  height: auto;
  margin: 0 auto;
}
#reception .reception-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/Reception_bg_1080x1920px.png") center / 100% 100% no-repeat; /* ←画像パス調整 */
  pointer-events: none;
}
/* ===== Ceremony / Reception の“舞台”はすでに実装済みを前提 ===== */
/* 下部マップ：Profiles の photo と同じ思想（高さ% + aspect-ratio）で舞台内に収める */
#ceremony .map-slot,
#reception .map-slot{
  position: absolute;
  left: 50%;
  Top: 65%;             /* 背景の絵柄に合わせて微調整OK */
  transform: translateX(-50%);
  height: 14%;              /* 舞台の高さに対する割合（必要に応じて調整） */
  aspect-ratio: 16 / 9;     /* 長方形の比率（16:9 推奨） */
  /* もし極端な画面で横がはみ出しそうなら保険（高さ指定＋比率時は通常不要） */
  max-width: 94%;
}
#reception .map-slot {
  Top: 67%;
}
/* 埋め込みマップはそのスロットいっぱいに。操作はさせずクリックでアプリへ */
#ceremony .map-frame,
#reception .map-frame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;     /* ← マップ操作を無効化して、上のリンクを優先 */
  filter: saturate(1.05) contrast(1.02); /* 視認性を少しだけUP（任意） */
  border-radius: 10px;      /* 角丸（任意） */
  box-shadow: 0 10px 30px rgba(0,0,0,.12); /* 影（任意） */
}
/* 透明リンクを全面に被せてクリックでアプリへ */
#ceremony .map-link,
#reception .map-link{
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: auto;
}


/* ===== RSVP 背景 ===== */
#rsvp { --rsvp-ratio: 1080 / 1920; }
#rsvp{
  padding: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-x: hidden;
}
#rsvp a{font-size: clamp(10px, 3.2vmin, 20px);}
#rsvp .rsvp-stage{
  position: relative;
  aspect-ratio: var(--rsvp-ratio);
  width: min(100vw, calc(100vh  * (var(--rsvp-ratio))));
  width: min(100vw, calc(100svh * (var(--rsvp-ratio))));
  width: min(100vw, calc(100dvh * (var(--rsvp-ratio))));
  height: auto;
  margin: 0 auto;
}
#rsvp .rsvp-stage::before{
  content: "";
  position: absolute; inset: 0;
  background: url("../image/RSVP_bg_1080x1920px.png") center / 100% 100% no-repeat;
  pointer-events: none; /* 背景はクリック貫通 */
}

/* === CTAボタン（背景に対する相対配置）=== */
/* 「御出欠のご回答をお願い申し上げます」のすぐ下あたりに来る想定の初期値 */
#rsvp .rsvp-cta{
  position: absolute;
  left: 15%;
  top: 45%;
  width: 70%;
  height: 7.5%;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: var(--main-color);
  font-family: var(--primary-font-family);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
#rsvp .rsvp-cta:hover{
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
#rsvp .rsvp-cta:active{
  transform: translateY(0);
}
#rsvp .rsvp-mail{
  top: 60%;
}
#rsvp .rsvp-allergy{
  top: 75%;
}