/* KMsound トップページ購入体験の仕上げ */

html { overflow-x: clip; }
body { overflow-wrap: break-word; }

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid #d88972;
  outline-offset: 3px;
}

.member-banner {
  min-height: 36px;
  padding-block: 7px;
}

.member-banner a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* 用途から選ぶ */
.usecase-section {
  padding: 88px 40px 92px;
  background: #f7f5f0;
  border-bottom: 1px solid #ddd7cd;
}

.usecase-in {
  max-width: 1220px;
  margin: 0 auto;
}

.usecase-head {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 34px;
}

.usecase-head h2 {
  margin-top: 12px;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.45;
  letter-spacing: .02em;
  color: #191816;
  text-wrap: balance;
}

.usecase-head p {
  max-width: 640px;
  color: #6e685f;
  font-size: 14px;
  line-height: 2;
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.usecase-card {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid #d8d2c8;
  background: #211f1c;
  color: #fff;
  isolation: isolate;
}

.usecase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12,11,10,.08), rgba(12,11,10,.88));
}

.usecase-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.78) contrast(1.08);
  transform: scale(1);
  transition: filter .4s ease, transform .45s cubic-bezier(.2,.65,.3,1);
}

.usecase-card:hover img,
.usecase-card:focus-visible img {
  filter: grayscale(0) brightness(.94) contrast(1.04);
  transform: scale(1.065);
}

.usecase-card:focus-visible {
  outline: 3px solid #c42a16;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .usecase-card img { transition: filter .15s ease; }
  .usecase-card:hover img,
  .usecase-card:focus-visible img { transform: none; }
}

.usecase-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 22px 22px 20px;
}

.usecase-copy small {
  display: block;
  margin-bottom: 5px;
  color: #d7a18f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.usecase-copy strong {
  display: block;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 19px;
  line-height: 1.55;
}

.usecase-copy span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.74);
  font-size: 11px;
}

.usecase-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: #d98d76;
  font-size: 18px;
}

@media (min-width: 1180px) {
  .usecase-in { max-width: 1440px; }
  .usecase-grid { gap: 16px; }
  .usecase-card { min-height: 230px; }
  .usecase-copy { padding: 26px 26px 24px; }
  .usecase-copy small { font-size: 11px; }
  .usecase-copy strong { font-size: 22px; }
  .usecase-copy span { font-size: 12px; }
  .usecase-arrow { right: 22px; bottom: 22px; font-size: 20px; }
}

/* ランキングと商品一覧 */
body .rank-section { padding-top: 76px; }
body .lineup-section { padding-top: 18px; padding-bottom: 90px; }
body .lu-tabs { margin-bottom: 30px; }
body .lu-tab { min-height: 44px; }
body .lu-brand[hidden] { display: none !important; }
body .lineup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .lu-tab[data-brand="tachii"] { color: #8a5f18; border-color: #dec99f; }
body .lu-tab[data-brand="tachii"].is-on { color: #fff; background: #8a5f18; border-color: #8a5f18; }
body .lu-model[data-maker="tachii"] { background: transparent; }

.lineup-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.lineup-actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 返品条件の読み違いを防ぐ案内 */
.return-guide {
  padding: 76px 32px;
  background: #fff;
  border-top: 1px solid #ddd7cd;
}

.return-guide-in {
  max-width: 1080px;
  margin: 0 auto;
}

.return-guide-head {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: end;
  margin-bottom: 28px;
}

.return-guide h2 {
  margin-top: 10px;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.45;
  text-wrap: balance;
}

.return-guide-head > p {
  max-width: 470px;
  color: #6e685f;
  font-size: 13px;
  line-height: 1.9;
}

.return-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #ddd7cd;
}

.return-guide-card {
  padding: 25px 26px;
  border-right: 1px solid #ddd7cd;
}

.return-guide-card:last-child { border-right: 0; }
.return-guide-card small { color: #c86f5a; font-weight: 700; }
.return-guide-card h3 { margin: 7px 0 9px; font-size: 16px; }
.return-guide-card p { color: #6e685f; font-size: 12px; line-height: 1.85; }
.return-guide-link { display: inline-flex; margin-top: 14px; font-size: 12px; font-weight: 700; }

.bulk-content h2,
.cta h2,
.brand-content h2,
.order-guide-head h2 { text-wrap: balance; }

.sb-mobile-cart { display: none; }

/* ナビが収まらない幅では、早めに折りたたむ */
@media (max-width: 1120px) {
  .topbar-r { display: none !important; }
  .nav-in {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    padding-inline: 20px !important;
  }
  .nav-in .logo { min-width: 0; }
  nav .hamburger,
  nav .km-hbg { display: flex !important; }
  nav .hamburger span,
  nav .km-hbg span { background: #eee9e1 !important; }
  nav .nav-menu {
    display: none !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 350 !important;
    max-height: calc(100dvh - 68px) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: #1b1a18 !important;
    box-shadow: 0 16px 32px rgba(0,0,0,.32) !important;
  }
  nav .nav-menu.open,
  nav .nav-menu.km-open { display: flex !important; }
  nav .nav-menu > li { width: 100%; }
  nav .nav-menu > li > a {
    min-height: 52px !important;
    height: auto !important;
    padding: 13px 22px !important;
    border-bottom: 1px solid #35322e !important;
  }
  nav .nav-menu .sub-menu {
    position: static !important;
    display: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }
  nav .nav-menu li.has-sub.km-sub-open > .sub-menu { display: block !important; }

  html body .searchbar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 10px !important;
    padding: 8px 16px !important;
  }
  html body .searchbar .sb-search {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) 50px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .searchbar .sb-cats,
  html body .searchbar .sb-cats-btn,
  html body .searchbar .sb-input,
  html body .searchbar .sb-btn { min-width: 0 !important; }
  html body .searchbar .sb-acc { display: none !important; }
  .sb-mobile-cart {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 46px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.16);
    color: #f0ebe3;
    font-size: 12px;
  }

  .usecase-head { grid-template-columns: 1fr; gap: 14px; }
  .usecase-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body .lineup-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .member-banner {
    justify-content: flex-start;
    padding: 7px 42px 7px 12px;
    font-size: 10px;
  }
  .member-banner a { min-height: 28px; }
  .topbar { min-height: 31px; padding-block: 6px !important; }
  .topbar > div:first-child { font-size: 9.5px; line-height: 1.45; }

  html body .searchbar { padding: 7px 10px !important; gap: 7px !important; }
  .sb-cats-btn { width: 46px; padding-inline: 14px !important; justify-content: center; }
  .sb-cats-label,
  .sb-cats-caret { display: none; }
  html body .searchbar .sb-input { padding-inline: 10px; font-size: 13px; }
  html body .searchbar .sb-btn { width: 44px; }
  .sb-mobile-cart { min-width: 44px; padding-inline: 8px; }
  .sb-mobile-cart .sb-mobile-cart-label { display: none; }
  .sb-cats-panel { grid-template-columns: 1fr !important; }

  .concept-right { order: 1 !important; min-height: 248px !important; height: 248px !important; }
  .concept-left { order: 2 !important; width: 100% !important; min-width: 0 !important; padding: 38px 20px 42px !important; }
  .concept-h1 { font-size: clamp(34px, 10.5vw, 42px) !important; line-height: 1.38 !important; }
  .concept-copy { width: 100% !important; max-width: 100% !important; min-width: 0 !important; font-size: 13px !important; line-height: 1.9 !important; overflow-wrap: anywhere; }

  .trust-strip-in { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .ti { min-width: 0; padding: 18px 12px !important; align-items: flex-start; }
  .ti:nth-child(odd) { border-right: 1px solid #ddd7cd !important; }
  .ti h4 { font-size: 12px !important; line-height: 1.6; }
  .ti p { font-size: 10px !important; }

  .usecase-section { padding: 58px 14px 64px; }
  .usecase-head { margin-bottom: 24px; }
  .usecase-head h2 { font-size: 28px; }
  .usecase-head p { font-size: 12px; }
  .usecase-grid { gap: 8px; }
  .usecase-card { min-height: 166px; }
  .usecase-copy { padding: 16px 14px 14px; }
  .usecase-copy strong { padding-right: 16px; font-size: 15px; line-height: 1.5; }
  .usecase-copy span { display: none; }
  .usecase-arrow { right: 12px; bottom: 12px; }

  body .rank-section { padding: 54px 14px 48px; }
  body .rank-track { margin-left: 0; }
  body .rank-card { width: min(78vw, 286px); }
  body .lineup-section { padding: 8px 14px 64px; }
  body .lu-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 7px;
    margin-inline: -14px;
    padding: 2px 14px 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body .lu-tabs::-webkit-scrollbar { display: none; }
  body .lu-tab { flex: 0 0 auto; min-height: 42px; padding: 8px 16px; font-size: 13px; }
  body .lineup-grid { grid-template-columns: 1fr; gap: 10px; }
  body .lu-card { display: grid; grid-template-columns: 116px minmax(0,1fr); border-radius: 6px; }
  body .lu-img { height: 100%; min-height: 178px; padding: 10px; }
  body .lu-body { min-width: 0; padding: 14px; border-top: 0; border-left: 1px solid #ddd7cd; }
  body .lu-model {
    margin-bottom: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 17px;
    line-height: 1.3;
  }
  body .lu-model .km-own { display: none; }
  body .lu-body h3 { font-size: 19px; line-height: 1.45; }
  body .lu-desc { display: block; margin-bottom: 10px; font-size: 11px; line-height: 1.6; }
  body .lu-price { font-size: 14px; }
  .lineup-actions { flex-direction: column; margin-top: 26px; }
  .lineup-actions a { width: 100%; }

  .order-guide { padding-inline: 18px !important; }
  .brand-visual { min-height: 290px !important; height: 290px !important; }
  .bulk-content h2 { font-size: 29px !important; }

  .return-guide { padding: 58px 16px; }
  .return-guide-head { display: block; }
  .return-guide-head > p { margin-top: 12px; }
  .return-guide-grid { grid-template-columns: 1fr; }
  .return-guide-card { border-right: 0; border-bottom: 1px solid #ddd7cd; }
  .return-guide-card:last-child { border-bottom: 0; }
}