/* 導入サロン様の声（トップ・/for-salon/・/salon-voices/ 共通）。文面の正本は data/salon-voices.json。
   方針: 写真が主役 / 写真に重なる「印象的な言葉」 / 白・アイボリー・ベージュ・淡いピンク・くすみローズ。濃いピンクはCTAだけ。 */
.sv-section{
  --sv-ink:#3b2f36;--sv-soft:#6f5f67;--sv-rose:#b4687d;--sv-rose-d:#8f4a60;--sv-blush:#fbeff1;--sv-beige:#f5ebe4;--sv-ivory:#fffaf6;
  --sv-mincho:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","Hiragino Mincho Pro",serif;
  position:relative;overflow:hidden;color:var(--sv-ink);word-break:keep-all;overflow-wrap:anywhere;
  padding:clamp(76px,9vw,140px) 6vw;
  background:radial-gradient(60% 50% at 8% 0%,rgba(244,205,214,.38),transparent 70%),radial-gradient(55% 45% at 100% 100%,rgba(240,222,205,.55),transparent 70%),linear-gradient(180deg,#fffaf6 0%,#fbf1ee 100%);
}
.sv-head{max-width:760px;margin:0 auto clamp(40px,5vw,72px);text-align:center}
.sv-head .section-tag{margin:0 0 18px;color:var(--sv-rose);letter-spacing:.34em;font-size:11px}
.sv-head h2{font:500 clamp(30px,3.7vw,48px)/1.5 var(--sv-mincho);letter-spacing:.1em;margin:0 0 22px;color:var(--sv-ink)}
.sv-head h2:after{content:"";display:block;width:44px;height:1px;margin:22px auto 0;background:var(--sv-rose)}
.sv-head p{font:400 15px/2.1 var(--jp);margin:0;color:var(--sv-soft)}

/* 並び: 件数が少ない・端数が出ても中央に寄せる（5件=3+2 / タブレット 2+2+1 でも左寄りにならない） */
.sv-grid,.sv-list{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 30px;list-style:none;margin:0 auto;padding:0;max-width:1240px}
.sv-card{
  flex:0 1 calc((100% - 60px)/3);min-width:0;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid rgba(180,104,125,.14);border-radius:22px;
  box-shadow:0 26px 60px -22px rgba(120,66,82,.22),0 2px 8px rgba(120,66,82,.05);
  line-break:strict;text-wrap:pretty;scroll-margin-top:100px;
  transition:transform .35s ease,box-shadow .35s ease;
}
.sv-card:hover{transform:translateY(-4px);box-shadow:0 34px 70px -24px rgba(120,66,82,.28),0 2px 8px rgba(120,66,82,.06)}

/* 写真: 人物が主役。縦長は 4:5、横長は 4:3。顔が切れないよう個別の object-position は data の photo.focus */
.sv-photo{margin:0;overflow:hidden;background:var(--sv-beige);aspect-ratio:4/3}
.sv-photo--portrait{aspect-ratio:4/5}
.sv-photo img{height:100%;object-fit:cover;transition:transform .8s ease}
.sv-card:hover .sv-photo img{transform:scale(1.03)}

/* 写真に重ねる「印象的な言葉」 */
.sv-pull{position:relative;z-index:2;margin:-62px 18px 0;padding:20px 24px 22px;border-radius:16px;background:rgba(255,251,248,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 38px -14px rgba(110,58,74,.3)}
.sv-benefit{display:inline-flex;align-items:center;gap:7px;margin:0;padding:4px 12px 4px 10px;border-radius:999px;background:var(--sv-beige);color:var(--sv-rose-d);font:600 11px/1.6 var(--jp);letter-spacing:.08em}
.sv-benefit:before{content:"";width:6px;height:6px;border-radius:2px;background:var(--sv-rose);transform:rotate(45deg)}
.sv-pull-text{margin:12px 0 0;font:500 clamp(16px,1.3vw,18.5px)/1.9 var(--sv-mincho);letter-spacing:.04em;color:var(--sv-ink)}
.sv-pull-text:after{content:"";display:block;width:52px;height:2px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,var(--sv-rose),rgba(180,104,125,0))}
.sv-cite{display:block;margin-top:10px;font:400 11.5px/1.8 var(--jp);color:var(--sv-soft);font-style:normal}

.sv-card-body{display:flex;flex-direction:column;flex:1;padding:22px 26px 26px}
.sv-body{margin:0 0 20px;font:400 14.5px/2 var(--jp);color:var(--sv-soft)}
.sv-lead{margin:0 0 6px;font:400 14.5px/2 var(--jp);color:var(--sv-soft)}
.sv-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto}

/* サロン情報（地域・サロン名・オーナー名）。アイコンは CSS のみ */
.sv-meta{min-width:0}
.sv-area,.sv-salon{display:flex;align-items:center;gap:8px;margin:0}
.sv-area{font:600 12.5px/1.6 var(--jp);letter-spacing:.1em;color:var(--sv-rose-d);margin-bottom:4px}
.sv-area:before,.sv-salon:before{content:"";flex:none;width:15px;height:15px;background:var(--sv-rose);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.sv-area:before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.sv-salon{font:600 18px/1.6 var(--jp);letter-spacing:.03em;color:var(--sv-ink)}
.sv-salon:before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V9l8-5 8 5v12'/%3E%3Cpath d='M9 21v-6h6v6M9 11.5h.01M15 11.5h.01'/%3E%3C/svg%3E")}
.sv-salon a{border-bottom:1px solid transparent;transition:border-color .2s}
.sv-salon a:hover{border-color:currentColor}
.sv-person{margin:2px 0 0 23px;font:500 13px/1.8 var(--jp);color:var(--sv-soft)}
.sv-person span{margin-left:.5em;font-size:12px}
.sv-card--full .sv-person{margin-bottom:12px}

/* 詳細ページへの矢印 */
.sv-go{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sv-blush);color:var(--sv-rose-d);font:500 18px/1 var(--jp);transition:background .25s,color .25s,transform .25s}
.sv-go:hover,.sv-card:hover .sv-go{background:var(--sv-rose);color:#fff}
.sv-go:hover{transform:translateX(3px)}
.sv-link{margin-top:auto;padding-top:20px;align-self:flex-start;font:600 13px/1.6 var(--jp);letter-spacing:.04em;color:var(--sv-rose-d)}
.sv-link span{display:inline-block;margin-left:8px;transition:transform .2s}
.sv-link:hover span{transform:translateX(5px)}

/* 導入前 / 導入後 など（for-salon・専用ページ） */
.sv-facts{margin:18px 0 0}
.sv-fact{padding:14px 0;border-top:1px solid rgba(180,104,125,.18)}
.sv-fact dt{margin:0 0 6px;font:600 11px/1.5 var(--jp);letter-spacing:.14em;color:var(--sv-rose)}
.sv-fact dd{margin:0;font:400 14px/1.95 var(--jp);color:var(--sv-ink)}
.sv-points,.sv-steps{margin:0;padding:0;list-style:none}
.sv-points li{position:relative;padding-left:1.1em}
.sv-points li+li{margin-top:6px}
.sv-points li:before{content:"";position:absolute;left:0;top:.9em;width:5px;height:5px;border-radius:50%;background:var(--sv-rose)}
.sv-steps{counter-reset:svs}
.sv-steps li{counter-increment:svs;position:relative;padding-left:2.6em}
.sv-steps li+li{margin-top:12px}
.sv-steps li:before{content:counter(svs,decimal-leading-zero);position:absolute;left:0;top:.1em;font:500 15px/1.6 var(--serif);color:var(--sv-rose)}
.sv-steps b{display:block;font:600 14px/1.7 var(--jp)}
.sv-steps span{display:block}
.sv-message{margin-top:18px;padding:16px 18px;border:1px solid rgba(180,104,125,.4);border-radius:12px}
.sv-message b{display:block;margin-bottom:6px;font:600 12px/1.6 var(--jp);color:var(--sv-rose-d)}
.sv-message p{margin:0;font:400 14px/1.9 var(--jp)}

/* 「もっと見る」ボタン（既存の .button.primary を土台に、少し大きく上品に） */
.sv-more{text-align:center;margin:clamp(40px,5vw,64px) 0 0}
.sv-more .button.sv-more-btn{margin:0;min-width:320px;padding:20px 30px;gap:30px;font-size:15px;letter-spacing:.06em;box-shadow:0 18px 38px -12px rgba(201,53,96,.45)}
.sv-empty{text-align:center;font:400 15px/2 var(--jp);color:var(--sv-soft);padding:40px 0}
.sv-note{max-width:1240px;margin:38px auto 0;font:400 12px/1.9 var(--jp);color:var(--sv-soft);text-align:center}

/* /salon-voices/ ページ固有 */
.sv-hero{position:relative;overflow:hidden;padding:clamp(130px,14vw,190px) 8vw clamp(70px,8vw,110px);text-align:center;background:radial-gradient(50% 70% at 12% 20%,rgba(255,255,255,.95),transparent 70%),radial-gradient(45% 60% at 92% 90%,rgba(240,200,210,.55),transparent 70%),linear-gradient(120deg,#fffaf8 0%,#fceff2 55%,#f8e2e7 100%)}
.sv-hero>div{max-width:820px;margin:0 auto}
.sv-hero .eyebrow{color:#b4687d;letter-spacing:.34em;margin-bottom:24px}
.sv-hero h1{font:500 clamp(34px,5vw,60px)/1.5 "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.08em;margin:0 0 28px;color:#3b2f36}
.sv-hero h1 em{display:block;margin-top:4px;font-family:var(--serif);font-weight:500;letter-spacing:.04em;color:#b4687d}
.sv-hero p:last-child{font:400 16px/2.1 var(--jp);margin:0;color:#5b4a52}
.sv-page-list{padding-top:clamp(60px,7vw,100px)}

/* 専用ページ最後のCTA */
.sv-cta.inquiry{position:relative;overflow:hidden;padding:clamp(80px,9vw,130px) 6vw;background:radial-gradient(60% 80% at 50% 0%,rgba(255,255,255,.9),transparent 70%),linear-gradient(180deg,#fbeff1 0%,#f6e3e8 100%)}
.sv-cta.inquiry>div{max-width:820px}
.sv-cta.inquiry>div>p:first-child{color:#b4687d;letter-spacing:.3em;font-size:11px}
.sv-cta.inquiry h2{font:500 clamp(30px,4.2vw,52px)/1.5 "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.06em;color:#3b2f36}
.sv-cta.inquiry h2 em{font-family:var(--serif);color:#b4687d}
.sv-cta.inquiry>div>p:nth-of-type(2){color:#5b4a52;line-height:2.1}
.sv-cta .inquiry-actions{flex-wrap:wrap;gap:16px;margin-top:38px}
.sv-cta .inquiry-actions .button{margin:0;min-width:230px;padding:19px 26px;gap:22px;letter-spacing:.05em}
.sv-cta .inquiry-actions .button.white{background:#fff;color:#8f4a60;border:1px solid rgba(180,104,125,.35);box-shadow:0 10px 26px -14px rgba(120,66,82,.4)}
.sv-cta .inquiry-actions .button.white:hover{background:#fff7f8;border-color:#b4687d}

@media(max-width:1100px){
  .sv-card{flex-basis:calc((100% - 30px)/2)}
}
@media(max-width:700px){
  .sv-section{padding:68px 20px}
  .sv-grid,.sv-list{gap:30px}
  .sv-card{flex-basis:100%;border-radius:20px}
  .sv-pull{margin:-50px 14px 0;padding:18px 18px 20px}
  .sv-pull-text{font-size:17px}
  .sv-card-body{padding:20px 20px 24px}
  .sv-more .button.sv-more-btn{width:100%;min-width:0}
  .sv-hero{padding:116px 24px 64px}
  .sv-page-list{padding-top:48px}
  .sv-cta .inquiry-actions .button{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){.sv-card,.sv-photo img,.sv-link span,.sv-go{transition:none}.sv-card:hover{transform:none}.sv-card:hover .sv-photo img{transform:none}}