/*
 * KMsound 共通ストアテーマ
 * トップページの「黒・生成り・銅色・実物中心」のトンマナを公開ページへ展開する。
 * ページ固有の構造・機能は変えず、共通する視覚要素だけを上書きする。
 */

:root {
  --bg: #f7f5f0;
  --bg2: #eeeae2;
  --white: #fff;
  --black: #171614;
  --dark: #191816;
  --text: #302d29;
  --muted: #777168;
  --border: #ddd7cd;
  --red: #c86f5a;
  --red-d: #a95643;
  --accent: #c86f5a;
  --gold: #b78a4b;
  --km-copper: #c97862;
  --km-paper: #f7f5f0;
  --km-ink: #191816;
  --km-line: #ddd7cd;
}

html {
  color-scheme: light;
  scroll-padding-top: 126px;
}

html body {
  color: var(--text);
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #fff;
  background: #a95643;
}

a {
  text-underline-offset: .18em;
}

/* ─────────────────────────────────
   共通ヘッダー
   ───────────────────────────────── */
.topbar {
  min-height: 34px;
  padding: 8px 28px;
  color: rgba(255,255,255,.62);
  background: #11110f;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .02em;
}

.topbar a {
  color: rgba(255,255,255,.62);
}

.topbar a:hover {
  color: #fff;
}

.tb-badge {
  display: none;
}

nav {
  background: #171715;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}

.nav-in {
  height: 68px;
  padding-right: 28px;
  padding-left: 28px;
}

.logo-icon,
.logo-sub {
  display: none;
}

.logo-main,
.logo-main span {
  color: var(--km-copper);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: none;
}

.nav-menu > li > a {
  height: 68px;
  padding: 0 14px;
  color: #ded9d0;
  border-bottom: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
}

.nav-menu > li > a:hover,
.nav-menu > li > a.active {
  color: #d58a73;
  border-color: transparent;
}

.nav-menu .sub-menu,
nav .nav-menu .sub-menu {
  background: #23221f;
  border-color: #3a3732;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}

.nav-menu .sub-menu .sub-group,
nav .nav-menu .sub-menu .sub-group {
  color: #9d968c;
  background: #1c1b19;
  border-bottom-color: #383631;
}

.nav-menu .sub-menu > li > a,
nav .nav-menu .sub-menu > li > a {
  color: #d8d2c9;
  border-bottom-color: #383631;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
}

.nav-menu .sub-menu > li > a:hover,
nav .nav-menu .sub-menu > li > a:hover {
  color: #e39a83;
  background: #2b2925;
  border-left-color: #d58a73;
}

.nav-menu .sub-menu > li > a.wip {
  color: #8d877e;
}

.nav-menu .sub-menu > li > a.wip span {
  color: #c7c0b6;
  background: #4a4640;
}

.hamburger span {
  background: #eee9e1;
}

html body .searchbar {
  padding: 8px 28px !important;
  background: #1d1c1a !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

html body .searchbar .sb-group {
  background-color: #34322f;
}

html body .searchbar .sb-input {
  color: #292622;
  background: #f8f6f1;
}

html body .searchbar .sb-btn {
  background: var(--km-copper);
}

html body .searchbar .sb-btn:hover {
  background: var(--red-d);
}

html body .searchbar .sb-acc a,
html body .searchbar .sb-acc button {
  color: #d8d2c9;
}

/* ─────────────────────────────────
   基本部品
   ───────────────────────────────── */
.label,
.section-label,
.sec-label,
.section-title,
.article-meta,
.modal-cat {
  color: var(--red);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.label::before,
.section-label::before,
.sec-label::before {
  background: currentColor;
}

.btn,
button.btn,
a.btn,
.btn-inquiry,
.btn-contact,
.way-link {
  border-radius: 2px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
}

.btn-red,
.btn-inquiry {
  color: #fff;
  background: var(--red);
}

.btn-red:hover,
.btn-inquiry:hover {
  background: var(--red-d);
  box-shadow: 0 9px 24px rgba(91,48,38,.2);
  transform: none;
}

.btn-outline,
.btn-ghost {
  color: #302c27;
  background: transparent;
  border-color: #8f877d;
}

.btn-outline:hover,
.btn-ghost:hover {
  color: #fff;
  background: #252320;
  border-color: #252320;
}

.crumb,
.crumbs {
  color: #8a847b;
  font-size: 11px;
}

.crumb a:hover,
.crumbs a:hover {
  color: var(--red);
}

input,
select,
textarea,
.form-input {
  border-color: var(--border);
  border-radius: 2px;
  font-family: 'Noto Sans JP', sans-serif;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,111,90,.1);
}

/* ─────────────────────────────────
   下層ページの見出し
   ───────────────────────────────── */
.page-hero,
.mhero {
  min-height: 250px;
  padding: 72px 48px 58px;
  background: #191816;
  border-bottom: 1px solid #302e2a;
}

.page-hero::after,
.mhero::after {
  color: rgba(255,255,255,.022);
}

.page-hero .label,
.mhero .label {
  color: #bd7663 !important;
}

.page-hero h1,
.mhero h1 {
  max-width: 880px;
  margin: 16px 0 12px;
  color: #f5f1e9;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.38;
}

.page-hero h1 span {
  color: #d18470;
}

.page-hero p,
.mhero p {
  max-width: 680px;
  color: #aaa49b;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
}

.hero h1 {
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.42;
}

.hero-sub,
.mhero .tag {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .08em;
  text-transform: none;
}

.page-main,
.bulk-main,
.catalog,
.wrap {
  position: relative;
}

/* ─────────────────────────────────
   ケーブル商品ページ
   ───────────────────────────────── */
html body .product {
  max-width: 1240px;
  gap: clamp(34px,5vw,68px);
  padding-top: 38px;
  padding-bottom: 86px;
}

html body .prod-gallery,
.fhero-media {
  overflow: hidden;
  background: #efede7;
  border: 1px solid #d9d3c9;
  border-radius: 2px;
  box-shadow: none;
}

html body .prod-thumb {
  border-radius: 2px;
}

html body .prod-thumb.active {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(200,111,90,.16);
}

html body .buybox {
  padding-top: 8px;
}

html body .buybox h1,
.fhero-copy h1 {
  color: #211f1c;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.42;
}

html body .buybox h1 {
  font-size: clamp(27px,3vw,38px);
  white-space: normal;
}

html body .bb-sub {
  color: #787168;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
}

html body .bb-pricerange {
  margin-bottom: 26px;
  padding: 17px 0;
}

html body .bb-pricerange .rng {
  color: #9f503e;
}

html body .bb-row > label {
  color: #413d37;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
}

html body .bb-select,
html body .bb-qtyinput {
  border-radius: 2px;
  background-color: #fff;
}

html body .bb-select:focus,
html body .bb-qtyinput:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,111,90,.09);
}

html body .bb-total .amt {
  color: #211f1c;
}

html body .bb-add {
  border-radius: 2px;
  background: var(--red);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
}

html body .bb-add:hover {
  background: var(--red-d);
  box-shadow: 0 10px 28px rgba(91,48,38,.2);
  transform: none;
}

.points {
  background: #fff;
}

.point {
  padding-top: 36px;
  padding-bottom: 36px;
}

.point .pico {
  filter: grayscale(1);
  opacity: .62;
}

.point h3,
.detail h2 {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .01em;
}

.detail h2 {
  font-size: 27px;
}

.spec-table,
.compare-table {
  background: #fff;
  border-color: var(--border);
}

.spec-table th,
.compare-table th {
  color: #6f6961;
  background: #efebe4;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0;
}

.spec-table th,
.spec-table td,
.compare-table th,
.compare-table td {
  border-color: var(--border);
}

.brand-pick,
.modal-card,
.summary-card {
  border-radius: 2px;
  box-shadow: none;
}

.bpick,
.brand-card,
.type-card,
.opt-card {
  border-radius: 2px;
}

.bpick.active,
.brand-card.sel,
.type-card.sel,
.opt-card.sel,
.qty-step.sel {
  color: var(--red);
  background: #faf3ef;
  border-color: var(--red);
}

.bpick.active {
  color: #fff;
  background: #252320;
  border-color: #252320;
}

/* ─────────────────────────────────
   商品一覧・楽器一覧・ブランド
   ───────────────────────────────── */
.catalog .ggrid {
  gap: 16px;
}

.catalog .gcard,
.gallery .card,
.way-card,
.contact-card,
.section,
.blog-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}

.catalog .gcard:hover,
.gallery .card:hover,
.way-card:hover,
.blog-card:hover {
  border-color: #a9a095;
  box-shadow: 0 16px 38px rgba(50,43,35,.08);
  transform: translateY(-3px);
}

.catalog .gcard::before {
  height: 2px;
  background: var(--red) !important;
}

.catalog .gcard-name,
.gallery .card-title,
.way-card h3,
.modal-h,
.mstory h2,
.mlineup-head h2 {
  color: #24211e;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.45;
}

.catalog .gcard-cat,
.gallery .card-brand {
  color: #9b5948;
}

.catalog .glink,
.way-link {
  color: #9f503e !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: none;
}

.gallery .card-img {
  background: #efede7;
}

.gallery .card-body {
  padding: 20px 20px 24px;
}

.gallery .modal-in {
  border-radius: 2px;
}

.mstory img {
  border-color: var(--border);
  box-shadow: 0 18px 42px rgba(42,36,30,.08);
}

.mlineup .lcard {
  border-radius: 2px;
}

/* ─────────────────────────────────
   大口注文・フォーム・会員ページ
   ───────────────────────────────── */
.targets-strip {
  background: #fff;
}

.ts-item {
  background: #f3f0ea;
  border-radius: 2px;
}

.way-badge,
.step-num {
  background: var(--red);
  border-radius: 2px;
}

.order-summary {
  background: #1d1c1a;
}

.contact-card {
  padding: 34px;
}

.faq-item {
  margin-bottom: 8px;
  background: #fff;
  border-color: var(--border);
  border-radius: 2px;
}

.faq-q-icon {
  color: var(--red);
  font-family: Georgia, serif;
}

.section {
  padding: 28px 30px;
}

.section-h h2 {
  color: #26231f;
  font-family: 'Noto Sans JP', sans-serif;
}

.profile-avatar {
  color: #e4a18e;
  background: #1d1c1a;
  font-family: Georgia, serif;
}

.pts-val {
  color: #9f503e;
  font-family: 'Oswald', sans-serif;
}

.modal-card,
.card {
  border-color: var(--border);
}

.modal-title,
.card h1 {
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ─────────────────────────────────
   読み物・ブログ
   ───────────────────────────────── */
.article-wrap,
.page-main.article {
  max-width: 820px;
}

.article h1 {
  color: #24211e;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.55;
}

.article-lead {
  color: #4e4943;
  border-bottom-color: var(--border);
}

.article h2 {
  color: #292621;
  border-left-color: var(--red);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}

.article h3 {
  color: #332f2a;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .01em;
}

.article p,
.article li {
  color: #3e3a35;
}

.tip,
.tip-box {
  background: #fff;
  border-color: var(--border);
  border-left-color: var(--red);
  border-radius: 0;
}

.bimg img {
  border-radius: 2px;
}

.cta-box {
  background: #1c1b19;
  border-radius: 2px;
}

.cta-box .btn {
  background: var(--red);
}

.related a:hover {
  color: var(--red);
}

/* ─────────────────────────────────
   CTA・フッター
   ───────────────────────────────── */
.cta {
  background: #191816;
}

.cta h2 {
  color: #f3efe7;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.5;
}

.cta h2 span {
  color: #d18470;
}

.cta p {
  color: #aaa49b;
}

footer {
  color: rgba(255,255,255,.38);
  background: #0d0d0c;
}

.flogo-main,
.flogo-main span {
  color: var(--km-copper);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.02em;
}

.fcol h5 {
  color: rgba(255,255,255,.7);
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .12em;
  text-transform: none;
}

.fcol ul li a {
  color: rgba(255,255,255,.42);
}

.fcol ul li a:hover {
  color: #fff;
}

/* ─────────────────────────────────
   認証・完了・転送ページ
   ───────────────────────────────── */
.logo-bar {
  background: #171715;
  border-bottom-color: rgba(255,255,255,.08);
}

.logo-bar .logo-main,
.logo-bar .logo-main span {
  color: var(--km-copper);
}

.logo-bar .logo-sub {
  display: block;
  color: #8f887f;
}

body.km-status-page {
  color: var(--text);
  background: var(--km-paper);
}

body.km-status-page > main,
body.km-status-page {
  min-height: 100vh;
}

body.km-status-page .card,
body.km-status-page .box {
  border-radius: 2px;
}

body.km-status-page.km-status-dark {
  color: #fff;
  background: #191816;
}

body.km-status-page.km-status-dark h1 {
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-size: clamp(34px,5vw,52px);
  font-weight: 500;
  letter-spacing: .04em;
}

body.km-status-page.km-status-dark > div > a {
  border-radius: 2px;
  background: var(--red);
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .03em;
  text-transform: none;
}

/* ─────────────────────────────────
   レスポンシブ
   ───────────────────────────────── */
@media (max-width: 1100px) {
  .nav-menu > li > a {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 102px;
  }

  .topbar {
    padding: 8px 16px;
  }

  .nav-in {
    padding-right: 16px;
    padding-left: 16px;
  }

  .logo-main,
  .logo-main span {
    font-size: 25px;
  }

  nav .nav-menu {
    top: 68px;
    background: #1b1a18 !important;
    border-bottom-color: #3a3732 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.3) !important;
  }

  nav .nav-menu > li > a {
    color: #e7e1d8;
    border-bottom-color: #35322e !important;
  }

  nav .nav-menu > li > a:hover,
  nav .nav-menu > li > a.active {
    color: #d58a73;
    border-left-color: #d58a73;
  }

  nav .nav-menu .sub-menu {
    background: #22211e !important;
  }

  nav .nav-menu .sub-menu > li > a {
    color: #bdb6ac;
    background: #22211e !important;
    border-bottom-color: #35322e !important;
  }

  nav .nav-menu .sub-menu .sub-group {
    color: #827c73;
    background: #191816 !important;
  }

  html body .searchbar {
    padding: 8px 16px !important;
  }

  .page-hero,
  .mhero {
    min-height: 0;
    padding: 48px 20px 38px;
  }

  .page-hero h1,
  .mhero h1 {
    font-size: 34px;
    line-height: 1.5;
  }

  .page-hero::after,
  .mhero::after {
    font-size: 100px;
  }

  html body .product {
    gap: 30px;
    padding: 22px 16px 58px;
  }

  html body .buybox h1 {
    font-size: 27px;
  }

  .catalog .ggrid {
    grid-template-columns: 1fr;
  }

  .catalog .gcard {
    padding: 24px 20px;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 21px 19px;
  }

  .article h1 {
    font-size: 25px;
  }

  .article h2 {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}