:root { --ink: #2a2a2a; --cream: #f3efe4; --cream-soft: rgba(246,234,212,.13); --gold: #b78c45; --cta-gold: #c9a227; --brown: #513e1f; --white: #fff; --max: 1236px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--white); background: #202427; font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif; line-height: 1.7; } img { display: block; max-width: 100%; } a { color: inherit; } .site { overflow: hidden; background: #202427; } .section { position: relative; } .inner { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } .serif { font-family: "Noto Serif JP", serif; } .eyebrow { margin: 0; color: var(--gold); font: 600 16px/1.5 "Noto Sans CJK JP", "Noto Sans JP", sans-serif; letter-spacing: .08em; } .display { margin: 0; font: 700 clamp(30px, 3vw, 53px)/1.2 "Noto Sans CJK JP", "Noto Sans JP", sans-serif; letter-spacing: .02em; } .lead { margin: 0; font-size: 16px; line-height: 2.14; } .cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 436px; max-width: 100%; height: 68px; padding: 0 72px; color: var(--white); background: var(--cta-gold); border: 2px solid rgba(255,255,255,.28); border-radius: 8px; box-shadow: 0 4px 6.5px rgba(0,0,0,.25); text-decoration: none; font: 700 24px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; transition: transform .2s ease, filter .2s ease; } .cta:hover { transform: translateY(-2px); filter: brightness(1.08); } .cta small { display: block; font: 400 12px/1.5 "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .cta--large { width: 630px; height: 100px; padding: 32px 72px; } .cta--small { width: 310px; height: 68px; padding: 16px 24px; font-size: 16px; } /* Figma 37:99 — MV */ .hero { min-height: 769px; position: relative; isolation: isolate; overflow: hidden; background: #1d120e; } .hero::before { position: absolute; z-index: -1; inset: -1.5%; background: url("../../images/mv/mv-background.jpg") center/cover; background-image: image-set(url("../../images/mv/mv-background.webp") type("image/webp"), url("../../images/mv/mv-background.jpg") type("image/jpeg")); content: ""; animation: hero-breathe 8s cubic-bezier(.22,1,.36,1) both; animation-play-state: paused; } .hero.is-loaded::before { animation-play-state: running; } .site-header { position: absolute; z-index: 1; left: 0; top: 0; display: flex; align-items: center; width: 258px; height: 82px; padding: 14px 20px; background: #005bac; border-radius: 0 0 16px 0; } .site-logo { display: block; width: 218px; line-height: 0; } .site-logo img { width: 100%; height: auto; } .vertical-copy { position: absolute; top: 59px; right: 65px; display: flex; align-items: flex-start; gap: 24px; } .vertical-copy span { padding: 8px 5px; color: #000; background: var(--cream); writing-mode: vertical-rl; font: 700 33px/41.7px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .hero-copy { position: absolute; left: max(5.2vw, 75px); top: 359px; width: min(831px, calc(100% - 150px)); } /* Keep the hero at its animation start state before the first paint. The class is set synchronously in ; without JavaScript it is never set. */ .js-motion-ready .hero-copy > *, .js-motion-ready .vertical-copy { opacity: 0; transform: translateY(18px); transition: opacity 1100ms cubic-bezier(.22,1,.36,1), transform 1100ms cubic-bezier(.22,1,.36,1); } .js-motion-ready.hero-motion-complete .hero-copy > *, .js-motion-ready.hero-motion-complete .vertical-copy { opacity: 1; transform: none; } .problem-list { display: flex; gap: 9px; margin-bottom: 17px; } .problem { display: grid; width: 120px; height: 90px; place-content: center; text-align: center; background: rgba(90,90,90,.4); border: 1px solid #fff; border-radius: 12px; } .problem b { font-size: 30px; line-height: 1.2; } .problem span { font-size: 14px; } .hero h1 { margin: 0; font: 700 clamp(28px, 2.6vw, 37px)/1.29 "Noto Serif JP", serif; letter-spacing: .12em; text-shadow: 0 4px 11px rgba(0,0,0,.25); } .hero h1 strong { font-size: 1.5em; } .hero .sub { margin: 8px 0 17px; font: 400 18px/1.9 "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .hero .sub strong { font-size: 25px; } .hero-mobile-break { display: none; } .hero-punctuation { font-style: normal; } /* Figma 37:144 — introduction */ .intro { min-height: 684px; background: url("../../images/mv/intro-background.jpg") center/cover; background-image: image-set(url("../../images/mv/intro-background.webp") type("image/webp"), url("../../images/mv/intro-background.jpg") type("image/jpeg")); } .intro-copy { position: absolute; left: 8%; top: 135px; width: 51%; padding-right: 90px; } .intro h2 { margin: 0 0 39px; font: 700 30px/1.59 "Noto Serif JP", serif; letter-spacing: .12em; } .intro p { max-width: 424px; margin: 0; font-size: 16px; line-height: 2.14; white-space: pre-line; } .intro-photo-main { position: absolute; top: 100px; left: 59.2%; width: min(438px, 38vw); } .intro-photo-sub { position: absolute; top: 362px; left: 52.2%; width: 279px; } /* Keep the Figma 1440px canvas centered on wider desktop viewports. */ @media (min-width: 1440px) { .intro-copy { left: calc(50% - 605px); width: 732px; } .intro-photo-main { left: calc(50% + 133px); } .intro-photo-sub { left: calc(50% + 31px); } } /* Figma 37:136 — plans heading */ .plans-heading { min-height: 380px; display: grid; place-items: center; text-align: center; background-color: #2c2c2c; background-image: url("../../images/common/seigaiha-bg.jpg"); background-image: image-set(url("../../images/common/seigaiha-bg.webp") type("image/webp"), url("../../images/common/seigaiha-bg.jpg") type("image/jpeg")); background-position: center; background-size: cover; } .plans-heading::before, .plans-heading::after { content: ""; position: absolute; background-repeat: no-repeat; background-size: 100% 100%; opacity: 1; } .plans-heading::before { left: 0; bottom: 0; width: 252px; height: 230px; background-image: url("../../images/common/seigaiha-02.png"); } .plans-heading::after { top: 0; right: 0; width: 263px; height: 254px; background-image: url("../../images/common/seigaiha-01.png"); } .plans-heading h2 { margin: 0 0 29px; font: 700 37px/1.29 "Noto Serif JP", serif; letter-spacing: .12em; text-shadow: 0 0 11px rgba(0,0,0,.25); } .plans-heading p { margin: 0; font-weight: 600; font-size: 20px; line-height: 1.71; } /* Figma 37:155 / 37:583 / 37:748 — plan panels */ .plan { position: relative; min-height: 800px; background: #333; } .plan-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .plan::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 74%; background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,0) 76%); pointer-events: none; } .plan:nth-of-type(2)::after { transform: scaleX(-1); left: auto; right: 0; } .plan-content { position: relative; z-index: 1; width: min(508px, calc(100% - 176px)); padding-top: 100px; margin-left: 6.1%; } .plan-label { display: flex; align-items: baseline; height: 49px; margin: 0; color: #fff; font: 600 20px/21.6px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; letter-spacing: 2.4px; } .plan-label strong { font: 600 20px/21.6px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .plan-label--compact, .plan-label--compact strong { font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif; font-size: 20px; font-style: normal; } .plan-03 .plan-label, .plan-03 .plan-label strong { font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .plan-kicker { display: inline-block; margin-top: 136px; font: 700 18px/25.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; letter-spacing: normal; } .plan-venue { margin: 12px 0 0; color: #fff; font: 700 24px/45px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } /* Long plan titles must wrap inside the content column instead of being clipped. */ .plan h3 { margin: 27px 0 18px; color: #fff; font: 700 52px/64px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; letter-spacing: normal; } .plan-02 h3 { font-size: 46px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tags span { padding: 8px; border: 1px solid #fff; font-size: 14px; } .plan-thumbs { position: absolute; z-index: 2; right: 56px; bottom: 49px; display: grid; gap: 13px; } .plan-thumbs picture { display: block; line-height: 0; } .plan-thumbs img { width: 134px; height: 84px; object-fit: cover; border: 1px solid #a3a3a3; cursor: pointer; transition: border-color 500ms ease-out, opacity 500ms ease-out; } .plan-thumbs img.is-active { border-color: #fff; /* Keep the photo area at the same size as the other thumbnails. */ outline: 2px solid #fff; } .plan-02 { background: #333; } .plan-03 { background: #333; } .plan-03::after { width: 74%; } .badge { display: inline-block; padding: 4px 12px; border: 1px solid #fff; border-radius: 999px; font-size: 12px; letter-spacing: .1em; } .plan-link { margin-top: 18px; font-size: 14px; } .plan-link a { color: #fff; font-weight: 700; } /* Figma 37:748 — PLAN 03 has no visible badge in the design. */ .plan-03 .badge { display: none; } /* Figma 37:171 / 37:714 / 37:761 — shared itinerary sections */ .plan-details { padding: 80px 24px; color: #fff; background: #202427; } .plan-details-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; width: min(836px, 100%); margin: 0 auto; } .plan-details-heading { width: 100%; margin: 0; font: 600 21px/43.2px "Noto Serif JP", serif; text-align: center; } /* Keep the requested line break after "温泉郷" visible at every viewport. */ .plan01-heading-break { display: inline; } .plan01-heading-break br { display: block; } .itinerary { display: flex; flex-direction: column; gap: 8px; width: 100%; } .itinerary-row { display: grid; grid-template-columns: 138px 1fr; gap: 8px; align-items: stretch; } .itinerary-day { display: grid; min-height: 60px; place-items: center; padding: 8px; border: 1px solid #fff; font: 400 14px/normal "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .itinerary-route { display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 12px 16px; border: 1px solid #fff; font: 400 14px/normal "Noto Sans CJK JP", "Noto Sans JP", sans-serif; text-align: left; } .itinerary-route p { margin: 0; } /* Figma 37:870 — comparison for organizers */ .comparison-section { padding: 80px 24px; color: #fff; background: rgba(246,234,212,.13); } .comparison-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; } .comparison-intro { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 703px; max-width: 100%; } .comparison-eyebrow { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 217px; color: var(--gold); font: 600 16px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .comparison-eyebrow::before, .comparison-eyebrow::after { width: 36px; height: 1px; background: var(--gold); content: ""; } .comparison-eyebrow::before { margin-right: 20px; } .comparison-eyebrow::after { margin-left: 20px; } .comparison-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .comparison-heading h2 { margin: 0; font: 700 37px/47.7px "Noto Serif JP", serif; letter-spacing: .12em; text-shadow: 0 0 11px rgba(0,0,0,.25); } .comparison-heading p { margin: 0; font: 400 20px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; text-align: center; } .comparison-table { width: 843px; max-width: 100%; font: 400 16px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .comparison-table-head, .comparison-row { display: grid; grid-template-columns: 143px 350px 350px; } .comparison-table-head { height: 58px; align-items: center; } .comparison-table-head span { grid-column: 1 / span 2; text-align: center; } .comparison-table-head strong { display: grid; grid-column: 3; height: 58px; place-items: center; color: var(--gold); background: transparent; font: 700 16px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .comparison-row { min-height: 59px; border-top: 1px solid #625a4e; align-items: center; } .comparison-row:last-child { border-bottom: 1px solid #625a4e; } .comparison-row > strong { padding-left: 0; font-weight: 600; } .comparison-row > span { text-align: center; } .comparison-row > b { display: flex; min-height: 59px; align-items: center; justify-content: center; padding: 16px; color: #2f2f2f; background: var(--cream); font-weight: 700; text-align: center; } .comparison-row > b em { color: var(--gold); font-style: normal; } .comparison-note { width: 843px; max-width: 100%; margin: 18px auto 0; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.7; text-align: center; } /* Figma 37:914 — SUPPORT / one-window coordination */ .support-section { padding: 80px 24px; color: #fff; } .support-inner { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 855px; max-width: 100%; margin: 0 auto; } .support-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; } .support-eyebrow { display: inline-flex; align-items: center; justify-content: center; color: var(--gold); font: 600 16px/34.2px "Noto Serif JP", serif; } .support-eyebrow::before, .support-eyebrow::after { width: 40px; height: 1px; background: var(--gold); content: ""; } .support-eyebrow::before { margin-right: 28px; } .support-eyebrow::after { margin-left: 28px; } .support-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .support-heading h2 { margin: 0; font: 700 37px/47.7px "Noto Serif JP", serif; letter-spacing: 4.6px; text-shadow: 0 0 11px rgba(0,0,0,.25); } .support-mobile-break { display: none; } .support-heading p { margin: 0; font: 400 16px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .support-visual { display: flex; width: 855px; height: 300px; align-items: center; justify-content: center; } .support-visual-content { display: flex; align-items: center; justify-content: center; gap: 64px; } .support-old, .support-new { position: static; text-align: center; } .support-old { width: 144px; } .support-new { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 304px; height: 300px; border: 1px solid var(--gold); } .support-max { display: block; margin-bottom: 4px; font: 700 20px/1 "Noto Sans CJK JP", "Noto Sans JP", sans-serif; color: #fff; text-shadow: 0 0 11px rgba(0,0,0,.25); } .support-number { display: flex; align-items: baseline; justify-content: center; color: #fff; text-shadow: 0 0 11px rgba(0,0,0,.25); } .support-number strong { color: var(--gold); font: 400 180px/.8 "Noto Serif JP", serif; letter-spacing: 4.6px; } .support-old .support-number strong { color: #fff; font-size: 160px; } .support-number span { font: 700 37px/47.7px "Noto Serif JP", serif; } .support-old p, .support-new p { margin: 18px 0 0; font: 400 16px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .support-new p { margin: 18px 0 0; line-height: 24px; } .support-arrow { display: block; flex: 0 0 58px; width: 58px; height: 58px; border-top: 5px solid #fff; border-right: 5px solid #fff; transform: rotate(45deg); } .support-services { display: flex; flex-direction: column; gap: 9px; width: 855px; max-width: 100%; } .support-service-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .support-service-row span { padding: 9px 24px; border: 1px solid #e5e5e5; font: 400 15px/27px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .support-foot { margin: 0; font: 600 18px/34.2px "Noto Sans CJK JP", "Noto Sans JP", sans-serif; text-align: center; } /* Information sections */ .light-section { color: var(--white); background: var(--cream-soft); } .info { padding: 80px 0; text-align: center; } .info h2 { margin: 0 0 40px; font: 700 37px/1.29 "Noto Serif JP", serif; letter-spacing: .12em; } .info p { margin: 0 auto; max-width: 900px; line-height: 2.14; } .included { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 8px; max-width: 836px; margin: 40px auto 0; } .included span, .check { padding: 8px 12px; border: 1px solid #fff; border-radius: 4px; font-size: 14px; } .included span::before, .check::before { content: "✓"; margin-right: 7px; color: var(--gold); } .hub { display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; gap: 24px; max-width: 855px; margin: 0 auto 40px; } .hub-card { padding: 28px; border: 1px solid rgba(255,255,255,.5); text-align: center; } .hub-card.after { background: rgba(183,140,69,.18); } .hub-number { font: 700 80px/.9 "Noto Serif JP", serif; color: var(--gold); } .hub-number small { font-size: 24px; } .hub-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } .hub-list span { padding: 4px 8px; border: 1px solid rgba(255,255,255,.55); font-size: 13px; } .hub-arrow { text-align: center; font-size: 44px; color: var(--gold); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1146px; margin: 0 auto 40px; border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); } .stat { padding: 28px 18px; border-right: 1px solid rgba(255,255,255,.5); } .stat:last-child { border-right: 0; } .stat strong { display: block; color: var(--gold); font: 500 64px/.95 "Noto Serif JP", serif; } .perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto 40px; } .perk { padding: 40px 24px; color: var(--ink); background: var(--cream); text-align: center; } .perk .badge { color: var(--gold); border-color: var(--gold); } .perk strong { display: block; margin: 18px 0; color: var(--gold); font: 500 56px/1 "Noto Serif JP", serif; } .steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; max-width: 1146px; margin: 0 auto; } .step { display: grid; justify-items: center; gap: 16px; text-align: center; } .step-index { display: grid; place-items: center; width: 80px; height: 80px; color: var(--brown); background: linear-gradient(#fff, #a5a5a5); border-radius: 50%; font: 400 16px/1 "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .step small { padding: 4px 12px; border: 1px solid #fff; border-radius: 999px; font-size: 11px; } .qa { max-width: 1236px; margin: 0 auto; text-align: left; } .section-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .section-heading h2, .section-heading > p { margin: 0; } .qa-heading { margin-bottom: 40px; } .qa-heading h2 { font-weight: 700; } .qa-group { margin-top: 40px; } .qa-group h3 { margin: 0 0 16px; color: var(--gold); font: 700 20px/1.5 "Noto Serif JP", serif; } .qa-group h3 em { font: 400 14px/1 "Noto Sans CJK JP", "Noto Sans JP", sans-serif; } .qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; } details { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.35); } summary { cursor: pointer; list-style: none; font-size: 14px; } summary::before { content: "＋"; display: inline-block; width: 26px; color: var(--gold); } details[open] summary::before { content: "−"; } .answer { padding: 12px 26px; color: #ddd; font-size: 13px; } .assure { max-width: 1146px; margin: 0 auto; text-align: center; } .assure h2 { margin-bottom: 16px; } .assure-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .assure-card { padding: 20px; border: 1px solid rgba(255,255,255,.55); } .form-card { max-width: 900px; margin: 62px auto 0; padding: 48px; color: var(--ink); background: var(--cream); text-align: center; } .form-card h3 { margin: 0 0 32px; font: 700 30px/1.5 "Noto Serif JP", serif; } .form-card .cta { min-width: 0; } .form-note { margin: 24px 0 0; font-size: 13px; } footer { min-height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 36px 24px 106px; text-align: center; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; } .footer-nav a { color: #fff; font-size: 13px; text-decoration: none; transition: opacity 500ms ease-out; } .footer-nav a:hover { opacity: .65; } footer p { margin: 0; font-size: 14px; } .floating-cta { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 26px; width: 100%; height: 70px; padding: 0 24px; color: #fff; background: rgba(47,47,47,.89); opacity: 0; transform: translateY(32px); pointer-events: none; transition: opacity 1200ms cubic-bezier(.22,1,.36,1), transform 1200ms cubic-bezier(.22,1,.36,1); } .floating-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; } .floating-cta p { margin: 0; color: #fff; font: 700 12px/normal var(--font-sans); text-shadow: 0 4px 11px rgba(0,0,0,.25); } .cta--floating { width: auto; height: 42px; padding: 8px 16px; font-size: 14px; line-height: normal; } /* Quiet scroll reveals: keep the page visible when JavaScript is unavailable. */ .js-motion-ready .js-reveal { opacity: 0; transition: opacity 1100ms cubic-bezier(.22,1,.36,1), transform 1100ms cubic-bezier(.22,1,.36,1), clip-path 1400ms cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); } .js-motion-ready .js-reveal.is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } .js-motion-ready .js-reveal--text { transform: translateY(18px); } .js-motion-ready .js-reveal--left { transform: translateX(-22px); } .js-motion-ready .js-reveal--right { transform: translateX(22px); } .js-motion-ready .js-reveal--bottom { transform: translateY(24px); } .js-motion-ready .js-reveal--vertical { transform: translateY(18px); } .js-motion-ready .js-reveal--image { transform: scale(1.035); clip-path: inset(0 8% 0 8%); transition-duration: 1500ms; } .hero::before { will-change: transform; } .js-motion-ready .plan-bg.is-switching { opacity: 0; transform: scale(1.018); transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 1000ms cubic-bezier(.22,1,.36,1); } @keyframes hero-breathe { from { transform: scale(1.01); } to { transform: scale(1); } } /* Figma 37:1069 / 37:1102 — reason and benefit are one grouped section. */ .reason-benefit-section { display: flex; flex-direction: column; gap: 80px; padding: 80px 24px; color: #fff; background: rgba(246,234,212,.13); text-align: center; } .reason-block, .benefit-block { display: flex; flex-direction: column; align-items: center; width: min(1146px, 100%); margin: 0 auto; } .section-eyebrow { margin: 0; color: var(--gold); font: 400 16px/34.2px "Noto Serif JP", serif; letter-spacing: 4.6px; } .reason-block h2, .benefit-heading h2, .estimate-main h2 { margin: 0; color: #fff; font: 700 37px/47.7px "Noto Serif JP", serif; letter-spacing: 4.6px; } .flow-heading h2 { margin: 0; color: #fff; font: 600 37px/47.7px "Noto Serif JP", serif; letter-spacing: 4.6px; } .reason-metrics { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 48px; } .reason-metric { display: flex; flex-direction: column; justify-content: center; min-height: 226px; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.3); } .reason-metric:last-child { border-right: 0; } .reason-metric p { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; } .reason-metric strong { color: var(--gold); font: 400 64px/1 "Noto Serif JP", serif; letter-spacing: 4.6px; } .reason-metric span { font: 700 32px/1 "Noto Serif JP", serif; } .reason-metric small { display: block; margin-top: 34px; font: 400 14px/24px var(--font-sans); } .benefit-block { gap: 62px; } .benefit-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; } .benefit-card { width: 900px; max-width: 100%; min-height: 482px; padding: 48px 48px 24px; color: var(--ink); background: var(--cream); } .benefit-card-lead, .benefit-note { margin: 0; font: 400 18px/30px var(--font-sans); } .benefit-card-main { display: flex; align-items: center; justify-content: center; gap: 38px; height: 296px; } .benefit-card-main img { width: 352px; height: auto; } .benefit-copy { text-align: left; } .benefit-copy > span { color: var(--gold); font: 600 20px/30px "Noto Serif JP", serif; letter-spacing: 4.6px; } .benefit-copy p { display: flex; align-items: baseline; gap: 8px; margin: 0; } .benefit-copy strong { color: var(--gold); font: 400 80px/1 "Noto Serif JP", serif; letter-spacing: 4.6px; } .benefit-copy b { color: #535353; font: 700 32px/1 var(--font-sans); } .benefit-copy em { color: #535353; font: 700 56px/1 "Noto Serif JP", serif; letter-spacing: 4.6px; font-style: normal; } .benefit-note { font-size: 14px; line-height: 24px; } .benefit-block > .cta, .estimate-main > .cta { margin-top: 0; } /* Figma 37:1197 — six-step consultation flow. */ .flow-section { padding: 80px 24px; color: #fff; } .flow-inner { display: flex; flex-direction: column; align-items: center; gap: 48px; width: min(1236px, 100%); margin: 0 auto; } .flow-heading { text-align: center; } .flow-heading > p:last-child { margin: 0; font: 400 18px/34.2px var(--font-sans); } .flow-steps { display: flex; align-items: center; justify-content: center; width: min(1050px, 100%); } .flow-step { display: flex; flex: 0 0 136px; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .step-icon { display: grid; width: 80px; height: 80px; place-items: center; border-radius: 50%; background: linear-gradient(#fff, #a5a5a5); } .step-icon img { width: 54px; height: 54px; object-fit: contain; } .flow-step b { min-height: 48px; font: 700 16px/24px var(--font-sans); letter-spacing: 2px; } .flow-step small { padding: 8px 12px; border: 1px solid #fff; border-radius: 41px; font: 700 12px/16px var(--font-sans); letter-spacing: 2px; } .flow-steps > i { flex: 1 1 auto; height: 1px; margin: 0 12px; background: rgba(255,255,255,.55); } /* Figma 37:1307 — final estimate block and six-person lodging route. */ .estimate-section { padding: 80px 24px; color: #fff; background: rgba(246,234,212,.13); } .estimate-inner { display: flex; flex-direction: column; align-items: center; gap: 82px; width: min(900px, 100%); margin: 0 auto; } .estimate-main { display: flex; flex-direction: column; align-items: center; gap: 52px; width: 843px; max-width: 100%; text-align: center; } .estimate-intro { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 703px; max-width: 100%; } .estimate-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .estimate-heading p { margin: 0; font: 400 20px/34.2px var(--font-sans); } .estimate-actions { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 746px; max-width: 100%; } .estimate-checks { display: flex; justify-content: center; gap: 17px; width: 100%; } .estimate-checks span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 12px; border: 1px solid #fff; border-radius: 4px; font: 700 14px/24px var(--font-sans); letter-spacing: 2px; } .estimate-checks span::first-letter { font-size: 18px; } .estimate-main .form-note { margin: 0; font: 400 14px/34.2px var(--font-sans); } .estimate-plan { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 900px; max-width: 100%; height: 379px; color: var(--ink); background: var(--cream); text-align: center; } .estimate-plan p { margin: 0; font: 400 14px/24px var(--font-sans); } .estimate-plan h3 { margin: 48px 0; color: var(--gold); font: 700 30px/43px "Noto Serif JP", serif; letter-spacing: 4.6px; } @media (max-width: 1024px) { .cta--large { max-width: 440px; } } @media (max-width: 1023px) { .inner { width: min(var(--max), calc(100% - 96px)); } .hero { min-height: 720px; } .vertical-copy { right: 32px; transform: scale(.78); transform-origin: top right; } .hero-copy { left: 48px; width: min(720px, calc(100% - 96px)); } .intro-copy { left: 6%; width: 48%; padding-right: 24px; } .intro-photo-main { left: 60%; width: 36%; } .intro-photo-sub { left: 60%; width: 25%; } .plan-content { margin-left: 6%; width: 60%; } .plan-thumbs { right: 32px; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.5); border-right: 0; } .steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; } .form-card .cta { min-width: 0; width: 100%; } .flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 0; } .flow-steps > i { display: none; } .flow-step { width: auto; flex: none; } .benefit-card-main { gap: 12px; } .benefit-card-main img { width: 42%; } .support-inner { width: 100%; } .support-services { width: 100%; } } @media (max-width: 767px) { /* Let every heading and paragraph wrap naturally on narrow screens. */ main h1 br, main h2 br, main h3 br, main p br { display: none !important; } .inner { width: min(100% - 32px, 480px); } .hero { --hero-photo-height: min(108.3721vw, 466px); min-height: calc(var(--hero-photo-height) + 466px); padding-top: var(--hero-photo-height); } .hero::before, .hero::after { position: absolute; z-index: -1; left: 0; right: 0; content: ""; background-image: url("../../images/mv/mv-background.jpg"); background-image: image-set(url("../../images/mv/mv-background.webp") type("image/webp"), url("../../images/mv/mv-background.jpg") type("image/jpeg")); background-repeat: no-repeat; } .hero::before { top: 0; bottom: auto; height: var(--hero-photo-height); background-size: 219.33% 107.83%; background-position: left 99.36%; } .hero::after { top: var(--hero-photo-height); bottom: 0; background-size: 219.58% 117.14%; background-position: right center; } .site-header { width: 190px; height: 60px; padding: 10px 14px; background: #10328a; } .site-logo { width: 162px; } .vertical-copy { top: min(11.3953vw, 49px); right: 9.07%; gap: min(5.5814vw, 24px); transform: none; } .vertical-copy > span { padding: 8px 5px; font-size: min(5.5814vw, 24px); line-height: 1; letter-spacing: min(1.3256vw, 5.7px); text-orientation: upright; } .vertical-copy > span:last-child { color: #2a2a2a; } .hero-punctuation { display: none; } .hero-copy { position: relative; left: auto; top: auto; width: min(100% - 32px, 378px); margin: 0 auto; padding: 73px 0 50px; } .hero .problem-list { gap: 9px; margin-bottom: 21px; } .hero .problem { flex: 1; min-width: 0; width: auto; height: 64px; } .hero .problem span { font-size: clamp(11px, 3.2558vw, 14px); font-weight: 700; } .hero .problem b { font-size: 18px; } .hero-copy > .eyebrow { font-size: clamp(15px, 4.6512vw, 20px); line-height: 34.2px; letter-spacing: 0; } .hero h1 { font-size: clamp(28px, 8.1395vw, 35px); line-height: 1.45; letter-spacing: 2px; } .hero .sub { margin: 0; font-size: clamp(14px, 4.186vw, 18px); line-height: 34.2px; font-weight: 700; } .hero .sub strong { font-size: clamp(20px, 5.814vw, 25px); line-height: 34.2px; } .hero-mobile-break { display: block; } .hero-copy > .cta { display: none; } .cta { width: 100%; height: 56px; padding: 0 16px; font-size: 16px; line-height: 1.5; } .intro { min-height: 720px; padding-bottom: 24px; } .intro-copy { position: relative; left: auto; top: auto; width: auto; padding: 56px 24px 0; } .intro h2 { font-size: 24px; letter-spacing: .08em; } .intro-photo-main { position: relative; top: auto; left: auto; width: 70%; margin: 48px auto 0; } .intro-photo-sub { position: relative; top: auto; left: auto; width: 46%; margin: -36px 0 0 4%; } .plans-heading { min-height: 320px; padding: 24px; } .plans-heading::before { width: 126px; height: 115px; } .plans-heading::after { width: 131.5px; height: 127px; } .plans-heading h2 { font-size: 28px; letter-spacing: .08em; } .plans-heading p { font-size: 14px; } .plans-heading p br { display: none; } .plan { min-height: 620px; padding-bottom: 88px; } .plan::after { width: 100%; background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.24)); } .plan-content { width: calc(100% - 48px); margin: 0 24px; padding-top: 48px; } .plan-kicker { margin-top: 90px; } .plan h3 { font-size: 34px; } .plan-label { height: 42px; font-size: 20px; } .plan-label strong { font-size: 20px; } .plan-label--compact strong { font-size: 20px; } .plan-kicker { margin-top: 74px; font-size: 16px; line-height: 1.5; } .plan-venue { margin-top: 8px; font-size: 18px; line-height: 1.6; white-space: normal; } .plan h3 { margin-top: 18px; font-size: 34px; line-height: 1.15; white-space: normal; } .plan-02 h3 { font-size: 32px; } .plan-thumbs { position: relative; right: auto; bottom: auto; display: flex; gap: 6px; margin: 32px 16px 0; } .plan-thumbs img { width: 80px; height: 50px; } .info { padding: 56px 0; } .info h2 { font-size: 28px; } .plan-details { padding: 56px 16px; } .plan-details-inner { gap: 28px; } .plan-details-heading { font-size: 20px; line-height: 1.8; } .itinerary-row { grid-template-columns: 88px 1fr; } .itinerary-route, .itinerary-day { font-size: 12px; } .plan-details .cta { height: 68px; padding: 0 16px; font-size: 16px; line-height: 1.5; } .comparison-section { padding: 56px 16px; } .comparison-inner { gap: 28px; } .comparison-intro { gap: 18px; } .comparison-heading { white-space: normal; text-align: center; } .comparison-heading h2 { font-size: 28px; line-height: 1.5; } .comparison-heading p { font-size: 15px; line-height: 1.8; } .comparison-table { overflow-x: auto; font-size: 12px; } .comparison-table-head, .comparison-row { min-width: 680px; grid-template-columns: 116px 282px 282px; } .comparison-table-head { height: 48px; } .comparison-table-head strong { height: 48px; font-size: 13px; } .comparison-row > b { min-height: 59px; padding: 8px; } .comparison-note { font-size: 11px; text-align: left; } .support-section { padding: 56px 16px; } .support-inner { gap: 32px; } .support-heading { white-space: normal; } .support-heading h2 { font-size: 28px; line-height: 1.5; letter-spacing: .08em; } .support-mobile-break { display: block; } .support-heading p { font-size: 14px; line-height: 1.8; } .support-visual { width: 100%; height: 250px; } .support-visual-content { width: 100%; gap: 8px; } .support-old { width: 31%; } .support-new { width: 51%; height: 250px; margin-left: 16px; } .support-max { font-size: 13px; } .support-number strong { font-size: 120px; } .support-old .support-number strong { font-size: 108px; } .support-number span { font-size: 25px; } .support-old p, .support-new p { font-size: 12px; } .support-arrow { position: static; flex: 0 0 28px; width: 28px; height: 28px; border-width: 3px; transform: translateX(-4px) rotate(45deg); } .support-services { align-items: flex-start; } .support-service-row { justify-content: flex-start; } .support-service-row span { padding: 7px 14px; font-size: 12px; } .support-foot { font-size: 14px; line-height: 1.8; } .plan-details-heading br { display: none; } /* Override the shared mobile rule for the PLAN 01 requested break. */ .plan01-heading-break { display: inline; } .plan01-heading-break br { display: block; } .hub, .perks, .assure-cards { grid-template-columns: 1fr; } .hub { gap: 8px; } .hub-arrow { transform: rotate(90deg); } .stats { grid-template-columns: 1fr; } .stat:last-child { grid-column: auto; border-top: 0; } .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.5); } .stat:last-child { border-bottom: 0; } .steps { grid-template-columns: repeat(2, 1fr); } .qa-grid { grid-template-columns: 1fr; } .form-card { padding: 28px 16px; } .form-card h3 { font-size: 22px; } .reason-benefit-section, .flow-section, .estimate-section { padding: 56px 16px; } .reason-benefit-section { gap: 56px; } .reason-block h2, .benefit-heading h2, .flow-heading h2, .estimate-main h2 { font-size: 28px; line-height: 1.5; letter-spacing: .08em; } .reason-metrics { grid-template-columns: 1fr; margin-top: 28px; } .reason-metric { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.3); } .reason-metric:last-child { border-bottom: 0; } .reason-metric strong { font-size: 48px; } .reason-metric span { font-size: 24px; } .benefit-block { gap: 28px; } .benefit-card { height: auto; min-height: 430px; padding: 28px 16px 20px; } .benefit-card-lead { font-size: 13px; line-height: 1.7; } .benefit-card-main { height: auto; min-height: 250px; flex-direction: column; gap: 12px; } .benefit-card-main img { width: min(300px, 90%); } .benefit-copy { text-align: center; } .benefit-copy strong { font-size: 52px; } .benefit-copy b { font-size: 20px; } .benefit-copy em { font-size: 38px; } .benefit-note { font-size: 11px; } .cta--large { width: 100%; height: 56px; padding: 0 16px; } .cta--small { width: 100%; height: 56px; padding: 0 16px; } .flow-inner { gap: 28px; } .flow-heading > p:last-child { font-size: 14px; line-height: 1.8; } .flow-step { flex-basis: 50%; } .estimate-inner { gap: 56px; } .estimate-main { gap: 36px; } .estimate-intro, .estimate-actions { width: 100%; } .estimate-heading h2 { white-space: normal; } .estimate-heading p { font-size: 15px; line-height: 1.8; } .estimate-checks { flex-wrap: wrap; gap: 8px; } .estimate-checks span { font-size: 12px; letter-spacing: 0; } .estimate-actions > .cta { width: 100%; height: 56px; padding: 0 16px; } .estimate-plan { height: auto; min-height: 420px; padding: 32px 24px 40px; } .estimate-plan h3 { margin: 32px 0; font-size: 24px; line-height: 1.6; letter-spacing: .08em; } .floating-cta { gap: 14px; padding: 0 16px; } .floating-cta p { font-size: 11px; } } @media (max-width: 767px) { .hero::before { background-image: image-set(url("../../images/mv/mv-background-sp.webp") type("image/webp"), url("../../images/mv/mv-background.jpg") type("image/jpeg")); } footer { padding-bottom: 106px; } .js-motion-ready .js-reveal--text { transform: translateY(12px); } .js-motion-ready .js-reveal--left, .js-motion-ready .js-reveal--right { transform: translateY(14px); } .js-motion-ready .js-reveal--bottom { transform: translateY(16px); } .js-motion-ready .js-reveal--vertical { transform: translateY(12px); } .js-motion-ready .hero-copy > *, .js-motion-ready .vertical-copy { transform: translateY(12px); } .js-motion-ready .js-reveal--image { transform: scale(1.015); clip-path: inset(0 4% 0 4%); transition-duration: 1200ms; } .hero::before { animation-duration: 7s; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transform: none !important; } .js-motion-ready .js-reveal, .js-motion-ready .js-reveal.is-visible { opacity: 1; clip-path: none; } } @media (max-width: 767px) { .floating-cta { gap: 0; } .floating-cta p { display: none; } .cta--floating { width: 100%; max-width: 310px; height: 42px; } }