/* SERVICE PAGE COMMON STYLES */
:root {
  --primary: #F39F9D;
  --primary-light: #fce8e7;
  --primary-dark: #e07a78;
  --cream: #fdf0ef;
  --dark: #3a2e2e;
  --mid: #7a6060;
  --white: #fef5f4;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body { font-family: 'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho',serif; background: var(--cream); color: var(--dark); }

nav { position: fixed; top:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:20px 48px; background:rgba(253,248,245,0.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(243,159,157,0.2); }
.nav-logo { font-size:1.3rem; font-weight:300; color:var(--dark); letter-spacing:0.12em; text-decoration:none; }
.nav-logo span { display:block; font-size:0.65rem; letter-spacing:0.3em; color:var(--primary-dark); margin-top:2px; }
.nav-links { display:flex; gap:36px; list-style:none; align-items:center; }
.nav-links a { text-decoration:none; color:var(--mid); font-size:0.8rem; letter-spacing:0.15em; transition:color 0.3s; }
.nav-links a:hover { color:var(--primary-dark); }
.nav-cta { background:var(--primary); color:white !important; padding:10px 22px; border-radius:100px; font-size:0.75rem !important; letter-spacing:0.1em; }
.nav-cta:hover { background:var(--primary-dark) !important; }
.nav-sns { display:flex; align-items:center; gap:8px; }
.nav-sns-btn { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:transform 0.2s; }
.nav-sns-btn:hover { transform:scale(1.12); }
.nav-sns-btn.line-btn { background:#06C755; }
.nav-sns-btn.ig-btn { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.hamburger span { display:block; width:24px; height:2px; background:var(--dark); border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(253,240,239,0.97); backdrop-filter:blur(12px); z-index:99; flex-direction:column; align-items:center; justify-content:center; gap:32px; opacity:0; transition:opacity 0.3s; }
.mobile-menu.open { display:flex; opacity:1; }
.mobile-menu a { text-decoration:none; color:var(--dark); font-size:1.1rem; letter-spacing:0.15em; }
.mobile-menu .mobile-cta { background:var(--primary); color:white !important; padding:14px 40px; border-radius:100px; }
@media (max-width:900px) { .hamburger { display:flex; } .nav-links { display:none; } .nav-sns { display:none; } nav { padding:14px 16px; } }

@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease,transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:none; }

.btn-primary { background:var(--primary); color:white; padding:16px 40px; border-radius:100px; text-decoration:none; font-size:0.82rem; letter-spacing:0.12em; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(243,159,157,0.4); }
.btn-outline { border:1.5px solid var(--primary); color:var(--primary-dark); padding:15px 36px; border-radius:100px; text-decoration:none; font-size:0.82rem; letter-spacing:0.12em; transition:all 0.3s; }
.btn-outline:hover { background:var(--primary-light); transform:translateY(-2px); }
.divider { width:40px; height:2px; background:var(--primary); margin:24px 0; }

/* BREADCRUMB */
.breadcrumb { padding: 100px 80px 0; display:flex; gap:8px; align-items:center; font-size:0.72rem; color:var(--mid); letter-spacing:0.1em; }
.breadcrumb a { color:var(--mid); text-decoration:none; transition:color 0.3s; }
.breadcrumb a:hover { color:var(--primary-dark); }
.breadcrumb span { color:var(--primary-light); }

/* SERVICE HERO */
.svc-hero { padding:40px 80px 80px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; min-height:60vh; }
.svc-hero-content { }
.svc-num { font-size:5rem; font-weight:300; color:rgba(243,159,157,0.2); line-height:1; margin-bottom:16px; display:block; opacity:0; animation:fadeUp 0.8s 0.1s ease forwards; }
.svc-label { font-size:0.65rem; letter-spacing:0.4em; color:var(--primary-dark); text-transform:uppercase; margin-bottom:16px; display:block; opacity:0; animation:fadeUp 0.8s 0.2s ease forwards; }
.svc-title { font-size:clamp(2.5rem,4vw,4rem); font-weight:300; line-height:1.15; margin-bottom:24px; opacity:0; animation:fadeUp 0.8s 0.3s ease forwards; }
.svc-lead { font-size:0.92rem; color:var(--mid); line-height:2.1; max-width:480px; font-weight:300; opacity:0; animation:fadeUp 0.8s 0.4s ease forwards; margin-bottom:36px; }
.svc-hero-actions { display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation:fadeUp 0.8s 0.5s ease forwards; }
.svc-hero-img { border-radius:24px; overflow:hidden; background:var(--primary-light); min-height:400px; display:flex; align-items:center; justify-content:center; opacity:0; animation:fadeIn 1s 0.4s ease forwards; }
.svc-hero-img-placeholder { color:var(--primary-dark); opacity:0.4; font-size:0.75rem; letter-spacing:0.2em; text-align:center; }

/* CONTENT SECTIONS */
.svc-section { padding:80px 80px; }
.svc-section.bg-light { background:#fef5f4; }
.svc-section.bg-dark { background:var(--dark); }
.section-label { font-size:0.65rem; letter-spacing:0.4em; color:var(--primary-dark); text-transform:uppercase; margin-bottom:16px; display:block; }
.section-label.white { color:var(--primary-light); }
.section-title { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:300; line-height:1.2; margin-bottom:20px; }
.section-title.white { color:white; }

/* FEATURES GRID */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px; }
.feature-card { background:var(--cream); padding:40px 32px; border-radius:20px; border:1px solid rgba(243,159,157,0.15); transition:all 0.3s; }
.feature-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(243,159,157,0.15); border-color:var(--primary); }
.feature-icon { font-size:2rem; margin-bottom:20px; display:block; }
.feature-title { font-size:1rem; color:var(--dark); margin-bottom:12px; letter-spacing:0.05em; }
.feature-desc { font-size:0.8rem; color:var(--mid); line-height:2; font-weight:300; }

/* FLOW */
.flow-list { margin-top:48px; display:flex; flex-direction:column; gap:0; }
.flow-item { display:grid; grid-template-columns:80px 1fr; gap:32px; position:relative; padding-bottom:40px; }
.flow-item:last-child { padding-bottom:0; }
.flow-item::after { content:''; position:absolute; left:39px; top:60px; bottom:0; width:2px; background:var(--primary-light); }
.flow-item:last-child::after { display:none; }
.flow-num { width:60px; height:60px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-size:0.85rem; letter-spacing:0.1em; flex-shrink:0; position:relative; z-index:1; }
.flow-content { }
.flow-title { font-size:1rem; color:var(--dark); margin-bottom:8px; letter-spacing:0.05em; padding-top:14px; }
.flow-desc { font-size:0.8rem; color:var(--mid); line-height:2; font-weight:300; }
.questionnaire-link {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 24px;
  background: var(--primary);
  color: white;
  border-radius: 100px;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  transition: all 0.3s;
}
.questionnaire-link:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* FEE */
.fee-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
.fee-card { background:var(--cream); border:1px solid rgba(243,159,157,0.2); border-radius:20px; padding:40px 36px; }
.fee-name { font-size:0.72rem; letter-spacing:0.2em; color:var(--primary-dark); text-transform:uppercase; margin-bottom:12px; display:block; }
.fee-price { font-size:1.8rem; font-weight:300; color:var(--dark); margin-bottom:8px; }
.fee-note { font-size:0.75rem; color:var(--mid); line-height:1.8; }

/* FAQ */
.faq-list { margin-top:48px; display:flex; flex-direction:column; gap:16px; }
.faq-item { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:16px; overflow:hidden; }
.faq-q { padding:28px 32px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq-q-text { font-size:0.9rem; color:white; letter-spacing:0.05em; }
.faq-icon { color:var(--primary); font-size:1.2rem; flex-shrink:0; transition:transform 0.3s; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-a-inner { padding:0 32px 28px; font-size:0.82rem; color:rgba(255,255,255,0.6); line-height:2; font-weight:300; }

/* CTA SECTION */
.svc-cta { background:var(--primary); padding:80px; text-align:center; }
.svc-cta h2 { color:white; font-size:clamp(1.8rem,3vw,2.8rem); font-weight:300; margin-bottom:16px; }
.svc-cta p { color:rgba(255,255,255,0.8); font-size:0.88rem; line-height:2; margin-bottom:40px; }
.btn-white { background:white; color:var(--primary-dark); padding:16px 40px; border-radius:100px; text-decoration:none; font-size:0.82rem; letter-spacing:0.12em; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.15); }

/* RELATED SERVICES */
.related { padding:80px; background:var(--cream); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:48px; }
.related-card { background:#fef5f4; padding:40px 32px; text-decoration:none; color:inherit; display:block; transition:all 0.3s; position:relative; overflow:hidden; }
.related-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--primary); transform:scaleX(0); transition:transform 0.4s; transform-origin:left; }
.related-card:hover::before { transform:scaleX(1); }
.related-card:hover { background:var(--primary-light); }
.related-num { font-size:2rem; font-weight:300; color:rgba(243,159,157,0.3); display:block; margin-bottom:12px; }
.related-title { font-size:0.9rem; color:var(--dark); margin-bottom:8px; letter-spacing:0.05em; }
.related-desc { font-size:0.75rem; color:var(--mid); line-height:1.8; }

/* FOOTER */
footer { background:var(--dark); border-top:1px solid rgba(255,255,255,0.08); padding:48px 80px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
footer .logo { color:white; font-size:1rem; letter-spacing:0.15em; font-weight:300; }
footer .logo span { display:block; font-size:0.6rem; letter-spacing:0.3em; color:rgba(255,255,255,0.4); margin-top:4px; }
footer p { color:rgba(255,255,255,0.3); font-size:0.72rem; letter-spacing:0.1em; }
footer a { color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.75rem; letter-spacing:0.1em; transition:color 0.3s; }
footer a:hover { color:var(--primary); }

@media (max-width:900px) {
  .breadcrumb { padding:90px 16px 0; font-size:0.65rem; }
  .svc-hero { padding:24px 16px 48px; grid-template-columns:1fr; gap:32px; min-height:auto; }
  .svc-hero-img { min-height:240px; }
  .svc-section { padding:44px 16px; }
  .features-grid { grid-template-columns:1fr; gap:16px; }
  .fee-grid { grid-template-columns:1fr; }
  .flow-item { grid-template-columns:60px 1fr; gap:16px; }
  .related-grid { grid-template-columns:1fr; }
  .svc-cta { padding:44px 16px; }
  .related { padding:44px 16px; }
  footer { padding:32px 16px; flex-direction:column; align-items:flex-start; }
}

/* クラスカード フッター */
.class-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.class-fee {
  flex: 1;
}

.class-instructor {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .class-card-footer {
    flex-direction: column;
    gap: 0.5rem;
  }
  .class-instructor {
    text-align: left;
    white-space: normal;
  }
}