/* コンポーネント */
/* --- 製品カード --- */
.card {
position: relative;
display: flex; flex-direction: column;
border: 1px solid var(--color-border); border-radius: var(--radius);
background: var(--color-bg); overflow: hidden;
transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card__title { margin: 0; font-size: var(--font-size-h3); }
.card__media { position: relative; z-index: 1; }
.card__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: auto; }
/* --- PDFダウンロード --- */
.download-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
/* grid項目の min-width は既定が auto で、中の長いファイル名に押し広げられる。
0 を指定しないと項目が縮まず、ページごと横スクロールする。 */
.download-list > li { min-width: 0; }
.download-link {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3); text-decoration: none;
border: 1px solid var(--color-border); border-radius: var(--radius);
background: var(--color-bg); color: var(--color-text);
}
.download-link:hover { border-color: var(--color-brand); background: var(--color-brand-light); color: var(--color-text); }
.download-link__icon { flex: 0 0 auto; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
background: var(--color-accent); color: #fff; padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.download-link__label { font-weight: 600; }
.download-link__note { display: block; font-size: var(--font-size-sm);
color: var(--color-text-muted); font-weight: 400;
/* FreeCatalog_Damper_… のような長い連結語を折り返せるようにする */
overflow-wrap: anywhere; }
.download-link__label { min-width: 0; overflow-wrap: anywhere; }
/* --- 表の横スクロール ---
grid/flex の子孫に横スクロール帯を置くと、min-width:auto の既定値のせいで
子が縮まず、ページ全体が横スクロールする。祖先すべてに min-width:0 が要る。
スマホで実際に 631px > 390px のはみ出しが出たため対策した。 */
.table-scroll {
overflow-x: auto; margin-bottom: var(--space-3);
min-width: 0; max-width: 100%;
-webkit-overflow-scrolling: touch;
}
/* 表を内包しうる祖先に min-width:0 を効かせる */
.accordion, .accordion__body, .section, .container { min-width: 0; }
.accordion__body > * { max-width: 100%; }
/* 表はスクロール帯の幅に合わせる。内容が入りきらない場合だけ帯の中で横に伸ばす。 */
.table-scroll > table { width: max-content; min-width: 100%; max-width: none; }
/* --- パンくず --- */
.breadcrumb { font-size: var(--font-size-sm); color: var(--color-text-muted);
padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.breadcrumb__list {
/* 区切りの「/」と項目の縦位置を揃える。
リンクに padding を付けた際、align-items を指定しないと
ベースラインがずれて「/」だけ浮いて見える。 */
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2);
}
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb__item + .breadcrumb__item::before {
content: "/"; color: var(--color-border-strong); line-height: 1;
}
.breadcrumb a,
.breadcrumb [aria-current="page"] {
/* 現在地はリンクではないが、同じ箱の形にしないと高さが変わって
上端が2pxずれる。表示上の違いは色だけにする。 */
display: inline-flex; align-items: center; min-height: 28px;
}
.breadcrumb [aria-current="page"] { color: var(--color-text); }
/* --- ページ見出し --- */
.page-header { background: var(--color-brand-light); padding-block: var(--space-5); }
.page-header h1 { margin: 0; }
/* --- 絞り込みフィルター（C案） --- */
.filter { background: var(--color-bg-subtle); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-4); }
.filter__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filter__field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); flex: 1 1 11rem; min-width: 0; }
.filter__field input, .filter__field select {
font: inherit; padding: var(--space-2); border: 1px solid var(--color-border);
border-radius: var(--radius); background: var(--color-bg); min-width: 0; }
.filter__reset { font: inherit; padding: var(--space-2) var(--space-3); cursor: pointer;
background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.filter__status { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* --- 比較表（D案） --- */
.spec-table th[scope="row"] { white-space: nowrap; font-weight: 600; }
.spec-table tbody tr:nth-child(even) { background: var(--color-bg-subtle); }
/* --- アコーディオン（B案） --- */
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-2); }
.accordion__summary { cursor: pointer; padding: var(--space-3); font-weight: 600;
display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after { content: "+"; color: var(--color-brand); font-weight: 400; }
.accordion[open] .accordion__summary::after { content: "−"; }
.accordion__count { font-weight: 400; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-left: auto; }
.accordion__body { padding: 0 var(--space-3) var(--space-3); }
/* --- 最上段の主要カタログ（A案） --- */
.download-link--primary { border-width: 2px; }
.download-link--primary .download-link__label { font-size: var(--font-size-lg); }
/* --- 導入文 --- */
/* 導入文は1〜2文しかないので幅を絞らない。
長文の本文と違い、行が長くても読み通せるうえ、
下の製品タイルが全幅を使うので、絞ると上だけ狭く見える。 */
.lead { font-size: var(--font-size-lg); color: var(--color-text); max-width: none; }
.lead > span:not(.nobr) + span:not(.nobr)::before { content: " "; }
/* 導入文は文ごとに改行する。
text-wrap: balance は行の長さを揃えるだけで意味の切れ目を見ないため、
「for machine / builders.」のように語句の途中で切れてしまう。
文を span で区切れば、必ず文末で改行され、各文の中だけが自然に折り返す。 */
.lead > span:not(.nobr), .hero__lead > span:not(.nobr) { display: block; text-wrap: pretty; }
/* 狭い画面では1文が複数行になる。その際も意味のまとまりを保ちたいので、
短い修飾句は途中で切らない。 */
.nobr { white-space: nowrap; }
.section--intro { padding-block: var(--space-5) var(--space-3); }
/* --- ボタン --- */
.btn {
display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
padding: var(--space-3) var(--space-5); border-radius: var(--radius);
border: 1px solid var(--color-border-strong); background: var(--color-bg);
color: var(--color-text); text-decoration: none; min-height: 44px;
}
.btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #fff; }
/* --- 主要CTA（統合カタログ）は塗りにして「押せる」と分かるようにする --- */
.download-link--primary {
background: var(--color-brand); border-color: var(--color-brand); color: #fff;
}
.download-link--primary:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #fff; }
.download-link--primary .download-link__icon { background: #fff; color: var(--color-brand); }
.download-link--primary .download-link__note { color: rgba(255,255,255,.85); }
/* --- 入力要素の境界はコントラストの強いトークンを使う（WCAG 1.4.11） --- */
.filter__field input, .filter__field select, .filter__reset { border-color: var(--color-border-strong); }
/* --- 比較表 --- */
.spec-table { line-height: var(--line-height-table); font-variant-numeric: tabular-nums;
width: 100%; }
/* 横スクロールできることが分かるように、右端に影を出す */
.table-scroll {
background:
linear-gradient(to right, var(--color-bg) 30%, rgba(255,255,255,0)) left center,
linear-gradient(to left, var(--color-bg) 30%, rgba(255,255,255,0)) right center,
linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0)) left center,
linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0)) right center;
background-repeat: no-repeat;
background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
.spec-table th[scope="row"] { position: sticky; left: 0; background: var(--color-bg); z-index: 1; }
.spec-table tbody tr:nth-child(even) th[scope="row"] { background: var(--color-bg-subtle); }
/* 表内のPDFリンクはタップ領域を確保する（24px未満だとWCAG 2.5.8不適合） */
.spec-table td a {
display: inline-block; min-height: 44px; padding: var(--space-2) var(--space-3);
white-space: nowrap;
}
/* --- アコーディオンのマーカー（Firefoxは list-style も消す必要がある） --- */
.accordion__summary { list-style: none; }
/* --- 行長の制限 ---
英文は1行45〜90文字を超えると、次の行の頭を見失って読みにくくなる。
そこで「読み通す文章」だけ72ch（約80文字）に制限する。
一方、拾い読みする要素（表・検索・タイル・リンク一覧・住所）は
制限すると画面が余るだけなので全幅を使う。 */
/* 2026-11-02 全ページを実測したところ、72ch の制限は
「読み通す長文」より先に、短い文章やリンク行に当たっていた。
CTAの1〜2文、カタログのリンク行、フォームの補足、完了ページの案内など、
どれも右側を400〜540px余らせて折り返しており、右端が揃わず中途半端に見えた。
規約ページで先に制限を外したのと同じ理由で、全体でも外す。
行長はコンテナ（1140px）が決める。長文の読みやすさは
text-wrap: pretty と段落の分割で担保する。 */
.section p, .section li { max-width: none; }
/* --- 導入部（本文＋代表画像） --- */
.intro { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 800px) {
.intro { grid-template-columns: 1.3fr 1fr; }
/* 代表画像が無いページでも2列のままだったため、右半分が空いたまま
導入文だけが左側で詰まって折り返していた（実測613px／フォームは896px）。
画像が無いときは1列にする。 */
.intro:not(:has(.intro__media)) { grid-template-columns: 1fr; }
}
.intro__media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--color-border); }
/* 導入文は製品ページでは右に写真が入る2列組みなので、列幅が行長を決める。
完了ページや404のように写真が無いページでは、ここで絞ると右側が
400px近く余って折り返しが中途半端になるため、制限しない。 */
.lead > p { max-width: none; }
/* --- 図版 ---
以前は minmax(190px, 1fr) の格子に詰めていたため、1200px幅の比較表まで
190〜400pxに縮み、中の文字が読めなくなっていた。
小さな部品図は並べ、資料性の高い大きな図は1枚で大きく出す。 */
.figure-grid { display: grid; gap: var(--space-4); margin-bottom: var(--space-5);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.figure-grid figure { margin: 0; }
.figure-grid img { display: block; width: 100%; height: auto;
border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.figure a { display: block; }
.figure a:hover img { border-color: var(--color-brand); }
/* 幅600px以上の図版は、行いっぱいを使って大きく表示する */
.figure--wide { grid-column: 1 / -1; }
/* 原寸より大きく引き伸ばすとぼやけるので、実寸を上限にする */
.figure img { max-width: min(100%, var(--fig-w, 100%)); }
/* --- 製品カードの画像 --- */
.card__media { aspect-ratio: 4 / 3; background: var(--color-product-bg); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: contain; }
/* --- 問い合わせ導線 --- */
.cta-box { border: 1px solid var(--color-border-strong); border-radius: var(--radius);
padding: var(--space-5); background: var(--color-bg-subtle); }
.cta-box h2 { margin-bottom: var(--space-2); }
/* --- ランキング表示 --- */
.download-list--ranked { counter-reset: dl; }
.download-list--ranked > li { counter-increment: dl; position: relative; }
.download-list--ranked > li .download-link__label::before {
content: "#" counter(dl) " "; color: var(--color-text-muted); font-weight: 400; }
/* --- 型番表へのアンカー --- */
.jump-link { font-size: var(--font-size-sm); margin-bottom: var(--space-3); }
/* --- ダウンロード済みの資料が分かるようにする ---
主要CTA（青地に白文字）にこの指定が効くと、文字が沈んで読めなくなる。
通常のリンクにだけ適用する。 */
.download-link:not(.download-link--primary):visited .download-link__label {
color: var(--color-text-muted);
}
/* 主要CTAは状態によらず白文字を保つ */
.download-link--primary,
.download-link--primary:visited,
.download-link--primary:visited .download-link__label { color: #fff; }
/* --- お問い合わせフォーム --- */
.form { max-width: 56rem; margin-top: var(--space-5); }
.form__grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .form__grid { grid-template-columns: repeat(2, 1fr); } }
.form__field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form__field label { font-weight: 600; font-size: var(--font-size-sm); }
.form__field input, .form__field select, .form__field textarea {
font: inherit; padding: var(--space-3); min-height: 44px;
border: 1px solid var(--color-border-strong); border-radius: var(--radius);
background: var(--color-bg); color: var(--color-text); width: 100%; min-width: 0;
}
.form__field textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }
/* フォーム下の補足。72chにすると右側が500px以上余って折り返すので、
フォームと同じ幅にする。 */
.form__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); max-width: 56rem; }
.req { color: var(--color-accent); }
.opt { font-weight: 400; color: var(--color-text-muted); }
/* ハニーポット。display:none だと一部のボットに見抜かれるため画面外へ退避する */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-bottom: var(--space-4); }
/* --- 余白のユーティリティ（インラインstyleの置き換え） --- */
.stack-top { margin-top: var(--space-5); }
.stack-top-lg { margin-top: var(--space-6); }
/* --- ヒーロー（トップ最上部。製品タイルを押し下げないよう最小限に） --- */
.hero { padding-block: var(--space-5) var(--space-4); }
.hero__title { font-size: var(--font-size-hero); margin-bottom: var(--space-2); }
.hero__lead {
color: var(--color-text-muted); margin-bottom: var(--space-4);
/* 幅が足りるうちは2文を1行に流す。
文ごとにブロックにすると、横幅が余っていても必ず改行されてしまう。 */
max-width: none;
}
.hero__lead > span:not(.nobr) { display: inline; }
.hero__lead > span:not(.nobr) + span:not(.nobr)::before { content: " "; }
/* --- 検索 --- */
.search {
/* 下の製品タイルが全幅を使うので、検索も同じ幅に揃える。
幅を絞ると、クイック検索のチップも余白を残したまま折り返してしまう。 */
max-width: none;
}
.search__field { position: relative; }
.search__field input {
width: 100%; font: inherit; font-size: var(--font-size-lg);
padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
border: 2px solid var(--color-brand); border-radius: var(--radius);
background: var(--color-bg); color: var(--color-text); min-height: 52px;
}
.search__icon { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); }
.search__chips {
/* ラベルをチップと同じ行に並べると、1行目だけ字下げされて
2行目以降と頭が揃わず、折り返しが不揃いに見える。
ラベルは独立した行にして、チップだけで格子を組む。 */
margin: var(--space-3) 0 0; font-size: var(--font-size-sm);
}
.search__chips-label {
display: block; margin-bottom: var(--space-2);
color: var(--color-text-muted); font-size: .75rem;
font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.search__chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { font: inherit; font-size: var(--font-size-sm); cursor: pointer;
padding: var(--space-1) var(--space-3); min-height: 32px;
border: 1px solid var(--color-border-strong); border-radius: 999px;
background: var(--color-bg); color: var(--color-text); }
.chip:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.search__results { margin-top: var(--space-3); border: 1px solid var(--color-border-strong);
border-radius: var(--radius); background: var(--color-bg); box-shadow: var(--shadow);
max-height: 60vh; overflow-y: auto; }
.search__list { list-style: none; margin: 0; padding: 0; }
.search__item + .search__item { border-top: 1px solid var(--color-border); }
.search__item a { display: block; padding: var(--space-3); text-decoration: none; color: var(--color-text); }
.search__item a:hover { background: var(--color-bg-subtle); }
.search__item-title { display: block; font-weight: 600; color: var(--color-brand); }
.search__item-excerpt { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.search__item mark { background: #fff3b0; }
.search__empty { padding: var(--space-3); margin: 0; font-size: var(--font-size-sm); }
/* --- 製品タイル（トップのファーストビューに収める） --- */
.section--tiles { padding-block: var(--space-3) var(--space-6); }
.tiles { list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--space-3);
grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
.tile__link { display: flex; flex-direction: column; height: 100%;
text-decoration: none; color: var(--color-text);
border: 1px solid var(--color-border); border-radius: var(--radius);
background: var(--color-bg); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.tile__link:hover { border-color: var(--color-brand); box-shadow: var(--shadow); color: var(--color-text); }
.tile__media { display: block; aspect-ratio: 1 / 1; background: var(--color-product-bg); }
/* 画像は「地の色で正方形に埋めた」状態で書き出しているため、
枠も正方形にして cover で敷き詰める。こうすると枠の地色が一切見えず、
写真が小さな長方形として浮く問題が起きない。 */
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { display: block; padding: var(--space-3); }
.tile__name { display: block; font-weight: 700; line-height: 1.35; }
.tile__alias { display: block; margin-top: var(--space-1);
font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.4; }
/* --- 取扱分野 --- */
/* 8項目の短い語を1列で縦に並べると間延びするので、幅に応じて段組みする。 */
/* 8項目なので、auto-fit に任せると幅次第で5+3のような半端な折り返しになる。
列数を明示して 4+4 / 2+2… と必ず揃うようにする。 */
.markets { list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--space-2) var(--space-4);
grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .markets { grid-template-columns: repeat(4, 1fr); } }
.markets li { max-width: none; padding-left: var(--space-3); position: relative; }
.markets li::before { content: ""; position: absolute; left: 0; top: .62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); }
/* --- メンバー紹介 ---
以前は「Markets We Serve」と2列に並べた右半分に押し込んでいたため、
列が狭いのに本文が約700字あり、顔写真96pxが文章の脇に埋もれていた。
独立した1ブロックに出し、2人を横に並べ、写真は原寸300pxの範囲で
150pxまで拡大する（2倍表示でも劣化しない上限）。 */
/* 2026-10-30 小野江様のご指摘により横2列から縦1列へ。
この節の上下にも2列のまとまりが並ぶため（事業内容／拠点の地図）、
左列＝小野江様＝Chicago、右列＝福田様＝Silicon Valley と、
実際には無い対応関係が読み取れてしまっていた。
縦に積めばどの列とも揃わないので、その誤読が起きない。 */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
/* 原寸は300x300しかないため、150pxがRetina（2倍）での等倍上限。
2026-10-30 YOさんの指示で180pxへ拡大した。2倍表示では1.2倍の拡大に
なるが、写真なので図版やロゴほど劣化は目立たない。
より大きい元画像が入手できれば差し替えたい。 */
.person { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4);
align-items: start; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.person__photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
border: 3px solid var(--color-brand-light); background: var(--color-bg-subtle); }
@media (max-width: 519px) {
.person { grid-template-columns: 130px 1fr; gap: var(--space-3); }
.person__photo { width: 130px; height: 130px; }
}
.person__body { min-width: 0; }
.person__name { font-weight: 700; font-size: var(--font-size-lg); margin: 0; }
/* 役職はリンクではないので、リンク色（ブランドブルー）を使わない。
押せると誤解されるため、濃いグレーで太さだけ出す。 */
.person__role { color: var(--color-text); font-weight: 600;
font-size: var(--font-size-sm); margin: 0 0 var(--space-2); }
/* 縦1列にした際、紹介文だけ行長を74chに絞ったところ、右側が大きく空いて
折り返し位置が中途半端に見えた。写真の右の領域をそのまま使う。 */
.section .person__bio { font-size: var(--font-size-sm); color: var(--color-text-muted);
margin: 0; max-width: none; }
/* --- 拠点写真（製品画像のcontainとは違い、写真は全面に敷く） --- */
.card__media--photo { aspect-ratio: 16 / 9; }
.card__media--photo img { object-fit: cover; }
/* --- 代理店・海外拠点 ---
現行サイトは
で繋いだ一塊のテキストで、強弱が無く読めなかった。
会社名／ラベル／本文の3階層で差をつけ、会社ごとに区切り線を入れる。 */
.region {
/* 見出しであってリンクではないので、ブランドブルーは下線だけに使う。
文字まで青いと押せると誤解される。 */
font-size: var(--font-size-sm); letter-spacing: .1em; text-transform: uppercase;
color: var(--color-text-muted); font-weight: 700;
border-bottom: 2px solid var(--color-brand);
padding-bottom: var(--space-2); margin: var(--space-5) 0 var(--space-3);
}
.orgs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 800px) { .orgs { grid-template-columns: repeat(2, 1fr); } }
/* .orgs は2列グリッドのため、隣接セレクタで余白を足すと
2件目だけが下へずれる。全件に同じ区切りを付けて上端を揃える。 */
.orgs > .org { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.orgs > .org:first-child, .orgs > .org:nth-child(2) { padding-top: 0; border-top: 0; }
@media (max-width: 799px) {
.orgs > .org:nth-child(2) { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
}
.org__name { font-weight: 700; font-size: var(--font-size-lg); margin: 0 0 var(--space-2); }
.org__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.org__row { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); max-width: none; }
@media (min-width: 560px) { .org__row { grid-template-columns: 6.5rem 1fr; gap: var(--space-3); } }
.org__label {
font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--color-text-muted); padding-top: 2px;
}
.org__value { font-size: var(--font-size-sm); min-width: 0; }
.org__addr { font-size: var(--font-size-sm); color: var(--color-text-muted);
font-style: normal; margin-top: var(--space-2); }
/* 取扱製品はタグとして並べる（カンマ区切りの長文より拾いやすい） */
/* 取扱製品のタグは押せない。ブランド色で塗ると、すぐ上にある実際に押せる
「Common searches」のチップ（白地に黒文字）より押せそうに見えてしまう。
地色だけで区切り、文字色はリンクと混ざらない中間のグレーにする。 */
.pill { display: inline-block; font-size: .75rem; line-height: 1.6;
padding: 1px var(--space-2); margin: 0 var(--space-1) var(--space-1) 0;
background: var(--color-bg-subtle); color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 999px; white-space: nowrap; }
/* 海外拠点：会社の下に事業所をぶら下げる */
.net .org + .org { margin-top: var(--space-5); padding-top: var(--space-4);
border-top: 1px solid var(--color-border); }
.offices { list-style: none; margin: var(--space-2) 0 0; padding: 0;
display: grid; gap: var(--space-3); }
.office { padding-left: var(--space-3); border-left: 3px solid var(--color-brand-light); }
.office__name { font-weight: 600; font-size: var(--font-size-sm); margin: 0 0 2px; }
.office__addr { font-style: normal; font-size: var(--font-size-sm);
color: var(--color-text-muted); margin: 0; }
.office__tel { font-size: var(--font-size-sm); margin: 2px 0 0;
font-variant-numeric: tabular-nums; }
/* --- 拠点の地図 --- */
.map { position: relative; aspect-ratio: 16 / 9; background: var(--color-bg-subtle);
border-top: 1px solid var(--color-border); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* --- 会社ロゴ（地域単位ではなく会社ごとに置く） ---
縦横比が3.4〜8.1とバラバラ（Mighty Cubeはタグライン付きの2行構成）。
高さを揃えると横幅が88px〜211pxと倍以上ひらき、小さく見えるものが出る。
共通の枠に contain で収めることで、どのロゴも同じ面積感になる。 */
.org__logo {
/* ロゴはその会社の情報の一部なので、区切り線で分断しない。
会社どうしの区切りは .org 側の線が担っている。 */
margin: var(--space-3) 0 0;
}
.org__logo img {
/* 枠の寸法は総当たりで検証して決めた。240x48 のとき各ロゴの
描画面積のばらつきが最小（1.22倍）になり、かつ大きく見せられる。 */
width: 100%; max-width: 240px; height: 48px;
object-fit: contain; object-position: left center;
}
/* --- About の事業紹介 --- */
.service__title { font-size: var(--font-size-h3); margin-bottom: var(--space-2);
padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-brand-light); }
.service__label { font-size: .75rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--color-text-muted);
margin: var(--space-3) 0 var(--space-2); }
.service__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.service__list li { position: relative; padding-left: 1.1em; font-size: var(--font-size-sm); }
.service__list li::before { content: "▸"; position: absolute; left: 0; color: var(--color-brand); }
/* タイルの補足情報（型番数・カタログ数） */
.tile__meta { display: block; margin-top: var(--space-2);
font-size: var(--font-size-sm); color: var(--color-brand-dark); font-weight: 600; }
/* --- ニュース一覧 ---
以前は3カラムのカードで、素材が300px（2018年以前は150px）しかないのに
351px幅で表示していたため、全点が拡大されて滲んでいた。
1件1行のリストに変え、サムネイルは120pxに固定する。
素材を280pxに揃えてあるので、Retina（2倍=240px）でも拡大にならない。 */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4);
align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.news-item:first-child { border-top: 1px solid var(--color-border); }
/* 素材ごとに地色が違う（白地のロゴ／余白付きのバナー）ため、枠の地を
薄い色にすると白地のものだけ浮いて見える。白地＋細い枠で揃える。 */
.news-item__media { display: block; width: 120px; height: 120px; flex: none;
background: #fff; border: 1px solid var(--color-border);
border-radius: var(--radius); overflow: hidden; }
.news-item__media img { width: 100%; height: 100%; object-fit: contain; }
.news-item__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
/* `.section p`（詳細度0,1,1）に負けて72chで折り返していたため、
同じ詳細度になるよう .section を付けて打ち消す。 */
.section .news-item__date { font-size: var(--font-size-sm); color: var(--color-text-muted);
margin: 0; letter-spacing: .04em; max-width: none; }
.section .news-item__title { margin: 0; font-weight: 600; font-size: var(--font-size-lg);
line-height: 1.45; max-width: none; }
@media (max-width: 559px) {
.news-item { grid-template-columns: 84px 1fr; gap: var(--space-3); align-items: start; }
.news-item__media { width: 84px; height: 84px; }
/* .section .news-item__title（0,2,0）に負けるため、こちらも .section を付ける。
メディアクエリは詳細度を足さない。 */
.section .news-item__title { font-size: var(--font-size-base); }
}
/* --- 折り返しの体裁 ---
最終行に1語だけ残る「ウィドウ」は読みにくく、未完成な印象を与える。
短い行はぶら下がりを防ぎ、見出しは語の途中で折り返さない。 */
main p, main li { text-wrap: pretty; }
h1, h2, h3, h4, .tile__name, .org__name, .card__title { text-wrap: balance; }
/* リンクと直後の句点が離れると、ピリオド1文字だけが次行に落ちる。
内側の に white-space:normal を残すと、そこで折り返せてしまい
結局ピリオドが切り離されるため、まとめて nowrap にする。
リンク文字列が長い場合に備え、行頭で折り返せるよう前後に通常の空白を残す。 */
.nowrap-end { white-space: nowrap; }
/* --- 本文のメリハリ ---
原稿は改行だけで区切られており、
で繋ぐと同じ太さ・同じ行間の文字が
延々と続く「壁」になる。段落・箇条書き・小見出しで強弱を付ける。 */
.body-label {
font-weight: 700; color: var(--color-text);
margin: var(--space-4) 0 var(--space-2);
}
.body-list { list-style: none; margin: 0 0 var(--space-3); padding: 0;
display: grid; gap: var(--space-1); }
.body-list li { position: relative; padding-left: 1.3em; }
.body-list li::before {
content: ""; position: absolute; left: .35em; top: .62em;
width: .35em; height: .35em; border-radius: 50%; background: var(--color-brand);
}
/* --- フッター ---
以前は全リンクに下線が付き、製品10件が1列に長く伸びて重く見えていた。
下線はホバー時だけにし、製品は2列に分けて高さを揃える。
拠点の住所を入れて左列の空きを埋め、実在感を出す。 */
.footer__cols {
display: grid; gap: var(--space-6) var(--space-5);
grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer__cols { grid-template-columns: 1.4fr 1.6fr 1fr; } }
.footer__name { font-size: var(--font-size-lg); font-weight: 700; margin: 0 0 var(--space-1); }
.footer__tagline { color: rgba(255,255,255,.72); font-size: var(--font-size-sm);
margin: 0 0 var(--space-4); }
.footer__office { font-style: normal; font-size: var(--font-size-sm);
color: rgba(255,255,255,.72); margin-bottom: var(--space-2); line-height: 1.55; }
.footer__office-name { display: block; color: #fff; font-weight: 600; }
.footer__cta { margin: var(--space-4) 0 0; }
.footer__heading {
font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.6); margin: 0 0 var(--space-3);
padding-bottom: var(--space-2); border-bottom: 1px solid rgba(255,255,255,.18);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--space-2); }
.footer__list--two { columns: 2; column-gap: var(--space-4); }
@media (max-width: 759px) { .footer__list--two { columns: 1; } }
.footer__list a, .footer__legal a {
text-decoration: none; color: rgba(255,255,255,.88);
}
.footer__list a:hover, .footer__legal a:hover {
color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
/* 枠線だけのボタン。暗い背景では塗りより落ち着いて見える。 */
.btn--ghost {
background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.site-footer__bottom {
/* layout.css にも同名の定義があったが、読み込み順でこちらが勝っていた。
あちらでしか効いていなかった opacity をここへ集約した。 */
margin-top: var(--space-6); padding-top: var(--space-4); opacity: .85;
border-top: 1px solid rgba(255,255,255,.18);
display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
align-items: center; justify-content: space-between;
font-size: var(--font-size-sm);
}
.footer__copy { margin: 0; color: rgba(255,255,255,.7); }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap;
gap: var(--space-4); margin: 0; padding: 0; }
/* 規約ページの連絡先 */
.legal-address { font-style: normal; padding: var(--space-3);
border-left: 3px solid var(--color-brand-light); background: var(--color-bg-subtle); }
/* --- 規約の条項見出し ---
条項名が本文の先頭に埋もれると、どこで条項が切り替わるのか追えない。
見出しとして立て、前に余白を取る。 */
.clause {
font-size: var(--font-size-h3); margin-top: var(--space-6);
padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border);
}
/* --- 規約ページの行長 ---
条項見出しの罫線はコンテナ幅いっぱいに伸びるのに、本文だけが 72ch
（約650px）で折り返していたため、右端が大きくズレて改行位置が
ちぐはぐに見えていた。
一度 `> * { max-width: 82ch }` で揃えようとしたが、ch は要素ごとの
フォントサイズで解決するので、本文(17px)と条項見出し(24px)で別々の
幅になり揃わなかった（実測105pxのズレ）。
規約は拾い読みする文書なので、コンテナ幅をそのまま使って
見出し・罫線・本文の右端を一致させる。 */
.container--legal p, .container--legal li { max-width: none; }
/* 型番表の「カタログ」欄で、同じ行に複数のPDFがあるときの識別語 */
.pdf-tag { font-size: var(--font-size-sm); color: var(--color-text-muted);
font-weight: 400; white-space: nowrap; }
/* --- スマホ：型番表の「カタログ」欄が画面外に切れる ---
表は横スクロールできるが、初期表示では見出しが「Cata…」、各行が「P…」で
切れており、表の目的であるPDFのダウンロードが見えない。
型番列（左）と同じように、カタログ列を右端に貼り付ける。 */
/* --- スマホ：表が横に続いていることを示す ---
型番列とカタログ列を左右に貼り付けた結果、間の仕様列（定格トルク等）が
画面外に隠れ、型番も右端で文字の途中で切れる。横スクロールはできるが
それが分からず、購買判断に必要な数値に気づけない。
表の上に案内を出す。 */
@media (max-width: 759px) {
.table-scroll { position: relative; }
/* 英語サイトなので既定を英語にする。矢印は右スクロールを示す → に統一。 */
.table-scroll::before {
content: "Swipe to see specifications \2192";
display: block; padding: var(--space-2) 0;
font-size: var(--font-size-sm); color: var(--color-text-muted);
}
}
@media (max-width: 759px) {
.spec-table th:last-child, .spec-table td:last-child {
position: sticky; right: 0; z-index: 1;
background: var(--color-bg);
box-shadow: -8px 0 8px -8px rgba(0,0,0,.25);
}
.spec-table tbody tr:nth-child(even) td:last-child { background: var(--color-bg-subtle); }
/* 同じ行に複数のPDFがある場合、識別語を隠すと目で見分けられなくなる。
横に並べると貼り付けた列が広がって本文を覆うので、縦に積み、
識別語は列幅に収まる範囲で省略表示する。 */
.spec-table td:last-child { max-width: 44vw; }
.spec-table td:last-child a { display: flex; align-items: center; gap: var(--space-1); }
.pdf-tag { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
/* --- スマホ：フッターのタップ領域 ---
リンクの高さが16〜18pxしかなく、隣の項目とほぼ接していた（WCAG 2.5.8）。
行間ではなくリンク自体に余白を持たせて、指で押せる高さにする。 */
@media (max-width: 759px) {
.footer__list li { margin-bottom: 0; }
.footer__list a, .footer__legal a {
display: inline-block; min-height: 44px; line-height: 1.5;
padding-block: calc((44px - 1.5em) / 2);
}
.footer__legal { gap: var(--space-2) var(--space-4); }
}
/* --- 図版の拡大 ---
比較表・選定チャートは「表の画像」なので、幅いっぱいに出しても
スマホでは本文が4〜5pt相当になり読めない。原寸を別タブで開けることを
見ただけで分かるようにする（リンク自体は以前からあった）。 */
.figure__link { position: relative; display: block; }
.figure__zoom {
position: absolute; right: var(--space-2); bottom: var(--space-2);
font-size: var(--font-size-sm); font-weight: 600; line-height: 1;
padding: var(--space-2) var(--space-3); border-radius: 999px;
background: rgba(20,25,31,.82); color: #fff; pointer-events: none;
}
.figure__zoom::after { content: " \2197"; }
.figure__link:hover .figure__zoom { background: var(--color-brand); }
/* --- 最後のセクションとフッターの間 ---
フッターの margin-top は、白地のセクションで終わるページに余白を
与えるためのもの。ただし最後が地色付きの帯（CTA）で終わるページでは、
灰色の帯と紺色のフッターの間に白い帯が挟まり、途切れて見える。
帯で終わるページだけ余白を詰める。 */
main:has(> .section--subtle:last-child) + .site-footer { margin-top: 0; }
/* --- お問い合わせページの導入文 ---
すぐ下のフォーム（56rem）より手前で折り返すと、右端が揃わず
中途半端に見える。フォームと同じ幅にする。 */
.section .form-lead p { max-width: 56rem; }