@charset "UTF-8";

/* =========================================================
   中学高校合同説明会 2026 ランディングページ
   学習塾協議会いしかわ
   スマートフォン優先（モバイルファースト）／プレーンCSSのみ
   ========================================================= */

/* ---------- 変数 ---------- */
:root{
  --green:      #12b528;   /* チラシの緑 */
  --green-dark: #2b7d1f;   /* 白文字を載せられる緑 */
  --green-deep: #1d5c14;
  --green-pale: #eef8ea;
  --red:        #d81f26;   /* チラシの赤リボン */
  --red-dark:   #ab161c;
  --ink:        #1d2320;
  --ink-sub:    #4d5a53;
  --line:       #d8e3d4;
  --bg:         #ffffff;
  --bg-tint:    #f4faf1;
  --radius:     12px;
  --wrap:       720px;
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  padding:0 0 76px;               /* 追従CTAぶんの余白 */
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;
  font-size:16px;
  line-height:1.8;
  letter-spacing:.02em;
  word-break:normal;
  overflow-wrap:anywhere;
  line-break:strict;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--green-deep); }
h1,h2,h3,p,dl,dd,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }

/* ---------- 共通レイアウト ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.sec{ padding:44px 0; }
.sec--tint{ background:var(--bg-tint); }
.sec--green{ background:var(--green-dark); color:#fff; }
.sec__ttl{
  font-size:1.5rem; line-height:1.45; font-weight:700;
  text-align:center; margin-bottom:8px; padding-bottom:14px; position:relative;
}
.sec__ttl::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:4px; border-radius:2px; background:var(--green);
}
.sec__ttl--wh{ color:#fff; }
.sec__ttl--wh::after{ background:#fff; }
.sec__ttl + *{ margin-top:24px; }

.lead{ font-size:1rem; margin-top:16px; }
.small{ font-size:.85rem; color:var(--ink-sub); }
.link{ color:var(--green-deep); font-weight:700; }

/* ---------- ヘッダー ---------- */
.hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:#fff; border-bottom:3px solid var(--green);
}
.hd__brand{ font-size:.9rem; font-weight:700; line-height:1.3; }
.hd__btn{
  flex:none; background:var(--red); color:#fff; text-decoration:none; font-weight:700;
  font-size:.85rem; padding:8px 16px; border-radius:999px;
}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fbfff8 0%, var(--green-pale) 100%);
  padding:28px 0 32px;
  text-align:center;
}
.hero__eyebrow{
  display:inline-block; font-size:.85rem; font-weight:700; color:#fff;
  background:var(--green-dark); border-radius:999px; padding:4px 16px;
}
.hero__title{ margin-top:14px; font-weight:800; line-height:1.15; letter-spacing:.01em; }
.hero__title-main{ display:block; font-size:2rem; color:var(--green-deep); }
.hero__title-year{ display:block; font-size:2.4rem; color:var(--green-dark); letter-spacing:.06em; }
.sp-br{ display:inline; }

.hero__catch{
  margin-top:14px; font-size:1.02rem; font-weight:700; line-height:1.7; color:var(--green-deep);
}

.hero__free{
  display:inline-block; margin-top:14px;
  background:var(--red); color:#fff; font-weight:800; font-size:1.05rem;
  padding:6px 22px; border-radius:6px; box-shadow:0 3px 0 var(--red-dark);
}

.hero__date{
  margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--ink);
}
.hero__date-day{ font-size:3.6rem; font-weight:800; line-height:1; letter-spacing:-.01em; }
.hero__date-day .dot{ margin:0 .02em; }
.hero__date-sub{ display:flex; flex-direction:column; font-weight:800; font-size:1.25rem; line-height:1.25; }

.hero__spec{
  margin-top:20px; background:#fff; border:2px solid var(--green);
  border-radius:var(--radius); padding:14px 16px; text-align:left;
}
.hero__spec > div{ display:flex; gap:10px; padding:6px 0; }
.hero__spec > div + div{ border-top:1px dashed var(--line); }
.hero__spec dt{
  flex:none; width:3.6em; text-align:center; font-size:.8rem; font-weight:700;
  color:#fff; background:var(--green-dark); border-radius:4px; height:1.9em; line-height:1.9em;
  margin-top:.25em;
}
.hero__spec dd{ font-weight:700; font-size:1.02rem; }

.hero__note{ margin-top:10px; font-size:.85rem; color:var(--ink-sub); }
.hero__students{ margin:18px auto 0; width:200px; height:auto; }

/* ---------- ボタン ---------- */
.btn{
  display:block; width:100%; max-width:420px; margin:22px auto 0;
  text-align:center; text-decoration:none; font-weight:800; font-size:1.1rem;
  padding:16px 20px; border-radius:999px; color:#fff;
}
.btn--cta{ background:var(--red); box-shadow:0 4px 0 var(--red-dark); }
.btn--cta:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--red-dark); }
.btn--sub{
  background:var(--green-dark); box-shadow:0 4px 0 var(--green-deep);
  font-size:1rem; padding:13px 18px; margin-top:16px;
}
.btn--sub:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--green-deep); }

/* ---------- 3つのポイント ---------- */
.points{ display:grid; gap:16px; }
.points__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 20px;
}
.points__num{
  display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.08em;
  color:#fff; background:var(--green); border-radius:4px; padding:2px 10px;
}
.points__ttl{ margin-top:10px; font-size:1.12rem; line-height:1.5; color:var(--green-deep); }
.points__txt{ margin-top:8px; font-size:.95rem; }

/* ---------- 説明会の内容（時間帯ごとのメニュー） ---------- */
.grp{
  margin-top:28px; font-size:1rem; font-weight:700; color:#fff;
  background:var(--green-dark); border-radius:6px; padding:8px 14px; letter-spacing:.02em;
}
.sec__ttl + .grp{ margin-top:24px; }
.menu{ display:grid; gap:14px; margin-top:14px; }
.menu__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.menu__item--accent{ border-color:#f0c3c5; }
.menu__item img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.menu__body{ padding:14px 16px 18px; }
.menu__ttl{
  font-size:1.12rem; line-height:1.4; color:var(--green-deep);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.menu__item--accent .menu__ttl{ color:var(--red-dark); }
.menu__txt{ margin-top:8px; font-size:.95rem; }
.tag{
  flex:none; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  color:#fff; background:var(--red); border-radius:4px; padding:2px 8px; line-height:1.6;
}
/* ---------- 表 ---------- */
.table{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.table th,.table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:.97rem; vertical-align:top; }
.table tr:last-child th,.table tr:last-child td{ border-bottom:0; }
.table th{
  width:5.6em; background:var(--green-pale); color:var(--green-deep);
  font-weight:700; white-space:nowrap;
}
.free-txt{ color:var(--red); font-size:1.15rem; }
.tbd{
  display:inline-block; background:#fff6d6; border:1px dashed #d8a900; color:#7a5c00;
  font-size:.85rem; font-weight:700; padding:1px 8px; border-radius:4px;
}

/* ---------- 参加校 ---------- */
.coming{
  text-align:center; font-size:1.15rem; font-weight:800; color:var(--green-deep);
  background:#fff; border:2px dashed var(--green); border-radius:var(--radius); padding:18px 14px;
}
.acc{ margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.acc__sum,.faq__q{ cursor:pointer; list-style:none; }
.acc__sum::-webkit-details-marker,.faq__q::-webkit-details-marker{ display:none; }
.acc__sum{ padding:14px 44px 14px 16px; font-weight:700; font-size:.95rem; position:relative; }
.acc__sum::after,.faq__q::after{
  content:""; position:absolute; right:18px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--green-dark); border-bottom:2px solid var(--green-dark);
  transform:translateY(-70%) rotate(45deg); transition:transform .15s;
}
.acc[open] .acc__sum::after,.faq[open] .faq__q::after{ transform:translateY(-20%) rotate(225deg); }
.acc__body{ padding:0 16px 16px; border-top:1px solid var(--line); }
.acc__h3{ margin-top:14px; font-size:1rem; color:var(--green-deep); }
.schools{ margin-top:8px; display:grid; gap:6px; }
.schools li{ font-size:.95rem; padding-left:1.1em; position:relative; }
.schools li::before{ content:"・"; position:absolute; left:0; color:var(--green); }
/* 2026年の参加校リスト。見出し（.grp）の下に白いカードで並べる */
.schools--card{
  margin-top:10px; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px;
}
.schools--card li{ font-size:1rem; font-weight:700; color:var(--ink); }

/* ---------- 説明会の内容 ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-left:6px solid var(--green);
  border-radius:var(--radius); padding:18px; margin-top:16px;
}
.card--accent{ border-left-color:var(--red); background:#fff7f7; }
.card__ttl{ font-size:1.1rem; line-height:1.5; color:var(--green-deep); }
.card--accent .card__ttl{ color:var(--red-dark); }
.card__txt{ margin-top:8px; font-size:.95rem; }

/* ---------- アクセス ---------- */
.access__name{ font-size:1.2rem; font-weight:800; color:var(--green-deep); }
.access__addr{ margin-top:4px; font-size:1rem; }
.access__list{ margin-top:14px; display:grid; gap:8px; }
.access__list li{ font-size:.95rem; padding-left:1.2em; position:relative; }
.access__list li::before{ content:"●"; position:absolute; left:0; font-size:.7em; top:.45em; color:var(--green); }

/* ---------- チラシ ---------- */
.flyer{ width:100%; max-width:520px; margin:0 auto; border:1px solid var(--line); border-radius:10px; background:#fff; }

/* ---------- よくある質問 ---------- */
.faq{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-top:12px; }
.faq__q{ position:relative; padding:14px 44px 14px 46px; font-weight:700; font-size:.97rem; line-height:1.6; }
.faq__q::before{
  content:"Q"; position:absolute; left:14px; top:13px;
  width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%;
  background:var(--green-dark); color:#fff; font-size:.8rem; font-weight:800;
}
.faq__a{ position:relative; padding:0 16px 16px 46px; border-top:1px solid var(--line); }
.faq__a::before{
  content:"A"; position:absolute; left:14px; top:14px;
  width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%;
  background:var(--red); color:#fff; font-size:.8rem; font-weight:800;
}
.faq__a p{ padding-top:14px; font-size:.95rem; }

/* ---------- 申込フォーム ---------- */
.formbox{
  margin-top:20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
/* 枠の高さは画面1つぶんに収める。
   枠を長くするとフォーム全体が一度に見えて記入は楽になるが、
   送信後の完了メッセージや入力漏れのエラーが枠の上のほうに出るため、
   送信ボタンの位置からは見えず「送ったのに反応がない」状態になる。
   画面に収めておけば、枠の中の表示が必ず目に入る。 */
.formbox iframe{
  display:block; width:100%; border:0;
  height:85vh; min-height:520px; max-height:860px;
}
.formbox__note{
  margin:0; padding:10px 14px; font-size:.85rem; color:var(--ink-sub);
  background:var(--green-pale); border-bottom:1px solid var(--line);
}
.editnote{
  margin-top:16px; background:#fff2f2; border:2px solid var(--red); border-radius:8px;
  padding:14px; font-size:.9rem; color:var(--red-dark); font-weight:700; line-height:1.8;
}

/* ---------- フッター ---------- */
.ft{ background:var(--green-deep); color:#fff; padding:32px 0 28px; text-align:center; }
.ft__logo{ width:220px; margin:0 auto; background:#fff; border-radius:8px; padding:10px 12px; }
.ft__txt{ margin-top:16px; font-size:.9rem; line-height:1.9; }
.ft__links{ margin-top:18px; display:grid; gap:10px; }
.ft__links a{ color:#fff; font-size:.95rem; font-weight:700; }
.ft__copy{ margin-top:22px; font-size:.8rem; color:rgba(255,255,255,.8); }

/* ---------- 追従CTA ---------- */
.fixcta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); border-top:1px solid var(--line);
}
.fixcta__btn{
  display:block; max-width:520px; margin:0 auto; text-align:center; text-decoration:none;
  background:var(--red); color:#fff; font-weight:800; font-size:1.05rem;
  padding:14px 12px; border-radius:999px; box-shadow:0 3px 0 var(--red-dark);
}
/* 申込みセクションに移動したら、この赤いバーを消す。
   画面下に固定されたままだと、フォームの「送信」ボタンの上に重なり、
   送信のつもりで赤いバーを押してしまう。JavaScriptを使わずに :target で消しています。 */
#apply:target ~ .fixcta{ display:none; }

/* =========================================================
   タブレット以上
   ========================================================= */
@media (min-width:600px){
  body{ font-size:17px; padding-bottom:0; }
  .sec{ padding:60px 0; }
  .sec__ttl{ font-size:1.85rem; }
  .sp-br{ display:none; }
  .hero{ padding:40px 0 48px; }
  .hero__title-main{ font-size:2.9rem; }
  .hero__title-year{ font-size:3.1rem; }
  .hero__date-day{ font-size:4.6rem; }
  .hero__date-sub{ font-size:1.6rem; }
  .hero__students{ width:260px; }
  .points{ grid-template-columns:1fr 1fr; }
  .points__item:first-child{ grid-column:1 / -1; }
  .menu{ grid-template-columns:1fr 1fr; }
  .schools{ grid-template-columns:1fr 1fr; }
  .fixcta{ display:none; }              /* PCではヒーローのCTAで十分 */
}

@media (min-width:900px){
  :root{ --wrap:860px; }
  .hero__spec{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  .hero__spec > div:nth-child(2){ border-top:0; }
}

/* ---------- 印刷 ---------- */
@media print{
  .fixcta,.hd__btn,.formbox{ display:none; }
  body{ padding-bottom:0; }
  .sec{ padding:20px 0; }
}