@charset "utf-8";

/* ========================================
   NOTE / AURA Black Edition - Style
   SP: 375px base / PC: 1600px base
   Figmaの座標値に基づく絶対配置レイアウト
   （各セクション: position:relative + 高さ固定、子要素: absolute）
   ======================================== */

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: #fff;
  color: var(--color-text);
  overflow-x: hidden;
  overflow-x: clip;
}
.mv__header {
  background-color: #fff;
}
@media only screen and (min-width: 769px) {
  .mv__header {
    background-color: unset;
  }
}
/* フォント: 本案件はデフォルトが ShinGoPro-Regular */
body,
body * {
  font-family: ShinGoPro-Regular, sans-serif !important;
}

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

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

body.is-modal-open {
  overflow: hidden;
}

.sup {
  font-size: 0.645em;
  vertical-align: super;
  line-height: 1;
}

/* 装飾画像共通 */
.deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* PC専用装飾はSPで非表示 */
.spec__deco--brash02,
.spec__deco--line,
.lifewith__deco--line01,
.lifewith__deco--line02 {
  display: none;
}

@media only screen and (min-width: 769px) {
  .spec__deco--brash02,
  .spec__deco--line,
  .lifewith__deco--line01,
  .lifewith__deco--line02 {
    display: block;
  }

  /* SP専用装飾はPCで非表示 */
  .lifewith__deco--line,
  .equipment__deco--brash02 {
    display: none;
  }
}

/* ========================================
   MV
   ======================================== */
.mv {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: calc(var(--winW) * 637);
}

.mv__img {
  width: 100%;
  height: auto;
  /* Figma上はMV画像がy=-30pxに配置されている(上部30px切れ)ため合わせる */
  margin-top: calc(var(--winW) * -30);
}

@media only screen and (min-width: 769px) {
  .mv {
    height: calc(var(--winW) * 960);
  }
  .mv__img {
    margin-top: 0;
  }
}

/* ========================================
   STATEMENT (SP: 637-1214 / PC: 960-1734)
   ======================================== */
.statement {
  position: relative;
  height: calc(var(--winW) * 577);
}

/* 書き出し画像は回転・切り抜き済みのためそのまま配置 */
/* Figmaではラインアートが Black/Edition の文字の上を通るため前面(z2) */
.statement__line {
  position: absolute;
  top: calc(var(--winW) * -136);
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.statement__copy {
  position: absolute;
  top: 0;
  left: calc(var(--winW) * 25);
  z-index: 1;
}

.statement__copy-text {
  font-size: calc(var(--winW) * 12.5);
  letter-spacing: calc(var(--winW) * 2.5);
  line-height: 2.6;
}
.statement__title {
  position: relative;
  z-index: 3;
}
.statement__title-sub {
  position: absolute;
  top: calc(var(--winW) * 159);
  left: calc(var(--winW) * 27);
  font-size: calc(var(--winW) * 9);
  letter-spacing: calc(var(--winW) * 1.8);
  line-height: 1.7;
  z-index: 1;
}

.statement__title-black {
  position: absolute;
  top: calc(var(--winW) * 170);
  left: calc(var(--winW) * 20);
  font-size: calc(var(--winW) * 85);
  line-height: 1;
  color: rgba(0, 0, 0, 0.9);
  z-index: 2;
}

.statement__title-edition {
  position: absolute;
  top: calc(var(--winW) * 246);
  left: calc(var(--winW) * 20);
  font-size: calc(var(--winW) * 85);
  line-height: 1;
  /* Figmaは白フチ抜き(アウトライン)文字 */
  color: #fff;
  -webkit-text-stroke: calc(var(--winW) * 1) #000;
  z-index: 2;
}

.statement__title-simple {
  position: absolute;
  top: calc(var(--winW) * 330);
  left: calc(var(--winW) * 180);
  font-size: calc(var(--winW) * 9);
  letter-spacing: calc(var(--winW) * 1.35);
  line-height: 2;
  z-index: 2;
}

.statement__lead-title {
  position: absolute;
  top: calc(var(--winW) * 377);
  left: calc(var(--winW) * 25);
  font-size: calc(var(--winW) * 18);
  letter-spacing: calc(var(--winW) * 7.2);
  line-height: 2;
  z-index: 1;
}

.statement__lead-text {
  position: absolute;
  top: calc(var(--winW) * 467);
  left: calc(var(--winW) * 25);
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(var(--winW) * 2.2);
  line-height: 2.4;
  z-index: 1;
}

@media only screen and (min-width: 769px) {
  .statement {
    height: calc(var(--winW) * 774);
  }

  .statement__line {
    top: calc(var(--winW) * -366);
  }

  .statement__copy {
    top: calc(var(--winW) * 2);
    left: 0;
    width: 100%;
    text-align: center;
  }

  .statement__copy-text {
    font-size: calc(var(--winW) * 20);
    letter-spacing: calc(var(--winW) * 8);
    line-height: 2.5;
  }

  .statement__title-sub {
    top: calc(var(--winW) * 245);
    left: calc(var(--winW) * 39);
    font-size: calc(var(--winW) * 18);
    letter-spacing: calc(var(--winW) * 3.6);
  }

  .statement__title-black {
    top: calc(var(--winW) * 258);
    left: calc(var(--winW) * 23);
    font-size: calc(var(--winW) * 214);
  }

  .statement__title-edition {
    top: calc(var(--winW) * 258);
    left: calc(50% + calc(var(--winW) * 359.5));
    transform: translateX(-50%);
    font-size: calc(var(--winW) * 214);
      -webkit-text-stroke: calc(var(--winW) * 1.5) #000;
  }

  .statement__title-simple {
    top: calc(var(--winW) * 462);
    left: calc(var(--winW) * 1331);
    font-size: calc(var(--winW) * 12);
    letter-spacing: calc(var(--winW) * 1.8);
  }

  .statement__lead-title {
    top: calc(var(--winW) * 542);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: calc(var(--winW) * 32);
    letter-spacing: calc(var(--winW) * 16.2);
    line-height: 1.8;
  }

  .statement__lead-text {
    top: calc(var(--winW) * 608);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: calc(var(--winW) * 16);
    letter-spacing: calc(var(--winW) * 3.2);
    line-height: 2.5;
  }
}

/* ========================================
   TAB（AURA / NOTE 切替）
   ======================================== */
.model-tab {
  position: relative;
  display: flex;
  width: 100%;
  border-top: calc(var(--winW) * 2) solid #000;
  z-index: 2;
}

.model-tab__btn {
  position: relative;
  display: block;
  width: 50%;
  height: calc(var(--winW) * 70);
  border: none;
  background: rgba(238, 238, 238, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #666;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
}
.model-tab__btn:not(.is-active):hover {
  background: rgba(238, 238, 238, 0.9);
}
.model-tab__btn.is-active {
  background: var(--color-red);
  color: #fff;
}

.model-tab__btn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--winW) * 5);
  background: #000;
}

.model-tab__name {
  display: block;
  font-family: ShinGoPro-Light, sans-serif !important;
  font-size: calc(var(--winW) * 20);
  letter-spacing: calc(var(--winW) * 6);
  line-height: 1;
}

.model-tab__sub {
  display: block;
  font-family: ShinGoPro-Light, sans-serif !important;
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 2);
  line-height: 1;
  margin-top: calc(var(--winW) * 8);
}

/* 下向き矢印(>を回転)。正方形で作る。Figmaでは黒 */
.model-tab__arrow {
  position: absolute;
  top: calc(var(--winW) * 28);
  right: calc(var(--winW) * 16);
  width: calc(var(--winW) * 9);
  height: calc(var(--winW) * 9);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  display: none;
}

.model-tab__btn.is-active .model-tab__arrow {
  display: block;
}

@media only screen and (min-width: 769px) {
  .model-tab {
    border-top-width: calc(var(--winW) * 6);
  }

  .model-tab__btn {
    height: calc(var(--winW) * 130);
  }

  .model-tab__btn.is-active::before {
    height: calc(var(--winW) * 7);
  }

  .model-tab__name {
    font-size: calc(var(--winW) * 50);
    letter-spacing: calc(var(--winW) * 20);
    display: inline-block;
  }

  .model-tab__sub {
    display: inline-block;
    font-size: calc(var(--winW) * 24);
    letter-spacing: calc(var(--winW) * 4.8);
    margin-left: calc(var(--winW) * 16);
    vertical-align: baseline;
  }

  .model-tab__arrow {
    top: calc(var(--winW) * 58);
    right: calc(var(--winW) * 140);
    width: calc(var(--winW) * 23);
    height: calc(var(--winW) * 23);
  }
}

/* ========================================
   モデル別コンテンツ表示切替
   ======================================== */
.model-content {
  display: none;
  opacity: 1;
  /* 強めのイーズアウト(徐々に減速) */
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.model-content.is-active {
  display: block;
}

/* JSでタブ切替時にopacityを操作してフェードさせる(index.js switchModel参照) */
.model-content.model-content--fading-out,
.model-content.model-content--fading-in {
  opacity: 0;
}

/* AOSの位置補正中(index.js refreshAos参照)だけ data-aos要素のトランジションを止める。
   非表示中に誤って発火済み扱いになっていたopacityが、補正の瞬間にアニメーションして
   見えてしまう(チラつく)のを防ぐ */
.aos-no-transition[data-aos],
.aos-no-transition [data-aos] {
  transition: none !important;
}

/* ========================================
   INTRO（タブ直下 SP:1286-1723 / PC:1869-2422）
   ======================================== */
.intro {
  position: relative;
  height: calc(var(--winW) * 437);
}

.intro__brash {
  position: absolute;
  top: calc(var(--winW) * 27);
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.intro__inner {
  position: static;
}

.intro__title {
  position: absolute;
  top: calc(var(--winW) * 46);
  left: calc(var(--winW) * 25);
  font-size: calc(var(--winW) * 14);
  letter-spacing: calc(var(--winW) * 5.6);
  line-height: 2;
  z-index: 1;
}

.intro__text {
  position: absolute;
  top: calc(var(--winW) * 147);
  left: calc(var(--winW) * 25);
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(var(--winW) * 1.1);
  line-height: 2.4;
  color: var(--color-gray);
  z-index: 1;
}
.model-content--note .intro__title {
  top: calc(var(--winW) * 46);
  left: calc(var(--winW) * 80);
  text-align: right;
}

.model-content--note .intro__text {
  top: calc(var(--winW) * 130);
  left: calc(var(--winW) * 110);
  text-align: right;
}
.intro__img {
  position: absolute;
  top: calc(var(--winW) * 269);
  left: calc(var(--winW) * 20);
  width: calc(var(--winW) * 340);
  z-index: 1;
}
.model-content--note .intro__img {
  top: calc(var(--winW) * 270);
  left: calc(var(--winW) * 49);
}

@media only screen and (min-width: 769px) {
  .intro {
    height: calc(var(--winW) * 553);
  }

  .intro__brash {
    top: calc(var(--winW) * -130);
  }

  .intro__title {
    top: calc(var(--winW) * 78);
    left: calc(var(--winW) * 235);
    font-size: calc(var(--winW) * 24);
    letter-spacing: calc(var(--winW) * 9.6);
  }

  .intro__text {
    top: calc(var(--winW) * 196);
    left: calc(var(--winW) * 235);
    width: calc(var(--winW) * 400);
    font-size: calc(var(--winW) * 16);
    letter-spacing: calc(var(--winW) * 1.6);
  }

  .intro__img {
    top: calc(var(--winW) * 251);
    left: calc(var(--winW) * 285);
    width: calc(var(--winW) * 1028);
  }

  /* NOTE側はタイトル左・テキスト右の構成 */
  .model-content--note .intro__title {
    top: calc(var(--winW) * 87);
    left: calc(var(--winW) * 430);
    text-align: left;
  }

  .model-content--note .intro__text {
    top: calc(var(--winW) * 78);
    left: calc(var(--winW) * 1016);
    text-align: left;
  }

  .model-content--note .intro__img {
    top: calc(var(--winW) * 265);
    left: calc(var(--winW) * 395);
  }
}

/* ========================================
   SECTION 共通パーツ
   ======================================== */
.section {
  position: relative;
}

/* ナンバー(01/02/03): Figmaは赤アウトラインのみ(塗りなし)で写真より前面 */
.section__num {
  position: absolute;
  z-index: 2;
  font-family: ShinGoPro-Light, sans-serif !important;
  font-size: calc(var(--winW) * 120);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: calc(var(--winW) * 1.5) rgba(237, 28, 36, 0.65);
  pointer-events: none;
}

.section__sidenote {
  position: absolute;
  z-index: 2;
  right: calc(var(--winW) * 9);
  color: var(--color-gray);
  font-size: calc(var(--winW) * 8);
  letter-spacing: calc(var(--winW) * 0.8);
  line-height: 1.8;
  text-align: right;
}

.section__title {
  position: absolute;
  z-index: 1;
  font-size: calc(var(--winW) * 50);
  letter-spacing: calc(var(--winW) * 7.5);
  line-height: 0.85;
}

.section__label {
  position: absolute;
  z-index: 1;
  font-size: calc(var(--winW) * 9);
  letter-spacing: calc(var(--winW) * 0.9);
  line-height: 2;
}

.section__label--gold {
  color: var(--color-gold);
}

.section__copy {
  position: absolute;
  z-index: 1;
  font-size: calc(var(--winW) * 15);
  letter-spacing: calc(var(--winW) * 5.25);
  line-height: 2.2;
}

.section__text {
  position: absolute;
  z-index: 1;
  width: calc(var(--winW) * 325);
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(5em / 100);
  line-height: 2.2;
}

.section__note {
  position: absolute;
  z-index: 1;
  color: var(--color-gray);
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 1);
  line-height: 1.6;
}

/* Aboutボタン */
.section__btn {
  position: absolute;
  z-index: 2;
  display: block;
  width: calc(var(--winW) * 335);
  height: calc(var(--winW) * 45);
  left: calc(var(--winW) * 20);
  background: #000;
  border: 0.5px solid #000;
  backdrop-filter: blur(6.25px);
  -webkit-backdrop-filter: blur(6.25px);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.section__btn:hover {
  opacity: 0.7;
}
.section__btn-label {
  position: absolute;
  right: calc(var(--winW) * 38);
  top: 50%;
  transform: translateY(-50%);
  font-family: ShinGoPro-Light, sans-serif !important;
  color: #fff;
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(var(--winW) * 2.2);
  line-height: 1;
  white-space: nowrap;
}

.section__btn-more {
  position: absolute;
  left: calc(var(--winW) * 25);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gold);
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 1.35);
  line-height: 1;
  white-space: nowrap;
}

/* 矢印(>)。正方形で作る。Figmaでは赤 */
.section__btn-arrow {
  position: absolute;
  right: calc(var(--winW) * 16);
  top: 50%;
  width: calc(var(--winW) * 7);
  height: calc(var(--winW) * 7);
  border-top: 1px solid var(--color-red-line);
  border-right: 1px solid var(--color-red-line);
  transform: translateY(-50%) rotate(45deg);
}

@media only screen and (min-width: 769px) {
  .section__num {
    font-size: calc(var(--winW) * 300);
  }

  .section__sidenote {
    right: auto;
    left: calc(var(--winW) * 1170);
    font-size: calc(var(--winW) * 12);
    letter-spacing: calc(var(--winW) * 1.8);
    line-height: 2;
    text-align: left;
  }

  .section__title {
    font-size: calc(var(--winW) * 140);
    letter-spacing: calc(var(--winW) * 21);
  }

  .section__label {
    font-size: calc(var(--winW) * 18);
    letter-spacing: calc(var(--winW) * 1.8);
  }

  .section__copy {
    font-size: calc(var(--winW) * 30);
    letter-spacing: calc(var(--winW) * 10.5);
    line-height: 2.4;
  }

  .section__text {
    width: calc(var(--winW) * 609);
    font-size: calc(var(--winW) * 16);
    letter-spacing: calc(var(--winW) * 1.6);
    line-height: 2.4;
  }

  .section__note {
    font-size: calc(var(--winW) * 12);
    letter-spacing: calc(var(--winW) * 1.2);
  }

  .section__btn {
    width: calc(var(--winW) * 541);
    height: calc(var(--winW) * 80);
    left: calc(var(--winW) * 237);
  }

  .section__btn-label {
    right: calc(var(--winW) * 88);
    font-size: calc(var(--winW) * 18);
    letter-spacing: calc(var(--winW) * 3.6);
  }

  .section__btn-more {
    left: calc(var(--winW) * 50);
    font-size: calc(var(--winW) * 15);
    letter-spacing: calc(var(--winW) * 2.6);
  }

  .section__btn-arrow {
    right: calc(var(--winW) * 40);
    width: calc(var(--winW) * 12);
    height: calc(var(--winW) * 12);
  }
}

/* ========================================
   01 DESIGN (SP:1723起点 H1224 / PC:2422起点)
   ======================================== */
.design {
  height: calc(var(--winW) * 1224);
}

.design__deco--line01 {
  top: calc(var(--winW) * -62);
  right: 0;
  width: calc(var(--winW) * 331);
}

.design__deco--line02 {
  top: 0;
  left: calc(var(--winW) * 17);
  width: calc(var(--winW) * 358);
}

.design__deco--line03 {
  top: calc(var(--winW) * 521);
  right: 0;
  width: calc(var(--winW) * 272);
}

.design .section__num {
  top: calc(var(--winW) * 332);
  left: calc(var(--winW) * 244);
}

.design .section__sidenote {
  top: calc(var(--winW) * 425);
}

.design .section__title {
  top: calc(var(--winW) * 85);
  left: calc(var(--winW) * 20);
  /* タイトルは写真より前面(Figmaのレイヤー順) */
  z-index: 2;
}

.design .section__label {
  top: calc(var(--winW) * 138);
  left: calc(var(--winW) * 70);
  z-index: 2;
}

.design__photo {
  position: absolute;
  z-index: 1;
}

.design__photo--a {
  top: calc(var(--winW) * 115);
  left: calc(var(--winW) * 10);
  width: calc(var(--winW) * 365);
}

.design__photo--b {
  top: calc(var(--winW) * 507);
  left: 0;
  width: calc(var(--winW) * 305);
}

.design__photo--c {
  top: calc(var(--winW) * 760);
  left: calc(var(--winW) * 71);
  width: calc(var(--winW) * 305);
}

.design__caption {
  position: absolute;
  top: calc(100% + calc(var(--winW) * 8));
  left: calc(var(--winW) * 5);
  width: calc(var(--winW) * 300);
  color: var(--color-gray);
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 1);
  line-height: 1.6;
  white-space: nowrap;
}

.design__photo--c .design__caption {
  left: 0;
}

.design .section__copy {
  top: calc(var(--winW) * 364);
  left: calc(var(--winW) * 25);
}

.design .section__text {
  top: calc(var(--winW) * 1023);
  left: calc(var(--winW) * 25);
}

.design .section__btn {
  top: calc(var(--winW) * 1163);
}

.model-content--note .design .section__btn {
  top: calc(var(--winW) * 1123);
}

@media only screen and (min-width: 769px) {
  .design {
    height: calc(var(--winW) * 2023);
  }

  .model-content--note .design {
    height: calc(var(--winW) * 1988);
  }

  .design__deco--line01 {
    top: 0;
    right: auto;
    left: 0;
    width: calc(var(--winW) * 593);
  }

  .design__deco--line02 {
    top: calc(var(--winW) * 43);
    left: 0;
    width: calc(var(--winW) * 1484);
  }

  .design__deco--line03 {
    top: calc(var(--winW) * 588);
    right: 0;
    left: auto;
    width: calc(var(--winW) * 795);
  }

  .design .section__num {
    top: calc(var(--winW) * 780);
    left: calc(var(--winW) * 1194);
  }

  .design .section__sidenote {
    top: calc(var(--winW) * 1025);
  }

  .design .section__title {
    top: calc(var(--winW) * 317);
    left: calc(var(--winW) * 27);
  }

  .design .section__label {
    top: calc(var(--winW) * 455);
    left: calc(var(--winW) * 235);
  }

  .design__photo--a {
    top: calc(var(--winW) * 293);
    left: calc(var(--winW) * 585);
    width: calc(var(--winW) * 1015);
  }

  .design__photo--b {
    top: calc(var(--winW) * 913);
    left: calc(var(--winW) * 40);
    width: calc(var(--winW) * 780);
  }

  .design__photo--c {
    top: calc(var(--winW) * 1207);
    left: calc(var(--winW) * 820);
    width: calc(var(--winW) * 740);
  }

  .design__caption {
    top: calc(100% + calc(var(--winW) * 14));
    left: 0;
    width: calc(var(--winW) * 700);
    font-size: calc(var(--winW) * 14);
    letter-spacing: calc(var(--winW) * 2.1);
    line-height: 2;
  }

  .design .section__copy {
    top: calc(var(--winW) * 628);
    left: calc(var(--winW) * 235);
  }

  .model-content--note .design .section__copy {
    top: calc(var(--winW) * 618);
  }

  .design .section__text {
    top: calc(var(--winW) * 1502);
    left: calc(var(--winW) * 235);
  }

  .model-content--note .design .section__text {
    top: calc(var(--winW) * 1512);
  }

  .design .section__btn {
    top: calc(var(--winW) * 1732);
  }

  .model-content--note .design .section__btn {
    top: calc(var(--winW) * 1682);
  }
}

/* ========================================
   02 SPEC AURA (SP:2947起点 H1180 / PC:4445起点 H1434)
   ======================================== */
.spec {
  height: calc(var(--winW) * 1180);
}

.spec__deco--brash01 {
  top: calc(var(--winW) * -277);
  left: 0;
  width: 100%;
}

.spec .section__num {
  top: calc(var(--winW) * 363);
  right: calc(var(--winW) * 3);
}

.spec .section__sidenote {
  top: calc(var(--winW) * 461);
}

.spec .section__title {
  top: calc(var(--winW) * 101);
  left: calc(var(--winW) * 70);
}

.spec .section__label {
  top: calc(var(--winW) * 101);
  left: calc(var(--winW) * 254);
}

.spec__photo {
  position: absolute;
  z-index: 1;
}

.spec__photo--a {
  top: calc(var(--winW) * 153);
  left: calc(var(--winW) * 10);
  width: calc(var(--winW) * 365);
}

.spec__photo--b {
  top: calc(var(--winW) * 410);
  left: 0;
  width: calc(var(--winW) * 243);
}

.spec .section__note {
  top: calc(var(--winW) * 776);
  left: calc(var(--winW) * 10);
}

.spec .section__copy {
  top: calc(var(--winW) * 829);
  left: calc(var(--winW) * 22);
}

.spec .section__text {
  top: calc(var(--winW) * 908);
  left: calc(var(--winW) * 25);
}

.spec .section__btn--spec {
  top: calc(var(--winW) * 1007);
  height: calc(var(--winW) * 44);
}

.section__btn--line::after {
  content: "";
  position: absolute;
  left: calc(var(--winW) * 20);
  bottom: calc(var(--winW) * -1);
  width: calc(var(--winW) * 295);
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.spec .section__btn--bose {
  top: calc(var(--winW) * 1052);
}

@media only screen and (min-width: 769px) {
  .spec {
    height: calc(var(--winW) * 1434);
  }

  .spec__deco--brash01 {
    top: calc(var(--winW) * -759);
    left: 0;
    width: calc(var(--winW) * 996);
  }

  .spec__deco--brash02 {
    top: calc(var(--winW) * -513);
    right: 0;
    width: calc(var(--winW) * 946);
  }

  .spec__deco--line {
    top: calc(var(--winW) * 394);
    left: 0;
    width: calc(var(--winW) * 1236);
  }

  .spec .section__num {
    top: 0;
    right: auto;
    left: calc(var(--winW) * 1196);
  }

  .spec .section__sidenote {
    top: calc(var(--winW) * 1);
  }

  .spec .section__title {
    top: calc(var(--winW) * 5);
    left: calc(var(--winW) * 235);
  }

  .spec .section__label {
    top: calc(var(--winW) * 1);
    left: calc(var(--winW) * 820);
  }

  .spec__photo--a {
    top: calc(var(--winW) * 138);
    left: 0;
    width: calc(var(--winW) * 1015);
  }

  .spec__photo--b {
    top: calc(var(--winW) * 362);
    left: calc(var(--winW) * 1015);
    width: calc(var(--winW) * 545);
  }

  .spec .section__note {
    top: calc(var(--winW) * 1178);
    left: calc(var(--winW) * 1015);
  }

  .spec .section__copy {
    top: calc(var(--winW) * 913);
    left: calc(var(--winW) * 220);
  }

  .spec .section__text {
    top: calc(var(--winW) * 1078);
    left: calc(var(--winW) * 235);
  }

  .spec .section__btn--spec {
    top: calc(var(--winW) * 1208);
    left: calc(var(--winW) * 237);
    width: calc(var(--winW) * 541);
    height: calc(var(--winW) * 80);
  }

  .section__btn--line::after {
    left: calc(var(--winW) * 31);
    width: calc(var(--winW) * 480);
  }

  .spec .section__btn--bose {
    top: calc(var(--winW) * 1286);
  }
}

/* ========================================
   02 SPEC NOTE（3枚構成 SP:H1280 / PC:H2120）
   ======================================== */
.spec--note {
  height: calc(var(--winW) * 1280);
}

.spec--note .section__sidenote {
  top: calc(var(--winW) * 22);
}

.spec--note .section__label {
  top: calc(var(--winW) * 20);
  left: calc(var(--winW) * 20);
}

.spec--note .section__num {
  top: calc(var(--winW) * 20);
}

.spec--note .section__title {
  top: calc(var(--winW) * 44);
  left: calc(var(--winW) * 20);
}

.spec__item {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
}

.spec__item--1 { top: calc(var(--winW) * 113); }
.spec__item--2 { top: calc(var(--winW) * 401); }
.spec__item--3 { top: calc(var(--winW) * 652); }

.spec__item-photo {
  width: calc(var(--winW) * 365);
}

.spec__item--2 .spec__item-photo {
  margin-left: calc(var(--winW) * 5);
}

.spec__item-title {
  font-size: calc(var(--winW) * 15);
  letter-spacing: calc(var(--winW) * 3);
  line-height: 1.8;
  margin-top: calc(var(--winW) * 12);
  margin-left: calc(var(--winW) * 25);
}

.spec__item--2 .spec__item-title {
  /* SPはタイトルが写真の上 */
  position: absolute;
  top: calc(var(--winW) * 205);
  left: calc(var(--winW) * 10);
  margin: 0;
}

.spec__item-title-small {
  font-size: calc(var(--winW) * 11);
}

/* キャプションは書き出し画像内に焼き込み済みのため非表示(重複防止) */
.spec__item-caption {
  display: none;
}

.spec__item--1 .spec__item-caption {
  top: calc(var(--winW) * 169);
  right: calc(var(--winW) * 10);
}

.spec__item--2 .spec__item-caption {
  top: calc(var(--winW) * 169);
  left: calc(var(--winW) * 169);
}

.spec__item--3 .spec__item-caption {
  top: calc(var(--winW) * 169);
  right: calc(var(--winW) * 10);
}

.spec--note .section__copy {
  top: calc(var(--winW) * 959);
  left: calc(var(--winW) * 25);
}

.spec--note .section__text {
  top: calc(var(--winW) * 1038);
  left: calc(var(--winW) * 25);
}

.spec--note .section__btn {
  top: calc(var(--winW) * 1157);
}

@media only screen and (min-width: 769px) {
  .spec--note {
    height: calc(var(--winW) * 2120);
  }

  .spec--note .spec__deco--brash01 {
    top: calc(var(--winW) * -763);
  }

  .spec--note .spec__deco--brash02 {
    top: calc(var(--winW) * -239);
  }

  .spec--note .spec__deco--line {
    top: calc(var(--winW) * 307);
  }

  .spec--note .section__num {
    top: 0;
  }

  .spec--note .section__sidenote {
    top: 0;
  }

  .spec--note .section__title {
    top: 0;
    left: calc(var(--winW) * 227);
  }

  .spec--note .section__label {
    top: 0;
    left: calc(var(--winW) * 820);
  }

  .spec__item--1 { top: calc(var(--winW) * 134); left: calc(var(--winW) * 20); }
  .spec__item--2 { top: calc(var(--winW) * 654); }
  .spec__item--3 { top: calc(var(--winW) * 1174); }

  .spec__item-photo {
    width: calc(var(--winW) * 935);
    margin-left: calc(var(--winW) * 40);
  }

  .spec__item--2 .spec__item-photo {
    margin-left: calc(var(--winW) * 628);
  }

  .spec__item-title {
    position: absolute;
    top: calc(var(--winW) * 178);
    left: calc(var(--winW) * 1015);
    margin: 0;
    font-size: calc(var(--winW) * 30);
    letter-spacing: calc(var(--winW) * 10.5);
    line-height: 2.4;
  }

  .spec__item--2 .spec__item-title {
    top: calc(var(--winW) * 178);
    left: calc(var(--winW) * 235);
  }

  .spec__item-title-small {
    font-size: calc(var(--winW) * 20);
  }

  .spec__item-caption {
    font-size: calc(var(--winW) * 14);
    letter-spacing: calc(var(--winW) * 1.4);
  }

  .spec__item--1 .spec__item-caption {
    top: calc(var(--winW) * 440);
    right: auto;
    left: calc(var(--winW) * 475);
  }

  .spec__item--2 .spec__item-caption {
    top: calc(var(--winW) * 440);
    left: calc(var(--winW) * 628);
  }

  .spec__item--3 .spec__item-caption {
    top: calc(var(--winW) * 440);
    right: auto;
    left: calc(var(--winW) * 555);
  }

  .spec--note .section__copy {
    top: calc(var(--winW) * 1764);
    left: calc(var(--winW) * 235);
  }

  .spec--note .section__text {
    top: calc(var(--winW) * 1773);
    left: calc(var(--winW) * 820);
    width: calc(var(--winW) * 549);
  }

  .spec--note .section__btn {
    top: calc(var(--winW) * 1970);
    left: calc(var(--winW) * 820);
  }
}

/* ========================================
   03 Life with (SP:H790 / PC: aura H1352, note H1392)
   ======================================== */
.lifewith {
  height: calc(var(--winW) * 790);
}

.lifewith__deco--line {
  top: calc(var(--winW) * 65);
  left: 0;
  width: 100%;
  z-index: 2;
}

.lifewith .section__label {
  top: 0;
  left: calc(var(--winW) * 71);
}

.lifewith .section__num {
  top: calc(var(--winW) * 10);
  right: calc(var(--winW) * 3);
  z-index: 5;
}

.lifewith .section__sidenote {
  top: calc(var(--winW) * 18);
}

.lifewith .section__title {
  top: calc(var(--winW) * 23);
  left: calc(var(--winW) * 20);
}

.lifewith__small {
  display: block;
  font-size: calc(var(--winW) * 24);
  letter-spacing: calc(var(--winW) * 3.6);
  line-height: 1;
  margin-bottom: calc(var(--winW) * 6);
}

.lifewith__name {
  display: block;
  font-size: calc(var(--winW) * 50);
  letter-spacing: calc(var(--winW) * 7.5);
  line-height: 0.85;
}

.lifewith__photo {
  position: absolute;
  top: calc(var(--winW) * 105);
  left: calc(var(--winW) * 10);
  width: calc(var(--winW) * 365);
  z-index: 2;
}

.lifewith .section__copy {
  top: calc(var(--winW) * 484);
  left: calc(var(--winW) * 22);
}

.lifewith .section__text {
  top: calc(var(--winW) * 599);
  left: calc(var(--winW) * 25);
}

.lifewith .section__btn {
  top: calc(var(--winW) * 674);
}

.model-content--note .lifewith .section__btn {
  top: calc(var(--winW) * 694);
}

@media only screen and (min-width: 769px) {
  .lifewith {
    height: calc(var(--winW) * 1392);
  }

  .model-content--note .lifewith {
    height: calc(var(--winW) * 1392);
  }

  .lifewith__deco--line01 {
    top: calc(var(--winW) * 221);
    right: 0;
    width: calc(var(--winW) * 1288);
    z-index: 3;
  }

  .lifewith__deco--line02 {
    top: calc(var(--winW) * 498);
    right: 0;
    width: calc(var(--winW) * 1039);
    z-index: 2;
  }

  .lifewith .section__num {
    top: 0;
    right: auto;
    left: calc(var(--winW) * 1207);
  }

  .lifewith .section__sidenote {
    top: calc(var(--winW) * 73);
  }

  .lifewith .section__label {
    top: calc(var(--winW) * 69);
    left: calc(var(--winW) * 235);
  }

  .lifewith .section__title {
    top: calc(var(--winW) * 105);
    left: calc(var(--winW) * 40);
  }

  .lifewith .section__title {
    display: flex;
    align-items: baseline;
  }

  .lifewith__small {
    display: inline-block;
    font-size: calc(var(--winW) * 60);
    letter-spacing: calc(var(--winW) * 9);
    line-height: 0.85;
    margin-bottom: 0;
    /* inline-blockでスパン末尾スペースが潰れるため明示的に間隔を確保 */
    margin-right: calc(var(--winW) * 30);
  }

  .lifewith__name {
    display: inline-block;
    font-size: calc(var(--winW) * 140);
    letter-spacing: calc(var(--winW) * 21);
  }

  .lifewith__photo {
    top: calc(var(--winW) * 243);
    left: 0;
    width: calc(var(--winW) * 1560);
    z-index: 4;
  }

  .lifewith .section__copy {
    top: calc(var(--winW) * 1050);
    left: calc(var(--winW) * 220);
  }

  .lifewith .section__text {
    top: calc(var(--winW) * 1061);
    left: calc(var(--winW) * 820);
    width: calc(var(--winW) * 549);
  }

  .lifewith .section__btn {
    top: calc(var(--winW) * 1176);
    left: calc(var(--winW) * 820);
  }

  .model-content--note .lifewith .section__btn {
    top: calc(var(--winW) * 1217);
  }
}

/* ========================================
   BASIC EQUIPMENT (SP:H1460 / PC:H1208)
   ======================================== */
.equipment {
  position: relative;
  height: calc(var(--winW) * 1700);
}

.equipment__deco--brash01 {
  top: calc(var(--winW) * -355);
  left: 0;
  width: 100%;
}

.equipment__deco--brash02 {
  top: calc(var(--winW) * 360);
  left: 0;
  width: 100%;
}

.equipment__title {
  position: absolute;
  top: calc(var(--winW) * 50);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(var(--winW) * 30);
  letter-spacing: calc(var(--winW) * 7.5);
  line-height: 1.4;
  z-index: 1;
}

.equipment__card {
  position: static;
}

.equipment__img {
  position: absolute;
  z-index: 1;
  top: calc(var(--winW) * 200);
  left: calc(var(--winW) * 18);
  width: calc(var(--winW) * 364);
}

.equipment__card--note .equipment__img {
  top: calc(var(--winW) * 880);
  left: calc(var(--winW) * 42);
  width: calc(var(--winW) * 368);
}

.equipment__grade {
  position: absolute;
  z-index: 1;
  top: calc(var(--winW) * 365);
  left: calc(var(--winW) * 26.5);
  width: calc(var(--winW) * 322);
}

.equipment__card--note .equipment__grade {
  position: absolute;
  z-index: 1;
  top: calc(var(--winW) * 1045);
  left: calc(var(--winW) * 26.5);
  width: calc(var(--winW) * 322);
}

.equipment__grade__name {
  font-size: calc(var(--winW) * 13);
  letter-spacing: calc(var(--winW) * 0.5);
  line-height: 1.6;
  margin-bottom: calc(var(--winW) * 5);
}
.equipment__grade__equipment {
  color: #888888;
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(var(--winW) * 0.5);
  line-height: 1.6;
}
@media only screen and (min-width: 769px) {
  .equipment__grade {
    top: calc(var(--winW) * 530);
    left: calc(var(--winW) * 170);
    width: calc(var(--winW) * 600);
  }
  .equipment__card--note .equipment__grade {
    top: calc(var(--winW) * 530);
    left: calc(var(--winW) * 840);
    width: calc(var(--winW) * 600);
  }
  .equipment__grade__name {
    font-size: calc(var(--winW) * 16);
    letter-spacing: calc(var(--winW) * 0.5);
    line-height: 1.6;
  }
  .equipment__grade__equipment {
    font-size: calc(var(--winW) * 14);
    letter-spacing: calc(var(--winW) * 0.5);
    line-height: 1.6;
  }
}
.equipment__card .section__btn {
  top: calc(var(--winW) * 725);
}

.equipment__card--note .section__btn {
  top: calc(var(--winW) * 1425);
  left: calc(var(--winW) * 18);
}

.equipment__list {
  position: absolute;
  z-index: 1;
  top: calc(var(--winW) * 440);
  left: calc(var(--winW) * 25);
  width: calc(var(--winW) * 320);
  padding-left: calc(var(--winW) * 16);
  color: var(--color-gray);
}

.equipment__card--note .equipment__list {
  top: calc(var(--winW) * 1190);
  left: calc(var(--winW) * 23);
}

.equipment__list li {
  list-style-type: disc;
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(var(--winW) * 0.5);
  line-height: 1.8;
}

.equipment__list-small {
  font-size: calc(var(--winW) * 10);
}

.equipment__more {
  position: absolute;
  z-index: 1;
  top: calc(var(--winW) * 615);
  left: calc(var(--winW) * 37.5);
  width: calc(var(--winW) * 300);
  height: calc(var(--winW) * 32);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.3s ease;
}
.equipment__more:hover {
  opacity: 0.6;
}
.equipment__card--note .equipment__more {
  top: calc(var(--winW) * 1315);
  left: calc(var(--winW) * 37.5);
}

.equipment__more::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #000;
}

.equipment__more-label {
  position: absolute;
  color: #000;
  left: 0;
  top: calc(var(--winW) * 2);
  font-size: calc(var(--winW) * 12);
  letter-spacing: calc(var(--winW) * 2.4);
  line-height: 1;
}

.equipment__more-view {
  position: absolute;
  right: calc(var(--winW) * 28);
  top: calc(var(--winW) * 4);
  color: var(--color-gold);
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 1.5);
  line-height: 1;
}

.equipment__more-plus {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--color-red-line);
  font-size: calc(var(--winW) * 18);
  line-height: 1;
}

.equipment__price {
  position: absolute;
  z-index: 1;
  top: calc(var(--winW) * 664);
  left: calc(var(--winW) * 37.5);
  width: calc(var(--winW) * 325);
}

.equipment__card--note .equipment__price {
  top: calc(var(--winW) * 1364);
  left: calc(var(--winW) * 37.5);
}

/* Figma: 左にラベル+注記の縦積み、右に金額(※と円は金額右に縦積み) */
.equipment__price-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(var(--winW) * 12);
  letter-spacing: calc(var(--winW) * 1.2);
  line-height: 1.4;
}

.equipment__price-note {
  position: absolute;
  top: calc(var(--winW) * 40);
  left: 0;
  color: var(--color-gray);
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 1);
  line-height: 1;
}

.equipment__price-num {
  position: absolute;
  top: 0;
  left: calc(var(--winW) * 100);
  font-size: calc(var(--winW) * 34);
  letter-spacing: calc(var(--winW) * 1.7);
  line-height: 1;
  white-space: nowrap;
}

.equipment__price-unit {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  margin-left: calc(var(--winW) * 2);
  margin-top: calc(var(--winW) * 3);
}

.equipment__price-kome {
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 0.5);
  line-height: 1;
}

.equipment__price-yen {
  font-family: ShinGoPro-Regular, sans-serif !important;
  font-size: calc(var(--winW) * 12);
  letter-spacing: calc(var(--winW) * 1.2);
  line-height: 1;
  margin-top: calc(var(--winW) * 3);
}
.equipment__cards__annotation {
  position: absolute;
  color: #888888;
  width: calc(var(--winW) * 320);
  bottom: calc(var(--winW) * 100);
  left: calc(var(--winW) * 27.5);
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 0.5);
  line-height: 1.6;
  z-index: 1;
}
@media only screen and (min-width: 769px) {
  .equipment {
    height: calc(var(--winW) * 1265);
  }

  .equipment__deco--brash01 {
    top: calc(var(--winW) * -580);
    width: 100%;
  }

  .equipment__deco--brash02 {
    display: none;
  }

  .equipment__title {
    top: calc(var(--winW) * 100);
    font-size: calc(var(--winW) * 50);
    letter-spacing: calc(var(--winW) * 12.5);
    line-height: 1;
  }

  .equipment__img {
    top: calc(var(--winW) * 284);
    left: calc(var(--winW) * 200);
    width: calc(var(--winW) * 520);
  }

  .equipment__card--note .equipment__img {
    top: calc(var(--winW) * 289);
    left: calc(var(--winW) * 890);
    width: calc(var(--winW) * 526);
  }

  .equipment__card .section__btn {
    top: calc(var(--winW) * 1010);
    left: calc(var(--winW) * 170);
    width: calc(var(--winW) * 600);
    height: calc(var(--winW) * 79);
  }

  .equipment__card--note .section__btn {
    top: calc(var(--winW) * 1010);
    left: calc(var(--winW) * 840);
  }

  .equipment__list {
    top: calc(var(--winW) * 635);
    left: calc(var(--winW) * 170);
    width: calc(var(--winW) * 600);
    padding-left: calc(var(--winW) * 20);
  }

  .equipment__card--note .equipment__list {
    top: calc(var(--winW) * 700);
    left: calc(var(--winW) * 840);
  }

  .equipment__list li {
    font-size: calc(var(--winW) * 16);
    letter-spacing: calc(var(--winW) * 0.8);
    line-height: 2;
  }

  .equipment__list-small {
    font-size: calc(var(--winW) * 14);
  }

  .equipment__more {
    top: calc(var(--winW) * 850);
    left: calc(var(--winW) * 170);
    width: calc(var(--winW) * 600);
    height: calc(var(--winW) * 48);
  }

  .equipment__card--note .equipment__more {
    top: calc(var(--winW) * 850);
    left: calc(var(--winW) * 840);
  }

  .equipment__more-label {
    left: calc(var(--winW) * 30);
    top: calc(var(--winW) * 6);
    font-size: calc(var(--winW) * 16);
    letter-spacing: calc(var(--winW) * 3.2);
  }

  .equipment__more-view {
    right: calc(var(--winW) * 72);
    top: calc(var(--winW) * 8);
    font-size: calc(var(--winW) * 12);
    letter-spacing: calc(var(--winW) * 2.4);
  }

  .equipment__more-plus {
    right: calc(var(--winW) * 30);
    font-size: calc(var(--winW) * 30);
  }

  .equipment__price {
    top: calc(var(--winW) * 928);
    left: calc(var(--winW) * 232);
    width: calc(var(--winW) * 520);
  }

  .equipment__card--note .equipment__price {
    top: calc(var(--winW) * 928);
    left: calc(var(--winW) * 902);
  }

  .equipment__price-label {
    font-size: calc(var(--winW) * 16);
    letter-spacing: calc(var(--winW) * 1.6);
    top: calc(var(--winW) * 16);
    line-height: 1;
  }

  .equipment__price-note {
    top: calc(var(--winW) * 28);
    font-size: calc(var(--winW) * 12);
    letter-spacing: calc(var(--winW) * 1.2);
  }

  .equipment__price-num {
    left: calc(var(--winW) * 218);
    font-size: calc(var(--winW) * 46);
    letter-spacing: calc(var(--winW) * 2.3);
  }

  .equipment__price-unit {
    margin-left: calc(var(--winW) * 3);
    margin-top: calc(var(--winW) * 2);
  }

  .equipment__price-kome {
    font-size: calc(var(--winW) * 14);
    letter-spacing: calc(var(--winW) * 0.7);
  }

  .equipment__price-yen {
    font-size: calc(var(--winW) * 18);
    letter-spacing: calc(var(--winW) * 1.8);
    margin-top: calc(var(--winW) * 3);
  }
  .equipment__cards__annotation {
    width: calc(var(--winW) * 1270);
    bottom: calc(var(--winW) * 100);
    left: calc(var(--winW) * 170);
    font-size: calc(var(--winW) * 12);
  }
}

/* ========================================
   WEB CATALOG (SP:H600 / PC:H340)
   ======================================== */
.catalog {
  position: relative;
  background: var(--color-bg-gray);
  height: calc(var(--winW) * 600);
}

.catalog__deco--line {
  top: calc(var(--winW) * -247);
  left: 0;
  width: 100%;
  z-index: 0;
}

/* 書き出し装飾が不透過のため、#eee帯を装飾の上に重ねる(Figmaのレイヤー順を再現) */
.catalog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg-gray);
  z-index: 1;
  pointer-events: none;
}

.catalog__banner {
  position: absolute;
  z-index: 2;
  display: block;
  left: calc(var(--winW) * 20);
  width: calc(var(--winW) * 335);
  transition: opacity 0.3s ease;
}
.catalog__banner:hover {
  opacity: 0.8;
}
.catalog__banner--aura {
  top: calc(var(--winW) * 40);
}

.catalog__banner--note {
  top: calc(var(--winW) * 308);
}

.catalog__banner-img {
  width: 100%;
}

.catalog__banner-info {
  position: relative;
  width: 100%;
  height: calc(var(--winW) * 80);
  background: #fff;
}

.catalog__banner-name {
  position: absolute;
  top: calc(var(--winW) * 28);
  left: calc(var(--winW) * 30);
  font-size: calc(var(--winW) * 24);
  letter-spacing: calc(var(--winW) * 10.8);
  line-height: 1;
}

.catalog__banner-link {
  position: absolute;
  top: calc(var(--winW) * 32);
  right: calc(var(--winW) * 14);
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(var(--winW) * 1.1);
  line-height: 1;
  padding-right: calc(var(--winW) * 20);
}

/* 矢印(>)。正方形で作る */
.catalog__banner-arrow {
  position: absolute;
  right: calc(var(--winW) * 4);
  top: 50%;
  width: calc(var(--winW) * 8);
  height: calc(var(--winW) * 8);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: translateY(-50%) rotate(45deg);
}

@media only screen and (min-width: 769px) {
  .catalog {
    height: calc(var(--winW) * 340);
  }

  .catalog__deco--line {
    top: calc(var(--winW) * -475);
  }

  .catalog__banner {
    display: flex;
    width: calc(var(--winW) * 640);
    top: calc(var(--winW) * 80);
  }

  .catalog__banner--aura {
    left: calc(var(--winW) * 150);
  }

  .catalog__banner--note {
    top: calc(var(--winW) * 80);
    left: calc(var(--winW) * 830);
  }

  .catalog__banner-img {
    width: calc(var(--winW) * 360);
    flex: none;
  }

  .catalog__banner-info {
    width: calc(var(--winW) * 280);
    height: calc(var(--winW) * 180);
    flex: none;
  }

  .catalog__banner-name {
    top: calc(var(--winW) * 60);
    left: calc(var(--winW) * 64);
    font-size: calc(var(--winW) * 30);
    letter-spacing: calc(var(--winW) * 13.5);
  }

  .catalog__banner-link {
    top: calc(var(--winW) * 125);
    right: auto;
    left: calc(var(--winW) * 64);
    font-size: calc(var(--winW) * 14);
    letter-spacing: calc(var(--winW) * 1.4);
    padding-right: calc(var(--winW) * 26);
  }

  .catalog__banner-arrow {
    width: calc(var(--winW) * 10);
    height: calc(var(--winW) * 10);
  }
}

/* ========================================
   BANNER (SP:H775 / PC:H505)
   ======================================== */
.banner {
  /* カタログの装飾はみ出しを覆うため前面に(Figmaでは白bgが装飾の上) */
  position: relative;
  z-index: 2;
  background: #fff;
  padding-top: calc(var(--winW) * 60);
  padding-bottom: calc(var(--winW) * 60);
}

.banner__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--winW) * 20);
  width: calc(var(--winW) * 335);
  margin: 0 auto;
}

.banner__item {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}
.banner__item:hover {
  opacity: 0.7;
}
@media only screen and (min-width: 769px) {
  .banner {
    padding-top: calc(var(--winW) * 101);
    padding-bottom: calc(var(--winW) * 90);
  }

  .banner__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--winW) * 20);
    width: calc(var(--winW) * 1500);
  }

  .banner__item {
    width: calc(var(--winW) * 359);
  }
}

/* ========================================
   追従 車種タブ
   ======================================== */
.fixed-tab {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

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

.fixed-tab.is-hidden-by-tab {
  opacity: 0;
  visibility: hidden;
}

.fixed-tab__btn {
  position: relative;
  width: calc(var(--winW) * 180);
  height: calc(var(--winW) * 44);
  border: none;
  background: rgba(51, 51, 51, 0.6);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  color: #ccc;
  cursor: pointer;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}
.fixed-tab__btn:not(.is-active):hover {
  background: rgba(51, 51, 51, 0.9);
}
.fixed-tab__btn.is-active {
  background: var(--color-red);
  color: #fff;
}

.fixed-tab__btn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--winW) * 3);
  background: #000;
}

.fixed-tab__name {
  font-family: ShinGoPro-Light, sans-serif !important;
  font-size: calc(var(--winW) * 13);
  letter-spacing: calc(var(--winW) * 4.55);
  line-height: 1;
}

.fixed-tab__sub {
  font-family: ShinGoPro-Light, sans-serif !important;
  font-size: calc(var(--winW) * 10);
  letter-spacing: calc(var(--winW) * 2);
  line-height: 1;
  margin-left: calc(var(--winW) * 4);
}

@media only screen and (min-width: 769px) {
  .fixed-tab__btn {
    width: calc(var(--winW) * 360);
    height: calc(var(--winW) * 75);
  }

  .fixed-tab__btn.is-active::before {
    height: calc(var(--winW) * 4);
  }

  .fixed-tab__name {
    font-size: calc(var(--winW) * 26);
    letter-spacing: calc(var(--winW) * 10.4);
  }

  .fixed-tab__sub {
    font-size: calc(var(--winW) * 14);
    letter-spacing: calc(var(--winW) * 2.8);
    margin-left: calc(var(--winW) * 8);
  }
}

/* ========================================
   追従CV（右端）
   ======================================== */
.fixed-cv {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--winW) * 2);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

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

/* WEB CATALOGセクションが画面中央付近に来ている間は隠す(index.js catalogObserver参照) */
.fixed-cv.is-hidden-by-catalog {
  opacity: 0;
  visibility: hidden;
}

.fixed-cv__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--winW) * 10);
  width: calc(var(--winW) * 30);
  padding: calc(var(--winW) * 18) 0;
  background: var(--color-red);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  filter: drop-shadow(0 0 7.5px rgba(0, 0, 0, 0.07));
  transition: opacity 0.3s ease;
}
.fixed-cv__link:hover {
  opacity: 0.8;
}
.fixed-cv__icon {
  display: block;
  width: calc(var(--winW) * 18);
  height: calc(var(--winW) * 18);
}

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

/* 縦書きは1文字1行(Figma準拠)。writing-modeだと縦組みメトリクスで間延びするため使わない */
.fixed-cv__label {
  color: #fff;
  font-size: calc(var(--winW) * 10);
  letter-spacing: 0;
  line-height: 1.13;
  text-align: center;
}

@media only screen and (min-width: 769px) {
  .fixed-cv {
    gap: calc(var(--winW) * 4);
  }

  .fixed-cv__link {
    width: calc(var(--winW) * 50);
    padding: calc(var(--winW) * 24) 0;
    gap: calc(var(--winW) * 14);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  }

  .fixed-cv__icon {
    width: calc(var(--winW) * 20);
    height: calc(var(--winW) * 20);
  }

  .fixed-cv__label {
    font-size: calc(var(--winW) * 13);
    letter-spacing: 0;
    line-height: 1.2;
  }
}

/* ========================================
   主要標準装備モーダル
   ======================================== */
.modal-equip {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-equip.is-open {
  display: block;
}

/* JSで開閉時にopacityを操作してフェードさせる(index.js openModal/closeModal参照) */
.modal-equip.is-visible {
  opacity: 1;
}

.modal-equip__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.modal-equip__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--winW) * 335);
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: calc(var(--winW) * 6);
  padding: calc(var(--winW) * 40) calc(var(--winW) * 24) calc(var(--winW) * 30);
}

.modal-equip__close {
  position: absolute;
  top: calc(var(--winW) * 12);
  right: calc(var(--winW) * 12);
  width: calc(var(--winW) * 24);
  height: calc(var(--winW) * 24);
  border: none;
  background: transparent;
  cursor: pointer;
}

.modal-equip__list {
  padding-left: calc(var(--winW) * 16);
}

.modal-equip__list li {
  list-style-type: disc;
  font-size: calc(var(--winW) * 11);
  letter-spacing: calc(var(--winW) * 0.55);
  line-height: 1.8;
  color: #888888;
  margin-bottom: calc(var(--winW) * 4);
}

@media only screen and (min-width: 769px) {
  .modal-equip__content {
    width: calc(var(--winW) * 1050);
    max-height: 90vh;
    border-radius: calc(var(--winW) * 10);
    padding: calc(var(--winW) * 30) calc(var(--winW) * 55) calc(var(--winW) * 30);
    overflow-y: unset;
  }

  .modal-equip__close {
    top: calc(var(--winW) * 20);
    right: calc(var(--winW) * 20);
    width: calc(var(--winW) * 28);
    height: calc(var(--winW) * 28);
  }

  .modal-equip__list {
    padding-left: calc(var(--winW) * 20);
  }

  .modal-equip__list li {
    font-size: calc(var(--winW) * 13);
    letter-spacing: calc(var(--winW) * 0.65);
    line-height: 2;
    margin-bottom: calc(var(--winW) * 4);
  }
}