/* =========================================================== TESCOM website — shared design system クリーン基調 / TESCOMブルー #0080ad / Zen Kaku Gothic New + Inter =========================================================== */ :root{ --primary:#0080ad; --primary-dark:#006688; --primary-light:#e6f4f8; --ink:#15242b; --ink-soft:#4a5a62; --ink-faint:#819097; --line:#e4e9ec; --line-soft:#eef2f4; --bg:#ffffff; --bg-alt:#f5f8fa; /* 英数字も本文と同じ書体に統一(無印は1書体)。Inter 併用の違和感を解消。 桁揃えが要る数表だけ必要なら個別に等幅指定する。 */ --font-en:var(--font-body); /* 見出し / 本文ともに Noto Sans JP で確定(2026-06-02)。 将来 Adobe Fonts(ゴシックMB101 / UD新ゴ / 筑紫ゴシック)へ昇格する場合は この2変数とHTMLの埋め込みタグを差し替えるだけでよい。 */ --font-head:'Noto Sans JP','Hiragino Sans','Yu Gothic UI',sans-serif; --font-body:'Noto Sans JP','Hiragino Sans','Yu Gothic UI',sans-serif; --font-ja:var(--font-body); /* 後方互換 */ --ease:cubic-bezier(.16,1,.3,1); --radius:0px; /* 四角デザイン基調(2026-06): 角丸なし */ --radius-sm:0px; /* ---- 文字サイズは 6 段だけ (2026-09-07) ---- 実測すると 1440 でトップに 20 種、うち 16 種が 10.9〜16.8px の 5.9px 幅に密集していた (テキスト要素の 88%)。段が多いのに差が 0.1〜0.5px しかなく、目がどこを先に見るか判断できない状態だった。 32 / 26 / 20 / 16 / 14 / 12 の 6 段に固定し、半端値を作らない。 ・見出しと本文の比は 32 / 14 = 2.29 倍 (無印の実測値と同じ) ・本文は 14px から下げない (BtoB で 1 画面の情報量が要るため、 無印のような消費者向けの 16px 本文 + 大余白は採らない) ・新しく font-size を書く時は必ずこの 6 個のどれかを使う。 「あと 1px 大きく」は段を増やすので禁止 */ --fs-h1:clamp(1.625rem,1rem + 2.5vw,2rem); /* 26 → 32 セクション/ページの見出し */ --fs-h2:clamp(1.25rem,.85rem + 1.6vw,1.625rem); /* 20 → 26 下位セクションの見出し */ --fs-h3:1.25rem; /* 20 帯の見出し・3列カードの見出し */ --fs-lead:1rem; /* 16 リード文・ナビ・タイルのラベル・入力欄 */ --fs-body:.875rem; /* 14 本文 (主力) */ --fs-note:.75rem; /* 12 補助・注記・英字ラベル・バッジ */ /* ---- セクションの縦リズム (2026-09-07) ---- セクション同士の隙間は 0 のまま (無印と同じく、区切りは余白ではなく 背景帯の交替でつける)。見た目の離れは「前の帯の下余白 + 次の帯の上余白」 で決まるので、全部の帯を 上64 / 下96 に揃えると境目が必ず 160px になる。 修正前は 96/33/97/80/33/42 とばらけていて、境目が 75〜186px (2.46倍) に 振れていた = 「上が空きすぎ・下が詰まりすぎ」の正体。 390 では 2/3 (44 / 64、境目 108px) まで詰める。 */ --sec-pt:clamp(2.75rem,2.29rem + 1.9vw,4rem); /* 44 → 64 */ --sec-pb:clamp(4rem,3.26rem + 3.05vw,6rem); /* 64 → 96 */ --space:clamp(3.25rem,2.4rem + 4vw,6.5rem); /* 旧セクション縦余白。--sec-pt/--sec-pb へ移行済(後方互換で残す) */ --head-max:1680px; /* ヘッダ(ナビ帯)の最大幅。本文1240pxより広い別レイヤー(無印型)。狭くしたい時はここだけ調整 */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--font-body);color:var(--ink);background:var(--bg); line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1; letter-spacing:.01em; /* 日本語を文節単位で折り返す。助詞(の/が/を等)が行頭に来る・「IEC56〜IEC160」が 割れるといった不自然な改行を抑える。Chrome/Edge 119+ 対応、未対応は既定にフォールバック。 前提で文節解析が効く。 */ word-break:auto-phrase;line-break:strict; } /* 見出しは専用フォント・太く・字間を締める(JPは palt + わずかな負トラッキングで密度を出す) */ /* 無印基準: 見出しも太くしすぎない(上限700)・字間を詰めすぎない・行間ゆったり */ h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-.005em;line-height:1.45} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* 読み上げ専用テキストと「本文へ」スキップリンク。 site-chrome.js が実行時に注入していたが、JS が届く前(あるいは落ちた時)に 文字が見えてしまうため CSS 側に置く。リンク自体の生成は site-chrome.js。 */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;margin:0;padding:.7rem 1.2rem; clip:auto;overflow:visible;z-index:200;background:var(--primary);color:var(--bg);font-size:var(--fs-body)} .en{font-family:var(--font-en);letter-spacing:.02em} .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)} /* ---------- header ---------- */ /* MUJI風: 短めヘッダ / 小さめで濃い密なナビ / 右側アイコン */ /* ナビ帯は本文(1240px)より広い別レイヤー。無印同様ロゴを左・ユーティリティを右へ広げる。 */ .site-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)} .site-head .wrap{display:flex;align-items:center;gap:1.8rem;height:84px;position:relative;max-width:var(--head-max,1680px)} /* ハンバーガー(モバイルのみ表示) */ .navtoggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink); padding:6px;border-radius:0;align-items:center;justify-content:center;transition:.18s var(--ease)} .navtoggle:hover{color:var(--primary);background:var(--bg-alt)} .navthumb{display:none} /* PCナビでは非表示。モバイルドロワーでのみサムネイル表示 */ .mainnav .nav-chev{display:none} /* シェブロンもモバイルドロワーのみ */ /* ロゴは伸縮NG: flexで潰れず縦横比も崩れないよう固定(高さ基準・幅auto) */ .site-head .logo{flex:none;display:flex;align-items:center} .site-head .logo img{height:26px;width:auto;flex:none;display:block;object-fit:contain;max-width:none} /* グローバルナビは無印に合わせて大きく・太く(本文/見出しの細さとは別レイヤー) */ .mainnav{display:flex;align-items:center;gap:1.7rem;margin-left:1rem} .mainnav a{font-size:var(--fs-lead);font-weight:700;color:var(--ink);white-space:nowrap;transition:color .18s var(--ease)} .mainnav a:hover,.mainnav a.active{color:var(--primary)} .navsep{width:1px;height:19px;background:var(--line)} .navutil{margin-left:auto;display:flex;align-items:center;gap:1rem} .navutil .contact-link{font-size:var(--fs-lead);font-weight:600;color:var(--ink);display:inline-flex; align-items:center;gap:.4rem;white-space:nowrap;transition:color .18s var(--ease)} .navutil .contact-link:hover{color:var(--primary)} /* 中間〜広幅: ヘッダ2段(上=ロゴ+ユーティリティ / 下=ナビ)。幅を狭めてもロゴが縮まない */ /* 広幅は既定で1段(ロゴ|ナビ|ユーティリティ)。無印に倣い、収まるうちは2段にしない。 入り切らない時だけ site-chrome.js が .two-row を付与し、ナビを下段(全幅)へ落とす。 */ @media(min-width:861px){ .site-head.two-row .wrap{flex-wrap:wrap;height:auto;padding-block:.9rem;gap:.5rem 1.8rem} .site-head.two-row .logo{order:1} .site-head.two-row .navutil{order:2;margin-left:auto} .site-head.two-row .mainnav{order:3;flex-basis:100%;margin-left:0;gap:1.7rem;padding-top:.25rem} } @media(max-width:860px){ /* モバイルは左を詰める(ハンバーガー↔ロゴ間 + ヘッダ左端)。右はお問い合わせを詰めすぎないよう維持 */ .site-head .wrap{gap:.3rem;height:52px;padding-left:clamp(.8rem,3.5vw,1rem)} .navtoggle{display:flex;padding:4px;margin-left:-4px} .navtoggle svg{width:21px;height:21px} .navsep{display:none} /* ロゴは「縮められる」状態にする。flex:none + max-width:none のままだと ヘッダ1行の最小幅が 424px で固定され、iPhone 全機種で横スクロールが出る */ .site-head .logo{flex:0 1 auto;min-width:0;overflow:hidden} .site-head .logo img{height:20px;width:auto;max-width:100%;object-position:left} .navutil{flex:none} .navtoggle{flex:none} .mainnav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch; gap:0;margin:0;background:#fff;border-top:1px solid var(--line); box-shadow:0 18px 30px -20px rgba(21,36,43,.3);padding:0;display:none;z-index:60} .site-head.open .mainnav{display:flex} /* 無印型ドロワー: サムネは行の高さいっぱい＋左端まで full-bleed、ラベル左、右にシェブロン */ .mainnav a{display:flex;align-items:center;gap:0;font-size:var(--fs-lead); padding:0;min-height:62px;border-bottom:1px solid var(--line-soft)} .mainnav a:last-child{border-bottom:none} .mainnav a>span{flex:1;padding:0 clamp(1.1rem,4.5vw,2.4rem);font-weight:600} /* 遷移を示すシェブロン(無印の＋=開閉とは別。各ページへ飛ぶので右向き矢印) */ .mainnav .nav-chev{display:block;flex:none;width:18px;height:18px; color:var(--ink);opacity:.4;margin-right:clamp(.9rem,4vw,1.7rem)} .navthumb{display:block;flex:none;width:78px;align-self:stretch;height:auto; object-fit:contain;background:var(--bg-alt);border-radius:0;padding:13px} /* サムネ無し(カタログ/会社案内)のラベルは左端を少し空けて整える */ .mainnav a:not(:has(.navthumb))>span{padding-left:clamp(1.25rem,5vw,3rem)} } /* ---------- buttons ---------- */ .btn{font-family:var(--font-ja);font-weight:600;font-size:var(--fs-body);padding:.85rem 1.7rem; border-radius:0;cursor:pointer;border:1.5px solid transparent;display:inline-flex; align-items:center;gap:.5rem;transition:all .22s var(--ease)} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark)} .btn-ghost{border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--primary);color:var(--primary)} .btn .arr{font-family:var(--font-en);transition:transform .22s var(--ease)} .btn:hover .arr{transform:translateX(3px)} /* ---------- breadcrumb ---------- */ .crumb{font-size:var(--fs-note);color:var(--ink-soft);padding:1.6rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap} .crumb a:hover{color:var(--primary)} .crumb .sep{color:var(--line);font-family:var(--font-en)} /* ---------- page head ---------- */ .page-head{padding:2.2rem 0 2.6rem} .page-head h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.01em;line-height:1.4} /* 本文の行長は em で指定する(全角≒1em)。ch は半角「0」基準のため、 日本語だと意図の約半分の文字数で折り返してしまう(62ch≒全角31字)。 */ .page-head p{margin-top:1rem;color:var(--ink-soft);font-size:var(--fs-lead);max-width:44em} /* ---------- catalog layout (list page) ---------- */ .catalog-layout{display:grid;grid-template-columns:200px 1fr;gap:clamp(1.5rem,3vw,2.6rem); padding-bottom:6rem} @media(max-width:860px){.catalog-layout{grid-template-columns:1fr}} /* filter sidebar */ .filters{position:sticky;top:100px;padding-bottom:1rem} .filters .fsearch{width:100%;border:1px solid var(--line);border-radius:0;padding:.62rem 1rem; font-family:var(--font-ja);font-size:var(--fs-body);margin-bottom:1.5rem;transition:border-color .2s var(--ease)} .filters .fsearch:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)} .fgroup{border-top:1px solid var(--line)} .fgroup .fsum{list-style:none;display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.9rem 0;user-select:none} .fgroup .fsum::-webkit-details-marker{display:none} .fgroup h4{font-size:var(--fs-note);font-weight:700;letter-spacing:.08em;color:var(--ink-faint); text-transform:uppercase;margin:0;font-family:var(--font-en)} .fgroup .fbadge{font-family:var(--font-en);font-size:var(--fs-note);font-weight:700;color:var(--primary)} .fgroup .fcaret{margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);transform:rotate(45deg);transition:transform .2s var(--ease)} .fgroup[open] .fcaret{transform:rotate(-135deg)} .fgroup .fopts{padding-bottom:.9rem} .fopt{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-body);color:var(--ink-soft); padding:.22rem 0;cursor:pointer;transition:color .15s var(--ease)} .fopt:hover{color:var(--primary)} .fopt input{accent-color:var(--primary);width:15px;height:15px;cursor:pointer} .fclear{font-size:var(--fs-note);color:var(--primary);cursor:pointer;font-weight:600;display:inline-flex;gap:.3rem;align-items:center} .fclear:hover{text-decoration:underline} @media(max-width:860px){.filters{position:static}} /* results meta */ .results-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.4rem;flex-wrap:wrap;gap:.6rem} .results-meta .count{font-size:var(--fs-body);color:var(--ink-soft)} .results-meta .count b{color:var(--ink);font-family:var(--font-en);font-weight:700} .results-meta .rsort{font-size:var(--fs-note);color:var(--ink-soft);display:inline-flex;align-items:center;gap:.55rem} .results-meta .rsort select{font-family:var(--font-ja);font-size:var(--fs-body);color:var(--ink);border:1px solid var(--line); background:#fff;padding:.42rem 2rem .42rem .75rem;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='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%23819097' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .6rem center;background-size:10px;transition:border-color .2s var(--ease)} .results-meta .rsort select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)} /* product grid */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:0; border-top:1px solid var(--line);border-left:1px solid var(--line)} .pcard{border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff; display:flex;flex-direction:column;transition:background .2s var(--ease)} .pcard:hover{background:var(--bg-alt)} /* hover効果は外側シャドウではなく、画像をわずかに暗くする */ /* 機械(fatosa/dertec)の写真付きメッシュカード。製品は白背景撮りなので contain で全体を見せる。 */ .pcard--machine .ph{background:#fff} .pcard--machine .ph img{object-fit:contain;padding:.7rem} .pcard--machine:hover .ph img{filter:brightness(.97)} .pcard .ph.empty{display:grid;place-items:center;background:var(--bg-alt)} .pcard .ph.empty span{font-family:var(--font-en);font-size:var(--fs-note);letter-spacing:.08em;color:var(--ink-faint)} .pcard .pmodel{font-family:var(--font-en);font-weight:700;color:var(--primary); font-size:var(--fs-note);letter-spacing:.02em;display:block;margin-bottom:.15rem} .pcard .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);position:relative} .pcard .ph img{width:100%;height:100%;object-fit:cover;transition:filter .4s var(--ease)} .pcard:hover .ph img{filter:brightness(.93)} .pcard .series{position:absolute;top:.7rem;left:.7rem;font-family:var(--font-en);font-size:var(--fs-note); font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(21,36,43,.62); backdrop-filter:blur(4px);padding:.22rem .55rem;border-radius:0} .pcard .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1} .pcard .body h3{font-size:var(--fs-lead);font-weight:600;line-height:1.5} .pcard .body .en-name{font-family:var(--font-en);font-size:var(--fs-note);color:var(--ink-faint);margin-top:.1rem;font-weight:500} .pcard .body p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:.6rem;flex:1; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;min-width:0} /* 軸行を持つカード (VOLTA 一覧) だけ 2 段にする。machine.html の .pcard は 1 行のままなので、既定を変えずに修飾クラスで分ける。 */ .pcard .foot.foot-stack{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.35rem} .pcard .sku{font-size:var(--fs-note);color:var(--ink-faint)} .pcard .sku b{font-family:var(--font-en);color:var(--primary);font-weight:700} .pcard .more{font-family:var(--font-en);font-size:var(--fs-note);font-weight:600;color:var(--primary);display:inline-flex;gap:.35rem;align-items:center} .pcard .more .arr{transition:transform .22s var(--ease)} .pcard:hover .more .arr{transform:translateX(4px)} .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem} .tag{font-size:var(--fs-note);color:var(--ink-soft);background:var(--bg-alt);border-radius:0;padding:.18rem .5rem} .empty{padding:4rem 1rem;text-align:center;color:var(--ink-soft);grid-column:1/-1} /* ---------- product detail ---------- */ .pd{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem); align-items:start;padding:2rem 0 4rem} @media(max-width:860px){.pd{grid-template-columns:1fr}} /* 無印フラット基調: 影なし・角丸ゼロ・1px ヘアライン枠で締める */ .pd-visual img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius); border:1px solid var(--line)} /* 機械の製品撮り(白背景)は全体を見せる */ .pd-visual--machine img{object-fit:contain;background:#fff} .pd-info .series-pill{display:inline-block;font-family:var(--font-en);font-size:var(--fs-note);font-weight:700; letter-spacing:.06em;color:var(--primary);background:var(--primary-light);padding:.3rem .7rem;border-radius:0;margin-bottom:1rem} .pd-info h1{font-size:var(--fs-h1);font-weight:700;line-height:1.4;letter-spacing:-.01em} .pd-info .en-name{font-family:var(--font-en);font-size:var(--fs-lead);color:var(--ink-faint);margin-top:.3rem;font-weight:500} .pd-info .lead{margin-top:1.3rem;color:var(--ink-soft);font-size:var(--fs-lead)} .pd-info .actions{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap} .pd-section{padding:3rem 0;border-top:1px solid var(--line-soft)} .pd-section h2{font-size:var(--fs-h3);font-weight:700;margin-bottom:1.4rem;display:flex;align-items:center;gap:.6rem} .pd-section h2::before{content:"";width:5px;height:1.1em;background:var(--primary);border-radius:0} .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem} @media(max-width:600px){.feature-list{grid-template-columns:1fr}} .feature-list li{list-style:none;padding-left:1.6rem;position:relative;color:var(--ink-soft);font-size:var(--fs-body)} .feature-list li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700} .spec-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)} .spec-table th,.spec-table td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line-soft);vertical-align:top} /* body の word-break:auto-phrase は「標準サポートプーリー幅」のような複合語を 1 文節として扱うため、th の min-content が 168px 程度まで膨らみ、 390px 幅で表が画面外へはみ出す。項目名は普通に折り返してよいので打ち消す。 */ .spec-table th{width:34%;color:var(--ink-soft);font-weight:600;background:var(--bg-alt); word-break:normal;overflow-wrap:anywhere} .spec-table td{color:var(--ink)} .ind-chips{display:flex;flex-wrap:wrap;gap:.6rem} .ind-chip{font-size:var(--fs-body);font-weight:500;padding:.5rem 1rem;border-radius:0; background:#fff;border:1px solid var(--line);color:var(--ink-soft)} .note{font-size:var(--fs-note);color:var(--ink-faint);background:var(--bg-alt);border-radius:var(--radius-sm); padding:.8rem 1.1rem;margin-top:1rem;border-left:3px solid var(--primary)} /* ---------- footer ---------- */ /* MUJI/UNIQLO風: 明るい背景・黒文字・多列の整然リンク */ .site-foot{background:var(--bg-alt);color:var(--ink-soft);padding:clamp(2rem,2.8vw,2.8rem) 0 2rem;margin-top:clamp(2.2rem,3.5vw,3.4rem);border-top:1px solid var(--line)} /* フッターもヘッダと同じワイド幅(無印型の上下チロム揃え)。本文は1240pxのまま */ .site-foot .wrap{max-width:var(--head-max,1680px)} /* 無印同様、一番左(ロゴ列)を広めに */ .foot-top{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;gap:2.2rem clamp(1.6rem,3vw,3.2rem);padding-bottom:2.4rem} /* 社名入り横長ロゴ。狭い列ではみ出さないよう max-width+contain で安全に縮める */ .foot-brand img{height:22px;width:auto;max-width:100%;object-fit:contain;object-position:left} .foot-brand p{margin-top:.85rem;font-size:var(--fs-note);line-height:1.8;color:var(--ink-soft)} .foot-social{display:flex;gap:1.1rem;margin-top:1rem} .foot-social a{color:var(--ink-soft);display:flex;transition:color .18s var(--ease)} .foot-social a:hover{color:var(--primary)} .foot-social svg{width:20px;height:20px} /* 無印型: 各グループ先頭のタイトル(ブランド名・リンク)。文字サイズは他リンクと同じ、色だけ少し濃く */ .foot-col-title{display:block;font-size:var(--fs-note);font-weight:600;padding:.28rem 0;margin-bottom:0; color:var(--ink);transition:color .18s var(--ease)} .foot-col-title:hover{color:var(--primary)} .foot-col-links a{display:block;font-size:var(--fs-note);padding:.28rem 0;color:var(--ink-soft);transition:color .18s var(--ease)} .foot-col-links a:hover{color:var(--primary)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding-top:1.8rem;border-top:1px solid var(--line)} .foot-legal{display:flex;gap:1.3rem;flex-wrap:wrap} .foot-legal a{font-size:var(--fs-note);color:var(--ink-soft);transition:color .18s var(--ease)} .foot-legal a:hover{color:var(--primary)} .foot-copy{font-family:var(--font-en);font-size:var(--fs-note);color:var(--ink-faint)} /* 狭い幅は無印型: グループを縦に積み、各グループのリンクは横流しで折り返す。間延びしないよう詰める */ @media(max-width:860px){ .foot-top{grid-template-columns:1fr;gap:.4rem clamp(1.6rem,3vw,3.2rem);padding-bottom:1.6rem} .foot-col-links{display:flex;flex-wrap:wrap;column-gap:1.4rem;row-gap:.3rem} .foot-col-links a{padding:.18rem 0} /* メーカー名は直下のリンクに密着させ、グループ間(row-gap)より狭くして所属を明確に */ .foot-col-title{margin-bottom:0;padding:.18rem 0 0} } /* reveal */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* =========================================================== 追加コンポーネント (2026-06: 全ブランド展開 + リード取得) =========================================================== */ /* ---------- belt-type strip (VOLTA ファインダー入口) ---------- */ .type-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.85rem;margin:.4rem 0 2.4rem} /* カテゴリ数が可変のブランド(fatosa=7 / dertec=3)向け: 固定6列でなく自動詰め */ .type-strip--auto{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .type-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff; cursor:pointer;text-align:left;padding:0;font-family:inherit;display:flex;flex-direction:column; transition:border-color .2s var(--ease)} .type-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)} .type-card .ph{aspect-ratio:5/4;overflow:hidden;background:var(--bg-alt);display:grid;place-items:center} .type-card .ph img{width:100%;height:100%;object-fit:cover;transition:filter .4s var(--ease)} .type-card .ph.empty span{font-family:var(--font-en);font-size:var(--fs-note);letter-spacing:.08em;color:var(--ink-faint)} .type-card:hover .ph img{filter:brightness(.93)} /* 和名が1行のカードと2行のカードが横に並ぶと、英語サブと件数の高さが段違いになる。 カードはグリッドで同じ高さになっているので、英語サブ以下を下端へ寄せて ベースラインを揃える (min-height で行数を固定すると和名が3行の時に破綻する)。 */ .type-card .lbl{padding:.55rem .7rem .7rem;flex:1;display:flex;flex-direction:column} .type-card .lbl b{font-size:var(--fs-body);font-weight:600;color:var(--ink);display:block;line-height:1.4} .type-card .lbl .en{font-family:var(--font-en);font-size:var(--fs-note);color:var(--ink-faint);letter-spacing:.04em;display:block;margin-top:auto;padding-top:.1rem} .type-card .lbl .cnt{font-size:var(--fs-note);color:var(--primary);font-weight:600;margin-top:.3rem;display:block} /* 数の隣に「何を数えたか」を置く形 (VOLTA 一覧)。数字だけを主色にして、 名前は補助色にする。machine.html の .cnt (「3 機種」) は従来のまま。 */ .type-card .lbl .cnt-named{color:var(--ink-soft);font-weight:500;white-space:nowrap} .type-card .lbl .cnt-named b{display:inline;font-family:var(--font-en);font-size:var(--fs-body); line-height:inherit;color:var(--primary);font-weight:700} .strip-hint{font-size:var(--fs-body);color:var(--ink-faint);margin:.2rem 0 1rem} @media(max-width:860px){.type-strip{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:480px){.type-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} /* 列が2〜3列に畳まれる幅では、和名の最後の1文字だけが次行に落ちる (「衛生ベアリングシステ」+「ム」)。均等割りにして行の長さを揃える。 body の word-break:auto-phrase が効いていると text-wrap:balance が 無視されるため、このラベルだけ normal に戻す。 実測 (2026-09): 600px 以下で発生し、640px 以上では出ない。 */ @media(max-width:640px){ .type-card .lbl b{word-break:normal;text-wrap:balance} } /* mobile: フィルタを開閉式に */ .filter-toggle{display:none} @media(max-width:860px){ .filter-toggle{display:inline-flex;align-items:center;gap:.4rem;font-family:inherit;font-weight:600; font-size:var(--fs-body);padding:.6rem 1rem;border:1px solid var(--line);background:#fff;cursor:pointer; width:100%;justify-content:center;margin-bottom:1rem} .filters{display:none} .filters.open{display:block} } /* spec 箇条書き (V・丸/特殊の spec_lines 用) */ .spec-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0} .spec-list li{font-size:var(--fs-body);color:var(--ink-soft);padding-left:1.1rem;position:relative;line-height:1.65} .spec-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--primary);opacity:.7} /* 確認ステータスのちいさな注記 */ .confirm-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-note);color:var(--ink-faint); border:1px solid var(--line);padding:.12rem .5rem;margin-left:.5rem;vertical-align:middle} /* ---------- machine (fatosa/dertec) ---------- */ .brand-intro{max-width:44em;color:var(--ink-soft);margin-bottom:clamp(2rem,3.5vw,3rem)} .mcat{margin-bottom:clamp(2.6rem,4.5vw,4rem);scroll-margin-top:100px} .mcat-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-bottom:.9rem; margin-bottom:1.4rem;border-bottom:1px solid var(--line)} .mcat-head h2{font-size:var(--fs-h2);font-weight:700} .mcat-head .en{font-family:var(--font-en);font-size:var(--fs-note);color:var(--ink-faint)} .mcat-head .cnt{margin-left:auto;font-size:var(--fs-note);color:var(--ink-soft)} .mcat-blurb{color:var(--ink-soft);max-width:46em;margin-bottom:1.6rem} .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(1rem,2vw,1.4rem)} .mcard{border:1px solid var(--line);background:#fff;padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column; text-align:left;font-family:inherit;cursor:pointer;transition:border-color .2s var(--ease)} .mcard:hover{border-color:var(--primary)} .mcard .mh{display:flex;align-items:baseline;gap:.5rem;justify-content:space-between} .mcard .mmodel{font-family:var(--font-en);font-weight:700;color:var(--primary);font-size:var(--fs-body);letter-spacing:.02em} .mcard h3{font-size:var(--fs-lead);font-weight:600;line-height:1.5;margin-top:.15rem} .mcard p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:.5rem;flex:1; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .mcard .more{font-family:var(--font-en);font-size:var(--fs-note);font-weight:600;color:var(--primary);margin-top:.9rem; display:inline-flex;gap:.35rem;align-items:center} .mcard:hover .more .arr{transform:translateX(4px)} .mcard .more .arr{transition:transform .22s var(--ease)} /* カテゴリ内ジャンプ */ .cat-jump{display:flex;flex-wrap:wrap;gap:.6rem;margin:.2rem 0 2.4rem} .cat-jump a{font-size:var(--fs-body);font-weight:500;padding:.5rem 1rem;border:1px solid var(--line); color:var(--ink-soft);background:#fff;transition:all .18s var(--ease)} .cat-jump a:hover{border-color:var(--primary);color:var(--primary)} /* ---------- industries page ---------- */ .ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.2rem,2.2vw,1.8rem)} .ind-card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;overflow:hidden} .ind-card .ph{aspect-ratio:16/9;background:var(--bg-alt);overflow:hidden;display:grid;place-items:center} .ind-card .ph img{width:100%;height:100%;object-fit:cover} .ind-card .ph.empty span{font-family:var(--font-en);font-size:var(--fs-note);color:var(--ink-faint);letter-spacing:.08em} .ind-card .ic-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1} .ind-card h3{font-size:var(--fs-h3);font-weight:700;line-height:1.45} .ind-card .ic-blurb{font-size:var(--fs-body);color:var(--ink-soft);margin-top:.6rem;flex:1} .ind-card .ic-rec{margin-top:1rem;border-top:1px solid var(--line-soft);padding-top:.9rem} .ind-card .ic-rec .t{font-size:var(--fs-note);font-weight:700;color:var(--ink-faint);letter-spacing:.06em;margin-bottom:.5rem} .ind-card .ic-rec ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem} .ind-card .ic-rec li{font-size:var(--fs-note);color:var(--ink-soft);background:var(--bg-alt);padding:.2rem .55rem} /* 業種カードの足回り。.dl-foot はカタログ側 (.dlcard) にしか定義が無く、 ここではただのブロックだったため「VOLTAベルトを見る →」と「資料請求」が 間隔ゼロで隣り合っていた。押し間違えないよう 12px 以上あける。 */ .ind-card .dl-foot{display:flex;align-items:center;justify-content:space-between; gap:.85rem;flex-wrap:wrap} /* 「VOLTAベルトを見る →」。以前は industries.html の JS 側に font-family/font-size/color をインラインで書いていたため .8rem(12.8px) が 段の外に出ていた。ここに寄せて --fs-note に揃える (2026-09-07)。 */ .ind-card .dl-foot .more{white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem; font-family:var(--font-en);font-size:var(--fs-note);font-weight:600;color:var(--primary)} .ind-card .dl-foot .dlbtn{flex-shrink:0;white-space:nowrap} /* ---------- company page ---------- */ /* 会社概要 / 事業内容 / 沿革 / アクセス の 4 節。見出しは 1.2rem(19.2px) を インラインで 4 回書いていた。.prose h2 と同じ役割なので --fs-h3 に揃える */ .co-sec{margin-bottom:clamp(2.6rem,4.5vw,4rem)} .co-sec:last-of-type{margin-bottom:0} .co-sec h2{font-size:var(--fs-h3);font-weight:700;margin-bottom:1.2rem} .co-sec.hist h2{margin-bottom:1.4rem} .info-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)} .info-table th,.info-table td{text-align:left;padding:1rem 1.1rem;border-bottom:1px solid var(--line-soft);vertical-align:top} .info-table th{width:30%;color:var(--ink-soft);font-weight:600;white-space:nowrap} .timeline{list-style:none;margin-top:.5rem;border-left:2px solid var(--line);padding-left:1.6rem} .timeline li{position:relative;padding:0 0 1.5rem} .timeline li::before{content:"";position:absolute;left:-1.72rem;top:.45em;width:9px;height:9px;border-radius:50%; background:#fff;border:2px solid var(--primary)} .timeline .yr{font-family:var(--font-en);font-weight:700;color:var(--primary);font-size:var(--fs-body)} .timeline .ev{display:block;margin-top:.2rem;color:var(--ink-soft);font-size:var(--fs-body)} .biz-list{list-style:none;display:grid;gap:.7rem} .biz-list li{padding-left:1.5rem;position:relative;color:var(--ink-soft)} .biz-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--primary)} /* 16/9 だと 1240px 幅で 640px を超え、ページ最下部が地図だけで 1 画面埋まる。 住所と道順を確かめるだけの用途なので高さで抑える。 */ .map-embed{width:100%;height:clamp(260px,26vw,360px);border:1px solid var(--line);margin-top:1.2rem} .map-embed iframe{width:100%;height:100%;border:0;display:block} /* ---------- contact page ---------- */ /* 「電話・FAX・メール」「フォームから問い合わせる」の 2 見出しと、その下の注記。 1.1rem(17.6px) / .9rem(14.4px) / .84rem(13.4px) と段の外の値を直書きしていた */ /* 子セレクタ。送信完了パネルの .lc-title (同じ --fs-h3) に margin を足さないため */ .contact-col > h2{font-size:var(--fs-h3);font-weight:700;margin-bottom:1.2rem} .contact-hours{font-size:var(--fs-body);color:var(--ink-faint);margin-top:1rem} .contact-tip{margin-top:1.6rem;padding:1.1rem 1.2rem;background:var(--bg-alt);border-left:3px solid var(--primary)} .contact-tip p{font-size:var(--fs-body);color:var(--ink-soft)} /* ---------- prose (legal / privacy / 特商法) ---------- */ .prose{max-width:760px;padding:1rem 0 5rem;color:var(--ink-soft);font-size:var(--fs-body);line-height:1.9} .prose h2{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:2.4rem 0 .9rem} .prose h2:first-child{margin-top:.5rem} .prose h3{font-size:var(--fs-lead);font-weight:600;color:var(--ink);margin:1.6rem 0 .6rem} .prose p{margin:.6rem 0} .prose ul,.prose ol{margin:.6rem 0 .6rem 1.4rem} .prose li{margin:.35rem 0} .prose a{color:var(--primary)} .prose a:hover{text-decoration:underline} .prose .updated{font-size:var(--fs-note);color:var(--ink-faint);margin-bottom:1.5rem} .prose table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:var(--fs-body)} .prose th,.prose td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top} .prose th{background:var(--bg-alt);font-weight:600;color:var(--ink);width:30%} /* sitemap */ .sitemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2rem;padding-bottom:4rem} .sitemap h2{font-size:var(--fs-lead);font-weight:700;margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)} .sitemap ul{list-style:none;display:flex;flex-direction:column;gap:.5rem} .sitemap a{font-size:var(--fs-body);color:var(--ink-soft)} .sitemap a:hover{color:var(--primary)} /* ---------- catalog list page ---------- */ /* ブランド見出しは 2rem (32px)。カード名 (.dlcard h3 = 14.7px) との比が 1.2 倍しか無く「どのブランドか」と「どの資料か」が同じ重さだったため、 2.17 倍に開いて階層を作る (2026-09-06)。 ・ロゴは 20px → 26px。32px の見出しの隣で豆粒にならない高さ ・1 行 flex のままだと 375px で「VOLTA 業種別シート」が入らないので flex-wrap:wrap + 子に flex-basis。説明文は入らなければ自分の行に落ちる (日本語が 1 文字ずつ折り返されるのを防ぐ) ・見出しが大きくなった分、セクション間と見出し下の余白も広げる */ .cat-section{margin-bottom:clamp(3.2rem,5vw,4.6rem)} .cat-section-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem .85rem; padding-bottom:1rem;margin-bottom:1.7rem;border-bottom:1px solid var(--line)} .cat-section-head img{height:26px;width:auto;object-fit:contain;flex:none;align-self:center} .cat-section-head h2{min-width:0;font-size:var(--fs-h1);font-weight:600;line-height:1.25;letter-spacing:-.01em} .cat-section-head .mdesc{flex:1 1 12rem;min-width:0;font-size:var(--fs-body);color:var(--ink-soft)} /* カタログカードは「上に表紙・下に文字」の縦積み (2026-09-06)。 PDF アイコンの箱をやめ、1 ページ目から起こした表紙画像を主役にする。 表紙は全 29 冊とも A4 縦 (実測比 0.708〜0.713) に揃っているので、 1:1.414 の枠に object-fit:cover で入れても切り取りはほぼ起きない。 fatosa の 7 冊は表紙が白基調なので、カードの枠線と表紙下の 1px を必ず残す (これが無いと白い紙が白い地に溶けて輪郭が消える)。 */ .dlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.5rem 1rem} /* min-width:0 が要る。body の word-break:auto-phrase は「完全密閉型ステンレス ベアリングユニット」のような語を 1 かたまり (min-content 191px) として扱うため、 既定の min-width:auto のままだと grid のトラックがその幅まで広がり、 375px で列が 335px の器からはみ出して横スクロールが出る。 */ .dlcard{--dl-pad:.9rem;min-width:0;border:1px solid var(--line);background:var(--bg); display:flex;flex-direction:column} .dlcard .dl-top{display:block} .dlcard .dl-cover-wrap{position:relative;aspect-ratio:1 / 1.414;overflow:hidden; background:var(--bg-alt);border-bottom:1px solid var(--line)} .dlcard .dl-cover{width:100%;height:100%;object-fit:cover;object-position:top; transition:filter .2s var(--ease)} /* PDF 未配置 (file が空) の冊。表紙も無いので枠だけ出す */ .dlcard .dl-cover-none{position:absolute;inset:0;display:grid;place-items:center; font-family:var(--font-en);font-size:var(--fs-note);font-weight:700;letter-spacing:.06em;color:var(--ink-faint)} /* チェック + 資料名の 1 行。h3 に min-width:0 が要る (body の word-break:auto-phrase が 長い品名を 1 かたまり扱いするため、既定の min-width:auto だとチェックの分だけ カードからはみ出す)。チェックは flex:none で潰さない。 */ .dlcard .dl-titlerow{display:flex;align-items:flex-start;gap:.45rem;padding:.8rem var(--dl-pad) 0} .dlcard h3{min-width:0;flex:1 1 auto;font-size:var(--fs-body);font-weight:600;line-height:1.55} .dlcard .dl-desc{font-size:var(--fs-note);color:var(--ink-soft);margin-top:.35rem;padding:0 var(--dl-pad);flex:1} .dlcard .dl-foot{margin-top:.9rem;padding:0 var(--dl-pad) var(--dl-pad); display:flex;align-items:center;justify-content:space-between;gap:.6rem} .dlcard .dl-tag{font-size:var(--fs-note);padding:.18rem .55rem;background:var(--bg-alt);color:var(--ink-soft)} .dlbtn{font-family:inherit;font-weight:600;font-size:var(--fs-body);padding:.55rem 1.1rem;border:1.5px solid var(--primary); background:var(--primary);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:background .2s var(--ease)} .dlbtn:hover{background:var(--primary-dark)} .dlbtn.ghost{background:#fff;color:var(--primary)} .dlbtn.ghost:hover{background:var(--primary-light)} /* ---------- lead-capture forms + modal ---------- */ .lc-form{max-width:640px} .lc-field{margin-bottom:1.1rem} .lc-field label{display:block;font-size:var(--fs-body);font-weight:600;color:var(--ink);margin-bottom:.4rem} .lc-req{font-size:var(--fs-note);font-weight:700;color:#b4321f;margin-left:.3rem;vertical-align:middle} .lc-field input,.lc-field select,.lc-field textarea, .lc-modal input,.lc-modal select,.lc-modal textarea{ width:100%;border:1px solid var(--line);border-radius:0;padding:.7rem .9rem;font-family:var(--font-body); /* 入力欄だけは本文(14)ではなく 16。自分が打った文字が読めることを優先する (iOS の自動ズームも 16 以上なら起きない) */ font-size:var(--fs-lead);color:var(--ink);background:#fff;transition:border-color .18s var(--ease)} .lc-field input:focus,.lc-field select:focus,.lc-field textarea:focus, .lc-modal input:focus,.lc-modal select:focus,.lc-modal textarea:focus{ outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)} .lc-field textarea{resize:vertical;min-height:120px} .lc-field.has-err input,.lc-field.has-err select,.lc-field.has-err textarea{border-color:#c0392b} .lc-err{display:block;font-size:var(--fs-note);color:#c0392b;margin-top:.3rem;min-height:1em} .lc-formerr{color:#c0392b;font-size:var(--fs-body);margin-bottom:.6rem} .lc-formerr:empty{margin:0} .lc-consent{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-body);color:var(--ink-soft); font-weight:400;margin:.4rem 0 1.2rem;cursor:pointer} .lc-consent input{width:17px;height:17px;margin-top:.18rem;accent-color:var(--primary);flex:none} .lc-consent a{color:var(--primary)} .lc-consent a:hover{text-decoration:underline} .lc-consent.has-err span{color:#c0392b} .lc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .lc-actions{margin-top:.4rem} /* modal */ .lc-overlay{position:fixed;inset:0;z-index:10000;background:rgba(21,36,43,.5); display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem 2rem;overflow-y:auto; opacity:0;transition:opacity .2s var(--ease)} .lc-overlay.in{opacity:1} .lc-modal{position:relative;background:#fff;width:100%;max-width:520px;border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(21,36,43,.5);transform:translateY(10px);transition:transform .25s var(--ease)} .lc-overlay.in .lc-modal{transform:none} .lc-close{position:absolute;top:.5rem;right:.6rem;background:none;border:none;font-size:var(--fs-h2);line-height:1; color:var(--ink-faint);cursor:pointer;padding:.2rem .5rem;z-index:1} .lc-close:hover{color:var(--ink)} .lc-body,.lc-done{padding:2rem clamp(1.4rem,4vw,2.2rem) 1.8rem} .lc-eyebrow{font-size:var(--fs-note);font-weight:600;color:var(--primary);letter-spacing:.04em;margin-bottom:.5rem} .lc-title{font-size:var(--fs-h3);font-weight:700;line-height:1.45} .lc-lead{font-size:var(--fs-body);color:var(--ink-soft);margin:.7rem 0 1.4rem} .lc-note{font-size:var(--fs-note);color:var(--ink-faint);margin-top:1rem;line-height:1.7} .lc-note a{color:var(--primary)} .lc-done{text-align:center} .lc-done-mark{font-family:var(--font-en);font-weight:700;color:var(--primary);font-size:var(--fs-lead); border:1.5px solid var(--primary);display:inline-block;padding:.2rem .9rem;margin-bottom:1rem} .lc-done .lc-actions{display:flex;justify-content:center} .btn.is-disabled,.dlbtn.is-disabled{opacity:.5;pointer-events:none} /* ---------- 選定表 (品番/仕様) ---------- */ .vtable-wrap{overflow-x:auto;border:1px solid var(--line);-webkit-overflow-scrolling:touch} .vtable{width:100%;border-collapse:collapse;font-size:var(--fs-body);min-width:560px} .vtable th,.vtable td{padding:.6rem .85rem;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap} .vtable thead th{background:var(--bg-alt);font-weight:700;color:var(--ink-soft);font-size:var(--fs-note);letter-spacing:.02em} .vtable tbody tr:last-child td{border-bottom:none} .vtable tbody tr:hover{background:var(--bg-alt)} .vtable td b{font-family:var(--font-en);color:var(--primary);font-weight:700} .vtable td:first-child{white-space:normal} /* =========================================================== メリハリ用コンポーネント (無印型: 帯の塗り分け + 写真の大小) =========================================================== */ /* セクションの背景トーン */ .band-grey{background:var(--bg-alt);border-block:1px solid var(--line)} .band-deep{background:#e8eef2;border-block:1px solid var(--line)} /* ページ末尾の相談 CTA。company / products-volta / volta-materials の 3 ページに 同じインライン style が丸ごと重複していたのをクラス化した (2026-09-07)。 ・見出しは clamp(1.2rem,…,1.55rem) = 19.2〜24.8px という段の外の値だったので --fs-h2 に寄せる ・帯なので縦余白はトップの各帯と同じ --sec-pt / --sec-pb (上64 / 下96) に揃える。 以前は clamp(2.2rem,4vw,3.2rem) の上下対称で、ここだけリズムから外れていた */ .cta-band .wrap{padding-top:var(--sec-pt);padding-bottom:var(--sec-pb)} .cta-band h2{font-size:var(--fs-h2);font-weight:700} .cta-band p{color:var(--ink-soft);margin-top:.8rem;max-width:44em} .cta-band .cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem} /* 特集ブロック(写真4割 + テキスト6割)。 トップの主役はヒーロー(正方形3枚見せ)なので、特集はその半分程度の高さに抑える。 高さはテキスト側の中身だけで決まり(min-height を置かない)、写真はその高さに 合わせて切り抜かれる。写真列を 2fr にして、面積そのものもヒーローより小さくする。 */ .feature{display:grid;grid-template-columns:2fr 3fr;align-items:stretch} .feature.rev{grid-template-columns:3fr 2fr} /* 写真を右に出す時は列も入れ替える(写真が広い方に入らないように) */ .feature.rev .fe-media{order:2} /* min-height は「テキストが極端に短い時に写真が潰れない」下限。上限ではない */ .feature .fe-media{position:relative;overflow:hidden;background:var(--bg-alt); min-height:clamp(190px,17vw,250px)} /* 写真は絶対配置。ここを通常フローに置くと height:100% が解決できず画像の 実寸(4:3)がそのまま行の高さになり、特集がヒーロー並みに伸びる */ .feature .fe-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .feature .fe-media.empty{display:grid;place-items:center} .feature .fe-media.empty span{font-family:var(--font-en);font-size:var(--fs-note);letter-spacing:.08em;color:var(--ink-faint)} /* 縦は他の帯と同じ 上64 / 下96 (2026-09-07)。 ここだけ 32px しか無かったため、前後のセクションとの境目が 128px / 75px に 縮み、「ポジティブドライブから下が詰まって見える」の直接の原因になっていた。 中央寄せのまま上下を非対称にしているので、文字は帯の中心より 16px 上に来る。 写真が隣で全高いっぱいに入るぶん、この程度のずれは見えない。 */ .feature .fe-text{display:flex;flex-direction:column;justify-content:center; padding:var(--sec-pt) clamp(1.4rem,3.4vw,3rem) var(--sec-pb)} .feature .fe-eyebrow{font-size:var(--fs-note);font-weight:700;letter-spacing:.02em; color:var(--primary);margin-bottom:.55rem} /* 特集も「製品から探す」「やっていること」と同じ格のセクションなので 見出しは同じ --fs-h1 (32px)。2026-09-07 までは 25.6px で、同格の 見出しが 4 サイズ (36.8 / 28.8 / 25.6 / 16.8) に割れていた。 ヒーローの文字ボックスは逆に 16px へ下げて、見出しと重ならないようにした */ .feature .fe-text h2{font-size:var(--fs-h1);font-weight:700;line-height:1.4;letter-spacing:-.01em} /* 1行あたり約41字。狭めると本文が3行になり、その1行分がそのまま行の高さに乗る */ .feature .fe-text p{margin-top:.7rem;color:var(--ink-soft);max-width:41em;font-size:var(--fs-body)} .feature .fe-text .actions{margin-top:1.2rem;display:flex;gap:.7rem;flex-wrap:wrap} @media(max-width:760px){ /* .feature.rev の方が詳細度が高いので、縦積みでは .rev も明示的に戻す (書かないと狭幅でも2列のままになり、横スクロールが出る) */ .feature,.feature.rev{grid-template-columns:1fr} .feature.rev .fe-media{order:0} /* 縦積みでは写真が画面の半分を占めないように 16/10 で抑える (3/2 = 1.5 より 16/10 = 1.6 の方が低い)。 max-height はタブレット幅(横 544px 以上)で効く上限。 これが無いと 760px 幅で写真だけ 474px になる */ .feature .fe-media{aspect-ratio:16/10;min-height:0;max-height:340px} } /* 全幅イメージ帯(写真を一番大きく見せるモーメント) */ .imgband{position:relative;display:grid;place-items:center;overflow:hidden; min-height:clamp(280px,34vw,440px);text-align:center} .imgband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .imgband::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(21,36,43,.32),rgba(21,36,43,.52))} /* 縦は他の帯と同じ 上64 / 下96 (2026-09-07)。写真の上なので上下のずれは見えない */ .imgband .ib-inner{position:relative;z-index:1;color:#fff;max-width:40em; padding:var(--sec-pt) 1.5rem var(--sec-pb)} .imgband .ib-inner h2{font-size:var(--fs-h1);font-weight:700;line-height:1.4;letter-spacing:-.01em} .imgband .ib-inner p{margin-top:1rem;font-size:var(--fs-lead);color:rgba(255,255,255,.9);max-width:34em;margin-inline:auto} .imgband .ib-inner .chips{justify-content:center} .imgband .ib-inner .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff} .imgband .ib-inner .chip:hover{background:rgba(255,255,255,.22);border-color:#fff;color:#fff} .imgband .ib-inner .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff} .imgband .ib-inner .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff} /* ---------- VOLTA 素材ガイド (volta-materials.html) ---------- */ /* 品名分解の図解 */ .nomen{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch;margin-top:1.6rem} .nomen .np{flex:1 1 150px;border:1px solid var(--line);background:#fff;padding:.9rem 1rem 1rem} .nomen .np .code{font-family:var(--font-en);font-size:var(--fs-h3);font-weight:700;color:var(--primary);letter-spacing:.02em} .nomen .np .nl{font-size:var(--fs-note);font-weight:700;color:var(--ink);margin-top:.35rem} .nomen .np .nd{font-size:var(--fs-note);color:var(--ink-soft);margin-top:.3rem;line-height:1.6} /* 溶着ファミリー 3 枚 */ .fam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:1.4rem} @media(max-width:720px){.fam-grid{grid-template-columns:1fr}} .fam-card{border:1px solid var(--line);background:#fff;padding:1.1rem 1.2rem 1.2rem} .fam-card .fk{font-family:var(--font-en);font-size:var(--fs-note);font-weight:700;color:var(--primary);letter-spacing:.06em} .fam-card h3{font-size:var(--fs-lead);font-weight:700;margin-top:.25rem} .fam-card .fr{font-size:var(--fs-note);color:var(--ink-faint);margin-top:.15rem} .fam-card p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:.55rem;line-height:1.7} .fam-card > h3:first-child{margin-top:0} /* コーティングカードは見出しが先頭 */ /* コーティング素材カードのコード一覧。.76rem の注記を JS 側に直書きしていた */ .fam-card .co-codes{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.8rem} .fam-card .co-note{font-size:var(--fs-note);color:var(--ink-faint)} /* 素材早見表 */ /* 表は最低 860px あるので、狭い画面では横スクロールになる。macOS / iOS は スクロールバーが重ね表示で消えるため、右にまだ列が続いていることが分からない。 地色 2 枚 (背景と一緒に動く local) と影 2 枚 (器に固定される scroll) を重ね、 端まで送ると影が地色に隠れる = 送れる側にだけ影が出る。JS 不要。 */ /* 影の色は --ink(#15242b) を 16% に薄めた物。生の色を書かずに済むよう color-mix で書き、未対応ブラウザ用に同じ値の rgba() を先に置いてある (未対応だと color-mix の宣言ごと捨てられ、前の宣言が残る)。 */ .mat-tablewrap{overflow-x:auto;margin-top:1.2rem;border:1px solid var(--line); background-image: linear-gradient(to right,var(--bg) 30%,transparent), linear-gradient(to left,var(--bg) 30%,transparent), linear-gradient(to right,rgba(21,36,43,.16),rgba(21,36,43,0)), linear-gradient(to left,rgba(21,36,43,.16),rgba(21,36,43,0)); background-image: linear-gradient(to right,var(--bg) 30%,transparent), linear-gradient(to left,var(--bg) 30%,transparent), linear-gradient(to right,color-mix(in srgb,var(--ink) 16%,transparent),color-mix(in srgb,var(--ink) 0%,transparent)), linear-gradient(to left,color-mix(in srgb,var(--ink) 16%,transparent),color-mix(in srgb,var(--ink) 0%,transparent)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:34px 100%,34px 100%,12px 100%,12px 100%; background-attachment:local,local,scroll,scroll} /* 影だけでは弱いので、実際にはみ出している表にだけ文字でも出す (出す/出さないの判定は volta-materials.html 側。既定は hidden) */ .scroll-hint{font-size:var(--fs-note);color:var(--ink-faint);margin-top:.9rem} .scroll-hint:not([hidden]) + .mat-tablewrap{margin-top:.5rem} /* 早見表のグループ見出しと注記。JS 側で 1.05rem / .84rem を直書きしていた。 節見出し(.pd-section h2 = --fs-h3)の 1 段下なので --fs-lead を当てる */ .mat-group-h{font-size:var(--fs-lead);font-weight:700;margin:1.8rem 0 .2rem} .mat-group-note{font-size:var(--fs-body);color:var(--ink-faint);margin:.3rem 0 0} .mat-table{width:100%;border-collapse:collapse;font-size:var(--fs-body);min-width:860px} .mat-table th,.mat-table td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top} .mat-table thead th{background:var(--bg-alt);color:var(--ink-soft);font-weight:600;font-size:var(--fs-note);letter-spacing:.04em;white-space:nowrap} .mat-table tbody tr:last-child td{border-bottom:none} .mat-table tbody tr:hover{background:var(--bg-alt)} .mat-table .mname{font-weight:700;color:var(--ink);white-space:nowrap} .mat-table .mfam{font-family:var(--font-en);font-size:var(--fs-note);color:var(--ink-faint);display:block;margin-top:.15rem} .mat-table .msum{color:var(--ink-soft);line-height:1.7;min-width:16em} .mat-table .muse{color:var(--ink-faint);font-size:var(--fs-note);margin-top:.35rem} .mat-table .mstock{color:var(--primary);font-size:var(--fs-note);font-weight:600;margin-top:.3rem} .mat-table td.nw{white-space:nowrap} .rec-badge{display:inline-block;font-size:var(--fs-note);font-weight:700;color:#fff;background:var(--primary); padding:.14rem .5rem;margin-left:.5rem;vertical-align:middle;letter-spacing:.04em} .derived-mark{font-size:var(--fs-note);color:var(--ink-faint);margin-left:.4rem} /* 色チップ */ .chips-mat{display:flex;flex-direction:column;gap:.3rem} .chip-mat{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-note);color:var(--ink-soft);white-space:nowrap} .chip-mat .sw{width:14px;height:14px;flex:none;border:1px solid rgba(21,36,43,.14)} .chip-mat b{font-family:var(--font-en);font-weight:700;color:var(--ink);font-size:var(--fs-note)} .mat-link{font-size:var(--fs-note);font-weight:600;color:var(--primary);white-space:nowrap;display:inline-flex;gap:.3rem;align-items:center} .mat-link .arr{font-family:var(--font-en);transition:transform .22s var(--ease)} .mat-link:hover .arr{transform:translateX(3px)} /* 用途からの逆引き */ .uc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.85rem;margin-top:1.4rem} .uc-card{border:1px solid var(--line);background:#fff;padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column; text-align:left;font-family:inherit;transition:border-color .2s var(--ease)} .uc-card:hover{border-color:var(--primary)} .uc-card .uch{font-size:var(--fs-body);font-weight:700;color:var(--ink)} .uc-card .uchint{font-size:var(--fs-note);color:var(--ink-faint);margin-top:.2rem} .uc-card .ucm{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem} .uc-card .ucm a{font-size:var(--fs-note);font-weight:600;color:var(--primary);background:var(--primary-light);padding:.22rem .55rem} .uc-card .ucm a:hover{background:var(--primary);color:#fff} /* 選定チェックポイント */ .cp-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin-top:1.4rem;counter-reset:cp} @media(max-width:720px){.cp-list{grid-template-columns:1fr}} .cp-list li{list-style:none;counter-increment:cp;padding-left:2.3rem;position:relative} .cp-list li::before{content:counter(cp);position:absolute;left:0;top:.05em;width:1.6rem;height:1.6rem; display:grid;place-items:center;background:var(--bg-alt);color:var(--primary); font-family:var(--font-en);font-weight:700;font-size:var(--fs-note);border:1px solid var(--line)} .cp-list .cpt{font-size:var(--fs-body);font-weight:700;color:var(--ink)} .cp-list .cpd{font-size:var(--fs-body);color:var(--ink-soft);margin-top:.25rem;line-height:1.7} /* ファインダー側: 素材フィルタ通知バー */ .mat-notice{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--primary-light); border:1px solid var(--primary);padding:.75rem 1rem;margin-bottom:1.2rem;font-size:var(--fs-body);color:var(--ink)} .mat-notice b{color:var(--primary)} .mat-notice .mn-clear{margin-left:auto;font-size:var(--fs-note);font-weight:600;color:var(--primary);cursor:pointer;background:none;border:none;font-family:inherit} .mat-notice .mn-clear:hover{text-decoration:underline} /* =========================================================== 狭幅の取りこぼし修正 (2026-07 全ページ実測監査) =========================================================== */ /* 会社概要 / 特商法の2カラム表は、狭い幅では縦積みにする。 th の white-space:nowrap と td の文節かたまりで min-content が 356px に張り付き、320〜375px ではみ出していた。 */ @media(max-width:560px){ .info-table,.info-table tbody,.info-table tr, .info-table th,.info-table td{display:block;width:auto} .info-table th{white-space:normal;padding:.7rem 1rem .2rem;border-bottom:none} .info-table td{padding:0 1rem .9rem} .prose table,.prose tbody,.prose tr, .prose th,.prose td{display:block;width:auto} .prose th{width:auto;border-bottom:none} .prose td{border-top:none} } /* 表の外に出る色チップだけ折返しを許可 (表内は overflow-x:auto に守られている) */ .fam-card .chip-mat{white-space:normal} /* iOS は 16px 未満の入力欄でフォーカス時に自動ズームする。 モバイルだけ 16px に上げてズームを止める (PC の見た目は変えない)。 */ @media(max-width:860px){ input[type="text"],input[type="email"],input[type="tel"],input[type="search"], input[type="number"],input[type="url"],select,textarea, .filters .fsearch,.fsearch{font-size:16px} } /* 問い合わせページの2カラム。index.html の inline style にしか 定義が無く contact.html では効かずに右半分が空白になっていた。 */ .ind-flex{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,3vw,3rem);align-items:start} @media(max-width:860px){.ind-flex{grid-template-columns:1fr}} /* 左の連絡先ブロックは右のフォームの半分以下の高さしかなく、1440 では 左半分が 600px 以上白いままスクロールしていた。フォームを書いている間も 電話番号が見えるように、横並びの時だけ左を追従させる。 */ @media(min-width:861px){ .ind-flex > div:first-child{position:sticky;top:100px} } /* アンカー着地時に sticky ヘッダへ潜り込まないようにする */ html{scroll-padding-top:104px} @media(max-width:860px){html{scroll-padding-top:68px}} /* ---------- カタログの言語バッジ (2026-09) ---------- dl-foot は justify-content:space-between の 1 行 flex。バッジが 2 個になると 375px 幅でボタンのラベル (資料請求してダウンロード) が 1 文字ずつ縦に折り返される。 バッジ側を潰れない塊にして、入らなくなったらボタンを次の行へ落とす。 */ .dlcard .dl-foot{flex-wrap:wrap} .dlcard .dl-tags{display:flex;align-items:center;gap:.5rem;flex-shrink:0} .dlcard .dl-tag{flex-shrink:0;white-space:nowrap} .dlcard .dl-foot .dlbtn{white-space:nowrap} .dlcard .dl-tag.lang-en{background:var(--bg);border:1px solid var(--line);color:var(--ink-soft)} /* .dl-fmt (「PDF」の文字) は 2026-09-06 に廃止。表紙が出ているので拡張子は自明で、 29 冊すべてに同じ文字が並ぶだけだった。画像が読めない環境向けに、形式は 表紙 img の alt (「〜の表紙 (PDF)」) に残してある。 */ /* 「英語版」だけになった行。タグが無い冊もあるので、空の .dl-tags は畳んで 高さを取らせない (600px 以下でボタンが 1 行落ちるため、空行が見える) */ .dlcard .dl-tags:empty{display:none} /* 英語版の資料であることをフォーム送信 *前* に知らせる注記 (lead-capture.js が出す) */ .lc-langnote{font-size:var(--fs-note);line-height:1.7;color:var(--ink-soft); border-left:3px solid var(--line);padding:.5rem .8rem;margin:.6rem 0 1rem} /* お問い合わせフォームの返信目安 (送信ボタンの直前) */ .lc-replynote{font-size:var(--fs-note);color:var(--ink-soft);margin-bottom:.8rem} /* =========================================================== カタログDL の作り直し (2026-09-06) ・全冊が要登録になったので「オープン / 要登録」バッジは廃止 ・カードを選んで複数冊をまとめて請求できる (画面下の固定バー) ・2 回目以降は入力欄の代わりに確認 1 画面を出す =========================================================== */ /* ---------- カタログ一覧: カードの選択 ---------- */ .cat-hint{font-size:var(--fs-body);color:var(--ink-soft);margin-top:.5rem} /* 表紙と資料名のどこをクリックしても選べる。ボタン行 (.dl-foot) はクリック対象外。 */ .dlcard .dl-top{cursor:pointer} /* チェックは表紙の *外*、資料名の行頭に置く。 2026-09-06 まで表紙の左上に重ねていたが、VOLTA (18 冊) は左上に「Volta」の ロゴ、dertec (4 冊) も左上に「dertec」があり、計 22 冊でブランド名の頭文字が 欠けていた ("olta" / "rtec")。375px は表紙が 160px しか無いので更に削れる。 表紙の四隅はどこも同じ確率で絵が入っているため、別の角へ逃がしても直らない。 受け皿を