:root{
  --bg:#ffffff;--bg2:#f6f4f1;--ink:#222222;--muted:#8d8d8d;--rose:#c9a597;--rose-d:#b98a7b;--gold:#b59a6b;--line:#e5dbd2;
  --script:'Pinyon Script','Cormorant Garamond',cursive;--thin:'Poiret One','Jost',sans-serif;--serif:'Cormorant Garamond','Noto Serif JP',serif;--sans:'Jost',sans-serif;--jp:'Noto Serif JP',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.is-gated,html.is-gated body{overflow:hidden;height:100%}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}button{font:inherit;color:inherit}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible{outline:2px solid var(--rose-d);outline-offset:6px}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.script{font-family:var(--script);font-weight:400}

/* ================= GATE : 観音開きの扉 ================= */
.gate{--fi:clamp(12px,3.4vw,20px);position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100%,560px);height:100svh;z-index:100;perspective:1800px;color:#23405f;background:#e4f0fa}
.gate-door{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#dcebf8;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;transition:transform 2.8s cubic-bezier(.62,0,.18,1) 1.25s}
.gate-door img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover;display:block}
.gate-door-l{left:0;transform-origin:0 50%}
.gate-door-l img{left:0;object-position:left center}
.gate-door-r{right:0;transform-origin:100% 50%}
.gate-door-r img{right:0;object-position:right center}
.gate-door:after{content:'';position:absolute;inset:0;background:#3b5f86;opacity:0;transition:opacity 2.4s ease 1.25s;pointer-events:none}
.gate-glow{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 50% 50%,#fff 0%,rgba(255,255,255,.9) 22%,rgba(255,255,255,0) 70%)}
.gate-center{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px;transition:opacity .7s ease,transform 1s ease}
.gate-center>*{animation:gate-up 1.3s cubic-bezier(.2,.7,.2,1) both}
.gate-eyebrow{margin:0 0 clamp(14px,3svh,26px);font:400 clamp(10px,2.9vw,12px) var(--thin);letter-spacing:.42em;padding-left:.42em;animation-delay:.6s}
.gate-names{margin:0;font:400 clamp(40px,min(13.4vw,8.6svh),74px)/1.08 var(--thin);letter-spacing:.07em;padding-left:.07em;display:flex;flex-direction:column;align-items:center}
.gate-names span:nth-child(1){animation:gate-up 1.4s cubic-bezier(.2,.7,.2,1) .95s both}
.gate-names i{font:italic 400 .62em/1.2 'Cormorant Garamond',serif;letter-spacing:0;margin:.08em 0;animation:gate-up 1.4s cubic-bezier(.2,.7,.2,1) 1.2s both}
.gate-names span:nth-child(3){animation:gate-up 1.4s cubic-bezier(.2,.7,.2,1) 1.45s both}
.gate-date{margin:clamp(16px,3svh,28px) 0 0;font:400 clamp(12px,3.4vw,15px) var(--thin);letter-spacing:.36em;padding-left:.36em;animation-delay:1.9s}
.gate-seal{position:relative;margin-top:clamp(26px,5.5svh,48px);width:clamp(92px,min(27vw,14svh),118px);aspect-ratio:1;border:0;border-radius:50%;background:transparent;color:#22405f;cursor:pointer;padding:0;display:grid;place-items:center;animation-delay:2.3s;-webkit-tap-highlight-color:transparent}
.gate-seal:before{content:'';position:absolute;inset:18%;border-radius:50%;background:#22405f;transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s}
.gate-seal:after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #22405f;opacity:0;animation:seal-ping 2.8s ease-out 3s infinite}
.gate-seal:hover:before{transform:scale(1.12)}
.gate-seal:focus-visible{outline:2px solid #22405f;outline-offset:6px}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:seal-spin 22s linear infinite}
.seal-ring text{font:400 8.4px var(--thin);fill:currentColor}
.gate-seal b{position:relative;font:400 clamp(11px,3.1vw,13px) var(--thin);letter-spacing:.24em;padding-left:.24em;color:#fff}
.gate-hint{margin:clamp(14px,2.6svh,22px) 0 0;font:300 11px var(--jp);letter-spacing:.24em;padding-left:.24em;color:#666;animation-delay:2.8s}
@keyframes gate-up{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes frame-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@keyframes seal-ping{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.55);opacity:0}}
@keyframes gate-glow{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes hero-zoom{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* 開く: 中央の文字が消え → 扉が左右にひらき → 光があふれ、写真がゆっくり引いていく */
.gate.is-opening{pointer-events:none}
.gate.is-opening .gate-skip{pointer-events:auto}
.gate.is-arrived .gate-skip{pointer-events:none}
.gate.is-opening .gate-center{opacity:0;transform:scale(1.05)}
.gate.is-opening .gate-door-l{transform:rotateY(104deg)}
.gate.is-opening .gate-door-r{transform:rotateY(-104deg)}
.gate.is-opening .gate-door:after{opacity:.3}
.gate.is-opening .gate-glow{animation:gate-glow 2.8s ease-out 1.3s both}
/* 光がじわっと、扉の合わせ目からにじみ、扉の表面を伝って広がる */
.gate-seam{position:absolute;z-index:2;left:8%;right:8%;top:0;bottom:0;opacity:0;pointer-events:none;transform-origin:50% 50%;
  background:linear-gradient(90deg,rgba(180,222,255,0) 0%,rgba(180,222,255,.3) 22%,rgba(225,244,255,.9) 44%,#fff 50%,rgba(225,244,255,.9) 56%,rgba(180,222,255,.3) 78%,rgba(180,222,255,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.gate.is-opening .gate-seam{animation:seam-glow 3s cubic-bezier(.4,0,.2,1) .05s both}
@keyframes seam-glow{0%{opacity:0;transform:scaleX(.02)}25%{opacity:1;transform:scaleX(.1)}65%{opacity:1;transform:scaleX(.6)}100%{opacity:0;transform:scaleX(1.25)}}
.dsheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;opacity:0}
.dsheen:before{content:'';position:absolute;top:-10%;bottom:-10%;width:80%;
  background:linear-gradient(100deg,rgba(180,222,255,0) 0%,rgba(180,222,255,.55) 38%,rgba(255,255,255,.95) 52%,rgba(180,222,255,.45) 66%,rgba(180,222,255,0) 100%)}
.dsheen:after{content:'';position:absolute;top:0;bottom:0;width:46%;opacity:0}
.gate-door-l .dsheen:before{left:0;transform:translateX(125%)}
.gate-door-r .dsheen:before{right:0;transform:translateX(-125%)}
.gate-door-l .dsheen:after{right:0;background:linear-gradient(270deg,rgba(190,228,255,.95),rgba(190,228,255,0))}
.gate-door-r .dsheen:after{left:0;background:linear-gradient(90deg,rgba(190,228,255,.95),rgba(190,228,255,0))}
.gate.is-opening .dsheen{animation:sheen-vis 3.4s ease .15s both}
.gate.is-opening .dsheen:after{animation:edge-glow 3.2s ease .1s both}
.gate.is-opening .gate-door-l .dsheen:before{animation:sheen-l 2.4s cubic-bezier(.45,.05,.3,1) .35s both}
.gate.is-opening .gate-door-r .dsheen:before{animation:sheen-r 2.4s cubic-bezier(.45,.05,.3,1) .35s both}
@keyframes sheen-vis{0%{opacity:0}18%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes edge-glow{0%{opacity:0}35%{opacity:1}100%{opacity:.35}}
@keyframes sheen-l{from{transform:translateX(125%)}to{transform:translateX(-105%)}}
@keyframes sheen-r{from{transform:translateX(-125%)}to{transform:translateX(105%)}}
.gate-aisle{position:absolute;inset:0;overflow:hidden;background:#eaf3fb}
.gate-aisle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.02);transform-origin:50% 44%;will-change:transform,filter}
.gate.is-opening .gate-aisle img{animation:aisle-walk 7.4s cubic-bezier(.45,.02,.3,1) .9s both}
@keyframes aisle-walk{0%{transform:scale(1.02);filter:brightness(1)}70%{transform:scale(1.55);filter:brightness(1.02)}100%{transform:scale(2.5);filter:brightness(1.35) saturate(.9)}}
.gate-aisle:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 50% 44%,#fff,rgba(255,255,255,0) 70%);opacity:0}
.gate.is-opening .gate-aisle:after{animation:aisle-light 7.4s ease-in .9s both}
@keyframes aisle-light{0%,55%{opacity:0}100%{opacity:1}}
.gate-welcome{position:absolute;left:0;right:0;top:clamp(54px,12svh,120px);z-index:3;text-align:center;color:#2b4666;opacity:0;transform:translateY(14px);transition:opacity 1.3s ease,transform 1.6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.gate-welcome .w-en{margin:0;font:400 clamp(30px,10vw,48px)/1 var(--thin);letter-spacing:.34em;padding-left:.34em}
.gate-welcome i{display:block;width:44px;height:1px;background:#8fb4d6;margin:18px auto 16px}
.gate-welcome .w-jp{margin:0;font:300 clamp(11px,3.1vw,13px) var(--jp);letter-spacing:.3em;padding-left:.3em}
.gate.is-welcome .gate-welcome{opacity:1;transform:none}
.gate-skip{position:absolute;z-index:4;right:clamp(18px,4vw,28px);bottom:max(20px,env(safe-area-inset-bottom));border:1px solid rgba(60,50,40,.35);background:rgba(255,255,255,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:99px;padding:9px 18px;font:300 11px var(--jp);letter-spacing:.2em;color:#4a4036;cursor:pointer}
.gate.is-arrived{opacity:0;pointer-events:none;transition:opacity 1.6s ease}
.gate.is-arrived .gate-welcome,.gate.is-arrived .gate-skip{opacity:0}
.gate.is-done{display:none}
html.is-revealing{--hd:.5s}
html.is-revealing .hero .photo-slot img{animation:hero-zoom 3.6s cubic-bezier(.2,.7,.2,1) both}
@media(min-width:760px){.gate{height:min(100svh,900px)}}

.petals{position:fixed;inset:0;width:100%;height:100%;z-index:120;pointer-events:none}

/* ================= PAGE (Piary-style) ================= */
body{background:#fff;color:var(--ink)}
.paper{max-width:560px;margin:0 auto;background:#fff;position:relative;box-shadow:0 0 60px -30px rgba(0,0,0,.25)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in,html:not(.js) .reveal{opacity:1;transform:none}
.title{font:400 clamp(34px,10vw,48px)/1.1 var(--thin);letter-spacing:.06em;text-align:center;margin:0 0 38px;color:#111}
.block{position:relative;padding:clamp(64px,14vw,92px) clamp(24px,8vw,48px);text-align:center;background:#fff}
.btn{display:inline-block;text-decoration:none;font:400 12px var(--jp);letter-spacing:.2em;padding:15px 30px;border:1px solid #222;border-radius:99px;color:#222;background:transparent;transition:background .25s,color .25s}
.btn:hover{background:#222;color:#fff}

/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden;background:#d9d6d2;color:#fff}
.hero-photo{margin:0}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,14,.5) 0%,rgba(20,16,14,.34) 34%,rgba(20,16,14,.1) 52%,rgba(20,16,14,0) 55%,rgba(20,16,14,.35) 100%)}
.hero-frame{position:absolute;z-index:2;inset:clamp(12px,3.4vw,20px);border:1px solid rgba(255,255,255,.85);border-radius:0 clamp(70px,24vw,120px) 0 0;pointer-events:none}
.hero-copy{position:absolute;z-index:3;left:0;right:0;top:0;padding:clamp(48px,9svh,84px) clamp(32px,9vw,52px) 0;text-align:left;text-shadow:0 1px 18px rgba(0,0,0,.28)}
.hero-lead{margin:0;font:400 clamp(34px,11.4vw,60px)/1.12 var(--thin);letter-spacing:.04em;text-transform:uppercase}
.hero-lead span{display:block}
.hero-lead em{font-style:italic;font-family:'Cormorant Garamond',serif;text-transform:lowercase;font-size:1.02em;letter-spacing:.01em;font-weight:400}
.hero-names{margin:clamp(20px,4svh,34px) 0 8px;font-weight:400;font:400 clamp(15px,4.4vw,20px) var(--thin);letter-spacing:.3em}
.hero-names i{font-style:normal;margin:0 .35em}
.hero-date{margin:0;font:400 clamp(13px,3.6vw,16px) var(--thin);letter-spacing:.3em}
.hero-quote{position:absolute;z-index:3;left:0;right:0;bottom:clamp(40px,8svh,64px);margin:0;text-align:center;font:400 clamp(10px,2.7vw,12px)/1.9 'Cormorant Garamond',serif;font-style:italic;letter-spacing:.14em;text-shadow:0 1px 12px rgba(0,0,0,.4)}
html:not(.is-gated) .hero-copy>*,html.is-revealing .hero-copy>*{animation:rise 1.3s cubic-bezier(.2,.7,.2,1) var(--hd,0s) both}
html:not(.is-gated) .hero-quote,html.is-revealing .hero-quote{animation:fade-in 1.6s ease calc(var(--hd,0s) + .9s) both}
html:not(.is-gated) .hero-copy>*:nth-child(2),html.is-revealing .hero-copy>*:nth-child(2){animation-delay:calc(var(--hd,0s) + .25s)}
html:not(.is-gated) .hero-copy>*:nth-child(3),html.is-revealing .hero-copy>*:nth-child(3){animation-delay:calc(var(--hd,0s) + .45s)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* message */
.message-body{font:300 clamp(12px,3.3vw,14px)/2.15 var(--jp);letter-spacing:.1em;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.message-body p{margin:0 0 30px;text-wrap:balance}

/* countdown band */
.count-band{position:relative;overflow:hidden;color:#fff;text-align:center;padding:clamp(70px,16vw,100px) 20px;background:#777}
.count-band .photo-slot.count-photo{position:absolute;inset:0;width:auto;height:auto}
.count-veil{position:absolute;inset:0;z-index:1;background:rgba(20,18,16,.38);pointer-events:none}
.count-inner{position:relative;z-index:2}
.countdown-lead{font:400 clamp(20px,6vw,28px) var(--thin);letter-spacing:.3em;margin:0 0 22px;padding-left:.3em}
.countdown-grid{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.5vw,18px)}
.count-main{display:flex;align-items:baseline;gap:12px}
.count-main .count-num{font:400 clamp(76px,26vw,128px)/1 var(--thin);min-width:0}
.count-main .count-label{font:400 clamp(14px,4vw,18px) var(--thin);letter-spacing:.2em;margin:0;padding:0}
.count-sub{display:flex;gap:clamp(16px,6vw,34px);justify-content:center}
.count-cell{display:flex;flex-direction:column;align-items:center}
.count-cell .count-num{font:400 clamp(26px,8vw,38px)/1 var(--thin);min-width:2ch;text-align:center}
.count-num{font-variant-numeric:tabular-nums;display:inline-block}
.count-num.tick{animation:tick .5s cubic-bezier(.2,.8,.2,1)}
.count-label{font:400 clamp(8px,2.2vw,10px) var(--thin);letter-spacing:.24em;margin-top:6px;padding-left:.24em;opacity:.9}
.countdown-note{font:300 12px var(--jp)}
@keyframes tick{0%{opacity:.15;transform:translateY(-10px)}100%{opacity:1;transform:none}}
.count-band,.count-band .count-num,.count-band .countdown-lead{text-shadow:0 1px 16px rgba(0,0,0,.3)}

/* invitation */
.info{margin:0 auto 22px;max-width:380px;text-align:left}
.info>div{display:grid;grid-template-columns:5.6em 1fr;gap:12px;padding:15px 2px;border-bottom:1px solid #e4e1dc}
.info>div:first-child{border-top:1px solid #e4e1dc}
.info dt{font:400 12px/1.8 var(--jp);letter-spacing:.14em;color:#777}
.info dd{margin:0;font:400 13px/1.8 var(--jp);letter-spacing:.06em}
.info-note{font:300 12px/2 var(--jp);letter-spacing:.1em;color:#777;margin:0 0 30px}

/* profile */
.profile{padding-left:clamp(20px,6vw,36px);padding-right:clamp(20px,6vw,36px)}
.profile-item{margin:0 0 56px;text-align:left}
.profile-item:last-child{margin-bottom:0}
.profile-row{display:flex;gap:clamp(18px,5vw,28px);align-items:flex-end}
.profile-row.is-rev{flex-direction:row-reverse}
.photo-slot.profile-photo{flex:0 0 47%;aspect-ratio:3/4;border-radius:0}
.profile-row.is-rev .profile-name{text-align:right;align-items:flex-end}
.profile-name{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}
.profile-name h3{margin:0;font:400 clamp(30px,9vw,40px)/1.1 var(--thin);letter-spacing:.08em}
.profile-name i{display:block;width:100%;height:1px;background:#222;margin:12px 0 8px}
.profile-name p{margin:0;font:400 11px var(--thin);letter-spacing:.3em;color:#777}
.profile-text{margin:22px 0 0;font:300 clamp(11.5px,3.1vw,13px)/2.2 var(--jp);letter-spacing:.06em;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;color:#333}

/* gallery */
.gallery{background:#f6f4f1;padding-left:clamp(14px,4vw,28px);padding-right:clamp(14px,4vw,28px)}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,2vw,10px)}
.g-wide{grid-column:span 2;aspect-ratio:3/2}
.g-tall{aspect-ratio:3/4}
.g-sq{aspect-ratio:1}
.gallery-hint{font:300 10px var(--jp);letter-spacing:.2em;color:#999;margin:22px 0 0}

/* map */
.map-block{line-height:0;background:#eee}
.map-block iframe{display:block;width:100%;height:clamp(300px,90vw,420px);border:0;filter:grayscale(.25)}

/* rsvp */
.rsvp-lead{font:300 clamp(12px,3.3vw,14px)/2.4 var(--jp);letter-spacing:.1em;margin:0 0 34px;word-break:keep-all}
.rsvp-dialog{width:min(92vw,400px);border:0;border-radius:6px;padding:0;color:#222;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.rsvp-dialog::backdrop{background:rgba(20,18,16,.6)}
.rsvp-dialog form{position:relative;padding:44px 28px 32px;display:flex;flex-direction:column;gap:20px;text-align:left}
.rsvp-dialog h2{font:400 34px var(--thin);letter-spacing:.14em;text-align:center;margin:0}
.rsvp-close{position:absolute;top:10px;right:12px;border:0;background:none;font:300 28px/1 var(--serif);cursor:pointer;width:40px;height:40px}
.rsvp-choice{border:0;margin:0;padding:0;display:flex;gap:10px}
.rsvp-choice label{flex:1;cursor:pointer}
.rsvp-choice input{position:absolute;opacity:0;pointer-events:none}
.rsvp-choice span{display:block;text-align:center;border:1px solid #cfcac4;border-radius:99px;padding:13px 0;font:400 13px var(--jp);letter-spacing:.14em}
.rsvp-choice input:checked+span{background:#222;color:#fff;border-color:#222}
.rsvp-choice input:focus-visible+span{outline:2px solid #222;outline-offset:3px}
.rsvp-field{display:flex;flex-direction:column;gap:8px;font:400 11px var(--jp);letter-spacing:.14em;color:#777}
.rsvp-field input,.rsvp-field textarea{font:400 14px var(--jp);border:0;border-bottom:1px solid #bbb;padding:8px 2px;background:transparent;color:#222;border-radius:0;resize:none;outline:none}
.rsvp-field input:focus,.rsvp-field textarea:focus{border-bottom-color:#222}
.rsvp-submit{border:0;background:#222;color:#fff;border-radius:99px;padding:16px;font:400 13px var(--jp);letter-spacing:.24em;cursor:pointer}
.rsvp-thanks{margin:0;text-align:center;font:300 12px/2 var(--jp);letter-spacing:.08em}

/* closing */
.closing{position:relative;min-height:84svh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:#444;color:#fff;text-align:center}
.photo-slot.closing-photo{position:absolute;inset:0;width:auto;height:auto}
.closing-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 35%,rgba(20,16,14,.6));pointer-events:none}
.closing-text{position:relative;z-index:2;padding:0 20px clamp(56px,11svh,100px)}
.closing-title{font:400 clamp(40px,13vw,68px)/1 var(--thin);letter-spacing:.08em;margin:0 0 18px;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.closing-title em{font:italic 400 1em 'Cormorant Garamond',serif;text-transform:lowercase}
.closing-jp{font:300 13px/2.4 var(--jp);letter-spacing:.24em;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.footer{text-align:center;padding:52px 20px 120px;background:#fff}
.footer-names{font:400 22px var(--thin);letter-spacing:.2em;margin:0 0 8px}
.footer-small{font:400 11px var(--thin);letter-spacing:.24em;color:#888;margin:0 0 24px}
.replay{border:0;background:none;font:300 11px var(--jp);letter-spacing:.25em;color:#555;border-bottom:1px solid #999;padding:4px 2px;cursor:pointer}
.sample-notice{font:300 9px var(--jp);letter-spacing:.1em;color:#999;margin:30px 0 0}

/* ================= PHOTO SLOTS ================= */
.photo-slot{position:relative;margin:0;overflow:hidden;background:linear-gradient(160deg,#f0e5dc,#e6d6cb);cursor:pointer}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:photo-in .9s ease both}
@keyframes photo-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
.photo-slot img{transition:transform 1s}
.hero-photo,.closing-photo{border-radius:0}

/* viewer */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;margin:0;background:rgba(28,20,16,.94);color:#fff;overflow:hidden}
.viewer::backdrop{background:rgba(28,20,16,.94)}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer img{max-width:92vw;max-height:84svh;object-fit:contain;animation:photo-in .5s ease both}
.viewer-close,.viewer-nav{position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;width:44px;height:44px;border-radius:50%;font:300 26px/1 var(--serif);cursor:pointer;display:flex;align-items:center;justify-content:center}
.viewer-close{top:max(16px,env(safe-area-inset-top));right:16px}
.viewer-nav{top:50%;transform:translateY(-50%)}.viewer-prev{left:12px}.viewer-next{right:12px}
.viewer-count{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font:400 11px var(--sans);letter-spacing:.3em;margin:0}

/* ===== slots ===== */
.photo-slot{background:#e4e1dc}
.photo-slot.hero-photo,.photo-slot.closing-photo,.photo-slot.count-photo{position:absolute;inset:0;width:auto;height:auto;z-index:0}
.hero-photo,.closing-photo{border-radius:0}
.gallery-grid .photo-slot{cursor:zoom-in}
.gallery-grid .photo-slot:focus-visible{outline:2px solid #222;outline-offset:3px}
@media(min-width:760px){.hero{min-height:min(100svh,900px)}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ===== added sections: welcome / profile data / Q&A / story / gallery kids / back cover ===== */
.eyebrow{margin:0 0 10px;font:400 10px var(--thin);letter-spacing:.34em;color:#8a8a8a;padding-left:.34em}
.eyebrow+.title{margin-top:0}
.welcome{background:#fff}
.welcome-body{font:300 clamp(12px,3.3vw,14px)/2.2 var(--jp);letter-spacing:.08em;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.welcome-body p{margin:0 0 26px;text-wrap:balance}
.welcome-lead{font:400 clamp(15px,4.2vw,18px)/1.9 var(--jp)!important;letter-spacing:.14em!important}
.welcome-sign{margin:34px 0 0;font:400 clamp(18px,5.4vw,24px) var(--thin);letter-spacing:.18em}
.welcome-sign i{font-style:normal;margin:0 .3em;color:#999}

.profile-data{margin:26px 0 0;border-top:1px solid #e4e1dc}
.profile-data>div{display:grid;grid-template-columns:5.4em 1fr;gap:10px;padding:11px 2px;border-bottom:1px solid #e4e1dc}
.profile-data dt{font:400 11px/1.9 var(--jp);letter-spacing:.14em;color:#8a8a8a}
.profile-data dd{margin:0;font:400 12.5px/1.9 var(--jp);letter-spacing:.05em}
.qa{margin-top:26px;padding:20px 18px 8px;background:#f7f6f3}
.qa-title{margin:0 0 10px;text-align:center;font:400 20px var(--thin);letter-spacing:.2em}
.qa details{border-top:1px solid #e1ded8}
.qa summary{list-style:none;cursor:pointer;position:relative;padding:14px 26px 14px 0;font:400 12.5px/1.8 var(--jp);letter-spacing:.05em;color:#222}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:300 20px/1 var(--thin);color:#888;transition:transform .3s}
.qa details[open] summary:after{content:"\2212"}
.qa summary:focus-visible{outline:2px solid #222;outline-offset:2px}
.qa details p{margin:0 0 16px;padding:0 4px 0 1.6em;font:300 12.5px/2 var(--jp);letter-spacing:.06em;color:#444;text-indent:0}

.story{background:#f6f4f1;padding-left:clamp(22px,7vw,44px);padding-right:clamp(22px,7vw,44px)}
.story-lead{margin:-14px 0 40px;font:300 clamp(12px,3.3vw,13.5px)/2.1 var(--jp);letter-spacing:.1em;color:#555}
.timeline{list-style:none;margin:0;padding:0;text-align:left;position:relative}
.timeline:before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:#c9c5be}
.timeline li{position:relative;padding:0 0 34px 34px}
.timeline li:last-child{padding-bottom:0}
.timeline li:before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid #777}
.timeline li.is-final:before{background:#222;border-color:#222}
.timeline time{display:block;font:400 clamp(20px,5.6vw,24px)/1.2 var(--thin);letter-spacing:.1em;color:#222}
.timeline h3{margin:6px 0 6px;font:400 14px/1.7 var(--jp);letter-spacing:.14em}
.timeline p{margin:0;font:300 12.5px/2 var(--jp);letter-spacing:.06em;color:#555}

.gallery-sub{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 18px;font-weight:400}
.gallery-sub span{font:400 clamp(20px,6vw,26px) var(--thin);letter-spacing:.14em}
.gallery-sub small{font:300 11px var(--jp);letter-spacing:.3em;color:#888;padding-left:.3em}
.gallery-grid+.gallery-sub{margin-top:46px}
.gallery-grid.kids{align-items:start}
.kid-cap{margin:0}
.kid-photo{display:block}
.kid-cap .photo-slot{width:100%}
.kid-cap figcaption{margin-top:10px;text-align:center;font:300 11px var(--jp);letter-spacing:.18em;color:#666}

.closing-names{margin:26px 0 6px;font:400 clamp(15px,4.4vw,19px) var(--thin);letter-spacing:.3em;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.closing-names i{font-style:normal;margin:0 .3em}
.closing-date{margin:0;font:400 11px var(--thin);letter-spacing:.3em;opacity:.9;text-shadow:0 1px 12px rgba(0,0,0,.4)}

/* ===== PROFILE MOVIE ===== */
.pmovie{background:#fff;padding-left:clamp(20px,6vw,36px);padding-right:clamp(20px,6vw,36px)}
.pm-lead{margin:-14px 0 40px;font:300 clamp(12px,3.3vw,13.5px)/2.1 var(--jp);letter-spacing:.1em;color:#555}
.pm{margin:0 0 56px}
.pm:last-child{margin-bottom:0}
.pm-who{margin:0 0 10px;font:400 clamp(24px,7vw,32px) var(--thin);letter-spacing:.12em}
.pm-who span{display:block;font:400 10px var(--thin);letter-spacing:.34em;color:#8a8a8a;margin-bottom:4px}
.pm-intro{margin:0 0 22px;font:300 clamp(12px,3.3vw,13.5px)/2.1 var(--jp);letter-spacing:.08em;color:#333}
.pm-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:#222;border-radius:2px;box-shadow:0 18px 40px -22px rgba(0,0,0,.45);color:#fff;text-align:left}
.pm-scene{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.pm-scene.is-on{opacity:1;pointer-events:auto}
.pm-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;transform:scale(1);transform-origin:50% 35%}
.pm-scene.is-on img{animation:pm-zoom var(--pm-d,1.5s) linear both;animation-play-state:paused}
.pm.is-playing .pm-scene.is-on img{animation-play-state:running}
@keyframes pm-zoom{from{transform:scale(1)}to{transform:scale(1.05)}}
.pm-scene:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25) 0,transparent 20%,transparent 38%,rgba(8,6,5,.82) 100%);pointer-events:none}
.pm-scene figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 20px 34px;display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.pm-en{font:400 11px var(--thin);letter-spacing:.34em;opacity:.92}
.pm-jp{display:flex;align-items:baseline;gap:12px;font:400 clamp(22px,6.6vw,28px)/1.3 var(--jp);letter-spacing:.14em}
.pm-jp small{font:400 12px var(--thin);letter-spacing:.2em;opacity:.9}
.pm-text{font:300 11.5px/1.8 var(--jp);letter-spacing:.07em;opacity:.95;margin-top:4px}
.pm-scene.is-on figcaption>*{animation:pm-up .4s cubic-bezier(.2,.7,.2,1) both}
.pm-scene.is-on figcaption>.pm-en{animation-delay:.05s}
.pm-scene.is-on figcaption>.pm-jp{animation-delay:.1s}
.pm-scene.is-on figcaption>.pm-text{animation-delay:.15s}
@keyframes pm-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pm-bars{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;gap:4px}
.pm-bar{flex:1;height:18px;padding:8px 0;border:0;background:none;cursor:pointer;position:relative}
.pm-bar:before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:rgba(255,255,255,.4)}
.pm-bar i{position:absolute;left:0;top:8px;height:2px;width:0;background:#fff}
.pm-bar.done i{width:100%}
.pm-bar.on i{animation:pm-fill var(--pm-d,1.5s) linear both;animation-play-state:paused}
.pm.is-playing .pm-bar.on i{animation-play-state:running}
@keyframes pm-fill{from{width:0}to{width:100%}}
.pm-bar:focus-visible,.pm-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pm-toggle{position:absolute;z-index:3;right:12px;bottom:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.25);color:#fff;font:400 10px/1 sans-serif;letter-spacing:0;cursor:pointer;backdrop-filter:blur(4px)}
@media(prefers-reduced-motion:reduce){
  .pm-scene.is-on img,.pm-bar.on i,.pm-scene.is-on figcaption>*{animation:none!important}
  .pm-bar.on i{width:100%}
}

/* ===== story photos ===== */
.tl-photo{margin:16px 0 0;overflow:hidden;background:#e4e1dc;aspect-ratio:3/2;box-shadow:0 14px 30px -20px rgba(0,0,0,.45);position:relative}
.tl-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in .timeline li.in .tl-photo img,html:not(.js) .tl-photo img{transform:none}
.timeline li:nth-child(even) .tl-photo{margin-left:clamp(10px,5vw,26px)}
.timeline li:nth-child(odd) .tl-photo{margin-right:clamp(10px,5vw,26px)}
.timeline li{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.timeline li.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.timeline li{opacity:1;transform:none}.tl-photo img{transform:none}}

/* ===== RSVP button (わかりやすいデザイン) ===== */
.rsvp-btn{display:flex;align-items:center;gap:14px;width:100%;max-width:350px;margin:0 auto;padding:16px 20px 16px 22px;border:1px solid #1d1d1d;border-radius:99px;background:#1d1d1d;color:#fff;cursor:pointer;text-align:left;font-family:var(--jp);box-shadow:0 14px 26px -16px rgba(0,0,0,.55);transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.rsvp-btn:before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.28);border-radius:99px;pointer-events:none}
.rsvp-btn:after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:rb-shine 4.2s ease-in-out infinite}
@keyframes rb-shine{0%,62%{left:-40%}100%{left:130%}}
.rsvp-btn:hover,.rsvp-btn:focus-visible{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(0,0,0,.6)}
.rsvp-btn:active{transform:translateY(0) scale(.985)}
.rsvp-btn:focus-visible{outline:2px solid #1d1d1d;outline-offset:4px}
.rb-ico{flex:0 0 26px;width:26px;height:26px}
.rb-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rb-txt b{font:400 clamp(15px,4.4vw,17px)/1.3 var(--jp);letter-spacing:.16em}
.rb-txt small{font:300 10.5px/1.4 var(--jp);letter-spacing:.08em;opacity:.82}
.rb-arrow{flex:0 0 22px;width:22px;height:22px;transition:transform .25s}
.rsvp-btn:hover .rb-arrow{transform:translateX(4px)}
.rsvp-btn.is-main{padding-top:20px;padding-bottom:20px;max-width:370px}
.rsvp-band{padding:44px 24px 46px;text-align:center;background:#f6f4f1;border-top:1px solid #ebe8e3;border-bottom:1px solid #ebe8e3}
.rsvp-band-lead{margin:0 0 20px;font:300 clamp(12px,3.3vw,13.5px)/2.1 var(--jp);letter-spacing:.1em;color:#444}
.invite-rsvp{margin-top:42px;padding-top:34px;border-top:1px solid #e4e1dc}
.invite-rsvp p{margin:0 0 18px;font:300 12px/2 var(--jp);letter-spacing:.1em;color:#555}
@media(prefers-reduced-motion:reduce){.rsvp-btn:after{animation:none;display:none}}

/* ===== calendar ===== */
.cal{max-width:340px;margin:0 auto 30px;padding:22px 18px 18px;background:#fff;border:1px solid #e4e1dc;text-align:center}
.cal-title{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:0 0 14px}
.cal-title b{font:400 clamp(40px,12vw,52px)/1 var(--thin);letter-spacing:.04em}
.cal-title span{font:400 10px var(--thin);letter-spacing:.3em;color:#777}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.cal-h{font:400 11px/2.2 var(--jp);color:#8a8a8a;letter-spacing:.06em}
.cal-d{display:flex;align-items:center;justify-content:center;height:36px;font:400 14px var(--thin)}
.cal-d i{font-style:normal;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;position:relative}
.is-sun{color:#c0706f}.is-sat{color:#5f86b3}
.cal-d.is-day i{background:#1d1d1d;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px #1d1d1d}
.cal-d.is-due i{border:1px dashed #1d1d1d;color:#1d1d1d}
.cal-legend{display:flex;flex-direction:column;gap:6px;align-items:center;margin:16px 0 0;padding-top:14px;border-top:1px solid #eeeae5;font:300 11.5px var(--jp);letter-spacing:.1em;color:#444}
.cal-legend span{display:flex;align-items:center;gap:8px}
.cal-legend span:before{content:"";width:12px;height:12px;border-radius:50%;background:#1d1d1d}
.cal-legend .lg-due:before{background:#fff;border:1px dashed #1d1d1d;width:10px;height:10px}

.rsvp-date{display:inline-block;margin:6px 0 2px;font:400 clamp(16px,4.8vw,19px) var(--jp);letter-spacing:.14em;color:#111;border-bottom:1px solid #222;padding-bottom:3px}
.rsvp-lead{line-height:2.3}

.calendar{background:#fff;padding-bottom:clamp(56px,12vw,80px)}
.calendar .title{margin-bottom:30px}
.calendar .cal{margin-bottom:26px}
.invitation .info-note{margin-bottom:0}
.invite-rsvp{margin-top:34px}

/* ===== お客様別データ対応: 出欠フォーム拡張・空の写真枠 ===== */
.rsvp-dialog{max-height:92vh;overflow:auto}
.rsvp-fields{display:flex;flex-direction:column;gap:18px}
.rsvp-fields[hidden],[data-yes-only][hidden]{display:none!important}
.rsvp-field span em{font-style:normal;color:#b3261e;margin-left:8px;font-size:10px;letter-spacing:.1em}
.rsvp-field select{font:400 14px var(--jp);border:0;border-bottom:1px solid #bbb;padding:8px 2px;background:transparent;color:#222;border-radius:0;outline:none}
.rsvp-privacy{margin:0;font:300 11px/1.8 var(--jp);color:#777;letter-spacing:.04em}
.rsvp-error{margin:0;font:400 12px/1.7 var(--jp);color:#b3261e;text-align:center}
.rsvp-submit:disabled{opacity:.6;cursor:default}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.photo-slot.is-empty{cursor:default}
.hero .photo-slot.is-empty,.closing .photo-slot.is-empty,.count-band .photo-slot.is-empty{background:linear-gradient(160deg,#d9d2c8,#b9aea0)}
.pm-scene:not(:has(img)){background:linear-gradient(160deg,#4a4540,#2b2825)}