/* こどもスクール 会員特典 /会員特典/ と バナー [ks_perks_banner]（2026-11-05・inc/perks.php）
   Sana「アメックスのゴールドカードに入ると こんな特典が ついてくる みたいな」→ 会員カードの 絵（金）＋ 特典 01〜 の 番号。
   にぎやか v4：クリームの 地・水玉・白い 角丸・色の ふち（ぐるっと 一周）・わくま・黄色の マーカー。
   かたむけない・箱の 片側だけの 色の 線は 使わない（左・上・下とも）・カードの 影は うすい 茶色の ぼかしだけ。
   スマホは html{zoom:.75} → 680px 以下は 大きめに（lp-apps.css と 同じ 考え方）。site.src.css は さわらない */

.kt, .kt-bn-wrap, .kt-hubcard {
  --gold: #E2A400; --gold-d: #8A5E00; --gold-l: #FFF4D1;
  --g-card: linear-gradient(135deg, #FBE7A1 0%, #EBC35A 34%, #F8E19A 52%, #DDAA3A 78%, #F2D27A 100%);
}
.kt .so, .kt-bn .so { --c: #F07A28; --cl: #FFEBDA; --cd: #B9520E; }
.kt .ka, .kt-bn .ka, .kt-bn .yj { --c: #2F9C6A; --cl: #E2F4EA; --cd: #1D7049; }
.kt .ar, .kt-bn .ar { --c: #E9578A; --cl: #FDE6EE; --cd: #B83063; }
.kt .en, .kt-bn .en { --c: #6C5CE7; --cl: #ECE9FF; --cd: #4A3DB0; }
.kt .pg, .kt-bn .pg { --c: #0096DB; --cl: #E3F4FC; --cd: #00679E; }
.kt .vn, .kt-bn .vn { --c: #D8302A; --cl: #FDE5E3; --cd: #A8231C; }
.kt .pl, .kt-bn .pl { --c: #B07A2E; --cl: #F8EAD2; --cd: #7A4E14; }
.kt .fa { --c: #00A0E9; --cl: #E3F4FC; --cd: #0074B3; }
.kt .fr { --c: #E9578A; --cl: #FDE6EE; --cd: #B83063; }
.kt .nw, .kt-bn .nw { display: inline-block; }
.kt .mk, .kt-bn .mk { background: linear-gradient(transparent 58%, var(--yellow) 58%); padding: 0 .06em; }

/* ---------- 会員カードの 絵（金）----------
   大きさは em（cqw は スマホの html{zoom:.75} と あわせると 字が 大きく ずれるので 使わない）。--kf ＝ カードの はば ÷ 22.5 くらいを 場所ごとに 入れる */
.kt-card { --kf: 18px; font-size: var(--kf); position: relative; display: block; width: 100%; aspect-ratio: 1.586; border-radius: 1.15em; background: var(--g-card);
  box-shadow: 0 18px 30px -14px rgba(110, 72, 0, .55), 0 3px 8px rgba(110, 72, 0, .14), inset 0 0 0 1.5px rgba(255, 255, 255, .55); overflow: hidden; color: #4A3200; line-height: 1; }
.kt-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.5px) 0 0 / 14px 14px; opacity: .55; }
.kt-card::after { content: ""; position: absolute; left: -30%; top: -60%; width: 60%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: rotate(24deg); }
.kt-card-top { position: absolute; left: 6.5%; top: 10%; right: 6.5%; display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.kt-card-top img { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(110, 72, 0, .3); }
.kt-card-top b { font-family: var(--maru); font-weight: 900; font-size: 1.18em; letter-spacing: .04em; }
.kt-card-top em { margin-left: auto; font-style: normal; font-family: "Jost", "Futura", "Avenir Next", sans-serif; font-weight: 600; font-size: .6em; letter-spacing: .22em; color: #6E4A00; }
.kt-card-chip { position: absolute; left: 6.5%; top: 41%; width: 2.8em; height: 2.15em; border-radius: .35em; box-shadow: inset 0 0 0 1px rgba(110, 72, 0, .35);
  background-image: linear-gradient(90deg, transparent 31%, rgba(110, 72, 0, .35) 31%, rgba(110, 72, 0, .35) 34%, transparent 34%, transparent 66%, rgba(110, 72, 0, .35) 66%, rgba(110, 72, 0, .35) 69%, transparent 69%),
    linear-gradient(0deg, transparent 47%, rgba(110, 72, 0, .35) 47%, rgba(110, 72, 0, .35) 53%, transparent 53%), linear-gradient(135deg, #FFF3C4, #D8A93C); }
.kt-card-name { position: absolute; left: 6.5%; bottom: 23%; font-family: var(--maru); font-weight: 900; font-size: 1.65em; letter-spacing: .1em; white-space: nowrap; }
.kt-card-sub { position: absolute; left: 6.5%; bottom: 10%; font-family: var(--maru); font-weight: 700; font-size: .74em; letter-spacing: .04em; color: #6E4A00; white-space: nowrap; }
.kt-card-wk { position: absolute; right: 6%; bottom: 9%; width: 4.4em; height: 4.4em; border-radius: 50%; background: #fff; padding: .22em; box-shadow: 0 2px 6px rgba(110, 72, 0, .3); }
.kt-card.noface .kt-card-wk { display: none; }

/* ---------- 上（ヒーロー）---------- */
.kt .lp-panel { padding-bottom: 64px; }
.kt-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: center; }
.kt-eb { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 22px; padding: 6px 18px 6px 6px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-s);
  font-family: var(--maru); font-weight: 900; font-size: 18px; color: var(--gold-d); letter-spacing: .04em; }
.kt-eb i { width: 34px; height: 34px; border-radius: 50%; background: var(--g-card); display: grid; place-items: center; font-style: normal; color: #4A3200; font-size: 17px; }
.kt-pre { display: block; margin: 0 0 4px; font-family: var(--maru); font-weight: 900; font-size: 27px; line-height: 1.4; color: var(--ink2); }
.kt .lp-h1 { margin-top: 10px; }
.kt-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kt-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); font-family: var(--maru); font-weight: 900; font-size: 15.5px; line-height: 1.3; }
.kt-facts li svg { width: 22px; height: 22px; color: var(--gold-d); flex: none; }
.kt-hero-r { position: relative; max-width: 420px; width: 100%; margin: 0 auto; padding: 24px 0 0; }
.kt-hero-r .kt-card { --kf: 18.6px; }
.kt-hero-wk { position: absolute; right: -14px; top: 168px; width: 126px; height: auto; z-index: 2; filter: drop-shadow(0 4px 6px rgba(60, 40, 20, .16)); }
.kt-medal { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; box-shadow: var(--shadow);
  font-family: var(--maru); font-weight: 900; font-size: 15px; line-height: 1.3; color: var(--ink); }
.kt-medal i { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; line-height: 1.1; text-align: center; color: #4A3200; background: var(--g-card); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #EBC35A; }
.kt-count { display: inline-flex; align-items: baseline; gap: 2px; }
.kt-count b { font-family: "Jost", "Futura", sans-serif; font-weight: 600; font-size: 1.9em; line-height: 1; color: var(--gold-d); }
.kt-count small { margin-left: 6px; font-size: .8em; color: var(--ink2); }

/* ---------- どの教室でも おなじ（図）---------- */
.kt-flow { max-width: 900px; margin: 0 auto; text-align: center; }
.kt-rooms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kt-rooms li { position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 10px 16px; border-radius: 24px; background: var(--cl); border: 3px solid color-mix(in srgb, var(--c) 40%, #fff); }
.kt-rooms img { height: 96px; width: auto; }
.kt-rooms b { font-family: var(--maru); font-weight: 900; font-size: 19px; line-height: 1.35; color: var(--cd); }
.kt-rooms small { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.kt-funnel { display: block; width: 100%; height: 70px; margin: 2px 0 0; }
.kt-funnel path { fill: none; stroke: #E2C46A; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 11; }
.kt-funnel .hd { stroke-dasharray: none; fill: #E2C46A; stroke: none; }
.kt-mid .kt-card { --kf: 8.8px; }
.kt-mid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; max-width: 620px; margin: 0 auto; padding: 18px 24px 18px 18px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.kt-mid b { display: block; font-family: var(--maru); font-weight: 900; font-size: 22px; line-height: 1.45; }
.kt-mid p { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink2); }
.kt-down { display: block; width: 44px; height: 54px; margin: 6px auto; }
.kt-down path { fill: #E2C46A; }
.kt-all { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.kt-all li { padding: 7px 16px 8px; border-radius: 999px; background: var(--cl); color: var(--cd); border: 2.5px solid color-mix(in srgb, var(--c) 45%, #fff); font-family: var(--maru); font-weight: 900; font-size: 16px; line-height: 1.3; }
.kt-all-h { margin: 14px 0 0; font-family: var(--maru); font-weight: 900; font-size: 24px; }
.kt-ex { max-width: 760px; margin: 26px auto 0; padding: 16px 22px 16px 16px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; border-radius: 22px; background: var(--cream); text-align: left; }
.kt-ex img { width: 72px; height: auto; }
.kt-ex p { margin: 0; font-size: 15.5px; line-height: 1.8; }
.kt-ex b { font-family: var(--maru); font-weight: 900; }

/* ---------- 特典の 一覧 ---------- */
.kt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; }
.kt-item { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 22px 20px 18px; border-radius: 28px; background: #fff;
  border: 3px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: var(--shadow-s); }
.kt-vis { width: 124px; }
.kt .ph.ip { position: relative; display: block; aspect-ratio: 1350 / 2760; container-type: inline-size; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; overflow: visible; }
.kt .ph.ip img { position: absolute; left: 0; top: 7.1%; width: 100%; height: 92.9%; object-fit: cover; object-position: top; display: block; border-radius: 0; aspect-ratio: auto; background: #FFF8EA; }
.kt-play { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px 6px; border-radius: 20px; background: var(--cl); }
.kt-play img { width: 100%; height: auto; }
.kt-play img:first-child { grid-column: 1 / -1; width: 62%; justify-self: center; }
.kt-gift { display: block; width: 100%; height: auto; border-radius: 20px; }
.kt-tx { min-width: 0; }
.kt-no { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 6px 0; padding: 3px 12px 3px 4px; border-radius: 999px; background: var(--gold-l); vertical-align: middle; }
.kt-no span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--g-card); font-family: var(--maru); font-weight: 900; font-size: 10.5px; color: #4A3200; letter-spacing: 0; }
.kt-no b { font-family: "Jost", "Futura", sans-serif; font-weight: 600; font-size: 19px; line-height: 1; color: var(--gold-d); letter-spacing: .04em; }
.kt-tag { display: inline-block; margin: 0 0 6px; padding: 2px 12px 3px; border-radius: 999px; background: var(--cl); color: var(--cd); font-family: var(--maru); font-weight: 900; font-size: 13px; line-height: 1.6; vertical-align: middle; }
.kt-item h3 { margin: 2px 0 2px; font-family: var(--maru); font-weight: 900; font-size: 21px; line-height: 1.4; }
.kt-when { margin: 0 0 6px; font-family: var(--maru); font-weight: 700; font-size: 15px; color: var(--cd); line-height: 1.5; }
.kt-desc { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink2); }
.kt-plus { margin: 10px 0 0; padding: 10px 14px; border-radius: 16px; background: var(--cl); font-size: 13.5px; line-height: 1.7; color: var(--ink2); }
.kt-plus b { display: block; font-family: var(--maru); font-weight: 900; font-size: 15px; color: var(--cd); }
.kt-soon { display: inline-block; margin: 10px 0 0; padding: 4px 14px; border-radius: 999px; background: #FFF4A3; color: #6E4A00; border: 2px dashed #E2C640; font-family: var(--maru); font-weight: 900; font-size: 13.5px; line-height: 1.5; }
.kt-plus .kt-soon { display: table; margin-top: 6px; }
.kt-note { max-width: 1080px; margin: 18px auto 0; font-size: 13.5px; line-height: 1.7; color: var(--ink2); text-align: center; }
.kt-note a { font-weight: 700; }

/* ---------- はじめるまで ---------- */
.kt-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1000px; counter-reset: kt; }
.kt-steps li { position: relative; padding: 26px 20px 20px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-s); text-align: center; }
.kt-steps li::before { counter-increment: kt; content: counter(kt); display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; background: var(--g-card); color: #4A3200;
  font-family: "Jost", "Futura", sans-serif; font-weight: 600; font-size: 22px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #EBC35A; }
.kt-steps b { display: block; font-family: var(--maru); font-weight: 900; font-size: 19px; line-height: 1.45; }
.kt-steps small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--ink2); }

/* ---------- よくある 質問 ---------- */
.kt-qa { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.kt-qa details { border-radius: 20px; background: #fff; box-shadow: var(--shadow-s); }
.kt-qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 44px; padding: 14px 18px; font-family: var(--maru); font-weight: 900; font-size: 17px; line-height: 1.5; }
.kt-qa summary::-webkit-details-marker { display: none; }
.kt-qa summary::before { content: "Q"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-l); color: var(--gold-d); font-family: "Jost", sans-serif; font-weight: 600; }
.kt-qa summary::after { content: "＋"; color: var(--ink3); text-align: center; }
.kt-qa details[open] summary::after { content: "－"; }
.kt-qa details p { margin: 0; padding: 0 22px 18px 64px; font-size: 15px; line-height: 1.85; color: var(--ink2); }

.kt-members { max-width: 820px; margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--ink2); }
.kt-members a { font-weight: 700; }

/* ---------- バナー [ks_perks_banner]＝チケット（2026-11-05 夜 Sana「D が よいかも」）----------
   左＝金の 半券（右の はしに まるい 切りこみ）、右＝文と 教科の 札、いちばん 右に 黄色い 矢印。ふちは ぐるっと 一周（片側だけの 線は なし） */
.kt-bn-wrap { margin: 34px auto 0; max-width: 700px; }   /* 札 6つ（しょうぎ・チェス まで）が PC で 1行に 入る はば */
.kt-tk { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 0 16px 0 0; border-radius: 20px;
  background: #fff; border: 3px solid #EBC35A; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(110, 72, 0, .45); transition: transform .15s ease; }
.kt-tk:hover { color: var(--ink); transform: translateY(-2px); }
.kt-tk-stub { align-self: stretch; display: grid; place-items: center; text-align: center; padding: 12px 6px; background: linear-gradient(160deg, #FBE7A1, #E2A400 60%, #F2D27A); color: #4A3200;
  font: 900 16px/1.25 var(--maru); -webkit-mask: radial-gradient(circle 9px at 100% 50%, transparent 98%, #000); mask: radial-gradient(circle 9px at 100% 50%, transparent 98%, #000); }
.kt-tk-stub small { display: block; font: 600 10px "Jost", "Futura", sans-serif; letter-spacing: .2em; color: #6E4A00; margin-bottom: 2px; }
.kt-tk-tx { display: grid; gap: 1px; padding: 12px 0 13px; min-width: 0; }
.kt-tk-pre { font: 900 14px/1.3 var(--maru); color: var(--ink2); }
.kt-tk-big { font: 900 25px/1.3 var(--maru); color: var(--ink); word-break: keep-all; }
.kt-tk-big .gd { color: #A87400; }
.kt-tk-sj { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kt-tk-sj i { font-style: normal; font: 800 12px/1 var(--maru); padding: 4px 8px 3px; border-radius: 999px; white-space: nowrap; }
.kt-tk-sj .so { background: #FFEBDA; color: #B9520E; } .kt-tk-sj .ka, .kt-tk-sj .yj { background: #E2F4EA; color: #1D7049; }
.kt-tk-sj .en { background: #ECE9FF; color: #4A3DB0; } .kt-tk-sj .pg { background: #E3F4FC; color: #00679E; } .kt-tk-sj .pl { background: #F8EAD2; color: #7A4E14; }
.kt-tk-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, #FBE7A1 0%, #E8B83A 45%, #F6D97F 70%, #D9A12E 100%); color: #4A3200; box-shadow: 0 4px 0 #A87400, inset 0 0 0 1.5px rgba(255, 255, 255, .55); }   /* 2026-11-05 Sana「黄色の矢印のところも金に」（半券と 同じ 金） */
.kt-tk-go svg { width: 22px; height: 22px; }

@media (max-width: 960px) {
  .kt-hero { grid-template-columns: 1fr; gap: 10px; }
  .kt-hero-r { max-width: 400px; }
  .kt-list { grid-template-columns: 1fr; max-width: 640px; }
  .kt-steps { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 680px) {
  .kt-eb { font-size: 18px; margin-bottom: 16px; }
  .kt-pre { font-size: 26px; }
  .kt-facts li { font-size: 17px; padding: 10px 16px 10px 10px; }
  .kt-facts li svg { width: 24px; height: 24px; }
  .kt-hero-r { max-width: 400px; padding: 16px 0 0; }
  .kt-hero-r .kt-card { --kf: 17.6px; }
  .kt-hero-wk { width: 128px; top: 150px; right: -10px; }
  .kt-medal { font-size: 17px; }
  .kt-medal i { width: 64px; height: 64px; font-size: 15px; }
  .kt-rooms { gap: 8px; }
  .kt-rooms li { padding: 12px 4px 12px; border-radius: 20px; }
  .kt-rooms img { height: 74px; }
  .kt-rooms b { font-size: 17px; }
  .kt-rooms small { display: none; }
  .kt-mid { grid-template-columns: 1fr; gap: 14px; padding: 18px; text-align: center; }
  .kt-mid .kt-card { --kf: 11.4px; max-width: 260px; margin: 0 auto; }
  .kt-mid b { font-size: 22px; }
  .kt-mid p { font-size: 16px; }
  .kt-all li { font-size: 17px; }
  .kt-ex { grid-template-columns: 60px minmax(0, 1fr); }
  .kt-ex img { width: 60px; }
  .kt-ex p { font-size: 16.5px; }
  .kt-item { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 18px 16px 18px 14px; border-radius: 24px; }
  .kt-vis { width: 104px; }
  .kt-no b { font-size: 21px; }
  .kt-tag { font-size: 14.5px; }
  .kt-item h3 { font-size: 22px; }
  .kt-when { font-size: 16.5px; }
  .kt-desc { font-size: 16px; }
  .kt-plus { font-size: 15px; }
  .kt-plus b { font-size: 16.5px; }
  .kt-soon { font-size: 15px; }
  .kt-note { font-size: 15px; }
  .kt-steps b { font-size: 20px; }
  .kt-steps small { font-size: 16px; }
  .kt-qa summary { font-size: 18px; }
  .kt-qa details p { font-size: 16.5px; padding: 0 18px 18px 18px; }
  .kt-members { font-size: 16px; }
  .kt-bn-wrap { margin-top: 28px; }
  .kt-tk { grid-template-columns: 100px minmax(0, 1fr) auto; gap: 0 14px; padding-right: 14px; border-radius: 22px; }
  .kt-tk-stub { font-size: 19px; } .kt-tk-stub small { font-size: 12px; }
  .kt-tk-pre { font-size: 16.5px; } .kt-tk-big { font-size: 29px; }
  .kt-tk-sj i { font-size: 14px; padding: 5px 8px 4px; }
  .kt-tk-go { width: 52px; height: 52px; } .kt-tk-go svg { width: 24px; height: 24px; }
}
@media (max-width: 400px) {
  .kt .lp-h1 { font-size: 41px; }
  .kt-pre { font-size: 24px; }
  /* チケットの バナー：いちばん 小さい 画面（iPhone SE など）で 1行めと 見出しが 折れないように */
  .kt-tk { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 0 10px; padding-right: 10px; }
  .kt-tk-stub { font-size: 16.5px; } .kt-tk-stub small { font-size: 10.5px; letter-spacing: .12em; }
  .kt-tk-pre { font-size: 15px; } .kt-tk-big { font-size: 26px; }
  .kt-tk-sj i { font-size: 13px; padding: 4px 7px 3px; }
  .kt-tk-go { width: 44px; height: 44px; }
}

/* ---------- 会員専用ページの 名前入り カード（inc/member-card.php・assets/js/member-card.js）----------
   --kf は JS が カードの はば ÷ 22.5 で 入れる（はばが かわっても 字の 大きさが あう）。
   ダブルゴールド（.wgold）＝2つ以上の 教科：濃い 金・草花の 飾り（img/wgold_orn.svg）・王冠の わくま・教科の 札 */
.kt-hubcard { max-width: 460px; margin: 6px 0 22px; }
.kt-hubcard .kt-card { --kf: 19px; }
.kt-hubcard-note { margin: 10px 2px 0; font-family: var(--maru); font-weight: 700; font-size: 13px; color: #8A5E00; }
.kt-card.named .kt-card-name { bottom: 25%; font-size: 1.55em; letter-spacing: .06em; }
.kt-card.named .kt-card-name small { font-size: .62em; margin-left: .2em; letter-spacing: 0; }
.kt-card.named .kt-card-sub { bottom: 11%; }
.kt-card-no { position: absolute; left: 30%; top: 44%; font: 600 .78em "Jost", "Futura", sans-serif; letter-spacing: .18em; color: #6E4A00; }
.kt-card.wgold { color: #3A2400;
  background: repeating-radial-gradient(circle at 88% 118%, transparent 0 7px, rgba(255, 246, 210, .22) 7px 8px),
    linear-gradient(135deg, #FFEBA6 0%, #E3A92A 20%, #FFF2B8 38%, #CF9415 58%, #F8D66C 76%, #B37C06 100%);
  box-shadow: 0 22px 34px -14px rgba(120, 76, 0, .65), 0 4px 10px rgba(120, 76, 0, .2), inset 0 0 0 1.5px rgba(255, 248, 215, .8); }
.kt-card.wgold::before { opacity: .35; }
.kt-card-orn { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-radius: 0; }
.kt-card.wgold > *:not(.kt-card-orn) { z-index: 1; }
.kt-card.wgold .kt-card-top { left: 10%; right: 10%; top: 15%; }
.kt-card.wgold .kt-card-top em { color: #5A3A00; letter-spacing: .26em; }
.kt-card.wgold .kt-card-chip { left: 10%; top: 42%; background-image: linear-gradient(90deg, transparent 31%, rgba(110, 72, 0, .35) 31%, rgba(110, 72, 0, .35) 34%, transparent 34%, transparent 66%, rgba(110, 72, 0, .35) 66%, rgba(110, 72, 0, .35) 69%, transparent 69%), linear-gradient(0deg, transparent 47%, rgba(110, 72, 0, .35) 47%, rgba(110, 72, 0, .35) 53%, transparent 53%), linear-gradient(135deg, #FFF3C4, #D8A93C); }
.kt-card.wgold .kt-card-name { left: 10%; bottom: 28%; }
.kt-card.wgold .kt-card-sub { left: 10%; bottom: 16%; color: #5A3A00; }
.kt-card.wgold .kt-card-wk { right: 10%; bottom: 16%; width: 3.9em; height: 3.9em; background: linear-gradient(135deg, #FFF6CF, #F2C94C); box-shadow: 0 0 0 .18em #FFF4CC, 0 0 0 .32em #C9900F, 0 3px 8px rgba(110, 72, 0, .4); }
.kt-card-subj { position: absolute; right: 10.5%; top: 30%; display: flex; gap: .35em; }
.kt-card-subj i { font-style: normal; padding: .28em .6em .32em; border-radius: 999px; font: 900 .62em/1 var(--maru); color: #fff; }
.kt-card-subj .so { background: #F07A28; } .kt-card-subj .ka { background: #2F9C6A; } .kt-card-subj .ar { background: #E9578A; }
.kt-card-crown { position: absolute; right: 12%; bottom: 40.5%; width: 2.5em; height: auto; z-index: 2; filter: drop-shadow(0 1px 2px rgba(110, 72, 0, .45)); }
.kt-card-spark { position: absolute; width: .9em; height: .9em; }
.kt-card-spark path { fill: #FFFBEA; }
@media (max-width: 680px) {
  .kt-hubcard-note { font-size: 16px; }
}

/* ---------- トリプル（3つの 教科）＝ まだ 出さない（inc/member-card.php の ks_mc_triple_on）----------
   Sana 11/5「3つともに入ってる人のもっと派手なバージョンも作っておきたいな。まだ出さなくて良いけど」
   ダブルゴールドに 足す：虹の わく（ぐるっと 一周）・虹色に ひかる 箔・王冠 大きく。
   11/5 夜 Sana「ダブルとトリプルの違いがあんまり」→ 4案（プレビュー/会員特典_20261105/tgold_v2/）から「Dが良いな」＝花たば：
   飾りの 絵を tgold_extra.svg（宝石・月桂樹）→ tgold_bouquet.svg（4つの すみの 大きな 花たば・上と 下の 花の かざり・ちょうちょ）に。ふちを 太く・ラベルは TRIPLE GOLD */
.kt-card.tgold { border: .4em solid transparent; box-sizing: border-box;   /* 11/5 夜 花たば（D）に あわせて ふちを 太く（.26em → .4em） */
  background: repeating-radial-gradient(circle at 88% 118%, transparent 0 7px, rgba(255, 246, 210, .22) 7px 8px) padding-box,
    linear-gradient(135deg, #FFEBA6 0%, #E3A92A 20%, #FFF2B8 38%, #CF9415 58%, #F8D66C 76%, #B37C06 100%) padding-box,
    linear-gradient(120deg, #F07A28, #FFD23F, #2F9C6A, #00A0E9, #6C5CE7, #E9578A, #F07A28) border-box; }
.kt-card.tgold::after { left: 0; top: 0; width: 100%; height: 100%; transform: none; mix-blend-mode: soft-light; opacity: .75;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 80, 160, .55) 30%, rgba(255, 220, 90, .55) 40%, rgba(90, 220, 140, .55) 50%, rgba(80, 170, 255, .55) 60%, rgba(170, 110, 255, .55) 70%, transparent 82%) 0 0 / 260% 100%;
  animation: kt-holo 6s ease-in-out infinite; }
@keyframes kt-holo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .kt-card.tgold::after { animation: none; } }
.kt-card-extra { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.kt-card.tgold .kt-card-top em { letter-spacing: .14em; }   /* 「TRIPLE GOLD」 */
.kt-card.tgold .kt-card-crown { width: 3.1em; right: 11.2%; bottom: 40%; }
.kt-card.tgold .kt-card-subj i { font-size: .56em; }

/* 2026-11-05 夜 Sana「他の習い事教室では、ないよ！うちだけだよ！」「うざくならない感じで、でもちゃんとアピール」
   言えることだけ：自分たちで 作った オリジナル・会員コードで ひらく＝ここでしか 使えない（「ほかの 教室には ない」は 言いきれないので 使わない） */
.kt-facts li.kt-only { background: #FFF4D1; box-shadow: 0 0 0 2px #EBC35A inset, var(--shadow-s); color: #6E4A00; }
.kt-only-note { display: inline-block; margin: 12px 0 0 !important; padding: 7px 16px 8px; border-radius: 999px; background: #FFF4D1; color: #6E4A00 !important; font: 700 14.5px/1.6 var(--maru); }
.kt-only-note b { color: #A87400; }
@media (max-width: 680px) { .kt-only-note { font-size: 16.5px; border-radius: 22px; } }

/* ---------- ページの 上の 会員カード＝3しゅるいを 切りかえ [ks_perks_cards]（inc/perks.php）----------
   Sana 11/5 夜「会員カードのところ。切り替えで3種類切り替えられるようにしておいて。豪華なやつも」
   上の ボタン（ラジオ）で ゴールド／ダブルゴールド／トリプルゴールド。カードは 3まい かさねて、えらんだ 1まいだけ 見せる（高さは かわらない）。
   立っている わくまは カードの 右下（前の .kt-hero-wk と 同じ 場所）。ダブル・トリプルでは 頭に 王冠 */
.kt-sw { position: relative; }
.kt-sw > input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kt-sw-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 0 18px; padding: 5px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); }
.kt-sw-tabs label { display: grid; align-content: center; justify-items: center; gap: 3px; min-height: 58px; padding: 7px 4px 8px; border-radius: 17px; cursor: pointer; text-align: center; font-family: var(--maru); color: #6E4A00; transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.kt-sw-tabs label:hover { background: #FFF4D1; }
.kt-sw-tabs small { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--ink2); }
.kt-sw-tabs b { font-weight: 900; font-size: 15px; line-height: 1.2; letter-spacing: .02em; }
.kt-sw-tabs b .nw { display: inline-block; }
.kt-sw .r1:checked ~ .kt-sw-tabs .l1 { background: var(--g-card); color: #4A3200; }
.kt-sw .r2:checked ~ .kt-sw-tabs .l2 { background: linear-gradient(135deg, #FFEBA6 0%, #E3A92A 30%, #FFF2B8 55%, #CF9415 85%); color: #3A2400; }
.kt-sw .r3:checked ~ .kt-sw-tabs .l3 { border: 2.5px solid transparent; padding: 4.5px 1.5px 5.5px; color: #3A2400;
  background: linear-gradient(135deg, #FFEBA6 0%, #E3A92A 30%, #FFF2B8 55%, #CF9415 85%) padding-box, linear-gradient(120deg, #F07A28, #FFD23F, #2F9C6A, #00A0E9, #6C5CE7, #E9578A) border-box; }
.kt-sw input:checked ~ .kt-sw-tabs label small { color: #5A3A00; }
.kt-sw .r1:focus-visible ~ .kt-sw-tabs .l1, .kt-sw .r2:focus-visible ~ .kt-sw-tabs .l2, .kt-sw .r3:focus-visible ~ .kt-sw-tabs .l3 { outline: 3px solid #0096DB; outline-offset: 2px; }
.kt-sw-stage { position: relative; display: grid; }
.kt-hero-r .kt-sw-stage > .kt-card { --kf: var(--swkf, 18.6px); grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.kt-sw .r1:checked ~ .kt-sw-stage .c1, .kt-sw .r2:checked ~ .kt-sw-stage .c2, .kt-sw .r3:checked ~ .kt-sw-stage .c3 { opacity: 1; visibility: visible; }
.kt-sw-stage > .kt-card.tgold:not(.c3)::after, .kt-sw .r3:not(:checked) ~ .kt-sw-stage .c3::after { animation-play-state: paused; }
.kt-sw-wk { position: absolute; right: -14px; top: 144px; width: 126px; z-index: 2; }
.kt-sw-wk img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(60, 40, 20, .16)); }
.kt-sw-crown { position: absolute; left: 27%; top: -13%; width: 40%; height: auto; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; filter: drop-shadow(0 1px 2px rgba(110, 72, 0, .45)); }
.kt-sw .r2:checked ~ .kt-sw-stage .kt-sw-crown, .kt-sw .r3:checked ~ .kt-sw-stage .kt-sw-crown { opacity: 1; transform: none; }
.kt-sw .r3:checked ~ .kt-sw-stage .kt-sw-crown { left: 24%; top: -17%; width: 46%; }
@media (prefers-reduced-motion: reduce) { .kt-hero-r .kt-sw-stage > .kt-card, .kt-sw-crown { transition: none; } }
@media (max-width: 680px) {
  .kt-sw-tabs { margin-bottom: 16px; }
  .kt-sw-tabs label { min-height: 64px; }
  .kt-sw-tabs small { font-size: 14px; }
  .kt-sw-tabs b { font-size: 17px; }
  .kt-sw-wk { width: 128px; top: 134px; right: -10px; }
}

/* 11/5 夜 Sana「ここの星の丸みたいなやつ。ここをこどもスクールロゴの金っぽいやつにして」
   → ページの いちばん 上の「こどもスクール 会員特典」の 丸を、金の こどもスクール ロゴ（img/logo_gold_144.webp）に。
   「金色だけみたいなベースのやつ」→ 3案から「G2にして」＝金の 土台に 濃い 金の 字（彫った 感じ）。
   作り方＝プレビュー/会員特典_20261105/gold_logo/make_gold_logo.py（もとは こどもスクールの 丸い ロゴ kodomoschool_round_1775px.png）。
   本文の ★ は 見せない（ページの 本文は 入れかえない・CSS だけ） */
.kt-eb i { width: 42px; height: 42px; font-size: 0; color: transparent; background: url(../img/logo_gold_144.webp) center / 100% 100% no-repeat; box-shadow: 0 1px 3px rgba(110, 72, 0, .3); }
.kt-eb { padding-left: 5px; }
@media (max-width: 680px) { .kt-eb i { width: 46px; height: 46px; } }