@charset "utf-8"; /* ============================================================ 2026年版 ヘッダー／グローバルナビ 既存CSS(style.css等)には依存しない。接頭辞 sa- で名前空間を分離。 ============================================================ */ .sa-header,.sa-header *{box-sizing:border-box;} :root{ --sa-h-bg:#fff; --sa-h-ink:#1d1d20; --sa-h-sub:#6b6862; --sa-h-line:#e5e1d8; --sa-h-accent:#ff5703; /* 既存ロゴのオレンジ */ --sa-h-accent-dark:#e04d02; --sa-h-top:64px; /* 1段目：ロゴと各種ボタン */ --sa-h-bottom:46px; /* 2段目：グローバルナビ */ --sa-h-compact:58px; /* スクロール時の1段表示の高さ */ /* 本文コンテナの中身と同じ幅。 max-width に指定するときは左右の padding 20px を足すこと。 足さないと中身が1040pxになり、本文（1080px）と左右20pxずれる。 2026-09-18 に実測で発覚：1400px幅のときヘッダーが 180..1220、 本文が 160..1240 だった。 */ --sa-h-width:1080px; --sa-h-height-sp:60px; } /* キーボード操作時だけ見えるスキップリンク */ .sa-skip{position:absolute;left:-9999px;top:0;z-index:1001;background:var(--sa-h-accent);color:#fff; padding:10px 16px;text-decoration:none;font-size:14px;} .sa-skip:focus{left:0;} .sa-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--sa-h-bg); border-bottom:1px solid var(--sa-h-line);} .sa-header__spacer{height:calc(var(--sa-h-top) + var(--sa-h-bottom));} .sa-header__inner{max-width:calc(var(--sa-h-width) + 40px);margin:0 auto;padding:0 20px; display:flex;align-items:center;gap:20px;} /* ロゴ・ボタン・ナビを1コンテナに入れ、flex-wrap で段数を切り替える。 通常 … ナビが flex-basis:100% で折り返し、2段になる 縮小 … .is-compact でナビも同じ行に入り、1段になる 1段に常時詰めると実測で140pxはみ出し、管理画面でメニュー名を変えた途端に崩れるため、 初期表示は2段にして余裕を持たせている。 */ .sa-header__inner{flex-wrap:wrap;row-gap:0;} .sa-brand{height:var(--sa-h-top);} .sa-header__actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0; height:var(--sa-h-top);} .sa-nav{flex:0 0 100%;border-top:1px solid var(--sa-h-line);} /* ---- スクロール時の1段表示 ---- */ .sa-header.is-compact .sa-header__inner{flex-wrap:nowrap;} .sa-header.is-compact .sa-brand{height:var(--sa-h-compact);} .sa-header.is-compact .sa-brand__logo{width:34px;height:34px;} /* 縮小時はロゴマークだけにする（2026-09-19）。 1段に入れるには ロゴ285 + ナビ631 + ボタン166 + 余白 で 1098px 必要だが、 ヘッダーの中身は 1080px までしか使えず、18px 足りずに 「会社情報」がお問い合わせボタンの下に潜り込んでいた。 画面をいくら広げても max-width で頭打ちになるので、幅では解決しない。 社名を隠すと約240px空き、メニュー名を多少変えても崩れない余裕ができる。 社名は上にスクロールを戻せばすぐ出る。 */ .sa-header.is-compact .sa-brand__text{display:none;} .sa-header.is-compact .sa-nav{flex:0 1 auto;order:1;border-top:0;margin-left:16px;width:auto;} .sa-header.is-compact .sa-header__actions{order:2;height:var(--sa-h-compact); /* 保険：メニュー名が長くなってはみ出しても、ボタンだけは押せる状態を保つ */ position:relative;z-index:2;background:var(--sa-h-bg);} .sa-header.is-compact .sa-nav__link{height:var(--sa-h-compact);padding:0 13px;font-size:13.5px;} .sa-header.is-compact .sa-nav__item{border:0;} /* 項目の幅をそろえたので（下の「PC：上の段の項目の幅をそろえる」）、1段表示のメニューは約735px要る。 PCでいちばん狭い 1001〜1060px だと、お問い合わせボタンまで 20px しか残らず、押し縮められて幅が不ぞろいになる。 その帯だけ左右の余白を詰めて、そろえたまま収める。 */ @media (min-width:1001px) and (max-width:1060px){ .sa-header.is-compact .sa-nav__link{padding:0 8px;} } /* 1段に収めるため、縮小時は会員ログインを隠す。上へ戻せば再表示される */ .sa-header.is-compact .sa-btn--ghost{display:none;} .sa-header.is-compact .sa-panel{top:var(--sa-h-compact);} /* 高さが変わってもガタつかないよう、余白は最大高さのまま固定する */ .sa-header,.sa-brand,.sa-header__actions,.sa-nav__link{transition:height .18s ease;} /* ---- ロゴ ---- */ .sa-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;} .sa-brand__logo{display:block;width:44px;height:44px;flex-shrink:0;} .sa-brand__text{display:flex;flex-direction:column;line-height:1.25;} .sa-brand__name{font-size:17px;font-weight:700;color:var(--sa-h-ink);letter-spacing:.01em;} .sa-brand__sub{font-size:11px;color:var(--sa-h-sub);letter-spacing:.02em;margin-top:2px;} /* ---- ナビ ---- */ .sa-nav{display:flex;align-items:center;gap:16px;min-width:0;width:100%;} /* 項目の間は区切り線だけ（gap があると、マウスを乗せたときの色が区切り線から 4px ずれて見えた。2026-10-13） */ .sa-nav__list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;} .sa-nav__item{position:static;border-right:1px solid var(--sa-h-line);} .sa-nav__item:first-child{border-left:1px solid var(--sa-h-line);} /* * PC：上の段の項目の幅をそろえる（2026-10-22 高木さんの指摘）。 * 文字数に応じて 107〜163px とバラバラだった。いちばん長い項目の幅に全部をそろえ、文字は中央に置く。 * 列の数は決め打ちにしない（WPの「メニュー」で項目を足し引きしても崩れないように grid-auto-flow:column）。 * スマホのドロワー（縦並び）は下の @media (max-width:1000px) のまま。 */ @media not all and (max-width:1000px){ .sa-nav__list{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;} .sa-nav__item > .sa-nav__link{display:flex;justify-content:center;width:100%;} } .sa-nav__link{display:inline-flex;align-items:center;gap:4px; font-size:14px;font-weight:600;color:var(--sa-h-ink);text-decoration:none; padding:0 18px;height:var(--sa-h-bottom);border-radius:0;background:none;border:0;cursor:pointer; font-family:inherit;line-height:1;white-space:nowrap;transition:background .15s,color .15s;} .sa-nav__link:hover{background:#f6f3ee;color:var(--sa-h-accent);} .sa-nav__link:focus-visible{outline:2px solid var(--sa-h-accent);outline-offset:2px;} .sa-nav__toggle[aria-expanded="true"]{background:#f6f3ee;color:var(--sa-h-accent);} .sa-nav__caret{width:10px;height:6px;transition:transform .2s;} .sa-nav__toggle[aria-expanded="true"] .sa-nav__caret{transform:rotate(180deg);} /* ---- メガメニュー ---- */ .sa-panel{position:absolute;left:0;right:0;top:calc(var(--sa-h-top) + var(--sa-h-bottom)); background:#fff;border-top:1px solid var(--sa-h-line);border-bottom:1px solid var(--sa-h-line); box-shadow:0 12px 28px rgba(0,0,0,.07);} .sa-panel[hidden]{display:none;} .sa-panel__inner{max-width:calc(var(--sa-h-width) + 40px);margin:0 auto;padding:26px 20px 30px;display:flex;gap:32px;} /* 「○○トップ」も教材のご案内などと同じ列（.sa-panel__col）に並べる。別枠だった .sa-panel__lead は廃止（2026-10-22） */ .sa-panel__cols{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 24px;align-items:start;} .sa-panel__head{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--sa-h-sub); letter-spacing:.04em;} .sa-panel__head a{color:var(--sa-h-ink);text-decoration:none;} .sa-panel__head a:hover{color:var(--sa-h-accent);} .sa-panel__links{list-style:none;margin:0;padding:0;} .sa-panel__links li{margin:0 0 4px;} .sa-panel__links a{display:block;font-size:14px;color:var(--sa-h-ink);text-decoration:none; padding:5px 8px;margin-left:-8px;border-radius:4px;transition:background .15s,color .15s;} .sa-panel__links a:hover{background:#f6f3ee;color:var(--sa-h-accent);} /* * 押せるものには全部「>」を付け、押せないものには付けない（2026-10-21 高木さんの指摘）。 * 見出しと同じ字面の項目が並んでいて、どれがリンクか分かりにくかった。 * グループ名（教材のご案内・講座のご案内・フォローシステム）もそれぞれの紹介ページへのリンクなので、 * 「>」付きの太字のリンクのままにする（灰色の見出しにすると、その3ページの入口が見えなくなる）。 * リンク先の無いグループ名だけは灰色の見出し（.sa-panel__head 自体の色）で、「>」は付かない。 */ .sa-panel__head a::before, .sa-panel__links a::before{content:">";content:">" / "";display:inline-block;margin-right:7px;font-weight:700; color:var(--sa-h-accent);transform:scaleX(.8);} .sa-panel__head a{display:inline-block;padding:5px 8px;margin-left:-8px;border-radius:4px;font-size:14px;letter-spacing:0;} .sa-panel__head a:hover{background:#f6f3ee;} .sa-panel__head{margin-bottom:4px;} /* 親テーマの button:hover / button:focus（濃い灰色の地）が、開いたメニュー名に効いて オレンジの文字が読めなくなっていた（クリックでボタンにフォーカスが移る Chrome など）。2026-10-08 */ .sa-header button.sa-nav__toggle:hover, .sa-header button.sa-nav__toggle:focus, .sa-header button.sa-nav__toggle:active{background:#f6f3ee;color:var(--sa-h-accent);box-shadow:none;} /* 上の段の「今いる区分」の下線（is-current）はPCだけ。スマホのドロワーでは出さない（下の「今いるページの印」） */ @media not all and (max-width:1000px){ .sa-header .sa-nav__item.is-current > button.sa-nav__toggle:hover, .sa-header .sa-nav__item.is-current > button.sa-nav__toggle:focus{box-shadow:inset 0 -3px 0 var(--sa-h-accent);} } .sa-header button.sa-burger:hover, .sa-header button.sa-burger:focus{background:none;} /* ---- 今いるページの印（2026-10-08） ---- */ .sa-panel a[aria-current="page"]{color:var(--sa-h-accent);background:#fbf3ec;font-weight:700;} /* * 上の段（グローバルメニュー本体）の「今いる区分」の印は、PCだけ（2026-10-22 高木さんの指摘）。 * スマホのドロワーはアコーディオンで、ページを移ると閉じてしまうので、上の段に印を付けても意味が薄い。 * 開いたメニューの中の今いるページ（上の .sa-panel a[aria-current]）は、スマホでもそのまま出す。 */ @media not all and (max-width:1000px){ .sa-nav__item.is-current > .sa-nav__link{color:var(--sa-h-accent);box-shadow:inset 0 -3px 0 var(--sa-h-accent);} } /* ---- 項目の少ないメニュー：項目の真下に小さく開く（2026-10-08） ---- */ .sa-nav__item.has-compact{position:relative;} .sa-panel--compact{top:100%;left:-1px;right:auto;min-width:240px;padding:8px; border:1px solid var(--sa-h-line);border-radius:0 0 8px 8px;} .sa-panel--compact .sa-panel__links li{margin:0;} .sa-panel--compact .sa-panel__links a{margin:0;padding:10px 14px;white-space:nowrap;} .sa-header.is-compact .sa-panel--compact{top:100%;} /* ---- ボタン ---- */ .sa-nav__actions{display:none;} /* PCでは1段目の .sa-header__actions を使う */ .sa-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700; text-decoration:none;padding:9px 13px;border-radius:6px;white-space:nowrap; transition:background .15s,color .15s,border-color .15s;} .sa-btn__icon{width:15px;height:15px;} .sa-btn--ghost{color:var(--sa-h-ink);border:1px solid var(--sa-h-line);background:#fff;} .sa-btn--ghost:hover{border-color:var(--sa-h-accent);color:var(--sa-h-accent);} .sa-btn--primary{color:#fff;background:var(--sa-h-accent);border:1px solid var(--sa-h-accent);} .sa-btn--primary:hover{background:var(--sa-h-accent-dark);border-color:var(--sa-h-accent-dark);} /* ---- ハンバーガー ---- */ .sa-burger{display:none;width:44px;height:44px;margin-left:auto;padding:0; background:none;border:0;cursor:pointer;position:relative;} .sa-burger span{position:absolute;left:11px;width:22px;height:2px;background:var(--sa-h-ink); border-radius:2px;transition:transform .25s,opacity .2s;} .sa-burger span:nth-child(1){top:15px;} .sa-burger span:nth-child(2){top:21px;} .sa-burger span:nth-child(3){top:27px;} .sa-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);} .sa-burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .sa-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} /* ============================================================ 1000px 以下：ドロワー ============================================================ */ @media screen and (max-width:1000px){ /* SPではロゴ行だけを残し、ナビはドロワーに格納する */ /* 本文の左右 padding も 20px なので合わせる */ .sa-header__inner{padding:0 20px;gap:0;flex-wrap:nowrap;} .sa-brand{height:var(--sa-h-height-sp);} .sa-header__spacer{height:var(--sa-h-height-sp);} /* 旧ヘッダー用の「body を56px下げる」（style.css）が残っていて、上の余白と二重になり ヘッダーの下に白い隙間が出ていた（2026-10-08）。このヘッダーがあるページでは打ち消す */ body:has(.sa-header){padding-top:0 !important;} .sa-header__actions{display:none;} .sa-nav__actions{display:flex;} .sa-brand__sub{display:none;} .sa-brand__name{font-size:15px;} .sa-brand__logo{width:36px;height:36px;} .sa-burger{display:block;} .sa-nav{position:fixed;top:var(--sa-h-height-sp);left:0;right:0;bottom:0;width:auto;flex:none;border-top:0; background:#fff;flex-direction:column;align-items:stretch;gap:0;margin:0; padding:8px 0 40px;overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateX(100%);transition:transform .25s ease;visibility:hidden;} .sa-nav.is-open{transform:translateX(0);visibility:visible;} .sa-nav__list{flex-direction:column;align-items:stretch;gap:0;} .sa-nav__item{border:0;border-bottom:1px solid var(--sa-h-line);} .sa-nav__item:first-child{border-left:0;} .sa-nav__link{width:100%;justify-content:space-between;padding:16px 20px;height:auto; font-size:15px;border-radius:0;} .sa-nav__link:hover{background:#faf8f5;} /* ドロワー内ではアコーディオン */ .sa-panel{position:static;border:0;box-shadow:none;background:#faf8f5;} .sa-panel__inner{display:block;padding:4px 20px 16px;max-width:none;} .sa-panel__cols{display:block;} .sa-panel__col{margin:0 0 14px;} .sa-panel__head{font-size:12px;margin-bottom:0;} .sa-panel__head a{padding:8px 0;margin:0;font-size:14px;} .sa-panel__head a:hover{background:none;} .sa-panel__links a{padding:8px 0;margin:0;font-size:14px;} .sa-panel__links a:hover{background:none;} .sa-panel--compact{min-width:0;padding:4px 20px 12px;border:0;border-radius:0;} .sa-panel--compact .sa-panel__links a{padding:8px 0;} /* 開いたメニューの中の今いるページは、色と太字で示す（「●」は「>」と重なるのでやめた。2026-10-21） */ .sa-panel a[aria-current="page"]{background:none;} .sa-nav__actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:20px;} .sa-btn{justify-content:center;padding:14px 16px;font-size:14px;} } /* 本文を隠さないための余白調整（旧テーマの固定ヘッダー分を打ち消す） */ body.sa-nav-open{overflow:hidden;} /* ------------------------------------------------------------ WPにログインしている時の管理バー対応 管理バーは position:fixed / top:0 で高さ32px（782px以下は46px）。 こちらのヘッダーも fixed / top:0 のため、そのままだと管理バーの下に潜って ロゴ行が隠れてしまう。管理バーの高さぶん下げる。 600px以下では管理バーが position:absolute になりスクロールで流れるため、 ヘッダーは top:0 のままでよい。 ------------------------------------------------------------ */ body.admin-bar .sa-header{ top:32px; } @media screen and (max-width:782px){ body.admin-bar .sa-header{ top:46px; } } @media screen and (max-width:600px){ body.admin-bar .sa-header{ top:0; } } /* ドロワーも同じぶん下げる（SPで管理バーに 隠れないように） */ @media screen and (max-width:1000px){ body.admin-bar .sa-nav{ top:calc(var(--sa-h-height-sp) + 46px); } } @media screen and (max-width:600px){ body.admin-bar .sa-nav{ top:var(--sa-h-height-sp); } } /* ================================================================== 訪問済みリンクの色つぶし 旧PHPページ（/schedule/ や加盟店一覧など）は、ヘッダーより前に /invidual/common/css/style.css を読み込んでいる。そこに a:visited{ color:#C09E62; } があり、詳細度が (0,0,1,1)=11。ヘッダー側のクラス指定は .sa-nav__link などで (0,0,1,0)=10 しかないので負ける。 結果、グローバルナビのうち「一度開いたことのある項目」だけが金色になる。 ドロップダウンを持つ項目は