@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&family=Noto+Sans+JP:wght@300;400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --white:#ffffff;
  --sub:#F7F7F5;
  --text:#333333;
  --sub-text:#777777;
  --green:#365845;
  --green-hover:#4a7860;
  --green-line:rgba(54,88,69,0.18);
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
  --max:480px;
  --px:36px;
}

html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;line-height:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none}

.lp{max-width:var(--max);margin:0 auto}
.bg-w{background:var(--white)}
.bg-s{background:var(--sub)}

/* fade */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade{opacity:0;animation:fadeUp .7s ease forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* sections */
.sec{padding:72px var(--px)}
.sec-sm{padding:56px var(--px)}
.sec-xs{padding:48px var(--px)}

/* type */
.serif{font-family:var(--serif);font-weight:500;color:var(--text);letter-spacing:.02em}
.body{font-size:15px;font-weight:300;line-height:2.2;color:var(--sub-text)}
.body-sm{font-size:14px;font-weight:300;line-height:2.2;color:var(--sub-text)}
.note{font-size:13px;font-weight:300;line-height:2;color:var(--sub-text)}

/* quote */
.quote{font-family:var(--serif);font-size:16px;font-weight:400;line-height:1.95;color:var(--text);padding-left:16px;border-left:1.5px solid var(--green-line)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:18px 24px;border-radius:12px;font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.02em;border:none;transition:background .2s;cursor:pointer}
.btn+.btn{margin-top:12px}
.btn-line{background:var(--green);color:#fff}
.btn-line:hover{background:var(--green-hover)}
.btn-tel{background:transparent;color:var(--text);border:.5px solid rgba(0,0,0,.18);font-size:15px;font-weight:400}
.btn-tel:hover{background:rgba(0,0,0,.03)}

/* dot list */
.dot-list li{display:flex;align-items:flex-start;gap:14px;font-size:15px;font-weight:300;line-height:1.8;color:var(--text);padding:14px 0}
.dot-list li .d{width:4px;height:4px;border-radius:50%;background:var(--green);opacity:.35;flex-shrink:0;margin-top:10px}

/* ── HERO ── */
.hero-prehead{padding:52px var(--px) 0}
.hero-brand{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--sub-text);opacity:.6;margin-bottom:10px}
.hero-pre{font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--text);line-height:1.8}
.hero-body{padding:52px var(--px) 0}
.hero-hl{font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.85;letter-spacing:.02em;color:var(--text);margin-bottom:44px}
.hero-sub{font-size:15px;font-weight:300;line-height:2.15;color:var(--sub-text)}
.hero-sub strong{font-weight:500;color:var(--text)}
.hero-cta{padding:52px var(--px) 64px}
.hero-cta-msg{margin-top:28px}
.hero-cta-msg p{font-size:14px;font-weight:300;line-height:2.1;color:var(--sub-text)}
.hero-cta-msg .ac{margin-top:18px;font-size:14px;font-weight:400;color:var(--text);line-height:2.1}

/* ── CONCERNS ── */
.sec-title{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.8;letter-spacing:.02em;color:var(--text);margin-bottom:40px}
.checklist li{display:flex;align-items:flex-start;gap:14px;font-size:15px;font-weight:300;line-height:1.75;color:var(--text);padding:14px 0}
.checklist li .chk{font-size:14px;font-weight:400;color:var(--green);opacity:.6;flex-shrink:0;margin-top:1px}

/* ── NARRATIVE ── */
.narr-q{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.85;color:var(--text);margin-bottom:32px}
.narr-ac{font-family:var(--serif);font-size:17px;font-weight:400;line-height:1.9;color:var(--text);margin-bottom:28px}
.narr-ac.lg{font-size:19px}

/* ── 5 FACTS ── */
.facts-title{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.8;letter-spacing:.02em;color:var(--text);margin-bottom:56px}
.fact-item{padding-bottom:52px}
.fact-item:last-child{padding-bottom:0}
.fact-num{display:block;font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--green);opacity:.7;margin-bottom:12px}
.fact-head{font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.7;color:var(--text);margin-bottom:18px}

/* ── VISION ── */
.vision-q{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.85;letter-spacing:.02em;color:var(--text);margin-bottom:52px}

/* ── VOICES ── */
.voices-title{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.75;letter-spacing:.02em;color:var(--text);margin-bottom:56px}
.voice-item{padding-bottom:52px}
.voice-item:last-child{padding-bottom:0}
.voice-meta{display:block;font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--green);opacity:.75;margin-bottom:16px}

/* ── THERAPIST ── */
.therapist-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center top;margin-bottom:28px;background:#dce6e0}
.therapist-name{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:.03em;color:var(--text);margin-bottom:6px}
.t-role{display:block;font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--sub-text);margin-bottom:2px}
.t-role-last{display:block;font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--sub-text);margin-bottom:36px}
.inline-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:300;line-height:2;color:var(--sub-text)}
.inline-list li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--green);opacity:.35;flex-shrink:0;margin-top:11px}

/* ── RECOMMEND ── */
.rec-inner{display:flex;gap:20px;align-items:flex-start;margin-bottom:28px}
.rec-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;background:#2a2a3a}
.rec-name{display:block;font-family:var(--serif);font-size:15px;font-weight:500;color:var(--text);margin-bottom:4px}
.rec-role{display:block;font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--sub-text);margin-bottom:2px}
.rec-role-last{display:block;font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--sub-text)}

/* ── FLOW ── */
.flow-title{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.75;letter-spacing:.02em;color:var(--text);margin-bottom:56px}
.flow-item{display:flex;gap:24px;align-items:flex-start;padding-bottom:52px}
.flow-item:last-child{padding-bottom:0}
.flow-num{font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--green);opacity:.7;min-width:20px;padding-top:4px;flex-shrink:0}
.flow-step-title{font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.6;color:var(--text);margin-bottom:16px}

/* ── PRICE ── */
.price-sec{padding:72px var(--px);text-align:center}
.price-label{display:block;font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--sub-text);opacity:.6;margin-bottom:28px}
.price-orig{display:block;font-size:13px;font-weight:300;color:#aaa;text-decoration:line-through;margin-bottom:8px}
.price-main{display:block;font-family:var(--serif);font-size:46px;font-weight:500;letter-spacing:-.01em;color:var(--text);line-height:1;margin-bottom:4px}
.price-main span{font-size:22px;font-weight:400}
.price-tax{display:block;font-size:12px;font-weight:300;color:var(--sub-text);margin-bottom:40px}
.price-note{font-family:var(--serif);font-size:16px;font-weight:400;line-height:1.95;color:var(--text)}

/* ── CONTACT ── */
.contact-vision-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:300;line-height:2;color:var(--text)}
.contact-vision-list li .cv{width:4px;height:4px;border-radius:50%;background:var(--green);opacity:.35;flex-shrink:0;margin-top:11px}
.btn-sub-note{display:block;font-size:13px;font-weight:300;line-height:2;color:var(--sub-text);text-align:center}

/* ── CLOSING ── */
.closing-title{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.8;letter-spacing:.02em;color:var(--text);margin-bottom:36px}

/* ── FINAL CTA ── */
.final-hours{display:block;font-size:12px;font-weight:300;color:var(--sub-text);letter-spacing:.06em;text-align:center;margin-bottom:28px}
.final-note{display:block;font-size:13px;font-weight:300;line-height:2;color:var(--sub-text);text-align:center;margin-top:20px}

/* spacing */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt28{margin-top:28px}.mt32{margin-top:32px}.mt36{margin-top:36px}.mt40{margin-top:40px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}.mb28{margin-bottom:28px}.mb32{margin-bottom:32px}.mb36{margin-bottom:36px}.mb40{margin-bottom:40px}.mb48{margin-bottom:48px}.mb52{margin-bottom:52px}

/* ── Floating Bar ── */
.float-bar{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--max);
  display:flex;
  z-index:1000;
  padding:10px 16px 14px;
  gap:10px;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 -1px 0 rgba(0,0,0,0.06);
}

.float-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 8px;
  border-radius:10px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  transition:background .2s;
  text-decoration:none;
  border:none;
  cursor:pointer;
}

.float-line{
  background:var(--green);
  color:#fff;
}

.float-line:hover{
  background:var(--green-hover);
}

.float-tel{
  background:#fff;
  color:var(--text);
  border:.5px solid rgba(0,0,0,0.18);
}

.float-tel:hover{
  background:rgba(0,0,0,0.03);
}

/* フローティングバー分の余白をbodyに追加 */
body{
  padding-bottom:80px;
}

/* ── Flow photos ── */
.flow-content{flex:1}
.flow-photo{
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
  margin-top:16px;
  object-fit:cover;
}

/* ── Reassurance box (CVR) ── */
.reassure-box {
  background: var(--sub);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.reassure-item {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--sub-text);
  padding: 5px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.reassure-item::before {
  content: '✓';
  color: var(--green);
  opacity: .7;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}