/* =========================================================
   BLOOMEA サイト｜「BLOOMEAとは」「NEOCARE IIとは」共通スタイル (neocare.css)
   ※ common.css → neocare.css → theme-accent.css の順で読み込む
   ========================================================= */

/* ---- 下層ページ 共通ヒーロー（MV） ---- */
.page-fv { padding: 0; position: relative; }
.page-fv-img { height: 300px; position: relative; overflow: hidden; background: #eee; }
.page-fv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-fv-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.5)); }
.page-fv-copy { position: absolute; left: 24px; right: 24px; bottom: 32px; z-index: 2; color: #fff; }
.page-fv-copy .label { color: #fff; opacity: 0.9; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; margin-bottom: 10px; }
.page-fv-copy h1 { color: #fff; }
.page-fv-copy .fv-sub { color: #fff; font-size: 13px; margin-top: 12px; line-height: 1.7; }
@media (min-width: 768px) { .page-fv-img { height: 400px; } .page-fv-copy { left: 48px; right: 48px; bottom: 44px; } }
@media (min-width: 1024px) { .page-fv-img { height: 480px; } .page-fv-copy { left: 64px; right: 64px; } }

/* ---- リード / 本文 ---- */
.lead-copy { font-size: 18px; font-weight: 500; line-height: 1.9; letter-spacing: 0.04em; margin-bottom: 16px; }
.body-copy { font-size: 14px; color: #5a5a5a; line-height: 2.0; margin-bottom: 14px; }
.body-copy:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .lead-copy { font-size: 22px; } }

/* ---- ブランド沿革（FROM MEDICAL TO AESTHETIC） ---- */
.brand-eyebrow { font-size: 12px; letter-spacing: 0.2em; color: var(--c-turq); font-weight: 600; margin-bottom: 12px; }
.brand-headline { font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; margin-bottom: 20px; }
@media (min-width: 768px) { .brand-headline { font-size: 26px; } }

/* ---- 実績スタッツ ---- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 40px; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 56px; } }
.stat { text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.06); padding: 28px 14px; }
.stat-num { font-size: 34px; font-weight: 600; color: var(--c-accent); letter-spacing: 0.02em; line-height: 1.1; }
.stat-num .unit { font-size: 16px; font-weight: 500; }
.stat-en { font-size: 10px; letter-spacing: 0.14em; color: var(--c-turq); font-weight: 700; margin-top: 8px; }
.stat-label { font-size: 11px; color: #6a6a6a; margin-top: 6px; line-height: 1.6; }
@media (min-width: 768px) { .stat-num { font-size: 40px; } }

/* ---- 10 YEARS バナー（全幅・パララックス／ks-styleのAbout同様） ---- */
.distributor-parallax {
  position: relative; max-width: none;
  background-image: url("../images/bloomea-distributor.jpg");
  background-size: cover; background-position: center; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 300px;
}
.distributor-parallax::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.dist-inner { position: relative; z-index: 1; text-align: center; }
.dist-inner .en { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: 0.12em; }
.dist-inner .jp { color: rgba(255,255,255,0.9); font-size: 16px; margin-top: 12px; }
@media (min-width: 768px) { .distributor-parallax { min-height: 360px; } .dist-inner .en { font-size: 34px; } .dist-inner .jp { font-size: 18px; } }
@media (min-width: 1024px) { .distributor-parallax { min-height: 420px; background-attachment: fixed; } }

/* ---- パンくずをターコイズに（下のintro帯と連続させる） ---- */
.breadcrumb--turq { background: #23968c; padding-bottom: 14px; }
.breadcrumb--turq, .breadcrumb--turq a { color: rgba(255,255,255,0.92); }

/* ---- リード＋プローブ：ターコイズ帯（Our Mission配色）＋左→右 流れる凸凹スライド ---- */
.nc-intro-band { max-width: none; background: linear-gradient(#23968c 0 calc(100% - 175px), #fff calc(100% - 175px)); padding: 48px 0; overflow: hidden; }
@media (min-width: 768px) { .nc-intro-band { padding: 72px 0; background: linear-gradient(#23968c 0 calc(100% - 245px), #fff calc(100% - 245px)); } }
@media (min-width: 1024px) { .nc-intro-band { padding: 96px 0; } }
.nc-intro-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; }
@media (min-width: 768px) { .nc-intro-inner { padding: 0 48px; } }
.nc-eyebrow { color: #fff; opacity: 0.9; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; }
.nc-intro-band .lead-copy { color: #fff; }
.nc-intro-band .body-copy { color: rgba(255,255,255,0.9); }

/* 影が切れないよう上下に余白を確保 */
.probe-marquee { overflow: hidden; margin-top: 24px; padding: 24px 0 48px; }
/* スライド直下のブランド沿革は上余白を詰める */
.nc-brand { padding-top: 24px; }
@media (min-width: 768px) { .nc-brand { padding-top: 32px; } }
@media (min-width: 1024px) { .nc-brand { padding-top: 40px; } }
.probe-track { display: flex; width: max-content; animation: pm-scroll 55s linear infinite; }
.probe-marquee:hover .probe-track { animation-play-state: paused; }
@keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pm-set { display: flex; align-items: flex-start; gap: 18px; padding-right: 18px; }
.pm { flex: 0 0 auto; width: 300px; height: 190px; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.22); }
.pm img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* すべて横長長方形＋上下交互のきれいな凸凹（6枚で偶数＝ループしても段差が揃う） */
.pm1, .pm3, .pm5 { margin-top: 40px; }
.pm2, .pm4, .pm6 { margin-top: 0; }
@media (min-width: 768px) {
  .probe-track { animation-duration: 68s; }
  .pm-set { gap: 24px; padding-right: 24px; }
  .pm { width: 430px; height: 280px; }
  .pm1, .pm3, .pm5 { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .probe-track { animation: none; } }

/* ---- プローブ コラージュ（旧・未使用） ---- */
.probe-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 768px) { .probe-collage { grid-template-columns: repeat(6, 1fr); } }
.probe-collage figure { margin: 0; overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 2; }
.probe-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* PC：1枚目を大きく（2×2）、残りを配置 */
@media (min-width: 768px) {
  .probe-collage figure:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .probe-collage figure:nth-child(1) { aspect-ratio: auto; }
  .probe-collage figure:nth-child(n+2) { grid-column: span 3; }
}

/* ---- 特徴 01–04 ---- */
.feature-list { display: grid; gap: 52px 18px; margin-top: 44px; }
@media (min-width: 768px) { .feature-list { grid-template-columns: 1fr 1fr; gap: 60px 24px; } }
.feature { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.06); padding: 56px 26px 30px; text-align: center; }
.feature-no {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--c-cta); color: #fff;
  font-size: 20px; font-weight: 700; line-height: 1;
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}
.feature-no small { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 3px; }
.feature h3 { font-size: 17px; font-weight: 700; color: var(--c-cta); margin-bottom: 14px; line-height: 1.5; }
.feature p { font-size: 14px; color: #5a5a5a; line-height: 1.95; text-align: left; }

/* ---- 3-in-1 / プローブ紹介 ---- */
/* 3-in-1 Multi Frequency：左テキスト／右フルブリード写真（担当者よりと同構成） */
.mf-photo { margin-top: 28px; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.mf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
  .mf-section { display: grid; grid-template-columns: 44% 1fr; gap: 48px; align-items: center; }
  .mf-photo {
    margin-top: 0; aspect-ratio: auto; height: 360px;
    border-radius: 16px 0 0 16px;
    margin-right: calc(-1 * max(48px, (100vw - 1104px) / 2));
  }
}
@media (min-width: 1024px) {
  .mf-photo { height: 420px; margin-right: calc(-1 * max(64px, (100vw - 1152px) / 2)); }
}

.probe-defs { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .probe-defs { grid-template-columns: 1fr 1fr; gap: 18px 32px; } }
.probe-def { border-left: 3px solid var(--c-accent-border); padding-left: 14px; }
.probe-def h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.probe-def p { font-size: 13px; color: #5a5a5a; line-height: 1.8; }
.probe-note { font-size: 12px; color: #8a8a8a; margin-top: 16px; line-height: 1.8; }
.diagram { margin-top: 28px; }
.diagram img { width: 100%; border-radius: 12px; display: block; }
.diagram figcaption { font-size: 11px; color: #999; margin-top: 8px; text-align: center; }

/* ---- まとめバンド（ks-styleのAboutと同デザイン：全幅背景＋均一ベール＋左揃え） ---- */
.combine-band {
  position: relative; max-width: none; overflow: hidden; text-align: left;
  margin-top: 48px; margin-bottom: 48px;
  background-image: url("../images/neocare-mv.jpg");
  background-size: cover; background-position: center;
}
.combine-band::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 0; }
.combine-band > * { position: relative; z-index: 1; }
.combine-band .inner { max-width: none; margin: 0; }
.combine-band h2 { color: #fff; font-size: 22px; font-weight: 500; line-height: 1.6; margin-bottom: 20px; }
.combine-band p { color: rgba(255,255,255,0.92); font-size: 14px; line-height: 2.0; margin-bottom: 14px; }
.combine-band .combine-key { display: inline-block; background: #fff; color: var(--c-cta); font-size: 16px; font-weight: 700; letter-spacing: 0.03em; padding: 10px 18px; border-radius: 8px; margin: 18px 0; }
@media (min-width: 768px) {
  .combine-band { margin-top: 72px; margin-bottom: 72px; padding-left: max(48px, calc((100% - 1104px) / 2)); padding-right: max(48px, calc((100% - 1104px) / 2)); }
  .combine-band h2 { font-size: 28px; } .combine-band .combine-key { font-size: 18px; }
}
@media (min-width: 1024px) {
  .combine-band { margin-top: 96px; margin-bottom: 96px; padding-left: max(64px, calc((100% - 1152px) / 2)); padding-right: max(64px, calc((100% - 1152px) / 2)); background-attachment: fixed; }
}

/* ---- 次ページCTA（画像入りボタン） ---- */
.usage-cta { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; }
.usage-cta img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 220px; }
.usage-cta-ov { position: absolute; inset: 0; background: rgba(0,0,0,0.22); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center; padding: 28px; }
.usage-cta-ov p { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.usage-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-text); min-height: 50px; padding: 0 30px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.usage-cta:hover .usage-cta-btn { background: var(--c-cta); color: #fff; }

/* ---- 汎用：中央寄せリード ---- */
.section-lead-c { text-align: center; max-width: 720px; margin: 0 auto 8px; }

/* ---- サロン活用CTA：Contactのcta-cardと同デザイン（背景差し替え＋見出し少し大きめ） ---- */
.cta-card.cta-card--usage { background-image: url("../images/nc-usage-cta.jpg"); }
.cta-card .usage-h2 { font-size: 26px; }
@media (min-width: 768px) { .cta-card .usage-h2 { font-size: 36px; } }

/* =========================================================
   BLOOMEAとは（about.html）専用コンポーネント
   ========================================================= */

/* ダーク帯の差し替え背景（FROM MEDICAL / SUPPORT） */
.combine-band.about-medical { background-image: url("../images/about-medical.jpg"); }
.combine-band.about-support { background-image: url("../images/about-support.jpg"); }
/* ダーク帯内の白いアイブロウ */
.brand-eyebrow--light { color: #fff; opacity: 0.9; }
/* ダーク帯内リンク */
.band-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 3px;
  transition: opacity 0.2s ease;
}
.band-link:hover { opacity: 0.75; }
.combine-key--support { background: rgba(255,255,255,0.14); color: #fff; }

/* SUPPORT：キャッチ＋リンクをセットにしたボタン */
.support-cta {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 24px; padding: 14px 30px; border-radius: 12px;
  background: #fff; text-decoration: none; text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.support-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.28); }
.support-cta-key { font-size: 12px; font-weight: 600; color: #7a7a7a; letter-spacing: 0.02em; line-height: 1.5; }
.support-cta-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--c-cta); }
.support-cta-ico { flex-shrink: 0; }
@media (min-width: 768px) {
  .support-cta { padding: 16px 38px; }
  .support-cta-key { font-size: 13px; }
  .support-cta-link { font-size: 15px; }
}

/* OUR MISSION：POINTカードを3カラムに（導入文の下に余白を追加） */
.feature-list--3 { margin-top: 72px; }
@media (min-width: 768px) { .feature-list--3 { grid-template-columns: repeat(3, 1fr); margin-top: 88px; } }
.feature-sub { display: block; margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--c-cta); line-height: 1.5; }

/* YOUR NEEDS / OUR SOLUTIONS：4カード */
/* YOUR NEEDS：PROBE & ELECTRODE と同じ左ボーダー・リスト型デザイン */
.needs-grid { display: grid; gap: 22px; margin-top: 28px; }
@media (min-width: 768px) { .needs-grid { grid-template-columns: 1fr 1fr; gap: 26px 40px; } }
.need-card { background: none; box-shadow: none; border: none; border-left: 3px solid var(--c-accent-border); border-radius: 0; padding: 2px 0 2px 16px; }
.need-no { display: none; }
.need-en { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--c-cta); }
.need-jp { font-size: 16px; font-weight: 700; margin: 4px 0 8px; line-height: 1.5; }
.need-card p { font-size: 13px; color: #5a5a5a; line-height: 1.9; }

/* PRODUCTS：製品カード */
.products-grid { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 768px) { .products-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.product-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 16px;
  overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.product-img { aspect-ratio: 4 / 3; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-img--ph {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #f4f2ee, #f4f2ee 12px, #efece6 12px, #efece6 24px);
  color: #b4a98f; font-size: 13px; letter-spacing: 0.08em;
}
.product-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.product-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--c-cta); }
.product-name { font-size: 19px; font-weight: 700; margin: 6px 0 10px; }
.product-body p { font-size: 13px; color: #5a5a5a; line-height: 1.9; flex: 1; }
.product-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  color: var(--c-cta); font-size: 13px; font-weight: 600; text-decoration: none;
}
.product-link:hover { text-decoration: underline; }

/* ACADEMY ロゴ */
.academy-logo { margin-top: 22px; }
.academy-logo img { width: 200px; max-width: 60%; height: auto; display: block; }

/* ABOUT BLOOMEA 導入文：3行に収まるよう横幅を広げる */
@media (min-width: 768px) { .about-intro .nc-intro-inner { max-width: 1040px; } }

/* ABOUT：メインビジュアルをロゴ中心に（写真の代わりにブランドロゴ） */
.page-fv-img.about-fv { background: #f5f2ec; display: flex; align-items: center; justify-content: center; }
.page-fv-img.about-fv::after { display: none; }
.about-fv-inner { position: relative; z-index: 2; text-align: center; padding: 24px; }
.page-fv-img.about-fv .about-fv-logo { position: static; inset: auto; width: auto; height: auto; max-width: 240px; margin: 0 auto 16px; display: block; object-fit: contain; }
.about-fv-inner .label { color: var(--c-cta); opacity: 1; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; margin-bottom: 8px; }
.about-fv-inner h1 { color: var(--c-text); }
@media (min-width: 768px) { .page-fv-img.about-fv .about-fv-logo { max-width: 320px; margin-bottom: 20px; } }

/* スクリーンリーダー専用（視覚的に非表示） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ACADEMY：写真の代わりにロゴのみを表示 */
.mf-photo--logo { background: #f5f2ec; display: flex; align-items: center; justify-content: center; }
.mf-photo--logo img { width: auto; height: auto; max-width: 72%; max-height: 60%; object-fit: contain; }


/* =========================================================
   about story
   ========================================================= */

body .page {
overflow-x: clip;
overflow-y: visible;
display: flow-root;
}

.bl-story{
  --teal:#1f9384;--teal-deep:#16756a;--mint:#9fd6cb;--tan:#b39b80;--tan-deep:#8f7458;
  --ink:#333;--ink-soft:#6b6b6b;--ink-mute:#a8a29a;
  --beige:#f4f1ea;--beige-2:#ede6da;--cool:#eef5f3;
  --en:"Jost","Helvetica Neue",Arial,sans-serif;
  --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  height:440vh;height:440svh;position:relative;font-family:var(--jp);color:var(--ink);-webkit-font-smoothing:antialiased
}
.bl-story *{box-sizing:border-box}
.bl-story .scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  --p:0;--origin:1;--mission:0;--future:0;--a1:0;--a2:0;--a3:0;background:var(--beige)}
.bl-story .layer{position:absolute;inset:0;pointer-events:none}

/* backgrounds */
.bl-story .bg-origin{background:radial-gradient(ellipse 60% 70% at 24% 55%,rgba(179,155,128,.18),transparent 70%),linear-gradient(180deg,var(--beige-2),var(--beige));opacity:var(--origin)}
.bl-story .bg-mission{background:radial-gradient(ellipse 55% 60% at 50% 52%,rgba(31,147,132,.10),transparent 70%),linear-gradient(180deg,#f7f6f2,var(--cool));opacity:var(--mission)}
.bl-story .bg-future{background:radial-gradient(circle at 50% 42%,#fff 0,rgba(255,255,255,0) 45%),linear-gradient(160deg,var(--beige) 0%,#eef6f3 55%,var(--beige) 100%);opacity:var(--future)}
.bl-story .arch{position:absolute;top:-8vh;height:120vh;border:1px solid rgba(143,116,88,.16);border-radius:999px 999px 0 0;opacity:calc(.25 + var(--origin) * .75);transform:translateY(calc(var(--p) * -60px))}
.bl-story .arch::after{content:"";position:absolute;inset:14px;border:1px solid rgba(143,116,88,.08);border-radius:inherit}
.bl-story .arch.a1{left:-12vw;width:34vw}
.bl-story .arch.a2{right:-10vw;width:30vw;transform:translateY(calc(var(--p) * -110px))}
.bl-story .beam{position:absolute;left:12vw;top:-30vh;width:18vw;height:160vh;transform:rotate(18deg) translateX(calc(var(--p) * 120px));background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);filter:blur(10px);opacity:calc(var(--origin) * .9 + var(--future) * .4)}

/* type */
.bl-story .en-label{font-family:var(--en);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase}
.bl-story .h2{font-family:var(--jp);font-weight:500;font-size:clamp(22px,2.5vw,34px);line-height:1.75;letter-spacing:.08em;margin:0}
.bl-story .body{font-size:13px;line-height:2.1;letter-spacing:.05em;color:var(--ink-soft);margin:0}

/* 01 origin */
.bl-story .origin{opacity:var(--origin)}
.bl-story .year{position:absolute;left:8vw;top:13vh;margin:0;font-family:var(--en);font-weight:300;font-size:clamp(100px,15vw,240px);line-height:.8;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(179,155,128,.5);transform:translateX(calc(var(--p) * -160px))}
.bl-story .year small{display:block;font-size:11px;letter-spacing:.3em;-webkit-text-stroke:0;color:var(--tan);margin:0 0 20px 6px;font-weight:400}
.bl-story .origin-copy{position:absolute;left:9vw;bottom:15vh;width:min(480px,42vw);transform:translateY(calc((1 - var(--origin)) * -24px))}
.bl-story .origin-copy .en-label{display:flex;align-items:center;gap:14px;color:var(--tan);margin-bottom:20px}
.bl-story .origin-copy .en-label::before{content:"";width:32px;height:1px;background:currentColor;opacity:.7}
.bl-story .origin-copy .h2{margin-bottom:18px}
.bl-story .origin-meta{position:absolute;right:9vw;bottom:15vh;text-align:right;color:var(--tan)}
.bl-story .origin-meta b{display:block;font-family:var(--en);font-weight:300;font-size:22px;letter-spacing:.12em;color:var(--tan-deep);margin-top:6px}
.bl-story .rv{opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),filter 1.4s var(--ease)}
.bl-story .is-in .rv{opacity:1;transform:none;filter:none}
.bl-story .rv.d1{transition-delay:.15s}.bl-story .rv.d2{transition-delay:.3s}.bl-story .rv.d3{transition-delay:.45s}

/* 02 mission */
.bl-story .mission{opacity:var(--mission)}
.bl-story .mission-head{position:absolute;left:50%;top:9vh;transform:translate(-50%,calc((1 - var(--mission)) * 20px));text-align:center;width:min(900px,88vw)}
.bl-story .mission-head .en-label{color:var(--teal)}
.bl-story .mission-head .h2{margin-top:12px}
.bl-story .weave{position:absolute;left:50%;top:50%;width:min(1060px,96vw);height:auto;aspect-ratio:1000/420;transform:translate(-50%,-50%) scale(calc(1 - var(--future) * .55));overflow:visible;pointer-events:none}
.bl-story .weave path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bl-story .weave .s1{stroke:var(--tan);stroke-width:1.6}
.bl-story .weave .s2{stroke:var(--teal);stroke-width:2}
.bl-story .weave .s3{stroke:var(--mint);stroke-width:2.4}
.bl-story .weave .glow{stroke-width:10;opacity:.12;filter:blur(6px)}
.bl-story .weave .node{fill:#fff;stroke:var(--teal);stroke-width:1.4}
.bl-story .mission-list{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,5vw,72px);width:min(960px,84vw);margin:0;padding:0;list-style:none}
.bl-story .mission-list li{position:relative;padding:17px 0 0;border-top:1px solid rgba(51,51,51,.13);opacity:calc(.28 + var(--a) * .72);transform:translateY(calc((1 - var(--a)) * 12px))}
.bl-story .mission-list li::after{content:"";position:absolute;left:0;top:-1px;width:42%;height:1px;transform-origin:left;transform:scaleX(var(--a));background:var(--c)}
.bl-story .mission-list li:nth-child(1){--a:var(--a1);--c:var(--tan)}
.bl-story .mission-list li:nth-child(2){--a:var(--a2);--c:var(--teal)}
.bl-story .mission-list li:nth-child(3){--a:var(--a3);--c:var(--mint)}
.bl-story .mission-list .no{display:block;font-family:var(--en);font-size:9px;letter-spacing:.22em;color:var(--ink-mute);margin-bottom:7px}
.bl-story .mission-list h3{font-family:var(--en);font-weight:400;font-size:clamp(19px,1.8vw,25px);letter-spacing:.10em;margin:0 0 8px;color:var(--ink)}
.bl-story .mission-list p{font-size:11.5px;line-height:1.8;letter-spacing:.04em;color:var(--ink-soft);margin:0}

/* 03 beyond */
.bl-story .future{opacity:var(--future)}
.bl-story .future-copy{position:absolute;left:50%;top:50%;width:min(820px,86vw);text-align:center;transform:translate(-50%,calc(-50% + (1 - var(--future)) * 28px))}
.bl-story .future-copy img{display:block;width:min(260px,50vw);height:auto;margin:0 auto 40px;transform:scale(calc(.92 + var(--future) * .08))}
.bl-story .future-copy .en-label{color:var(--tan);margin-bottom:14px;display:block}
.bl-story .future-copy .h2{margin-bottom:20px}
.bl-story .triad{display:inline-flex;align-items:center;gap:16px;font-family:var(--en);font-weight:300;font-size:clamp(13px,1.2vw,16px);letter-spacing:.18em;color:var(--ink-soft)}
.bl-story .triad i{width:4px;height:4px;border-radius:50%;background:var(--teal)}

/* navigation */
.bl-story .rail{position:absolute;right:3vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:24px;z-index:5}
.bl-story .rail button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;font-family:var(--en);font-size:10px;letter-spacing:.22em;color:var(--ink-mute);transition:color .5s var(--ease)}
.bl-story .rail button i{display:block;width:16px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.bl-story .rail button.on{color:var(--teal)}
.bl-story .rail button.on i{width:36px}
.bl-story .rail button:focus-visible{outline:1px solid var(--teal);outline-offset:6px}
.bl-story .progress{position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:5}
.bl-story .progress span{display:block;height:100%;width:calc(var(--p) * 100%);background:linear-gradient(90deg,var(--tan),var(--teal))}
.bl-story .hint{position:absolute;left:50%;bottom:3.4vh;transform:translateX(-50%);font-family:var(--en);font-size:10px;letter-spacing:.3em;color:var(--ink-mute);opacity:calc(var(--origin) * (1 - var(--p) * 6))}

@media (max-width:760px){
  .bl-story{height:400vh;height:400svh}
  .bl-story .year{left:6vw;top:14vh}
  .bl-story .origin-copy{left:7vw;right:7vw;width:auto;bottom:12vh}
  .bl-story .origin-meta,.bl-story .rail{display:none}
  .bl-story .arch.a1{width:60vw;left:-30vw}.bl-story .arch.a2{width:50vw;right:-28vw}
  .bl-story .h2{font-size:20px;letter-spacing:.06em}
  .bl-story .body{font-size:12px}
  .bl-story .mission-head{top:8vh;width:90vw}
  .bl-story .weave{top:39%;width:132vw}
  .bl-story .mission-list{grid-template-columns:1fr;gap:13px;bottom:100px;width:84vw}
  .bl-story .mission-list li{display:grid;grid-template-columns:68px 110px 1fr;column-gap:9px;align-items:start;padding:10px 0 0}
  .bl-story .mission-list .no{grid-column:1;margin:2px 0 0;font-size:8px;white-space:nowrap}
  .bl-story .mission-list h3{grid-column:2;font-size:14px;margin:0;letter-spacing:.07em}
  .bl-story .mission-list p{grid-column:3;font-size:10.5px;line-height:1.55;margin:0}
  .dm-tech-grid{display:grid;grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .bl-story .rv{transition:none;opacity:1;transform:none;filter:none}
  .bl-story .arch,.bl-story .beam,.bl-story .year{transform:none}
}