/* sports.smcn-jp.com 用の追加分（元サイト renewal.css にない部品だけ）。色・角丸・影・フォントは renewal.css の変数を使う */

/* 実績の数字（元の .statband / .stat-grid を3項目でも使えるように） */
.stat-grid.three{grid-template-columns:repeat(3,1fr)}
.res-head{margin-bottom:28px}
.res-head .point-title{margin-bottom:8px}
.res-head .point-text{margin-bottom:0}
.res-block + .res-block{margin-top:64px}
.res-note{font-size:12px;color:var(--light);margin-top:16px;line-height:1.8}
.res-block .statband{margin-top:0}

/* 動画のコマ（元の .browser と同じ枠線・影・角丸） */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:56px 0 12px}
.shots img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow)}
.res-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

/* ヒーロー（元の ind-hero）に置く申込ボタンと小さな札 */
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.hero-tags .work-tag{margin:0}
.hero-act-sub{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.hero-act-sub small{font-size:12.5px;color:var(--sub)}
.ind-hero-ph img{object-position:50% 38%}

/* 料金の目安（元の .price-brief を2枚で） */
.price-brief.two{grid-template-columns:repeat(2,1fr);max-width:780px;margin:0 auto}
.price-brief .pb-desc{min-height:0}

/* 無料SNS診断の申込 */
.apply-line{max-width:820px;margin:0 auto}
.apply-line .line-option-box{align-items:center}
.apply-qr{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.apply-qr .qr{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;width:180px;box-shadow:var(--shadow)}
.apply-qr .qr img{width:100%;height:auto}
.apply-qr p{font-size:12.5px;color:var(--sub);line-height:1.8}
.apply-line .btn-line-cta{margin-top:20px}
.apply-form{max-width:640px;margin:56px auto 0}
.apply-form-head{text-align:center;margin-bottom:28px}
.apply-form-head h3{font-size:19px;font-weight:900;margin-bottom:6px}
.apply-form-head p{font-size:13.5px;color:var(--sub)}
.contact-form .out{display:none;flex-direction:column;gap:14px}
.contact-form .out.on{display:flex}
.contact-form .out textarea{min-height:190px}
.out-actions{display:flex;flex-wrap:wrap;gap:12px}
.out-actions .btn{flex:1 1 180px}
.out-ok{font-size:13.5px;font-weight:700;color:var(--green-dark);min-height:1.6em}
.contact-form .btn{border:none}
.contact-form button.btn-outline{border:2px solid var(--ink)}

/* 法務モーダル内の補足（SNS運用の扱い） */
.legal-modal .legal-scope{background:var(--blue-light);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:var(--blue-dark)}

@media (max-width:960px){
  .shots{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
  .price-brief.two{grid-template-columns:1fr}
  .res-block + .res-block{margin-top:48px}
  .stat-grid.three{grid-template-columns:repeat(2,1fr)}
  .stat-grid.three .stat:nth-child(3){grid-column:1/-1;border-left:none}
}
@media (max-width:560px){
  .contact-form .out textarea{min-height:230px}
}