@charset "utf-8";

/* ========================================
   ELGRAND PRE - Style
   SP: 390px base / PC: 1600px base
   ======================================== */

/* iOS Safariはbodyだけのoverflow-x:hiddenを無視して横パンできることがあるため、
   htmlにも指定する。clip対応ブラウザでは横スクロールを完全に遮断(hiddenはフォールバック) */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
  overflow-x: clip;
}

body,
body * {
  font-family: ShinGoPro-Light, sans-serif !important;
}

body .nbf-regular,
body .nbf-regular * {
  font-family: ShinGoPro-Regular, sans-serif !important;
}

body .nbf-bold,
body .nbf-bold * {
  font-family: ShinGoPro-Bold, sans-serif !important;
}

/* ========================================
   MV
   ======================================== */
.mv {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.mv__video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mv_logo {
  z-index: 5;
  position: absolute;
  bottom:20vh;
  left: 50%;
  transform: translate(-50%, 0%);
  width: calc(var(--winW) * 300);
  animation: loop_animation 12s linear infinite;
}
@keyframes loop_animation {
  0% {
    opacity:0;
  }
  10% {
    opacity:1;
  }
  30% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

.mv__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv__header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  height: calc(var(--winW) * 60);
}

.mv__header .headerLogoArea {
  display: inline-block;
  vertical-align: bottom;
}

.mv__header .logo_sp {
  display: block;
  width: calc(var(--winW) * 120);
  margin-left: calc(var(--winW) * 20);
  margin-top: calc(var(--winW) * 24);
}

.mv__header .logo_pc {
  display: none;
  width: calc(var(--winW) * 92);
}

.mv__sound {
  position: absolute;
  bottom: calc(var(--winW) * 40);
  right: calc(var(--winW) * 20);
  z-index: 10;
  width: calc(var(--winW) * 36);
  height: calc(var(--winW) * 36);
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
}

.mv__sound-icon {
  width: 100%;
  height: 100%;
}

.mv__scroll {
  position: absolute;
  bottom: 0;
  left: calc(var(--winW) * 20);
  z-index: 10;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: calc(var(--winW) * 8);
  opacity: 0.5;
}

.mv__scroll-text {
  writing-mode: vertical-rl;
  font-size: calc(var(--winW) * 10);
  letter-spacing: 0.1em;
  color: #fff;
}

.mv__scroll-line {
  display: block;
  width: 1px;
  height: 15vh;
  background: #fff;
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media screen and (min-width: 769px) {
  .mv_logo {
    bottom:20vh;
    width: calc(var(--winW) * 520);
    animation: loop_animation 11.8s linear infinite;
  }
  .mv__header {
    height: calc(var(--winW) * 120);
  }
  .mv__header .headerLogoArea {
    margin-left: calc(var(--winW) * 30);
    margin-top: calc(var(--winW) * 30);
  }
  .mv__header .logo_pc {
    display: block;
  }
  .mv__header .logo_sp {
    display: none;
  }
  .mv__sound {
    bottom: calc(var(--winW) * 25);
    right: calc(var(--winW) * 25);
    width: calc(var(--winW) * 40);
    height: calc(var(--winW) * 40);
  }
  .mv__scroll {
    bottom: 0;
    left: auto;
    right: calc(var(--winW) * 64);
  }
  .mv__scroll-text {
    font-size: calc(var(--winW) * 12);
  }
  .mv__scroll-line {
    height: calc(var(--winW) * 180);
  }
}

/* ========================================
   STATEMENT
   ======================================== */
.statement {
  position: relative;
  padding: calc(var(--winW) * 120) calc(var(--winW) * 20) calc(var(--winW) * 0);
  background: #F5F5F5;
  color: #888;
  z-index: 2; /* section-block(z-index:1)の-200重なりでもカードのラベル/ボタンを上に表示 */
}

.statement__inner {
  max-width: calc(var(--winW) * 355);
  margin: 0 auto;
}

.statement__catchcopy {
  margin: 0 auto calc(var(--winW) * 58);
  text-align: center;
}

.statement__catchcopy img {
  width: calc(var(--winW) * 220);
  height: auto;
  margin: 0 auto;
}

.statement__catchcopy-text {
  font-size: calc(var(--winW) * 20);
  line-height: 240%;
  letter-spacing: 60%;
  color: #888;
  text-indent: -1em;
  padding-left: 1.5em;
}

.statement__subtitle {
  text-align: center;
  font-size: calc(var(--winW) * 12);
  letter-spacing: 60%;
  line-height: 180%;
  margin-bottom: calc(var(--winW) * 93);
  color: #888;
}

.statement__text {
  font-size: calc(var(--winW) * 12);
  line-height: 340%;
  letter-spacing: 10%;
  color: #888;
  text-align: center;
  margin: 0 auto;
  margin-bottom: calc(var(--winW) * 99);
  width: calc(var(--winW) * 325);
}
.statement__text p {
  font-size: calc(var(--winW) * 10);
  line-height: 0%;
  letter-spacing: 10%;
  color: #888;
  margin-bottom: calc(var(--winW) * 15);
  margin-top: calc(var(--winW) * 0);
}

/* SP: performance(上・横長全幅) + design(右)・OMOTENASHI(左)の千鳥配置 ((4)版座標) */
.statement__cards {
  position: relative;
  height: calc(var(--winW) * 1200);
}

.statement__card {
  position: absolute;
  text-decoration: none;
  color: #888;
}

.statement__card--perf {
  left: 0;
  top: 0;
  width: 100%;
}
.statement__card--perf .statement__card-img {
  aspect-ratio: 335 / 180;
}

.statement__card--design {
  right: calc(var(--winW) * -20);
  top: calc(var(--winW) * 385);
  width: calc(var(--winW) * 300);
}
.statement__card--design .statement__card-img {
  aspect-ratio: 300 / 240;
}

.statement__card--omot {
  left: calc(var(--winW) * 20);
  top: calc(var(--winW) * 670);
  width: calc(var(--winW) * 220);
}
.statement__card--omot .statement__card-img {
  aspect-ratio: 220 / 264;
}

.statement__card-img {
  position: relative;
  overflow: hidden;
  margin-bottom: calc(var(--winW) * 12);
}

/* PERFORMANCEカードの画像上オーバーレイ(DRIVING PERFORMANCE / 走行性能) ※PCのみ表示 */
.statement__card-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.statement__card-overlay-en {
  font-size: calc(var(--winW) * 16);
  letter-spacing: 0.15em;
}
.statement__card-overlay-ja {
  font-size: calc(var(--winW) * 12);
  letter-spacing: 0.2em;
  margin-top: calc(var(--winW) * 8);
}

.statement__card-img img {
  position: relative;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
}

.statement__card-label {
  font-size: calc(var(--winW) * 15);
  letter-spacing: 20%;
  margin-bottom: calc(var(--winW) * 15);
}

.statement__card-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--winW) * 140);
  height: calc(var(--winW) * 35);
  background: #fff;
  border: none;
  border-radius: 0;
  font-size: calc(var(--winW) * 10);
  letter-spacing: 0.2em;
  color: #888;
}

.statement__card-arrow {
  position: absolute;
  right: calc(var(--winW) * 14);
  display: inline-block;
  width: calc(var(--winW) * 7);
  height: calc(var(--winW) * 7);
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  transform: rotate(-45deg);
  transition: border-color 0.3s;
}

/* hover: VIEW MOREボタンをグレー背景+白文字に反転(Figma hover仕様) */
.statement__card-btn {
  transition: background-color 0.3s, color 0.3s;
}
@media (hover: hover) {
  .statement__card:hover .statement__card-btn {
    background: #888;
    color: #fff;
  }
  .statement__card:hover .statement__card-arrow {
    border-color: #fff;
  }
}

@media screen and (min-width: 769px) {
  .statement {
    padding: calc(var(--winW) * 190) calc(var(--winW) * 100) calc(var(--winW) * 300);
  }
  .statement__inner {
    max-width: calc(var(--winW) * 1130);
  }
  .statement__catchcopy {
    margin-bottom: calc(var(--winW) * 90);
  }
  .statement__catchcopy img {
    width: calc(var(--winW) * 400);
  }
  .statement__catchcopy-text {
    font-size: calc(var(--winW) * 36);
    line-height: 180%;
    text-indent: 0em;
    padding-left: 1.5em;
  }
  .statement__subtitle {
    font-size: calc(var(--winW) * 18);
    margin-bottom: calc(var(--winW) * 73);
  }
  .statement__text {
    font-size: calc(var(--winW) * 18);
    text-align: center;
    margin-bottom: calc(var(--winW) * 129);
    width: calc(var(--winW) * 800);
  }
  .statement__text p {
    font-size: calc(var(--winW) * 12);
    line-height: 0%;
    margin-bottom: calc(var(--winW) * 15);
    margin-top: calc(var(--winW) * -5);
  }
  /* PC: 3カードを Figma 座標(1600基準)で絶対配置 */
  .statement__inner {
    max-width: none;
  }
  .statement__cards {
    position: relative;
    display: block;
    width: calc(var(--winW) * 1600);
    height: calc(var(--winW) * 1500);
    margin: 0 0 0 calc(var(--winW) * -100);
  }
  .statement__card {
    position: absolute;
    width: calc(var(--winW) * 500);
  }
  /* PERFORMANCE: 横長・中央上(Figma x390 y1699 / 820x505) */
  .statement__card--perf {
    left: calc(var(--winW) * 390);
    top: 0;
    width: calc(var(--winW) * 820);
  }
  .statement__card--perf .statement__card-img {
    aspect-ratio: 820 / 400;
  }
  /* DESIGN: 横長・右中(Figma x900 y2234 / 500x463) */
  .statement__card--design {
    right: calc(var(--winW) * 200);
    top: calc(var(--winW) * 655);
    width: calc(var(--winW) * 500);
  }
  .statement__card--design .statement__card-img {
    aspect-ratio: 500 / 463;
  }
  /* OMOTENASHI: 縦長・左下(Figma x240 y2377 / 390x565) */
  .statement__card--omot {
    left: calc(var(--winW) * 240);
    top: calc(var(--winW) * 678);
    width: calc(var(--winW) * 390);
    margin-top: 0;
  }
  .statement__card--omot .statement__card-img {
    aspect-ratio: 390 / 565;
  }
  .statement__card-overlay {
    display: flex;
  }
  .statement__card-overlay-en {
    font-size: calc(var(--winW) * 30);
  }
  .statement__card-overlay-ja {
    font-size: calc(var(--winW) * 18);
    letter-spacing: 0.3em;
    margin-top: calc(var(--winW) * 12);
  }
  .statement__card-label {
    font-size: calc(var(--winW) * 20);
    margin-top: calc(var(--winW) * 24);
    margin-bottom: calc(var(--winW) * 16);
  }
  .statement__card-btn {
    width: calc(var(--winW) * 220);
    height: calc(var(--winW) * 40);
    font-size: calc(var(--winW) * 12);
  }
}

/* ========================================
   ZOOM SECTION (DESIGN / PERFORMANCE / INTERIOR)
   ======================================== */
.section-block {
  position: relative;
  background: #F5F5F5;
  margin-top: calc(var(--winW) * 0);
  z-index:1;
}

.zoom-spacer {
  height: 250vh;
}

.zoom {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #F5F5F5;
  z-index: 1;
}

.zoom__img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* タイトル(z-index:0)の上 = 窓が開くとタイトルを覆う */
  /* 窓(clip-path)+中身のscaleで従来のズームと同じ見た目をGPU合成で再現
     SP開始フレーム(Figma): 横255 × 高さ450、中心は画面中央から102下 */
  clip-path: inset(max(0px, calc((100vh - var(--winW) * 450) / 2 + var(--winW) * 102)) calc((100vw - var(--winW) * 255) / 2) max(0px, calc((100vh - var(--winW) * 450) / 2 - var(--winW) * 102)));
  will-change: clip-path;
}

/* pictureタグはレイアウト上ないものとして扱う
   (.zoom__imgのheight%/top%がimg-wrap(=ビューポート)基準になるように) */
.zoom__img-wrap picture {
  display: contents;
}

/* top/heightはJS(applyZoom)が実測して同期するため自由に変更してOK */
.zoom__img {
  position: relative;
  top: 0%;
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform;
}

/* 画像窓の中に乗せる黒グラデーション(タイトルの可読性確保)
   位置はJS(applyZoom)が毎フレーム窓に合わせてtop/bottom/left/rightを更新する */
.zoom__shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
}

.zoom__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  will-change: backdrop-filter;
  pointer-events: none;
  z-index: 3; /* タイトル(z-index:2)より上 = ズーム後のタイトルにもぼかしがかかる */
  background: rgba(0, 0, 0, 0);
}

/* タイトルは薄グレー背景の上に最初から表示(Figma (2)版)
   窓(zoom__img-wrap z-index:1)が開くと覆われる */
.zoom__title {
  position: absolute;
  top: calc(var(--winW) * 113);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #888;
  pointer-events: none;
}

.zoom__title-en {
  font-size: calc(var(--winW) * 24);
  line-height:160%;
  letter-spacing: 20%;
}

.zoom__title-sub {
  display: block;
  font-size: calc(var(--winW) * 12);
  letter-spacing: 20%;
  line-height: 240%;
}

.zoom__title-ja {
  font-size: calc(var(--winW) * 14);
  letter-spacing: 100%;
  line-height: 180%;
  text-indent: 1em;
}

@media screen and (min-width: 769px) {
  .zoom__shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
  }
  .section-block {
    margin-top: calc(var(--winW) * 0);
  }
  /* PC開始フレーム(Figma): perf 820x400(中心+50) / design 400x370(中心+30) / interior 500x463(中心+120) */
  .zoom__img-wrap {
    clip-path: inset(max(0px, calc((100vh - var(--winW) * 400) / 2 + var(--winW) * 50)) calc((100vw - var(--winW) * 820) / 2) max(0px, calc((100vh - var(--winW) * 400) / 2 - var(--winW) * 50)));
  }
  .zoom__img {
    top: -10%;
    height: 120%;
  }
  .section-block--design .zoom__img-wrap {
    clip-path: inset(max(0px, calc((100vh - var(--winW) * 370) / 2 + var(--winW) * 30)) calc((100vw - var(--winW) * 400) / 2) max(0px, calc((100vh - var(--winW) * 370) / 2 - var(--winW) * 30)));
  }
  .section-block--interior .zoom__img-wrap {
    clip-path: inset(max(0px, calc((100vh - var(--winW) * 463) / 2 + var(--winW) * 120)) calc((100vw - var(--winW) * 500) / 2) max(0px, calc((100vh - var(--winW) * 463) / 2 - var(--winW) * 120)));
  }
  .zoom__title {
    top: calc(var(--winW) * 120);
  }
  .zoom__title-en {
    font-size: calc(var(--winW) * 30);
  }
  .zoom__title-ja {
    font-size: calc(var(--winW) * 18);
    margin-top: calc(var(--winW) * 12);
  }
  .zoom__title-sub {
    font-size: calc(var(--winW) * 20);
  }
}

/* ========================================
   DETAIL (shared across DESIGN / PERFORMANCE / INTERIOR)
   ======================================== */
.detail {
  position: relative;
  z-index: 2;
}

.detail__photo-container {
  position: relative;
  padding: calc(var(--winW) * 0) 0;
}

.detail__photo {
  position: absolute; /* (4)版: 各写真はFigma座標で絶対配置 */
  overflow: hidden;
}

.detail__photo-frame {
  overflow: hidden;
  height: 100%;
}

.detail__photo-frame img {
  position: relative;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
}

.detail__photo-text {
  position: absolute;
  font-size: calc(var(--winW) * 12);
  line-height: 240%;
  color: #fff;
  letter-spacing: 10%;
}
.detail__photo-text-small {
  font-size: calc(var(--winW) * 10);
}
.detail__photo-note {
  position: absolute;
  font-size: calc(var(--winW) * 10);
  line-height: 100%;
  color: #CCCCCC;
  letter-spacing: 10%;
}
/* -- PERFORMANCE photo collage ((4)版 Figma SP) -- */
.section-block--performance .detail__photo-container {
  height: calc(var(--winW) * 900);
}
.section-block--performance .detail__photo--a {
  left: 0; top: 0;
  width: 100%; height: calc(var(--winW) * 140);
}
.section-block--performance .detail__photo-text {
  left: calc(var(--winW) * 20);
  top: calc(var(--winW) * 200);
  width: calc(var(--winW) * 350);
}
.section-block--performance .detail__photo--b {
  right: 0; top: calc(var(--winW) * 170);
  width: calc(var(--winW) * 130); height: calc(var(--winW) * 100);
}
.section-block--performance .detail__photo--c {
  left: calc(var(--winW) * 60); top: calc(var(--winW) * 550);
  width: calc(var(--winW) * 240); height: calc(var(--winW) * 144);
}
.section-block--performance .detail__photo--d {
  left: 0; top: calc(var(--winW) * 710);
  width: calc(var(--winW) * 350); height: calc(var(--winW) * 180);
}

/* -- DESIGN photo collage ((4)版 Figma SP) -- */
.section-block--design .detail__photo-container {
  height: calc(var(--winW) * 870);
}
.section-block--design .detail__photo--a {
  left: 0; top: 0;
  width: calc(var(--winW) * 350); height: calc(var(--winW) * 140);
}
.section-block--design .detail__photo--b {
  left: 0; top: calc(var(--winW) * 180);
  width: calc(var(--winW) * 120); height: calc(var(--winW) * 180);
}
.section-block--design .detail__photo--c {
  left: 0; top: calc(var(--winW) * 512);
  width:100%; height: calc(var(--winW) * 122);
}
.section-block--design .detail__photo--d {
  left: calc(var(--winW) * 15); top: calc(var(--winW) * 700);
  width: calc(var(--winW) * 345); height: calc(var(--winW) * 160);
}

.section-block--design .detail__photo-text {
  left: calc(var(--winW) * 150);
  top: calc(var(--winW) * 204);
  width: calc(var(--winW) * 250);
}

/* -- INTERIOR photo collage ((4)版 Figma SP) -- */
.section-block--interior .detail__photo-container {
  height: calc(var(--winW) * 963);
}
.section-block--interior .detail__photo--a {
  left: 0; top: 0;
  width: calc(var(--winW) * 340); height: calc(var(--winW) * 180);
}
.section-block--interior .detail__photo-text {
  left: calc(var(--winW) * 20);
  top: calc(var(--winW) * 239);
  width: calc(var(--winW) * 340);
}
.section-block--interior .detail__photo--b {
  left: calc(var(--winW) * 15); top: calc(var(--winW) * 463);
  width: calc(var(--winW) * 360); height: calc(var(--winW) * 190);
}
.section-block--interior .detail__photo-note {
  left: calc(var(--winW) * 15); top: calc(var(--winW) * 735);
  width: calc(var(--winW) * 360);
}
.section-block--interior .detail__photo--c {
  left: calc(var(--winW) * 15); top: calc(var(--winW) * 655);
  width: calc(var(--winW) * 179); height: calc(var(--winW) * 98);
}
.section-block--interior .detail__photo--d {
  left: calc(var(--winW) * 196); top: calc(var(--winW) * 655);
  width: calc(var(--winW) * 179); height: calc(var(--winW) * 98);
}
.section-block--interior .detail__photo--e {
  left: 0; top: calc(var(--winW) * 783);
  width: calc(var(--winW) * 375); height: calc(var(--winW) * 180);
}

@media screen and (min-width: 769px) {
  .detail__photo-container {
    padding: 0;
  }
  .detail__photo-text {
    font-size: calc(var(--winW) * 16);
    line-height: 300%;
  }
  .detail__photo-note {
    font-size: calc(var(--winW) * 12);
    line-height: 100%;
  }
  .detail__photo-text-small {
    font-size: calc(var(--winW) * 12);
  }
  /* PERFORMANCE PC ((4)版) */
  .section-block--performance .detail__photo-container {
    height: calc(var(--winW) * 1760);
    margin-bottom: calc(var(--winW) * 200);
  }
  .section-block--performance .detail__photo--a {
    left: calc(var(--winW) * 110); top: 0;
    width: calc(var(--winW) * 1380); height: calc(var(--winW) * 280);
  }
  .section-block--performance .detail__photo-text {
    left: calc(var(--winW) * 200);
    top: calc(var(--winW) * 400);
    width: calc(var(--winW) * 800);
  }
  .section-block--performance .detail__photo--b {
    left: calc(var(--winW) * 957); top: calc(var(--winW) * 700);
    width: calc(var(--winW) * 400); height: calc(var(--winW) * 308);
  }
  .section-block--performance .detail__photo--c {
    left: calc(var(--winW) * 200); top: calc(var(--winW) * 746);
    width: calc(var(--winW) * 640); height: calc(var(--winW) * 360);
  }
  .section-block--performance .detail__photo--d {
    left: calc(var(--winW) * 100); top: calc(var(--winW) * 1280);
    width: calc(var(--winW) * 1260); height: calc(var(--winW) * 447);
  }

  /* DESIGN PC ((4)版) */
  .section-block--design .detail__photo-container {
    height: calc(var(--winW) * 1650);
    margin-bottom: calc(var(--winW) * 200);
  }
  .section-block--design .detail__photo-text {
    left: calc(var(--winW) * 530);
    top: calc(var(--winW) * 470);
    width: calc(var(--winW) * 600);
  }
  .section-block--design .detail__photo--a {
    left: calc(var(--winW) * 270); top: 0;
    width: calc(var(--winW) * 1240); height: calc(var(--winW) * 390);
  }
  .section-block--design .detail__photo--b {
    left: calc(var(--winW) * 100); top: calc(var(--winW) * 440);
    width: calc(var(--winW) * 300); height: calc(var(--winW) * 446);
  }
  .section-block--design .detail__photo--c {
    left: calc(var(--winW) * 530); top: calc(var(--winW) * 835);
    width: calc(var(--winW) * 980); height: calc(var(--winW) * 320);
  }
  .section-block--design .detail__photo--d {
    left: calc(var(--winW) * 250); top: calc(var(--winW) * 1286);
    width: calc(var(--winW) * 1100); height: calc(var(--winW) * 447);
  }

  /* INTERIOR PC ((4)版) */
  .section-block--interior .detail__photo-container {
    height: calc(var(--winW) * 1713);
    margin-bottom: calc(var(--winW) * 200);
  }
  .section-block--interior .detail__photo--a {
    left: 0; top: 0;
    width: calc(var(--winW) * 840); height: calc(var(--winW) * 400);
  }
  .section-block--interior .detail__photo-text {
    left: calc(var(--winW) * 956);
    top: calc(var(--winW) * 80);
    width: calc(var(--winW) * 600);
  }
  .section-block--interior .detail__photo-note {
    left: calc(var(--winW) * 220); top: calc(var(--winW) * 1035);
    width: calc(var(--winW) * 920);
  }
  .section-block--interior .detail__photo--b {
    left: calc(var(--winW) * 220); top: calc(var(--winW) * 571);
    width: calc(var(--winW) * 920); height: calc(var(--winW) * 490);
  }
  .section-block--interior .detail__photo--c {
    left: calc(var(--winW) * 1150); top: calc(var(--winW) * 571);
    width: calc(var(--winW) * 440); height: calc(var(--winW) * 240);
  }
  .section-block--interior .detail__photo--d {
    left: calc(var(--winW) * 1150); top: calc(var(--winW) * 821);
    width: calc(var(--winW) * 440); height: calc(var(--winW) * 240);
  }
  .section-block--interior .detail__photo--e {
    left: calc(var(--winW) * 120); top: calc(var(--winW) * 1233);
    width: calc(var(--winW) * 1360); height: calc(var(--winW) * 480);
  }
}

/* -- MOVIE -- */
.detail__movie {
  position: relative;
  padding: calc(var(--winW) * 110) 0 calc(var(--winW) * 138) 0;
  overflow: hidden;
}

.detail__movie-bg {
  text-align: center;
  padding: calc(var(--winW) * 0) calc(var(--winW) * 20) calc(var(--winW) * 49);
}

.detail__movie-title {
  font-size: calc(var(--winW) * 24);
  letter-spacing: 20%;
  line-height: 160%;
  margin-bottom: calc(var(--winW) * 13);
}

.detail__movie-subtitle {
  font-size: calc(var(--winW) * 14);
  letter-spacing: 100%;
  line-height: 180%;
  color: #fff;
}

.detail__movie-thumb {
  position: relative;
  width: calc(var(--winW) * 315);
  margin: calc(var(--winW) * 0) auto calc(var(--winW) * 30);
  cursor: pointer;
}

.detail__movie-thumb-img {
  overflow: hidden;
}

.detail__movie-thumb-img img {
  width: 100%;
  height: auto;
  /* 画像ロード前後で高さが変わらないよう実画像の比率で領域を確保
     (高さが変わるとScrollTriggerの位置ずれ・再計算カクつきの原因になる) */
  aspect-ratio: 1600 / 903;
  object-fit: cover;
}

.detail__movie-meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--winW) * 4);
  margin-top: calc(var(--winW) * 8);
  margin-bottom: calc(var(--winW) * 8);
}

.detail__movie-story {
  font-size: calc(var(--winW) * 10);
  letter-spacing: 20%;
  line-height: 140%;
  opacity:0.5;
  margin-top: calc(var(--winW) * 0);
}

.detail__movie-coming {
  font-size: calc(var(--winW) * 14);
  letter-spacing: 20%;
  line-height: 140%;
  color: #fff;
  margin-top: calc(var(--winW) * 4);
}

.detail__movie-play {
  position: absolute;
  bottom: calc(var(--winW) * 2);
  right: calc(var(--winW) * 10);
  width: calc(var(--winW) * 73);
  height: calc(var(--winW) * 73);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.detail__movie-play svg {
  width: 100%;
  height: 100%;
}

.detail__catalog-btn {
  display: flex;
  align-items: center;
  width: calc(var(--winW) * 315);
  height: calc(var(--winW) * 50);
  margin: calc(var(--winW) * 20) auto 0;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: none;
  border-radius: 0;
  padding: 0 calc(var(--winW) * 18);
  text-decoration: none;
  color: #fff;
  position: relative;
  transition: 0.5s;
}
/* hover: 白背景+グレー文字に反転(Figma hover仕様) */
@media (hover: hover) {
  .detail__catalog-btn:hover {
    background: #fff;
    color: #888;
  }
  .detail__catalog-btn:hover .detail__catalog-label {
    color: rgba(136, 136, 136, 0.5);
  }
  .detail__catalog-btn:hover .detail__catalog-arrow svg path,
  .detail__catalog-btn:hover .detail__catalog-arrow svg rect {
    stroke: #888;
  }
}

.detail__catalog-text {
  font-size: calc(var(--winW) * 13);
  line-height:180%;
  letter-spacing: 10%;
}

.detail__catalog-label {
  position: absolute;
  right: calc(var(--winW) * 47);
  font-size: calc(var(--winW) * 10);
  line-height:160%;
  letter-spacing:15%;
  color: rgba(255,255,255,0.5);
  transition: color 0.5s;
}

.detail__catalog-arrow svg path,
.detail__catalog-arrow svg rect {
  transition: stroke 0.5s;
}

.detail__catalog-arrow {
  position: absolute;
  right: calc(var(--winW) * 18);
  display: inline-block;
  width: calc(var(--winW) * 24);
  height: calc(var(--winW) * 24);
/*
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
*/
}

@media screen and (min-width: 769px) {
  .detail__movie {
    padding: calc(var(--winW) * 36) 0 calc(var(--winW) * 300) 0;
  }
  .detail__movie-bg {
    padding: calc(var(--winW) * 0) calc(var(--winW) * 20) calc(var(--winW) * 36);
  }
  .detail__movie-title {
    font-size: calc(var(--winW) * 30);
  }
  .detail__movie-subtitle {
    font-size: calc(var(--winW) * 18);
  }
  .detail__movie-thumb {
    width: calc(var(--winW) * 800);
    margin: calc(var(--winW) * 0) auto calc(var(--winW) * 50);
  }
  .detail__movie-story {
    font-size: calc(var(--winW) * 14);
    margin-top: calc(var(--winW) * 0);
  }
  .detail__movie-meta {
    margin-top: calc(var(--winW) * 17);
    margin-bottom: calc(var(--winW) * 2);
  }
  .detail__movie-coming {
    font-size: calc(var(--winW) * 18);
    margin-top: calc(var(--winW) * 2);
  }
  .detail__movie-play {
    width: calc(var(--winW) * 94.5);
    height: calc(var(--winW) * 94.5);
    right: calc(var(--winW) * 32.5);
    bottom: calc(var(--winW) * 0);
  }
  .detail__catalog-btn {
    width: calc(var(--winW) * 800);
    height: calc(var(--winW) * 70);
    padding: 0 calc(var(--winW) * 100) 0 calc(var(--winW) * 50);
    justify-content: center;
  }
  .detail__catalog-text {
    font-size: calc(var(--winW) * 18);
  }
  .detail__catalog-label {
    right: calc(var(--winW) * 80);
    font-size: calc(var(--winW) * 14);
  }
  .detail__catalog-arrow {
    right: calc(var(--winW) * 40);
  }
}

/* -- MOVIE: 複数動画レイアウト((8)版 DESIGN/OMOTENASHI) -- */
.detail__movie-list {
  display: flex;
  flex-direction: column; /* SP: 縦積み */
  align-items: center;
  gap: calc(var(--winW) * 60);
}
.detail__movie--multi .detail__movie-item {
  width: calc(var(--winW) * 315);
}
/* item内では thumb / catalog-btn を幅いっぱいにする(固定幅を上書き) */
.detail__movie--multi .detail__movie-thumb {
  width: 100%;
  margin: 0 0 calc(var(--winW) * 40);
}
.detail__movie--multi .detail__catalog-btn {
  width: 100%;
  margin: 0;
}
/* COMING SOON のカバー画像は半透明(Figma仕様) */
.detail__movie-thumb.is-coming-soon .detail__movie-play svg g {
 opacity:0.5 !important;
}
.gallery__video-item.is-coming-soon .gallery__video-play svg g {
 opacity:0.2 !important;
}

@media screen and (min-width: 769px) {
  .detail__movie-list {
    flex-direction: row; /* PC: 横2列 */
    justify-content: center;
    align-items: flex-start;
    gap: calc(var(--winW) * 80);
  }
  .detail__movie--multi .detail__movie-item {
    width: calc(var(--winW) * 640);
  }
  .detail__movie--multi .detail__movie-thumb {
    margin: 0 0 calc(var(--winW) * 55);
  }
}

/* -- OTHER FEATURES -- */
.detail__other {
  padding: calc(var(--winW) * 60) calc(var(--winW) * 20);
  background: #F5F5F5;
}

.detail__other-title {
  text-align: center;
  margin-bottom: calc(var(--winW) * 40);
}

.detail__other-sub {
  display: block;
  font-size: calc(var(--winW) * 12);
  letter-spacing: 0.2em;
  margin-bottom: calc(var(--winW) * 4);
  color: #888;
}

.detail__other-main {
  display: block;
  font-size: calc(var(--winW) * 24);
  letter-spacing: 0.1em;
  color: #888;
}

.detail__other-cards {
  display: flex;
  gap: calc(var(--winW) * 25);
  justify-content: center;
}

.detail__other-card {
  display: block;
  text-decoration: none;
  color: #888;
  width: calc(var(--winW) * 150);
}

.detail__other-card-img {
  overflow: hidden;
  margin-bottom: calc(var(--winW) * 10);
}

.detail__other-card-img img {
  width: 100%;
  height: auto;
}

.detail__other-card-label {
  font-size: calc(var(--winW) * 11);
  letter-spacing: 0.1em;
  margin-bottom: calc(var(--winW) * 10);
}

.detail__other-card-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--winW) * 150);
  height: calc(var(--winW) * 40);
  background: #fff;
  border: none;
  border-radius: 0;
  font-size: calc(var(--winW) * 10);
  letter-spacing: 0.2em;
  color: #888;
}

.detail__other-card-arrow {
  position: absolute;
  right: calc(var(--winW) * 14);
  display: inline-block;
  width: calc(var(--winW) * 7);
  height: calc(var(--winW) * 7);
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  transform: rotate(-45deg);
}

@media screen and (min-width: 769px) {
  .detail__other {
    padding: calc(var(--winW) * 140) calc(var(--winW) * 200);
  }
  .detail__other-title {
    margin-bottom: calc(var(--winW) * 80);
  }
  .detail__other-sub {
    font-size: calc(var(--winW) * 18);
  }
  .detail__other-main {
    font-size: calc(var(--winW) * 30);
  }
  .detail__other-cards {
    gap: calc(var(--winW) * 120);
  }
  .detail__other-card {
    width: calc(var(--winW) * 380);
  }
  .detail__other-card-img {
    aspect-ratio: 380 / 520;
  }
  .detail__other-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .detail__other-card-label {
    font-size: calc(var(--winW) * 15);
    margin-bottom: calc(var(--winW) * 16);
  }
  .detail__other-card-btn {
    width: 100%;
    height: calc(var(--winW) * 50);
    font-size: calc(var(--winW) * 13);
    margin-top: calc(var(--winW) * 24);
  }
}

/* ========================================
   追従アンカーナビ(fixed_anchor)
   ======================================== */
.fixed-anchor {
  position: fixed;
  top: calc(var(--winW) * 0);
  left: 0;
  width: 100%;
  height: calc(var(--winW) * 40);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.fixed-anchor.is-visible {
  opacity: 1;
  visibility: visible;
}

.fixed-anchor__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 calc(var(--winW) * 25);
}

.fixed-anchor__item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: #fff;
  text-decoration: none;
  font-size: calc(var(--winW) * 10);
  letter-spacing: 0.2em;
}

.fixed-anchor__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--winW) * 1);
  height: 1px;
  background: #fff;
  opacity: 0;
}

.fixed-anchor__arrow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--winW) * 4);
  width: calc(var(--winW) * 6);
  height: calc(var(--winW) * 6);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translateX(-50%) rotate(45deg);
}

/* hover: カレントと同様の下線を表示し、シェブロンが少し下がる(Figma hover仕様) */
.fixed-anchor__line {
  transition: opacity 0.3s;
}
.fixed-anchor__arrow {
  transition: bottom 0.3s;
}
@media (hover: hover) {
  .fixed-anchor__item:hover .fixed-anchor__line {
    opacity: 1;
  }
  .fixed-anchor__item:hover .fixed-anchor__arrow {
    bottom: calc(var(--winW) * 2);
  }
}

.fixed-anchor__item.is-current .fixed-anchor__line {
  opacity: 0.6;
}

.fixed-anchor__item.is-current .fixed-anchor__arrow {
  display: none;
}

@media screen and (min-width: 769px) {
  .fixed-anchor {
    top: auto;
    bottom: calc(var(--winW) * 30);
    left: 50%;
    width: calc(var(--winW) * 750);
    height: calc(var(--winW) * 54);
    border-radius: 3px;
    transform: translateX(-50%);
  }
  .fixed-anchor__inner {
    padding: 0;
  }
  .fixed-anchor__item {
    flex: 1;
    justify-content: center;
    font-size: calc(var(--winW) * 13);
  }
  .fixed-anchor__line {
    bottom: 0;
  }
  .fixed-anchor__arrow {
    bottom: calc(var(--winW) * 7);
    width: calc(var(--winW) * 7);
    height: calc(var(--winW) * 7);
  }
  @media (hover: hover) {
    .fixed-anchor__item:hover .fixed-anchor__arrow {
      bottom: calc(var(--winW) * 4);
    }
  }
}

/* ========================================
   GALLERY
   ======================================== */
.gallery {
  position: relative;
  padding: calc(var(--winW) * 60) 0;
  background: #fff;
}

.gallery__title {
  text-align: center;
  font-size: calc(var(--winW) * 24);
  line-height:160%;
  letter-spacing: 20%;
  margin-bottom: calc(var(--winW) * 36);
  color: #888;
}

.gallery__videos {
  padding: 0 calc(var(--winW) * 20);
  margin-bottom: calc(var(--winW) * 100);
}

.gallery__video-item {
  position: relative;
  margin-bottom: calc(var(--winW) * 56);
  cursor: pointer;
}

.gallery__video-thumb {
  overflow: hidden;
}

.gallery__video-thumb img {
  width: 100%;
  height: auto;
  /* ロード前後の高さ変動防止(実画像の比率で領域確保) */
  aspect-ratio: 1040 / 585;
  object-fit: cover;
}

.gallery__video-play {
  position: absolute;
  bottom: calc(var(--winW) * -30);
  right: calc(var(--winW) * 0);
  width: calc(var(--winW) * 90);
  height: calc(var(--winW) * 90);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* -- COMING SOON(動画未公開)のサムネ: カーソル・hoverを非活性化
      公開時はHTML側の is-coming-soon クラスを外すだけで活性化する -- */
.detail__movie-thumb.is-coming-soon,
.detail__movie-thumb.is-coming-soon .detail__movie-play,
.gallery__video-item.is-coming-soon,
.gallery__video-item.is-coming-soon .gallery__video-play {
  cursor: default;
}
@media (hover: hover) {
  .detail__movie-thumb.is-coming-soon:hover .detail__movie-play svg circle {
    fill: transparent;
  }
  .detail__movie-thumb.is-coming-soon:hover .detail__movie-play svg path {
    fill: #fff;
  }
}

.detail__movie-play::after {
  /* 円がボタンほぼいっぱい(96中93.5) → 少し外側 */
  inset: calc(var(--winW) * -4);
}
.gallery__video-play::after {
  /* 円はボタンの約71%(131中93.6) → 円の少し外側 */
  inset: calc(var(--winW) * 6);
}

.detail__movie-play svg circle,
.gallery__video-play svg circle {
  fill: transparent;
  transition: fill 0.3s;
}
.detail__movie-play svg path,
.gallery__video-play svg path {
  transition: fill 0.3s;
}
@media (hover: hover) {
  .detail__movie-thumb:hover .detail__movie-play svg circle,
  .detail__movie-play:hover svg circle,
  .gallery__video-item:hover .gallery__video-play svg circle,
  .gallery__video-play:hover svg circle {
    fill: #fff;
  }

  .gallery__video-item:not(.is-coming-soon):hover .gallery__video-play svg circle,
  .gallery__video-item:not(.is-coming-soon).gallery__video-item .gallery__video-play:hover svg circle {
    stroke: #888;
  }


  .detail__movie-thumb:hover .detail__movie-play svg path,
  .detail__movie-play:hover svg path,
  .gallery__video-item:not(.is-coming-soon):hover .gallery__video-play svg path,
  .gallery__video-item:not(.is-coming-soon) .gallery__video-play:hover svg path {
    fill: #888;
  }
  /* ギャラリーはmix-blend-mode:differenceのため、hover中は通常合成にして色を正しく出す
     ※SVGにインラインstyleで指定されているため!importantで上書きする */
  .gallery__video-item:hover .gallery__video-play svg g,
  .gallery__video-play:hover svg g {
    mix-blend-mode: normal !important;
    opacity: 1;
  }
  .gallery__video-item.is-coming-soon:hover .gallery__video-play svg g,
  .gallery__video-item.is-coming-soon .gallery__video-play:hover svg g {
    mix-blend-mode: difference !important;
    opacity: 0.2;
  }
  /* hoverで円の外側にリングを表示 */
  .detail__movie-thumb:hover .detail__movie-play::after,
  .detail__movie-play:hover::after,
  .gallery__video-item:hover .gallery__video-play::after,
  .gallery__video-play:hover::after {
    opacity: 1;
  }
  /* COMING SOON(非活性)はリングも出さない */
  .detail__movie-thumb.is-coming-soon:hover .detail__movie-play::after {
    opacity: 0;
  }
  .gallery__video-item.is-coming-soon:hover .gallery__video-play::after {
    opacity: 0;
  }
  .gallery__video-item.is-coming-soon:hover:hover svg circle {
    transition: fill 0.3s;
    fill: transparent;
  }
}

.gallery__video-play svg {
  width: 100%;
  height: 100%;
}

.gallery__video-title {
  font-size: calc(var(--winW) * 12);
  margin-top: calc(var(--winW) * 11);
  line-height: 140%;
  letter-spacing: 15%;
  color: #888;
}

.gallery__photos {
  margin-bottom: calc(var(--winW) * 30);
}

.gallery__swiper {
  overflow: visible;
}

.gallery__swiper .swiper-wrapper {
  align-items: center;
  /* 等速マーキー用: スライド送りのイージングをリニアに */
  transition-timing-function: linear !important;
}

.gallery__swiper .swiper-slide {
  width: calc(var(--winW) * 200);
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
}

.gallery__swiper .swiper-slide.gallery__slide--tall {
  width: calc(var(--winW) * 160);
}

.gallery__swiper .swiper-slide.gallery__slide--wide {
  width: calc(var(--winW) * 240);
}

.gallery__swiper .swiper-slide.gallery__slide--square {
  width: calc(var(--winW) * 180);
}

.gallery__swiper .swiper-slide img {
  width: 100%;
  height: auto;
}

.gallery__all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--winW) * 255);
  height: calc(var(--winW) * 50);
  margin: 0 auto;
  border: none;
  border-radius: 0;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  color: #888;
  font-size: calc(var(--winW) * 12);
  letter-spacing: 0.2em;
  cursor: pointer;
  gap: calc(var(--winW) * 16);
  margin-top: calc(var(--winW) * -76);
  z-index: 2;
  position: relative;
}

.gallery__all-icon {
  font-size: calc(var(--winW) * 16);
}

@media screen and (min-width: 769px) {
  .gallery {
    padding: calc(var(--winW) * 100) 0;
  }
  .gallery__title {
    font-size: calc(var(--winW) * 30);
    margin-bottom: calc(var(--winW) * 98);
  }
  .gallery__videos {
    display: flex;
    gap: calc(var(--winW) * 100);
    padding: 0 calc(var(--winW) * 230);
    justify-content: center;
    margin-bottom: calc(var(--winW) * 200);
  }
  .gallery__video-item {
    width: calc(var(--winW) * 520);
  }
  .gallery__video-play {
    width: calc(var(--winW) * 131);
    height: calc(var(--winW) * 131);
    right: 0;
    bottom: calc(var(--winW) * -50);
  }
  .gallery__video-title {
    font-size: calc(var(--winW) * 20);
    margin-top: calc(var(--winW) * 16);
  }
  .gallery__swiper .swiper-slide {
    width: calc(var(--winW) * 350);
  }
  .gallery__swiper .swiper-slide.gallery__slide--tall {
    width: calc(var(--winW) * 280);
  }
  .gallery__swiper .swiper-slide.gallery__slide--wide {
    width: calc(var(--winW) * 420);
  }
  .gallery__swiper .swiper-slide.gallery__slide--square {
    width: calc(var(--winW) * 320);
  }
  .gallery__all-btn {
    width: calc(var(--winW) * 300);
    height: calc(var(--winW) * 50);
    font-size: calc(var(--winW) * 14);
    margin-top: calc(var(--winW) * -100);
  }
}

/* ========================================
   FOOT
   ======================================== */
.foot {
  background: #fff;
}

.foot__webcatalog {
  position: relative;
  display: block;
  height: calc(var(--winW) * 600);
  overflow: hidden;
  background: #f5f5f5;
  text-decoration: none;
  opacity:0;
}

.foot__webcatalog-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.foot__webcatalog-img img {
  width: 105%;
  height: 105%;
  object-fit: cover;
  will-change: transform;
}
.foot__webcatalog.is-inview .foot__webcatalog-img img {
  animation-name: animation;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
}
.foot__webcatalog.is-inview {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes fadein{
  0% {
    opacity: 0;
  }

  1% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes animation{
  0%{
    width: 105%;
    height: 105%;
  }
  100%{
    width: 100%;
    height: 100%;
  }
}

.foot__webcatalog-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: calc(var(--winW) * 115) calc(var(--winW) * 67) calc(var(--winW) * 60);
  justify-content: space-between;
}

.foot__webcatalog-copy {
  font-size: calc(var(--winW) * 20);
  line-height: 160%;
  letter-spacing: 25%;
}

.foot__webcatalog-logo {
  width: calc(var(--winW) * 296);
}

.foot__webcatalog-foot {
  margin-top: calc(var(--winW) * 296);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.foot__webcatalog-more {
  font-size: calc(var(--winW) * 20);
  line-height: 160%;
  letter-spacing: 25%;
  margin-bottom: calc(var(--winW) * 20);
  white-space: nowrap;
}

.foot__webcatalog-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--winW) * 12);
  width: 100%;
  height: calc(var(--winW) * 50);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  font-size: calc(var(--winW) * 12);
  letter-spacing: 0.15em;
  color: #fff;
  transition: 0.5s;
}
.foot__webcatalog:hover .foot__webcatalog-btn{
  background: rgba(255,255,255,1);
  color: #888;
}
.foot__webcatalog:hover .foot__webcatalog-icon svg path,
.foot__webcatalog:hover .foot__webcatalog-icon svg rect {
  stroke: #888;
}

.foot__webcatalog-icon {
  display: inline-block;
  width: calc(var(--winW) * 20);
  height: calc(var(--winW) * 20);
}

.foot__webcatalog-icon svg {
  width: 100%;
  height: 100%;
}

.foot__support {
  padding: calc(var(--winW) * 77) calc(var(--winW) * 20) calc(var(--winW) * 100);
  text-align: center;
}

.foot__support-title {
  font-size: calc(var(--winW) * 24);
  line-height:160%;
  letter-spacing: 20%;
  margin-bottom: calc(var(--winW) * 5);
  color: #888;
}

.foot__support-subtitle {
  font-size: calc(var(--winW) * 14);
  line-height:180%;
  letter-spacing: 100%;
  color: #888;
  margin-bottom: calc(var(--winW) * 76);
}

.foot__support-links {
  display: flex;
  justify-content: center;
  gap: calc(var(--winW) * 40);
}

.foot__support-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--winW) * 16);
  text-decoration: none;
  color: #888;
}

.foot__support-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--winW) * 36);
  width: calc(var(--winW) * 36);
}

.foot__support-icon--catalog svg {
  width: calc(var(--winW) * 36);
  height: auto;
}

.foot__support-icon--shop svg {
  width: calc(var(--winW) * 20);
  height: auto;
}

.foot__support-icon--simulation svg {
  width: calc(var(--winW) * 28);
  height: auto;
}

.foot__support-label {
  font-size: calc(var(--winW) * 12);
  line-height:100%;
  letter-spacing: 10%;
}

@media screen and (min-width: 769px) {
  .foot {
    padding: calc(var(--winW) * 130) 0;
    background: #F5F5F5;
  }
  .foot__support {
    background: #F5F5F5;
  }
  .foot__webcatalog {
    width: calc(var(--winW) * 1140);
    height: calc(var(--winW) * 380);
    margin:0 auto;
    position:relative;
  }
  .foot__webcatalog.is-inview {
    
  }
  .foot__webcatalog-inner {
    position:absolute;
    left: calc(var(--winW) * 70);
    top: calc(var(--winW) * 117);
    text-align: center;
    padding: 0;
    width: calc(var(--winW) * 430);
  }
  .foot__webcatalog-copy {
    font-size: calc(var(--winW) * 40);
    margin-bottom: calc(var(--winW) * 60);
  }
  .foot__webcatalog-inner {
    justify-content: flex-start;
  }
  .foot__webcatalog-logo {
    width: calc(var(--winW) * 356);
  }
  .foot__webcatalog-btn {
    font-size: calc(var(--winW) * 13);
  }
  .foot__webcatalog-icon {
    width: calc(var(--winW) * 24);
    height: calc(var(--winW) * 24);
  }
  .foot__webcatalog-foot {
    margin-top: 0;
  }
  .foot__webcatalog-more {
    font-size: calc(var(--winW) * 16);
    margin-bottom: calc(var(--winW) * 16);
  }
  .foot__support {
    padding: calc(var(--winW) * 100) calc(var(--winW) * 20) calc(var(--winW) * 120);
  }
  .foot__support-title {
    font-size: calc(var(--winW) * 30);
    line-height:100%;
    margin-bottom: calc(var(--winW) * 22);
  }
  .foot__support-subtitle {
    font-size: calc(var(--winW) * 18);
    line-height:184%;
    margin-bottom: calc(var(--winW) * 62);
  }
  .foot__support-links {
    gap: calc(var(--winW) * 150);
  }
  .foot__support-link {
    gap: calc(var(--winW) * 24);
  }
  .foot__support-icon {
    height: calc(var(--winW) * 52);
    width: calc(var(--winW) * 52);
  }
  .foot__support-icon--catalog svg {
    width: calc(var(--winW) * 67);
  }
  .foot__support-icon--shop svg {
    width: calc(var(--winW) * 38);
  }
  .foot__support-icon--simulation svg {
    width: calc(var(--winW) * 52);
  }
  .foot__support-label {
    font-size: calc(var(--winW) * 17);
  }
}

/* ========================================
   HAMBURGER + MENU
   ======================================== */
.hamburger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: calc(var(--winW) * 70);
  height: calc(var(--winW) * 60);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--winW) * 7);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  border: none;
  cursor: pointer;
  padding: 0;
  /* MVを過ぎてから表示(初期は非表示) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hamburger__line {
  display: block;
  width: calc(var(--winW) * 28);
  height: 1.5px;
  background: #333;
}

.hamburger.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* メニューを開いている間はハンバーガーを隠す(is-visibleより優先) */
.hamburger.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  overflow-y: auto;
  overflow-x: hidden; /* 横スクロールバー/見切れ防止(パネル端でのみクリップ) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: calc(var(--winW) * 80) calc(var(--winW) * 30) calc(var(--winW) * 40);
  transform: translateX(calc(var(--winW) * 30));
  transition: transform 0.4s ease;
}

.menu__panel::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.menu[aria-hidden="false"] .menu__panel {
  transform: translateX(0);
}

.menu__close {
  position: absolute;
  top: calc(var(--winW) * 24);
  right: calc(var(--winW) * 24);
  width: calc(var(--winW) * 24);
  height: calc(var(--winW) * 24);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu__close svg {
  width: 100%;
  height: 100%;
}

.menu__nav {
  margin-bottom: calc(var(--winW) * 30);
}

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--winW) * 18) 0;
  border-bottom: 1px solid rgba(136,136,136,0.25);
  font-size: calc(var(--winW) * 18);
  letter-spacing: 0.1em;
  color: #888;
  text-decoration: none;
}

.menu__arrow {
  display: inline-block;
  width: calc(var(--winW) * 9);
  height: calc(var(--winW) * 9);
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  transform: rotate(-45deg);
}

.menu__banner {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.menu__banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.menu__banner-copy {
  position: absolute;
  top: calc(var(--winW) * 40);
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: calc(var(--winW) * 18);
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.menu__banner-btn {
  position: absolute;
  bottom: calc(var(--winW) * 24);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--winW) * 12);
  width: calc(var(--winW) * 200);
  height: calc(var(--winW) * 44);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff;
  font-size: calc(var(--winW) * 13);
  letter-spacing: 0.1em;
}

.menu__banner-icon {
  display: inline-block;
  width: calc(var(--winW) * 20);
  height: calc(var(--winW) * 14);
}

.menu__banner-icon svg {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 769px) {
  .hamburger {
    width: calc(var(--winW) * 90);
    height: calc(var(--winW) * 80);
    gap: calc(var(--winW) * 8);
  }
  .hamburger__line {
    width: calc(var(--winW) * 32);
  }
  /* PCメニューは画面高さに収めるため縦寸法・フォントをvh基準に
     (横寸法=パネル幅/左右padding/ボタン幅はwinW=画面幅基準のまま)
     基準: Figma 1600x900 → 1vh≈9px */
  .menu__panel {
    width: calc(var(--winW) * 620);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vh calc(var(--winW) * 90);
  }
  .menu__close {
    top: 3.8vh;
    right: calc(var(--winW) * 34);
    width: 3.1vh;
    height: 3.1vh;
  }
  .menu__nav {
    margin-bottom: 3.3vh;
  }
  .menu__link {
    padding: 2vh calc(var(--winW) * 10) 2vh 0; /* 右に余白を確保し回転した矢印が見切れないように */
    font-size: 3.1vh;
  }
  .menu__arrow {
    width: 1.4vh;
    height: 1.4vh;
  }
  .menu__banner {
    flex: 0 0 auto;
  }
  .menu__banner-img {
    height: 33vh;
    object-fit: cover;
  }
  .menu__banner-copy {
    font-size: 2.4vh;
    top: 4.4vh;
  }
  .menu__banner-btn {
    width: calc(var(--winW) * 255);
    height: 5.5vh;
    bottom: 3.3vh;
    font-size: 1.6vh;
  }
}

/* ========================================
   FIXED CV (SP: 画面下横並び / PC: 右端縦書き)
   ======================================== */
.fixed-cv {
  position: fixed;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.fixed-cv.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.fixed-cv__link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #666;
}

.fixed-cv__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed-cv__icon svg {
  width: 100%;
  height: auto;
}

.fixed-cv__label {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .fixed-cv {
    left: calc(var(--winW) * 15);
    right: calc(var(--winW) * 15);
    bottom: calc(var(--winW) * 10);
    height: calc(var(--winW) * 40);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
    border-radius: 2px;
  }
  .fixed-cv__link {
    flex-direction: row;
    gap: calc(var(--winW) * 6);
  }
  .fixed-cv__icon {
    width: calc(var(--winW) * 18);
  }
  .fixed-cv__label {
    font-size: calc(var(--winW) * 10);
    letter-spacing: 0.05em;
  }
}

@media screen and (min-width: 769px) {
  .fixed-cv {
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(100%);
    display: flex;
    flex-direction: column;
    gap: calc(var(--winW) * 10);
    transition: opacity 0.4s ease, transform 0.6s ease;
  }
  .fixed-cv.is-visible {
    transform: translateY(-50%) translateX(0);
  }
  .fixed-cv__link {
    flex-direction: column;
    width: calc(var(--winW) * 45);
    padding: calc(var(--winW) * 18) 0;
    gap: calc(var(--winW) * 12);
    background: rgba(221,221,221,0.65);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
    border-radius: 3px 0 0 3px;
  }
  .fixed-cv__icon {
    width: calc(var(--winW) * 22);
    height: calc(var(--winW) * 22);
  }
  .fixed-cv__label {
    writing-mode: vertical-rl;
    font-size: calc(var(--winW) * 11);
    letter-spacing: 0.2em;
  }
  .fixed-cv__label img {
    width: calc(var(--winW) * 12);
  }
}

/* ========================================
   IMAGE MODAL
   ======================================== */
.modal-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-image[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-image__content {
  transform: scale(0.96);
  transition: transform 0.4s ease;
}

.modal-image[aria-hidden="false"] .modal-image__content {
  transform: scale(1);
}

.modal-image__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
}

.modal-image__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* (6)版デザイン: 閉じるボタンは半透明ボックス+細線のX */
.modal-image__close {
  position: absolute;
  top: calc(var(--winW) * 56);
  right: calc(var(--winW) * 10);
  width: calc(var(--winW) * 44);
  height: calc(var(--winW) * 39);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

.modal-image__close svg {
  width: calc(var(--winW) * 20);
  height: calc(var(--winW) * 20);
}
.modal-image__close svg line {
  stroke-width: 1;
}

/* (6)版デザイン: 画像は正方形(cover) SP=全幅 / PC=高さいっぱい */
/* pictureタグ(AVIF対応)はレイアウト上ないものとして扱う */
.modal-image__img-wrap picture {
  display: contents;
}

/* 画像は元比率のまま表示: SP=横幅いっぱい / PC=高さいっぱい(重要) */
.modal-image__img-wrap {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image__img {
  width: 100%;
  height: auto;
  /* 前へ/次へ切替時のふわっとしたフェード(JSのMODAL_FADE_MSと合わせる) */
  transition: opacity 0.25s ease;
}

/* (6)版デザイン: 下部固定の半透明ナビバー(前へ/カウンター/次へ) */
.modal-image__nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--winW) * 200);
  height: calc(var(--winW) * 50);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--winW) * 32);
  margin-top: 0;
  z-index: 2;
}

.modal-image__prev,
.modal-image__next {
  width: calc(var(--winW) * 10);
  height: calc(var(--winW) * 19);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.modal-image__prev svg,
.modal-image__next svg {
  width: 100%;
  height: 100%;
}
.modal-image__prev svg path,
.modal-image__next svg path {
  stroke-width: 1;
}

.modal-image__counter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--winW) * 14);
  color: #fff;
  letter-spacing: 0.15em;
}

@media screen and (min-width: 769px) {
  .modal-image__close {
    top: calc(var(--winW) * 40);
    right: calc(var(--winW) * 40);
    width: calc(var(--winW) * 74);
    height: calc(var(--winW) * 65);
  }
  .modal-image__close svg {
    width: calc(var(--winW) * 33);
    height: calc(var(--winW) * 33);
  }
  .modal-image__img-wrap {
    /* PC: 高さいっぱいに表示(幅は画像の比率なり) */
    width: auto;
    height: 100vh;
  }
  .modal-image__img {
    width: auto;
    height: 100%;
    /* 横長画像が画面幅を超える場合は幅内に収める */
    max-width: 100vw;
    object-fit: contain;
  }
  .modal-image__nav {
    width: calc(var(--winW) * 260);
    height: calc(var(--winW) * 60);
    padding: 0 calc(var(--winW) * 40);
  }
  .modal-image__prev,
  .modal-image__next {
    width: calc(var(--winW) * 15);
    height: calc(var(--winW) * 27);
  }
  .modal-image__counter {
    font-size: calc(var(--winW) * 18);
  }
}

/* ========================================
   YOUTUBE MODAL
   ======================================== */
.modal-youtube {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-youtube[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-youtube__content {
  transform: scale(0.96);
  transition: transform 0.4s ease;
}

.modal-youtube[aria-hidden="false"] .modal-youtube__content {
  transform: scale(1);
}

.modal-youtube__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
}

.modal-youtube__content {
  position: relative;
  z-index: 1;
  width: calc(var(--winW) * 340);
}

.modal-youtube__close {
  position: absolute;
  top: calc(var(--winW) * -50);
  right: 0;
  width: calc(var(--winW) * 30);
  height: calc(var(--winW) * 30);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.modal-youtube__close svg {
  width: 100%;
  height: 100%;
}

.modal-youtube__player-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.modal-youtube__player-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 769px) {
  .modal-youtube__content {
    width: calc(var(--winW) * 900);
  }
  .modal-youtube__close {
    top: calc(var(--winW) * -60);
    width: calc(var(--winW) * 40);
    height: calc(var(--winW) * 40);
  }
}