/* わかば骨盤矯正LP スタイル（腰痛LP・肩こりLP完成版と統一デザイン） */
:root {
  --wakaba-green: #0A4A49;
  --wakaba-green-dark: #1F4E3D;
  --wakaba-orange: rgb(224, 92, 42);
  --wakaba-line: #06C755;
  --wakaba-cream: #F6F4EC;
  --wakaba-text: #333;
  --wakaba-border: #e3e9e5;
  --wakaba-num-green: rgb(24,119,45);
  --wakaba-card-border: rgb(219,229,217);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--wakaba-text);
  line-height: 1.8;
  padding-bottom: 64px;
}
h1, h2, h3, h4 { color: var(--wakaba-green); margin: 0 0 16px; line-height: 1.5; }
h2 { font-size: 1.6em; text-align: center; }
h3 { font-size: 1.2em; }
p { margin: 0 0 14px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.lp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--wakaba-border);
  position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 8px;
}
.lp-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--wakaba-green); }
.lp-logo img { width: 36px; height: 36px; }
.lp-nav { display: flex; gap: 16px; font-size: 14px; }
.lp-nav a { text-decoration: none; }
.lp-nav-cta {
  background: var(--wakaba-orange); color: #fff; padding: 8px 16px;
  border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: 700;
}

.hero { max-width: 900px; margin: 0 auto; padding: 32px 20px; text-align: center; }
.hero-eyebrow { color: #666; font-size: 14px; }
.hero-lead { font-size: 15px; }
.hero-badges { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.badge { background: none; border-radius: 0; padding: 0 8px; font-size: 14px; color: #333; }
.badge-price strong { color: var(--wakaba-orange); font-size: 1.2em; }
.hero-cta, .reassure-cta, .final-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 24px; border-radius: 28px; text-decoration: none;
  font-weight: 700; font-size: 15px; min-width: 200px;
}
.btn-primary { background: var(--wakaba-orange); color: #fff; }
.btn-line { background: var(--wakaba-line); color: #fff; }
.hero-note { font-size: 13px; color: #666; }
.hero-image, .cause-image {
  border-radius: 0; margin: 20px auto 0; max-width: 700px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.worries { background: rgb(250,248,243); padding: 40px 20px; }
.worries-list { max-width: 700px; margin: 0 auto; padding: 0; list-style: none; }
.worries-list li {
  background: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding: 16px 22px 16px 54px; margin-bottom: 0; position: relative;
}
.worries-list li::before {
  content: "✓"; color: rgb(24,119,45); font-weight: 700; font-size: 24px;
  position: absolute; left: 22px; margin-right: 0;
}
.worries-note { text-align: center; max-width: 700px; margin: 20px auto 0; }

.reassure { padding: 40px 20px; text-align: center; }
.reassure h3 { text-align: center; }
.reassure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 800px; margin: 0 auto 20px; }
.reassure-card { border: none; background: none; padding: 12px 0; }
.reassure-card .num { color: rgb(159,214,143); font-weight: 700; font-size: 13px; }
.reassure-sub { font-size: 13px; color: #666; }
.reassure-cta { flex-direction: column; align-items: center; margin-top: 16px; }
.reassure-cta p { margin-bottom: 12px; }

.cause { max-width: 800px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.cause-tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.cause-tags span { background: none; color: var(--wakaba-green); border-radius: 0; padding: 7px 12px; font-size: 16px; font-weight: 800; border-bottom: 3px solid rgb(142,207,111); }

.detail { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.detail-card { background: #fff; border: 1px solid var(--wakaba-border); border-radius: 14px; padding: 20px; box-shadow: 0 3px 12px rgba(31,78,61,.06); }

/* ===== 4ステップ（肩こりLP完成版と同一仕様） ===== */
.flow { background: var(--wakaba-cream); padding: 40px 20px; }
.flow-sub { text-align: center; }
.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1000px; margin: 24px auto 0; }
.flow-step {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: none; border: 1px solid var(--wakaba-card-border);
}
.flow-step img { aspect-ratio: 4/3; object-fit: cover; }
.flow-step > div { padding: 16px; }
.flow-step .step-num {
  border-radius: 0;
  position: static; display: block;
  font-size: 38px; color: var(--wakaba-num-green); font-weight: 700;
  background: none; width: auto; height: auto;
}
.flow-step h3 { font-size: 16px; margin-top: 8px; }
@media (min-width: 721px) {
  .flow-step > div { padding: 22px; }
  .flow-step h3 { font-size: 19px; }
}
@media (max-width: 720px) {
  .flow-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .flow-step p { display: none; }
}
@media (max-width: 600px) {
  .flow-step img { max-height: 160px; object-fit: cover; }
}

.philosophy {
  max-width: 800px; margin: 40px auto; padding: 32px 24px;
  background: var(--wakaba-cream); border-left: 4px solid #4A6B5A; border-radius: 8px;
}
.philosophy h2 { text-align: left; font-size: 1.35em; }
.philosophy p { font-size: 15px; }

.staff { max-width: 900px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.staff-sub { text-align: center; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; text-align: left; }
.staff-card {
  position: relative;
  padding: 18px 18px 18px 148px;
  min-height: 189px;
  background: #fff;
  border: 1px solid rgb(219,229,217);
  border-radius: 18px;
  overflow: hidden;
}
.staff-card img {
  position: absolute; left: 0; top: 0;
  width: 130px; height: 100%;
  border-radius: 0; object-fit: cover; margin: 0;
}
.staff-card > *:last-child { margin-bottom: 0; }
.staff-role { color: #666; font-size: 13px; margin-bottom: 4px; }

.reasons { background: var(--wakaba-cream); padding: 40px 20px; }
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 900px; margin: 24px auto 0; }
.reason-card { background: none; padding: 20px; text-align: center; }
.reason-card .num { color: rgb(142,207,111); font-weight: 700; font-size: 32px; }

/* ===== 最終CTA（腰痛LP完成版と同一：緑背景フル幅＋中央寄せインナー） ===== */
.final-cta { background: var(--wakaba-green); padding: 48px 20px; }
.final-cta-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.final-cta h2 { color: #fff; font-size: 2em; }
.final-cta p { color: #fff; }
.final-price { font-size: 1.3em; margin: 16px 0; }
.final-price strong { color: #fff; }
.final-cta-buttons { flex-direction: column; align-items: center; }
.final-note { font-size: 12px; color: rgba(255,255,255,0.75); }

.faq { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.faq details { border-bottom: 1px solid var(--wakaba-border); padding: 0; }
.faq summary { font-weight: 700; cursor: pointer; color: var(--wakaba-green); list-style: none; padding: 22px 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq p { margin: 0 0 18px; padding: 0 12px; font-size: 14px; }
.faq a { color: var(--wakaba-orange); }

.related { background: var(--wakaba-cream); padding: 40px 20px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 1000px; margin: 24px auto 0; }
.related-grid a { background: #fff; border: 1px solid rgb(222,217,207); border-radius: 10px; padding: 16px; text-decoration: none; display: block; }
.related-grid a strong { display: block; color: var(--wakaba-green); margin-bottom: 4px; }
.related-grid a span { font-size: 13px; color: #666; }

.exterior-image { max-width: 900px; margin: 0 auto; border-radius: 0; }
@media (max-width: 600px) {
  .exterior-image { max-height: 220px; object-fit: cover; }
}

.access { max-width: 700px; margin: 0 auto; padding: 40px 20px; }
.access dl { display: grid; grid-template-columns: 100px 1fr; gap: 10px 16px; }
.access dt { font-weight: 700; color: var(--wakaba-green); }
.access dd { margin: 0; }

.lp-footer { background: var(--wakaba-green); color: #fff; text-align: center; padding: 32px 20px; font-size: 13px; }
.lp-footer img { width: 32px; margin: 0 auto 8px; }
.lp-footer a { color: #fff; text-decoration: underline; }

.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; height: 56px;
}
.mobile-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
}
.mobile-bar a:nth-child(1) { background: rgb(224,92,42); }
.mobile-bar a:nth-child(2) { background: var(--wakaba-line); }
.mobile-bar a:nth-child(3) { background: var(--wakaba-green); }

@media (max-width: 600px) {
  .lp-nav { display: none; }
  .btn { min-width: 0; width: 100%; }
  .hero-cta, .final-cta-buttons { flex-direction: column; }
  .hero-image, .cause-image { max-width: 100%; max-height: 310px; object-fit: cover; border-radius: 0; }
}

@media (min-width: 981px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(500px, 0.9fr);
    align-items: center;
    gap: 40px;
    text-align: left;
    max-width: 1100px;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-badges, .hero-cta { justify-content: flex-start; }
  .hero-image { margin: 0; }
}
@media (max-width: 980px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero-image { order: -1; }
}

.hero h1 {
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1.25;
}
@media (max-width: 720px) {
  .hero h1 { font-size: 36px; }
}