/* Shared desktop geometry for every two-column hero.
   This preserves the ME reference proportions regardless of each image's native aspect ratio. */
@media (min-width: 768px) {
  .wh-header-2cols .left-col > .image {
    aspect-ratio: 600 / 501 !important;
    overflow: hidden;
  }

  .wh-header-2cols .right-col > .image {
    aspect-ratio: 600 / 546 !important;
    overflow: hidden;
  }

  .wh-header-2cols .left-col > .image picture,
  .wh-header-2cols .right-col > .image picture,
  .wh-header-2cols .left-col > .image img,
  .wh-header-2cols .right-col > .image img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .wh-header-2cols .left-col > .image img,
  .wh-header-2cols .right-col > .image img {
    object-fit: cover;
  }
}

/* Shared CTA behaviour for two-column heroes. */
.wh-header-2cols .buttons .btn.btn-primary:hover,
.wh-header-2cols .buttons .btn.btn-primary:focus-visible {
  color: #fff;
  background-color: var(--wh-green);
  border-color: var(--wh-green);
}

/* .row-highlight の左右マージンをモバイルで浅くする。

   wilkhahn-site.css の定義は
     .row-highlight { padding: 2rem 1rem; margin-left: -2rem; margin-right: -2rem }
   で、これは列に余裕のあるデスクトップ幅を前提にしている。
   390px 幅では引き出し量が親のパディングを超え、横スクロールが 1px 前後残る。

   overflow-x: hidden で隠す手もあるが、それは本当にはみ出している要素を
   見えなくするだけで、原因は残る。ここでは要素自体の幅を直す。

   対象は IN / ON / Occo 3ページ / Yonda / Yonda Lounge の計7ページだが、
   製品別CSSは作らない方針のため、共通の規則としてここへ置く。
   ブレークポイントは Bootstrap の md 未満に合わせてある。 */
@media (max-width: 767.98px) {
  .row-highlight {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

/* トップの FOCUS PRODUCTS。2枚の画像枠を正方形にそろえる。

   使っている写真は 600x501 と 600x546 で縦横比が違い、そのままだと
   カードの下端がずれる。枠の比率を固定して cover でトリミングする。

   .wh-teaser は製品トップ・カテゴリ一覧・About など他でも使うので、
   共通側の指定は変えず、このブロックにだけ付く .wh-focus-products で限定する
   （クラスは wh-build-styleguide.py の build_focus_products() が付ける）。

   overflow:hidden は .wh-teaser .card-image-top にも入っているが、
   ホバーの1.02倍拡大がはみ出さないことがこの指定の前提なので、
   共通側の変更に巻き込まれないようここにも書いておく。 */
.wh-focus-products .card-image-top {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wh-focus-products .card-image-top picture,
.wh-focus-products .card-image-top img {
  display: block;
  width: 100%;
  height: 100%;
}

.wh-focus-products .card-image-top img {
  object-fit: cover;
  object-position: center;
}


/* ══════════════════════════════════════════════════════════════════
   ここから下は、各ページのHTMLへ直接書かれていた <style> を集約したもの。
   2026-08-12。同じCSSがページごとに複製され、公開HTMLが重複で膨らんでいた。

   移した基準は「複数ページで内容が同一」かつ「セレクタが名前空間で閉じており、
   共通CSSにしても新たに影響を受けるページが無い」こと。
   Swiperの枚数から算出する幅など、内容に依存するものはHTML側に残している。
   ══════════════════════════════════════════════════════════════════ */


/* ── pCon（製品コンフィギュレーター）の枠 ──────────────────────────
   取得元の製品詳細HTMLに入っていた指定。公開35ページ＋確認用1ページで
   まったく同じ内容が36回複製されていた。 */
#pconCollapse {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  margin-bottom: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.pcon-iframe {
  border: 0;
  height: 100vh;
  width: 100%;
}

@media (min-width: 768px) {
  .pcon-iframe {
    height: calc(100vh - 300px);
  }
}


/* ── セクショントップのカードグリッド（About / Service）────────────
   2ページで同一。画像の縦横比をそろえる。
   2026-09-28: References に合わせて正方形に（先方資料 20260917Webサイト検討 Page19） */
.wh-section-landing-grid .card-image-top {
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
}

.wh-section-landing-grid .card-image-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文の文字サイズ（サイト全体、PCのみ）。2026-09-28 指示：全体的に控えめに一回り小さく。
   本国 wilkhahn-site.css の 768px 以上の指定（本文22px）を 2px 下げる。スマートフォンの大きさ、カード名（.title）は変えない。
   リード文（copy-xl / lg / md）の同じ調整は、2026-09-29 に assets/css/base.css の文字サイズの段階へ移した。 */
@media (min-width: 768px) {
  .ce-bodytext:not(.ce-bodytext-16) p:not([class]),
  .ce-bodytext:not(.ce-bodytext-16) ol:not([class]),
  .ce-bodytext:not(.ce-bodytext-16) .list-arrow,
  .ce-bodytext:not(.ce-bodytext-16) .p-arrow,
  .ce-bodytext:not(.ce-bodytext-16) .list-anchors {
    font-size: 20px;
  }
}

/* トップのメインビジュアル（#c1）。Graph のスライドは見出し（.h-xxl）の下に
   キャッチ（.subline.copy-xl）を置く。本国の文字の箱は 768px 以上で高さ 330px 固定のため、
   キャッチ下の余白（copy-xl の 1em）を半分にして、900px 前後でボタンが切れないようにする。 */
#c1 .header-full .text-fade-in .subline {
  margin-bottom: .5em;
}

/* 見出しの「英語＋日本語」の日本語（About Wilkhahn の Our history / 歴史 など）。
   日本語は補足の扱いで小さくする。生成は build_production.py の bake_translations()
   （スタイルガイドでは wh-build-styleguide.py の翻訳JS）。 */
.wh-heading-ja {
  display: block;
  margin-top: .4em;
  font-size: .5em;
  line-height: 1.4;
}

/* 小さめの見出し（.h-md。Dynamic seating の 3つのメカニズムなど。.h-lg。Sustainability Management など）では
   0.5em だと小さすぎるため、本文と同じくらいの大きさに固定する */
.h-md .wh-heading-ja,
.h-lg .wh-heading-ja {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .h-md .wh-heading-ja,
  .h-lg .wh-heading-ja {
    font-size: 1.25rem;
  }
}

/* 段落の太字を見出しに使っているもの（Eco-friendly Production）の上の間。
   取得元の空の段落（前の段落の間 1rem＋1行分＋空の段落の間 1rem）と同じだけ空ける */
.ce-bodytext p[data-wh-heading]:not(:first-child) {
  margin-top: calc(1.5em + 2rem);
}

/* 段落の太字を見出しに使っているもの（Eco-friendly Production）。本文より一回り小さく、太字にしない */
strong + .wh-heading-ja {
  margin-top: .25em;
  font-size: .8em;
  font-weight: var(--wh-weight-light);
}

/* 本文の中の見出し（クラスのない h3。About Wilkhahn の Production halls など）。
   英語は少し太く、日本語は細字の補足。h3 は PC 24px なので 0.5em だと小さすぎる。小見出し（.h-overline）の日本語と同じ大きさにする */
.ce-bodytext h3:not([class]):has(.wh-heading-ja) {
  font-weight: var(--wh-weight-regular);
}

.ce-bodytext h3:not([class]) .wh-heading-ja {
  margin-top: .3em;
  font-size: 14px;
  font-weight: var(--wh-weight-light);
}

@media (min-width: 768px) {
  .ce-bodytext h3:not([class]) .wh-heading-ja {
    font-size: 16px;
  }
}

/* 写真の説明の「英語⏎日本語」（About Wilkhahn の Production halls / 工場棟 など）。
   英語は少し大きく太く、日本語はふだんの説明文と同じ（16px の細字） */
.figure-caption .wh-caption-en-ja {
  font-size: 18px;
  font-weight: var(--wh-weight-regular);
}

.figure-caption .wh-caption-en-ja .wh-heading-ja {
  margin-top: .15em;
  font-size: 16px;
  font-weight: var(--wh-weight-light);
}

/* 見出しの上の小さな英字（.h-overline。Ecological Design Principles の3つの原則など）。
   英字の字間と大文字の指定は日本語には付けない */
.h-overline .wh-heading-ja {
  margin-top: .5em;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 768px) {
  .h-overline .wh-heading-ja {
    font-size: 16px;
  }
}

/* カテゴリトップ（Products / Service / About）のカード名「英語＋日本語」。
   2026-09-28 指示：英語は一回り小さく、リンクの矢印は英語の後ろ。日本語はさらに小さい補足の扱い。
   生成は wh-build-styleguide.py の build_section_landing() と product_pages.py の apply_products_top_titles()。
   矢印は本国の .wh-teaser .title:after と同じ字形（Font Awesome light の f105）を英語側に付け直す。 */
.wh-teaser .title.wh-card-title {
  font-size: 1.125rem;
}

.wh-teaser .title.wh-card-title:after {
  display: none;
}

.wh-card-title .wh-card-title-en:after {
  display: inline-block;
  font: var(--fa-font-light);
  text-rendering: auto;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: inherit;
  margin-left: .5em;
  content: "\f105";
}

.wh-card-title .wh-card-title-ja {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  line-height: 1.4;
}

/* ホバーの下線は英語だけに付ける */
.wh-teaser:hover .card-action .title.wh-card-title {
  text-decoration: none;
}

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

@media (min-width: 768px) {
  .wh-teaser .title.wh-card-title {
    font-size: 1.625rem;
  }

  .wh-card-title .wh-card-title-en:after {
    margin-left: .75rem;
    font-size: 1.25rem;
  }

  .wh-card-title .wh-card-title-ja {
    font-size: 1rem;
  }

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


/* ── News（一覧・詳細の2ページ）────────────────────────────────── */
.news-wrap { max-width: 900px; margin: 0 auto; padding: 3rem 1rem 5rem; }
/* 見出しは中央に「News」、その下に小さく「ニュース」（.wh-heading-ja）。年のプルダウンは右に（2026-10-16 修正依頼 p.10） */
.news-head { display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  margin-bottom: 2.5rem; text-align: center; }
.news-head .h-xxl { margin: 0; }
.news-yearselect { align-self: flex-end; }
.news-yearselect select { padding: .55rem 2.2rem .55rem .9rem; border: 1px solid #1a1a1a;
  border-radius: 2px; background: #fff; font: 500 .95rem/1 sans-serif; color: #1a1a1a;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231a1a1a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; }
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ddd; }
.news-item { border-bottom: 1px solid #ddd; }
.news-item a { display: flex; gap: 1.75rem; align-items: baseline; padding: 1.35rem .5rem;
  text-decoration: none; color: inherit; transition: background .15s; }
.news-item a:hover { background: #f6f6f6; }
.news-item a:hover .news-title { color: #6ea100; }
.news-date { flex: 0 0 6.5rem; color: #6ea100; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.news-title { flex: 1; font-size: 1.05rem; line-height: 1.55; transition: color .15s; }
.news-detail-wrap { max-width: 760px; margin: 0 auto; padding: 2.5rem 1rem 5rem; }
.news-detail-meta { color: #6ea100; font-weight: 700; font-variant-numeric: tabular-nums;
  display: block; margin: 2.5rem 0 .75rem; }
.news-detail-title { font-size: 2rem; line-height: 1.4; margin: 0 0 2rem;
  padding-bottom: 1.5rem; border-bottom: 2px solid #1a1a1a; }
.news-detail-body p { font-size: 1rem; line-height: 1.9; margin: 0 0 1.4rem; }
/* MT で投稿した本文の画像は、元の幅（width 属性や style の width）のまま入るので、スマホで画面からはみ出していた（2026-10-07）。
   本文の幅を超えないように縮める。左右の余白は本文と同じ。style に高さが書かれていても縦横比が崩れないように height も上書きする */
.news-detail-body img,
.news-detail-body video,
.news-detail-body iframe { max-width: 100% !important; }
.news-detail-body img,
.news-detail-body video { height: auto !important; }
.news-detail-body figure,
.news-detail-body table { max-width: 100%; }
/* MT の画像は style で右に 20px の余白（mt-image-left）が付くので、幅いっぱいに縮めたスマホでは、その分はみ出す。スマホでは左右の余白をなくす */
@media (max-width: 767.98px) {
  .news-detail-body img { margin-left: 0 !important; margin-right: 0 !important; }
}


/* ── 日本版オリジナルページ：Dealers / Privacy / Terms of Use / Contact
   build_japan_general_pages.py が12ページへ同じ8KBを複製していた。
   セレクタは .jp-general* と .jp-contact* に閉じている。 */
.jp-general{max-width:1180px;margin:0 auto;padding:3rem 1rem 7rem;color:#232323}.jp-general-head{max-width:900px;margin:0 auto 3rem;text-align:center}.jp-general-head .h-xxl{margin:0;font-size:3.75rem;font-weight:300;line-height:1.15}.jp-general-head p{margin:1rem 0 0;font-size:1.1rem;color:#686868}.jp-general-source{max-width:900px;margin:0 auto}.jp-general-source p,.jp-general-source li,.jp-general-source dd{font-size:1rem;line-height:1.8}.jp-general-source a{overflow-wrap:anywhere;word-break:break-word}.jp-general-source p{margin:0 0 1.25rem}.jp-general-source h2.subtitle,.jp-general-source h3.subtitle{margin:0 0 2rem;font-size:1.5rem;font-weight:400;line-height:1.15}.jp-general-source h3.subtitle{margin-top:4rem}.jp-general-source a{color:inherit;text-decoration:underline;text-underline-offset:.2em}.jp-general-source dl{margin:0 0 3rem}.jp-general-source dt{margin-top:2rem;font-size:1.15rem;font-weight:400}.jp-general-source dd{margin:1rem 0 0}.jp-general-source ul{margin:0;padding-left:1.25rem}.jp-general-local-nav{max-width:900px;margin:0 auto 3.5rem}.jp-general-local-nav ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;padding:0;margin:0;list-style:none}.jp-general-local-nav a{display:inline-flex;align-items:center;gap:.5rem;color:#232323;font-size:1rem;line-height:1.5;text-decoration:none}.jp-general-local-nav a::after{content:'›';display:block;margin:0;font-size:1.35em;font-weight:300;line-height:1}.jp-general-local-nav a:hover{text-decoration:underline;text-underline-offset:.25em}.jp-general-source #dealers-list table{width:100%!important;margin:0 0 3rem;border-collapse:collapse;table-layout:fixed}.jp-general-source #dealers-list caption{caption-side:top;padding:0 0 1rem;text-align:left;font-size:1.25rem;font-weight:400}.jp-general-source #dealers-list th,.jp-general-source #dealers-list td{padding:1rem;vertical-align:top;border-top:1px solid #d5d5d5;font-size:1rem;font-weight:300;line-height:1.55}.jp-general-source #dealers-list th{width:25%;font-weight:400}.jp-general-source #dealers-list .dealers-table-01 .first{width:25%}.jp-general-source #dealers-list .dealers-table-01 .second{width:50%}.jp-general-source #dealers-list .dealers-table-01 .third{width:17%}.jp-general-source #dealers-list .dealers-table-01 .fourth{width:8%}.jp-general-source #dealers-list .dealers-table-02 .first{width:23%}.jp-general-source #dealers-list .dealers-table-02 .second{width:34%}.jp-general-source #dealers-list .dealers-table-02 .third{width:20%}.jp-general-source #dealers-list .dealers-table-02 .fourth{width:15%}.jp-general-source #dealers-list .dealers-table-02 .fifth{width:8%}.jp-general-source #dealers-list .dealers-table-01 tr{background:#bdbdbd;border-bottom:6px solid #fff}.jp-general-source #dealers-list .dealers-table-01 th,.jp-general-source #dealers-list .dealers-table-01 td{border-top:0;color:#fff}.jp-general-source #dealers-list .third,.jp-general-source #dealers-list .fourth,.jp-general-source #dealers-list .fifth{white-space:nowrap}.jp-general-source #dealers-list .btn{font-size:.875rem}.jp-general-accordions{margin:0 0 3rem}.jp-general-accordion-content{padding-bottom:1rem}.jp-general-accordion-content dd{margin:0;padding:0}.jp-general-accordion-content dd>ul{margin-bottom:0}@media(max-width:767.98px){.jp-general{padding-top:3rem}.jp-general-head{margin-bottom:2.5rem}.jp-general-head .h-xxl{font-size:2.5rem}.jp-general-local-nav{margin-bottom:2.5rem}.jp-general-source #dealers-list,.jp-general-source #dealers-list table,.jp-general-source #dealers-list tbody,.jp-general-source #dealers-list tr,.jp-general-source #dealers-list th,.jp-general-source #dealers-list td{display:block;width:100%!important}.jp-general-source #dealers-list table{margin-bottom:2.5rem;table-layout:auto}.jp-general-source #dealers-list th,.jp-general-source #dealers-list td{padding:.7rem 0;border:0}.jp-general-source #dealers-list tr{padding:1rem 0;border-top:1px solid #d5d5d5}.jp-general-source #dealers-list .dealers-table-01 tr{padding:1rem;border-top:0;border-bottom:6px solid #fff}.jp-general-source #dealers-list .third,.jp-general-source #dealers-list .fourth,.jp-general-source #dealers-list .fifth{display:inline-block;width:auto!important;margin-right:.5rem}.jp-general-source dt{margin-top:1.5rem}}

.jp-contact{max-width:900px;margin:0 auto}.jp-contact-intro{margin:0 0 4rem}.jp-contact-intro .contents-text-07{margin:0 0 1.5rem;font-size:1rem;line-height:1.8}.jp-contact-intro .fc-red{color:#d80000}.jp-contact-intro .announce{margin:0 0 2rem!important;padding:1.5rem!important;border:1px solid #514f50!important;color:#514f50;line-height:1.8}.jp-contact-intro .announce p{margin:0 0 1.25rem!important}.jp-contact-intro .announce p:last-child{margin-bottom:0!important}.jp-contact-intro .announce small{font-size:.875rem!important}.jp-contact-intro .icon-rect-02{color:#4d4d4d}.jp-contact-intro .contents-contact-text-01{margin:2.5rem 0 0;padding:.5rem 1rem;border:1px solid #999;font-size:.95rem;line-height:1.7}.jp-contact-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin:0;padding:0;list-style:none}.jp-contact-options li{border-top:1px solid #232323;padding:1.5rem 0}.jp-contact-options a{display:inline-flex;align-items:center;gap:.75rem;font-size:2rem;font-weight:300;text-decoration:none}.jp-contact-options a::after{content:'›';font-size:1.35em;font-weight:300;line-height:1}.jp-contact-options a:hover{text-decoration:underline;text-underline-offset:.2em}.jp-contact-options p{margin:1rem 0 0;font-size:1rem;line-height:1.7}@media(max-width:767.98px){.jp-contact-intro{margin-bottom:3rem}.jp-contact-options{grid-template-columns:1fr;gap:0}.jp-contact-options a{font-size:1.6rem}.jp-contact-intro .announce{padding:1rem!important}.jp-contact-intro .contents-contact-text-01{padding:.75rem}}

.jp-contact-email-cta{margin:3rem 0;text-align:center}.jp-contact-email-cta .btn,.jp-contact-options .btn{font-size:1rem;font-weight:400;text-decoration:none}.jp-contact-email-cta .btn:hover,.jp-contact-options .btn:hover{text-decoration:none}.jp-contact-email-cta .jp-contact-privacy-note{margin:2.5rem 0 0!important;font-size:.75rem!important;line-height:2!important;color:#686868}.jp-contact-options{display:block;text-align:center}.jp-contact-options li{border:0;padding:0}.jp-contact-options .jp-contact-option-maintenance{margin-top:0;padding-top:3rem;border-top:1px solid #d5d5d5}.jp-contact-options p{margin:1rem 0 0;line-height:1.7}@media(min-width:768px){.jp-contact-options p{white-space:nowrap}}

.jp-general-source #dealers-list .dealers-table-01{border-top:0}
.jp-general-source #dealers-list .dealers-table-01 tr{background:transparent;border-top:3px solid #232323;border-bottom:0}
.jp-general-source #dealers-list .dealers-table-01 th,.jp-general-source #dealers-list .dealers-table-01 td{border-top:0;color:#232323}
.jp-general-source #dealers-list .dealers-table-01 .first{width:22%}
.jp-general-source #dealers-list .dealers-table-01 .second{width:49%}
.jp-general-source #dealers-list .dealers-table-01 .dealer-actions-cell{width:29%}
.jp-general-source #dealers-list .dealers-table-02 .first{width:20%}
.jp-general-source #dealers-list .dealers-table-02 .second{width:34%}
.jp-general-source #dealers-list .dealers-table-02 .third{width:17%}
.jp-general-source #dealers-list .dealers-table-02 .dealer-actions-cell{width:29%}
.jp-general-source #dealers-list .dealer-actions-cell{padding:.5rem .75rem 1rem}
.jp-general-source #dealers-list .dealer-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:.25rem;white-space:nowrap}
.jp-general-source #dealers-list .dealer-actions a:first-child{padding-right:0}
.jp-general-source #dealers-list .dealer-actions a:last-child{padding-left:0}
.jp-general-local-nav ul{justify-content:center}
.jp-general-source #contents-dealers-first h2.subtitle{text-align:center}
.jp-general-source #dealers-list caption{text-align:center}
@media(max-width:767.98px){.jp-general-source #dealers-list .dealers-table-01 tr{border-top:3px solid #232323;border-bottom:0}.jp-general-source #dealers-list .dealer-actions-cell{display:block!important;width:100%!important;padding:.7rem 0}.jp-general-source #dealers-list .dealer-actions{justify-content:flex-end}}


/* ── 日本版オリジナルページ：Maintenance 4件 / Downloads
   build_japan_service_pages.py が5ページへ同じ7.8KBを複製していた。
   セレクタは .jp-service* と .jp-maintenance* に閉じている。 */
.jp-service{max-width:1180px;margin:0 auto;padding:5rem 1rem 7rem;color:#232323}
.jp-service-head{max-width:900px;margin:0 auto 4rem}.jp-service-head .h-xxl{margin:0;font-size:clamp(3rem,7vw,6.5rem);font-weight:300;line-height:1}.jp-service-head p{margin:1rem 0 0;font-size:1.125rem;color:#686868}
.jp-service-source{max-width:900px;margin:0 auto}.jp-service-source .contents-block{margin:0 0 5rem}.jp-service-source .contents-block-inner{max-width:none}.jp-service-source h2.subtitle{margin:0 0 2rem;font-size:clamp(1.75rem,3vw,2.75rem);font-weight:300;line-height:1.2}.jp-service-source p,.jp-service-source li{font-size:1rem;line-height:1.8}.jp-service-source p{margin:0 0 1.25rem}.jp-service-source ul{margin:0;padding-left:1.25rem}.jp-service-source a{color:inherit;text-decoration:underline;text-underline-offset:.2em}.jp-service-source img{display:block;max-width:100%;height:auto}.jp-service-source .contents-text-01[style]{padding:1.5rem!important;border-color:#555!important}
.jp-service-source .slide{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.5fr);gap:2.5rem;align-items:center;border-top:1px solid #d5d5d5;padding:2.5rem 0}.jp-service-source .slide:last-child{border-bottom:1px solid #d5d5d5}.jp-service-source .slide-index{font-size:2.5rem!important;line-height:1!important;color:var(--wh-green);font-weight:300}.jp-service-source .slide .right img{width:100%}.jp-service-source .left-02{grid-column:1/-1}.jp-service-source .position,.jp-service-source .btn-slide-prev,.jp-service-source .btn-slide-next{display:none!important}.jp-service-source .btn-green-01,.jp-service-source p.btn a{display:inline-flex;align-items:center;min-height:3.25rem;padding:.75rem 1.25rem;border:1px solid #232323;text-decoration:none;line-height:1.2}.jp-service-source .btn-green-01:hover,.jp-service-source p.btn a:hover{background:var(--wh-green);border-color:var(--wh-green);color:#fff}
.jp-service-source .contents-service-casters ul{list-style:none;padding:0}.jp-service-source .contents-service-casters.section02 li,.jp-service-source .contents-service-casters.section04 li{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1fr);gap:2rem;align-items:center;padding:2rem 0;border-top:1px solid #d5d5d5}.jp-service-source .contents-service-casters.section02 li:last-child,.jp-service-source .contents-service-casters.section04 li:last-child{border-bottom:1px solid #d5d5d5}.jp-service-source .contents-service-casters figure{margin:0}.jp-service-source .contents-service-casters p strong:first-child{display:inline-block;margin-right:.75rem;font-size:2rem;font-weight:300;color:var(--wh-green)}
.jp-maintenance-intro{max-width:1000px;margin:0 auto 2.5rem;font-size:1.125rem;line-height:1.8}.jp-maintenance-process{max-width:1000px;margin:0 auto 4.5rem}.jp-maintenance-process h2{font-size:1.25rem;font-weight:400;margin:0 0 1.5rem}.jp-maintenance-process h2::before{content:'';display:inline-block;width:1rem;height:1rem;margin-right:.5rem;background:#4d4d4d}.jp-maintenance-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem 2rem;padding:0;margin:0;list-style:none}.jp-maintenance-steps li{position:relative;min-height:8rem;padding:1rem;background:#c8c8c8;color:#fff;font-size:1.125rem;font-weight:500}.jp-maintenance-steps li:not(:nth-child(5n))::after{content:'›';position:absolute;right:-1.55rem;top:50%;transform:translateY(-55%);font-size:3.5rem;font-weight:300;color:#bdbdbd}.jp-maintenance-steps small{display:block;margin-top:1.5rem;color:#3e3e3e;font-size:.9rem;font-weight:400;line-height:1.6}.jp-maintenance-cards{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.jp-maintenance-card{display:flex;min-height:12rem;flex-direction:column;justify-content:space-between;padding:1.5rem;border-top:2px solid #232323;background:#f3f3f3;color:#232323;text-decoration:none}.jp-maintenance-card:hover{background:var(--wh-green);color:#fff}.jp-maintenance-card h2{margin:0;font-size:1.8rem;font-weight:300}.jp-maintenance-card span{font-size:1rem}.jp-maintenance-card span::after{content:'›';margin-left:.5rem;font-size:1.5rem}
@media(max-width:767.98px){.jp-service{padding-top:3.5rem}.jp-service-head{margin-bottom:3rem}.jp-service-source .slide,.jp-service-source .contents-service-casters.section02 li,.jp-service-source .contents-service-casters.section04 li{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0}.jp-service-source .slide-index{font-size:2rem!important}.jp-maintenance-steps{grid-template-columns:1fr;gap:.75rem}.jp-maintenance-steps li{min-height:auto}.jp-maintenance-steps li::after{display:none}.jp-maintenance-steps small{margin-top:.5rem}.jp-maintenance-cards{grid-template-columns:1fr}.jp-maintenance-card{min-height:8rem}}
/* Company page typography and shared card treatment overrides. */
.jp-service{padding-top:3rem}.jp-service-head{margin-bottom:3rem;text-align:center}.jp-service-head .h-xxl{font-size:3.75rem;line-height:1.15}.jp-service-head p{font-size:1.1rem}.jp-service-source h2.subtitle{font-size:1.5rem;font-weight:400;line-height:1.15}.jp-service-source .contents-block{margin-bottom:4rem}
.jp-service-source .slide-sec{position:relative;overflow:hidden;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.jp-service-source .slide-wrap{overflow:hidden}.jp-service-source .slides{display:flex;transition:transform .35s ease}.jp-service-source .slide{display:grid;flex:0 0 100%;border:0}.jp-service-source .slide:last-child{border:0}.jp-service-source .jp-service-slider-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.25rem}.jp-service-source .jp-service-slider-control{width:2.75rem;height:2.75rem;border:1px solid #232323;background:#fff;color:#232323;font-size:2rem;font-weight:300;line-height:1;cursor:pointer}.jp-service-source .jp-service-slider-control:hover{background:var(--wh-green);border-color:var(--wh-green);color:#fff}.jp-service-source .jp-service-slider-count{min-width:3.5rem;text-align:center;font-size:.9rem}
.jp-maintenance-cards{gap:1.5rem}.jp-maintenance-card{display:block;min-height:0;padding:0;border:0;background:transparent;color:#232323;text-decoration:none}.jp-maintenance-card:hover{background:transparent;color:#232323}.jp-maintenance-card-image{display:block;overflow:hidden}.jp-maintenance-card-image img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .35s ease}.jp-maintenance-card:hover .jp-maintenance-card-image img{transform:scale(1.03)}.jp-maintenance-card .card-action{position:relative;display:flex;align-items:center;min-height:4.5rem}.jp-maintenance-card .title{margin:0;font-size:1.45rem;font-weight:300;line-height:1.25}.jp-maintenance-card:hover .title{text-decoration:underline;text-underline-offset:.2em}
/* CADデータベースの使い方（2026-11-04 先方指示）：画像に枠を付け、スライドの中で天地中央に置く。
   .clearfix の ::before / ::after がグリッドの行になり、手順の中身が上に寄っていた */
.jp-service-source #contents-service-dl-third .slide{align-content:center}
.jp-service-source #contents-service-dl-third .slide::before,.jp-service-source #contents-service-dl-third .slide::after{display:none}
/* 枠の大きさは 2 枚でそろえる（先方指示）。縦横比は高いほうの手順 2 の画像（1200×654）。手順 1 は枠の中で上下中央 */
.jp-service-source #contents-service-dl-third .slide .right img{border:1px solid #d5d5d5;aspect-ratio:1200/654;object-fit:contain;background:#fff}
.jp-service-source .contents-service-casters p strong.jp-casters-products{display:inline-block;margin-right:.75rem;font-size:1.6rem;font-weight:400;color:var(--wh-green)}
/* キャスターのオンラインショップのボタン（2026-10-16 修正依頼 p.9）。現行サイトと同じくらいの大きさ（幅約500px・高さ約100px、
   英語 24px・日本語 14px）で中央に置く。線のボタン（.btn-primary）の見た目はそのまま */
.jp-service-source .jp-casters-shop-cta{margin:3rem 0 0;text-align:center}
.jp-service-source .jp-casters-shop-cta .btn{width:100%;max-width:500px;padding:1.5rem 2rem;font-size:1.5rem;line-height:1.3}
.jp-service-source .jp-casters-shop-cta .btn small{display:inline-block;margin-top:.25rem;font-size:.875rem}
.jp-service-source #contents-service-maint-first h2.subtitle{margin:0 0 3rem}.jp-service-source #contents-service-maint-first h3.lead,.jp-maintenance-detail h3.lead{margin:3.5rem 0 1.25rem;font-size:1.25rem;font-weight:400;line-height:1.4}.jp-service-source #contents-service-maint-first h2.subtitle+h3.lead{margin-top:0}.jp-service-source #contents-service-maint-first .contents-service-list-01,.jp-maintenance-detail .contents-service-list-01{margin:0;padding:0;list-style:none}.jp-service-source #contents-service-maint-first .contents-service-list-01 li,.jp-maintenance-detail .contents-service-list-01 li{position:relative;margin:.55rem 0;padding-left:1.25rem;line-height:1.8}.jp-service-source #contents-service-maint-first .contents-service-list-01 .icon-circle-01,.jp-maintenance-detail .contents-service-list-01 .icon-circle-01{position:absolute;top:0;left:0;font-size:.7em;line-height:2.55}
/* Maintenance トップ（2026-10-05 作り直し。2026-09-17 先方資料 p.21）
   ①② お問い合わせ・キャスターへのリンク（2列）と、③④ 保証・お手入れの開閉式（details.accordion） */
.jp-maintenance-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.jp-maintenance-link{display:block;color:#232323;text-decoration:none}
.jp-maintenance-link-image{display:block;overflow:hidden}
.jp-maintenance-link-image img{display:block;width:100%;aspect-ratio:11/6;object-fit:cover;transition:transform .35s ease}
.jp-maintenance-link:hover .jp-maintenance-link-image img{transform:scale(1.03)}
.jp-maintenance-link-text{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.35rem;min-height:6rem;padding:1.25rem 3rem 1.25rem 0;border-bottom:1px solid #d5d5d5}
.jp-maintenance-link-text::after{content:'\f105';position:absolute;top:50%;right:.5rem;font:var(--fa-font-light);font-size:1.5rem;transform:translateY(-50%);transition:transform .2s ease}
.jp-maintenance-link:hover{color:#232323}
.jp-maintenance-link:hover .jp-maintenance-link-text::after{transform:translate(.35rem,-50%)}
.jp-maintenance-link:hover .jp-maintenance-link-title{text-decoration:underline;text-underline-offset:.2em}
.jp-maintenance-link-title{font-size:1.5rem;font-weight:300;line-height:1.25}
.jp-maintenance-link-ja{font-size:.95rem;color:#686868}
.jp-maintenance-info-ja{font-size:.875em;color:#686868}
.jp-maintenance-info .accordion-content.jp-service-source{max-width:none;margin:0;padding:.5rem 0 2rem}
.jp-maintenance-info .contents-block{margin:0}
.jp-maintenance-info .jp-maintenance-detail h3.lead:first-child{margin-top:0}
@media(max-width:767.98px){.jp-maintenance-links{grid-template-columns:1fr;gap:2rem}.jp-maintenance-link-text{min-height:5rem}.jp-maintenance-link-title{font-size:1.3rem}}
@media(max-width:767.98px){.jp-service{padding-top:3rem}.jp-service-head{margin-bottom:2.5rem}.jp-service-head .h-xxl{font-size:2.5rem}.jp-maintenance-card{min-height:0}.jp-maintenance-card .title{font-size:1.35rem}}


/* ── 製品・素材の絞り込みボタン ────────────────────────────────────
   カテゴリ一覧6ページと素材ライブラリで同じ指定が7回複製されていた。

   セレクタに button を付けているのは、リファレンス一覧の絞り込みが
   <summary class="btn btn-filter summary-button"> で同じクラスを使っており、
   クラスだけで共通化すると公開ページの見た目が変わってしまうため。
   製品・素材側は <button class="btn btn-filter"> なので要素名で分けられる。

   .filterelements は製品・素材の8ページにしか無いので、そのままでよい。 */
button.btn-filter {
  border-color: transparent;
}

button.btn-filter:hover {
  background: #ddd;
}

button.btn-filter.active {
  color: #fff;
  background: #6c757d;
}

.filterelements .filtered {
  display: none !important;
}

/* 追加カードの画像が縦横比の異なる写真でも、一覧カードの本文・下線を揃える。
   指定があるカードだけに適用する共通のコンポーネント規則。 */
.filterelements .product-image .image.card-image-square-contain {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.filterelements .product-image .image.card-image-square-contain .img-first {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}



  /*************
  header
  **************/
  .sp{
    display: block;
  }

  .pc{
    display:none;
  }

  @media screen and (min-width: 1024px) {
    .sp{
      display:none;
    }
    .pc{
      display: block;
    }
  }


/*body 不具合調整*/
body{
   padding-right: 0 !important;
}
body .page-content {
    flex-shrink: 0;
    overflow: hidden;
}
/*header menu override*/
.page-header-area{
  padding-top: 0px;
}

.page-header a.site-logo {
  transform:translateY(3px);
  display: block;
}

.menu-box{
  caret-color: transparent;
}

.collapse-menu .nav-link-toplevel span {
    padding-right: 0;
    margin-bottom: 10px;
}

.nav-main{
  gap:40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap:12px !important;
  margin-bottom: 21px !important;
}

.nav-legal {
  display: flex;
  gap:20px;
  padding-bottom: 20px;
}

.nav-link-toplevel {
  margin-bottom: 0;
}

.nav-legal .nav-link {
  padding: 0;
  font-size: 16px;
}

.service-menu{
  margin-bottom: 232px;
}

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

.page-header .container{
  padding-left: 16px !important;

}

.page-header > .container>.row>.col{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.menu-toggle .menu-box {
  transform: translateX(-1px);
}

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

.offcanvas-body {
  background: #fff;
}

@media (min-width: 610px) {

  .page-header > .container{
    padding-left: 0rem !important;
  }

  .page-header > .container>.row{
    --wh-gutter-x: 0;
    --wh-gutter-y: 0;
  }

  .page-header > .container>.row>.col{
    padding-left: calc(var(--wh-gutter-x) * .5);
    padding-right: 16px !important;
  }
}

@media (min-width: 768px) {

  .page-header-area  .page-header .container>.row>.col{
    --wh-gutter-x: 0;
  }
  .page-header-area  .page-header .container>.row>.col-auto{
    position: absolute;
    right:0;
    top:15px;
  }
  .offcanvas-header>.container>button{
    display: none !important;
  }

  .page-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .page-header .row {
    margin-top: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .page-header a.site-logo {
    max-width: 133px;
    transform:translateY(0px);
  }

  .page-header-area .offcanvas-body> .container{
    padding: 0 30px;
    margin: 0 auto;
  }

  .page-header-area .offcanvas-body .row{
    display: block;
  }

  .menu-toggle .menu-box {
    transform: translateX(-25px);
  }

  .nav-link-toplevel {
    font-size: 40px;
    margin-bottom: 0;
    justify-content: space-between;
  }

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

  .menu-col-other {
    width: 100%;
  }

  .nav-main .nav-sub .nav-item .nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 1px;
    -webkit-text-decoration-color: #232323;
    text-decoration-color: #232323;
    text-decoration-thickness:1px;
    text-underline-offset: 3px;
  }
}

@media (min-width: 1024px) {

  .page-header-area .menu-toggle{
    display: none;
  }

  .page-header-area .nav-item > .nav-link-toplevel,
  .page-header-area .nav-item > .nav-link-toplevel>.title {
    position: relative;
    font-size: 20px !important;
    color: #232323;
    padding-right: 0;
    margin-bottom: 0;
  }

  .page-header-area .nav-item > .nav-link-toplevel{
    padding: 20px 0;
  }

  .page-header-area .nav-link-toplevel [class^=fa] {
    padding: 0 1rem;
    display: none;
  }

  .page-header-area .nav-item > .nav-link-toplevel > .title,
  .page-header-area .nav-item > .nav-link-toplevel > .title-hover {
    display: none;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    height: 25px;
    transition: opacity 0.2s ease;
  }

  .page-header-area .nav-item > .nav-link-toplevel > .title{
    display: block;
  }

  .page-header-area .nav-item > .nav-link-toplevel > .title-hover{
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
    padding-top: 2px;
    padding-right: 0 !important;
  }

  .page-header-area .nav-item{
    min-width: 110px;
  }

  .page-header-area .li3.nav-item{
    min-width: 80px;
  }

  .page-header-area .li4.nav-item{
    min-width: 70px;
  }

  .page-header-area .li5.nav-item{
    min-width: 120px;
    margin: 0 -20px;
  }


 .page-header-area .nav-item > .nav-link-toplevel > .title-hover {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    opacity: 0;
    text-align: center;
    font-size: 18px;
    margin-top: 2px;
  }

  .page-header-area .li5.nav-item > .nav-link-toplevel > .title-hover {
    margin-top: -5px;
    text-align: center;
  }

  .page-header-area .nav-link-toplevel:hover > .title {
    opacity: 0;
  }

  .page-header-area .nav-link-toplevel:hover > .title-hover {
    opacity: 1;
    display: block;
    color: #6EA100;
  }

  .page-header-area .collapse-menu .nav-link-toplevel span {
    padding-right: 0 !important;
  }

  .page-header {
    position: fixed !important;
    z-index: auto;
    padding: 0  !important;
    top:0  !important;
    background: none;
  }

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

  .page-header-area{
    padding-top: 116px;
  }

  .page-header-area > nav {
    position: static;
    width: auto;
  }

  .page-header-area .offcanvas-body {
    padding: 0 !important;
    overflow: visible !important;
  }

  .page-header-area .offcanvas-body > .container {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .page-header-area.show .offcanvas-body > .container > .row {
    height: 116px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .page-header-area.show .offcanvas-body > .container > .row::after{
    content: '';
    position: absolute;
    left: 0;
    bottom:0;
    height: 1px;
    background: #C8CBCC;
    width: 100%;
    display: none;
  }

  .page-header-area .offcanvas-body .row {
    display: block;
    margin: 0;
  }

  .collapse-menu .nav-link-toplevel span {
    margin-bottom: 0px;
  }

  .nav-link-toplevel {
    font-size: inherit;
    line-height: normal;
    margin: 0;
    padding: 0;
  }

  .nav-service .nav-item .nav-link {
    font-size: inherit;
    padding: 0;
  }

  .nav-main .nav-link-hassub[aria-expanded="true"] .title{
    color: #6EA100;
  }

  .menu-col-other {
    width: auto;
  }

  .page-header-area .offcanvas-body {
    padding: 0;
    position: fixed;
    opacity: 1;
    overflow: visible;
    z-index: 1000;
    right: 0;
    width: 100%;
  }

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

  .page-header-area .offcanvas-menu {
    position: fixed !important;
    bottom: 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 116px !important;
    visibility: visible !important;
    transform: translateY(0%) !important;
    transform: none !important;
    transition: none !important;
  }

  .offcanvas-backdrop.show {
    display: none !important;
  }

  .nav-main {
    /* position: fixed; */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 35px !important;
    margin-bottom: 0px !important;
    justify-content: flex-end !important;
    width: 100% !important;
    right: 0 !important;
    top: 49px!important;
  }

  .menu-col-main.col-md-7 {
    flex: 0 0 auto;
    width: 100% !important
  }

  .page-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .page-header .row .col{
    padding: 0;
  }

  .offcanvas-header,
  .close-sub-spacer,
  .visually-hidden-focusable{
    display: none !important;
  }
  .page-header a.site-logo {
    max-width: none;
  }

  .page-header-area .nav-main .collapse-menu {
    position: absolute;
    left: 0;
    top: 90px;
    bottom: auto;
    width: 300px;
    height: auto;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    padding: 0 20px;
    background: #fff;
    opacity: 0;
    /* フェード 0.3s はコーダーさんの指定どおり。
       Bootstrap collapse はこの時間を開閉アニメーションとして待ってから .show を付けるため、
       .show だけで opacity:1 にすると「0.3秒待ってからフェード」になる（見えきるまで約0.6秒）。
       開き始めに scripts.js が付ける .is-opening でも opacity:1 にして、乗せた瞬間からフェードを始める（2026-09-28） */
    transition: opacity 0.3s linear !important;
    transform: translateY(0%);
  }

  .page-header-area .nav-main .li5 .collapse-menu,
  .page-header-area .nav-main .li6 .collapse-menu {
    left: auto;
    right:0;
  }

  .page-header-area .nav-main .collapse-menu.show,
  .page-header-area .nav-main .collapse-menu.is-opening {
    opacity: 1;
    transform: translateY(0%);
  }

  .page-header-area .collapse-menu.row {
    opacity: 0;
    transition: opacity 0.3s linear 0.3s !important;
  }


  .page-header-area .collapse-menu.show>.row {
      opacity: 1;
  }

  /* メニュー切り替え時はアニメーションさせない */
  .page-header-area .nav-bg-layer.is-switching {
      transition: none !important;
  }

  .page-header-area .nav-bg-layer{
    position: fixed;
    z-index: 1;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.2s ease;
    display: none;
  }

  .page-header-area .nav-bg-layer.show {
    clip-path: inset(0);
  }


  .page-header-area .offcanvas-body > .container {
    padding: 0 20px;
    margin: 0;
    max-width: 1480px;
    margin: 0 auto;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
  }

  .page-header-area .offcanvas-body > .container .menu-col-main{
    justify-content: flex-start;
  }

  .page-header-area .offcanvas-body .row {
    display: flex !important;
    max-width: 1228px !important;
    margin: 0 auto !important;
    width:  100% !important;
    justify-content: flex-end !important;
  }

  .page-header-area .offcanvas-body .row .menu-col-main{
    padding: 0;
  }

  .menu-col-other{
    display: none !important;
  }

  .page-header-area .nav-item .collapse-menu>.row{
    width: 100% !important;
    display: block !important;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 {
    width: 100% !important;
    padding: 0 !important;
    display: block;
    margin: 0 auto;
    gap: 40px;
    border-bottom: 1px solid #C8CBCC;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel {
    position: relative;
    padding: 16px 0 20px;
    margin-bottom: 0 !important;
    justify-content: initial;
    font-weight: 500;
    display: flex;
    color: #232323;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title-wrap{
    position: relative;
    display: flex;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title-wrap .title{
    flex-direction: column;
    display: flex;
    align-items: flex-start;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title-wrap .title .inr,
  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title-wrap .title .txt-jp{
    position: relative;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title-wrap .title .txt-jp{
    display: inline-block;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel:hover .title-wrap .title .inr::before,
  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel:hover .title-wrap .title .txt-jp::before{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    transform: none;
    background-color: #232323;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel:hover .title-wrap .title .inr::before{
    bottom: -1px;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title{
    font-weight: 500;
    font-size: 20px;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title .inr{
    display: flex;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .title .txt-jp{
    font-size: 12px;
    font-weight: bold;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel .pc-title{
    padding-left: 0.5em;
  }

  .page-header-area .collapse-menu>.row>.col-md-7 .nav-link-toplevel::after{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: 5px;
    top: 50%;
    border-top: 2px solid #232323;
    border-right: 2px solid #232323;
    transform: translateY(-50%) rotate(45deg);
  }


  .page-header-area .collapse-menu>.row>.col-md-5{
    width: 100% !important;
    padding: 0 !important;
  }

  .nav-main .nav-item{
    position: relative;
  }

  .nav-main .nav-sub .nav-item{
    height: auto !important;
    padding: 0 !important;
    width: 100%;
  }

  .nav-main .nav-sub {
    display: flex;
    flex-wrap:wrap;
    margin: 0 auto;
    gap:20px;
    padding: 0;
  }

  .nav-main .nav-sub .nav-item .txt-jp{
    font-size: 12px;
    line-height: 1;
    margin-top: 4px;
  }

  .nav-main .nav-sub.type-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-main .btn.close-sub{
    display: none;
  }

  .nav-service .nav-item .nav-link {
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
    color: #232323;
  }

  .menu-col-other {
    width: auto;
  }

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

  .page-header {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    width: 100%;
    z-index: 10000 !important;
    pointer-events: none;
    background: transparent !important;
  }

  .page-header  .container {
    max-width: 1480px;
    --wh-gutter-x: 0;
    padding-right: 20px;
    padding-left: 20px;
  }

   .page-header  .container>.row{
      max-width: 1228px !important;
      margin: 0 auto;
   }

    .pc-service-menu,
    .pc-service-menu li {
      width: 100%;
    }

   .pc-service-menu{
    display: flex;
    flex-wrap:wrap;
    margin: 0 auto;
    gap:20px;
    padding: 20px 0;
    list-style: none;
   }

  .pc-service-menu>li>a{
    padding: 0;
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    color: #232323;
  }

  .pc-service-menu>li>a:hover{
    text-decoration: underline;
    text-decoration-thickness:1px;
    text-underline-offset: 3px;
  }

  .pc-service-menu>li>a::after{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: 5px;
    top: 50%;
    border-top: 2px solid #232323;
    border-right: 2px solid #232323;
    transform: translateY(-50%) rotate(45deg);
  }

  .pc-service-menu>li>a .txt-jp{
    font-size: 12px;
    display: block;
    line-height: 1;
    margin-top: 4px;
  }

  .page-header-area>nav{
    position: fixed !important;
    left:0;
    top:0;
    width: 100%;
    height: 116px;
    background: #fff;
    z-index: 1000;
  }

  .page-header .container {
    position: relative;
    max-width: 1480px;
    margin: 0 auto;
    --wh-gutter-x: 0;
    padding-right: 20px;
    padding-left: 20px;
  }

  .nav-main .nav-sub {
    padding: 20px 0 20px !important;
    border-bottom: 1px solid #C8CBCC;
  }

  .nav-main .nav-sub .nav-item .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0 0px !important;
  }
  .nav-main .nav-sub > * {
    flex-shrink: 0;
}

  .nav-main .nav-sub .nav-item .nav-link .img{
    width: 100px;
  }

  .nav-main .nav-sub .nav-item .nav-link .txt {
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
    color: #232323;
    padding-left: 0;
    padding-right: 0;
  }

  .nav-main .nav-sub .nav-item .nav-link::after{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: 5px;
    top: 50%;
    border-top: 2px solid #232323;
    border-right: 2px solid #232323;
    transform: translateY(-50%) rotate(45deg);
  }

  .offcanvas-body {
    background: transparent;
  }

}

@media (min-width: 1200px) {
  .nav-main {
    gap: 30px !important;
  }
  .page-header  .container {
    max-width: 1480px;
    margin: 0 auto;
    --wh-gutter-x: 0;
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (min-width: 1600px) {
  .page-header-area .nav-main .li5 .collapse-menu,
  .page-header-area .nav-main .li6 .collapse-menu {
    right: auto;
    left:0;
  }
}

/*
footer new
*/
.page-footer2 {
  padding: 30px 25px;
  background: #232323;
  color: #fff;
}

.page-footer2 a{
  color: #fff;
}

@media screen and (min-device-width: 768px) {
  .page-footer2 a:hover{
    text-decoration: underline;
  }
}

.page-footer2 .nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.page-footer2 .nav-group {
  margin-bottom: 30px;
}

.page-footer2 .nav-group.home{
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 0px;
}


.page-footer2 .nav-title {
  margin-bottom: 0;
}

.page-footer2 .nav-title a{
  color: #fff;
  font-size: 16px;
}

.page-footer2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-footer2 .menu{
  margin-top: 7px;
}

.page-footer2 .menu a {
  font-size: 14px;
  display: block;
  color: #fff;
  padding: 4px 6px;
}

.page-footer2 .contact {
  line-height: 1.6;
  margin-bottom: 30px;
}

.page-footer2 .contact .nav-title{
  margin-bottom: 5px;
}

.page-footer2 .contact p{
  font-size: 16px;
  margin-bottom: 0;
}

.page-footer2 .follow {
  margin-bottom: 60px;
}

.page-footer2 .sns {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.page-footer2 .sns a {
  color: #fff;
}

.page-footer2 .sns a:hover{
  text-decoration: none;
}

.page-footer2 .sns a.insta i{
  display: block;
  width: 22px;
  font-size: 22px;
}

.page-footer2 .sns a.fb i{
  font-size: 22px;
}

.page-footer2 .sns a.pit i{
  width: 23px;
  font-size: 23px;
}

.page-footer2 .copy {
  font-size: 14px;
  margin-bottom: 30px;
  color: #fff;
}

.page-footer2 .utility {
  display: flex;
  gap:20px;
}

.page-footer2 .utility a {
  font-size: 14px;
  color: #fff;
}

.page-footer2 .bottom {
  position: relative;
  padding-top: 0;
}

@media screen and (min-width: 1024px) {

	.page-footer2 {
    padding: 60px 0;
	}

	.page-footer2 .inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 16px;
	}

  .page-footer2 .nav{
    margin-bottom: 70px;
  }

  .page-footer2 .nav-title.about,
  .page-footer2 .nav-title.service {
    margin-bottom: 5px;
  }

  .page-footer2 .nav-title a{
    font-size: 20px;
  }

  .page-footer2 .nav-group {
    margin-bottom: 0;
    padding-right: 15px;
  }

  .page-footer2 .nav-group.references{
    margin-bottom: 0;
  }

  .page-footer2 .nav-group.home::after{
    display: none;
  }

	.page-footer2 .info {
    margin-bottom: 60px;
    display: flex;
	}

  .page-footer2 .contact{
    width: 50%;
    margin-bottom: 0px;
  }

  .page-footer2 .contact p{
    font-size: 18px;
  }

  .page-footer2 .contact .nav-title{
    margin-bottom: 16px;
  }

  .page-footer2 .follow{
    width: 50%;
    margin-bottom: 0px;
  }

  .page-footer2 .follow .nav-title {
    margin-bottom: 11px;
  }

	.page-footer2 .bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
	}

  .page-footer2 .nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0px;
    grid-template-rows: 40px auto;
  }

	.page-footer2 .nav-group {
		display: block;
	}

  .page-footer2 .menu a {
    font-size: 18px;
    padding: 2px 10px;
    color: #fff;
    display: block;
  }

	.page-footer2 .home {
		grid-column: 1;
		grid-row: 1;
	}

	.page-footer2 .products {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.page-footer2 .references {
		grid-column: 3;
		grid-row: 1;
	}

	.page-footer2 .service {
		grid-column: 3;
		grid-row: 2;
		margin-top: 20px;
	}

	.page-footer2 .blog {
		grid-column: 4;
		grid-row: 1;
	}

	.page-footer2 .about {
		grid-column: 4;
		grid-row: 2;
		margin-top: 20px;
	}

  .page-footer2 .sns {
    margin-top: 0;
  }

  .page-footer2 .copy {
    font-size: 16px;
    margin-bottom: 0px;
  }

  .page-footer2 .utility a {
    font-size: 16px;
  }

  .page-footer2 .bottom{
    position: relative;
    padding-top: 0px;
  }

  .page-footer2 .bottom::before{
    display: none;
  }

}


/* ── 受領CSSとのマージ後も維持する日本版の追加調整 ──────────────── */

/* 製品詳細ヒーローの Configurator / Price List / English。 */
.wh-header-2cols .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.wh-header-2cols .buttons .wh-product-english-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #777;
  line-height: 1.2;
  text-decoration: none;
}

.wh-header-2cols .buttons .wh-product-english-link:hover,
.wh-header-2cols .buttons .wh-product-english-link:focus-visible {
  color: #4d4d4d;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.wh-header-2cols .buttons .wh-product-english-link .fa-globe {
  font-size: 1.1em;
}

/* カテゴリトップのカード比率（先方資料 20260917Webサイト検討 Page19）。
   PC版は Products / References / Service / About を正方形で統一。
   Products に限り、スマートフォン版は縦長（支給画像は 3:4 前後）。
   画像の切り替え幅 768px は product_pages.py の PRODUCTS_TOP_IMAGE_BREAKPOINT と同じ。 */
.wh-section-landing-grid .card-image-top,
.wh-products-top-grid .card-image-top {
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .wh-products-top-grid .card-image-top {
    aspect-ratio: 3 / 4;
  }
}

.wh-section-landing-grid .card-image-top img,
.wh-products-top-grid .card-image-top picture,
.wh-products-top-grid .card-image-top img {
  display: block;
  width: 100%;
  height: 100%;
}

.wh-section-landing-grid .card-image-top img,
.wh-products-top-grid .card-image-top img {
  object-fit: cover;
  object-position: center;
}

/* リファレンスの仕様表。MT の表ブロックが付ける border="1" の外枠を消し、
   Bootstrap の .table と同じ行の下線だけにする。 */
.table-reference {
  border: 0;
}

/* ── 2026-10-14 製品ページの修正依頼 ─────────────────────────── */

/* 製品詳細ヒーローの English（p.4）。Configurator / Price List とは性質が違うリンクなので、少し離す。
   スマートフォンでは English が2行目に回る（それで離れる）ので、字下げにならないよう 768px 以上だけ */
@media (min-width: 768px) {
  .wh-header-2cols .buttons .wh-product-english-link {
    margin-left: 2rem;  /* 2026-10-15 ユーザー指示で 1rem → 2rem */
  }
}

/* 関連商品（.wh-shortcut）の見出しの上（p.6）。本国は前のブロック（Downloads の一覧）から 64px。
   日本版は Downloads を出していないため、前のブロックの下の余白（32px など）だけになり狭かった。
   兄弟の余白は重なるので、前のブロックの余白が大きいときはそちらが効く。
   2026-10-22（1021 p.3）先方指示「Timetable Shift の空きに全ページ合わせる」で 64px → 96px */
.page-content > .wh-shortcut {
  margin-top: var(--wh-space-3xl);
}

/* トップの写真2枚の間のリード文（p.1。文字がやや大きい）。リード文（copy-xl）から一段小さい copy-lg の大きさに。
   印は wh-build-styleguide.py の mark_top_lead() が付ける */
/* 2026-10-15 ユーザー指示：もう少し小さく（「す。」だけが次の行に回らない大きさ）。
   PC は 24px。992px〜1920px で3〜4行、最後の行が「ます。」だけになる幅が無い（25px だと 1200px 前後で残る）。
   スマートフォンは 20px。360〜414px で4行、最後の行は「ションを創出します。」前後（22px だと 375px で「ます。」が残る） */
.wh-top-lead {
  font-size: 20px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .wh-top-lead {
    font-size: 24px;
  }
}

/* 日本語の太字（p.7 / p.18 / p.28 / p.32 などの項目の見出し語）。日本語は Akkurat に無く、Mac ではヒラギノ、
   Windows では游ゴシックなどで出る。サイト共通の strong（400）は本文（300）との差が見えない（ヒラギノは同じ太さ）ので、
   日本語の見出し語だけ 600 にする。印は product_revisions.py の ("bold", …) が付ける。
   本文の .ce-bodytext p strong（base.css）より強くするため .page-content を付ける */
.page-content strong.wh-strong-ja {
  font-weight: 600;
}

/* カテゴリ一覧の見出しの下の日本語（タスクチェア/オフィスチェア など。product_pages.CATEGORY_TITLES_JA）。
   2026-10-15 ユーザー指示：もう少し小さく、下のリード文との間を少しあける。
   既定の .wh-heading-ja（見出しの 0.5em = PC 30px）はリード文（26px）より大きかった */
.wh-header-text h1 .wh-heading-ja {
  margin-top: .5rem;
  /* 見出しの下の余白（24px）に足して、リード文まで 32px。margin だと見出しの余白と重なって効かないので padding */
  padding-bottom: .5rem;
  font-size: 16px;
}

@media (min-width: 768px) {
  .wh-header-text h1 .wh-heading-ja {
    padding-bottom: 1rem;  /* リード文まで 40px */
    font-size: 25px;  /* 2026-10-22 ユーザー指示で 22px → 25px（News・Dealers などの見出しの日本語とそろえる） */
  }
}

/* ブログ記事の本文枠（.frame.wh-text）。本国の wilkhahn-blog.css は .article-content .wh-text の左右余白を 0 にしていて、
   スマートフォンでは文字が画面の端に付く。PC は本国どおり 810px の中央寄せのまま。
   wilkhahn-blog.css はこのファイルのあとに読まれるので、詳細度を上げて勝たせる */
@media (max-width: 767.98px) {
  .article-content > .frame.wh-text {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

/* ブログ記事の写真を同じ縦横比（16:10）に切りそろえる箱。横並びの写真の高さをそろえるのに使う。
   本国の写真には左右（または四辺）に白い枠（幅の約1.7%・高さの約2.4%）が入っているものがあるので、
   写真を箱より 3% ずつ大きくして枠を箱の外に出す */
.wh-img-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

/* 拡大表示のリンク（a.prvs-lightbox）で包んだときも箱いっぱいにする。
   Parvus はリンクに position: relative を付けるので、そのままだと高さ 0 のリンクが写真の基準になって消える */
.wh-img-crop > a {
  position: absolute;
  inset: 0;
  display: block;
}

.wh-img-crop img {
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  max-width: none;
  height: 106%;
  object-fit: cover;
}

/* ブログ記事のタイトル部分。.text の中の .row（左右 -16px）が、余白のない外枠（.article-header .frame）からはみ出し、
   幅 1292px 未満で横スクロールが出ていた（スマートフォンも）。外枠の内側に .row の分の余白を取る */
.wh-blog-postheader .text {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* 拡大表示（Parvus）をヘッダーより手前に出す。固定ヘッダー（.page-header）は z-index 10000、Parvus の既定は 1337 で、
   拡大表示の上にロゴとメニューが重なっていた（製品・事例・ブログなど拡大表示のあるページすべて）。
   ブログ記事はこのファイルのあとに wilkhahn-blog.css（.parvus { z-index: 1337 } を含む）を読むので、body を付けて勝たせる */
body > .parvus {
  z-index: 10001;
}

/* ブログ記事の人物紹介（BLOG-15 の部品を流用、wh-build-styleguide.py の blog_person）。
   BLOG-15 は短い引用用で本文 18px。人物紹介は経歴の文が長いので小さくする（2026-10-16 ユーザー指示）。
   wilkhahn-blog.css がこのファイルのあとに読まれるので、.wh-quote.wh-person で詳細度を上げる */
.wh-quote.wh-person figure.quote blockquote p {
  font-size: 15px;
  line-height: 1.75;
}

/* フッター：リンクを最小限に（2026-10-21 先方指示）。サイト内のリンク一覧・CONTACT の見出し・電話番号を外し、
   左に会社名・住所と FOLLOW US、右に Wilkhahn.com へのリンク。
   2026-10-22 先方指示で Wilkhahn.com に添えていた世界地図（assets/images/footer/world-map.svg）を外し、その分フッターを低く。
   上の .nav（リンク一覧）の指定は使わなくなったが、戻す可能性があるので残している */
.page-footer2 .info-main .contact {
  width: auto;
  margin-bottom: 30px;
}
.page-footer2 .info-main .contact p {
  line-height: 1.7;
}
.page-footer2 .info-main .follow {
  margin-bottom: 40px;
}
.page-footer2 .global {
  display: inline-flex;
  align-items: center;
  gap: .45rem;  /* 地球のアイコンと文字の間。製品ページの English（.wh-product-english-link）と同じ（2026-10-23 先方指示） */
  margin-bottom: 40px;
  color: #fff;
  text-decoration: none;
}
.page-footer2 .global .fa-globe {
  font-size: 1.1em;
}
.page-footer2 .global span {
  font-size: 16px;
  border-bottom: 1px solid transparent;
}
.page-footer2 .global:hover {
  text-decoration: none;
}
.page-footer2 .global:hover span {
  border-bottom-color: currentColor;
}
@media screen and (min-width: 1024px) {
  .page-footer2 .info {
    justify-content: space-between;
    align-items: flex-end;
  }
  .page-footer2 .info-main {
    display: flex;
    align-items: flex-end;
    gap: 80px;
  }
  .page-footer2 .info-main .contact,
  .page-footer2 .info-main .follow {
    width: auto;
    margin-bottom: 0;
  }
  .page-footer2 .global {
    margin-bottom: 0;
  }
  .page-footer2 .global span {
    font-size: 18px;
  }
}

/* ── 2026-10-22 日本サイト由来のページ（Dealers・Terms of Use・Privacy・Contact・404・メンテナンスの下層・Download）の見出しを News と同じに ──
   先方指摘「ニュースと比べて少し小さい」。見出しの作りは News と同じ h1.h-xxl ＋ .wh-heading-ja（日本語は黒の 0.5em）に変えた
   （build_japan_general_pages.py / build_japan_service_pages.py）。
   位置も News（main に .page-content が無く、固定ヘッダーよけの 56px が付かない）にそろえる。
   components.css の .page-content > *:first-child:not(…):not(…) より強くするため、同じ :not() を重ねている */
.page-content > .jp-general:first-child:not(.wh-header-slider):not(.wh-header-full),
.page-content > .jp-service:first-child:not(.wh-header-slider):not(.wh-header-full) {
  margin-top: 0;
}

.jp-general-head,
.jp-service-head {
  margin-bottom: 2.5rem;
}

/* 見出しの日本語は、英語の半分（30px）だと大きすぎる（2026-10-22 ユーザー指示）。News も含めて 25px に。上の間は 12px。
   スマートフォン（英語 40px）は英語の半分の 20px のまま */
.news-head .wh-heading-ja,
.jp-general-head .wh-heading-ja,
.jp-service-head .wh-heading-ja {
  margin-top: 12px;
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .news-head .wh-heading-ja,
  .jp-general-head .wh-heading-ja,
  .jp-service-head .wh-heading-ja {
    font-size: 25px;
  }
}

/* ブログ一覧の見出し（.wh-header-blog。MT のブログ一覧のテンプレートにも付ける）を、製品カテゴリ・カタログと同じに（2026-10-23）。
   ・位置：ブログの main には .page-content が無く、固定ヘッダーよけの 56px が付かないので足す
   ・リード文：本国の wilkhahn-blog.css が .copy-lg を 28px にしているので、サイト共通の大きさ（base.css の copy-lg）に戻す */
.wh-header-text.wh-header-blog {
  margin-top: 56px;
  /* 見出しの下の文を消した（2026-10-26 修正依頼 1023 p.4）ので、カテゴリのボタンまでを詰める。
     既定の 80px（リード文の下の余白）→ 40px。見出しの下からボタンまで約 64px（ボタンからカードまでの 80px より狭く） */
  margin-bottom: 2.5rem;
}

.wh-header-blog .copy-lg {
  font-size: var(--wh-size-copy-lg);
}

/* ブログ記事のタイトル（2026-10-23 先方指示「一回り小さく」）。本国の wilkhahn-blog.css は h1 を 60px（スマートフォン 38px）にしている。
   一段下の見出しの大きさ（.h-xl と同じ。PC 52px・スマートフォン 30px）に */
.article-header h1.title {
  font-size: var(--wh-size-h-xl);
}

/* 地球のアイコンと文字（製品ページの English、フッターの Wilkhahn.com）の天地をそろえる（2026-10-23 先方指示）。
   行の中心でそろえると、文字は下にはみ出す部分のぶん見た目が上に寄る（大文字の高さの中央がアイコンの中心より 0.7〜1.4px 上）。
   アイコンは動かさず、文字を下げる。8 倍に拡大して、大文字の高さの中央とアイコンの中心が合う量にした
   （English 16px は 0.12em ≒ 2px、フッター 18px は 0.08em ≒ 1.4px。字の大きさと行の高さが違うので量も違う） */
.wh-header-2cols .buttons .wh-product-english-link span {
  position: relative;
  top: .12em;
}
.page-footer2 .global span {
  position: relative;
  top: .08em;
}