@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

/* 装飾を加えず、幅と配置だけを指定します。 */
* { box-sizing: border-box; }
.page-layout { width: 100%; max-width: 820px; margin-inline: auto; }
.invitation { width: 100%; max-width: 390px; min-width: 0; margin-inline: auto; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
fieldset { min-width: 0; }
input, textarea, select { max-width: 100%; }
.form-field { display: block; margin-block: 12px; }
.form-field > span { display: block; }
.event-sidebar { display: none; }
@media (min-width: 800px) and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.countdown-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.countdown-unit span { display: block; }
[hidden] { display: none !important; }
@media (min-width: 800px) {
  .page-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 48px; align-items: start; }
  .invitation { margin: 0; }
  .event-sidebar { display: block; min-width: 0; overflow-wrap: anywhere; }
}

/* 招待状の本文とは独立した、お菓子の開封演出。 */
.candy-loader { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #fff9ed; color: #493274; font-family: system-ui, sans-serif; transition: opacity .45s ease; }
.candy-loader.is-leaving { opacity: 0; pointer-events: none; }
.candy-loader__glow { position: absolute; width: min(90vw, 580px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f4dcff 0%, #ffedcb88 45%, transparent 70%); }
.candy-loader__stage { position: relative; width: 340px; height: 340px; display: grid; place-items: center; margin-top: 100px; }
.gummy-pack { position: relative; width: 204px; height: 270px; transform: rotate(-7deg); animation: pack-arrive .6s cubic-bezier(.2,.8,.2,1) both, pack-shake .45s .75s both, pack-drop .7s 2.5s ease-in both; }
.gummy-pack__body { position: absolute; inset: 27px 0 0; display: flex; flex-direction: column; align-items: center; padding: 22px 12px 14px; background: linear-gradient(120deg, #b9a2f5, #7950c3 45%, #996be0 80%, #c2a9fb); border-radius: 2px 2px 18px 18px; box-shadow: inset 6px 0 8px #ffffff45, inset -6px 0 8px #39205b30, 0 14px 28px #49327422; clip-path: polygon(0 2%, 7% 0, 15% 2%, 22% 0, 30% 2%, 38% 0, 46% 2%, 54% 0, 62% 2%, 70% 0, 78% 2%, 86% 0, 94% 2%, 100% 0, 100% 100%, 0 100%); }
.gummy-pack__tear { position: absolute; inset: 0 0 auto; height: 34px; background: repeating-linear-gradient(90deg, #9a76d7 0 3px, #b99ae9 3px 5px); border-radius: 6px 6px 0 0; transform-origin: right bottom; animation: tear-open .65s 1.2s cubic-bezier(.3,0,.3,1) both; }
.gummy-pack__edition { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: #fff; }
.gummy-pack strong { font-size: 35px; font-style: italic; line-height: .97; letter-spacing: -.06em; text-align: center; color: #ffe467; text-shadow: 2px 3px #51317e; margin: 11px 0; }
.gummy-pack__window { display: flex; gap: 9px; align-items: center; justify-content: center; width: 135px; height: 52px; border-radius: 40%; background: #f9eaffaa; }
.gummy-pack__window i, .gummy-burst i { background: var(--c, #f47fa9); border-radius: 42% 42% 35% 35%; box-shadow: inset 4px 4px 5px #ffffff80, inset -3px -4px 5px #58305230; }
.gummy-pack__window i { width: 27px; height: 34px; transform: rotate(-15deg); }
.gummy-pack__window i:nth-child(2) { --c: #ffcd49; transform: rotate(12deg); }
.gummy-pack__window i:nth-child(3) { --c: #7dddaf; }
.gummy-pack__names { margin-top: 12px; font-size: 12px; font-weight: 800; color: #fff; }
.gummy-pack__names small { font-size: 9px; }
.gummy-pack__date { margin-top: 5px; font-size: 10px; color: #fff; letter-spacing: .12em; }
.gummy-burst { position: absolute; left: 50%; top: 80px; z-index: 2; }
.gummy-burst i { position: absolute; left: -18px; top: 0; width: 36px; height: 45px; opacity: 0; animation: gummy-fly 1.25s calc(1.4s + var(--d)) cubic-bezier(.17,.65,.3,1) both; }
.candy-loader__caption { position: relative; font-size: 14px; letter-spacing: .12em; margin: 24px 0; animation: pack-arrive .6s both; }
.candy-loader__skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); background: transparent; border: 0; color: #493274; text-decoration: underline; padding: 12px 20px; cursor: pointer; }
.candy-loader__skip:focus-visible { outline: none; text-decoration-thickness: 3px; }
@keyframes pack-arrive { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes pack-shake { 0%,100% { rotate: 0deg; } 25% { rotate: 5deg; } 50% { rotate: -5deg; } 75% { rotate: 3deg; } }
@keyframes tear-open { to { transform: translate(90px,-110px) rotate(65deg); opacity: 0; } }
@keyframes gummy-fly { 0% { opacity: 0; transform: translate(0,25px) scale(.3); } 12% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--r)) scale(1.25); } }
@keyframes pack-drop { to { translate: 0 85px; rotate: 12deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .candy-loader { display: none; } }

/* 袋を、輪郭のはっきりしたお菓子のイラストに。 */
.gummy-pack__body {
  background: #a17add;
  border: 3px solid #39234f;
  border-radius: 3px 3px 18px 18px;
  box-shadow: 5px 6px 0 #39234f;
  clip-path: none;
}
.gummy-pack__tear {
  background: #ba96ee;
  border: 3px solid #39234f;
  border-radius: 6px 6px 0 0;
}
.gummy-pack__tear::after {
  content: "";
  position: absolute;
  inset: 10px 6px auto;
  border-top: 2px dashed #39234f;
}
.gummy-pack__window {
  background: #f3e4ff;
  border: 2px solid #39234f;
}
.gummy-pack strong {
  -webkit-text-stroke: 1px #39234f;
  text-shadow: 2px 2px #39234f;
}
.gummy-pack__window i {
  border: 2px solid #39234f;
  box-shadow: none;
}

/* 開封後に見える小さなギザギザの切り口。 */
.gummy-pack__body { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.gummy-pack__cut { position: absolute; top: -10px; left: -3px; width: calc(100% + 6px); height: 13px; overflow: visible; }
.gummy-pack__tear { z-index: 1; }

/* 切り離す上側も、袋本体と同じ切断線にそろえる。 */
.gummy-pack__tear { height: 21px; border-bottom: 0; }
.gummy-pack__tear-cut { position: absolute; bottom: -12px; left: -3px; width: calc(100% + 6px); height: 13px; overflow: visible; }

/* グミは袋の背面から飛び出し、袋と重なる部分は隠す。 */
.gummy-burst { z-index: 0; }
.gummy-pack { z-index: 1; }

/* ガヴ公式の見出し書体・紫の光彩・白いボタンを参考にした招待状。 */
:root { --gavv-purple: #a74edc; --gavv-ink: #583f67; }
body { margin: 0; color: var(--gavv-ink); font-family: "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.85; background: #f9f2fd; }
.page-layout { padding-block: 32px; }
.invitation { background: #fff; }
.hero__copy, .section, .footer { padding: 36px 20px; }
.hero__portrait { display: block; width: 100%; }
.hero__copy h1 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: clamp(26px, 7vw, 34px); text-align: center; color: #fff; text-shadow: 0 0 10px var(--gavv-purple), 0 0 3px var(--gavv-purple); line-height: 1.3; margin-bottom: 8px; }
.hero__with, .hero__copy > time { display: block; text-align: center; font-weight: 700; }
.hero__greeting { margin-top: 48px; }
.section-label, .hero__greeting h2 {
  margin: 0 0 6px;
  color: #fff;
  text-align: center;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 6vw, 29px);
  line-height: 1.3;
  letter-spacing: -.025em;
  text-shadow: 0 0 10px #a74edc, 0 0 3px #a74edc;
  overflow-wrap: normal;
}
.section > h2 { margin: 0 0 32px; text-align: center; font-size: 13px; font-weight: 700; color: #8a39b9; }
.hero__greeting h2 { margin-bottom: 28px; }
.details, .family { background: #f9f2fd; }
.schedule, .dress-code { background: #f0f8ff; }
.rsvp { background: #fcf7ff; }
.profile-card { margin-block: 28px; }
.profile-card__role { display: inline-block; padding: 2px 8px; background: var(--gavv-purple); color: #fff; font-weight: 700; }
.profile-card h3 { margin-top: 8px; }
.info-list dd { margin: 0 0 16px; }
.info-list dt { color: #a74edc; font-weight: 900; font-size: 12px; }
.map-embed iframe { width: 100%; height: 240px; border: 0; }
.primary-button, .text-button, .reference-links a, .event-sidebar > .desktop-countdown > a {
  display: block; width: 100%; margin: 24px auto 0; padding: 12px 28px 12px 16px; position: relative;
  border: 0; border-radius: 8px; background: #fff; color: var(--gavv-ink); font: inherit; font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 0 6px #a74edc; cursor: pointer;
}
.primary-button::after, .reference-links a::after, .event-sidebar > .desktop-countdown > a::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #a74edc; font-size: 24px; }
.primary-button:hover, .text-button:hover, .reference-links a:hover { color: #a74edc; }
.primary-button:focus-visible, .text-button:focus-visible, a:focus-visible { outline: 3px solid #a74edc; outline-offset: 4px; }
.reference-links { padding: 0; list-style: none; }
.rsvp-form fieldset { margin: 24px 0; padding: 12px; border: 1px solid #a74edc50; }
.rsvp-form legend { color: #8a39b9; font-weight: 700; }
.required-mark { font-size: 11px; font-weight: 700; color: #8a39b9; }
.form-field input:not([type="radio"]):not([type="file"]), .form-field select, .form-field textarea { width: 100%; padding: 8px; font: inherit; border: 1px solid #cdb5da; border-radius: 4px; background: #fff; color: #583f67; }
.footer { text-align: center; }
.event-sidebar { padding: 0 16px; }
.event-sidebar > h2 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 24px; color: #fff; text-shadow: 0 0 10px #a74edc, 0 0 3px #a74edc; }
@media (max-width: 799px) { .page-layout { padding-block: 0; } }

/* ブラウザ上のレビューコメントを反映。 */
.hero__greeting p { text-align: center; font-weight: 700; }
.dress-colors { display: flex; justify-content: center; gap: 24px; margin-top: 24px; }
.dress-colors span { width: 32px; height: 32px; border-radius: 50%; }
.dress-colors__red { background: #df3636; }
.dress-colors__yellow { background: #f4cd32; }
.dress-colors__brown { background: #805132; }
.profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.profiles .profile-card { min-width: 0; margin: 0; background: #fff; box-shadow: 0 3px #583f6780; }
.profile-card > img, .profile-card__photo-placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.profile-card__photo-placeholder { display: grid; place-items: center; background: #eee7f3; font-size: 11px; }
.profile-card__caption { padding: 12px; }
.profile-card__caption .profile-card__role { margin: 0 0 6px; padding: 0; background: transparent; color: #583f67; font-size: 10px; }
.profile-card__caption h3 { margin: 0; color: #a74edc; font-size: 15px; line-height: 1.6; }
.profile-card__caption h3 span, .profile-card__caption h3 small { display: block; }
.profile-card__caption h3 small { margin-top: 4px; color: #583f67; font-size: 12px; }
.profile-card__caption > p:last-child { margin: 10px 0 0; font-size: 12px; }
.profile-card--child { grid-column: 1 / -1; width: calc((100% - 12px) / 2); justify-self: center; }
@media (min-width: 800px) {
  .invitation { border: 3px solid rgb(167, 78, 220); }
  .event-sidebar {
    position: fixed;
    top: 50%;
    left: calc(max(0px, (100vw - 820px) / 2) + 438px);
    width: min(382px, calc(100vw - 438px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    transform: translateY(-50%);
    padding: 12px 16px;
    text-align: center;
  }
  .event-sidebar .countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .event-sidebar .countdown-unit strong { font-size: 26px; }
  .event-sidebar .countdown-unit span { font-size: 10px; }
}

/* 添付された背景画像を画面全体に表示。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #fff url("./assets/bg-pc.jpg") center / cover no-repeat;
  pointer-events: none;
}
body { isolation: isolate; }

/* 追加レビュー：フォーム色・余白・先頭写真。 */
input[type="radio"] { accent-color: var(--gavv-purple); }
.section.schedule { padding-bottom: 0; }
.schedule .timeline { margin-bottom: 0; }
.hero > .hero__portrait { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; }

/* MVと名前の間の余白を削除。 */
.hero__copy { padding-top: 0; display: flow-root; }
.hero__copy h1 { margin-top: 0; }

/* 会費案内は開催情報と同じ見出し・項目スタイル。 */
#payment-guide-title { margin: 0 0 32px; text-align: center; font-size: 13px; font-weight: 700; color: #8a39b9; }
.payment-summary { margin: 0; }
.payment-summary a { color: var(--gavv-purple); text-decoration: underline; }
.thank-you .text-button { width: fit-content; margin: 28px auto 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--gavv-purple); text-decoration: underline; text-decoration-color: var(--gavv-purple); text-align: center; font-weight: 400; }

/* 字形のベースラインに左右されない中央揃えの矢印。 */
.primary-button::after, .reference-links a::after, .event-sidebar > .desktop-countdown > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 3px solid #a74edc;
  border-right: 3px solid #a74edc;
  transform: translateY(-50%) rotate(45deg);
}

/* 写真選択の補足は必ず次の行に表示。 */
[data-photo-status] { display: block; margin-top: 4px; }

[data-line-links], [data-line-links] section, .companion-link-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-line-links] { gap: 24px; }
[data-line-links] h5 { margin: 0; font-size: 1em; }
[data-line-links] img { display: block; justify-self: center; }
[data-line-links] .primary-button { margin: 0; overflow-wrap: anywhere; }
[data-line-links] [role="status"]:empty { display: none; }
[data-issue-links]:disabled { opacity: .6; cursor: wait; }