/* =====================================================================
   トップ以外のページの部品（site.css の後に読む）。色と形は site.css の変数（今のホームページの値）を使う
   ===================================================================== */

/* ---------- ページの見出しの帯（パンくず・h1・ひとこと） ---------- */
.ph { position: relative; overflow: hidden; text-align: center; padding: 34px 24px 56px;
  background: radial-gradient(60% 90% at 15% 20%, #fffbe9 0%, transparent 70%), radial-gradient(50% 80% at 90% 80%, #f4f7dc 0%, transparent 70%), linear-gradient(160deg, #fdf8e4 0%, #f1f3d6 100%); }
.ph::before, .ph::after { content: ''; position: absolute; border-radius: 47% 53% 45% 55% / 52% 46% 54% 48%; background: radial-gradient(circle at 40% 40%, #c9d97c, #a9c35a); opacity: .85; }
.ph::before { width: 130px; height: 110px; left: -40px; top: -40px; }
.ph::after { width: 110px; height: 100px; right: -30px; bottom: -40px; }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-size: 13px; color: var(--ink-2); margin-bottom: 22px; }
.crumbs li + li::before { content: '›'; margin: 0 8px; color: var(--lime); font-weight: 900; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.ph-h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: .12em; line-height: 1.5; text-shadow: 0 0 14px #fff; }
.ph-lead { margin: 14px auto 0; max-width: 40em; font-weight: 700; line-height: 1.9; }
.ph .rise { opacity: 0; transform: translateY(.5em); animation: rise 1s var(--ease-out) forwards; }
.sec-in.narrow { max-width: 860px; }
.center { text-align: center; }
.note-s { font-size: 14px; color: var(--ink-2); margin-top: 14px; line-height: 1.8; }
.box-h { font-size: 20px; font-weight: 900; letter-spacing: .06em; line-height: 1.6; margin: .6em 0 .2em; }
.links3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 34px; margin-top: 56px; }
.links3 .btn { margin: 0; width: 290px; }
br.sp { display: none; }

/* ---------- まほちゃんの1週間 ---------- */
.aday-cover img { max-width: 760px; width: 100%; margin: 0 auto 72px; border-radius: 30px; box-shadow: 6px 6px 0 var(--yellow); }
.diary { display: grid; gap: 64px; counter-reset: d; }
.day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.day:nth-child(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.day:nth-child(even) .day-img { order: 2; }
.day-img { position: relative; }
.day-img img { width: 100%; max-width: 280px; margin: 10px auto 0; border-radius: 50px; box-shadow: 4px 4px 4px var(--yellow); }
.day-badge { position: absolute; left: 50%; top: -8px; transform: translateX(-140px); width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; align-content: center; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: 0 4px 10px rgba(87, 63, 39, .2); }
.day-badge small { font-size: 10px; margin-top: 2px; }
.day-badge.sat { background: #5b8fd1; } .day-badge.sun { background: #e58a6e; }
.day-h { font-size: 20px; font-weight: 900; letter-spacing: .1em; margin-top: .4em; }
.day-box p { font-weight: 700; }
.msg { margin: 0 auto; max-width: 42em; }
.msg p { line-height: 2; margin: 1em 0; }
.msg-list, .kids { display: grid; gap: 8px; margin: 1.2em 0; }
.msg-list li, .kids li { position: relative; padding-left: 1.6em; font-weight: 900; }
.msg-list li::before, .kids li::before { content: ''; position: absolute; left: .2em; top: .45em; width: .55em; height: .9em; border: solid var(--green); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.kids { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 42em; margin: 32px auto; padding: 26px 30px; background: var(--card); border-radius: 24px; }
.msg-end { font-size: 19px; font-weight: 900; text-align: center; color: var(--green-deep); }

.qa-link a { font-weight: 900; color: var(--green-deep); }

/* ---------- 無料体験 ---------- */
.trial-big { display: flex; justify-content: center; align-items: baseline; gap: .15em; margin: -10px 0 36px; font-weight: 900; }
.trial-big .t { font-size: 24px; }
.trial-big .n { font-size: 110px; line-height: 1; color: #ee8a1e; -webkit-text-stroke: 4px #fff; paint-order: stroke; text-shadow: 0 6px 0 rgba(238, 138, 30, .2); }
.trial-big .u { font-size: 40px; color: #ee8a1e; margin-right: .2em; }
.steps-6 .step:nth-child(4) .step-no { background: var(--yellow); }
.steps-6 .step:nth-child(5) .step-no { background: var(--lime); }
.steps-6 .step:nth-child(6) .step-no { background: var(--green); }

/* ---------- 教室のご案内 ---------- */
.gallery { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: 16px; }
.gallery figure { position: relative; }
.gallery .g-main { grid-row: span 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; aspect-ratio: 4 / 3; }
.gallery .g-main img { aspect-ratio: auto; height: 100%; }
.gallery figure:not(.g-main) img { aspect-ratio: 16 / 10; }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 255, 255, .92); border-radius: 99px; padding: 3px 14px; font-size: 13px; font-weight: 700; }
.info { display: grid; grid-template-columns: 9em minmax(0, 1fr); max-width: 860px; margin: 0 auto; border-top: 2px dashed var(--yellow); }
.info dt, .info dd { padding: 18px 12px; border-bottom: 2px dashed var(--yellow); }
.info dt { font-weight: 900; color: var(--green-deep); }
.info dd small { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 6px; }
.hours { display: grid; gap: 4px; }
.hours b { display: inline-block; width: 4em; }
.map { max-width: 960px; margin: 48px auto 0; border-radius: 26px; overflow: hidden; box-shadow: 0 10px 30px rgba(87, 63, 39, .1); aspect-ratio: 16 / 9; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- コース・料金：シミュレーター（ご説明資料の形） ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: stretch; margin-bottom: 56px; }
.sim-in { background: var(--card); border-radius: 26px; padding: 26px; box-shadow: var(--shadow); }
.sim-q { font-size: 20px; font-weight: 900; text-align: center; margin-bottom: 18px; letter-spacing: .06em; }
.sim-btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sim-btn { font: inherit; font-size: 19px; font-weight: 900; color: var(--ink); background: #fff; border: 2px solid var(--lime); border-radius: 16px; padding: 10px 2px 8px; cursor: pointer; line-height: 1.25; transition: background .2s, transform .15s, box-shadow .2s; }
.sim-btn small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.sim-btn:hover { background: var(--tokuchou); }
.sim-btn[aria-pressed="true"] { background: var(--lime); box-shadow: inset 0 0 0 2px var(--green); transform: translateY(1px); }
.sim-note { text-align: center; font-size: 13.5px; color: var(--ink-2); margin-top: 14px; }
.sim-res { position: relative; border-radius: 26px; background: var(--orange-pale); border: 2px dashed #fff; box-shadow: 0 0 0 5px var(--orange-pale); padding: 26px; display: grid; align-content: center; text-align: center; min-height: 300px; }
.sim-empty { font-weight: 700; color: var(--ink-2); line-height: 2; }
.sim-out { display: none; }
.sim-res.has .sim-empty { display: none; }
.sim-res.has .sim-out { display: block; animation: rise .6s var(--ease-out); }
.sim-plan { display: inline-block; padding: 4px 18px; border-radius: 99px; background: #fff; font-weight: 900; color: var(--green-deep); }
.sim-price { margin-top: 10px; font-weight: 900; }
.sim-price .v { font-size: 64px; line-height: 1.1; color: #ee8a1e; font-variant-numeric: tabular-nums; display: inline-block; }
.sim-price .u { font-size: 24px; color: #ee8a1e; margin-left: 4px; }
.sim-price .t { display: block; font-size: 13.5px; color: var(--ink-2); }
.v.bump { animation: bump .45s var(--ease-out); }
@keyframes bump { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
.sim-per { margin-top: 6px; font-weight: 700; }
.sim-per b { font-size: 20px; }
.sim-year { margin-top: 18px; padding-top: 16px; border-top: 2px dashed #fff; display: grid; gap: 4px; }
.sim-year .k { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.sim-year .yv { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sim-year .yv small { display: block; font-size: 14px; font-weight: 700; }
.sim-year .yn { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.fee-table { max-width: 860px; margin: 0 auto; }
.fee-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fee-table th, .fee-table td { padding: 10px 8px; border-bottom: 2px dashed #fff; text-align: right; font-weight: 700; }
.fee-table th:first-child, .fee-table td:first-child { text-align: left; }
.fee-table th { font-size: 13.5px; color: var(--ink-2); }
.fee-table td small { font-size: 12px; color: var(--ink-2); margin-left: 4px; }
.fee-table td.m { font-weight: 900; color: #ee8a1e; }
.fee-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-bottom: 64px; }
.fee-card { background: var(--card); box-shadow: var(--shadow); padding: 22px 16px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.fee-card::before { flex: none; }
.fee-card::before { content: ''; display: block; width: 110px; height: 24px; margin: -36px auto 12px; background: var(--yellow); opacity: .4; transform: rotate(-3deg); }
.fee-card h3 { font-size: 17px; font-weight: 900; letter-spacing: .08em; }
.fee-card .yen { font-size: 38px; font-weight: 900; color: #ee8a1e; line-height: 1.3; font-variant-numeric: tabular-nums; }
.fee-card .yen small { font-size: 16px; margin-left: 2px; }
.fee-card .per { display: block; font-size: 13px; color: var(--ink-2); }
.fee-card p:not(.yen) { font-size: 13.5px; line-height: 1.7; }
.fee-card.zero .yen { color: var(--green-deep); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: center; }
.split img { border-radius: 30px; box-shadow: 4px 4px 4px var(--yellow); width: 100%; }
.season-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.season-card { padding: 1.3em 1em; border: 2px dashed #fff; text-align: center; position: relative; }
.season-card.su { background: var(--orange-pale); box-shadow: 0 0 0 5px var(--orange-pale); }
.season-card.wi { background: #e4eef6; box-shadow: 0 0 0 5px #e4eef6; }
.season-card.sp { background: var(--green-pale); box-shadow: 0 0 0 5px var(--green-pale); }
.season-card h3 { font-size: 20px; font-weight: 900; letter-spacing: .1em; margin-bottom: 8px; }
.season-card li { display: flex; justify-content: space-between; padding: 8px 6px; border-bottom: 2px dashed #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.season-card li b { color: #ee8a1e; font-weight: 900; }
.pay { display: flex; gap: 26px; align-items: center; justify-content: center; }
.cal27 { flex: none; width: 110px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow); text-align: center; }
.cal27 .m { display: block; background: var(--green); color: #fff; font-weight: 900; font-size: 14px; padding: 4px 0; }
.cal27 .n { display: block; font-size: 52px; font-weight: 900; line-height: 1.3; color: var(--ink); }
.lead-b { font-size: 20px; font-weight: 900; line-height: 1.7; }

/* ---------- 割引の細い帯（遼様が選んだ④） ---------- */
.strips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 22px; border: 4px solid var(--green); border-radius: 20px; background-color: #fffef6; background-image: linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px); background-size: 16px 16px; }
.strip.y { border-color: var(--yellow); }
.strip b { display: block; font-size: 20px; font-weight: 900; letter-spacing: .06em; }
.strip small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.strip span { font-size: 44px; font-weight: 900; color: #ee8a1e; letter-spacing: .04em; line-height: 1; -webkit-text-stroke: 3px #fff; paint-order: stroke; text-shadow: 0 3px 0 rgba(238, 138, 30, .25); }

/* ---------- 文章のページ（プライバシーポリシー・特商法） ---------- */
.doc h2 { font-size: 19px; font-weight: 900; margin: 2em 0 .6em; padding-left: .7em; border-left: 6px solid var(--lime); line-height: 1.5; }
.doc p { line-height: 1.95; margin: .6em 0; }
.dots { margin: .6em 0 .6em 1.2em; }
.dots li { list-style: disc; line-height: 1.9; }
.doc .info a { color: var(--green-deep); font-weight: 700; }
.tel-wrap { padding: 8px 18px 40px; }

@media (max-width: 960px) {
  br.sp { display: inline; }
  .ph { padding: 24px 18px 44px; }
  .day, .day:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  .day:nth-child(even) .day-img { order: 0; }
  .day-img img { max-width: 220px; }
  .day-badge { transform: translateX(-120px); width: 56px; height: 56px; font-size: 21px; }
  .kids { grid-template-columns: 1fr; padding: 20px; }
  .trial-big .n { font-size: 84px; }
  .trial-big .t { font-size: 19px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery .g-main { grid-column: span 2; grid-row: auto; }
  .gallery .g-main img { aspect-ratio: 4 / 3; }
  .gallery figure:last-child { grid-column: span 2; }
  .info { grid-template-columns: 1fr; }
  .info dt { padding-bottom: 0; border-bottom: 0; }
  .info dd { padding-top: 4px; }
  .map { aspect-ratio: 4 / 3; }
  .sim { grid-template-columns: 1fr; }
  .sim-btns { gap: 8px; }
  .sim-btn { font-size: 17px; }
  .sim-price .v { font-size: 54px; }
  .fee-table th:nth-child(3), .fee-table td:nth-child(3) { display: none; }
  .fee-cards { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .fee-card .yen { font-size: 30px; }
  .split { grid-template-columns: 1fr; }
  .season-cards { grid-template-columns: 1fr; gap: 30px; }
  .pay { flex-direction: column; text-align: center; }
  .strips { grid-template-columns: 1fr; gap: 14px; }
  .strip { padding: 12px 16px; }
  .strip b { font-size: 17px; }
  .strip span { font-size: 36px; }
  .links3 { gap: 26px; }
  .links3 .btn { width: 100%; }
}


/* ---------- 割引（旧サイトの画像）：PC は2枚並び、スマホは横に送る ---------- */
.disc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.disc-item img { width: 100%; border-radius: 18px; box-shadow: 0 8px 22px rgba(87, 63, 39, .12); }
.peek-dots { display: none; }
.disc-text { max-width: 860px; margin: 22px auto 0; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.disc-text b { color: var(--ink); }
.related .sec-h2 { margin-bottom: 36px; }
.related .links3 { margin-top: 0; }
@media (max-width: 960px) {
  .disc { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; }
  .disc::-webkit-scrollbar { display: none; }
  .disc-item { flex: none; width: 84%; scroll-snap-align: center; }
  .peek-dots { display: flex; justify-content: center; gap: 8px; }
  .peek-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ddd5c4; transition: background .3s, width .3s; }
  .peek-dots i.on { width: 22px; border-radius: 5px; background: var(--green); }
}

/* ---------- まほちゃんの1週間：メッセージの札 ---------- */
.msg { text-align: center; }
/* 費用のカード：テープはカードの上に固定し、中身を上下の真ん中に（2026-10-03 遼様「上寄せになっている」） */
.fee-card { position: relative; padding: 34px 16px 26px; }
.fee-card::before { position: absolute; top: -12px; left: 50%; margin: 0; transform: translateX(-50%) rotate(-3deg); }

/* PC だけで改行する（スマホでは文の流れのまま） */
br.pc { display: inline; }
@media (max-width: 960px) { br.pc { display: none; } }

/* まほちゃんの1週間：どんな子に（カプセルをやめ、緑のチェックの一覧に。2026-10-04 遼様） */
.tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; max-width: 920px; margin: 0 auto 36px; padding: 26px 32px; background: var(--card); border-radius: 24px; }
.tags li { position: relative; padding-left: 1.6em; white-space: nowrap; font-weight: 900; font-size: 15.5px; line-height: 1.6; }
.tags li::before { content: ""; position: absolute; left: .25em; top: .3em; width: .5em; height: .85em; border: solid var(--green); border-width: 0 3px 3px 0; transform: rotate(40deg); }
@media (max-width: 960px) { .tags { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 20px 18px; } .tags li { font-size: 14px; } }
/* スマホは1列（2列だと「勉強のやり方がわからない子」などが途中で折れる。2026-10-04 遼様のスマホで確認） */
@media (max-width: 640px) { .tags { grid-template-columns: 1fr; gap: 8px; padding: 18px 22px; width: fit-content; max-width: 100%; } .tags li { font-size: 15px; } }

/* シミュレーター：押せることが分かる一言 */
.sim-tap { text-align: center; font-size: 14px; font-weight: 700; color: var(--green-deep); margin: -10px 0 14px; }
.sim-tap::before { content: '↓ '; }
/* 長い写真の説明は折り返す */
.gallery figcaption { max-width: calc(100% - 24px); line-height: 1.5; padding: 4px 14px; border-radius: 14px; }