@charset "UTF-8";

/* =========================
   1. ROOT（デザインの共通ルール）
========================= */
:root {
/* --- パレット（色定義） --- */
--clr-brand-blue:  #005dac; /* 塾のブランドカラー（唯一のメイン） */
--clr-green-theme: #00a566; /* 理由・中学生等で使う緑（※サブカラー） */
--clr-pink-accent: #ff4d8d; /* アクセントピンク */
--clr-pink-elem:   #ff6297; /* 小学生コース用 */
--clr-blue-high:   #549fe1; /* 高校生コース用 */
--clr-white:       #ffffff;
--clr-black:       #333333;
--clr-gray-bg:     #f4f4f5;
--clr-pailylw-bg:  #fdfcbb;

/* ブランド・アクセント */
--color-brand:  var(--clr-brand-blue);
--color-accent: var(--clr-pink-accent);
--color-section-bg:   var(--clr-green-theme);
--color-section-text: var(--clr-white);

/* コース別役割 */
--color-elem: var(--clr-pink-elem);
--color-mid:  var(--clr-green-theme);
--color-high: var(--clr-blue-high);

/* ベース・テキスト */
--color-text:     var(--clr-black);
--color-text-rev: var(--clr-white);
--bg-body:        var(--clr-white);
--bg-section:     var(--clr-gray-bg);

/* ボタン */
--btn-send:var(--clr-green-theme);

/* サイズ辞書（rem基準） */
--fluid-base: clamp(0.75rem, 2.5vw, 1rem); /* 12px ~ 16px */

/* 文字サイズ辞書 (16pxベースのrem計算) */
--txt-09: clamp(0.5625rem, calc(var(--fluid-base) * 0.6), 0.75rem);   /* 9px ~ 12px */
--txt-10: clamp(0.625rem, calc(var(--fluid-base) * 0.65), 0.875rem);  /* 10px ~ 14px */
--txt-12: clamp(0.75rem, calc(var(--fluid-base) * 0.75), 1rem);       /* 12px ~ 16px */
--txt-14: clamp(0.875rem, calc(var(--fluid-base) * 0.85), 1.125rem);  /* 14px ~ 18px */
--txt-16: clamp(1rem, var(--fluid-base), 1.25rem);                    /* 16px ~ 20px */
--txt-18: clamp(1.125rem, calc(var(--fluid-base) * 1.15), 1.5rem);    /* 18px ~ 24px */
--txt-20: clamp(1.25rem, calc(var(--fluid-base) * 1.25), 1.75rem);    /* 20px ~ 28px */
--txt-24: clamp(1.5rem, calc(var(--fluid-base) * 1.5), 2rem);         /* 24px ~ 32px */
--txt-28: clamp(1.75rem, calc(var(--fluid-base) * 1.75), 2.25rem);    /* 28px ~ 36px */
--txt-32: clamp(2rem, calc(var(--fluid-base) * 2.0), 2.5rem);         /* 32px ~ 40px */
--txt-36: clamp(2.25rem, calc(var(--fluid-base) * 2.25), 2.75rem);    /* 36px ~ 44px */
--txt-40: clamp(2.5rem, calc(var(--fluid-base) * 2.5), 3rem);         /* 40px ~ 48px */
--txt-48: clamp(3rem, calc(var(--fluid-base) * 3.0), 3.5rem);         /* 48px ~ 56px */
--txt-60: clamp(3.75rem, calc(var(--fluid-base) * 3.75), 4rem);       /* 60px ~ 64px */
--txt-72: clamp(4.5rem, calc(var(--fluid-base) * 4.5), 4.5rem);       /* 72px */

/* 余白辞書 (16pxベースのrem) */
--sp-xs: clamp(0.25rem, 0.5vw, 0.5rem);
--sp-sm: clamp(0.5rem, 1vw, 1rem);
--sp-md: clamp(1rem, 2vw, 2rem);
--sp-lg: clamp(2rem, 4vw, 4rem);
--sp-xl: clamp(3rem, 6vw, 6rem);

/* 画像余白用の変数 */
--img-gap: 1.6rem;
}

/* =========================
   2. RESET & BASE
========================= */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
html {
  font-size:100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}
body {
  min-height: 100%;
  overflow-x: hidden;
  font-family: "Noto Sans JP", 
                "Helvetica Neue", 
                Arial, 
                "Hiragino Kaku Gothic ProN", 
                "Hiragino Sans", 
                Meiryo, 
                sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1rem;       /* ★ここに追加！ */
  line-height: 1.7;      /* ★ここに追加！ */
  color: #333333;        /* ★全体の文字色もここで統一 */
  background-color: #fff;
}
ul[class], ol[class] {
  list-style: none;
  padding: 0;
  margin: 0;
}
  
img { max-width: 100%; display: block; }
button:hover{cursor:pointer;}
address{font-style: normal;}
/* =========================
   3. UTILITY (クラス指定でサイズ・色を変更)
========================= */
/* サイズ指定クラス */
.fs-24 { font-size: var(--txt-24); }
.fs-32 { font-size: var(--txt-32); }

/* カラー指定クラス */
.text-primary { color: var(--color-primary); }
.text-action  { color: var(--color-action); }

/* ボタンコンポーネント */
.btn-cta {
  display: inline-block;
  background-color: var(--color-action);
  color: var(--bg-white);
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.2s;
}
.btn-cta:hover { opacity: 0.8; }
/* 画像に関して余白なし（はみ出しガード） */
img { 
    max-width: 100%; 
    display: block; 
  }
  
  /* 余白が必要な画像にだけ付けるクラス */
  .img-pad {
    padding: var(--img-gap);
    background-color: var(--bg-white); /* 必要に応じて背景色も保持 */
  }
  
  /* 左右に余白を持って中央に寄るクラス */
  .img-contained {
    max-width: calc(100% - var(--img-gap) * 2);
    margin: 0 auto;
  }
  /*各ページ共通*/
  html {
    /* scroll-behavior: smooth; */
  }
/* ページ全体で「横方向」の不必要なはみ出しを確実にカット */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* アニメーションする要素の親に「はみ出し禁止」を設定 */
/* ページ内の主要な親要素（今回の場合は article の親など） */
.inner {
  /* overflow-x: hidden;  */
  /* 左右にわずかな余白を持たせることで、
  はみ出し要素がブラウザの表示枠ギリギリに触れて
  スクロールバーが出るのを防ぐ */
padding-left: 1px;
padding-right: 1px;}

/* 要素のアニメーション設定 */
section, article {
  /* opacity: 0 だけに絞り、transform を除外してみるテスト */
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

section.is-active, article.is-active {
  opacity: 1;
}
/*footer*/

footer.footer {
  margin-bottom: 150px;
  text-align: right;
  padding-right: 1rem;
}


@media (min-width: 769px) {

  footer.footer {
    margin-bottom: 0;
  }
}