/* =========================================================
* Ozawa Original - Overrides
* 各テンプレートのインラインCSSより後に読み込まれることで、
* ページ横断の改修を一括反映する。
* - wp_footer フックで を出力（functions.php）
* - 単純な要素セレクタには!importantが必要なケースのみ付与
* ========================================================= */
/* ---------------------------------------------------------
* 0. カラー: oklch() フォールバック
* Safari旧版・古い環境向けにHEXを優先指定し、対応環境では oklch を再宣言
* --------------------------------------------------------- */
:root {
/* HEX fallback (Safari < 15.4 等向け) */
--blue: #2f4ca8;
--blue-light: #6b87d9;
--red: #d6502e;
}
@supports (color: oklch(0% 0 0)) {
:root {
--blue: oklch(0.36 0.16 256);
--blue-light: oklch(0.52 0.18 256);
--red: oklch(0.55 0.22 28);
}
}
/* ---------------------------------------------------------
* 0.1 ヘッダー: 高さ圧縮 + スティッキー追尾を確実に
* --------------------------------------------------------- */
.nav {
height: 64px !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
background: var(--bg);
border-bottom: 1px solid var(--ink);
box-shadow: 0 1px 0 rgba(0,0,0,0);
transition: box-shadow .2s, height .2s;
}
/* スクロール時にヘッダーが浮いて見えるよう微影 */
@supports (animation-timeline: scroll()) {
.nav { animation: navshadow linear; animation-timeline: scroll(root); animation-range: 0 100px; }
@keyframes navshadow { to { box-shadow: 0 2px 12px rgba(0,0,0,.08); } }
}
/* WP管理バー (32px / モバイル 46px) 表示時はその下に固定 */
.admin-bar .nav { top: 32px !important; }
@media screen and (max-width: 782px){
.admin-bar .nav { top: 46px !important; }
}
/* スティッキーnavに隠れないよう、ページ内アンカー時の余白を確保 */
html { scroll-padding-top: 80px; }
.admin-bar html { scroll-padding-top: 112px; }
/* パンくず: ヘッダー直下、視覚的に少し下げる */
.wd-bc, .nd-bc {
padding-top: 40px !important;
padding-bottom: 16px !important;
scroll-margin-top: 80px;
background: var(--bg);
}
.wd-bc .breadcrumb, .nd-bc .breadcrumb,
.wd-bc .biz-wrap .breadcrumb, .nd-bc .biz-wrap .breadcrumb {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ナビ内要素を64pxに合わせる */
.nav .logo img { height: 36px !important; }
@media (max-width: 720px){ .nav .logo img { height: 28px !important; } }
.nav .links a { padding: 6px 0 !important; }
.nav .right .tel { line-height: 1.1; }
.nav .right .tel b { font-size: 18px !important; }
.nav .right .tel small { font-size: 9.5px !important; }
/* ---------------------------------------------------------
* 0.5 ロゴ視認性: 白ロゴをCSSフィルタで反転表示
* 使用画像 ozawa_logo2_w.png は本来「ダーク背景用の白ロゴ」だが
* ナビ背景が cream (var(--bg)) のため見えない。
* ナビは反転(白→黒)、フッターは元の白のまま表示。
* --------------------------------------------------------- */
.nav .logo img {
filter: invert(1) brightness(0.05) saturate(0) contrast(1.4);
-webkit-filter: invert(1) brightness(0.05) saturate(0) contrast(1.4);
}
/* フッターは黒背景なので元の白ロゴをそのまま使う */
.foot .brand .logomark img,
.foot .logomark img {
filter: none;
-webkit-filter: none;
}
/* モバイル overlay menu のロゴも黒背景なので元のまま */
.nav .overlay-head .overlay-logo {
filter: none;
-webkit-filter: none;
}
/* ---------------------------------------------------------
* 1. ナビゲーション: お問い合わせを青ボタンに
*
* 元デザインでは、以下2箇所にお問い合わせ要素があり、
* 表示切替（display:none）でレスポンシブを実現していた:
* - デスクトップ (≥1101px) : .nav .links > a (お問い合わせはメニュー最後の )
* ↑ 元CSSは a[href="#"]:last-of-type を使っていたが、href実URL置換で不発化
* - タブレット・モバイル (≤1100px) : .nav .right > .cta (右上CTAボタン)
*
* このため両方を青ボタン化する。
* --------------------------------------------------------- */
/* --- デスクトップ: メニュー末尾の お問い合わせ リンクを青ボタン化 --- */
@media (min-width: 1101px){
.nav .links > a:last-of-type {
background: var(--blue) !important;
color: #fff !important;
border: 1.5px solid var(--blue) !important;
padding: 10px 22px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
border-radius: 0 !important;
margin-left: 8px;
transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.nav .links > a:last-of-type::after { display: none !important; }
.nav .links > a:last-of-type:hover {
background: var(--ink) !important;
border-color: var(--ink) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 4px 0 var(--blue);
}
}
/* --- タブレット・モバイル: 右上の .nav .cta ボタンを青ボタン化 --- */
.nav .cta,
.nav a.cta {
background: var(--blue) !important;
color: #fff !important;
border: 1.5px solid var(--blue) !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
border-radius: 0 !important;
transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.nav .cta i,
.nav a.cta i {
color: #fff !important;
font-weight: 700;
font-style: normal;
transition: transform .2s;
}
.nav .cta:hover,
.nav a.cta:hover {
background: var(--ink) !important;
border-color: var(--ink) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 4px 0 var(--blue);
}
.nav .cta:hover i,
.nav a.cta:hover i { transform: translateX(4px); }
/* ---------------------------------------------------------
* 2. フッター手前 共通CTAセクション: ライト背景化 + 上下に強い視覚的区切り
* - 背景は ベージュ系（--bg3）でページ本体（--bg）より少し濃く存在感を出す
* - フッター(ink)との差別化はライト vs ダーク
* - 上に太いインクライン、下に細いラインで境界を強調
* --------------------------------------------------------- */
.cta {
background: #ede9dd !important; /* ページ本体より一段濃いベージュ */
color: var(--ink) !important;
border-top: 4px solid var(--ink) !important; /* 上に強い境界線 */
border-bottom: 1px solid var(--line-soft) !important;
padding: 120px 32px !important;
position: relative;
}
.cta::before {
display: block !important;
content: "" !important;
position: absolute !important;
inset: 0 !important;
background-image:
linear-gradient(rgba(12,13,15,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,13,15,.025) 1px, transparent 1px) !important;
background-size: 64px 64px !important;
pointer-events: none;
opacity: 1;
}
.cta::after { display: none !important; }
.cta .wrap { position: relative; z-index: 1; }
.cta .head-kicker { color: var(--gray); }
.cta .head-kicker .n { background: var(--ink); color: #fff; }
.cta .head-kicker .en { color: var(--gray); }
.cta .stamp { color: var(--blue) !important; font-weight: 600; }
.cta h2 { color: var(--ink) !important; }
.cta h2 em { color: var(--blue) !important; font-style: normal !important; font-weight: 700 !important; }
.cta .lede p { color: var(--ink2) !important; font-weight: 400; }
.cta .lede .telblock .l { color: var(--blue) !important; font-weight: 600; }
.cta .lede .telblock .n { color: var(--ink) !important; }
.cta .lede .telblock .h { color: var(--gray) !important; }
/* CTAボタン: primaryは青(目立つ)、secondaryはink */
.cta .actions .btn {
background: transparent !important;
color: var(--ink) !important;
border: 1.5px solid var(--ink) !important;
}
.cta .actions .btn.primary {
background: var(--blue) !important;
color: #fff !important;
border-color: var(--blue) !important;
}
.cta .actions .btn:hover {
background: var(--ink) !important;
color: #fff !important;
}
.cta .actions .btn.primary:hover {
background: var(--ink) !important;
border-color: var(--ink) !important;
}
/* モバイル: telblock 中央寄せ + ボタン全幅 */
@media (max-width: 720px){
.cta { padding: 80px 24px !important; }
.cta .lede { display: block !important; }
.cta .lede .telblock { text-align: center !important; margin-top: 32px !important; }
.cta .actions { flex-direction: column !important; align-items: stretch !important; }
.cta .actions .btn { justify-content: center !important; width: 100% !important; }
}
/* ---------------------------------------------------------
* 3. フッター: 区切り強化 (CTAライト化に伴う視覚的境界)
* --------------------------------------------------------- */
.foot-divider {
background: var(--paper);
border-top: 1px solid var(--line-soft);
}
/* ---------------------------------------------------------
* 4. テキスト折り返しの過剰防止
* インラインで max-width:720px 等が指定されているコンテナを緩和
* --------------------------------------------------------- */
.hero .lede-p,
.hero .lede p,
.page-lede,
.fac-intro,
.cta .lede p {
max-width: clamp(680px, 80vw, 920px) !important;
}
/* ヒーローのリード文だけは少しゆとり */
.hero .lede-p {
font-size: clamp(15px, 1.05vw, 18px) !important;
line-height: 1.8 !important;
}
/* ---------------------------------------------------------
* 5. ヒーロー画像上テキストのコントラスト強化
* オーバーレイ濃度を上げ、テキストシャドウを追加
* --------------------------------------------------------- */
.hero .feature .overlay,
.page-hero-img .overlay {
background: linear-gradient(180deg, rgba(12,13,15,0.35) 0%, rgba(12,13,15,0.65) 100%) !important;
}
.hero .feature .hero-inner h1,
.hero .feature .hero-inner .lede-p,
.hero .feature .hero-inner .issuetag {
text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.hero .feature .hero-inner h1 .out {
-webkit-text-stroke: 2px #fff;
}
/* ---------------------------------------------------------
* 6. 3列グリッドに最小幅指定 (auto-fit + minmax)
* cap-row(TOP), why-grid(TOP), num-cell(TOP), wa-grid(works一覧),
* works-layout, t-grid(TOP triptych) など
* --------------------------------------------------------- */
@media (min-width: 901px){
.cap-row,
.t-grid,
.indus-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}
/* ※ why-grid はカード5枚のため auto-fit を使わず専用レイアウト（ファイル末尾参照） */
.wa-grid {
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
grid-auto-rows: 1fr;
}
.works .layout {
grid-auto-rows: 1fr;
}
}
/* ---------------------------------------------------------
* 7. ボタンの可読性とアクセシビリティ向上
* --------------------------------------------------------- */
.btn:focus-visible,
.nav .cta:focus-visible {
outline: 3px solid var(--blue-light);
outline-offset: 3px;
}
.btn.primary {
/* 既存 ink背景 を維持しつつ、影で立体感 */
box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.btn.primary:hover {
box-shadow: 0 4px 0 var(--blue);
}
/* ---------------------------------------------------------
* 8. 共通: 横スクロール抑止
* ※ body に overflow-x:hidden を入れると position:sticky が機能しなく
* なるため、html だけ overflow-x:clip(またはvisible)を採用。
* overflow-x:clip は sticky を破壊しない。
* --------------------------------------------------------- */
html { overflow-x: clip; }
body { overflow-x: clip; overflow-y: visible; }
/* body の overflow-x:hidden が他の場所で再宣言される事態に備え強制解除 */
html, body { overflow-x: clip !important; }
img { max-width: 100%; height: auto; }
/* ---------------------------------------------------------
* 8.4 採用ページ「職人の一日」スケジュール時計UI
* 旧: 暗背景画像にテキスト羅列
* 新: 時計図 + 縦タイムライン
* --------------------------------------------------------- */
.rec-day {
background: var(--bg) !important;
padding: 96px 32px !important;
color: var(--ink) !important;
border-top: 1px solid var(--line-soft);
}
.rec-day .biz-wrap { max-width: 1200px !important; }
.rec-day .biz-h2 { color: var(--ink) !important; }
.rec-day .biz-h2 em { color: var(--blue) !important; }
.rec-day .rd-intro {
font-family: var(--jp);
font-size: 16px;
line-height: 1.9;
color: var(--ink2);
max-width: clamp(680px, 75vw, 960px);
margin-top: 16px;
}
.rd-schedule {
display: grid;
grid-template-columns: 320px 1fr;
gap: 64px;
margin-top: 56px;
align-items: start;
}
/* ─── 時計ビジュアル ─── */
.rd-clock {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.rd-clock-svg {
width: 280px;
height: 280px;
background: var(--paper);
border: 1px solid var(--line-soft);
padding: 14px;
border-radius: 50%;
}
.rd-clock-caption {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
align-items: center;
font-family: var(--mono);
}
.rd-clock-l {
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gray);
font-weight: 600;
}
.rd-clock-time {
font-family: var(--sans);
font-size: 24px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
}
.rd-clock-sep {
grid-column: 1 / -1;
font-size: 14px;
color: var(--gray);
margin: 4px 0;
text-align: center;
}
/* ─── 縦タイムライン ─── */
.rd-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
/* 縦ライン (時刻列の右端を縦に貫く) */
.rd-timeline::before {
content: "";
position: absolute;
left: 88px;
top: 12px;
bottom: 12px;
width: 2px;
background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 4%, var(--line-soft) 4%, var(--line-soft) 96%, var(--ink) 96%, var(--ink) 100%);
}
.rd-row {
position: relative;
display: grid;
grid-template-columns: 80px 24px 1fr;
align-items: start;
gap: 0 18px;
padding: 18px 0;
}
.rd-row:not(:last-child)::after {
content: "";
position: absolute;
left: 108px;
right: 0;
bottom: 0;
border-bottom: 1px dashed var(--line-soft);
}
.rd-t {
font-family: var(--sans);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
text-align: right;
line-height: 1.2;
padding-top: 2px;
font-feature-settings: 'tnum';
}
.rd-dot {
width: 14px;
height: 14px;
border: 2px solid var(--ink);
background: var(--bg);
border-radius: 50%;
margin: 5px auto 0;
position: relative;
z-index: 1;
}
.rd-dot-blue { background: var(--blue); border-color: var(--blue); }
.rd-dot-mute { background: var(--line-soft); border-color: var(--line-soft); }
.rd-dot-end { background: var(--ink); border-color: var(--ink); }
.rd-dot-end::after {
content: "";
position: absolute;
inset: -3px;
border: 2px solid var(--ink);
border-radius: 50%;
}
.rd-event h3 {
font-family: var(--jp);
font-size: 18px;
font-weight: 700;
color: var(--ink);
margin: 0 0 4px;
line-height: 1.4;
}
.rd-event p {
font-family: var(--jp);
font-size: 14px;
line-height: 1.85;
color: var(--ink2);
margin: 0;
max-width: 100% !important;
}
.rd-row-break .rd-event h3 { color: var(--gray); font-weight: 600; }
/* ─── レスポンシブ ─── */
@media (max-width: 1100px){
.rd-schedule {
grid-template-columns: 1fr;
gap: 48px;
}
.rd-clock {
position: static;
flex-direction: row;
justify-content: center;
gap: 32px;
}
.rd-clock-svg { width: 200px; height: 200px; }
.rd-clock-caption { grid-template-columns: 1fr; text-align: center; }
.rd-clock-sep { display: none; }
}
@media (max-width: 720px){
.rec-day { padding: 64px 20px !important; }
.rd-timeline::before { left: 64px; }
.rd-row { grid-template-columns: 56px 18px 1fr; gap: 0 12px; padding: 14px 0; }
.rd-row:not(:last-child)::after { left: 76px; }
.rd-t { font-size: 16px; padding-top: 1px; }
.rd-dot { width: 12px; height: 12px; }
.rd-event h3 { font-size: 16px; }
.rd-event p { font-size: 13px; }
.rd-clock { flex-direction: column; gap: 16px; }
.rd-clock-svg { width: 180px; height: 180px; }
}
/* ---------------------------------------------------------
* 8.45 社員紹介カード: 本人コメント表示
* staff_voice メタフィールドの値があるとき、引用ブロックとして表示
* シンプル版: 左に青ボーダーのみ、引用記号は無し
* --------------------------------------------------------- */
.tm-card .tm-voice {
display: block;
margin: 14px 0 0;
padding: 12px 14px;
background: transparent;
border-left: 3px solid var(--blue);
font-family: var(--jp);
font-size: 13px;
line-height: 1.8;
color: var(--ink2);
font-style: normal;
font-weight: 400;
/* 引用記号は出さない */
quotes: none;
}
.tm-card .tm-voice::before,
.tm-card .tm-voice::after { content: none !important; display: none !important; }
.tm-card.has-voice .tm-meta { padding-bottom: 20px; }
/* レスポンシブ: モバイルで余白圧縮 */
@media (max-width: 720px){
.tm-card .tm-voice {
margin-top: 10px;
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.75;
}
}
/* ---------------------------------------------------------
* 8.5 中間CTAリンクの統一ボタン化
* 対象: .sign a / .news-all / .t-cta / .biz-cta / .wde-card .biz-cta
* 現状はテキストリンクだが、視覚的導線として .btn と同等のアウトラインボタンに統一
* --------------------------------------------------------- */
.sign a,
a.news-all,
a.t-cta,
a.biz-cta,
.wde-card a.biz-cta {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
height: 48px !important;
padding: 0 24px !important;
font-family: var(--jp) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
color: var(--ink) !important;
background: transparent !important;
border: 1.5px solid var(--ink) !important;
border-radius: 0 !important;
cursor: pointer;
transition: background .2s, color .2s, transform .2s, box-shadow .2s;
text-decoration: none !important;
white-space: nowrap !important;
}
.sign a .ar,
a.news-all .ar,
a.t-cta .ar,
a.biz-cta .ar {
font-size: 15px !important;
font-family: var(--sans) !important;
font-weight: 700 !important;
color: var(--blue) !important;
transition: transform .2s, color .2s;
}
.sign a:hover,
a.news-all:hover,
a.t-cta:hover,
a.biz-cta:hover,
.wde-card a.biz-cta:hover {
background: var(--ink) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 4px 0 var(--blue);
}
.sign a:hover .ar,
a.news-all:hover .ar,
a.t-cta:hover .ar,
a.biz-cta:hover .ar {
color: #fff !important;
transform: translateX(4px);
}
/* .sign 親コンテナ: 右寄せレイアウトを少し緩めて中央寄せにも対応 */
.sign {
margin-top: 32px !important;
padding-top: 24px !important;
border-top: 1px solid var(--line-soft);
display: flex !important;
justify-content: flex-start !important;
align-items: center;
}
/* 三葉カード(.t-card)の中CTAは下端に固定で見やすく */
.t-card a.t-cta {
margin: auto 28px 28px !important;
align-self: flex-start;
}
/* 設備カード(.wde-card)のCTAは画像下に */
.wde-card a.biz-cta {
margin-top: 14px;
align-self: flex-start;
}
/* news-all は news-head 内で右端 */
.news-head a.news-all {
margin-left: auto;
}
/* ---------------------------------------------------------
* 9. 視認性ブースト: 薄すぎる小ラベル・テキストを補強
* 元デザインは editorial 風で意図的に控えめだが、
* 日本語のラベルは可読性優先で少し濃く・大きく調整。
* --------------------------------------------------------- */
/* ナビ右側の電話補足ラベル(TEL/平日…) - 9pxは小さすぎ */
.nav .right .tel small {
font-size: 10px !important;
color: var(--ink2) !important;
font-weight: 500 !important;
}
.nav .right .tel b {
color: var(--ink) !important;
font-weight: 700 !important;
}
/* head-kicker の en ラベル - .gray は薄いので少し濃く */
.head-kicker .en {
color: var(--ink2);
opacity: .8;
}
/* dispatch / news-card のメタテキスト */
.news-card .news-meta .d,
.news-card .news-meta .c {
color: var(--ink2);
font-weight: 600;
}
/* works/news カード説明文 */
.work .meta-row,
.wa-card .wa-meta,
.na-item .na-d,
.na-item .na-exc {
color: var(--ink2) !important;
}
/* indus-card 件数表示・カテゴリ */
.indus-card .indus-meta .c,
.indus-tag {
color: var(--ink2) !important;
font-weight: 600 !important;
}
/* spec 表の dt(項目名) を明確に */
.wd-spec dt,
.fac-spec dt,
.co-table dt {
color: var(--gray) !important;
font-weight: 600;
}
.wd-spec dd,
.fac-spec dd,
.co-table dd {
color: var(--ink) !important;
font-weight: 500;
}
/* フォーカス可視化 (キーボード操作時の可視リング) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--blue-light) !important;
outline-offset: 2px !important;
}
/* リンクの下線 (本文中のリンクはアンダーラインで識別性UP) */
.basic-page .content a,
.nd-body a,
.wd-content a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--blue);
color: var(--blue) !important;
}
.basic-page .content a:hover,
.nd-body a:hover,
.wd-content a:hover {
color: var(--ink) !important;
text-decoration-color: var(--ink);
}
/* ---------------------------------------------------------
* 10. (削除) ロゴサイズ調整はセクション 0.1 に統合済み
* --------------------------------------------------------- */
/* ---------------------------------------------------------
* 10.4 下層ページ ヒーローセクション 規格統一（コンポーネント化）
* 問題: 各ページの .page-hero-inner の文章量が違うため、
* grid-template-columns: 1.1fr 1fr の行高さが伸縮し、
* 右の画像エリアが短かったり長かったりしていた。
* 対応: .page-hero 自体に固定min-heightを設定。
* 文章は中央寄せ、画像は object-fit: cover でフィット。
* --------------------------------------------------------- */
/* 共通ヒーローボックス
* キーポイント: grid-template-rows を固定値にすることで、
* 左テキスト列の content 量に依存せず両カラム同じ高さを保証する。
* テキストは内部 flex で縦中央寄せ、長すぎる場合は隠す(text-overflow)。
*/
.page-hero {
grid-template-rows: 540px !important; /* ← 行高を固定 */
min-height: 540px !important;
max-height: 540px !important;
border-top: 1px solid var(--ink) !important;
border-bottom: 1px solid var(--ink) !important;
align-items: stretch !important;
background: var(--bg);
overflow: hidden; /* 万が一の content オーバーフロー対策 */
position: relative !important;
}
/* 左側をグラデーションで透過 (NEWSアーカイブ na-hero と同じ表現) */
.page-hero::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 35%, rgba(244,242,236,0) 70%) !important;
}
/* 左: テキスト側 */
.page-hero-inner {
padding: 56px 56px 56px 32px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
background: transparent !important;
position: relative !important;
z-index: 2 !important;
overflow: hidden; /* 長文時にカード外にはみ出さない */
min-width: 0;
}
.page-hero-inner .breadcrumb {
margin-bottom: 28px !important;
}
.page-hero-inner .head-kicker {
margin-bottom: 16px !important;
}
.page-hero-inner .page-h1 {
font-size: clamp(32px, 4vw, 56px) !important;
margin-bottom: 20px !important;
line-height: 1.2 !important;
}
.page-hero-inner .page-lede {
font-size: clamp(14px, 1.05vw, 16px) !important;
max-width: 520px !important;
line-height: 1.8 !important;
}
/* 右: 画像側 (親の grid 行高 540px に従う) */
.page-hero-img {
background-size: cover !important;
background-position: center !important;
background-color: #0e0f12 !important;
position: absolute !important; /* ヒーロー全面に敷く */
inset: 0 !important;
z-index: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
width: auto;
}
.page-hero-img::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(15,15,18,.10), rgba(15,15,18,.30)) !important;
}
.page-hero-img .lbl,
.page-hero-img .lbl-r {
position: absolute;
top: 20px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #bcc4d1;
z-index: 1;
}
.page-hero-img .lbl { left: 20px; }
.page-hero-img .lbl-r { right: 20px; text-align: right; }
.page-hero-img .lbl-b {
position: absolute;
left: 20px; right: 20px; bottom: 20px;
display: flex; justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #9aa3b4;
z-index: 1;
}
/* タブレット: 縦並びに切替 + 画像は固定アスペクト比で短く */
@media (max-width: 1100px) {
.page-hero {
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
min-height: 420px !important;
max-height: none !important;
}
.page-hero::after {
background: linear-gradient(90deg, var(--bg) 0%, rgba(244,242,236,.88) 40%, rgba(244,242,236,.78) 100%) !important;
}
.page-hero-inner {
padding: 56px 24px !important;
overflow: visible;
}
}
@media (max-width: 720px) {
.page-hero-inner { padding: 40px 20px !important; }
.page-hero-inner .page-h1 { font-size: clamp(28px, 7vw, 36px) !important; }
.page-hero-inner .page-lede { font-size: 14px !important; }
}
/* ---------------------------------------------------------
* archive 系 ヒーローセクション 整合性
* - .wa-hero (works archive) : page-hero と同じ grid (右に画像)
* - .na-hero (news archive) : display:block (カテゴリチップを内包するため
* 右画像なし。1カラム構造を保持しつつ高さを揃える)
* --------------------------------------------------------- */
/* works archive: 既存の .page-hero ルールでカバー（540px固定） */
.page-hero.wa-hero {
grid-template-rows: 540px !important;
min-height: 540px !important;
max-height: 540px !important;
}
/* news archive: 1カラムだが他ページと縦サイズを揃える (540px固定) */
.page-hero.na-hero {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
height: 540px !important;
min-height: 540px !important;
max-height: 540px !important;
background: var(--bg) !important;
position: relative;
overflow: hidden;
border-top: 1px solid var(--ink) !important;
border-bottom: 1px solid var(--ink) !important;
grid-template-rows: none !important; /* page-hero設定をリセット */
}
/* 装飾: 右側にフェードした製品写真をうっすら背景に */
.page-hero.na-hero::before {
content: "";
position: absolute;
inset: 0 0 0 50%;
background-image: url("../uploads/industry-1.jpg");
background-size: cover;
background-position: center;
opacity: .35;
mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
pointer-events: none;
z-index: 0;
}
.page-hero.na-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 35%, rgba(244,242,236,0) 70%);
pointer-events: none;
z-index: 0;
}
.page-hero.na-hero .page-hero-inner {
position: relative;
z-index: 1;
padding: 64px 32px !important;
max-width: 1200px;
width: 100%;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* カテゴリチップ位置を整える */
.page-hero.na-hero .na-cats {
margin-top: 36px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.page-hero.na-hero .na-cat-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid var(--line-soft);
background: var(--paper);
font-family: var(--jp);
font-size: 13px;
font-weight: 600;
color: var(--ink2);
transition: .2s;
border-radius: 0;
}
.page-hero.na-hero .na-cat-chip span {
color: var(--gray);
font-family: var(--mono);
font-size: 10px;
}
.page-hero.na-hero .na-cat-chip:hover,
.page-hero.na-hero .na-cat-chip.active {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.page-hero.na-hero .na-cat-chip.active span,
.page-hero.na-hero .na-cat-chip:hover span { color: #9bb2ff; }
/* タブレット以下: 高さ自動・装飾を消す */
@media (max-width: 1100px){
.page-hero.wa-hero,
.page-hero.na-hero {
min-height: auto !important;
max-height: none !important;
}
.page-hero.na-hero::before { inset: 0 0 0 65%; opacity: .25; }
.page-hero.na-hero::after { background: linear-gradient(180deg, var(--bg), rgba(244,242,236,0)); }
}
@media (max-width: 720px){
.page-hero.na-hero::before,
.page-hero.na-hero::after { display: none; }
.page-hero.na-hero .page-hero-inner { padding: 40px 20px !important; }
}
/* ===========================================================
* 統一デザインシステム (全ページ整合性)
* news archive のエディトリアル感を全ページに展開
* =========================================================== */
/* --- B. セクション見出し: 全ページ共通パターン --- */
.biz-head,
.numbers .head-kicker,
.why .why-wrap > .head-kicker,
.indus-head,
.equip .equip-head,
.msg .msg-head,
.dispatch .dispatch-wrap > .head-kicker,
.partners .partners-wrap > .head-kicker,
.feat .head,
.caps .head,
.works .head,
.triptych .head,
.numbers .numbers-wrap > .head-kicker {
margin-bottom: 48px !important;
}
/* head-kicker: 番号バッジ + 英語 */
.head-kicker {
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
margin-bottom: 16px !important;
font-family: var(--mono) !important;
font-size: 11px !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
}
.head-kicker .n {
display: inline-flex !important;
align-items: center;
padding: 2px 8px !important;
background: var(--ink) !important;
color: #fff !important;
font-weight: 700;
letter-spacing: .14em !important;
min-width: 26px;
justify-content: center;
}
.head-kicker .en {
color: var(--gray) !important;
font-weight: 500;
}
/* 暗背景での head-kicker 色反転 */
.numbers .head-kicker .en,
.pullq .head-kicker .en,
.cta:not(.cta) .head-kicker .en,
.feat .head-kicker .en,
.head-kicker.light .en,
section[class*="dark"] .head-kicker .en {
color: rgba(255,255,255,.6) !important;
}
/* H2: 統一サイズ (ページ毎の暴れを抑制) */
.biz-h2,
.numbers-h2,
.why-h2,
.indus-h2,
.equip-h2,
.msg-h2,
.partners-h2,
.threads-h2,
.area-h2,
.wdr-h2,
.rd-h2,
.caps .head h2,
.works .head h2,
.feat .head h2,
.triptych .head h2,
.dispatch .head h2,
.pullq h2,
.cut-threads h2,
.ll-challenges h2,
.fac-handling h2,
.fac-network h2 {
font-family: var(--jp) !important;
font-size: clamp(28px, 3.6vw, 48px) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
line-height: 1.35 !important;
text-wrap: pretty;
/* 不自然な折り返し対策: 句読点での折返しを許可、語中で折らない */
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
}
/* セクション見出し親コンテナの幅: 細すぎる場合は緩和 */
.threads-head,
.ll-head,
.area-head {
max-width: clamp(900px, 80vw, 1200px) !important;
}
/* 強調 部分:
* nowrap だと長文(15字+)で横はみだしの原因になるため使わない。
* 親h2の word-break:keep-all + line-break:strict に任せて、
* 句読点位置で自然に折り返す。
* em自身は色とスタイルだけ。
*/
.threads-h2 em,
.area-h2 em,
.biz-h2 em,
.numbers-h2 em,
.why-h2 em,
.indus-h2 em,
.rd-h2 em,
.page-h1 em,
.wd-h1 em,
.nd-h1 em,
.wdr-h2 em {
display: inline;
font-style: normal;
font-weight: 700;
/* 句読点だけが取り残されないようにバランス配置(対応ブラウザ) */
text-wrap: balance;
}
/* ヒーロー hero h1 (TOPページの巨大タイポ): 過剰サイズを抑制 + 行間ゆとり */
.hero h1 {
font-size: clamp(56px, 9vw, 168px) !important;
letter-spacing: -0.05em !important;
line-height: 1.12 !important; /* 0.92 → 1.12 (1行目と2行目を密着させない) */
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
text-wrap: balance;
}
.hero h1 .out,
.hero h1 br + .out {
display: inline-block;
margin-top: 0.16em; /* 2行目にさらに余白 */
}
/* ヒーロー issuetag: 暗背景上での視認性向上 */
.hero .issuetag,
.hero .feature .issuetag {
color: #fff !important;
font-size: 12px !important;
letter-spacing: .2em !important;
}
.hero .issuetag b,
.hero .feature .issuetag b {
color: #fff !important;
font-weight: 700 !important;
}
.hero .issuetag span:not(.sq),
.hero .feature .issuetag span:not(.sq) {
color: rgba(255,255,255,.78) !important;
font-weight: 500 !important;
}
.hero .issuetag .sq,
.hero .feature .issuetag .sq {
background: var(--blue) !important;
box-shadow: 0 0 0 3px rgba(155,178,255,.25);
}
@media (max-width: 1100px){
.hero h1 { font-size: clamp(48px, 8vw, 96px) !important; line-height: 1.15 !important; }
}
@media (max-width: 720px){
.hero h1 { font-size: clamp(36px, 9vw, 64px) !important; }
}
/* page-h1 (下層ヒーロー): word-break と balance を適用 */
.page-hero-inner .page-h1,
.page-h1 {
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
text-wrap: balance;
}
/* ---------------------------------------------------------
* 8.6 切削加工ページ: 大きすぎる画像の見直し
* .thread-feature (暗背景セクション内の21:9大画像) を右側コラム化
* .cut-strip-b (ページ幅いっぱい21:9の画像帯) を細いアクセント帯に
* --------------------------------------------------------- */
/* === .thread-feature: シネマティック・エディトリアルカードへ刷新 ===
* - 右端へブリードする大型ヒーロー画像
* - 4px青の左上ボーダー + 後ろにオフセットの淡影 (技術書/雑誌のレイアウト感)
* - キャプションは画像内左下、backdrop blur で情報パネル化
* ============================================================= */
.thread-feature {
position: relative !important;
margin: 48px -32px 80px auto !important;
width: 62% !important;
max-width: none !important;
aspect-ratio: 16 / 9 !important;
max-height: 440px !important;
background-size: cover !important;
background-position: center !important;
background-color: #0a0b0e !important;
border: 0 !important;
border-top: 3px solid var(--blue) !important;
border-left: 3px solid var(--blue) !important;
box-shadow:
-28px 28px 0 -6px rgba(155,178,255,.10),
-16px 16px 48px rgba(0,0,0,.42),
inset 0 0 0 1px rgba(255,255,255,.06);
overflow: hidden;
isolation: isolate;
}
/* シネマグラデーション (左上は黒で読みやすく、右下に青み) */
.thread-feature::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(120deg, rgba(10,11,14,.55) 0%, transparent 38%),
linear-gradient(225deg, rgba(47,76,168,.18) 0%, transparent 50%) !important;
pointer-events: none;
z-index: 1;
}
/* FIG ラベル: 半透明 + バックドロップブラー (テクニカルカード感) */
.thread-feature .cf-tag {
position: absolute !important;
top: 18px !important;
left: 18px !important;
z-index: 3 !important;
background: rgba(0,0,0,.45) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.24) !important;
padding: 6px 12px !important;
font-family: var(--mono) !important;
font-size: 10px !important;
letter-spacing: .22em !important;
color: #fff !important;
font-weight: 700 !important;
text-transform: uppercase;
}
/* キャプション: 画像内左下の情報パネル */
.thread-feature figcaption {
position: absolute !important;
left: 18px !important;
bottom: 18px !important;
right: auto !important;
max-width: 380px !important;
z-index: 3 !important;
background: rgba(10,11,14,.55) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 14px 16px !important;
border-left: 3px solid var(--blue) !important;
font-family: var(--jp) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* 1200px以上: CSS Grid テンプレ領域で「見出し|画像」上段配置
* absolute positioning は使わず、Grid 領域内に収めて被りを防ぐ
* レイアウト:
* ┌─ head ─┬─ feature ─┐
* ├─── grid (full) ───┤
* ├─── pull (full) ───┤
* └─── spec (full) ───┘
*/
@media (min-width: 1200px){
.cut-threads {
padding: 96px 32px !important;
}
.cut-threads .threads-wrap {
display: grid !important;
grid-template-columns: 1fr 440px !important;
grid-template-areas:
"head feature"
"grid grid"
"pull pull"
"spec spec" !important;
column-gap: 56px !important;
row-gap: 0 !important;
align-items: center !important; /* head と feature を縦中央揃え */
position: relative;
}
.cut-threads .threads-head {
grid-area: head !important;
max-width: none !important;
margin-bottom: 0 !important;
}
.cut-threads .threads-grid {
grid-area: grid !important;
margin-top: 72px !important; /* 上段から十分離す */
margin-bottom: 80px !important;
}
.cut-threads .threads-pull { grid-area: pull !important; }
.cut-threads .threads-spec { grid-area: spec !important; }
.cut-threads .thread-feature {
grid-area: feature !important;
position: relative !important;
top: auto !important;
right: auto !important;
margin: 0 -16px 0 0 !important; /* 控えめなブリード */
width: auto !important;
max-width: none !important;
aspect-ratio: 4 / 3 !important;
max-height: 380px !important; /* 高さを抑制 */
min-height: 320px;
align-self: center !important; /* 見出しと縦中央揃え */
box-shadow:
-22px 22px 0 -6px rgba(155,178,255,.10),
-12px 12px 36px rgba(0,0,0,.4),
inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
}
/* 1400px以上のとき、画像をやや大きく */
@media (min-width: 1400px){
.cut-threads .threads-wrap {
grid-template-columns: 1fr 480px !important;
}
.cut-threads .thread-feature {
max-height: 420px !important;
min-height: 340px !important;
margin: 0 -24px 0 0 !important;
}
}
/* タブレット */
@media (max-width: 1199px){
.thread-feature {
width: 72% !important;
aspect-ratio: 16/9 !important;
}
}
/* モバイル */
@media (max-width: 900px){
.thread-feature {
margin: 32px -24px 48px auto !important;
width: calc(100% + 24px) !important;
max-height: 280px !important;
aspect-ratio: 16/9 !important;
box-shadow:
0 8px 24px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.06);
}
.thread-feature figcaption {
max-width: calc(100% - 36px) !important;
font-size: 12px !important;
padding: 10px 14px !important;
}
}
/* === .cut-strip-b (旧) → .cut-feature-work でリデザイン済み (下記) === */
.cut-strip-b { display: none !important; } /* 旧構造非表示 (もし残っていれば) */
/* ---------------------------------------------------------
* Featured Work カード (エディトリアル風)
* 左に画像、右に「Featured/タイトル/spec/CTA」の情報パネル
* --------------------------------------------------------- */
.cut-feature-work {
background: var(--ink);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
position: relative;
}
.cfw-link {
display: grid !important;
grid-template-columns: 1.4fr 1fr;
min-height: 420px;
text-decoration: none;
color: inherit;
transition: opacity .25s;
}
.cfw-link:hover { opacity: .95; }
.cfw-link:hover .cfw-image { transform: scale(1.02); }
.cfw-link:hover .cfw-cta .ar { transform: translateX(8px); color: #fff; }
.cfw-image {
position: relative;
background-size: cover;
background-position: center;
background-color: #0e0f12;
overflow: hidden;
transition: transform .8s ease;
}
.cfw-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 30%, rgba(12,13,15,.7) 100%);
z-index: 1;
}
.cfw-num {
position: absolute;
bottom: 8px;
left: 24px;
font-family: var(--sans);
font-size: clamp(180px, 16vw, 280px);
font-weight: 900;
letter-spacing: -0.05em;
line-height: 0.85;
color: rgba(255,255,255,.10);
z-index: 0;
font-feature-settings: 'tnum';
pointer-events: none;
}
.cfw-tag {
position: absolute;
top: 24px;
left: 24px;
z-index: 2;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.25);
padding: 6px 12px;
backdrop-filter: blur(6px);
}
.cfw-info {
padding: 48px 48px 40px;
color: #cdd5e0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
position: relative;
z-index: 1;
}
.cfw-kicker {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
}
.cfw-kicker .cfw-k-label {
background: var(--blue);
color: #fff;
padding: 4px 10px;
font-weight: 700;
}
.cfw-kicker .cfw-k-sep { color: rgba(255,255,255,.35) }
.cfw-kicker .cfw-k-cat { color: #fff; font-weight: 500; }
.cfw-title {
font-family: var(--jp);
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: #fff;
margin: 0;
}
.cfw-title em {
font-style: normal;
font-weight: 700;
color: #9bb2ff;
}
.cfw-spec {
display: grid;
grid-template-columns: 80px 1fr;
gap: 6px 18px;
margin: 8px 0;
border-top: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
padding: 14px 0;
}
.cfw-spec > div {
display: contents;
}
.cfw-spec dt {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
font-weight: 600;
padding: 4px 0;
}
.cfw-spec dd {
font-family: var(--jp);
font-size: 14px;
color: #fff;
font-weight: 500;
padding: 4px 0;
}
.cfw-desc {
font-family: var(--jp);
font-size: 13px;
line-height: 1.8;
color: rgba(255,255,255,.7);
max-width: 360px;
}
.cfw-cta {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding: 12px 20px;
border: 1.5px solid #fff;
font-family: var(--jp);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
align-self: flex-start;
transition: background .2s, transform .2s, box-shadow .2s;
}
.cfw-cta .ar {
font-family: var(--sans);
font-size: 15px;
font-weight: 700;
color: #9bb2ff;
transition: transform .2s, color .2s;
}
.cfw-link:hover .cfw-cta {
background: var(--blue);
border-color: var(--blue);
box-shadow: 0 6px 0 rgba(255,255,255,.1);
}
/* --- レスポンシブ --- */
@media (max-width: 900px){
.cfw-link {
grid-template-columns: 1fr;
min-height: auto;
}
.cfw-image {
aspect-ratio: 16 / 9;
min-height: 240px;
}
.cfw-image::before {
background: linear-gradient(180deg, transparent 50%, rgba(12,13,15,.65) 100%);
}
.cfw-num { font-size: clamp(120px, 22vw, 180px); bottom: 4px; left: 16px; }
.cfw-info { padding: 32px 24px; gap: 14px; }
.cfw-title { font-size: clamp(28px, 6vw, 38px); }
.cfw-spec { grid-template-columns: 70px 1fr; }
.cfw-desc { max-width: 100%; font-size: 14px; }
}
/* .cut-strip-a (3カラム画像帯) も少し抑え目に */
.cut-strip-a .cut-figure {
aspect-ratio: 5 / 4 !important; /* 4:3 から少しコンパクトに */
max-height: 320px !important;
}
@media (max-width: 900px){
.cut-strip-a .cut-figure {
aspect-ratio: 16/9 !important;
max-height: 240px !important;
}
}
/* ---------------------------------------------------------
* 8.62 製作実績 アーカイブ グリッド: 3列固定
* - 結果1-2件でもカードが拡大しない
* - 該当なしメッセージのスタイル
* --------------------------------------------------------- */
.wa-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
grid-auto-rows: auto !important;
gap: 24px !important;
align-items: stretch;
}
@media (max-width: 900px){
.wa-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px){
.wa-grid { grid-template-columns: 1fr !important; }
}
/* カード内タグ: 絞り込み条件にマッチしたものを青背景で強調 */
.wa-tag.is-match {
background: var(--blue) !important;
color: #fff !important;
border-color: var(--blue) !important;
font-weight: 700 !important;
}
.wa-tag.is-match::before {
content: "✓";
display: inline-block;
margin-right: 4px;
font-size: 9px;
opacity: .85;
}
/* タグの折り返し許可 (素材複数表示) */
.wa-card .wa-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-top: 8px;
}
/* 該当なしメッセージ */
.wa-noresult {
grid-column: 1 / -1;
padding: 80px 32px;
text-align: center;
border: 1px dashed var(--line-soft);
background: var(--paper);
}
.wa-noresult-msg {
font-family: var(--jp);
font-size: 20px;
font-weight: 700;
color: var(--ink);
margin: 0 0 12px;
}
.wa-noresult-sub {
font-family: var(--jp);
font-size: 14px;
color: var(--ink2);
margin: 0;
}
.wa-noresult-sub a {
color: var(--blue) !important;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
}
/* 「未送信の変更あり」表示 (絞り込みボタンを目立たせる) */
.wa-filter-form.has-pending .wa-apply {
animation: wa-pulse 1.6s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(47,76,168,.5);
}
@keyframes wa-pulse {
0% { box-shadow: 0 0 0 0 rgba(47,76,168,.5); }
60% { box-shadow: 0 0 0 12px rgba(47,76,168,0); }
100% { box-shadow: 0 0 0 0 rgba(47,76,168,0); }
}
.wa-filter-form.has-pending .wa-apply::before {
content: "● ";
color: #ff9500;
font-size: 8px;
vertical-align: 4px;
margin-right: 4px;
}
/* 適用中バーに AND を明示 */
.wa-applied::after {
content: "AND";
display: inline-block;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: .18em;
color: var(--blue);
background: rgba(47,76,168,.10);
padding: 3px 7px;
align-self: center;
order: -1;
}
/* ---------------------------------------------------------
* 8.63 製作実績 アーカイブ フィルタセクション ブラッシュアップ
* --------------------------------------------------------- */
.wa-filters {
background: var(--paper) !important;
border-top: 1px solid var(--line-soft) !important;
border-bottom: 1px solid var(--line-soft) !important;
padding: 64px 32px !important;
}
.wa-filters .biz-wrap { max-width: 1400px !important; }
/* ヘッダー: kicker | タイトル | 件数 を3カラム配置 */
.wa-filter-head {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 24px !important;
margin-bottom: 40px !important;
padding-bottom: 24px !important;
border-bottom: 1px solid var(--line-soft) !important;
}
.wa-filter-head .head-kicker { margin: 0 !important; }
.wa-filter-head .wa-fh {
font-family: var(--jp) !important;
font-size: clamp(28px, 3vw, 40px) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
text-align: center;
}
.wa-filter-head .wa-count {
font-family: var(--mono) !important;
font-size: 12px !important;
letter-spacing: .12em !important;
color: var(--gray) !important;
text-align: right;
}
.wa-filter-head .wa-count b {
font-family: var(--sans);
font-size: 28px;
font-weight: 700;
color: var(--blue);
letter-spacing: -0.02em;
margin: 0 4px;
font-feature-settings: 'tnum';
}
.wa-filter-head .wa-count span {
display: block;
font-size: 11px;
margin-top: 2px;
color: var(--gray2);
}
/* カテゴリグリッド */
.wa-filter-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 32px 40px !important;
margin-bottom: 32px !important;
}
.wa-fcol {
border: 0 !important;
padding: 0 !important;
margin: 0;
}
.wa-fcat {
display: block !important;
font-family: var(--mono) !important;
font-size: 11px !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
padding-left: 14px;
position: relative;
}
.wa-fcat::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 8px; height: 2px;
background: var(--blue);
transform: translateY(-50%);
}
/* チップ */
.wa-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.wa-chip {
display: inline-flex !important;
align-items: center;
padding: 0 !important;
background: transparent !important;
cursor: pointer;
position: relative;
user-select: none;
border-radius: 0 !important;
border: 0 !important;
transition: transform .15s;
}
.wa-chip:hover { transform: translateY(-1px); }
.wa-chip input { display: none !important; }
.wa-chip span {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--line-soft);
font-family: var(--jp);
font-size: 13px;
font-weight: 500;
color: var(--ink2);
line-height: 1;
transition: background .15s, color .15s, border-color .15s;
}
.wa-chip:hover span { border-color: var(--ink); }
.wa-chip-n {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
color: var(--gray);
padding-left: 6px;
border-left: 1px solid var(--line-soft);
font-style: normal;
letter-spacing: 0;
}
.wa-chip.is-active span,
.wa-chip:has(input:checked) span {
background: var(--blue);
border-color: var(--blue);
color: #fff;
font-weight: 700;
}
.wa-chip.is-active .wa-chip-n,
.wa-chip:has(input:checked) .wa-chip-n {
color: rgba(255,255,255,.75);
border-left-color: rgba(255,255,255,.3);
}
/* コントロール: 適用ボタン + クリア */
.wa-fcontrols {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
padding-top: 24px !important;
border-top: 1px solid var(--line-soft);
}
.wa-fcontrols .wa-apply {
height: 48px !important;
padding: 0 32px !important;
font-family: var(--jp) !important;
font-size: 14px !important;
cursor: pointer;
}
.wa-fcontrols .wa-clear {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 18px;
font-family: var(--jp);
font-size: 13px;
color: var(--gray);
text-decoration: none;
transition: color .15s;
}
.wa-fcontrols .wa-clear:hover { color: var(--ink); }
.wa-fcontrols .wa-clear span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border: 1px solid currentColor;
border-radius: 50%;
font-size: 12px;
line-height: 1;
}
/* 適用中バー (フィルタ上部) */
.wa-applied {
display: flex !important;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 14px 18px;
margin-bottom: 28px;
background: var(--bg2);
border: 1px solid var(--line-soft);
border-left: 3px solid var(--blue);
}
.wa-applied-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--blue);
font-weight: 700;
}
.wa-applied-list {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
align-items: center;
}
.wa-applied-group {
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.wa-applied-cat {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gray);
}
.wa-applied-items {
font-family: var(--jp);
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.wa-clear-inline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-family: var(--jp);
font-size: 12px;
font-weight: 600;
color: var(--gray);
background: #fff;
border: 1px solid var(--line-soft);
text-decoration: none;
transition: color .15s, border-color .15s;
}
.wa-clear-inline:hover { color: var(--ink); border-color: var(--ink); }
.wa-clear-inline span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px; height: 14px;
border: 1px solid currentColor;
border-radius: 50%;
font-size: 10px;
line-height: 1;
}
/* カテゴリ名横の件数バッジ */
.wa-fcat-n {
display: inline-block;
margin-left: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--gray);
font-weight: 500;
letter-spacing: 0;
}
/* もっと見るで隠されているチップ */
.wa-chip-hidden { display: none !important; }
.wa-fcol.is-open .wa-chip-hidden { display: inline-flex !important; }
/* もっと見るボタン */
.wa-more {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 8px 12px;
font-family: var(--jp);
font-size: 12px;
font-weight: 600;
color: var(--blue);
letter-spacing: .02em;
transition: color .15s;
display: inline-flex;
align-items: center;
gap: 4px;
}
.wa-more:hover { color: var(--ink); }
.wa-more i {
font-family: var(--mono);
font-size: 10px;
font-style: normal;
color: var(--gray);
letter-spacing: 0;
}
.wa-more .wa-more-hide { display: none; }
.wa-fcol.is-open .wa-more .wa-more-show { display: none; }
.wa-fcol.is-open .wa-more .wa-more-hide { display: inline; }
/* レスポンシブ */
@media (max-width: 720px) {
.wa-filters { padding: 48px 20px !important; }
.wa-filter-head {
grid-template-columns: 1fr !important;
text-align: left;
gap: 12px !important;
}
.wa-filter-head .wa-fh { text-align: left; }
.wa-filter-head .wa-count { text-align: left; }
.wa-filter-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.wa-applied { padding: 12px 14px; gap: 10px; }
.wa-applied-list { font-size: 12px; }
.wa-fcontrols { flex-direction: column !important; }
.wa-fcontrols .wa-apply,
.wa-fcontrols .wa-clear { width: 100%; justify-content: center; }
}
/* ---------------------------------------------------------
* 8.65 切削加工: ねじセクション (threads) エディトリアル化
* - グリッドセルに巨大コーナー数字
* - 角ねじ(.hi)を青グラデで強調
* - 引用に巨大セリフクオーテーション
* - 仕様表の数値を強くタイポ
* --------------------------------------------------------- */
/* 親セクション余白 */
.cut-threads {
padding: 120px 32px !important;
}
/* ──── グリッド: ねじの種類 ──── */
.threads-grid {
margin-bottom: 96px !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
.thread-cell {
/* 各セルの inline style で --thread-photo にねじ写真を指定。暗幕を重ねて文字の可読性を確保 */
background-color: var(--ink) !important;
background-image: linear-gradient(180deg, rgba(12,13,15,.74) 0%, rgba(7,8,11,.9) 100%), var(--thread-photo, none) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
padding: 32px 26px 28px !important;
min-height: 168px !important;
position: relative !important;
overflow: hidden;
transition: transform .25s, box-shadow .25s;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.thread-cell::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(135deg, transparent 0%, rgba(155,178,255,.06) 100%);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.thread-cell:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,.4);
z-index: 1;
}
.thread-cell:hover::before { opacity: 1; }
/* 巨大なコーナー数字 (.n) */
.thread-cell .n {
font-family: var(--sans) !important;
font-size: 72px !important;
font-weight: 200 !important;
letter-spacing: -0.05em !important;
color: rgba(255,255,255,.14) !important;
position: absolute !important;
right: 12px !important;
bottom: 10px !important;
line-height: 0.8 !important;
z-index: 0 !important;
pointer-events: none;
font-feature-settings: 'tnum';
text-transform: none !important;
}
.thread-cell .name {
font-family: var(--jp) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #fff !important;
letter-spacing: -0.005em !important;
margin-top: auto !important;
position: relative;
z-index: 1;
}
/* 難加工ねじ (.hi) - 青グラデ強調 */
.thread-cell.hi {
background-color: #1e3a8a !important;
background-image: linear-gradient(180deg, oklch(0.36 0.16 256 / .82) 0%, rgba(30,58,138,.9) 100%), var(--thread-photo, none) !important;
}
.thread-cell.hi .n {
color: rgba(255,255,255,.24) !important;
}
.thread-cell .hard {
position: absolute !important;
right: 14px !important;
top: 14px !important;
font-family: var(--mono) !important;
font-size: 10px !important;
font-weight: 700 !important;
background: #fff !important;
color: var(--blue) !important;
padding: 4px 8px !important;
letter-spacing: .14em !important;
z-index: 2 !important;
}
/* ──── プルクオート ──── */
.threads-pull {
position: relative;
padding: 56px 0 56px 80px !important;
border-top: 1px solid rgba(255,255,255,.18) !important;
border-bottom: 1px solid rgba(255,255,255,.18) !important;
margin-bottom: 80px !important;
max-width: 1200px !important;
}
.threads-pull::before {
content: "\201C";
position: absolute;
top: 6px;
left: 0;
font-family: 'Newsreader', 'Cormorant Garamond', Georgia, serif;
font-size: 160px;
line-height: 1;
color: var(--blue);
opacity: .55;
font-style: italic;
font-weight: 300;
}
.tp-q {
font-family: var(--serif) !important;
font-size: clamp(22px, 2.2vw, 32px) !important;
line-height: 1.55 !important;
font-style: italic !important;
font-weight: 300 !important;
color: #fff !important;
margin-bottom: 24px !important;
letter-spacing: 0 !important;
}
.tp-q em {
font-style: normal !important;
color: #9bb2ff !important;
font-weight: 700 !important;
}
.tp-by {
display: flex;
align-items: center;
gap: 16px;
font-family: var(--mono) !important;
font-size: 11px !important;
letter-spacing: .18em !important;
color: rgba(255,255,255,.6) !important;
text-transform: uppercase !important;
}
.tp-by::before {
content: "";
width: 40px;
height: 1px;
background: rgba(255,255,255,.45);
}
/* ──── 仕様 stat バー ──── */
.threads-spec {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.10) !important;
gap: 1px !important;
}
.ts-cell {
background: linear-gradient(180deg, var(--ink) 0%, #07080b 100%) !important;
padding: 32px 28px 26px !important;
position: relative;
}
.ts-cell::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 2px;
background: var(--blue);
}
.ts-cell dt {
font-family: var(--mono) !important;
font-size: 10px !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.55) !important;
font-weight: 600 !important;
}
.ts-cell dd {
font-family: var(--sans) !important;
font-size: clamp(30px, 2.6vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1 !important;
color: #fff !important;
font-feature-settings: 'tnum';
margin: 0 !important;
}
.ts-cell dd .u {
font-size: 0.42em !important;
color: #9bb2ff !important;
font-weight: 500 !important;
margin-left: 3px !important;
letter-spacing: 0 !important;
font-family: var(--jp) !important;
}
/* スレッドセクション内 thread-feature 画像のキャプション抑制 */
.thread-feature figcaption {
font-size: 12px !important;
bottom: 16px !important;
left: 16px !important;
right: 16px !important;
}
@media (max-width: 720px){
.threads-pull { padding: 40px 0 40px 56px !important; }
.threads-pull::before { font-size: 110px; top: 4px; }
.thread-cell .n { font-size: 56px !important; }
.thread-cell { min-height: 130px !important; padding: 24px 20px !important; }
.thread-cell .name { font-size: 18px !important; }
.ts-cell { padding: 24px 20px 22px !important; }
}
/* ---------------------------------------------------------
* 8.7 大物・長尺ページ・修理保全ページ等の類似画像帯も同様に
* --------------------------------------------------------- */
.ll-strip .cut-figure,
.mt-strip .cut-figure,
[class*="-strip"] .cut-figure {
max-height: 320px;
}
/* 全 h2見出しに balance 適用(句読点だけが独立行に来ない) */
.biz-h2,
.numbers-h2,
.why-h2,
.indus-h2,
.equip-h2,
.msg-h2,
.partners-h2,
.threads-h2,
.area-h2,
.wdr-h2,
.rd-h2,
.caps .head h2,
.works .head h2,
.feat .head h2,
.triptych .head h2,
.dispatch .head h2,
.pullq h2,
.cut-threads h2,
.ll-challenges h2,
.fac-handling h2,
.fac-network h2,
.cta h2 {
text-wrap: balance;
/* auto-phrase は句読点で不自然に分割するため使わない */
word-break: keep-all !important;
}
/* CTAだけは少し大きく強調 */
.cta h2 {
font-size: clamp(32px, 4.2vw, 56px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
/* h1/h2/h3 中の は 直立・bold・青色のみ (全ページ統一)
* 理由: italic + 細字だと日本語フォントで線がか細くバランスが崩れる
*/
h1 em, h2 em, h3 em, h4 em,
.biz-h2 em,
.numbers-h2 em,
.why-h2 em,
.indus-h2 em,
.equip-h2 em,
.msg-h2 em,
.partners-h2 em,
.threads-h2 em,
.area-h2 em,
.wdr-h2 em,
.rd-h2 em,
.page-h1 em,
.wd-h1 em,
.nd-h1 em,
.cta h2 em,
.caps .head h2 em,
.works .head h2 em,
.feat .head h2 em,
.triptych .head h2 em,
.dispatch .head h2 em,
.pullq h2 em,
.cut-threads h2 em,
.ll-challenges h2 em,
.fac-handling h2 em,
.fac-network h2 em,
.hero h1 em,
.hero h1 .blue {
font-style: normal !important;
font-weight: 700 !important; /* 親見出しと同じ太さ */
font-family: inherit !important;
color: var(--blue) !important;
letter-spacing: inherit !important;
}
/* 暗背景内の em は明るい青 (#9bb2ff) に切替 -- ダーク背景でのコントラスト確保
* セクション: numbers / pullq / cut-threads / ll-challenges /
* fac-handling / fac-network / feat.dark
* 見出し: .biz-h2.light em / .threads-h2 em / .rd-h2 em も含む
*/
.numbers-h2 em,
.pullq h2 em,
.pullq em,
.feat.dark h2 em,
.cut-threads h2 em,
.cut-threads .biz-h2 em,
.cut-threads .threads-h2 em,
.threads-h2 em,
.ll-challenges h2 em,
.ll-challenges .biz-h2 em,
.fac-handling h2 em,
.fac-handling .biz-h2 em,
.fac-handling .biz-h2.light em,
.fac-network h2 em,
.fac-network .biz-h2 em,
.fac-network .biz-h2.light em,
.biz-h2.light em,
.rec-day .rd-h2 em,
section[class*="-dark"] h2 em,
section.dark h2 em,
.rec-day-img h2 em {
color: #9bb2ff !important;
}
/* 暗背景の body p (.threads-sub, .fac-network のリード等) の文字色強化 */
.cut-threads p,
.cut-threads .threads-sub,
.ll-challenges p,
.ll-challenges .fac-intro,
.fac-handling p,
.fac-handling .fac-intro,
.fac-network p,
.fac-network .fac-intro,
.fac-network .network-sub,
.pullq p {
color: rgba(255,255,255,.78) !important;
}
/* 暗背景内 b/strong の強調 (青ハイライトを明るく) */
.cut-threads b, .cut-threads strong,
.ll-challenges b, .ll-challenges strong,
.fac-handling b, .fac-handling strong,
.fac-network b, .fac-network strong,
.pullq b, .pullq strong {
color: #fff !important;
background: linear-gradient(transparent 65%, rgba(155,178,255,.30) 65%) !important;
}
/* ---------------------------------------------------------
* 会社情報ページ Google Maps iframe スタイル
* --------------------------------------------------------- */
.co-map {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
min-height: 380px;
background: var(--paper);
border: 1px solid var(--ink);
overflow: hidden;
}
.co-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: contrast(1.02) saturate(0.92);
}
.co-map::after {
content: "アクセスマップ";
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
background: rgba(12,13,15,.78);
color: #fff;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .2em;
padding: 5px 10px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
pointer-events: none;
}
@media (max-width: 900px){
.co-map { aspect-ratio: 16 / 10; min-height: 280px; }
}
/* ---------------------------------------------------------
* 採用ページ 数字セクション: ピクトグラム追加
* 各 num-cell の先頭に小さなアイコン(SVG)を表示。
* 暗背景上で見やすい明るい青(#9bb2ff)+細いライン。
* --------------------------------------------------------- */
.rec-numbers .num-icon {
width: 56px;
height: 56px;
margin-bottom: 18px;
color: #9bb2ff; /* 明るい青(ダーク背景上で視認性◎) */
display: flex;
align-items: center;
justify-content: center;
background: rgba(155,178,255,.08);
border: 1px solid rgba(155,178,255,.22);
border-radius: 50%;
transition: transform .3s ease, background .3s, border-color .3s;
}
.rec-numbers .num-icon svg {
width: 32px;
height: 32px;
display: block;
}
.rec-numbers .num-cell:hover .num-icon {
transform: scale(1.08) rotate(-2deg);
background: rgba(155,178,255,.15);
border-color: rgba(155,178,255,.5);
}
/* セルレイアウト調整: アイコン+ラベル+数値+備考の縦並びを整える */
.rec-numbers .num-cell {
padding: 36px 28px 32px !important;
min-height: 280px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start;
gap: 0;
}
.rec-numbers .num-lbl {
margin-top: 0 !important;
margin-bottom: 14px !important;
}
.rec-numbers .num-v {
margin-bottom: 12px !important;
}
.rec-numbers .num-note {
margin-top: auto; /* 下端揃え */
}
@media (max-width: 720px){
.rec-numbers .num-icon {
width: 48px; height: 48px;
margin-bottom: 14px;
}
.rec-numbers .num-icon svg { width: 26px; height: 26px; }
.rec-numbers .num-cell {
min-height: 220px !important;
padding: 28px 22px 24px !important;
}
}
/* fac-network ヒーロー見出し: 1行表示、+/= に余白、青emを大きめに */
.fn-h2 {
white-space: nowrap !important;
font-size: clamp(28px, 3vw, 42px) !important;
letter-spacing: -0.005em !important;
line-height: 1.3 !important;
word-break: keep-all !important;
display: block;
}
.fn-h2 .fn-op {
display: inline-block;
margin: 0 0.32em;
font-family: var(--mono);
font-size: 0.85em;
font-weight: 300;
color: rgba(255,255,255,.7);
vertical-align: 0.04em;
letter-spacing: 0;
}
.fn-h2 em {
font-size: 1.18em !important;
margin-left: 0.22em;
font-style: normal !important; /* 直立 */
font-weight: 700 !important; /* 親と同じ太さ */
color: #9bb2ff !important;
letter-spacing: -0.005em;
vertical-align: -0.02em;
}
/* レスポンシブ: 狭幅では em を改行表示 */
@media (max-width: 900px){
.fn-h2 {
white-space: normal !important;
font-size: clamp(22px, 5.5vw, 32px) !important;
line-height: 1.4 !important;
}
.fn-h2 .fn-op { margin: 0 0.24em; }
.fn-h2 em {
display: block;
margin-left: 0;
margin-top: 6px;
font-size: 1.12em !important;
}
}
/* fac-network の head-kicker も暗背景対応 */
.fac-network .head-kicker .en,
.fac-network .head-kicker.light .en {
color: rgba(255,255,255,.6) !important;
}
.fac-network .head-kicker .n,
.fac-network .head-kicker.light .n {
background: #fff !important;
color: var(--ink) !important;
}
/* --- C. セクション余白: 全部 96px に統一 --- */
section.caps,
section.triptych,
section.numbers,
section.why,
section.works,
section.indus,
section.equip,
section.msg,
section.dispatch,
section.partners,
section.feat,
section.pullq,
section.biz-pillars,
section.biz-materials,
section.biz-indus,
section.biz-flow,
section.fac-flagship,
section.fac-lathe,
section.fac-mc,
section.fac-aux,
section.fac-handling,
section.fac-cad,
section.fac-inspect,
section.fac-network,
section.co-message,
section.co-profile,
section.co-history,
section.co-access,
section.ct-form,
section.ct-faq,
section.ct-access,
section.ct-channels,
section.rec-about,
section.rec-want,
section.rec-features,
section.rec-onboard,
section.rec-team,
section.rec-day,
section.rec-numbers,
section.rec-salary,
section.rec-jobs,
section.rec-hiring,
section.wa-grid-sec,
section.wa-filters,
section.na-list-sec,
section.wd-content,
section.wd-relworks,
section.nd-related,
section.nd-meta,
section.cut-strengths,
section.cut-processes,
section.cut-threads,
section.cut-sizes,
section.cut-inspect,
section.cut-fixtures,
section.ll-challenges,
section.ll-why,
section.ll-sizes,
section.ll-cases,
section.ll-logistics,
section.mt-why,
section.mt-services,
section.mt-area,
section.mt-process,
section.mt-contract {
padding: 96px 32px !important;
}
/* セクション間に細い罫線で区切り (連続するセクションを視覚的に分離) */
section.caps + section,
section.triptych + section,
section.numbers + section,
section.why + section,
section.works + section,
section.indus + section,
section.equip + section,
section.msg + section,
section.dispatch + section,
section.feat + section,
section.biz-pillars + section,
section.biz-materials + section,
section.biz-indus + section,
section.fac-flagship + section,
section.fac-lathe + section,
section.fac-mc + section,
section.co-message + section,
section.co-profile + section {
border-top: 1px solid var(--line-soft);
}
/* モバイル時のセクション余白 */
@media (max-width: 1100px){
section.caps, section.triptych, section.numbers, section.why,
section.works, section.indus, section.equip, section.msg,
section.dispatch, section.partners, section.feat, section.pullq,
section[class*="biz-"], section[class*="fac-"], section[class*="co-"],
section[class*="ct-"], section[class*="rec-"], section[class*="wa-"],
section[class*="na-"], section[class*="wd-"], section[class*="nd-"],
section[class*="cut-"], section[class*="ll-"], section[class*="mt-"] {
padding: 64px 24px !important;
}
}
/* biz-wrap の最大幅統一 (ヒーロー以外) */
section .biz-wrap,
section.caps .biz-wrap,
section .biz-wrap {
max-width: 1400px !important;
margin: 0 auto !important;
}
/* --- D. 一般カード統一 (industries, why, equipment, recruit team, etc.) --- */
.indus-card,
.why-card,
.equip-card,
.rec-card,
.cap-card,
.t-card,
.fac-card {
background: var(--paper) !important;
border: 1px solid var(--line-soft) !important;
border-top: 3px solid var(--ink) !important;
padding: 28px !important;
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.indus-card:hover,
.why-card:hover,
.equip-card:hover,
.rec-card:hover,
.cap-card:hover,
.t-card:hover,
.fac-card:hover {
border-top-color: var(--blue) !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.indus-card h3,
.why-card h3,
.equip-card h3,
.rec-card h3,
.cap-card h3,
.t-card h3,
.fac-card h3 {
font-family: var(--jp) !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.005em !important;
line-height: 1.45 !important;
color: var(--ink) !important;
margin: 0 !important;
}
.indus-card p,
.why-card p,
.equip-card p,
.rec-card p,
.cap-card .desc,
.t-card p,
.fac-card p {
font-family: var(--jp) !important;
font-size: 14px !important;
line-height: 1.85 !important;
color: var(--ink2) !important;
font-weight: 400 !important;
margin: 0 !important;
}
/* カード内の画像: アスペクト比固定 */
.indus-card .indus-img,
.why-card .why-img,
.equip-card .equip-img,
.rec-card .rec-img,
.cap-card .img,
.t-card .img,
.fac-card .fac-img {
aspect-ratio: 4 / 3 !important;
height: auto !important;
background-size: cover !important;
background-position: center !important;
background-color: #1a1a1f !important;
margin: -28px -28px 8px !important; /* カードパディングと相殺してフルブリード */
border-bottom: 1px solid var(--line-soft);
}
/* --- E. ラベル/タグ/チップ統一 (mono uppercase 11px gray) --- */
.tag, .wa-tag, .work .tag, .indus-tag, .equip-tag, .nd-tag,
.partners-tag, .fac-tag {
display: inline-flex !important;
align-items: center !important;
padding: 4px 10px !important;
font-family: var(--mono) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
white-space: nowrap !important;
}
.wa-tag, .indus-tag, .equip-tag {
background: var(--paper);
color: var(--ink2);
border: 1px solid var(--line-soft);
}
.wa-tag.wa-mat, .work .tag.b {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.wa-tag.wa-proc, .work .tag {
background: var(--paper);
color: var(--ink2);
border: 1px solid var(--line-soft);
}
/* --- F. 暗背景セクション区別 --- */
/* pullq: 引用感 (大きな引用符 + センター寄せ) */
section.pullq {
background: var(--ink) !important;
color: #cdd5e0 !important;
}
section.pullq h2 {
color: #fff !important;
text-align: left;
}
/* cta: アクション感 (← オーバーライドで paper 化済み) */
/* dark feature セクション (cutting/long-large等の暗背景) */
section.feat.dark,
section.cut-threads,
section.ll-challenges,
section.mt-why.dark,
section.fac-handling,
section.fac-network {
background: var(--ink) !important;
color: #cdd5e0 !important;
}
section.feat.dark h2,
section.cut-threads h2,
section.ll-challenges h2,
section.fac-handling h2,
section.fac-network h2 {
color: #fff !important;
}
section.feat.dark .head-kicker .en,
section.cut-threads .head-kicker .en,
section.ll-challenges .head-kicker .en,
section.fac-handling .head-kicker .en,
section.fac-network .head-kicker .en {
color: rgba(255,255,255,.6) !important;
}
section.feat.dark .head-kicker .n,
section.cut-threads .head-kicker .n,
section.ll-challenges .head-kicker .n,
section.fac-handling .head-kicker .n,
section.fac-network .head-kicker .n {
background: #fff !important;
color: var(--ink) !important;
}
/* --- G. テーブル/spec統一 (.wd-spec / .fac-spec / .co-table / 一般table) --- */
.wd-spec,
.fac-spec,
.co-table,
section .biz-wrap table {
border-collapse: collapse;
width: 100%;
font-family: var(--jp);
}
.wd-spec > div,
.fac-spec > div,
.co-table > div {
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line-soft);
}
.wd-spec dt,
.fac-spec dt,
.co-table dt,
section table th {
font-family: var(--mono) !important;
font-size: 11px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--gray) !important;
font-weight: 600 !important;
}
.wd-spec dd,
.fac-spec dd,
.co-table dd,
section table td {
font-family: var(--jp) !important;
font-size: 15px !important;
color: var(--ink) !important;
font-weight: 500 !important;
}
.wd-spec dd small,
.fac-spec dd small,
.co-table dd small {
display: block;
font-size: 12px;
color: var(--gray);
font-weight: 400;
margin-top: 4px;
}
/* ---------------------------------------------------------
* 10.5 本文の組版: works(.wd-content)・news(.nd-body)・汎用(.basic-page .content)
* Gutenberg風の落ち着いたエディトリアル組版
* --------------------------------------------------------- */
.wd-content,
.nd-body,
.basic-page .content {
padding: 80px 32px 96px;
background: var(--bg);
border-top: 1px solid var(--line-soft);
}
.wd-content .biz-wrap,
.nd-body .biz-wrap {
max-width: 900px;
margin: 0 auto;
}
.wd-content .nd-wrap,
.nd-body .nd-wrap {
max-width: 840px;
margin: 0 auto;
}
/* セクション本文の基本タイポ */
.wd-content,
.nd-body,
.basic-page .content {
font-family: var(--jp);
color: var(--ink2);
font-size: 16px;
line-height: 1.95;
letter-spacing: 0.01em;
}
/* H2: 文書のメインセクション */
.wd-content h2,
.nd-body h2,
.basic-page .content h2 {
font-family: var(--jp);
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.45;
color: var(--ink);
margin: 72px 0 24px;
padding: 32px 0 0;
border-top: 2px solid var(--ink);
position: relative;
}
.wd-content h2:first-child,
.nd-body h2:first-child,
.basic-page .content h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* H2の前に細いキッカー風小さなマーカー */
.wd-content h2::before,
.nd-body h2::before,
.basic-page .content h2::before {
content: "";
position: absolute;
left: 0; top: -2px;
width: 60px; height: 2px;
background: var(--blue);
}
/* H3: サブセクション (FAQの Q. など) */
.wd-content h3,
.nd-body h3,
.basic-page .content h3 {
font-family: var(--jp);
font-size: 20px;
font-weight: 700;
line-height: 1.5;
color: var(--ink);
margin: 40px 0 14px;
padding-left: 18px;
border-left: 4px solid var(--blue);
}
/* 段落 */
.wd-content p,
.nd-body p,
.basic-page .content p {
margin: 0 0 1.3em;
color: var(--ink2);
}
/* 強調 b/strong */
.wd-content b, .wd-content strong,
.nd-body b, .nd-body strong,
.basic-page .content b, .basic-page .content strong {
font-weight: 700;
background: linear-gradient(transparent 65%, rgba(47, 76, 168, .18) 65%);
padding: 0 2px;
color: var(--ink);
}
/* 本文中の em も直立・太字に統一 (見出しと揃える) */
.wd-content em,
.nd-body em,
.basic-page .content em {
font-style: normal;
color: var(--blue);
font-weight: 700;
}
/* 本文リンク */
.wd-content a,
.nd-body a,
.basic-page .content a {
color: var(--blue) !important;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(47,76,168,.4);
font-weight: 600;
transition: color .15s, text-decoration-color .15s;
}
.wd-content a:hover,
.nd-body a:hover,
.basic-page .content a:hover {
color: var(--ink) !important;
text-decoration-color: var(--ink);
}
/* リスト */
.wd-content ul, .wd-content ol,
.nd-body ul, .nd-body ol,
.basic-page .content ul, .basic-page .content ol {
margin: 0 0 1.4em;
padding-left: 1.4em;
}
.wd-content ul li, .nd-body ul li, .basic-page .content ul li {
margin-bottom: .55em;
position: relative;
list-style: none;
}
.wd-content ul li::before,
.nd-body ul li::before,
.basic-page .content ul li::before {
content: "";
position: absolute;
left: -1.2em; top: 0.78em;
width: 8px; height: 2px;
background: var(--blue);
}
.wd-content ol li, .nd-body ol li, .basic-page .content ol li {
margin-bottom: .55em;
}
/* 引用 */
.wd-content blockquote,
.nd-body blockquote,
.basic-page .content blockquote {
margin: 32px 0;
padding: 24px 28px;
background: var(--paper);
border-left: 4px solid var(--blue);
font-family: var(--jp);
font-size: 15px;
color: var(--ink);
font-style: normal;
}
.wd-content blockquote p,
.nd-body blockquote p,
.basic-page .content blockquote p { margin-bottom: 0.8em; }
.wd-content blockquote cite,
.nd-body blockquote cite,
.basic-page .content blockquote cite {
display: block;
margin-top: 12px;
font-family: var(--mono);
font-size: 11px;
color: var(--gray);
letter-spacing: .08em;
font-style: normal;
}
/* テーブル */
.wd-content table,
.nd-body table,
.basic-page .content table {
width: 100%;
margin: 24px 0;
border-collapse: collapse;
font-size: 14px;
}
.wd-content table th, .wd-content table td,
.nd-body table th, .nd-body table td,
.basic-page .content table th, .basic-page .content table td {
padding: 12px 14px;
border-bottom: 1px solid var(--line-soft);
text-align: left;
vertical-align: top;
}
.wd-content table th,
.nd-body table th,
.basic-page .content table th {
background: var(--paper);
color: var(--ink);
font-weight: 700;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
}
/* 画像 (本文中) */
.wd-content img,
.nd-body img,
.basic-page .content img {
display: block;
max-width: 100%;
height: auto;
margin: 28px auto;
}
/* キャプション */
.wd-content figure,
.nd-body figure,
.basic-page .content figure {
margin: 32px 0;
}
.wd-content figcaption,
.nd-body figcaption,
.basic-page .content figcaption {
margin-top: 10px;
font-family: var(--mono);
font-size: 11px;
color: var(--gray);
text-align: center;
letter-spacing: .08em;
}
/* hr (区切り) */
.wd-content hr,
.nd-body hr,
.basic-page .content hr {
border: 0;
border-top: 1px solid var(--line-soft);
margin: 48px 0;
}
/* モバイル時に余白を圧縮 */
@media (max-width: 720px){
.wd-content,
.nd-body,
.basic-page .content {
padding: 48px 20px 64px;
font-size: 15px;
line-height: 1.85;
}
.wd-content h2,
.nd-body h2,
.basic-page .content h2 { font-size: 22px; margin-top: 48px; padding-top: 24px; }
.wd-content h3,
.nd-body h3,
.basic-page .content h3 { font-size: 17px; }
}
/* ---------------------------------------------------------
* 11. 日本語の折り返し最適化
* - 文節単位の折り返し (Chrome119+)
* - 長い英単語/URLの強制折返し
* - 数字+単位(54年, 1/100mm 等)は途中で切れないように nowrap
* --------------------------------------------------------- */
:root { /* JSフィードでもこの値が使われる想定 */ }
h1, h2, h3, h4, h5, h6,
.biz-h2, .numbers-h2, .why-h2, .indus-h2, .equip-h2, .msg-h2,
.hero h1, .hero .lede-p,
.cta h2, .cta .lede p,
.page-h1, .page-lede,
.wd-h1, .nd-h1, .na-t, .wa-title {
/* CJK単語の途中で改行しない + 句読点だけが取り残されないように分配 */
word-break: keep-all;
overflow-wrap: anywhere;
hanging-punctuation: allow-end;
text-wrap: balance;
line-break: strict;
}
/* 本文(p): 自然な折り返し */
p {
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
}
/* 数字+単位の一体化 (54年, φ900, 1/100mm, 0476-98-0519 等) */
.num-v,
.cap-card .specs div,
.mast .cell .v,
.cta .lede .telblock .n,
.nav .tel b,
.wd-spec dd,
.fac-spec dd {
white-space: nowrap;
}
/* リード文・キャッチコピーで文節区切り強化 */
.biz-h2 em,
.numbers-h2 em,
.why-h2 em,
.hero h1 .blue,
.hero h1 .out,
.cta h2 em {
white-space: nowrap;
}
/* タグ要素(SUS440Cなど)は崩れないように */
.wa-tag, .work .tag, .tag {
white-space: nowrap !important;
}
/* ボタンは絶対に折り返さない */
.btn, .nav .cta, .nav a.cta {
white-space: nowrap !important;
}
.btn .ar { flex-shrink: 0; }
/* 横並び meta 行 (日付・カテゴリ) */
.work .meta-row,
.wa-card .wa-meta,
.na-item .na-d,
.news-card .news-meta {
white-space: nowrap;
}
/* ---------------------------------------------------------
* 12. テキスト幅: 細すぎる max-width を緩和(全ページ網羅)
* 全14ページに渡って 560-820px の固定狭幅が複数箇所あり、
* 不自然な折り返しの原因となっていた。一括で広げる。
* --------------------------------------------------------- */
/* カード内の本文: max-widthを撤廃 */
.t-card p,
.cap-card .desc,
.why-card p,
.indus-card p,
.equip-card p,
.msg p,
.dispatch .news-card h4,
.onb-style p,
.onbs li p,
.ll-case p,
.cut-strength p,
.mt-service p,
.rec-feature p,
.rec-card p,
.fac-card p,
.co-history li p {
max-width: 100% !important;
}
/* リード文系: ややゆとり */
.page-lede,
.hero .lede-p,
.hero .lede p,
.fac-intro,
.cta .lede p,
.triptych .head .sub,
.threads-sub,
.ll-sub,
.network-sub,
.indus-intro,
.equip-intro,
.rec-intro,
.co-intro,
.ct-intro,
.cut-intro,
.mt-intro {
max-width: clamp(680px, 75vw, 1000px) !important;
}
/* 説明文 (.pillar-desc) はカラム制約があるため広げすぎない */
.pillar-desc,
.cap-card .pillar-desc {
max-width: 100% !important; /* 親カラム幅に追従 */
}
/* CTA セクションのリード: 強調用に少し広く */
.cta .lede p {
max-width: clamp(700px, 70vw, 900px) !important;
}
/* ---------------------------------------------------------
* WHY US (TOP): カード5枚専用レイアウト
* 上段3枚 + 下段2枚(横長) で折り返しの偏りをなくす
* --------------------------------------------------------- */
.why-grid {
border-top: 0 !important; /* カード自体に枠線があるため罫線は不要 */
}
@media (min-width: 1101px){
.why-grid {
grid-template-columns: repeat(6, 1fr) !important;
gap: 24px !important;
}
.why-card { grid-column: span 2; }
/* 4・5枚目は下段に2枚で均等配置 */
.why-card:nth-child(n+4) { grid-column: span 3; }
/* 下段の横長カードは画像を浅くして高さのバランスを取る */
.why-card:nth-child(n+4) .why-img {
aspect-ratio: 21 / 9 !important;
}
}
/* タブレット (721〜1100px): 2列 + 5枚目フル幅 (layout.css の指定を踏襲) */
@media (min-width: 721px) and (max-width: 1100px){
.why-grid { gap: 24px !important; }
.why-card:last-child .why-img {
aspect-ratio: 21 / 9 !important; /* フル幅カードの画像が大きくなりすぎないように */
}
}
/* スマホ: 1列 */
@media (max-width: 720px){
.why-grid { gap: 20px !important; }
}
/* ---------------------------------------------------------
* 12.0 小さい文字の可読性向上（サイト全体）
* 9〜12pxのラベル・説明文を一括で底上げする。
* 日本語の説明・タグ類 → 13px / 構造ラベル(mono) → 12px
* --------------------------------------------------------- */
/* === 12.0 小さい文字の可読性向上 === */
/* 日本語の説明・タグ類 → 13px */
.who-tag { font-size: 13px !important; }
.step-desc { font-size: 13px !important; }
.size-note { font-size: 13px !important; }
.biz-itrow div small { font-size: 13px !important; }
.mat-list small { font-size: 13px !important; }
.cap-card .specs div { font-size: 13px !important; }
.rec-video-note { font-size: 14px !important; }
/* 構造ラベル(mono英字・項目名) → 12px */
.head-kicker { font-size: 12px !important; }
.breadcrumb { font-size: 12px !important; }
.pillar-stats dt { font-size: 12px !important; }
.fac-keystats dt { font-size: 12px !important; }
.job-table dt { font-size: 12px !important; }
.job-table dd small { font-size: 12px !important; }
.biz-ithead { font-size: 12px !important; }
.ts-cell dt { font-size: 12px !important; }
.sc-note { font-size: 12px !important; }
.na-cat-chip span { font-size: 12px !important; }
.nd-tags-l { font-size: 12px !important; }
.case-spec dt { font-size: 11px !important; }
.cfw-spec dt { font-size: 11px !important; }
/* モバイルでは僅かに縮小（潰れ防止） */
@media (max-width: 720px) {
.head-kicker { font-size: 11px !important; }
.breadcrumb { font-size: 11px !important; }
}
/* ---------------------------------------------------------
* 13.0 モバイルメニュー修正
* - オーバーレイのロゴ: 現行ロゴ(白文字入り)を反転させない
* (ROUND 21 の invert は旧・濃色ロゴ前提だったため社名が黒く沈んでいた)
* - 閉じるボタン: オーバーレイ内部に明示的な「✕ 閉じる」を表示し、
* バー上のハンバーガーは開いている間は隠して一本化する
* --------------------------------------------------------- */
.nav-close { display: none; }
@media (max-width: 1100px) {
/* 白ロゴをそのまま表示（社名が見えるように） */
.nav.open .links .overlay-logo {
filter: none !important;
-webkit-filter: none !important;
}
/* 開いている間はバーのトグルを隠す（閉じるボタンに一本化） */
.nav.open .nav-toggle { visibility: hidden !important; }
/* オーバーレイ内の閉じるボタン */
.nav.open .nav-close {
display: flex !important;
align-items: center;
justify-content: center;
position: absolute;
top: 14px;
right: 20px;
width: 48px;
height: 48px;
padding: 0;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
z-index: 5;
transition: opacity .2s, transform .2s;
}
.nav.open .nav-close:hover { opacity: .6; transform: rotate(90deg); }
.nav.open .nav-close .x { font-size: 28px; line-height: 1; font-weight: 300; }
/* 管理バー表示中(ログイン時)はその下へ */
.admin-bar .nav.open .nav-close { top: 62px; }
}
@media (max-width: 480px) {
.nav.open .nav-close { top: 12px; right: 16px; }
}
/* =========================================================
* 投稿サムネイル: 横長アイキャッチ／ロゴfallbackの全体表示
* .thumb / .na-img / .wa-img / .img(--photo) など、どのカードでも有効
* （cover で潰れる横長画像や、未設定時の会社ロゴを切り抜かず表示）
* ========================================================= */
.thumb--contain {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-origin: content-box;
padding: 16px 20px;
}
.thumb--logo {
background-color: #0e0f12 !important;
}
/* =========================================================
* 共通CTA: FAX/直通電話ブロック廃止に伴う調整
* - lede を1カラム化（直通電話ブロックを削除したため）
* - 営業時間をボタン下に小さく掲載（.cta-hours）
* - スマホでアクションボタンをコンパクト化
* ========================================================= */
.cta .lede {
grid-template-columns: 1fr !important;
}
.cta-hours {
margin-top: 20px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: .04em;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
.cta .actions {
flex-direction: column !important;
gap: 10px !important;
margin-top: 32px !important;
}
.cta .actions .btn {
/* flex:1 1 100% だと縦並び時に主軸(縦)へ伸びるため固定化 */
flex: 0 0 auto !important;
height: 50px !important;
min-height: 0 !important;
padding: 0 18px !important;
font-size: 13px !important;
gap: 8px !important;
}
.cta .actions .btn .ar {
font-size: 14px !important;
}
.cta-hours {
margin-top: 16px;
font-size: 11px;
text-align: center;
}
}