/* @version v0070 | 2026-06-23 | Photo-Wedding LP | https://photo-wedding.nfz33.com */ /* CTA パルスアニメーション */ @keyframes pulse-gold { 0%, 100% { box-shadow: 0 4px 20px rgba(184,151,96,0.4); } 50% { box-shadow: 0 4px 32px rgba(184,151,96,0.8), 0 0 0 4px rgba(184,151,96,0.15); } } /* フォントは index.html の 内 で並列ロード（@importはレンダーブロッキングのため削除） */ :root { --cream: #f8f3ec; --beige: #ede6d8; --gold: #b89760; --gold-light: #d4b98a; --dark: #2a2622; --brown: #5c4a36; --green: #5a6b52; --white: #ffffff; --gray: #888; --border: #d8cfc2; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; } body { font-family:'Noto Sans JP',sans-serif; background:var(--white); color:var(--dark); font-weight:300; overflow-x:hidden; } a { color:inherit; text-decoration:none; } /* URGENCY */ .urgency-bar { background:#dde9f4; color:#33536f; text-align:center; padding:9px 20px; font-size:12px; letter-spacing:0.1em; position:sticky; top:0; z-index:300; } .urgency-bar span { color:#1f3f5c; font-weight:700; } .urgency-bar span { color:#ffd700; font-weight:500; } /* HEADER */ .site-header { background:rgba(255,255,255,0.97); padding:10px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:38px; z-index:200; border-bottom:1px solid var(--border); backdrop-filter:blur(8px); } .header-logos { display:flex; align-items:center; gap:0; flex:1; justify-content:space-around; } .logo-text { font-family:'Cormorant Garamond',serif; font-size:10px; letter-spacing:0.12em; color:var(--brown); line-height:1.6; flex:1; text-align:center; white-space:nowrap; } .logo-divider { width:1px; height:28px; background:var(--border); } .header-badge { background:var(--gold); color:#fff; font-size:10px; padding:5px 14px; letter-spacing:0.08em; font-family:'Cormorant Garamond',serif; } /* HERO */ .hero { display:flex; min-height:88vh; position:relative; overflow:hidden; } .hero-left { width:38%; background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 40px; position:relative; z-index:2; } .hero-left::after { content:''; position:absolute; right:-32px; top:0; bottom:0; width:64px; background:var(--white); clip-path:polygon(0 0,0 100%,100% 100%); } .hero-script { font-family:'Great Vibes',cursive; font-size:54px; color:var(--gold); line-height:1.2; margin-bottom:16px; } .hero-title-v { writing-mode:vertical-rl; font-family:'Noto Serif JP',serif; font-size:13px; letter-spacing:0.38em; color:var(--brown); line-height:2.2; margin-bottom:32px; } .hero-badge { background:var(--gold); color:#fff; font-size:11px; padding:10px 24px; letter-spacing:0.08em; text-align:center; line-height:1.8; } .hero-badge strong { font-size:20px; display:block; font-weight:400; } .hero-right { flex:1; background:url(image/hero-image.webp) center center / cover no-repeat; position:relative; display:flex; align-items:flex-end; padding:40px; } .hero-right-logo { font-family:'Cormorant Garamond',serif; color:rgba(255,255,255,0.75); font-size:11px; letter-spacing:0.18em; line-height:2.2; } .hero-watermark { position:absolute; top:44px; right:44px; font-family:'Cormorant Garamond',serif; font-style:italic; color:rgba(255,255,255,0.18); font-size:56px; line-height:1; } /* SECTIONS */ .section { padding:80px 40px; } .section-title { text-align:center; margin-bottom:52px; } .section-title .en { font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--gold); display:block; font-weight:300; font-style:italic; } .section-title .ja { font-size:11px; letter-spacing:0.28em; color:var(--gray); display:block; margin-top:6px; } .section-title .ornament { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; } .section-title .ornament::before,.section-title .ornament::after { content:''; width:40px; height:1px; background:var(--gold); } .section-title .ornament span { color:var(--gold); font-size:10px; } /* PLANS */ .plans-section { background:var(--cream); } .plans-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:1320px; margin:0 auto; } .plan-card { border-radius:2px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.07); display:flex; flex-direction:column; } .plan-card[data-p="s"] { background:#e7eef1; } .plan-card[data-p="a"] { background:#f5e4e4; } .plan-card[data-p="b"] { background:#deeee8; } .plan-card[data-p="c"] { background:#f5eddc; } .plan-card[data-p="d"] { background:#ece4f2; } /* Plan head */ .plan-card-head { padding:18px 16px 14px; text-align:left; } .plan-oval { display:inline-block; border:1.5px solid var(--brown); border-radius:50px; padding:4px 16px; font-family:'Cormorant Garamond',serif; font-size:13px; letter-spacing:0.08em; color:var(--brown); margin-bottom:10px; font-style:italic; } .plan-oval .plan-label { font-style:normal; font-size:11px; letter-spacing:0.1em; } .plan-card[data-p="b"] .plan-oval { border-color:#3a7a62; color:#3a7a62; } .plan-card[data-p="c"] .plan-oval { border-color:#8a7040; color:#8a7040; } .plan-card[data-p="d"] .plan-oval { border-color:#6a4a8a; color:#6a4a8a; } .plan-desc { font-size:11px; line-height:1.8; color:#555; margin-bottom:12px; } /* Price display */ .plan-price-wrap { margin-bottom:4px; } .plan-price-regular { display:flex; align-items:baseline; gap:6px; font-size:10px; color:#888; margin-bottom:2px; } .plan-price-regular .reg-label { white-space:nowrap; } .plan-price-regular .reg-num { font-family:'Cormorant Garamond',serif; font-size:16px; text-decoration:line-through; color:#aaa; } .plan-price-regular .reg-tax { font-size:9px; color:#aaa; } .plan-price-arrow { font-size:14px; color:var(--gold); margin:2px 0; } .plan-price-special { display:flex; align-items:baseline; gap:4px; } .plan-price-special .sp-yen { font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--dark); } .plan-price-special .sp-num { font-family:'Cormorant Garamond',serif; font-size:36px; color:var(--dark); font-weight:300; line-height:1; } .plan-price-special .sp-tax { font-size:9px; color:#888; line-height:1.4; } /* Plan contents */ .plan-body { padding:14px 14px 16px; flex:1; } .plan-plus { text-align:center; font-size:18px; color:var(--gold); font-weight:300; margin:8px 0 6px; } .plan-icons { display:flex; flex-wrap:wrap; gap:8px; } .plan-icon-item { display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; } .plan-icon-box { width:52px; height:52px; background:rgba(255,255,255,0.7); border:1px solid rgba(184,151,96,0.3); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:20px; padding:4px; } .plan-icon-box svg { max-width:100%; max-height:100%; width:auto; height:auto; } .plan-icon-label { font-size:9px; color:#555; text-align:center; line-height:1.3; max-width:48px; } .plan-icon-badge { position:absolute; top:-5px; right:-5px; background:var(--gold); color:#fff; font-size:8px; padding:1px 4px; border-radius:2px; white-space:nowrap; } .plan-icon-count { font-size:9px; color:var(--brown); font-weight:500; } /* Family banner */ .family-banner { background:linear-gradient(90deg, #7a6040 0%, #9a7a52 100%); color:#fff; padding:14px 20px; margin-top:12px; font-size:13px; font-weight:500; letter-spacing:0.05em; display:flex; align-items:center; gap:10px; } .plan-tag { font-size:9px; background:var(--gold); color:#fff; padding:1px 5px; border-radius:2px; } /* BENEFITS */ .benefits-bar { background:var(--dark); color:var(--white); padding:44px 40px; text-align:center; } .benefits-bar h3 { font-family:'Cormorant Garamond',serif; font-size:18px; letter-spacing:0.22em; margin-bottom:26px; color:var(--gold-light); font-style:italic; } .benefits-list { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; max-width:900px; margin:0 auto; list-style:none; } .benefits-list li { font-size:12px; letter-spacing:0.08em; padding-left:14px; position:relative; } .benefits-list li::before { content:'◆'; position:absolute; left:0; color:var(--gold); font-size:8px; top:3px; } /* PRIVATE */ .private-section { background:linear-gradient(rgba(42,55,40,0.65),rgba(42,55,40,0.65)), url("image/party-image.webp") center center / cover no-repeat; color:#fff; padding:80px 40px; text-align:center; } .private-section .en { font-family:'Great Vibes',cursive; font-size:60px; color:var(--gold-light); display:block; } .private-section .sub { font-size:11px; letter-spacing:0.3em; color:rgba(255,255,255,0.6); margin-top:8px; display:block; } .private-section p { font-size:13px; line-height:2.4; color:rgba(255,255,255,0.82); max-width:560px; margin:24px auto 0; letter-spacing:0.05em; } /* MEAL */ .meal-section { background:var(--beige); } .meal-inner { max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:16px; } .meal-card-std { background:#f5e4e8; border:1px solid #e0c8cc; padding:28px 32px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; } .meal-row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .meal-card-sub { background:#f0ece4; border:1px solid #d8d0c4; padding:24px 26px; } .meal-oval { display:inline-block; border:1.5px solid var(--brown); border-radius:50px; padding:5px 18px; font-family:'Cormorant Garamond',serif; font-size:12px; letter-spacing:0.08em; color:var(--brown); font-style:italic; margin-bottom:10px; white-space:nowrap; } .meal-oval .meal-plan-label { font-style:normal; } .meal-catch { font-size:13px; color:var(--dark); letter-spacing:0.05em; white-space:nowrap; text-align:center; } .meal-price-row { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; justify-content:center; } .meal-per-label { font-size:12px; color:var(--dark); } .meal-price-num { font-family:'Cormorant Garamond',serif; font-size:46px; color:var(--gold); font-weight:300; line-height:1; } .meal-plus-tax { font-size:13px; color:var(--dark); } .meal-tax-note { font-size:10px; color:#888; line-height:1.7; } .meal-free { font-size:13px; color:var(--dark); } .meal-free strong { color:var(--gold); } .meal-price-sm-row { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; margin-bottom:6px; } .meal-price-sm { font-family:'Cormorant Garamond',serif; font-size:40px; color:var(--gold); font-weight:300; line-height:1; } .meal-free-sm { font-size:12px; color:var(--dark); } .meal-free-sm strong { color:var(--gold); } .meal-footnote { font-size:11px; color:#777; text-align:center; } /* REASONS */ .reasons-section { background:var(--white); } .reasons-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:36px; max-width:840px; margin:0 auto; } .reason-item { display:flex; gap:18px; align-items:flex-start; } .reason-num { font-family:'Cormorant Garamond',serif; font-size:52px; color:var(--gold); line-height:1; font-weight:300; flex-shrink:0; width:52px; } .reason-body h4 { font-size:14px; font-weight:500; letter-spacing:0.08em; margin-bottom:8px; color:var(--brown); } .reason-body p { font-size:12px; line-height:2.1; color:#666; } /* FLOW */ .flow-section { background:var(--cream); } .flow-steps { display:flex; max-width:900px; margin:0 auto; position:relative; } .flow-steps::before { content:''; position:absolute; top:35px; left:12%; right:12%; height:1px; background:var(--gold); opacity:0.5; } .flow-step { flex:1; text-align:center; padding:0 10px; } .flow-circle { width:70px; height:70px; border:1.5px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; background:var(--white); position:relative; z-index:1; } .flow-circle span { font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--gold); } .flow-step h4 { font-size:13px; font-weight:500; margin-bottom:6px; color:var(--brown); } .flow-step p { font-size:11px; color:#777; line-height:1.8; } /* VOICES */ .voices-section { background:var(--white); } .voices-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:960px; margin:0 auto; } .voice-card { background:var(--cream); border:1px solid var(--border); padding:26px 22px; position:relative; } .voice-card::before { content:'\201C'; font-family:'Cormorant Garamond',serif; font-size:72px; color:var(--gold); opacity:0.2; position:absolute; top:2px; left:12px; line-height:1; } .voice-stars { color:var(--gold); font-size:13px; margin-bottom:10px; } .voice-text { font-size:12px; line-height:2.1; color:#555; margin-bottom:14px; } .voice-name { font-size:11px; color:var(--brown); letter-spacing:0.1em; text-align:right; } /* MID CTA */ .mid-cta { background:var(--beige); text-align:center; padding:60px 40px; } .mid-cta h3 { font-family:'Cormorant Garamond',serif; font-size:28px; font-style:italic; color:var(--brown); margin-bottom:8px; } .mid-cta p { font-size:12px; color:var(--gray); margin-bottom:28px; letter-spacing:0.1em; } .cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .cta-btn { display:inline-flex; align-items:center; gap:8px; background:var(--dark); color:#fff; padding:14px 32px; font-size:13px; letter-spacing:0.1em; transition:background 0.2s; } .cta-btn:hover { background:var(--brown); } /* ===== FAQ ===== */ .faq-section { background:var(--cream); } .faq-list { max-width:760px; margin:0 auto; border:1px solid var(--border); } .faq-item { border-bottom:1px solid var(--border); } .faq-item:last-child { border-bottom:none; } .faq-q { display:flex; align-items:flex-start; gap:16px; padding:20px 24px; cursor:pointer; background:var(--white); transition:background 0.15s; user-select:none; } .faq-q:hover { background:#fdf9f4; } .q-label { font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--gold); flex-shrink:0; line-height:1.1; font-style:italic; } .q-text { font-size:13px; font-weight:500; line-height:1.7; color:var(--dark); flex:1; padding-top:2px; } .q-arrow { color:var(--gold); font-size:12px; flex-shrink:0; transition:transform 0.25s; padding-top:4px; } .faq-item.open .q-arrow { transform:rotate(180deg); } .faq-a { display:none; padding:16px 24px 20px 64px; font-size:12px; line-height:2.3; color:#555; background:var(--white); border-top:1px dashed var(--border); } .a-inner { display:flex; gap:12px; } .a-label { font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--brown); font-style:italic; flex-shrink:0; line-height:1.2; } .a-body { flex:1; padding-top:2px; } .faq-item.open .faq-a { display:block; } /* FINAL CTA */ .final-cta { background:var(--dark); text-align:center; padding:80px 40px; color:var(--white); } .final-cta .en { font-family:'Great Vibes',cursive; font-size:48px; color:var(--gold-light); display:block; margin-bottom:8px; } .final-cta .ja { font-size:11px; letter-spacing:0.28em; color:rgba(255,255,255,0.5); margin-bottom:36px; display:block; } .final-btns { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; } .final-btn { display:flex; flex-direction:column; align-items:center; border:1px solid var(--gold); color:var(--gold-light); padding:20px 40px; min-width:260px; transition:all 0.2s; } .final-btn:hover { background:var(--gold); color:#fff; } .final-btn .venue { font-size:10px; letter-spacing:0.18em; margin-bottom:6px; opacity:0.7; } .final-btn .tel { font-family:'Cormorant Garamond',serif; font-size:28px; letter-spacing:0.06em; } .final-btn .note { font-size:10px; opacity:0.6; margin-top:4px; letter-spacing:0.1em; } /* FOOTER */ .site-footer { background:#1a1612; color:rgba(255,255,255,0.55); padding:44px 40px; } .footer-venues { display:flex; gap:48px; flex-wrap:wrap; margin-bottom:28px; } .footer-venue h3 { font-family:'Cormorant Garamond',serif; font-size:13px; letter-spacing:0.18em; color:var(--gold-light); margin-bottom:8px; } .footer-venue p { font-size:11px; line-height:2.2; } .footer-venue a { color:rgba(255,255,255,0.55); } .footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; } .footer-brand { font-family:'Cormorant Garamond',serif; font-size:12px; letter-spacing:0.22em; color:var(--gold-light); } .footer-copy { font-size:10px; opacity:0.35; letter-spacing:0.1em; } /* FLOAT */ .float-cta { position:fixed; bottom:0; left:0; right:0; display:flex; z-index:500; box-shadow:0 -4px 20px rgba(0,0,0,0.15); } .float-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; font-size:12px; letter-spacing:0.06em; color:#fff; transition:opacity 0.2s; } .float-btn:hover { opacity:0.88; } .float-btn-gtf { background:var(--green); } .float-btn-avvio { background:var(--brown); } /* RESPONSIVE */ @media(max-width:768px){ /* 横スクロール防止 */ body { overflow-x:hidden; } * { max-width:100%; box-sizing:border-box; } .site-header { padding:10px 12px; top:36px; } .header-logos { gap:0; } .logo-text { font-size:9px; letter-spacing:0.06em; white-space:nowrap; } .logo-divider { height:20px; } .header-badge { display:none; } .header-logos { flex:1; } .hero { flex-direction:column; min-height:auto; } .hero-left { width:100%; padding:40px 24px; } .hero-left::after { display:none; } .hero-right { min-height:260px; } .section { padding:56px 16px; } /* プランカード */ .plans-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .plan-card-head { padding:16px 12px 10px; } .plan-price { font-size:28px; } .plan-price-special .sp-num { font-size:26px; } .plan-price-regular .reg-num { font-size:13px; } /* お食事会 */ .meal-inner { width:100%; } .meal-card-std { display:flex; flex-direction:column; gap:10px; padding:20px 16px; width:100%; } .meal-price-num { font-size:36px; } .meal-price-row { flex-wrap:wrap; gap:4px; } .meal-row2 { grid-template-columns:1fr; gap:12px; } .meal-card-sub { padding:18px 16px; } .meal-price-sm { font-size:32px; } /* その他 */ .meal-grid { grid-template-columns:1fr; max-width:100%; } .reasons-grid { grid-template-columns:1fr; } .flow-steps { flex-wrap:wrap; gap:24px; } .flow-steps::before { display:none; } .flow-step { flex:0 0 calc(50% - 12px); } .voices-grid { grid-template-columns:1fr; max-width:100%; } .faq-a { padding-left:24px; } .final-btns { flex-direction:column; align-items:center; } .final-btn { min-width:220px; } .footer-venues { flex-direction:column; gap:24px; } .float-btn { font-size:10px; padding:12px 6px; } /* プランアイコン */ .plan-icons { gap:6px; } .plan-icon-box { width:40px; height:40px; font-size:18px; } .plan-icon-label { font-size:8px; max-width:42px; } .plan-desc { font-size:10px; } /* 画像 */ .hero-right img, .meal-inner img { width:100%; height:auto; object-fit:cover; } /* チャットボット */ .cb-overlay { padding:0; align-items:flex-end; justify-content:stretch; } .cb-window { width:100%; height:75vh; border-radius:12px 12px 0 0; } /* フローティングCTA */ .float-cta { padding:0; } .float-btn-inquiry { font-size:13px; padding:16px; letter-spacing:0.06em; } } /* ===== INQUIRY POPUP ===== */ .popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000; align-items:center; justify-content:center; padding:20px; } .popup-overlay.show { display:flex; } .popup-box { background:var(--white); max-width:520px; width:100%; padding:40px 36px; position:relative; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .popup-close { position:absolute; top:14px; right:18px; font-size:22px; color:#aaa; cursor:pointer; background:none; border:none; line-height:1; } .popup-close:hover { color:var(--dark); } .popup-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; color:var(--gold); text-align:center; margin-bottom:6px; } .popup-sub { font-size:11px; letter-spacing:0.2em; color:var(--gray); text-align:center; margin-bottom:28px; } .popup-venue { margin-bottom:24px; } .popup-venue-name { font-family:'Cormorant Garamond',serif; font-size:12px; letter-spacing:0.2em; color:var(--brown); border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:14px; } .popup-actions { display:flex; flex-direction:column; gap:10px; } .popup-btn { display:flex; align-items:center; gap:12px; padding:13px 18px; border:1px solid var(--border); font-size:13px; letter-spacing:0.06em; color:var(--dark); text-decoration:none; transition:all 0.2s; cursor:pointer; background:var(--white); } .popup-btn:hover { background:var(--cream); border-color:var(--gold); } .popup-btn.line { background:#06C755; color:#fff; border-color:#06C755; } .popup-btn.line:hover { background:#05b34c; } .popup-btn .pb-icon { font-size:18px; flex-shrink:0; width:24px; text-align:center; } .popup-btn .pb-text { flex:1; } .popup-btn .pb-num { font-family:'Cormorant Garamond',serif; font-size:16px; margin-top:1px; } .popup-divider { border:none; border-top:1px solid var(--border); margin:8px 0; } /* Updated CTA buttons */ .cta-btn-inquiry { display:inline-flex; align-items:center; gap:8px; background:var(--dark); color:#fff; padding:15px 40px; font-size:13px; letter-spacing:0.12em; cursor:pointer; border:none; transition:background 0.2s; } .cta-btn-inquiry:hover { background:var(--brown); } .cta-btn-line { display:inline-flex; align-items:center; gap:8px; background:#06C755; color:#fff; padding:15px 40px; font-size:13px; letter-spacing:0.08em; cursor:pointer; border:none; transition:opacity 0.2s; text-decoration:none; } .cta-btn-line:hover { opacity:0.88; } /* Float */ .float-cta { position:fixed; bottom:0; left:0; right:0; display:flex; z-index:500; box-shadow:0 -4px 20px rgba(0,0,0,0.15); } .float-btn-line { flex:1.4; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; font-size:12px; letter-spacing:0.06em; color:#fff; background:#06C755; text-decoration:none; transition:opacity 0.2s; } .float-btn-inquiry { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; font-size:12px; letter-spacing:0.06em; color:#fff; background:linear-gradient(135deg,#c8a050,#b89760,#a07830); border:none; cursor:pointer; transition:all 0.2s; animation:pulse-gold 2.5s ease-in-out infinite; } .float-btn-line:hover { opacity:0.88; } .float-btn-inquiry:hover { opacity:1; transform:scale(1.02); } @media(max-width:768px){ .popup-box { padding:28px 20px; } .popup-actions { gap:8px; } } /* ===== CHATBOT POPUP ===== */ .cb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:flex-end; justify-content:flex-end; padding:80px 24px 80px 24px; } .cb-overlay.show { display:flex; } .cb-window { width:380px; height:560px; background:var(--white); display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.25); border-radius:2px; overflow:hidden; } .cb-header { background:var(--dark); color:#fff; padding:14px 18px; display:flex; align-items:center; gap:10px; flex-shrink:0; } .cb-header-icon { font-size:22px; } .cb-header-info { flex:1; } .cb-header-title { font-family:'Cormorant Garamond',serif; font-size:15px; letter-spacing:0.1em; } .cb-header-sub { font-size:10px; color:rgba(255,255,255,0.55); letter-spacing:0.08em; margin-top:2px; } .cb-close { background:none; border:none; color:rgba(255,255,255,0.6); font-size:20px; cursor:pointer; line-height:1; padding:0 4px; } .cb-close:hover { color:#fff; } .cb-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--cream); } .cb-msg { display:flex; gap:8px; align-items:flex-end; } .cb-msg.user { flex-direction:row-reverse; } .cb-bubble { max-width:78%; padding:10px 14px; font-size:12px; line-height:1.8; border-radius:12px; } .cb-msg.bot .cb-bubble { background:var(--white); color:var(--dark); border:1px solid var(--border); border-bottom-left-radius:2px; } .cb-msg.user .cb-bubble { background:var(--dark); color:#fff; border-bottom-right-radius:2px; } .cb-avatar { width:28px; height:28px; border-radius:50%; background:var(--gold); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .cb-typing { display:flex; gap:4px; align-items:center; padding:10px 14px; background:var(--white); border:1px solid var(--border); border-radius:12px; border-bottom-left-radius:2px; width:fit-content; } .cb-typing span { width:6px; height:6px; background:var(--gold); border-radius:50%; animation:typing 1.2s infinite; } .cb-typing span:nth-child(2){ animation-delay:0.2s; } .cb-typing span:nth-child(3){ animation-delay:0.4s; } @keyframes typing { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} } .cb-quick { padding:10px 14px; display:flex; flex-wrap:wrap; gap:6px; background:var(--cream); border-top:1px solid var(--border); flex-shrink:0; } .cb-quick-btn { font-size:11px; padding:5px 12px; border:1px solid var(--gold); color:var(--brown); background:var(--white); border-radius:50px; cursor:pointer; transition:all 0.15s; white-space:nowrap; } .cb-quick-btn:hover { background:var(--gold); color:#fff; } .cb-input-area { display:flex; gap:0; padding:12px; background:var(--white); border-top:1px solid var(--border); flex-shrink:0; } .cb-input { flex:1; border:1px solid var(--border); padding:10px 14px; font-size:16px; font-family:'Noto Sans JP',sans-serif; outline:none; resize:none; height:42px; border-right:none; transform-origin: left top; } .cb-input:focus { border-color:var(--gold); } .cb-send { background:var(--gold); color:#fff; border:none; padding:0 16px; cursor:pointer; font-size:16px; transition:background 0.2s; flex-shrink:0; } .cb-send:hover { background:var(--brown); } .cb-send:disabled { background:#ccc; cursor:not-allowed; } /* Float buttons */ .float-cta { position:fixed; bottom:0; left:0; right:0; display:flex; z-index:500; box-shadow:0 -4px 20px rgba(0,0,0,0.15); } .float-btn-line { flex:1.4; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; font-size:12px; letter-spacing:0.06em; color:#fff; background:#06C755; text-decoration:none; transition:opacity 0.2s; } .float-btn-inquiry { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; font-size:12px; letter-spacing:0.06em; color:#fff; background:linear-gradient(135deg,#c8a050,#b89760,#a07830); border:none; cursor:pointer; transition:all 0.2s; animation:pulse-gold 2.5s ease-in-out infinite; } .float-btn-line:hover { opacity:0.88; } .float-btn-inquiry:hover { opacity:1; transform:scale(1.02); } /* Inquiry buttons */ .cta-btn-inquiry { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#c8a050,#b89760,#a07830); color:#fff; padding:15px 40px; font-size:13px; letter-spacing:0.12em; cursor:pointer; border:none; transition:all 0.2s; box-shadow:0 4px 20px rgba(184,151,96,0.5); animation:pulse-gold 2.5s ease-in-out infinite; } .cta-btn-inquiry:hover { background:linear-gradient(135deg,#d4b060,#c8a050,#b08840); box-shadow:0 6px 28px rgba(184,151,96,0.7); transform:translateY(-1px); } .cta-btn-line { display:inline-flex; align-items:center; gap:8px; background:#06C755; color:#fff; padding:15px 40px; font-size:13px; letter-spacing:0.08em; cursor:pointer; border:none; transition:opacity 0.2s; text-decoration:none; } .cta-btn-line:hover { opacity:0.88; } @media(max-width:768px){ .cb-overlay { padding:0; align-items:flex-end; justify-content:stretch; } .cb-window { width:100%; height:70vh; border-radius:12px 12px 0 0; } .float-btn-line,.float-btn-inquiry { font-size:10px; padding:12px 6px; } } /* WebP非対応ブラウザ向けフォールバック */ .no-webp .hero-right { background:url(image/hero-image.jpg) center center / cover no-repeat !important; } .no-webp .meal-card-std { background-image: url(image/party-image.jpg) !important; } /* iOS Safari 入力時自動ズーム防止 */ @media (max-width:768px) { .cb-input { font-size:16px !important; } input, textarea, select { font-size:16px !important; } } /* ===== GALLERY ===== */ .gallery-outer { overflow: hidden; width: 100%; cursor: grab; user-select: none; } .gallery-outer:active { cursor: grabbing; } .gallery-track { display: flex; gap: 16px; padding: 0 20px; width: max-content; animation: galleryScroll 28s linear infinite; } .gallery-track:hover { animation-play-state: paused; } @keyframes galleryScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1200px * 5 - 16px * 5 - 40px)); } } .gallery-item { flex-shrink: 0; width: 400px; height: 280px; overflow: hidden; border-radius: 4px; cursor: pointer; position: relative; } .gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(58,46,40,0); transition: background 0.25s; } .gallery-item:hover::after { background: rgba(58,46,40,0.15); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; } .gallery-item:hover img { transform: scale(1.04); } /* ライトボックス */ .lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 2000; align-items: center; justify-content: center; } .lightbox-overlay.show { display: flex; } .lightbox-content { max-width: 90vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; } .lightbox-content picture, .lightbox-content img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 28px; background: none; border: none; cursor: pointer; line-height: 1; opacity: 0.8; transition: opacity 0.2s; } .lightbox-close:hover { opacity: 1; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 48px; background: none; border: none; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; padding: 0 16px; line-height: 1; } .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; } .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; } @media(max-width:768px){ .gallery-item { width: 280px; height: 196px; } @keyframes galleryScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-280px * 5 - 16px * 5 - 40px)); } } .lightbox-prev { left: 4px; font-size: 36px; } .lightbox-next { right: 4px; font-size: 36px; } } /* ===== GALLERY ===== */ .gallery-section { padding: 72px 0 80px; background: var(--dark); overflow: hidden; } .gallery-section .section-label-wrap { text-align: center; margin-bottom: 36px; } .gallery-section .section-label-en { display: block; font-family: 'Cormorant Garamond', serif; font-size: 36px; font-style: italic; color: var(--gold); letter-spacing: 0.08em; } .gallery-section .section-label-ja { display: block; font-size: 11px; letter-spacing: 0.3em; color: rgba(255,255,255,0.5); margin-top: 6px; } /* トラック */ .gallery-track-wrap { overflow: hidden; width: 100%; cursor: grab; user-select: none; } .gallery-track-wrap:active { cursor: grabbing; } .gallery-track { display: flex; gap: 16px; padding: 0 40px; animation: galleryScroll 30s linear infinite; width: max-content; } .gallery-track:hover { animation-play-state: paused; } @keyframes galleryScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1000px * 5 - 16px * 5)); } } .gallery-item { flex: 0 0 400px; height: 267px; overflow: hidden; border-radius: 4px; position: relative; cursor: pointer; transition: transform 0.3s; } .gallery-item:hover { transform: scale(1.02); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; } .gallery-item:hover img { transform: scale(1.06); } .gallery-overlay { position: absolute; inset: 0; background: rgba(58,46,40,0); display: flex; align-items: center; justify-content: center; transition: background 0.3s; } .gallery-overlay span { color: white; font-size: 28px; opacity: 0; transition: opacity 0.3s; } .gallery-item:hover .gallery-overlay { background: rgba(58,46,40,0.35); } .gallery-item:hover .gallery-overlay span { opacity: 1; } /* ライトボックス */ .gallery-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 2000; align-items: center; justify-content: center; } .gallery-lightbox.show { display: flex; } .gallery-lb-img-wrap { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; } .gallery-lb-img-wrap img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 2px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .gallery-lb-close { position: fixed; top: 20px; right: 24px; background: none; border: none; color: white; font-size: 28px; cursor: pointer; z-index: 2001; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.2s; } .gallery-lb-close:hover { opacity: 1; } .gallery-lb-prev, .gallery-lb-next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; font-size: 36px; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; z-index: 2001; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .gallery-lb-prev:hover, .gallery-lb-next:hover { background: rgba(255,255,255,0.3); } .gallery-lb-prev { left: 20px; } .gallery-lb-next { right: 20px; } .gallery-lb-dots { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .gallery-lb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: background 0.2s; } .gallery-lb-dot.active { background: var(--gold); } @media(max-width:768px){ .gallery-item { flex: 0 0 280px; height: 187px; } .gallery-track { padding: 0 16px; gap: 12px; } @keyframes galleryScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-280px * 5 - 12px * 5)); } } .gallery-lb-prev { left: 8px; } .gallery-lb-next { right: 8px; } } /* ===== チャットボット 選択ボタン ===== */ .cb-choice-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; width: 100%; } .cb-choice { display: block; width: 100%; padding: 10px 16px; background: #fff; border: 1.5px solid var(--gold); border-radius: 6px; color: var(--dark); font-size: 13px; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.05em; cursor: pointer; text-align: left; transition: background 0.18s, color 0.18s; box-shadow: 0 2px 6px rgba(184,151,96,0.12); } .cb-choice:hover { background: var(--gold); color: #fff; } /* ===== SP テキスト折り返し全体強化 ===== */ @media(max-width:768px){ p, span, h1, h2, h3, h4, li, dt, dd, td, th { overflow-wrap: break-word; word-break: auto-phrase; } .urgency-bar { font-size: 10px; letter-spacing: 0.04em; padding: 8px 10px; text-align: center; white-space: normal; } .section-title .ja { font-size: 14px; } .meal-footnote { font-size: 10px; line-height: 1.8; } } /* ヘッダー会場名リンク */ .logo-link { text-decoration: none; color: inherit; transition: opacity 0.2s; } .logo-link:hover { opacity: 0.65; } /* ===== RESERVATION FORM (CV) ===== */ .reserve-section { background:var(--cream); } .reserve-lead { text-align:center; font-size:13px; color:var(--dark); line-height:1.9; letter-spacing:0.04em; margin:-8px 0 24px; } .reserve-req { color:var(--gray); font-size:11px; margin-left:6px; } .rf-opt { color:var(--gray); font-size:11px; font-weight:400; } .rf-must { color:#a01414; margin-left:3px; font-size:12px; } .reserve-card { max-width:600px; margin:0 auto; background:var(--white); border:1px solid var(--border); border-radius:6px; padding:28px 24px; box-shadow:0 8px 30px rgba(58,46,40,0.06); } .rf-row { margin-bottom:16px; } .rf-label { display:block; font-size:12px; letter-spacing:0.06em; color:var(--brown); margin-bottom:6px; font-weight:500; } .rf-input { width:100%; box-sizing:border-box; min-height:48px; padding:12px 14px; font-size:16px; font-family:'Noto Sans JP',sans-serif; color:var(--dark); background:var(--white); border:1px solid var(--border); border-radius:4px; -webkit-appearance:none; appearance:none; } .rf-input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,151,96,0.15); } select.rf-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b89760' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; } .rf-textarea { min-height:auto; resize:vertical; line-height:1.7; } .rf-estimate { background:var(--beige); border-radius:4px; padding:14px 16px; margin-bottom:16px; text-align:center; } .rf-est-label { display:block; font-size:11px; color:var(--brown); letter-spacing:0.08em; } .rf-est-num { display:block; font-size:30px; color:var(--gold); font-family:'Cormorant Garamond',serif; font-weight:600; margin:2px 0; line-height:1.1; } .rf-est-note { display:block; font-size:10px; color:var(--gray); } .rf-error { color:#a01414; font-size:12px; margin-bottom:10px; display:none; } .rf-submit { width:100%; min-height:54px; background:var(--gold); color:#fff; border:none; border-radius:4px; font-size:15px; letter-spacing:0.1em; font-family:'Noto Sans JP',sans-serif; cursor:pointer; transition:background 0.2s; } .rf-submit:hover { background:var(--brown); } .rf-submit:disabled { opacity:0.55; cursor:default; } .rf-privacy { text-align:center; font-size:10px; color:var(--gray); margin-top:12px; line-height:1.7; } .reserve-thanks { max-width:600px; margin:0 auto; background:var(--white); border:1px solid var(--border); border-radius:6px; padding:40px 24px; text-align:center; } .rf-thanks-icon { width:56px; height:56px; line-height:56px; margin:0 auto 14px; border-radius:50%; background:var(--green); color:#fff; font-size:28px; } .reserve-thanks h3 { font-size:18px; color:var(--brown); letter-spacing:0.08em; margin-bottom:10px; font-weight:500; } .reserve-thanks p { font-size:13px; color:var(--dark); line-height:1.9; margin-bottom:18px; } .rf-line-btn { display:inline-flex; align-items:center; gap:6px; background:#06c755; color:#fff; text-decoration:none; padding:14px 36px; border-radius:50px; font-size:14px; letter-spacing:0.06em; } .rf-thanks-tel { margin-top:18px; font-size:12px; color:var(--brown); line-height:2; } .rf-thanks-tel a { color:var(--brown); text-decoration:none; border-bottom:1px solid var(--gold); } @media (max-width:600px){ .reserve-card, .reserve-thanks { border-radius:0; border-left:none; border-right:none; padding-left:18px; padding-right:18px; } } /* ===== WEDDING VENUES (3県13会場) ===== */ .venues-section { background:var(--white); } .venues-lead { text-align:center; font-size:13px; color:var(--dark); line-height:1.9; letter-spacing:0.04em; margin:-8px 0 28px; } .venue-group { max-width:1160px; margin:0 auto 34px; padding:0 20px; } .venue-group-title { display:flex; align-items:center; gap:12px; margin-bottom:18px; } .venue-group-title .pref { font-size:17px; letter-spacing:0.12em; color:var(--brown); font-weight:500; white-space:nowrap; } .venue-group-title .pref-en { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--gold); white-space:nowrap; } .venue-group-title .pref-line { flex:1; height:1px; background:var(--border); } .venue-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .venue-card { background:var(--cream); border:1px solid var(--border); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; } .venue-imgwrap { position:relative; aspect-ratio:4/3; background:var(--beige); overflow:hidden; } .venue-imgph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--gray); font-size:11px; letter-spacing:0.1em; } .venue-imgph svg { opacity:0.45; } .venue-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .venue-body { padding:14px 16px 16px; flex:1; display:flex; flex-direction:column; } .venue-name { font-size:14px; letter-spacing:0.03em; color:var(--dark); font-weight:500; line-height:1.5; margin-bottom:10px; } .venue-meta { font-size:12px; color:var(--brown); line-height:1.8; margin-top:auto; } .venue-row { display:flex; gap:7px; align-items:flex-start; margin-top:2px; } .venue-ico { flex-shrink:0; opacity:0.8; } .venue-val { color:var(--dark); } .venue-val.is-ph { color:var(--gray); font-size:11px; } .venue-val a { color:var(--brown); text-decoration:none; border-bottom:1px solid var(--gold); } @media (max-width:900px){ .venue-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .venue-grid { grid-template-columns:1fr 1fr; gap:12px; } .venue-name { font-size:12px; } .venue-body { padding:10px 12px 12px; } .venue-meta { font-size:11px; } .venue-group-title .pref { font-size:15px; } } /* ===== HEADER multi-venue brand ===== */ .logo-main { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:21px; font-weight:600; letter-spacing:0.16em; color:var(--gold); line-height:1.2; } .logo-sub { font-family:'Noto Sans JP',sans-serif; font-size:9px; letter-spacing:0.08em; color:var(--gray); } @media (max-width:560px){ .logo-main { font-size:15px; letter-spacing:0.08em; } .logo-sub { font-size:8px; letter-spacing:0.04em; } } /* ===== Semantic headings: keep visual identical to former span/div ===== */ .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .section-title h2.ja { margin:6px 0 0; font-size:11px; font-weight:400; line-height:inherit; } .final-cta h2.ja { margin:0 0 36px; font-size:11px; font-weight:400; line-height:inherit; } .venue-group-title h3.pref { margin:0; font-size:17px; font-weight:500; line-height:inherit; } @media (max-width:560px){ .venue-group-title h3.pref { font-size:15px; } } /* ===== VENUE PAGE (/venue/{slug}) ===== */ .vp-breadcrumb { max-width:1000px; margin:0 auto; padding:14px 20px; font-size:11px; color:var(--gray); letter-spacing:0.04em; } .vp-breadcrumb a { color:var(--brown); text-decoration:none; } .vp-breadcrumb span { margin:0 4px; color:var(--border); } .vp-bc-current { color:var(--dark); } .vp-hero { max-width:1000px; margin:0 auto 10px; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; } .vp-imgwrap { position:relative; aspect-ratio:4/3; background:var(--beige); border-radius:6px; overflow:hidden; } .vp-imgwrap .venue-imgph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--gray); font-size:12px; letter-spacing:0.1em; } .vp-imgwrap .venue-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vp-pref { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--gold); letter-spacing:0.08em; margin-bottom:6px; } .vp-title { font-family:'Noto Serif JP',serif; font-size:26px; color:var(--brown); font-weight:400; line-height:1.5; letter-spacing:0.04em; margin-bottom:14px; } .vp-title-sub { font-size:16px; color:var(--dark); } .vp-lead { font-size:13px; color:var(--dark); line-height:1.95; letter-spacing:0.03em; margin-bottom:22px; } .vp-cta { display:inline-block; background:var(--gold); color:#fff; text-decoration:none; padding:15px 38px; border-radius:4px; font-size:14px; letter-spacing:0.08em; transition:background 0.2s; } .vp-cta:hover { background:var(--brown); } .vp-section { max-width:1000px; margin:0 auto; padding:40px 20px; } .vp-h2 { text-align:center; font-size:18px; color:var(--brown); letter-spacing:0.1em; font-weight:500; margin-bottom:24px; } .vp-plans { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .vp-plan { background:var(--cream); border:1px solid var(--border); border-radius:6px; padding:18px 12px; text-align:center; } .vp-plan-name { display:block; font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--gold); letter-spacing:0.06em; } .vp-plan-sub { display:block; font-size:11px; color:var(--gray); margin:4px 0 8px; } .vp-plan-price { display:block; font-size:16px; color:var(--dark); font-weight:500; } .vp-note { text-align:center; font-size:11px; color:var(--gray); margin-top:16px; line-height:1.8; } .vp-note a, .vp-access-row a { color:var(--brown); } .vp-access { background:var(--cream); } .vp-access-box { max-width:560px; margin:0 auto 24px; background:#fff; border:1px solid var(--border); border-radius:6px; padding:24px; text-align:center; } .vp-access-name { font-size:15px; color:var(--brown); font-weight:500; margin-bottom:12px; } .vp-access-row { font-size:13px; color:var(--dark); line-height:2; } .vp-access-row.vp-ph, .vp-ph { color:var(--gray); font-size:12px; } .vp-cta-wrap { text-align:center; } .vp-back { display:block; margin-top:16px; font-size:12px; color:var(--brown); text-decoration:none; } @media (max-width:700px){ .vp-hero { grid-template-columns:1fr; gap:16px; } .vp-title { font-size:21px; } .vp-plans { grid-template-columns:repeat(2,1fr); } } /* ===== Venue card（リンクなし・情報表示のみ） ===== */ .venue-card { position:relative; } /* ===== VENUE PAGE 施設画像 横スワイプ カルーセル ===== */ .vp-carousel { position:absolute; inset:0; } .vp-track { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .vp-track::-webkit-scrollbar { display:none; } .vp-slide { flex:0 0 100%; height:100%; scroll-snap-align:center; } .vp-slide picture { display:block; width:100%; height:100%; } .vp-slide img { width:100%; height:100%; object-fit:cover; display:block; } .vp-nav { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.82); color:var(--brown); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; transition:background .2s; padding:0; } .vp-nav:hover { background:#fff; } .vp-prev { left:10px; } .vp-next { right:10px; } .vp-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:2; } .vp-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.55); cursor:pointer; transition:background .2s; border:1px solid rgba(0,0,0,0.05); } .vp-dot.is-active { background:#fff; } @media (max-width:700px){ .vp-nav { width:32px; height:32px; font-size:18px; } } /* ===== プランカード アイコン（チラシ画像版） ===== */ .plan-icon-box img.plan-icon-img { max-width:100%; max-height:100%; width:auto; height:auto; display:block; object-fit:contain; } /* ===== HERO 刷新（CV特化） ===== */ .hero-h1 { font-family:'Noto Serif JP',serif; text-align:center; margin:4px 0 14px; line-height:1.55; } .hero-h1-region { display:block; font-size:13px; letter-spacing:0.1em; color:var(--brown); margin-bottom:6px; font-weight:400; } .hero-h1 strong { font-size:25px; font-weight:500; color:var(--dark); letter-spacing:0.04em; } .hero-deadline { display:inline-flex; align-items:center; gap:6px; background:rgba(160,20,20,0.92); color:#fff; font-size:12px; letter-spacing:0.06em; padding:7px 16px; border-radius:3px; margin-bottom:16px; } .hero-deadline strong { font-size:15px; font-weight:700; } .hero-offer { text-align:center; margin-bottom:20px; } .hero-offer-tag { display:inline-block; font-size:11px; letter-spacing:0.08em; color:var(--brown); background:var(--beige); border-radius:50px; padding:4px 16px; margin-bottom:10px; } .hero-price { display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap; } .hp-was { font-size:14px; color:var(--gray); text-decoration:line-through; } .hp-now { font-family:'Cormorant Garamond',serif; font-size:46px; font-weight:600; color:var(--gold); line-height:1; } .hp-now small { font-size:15px; color:var(--brown); font-family:'Noto Sans JP',sans-serif; margin-left:2px; } .hp-now small i { font-style:normal; font-size:11px; background:var(--brown); color:#fff; padding:1px 6px; border-radius:3px; margin-left:4px; vertical-align:middle; } .hero-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:340px; background:linear-gradient(135deg,#8a6a32,#b89760 55%,#9c7a3a); color:#fff; text-decoration:none; font-size:16px; font-weight:500; letter-spacing:0.06em; padding:18px 24px; border-radius:6px; box-shadow:0 8px 26px rgba(122,90,40,0.42); position:relative; overflow:hidden; animation:heroPulse 2.4s ease-in-out infinite; } .hero-cta:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(122,90,40,0.55); } .hero-cta::before { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,0.45),transparent); transform:skewX(-20deg); animation:heroShine 3.2s ease-in-out infinite; } .hero-cta-ar { font-size:22px; line-height:1; } @keyframes heroPulse { 0%,100%{ box-shadow:0 8px 26px rgba(122,90,40,0.42);} 50%{ box-shadow:0 10px 32px rgba(122,90,40,0.62);} } @keyframes heroShine { 0%{ left:-60%; } 60%,100%{ left:130%; } } .hero-reassure { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-top:14px; } .hero-reassure span { font-size:11px; color:var(--brown); letter-spacing:0.03em; } /* ===== TRUST STRIP ===== */ .trust-strip { display:flex; justify-content:center; gap:0; background:var(--brown); padding:18px 12px; flex-wrap:wrap; } .trust-item { flex:1; min-width:80px; text-align:center; color:#fff; padding:4px 8px; position:relative; } .trust-item:not(:last-child)::after { content:''; position:absolute; right:0; top:15%; height:70%; width:1px; background:rgba(255,255,255,0.18); } .trust-item strong { display:block; font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:600; color:var(--gold-light); line-height:1; } .trust-item strong small { font-size:13px; font-family:'Noto Sans JP',sans-serif; } .trust-item span { display:block; font-size:10px; line-height:1.5; letter-spacing:0.04em; color:rgba(255,255,255,0.85); margin-top:5px; } @media (max-width:560px){ .hero-h1 strong { font-size:21px; } .hp-now { font-size:40px; } .hero-cta { font-size:15px; max-width:100%; } .trust-item strong { font-size:27px; } .trust-item span { font-size:9px; } } /* ===== STICKY CTA BAR（追従・離脱対策） ===== */ .sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:500; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:rgba(42,38,34,0.97); box-shadow:0 -4px 20px rgba(0,0,0,0.22); transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.7,.3,1); } .sticky-cta.show { transform:translateY(0); } .sticky-cta-info { display:flex; flex-direction:column; line-height:1.2; flex-shrink:1; min-width:0; } .sticky-cta-price { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; color:var(--gold-light); white-space:nowrap; } .sticky-cta-price small { font-size:11px; font-family:'Noto Sans JP',sans-serif; color:rgba(255,255,255,0.8); margin-left:2px; } .sticky-cta-sub { font-size:10px; color:rgba(255,255,255,0.7); letter-spacing:0.04em; margin-top:2px; } .sticky-cta-btn { flex:1; min-width:0; max-width:260px; display:flex; align-items:center; justify-content:center; gap:6px; background:linear-gradient(135deg,#c8a050,#b89760 55%,#a07830); color:#fff; text-decoration:none; font-size:14px; font-weight:500; letter-spacing:0.04em; padding:14px 16px; border-radius:6px; box-shadow:0 4px 16px rgba(184,151,96,0.5); animation:heroPulse 2.4s ease-in-out infinite; white-space:nowrap; } .sticky-cta-btn:hover { transform:translateY(-1px); } .sticky-cta-ar { font-size:18px; line-height:1; } @media (max-width:560px){ .sticky-cta { padding:8px 12px; gap:8px; } .sticky-cta-price { font-size:21px; } .sticky-cta-btn { font-size:13px; padding:13px 10px; } } /* ===== VENUE PAGE オファー＋価格＋CTA（CV） ===== */ .vp-offer { margin:6px 0 16px; } .vp-offer-tag { display:inline-block; font-size:11px; letter-spacing:0.05em; color:#fff; background:rgba(160,20,20,0.9); border-radius:3px; padding:5px 12px; margin-bottom:10px; } .vp-price { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .vp-was { font-size:14px; color:var(--gray); text-decoration:line-through; } .vp-now { font-family:'Cormorant Garamond',serif; font-size:42px; font-weight:600; color:var(--gold); line-height:1; } .vp-now small { font-size:14px; color:var(--brown); font-family:'Noto Sans JP',sans-serif; margin-left:2px; } .vp-cta-primary { background:linear-gradient(135deg,#8a6a32,#b89760 55%,#9c7a3a); box-shadow:0 8px 24px rgba(122,90,40,0.42); font-size:15px; font-weight:500; animation:heroPulse 2.4s ease-in-out infinite; } .vp-reassure { font-size:11px; color:var(--brown); margin-top:12px; letter-spacing:0.03em; } @media (max-width:700px){ .vp-now { font-size:36px; } } /* ===== お客様の声 写真付きカード ===== */ .voice-card { padding-top:22px; } .voice-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; } .voice-avatar { position:relative; flex-shrink:0; width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--beige); border:2px solid var(--gold-light); display:flex; align-items:center; justify-content:center; } .voice-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .voice-avatar-ph { font-size:9px; letter-spacing:0.08em; color:var(--gray); } .voice-head-info { flex:1; min-width:0; } .voice-head-info .voice-stars { margin-bottom:3px; } .voice-head-info .voice-name { text-align:left; margin-bottom:4px; } .voice-plan { display:inline-block; font-size:10px; letter-spacing:0.06em; color:var(--gold); border:1px solid var(--gold-light); border-radius:50px; padding:1px 10px; } /* ===== お客様の声：安心ポイント＆Googleクチコミバッジ ===== */ .voices-reassure { text-align:center; font-size:12px; color:var(--brown); letter-spacing:0.04em; line-height:1.9; margin:-8px auto 26px; max-width:720px; } .review-badge { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:340px; margin:0 auto 24px; background:var(--cream); border:1px solid var(--gold-light); border-radius:8px; padding:18px 24px; } .review-badge-stars { color:var(--gold); font-size:18px; letter-spacing:0.05em; } .review-badge-stars strong { color:var(--dark); font-size:20px; margin-left:6px; } .review-badge-meta { font-size:12px; color:#555; letter-spacing:0.04em; } .review-badge-link { font-size:12px; color:var(--brown); text-decoration:none; } .review-badge-link:hover { text-decoration:underline; } /* ===== SP：メインビジュアル（写真）を上、タイトル・価格・CTAを下に配置（文字が顔に被らない） ===== */ @media (max-width:768px){ .hero { flex-direction:column-reverse; min-height:auto; } /* 写真（メインビジュアル）を上に大きく表示。顔がしっかり見える高さ */ .hero-right { display:flex; width:100%; min-height:46vh; padding:0; background-position:center 30%; } .hero-right-logo { display:none; } /* 顔を主役にするため画像上のロゴは非表示 */ /* タイトル・価格・CTAは写真の下（クリーム背景）に。CTAまで画面内に収まる */ .hero-left { width:100%; background:var(--cream); padding:30px 22px 40px; } .hero-left::after { display:none; } .hero-script { margin-top:0; } } /* ===== FEATURE IMAGE BANNER（中盤の全幅イメージ） ===== */ .feature-banner { position:relative; width:100%; max-height:560px; overflow:hidden; } .feature-banner picture { display:block; } .feature-banner img { width:100%; height:100%; max-height:560px; object-fit:cover; display:block; } .feature-banner-cap { position:absolute; left:0; right:0; bottom:0; padding:44px 24px 30px; background:linear-gradient(to top, rgba(0,0,0,0.48), rgba(0,0,0,0.12) 60%, transparent); color:#fff; text-align:center; } .feature-banner-cap .fb-en { display:block; font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:0.12em; font-size:14px; color:var(--gold-light); margin-bottom:6px; } .feature-banner-cap .fb-ja { display:block; font-family:'Yomogi',cursive; font-size:25px; line-height:1.5; letter-spacing:0.04em; text-shadow:0 2px 12px rgba(0,0,0,0.5); } @media (max-width:768px){ .feature-banner img { max-height:360px; } .feature-banner-cap { padding:30px 18px 20px; } .feature-banner-cap .fb-ja { font-size:18px; } .feature-banner-cap .fb-en { font-size:12px; } } /* ===== スクロール フェードアップ表示 ===== */ .reveal { transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } html.reveal-on .reveal { opacity:0; transform:translateY(28px); } html.reveal-on .reveal.is-visible { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html.reveal-on .reveal { opacity:1 !important; transform:none !important; transition:none !important; } } /* fun バナーは顔が中心に来るようトリミング位置を調整 */ .feature-banner-fun img { object-position:center 40%; } /* ===== REELS GALLERY（Instagram風 スマホフレーム） ===== */ .reels-section { text-align:center; } .reels-lead { font-size:13px; color:var(--dark); letter-spacing:0.04em; margin:-8px 0 24px; } .reels-phone { position:relative; width:min(340px,88vw); margin:0 auto; background:#0e0e10; border-radius:42px; padding:12px; box-shadow:0 18px 50px rgba(0,0,0,0.28), inset 0 0 0 2px #2a2a2e; } .reels-island { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:90px; height:26px; background:#000; border-radius:16px; z-index:6; } .reels-screen { position:relative; aspect-ratio:9/16; border-radius:32px; overflow:hidden; background:#000; } .reels-track { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .reels-track::-webkit-scrollbar { display:none; } .reel-slide { position:relative; flex:0 0 100%; height:100%; scroll-snap-align:center; } .reel-slide picture { display:block; width:100%; height:100%; } .reel-slide img { width:100%; height:100%; object-fit:cover; display:block; } .reel-grad { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.32) 0%, transparent 22% 60%, rgba(0,0,0,0.55) 100%); pointer-events:none; } .reel-top { position:absolute; top:46px; left:14px; display:flex; align-items:center; gap:8px; color:#fff; font-size:12px; z-index:4; text-shadow:0 1px 4px rgba(0,0,0,0.5); } .reel-top strong { font-weight:600; } .reel-ava { width:26px; height:26px; border-radius:50%; background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); display:inline-block; border:2px solid #fff; } .reel-actions { position:absolute; right:10px; bottom:74px; display:flex; flex-direction:column; align-items:center; gap:16px; z-index:4; } .reel-act { display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:11px; background:none; border:none; cursor:pointer; padding:0; text-shadow:0 1px 4px rgba(0,0,0,0.5); } .reel-act svg { filter:drop-shadow(0 1px 3px rgba(0,0,0,0.45)); } .reel-like svg { fill:#fff; transition:transform .2s, fill .2s; } .reel-like.liked svg { fill:#ff2d55; animation:reelPop .35s ease; } @keyframes reelPop { 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} } .reel-caption { position:absolute; left:14px; right:64px; bottom:18px; text-align:left; color:#fff; z-index:4; text-shadow:0 1px 5px rgba(0,0,0,0.55); } .reel-cap-text { font-size:12px; line-height:1.5; } .reel-cap-text strong { font-weight:600; margin-right:4px; } .reel-firstcomment { font-size:11.5px; line-height:1.5; margin-top:5px; opacity:0.95; } .reel-firstcomment b { font-weight:600; margin-right:4px; } .reels-nav { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,0.18); backdrop-filter:blur(4px); color:#fff; font-size:22px; line-height:1; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; opacity:0.65; transition:opacity .2s; } .reels-nav:hover { opacity:1; } .reels-prev { left:8px; } .reels-next { right:8px; } .reels-home { width:120px; height:5px; border-radius:3px; background:#3a3a40; margin:9px auto 2px; } .reels-dots { display:flex; justify-content:center; gap:6px; margin-top:18px; flex-wrap:wrap; } .reels-dot { width:7px; height:7px; border-radius:50%; background:var(--border); cursor:pointer; transition:background .2s, width .2s; } .reels-dot.is-active { background:var(--gold); width:18px; border-radius:4px; } .reels-note { font-size:12px; color:var(--brown); letter-spacing:0.06em; margin-top:18px; } @media (max-width:560px){ .reels-nav { display:none; } /* スマホはスワイプ操作に集約 */ } /* style バナーは顔が入るようトリミング位置を調整 */ .feature-banner-style img { object-position:center 36%; } /* Simple（最安）プランの限定バナー・注記 */ .plan-limit-banner { background:linear-gradient(90deg,#b87333 0%,#d39a5a 100%); color:#fff; padding:10px 12px; margin-top:12px; font-size:12px; font-weight:600; letter-spacing:0.03em; text-align:center; border-radius:3px; } .plan-note-wasou { font-size:11px; color:var(--brown); text-align:center; margin-top:8px; line-height:1.6; padding:0 8px; } /* 中間幅では3列、狭幅2列に段階調整（5カード対応） */ @media (max-width:1100px){ .plans-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:768px){ .plans-grid { grid-template-columns:repeat(2,1fr); } } /* ===== GOLD を一番人気として強調（プラン選択の心理導線・センターステージ） ===== */ .plan-card.plan-featured { box-shadow:0 0 0 3px var(--gold), 0 14px 36px rgba(154,122,82,0.32); position:relative; z-index:2; } .plan-popular { background:linear-gradient(90deg,#c2a366 0%,#9a7a52 100%); color:#fff; text-align:center; font-size:13px; font-weight:700; letter-spacing:0.10em; padding:9px 6px; display:flex; align-items:center; justify-content:center; gap:6px; } @media (min-width:769px){ .plan-card.plan-featured { transform:translateY(-14px); } /* 少し浮かせて主役に */ } /* ===== USP HOOK + 3客層 ===== */ .usp-hook { text-align:center; font-size:15px; line-height:2.0; color:var(--dark); letter-spacing:0.04em; margin:-6px auto 30px; max-width:780px; } .usp-hook strong { color:var(--brown); font-weight:700; } .audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:980px; margin:0 auto; } .audience-card { background:var(--white); border:1px solid var(--border); border-radius:6px; padding:26px 20px; text-align:center; box-shadow:0 4px 18px rgba(0,0,0,0.05); } .aud-tag { display:inline-block; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(90deg,#c2a366,#9a7a52); border-radius:50px; padding:6px 18px; margin-bottom:14px; letter-spacing:0.04em; } .audience-card p { font-size:13px; line-height:1.9; color:var(--dark); } @media (max-width:768px){ .audience-grid { grid-template-columns:1fr; gap:12px; } } /* ===== FLOW 所要時間 ===== */ .flow-time { display:inline-block; font-size:11.5px; font-weight:700; color:var(--brown); background:var(--cream); border:1px solid var(--gold); border-radius:50px; padding:3px 13px; margin-top:10px; letter-spacing:0.02em; } .flow-note { text-align:center; margin:28px auto 0; font-size:14px; color:var(--brown); background:var(--cream); border-radius:8px; padding:18px 22px; max-width:740px; line-height:1.9; } .flow-note strong { color:#a85; font-weight:800; } /* ===== SUPPORT（ペット・お子様・ご家族） ===== */ .support-lead { text-align:center; font-size:14px; line-height:1.95; color:var(--dark); margin:-6px auto 28px; max-width:760px; } .support-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1040px; margin:0 auto; } .support-item { background:var(--white); border:1px solid var(--border); border-radius:8px; overflow:hidden; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,0.06); padding-bottom:22px; } .support-img { aspect-ratio:4/3; background:var(--cream); overflow:hidden; margin-bottom:14px; } .support-img img { width:100%; height:100%; object-fit:cover; display:block; } .support-img.is-placeholder { display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,#f4f1ec,#f4f1ec 11px,#eee7dd 11px,#eee7dd 22px); border-bottom:1px solid var(--border); } .support-img.is-placeholder span { font-size:10.5px; color:var(--brown); letter-spacing:0.14em; opacity:0.7; text-transform:uppercase; } .support-item h4 { font-size:14px; color:var(--brown); margin-bottom:8px; letter-spacing:0.03em; padding:0 14px; } .support-item p { font-size:12.5px; line-height:1.85; color:var(--dark); padding:0 14px; } .support-note { text-align:center; font-size:12px; color:var(--dark); margin-top:20px; opacity:0.85; } @media (max-width:768px){ .support-grid { grid-template-columns:repeat(2,1fr); } } /* ===== PICKUP（3カード→ポップアップ） ===== */ .pickup-lead { text-align:center; font-size:13px; color:var(--dark); letter-spacing:0.04em; margin:-8px 0 30px; } .pickup-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; } .pickup-card { background:var(--white); border:1px solid var(--border); border-radius:4px; padding:26px 24px 22px; cursor:pointer; transition:box-shadow .25s, transform .25s; display:flex; flex-direction:column; } .pickup-card:hover { box-shadow:0 12px 32px rgba(0,0,0,0.10); transform:translateY(-4px); } .pickup-title { text-align:center; font-size:16px; color:#3a2e28; font-weight:700; margin-bottom:18px; letter-spacing:0.03em; } .pickup-img { aspect-ratio:3/4; overflow:hidden; border-radius:2px; background:var(--cream); } .pickup-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; } .pickup-card:hover .pickup-img img { transform:scale(1.05); } .pickup-more { margin-top:18px; align-self:flex-end; color:var(--dark); font-size:14px; letter-spacing:0.06em; display:flex; align-items:center; gap:6px; } .pickup-more span { color:var(--gold); font-size:18px; } @media (max-width:768px){ .pickup-grid { grid-template-columns:1fr; gap:18px; max-width:420px; } } /* PICKUP モーダル */ .pk-tpl { display:none; } .pk-modal { position:fixed; inset:0; z-index:1000; display:none; } .pk-modal.is-open { display:block; } .pk-modal-overlay { position:absolute; inset:0; background:rgba(40,30,25,0.55); } .pk-modal-box { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(92vw,560px); max-height:86vh; overflow-y:auto; background:var(--white); border-radius:12px; padding:38px 32px 32px; box-shadow:0 24px 64px rgba(0,0,0,0.32); animation:pkIn .25s ease; } @keyframes pkIn { from{opacity:0; transform:translate(-50%,-46%);} to{opacity:1; transform:translate(-50%,-50%);} } .pk-modal-close { position:absolute; top:10px; right:16px; background:none; border:none; font-size:30px; line-height:1; color:var(--brown); cursor:pointer; } .pk-modal-content .pk-en { display:block; text-align:center; font-size:11px; letter-spacing:0.22em; color:var(--gold); text-transform:uppercase; margin-bottom:6px; } .pk-modal-content h3 { font-size:20px; color:var(--brown); text-align:center; margin-bottom:20px; letter-spacing:0.04em; } .pk-modal-content ul { list-style:none; padding:0; margin:0; } .pk-modal-content li { padding:13px 0 13px 28px; border-bottom:1px dashed var(--border); position:relative; font-size:13.5px; line-height:1.75; color:var(--dark); } .pk-modal-content li::before { content:"✓"; position:absolute; left:3px; color:var(--gold); font-weight:bold; } .pk-modal-content li strong { color:var(--brown); } .pk-modal-note { font-size:12px; color:var(--dark); opacity:0.8; margin-top:14px; line-height:1.6; } .pk-modal-cta { display:block; text-align:center; margin-top:24px; background:linear-gradient(90deg,#c2a366,#9a7a52); color:#fff; padding:15px; border-radius:50px; text-decoration:none; font-weight:700; letter-spacing:0.05em; font-size:15px; } .pk-modal-cta:hover { opacity:0.92; } /* ===== USP トレンド一言 + 客層リンク ===== */ .usp-trend { text-align:center; font-size:13.5px; line-height:1.9; color:var(--brown); background:var(--cream); border-radius:8px; padding:16px 22px; max-width:820px; margin:0 auto 28px; letter-spacing:0.03em; } .usp-trend strong { color:#a85; font-weight:800; } .aud-link { display:inline-flex; align-items:center; gap:5px; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--brown); text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:2px; letter-spacing:0.02em; } .aud-link span { color:var(--gold); font-size:16px; } .aud-link:hover { color:var(--gold); } .audience-card { display:flex; flex-direction:column; align-items:center; } .audience-card p { flex:1; } /* スティッキーヘッダ分のスクロール余白 */ .plan-card { scroll-margin-top:90px; } /* ===== COMPARISON TABLE ===== */ .compare-lead { text-align:center; font-size:14px; color:var(--dark); letter-spacing:0.03em; margin:-8px 0 26px; } .compare-wrap { max-width:840px; margin:0 auto; overflow-x:auto; } .compare-table { width:100%; min-width:520px; border-collapse:separate; border-spacing:0; font-size:13.5px; } .compare-table th, .compare-table td { padding:14px 12px; text-align:center; border-bottom:1px solid var(--border); } .compare-table thead th { font-size:14px; font-weight:700; letter-spacing:0.04em; padding:14px 10px; } .compare-table tbody th { text-align:left; color:#3a2e28; font-weight:600; background:#faf8f4; white-space:nowrap; } .ct-head-item { background:#faf8f4; border-top-left-radius:8px; } .ct-other { color:var(--dark); width:30%; } .ct-other .ct-mark { color:#b9b2a6; } .compare-table .ct-us { width:34%; background:linear-gradient(180deg,#fbf6ec,#fdfbf6); } .compare-table .ct-head-us { background:linear-gradient(90deg,#c2a366,#9a7a52); color:#fff; border-top-right-radius:8px; } .ct-mark { display:block; font-size:22px; line-height:1; margin-bottom:4px; } .ct-mark.good { color:#caa04e; font-size:26px; } .compare-table td em { font-style:normal; font-size:12px; color:var(--dark); } .compare-table .ct-us em { color:var(--brown); font-weight:600; } .compare-note { text-align:center; font-size:11px; color:var(--dark); opacity:0.75; margin-top:14px; } .compare-cta-wrap { text-align:center; margin-top:24px; } .compare-cta { display:inline-block; background:linear-gradient(90deg,#c2a366,#9a7a52); color:#fff; text-decoration:none; padding:15px 44px; border-radius:50px; font-weight:700; letter-spacing:0.05em; font-size:15px; box-shadow:0 8px 22px rgba(154,122,82,0.3); } .compare-cta:hover { opacity:0.92; } /* 手書き風フォント（汎用） */ .handwriting { font-family:'Yomogi',cursive; } /* ===== 実績バッジ（月桂冠） ===== */ .laurel-row { display:flex; justify-content:center; align-items:center; gap:36px; flex-wrap:wrap; margin:0 auto 18px; padding:0 16px; } .laurel-badge { position:relative; width:152px; height:158px; } .laurel-svg { width:100%; height:100%; display:block; } .laurel-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#4a3a2a; line-height:1.05; text-align:center; } .laurel-text .lb-s { font-size:13px; letter-spacing:0.06em; color:#6a5236; } .laurel-text .lb-xs { font-size:11px; letter-spacing:0.04em; color:#6a5236; margin-top:2px; } .laurel-text .lb-l { font-size:40px; font-weight:700; font-family:'Cormorant Garamond','Noto Serif JP',serif; font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1; line-height:1; margin:2px 0; color:#3a2e26; } .laurel-text .lb-l.lb-jp { font-family:'Noto Serif JP',serif; } .laurel-text .lb-stars { font-size:12px; color:#e0b84a; letter-spacing:2px; margin-top:2px; } @media (max-width:768px){ .laurel-row { gap:14px; } .laurel-badge { width:130px; height:135px; } .laurel-text .lb-l { font-size:34px; } } /* ===== 対話式プラン診断 ===== */ .finder-lead { text-align:center; font-size:13.5px; color:var(--dark); letter-spacing:0.03em; margin:-8px 0 26px; } .finder-box { max-width:600px; margin:0 auto; background:var(--white); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 36px rgba(0,0,0,0.08); padding:34px 30px; } .finder-progress { text-align:center; font-size:14px; font-weight:700; color:var(--brown); letter-spacing:0.06em; } .finder-progress span { font-size:20px; color:var(--gold); } .finder-progress i { font-style:normal; color:var(--dark); opacity:0.6; font-size:12px; } .finder-bar { height:5px; background:var(--cream); border-radius:3px; margin:12px 0 26px; overflow:hidden; } .finder-bar-fill { height:100%; width:0; background:linear-gradient(90deg,#c2a366,#9a7a52); border-radius:3px; transition:width .35s ease; } .finder-q { text-align:center; font-size:18px; color:#3a2e26; margin-bottom:24px; letter-spacing:0.03em; line-height:1.5; } .finder-options { display:flex; flex-direction:column; gap:12px; } .finder-opt { width:100%; text-align:center; padding:16px 18px; font-size:15px; color:var(--brown); background:var(--cream); border:1.5px solid transparent; border-radius:50px; cursor:pointer; transition:all .2s; letter-spacing:0.02em; font-weight:600; } .finder-opt:hover { border-color:var(--gold); background:#fff; box-shadow:0 6px 18px rgba(154,122,82,0.18); transform:translateY(-2px); } .finder-back { display:block; margin:22px auto 0; background:none; border:none; color:var(--dark); font-size:13px; cursor:pointer; opacity:0.7; } .finder-back:hover { opacity:1; } .finder-result { text-align:center; animation:pkIn .35s ease; } .fr-label { display:block; font-size:14px; color:var(--brown); letter-spacing:0.06em; margin-bottom:10px; } .fr-plan { font-size:38px; font-weight:700; font-family:'Cormorant Garamond','Noto Serif JP',serif; color:#3a2e26; line-height:1.1; } .fr-price { font-size:16px; color:var(--gold-dark,#9a7a52); font-weight:700; margin:6px 0 12px; } .fr-desc { font-size:13.5px; color:var(--dark); line-height:1.8; margin-bottom:24px; } .fr-cta { display:flex; flex-direction:column; gap:12px; max-width:360px; margin:0 auto; } .fr-btn { display:block; padding:15px; border-radius:50px; text-decoration:none; font-weight:700; letter-spacing:0.04em; font-size:15px; } .fr-btn-main { background:linear-gradient(90deg,#c2a366,#9a7a52); color:#fff; box-shadow:0 8px 22px rgba(154,122,82,0.3); } .fr-btn-sub { background:#fff; color:var(--brown); border:1.5px solid var(--gold); } .fr-btn:hover { opacity:0.92; } .finder-restart { margin-top:20px; background:none; border:none; color:var(--dark); font-size:13px; cursor:pointer; opacity:0.7; } .finder-restart:hover { opacity:1; } @media (max-width:768px){ .finder-box { padding:26px 18px; } .finder-q { font-size:16px; } .fr-plan { font-size:32px; } } /* ===== FLOW 円の画像背景 ===== */ .flow-circle.has-img { overflow:hidden; background:#2d2116; } .flow-circle.has-img picture { position:absolute; inset:0; display:block; } .flow-circle.has-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .flow-circle.has-img::after { content:''; position:absolute; inset:0; background:rgba(45,33,22,0.40); } .flow-circle.has-img span { position:relative; z-index:2; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.5); } /* ===== フォーム：撮影候補日「未定」チェック ===== */ .rf-row-tbd { margin-top:-2px; margin-bottom:14px; } .rf-check { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--brown); cursor:pointer; letter-spacing:0.02em; line-height:1.5; } .rf-check input[type="checkbox"] { width:17px; height:17px; min-width:17px; accent-color:#9a7a52; cursor:pointer; margin:0; } .rf-input:disabled { background:#f3efe9; color:#aaa; cursor:not-allowed; } /* ===== 追従バー：LINE相談ボタン追加 ===== */ .sticky-cta-actions { display:flex; align-items:stretch; gap:8px; flex:1; justify-content:flex-end; min-width:0; } .sticky-cta-line { display:flex; align-items:center; justify-content:center; gap:5px; background:#06C755; color:#fff; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:0.02em; padding:14px 14px; border-radius:6px; white-space:nowrap; box-shadow:0 4px 14px rgba(6,199,85,0.4); flex-shrink:0; } .sticky-cta-line:hover { opacity:0.92; } .sticky-cta-line svg { width:17px; height:17px; fill:#fff; flex-shrink:0; } @media (max-width:768px){ .sticky-cta-actions { gap:6px; } .sticky-cta-line { font-size:11px; padding:12px 9px; gap:4px; } .sticky-cta-line svg { width:14px; height:14px; } .sticky-cta-btn { padding:12px 8px; } } /* ===== SP専用改行 ===== */ .br-sp { display:none; } @media (max-width:768px){ .br-sp { display:inline; } } /* ===== CONCEPT（世界観・背景画像） ===== */ .concept-section { position:relative; overflow:hidden; min-height:80vh; display:flex; align-items:center; } .concept-bg { position:absolute; inset:0; display:block; } .concept-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .concept-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(22,19,16,0.7) 0%, rgba(22,19,16,0.46) 36%, rgba(22,19,16,0.14) 62%, rgba(22,19,16,0) 100%); } .concept-inner { position:relative; z-index:2; max-width:1160px; margin:0 auto; width:100%; padding:64px 7vw; } .concept-en { display:block; font-family:'Cormorant Garamond',serif; font-size:15px; letter-spacing:0.45em; color:#e7d9c2; margin-bottom:24px; } .concept-copy { font-family:'Noto Serif JP',serif; color:#fff; font-size:19px; line-height:2.45; letter-spacing:0.1em; font-weight:400; text-shadow:0 2px 16px rgba(0,0,0,0.55); } .concept-gap { display:block; height:18px; } @media (max-width:768px){ .concept-section { min-height:90vh; } .concept-bg img { object-position:62% center; } .concept-overlay { background:linear-gradient(180deg, rgba(22,19,16,0.5) 0%, rgba(22,19,16,0.66) 100%); } .concept-inner { padding:56px 30px; text-align:center; } .concept-en { letter-spacing:0.38em; } .concept-copy { font-size:15px; line-height:2.25; letter-spacing:0.05em; } .concept-gap { height:13px; } } /* ===== 追従バー：重なり防止（スマホ＝縦積み2段） ===== */ .scl-sp { display:none; } @media (max-width:768px){ .sticky-cta { flex-direction:column; align-items:stretch; gap:6px; padding:8px 12px; } .sticky-cta-info { align-items:center; flex-shrink:1; min-width:0; } .sticky-cta-price { font-size:16px; } .sticky-cta-price small { font-size:9px; } .sticky-cta-sub { display:none; } .sticky-cta-actions { width:100%; gap:8px; justify-content:stretch; } .sticky-cta-line { flex:0 0 auto; padding:13px 16px; font-size:13px; } .sticky-cta-btn { flex:1; font-size:13px; padding:13px 10px; max-width:none; } }