/* ============================================================================= * TOMODACHI LP — style.css * "Calculated white" — warm editorial light system. * Design tokens mirror the app's app_colors.dart exactly. * =========================================================================== */ /* --------------------------------------------------------------------------- * 1. Design tokens (CSS custom properties) * ------------------------------------------------------------------------- */ :root { /* — Color (identical to app_colors.dart) */ --canvas: #FAF9F6; /* page background — warm paper */ --surface: #F4F2EC; /* subtle raised surface */ --surface-alt: #EFEDE6; /* alt fill / chips */ --hairline: #E5E2D9; /* 0.5–1px borders */ --white: #FFFFFF; /* cards on canvas */ --black: #141414; /* text & primary button */ --ink: #2A2A2C; /* secondary text */ --charcoal: #3A3A3C; --grey: #8A8A8F; /* captions, hints */ --grey-light: #B8B8BD; --gold: #BE9E5C; /* pinpoint accent */ --gold-dark: #9A7E42; --gold-light: #E7D6A8; --success: #4A7C59; --danger: #B3402F; /* — Typography */ --font-serif-latin: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-serif-jp: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif; /* — Spacing rhythm */ --section-y: clamp(80px, 12vw, 160px); --gutter: clamp(20px, 5vw, 48px); --maxw: 1120px; --maxw-text: 760px; /* — Radius (sharp editorial: 2–12px) */ --r-sm: 4px; --r-md: 6px; --r-lg: 12px; /* — Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* --------------------------------------------------------------------------- * 2. Reset / base * ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-serif-jp); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { font-weight: 700; color: var(--black); margin: 0; line-height: 1.2; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* Language visibility — controlled by via JS (i18n.js) */ [data-lang-en] { display: none; } html[data-lang="en"] [data-lang-ja] { display: none; } html[data-lang="en"] [data-lang-en] { display: revert; } /* --------------------------------------------------------------------------- * 3. Layout helpers * ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .measure { max-width: var(--maxw-text); margin-inline: auto; } /* Small editorial label above a heading, e.g. "02 — OUR STORY" */ .eyebrow { font-family: var(--font-serif-jp); font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--grey); text-transform: uppercase; } .eyebrow .num { color: var(--gold); font-family: var(--font-serif-latin); } /* Gold pinpoint divider — used as a "dot", not decoration */ .gold-rule { width: 28px; height: 1.5px; background: var(--gold); border: 0; margin: 0; } .gold-rule.wide { width: 64px; } .gold-rule.center { margin-inline: auto; } /* --------------------------------------------------------------------------- * 4. Buttons * ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: var(--r-md); font-family: var(--font-serif-jp); font-size: 15px; font-weight: 600; letter-spacing: 1.5px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); border: 1px solid transparent; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--black); color: var(--white); } .btn-primary:hover { background: #000; } .btn-outline { background: transparent; color: var(--black); border-color: var(--black); } .btn-outline:hover { background: var(--black); color: var(--white); } .btn-sm { min-height: 40px; padding: 0 18px; font-size: 13px; letter-spacing: 1px; } .btn[aria-disabled="true"], .btn.is-disabled { pointer-events: none; opacity: .45; cursor: not-allowed; } /* --------------------------------------------------------------------------- * 5. Navigation * ------------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: 64px; display: flex; align-items: center; background: color-mix(in srgb, var(--canvas) 86%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } .nav.is-scrolled { border-bottom-color: var(--hairline); } .nav .container { display: flex; align-items: center; gap: 24px; } .nav-logo { font-family: var(--font-serif-latin); font-weight: 700; font-size: 19px; letter-spacing: 3px; color: var(--black); white-space: nowrap; } .nav-links { display: flex; gap: 26px; margin-left: auto; list-style: none; padding: 0; } .nav-links a { font-size: 13.5px; letter-spacing: .5px; color: var(--ink); position: relative; padding-block: 4px; transition: color .2s var(--ease); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width .28s var(--ease); } .nav-links a:hover { color: var(--black); } .nav-links a:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 14px; margin-left: 8px; } /* Language toggle */ .lang-toggle { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; font-family: var(--font-serif-latin); } .lang-toggle button { appearance: none; border: 0; background: transparent; padding: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--grey); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .lang-toggle button[aria-pressed="true"] { background: var(--black); color: var(--white); } /* Mobile nav toggle */ .nav-burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: transparent; cursor: pointer; align-items: center; justify-content: center; } .nav-burger svg { width: 20px; height: 20px; stroke: var(--black); } @media (max-width: 900px) { .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0; background: var(--canvas); border-bottom: 1px solid var(--hairline); margin: 0; padding: 8px 0; transform: translateY(-110%); transition: transform .35s var(--ease); box-shadow: 0 12px 24px -18px rgba(20,20,20,.25); } .nav-links.is-open { transform: translateY(0); } .nav-links a { padding: 14px var(--gutter); } .nav-links a::after { display: none; } .nav-burger { display: inline-flex; } .nav-actions { margin-left: 0; } .nav .container { gap: 12px; } } /* --------------------------------------------------------------------------- * 6. Sakura — lightweight CSS/SVG placeholder (no heavy assets) * A soft warm vignette + a few drifting petals. Replaced later by Kaito. * ------------------------------------------------------------------------- */ .sakura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .sakura::after { /* white veil so text stays the priority */ content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 8%, rgba(231,214,168,.20), transparent 55%), radial-gradient(90% 80% at 8% 92%, rgba(190,158,92,.10), transparent 60%), linear-gradient(180deg, rgba(250,249,246,.30), rgba(250,249,246,.72)); } .petal { position: absolute; top: -8%; width: 14px; height: 14px; background: var(--gold-light); opacity: .55; border-radius: 12px 1px 12px 1px; animation: petal-fall linear infinite; will-change: transform; } @keyframes petal-fall { 0% { transform: translateY(-10vh) translateX(0) rotate(0deg); } 100% { transform: translateY(112vh) translateX(40px) rotate(220deg); } } /* --------------------------------------------------------------------------- * 7. Hero * ------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 64px; overflow: hidden; } .hero .container { position: relative; z-index: 1; } /* — Hero video background ("計算された白" になじませる桜吹雪) * 最背面に動画を全面敷き、上に白ベールを重ねてテキスト可読性を最優先。 * 読めない環境でも背面は canvas 色なので破綻しない。 */ .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--canvas); /* 動画が読めない/読み込み前でも canvas 色で破綻しない */ pointer-events: none; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 彩度を少し落として淡く上品に。桜の薄ピンクがほんのり残る程度。 */ filter: saturate(0.82) brightness(1.06) contrast(0.95); } /* 白ベール — テキスト（黒ワードマーク・金タグライン）が必ず読めるように。 * canvas 色の半透明 + 下端をやや濃くして文字側を持ち上げる。 */ .hero-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 8%, rgba(231,214,168,.14), transparent 55%), linear-gradient(180deg, rgba(250,249,246,.62), rgba(250,249,246,.74) 55%, rgba(250,249,246,.86)); } .hero-wordmark { font-family: var(--font-serif-latin); font-weight: 700; font-size: clamp(56px, 13vw, 148px); letter-spacing: clamp(4px, 1.2vw, 12px); line-height: .95; color: var(--black); } .hero-tagline { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .hero-tagline span { font-family: var(--font-serif-latin); font-style: italic; font-size: clamp(16px, 2.4vw, 24px); letter-spacing: 1px; color: var(--gold-dark); } .hero-sub { margin-top: 28px; max-width: 520px; font-size: clamp(16px, 2vw, 20px); line-height: 1.9; color: var(--ink); } .hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; } .hero-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1; font-family: var(--font-serif-latin); font-size: 11px; letter-spacing: 3px; color: var(--grey); display: flex; flex-direction: column; align-items: center; gap: 8px; } .hero-scroll .line { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: scroll-pulse 2.4s var(--ease) infinite; } @keyframes scroll-pulse { 0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* --------------------------------------------------------------------------- * 8. OUR STORY — the heart of the page * ------------------------------------------------------------------------- */ .story { position: relative; background: linear-gradient(180deg, var(--canvas), var(--surface) 50%, var(--canvas)); overflow: hidden; } .story .sakura::after { background: linear-gradient(180deg, rgba(250,249,246,.55), rgba(244,242,236,.78)); } .story .container { position: relative; z-index: 1; } .story-head { text-align: center; margin-bottom: clamp(48px, 9vw, 96px); } .story-head .eyebrow { display: inline-block; } .story-head h2 { font-family: var(--font-serif-latin); font-size: clamp(34px, 6vw, 60px); margin-top: 18px; letter-spacing: 1px; } .story-head .gold-rule { margin-top: 26px; } /* Each beat of the narrative reveals on scroll */ .beat { max-width: var(--maxw-text); margin-inline: auto; opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .beat.is-visible { opacity: 1; transform: none; } /* spacing between beats — the "間 (ma)" */ .beat + .beat { margin-top: clamp(40px, 7vw, 88px); } /* Country episode — small body text, leading "—" rhythm */ .beat-episode { font-size: clamp(16px, 2vw, 19px); line-height: 2.05; color: var(--ink); padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid transparent; } .beat-episode .dash { color: var(--gold); font-family: var(--font-serif-latin); margin-right: .4em; } .beat-episode em { font-style: normal; color: var(--black); font-weight: 600; } /* Realisation / pull-quote — large, quiet, gold or black */ .beat-quote { text-align: center; font-family: var(--font-serif-jp); font-weight: 600; font-size: clamp(22px, 4.2vw, 38px); line-height: 1.7; color: var(--black); letter-spacing: .5px; } .beat-quote.gold { color: var(--gold-dark); } /* Emphasised final line inside a pull-quote ("ずっと優しい。") — one step larger */ .beat-quote .bigger { display: block; margin-top: 6px; font-size: 1.3em; font-weight: 700; } /* Gold marker-pen underline for key lines — gold band under the lower part of the text. box-decoration-break keeps the band on every line when the text wraps (e.g.
). */ .mark-gold { background-image: linear-gradient( to top, rgba(190, 158, 92, .42) 0, rgba(190, 158, 92, .42) 34%, transparent 34% ); background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em .04em; } /* Lead paragraph — normal body, sets up the episodes (not a "—" episode) */ .beat-lead { text-align: center; font-size: clamp(16px, 2.1vw, 20px); line-height: 2; color: var(--ink); } .beat-quote .small { display: block; margin-top: 18px; font-size: clamp(15px, 2vw, 18px); font-weight: 400; line-height: 1.9; color: var(--ink); } /* Lead-in line before a pull-quote ("そこから気づいたのは、" / "そして、") — intentionally smaller than the quote it introduces */ .story-lead-in { text-align: center; font-family: var(--font-serif-jp); font-size: clamp(15px, 2vw, 18px); line-height: 1.9; color: var(--ink); } /* The vision — the climax of the section */ .beat-vision { text-align: center; padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 48px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .beat-vision .vision-quote { font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(24px, 5vw, 44px); line-height: 1.6; color: var(--black); } .beat-vision .vision-quote .accent { color: var(--gold-dark); } .beat-coda { text-align: center; font-size: clamp(16px, 2.2vw, 21px); line-height: 2; color: var(--ink); } .beat-coda strong { color: var(--black); } .beat-coda .final { display: block; margin-top: 28px; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(20px, 3.4vw, 30px); color: var(--black); letter-spacing: .5px; } .beat-sign { text-align: center; margin-top: 40px; font-size: clamp(14px, 2vw, 17px); letter-spacing: 1px; color: var(--grey); } /* --------------------------------------------------------------------------- * 8b. Shared section header (phase 2: PROBLEM / HOW / FEATURES) * Same form as story-head, reused so headings stay consistent. * ------------------------------------------------------------------------- */ .section-head { text-align: center; margin-bottom: clamp(44px, 8vw, 84px); } .section-head .eyebrow { display: inline-block; } .section-head h2 { font-family: var(--font-serif-jp); font-size: clamp(28px, 5vw, 48px); margin-top: 16px; letter-spacing: .5px; } .section-head .gold-rule { margin-top: 24px; } .section-head .section-lead { max-width: 600px; margin: 28px auto 0; font-size: clamp(15px, 2vw, 18px); line-height: 1.95; color: var(--ink); } /* --------------------------------------------------------------------------- * 11. THE PROBLEM — two-column contrast * ------------------------------------------------------------------------- */ .problem { background: var(--canvas); } .problem-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; /* 高さを揃える（stretch+transform無効化で上端も揃う） */ gap: clamp(20px, 3vw, 32px); max-width: var(--maxw); margin-inline: auto; } .problem-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px); max-width: none; /* .beat の max-width 制約を上書き */ height: 100%; /* グリッドセル全高にカードを伸ばす */ } /* 横並びカードは個別フェードしない（IntersectionObserver の発火タイミングが 左右で異なり、片方だけ translateY が残って上端がズレるのを防ぐ）。 フェード演出は section-head / problem-bridge 側の .beat が担う。 */ .problem-grid > .problem-card.beat { opacity: 1; transform: none; transition: none; margin-top: 0; /* REAL FIX: cancel `.beat + .beat` ma-spacing in the grid */ } .problem-card .problem-tag { display: inline-block; font-family: var(--font-serif-latin); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dark); padding-bottom: 6px; border-bottom: 1px solid var(--hairline); } .problem-card h3 { margin-top: 20px; font-family: var(--font-serif-jp); font-size: clamp(19px, 2.6vw, 24px); line-height: 1.5; color: var(--black); } .problem-list { list-style: none; margin: 22px 0 0; padding: 0; } .problem-list li { position: relative; padding-left: 22px; margin-top: 16px; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.85; color: var(--ink); } .problem-list li::before { content: ''; position: absolute; left: 0; top: .85em; width: 10px; height: 1.5px; background: var(--gold); } .problem-bridge { max-width: var(--maxw-text); margin: clamp(40px, 7vw, 72px) auto 0; text-align: center; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(20px, 3.4vw, 30px); line-height: 1.6; color: var(--black); } @media (max-width: 720px) { .problem-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * 12. HOW IT WORKS — three steps * ------------------------------------------------------------------------- */ .how { background: linear-gradient(180deg, var(--canvas), var(--surface) 60%, var(--canvas)); } .how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; /* 高さを揃える（stretch+transform無効化で上端も揃う） */ gap: clamp(20px, 3vw, 32px); max-width: var(--maxw); margin-inline: auto; } .how-step { position: relative; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(28px, 3.5vw, 40px); max-width: none; /* .beat の max-width 制約を上書き */ height: 100%; /* グリッドセル全高にカードを伸ばす */ } /* 横並びカードは個別フェードしない（発火タイミングのズレで上端がズレるのを防ぐ）。 フェード演出は section-head 側の .beat が担う。 */ .how-steps > .how-step.beat { opacity: 1; transform: none; transition: none; margin-top: 0; /* REAL FIX: cancel `.beat + .beat` ma-spacing in the grid */ } .how-num { font-family: var(--font-serif-latin); font-size: 14px; font-weight: 600; letter-spacing: 2px; color: var(--gold); } .how-icon { display: block; margin-top: 16px; color: var(--black); } .how-icon svg { width: 34px; height: 34px; } .how-step h3 { margin-top: 18px; font-family: var(--font-serif-jp); font-size: clamp(20px, 2.6vw, 26px); color: var(--black); } .how-step > p { margin-top: 12px; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.85; color: var(--ink); } /* Step 2 — the two restaurant modes (differentiator) */ .how-modes { list-style: none; margin: 18px 0 0; padding: 0; } .how-modes > li { margin-top: 14px; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--r-md); font-size: clamp(13px, 1.7vw, 15px); line-height: 1.7; color: var(--ink); } .how-mode-label { display: block; font-weight: 700; color: var(--black); letter-spacing: .5px; margin-bottom: 4px; } @media (max-width: 860px) { .how-steps { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * 9. Reduced motion — respect user preference * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .beat { opacity: 1 !important; transform: none !important; transition: none; } .petal { animation: none; display: none; } .hero-scroll .line { animation: none; } /* 動画は隠し、静止の canvas 色背景＋淡いベールにフォールバック */ .hero-video { display: none; } } /* --------------------------------------------------------------------------- * 10. Footer notice (minimal — full footer in phase 2) * ------------------------------------------------------------------------- */ .placeholder-note { position: fixed; left: 12px; bottom: 12px; z-index: 200; font-size: 11px; letter-spacing: .5px; color: var(--grey); background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 5px 10px; opacity: .8; } /* ============================================================================= * PHASE 3 — SAFETY / BUSINESS / KPI / TRY / REGISTER / PARTNERS / FOOTER * (追記のみ。既存セクションには触れない) * =========================================================================== */ /* Accessible visually-hidden label */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- * 14. SAFETY — checklist (success-green check + short text) * ------------------------------------------------------------------------- */ .safety { background: var(--canvas); } .safety-list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 28px); } .safety-item { display: flex; gap: 16px; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px); } .safety-check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--hairline)); color: var(--success); } .safety-check svg { width: 18px; height: 18px; } .safety-text h3 { font-family: var(--font-serif-jp); font-size: clamp(16px, 2.1vw, 19px); line-height: 1.5; color: var(--black); } .safety-text p { margin-top: 8px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.8; color: var(--ink); } @media (max-width: 720px) { .safety-list { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * 15. BUSINESS — three-way win + ecosystem diagram + revenue/market * ------------------------------------------------------------------------- */ .business { background: linear-gradient(180deg, var(--canvas), var(--surface) 55%, var(--canvas)); } .biz-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 28px); max-width: 960px; margin-inline: auto; } .biz-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(26px, 3.5vw, 36px); text-align: center; } /* grid cards: no per-card fade (avoid the .beat top-edge offset issue) */ .biz-three > .biz-card.beat, .partners-grid > .partner-card.beat { opacity: 1; transform: none; transition: none; margin-top: 0; max-width: none; } .biz-emoji { font-size: 30px; line-height: 1; } .biz-card h3 { margin-top: 14px; font-family: var(--font-serif-jp); font-size: clamp(18px, 2.4vw, 22px); color: var(--black); } .biz-card p { margin-top: 10px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.8; color: var(--ink); } /* Ecosystem diagram — CSS line art (traveler ⇄ student ⇄ shop ⇄ platform) */ .biz-eco { display: flex; justify-content: center; margin-top: clamp(48px, 8vw, 80px); } .eco-ring { position: relative; width: clamp(280px, 70vw, 360px); aspect-ratio: 1 / 1; } .eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); } .eco-node { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 84px; padding: 10px 14px; background: var(--white); border: 1px solid var(--hairline); border-radius: 999px; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(13px, 1.8vw, 15px); color: var(--black); transform: translate(-50%, -50%); white-space: nowrap; z-index: 1; } .eco-node--traveler { top: 0; left: 50%; } .eco-node--student { top: 50%; left: 100%; } .eco-node--shop { top: 100%; left: 50%; } .eco-node--ops { top: 50%; left: 0; border-color: var(--gold); color: var(--gold-dark); } .biz-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 4vw, 48px); max-width: var(--maxw-text); margin: clamp(48px, 8vw, 80px) auto 0; } .biz-block { max-width: none; } .biz-label { display: inline-block; font-family: var(--font-serif-latin); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dark); padding-bottom: 6px; border-bottom: 1px solid var(--hairline); } .biz-fee { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .biz-fee-num { font-family: var(--font-serif-latin); font-weight: 700; font-size: clamp(34px, 6vw, 52px); color: var(--black); line-height: 1; } .biz-fee-unit { font-size: clamp(13px, 1.8vw, 15px); color: var(--grey); } .biz-note { margin-top: 14px; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.9; color: var(--ink); } @media (max-width: 760px) { .biz-three { grid-template-columns: 1fr; } .biz-detail { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * 16. TRY — full-width app CTA block (sakura behind) * ------------------------------------------------------------------------- */ .try { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--canvas)); } .try .sakura::after { background: linear-gradient(180deg, rgba(250,249,246,.50), rgba(244,242,236,.82)); } .try .container { position: relative; z-index: 1; } .try-inner { text-align: center; max-width: 720px; } .try-inner .eyebrow { display: inline-block; } .try-head { font-family: var(--font-serif-jp); font-size: clamp(30px, 6vw, 56px); margin-top: 16px; letter-spacing: .5px; line-height: 1.25; } .try .gold-rule { margin-top: 24px; } .try-sub { margin-top: 24px; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.9; color: var(--ink); } .try-cta { margin-top: 36px; display: flex; justify-content: center; } .btn-lg { min-height: 60px; padding: 0 44px; font-size: 16px; } /* --------------------------------------------------------------------------- * 18. REGISTER — email form + contact line * ------------------------------------------------------------------------- */ .register { background: var(--canvas); } .register-wrap { max-width: var(--maxw-text); margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .register-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .register-form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 560px; margin-inline: auto; } .register-form input[type="email"] { flex: 1 1 240px; min-height: 52px; padding: 0 18px; font-family: var(--font-serif-jp); font-size: 15px; color: var(--black); background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-md); transition: border-color .25s var(--ease); } .register-form input[type="email"]:focus { outline: none; border-color: var(--gold); } .register-form .btn { flex: 0 0 auto; } .register-msg { flex: 1 0 100%; margin-top: 6px; text-align: center; font-size: 14px; letter-spacing: .5px; color: var(--success); } .register-contact { width: 100%; margin: clamp(28px, 5vw, 44px) auto 0; text-align: center; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.9; color: var(--ink); max-width: none; } .register-contact a { color: var(--gold-dark); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); } .register-contact a:hover { border-bottom-color: var(--gold); } /* --------------------------------------------------------------------------- * 19. FOR PARTNERS — two columns (restaurants / universities) * ------------------------------------------------------------------------- */ .partners { background: linear-gradient(180deg, var(--canvas), var(--surface) 60%, var(--canvas)); } .partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); max-width: 960px; margin-inline: auto; } .partner-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px); } .partner-icon { display: block; color: var(--black); } .partner-icon svg { width: 32px; height: 32px; } .partner-card h3 { margin-top: 18px; font-family: var(--font-serif-jp); font-size: clamp(19px, 2.6vw, 24px); color: var(--black); } .partner-card p { margin-top: 12px; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.85; color: var(--ink); } .partner-more { display: inline-block; margin-top: 18px; font-size: 14px; letter-spacing: .5px; color: var(--gold-dark); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); } .partner-more:hover { border-bottom-color: var(--gold); } @media (max-width: 720px) { .partners-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * 20. FOOTER * ------------------------------------------------------------------------- */ .footer { background: var(--surface); border-top: 1px solid var(--hairline); padding-top: clamp(56px, 8vw, 88px); } .footer-inner { display: grid; grid-template-columns: 1.2fr 1.8fr; gap: clamp(28px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); } .footer-logo { font-family: var(--font-serif-latin); font-weight: 700; font-size: 22px; letter-spacing: 3px; color: var(--black); } .footer-tagline { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--ink); } .footer-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px); margin: 0; } .footer-meta dt { font-family: var(--font-serif-latin); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); } .footer-meta dd { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink); word-break: break-word; } .footer-meta dd a { color: var(--gold-dark); } .footer-meta dd a:hover { border-bottom: 1px solid var(--gold); } .footer-base { border-top: 1px solid var(--hairline); padding-block: clamp(20px, 3vw, 28px); } .footer-disclaimer { font-size: 12px; line-height: 1.7; color: var(--grey); } .footer-copy { margin-top: 10px; font-family: var(--font-serif-latin); font-size: 12px; letter-spacing: 1px; color: var(--grey); } @media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; } .footer-meta { grid-template-columns: 1fr 1fr; } } /* ============================================================================= * PHASE 4 — THE INSIGHT (interlude) + BUSINESS "repeat visitors" sub-block * 「観光は消費される／人との繋がりは消費されない」コンセプト強化（追記のみ） * =========================================================================== */ /* --------------------------------------------------------------------------- * 21. THE INSIGHT — poetic interlude after the story (no section number) * ------------------------------------------------------------------------- */ .insight { background: var(--canvas); } .insight-head { text-align: center; margin-bottom: clamp(28px, 5vw, 44px); } .insight-head .eyebrow { display: inline-block; } .insight-quote { text-align: center; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(24px, 4.6vw, 42px); line-height: 1.6; letter-spacing: .5px; color: var(--black); } /* developer's lived experience — contrast of two columns (no giant numbers). "went back" vs "never returned" — the lived proof, shown as experience, not a metric. */ .insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; gap: clamp(18px, 3vw, 32px); max-width: 880px; margin: clamp(40px, 7vw, 72px) auto 0; } .insight-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(28px, 3.6vw, 40px) clamp(22px, 3vw, 32px); height: 100%; } /* the "went back" side gets the gold pinpoint; the "never returned" side stays quiet */ .insight-card.is-return { border-color: var(--gold-light); } .insight-card.is-once { background: var(--surface); } .insight-status { font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(17px, 2.4vw, 23px); line-height: 1.4; color: var(--gold-dark); letter-spacing: .5px; } .insight-status.muted { color: var(--grey); } .insight-place { margin-top: 12px; font-family: var(--font-serif-jp); font-weight: 600; font-size: clamp(13px, 1.7vw, 15px); letter-spacing: 1px; color: var(--ink); } .insight-reason { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); width: 100%; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.9; color: var(--ink); } .insight-close { max-width: var(--maxw-text); margin: clamp(40px, 7vw, 72px) auto 0; text-align: center; font-family: var(--font-serif-jp); font-size: clamp(16px, 2.2vw, 21px); line-height: 1.95; color: var(--ink); } @media (max-width: 760px) { .insight-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * 22. THE VALUE — "repeat visitors" sub-block (consumed vs not-consumed) * 旧 BUSINESS 内の小見出し。独立セクション THE VALUE(id=value/05) で使用。 * ------------------------------------------------------------------------- */ .value { background: linear-gradient(180deg, var(--canvas), var(--surface) 55%, var(--canvas)); } .biz-repeat { max-width: var(--maxw); margin: clamp(56px, 9vw, 96px) auto 0; padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--hairline); } /* THE VALUE セクション直下では見出し直後に来るため、上の罫線・余白を抑える */ .value .biz-repeat { margin-top: clamp(36px, 6vw, 56px); padding-top: 0; border-top: 0; } .biz-repeat-head { text-align: center; } .biz-repeat-head h3 { margin-top: 16px; font-family: var(--font-serif-jp); font-size: clamp(22px, 4vw, 36px); line-height: 1.4; letter-spacing: .5px; color: var(--black); } .biz-repeat-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(18px, 3vw, 28px); max-width: var(--maxw-text); margin: clamp(36px, 6vw, 56px) auto 0; } .biz-repeat-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(24px, 3.5vw, 34px); height: 100%; } .biz-repeat-card.is-connection { border-color: var(--gold); } .biz-repeat-tag { display: inline-block; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(14px, 1.9vw, 17px); color: var(--black); padding-bottom: 8px; border-bottom: 1px solid var(--hairline); } .biz-repeat-card.is-connection .biz-repeat-tag { color: var(--gold-dark); border-bottom-color: var(--gold-light); } .biz-repeat-list { list-style: none; margin: 18px 0 0; padding: 0; } .biz-repeat-list li { position: relative; padding-left: 22px; margin-top: 14px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.8; color: var(--ink); } .biz-repeat-list li::before { content: ''; position: absolute; left: 0; top: .8em; width: 10px; height: 1.5px; background: var(--gold); } .biz-repeat-examples { list-style: none; margin: clamp(36px, 6vw, 56px) auto 0; padding: 0; max-width: var(--maxw-text); } .biz-repeat-examples li { position: relative; padding-left: 22px; margin-top: 14px; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.85; color: var(--ink); } .biz-repeat-examples li:first-child { margin-top: 0; } .biz-repeat-examples li::before { content: ''; position: absolute; left: 0; top: .8em; width: 10px; height: 1.5px; background: var(--gold); } .biz-repeat-measure { max-width: var(--maxw-text); margin: clamp(28px, 5vw, 40px) auto 0; text-align: center; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.9; color: var(--grey); } .biz-repeat-punch { max-width: var(--maxw-text); margin: clamp(32px, 5vw, 48px) auto 0; text-align: center; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(18px, 3vw, 28px); line-height: 1.6; letter-spacing: .5px; color: var(--gold-dark); } @media (max-width: 720px) { .biz-repeat-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * 23. THE VALUE — "moat" / 競合との差別化（消費 vs 関係で土俵を変える） * THE VALUE(id=value/05) 内・.biz-repeat の締め。 * ------------------------------------------------------------------------- */ .biz-moat { max-width: var(--maxw-text); margin: clamp(40px, 6vw, 64px) auto 0; padding: clamp(28px, 4vw, 40px); text-align: center; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg); } .biz-moat .biz-label { margin-bottom: 14px; } .biz-moat-head { margin-top: 4px; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(20px, 3.4vw, 30px); line-height: 1.45; letter-spacing: .5px; color: var(--black); } .biz-moat-body { margin: clamp(18px, 3vw, 24px) auto 0; max-width: 56ch; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.9; color: var(--ink); } .biz-moat-body em { font-style: italic; color: var(--charcoal); } .biz-moat-quote { margin: clamp(26px, 4vw, 36px) auto 0; font-family: var(--font-serif-jp); font-weight: 700; font-size: clamp(19px, 3.2vw, 30px); line-height: 1.6; letter-spacing: .5px; color: var(--gold-dark); }