/* =========================================================
   KATOJI TATAMY LP - faithful reproduction of Figma design
   Canvas: 393 x 17283 (mobile)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500&display=swap");

:root {
  --text-dark: #333;
  --bg-dark-plus: #aeaeae;
  --bg-gray: #aeaeae;
  --bg-beige: #dfddd6;
  --line: #8b8b8b;
  --note: #6c6c6c;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  background: #DFDDD6;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}

/* scroll-margin so section anchors land with a bit of breathing room */
#tatamy,
#compact,
#long-use,
#move,
#free-scene,
#safe,
#color {
  scroll-margin-top: 24px;
}

img,
svg {
  display: block;
  max-width: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}
h3 {
  font-weight: 400;
}

/* ---- page shell ---- */
.page {
  /* fluid scale unit: 1px above 393px, proportional below — inherited by all sections */
  --u: min(1px, calc(100vw / 393));
  position: relative;
  width: 100%;
  max-width: 393px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  color: var(--text-dark);
}

/* ---- typography helpers ---- */
.f-mincho {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
}
.f-kaku {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
}
.f-kaku-r {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
}
.f-kaku-b {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
}
.f-optima {
  font-family: "Optima", "Zen Old Mincho", serif;
  font-weight: 400;
}

.center {
  text-align: center;
}
.white {
  color: #fff;
}

/* ---- header ---- */
.header-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 65px;
  z-index: 100;
  pointer-events: none; /* content below stays interactive; re-enable on children */
}
.header-logo {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 70.37px;
  height: 17px;
  pointer-events: auto;
}
.header-logo:hover {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.header-logo img {
  width: 100%;
  height: 100%;
  transition: filter 0.25s ease;
}
.header-menu {
  position: absolute;
  right: 25px;
  top: 27px;
  width: 16px;
  height: 11px;
  pointer-events: auto;
}
.header-menu img {
  width: 100%;
  height: 100%;
  transition: filter 0.25s ease;
}

/* mobile: fix to viewport top; transparent over hero, white after scroll */
@media (max-width: 1023px) {
  .header-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 393px;
    background: transparent;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
  }
}

/* ---- MAIN (hero) — section 1: self-contained, flow-positioned ---- */
.main-hero {
  position: relative;             /* containing block for absolute children */
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 760;
  background: #8e8a85;
  margin: 0 auto;
}

/* ---- INTRO / CONCEPT — section 2: 760-3187 range, gray bg ---- */
.sec-intro {
  position: relative;
  width: 100%;
  max-width: 393px;
  background: var(--bg-gray);
  margin: 0 auto;
  padding-bottom: 237.5px;    /* bottom space so section total matches 2427 */
  margin-top: -16px;
}

/* ---- POINTS — section 3: 3187-6566 range, beige bg ---- */
.sec-points {
  position: relative;
  width: 100%;
  max-width: 393px;
  background: var(--bg-beige);
  margin: 0 auto;
  padding-bottom: calc(260 * var(--u));    /* match original 3379 total height */
}

/* ---- point wrappers (flow layout) ---- */
.point-block {
  position: relative;
  width: 100%;
  max-width: 393px;
  margin-left: auto;
  margin-right: auto;
}
.point-block-01 {
  margin-top: calc(-24 * var(--u));
  aspect-ratio: 393 / 930;   /* encompasses video + headings + 57kg + katate */
}
.point-block-02 {
  margin-top: calc(48 * var(--u));
  aspect-ratio: 393 / 973;
}
.point-block-03 {
  margin-top: calc(48 * var(--u));
  aspect-ratio: 393 / 692;
}

.main-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.main-tatamy-logo {
  width: 88%;
  max-width: 345px;
  aspect-ratio: 345 / 72;
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.main-tatamy-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main-katoji {
  width: 64px;
  height: 15px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.main-katoji img {
  width: 100%;
  height: 100%;
}
#tatamy {
  margin: 0 auto;
  width: 80%;
  padding-top: 80px;
}

/* ---- 3color product line ---- */
.tatamy-tatami {
  margin: -63px auto 0;
  width: 35%;
  max-width: 136px;
  aspect-ratio: 136 / 211;
}
.tatamy-tatami img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-born {
  margin: 19px auto 0;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-size: 23px;
  letter-spacing: 2.3px;
  line-height: 40px;
  white-space: nowrap;
}
.title-born p {
  line-height: 40px;
}

.title-tatamy-sub {
  margin: 11px auto 0;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.3px;
  line-height: 13px;
  white-space: nowrap;
}

.color3 {
  position: relative;
  margin: 32px auto 0;
  width: 239.33px;
  height: 106px;
}
.color3 .swatch {
  position: absolute;
  width: 74.44px;
}
.color3 .c-black {
  left: 0;
  top: 0;
  height: 105.34px;
}
.color3 .c-beige {
  left: 82.44px;
  top: 1.07px;
  height: 104.72px;
}
.color3 .c-khaki {
  left: 164.89px;
  top: 1.03px;
  height: 104.97px;
}
.color3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- CONCEPT ---- */
.concept-main {
  margin: 80px 0 0;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 264;
}
.concept-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-text-1 {
  margin: 40px 0 0 24px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 32px;
  white-space: nowrap;
}
.concept-text-2 {
  margin: 16px 0 0 24px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 32px;
  white-space: nowrap;
}

.concept-entrance {
  margin: 39.51px 0 0 73px;
  width: calc(100% - 73px);
  max-width: 320px;
  aspect-ratio: 320 / 360;
  overflow: hidden;
}
.concept-entrance img {
  width: 100%;
  height: 118.52%;
  margin-top: -12.31%;
  object-fit: cover;
}

.concept-handle {
  margin: 40px 0 0;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
}
.concept-handle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-minimal {
  margin: 39.51px auto 0;
  width: 100%;
  padding: 0 24px;
  aspect-ratio: 345 / 157;
}
.concept-minimal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- title: コンパクトってこんなにも軽快 ---- */
.title-compact {
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: calc(23 * var(--u));
  letter-spacing: calc(2.3 * var(--u));
  line-height: calc(40 * var(--u));
  white-space: nowrap;
  position: absolute;
  top: calc(-120 * var(--u));
  left: 50%;
  transform: translateX(-50%);
}
.title-compact p {
  line-height: calc(40 * var(--u));
}

.compact-logo {
  width: 72%;
  max-width: 280px;
  aspect-ratio: 280 / 44;
  z-index: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-20 * var(--u));
}
.compact-logo img {
  width: 100%;
  height: 100%;
}

/* ---- POINT 01 (片手で運べる軽さ) ---- */
.point01-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 528;
  background: #a9a49d;
  overflow: hidden;
}
.point01-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.heading-box-01 {
  position: absolute;
  left: 0;
  top: calc(450 * var(--u));
  width: calc(158 * var(--u));
  height: calc(134 * var(--u));
  background: var(--bg-beige);
  border-top-right-radius: calc(20 * var(--u));
}
.heading-01-num {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(458 * var(--u));
  font-family: "Optima", "Zen Old Mincho", serif;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.3 * var(--u));
  line-height: calc(45 * var(--u));
}
.heading-01-title {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(498 * var(--u));
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(3.3 * var(--u));
  line-height: calc(37 * var(--u));
  white-space: nowrap;
}
.heading-01-vline {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(475 * var(--u));
  width: 1px;
  height: calc(126 * var(--u));
  background: #333;
}

.point01-text {
  position: absolute;
  right: calc(24 * var(--u));
  top: calc(580 * var(--u));
  width: calc(180 * var(--u));
  max-width: calc(100% - 213 * var(--u));
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.95 * var(--u));
  line-height: calc(24 * var(--u));
  text-align: justify;
}

.point01-katate2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(803 * var(--u));
  width: 100%;
  max-width: calc(160 * var(--u));
  aspect-ratio: 160 / 107;
}
.point01-katate2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.point01-57kg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(700 * var(--u));
  width: 100%;
  max-width: calc(168 * var(--u));
  aspect-ratio: 168 / 105.78;
}
.point01-57kg img {
  width: 100%;
  height: 100%;
}

/* ---- POINT 02 (狭い玄関にも収まる) ---- */
.point02-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 528;
  background: #9f9b94;
  overflow: hidden;
}
.point02-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.heading-box-02 {
  position: absolute;
  left: 0;
  top: calc(454 * var(--u));
  width: calc(212 * var(--u));
  height: calc(134 * var(--u));
  background: var(--bg-beige);
  border-top-right-radius: calc(20 * var(--u));
}
.heading-02-num {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(462 * var(--u));
  font-family: "Optima", "Zen Old Mincho", serif;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.3 * var(--u));
  line-height: calc(45 * var(--u));
}
.heading-02-title {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(503 * var(--u));
  font-family: "Zen Old Mincho", serif;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(3.3 * var(--u));
  line-height: calc(37 * var(--u));
  white-space: nowrap;
}
.heading-02-vline {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(479 * var(--u));
  width: 1px;
  height: calc(126 * var(--u));
  background: #333;
}

.point02-text {
  position: absolute;
  right: calc(24 * var(--u));
  top: calc(580 * var(--u));
  width: calc(176 * var(--u));
  max-width: calc(100% - 217 * var(--u));
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.95 * var(--u));
  line-height: calc(24 * var(--u));
  text-align: justify;
}

.point02-size {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(726 * var(--u));
  width: 100%;
  max-width: calc(200 * var(--u));
  aspect-ratio: 200 / 247;
}
.point02-size img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.point02-tatamy-logo {
  margin: 16px auto 0;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 200 / 44.49;
}
.point02-tatamy-logo img {
  width: 100%;
  height: 100%;
}

/* ---- POINT 03 (たたむのも広げるのも簡単) ---- */
.point03-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 528;
  background: #9a968f;
  overflow: hidden;
}
.point03-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.heading-box-03 {
  position: absolute;
  left: 0;
  top: calc(453 * var(--u));
  width: calc(197 * var(--u));
  height: calc(134 * var(--u));
  background: var(--bg-beige);
  border-top-right-radius: calc(20 * var(--u));
}
.heading-03-num {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(461 * var(--u));
  font-family: "Optima", "Zen Old Mincho", serif;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.3 * var(--u));
  line-height: calc(45 * var(--u));
}
.heading-03-title {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(501 * var(--u));
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(3.3 * var(--u));
  line-height: calc(37 * var(--u));
  white-space: nowrap;
}
.heading-03-vline {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(478 * var(--u));
  width: 1px;
  height: calc(126 * var(--u));
  background: #333;
}

.point03-text {
  position: absolute;
  right: calc(24 * var(--u));
  top: calc(578 * var(--u));
  width: calc(176 * var(--u));
  max-width: calc(100% - 217 * var(--u));
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.95 * var(--u));
  line-height: calc(24 * var(--u));
  text-align: justify;
}

/* ---- point cafe / car scene images ---- */
.point-cafe {
  margin: calc(72 * var(--u)) auto 0;
  width: 100%;
  padding: 0 calc(24 * var(--u));
  aspect-ratio: 345 / 206;
  overflow: hidden;
}
.point-cafe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.point-car {
  margin: calc(4 * var(--u)) auto 0;
  width: 100%;
  padding: 0 calc(24 * var(--u));
  aspect-ratio: 345 / 206;
  overflow: hidden;
}
.point-car img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- LONG USE (0age / 3age / longlong) ---- */
.long-0age {
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 262;
  }
.long-0age img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.long-3age {
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 262;
  }
.long-3age img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.longlong {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -110px;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 160 / 125;
  z-index: 1;
}
.longlong img {
  width: 100%;
  height: 100%;
}

/* ---- LONG USE + MOVE — section 4: 7055.56-8995.56 range, dark-plus bg ---- */
.sec-long-move {
  position: relative;
  width: 100%;
  max-width: 393px;
  background: var(--bg-dark-plus);
  padding-bottom: 130px;      /* total section height reaches 1940 */
}

/* ---- BEIGE MOVE — section 5: 8995.56-15345.56 range, beige bg (scenes + spec + premium + instagram + color) ---- */
.sec-beige-move {
  position: relative;
  width: 100%;
  max-width: 393px;
  background: var(--bg-beige);
  margin: 0 auto;             /* directly follows sec-long-move */
  overflow: hidden;
  /* total height 6350 reached by flow content ending at color-strip bottom */
}

.long-longuse-svg {
  margin: 32.44px auto 0;     /* 7088 - 7055.56 */
  width: 87%;
  aspect-ratio: 345 / 88;
}
.long-longuse-svg img {
  width: 100%;
  height: 100%;
}

.title-long-use {
  margin: 32px 0 0 24px;      /* 7208 - (7088 + 88) */
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 37px;
  white-space: nowrap;
}

/* ---- scroll indicator (flow row below each h-scroll) ---- */
.scroll-point-1,
.scroll-point-2 {
  width: 76px;
  height: 12.04px;
}
.scroll-point-1 img,
.scroll-point-2 img {
  width: 100%;
  height: 100%;
}

/* ---- horizontal scroll strips (Swiper) — flow-positioned within sec-long-move ---- */
.h-scroll-1 {
  position: relative;
  width: 100%;
  max-width: 369px;
  height: 232px;
  overflow: visible; /* let adjacent slides peek */
}
.h-scroll-long {
  margin: 24px 0 0 25px;      /* 7343 - (7208 + 111); left:25 */
}
.h-scroll-move {
  margin: 23.56px 0 0 24px;   /* 8633.56 - (8499 + 111); left:24 */
}
.h-scroll-1 .swiper-wrapper {
  align-items: stretch;
}
.h-scroll-1 .item {
  width: 176px;
}
.h-scroll-1 .item .img {
  width: 176px;
  height: 176px;
  border-radius: 4px;
  overflow: hidden;
}
.h-scroll-1 .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h-scroll-1 .item .caption {
  margin-top: 8px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.3px;
  line-height: 24px;
  white-space: nowrap;
}

/* Swiper pagination rendered into existing scroll-point slots */
.scroll-point-1,
.scroll-point-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.h-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b8b8b;
  display: inline-block;
  cursor: pointer;
  transition: background 0.2s;
}
.h-bullet-active {
  background: #fff;
}

/* ---- pagination row (flow below each h-scroll): prev | dots | next ---- */
.h-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 24px auto 0;
  width: 100%;
  max-width: 393px;
}

/* prev / next arrows (chevron drawn with borders) */
.h-nav {
  position: relative;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  flex: 0 0 auto;
}
.h-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.3px solid #333;
  border-right: 1.3px solid #333;
  transition: opacity 0.2s;
}
.h-nav-next::before {
  transform: translate(-65%, -50%) rotate(45deg);
}
.h-nav-prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}
.h-nav.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* long / move slider arrows now sit inside .h-pagination flex row — no positioning needed */

/* What's Long side label (absolute overlay within sec-long-move) */
.whats-long {
  position: absolute;
  left: -33px;
  top: 0px;
  width: 24px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whats-long span {
  font-family: "Optima", "Zen Old Mincho", serif;
  font-size: 13px;
  letter-spacing: 1.95px;
  line-height: 24px;
  color: #333;
  white-space: nowrap;
  transform: rotate(90deg);
}

/* carbon section (flow child of sec-long-move) */
.carbon-box {
  position: relative;
  margin: 75.56px 0 0 48px;   /* 7650.56 - (7343 + 232) */
  width: calc(100% - 48px);
  max-width: 345px;
  height: 215px;
  background: #3a3a3a;
}
.carbon-title {
  position: absolute;
  left: 25px;
  top: 30px;
  color: #fff;
  z-index: 2;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 24px;
}
.carbon-desc {
  position: absolute;
  left: 25px;
  top: 70px;
  width: 90%;
  color: #fff;
  z-index: 2;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: calc(13 * var(--u));
  letter-spacing: 1.95px;
  line-height: 24px;
}

/* ---- MOVE block (flow within sec-long-move) ---- */
.move-bg {
  display: block;
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 407;
  background: #968e87;
  font-size: 0;                /* collapse any inline-text whitespace baseline */
  line-height: 0;
  margin-top: 130px;
}
.move-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.title-move {
  margin: 32px 0 0 24px;          /* move-bg bottom ≈ 8499 */
  font-family: "Zen Old Mincho", serif;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 37px;
  white-space: nowrap;
}

.move-360 {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 146px;
  height: 222px;
}
.move-360 .frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 146px;
  height: 203px;
}
.move-360 .frame img {
  width: 100%;
  height: 100%;
}
.move-360 .note {
  position: absolute;
  left: 92px;
  top: 211px;
  color: #fff;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 11px;
  white-space: nowrap;
}

/* ---- move subtitle / end title (flow within sec-beige-move) ---- */
.move-subtitle {
  margin: 120px 0 0 24px;      /* 9115.56 - 8995.56 */
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 24px;
  white-space: nowrap;
}
.title-move-end {
  margin: 7px 0 0 24px;        /* 9146.56 - (9115.56 + 24) */
  font-family: "Zen Old Mincho", serif;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 37px;
  white-space: nowrap;
}

/* ---- SEAN (scenes) — flow within sec-beige-move, 6 stacked 1:1 images ---- */
.sean1-top {
  margin: 32px auto 0;         /* 9252.56 - (9146.56 + 74) */
  width: 100%;
  max-width: 393px;
  aspect-ratio: 1 / 1;
}
.sean1-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sean1-bot {
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 1 / 1;
}
.sean1-bot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sean2-top {
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 1 / 1;
}
.sean2-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sean2-bot {
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 1 / 1;
}
.sean2-bot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sean3-top {
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 1 / 1;
}
.sean3-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleY(-1) rotate(180deg);
}
.sean3-bot {
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 1 / 1;
}
.sean3-bot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- SPEC (single combined image — 351×516, flow within sec-beige-move) ---- */
.spec-full {
  margin: 122px auto 0;        /* 11732.56 - (9252.56 + 6*393) */
  width: 100%;
  padding: 0 24px;
}
.spec-full img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- PREMIUM — fully flow, margin-based (no absolute) ---- */
.premium-label {
  margin: 64px 0 0;            /* from spec-full end (3253) to 3317 */
  font-family: "Optima", "Zen Old Mincho", serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 45px;
  text-align: center;
  white-space: nowrap;
}
.premium-hline-top {
  margin: -4px 24px 0;         /* label box ends 3362; pull hline up to 3358 */
  height: 1px;
  background: #333;
}
.premium-small {
  margin: 22px 0 0;            /* from hline-top bottom (3359) to 3381 */
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
.premium-title {
  margin: 8px 0 0;             /* from small bottom (3401) to 3409 */
  font-family: "Zen Old Mincho", serif;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 37px;
  text-align: center;
  white-space: nowrap;
}
.premium-hline-bot {
  margin: 18px 24px 0;         /* from title bottom (3483) to 3501 */
  height: 1px;
  background: #333;
}

/* premium big images — flow */
.premium-holo {
  margin: 33px auto 0;         /* from hline-bot bottom (3502) to 3535 */
  width: 100%;
  padding: 0 24px;
  aspect-ratio: 345 / 160;
  overflow: hidden;
}
.premium-holo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.premium-magrock {
  margin: 42px auto 0;         /* from premium-row-1 bottom (3901) to 3943 */
  width: 100%;
  padding: 0 24px;
  aspect-ratio: 345 / 160;
  overflow: hidden;
}
.premium-magrock-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.premium-relax {
  margin: 40px auto 0;         /* from pill-row-2 bottom (4199) to 4239 */
  width: 100%;
  padding: 0 24px;
  aspect-ratio: 345 / 194;
  overflow: hidden;
}
.premium-relax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.premium-mesh {
  margin: 40px auto 0;         /* from premium-row-2 bottom (4641) to 4681 */
  width: 100%;
  padding: 0 24px;
  aspect-ratio: 345 / 160;
  overflow: hidden;
}
.premium-mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- premium-row: flex row pairing small image + description ---- */
.premium-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 393px;
  margin: 0 auto;
  padding-left: 24px;
}
.premium-row-1 {
  margin-top: 14px;            /* from pill-row-1 bottom (3791) to 3805 */
}
.premium-row-2 {
  margin-top: 16px;            /* from pill-row-3 bottom (4529) to 4545 */
}
.premium-holo-mesh,
.premium-sleep {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 160 / 96;
  flex-shrink: 0;
  overflow: hidden;
}
.premium-holo-mesh img,
.premium-sleep img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.premium-desc-1,
.premium-desc-2 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1.95px;
  line-height: 24px;
  white-space: nowrap;
}

/* ---- premium icon pills (flex rows, flow within sec-beige-move) ---- */
.pill-row {
  width: 311px;
  display: flex;
  gap: 8px;
  margin: 16px auto 0;         /* 16px gap above every pill-row */
}
.pill {
  flex: 1;
  height: 80px;
  background: var(--note);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.pill .top {
  font-size: 12.5px;
  letter-spacing: 1px;
  line-height: 25px;
}
.pill .bot {
  font-size: 17px;
  letter-spacing: 5.4px;
  line-height: 24px;
  font-weight: 400;
  padding-left: 5.4px;
}
.pill .big {
  font-size: 30px;
  letter-spacing: 3px;
  line-height: 25px;
  font-family: "Optima", "Zen Old Mincho", serif;
  padding-left: 3px;
}
.pill .md {
  font-size: 25px;
  letter-spacing: 2.5px;
  line-height: 24px;
  font-family: "Optima", "Zen Old Mincho", serif;
  padding-left: 2.5px;
}

/* ---- INSTAGRAM — flow block; bg image covers card + ring, title/grid overlay ---- */
.ig-card {
  position: relative;
  margin: calc(59 * var(--u)) auto 0;         /* 4996 - (pill-row-4 end 4937); card visual starts at ring top */
  width: 100%;
  max-width: calc(345 * var(--u));
  height: calc(514 * var(--u));               /* includes ring area on top (30) + original card (484) */
  padding-top: calc(107 * var(--u));           /* pushes ig-grid down to 5103 within card */
}
.ig-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}
.ig-title {
  position: absolute;
  left: 50%;
  top: calc(57 * var(--u));                   /* 5053 - 4996 */
  transform: translateX(-50%);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: calc(15 * var(--u));
  letter-spacing: calc(2.25 * var(--u));
  line-height: calc(25 * var(--u));
  white-space: nowrap;
  color: var(--text-dark);
  z-index: 2;
}
.ig-grid {
  margin: 0 auto;              /* padding-top on .ig-card supplies the 107px offset */
  width: 100%;
  max-width: calc(313 * var(--u));
  aspect-ratio: 313 / 389.12;
  display: grid;
  grid-template-columns: calc(152.45 * var(--u)) calc(152.45 * var(--u));
  grid-template-rows: calc(190.56 * var(--u)) calc(190.56 * var(--u));
  gap: calc(8 * var(--u));
  position: relative;
  z-index: 2;
}
.ig-grid:hover img {
  opacity: 0.5;
  filter: brightness(0.9);
}
.ig-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(4 * var(--u));
  transition: opacity 0.3s ease, filter 0.3s ease;
}


/* ---- color variants horizontal scroll (Swiper) — flow within sec-beige-move ---- */
.color-strip {
  position: relative;
  margin: 80px 0 0 0;          /* 5590 - 5510 (ig-card bottom) */
  width: 100%;
  max-width: 393px;
  height: 760px;
  overflow: hidden;
  background: #f0ece4; /* filled dynamically with the NEXT slide's color */
  transition: background 0.35s ease;
}
.color-strip .swiper-wrapper {
  height: 100%;
}
.color-card {
  width: 369px;
  height: 760px;
  position: relative;
  flex-shrink: 0;
  border-radius: 0 20px 0 0; /* rounded top-right — next-slide color peeks through */
}
.color-card.black {
  background: var(--bg-dark-plus);
}
.color-card.beige {
  background: #f0ece4;
}
.color-card.green {
  background: #a3a896;
}
.color-card .c-label {
  position: absolute;
  left: 160px;
  top: 64px;
  font-family: "Optima", "Zen Old Mincho", serif;
  font-size: 13px;
  letter-spacing: 1.3px;
  line-height: 45px;
  white-space: nowrap;
}

/* fixed color indicator (3 dots, current enlarged) — aligned with COLOR label center */
.color-indicator {
  position: absolute;
  left: 185px;               /* = c-label left (160) + COLOR text center offset (~25) */
  top: 103px;                /* 5693 - 5590 (color-strip top) */
  transform: translateX(-50%);
  width: 79px;
  height: 18px;
  border-radius: 100px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12.5px;
  z-index: 3;
  pointer-events: none;
}
.c-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition:
    width 0.25s ease,
    height 0.25s ease;
}
.c-dot-black {
  background: #333333;
}
.c-dot-beige {
  background: #dbd4bf;
}
.c-dot-green {
  background: #99a77d;
}
.c-dot.active {
  width: 11px;
  height: 11px;
}
.color-card .c-product {
  position: absolute;
  left: 61px;
  top: 145px;
  width: 256px;
  height: 362px;
}
.color-card.beige .c-product,
.color-card.green .c-product {
  left: 67px;
}
.color-card .c-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.color-card .c-katoji {
  position: absolute;
  left: 24px;
  top: 516px;
  width: 87px;
  height: 25px;
}
.color-card .c-katoji img {
  width: 100%;
  height: 100%;
}
.color-card .c-number {
  position: absolute;
  left: 24px;
  top: 554.44px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 12px;
}
.color-card .c-name {
  position: absolute;
  left: 24px;
  top: 570px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 1.7px;
  line-height: 26px;
}
.color-card .c-name h1,
.color-card .c-name p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.color-card .c-btn {
  position: absolute;
  left: 55px;
  top: 642px;
  width: 260px;
  height: 64px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.color-card .c-btn .t {
  position: absolute;
  left: 29px;
  top: 20px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.3px;
  line-height: 25px;
}
.color-card .c-btn .arrow {
  position: absolute;
  left: 212px;
  top: 18px;
  width: 28px;
  height: 28px;
  background: #333;
  border-radius: 50%;
  display: flex;
  align-items: initial;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding-top: 2px;
}

/* ---- Footer up images (ママのイラスト/背景) — flow within .page ---- */
.footer-up1 {
  position: relative;
  margin: 0 auto;              /* directly follows sec-beige-move */
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 640;
}
.footer-up1 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-up2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  aspect-ratio: 393 / 640;
}
.footer-up2 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-title {
  position: absolute;
  left: 24px;
  top: 80.56px;                /* 15425.56 - 15345 */
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 2.7px;
  line-height: 34px;
  white-space: nowrap;
}
.footer-body {
  position: absolute;
  left: 24px;
  top: 206.56px;               /* 15551.56 - 15345 */
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 32px;
  white-space: nowrap;
}

/* ---- dark footer area — flow, contains logos + buy card + copyright ---- */
.footer-dark {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 393px;
  height: calc(610 * var(--u));
  background: var(--bg-dark-plus);
}

/* ---- Footer purchase card ---- */
.buy-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(140 * var(--u));                  /* 16765 - 16625 */
  width: calc(345 * var(--u));
  height: calc(371 * var(--u));
  background: #fff;
  border-radius: calc(20 * var(--u));
}
.buy-title {
  position: absolute;
  left: 50%;
  top: calc(54 * var(--u));                   /* 16819 - 16765 */
  transform: translateX(-50%);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--u));
  letter-spacing: calc(2.1 * var(--u));
  line-height: calc(24 * var(--u));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}
.buy-title::before,
.buy-title::after {
  content: "";
  width: calc(15 * var(--u));
  height: 1px;
  background: var(--line);
  transform: rotate(55deg);
  flex: 0 0 auto;
  position: absolute;
}
.buy-title::before {
  left: calc(-18 * var(--u));
}
.buy-title::after {
  right: calc(-18 * var(--u));
  transform: rotate(-55deg);
}
.buy-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(33 * var(--u));                   /* 16798 - 16765 */
  width: calc(19.7 * var(--u));
  height: calc(12.6 * var(--u));
}
.buy-icon img {
  width: 100%;
  height: 100%;
}

.buy-features {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(96 * var(--u));                   /* 16861 - 16765 */
  width: calc(324 * var(--u));
  height: calc(60 * var(--u));
}
.buy-pill {
  position: absolute;
  top: 0;
  width: calc(160 * var(--u));
  height: calc(60 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(20 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
}
.buy-pill.left {
  left: 0;
}
.buy-pill.right {
  left: calc(164 * var(--u));
  flex-direction: column;
  padding-top: calc(10 * var(--u));
}
.buy-pill .m {
  font-family: "Zen Old Mincho", serif;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(3.3 * var(--u));
  line-height: calc(9 * var(--u));
  padding-left: calc(10 * var(--u));
}
.buy-pill .note10 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: calc(10 * var(--u));
  line-height: calc(24 * var(--u));
  white-space: nowrap;
}

.buy-bracket-l {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(60.5 * var(--u));                 /* 16825.5 - 16765 */
  width: calc(8 * var(--u));
  height: calc(12.5 * var(--u));
  color: #333;
  border-left: 1px solid #333;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.buy-bracket-r {
  position: absolute;
  left: calc(306 * var(--u));
  top: calc(60.5 * var(--u));                 /* 16825.5 - 16765 */
  width: calc(8 * var(--u));
  height: calc(12.5 * var(--u));
  color: #333;
  border-right: 1px solid #333;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.buy-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(316 * var(--u));
  height: calc(72 * var(--u));
  background: #fff;
  border-radius: calc(200 * var(--u));
  box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.25);
}
.buy-btn.one {
  top: calc(180 * var(--u));                  /* 16945 - 16765 */
}
.buy-btn.two {
  top: calc(260 * var(--u));                  /* 17025 - 16765 */
}
.buy-btn .t {
  position: absolute;
  left: 50%;
  top: calc(24 * var(--u));
  transform: translateX(-50%);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: calc(12 * var(--u));
  letter-spacing: calc(1.2 * var(--u));
  line-height: calc(24 * var(--u));
  white-space: nowrap;
}
.buy-btn .arrow {
  position: absolute;
  left: calc(273 * var(--u));
  top: calc(22 * var(--u));
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: #333;
  color: #fff;
  display: flex;
  align-items: initial;
  justify-content: center;
  font-size: calc(20 * var(--u));
  line-height: 1;
  padding-top: calc(2 * var(--u));
}

/* ---- copyright (inside .footer-dark) ---- */
.copyright {
  position: absolute;
  left: 0;
  top: calc(567 * var(--u));                  /* 17192 - 16625 */
  width: 100%;
  height: calc(43 * var(--u));
  background: var(--text-dark);
}
.copyright p {
  position: absolute;
  left: 50%;
  top: calc(9 * var(--u));
  transform: translateX(-50%);
  color: #fff;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: calc(10 * var(--u));
  letter-spacing: calc(1 * var(--u));
  line-height: calc(25 * var(--u));
  text-align: center;
  white-space: nowrap;
}

/* footer tatamy logo (inside .footer-dark) */
.footer-tatamy-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(26 * var(--u));                   /* 16651 - 16625 */
  width: calc(280 * var(--u));
  height: calc(58 * var(--u));
}
.footer-tatamy-logo img {
  width: 100%;
  height: 100%;
}
.footer-katoji {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-5 * var(--u));                   /* 16620 - 16625 (sits just above dark area) */
  width: calc(64 * var(--u));
  height: calc(15 * var(--u));
}
.footer-katoji img {
  width: 100%;
  height: 100%;
}

/* ---- responsive: keep SP naturally fluid (no forced pixel widths) ---- */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden;
  }
  /* .page uses the base width: 100%; max-width: 393px — no override needed */
  /* .header-bar / .header-logo / .header-menu keep their base positions */
}

/* =========================================================
   REVEAL ON SCROLL — soft fade-in (フワッと表示)
   ========================================================= */
.reveal {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.reveal.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transition: none;
  }
}

/* =========================================================
   NAVIGATION MODAL (node 1:811)
   ========================================================= */
body.no-scroll {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
  /* overlay covers entire viewport; inner panel is 280px on the right */
}
.modal.is-open {
  display: block;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(51, 51, 51, 0.3);
}

.modal-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-gray);
  overflow-y: auto;
  animation: modal-slide-in 0.25s ease-out both;
}
@keyframes modal-slide-in {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.modal-logo {
  position: absolute;
  left: 24px;
  top: 64px;
  width: 70.37px;
  height: 17px;
}
.modal-logo img {
  width: 100%;
  height: 100%;
}

.modal-close {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 15px;
  height: 15px;
}
.modal-close img {
  width: 100%;
  height: 100%;
}

.modal-nav {
  position: absolute;
  left: 20px;
  top: 145px;
  display: flex;
  flex-direction: column;
  gap: 39px;
}
.m-item {
  position: relative;
  display: block;
  padding-left: 12px;
  color: #fff;
}
.m-bullet {
  position: absolute;
  left: 0;
  top: 12px;
  width: 4px;
  height: 4px;
}
.m-en {
  display: block;
  font-family:
    "Optima", "Optima Regular", "Palatino", "Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: 2.8px;
  color: #fff;
  white-space: nowrap;
}
.m-en.m-wide {
  letter-spacing: 4.2px;
}
.m-jp {
  display: block;
  margin-top: 4px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 1.5px;
  color: #fff;
  white-space: nowrap;
}

.modal-social {
  position: absolute;
  left: 20px;
  top: 714px;
  display: flex;
  gap: 16px;
}
.m-icon {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
}
.m-icon-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.m-icon-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.m-icon-insta {
  width: 14.17px;
  height: 14.17px;
}
.m-icon-cart {
  width: 19.66px;
  height: 12.62px;
}

/* =========================================================
   PC LEFT SIDEBAR — fixed 1291×100vh with nav menu (Figma 47:930)
   ========================================================= */
.pc-sidebar { display: none; }

@media (min-width: 1024px) {
  /* base: show the PC sidebar — flexible width, fills viewport minus the page column */
  .pc-sidebar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: calc(393px * 1.6);   /* leave room for the 1.6×-scaled page (393→629) */
    height: 100vh;
    z-index: 50;
    overflow: hidden;
  }
  .pc-sidebar > img:first-child,
  .pc-sidebar-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .pc-sidebar-tint {
    position: absolute;
    inset: 0;
    background: rgba(51, 51, 51, 0.15);  /* #333 @ 15% overlay */
    pointer-events: none;
  }
  .pc-sidebar-logo {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 126.67px;
    height: 30.6px;
    transition: opacity 0.25s ease;
  }
  .pc-sidebar-logo:hover {
    opacity: 0.6;
  }
  .pc-sidebar-logo img {
    width: 100%;
    height: 100%;
  }
  .pc-sidebar-nav {
    position: absolute;
    left: 40px;
    top: 127.6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pc-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 0;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.95px;
    line-height: 24px;
    white-space: nowrap;
    transition: opacity 0.25s ease;
  }
  .pc-nav-item:hover {
    opacity: 0.6;
  }
  .pc-nav-bullet {
    width: 4px;
    height: 4px;
  }
  .pc-sidebar-social {
    position: absolute;
    left: 40px;
    top: 401px;
    display: flex;
    gap: 16px;
  }
  .pc-icon {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.25s ease;
  }
  .pc-icon:hover {
    background-color: #fff;
  }
  .pc-icon-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.25s ease;
  }
  .pc-icon:hover .pc-icon-ring {
    opacity: 0;
  }
  .pc-icon-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: filter 0.25s ease;
  }
  .pc-icon:hover .pc-icon-glyph {
    filter: brightness(0);
  }
  .pc-icon-insta {
    width: 14.17px;
    height: 14.17px;
  }
  .pc-icon-cart {
    width: 19.7px;
    height: 12.62px;
  }

  /* --- page: right-aligned, scaled 1.6× to match 629px PC column (393×1.6) --- */
  html, body { background: #DFDDD6; }
  .page {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    margin: 0;
    max-width: 393px;
    width: 393px;
    transform: scale(1.6);
    transform-origin: top right;
  }

  /* header removed on PC (per design spec) */
  .header-bar { display: none; }

  /* don't let an accidental body.no-scroll state lock the page */
  body.no-scroll { overflow: auto; }

  /* old mobile modal is hidden; PC uses .pc-sidebar instead */
  .modal { display: none !important; }
}

/* wider desktops: keep sidebar at fixed 1291 — no adjustment needed */