/*
 * 全ページの土台: 要素の初期化、文字、ヘッダー（街並みの線）、スマホの下のタブ、フッター、本文の幅。
 * 色・大きさは css/tokens.css の変数だけを使う。
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-sakura);
  color: var(--c-ink);
  font-family: var(--font-main);
  font-size: var(--fs-md);
  line-height: 1.75;
  overflow-wrap: anywhere;
  overflow-x: clip; /* 端まで広げた写真の横並びで横スクロールが出ないように（hidden だと sticky が効かなくなる） */
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.4; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--c-rose-deep); outline-offset: 2px; }

.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

/* 件数など、桁が変わっても幅が動かない数字 */
.tabular { font-variant-numeric: tabular-nums; }

/* マップ（css/map-legacy/）は旧い土台（行間 1.5・白地）のまま作ってあるので、そちらに合わせる */
body.is-fullscreen { background: #fff; line-height: 1.5; }

.skip-link {
  position: absolute; left: var(--sp-2); top: -3rem; z-index: 50;
  background: var(--c-paper); padding: var(--sp-2) var(--sp-3); border: var(--rule);
}
.skip-link:focus { top: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== ヘッダー ===== */
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-4) 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.brand { display: flex; align-items: baseline; gap: var(--sp-2); line-height: 1.1; }
.brand__name { font-size: 1.375rem; font-weight: 500; letter-spacing: 0.12em; color: var(--c-rose-deep); }
.brand__sub { font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--c-ink-soft); }

.site-nav { display: none; }

/* 冊子の誌面の上端に引いてある線。家と木・校舎が線の上に立つ。
   絵の大きさは変数で持つ（PC と、トップの面 css/pages/home.sp.css の .cover .skyline が上書きする）:
   --sky-house-w / --sky-school-w = 家と木・校舎の幅、--sky-people-h = 人の高さ、--sky-gap = 絵と人のあいだ */
.skyline {
  --sky-house-w: 3.75rem; --sky-school-w: 3.1rem; --sky-people-h: 0.85rem; --sky-gap: 0.5rem;
  position: relative;
  max-width: var(--content-max);
  height: 1.75rem;
  margin: 0 auto;
  border-bottom: 2px solid var(--c-rose-pale);
  color: var(--c-rose-pale);
}
/* 1px 線に重ねる。小数の位置で描くと絵の下端がにじみ、線との間に隙間が見えるため（絵と線は同じ色） */
.skyline svg { position: absolute; bottom: -1px; }
.skyline__house { left: var(--sp-4); width: var(--sky-house-w); height: 1.3rem; }
.skyline__school { right: var(--sp-4); width: var(--sky-school-w); height: 1.2rem; }
/* 人のシルエット（トップだけ）。家と木・校舎の幅の外に置き、絵に重ねない（犬連れは家と木の右、2 人連れは校舎の左）。
   幅は viewBox の縦横比（2 人連れ 359×409、犬連れ 484×436）から */
.skyline__pair { right: calc(var(--sp-4) + var(--sky-school-w) + var(--sky-gap)); height: var(--sky-people-h); width: calc(var(--sky-people-h) * 359 / 409); }
.skyline__dogwalk { left: calc(var(--sp-4) + var(--sky-house-w) + var(--sky-gap)); height: var(--sky-people-h); width: calc(var(--sky-people-h) * 484 / 436); }

/* ===== スマホの下のタブ ===== */
body.has-nav { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--c-paper);
  border-top: var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar ul { display: flex; height: var(--tabbar-h); }
.tabbar li { flex: 1; }
.tabbar a {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  font-size: 0.6875rem; color: var(--c-rose-deep);
}
.tabbar__icon { width: 1.5rem; height: 1.5rem; }
.tabbar a[aria-current="page"] { background: var(--c-rose-deep); color: var(--c-paper); }

/* ===== 本文 ===== */
.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
}
.page--narrow { max-width: 48rem; }

.page-title {
  font-size: var(--fs-xl);
  color: var(--c-rose-deep);
  margin-bottom: var(--sp-4);
}
.lead { margin-bottom: var(--sp-5); }
.note { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.breadcrumb { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-2); }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover { color: var(--c-ink); }
  .site-footer__links a:hover { text-decoration: underline; }
  .site-nav a:not([aria-current="page"]):hover { color: var(--c-ink); background: var(--c-sakura-deep); }   /* 文字は一段濃く、地を一段（css/tokens.css の決まり） */
}

/* ===== フッター ===== */
.site-footer {
  margin-top: var(--sp-8);
  background: var(--c-rose-deep);
  color: var(--c-paper);
  font-size: var(--fs-sm);
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--sp-5);
}
.site-footer__title { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
/* 住所の「学生会館206号室」が「学生会／館206号室」で折れていた（2026-11-08）。語のまとまりで止める */
.site-footer__nb { white-space: nowrap; }
.site-footer__links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sp-2) var(--sp-5); }
/* 下線はいつもは引かない（全部に線があって詰まって見えた。2026-11-08）。PC のホバーとキーボードの focus でだけ引く */
.site-footer__links a { display: inline-block; padding: var(--sp-1) 0; text-decoration-color: rgb(255 255 255 / 0.6); text-underline-offset: 4px; }
.site-footer__links a:focus-visible { text-decoration: underline; }
.site-footer__copy { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-xs); opacity: 0.85; }
/* 下のタブ（.tabbar）が出ている幅では、タブと同じ 5 つ（ホーム・探す・マップ・クーポン・お気に入り）を出さない。
   タブと同じ濃いローズで続いていて、どちらがどちらか分かりにくかった（2026-11-09）。
   幅の条件は .tabbar を消す PC の min-width: 1024px のちょうど裏返し（どちらにも無い幅を作らない） */
@media not all and (min-width: 1024px) {
  .site-footer__tab { display: none; }
}
.at::before { content: "@"; }
.site-footer :focus-visible { outline-color: var(--c-paper); }

/* ===== PC ===== */
@media (min-width: 1024px) {
  body.has-nav { padding-bottom: 0; }
  .tabbar { display: none; }

  /* PC はロゴとメニューの帯を画面の上に固定する（ユーザー 2026-11-10。長いページの途中から他のページへ行けるように。スマホは下のタブがあるので固定しない）。
     sticky は親の箱の中でしか効かないので、.site-header の箱を display: contents で消し、帯（__inner）と街並みの線を body の直の子にする。
     街並みの線はそのまま流れて消え、帯だけ残る。帯の地は ::before で画面の端から端まで敷く（帯の本体は 72rem まで） */
  :root { --header-h: 4.25rem; }
  .site-header { display: contents; }
  .site-header__inner {
    position: sticky; top: 0; z-index: 35;
    justify-content: space-between; align-items: center;
    min-height: var(--header-h); padding: var(--sp-2) var(--sp-4);
  }
  .site-header__inner::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    background: var(--c-sakura);
  }
  .brand { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .brand__name { font-size: 1.875rem; }

  .site-nav { display: block; }
  .site-nav ul { display: flex; gap: var(--sp-1); }
  /* 今いるページを強く（ユーザー 2026-11-10）: ほかの項目は薄い字（ink-soft）、今いるページだけ濃いローズの字に太い下線。
     それまでは全部が濃いローズで下線だけ違い、弱かった。濃いローズの丸い帯（スマホのタブと同じ）も試したが「ださい」で戻した */
  .site-nav a {
    display: block; padding: var(--sp-1) var(--sp-3) var(--sp-2);
    color: var(--c-ink-soft);
    border-bottom: 3px solid transparent;
    border-radius: 0.25rem 0.25rem 0 0;
  }
  .site-nav a[aria-current="page"] { color: var(--c-rose-deep); font-weight: 500; border-bottom-color: var(--c-rose-deep); }

  .skyline { height: 2.75rem; --sky-house-w: 6rem; --sky-school-w: 5rem; --sky-people-h: 1.35rem; --sky-gap: 0.75rem; }
  .skyline__house { height: 2.1rem; }
  .skyline__school { height: 1.9rem; }

  .page { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}