/* ウィルクハーン日本サイト 部品の CSS。assets/css/components/*.css をファイル名の順につないだもの。
 * tools/build_legacy_css.py の生成物なので直接編集しない（元のファイルを直す） */

/* ── 03-buttons.css ── */
/* ボタン（.btn）
 *
 * .btn-primary    黒い枠のボタン。後ろに矢印。マウスを乗せると緑で塗る
 * .btn-inverse    写真の上などに置く白い枠のボタン（.btn-primary と組み合わせる）
 * .btn-link / .btn-secondary  枠のない文字だけのボタン。後ろに矢印、マウスを乗せると下線
 * .btn-back       前に左向きの矢印（「戻る」）
 * .btn-sm / .btn-lg  小さい・大きいボタン
 * キーボードで移動したときは、緑の太い枠で示す。
 *
 * 本国の CSS は Bootstrap のボタンの仕組み（CSS 変数）を一部だけ使っていて、押している間（:active、.active）や
 * 使えないとき（:disabled）の色の変数が定義されていない。その場合は文字色を親から引き継ぎ、背景を透明にする動きになる。
 * ここでは、その実際の見た目をそのまま書いている。
 *
 * Bootstrap（公式）のボタン（buttons）はビルドに含めていない（tools/bootstrap/wilkhahn-bootstrap.scss）。ボタンの見た目はここだけで決まる。 */

.btn {
  display: inline-block;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: var(--wh-weight-regular);
  line-height: 1.5;
  color: #000;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.input:focus-visible,
.btn:focus-visible {
  border-color: var(--wh-green-dark);
  outline: 3px solid var(--wh-green-dark);
  outline-offset: -1px;
}

/* 押している間・選ばれているとき */
.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color: inherit;
  background-color: transparent;
  border-color: currentcolor;
}

.btn-check:checked + .btn:focus-visible,
:not(.btn-check) + .btn:active:focus-visible,
.btn:first-child:active:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible {
  box-shadow: none;
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  color: inherit;
  pointer-events: none;
  background-color: transparent;
  border-color: currentcolor;
  opacity: .65;
}

.btn + .btn {
  margin-left: .5rem;
}

.btn-primary {
  color: #000;
  border: 1px solid #000;
}

.btn-primary:hover {
  color: var(--wh-white);
  background-color: var(--wh-green);
  border-color: var(--wh-green);
}

.btn-primary.btn-inverse {
  color: var(--wh-white);
  border: 1px solid var(--wh-white);
}

.btn-primary.btn-inverse:hover {
  color: #000;
  background-color: var(--wh-white);
  border-color: var(--wh-white);
}

/* 文字だけのボタンは、枠の内側の余白ぶん左右にずらして文字の位置をそろえる */
.btn-link {
  margin-right: -1rem;
  margin-left: -1rem;
}

.btn-link:hover,
.btn-secondary:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* 後ろの矢印（Font Awesome の angle-right）。「戻る」は前に angle-left */
.btn-link::after,
.btn-primary::after,
.btn-secondary::after,
.btn-submit::after {
  display: inline-block;
  margin-left: .5em;
  font: var(--fa-font-light);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f105";
}

.btn-back::after {
  display: none;
  content: "";
}

.btn-back::before {
  display: inline-block;
  margin-right: .5em;
  font: var(--fa-font-light);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f104";
}

.btn-sm {
  padding: .25rem .5rem;
}

@media (min-width: 768px) {
  .btn {
    font-size: 1rem;
  }

  .btn-sm {
    font-size: .875rem;
  }

  .btn-lg {
    font-size: 1.25rem;
  }
}

/* ── 05-header.css ── */
/* ヘッダーとグローバルメニュー
 *
 * 本国のデザインのうち、日本版で残っている部分。ヘッダーの見た目の大半は、コーダーさんが書いた
 * wilkhahn-overrides.css（.page-header-area）が上書きしている。
 *
 * .page-header    ヘッダーの帯（ロゴ・メニューボタン）
 * .menu-toggle    メニューボタン（三本線）。開いている間（.expanded、scripts.js）は × になる
 * .close-fancy    閉じるボタン（×）。マウスを乗せると線が伸びる
 * .offcanvas-menu 全画面のメニュー（Bootstrap offcanvas）。上から降りてくる
 * .nav-main       メニューの大きな項目。子メニュー（.collapse-menu）は同じ場所に重ねて開く */

.page-header {
  position: relative;
  z-index: 1047;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: var(--wh-white);
}

.page-header a.site-logo {
  display: block;
  max-width: 133px;
}

@media (min-width: 768px) {
  .page-header {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .page-header a.site-logo {
    max-width: 200px;
  }
}

#navToggler:focus-visible {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

/* マウスを乗せたときに線を伸ばす */
@keyframes growLine {
  0% { width: 0; }
  100% { width: 100%; }
}

/* ── 閉じるボタン（×） ─────────────────────────────── */

.close-fancy {
  z-index: 999;
  box-sizing: border-box;
  width: 47px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition-property: opacity, filter;
  transition-duration: .15s;
  transition-timing-function: linear;
}

.close-fancy .box {
  position: relative;
  display: flex;
  justify-content: center;
  width: 47px;
  height: 32px;
}

/* × は、45 度に傾けた線（.inner）と、その ::after を 90 度回した線で作る */
.close-fancy .inner,
.close-fancy .inner::before,
.close-fancy .inner::after {
  position: absolute;
  width: 32px;
  height: 2px;
  background-color: #000;
  transition: all .15s ease;
}

.close-fancy .inner {
  top: 50%;
  right: 7px;
  display: block;
  margin-top: 0;
  background-color: var(--wh-white);
  transform: rotate(45deg);
  transition-duration: 75ms;
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

.close-fancy .inner::before,
.close-fancy .inner::after {
  right: 0;
  display: block;
  content: "";
}

.close-fancy .inner::before {
  top: 0;
  right: 0;
  transition: top 75ms ease, opacity 75ms ease .12s;
}

.close-fancy .inner::after {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
}

.close-fancy .box:hover .inner::before {
  right: 0;
}

.close-fancy .box:hover .inner::after {
  left: 0;
}

.close-fancy:hover .inner::before {
  animation: growLine .8s ease;
}

/* ── メニューボタン（三本線 ↔ ×） ──────────────────────── */

.menu-toggle {
  z-index: 999;
  width: 47px;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: .15s;
  transition-timing-function: linear;
}

.menu-toggle .menu-box {
  position: relative;
  display: flex;
  justify-content: center;
  width: 47px;
  height: 32px;
}

/* 真ん中の線（.menu-inner）と、上下の線（::before / ::after） */
.menu-toggle .menu-inner,
.menu-toggle .menu-inner::before,
.menu-toggle .menu-inner::after {
  position: absolute;
  width: 32px;
  height: 2px;
  background-color: #000;
  transition: all .15s ease;
}

.menu-toggle .menu-inner {
  top: 50%;
  right: 6px;
  display: block;
  margin-top: -1px;
  transition-duration: 75ms;
  transition-timing-function: cubic-bezier(.55, .055, .675, .19);
}

.menu-toggle .menu-inner::before,
.menu-toggle .menu-inner::after {
  right: 0;
  display: block;
  content: "";
}

.menu-toggle .menu-inner::before {
  top: -10px;
  right: -6px;
}

.menu-toggle .menu-inner::after {
  bottom: -10px;
  left: -7px;
}

.menu-toggle .menu-box:hover .menu-inner::before {
  right: 0;
}

.menu-toggle .menu-box:hover .menu-inner::after {
  left: 0;
}

/* 開いている間は、閉じるボタン（.close-fancy）と同じ × の形にする */
.menu-toggle.expanded {
  z-index: 2001;
}

.menu-toggle.expanded .menu-inner {
  right: 7px;
  margin-top: 0;
  background-color: var(--wh-white);
  transform: rotate(45deg);
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

.menu-toggle.expanded .menu-inner::before {
  top: 0;
  right: 0;
  transition: top 75ms ease, opacity 75ms ease .12s;
}

.menu-toggle.expanded .menu-inner::after {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
}

.menu-toggle.expanded:hover .menu-inner::before {
  animation: growLine .8s ease;
}

/* ── 全画面のメニュー ─────────────────────────────── */

.offcanvas-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  color: var(--wh-body-color);
  visibility: hidden;
  background-color: var(--wh-white);
  background-clip: padding-box;
  outline: 0;
  transform: translateY(-100%);
  transition: transform .6s ease-in-out;
}

/* Bootstrap の .offcanvas.offcanvas-top（高さ 30vh・下の線）より強く指定して、画面いっぱいにする */
.offcanvas-menu.offcanvas-top {
  height: 100vh;
  border-bottom: 0;
}

.offcanvas-menu.showing,
.offcanvas-menu.show:not(.hiding) {
  transform: none;
}

.offcanvas-menu.showing,
.offcanvas-menu.hiding,
.offcanvas-menu.show {
  visibility: visible;
}

/* メニューの上の帯（ロゴと閉じるボタン）の高さを、ページのヘッダーにそろえる */
.offcanvas-header {
  height: 64px;
}

@media (min-width: 768px) {
  .offcanvas-header {
    height: 116px;
  }
}

.nav-link:focus-visible {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

.menu-container {
  position: relative;
  padding-right: 0;
  padding-left: 0;
  overflow-x: hidden;
}

/* 大きな項目（Products / Service …）。右に矢印のアイコン */
.nav-link-toplevel {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0;
  font-size: 40px;
  line-height: 1.1;
  color: var(--wh-black);
}

.nav-link-toplevel span {
  padding-right: 1rem;
}

.nav-link-toplevel [class^="fa"] {
  margin-right: auto;
  font-size: 80%;
  text-decoration: none !important;
}

/* 子メニューの「戻る」ボタンと、ボタンのない列で高さをそろえるための空き */
.close-sub-spacer {
  width: 1px;
  height: 34px;
  margin-bottom: 2rem;
  background: var(--wh-white);
}

.menu-col-other .close-sub-spacer {
  margin-bottom: 0;
}

.btn.close-sub {
  height: 34px;
  margin-bottom: 2rem;
}

.nav-main {
  flex-direction: column;
}

/* 子メニューは親の項目の上に重ねて開く */
.nav-main .collapse-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background: var(--wh-white);
  transition: none !important;
}

.nav-main .nav-sub {
  flex-direction: column;
}

.nav-main .nav-sub .nav-item .nav-link {
  padding: .5rem 0;
  font-size: 20px;
  color: var(--wh-black);
}

.menu-col-other {
  z-index: 0;
  display: flex;
  flex-direction: column;
}

.service-menu {
  margin-bottom: 3rem;
}

.nav-service {
  flex-direction: column;
}

.nav-service .nav-item .nav-link {
  padding: .125rem 0;
  font-size: 20px;
  color: var(--wh-black);
}

.nav-service .nav-item .nav-link [class^="fa"] {
  color: var(--wh-green);
}

@media (max-width: 767.98px) {
  .collapse-menu .nav-link-toplevel span {
    padding-right: 0;
  }

  .collapse-menu .nav-link-toplevel [class^="fa"] {
    display: none;
  }
}

@media (min-width: 768px) {
  .nav-link-toplevel {
    justify-content: space-between;
    margin-bottom: 1.5rem;
    font-size: 60px;
  }

  .nav-link-toplevel [class^="fa"] {
    padding: 0 1rem;
  }

  .nav-main .collapse-menu .nav-link-toplevel [class^="fa"] {
    margin-right: 0;
  }

  .nav-main .nav-sub {
    padding: 1rem;
  }

  .nav-main .nav-sub .nav-item .nav-link {
    margin: 0;
    padding: .5rem 1rem;
    font-size: 24px;
  }

  .nav-main .nav-sub .nav-item .nav-link:hover {
    text-decoration: underline;
    text-decoration-color: #000;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  .menu-col-other .close-sub-spacer {
    margin-bottom: 2rem;
  }

  /* 表示中のページの項目に太い下線 */
  .nav-main > .nav-item > .nav-link.active span {
    text-decoration-thickness: 5px;
    text-underline-offset: 15px;
  }

  .nav-service .nav-item .nav-link {
    padding: .5rem 1rem;
    font-size: 24px;
  }
}

@media (min-width: 1200px) {
  .nav-link-toplevel {
    font-size: 80px;
  }

  .nav-main .nav-sub .nav-item .nav-link,
  .nav-service .nav-item .nav-link {
    font-size: 28px;
  }
}

/* ── 10-layout.css ── */
/* ページの枠
 * main.page-content の直下に並ぶブロック（.frame / .grid / .module）の幅と左右の余白。 */

.page-content > .frame,
.page-content > .grid,
.page-content > .module {
  width: 100%;
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
  scroll-margin-top: 2rem;
}

/* スマートフォンとタブレットでは、本文の幅を 610px までにする */
@media (max-width: 767.98px) {
  .container,
  .page-content > .frame,
  .page-content > .grid {
    max-width: 610px;
  }
}

/* 固定ヘッダーの下に隠れないよう、最初のブロックを下げる（全面のメインビジュアルは除く） */
.page-content > *:first-child:not(.wh-header-slider):not(.wh-header-full) {
  margin-top: 56px;
}

/* タブの中身（マテリアル一覧の Materials / Size など）にキーボードで移ったとき */
.tab-pane:focus-visible {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

/* パンくず（Bootstrap の .breadcrumb）の上にも余白 */
.breadcrumb {
  margin-top: 2rem;
}

/* スライダーを囲む枠。前後ボタン（.swiper-nav）の位置の基準 */
.swiper-container {
  position: relative;
}

/* スライドの高さを、いちばん高いスライドにそろえる */
.swiper.swiper-equalheight .swiper-slide {
  height: auto;
}

/* ── 20-accordion.css ── */
/* アコーディオン（details.accordion）
 * 見出し行（summary.accordion-toggle）の右に下向きの矢印。開くと矢印が上を向き、見出しが少し太くなる。 */

details.accordion {
  border-bottom: 1px solid var(--wh-green-medium);
}

details.accordion:first-of-type {
  border-top: 1px solid var(--wh-green-medium);
}

details.accordion .accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85em 0 .7em .25rem;
  font-size: 1rem;
  font-weight: var(--wh-weight-light);
  line-height: 1.15;
  list-style: none;
}

summary.accordion-toggle:focus-visible {
  outline: 2px solid var(--wh-green-dark);
}

details.accordion .accordion-toggle:hover {
  cursor: pointer;
}

details.accordion .accordion-toggle::-webkit-details-marker {
  display: none;
}

/* 矢印（Font Awesome の angle-down。アイコンを SVG に置き換えるまでの仮） */
details.accordion .accordion-toggle::after {
  display: inline-block;
  margin-right: 1rem;
  margin-left: 1rem;
  font: var(--fa-font-solid);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f107";
  transition: transform .3s;
}

details.accordion[open] summary.accordion-toggle {
  font-weight: var(--wh-weight-regular);
}

details.accordion[open] summary.accordion-toggle::after {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  details.accordion .accordion-toggle {
    font-size: 1.125rem;
  }
}

/* ── 30-page-headers.css ── */
/* メインビジュアル
 *
 * .wh-header-2cols  写真2枚と見出しの2カラム（About / 製品詳細など）
 * .wh-header-text   見出しだけのヘッダー
 * .header-full      全面写真＋白い文字の箱（トップ、HCW、Dynamic seating など）
 *   写真は少し縮めた状態から、表示されると 6 秒かけてゆっくり拡大する。
 *   文字は下から順に（.fade-1〜3 の遅れで）現れる。
 *   表示の合図は、ヘッダー単体なら .wh-header-full / .header-full-active、
 *   トップのスライダーなら表示中のスライド（.swiper-slide-active）。 */

.wh-header-2cols,
.wh-header-text {
  margin-bottom: 3rem;
}

.header-full .media {
  display: flex;
  align-items: center;
  max-height: 33vh;
  overflow: hidden;
}

.header-full .media img {
  min-width: 100%;
  opacity: .8;
  transform: scale(.95);
  transition: transform .8s, opacity .8s;
}

.header-full .text .overlay {
  position: relative;
  padding-top: 2rem;
  padding-right: 3rem;
  background: var(--wh-white);
}

.header-full .text .h-overline {
  margin-bottom: 1rem;
}

.header-full .text .text-fade-in > * {
  opacity: 0;
  transform: translateY(60px);
  transition: all .4s ease-out;
}

.header-full .text .text-fade-in > *.fade-1 { transition-delay: 200ms; }
.header-full .text .text-fade-in > *.fade-2 { transition-delay: 600ms; }
.header-full .text .text-fade-in > *.fade-3 { transition-delay: 800ms; }

/* 表示されたとき */
.header-full-active .media img,
.header-full-active .media video,
.wh-header-full .header-full .media img,
.wh-header-full .header-full .media video,
.swiper-slide-active .header-full .media img,
.swiper-slide-active .header-full .media video {
  opacity: 1;
  transform: scale(1.05);
  transition: transform 6s;
}

.header-full-active .text-fade-in > *,
.wh-header-full .header-full .text-fade-in > *,
.swiper-slide-active .header-full .text-fade-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* トップのスライダー（.swiper-home）
 * スマートフォンでは文字の箱を写真の下に置き、スライドの高さを文字の量に合わせる。
 * 前後ボタンは PC だけ、写真の右下に出す。 */
.swiper-nav.swiper-nav-home {
  display: none;
}

@media (max-width: 768px) {
  .swiper-home .swiper-slide {
    height: auto;
  }

  .swiper-home .swiper-slide .header-full {
    height: 100%;
  }

  .swiper-home .swiper-slide .header-full .text {
    height: 100%;
    overflow-y: clip;
    background: var(--wh-white);
  }

  .swiper-home .swiper-slide .header-full .text .overlay {
    background: transparent;
  }

  .swiper-home .swiper-slide:not(.swiper-slide-active) .text-fade-in {
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .wh-header-2cols,
  .wh-header-text {
    margin-bottom: 5rem;
  }

  .header-full .media {
    max-height: 720px;
  }

  .header-full .media img {
    transform: scale(.9);
  }

  /* 文字の箱を写真に重ねる */
  .header-full .text {
    height: 330px;
    margin-top: -190px;
    overflow: hidden;
  }

  .header-full .text > .container,
  .header-full .text > .container > .row {
    height: inherit;
  }

  .header-full .text .overlay {
    height: 330px;
    padding-top: 2.5rem;
  }

  /* 白い箱を左の画面の端まで伸ばす */
  .header-full .text .overlay::before {
    position: absolute;
    top: 0;
    left: -100%;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--wh-white);
    content: "";
  }

  .header-full .text .overlay .text-fade-in {
    background-color: var(--wh-white);
  }

  .header-full .text .overlay .h-overline {
    margin-bottom: 1.5rem;
    font-size: 20px;
  }

  .header-full .text .overlay .h-xxl {
    font-size: 48px;
  }

  .swiper-nav.swiper-nav-home {
    position: absolute;
    right: 0;
    bottom: 140px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    width: auto;
    margin-bottom: 0 !important;
  }

  .swiper-nav.swiper-nav-home .swiper-button-next {
    margin-left: .25rem;
  }
}

@media (min-width: 1200px) {
  .header-full .text {
    height: 370px;
    margin-top: -230px;
  }

  .header-full .text .overlay {
    height: 370px;
    padding-top: 3rem;
  }

  .header-full .text .overlay .h-overline {
    margin-bottom: 1.5rem;
    font-size: 24px;
  }

  .header-full .text .overlay .h-xxl {
    font-size: 60px;
  }
}

/* ── 40-media.css ── */
/* 動画（.wh-video）
 * 再生前は操作バーを隠し、右下の再生ボタン（.wh-posterbtn）だけを出す。下側を少し暗くしてボタンを見やすくする。
 * 再生ボタンを押すと scripts.js がボタンを消し、操作バーを出す。 */

.wh-posterbtn {
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 5%;
  padding-bottom: 5%;
  cursor: pointer;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .3) 77%);
}

.figure-video video:focus-visible,
.wh-posterbtn:focus-visible {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

video.wh-hiddencontrols::-webkit-media-controls {
  display: none;
}

/* ── 45-mechanism-slider.css ── */
/* メカニズムの説明（.wh-gallery-special。Dynamic seating）
 * 上にサムネイルの列（.swiper-special-thumbs）、下に説明文（.swiper-special-text）。
 * 選んでいるサムネイルだけをはっきり見せ、ほかは薄くする。
 * PC では選んでいるものを広くする。
 *
 * 本国の CSS は、スマートフォンでサムネイルの列を右の画面外まで見せるつもりで overflow: visible を指定しているが、
 * Swiper の .swiper { overflow: hidden } が後から効くため、実際にははみ出していない。いまの見た目に合わせて書いていない。 */

.swiper-special-thumbs {
  -webkit-clip-path: inset(-100vw -100vw -100vw 0);
  clip-path: inset(-100vw -100vw -100vw 0);
}

.swiper-special-thumbs .swiper-slide {
  width: 70%;
  max-width: 320px;
  padding-right: 1px;
  opacity: .2;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

.swiper-special-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-special-thumbs .imgwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1px solid var(--wh-green);
}

.swiper-special-thumbs .imgwrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 50%;
}

.swiper-special-text .swiper-slide {
  padding-top: 3rem;
  font-size: 18px;
  background: var(--wh-white);
}

@media (min-width: 768px) {
  .swiper-special-thumbs {
    -webkit-clip-path: none;
    clip-path: none;
  }

  .swiper-special-thumbs .swiper-slide {
    width: calc(30% - 1rem);
    max-width: none;
    padding-right: 1px;
  }

  .swiper-special-thumbs .swiper-slide-thumb-active {
    width: 40%;
  }
}

/* ── 50-image-blocks.css ── */
/* 画像のブロック
 *
 * .wh-2img-overlap       写真2枚を重ねる。画面に入ると（.in-view、scripts.js）左右から寄って現れ、そのあと説明が出る
 * .wh-2img-overlap-text  写真2枚＋文章。広い画面（992px 以上）では文章を左の写真の下に回す
 * .wh-image-w-caption-overlay  写真の左下に白い箱で説明を重ねる
 * .row-highlight         背景を灰色にした段 */

.wh-images .wh-2img-overlap > .row,
.wh-images .wh-2img-overlap-text > .row {
  position: relative;
  align-items: center;
}

.wh-images .wh-2img-overlap .col-left,
.wh-images .wh-2img-overlap-text .col-left {
  position: absolute;
  z-index: 1;
}

.wh-images .wh-2img-overlap .col-right,
.wh-images .wh-2img-overlap-text .col-right {
  position: relative;
  z-index: 0;
}

.wh-images .wh-2img-overlap .img-left {
  position: relative;
  opacity: 0;
  transform: translateX(-50%);
  transition: all 1.6s ease-in-out;
}

.wh-images .wh-2img-overlap .img-right,
.wh-images .wh-2img-overlap-text .img-right {
  position: relative;
  opacity: 0;
  transform: translateX(10%);
  transition: all 1.6s ease-in-out;
}

.wh-images .wh-2img-overlap .caption-row {
  opacity: 0;
  transition: opacity .3s ease-in-out;
  transition-delay: 1.3s;
}

.wh-images .wh-2img-overlap-text .img-left {
  position: relative;
  opacity: 0;
  transform: translateY(-25%);
  transition: all 1.6s ease-in-out;
}

.wh-images .wh-2img-overlap-text .text-mobile {
  display: block;
  margin-top: 3rem;
}

.wh-images .wh-2img-overlap-text .text-desktop {
  display: none;
}

.wh-images .wh-2img-overlap.in-view .img-left,
.wh-images .wh-2img-overlap.in-view .img-right,
.wh-images .wh-2img-overlap-text.in-view .img-right {
  opacity: 1;
  transform: translateX(0);
}

.wh-images .wh-2img-overlap-text.in-view .img-left {
  opacity: 1;
  transform: translateY(0);
}

.wh-images .wh-2img-overlap.in-view .caption-row {
  opacity: 1;
}

@media (min-width: 992px) {
  .wh-2img-overlap-text {
    margin-top: 80px;
  }

  .wh-2img-overlap-text .col-left .text-desktop {
    position: relative;
    left: calc(-100% / 6);
    display: block;
    padding-top: 3rem;
    padding-right: 3rem;
    opacity: 0;
    transform: translateY(-10%);
    transition: all 1.6s ease-in-out;
    transition-delay: .2s;
  }

  .wh-2img-overlap-text .text-mobile {
    display: none !important;
  }

  .wh-2img-overlap-text.in-view .col-left .text-desktop {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 写真＋説明の重ね（Dynamic seating のギャラリーなど）。PC では表示中のスライドだけ説明を出す */
.wh-image-w-caption-overlay {
  position: relative;
  overflow: hidden;
}

.wh-image-w-caption-overlay .caption-overlay {
  position: relative;
  top: -40px;
  left: -2px;
  margin-bottom: -40px;
}

.wh-image-w-caption-overlay .caption-overlay .overlay {
  min-height: 80px;
  padding: 1rem 1.5rem 0 2px;
  overflow: hidden;
  font-size: 18px;
  background: var(--wh-white);
}

@media (min-width: 768px) {
  .wh-image-w-caption-overlay .caption-overlay {
    top: -80px;
    margin-bottom: -80px;
    opacity: 0;
    transition-delay: 0ms;
  }

  .wh-image-w-caption-overlay .caption-overlay .overlay {
    min-height: 80px;
    padding: 1.5rem 2rem 0;
    font-size: 28px;
  }

  .wh-image .wh-image-w-caption-overlay .caption-overlay,
  .swiper-slide-active .wh-image-w-caption-overlay .caption-overlay {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
    transition-delay: 300ms;
  }
}

@media (min-width: 1200px) {
  .wh-image-w-caption-overlay .caption-overlay {
    top: -200px;
    margin-bottom: -200px;
  }

  .wh-image-w-caption-overlay .caption-overlay .overlay {
    min-height: 200px;
    padding: 3rem 3rem 0;
    font-size: 32px;
  }
}

.row-highlight {
  margin-right: -2rem;
  margin-left: -2rem;
  padding: 2rem 1rem;
  background-color: var(--wh-surface-alt);
}

/* 背景つきの段の中のスライダーは、前後ボタンを出さずページ送りの丸だけにする */
.wh-textimage .row-highlight .swiper-nav {
  display: none !important;
}

.wh-textimage .row-highlight .swiper-pagination {
  display: flex !important;
  margin-bottom: 0;
}

/* ── 52-cards.css ── */
/* カード
 *
 * .wh-teaser          写真＋題名のカード（トップ、カテゴリトップなど）。マウスを乗せると写真が少し拡大し、題名に下線
 * .product-image      製品カテゴリの製品カード。マウスを乗せると2枚目の写真に替わり、下の罫線が黒く太くなる
 * details.product-card  開くと中身が出る製品カード（製品詳細の関連製品など）
 * .card-blog          ブログ・ニュースのカード
 * キーボードで移動したときは、カード全体を緑の枠で囲む。 */

/* ── 写真＋題名のカード ─────────────────────────────── */

.wh-teaser {
  position: relative;
  border-radius: 0;
}

.wh-teaser:focus-within,
.wh-teaser-md:focus-within,
.wh-teaser-lg:focus-within {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

.wh-teaser .card-image-top {
  position: relative;
  overflow: hidden;
}

.wh-teaser .card-image-top img {
  width: 100%;
  transform: scale(1);
  transition: transform .4s ease-in-out;
}

.wh-teaser .card-action {
  padding: .75rem 0;
}

.wh-teaser .title {
  z-index: 2;
  width: 100%;
  margin-bottom: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--wh-link);
  transition: color .2s ease-in-out;
}

/* 題名の後ろの矢印（Font Awesome の angle-right） */
.wh-teaser .title::after {
  display: inline-block;
  margin-left: .5em;
  font: var(--fa-font-light);
  line-height: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f105";
}

.wh-teaser:hover .card-action .title {
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wh-teaser:hover .card-image-top img {
  transform: scale(1.05);
}

/* 大きいカードは拡大を控えめに */
.wh-teaser-lg:hover .card-image-top img {
  transform: scale(1.02);
}

@media (min-width: 768px) {
  .wh-teaser .card-action {
    padding: 1rem 0;
  }

  .wh-teaser .title {
    font-size: 2rem;
  }

  .wh-teaser .title::after {
    margin-left: 1rem;
    font-size: 1.5rem;
  }

  .wh-teaser:hover .card-action .title {
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}

/* ── 製品カテゴリの製品カード ──────────────────────────── */

.product-image {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
}

.product-image:focus-within {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

/* カード全体を覆うリンク。枠はカード（:focus-within）の側で出す */
.product-image .stretched-link {
  z-index: 3;
  outline: none !important;
}

.product-image .image {
  position: relative;
}

.product-image .image .img-first {
  position: relative;
  z-index: 1;
}

/* 2枚目の写真は1枚目の下に重ねておき、マウスを乗せたら前に出す */
.product-image .image .img-second {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}

.product-image:hover .img-second {
  z-index: 2;
}

.product-image .text {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: .75rem .25rem .75rem 0;
  font-size: 1.25rem;
  font-weight: var(--wh-weight-regular);
  background-color: var(--wh-white);
}

/* 下の罫線 */
.product-image .text::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--wh-gray-medium);
  content: "";
}

.product-image:hover .text::after {
  height: 2px;
  background: #000;
}

.product-image .text .title {
  font-weight: var(--wh-weight-regular);
}

.product-image .text .fa-solid {
  font-size: 1rem;
  line-height: inherit;
}

.product-image .text .number {
  display: block;
  font-weight: var(--wh-weight-light);
}

.material-image {
  height: 100%;
}

/* マテリアル一覧の見本は、画像の大きさ（160〜800px）によらず枠の幅いっぱいの正方形にそろえる（2026-10-05）。
   .img-cover は max-width だけなので、小さい画像（Leather RG・Metal 48 / 53 など）が枠より小さく出ていた */
.material-image .image .img-first {
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* マテリアル詳細の見本（左上の大きな見本と、右のカラー一覧）も、画像の大きさによらず列の幅いっぱいの正方形にそろえる。
   日本の現行サイトから取った見本は 80〜160px なので、そのままだとほかの見本より小さく出ていた（2026-10-05） */
.material-topimage img,
.material-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ── 開く製品カード（details.product-card） ───────────────────── */

details.product-card {
  position: relative;
  margin-bottom: 2rem;
  background-color: var(--wh-white);
  border-top: 1px solid transparent;
  border-radius: 0;
}

details.product-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--wh-gray-medium);
  content: "";
}

details.product-card summary:focus-visible {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

details.product-card[open] summary:focus-visible {
  outline: none;
}

/* 写真の縦横比（Bootstrap の .ratio）。スマートフォンは横長、PC は正方形 */
details.product-card .ratio {
  --wh-aspect-ratio: 62.5%;
}

details.product-card > summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  border: none;
}

details.product-card > summary::-webkit-details-marker {
  display: none;
}

details.product-card > summary .trigger {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: .75rem .25rem .75rem 0;
  font-size: 1.25rem;
  font-weight: var(--wh-weight-regular);
  background-color: var(--wh-white);
}

details.product-card > summary .trigger .icon {
  line-height: inherit;
}

details.product-card .content.ratio {
  overflow: hidden;
  background-color: var(--wh-white);
}

details.product-card .content.ratio .text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .5rem 0;
  font-size: 1rem;
}

details.product-card .content.ratio a {
  width: max-content;
}

details.product-card:not([open]):hover::after {
  height: 2px;
  background: #000;
}

details.product-card:not([open]):hover .trigger .icon::before {
  display: inline-block;
  font: var(--fa-font-solid);
  color: var(--wh-green-dark);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 開いているとき：写真を隠して中身を出し、アイコンを「閉じる」（Font Awesome の circle-xmark）にする */
details.product-card[open] {
  border-top-color: var(--wh-gray-medium);
}

details.product-card[open] > summary {
  background-color: var(--wh-white);
}

details.product-card[open] > summary .image.ratio {
  display: none;
}

details.product-card[open] > summary .trigger .icon::before {
  content: "\f057";
}

details.product-card[open] > summary .trigger:hover .icon::before {
  display: inline-block;
  font: var(--fa-font-solid);
  color: var(--wh-green-dark);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

details.product-card.product-lg > summary .trigger {
  padding: 1rem .25rem 1rem 0;
  font-size: 1.375rem;
}

details.product-card.product-lg .content {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  details.product-card .ratio {
    --wh-aspect-ratio: 100%;
  }

  details.product-card.product-lg .ratio {
    --wh-aspect-ratio: 62.5%;
  }
}

/* ── ブログ・ニュースのカード ─────────────────────────── */

.card-blog {
  border-radius: 0;
}

/* カード全体を覆うリンクの枠は、リンクの ::after（カードの大きさ）に出す */
.card-blog .stretched-link:focus-visible {
  outline: none;
}

.card-blog .stretched-link:focus-visible::after {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

.card-blog .link-more {
  font-weight: var(--wh-weight-regular);
}

.card-blog .card-date {
  display: none;
  margin-bottom: 1rem;
  font-weight: var(--wh-weight-regular);
}

.card-blog .card-title {
  font-size: 1.5rem;
  font-weight: var(--wh-weight-light);
  line-height: 1.2;
}

.card-blog.card-horizontal .card-title {
  margin-bottom: 1rem;
  font-size: 30px;
  font-weight: var(--wh-weight-light);
  line-height: 1.15;
}

@media (min-width: 992px) {
  .card-blog .card-title {
    font-size: 1.75rem;
  }

  .card-blog.card-horizontal .card-date {
    margin-bottom: 2rem;
  }

  .card-blog.card-horizontal .card-title {
    padding-bottom: 2rem;
    font-size: 3rem;
    font-weight: var(--wh-weight-light);
  }

  .card-blog.card-horizontal .link-more {
    font-size: 1.125rem;
  }
}

@media (min-width: 1200px) {
  .card-blog .card-title {
    font-size: 2rem;
  }

  .card-blog.card-horizontal .card-title {
    font-size: 52px;
  }
}

/* ── 55-product-info.css ── */
/* 製品詳細の「製品情報」（.wh-productinfo。アコーディオンの中身）と、資料のダウンロード行（.link-download） */

.wh-productinfo .accordion-content {
  padding: 1rem .25rem;
}

.wh-productinfo h3 {
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 700;
}

.wh-productinfo ul {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid #ccc;
}

.wh-productinfo ul li {
  margin-bottom: .125rem;
  line-height: 1.4;
}

.wh-productinfo ul + h3 {
  margin-top: 1.5rem;
}

/* ダウンロード行：上下に緑の罫線、右端にダウンロードのアイコン */
.link-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem .75rem .125rem;
  font-size: 1.125rem;
  color: var(--wh-link);
  border-top: 1px solid var(--wh-green-medium);
  border-bottom: 1px solid var(--wh-green-medium);
}

/* Font Awesome の file-arrow-down（アイコンを SVG に置き換えるまでの仮） */
.link-download::after {
  display: inline-block;
  margin-left: 1rem;
  font: var(--fa-font-light);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f33d";
}

/* ── 60-quote.css ── */
/* 引用（.wh-quote）
 * スマートフォンでは左に灰色の縦線を引き、PC では白い箱を写真に少し重ねて中央そろえにする。 */

.wh-quote figure.quote {
  position: relative;
  margin-bottom: 0;
  padding: 2rem 2rem 1rem;
  background-color: var(--wh-white);
}

@media (max-width: 767.98px) {
  .wh-quote figure.quote {
    padding-left: 0;
  }

  .wh-quote figure.quote blockquote {
    margin-bottom: 0;
    padding-bottom: .5rem;
    padding-left: 2rem;
    border-left: 1px solid var(--wh-gray);
  }

  .wh-quote figure.quote figcaption {
    padding-left: 2rem;
    border-left: 1px solid var(--wh-gray);
  }
}

@media (min-width: 768px) {
  .wh-quote figure.quote {
    left: -105px;
    text-align: center;
  }
}

/* ── 70-slider-controls.css ── */
/* スライダーの操作部品（ページ送り・前後ボタン・沿革の年表）
 * スライダー本体の見た目は Swiper の CSS。ここは日本版（本国）のデザインで変えている部分。 */

/* ページ送りの並び（Swiper の公式のページ送りの見た目は読み込まず、ここで決めている） */
.swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .5rem;
  margin-bottom: 3rem;
  transform: translate3d(0, 0, 0);
  transition: 300ms opacity;
}

.swiper-pagination-bullet {
  position: relative;
  display: inline-block;
  width: 40px;
  max-width: 60px !important;
  height: 32px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

/* 1枚しかないときは出さない */
.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-lock {
  display: none;
}

/* 前後ボタン：白い四角に矢印（Font Awesome の angle-left / angle-right）。端まで来たほうは薄い灰色 */
.swiper-button-prev,
.swiper-button-next {
  z-index: 5;
  width: 40px;
  height: 40px;
  color: #000;
  text-align: center;
  cursor: pointer;
  background: var(--wh-white);
  transition: all .3s ease-in-out;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  color: var(--wh-gray-light);
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: inline-block;
  font: var(--fa-font-light);
  font-size: 1rem;
  line-height: 40px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.swiper-button-prev::after { content: "\f104"; }
.swiper-button-next::after { content: "\f105"; }

.swiper-button-lock {
  display: none;
}

/* ページ送り：丸ではなく短い横線。表示中のものは黒く太くなる */
.swiper-pagination-bullet::before {
  position: absolute;
  top: calc(50% + 1px);
  right: 2px;
  left: 2px;
  display: block;
  height: 1px;
  background: var(--wh-gray-medium);
  content: "";
}

.swiper-pagination-bullet:hover::before,
.swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  top: 50%;
  height: 2px;
  background: #000;
}

/* 前後ボタン：スライダーの右上（.swiper-nav-top）などに2つ並べる。端まで来たほうは灰色 */
.swiper-nav {
  position: absolute;
  z-index: 2;
  display: flex;
}

.swiper-nav .swiper-button-prev,
.swiper-nav .swiper-button-next {
  position: static;
  z-index: initial;
  margin-top: 0;
}

.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: -2px;
}

.swiper-nav .swiper-button-prev:hover,
.swiper-nav .swiper-button-next:hover {
  color: #000;
}

.swiper-nav .swiper-button-prev.swiper-button-disabled,
.swiper-nav .swiper-button-next.swiper-button-disabled {
  color: var(--wh-gray-medium);
  opacity: 1;
}

.swiper-nav .swiper-button-prev {
  order: 1;
}

.swiper-nav .swiper-button-next {
  order: 2;
}

.swiper-nav.swiper-nav-top {
  right: 0;
  bottom: 100%;
}

@media (max-width: 767.98px) {
  .swiper-nav-mobile-top {
    right: 0;
    bottom: 100%;
  }
}

@media (min-width: 768px) {
  .swiper-nav .swiper-button-prev,
  .swiper-nav .swiper-button-next {
    width: 40px;
    height: 50px;
  }

  .swiper-nav .swiper-button-prev::after,
  .swiper-nav .swiper-button-next::after {
    font-size: 20px;
    line-height: 50px;
  }

  .swiper-nav.swiper-nav-md-bottom {
    right: 0;
    bottom: 0;
  }
}

/* 沿革（About Wilkhahn）
 * 左に年表（.swiper-pagination-timeline）。横線の右に年が出て、表示中の年は緑で線が伸びる。
 * スマートフォン（575px 以下）では年表を出さない。スライドの写真には大きな白い年を重ねる。 */
.swiper-pagination-timeline {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  background: var(--wh-white);
  transform: translate3d(0, 0, 0);
  transition: 300ms opacity;
}

.timeline-slide .image {
  position: relative;
  align-self: flex-start;
  padding-right: 0;
}

.timeline-slide .year {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 120px;
  font-weight: 700;
  line-height: 70%;
  color: var(--wh-white);
}

.timeline-slide .yeardark {
  color: var(--wh-green);
}

/* スライドの中身の枠（.container）は、Bootstrap では 1400px 以上で最大 1320px になり、
   ほかのセクション（.page-content > .frame、最大 1260px）より左に出る。見出しと本文の左端をそろえる（2026-09-29 先方指示） */
@media (min-width: 1400px) {
  .timeline-slide.container {
    max-width: 1260px;
  }
}

@media (max-width: 575.98px) {
  .swiper-pagination-timeline {
    display: none;
    flex-direction: row;
    margin-bottom: 2rem;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet b {
    opacity: 0;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet:hover b,
  .swiper-pagination-timeline .swiper-pagination-bullet-active b {
    opacity: 1;
  }
}

@media (min-width: 576px) {
  .swiper-pagination-timeline .swiper-pagination-bullet {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none !important;
    height: auto;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet b {
    display: block;
    order: 2;
    font-weight: 700;
    color: var(--wh-green);
    opacity: 0;
    transition: opacity .5s ease-in-out;
    transition-delay: .1s;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet::before {
    display: none !important;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet::after {
    position: relative;
    display: block;
    order: 1;
    width: 15px;
    height: 1px;
    margin-right: .5rem;
    background: #333;
    content: "";
    transition: all .5s ease-in-out;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet:hover b,
  .swiper-pagination-timeline .swiper-pagination-bullet-active b {
    opacity: 1;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet:hover::after,
  .swiper-pagination-timeline .swiper-pagination-bullet-active::after {
    width: 30px;
    background: var(--wh-green);
  }
}

@media (min-width: 768px) {
  .swiper-pagination-timeline .swiper-pagination-bullet::after {
    width: 30px;
  }

  .swiper-pagination-timeline .swiper-pagination-bullet:hover::after,
  .swiper-pagination-timeline .swiper-pagination-bullet-active::after {
    width: 50px;
  }
}

/* ── 75-gallery.css ── */
/* 幅なりに並べるギャラリー（.wh-gallery-offgrid。製品詳細など）
 * スマートフォンでは次の写真を右端から少しのぞかせる。PC では 12 分の 7 の幅で、1枚目を 12 分の 1 だけ右に寄せる。 */

.wh-gallery-offgrid .swiper {
  overflow: visible;
}

.wh-gallery-offgrid .swiper-wrapper .swiper-slide {
  width: 90%;
}

@media (max-width: 575.98px) {
  .wh-gallery-offgrid {
    overflow-x: clip;
  }
}

@media (min-width: 768px) {
  .wh-gallery-offgrid .swiper {
    overflow: hidden;
  }

  .wh-gallery-offgrid .swiper-wrapper .swiper-slide {
    width: calc(100% * 7 / 12);
  }

  .wh-gallery-offgrid .swiper-wrapper .swiper-slide:first-child {
    margin-left: calc(100% / 12);
  }
}

/* ── 78-lightbox.css ── */
/* 写真の拡大表示（Parvus。公式の CSS は assets/css/parvus.css）
 * 白い背景に黒い文字・ボタン。マウスを乗せたボタンは黒地に白。
 * 拡大できる写真には、マウスを乗せると中央に虫めがねのアイコン（.parvus-zoom__indicator）が出る。 */

:root {
  --parvus-background-color: var(--wh-white);
  --parvus-color: #000;
  --parvus-btn-background-color: transparent;
  --parvus-btn-color: #000;
  --parvus-btn-hover-background-color: var(--wh-black);
  --parvus-btn-hover-color: var(--wh-white);
  --parvus-caption-background-color: transparent;
  --parvus-caption-color: #000;
  --parvus-loading-error-color: #000;
}

/* 拡大表示は、ページのいちばん上に重ねる。ヘッダー（wilkhahn-overrides.css の .page-header、z-index: 10000）より上にしないと、
   ロゴとメニューが写真の上に見えてしまう（公式の Parvus は 1337。2026-09-29 に修正） */
.parvus {
  z-index: 10010;
}

.parvus-zoom__indicator {
  /* 公式は右上（inset-inline-end / inset-block-start が .5rem）。top は inset-block-start と同じものなので、ここで中央に上書きする */
  top: 50%;
  right: auto;
  left: 50%;
  color: #000;
  background-color: var(--wh-white);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease;
}

.parvus-zoom:hover .parvus-zoom__indicator {
  opacity: 1;
}

/* 説明文は読みやすい幅で中央に */
.parvus__caption {
  max-width: 1080px;
  margin: 0 auto;
}

.parvus__caption .caption {
  display: block;
}

/* 端まで来たときの前後ボタン */
.parvus__btn[aria-disabled="true"],
.parvus__btn[aria-disabled="true"]:hover {
  color: #000 !important;
  cursor: not-allowed;
  background-color: transparent !important;
  opacity: .2;
}

/* ── 80-references.css ── */
/* References（導入事例）
 *
 * .ref-filter-container  絞り込みのボタン（details）。開くと下に灰色の選択肢の箱（.ref-filter-detail）が出る
 * .wh-reference          事例のカード。マウスを乗せると写真が少し拡大し、題名に下線が付く */

/* 本国の業種などの絞り込み（.ref-filters）は日本版では使わない */
.ref-filters {
  display: none;
}

.ref-filter-container {
  position: relative;
  margin-bottom: 2rem;
}

.ref-filter-container > details {
  display: inline-block;
  margin: 0 20px 1rem 0;
}

.ref-filter-container > details .summary-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

/* 下向きの矢印（Font Awesome の angle-down）。絞り込み中はじょうごのアイコン（filter） */
.ref-filter-container > details .summary-button::after {
  display: inline-block;
  margin-left: .5rem;
  font: var(--fa-font-solid);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f107";
  transition: transform .3s;
}

.ref-filter-container > details .summary-button.active::after {
  transform: none !important;
  content: "\f0b0";
}

/* 開いているとき：ボタンと選択肢の箱をつなげて1つの灰色の面に見せる */
.ref-filter-container > details[open] .summary-button {
  background-color: var(--wh-surface);
  border-color: var(--wh-surface);
  border-radius: 0;
}

/* ボタンと箱の間（8px）を埋める */
.ref-filter-container > details[open] .summary-button::before {
  position: absolute;
  top: 100%;
  right: -1px;
  left: -1px;
  display: block;
  width: 100%;
  height: 9px;
  background-color: var(--wh-surface);
  content: "";
}

.ref-filter-container > details[open] .summary-button::after {
  transform: rotate(180deg);
}

.ref-filter-detail {
  position: absolute;
  left: 0;
  z-index: 10;
  width: 100%;
  margin-top: 8px;
  padding: 1rem;
  background: var(--wh-surface);
}

.ref-filter-detail .ref-filter-label {
  display: flex;
  align-items: flex-start;
}

.ref-filter-detail .ref-filter-label input[type="checkbox"] {
  margin: 4px 8px 0 0;
}

.ref-filter-detail .ref-filter-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
}

/* PC では選択肢の箱を固定幅にし、右端のボタンは右そろえで開く */
@media (min-width: 768px) {
  .ref-filter-container > details {
    position: relative;
  }

  .ref-filter-container > details:nth-child(4) .ref-filter-detail {
    right: 0;
    left: auto;
  }

  .ref-filter-detail {
    width: 300px;
  }
}

@media (min-width: 1024px) {
  .ref-filter-container > details:nth-child(4) .ref-filter-detail {
    right: auto;
    left: 0;
  }

  .ref-filter-container > details:last-of-type .ref-filter-detail {
    right: 0;
    left: auto;
  }
}

/* 事例のカード */
.wh-reference {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

.wh-reference .card-image-ref {
  overflow: hidden;
  background-color: var(--wh-surface);
  background-position: center;
  background-repeat: no-repeat;
}

.wh-reference .card-image-ref img {
  object-fit: cover;
  background-color: var(--wh-surface);
  transform: scale(1);
  transition: transform .4s ease-in-out;
}

.wh-reference .card-action {
  padding: .75rem 0;
}

.wh-reference .title {
  z-index: 2;
  width: 100%;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.1;
  color: var(--wh-link);
  transition: color .2s ease-in-out;
}

/* 題名の後ろの矢印（Font Awesome の angle-right） */
.wh-reference .title::after {
  display: inline-block;
  margin-left: .5em;
  font: var(--fa-font-light);
  line-height: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f105";
}

.wh-reference:hover .card-action .title {
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wh-reference:hover .card-image-ref img {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .wh-reference .card-action {
    padding: 1rem 0;
  }

  .wh-reference .title {
    font-size: 1.5rem;
  }

  .wh-reference .title::after {
    margin-left: 1rem;
    font-size: 1.5rem;
  }

  .wh-reference:hover .card-action .title {
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}

/* ── 85-share.css ── */
/* SNS の共有ボタン（.shariff。References 詳細）
 * アイコンだけを横に並べ、件数と文字は出さない。マウスを乗せると各サービスの色になる。 */

.shariff {
  display: block;
}

.shariff ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shariff ul li {
  margin-left: .5rem;
  overflow: hidden;
  -webkit-box-flex: 1;
}

.shariff ul li .share_count,
.shariff ul li .share_text {
  display: none;
}

.shariff ul li a {
  position: relative;
  display: block;
  text-decoration: none;
}

/* アイコンの大きさ（端末の共有ボタンと SNS のボタン） */
.btn-share-native .fa-solid,
.shariff ul li a .fab {
  width: 35px;
  font-size: 24px;
  line-height: 35px;
  text-align: center;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .btn-share-native .fa-solid,
  .shariff ul li a .fab {
    width: 40px;
    font-size: 32px;
    line-height: 40px;
  }
}

/* Facebook は四角いロゴ、X（旧 Twitter）は X のロゴにする */
.shariff .facebook .fa-facebook-f::before { content: "\f082"; }
.shariff .twitter .fa-twitter::before { content: "\e61b"; }

.shariff .facebook a:hover { color: #3b5998; }
.shariff .linkedin a:hover { color: #0369a0; }
.shariff .twitter a:hover { color: #32bbf5; }
.shariff .whatsapp a:hover { color: #34af23; }