@charset "utf-8";

*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* 変数 */
:root{
  --blue:#1f3f91;
  --yellow:#f9ea5a;
  --text:#0f1d3a;
  --line:#a9c0ea;
  --footer-bg:#c7deee;   /* 薄いブルー */
  --footer-fg:#ffffff;   /* 白文字 */
  --footer-fg-dim: rgba(255,255,255,.85);
  --maxw:1200px;
  --ttl-blue:#1f3f91;
  --ttl-bg:#fff;
  --ttl-bar:#1f3f91;
  --ink:#0f1624;
  --bg:#fff;
}

p{
  color: #1a1a1a;
}

  header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;
        padding: 0 20px;
        width: 100%;
        position: fixed;   /* 追加 */
        top: 0;            /* 画面の上に固定 */
        right: 0;
        z-index: 1000;     /* 他要素より前面に表示 */
    }
    

    /* --- ロゴ --- */
    .logo {
        padding: 10px;
    }

    .logo img {
      height: 40px;
    }

    /* --- ナビ --- */
    nav {
      display: flex;
      align-items: center;
    }

    nav ul {
      list-style: none;
      display: flex;
      margin: 0;
      height: 50px;
      line-height: 50px;
      padding-left: 100px;
      border-radius: 20px 0 0 20px;
      background: #1f3f91; /* 青背景 */  
    }

    nav ul li {
      margin: 0 5px;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      font-size: 12px;
      padding: 5px;
      transition: background 0.3s;
    }

    nav ul li a img {
      height: 16px; 
      padding-top: 3px;
    }

    nav ul li a:hover {
      background: rgba(255,255,255,0.2);
      border-radius: 4px;
    }

    /* --- お問い合わせボタン --- */
    .contact-btn {
      background: #f5e47a;
      color: black;
      padding: 0px 17px;
      text-decoration: none;
      display: flex;
      align-items: center;
      font-size: 14px;
    }

    .contact-btn::before {
      content: "✉";
      margin-right: 5px;
    }

    /* --- ハンバーガー --- */
    .menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
      margin-left: 20px;
    }

    .menu-toggle div {
      width: 25px;
      height: 3px;
      background: var(--blue);
      margin: 4px 0;
      transition: 0.4s;
    }

    /* 追記 */
    /* 交差(X)アニメーション */
.menu-toggle.active div:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fff; }
.menu-toggle.active div:nth-child(2) { opacity: 0; }
.menu-toggle.active div:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }

/* バックドロップ（余白クリック領域） */
#backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 900; /* メニューより一つ下 or 上でもOK */
}
#backdrop.show {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* メニュー表示中はスクロール固定 */
body.no-scroll { overflow: hidden; }

/* ===== Index.html ===== */
    /* KV */
     .eyecatch {
      position: relative;
      text-align: center;
      color: #000;
      margin-top: 40px; /* ヘッダー分の余白 */
    }

    .eyecatch img.bg_pc {
      width: 100%;
      height: auto;
      display: block;
    }

    .eyecatch-content {
      position: absolute;
      bottom: 10%;
      left: 10%;
    }

    .eyecatch-content h2,
    .eyecatch-content p{
      text-align: left;
    }

    .badges {
      display: flex;
      justify-content: start;
      gap: 40px;
      margin-bottom: 20px;
    }

    .badges img {
      width: 100px; /* アイコンサイズ調整 */
      height: auto;
    }

    .eyecatch h2 {
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .eyecatch p {
      font-size: 24px;
      font-weight: 600;
    }



    /* コース紹介 */
    /* レイアウト */
.courses{
  --blue:#213a7e;           /* 枠線色 */
  --shadow:0 10px 28px rgba(33,58,126,.18);
  --radius:18px;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:24px;
  padding:32px min(6vw,64px);
}

.course-card{
  position:relative;
  background:#fff;
  border:2px solid var(--blue);
  border-radius:var(--radius);
  padding:28px 24px 68px;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

/* ホバー時：青ラインにドロップシャドー */
.course-card:hover{
  box-shadow:var(--shadow);
  border-color:#1a2f69;
}

/* アイコン（png） */
.course-icon{
  width:80px;
  height:auto;
  display:block;
  margin:6px auto 16px;
}

/* 見出し・本文 */
.course-card h3{
  text-align:center;
  font-size:16px;
  margin:0 0 12px;
  color:#0e224f;
}
.course-card p{
  font-size:14px;
  line-height:1.9;
  color:#1a1a1a;
}

/* 右下の黄色ボタン */
.cta{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:#f3df63;       /* 黄色背景 */
  color:#1a1a1a;
  display:grid;
  place-items:center;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.08) inset;
}

/* 矢印の回転（→ が ↓ に） */
.cta svg{
  transition:transform .25s ease;
}
.course-card:hover .cta svg,
.cta:hover svg{
  transform:rotate(90deg);
}

/* ピックアップ */


/* セクション余白 */
.pickup{ 
  padding: 40px 5vw 56px; 
}

/* 見出し */
.pickup-title{
  position: relative;
  display: grid;
  place-items: center;
  row-gap: 10px;
  margin-bottom: 28px;
}
.pickup-title span{
  font-weight: 800;
  color: var(--blue);
  letter-spacing: .08em;
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: clamp(18px, 2.2vw, 20px);
}
.pickup-title .slash{
  position: absolute;
  top: 0;
  transform: translateY(0%);
  height: clamp(14px, 1.8vw, 18px);
}
.pickup-title .left{ left: calc(50% - 13.5ch); }  /* テキスト幅に合わせて調整 */
.pickup-title .right{ right: calc(50% - 13.5ch); }
.pickup-title .bar{
  height: 6px;   /* 下の小さな四角(バー) */
}

/* カードグリッド */
.pickup-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px,1fr));
  gap: clamp(20px, 3vw, 40px);
  max-width: 1100px;
  margin: 0 auto 28px;
}
.pickup-card{
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pickup-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.pickup-card .thumb{
  width:100%;
  display:block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.thumb-caption{
  background: var(--blue);
  color:#fff;
  font-weight:700;
  padding: 10px 14px;
  font-size: 14px;
  line-height:1.5;
}

/* お知らせ */
/* セクション余白 */
.news{
  padding: clamp(28px,4vw,56px) min(6vw,64px);
}

/* タイトル */
.news-title{
  text-align:center;
  color:var(--blue);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height:1.2;
  margin:0 0 28px;
  font-weight:800;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.news-title span{ display:block; margin-bottom:10px; }
.news-underline{
  width:100px;   /* 装飾画像のサイズ調整 */
  height:auto;
}

/* リスト */
.news-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
  justify-content: center;
}
.news-item{
  display:grid;
  grid-template-columns:auto auto 120px 1fr;
  align-items:center;
  gap:16px;
  font-size:14px;
}

/* タグ */
.tag{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  background:var(--yellow);
  font-weight:700;
}
.tag-type{
  background:#fff;
  border:2px solid var(--yellow);
  padding:6px 16px;
}

/* 日付とリンク */
.news-date{
  color:#666;
  white-space:nowrap;
}
.news-link{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
}
.news-link:hover{ text-decoration:underline; }

/* 詳しく見るボタン */
.news-more{ 
  text-align:center; 
  margin-top:50px; 
}
.btn-more{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:14px 26px;
  border-radius:999px;
  background:#c6d7ea;
  color:var(--blue);
  font-weight:800;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.btn-more:hover{
  background:var(--yellow);
  color:#fff;
}

div.bg{
  background-image: url(../img/bg.jpg);
}

/* SMARTの物語 */
.story{
  position: relative;
  padding: clamp(24px,3vw,40px) min(5vw,56px);
  max-width: 1200px;
  margin: 20px auto;
}

/* 背景画像（右下にずらして配置） */
.story-bg{
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* 白い本文ボックス */
.story-inner{
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 3px solid var(--border);
  padding: clamp(28px,4vw,56px);
  max-width: 1080px;
  margin: 0 auto;
}

/* タイトル */
.story-title{
  position: relative;
  display: grid;
  place-items: center;
  row-gap: 10px;
  margin: 0 auto;
  color: var(--blue);
  font-weight: 800;
  font-size: clamp(20px,2.4vw,20px);
  text-align: center;
  width: 300px;
}
.title-icon{
  position: absolute;
  right: clamp(18px,2.4vw,28px);
  top: 0;
  width: clamp(16px,2vw,22px);
  height: auto;
}
.title-underline{
  width: clamp(64px,10vw,96px);
  height: auto;
}

/* 本文 */
.story-body{
  text-align: center;
  color: #222;
  line-height: 2.2;
  letter-spacing: .02em;
  font-size: clamp(14px,1.3vw,16px);
}

.story-body p{
   margin: 1.6em 0; 
   font-size: 14px;
  }

/* SMARTの特徴 */

.features{
  padding: clamp(24px,3vw,40px) 16px;
}
.features__inner{
  max-width: 1200px;   /* 指定 */
  margin: 0 auto;
}

/* 見出し（左と下は画像） */
.features__title{
  display: grid;
  place-items: center;
  row-gap: 10px;
  margin: 0 0 40px;
  color: var(--blue);
  font-weight: 800;
  font-size: clamp(16px,2.4vw,20px);
  text-align: center;
}
.features__title span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.features__title-icon{
  width: clamp(16px,2.2vw,22px);
  height: auto;
}
.features__title-underline{
  width: clamp(60px,9vw,92px);
  height: auto;
}

/* リスト */
.features__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px,2vw,18px);
}

/* 各行 */
.feature{
  display: grid;
  grid-template-columns: 110px 1fr; /* 左:POINT画像 / 右:本文 */
  align-items: start;
  gap: clamp(14px,2.2vw,24px);
  padding: clamp(6px,1.5vw,10px) 0;
  border-bottom: 1px solid rgba(31,63,145,.2); /* 見本の薄い区切り */
}

.feature__point img{
  width: 100px;  /* POINT画像サイズ */
  height: auto;
  display: block;
}

.feature__head{
  margin: 0 0 10px;
  color: var(--blue);
  font-weight: 800;
  font-size: clamp(16px,2.1vw,18px);
}
.feature__body p{
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  font-size: clamp(13px,1.2vw,16px);
}

/* 成績保証システム */

.guarantee{
  position: relative;
  padding: 40px 16px;
  max-width: 1200px;
  margin: 100px auto;
}
.guarantee-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.guarantee-inner{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px,4vw,48px);
}

/* タイトル */
.guarantee-title{
  display: flex;                  /* ← 横並び */
  align-items: center;            /* 垂直中央揃え */
  justify-content: center;        /* 全体を中央寄せ */
  gap: 5px;                      /* 画像と文字の間隔 */
  color: var(--blue);
  font-weight: 800;
  font-size: clamp(18px,2.6vw,20px);
  margin-bottom: 40px;
  text-align: center;             /* 念のため中央揃え */
}


.guarantee-title .title-underline{
  width: clamp(60px,9vw,92px);
  height: auto;
}

/* 2カラム */
.guarantee-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px,3vw,40px);
}
.guarantee-sub{
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 30px;
}
.guarantee-sub span{
  background: var(--yellow);
  padding: 0 6px;
}

/* ボックス */
.guarantee-items{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px,2vw,24px);
}
.g-item{
  border: 2px solid var(--blue);
  text-align: center;
  padding: 20px 12px;
  position: relative;
  height: 150px;
}
.g-item img{
  width: auto;
  height: auto;
  margin-bottom: 10px;
}
.g-item .catch{
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}
.g-item .label{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%); 
  width: 80%;

}
.g-item.blue{ border-color: var(--blue); }
.g-item.blue .label{ background: var(--blue); color:#fff; }
.g-item.yellow{ border-color: var(--yellow); }
.g-item.yellow .label{ background: var(--yellow); color:#333; }

/* 注意書き */
.note {
    margin-top: 50px;
    font-size: 13px;
    text-align: center;
    color: #333;
    line-height: 1.6;
}

/* 教室のご案内 */
.school{
  padding: clamp(24px,4vw,48px) 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.school__title{
  text-align:center;
  color:var(--blue);
  font-weight:800;
  font-size:clamp(16px,2.6vw,20px);
  margin:0 0 40px;
}
.title-underline{
  display:block;
  margin:8px auto 0;
  width:clamp(60px,9vw,92px);
  height:auto;
}

.school__grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:clamp(16px,3vw,36px);
  align-items:start;
}

/* 左側 */
.school__name{
  display:flex; 
  align-items:center; 
  gap:8px;
  font-size:clamp(16px,2.1vw,20px);
  margin:0 0 10px;
}
.school__name .logo{ 
  width:auto; 
  height:40px;
 }

.school__addr{
   margin:4px 0 10px;   
  }

.school__tel a{ 
  color:var(--blue); 
  font-weight:700; 
  text-decoration:none; 
  margin-right: 20px;
  font-size: 18px;
}

.school__cta{ 
  margin:10px 0 18px; 
}

.btn{
  display:inline-block;
  padding:10px 18px;
  background:var(--blue);
  color:#fff; 
  text-decoration:none; 
  font-weight:700;
  border-radius:6px;
}

.school_addr_contact{
  display: flex;
  align-items: center;
}

.btn:hover{ opacity:.9; }

.school__table{
  margin-top:8px;
  border-top:1px solid var(--blue);
}
.school__table > div{
  display:grid; 
  grid-template-columns: 120px 1fr;
  gap:12px; 
  padding:14px 0;
  border-bottom:1px solid var(--blue);
  height: 100px;
  align-items: center;

}
.school__table dt{ 
  color:var(--blue); 
  font-weight:700; 
  border-right:1px solid var(--line);
}

/* 右側：マップをアスペクト比でレスポンシブに */
.map-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;          /* ここで比率を決める（好みで変更可） */
  background:#eee;
  overflow:hidden;
}
.map-wrap iframe{
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%; 
  border:0;
}

/* footer */
.smart-footer{
  --bg: #c7deee; 
  --fg: #ffffff; 
  --fg-dim: rgba(255,255,255,.85);
  --maxw: 1200px;

  background: var(--bg);
  color: var(--fg);
}

.smart-footer__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 16px 36px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;   /* 左：情報／右：メニュー */
  gap: clamp(16px,4vw,64px);
  align-items: start;
}

.smart-footer__logo{
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}
.smart-footer__address{
  font-style: normal;
  line-height: 1.9;
  color: var(--fg-dim);
}
.smart-footer__tel{
  color: white;
  text-decoration: none;
  font-weight: 700;
}

/* メニュー */
.smart-footer__links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px 32px;
}
.smart-footer__links a{
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  padding: 2px 0;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.smart-footer__links a:hover{
  opacity: 1;
  transform: translateX(2px);
  color: var(--fg);
}

/* コピーライト */
.smart-footer__copy{
  background: rgba(0,0,0,.06);
  color: var(--fg-dim);
  text-align: center;
  padding: 10px 12px;
  font-size: 12px;
}




/* ===== About.html ===== */


.smart-about{
  background-image:url(../img/bg.jpg);
  background-repeat: repeat-y;   
  background-size: 100% auto;
  background-position: top center;
  padding: clamp(28px, 5vw, 64px) 16px;
}
.smart-about__inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* タイトル */
.smart-about__title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 40px;
  color: #2f4f9d;
  font-weight: 800;
  font-size: clamp(16px, 2.6vw, 20px);
}
.smart-about__bar{
  width: clamp(54px, 7.5vw, 84px);
  height: auto;
}

/* リード */
.smart-about__lead{
  margin: 0 auto 28px;
  font-size: clamp(13px, 1.4vw, 14px);
  line-height: 2;
  color: #222;
}

/* サブ見出し */
.smart-about__sub{
  display: block;
  align-items: center;
  gap: 8px;
  margin: 100px auto 0px;
  color: #2f4f9d;
  font-weight: 800;
  font-size: clamp(16px, 2.1vw, 20px);
}

.smart-about__subbar{
  width: clamp(42px, 6vw, 64px);
  height: auto;
  width:auto;
  display: block;
  margin: 10px auto;
}

/* ブロック（Mission / Vision / Value） */
.smart-about__block{
  margin: 80px auto;
  max-width: 760px;
}
.smart-about__chip{
  display: inline-block;
  padding: 6px 40px;
  border: 2px solid #2f4f9d;
  color: #2f4f9d;
  font-weight: 800;
  font-size: 14px;
  background: #fff;            /* 背景があるページでも視認性を確保 */
}
.smart-about__text{
  margin: 12px 0 0;
  font-size: clamp(13px, 1.3vw, 14px);
  line-height: 2;
  color: #333;
}

/* Value リスト */
.smart-about__list{
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  text-align: center;
}
.smart-about__list li{
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 2;
  margin: 8px 0;
  color: #222;
}
.smart-about__list strong{
  font-weight: 700;
}

/* SMART の哲学 */
.smart-about__philosophy{
  margin-top: 20px;
  text-align: center;
}
.smart-about__philosophy p{
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 2;
  margin: 12px 0;
  color: #333;
}
.smart-about__philosophy strong{
  font-weight: 700;
}


/* 問い合わせバナー */
.smart-banner {
    margin: 100px auto 0;
    padding-bottom: 100px;
}

.smart-banner__inner{
  position: relative;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
}

/* 背景画像 */
.smart-banner__bg{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: box-shadow .3s ease, transform .3s ease;
}

/* テキストと矢印を画像上に配置 */
.smart-banner__content{
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  color: #fff;
}

.smart-banner__lead{
  font-size: clamp(12px, 2.6vw, 20px);
  font-weight: 800;
  margin: 0 0 6px;
}
.smart-banner__sub{
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 700;
  margin: 0;
  opacity: .95;
}

/* 矢印（右側に配置） */
.smart-banner__arrow{
  position: absolute;
  right: 40px;
  top: 58%;
  transform: translateY(-50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  color: rgba(255,255,255,.9);
  display: grid;
  place-items: center;
}
.smart-banner__arrow .icon{
  width: 32px;
  height: 32px;
  position: absolute;
  transition: transform .3s ease;
}

/* --- ホバー時 --- */
.smart-banner__inner:hover .smart-banner__bg{
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  transform: scale(1.02);
}
.smart-banner__inner:hover .icon{
  transform: rotate(90deg);
}


/* ===== Features.html ===== */

.decor-ttl{
    position: relative;
    display: inline-block;
    padding: 10px 18px;
    background: var(--ttl-bg);
    border: 1px solid var(--ttl-blue);
    color: var(--ttl-blue);
    font-weight: 800;
    font-size: clamp(18px, 2.6vw, 20px);
    line-height: 1.2;
    z-index: 0;
    width: 235px;
    text-align: center;
}

.decor-ttl__corner{
  position:absolute; 
  inset:6px auto auto 6px;
  width:16px; 
  height:14px;
  border-top:1px solid var(--ttl-blue);
  border-left:1px solid var(--ttl-blue);
  pointer-events:none;
}

.decor-ttl__corner_bottom {
    position: absolute;
    inset: 23px auto auto 6px;
    width: 16px;
    height: 10px;
    border-left: 1px solid var(--ttl-blue);
    pointer-events: none;
}

.decor-ttl::after {
    content: "";
    position: absolute;
    left: 4px;
    right: -6px;
    bottom: -11px;
    height: 10px;
    background: var(--ttl-bar);
    z-index: -1;
    width: 230px;
}

.decor-ttl::before{ /* 右端タブ */
    content: "";
    position: absolute;
    top: 5px;
    right: -13px;
    width: 12px;
    height: 50px;
    background: var(--ttl-bar);
    z-index: -10;
}

/* ===== SMART の指導方針レイアウト ===== */

.decor-ttl2 {
    position: relative;
    display: block;
    padding: 10px 18px;
    background: var(--ttl-bg);
    border: 1px solid var(--ttl-blue);
    color: var(--ttl-blue);
    font-weight: 800;
    font-size: clamp(16px, 2.6vw, 20px);
    line-height: 1.2;
    z-index: 0;
    width: 320px;
    text-align: center;
    margin: 50px auto;
}

.decor-ttl2__corner{
  position:absolute; 
  inset:6px auto auto 6px;
  width:16px; 
  height:14px;
  border-top:1px solid var(--ttl-blue);
  border-left:1px solid var(--ttl-blue);
  pointer-events:none;
}

.decor-ttl2__corner_bottom {
    position: absolute;
    inset: 23px auto auto 6px;
    width: 16px;
    height: 10px;
    border-left: 1px solid var(--ttl-blue);
    pointer-events: none;
}

.decor-ttl2::after {
    content: "";
    position: absolute;
    left: 4px;
    right: -6px;
    bottom: -11px;
    height: 10px;
    background: var(--ttl-bar);
    z-index: -1;
    width: 315px;
}

.decor-ttl2::before{ /* 右端タブ */
    content: "";
    position: absolute;
    top: 5px;
    right: -13px;
    width: 12px;
    height: 50px;
    background: var(--ttl-bar);
    z-index: -10;
}


.smart-policy{ 
  padding:clamp(28px,5vw,64px) 16px 0px; 
}

.smart-policy__inner{ 
  max-width:1200px; 
  margin:0 auto; 
}

/* タイトルを中央に */
.smart-policy__ttl{ 
  display:block; 
  margin:0 auto clamp(28px,4vw,40px); 
}

/* 下段 2カラム（flex） */
.smart-policy__body {
    display: flex;
    align-items: center;
    gap: clamp(20px, 4vw, 56px);
}
/* 左：リード文 */
.smart-policy__lead{
  flex:1 1 48%;
  margin:0;
  font-size:clamp(12px,1.4vw,14px);  /* pルール */
  line-height:2;
  color:#111;
}
.smart-policy__lead span{
  content: "";
  background-image: url(../img/underline_yellow_pen.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  margin-bottom: 20px;
  font-size: 18px;
  display: block;
}

/* 右：画像（大きめ・角丸） */
.smart-policy__image{
  flex:1 1 52%;
  border-radius:28px; 
  overflow:hidden;
}
.smart-policy__image img{
  width:100%; 
  height:auto; 
  display:block;
  object-fit:cover;
}

:root{
  --blue:#1f3f91;
  --ink:#111;
  --card:#fff;
}

/* 外枠カード */
.smart-model{
  padding: clamp(28px,5vw,64px) 16px;
}
.smart-model__frame{
  max-width: 1200px;
  margin: 0 auto;
  background: var(--card);
  border: 2px solid var(--blue);
  padding: clamp(24px,4vw,40px) clamp(20px,4vw,40px) clamp(36px,5vw,56px);
}


/* 5項目横並び */
.smart-model__list{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:space-between;
  gap: clamp(12px,2.5vw,28px);
  text-align:center;
}
.smart-model__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

/* 丸バッジ S M A R T */
.smart-model__badge{
  width:70px; height:70px;
  margin: 0 auto;
  background: var(--blue);
  color:#fff; font-weight:900;
  font-size: 28px;
  display:grid; place-items:center;
  border-radius:50%;
}

/* 短い二本線 */
.smart-model__pipes{
  width: 10px; 
  height: 16px; 
  margin: 0 auto 4px;
 border-right: 1px solid var(--blue);
 border-left: 1px solid var(--blue);

}

/* 英語ラベル / 日本語ラベル */
.smart-model__en{
  color: var(--blue);
  font-weight: 700;
  font-size: clamp(12px,1.4vw,14px);
}
.smart-model__ja{
  color: var(--ink);
  font-weight:700;
  font-size: clamp(12px,1.4vw,14px);
}

/* 縦の線（バブルへつなぐ） */
.smart-model__stem{
  width:2px; height:66px; margin: 8px auto 0;
  background: var(--blue);
}

/* 下の円（説明バブル） */
.smart-model__bubble{
  width: 190px; height: 190px;
  margin: 10px auto 0;
  border: 3px solid var(--blue);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 14px;
  color: var(--ink);
}
.smart-model__bubble p{
  margin:0;
  font-size: clamp(12px,1.4vw,14px); /* 本文ルール */
  line-height: 1.9;
}


/* 学習状況はすべてデータとして蓄積 */
.utilization p{
  text-align: center;
}

.smart-icons__inner{
  max-width: 1200px;
  margin: 50px auto 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px,3vw,40px);
}

.smart-icon-card{
  border: 2px solid #1f3f91; /* 青枠 */
  text-align: center;
  padding: 24px 12px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}
.smart-icon-card:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.smart-icon-card__img{
  display: block;
  width: auto;
  height: 100px;
  margin: 0 auto 16px;
}

.smart-icon-card__text{
  font-size: clamp(12px,1.4vw,14px);
  font-weight: 700;
  color: #111;
  margin: 0;
}


/* ===== Guarantee.html ===== */
p.guarantee_ttl_sub_txt{
  margin-bottom: 100px;
  text-align: center;
}


.guarantee_rule{
  display: block;
}

.guarantee_rule h3{
  margin-bottom: 50px;
  font-size: 16px;
}

.guarantee_rule ol{
  margin-left: 20px;
}



/* ===== Course.html ===== */

.course-section{ 
  padding: clamp(24px,4vw,48px) 16px; 
  max-width:1200px; 
  margin:0 auto; 
}

/* KV */
.course-hero{ 
  margin:0 0 clamp(20px,3vw,32px); 
}

.course-hero img{ 
  width:100%; 
  height:auto; 
  display:block; 
}
/* 見出しピル */
.course-pill{
  display:block;
  width:min(480px,90%);
  margin: 100px auto 50px;
  text-align:center;
  background:var(--blue);
  color:#fff;
  font-weight:800;
  font-size:clamp(16px,2.6vw,20px);
  padding:12px 16px;
}

/* ===== Grid 土台 ===== */
.course-grid{
  display:grid;
  gap: clamp(12px,2.6vw,20px);
  margin-bottom: clamp(28px,5vw,56px);
  align-items:start;
}

/* 低学年：左に時間割・右に 対象→特長→料金 */
.course-grid--L{
  grid-template-columns: 1fr 1.2fr;
  grid-template-areas:
    "left  row1"
    "left  row2"
    "left  row3";
}
.course-grid--L .timetable { grid-area: left; }
.course-grid--L .row-target { grid-area: row1; }
.course-grid--L .row-feature{ grid-area: row2; }
.course-grid--L .row-price  { grid-area: row3; }

/* 高学年：右に時間割、左に 対象→特長→料金 */
.course-grid--R{
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas:
    "row1 right"
    "row2 right"
    "row3 right";
}
.course-grid--R .timetable { grid-area: right; }
.course-grid--R .row-target { grid-area: row1; }
.course-grid--R .row-feature{ grid-area: row2; }
.course-grid--R .row-price  { grid-area: row3; }

/* カード（時間割） */
.card{
  background:#fff;
  border:1px solid var(--blue);
  overflow:hidden;
}
.timetable table{ 
  width:100%; 
  border-collapse:collapse; 
}
.timetable th,
.timetable td{
  font-size:clamp(11px,1.4vw,13px);
  padding:12px 10px;
  text-align:center;
}
.timetable tr td:first-of-type{
  border-right:1px solid var(--blue);
}
.timetable thead th{
  font-weight:800; 
  background-color: var(--blue);
  color: white;
  border-bottom:1px solid var(--blue);
  text-align: center;
}
/* 情報ボックス */
.info-row{
  display:grid;
  grid-template-columns: 120px 1fr;
  align-items:center;
  border:1px solid var(--blue);
  overflow:hidden;
  min-height:56px;
}

/* ラベル部分（対象・特長・料金） */
.info-label{
  background: var(--blue);       /* ← 青背景 */
  color: #fff;                   /* ← 白文字 */
  font-weight:800;
  font-size:clamp(12px,1.4vw,14px);
  display: flex;                 /* ← flexで中央揃え */
  justify-content: center;       /* ← 左右中央 */
  align-items: center;           /* ← 上下中央 */
  text-align: center;
  padding: 10px 8px;
  border-right:2px solid var(--blue);
  height: 100%;
}

/* 本文 */
.info-body{
  font-size:clamp(12px,1.4vw,14px);
  color:#111;
  padding:5px 12px;
  line-height:1.2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: white;
  height: 100%;
}

.info-body ul{
  list-style-type: none;
}

p.annotation{
  text-align: right;
  font-size: 11px;
}

/* 季節講習料金 */
/* =======================
   Seasonal Course section
   （他と干渉しないよう名前空間＋ローカル変数使用）
   ======================= */
.season-course{
  --sc-blue: var(--blue, #1f3f91);
  --sc-line: var(--sc-blue);
  --sc-bg: #fff;
  padding: clamp(28px,5vw,64px) 16px;
}

.season-course__inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* タイトル（ピル） */
.season-course__title{
  width: min(360px, 90%);
  margin: 100px auto 50px;
  background: var(--sc-blue);
  color: #fff;
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 20px);  /* 見出しルール */
  text-align: center;
  padding: 12px 16px;
}

/* グリッド：左画像 / 右ボックス */
.season-course__grid{
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: clamp(16px,3vw,28px);
  align-items: start;
}

/* 画像 */
.season-course__photo{
  margin: 0;
}
.season-course__photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* 右側のボックス群 */
.season-course__group{
  display: grid;
  gap: clamp(10px,2vw,14px);
}

/* 1行 */
.season-course__row{
  display: grid;
  grid-template-columns: 110px 1fr;
  border: 2px solid var(--sc-line);
  overflow: hidden;
  min-height: 56px;
}

/* ラベル：白文字・青背景・中央揃え */
.season-course__label{
  background: var(--sc-blue);
  color: #fff;
  font-weight: 800;
  font-size: clamp(12px, 1.4vw, 14px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 本文 */
.season-course__body{
  padding: 10px 12px;
  font-size: clamp(12px, 1.4vw, 14px);  /* pルール */
  line-height: 1.9;
  color: #111;
}

/* 料金行：右側を少し広く見せたい時の余白微調整 */
.season-course__row--split .season-course__body{
  display: block;
}
.season-course__price{
  font-weight: 800;
  color: var(--sc-blue);
}

/* 備考 */
.season-course__note{
  margin: clamp(18px,3vw,28px) auto 0;
  max-width: 980px;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.9;
  color: #111;
  text-align: center;
}


/* 諸経費 */
/* 諸経費セクション */
.expenses{
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(28px,4vw,56px) 16px;
}

.expenses-title{
  text-align: center;
  font-size: clamp(18px,2.6vw,20px);
  font-weight: 800;
  background: var(--blue);
  color: #fff;
  padding: 12px 16px;
  margin-bottom: 28px;
  width: min(360px, 90%);
  margin:0 auto 50px;
}

/* テーブルの土台 */
.expenses-table{
  display: grid;
  gap: 14px;
}

/* 各行 */
.expenses-row{
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  border: 2px solid var(--blue);
  overflow: hidden;
}

/* ラベル部分 */
.expenses-label{
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: clamp(12px,1.4vw,14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
}

/* 本文部分 */
.expenses-body{
  font-size: clamp(12px,1.4vw,14px);
  padding: 12px 16px;
  line-height: 1.8;
  background: #fff;
}

/* 内部の表 */
.expenses-row--multi .expenses-body table{
  width: 100%;
  border-collapse: collapse;
}
.expenses-row--multi .expenses-body td{
  padding: 6px 8px;
  font-size: clamp(12px,1.4vw,14px);
  border-bottom: 1px solid #ccc;
}
.expenses-row--multi .expenses-body tr:last-child td{
  border-bottom: none;
}

/* 注釈 */
.expenses-note{
  font-size: clamp(12px,1.4vw,14px);
  color: #333;
  line-height: 1.8;
  margin-top: 20px;
  text-align: center;
}


/* =========================
   After School (名前空間分離)
   ========================= */
.after-school{
  padding: clamp(28px,5vw,64px) 16px;
}
.after-school__inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* タイトル（ピル） */
.after-school__title{
  width: min(420px, 92%);
  margin: 100px auto 50px;
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: clamp(16px, 2.6vw, 20px);
  padding: 12px 16px;
}

/* 2カラムレイアウト */
.after-school__grid{
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(16px,3vw,36px);
  align-items: start;
}

/* 時間割カード */
.after-school__timetable{
  border: 1px solid var(--blue);
  background: #fff;
  overflow: hidden;
}
.after-school__timetable table{
  width: 100%;
  border-collapse: collapse;
}
.after-school__timetable th,
.after-school__timetable td{
  padding: 12px 14px;
  font-size: clamp(12px,1.4vw,14px);
  text-align: center;
}
.after-school__timetable thead th{
  background: var(--blue);
  color: #fff;
}
.after-school__timetable tbody td:first-child{
  border-right: 1px solid var(--blue);
}

/* 右側ボックス群 */
.after-school__info{
  display: grid;
  gap: clamp(10px,2vw,14px);
}

/* 共通の行ボックス */
.after-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  border: 1px solid var(--blue);
  overflow: hidden;
  min-height: 56px;
}

/* ラベル：白文字・青背景・中央揃え */
.after-row__label{
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: clamp(12px, 1.4vw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 料金だけ縦長に見せる */
.after-row--fee{
  grid-template-columns: 120px 1fr;
}
.after-row__label--tall{
  padding-block: 18px; /* 少し縦に伸ばす */
}

/* 本文 */
.after-row__body{
  padding: 10px 12px;
  font-size: clamp(12px, 1.4vw, 14px);
  color: #111;
  line-height: 1.9;
}

/* 備考 */
.after-school__note{
  margin: clamp(18px,3vw,28px) auto 0;
  max-width: 980px;
  text-align: center;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.9;
  color: #111;
}

/* サットンとは */
/* ===== サットンセクション ===== */
.sutton {
  position: relative;
  padding: clamp(28px,4vw,56px) 16px;
  max-width: 1200px;
  margin: 0 auto;

}

.sutton__title,
.sutton__subtitle {
  font-size: clamp(14px, 2.6vw, 16px);
  margin-bottom: 16px;
  padding-bottom: 10px;
  background-image: url("../img/underline_yellow_pen.png"); /* 黄色ライン画像 */
  background-repeat: no-repeat;  /* 縦に繰り返し */
  background-position: left bottom;
  background-size: auto;
}

.sutton__lead {
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.8;
  margin-bottom: 40px;
  margin-left: 30px;
  color: #111;
}

/* ３つの力 */
.sutton__powers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 28px);
  margin-bottom: 48px;
}
.power {
  text-align: center;
}
.power img {
  max-width: 100%;
  margin-bottom: 12px;
}
.power p {
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.6;
}

/* 学習内容と指導法 */

.sutton-tagbox{
  position: relative;
  max-width: 1100px;
  margin: clamp(18px,3vw,28px) auto;
  padding-top: 18px; /* ラベルの重なり分の逃げ */
}

/* 青いラベル */
.sutton-tagbox__label {
    position: absolute;
    left: -25px;
    top: 0;
    transform: translateY(-10%);
    background: var(--blue);
    color: #fff;
    font-size: clamp(14px, 2.6vw, 16px);
    line-height: 1;
    padding: 12px 18px;
    border-radius: 2px;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* 白地のボックス＋青枠 */
.sutton-tagbox__box{
  background: #fff;
  border: 1px solid var(--blue);
  padding: clamp(18px,2.8vw,24px) clamp(18px,3vw,28px);
}

/* リスト（大きめの黒丸） */
.sutton-tagbox__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px,1.8vw,14px);
}
.sutton-tagbox__list li{
  position: relative;
  padding-left: 36px;
  font-size: clamp(12px, 1.4vw, 14px);   /* 本文統一ルール */
  line-height: 1.2;
  padding-top: 5px;
}
.sutton-tagbox__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .42em;              /* 行の中ほどに合わせる */
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #111;        /* 画像の黒丸に近い色 */
}

h3.sutton_catch{
  text-align: center;
  font-weight:normal;
  line-height: 1.4;
  margin: 100px auto 0;
}

/* ===== schoolhouse.html ===== */

.class_images{
  max-width: 1200px;
  margin:0 auto 100px;
}

.class_images ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.class_images ul li{
  width: 28%;
  list-style: none;
  text-align: center;
}

.class_images ul li p:nth-child(2){
  margin-top: 10px;
}

/* ========= Flow.html ========= */
.flow{
  padding: 0 16px;
}
.flow__inner{
  max-width: 760px;     /* 画像の比率に合わせて中央寄せ */
  margin: 0 auto;
}

/* 1ステップの塊 */
.flow-step{
  position: relative;
  margin: clamp(22px,4vw,28px) 0;
  padding-top: 26px;    /* ピルが食い込む分の余白 */
}

/* ステップ間 矢印（下向き） */
.flow-step + .flow-step::before{
  content:"";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--blue);
  opacity: .9;
}

/* 青いピル（ヘッダ） */
.flow-step__head {
    position: absolute;
    left: -30px;
    top: 25px;
    z-index: 2;
}

.flow-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  white-space: nowrap;
}
.flow-pill__step{
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(12px,1.4vw,14px);
}
.flow-pill__title{
  font-weight: 800;
  font-size: clamp(14px,2.6vw,16px); /* 見出しルール */
}
.flow-pill__desc{
  font-size: clamp(12px,1.4vw,14px); /* 本文ルール */
  opacity: .95;
}

/* 枠ボックス */
.flow-step__body{
  position: relative;
  z-index: 1;
}
.flow-body{
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 30px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: #fff;
  padding: clamp(30px,3.2vw,30px) clamp(16px,3.2vw,24px);
  height: 120px;
  margin-top: 30px;
}

/* アイコン */
.flow-body__icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-top: 2px;
}

/* 本文 */
.flow-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.flow-list li{
  position: relative;
  padding-left: 22px;
  font-size: clamp(12px,1.4vw,14px);  /* 本文ルール */
  line-height: 1.9;
}
.flow-list li::before{
  content:"";
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #111;     /* 黒丸 */
}

/* ===== FAQ.html ===== */
/* FAQ セクション */
.faq {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(28px,4vw,56px) 16px;
}

/* Q&Aアイテム */
.faq__item {
  margin-bottom: 32px;
}
.faq__q, .faq__a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.faq__q p, .faq__a p {
  margin: 0;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.8;
}
.faq__q p { color: #1f3f91; font-weight: 700; } /* 質問は青文字 */
.faq__a p { color: #333; }                    /* 回答は黒文字 */

/* Q/Aアイコン */
.faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: #1f3f91;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.faq__icon2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #1f3f91;
  background:white ;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid #1f3f91;
}

/* ===== Contact.html ===== */


.decor-ttl3 {
    position: relative;
    display: block;
    padding: 10px 18px;
    background: var(--ttl-bg);
    border: 1px solid var(--ttl-blue);
    color: var(--ttl-blue);
    font-weight: 800;
    font-size: clamp(16px, 2.6vw, 20px);
    line-height: 1.2;
    z-index: 0;
    width: 400px;
    text-align: center;
    margin: 50px auto;
}

.decor-ttl3__corner{
  position:absolute; 
  inset:6px auto auto 6px;
  width:16px; 
  height:14px;
  border-top:1px solid var(--ttl-blue);
  border-left:1px solid var(--ttl-blue);
  pointer-events:none;
}

.decor-ttl3__corner_bottom {
    position: absolute;
    inset: 23px auto auto 6px;
    width: 16px;
    height: 10px;
    border-left: 1px solid var(--ttl-blue);
    pointer-events: none;
}

.decor-ttl3::after {
    content: "";
    position: absolute;
    left: 4px;
    right: -6px;
    bottom: -11px;
    height: 10px;
    background: var(--ttl-bar);
    z-index: -1;
    width: 400px;
}

.decor-ttl3::before{ /* 右端タブ */
    content: "";
    position: absolute;
    top: 5px;
    right: -13px;
    width: 12px;
    height: 50px;
    background: var(--ttl-bar);
    z-index: -10;
}

.contact-form{
  --cf-blue: var(--blue, #1f3f91);
  --cf-line: var(--cf-blue);
  --cf-bg: #fff;
  padding: clamp(28px,5vw,56px) 16px;
}
.contact-form__inner{
  max-width: 840px;
  margin: 0 auto;
}

/* 行レイアウト（左：ラベル、右：入力） */
.cf-row{
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}
.cf-row--inline .cf-controls{ align-self: center; }
.cf-row--tel .cf-tel{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* 左の濃青ラベル */
.cf-label{
  background: var(--cf-blue);
  color:#fff;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(12px,1.4vw,14px);
  height: 50px;
}

/* テキスト/メール/住所/電話の入力 */
.cf-input{
  width: 100%;
  border: 2px solid var(--cf-line);
  background: var(--cf-bg);
  padding: 10px 12px;
  font-size: clamp(12px,1.4vw,14px);
  border-radius: 2px;
  outline: none;
}
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus{
  box-shadow: 0 0 0 3px rgba(31,63,145,.14);
}

/* テキストエリア */
.cf-textarea{
  width: 100%;
  border: 2px solid var(--cf-line);
  padding: 12px;
  font-size: clamp(12px,1.4vw,14px);
  border-radius: 2px;
  resize: vertical;
  min-height: 140px;
  background:#fff;
}

/* セレクト（右に山形アイコン） */
.cf-selectwrap{
  position: relative;
}
.cf-select{
  appearance: none;
  width: 260px;
  border: 2px solid var(--cf-line);
  padding: 10px 36px 10px 10px;
  font-size: clamp(12px,1.4vw,14px);
  border-radius: 2px;
  background:#fff;
}


/* ラジオ・チェック（アクセントカラーで統一） */
.cf-controls{
  display:flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items:center;
}
.cf-controls input[type="radio"],
.cf-controls input[type="checkbox"]{
  accent-color: var(--cf-blue);
}
.cf-radio, .cf-check{
  display:inline-flex; align-items:center; gap:8px;
  font-size: clamp(12px,1.4vw,14px);
}
.cf-check--block{ width: 100%; }

/* 送信ボタン */
.cf-submit{ text-align:center; margin-top: 22px; }
.cf-btn{
  min-width: 220px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--cf-blue);
  color:#fff;
  font-weight:800;
  font-size: clamp(12px,1.4vw,14px);
  border:none;
  cursor:pointer;
  transition: transform .05s ease, opacity .15s ease;
}
.cf-btn:hover{ opacity:.92; }
.cf-btn:active{ transform: translateY(1px); }

/* thanks.html */
   .thanks {
      padding: clamp(40px, 6vw, 80px) 16px;
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    .thanks__title {
      display: inline-block;
      background: var(--blue);
      color: #fff;
      font-weight: 800;
      font-size: clamp(16px, 2.6vw, 20px);
      padding: 14px 24px;
      border-radius: 6px;
      margin-bottom: clamp(28px, 5vw, 48px);
    }

    .thanks__msg {
      font-size: clamp(12px, 1.4vw, 14px);
      line-height: 2;
      color: #222;
      margin-bottom: 32px;
    }

    .thanks__btn {
      display: inline-block;
      background: var(--blue);
      color: #fff;
      font-weight: 700;
      font-size: clamp(14px, 1.6vw, 16px);
      padding: 14px 28px;
      border-radius: 6px;
      text-decoration: none;
      transition: background .3s ease, transform .2s ease;
    }

    .thanks__btn:hover {
      background: #173273;
      transform: translateY(-2px);
    }

    /* 追記 */
    .bg-phone{
      display: none;
    }

    br.phone{
      display: none;
    }

    /* アニメーション */

 /* ベース（ふわっと） */
.reveal { 
  opacity: 0; 
  transform: translateY(16px); 
  transition: opacity .6s ease, transform .6s ease; 
  will-change: transform, opacity;
}

/* 表示後 */
.reveal.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
}

/* 左右から：revealに紐づけて“合成”する */
.reveal.slide-left  { transform: translate(-24px, 16px); }
.reveal.slide-right { transform: translate( 24px, 16px); }

/* 表示後（左右も含めてゼロへ） */
.reveal.is-visible.slide-left,
.reveal.is-visible.slide-right { 
  transform: translate(0, 0); 
}


/* 縮小 */
header.site-header {
  position: sticky; top: 0; z-index: 100;
  background:#fff; transition: padding .25s ease, box-shadow .25s ease;
  padding: 18px 16px;
}
header.site-header.compact {
  padding: 8px 16px; box-shadow: 0 6px 16px rgba(0,0,0,.07);
}

.school_house img{
  width: 80%;
}


/* レスポンシブ */

@media screen and (max-width: 1356px) {
  /* ボタンを出す */
  .menu-toggle {
    display: flex;
    z-index: 999;
  }

  /* メニューをオーバーレイ化（初期は隠す） */
  nav ul {
    position: fixed;
    inset: 0;                 /* 画面全体 */
    top: 0;
    display: block;
    height: auto;
    line-height: normal;
    padding: 70px 16px 16px;  /* ヘッダー高さぶん上余白 */
    border-radius: 0;
    background: #1f3f91;
    transform: translateY(-110%);
    transition: transform .35s ease;
    z-index: 1001;            /* header(1000)より手前 */
  }

  /* 開く時はtranslate解除 */
  nav ul.open { transform: translateY(0); }

  /* 項目の縦並び体裁 */
  nav ul li { margin: 0; text-align: center; }
  nav ul li a {
    display: block;
    padding: 14px 8px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  nav ul li a img { height: 18px; padding-top: 0; vertical-align: middle; }

  /* お問い合わせボタンを目立たせる（任意） */
  nav ul li .contact-btn { justify-content: center; margin-top: 8px; border-radius: 8px; }


  
}






@media screen and (max-width: 1024px) {
    .courses{ 
      grid-template-columns: repeat(2,1fr); 

    }
      .course-grid--L,
  .course-grid--R{
    grid-template-columns: 1fr;
    grid-template-areas:
      "row1"
      "row2"
      "row3"
      "left"; /* or right */
  }
  .course-grid--R{
    grid-template-areas:
      "row1" "row2" "row3" "right";
  }
    .season-course__grid{
    grid-template-columns: 1fr;
  }
    .after-school__grid{
    grid-template-columns: 1fr;
  }
  .after-row--fee{
    grid-template-columns: 120px 1fr; /* スマホは通常幅に戻す */
  }
  .story-bg {
    display: none;
}

}

@media screen and (max-width: 800px) {
    /* ハンバーガーメニュー */
    nav ul {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(31, 63, 145,.8);
        height: 100vh;
        width: 100%;
        flex-direction: column;
        padding: 0;
        border-radius:0;
    }

      nav ul li {
        text-align: center;
        margin: 0;
      }

      nav ul li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
      }

      .menu-toggle {
        display: flex;
        z-index: 999;
      }

      nav.active ul {
        display: flex;
      }

      /* KV */
           .badges {
        gap: 20px;
      }

      .badges img {
        width: 70px;
      }

      .eyecatch h2 {
        font-size: 20px;
      }

      .eyecatch p {
        font-size: 14px;
      }

      .courses{ 
        grid-template-columns: 1fr; 
        width: 90%;
        margin: auto;
      }

      .course-card{ 
        padding:24px 18px 66px; 
      }

      .course-icon {
        width: auto;
        height: 70px;
     }

      .news-item{
        grid-template-columns:auto auto auto 1fr;
        gap:10px;
      }
 
      .news-date {
          font-size: 10px;
      }

     .tag{ 
        padding:7px 14px; 
        font-size: 10px;
      }

      .guarantee-cols{ 
        grid-template-columns: 1fr; 
      }

      .guarantee-items{ 
        grid-template-columns: 1fr; 
      }

      .school__grid{ 
        grid-template-columns: 1fr; 
      }

      .school__table > div{ 
        grid-template-columns: 1fr; 
      }
   .smart-footer__inner{
    grid-template-columns: 1fr;  /* 縦並び */
  }
  .smart-footer__links{
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }

  .smart-about__bar{ width: 56px; }
  .smart-about__subbar{ width: 48px; }

  .smart-banner__inner{
    grid-template-columns: 1fr auto;   /* 矢印を下へ回す */
    grid-template-areas:
      "text image"
      "arrow arrow";
    gap: 8px 12px;
    padding: 18px 16px;
  }
  .smart-banner__text{ padding: 12px 8px 8px 12px; }
  .smart-banner__image{ justify-self: end; }
  .smart-banner__image img{ height: 120px; }
  .smart-banner__arrow{
    grid-area: arrow;
    margin: 6px auto 8px;
    width: 40px;
    height: 40px;
    top: 56%;
  }
  .smart-policy__body{
    flex-direction:column; gap:16px;
    width: 95%;
    margin: auto;
  }
  
  .smart-policy__lead{ order:1; }

    .cf-row{
    grid-template-columns: 1fr;   /* 縦並び */
  }
  .cf-label{
    justify-content:flex-start;
    padding: 10px 12px;
    border-radius: 2px;
  }
  .cf-select{ width: 100%; }
  .cf-row--tel .cf-tel{
    grid-template-columns: 1fr 1fr 1fr;
  }
    .smart-model__list{
    flex-wrap: wrap;
    justify-content: center;
  }
  .smart-model__item{
    flex: 0 1 44%;
    margin-bottom: 24px;
  }
  .smart-icons__inner{
    grid-template-columns: 1fr;
  }

     /* 追記 */
    .bg-phone{
      width: 100%;
      height: auto;
      display: block;
    }
    .eyecatch img.bg_pc {
      display: none;
    }

    .eyecatch-content {
    position: absolute;
    bottom: 10%;
    top: 20%;
    left: 5%;
    }

    .badges{
      position: absolute;
      top: 50%;
    }

    br.phone{
      display: block;
    }
    .eyecatch-content h2{
      font-size: 28px;
      line-height: 1.5;
    }

    .eyecatch-content p{
      margin-top: 20px;
      line-height: 1.5;
      font-size: 13px;
    }

    span.phone{
      display: none;
    }

    span.phone_show{
      background-image:url(../img/underline_yellow_pen.png);
      background-position: bottom;
      background-repeat: no-repeat;
    }
 
    .logo img {
    height: 30px; 
    }

    .logo {
    padding: 10px 0;
   }
  .course-card p {
      font-size: 13px;
      line-height: 1.7;
      color: #1a1a1a;
      margin-bottom: 10px;
  }

  .news-underline {
    width: 70px;
    height: auto;
  }

  .news-item {
  font-size: 13px;
  display: grid;
  grid-template-columns: 0.3 0.3 0.3; /* 3列まで */
  grid-template-rows: auto auto; /* 2行構成 */
  gap: 5px;
}

.news-link {
  grid-column: 1 / -1; /* 1列目から最後まで横断して配置 */
}

.btn-more {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: 14px 62px;
    border-radius: 999px;
    background: #c6d7ea;
    color: var(--blue);
    font-weight: 800;
    text-decoration: none;
    transition: background-color .2s 
ease, color .2s 
ease;
    font-size: 14px;
    margin-bottom: 50px;
}

br.brpc{
  display: none;
}

.story-bg {
    display: none;
}
.story-title {
    font-size: clamp(16px, 2.4vw, 20px);
}
.title-icon {
    right: clamp(60px, 2.4vw, 28px);
}

.story-body p {
    margin: 1.6em 0;
    font-size: 13px;
}

.feature {
    display: block;
    text-align: center; 
    margin-bottom: 20px;
}

.feature__point{
  width: 100%;
}
.feature__point img{
  margin:0 auto 15px;
  width: 20%; 
}

.guarantee-bg{
  display: none;
}
.guarantee-inner {
    border: 15px solid yellow;
}

.school__addr{
  font-size: 13px;
}

.school__table dt {
    color: var(--blue);
    font-weight: 700;
    border-right:0px solid var(--line);
}

.school {
    padding: clamp(24px, 4vw, 48px) 16px;
    max-width: 90%;
    margin: 0 auto;
    width: 90%;
}

.smart-footer__logo {
    height: 30px;
}

.smart-footer__address {
  font-size: 12px;
}

.smart-footer__links a {
    color: white;
    text-decoration: none;
    font-size: 12px;
}

.smart-footer__copy {
    font-size: 10px;
}

.contact-btn {
    justify-content: center;
}

 .menu-toggle { display: flex; }

  nav ul {
    position: fixed;
    inset: 0 0 auto 0;          /* 上0/左右0。高さは自動 */
    top: 0;
    display: block;             /* 横並び→縦並びに */
    height: auto;
    line-height: normal;
    padding: 70px 16px 16px;    /* headerぶん上に余白（例：70px） */
    border-radius: 0;
    background: #1f3f91;
    transform: translateY(-110%);  /* 画面上に隠す */
    transition: transform .35s ease;
    z-index: 1001;              /* header(1000)より前面 */
  }

  nav ul.open {
    transform: translateY(0);   /* スライドダウンして表示 */
  }

  nav ul li { margin: 0; }
  nav ul li a {
    display: block;
    padding: 14px 8px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }

  /* アイコン画像があるhomeだけ高さ調整 */
  nav ul li a img { height: 18px; padding-top: 0; vertical-align: middle; }

  /* お問い合わせボタンを目立たせる（任意） */
  nav ul li .contact-btn {
    justify-content: center; margin-top: 8px; border-radius: 8px;
  }

/* about.html */
  .eyecatch img.bg{
    width: 100%;
  }

    .smart-banner__inner {
      padding: 0px;
      border-radius: 0px;
  }
.smart-banner__content {
    left: 10px;
}
  .smart-banner__arrow .icon {
    width: 20px;
    height: 20px;
}

  p.guarantee_ttl_sub_txt {
      font-size: 13px;
      line-height: 1.5;
  }
  .smart-policy__lead span {
    font-size: 16px;
}

.guarantee {
    position: relative;
    padding: 40px 16px;
    width: 90%;
    margin: 20px auto;
}

.guarantee_rule h3 {
    text-align: center;
    margin-bottom: 20px;
}

.guarantee_rule ol {
    margin-left: 0;
    font-size: 13px;
    line-height: 1.5;
}
.smart-banner {
    margin: 100px auto 0;
    padding-bottom: 100px;
    width: 95%;
}

.decor-ttl2::before {
    height: 45px;
}
.info-row {
    min-height: auto;
}
.expenses-body {
    padding: 12px 5px;
    line-height: 1.5;
}

.expenses-row {
    grid-template-columns: 0.6fr 1fr;
    border: 1px solid var(--blue);
}
.sutton__lead {
    margin-left: 0;
}
.sutton__powers {
    grid-template-columns: repeat(1, 1fr);
}

.power img {
    max-width: 100%;
    margin-bottom: 5px;
}

.power {
    margin-bottom: 20px;
}
.sutton-tagbox__label {
    left: -1px;
}
.sutton-tagbox__list li {
    padding-left: 20px;
}

h3.sutton_catch {
    line-height: 2;
    font-size: 14px;
}
.class_images ul {
    flex-direction: column;
    align-items: center;
}
.class_images {
    width: 95%;
}
.class_images ul li {
    width: 100%;
    margin-bottom: 20px;
}
.class_images ul li p:nth-child(2) {
    margin-top: 10px;
    font-size: 13px;
}

.flow {
    padding: 0;
    width: 95%;
    margin: auto;
}

.flow-pill {
    display: block;
    width: 400px;
  }
.flow-step__head {
    position: absolute;
    left: 0;
    top: 13px;
    z-index: 2;
}

.contact-form {
  margin-top: -100px;
}

.eyecatch .budges img{
  width: 10px;
}
.decor-ttl::before {
    content: "";
    position: absolute;
    top: 5px;
    right: -13px;
    width: 12px;
    height: 47px;
    background: var(--ttl-bar);
    z-index: -10;
}
.contact-btn {
    background: #f5e47a;
    color: black;
    padding: 17px 17px;}

    .btn {
    display: inline-block;
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 10px 8px;
    background: var(--blue);
    text-decoration: none;
    border-radius: 6px;
}
.school__tel a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
    margin-right: 20px;
    font-size: 17px;
}

.pickup-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 40px);
    max-width: 90%;
    margin: 0 auto 28px;
}

.features__inner {
  width: 90%;
  margin: auto;
}

.smart-footer {
  width: 100%;
}

  .sutton-tagbox__label,
  .flow-step__head{
    left: 0;
  }

.decor-ttl,
.decor-ttl2,
.decor-ttl3{
  overflow: clip; /* hiddenでもOK */
}


}

@media screen and (max-width: 500px) {
  .smart-model__item{ 
    flex-basis: 100%; 
  }
  .smart-model__bubble{ 
    width: 180px;
    height: 180px; 
  }
  .smart-model__badge{ 
    width:60px; 
    height:60px; 
    font-size:24px; 
  }
  .sutton-tagbox__label{
    left: 20px;
  }
    .flow-pill{
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .flow-body{
    grid-template-columns: 48px 1fr;
    border-radius: 6px;
  }

}