/* 共通: JS を使わない UI の実装 * 元 CSS (reset / common / 各ページ css) は無加工でコピーし、差分だけここで上書きする。 * DOM は build/common.py が生成する: * …… * … … * :has() を使わず兄弟セレクタ (~ / +) だけで動く。 */ /* ------------------------------------------------------------ * 開閉用 checkbox: 視覚的にのみ隠す (Tab でフォーカス → Space で開閉できるよう display:none にしない) * ---------------------------------------------------------- */ .nav-toggle, .nav-group-toggle { position: fixed; /* フォーカス時にページ先頭へスクロールしないよう fixed */ top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } .nav-group-toggle { position: absolute; } @media screen and (min-width: 1241px) { .nav-toggle { display: none; /* PC ではハンバーガー自体が無い */ } } /* ------------------------------------------------------------ * ハンバーガーメニュー (元: common/js/script.js の fadeIn/fadeOut 300ms + .showing) * ---------------------------------------------------------- */ label.hamburger__btn { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .hamburger { opacity: 0; /* 閉じるとき: opacity を 0.3s で落としてから display:none (allow-discrete 非対応環境は即時に閉じる) */ transition: opacity 0.3s ease, display 0.3s allow-discrete; } @media screen and (max-width: 1240px) { .nav-toggle:checked ~ .hamburger { display: block; opacity: 1; animation: static-nav-fade-in 0.3s ease; } } @keyframes static-nav-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ボタンの × 化 (元 CSS の .hamburger__btn.showing を移植) */ .nav-toggle:checked ~ .header .hamburger__btn { background: #74838D; } .nav-toggle:checked ~ .header .hamburger__btn .hamburger__btn-line:nth-child(2) { width: 0; transition: 0.3s; } .nav-toggle:checked ~ .header .hamburger__btn .hamburger__btn-line:nth-child(1) { transform: rotate(45deg); width: 30px; top: 33px; left: 18px; transition: 0.2s; } .nav-toggle:checked ~ .header .hamburger__btn .hamburger__btn-line:nth-child(3) { transform: rotate(-45deg); width: 30px; top: 33px; left: 18px; transition: 0.2s; } @media screen and (max-width: 450px) { .nav-toggle:checked ~ .header .hamburger__btn .hamburger__btn-line:nth-child(1), .nav-toggle:checked ~ .header .hamburger__btn .hamburger__btn-line:nth-child(3) { width: 24px; top: 25px; left: 13px; } } /* フォーカスリングはキーボード操作時のみ。タップ/クリックで label 経由に checkbox へフォーカスが移った場合に * :focus-visible が一致するブラウザがあるため、ポインタ操作 (hover:none の端末・ホバー中) では出さない */ @media (hover: hover) { .nav-toggle:focus-visible ~ .header .hamburger__btn:not(:hover) { outline: 2px solid #0B7BEC; outline-offset: 3px; } } /* 「会社情報」アコーディオン (元: slideDown/slideUp 300ms + span.showing でシェブロン回転) */ label.group-btn { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .hamburger__group { display: grid; /* 元 CSS の display:none を上書き */ grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .hamburger__group-inner { min-height: 0; overflow: hidden; visibility: hidden; /* 閉じている間は中のリンクに Tab で入らない */ transition: visibility 0s 0.3s; } .nav-group-toggle:checked ~ .hamburger__group { grid-template-rows: 1fr; } .nav-group-toggle:checked ~ .hamburger__group .hamburger__group-inner { visibility: visible; transition: visibility 0s; } .hamburger__link.group-btn .group-btn-span::before { transition: transform 0.3s; } .nav-group-toggle:checked + .group-btn .group-btn-span::before { transform: rotate(180deg); } @media (hover: hover) { .nav-group-toggle:focus-visible + .group-btn:not(:hover) { outline: 2px solid #fff; outline-offset: -4px; } } .nav-toggle:focus, .nav-group-toggle:focus { outline: none; } /* ------------------------------------------------------------ * PC ヘッダーのドロップダウン: