:root{--paper:#f7f2e9;--ink:#643333;--muted:#88736d;--rose:#bc8688;--line:#d9c9ba}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;color:var(--ink);background:var(--paper);font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;font-size:16px;line-height:1.9}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #843e48;outline-offset:5px}[hidden]{display:none!important}.opening{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#fffcf7 5%,#f4ece1 76%)}.opening:before,.opening:after{content:'';position:absolute;inset:24px;border:1px solid #c9ac9366;pointer-events:none}.opening:after{inset:31px;border-color:#c9ac9329}.opening-inner{position:relative;padding:64px 20px 54px;width:min(100%,600px);z-index:1}.eyebrow{font-family:Georgia,serif;font-size:12px;letter-spacing:.22em;margin:0 0 25px;color:var(--muted)}h1,h2,h3,p{font-weight:400}h1{font-size:clamp(32px,5vw,44px);line-height:1.7;letter-spacing:.15em;margin:20px 0}h2{font-size:clamp(24px,4vw,30px);letter-spacing:.12em;line-height:1.6;margin:0 0 25px}.intro{font-size:14px;letter-spacing:.1em;color:var(--muted)}.gift{display:block;position:relative;width:320px;height:290px;max-width:90%;margin:22px auto 4px;border:0;background:none}.gift img{position:absolute;object-fit:contain;pointer-events:none}.gift-base{width:100%;height:auto;left:0;bottom:0;z-index:3}.gift-lid{width:100%;height:auto;left:0;top:0;z-index:4;transform-origin:80% 65%;transition:transform 1s cubic-bezier(.2,.8,.25,1),opacity .5s .5s}.pop-couple{width:72%;height:200px;left:14%;bottom:30px;opacity:0;mix-blend-mode:multiply;transform:translateY(60px) scale(.4);z-index:2;transition:transform 1s cubic-bezier(.15,1.4,.4,1) .25s,opacity .2s .25s}.gift:not(.opened){animation:sway 3s ease-in-out infinite}.gift:hover:not(.opened){animation:none;transform:translateY(-4px)}.gift.opened .gift-lid{transform:translate(50px,-140px) rotate(24deg);opacity:0}.gift.opened .pop-couple{opacity:1;transform:translateY(-75px) scale(1)}.gift.opened .gift-base{transform:translateY(20px);transition:transform .8s}.tap{font-size:15px;letter-spacing:.12em;margin:16px 0}.opening-sign{font:italic 19px Georgia,serif;color:var(--muted);margin:27px 0 8px}.text-button{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);padding:4px 0;font-size:14px}.edition{position:absolute;bottom:18px;font:10px Georgia,serif;letter-spacing:.25em}.opening.leaving{animation:fadeOut .7s forwards}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #d9c9ba66;font-size:14px}.topbar>a:first-child{font:italic 24px Georgia,serif}.topbar span{margin-left:10px}.hero{position:relative;text-align:center;padding:50px 24px 25px;background:radial-gradient(ellipse at center,#fffaf3,#eee4d8)}.hero-paper{max-width:720px;margin:auto;background:#fcf9f1;border:1px solid #dfd2c0;box-shadow:0 15px 50px #68462c0f,0 0 0 8px #fff9;outline:1px solid #ded0be;outline-offset:15px;padding:48px 30px 36px}.script{font:italic clamp(30px,5vw,43px) Georgia,serif;color:#946459;margin:0 0 20px}.hero h1{margin:0 0 5px;font-size:clamp(30px,5vw,42px)}.hero-couple{height:240px;width:100%;max-width:300px;object-fit:contain;mix-blend-mode:multiply;display:block;margin:5px auto 0}.names{font:30px Georgia,serif;letter-spacing:.04em;margin:14px 0}.names i{font-size:24px;color:var(--rose);margin:0 12px}.date{font:16px Georgia,serif;letter-spacing:.25em}.fine-rule{width:50px;height:1px;background:var(--line);margin:20px auto}.hero-note{font-size:14px;letter-spacing:.08em}.scroll{display:flex;flex-direction:column;align-items:center;font:10px Georgia,serif;letter-spacing:.2em;margin:35px auto 0;gap:12px}.scroll span{height:30px;width:1px;background:#b99c84}.section{max-width:760px;margin:auto;padding:85px 28px;text-align:center}.greeting p:not(.eyebrow):not(.signature){line-height:2.5;letter-spacing:.06em;margin:30px 0}.ornament{color:#b09574;font-size:23px}.signature{font:italic 26px Georgia,serif;margin-top:40px}.details{max-width:100%;background:#eee5da}.event-card{max-width:580px;margin:38px auto 0;background:#fcf8f1;border:1px solid #d9c9ba;padding:35px}.date-block{padding-bottom:27px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:center;font:12px Georgia,serif;letter-spacing:.2em}.date-block strong{font:42px Georgia,serif;letter-spacing:.08em;margin:14px 0}.date-block i{font-size:30px;font-weight:400;color:var(--rose)}dl{margin:25px 0 0;text-align:left}dl>div{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:13px 0}dt{color:var(--muted);font-size:14px}dd{margin:0;font-size:16px}dd span{display:block;font-size:13px;margin-top:8px;color:var(--muted)}.detail-note{font-size:14px;margin:28px 0 0}.rsvp{max-width:640px}.rsvp h2{font-size:26px}.rsvp-intro{font-size:15px;color:var(--muted)}form{text-align:left;margin-top:32px}fieldset{padding:0;border:0;margin:0 0 28px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choices label{position:relative;cursor:pointer}.choices input{position:absolute;left:18px;top:21px;accent-color:#754348}.choices span{display:flex;align-items:center;flex-direction:column;justify-content:center;padding:14px 12px 14px 25px;border:1px solid var(--line);border-radius:3px;background:#fffbf5;font-size:21px;transition:background .2s,border-color .2s}.choices small{font-size:12px;color:var(--muted)}.choices input:checked+span{background:#eedcda;border-color:#ab7178}.choices input:focus-visible+span{outline:2px solid var(--ink)}.field{display:block;font-size:15px;margin:23px 0}.field>span{font-size:12px;color:var(--muted);margin-left:8px}.field input,.field textarea,.field select{display:block;width:100%;padding:14px;margin-top:8px;border:1px solid var(--line);background:#fffcf7;border-radius:3px;color:var(--ink);font-family:inherit;font-size:16px}.field textarea{resize:vertical}.rsvp-deadline{font-size:14px;letter-spacing:.06em;margin:8px 0 0}.group>legend{font-size:15px;letter-spacing:.08em;padding:0}.field-note{font-size:13px;color:var(--muted);line-height:1.8;margin:8px 0 0}.row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.companion{border:1px solid var(--line);border-radius:3px;background:#fffdf8;padding:4px 14px 18px;margin:16px 0 0}.companion-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);margin:14px 0 0}.companion-head .text-button{font-size:13px}#add-companion{margin-top:16px}.submit{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:#764248;color:#fffaf4;padding:17px 25px;border-radius:3px;letter-spacing:.06em;transition:background .2s}.submit:hover{background:#5a2e34}.demo-note{font-size:12px;color:var(--muted);line-height:1.8;text-align:center;margin-top:18px}#reply-result{background:#eee2d7;padding:36px 20px;margin-top:30px}#reply-summary{text-align:left;margin-top:24px}#reply-summary dl{margin:0}#reply-summary dl>div{grid-template-columns:92px 1fr;gap:14px;padding:9px 0;border-top:1px solid #d9c9ba66}#reply-summary dl>div:first-child{border-top:0}#reply-summary dd{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}.reply-error{color:#993d3d;font-size:14px;line-height:1.8;margin:18px 0 0}#send-reply{margin:18px 0 22px}.submit[disabled]{background:#a98d90;cursor:default}footer{text-align:center;padding:50px 25px 35px;border-top:1px solid var(--line)}footer .script{font-size:34px;margin-bottom:5px}footer p{margin:5px}footer button{margin:25px 0}footer small{display:block;font-size:12px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}main{animation:fadeIn .9s ease both}.sparkles i{position:absolute;width:7px;height:12px;background:#ba8585;top:25%;left:50%;z-index:5;opacity:0}.opened .sparkles i{animation:confetti 1.6s ease-out .15s forwards}@keyframes sway{0%,75%,100%{transform:rotate(0)}80%{transform:rotate(-3deg)}86%{transform:rotate(3deg)}92%{transform:rotate(-2deg)}}@keyframes confetti{10%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}@keyframes fadeOut{to{opacity:0;transform:scale(1.04)}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(max-width:480px){.opening-inner{padding-top:62px}.opening h1{font-size:34px}.opening:before{inset:14px}.opening:after{inset:20px}.gift{width:280px;height:255px}.hero{padding:40px 23px 25px}.hero-paper{padding:35px 15px 25px}.hero .eyebrow{font-size:10px;letter-spacing:.12em}.hero .script{font-size:30px}.hero-couple{height:215px}.section{padding:65px 24px}.event-card{padding:26px 22px}.choices span{padding-left:22px}.choices input{left:11px}.choices small{font-size:11px}.rsvp h2{font-size:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.nojs #opening,.nojs #reply-form,.nojs #replay{display:none}.nojs #invitation[hidden],.nojs .nojs-note[hidden]{display:block!important}

/* 家族単位の回答でも、各人の入力範囲とキーボードフォーカスを明確にする。 */
select{font:inherit}select:focus-visible{outline:2px solid #843e48;outline-offset:5px}
.group{min-width:0}.group>legend{font-size:17px}.attendance-legend{font-size:15px;margin-bottom:10px}.attendance-legend span{font-size:12px;color:var(--muted);margin-left:8px}
.attendance-details{min-width:0;margin-bottom:0}.companion{min-width:0;padding-top:0}.companion>legend{padding:0 6px;font-size:14px;color:var(--ink)}.companion-head{justify-content:flex-end;margin-top:0}
.text-button:disabled{cursor:default;opacity:.55}#reply-summary dl>div{grid-template-columns:86px minmax(0,1fr)}

.couple-names{display:flex;align-items:center;justify-content:center;gap:12px;font-family:inherit;font-size:clamp(19px,4.8vw,26px);letter-spacing:.03em}.couple-names>span{display:block;white-space:nowrap}.couple-names small{display:block;font-size:10px;letter-spacing:.04em;color:var(--muted);margin-top:8px}.couple-names i{margin:0;font-family:Georgia,serif;font-size:22px}

.access-card{max-width:580px;margin:38px auto 0;text-align:center}.access-card .eyebrow{margin-bottom:10px}.access-card h3{font-size:23px;letter-spacing:.08em;margin:0 0 20px}.access-card address{font-style:normal;font-size:15px;line-height:1.9}.access-route{font-size:16px;margin:22px 0 10px}.access-note{font-size:13px;color:var(--muted);line-height:1.9;margin:14px 0}.access-map{display:block;width:100%;height:300px;border:1px solid var(--line);border-radius:3px;margin:24px 0 16px;background:var(--paper)}.map-link{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 16px;border:1px solid var(--ink);border-radius:3px;background:#fcf8f1;font-size:14px}.map-link:hover{background:#f7f2e9}.access-official{display:inline-block;font-size:13px;text-decoration:underline;text-underline-offset:4px;padding:8px 0}

.pop-couple{mix-blend-mode:normal}

/* 招待状本文の人物画を、淡いピンクの背景に一組として配置する。 */
.couple-portrait{position:relative;isolation:isolate;width:min(100%,320px);margin:22px auto 26px;padding:10px 0 4px}.couple-portrait:before{content:'';position:absolute;z-index:-1;inset:5% 4% 0 8%;border-radius:48% 48% 44% 44%;background:radial-gradient(ellipse at 50% 45%,#f2e2da 0%,#f5ebe1 62%,#fcf9f100 76%)}.couple-portrait .hero-couple{display:block;position:relative;width:100%;height:auto;max-width:none;margin:0;mix-blend-mode:normal}

/* 必須項目と家族追加の操作を、色だけに頼らず明確にする。 */
.field>.required-badge,.attendance-legend .required-badge{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 6px;border:1px solid #c88787;border-radius:3px;background:#fbeceb;color:#a12f3b;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
#add-companion.add-companion-button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:56px;margin-top:20px;padding:14px 10px;border:2px solid #92545e;border-radius:6px;background:#f2dfdf;color:#643333;font-size:15px;font-weight:600;line-height:1.6;text-align:center;box-shadow:0 2px 0 #64333312}.add-companion-button>span{font-size:23px;line-height:1;flex-shrink:0}#add-companion.add-companion-button:hover{background:#ebd1d3}#add-companion.add-companion-button:active{background:#e5c6c9}

.field input::placeholder,.field textarea::placeholder{color:#a4938b;opacity:1}