/* サイト共通のフッター (HTML の正本: scripts/partials/site-chrome.html)。
LP (Tailwind) / 使い方 (how-to.css) / コンテンツページ (pages.css) の 3 系統が同じこのファイルを読む。
⚠ トークンは各系統で名前が違う (--color-ink2 / --ink2 / ...) ので、ここでは .site-footer の中に
リテラルで持つ。値は src/style.css の @theme と同じ。変えるときは両方。
⚠ lang-ja / lang-en の span には display を当てない (hidden 属性で出し分けるため)。 */
/* ══ 共通の寸法 ══
左右の余白 (ガター) はヘッダー・本文・フッターで同じ値を使い、ロゴ・本文・フッターの左端を揃える。
本文の幅の規則 (scripts/pages.css の .wrap / src/how-to.css) も var(--site-gutter) を使う。 */
:root { --site-gutter: 20px; --site-header-h: 64px; }
@media (min-width: 768px) { :root { --site-gutter: 32px; } }
/* ══ ヘッダー ══
見た目は LP の旧ヘッダーと同じ値 (高さ 64px・コンテナ 1120px・ナビ 14px・黒い「入手する」)。
ナビは「使い方 / 更新情報 / FAQ」の 3 つなので、640px 以上でそのまま並べ、未満は のメニュー。 */
.site-header {
--sh-ink: #1F1F1F; --sh-ink2: #4E4F4F; --sh-mut: #666666; --sh-jet: #222222; --sh-line: #E3DFD9;
position: sticky; top: 0; z-index: 50;
background: rgba(252, 252, 253, .85); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--sh-line);
font-family: 'Noto Sans JP', sans-serif; line-height: 1.7; font-weight: 400;
}
.site-header a { color: inherit; text-decoration: none; transition: color .15s, opacity .15s; }
.site-header__in {
max-width: 1120px; margin: 0 auto; padding: 0 var(--site-gutter); height: var(--site-header-h);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header .site-header__logo {
font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 20px; letter-spacing: -.025em; color: var(--sh-jet);
}
.site-header__right { display: flex; align-items: center; gap: 12px; }
.site-header__nav { display: none; align-items: center; gap: 28px; font-size: 14px; color: var(--sh-ink2); }
.site-header__nav a:hover, .site-header__nav a[aria-current="page"],
.site-menu__panel a:hover, .site-menu__panel a[aria-current="page"] { color: var(--sh-ink); }
.site-header__lang {
display: flex; align-items: center; border: 1px solid var(--sh-line); border-radius: 999px;
overflow: hidden; font-size: 12px; user-select: none;
}
.site-header__lang button {
padding: 4px 10px; border: 0; background: none; font: inherit; color: var(--sh-mut); cursor: pointer;
transition: background-color .15s, color .15s;
}
.site-header__lang button.is-on { background: var(--sh-jet); color: #fff; }
.site-header .site-header__cta {
background: var(--sh-jet); color: #fff; font-weight: 600; font-size: 12px; padding: 8px 14px;
border-radius: 999px; white-space: nowrap;
}
.site-header .site-header__cta:hover { opacity: .9; }
/* スマホのメニュー ()。パネルは .site-header (sticky = 位置の基準) の直下に全幅で出す */
.site-menu__btn {
list-style: none; display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; margin-right: -4px; color: var(--sh-ink); cursor: pointer;
}
.site-menu__btn::-webkit-details-marker { display: none; }
.site-menu__panel {
position: absolute; left: 0; right: 0; top: 100%;
display: flex; flex-direction: column; font-size: 14px; color: var(--sh-ink2);
padding: 8px max(var(--site-gutter), calc(50% - 560px + var(--site-gutter)));
background: #FCFCFD; border-bottom: 1px solid var(--sh-line);
}
.site-menu__panel a { padding: 10px 0; }
.site-header a:focus-visible, .site-header button:focus-visible, .site-menu__btn:focus-visible {
outline: 2px solid #249361; outline-offset: 3px;
}
@media (min-width: 640px) {
.site-header__nav { display: flex; }
.site-header__right { gap: 24px; }
.site-menu { display: none; }
}
@media (min-width: 768px) {
.site-header .site-header__logo { font-size: 24px; }
.site-header .site-header__cta { font-size: 14px; padding: 10px 20px; }
}
/* 320〜360px の端末: 「ロゴ + 言語切り替え + 入手する + メニュー」を収める */
@media (max-width: 360px) {
.site-header__in, .site-header__right { gap: 8px; }
.site-header__lang button { padding: 4px 8px; }
.site-header .site-header__cta { padding: 8px 10px; }
}
/* タッチ端末: ナビ・ボタン・メニューに 44px の当たり判定 (見た目と並びは変えない)。
言語切り替えは丸い枠の overflow:hidden が当たり判定を切るので、タッチ端末だけ clip をやめ、ボタン自身に角丸を持たせる */
@media (pointer: coarse) {
.site-header__nav a, .site-header__cta, .site-header__lang button, .site-menu__btn, .site-menu__panel a { position: relative; }
.site-header__nav a::after, .site-header__cta::after, .site-header__lang button::after, .site-menu__btn::after, .site-menu__panel a::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
}
.site-header__lang { overflow: visible; }
.site-header__lang button[data-lang-btn="ja"] { border-radius: 999px 0 0 999px; }
.site-header__lang button[data-lang-btn="en"] { border-radius: 0 999px 999px 0; }
}
/* ══ フッター ══ */
.site-footer {
--sf-ink: #1F1F1F; --sf-ink2: #4E4F4F; --sf-mut: #666666; --sf-line: #E3DFD9;
border-top: 1px solid var(--sf-line);
/* 3 系統で body の行の高さ・書体が違う (LP は Tailwind の既定、コンテンツページは 1.8、使い方は 1.75 で別の書体) ので、
フッターだけ固定して、どのページでも同じ高さ・同じ見た目にする。書体は LP の --font-body と同じ。 */
font-family: 'Noto Sans JP', sans-serif; line-height: 1.7; font-weight: 400;
}
.site-footer__in { max-width: 1120px; margin: 0 auto; padding: 48px var(--site-gutter); text-align: center; }
.site-footer__links {
list-style: none; margin: 0 0 32px; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center;
font-size: 14px; color: var(--sf-ink2);
}
.site-footer a { color: inherit; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--sf-ink); }
.site-footer a[hidden] { display: none; }
.site-footer__dict { margin-bottom: 32px; }
.site-footer__label { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .22em; color: var(--sf-mut); }
.site-footer__dict-links {
display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center;
font-size: 14px; color: var(--sf-ink2);
}
.site-footer__copy { margin: 0; font-size: 12px; color: var(--sf-mut); }
/* タッチ端末: リンクに 44px の当たり判定 (見た目と並びは変えない) */
@media (pointer: coarse) {
.site-footer a { position: relative; display: inline-block; }
.site-footer a[hidden] { display: none; }
.site-footer a::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
}
}