@charset "utf-8";
/* STANCER 下層ページ共通（site.css の後に読む） */
.st-logo img { height: 22px; width: auto; }
.sl-footer__brand .st-logo img { height: 24px; filter: brightness(0) invert(1); }
@media screen and (max-width: 672px) { .st-logo img { height: 18px; } }
.st-body .sl-menu__label, .st-body .sl-menu__list a.is-store { color: #111; }
.st-body a { color: var(--sl-ink); }
.st-body .btn, .st-body .btn:hover { color: #fff; }
.st-body .btn--ghost { color: var(--sl-ink); }
.st-body .prose a, .st-body .caption a { color: var(--sl-blue); }

/* サブナビ（ページ内・関連ページ） */
.st-subnav { position: sticky; top: var(--sl-header-h); z-index: 90; background: #fff; border-bottom: 1px solid var(--sl-line); }
.st-subnav__inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.st-subnav__inner::-webkit-scrollbar { display: none; }
.st-subnav a { flex: 0 0 auto; padding: 12px 12px; font-size: 13px; font-weight: 500; color: var(--sl-ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.st-subnav a:hover { color: var(--sl-ink); border-bottom-color: var(--sl-ink); }

/* ページヒーロー */
.st-page-hero { background: #111; color: #fff; position: relative; overflow: hidden; }
.st-page-hero::before { content: ""; position: absolute; inset: 0; left: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><path d='M28 0l28 16v32L28 64 0 48V16z M28 48.5l28 16v32L28 112.5 0 96.5v-32z' fill='none' stroke='%23444' stroke-width='1.5'/></svg>");
  background-size: 56px 97px; -webkit-mask-image: linear-gradient(to right, transparent, #000 50%); mask-image: linear-gradient(to right, transparent, #000 50%); }
.st-golf .st-page-hero { background: #0b3d2e; }
.st-snowboard .st-page-hero { background: #0f1f4a; }
.st-page-hero__inner { position: relative; max-width: 1000px; margin: 0 auto; padding: clamp(44px, 7vw, 80px) 20px; }
.st-page-hero .eyebrow { color: #bcd; }
.st-page-hero h1 { margin: 0 0 12px; font-family: var(--sl-font-latin); font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: .02em; }
.st-page-hero h1 span { display: block; margin-top: 6px; font-family: var(--sl-font); font-size: 15px; font-weight: 500; letter-spacing: .12em; opacity: .85; }
.st-page-hero p { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.9; color: #e5e9ee; }

.st-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.st-links .btn { min-height: 46px; padding: 0 22px; font-size: 13px; }
.st-links .btn--ghost, .st-body .st-links .btn--ghost:hover { color: var(--sl-ink); border-color: var(--sl-ink); }
.st-links .btn--ghost:hover { background: var(--sl-bg-soft); color: var(--sl-ink); }
.st-body .btn--dark:hover { color: #fff; }

/* STANCE.LAB LIBRARY */
.st-lab { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-lab a { display: block; text-decoration: none; color: var(--sl-ink); }
.st-lab img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
.st-lab span { display: block; margin-top: 6px; font-family: var(--sl-font-latin); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--sl-ink-2); }
.st-lab a:hover img { opacity: .85; }
@media screen and (max-width: 900px) { .st-lab { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 672px) { .st-lab { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* 機器タイプ */
.st-types { display: grid; gap: 28px; }
.st-type { padding: 24px; border: 1px solid var(--sl-line); border-radius: 6px; background: #fff; }
.st-type__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.st-type__num { font-family: var(--sl-font-latin); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.st-type__num small { font-size: 16px; font-weight: 700; margin: 0 6px; }
.st-type__year { font-size: 12px; font-weight: 700; color: var(--sl-ink-3); letter-spacing: .1em; }
.st-type p { margin: 0 0 10px; font-size: 15px; }
.st-type img { width: 100%; height: auto; margin-top: 10px; border-radius: 4px; }
.st-snowboard .st-type__num { color: #1a3a9c; }
.st-golf .st-type__num { color: #0a7a48; }

/* もう一方への導線 */
.st-cross { display: block; padding: 32px 28px; background: #111; color: #fff; text-decoration: none; border-radius: 6px; text-align: center; }
.st-cross:hover { color: #fff; opacity: .92; }
.st-cross .t1 { display: block; font-family: var(--sl-font-latin); font-size: 13px; letter-spacing: .14em; color: #cfd5dc; }
.st-cross .t2 { display: block; margin: 4px 0; font-family: var(--sl-font-latin); font-size: 34px; font-weight: 800; letter-spacing: .06em; }
.st-cross .t3 { display: block; font-size: 13px; color: #cfd5dc; }
.st-snowboard .st-cross { background: #0b3d2e; }
.st-golf .st-cross { background: #0f1f4a; }

/* RAT4 */
.st-rats { display: grid; gap: 18px; }
.st-rat { border: 1px solid var(--sl-line); border-left-width: 6px; border-radius: 6px; padding: 22px 24px; background: #fff; }
.st-rat--r2 { border-left-color: #2a9d4b; } .st-rat--r1 { border-left-color: #3b6fd1; } .st-rat--l1 { border-left-color: #e0b400; } .st-rat--l2 { border-left-color: #7a3aa8; }
.st-rat__head { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.st-rat__head img { width: 72px; height: auto; }
.st-rat__head h3 { margin: 0 0 6px; font-family: var(--sl-font-latin); font-size: 26px; font-weight: 800; }
.st-rat__head h3 small { font-family: var(--sl-font); font-size: 13px; font-weight: 700; color: var(--sl-ink-2); margin-left: 8px; }
.st-rat__head p { margin: 0; font-size: 15px; }
.st-rat__grid { margin: 0; display: grid; grid-template-columns: 210px 1fr; gap: 6px 16px; font-size: 14px; }
.st-rat__grid dt { font-weight: 700; color: var(--sl-ink-2); }
.st-rat__grid dd { margin: 0; }
.st-rat__grid b { display: inline-block; margin-right: 6px; padding: 0 8px; background: var(--sl-bg-soft); border-radius: 3px; font-size: 12px; }
.st-rat__tags { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--sl-line); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 700; }
.st-rat__tags span { display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 700; color: var(--sl-ink-3); letter-spacing: .08em; }
.st-precision-fig img { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
@media screen and (max-width: 672px) {
  .st-rat { padding: 18px 16px; }
  .st-rat__head { grid-template-columns: 56px 1fr; gap: 12px; }
  .st-rat__head img { width: 56px; }
  .st-rat__head h3 { font-size: 22px; }
  .st-rat__head h3 small { display: block; margin: 2px 0 0; }
  .st-rat__grid { grid-template-columns: 1fr; gap: 2px 0; }
  .st-rat__grid dt { margin-top: 8px; }
  .st-type__num { font-size: 32px; }
  .st-precision-fig img { max-width: 240px; }
}

/* ===== ガイドページ（計測前入力・計測結果解説・計測方法） ===== */
.st-page-hero--sm .st-page-hero__inner { padding: clamp(36px, 5vw, 56px) 20px; }
.st-page-hero--sm h1 { font-family: var(--sl-font); font-size: clamp(24px, 3.4vw, 32px); }
.st-page-hero--sm h1 span { font-family: var(--sl-font-latin); font-size: 12px; letter-spacing: .18em; }
.st-guide > ul, .st-guide ul { list-style: none; margin: 0; padding: 0; }
.st-guide > ul > li, .st-guide .method-list { padding: 24px 0 32px; border-bottom: 1px solid var(--sl-line); }
.st-guide > ul > li:last-child { border-bottom: 0; }
.st-guide h2, .st-guide .st-step { margin: 0 0 14px; padding-left: 14px; border-left: 4px solid #111; font-size: 19px; font-weight: 700; line-height: 1.4; }
.st-guide h2.before { margin-top: 32px; font-family: var(--sl-font-latin); font-size: 22px; font-weight: 800; border-left-color: var(--sl-blue); }
.st-golf .st-guide h2, .st-golf .st-guide .st-step { border-left-color: #0a7a48; }
.st-snowboard .st-guide h2, .st-snowboard .st-guide .st-step { border-left-color: #1a3a9c; }
.st-guide p { margin: 10px 0; font-size: 15px; line-height: 1.9; }
.st-guide p img, .st-guide img.img-responsive { display: block; width: 100%; max-width: 640px; height: auto; margin: 12px auto 18px; border: 1px solid var(--sl-line); border-radius: 4px; }
.st-guide .red { display: inline-block; min-width: 1.6em; margin-right: 4px; font-weight: 700; color: #b42318; }
.st-guide .method-list-e { padding-left: 4px; }
.st-guide .youtube { position: relative; width: 100%; max-width: 760px; margin: 12px auto 28px; aspect-ratio: 16 / 9; background: #000; }
.st-guide .youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-guide .section-flex { display: grid; grid-template-columns: 300px 1fr; gap: 20px 28px; align-items: start; }
.st-guide .section-flex .p-width { margin: 0; }
.st-guide .section-flex .p-width img { margin: 0; max-width: 100%; }
.st-guide .section-flex .w-width p { margin: 0 0 10px; }
.st-guide .w-width { min-width: 0; }
.st-guide a { color: var(--sl-blue); text-decoration: underline; }
.st-guide .top-h3 { margin: 32px 0 12px; font-size: 18px; font-weight: 700; text-align: left; }
@media screen and (max-width: 672px) { .st-guide .section-flex { grid-template-columns: 1fr; } .st-guide h2, .st-guide .st-step { font-size: 17px; } }

/* RAT4 スイング解説 */
.st-swings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-swing { border: 1px solid var(--sl-line); border-top-width: 6px; border-radius: 6px; padding: 20px; background: #fff; }
.st-swing.st-rat--r2 { border-top-color: #2a9d4b; } .st-swing.st-rat--r1 { border-top-color: #3b6fd1; } .st-swing.st-rat--l1 { border-top-color: #e0b400; } .st-swing.st-rat--l2 { border-top-color: #7a3aa8; }
.st-swing h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 20px; font-weight: 800; font-family: var(--sl-font-latin); }
.st-swing h3 img { width: 44px; height: auto; }
.st-swing p { margin: 0 0 14px; font-size: 14px; }
.st-swing__video { display: block; position: relative; text-decoration: none; color: var(--sl-ink); }
.st-swing__video img { width: 100%; height: auto; border-radius: 4px; display: block; }
.st-swing__video span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; }
.st-swing details, .st-putt details { margin-top: 12px; }
.st-swing summary, .st-putt summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sl-blue); }
.st-swing details img, .st-putt details img { width: 100%; height: auto; margin-top: 10px; border: 1px solid var(--sl-line); }
.st-putts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-putt { border: 1px solid var(--sl-line); border-radius: 6px; padding: 20px; background: #fff; }
.st-putt h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.st-putt p { margin: 0; font-size: 14px; }
@media screen and (max-width: 672px) { .st-swings, .st-putts { grid-template-columns: 1fr; } }

/* ===== 正規導入店（旧 redesign.css の見た目をそのまま使う。ここでは共通シェルとの干渉だけ解く） ===== */
.st-shop { max-width: 1100px; margin: 0 auto; padding: 24px 16px 0; }
.st-shop .block { margin-top: 0; }
.st-shop ul { list-style: none; padding: 0; }
.st-shop li img { vertical-align: middle; margin-right: 4px; }
/* 旧・日本地図用の絶対配置リンク（#wrap）は使わない。エリア移動は .region-tabs に統一 */
.st-shop #wrap, .st-shop #wrap .pc, .st-shop .shop_link { display: none !important; }
/* 旧JS(jQuery)で出し入れしていた固定バーは、一覧末尾の通常テキストにする */
.st-shop .attention { position: static !important; max-width: none; padding: 24px 0 8px; background: none; text-align: left; font-size: 14px; }
/* 旧CSS（section の padding/margin）を共通部品に効かせない */
.st-page-hero, .st-cross, .st-shop .block { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.st-page-hero { padding: 0 !important; margin: 0 !important; }
section.st-page-hero + .st-shop { margin-top: 0; }
.st-body .section--soft.section { padding-left: 0; padding-right: 0; }
.st-page-hero, .st-cross-wrap { max-width: none !important; }
.st-shop .block.shop1 { padding-left: 0; padding-right: 0; }
/* 共通ヘッダーが sticky なので、エリアタブと検索の固定位置をその分下げる */
.st-shop .region-tabs { top: var(--sl-header-h); }
.st-shop .shop-search { top: calc(var(--sl-header-h) + 52px); }