/* =========================================================
   Tokens / Base
========================================================= */
:root{
  /* Base colors */
  --bg: #ffffff;
  --text: #0f172a;            /* slate-900 */
  --text-sub: #334155;        /* slate-700 */
  --muted: #f7f6f1;
  --line: #e5e7eb;            /* gray-200 */
  --card: #ffffff;

  /* Brand */
  --accent: #3b82f6;          /* blue-500 */
  --accent-600: #2563eb;      /* hover */
  --accent-700: #1d4ed8;

  /* Shadows / Radius / Layout */
  --shadow: 0 6px 24px rgba(15, 23, 42, .08);
  --shadow-sm: 0 6px 24px rgba(15,23,42,.08);
  --shadow-md: 0 10px 28px rgba(15,23,42,.10);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --container: 1160px;

  /* Contact brand helpers */
  --ig-border: #e5e7eb;
  --line-green: #06C755;
  --line-green-dk: #05b84c;
}

html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.8;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(100%, calc(var(--container) + 48px));
  margin-inline:auto;
  padding-inline:24px;
}

/* =========================================================
   Typography
========================================================= */
h1,h2,h3{ line-height:1.25; margin:0 0 .6em; }
h1{ font-weight:900; font-size:clamp(28px, 5vw, 56px); letter-spacing:.01em; }
h2{ font-weight:800; font-size:clamp(22px, 3.2vw, 34px); }
h3{ font-weight:700; font-size:clamp(18px, 2.4vw, 22px); }
p{ margin:0 0 1em; color:var(--text-sub); }

.eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
  font-weight:700;
  color:#64748b;
}

/* =========================================================
   Header / Navigation
========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px;
}
.brand{ font-weight:800; letter-spacing:.02em; white-space:nowrap; }

.nav-toggle{ display:none; border:0; background:transparent; padding:8px; margin-right:-8px; }
.site-nav{ display:flex; align-items:center; gap:20px; }
.site-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:22px;
}
.site-nav a{ opacity:.9; }
.site-nav a:hover{ opacity:1; }

/* =========================================================
   Buttons (base & variants)
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:48px; padding:0 20px;
  border-radius:999px; border:1px solid transparent;
  font-weight:700; line-height:1; white-space:nowrap;
  transition:.2s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--accent); color:#fff;
  box-shadow:0 8px 22px rgba(37,99,235,.25);
}
.btn-primary:hover{ background:var(--accent-600); }

.btn-outline{
  background:#fff; color:var(--text);
  border-color:#cbd5e1;
}
.btn-outline:hover{ border-color:#94a3b8; box-shadow:var(--shadow); }

.btn-ghost{                 /* ← 枠を常時表示 */
  background:#fff;
  border-color:#d1d5db;
  border-width:1.5px;
  box-shadow:0 1px 0 rgba(2,8,23,.04) inset;
}
.btn-ghost:hover{ border-color:#94a3b8; box-shadow:0 2px 10px rgba(2,8,23,.06); }

/* Instagram brand gradient button */
.btn-ig{
  color:#fff;
  border-color: transparent;
  height: 48px;
  padding: 0 22px;
  font-weight: 800;

  /* 左端〜15% を同色で固定 → 端で色が急変しない */
  background:
    linear-gradient(95deg,
      rgba(240,148,51,.78)   0%,
      rgba(240,148,51,.78)  15%,  /* ← 同色ストップで“筋”防止 */
      rgba(248,192,86,.78)  30%,
      rgba(220,39,67,.78)   50%,
      rgba(204,35,102,.78)  68%,
      rgba(188,24,136,.78)  84%,
      rgba(81,91,212,.78)  100%
    );
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: padding-box;

  /* 発光を控えめに（カード外へにじませない） */
  box-shadow: 0 6px 16px rgba(204,35,102,.12);
}
.btn-ig:hover{
  filter: brightness(1.02) saturate(1.02);
  box-shadow: 0 8px 20px rgba(204,35,102,.16);
}

/* ボタンがカードからはみ出して見える対策（既にあればそのままでOK） */
.contact-card{
  position: relative;
  overflow: clip;
  padding: 20px 24px;
  border-radius: 20px;
}
@supports not (overflow: clip){
  .contact-card{ overflow: hidden; }
}

/* LINE brand button */
.btn-line{
  background:var(--line-green); color:#fff; border-color:transparent;
  padding:0 26px;
  box-shadow:0 14px 36px rgba(6,199,85,.24);
}
.btn-line:hover{ background:var(--line-green-dk); box-shadow:0 16px 42px rgba(6,199,85,.30); }

.nav-cta{ padding:.66em 1em; }

/* =========================================================
   Hero
========================================================= */
.hero{ padding:88px 0 64px; }
.hero .hero-lead{ font-size:clamp(14px, 1.9vw, 18px); }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

/* =========================================================
   Sections / Prose / About pills
========================================================= */
.section{ padding:80px 0; }
.section-muted{ background:var(--muted); }
.section-head{ margin-bottom:28px; }
.section-sub{ margin-top:-.2em; color:#475569; }

.prose p + p{ margin-top:.8em; }

.about-pills{
  list-style:none; margin:20px 0 12px; padding:0;
  display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr));
}
.about-pills li{
  border:1px solid var(--line); background:#fff; color:#111827;
  padding:.7em 1em; border-radius:999px; text-align:center; box-shadow:var(--shadow);
}
.about-note{ margin-top:12px; }

/* =========================================================
   Lesson Cards
========================================================= */
.card-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:20px 18px; box-shadow:var(--shadow);
}
.card-icon{
  flex:0 0 36px; width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; background:#e0f2fe; color:var(--accent);
}
.card-title{ margin:.1em 0 .4em; color:#0b1220; }

/* =========================================================
   Pricing
========================================================= */
.pricing{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
}
.plan{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:24px; box-shadow:var(--shadow);
}
.plan-badge{
  position:absolute; top:-10px; right:14px;
  font-size:.72rem; font-weight:800; letter-spacing:.14em;
  background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe;
  padding:.3em .6em; border-radius:999px;
}
.plan-badge--accent{ background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.plan-title{ margin:0 0 .2em; }
.plan-price{ font-size:1.2rem; font-weight:800; color:#111827; margin:.2em 0 .6em; }
.plan-points{
  list-style:none; margin:0 0 18px; padding:0; display:grid; gap:6px; color:var(--text-sub);
}
.plan-points li{
  padding-left:1.7em; position:relative;
}
.plan-points li:before{
  content:""; position:absolute; left:0; top:.45em;
  width:1.05em; height:1.05em; border-radius:999px; background:#e0f2fe;
  box-shadow:0 0 0 2px #fff inset;
}
.plan-points li:after{
  content:""; position:absolute; left:.22em; top:.58em; width:.55em; height:.28em;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* =========================================================
   Contact (white cards & official logos)
========================================================= */
#contact .section-title{ font-weight:900; letter-spacing:.01em; margin:0 0 22px; }

.contact-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}

.contact-card{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-sm);
  overflow:clip;                         /* 角丸内で光をクリップ */
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
@supports not (overflow: clip){ .contact-card{ overflow:hidden; } }

.contact-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#dbe3ef; }

.contact-head{ display:flex; align-items:center; gap:14px; min-width:0; }
.contact-meta{ min-width:0; }
.contact-title{ margin:0; font-size:18px; font-weight:800; color:var(--text); }
.contact-desc{ margin:2px 0 0; color:var(--text-sub); opacity:.95; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

.contact-action{ margin-left:auto; isolation:isolate; }

/* Logo images（44×44に統一） */
.logo-ig,
.logo-line{
  width:44px; height:44px; border-radius:12px;
  object-fit:contain; display:block;
  image-rendering:-webkit-optimize-contrast;
}
.logo-ig{ border:1px solid var(--ig-border); }

/* =========================================================
   CTA / Footer
========================================================= */
.cta{ background:linear-gradient(180deg,#f8fafc,#ffffff); }
.cta-title{ margin-bottom:.2em; }
.cta-sub{ color:#475569; }
.cta-actions{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }

.site-footer{ padding:40px 0; border-top:1px solid rgba(0,0,0,.05); }
.site-footer .container{
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.footer-nav{ display:flex; gap:14px; }
.footer-nav a{ opacity:.9; }
.footer-nav a:hover{ opacity:1; }

/* =========================================================
   Responsive
========================================================= */
@media (max-width:1024px){
  .about-pills{ grid-template-columns:1fr 1fr; }
  .card-list{ grid-template-columns:1fr 1fr; }
  .pricing{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .site-nav ul, .nav-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }

  /* Drawer menu（JSで .is-open 付与） */
  .site-nav{
    position:fixed; inset:64px 16px auto 16px;
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:14px; box-shadow:var(--shadow);
    display:none; flex-direction:column; gap:10px;
  }
  .site-nav.is-open{ display:flex; }
  .site-nav ul{ display:flex; flex-direction:column; gap:6px; }
  .site-nav .btn{ width:100%; }

  .hero{ padding:60px 0 40px; }
  .section{ padding:64px 0; }
}

@media (max-width:620px){
  .about-pills{ grid-template-columns:1fr; }
  .card-list{ grid-template-columns:1fr; }
  .hero-actions .btn{ flex:1; }
  .contact-card{ flex-direction:column; align-items:flex-start; gap:12px; }
  .contact-action, .btn{ width:100%; }
}

/* === Footer: center on mobile === */
@media (max-width: 768px){
  .site-footer{ text-align:center; }
  .site-footer .container{
    flex-direction: column;      /* 縦並びに */
    align-items: center;         /* 中央寄せ */
    justify-content: center;     /* 中央寄せ */
    gap: 12px;
  }
  .site-footer .copyright{
    width: 100%;
    margin: 0;
  }
  .footer-nav{
    width: 100%;
    display: flex;
    justify-content: center;     /* リンクを中央に */
    gap: 18px;
    flex-wrap: wrap;             /* 折返しOK */
  }
}

/* =========================================================
   Utilities / Focus ring
========================================================= */
.shadow{ box-shadow:var(--shadow); }
.round{ border-radius:var(--radius-lg); }
.hidden{ display:none; }

:where(a,button).btn:focus-visible,
:where(nav a):focus-visible{
  outline:3px solid #93c5fd;
  outline-offset:2px;
  border-radius:10px;
}