/* ============================================================ site.css — 首都圏私立中学DB 色・寸法・書体は tokens.css の変数だけを使う。生の値をここに書かない。 トーンは （墨＋淡青）を前提にしている。 中学受験の検討は不安を伴う判断なので、2024年版の黒ベタ＋黄より 落ち着く側を土台にし、黄（--c-accent）は送客CTAだけに残す。 ============================================================ */ /* ---- 土台 -------------------------------------------------- */ body { background: var(--c-surface); } a { color: var(--c-blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- マストヘッド ------------------------------------------ */ .site-header { background: var(--c-ground); color: var(--c-ground-ink); border-bottom: 3px solid var(--c-ink); } .hdr-wrap { max-width: var(--content-max); margin: 0 auto; padding: var(--s-4) var(--s-5); display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; } .site-title { font-size: var(--t-h1); font-weight: 900; letter-spacing: var(--ls-head); } .site-title a { color: var(--c-ground-ink); } .site-title a:hover { text-decoration: none; color: var(--c-accent); } .site-tagline { font-size: var(--t-small); color: var(--c-ground-mute); } .hdr-spacer { flex: 1 1 auto; } .hdr-link { font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ground-mute); border-bottom: 1px solid var(--c-ground-line); padding-bottom: 2px; } .hdr-link:hover { color: var(--c-ground-ink); border-color: var(--c-ground-ink); text-decoration: none; } /* ---- レイアウト -------------------------------------------- */ .main-content { max-width: var(--content-max); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8); } @media (min-width: 900px) { .main-content { padding: var(--s-6) var(--s-5) var(--s-8); } } .breadcrumb { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--s-2); font-size: var(--t-label); color: var(--c-mute); margin-bottom: var(--s-4); white-space: nowrap; -webkit-overflow-scrolling: touch; } .breadcrumb a { color: var(--c-mute); border-bottom: var(--rule-dot); } .breadcrumb a:hover { color: var(--c-ink); text-decoration: none; } .breadcrumb .sep { color: var(--c-line); } .page-h1 { font-size: var(--t-h1); font-weight: 900; color: var(--c-ink); letter-spacing: var(--ls-head); line-height: var(--lh-head); margin: 0 0 var(--s-2); } .page-lead { font-size: var(--t-small); color: var(--c-mute); line-height: 1.9; margin: 0 0 var(--s-5); max-width: 66ch; } /* セクション見出しは「大きくする」のではなく「地を敷く」（原典の作法） */ .section-title { display: inline-block; background: var(--c-ink); color: var(--c-paper); font-size: var(--t-h3); font-weight: 700; letter-spacing: var(--ls-head); padding: var(--s-1) var(--s-3); border-radius: var(--r-1); margin: var(--s-6) 0 var(--s-3); } .main-content > .section-title:first-of-type { margin-top: var(--s-2); } /* ---- 絞り込み ---------------------------------------------- */ .pref-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); } .chip { display: inline-flex; align-items: baseline; gap: var(--s-1); padding: var(--s-2) var(--s-3); min-height: 40px; background: var(--c-paper); border: var(--bd); border-radius: var(--r-pill); font-size: var(--t-small); color: var(--c-body); } .chip:hover { border-color: var(--c-ink); text-decoration: none; } .chip.active { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); } .chip .n { font-family: var(--f-num); font-weight: 600; font-size: var(--t-label); color: var(--c-mute); } .chip.active .n { color: var(--c-ground-mute); } .filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); padding: var(--s-3); margin-bottom: var(--s-5); } .filter-bar select, .filter-bar input[type="text"] { min-height: 44px; padding: 0 var(--s-3); font-family: var(--f-sans); font-size: var(--t-body); color: var(--c-body); background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); } .filter-bar input[type="text"] { flex: 1 1 12rem; min-width: 0; } .filter-bar button { min-height: 44px; padding: 0 var(--s-5); font-family: var(--f-sans); font-size: var(--t-body); font-weight: 700; color: var(--c-paper); background: var(--c-ink); border: 1px solid var(--c-ink); border-radius: var(--r-1); cursor: pointer; } .filter-bar button:hover { background: var(--c-body); } .result-count { font-size: var(--t-small); color: var(--c-mute); margin-bottom: var(--s-3); } .result-count strong { font-family: var(--f-num); font-size: var(--t-h2); color: var(--c-ink); } /* ---- 学校カード -------------------------------------------- */ .school-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } @media (min-width: 620px) { .school-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .school-grid { grid-template-columns: repeat(3, 1fr); } } .c-school { background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } /* カード全面をクリック可能にする。 校名リンクの擬似要素をカード全体まで伸ばす（stretched link）。 リンクのテキストは校名のままなので、読み上げは「麻布中学校 リンク」で変わらない。 カード内に他のリンクを足すときは、そのリンクに position:relative と z-index:1 を与えないと、この面に飲まれてクリックできなくなる。 */ .c-school { position: relative; cursor: pointer; transition: border-color .12s, background .12s; } .c-school__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .c-school:hover { border-color: var(--c-ink); background: #FCFCFB; } .c-school:focus-within { border-color: var(--c-ink); } .c-school__name a:focus-visible::after { outline: 2px solid var(--c-blue); outline-offset: 2px; } .c-school__name a { text-decoration: none; } .c-school:hover .c-school__name a { text-decoration: underline; } .c-school__title { min-width: 0; } .c-school__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); } .c-school__name { font-size: var(--t-h3); font-weight: 700; line-height: var(--lh-head); margin: 0; } .c-school__name a { color: var(--c-ink); } .c-school__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--c-mute); } .c-school__foot { display: flex; flex-wrap: wrap; gap: var(--s-3); border-top: var(--rule-dot); padding-top: var(--s-2); font-size: var(--t-small); color: var(--c-mute); } .c-school__foot .v { font-family: var(--f-num); font-weight: 600; color: var(--c-body); } /* ---- 難易度ティア ------------------------------------------ 模試の偏差値そのものは掲載しない。4段階の目安だけを出す。 */ .tier { display: inline-block; min-width: 1.9em; text-align: center; font-family: var(--f-disp); font-weight: 800; font-size: var(--t-h3); letter-spacing: 0; line-height: 1.5; padding: 0 var(--s-2); border-radius: var(--r-1); border: 1px solid currentColor; } .tier-S { color: var(--c-paper); background: var(--c-ink); border-color: var(--c-ink); } .tier-A { color: var(--c-cool-mute); background: var(--c-cool); border-color: var(--c-cool); } .tier-B { color: var(--c-body); background: var(--c-surface); border-color: var(--c-line); } .tier-C { color: var(--c-mute); background: var(--c-paper); border-color: var(--c-line); } .tier-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; } .tier-cap { font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--c-mute); } .tier-block { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); } .tier-desc { font-size: var(--t-small); color: var(--c-mute); } /* ---- 校種バッジ -------------------------------------------- ベタ塗りの高彩度をやめ、淡面＋濃文字にする。一覧に何十個も並ぶため。 */ .badge { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.04em; padding: 2px var(--s-2); border-radius: var(--r-1); border: 1px solid transparent; } .badge-boys { background: #E4EDF6; color: #1F4E79; border-color: #C6D9EA; } .badge-girls { background: #F5E9EE; color: #7A3B56; border-color: #E6CFD8; } .badge-coed { background: #E7EFE9; color: #2C5F45; border-color: #CBDED2; } /* ---- 学校詳細 ---------------------------------------------- */ .school-hero { background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); padding: var(--s-5); margin-bottom: var(--s-5); } .school-hero h1 { font-size: var(--t-h1); font-weight: 900; color: var(--c-ink); line-height: var(--lh-head); margin: 0 0 var(--s-2); } .school-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--c-mute); } .detail-grid { background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); overflow: hidden; } .detail-row { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: var(--rule-dot); font-size: var(--t-body); } .detail-row:last-child { border-bottom: 0; } .detail-label { flex: 0 0 8.5em; color: var(--c-mute); font-size: var(--t-small); } .detail-value { flex: 1 1 auto; color: var(--c-body); min-width: 0; overflow-wrap: anywhere; } .detail-value .num { font-family: var(--f-num); font-weight: 600; } .official-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--s-4); padding: 0 var(--s-5); font-size: var(--t-body); font-weight: 700; color: var(--c-ink); background: var(--c-paper); border: 1.5px solid var(--c-ink); border-radius: var(--r-1); } .official-btn:hover { background: var(--c-ink); color: var(--c-paper); text-decoration: none; } .source-note { font-size: var(--t-label); color: var(--c-mute); line-height: 1.8; margin: var(--s-2) 0 0; } /* ---- 更新情報 ---------------------------------------------- */ .update-item { background: var(--c-paper); border: var(--bd); border-top: 0; padding: var(--s-3) var(--s-4); } .update-item:first-of-type { border-top: var(--bd); border-radius: var(--r-1) var(--r-1) 0 0; } .update-item:last-of-type { border-radius: 0 0 var(--r-1) var(--r-1); } .update-head { display: flex; gap: var(--s-2); align-items: center; margin-bottom: var(--s-1); } .update-date { font-family: var(--f-num); font-size: var(--t-label); color: var(--c-mute); } .update-cat { font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-mute); border: 1px solid var(--c-line); border-radius: var(--r-1); padding: 0 var(--s-1); } .update-title { font-size: var(--t-small); line-height: 1.7; color: var(--c-body); } /* ---- 表 ---------------------------------------------------- */ .scroll-table { overflow-x: auto; background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); } .scroll-table table { border-collapse: collapse; width: 100%; font-size: var(--t-small); } .scroll-table th { background: var(--c-surface); color: var(--c-ink); font-weight: 700; text-align: left; padding: var(--s-2) var(--s-3); white-space: nowrap; border-bottom: var(--bd-ink); } .scroll-table td { padding: var(--s-2) var(--s-3); border-bottom: var(--rule-dot); font-family: var(--f-num); } .scroll-table td:first-child { font-family: var(--f-sans); white-space: nowrap; } /* ---- 汎用 -------------------------------------------------- */ .back-link { display: inline-block; margin-bottom: var(--s-4); font-size: var(--t-small); color: var(--c-mute); } .back-link:hover { color: var(--c-ink); } .empty { background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); padding: var(--s-6); text-align: center; color: var(--c-mute); } .site-footer { background: var(--c-ground); color: var(--c-ground-mute); margin-top: var(--s-8); padding: var(--s-6) var(--s-4); } .footer-wrap { max-width: var(--content-max); margin: 0 auto; font-size: var(--t-label); line-height: 1.9; } .footer-wrap a { color: var(--c-ground-mute); border-bottom: 1px solid var(--c-ground-line); } .footer-wrap a:hover { color: var(--c-ground-ink); text-decoration: none; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-3); } :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; } /* ---- 狭い画面 ---------------------------------------------- ラベル幅を固定したままだと、iPhone SE 幅で値の側が潰れる。 360〜480px では縦積みに切り替える。 */ @media (max-width: 480px) { .detail-row { flex-direction: column; gap: 2px; padding: var(--s-3); } .detail-label { flex: none; } .school-hero { padding: var(--s-4); } .main-content { padding: var(--s-4) var(--s-3) var(--s-7); } .hdr-wrap { padding: var(--s-3) var(--s-4); } .site-title { font-size: var(--t-h2); } } /* ---- ページ送り -------------------------------------------- */ .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); } .pager__nums { display: flex; flex-wrap: wrap; gap: var(--s-1); } .pager__num, .pager__step, .pager__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-3); font-family: var(--f-num); font-size: var(--t-small); font-weight: 600; color: var(--c-body); background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); } .pager__step { font-family: var(--f-sans); } .pager__num:hover, .pager__step:hover { border-color: var(--c-ink); text-decoration: none; } .pager__num.is-current { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); } .pager__gap { border: 0; background: none; color: var(--c-mute); min-width: 0; padding: 0 var(--s-1); } .pager__step.is-off { color: var(--c-line); border-color: var(--c-line); } .page-h1__sub { font-size: var(--t-small); font-weight: 400; color: var(--c-mute); margin-left: var(--s-2); } /* ---- 規約・運営者情報などの文章ページ ---------------------- */ .prose { background: var(--c-paper); border: var(--bd); border-radius: var(--r-1); padding: var(--s-5); max-width: 70ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-body); } .prose > *:first-child { margin-top: 0; } .prose > *:last-child { margin-bottom: 0; } .prose h2 { font-size: var(--t-h3); font-weight: 700; color: var(--c-ink); border-left: 4px solid var(--c-ink); padding-left: var(--s-3); margin: var(--s-6) 0 var(--s-3); } .prose p { margin: 0 0 var(--s-4); } .prose ul { margin: 0 0 var(--s-4); padding-left: 1.4em; } .prose li { margin-bottom: var(--s-2); } .prose .scroll-table { margin-bottom: var(--s-4); border-radius: 0; } .prose .source-note { margin-top: var(--s-2); } .kv { border-collapse: collapse; width: 100%; margin: 0 0 var(--s-4); font-size: var(--t-small); } .kv th, .kv td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--rule-dot); vertical-align: top; } .kv th { width: 8em; color: var(--c-mute); font-weight: 500; white-space: nowrap; } @media (max-width: 480px) { .prose { padding: var(--s-4); } .kv th, .kv td { display: block; width: auto; border-bottom: 0; padding: var(--s-1) 0; } .kv tr { display: block; border-bottom: var(--rule-dot); padding: var(--s-2) 0; } } .footer-operator { margin-top: var(--s-3); color: var(--c-ground-ink); } /* ---- 送客CTA ------------------------------------------------ 全面を塗らない。左端の4px帯だけをアクセント色にして、 「1画面に強い面は1つ」という原則を崩さない。 暖色（--c-accent / --c-red）はサイト内でここだけに使う。 */ .cta { background: var(--c-paper); border: var(--bd); border-left: 4px solid var(--c-red); border-radius: var(--r-1); padding: var(--s-4) var(--s-5); margin: var(--s-6) 0; } .cta__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); } .cta__pr { flex: 0 0 auto; font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); color: var(--c-ink); background: var(--c-accent); padding: 2px var(--s-2); border-radius: var(--r-1); } .cta__title { font-size: var(--t-h3); font-weight: 700; color: var(--c-ink); margin: 0; } .cta__lead { font-size: var(--t-small); color: var(--c-body); line-height: 1.85; margin: 0 0 var(--s-4); } .cta__list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); } .cta__btn { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; min-height: 44px; padding: var(--s-2) var(--s-4); border: var(--bd); border-radius: var(--r-1); background: var(--c-paper); color: var(--c-ink); } .cta__btn:hover { border-color: var(--c-ink); background: var(--c-surface); text-decoration: none; } .cta__name { font-weight: 700; font-size: var(--t-body); } .cta__desc { font-size: var(--t-small); color: var(--c-mute); } .cta__note { font-size: var(--t-label); color: var(--c-mute); line-height: 1.8; margin: 0; } @media (max-width: 480px) { .cta { padding: var(--s-4); } } /* 広告主の掲載条件により、広告を含むページはファーストビューでそれが分かる必要がある。 CTA内のPRバッジだけではスクロールしないと見えないため、ページ冒頭にも置く。 */ .pr-banner { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--c-body); background: var(--c-pr-bg, #FBF6E9); border: 1px solid var(--c-line); border-radius: var(--r-1); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); } /* ASPが提供する広告主の文言。改変せず出すため、改行をそのまま活かす */ .cta__adtext { white-space: pre-line; font-size: var(--t-small); color: var(--c-body); line-height: 1.8; margin: var(--s-2) 0 0; padding-left: var(--s-3); border-left: 2px solid var(--c-line); } /* ---- ファセットページ -------------------------------------- */ .facet-summary { background: var(--c-paper); border: var(--bd); border-left: 3px solid var(--c-navy); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); font-size: var(--t-small); line-height: 1.9; } .facet-summary p { margin: 0; } .facet-summary strong { font-family: var(--f-num); font-size: var(--t-h3); color: var(--c-ink); } .facet-summary .num { font-family: var(--f-num); font-weight: 600; } .facet-summary__sub { color: var(--c-mute); margin-top: var(--s-1) !important; } .facet-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }