/* ============================================================
   TOPページ v4 ブラッシュアップ用（index.html のみ読込）
   ・FV：英語メイン＋日本語コピー
   ・FV直下：新製品・PRバナーエリア（1〜N枚対応）
   ・製品を探す：分野別／カテゴリー別／ブランド別（レイアウト5案）
   ・右下：WF検討用パネル（案の切り替え）
   ============================================================ */

/* ---- FV：映像キービジュアル（1920×1080の映像を、画面の縦幅いっぱいにCSSトリミング） ----
   高さ＝ビューポート。16:9の映像は object-fit: cover で上下左右を切り抜いて敷き詰める。 */
.hero {
  min-height: 100svh !important;
  aspect-ratio: auto;
  display: block;
  padding-bottom: 0;
  border: none !important; /* KVの枠線なし（ヘッダーと映像を一体に） */
}
body.bw .hero { min-height: 100svh !important; border: none !important; }

/* Vimeo背景（KVに実映像を敷く。background=1で自動再生・ミュート・ループ・UI無し）。
   iframeは object-fit が効かないので、16:9を画面より大きくして中央配置＝coverと同じ見え方にする。 */
.hero__vimeo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0e1a20; }
.hero__vimeo iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;                /* 16:9 */
  min-width: 177.78svh; min-height: 100svh;     /* 画面を必ず覆う */
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
/* 白黒ワイヤーでもKVだけは実映像を表示（プレースホルダ注記を消し、暗幕・コピー・スクロールを戻す） */
body.bw .hero::before { content: "" !important; display: none !important; }
body.bw .hero__vimeo { display: block !important; }
body.bw .hero__veil {
  display: block !important;
  background:
    radial-gradient(120% 90% at 70% 10%, transparent 30%, rgba(10,20,26,.5) 100%),
    linear-gradient(to top, rgba(10,20,26,.8) 0%, transparent 55%) !important;
}
body.bw .hero__scroll { display: flex !important; }
/* 映像＋暗幕の上なのでヒーローのコピー類は白 */
body.bw .hero__copy, body.bw .hero__copy *,
body.bw .hero__lead, body.bw .hero__scroll, body.bw .hero__scroll * { color: #fff !important; }

/* ヘッダーは映像の上に重ねる（領域を分けない・罫線なし）
   ※ body.bw の静的ヘッダー指定より詳細度を高くして上書き */
body.bw.is-home .site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  border-bottom: none !important;
}
body.bw.is-home .site-header.is-scrolled {
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: none !important;
}

/* 英語コピー＋日本語コピー：画面下寄りに配置（パララックスはmain.jsが付与） */
.hero__inner {
  position: absolute; inset: 0;
  max-width: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: clamp(48px, 8vh, 110px);
}
.hero__copy--en {
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-weight: 500;
  font-size: clamp(44px, 11vw, 208px); /* 「World to Chairside.」が幅いっぱいになるサイズ */
  letter-spacing: .02em;
  line-height: 1.05;
  white-space: nowrap;
  text-align: center;
}
/* 日本語コピー：英字コピーの直下・センタリング・折り返しなし */
.hero__lead--ja {
  margin: clamp(14px, 2vw, 30px) 0 0;
  max-width: none;
  white-space: nowrap;
  text-align: center;
  font-family: var(--serif-ja, "Shippori Mincho", serif);
  font-size: clamp(14px, 1.6vw, 26px);
  letter-spacing: .12em;
  line-height: 1.7;
}
/* スクロール表示は左下に小さく */
.hero__scroll { right: auto; left: var(--gutter, 60px); }

/* ---- TOP：セクション見出しは英語を大きく（日本語はサブ） ---- */
.sec-head__en {
  font-style: normal !important;
  /* h2で使うと既定の太字(700)が効き、単一ウェイトのMarcellusでは擬似ボールドになって
     他の見出し(span=400)より太く見えるため、明示的に400へ揃える */
  font-weight: 400;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: clamp(30px, 5.2vw, 74px);
  line-height: 1.04;
  letter-spacing: .012em;
  color: var(--ink, #1a1a1a);
  margin-bottom: clamp(6px, 1vw, 12px);
}
.sec-head__ja {
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--ink-2, #555);
}
.sec-head__en--solo { margin-bottom: 0; }

/* ---- お問い合わせの前に：1行ずつのリスト＋ホバーで下にプレビュー画像 ---- */
.support__list { border-top: 1px solid #d8d8d8; }
.support__item { display: block; border-bottom: 1px solid #d8d8d8; text-decoration: none; color: inherit; cursor: pointer; }
.support__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 4vw, 56px);
  padding: clamp(22px, 3.4vw, 44px) clamp(4px, 1vw, 14px);
  text-decoration: none;
  color: var(--ink, #1a1a1a);
  transition: opacity .35s var(--ease, ease), padding-left .45s var(--ease, ease);
}
.support__no {
  font-family: var(--serif-en, serif);
  font-size: clamp(1rem, 1.4vw, 1.35rem); line-height: 1; color: #9a9a9a;
}
.support__label { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 13px); min-width: 0; }
.support__ja {
  font-family: var(--sans-ja, sans-serif);
  font-size: clamp(1.25rem, 2.6vw, 2.05rem);
  font-weight: 400; letter-spacing: .03em; line-height: 1.3;
}
.support__desc { font-size: clamp(.72rem, 1vw, .82rem); letter-spacing: .06em; color: #8a8a8a; }
.support__go {
  font-family: var(--sans-ja, sans-serif);   /* 日本語がMarcellus→明朝にならないようゴシックに */
  font-size: clamp(.78rem, 1vw, .9rem); letter-spacing: .08em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink, #1a1a1a);
}
.support__go i { font-style: normal; transition: transform .4s var(--ease, ease); }
.support__item:hover .support__go i, .support__item:focus-visible .support__go i { transform: translateX(6px); }
/* ホバー：他の行を薄く、対象行を少し右へ寄せて強調 */
.support:hover .support__row { opacity: .38; }
.support__item:hover .support__row,
.support__item:focus-within .support__row {
  opacity: 1; padding-left: clamp(10px, 1.6vw, 28px);
}
/* プレビュー：各行の中（テキストの下）に、ホバーで出てくる。
   6枚ほどの写真を横に並べて無限ループ（枚数はJSで幅に合わせて複製）。 */
.support__preview {
  height: 0; margin-bottom: 0; overflow: hidden;
  transition: height .45s var(--ease, ease), margin-bottom .45s var(--ease, ease);
}
.support__item:hover .support__preview,
.support__item:focus-within .support__preview {
  height: clamp(150px, 17vw, 220px);
  margin-bottom: clamp(18px, 2.6vw, 34px);
}
.support__strip {
  display: flex; align-items: center; height: 100%;
  width: max-content; gap: clamp(12px, 1.6vw, 24px);
  animation: support-flow 38s linear infinite;
}
@keyframes support-flow { to { transform: translateX(-50%); } }
.support__thumb {
  flex: 0 0 auto; margin: 0;
  width: clamp(180px, 18vw, 260px); height: clamp(118px, 12vw, 176px);
  display: grid; place-items: center;
  border: 1px solid #cfcfcf; background: #eef0f0;
  font-size: 12px; letter-spacing: .1em; color: #9a9a9a;
}
body.bw .support__thumb { background: #eef0f0 !important; }
@media (prefers-reduced-motion: reduce) { .support__strip { animation: none; } }
@media (max-width: 720px) {
  .support__row { grid-template-columns: auto 1fr; row-gap: 12px; }
  .support__go { grid-column: 2; justify-self: start; }
}

/* ---- Message：左=日本語／右=英語の2カラム ---- */
.intro--message {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 11vw, 170px);
}

/* ---- 製品を探すの上：写真が横に流れ、背景に英字がループ（lacasta 30th風・TOPのみ） ---- */
.flow {
  position: relative;
  overflow: hidden;
  height: clamp(520px, 52vw, 760px);
}
.is-home .site-main > section.flow { padding-block: clamp(40px, 6vw, 90px); }
/* 背景の英字（大きく・淡く・横ループ） */
.flow__text {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center;
  pointer-events: none;
}
.flow__text-track {
  display: flex; white-space: nowrap; width: max-content;
  font-family: var(--serif-en, serif);
  font-size: clamp(56px, 11vw, 190px); line-height: 1; letter-spacing: .02em;
  color: #e9e7df;
  /* GPUレイヤーに載せてループのカクつきを防ぐ */
  will-change: transform; backface-visibility: hidden; transform: translateZ(0);
  animation: flow-text 34s linear infinite;
}
.flow__text-track span { padding-right: .55em; }
.flow__text-track span::after { content: "—"; margin-left: .55em; }
body.bw .flow__text-track span, body.bw .flow__text-track span::after { color: #eae7de !important; }
@keyframes flow-text { to { transform: translateX(-50%); } }
/* 写真（散らして横に流れる） */
.flow__photos { position: absolute; inset: 0; z-index: 1; }
.flow__track {
  display: flex; align-items: flex-start; height: 100%; width: max-content;
  /* 間隔を広めにして、写真の間から背景の英字が見えるように */
  gap: clamp(64px, 7vw, 140px);
  will-change: transform; backface-visibility: hidden; transform: translateZ(0);
  animation: flow-photos 52s linear infinite;
}
@keyframes flow-photos { to { transform: translateX(-50%); } }
.flow__item {
  flex: 0 0 auto; margin: 0;
  display: grid; place-items: center;
  border: 1px solid #cfcfcf; background: #eef0f0;
  font-size: 12px; letter-spacing: .1em; color: #9a9a9a;
}
body.bw .flow__item { background: #eef0f0 !important; }
/* 比率を混在（横長・縦長・正方形）。上下も散らして間の帯に背景の英字が見えるように */
.flow__item--a { width: clamp(320px,30vw,460px);  height: clamp(240px,22.5vw,345px); margin-top: clamp(30px,4vw,70px); }   /* 横長 4:3 */
.flow__item--b { width: clamp(260px,24vw,360px);  height: clamp(347px,32vw,480px);  margin-top: clamp(120px,16vw,220px); } /* 縦長 3:4 */
.flow__item--c { width: clamp(300px,28vw,400px);  height: clamp(300px,28vw,400px);  margin-top: clamp(20px,3vw,50px); }    /* 正方形 1:1 */
.flow__item--d { width: clamp(360px,34vw,520px);  height: clamp(203px,19.1vw,293px); margin-top: clamp(210px,29vw,400px); }/* 横長ワイド 16:9 */
.flow__item--e { width: clamp(240px,22vw,330px);  height: clamp(360px,33vw,495px);  margin-top: clamp(60px,8vw,150px); }   /* 縦長 2:3 */
.flow__item--f { width: clamp(280px,26vw,370px);  height: clamp(280px,26vw,370px);  margin-top: clamp(160px,21vw,300px); } /* 正方形 1:1 */
@media (prefers-reduced-motion: reduce) {
  .flow__text-track, .flow__track { animation: none; }
}
.intro__bg {
  position: absolute; inset: 0; z-index: 0;
  /* 実装時：FVと同じ<video>を敷き、うっすら透過させる。ワイヤーは枠＋注記で表現 */
  background: #f4f5f5;
  border-block: 1px dashed #cfcfcf;
  display: flex; align-items: center; justify-content: center;
}
body.bw .intro--message { background: transparent; }
body.bw .intro__bg { background: #f4f5f5 !important; }
.intro__bg-note {
  font-size: 12px; letter-spacing: .08em; color: #b0b0b0;
  padding: 6px 14px; border: 1px dashed #cfcfcf; background: #fff;
}
body.bw .intro__bg-note { background: #fff !important; }
.intro__grid2 {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) { .intro__grid2 { grid-template-columns: 1fr; gap: 40px; } }
.intro__col { text-align: left; }
.intro__col--ja .intro__text {
  max-width: none;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 2.05;
  letter-spacing: .04em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1.4em;
}
.intro__col--ja .text-link { margin-top: 10px; font-size: 1.02rem; }
/* Our Strengthsの英訳文（.stack-card__body-en）と色・サイズを合わせる */
.intro__text-en {
  font-family: var(--serif-en, serif);
  font-size: clamp(.72rem, .92vw, .82rem);
  line-height: 1.85;
  letter-spacing: .015em;
  color: #a7a7a7;
  margin-bottom: 1.6em;
}
body.bw .intro__text-en { color: #a7a7a7 !important; }

/* ---- FV直下：新製品・PRバナー ---- */
.fv-banners {
  padding-block: clamp(28px, 4vw, 52px);
  overflow-x: clip; /* 全幅化（100vw）によるはみ出しを防ぐ */
}
.fv-banners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  /* 表示領域を画面の左端から右端まで */
  margin-inline: calc(50% - 50vw);
}
.fv-banner {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(240px, 24vw, 320px);
  padding: 22px 24px 20px;
  border: 1px solid #bdbdbd;
  overflow: hidden;
}
/* マウスオーバーでバナー画像が少し暗くなる（実装時は画像の上に重なる） */
.fv-banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, 0);
  transition: background .45s var(--ease, ease);
  pointer-events: none;
}
.fv-banner:hover::after,
.fv-banner:focus-visible::after { background: rgba(0, 0, 0, .5); }
/* body.bw の *::after 透明化(!important)に負けるので、bwでも!importantで暗幕を効かせる */
body.bw .fv-banner:hover::after,
body.bw .fv-banner:focus-visible::after { background: rgba(0, 0, 0, .5) !important; }
.fv-banners__grid.is-single .fv-banner { min-height: clamp(300px, 30vw, 420px); }

/* 4枚以上：カルーセル */
.fv-banners__grid.is-carousel { display: block; }
.fv-banners__track {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fv-banners__track::-webkit-scrollbar { display: none; }
.fv-banners__track .fv-banner {
  flex: 0 0 clamp(300px, 32vw, 420px);
  scroll-snap-align: start;
}
.fv-banners__ctrl {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
  padding-inline: var(--gutter, 60px); /* 全幅化したぶん、ボタンは内側に */
}
.fv-banners__ctrl button {
  width: 42px; height: 42px;
  border: 1px solid #9a9a9a; border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: 1rem; line-height: 1;
}
.fv-banner__tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-size: 11px; letter-spacing: .08em; color: #8a8a8a;
  padding: 4px 8px; border-right: 1px dashed #cfcfcf; border-bottom: 1px dashed #cfcfcf;
}
/* カテゴリ・テキストは初期表示せず、マウスオーバーで浮かび上がる */
.fv-banner__cat, .fv-banner__title {
  position: relative; z-index: 2;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease, ease), transform .45s var(--ease, ease), color .45s var(--ease, ease);
}
.fv-banner:hover .fv-banner__cat, .fv-banner:focus-visible .fv-banner__cat,
.fv-banner:hover .fv-banner__title, .fv-banner:focus-visible .fv-banner__title { opacity: 1; transform: none; }
.fv-banner__cat { font-size: .72rem; letter-spacing: .12em; color: #8a8a8a; margin-bottom: 6px; }
.fv-banner__title { font-size: clamp(15px, 1.4vw, 18px); letter-spacing: .04em; line-height: 1.5; }
/* 暗くなった背景の上に、ホバーで出てくる文字は白。
   body.bw の色一括指定(!important)に負けるので、bwでも!importantで白を効かせる */
.fv-banner:hover .fv-banner__cat, .fv-banner:focus-visible .fv-banner__cat,
.fv-banner:hover .fv-banner__title, .fv-banner:focus-visible .fv-banner__title { color: #fff; }
body.bw .fv-banner:hover .fv-banner__cat, body.bw .fv-banner:focus-visible .fv-banner__cat,
body.bw .fv-banner:hover .fv-banner__title, body.bw .fv-banner:focus-visible .fv-banner__title { color: #fff !important; }
.fv-banner__arrow {
  position: absolute; right: 16px; bottom: 14px; z-index: 2; font-size: .9rem;
  transition: color .45s var(--ease, ease);
}
.fv-banner:hover .fv-banner__arrow, .fv-banner:focus-visible .fv-banner__arrow { color: #fff; }
body.bw .fv-banner:hover .fv-banner__arrow, body.bw .fv-banner:focus-visible .fv-banner__arrow { color: #fff !important; }

/* ---- 製品を探す（共通） ---- */
.finder__bar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin: 10px 0 28px;
}
.finder__bar .finder__lead { margin: 0; }
.finder__lead { margin: 10px 0 28px; color: var(--ink-2, #555); }

/* 表示切替トグル（E:タブ表示／B:一覧表示） */
.finder-toggle { display: inline-flex; border: 1px solid #9a9a9a; flex-shrink: 0; }
.finder-toggle button {
  padding: 9px 22px; font-size: .84rem; letter-spacing: .08em;
  background: transparent; color: #8a8a8a; cursor: pointer;
}
.finder-toggle button + button { border-left: 1px solid #9a9a9a; }
.finder-toggle button.is-active { background: #1a1a1a !important; color: #fff !important; }
.finder__count { font-size: .74rem; color: #8a8a8a; margin-left: .4em; font-family: var(--serif-en, serif); }
.finder-item--zero .finder__count::after { content: "（準備中）"; font-size: .68rem; }

/* タブ（A案・E案共通の見た目） */
.finder-tabs { display: flex; gap: 0; border-bottom: 1px solid #cfcfcf; margin-bottom: 26px; }
.finder-tab {
  padding: 12px 26px 10px;
  font-size: .95rem; letter-spacing: .08em;
  border: 1px solid transparent; border-bottom: none;
  color: #8a8a8a; cursor: pointer; background: transparent;
}
.finder-tab.is-active {
  color: #1a1a1a; border-color: #cfcfcf;
  position: relative;
}
.finder-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff;
}
.finder-tab__en { display: block; font-size: .66rem; letter-spacing: .14em; color: #a5a5a5; margin-bottom: 2px; font-family: var(--serif-en, serif); }

/* タイルグリッド（A案） */
.finder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.finder-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 30px 26px 26px; border: 1px solid #cfcfcf; min-height: 150px;
  justify-content: flex-start;
  transition: background-color .5s var(--ease, ease), border-color .5s var(--ease, ease), color .5s var(--ease, ease);
}
.finder-tile > *:not(.finder-tile__bg) { position: relative; z-index: 1; }
/* 子要素の文字色も個別にトランジション（これが無いと色だけ瞬時に切り替わる） */
.finder-tile__en, .finder-tile__ja, .finder-tile__count { transition: color .5s var(--ease, ease); }
.finder-tile__en { font-size: .74rem; letter-spacing: .14em; color: #a5a5a5; font-family: var(--serif-en, serif); }
.finder-tile__ja { font-size: 1.22rem; letter-spacing: .06em; }
.finder-tile__count { margin-top: auto; padding-top: 14px; font-size: .82rem; color: #8a8a8a; }
/* ホバー：色反転（暗地＋白文字）＋背景にうっすら画像 */
.finder-tile__bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .55s var(--ease, ease); }
.finder-tile:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.finder-tile:hover .finder-tile__en,
.finder-tile:hover .finder-tile__ja,
.finder-tile:hover .finder-tile__count { color: #fff; }
.finder-tile:hover .finder-tile__bg { opacity: .32; }
/* body.bw の一括指定(!important)に負けないよう bw でも効かせる */
body.bw img.finder-tile__bg { opacity: 0 !important; }
body.bw .finder-tile:hover { background: #1a1a1a !important; border-color: #1a1a1a !important; }
body.bw .finder-tile:hover .finder-tile__en,
body.bw .finder-tile:hover .finder-tile__ja,
body.bw .finder-tile:hover .finder-tile__count { color: #fff !important; }
body.bw .finder-tile:hover img.finder-tile__bg { opacity: .32 !important; }

/* 自動アニメは画面外(.is-anim-paused)では停止 */
.is-anim-paused .flow__text-track,
.is-anim-paused .flow__track,
.is-anim-paused .products-bg__row,
.is-anim-paused .support__strip { animation-play-state: paused !important; }

/* B案：3カラム並列 */
.finder-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
@media (max-width: 860px) { .finder-cols { grid-template-columns: 1fr; } }
.finder-col__head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #1a1a1a;
}
.finder-col__head b { font-size: 1.05rem; letter-spacing: .08em; font-weight: 600; }
.finder-col__head span { font-size: .68rem; letter-spacing: .14em; color: #a5a5a5; font-family: var(--serif-en, serif); }
.finder-col__list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 4px; border-bottom: 1px dashed #dcdcdc;
  font-size: .92rem; letter-spacing: .04em;
  transition: background .4s var(--ease, ease), color .4s var(--ease, ease),
              padding .4s var(--ease, ease), border-color .4s var(--ease, ease);
}
.finder-col__list a i { font-style: normal; font-size: .74rem; color: #8a8a8a; transition: color .4s var(--ease, ease); }
/* ホバー：色反転（背景=黒／文字=白）でじんわり切替 */
.finder-col__list a:hover,
.finder-col__list a:focus-visible {
  background: #1a1a1a; color: #fff;
  border-bottom-color: #1a1a1a;
  padding-left: 14px; padding-right: 14px;
}
.finder-col__list a:hover i,
.finder-col__list a:focus-visible i { color: #fff; }

/* C案：セグメント＋チップ */
.finder-seg {
  display: inline-flex; margin: 0 auto 28px; border: 1px solid #9a9a9a;
}
.finder-seg__wrap { text-align: center; }
.finder-seg button {
  padding: 10px 26px; font-size: .9rem; letter-spacing: .08em;
  background: transparent; color: #8a8a8a; cursor: pointer;
}
.finder-seg button + button { border-left: 1px solid #9a9a9a; }
.finder-seg button.is-active { background: #1a1a1a !important; color: #fff !important; }
.finder-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
.finder-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 1px solid #9a9a9a; border-radius: 999px;
  font-size: .9rem; letter-spacing: .04em;
}
.finder-chip i { font-style: normal; font-size: .72rem; color: #8a8a8a; }

/* D案：アコーディオン */
.finder-acc details { border: 1px solid #cfcfcf; margin-bottom: 12px; }
.finder-acc summary {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 20px; cursor: pointer; list-style: none;
}
.finder-acc summary::-webkit-details-marker { display: none; }
.finder-acc summary b { font-size: 1rem; letter-spacing: .08em; font-weight: 600; }
.finder-acc summary span { font-size: .68rem; letter-spacing: .14em; color: #a5a5a5; font-family: var(--serif-en, serif); }
.finder-acc summary::after { content: "＋"; margin-left: auto; color: #8a8a8a; }
.finder-acc details[open] summary::after { content: "−"; }
.finder-acc__body { padding: 4px 20px 18px; display: flex; flex-wrap: wrap; gap: 10px; }

/* E案：サイドタブ */
.finder-side { display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 3.5vw, 56px); }
@media (max-width: 860px) { .finder-side { grid-template-columns: 1fr; } }
.finder-side__nav { display: flex; flex-direction: column; border-left: 1px solid #cfcfcf; }
.finder-side__nav button {
  text-align: left; padding: 14px 18px; font-size: .95rem; letter-spacing: .06em;
  color: #8a8a8a; background: transparent; cursor: pointer;
  border-left: 2px solid transparent; margin-left: -1px;
}
.finder-side__nav button.is-active { color: #1a1a1a; border-left-color: #1a1a1a !important; }
.finder-side__nav button span { display: block; font-size: .64rem; letter-spacing: .14em; color: #a5a5a5; font-family: var(--serif-en, serif); }
.finder-side__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-content: start; }

/* ---- Our Strengths：スタッキングカード ----
   position: sticky を利用。スクロールすると次のカードが
   前のカードに少しずつ重なりながら積み上がる。 */
.strengths-stack {
  padding-block: clamp(60px, 8vw, 110px);
  overflow-x: clip; /* 全幅化（100vw）によるスクロールバー分のはみ出しを防ぐ */
  --head-top: clamp(84px, 10vh, 100px);   /* サイトヘッダー下に見出しを固定する位置（旧カード固定位置に合わせる） */
}
/* 「Our Strengths」の見出しはカードが積み上がる間ずっと画面上部に残す（sticky）。
   カードの貼り付き位置（--stack-top）を見出しより下げているので重ならない。 */
.strengths-stack .sec-head {
  position: sticky;
  top: var(--head-top);
  z-index: 6;                            /* カード（z-index 1〜4）より前面 */
  margin-bottom: clamp(16px, 2.4vw, 30px);
}
/* カードは「あらかじめ重なった状態」で全体が一体スクロール。
   →01〜03を出したまま、04と一緒に押し上がる（離脱時に個別のカードが被らない）。 */
/* カードはスクロールに応じて一枚ずつ積み上がる（position: sticky）。
   ・各カードは通常フローに置き、上端で少しずつずれた位置に貼り付く
   ・段差ぶん（数字＋キャッチ）が見えたまま次のカードが上に重なっていく
   ・z-index を --i で明示し、後のカードほど確実に手前へ */
.stack {
  display: block;
  /* 段差＝重なったとき見えるのは「番号＋日本語キャッチ」だけ。
     英字（Endodontics Specialty等）は次のカードに隠れてOK、という方針で頭出しを浅めに */
  --stack-offset: clamp(62px, 4.8vw, 74px);
  /* 固定した見出しのぶん下げる（見出し位置 + 見出し高さ+余白） */
  --stack-top: calc(var(--head-top, 90px) + clamp(72px, 7vw, 104px));
  /* 先頭カードの高さ。以降のカードは段差ぶん低くして、重なった各カードの「下端」を揃える。
     こうすると積み上がりが終わったとき全カードが同時に離脱し、見出しも一緒に送り出せる。 */
  --card-base: clamp(560px, 82vh, 820px);
  /* 中身は .container の内側（＝見出しと同じ座標系）に揃える。
     上線だけ ::before でフルブリード表示するので、ここではフルブリードにしない。 */
}
.stack-card {
  position: sticky;
  top: calc(var(--stack-top) + var(--i, 0) * var(--stack-offset));
  z-index: calc(var(--i, 0) + 1);
  /* 1枚がほぼ画面いっぱいを占める高さにして、次のカードが下から一枚ずつ重なって見えるようにする
     （高さが低いと複数枚が同時に見えて「最初から重なっている」印象になる）。
     後のカードほど段差ぶん低くし、重なった状態での下端を揃える。 */
  min-height: calc(var(--card-base, 82vh) - var(--i, 0) * var(--stack-offset));
  /* 中身の左端＝コンテナ左端＝Our Strengths見出しの左端。paddingは付けない（vw非依存で正確に一致） */
  padding-top: clamp(20px, 2.4vw, 32px);
  padding-bottom: clamp(24px, 3vw, 44px);
  padding-inline: 0;
  border: none;
  background: #fff;
  display: flex; flex-direction: column;
}
/* カード上部のグレーの区切り線は排除（2026-07 指示） */
/* 白黒ワイヤーの背景リセットより優先して不透明にする（重なりを見せるため）。ドロップシャドウは無し */
body.bw .stack-card { background: #fff !important; box-shadow: none !important; }
/* 見出し行：数字＋日本語キャッチ＋アイコン。重なってもこの行が見え続ける */
.stack-card__head {
  display: flex; align-items: baseline;
  gap: clamp(16px, 2.4vw, 32px);
  padding-left: 0;   /* Our Strengths見出しの左端に揃える */
  padding-right: clamp(24px, 6vw, 120px);
}
.stack-card__no {
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1;
  flex-shrink: 0;
}
.stack-card__title {
  font-family: var(--serif-ja, "Shippori Mincho", serif);
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: .06em; line-height: 1.5;
  margin: 0;
}
.stack-card__en {
  font-family: var(--serif-en, serif);
  font-size: .74rem; letter-spacing: .16em; color: #a5a5a5;
  margin: clamp(10px, 1.6vw, 20px) 0 10px;
}
.stack-card__body {
  max-width: 720px; line-height: 2.1;
  color: var(--ink-2, #555);
}
/* 原稿の下：翻訳した英字を薄い灰色で小さく */
.stack-card__body-en {
  max-width: 720px;
  margin-top: clamp(10px, 1.4vw, 16px);
  font-family: var(--serif-en, serif);
  font-size: clamp(.72rem, .92vw, .82rem);
  line-height: 1.85; letter-spacing: .015em;
  color: #a7a7a7;
}
/* テキスト左＋写真右の2カラム */
.stack-card__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 50%, 900px);
  gap: clamp(24px, 4vw, 72px);
  align-items: stretch;
}
@media (max-width: 860px) {
  .stack-card__grid { grid-template-columns: 1fr; }
  /* 狭い画面ではキャッチが折り返して背が高くなるので、頭出しを少し深く戻す */
  .stack { --stack-offset: clamp(96px, 15vw, 128px); }
  /* 1カラムでは内容が縦に伸びるため、段差ぶん低くする計算はやめて内容に合わせる */
  .stack-card { min-height: auto; }
}
.stack-card__content {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-left: 0;   /* 見出しの左端に揃える */
  padding-right: clamp(16px, 3vw, 56px);
}
.stack-card__btn { margin-top: clamp(18px, 2.4vw, 30px); }
/* 写真：枠内でスクロールに合わせて拡大（GSAP ScrollTrigger／scrub） */
.stack-card__photo {
  position: relative;
  overflow: hidden;
  /* 低め。背の高いカードでは grid の stretch で自然に伸びる。
     低くしておくことで、後ろのカードが段差ぶん縮んで下端を揃えられる（floorで邪魔しない）。 */
  min-height: clamp(200px, 26vh, 360px);
}
.stack-card__photo-inner {
  position: absolute; inset: 0;
  border: 1px dashed #c9c9c9;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .1em; color: #b5b5b5;
  transform-origin: center;
  will-change: transform;
}

/* ---- Products：背景の斜め写真コラージュ（自動スクロール） ----
   ワイヤー表現。デザイン時は実写写真に差し替え、トーンを調整する。
   行ごとに左右逆方向へ無限ループでドリフトする。 */
/* ---- セクション間の縦リズムを共通化（TOP） ----
   FV・バナーを除く各セクションの上下余白をそろえる。News等も広めに確保。 */
.is-home .site-main > section:not(.hero):not(.fv-banners) {
  padding-block: clamp(72px, 9vw, 132px);
  margin-block: 0;
}
.is-home .fv-banners { padding-block: clamp(28px, 4vw, 52px); }

.products-sec { position: relative; overflow: hidden; }
.products-sec > * { position: relative; z-index: 1; }
.products-bg {
  position: absolute; inset: -28% -15%;
  transform: rotate(-8deg);
  opacity: .18;
  pointer-events: none;
  z-index: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
.products-bg__row {
  display: flex; gap: 24px; margin-bottom: 24px;
  width: max-content;
  animation: products-bg-drift 56s linear infinite;
}
.products-bg__row--rev { animation-direction: reverse; }
@keyframes products-bg-drift {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .products-bg__row { animation: none; }
}
.products-bg__tile {
  flex: 0 0 auto;
  width: 460px; height: 320px;   /* 大きめに */
  border: 1px dashed #c9c9c9;
  position: relative;
}
.products-bg__tile:nth-child(3n) { width: 560px; }
.products-bg__tile:nth-child(4n) { width: 400px; height: 280px; align-self: flex-end; }
.products-bg__tile::after {
  content: "写真";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .1em; color: #b5b5b5;
}
.products-bg-note { display: none !important; }   /* 斜め画像ブロックの注記（点線枠）は排除 */

/* ---- フッター（Contactバナー＋背面リビール）は共通化のため style.css へ移設 ---- */