/* ===================================================
   ボーナスレクチャーLP — style.css
   カラー: ネイビー × ライトブルー × オレンジ
   =================================================== */

/* ---------- Design Tokens ---------- */
:root {
  --c-navy:       #1a2744;
  --c-navy-dark:  #111b30;
  --c-navy-light: #243352;
  --c-blue:       #4a9eff;
  --c-blue-light: #e8f2ff;
  --c-blue-pale:  #f4f8ff;
  --c-orange:     #ff6b35;
  --c-orange-hover:#ff8a5c;
  --c-orange-glow: rgba(255,107,53,.35);
  --c-white:      #ffffff;
  --c-gray-50:    #f9fafb;
  --c-gray-100:   #f3f4f6;
  --c-gray-200:   #e5e7eb;
  --c-gray-600:   #6b7280;
  --c-gray-800:   #1f2937;
  --c-text:       #2d3748;
  --c-text-light: #64748b;
  --ff:           'Noto Sans JP', sans-serif;
  --radius:       12px;
  --radius-lg:    20px;
  --shadow:       0 4px 24px rgba(26,39,68,.08);
  --shadow-lg:    0 12px 40px rgba(26,39,68,.12);
  --shadow-card:  0 8px 32px rgba(26,39,68,.10);
  --transition:   .3s cubic-bezier(.4,0,.2,1);
  --max-w:        800px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-white);
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ---------- Utility ---------- */
.container { width:90%; max-width:var(--max-w); margin:0 auto; }
.text-accent { color:var(--c-blue); }
.text-highlight-orange { color:var(--c-orange); }
.sp-hide { display:inline; }
.sp-only { display:none; }
.nowrap { white-space:nowrap; }
@media (max-width:600px) {
  .sp-hide { display:none; }
  .sp-only { display:inline; }
}

/* ---------- Fade-up animation ---------- */
.fade-up {
  opacity:0;
  transform:translateY(30px);
  transition: opacity .6s var(--transition), transform .6s var(--transition);
}
.fade-up.is-visible {
  opacity:1;
  transform:translateY(0);
}
.benefit-card.fade-up:nth-child(2) { transition-delay:.05s; }
.benefit-card.fade-up:nth-child(3) { transition-delay:.10s; }
.benefit-card.fade-up:nth-child(4) { transition-delay:.15s; }
.benefit-card.fade-up:nth-child(5) { transition-delay:.20s; }
.benefit-card.fade-up:nth-child(6) { transition-delay:.25s; }

/* ---------- Section titles ---------- */
.section-title {
  text-align:center;
  font-size: clamp(1.4rem,4vw,1.9rem);
  font-weight:800;
  line-height:1.5;
  margin-bottom:2.5rem;
  color: var(--c-navy);
}
.section-title--left { text-align:left; }
.section-title--white { color:var(--c-white); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--ff);
  font-weight:700;
  font-size:1rem;
  border:none;
  border-radius:60px;
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  white-space:nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--c-orange) 0%, #ff8a5c 100%);
  color:var(--c-white);
  padding:16px 36px;
  box-shadow: 0 6px 20px var(--c-orange-glow);
}
.btn--primary:hover {
  transform:translateY(-2px);
  box-shadow: 0 10px 30px var(--c-orange-glow);
  background: linear-gradient(135deg, #ff8a5c 0%, var(--c-orange) 100%);
}
.btn--large { font-size:1.1rem; padding:18px 42px; }
.btn--xlarge { font-size:1.15rem; padding:20px 48px; }
.btn__icon { font-size:.85em; }
.btn-note {
  text-align:center;
  font-size:.82rem;
  color:var(--c-gray-600);
  margin-top:12px;
}

/* pulse animation */
.btn--pulse {
  animation: pulse 2.5s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 6px 20px var(--c-orange-glow); }
  50%  { box-shadow: 0 6px 40px rgba(255,107,53,.5); }
  100% { box-shadow: 0 6px 20px var(--c-orange-glow); }
}

/* =============================================
   SECTION 1 — HERO
   ============================================= */
.hero {
  position:relative;
  background: linear-gradient(160deg, var(--c-navy-dark) 0%, var(--c-navy) 40%, var(--c-navy-light) 100%);
  padding: clamp(50px,10vw,90px) 0 clamp(40px,8vw,70px);
  overflow:hidden;
}

/* Particles */
.hero__particles span {
  position:absolute;
  border-radius:50%;
  background:rgba(74,158,255,.15);
  animation: float 8s ease-in-out infinite;
}
.hero__particles span:nth-child(1){ width:140px;height:140px;top:-30px;left:-40px;animation-delay:0s; }
.hero__particles span:nth-child(2){ width:80px;height:80px;top:30%;right:5%;animation-delay:1.5s; }
.hero__particles span:nth-child(3){ width:60px;height:60px;bottom:20%;left:10%;animation-delay:3s; }
.hero__particles span:nth-child(4){ width:100px;height:100px;bottom:-20px;right:15%;animation-delay:4.5s;background:rgba(255,107,53,.1); }
.hero__particles span:nth-child(5){ width:50px;height:50px;top:20%;left:30%;animation-delay:2s; }
@keyframes float {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-20px) scale(1.05); }
}

.hero__inner { position:relative; z-index:1; max-width:960px; }

/* Hero 2-column layout */
.hero__content {
  display:flex;
  align-items:center;
  gap:36px;
}
.hero__text {
  flex:1;
  min-width:0;
  text-align:left;
}
.hero__image-wrap {
  flex-shrink:0;
  width:320px;
}
.hero__image {
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.25));
  animation: heroFloat 4s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}

.hero__badge {
  display:inline-block;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  color:var(--c-white);
  font-size:.85rem;
  font-weight:600;
  padding:8px 22px;
  border-radius:60px;
  border:1px solid rgba(255,255,255,.18);
  margin-bottom:24px;
  letter-spacing:.04em;
}

.hero__title {
  color:var(--c-white);
  font-size: clamp(1.3rem,4vw,2rem);
  font-weight:900;
  line-height:1.55;
  margin-bottom:20px;
}
.hero__title-accent { font-size:.85em; }
.hero__title-accent em { font-style:normal; color:var(--c-blue); }
.hero__title-highlight {
  font-size:1.2em;
  color:var(--c-orange);
  display:inline-block;
  position:relative;
}
.hero__title-highlight::after {
  content:'';
  position:absolute;
  left:0; bottom:2px;
  width:100%; height:6px;
  background:var(--c-orange);
  opacity:.25;
  border-radius:3px;
}
.hero__title-free {
  color:var(--c-orange);
}

.hero__sub {
  color:rgba(255,255,255,.8);
  font-size: clamp(.88rem,2.2vw,1.02rem);
  line-height:1.85;
  margin-bottom:32px;
}

.hero__note {
  color:rgba(255,255,255,.55);
  font-size:.78rem;
  margin-top:14px;
}

@media (max-width:768px) {
  .hero__content {
    flex-direction:column;
    text-align:center;
  }
  .hero__text { text-align:center; }
  .hero__image-wrap {
    display:none;
  }
}

/* =============================================
   SECTION 2 — INTRO
   ============================================= */
.intro {
  padding: clamp(50px,8vw,90px) 0;
  background: var(--c-white);
}
.intro__grid {
  display:flex;
  gap:40px;
  align-items:flex-start;
}
.intro__photo-wrap {
  flex-shrink:0;
  width:200px;
}
.intro__photo {
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:50%;
  border:4px solid var(--c-blue-light);
  box-shadow: var(--shadow);
}
.intro__text p {
  margin-bottom:16px;
  font-size:.95rem;
}
.intro__quotes {
  margin:20px 0;
  padding-left:16px;
  border-left:3px solid var(--c-blue);
}
.intro__quote {
  font-weight:600;
  color:var(--c-navy);
  margin-bottom:8px !important;
  font-size:.95rem !important;
}
.intro__lead {
  font-size:1.05rem !important;
  font-weight:600;
  color:var(--c-navy);
  margin-top:8px;
}

@media (max-width:600px) {
  .intro__grid {
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .intro__photo-wrap { width:160px; }
  .intro__photo { width:160px; height:160px; }
  .intro__quotes { border-left:none; padding-left:0; text-align:left; }
  .section-title--left { text-align:center; }
}

/* =============================================
   SECTION 3 — PROBLEMS
   ============================================= */
.problems {
  padding: clamp(50px,8vw,90px) 0;
  background: var(--c-blue-pale);
}
.problems__list {
  max-width:620px;
  margin:0 auto 32px;
}
.problems__item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:1rem;
  font-weight:500;
  padding:14px 0;
  border-bottom:1px solid var(--c-gray-200);
  color:var(--c-gray-800);
}
.problems__item:last-child { border-bottom:none; }
.problems__check {
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  background:var(--c-blue);
  color:var(--c-white);
  font-weight:700;
  font-size:.8rem;
  border-radius:50%;
}
.problems__cta-text {
  text-align:center;
  font-size:1.05rem;
  font-weight:600;
  color:var(--c-navy);
}

/* =============================================
   SECTION 4 — BENEFITS (Premium Design)
   ============================================= */
.benefits {
  position: relative;
  padding: clamp(60px,10vw,100px) 0;
  background: linear-gradient(170deg, #0d1526 0%, var(--c-navy-dark) 30%, var(--c-navy) 100%);
  overflow: hidden;
}

/* Top glow effect */
.benefits__glow-top {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(74,158,255,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Section title area */
.benefits__title-wrap {
  text-align: center;
  margin-bottom: 48px;
}
.benefits__label {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: #c9a94e;
  background: linear-gradient(135deg, rgba(201,169,78,.15), rgba(201,169,78,.05));
  border: 1px solid rgba(201,169,78,.35);
  padding: 8px 28px;
  border-radius: 60px;
  margin-bottom: 20px;
}
.benefits__title-big {
  font-size: 1.35em;
  display: inline-block;
  position: relative;
}
.benefits__title-sub {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  font-weight: 500;
  margin-top: 8px;
}

/* ---------- Premium Benefit Card ---------- */
.benefit-card {
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transition: var(--transition);
}
.benefit-card--premium {
  border: 1px solid rgba(201,169,78,.2);
}
.benefit-card--premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 0 30px rgba(201,169,78,.08);
  border-color: rgba(201,169,78,.4);
}

/* BONUS ribbon — diagonal corner */
.benefit-card__ribbon {
  position: absolute;
  top: 22px;
  right: -38px;
  width: 150px;
  text-align: center;
  background: linear-gradient(135deg, #c9a94e 0%, #e8d48b 50%, #c9a94e 100%);
  color: #1a1a2e;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  padding: 6px 0;
  transform: rotate(45deg);
  transform-origin: center;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(201,169,78,.3);
  line-height: 1;
}

/* Card header */
.benefit-card__header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 30px;
  background: linear-gradient(135deg, #11192e 0%, #1e2d4d 60%, #243352 100%);
  color: var(--c-white);
  border-bottom: 2px solid rgba(201,169,78,.25);
  position: relative;
}
.benefit-card__header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 30px;
  right: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,169,78,.5), transparent);
}

/* Number badge */
.benefit-card__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-orange) 0%, #ff8a5c 100%);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(255,107,53,.3);
}

/* Icon wrap */
.benefit-card__icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.benefit-card__icon {
  font-size: 1.5rem;
}

/* Sub & title */
.benefit-card__sub {
  font-size: .8rem;
  opacity: .75;
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: .02em;
}
.benefit-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
  background: linear-gradient(135deg, #ffffff 0%, #e0e8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card body */
.benefit-card__body {
  padding: 26px 30px 30px;
  background: linear-gradient(180deg, #fafbff 0%, var(--c-white) 100%);
}
.benefit-card__lead {
  font-size: .93rem;
  margin-bottom: 16px;
  color: var(--c-text);
  line-height: 1.8;
}

/* Checklist */
.benefit-card__checks {
  margin: 18px 0;
}
.benefit-card__checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--c-gray-800);
}
.benefit-card__checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-blue) 0%, #6db3ff 100%);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

/* Bottom note area */
.benefit-card__bottom {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(201,169,78,.15);
  background: linear-gradient(135deg, rgba(201,169,78,.04) 0%, transparent 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: -30px;
  padding: 18px 30px 22px;
}
.benefit-card__note {
  font-size: .88rem;
  color: var(--c-text-light);
  line-height: 1.7;
}

/* CTA in benefits section */
.benefits__cta {
  text-align: center;
  margin-top: 48px;
}
.btn-note--white {
  color: rgba(255,255,255,.6);
}

/* Card shimmer effect on hover */
.benefit-card--premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,169,78,.06), transparent);
  transition: .7s ease;
  z-index: 1;
  pointer-events: none;
}
.benefit-card--premium:hover::before {
  left: 100%;
}

@media (max-width:600px) {
  .benefit-card__header {
    padding: 20px 18px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .benefit-card__num {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }
  .benefit-card__icon-wrap {
    width: 40px;
    height: 40px;
  }
  .benefit-card__icon { font-size: 1.2rem; }
  .benefit-card__title { font-size: 1.05rem; }
  .benefit-card__body { padding: 18px 18px 22px; }
  .benefit-card__bottom {
    margin-left: -18px;
    margin-right: -18px;
    margin-bottom: -22px;
    padding: 14px 18px 18px;
  }
  .benefit-card__ribbon {
    top: 16px;
    right: -42px;
    width: 140px;
    font-size: .55rem;
    padding: 5px 0;
  }
  .benefits__label {
    font-size: .72rem;
    padding: 6px 20px;
  }
}

/* =============================================
   SECTION 5 — WHY
   ============================================= */
.why {
  padding: clamp(50px,8vw,90px) 0;
  background: var(--c-white);
}
.why__content {
  max-width:650px;
  margin:0 auto;
  font-size:.95rem;
}
.why__content p {
  margin-bottom:18px;
}
.why__lead {
  font-size:1.15rem !important;
  font-weight:700;
  color:var(--c-navy);
}
.why__quotes {
  margin:20px 0;
  padding:16px 20px;
  background:var(--c-blue-pale);
  border-radius:var(--radius);
  border-left:4px solid var(--c-blue);
}
.why__quote {
  font-weight:600;
  color:var(--c-navy);
  margin-bottom:6px !important;
}
.why__closing {
  font-weight:700;
  font-size:1.05rem !important;
  color:var(--c-navy);
  text-align:center;
  margin-top:28px !important;
  line-height:1.9;
}

/* =============================================
   SECTION 6 — PROFILE
   ============================================= */
.profile {
  padding: clamp(50px,8vw,90px) 0;
  background: linear-gradient(170deg, var(--c-navy) 0%, var(--c-navy-dark) 100%);
}
.profile__card {
  display:flex;
  gap:36px;
  align-items:flex-start;
  background:var(--c-white);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:var(--shadow-lg);
}
.profile__photo-wrap { flex-shrink:0; }
.profile__photo {
  width:220px;
  height:auto;
  border-radius:var(--radius);
  object-fit:cover;
}
.profile__name {
  font-size:1.35rem;
  font-weight:800;
  color:var(--c-navy);
  margin-bottom:6px;
}
.profile__name small {
  font-size:.7em;
  font-weight:500;
  color:var(--c-text-light);
  margin-left:6px;
}
.profile__role {
  font-size:.88rem;
  color:var(--c-blue);
  font-weight:600;
  margin-bottom:14px;
}
.profile__info > p {
  font-size:.92rem;
  margin-bottom:14px;
}
.profile__results-title {
  font-size:.92rem;
  font-weight:700;
  color:var(--c-navy);
  margin-bottom:10px;
}
.profile__results li {
  position:relative;
  padding-left:20px;
  margin-bottom:8px;
  font-size:.9rem;
  line-height:1.6;
}
.profile__results li::before {
  content:'•';
  position:absolute;
  left:4px;
  color:var(--c-orange);
  font-weight:900;
}
.profile__results strong { color:var(--c-orange); }
.profile__note {
  font-size:.85rem;
  color:var(--c-text-light);
  margin-top:14px;
}
.profile__badges {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:16px;
  margin-bottom:14px;
}
.profile__badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border: 1px solid #e6c84d;
  color: #7a5c00;
  font-size:.85rem;
  font-weight:700;
  padding:8px 16px;
  border-radius:24px;
  box-shadow: 0 2px 6px rgba(230,200,77,0.25);
}

@media (max-width:600px){
  .profile__card {
    flex-direction:column;
    align-items:center;
    padding:24px 20px;
    text-align:center;
  }
  .profile__photo { width:180px; border-radius:50%; }
  .profile__results { text-align:left; }
}

/* =============================================
   SECTION 7 — CTA / STEPS
   ============================================= */
.cta-section {
  padding: clamp(50px,8vw,90px) 0;
  background: var(--c-blue-pale);
}
.steps {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.step {
  text-align:center;
  background:var(--c-white);
  border-radius:var(--radius-lg);
  padding:24px 20px;
  width:180px;
  box-shadow:var(--shadow);
}
.step__num {
  font-size:.75rem;
  font-weight:800;
  color:var(--c-blue);
  letter-spacing:.06em;
  margin-bottom:8px;
}
.step__icon {
  font-size:2rem;
  margin-bottom:8px;
}
.step__text {
  font-size:.88rem;
  font-weight:600;
  color:var(--c-navy);
  line-height:1.5;
}
.step__arrow {
  color:var(--c-blue);
  font-size:1.2rem;
  font-weight:700;
}

.cta-section__box {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--c-white);
  padding:40px 28px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  border:2px solid var(--c-orange);
}
.cta-section__notes {
  margin-top:20px;
  text-align:left;
}
.cta-section__notes li {
  font-size:.85rem;
  color:var(--c-text-light);
  margin-bottom:4px;
}

@media (max-width:600px){
  .steps { flex-direction:column; gap:8px; }
  .step { width:100%; max-width:280px; }
  .step__arrow { transform:rotate(90deg); }
  .cta-section__box { padding:28px 16px; }
  .btn--xlarge { font-size:1rem; padding:16px 24px; white-space:normal; }
}

/* =============================================
   SECTION 8 — FOOTER
   ============================================= */
.footer {
  padding:28px 0;
  background:var(--c-navy-dark);
  text-align:center;
}
.footer__links {
  margin-bottom:10px;
}
.footer__links a {
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  transition:var(--transition);
}
.footer__links a:hover { color:var(--c-white); }
.footer__sep {
  color:rgba(255,255,255,.3);
  margin:0 6px;
  font-size:.78rem;
}
.footer__copy {
  font-size:.72rem;
  color:rgba(255,255,255,.35);
}