@charset "utf-8";
/* =========================================================
   超小型工業用内視鏡 価格改定前キャンペーン（2026年10月）LP 専用
   /campaign/endoscope-202610 でのみ読み込む。スタイルは .e-page 配下に閉じる。
   白地のまま、動き・大きな数字・金のきらめきで迫力を出す。
   色：墨（文字・数字）／金（キャンペーン・価格・主ボタン）／緑（サイトの #03b44a。ライブの点・進捗・目印。文字色には使わない）
   ========================================================= */
.e-page {
  --e-ink: #1c1c1c;
  --e-ink-soft: var(--color-ink-soft);
  --e-muted: var(--color-muted);
  --e-line: #e6e6e6;
  --e-paper: #ffffff;
  --e-paper-2: #f6f8f7;
  --e-green: var(--color-brand);
  --e-gold: #c9a14a;
  --e-gold-ink: #8a6a1f; /* 白地の上の金文字（4.5:1 以上） */
  --e-grad-gold: linear-gradient(180deg, #fbeec0 0%, #e2bf68 45%, #b88a34 100%);
  --e-grad-gold-ink: linear-gradient(180deg, #b38a2e 0%, #8a6a1f 55%, #6f5416 100%); /* 白地の上の大きな文字 */
  --e-num: 'Barlow Condensed', 'Noto Sans JP', sans-serif;
  --e-max: 1160px;
  --e-ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* 英語版が無いため言語切替を出さない（共通 CSS のスマホ指定 display:block より .e-page の分だけ詳細度が高く、後に読み込まれるので勝つ） */
.e-page #HEADER .meta ul li.btn-language { display: none; }
.e-page #WRAPPER { background: var(--e-paper); color: var(--e-ink); }
.e-page #WRAPPER a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.e-inner { position: relative; z-index: 1; max-width: var(--e-max); margin: 0 auto; padding: 0 24px; }
.e-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e-sp { display: none; }

/* ライブの点（開催中の脈動） */
.e-live { position: relative; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--e-green); vertical-align: 1px; }
.e-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--e-green); opacity: 0; animation: e-ping 1.8s var(--e-ease-out) infinite; }
@keyframes e-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.e-kicker { display: flex; align-items: center; font-family: var(--e-num); font-weight: 600; font-size: 15px; letter-spacing: .24em; color: var(--e-ink-soft); }
.e-kicker--center { justify-content: center; }

/* ===================== ファーストビュー ===================== */
.e-hero { position: relative; overflow: hidden; padding: 32px 0 72px; background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%); }

/* ---- 背景（すべて装飾。重ね順：光 → リボン＋きらめき → 金の粒 → 透かし文字 → 白いベール） ---- */
.e-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 淡い金の光（ゆっくり移動） */
.e-hero__glow { position: absolute; inset: -20%; background:
    radial-gradient(32% 30% at 74% 32%, rgba(236, 205, 130, .42), rgba(236, 205, 130, 0) 70%),
    radial-gradient(28% 26% at 92% 82%, rgba(226, 191, 104, .30), rgba(226, 191, 104, 0) 70%),
    radial-gradient(30% 28% at 18% 96%, rgba(236, 205, 130, .22), rgba(236, 205, 130, 0) 70%);
  animation: e-glow 18s ease-in-out infinite alternate; }
@keyframes e-glow { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
/* 金のリボン：リーフレットの背景アートから金属の陰影を残して抜き出したリボンを 2 層で重ねる
   --top＝右上から縦に流れるリボン／--sweep＝左下から右上へ画面を大きく横切るリボン */
.e-hero__art { position: absolute; transform: translate3d(0, calc(var(--sy, 0) * -0.12px), 0); animation: e-drift 16s ease-in-out infinite alternate; }
.e-hero__art--top { --img: url("/images/campaign/endoscope-202610/ribbon_rich.webp"); top: -24%; right: -7%; width: 46%; aspect-ratio: 1000 / 1414;
  /* 素材の左端・下端で絵が直線的に切れないよう、端をなめらかに消す */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 52%, transparent 78%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 52%, transparent 78%);
          mask-composite: intersect; }
.e-hero__art--sweep { --img: url("/images/campaign/endoscope-202610/ribbon_sweep.webp"); left: -6%; bottom: -30%; width: 110%; aspect-ratio: 1600 / 1086; transform: translate3d(0, calc(var(--sy, 0) * -0.06px), 0); animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes e-drift { from { translate: 0 0; rotate: 0deg; } to { translate: -22px 16px; rotate: -2.5deg; } }
.e-hero__ribbon,
.e-hero__glint { position: absolute; inset: 0; }
.e-hero__ribbon { background: var(--img) 0 0 / 100% 100% no-repeat; }
/* 金箔のきらめき：リボンの形で切り抜いた光の帯が斜めに走る */
.e-hero__glint {
  -webkit-mask: var(--img) 0 0 / 100% 100% no-repeat;
          mask: var(--img) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 244, 205, 1) 50%, rgba(255, 255, 255, 0) 58%) 0 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  animation: e-glint 6.5s ease-in-out 1.2s infinite;
}
.e-hero__art--sweep .e-hero__glint { animation-delay: 4.4s; }
@keyframes e-glint { 0% { background-position: 110% 0; } 55%, 100% { background-position: -10% 0; } }
/* 金の粒（またたく） */
.e-hero__sparkles i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 214, 1) 0%, rgba(232, 196, 104, .9) 30%, rgba(232, 196, 104, 0) 70%); opacity: 0; animation: e-twinkle 3.2s ease-in-out infinite; }
.e-hero__sparkles i::before,
.e-hero__sparkles i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .95), transparent); transform: translate(-50%, -50%); }
.e-hero__sparkles i::after { transform: translate(-50%, -50%) rotate(90deg); }
.e-hero__sparkles i:nth-child(1)  { left: 62%; top: 14%; animation-delay: .2s; }
.e-hero__sparkles i:nth-child(2)  { left: 71%; top: 32%; animation-delay: 1.4s; transform: scale(.7); }
.e-hero__sparkles i:nth-child(3)  { left: 84%; top: 9%;  animation-delay: 2.1s; }
.e-hero__sparkles i:nth-child(4)  { left: 93%; top: 27%; animation-delay: .8s; transform: scale(1.3); }
.e-hero__sparkles i:nth-child(5)  { left: 88%; top: 52%; animation-delay: 2.6s; transform: scale(.8); }
.e-hero__sparkles i:nth-child(6)  { left: 97%; top: 66%; animation-delay: 1.1s; }
.e-hero__sparkles i:nth-child(7)  { left: 78%; top: 78%; animation-delay: .5s; transform: scale(1.2); }
.e-hero__sparkles i:nth-child(8)  { left: 66%; top: 90%; animation-delay: 1.9s; transform: scale(.7); }
.e-hero__sparkles i:nth-child(9)  { left: 56%; top: 70%; animation-delay: 2.9s; transform: scale(.6); }
.e-hero__sparkles i:nth-child(10) { left: 74%; top: 58%; animation-delay: 3.4s; }
.e-hero__sparkles i:nth-child(11) { left: 59%; top: 40%; animation-delay: .9s; transform: scale(.6); }
.e-hero__sparkles i:nth-child(12) { left: 91%; top: 92%; animation-delay: 2.3s; transform: scale(.9); }
@keyframes e-twinkle { 0%, 100% { opacity: 0; scale: .4; } 45% { opacity: 1; scale: 1; } 60% { opacity: .85; scale: .9; } }
/* 透かし文字「10.30」：細い金の輪郭＋きらめきが通過する */
.e-hero__ghost {
  position: absolute; right: 1vw; bottom: -5vw; margin: 0;
  font-family: var(--e-num); font-weight: 700; font-size: clamp(200px, 27vw, 420px); line-height: .8; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(184, 138, 52, .38);
  background: linear-gradient(115deg, rgba(226, 191, 104, 0) 40%, rgba(226, 191, 104, .5) 50%, rgba(226, 191, 104, 0) 60%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transform: translate3d(0, calc(var(--sy, 0) * 0.16px), 0);
  animation: e-glint 6.5s ease-in-out 2s infinite;
  user-select: none;
}
/* 文字側の白いベール：本文のまとまり（左上〜中段）だけを楕円で覆い、左下の角はリボンを見せる */
.e-hero__veil { position: absolute; inset: 0; background:
    radial-gradient(48% 62% at 26% 46%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .9) 55%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, 0) 58%); }

/* ---- 配置 ----
   PC：左＝見出し／価格・ボタン、右＝カウントダウン→（余白）→製品。3 行のグリッドで、製品をカウントダウンの直下から始める。
   DOM 順＝スマホの並び順（見出し→カウントダウン→価格・ボタン→製品） */
.e-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto 1fr; grid-template-areas: "top timer" "top product" "offer product"; column-gap: 72px; align-items: start; }
.e-hero__top { grid-area: top; }
.e-hero__timer { grid-area: timer; }
.e-hero__offer { grid-area: offer; }
.e-product { grid-area: product; margin: 64px 0 0; }
.e-hero__timer.e-countdown { margin-top: 8px; }
/* 終了後：カウントダウンと価格が無いので、見出しと製品を横並びに */
.e-hero__grid.is-ended { grid-template-rows: auto; grid-template-areas: "top product"; align-items: center; }
.e-hero__grid.is-ended .e-product { margin-top: 0; }
.e-hero__timer .e-countdown__units { gap: 8px; }
.e-hero__timer .e-countdown__units li { flex: 1; min-width: 0; }
.e-hero__timer .e-countdown__num { font-size: 50px; }
.e-title { margin-top: 18px; }
.e-title__sub { display: inline-block; padding: 3px 12px; border: 1px solid var(--e-ink); font-weight: 700; font-size: 14px; letter-spacing: .1em; }
.e-title__main { display: block; margin-top: 10px; font-size: clamp(34px, 5vw, 64px); font-weight: 900; line-height: 1.1; letter-spacing: .01em; }
/* 最小 19px＝「大きな文字」（太字 18.66px 以上）に保ち、グラデーション上端の明るい金でも 3:1 以上を確保 */
.e-title__campaign { display: block; margin-top: 10px; font-size: clamp(19px, 1.9vw, 22px); font-weight: 700; letter-spacing: .12em; background: var(--e-grad-gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.e-catch { margin-top: 22px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; line-height: 1.45; }
/* 金のマーカーが左から引かれる */
.e-catch em { font-style: normal; background: linear-gradient(transparent 64%, rgba(226, 191, 104, .55) 64%) no-repeat 0 0 / 0% 100%; animation: e-marker 1s var(--e-ease-out) 1.1s forwards; }
@keyframes e-marker { to { background-size: 100% 100%; } }
.e-lead { margin-top: 6px; font-size: 15px; color: var(--e-ink-soft); }

/* カウントダウン */
.e-countdown { margin-top: 26px; }
.e-countdown__label { display: flex; align-items: center; font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--e-ink-soft); }
.e-countdown__units { display: flex; gap: 10px; margin-top: 8px; list-style: none; }
.e-countdown__units li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 10px 10px 8px; border-radius: 10px; background: var(--e-ink); color: #fff; box-shadow: 0 10px 24px rgba(28, 28, 28, .18); overflow: hidden; }
.e-countdown__units li::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255, 255, 255, .08); }
.e-countdown__units li:first-child { background: linear-gradient(160deg, #2a2a2a, #111); }
.e-countdown__units li:first-child .e-countdown__num { background: var(--e-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.e-countdown__num { display: block; font-family: var(--e-num); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.e-countdown__num.is-tick { animation: e-tick .45s var(--e-ease-out); }
@keyframes e-tick { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.e-countdown__unit { margin-top: 4px; font-family: var(--e-num); font-size: 12px; letter-spacing: .2em; color: rgba(255, 255, 255, .62); }

/* 価格（右にバッジを寄せて置く） */
.e-price { display: flex; align-items: center; justify-content: flex-start; gap: 36px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--e-line); }
.e-price__label { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.e-price__tag { padding: 3px 14px; background: var(--e-ink); color: #fff; font-size: 13px; letter-spacing: .06em; }
.e-price__value { position: relative; display: flex; align-items: flex-end; gap: 6px; margin-top: 4px; line-height: 1; }
.e-price__num { font-family: var(--e-num); font-weight: 700; font-size: clamp(64px, 8.6vw, 116px); letter-spacing: .01em; font-variant-numeric: tabular-nums; background: var(--e-grad-gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.e-price__unit { padding-bottom: .55em; font-weight: 900; font-size: 26px; color: var(--e-gold-ink); }
.e-price__unit small { display: block; font-size: 12px; text-align: center; }
/* 数量限定バッジ：動きは付けない */
.e-price__seal { flex-shrink: 0; width: 156px; height: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .2)); }
/* 価格の打消し表示（改定前の現行価格・対象の発注期限）は小さくしすぎず、本文と同じ濃さで読めるようにする */
.e-price__note { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--e-ink-soft); }
@media (forced-colors: active) { .e-price__num, .e-title__campaign, .e-countdown__num, .e-time__big [data-countdown-days] { background: none !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; } }

/* ボタン（主ボタンは金＋光が走る） */
.e-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.e-cta--center { justify-content: center; }
.e-btn { position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-height: 62px; padding: 10px 32px; border-radius: var(--radius-pill); font-weight: 700; font-size: 17px; line-height: 1.3; text-align: center; overflow: hidden; isolation: isolate; transition: box-shadow .25s var(--e-ease-out), background-color .2s, color .2s; }
.e-btn--primary { background: var(--e-grad-gold); color: var(--e-ink); box-shadow: 0 10px 26px rgba(138, 106, 31, .32); }
.e-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); transform: translateX(-120%); animation: e-shine 3.6s ease-in-out 1.6s infinite; }
@keyframes e-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.e-btn--primary span { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.e-btn--primary span::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--e-ease-out); }
/* ホバーの共通ルール（LP・バナーのボタンすべて）：ボタン本体は動かさず、墨と金を入れ替えて矢印だけ 3px 進める */
.e-btn--primary:hover { background: var(--e-ink); color: #f1d58b; box-shadow: 0 16px 32px rgba(28, 28, 28, .28); }
.e-btn--primary:hover::after { opacity: 0; } /* 墨の地では光の帯を出さない */
.e-btn--primary:hover span::after { transform: translateX(3px) rotate(45deg); }
.e-sticky .e-btn--primary:hover { background: #fffdf8; color: var(--e-ink); } /* 追従バーは墨の地なので、墨ではなく白に入れ替える */
.e-btn--line { border: 1.5px solid var(--e-green); background: var(--e-paper); color: var(--e-ink); }
.e-btn--line:hover { color: var(--e-ink); background: var(--selection-bg); }
.e-btn--line small { font-size: 11px; font-weight: 700; color: var(--e-muted); }
.e-btn--line b { font-family: var(--e-num); font-size: 26px; letter-spacing: .04em; }
.e-btn--sm { min-height: 44px; padding: 6px 22px; font-size: 15px; }

.e-asset-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; font-size: 13px; color: var(--e-muted); }
.e-asset-link a { font-weight: 700; font-size: 14px; color: var(--e-ink); text-decoration: underline; text-decoration-color: var(--e-green); text-underline-offset: 4px; }
.e-for-biz { margin-top: 6px; font-size: 12px; color: var(--e-ink-soft); }

/* 製品写真（浮遊＋クリックで製品ページ）
   ホバー：製品一覧ページ（/product/）と同じく、枠は動かさず枠の中で画像だけを 110% に拡大（0.3 秒） */
.e-product__link { display: block; color: var(--e-ink); }
.e-product__link:hover { color: var(--e-ink); }
.e-product__img { position: relative; display: block; animation: e-float 6s ease-in-out infinite; }
.e-product__img::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 1.5px solid var(--e-gold); border-radius: 6px; }
.e-product__frame { display: block; overflow: hidden; border-radius: 6px; box-shadow: 0 24px 50px rgba(28, 28, 28, .18); }
.e-product__frame img { display: block; width: 100%; height: auto; transition: transform .3s; }
.e-product__link:hover .e-product__frame img { opacity: 1; transform: scale(1.1); } /* 共通 CSS の a:hover img（半透明）は打ち消す */
@keyframes e-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.e-product__cap { display: block; margin-top: 28px; }
.e-product__label { display: block; font-family: var(--e-num); font-size: 12px; letter-spacing: .24em; color: var(--e-gold-ink); }
.e-product__name { display: block; margin-top: 2px; font-weight: 900; font-size: 18px; }
.e-product__models { display: block; margin-top: 2px; font-size: 13px; color: var(--e-ink-soft); }
/* 「製品の詳細を見る」：黒地のボタン＋金の丸い矢印。ホバーで金に反転 */
.e-product__more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 8px 8px 8px 24px; border-radius: var(--radius-pill); background: var(--e-ink); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: #fff; box-shadow: 0 10px 22px rgba(28, 28, 28, .18); transition: background .3s var(--e-ease-out), color .3s var(--e-ease-out), transform .3s var(--e-ease-out); }
.e-product__more::after { content: ""; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat, var(--e-grad-gold); transition: transform .3s var(--e-ease-out); }
.e-product__link:hover .e-product__more { background: var(--e-grad-gold); color: var(--e-ink); }
.e-product__link:hover .e-product__more::after { transform: translateX(3px); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E"); }

/* 登場（読み込み時の段階表示） */
.e-in { animation: e-in .9s var(--e-ease-out) both; }
.e-in--1 { animation-delay: .05s; } .e-in--2 { animation-delay: .15s; } .e-in--3 { animation-delay: .28s; }
.e-in--4 { animation-delay: .4s; } .e-in--5 { animation-delay: .52s; } .e-in--6 { animation-delay: .64s; }
@keyframes e-in { from { opacity: 0; transform: translateY(26px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ===================== テロップ帯 ===================== */
.e-ticker { overflow: hidden; border-top: 1px solid var(--e-ink); border-bottom: 1px solid var(--e-ink); background: var(--e-ink); }
.e-ticker__track { display: flex; width: max-content; animation: e-marquee 38s linear infinite; }
.e-ticker__track span { display: inline-flex; align-items: center; padding: 14px 0; font-family: var(--e-num); font-weight: 700; font-size: 22px; letter-spacing: .12em; color: #fff; white-space: nowrap; }
.e-ticker__track span::after { content: "✦"; margin: 0 28px; font-size: 14px; color: var(--e-gold); }
.e-ticker__track .is-gold { font-family: 'Noto Sans JP', sans-serif; font-size: 17px; letter-spacing: .06em; color: #f1d58b; }
@keyframes e-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===================== セクション共通 ===================== */
.e-section { padding: 96px 0; }
.e-section--soft { background: var(--e-paper-2); }
.e-h2 { margin-bottom: 44px; font-size: clamp(24px, 3vw, 38px); font-weight: 900; line-height: 1.4; }
.e-h2__en { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-family: var(--e-num); font-weight: 600; font-size: 14px; letter-spacing: .28em; color: var(--e-gold-ink); }
.e-h2__en::before { content: ""; width: 36px; height: 2px; background: var(--grad-brand); }
.e-section p { line-height: 1.9; color: var(--e-ink-soft); }

/* スクロールで現れる（JS 有効時のみ初期非表示。html.js は common.php が付与） */
.js .e-page [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--e-ease-out), transform .9s var(--e-ease-out); }
.js .e-page [data-reveal].is-in { opacity: 1; transform: none; }

/* ===================== 価格改定のお知らせ・10 月の進み具合 ===================== */
.e-time { padding: 36px 48px 40px; border-radius: 20px; background: var(--e-paper); box-shadow: 0 30px 60px rgba(28, 28, 28, .08), 0 0 0 1px var(--e-line); }
/* 見出しと残り日数を中央で揃える（ラベルを数字の横に置き、右側の高さを抑えて上部の余白を詰める） */
.e-time__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.e-time__head .e-h2 { margin-bottom: 0; }
.e-time__big { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0 12px; margin: 0; }
.e-section .e-time__big { color: var(--e-ink); line-height: 1; } /* .e-section p の行の高さ（1.9）で大きな数字の上下が空かないように */
.e-time__big [data-countdown-days] { font-family: var(--e-num); font-weight: 700; font-size: 104px; letter-spacing: -.01em; background: var(--e-grad-gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.e-time__big [data-countdown-days-unit] { margin-left: 4px; font-weight: 900; font-size: 28px; }
.e-time__big em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--e-ink-soft); }
.e-progress { margin-top: 56px; } /* 上の「TODAY」ラベル分の余白を含む */
.e-progress__bar { position: relative; height: 14px; border-radius: 99px; background: repeating-linear-gradient(90deg, #eceeed 0 calc(100% / 30 - 2px), #fff calc(100% / 30 - 2px) calc(100% / 30)); }
.e-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--e-grad-gold); box-shadow: 0 4px 14px rgba(201, 161, 74, .45); transition: width 1.6s var(--e-ease-out) .2s; }
.e-progress__now { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--e-paper); border: 4px solid var(--e-green); box-shadow: 0 0 0 6px rgba(3, 180, 74, .16); transition: left 1.6s var(--e-ease-out) .2s; }
/* 緑の地のラベルは墨の文字（白文字は 2.8:1 で AA 不足） */
.e-progress__now b { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 4px; background: var(--e-green); font-family: var(--e-num); font-size: 12px; letter-spacing: .14em; color: var(--e-ink); white-space: nowrap; }
.e-time.is-in .e-progress__fill,
html:not(.js) .e-progress__fill { width: var(--elapsed); }
.e-time.is-in .e-progress__now,
html:not(.js) .e-progress__now { left: var(--elapsed); }
.e-progress__scale { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--e-num); font-size: 13px; letter-spacing: .06em; color: var(--e-muted); }
.e-progress__scale .is-end { font-weight: 700; color: var(--e-gold-ink); }
.e-time__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.e-time__foot p { padding: 14px 18px; border-radius: 10px; background: var(--e-paper-2); font-size: 14px; }
.e-time__foot b { display: block; font-family: var(--e-num); font-size: 18px; letter-spacing: .04em; color: var(--e-ink); }

/* ===================== 3 つの理由 ===================== */
.e-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
.e-why__item { position: relative; padding: 36px 30px 32px; border-radius: 20px; background: var(--e-paper); box-shadow: 0 20px 44px rgba(28, 28, 28, .07), 0 0 0 1px var(--e-line); overflow: hidden; transition: transform .35s var(--e-ease-out), box-shadow .35s var(--e-ease-out); }
/* 3 枚でタイトル・数字・説明文の行を揃える（タイトルが 2 行になるカードがあっても、数字と説明文の位置が横一列に並ぶ） */
@supports (grid-template-rows: subgrid) {
  .e-why { row-gap: 0; }
  .e-why__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.e-why__item:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(28, 28, 28, .12), 0 0 0 1px var(--e-line); }
.js .e-page .e-why__item:nth-child(2) { transition-delay: .12s; }
.js .e-page .e-why__item:nth-child(3) { transition-delay: .24s; }
.e-why__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--e-grad-gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--e-ease-out); }
.e-why__item:hover::after { transform: scaleX(1); }
.e-why__no { position: absolute; top: -14px; right: 12px; font-family: var(--e-num); font-weight: 700; font-size: 120px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(201, 161, 74, .35); }
.e-why h3 { position: relative; font-size: 20px; font-weight: 900; }
.e-why .e-why__key { position: relative; margin: 14px 0 12px; font-family: var(--e-num); font-weight: 700; font-size: 54px; line-height: 1; }
.e-section .e-why__key { color: var(--e-ink); }
.e-why__key small { margin-left: 4px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 15px; color: var(--e-gold-ink); }
.e-why p { position: relative; font-size: 14px; }
.e-section .e-fn { margin-top: 12px; font-size: 12px; color: var(--e-muted); scroll-margin-top: 150px; }

/* ===================== 流れ ===================== */
.e-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; }
.e-flow::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--e-ease-out) .3s; }
.e-flow.is-in::before,
html:not(.js) .e-flow::before { transform: scaleX(1); }
.e-flow li { position: relative; }
.e-flow__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--e-ink); font-family: var(--e-num); font-weight: 700; font-size: 24px; color: #fff; box-shadow: 0 0 0 8px var(--e-paper); }
.e-flow li:first-child .e-flow__dot { background: var(--e-grad-gold); color: var(--e-ink); }
.e-flow h3 { margin-top: 18px; font-size: 18px; font-weight: 900; }
.e-flow p { margin-top: 6px; font-size: 14px; }

/* ===================== クロージング ===================== */
.e-closing { position: relative; overflow: hidden; padding: 110px 0 100px; text-align: center; background: var(--e-paper-2); }
.e-closing__ribbon { position: absolute; inset: 0; background: url("/images/campaign/endoscope-202610/art_light.webp") center bottom / cover no-repeat; opacity: .9; animation: e-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.e-closing::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(50% 70% at 50% 50%, rgba(246, 248, 247, .95) 35%, rgba(246, 248, 247, 0) 100%); }
.e-closing__title { margin-top: 14px; font-size: clamp(26px, 3.6vw, 44px); font-weight: 900; line-height: 1.4; }
.e-countdown--mini { display: inline-block; margin-top: 30px; }
.e-countdown--mini .e-countdown__label { justify-content: center; }
.e-countdown--mini .e-countdown__units { justify-content: center; }
.e-countdown--mini .e-countdown__units li { min-width: 72px; }
.e-countdown--mini .e-countdown__num { font-size: 44px; }
.e-closing__meta { margin-top: 22px; font-weight: 700; color: var(--e-gold-ink); }
.e-closing__link { margin-top: 18px; }
.e-closing__link a { font-weight: 700; color: var(--e-ink); text-decoration: underline; text-decoration-color: var(--e-green); text-underline-offset: 4px; }

/* ===================== 追従バー ===================== */
.e-sticky { position: fixed; left: 50%; bottom: 20px; z-index: 90; width: min(760px, calc(100% - 40px)); transform: translate(-50%, 140%); transition: transform .5s var(--e-ease-out); }
.e-sticky.is-on { transform: translate(-50%, 0); }
.e-sticky__inner { display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 26px; border-radius: 99px; background: rgba(28, 28, 28, .92); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); backdrop-filter: blur(8px); color: #fff; }
.e-sticky__time { display: flex; align-items: center; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .8); }
.e-sticky__time b { margin-left: 8px; font-family: var(--e-num); font-size: 22px; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }
.e-sticky__price { margin: 0 0 0 auto; font-family: var(--e-num); font-weight: 700; font-size: 26px; color: #f1d58b; }
.e-sticky__price small { margin-left: 2px; font-family: 'Noto Sans JP', sans-serif; font-size: 11px; color: rgba(255, 255, 255, .7); }

/* ===================== 終了後 ===================== */
.e-ended { margin-top: 26px; padding: 26px 28px; border-radius: 16px; background: var(--e-paper); box-shadow: 0 0 0 1px var(--e-line), 0 20px 40px rgba(28, 28, 28, .06); }
.e-ended__title { font-size: 20px; font-weight: 900; }
.e-ended p { margin-top: 6px; color: var(--e-ink-soft); }

/* ===================== パンくず（最下部・#SecondView の外なので自前で整える） ===================== */
.e-bread { border-top: 1px solid var(--color-line); background: var(--e-paper); }
.e-bread .bread ol { display: flex; flex-wrap: wrap; width: auto; max-width: var(--e-max); margin: 0 auto; padding: 14px 24px; list-style: none; font-size: 13px; }
.e-bread .bread li { position: relative; margin-right: 10px; padding-right: 16px; color: var(--e-ink-soft); }
.e-bread .bread li::after { content: ""; position: absolute; top: 50%; right: 4px; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.e-bread .bread li:last-child { margin: 0; padding: 0; }
.e-bread .bread li:last-child::after { content: none; }
.e-bread .bread a { color: var(--e-ink-soft); }
.e-bread .bread a:hover { color: var(--color-hover); }

/* ===================== スマホ ===================== */
@media screen and (max-width: 768px) {
  .e-sp { display: inline; }
  .e-inner { padding: 0 16px; }
  .e-hero { padding: 8px 0 40px; }
  /* リボンは右上に寄せ、本文の背面は白いベールで全面的に和らげる */
  .e-hero__art { inset: -4% -55% 35% 15%; }
  .e-hero__veil { background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .82) 60%, rgba(255, 255, 255, .6) 100%); }
  .e-hero__sparkles i:nth-child(n+7) { display: none; }
  /* 走る光（background-position のアニメーション）は毎フレーム再描画になるため、スマホでは止めて端末の負荷を抑える */
  .e-hero__glint { display: none; }
  .e-hero__ghost { font-size: 52vw; right: -6vw; bottom: auto; top: 30%; -webkit-text-stroke-color: rgba(201, 161, 74, .16); animation: none; }
  .e-hero__grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "top" "timer" "offer" "product"; row-gap: 0; }
  .e-hero__grid.is-ended { grid-template-areas: "top" "product"; }
  .e-hero__timer.e-countdown { margin-top: 12px; }
  .e-hero__timer .e-countdown__units { gap: 6px; }
  .e-hero__timer .e-countdown__num { font-size: 32px; }
  .e-product { max-width: 240px; margin: 48px auto 0; }
  .e-hero__grid.is-ended .e-product { margin-top: 40px; }
  .e-kicker { font-size: 11px; letter-spacing: .18em; }
  .e-title { margin-top: 8px; }
  .e-title__sub { padding: 1px 8px; font-size: 11px; }
  .e-title__main { margin-top: 6px; font-size: 30px; }
  /* 小さい文字には金のグラデーションを使わない（上端の明るい金が 4.5:1 未満になるため） */
  .e-title__campaign { margin-top: 4px; font-size: 14px; letter-spacing: .06em; background: none; color: var(--e-gold-ink); -webkit-text-fill-color: var(--e-gold-ink); }
  .e-catch { margin-top: 10px; font-size: 19px; }
  .e-catch br { display: none; }
  .e-lead { margin-top: 2px; font-size: 12px; line-height: 1.6; }
  .e-countdown { margin-top: 12px; }
  .e-countdown__label { font-size: 11px; }
  .e-countdown__units { gap: 6px; margin-top: 4px; }
  .e-countdown__units li { flex: 1; min-width: 0; padding: 6px 4px 5px; border-radius: 8px; }
  .e-countdown__num { font-size: 32px; }
  .e-countdown__unit { margin-top: 1px; font-size: 9px; letter-spacing: .14em; }
  .e-price { gap: 20px; margin-top: 8px; padding-top: 8px; }
  .e-price__label { font-size: 14px; }
  .e-price__tag { padding: 2px 10px; font-size: 11px; }
  .e-price__num { font-size: 50px; }
  .e-price__unit { font-size: 20px; }
  .e-price__seal { width: 82px; }
  .e-price__note { margin-top: 2px; font-size: 12px; line-height: 1.5; }
  .e-cta { margin-top: 8px; gap: 8px; }
  .e-btn { width: 100%; min-height: 50px; padding: 8px 16px; font-size: 16px; }
  .e-btn--line b { font-size: 22px; }
  .e-section { padding: 64px 0; }
  .e-h2 { margin-bottom: 28px; font-size: 22px; }
  .e-time { padding: 26px 18px 22px; border-radius: 14px; }
  .e-time__head { grid-template-columns: 1fr; }
  .e-time__big { justify-content: flex-start; }
  .e-time__big em { flex-basis: 100%; margin-bottom: 6px; } /* ラベルを 1 行目、数字＋「日」を 2 行目に */
  .e-time__big [data-countdown-days] { font-size: 84px; }
  .e-time__foot { grid-template-columns: 1fr; }
  .e-why { grid-template-columns: 1fr; gap: 16px; }
  .e-why__item { display: block; grid-row: auto; padding: 28px 22px 24px; } /* 1 列なので行揃えは不要 */
  .e-why__no { font-size: 92px; }
  .e-why .e-why__key { font-size: 44px; }
  .e-section .e-fn { scroll-margin-top: 24px; } /* スマホのヘッダは固定されないため */
  .e-flow { grid-template-columns: 1fr; gap: 22px; }
  .e-flow::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; background: var(--grad-brand-v); }
  .e-flow.is-in::before, html:not(.js) .e-flow::before { transform: scaleY(1); }
  .e-flow li { padding-left: 76px; min-height: 56px; }
  .e-flow__dot { position: absolute; left: 0; top: 0; }
  .e-flow h3 { margin-top: 2px; }
  .e-closing { padding: 72px 0 64px; }
  .e-countdown--mini .e-countdown__units li { min-width: 0; }
  .e-countdown--mini .e-countdown__num { font-size: 34px; }
  /* 追従バー：サイト共通の下部固定メニュー（84px）の上、右下の「ページ先頭へ」（#pageup・幅 60px）を避けて左寄せ */
  .e-sticky { left: 10px; right: 82px; bottom: 94px; width: auto; transform: translateY(170%); }
  .e-sticky.is-on { transform: none; }
  .e-sticky__inner { gap: 10px; padding: 6px 6px 6px 16px; }
  .e-sticky__time { font-size: 11px; white-space: nowrap; }
  .e-sticky__lbl { display: none; }
  .e-sticky__time b { margin-left: 0; font-size: 17px; }
  .e-sticky__price { display: none; }
  .e-sticky .e-btn--sm { width: auto; min-height: 40px; margin-left: auto; padding: 4px 14px; font-size: 12px; white-space: nowrap; }
  .e-bread .bread ol { padding: 12px 16px; font-size: 12px; }
}

/* 動きを減らす設定：装飾の動きは止める（カウントダウンの数字の更新は情報なので続ける） */
@media (prefers-reduced-motion: reduce) {
  .e-hero__art, .e-hero__glow, .e-hero__glint, .e-hero__ghost, .e-hero__sparkles i, .e-closing__ribbon, .e-product__img, .e-btn--primary::after, .e-live::after, .e-ticker__track, .e-in, .e-countdown__num.is-tick { animation: none !important; }
  .e-catch em { animation: none; background-size: 100% 100%; }
  .e-hero__art, .e-hero__ghost { transform: none; }
  .e-hero__glint { display: none; }
  .e-hero__sparkles i { opacity: .7; }
  .js .e-page [data-reveal] { opacity: 1; transform: none; transition: none; }
  .e-progress__fill, .e-progress__now, .e-flow::before, .e-sticky, .e-why__item, .e-btn, .e-btn--primary span::after, .e-product__more, .e-product__more::after, .e-product__frame img { transition: none; }
}