/* =========================================================
   BVLGARI Octo Finissimo 37 × 山下智久  /  Safari Magazine LP
   Figma: pc_take (1440) / sp_take (375) -> one responsive site

   PC layout uses "design units": --u = 1px at 1440 viewport,
   shrinking proportionally below that. All PC numbers are taken
   verbatim from the Figma file (pc_take) and multiplied by --u.
   ========================================================= */

:root {
  /* palette (from Figma) */
  --page:   #494949;   /* page / intro / taidan background */
  --orange: #cc5a32;   /* accent square (odd looks), F name, links */
  --navy-a: #223a5e;   /* accent square (even looks) */
  --navy-t: #203c5d;   /* product text in carousel */
  --beige:  #e8dbd1;   /* contents bg, Y name */
  --gray:   #d9d9d9;   /* movie placeholder */
  --ink:    #333333;   /* text on white */

  /* type */
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", serif;
  --sans:  "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* design unit: 1px of the 1440 design, scales down below 1440 */
  --u: min(1px, calc(100vw / 1440));

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ink);
  background: var(--page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4 { margin: 0; }
button { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* responsive line-break helpers:
   <br class="sp"> breaks on SP only, <br class="pc"> breaks on PC only */
br.sp { display: none; }
@media (max-width: 900px) {
  br.sp { display: inline; }
  br.pc { display: none; }
}

/* ---------- placeholder for missing assets ---------- */
.is-missing > img { visibility: hidden; }
.is-missing {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 12px, rgba(0,0,0,.08) 12px 24px),
    linear-gradient(135deg, #ece4d8, #d8cdba);
}
.is-missing::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: .12em;
  color: rgba(60,50,40,.55);
  white-space: nowrap;
}
/* watch boxes are white in the design; keep placeholder pattern visible */
.lk__watch.is-missing {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, rgba(0,0,0,.06) 12px 24px),
    linear-gradient(135deg, #f4f0ea, #e9e2d6);
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 120ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* soft fade-in (watch closeups etc.) */
.reveal-soft { opacity: 0; transition: opacity 1.6s ease; will-change: opacity; }
.reveal-soft.is-in { opacity: 1; }

/* lookv photos: "滲み出る" emergence — blur dissolving into focus,
   clearly distinct from the fade-up used for text blocks */
[data-lookv].reveal-soft {
  opacity: 0;
  filter: blur(18px);
  transition: opacity 1.8s ease, filter 2.2s var(--ease);
  will-change: opacity, filter;
}
[data-lookv].reveal-soft img {
  transform: scale(1.06);
  transition: transform 2.4s var(--ease);
}
[data-lookv].reveal-soft.is-in {
  opacity: 1;
  filter: blur(0);
}
[data-lookv].reveal-soft.is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-soft { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .reveal-soft img { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   SHARED: ABOUT THE WATCH link (text + circle arrow)
   ========================================================= */
.watch-link {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: calc(12 * var(--u));
  letter-spacing: .1em;
  line-height: 1.6;
  white-space: nowrap;
}
.link-circle {
  position: relative;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: transform .4s var(--ease);
}
.link-circle::before {               /* arrow shaft */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: calc(22 * var(--u)); height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.link-circle::after {                /* arrow head */
  content: "";
  position: absolute;
  top: 50%; left: calc(50% + 11 * var(--u));
  width: calc(7 * var(--u)); height: calc(7 * var(--u));
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(-100%, -50%) rotate(45deg);
}
.watch-link:hover .link-circle { transform: translateX(calc(6 * var(--u))); }

/* SHARED: disclosure circle (plus -> minus) for SP READ MORE / profile */
.disclosure {
  position: relative;
  width: 60px; height: 60px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  transition: transform .5s var(--ease);
}
.disclosure::before,
.disclosure::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.disclosure::after { transform: translate(-50%, -50%) rotate(90deg); }
[aria-expanded="true"] .disclosure { transform: rotate(180deg); }
[aria-expanded="true"] .disclosure::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* =========================================================
   LOADER  ("BVLGARI" letter stagger -> curtain lifts)
   ========================================================= */
body.is-loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.loader.is-done { transform: translateY(-100%); }
.loader.is-gone { display: none; }

.loader__logo {
  display: flex;
  color: #fff;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 5vw, 56px);
  letter-spacing: .32em;
  padding-left: .32em;   /* optically re-center (tracking adds right side space) */
}
.loader__logo span {
  display: block;
  opacity: 0;
  transform: translateY(.65em);
  animation: loader-letter .9s var(--ease) forwards;
}
.loader__logo span:nth-child(1) { animation-delay: .15s; }
.loader__logo span:nth-child(2) { animation-delay: .23s; }
.loader__logo span:nth-child(3) { animation-delay: .31s; }
.loader__logo span:nth-child(4) { animation-delay: .39s; }
.loader__logo span:nth-child(5) { animation-delay: .47s; }
.loader__logo span:nth-child(6) { animation-delay: .55s; }
@keyframes loader-letter {
  from { opacity: 0; transform: translateY(.65em); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  body.is-loading { overflow: auto; }
}
noscript ~ .loader, .no-js .loader { display: none; }

  .logo img{width: 180px; height: auto;}

/* =========================================================
   FV  (100svh slideshow)
   ========================================================= */
.fv {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
}
.fv__bg { position: absolute; inset: 0; }
.fv__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2.2s ease;
  will-change: opacity;
}
.fv__slide.is-active { opacity: 1; }
.fv__slide picture {
  position: absolute;
  inset: 0;
  display: block;
}
.fv__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  transform: scale(1.04);
  transition: transform 7s ease-out;
}
.fv__slide.is-active img { transform: scale(1.1); }

/* bottom gradient band: transparent -> black (Figma: 328/1022) */
.fv__scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 32.1%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
}

/* header drops in once the loader lifts (.fv.is-ready) */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  padding: 0 calc(80 * var(--u));
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s;
}
.fv.is-ready .site-header { opacity: 1; transform: none; }
.site-header__inner {
  max-width: calc(1280 * var(--u));
  margin: 0 auto;
  height: calc(60 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
}
.logo { display: inline-block; color: #fff; line-height: 1; }
.logo span {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: calc(26 * var(--u));
  letter-spacing: .02em;
}
.promotion {
  font-family: var(--sans);
  font-weight: 500;
  color: #fff;
  font-size: calc(11 * var(--u));
  letter-spacing: .1em;
}

.fv__copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 0 calc(80 * var(--u)) calc(52 * var(--u));
  color: #fff;
}
.fv__lead {
  font-weight: 600;
  font-size: calc(24 * var(--u));
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: calc(17 * var(--u));
}
.fv__title-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--u));
}
.fv__title {
  font-weight: 600;
  font-size: calc(48 * var(--u));
  letter-spacing: .1em;
  line-height: 1.5;
}
.fv__brand {
  font-weight: 300;
  font-size: calc(96 * var(--u));
  letter-spacing: .1em;
  line-height: 1.1;
}
/* BVLGARI wordmark image — sized to match the previous 96px text */
.fv__brand img {
  height: calc(72 * var(--u));
  width: auto;
  display: block;
}

/* masked line reveal for the FV copy (positive.co.jp-style):
   each .line clips its child, which rises up once .fv.is-ready */
.fv__copy .line {
  display: block;
  overflow: hidden;
}
.fv__copy .line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.fv__lead  .line:nth-child(1) > span { transition-delay: .35s; }
.fv__lead  .line:nth-child(2) > span { transition-delay: .45s; }
.fv__title .line:nth-child(1) > span { transition-delay: .55s; }
.fv__title .line:nth-child(2) > span { transition-delay: .65s; }
.fv__brand .line > span              { transition-delay: .8s; }
.fv.is-ready .fv__copy .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .fv__copy .line > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   INTRO  (page bg #494949 shows through)
   ========================================================= */
.intro { padding: calc(100 * var(--u)) calc(80 * var(--u)); }
.intro__inner {
  max-width: calc(1280 * var(--u));
  margin: 0 auto;
  display: flex;
  gap: calc(138 * var(--u));
  align-items: flex-start;
  color: #fff;
}
.intro__en {
  flex: 0 0 calc(501 * var(--u));
  font-weight: 600;
  font-size: calc(36 * var(--u));
  letter-spacing: .1em;
  line-height: 1.5;
}
.intro__body {
  flex: 1 1 auto;
  max-width: calc(641 * var(--u));
  padding-top: calc(140 * var(--u));
  font-weight: 300;
  font-size: calc(16 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
}

/* =========================================================
   MOVIE
   ========================================================= */
.movie__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.movie__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the 16:9 frame at any size */
  display: block;
}
.movie__label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(16 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
  color: #000;
}

/* ---- control bar (play/pause · progress · time · sound) ---- */
.movie__controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(40 * var(--u)) calc(28 * var(--u)) calc(20 * var(--u));
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
.movie__frame:hover .movie__controls,
.movie__controls:focus-within,
.movie__controls.is-visible { opacity: 1; }

.movie__play,
.movie__sound {
  flex: 0 0 auto;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  transition: background .3s;
}
.movie__play:hover,
.movie__sound:hover { background: rgba(255, 255, 255, .18); }

.movie__play-icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: currentColor; }
.movie__play .ic-pause { display: none; }
.movie__play.is-playing .ic-play { display: none; }
.movie__play.is-playing .ic-pause { display: block; }

.movie__sound-icon {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.movie__sound-icon .spk { fill: currentColor; stroke: none; }
.movie__sound-icon .slash { opacity: 0; }
.movie__sound.is-muted .wave { opacity: 0; }
.movie__sound.is-muted .slash { opacity: 1; }

/* seekable progress bar */
.movie__progress {
  flex: 1 1 auto;
  padding: calc(10 * var(--u)) 0;   /* larger hit area */
  cursor: pointer;
  touch-action: none;
}
.movie__progress:focus-visible { outline: none; }
.movie__progress-track {
  position: relative;
  height: calc(3 * var(--u));
  min-height: 3px;
  background: rgba(255, 255, 255, .32);
  border-radius: 999px;
}
.movie__progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #fff;
  border-radius: 999px;
}
.movie__progress-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  min-width: 10px; min-height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .2s ease;
}
.movie__progress:hover .movie__progress-knob,
.movie__progress:focus .movie__progress-knob { transform: translate(-50%, -50%) scale(1); }

.movie__time {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: calc(12 * var(--u));
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =========================================================
   LOOK  (white bg, collage — numbers verbatim from Figma)
   ========================================================= */
.look {
  position: relative;
  background: #fff;
  padding: calc(100 * var(--u)) calc(80 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(100 * var(--u));
}
.look__spine {
  position: absolute;
  left: 50%; top: calc(495 * var(--u)); bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, .12);
}

/* collage block: fixed design-unit height, absolute children */
.lk {
  position: relative;
  width: calc(1280 * var(--u));
  margin: 0 auto;
  color: var(--ink);
}
.lk__collage { display: contents; }   /* PC: children position against .lk */
.lk--a { height: calc(1132 * var(--u)); }
.lk--b { height: calc(1297 * var(--u)); }
.lk--c { height: calc(1450 * var(--u)); }
.lk--d { height: calc(1415 * var(--u)); }

.lk__accent {
  position: absolute;
  width: calc(600 * var(--u));
  height: calc(600 * var(--u));
  opacity: 1;
  z-index: 0;   /* stays behind photo / watch / text */
}
.lk--orange .lk__accent { background: var(--orange); }
.lk--navy   .lk__accent { background: var(--navy-a); }
/* Solid color block behind each photo, offset toward the photo's OUTER
   edge + downward so it peeks out clear of the text column (photo-left
   -> peeks left/bottom, photo-right -> peeks right/bottom). */
.lk--a .lk__accent { left: calc(-36 * var(--u)); top: calc(170 * var(--u)); }
.lk--b .lk__accent { left: calc(716 * var(--u)); top: calc(170 * var(--u)); }
.lk--c .lk__accent { left: calc(716 * var(--u)); top: calc(333 * var(--u)); }
.lk--d .lk__accent { left: calc(-36 * var(--u)); top: calc(450 * var(--u)); }

.lk__photo {
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: 1;
}
.lk__photo img { width: 100%; height: 100%; object-fit: cover; }
.lk--a .lk__photo { left: 0;  width: calc(781 * var(--u)); height: calc(622 * var(--u)); }
.lk--b .lk__photo { right: 0; width: calc(781 * var(--u)); height: calc(622 * var(--u)); }
.lk--c .lk__photo { right: 0; width: calc(790 * var(--u)); height: calc(785 * var(--u)); }
.lk--d .lk__photo { left: 0;  width: calc(781 * var(--u)); height: calc(902 * var(--u)); }

.lk__watch {
  position: absolute;
  left: calc(160 * var(--u));
  width: calc(550 * var(--u));
  height: calc(550 * var(--u));
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* watch product cutout: centered on the white card (Figma: 71.93% tall) */
.lk__watch img {
  width: auto;
  height: 71.93%;
  max-width: 80%;
  object-fit: contain;
}
.lk__watch.is-missing img { width: 100%; height: 100%; max-width: none; }
.lk--a .lk__watch { top: calc(582 * var(--u)); }
.lk--b .lk__watch { top: calc(747 * var(--u)); }
.lk--c .lk__watch { top: calc(900 * var(--u)); }
.lk--d .lk__watch { top: calc(865 * var(--u)); }

.lk__txt {
  position: absolute;
  z-index: 3;
  width: calc(478 * var(--u));
  padding: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}
.lk--a .lk__txt { left: calc(801 * var(--u)); top: calc(468 * var(--u)); }
.lk--b .lk__txt { left: 0;                    top: calc(560 * var(--u)); }
.lk--c .lk__txt { left: 0;                    top: calc(715 * var(--u)); }
.lk--d .lk__txt { left: calc(801 * var(--u)); top: calc(751 * var(--u)); }

.lk__title {
  font-weight: 600;
  font-size: calc(24 * var(--u));
  letter-spacing: .1em;
  line-height: 1.5;
}
.lk__body {
  font-weight: 300;
  font-size: calc(16 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
}

/* caption + ABOUT link column (right-bottom of each block) */
.lk__foot {
  position: absolute;
  left: calc(652 * var(--u));
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(16 * var(--u));
}
.lk--a .lk__foot { top: calc(873 * var(--u)); }
.lk--b .lk__foot { top: calc(1002 * var(--u)); }
.lk--c .lk__foot { top: calc(1157 * var(--u)); }
.lk--d .lk__foot { top: calc(1156 * var(--u)); }
.lk__credit {
  align-self: flex-start;
  width: calc(534 * var(--u));
  font-weight: 300;
  font-size: calc(12 * var(--u));
  letter-spacing: .1em;
  line-height: 1.6;
  color: #000;
}
.lk .watch-link { color: #000; }

/* =========================================================
   SPECIAL TALK  (bg #494949)
   ========================================================= */
.talk {
  background: var(--page);
  color: #fff;
  padding: calc(100 * var(--u)) calc(80 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}
.talk__head { text-align: center; }
.talk__en {
  font-weight: 600;
  font-size: calc(68 * var(--u));
  letter-spacing: .05em;
  line-height: 1.5;
}
.talk__ja {
  font-weight: 300;
  font-size: calc(32 * var(--u));
  line-height: 1.6;
}

.talk__main {
  position: relative;
  width: calc(1280 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.talk__spine {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .35);
}
.talk__hero {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.talk__hero img { width: 100%; height: 100%; object-fit: cover; }

/* 対談画像は暗いセクション上にあるため、書き出し時に画像へ焼き込まれた
   細い白フチ（マット）が縁の線として見えてしまう。外周をわずかに
   クロップして隠す（実写真の構図には影響しない範囲） */
.talk__hero.reveal-soft.is-in img,
.tp__item.reveal-soft.is-in img,
.lk__photo.reveal-soft.is-in img { transform: scale(1.02); }

.talk__lead {
  position: relative;
  z-index: 1;
  padding: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}
.talk__lead-title {
  font-weight: 600;
  font-size: calc(24 * var(--u));
  letter-spacing: .1em;
  line-height: 1.5;
}
.talk__lead-body {
  max-width: calc(567 * var(--u));
  font-weight: 300;
  font-size: calc(16 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
}

.talk__dialogue {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.talk__more { display: contents; }   /* PC: rows join the same flow */
.read-more { display: none; }        /* PC: always expanded */

.qa {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: calc(48 * var(--u));
  padding: calc(20 * var(--u));
}
.qa p {
  width: calc(567 * var(--u));
  font-weight: 300;
  font-size: calc(16 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
}
.qa__f { color: var(--orange); }
.qa__y { color: var(--beige); }
.talk__dialogue .qa:first-of-type .qa__f,
.talk__dialogue .qa:first-of-type .qa__y { font-weight: 600; }

.profile {
  width: calc(1280 * var(--u));
  padding: calc(20 * var(--u));
}
.profile__head {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  cursor: default;
  margin-bottom: calc(22 * var(--u));
}
.profile__head .disclosure { display: none; }  /* PC: not collapsible */
.profile__label {
  font-weight: 600;
  font-size: calc(24 * var(--u));
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
}
.profile__cols {
  display: flex;
  gap: calc(40 * var(--u));
}
.profile__p {
  flex: 1 1 0;
  font-weight: 300;
  font-size: calc(16 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
}
.profile__p p + p { margin-top: calc(29 * var(--u)); }

.talk__credit {
  width: calc(1280 * var(--u));
  padding: calc(20 * var(--u));
  display: flex;
  justify-content: flex-end;
}
.talk__credit p {
  width: calc(567 * var(--u));
  font-weight: 300;
  font-size: calc(12 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
}

/* --- talk product shots --- */
.tp {
  position: relative;
  width: calc(1280 * var(--u));
}
.tp--left  { height: calc(690 * var(--u)); }
.tp--right { height: calc(682 * var(--u)); }
.tp__item {
  position: absolute;
  top: 0;
  width: calc(775 * var(--u));
  height: calc(582 * var(--u));
  overflow: hidden;
}
.tp--left  .tp__item { left: 0; }
.tp--right .tp__item { right: 0; }
.tp__item img { width: 100%; height: 100%; object-fit: cover; }
.tp__txt {
  position: absolute;
  width: calc(471 * var(--u));
  padding: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}
.tp--left  .tp__txt { right: 0; top: calc(411 * var(--u)); }
.tp--right .tp__txt { left: 0;  top: calc(345 * var(--u)); }
.tp__title {
  font-weight: 600;
  font-size: calc(24 * var(--u));
  letter-spacing: .1em;
  line-height: 1.5;
}
.tp__body {
  font-weight: 300;
  font-size: calc(16 * var(--u));
  letter-spacing: .1em;
  line-height: 1.8;
}
.tp__links {
  position: absolute;
  display: flex;
  gap: calc(18 * var(--u));
}
.tp--left  .tp__links { left: calc(540 * var(--u)); top: calc(610 * var(--u)); }  /* right edge = image right edge */
.tp--right .tp__links { right: 0; top: calc(596 * var(--u)); }
.tp .watch-link { color: #fff; }

/* =========================================================
   CONTENTS / PRODUCTS carousel  (bg #e8dbd1)
   ========================================================= */
.products {
  background: var(--beige);
  padding: calc(100 * var(--u)) 0 calc(106 * var(--u));
  overflow: hidden;
}
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; width: 100%; }
.carousel__track {
  display: flex;
  align-items: flex-start;
  gap: calc(40 * var(--u));
  height: calc(540 * var(--u));   /* room for the longest info block */
  transition: transform .55s var(--ease);
  will-change: transform;
}
/* the active card takes a real 350px slot (Figma) so the 40px gaps
   between the big center image and its neighbours are preserved */
.pcard {
  position: relative;
  flex: 0 0 auto;
  width: calc(250 * var(--u));
  margin-top: calc(51 * var(--u));
  transition: width .55s var(--ease), margin-top .55s var(--ease);
}
.pcard.is-active {
  width: calc(350 * var(--u));
  margin-top: 0;
}
.pcard__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard__img img {
  width: auto;
  height: 88%;
  max-width: 92%;
  object-fit: contain;
}
.pcard.is-active .pcard__img img { height: 82%; }
.pcard__dummy {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(163 * var(--u));
  height: calc(53 * var(--u));
  background: #000;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: calc(12 * var(--u));
  letter-spacing: .1em;
  white-space: nowrap;
}
.pcard__img.no-img img { display: none; }
.pcard__img.no-img .pcard__dummy { display: flex; }

.pcard__info {
  position: absolute;
  top: calc(366 * var(--u));   /* active img (350) + 16 gap */
  left: 50%;
  transform: translateX(-50%);
  width: calc(320 * var(--u));   /* wider so long names/specs don't clip */
  text-align: center;
  color: var(--navy-t);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease) .2s, visibility 0s .65s;
}
.pcard.is-active .pcard__info {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s var(--ease) .25s, visibility 0s;
}
.pcard__name  { font-weight: 600; font-size: calc(14 * var(--u)); letter-spacing: .1em; line-height: 1.6; }
.pcard__spec  { font-weight: 600; font-size: calc(10 * var(--u)); letter-spacing: .1em; line-height: 1.6; margin-top: calc(16 * var(--u)); }
.pcard__more  { display: inline-block; font-weight: 600; font-size: calc(12 * var(--u)); letter-spacing: .1em; line-height: 1.6; color: var(--orange); text-decoration: underline; margin-top: calc(16 * var(--u)); }
.pcard__price { font-weight: 600; font-size: calc(14 * var(--u)); letter-spacing: .1em; line-height: 1.6; margin-top: calc(16 * var(--u)); }

/* chevron arrows in the gaps beside the center card (Figma: x537/x914) */
.carousel__nav {
  position: absolute;
  top: calc(175 * var(--u));
  z-index: 3;
  width: 36px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.carousel__nav--prev { left: calc(50% - 183 * var(--u)); transform: translate(-50%, -50%); }
.carousel__nav--next { left: calc(50% + 183 * var(--u)); transform: translate(-50%, -50%); }
.carousel__nav span {
  display: block;
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
}
.carousel__nav--prev span { transform: rotate(-135deg); }
.carousel__nav--next span { transform: rotate(45deg); }
.carousel__nav:hover span { border-color: var(--orange); }

/* =========================================================
   FOOTER  (white)
   ========================================================= */
.footer {
  background: #fff;
  color: var(--ink);
  padding: calc(100 * var(--u)) 10px calc(30 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100 * var(--u));
  font-weight: 600;
}
.footer__top {
  display: flex;
  align-items: center;        /* Figma: items-center */
  justify-content: center;
  gap: calc(40 * var(--u));
}
.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--u));
  width: calc(253 * var(--u));
}
.footer__ttl { text-align: center; }
.footer__en { font-size: calc(40 * var(--u)); letter-spacing: .1em; line-height: 1.5; }
.footer__ja { font-size: calc(10 * var(--u)); line-height: 1.6; }
.footer__tel { text-align: center; font-size: calc(14 * var(--u)); line-height: 1.6; }
.footer__tel a { letter-spacing: .1em; }
.footer__btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.footer__btn {
  position: relative;
  border: 1px solid var(--ink);
  padding: 10px 40px 10px 10px;
  font-size: calc(12 * var(--u));
  letter-spacing: .1em;
  line-height: 1.6;
  text-align: center;
  transition: background .3s, color .3s;
}
.footer__btn:hover { background: var(--ink); color: #fff; }
.footer__btn-ico {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border: 1px solid currentColor;
  box-shadow: 3px -3px 0 -1px currentColor;
}
.footer__credit {
  width: calc(375 * var(--u));
  padding: calc(20 * var(--u)) 0;
  display: flex;
  justify-content: center;
}
.footer__credit p {
  width: calc(318 * var(--u));
  font-size: calc(12 * var(--u));
  letter-spacing: .1em;
  line-height: 1.6;
}
.footer__copyright {
  padding: calc(20 * var(--u)) 0;
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  text-align: center;
}

/* =========================================================
   SP  (<= 900px)  ->  sp_take (375)
   ========================================================= */
@media (max-width: 900px) {

  /* ---- FV ---- */
  .fv__scrim { height: 45%; }             /* Figma sp: 298/660 */
  .site-header { padding: 0; }
  .site-header__inner { height: 58px; padding: 16px 0px; }
  .logo span { font-size: 22px; }
  .logo img{width: 100px; height: auto;}
  .promotion { font-size: 11px; }
  .fv__copy { padding: 0 20px 20px; }
  .fv__lead { font-size: 14px; margin-bottom: 8px; line-height: 1.5; }
  .fv__title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fv__title { font-size: 24px; line-height: 1.5; }
  .fv__brand { font-size: 40px; }
  .fv__brand img { height: 30px; }

  /* ---- INTRO ---- */
  .intro { padding: 80px 20px; }
  .intro__inner { flex-direction: column; gap: 40px; max-width: 420px; }
  .intro__en { flex: none; font-size: 24px; }
  .intro__body { padding-top: 0; max-width: none; font-size: 14px; letter-spacing: .1em; }

  /* ---- MOVIE ---- */
  .movie__label { font-size: 14px; }
  .movie__controls { gap: 10px; padding: 32px 14px 12px; opacity: 1; }  /* always visible on touch */
  .movie__play, .movie__sound { width: 36px; height: 36px; }
  .movie__play-icon, .movie__sound-icon { width: 20px; height: 20px; }
  .movie__progress-track { height: 3px; }
  .movie__progress-knob { width: 12px; height: 12px; }
  .movie__time { font-size: 11px; }

  /* ---- LOOK : stacked flow ---- */
  .look { padding: 80px 20px; gap: 80px; }
  .look__spine { display: none; }
  .lk {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  /* neutralize PC absolute layout (must out-rank .lk--x .lk__* rules) */
  .lk .lk__photo,
  .lk .lk__accent,
  .lk .lk__watch,
  .lk .lk__txt,
  .lk .lk__foot {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; height: auto;
  }

  /* photo + accent collage (Figma sp: photo right, pink left-bottom) */
  .lk__collage {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 24px;
  }
  .lk .lk__accent {
    position: absolute;
    left: 0; bottom: 0;
    width: 63.25%;
    aspect-ratio: 1 / 1;
  }
  .lk .lk__photo {
    position: relative;
    margin-left: 9.6%;
    width: 90.4%;
    aspect-ratio: 302.8 / 241.1;
    margin-bottom: 8.9%;   /* accent square extends below the photo */
    z-index: 1;
  }
  .lk--c .lk__photo { aspect-ratio: 303 / 325; }
  .lk--d .lk__photo { aspect-ratio: 303 / 340; }

  /* Figma sp order: collage -> txt -> watch -> about -> credit */
  .lk__collage   { order: 0; }
  .lk .lk__txt   { order: 1; }
  .lk .lk__watch { order: 2; }
  .lk .lk__foot  { order: 3; }

  .lk .lk__txt { display: flex; padding: 0; gap: 22px; margin-bottom: 24px; }
  .lk__title { font-size: 18px; }
  .lk__body { font-size: 14px; }

  .lk .lk__watch {
    position: relative;
    width: 63.8%;
    max-width: 214px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto 16px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lk__watch img { width: auto; height: 90%; max-width: 80%; object-fit: contain; }
  .lk__watch.is-missing img { width: 100%; height: 100%; max-width: none; }
  .lk .lk__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .lk__credit { width: 100%; font-size: 12px; order: 2; }
  .lk .watch-link { order: 1; }
  .watch-link { font-size: 12px; gap: 16px; }
  .link-circle { width: 60px; height: 60px; }
  .link-circle::before { width: 22px; }
  .link-circle::after { left: calc(50% + 11px); width: 7px; height: 7px; }

  /* ---- TALK ---- */
  .talk { padding: 80px 20px; gap: 40px; }
  .talk__en { font-size: 40px; }
  .talk__ja { font-size: 24px; }
  .talk__main { width: 100%; max-width: 420px; gap: 40px; }
  .talk__spine { display: none; }
  .talk__lead { padding: 20px; gap: 22px; }
  .talk__lead-title { font-size: 18px; }
  .talk__lead-body { max-width: none; font-size: 14px; }

  .talk__dialogue { gap: 0; }
  .qa {
    flex-direction: column;
    gap: 24px;
    padding: 20px;
  }
  .qa p { width: auto; font-size: 14px; }

  /* READ MORE (collapsible on SP) */
  .read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #fff;
    margin: 0 auto;
    padding: 0;
  }
  .read-more__label {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: .1em;
    line-height: 1.8;
  }
  .talk__more {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .6s var(--ease), opacity .6s var(--ease);
  }
  .talk__more.is-open { opacity: 1; }

  /* profile (collapsible on SP) — matched to READ MORE, tighter gap */
  .profile {
    width: 100%;
    max-width: 420px;
    padding: 0 20px 20px;
    margin-top: -16px;   /* pull PROFILE up toward READ MORE */
  }
  .profile__head {
    cursor: pointer;
    gap: 16px;
    margin: 0 auto 22px;
    justify-content: center;
    width: auto;
  }
  .profile__head .disclosure { display: inline-block; }
  .profile__label { font-size: 14px; font-weight: 300; letter-spacing: .1em; }
  .profile__body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .6s var(--ease), opacity .6s var(--ease);
  }
  .profile__body.is-open { opacity: 1; }
  .profile__cols { flex-direction: column; gap: 40px; }
  .profile__p { font-size: 14px; }
  .profile__p p + p { margin-top: 25px; }

  .talk__credit { width: 100%; max-width: 420px; padding: 20px; justify-content: flex-start; }
  .talk__credit p { width: auto; font-size: 12px; }

  .tp {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .tp--left, .tp--right { height: auto; }
  .tp__item {
    position: relative;
    left: auto; right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 251;
  }
  .tp__txt {
    position: static;
    width: auto;
    padding: 20px;
    gap: 22px;
  }
  .tp__title { font-size: 18px; }
  .tp__body { font-size: 14px; }
  .tp__links {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 20px;
  }

  /* ---- CONTENTS carousel ---- */
  .products { padding: 80px 0 93px; }
  .carousel__track { gap: 24px; height: 430px; }
  .pcard { width: 200px; margin-top: 25px; }
  .pcard.is-active { width: 250px; margin-top: 0; }
  .pcard__dummy { width: 140px; height: 46px; font-size: 11px; }
  .pcard__info { top: 258px; width: 300px; }
  .pcard__name  { font-size: 14px; }
  .pcard__spec  { font-size: 10px; margin-top: 16px; }
  .pcard__more  { font-size: 12px; margin-top: 16px; }
  .pcard__price { font-size: 14px; margin-top: 16px; }
  .carousel__nav { top: 125px; }
  .carousel__nav--prev { left: calc(50% - 132px); }
  .carousel__nav--next { left: calc(50% + 132px); }
  .carousel__nav span { width: 11px; height: 11px; }

  /* ---- FOOTER ---- */
  .footer { padding: 80px 10px 30px; gap: 80px; }
  .footer__top { flex-direction: column; gap: 40px; }
  .footer__contact { width: 253px; }
  .footer__en { font-size: 40px; }
  .footer__ja { font-size: 10px; }
  .footer__tel { font-size: 14px; }
  .footer__btn { font-size: 12px; }
  .footer__credit { width: 100%; max-width: 375px; padding: 20px 0; }
  .footer__credit p { width: 318px; font-size: 12px; }
  .footer__copyright { font-size: 10px; }
}