@charset "utf-8";

/* -------------------------------------------- common */

.inner { margin: 0 auto; max-width: 1200px; width: 94%; }
.w-94 { width: 94%; }
.mw-1100 { max-width: 1100px; }
.mw-1130 { max-width: 1130px; }
.mw-900 { max-width: 900px; }
.mw-1300 { max-width: 1300px; }
.mw-1400 { max-width: 1400px; }
.mw-1600 { max-width: 1600px; }

.button { transition: 0.5s opacity; }
.button:hover { opacity: 0.8; }

.heading-style1 { font-family: var(--font-display); text-align: center; font-weight: 400; }
.heading-style1 span { display: block; font-size: 4.25rem; line-height: 120%; }

.heading-style2 { font-family: var(--font-display); font-size: 1rem; }
.heading-style2 span { font-size: 3.875rem; }

.btn-style1 { height: 104px; line-height: 104px; border-radius: 0.3125rem; }

/* -------------------------------------------- colors */

.bg-grey { background-color: var(--btn-grey); color: var(--ink); }
.bg-grey-2 { background-color: #E3E7E1; }
.bg-orange { background-color: var(--orange); color: #fff; }
.bg-olive { background-color: var(--olive); color: #fff; }
.bg-brown { background-color: #7673364A; }
.bg-orange { background-color: #D95000; color: #fff; }

.color-gray { color: #818281; }

/* -------------------------------------------- header */

.header { position: sticky; top: 0; z-index: 50; width: 100%; height: var(--header-h); background: rgb(255 255 255 / 0.95); backdrop-filter: blur(4px); box-shadow: 0 1px 0 transparent; transition: box-shadow 250ms var(--ease); }
/* The rule appears only once the hero lockup has scrolled under the header.
   box-shadow rather than border-bottom so the header's height never changes
   and nothing below it shifts by a pixel. Toggled in main.js. */
.header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header__inner { display: flex; align-items: stretch; justify-content: space-between; height: 100%; }

.header__logo { display: flex; flex-shrink: 0; align-items: center; padding-left: 2rem; }
.header__logo img { width: 132px; height: auto; }

.header__nav { display: flex; align-items: center; margin-left: auto; padding-right: clamp(2rem, 2.8vw, 3rem); }
.header__nav-list { display: flex; align-items: center; gap: clamp(1.75rem, 2.4vw, 2.5rem); }
.header__nav-link { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; transition: color 200ms; }
.header__nav-link:hover { color: var(--olive); }
.header__nav-link[aria-current="true"] { color: var(--olive); }

.header__actions { display: flex; align-items: stretch; }
/* Both CTAs are a fixed 131px so the 5-character and 4-character labels match. */
.header__cta { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 131px; font-size: 15px; font-weight: 600; transition: opacity 200ms; }
.header__cta:hover { opacity: 0.85; }

.header__toggle { position: relative; display: none; width: 4rem; align-items: center; justify-content: center; color: var(--ink); }

/* -------------------------------------------- hamburger */

.hamburger { position: relative; display: block; width: 1.5rem; height: 1rem; }
.hamburger span { position: absolute; inset-inline: 0; height: 1px; background: currentColor; transition: translate 300ms var(--ease), rotate 300ms var(--ease), opacity 150ms linear; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: calc(50% - 0.5px); }
.hamburger span:nth-child(3) { bottom: 0; }
/* Open state is driven by the button's own aria-expanded — no state class to
   keep in sync. The outer bars meet in the middle and cross; the middle one
   fades, since rotating it too would only thicken the X.
   The shift is half the 1rem box minus half a bar, in rem, so both bars land
   on the same centre line at any root font size (14px on mobile, 16px above)
   and the X crosses in the middle rather than 2px off. */
[aria-expanded="true"] .hamburger span:nth-child(1) { translate: 0 calc(0.5rem - 0.5px); rotate: 45deg; }
[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .hamburger span:nth-child(3) { translate: 0 calc(-0.5rem + 0.5px); rotate: -45deg; }

/* -------------------------------------------- nav-panel
   Lives OUTSIDE .header in the markup: the header sets backdrop-filter, which
   makes it a containing block for fixed children, so inset:0 inside it would
   resolve to the 80px bar instead of the viewport.
   z-index sits BELOW the header so the close button stays clickable. */

.nav-panel { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #fff; opacity: 0; translate: 0 -0.75rem; transition: opacity 280ms var(--ease), translate 280ms var(--ease), display 280ms allow-discrete; }
.nav-panel:not([hidden]) { opacity: 1; translate: 0 0; }
@starting-style {
    .nav-panel:not([hidden]) { opacity: 0; translate: 0 -0.75rem; }
}
.nav-panel-nav { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 5rem 2rem 2rem; }
.nav-panel-list { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-panel__link { display: block; padding-block: 1.25rem; border-bottom: 1px solid rgb(216 213 205 / 0.7); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.08em; transition: color 200ms; }
.nav-panel__link:hover { color: var(--olive); }
.nav-panel-item { opacity: 0; translate: 0 0.5rem; }
.nav-panel:not([hidden]) .nav-panel-item { animation: nav-item-in 420ms var(--ease) both; animation-delay: calc(120ms + var(--i) * 55ms); }
.nav-panel__actions { display: grid; grid-template-columns: 1fr 1fr; }
.nav-panel__cta { padding-block: 1.25rem; text-align: center; font-size: var(--fs-cap); font-weight: 700; }
.nav-panel__cta--grey { background: var(--btn-grey); color: var(--ink); }
.nav-panel__cta--orange { background: var(--orange-500); color: #fff; }

@keyframes nav-item-in { to { opacity: 1; translate: 0 0; } }

/* -------------------------------------------- hero */

.hero { position: relative; }

/* Height follows the viewport, not the image's aspect ratio, so the lockup
   below sits above the fold on a first load. svh rather than vh: on mobile vh
   is the LARGEST viewport height, so the hero would overshoot the visible area
   until the URL bar hides. The images therefore crop — object-fit: cover. */
.hero__slider { position: relative; display: grid; grid-template-rows: 1fr; overflow: hidden; height: clamp(400px, calc(100svh - 270px), 820px); }

/* Slides share one grid cell so they stack without absolute positioning and
   the container keeps a definite height. min-height:0 stops the grid item's
   default min-content floor from re-inflating the row. */
.hero__slide { grid-area: 1 / 1; min-height: 0; height: 100%; opacity: 0; transition: opacity var(--hero-fade, 1200ms) ease-in-out; will-change: opacity; }
.hero__slide[data-active="true"] { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero__pause { position: absolute; right: 2rem; bottom: 2rem; z-index: 10; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 999px; background: rgb(28 21 17 / 0.45); color: #fff; opacity: 0; backdrop-filter: blur(4px); transition: opacity 200ms; }
.hero__pause:focus-visible { opacity: 1; }

.hero-body { position: relative; z-index: 10; margin-top: -1.75rem; padding-bottom: 4rem; background: #fff; text-align: center; }

/* Offset with translate, not `top`: percentages on translate resolve against
   the element's OWN size, so the offset scales with the fluid logo instead of
   staying a fixed 25px and drifting as the logo shrinks. */
.hero__logo { width: min(30rem, 50%); height: auto; margin-inline: auto; translate: 0 -13%; }

.hero-headline { padding-top: 3rem; font-size: 2.675rem; font-weight: 500; line-height: 1.75; }

/* -------------------------------------------- hero entrance
   A CSS animation rather than the JS-driven .reveal used further down: the
   hero is above the fold, and a JS-gated opacity:0 would leave it permanently
   blank if a script ever failed. `both` holds the from-state during the delay
   so the logo does not flash in and out. */

.hero-enter { animation: hero-enter 900ms var(--ease) both; animation-delay: var(--delay, 0ms); }
.hero-enter--photo { --delay: 0ms; }
.hero-enter--logo { --delay: 550ms; }

@keyframes hero-enter { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------- intro */

.intro { padding-block: 4rem 8rem; }
.intro-copy { max-width: 36.25rem; }
.intro-copy-title { font-weight: 500; line-height: 1.75; }
.intro-copy-lead { margin-top: 3rem; font-size: 1.125rem; line-height: 2.2; }
.intro-copy-close { margin-top: 1rem; font-size: 25px; font-weight: 500; }

.intro-figure { width: 60%; right: 0; top: 0; bottom: 0; margin: auto; height: 380px; }
.intro-img { width: 100%; height: 100%; overflow: hidden; }
.intro-img-back { width: 484px; right: 0; top: 0; }
.intro-img-front { width: 277px; bottom: 0; left: 0; }

/* -------------------------------------------- concept */

.concept { padding: 4rem 0 8rem; width: 100%; }
.concept-box { width: 94%; max-width: calc(50% + 550px); border-radius: 0.75rem; }
.concept-wrap { width: 94%; max-width: 1100px; padding: 5rem 6% 4rem; }
.concept-heading { top: -2.5rem; left: 0; font-size: 3.5rem; width: 100%; }
.concept-main-img { width: 36%; max-width: 334px; }
.concept-main-text { width: 59%; max-width: 554px; line-height: 180%; font-size: 1.125rem; }
.concept-decor { z-index: 2; }
.concept-decor-bread { max-width: 169px; width: 16%; right: 14%; bottom: -16%; }
.concept-decor-cutlery { max-width: 120px; right: 0; bottom: -30%; width: 12%; }

/* -------------------------------------------- collab */

.collab { max-width: 1032px; padding: 4rem 0; }
.collab-heading { font-size: 1.75rem; width: 40%; max-width: 365px; line-height: 120%; }
.collab-heading::after { width: calc(100% - 256px); height: 1px; background-color: #000; right: 0; top: 0; bottom: 0; margin: auto; }
.collab-text { width: 58%; max-width: 630px; }
.collab-text p {line-height: 29px; }
.collab-brand { padding-top: 2rem; }
.collab-brand-3coins { max-width: 154px; width: 30%; }
.collab-brand-unsta { max-width: 265px; width: 52%; }
.collab-x-mark { margin: 0 1rem; }

/* -------------------------------------------- .gallery */

/* --deck-step is how much of each card stays visible once the next one lands
   on top of it: enough to clear .gallery-item-name and the card's top padding. */
/* --deck-dwell is scroll distance, not space: how far the wheel turns after a
   card lands before the next one starts up, so each slide gets a beat. */
/* --deck-read: on a screen too short for a whole card, a landed card keeps
   going until its text is this far clear of the bottom before the next comes. */
.gallery-container { --deck-step: 6rem; --deck-top: 8rem; --deck-bottom: 0; --deck-dwell: 8rem; --deck-read: 1.5rem; position: relative; overflow: clip; }
.gallery { height: calc(100svh - var(--header-h)); background-image: url(../img/gallery-bg.jpg); }
.gallery-outer-text { font-size: 3.5rem; font-weight: 200; color: #fff; top: 1rem; left: 0; right: 0; }
.gallery-deck { position: relative; z-index: 1; margin: -6rem 0 0; padding: 0; list-style: none; }
/* padding-bottom is also the space under a slide's content before the next
   card peeks in deck mode -- the next card hangs from the padding's edge. */
.gallery-item { width: 94%; max-width: 1100px; margin-inline: auto; padding: 1rem 0 8rem; background-color: #fff; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.gallery-item-inner { width: 88%; max-width: 885px; margin-inline: auto; }
/* Without the rule the cards read as one unbroken white surface once stacked.
   Only the first card, the one that meets the backdrop, keeps rounded corners:
   every other top edge lands on white, where a curve just bends the rule. */
.gallery-item + .gallery-item { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }

/* Deck mode -- added by main.js only when it will drive the pinned timeline.
   The cards share one grid cell and all rest at the same top edge, so the
   current card is always fully in place. The stagger of peeking titles is not
   laid out here: main.js pushes the already-landed cards up by --deck-step
   each time a new one lands, and the stack clips at the section's top as it
   grows. Sharing a cell also makes every card the same height, so a landing
   card slides over the one beneath it with no backdrop showing between them.
   The section is a grid too so the deck, and with it the cards, stretch to
   the section's bottom edge: the last card runs straight into whatever
   follows instead of leaving a strip of backdrop under it. */
.is-deck { display: grid; min-height: calc(100svh - var(--header-h)); }
.is-deck .gallery { position: absolute; inset: 0; height: auto; }
.is-deck .gallery-deck { display: grid; grid-template-rows: 1fr; margin: 0; padding: var(--deck-top) 0 var(--deck-bottom); }
.is-deck .gallery-item { position: relative; grid-area: 1 / 1; z-index: calc(var(--i) + 1); }
/* main.js pulls the element after the gallery up over the last card's empty
   bottom; it has to paint above the section (.pos-r, z-index 1) to cover it,
   and needs a solid fill so the backdrop photo cannot show through. A section
   with its own background (the footer) keeps it: those rules come later. */
.deck-follower { position: relative; z-index: 2; background-color: #fff; }

/* Rail, built by main.js in deck mode only: a line down every card's gutter
   and the card's own number on its title row. Every card carries the line at
   the same x, so through the stack it reads as one continuous line with each
   stacked slide's number sitting in its own title band. */
.gallery-rail { position: absolute; top: 0; bottom: 0; right: 2.5rem; width: 1px; background: var(--line); pointer-events: none; }
/* The fill is per card, --fill-px below the card's top, written by main.js
   every frame: dark from the card's top down to its number, then growing on
   towards the next slide as that slide rises, so the stretch between two
   numbers darkens as the user moves between them and is complete when the
   next one lands. Scroll-driven, so no transition: it would only lag. */
.gallery-rail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--fill-px, 0px) - var(--rail-from, 0px)); background: var(--ink); }
/* The line begins at the first slide's number and ends at the last slide's
   rather than running the full height of those two cards. */
.gallery-item:first-of-type .gallery-rail { top: var(--dot-y, 0px); --rail-from: var(--dot-y, 0px); }
.gallery-item:last-of-type .gallery-rail { bottom: auto; height: var(--dot-y, 0px); }
/* --dot-y is the title text's centre below the card's top, measured by main.js. */
.gallery-step { position: absolute; top: calc(var(--dot-y, 2.5rem) - 1rem); right: 1.5rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font-family: var(--font-display); font-size: 12px; line-height: 1; letter-spacing: 0.04em; pointer-events: none; transition: background-color 350ms var(--ease), color 350ms var(--ease), transform 350ms var(--ease); }
/* The number fills the moment its slide lands. */
.is-landed .gallery-step { background: var(--ink); color: #fff; transform: scale(1.12); }
.gallery-item-name { padding-bottom: 1.5rem; }
.gallery-item-name span { display: block; }
.gallery-item-name .small { font-size: 14px; padding-left: 2rem; }
.gallery-item-img { width: 69%; max-width: 606px; }
.gallery-item-content-box { width: 30%; max-width: 240px; }
.gallery-item-title { font-size: 1.125rem; padding-bottom: 1rem; line-height: 2rem; }
.gallery-item-text { line-height: 1.75rem; }

/* -------------------------------------------- storage */

.storage { padding: 4rem 0; }
.storage .inner { max-width: 1130px; }
.storage-list { padding: 4rem 0 }
.storage-item { max-width: 243px; width: 22%; }
.storage-item-box { cursor: pointer; overflow: hidden; padding-top: 178%; }
.storage-item-box::after { width: 60px; height: 60px; z-index: 2; background: url(../img/icon-play.png) no-repeat center center; background-size: 100% auto; 
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
}
.storage-item-box.is-playing::after { display: none; }
.storage-item-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.storage-item-clip { position: absolute; width: 100%; height: auto; }
.storage-item-name { padding-inline: 0.75rem; line-height: 100%; position: absolute; z-index: 2; 
   top: -0.75rem;
   left: -0.75rem;
   height: 42px;
   line-height: 42px;
}
.storage-item-text { padding-top: 2rem; line-height: 32px; }

/* -------------------------------------------- lifestyle */

.lifestyle { padding: 6rem 0 0; }
.lifestyle-heading { z-index: 2; width: 100%; top: -3rem; text-align: center; }
.lifestyle-heading small { font-weight: 600; }

.lifestyle-main-caption { padding: 4rem 0 2rem; }
.lifestyle-list { padding: 4rem 0; }
.lifestyle-list-item { max-width: 520px; width: 48%; position: relative; margin: 2rem 0; }
.lifestyle-list-content { position: absolute; width: 94%; background-size: 100% 100%; background-repeat: none; 
   padding: 2rem 3rem 2rem 4rem;
}
.lifestyle-list-content .ttl { font-size: 1.125rem; font-weight: 800; padding-bottom: 1rem; }
.lifestyle-list-content .txt { line-height: 28px; font-size: 1rem; }

.lifestyle-list-item.content-right .lifestyle-list-content { right: -2rem; }
.lifestyle-list-item.content-left .lifestyle-list-content { left: -2rem; }

.lifestyle-list-item.content-bot { padding-bottom: 125px; }
.lifestyle-list-item.content-bot .lifestyle-list-content { bottom: 0; }

.lifestyle-list-item.content-top { padding-top: 125px; }
.lifestyle-list-item.content-top .lifestyle-list-content { top: 0; }

.lifestyle-content1 { background-image: url(../img/lifestyle-bg1.png); }
.lifestyle-content2 { padding-inline: 2.5rem; background-image: url(../img/lifestyle-bg2.png); }
.lifestyle-content3 { padding: 1rem 2.5rem 3rem 2rem; background-image: url(../img/lifestyle-bg3.png); }
.lifestyle-content4 { padding: 3rem 3rem 1.5rem 3rem; background-image: url(../img/lifestyle-bg4.png); }

.lifestyle-bot-caption .small { padding-bottom: 1rem; }
.lifestyle-bot-caption .big { font-size: 2rem; }

.lifestyle-marquee { padding-top: 4rem; overflow: hidden; }
.lifestyle-marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.lifestyle-marquee-group { display: flex; flex-shrink: 0; }
.lifestyle-marquee-text { font-size: 120px; color: #fff; line-height: 84px; white-space: nowrap; flex-shrink: 0; padding-right: 2rem; }
@keyframes marquee { to { translate: -50% 0; } }

/* -------------------------------------------- plan */

.plan { padding: 4rem 0 6rem; }
.plan .heading-style2 { padding-bottom: 2rem; }
/* Each plan is one .plan-item so the phone layout can stack it top to bottom.
   On desktop the item is display: contents and its parts are placed on this
   grid, so the shared 2階建て/平屋 nav can sit between the facade and the text
   of whichever plan is showing. */
.plan-body { display: grid; grid-template-columns: min(63%, 730px) min(32%, 350px); grid-template-rows: auto auto 1fr; grid-template-areas: "floor facade" "floor nav" "floor text"; justify-content: space-between; align-items: start; }
.plan-item { display: contents; }
.plan-item:not(.is-active) { display: none; }
.plan-facade { grid-area: facade; width: 100%; }
.plan-nav { grid-area: nav; padding-top: 1.75rem; }
.plan-nav button { width: 49%; border: 1px solid #C1C1C1; border-radius: 0.325rem; height: 4.25rem; line-height: 4.25rem; font-size: 1.125rem; transition: background-color 250ms var(--ease), color 250ms var(--ease); }
.plan-nav button[aria-pressed="true"] { background-color: var(--olive); color: #fff; }
.plan-text { grid-area: text; }
.plan-info-text { line-height: 2rem; padding-top: 2rem; font-size: 1rem; }
.plan-floor { grid-area: floor; padding-top: 1rem; }
.plan-floor-imgs img { max-width: 380px; }
.plan-floor-imgs--two .plan-floor-fig { max-width: 340px; width: 48%; }
.plan-floor-fig { display: flex; align-items: flex-end; gap: 0.5rem; }
.plan-floor-fig img { flex: 1; min-width: 0; max-width: none; }
.plan-floor-fig figcaption { flex: none; line-height: 1; padding-right: 12px; }
.plan-floorarea { font-size: 13px; line-height: 23px; padding-top: 3rem; }
.plan-floor--one .plan-floor-imgs, .plan-floor--one .plan-floorarea { max-width: 400px; margin-inline: auto; }
/* Switching plans: the outgoing item's parts fade out, then main.js swaps
   .is-active and the incoming ones fade in while the body's height glides
   between the two layouts (main.js sets the px values; .is-resizing enables
   the tween). The item itself is display: contents, so opacity goes on its
   children. Keyed off classes rather than .is-active so the item already
   showing at load does not animate. */
.plan-item > * { transition: opacity 200ms var(--ease); }
.plan-item.is-leaving > * { opacity: 0; }
.plan-item.is-entering > * { animation: plan-item-in 400ms var(--ease); }
@keyframes plan-item-in { from { opacity: 0; } }
[data-plan-body].is-resizing { overflow: hidden; transition: height 400ms var(--ease); }
/* 1F/2F switch: phone only; on desktop both floors and both captions show. */
.plan-floor-nav { gap: 1rem; padding-block: 2rem 1.5rem; }
.plan-floor-nav button { width: 7.5rem; height: 3rem; border: 1px solid #C1C1C1; border-radius: 999px; font-size: 18px; transition: background-color 250ms var(--ease), color 250ms var(--ease); }
.plan-floor-nav button[aria-pressed="true"] { background-color: var(--olive); color: #fff; }
[data-floor].is-entering { animation: plan-item-in 400ms var(--ease); }

/* -------------------------------------------- performance */

.perf { padding: 4rem 0; }
.perf-main-caption { padding: 2rem 0; }
.perf-list { padding: 2rem 4%; }
.perf-list-item { max-width: 342px; width: 32%; padding: 4rem 3% 3rem; background-color: #fff; border-radius: 0.5rem; }
.perf-list-item img { max-width: 126px; width: 64%; display: block; margin: auto; }
.perf-list-item-ttl { padding: 2.5rem 0 1.5rem; }
.perf-list-item-text { line-height: 30px; }

/* -------------------------------------------- media */

.media { padding: 4rem 0; }
.media-inner { margin-top: 2rem; background-color: #F3F3F3; padding: 5rem 100px 4.375rem; border-radius: 0.625rem; }
.media-youtube { max-width: 630px; width: 64%; }
.media-youtube-box { padding-top: 56%; overflow: hidden; border: 1px solid #a3a3a3; background-color: #000; }
.media-youtube-box iframe { position: absolute; width: 100%; height: 100%; }
/* The poster fills the box until main.js swaps the player in. The focus ring
   is drawn inward: the box clips its overflow, so the usual offset outline
   would be cut off. */
.media-youtube-poster { position: absolute; inset: 0; display: block; }
.media-youtube-poster:focus-visible { outline-offset: -4px; }
.media-youtube-poster img { width: 100%; height: 100%; object-fit: cover; }
.media-youtube-poster::after { width: 60px; height: 60px; z-index: 2; inset: 0; background: url(../img/icon-play.png) no-repeat center center; background-size: 100% auto; transition: scale 300ms var(--ease), opacity 200ms; }
.media-youtube-poster:hover::after { scale: 1.1; }
/* Clicked: the icon goes while the player loads in underneath, so it does not
   look like a second click is needed. */
.media-youtube-poster.is-loading { cursor: progress; }
.media-youtube-poster.is-loading::after { opacity: 0; }

.media-content { max-width: 320px; width: 32%; }
.media-content-ttl { line-height: 2.625rem; padding-bottom: 2rem; }
.media-content-text { font-weight: 400; line-height: 2rem; }

.media-profile { padding-top: 6rem; max-width: 935px; }
.media-profile-img { max-width: 170px; width: 18%; }
.media-profile-box { max-width: 730px; width: 78%; }
.media-profile-ttl { padding-bottom: 1.5rem; border-bottom: 1px solid #000; }
.media-profile-txt { padding-top: 1.5rem; font-size: 0.875rem; line-break: 1.5rem; }
.media-profile-links { padding-top: 1rem; }
.media-profile-links a { font-size: 0.6875rem; display: inline-block; padding-right: 1.25rem; padding-bottom: 0.5rem; }

/* Swiper drives the slider (stylesheet and script linked in index.html, set up
   in main.js). The arrows and dots are our own elements handed to it, so none
   of its absolutely-positioned control styles apply here: the bullets take
   their look from its custom properties and the disabled / locked states
   from the classes and attributes it toggles. */
.media-slider { max-width: 1045px; padding: 6rem 0 4rem; --swiper-wrapper-transition-timing-function: var(--ease); --swiper-pagination-color: var(--ink); --swiper-pagination-bullet-inactive-color: var(--btn-grey); --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-size: 10px; --swiper-pagination-bullet-horizontal-gap: 14px; }
.media-slider-item-ttl { font-size: 1.125rem; padding: 1.5rem 0 0.5rem; }
.media-slider-item-date { font-size: 0.75rem; color: #818281; }

.media-slider-nav { gap: 2rem; padding-top: 3.5rem; }
/* Swiper's horizontal-bullets rule gives the dots width:100%, which would push
   the arrows out to the container's edges. */
.media-slider .media-slider-dots { display: flex; align-items: center; width: auto; }
/* Round, so the focus ring follows the dot instead of the 2px corners
   base.css gives everything. Same for the arrows below. */
.media-slider .swiper-pagination-bullet { border-radius: 50%; }
/* One PNG for both arrows, mirrored for next. Sized in px to match the icon. */
.media-slider-arrow { width: 40px; height: 40px; border-radius: 50%; background: url(../img/icon-arw.png) no-repeat center center; background-size: contain; transition: opacity 200ms; }
.media-slider-arrow:hover { opacity: 0.8; }
.media-slider-arrow:disabled { opacity: 0.35; cursor: default; }
.media-slider-next { scale: -1 1; }

/* Until Swiper takes over -- or for good, if its CDN is blocked -- the items
   sit in a plain three-up row and the controls, which would do nothing, stay
   hidden. Swiper adds .swiper-initialized once it has laid the slides out. */
.media-slider .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; flex-wrap: wrap; gap: 34px; }
.media-slider .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 68px) / 3); }
.media-slider .swiper:not(.swiper-initialized) + .media-slider-nav { display: none; }

/* -------------------------------------------- cta */

.cta { background-image: url(../img/cta-bg.jpg); color: #fff; }
.cta::after { background-color: #0000009b; width: 100%; height: 100%; left: 0; top: 0; z-index: 0; }
.cta-inner { padding: 8rem 0 7rem; max-width: 725px; }
.cta-heading { font-size: 2.625rem; padding-bottom: 1rem; }
.cta-caption-badge { line-height: 20px; margin-left: 1rem; border-radius: 50%; width: 103px; height: 103px; }
.cta-btns { padding-top: 2rem; }
.cta-btns .button { width: 48%; display: block; }

/* -------------------------------------------- footer */

.footer { padding-block: 4rem; background: var(--footer); color: #fff; }
.footer__social { display: flex; justify-content: flex-end; gap: 1rem; margin-bottom: 0; }
.footer__social a { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 999px; transition: opacity 200ms; }
.footer__social a:hover { opacity: 0.8; }
.footer__social svg { width: 1.25rem; height: 1.25rem; }

.footer__brand { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: -1.5rem; }
.footer__lockup { display: flex; align-items: center; gap: 0.75rem; }
.footer__lockup a { display: block; max-width: 370px; }
.footer__mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 999px; background: #fff; color: var(--footer); font-size: 1.125rem; font-weight: 700; }
.footer__legal { font-size: 0.75rem; color: #fff; }

/* -------------------------------------------- scroll reveal
   Elements start faded and offset; main.js adds .is-visible on entry.
   Stagger a group with style="--delay:120ms" in the markup. */

.reveal { opacity: 0; translate: 0 1.5rem; transition: opacity 800ms var(--ease), translate 800ms var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* .reveal-group animates nothing itself. It exists so its .reveal-item children
   share ONE observer entry: the order is then set by --delay, not by which child
   happens to cross the viewport edge first. */
.reveal-item { opacity: 0; translate: 0 1.5rem; transition: opacity 800ms var(--ease), translate 800ms var(--ease); transition-delay: var(--delay, 0ms); }
.reveal-group.is-visible .reveal-item { opacity: 1; translate: 0 0; }

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {
   .header__nav { display: none; }
   .header__cta { display: none; }
   .header__toggle { display: flex; }
   /* Below this the card's side gutter is too narrow to hold the rail. */
   .gallery-rail, .gallery-step { display: none; }

   .intro { padding-top: 2rem; }
   .intro-copy { width: 100%; max-width: none; }
   .intro-figure { width: 100%; max-width: 640px; margin-top: 4rem; }

   .concept { padding-bottom: 6rem; }
   .concept-box { margin: auto; }
   .concept-wrap { width: 100%; padding-inline: 4%; }
   .concept-main-text { width: 60%; font-size: clamp(10px, 2vw, 1.125rem); }
   .concept-decor-bread { right: 14%; width: 14%; bottom: -10%; }
   .concept-decor-cutlery { width: 10%; bottom: -20%; }

   .collab { padding-block: 2rem 4rem; }

   .gallery-item-img { width: 60%; }
   .gallery-item-content-box { width: 34%; }

   .storage-list { max-width: 640px; margin: auto; padding-bottom: 2rem; }
   .storage-item { width: 46%; max-width: none; margin: 2rem 0; }

   .lifestyle-list-content { padding: 1.5rem 1rem 1rem 2.5rem; width: 98%; }
   .lifestyle-list-content .ttl { font-size: 1rem; padding-bottom: 0.5rem; }
   .lifestyle-list-content .txt { font-size: 14px; line-height: 24px; }

   .lifestyle-list-item.content-bot { padding-bottom: 90px; }
   .lifestyle-list-item.content-top { padding-top: 90px; }
   .lifestyle-list-item.content-right .lifestyle-list-content { right: -1.5rem; }
   .lifestyle-list-item.content-left .lifestyle-list-content { left: -1.5rem; }

   .lifestyle-content2 { padding: 1rem 1.5rem; }
   .lifestyle-content3 { padding: 1rem 1.5rem 2rem; }
   .lifestyle-content4 { padding: 2rem 1.5rem 1rem; }

   .plan-info-text { font-size: 14px; line-height: 24px; }
   .plan-nav button { font-size: 1rem; height: 3.5rem; line-height: 3.5rem; }

   .perf-list { padding: 1.5rem 0; }
   .perf-list-item { padding: 2rem 4% 1.5rem; }
   .perf-list-item-ttl { font-size: clamp(16px, 2.25vw, 1.5rem); padding: 2rem 0 1rem; }
   .perf-list-item-text { line-height: 24px; }

   .media-inner { padding: 2.5rem 4%; }
   .media-youtube { width: 60%; }
   .media-content { width: 36%; }
   .media-content-ttl { line-height: 2rem; padding-bottom: 1.5rem; }
   .media-content-text { line-height: 1.75rem; font-size: 14px; }
   .media-profile { width: 100%; padding-top: 3rem; }
   .media-profile-ttl { padding-bottom: 1rem; }
   .media-profile-txt { padding-top: 1rem; }
   .media-profile-img { width: 16%; }
   .media-profile-box { width: 80%; }

   .media-slider { padding: 5rem 0 0; }
   .media-slider-item-ttl { font-size: 1rem; }
}

/* -------------------------------------------- sp */

@media screen and (max-width: 767px) {

   .inner { width: 88%; }

   .heading-style1 { font-size: 1rem; }
   .heading-style1 span { font-size: clamp(24px, 10vw, 42px); }

   .heading-style2 { display: block; text-align: center; font-size: 1.125rem; }
   .heading-style2 span { display: block; font-size: clamp(32px, 10vw, 62px); line-height: 120%; }

   .header__logo { padding-left: 1.25rem; }
   .header__logo img { width: 100px; }

   .hero__slider { height: clamp(400px, calc(100svh - 190px), 820px); }
   .hero__pause { right: 1rem; bottom: 1rem; }
   .hero__body { padding-bottom: 4rem; }
   .hero__headline { margin-top: 4rem; }

   .hero-headline { font-size: clamp(16px, 7.25vw, 2.675rem); }

   .intro { padding-block: 1rem; }
   .intro-copy-lead { font-size: 15px; line-height: 28px; }
   .intro-copy-close { font-size: 18px; }
   .intro-figure { height: auto; padding-bottom: 2rem; }
   .intro-img { height: auto; padding-top: 58%; }
   .intro-img-back { width: 62%; }
   .intro-img-front { width: 43%; }
   .intro-decor { z-index: 2; }
   .intro-decor-bread { top: 10%; left: 5%; width: 24%; }
   .intro-img { overflow: visible; }
   .intro-decor-cutlery { bottom: -10%; right: 18%; width: 18%; }
   
   .concept { padding-bottom: 2rem; }
   .concept-box { width: 100%; }
   .concept-wrap { padding-block: 2.5rem 2rem; }
   .concept-wrap-box { width: 94%; max-width: 420px; margin: auto; }
   .concept-heading { position: relative; font-size: 2.75rem; top: 0; padding-bottom: 1.25rem; }
   .concept-main-img { width: 100%; max-width: none; margin: auto; }
   .concept-main-text { width: 100%; padding-top: 2rem; font-size: 1rem; }

   .collab { width: 80%; max-width: 480px; }
   .collab-heading { width: 100%; padding: 1rem 0; text-align: center; max-width: none; }
   .collab-heading::after { width: 100%; z-index: 0; }
   .collab-heading { font-size: clamp(14px, 5.25vw, 24px); }
   .collab-heading span { padding: 0 1rem; display: inline-block; background-color: #fff; position: relative; z-index: 1; }
   .collab-text { width: 100%; padding-top: 1rem; }
   .collab-text p { line-break: 24px; }
   .collab-brand { justify-content: center; }

   .gallery-item-name { text-align: center; display: block; padding: 0.5rem 0 1rem; }
   .gallery-item-name span { font-size: 2rem; line-height: 42px; line-height: 140%; }
   .gallery-item-name .small { padding: 0; font-size: 12px; }
   .gallery-item-content { display: block; }
   .gallery-item-img { width: 100%; }
   .gallery-item-content-box { width: 100%; max-width: none; }
   .gallery-item-title { padding: 2.5rem 0 1.5rem; font-size: 16px; }
   .gallery-item-text { font-size: 1rem; line-height: 2rem; }

   .storage { background-color: #F4F4F4; }
   .storage-list { padding-block: 2rem 0; }
   .storage-item { margin: 1.5rem 0; }
   .storage-item-name { font-size: 1.25rem; height: 32px; line-height: 32px; }
   .storage-item-text { font-size: 1rem; line-height: 2rem; padding-top: 1.25rem; }

   .lifestyle { padding-top: 3rem; }
   .lifestyle-heading { position: relative; top: 0; padding-bottom: 2rem; }
   .lifestyle-main-caption { text-align: left; font-size: clamp(16px, 4.25vw, 32px); }
   .lifestyle-list { padding: 0; }
   .lifestyle-list-item { width: 100%; max-width: none; padding-top: 0 !important; padding-bottom: 120px !important; }
   .lifestyle-list-item img { width: 90%; }
   .lifestyle-list-item:nth-child(2n) img { margin-left: auto; margin-right: 0; }
   .lifestyle-list-item:nth-child(1n) .lifestyle-list-content { left: auto !important; right: 0 !important; }
   .lifestyle-list-item:nth-child(2n) .lifestyle-list-content { left: 0 !important; right: auto !important; }
   .lifestyle-list-content { width: 90%; bottom: 0 !important; top: auto !important; }
   .lifestyle-list-content .ttl { font-size: 1.125rem; }
   .lifestyle-content1 { padding: 2rem 1rem 1.5rem 3rem; }
   .lifestyle-content2 { padding: 1rem 2rem 1.5rem; }
   .lifestyle-content4 { padding: 2rem 2rem 1.5rem; }
   .lifestyle-bot-caption .small { font-size: clamp(16px, 3.5vw, 24px); }
   .lifestyle-bot-caption .big { font-size: clamp(18px, 4.5vw, 2rem); }

   .lifestyle-marquee { padding-top: 3rem; }
   .lifestyle-marquee-text { font-size: 64px; line-height: 44px; }

   /* Both plans stack, each in its phone order: title, facade, floor area,
      1F/2F switch, floor plan, text. The grid areas above are ignored here;
      .plan-floor becomes display: contents so its parts can be reordered
      among the item's other children. */
   .plan-body { display: block; }
   .plan-item, .plan-item:not(.is-active) { display: flex; flex-direction: column; }
   .plan-item + .plan-item { padding-top: 4rem; }
   .plan-item-title { order: 1; font-size: 1.25rem; padding-bottom: 0.75rem; font-weight: 600; }
   .plan-facade { order: 2; }
   .plan-floor { display: contents; }
   .plan-floorarea { order: 3; padding-top: 1rem; }
   .plan-floor-nav { order: 4; }
   .plan-floor-imgs { order: 5; }
   .plan-text { order: 6; }
   .plan-info-text { width: 80%; margin: auto; text-align: justify; }
   .plan-floor-imgs { padding-top: 1rem; }
   .plan-floor-imgs > img, .plan-floor-imgs--two .plan-floor-fig { width: 88%; max-width: none; margin: auto }
   .plan-floor--one .plan-floor-imgs, .plan-floor--one .plan-floorarea { max-width: none; margin-inline: 0; }
   .plan-item [data-floor]:not(.is-active) { display: none; }

   .perf-main-caption { font-size: 1.25rem; }
   .perf-list { padding: 0; }
   .perf-list-item { max-width: 380px; margin: 1.5rem auto; width: 100%; padding: 4rem 10% 3rem; }
   .perf-list-item-ttl { font-size: clamp(18px, 6vw, 28px); }
   .perf-list-item-text { font-size: 1.125rem; line-height: 180%; }

   .media-inner { padding: 3.5rem 8%; }
   .media-content { padding-top: 2rem; }
   .media-content-ttl { font-size: clamp(16px, 5.5vw, 32px); line-height: 160%; text-align: center; }
   .media-content-text { line-height: 180%; }
   .media-profile { width: 100%; }
   .media-profile-box { padding-top: 2rem; }
   .media-profile-img { width: 50%; margin: auto; max-width: 120px; }
   .media-profile-ttl { font-size: clamp(14px, 4vw, 24px); }
   .media-profile-txt { padding-top: 1.5rem; font-size: 1rem; line-height: 180%; } 
   .media-profile-links { padding-top: 1.5rem; }
   .media-profile-links a { display: block; padding-bottom: 0.25rem; }

   .media-slider { padding: 3rem 0; width: 100%; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-horizontal-gap: 8px; }
   /* .flex wraps by default; with the dots between them the arrows no longer
      fit beside them on a phone and the next arrow dropped to its own line. */
   .media-slider-nav { flex-wrap: nowrap; gap: 1rem; padding-top: 2rem; }
   .media-slider-arrow { flex: none; width: 28px; height: 28px; }

   .cta-inner { padding-bottom: 3rem; }
   .cta-heading { font-size: clamp(14px, 6.75vw, 32px); line-height: 140%; }
   .cta-caption { font-size: clamp(12px, 4.75vw, 24px); line-height: 140%; padding-top: 1rem; text-wrap: unset; }
   .cta-caption-badge { margin: 0; position: absolute; top: -1.25rem; right: 0; width: 90px; height: 90px; line-height: 18px; }
   .cta-btns .button { width: 48%; display: block; height: 70px; line-height: 70px; width: 100%; max-width: 420px; margin: 1rem auto 0; }

   .footer { padding-block: 3rem 2rem; }
   .footer__social { justify-content: center; margin-bottom: 2rem; }
   .footer__brand { margin-top: 0; }
   .footer__lockup { width: 80%; }
   .footer__legal { font-size: 10px; }
}

/* -------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal-item { opacity: 1; translate: none; transition: none; }
    .hero-enter { animation: none; }
    .lifestyle-marquee-track { animation: none; }
    .hero__slide, .hamburger span, .nav-panel, .header { transition: none; }
    .nav-panel:not([hidden]) .nav-panel-item { animation: none; opacity: 1; translate: none; }
    .plan-nav button, .plan-floor-nav button, .plan-item > *, [data-plan-body].is-resizing { transition: none; }
    .plan-item.is-entering > *, [data-floor].is-entering { animation: none; }
    [data-plan-item].is-entering { animation: none; }
    /* The slide movement itself is Swiper's: main.js sets its speed to 0. */
    .media-slider-arrow, .media-youtube-poster::after { transition: none; }
}