/* ===== BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#f8f5ee;color:#2f2a24;font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic',sans-serif;line-height:1.7}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.page{width:100%;max-width:480px;margin:0 auto;background:#fff;overflow:hidden}

/* ===== HERO ===== */
.hero{background:linear-gradient(160deg,#fdfcf8 0%,#f5f9f2 50%,#eef6ea 100%);padding:0 20px 0;position:relative;overflow:hidden;min-height:420px}
.hero-img-sec{margin:0}
.hero-img{width:100%;display:block}
.cta-img-link{display:block}
.cta-img{width:100%;display:block}
.hero-img-sec .badges{display:flex;justify-content:space-around;padding:20px 10px 28px;gap:6px;background:#eef6ea;margin:0}
.hero-img-sec .badge{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.hero-img-sec .badge-circle{width:88px;height:88px;border-radius:50%;background:#fff;border:2px solid #b8d8b0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:6px;box-shadow:0 2px 8px rgba(90,122,90,0.12)}
.hero-img-sec .badge-icon{font-size:24px;line-height:1;margin-bottom:3px}
.hero-img-sec .badge-circle strong{font-size:11px;color:#3a5a3a;font-weight:700;line-height:1.2;text-align:center;padding:0 4px}
.hero-img-sec .badge-desc{font-size:11.5px;color:#5a6a5a;line-height:1.5}

.hero-deco-top{position:relative;height:70px;margin:0 -20px;pointer-events:none;z-index:1;background:transparent}
.deco-moon-strip{position:absolute;left:0;top:0;width:65%;height:auto;object-fit:contain;object-position:left top}
.deco-leaves-tr{position:absolute;right:0;top:0;width:28%;height:auto;object-fit:contain;object-position:right top}

.hero-inner{position:relative;z-index:3;min-height:160px}

.hero-text{width:55%;padding-top:8px;position:relative;z-index:3}

.hero-label{
  display:inline-block;font-size:13px;font-weight:500;
  color:#5a7a5a;background:rgba(90,122,90,0.1);
  border-left:3px solid #7aad6a;padding:2px 10px;margin-bottom:10px;border-radius:0 4px 4px 0
}

.hero-title{
  font-size:clamp(18px,4.5vw,22px);font-weight:900;line-height:1.35;
  color:#1e3a1e;margin-bottom:10px;letter-spacing:-0.02em
}
.hero-title em{font-style:normal;color:#3a7a3a}

.hero-sub{font-size:clamp(11px,3vw,13px);color:#4a5a4a;line-height:1.8;margin-top:10px;margin-bottom:0}

.hero-photo-wrap{
  position:absolute;right:0;top:0;width:62%;height:100%;z-index:2
}
.hero-photo{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block
}

/* 3バッジ */
.badges{display:flex;justify-content:space-around;padding:20px 10px 28px;gap:6px;background:#eef6ea;position:relative;z-index:5;margin:0 -20px 0}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.badge-circle{
  width:88px;height:88px;border-radius:50%;
  background:#fff;border:2px solid #b8d8b0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-bottom:6px;box-shadow:0 2px 8px rgba(90,122,90,0.12)
}
.badge-icon{font-size:24px;line-height:1;margin-bottom:3px}
.badge-circle strong{font-size:11px;color:#3a5a3a;font-weight:700;line-height:1.2;text-align:center;padding:0 4px}
.badge-desc{font-size:11.5px;color:#5a6a5a;line-height:1.5}

/* ===== LINE CTA BAND ===== */
.cta-band{background:linear-gradient(135deg,#e8f5e0 0%,#d4edc8 100%);padding:20px 16px;border-top:1px solid #c5dfc0;border-bottom:1px solid #c5dfc0}
.cta-band-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.cta-band-label{font-size:12px;color:#4a6a4a;text-align:center}
.cta-band-row{display:flex;align-items:center;gap:10px;width:100%}

.line-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  background:#06C755;color:#fff;font-size:15px;font-weight:700;
  padding:14px 16px;border-radius:999px;
  box-shadow:0 4px 12px rgba(6,199,85,0.35);
  transition:transform 0.15s,box-shadow 0.15s;cursor:pointer;
  text-align:center
}
.line-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(6,199,85,0.45)}
.line-btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(6,199,85,0.3)}
.line-btn-lg{font-size:16px;padding:16px 20px;width:100%;max-width:340px}

.free-badge{
  background:#fff;border:2px solid #06C755;border-radius:50%;
  width:52px;height:52px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#06C755;text-align:center;line-height:1.3
}

.cta-small{font-size:11px;color:#6a8a6a;text-align:center}

/* ===== SECTIONS ===== */
.section{padding:36px 20px}

.section-title{
  font-size:18px;font-weight:700;color:#2a4a2a;margin-bottom:20px;line-height:1.4
}
.center-title{text-align:center}
.arrow-deco{color:#7aad6a;margin-right:4px}

/* ===== お悩み ===== */
.concerns-sec{background:#f8f5ee}
.concerns-inner{display:flex;align-items:flex-start;gap:12px;margin-top:4px}
.concerns-list{list-style:none;flex:1}
.concerns-list li{
  padding:10px 12px 10px 36px;position:relative;
  border-bottom:1px solid #e4dfd6;font-size:14px;color:#3a3a2a;line-height:1.5
}
.concerns-list li:last-child{border-bottom:none}
.concerns-list li::before{
  content:'✓';position:absolute;left:10px;top:10px;
  color:#7aad6a;font-weight:700;font-size:14px
}
.concerns-photo{width:42%;flex-shrink:0;border-radius:12px;object-fit:cover;object-position:center top}

/* ===== この講座で学べること ===== */
.learn-sec{background:#fff}
.learn-list{display:flex;flex-direction:column;gap:16px}
.learn-item{
  display:flex;align-items:center;gap:14px;
  background:#f4faf2;border-radius:16px;padding:14px;
  border:1px solid #d8ecd4
}
.learn-img{width:88px;height:88px;object-fit:cover;border-radius:12px;flex-shrink:0}
.learn-body h3{font-size:14px;font-weight:700;color:#2a4a2a;margin-bottom:5px;line-height:1.4}
.learn-body p{font-size:12.5px;color:#4a5a4a;line-height:1.6}

/* ===== 選ばれる3つの理由 ===== */
.reasons-sec{background:#f4faf2}
.reasons-list{display:flex;flex-direction:column;gap:14px}
.reason-item{
  display:flex;align-items:center;gap:14px;
  background:#fff;border-radius:16px;padding:16px;
  border:1px solid #d8ecd4;box-shadow:0 2px 6px rgba(90,140,90,0.08)
}
.reason-icon{font-size:28px;width:50px;flex-shrink:0;text-align:center}
.reason-body h3{font-size:14px;font-weight:700;color:#2a4a2a;margin-bottom:4px}
.reason-body p{font-size:12.5px;color:#4a5a4a;line-height:1.6}

/* ===== プロフィール ===== */
.profile-sec{background:#fff;border-top:4px solid #d4ecc8}
.profile-label-top{font-size:12px;color:#7a9a7a;text-align:center;margin-bottom:6px;letter-spacing:0.08em}
.profile-inner{display:flex;gap:16px;align-items:flex-start}
.profile-photo{width:110px;height:auto;border-radius:12px;flex-shrink:0;object-fit:cover}
.profile-role{font-size:12px;color:#7a9a7a;margin-bottom:2px}
.profile-name{font-size:22px;font-weight:900;color:#1e3a1e;margin-bottom:10px}
.profile-text p{font-size:12.5px;color:#4a5a4a;line-height:1.75;margin-bottom:8px}
.profile-sns{font-size:12px;color:#5a7a5a}
.profile-sns a{color:#3a7a3a;font-weight:600;text-decoration:underline}

/* ===== FAQ ===== */
.faq-sec{background:#f8f5ee}
.faq-inner{display:flex;gap:14px;align-items:flex-start}
.faq-list{flex:1}
.faq-item{padding:12px 0;border-bottom:1px solid #e4dfd6}
.faq-item:last-child{border-bottom:none}
.faq-item dt{font-size:13px;font-weight:600;color:#2a4a2a;margin-bottom:5px;display:flex;gap:8px;align-items:flex-start}
.faq-item dd{font-size:12.5px;color:#4a5a4a;line-height:1.7;display:flex;gap:8px;align-items:flex-start}
.faq-q,.faq-a{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;margin-top:1px
}
.faq-q{background:#3a7a3a;color:#fff}
.faq-a{background:#e8f0e4;color:#3a7a3a}
.faq-photo{width:38%;flex-shrink:0;border-radius:12px;object-fit:cover}

/* ===== BOTTOM CTA ===== */
.cta-bottom{
  background:linear-gradient(135deg,#e8f5e0 0%,#d0eac4 100%);
  padding:36px 20px 40px;text-align:center;
  border-top:3px solid #c0dbb8
}
.cta-bottom-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.cta-bottom-sub{font-size:14px;color:#4a6a4a}
.cta-bottom-title{font-size:20px;font-weight:700;color:#1e3a1e;line-height:1.4}
.cta-bottom-note{font-size:12px;color:#5a7a5a}

/* ===== 竹迫さんの想い ===== */
.story-sec{background:linear-gradient(160deg,#fdfcf8 0%,#f4faf2 100%)}
.story-lead{
  font-size:18px;font-weight:700;color:#2a4a2a;line-height:1.7;
  text-align:center;margin-bottom:16px;
  border-left:none;padding:16px;
  background:rgba(90,140,90,0.07);border-radius:12px;
}
.story-photos{display:flex;gap:10px;margin:16px 0}
.story-photos img{flex:1;height:130px;object-fit:cover;border-radius:12px}
.story-body p{font-size:13px;color:#4a5a4a;line-height:1.8;margin-bottom:12px}
.voice-box{background:#e8f5e0;border-radius:12px;padding:14px 16px;margin-top:12px;border-left:4px solid #06C755}
.voice-title{font-size:13px;font-weight:700;color:#2a5a2a;margin-bottom:8px}
.voice-list{list-style:none;padding:0}
.voice-list li{font-size:13px;color:#3a5a3a;padding:4px 0 4px 18px;position:relative}
.voice-list li::before{content:'✓';position:absolute;left:0;color:#06C755;font-weight:700}

/* ===== プロフィール 月デコ ===== */
.profile-sec{position:relative;overflow:hidden}
.profile-moon-deco{position:absolute;right:0;bottom:10px;width:36%;opacity:0.55;pointer-events:none}

/* ===== RESPONSIVE ===== */
@media(max-width:380px){
  .hero-title{font-size:22px}
  .badge-circle{width:70px;height:70px}
  .badge-icon{font-size:18px}
  .badge-circle strong{font-size:8.5px}
  .concerns-photo{width:38%}
  .faq-photo{display:none}
  .story-photos img{height:100px}
}
