@import url('training.css');
/* ============================================================
   THANNECT — ドライヘッドスパ TREATMENT セクション (.hs-*)
   ============================================================ */
.hs-treat{position:relative;overflow:hidden;padding:clamp(3.5rem,7vw,6rem) 0;
  background:radial-gradient(120% 90% at 50% 0%,#fffdf8 0%,#faf5ec 60%,#f6efe1 100%)}
.hs-treat .head{text-align:center;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.hs-treat .leaf{position:absolute;top:1.5rem;width:clamp(90px,12vw,180px);color:#d9bc85;opacity:.55;pointer-events:none;z-index:0}
.hs-treat .leaf.l{left:-1%}
.hs-treat .leaf.r{right:-1%;transform:scaleX(-1)}
.hs-treat .wrap{position:relative;z-index:1}
.hs-treat-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(1.6rem,3.4vw,3rem);align-items:stretch}
/* 左：写真 ＋ 一言ボックス（写真は右カード群の高さに合わせて伸縮）*/
.hs-treat .left{display:flex;flex-direction:column;gap:clamp(1rem,1.8vw,1.5rem)}
.hs-treat .left .ph{flex:1;min-height:260px;border-radius:18px;box-shadow:var(--shadow)}
.hs-treat .note{position:relative;background:#fffdf9;border:1px solid var(--gold-light);border-radius:16px;
  padding:clamp(1.2rem,2vw,1.7rem) clamp(1.3rem,2.2vw,1.9rem) clamp(1.2rem,2vw,1.7rem) clamp(3.2rem,5vw,4.2rem)}
.hs-treat .note .lf{position:absolute;left:clamp(.8rem,1.4vw,1.2rem);top:clamp(1rem,1.6vw,1.4rem);width:clamp(26px,3vw,38px);color:#d9bc85;opacity:.85}
.hs-treat .note b{display:block;font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(.95rem,1.2vw,1.12rem);
  color:var(--gold-deep);letter-spacing:.05em;line-height:1.7;margin-bottom:.5em}
.hs-treat .note p{font-family:'Shippori Mincho',serif;font-size:clamp(.8rem,.95vw,.92rem);color:#6a5f50;line-height:1.9}
/* 右：4つの番号付きカード */
.hs-treat-cards{display:flex;flex-direction:column;gap:clamp(.9rem,1.6vw,1.3rem)}
.hs-treat-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,2vw,1.6rem);
  background:#fffdf9;border:1px solid var(--gold-light);border-radius:16px;box-shadow:var(--shadow-soft);
  padding:clamp(1.1rem,1.8vw,1.6rem) clamp(1.2rem,2vw,1.8rem)}
.hs-treat-card .no{position:relative;width:clamp(52px,5.4vw,66px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-num);font-weight:600;
  font-size:clamp(1.2rem,1.7vw,1.6rem);color:var(--gold-deep);flex:0 0 auto}
.hs-treat-card .no::before{content:"";position:absolute;inset:0;border:1px dashed rgba(201,162,94,.65);border-radius:50%}
.hs-treat-card .ct{border-left:1px solid var(--gold-light);padding-left:clamp(1rem,2vw,1.6rem)}
.hs-treat-card .ct h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(1.05rem,1.4vw,1.35rem);
  color:#41382e;letter-spacing:.04em;line-height:1.5}
.hs-treat-card .ct p{font-family:'Shippori Mincho',serif;font-size:clamp(.78rem,.95vw,.9rem);color:#6a5f50;line-height:1.85;margin-top:.5em}
.hs-treat-card .ic{width:clamp(48px,5.4vw,66px);height:clamp(48px,5.4vw,66px);color:var(--gold);flex:0 0 auto}
.hs-treat-card .ic svg{width:100%;height:100%}

/* ---------- FLOW（5ステップ・写真付きカード）---------- */
.hs-flow{padding:clamp(3.5rem,7vw,6rem) 0;background:var(--tp-bg)}
.hs-flow .head{text-align:center;margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.hs-flow .wrap{width:min(94%,1340px)}
.hs-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.9vw,1.8rem);margin:0}
.hs-flow-card{position:relative;background:#fffdf9;border:1px solid var(--gold-light);border-radius:16px;
  box-shadow:var(--shadow-soft);padding:clamp(1.9rem,2.6vw,2.4rem) clamp(.9rem,1.4vw,1.4rem) clamp(1.2rem,2vw,1.7rem);
  margin-top:26px}
.hs-flow-card .no{position:absolute;top:-26px;left:50%;translate:-50% 0;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#c9a25e,#a5824a);color:#fff;display:grid;place-items:center;
  font-family:var(--f-num);font-weight:500;font-size:1.15rem;letter-spacing:.06em;
  box-shadow:0 8px 18px -10px rgba(150,120,60,.7);border:2px solid #fffdf9}
.hs-flow-card h4{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(1rem,1.3vw,1.25rem);
  color:#41382e;letter-spacing:.03em;text-align:center;line-height:1.5;min-height:2.7em;
  display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.hs-flow-card .ph{aspect-ratio:1;border-radius:12px;box-shadow:var(--shadow-soft);margin-bottom:1rem}
.hs-flow-card p{font-family:'Shippori Mincho',serif;font-size:clamp(.84rem,.98vw,.94rem);color:#6a5f50;line-height:1.95;text-align:left}
.hs-flow-card:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(-1 * clamp(.6rem,1.4vw,1.3rem) / 2 - 5px);
  translate:0 -50%;width:10px;height:10px;border-top:1.6px solid var(--gold);border-right:1.6px solid var(--gold);
  transform:rotate(45deg);z-index:2}

/* ---------- 料金セクション（このページのみ）に背景画像 ---------- */
.sp-price{
  background-image:linear-gradient(rgba(249,242,231,.62),rgba(249,242,231,.72)),url('../images/headspa-price-bg.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat}

@media(max-width:1024px){
  .hs-flow-grid{grid-template-columns:1fr 1fr;margin-inline:auto}
  .hs-flow-card:not(:last-child)::after{display:none}
}

@media(max-width:768px){
  .hs-treat > .wrap,
  .hs-flow > .wrap{max-width:600px}
  .hs-flow-grid{grid-template-columns:1fr}
  .hs-treat-grid{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
  .hs-treat .left{max-width:600px;margin-inline:auto}
  .hs-treat .left .ph{flex:none;aspect-ratio:16/9;min-height:0}
  .hs-treat .leaf{display:none}
  .hs-treat-card .ic{width:44px;height:44px}
  .sp-price{background-image:linear-gradient(rgba(249,242,231,.78),rgba(249,242,231,.86)),url('../images/headspa-price-bg.webp')}
}
@media(max-width:480px){
  .hs-treat-card{grid-template-columns:auto 1fr;gap:.9rem}
  .hs-treat-card .ic{display:none}
}