@charset "utf-8";

/* =========================================
   Base / Tokens
========================================= */
:root{
  --page-max: 1440px;
  --header-h: 110px;
  --header-offset: 30px;
  --line: #c5c5c5;
  --text: #111;
  --muted:#666;
  --caution: #cc0000;
  --bg: #fff;
  --white: #fff;
  --green: #009944;
  --aqua-green: #28998b;
  --light-green: #99cc33;
  --dark-green: #669999;
  --pale-green: #f0f7f3;
  --hover: #28998b;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho", serif;
  --w-regular: 400;
  --w-bold: 600;
  --w-serif-body: 300;
  --w-serif-head: 600;
  --gap: 25px;
  --hover-duration: .3s;
  --hover-ease: ease;
  --drawer-ease: cubic-bezier(.22, 1, .36, 1);
  --drawer-dur: .75s;
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--header-offset));
}

body{
  margin: 0;
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
}

@media (max-width: 900px){
  body{ font-size: 15px; }
}
@media (max-width: 540px){
  body{ font-size: 14px; }
}

[hidden]{ display:none !important; }

.drawer{
  transform: translateX(105%);
  visibility: hidden;
  pointer-events: none;
}
html.is-drawer-open .drawer{
  visibility: visible;
  pointer-events: auto;
}
html.is-drawer-closing .drawer{
  visibility: visible;
}


/* =========================
404 page
========================= */
body.is-404 .page {
  min-height: auto;
}

body.is-404 #ctaBar,
body.is-404 .cta-bar {
  display: none !important;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-serif);
  font-weight: var(--w-serif-head);
  line-height: 1.25;
  margin-bottom: 0.7em;
}
h1{ font-size: 2.0em; }
h2{ font-size: 1.5em; }
h3{ font-size: 1.3em; }
h4{ font-size: 1.15em; }
h5{ font-size: 1.05em; }
h6{ font-size: 1.0em; }

/* リンク基本 */
a{
  color: var(--aqua-green);
  text-decoration: none;
  transition: color var(--hover-duration) var(--hover-ease);
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

img{
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* wrapper */
.page{
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--white);
  min-height: 100vh;
}

/* ボタン系：共通のhoverトランジション */
.btn,
.sub-nav li a,
.school-card .mini-btn,
.fv-menu__cta,
.cta-bar__btn{
  transition:
    background-color var(--hover-duration) var(--hover-ease),
    color var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease),
    opacity var(--hover-duration) var(--hover-ease),
    transform var(--hover-duration) var(--hover-ease);
}

/* =========================================
  Scrollbar-gutter（ガタつき対策）
  ※「常時both-edges」はやめる
========================================= */
@supports (scrollbar-gutter: stable){
  html.is-locked{
    scrollbar-gutter: stable;
  }
}

/* mainは固定ヘッダーとFV設計に任せる（ここでは触らない） */
main{ padding-top: 0; }

/* WP絵文字を画像扱いしない（shibuya_soroban用） */
.wp-content img.emoji,
.wp-content img.wp-smiley {
  max-width: none !important;
  width: 1em !important;
  height: 1em !important;
  display: inline !important;
  vertical-align: -0.1em;
  margin: 0 !important;
}