/* ================================================================== 三木鐵工所 · 下層ページ共通の土台 ------------------------------------------------------------------ 対象ページ: 会社概要 (.miki-company) / 加工技術 (.miki-machining) 設備紹介 (.miki-equipment) / 加工実績 (.miki-works) ここに置くのは「4ページの本文に1バイトも違わず入っていたもの」だけ。 ページ固有のレイアウトは page-<スラッグ>.css に分ける。 読み込みは functions.php の miki_pages_enqueue()。 page-<スラッグ>.css より必ず先に読み込まれる（依存指定済み）。 ※ ヒーロー部・クロージング部は4ページでほぼ同じだが、値が少しずつ 違うため、段階1では各 page-<スラッグ>.css に残している。 4ページすべてを移し終えた段階2で、差分を確認してここへ集約する。 ================================================================== */ /* ---------- Reset ---------- */ :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) *, :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) *::before, :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) *::after{ box-sizing:border-box;margin:0;padding:0; } /* ---------- ベース ---------- */ .miki-company, .miki-machining, .miki-equipment, .miki-works{ font-family:'Shippori Mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif; background:#f6f4ef; color:#1a1a1a; line-height:1.9; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:.02em; scroll-behavior:smooth; } :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) img{ display:block;max-width:100%;height:auto; } :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) a{ color:inherit;text-decoration:none;transition:opacity .3s ease; } :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) a:hover{ opacity:.65; } /* ---------- Tokens ---------- 色・書体はここが唯一の定義箇所。変えると4ページ同時に変わる。 */ .miki-company, .miki-machining, .miki-equipment, .miki-works{ --ink:#141414; --ink-2:#2a2a2a; --ink-3:#5c5a55; --paper:#f6f4ef; --paper-2:#ede9df; --line:#c8c2b3; --accent:#a5341f; --accent-ink:#7b2612; --accent-soft:#e8a794; --sans:'Barlow', system-ui, sans-serif; --serif:'Shippori Mincho', serif; --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ---------- Reveal（スクロールで表示） ---------- 初期状態を透明にしておき、assets/js/miki-reveal.js が 画面に入った要素へ .in を付けて表示する。 */ :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) .reveal{ opacity:0;transform:translateY(24px); transition:opacity 1s ease,transform 1s ease; } :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) .reveal.in{ opacity:1;transform:translateY(0); } /* ============================================================ WordPress 埋め込み用 ─ 本文を画面いっぱいに広げ、 親テーマのページヘッダーと余白を消す ============================================================ */ /* ※ width:100vw はスクロールバー幅を含むため、横方向に約8pxはみ出す。 スクロールバー幅を calc(100vw - 100%) で取り出して差し引く方式を 試したが、実機で下層ページの左右に余白が見えてしまったため撤回した。 8pxのはみ出しは許容する。（CLAUDE.md の「調査済み」参照） */ .miki-company, .miki-machining, .miki-equipment, .miki-works{ width:100vw; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); max-width:100vw; overflow-x:hidden; } /* ★ 2026-09-06（Arkhe移行）: 下の5行は **旧テーマの親テーマ向け**で、 Arkhe には当たらない。同じ役目は miki-frame.css が持っている。 .p-page-header の非表示 → arkhe_is_show_ttltop を false に .p-single-content / .p-page の padding-top 0 → .l-content__body の margin 0 .l-main の row-gap 0 → 同上 .l-container の padding-bottom 0 → body.miki-legacy で 0 にしている **消していないのは、本体（旧テーマ）へ戻したときにそのまま効くようにするため。** このファイルは本体と共通の資産として扱っている。 */ body:has(:is(.miki-company, .miki-machining, .miki-equipment, .miki-works)) .p-page-header{ display:none !important; } body:has(:is(.miki-company, .miki-machining, .miki-equipment, .miki-works)) .p-single-content{ padding-top:0 !important; } body:has(:is(.miki-company, .miki-machining, .miki-equipment, .miki-works)) .p-page{ padding-top:0 !important; } body:has(:is(.miki-company, .miki-machining, .miki-equipment, .miki-works)) .l-main{ row-gap:0 !important; } body:has(:is(.miki-company, .miki-machining, .miki-equipment, .miki-works)) .l-container{ padding-bottom:0 !important; } /* ============================================================ スマホ・タブレット（960px以下）の共通ルール ------------------------------------------------------------ ★ この @media の外は一切変更していない＝PC表示は従来どおり。 以下のトークンもここでしか定義していないので、 PC側の計算結果に影響しない。 余白の考え方（3つの原則）: ① 4ページで同じ役割の余白は同じ値を使う ② 文字は途中で折り返さない ③ 余白は「項目の中」ではなく「項目の切れ目」に置く → 項目の中は詰め、項目と項目の間を広げる ============================================================ */ @media (max-width:960px){ .miki-company, .miki-machining, .miki-equipment, .miki-works{ /* 画面左右の余白 */ --pad-side: 20px; /* 項目の「中」── 詰める側 */ --gap-in-item: 6px; /* ラベルと値など、密接につながる要素 */ --gap-in-block: 24px; /* 同じ項目の中でも離す要素（写真と本文など） */ /* 項目の「切れ目」── 広げる側。上下に入れるので実際の間隔は2倍 */ --gap-between-items: 20px; /* 一覧の行など小さな項目（合計 40px） */ --gap-between-blocks: 64px; /* 実績カードなど大きな項目（合計 128px） */ /* セクションの上下 */ --gap-section: 64px; } /* ---------- ヒーローのアイブロウを縦2段に ---------- 本文HTMLは4ページとも同じ作り:
— COMPANY 三木鐵工所について
PCでは「— COMPANY ─── 三木鐵工所について」と横1行だが、 スマホ幅では窮屈なので縦2段にする。横罫線は縦組みでは 意味を持たないので隠す。PC表示は1行のまま変えていない。 */ :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) .hero .eyebrow{ flex-direction: column; align-items: flex-start; gap: 2px; /* 2段の行間は詰める */ } :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) .hero .eyebrow .rule{ display: none; } /* ★ 2026-10-03（Ken の指示「ヒーローの英字は不要」）: 会社概要・加工技術・加工実績のヒーローの英字を スマホでは出さない。小見出しの PROCESSES / WORKS / COMPANY、見出しの上の英字、右下の MIKI METAL WORKS…。 設備紹介は page-equipment.css でヒーローを和文1行にしてあるので対象外（同じ結果になる）。 加工実績の紹介文にある材質（FCD450 など）は内容なので残す。 */ :is(.miki-company, .miki-machining, .miki-works) .hero .eyebrow .num, :is(.miki-company, .miki-machining, .miki-works) .hero .hero-title .en, /* .hero を足して各ページの .hero-title .en{display:block} に勝たせる */ :is(.miki-company, .miki-machining, .miki-works) .hero-meta{ display: none; } /* ---------- 見出しの折り返し ---------- text-wrap:balance … 各行の長さを揃え、最終行に1〜2文字だけ 残るのを防ぐ word-break:auto-phrase … 日本語を文節単位で折り返す （「削り出|す。」のような割れ方を防ぐ） どちらも非対応ブラウザでは無視されるだけで、 従来どおりの折り返しになる。 */ :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) :is(h1, h2, h3, h4, .hero-title){ text-wrap: balance; word-break: auto-phrase; } /* リード文・説明文は行数が多いので pretty（末尾の孤立行だけ防ぐ）。 クラス名は本文HTMLの実物に合わせている: .hero-lead 4ページ共通のヒーロー導入文 .tl-node p 会社概要の沿革の説明 .p-body 加工技術の工法説明 .note 加工実績の各実績の説明 .cap 加工技術の画像キャプション ※ 2026-09-05 訂正: .cap は加工技術のクラス。設備紹介ではない。 設備紹介の本文まわりは page-equipment.css 側で指定している （作り直しでクラス名が変わったため）。 */ :is(.miki-company, .miki-machining, .miki-equipment, .miki-works) :is(.hero-lead, .tl-node p, .p-body, .note, .cap){ text-wrap: pretty; word-break: auto-phrase; } /* 数値＋単位は改行させない（079-296-0844 など） */ /* ※ .miki-equipment .mc-specs .v は 2026-09-05 の作り直しで クラスごと無くなったため削除した。 */ .miki-company .spec-list .v .mono, .miki-works .specs .v{ white-space: nowrap; } }