@charset "utf-8"; /* ============================================================================= * EXEDY Aftermarket 共通ヘッダー / フッター（静的提供版） * * 提供元: WordPress テーマ「aftermarket」 * header.php / footer.php / assets/css/common.css / style_add.css * * 本ファイルの方針 * - 組み込み先ページの既存スタイルを壊さないよう、すべてのセレクタを * .exedy-header / .exedy-footer 配下にスコープしています。 * - CSS 変数（--main_color 等）も上記スコープ内で定義しており、 * :root（ページ全体）は汚染しません。 * - CSS ネスト記法は使わず、フラットなセレクタに展開しています。 * * 必要ブラウザ: :has() / CSS 変数対応版 * （Chrome 105+ / Edge 105+ / Safari 15.4+ / Firefox 121+） * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. Web フォント（Noto Sans JP） * ・assets/fonts/ に同梱した TTF を読み込みます。 * ・Google Fonts の CDN を使う場合は、この @font-face を削除して * HTML の に下記を追加してください。 * * -------------------------------------------------------------------------- */ @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 400; src: url( "../fonts/NotoSansJP-Medium.ttf" ) format( "truetype" ); font-display: swap; } @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 700; src: url( "../fonts/NotoSansJP-Bold.ttf" ) format( "truetype" ); font-display: swap; } /* ----------------------------------------------------------------------------- * 2. スコープ内共通変数・リセット * -------------------------------------------------------------------------- */ .exedy-header, .exedy-footer { /* 配色・サイズはオリジナルテーマの変数定義を踏襲 */ --font_size: 16px; --font_color: #333; --font_attention_color: #ec008c; --bg_color: #132e80; --main_color: #03c; --accent_color: #e70066; --transition-time: .25s; --easing: ease-in; --font_family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif; /* コンテンツ幅。組み込み先の本文幅に合わせて変更可 */ --content_width: 1000px; box-sizing: border-box; font-family: var( --font_family ); font-size: var( --font_size ); line-height: 1.5; color: var( --font_color ); text-align: left; /* height: auto へのトランジションを有効にする（Chrome 129+） */ interpolate-size: allow-keywords; } /* 組み込み先のリセット有無に依存しないよう、スコープ内のみ最小リセットを適用 */ .exedy-header *, .exedy-header *::before, .exedy-header *::after, .exedy-footer *, .exedy-footer *::before, .exedy-footer *::after { box-sizing: border-box; margin: 0; padding: 0; background-repeat: no-repeat; } .exedy-header ul, .exedy-footer ul { list-style: none; } .exedy-header img, .exedy-footer img { max-width: fit-content; height: auto; vertical-align: bottom; border-style: none; } .exedy-header a, .exedy-footer a { background-color: transparent; text-decoration: none; color: var( --main_color ); } .exedy-footer small { font-size: 80%; } /* ハンバーガーメニュー開閉用チェックボックスは常に非表示 */ .exedy-header input[ type="checkbox" ] { display: none; } /* ----------------------------------------------------------------------------- * 2-2. レイアウト用ユーティリティクラス * オリジナルテーマ（common.css）で定義しているものをスコープ内へ移植 * -------------------------------------------------------------------------- */ .exedy-header.flex, .exedy-header .flex, .exedy-footer.flex, .exedy-footer .flex { display: flex; } .exedy-header.flex-wrap, .exedy-header .flex-wrap, .exedy-footer .flex-wrap { flex-wrap: wrap; } .exedy-header .flex-column, .exedy-footer .flex-column { flex-direction: column; } .exedy-header .space-between, .exedy-footer .space-between { justify-content: space-between; } .exedy-header .justify-center, .exedy-footer .justify-center { justify-content: center; } .exedy-header .align-center, .exedy-footer .align-center { align-items: center; } /* ----------------------------------------------------------------------------- * 3. ヘッダー（PC: 1024px 以上） * -------------------------------------------------------------------------- */ .exedy-header { position: sticky; top: 0; z-index: 2; background: #fff; } /* 上段（ロゴ・ユーティリティ）はコンテンツ幅で中央寄せ、ナビは全幅 */ .exedy-header > *:not( nav ) { width: 100%; max-width: var( --content_width ); margin: 0 auto; } .exedy-header > div:first-child { position: relative; z-index: 10; background: #fff; } .exedy-header > div { padding: 10px 0; } .exedy-header > div h1 { margin: 10px 0; font-size: inherit; line-height: 1; } .exedy-header > div ul { gap: 0 40px; } .exedy-header > div ul li img { vertical-align: middle; } .exedy-header > div > ul .flex { gap: 0 10px; } /* WEB クラッチ110番ボタン */ .exedy-header > div .btn_110 { position: relative; width: 174px; height: 74px; margin-left: auto; border-radius: 12px; overflow: hidden; background-color: var( --main_color ); transition: all .3s ease; } .exedy-header > div .btn_110 a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; color: #fff; text-decoration: none; cursor: pointer; } .exedy-header > div .btn_110 img { width: auto; height: 20px; } .exedy-header > div .btn_110::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to top, rgba( 255, 255, 255, .4 ), rgba( 255, 255, 255, 0 ) ); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .exedy-header > div .btn_110:hover::after { opacity: 1; } /* PC ではハンバーガーメニューを隠す */ .exedy-header > div > div:has( label.flex ) { display: none; } /* --- グローバルナビゲーション --- */ .exedy-header > nav { width: 100%; background: var( --main_color ); z-index: 5; } /* ナビ下端のグラデーションライン */ .exedy-header > nav::after { content: ""; display: block; width: 100%; height: 5px; background: linear-gradient( 90deg, var( --main_color ), var( --accent_color ) ); } .exedy-header > nav > ul { display: flex; justify-content: space-between; gap: 0 25px; max-width: var( --content_width ); margin: 0 auto; } .exedy-header > nav > ul > li { position: relative; padding: 20px 0; cursor: pointer; } .exedy-header > nav > ul > li > a, .exedy-header > nav > ul > li span { color: #fff; } .exedy-header > nav > ul > li span, .exedy-header > nav > ul > li img { position: relative; z-index: 4; } .exedy-header > nav img { margin: 0 0 0 .5em; vertical-align: middle; } /* 開閉ラベル（▼アイコン）。PC はホバーで開くため見た目のみ */ .exedy-header > nav > ul > li > label { display: inline-block; cursor: pointer; } /* スマホ専用メニュー項目は PC では非表示 */ .exedy-header > nav .menu_faq_sp { display: none; } /* 2 階層目（ドロップダウン）は既定で非表示 */ .exedy-header > nav li ul { display: none; position: absolute; top: calc( 100% - .5em + 2px ); left: 50%; translate: -50% 0; } .exedy-header > nav li ul a { display: flex; align-items: center; gap: 0 10px; width: 100%; padding: 20px 25px 20px 5px; line-height: 1; background: #222; color: #fff; white-space: nowrap; } .exedy-header > nav li ul a:hover { background: #434343; text-decoration: underline; } /* ホバー（PC）またはタップ（レスポンシブ）で開く */ .exedy-header > nav > ul > li:hover > ul, .exedy-header > nav > ul > li:has( :checked ) > ul { display: flex; flex-direction: column; width: fit-content; min-width: 100%; z-index: 3; font-size: 14px; } /* --- 言語表示 ----------------------------------------------------------------- * オリジナルは WPML プラグインの言語切替ドロップダウン（日本語 / English）ですが、 * 静的提供版は日本語のみのため、切替 UI を持たないラベル表示としています。 * -------------------------------------------------------------------------- */ .exedy-header .lang-label { display: block; padding: 5px 0 5px 6px; line-height: 1; color: #444; white-space: nowrap; } /* ----------------------------------------------------------------------------- * 4. ヘッダー（タブレット: 1024px 未満） * ハンバーガーメニューに切り替え * -------------------------------------------------------------------------- */ @media ( width < 1024px ) { .exedy-header { z-index: 2; } .exedy-header > div { position: relative; z-index: 4; max-width: none; padding: 10px 20px; background: #fff; } .exedy-header > div h1 a { display: flex; align-items: center; } .exedy-header > div h1 a img { height: 50px; vertical-align: middle; } /* ハンバーガーメニューを表示 */ .exedy-header > div > div:has( label.flex ) { display: flex; color: var( --main_color ); } .exedy-header > div > div:has( label.flex ) > label { cursor: pointer; -webkit-user-select: none; user-select: none; } /* メニューアイコン（open / close の切り替え） */ .exedy-header .menu-icon { display: block; width: 2em; height: 2em; background-position: center; background-size: contain; } .exedy-header .menu-icon--open { background-image: url( "../img/menu.svg" ); } .exedy-header .menu-icon--close { display: none; background-image: url( "../img/close.svg" ); } .exedy-header > div > div:has( label.flex ) > label:has( input:checked ) .menu-icon--open { display: none; } .exedy-header > div > div:has( label.flex ) > label:has( input:checked ) .menu-icon--close { display: block; } /* WEB クラッチ110番・よくあるご質問はナビ内（menu_faq_sp）へ移動 */ .exedy-header > div .btn_110, .exedy-header > div .menu_faq_pc { display: none; } /* ナビはヘッダー上部に隠しておき、開いたときにスライドダウンさせる */ .exedy-header > nav { position: absolute; top: calc( -85vh - 100% ); left: 0; width: 100%; z-index: 2; overflow: auto; transition: top var( --transition-time ) var( --easing ); } /* ナビ下端のグラデーションラインはヘッダー下端へ移す */ .exedy-header > nav::after { display: none; } .exedy-header > div:first-child::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: linear-gradient( 90deg, var( --main_color ), var( --accent_color ) ); } /* ハンバーガーメニュー ON でスライドダウン */ .exedy-header > div:has( input[ type="checkbox" ]:checked ) + nav { top: 100%; } .exedy-header > nav > ul { flex-direction: column; align-items: center; justify-content: center; gap: 1.5em 0; height: 100%; min-height: 50vh; padding: 10vh 0; } .exedy-header > nav > ul > li { width: fit-content; padding: 0; text-align: center; } .exedy-header > nav > ul > li > a { text-decoration: underline; } /* 2 階層目はアコーディオン（縦積み）で開閉 */ .exedy-header > nav li ul { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 1.5em; position: static; width: fit-content; height: 0; padding: 0 20vw; translate: 0; overflow: hidden; transition: padding var( --transition-time ) var( --easing ), height var( --transition-time ) .1s var( --easing ); } .exedy-header > nav li ul a { padding: 0; background: transparent; text-decoration: underline; } .exedy-header > nav li ul a:hover { background: transparent; } /* サブメニュー内のシェブロンアイコンは非表示 */ .exedy-header > nav li ul a img { display: none; } /* ホバーでもレイアウトを変えず、タップ開閉と同一表示にする */ .exedy-header > nav > ul > li:hover > ul { flex-direction: column; flex-wrap: nowrap; width: fit-content; min-width: 0; font-size: inherit; } .exedy-header > nav > ul > li:has( :checked ) > ul { width: fit-content; min-width: 0; height: auto; padding: 1.5em 20vw 1em; font-size: inherit; } .exedy-header > nav .menu_faq_sp { display: block; } } /* ----------------------------------------------------------------------------- * 5. ヘッダー（スマートフォン: 768px 未満） * -------------------------------------------------------------------------- */ @media ( width < 768px ) { .exedy-header, .exedy-footer { --font_size: 14px; } .exedy-header > div { padding: 10px 5vw; } .exedy-header > div h1 a img { height: 25px; } .exedy-header > div > ul { gap: 0 5vw; } .exedy-header > div > ul > li > a { display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .exedy-header > div > ul .flex { gap: 0 .5vw; } .exedy-header > div > div:has( label.flex ) > label { margin: 0 0 5px; line-height: 1; } .exedy-header > nav > ul > li ul { padding: 0 10vw; } .exedy-header > nav > ul > li:has( :checked ) > ul { padding: 1.5em 10vw 1em; } } /* ----------------------------------------------------------------------------- * 6. フッター（最下部リンク行のみ） * ※ サイトマップ・営業カレンダー・ページトップボタンは提供対象外 * -------------------------------------------------------------------------- */ .exedy-footer { padding: 25px 0; background: var( --bg_color ); color: #fff; } .exedy-footer a { color: #fff; } .exedy-footer a:hover { text-decoration: underline; } .exedy-footer > div { display: flex; justify-content: center; align-items: center; gap: 20%; margin: 0 10px; } .exedy-footer > div ul { display: flex; gap: 0 20px; } /* --- タブレット: 1024px 未満 --- */ @media ( width < 1024px ) { .exedy-footer > div { flex-direction: column-reverse; align-items: center; gap: 25px 0; } .exedy-footer > div ul { gap: 0 2.5vw; } } /* --- スマートフォン: 768px 未満 --- */ @media ( width < 768px ) { .exedy-footer > div ul { flex-wrap: wrap; gap: 2.5vh 10vw; width: 100%; } .exedy-footer > div ul > li { width: calc( ( 100% - 10vw ) / 2 ); } .exedy-footer > div ul > li:nth-child( 2n + 1 ) { text-align: right; } }