/* ============================================================
   料理教室 ことこと — 制作サンプル (SmartConnect)
   bright / rounded / joyful
   ============================================================ */
:root{
  --paper:#FFFDF8;
  --cream:#FFF5E4;
  --ink:#463C33;
  --sub:#8C7F71;
  --tomato:#E8604C;
  --tomato-d:#CE4A37;
  --green:#7FA653;
  --green-d:#5F8639;
  --yellow:#F4C95D;
  --line:#EFE4CE;
  --line-green:#06C755;
  --jp:"Zen Maru Gothic",sans-serif;
  --en:"Quicksand",sans-serif;
  --shadow:0 12px 34px rgba(70,60,51,.10);
  --header-h:78px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{font-family:var(--jp);background:var(--paper);color:var(--ink);line-height:2.05;font-size:15px;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:var(--jp);cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
section{padding:100px 0;position:relative}
h1,h2,h3{font-weight:700}

/* section head */
.sec-head{text-align:center;margin-bottom:60px;position:relative}
.sec-head .en{font-family:var(--en);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--tomato);text-transform:uppercase;display:block;margin-bottom:12px}
.sec-head h2{font-size:clamp(23px,3.2vw,31px);font-weight:900;letter-spacing:.06em}
.sec-head .lede{font-size:14px;color:var(--sub);margin-top:14px;max-width:600px;margin-inline:auto}
.sec-head .wavy{display:block;width:86px;margin:20px auto 0}
.sec-head .wavy path{stroke:var(--yellow);stroke-width:4;fill:none;stroke-linecap:round}

/* wavy text underline */
.uwave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 5 Q 5 1 10 5 T 20 5 T 30 5 T 40 5' fill='none' stroke='%23F4C95D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:0 100%;background-size:40px 8px;padding-bottom:10px}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:14.5px;letter-spacing:.06em;padding:16px 38px;border-radius:999px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn-tomato{background:var(--tomato);color:#fff}
.btn-tomato:hover{background:var(--tomato-d)}
.btn-white{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn-green{background:var(--line-green);color:#fff}
.btn svg{width:19px;height:19px;flex:none}

/* ===== header ===== */
.header{position:fixed;inset:0 0 auto;z-index:100;transition:background .35s,box-shadow .35s;background:transparent}
.header.solid{background:rgba(255,253,248,.95);box-shadow:0 2px 18px rgba(70,60,51,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 28px;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;letter-spacing:.08em}
.logo .mark{width:42px;height:42px;flex:none}
.logo .mark svg{width:100%;height:100%}
.logo small{display:block;font-size:9.5px;font-weight:500;color:var(--sub);letter-spacing:.2em;line-height:1.4}
.gnav{display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:700}
.gnav a:not(.btn){position:relative;padding:6px 2px}
.gnav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='6' viewBox='0 0 30 6'%3E%3Cpath d='M0 4 Q 3.75 1 7.5 4 T 15 4 T 22.5 4 T 30 4' fill='none' stroke='%23E8604C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:30px 6px;opacity:0;transition:opacity .3s}
.gnav a:not(.btn):hover::after{opacity:1}
.gnav .btn{padding:11px 24px;font-size:13px;box-shadow:none}
.hamburger{display:none;flex-direction:column;gap:6px;padding:10px;z-index:110}
.hamburger span{width:27px;height:3px;border-radius:3px;background:var(--ink);transition:all .35s}
.hamburger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--paper);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding-top:var(--header-h)}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:16px;font-weight:700;padding:14px;letter-spacing:.1em}
.mobile-nav a em{font-family:var(--en);font-style:normal;font-size:10.5px;color:var(--tomato);display:block;text-align:center;letter-spacing:.24em;font-weight:700}
.mobile-nav .btn{margin-top:22px}

/* ===== hero ===== */
.hero{padding:calc(var(--header-h) + 60px) 0 90px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr .95fr;gap:50px;align-items:center}
.hero-copy .hello{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 20px;font-size:12.5px;font-weight:700;color:var(--green-d);box-shadow:var(--shadow);margin-bottom:26px}
.hero-copy .hello::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.hero-copy h1{font-size:clamp(30px,4.6vw,46px);font-weight:900;line-height:1.75;letter-spacing:.05em;margin-bottom:22px}
.hero-copy h1 .uwave{padding-bottom:6px}
.hero-copy p{font-size:14.5px;color:var(--sub);max-width:440px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-visual{position:relative}
.blob-main{border-radius:58% 42% 55% 45%/48% 56% 44% 52%;overflow:hidden;box-shadow:var(--shadow);animation:blob 14s ease-in-out infinite alternate}
.blob-main img{width:100%;height:470px;object-fit:cover}
@keyframes blob{0%{border-radius:58% 42% 55% 45%/48% 56% 44% 52%}50%{border-radius:45% 55% 48% 52%/55% 45% 55% 45%}100%{border-radius:52% 48% 42% 58%/46% 52% 48% 54%}}
.blob-sub{position:absolute;width:150px;height:150px;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:var(--shadow)}
.blob-sub img{width:100%;height:100%;object-fit:cover}
.blob-sub.s1{left:-30px;bottom:-16px}
.blob-sub.s2{right:-18px;top:-26px;width:118px;height:118px}
.sticker{position:absolute;right:22px;bottom:-14px;background:var(--yellow);color:var(--ink);font-weight:900;font-size:13px;border-radius:18px;padding:14px 20px;transform:rotate(-5deg);box-shadow:var(--shadow);border:2px dashed rgba(70,60,51,.35);line-height:1.7;text-align:center;animation:floaty 4s ease-in-out infinite}
.sticker small{display:block;font-size:10.5px;font-weight:700}
@keyframes floaty{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-7px)}}
.deco-dot{position:absolute;border-radius:50%;opacity:.5;pointer-events:none}

/* wave divider */
.wave{display:block;width:100%;height:60px;margin-bottom:-1px}

/* ===== feature cards (3つのたいせつ) ===== */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feat-card{background:#fff;border-radius:26px;padding:40px 30px 36px;text-align:center;box-shadow:var(--shadow);position:relative;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.feat-card:hover{transform:translateY(-7px) rotate(-.4deg)}
.feat-card .fi{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.feat-card:nth-child(1) .fi{background:#FDEEE9}
.feat-card:nth-child(2) .fi{background:#F0F5E6}
.feat-card:nth-child(3) .fi{background:#FDF4DC}
.feat-card .fi svg{width:38px;height:38px;fill:none;stroke-width:1.7}
.feat-card:nth-child(1) .fi svg{stroke:var(--tomato)}
.feat-card:nth-child(2) .fi svg{stroke:var(--green-d)}
.feat-card:nth-child(3) .fi svg{stroke:#C99A2C}
.feat-card h3{font-size:17.5px;font-weight:900;margin-bottom:10px}
.feat-card p{font-size:13px;color:var(--sub)}
.feat-card .num{position:absolute;top:-14px;left:22px;font-family:var(--en);font-weight:700;background:var(--ink);color:#fff;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}

/* ===== courses ===== */
.course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.course-card{background:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.course-card:hover{transform:translateY(-6px)}
.course-card .ph{position:relative;overflow:hidden}
.course-card .ph img{width:100%;height:220px;object-fit:cover;transition:transform .8s}
.course-card:hover .ph img{transform:scale(1.06)}
.course-card .tag{position:absolute;top:16px;left:16px;border-radius:999px;padding:5px 16px;font-size:11.5px;font-weight:900;color:#fff}
.tag-tomato{background:var(--tomato)}
.tag-green{background:var(--green)}
.tag-yellow{background:#D9A32C}
.course-card .bd{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.course-card h3{font-size:19px;font-weight:900;margin-bottom:6px}
.course-card .meta{font-size:12px;color:var(--sub);margin-bottom:12px}
.course-card p{font-size:13.5px;color:var(--sub);margin-bottom:18px}
.course-card .price{margin-top:auto;display:flex;align-items:baseline;gap:6px;border-top:2px dashed var(--line);padding-top:16px}
.course-card .price b{font-family:var(--en);font-size:26px;font-weight:700;color:var(--tomato)}
.course-card .price span{font-size:12px;color:var(--sub)}
.course-list-note{text-align:center;font-size:12.5px;color:var(--sub);margin-top:30px}

/* ===== schedule table ===== */
.sched{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:36px;overflow-x:auto}
.sched table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.sched th{font-weight:900;padding:12px 10px;border-bottom:3px solid var(--cream);font-size:14px}
.sched td{padding:14px 10px;border-bottom:1px dashed var(--line);text-align:center;vertical-align:middle}
.sched td:first-child{font-weight:900;font-family:var(--en);font-size:15px}
.pill{display:inline-block;border-radius:999px;padding:4px 14px;font-size:11.5px;font-weight:700;margin:2px}
.pill-t{background:#FDEEE9;color:var(--tomato-d)}
.pill-g{background:#F0F5E6;color:var(--green-d)}
.pill-y{background:#FDF4DC;color:#A5821F}
.sched-note{font-size:12px;color:var(--sub);margin-top:16px;line-height:2}

/* ===== voice bubbles ===== */
.voice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 26px}
.voice{position:relative;border-radius:24px;padding:30px 30px 26px}
.voice.b-y{background:#FDF4DC}
.voice.b-g{background:#F0F5E6}
.voice.b-t{background:#FDEEE9}
.voice::after{content:"";position:absolute;left:44px;bottom:-14px;border:14px solid transparent;border-top-color:inherit;border-bottom:0;border-left:0}
.voice.b-y::after{border-top-color:#FDF4DC}
.voice.b-g::after{border-top-color:#F0F5E6}
.voice.b-t::after{border-top-color:#FDEEE9}
.voice p{font-size:13.5px;line-height:2.1}
.voice .who{display:flex;align-items:center;gap:12px;margin-top:26px}
.voice .who .face{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;font-size:20px;flex:none}
.voice .who b{font-size:12.5px;display:block;line-height:1.6}
.voice .who small{font-size:11px;color:var(--sub)}

/* ===== teacher ===== */
.teacher-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.teacher-ph{position:relative}
.teacher-ph .blob-main img{height:440px}
.teacher-ph .badge{position:absolute;left:-14px;top:18px;background:#fff;border-radius:18px;padding:12px 20px;font-size:12px;font-weight:900;box-shadow:var(--shadow);transform:rotate(-4deg)}
.teacher-bd h3{font-size:clamp(20px,2.6vw,26px);font-weight:900;line-height:1.9;margin-bottom:20px}
.teacher-bd p{font-size:14px;color:#6b5e50;margin-bottom:16px}
.teacher-bd .name{margin-top:26px;display:flex;align-items:baseline;gap:14px}
.teacher-bd .name b{font-size:19px;font-weight:900}
.teacher-bd .name small{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--sub);font-weight:700}
.teacher-bd .creds{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ===== steps (レッスンの流れ) ===== */
.step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{background:#fff;border-radius:22px;padding:34px 22px 28px;text-align:center;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:var(--tomato);color:#fff;font-family:var(--en);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.step h3{font-size:15px;font-weight:900;margin-bottom:8px}
.step p{font-size:12px;color:var(--sub)}
.step .t{font-size:11px;font-weight:700;color:var(--green-d);display:block;margin-bottom:8px;font-family:var(--en);letter-spacing:.1em}

/* ===== LINE band ===== */
.line-band{background:var(--green);border-radius:34px;padding:60px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.line-band::before,.line-band::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1)}
.line-band::before{width:220px;height:220px;left:-60px;top:-80px}
.line-band::after{width:180px;height:180px;right:-40px;bottom:-70px}
.line-band h2{font-size:clamp(20px,2.8vw,27px);font-weight:900;margin-bottom:12px;position:relative}
.line-band p{font-size:13.5px;opacity:.95;margin-bottom:28px;position:relative}
.line-band .btn{position:relative}

/* ===== faq ===== */
.faq-list{max-width:720px;margin:0 auto}
.faq-list details{background:#fff;border-radius:18px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.faq-list summary{display:flex;align-items:center;gap:16px;padding:20px 26px;font-size:14.5px;font-weight:700;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"Q";font-family:var(--en);font-weight:700;color:#fff;background:var(--tomato);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
.faq-list summary::after{content:"+";margin-left:auto;font-family:var(--en);font-size:22px;color:var(--sub);transition:transform .35s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .a{padding:0 26px 24px 72px;font-size:13.5px;color:var(--sub)}

/* ===== info table ===== */
.info-card{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:36px}
.info-card table{width:100%;border-collapse:collapse;font-size:14px}
.info-card th,.info-card td{padding:14px 8px;border-bottom:1px dashed var(--line);text-align:left;vertical-align:top}
.info-card th{width:32%;font-weight:900;color:var(--green-d)}
.map-round{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:8px solid #fff}
.map-round iframe{width:100%;height:360px;border:0;display:block}

/* ===== page hero ===== */
.page-hero{padding:calc(var(--header-h) + 70px) 0 60px;text-align:center;background:var(--cream);border-radius:0 0 46px 46px}
.page-hero .en{font-family:var(--en);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--tomato);text-transform:uppercase;display:block;margin-bottom:10px}
.page-hero h1{font-size:clamp(25px,3.6vw,34px);font-weight:900}
.page-hero .lede{font-size:13.5px;color:var(--sub);margin-top:16px;max-width:600px;margin-inline:auto}

/* ===== footer ===== */
.footer{background:#463C33;color:#D8CEC0;padding:70px 0 40px;font-size:13px;border-radius:46px 46px 0 0;margin-top:60px}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;margin-bottom:48px}
.f-grid .logo{color:#fff}
.f-grid address{font-style:normal;margin-top:18px;line-height:2.2}
.f-grid h4{font-family:var(--en);font-weight:700;font-size:11.5px;letter-spacing:.26em;color:var(--yellow);text-transform:uppercase;margin-bottom:14px}
.f-grid a{display:block;padding:5px 0}
.f-grid a:hover{color:#fff}
.f-btm{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;text-align:center;font-size:11px;color:#A99C8A;line-height:2.2}
.f-btm a{text-decoration:underline}

/* sample pill / toast */
.sample-pill{position:fixed;left:18px;bottom:18px;z-index:90;background:rgba(70,60,51,.93);color:#fff;border-radius:999px;padding:9px 18px;font-size:11px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sample-pill a{color:var(--yellow);text-decoration:underline}
.sample-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:#463C33;color:#fff;font-size:13px;border-radius:14px;padding:14px 26px;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:200;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* reveal: pop */
.rv{opacity:0;transform:translateY(26px) scale(.96)}
.rv.on{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.rv.d1.on{transition-delay:.1s}.rv.d2.on{transition-delay:.2s}.rv.d3.on{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}
@media (max-width:940px){
  section{padding:74px 0}
  .gnav{display:none}
  .hamburger{display:flex}
  .hero{padding-top:calc(var(--header-h) + 30px)}
  .hero-grid{grid-template-columns:1fr;gap:60px}
  .blob-main img{height:340px}
  .feat-grid,.course-grid,.voice-grid{grid-template-columns:1fr}
  .teacher-grid{grid-template-columns:1fr;gap:44px}
  .step-row{grid-template-columns:1fr 1fr;gap:26px 16px}
  .f-grid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .sticker{right:8px}
}