@charset "UTF-8";
/* CSS Document */

/* ===== Theme Tokens （前ページと整合）===== */
:root{
  --mint:#7FAE9E;        /* グリーン */
  --blush:#F6E9EE;       /* 淡ピンク 背景 */
  --ink:#303041;         /* 本文 */
  --muted:#777777;       /* 補助 */
  --line:#E6E6E6;        /* 罫線 */
  --brand:#F395A8;       /* CTAメイン */
  --brand-700:#f6c2ca;   /* CTAホバー */
  --brand-50:#E4C1C9;    /* とても淡いピンク */
  --radius-2xl:8px;      /* 角丸 */
  --shadow-soft:0 6px 18px rgba(0,0,0,.06);
  --dot-size:14px;       /* 見出し左の“ころん丸” */
  --dot-top:.2em;
}
/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Noto Sans JP',system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--ink); line-height:1.85; background:#fff;
}
h1,h2,h3{font-family:"Yu Mincho","Hiragino Mincho ProN","游明朝",serif; letter-spacing:.02em}
a{color:var(--brand); text-decoration:none} a:hover{opacity:.95}
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px}

/* ===== Buttons / micro-interactions ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.2rem;border-radius:999px;font-weight:700;border:1px solid transparent;
  box-shadow:0 6px 14px rgba(0,0,0,.08);transition:transform .16s ease,box-shadow .22s ease,background-color .18s ease,color .18s ease,border-color .18s ease;will-change:transform}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 22px rgba(0,0,0,.16);background:var(--brand-700)}
.btn--ghost{background:#fff;color:var(--brand);border:1px solid var(--line)}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.12);border-color:color-mix(in oklab, var(--brand) 28%, #fff)}
.btn--sm{padding:.6rem .9rem;font-size:.92rem}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;border-radius:var(--radius-2xl);
   background: linear-gradient(135deg, #E4C1C9 0%, #D88FA3 45%, #C85D80 100%);
  color:#fff;padding:44px 22px;box-shadow:var(--shadow-soft)}
.eyebrow{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:#ffffff22;border:1px solid #ffffff55;font-weight:800;font-size:.82rem;letter-spacing:.12em}
.hero h1{margin:10px 0 8px;font-size:clamp(1.6rem,4.2vw,2.2rem)}
.hero p{margin:.2rem 0 1rem}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ===== Intro (メインPR文) ===== */
.intro{margin:30px 0 10px}
.intro .lead{
  max-width: 48ch; color:#5a5a5a; font-size:1.02rem; line-height:2.0; letter-spacing:.02em; text-wrap:balance;
}
@media(min-width:1024px){ .intro .lead{ white-space:nowrap } }

/* ===== Feature band（信頼・実績） ===== */
.band{
  margin:20px 0 24px; background:var(--brand-50); border:1px solid var(--line);
  border-radius:var(--radius-2xl); padding:14px 16px;
}
.band ul{margin:.2rem 0 0;padding-left:1.2rem}
.band li{margin:.2rem 0}

/* ===== Course Cards ===== */
.section{margin:36px 0}
.section h2{font-size:clamp(1.4rem,3.6vw,1.9rem);margin:0 0 10px}
.section .lead2{color:#5a5a5a;margin:0 0 18px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.grid-3col>.col{grid-column:span 12}
@media(min-width:760px){.grid-3col>.col{grid-column:span 6}}
@media(min-width:1024px){.grid-3col>.col{grid-column:span 4}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;height:100%}
.card .thumb{aspect-ratio:16/10;background:#faf7f8}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .pad{padding:16px}

/* 見出し“ころん丸”＋下線（サイズは既存のh3に合わせる） */
.card h3{position:relative;margin:.4rem 0 .2rem;padding-left:calc(var(--dot-size) + .8rem);font-weight:800;color:#2f2f2f;letter-spacing:.02em}
.card h3::before{
  content:"";position:absolute;left:0;top:var(--dot-top);
  width:var(--dot-size);height:var(--dot-size);border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffffb3 0 38%, transparent 39%),
             linear-gradient(180deg, #f6c2ca, var(--brand));
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.08);
}
.card h3::after{content:"";display:block;width:82px;height:4px;margin:.35rem 0 0;border-radius:999px;background:linear-gradient(90deg,#f6c2ca,#fff);opacity:.9;
  transform-origin:left center;transform:scaleX(.6);transition:transform .22s ease,opacity .22s ease}
.card:hover h3::after{transform:scaleX(1);opacity:1}

/* 説明文の読みやすさ */
.card p{margin:.5rem 0 0;color:#444}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;font-size:.82rem;font-weight:800;border-radius:999px;background:#fff;border:1px solid var(--line);color:#2f2f2f;box-shadow:var(--shadow-soft)}
.badge + .badge{margin-left:.35rem}

/* 箇条書き（カード内の補強ポイント） */
.points{list-style:none;margin:.6rem 0 0;padding:0}
.points li{position:relative;margin:.35rem 0;padding-left:1.4rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.45rem .6rem .45rem 1.4rem}
.points li::before{
  content:"";position:absolute;left:.5rem;top:.62rem;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffffb3 0 38%, transparent 39%),linear-gradient(180deg,#f6c2ca,var(--brand));
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.10);
}

/* CTA行 */
.cta-row{display:flex;gap:8px;margin-top:auto;padding:0 16px 16px;flex-wrap:wrap}
.card .cta-row .btn.btn--sm{transition:transform .16s ease, box-shadow .22s ease, background-color .18s ease, color .18s ease, border-color .18s ease;will-change:transform}
.card .cta-row .btn.btn--sm:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.12)}
.card .cta-row .btn--primary:hover{background:var(--brand-700)}
.card .cta-row .btn--ghost:hover{border-color:color-mix(in oklab, var(--brand) 28%, #fff)}

/* ===== Story/信頼帯 ===== */
.quote{
  margin:18px 0 28px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-2xl); padding:16px;
  box-shadow:var(--shadow-soft)
}
.quote p{margin:.2rem 0;color:#444}
.quote .sig{font-weight:700;color:#2f2f2f}

/* ===== Final CTA ===== */
.final{background:linear-gradient(135deg,var(--blush),#ffffff);border:1px solid var(--line);border-radius:var(--radius-2xl);padding:22px;text-align:center;box-shadow:var(--shadow-soft)}
.final p{margin:.4rem 0 1rem}

/* ===== Small utilities ===== */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* STORY ティーザー */
.story-h2{
  font-family:"Yu Mincho","Hiragino Mincho ProN","游明朝",serif;
  font-size:clamp(1.3rem,3.5vw,1.8rem);
  margin:0 0 10px; letter-spacing:.02em;
}
.story-grid{
  display:grid; gap:14px; margin-top:12px;
  grid-template-columns: repeat(12,1fr);
}
.story-card{ 
  grid-column: span 12;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft); overflow:hidden; position:relative;
}
.story-card--lead{ background: linear-gradient(135deg, var(--blush), #fff); }
@media(min-width:800px){
  .story-card{ grid-column: span 4; }
  .story-card--lead{ grid-column: span 12; }
}
.story-link{ display:block; padding:16px 16px 18px; color:inherit }
.story-meta{
  display:inline-block; font-weight:800; font-size:.78rem; letter-spacing:.12em;
  padding:.3rem .6rem; border-radius:999px; background:#fff; border:1px solid var(--line);
  color:#2f2f2f; box-shadow:var(--shadow-soft); margin-bottom:.5rem;
}
.story-title{ font-size:1.06rem; margin:.2rem 0 .2rem }
.story-sub{ color:#555; margin:0 }
.story-note{ color:#666; font-size:.95rem; margin:.8rem 0 0 }

.story-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.bullets--pretty li::before{ content:"・"; color: var(--mint); font-weight:700; }

/* ベース（既存 .btn--ghost を少しだけ上品に） */
.btn--ghost{
  position:relative; overflow:hidden; will-change:transform;
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
  border-color: var(--brand);
}
.btn--ghost:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08) }
.btn--ghost:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px }

/* 斜めに走る“きらり” */
.btn--ghost::after{
  content:""; position:absolute; inset:-30% -60% auto auto; 
  width:40%; height:200%;
  background: linear-gradient(120deg, transparent 0%, #ffffff80 50%, transparent 100%);
  transform: translateX(-140%) rotate(20deg);
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .btn--ghost:hover::after{ 
    animation: btnShine 900ms ease-out forwards;
  }
}
@keyframes btnShine{
  to{ transform: translateX(60%) rotate(20deg); }
}

.hero{
  background: linear-gradient(135deg, #EED8DF 0%, #E6B7C7 50%, #DFA1B4 100%);
}