:root{
  --ink:#2b2530;
  --muted:#756c78;

  --lav:#C7B3D5;
  --lav-light:#eee6f1;

  --beige:#DACCC3;
  --beige-light:#f1e9e4;

  --white:#fff;
  --line:rgba(69,53,75,.13);

  --max:760px;

  --serif:"Cormorant Garamond","Times New Roman",serif;
  --jp:"Noto Sans JP",sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(
      circle at 5% 10%,
      rgba(199,179,213,.32),
      transparent 32%
    ),
    radial-gradient(
      circle at 95% 85%,
      rgba(218,204,195,.42),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #fbf8f5 0%,
      #f5eff6 50%,
      #f0e9e4 100%
    );

  color:var(--ink);
  font-family:var(--jp);
  font-weight:300;
  letter-spacing:.045em;

  overflow-x:hidden;
}

body.is-loading {
  overflow: hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;

  background:
    radial-gradient(
      circle at var(--mouse-x,50%) var(--mouse-y,50%),
      rgba(255,255,255,.16),
      transparent 20%
    );

  mix-blend-mode:screen;
}

img{
  max-width:100%;
  display:block;
  position: relative; /* ← 重なり順を有効化 */
  z-index: 100;     /* ← body::before (999) より上に配置 */
}

button,
a{
  font:inherit;
}

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

button{
  cursor:pointer;
}

/* OPENING ANIMATION */
.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f6eff8 50%,
    #eee6f1 100%
  );
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.opening.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.opening-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  animation: openingFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}


.opening-brand {
  display: flex !important;
  align-items: center !important;
}

/* ロゴ画像自体の高さと表示調整 */
.opening-brand-logo {
  display: block !important;
  width: auto !important;
  height: clamp(32px, 5.5vw, 52px) !important; 
  object-fit: contain !important;
}

.opening-x {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600 !important;
color: rgb(199, 179, 213) !important;
  letter-spacing: 0.1em;
}

.opening-talent {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(28px, 6.5vw, 48px) !important;
color: rgb(199, 179, 213) !important;
  text-align: center !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}


@keyframes openingFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lp{
  width:min(100%,var(--max));
  margin:auto;
  background:#fff;
  overflow:visible;
  box-shadow: 0 0 100px rgba(62,44,70,.10);
}

.serif{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.025em;
}

.en{
  font-family:var(--serif);
  letter-spacing:.14em;
}

.section{
  position:relative;
  padding:110px 7.5%;
  overflow:hidden;
}

.kicker{
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#88758e;
  margin-bottom:20px;
}

h1, h2, h3, p{ margin-top:0; }

h2{
  font-size:clamp(24px,5vw,38px);
  line-height:1.3;
  font-weight:450;
  letter-spacing:.035em;
}

/* spanで囲まれている数字も完全に和文明朝体へ強制同期 */
h2.serif .num,
.serif .num {
  font-family: "Noto Serif JP", "Shippori Mincho", serif !important;
  font-size: 1.0em !important;   /* 周囲の「つの特別を」と同じ大きさに統一 */
  font-weight: 400 !important;   /* 太さも完全に一致させる */
  margin: 0 !important;
}


.lead{
  font-size:12px;
  line-height:2.2;
  color:var(--muted);
}

.reveal{
  opacity:0;
  transform:translateY(45px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}

.reveal.in{
  opacity:1;
  transform:none;
}

.reveal-delay-1{ transition-delay:.12s; }
.reveal-delay-2{ transition-delay:.24s; }
.reveal-delay-3{ transition-delay:.36s; }


/* HERO */
.hero{
  position:relative;
  width:100%;
  background:#eee7ef;
  overflow:hidden;
}

.hero-image{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
}

.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.08));
}


/* BRAND */
.brand{
  position:relative;
  padding:100px 7.5%;
  text-align:center;
  background:#fff;
}

.brand::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-90px;
  right:-60px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(199,179,213,.35), transparent 70%);
  filter:blur(15px);
}

.brand-lockup{
  position:relative;
  font-size:clamp(34px,8vw,58px);
  line-height:1;
}

.brand-x{
  margin:20px 0;
  font-family:var(--serif);
  font-size:18px;
  color:#b2a6b5;
}

.brand-note{
  margin-top:25px;
  font-size:8px;
  letter-spacing:.32em;
  color:#958798;
}

/* OFFER */
.offer{
  padding:28px 5.5% 40px;
  background: linear-gradient(180deg, #fff 0%, #faf6fb 100%);
}

.offer-card{
  position:relative;
  max-width:620px;
  margin:0 auto;
  padding:32px 28px 34px;
  text-align:center;
  border:1px solid rgba(69,53,75,.10);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,241,249,.92));
  box-shadow: 0 25px 60px rgba(77,47,88,.08);
}

.offer-card::before{
  content:"";
  position:absolute;
  top:0;
  left:10%;
  width:80%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(199,179,213,.7), transparent);
}

.offer-badge{
  display:inline-flex;
  align-items:center;
  margin:30px auto;
  padding:6px 13px;
  border:1px solid rgba(141,104,162,.18);
  border-radius:999px;
  background: linear-gradient(90deg, rgba(199,179,213,.18), rgba(218,204,195,.22));
  font-size:13px;
  letter-spacing:.2em;
}

.offer-title{
  margin:17px 0 5px;
  font-size:18px;
  line-height:1.55;
  font-weight:500;
}

.offer-sub{
  margin:0 0 22px;
  font-size:10px;
  color:var(--muted);
  line-height:1.8;
  letter-spacing:.08em;
}

.offer-items{
  display:flex;
  flex-direction:column;
  gap:0;
  width:min(100%,500px);
  margin:0 auto 22px;
  padding:0;
  overflow:visible;
}

.offer-item{
  display:flex;
  align-items:flex-start;
  gap:13px;
  width:100%;
  padding:13px 0;
  text-align:left;
  border-top:1px solid rgba(69,53,75,.09);
}

.offer-item:first-child{
  border-top:1px solid rgba(69,53,75,.09);
}

.offer-item__number{
  flex:0 0 26px;
  padding-top:1px;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.1em;
  color:#907693;
}

.offer-item__text{
  font-family:var(--jp);
  font-size:10px;
  line-height:1.8;
  letter-spacing:.05em;
  color:#5f5662;
}

.price{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  margin:10px 0 20px;
  text-align:center;
}

.price strong{
  font-size:28px;
  font-weight:400;
  letter-spacing:.03em;
}

.price span{
  font-size:9px;
}

.cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin:0 auto;
  border:0;
  border-radius:2px;
  background: linear-gradient(105deg, #C7B3D5 0%, #DACCC3 100%);
  color:#fff;
  font-size:11px;
  letter-spacing:.2em;
  box-shadow: 0 18px 40px rgba(119,89,130,.20);
  overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.cta::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg);
  transition:left .8s ease;
}

.cta:hover{
  transform:translateY(-2px);
  box-shadow: 0 22px 50px rgba(119,89,130,.3);
}

.cta:hover::before{
  left:140%;
}

.note{
  text-align:center;
  margin-top:12px;
  font-size:8px;
  color:#8b7e8e;
}

.soft{
  background:
    radial-gradient(circle at 85% 15%, rgba(218,204,195,.25), transparent 28%),
    linear-gradient(180deg, #fff, #faf7fb);
}

/* FRAGRANCE */
.fragrance{ padding-top:100px; }
.fragrance-intro{
  max-width:600px;
  margin: 0 auto 50px;
  text-align:center;
}

.fragrance-visual{
  position:relative;
  height:440px;
  display:grid;
  place-items:center;
  margin: 0 -7.5%;
  overflow:hidden;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #f1e7f4 45%, #dfd0e5 100%);
}

.fragrance-visual::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  animation: ringPulse 8s ease-in-out infinite;
}

.fragrance-visual::after{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.8), transparent 70%);
  filter:blur(8px);
  animation: lightMove 7s ease-in-out infinite;
}

.bottle{
  position:relative;
  z-index:2;
  width:125px;
  height:245px;
  border-radius: 8px 8px 18px 18px;
  background: linear-gradient(105deg, #ddd5e0 0%, #fff 30%, #f7f4f8 53%, #d1c4d5 100%);
  box-shadow: 20px 35px 45px rgba(70,44,78,.17), inset 0 0 25px rgba(255,255,255,.7);
  transform: rotate(-4deg);
  animation: bottleFloat 6s ease-in-out infinite;
}

.bottle::before{
  content:"";
  position:absolute;
  width:44px;
  height:48px;
  left:40px;
  top:-44px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #c9c0cd, #faf8fb, #bfb4c5);
}

.bottle::after{
  content: "TALENT\A SPECIAL";
  white-space:pre;
  position:absolute;
  left:12px; right:12px; top:85px;
  padding:14px 4px;
  text-align:center;
  line-height:1.6;
  border-top:1px solid rgba(60,45,65,.2);
  border-bottom:1px solid rgba(60,45,65,.2);
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.13em;
}

@keyframes bottleFloat{
  0%, 100%{ transform: translateY(0) rotate(-4deg); }
  50%{ transform: translateY(-15px) rotate(-1deg); }
}

@keyframes ringPulse{
  0%, 100%{ transform:scale(.88); opacity:.35; }
  50%{ transform:scale(1.08); opacity:.8; }
}

@keyframes lightMove{
  0%, 100%{ transform:translate(-40px,-20px); opacity:.45; }
  50%{ transform:translate(40px,25px); opacity:.8; }
}

.scent-tags{
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:30px;
}

.scent-tag{
  padding:10px 17px;
  border: 1px solid rgba(76,57,84,.14);
  border-radius:999px;
  background:#fff;
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.16em;
}

/* FRAGRANCE STORY & PYRAMID */
.fragrance-story {
  position: relative;
  padding: 60px 0 80px;
  overflow: visible;
  background: linear-gradient(135deg, #f8f4f8 0%, #ffffff 45%, #f1e9e5 100%);
  color: #3f3541;
}

/* =========================================================
   PC専用：サイドバー 1000x100画像 静止固定ループ表示設定
========================================================= */
@media (min-width: 769px) {
  .site-side-type {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100px !important;            /* 縦向きにした時の横幅（100px） */
    height: 100vh !important;           /* 画面の高さ固定 */
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .site-side-type__track {
    display: flex !important;
    flex-direction: column !important;  /* 縦方向に複数画像を配置 */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100px !important;
    animation: none !important;         /* アニメーション（動く処理）を停止 */
    transform: none !important;
  }

  .side-full-banner {
    width: 1000px !important;           /* 画像本来の横幅 */
    height: 100px !important;           /* 画像本来の高さ */
    max-width: none !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    /* 1000x100の横長画像を右に90度回転させて縦向きにする */
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
    margin: 375px 0 !important;         /* 上下に並ぶ画像同士の間隔（間隔を詰めたい場合は小さく設定） */
    opacity: 0.45 !important;           /* 透明度（1.0で完全表示） */
    pointer-events: none !important;
    user-select: none !important;
  }
}

.fragrance-story__intro,
.fragrance-pyramid {
  position: relative;
  z-index: 1;
}

.fragrance-story__intro {
  width: min(700px, calc(100% - 40px));
  margin: 0 auto 25px;
  text-align: center;
}

.fragrance-story__eyebrow {
  margin: 0 0 15px;
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: .3em;
  color: #9b849d;
}

.fragrance-story__intro h2 {
  margin-top: 10px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(23px, 4vw, 36px);
  font-weight: 430;
  letter-spacing: .15em;
  line-height: 1.5;
}

.fragrance-story__sub {
  margin: 10px 0 0;
  font-size:clamp(15px, 2vw, 17px);
  letter-spacing: .12em;
  color: #9b849d;
  font-weight: 400;
  line-height: 1.6;
}

.fragrance-story__intro > p:last-child {
  margin: 30px 0 0;
  font-size: clamp(12px, 1.8vw, 15px);
  line-height: 2.2;
  letter-spacing: .10em;
  color: #817681;
}
.fragrance-story__intro .fragrance-story__eyebrow,
.fragrance-story__intro h2,
.fragrance-story__intro .fragrance-story__sub,
.fragrance-story__intro > p:last-child{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.fragrance-story__intro .fragrance-story__eyebrow.is-scent-visible{ opacity:1; transform:translateY(0); transition-delay:0s; }
.fragrance-story__intro h2.is-scent-visible{ opacity:1; transform:translateY(0); transition-delay:.12s; }
.fragrance-story__intro .fragrance-story__sub.is-scent-visible{ opacity:1; transform:translateY(0); transition-delay:.22s; }
.fragrance-story__intro > p:last-child.is-scent-visible{ opacity:1; transform:translateY(0); transition-delay:.34s; }

.fragrance-pyramid {
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
}

.pyramid-images {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pyramid-img {
  width: 100%;
  line-height: 0;
  margin: 0; padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(.98);
  transition: opacity 1.8s cubic-bezier(.22,1,.36,1), transform 2.0s cubic-bezier(.22,1,.36,1);
}

.pyramid-img img {
  display: block;
  width: 100%; height: auto;
  vertical-align: bottom;
}

.pyramid-img--top { z-index: 3; }
.pyramid-img--middle { z-index: 2; margin-top: -1px; }
.pyramid-img--last { z-index: 1; margin-top: -1px; }

.pyramid-img.is-active-img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pyramid-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 20px;
}

.fragrance-layer, .fragrance-layer__notes { position: relative; }

.fragrance-line {
  position: absolute;
  left: -170px;
  top: 50%;
  width: 170px;
  height: 1px;
  background: rgba(116, 95, 119, .25);
  transform: translateY(-50%);
}

.fragrance-notes {
  padding: 16px 20px;
  background: rgba(248,244,248,.85);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}

.fragrance-layer.is-active .fragrance-notes {
  opacity: 1;
  transform: translateX(0);
}

.fragrance-notes__heading {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
}

.fragrance-notes__heading span {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  letter-spacing: .2em;
  color: #806885;
  font-weight: 500;
}

.fragrance-notes__heading small {
  font-size: 8px;
  letter-spacing: .12em;
  color: #a59aa5;
}

.fragrance-notes__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.fragrance-note {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}

.fragrance-layer.is-active .fragrance-note { opacity: 1; transform: translateX(0); }
.fragrance-layer.is-active .fragrance-note:nth-child(1) { transition-delay: .2s; }
.fragrance-layer.is-active .fragrance-note:nth-child(2) { transition-delay: .35s; }
.fragrance-layer.is-active .fragrance-note:nth-child(3) { transition-delay: .5s; }

.fragrance-note i {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #907693;
}

.fragrance-note span {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: .1em;
  color: #403640;
  white-space: nowrap;
}

.fragrance-complete {
  margin-top: 120px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.fragrance-complete.is-complete {
  opacity: 1;
  transform: translateY(0);
}

.fragrance-complete__line {
  display: block;
  width: 1px; height: 60px;
  margin: 0 auto 20px;
  background: linear-gradient(to bottom, transparent, #907693);
}

.fragrance-complete p {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: .3em;
  color: #9a829d;
}

.fragrance-complete h3 {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .2em;
}

/* SCENT PYRAMID: スマホ指示ライン */
.fragrance-line {
  position: absolute !important;
  top: 50% !important;
  height: 1px !important;
  background: rgba(116, 95, 119, .25) !important;
  transform: translateY(-50%) scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.8s cubic-bezier(.22, 1, .36, 1) !important;
}

@media(min-width: 768px) {
  .fragrance-line { left: -170px !important; width: 170px !important; }
}

@media(max-width: 767px) {
  .fragrance-line {
    display: block !important;
    left: -150px !important;
    width: 150px !important;
    background: rgba(116, 95, 119, .4) !important;
  }
}

.fragrance-layer .fragrance-line {
  transform: translateY(-50%) scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.8s cubic-bezier(.22, 1, .36, 1) !important;
}

.fragrance-layer.is-active .fragrance-line { transform: translateY(-50%) scaleX(1) !important; }
.fragrance-layer--top.is-active .fragrance-line { transition-delay: 0.1s !important; }
.fragrance-layer--middle.is-active .fragrance-line { transition-delay: 0.25s !important; }
.fragrance-layer--last.is-active .fragrance-line { transition-delay: 0.4s !important; }

/* DESIGN FILM */
.design-film__transition-line{
  position:absolute;
  top:4vh; left:50%;
  width:1px; height:60px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(155,132,157,.75),rgba(155,132,157,.15));
  z-index:20;
  pointer-events:none;
}

.design-film{
  position:relative;
  height:580vh;
  background:#f8f5f8;
  color:var(--ink);
  overflow:visible;
}

.design-film__intro{
  position:absolute;inset:0;min-height:100%;
  display:flex;align-items:flex-start;justify-content:center;
  text-align:center;padding:3vh 24px 80px;z-index:6;pointer-events:none;
}
.design-film__intro-inner{max-width:720px;opacity:1;transform:translateY(0);will-change:opacity,transform}
.design-film__kicker{margin-bottom:10px;font-family:var(--serif);font-size:13px;letter-spacing:.32em;color:#907693}
.design-film__intro-title{margin:24px;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);font-weight:450;line-height:1.45;letter-spacing:.08em}
.design-film__intro-copy{margin:28px auto 0;max-width:590px;font-size:11px;line-height:2.2;letter-spacing:.08em;color:#817582}

.design-film__sticky{
  position:-webkit-sticky;position:sticky;top:0;width:100%;height:100svh;min-height:620px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;perspective:1600px;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.98) 0%,rgba(248,244,249,.96) 38%,rgba(229,216,232,.9) 100%);
}

.design-film__light{position:absolute;width:60vw;height:60vw;max-width:850px;max-height:850px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,.35) 40%,transparent 72%);filter:blur(5px);pointer-events:none}
.design-film__halo{position:absolute;width:min(58vw,650px);height:min(58vw,650px);border:1px solid rgba(255,255,255,.85);border-radius:50%;opacity:.8;pointer-events:none}
.design-film__halo::before,.design-film__halo::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.5)}
.design-film__halo::before{inset:7%}.design-film__halo::after{inset:15%}
.design-film__camera{position:absolute;left:50%;top:50%;width:min(34vw,430px);height:min(65vh,650px);transform:translate(-50%,-50%);transform-style:preserve-3d;z-index:3;will-change:transform}
.design-film__bottle{position:absolute;left:50%;top:50%;width:250px;height:490px;transform:translate(-50%,-50%) rotateZ(-2deg);transform-style:preserve-3d;will-change:transform}
.design-film__face{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transform-style:preserve-3d}
.design-film__face img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(22px 32px 30px rgba(66,44,72,.18))}
.design-film__face--back{transform:rotateY(180deg)}
.design-film__bottle-fallback{position:absolute;inset:0;border-radius:14px 14px 28px 28px;background:linear-gradient(105deg,#d8cedc 0%,#fff 25%,#f8f5f9 50%,#d2c3d6 100%);box-shadow:24px 35px 50px rgba(66,44,72,.18),inset 0 0 30px rgba(255,255,255,.8)}
.design-film__bottle-fallback::before{content:"";position:absolute;width:70px;height:70px;left:50%;top:-65px;transform:translateX(-50%);border-radius:7px 7px 2px 2px;background:linear-gradient(90deg,#c5bbc8,#fff,#bdb1c3)}
.design-film__bottle-fallback::after{content:"TALENT NAME";position:absolute;left:20px;right:20px;top:130px;padding:18px 5px;text-align:center;border-top:1px solid rgba(50,40,55,.2);border-bottom:1px solid rgba(50,40,55,.2);font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:#66566a}
.design-film__back-fallback{position:absolute;inset:0;border-radius:14px 14px 28px 28px;background:linear-gradient(105deg,#d8cedc 0%,#fff 25%,#f0eaf2 52%,#d0c0d4 100%);box-shadow:24px 35px 50px rgba(66,44,72,.18),inset 0 0 30px rgba(255,255,255,.8);backface-visibility:hidden;transform:rotateY(180deg)}
.design-film__back-fallback::before{content:"CHARACTER";position:absolute;left:25px;right:25px;top:110px;height:110px;display:grid;place-items:center;border:1px dashed #aa9bab;font-size:10px;letter-spacing:.22em;color:#76677a}
.design-film__back-fallback::after{content:"TALENT NAME";position:absolute;left:20px;right:20px;top:245px;text-align:center;font-family:var(--serif);font-size:11px;letter-spacing:.16em;color:#66566a}
.design-film__shine{position:absolute;top:-10%;left:-100px;width:80px;height:120%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg) translateX(-160px);opacity:0;pointer-events:none;z-index:5}

.design-film__copy{
  position:absolute;
  z-index:40;
  left:clamp(25px,7vw,115px);
  top:30%;
  width:min(370px,34vw);
  transform:translateY(calc(-50% + var(--copy-y,25px)));
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  display:block;
  padding:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:0;
  border:0;
  box-shadow:none;
}
.design-film__copy--right{left:auto;right:clamp(45px,6vw,90px)}

.design-film__annotation{
  position:absolute;
  z-index:35;
  pointer-events:none;
  opacity:0;
  width:0; height:0;
}
.design-film__annotation-line{position:absolute;height:1px;width:0;background:#55475a;transform-origin:left center}
.design-film__annotation-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#55475a;transform:scale(0);transform-origin:center}

.design-film__side-label{position:absolute;z-index:45;top:15%;bottom:auto;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:12px;letter-spacing:.32em;color:#9b8a9e;opacity:0;white-space:nowrap}
.design-film__annotation--engraving{left:50%;top:50%}
.design-film__annotation--gradient{left:50%;top:50%}
.design-film__annotation--character{left:50%;top:50%}

#annotationEngraving .design-film__annotation-line{ transform-origin:right center; }

.design-film__number{display:block;margin-bottom:12px;font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:#907693}
.design-film__number strong{font-size:34px;font-weight:450}
.design-film__en{display:block;margin-bottom:18px;font-family:var(--serif);font-size:11px;letter-spacing:.28em;color:#8c788f}
.design-film__title{margin:0 0 15px;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);font-weight:450;line-height:1.45;letter-spacing:.08em}
.design-film__description{margin:0;font-size:13px; font-weight: 400 ;line-height:2.1;letter-spacing:.06em;color:#7f747f}
.design-film__turn{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;align-items:center;gap:15px;font-family:var(--serif);font-size:9px;letter-spacing:.25em;color:#918394;opacity:0}
.design-film__turn-line{width:55px;height:1px;background:#b8aab9}

@media(max-width:900px){
  .design-film{height:600vh}.design-film__sticky{min-height:560px}.design-film__camera{width:100%;height:70vh}.design-film__bottle{width:220px;height:430px}
  .design-film__copy{left:24px;right:24px;top:22%;bottom:auto;width:auto;transform:translateY(var(--copy-y,25px));text-align:center}.design-film__copy--right{left:24px;right:24px}
  .design-film__number{margin-bottom:7px}.design-film__number strong{font-size:27px}.design-film__en{margin-bottom:9px}.design-film__title{font-size:22px; font-weight: 450 ;margin-bottom:8px}.design-film__description{max-width:340px;margin:auto;font-size:13px; font-weight: 400 ;line-height:1.9}
  .design-film__annotation--engraving{left:50%;top:50%;transform:scale(.72);transform-origin:left center}.design-film__annotation--gradient{left:50%;top:50%;transform:scale(.72);transform-origin:left center}.design-film__annotation--character{left:50%;top:50%;transform:scale(.72);transform-origin:left center}.design-film__side-label{top:11%;bottom:auto}
  .design-film__intro{padding:80px 22px 120px}.design-film__intro-title{font-size:22px}.design-film__intro-copy{font-size:10px;line-height:2;margin-top:22px}.design-film__side-label{bottom:55px}.design-film__turn{bottom:55px}
}
@media(max-width:480px){
  .design-film{height:650vh}.design-film__sticky{min-height:600px}.design-film__bottle{width:195px;height:380px}.design-film__copy{bottom:88px}.design-film__title{font-size:22px;font-weight:450}.design-film__description{font-size:12px; font-weight: 400 ;padding:0 8px}
  .design-film__annotation--engraving{left:50%;top:50%;transform:scale(.58)}.design-film__annotation--gradient{left:50%;top:50%;transform:scale(.58)}.design-film__annotation--character{left:50%;top:50%;transform:scale(.58)}.design-film__side-label{top:9%}
  .design-film__intro-title{font-size:22px;font-weight:430}.design-film__intro-copy{font-size:9px}
}
@supports (position: sticky){.design-film__sticky{position:-webkit-sticky;position:sticky;top:0}}

@media(max-width:767px){
  .offer{ padding:22px 18px 35px; }
  .offer-card{ padding:28px 18px 30px; }
  .offer-title{ font-size:19px; }
  .offer-sub{ font-size:9px; margin-bottom:18px; }
  .offer-items{ width:100%; }
  .offer-item{ gap:10px; padding:11px 0; }
  .offer-item__number{ flex-basis:24px; font-size:12px; }
  .offer-item__text{ font-size:9px; line-height:1.8; }
  .price strong{ font-size:34px; }
  .site-side-type{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  .design-film{height:100vh;min-height:620px}
  .design-film__sticky{position:relative;height:100vh}
  .design-film__intro{opacity:1!important;transform:none!important}
  .design-film__camera,.design-film__bottle,.design-film__face{transform:none!important}
}

/* =========================================================
   SPECIAL GIFT：全体最適化・完全統合版CSS
========================================================= */

/* 1. メインタイトル：ゴールド〜ディープパープルのグラデーション */
.special-gift__title {
  font-size: clamp(24px, 3.8vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.05em !important;
  
  background: linear-gradient(135deg, #a07a4a 0%, #7b4f8d 50%, #341842 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  
  margin-bottom: 32px !important;
}

/* 2. 商品名エリア：背景光が被らないようz-indexと位置を調整 */
.special-gift__lead {
  position: relative !important;
  z-index: 10 !important; /* 背景光より前面に配置してクリアに見せる */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  
  gap: 10px 14px !important; 
  margin: 0 auto 16px auto !important; 
  padding: 0 !important;
  
  font-size: clamp(14px, 1.8vw, 17px) !important;
  font-weight: 500 !important;
  color: #3d2b45 !important; /* くっきり見えやすいシックなダークパープル */
  
  line-height: 1.6 !important;
  letter-spacing: 0.06em !important;
}

/* 3. 特典アイコンバッジ */
.special-gift__tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 14px !important;
  
  background: linear-gradient(135deg, #8a4e6d 0%, #5d334d 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 10px rgba(93, 51, 77, 0.25) !important;
  
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}

/* 4. 商品写真エリア（タップ反応・ハイライトを完全除去） */
.special-gift__product,
.special-gift__product * {
  -webkit-tap-highlight-color: transparent !important; /* タップ時の暗い影・枠を透明化 */
  -webkit-touch-callout: none !important;            /* 長押し時の保存メニュー非表示 */
  -webkit-user-select: none !important;              /* 選択状態を無効化 */
  user-select: none !important;
  touch-action: manipulation !important;
  outline: none !important;
}

.special-gift__product {
  position: relative !important;
  display: block !important;
  width: min(430px, 78vw) !important;
  margin: 16px auto 0 !important;
  z-index: 1 !important;
  overflow: visible !important;
  cursor: default !important;
}

/* 4-1. 背後の光（オーラ） */
.special-gift__product::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 55% !important;
  left: 50% !important;
  transform: translate3d(-50%, -50%, 0) !important;
  width: 150% !important;
  height: 160% !important;

  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(235, 222, 242, 0.25) 55%,
    rgba(255, 255, 255, 0) 75%
  ) !important;

  border-radius: 50% !important;
  filter: none !important;
  pointer-events: none !important; /* タッチ判定を無効化 */
  z-index: 1 !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition: none !important;
  animation: none !important;
}

/* 4-2. 商品画像本体（タップ判定そのものをシャットアウト） */
.special-gift__product img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  z-index: 2 !important;
  filter: drop-shadow(0 20px 35px rgba(58, 30, 70, 0.22)) !important;

  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  /* ★ タップ操作自体を無効化し、暗転やレスポンスを100%遮断 */
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  transition: none !important;
  animation: none !important;
}

/* 4-3. タップ（active）・ホバー（hover）・フォーカス（focus）時の暗転・変化を完全上書き */
.special-gift__product:hover,
.special-gift__product:active,
.special-gift__product:focus,
.special-gift__product:hover img,
.special-gift__product:active img,
.special-gift__product:focus img {
  opacity: 1 !important;
  filter: drop-shadow(0 20px 35px rgba(58, 30, 70, 0.22)) !important;
  transform: translate3d(0, 0, 0) !important;
  background: transparent !important;
  transition: none !important;
  box-shadow: none !important;
}

.special-gift__product:hover::before,
.special-gift__product:active::before,
.special-gift__product:focus::before {
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transition: none !important;
}

/* 5. 撮りおろしバッジ：明るめのミルクティーブラウン系＆左下寄り配置 */
.special-gift__badge {
  position: absolute !important;
  top: 8% !important;
  right: 6% !important;
  z-index: 9999 !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(78px, 9vw, 108px) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 12px !important;
  border-radius: 50% !important;
  
  /* 少し明るく上品なライトブラウン〜ブロンズグラデーション */
  background: linear-gradient(135deg, #cda272 0%, #9e7547 100%) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 8px 20px rgba(130, 95, 55, 0.28) !important;
  
  font-family: var(--jp) !important;
  font-size: clamp(10px, 1vw, 12px) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  transform: rotate(5deg) !important;
  
  pointer-events: none !important;
}

/* 6. 「香水と一緒に、飾って楽しむ。」エリア＆細めライン追加 */
.special-gift__display {
  position: relative !important;
  z-index: 2 !important; /* 写真背後の光とスムーズにつながるレイヤー位置 */
  margin-top: 66px !important;
}

.special-gift__display-heading {
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  font-size: clamp(18px, 2.5vw, 24px) !important;
  color: #2b1834 !important;
  font-weight: 450 !important;
}

/* 見出し下の細い優雅なライン */
.special-gift__display-heading::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 400px !important;
  height: 1px !important; /* 細めのライン */
  background: linear-gradient(90deg, transparent, #b996c9, #a07a4a, transparent) !important;
}

/* 7. スマホ表示（767px以下）時の微調整 */
@media (max-width: 767px) {
  .special-gift__title {
    margin-bottom: 24px !important;
  }
  .special-gift__lead {
    font-size: 13.5px !important;
    gap: 8px 10px !important;
    margin-bottom: 12px !important;
  }
  .special-gift__product {
    width: min(340px, 88vw) !important;
    margin-top: 12px !important;
  }
  .special-gift__product::before {
    width: 160% !important;
    height: 170% !important;
  }
  .special-gift__badge {
    top: 6% !important;
    right: 4% !important;
    width: 82px !important;
    font-size: 10px !important;
    padding: 8px !important;
  }
  .special-gift__display {
    margin-top: 28px !important;
  }

  /* スマホ時のみ STEP01 と STEP02 の間の矢印アイコンを非表示 */
  .special-gift__steps::after,
  .special-gift__step::after,
  .special-gift__step-arrow,
  .special-gift__steps-arrow {
    display: none !important;
  }
}


/* =========================================================
   SPECIAL SET
========================================================= */
.special{
  text-align:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#f8f3fa,#eee2f2);
}


/* =========================================================
   SPECIAL SET カルーセル
   ・JSによる自動無限スクロール
   ・PCマウスドラッグ対応
   ・ホバーしても停止しない
========================================================= */
.special-carousel{
  display:block;

  width:calc(100% + 15%);
  margin:50px -7.5% 0;
  padding:0 7.5% 20px;

  overflow:hidden !important;
  overflow-x:hidden !important;

  scrollbar-width:none;
  -ms-overflow-style:none;

  user-select:none;
  -webkit-user-select:none;

  /*
   * PC：JSドラッグ
   * スマホ：縦スクロールはブラウザに任せる
   */
  touch-action:pan-y;

  cursor:grab;
}

.special-carousel::-webkit-scrollbar{
  display:none;
}


/* =========================================================
   ドラッグ中
========================================================= */
.special-carousel.is-dragging{
  cursor:grabbing;
}


/* =========================================================
   トラック
   ※自動スクロールはJSで制御するため
   CSS animationは使用しない
========================================================= */
.special-carousel__track{
  display:flex;
  gap:15px;
  width:max-content;

  will-change:transform;

  /*
   * JSがtransformを完全管理
   */
  animation:none !important;

  /*
   * hoverでも何も変えない
   */
}


/* =========================================================
   ドラッグ中はアニメーションを完全停止
========================================================= */
.special-carousel.is-dragging
.special-carousel__track{
  animation:none !important;
}


/* =========================================================
   商品画像
========================================================= */
.special-card{
  position:relative;

  width:clamp(240px,68vw,360px);
  min-width:clamp(240px,68vw,360px);

  scroll-snap-align:none;

  background:#fff;
  border:1px solid var(--line);

  padding:18px;

  text-align:left;

  box-shadow:
    0 18px 50px rgba(75,51,84,.06);
}


/* =========================================================
   商品画像
========================================================= */
.special-card .product-image{
  aspect-ratio:1 / 1;
  overflow:hidden;
  position:relative;
}

.special-card .product-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter .55s ease;

  will-change:transform;

  -webkit-user-drag:none;
  user-drag:none;

  user-select:none;
  -webkit-user-select:none;

  /*
   * ここはnoneにしない
   * スマホのタップ拡大JSで必要
   */
  pointer-events:auto;
}


/* =========================================================
   PCのみホバー
========================================================= */
@media (hover:hover) and (pointer:fine){

  .special-card:hover .product-image img,
  .special-card:focus-within .product-image img{
    transform:scale(1.06);
    filter:brightness(1.03);
  }

}


/* =========================================================
   スマホ
   ・縦方向のページスクロールは可能
   ・横方向はJSで操作可能
   ・画像タップ拡大を邪魔しない
========================================================= */
@media (hover:none) and (pointer:coarse){

  .special-carousel{
    -webkit-overflow-scrolling:touch;

    /*
     * 縦スクロールはブラウザ
     * 横方向はJS
     */
    touch-action:pan-y;

    cursor:default;
  }

  .special-carousel.is-dragging{
    cursor:default;
  }

  .special-card{
    -webkit-tap-highlight-color:transparent;
  }

}

@media (hover:none) and (pointer:coarse){

  .special-carousel .special-card .product-image img{
    display:block !important;
    transform:scale(1) !important;
    transform-origin:center center !important;
    transition:
      transform .45s ease,
      filter .45s ease !important;
    pointer-events:auto !important;
  }

  .special-carousel .special-card .product-image img.touch-expanded{
    transform:scale(1.08) !important;
    filter:brightness(1.06) !important;
  }

}


/* =========================================================
   モーション低減
========================================================= */
@media (prefers-reduced-motion:reduce){

  .special-card .product-image img{
    transition:none;
  }

}


/* =========================================================
   カードテキスト
========================================================= */
.special-card h3{
  margin:20px 0 7px;

  font-family:var(--serif);

  font-size:17px;

  letter-spacing:.18em;

  font-weight:400;
}


.special-card p{
  font-size:10px;

  color:var(--muted);

  line-height:1.9;
}

/* =========================================================
   GIFT
========================================================= */
.special-gift{
  background:linear-gradient(145deg,#f8f3fa,#eee2f2);
  margin-bottom:0;
}

/* =========================================================
   SPECIAL SET OFFER
========================================================= */
.special-set-offer{
  margin-top:0;
  padding-top:clamp(36px,7vw,72px);

  background:linear-gradient(145deg,#f8f3fa,#eee2f2);
}

/* =========================================================
   SPECIAL FLOW BACKGROUND
========================================================= */
.special-flow-bg{
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(199,179,213,.18),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #fbf8f5 0%,
      #f4edf5 52%,
      #f7f1ec 100%
    );
}

.special-flow-bg > .special-gift{
  background:transparent !important;
}

.special-flow-bg > .special-set-offer{
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(218,204,195,.22),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #f3edf7 0%,
      #e8dced 52%,
      #e6d8df 100%
    ) !important;
}

.special-flow-bg > .special-gift{
  padding-bottom:clamp(30px,5vw,60px);
}

.special-flow-bg > .special-set-offer{
  padding-top:clamp(36px,7vw,72px);
}

/* =========================================================
   スマホ
========================================================= */
@media (hover:none) and (pointer:coarse){
  .special-carousel{
    -webkit-overflow-scrolling:touch;
  }
}

/* USE */
.use{ background:#fff; }
.use-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
  margin-top:40px;
}

.use-card{
  position:relative;
  aspect-ratio:.78;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding:18px;
  overflow:hidden;
  background: linear-gradient(145deg, #f8f5f9, #e7d9eb);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.use-card::before{
  content:"";
  position:absolute;
  width:120px; height:120px;
  top:-45px; right:-45px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.8), transparent 70%);
}

.use-card:hover{ transform:translateY(-7px); }
.use-num{ position:relative; font-family:var(--serif); font-size:29px; }
.use-card span{ position:relative; margin-top:8px; font-size:9px; line-height:1.7; }

/* STORY */
.story{ background:#29232d; color:#fff; }
.story .kicker{ color:#c9b7cf; }
.story h2{ color:#fff; }
.story .lead{ color:#c6bdc9; }
.timeline{ margin-top:55px; }

.timeline-row{
  display:grid;
  grid-template-columns: 65px 1fr;
  gap:20px;
  padding: 25px 0;
  border-top: 1px solid rgba(255,255,255,.15);
}

.timeline-row:last-child{ border-bottom: 1px solid rgba(255,255,255,.15); }
.timeline-row b{ font-family:var(--serif); font-size:20px; font-weight:400; }
.timeline-row strong{ display:block; margin-bottom:6px; font-family:var(--serif); font-size:14px; letter-spacing:.2em; font-weight:400; }
.timeline-row span{ font-size:10px; color:#c6bdc9; line-height:1.9; }

/* MESSAGE */
.message{ text-align:center; background: linear-gradient(#fff, #f8f2fa); }
.signature{ margin-top:30px; font-family:var(--serif); font-size:40px; letter-spacing:.05em; }

/* MOVIE */
.movie{ position:relative; padding:0; background:#18131b; }
.movie-box{
  position:relative;
  aspect-ratio:16 / 9;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: radial-gradient(circle at 50% 50%, #b99ac5, #201722);
}

.movie-box::before{
  content:"";
  position:absolute;
  width:65%; height:65%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.3), transparent 70%);
  filter:blur(25px);
  animation: movieGlow 6s ease-in-out infinite;
}

@keyframes movieGlow{
  0%, 100%{ transform:scale(.9); opacity:.4; }
  50%{ transform:scale(1.15); opacity:.8; }
}

.play{
  position:relative; z-index:2;
  width:82px; height:82px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius:50%;
  display:grid; place-items:center;
  color:#fff; font-size:19px; padding-left:4px;
  transition: transform .4s, background .4s;
}

.play:hover{ transform:scale(1.08); background: rgba(255,255,255,.12); }
.movie-caption{ position:absolute; left:7.5%; bottom:8%; color:#fff; }
.movie-caption small{ display:block; font-size:8px; letter-spacing:.25em; margin-bottom:7px; }
.movie-caption strong{ font-family:var(--serif); font-size:26px; font-weight:400; }

.talent-message-section{ display:flex; flex-direction:column; gap:32px; }
.talent-message-visual img,.brand-about-visual img{ display:block; width:100%; height:auto; }
.talent-message-copy{ text-align:center; }
.talent-message-copy .quote{ margin:24px 0 18px; font-size:clamp(15px, 1.6vw, 20px); line-height:2; }
.talent-message-copy .signature{ font-size:14px; letter-spacing:.18em; }
.brand-about{ background:#faf8fb; }
.brand-about-copy{ margin-top:32px; }
.brand-about-copy h2{ margin:16px 0 24px; }
.brand-about-text{ font-size:13px; line-height:2.25; letter-spacing:.04em; }
.brand-about-note{ margin-top:24px; font-size:9px; line-height:1.8; color:#777; }

@media (min-width:768px){
  .talent-message-section{ max-width:760px; margin:0 auto; }
  .brand-about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
  .brand-about-copy{ margin-top:0; }
}


/* BRAND ABOUT */
.brand-about{ background:#faf8fb; }

@media (max-width: 767px) {
  .brand-about-visual { display: none !important; }
  .brand-about-mobile-visual {
    display: block !important;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin: 18px 0 24px;
  }
  .brand-about-mobile-visual img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
}

@media (min-width: 768px) {
  .brand-about-visual { display: block !important; }
  .brand-about-mobile-visual { display: none !important; }
}

/* =========================================================
   TALENT MESSAGE セクション：特別強調デザイン（カード＆ゴールド枠調整版）
========================================================= */

/* 1. セクション全体の背景（現状の綺麗なラベンダー・ピンクグラデーションを維持） */
.talent-message-section {
  padding: 80px 5.5% 100px !important;
  background: 
    radial-gradient(circle at 10% 20%, #fceee8 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, #d8c2e7 0%, transparent 50%),
    linear-gradient(135deg, #f9f2f5 0%, #ede3f2 50%, #e3d3e9 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.talent-message-section::before,
.talent-message-section::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
}
.talent-message-section::before {
  top: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(199, 179, 213, 0.5), transparent) !important;
}
.talent-message-section::after {
  bottom: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(199, 179, 213, 0.5), transparent) !important;
}

/* 2. メッセージカード本体（添付画像のような生成り・暖色アイボリー背景＋シャドウ） */
.talent-message-copy {
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 48px 40px 42px !important;
  
  /* 白ではなく、ほんのり温かみのある生成り・アイボリー系の背景 */
  background: #faf6f0 !important; 
  
  /* 上品な外枠ゴールド線 */
  border: 1px solid #d8c3a5 !important;
  border-radius: 4px !important;
  
  /* 柔らかい陰影で浮かび上がらせる */
  box-shadow: 
    0 15px 35px rgba(110, 85, 115, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  text-align: center !important;
}

/* 2-2. 添付画像のような「内側のゴールド極細二重線」 */
.talent-message-copy::after {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important; /* 外枠から10px内側に線を配置 */
  border: 1px solid #cbb292 !important; /* 上品で落ち着いたゴールドライン */
  border-radius: 2px !important;
  pointer-events: none !important;
}

/* 左上の装飾引用符（今回はカードデザインに合わせ非表示） */
.talent-message-copy::before {
  display: none !important;
}

/* 3. メッセージ本文（フォントは維持し、画像に合わせた温かみのあるダークブラウン） */
.talent-message-copy .quote {
  margin: 0 !important;
  font-family: "Noto Serif JP", "Shippori Mincho", serif !important;
  font-size: clamp(15px, 1.8vw, 17px) !important;
  font-weight: 500 !important;
  line-height: 2.2 !important;
  letter-spacing: 0.06em !important;
  
  /* 黒寄りすぎず、暖かみのある濃いブラウン */
  color: #534540 !important; 
  text-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 4. サイン（名前）部分（中央寄りで上品なゴールドブラウン） */
.talent-message-copy .signature {
  margin-top: 32px !important;
  padding-top: 0 !important;
  border-top: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important; /* 画像に合わせて中央配置 */
  font-family: "Noto Serif JP", serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  color: #635048 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 「―」アクセントの削除（画像に合わせる） */
.talent-message-copy .signature::before {
  content: "" !important;
}

/* スマホ（767px以下）表示時の調整 */
@media (max-width: 767px) {
  .talent-message-section {
    padding: 50px 5.5% 60px !important;
  }
.talent-message-copy {
    width: min(340px, 88vw) !important; /* 写真エリアと同じ幅感に合わせる場合 */
    max-width: 100% !important;
    margin: 0 auto !important; /* 中央寄せ */
    padding: 28px 18px 24px !important; /* カード幅が狭くなる分、左右パディングを少し調整 */
  }
  .talent-message-copy::after {
    inset: 6px !important; /* スマホでは内枠の余白を少し詰める */
  }
  .talent-message-copy .quote {
    font-size: clamp(12px, 3vw, 15px) !important;
    font-weight: 520 !important;
    line-height: 2.0 !important;
  }
  .talent-message-copy .signature {
    margin-top: 22px !important;
    font-size: clamp(13px, 3vw, 16px) !important;
    font-weight: 520 !important;
  }
}

/* =========================================================
   TALENT MESSAGE：キッカー（MESSAGE）を DEVELOPMENT と完全同期
========================================================= */

/* 1. 写真とメッセージカード間の余白（gap）を復元 */
.talent-message-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

/* 2. DEVELOPMENTセクションと同等のセリフ体（Cormorant Garamond）・スタイルへ完全同期 */
.talent-message-section .kicker,
.talent-message-visual .kicker,
.message .kicker {
  font-family: var(--serif) !important; /* Cormorant Garamond（明朝・セリフ体） */
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  color: #9b8a9e !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* 3. PC表示（768px以上）時の最大幅・中央寄せ設定 */
@media (min-width: 768px) {
  .talent-message-section {
    max-width: 760px !important;
    margin: 0 auto !important;
  }
}

/* =========================================================
   ABOUT-BRAND セクション上部の余白短縮
========================================================= */

/* 1. about-brand 自体の上側余白を詰める */
.brand-about,
.about-brand,
#brand-about {
  padding-top: 60px !important; /* 元の余白（60px〜80px等）から大幅に縮小 */
  margin-top: 0 !important;
}

/* 2. 前のセクション（OFFER / COMPACT OFFER）の下側余白も合わせて調整 */
.offer,
.compact-offer,
.fragrance-story {
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
}

/* スマホ表示時（767px以下）の微調整 */
@media (max-width: 767px) {
  .brand-about,
  .about-brand,
  #brand-about {
    padding-top: 16px !important;
  }
  .offer,
  .compact-offer,
  .fragrance-story {
    padding-bottom: 12px !important;
  }
}

/* =========================================================
   ABOUT BRAND セクション：ロゴ画像サイズ＆位置調整
========================================================= */

/* インラインロゴ画像のスタイル調整 */
.brand-logo-img {
  display: inline-block !important;
  height: 28px !important;            /* 文字の大きさに合わせたロゴの高さ */
  width: auto !important;            /* アスペクト比を維持 */
  vertical-align: middle !important;  /* 隣の「ABOUT」テキストと上下中央揃え */
  margin-top: -8px !important;       /* 微妙な上下位置のズレを調整 */
margin-bottom: 12px !important;
}

/* スマホ表示時（767px以下）のサイズ調整 */
@media (max-width: 767px) {
  .brand-logo-img {
    height: 21px !important;
  }
}

/* FAQ */
.faq-item{ border-top: 1px solid var(--line); }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%; padding:23px 0; background:none; border:0; text-align:left;
  display:flex; justify-content:space-between; gap:20px; font-size:14px; color:var(--ink);
}
.faq-q span:last-child{ flex:none; font-family:var(--serif); font-size:22px; line-height:1; }
.faq-a{
  max-height:0; overflow:hidden; color:var(--muted); font-size:14px; line-height:1.95; font-weight:400;
  transition: max-height .5s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-a{ max-height:250px; padding: 0 0 22px; }

/* FINAL */
.final{
  padding-bottom:145px; text-align:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.95), transparent 32%),
    linear-gradient(180deg, #fff, #e9dcef);
}
.final-title{ margin:25px 0; font-family:var(--serif); font-size: clamp(50px,10vw,70px); font-weight:400; line-height:.95; letter-spacing:.01em; }
.final-product{
  position:relative; width:220px; height:300px; margin: 45px auto;
  display:grid; place-items:center; overflow:hidden;
  background: linear-gradient(145deg, #f9f6fa, #d8c0df);
  box-shadow: 0 35px 55px rgba(76,49,85,.16);
}
.final-product::before{ content:"PRODUCT IMAGE"; font-family:var(--serif); font-size:10px; letter-spacing:.2em; color:#8b7990; }

/* FLOAT CTA */
.float-cta{
  position:fixed; z-index:10000 !important; left:50%; bottom: max(14px,env(safe-area-inset-bottom));
  transform: translate(-50%,120px); width: min(92vw,690px); padding: 13px 15px 13px 18px;
  background: rgba(47,38,51,.93); backdrop-filter:blur(16px); color:#fff; border-radius:3px;
  box-shadow: 0 18px 45px rgba(37,23,42,.22); display:flex; align-items:center; justify-content:space-between; gap:14px;
  opacity:0; pointer-events:none; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s;
}
.float-cta.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.float-cta small{ font-size:7px; letter-spacing:.16em; opacity:.75; }
.float-cta strong{ font-weight:420; }
.float-cta a{ padding: 11px 21px; background: linear-gradient(100deg, #C7B3D5, #DACCC3); color:#fff; border-radius:2px; font-size:9px; letter-spacing:.16em; }

/* =========================================================
   FLOAT CTA：文字サイズ・縦幅復元 ＆ 鈴アイコン追加＆非表示制御対応版
========================================================= */

/* 1. 全体枠のサイズとパディングを完全固定 */
.float-cta {
  padding: 13px 15px 13px 18px !important;
}

/* 非表示制御用クラス（最下部オファー到達時） */
.float-cta.is-hidden-bottom {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 120px) !important;
}

/* 2. 全体を覆うリンクエリア */
.float-cta a.float-cta__link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* 3. 左側テキストエリアの文字サイズ復元 */
.float-cta__txt {
  color: #ffffff !important;
  background: none !important;
  line-height: 1.4 !important;
  font-size: 14px !important; /* 基本文字サイズをしっかり確保 */
}

.float-cta__txt span[style*="0.70em"],
.float-cta__txt span:first-child {
  font-size: 11px !important; /* 「無くなり次第終了」のサイズ */
  font-weight: 450 !important;
  letter-spacing: .12em !important;
  opacity: 0.85 !important;
  display: inline-block !important;
}

.float-cta__txt span[style*="0.90em"],
.float-cta__txt strong {
  font-size: 14px !important; /* 「高橋恭平プロデュース限定セット」のサイズ */
  font-weight: 500 !important;
  letter-spacing: .08em !important;
}

/* 5. 子要素のクリック阻害を防止 */
.float-cta__txt,
.float-cta__txt *,
.float-cta__btn {
  pointer-events: none !important;
}

/* MOBILE */
@media(max-width:390px){
  .section{ padding-top:80px; padding-bottom:80px; }
  .point{ min-height:700px; }
  .stage{ height:390px; }
  .use-grid{ gap:7px; }
  .use-card{ padding:13px; }
}

@media(max-width:767px){
  .fragrance-story { padding: 40px 0 50px; }
  .fragrance-pyramid { grid-template-columns: 48% 52% !important; gap: 0 !important; align-items: center !important; }
  .pyramid-images { width: 100% !important; overflow: hidden !important; }
  .pyramid-img img { width: 200% !important; max-width: none !important; margin-left: -100% !important; object-fit: cover !important; }
  .pyramid-content { padding-left: 20px !important; gap: 14px !important; }
  .fragrance-line { display: block !important; position: absolute !important; left: -150px !important; top: 50% !important; width: 150px !important; height: 1px !important; background: rgba(116, 95, 119, .4) !important; transform: translateY(-50%) !important; }
  .fragrance-notes { padding: 8px 10px !important; }
  .fragrance-notes__heading span { font-size: 13px !important; }
  .fragrance-note span { font-size: 10px !important; }
}

/* DESKTOP */
@media(min-width:761px){
  .lp{ border-left: 1px solid #eee; border-right: 1px solid #eee; }
  .hero-image{ max-height:760px; }
  .section{ padding-left:70px; padding-right:70px; }
  .offer{ padding-left:48px; padding-right:48px; }
  .fragrance-visual{ margin-left:-70px; margin-right:-70px; }
  .stage{ margin-left:-70px; margin-right:-70px; }
  .pyramid-wrap{ grid-template-columns: 1.05fr .95fr; }
}

@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

:root{
  --design-01-text-x: 8%; --design-01-text-y: 75%;
  --design-01-point-x: 30%; --design-01-point-y: 75%; --design-01-line-length: 290px;
  --design-02-text-x: 170%; --design-02-text-y: 10%;
  --design-02-point-x: 60%; --design-02-point-y: 70%; --design-02-line-length: 310px;
  --design-03-text-x: 8%; --design-03-text-y: 45%;
  --design-03-point-x: 50%; --design-03-point-y: 70%; --design-03-line-length: 330px;
}

#designCopy01{left:var(--design-01-text-x);right:auto;top:var(--design-01-text-y)}
#designCopy02{left:auto;right:calc(100% - var(--design-02-text-x));top:var(--design-02-text-y)}
#designCopy03{left:var(--design-03-text-x);right:auto;top:var(--design-03-text-y)}

/* COMPACT OFFER */
.compact-offer {
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,241,249,.92));
  box-shadow: 0 18px 45px rgba(77,47,88,.08);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.compact-offer::before {
  content: ""; position: absolute; top: 0; left: 10%; width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,179,213,.7), transparent);
}

.compact-offer__banner {
  background: linear-gradient(90deg, rgba(199,179,213,.35), rgba(218,204,195,.35));
  color: var(--ink); text-align: center; padding: 8px 12px;
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.18em; font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.compact-offer__body { display: flex; align-items: center; padding: 20px 22px; gap: 16px; }
.compact-offer__info { flex: 1; text-align: left; }

.compact-offer__offer-badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border: 1px solid rgba(141,104,162,.18); border-radius: 999px;
  background: linear-gradient(90deg, rgba(199,179,213,.18), rgba(218,204,195,.22));
  font-size: 13px; letter-spacing: 0.12em; color: var(--ink); margin-bottom: 8px;
}

.compact-offer__title {
  font-family: "Noto Serif JP", "Shippori Mincho", Georgia, serif !important;
  font-size: clamp(11.5px, 3.2vw, 22px); font-weight: 550; color: var(--ink);
  margin: 0 0 8px 0; line-height: 1.45; letter-spacing: 0.03em;
}

.compact-offer__detail { font-size: 11px; font-weight: 400 !important;color: var(--muted); margin: 0 0 12px 0; line-height: 1.8; letter-spacing: 0.04em; }

.compact-offer__main-price { color: #403640 !important; line-height: 1 !important; display: flex !important; align-items: baseline !important; }
.compact-offer__main-price .price-num { font-family: "Noto Serif JP", "Shippori Mincho", Georgia, serif !important; font-size: 24px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; }
.compact-offer__main-price .price-unit { font-size: 11px !important; font-weight: 430 !important; color: #403640 !important; margin-left: 4px !important; }

.compact-offer__image { flex: 0 0 38%; text-align: center; }
.compact-offer__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(10px 14px 20px rgba(66,44,72,.12)); }


@media (max-width: 767px) {
  .compact-offer__body { padding: 16px 14px; gap: 10px; }
  .compact-offer__title { font-size:  clamp(13.5px, 3w, 16px); }
  .compact-offer__detail { display: none !important; }
  .compact-offer__offer-badge { font-size: 9.5px !important; padding: 2px 8px !important; }
  .compact-offer__main-price .price-num { font-family: "Noto Serif JP", "Shippori Mincho", serif !important;font-size: 15px !important; }
  .compact-offer__main-price .price-unit { font-size: 10px !important; }
}

/* SPECIAL GIFT */
.special-gift{
  position:relative; padding:clamp(80px,10vw,140px) 7.5% clamp(90px,11vw,150px); text-align:center;
  background: radial-gradient(circle at 50% 18%,rgba(199,179,213,.18),transparent 34%), linear-gradient(180deg,#fbf8f5 0%,#f4edf5 52%,#f7f1ec 100%);
  overflow:hidden;
}

.special-gift__inner{ max-width:900px; margin:0 auto; }
.special-gift__kicker{ margin-bottom:10px; font-family:var(--serif); font-size:12px; letter-spacing:.34em; color:#8f7e92; }
.special-gift__title{ margin:0; font-family:var(--serif); font-size:clamp(21px,3vw,34px); line-height:1.35; font-weight:500; letter-spacing:.08em; color:var(--ink); }
.special-gift__lead{ margin:18px auto 0; font-size:14px; line-height:2; letter-spacing:.08em; color:var(--muted); }
.special-gift__product{ width:min(430px,78vw); margin:42px auto 0; position:relative; }

.special-gift__badge{
  position:absolute; top:5%; right:0; z-index:4; width:clamp(78px,9vw,108px); aspect-ratio:1 / 1;
  display:grid; place-items:center; padding:12px; border-radius:50%; background:rgba(255,255,255,.94);
  border:1px solid rgba(143,126,146,.22); box-shadow:0 10px 24px rgba(66,44,72,.10);
  font-family:var(--jp); font-size:clamp(10px,1vw,12px); line-height:1.55; font-weight:450; letter-spacing:.05em; color:#6f6671; text-align:center; transform:rotate(5deg);
}

.special-gift__product img{ width:100%; aspect-ratio:1 / 1; object-fit:contain; filter:drop-shadow(12px 22px 28px rgba(66,44,72,.13)); }
.special-gift__product-caption{ margin:14px 0 0; font-family:var(--serif); font-size:12px; letter-spacing:.22em; color:#8f7e92; }
.special-gift__display{ margin:clamp(70px,9vw,110px) auto 0; max-width:920px; }
.special-gift__display-heading{ margin:0; font-family:var(--serif); font-size:clamp(21px,3vw,30px); line-height:1.45; font-weight:400; letter-spacing:.09em; }
.special-gift__display-copy{ margin:13px auto 0; font-size:13px; line-height:2; letter-spacing:.08em; color:var(--muted); }

.special-gift__steps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,5vw,58px); margin:48px auto 0; text-align:left; position:relative; }
.special-gift__step{ min-width:0; }
.special-gift__step-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.special-gift__step-number{ font-family:var(--serif); font-size:15px; letter-spacing:.16em; color:#8f7e92; }
.special-gift__step-title{ font-size:14px; letter-spacing:.12em; font-weight:400; }
.special-gift__step-image{ position:relative; aspect-ratio:1 / .82; overflow:hidden; background:rgba(255,255,255,.55); }
.special-gift__step-image img{ width:100%; height:100%; object-fit:contain; }

.special-gift__steps::after{
  content:"→"; position:absolute; left:50%; top:calc(14px + (100% - 14px) / 2); transform:translate(-50%,-50%); z-index:5;
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.96);
  box-shadow:0 8px 20px rgba(66,44,72,.08); font-family:var(--serif); font-size:24px; color:#8f7e92; pointer-events:none;
}

.special-gift__step-copy{ margin:13px 0 0; font-size:12px; line-height:1.9; letter-spacing:.06em; color:var(--muted); }
.special-gift__step-copy strong{ color:var(--ink); font-weight:400; }

@media(max-width:767px){
  .special-gift{ padding:70px 18px 85px; }
  .special-gift__kicker{ font-size:10px; letter-spacing:.28em; }
  .special-gift__title{ font-size:26px; letter-spacing:.06em;font-weight:450; }
  .special-gift__lead{ font-size:12px; line-height:1.9; }
  .special-gift__product{ width:min(340px,88vw); margin-top:30px; }
  .special-gift__product-caption{ font-size:9px; }
  .special-gift__display{ margin-top:65px; }
  .special-gift__display-heading{ font-size:22px; }
  .special-gift__display-copy{ font-size:12px; }
  .special-gift__steps{ gap:18px; margin-top:36px; }
  .special-gift__step-head{ gap:8px; margin-bottom:10px; }
  .special-gift__step-number{ font-size:11px; }
  .special-gift__step-title{ font-size:12px; }
  .special-gift__step-copy{ font-size:11px; line-height:1.8; }
}

@media(max-width:480px){
  .special-gift__title{ font-size:23px; }
  .special-gift__steps{ gap:12px; }
  .special-gift__steps::after{ width:34px; height:34px; font-size:18px; }
  .special-gift__badge{ width:82px; font-size:10px; padding:9px; }
  .special-gift__step-title{ font-size:11px; letter-spacing:.08em; }
  .special-gift__step-copy{ font-size:10px; }
}

/* =========================================================
   DEVELOPMENT：開発ストーリー（白文字・シンプルパープルバッジ版）
========================================================= */
.development-tease {
  padding: clamp(56px, 7vw, 88px) 7% clamp(64px, 8vw, 96px);
  background: linear-gradient(180deg, #faf6fb 0%, #ffffff 100%);
  text-align: center;
}

.development-tease__inner {
  width: min(760px, 100%);
  margin: 0 auto;
}

.development-tease__kicker {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #9b8a9e;
}

.development-tease__title {
  margin: 0 0 28px;
  font-family: var(--jp);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: #4d434f;
}

/* 「開発の裏側をチラ見せ」のバッジ（白文字＆シンプルパープル） */
.development-tease__lead {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  padding: 6px 20px !important; /* 左右均等の上品なパディング */
  
  /* 深みと上品さのあるパープルグラデーション背景 */
  background: linear-gradient(135deg, #8a7192 0%, #6e5675 100%) !important;
  border-radius: 999px !important;
  
  font-size: clamp(12px, 1.5vw, 14px) !important;
  font-weight: 600 !important;
  color: #ffffff !important; /* 白文字 */
  letter-spacing: 0.12em !important;
  box-shadow: 0 4px 12px rgba(110, 86, 117, 0.2) !important;
}

/* 擬似要素アイコン（✦）の完全無効化 */
.development-tease__lead::before {
  content: none !important;
  display: none !important;
}

.development-tease__headline {
  display: block;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 600;
  color: #382c3c;
  line-height: 1.5;
}

/* 写真フレーム演出 */
.development-tease__photo {
  width: min(680px, 100%);
  margin: 0 auto 28px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(218, 204, 195, 0.5);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(77, 47, 88, 0.08);
}

.development-tease__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

.development-tease__copy {
  margin: 0;
  font-family: var(--jp);
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: #5c525f;
}

/* アクセント下線の削除 */
.development-tease__copy strong {
  font-weight: 600;
  color: #3d3040;
  background: none !important;
}

/* スマホ表示（767px以下）微調整 */
@media (max-width: 767px) {
  .development-tease {
    padding: 44px 5% 54px;
  }
  .development-tease__lead {
    padding: 5px 16px !important;
    font-size: 12px !important;
  }
  .development-tease__headline {
    font-size: 16px;
  }
  .development-tease__photo {
    padding: 5px;
    margin-bottom: 20px;
  }
  .development-tease__copy {
    font-size: 11.5px;
    line-height: 1.95;
  }
}

.offer--ux{padding-top:90px;padding-bottom:90px;background:linear-gradient(180deg,#fff 0%,#faf6fb 100%)}
.offer--ux .offer-card{margin-top:42px;border-radius:12px;padding:34px 28px 30px}
.offer--ux .offer-title{font-size:25px;line-height:1.45}
.offer--ux .offer-items{margin-bottom:26px}
.offer--ux .offer-item strong{font-weight:500;color:var(--ink)}
.offer-guide{margin:14px 0 0;font-size:9px;color:var(--muted);letter-spacing:.08em}
@media(max-width:767px){.offer--ux{padding-top:65px;padding-bottom:65px}.offer--ux .offer-card{margin-top:30px;padding:28px 18px}.offer--ux .offer-title{font-size:21px}.offer--ux .offer-item{padding:14px 0}}

/* SPECIAL SET OFFER */
.special-set-offer{margin:72px auto 0;max-width:980px;padding:0 5.5% 20px;text-align:center}
.special-set-offer__line{width:1px;height:54px;margin:0 auto 30px;background:linear-gradient(180deg,transparent,#c7b3d5)}
.special-set-offer .offer-produce{display:block;margin-bottom:12px;font-family:var(--serif);font-size:16px;font-weight:450;letter-spacing:.22em;color:#8c788f}

.special-set-offer .offer-badge {
  font-family: var(--jp) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  color: var(--ink) !important;
  margin-bottom:15px;
}

.special-set-offer__title {
  font-family: "Noto Serif JP", "Shippori Mincho", Georgia, serif !important;
  font-size: clamp(18px, 2vw, 23px) !important;
  font-weight: 550 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.03em !important;
  color: var(--ink) !important;
}

.offer-items-title,
.special-set-offer .offer-items-title {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
  text-align: center !important;
}

.offer-items-title small,
.special-set-offer .offer-items-title small {
  font-family: var(--jp) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
}

.special-set-offer .offer-item__number {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  color: #907693 !important;
}

.special-set-offer .offer-item__text {
  font-family: var(--jp) !important;
  font-size: 10px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.05em !important;
  color: #5f5662 !important;
}

.special-set-offer .price strong {
  font-family: "Noto Serif JP", "Shippori Mincho", serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: #403640 !important;
}

.special-set-offer .price span {
  font-family: var(--jp) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #403640 !important;
  letter-spacing: normal !important;
}

.offer-items,
.special-set-offer .offer-items {
  margin-bottom: 5px !important;
}

.price,
.special-set-offer .price {
  margin-top: 0 !important;
  margin-bottom: 13px !important;
}

@media (max-width: 900px) {
  .special-set img, .swiper-slide img, .slick-slide img {
    transform: none !important; transition: none !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-drag: none !important; pointer-events: auto;
  }
  .swiper-container, .swiper, .slick-slider, .special-set .slider-wrapper { touch-action: pan-y !important; }
}

/* =========================================================
   SPECIAL SET OFFER：サイズ崩れ解消 ＆ 超極薄シースルーベージュ
========================================================= */

/* 1. 「セット内容」タイトル部分（カードの上半部分） */
.offer-items-title,
.special-set-offer .offer-items-title {
  width: min(580px, 100%) !important;
  box-sizing: border-box !important;
  margin: 28px auto 0 auto !important;
  padding: 16px 20px 8px !important;
  text-align: center !important;
  
  /* 薄く透明感のある極薄ベージュ背景（rgbaで半透明化） */
  background: rgba(253, 251, 247, 0.4) !important;
  backdrop-filter: blur(4px) !important; /* ほんのり背景をぼかして高級感をプラス */
  
  /* 上・左・右の枠線を統一 */
  border-top: 1px solid rgba(220, 205, 188, 0.6) !important;
  border-left: 1px solid rgba(220, 205, 188, 0.6) !important;
  border-right: 1px solid rgba(220, 205, 188, 0.6) !important;
  border-bottom: none !important;
  
  border-top-left-radius: 1px !important;
  border-top-right-radius: 1px !important;
}

/* 「セット内容」テキスト */
.offer-items-title small,
.special-set-offer .offer-items-title small {
  font-family: var(--jp) !important;
  font-size: 12px !important;
  font-weight: 450 !important;
  letter-spacing: 0.12em !important;
  color: #4a384e !important;
}

/* 2. 内訳リスト部分（カードの下半部分・幅を上部と完全に一致） */
.offer-items,
.special-set-offer .offer-items {
  width: min(580px, 100%) !important;
  box-sizing: border-box !important;
  margin: 0 auto 28px auto !important;
  padding: 8px 24px 20px !important;
  
  /* 薄く透明感のある極薄ベージュ背景（rgbaで半透明化） */
  background: rgba(253, 251, 247, 0.3) !important;
  backdrop-filter: blur(4px) !important;
  
  /* 下・左・右の枠線を統一 */
  border-bottom: 1px solid rgba(220, 205, 188, 0.5) !important;
  border-left: 1px solid rgba(220, 205, 188, 0.5) !important;
  border-right: 1px solid rgba(220, 205, 188, 0.5) !important;
  border-top: none !important;
  
  border-bottom-left-radius: 1px !important;
  border-bottom-right-radius: 1px !important;
  
  box-shadow: 0 4px 18px rgba(120, 90, 60, 0.04) !important;
  text-align: left !important;
}

/* 3. 各内訳アイテム（実線ライン維持） */
.special-set-offer .offer-item {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  padding: 9px 0 !important;
}

.special-set-offer .offer-item:not(:last-child) {
  border-bottom: 1px solid rgba(225, 212, 198, 0.6) !important;
}

/* 4. 番号（01, 02...） */
.special-set-offer .offer-item__number {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: #9e784f !important;
  flex-shrink: 0 !important;
}

/* 5. 商品名テキスト（濃さと読みやすさを確保） */
.special-set-offer .offer-item__text {
  font-family: var(--jp) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.04em !important;
  color: #2b202e !important;
}

/* スマホ表示（767px以下）時の微調整 */
@media (max-width: 767px) {
  .offer-items-title,
  .special-set-offer .offer-items-title {
    margin-top: 20px !important;
    padding: 14px 16px 6px !important;
  }
  .offer-items,
  .special-set-offer .offer-items {
    padding: 4px 16px 16px !important;
    margin-bottom: 20px !important;
  }
  .special-set-offer .offer-item__text {
    font-size: 11px !important;
  }
}

/* 親要素のテキスト配置設定をリセットし、Flexboxで中央寄せ整列 */
.special-set-offer {
  /* 親要素に配置設定を維持 */
}

/* 横並びにするための共通ラッパー風処理（インラインフレックス化） */
.special-set-offer .offer-badge,
.special-set-offer .offer-produce {
  display: inline-flex !important;
  align-items: center !important; /* 上下の中央を完全に揃える */
  vertical-align: middle !important;
  
  /* 行高（line-height）の差によるズレを防ぐため統一 */
  line-height: 1 !important; 
  margin-top: 10px !important;
  margin-bottom: 12px !important; /* タイトルとの下の間隔 */
}

/* 「数量限定」バッジ側の余白調整 */
.special-set-offer .offer-badge {
  margin-right: 2px !important; /* 「高橋恭平プロデュース」との間の横幅間隔 */
}

/* 「高橋恭平プロデュース」側の余白・文字位置微調整 */
.special-set-offer .offer-produce {
  margin-right: 0 !important;
  padding-top: 3px !important; /* フォント特有の浮きを抑える微調整（必要に応じて0px〜2pxで調整可） */
}

/* =========================================================
   SPECIAL SET ＆ SPECIAL SET OFFER 統合最適化CSS
========================================================= */

/* 1. 外側背景グラデーションの一括適用（ライトグレージュ統一） */
.special,
.special-gift,
section.special-set-offer,
#special-set.special,
#special-set.special-set-offer,
section#special-set,
.special-flow-bg > .special-set-offer,
.special-flow-bg > .special-gift {
  background: linear-gradient(145deg, #f8f5f0 0%, #f1ebf1 50%, #eae2d7 100%) !important;
}

/* 2. 境目や隙間の微調整・ピンクグラデーション・擬似要素の排除 */
.special,
.special-set-offer {
  margin-top: 0 !important;
}

.special-gift {
  margin-bottom: 0 !important;
}

.special-flow-bg > .special-set-offer {
  background-image: none !important;
}

.special::before,
.special::after,
.special-gift::after,
.special-set-offer::before,
#special-set::before,
#special-set::after {
  display: none !important;
  background: none !important;
}

/* 3. 親セクション（.special）全体の共通設定 */
.special {
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding-top: clamp(52px, 9vw, 92px) !important;
}

section.special-set-offer {
  padding-bottom: 72px !important;
}

/* 4. タイトル＆テキスト装飾（見出し・「4」のシャンパンゴールド） */
.special .kicker {
  display: inline-block !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  color: #8c788f !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.special h2 {
  font-family: "Noto Serif JP", "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: clamp(24px, 3.6vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.09em !important;
  color: #2c222e !important;
  margin: 0 auto !important;
}

.special h2 .num {
  font-family: inherit !important;
  font-size: 1.08em !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #c2a173 0%, #a88352 50%, #826035 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  vertical-align: baseline !important;
  margin-right: 1px !important;
}

/* 5. 内側のホワイトオファーカード本体（div.special-set-offer） */
div.special-set-offer {
  margin-top: 54px !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  padding: 48px 5.5% 36px !important;
  border-radius: 1px !important; /* ※直近の変更値(1px)を優先保持 */
  box-shadow: 0 10px 30px rgba(80, 60, 85, 0.05) !important;
}

/* 6. スマホ表示時（767px以下）のレスポンシブ設定を一括集約 */
@media (max-width: 767px) {
  .special {
    padding-top: 44px !important;
  }
  .special .kicker {
    font-size: 13px !important;
    letter-spacing: 0.26em !important;
    margin-bottom: 10px !important;
  }
  .special h2 {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }
  div.special-set-offer {
    margin-top: 36px !important;
    padding: 32px 18px 28px !important;
  }
  section.special-set-offer {
    padding-bottom: 48px !important;
  }
}


/* DESIGN FILM & OTHER SETTINGS */
.design-film__intro-inner{ opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s ease; }
.design-film__intro.is-entered .design-film__intro-inner{ opacity:1; transform:translateY(0); filter:blur(0); }
.design-film__kicker,.design-film__intro-title{ opacity:0; transform:translateY(18px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.design-film__intro.is-entered .design-film__kicker{opacity:1;transform:none;transition-delay:.15s}
.design-film__intro.is-entered .design-film__intro-title{opacity:1;transform:none;transition-delay:.38s}
.design-film__camera{ opacity:0; transform:translate(-50%,-50%) scale(.92); transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1); }
.design-film.is-entered .design-film__camera{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media(prefers-reduced-motion:reduce){
 .design-film__intro-inner,.design-film__kicker,.design-film__intro-title,.design-film__camera{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}

@media (min-width: 769px){
  body{
    background:
      radial-gradient(ellipse at 12% 35%,rgba(199,179,213,.38),transparent 48%),
      radial-gradient(ellipse at 88% 65%,rgba(218,204,195,.32),transparent 50%),
      linear-gradient(110deg,#e8dced 0%,#f3edf5 42%,#f7f1ec 70%,#e6d8df 100%) !important;
    background-attachment: fixed;
  }
}

button, .btn, .cta, [class*="btn"], [class*="button"]{
  background-image:linear-gradient(135deg,#b996c9 0%,#a77db9 48%,#c08e9b 100%);
}

.float-cta{
  background:linear-gradient(135deg,#d9cbbf 0%,#c8b7a9 100%) !important;
  background-image:linear-gradient(135deg,#d9cbbf 0%,#c8b7a9 100%) !important;
}

.float-cta a{
  background-image:linear-gradient(135deg,#b996c9 0%,#a77db9 48%,#c08e9b 100%) !important;
}

.design-film__transition-line{ display:none !important; }
.design-film__side-label{ top:7vh !important; bottom:auto !important; font-size:16px !important; letter-spacing:.34em !important; }

@media(max-width:900px){
  .design-film__bottle{ width:220px !important; height:430px !important; }
  .design-film__side-label{ top:7vh !important; font-size:14px !important; }
}
@media(max-width:480px){
  .design-film__bottle{ width:190px !important; height:370px !important; }
  .design-film__side-label{ top:7vh !important; font-size:14px !important; }
}

@media (min-width: 901px){
  .design-film__intro{ padding-top:clamp(72px, 9vh, 118px); }
  .design-film__intro-title{ font-size:clamp(24px, 2.5vw, 34px); line-height:1.5; font-weight: 500 ;}
  .design-film__intro-copy{ margin-top:22px; }
  .design-film__camera{ top:58%; }
}

@media (min-width: 901px) and (max-height: 820px){
  .design-film__camera{ top:60%; width:min(31vw, 390px); height:min(58vh, 580px); }
  .design-film__bottle{ width:270px; height:530px; }
  .design-film__intro{ padding-top:60px; }
  .design-film__intro-title{ font-size:clamp(23px, 2.3vw, 30px); font-weight: 500 ; }
}

@media (min-width: 901px){ .design-film__camera{ top:30%; } }
@media (min-width: 901px) and (max-height: 820px){ .design-film__camera{ top:32%; } }

.design-film__camera{width:min(30vw,380px);height:min(60vh,600px);}
.design-film__bottle{width:250px;height:490px;}
.design-film__copy{z-index:40;}
@media (min-width:901px) and (max-height:820px){ .design-film__camera{width:min(28vw,350px);height:min(56vh,560px);} .design-film__bottle{width:230px;height:450px;} }
@media (max-width:900px){ .design-film__camera{width:100%;height:64vh;} .design-film__bottle{width:220px;height:430px;} }
@media (max-width:480px){ .design-film__camera{height:60vh;} .design-film__bottle{width:195px;height:380px;} }

.design-film{ height:6200px !important; min-height:0 !important; background:#f8f5f8 !important; }
.design-film__sticky{
  position:sticky !important; top:0 !important; width:100% !important;
  height:760px !important; min-height:760px !important; max-height:760px !important;
  overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
.design-film__camera{ width:380px !important; height:600px !important; left:50% !important; top:45% !important; }
.design-film__bottle{ width:250px !important; height:490px !important; left:50% !important; top:45% !important; }
.design-film__copy{ left:clamp(24px,calc(50% - 330px),115px) !important; top:38% !important; width:300px !important; transform:translateY(calc(-50% + var(--copy-y,25px))) !important; }

#designCopy03{ left: 7% !important; right: auto !important; }
.design-film__copy--right{ left: 65% !important; right: auto !important; }
.design-film__annotation{ left:50% !important; top:45% !important; }
.design-film__side-label{top:72px !important;}
.design-film__turn{bottom:150px !important;}

@media(max-width:900px){
  .design-film__annotation-line, .design-film__annotation-dot { display: none !important; }
  .design-film__annotation {
    position: absolute !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    pointer-events: none !important; border: none !important; background: transparent !important; box-shadow: none !important;
  }
  .design-film__annotation[style*="opacity: 1"]::before,
  .design-film__annotation[style*="opacity:1"]::before {
    content: "" !important; position: absolute !important; inset: 0 !important;
    border: 1.5px solid #55475a !important; border-radius: 3px !important;
    clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    animation: strokeSquareLoop 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  }
  .design-film__annotation::after { display: none !important; }
  #annotationEngraving { top: 57% !important; width: 140px !important; height: 60px !important; }
  #annotationGradient { top: 50% !important; width: 170px !important; height: 280px !important; }
  #annotationCharacter { top: 47% !important; width: 140px !important; height: 220px !important; }

  .design-film__copy, .design-film__copy--right, #designCopy01, #designCopy02, #designCopy03 {
    left: 50% !important; right: auto !important; top: 76% !important; width: min(90vw, 340px) !important;
    transform: translate(-50%, calc(-50% + var(--copy-y, 25px))) !important; text-align: center !important;
  }
}

@keyframes strokeSquareLoop {
  0% { clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
  25% { clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 0% 0%, 50% 0%); }
  60% { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); }
  100% { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); }
}

@media(max-width:480px){
  .design-film{height:6200px !important;}
  .design-film__sticky{height:760px !important;min-height:760px !important;max-height:760px !important;}
  .design-film__camera{width:290px !important;height:520px !important;}
  .design-film__bottle{width:195px !important;height:380px !important;}
}

#annotationCharacter.is-fixed::before {
  animation: none !important;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%) !important;
  opacity: 1 !important;
}
#annotationCharacter.is-fixed .design-film__annotation-line { opacity: 1 !important; }

.brand-about-mobile-visual{display:none;}
@media(max-width:767px){
  .brand-about-mobile-visual{
    display:block; width:100%; aspect-ratio:16 / 7; overflow:hidden; margin:18px 0 24px;
  }
  .brand-about-mobile-visual img{
    display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  }
}

.design-film__intro-title{ transform:translateY(-5%) !important; font-weight: 500 ; }
.design-film__copy{ top:40% !important; }
@media(max-width:900px){ .design-film__copy{top:17% !important;} }

@media (hover:none) and (pointer:coarse){
  .special-carousel .special-card .product-image{overflow:hidden;}
  .special-carousel .special-card .product-image img{
    display:block !important; transform:scale(1) !important; transform-origin:center center !important;
    transition:transform .45s ease, filter .45s ease !important;
  }
  .special-carousel .special-card .product-image img.touch-expanded{
    transform:scale(1.08) !important; filter:brightness(1.06) !important;
  }
}

.purchase-form-section { padding: 80px 5.5% 120px; background: #ffffff; }
.purchase-form-inner { max-width: 760px; margin: 0 auto; }

.fragrance-story__intro .fragrance-story__eyebrow,
.fragrance-story__intro h2,
.fragrance-story__intro .fragrance-story__sub,
.fragrance-story__intro > p:last-child {
  opacity: 0 !important; transform: translateY(18px) !important;
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1) !important;
}

.fragrance-story__intro .fragrance-story__eyebrow.is-scent-visible,
.fragrance-story__intro h2.is-scent-visible,
.fragrance-story__intro .fragrance-story__sub.is-scent-visible,
.fragrance-story__intro > p:last-child.is-scent-visible {
  opacity: 1 !important; transform: translateY(0) !important;
}

.pyramid-img {
  opacity: 0 !important; transform: translateY(18px) scale(0.98) !important;
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1) !important;
}
.pyramid-img.is-active-img { opacity: 1 !important; transform: translateY(0) scale(1) !important; }

.fragrance-notes {
  opacity: 0 !important; transform: translateX(18px) !important;
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1) !important;
}
.fragrance-layer.is-active .fragrance-notes { opacity: 1 !important; transform: translateX(0) !important; }

.fragrance-note {
  opacity: 0 !important; transform: translateX(10px) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
.fragrance-layer.is-active .fragrance-note { opacity: 1 !important; transform: translateX(0) !important; }
.fragrance-layer.is-active .fragrance-note:nth-child(1) { transition-delay: 0.1s !important; }
.fragrance-layer.is-active .fragrance-note:nth-child(2) { transition-delay: 0.2s !important; }
.fragrance-layer.is-active .fragrance-note:nth-child(3) { transition-delay: 0.3s !important; }

.fragrance-line { transition: transform 0.5s cubic-bezier(.22, 1, .36, 1) !important; }
.fragrance-layer--top.is-active .fragrance-line { transition-delay: 0.05s !important; }
.fragrance-layer--middle.is-active .fragrance-line { transition-delay: 0.15s !important; }
.fragrance-layer--last.is-active .fragrance-line { transition-delay: 0.25s !important; }

.design-film__intro-inner, .design-film__kicker, .design-film__intro-title { transform: none !important; filter: none !important; }
.design-film__intro.is-entered .design-film__kicker,
.design-film__intro.is-entered .design-film__intro-title { transition-delay: 0s !important;  font-weight: 500 ;}

@media (min-width: 901px) {
  .design-film__camera, .design-film__bottle { top: 53% !important; }
  .design-film__annotation { top: 59% !important; }
  .design-film__copy, .design-film__copy--right, #designCopy01, #designCopy02, #designCopy03 { top: 50% !important; }
  .design-film__turn { bottom: 80px !important; }
}

@media (max-width: 900px) {
  .design-film__copy, .design-film__copy--right { line-height: 1.2 !important; }
  .design-film__number, .design-film__en { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; line-height: 1 !important; font-weight: 450 ; }
  .design-film__number { margin-right: 6px !important; }
  .design-film__en { position: relative !important; top: 3px !important; font-weight: 450 ; }
  .design-film__title { white-space: nowrap !important; font-size: 14px !important; font-weight: 500 ; margin-top: 6px !important; margin-bottom: 6px !important; line-height: 1.3 !important; }
  .design-film__title br { display: none !important; }
}

.zoom-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: transparent !important; z-index: 9998; opacity: 0; pointer-events: none;
}
.zoom-overlay.is-active { opacity: 1; pointer-events: auto; }

.special-card .product-image img.touch-expanded {
  position: relative !important; z-index: 9999 !important;
  transform: scale(1.15) !important; transition: transform 0.2s ease-out !important;
}

@media (max-width: 900px) {
  .design-film__bottle, #designBottle { filter: none !important; -webkit-filter: none !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }
  .design-film__bottle img, #designBottle img { filter: none !important; mix-blend-mode: normal !important; }
}

/* =========================================================
   DESIGN FILM：SCROLL 誘導指示マーク（右上配置版）
========================================================= */
.design-film__scroll-indicator {
  position: absolute;
  top: 40px; /* 下(bottom)から上(top)に変更 */
  right: clamp(20px, 4vw, 50px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.design-film__scroll-text {
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #907693;
  writing-mode: horizontal-tb;
  text-align: center;
}

.design-film__scroll-line {
  width: 1px;
  height: 48px;
  background: rgba(144, 118, 147, 0.3);
  position: relative;
  overflow: hidden;
}

.design-film__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #907693;
  animation: designScrollLineMove 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: top;
}

@keyframes designScrollLineMove {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* スマホ表示時（右上位置・サイズの微調整） */
@media (max-width: 767px) {
  .design-film__scroll-indicator {
    top: 24px;
    right: 20px;
  }
  .design-film__scroll-text {
    font-size: 9px;
    letter-spacing: 0.25em;
  }
  .design-film__scroll-line {
    height: 38px;
  }
}

/* =========================================================
   DESIGN FILM：ベース維持 ＋ 02枠線のみ気持ち上へ調整
========================================================= */

/* 画面高さが低い端末（iPhone SE / 小さめAndroid）向け */
@media screen and (max-height: 740px) and (max-width: 900px) {
  /* ベース位置調整（維持） */
  .design-film__sticky {
    top: -6vh !important;
  }

  /* FRONT / BACK テキストの位置（維持） */
  .design-film__side-label {
    top: 14vh !important;
  }

  /* SCROLL指示マークの位置（維持） */
  .design-film__scroll-indicator {
    top: 26% !important;
    right: 10% !important;
    bottom: auto !important;
  }

  /* テキスト説明文の位置（維持） */
  .design-film__copy,
  .design-film__copy--right,
  #designCopy01,
  #designCopy02,
  #designCopy03 {
    top: 74% !important;
  }

  /* ★ 02（グラデーション）の枠線のみ気持ち上（50% → 48% 付近）へ移動 */
  #annotationGradient {
    top: 49% !important;
  }
}

/* 画面高さ 670px 以下の超小画面端末向け */
@media screen and (max-height: 670px) and (max-width: 900px) {
  /* ベース位置調整（維持） */
  .design-film__sticky {
    top: -10vh !important;
  }

  /* FRONT / BACK テキストの位置（維持） */
  .design-film__side-label {
    top: 17vh !important;
  }

  /* SCROLL指示マークの位置（維持） */
  .design-film__scroll-indicator {
    top: 28% !important;
    right: 8% !important;
    bottom: auto !important;
  }

  /* テキスト説明文の位置（維持） */
  .design-film__copy,
  .design-film__copy--right,
  #designCopy01,
  #designCopy02,
  #designCopy03 {
    top: 74% !important;
  }

  /* ★ 02（グラデーション）の枠線のみ気持ち上（50% → 46% 付近）へ移動 */
  #annotationGradient {
    top: 48% !important;
  }
}

/* =========================================================
   BRAND-ABOUT 〜 MOVIE セクション間の余白短縮
========================================================= */

/* 1. 上のセクション（brand-about）の下側余白を詰める */
.brand-about,
.about-brand,
#brand-about {
  padding-bottom: 24px !important; /* 元の余白から大幅に縮小 */
  margin-bottom: 0 !important;
}

/* 2. 下のセクション（movie）の上側余白を詰める */
.movie {
  padding-top: 16px !important; /* さらにギュッと近接化 */
}

/* スマホ表示時（767px以下）の微調整 */
@media (max-width: 767px) {
  .brand-about,
  .about-brand,
  #brand-about {
    padding-bottom: 16px !important;
  }
  .movie {
    padding-top: 12px !important;
  }
}

/* =========================================================
   MOVIEセクション：COMMENT MOVIE タイトルスタイル
========================================================= */

/* タイトルブロック全体のレイアウト */
.movie-header {
  text-align: center !important;
  margin-bottom: 24px !important; /* 動画との間の余白 */
}

/* COMMENT MOVIE 見出しテキスト（brand-about と完全同等設定） */
.movie-eyebrow {
  font-family: var(--serif) !important; /* セリフ体フォント */
  font-size: 11px !important;
  letter-spacing: 0.25em !important;    /* 広めのレタースペース */
  color: var(--gold, #a88d68) !important; /* ブランドのメイン英字カラー */
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* スマホ表示時（767px以下）の微調整 */
@media (max-width: 767px) {
  .movie-header {
    margin-bottom: 18px !important;
  }
  .movie-eyebrow {
    font-size: 10px !important;
  }
}

/* =========================================================
   MOVIEセクション：左右余白 ＆ 右下停止ボタン配置
========================================================= */

/* 1. 動画エリア全体の左右余白設定 */
.movie {
  padding: 60px 7.5% !important; /* 上下60px、左右7.5%の余白を確保 */
  background: #18131b !important;
}

.movie-container {
  max-width: 760px !important;    /* LPコンテンツ幅に揃える */
  margin: 0 auto !important;
}

.movie-box {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 4px !important;  /* 角を少し丸めて上品な印象に */
  background: #000000 !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
}

/* 動画本体 */
.movie-box video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

/* 2. スタートボタン（初期：中央配置） */
.movie-box #muteToggleBtn,
.movie-box .play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 50% !important;
  background: rgba(35, 28, 40, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.movie-box #muteBtnText {
  position: relative !important;
  z-index: 101 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  margin-left: 3px !important;  /* ▶の位置を中央調整 */
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 3. 動画再生中：ボタンを右下に移動＆小サイズ化（停止ボタン化） */
.movie-box.is-playing #muteToggleBtn,
.movie-box.is-playing .play-btn {
  top: auto !important;
  bottom: 16px !important;
  left: auto !important;
  right: 16px !important;
  transform: none !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.movie-box.is-playing #muteBtnText {
  font-size: 14px !important;
  margin-left: 0 !important;   /* ❚❚の位置調整 */
}

/* スマホ表示時の余白調整 */
@media (max-width: 767px) {
  .movie {
    padding: 40px 5.5% !important; /* スマホ用余白 */
  }
  
  .movie-box #muteToggleBtn,
  .movie-box .play-btn {
    width: 60px !important;
    height: 60px !important;
  }
  
  .movie-box #muteBtnText {
    font-size: 20px !important;
  }
}

/* =========================================================
   MOVIEセクション：背景色を brand-about（#faf8fb）と同色へ変更
========================================================= */

/* 1. セクション全体の背景色を #faf8fb に統一 */
.movie {
  background: #faf8fb !important;
}

/* 2. 動画枠カードのデザイン調整（背景が明るくなるため影と枠線を最適化） */
.movie-box {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 18px 45px rgba(77, 47, 88, 0.08) !important;
}

/* 3. 動画下注釈テキストの文字色調整（明るい背景で見やすいトーンへ） */
.movie-note {
  color: var(--muted) !important; /* または #756c78 */
  margin: 12px 0 0 0 !important;
  text-align: center !important;
  font-family: var(--jp) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.6 !important;
}

/* スマホ表示時（767px以下）の微調整 */
@media (max-width: 767px) {
  .movie-note {
    margin-top: 10px !important;
    font-size: 9px !important; /* スマホ画面に合わせて少し控えめに */
  }
}

/* =========================================================
   MOVIEセクション： z-index調整 & 上部余白短縮
========================================================= */

/* 1. 再生ボタンの重なり順を下げ、フローティングボタンの下へ配置 */
.movie-box #muteToggleBtn,
.movie-box .play-btn {
  z-index: 5 !important; /* フローティングボタン(通常 z-index: 90〜100以上)より低い数値へ変更 */
}

.movie-box #muteBtnText {
  z-index: 6 !important;
}

/* 2. MOVIEセクション上部の余白を短縮 */
.movie {
  padding-top: 25px !important; /* 元の 60px から半分程度に短縮 */
}

/* 3. COMMENT MOVIE タイトルブロック上の不要な余白をカット */
.movie-header {
  margin-top: 0 !important;
  margin-bottom: 16px !important; /* 動画本体との間の余白も少しスリム化 */
}

/* スマホ表示時（767px以下）の微調整 */
@media (max-width: 767px) {
  .movie {
    padding-top: 18px !important; /* スマホ表示時はさらにキュッと縮小 */
  }
}

/* =========================================================
   【決定版】上下オファーボタン：完全物理幅同期設定
========================================================= */

/* 1. 全端末共通の基本スタイル設定 */
.compact-offer__btn,
.special-set-offer .cta,
.special-set-offer a.cta {
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background-image: linear-gradient(135deg, #b996c9 0%, #a77db9 48%, #c08e9b 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: var(--jp) !important;
  box-shadow: 0 18px 40px rgba(119,89,130,.40) !important;
  overflow: hidden !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}

.compact-offer__btn:hover,
.special-set-offer .cta:hover,
.special-set-offer a.cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 50px rgba(119,89,130,.5) !important;
}

/* 2. PC表示（768px以上）：上下ともに絶対値「520px」で物理同期 */
@media (min-width: 768px) {
  .compact-offer__btn,
  .special-set-offer .cta,
  .special-set-offer a.cta {
    width: 100% !important;
    max-width: 520px !important;        /* 上下とも520pxでピタリ揃える */
    height: 66px !important;            /* 高さ固定 */
    padding: 0 24px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    margin: 0 auto 20px auto !important;
  }
}

/* 3. スマホ表示（767px以下）：カード枠内に収まる「320px」で物理同期 */
@media (max-width: 767px) {
  .compact-offer__btn,
  .special-set-offer .cta,
  .special-set-offer a.cta {
    width: 100% !important;
    max-width: 320px !important;        /* スマホ画面で確実にはみ出さない320px固定 */
    height: 60px !important;            /* 高さ固定 */
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    margin: 0 auto 16px auto !important;
  }
}

/* 4. ボタン内テキスト・矢印の共通設定 */
.compact-offer__btn span,
.special-set-offer .cta::after,
.special-set-offer a.cta::after {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}


/* =========================================================
   【極限滑らか版】CTA：シルク拡大 ＆ 均一で滑らかな光エフェクト
========================================================= */

/* --- 1. ボタン本体 --- */
.compact-offer__btn,
.special-set-offer .cta,
.special-set-offer a.cta {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform-origin: center center !important;
  will-change: transform, box-shadow !important;

  /* 超滑らかな 4.2秒周期アニメーション */
  animation: ctaLuxuryScale 4.2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- 2. 光の帯（上下共通・干渉回避） --- */
.compact-offer__btn::before,
.special-set-offer .cta::before,
.special-set-offer a.cta::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 50% !important;
  height: 100% !important;

  /* 上品で美しいホワイトグラデーション */
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 35%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.25) 65%,
    rgba(255, 255, 255, 0) 100%
  ) !important;

  pointer-events: none !important;
  z-index: 2 !important;
  transition: none !important;
  will-change: transform, opacity !important;

  /* 拡大と完全同期した滑らかな光アニメーション */
  animation: ctaLuxuryLight 4.2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- 3. 拡大キーフレーム（ポイントを最小限にしてなめらかに補間） --- */
@keyframes ctaLuxuryScale {
  0% {
    transform: scale3d(1, 1, 1);
    box-shadow: 0 18px 40px rgba(119, 89, 130, 0.28);
  }
  38% {
    transform: scale3d(1.025, 1.025, 1); /* ピーク時：最大2.5%拡大 */
    box-shadow: 0 22px 48px rgba(119, 89, 130, 0.38);
  }
  75% {
    transform: scale3d(1, 1, 1);
    box-shadow: 0 18px 40px rgba(119, 89, 130, 0.28);
  }
  100% {
    transform: scale3d(1, 1, 1);
    box-shadow: 0 18px 40px rgba(119, 89, 130, 0.28);
  }
}

/* --- 4. 光移動キーフレーム（均一な速度とフェードイン・アウト） --- */
@keyframes ctaLuxuryLight {
  0% {
    transform: translate3d(-180%, 0, 0) skewX(-20deg);
    opacity: 0;
  }
  12% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translate3d(240%, 0, 0) skewX(-20deg);
    opacity: 1;
  }
  62% {
    opacity: 0;
  }
  100% {
    transform: translate3d(240%, 0, 0) skewX(-20deg);
    opacity: 0;
  }
}

/* --- 5. ホバー時制御 --- */
.compact-offer__btn:hover,
.special-set-offer .cta:hover,
.special-set-offer a.cta:hover {
  animation: none !important;
  transform: translateY(-1px) scale(1.01) !important;
}

.compact-offer__btn:hover::before,
.special-set-offer .cta:hover::before,
.special-set-offer a.cta:hover::before {
  animation: none !important;
  left: 0 !important;
}

/* --- 6. 下部オファーの矢印（→）のみ削除 --- */
.special-set-offer .cta::after,
.special-set-offer a.cta::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   PC専用：サイドバー Oswaldフォント適用 ＆ 一文レイアウト
========================================================= */
@media (min-width: 769px) {
  /* テキスト全体のフォントを Oswald に指定 */
  .site-side-type__track span {
    display: block !important;
    font-size: clamp(24px,3.4vw,46px)!important;
    font-family: 'Oswald', sans-serif !important; /* フォント変更 */
    font-weight: 450 !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    white-space: nowrap !important; /* 改行を強制禁止 */
    letter-spacing: 0.04em !important; /* 縦長フォント用の文字間隔調整 */
    line-height: 1 !important;
  }

  /* ロゴ画像：テキストと同ラインで90度回転して配置 */
  .side-logo-img {
    display: inline-block !important;
    width: auto !important;
    height: 0.99em !important;             /* Oswaldフォントの高さに合わせた調整 */
    opacity: 0.35 !important; /* 不透明度を設定（0.0が完全透明、1.0が通常） */
    transform: rotate(90deg) !important;  /* 横書きロゴを右に90度回転 */
    transform-origin: center center !important;
    vertical-align: middle !important;
    margin: 59px 27px 98px 0!important;            /* 「× KYOHEI TAKAHASHI」との間の余白 */
    pointer-events: none !important;
    user-select: none !important;
  }
}

/* =========================================================
   スマホ専用：最下部コンパクトオファー 完全構造修正版
   （バッジ間隔調整 ＆ 画像130px拡大）
========================================================= */
@media (max-width: 768px) {
  /* 1. 外枠を4行×2列の明確なGrid構造に定義（右側画像を130pxに変更） */
  .offer--compact:last-of-type .compact-offer__body,
  .offer--bottom-compact .compact-offer__body {
    display: grid !important;
    grid-template-columns: 1fr 130px !important; /* ★右側画像を130pxに拡大 */
    grid-template-rows: auto auto auto auto !important;
    gap: 0 12px !important;
    align-items: start !important;
  }

  /* 2. 中間のinfo枠の制約を完全に消滅させ、子要素をGrid直下扱いにする */
  .offer--compact:last-of-type .compact-offer__info,
  .offer--bottom-compact .compact-offer__info {
    display: contents !important;
  }

  /* --- Row 1 (1行目): 数量限定バッジ（左） ----------------- */
  .offer--compact:last-of-type .compact-offer__offer-badge,
  .offer--bottom-compact .compact-offer__offer-badge,
  .offer--compact:last-of-type [class*="offer-badge"],
  .offer--bottom-compact [class*="offer-badge"] {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    display: inline-block !important;
    width: fit-content !important;
    padding: 2px 8px !important;
    margin: 0 0 6px 0 !important; /* ★商品名との間隔を6pxに少し調整 */
    white-space: nowrap !important;
  }

  /* --- Row 2 (2行目): 商品名・タイトル（左） --------------- */
  .offer--compact:last-of-type .compact-offer__title,
  .offer--bottom-compact .compact-offer__title {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    margin: 0 0 4px 0 !important;
  }

  /* --- Row 3 (3行目): 価格（左・商品名のすぐ下） ----------- */
  .offer--compact:last-of-type .compact-offer__price-box,
  .offer--bottom-compact .compact-offer__price-box {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    margin: 0 0 8px 0 !important;
  }

  /* --- Row 1〜3 右側: 商品画像（130px） -------------------- */
  .offer--compact:last-of-type .compact-offer__image,
  .offer--bottom-compact .compact-offer__image {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 4 !important;
    width: 100% !important;
  }

  /* --- Row 4 (4行目・最下段): セット内容（100%全幅） -------- */
  .offer--compact:last-of-type .compact-offer__detail,
  .offer--bottom-compact .compact-offer__detail {
    grid-column: 1 / 3 !important; /* 1列目から2列目（画像の下）まで横幅全域に広げる */
    grid-row: 4 / 5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
    
    font-size: 10.5px !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.15) !important;
  }

  /* 「【セット内容】」の見出しを表示 */
  .offer--compact:last-of-type .compact-offer__detail::before,
  .offer--bottom-compact .compact-offer__detail::before {
    content: "【セット内容】" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: #C7B3D5 !important;
    margin-bottom: 4px !important;
  }

  /* 1行ずつ縦並びにするため改行（br）を有効化 */
  .offer--compact:last-of-type .compact-offer__detail br,
  .offer--bottom-compact .compact-offer__detail br {
    display: block !important;
  }
}

/* =========================================================
   PCのみ改行（スマホでは改行をキャンセル）
========================================================= */

/* デフォルト（スマホ表示時）：改行を無効化 */
.pc-only {
  display: none !important;
}

/* PC表示時（768px以上）：改行を有効化 */
@media (min-width: 768px) {
  .pc-only {
    display: inline !important;
  }
}

/* =========================================================
   スマホのみ改行（PCでは改行をキャンセル）
========================================================= */

/* デフォルト（PC表示時）：改行を無効化 */
.sp-only {
  display: none !important;
}

/* スマホ表示時（767px以下）：改行を有効化 */
@media (max-width: 767px) {
  .sp-only {
    display: inline !important;
  }
}


/* =========================================================
   【微調整版】行間をわずかに拡張 ＆ ボタン縦幅の絶妙なバランス調整（鈴アイコン中心補正済）
========================================================= */

/* 1. ボタン本体：内側の上下パディングと行間をわずかに広げる */
.cta--line,
.compact-offer__btn.cta--line,
.special-set-offer .cta.cta--line,
.special-set-offer a.cta.cta--line,
a.compact-offer__btn.cta--line {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  
  /* 行間をわずかに広げて可読性を向上 */
  line-height: 1.25 !important;
  gap: 0px !important;
  padding: 16px 18px !important;
  height: auto !important;
  text-decoration: none !important;
  cursor: pointer !important;
  
  /* アニメーション・背景・シャドウ（完全維持） */
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform-origin: center center !important;
  will-change: transform, box-shadow !important;
  animation: ctaLuxuryScale 4.2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-image: linear-gradient(135deg, #b996c9 0%, #a77db9 48%, #c08e9b 100%) !important;
  box-shadow: 0 18px 40px rgba(119, 89, 130, 0.35) !important;
}

/* 2. 光の流れエフェクト（::before ＋ ctaLuxuryLight 完全維持） */
.cta--line::before,
.compact-offer__btn.cta--line::before,
.special-set-offer .cta.cta--line::before,
.special-set-offer a.cta.cta--line::before,
a.compact-offer__btn.cta--line::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 35%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.25) 65%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: none !important;
  will-change: transform, opacity !important;
  animation: ctaLuxuryLight 4.2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 3. 1行目：日付バッジ（下部マージンをわずかに広げる） */
.cta--line .cta__date {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: #7d5a8c !important;
  font-family: var(--jp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important; /* 隙間を適度に確保 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
}

/* 4. 2行目：注釈（※予定数量無くなり次第終了） */
.cta--line .cta__sub {
  font-family: var(--jp) !important;
  font-size: 9.5px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important; /* 隙間を適度に確保 */
  padding: 0 !important;
  display: block !important;
}

/* 5. 3行目：メインテキスト（LINEで予約開始通知を受け取る） */
.cta--line .cta__main {
  font-family: var(--jp) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

/* 鈴マーク（SVG中心補正済み）の設置 */
.cta--line .cta__main::before {
  content: "" !important;
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* 6. PC表示時（768px以上）：最小高さを90pxへ広げてゆったり配置 */
@media (min-width: 768px) {
  .cta--line,
  .compact-offer__btn.cta--line,
  .special-set-offer .cta.cta--line,
  .special-set-offer a.cta.cta--line,
  a.compact-offer__btn.cta--line {
    width: 100% !important;
    max-width: 520px !important;
    min-height: 90px !important; /* ボタン縦幅を少し拡大 */
    padding: 16px 22px !important;
    margin: 0 auto 20px auto !important;
  }

  .cta--line .cta__date {
    font-size: 13px !important;
    padding: 3px 12px !important;
    margin-bottom: 5px !important;
  }
  .cta--line .cta__sub {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .cta--line .cta__main {
    font-size: 16.5px !important;
  }
}

/* 7. スマホ表示時（767px以下）：最小高さを78pxへ広げてゆったり配置 */
@media (max-width: 767px) {
  .cta--line,
  .compact-offer__btn.cta--line,
  .special-set-offer .cta.cta--line,
  .special-set-offer a.cta.cta--line,
  a.compact-offer__btn.cta--line {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 78px !important; /* ボタン縦幅を少し拡大 */
    padding: 13px 14px !important;
    margin: 0 auto 16px auto !important;
  }

  .cta--line .cta__date {
    font-size: 11.5px !important;
    padding: 2px 8px !important;
    margin-bottom: 3px !important;
  }
  .cta--line .cta__sub {
    font-size: 9px !important;
    margin-bottom: 3px !important;
  }
  .cta--line .cta__main {
    font-size: 13.5px !important;
  }
}

/* 4. 右側ボタン（文字の前に鈴アイコンを表示する設定を追加） */
.float-cta .float-cta__btn {
  padding: 12px 22px !important;
  background-image: linear-gradient(135deg, #b996c9 0%, #a77db9 48%, #c08e9b 100%) !important;
  box-shadow: 0 18px 40px rgba(119,89,130,.40) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important; /* 鈴と文字の間隔 */
  flex-shrink: 0 !important;
}

/* 鈴マーク（SVG中心補正済み）の設置 */
.float-cta .float-cta__btn::before {
  content: "" !important;
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* =========================================================
   offer--compact 専用
   スマホ・Android/iPhone：画面幅に完全追従
   ※PC・SPECIAL SETには影響させない
========================================================= */

@media screen and (max-width: 767px) {

  /* -------------------------------------------------------
     offer--compact のボタン（.cta）を対象
  ------------------------------------------------------- */
  .offer--compact .cta,
  .offer--bottom-compact .cta {

    /* 横幅設定 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-width: 0 !important;

    /* 高さは内部テキストに合わせて自動調整（固定高さを解除してはみ出しを防止） */
    height: auto !important;
    min-height: 60px !important;

    /* パディング・マージン */
    padding: 10px 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* Android等での縮小時にも確実に収める */
    box-sizing: border-box !important;
    text-decoration: none !important;

    /* アニメーションの基準点・GPU描画有効化 */
    transform-origin: center center !important;
    will-change: transform, box-shadow !important;
  }

  /* ボタン内部の各要素のテキスト整列 */
  .offer--compact .cta__date,
  .offer--compact .cta__sub,
  .offer--compact .cta__main {
    display: block !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  /* -------------------------------------------------------
     offer--compact 内部の親幅による横はみ出し防止
  ------------------------------------------------------- */
  .offer--compact .compact-offer__body,
  .offer--bottom-compact .compact-offer__body {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================
   非常に狭いスマホ用（360px以下）
   見切れ防止・文字サイズ調整
========================================================= */

@media screen and (max-width: 360px) {

  .offer--compact .cta,
  .offer--bottom-compact .cta {
    width: calc(100% - 20px) !important;
    padding: 8px 12px !important;
  }

  .offer--compact .cta__date {
    font-size: 11px !important;
  }

  .offer--compact .cta__sub {
    font-size: 10px !important;
  }

  .offer--compact .cta__main {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
  }
}

/* ==========================================
   LP コピーガード スタイル (CSS)
   ========================================== */

/* 1. ページ全体でテキスト・要素の選択を禁止 */
body, body * {
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE / Edge */
  user-select: none;         /* 標準 */
}

/* 2. 画像のドラッグ＆ドロップ禁止 */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none; /* マウス操作を無効化 */
}

/* 3. フォーム要素の例外処理（文字入力できるようにする） */
input, textarea {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  pointer-events: auto !important;
}

/* 4. 印刷・PDF化のブロック設定 */
@media print {
  body {
    display: none !important; /* 印刷時は画面全体を非表示 */
  }
}