@import "tailwindcss";
@import "tw-animate-css";

/* Miyabi design reminder: quiet luxury meets Japanese editorial minimalism.
   Keep deep emerald as the anchor, champagne gold as a restrained signal, and
   use asymmetry, paper texture, and generous whitespace to make the page feel
   like a considered invitation rather than a generic landing page. */

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-serif: "Cormorant Garamond", "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.15rem;
  --background: oklch(0.985 0.008 84);
  --foreground: oklch(0.24 0.023 165);
  --card: oklch(0.995 0.004 84);
  --card-foreground: oklch(0.24 0.023 165);
  --primary: oklch(0.22 0.055 165);
  --primary-foreground: oklch(0.985 0.008 84);
  --border: oklch(0.82 0.025 84);
  --ring: oklch(0.64 0.105 83);
  --miyabi-emerald: #0b2b20;
  --miyabi-emerald-soft: #173b2d;
  --miyabi-gold: #d4af37;
  --miyabi-gold-light: #e6ca65;
  --miyabi-ivory: #fbfaf6;
  --miyabi-paper: #f1eee7;
  --miyabi-mist: #e4e0d6;
  --miyabi-ink: #203229;
  --miyabi-muted: #6f756d;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--miyabi-ivory); color: var(--miyabi-ink); font-family: "Noto Sans JP", sans-serif; }
body, button, input, textarea { font-feature-settings: "palt" 1; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 1px solid var(--miyabi-gold-light); outline-offset: 4px; }
::selection { background: var(--miyabi-gold); color: var(--miyabi-emerald); }

.miyabi-site { overflow: hidden; background: var(--miyabi-ivory); }
.section-shell { width: min(1240px, calc(100% - 88px)); margin: 0 auto; }
.section-pad { padding: 150px 0; }
.paper-texture { position: relative; background: var(--miyabi-ivory); }
.paper-texture::before { position: absolute; inset: 0; opacity: .2; content: ""; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.warm-section { background: var(--miyabi-paper); }
.emerald-section { position: relative; color: #f7f5ef; background: var(--miyabi-emerald); }
.emerald-section::after { position: absolute; content: "雅"; right: -5vw; top: 4%; color: rgba(230, 202, 101, .045); font: 600 clamp(24rem, 42vw, 52rem)/.8 "Noto Serif JP", serif; pointer-events: none; }
.emerald-section > * { position: relative; z-index: 1; }

.site-header { position: fixed; z-index: 20; display: flex; align-items: center; width: 100%; height: 82px; padding: 0 clamp(20px, 4vw, 68px); color: #fbfaf6; transition: background 280ms var(--ease-out), color 280ms var(--ease-out), box-shadow 280ms var(--ease-out); }
.site-header::after { position: absolute; left: clamp(20px, 4vw, 68px); right: clamp(20px, 4vw, 68px); bottom: 0; height: 1px; background: rgba(230, 202, 101, .35); content: ""; transform: scaleX(1); transform-origin: left; transition: transform 280ms var(--ease-out); }
.site-header.is-scrolled { color: var(--miyabi-ink); background: rgba(251, 250, 246, .92); box-shadow: 0 10px 30px rgba(11, 43, 32, .06); backdrop-filter: blur(18px); }
.site-header.is-scrolled::after { background: rgba(11, 43, 32, .16); }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark-frame { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.brand-mark-frame img { width: 23px; height: 23px; object-fit: contain; }
.brand-copy { display: grid; gap: 0; line-height: .9; }
.brand-copy strong { font: 600 20px/1 "Noto Serif JP", serif; letter-spacing: .08em; }
.brand-copy small { margin-top: 5px; font: 500 8px/1 "Cormorant Garamond", serif; letter-spacing: .25em; }
.desktop-nav { display: flex; gap: clamp(22px, 3vw, 45px); margin-left: auto; margin-right: clamp(24px, 3vw, 48px); }
.desktop-nav a, .header-cta { position: relative; color: inherit; font-size: 11px; letter-spacing: .14em; text-decoration: none; }
.desktop-nav a::after, .footer-links a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; background: var(--miyabi-gold); content: ""; transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease-out); }
.desktop-nav a:hover::after, .footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 17px; border: 1px solid currentColor; transition: background 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out); }
.header-cta:hover { color: var(--miyabi-emerald); background: var(--miyabi-gold-light); border-color: var(--miyabi-gold-light); }
.header-cta:active, .primary-button:active, .secondary-button:active { transform: scale(.97); }
.mobile-menu-button, .mobile-nav { display: none; }

.hero-section { position: relative; display: flex; min-height: min(860px, 100vh); align-items: center; color: #fbfaf6; background: var(--miyabi-emerald); }
.hero-image { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: .88; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 27, 20, .93) 0%, rgba(7, 30, 22, .74) 38%, rgba(7, 30, 22, .2) 76%, rgba(7, 30, 22, .48) 100%), linear-gradient(0deg, rgba(4, 19, 14, .54), transparent 45%); }
.hero-content { position: relative; z-index: 1; padding-top: 78px; }
.hero-kicker, .eyebrow, .scene-label, .price-card-top span, .hero-side-note, .scroll-cue, .section-index, .footer-bottom, .form-note { font-size: 10px; font-weight: 500; letter-spacing: .22em; }
.hero-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; color: var(--miyabi-gold-light); }
.gold-line { display: inline-block; width: 42px; height: 1px; background: var(--miyabi-gold-light); }
.hero-content h1 { max-width: 800px; margin: 0 0 28px; font: 400 clamp(3.1rem, 7vw, 6.45rem)/1.14 "Noto Serif JP", serif; letter-spacing: .06em; text-shadow: 0 8px 32px rgba(0,0,0,.18); }
.hero-content h1 em, h2 em { color: var(--miyabi-gold-light); font-style: normal; }
.hero-subtitle { margin: 0 0 25px; font-size: clamp(12px, 1.2vw, 15px); line-height: 2; letter-spacing: .11em; }
.hero-body { max-width: 590px; margin: 0 0 38px; color: rgba(251, 250, 246, .74); font-size: 12px; line-height: 2.15; letter-spacing: .055em; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 52px; padding: 0 22px; border: 1px solid var(--miyabi-gold-light); color: var(--miyabi-emerald); background: var(--miyabi-gold-light); font: 500 11px/1 "Noto Sans JP", sans-serif; letter-spacing: .09em; text-decoration: none; transition: color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out); }
.primary-button:hover { color: var(--miyabi-gold-light); background: transparent; }
.hero-side-note { position: absolute; z-index: 1; right: clamp(20px, 4vw, 68px); bottom: 38px; color: rgba(251, 250, 246, .6); line-height: 1.8; text-align: right; }
.hero-side-note span { color: var(--miyabi-gold-light); font-style: italic; }
.scroll-cue { position: absolute; z-index: 2; bottom: 34px; left: 50%; display: flex; align-items: center; gap: 13px; color: rgba(251, 250, 246, .7); text-decoration: none; transform: translateX(-50%); writing-mode: vertical-rl; }
.scroll-cue i { display: inline-block; width: 1px; height: 54px; background: var(--miyabi-gold-light); }

.section-index { display: flex; align-items: center; gap: 14px; color: var(--miyabi-gold); }
.section-index span { font: 400 28px/1 "Cormorant Garamond", serif; letter-spacing: 0; }
.section-index i { display: inline-block; width: 52px; height: 1px; background: var(--miyabi-gold); }
.section-index small { font-size: 9px; letter-spacing: .2em; }
.concept-grid { display: grid; grid-template-columns: 1fr 1.45fr .95fr; gap: clamp(40px, 8vw, 128px); align-items: start; }
.concept-grid > .section-index { padding-top: 10px; }
.eyebrow { margin: 0 0 23px; color: var(--miyabi-gold); }
.concept-intro h2, .section-heading h2, .outfit-heading h2, .pricing-heading h2, .faq-heading h2, .contact-intro h2 { margin: 0; color: var(--miyabi-emerald); font: 400 clamp(2.2rem, 4.7vw, 4.2rem)/1.2 "Noto Serif JP", serif; letter-spacing: .075em; }
.lead-quote { margin: 45px 0 0; color: var(--miyabi-emerald); font: 400 clamp(1.25rem, 2vw, 1.65rem)/1.75 "Noto Serif JP", serif; letter-spacing: .1em; }
.concept-copy { padding-top: 54px; }
.concept-copy > p, .heading-aside, .outfit-heading > p, .faq-heading > p, .contact-intro > p { color: var(--miyabi-muted); font-size: 12px; line-height: 2.15; letter-spacing: .045em; }
.concept-signature { display: flex; align-items: center; gap: 12px; margin-top: 45px; color: var(--miyabi-gold); }
.concept-signature span { font: 400 50px/1 "Noto Serif JP", serif; }
.concept-signature small { font: italic 12px/1 "Cormorant Garamond", serif; letter-spacing: .16em; }
.value-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 110px; background: var(--miyabi-mist); border-top: 1px solid var(--miyabi-mist); border-bottom: 1px solid var(--miyabi-mist); }
.value-card { position: relative; min-height: 300px; padding: 31px 32px 35px; background: rgba(251, 250, 246, .7); transition: background 220ms var(--ease-out), transform 220ms var(--ease-out); }
.value-card:hover { z-index: 1; background: #fff; transform: translateY(-7px); box-shadow: 0 18px 35px rgba(11, 43, 32, .08); }
.value-card-top { display: flex; justify-content: space-between; margin-bottom: 45px; color: var(--miyabi-gold); }
.value-card-top span { font: 400 28px/1 "Cormorant Garamond", serif; }
.value-card h3 { max-width: 255px; margin: 0 0 17px; color: var(--miyabi-emerald); font: 500 16px/1.75 "Noto Serif JP", serif; letter-spacing: .06em; }
.value-card p { max-width: 300px; margin: 0; color: var(--miyabi-muted); font-size: 11px; line-height: 2; }
.card-arrow { position: absolute; right: 28px; bottom: 31px; display: grid; width: 30px; height: 30px; place-items: center; color: var(--miyabi-gold); border: 1px solid var(--miyabi-gold); border-radius: 50%; }

.scenes-section { padding-bottom: 160px; }
.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.gold-eyebrow { color: var(--miyabi-gold-light); }
.section-heading h2, .contact-intro h2 { color: #fbfaf6; }
.heading-aside { max-width: 310px; margin: 0 0 3px; color: rgba(251, 250, 246, .68); }
.scenes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 86px; background: rgba(230, 202, 101, .28); }
.scene-card { position: relative; min-height: 350px; overflow: hidden; background: #14382a; }
.scene-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; transition: transform 600ms var(--ease-out), opacity 400ms var(--ease-out); }
.scene-card:hover img { opacity: .82; transform: scale(1.035); }
.scene-card::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 27, 20, .92), rgba(6, 27, 20, .1) 68%); content: ""; }
.scene-card-content { position: absolute; z-index: 1; right: 36px; bottom: 30px; left: 36px; }
.scene-card:nth-child(odd) { background: #0d3022; }
.scene-card:nth-child(3) { background: #184231; }
.scene-card:nth-child(4) { background: #102f23; }
.scene-index { color: var(--miyabi-gold-light); font: 400 31px/1 "Cormorant Garamond", serif; }
.scene-label { margin: 12px 0 11px; color: rgba(251, 250, 246, .63); }
.scene-card h3 { max-width: 360px; margin: 0 0 12px; color: #fff; font: 500 clamp(1.2rem, 2vw, 1.55rem)/1.5 "Noto Serif JP", serif; letter-spacing: .05em; }
.scene-card-content > p:not(.scene-label) { max-width: 430px; margin: 0; color: rgba(251, 250, 246, .68); font-size: 11px; line-height: 1.9; }
.scene-card-content > a { position: absolute; right: 0; bottom: 0; display: grid; width: 37px; height: 37px; place-items: center; color: var(--miyabi-gold-light); border: 1px solid var(--miyabi-gold-light); border-radius: 50%; transition: color 180ms var(--ease-out), background 180ms var(--ease-out); }
.scene-card-content > a:hover { color: var(--miyabi-emerald); background: var(--miyabi-gold-light); }

.outfit-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.outfit-heading > p { max-width: 290px; margin: 0 0 3px; }
.outfit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 75px; }
.outfit-card { position: relative; min-height: 300px; overflow: hidden; border: 1px solid var(--miyabi-mist); background: rgba(255, 255, 255, .34); }
.outfit-card.has-image { color: #fff; background: var(--miyabi-emerald); }
.outfit-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .52; }
.outfit-card.has-image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 43, 32, .94), rgba(11, 43, 32, .08)); content: ""; }
.outfit-card-inner { position: relative; z-index: 1; padding: 30px 30px 35px; }
.outfit-card-inner > span { color: var(--miyabi-gold); font: 400 30px/1 "Cormorant Garamond", serif; }
.outfit-card h3 { max-width: 270px; margin: 55px 0 17px; color: var(--miyabi-emerald); font: 500 16px/1.7 "Noto Serif JP", serif; letter-spacing: .05em; }
.has-image h3 { color: #fff; }
.outfit-card p { margin: 0; color: var(--miyabi-muted); font-size: 11px; line-height: 2; }
.has-image p { color: rgba(255,255,255,.72); }

.dark-index { color: var(--miyabi-emerald); }
.pricing-heading { display: flex; align-items: end; justify-content: space-between; margin: 36px 0 70px; }
.pricing-heading > p { margin: 0 0 5px; color: var(--miyabi-muted); font-size: 11px; line-height: 2; text-align: right; }
.price-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1px; background: #c7c0b2; }
.price-card { min-height: 260px; padding: 31px 32px; background: var(--miyabi-ivory); }
.price-card.is-featured { color: #fff; background: var(--miyabi-emerald); }
.price-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--miyabi-gold); }
.price-card-top span { font-size: 9px; }
.price-card h3 { min-height: 53px; margin: 45px 0 27px; color: var(--miyabi-emerald); font: 500 15px/1.75 "Noto Serif JP", serif; letter-spacing: .05em; }
.is-featured h3 { color: #fff; }
.price-line { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.price-line strong { font: 400 clamp(2rem, 3.4vw, 3.1rem)/1 "Cormorant Garamond", serif; letter-spacing: .015em; }
.price-line span { font-size: 10px; color: var(--miyabi-muted); }
.is-featured .price-line span { color: rgba(255,255,255,.7); }
.price-card > p { margin: 23px 0 0; color: var(--miyabi-muted); font-size: 11px; line-height: 1.8; }
.is-featured > p { color: rgba(255,255,255,.72); }
.flow-heading { display: flex; align-items: baseline; gap: 35px; margin-top: 120px; border-bottom: 1px solid #c7c0b2; }
.flow-heading .eyebrow { margin-bottom: 20px; }
.flow-heading h3 { margin: 0 0 20px; color: var(--miyabi-emerald); font: 500 22px/1.3 "Noto Serif JP", serif; letter-spacing: .07em; }
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #c7c0b2; }
.flow-step { min-height: 210px; padding: 28px 27px 26px 0; border-right: 1px solid #c7c0b2; }
.flow-step + .flow-step { padding-left: 27px; }
.flow-step:last-child { border-right: 0; }
.flow-step > span { color: var(--miyabi-gold); font: 400 28px/1 "Cormorant Garamond", serif; }
.flow-step h4 { margin: 29px 0 12px; color: var(--miyabi-emerald); font: 500 14px/1.6 "Noto Serif JP", serif; }
.flow-step p { margin: 0; color: var(--miyabi-muted); font-size: 11px; line-height: 1.9; }

.faq-layout { display: grid; grid-template-columns: .9fr 1.2fr; gap: clamp(60px, 12vw, 185px); }
.faq-heading > p:not(.eyebrow) { max-width: 310px; margin-top: 35px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding-bottom: 8px; color: var(--miyabi-emerald); border-bottom: 1px solid var(--miyabi-gold); font-size: 11px; letter-spacing: .1em; text-decoration: none; }
.faq-list { border-top: 1px solid var(--miyabi-mist); }
.faq-item { border-bottom: 1px solid var(--miyabi-mist); }
.faq-item button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 25px 0; color: var(--miyabi-emerald); background: transparent; border: 0; font: 500 14px/1.7 "Noto Serif JP", serif; text-align: left; letter-spacing: .035em; }
.faq-item button > span { display: flex; align-items: center; gap: 19px; }
.faq-item button b { color: var(--miyabi-gold); font: 400 17px/1 "Cormorant Garamond", serif; }
.faq-item button svg { flex: none; transition: transform 200ms var(--ease-out); }
.faq-item.is-open button svg { transform: rotate(180deg); }
.faq-answer { padding: 0 48px 25px 52px; color: var(--miyabi-muted); font-size: 11px; line-height: 2; }
.faq-answer p { margin: 0; }

.contact-section { padding-top: 125px; padding-bottom: 125px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(55px, 9vw, 130px); align-items: start; }
.contact-intro > p:not(.eyebrow) { max-width: 330px; color: rgba(251,250,246,.7); }
.contact-intro h2 { margin-bottom: 30px; }
.contact-details { display: grid; gap: 17px; margin-top: 46px; }
.contact-details a, .contact-details span { display: flex; align-items: center; gap: 12px; color: rgba(251, 250, 246, .78); font-size: 11px; letter-spacing: .04em; text-decoration: none; }
.contact-details svg { color: var(--miyabi-gold-light); }
.contact-form-wrap { padding: 42px; background: rgba(251, 250, 246, .96); color: var(--miyabi-ink); }
.inquiry-form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.inquiry-form label { display: grid; gap: 9px; color: var(--miyabi-emerald); font-size: 10px; letter-spacing: .08em; }
.inquiry-form input, .inquiry-form textarea { width: 100%; padding: 12px 0; color: var(--miyabi-ink); border: 0; border-bottom: 1px solid #c7c0b2; border-radius: 0; outline: none; background: transparent; font: 400 12px/1.5 "Noto Sans JP", sans-serif; transition: border-color 180ms var(--ease-out); }
.inquiry-form input:focus, .inquiry-form textarea:focus { border-color: var(--miyabi-gold); }
.inquiry-form textarea { resize: vertical; }
.inquiry-form input::placeholder, .inquiry-form textarea::placeholder { color: #aaaca6; }
.form-submit { width: 100%; margin-top: 6px; }
.form-note { margin: -3px 0 0; color: var(--miyabi-muted); font-size: 9px; letter-spacing: .03em; line-height: 1.8; }
.form-success { min-height: 400px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.form-success > svg { margin-bottom: 24px; color: var(--miyabi-gold); }
.form-success h3 { margin: 0 0 18px; color: var(--miyabi-emerald); font: 500 23px/1.6 "Noto Serif JP", serif; }
.form-success p:not(.eyebrow) { max-width: 440px; color: var(--miyabi-muted); font-size: 12px; line-height: 2; }
.secondary-button { margin-top: 20px; color: var(--miyabi-emerald); background: transparent; }
.secondary-button:hover { color: var(--miyabi-emerald); background: var(--miyabi-gold-light); }

.site-footer { color: #fbfaf6; background: #071a13; }
.footer-main { display: grid; grid-template-columns: 1fr 1.1fr 1.4fr; align-items: center; min-height: 190px; gap: 40px; }
.footer-brand { color: #fbfaf6; }
.footer-main > p { margin: 0; color: rgba(251,250,246,.66); font: 400 15px/1.6 "Noto Serif JP", serif; letter-spacing: .08em; }
.footer-links { display: flex; justify-content: flex-end; gap: 23px; }
.footer-links a { position: relative; color: rgba(251,250,246,.68); font-size: 10px; letter-spacing: .08em; text-decoration: none; }
.footer-bottom { display: flex; align-items: center; gap: 28px; min-height: 66px; color: rgba(251,250,246,.42); border-top: 1px solid rgba(230,202,101,.16); font-size: 8px; letter-spacing: .11em; }
.footer-bottom span:first-child { margin-right: auto; }
.footer-bottom a { display: grid; width: 28px; height: 28px; place-items: center; color: var(--miyabi-gold-light); border: 1px solid var(--miyabi-gold-light); border-radius: 50%; transform: rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { animation: miyabi-rise 750ms var(--ease-out) both; }
  .hero-content > *:nth-child(2) { animation-delay: 90ms; }
  .hero-content > *:nth-child(3) { animation-delay: 160ms; }
  .hero-content > *:nth-child(4) { animation-delay: 230ms; }
  .hero-content > *:nth-child(5) { animation-delay: 300ms; }
  @keyframes miyabi-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 980px) {
  .section-shell { width: min(100% - 48px, 720px); }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; margin-right: 16px; }
  .mobile-menu-button { display: grid; width: 38px; height: 38px; place-items: center; color: inherit; border: 1px solid currentColor; background: transparent; }
  .mobile-nav { position: absolute; top: 81px; right: 0; left: 0; display: grid; gap: 0; padding: 8px 24px 22px; background: rgba(251,250,246,.98); color: var(--miyabi-ink); box-shadow: 0 18px 30px rgba(11,43,32,.1); }
  .mobile-nav a { padding: 16px 0; border-bottom: 1px solid var(--miyabi-mist); color: inherit; font-size: 12px; letter-spacing: .1em; text-decoration: none; }
  .site-header:not(.is-scrolled) .mobile-nav { background: var(--miyabi-emerald); color: #fff; }
  .hero-content h1 { font-size: clamp(3rem, 9vw, 5rem); }
  .concept-grid { grid-template-columns: 1fr 1.5fr; gap: 38px; }
  .concept-grid > .section-index { grid-column: 1 / -1; }
  .concept-copy { padding-top: 20px; }
  .value-grid, .outfit-grid { grid-template-columns: 1fr; }
  .value-card { min-height: 240px; }
  .outfit-card { min-height: 270px; }
  .price-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 0; }
  .price-card h3 { min-height: 0; margin-top: 25px; }
  .faq-layout, .contact-grid { grid-template-columns: 1fr; gap: 58px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > p { text-align: right; }
  .footer-links { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: 28px; }
}

@media (max-width: 640px) {
  .section-shell { width: calc(100% - 40px); }
  .section-pad { padding: 95px 0; }
  .site-header { height: 70px; padding: 0 20px; }
  .site-header::after { left: 20px; right: 20px; }
  .brand-mark-frame { width: 31px; height: 31px; }
  .brand-mark-frame img { width: 20px; height: 20px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { font-size: 7px; }
  .header-cta { padding: 10px 11px; font-size: 9px; }
  .mobile-nav { top: 69px; padding-right: 20px; padding-left: 20px; }
  .hero-section { min-height: 750px; align-items: flex-end; }
  .hero-image { background-position: 62% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(6,27,20,.96) 0%, rgba(7,30,22,.65) 48%, rgba(7,30,22,.28) 100%); }
  .hero-content { padding-bottom: 100px; }
  .hero-kicker { font-size: 8px; }
  .hero-content h1 { font-size: clamp(2.55rem, 12vw, 4rem); line-height: 1.3; letter-spacing: .04em; }
  .hero-subtitle { font-size: 11px; line-height: 1.9; }
  .hero-body { font-size: 11px; line-height: 2; }
  .hero-side-note { display: none; }
  .scroll-cue { bottom: 23px; left: auto; right: 20px; transform: none; font-size: 8px; }
  .concept-grid { display: block; }
  .concept-grid > .section-index { margin-bottom: 60px; }
  .concept-copy { padding-top: 42px; }
  .value-grid { margin-top: 65px; }
  .value-card { padding: 27px 23px; }
  .value-card-top { margin-bottom: 28px; }
  .split-heading, .outfit-heading, .pricing-heading { display: block; }
  .heading-aside, .outfit-heading > p { margin-top: 28px; }
  .scenes-grid { grid-template-columns: 1fr; margin-top: 55px; }
  .scene-card { min-height: 330px; }
  .scene-card-content { right: 23px; bottom: 25px; left: 23px; }
  .outfit-grid { gap: 12px; margin-top: 50px; }
  .outfit-card { min-height: 260px; }
  .pricing-heading { margin-bottom: 45px; }
  .pricing-heading > p { margin-top: 25px; text-align: left; }
  .flow-heading { display: block; margin-top: 80px; }
  .flow-grid { grid-template-columns: 1fr 1fr; }
  .flow-step { min-height: 200px; padding-right: 16px; }
  .flow-step + .flow-step { padding-left: 16px; }
  .flow-step:nth-child(2) { border-right: 0; }
  .flow-step:nth-child(-n+2) { border-bottom: 1px solid #c7c0b2; }
  .faq-answer { padding: 0 10px 25px 42px; }
  .contact-section { padding-top: 90px; padding-bottom: 90px; }
  .contact-form-wrap { padding: 25px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .form-success { min-height: 360px; }
  .footer-main { display: block; padding-top: 55px; padding-bottom: 32px; }
  .footer-main > p { margin: 28px 0; text-align: left; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
  .footer-bottom { flex-wrap: wrap; gap: 13px 20px; padding-top: 20px; padding-bottom: 20px; }
  .footer-bottom span:first-child { width: calc(100% - 45px); margin-right: 0; }
  .footer-bottom span:nth-child(2) { font-size: 7px; }
}
/* 例：フォントサイズを小さくし、行間を整える */
.hero-title {
  font-size: 2.2rem !important; /* または 32px 〜 38px 程度に小さくする */
  line-height: 1.4 !important;
  letter-spacing: 0.05em;
}