/* =============================================
   推専塾 共通スタイル — common.css
   caratt.jp インスパイア
   白基調・余白・細い罫線・静かな佇まい / 青は控えめなアクセント
   ============================================= */

/* =============================================
   リセット・ベース
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  color: #1a1a1a;
  line-height: 1.9;
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* =============================================
   デザイントークン
   ============================================= */
:root {
  /* ── テーマカラー（青ペンのインク） ── */
  --blue:       #2b5cc9;
  --blue-dark:  #1e46a3;
  --blue-mid:   #6d95e0;
  --blue-light: #e9f0fc;
  --blue-pale:  #f5f8fe;

  /* ── アクセント ── */
  --accent:       #e8a33d;
  --accent-dark:  #d18a1f;
  --accent-light: #faf3e5;

  /* ── 後方互換エイリアス ── */
  --navy:      var(--blue);
  --navy-dark: var(--blue-dark);
  --orange:    var(--accent);
  --gold:      var(--accent);
  --gold-pale: var(--accent-light);
  --blue-deep: #1c3a55;
  --ink:       #1a1a1a;
  --ink-soft:  #444444;
  --paper:     #ffffff;
  --paper-warm: var(--blue-pale);
  --cream:     var(--blue-pale);
  --hairline:      1px solid #e8e8e8;
  --hairline-gold: 1px solid var(--accent);
  --font-head:  'Noto Sans JP', sans-serif;
  --font-round: 'Noto Sans JP', sans-serif;
  --serif-ja: 'Noto Sans JP', sans-serif;
  --dots-blue: none;

  /* ── ニュートラル ── */
  --gray-50:   #fafafa;
  --gray-100:  #f0f0f0;
  --gray-200:  #e0e0e0;
  --gray-400:  #aaaaaa;
  --gray-600:  #555555;
  --text:      #1a1a1a;
  --white:     #ffffff;
  --line:      #06C755;

  /* ── フォント（英字ラベル＝手書き風） ── */
  --serif-en: 'Klee One', 'Noto Sans JP', cursive;

  /* ── シェイプ（控えめ）── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-full: 999px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.05);
  --shadow-md:  0 4px 20px rgba(0,0,0,.07);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.10);
  --transition: .35s cubic-bezier(.4,0,.2,1);

  /* ── レイアウト ── */
  --container: 1160px;
  --nav-h:     80px;
}

/* =============================================
   ユーティリティ
   ============================================= */
.u-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.u-section     { padding-block: 120px; }
.u-section-sm  { padding-block: 80px; }
.u-bg-cream    { background: var(--blue-pale); }
.u-bg-gray     { background: var(--gray-50); }

/* =============================================
   青ペン×ノート 共通パーツ
   ============================================= */

/* スマホでのみ効く改行（<br class="br-sp">）/ PCでのみ効く改行（<br class="br-pc">） */
.br-sp { display: none; }
@media (max-width: 768px) {
  .br-sp { display: inline; }
  .br-pc { display: none; }
}

/* 青マーカー（蛍光ペン風ハイライト） */
.u-marker {
  font-style: normal;
  background: linear-gradient(transparent 58%, rgba(120,180,255,.4) 58%, rgba(120,180,255,.4) 94%, transparent 94%);
  padding-inline: 2px;
}

/* セクション見出し：タブ型バッジ＋青罫線＋太ゴシック */
.sec-title { margin-bottom: 64px; }
.sec-title__badge {
  display: inline-block;
  font-family: 'Klee One', cursive;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--blue);
  background: var(--blue-light);
  padding: 5px 18px 4px;
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(43,92,201,.25);
  border-bottom: none;
  transform: translateY(1px);
}
.sec-title__ja {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--text);
  border-top: 2px solid rgba(43,92,201,.35);
  padding-top: 18px;
}

/* テープで留めた写真フレーム */
.np-photo {
  position: relative;
  background: #fff;
  padding: 12px 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(36,52,74,.1);
}
.np-photo::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 110px;
  height: 28px;
  background: rgba(150,190,255,.45);
  border-left: 1px dashed rgba(255,255,255,.8);
  border-right: 1px dashed rgba(255,255,255,.8);
  z-index: 2;
}
.np-photo img {
  width: 100%;
  border-radius: 2px;
}

/* 付箋 */
.sticky {
  padding: 22px 24px 20px;
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(36,52,74,.1);
  transform: rotate(-1.4deg);
  transition: transform .4s ease;
}
.sticky:nth-child(even) { transform: rotate(1.2deg); }
.sticky:hover { transform: rotate(0) translateY(-3px); }
.sticky--blue   { background: #e7f0ff; }
.sticky--yellow { background: #fff8c9; }
.sticky dt {
  font-family: 'Klee One', cursive;
  font-size: .8rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 4px;
}
.sticky--yellow dt { color: #b08a1e; }
.sticky dd {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
}

/* 青ペンのメモ書き */
.u-memo {
  font-family: 'Klee One', cursive;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--blue);
}

/* ノート罫線背景（セクション用） */
.u-bg-ruled {
  background:
    repeating-linear-gradient(to bottom, transparent 0 35px, rgba(43,92,201,.07) 35px 36px),
    var(--blue-pale);
}
/* 方眼紙背景 */
.u-bg-grid {
  background-image:
    linear-gradient(rgba(43,92,201,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,92,201,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* スクロールリビール */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.25,.46,.45,.94);
}
.js-reveal.is-shown {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================
   セクション見出し（旧スタイル・後方互換）
   ============================================= */
.sec-head { margin-bottom: 80px; }
.sec-head--center { text-align: center; }

.sec-head__en {
  display: block;
  font-family: var(--serif-en);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .12em;
  color: var(--blue);
  margin-bottom: 10px;
}
.sec-head__ja {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: .02em;
}
.sec-head__ja em {
  font-style: normal;
  color: var(--blue);
}
.sec-head__line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--blue);
  margin-top: 20px;
  opacity: .5;
}
.sec-head--center .sec-head__line { margin-inline: auto; }
.sec-head__sub {
  display: block;
  margin-top: 16px;
  font-size: .88rem;
  color: var(--gray-600);
  line-height: 1.9;
}

/* =============================================
   インライン見出し（大セリフ英語｜小さな日本語）
   ============================================= */
.sec-head-inline {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.sec-head-inline__en {
  font-family: var(--serif-en);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: .01em;
}
.sec-head-inline__bar {
  display: inline-block;
  width: 1px;
  height: 1.4em;
  background: var(--gray-400);
  flex-shrink: 0;
}
.sec-head-inline__ja {
  font-size: .78rem;
  color: var(--gray-400);
  letter-spacing: .14em;
}
@media (max-width: 768px) {
  .sec-head-inline { gap: 14px; }
  .sec-head-inline__ja { font-size: .7rem; letter-spacing: .08em; }
}

/* =============================================
   ボタン（thin border・角丸控えめ・フラット）
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 32px;
  height: 50px;
  border-radius: var(--radius-md);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .1em;
  cursor: pointer;
  transition: var(--transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn-gold {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-gold:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}
.btn-navy {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.btn-navy:hover { opacity: .82; }
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn-outline:hover { background: var(--text); color: #fff; }
.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.btn-outline-white:hover { background: #fff; color: var(--text); }
.btn-line {
  background: var(--line);
  color: #fff;
  border-color: var(--line);
}
.btn-line:hover { filter: brightness(1.08); }
.btn-arrow::after {
  content: '→';
  font-size: .85em;
  transition: transform var(--transition);
}
.btn-arrow:hover::after { transform: translateX(5px); }

/* =============================================
   ナビゲーション（白・細い下線ホバー）
   ============================================= */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
}
.site-nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  height: 100%;
  display: flex;
  align-items: center;
}

/* ロゴ */
.site-nav__logo {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 5px;
  margin-right: auto;
}
.site-nav__logo-img {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
}
.site-nav__logo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}
.site-nav__logo-main {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
}
.site-nav__logo-en {
  font-family: var(--serif-en);
  font-size: .65rem;
  letter-spacing: .22em;
  color: var(--gray-400);
  font-style: normal;
}

/* メニュー（hoverで細い下線） */
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
}
.site-nav__link {
  display: block;
  padding: 8px 16px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--gray-600);
  letter-spacing: .06em;
  position: relative;
  transition: color .2s;
  white-space: nowrap;
}
.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 16px; right: 16px;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.site-nav__link:hover { color: var(--text); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }
.site-nav__link.is-active { color: var(--text); font-weight: 600; }

/* CTAエリア */
.site-nav__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
}
.site-nav__cta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 38px;
  background: #fff;
  color: var(--line);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  transition: var(--transition);
}
.site-nav__cta-line:hover { background: var(--line); color: #fff; }
.site-nav__cta-line svg { width: 15px; height: 15px; flex-shrink: 0; }
.site-nav__cta-btn {
  display: flex;
  align-items: center;
  padding: 0 22px;
  height: 38px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  transition: background .2s;
}
.site-nav__cta-btn:hover { background: var(--blue-dark); }

/* ハンバーガー */
.site-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 16px;
}
.site-nav__hamburger span {
  display: block;
  height: 1px;
  background: var(--text);
  transition: var(--transition);
}
.site-nav__hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.site-nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ドロワー */
.site-nav__drawer {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--gray-100);
  padding: 24px;
  z-index: 99;
  box-shadow: var(--shadow-lg);
}
.site-nav__drawer.is-open { display: block; }
.site-nav__drawer-links { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.site-nav__drawer-links a {
  display: block;
  padding: 14px 4px;
  font-size: .9rem;
  color: var(--text);
  border-bottom: 1px solid var(--gray-100);
  letter-spacing: .04em;
  transition: color .2s;
}
.site-nav__drawer-links a:hover { color: var(--blue); }
.site-nav__drawer-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* =============================================
   ページ共通 CTA（各ページ末尾・静かな濃紺）
   ============================================= */
.common-cta {
  background: #17304a;
  padding-block: 120px;
  text-align: center;
}
.common-cta__en {
  display: block;
  font-family: var(--serif-en);
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}
.common-cta__ja {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 20px;
  letter-spacing: .02em;
}
.common-cta__body {
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: 44px;
  line-height: 2.1;
}
.common-cta__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.common-cta__note {
  margin-top: 28px;
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .06em;
}

/* =============================================
   ページヘッダー（下層ページ用）
   ============================================= */
.page-hero {
  background-color: var(--blue-pale);
  background-image:
    linear-gradient(rgba(43,92,201,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,92,201,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  padding-block: calc(var(--nav-h) + 64px) 72px;
  border-bottom: 1px solid var(--gray-200);
}
.page-hero__en {
  display: block;
  font-family: 'Klee One', cursive;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--blue);
  margin-bottom: 10px;
}
.page-hero__ja {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--text);
  letter-spacing: .03em;
}
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: .75rem;
  color: var(--gray-400);
}
.page-hero__breadcrumb a:hover { color: var(--blue); }

/* =============================================
   フッター
   ============================================= */
.site-footer { background: #1a2532; }
.site-footer__body {
  padding-block: 80px 56px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.site-footer__brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.site-footer__brand-en {
  font-family: var(--serif-en);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.3);
  margin-bottom: 20px;
  display: block;
}
.site-footer__brand-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  line-height: 2;
}
.site-footer__col-title {
  font-family: var(--serif-en);
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .16em;
  color: rgba(255,255,255,.35);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-footer__col-links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col-links a {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  transition: color .2s;
  letter-spacing: .02em;
}
.site-footer__col-links a:hover { color: #fff; }
.site-footer__info { display: flex; flex-direction: column; gap: 12px; }
.site-footer__info-row {
  display: flex;
  gap: 10px;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  line-height: 1.8;
}
.site-footer__info-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  color: var(--blue-mid);
}
.site-footer__info-icon svg { width: 100%; height: 100%; display: block; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer__copy { font-size: .7rem; color: rgba(255,255,255,.2); letter-spacing: .06em; }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a {
  font-size: .7rem;
  color: rgba(255,255,255,.2);
  transition: color .2s;
}
.site-footer__legal a:hover { color: rgba(255,255,255,.6); }

/* =============================================
   レスポンシブ
   ============================================= */
@media (max-width: 1024px) {
  .site-nav__menu { display: none; }
  .site-nav__cta  { display: none; }
  .site-nav__hamburger { display: flex; }
  .site-footer__body { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .u-wrap { padding-inline: 20px; }
  .u-section { padding-block: 80px; }

  /* 見出しをスマホ向けに縮小（不自然な折返し防止） */
  .sec-title { margin-bottom: 44px; }
  .sec-title__badge { font-size: .78rem; padding: 4px 14px 3px; }
  .sec-title__ja { font-size: 1.32rem; padding-top: 14px; line-height: 1.7; }

  /* PC向けの改行を解除して自然に折り返す */
  .common-cta__body br { display: none; }

  /* 付箋を小さめに */
  .sticky { padding: 16px 14px 13px; }
  .sticky dd { font-size: .88rem; letter-spacing: 0; }
  .site-nav__inner { padding-inline: 20px; }
  .site-nav__drawer { padding: 20px; }
  .sec-head { margin-bottom: 48px; }
  .common-cta { padding-block: 80px; }
  .site-footer__body { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
}