/* ==========================================================================
   FRONT PAGE — Trainers Guild
   Orange × Cream palette / fp- prefix
   ========================================================================== */

/* ===== Photo Frame Placeholders (large, prominent) ===== */
.photo-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  min-height:240px;
  border:2px dashed var(--orange);
  background:
    linear-gradient(135deg, #ffffff 0%, var(--off-white) 50%, var(--orange-vlight) 100%);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 6px 20px rgba(240,112,48,0.06);
}
.photo-frame::before{
  content:attr(data-label);
  position:absolute;
  top:14px; left:18px;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--orange-dark);
  background:rgba(255,255,255,.8);
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
  z-index:2;
}
.photo-frame::after{
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 12px,
      rgba(240,112,48,.04) 12px 13px
    );
  z-index:0;
}
.photo-frame-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; gap:6px;
  text-align:center;
  color:var(--text-mid);
}
.photo-frame-icon{
  font-size:48px;
  filter:saturate(.7);
}
svg.photo-frame-icon{
  width:56px !important;
  height:56px !important;
  color:var(--orange);
  margin-bottom:6px;
}
.tg-svg-icon{
  display:inline-block;
  width:36px;
  height:36px;
  color:var(--orange);
  stroke:currentColor;
  fill:none;
  vertical-align:middle;
}
.tg-svg-icon.sm{ width:18px; height:18px; }
.tg-svg-icon.md{ width:24px; height:24px; }
.tg-svg-icon.lg{ width:48px; height:48px; }
.tg-svg-icon.xl{ width:64px; height:64px; }
.fp-miracle-frame{
  position:relative;
  aspect-ratio:4/5;
  border:2px solid var(--orange);
  background:
    linear-gradient(155deg, #ffffff 0%, #fff7f0 50%, var(--orange-vlight) 100%);
  box-shadow:0 30px 60px -20px rgba(240,112,48,.35), 0 12px 32px rgba(0,0,0,.06);
}
.fp-miracle-frame::before{
  background:rgba(255,255,255,.95);
  font-family:'Inter','Noto Sans JP',sans-serif;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--orange-dark);
}
.fp-miracle-frame .photo-frame-icon{ color:var(--orange-dark); }
.fp-miracle-frame .photo-frame-text{
  font-size:18px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--text-dark);
  margin-top:14px;
  text-align:center;
}
.fp-miracle-frame .photo-frame-hint{
  font-size:11px;
  color:var(--text-mid);
  margin-top:10px;
  text-align:center;
  max-width:80%;
}
.fp-miracle-quote{
  position:absolute;
  bottom:22px;
  left:22px;
  right:22px;
  z-index:3;
  background:rgba(26,26,26,.92);
  color:#fff;
  padding:16px 20px;
  border-radius:14px;
  font-size:13px;
  font-weight:600;
  line-height:1.7;
  letter-spacing:.04em;
  text-align:center;
  backdrop-filter:blur(8px);
  border-left:3px solid var(--orange);
}
.photo-frame-text{
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--orange-dark);
}
.photo-frame-hint{
  font-size:10.5px;
  color:var(--text-light);
  letter-spacing:.04em;
}
.photo-frame.pf-portrait{ aspect-ratio:3/4; }
.photo-frame.pf-square{ aspect-ratio:1/1; }
.photo-frame.pf-circle{ border-radius:50%; aspect-ratio:1/1; }
.photo-frame.pf-wide{ aspect-ratio:16/9; }
.photo-frame.pf-thumb{ aspect-ratio:16/10; }

/* ===== Common Section ===== */
.fp-section{
  position:relative;
  padding:104px 24px;
  overflow:hidden;
}
.fp-section-inner{
  max-width:1240px;
  margin:0 auto;
}
.fp-eyebrow{
  display:inline-flex;
  align-items:center; gap:10px;
  padding:8px 18px;
  background:var(--orange-vlight);
  color:var(--orange-dark);
  border-radius:999px;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  margin-bottom:18px;
}
.fp-eyebrow::before{
  content:'';
  width:8px; height:8px;
  background:var(--orange);
  border-radius:50%;
}
.fp-section-title{
  font-size:clamp(28px, 4vw, 44px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:.02em;
  color:var(--text-dark);
  margin-bottom:18px;
}
.fp-section-title .accent{ color:var(--orange); }
.fp-section-lead{
  font-size:15.5px;
  color:var(--text-mid);
  line-height:1.95;
  max-width:760px;
}
.fp-handwriting{
  display:inline-block;
  font-family:'Caveat','Klee One','Yu Gothic',cursive;
  color:var(--orange);
  font-size:18px;
  transform:rotate(-3deg);
  letter-spacing:.04em;
}

/* Decorative elements */
.fp-deco-circle{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, var(--orange-vlight) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.fp-deco-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(240,112,48,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,112,48,.05) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.fp-hero{
  position:relative;
  padding:140px 24px 100px;
  background:
    radial-gradient(900px 600px at 92% 8%, var(--orange-vlight) 0%, transparent 60%),
    radial-gradient(700px 500px at 8% 92%, var(--cream-dark) 0%, transparent 60%),
    var(--cream);
  overflow:hidden;
}
.fp-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(240,112,48,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,112,48,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
  pointer-events:none;
}
.fp-hero-grid{
  position:relative;
  z-index:1;
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:68px;
  align-items:center;
}
.fp-hero-badge-free{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:14px 22px;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  border-radius:999px;
  color:#fff;
  font-weight:800;
  font-size:14px;
  letter-spacing:.04em;
  box-shadow:0 14px 36px rgba(240,112,48,.32);
  margin-bottom:24px;
}
.fp-hero-badge-free .price-tag{
  background:#fff;
  color:var(--orange-dark);
  padding:4px 12px;
  border-radius:999px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
}
.fp-hero h1{
  font-size:clamp(38px, 5.6vw, 68px);
  font-weight:900;
  line-height:1.18;
  letter-spacing:.01em;
  color:var(--text-dark);
  margin-bottom:24px;
}
.fp-hero h1 .hero-h1-sub{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--orange);
  margin-bottom:14px;
  line-height:1.4;
}
@media (max-width:768px){
  .fp-hero h1 .hero-h1-sub{ font-size:11px; letter-spacing:.12em; }
}
.fp-hero h1 .accent{
  color:var(--orange);
  position:relative;
  display:inline-block;
}
.fp-hero h1 .accent::after{
  content:'';
  position:absolute;
  left:-2%; right:-2%; bottom:6px;
  height:14px;
  background:var(--orange-vlight);
  z-index:-1;
  border-radius:6px;
}
.fp-hero-sub{
  font-size:17px;
  line-height:2;
  color:var(--text-mid);
  margin-bottom:36px;
  max-width:560px;
}
.fp-hero-ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:44px;
}
.fp-btn{
  display:inline-flex;
  align-items:center; gap:10px;
  padding:18px 34px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fp-btn-primary{
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  color:#fff;
  box-shadow:0 16px 30px rgba(240,112,48,.3);
}
.fp-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 38px rgba(240,112,48,.42); }
.fp-btn-outline{
  background:#fff;
  color:var(--orange-dark);
  border:2px solid var(--orange-vlight);
}
.fp-btn-outline:hover{ transform:translateY(-2px); border-color:var(--orange); }
.fp-btn .arrow{ transition:transform .25s ease; }
.fp-btn:hover .arrow{ transform:translateX(4px); }

.fp-hero-badges{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.fp-trust-badge{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 20px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:120px;
  box-shadow:0 6px 16px var(--shadow);
}
.fp-trust-badge .num{
  font-size:24px;
  font-weight:900;
  color:var(--orange);
  letter-spacing:.02em;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.fp-trust-badge .lbl{
  font-size:11px;
  color:var(--text-mid);
  letter-spacing:.1em;
}

.fp-hero-photo{
  position:relative;
}
.fp-hero-photo .photo-frame{
  aspect-ratio:4/5;
  border-radius:32px;
  border-width:3px;
  box-shadow:0 30px 60px var(--shadow-lg);
}
.fp-hero-photo-deco{
  position:absolute;
  width:140px; height:140px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  top:-30px; right:-30px;
  opacity:.92;
  z-index:-1;
}
.fp-hero-photo-tag{
  position:absolute;
  bottom:24px; left:-20px;
  background:#fff;
  padding:14px 18px;
  border-radius:18px;
  box-shadow:0 14px 28px var(--shadow);
  display:flex; gap:10px; align-items:center;
  border:2px solid var(--cream-mid);
}
.fp-hero-photo-tag .dot{
  width:10px; height:10px;
  border-radius:50%;
  background:#28c76f;
  box-shadow:0 0 0 4px rgba(40,199,111,.18);
}
.fp-hero-photo-tag span{ font-size:12px; font-weight:700; color:var(--text-dark); }

/* ==========================================================================
   2. NEWS BAR
   ========================================================================== */
.fp-news{
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0;
  overflow:hidden;
}
.fp-news-inner{
  max-width:1240px;
  margin:0 auto;
  display:flex;
  align-items:stretch;
}
.fp-news-label{
  flex:0 0 auto;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color:#fff;
  padding:18px 28px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.22em;
  display:flex;
  align-items:center;
  gap:10px;
}
.fp-news-label::before{
  content:'';
  width:8px; height:8px;
  background:#fff;
  border-radius:50%;
  animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{opacity:.4}50%{opacity:1} }

.fp-news-track{
  flex:1; min-width:0;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
}
.fp-news-list{
  display:flex;
  gap:48px;
  white-space:nowrap;
  animation:newsScroll 38s linear infinite;
  padding-left:30px;
}
.fp-news-list li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13.5px;
  color:var(--text-mid);
}
/* ===== Sponsor Logo Marquee ===== */
.fp-sponsors{
  background:var(--off-white);
  padding:56px 0 64px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  position:relative;
}
.fp-sponsors-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}
.fp-sponsors-label{
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:11px;
  letter-spacing:.32em;
  font-weight:700;
  color:var(--text-light);
  margin-bottom:28px;
}
.fp-sponsors-fade{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.fp-sponsors-track{
  display:flex;
  align-items:center;
  gap:64px;
  width:max-content;
  animation:fp-sponsors-scroll 36s linear infinite;
}
.fp-sponsors-track:hover{ animation-play-state:paused; }
.fp-sponsor-logo{
  width:170px;
  height:80px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:grayscale(100%);
  opacity:.55;
  transition:filter .35s ease, opacity .35s ease, transform .35s ease;
}
.fp-sponsor-logo:hover{
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.05);
}
.fp-sponsor-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.fp-sponsors-note{
  text-align:center;
  font-size:11px;
  color:var(--text-light);
  margin-top:24px;
  opacity:.7;
}
.fp-sponsors-note code{
  background:var(--white);
  border:1px solid var(--border);
  padding:1px 6px;
  border-radius:4px;
  font-family:'SF Mono',Menlo,monospace;
  font-size:10px;
}
@keyframes fp-sponsors-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.fp-news-list .date{
  font-weight:700;
  color:var(--orange-dark);
  letter-spacing:.06em;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.fp-news-list .tag{
  background:var(--orange-vlight);
  color:var(--orange-dark);
  padding:3px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
}
@keyframes newsScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ==========================================================================
   3. CONCEPT
   ========================================================================== */
.fp-concept{
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-mid) 100%);
}
.fp-concept-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center;
  position:relative; z-index:1;
}
.fp-concept-text .fp-handwriting{ margin-bottom:18px; }
.fp-concept-title{
  font-size:clamp(34px, 5vw, 56px);
  font-weight:900;
  line-height:1.32;
  color:var(--text-dark);
  margin-bottom:30px;
  letter-spacing:.01em;
}
.fp-concept-title .br-orange{
  display:block;
  color:var(--orange);
}
.fp-concept-text p{
  font-size:15.5px;
  color:var(--text-mid);
  line-height:2.1;
  margin-bottom:18px;
}
.fp-concept-photo .photo-frame{
  aspect-ratio:4/5;
  border-radius:28px;
  box-shadow:0 24px 48px var(--shadow-lg);
}
.fp-concept-photo{ position:relative; }
.fp-concept-quote{
  position:absolute;
  bottom:-20px; right:-10px;
  background:#fff;
  padding:18px 22px;
  border-radius:18px;
  box-shadow:0 14px 30px var(--shadow);
  max-width:240px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-dark);
  border-left:4px solid var(--orange);
}

/* ==========================================================================
   4. ABOUT US
   ========================================================================== */
.fp-about{
  background:var(--white);
  position:relative;
}
.fp-about .fp-deco-circle.c1{ width:380px; height:380px; top:-100px; left:-120px; }
.fp-about .fp-deco-circle.c2{ width:280px; height:280px; bottom:-80px; right:-80px; }

.fp-about-head{
  text-align:center;
  margin-bottom:64px;
  position:relative; z-index:1;
}
.fp-about-head .fp-eyebrow{ margin:0 auto 18px; display:inline-flex; }
.fp-about-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  position:relative; z-index:1;
}
.fp-about-card{
  background:linear-gradient(180deg, var(--cream) 0%, #fff 100%);
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.fp-about-card:nth-child(2){ transform:translateY(28px); }
.fp-about-card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px var(--shadow); }
.fp-about-card:nth-child(2):hover{ transform:translateY(22px); }
.fp-about-card .photo-frame{ aspect-ratio:5/3; margin-bottom:24px; border-radius:18px; }
.fp-about-card .axis-num{
  display:inline-block;
  font-family:'Inter','Noto Sans JP',sans-serif;
  font-size:13px; font-weight:800;
  color:var(--orange);
  letter-spacing:.18em;
  margin-bottom:10px;
}
.fp-about-card h3{
  font-size:22px;
  font-weight:800;
  color:var(--text-dark);
  margin-bottom:14px;
  line-height:1.5;
}
.fp-about-card p{
  font-size:14px;
  color:var(--text-mid);
  line-height:1.95;
}

/* ==========================================================================
   5. REASONS (6 cards)
   ========================================================================== */
.fp-reasons{
  background:linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  position:relative;
}
.fp-reasons .fp-section-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.fp-reasons .fp-deco-grid{ opacity:.6; }
.fp-reasons-head{
  text-align:center;
  margin:0 auto 64px;
  max-width:760px;
  position:relative;
  z-index:1;
}
.fp-reasons-head .fp-eyebrow{ display:inline-flex; margin-left:auto; margin-right:auto; }
.fp-reasons-head .fp-section-title{ text-align:center; }
.fp-reasons-head .fp-section-lead{ margin-left:auto; margin-right:auto; text-align:center; }
.fp-reasons-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  position:relative;
  z-index:1;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  justify-content:center;
  justify-items:stretch;
}
.fp-reason-card{
  background:#fff;
  border-radius:22px;
  padding:30px 28px;
  border:1px solid var(--border);
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
}
.fp-reason-card:hover{ transform:translateY(-4px); box-shadow:0 20px 36px var(--shadow); }
.fp-reason-card .num{
  position:absolute;
  top:24px; right:24px;
  font-family:'Inter','Noto Sans JP',sans-serif;
  font-size:42px;
  font-weight:900;
  color:var(--orange-vlight);
  line-height:1;
  letter-spacing:.02em;
}
.fp-reason-card .icon-wrap{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  color:#fff;
  font-size:24px;
  margin-bottom:18px;
  box-shadow:0 10px 22px rgba(240,112,48,.3);
}
.fp-reason-card h3{
  font-size:18px;
  font-weight:800;
  color:var(--text-dark);
  margin-bottom:12px;
  line-height:1.5;
}
.fp-reason-card p{
  font-size:13.5px;
  color:var(--text-mid);
  line-height:1.95;
  margin-bottom:18px;
  flex:1;
}
.fp-reason-card .photo-frame{
  aspect-ratio:5/2;
  border-radius:14px;
  margin-top:auto;
}
.fp-reason-card .photo-frame .photo-frame-icon{ font-size:24px; }
.fp-reason-card .photo-frame .photo-frame-text{ font-size:10px; }
.fp-reason-card .photo-frame .photo-frame-hint{ display:none; }

/* ==========================================================================
   6. RESULTS (Member Stories — Before/After)
   ========================================================================== */
.fp-results{
  background:#fff;
  position:relative;
}
.fp-results-head{
  text-align:center;
  margin-bottom:60px;
  position:relative; z-index:1;
}
.fp-results-head .fp-eyebrow{ display:inline-flex; }
.fp-stories{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  position:relative; z-index:1;
}
.fp-story-card{
  background:linear-gradient(180deg, var(--cream) 0%, #fff 100%);
  border:1px solid var(--border);
  border-radius:24px;
  padding:30px;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.fp-story-card:hover{ transform:translateY(-4px); box-shadow:0 20px 36px var(--shadow); }
.fp-story-ba{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
  margin-bottom:22px;
}
.fp-story-ba-item .label{
  display:inline-block;
  padding:4px 12px;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:8px;
}
.fp-story-ba-item.before .label{ background:#F2EBE3; color:var(--text-mid); }
.fp-story-ba-item.after .label{ background:var(--orange); color:#fff; }
.fp-story-ba-item .photo-frame{ aspect-ratio:1/1; border-radius:14px; }
.fp-story-ba-arrow{
  font-size:28px;
  color:var(--orange);
  font-weight:900;
  display:flex; align-items:center;
}
.fp-story-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--border);
  margin-bottom:18px;
}
.fp-story-name{
  font-size:18px;
  font-weight:800;
  color:var(--text-dark);
}
.fp-story-attr{
  font-size:12px;
  color:var(--text-mid);
  letter-spacing:.05em;
}
.fp-story-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.fp-story-stat{
  background:var(--orange-vlight);
  border-radius:10px;
  padding:10px 14px;
  flex:1; min-width:130px;
}
.fp-story-stat .stat-label{
  font-size:10.5px;
  color:var(--orange-dark);
  letter-spacing:.1em;
  font-weight:700;
}
.fp-story-stat .stat-val{
  font-size:18px;
  font-weight:900;
  color:var(--orange-dark);
  font-family:'Inter','Noto Sans JP',sans-serif;
  margin-top:2px;
}
.fp-story-quote{
  font-size:13.5px;
  color:var(--text-mid);
  line-height:1.95;
  font-style:italic;
}
.fp-story-quote::before{ content:'\201C'; color:var(--orange); font-size:24px; margin-right:4px; font-weight:700; }
.fp-story-quote::after{ content:'\201D'; color:var(--orange); font-size:24px; margin-left:4px; font-weight:700; }

/* ==========================================================================
   7. VOICES
   ========================================================================== */
.fp-voices{
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-mid) 100%);
  position:relative;
}
.fp-voices-head{
  text-align:center;
  margin-bottom:56px;
  position:relative; z-index:1;
}
.fp-voices-head .fp-eyebrow{ display:inline-flex; }
.fp-voices-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  position:relative; z-index:1;
}
.fp-voice-card{
  background:#fff;
  border-radius:20px;
  padding:28px 24px;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.fp-voice-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px var(--shadow); }
.fp-voice-card:nth-child(2),
.fp-voice-card:nth-child(5){ transform:translateY(20px); }
.fp-voice-card:nth-child(2):hover,
.fp-voice-card:nth-child(5):hover{ transform:translateY(16px); }
.fp-voice-head{
  display:flex; align-items:center; gap:14px;
}
.fp-voice-head .photo-frame{
  width:54px; height:54px; flex:0 0 auto;
  border-radius:50%; aspect-ratio:1/1;
  border-width:2px;
}
.fp-voice-head .photo-frame .photo-frame-icon{ font-size:18px; }
.fp-voice-head .photo-frame .photo-frame-text,
.fp-voice-head .photo-frame .photo-frame-hint{ display:none; }
.fp-voice-head .photo-frame::before{ display:none; }
.fp-voice-name{
  font-size:14px;
  font-weight:800;
  color:var(--text-dark);
}
.fp-voice-attr{
  font-size:11.5px;
  color:var(--text-mid);
  margin-top:2px;
}
.fp-voice-text{
  font-size:13.5px;
  color:var(--text-mid);
  line-height:1.9;
}
.fp-voice-stars{
  color:var(--orange);
  font-size:13px;
  letter-spacing:.1em;
}

/* ==========================================================================
   8. PLANS
   ========================================================================== */
.fp-plans{
  background:#fff;
  position:relative;
}
.fp-plans .fp-deco-circle{ width:340px; height:340px; top:80px; right:-120px; }
.fp-plans-head{
  text-align:center;
  margin-bottom:60px;
  position:relative; z-index:1;
}
.fp-plans-head .fp-eyebrow{ display:inline-flex; }
.fp-plans-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  position:relative; z-index:1;
}
.fp-plans-grid.fp-plans-grid-2{
  grid-template-columns:repeat(2, 1fr);
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
  gap:32px;
}
.fp-plan-card{
  background:#fff;
  border:2px solid var(--border);
  border-radius:22px;
  padding:34px 26px;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fp-plan-card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px var(--shadow); border-color:var(--orange-light); }
.fp-plan-card.popular{
  background:linear-gradient(180deg, #fff 0%, var(--orange-vlight) 100%);
  border-color:var(--orange);
  box-shadow:0 24px 48px rgba(240,112,48,.18);
  transform:translateY(-12px);
}
.fp-plan-card.popular:hover{ transform:translateY(-18px); }
.fp-plan-popular-tag{
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color:#fff;
  padding:7px 18px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(240,112,48,.32);
}
.fp-plan-name{
  font-size:14px;
  font-weight:800;
  color:var(--orange-dark);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.fp-plan-tagline{
  font-size:13px;
  color:var(--text-mid);
  margin-top:-12px;
}
.fp-plan-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--border);
}
.fp-plan-price .yen{ font-size:14px; color:var(--text-mid); font-weight:700; }
.fp-plan-price .num{
  font-size:38px;
  font-weight:900;
  color:var(--text-dark);
  font-family:'Inter','Noto Sans JP',sans-serif;
  letter-spacing:-.01em;
}
.fp-plan-price .unit{ font-size:13px; color:var(--text-mid); }
.fp-plan-features{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.fp-plan-features li{
  font-size:13px;
  color:var(--text-mid);
  line-height:1.65;
  display:flex; gap:10px;
  align-items:flex-start;
}
.fp-plan-features li::before{
  content:'\2713';
  color:var(--orange);
  font-weight:900;
  flex:0 0 auto;
  margin-top:1px;
}
.fp-plan-features li.muted{ color:var(--text-light); }
.fp-plan-features li.muted::before{ content:'\2014'; color:var(--text-light); }
.fp-plan-cta{
  display:block;
  text-align:center;
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.06em;
  background:#fff;
  color:var(--orange-dark);
  border:1.5px solid var(--orange-vlight);
  transition:all .25s ease;
}
.fp-plan-card.popular .fp-plan-cta{
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(240,112,48,.3);
}
.fp-plan-cta:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }

/* ==========================================================================
   9. STEPS (Free Trial Flow)
   ========================================================================== */
.fp-steps{
  background:linear-gradient(180deg, var(--cream-mid) 0%, var(--cream) 100%);
  position:relative;
}
.fp-steps-head{
  text-align:center;
  margin-bottom:60px;
  position:relative; z-index:1;
}
.fp-steps-head .fp-eyebrow{ display:inline-flex; }
.fp-steps-list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  position:relative; z-index:1;
}
.fp-step{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  padding:32px 24px;
  text-align:center;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.fp-step:hover{ transform:translateY(-4px); box-shadow:0 20px 36px var(--shadow); }
.fp-step::after{
  content:'\2192';
  position:absolute;
  top:50%; right:-22px;
  transform:translateY(-50%);
  font-size:24px;
  font-weight:900;
  color:var(--orange);
  z-index:2;
}
.fp-step:last-child::after{ display:none; }
.fp-step-num{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:48px; height:48px;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  color:#fff;
  border-radius:50%;
  font-family:'Inter','Noto Sans JP',sans-serif;
  font-weight:900;
  font-size:18px;
  margin:0 auto 18px;
  box-shadow:0 10px 20px rgba(240,112,48,.3);
}
.fp-step-icon{
  font-size:30px;
  margin-bottom:10px;
}
.fp-step h3{
  font-size:16px;
  font-weight:800;
  color:var(--text-dark);
  margin-bottom:10px;
}
.fp-step p{
  font-size:12.5px;
  color:var(--text-mid);
  line-height:1.85;
}

/* ==========================================================================
   10. TRAINERS (Operating Members)
   ========================================================================== */
.fp-trainers{
  background:#fff;
  position:relative;
}
.fp-trainers .fp-deco-circle{ width:300px; height:300px; bottom:0; left:-100px; }
.fp-trainers-head{
  text-align:center;
  margin-bottom:60px;
  position:relative; z-index:1;
}
.fp-trainers-head .fp-eyebrow{ display:inline-flex; }
.fp-trainers-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  position:relative; z-index:1;
}
.fp-trainer-card{
  background:linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.fp-trainer-card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px var(--shadow); }
.fp-trainer-card .photo-frame{
  aspect-ratio:3/4;
  border-radius:0;
  border-left:none; border-right:none; border-top:none;
}
.fp-trainer-info{
  padding:26px 24px 28px;
}
.fp-trainer-role{
  font-size:11.5px;
  color:var(--orange-dark);
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:8px;
}
.fp-trainer-name{
  font-size:22px;
  font-weight:800;
  color:var(--text-dark);
  margin-bottom:4px;
}
.fp-trainer-name-en{
  font-size:11px;
  color:var(--text-light);
  letter-spacing:.16em;
  margin-bottom:14px;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.fp-trainer-bio{
  font-size:13px;
  color:var(--text-mid);
  line-height:1.9;
  margin-bottom:16px;
}
.fp-trainer-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.fp-trainer-tags span{
  background:var(--orange-vlight);
  color:var(--orange-dark);
  padding:4px 11px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.fp-faq{
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-mid) 100%);
  position:relative;
}
.fp-faq-head{
  text-align:center;
  margin-bottom:48px;
  position:relative; z-index:1;
}
.fp-faq-head .fp-eyebrow{ display:inline-flex; }
.fp-faq-list{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative; z-index:1;
}
.fp-faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.fp-faq-item[open]{ box-shadow:0 14px 28px var(--shadow); }
.fp-faq-q{
  list-style:none;
  cursor:pointer;
  padding:22px 64px 22px 28px;
  position:relative;
  font-size:15.5px;
  font-weight:700;
  color:var(--text-dark);
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.fp-faq-q::-webkit-details-marker{ display:none; }
.fp-faq-q .qmark{
  flex:0 0 auto;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  color:#fff;
  border-radius:8px;
  font-weight:900;
  font-size:13px;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.fp-faq-q .icon{
  position:absolute;
  right:24px; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  border-radius:50%;
  background:var(--cream-mid);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  color:var(--orange);
  font-weight:700;
  transition:transform .3s ease, background .3s ease;
}
.fp-faq-item[open] .icon{
  transform:translateY(-50%) rotate(45deg);
  background:var(--orange);
  color:#fff;
}
.fp-faq-a{
  padding:0 28px 24px 74px;
  font-size:14px;
  color:var(--text-mid);
  line-height:1.95;
}

/* ==========================================================================
   12. BLOG
   ========================================================================== */
.fp-blog{
  background:#fff;
  position:relative;
}
.fp-blog-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:48px;
  flex-wrap:wrap;
  gap:20px;
  position:relative; z-index:1;
}
.fp-blog-head-text .fp-eyebrow{ display:inline-flex; }
.fp-blog-link-all{
  font-size:13px;
  font-weight:700;
  color:var(--orange-dark);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border:1.5px solid var(--orange-vlight);
  border-radius:999px;
  transition:all .25s ease;
}
.fp-blog-link-all:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }
.fp-blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  position:relative; z-index:1;
}
.fp-blog-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
}
.fp-blog-card:hover{ transform:translateY(-4px); box-shadow:0 20px 36px var(--shadow); }
.fp-blog-card .photo-frame{
  border-radius:0;
  border-left:none; border-right:none; border-top:none;
  aspect-ratio:16/10;
}
.fp-blog-info{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.fp-blog-meta{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11.5px;
  color:var(--text-mid);
}
.fp-blog-meta .cat{
  background:var(--orange-vlight);
  color:var(--orange-dark);
  padding:3px 10px;
  border-radius:6px;
  font-weight:700;
  letter-spacing:.06em;
}
.fp-blog-meta .date{ font-family:'Inter','Noto Sans JP',sans-serif; letter-spacing:.04em; }
.fp-blog-card h3{
  font-size:16px;
  font-weight:800;
  color:var(--text-dark);
  line-height:1.55;
  flex:1;
}
.fp-blog-card h3 a{ transition:color .2s ease; }
.fp-blog-card h3 a:hover{ color:var(--orange); }
.fp-blog-readmore{
  font-size:12px;
  font-weight:700;
  color:var(--orange-dark);
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  letter-spacing:.04em;
}

/* ==========================================================================
   13. FINAL CTA
   ========================================================================== */
.fp-finalcta{
  position:relative;
  padding:120px 24px;
  background:
    radial-gradient(800px 500px at 80% 20%, rgba(240,112,48,.10) 0%, transparent 60%),
    radial-gradient(700px 500px at 20% 80%, rgba(240,112,48,.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
  color:var(--text-dark);
  overflow:hidden;
  border-top:1px solid var(--border-light);
}
.fp-finalcta::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(240,112,48,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,112,48,.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%);
  pointer-events:none;
}
.fp-finalcta-inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:1;
}
.fp-finalcta .fp-handwriting{
  color:var(--orange);
  margin-bottom:18px;
}
.fp-finalcta h2{
  font-size:clamp(32px, 5vw, 52px);
  font-weight:900;
  line-height:1.35;
  letter-spacing:.01em;
  margin-bottom:20px;
  color:var(--text-dark);
}
.fp-finalcta h2 .accent{
  color:var(--orange);
  background:linear-gradient(180deg, transparent 60%, var(--orange-vlight) 60%);
  padding:0 6px;
}
.fp-finalcta p{
  font-size:16px;
  line-height:2;
  margin-bottom:36px;
  color:var(--text-mid);
}
.fp-finalcta-actions{
  display:flex;
  justify-content:center;
  margin-bottom:28px;
}
.fp-finalcta-actions .fp-btn{
  padding:18px 44px;
  font-size:16px;
  font-weight:800;
}
.fp-finalcta-actions .fp-btn-primary{
  background:var(--orange);
  color:#fff;
  border-radius:999px;
  box-shadow:0 12px 32px rgba(240,112,48,.36);
}
.fp-finalcta-actions .fp-btn-primary:hover{
  background:var(--orange-dark);
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(240,112,48,.45);
}
.fp-finalcta-note{
  font-size:12.5px;
  color:var(--text-light);
  letter-spacing:.04em;
}

/* ==========================================================================
   FADE-IN
   ========================================================================== */
.fade-in{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .fp-hero-grid{ grid-template-columns:1fr; gap:50px; }
  .fp-concept-grid{ grid-template-columns:1fr; gap:50px; }
  .fp-about-cards{ grid-template-columns:1fr 1fr; }
  .fp-about-card:nth-child(2){ transform:none; }
  .fp-about-card:nth-child(3){ grid-column:1/-1; }
  .fp-reasons-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width:780px;
  }
  .fp-stories{ grid-template-columns:1fr; }
  .fp-voices-grid{ grid-template-columns:1fr 1fr; }
  .fp-voice-card:nth-child(2),
  .fp-voice-card:nth-child(5){ transform:none; }
  .fp-plans-grid{ grid-template-columns:1fr 1fr; }
  .fp-plan-card.popular{ transform:none; }
  .fp-plan-card.popular:hover{ transform:translateY(-6px); }
  .fp-steps-list{ grid-template-columns:1fr 1fr; }
  .fp-step::after{ display:none; }
  .fp-trainers-grid{ grid-template-columns:1fr 1fr; }
  .fp-trainers-grid .fp-trainer-card:last-child{ grid-column:1/-1; max-width:50%; margin:0 auto; }
  .fp-blog-grid{ grid-template-columns:1fr 1fr; }
  .fp-blog-grid .fp-blog-card:last-child{ grid-column:1/-1; }
}
@media (max-width:768px){
  .fp-section{ padding:80px 20px; }
  .fp-hero{ padding:120px 20px 80px; }
  .fp-hero h1{ font-size:38px; }
  .fp-news-inner{ flex-direction:column; }
  .fp-news-label{ padding:12px 20px; justify-content:flex-start; }
  .fp-about-cards{ grid-template-columns:1fr; }
  .fp-about-card:nth-child(3){ grid-column:auto; }
  .fp-reasons-grid{
    grid-template-columns:1fr;
    max-width:420px;
    gap:18px;
  }
  .fp-voices-grid{ grid-template-columns:1fr; }
  .fp-plans-grid{ grid-template-columns:1fr; }
  .fp-steps-list{ grid-template-columns:1fr; }
  .fp-trainers-grid{ grid-template-columns:1fr; }
  .fp-trainers-grid .fp-trainer-card:last-child{ max-width:100%; }
  .fp-blog-grid{ grid-template-columns:1fr; }
  .fp-blog-grid .fp-blog-card:last-child{ grid-column:auto; }
  .fp-blog-head{ flex-direction:column; align-items:flex-start; }
  .fp-finalcta{ padding:90px 20px; }
  .fp-finalcta-form{ flex-direction:column; padding:24px; }
  .fp-finalcta-form input{ width:100%; }
  .fp-story-ba{ grid-template-columns:1fr; }
  .fp-story-ba-arrow{ transform:rotate(90deg); justify-content:center; }
}
@media (max-width:480px){
  .fp-hero h1{ font-size:32px; }
  .fp-hero-badge-free{ font-size:12px; padding:12px 18px; }
  .fp-hero-badge-free .price-tag{ font-size:15px; }
  .fp-hero-ctas .fp-btn{ width:100%; justify-content:center; }
  .fp-trust-badge{ flex:1; min-width:0; }
  .fp-section-title{ font-size:26px; }
  .fp-concept-title{ font-size:30px; }
  .fp-faq-q{ font-size:14px; padding:18px 56px 18px 20px; }
  .fp-faq-a{ padding:0 20px 20px 60px; font-size:13px; }
}