/* ===== Top Hero / Heading ===== */
.page-hero{
  background:#fff;
  border:1px solid var(--gray-300);
  /* border-radius:12px; */
  padding:1rem 1rem;
  box-shadow:var(--shadow);
  text-align:center;
  margin:0 0 1rem;
  position:relative;
  isolation:isolate;
  z-index:0;
}
@media (min-width:720px){
  .page-hero{ padding:1.25rem 2rem; margin:0 0 1.25rem; }
}
.page-title{
  margin:0;
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--gray-900);
}
@media (min-width:720px){
  .page-title{ font-size:1.6rem; }
}
.page-subtitle{
  margin:.35rem 0 0;
  font-size:.92rem;
  color:var(--gray-700);
}

/* ===== Tabs: responsive compact sizing ===== */
/* 共通トークン */
:root{
  --tab-gap: 12px;
  --tab-pad-y: 8px;
  --tab-pad-x: 18px;
  --tab-font: .9rem;
}

/* ベース（PC〜タブレット）：全タブに適用 */
nav.tabs-period,
nav.tabs-age,
nav.tabs-newbie{
  gap: var(--tab-gap);
}
nav.tabs-period a,
nav.tabs-age a,
nav.tabs-newbie a{
  padding: var(--tab-pad-y) var(--tab-pad-x);
  font-size: var(--tab-font);
  line-height:1;
}

/* タブレット未満 */
@media (max-width:860px){
  :root{
    --tab-gap: 10px;
    --tab-pad-y: 7px;
    --tab-pad-x: 14px;
    --tab-font: .88rem;
  }
}

/* スマホ（〜540px） */
@media (max-width:540px){
  :root{
    --tab-gap: 8px;
    --tab-pad-y: 6px;
    --tab-pad-x: 12px;
    --tab-font: .84rem;
  }
  nav.tabs-period a,
  nav.tabs-age a,
  nav.tabs-newbie a{
    font-size:clamp(.78rem, 2.5vw + .6rem, .84rem);
  }
}

/* 極小端末（〜360px） */
@media (max-width:360px){
  :root{
    --tab-gap: 6px;
    --tab-pad-y: 5px;
    --tab-pad-x: 10px;
  }
  nav.tabs-period a,
  nav.tabs-age a,
  nav.tabs-newbie a{
    letter-spacing:.01em;
    white-space:nowrap;
  }
  nav.tabs-period,
  nav.tabs-age,
  nav.tabs-newbie{
    justify-content:center;
    padding:0 .25rem;
  }
}

/* --- Tabs (見た目共通) --- */
nav.tabs,
nav.tabs-period,
nav.tabs-age,
nav.tabs-newbie{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:.75rem 0 1.25rem;
  flex-wrap:wrap;
}
nav.tabs a,
nav.tabs-period a,
nav.tabs-age a,
nav.tabs-newbie a{
  flex:0 0 auto;
  border-radius:999px;
  background:#fff;
  border:2px solid var(--pink-dark);
  font-weight:600;
  color:var(--pink-dark);
  box-shadow:var(--shadow);
  transition:all .2s ease;
  text-decoration:none;
}
nav.tabs a:hover,
nav.tabs-period a:hover,
nav.tabs-age a:hover,
nav.tabs-newbie a:hover{
  transform:translateY(-2px);
  text-decoration:none;
}
nav.tabs a.active,
nav.tabs-period a.active,
nav.tabs-age a.active,
nav.tabs-newbie a.active{
  background:var(--pink-dark);
  color:#fff;
  border-color:var(--pink-dark);
  box-shadow:0 4px 10px rgba(229,154,191,.3);
}

/* 新人タブ：微調整(任意) */
nav.tabs-newbie{
  /* margin-top:.75rem;
  margin-bottom:.75rem; */
  margin:.75rem 0 1.25rem;
}