/* K-FLOピアノ教室｜看板の色（ピンク・黄色・黄緑・オレンジ）と、太くて丸い文字 */
:root{
  --pink:#de0065;
  --pink-soft:#fde4ef;
  --yellow:#fff200;
  --yellow-soft:#fff9c4;
  --green:#8cc63f;
  --green-dark:#4f8a1d;
  --green-soft:#eaf5d6;
  --orange:#ec6100;
  --ink:#2b2320;
  --sub:#6c5f58;
  --line:#e7dccf;
  --paper:#fffdf7;
  --round:"M PLUS Rounded 1c",sans-serif;
  --keys:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='34'%3E%3Crect width='140' height='34' fill='%23fff'/%3E%3Cg stroke='%232b2320' stroke-width='1.2'%3E%3Cpath d='M20 0v34M40 0v34M60 0v34M80 0v34M100 0v34M120 0v34M140 0v34'/%3E%3C/g%3E%3Cg fill='%232b2320'%3E%3Crect x='13' width='13' height='20' rx='2'/%3E%3Crect x='34' width='13' height='20' rx='2'/%3E%3Crect x='73' width='13' height='20' rx='2'/%3E%3Crect x='94' width='13' height='20' rx='2'/%3E%3Crect x='114' width='13' height='20' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--round);font-size:16px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
a:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.nb{display:inline-block;max-width:100%}
.btn .nb,a .nb{display:inline}
.wrap{width:min(1040px,100% - 40px);margin-inline:auto}
.narrow{width:min(820px,100% - 40px);margin-inline:auto}
.sample-bar{background:var(--ink);color:#fff;font-size:12px;text-align:center;padding:6px 12px;line-height:1.6}
.sample-bar b{border:1px solid #fff;padding:0 6px;margin-right:8px;font-weight:500}

/* ヘッダー */
.header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:4px solid var(--green)}
.header .in{width:min(1200px,100% - 24px);margin:0 auto;display:flex;align-items:center;gap:18px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo .t{font-weight:800;font-size:24px;line-height:1.1;color:var(--pink);letter-spacing:.02em;-webkit-text-stroke:1px var(--pink)}
.logo .t span{color:var(--ink);-webkit-text-stroke:0;font-size:15px;margin-left:4px}
.logo small{display:block;font-size:11px;color:var(--sub);font-weight:500;letter-spacing:.1em}
.nav{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;font-weight:700;font-size:13.5px}
.nav a{text-decoration:none;padding:2px 0;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--yellow);color:var(--pink)}
.nav .cta{background:var(--pink);color:#fff;border-radius:999px;padding:6px 16px;border:0}
.nav .cta:hover{background:var(--orange);color:#fff}
.menu-btn{display:none;margin-left:auto;background:var(--green);color:#fff;border:0;border-radius:10px;font:700 14px var(--round);padding:10px 16px;cursor:pointer}

/* 共通の見出し・ボタン */
.page-head{background:linear-gradient(180deg,var(--green-soft),#fff);padding:46px 0 40px;text-align:center;position:relative;overflow:hidden}
.page-head h1{font-weight:800;font-size:clamp(28px,4.4vw,42px);color:var(--pink);line-height:1.4}
.page-head p{margin-top:8px;color:var(--sub);font-weight:500}
.keys{height:34px;background:var(--keys) repeat-x;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.sec{padding:72px 0}
.sec.green{background:var(--green-soft)}
.sec.yellow{background:var(--yellow-soft)}
.sec.pink{background:var(--pink-soft)}
.h2{font-weight:800;font-size:clamp(23px,3.2vw,30px);line-height:1.5;text-align:center;margin-bottom:30px}
.h2::before{content:"♪";color:var(--pink);margin-right:8px}
.h2::after{content:"♪";color:var(--green);margin-left:8px}
.h2 small{display:block;font-size:14px;font-weight:500;color:var(--sub);margin-top:2px}
.h3{font-weight:800;font-size:20px;line-height:1.6;margin:30px 0 12px;padding-left:14px;border-left:6px solid var(--green)}
.lead{font-size:17px;font-weight:700;line-height:2.1;text-align:center}
.center{text-align:center}
.mt{margin-top:24px}
.btn{display:inline-block;text-align:center;line-height:1.6;min-height:52px;padding:13px 28px;border-radius:999px;font-weight:800;font-size:16px;text-decoration:none;letter-spacing:.04em;border:3px solid var(--ink);background:#fff}
.btn:hover{background:var(--yellow)}
.btn.pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.pink:hover{background:var(--orange);border-color:var(--orange)}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.green:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.next{display:block;text-align:right;margin-top:18px;font-weight:700;color:var(--pink)}
.box{background:#fff;border:3px solid var(--line);border-radius:22px;padding:28px 30px}
.box.pink{border-color:#f6b3cf}
.box.green{border-color:#c4df85}
.box.yellow{border-color:#f3e46a;background:#fffde8}
.note{font-size:14px;color:var(--sub);line-height:1.9}
.big-num{font-weight:800;font-size:40px;color:var(--pink);line-height:1}

/* 星や音符のリスト */
.stars,.notes{list-style:none}
.stars li,.notes li{position:relative;padding:8px 0 8px 32px;border-bottom:2px dotted var(--line);line-height:1.8}
.stars li:last-child,.notes li:last-child{border-bottom:0}
.stars li::before{content:"★";position:absolute;left:4px;top:8px;color:var(--orange)}
.notes li::before{content:"♪";position:absolute;left:6px;top:8px;color:var(--pink);font-weight:800}

/* トップ */
.hero{position:relative;background:linear-gradient(135deg,#d9efb0 0%,#f2f9e4 45%,#fff7b8 100%);padding:44px 0 50px;overflow:hidden}
.hero .in{width:min(1100px,100% - 32px);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;position:relative;z-index:2}
.hero .kanban{border-radius:14px;box-shadow:0 10px 30px rgba(79,138,29,.25);border:6px solid #fff;width:100%;image-rendering:auto}
.hero h1{font-weight:800;font-size:clamp(30px,4.6vw,50px);line-height:1.35;color:var(--pink);-webkit-text-stroke:1px var(--pink);text-shadow:3px 3px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff}
.hero h1 small{display:block;font-size:.42em;color:var(--ink);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.08em;margin-bottom:8px}
.hero .catch{margin-top:16px;font-weight:800;font-size:clamp(17px,2vw,21px);line-height:1.9}
.hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero .badges>span{background:#fff;border-radius:999px;padding:4px 14px;font-weight:700;font-size:13.5px;border:2px solid var(--green)}
.hero .badges>.y{background:var(--yellow);border-color:var(--yellow)}
.hero .btns{justify-content:flex-start}
.flower{position:absolute;pointer-events:none;z-index:1}
.welcome{font-weight:800;font-size:clamp(18px,2.4vw,23px);text-align:center;line-height:1.9}
.welcome em{font-style:normal;color:var(--pink)}
.lic{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.lic>span{background:#fff;border:2px solid var(--pink);color:var(--pink);border-radius:999px;padding:2px 14px;font-weight:700;font-size:14px}
.anniv{display:inline-block;margin-top:22px;background:var(--yellow);border-radius:18px;padding:12px 26px;font-weight:800;font-size:18px;line-height:1.7}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.photo{border-radius:18px;overflow:hidden;border:5px solid #fff;box-shadow:0 6px 18px rgba(43,35,32,.12)}
.photo img{width:100%}
.senior-box{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;background:#fff;border:4px solid var(--green);border-radius:26px;padding:28px}
.contact3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact3 .box{text-align:center;padding:24px 18px}
.contact3 h3{font-weight:800;font-size:18px;color:var(--pink);margin-bottom:8px}
.tel{font-weight:800;font-size:26px;letter-spacing:.04em;text-decoration:none}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;max-width:440px;margin:0 auto;font-weight:700}
.map-embed{border-radius:20px;overflow:hidden;border:4px solid var(--green);margin-top:20px}
.map-embed iframe{display:block;width:100%;height:380px;border:0}
.sns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sns a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 18px;font-weight:700;font-size:14px;text-decoration:none}
.sns a:hover{border-color:var(--pink);color:var(--pink)}

/* 表（コース・料金） */
.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:3px solid var(--line);border-radius:18px;overflow:hidden;font-size:15px}
.table th,.table td{padding:12px 14px;border-bottom:2px solid var(--line);text-align:left;vertical-align:top;line-height:1.7}
.table tr:last-child th,.table tr:last-child td{border-bottom:0}
.table thead th{background:var(--green);color:#fff;font-weight:800}
.table tbody th{background:var(--green-soft);font-weight:800;white-space:nowrap}
.table .yen{font-weight:800;color:var(--pink);white-space:nowrap}
.course{background:#fff;border:3px solid var(--line);border-radius:22px;padding:26px 28px;margin-top:22px}
.course h3{font-weight:800;font-size:21px;line-height:1.5;color:var(--green-dark)}
.course h3 small{display:inline-block;font-size:13px;background:var(--yellow);color:var(--ink);border-radius:999px;padding:0 12px;margin-left:8px;vertical-align:3px}
.course .tag{font-weight:800;color:var(--pink);font-size:15px;margin-bottom:2px}
.toc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.toc a{background:#fff;border:2px solid var(--green);border-radius:999px;padding:6px 18px;font-weight:700;text-decoration:none;font-size:14.5px}
.toc a:hover{background:var(--green);color:#fff}

/* スケジュール */
.sched{max-width:560px;margin:0 auto}
.sched .day{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:14px 18px;border-bottom:2px dotted var(--line);align-items:center}
.sched .day b{font-weight:800}
.sched .full{color:var(--sub)}
.sched .slots{display:flex;flex-wrap:wrap;gap:6px}
.sched .slots>span{background:var(--yellow);border-radius:999px;padding:2px 12px;font-weight:700;font-size:14px}

/* 流れ */
.flow{list-style:none;counter-reset:f;display:grid;gap:16px}
.flow>li{counter-increment:f;background:#fff;border:3px solid var(--line);border-radius:22px;padding:26px 28px 24px 84px;position:relative}
.flow>li::before{content:counter(f);position:absolute;left:24px;top:24px;width:44px;height:44px;border-radius:50%;background:var(--pink);color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center}
.flow h3{font-weight:800;font-size:19px;margin-bottom:6px}

/* 声 */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.voice{background:#fff;border-radius:22px;padding:26px;border:3px solid #f6b3cf;position:relative}
.voice p{line-height:2}
.voice small{display:block;margin-top:10px;font-weight:700;color:var(--pink);text-align:right}

/* Q&A */
.qa details{background:#fff;border:3px solid var(--line);border-radius:18px;margin-top:12px}
.qa summary{cursor:pointer;list-style:none;padding:16px 50px 16px 56px;font-weight:800;line-height:1.7;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";position:absolute;left:18px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.qa summary::after{content:"＋";position:absolute;right:20px;top:14px;color:var(--pink);font-size:20px}
.qa details[open] summary::after{content:"－"}
.qa .a{padding:0 24px 20px 56px;position:relative;line-height:2}
.qa .a::before{content:"A";position:absolute;left:18px;top:2px;width:28px;height:28px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.qa .a p+p{margin-top:10px}

/* 写真の並び */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery figure{background:#fff;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:0 4px 12px rgba(43,35,32,.1)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:13px;font-weight:700;padding:6px 10px;line-height:1.6}

/* 発表会の年表 */
.years{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.years li{background:#fff;border-radius:14px;padding:10px 16px;border-left:6px solid var(--green);font-weight:700;line-height:1.7}
.years li b{color:var(--pink);margin-right:8px}
.years li.x{border-left-color:var(--pink)}

/* 問い合わせ・フッター */
.contact{background:var(--green);color:#fff;padding:56px 0;text-align:center}
.contact h2{font-weight:800;font-size:clamp(22px,3vw,28px)}
.contact p{margin-top:8px}
.contact .btn{border-color:#fff}
.contact .btn.line{background:#fff;color:var(--green-dark)}
.contact .btn.line:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.contact .btn.mail{background:transparent;color:#fff}
.contact .btn.mail:hover{background:#fff;color:var(--green-dark)}
.contact .tel{color:#fff}
.contact .warn{font-size:13px;opacity:.92;margin-top:6px}
.footer{background:var(--ink);color:#eee;padding:30px 0 34px;text-align:center;font-size:13px}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-bottom:14px;font-weight:700}
.footer nav a{text-decoration:none}
.footer nav a:hover{color:var(--yellow)}

@media (max-width:980px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;border-bottom:4px solid var(--green);font-size:15px}
  .nav.open{display:flex}
  .nav a{padding:12px 6px;border-bottom:1px solid var(--line)}
  .nav .cta{margin-top:10px;text-align:center;padding:12px}
  .header .in{position:relative}
}
@media (max-width:820px){
  .hero .in{grid-template-columns:1fr;gap:26px}
  .hero .btns{justify-content:center}
  .hero .text{text-align:center}
  .hero .in>div:last-child{order:-1}
  .hero .badges{justify-content:center}
  .two,.voices{grid-template-columns:1fr}
  .three,.contact3{grid-template-columns:1fr}
  .senior-box{grid-template-columns:1fr;text-align:center}
  .senior-box img{max-width:240px;margin:0 auto}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .years{grid-template-columns:1fr}
  .sec{padding:56px 0}
  .box,.course{padding:22px 20px}
  .flow>li{padding:76px 20px 22px}
  .flow>li::before{top:20px;left:20px}
  .table{font-size:14px}
  .table th,.table td{padding:10px}
}
@media (max-width:640px){
  .table.scroll thead{display:none}
  .table.scroll,.table.scroll tbody,.table.scroll tr,.table.scroll th,.table.scroll td{display:block;width:100%}
  .table.scroll tr{border-bottom:3px solid var(--line)}
  .table.scroll tr:last-child{border-bottom:0}
  .table.scroll tbody th{background:var(--green);color:#fff;border-bottom:0}
  .table.scroll td{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line)}
  .table.scroll td::before{content:attr(data-l);font-weight:700;color:var(--sub);flex:none}
  .table.scroll td br{display:none}
}
@media (max-width:480px){
  .h2::before,.h2::after{display:none}
  .logo .t{font-size:20px}
  .logo small{display:none}
  .wrap,.narrow{width:calc(100% - 28px)}
  .sched .day{grid-template-columns:70px 1fr;padding:12px 6px}
  .table tbody th{white-space:normal;width:34%}
}