/* ============================================================ Web招待状 仮モック スタイル テーマ: 白基調（面は白〜生成り白）× ピンクはアクセント（見出し・線・ボタン・花びら）＋少量ゴールド モバイルファースト（〜599px基準、600px以上でPC調整） ============================================================ */ :root { --white: #ffffff; --sakura-bg: #fdfbfb; /* ほぼ白（面の背景。ピンクは面には使わない） */ --sakura: #f3dde3; /* 淡いピンク（枠線・飾り線） */ --pink: #e79cb2; /* ピンク */ --pink-deep: #c94f7c; /* 濃いめピンク（アクセント） */ --gold: #b99b52; /* ゴールド（少量） */ --ink: #594a4e; /* 本文の墨色（柔らかい黒） */ --ink-soft: #8a777c; /* 補足文字 */ --serif-ja: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; --serif-en: "Cormorant Garamond", "Times New Roman", serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--serif-ja); color: var(--ink); background: var(--white); line-height: 1.9; letter-spacing: 0.06em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.locked { overflow: hidden; height: 100vh; } img { max-width: 100%; display: block; } /* ============================================================ 開封演出（封筒）— 案1「水彩フローラル」（優馬さん確定） demo/封筒デザイン案.html から移植。JSクラス契約は従来どおり （.open / .opening / .fade-out、タイマー 1400ms / 2600ms） ============================================================ */ /* テーマ変数（封筒SVGのグラデ・装飾はここから色を拾う） */ body.env-theme-floral { --env-paper-hi: #fefcf6; /* 生成りホワイト */ --env-paper-lo: #f2ebdb; --env-flap-hi: #faf6eb; --env-flap-lo: #eee5d1; --env-edge: #c9ab6b; /* 細い金線 */ --seal-hi: #e79cb2; --seal-mid: #cf7391; --seal-dk: #a04c6a; --seal-txt: #fff4f1; --hint-c: #b06a83; } #envelope-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; overflow: hidden; /* 背景：淡いグラデ＋上部に光だまり */ background: radial-gradient(120% 85% at 50% 22%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 58%), linear-gradient(168deg, #ffffff 0%, #fdf9f6 55%, #faf0f0 100%); transition: opacity 0.9s ease 0.1s, visibility 0.9s ease 0.1s; } #envelope-overlay.fade-out { opacity: 0; visibility: hidden; } /* 2回目以降／?skip=1（ の bootstrap が html に付ける）：封筒を最初から出さず、スクロールも止めない */ html.intro-static #envelope-overlay { display: none; } html.intro-static body.locked { overflow: auto; height: auto; } /* 舞うバラの花びら（開封前のDOM花びら10枚。開封後はオーバーレイごと消え、canvasの花びらに引き継ぐ） 形：付け根が細く上に広がり、先端に小さな尖り、片側の縁がカールしたバラの花弁（canvasと同じ形をSVG背景で描く） 色：付け根ミディアムピンク→先端淡ピンク、縁は濃いめの輪郭線。 動き：落下＋横流れ＋回転＋表裏のひらひら（rotateY）。大きさは --sc で個別指定（keyframes内のscaleに取り込む） */ .env-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .env-petals span { position: absolute; top: -6%; width: 22px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23dc7a9c'/%3E%3Cstop offset='0.5' stop-color='%23eca6bc'/%3E%3Cstop offset='1' stop-color='%23f6cbd8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12.00,25.55 C19.70,23.90 23.55,14.55 22.45,8.50 C21.90,5.20 21.35,3.55 19.92,3.22 C15.85,1.68 8.70,1.68 4.30,3.55 C2.65,4.10 2.10,5.75 1.55,8.50 C0.45,14.55 4.30,23.90 12.00,25.55 Z' fill='url(%23g)' stroke='%23c45c82' stroke-opacity='0.75' stroke-width='0.9'/%3E%3Cpath d='M19.92,3.22 C15.85,1.68 13.10,1.90 12.00,2.12 C14.75,4.65 18.05,6.30 19.70,8.50 C20.80,6.30 21.35,4.10 19.92,3.22 Z' fill='%23fff6f9' fill-opacity='0.85' stroke='%23c8648a' stroke-opacity='0.6' stroke-width='0.7'/%3E%3Cpath d='M12.00,23.90 Q10.90,14.00 12.00,5.75' fill='none' stroke='%23c8698c' stroke-opacity='0.35' stroke-width='0.6'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.85; animation: petalFall linear infinite; will-change: transform; } @keyframes petalFall { 0% { transform: translate3d(0, -8vh, 0) rotateZ(0deg) rotateY(0deg) scale(var(--sc, 1)); } 25% { transform: translate3d(calc(var(--drift, 40px) * 0.25), 22vh, 0) rotateZ(80deg) rotateY(60deg) scale(var(--sc, 1)); } 50% { transform: translate3d(calc(var(--drift, 40px) * 0.5), 52vh, 0) rotateZ(160deg) rotateY(0deg) scale(var(--sc, 1)); } 75% { transform: translate3d(calc(var(--drift, 40px) * 0.75), 82vh, 0) rotateZ(240deg) rotateY(-60deg) scale(var(--sc, 1)); } 100% { transform: translate3d(var(--drift, 40px), 112vh, 0) rotateZ(320deg) rotateY(0deg) scale(var(--sc, 1)); } } .env-petals span:nth-child(1) { left: 6%; animation-duration: 14s; animation-delay: -3s; --drift: 52px; } .env-petals span:nth-child(2) { left: 16%; animation-duration: 17s; animation-delay: -9s; --drift: -34px; --sc: 0.8; } .env-petals span:nth-child(3) { left: 27%; animation-duration: 12s; animation-delay: -6s; --drift: 44px; } .env-petals span:nth-child(4) { left: 38%; animation-duration: 18s; animation-delay: -1s; --drift: -52px; --sc: 1.15; } .env-petals span:nth-child(5) { left: 49%; animation-duration: 13s; animation-delay: -11s; --drift: 30px; --sc: 0.7; } .env-petals span:nth-child(6) { left: 58%; animation-duration: 16s; animation-delay: -5s; --drift: 60px; } .env-petals span:nth-child(7) { left: 68%; animation-duration: 12.5s; animation-delay: -8s; --drift: -40px; --sc: 0.85; } .env-petals span:nth-child(8) { left: 78%; animation-duration: 15s; animation-delay: -2s; --drift: 36px; --sc: 1.1; } .env-petals span:nth-child(9) { left: 88%; animation-duration: 17.5s; animation-delay: -13s; --drift: -48px; } .env-petals span:nth-child(10) { left: 95%; animation-duration: 13.5s; animation-delay: -7s; --drift: 26px; --sc: 0.75; } .envelope { position: relative; width: min(90vw, 420px); /* スマホは画面幅の約90%（左右5%ずつ余白）、PCは420px上限 */ aspect-ratio: 300 / 210; cursor: pointer; filter: drop-shadow(0 18px 30px rgba(160, 90, 110, 0.2)) drop-shadow(0 3px 6px rgba(160, 90, 110, 0.12)); } .envelope svg { display: block; width: 100%; height: 100%; } /* 封筒の内側（開いたフタの下に見える面） */ .env-back { position: absolute; inset: 0; z-index: 0; border-radius: 6px; background: linear-gradient(180deg, var(--env-flap-lo), var(--env-paper-lo)); } /* 封筒の胴体（前面）：SVGで紙のグラデ・折り線・質感を描く */ .env-body { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* フタ：表（紙）と裏（水彩ウォッシュのライナー）の2面。 3D回転（rotateX＋preserve-3d＋backface-visibility）は iOS Safari で裏面が隠れず、閉じた状態でも ピンクの裏地が逆さに見える崩れが起きたため廃止。代わりに 2D の scaleY だけで「上辺を軸にめくれる」動きを作る： 前半 0.425s：表面が上辺（transform-origin: top）に向かって scaleY 1→0 に潰れる（＝90度まで起きる） 後半 0.425s：裏面が上辺を軸に scaleY 0→-1 に伸びる（＝90→180度、上下反転して封筒の上に開いた状態） 透視なしの rotateX の見え方（高さ = cos θ）と同じで、どのブラウザでも同じ結果になる。 閉じた状態は表面だけ（裏面は高さ0）、開いた状態は封筒の上辺の上に裏面が頂点を上にして見える。 */ .env-flap { position: absolute; left: 0; top: 0; width: 100%; height: 58.1%; z-index: 3; pointer-events: none; transition: z-index 0s linear 0.34s; /* 半分開いてから奥に回す */ } .env-flap-face { position: absolute; inset: 0; transform-origin: 50% 0; /* 上辺（封筒との折り目）を軸に */ will-change: transform; } .env-flap-front { z-index: 2; transform: scaleY(1); transition: transform 0.425s cubic-bezier(0.55, 0, 1, 0.45); /* 起き上がる前半：だんだん速く */ } .env-flap-back { z-index: 1; transform: scaleY(0); /* 閉じている間は高さ0（見えない） */ transition: transform 0.425s cubic-bezier(0, 0.55, 0.45, 1) 0.425s; /* 倒れ込む後半：だんだん遅く */ } .envelope.open .env-flap-front { transform: scaleY(0); } .envelope.open .env-flap-back { transform: scaleY(-1); } .envelope.open .env-flap { z-index: 0; } /* 封蝋（開封ボタン） */ .env-seal { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 5; width: clamp(72px, 21vw, 84px); height: clamp(72px, 21vw, 84px); border: none; background: none; padding: 0; cursor: pointer; filter: drop-shadow(0 3px 5px rgba(120, 50, 70, 0.3)); transition: transform 0.45s cubic-bezier(0.5, 0, 0.7, 0.4), opacity 0.4s ease; } .envelope.open .env-seal { transform: translate(-50%, -50%) scale(0.15) rotate(-14deg); opacity: 0; pointer-events: none; } .seal-wax { width: 100%; height: 100%; } .env-hint { color: var(--hint-c); font-size: 0.85rem; letter-spacing: 0.24em; animation: hintPulse 2.4s ease-in-out infinite; transition: opacity 0.4s ease; } @keyframes hintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* animation(hintPulse)がopacity指定より優先されるため、開封時はanimationも止める */ #envelope-overlay.opening .env-hint { opacity: 0; animation: none; } @media (prefers-reduced-motion: reduce) { .env-petals span { animation: none; display: none; } .env-hint { animation: none; } .envelope, .env-flap, .env-flap-face, .env-seal { transition-duration: 0.01s; transition-delay: 0s; } } /* ============================================================ モザイクフォトアート：飛散・整列アニメ用の全画面 canvas（封筒より上に重ねる） 完成図そのものは表紙（#hero .hero-mosaic）に描く ============================================================ */ #mosaic-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 110; pointer-events: none; } #mosaic-fx[hidden] { display: none; } .mosaic-skip { position: fixed; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 111; padding: 8px 14px; border: 1px solid rgba(176, 106, 131, 0.35); border-radius: 999px; background: rgba(255,255,255,0.7); color: var(--hint-c, #b06a83); font-size: 0.75rem; letter-spacing: 0.2em; cursor: pointer; } .mosaic-skip[hidden] { display: none; } /* ============================================================ 花びら背景 ============================================================ */ #petals { position: fixed; inset: 0; z-index: 5; pointer-events: none; } #content { position: relative; z-index: 2; } /* ============================================================ 共通セクション ============================================================ */ .section { max-width: 640px; margin: 0 auto; padding: 88px 24px; } .sec-head { text-align: center; margin-bottom: 44px; } .sec-en { font-family: var(--serif-en); font-size: 0.8rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); } .sec-ja { font-size: 1.45rem; font-weight: 500; color: var(--pink-deep); margin-top: 6px; letter-spacing: 0.2em; } .sec-line { display: block; width: 46px; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .tentative-tag { text-align: center; font-size: 0.72rem; color: var(--ink-soft); background: var(--sakura-bg); border: 1px dashed var(--sakura); border-radius: 999px; padding: 2px 14px; width: fit-content; margin: 0 auto 26px; letter-spacing: 0.1em; } /* スクロールでふわっと表示 */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s ease; } .reveal.visible { opacity: 1; transform: none; } /* ============================================================ 1. ヒーロー ============================================================ */ #hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--white); /* モザイクの縦横比（layout.js の cols/rows。JS がロード後に上書きする） */ --mcols: 15; --mrows: 18; } /* 表紙の背景＝モザイク。縦横比は固定（cover で切ると和傘が切れるので、絵を丸ごと見せる） スマホ（縦長）：横幅いっぱい・上詰め。文字は下部に白グラデのベール越しに重ねる */ .hero-mosaic { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: var(--mcols) / var(--mrows); } /* 素材もベース写真も読めない時の受け皿（淡いグラデ） */ #hero.mosaic-nophoto .hero-mosaic { background: linear-gradient(168deg, #fbf3f4 0%, #f7eef0 55%, #f3e6ea 100%); } .hero-mosaic canvas { display: block; width: 100%; height: 100%; } /* スマホ：モザイクの下端を白に溶かして、表紙の文字へつなぐ */ .hero-mosaic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 66%, rgba(255,255,255,0.7) 86%, rgba(255,255,255,1) 100%); } /* ベース写真：ロード中は 1（写真そのもの）、モザイクが描けたら薄く重ねてピントを合わせる（不透明度は JS が入れる） */ .hero-ghost { position: absolute; inset: 0; background-size: 100% 100%; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; } /* 写真の上に白→透明のベール（文字を読みやすく＆白基調に馴染ませる） */ .hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.35) 62%, rgba(255, 255, 255, 0.85) 78%, rgba(255, 255, 255, 1) 100%); } .hero-inner { position: relative; text-align: center; padding: 0 16px 32px; width: 100%; transition: opacity 1.2s ease, transform 1.2s ease; } /* 文字とカウントダウンを乗せる半透明の白パネル。モザイクの真上に来ても読めるように（実機 iPhone 縦画面で文字が溶けていた対策） 後ろのモザイクはうっすら透ける。backdrop-filter 非対応でも不透明度 0.85 の白で読める */ .hero-panel { display: inline-block; width: 100%; max-width: 420px; padding: 22px 16px 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 28px rgba(89, 74, 78, 0.10); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); } /* 初回訪問：演出が終わるまで表紙の文字は伏せておき、完成後にふわっと乗せる */ body.intro-pending .hero-inner { opacity: 0; transform: translateY(14px); } /* PC・横長画面：左に高さいっぱいのモザイク（幅＝高さ×15/18）、右に文字 */ @media (min-width: 900px) and (min-aspect-ratio: 5/4) { #hero { align-items: center; justify-content: flex-end; --mosaic-w: calc(100vh * var(--mcols) / var(--mrows)); --mosaic-w: calc(100svh * var(--mcols) / var(--mrows)); } .hero-mosaic { width: var(--mosaic-w); height: calc(var(--mosaic-w) * var(--mrows) / var(--mcols)); aspect-ratio: auto; } .hero-mosaic::after { display: none; } /* PC は右端を hero-veil で溶かす */ .hero-veil { background: linear-gradient(90deg, rgba(255,255,255,0) calc(var(--mosaic-w) - 90px), rgba(255,255,255,0.9) var(--mosaic-w), rgba(255,255,255,1) calc(var(--mosaic-w) + 1px)); } .hero-inner { width: calc(100% - var(--mosaic-w)); padding: 40px 32px; } .hero-panel { max-width: 560px; padding: 30px 28px 32px; } .hero-names { font-size: clamp(2rem, 4.2vw, 3.6rem); } } /* 表紙の文字色：モザイクの上でも読めるよう濃いめ・太め（パネル背景に対してコントラスト 4.5:1 以上。verify.js が実測） */ :root { --hero-gold: #6e561b; /* 濃いゴールド（WEDDING INVITATION・&） */ --hero-pink: #9c345a; /* 濃いピンク（名前・挙式まで） */ --hero-ink: #3a3a3a; /* 日付・会場・キャプション */ } .hero-eyebrow { font-family: var(--serif-en); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--hero-gold); } .hero-names { font-family: var(--serif-en); font-weight: 700; font-size: clamp(2.4rem, 10vw, 3.6rem); color: var(--hero-pink); line-height: 1.25; margin-top: 6px; } .hero-names .amp { font-style: italic; font-weight: 500; color: var(--hero-gold); font-size: 0.7em; margin: 0 0.12em; } .hero-date { font-family: var(--serif-en); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.24em; color: var(--hero-ink); margin-top: 10px; } .hero-date .dow { font-size: 0.8em; color: var(--hero-ink); } .hero-venue { font-family: var(--serif-en); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.34em; color: var(--hero-ink); margin-top: 2px; } /* カウントダウン（めくりカレンダー風） */ .countdown { margin-top: 26px; } .countdown-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.3em; color: var(--hero-pink); margin-bottom: 10px; } .flip-row { display: flex; justify-content: center; gap: 10px; } .flip-unit { text-align: center; } .flip-card { position: relative; min-width: 58px; padding: 10px 8px; background: linear-gradient(180deg, #ffffff 0%, #fdfafb 49%, #f8f0f2 51%, #fffdfd 100%); border: 1px solid var(--sakura); border-radius: 8px; font-family: var(--serif-en); font-weight: 600; font-size: 1.6rem; color: var(--hero-pink); line-height: 1; box-shadow: 0 3px 10px rgba(201, 79, 124, 0.10); transform-style: preserve-3d; } /* めくりカレンダーの中央の折り目線 */ .flip-card::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: rgba(201, 79, 124, 0.18); } .flip-card.flip { animation: flipTick 0.55s ease; } @keyframes flipTick { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(-88deg); } 100% { transform: rotateX(0deg); } } .flip-caption { display: block; font-family: var(--serif-en); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hero-ink); margin-top: 6px; } .scroll-cue { margin-top: 26px; } .scroll-cue-text { font-family: var(--serif-en); font-size: 0.7rem; letter-spacing: 0.34em; color: var(--ink-soft); text-transform: uppercase; } .scroll-cue-arrow { display: block; width: 1px; height: 34px; margin: 8px auto 0; background: linear-gradient(180deg, var(--pink-deep), transparent); animation: cueDrop 1.8s ease-in-out infinite; } @keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(1); opacity: 0; } } /* ============================================================ 2. ごあいさつ ============================================================ */ #greeting { text-align: center; } .greeting-text p { margin-bottom: 1.5em; font-size: 0.95rem; } /* 頭語「謹啓」（左寄せ）・結語「謹白」（右寄せ） */ .greeting-open { text-align: left; letter-spacing: 0.3em; } .greeting-close { text-align: right; letter-spacing: 0.3em; } /* 発送月（式場見本の位置：結語の後・連名の上） */ .greeting-date { margin-top: 2.2em; margin-bottom: 0.4em !important; font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.12em; } /* 差出人の連名（挨拶文の結び） */ .greeting-names { font-size: 1.02rem; letter-spacing: 0.14em; } .photo-accent { margin: 44px auto 0; max-width: 420px; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px rgba(201, 79, 124, 0.14); } .photo-accent img { width: 100%; height: auto; } /* height属性（レイアウトシフト防止用）を上書きして比率はCSSで決める */ .photo-accent.small { max-width: 260px; margin: 0 auto 34px; } .photo-accent.small img { aspect-ratio: 1 / 1; object-fit: cover; } /* ============================================================ 3. ふたりの紹介 ============================================================ */ #profile { background: var(--white); max-width: none; border-top: 1px solid var(--sakura); border-bottom: 1px solid var(--sakura); } #profile > .profile-grid, #profile > .sec-head { max-width: 640px; margin-left: auto; margin-right: auto; } #profile .sec-head { margin-bottom: 44px; } .profile-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } .profile-card { text-align: center; } .profile-photo { width: min(72vw, 300px); margin: 0 auto; border-radius: 50% 50% 10px 10px / 42% 42% 10px 10px; overflow: hidden; border: 5px solid var(--white); box-shadow: 0 12px 26px rgba(201, 79, 124, 0.16); } .profile-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .profile-role { font-family: var(--serif-en); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.75rem; color: var(--gold); margin-top: 20px; } .profile-role span { display: block; font-family: var(--serif-ja); font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.3em; margin-top: 2px; } .profile-name { font-size: 1.35rem; font-weight: 500; color: var(--pink-deep); letter-spacing: 0.16em; margin-top: 8px; } .profile-roman { display: block; font-family: var(--serif-en); font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.2em; margin-top: 2px; } .profile-msg { font-size: 0.88rem; margin-top: 12px; color: var(--ink); } .profile-msg + .profile-msg { margin-top: 18px; } /* ============================================================ 4. 会場案内 ============================================================ */ .venue-card { background: var(--white); border: 1px solid var(--sakura); border-radius: 12px; padding: 30px 22px; box-shadow: 0 10px 26px rgba(201, 79, 124, 0.08); } .venue-name { text-align: center; font-size: 1.3rem; color: var(--pink-deep); letter-spacing: 0.2em; margin-bottom: 18px; } .venue-info { margin-bottom: 22px; } .venue-info > div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--sakura); font-size: 0.88rem; } .venue-info dt { flex: 0 0 4.5em; color: var(--gold); letter-spacing: 0.14em; } .venue-info dd { flex: 1; } .nowrap { white-space: nowrap; } /* 番地などの途中改行防止 */ /* 320px 級（iPhone SE 1st 等）：dd が 149px しか無く「2026年10月17日（土）」（161px）が入らないので、カード左右余白と dt との間隔を詰めて dd を 165px にする */ @media (max-width: 340px) { .venue-card { padding-left: 16px; padding-right: 16px; } .venue-info > div { gap: 10px; } } /* 受付のご案内（挙式15分前までに受付） */ .venue-note { font-size: 0.85rem; color: var(--ink-soft); line-height: 2; margin-bottom: 22px; } .map-wrap { border-radius: 8px; overflow: hidden; border: 1px solid var(--sakura); } .map-wrap iframe { display: block; } /* ============================================================ 5. 出欠フォーム ============================================================ */ #rsvp { text-align: center; } .rsvp-note { font-size: 0.9rem; margin-bottom: 14px; } #rsvp-form { text-align: left; background: var(--white); border: 1px solid var(--sakura); border-radius: 12px; padding: 28px 22px; box-shadow: 0 10px 26px rgba(201, 79, 124, 0.08); } .attend-choice { border: none; margin-bottom: 22px; } .attend-choice legend { font-size: 0.85rem; letter-spacing: 0.14em; margin-bottom: 10px; color: var(--ink); } .req { font-size: 0.64rem; color: #fff; background: var(--pink-deep); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; letter-spacing: 0.08em; } .attend-buttons { display: flex; gap: 12px; } .attend-btn { flex: 1; cursor: pointer; } .attend-btn input { position: absolute; opacity: 0; pointer-events: none; } .attend-face { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border: 1.5px solid var(--sakura); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 1.02rem; letter-spacing: 0.2em; transition: all 0.25s ease; } .attend-face small { font-family: var(--serif-en); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--ink-soft); text-transform: uppercase; } .attend-btn input:checked + .attend-face { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; box-shadow: 0 6px 16px rgba(201, 79, 124, 0.3); } .attend-btn input:checked + .attend-face small { color: rgba(255, 255, 255, 0.8); } .attend-btn input:focus-visible + .attend-face { outline: 2px solid var(--gold); outline-offset: 2px; } .field { margin-bottom: 18px; } /* 姓・名／せい・めい の横並び。375px でも1欄 ≒150px、320px でも ≒125px あるので折り返さず横並びのまま */ .field-row { display: flex; gap: 10px; } .field-row .field { flex: 1 1 0; min-width: 0; } .field-row .field input { min-width: 0; } /* 任意バッジ（メッセージだけ）。必須バッジ .req と同じ形で色を控えめに */ .opt { font-size: 0.64rem; color: var(--ink-soft); background: #f3ecee; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; letter-spacing: 0.08em; } /* 未入力エラー：足りない欄・選択肢を赤枠で示す（JS が .is-invalid を付け、入力・選択したら外す） */ .field input.is-invalid, .field textarea.is-invalid { border-color: #d0607f; box-shadow: 0 0 0 3px rgba(208, 96, 127, 0.16); } .attend-choice.is-invalid .attend-face, .choice-field.is-invalid .choice-face { border-color: #d0607f; } .field label { display: block; font-size: 0.85rem; letter-spacing: 0.14em; margin-bottom: 6px; } .field input, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--sakura); border-radius: 8px; background: #fffafb; font-family: var(--serif-ja); font-size: 16px; /* iOSのズーム防止のため16px以上 */ color: var(--ink); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(231, 156, 178, 0.2); } .field textarea { resize: vertical; } /* あり／なし の2択（アレルギー・お連れ様）。ご出欠ボタンの小さい版。「あり」を選ぶと下に詳細欄が出る */ .choice-field { border: none; padding: 0; margin: 0 0 18px; } .choice-field legend { display: block; font-size: 0.85rem; letter-spacing: 0.14em; margin-bottom: 6px; color: var(--ink); } .choice-buttons { display: flex; gap: 10px; } .choice-btn { flex: 1; cursor: pointer; position: relative; } .choice-btn input { position: absolute; opacity: 0; pointer-events: none; } .choice-face { display: block; text-align: center; padding: 10px 6px; border: 1.5px solid var(--sakura); border-radius: 8px; background: #fffafb; color: var(--ink); font-size: 0.95rem; letter-spacing: 0.2em; transition: all 0.25s ease; } .choice-btn input:checked + .choice-face { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; box-shadow: 0 4px 12px rgba(201, 79, 124, 0.25); } .choice-btn input:focus-visible + .choice-face { outline: 2px solid var(--gold); outline-offset: 2px; } .sub-field { margin-top: 12px; } .sub-field label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 6px; color: var(--ink); } .field-help { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 6px; line-height: 1.7; } .sp-only { display: none; } @media (max-width: 420px) { .sp-only { display: inline; } } /* ボット対策のダミー欄：画面外に置く（display:none だと一部のボットが埋めないため） */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .submit-btn[disabled] { opacity: 0.6; cursor: wait; } .form-error { line-height: 1.8; color: #b3405f; background: #fdeef2; border: 1px solid #f3c6d3; border-radius: 8px; font-size: 0.82rem; text-align: center; padding: 8px; margin-bottom: 14px; } .submit-btn { display: block; width: 100%; padding: 15px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--pink-deep) 0%, #d9688f 100%); color: #fff; font-family: var(--serif-ja); font-size: 1rem; letter-spacing: 0.3em; cursor: pointer; box-shadow: 0 8px 20px rgba(201, 79, 124, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .submit-btn:active { transform: scale(0.97); } /* ============================================================ 6. 結果演出 ============================================================ */ #result { text-align: center; min-height: 60vh; } /* 直筆メッセージ（2行・横長 1600x464）。スマホは横幅いっぱい（左右 3vw ずつ）、PC はセクション幅（592px）より広い 720px まで （中央寄せは margin-left で。transform は余韻アニメが使うのでここでは使わない） */ #thanks-svg { width: min(94vw, 720px); margin: 6px 0 4px calc(50% - min(47vw, 360px)); display: block; transform-origin: center; } /* マスクの各ストロークはJSがdasharray/offset（＋visibility）を設定して1画ずつ「書く」。 JSが動くまでは visibility:hidden で完全非表示にして、直筆画像が一瞬見えるのを防ぐ。 ※以前の「stroke-dasharray: 0 999999」は iOS Safari だと 0 長ダッシュの丸キャップが 1点だけ描かれ、線の始点に黒い点が見えるので使わない */ .thanks-strokes path { visibility: hidden; } /* 書き終わりの余韻：ふわっと軽くふくらんで戻る */ #thanks-svg.done { animation: thanks-settle 1s ease-in-out; } @keyframes thanks-settle { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { #thanks-svg.done { animation: none; } } .result-msg { font-size: 0.95rem; margin-top: 22px; } .result-decline-heart { font-size: 2.2rem; color: var(--pink); margin-bottom: 8px; } .back-btn { margin-top: 44px; padding: 10px 26px; border: 1px solid var(--sakura); border-radius: 999px; background: var(--white); color: var(--ink-soft); font-family: var(--serif-ja); font-size: 0.8rem; letter-spacing: 0.12em; cursor: pointer; } /* ============================================================ フッター ============================================================ */ #site-foot { text-align: center; padding: 60px 20px 46px; background: var(--white); border-top: 1px solid var(--sakura); } .foot-names { font-family: var(--serif-en); font-size: 1.3rem; color: var(--pink-deep); } .foot-date { font-family: var(--serif-en); font-size: 0.85rem; letter-spacing: 0.3em; color: var(--ink-soft); } /* ============================================================ PC（600px〜） ============================================================ */ @media (min-width: 600px) { .section { padding: 110px 24px; } .profile-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .profile-photo { width: 100%; max-width: 280px; } .flip-card { min-width: 68px; font-size: 1.9rem; } .venue-card { padding: 38px 34px; } #rsvp-form { padding: 36px 34px; } } /* ============================================================ 動きを減らす設定の人への配慮 ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .flip-card.flip { animation: none; } .scroll-cue-arrow, .env-hint { animation: none; } .hero-inner, .hero-ghost { transition: none; } }