@charset "UTF-8";
/* =========================================================
   Tier LP (SP only)
   デザインカンプ: 横幅780px（@2x）→ 実寸390px
   1rem = 10px @390px（375〜430pxで比例伸縮、430px以上は固定）
   ========================================================= */

:root {
  --gold-light: #f6e3ae;
  --gold: #d6b46a;
  --gold-dark: #9c7634;
  --wine: #4a0d1c;
  --black: #000;
  --white: #fff;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cinzel", "Times New Roman", serif;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: calc(min(100vw, 430px) / 39);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.lp {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  overflow-x: clip;
  background: var(--black);
}

/* =========================================================
   共通: CTAボタン
   ========================================================= */
.cta {
  --cut: 1.1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5.25rem;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  /* 外枠（ゴールドのフチ） */
  background: linear-gradient(180deg, #fffbe8 0%, #f1dda6 28%, #c49f5a 62%, #f7e8b8 100%);
  color: #241808;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}

/* 内側の面 */
.cta::before {
  --in: 0.15rem;
  --cut-in: calc(var(--cut) - var(--in) * 0.4);
  content: "";
  position: absolute;
  inset: var(--in);
  clip-path: polygon(var(--cut-in) 0, calc(100% - var(--cut-in)) 0, 100% var(--cut-in), 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, var(--cut-in) 100%, 0 calc(100% - var(--cut-in)), 0 var(--cut-in));
  background:
    /* 右上の陰り */
    radial-gradient(ellipse 26% 80% at 97% 30%, rgba(60, 44, 22, 0.55) 0%, rgba(60, 44, 22, 0) 100%),
    /* 上半分は明るく、下半分は金色寄り */
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 50%, rgba(150, 105, 30, 0.14) 100%),
    /* 左寄り・右寄りの2本の白い光沢 */
    linear-gradient(90deg, #a07d3e 0%, #c9a45c 10%, #ead39a 20%, #f8efcf 26%, #e6cd93 34%, #c09a58 45%, #d2b77f 54%, #f3e8c6 63%, #e8d8ac 70%, #b89c6c 79%, #8a7048 89%, #735c3c 100%);
}

/* 光沢が流れる演出 */
.cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 230, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: cta-shine 4.8s var(--ease-out) 1.6s infinite;
  pointer-events: none;
}

@keyframes cta-shine {
  0% { left: -40%; }
  40%, 100% { left: 120%; }
}

.cta__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* 右矢印 */
.cta__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 2.3rem;
  width: 0.75rem;
  height: 0.75rem;
  border-top: 0.12rem solid #fffaf0;
  border-right: 0.12rem solid #fffaf0;
  filter: drop-shadow(0 0 0.15rem rgba(80, 55, 20, 0.6));
  transform: translateY(-50%) rotate(45deg);
}

.cta:active {
  transform: scale(0.97);
  filter: brightness(1.08);
}

/* ホバー: 少し浮き上がり、明るさと縁の光が強まり、光沢が一度流れ、矢印が右へ動く */
@media (hover: hover) {
  .cta-glow {
    transition: filter 0.35s var(--ease-out);
  }

  .cta-glow::before,
  .cta-glow::after {
    transition: transform 0.35s var(--ease-out);
  }

  .cta {
    transition: transform 0.35s var(--ease-out), filter 0.35s var(--ease-out);
  }

  .cta__arrow {
    transition: translate 0.35s var(--ease-out);
  }

  .cta-glow:hover {
    filter: drop-shadow(0 0.4rem 1rem rgba(255, 186, 90, 0.45));
  }

  .cta-glow:hover::before,
  .cta-glow:hover::after {
    transform: scaleX(1.12);
  }

  .cta:hover {
    transform: translateY(-0.2rem);
    filter: brightness(1.1);
  }

  .cta:hover::after {
    animation: cta-shine-hover 0.8s var(--ease-out);
  }

  .cta:hover .cta__arrow {
    translate: 0.4rem 0;
  }

  .cta:hover:active {
    transform: translateY(0) scale(0.97);
  }

  .fixed-cta__link {
    transition: filter 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  }

  .fixed-cta__link:hover {
    filter: brightness(1.18);
    transform: translateY(-0.1rem);
  }

  .footer__nav a {
    transition: color 0.25s var(--ease-out);
  }

  .footer__nav a:hover {
    color: #e3c07c;
  }
}

@keyframes cta-shine-hover {
  0% { left: -40%; }
  100% { left: 120%; }
}

.cta-note {
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 左上・右下の縁に灯る光 */
.cta-glow {
  position: relative;
  filter: drop-shadow(0 0 0.7rem rgba(255, 186, 90, 0.55));
}

.cta-glow::before,
.cta-glow::after {
  content: "";
  position: absolute;
  z-index: 2;
  height: 1.8rem;
  background:
    /* 縁をなぞる光の線 */
    linear-gradient(90deg, rgba(255, 214, 120, 0) 0%, rgba(255, 236, 170, 1) 15%, rgba(255, 246, 205, 1) var(--spot), rgba(255, 236, 170, 1) 85%, rgba(255, 214, 120, 0) 100%) center / 100% 0.3rem no-repeat,
    /* 縁に沿って帯状ににじむ金色の光 */
    radial-gradient(closest-side ellipse at var(--spot) 50%, rgba(255, 216, 120, 1) 0%, rgba(255, 184, 70, 0.65) 40%, rgba(255, 150, 40, 0) 100%);
  /* 光の帯の両端を背景へ自然に溶け込ませる */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cta-edge-light 3.6s ease-in-out infinite alternate;
}

/* 左上: 上辺の左〜中央 */
.cta-glow::before {
  --spot: 40%;
  top: -0.9rem;
  left: 0.6rem;
  width: 56%;
}

/* 右下: 下辺の中央寄り〜右 */
.cta-glow::after {
  --spot: 60%;
  bottom: -0.9rem;
  right: 0.6rem;
  width: 42%;
  animation-delay: -1.8s;
}

@keyframes cta-edge-light {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* =========================================================
   1. FV
   ========================================================= */
.fv {
  position: relative;
  aspect-ratio: 780 / 1228;
  overflow: hidden;
}

.fv__bg {
  /* 素材は787px幅（カンプ780px）。等倍配置し右端7pxと上端の明るい1行をトリミング */
  position: absolute;
  top: -0.1rem;
  left: 0;
  width: calc(100% * 787 / 780);
  max-width: none;
  height: auto;
  /* カンプの締まったコントラストに合わせる */
  filter: contrast(1.14) saturate(1.14) brightness(1.03);
}

/* 左側のコピー可読性と下部の締まり（カンプのトーンに合わせた暗幕） */
.fv::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.35) 88%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
  pointer-events: none;
}

.fv__inner,
.fv__cta {
  z-index: 2;
}

.fv__inner {
  position: absolute;
  inset: 0;
}

.fv__inner > * {
  position: absolute;
}

/* --- メインコピー（画像） --- */
.fv__title {
  top: 5.2rem;
  left: 1.9rem;
  width: 21.2rem;
}

.fv__title img {
  width: 100%;
}

/* 「ワンランク上の」下のゴールドライン + きらめき */
.fv__title::before,
.fv__title::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.fv__title::before {
  top: 3.15rem;
  left: -0.1rem;
  width: 17.5rem;
  height: 0.1rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 245, 210, 0.7) 50%, rgba(255, 255, 255, 0) 100%) no-repeat -40% 0 / 40% 100%,
    linear-gradient(90deg, rgba(214, 170, 90, 0) 0%, rgba(240, 192, 100, 0.8) 45%, rgba(214, 170, 90, 0.4) 75%, rgba(214, 170, 90, 0) 100%);
  box-shadow: 0 0 0.5rem rgba(255, 170, 70, 0.5);
  animation: gold-line-flow 5s ease-in-out 1.2s infinite;
}

.fv__title::after {
  top: 1.35rem;
  left: 6.25rem;
  width: 7rem;
  height: 3.6rem;
  background:
    radial-gradient(circle at center, rgba(255, 255, 248, 1) 0%, rgba(255, 236, 170, 1) 5%, rgba(255, 190, 80, 0.7) 12%, rgba(255, 150, 40, 0.25) 26%, rgba(255, 140, 30, 0) 40%),
    linear-gradient(90deg, rgba(255, 180, 80, 0) 0%, rgba(255, 210, 130, 0.6) 30%, rgba(255, 248, 220, 1) 50%, rgba(255, 210, 130, 0.6) 70%, rgba(255, 180, 80, 0) 100%) center / 100% 0.16rem no-repeat,
    linear-gradient(180deg, rgba(255, 220, 150, 0) 20%, rgba(255, 244, 210, 0.85) 50%, rgba(255, 220, 150, 0) 80%) center / 0.12rem 100% no-repeat;
  mix-blend-mode: screen;
  animation: sparkle-twinkle 3.2s ease-in-out 1.6s infinite;
}

@keyframes sparkle-twinkle {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.15); }
}

@keyframes gold-line-flow {
  0% { background-position: -40% 0, 0 0; }
  60%, 100% { background-position: 140% 0, 0 0; }
}

/* --- サブコピー --- */
.fv__lead {
  top: 14.3rem;
  left: 2.1rem;
  font-size: 2.05rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.7);
}

.fv__ornament {
  top: 22.1rem;
  left: 2.2rem;
  width: 16.05rem;
}

.fv__text {
  top: 23.9rem;
  left: 2.2rem;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.87;
  letter-spacing: 0.02em;
  text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.8);
}

/* --- 大人のための マッチングサービス --- */
.fv__service {
  top: 34.75rem;
  left: 0;
  width: 18.6rem;
}

.fv__label {
  width: 15.6rem;
  margin-left: 2rem;
}

.fv__service-name {
  position: relative;
  margin-top: 0.15rem;
  padding: 0 0 0.6rem 2rem;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.fv__service-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.1rem;
  background: linear-gradient(90deg, rgba(160, 120, 60, 0.2) 0%, rgba(214, 172, 98, 0.75) 45%, rgba(214, 172, 98, 0.5) 80%, rgba(160, 120, 60, 0) 100%);
}

.fv__legal {
  margin-top: 0.3rem;
  padding-left: 2.1rem;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fv__logo {
  top: 43.8rem;
  left: 7rem;
  width: 6.2rem;
}

/* --- CTA --- */
.fv__cta {
  position: absolute;
  top: 51.4rem;
  left: 2.5rem;
  right: 2.5rem;
}

.fv__cta .cta-note {
  margin-top: 2.15rem;
}

/* =========================================================
   共通: セクション見出し
   ========================================================= */
.sec-head {
  --line-top: 4.2rem;
  position: relative;
  text-align: center;
}

.en-title {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff7de 0%, #f4dca2 38%, #d4a85c 68%, #f2dba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 見出し下のゴールドの光 + 横に流れる光 */
.sec-head::before,
.sec-head::after {
  content: "";
  position: absolute;
  top: calc(var(--line-top) - 1.1rem);
  left: 50%;
  pointer-events: none;
}

.sec-head::before {
  width: 26rem;
  height: 2.4rem;
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 50% at center, rgba(255, 206, 120, 0.55) 0%, rgba(230, 160, 60, 0.22) 45%, rgba(230, 160, 60, 0) 100%);
}

.sec-head::after {
  top: var(--line-top);
  width: 22rem;
  height: 0.12rem;
  translate: -50% 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 248, 225, 0.95) 50%, rgba(255, 255, 255, 0) 100%) no-repeat -40% 0 / 35% 100%,
    linear-gradient(90deg, rgba(240, 190, 100, 0) 0%, rgba(240, 190, 100, 0.55) 50%, rgba(240, 190, 100, 0) 100%);
  animation: gold-line-flow 5.5s ease-in-out infinite;
}

.sec-head__sub {
  margin-top: 0.4rem;
  color: #e3c07c;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.sec-head__lead {
  margin-top: 1.6rem;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.sec-cta {
  margin: 0 2.5rem;
}

.sec-cta .cta-note {
  margin-top: 1.6rem;
}

/* CTAサイズ違い */
.cta--sm {
  --cut: 0.7rem;
  height: 3rem;
}

.cta--sm .cta__label {
  font-size: 1.55rem;
}

.cta--sm .cta__arrow {
  right: 1.3rem;
  width: 0.6rem;
  height: 0.6rem;
}

/* スライダーのドット */
.dots {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
}

.dots span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #fff;
  transition: background-color 0.3s var(--ease-out);
}

.dots span.is-active {
  background: #d8af64;
}

/* 横スクロール共通 */
[data-slider-track] {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

[data-slider-track]::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   2. サービス紹介・会員イメージ / 3. 会員属性
   ========================================================= */
.intro-wrap {
  background: #000 url("../assets/images/bg_intro.png") center top / 100% auto no-repeat;
}

.intro {
  position: relative;
  height: 100.4rem;
}

.intro__title {
  position: absolute;
  top: 3.4rem;
  left: 0;
  right: 0;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.78;
  letter-spacing: 0.06em;
  text-align: center;
}

.intro__visual {
  position: absolute;
  inset: 0 0 auto;
  height: 55rem;
}

.intro__visual > img {
  position: absolute;
}

.intro__phone--female {
  z-index: 2;
  top: 16.3rem;
  left: 1.75rem;
  width: 20.5rem;
}

.intro__phone--male {
  z-index: 1;
  top: 20.3rem;
  left: 19.3rem;
  width: 17.35rem;
}

.intro__medal {
  z-index: 3;
  top: 11rem;
  left: 25.1rem;
  width: 13.1rem;
}

.members {
  position: absolute;
  top: 55.3rem;
  left: 2rem;
  right: 1.9rem;
}

.members__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.members__head::after {
  content: "";
  flex: 1;
  height: 0.1rem;
  background: rgba(255, 255, 255, 0.55);
}

.members__title {
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.members__note {
  position: absolute;
  top: -1.2rem;
  right: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;
}

.members__grid {
  display: grid;
  grid-template-columns: repeat(4, 7.8rem);
  gap: 1.4rem 1.35rem;
  margin-top: 2.6rem;
}

.members__grid img {
  width: 100%;
  border-radius: 0.4rem;
}

.intro__text {
  position: absolute;
  top: 81.4rem;
  left: 0;
  right: 0;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.8);
}

.stats {
  padding: 1.2rem 0 8rem;
}

.stats__block + .stats__block {
  margin-top: 2.9rem;
}

.stats__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: 2rem;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
}

.stats__title img {
  width: 1.45rem;
}

.stats__img {
  margin: 1.3rem 0 0 2rem;
}

.stats__img--male {
  width: 34.95rem;
}

.stats__img--female {
  width: 37.05rem;
}

/* =========================================================
   4. FEATURE
   ========================================================= */
.feature {
  position: relative;
  padding: 6.2rem 0 4.2rem;
  background: #3a0d1d url("../assets/images/bg_feature.jpg") center top / 100% auto no-repeat;
  /* clip: はみ出した光やスライド中の写真でセクションが横にずれないように */
  overflow: hidden;
  overflow: clip;
}

.feature .en-title {
  font-size: 3.4rem;
}

.feature .sec-head {
  --line-top: 3.55rem;
}

.feature .sec-head__sub {
  margin-top: 0.4rem;
}

.feature__catch {
  margin-top: 0rem;
  color: #f6ecdd;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-align: center;
}

.feature__bar {
  display: block;
  width: 0.1rem;
  height: 3.9rem;
  margin: 1.1rem auto 0;
  background: rgba(255, 255, 255, 0.85);
}

.feature__lead {
  margin-top: 1.2rem;
  font-size: 1.33rem;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
}

.feature__list {
  margin-top: 2rem;
}

.feature-item {
  position: relative;
  padding-bottom: 3.7rem;
  margin-bottom: 4rem;
}

.feature-item::after {
  content: "";
  position: absolute;
  left: 2.25rem;
  right: 2.25rem;
  bottom: 0;
  height: 0.1rem;
  background: linear-gradient(90deg, rgba(200, 160, 90, 0.3) 0%, #c9a25c 20%, #e0bd76 50%, #c9a25c 80%, rgba(200, 160, 90, 0.3) 100%);
}

.feature-item:last-child {
  margin-bottom: 3rem;
  padding-bottom: 0;
}

.feature-item:last-child::after {
  content: none;
}

.feature-item__photo {
  position: relative;
  margin: 0 2.25rem;
}

.feature-item__photo img {
  width: 100%;
}

.feature-item__num {
  position: absolute;
  bottom: -2.4rem;
  font-family: var(--font-serif);
  font-size: 5.6rem;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(180deg, #fff3cf 0%, #f0d08c 45%, #c99a4e 75%, #ecd29a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 0.8rem rgba(255, 170, 70, 0.55));
}

.feature-item__num {
  z-index: 2;
}

/* 数字の背後に灯るオレンジの光（写真の下側に広がる横長のフレア） */
.feature-item__photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -5.4rem;
  width: 19rem;
  height: 8.6rem;
  background:
    /* 横に伸びる光の筋 */
    linear-gradient(90deg, rgba(255, 190, 90, 0) 8%, rgba(255, 214, 140, 0.85) 50%, rgba(255, 190, 90, 0) 92%) center / 100% 0.12rem no-repeat,
    /* 中心の明るい芯 */
    radial-gradient(ellipse 16% 20% at center, rgba(255, 236, 170, 1) 0%, rgba(255, 186, 80, 0.7) 45%, rgba(255, 150, 40, 0) 100%),
    /* 周囲のオレンジのにじみ */
    radial-gradient(ellipse 50% 50% at center, rgba(255, 140, 36, 1) 0%, rgba(240, 110, 28, 0.85) 25%, rgba(200, 76, 20, 0.5) 52%, rgba(150, 50, 16, 0.18) 78%, rgba(110, 30, 14, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: num-glow 4s ease-in-out infinite alternate;
}

/* 光は写真の背面、数字は前面 */
.feature-item__photo img {
  position: relative;
  z-index: 1;
}

.feature-item--r .feature-item__photo::after {
  right: -4.9rem;
}

.feature-item--l .feature-item__photo::after {
  left: -4.9rem;
}

@keyframes num-glow {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}

.feature-item--r .feature-item__num {
  right: 1.6rem;
}

.feature-item--l .feature-item__num {
  left: 1.6rem;
}

.feature-item__body {
  margin-top: 2.6rem;
  padding: 0 2.25rem 0 2.2rem;
}

.feature-item--01 .feature-item__body {
  padding-left: 6.9rem;
}

.feature-item--03 .feature-item__body {
  padding-left: 4.9rem;
}

.feature-item--05 .feature-item__title {
  padding-left: 1rem;
}

.feature-item__title {
  color: #e9c27f;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.feature-item__text {
  margin-top: 0.8rem;
  font-size: 1.21rem;
  font-weight: 600;
  line-height: 1.8;
  white-space: nowrap;
}

/* =========================================================
   5. USER'S VOICE
   ========================================================= */
.voice {
  padding-top: 5.2rem;
  background: #252124;
}

.voice .sec-head {
  --line-top: 3.75rem;
}

.voice .sec-head__sub {
  margin-top: 0.2rem;
}

.voice__slider {
  margin-top: 2.2rem;
}

.voice__track {
  gap: 1.6rem;
  padding: 0 calc(50% - 8.4rem);
}

.voice__col {
  display: grid;
  flex: 0 0 16.8rem;
  gap: 1.35rem;
  scroll-snap-align: center;
}

.voice__col img {
  width: 100%;
}

.voice .dots {
  margin-top: 2.9rem;
}

/* マッチングなしでメッセージ */
.special {
  position: relative;
  margin-top: 6.9rem;
  height: 21.4rem;
}

.special__bg {
  position: absolute;
  inset: 0;
  width: 100%;
}

.special__inner {
  position: relative;
  padding-top: 2.8rem;
}

.special__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.95rem;
  margin-left: 7.1rem;
  padding: 0 1rem 0 0.9rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.85);
  border-radius: 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.special__label::before {
  content: "";
  width: 1.2rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M3 2h18a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 21 16H9l-5 4v-4H3a1.5 1.5 0 0 1-1.5-1.5v-11A1.5 1.5 0 0 1 3 2z'/%3E%3Cpath d='M7 7.5h10M7 11h7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.special__title {
  margin: 1.2rem 0 0 2.2rem;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.1em;
  text-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.7);
}

.special__text {
  margin: 0.9rem 0 0 2.2rem;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: 0.02em;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.8);
}

.special__cta {
  position: absolute;
  top: 15.4rem;
  right: 0.6rem;
  width: 18.7rem;
}

.special__cta .cta-note {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  white-space: nowrap;
  text-align: right;
}

/* =========================================================
   6. Tier独自の6つの機能
   ========================================================= */
.func {
  position: relative;
  overflow: hidden;
  overflow: clip;
  height: 83.3rem;
  padding: 4.2rem 0 0 2.4rem;
  background: #000 url("../assets/images/bg_function.png") center top / 100% auto no-repeat;
}

.func__title {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.func__title em {
  font-size: 3.7rem;
  font-style: normal;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff1c8 0%, #ecc983 50%, #c9984f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.func__lead {
  margin-top: 1rem;
  color: #e8e2da;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.func__list {
  position: absolute;
  top: 20.2rem;
  left: -0.1rem;
  display: grid;
  grid-template-columns: repeat(2, 19.6rem);
  grid-auto-rows: 18.2rem;
}

.func-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 19.2rem;
  height: 19.35rem;
  text-align: center;
  background: url("../assets/images/function06_distance.png") center / contain no-repeat;
}

/* 円環素材に焼き込まれた文字を覆う */
.func-item::before {
  content: "";
  position: absolute;
  top: 50.5%;
  left: 50%;
  width: 13.4rem;
  height: 13.4rem;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0%, #000 92%, rgba(0, 0, 0, 0) 100%);
  translate: -50% -50%;
}

.func-item h3,
.func-item p {
  position: relative;
}

.func-item h3 {
  color: #e6bb6a;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.func-item p {
  margin-top: 0.7rem;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

/* =========================================================
   7. HOW TO USE
   ========================================================= */
.howto {
  position: relative;
  height: 233.5rem;
  padding-top: 5.2rem;
  background: #120b06 url("../assets/images/bg_howto.png") center top / 100% auto no-repeat;
}

.howto .sec-head {
  --line-top: 3.75rem;
}

.howto .sec-head__sub {
  margin-top: 0.2rem;
}

.howto .sec-head__lead {
  margin-top: 1.2rem;
}

.step__banner,
.step__mock,
.step__photo,
.step__text,
.howto .sec-cta {
  position: absolute;
}

.step__banner img {
  width: 100%;
  /* 仮対応: JPG素材の白背景をクリップ */
  clip-path: var(--clip);
}

/* 帯の縁のオレンジの光（素材では白背景に乗っていたためCSSで再現） */
.step__banner::before,
.step__banner::after {
  content: "";
  position: absolute;
  height: 0.2rem;
  border-radius: 0.1rem;
  background: linear-gradient(90deg, rgba(255, 150, 40, 0) 0%, rgba(255, 168, 60, 0.95) 35%, rgba(255, 238, 190, 1) 65%, rgba(255, 150, 40, 0) 100%);
  box-shadow: 0 0 0.6rem rgba(255, 150, 40, 0.8);
  pointer-events: none;
}

.step__banner::before {
  top: var(--glow-top, 14%);
  left: var(--glow-l, 0);
  width: var(--glow-lw, 35%);
}

.step__banner::after {
  bottom: var(--glow-bottom, 14%);
  right: var(--glow-r, 0);
  width: var(--glow-rw, 40%);
  transform: scaleX(-1);
}

.step__text {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.66;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* 仮対応: JPG素材の白背景をクリップ */
.step--01 .step__banner {
  --glow-top: 7%;
  --glow-bottom: 7.5%;
  --glow-l: 4%;
  --glow-lw: 40%;
  --glow-r: 6%;
  --glow-rw: 45%;
  top: 19.8rem;
  left: 2.85rem;
  width: 33.6rem;
  --clip: polygon(9.8% 8.5%, 93.5% 8.5%, 89.3% 91.5%, 5.6% 91.5%);
}

.step--01 .step__text {
  top: 27.6rem;
  left: 4.8rem;
  font-size: 1.25rem;
  line-height: 1.73;
  letter-spacing: 0.25em;
}

.step--01 .step__mock {
  top: 34.8rem;
  left: 7.5rem;
  width: 24.2rem;
  clip-path: inset(0.7% 2.3% 0.7% 2.1% round 3rem);
}

.step--02 .step__banner {
  --glow-top: 14.5%;
  --glow-bottom: 14%;
  --glow-lw: 30%;
  --glow-r: 2%;
  --glow-rw: 55%;
  top: 88.6rem;
  left: 0;
  width: 39rem;
  --clip: polygon(0 15.9%, 60.9% 15.9%, 57.9% 84.9%, 0 84.9%);
}

.step--02 .step__text {
  top: 97.6rem;
  left: 2.3rem;
}

.step--02 .step__mock {
  top: 88.7rem;
  left: 22rem;
  width: 15.35rem;
  clip-path: inset(0.8% 2% 0.8% 2% round 2rem);
}

.step--03 .step__banner {
  --glow-top: 13%;
  --glow-bottom: 15%;
  --glow-l: 42%;
  --glow-lw: 40%;
  --glow-rw: 30%;
  top: 126.4rem;
  right: 0;
  width: 38.6rem;
  --clip: polygon(42.1% 14.3%, 100% 14.3%, 100% 84.1%, 39.1% 84.1%);
}

.step--03 .step__text {
  top: 135.1rem;
  left: 20.4rem;
  line-height: 1.65;
}

.step--03 .step__mock {
  top: 124rem;
  left: 2.3rem;
  width: 15.35rem;
  clip-path: inset(0.8% 2% 0.8% 2% round 2rem);
}

.step--04 .step__banner {
  --glow-top: 13%;
  --glow-bottom: 16%;
  --glow-lw: 35%;
  --glow-rw: 35%;
  top: 159.8rem;
  left: 0;
  width: 39rem;
  --clip: inset(14.1% 0 17.2% 0);
}

.step--04 .step__photo {
  top: 168.3rem;
  left: 2.5rem;
  width: 34.95rem;
}

.step--04 .step__text {
  top: 214rem;
  left: 2.3rem;
  font-size: 1.3rem;
  line-height: 1.85;
  letter-spacing: 0.25em;
}

.howto .sec-cta {
  top: 223rem;
  left: 0;
  right: 0;
}

/* =========================================================
   8. SAFETY & PRIVACY
   ========================================================= */
.safety {
  padding: 4.7rem 0 4.6rem;
  background: #2a2324 url("../assets/images/bg_safety.png") center top / 100% auto no-repeat;
}

.safety .en-title {
  font-size: 3.6rem;
}

.safety .sec-head {
  --line-top: 3.75rem;
}

.safety .sec-head__sub {
  margin-top: 0.3rem;
}

.safety__lead {
  margin-top: 1.9rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.83;
  letter-spacing: 0.02em;
  text-align: center;
}

.safety__grid {
  display: grid;
  grid-template-columns: repeat(2, 15.8rem);
  justify-content: center;
  gap: 1.6rem 1.5rem;
  margin-top: 3.3rem;
}

.safety__grid img {
  width: 100%;
  /* 仮対応: JPG素材の角の白をクリップ */
  border-radius: 0.7rem;
}

/* =========================================================
   9. 料金プラン
   ========================================================= */
.plan {
  padding: 6.6rem 0 3.4rem;
  /* 背景素材がセクションより少し短いため、cover で下端まで覆う */
  background: #1b1915 url("../assets/images/bg_plan.png") center top / cover no-repeat;
}

.plan .en-title {
  font-size: 3.4rem;
}

.plan .sec-head {
  --line-top: 3.55rem;
}

.plan .sec-head__sub {
  margin-top: 0.5rem;
  font-size: 1.25rem;
}

.plan__lead {
  margin-top: 4.4rem;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.82;
  text-align: center;
}

.plan__band {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  margin-top: 3.6rem;
  border-top: 0.1rem solid #c69a52;
  border-bottom: 0.1rem solid #c69a52;
  background: linear-gradient(90deg, #2c0610 0%, #5e1022 50%, #2c0610 100%);
  box-shadow: 0 -0.3rem 0.8rem rgba(255, 178, 80, 0.3), 0 0.3rem 0.8rem rgba(255, 160, 60, 0.35);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.35em;
}

.plan__first {
  position: relative;
  margin: 1.4rem 2.3rem 0;
}

.plan__first-img {
  width: 100%;
  /* 仮対応: JPG素材の角の白をクリップ */
  border-radius: 0.7rem;
}

.plan__slider {
  position: absolute;
  top: 18.2rem;
  left: -2.3rem;
  right: -2.3rem;
}

.plan__track {
  gap: 1.8rem;
  padding: 0 2.3rem 0 4.4rem;
  scroll-padding-left: 4.4rem;
}

.plan__track li {
  flex: 0 0 28.6rem;
  scroll-snap-align: start;
}

.plan__track img {
  width: 100%;
  border-radius: 0.5rem;
}

.plan .dots {
  margin-top: 1.5rem;
}

.plan__economy {
  width: 34.8rem;
  margin: 2rem 0 0 2.3rem;
  border-radius: 0.7rem;
}

.plan__note {
  margin: 1.5rem 2.3rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.7;
}

/* =========================================================
   10. よくある質問
   ========================================================= */
.faq {
  min-height: 55.3rem;
  padding: 6.4rem 2.1rem 4.8rem;
  /* 背景素材がセクションより短くなるため、cover で下端まで覆う */
  background: #120c08 url("../assets/images/bg_faq.png") center top / cover no-repeat;
}

.en-title--faq {
  font-size: 4.2rem;
}

.faq .sec-head__lead {
  margin-top: -0.5rem;
  letter-spacing: 0.1em;
}

.faq__list {
  display: grid;
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.faq-item {
  background: #fff;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
}

.faq-item summary {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.6rem 0.9rem 0.6rem 1.2rem;
  color: #2b2621;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__q,
.faq-item__a-mark {
  flex: 0 0 2.6rem;
  font-family: var(--font-en);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background: linear-gradient(180deg, #f1d79b 0%, #d2a659 60%, #b98a3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faq-item__text {
  flex: 1;
  margin: 0 0.8rem 0 0.9rem;
  padding: 0.3rem 0 0.3rem 1.1rem;
  border-left: 0.1rem solid #dcc69b;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.faq-item__icon {
  position: relative;
  flex: 0 0 2.2rem;
  height: 2.2rem;
  border: 0.1rem solid #c9a35a;
  border-radius: 50%;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 0.1rem;
  background: #c9a35a;
  translate: -50% -50%;
  transition: rotate 0.3s var(--ease-out);
}

.faq-item__icon::after {
  rotate: 90deg;
}

.faq-item[open] .faq-item__icon::after {
  rotate: 0deg;
}

.faq-item__a {
  display: flex;
  margin: 0 1.2rem;
  padding: 1.2rem 0 1.5rem;
  border-top: 0.1rem solid #ece2cc;
  color: #3a332c;
}

.faq-item__a-body {
  flex: 1;
  margin-left: 0.9rem;
  padding-left: 1.2rem;
  font-size: 1.22rem;
  line-height: 1.8;
}

.faq-item__a-body > * + * {
  margin-top: 0.8rem;
}

.faq-item__a-body li {
  padding-left: 1em;
  text-indent: -1em;
}

.faq-item__a-body li::before {
  content: "・";
}

/* =========================================================
   11. 最終CTA・フッター
   ========================================================= */
.closing {
  position: relative;
  height: 44rem;
}

.closing__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.closing__copy {
  position: absolute;
  top: 5.2rem;
  left: 2.3rem;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.72;
  letter-spacing: 0.02em;
  text-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.8);
}

.closing__cta {
  position: absolute;
  top: 31.7rem;
  left: 3rem;
  right: 2.6rem;
}

.closing__cta .cta-note {
  margin-top: 0.6rem;
}

.footer {
  position: relative;
  /* ページ最下部では最終CTAが見えているため追従CTAは非表示。余白は最小限に */
  padding: 1.2rem 1rem calc(1.6rem + env(safe-area-inset-bottom));
  font-size: 0.93rem;
  line-height: 1.72;
  text-align: center;
}

.footer__tagline {
  font-size: 1rem;
  letter-spacing: 0.25em;
}

.footer__nav {
  margin-top: 0.6rem;
}

.footer__nav li + li {
  margin-top: 0.3rem;
}

.footer__nav a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__notes {
  margin-top: 1.8rem;
  letter-spacing: 0.02em;
}

.footer__copy small {
  font-size: inherit;
}

/* =========================================================
   追従CTA（通常のゴールドCTAが画面内にある間は非表示）
   ========================================================= */
.fixed-cta {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 0;
  width: min(100%, 430px);
  padding-bottom: env(safe-area-inset-bottom);
  background: #000;
  transform: translate(-50%, 0);
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out), visibility 0s linear 0s;
}

.fixed-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 100%);
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}

.fixed-cta__link {
  display: block;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s var(--ease-out);
}

.fixed-cta__link img {
  width: 100%;
}

.fixed-cta__link:active {
  filter: brightness(1.15);
}

/* =========================================================
   アニメーション
   ========================================================= */

/* FV: 読み込み時に段階的フェードイン（JS有効時のみ） */
.js [data-fv] {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
}

.js .is-loaded [data-fv] {
  opacity: 1;
  translate: 0 0;
}

.js .is-loaded [data-fv="1"] { transition-delay: 0.1s; }
.js .is-loaded [data-fv="2"] { transition-delay: 0.3s; }
.js .is-loaded [data-fv="3"] { transition-delay: 0.6s; }
.js .is-loaded [data-fv="4"] { transition-delay: 0.85s; }
.js .is-loaded [data-fv="5"] { transition-delay: 1.05s; }
.js .is-loaded [data-fv="6"] { transition-delay: 1.25s; }

/* FVのラインとキラめきもコピーに合わせて表示 */
.js .fv__title::before,
.js .fv__title::after {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) 0.5s;
}

.js .is-loaded .fv__title::before,
.js .is-loaded .fv__title::after {
  opacity: 1;
}

/* スクロール表示（下から上へ） */
.js [data-reveal] {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity 0.8s var(--ease-out), translate 0.8s var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* FEATURE の写真: 01・03・05 は右から左へ、02・04 は左から右へスライド */
.js .feature-item--r .feature-item__photo[data-reveal] {
  translate: 6rem 0;
  transition-duration: 0.9s;
}

.js .feature-item--l .feature-item__photo[data-reveal] {
  translate: -6rem 0;
  transition-duration: 0.9s;
}

.js .feature-item .feature-item__photo[data-reveal].is-visible {
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js [data-fv],
  .js [data-reveal],
  .js .fv__title::before,
  .js .fv__title::after {
    opacity: 1;
    translate: none;
  }
}

/* =========================================================
   PC表示（1024px以上）: 中央にSP版LP、左にブランド、右に固定ナビの3カラム
   ※SP版LPのスタイルには手を加えず、左右の要素と背景のみ追加
   ========================================================= */
.pc-brand,
.pc-nav {
  display: none;
}

@media (min-width: 1024px) {
  html {
    scroll-behavior: smooth;
  }

  body {
    background:
      radial-gradient(ellipse 45% 60% at 12% 55%, rgba(110, 18, 42, 0.5) 0%, rgba(110, 18, 42, 0) 100%),
      radial-gradient(ellipse 40% 55% at 88% 40%, rgba(96, 14, 36, 0.42) 0%, rgba(96, 14, 36, 0) 100%),
      radial-gradient(ellipse 60% 35% at 50% 105%, rgba(214, 168, 88, 0.12) 0%, rgba(214, 168, 88, 0) 100%),
      #070304;
    background-attachment: fixed;
  }

  .lp {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(201, 162, 92, 0.18);
  }

  .lp h2 {
    scroll-margin-top: 60px;
  }

  /* PCでは右ナビにCTAが常に見えているため、画面下の追従CTAは出さない */
  .fixed-cta {
    display: none;
  }

  /* --- 左: ブランドエリア --- */
  .pc-brand {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100vw - 430px) / 2);
    height: 100vh;
    padding: 0 24px;
    text-align: center;
  }

  .pc-brand__logo {
    width: clamp(140px, 14vw, 220px);
    filter: drop-shadow(0 0 24px rgba(214, 168, 88, 0.25));
  }

  .pc-brand__label {
    position: relative;
    margin-top: 32px;
    padding: 14px 0;
    color: #e6c886;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 600;
    letter-spacing: 0.18em;
    white-space: nowrap;
  }

  .pc-brand__label::before,
  .pc-brand__label::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 120%;
    height: 1px;
    translate: -50% 0;
    background: linear-gradient(90deg, rgba(214, 168, 88, 0) 0%, rgba(214, 168, 88, 0.8) 50%, rgba(214, 168, 88, 0) 100%);
  }

  .pc-brand__label::before {
    top: 0;
  }

  .pc-brand__label::after {
    bottom: 0;
  }

  .pc-brand__copy {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(13px, 1vw, 16px);
    letter-spacing: 0.22em;
    white-space: nowrap;
  }

  /* --- 右: 固定ナビゲーション --- */
  .pc-nav {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100vw - 430px) / 2);
    height: 100vh;
    padding: 24px;
  }

  .pc-nav__panel {
    width: 100%;
    max-width: 340px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px clamp(16px, 1.8vw, 28px) 24px;
    border: 1px solid rgba(201, 162, 92, 0.35);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(58, 12, 26, 0.85) 0%, rgba(16, 8, 10, 0.92) 55%, rgba(10, 6, 6, 0.95) 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    scrollbar-width: none;
  }

  .pc-nav__list li {
    border-bottom: 1px solid rgba(201, 162, 92, 0.2);
  }

  .pc-nav__list a {
    display: flex;
    align-items: baseline;
    gap: clamp(10px, 1.2vw, 18px);
    padding: 15px 4px;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(12px, 1vw, 14px);
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: color 0.3s var(--ease-out), padding-left 0.3s var(--ease-out);
  }

  .pc-nav__num {
    flex: 0 0 auto;
    font-family: var(--font-en);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #f6e1a9 0%, #c9a05a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.75;
    transition: opacity 0.3s var(--ease-out);
  }

  .pc-nav__list a:hover,
  .pc-nav__list a.is-current {
    color: #e9c983;
    padding-left: 10px;
  }

  .pc-nav__list a:hover .pc-nav__num,
  .pc-nav__list a.is-current .pc-nav__num {
    opacity: 1;
  }

  .pc-nav__cta {
    margin-top: 26px;
  }

  .pc-nav__note {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}