@charset "UTF-8";
:root {
  --color-blue: #0088BF;
  --color-navy: #123C7F;
  --color-red: #E6001B;
  --color-black: #222222;
  --color-white: #FFFFFF;
  --color-border: #DDDDDD;
  --color-bg-disable: #F8F8F8;
  --color-text-sub: #555555;
  --color-text-muted: #777777;
  --color-text-faint: #999999;
  --color-text-on-dark: #AAAAAA;
  --color-border-strong: #CCCCCC;
  --color-on-dark-primary: #cccccc;
  --color-on-dark-secondary: #999999;
  --color-on-dark-muted: #aaaaaa;
  --line-height-heading: 1.5;
  --heading-accent-color: var(--color-red);
  --heading-h1-accent-width: 160px;
  --heading-h2-accent-width: 60px;
  --font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --line-height-base: 1.5;
  --line-height-body: 1.75;
  --font-size-h1-pc: 36px;
  --font-size-h2-pc: 30px;
  --font-size-h3-pc: 24px;
  --font-size-h4-pc: 20px;
  --font-size-h5-pc: 18px;
  --font-size-h6-pc: 18px;
  --font-size-body-pc: 16px;
  --font-size-sm-pc: 14px;
  --font-size-xs-pc: 13px;
  --font-size-h1-sp: 24px;
  --font-size-h2-sp: 22px;
  --font-size-h3-sp: 20px;
  --font-size-h4-sp: 18px;
  --font-size-h5-sp: 16px;
  --font-size-h6-sp: 16px;
  --font-size-body-sp: 14px;
  --font-size-sm-sp: 13px;
  --font-size-xs-sp: 12px;
  --space-0: 0;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --content-width: 1420px;
  --gutter-pc: 80px;
  --gutter-sp: 16px;
  --color-pure-black: #000000;
  --header-bg: #1a1a1a;
  --header-brand-bar-bg: #000000;
  --header-nav-bg: #333333;
  --header-top-height: 60px;
  --header-nav-height: 60px;
  --header-total-height: 120px;
  --series-unit: #0088BF;
  --series-gf: #10AA42;
  --series-snets: #8E5BAF;
  --series-az: #F2B705;
  --series-zf: #E84C3D;
  --series-medisus: #C59AD9;
  --series-logistics: #F28C00;
  --series-tools: #999999;
  --service-blue: #0088bf;
  --service-purple: #68487b;
  --service-pink: #be609a;
  --service-crimson: #c80e47;
  --service-orange: #f3981c;
  --service-yellow: #edb500;
  --service-lime: #a2c302;
  --radius: 4px;
  --radius-sm: 2px;
  --ratio-16-9: 16 / 9;
  --ratio-1-1: 1 / 1;
  --ratio-9-4: 9 / 4;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-total-height);
}
@media (max-width: 767px) {
  html {
    scroll-padding-top: var(--header-top-height);
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body-pc);
  line-height: var(--line-height-base);
  color: var(--color-black);
  background-color: var(--color-white);
  min-width: 1420px;
}
@media (max-width: 767px) {
  body {
    min-width: 0;
  }
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

input,
textarea,
select {
  font: inherit;
}

table {
  border-collapse: collapse;
}

@media (max-width: 767px) {
  body {
    min-width: 100%;
  }
}
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-heading);
  font-weight: bold;
  color: var(--color-black);
}

.page-title {
  font-size: var(--font-size-h1-pc);
  position: relative;
  padding-bottom: var(--space-16);
}

.page-title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
}

.page-title::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--heading-h1-accent-width);
  height: 2px;
  background-color: var(--heading-accent-color);
  z-index: 1;
}

.section-title {
  font-size: var(--font-size-h2-pc);
  position: relative;
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-32);
}

.section-title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--heading-accent-color);
}

.subsection-title {
  font-size: var(--font-size-h3-pc);
  color: var(--color-text-sub);
}

@media (max-width: 767px) {
  .page-title {
    font-size: var(--font-size-h1-sp); /* 36px（変わらず） */
  }
  .section-title {
    font-size: var(--font-size-h2-sp); /* 22px */
    margin-bottom: var(--space-24);
  }
  .subsection-title {
    font-size: var(--font-size-h3-sp); /* 20px */
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.u-hidden {
  display: none !important;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-text-left {
  text-align: left;
}

.grid-box {
  background-color: var(--color-bg-disable);
  padding: 30px;
}

/* SP専用改行（PC非表示・SP表示） */
.u-sp-br {
  display: none;
}

@media (max-width: 767px) {
  .u-sp-br {
    display: inline;
  }
}
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  min-height: var(--header-total-height);
}

@media (max-width: 767px) {
  .site-header {
    min-height: var(--header-top-height);
  }
}
.site-header__brand-bar {
  background-color: var(--header-brand-bar-bg);
  height: var(--header-top-height);
}

.site-header__brand-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.site-header__fa-logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  color: var(--color-white);
  flex-shrink: 0;
}

.site-header__fa-mark {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 36px;
}

.site-header__fa-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #cccccc;
}

.site-header__brand-divider {
  display: block;
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.site-header__sus-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  transition: opacity 0.3s;
}

.site-header__sus-link img:first-child {
  margin-right: 4px;
  width: 46px;
  height: 15px;
  max-width: unset;
}

.site-header__sus-link:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}

.site-header__sus-label {
  font-size: var(--font-size-xs-pc);
}

.site-header__util {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex-shrink: 0;
  height: 100%;
}

.site-header__account {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-header__account.logout .site-header__mypage,
.site-header__account.logout .site-header__logout {
  display: none;
}

.site-header__account.logout .site-header__login {
  display: flex;
}

.site-header__util-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-xs-pc);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: opacity 0.3s;
}

.site-header__util-item img {
  width: 18px;
  height: 15px;
  filter: brightness(0) invert(1);
}

.site-header__util-item:hover {
  opacity: 0.7;
}

.site-header__cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 12px;
  font-weight: normal;
  border-radius: 9999px;
  line-height: 1;
}

.site-header__mypage {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 140px;
  height: 32px;
  padding: 0 var(--space-12);
  font-size: var(--font-size-xs-pc);
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-blue);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: opacity 0.3s;
  justify-content: center;
}

.site-header__mypage:hover {
  opacity: 0.7;
}

.site-header__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100px;
  height: 32px;
  font-size: var(--font-size-xs-pc);
  color: #999999;
  background: none;
  border: 1px solid #999999;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.site-header__logout:hover {
  opacity: 0.7;
}

.site-header__login {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 140px;
  height: 32px;
  font-size: var(--font-size-xs-pc);
  color: var(--color-white);
  background: var(--color-red);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.site-header__login:hover {
  opacity: 0.7;
}

.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 48px;
  align-self: stretch;
  padding: var(--space-8);
  background: none;
  border: none;
  cursor: pointer;
}

.site-header__hamburger-bar {
  display: block;
  width: 100%;
  width: 23px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}

.globalnav {
  background-color: var(--header-nav-bg);
  height: var(--header-nav-height);
}

.globalnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter-pc);
}

.globalnav__list {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 32px;
}

.globalnav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.globalnav__link {
  display: flex;
  align-items: center;
  font-size: var(--font-size-body-pc);
  font-weight: normal;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: var(--space-4);
  transition: background-color 0.3s;
  border-bottom: 1px solid transparent;
}

.globalnav__link:hover,
.globalnav__btn:hover {
  border-bottom: 1px solid var(--color-red);
}

.globalnav__link.is-active,
.globalnav__btn.is-active {
  border-bottom: 1px solid var(--color-red);
}

.globalnav__btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-body-pc);
  font-weight: normal;
  color: var(--color-white);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding-bottom: var(--space-4);
  transition: background-color 0.3s;
  border-bottom: 1px solid transparent;
}

.globalnav__btn[aria-expanded=true] {
  border-bottom: 1px solid var(--color-red);
}

.globalnav__btn[aria-expanded=true] .globalnav__chevron {
  transform: rotate(-90deg);
}

.globalnav__chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transform: rotate(90deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.globalnav__dropdown {
  display: none;
  position: absolute;
  top: var(--header-nav-height);
  left: 0;
  width: 240px;
  background-color: #444;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 10;
}

.globalnav__dropdown.is-open {
  display: block;
}

.globalnav__dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.globalnav__dropdown-link {
  display: block;
  padding: var(--space-16);
  font-size: var(--font-size-sm-pc);
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid #333;
  transition: background-color 0.15s;
}

.globalnav__dropdown-link:hover {
  background-color: var(--color-text-sub);
}

.globalnav__dropdown-link--sub {
  padding-left: var(--space-32);
  color: #cccccc;
}

.globalnav__dropdown-list li:last-child .globalnav__dropdown-link {
  border-bottom: none;
}

.globalnav__sub-list {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.globalnav__sub-link {
  font-size: var(--font-size-xs-pc);
  color: #cccccc;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.globalnav__sub-link:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  header .inner {
    padding: 0 var(--space-8);
  }
  /* ブランドエリア: gap 縮小 */
  .site-header__brand {
    gap: var(--space-8);
  }
  .site-header__fa-logo {
    gap: var(--space-4);
  }
  .site-header__fa-mark {
    width: 31px;
    height: 28px;
  }
  /* FA説明文: 2行に折り返して表示（8px相当） */
  .site-header__fa-desc {
    white-space: normal;
    font-size: 8px;
    line-height: 1.5;
    max-width: clamp(60px, 100vw - 260px, 120px);
  }
  /* 縦区切り線: 表示維持 */
  .site-header__brand-divider {
    display: block;
  }
  /* SUSリンク: ロゴ画像のみ表示（会社概要テキスト・外部リンクアイコン非表示） */
  .site-header__sus-link {
    display: flex;
  }
  .site-header__sus-label {
    display: none;
  }
  /* SUSリンク内の外部リンクアイコン（最後のimg）を非表示 */
  .site-header__sus-link img:last-child {
    display: none;
  }
  .site-header__util {
    gap: 0;
  }
  .site-header__util-item {
    padding: 0;
  }
  /* お気に入り: SP非表示 */
  .site-header__util-item--favorite {
    display: none;
  }
  /* カート: SPでもアイコン+バッジのみ表示 */
  .site-header__util-item--cart {
    display: flex;
  }
  /* カートのテキストラベル非表示 */
  .site-header__util-label {
    display: none;
  }
  .site-header__mypage {
    display: none;
  }
  .site-header__logout {
    display: none;
  }
  .site-header__account.logout .site-header__login {
    display: none;
  }
  /* SUS-21: ハンバーガー: align-self:stretch でブランドバー高さいっぱいに。
     上下のネガティブマージンを廃止し右端のみ -16px で flush。 */
  .site-header__hamburger {
    display: flex;
    width: 60px;
    background-color: #333333;
    border-radius: 0;
    padding: 0;
    margin: 0 -8px 0 24px;
    align-self: stretch;
  }
  .globalnav {
    display: none;
  }
}
.site-footer {
  position: relative;
  background-color: var(--color-black);
  color: var(--color-white);
}

.site-footer__main {
  padding: var(--space-64) 0;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-48);
}

.site-footer__nav-right {
  display: contents;
}

.site-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.site-footer__nav-heading {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
  line-height: var(--line-height-base);
}

.site-footer__nav-heading--link {
  text-decoration: none;
  transition: opacity 0.15s;
}

.site-footer__nav-heading--link:hover {
  text-decoration: underline;
}

.site-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.site-footer__nav-link {
  font-size: var(--font-size-sm-pc);
  color: var(--color-on-dark-primary);
  text-decoration: none;
  line-height: var(--line-height-base);
  transition: color 0.15s;
}

.site-footer__nav-link:hover {
  text-decoration: underline;
}

.site-footer__nav-link--external {
  display: inline;
}

.site-footer__nav-sublist {
  list-style: none;
  padding: 0 0 0 var(--space-16);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.site-footer__nav-sublink {
  font-size: var(--font-size-xs-pc);
  color: var(--color-on-dark-secondary);
  text-decoration: none;
  line-height: var(--line-height-base);
  transition: color 0.15s;
}

.site-footer__nav-sublink:hover {
  text-decoration: underline;
}

.site-footer__ext-icon {
  display: inline-block;
  vertical-align: baseline;
  margin-left: var(--space-4);
  flex-shrink: 0;
}

.site-footer__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-32);
  margin-top: var(--space-48);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-shrink: 0;
}

.site-footer__fa-logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-footer__fa-text {
  font-size: 36px;
  font-weight: 300;
  color: var(--color-white);
  line-height: 1;
}

.site-footer__fa-desc {
  font-size: 12px;
  color: var(--color-on-dark-primary);
  margin: 0;
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.site-footer__fa-desc-br {
  display: none;
}

.site-footer__divider {
  display: block;
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.site-footer__sus-link {
  flex-shrink: 0;
  display: block;
  transition: opacity 0.3s;
}

.site-footer__sus-link:hover {
  opacity: 0.7;
}

.site-footer__sus-link img {
  display: block;
  width: 46px;
  height: 15px;
}

.site-footer__websus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-16) var(--space-12);
  background-color: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.site-footer__websus-banner:hover {
  opacity: 0.7;
}

.site-footer__websus-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__websus-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-black);
  margin: 0;
  white-space: nowrap;
}

.site-footer__websus-logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}

.site-footer__websus-sus {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-blue);
  line-height: 1;
}

.site-footer__websus-name {
  font-size: var(--font-size-h5-pc);
  font-weight: 900;
  color: var(--color-blue);
  line-height: 1.2;
}

.site-footer__websus-name small {
  display: block;
  font-size: var(--font-size-xs-pc);
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
}

.site-footer__websus-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-red);
}

.site-footer__websus-icon img {
  display: block;
  /* white SVG: brightness(0) → 黒に落としてから invert で白へ */
  filter: brightness(0) invert(1);
}

.site-footer__bottom {
  background-color: #000000;
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  height: 86px;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-32);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.site-footer__legal-link {
  display: inline;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-on-dark-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__legal-link:hover {
  text-decoration: underline;
}

.site-footer__copyright {
  text-align: right;
  flex-shrink: 0;
}

.site-footer__copyright-text {
  font-size: var(--font-size-sm-pc);
  color: var(--color-on-dark-muted);
  margin: 0;
  white-space: nowrap;
}

.site-footer__powered {
  font-size: var(--font-size-xs-pc);
  color: var(--color-on-dark-muted);
  margin: var(--space-4) 0 0;
  text-align: right;
}

.site-footer__powered strong {
  color: var(--color-on-dark-muted);
  font-weight: 700;
}

.site-footer__powered-logo {
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .site-footer__main {
    padding: var(--space-48) 0;
  }
  .site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32) var(--space-24);
    align-items: start;
  }
  .site-footer__nav-col:nth-child(1),
.site-footer__nav-col:nth-child(2) {
    grid-column: 1;
  }
  .site-footer__nav-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    grid-column: 2;
    grid-row: 1/3;
  }
  .site-footer__nav-heading {
    font-size: var(--font-size-body-sp);
  }
  .site-footer__nav-list {
    line-height: 1;
  }
  .site-footer__nav-link {
    font-size: var(--font-size-xs-pc);
    line-height: 1.2;
  }
  .site-footer__nav-sublink {
    font-size: var(--font-size-xs-sp);
  }
  .site-footer__foot {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-48);
    margin-top: 0px;
    padding-top: var(--space-48);
  }
  .site-footer__brand {
    width: 100%;
    justify-content: center;
  }
  .site-footer__fa-text {
    font-size: 36px;
  }
  .site-footer__fa-desc {
    font-size: 11px;
    white-space: normal;
  }
  .site-footer__fa-desc-br {
    display: inline;
  }
  .site-footer__websus-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    padding: var(--space-8) var(--space-16) var(--space-8);
  }
  .site-footer__websus-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    white-space: nowrap;
  }
  .site-footer__websus-logo {
    width: 150px;
  }
  .site-footer__websus-sus {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-blue);
    line-height: 1;
  }
  .site-footer__bottom .site-footer__bottom-inner {
    flex-direction: column;
    justify-content: center;
    height: auto;
    align-items: center;
    padding: var(--space-32) var(--space-16);
    gap: var(--space-48);
  }
  .site-footer__legal {
    width: 100%;
    gap: var(--space-24);
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
  }
  .site-footer__legal-link {
    font-size: var(--font-size-sm-sp);
  }
  .site-footer__copyright {
    width: 100%;
    text-align: center;
  }
  .site-footer__copyright-text {
    font-size: var(--font-size-xs-sp);
    white-space: normal;
  }
  .site-footer__powered {
    font-size: var(--font-size-xs-sp);
    text-align: left;
  }
  .site-footer__powered-logo {
    display: block;
    margin-inline: auto;
  }
}
.hamburger-menu {
  display: none;
  position: fixed;
  top: var(--header-top-height);
  left: 0;
  right: 0;
  height: calc(100dvh - var(--header-top-height));
  overflow-y: auto;
  z-index: 99;
  -webkit-overflow-scrolling: touch;
}

.hamburger-menu.is-open {
  display: block;
}

.hamburger-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-height: 100%;
  padding: var(--space-32) var(--space-24) var(--space-48);
  background-color: var(--color-black);
}

.hamburger-menu__nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 1px;
}

.hamburger-menu__nav a img {
  margin-left: var(--space-4);
  display: inline-block;
  vertical-align: baseline;
}

.hamburger-menu__nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-16) var(--space-8);
  font-size: var(--font-size-body-pc);
  color: var(--color-white);
  text-decoration: none;
  border-top: 1px solid var(--header-nav-bg);
  border-bottom: 1px solid var(--header-nav-bg);
  margin-bottom: -1px;
}

.hamburger-menu__nav-item {
  border-top: 1px solid var(--header-nav-bg);
  border-bottom: 1px solid var(--header-nav-bg);
  margin-bottom: -1px;
}

.hamburger-menu__nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-16) var(--space-8);
  font-size: var(--font-size-body-pc);
  color: var(--color-white);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.hamburger-menu__toggle-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color 0.3s, border-color 0.3s;
}

.hamburger-menu__toggle-icon.is-open {
  background-color: var(--color-text-sub);
  border-color: var(--color-text-sub);
}

.hamburger-menu__toggle-icon::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 1px;
  background-color: var(--color-white);
  border-radius: 1px;
}

.hamburger-menu__toggle-icon::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 9px;
  background-color: var(--color-white);
  border-radius: 1px;
  transition: opacity 0.3s;
}

.hamburger-menu__toggle-icon.is-open::after {
  opacity: 0;
}

.hamburger-menu__subnav {
  display: none;
  padding: 0 var(--space-8) var(--space-16);
}

.hamburger-menu__subnav.is-open {
  display: block;
}

.hamburger-menu__subnav-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  background-color: var(--header-nav-bg);
  border-radius: var(--radius);
}

.hamburger-menu__subnav-link {
  font-size: var(--font-size-xs-pc);
  color: var(--color-white);
  text-decoration: none;
  line-height: var(--line-height-base);
}

.hamburger-menu__subnav-link--sub {
  padding-left: var(--space-16);
  color: var(--color-on-dark-primary);
}

.hamburger-menu__btn-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-8);
  width: 100%;
}

.hamburger-menu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 48px;
  border-radius: var(--radius);
  font-size: var(--font-size-xs-pc);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: opacity 0.3s;
}

.hamburger-menu__btn:hover {
  opacity: 0.7;
}

.hamburger-menu__btn--favorite {
  background-color: var(--color-pure-black);
  width: calc(50% - var(--space-4));
}

.hamburger-menu__btn--favorite img {
  filter: brightness(0) invert(1);
}

.hamburger-menu__btn--cart {
  background-color: var(--color-pure-black);
  width: calc(50% - var(--space-4));
}

.hamburger-menu__btn--mypage {
  background-color: var(--color-blue);
  width: 100%;
}

.hamburger-menu__btn--logout {
  background-color: transparent;
  border: 1px solid var(--color-on-dark-secondary);
  color: var(--color-on-dark-secondary);
  width: 100%;
}

.hamburger-menu__btn--login {
  display: none;
  background-color: var(--color-red);
  width: 100%;
}

.logout .hamburger-menu__btn--mypage,
.logout .hamburger-menu__btn--logout {
  display: none;
}

.logout .hamburger-menu__btn--login {
  display: flex;
}

.hamburger-menu__cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-4);
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 12px;
  font-weight: normal;
  border-radius: 9999px;
  line-height: 1;
}

.hamburger-menu__sublink-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.hamburger-menu__sublink {
  font-size: var(--font-size-xs-pc);
  color: var(--color-on-dark-primary);
  text-decoration: none;
  line-height: var(--line-height-base);
}

.hamburger-menu__sublink img {
  margin-left: var(--space-4);
  display: inline-block;
  vertical-align: baseline;
}

.hamburger-menu__company-link {
  font-size: var(--font-size-xs-pc);
  color: var(--color-on-dark-secondary);
  text-decoration: none;
}

.hamburger-menu__company-link img {
  margin-left: var(--space-4);
  display: inline-block;
  vertical-align: baseline;
}

.site-header__hamburger.is-open .site-header__hamburger-bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  width: 30px;
}

.site-header__hamburger.is-open .site-header__hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-header__hamburger.is-open .site-header__hamburger-bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  width: 30px;
}

body.is-hamburger-open {
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter-pc);
}

.inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter-pc);
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--gutter-sp);
  }
  .inner {
    padding: 0 var(--gutter-sp);
  }
}
.c-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.c-arrow__icon {
  display: block;
  width: 13px;
  height: 7px;
  flex-shrink: 0;
}

.c-arrow--prev .c-arrow__icon {
  transform: scaleX(-1);
}

.c-arrow--light {
  color: #ffffff;
  opacity: 0.5;
}

.c-arrow--light:hover:not(:disabled) {
  opacity: 0.2;
}

.c-arrow--dark {
  color: var(--color-pure-black);
  opacity: 0.5;
}

.c-arrow--dark:hover:not(:disabled) {
  opacity: 0.2;
}

.c-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

@media (max-width: 767px) {
  .c-arrow {
    display: none;
  }
  .kv__arrow--prev,
.kv__arrow--next {
    display: flex;
    top: auto;
    bottom: 20px;
    transform: none;
  }
  .kv__arrow--prev {
    left: var(--space-16);
  }
  .kv__arrow--next {
    left: auto;
    right: var(--space-16);
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 0 var(--space-32);
  height: 52px;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
  white-space: nowrap;
  line-height: 1;
}

.btn:disabled {
  cursor: default;
  pointer-events: none;
}

.btn--primary {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
  transition: opacity 0.3s;
}

.btn--primary:hover {
  opacity: 0.7;
}

.btn--secondary {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.btn--secondary:hover {
  opacity: 0.7;
}

.btn--navy {
  background-color: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
  transition: opacity 0.3s;
}

.btn--navy:hover {
  opacity: 0.7;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
  transition: opacity 0.3s;
}

.btn--outline:hover {
  opacity: 0.7;
}

.btn--outline-red {
  background-color: transparent;
  color: var(--color-red);
  border-color: var(--color-red);
  transition: opacity 0.3s;
}

.btn--outline-red:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  opacity: 0.7;
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn--lg {
  height: 60px;
  padding: 0 var(--space-48);
  font-size: var(--font-size-h5-pc);
}

.btn--sm {
  height: 36px;
  padding: 0 var(--space-16);
  font-size: var(--font-size-sm-pc);
  font-weight: 400;
  border-radius: var(--radius-sm);
}

.btn--full {
  width: 100%;
}

@media (max-width: 767px) {
  .btn {
    font-size: var(--font-size-body-sp);
    height: 48px;
    padding: 0 var(--space-24);
  }
  .btn--lg {
    height: 52px;
    padding: 0 var(--space-32);
    font-size: var(--font-size-body-sp);
  }
  .btn--sm {
    height: 32px;
    font-size: var(--font-size-xs-sp);
  }
}
.prod-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-16) var(--space-16) var(--space-24);
  gap: var(--space-16);
  transition: box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.prod-card:hover .prod-card__img {
  opacity: 0.7;
}

.prod-card:hover .prod-card__name {
  text-decoration: underline;
  transition: opacity 0.3s;
}

.prod-card__img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: var(--color-bg-disable);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.prod-card__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s;
}

.prod-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.prod-card__date {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  margin: 0 0 4px 0;
  overflow-wrap: anywhere;
}

.prod-card__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.prod-card__name {
  flex: 1;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-base);
  margin: 0;
  overflow-wrap: anywhere;
}

.prod-card__chevron {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 10px;
  margin-top: 0.5em;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.prod-card__desc {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  line-height: var(--line-height-base);
  margin: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

.prod-card--bordered {
  border: 1px solid var(--color-border);
}

.prod-card__badge-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: auto;
}

.prod-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  padding: 1px var(--space-12);
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  min-width: 60px;
}

.prod-card__badge--blue {
  color: var(--series-unit);
}

.prod-card__badge--green {
  color: var(--series-gf);
}

.prod-card__badge--purple {
  color: var(--series-snets);
}

.prod-card__badge--yellow {
  color: var(--series-az);
}

.prod-card__badge--red {
  color: var(--series-zf);
}

.prod-card__badge--light-purple {
  color: var(--series-medisus);
}

.prod-card__badge--orange {
  color: var(--series-logistics);
}

.prod-card__badge--light-gray {
  color: var(--series-tools);
}

a.prod-card__badge {
  transition: opacity 0.3s;
}

a.prod-card__badge:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .prod-card {
    padding: var(--space-8) var(--space-8) var(--space-12);
    gap: var(--space-12);
  }
  .prod-card__top {
    gap: var(--space-4);
  }
  .prod-card__date {
    font-size: var(--font-size-xs-pc);
  }
  .prod-card__name {
    font-size: var(--font-size-body-sp);
  }
  .prod-card__desc {
    font-size: var(--font-size-xs-pc);
  }
  .prod-card__badge {
    font-size: var(--font-size-sm-sp);
    padding: 1px var(--space-8);
  }
}
/* オーバーレイ（fixed全画面） */
.js-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: var(--space-32);
  background: rgba(0, 0, 0, 0.7);
  overflow-y: auto;
}

.js-modal[hidden] {
  display: none;
}

/* body スクロール禁止 */
body.is-modal-open {
  overflow: hidden;
}

/* ============================================================
   比較詳細モーダル（.compare-modal）
   ============================================================ */
/* 内側コンテナ（margin:auto で上下中央寄せ） */
.compare-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: auto;
}

/* 閉じるボタン行 */
.compare-modal__close-wrap {
  display: flex;
  justify-content: flex-end;
}

/* 閉じるボタン（白い ×） */
.compare-modal__close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

/* × を構成する2本の白線 */
.compare-modal__close::before,
.compare-modal__close::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
}

.compare-modal__close::before {
  transform: rotate(45deg);
}

.compare-modal__close::after {
  transform: rotate(-45deg);
}

.compare-modal__close:hover {
  opacity: 0.7;
}

/* 白いカード */
.compare-modal__card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-16);
}

/* 画像（比較表） */
.compare-modal__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/*
 * モーダル内の動画ラッパー
 * iframe は position:absolute でフローから外れるため intrinsic size がゼロになり、
 * fit-content の親が幅ゼロに潰れる問題を回避するため幅を明示する。
 * clamp により 320px〜860px の範囲でビューポートに追従する。
 */
.compare-modal .ad-movie {
  margin: 0;
}

.compare-modal .ad-movie__wrap {
  width: clamp(320px, 80vw, 860px);
  max-width: calc(100vw - var(--space-64));
}

@media (max-width: 767px) {
  .js-modal {
    padding: var(--space-16);
  }
  .compare-modal__inner {
    width: 100%;
  }
  .compare-modal .ad-movie__wrap {
    width: 100%;
    max-width: 100%;
  }
}
/* ============================================================
   ログインモーダル（.login-modal）
   sus-id_mock_サンプル / login.html 完コピ
   モック固有クラスは .login-modal__body 内にスコープして移植
   ============================================================ */
/* 内側コンテナ（max-width 620px・margin:auto で中央寄せ） */
.login-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  max-width: 712px;
  margin: auto;
}

/* 閉じるボタン行 */
.login-modal__close-wrap {
  display: flex;
  justify-content: flex-end;
}

/* 閉じるボタン（白い ×）*/
.login-modal__close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.login-modal__close::before,
.login-modal__close::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
}

.login-modal__close::before {
  transform: rotate(45deg);
}

.login-modal__close::after {
  transform: rotate(-45deg);
}

.login-modal__close:hover {
  opacity: 0.7;
}

/* グレーカード（Figma: bg #F8F8F8） */
.login-modal__card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
}

/* カード内コンテンツ */
.login-modal__body {
  padding: var(--space-16);
}

/* ===== モック固有クラス（.login-modal__body 内にスコープ） ===== */
/* ページ用レイアウトクラスをモーダル内でリセット */
.login-modal__body .page-wrapper {
  max-width: none;
  padding: 32px 60px;
  background-color: var(--color-bg-disable);
}

.login-modal__body .page-title {
  margin-bottom: var(--space-24);
}

/* SUS-ID ログインタイトル（Figma: 40px bold） */
.login-modal__body .h1 {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.3;
  margin-bottom: var(--space-48);
}

.login-modal__body .content-area {
  padding-top: 0;
}

.login-modal__body .login-layout {
  display: block;
}

/* ログインセクション群（縦積み・48px 間隔） */
.login-modal__body .login-sections {
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

/* フォームセクション（見出し＋フォームを縦積み） */
.login-modal__body .form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* .form-body の gap をモーダルサイズに合わせる */
.login-modal__body .form-body {
  gap: var(--space-24);
}

/* h2 見出し（Figma: 30px） */
.login-modal__body .h2 {
  font-size: var(--font-size-h2-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.4;
}

/* h2--section: 赤い左ボーダー */
.login-modal__body .h2--section {
  border-left: 4px solid var(--color-red);
  padding-left: var(--space-24);
}

/* フィールドグループ（入力欄間 8px） */
.login-modal__body .login-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* テキスト入力 */
.login-modal__body .input {
  width: 100%;
  max-width: none;
  height: 48px;
  padding: 0 var(--space-12);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  transition: border-color 0.15s;
  box-sizing: border-box;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.login-modal__body .input::-moz-placeholder {
  color: var(--color-text-on-dark);
}

.login-modal__body .input::placeholder {
  color: var(--color-text-on-dark);
}

.login-modal__body .input:focus {
  outline: none;
  border-color: var(--color-black);
  box-shadow: none;
}

/* パスワード入力ラッパー（ボーダーをラッパー側に持つ） */
.login-modal__body .input-password {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

.login-modal__body .input-password:focus-within {
  border-color: var(--color-black);
  box-shadow: none;
}

/* ラッパー内の input（ボーダー・背景を除去） */
.login-modal__body .input-password .input {
  border: none;
  background: transparent;
  padding-right: 44px;
  flex: 1;
  min-width: 0;
  box-shadow: none;
}

.login-modal__body .input-password .input:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* パスワード表示切替ボタン（eye アイコン）*/
.login-modal__body .input-password__toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  transition: opacity 0.3s;
}

.login-modal__body .input-password__toggle:hover {
  opacity: 0.7;
}

.login-modal__body .input-password__toggle img {
  display: block;
  width: 18px;
  height: 16px;
}

/* エラーメッセージ */
.login-modal__body .input-error-msg {
  display: block;
  font-size: var(--font-size-xs-pc);
  color: var(--color-red);
  line-height: 1.4;
}

.login-modal__body .input-error-msg .text-link {
  color: var(--color-red);
}

.login-modal__body .input-error-msg .login-modal__ext-icon {
  filter: brightness(0);
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.login-modal__body .input-error-msg[hidden] {
  display: none;
}

/* 本文テキスト */
.login-modal__body .text-body {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.75;
}

.login-modal__body .text-body img {
  display: inline-block;
  vertical-align: middle;
}

/* テキストリンク */
.login-modal__body .text-link {
  color: var(--color-blue);
  text-decoration: underline;
  transition: opacity 0.3s;
}

.login-modal__body .text-link:hover {
  opacity: 0.7;
}

/* パスワードお忘れ行（flex で テキスト＋リンク＋アイコン を横並び） */
.login-modal__forgot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* 外部リンクアイコン（inline-block で縦中央揃え） */
/* 元 SVG は white。brightness(0) invert(13%) で約 #212 ≒ --color-black (#222) に変換 */
.login-modal__ext-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  filter: brightness(0) invert(13%);
}

/* ボタン内の外部リンクアイコン → 白に変換 */
.login-modal__body .btn .login-modal__ext-icon {
  filter: brightness(0) invert(1);
}

/* 新規登録ボタン（アイコン付き flex ボタン） */
.login-modal__register-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* モーダル内ボタン高さ上書き（Figma: 48px） */
.login-modal__body .btn {
  height: 48px;
}

/* 新規登録ボタン色（Figma: #0035AD）*/
.login-modal__body .btn--secondary {
  background-color: #0035AD;
  border-color: #0035AD;
}

.login-modal__body .btn--secondary:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .login-modal__inner {
    width: 100%;
  }
  .login-modal__body .page-wrapper {
    padding: var(--space-16);
  }
  .login-modal__body .h1 {
    font-size: var(--font-size-h2-pc);
    margin-bottom: var(--space-32);
  }
  .login-modal__body .h2 {
    font-size: var(--font-size-h2-sp);
  }
  .login-modal__body .h2--section {
    padding-left: var(--space-16);
  }
  .login-modal__body .login-sections {
    gap: var(--space-32);
  }
  .login-modal__body .text-body {
    font-size: var(--font-size-body-sp);
  }
  .login-modal__body .input-error-msg {
    font-size: var(--font-size-sm-sp);
  }
}
/* ============================================================
   アンケートモーダル（.survey-modal）
   Figma PC: 4620-68455
   ============================================================ */
/* 内側コンテナ（max-width 712px・margin:auto で中央寄せ） */
.survey-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  max-width: 712px;
  margin: auto;
}

/* 閉じるボタン行 */
.survey-modal__close-wrap {
  display: flex;
  justify-content: flex-end;
}

/* 閉じるボタン（白い ×） */
.survey-modal__close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.survey-modal__close::before,
.survey-modal__close::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
}

.survey-modal__close::before {
  transform: rotate(45deg);
}

.survey-modal__close::after {
  transform: rotate(-45deg);
}

.survey-modal__close:hover {
  opacity: 0.7;
}

/* 白いカード */
.survey-modal__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-16);
}

/* 見出し */
.survey-modal__title {
  font-size: var(--font-size-h2-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
  padding-bottom: var(--space-12);
  position: relative;
}

/* 赤アクセントライン */
.survey-modal__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--color-red);
}

/* 説明文 */
.survey-modal__desc {
  font-size: var(--font-size-body-pc);
  line-height: 1.75;
  color: var(--color-black);
}

/* ボタンセット */
.survey-modal__btn-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* アンケートボタン（青枠線） */
.survey-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 48px;
  width: 320px;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  color: var(--color-blue);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  text-decoration: none;
}

.survey-modal__btn:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

.survey-modal__btn img {
  filter: brightness(0) invert(13%);
}

.survey-modal__btn:hover img {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .survey-modal__inner {
    width: 100%;
  }
  .survey-modal__card {
    gap: var(--space-24);
  }
  .survey-modal__title {
    font-size: var(--font-size-h2-sp);
  }
  .survey-modal__desc {
    font-size: var(--font-size-body-sp);
  }
  .survey-modal__btn {
    max-width: 280px;
    width: 100%;
    font-size: var(--font-size-sm-sp);
    margin: 0 auto;
  }
}
.pagination {
  display: flex;
  justify-content: center;
  padding: var(--space-48) 0 var(--space-96);
}

.pagination__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-8);
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  text-decoration: none;
  outline: 1px solid var(--color-border);
  background-color: var(--color-white);
  position: relative;
  z-index: 0;
}

.pagination__btn:hover {
  color: var(--color-blue);
  outline-color: var(--color-blue);
  z-index: 1;
}

.pagination__btn:hover::before {
  background-color: var(--color-blue);
}

.pagination__btn.is-active {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
  pointer-events: none;
}

.pagination__btn--prev {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.pagination__btn--next {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pagination__btn--prev::before,
.pagination__btn--next::before {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.pagination__btn--prev::before {
  transform: scaleX(-1);
}

.pagination__btn[aria-disabled=true] {
  background-color: var(--color-bg-disable);
  color: var(--color-text-on-dark);
  pointer-events: none;
}

.pagination__btn[aria-disabled=true]::before {
  background-color: var(--color-text-on-dark);
}

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 42px;
  font-size: var(--font-size-sm-pc);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .pagination {
    padding: var(--space-32) 0 var(--space-48);
  }
  .pagination__btn {
    font-size: var(--font-size-sm-sp);
    min-width: 40px;
    height: 40px;
  }
  .pagination__ellipsis {
    width: 40px;
    height: 42px;
  }
}
.breadcrumb {
  padding: var(--space-12) 0 var(--space-16);
  background: var(--color-bg-disable);
}

.breadcrumb--sp {
  display: none;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
  transform: rotate(45deg);
  margin: 0 var(--space-8);
  flex-shrink: 0;
  font-size: 0; /* テキスト文字「›」を非表示 */
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.breadcrumb__link {
  font-size: var(--font-size-xs-pc);
  text-decoration: underline;
  line-height: var(--line-height-base);
  color: var(--color-text-sub);
  transition: opacity 0.3s;
}

.breadcrumb__link:hover {
  opacity: 0.7;
}

.breadcrumb__current {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-sub);
  line-height: var(--line-height-base);
}

@media (max-width: 767px) {
  .breadcrumb--pc {
    display: none;
  }
  .breadcrumb--sp {
    display: block;
  }
  /* SP は上下 16px（Figma指定） */
  .breadcrumb {
    padding: var(--space-16) 0;
  }
  .breadcrumb__list {
    gap: var(--space-4) 0; /* 行間4px: 折り返し時に読みやすく */
  }
  .breadcrumb__link {
    font-size: var(--font-size-xs-sp); /* 11px */
  }
  .breadcrumb__current {
    font-size: var(--font-size-sm-sp);
  }
}
.search-result {
  margin-top: var(--space-48);
}

.search-result__title {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-text-sub);
  margin-bottom: var(--space-24);
}

/* ---- 0件時の代替リンクセット ---- */
.search-result--empty .search-result__title {
  margin-bottom: var(--space-24);
}

.search-result__link-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.search-result__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-blue);
  font-size: var(--font-size-body-pc);
  line-height: 1.5;
}

.search-result__link:hover {
  text-decoration: underline;
}

.search-result__link-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
  mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
}

@media (max-width: 767px) {
  .search-result--empty .search-result__title {
    margin-bottom: var(--space-16);
  }
  .search-result__link {
    font-size: var(--font-size-body-sp);
  }
}
/* ---- ツールバー ---- */
.search-result__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  height: 40px;
  margin-bottom: var(--space-16);
}

.search-result__toolbar--bottom {
  margin-top: var(--space-16);
  margin-bottom: 0;
  justify-content: flex-end;
}

.search-result__toolbar-left {
  display: flex;
  align-items: center;
}

.search-result__sort-label {
  display: inline-flex;
  align-items: center;
}

.search-result__sort {
  width: 280px;
  height: 40px;
  padding: 0 var(--space-40) 0 var(--space-16);
  background: var(--color-white) url("../images/icon_chevron-down.svg") no-repeat right var(--space-16) center/12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.search-result__sort:focus {
  outline: none;
  border-color: var(--color-black); /* #222222 */
}

.search-result__toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.search-result__toggle-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-right: var(--space-16);
  border-right: 1px solid var(--color-border);
}

.search-result__toggle-label {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
}

.search-result__toggle {
  display: flex;
  overflow: hidden;
  background: var(--color-white);
  gap: var(--space-4);
}

.search-result__toggle-btn {
  min-width: 39px;
  height: 28px;
  padding: 0 var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs-pc);
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.search-result__toggle-btn.is-active {
  background: var(--color-white);
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

.search-result__toggle-btn:hover:not(.is-active):not(:disabled) {
  background: var(--color-white);
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

.search-result__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--space-16);
  font-size: var(--font-size-sm-pc);
  font-weight: 400;
}

/* ---- テーブル ---- */
.search-result__table {
  /* PC: CSS Grid table */
  --col-product: 1fr;
  --col-fixed: 100px;
}

.search-result__thead {
  display: grid;
  grid-template-columns: var(--col-product) var(--col-fixed) repeat(6, var(--col-fixed));
  background: var(--color-bg-disable);
  border: 1px solid var(--color-border);
  border-bottom: none;
}

.search-result__th,
.search-result__th-cad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-8);
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  text-align: center;
  border-left: 1px solid var(--color-border);
  gap: var(--space-4);
}

.search-result__th--product {
  border-left: 0;
  align-items: center;
  justify-content: center;
  padding-left: var(--space-16);
}

.search-result__th-cad {
  grid-column: span 6;
  padding: 0;
  gap: 0;
}

.search-result__th-cad-title {
  width: 100%;
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm-pc);
  text-align: center;
}

.search-result__th-cad-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.search-result__th-cad-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-4);
  font-size: var(--font-size-sm-pc);
  min-height: 0;
  height: auto;
  min-width: 0;
  overflow: hidden;
}

.search-result__th-cad-cell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}

.search-result__th-cad-cell:first-child::before {
  display: none;
}

.search-result__th-text {
  display: block;
  color: var(--color-black);
  overflow-wrap: anywhere;
  max-width: 100%;
  line-height: 1.4;
}

.search-result__th-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  font-size: 10px;
  color: var(--color-blue);
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

.search-result__th-check span {
  display: block;
  max-width: 100%;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .search-result__thead {
    height: auto;
  }
  .search-result__th-cad {
    height: auto;
  }
  .search-result__th-cad-row {
    height: auto;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }
  .search-result__th-cad-cell {
    height: auto;
    min-height: 0;
    align-self: stretch;
    justify-content: center;
    overflow: hidden;
  }
  .search-result__th-check {
    white-space: normal;
  }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .search-result__thead {
    height: auto;
  }
  .search-result__th-cad {
    height: auto;
  }
  .search-result__th-cad-row {
    height: auto;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }
  .search-result__th-cad-cell {
    height: auto;
    min-height: 0;
    align-self: stretch;
    justify-content: center;
    overflow: hidden;
  }
}
.search-result__th-text--catalog {
  padding-top: 38px;
}

.search-result__th-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  font-size: 10px;
  color: var(--color-blue);
  cursor: pointer;
  white-space: nowrap;
}

/* ---- 行 ---- */
.search-result__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-top: 0;
}

.search-result__row {
  display: grid;
  grid-template-columns: var(--col-product) var(--col-fixed) repeat(6, var(--col-fixed));
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
}

.search-result__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  border-left: 1px solid var(--color-border);
}

.search-result__cell--product {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-24);
  justify-content: flex-start;
  padding: var(--space-16);
  border-left: 0;
}

.search-result__thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  transition: opacity 0.3s;
}

.search-result__thumb:hover {
  opacity: 0.7;
}

.search-result__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.search-result__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search-result__discontinued-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0 var(--space-8);
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-muted);
  font-size: var(--font-size-xs-pc);
  border-radius: var(--radius-sm);
}

.search-result__sku {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
}

.search-result__name {
  display: block;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  transition: opacity 0.3s;
}

.search-result__name label {
  cursor: pointer;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.search-result__name:hover {
  opacity: 0.7;
}

.search-result__chevron {
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: var(--space-4);
  vertical-align: -1px;
  background-color: #E6001B;
  -webkit-mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
  mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
}

/* qty spinner */
.search-result__purchase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-12);
}

.search-result__qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.search-result__qty-label {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
}

.search-result__qty-spinner {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}

.search-result__qty-btn {
  width: 28px;
  height: 28px;
  background: var(--color-white);
  border: 0;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  cursor: pointer;
}

.search-result__qty-btn:disabled {
  background: var(--color-bg-disable);
  color: var(--color-text-on-dark);
  cursor: not-allowed;
}

.search-result__qty-btn:hover:not(:disabled) {
  opacity: 0.7;
}

.search-result__qty-input {
  width: 40px;
  height: 28px;
  padding: 0 var(--space-4);
  border: 0;
  font-size: var(--font-size-sm-pc);
  text-align: center;
  background: var(--color-white);
}

.search-result__qty-input:disabled {
  background: var(--color-bg-disable);
  color: var(--color-text-on-dark);
}

/* actions */
.search-result__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.search-result__cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 28px;
  padding: 0 var(--space-16);
  background: var(--color-red);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.3s;
}

.search-result__cart-btn:hover {
  opacity: 0.7;
}

.search-result__cart-btn--disabled,
.search-result__cart-btn:disabled {
  background: var(--color-on-dark-secondary);
  color: var(--color-white);
  cursor: not-allowed;
}

.search-result__cart-btn--disabled:hover,
.search-result__cart-btn:disabled:hover {
  opacity: 1;
}

.search-result__fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-width: 120px;
  height: 28px;
  padding: 0 var(--space-12);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-xs-pc);
  color: var(--color-blue);
  cursor: pointer;
  transition: opacity 0.3s;
}

.search-result__fav-btn.is-active {
  background: var(--color-bg-disable);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.search-result__fav-btn:hover {
  opacity: 0.7;
}

.search-result__fav-btn.is-active img {
  filter: grayscale(1) brightness(1.4) opacity(0.7);
}

/* PDFダウンロードボタン（SP専用、PCではPDFチェック列で代替） */
.search-result__pdf-btn {
  display: none;
}

/* 販売終了行: グレーアウト
   Figma node: 1230-82328 */
.search-result__row--discontinued .search-result__sku,
.search-result__row--discontinued .search-result__qty-label {
  color: var(--color-text-muted); /* #777 */
}

.search-result__row--discontinued .search-result__qty-spinner {
  background: var(--color-bg-disable);
}

/* check cells (catalog + 6 cad) */
.search-result__cell--check {
  flex-direction: column;
  gap: var(--space-8);
  text-align: center;
}

.search-result__file-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 28px;
  padding: 0 var(--space-4);
  background: var(--color-bg-disable);
  border-radius: var(--radius);
  font-size: var(--font-size-xs-pc);
  color: var(--color-blue);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.search-result__file-text:hover {
  opacity: 0.7;
}

.search-result__file-text small {
  font-size: 10px;
  font-weight: 400;
}

/* グレーアウト（CADデータ非提供） */
.search-result__cell--check.is-disabled .search-result__file-text {
  color: var(--color-on-dark-muted); /* #aaa */
  pointer-events: none; /* クリック・ダウンロード無効化 */
  cursor: not-allowed;
}

.search-result__file-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* カスタムチェックボックス */
.search-result__check {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-result__check:checked {
  background: var(--color-white);
}

.search-result__check:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid var(--color-blue);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.search-result__check:disabled {
  background: var(--color-bg-disable);
  border-color: var(--color-border);
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .search-result {
    margin-top: var(--space-32);
  }
  .search-result__title {
    font-size: var(--font-size-h3-sp);
    margin-bottom: var(--space-16);
  }
  /* ツールバー */
  .search-result__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    height: auto;
  }
  .search-result__toolbar-left {
    width: 100%;
  }
  .search-result__sort {
    width: 170px;
    height: 40px;
    padding: 0 var(--space-32) 0 var(--space-12);
    background-position: right var(--space-12) center;
    font-size: var(--font-size-sm-sp);
  }
  .search-result__toolbar-right {
    flex-wrap: wrap;
    gap: var(--space-8);
    justify-content: flex-start;
  }
  .search-result__toggle-group {
    padding-right: 0;
    border-right: 0;
    gap: var(--space-4);
  }
  .search-result__toggle-label {
    font-size: var(--font-size-xs-sp);
  }
  .search-result__toggle {
    gap: var(--space-4);
  }
  .search-result__toggle-btn {
    min-width: 0;
    height: 28px;
    padding: 0 var(--space-8);
    font-size: var(--font-size-sm-sp);
  }
  .search-result__download {
    display: none;
  }
  /* テーブルヘッダー・CADチェックセルは SP では非表示 */
  .search-result__thead {
    display: none;
  }
  .search-result__cell--check {
    display: none;
  }
  /* リスト → カードスタック */
  .search-result__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    border: 0;
  }
  .search-result__row {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-16);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
  /* 製品セル */
  .search-result__cell--product {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
    border: 0;
    padding: 0;
  }
  .search-result__thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }
  .search-result__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .search-result__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
  }
  .search-result__sku {
    font-size: var(--font-size-body-sp);
    color: var(--color-text-muted);
  }
  .search-result__name {
    font-size: var(--font-size-body-pc);
    font-weight: 700;
  }
  .search-result__chevron {
    background-color: #E6001B;
  }
  /* 個数+アクション 縦積み */
  .search-result__purchase-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    margin-top: var(--space-16);
  }
  .search-result__qty {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 0 0 auto;
  }
  .search-result__qty-label {
    font-size: var(--font-size-xs-sp);
    color: var(--color-text-muted);
  }
  .search-result__qty-spinner {
    width: 100px;
    height: 28px;
    justify-content: space-between;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .search-result__qty-btn,
.search-result__qty-input {
    height: 28px;
    font-size: var(--font-size-body-sp);
  }
  .search-result__qty-input {
    width: 24px;
  }
  /* ボタン行 */
  .search-result__actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    flex-wrap: nowrap;
  }
  .search-result__cart-btn {
    width: 120px;
    height: 28px;
    padding: 0 var(--space-8);
    font-size: var(--font-size-body-sp);
    border-radius: var(--radius);
  }
  .search-result__fav-btn {
    width: 56px;
    min-width: auto;
    height: 28px;
    padding: 0;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
  .search-result__fav-text {
    display: none;
  }
  .search-result__pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 28px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .search-result__pdf-btn img {
    width: 14px;
    height: 14px;
  }
  .search-result__cart-btn,
.search-result__fav-btn,
.search-result__pdf-btn {
    flex-shrink: 1;
    min-width: 0;
  }
  .search-result__cart-btn {
    white-space: nowrap;
  }
  /* 販売終了行 (Figma 1728-30061) */
  .search-result__row--discontinued .search-result__discontinued-badge {
    margin-bottom: var(--space-8);
    font-size: var(--font-size-xs-sp);
  }
  .search-result__row--discontinued .search-result__qty-spinner {
    background: var(--color-bg-disable);
  }
  .search-result__row--discontinued .search-result__cart-btn,
.search-result__row--discontinued .search-result__cart-btn--disabled {
    flex-shrink: 1;
    width: 120px;
    background: var(--color-on-dark-secondary);
    color: var(--color-white);
  }
  .search-result__row--discontinued .search-result__fav-btn {
    background: var(--color-bg-disable);
    border-color: var(--color-border);
  }
}
.kv {
  position: relative;
  overflow: hidden;
  width: 100%;
  --kv-slide-w: 1260px;
}

.kv__track {
  display: flex;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(calc((var(--kv-vw, 100vw) - var(--kv-slide-w)) / 2 - var(--kv-index, 0) * var(--kv-slide-w)));
}

.kv__slide {
  flex-shrink: 0;
  width: var(--kv-slide-w);
  position: relative;
}

.kv__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.8);
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 1;
}

.kv__slide.is-active::after {
  opacity: 0;
}

.kv__slide-picture {
  display: block;
  width: 100%;
}

.kv__slide-picture img {
  display: block;
  width: 100%;
  height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 768px) {
  .kv__arrow--prev {
    left: calc((var(--kv-vw, 100vw) - var(--kv-slide-w)) / 2 - var(--space-24) - 32px);
  }
  .kv__arrow--next {
    left: calc((var(--kv-vw, 100vw) - var(--kv-slide-w)) / 2 + var(--kv-slide-w) + var(--space-24));
  }
}
.kv__pagination {
  position: absolute;
  bottom: 24px;
  right: max(var(--space-24), (var(--kv-vw, 100vw) - var(--kv-slide-w)) / 2 + var(--space-24));
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.kv__dot {
  width: 40px;
  height: 2px;
  background-color: var(--color-white);
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 4px 0;
  transition: background-color 0.3s;
}

.kv__dot.is-active {
  background-color: var(--color-red);
}

.kv__pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 var(--space-12);
  color: var(--color-white);
  transition: opacity 0.3s;
}

.kv__pause svg {
  display: block;
  width: 10px;
  height: 10px;
}

.kv__pause:hover {
  opacity: 0.7;
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-16);
  gap: var(--space-16);
}

.sec-head__title {
  font-size: var(--font-size-h2-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-heading);
}

.sec-head__title::after {
  content: "";
  display: block;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--color-red);
  margin-top: var(--space-8);
}

.more-link.more-link--sp-news,
.more-link.more-link--sp-articles,
.more-link.more-link--sp-new-products,
.more-link.more-link--sp-category,
.more-link.more-link--sp-recommended {
  display: none;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-blue);
  font-size: var(--font-size-body-pc);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.more-link:hover {
  opacity: 0.7;
}

.more-link--on-dark {
  color: var(--color-white);
}

.more-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-blue);
  border-radius: 50%;
  color: var(--color-white);
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.more-link__icon img {
  width: 6px;
  height: 10px;
}

.news-bar {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(248, 248, 248, 0.3);
}

.news-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.news-bar__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  width: 138px;
  color: var(--color-red);
  font-size: var(--font-size-body-pc);
  font-weight: 700;
}

.news-bar__title img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.news-bar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.news-bar__item {
  font-size: var(--font-size-body-pc);
}

.news-bar__link {
  display: block;
  position: relative;
  padding-left: var(--space-12);
  text-decoration: none;
  color: var(--color-black);
}

.news-bar__link img {
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  filter: brightness(0) invert(13%);
  display: inline-block;
  margin-left: var(--space-4);
}

.news-bar__link:hover .news-bar__text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-bar__dot {
  position: absolute;
  display: block;
  flex-shrink: 0;
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-on-dark-primary);
}

.news-bar__text {
  display: inline;
  flex: 1;
}

.search-section {
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
}

.search-section::before {
  content: "";
  position: absolute;
  top: -155px;
  right: -74px;
  width: 410px;
  height: 410px;
  background: url("../images/icon_search-deco.svg") center/contain no-repeat;
  pointer-events: none;
  opacity: 0.03;
}

.search-section__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-64) 0 var(--space-32);
}

.search-section__title {
  font-size: var(--font-size-h2-pc);
  font-weight: 700;
  color: var(--color-black);
}

.search-section__title::after {
  content: "";
  display: block;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--heading-accent-color);
  margin-top: var(--space-8);
}

/* SP用ラベルはPC非表示 */
.search-section__anchor-label--sp {
  display: none;
}

.search-section__anchor-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.search-section__anchor-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius);
  color: var(--color-blue);
  font-size: var(--font-size-sm-pc);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s;
  background: var(--color-bg-disable);
}

.search-section__anchor-link img {
  width: 11px;
  height: 6px;
  transform: rotate(90deg);
  filter: brightness(0) invert(43%) sepia(67%) saturate(683%) hue-rotate(158deg) brightness(95%) contrast(101%);
}

.search-section__anchor-link:hover {
  opacity: 0.7;
}

.kw-search {
  display: flex;
  border-radius: var(--radius);
  /* overflow: hidden を外してサジェストが外にはみ出せるようにする */
  /* 角丸は子要素側で個別に設定 */
}

.kw-search__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-32);
  height: 96px;
  padding: var(--space-24);
  background-color: var(--color-blue);
  border-radius: var(--radius) 0 0 var(--radius);
  margin-bottom: var(--space-48);
}

.kw-search__form {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex: 1;
}

.kw-search__label-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.kw-search__label {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-white);
  white-space: nowrap;
}

.kw-search__tooltip-wrap {
  position: relative;
}

.kw-search__info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.kw-search__info-btn img {
  width: 16px;
  height: 16px;
}

.kw-search__info-btn:hover {
  color: var(--color-white);
}

.kw-search__tooltip {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 244px;
  background-color: var(--color-white);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius);
  padding: var(--space-16);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.22);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-blue);
  line-height: var(--line-height-base);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
}

.kw-search__tooltip p {
  margin: 0;
}

.kw-search__tooltip::before,
.kw-search__tooltip::after {
  content: none;
}

.kw-search__tooltip-wrap::after {
  content: "";
  position: absolute;
  /* ボタンの真上、tooltip との隙間（10px）の中央付近に配置 */
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 14px;
  /* 白塗り + 左右の辺のみ青枠（上辺は描かずツールチップ枠と自然につなぐ） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16' viewBox='0 0 19 16'%3E%3Cpath d='M0.4 0 L18.6 0 L10.8 14.3 C10.1 15.6 8.9 15.6 8.2 14.3 Z' fill='white'/%3E%3Cpath d='M0.4 0 L8.2 14.3 C8.9 15.6 10.1 15.6 10.8 14.3 L18.6 0' fill='none' stroke='%230088BF' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  /* tooltip と同じ表示制御（hover/focus でフェードイン） */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
  z-index: 50;
}

.kw-search__tooltip-wrap:hover .kw-search__tooltip,
.kw-search__tooltip-wrap:focus-within .kw-search__tooltip,
.kw-search__tooltip-wrap:hover::after,
.kw-search__tooltip-wrap:focus-within::after {
  visibility: visible;
  opacity: 1;
}

.kw-search__form {
  display: flex;
}

.kw-search__input-group {
  display: flex;
}

.kw-search__input-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
}

.kw-search__suggest {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  padding: 0 var(--space-8);
  margin: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: var(--radius);
}

.kw-search__suggest-item {
  padding: var(--space-8) 0;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.kw-search__suggest-item:last-child {
  border-bottom: none;
}

/* キーボードフォーカス中のアイテム */
.kw-search__suggest-item.is-active {
  background-color: var(--color-bg-disable);
}

.kw-search__input {
  width: 331px;
  height: 48px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-white);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  background-color: var(--color-white);
  outline: none;
  border-radius: var(--space-4) 0 0 var(--space-4);
}

.kw-search__input:focus {
  border-color: var(--color-black);
}

.kw-search__input::-moz-placeholder {
  color: var(--color-text-on-dark);
}

.kw-search__input::placeholder {
  color: var(--color-text-on-dark);
}

.kw-search__submit {
  flex-shrink: 0;
  width: 100px;
  height: 48px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  font-size: var(--font-size-body-pc);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s;
  border-radius: 0 var(--space-4) var(--space-4) 0;
}

.kw-search__submit:hover {
  background-color: var(--color-text-sub);
}

.kw-search__options {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-shrink: 0;
}

.kw-search__radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  cursor: pointer;
  white-space: nowrap;
}

.kw-search__radio input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.kw-search__radio span {
  color: var(--color-white);
}

/* チェック時: 内側に青い丸 */
.kw-search__radio input[type=radio]:checked::after {
  content: "";
  display: block;
  position: absolute;
  inset: 3px;
  background-color: var(--color-blue);
  border-radius: 50%;
}

.kw-search__multi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-shrink: 0;
  width: 240px;
  height: 96px;
  padding: var(--space-24);
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  text-decoration: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.kw-search__multi img {
  width: 6px;
  height: 10px;
  flex-shrink: 0;
}

.kw-search__multi:hover {
  opacity: 0.7;
}

.grid-container {
  background: var(--color-bg-disable);
  padding: var(--space-32);
  border-top: 1px solid var(--color-border);
}

.cat-search .sec-head h3,
.usage-search .sec-head h3,
.series-search .sec-head h3 {
  font-size: var(--font-size-h3-pc);
  color: #555555;
  font-weight: 700;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-16);
  list-style: none;
  margin: 0;
}

.cat-grid__item {
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid transparent;
}

.cat-grid__item.is-active {
  border-color: #222222;
}

.cat-grid__link {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  transition: opacity 0.3s;
}

.cat-grid__link:hover .cat-grid__name {
  text-decoration: underline;
}

.cat-grid__thumb {
  flex-shrink: 0;
  display: block;
  width: 72px;
  height: 72px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
  transition: opacity 0.3s;
}

.cat-grid__name {
  flex: 1;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
  max-width: 148px;
  overflow-wrap: anywhere;
}

.cat-grid__expand-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  padding: 0;
  margin-left: var(--space-8);
  transition: background-color 0.15s;
}

.cat-grid__expand-btn.is-active {
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
}

.cat-grid__expand-btn.is-active .cat-grid__expand-icon::before,
.cat-grid__expand-btn.is-active .cat-grid__expand-icon::after {
  background-color: var(--color-white);
}

.cat-grid__expand-btn.is-active .cat-grid__expand-icon::after {
  display: none;
}

.cat-grid__expand-icon {
  position: relative;
  display: block;
  width: 9px;
  height: 9px;
}

.cat-grid__expand-icon::before,
.cat-grid__expand-icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-blue);
  border-radius: 1px;
}

.cat-grid__expand-icon::before {
  width: 9px;
  height: 1px;
  top: 4px;
  left: 0;
}

.cat-grid__expand-icon::after {
  width: 1px;
  height: 9px;
  top: 0;
  left: 4px;
}

.cat-menu {
  grid-column: 1/-1;
  position: relative;
  margin-top: 12px;
  margin-bottom: 8px;
}

.cat-menu__arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 18px solid #999999;
  border-top: none;
  pointer-events: none;
}

.cat-menu__inner {
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
}

.cat-menu__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 136px;
  background-color: #777777;
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  text-align: center;
}

.cat-menu__list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-16);
  padding: var(--space-16) var(--space-24);
  background-color: #999999;
  list-style: none;
  margin: 0;
}

.cat-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 100%;
  padding: var(--space-8);
  background-color: var(--color-white);
  border-radius: var(--radius);
  text-decoration: none;
}

.cat-menu__link:hover .cat-menu__name {
  text-decoration: underline;
}

.cat-grid__link:hover .cat-grid__thumb {
  opacity: 0.7;
}

.cat-menu__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-sm);
  transition: opacity 0.3s;
}

.cat-menu__link:hover .cat-menu__thumb {
  opacity: 0.7;
}

.cat-menu__name {
  flex: 1;
  font-size: var(--font-size-sm-sp);
  color: var(--color-black);
  line-height: var(--line-height-heading);
}

.cat-menu__chevron {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 10px;
  background-color: var(--color-red);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.usage-search {
  padding: var(--space-48) 0 0 0;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-16);
  list-style: none;
  margin: 0;
  align-items: stretch;
}

.usage-grid--subcats {
  border-top: none;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.usage-grid--subcats .usage-grid__item {
  padding: var(--space-8) var(--space-12);
}

.usage-grid--subcats .usage-grid__icon {
  width: 64px;
  height: 64px;
}

.usage-grid--subcats .usage-grid__icon img {
  width: 64px;
  height: 64px;
}

.usage-grid--subcats .usage-grid__item {
  gap: var(--space-8);
}

.usage-grid--subcats .usage-grid__name {
  padding-left: 8px;
}

.usage-grid > li {
  display: flex;
}

.usage-grid__item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  height: 100%;
  width: 100%;
}

.usage-grid__item:hover .usage-grid__name {
  text-decoration: underline;
}

.usage-grid__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transition: opacity 0.3s;
}

.usage-grid__item:hover .usage-grid__icon {
  opacity: 0.7;
}

.usage-grid__icon img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
}

.usage-grid__name {
  flex: 1;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.usage-grid__chevron {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 10px;
  background-color: var(--color-red);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.series-search {
  padding: var(--space-48) 0 var(--space-80) 0;
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-16);
  list-style: none;
  margin: 0;
  align-items: stretch;
}

.series-grid li {
  display: contents;
}

.series-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  background: var(--color-white);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.series-grid__item:hover .series-grid__thumb img {
  opacity: 0.7;
}

.series-grid__item:hover .series-grid__name {
  text-decoration: underline;
}

.series-grid__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.series-grid__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s;
}

.series-grid__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.series-grid__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.series-grid__name {
  flex: 1;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-base);
  margin: 0;
  overflow-wrap: anywhere;
}

.series-grid__chevron {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 10px;
  margin-top: 4px;
  background-color: var(--color-red);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.series-grid__desc {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-sub);
  line-height: var(--line-height-base);
  margin: 0;
  overflow-wrap: anywhere;
}

.prod-section {
  position: relative;
  padding: var(--space-80) 0;
  background: var(--color-bg-disable);
}

.prod-section--dark {
  background-color: #2a2a2a;
}

.prod-section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.prod-section .sec-head {
  margin-bottom: var(--space-32);
}

.prod-section .sec-head__title::after {
  content: "";
  display: block;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--color-red);
  margin-top: var(--space-8);
}

.prod-section--dark .sec-head__title {
  color: var(--color-white);
}

.prod-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.prod-slider__arrow--prev {
  left: calc(-1 * var(--space-24) - 32px);
}

.prod-slider__arrow--next {
  right: calc(-1 * var(--space-24) - 32px);
}

.prod-section--dark .c-arrow {
  opacity: 0.5;
}

.prod-section--dark .c-arrow:hover:not(:disabled) {
  opacity: 0.2;
}

.prod-section--dark .c-arrow:disabled {
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0.2;
}

.prod-slider__viewport {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.prod-slider__viewport-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-32);
}

.prod-slider__viewport-title {
  font-size: var(--font-size-h2-pc);
  font-weight: 700;
  color: var(--color-white);
}

.prod-slider__viewport-title::after {
  content: "";
  display: block;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--color-red);
  margin-top: var(--space-8);
}

.prod-slider__track {
  display: flex;
  gap: var(--space-24);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prod-slider__item {
  flex: 0 0 calc(25% - 18px);
  min-width: 0;
}

.prod-section__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}

.prod-section--dark .inner {
  position: relative;
  z-index: 2;
}

.news-section {
  padding: var(--space-80) 0;
  background: var(--color-bg-disable);
}

.news-section .sec-head__title::after {
  content: "";
  display: block;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--color-red);
  margin-top: var(--space-8);
}

.news-filter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

.news-filter__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.news-filter__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 100px;
  padding: 0 var(--space-16);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.news-filter__tab:hover {
  border-color: var(--color-blue);
}

.news-filter__tab.is-active {
  color: var(--color-white);
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.news-list__item {
  border-radius: var(--radius);
  overflow: hidden;
}

.news-list__item[hidden] {
  display: none;
}

.news-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-20) var(--space-24);
  background-color: var(--color-white);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.news-list__link:hover .news-list__text {
  text-decoration: underline;
  transition: opacity 0.3s;
}

.news-list__meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.news-list__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.news-list__date {
  flex-shrink: 0;
  width: 120px;
  white-space: nowrap;
  font-size: var(--font-size-body-pc);
  color: var(--color-text-sub);
  line-height: 1.5;
}

.news-list__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 120px;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  line-height: 1.5;
}

.news-list__text {
  flex: 1;
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.news-list__chevron {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 10px;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  margin-left: auto;
}

.article-section {
  padding: var(--space-80) 0;
  background-color: var(--color-white);
}

.article-section .sec-head__title::after {
  content: "";
  display: block;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--color-red);
  margin-top: var(--space-8);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-48) var(--space-24);
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.article-card:hover .article-card__title {
  text-decoration: underline;
}

.article-card:hover .article-card__img {
  opacity: 0.7;
}

.article-card__img-wrap {
  width: 100%;
  aspect-ratio: 9/4;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.article-card__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-12);
}

.article-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.article-card__title {
  flex: 1;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-base);
  margin: 0;
  overflow-wrap: anywhere;
}

.article-card__chevron {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 10px;
  margin-top: 0.5em;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.article-card__desc {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  line-height: var(--line-height-base);
  margin: 0;
  overflow-wrap: anywhere;
}

.prod-card__badge-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-8);
}

.prod-card__badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  padding: 0 var(--space-8);
  font-size: var(--font-size-xs-pc);
  border-radius: var(--radius-sm);
}

.prod-card__badge--blue {
  color: var(--series-unit);
}

.prod-card__badge--green {
  color: var(--series-gf);
}

.prod-card__badge--purple {
  color: var(--series-snets);
}

.prod-card__badge--yellow {
  color: var(--series-az);
}

.prod-card__badge--red {
  color: var(--series-zf);
}

.prod-card__badge--light-purple {
  color: var(--series-medisus);
}

.prod-card__badge--orange {
  color: var(--series-logistics);
}

.prod-card__badge--light-gray {
  color: var(--series-tools);
}

.websus-section {
  position: relative;
  height: 256px;
  background-color: #222;
}

.websus-section__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.websus-section__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(34, 34, 34, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter-pc);
}

.websus-section__card {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: var(--space-24);
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-red);
  border-radius: 8px;
  max-width: 800px;
  width: 100%;
  height: 128px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.websus-section__card:hover {
  opacity: 0.7;
}

.websus-section__label {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  flex-shrink: 0;
  margin: 0;
  max-width: 440px;
}

.websus-section__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
  margin: 0;
}

.websus-section__logo-sus {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-blue);
  letter-spacing: -1px;
}

.websus-section__logo-name {
  font-size: var(--font-size-h3-pc);
  font-weight: 900;
  color: var(--color-blue);
  line-height: 1.2;
}

.websus-section__logo-name small {
  display: block;
  font-size: var(--font-size-xs-pc);
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
}

.websus-section__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-red);
}

.websus-section__icon img {
  width: 13px;
  height: 11px;
  /* white SVG: brightness(0) → 黒に落としてから invert で白へ */
  filter: brightness(0) invert(1);
}

.guide-section {
  padding: var(--space-64) 0;
  background-color: var(--color-bg-disable);
}

.guide-section__heading {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-32);
}

.guide-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}

.guide-grid li {
  display: flex;
  align-items: stretch;
}

.guide-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background-color: var(--color-white);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.guide-card:hover .guide-card__thumb-wrap {
  opacity: 0.7;
}

.guide-card:hover .guide-card__name {
  text-decoration: underline;
}

.guide-card__thumb-wrap {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: var(--radius);
  overflow: hidden;
  transition: opacity 0.3s;
}

.guide-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.guide-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius);
  transition: opacity 0.3s;
}

.guide-card:hover .guide-card__icon {
  opacity: 0.7;
}

.guide-card__icon img {
  width: 40px;
  height: auto;
}

.guide-card__body {
  flex: 1;
  min-width: 0;
}

.guide-card__name {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0;
  overflow-wrap: anywhere;
}

.guide-card__name .sp-br {
  display: none;
}

.guide-card__sub {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
  overflow-wrap: anywhere;
}

.guide-card__chevron {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 10px;
  margin-left: auto;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.guide-card__ext {
  flex-shrink: 0;
  display: block;
  width: 13px;
  height: 11px;
  margin-left: auto;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_external-link.svg");
          mask-image: url("../images/icon_external-link.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.page-top {
  position: fixed;
  bottom: var(--space-32);
  right: var(--space-32);
  width: 64px;
  height: 64px;
  background-color: var(--color-blue);
  border-radius: 50%;
  border: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, background-color 0.3s;
}

.page-top img {
  width: 12px;
  height: 19px;
}

.page-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.page-top:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .kv {
    --kv-slide-w: 100vw;
  }
  .kv__slide-picture img {
    height: auto;
    -o-object-position: top;
       object-position: top;
  }
  .kv__pagination {
    left: calc(var(--space-16) + 32px + var(--space-24));
    right: calc(var(--space-16) + 32px + var(--space-24));
    bottom: 31px;
    justify-content: center;
  }
  .kv__dot {
    width: 28px;
    margin: 4px 0;
  }
  .sec-head {
    margin-bottom: var(--space-16);
  }
  .sec-head__title {
    font-size: var(--font-size-h2-sp);
  }
  .more-link {
    font-size: var(--font-size-body-sp);
  }
  .more-link__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .more-link__icon img {
    width: 6px;
    height: 10px;
  }
  .sec-head .more-link {
    display: none;
  }
  .news-filter .more-link {
    display: none;
  }
  .prod-slider__viewport-head .more-link {
    display: none;
  }
  .more-link.more-link--sp-news,
.more-link.more-link--sp-articles,
.more-link.more-link--sp-new-products,
.more-link.more-link--sp-category,
.more-link.more-link--sp-recommended {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
  }
  .cat-search {
    padding: var(--space-32) 0 0 0;
  }
  .cat-search > .more-link:not(.more-link--sp-category) {
    display: none;
  }
  .news-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .news-bar__title {
    width: auto;
    font-size: var(--font-size-body-sp);
  }
  .news-bar__item {
    font-size: var(--font-size-body-sp);
  }
  .search-section::before {
    width: 211px;
    height: 211px;
    top: -120px;
    right: -33px;
  }
  .search-section__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-48) 0 var(--space-24);
  }
  .search-section__title {
    font-size: var(--font-size-h2-sp);
  }
  /* アンカーリンク: SP は左揃え */
  .search-section__anchor-links {
    width: 100%;
    justify-content: flex-start;
  }
  .search-section__anchor-link {
    padding: var(--space-8) var(--space-24);
  }
  .search-section__anchor-label--pc {
    display: none;
  }
  .search-section__anchor-label--sp {
    display: inline;
  }
  .kw-search {
    flex-direction: column;
  }
  .kw-search__main {
    flex-direction: column;
    height: auto;
    gap: var(--space-12);
    padding: var(--space-16);
    align-items: flex-start;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
  }
  .kw-search__form-group {
    width: 100%;
  }
  .kw-search__form {
    flex-direction: column;
    flex: unset;
    width: 100%;
    align-items: flex-start;
    gap: var(--space-16);
  }
  .kw-search__input-group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100%;
  }
  .kw-search__label {
    font-size: 14px;
  }
  .kw-search__tooltip {
    left: 50%;
    right: auto;
    transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px)));
    width: var(--tooltip-width, calc(100vw - 20px));
    max-width: calc(100vw - var(--space-96));
  }
  .kw-search__input {
    flex: 1;
    height: 48px;
    padding: var(--space-12);
    width: 100%;
  }
  .kw-search__input::-moz-placeholder {
    font-size: var(--font-size-body-sp);
  }
  .kw-search__input::placeholder {
    font-size: var(--font-size-body-sp);
  }
  .kw-search__submit {
    width: auto;
    padding: 8px 18px 8px 18px;
    font-size: var(--font-size-body-sp);
  }
  .kw-search__options {
    gap: var(--space-16);
  }
  .kw-search__radio {
    font-size: var(--font-size-sm-sp);
    gap: var(--space-8);
  }
  .kw-search__multi {
    width: 100%;
    height: 52px;
    border-radius: 0 0 var(--radius) var(--radius);
    justify-content: center;
    font-size: var(--font-size-sm-sp);
  }
  .grid-container {
    padding: var(--space-16);
  }
  .cat-search .sec-head h3,
.usage-search .sec-head h3,
.series-search .sec-head h3 {
    font-size: var(--font-size-h3-sp);
  }
  .cat-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-16);
  }
  .cat-grid__item {
    padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
  }
  .cat-grid__link {
    gap: var(--space-16);
  }
  .cat-grid__thumb {
    width: 48px;
    height: 48px;
  }
  .cat-grid__name {
    font-size: var(--font-size-sm-sp);
    max-width: none;
  }
  .cat-menu {
    margin-top: var(--space-12);
  }
  .cat-menu__inner {
    flex-direction: column;
  }
  .cat-menu__label {
    width: 100%;
    min-height: auto;
    padding: var(--space-8);
    justify-content: flex-start;
    font-size: var(--font-size-xs-sp);
    text-align: left;
  }
  .cat-menu__arrow {
    border-left-width: 11px;
    border-right-width: 11px;
    border-bottom: 12px solid #777777;
  }
  .cat-menu__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-8);
  }
  .cat-menu__link {
    border-radius: var(--radius-sm);
  }
  .cat-menu__thumb {
    width: 24px;
    height: 24px;
  }
  .cat-menu__name {
    font-size: var(--font-size-xs-sp);
  }
  .usage-search {
    padding: var(--space-32) 0 0 0;
  }
  .usage-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-4);
  }
  .usage-grid--subcats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    padding-bottom: var(--space-16);
  }
  .usage-grid__item {
    padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
    gap: var(--space-16);
    height: auto;
  }
  .usage-grid__icon {
    width: 48px;
    height: 48px;
  }
  .usage-grid__icon img {
    width: 48px;
    height: 48px;
  }
  .usage-grid--subcats .usage-grid__item {
    padding: var(--space-8);
    gap: var(--space-8);
  }
  .usage-grid--subcats .usage-grid__icon {
    width: 32px;
    height: 32px;
  }
  .usage-grid--subcats .usage-grid__icon img {
    width: 32px;
    height: 32px;
  }
  .usage-grid--subcats .usage-grid__name {
    padding-left: 0;
  }
  .usage-grid__name {
    font-size: var(--font-size-sm-sp);
  }
  .series-search {
    padding: var(--space-32) 0 var(--space-48) 0;
  }
  .series-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .series-grid__name {
    font-size: var(--font-size-sm-sp);
  }
  .series-grid__desc {
    font-size: 12px;
    display: block;
  }
  .prod-section {
    padding: var(--space-48) 0;
  }
  .prod-section .sec-head {
    margin-bottom: var(--space-24);
  }
  .prod-slider {
    gap: var(--space-8);
  }
  .prod-slider__track {
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter-sp));
    margin-left: calc(-1 * var(--gutter-sp));
  }
  .prod-slider__viewport {
    margin-bottom: var(--space-16);
    overflow: visible;
  }
  .prod-slider__viewport::-webkit-scrollbar {
    display: none;
  }
  .prod-slider__viewport-head {
    margin-bottom: var(--space-24);
  }
  .prod-slider__viewport-title {
    font-size: 22px;
  }
  .prod-slider__item {
    flex: 0 0 calc(50% - 23px);
    scroll-snap-align: start;
    padding-left: var(--space-12);
  }
  .prod-slider__item:last-child {
    padding-right: var(--gutter-sp);
    flex: 0 0 calc(50% - 23px + 16px);
  }
  .news-section {
    padding: var(--space-48) 0;
  }
  .news-filter {
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
  }
  .news-filter__tab {
    font-size: var(--font-size-sm-sp);
    min-width: 0;
    padding: var(--space-8) var(--space-16);
  }
  .news-list__link {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
  }
  .news-list__meta {
    gap: var(--space-8);
  }
  .news-list__main {
    flex: none;
    gap: var(--space-8);
  }
  .news-list__date {
    white-space: nowrap;
    font-size: var(--font-size-body-sp);
    width: auto;
  }
  .news-list__badge {
    font-size: var(--font-size-xs-sp);
    min-width: 104px;
    height: 22px;
  }
  .news-list__text {
    font-size: var(--font-size-body-sp);
  }
  .news-list__chevron {
    display: flex;
  }
  .news-list {
    margin-bottom: var(--space-16);
  }
  .article-section {
    padding: var(--space-48) 0;
    background-color: var(--color-white);
  }
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24) var(--space-16);
    margin-bottom: var(--space-16);
  }
  .article-card__body {
    padding-top: var(--space-8);
  }
  .article-card__title {
    font-size: var(--font-size-body-sp);
  }
  .article-card__desc {
    font-size: var(--font-size-sm-sp);
  }
  .prod-card__badge {
    font-size: var(--font-size-xs-sp);
  }
  .prod-card__badge-set {
    padding-top: 0;
  }
  .websus-section {
    height: auto;
    min-height: 180px;
  }
  .websus-section__overlay {
    padding: var(--space-48) var(--space-32);
  }
  .websus-section__card {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    padding: var(--space-24) var(--space-16);
    gap: var(--space-12) var(--space-8);
  }
  .websus-section__label {
    font-size: var(--font-size-sm-sp);
    white-space: normal;
    flex-basis: 100%;
    text-align: center;
    max-width: none;
  }
  .websus-section__icon {
    flex-shrink: 0;
    margin-left: 0;
    width: 28px;
    height: 28px;
  }
  .websus-section__icon img {
    width: 13px;
    height: 11px;
  }
  .websus-section__logo {
    width: 181px;
  }
  .guide-section {
    padding: var(--space-32) 0;
  }
  .guide-section__heading {
    padding-bottom: var(--space-4);
    font-size: var(--font-size-h5-sp);
  }
  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    margin: 0 0 var(--space-24);
  }
  .guide-grid--2col {
    margin-bottom: 0;
  }
  .guide-grid > li:nth-child(-n+6) {
    grid-column: 1/-1;
  }
  .guide-card {
    gap: var(--space-8);
    padding: var(--space-12) var(--space-8);
  }
  .guide-card__thumb-wrap {
    width: 40px;
    height: 40px;
  }
  .guide-card__icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-bg-disable);
    border-radius: 2px;
  }
  .guide-card__icon img {
    width: 24px;
  }
  .guide-card__name {
    font-size: var(--font-size-sm-sp);
  }
  .guide-card__name .sp-br {
    display: inline;
  }
  .guide-card__sub {
    font-size: var(--font-size-xs-sp);
    margin: 0;
  }
  .page-top {
    width: 48px;
    height: 48px;
    bottom: var(--space-16);
    right: var(--space-16);
  }
}
/* ===============================
  Sticky Filter Section (PC/SP)
=============================== */
.filter-sticky-wrap {
  position: relative;
  z-index: 20;
}

@media (min-width: 768px) {
  .filter-sticky-wrap.is-sticky {
    position: fixed;
    top: var(--header-total-height, 120px);
    left: 0;
    width: 100%;
    min-width: 1420px;
    background: var(--color-bg-disable);
    border-bottom: 2px solid var(--color-text-sub);
    z-index: 90;
  }
  .filter-sticky-wrap.is-sticky .filter-section {
    border-top: none;
    box-shadow: none;
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .filter-sticky-wrap.is-sticky {
    position: fixed;
    top: var(--header-top-height, 60px);
    left: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 80;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    background: white;
    -webkit-animation: filter-sticky-fadein 0.3s;
            animation: filter-sticky-fadein 0.3s;
  }
}
@-webkit-keyframes filter-sticky-fadein {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes filter-sticky-fadein {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* SP: フィルターパネルオープン中はヘッダーを非表示・パネルを最上部から表示 */
@media (max-width: 767px) {
  body.is-filter-open [data-partial=header] {
    display: none;
  }
  body.is-filter-open .filter-sticky-wrap.is-sticky {
    top: 0;
  }
  /* floating-head はオープン時不要（パネルが全画面を覆うため） */
  body.is-filter-open .filter-sticky-wrap.is-sticky .filter-section__floating-head {
    display: none;
  }
  /* パネルをヘッダーなし全画面に上書き */
  body.is-filter-open .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section__panel {
    top: 0;
    height: 100dvh;
  }
}
/* SP専用パネルヘッダー（タイトル + 全選択解除）: デフォルト非表示 */
.filter-section__sp-panel-head {
  display: none;
}

/* SP sticky OPEN 時のみ表示 */
@media (max-width: 767px) {
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section__sp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    flex-shrink: 0;
    padding: var(--space-24) var(--space-16) var(--space-16);
  }
  .filter-section__sp-panel-title {
    font-size: var(--font-size-h5-pc);
    font-weight: bold;
    color: var(--color-black);
  }
  /* パネル内の解除ボタンを小さめに */
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section__sp-panel-head .filter-section__reset {
    font-size: var(--font-size-xs-pc);
    height: 28px;
    min-width: auto;
    padding: 0 var(--space-12);
  }
}
/* フローティングヘッダー（PC sticky CLOSE時のみ表示） */
.filter-section__floating-head {
  display: none;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) 0;
}

@media (min-width: 768px) {
  /* sticky かつ CLOSE 時: wrapper に背景・ボーダー、floating-head を表示 */
  .filter-sticky-wrap.is-sticky.is-closed {
    background: var(--color-bg-disable);
    border-bottom: 2px solid var(--color-text-sub);
    box-shadow: none;
  }
  .filter-sticky-wrap.is-sticky.is-closed .filter-section {
    padding: 0;
  }
  .filter-sticky-wrap.is-sticky.is-closed .filter-section__floating-head {
    display: flex;
  }
  /* sticky CLOSE 時は通常ヘッダーを非表示 */
  .filter-sticky-wrap.is-sticky.is-closed .filter-section__head {
    display: none;
  }
}
/* ラベル */
.filter-section__floating-label {
  font-size: var(--font-size-h4-pc);
  font-weight: bold;
  color: var(--color-black);
  white-space: nowrap;
}

/* ラベルとステータスのグループ */
.filter-section__floating-info {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* 選択件数テキスト（未選択: グレー、選択あり: 青） */
.filter-section__floating-status {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.filter-section__floating-status.is-active {
  color: var(--color-blue);
}

/* 条件を選択ボタン（青塗りつぶし） */
.filter-section__floating-open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 32px;
  padding: 0 var(--space-16);
  background: var(--color-blue);
  color: #fff;
  border: none;
  font-size: var(--font-size-sm-pc);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s;
}

/* 条件を選択ボタン内スライダーアイコン */
.filter-section__floating-icon {
  display: inline-block;
  width: 14px;
  height: 12px;
  background-color: #fff;
  -webkit-mask-image: url("../images/icon_sliders.svg");
  mask-image: url("../images/icon_sliders.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
}

.filter-section__floating-open:hover {
  opacity: 0.7;
}

/* パネル本体（開閉アニメーション） */
.filter-section__panel {
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
}

/* sticky化の瞬間だけアニメーションをスキップ（JSで付与→即削除） */
.filter-sticky-wrap.is-no-transition .filter-section__panel {
  transition: none;
}

.filter-sticky-wrap.is-closed .filter-section__panel {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* パネルフッター（sticky OPEN時のみ表示） */
.filter-section__panel-footer {
  display: none;
}

/* sticky かつ OPEN（is-closedでない）時: パネル下端の下にタブとして突き出す */
.filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section__panel-footer {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 1;
}

/* 閉じるボタン（Figmaデザイン: グレー背景・白テキスト・下側のみ角丸） */
.filter-section__close-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--space-16);
  background: var(--color-text-sub); /* #555 */
  color: #fff;
  border: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.filter-section__close-btn:hover {
  opacity: 0.7;
}

/* 閉じるアイコン: 白い横線（9px × 1px） */
.filter-section__close-icon {
  display: inline-block;
  width: 9px;
  height: 1px;
  background: #fff;
  flex-shrink: 0;
}

/* 開くボタン（floating外の open-btn は非使用） */
.filter-section__open-btn {
  display: none;
}

/* 状態表示（選択数など） */
.filter-section__status {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  margin-left: var(--space-16);
}

/* sticky時はパネルの影を消す（border-bottomで境界を表現） */
.filter-sticky-wrap.is-sticky .filter-section__panel {
  box-shadow: none;
}

/* --- 既存の .filter-section との余白調整 --- */
.filter-sticky-wrap.is-sticky .filter-section {
  margin-bottom: 0;
}

/* --- SP: sticky時は上部余白を詰める --- */
@media (max-width: 767px) {
  .filter-sticky-wrap.is-sticky .filter-section {
    padding-top: 0;
  }
}
/* ============================================================
   カテゴリ一覧 — 概要エリア（.cat-head）
   ============================================================ */
/* セクション全体 */
.cat-head {
  padding: 0 0 var(--space-48);
  background: var(--color-white);
}

/* ---- 動画/画像+テキスト 行 ---- */
.cat-head__overview {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  margin-bottom: var(--space-32);
}

/* 動画コンテナ（16:9 固定幅） */
.cat-head__video-wrap {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  flex-shrink: 0;
  width: 480px;
  aspect-ratio: var(--ratio-16-9);
  border-radius: var(--radius);
  gap: var(--space-24);
}

.cat-head__video-wrap iframe {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
}

/* 画像/動画コンテナ（パターン②用） */
.cat-head__img-wrap {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  flex-shrink: 0;
  width: 480px;
  border-radius: var(--radius);
  gap: var(--space-24);
}

.cat-head__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

.cat-head__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
  display: block;
}

/* テキストエリア */
.cat-head__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

/* テキストのみパターン③ 用: 全幅 */
.cat-head__text--full {
  width: 100%;
}

/* 説明文グループ */
.cat-head__descs {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  flex: 1;
}

.cat-head__desc {
  font-size: var(--font-size-body-pc);
  line-height: var(--line-height-body);
  color: var(--color-black);
}

/* 検索リンクボタン */
.cat-head__search-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 48px;
  background: var(--color-bg-disable);
  color: var(--color-blue);
  font-size: var(--font-size-sm-pc);
  font-weight: normal;
  border-radius: var(--radius);
  text-decoration: none;
  transition: opacity 0.3s;
  width: 100%;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

.cat-head__search-link:hover {
  opacity: 0.7;
}

/* アイコンは white SVG → blue に変換 */
.cat-head__search-link img {
  filter: brightness(0) invert(43%) sepia(67%) saturate(683%) hue-rotate(158deg) brightness(95%) contrast(101%);
}

/* ---- サブカテゴリリスト ---- */
.cat-head__subcats-title {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-16);
}

.cat-head__subcat-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
}

.cat-head__subcat-item {
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 80px;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.3s;
}

.cat-head__subcat-item:hover .cat-head__subcat-name {
  text-decoration: underline;
}

.cat-head__subcat-item:hover .cat-head__subcat-thumb {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.cat-head__subcat-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

.cat-head__subcat-name {
  flex: 1;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  min-width: 0;
  word-break: break-all;
  padding-left: var(--space-16);
  padding-right: var(--space-8);
}

.cat-head__subcat-chevron {
  display: block;
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  background-color: var(--color-red);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* ---- おすすめ記事 ---- */
.cat-head__articles {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
}

.cat-head__articles-title {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-16);
}

/* ---- おすすめ記事スライダー ---- */
/* 矢印アンカーコンテナ（prod-slider と同構造: flex + align-items:center） */
.cat-head__article-slider {
  position: relative;
  display: flex;
  align-items: center;
}

/* スライドビューポート（overflow隠し） */
.cat-head__article-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* スライドトラック */
.cat-head__article-track {
  display: flex;
  gap: var(--space-24);
  list-style: none;
  padding: 0;
  margin: 0;
  transition: transform 0.3s ease;
}

/* 各スライドアイテム: 常に4枚表示 */
.cat-head__article-item {
  flex: 0 0 calc((100% - var(--space-24) * 3) / 4);
}

/* 前ボタン位置 */
.cat-head__article-arrow--prev {
  left: calc(-1 * var(--space-24) - 32px);
  top: 74px;
}

/* 次ボタン位置 */
.cat-head__article-arrow--next {
  right: calc(-1 * var(--space-24) - 32px);
  top: 74px;
}

/* カード余白調整 */
.cat-head__article-item .article-card__body {
  padding-top: var(--space-8);
}

.cat-head__article-item .prod-card__badge-set {
  padding-top: 0;
}

/* ---- 大項目チェックアイテム: 選択済み状態（:has()使用） ---- */
/* チェックが入ったアイテム全体を青背景に */
.filter-block__check-item:has(.filter-block__checkbox:checked) {
  background: var(--color-blue);
  border-color: var(--color-blue);
}

.filter-block__check-item:has(.filter-block__checkbox:checked) .filter-block__item-name {
  color: var(--color-white);
}

.filter-block__check-item:has(.filter-block__checkbox:checked) .filter-block__item-count {
  color: var(--color-white);
}

/* ---- 小項目（filter-sub）横スクロールカラム群 ---- */
/* 横スクロールコンテナ: デフォルト非表示。JS で .is-visible を付与して表示 */
.filter-sub {
  display: none;
  width: 100%;
  overflow-x: auto;
  padding-bottom: var(--space-8);
}

.filter-sub.is-visible {
  display: block;
}

/* カスタム横スクロールバー */
.filter-sub::-webkit-scrollbar {
  height: 14px;
}

.filter-sub::-webkit-scrollbar-track {
  background: #fafafa;
  border: 1px solid #e8e8e8;
}

.filter-sub::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 30px;
}

/* カラムをflexで横並び（折り返しなし） */
.filter-sub__inner {
  display: flex;
  gap: var(--space-8);
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

/* 個別カラム */
.filter-sub__col {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* カラムヘッダー */
.filter-sub__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: var(--space-4) var(--space-8);
  background: #f1f1f1; /* Figma指定値: --color-bg-disable より少し濃いグレー */
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  flex-shrink: 0;
}

.filter-sub__col-title {
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-text-sub);
}

/* ヘッダー内「× 解除」ボタン */
.filter-sub__col-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 20px;
  width: 48px;
  background: var(--color-white);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-sm);
  color: var(--color-blue);
  font-size: 11px; /* Figma指定値: 変数なし */
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

.filter-sub__col-reset:hover {
  opacity: 0.7;
}

/* カラムボディ（スクロール可能リスト） */
.filter-sub__col-body {
  height: 168px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* カスタム縦スクロールバー */
.filter-sub__col-body::-webkit-scrollbar {
  width: 6px;
}

.filter-sub__col-body::-webkit-scrollbar-track {
  background: #fafafa;
  border-left: 1px solid #e8e8e8;
}

.filter-sub__col-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

/* テキストアイテム */
.filter-sub__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 28px;
  padding: 0 var(--space-8);
  background: var(--color-white);
  border: none;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s;
  word-break: break-word;
  min-width: 0;
}

.filter-sub__item:hover:not(:disabled):not(.is-active) {
  color: var(--color-blue);
}

/* 選択済み */
.filter-sub__item.is-active {
  background: var(--color-blue);
  color: var(--color-white);
}

/* 無効（0件） */
.filter-sub__item.is-disabled,
.filter-sub__item:disabled {
  color: var(--color-text-on-dark);
  cursor: default;
  display: none;
}

/* 画像付きアイテム */
.filter-sub__item--icon {
  height: auto;
  min-height: 44px;
  padding: var(--space-4) var(--space-8);
  gap: var(--space-8);
}

.filter-sub__item-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 画像付きアイテム: 無効時はアイコンにも opacity */
.filter-sub__item--icon.is-disabled .filter-sub__item-icon {
  opacity: 0.4;
}

/* SP専用: PCでは非表示 */
.filter-sub__toggle-icon,
.filter-sub__count-badge {
  display: none;
}

/* ---- 製品一覧セクション見出し ---- */
.cat-products {
  background: var(--color-white);
}

/* 見出し内側: 下余白でフィルターと分ける */
.cat-products__heading {
  padding-bottom: 0;
}

/* ---- 条件で絞り込みセクション ---- */
.filter-section {
  position: relative; /* 閉じるボタン（absolute）のアンカー */
  background: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  padding: var(--space-24) 0 var(--space-16);
}

/* ヘッダー行: タイトル + 解除ボタン */
.filter-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
}

.filter-section__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
}

/* 全選択を解除ボタン */
.filter-section__reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 32px;
  min-width: 180px;
  padding: 0 var(--space-12);
  background: var(--color-white);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  color: var(--color-blue);
  font-size: var(--font-size-sm-pc);
  cursor: pointer;
  transition: opacity 0.3s;
}

.filter-section__reset:hover {
  opacity: 0.7;
}

/* ---- 絞り込みブロック ---- */
/* ラベル+チェックエリアの横並び */
.filter-block {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--space-16);
}

/* 左: カテゴリラベル（固定幅グレー） */
.filter-block__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 184px; /* Figma指定値 */
  padding: var(--space-8);
  background: #999999; /* フィルターラベル用グレー。変数なし */
  border-radius: var(--radius) 0 0 var(--radius);
}

.filter-block__label-text {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  line-height: var(--line-height-base);
}

/* 右: チェックエリア（白背景） */
.filter-block__check-area {
  flex: 1;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-12) var(--space-16);
}

/* チェック項目リスト: 4列グリッド */
.filter-block__check-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各チェック項目 */
.filter-block__check-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--color-bg-disable);
  border-radius: var(--radius);
  cursor: pointer;
  height: 100%;
  border: 1px solid var(--color-bg-disable);
  transition: background-color 0.3s, border-color 0.3s;
}

.filter-block__check-item:hover {
  border-color: var(--color-blue);
}

/* カスタムチェックボックス（円形） */
.filter-block__checkbox {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.filter-block__checkbox:checked {
  background: var(--color-blue);
  border-color: var(--color-blue);
  /* 内側に白リングでラジオボタン風に見せる */
  box-shadow: inset 0 0 0 3px var(--color-white);
}

/* 製品サムネイル */
.filter-block__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

/* テキストコンテナ */
.filter-block__item-text {
  display: block;
  min-width: 0;
}

.filter-block__item-name {
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  line-height: var(--line-height-base);
  word-break: break-all;
  transition: color 0.3s;
}

.filter-block__check-item:hover .filter-block__item-name {
  color: var(--color-blue);
}

.filter-block__item-count {
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  transition: color 0.3s;
}

.filter-block__check-item:hover .filter-block__item-count {
  color: var(--color-blue);
}

/* ---- SP対応 ---- */
@media (max-width: 767px) {
  .cat-head {
    padding: 0 0 var(--space-48);
  }
  .cat-head__overview {
    flex-direction: column;
    gap: var(--space-24);
    margin-bottom: var(--space-24);
  }
  .cat-head__video-wrap {
    width: 100%;
    aspect-ratio: unset;
    gap: var(--space-16);
  }
  .cat-head__img-wrap {
    width: 100%;
    gap: var(--space-16);
  }
  .cat-head__descs {
    gap: var(--space-24);
  }
  .cat-head__text {
    gap: var(--space-24);
  }
  .cat-head__desc {
    font-size: var(--font-size-body-sp);
  }
  .cat-head__search-link {
    height: 40px;
    font-size: var(--font-size-sm-sp);
  }
  .cat-head__subcats-title {
    font-size: var(--font-size-h5-sp);
    margin-bottom: var(--space-12);
  }
  .cat-head__subcat-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-head__subcat-item {
    padding: var(--space-8);
    height: 100%;
    min-height: auto;
  }
  .cat-head__subcat-thumb {
    width: 32px;
    height: 32px;
  }
  .cat-head__subcat-name {
    font-size: var(--font-size-sm-sp);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .cat-head__articles {
    margin-top: var(--space-24);
    padding-top: var(--space-16);
  }
  /* 記事スライダー SP: ネイティブスクロール */
  /* .cat-head__articles 自体を overflow:hidden にしてモバイルブラウザへの漏れを防ぐ */
  .cat-head__articles {
    overflow: visible;
  }
  /* スライダーコンテナもクリップ */
  .cat-head__article-slider {
    overflow: visible;
  }
  .cat-head__article-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(var(--gutter-sp) * -1);
    margin-right: calc(var(--gutter-sp) * -1);
  }
  .cat-head__article-track {
    gap: 0;
  }
  .cat-head__article-item {
    flex: 0 0 calc(50% - 19px);
    scroll-snap-align: start;
    padding-left: var(--gutter-sp);
  }
  .cat-head__article-item:last-child {
    flex: 0 0 calc(50% - 19px + var(--gutter-sp));
    padding-right: var(--gutter-sp);
  }
  .cat-head__article-arrow--prev,
.cat-head__article-arrow--next {
    display: none;
  }
  .cat-head__articles-title {
    font-size: var(--font-size-body-pc);
    margin-bottom: var(--space-12);
  }
  .cat-products__heading .section-title {
    font-size: 21px;
  }
  .cat-products__heading {
    padding-bottom: 0;
  }
  .filter-section {
    padding: var(--space-24) 0 var(--space-16);
  }
  .filter-section__head {
    flex-direction: row;
    align-items: center;
  }
  .filter-section__floating-label {
    font-size: var(--font-size-h4-sp);
  }
  .filter-section__floating-status {
    font-size: var(--font-size-xs-pc);
  }
  .filter-section__floating-open {
    font-size: var(--font-size-sm-sp);
    height: 28px;
  }
  .filter-section__reset {
    min-width: 120px;
    height: 28px;
    font-size: var(--font-size-sm-sp);
  }
  .filter-section__title {
    font-size: var(--font-size-h5-pc);
  }
  /* SP: filter-block を縦積みレイアウトで表示（PCと同様にチェックでfilter-subが出現） */
  .filter-block {
    flex-direction: column;
    margin-bottom: var(--space-8);
  }
  .filter-block__label {
    width: 100%;
    height: 32px;
    border-radius: var(--radius) var(--radius) 0 0;
    justify-content: flex-start;
  }
  .filter-block__label-text {
    font-size: var(--font-size-body-sp);
  }
  .filter-block__check-area {
    border-left: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: var(--space-8);
  }
  .filter-block__item-name {
    font-size: var(--font-size-sm-sp);
  }
  .filter-block__item-count {
    font-size: var(--font-size-sm-sp);
  }
  .filter-sub__col-title {
    font-size: var(--font-size-xs-pc);
  }
  /* SP: 1列リスト（縦積み） */
  .filter-block__check-list {
    grid-template-columns: repeat(1, 1fr);
  }
  /* SP: サムネイルを32px に縮小 */
  .filter-block__thumb {
    width: 32px;
    height: 32px;
  }
  /* SP: チェックアイテムのパディング調整 */
  .filter-block__check-item {
    padding: var(--space-8);
  }
  /* ---- SP: 小項目 → アコーディオン ---- */
  /* 横スクロールを解除して縦積みに */
  .filter-sub {
    overflow-x: visible;
    padding-bottom: 0;
  }
  .filter-sub::-webkit-scrollbar {
    display: none;
  }
  .filter-sub__inner {
    flex-direction: column;
    min-width: auto;
    gap: var(--space-8);
  }
  .filter-sub__col {
    width: 100%;
  }
  /* ヘッダー: 閉じている状態（全辺ボーダー + 全角丸） */
  .filter-sub__col-head {
    min-height: 40px;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    justify-content: flex-start;
    gap: var(--space-8);
  }
  /* PC用「× 解除」ボタン非表示 */
  .filter-sub__col-reset {
    display: none;
  }
  /* タイトルを伸長して残りスペースを埋める */
  .filter-sub__col-title {
    flex: 1;
  }
  /* トグルアイコン: SPで表示 */
  .filter-sub__toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    position: relative;
  }
  /* + の横棒 */
  .filter-sub__toggle-icon::before {
    content: "";
    display: block;
    width: 9px;
    height: 1px;
    background: var(--color-blue);
  }
  /* + の縦棒 */
  .filter-sub__toggle-icon::after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 9px;
    background: var(--color-blue);
  }
  /* SP用カウントバッジ: JS が hidden 属性を外したときに表示 */
  .filter-sub__count-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    padding: 0 var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    color: var(--color-blue);
    font-size: 11px; /* Figma指定値 */
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
  }
  /* hidden 属性がある場合は非表示（JS が外すまで） */
  .filter-sub__count-badge[hidden] {
    display: none;
  }
  .filter-sub__item {
    font-size: var(--font-size-sm-sp);
  }
  /* リストボディ: 閉じている状態は非表示 */
  .filter-sub__col-body {
    display: none;
    height: auto;
    max-height: 168px;
    overflow-y: auto;
  }
  /* ---- 開いている状態（.is-open） ---- */
  /* ヘッダー: 下ボーダーなし + 上角丸のみ */
  .filter-sub__col.is-open .filter-sub__col-head {
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  /* ボディ表示 */
  .filter-sub__col.is-open .filter-sub__col-body {
    display: block;
  }
  /* トグルアイコン: − 表示（グレー背景、ボーダーなし） */
  .filter-sub__col.is-open .filter-sub__toggle-icon {
    background: #ddd;
    border-color: transparent;
  }
  .filter-sub__col.is-open .filter-sub__toggle-icon::before {
    background: var(--color-white);
  }
  /* 縦棒を消して − にする */
  .filter-sub__col.is-open .filter-sub__toggle-icon::after {
    display: none;
  }
  /* ==== SP sticky CLOSE状態: floating-head を表示 ==== */
  /* CLOSE時: 全体背景と下ボーダー */
  .filter-sticky-wrap.is-sticky.is-closed {
    border-bottom: 2px solid var(--color-text-sub);
  }
  /* CLOSE時: セクションのパディングをゼロに */
  .filter-sticky-wrap.is-sticky.is-closed .filter-section {
    padding: 0;
  }
  /* CLOSE時: floating-head を表示 */
  .filter-sticky-wrap.is-sticky.is-closed .filter-section__floating-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* CLOSE時: 通常ヘッダーを非表示 */
  .filter-sticky-wrap.is-sticky.is-closed .filter-section__head {
    display: none;
  }
  /* CLOSE時: パネルを非表示（アニメーションではなく即座に） */
  .filter-sticky-wrap.is-sticky.is-closed .filter-section__panel {
    display: none;
  }
  /* ==== SP sticky OPEN状態: パネルをフルスクリーンに ==== */
  /* OPEN時: パネルを fixed フルスクリーンへ */
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section__panel {
    position: fixed;
    top: var(--header-top-height, 60px);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--header-top-height, 60px));
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 90;
    background: var(--color-bg-disable);
    /* トランジションを無効化（固定レイアウト移行時の不具合回避） */
    transition: none;
  }
  /* OPEN時: スクロール可能なコンテンツ領域 */
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section__panel-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-16) var(--space-32) var(--space-16);
  }
  /* SP用「閉じる」バー: デフォルト非表示、OPEN時に表示 */
  .filter-section__sp-close-bar {
    display: none;
  }
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section__sp-close-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    height: 48px;
    flex-shrink: 0;
    width: 100%;
    background: var(--color-text-sub); /* #555 */
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
  }
  /* SP用「閉じる」ボタン（バー内） */
  .filter-section__sp-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: var(--font-size-sm-sp);
    cursor: pointer;
  }
  .filter-section__sp-close-btn:hover {
    background: rgba(0, 0, 0, 0.15);
  }
  /* OPEN時: filterセクション自体は通常のまま（パネルがfixed化されるため最小化） */
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-section {
    padding-bottom: 0;
  }
  /* SP: filter-block を OPEN時のパネル内で縦積みレイアウトに */
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-block {
    flex-direction: column;
    margin-bottom: var(--space-8);
  }
  /* SP: filter-sub の余白調整（OPEN時） */
  .filter-sticky-wrap.is-sticky:not(.is-closed) .filter-sub {
    margin-top: 0;
  }
}
/* SP用「閉じる」バーのデフォルト非表示（PC含む全体） */
.filter-section__sp-close-bar {
  display: none;
}

/* ============================================================
   カテゴリページ
   ============================================================ */
/* カテゴリページ */
.category-main__desc {
  margin-bottom: var(--space-32);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: var(--line-height-base);
}

/* カテゴリカードグリッド */
.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24) var(--space-16);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* カテゴリカード */
.cat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  height: 100%;
}

/* タイトル行（大カテゴリリンク） */
.cat-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.cat-card__title:hover .cat-card__thumb {
  opacity: 0.7;
}

.cat-card__title:hover .cat-card__name {
  text-decoration: underline;
}

/* サムネイル */
.cat-card__thumb-wrap {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.cat-card__thumb {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s;
}

/* カテゴリ名 */
.cat-card__name {
  flex: 1;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-base);
  margin-right: calc(-1 * var(--space-8));
  overflow-wrap: anywhere;
}

/* タイトル行の赤チェブロン */
.cat-card__chevron {
  display: block;
  width: 6px;
  height: 10px;
  background-color: var(--color-red);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}

/* 小カテゴリリスト */
.cat-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 小カテゴリリンク行: ブレットをabsoluteにしてテキスト+矢印をインラインで流す */
.cat-card__link {
  display: block;
  position: relative;
  line-height: 20px;
  padding-left: calc(var(--space-4) + 5px + var(--space-8)); /* 左余白 + ブレット幅 + gap */
  text-decoration: none;
}

.cat-card__link:hover .cat-card__link-text {
  text-decoration: underline;
}

/* 黒丸ブレット */
.cat-card__bullet {
  position: absolute;
  left: calc(var(--space-4) + 1px);
  top: 0.65em;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #CCC;
}

/* 小カテゴリ名 */
.cat-card__link-text {
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  line-height: var(--line-height-base);
  overflow-wrap: anywhere;
}

/* 小カテゴリの赤チェブロン: インラインで直後に続く */
.cat-card__link-chevron {
  display: inline-block;
  width: 6px;
  height: 10px;
  background-color: var(--color-red);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  vertical-align: -1px;
  margin-left: var(--space-4);
}

@media (max-width: 767px) {
  .category-main__desc {
    margin-bottom: var(--space-24);
    font-size: var(--font-size-sm-pc);
  }
  .cat-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16) var(--space-8);
  }
  .cat-card {
    gap: var(--space-12);
    padding: var(--space-8) var(--space-8) var(--space-12) var(--space-8);
  }
  .cat-card__title {
    gap: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .cat-card__name {
    font-size: var(--font-size-sm-pc);
    margin-right: calc(-1 * var(--space-4));
  }
  .cat-card__thumb-wrap {
    width: 32px;
    height: 32px;
  }
  .cat-card__link-text {
    font-size: var(--font-size-xs-pc);
  }
}
.page-head {
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
}

.page-head__title {
  font-size: var(--font-size-h1-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-heading);
  margin: 0;
  padding-block: 34px;
}

.page-head::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  /* コンテンツ左端オフセット: viewport余白 + gutter */
  --_left: calc(max(0px, (100% - var(--content-width)) / 2) + var(--gutter-pc));
  background: linear-gradient(to right, var(--color-border) var(--_left), var(--color-red) var(--_left), var(--color-red) calc(var(--_left) + var(--heading-h1-accent-width)), var(--color-border) calc(var(--_left) + var(--heading-h1-accent-width)));
}

.page-head__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-text-sub);
  margin: var(--space-12) 0 0;
  line-height: var(--line-height-body);
}

.page-content {
  padding: var(--space-64) 0 var(--space-96);
}

.page-content > .inner > :first-child {
  margin-top: 0;
}

.page-content .pagination {
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .page-content {
    padding: var(--space-32) 0 var(--space-48);
  }
}
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.list-toolbar__count {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  margin: 0;
}

.list-toolbar__count strong {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
}

.list-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
}

.list-toolbar__select {
  height: 36px;
  padding: 0 var(--space-32) 0 var(--space-12);
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  background-image: url("../images/icon_chevron-right.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 5px 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.list-toolbar__select:hover,
.list-toolbar__select:focus {
  border-color: var(--color-text-sub);
  outline: none;
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: var(--space-24);
  -moz-column-gap: var(--space-16);
       column-gap: var(--space-16);
  list-style: none;
  padding: 0;
  margin: var(--space-24) 0 0;
}

.prod-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .page-head::after {
    --_left: var(--gutter-sp);
    background: linear-gradient(to right, var(--color-border) var(--_left), var(--color-red) var(--_left), var(--color-red) calc(var(--_left) + 120px), var(--color-border) calc(var(--_left) + 120px));
  }
  .page-head__title {
    font-size: var(--font-size-h3-pc); /* 24px */
    padding: var(--space-20) 0;
  }
  .page-head__desc {
    font-size: var(--font-size-body-sp);
  }
  .list-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
  }
  .list-toolbar__count {
    font-size: var(--font-size-xs-sp);
  }
  .list-toolbar__count strong {
    font-size: var(--font-size-body-sp);
  }
  .list-toolbar__sort {
    font-size: var(--font-size-xs-sp);
  }
  .list-toolbar__select {
    font-size: var(--font-size-xs-sp);
  }
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }
}
.usage-intro {
  background-color: var(--color-white);
  margin-bottom: var(--space-48);
}

.usage-intro__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 0 0 var(--space-32);
}

.usage-intro__head .section-title {
  margin-bottom: 0;
}

.usage-intro__select-wrap {
  position: relative;
  flex-shrink: 0;
}

.usage-intro__select {
  width: 280px;
  height: 40px;
  padding: 0 var(--space-40) 0 var(--space-16);
  background: var(--color-white) url("../images/icon_chevron-down.svg") no-repeat right var(--space-16) center/12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.usage-intro__body {
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.usage-intro__kv {
  height: 320px;
  background-color: #000;
}

.usage-intro__kv-img {
  width: 66%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.usage-intro__cases {
  background-color: var(--color-bg-disable);
  padding: var(--space-24);
}

.usage-intro__cases-title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-16);
}

.usage-intro__subcats {
  background-color: var(--color-bg-disable);
  padding: var(--space-24) var(--space-24) 0 var(--space-24);
}

.usage-intro__subcats-title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-16);
}

.usage-intro__case-list {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-16);
}

.usage-intro__case-list li {
  display: flex;
}

.usage-intro__case-list > li[hidden] {
  display: none;
}

.usage-case-item {
  width: 100%;
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-16);
  color: var(--color-black);
}

.usage-case-item:hover .usage-case-item__img {
  opacity: 0.7;
}

.usage-case-item:hover .usage-case-item__title {
  text-decoration: underline;
}

.usage-case-item__img-wrap {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
}

.usage-case-item__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s ease;
}

.usage-case-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-4);
  flex: 1;
  min-width: 0;
}

.usage-case-item__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.usage-case-item__title {
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  flex: 1;
  overflow-wrap: anywhere;
}

.usage-case-item__chevron {
  margin-top: 0.5em;
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--color-black);
}

.usage-case-item__desc {
  font-size: var(--font-size-xs-pc);
  color: var(--color-black);
  line-height: var(--line-height-base);
  overflow-wrap: anywhere;
}

.usage-intro__more {
  display: none;
}

.usage-intro__more-text--close {
  display: none;
}

@media (max-width: 767px) {
  .usage-intro__head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-32);
    padding: 0 0 var(--space-24);
  }
  .usage-intro__select-wrap {
    width: 100%;
  }
  .usage-intro__select {
    width: 100%;
    padding: 0 var(--space-32) 0 var(--space-12);
    background-position: right var(--space-12) center;
    font-size: var(--font-size-body-sp);
  }
  .usage-intro__kv {
    height: 120px;
  }
  .usage-intro__cases {
    padding: var(--space-16) var(--space-8);
  }
  .usage-intro__cases-title {
    font-size: var(--font-size-h4-sp);
    margin-bottom: var(--space-12);
  }
  .usage-intro__subcats {
    padding: var(--space-16) var(--space-8) 0 var(--space-8);
  }
  .usage-intro__subcats-title {
    font-size: var(--font-size-h4-sp);
    margin-bottom: var(--space-12);
  }
  .usage-intro__case-list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .usage-case-item {
    gap: var(--space-16);
    padding: var(--space-12);
  }
  .usage-case-item__body {
    gap: var(--space-4);
    padding-top: 0;
  }
  .usage-case-item__img-wrap {
    width: 80px;
    height: 80px;
  }
  .usage-case-item__title {
    font-size: var(--font-size-sm-sp);
  }
  .usage-case-item__desc {
    font-size: var(--font-size-xs-sp);
  }
  .usage-intro__more:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: none;
    border: none;
    padding: 0;
    margin: var(--space-16) auto 0;
    color: var(--color-blue);
    font-size: var(--font-size-xs-pc);
    cursor: pointer;
  }
  .usage-intro__more-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    position: relative;
    transition: background-color 0.15s;
  }
  .usage-intro__more-icon::before,
.usage-intro__more-icon::after {
    content: "";
    position: absolute;
    background-color: var(--color-blue);
    border-radius: 1px;
  }
  .usage-intro__more-icon::before {
    width: 9px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .usage-intro__more-icon::after {
    width: 1px;
    height: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .usage-intro__more.is-open .usage-intro__more-icon {
    background-color: var(--color-border);
    border-color: var(--color-border);
  }
  .usage-intro__more.is-open .usage-intro__more-icon::before,
.usage-intro__more.is-open .usage-intro__more-icon::after {
    background-color: var(--color-white);
  }
  .usage-intro__more.is-open .usage-intro__more-icon::after {
    display: none;
  }
  .usage-intro__more.is-open .usage-intro__more-text {
    display: none;
  }
  .usage-intro__more.is-open .usage-intro__more-text--close {
    display: inline;
  }
}
.login-section {
  padding: var(--space-64) 0 var(--space-96);
  background-color: var(--color-bg-disable);
}

.login-section .inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  max-width: 900px;
}

.login-card {
  flex: 1;
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-48);
}

.login-card__title {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 var(--space-8);
}

.login-card__desc {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  margin: 0 0 var(--space-32);
  line-height: var(--line-height-body);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.login-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.login-form__label {
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
}

.login-form__input {
  height: 48px;
  padding: 0 var(--space-16);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  transition: border-color 0.15s;
}

.login-form__input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(0, 136, 191, 0.15);
}

.login-form__input::-moz-placeholder {
  color: var(--color-text-muted);
}

.login-form__input::placeholder {
  color: var(--color-text-muted);
}

.login-form__actions {
  margin-top: var(--space-8);
}

.login-form__links {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.login-form__link {
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
  text-decoration: none;
}

.login-form__link:hover {
  text-decoration: underline;
}

.login-note {
  flex: 1;
  padding: var(--space-32) var(--space-32) var(--space-40);
  background-color: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.login-note__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 var(--space-12);
}

.login-note__desc {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  margin: 0 0 var(--space-24);
  line-height: var(--line-height-body);
}

@media (max-width: 767px) {
  .login-section {
    padding: var(--space-40) 0 var(--space-64);
  }
  .login-section .inner {
    flex-direction: column;
    gap: var(--space-32);
  }
  .login-card {
    padding: var(--space-24);
    width: 100%;
  }
  .login-card__title {
    font-size: var(--font-size-h3-sp);
  }
  .login-card__desc {
    font-size: var(--font-size-sm-sp);
    margin-bottom: var(--space-24);
  }
  .login-form__label {
    font-size: var(--font-size-sm-sp);
  }
  .login-form__input {
    height: 44px;
    font-size: var(--font-size-body-sp);
  }
  .login-form__link {
    font-size: var(--font-size-sm-sp);
  }
  .login-note {
    padding: var(--space-24);
    width: 100%;
  }
  .login-note__title {
    font-size: var(--font-size-h4-sp);
  }
  .login-note__desc {
    font-size: var(--font-size-sm-sp);
    margin-bottom: var(--space-20);
  }
}
.kwsearch-main .search-top__panel {
  flex-direction: row;
  gap: var(--space-32);
}

.kwsearch-main .search-top__panel .kw-search__form {
  flex-direction: row;
  align-items: center;
  gap: var(--space-32);
}

/* ---- articles ページ: グリッド・カード上書き ---- */
.articles-main .prod-grid {
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: var(--space-24);
       column-gap: var(--space-24);
  row-gap: var(--space-48);
}

.articles-main .prod-card {
  border: none;
  padding: 0;
  gap: var(--space-12);
}

.articles-main .prod-card:hover .prod-card__name {
  text-decoration: underline;
}

.articles-main .prod-card__img-wrap {
  aspect-ratio: 9/4;
}

.articles-main .prod-card:hover .prod-card__img-wrap {
  opacity: 0.7;
  transition: opacity 0.3s;
}

.cond-filter {
  margin-top: var(--space-32);
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--color-border);
}

/* ---- タブ ---- */
.cond-filter__tabs {
  display: flex;
  gap: var(--space-8);
}

.cond-filter__tab {
  flex: 0 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 43px;
  padding: 0 var(--space-16);
  display: flex;
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--color-border);
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-text-faint);
  cursor: pointer;
  text-align: left;
  transition: color 0.3s, border-bottom-color 0.3s;
}

.cond-filter__tab.is-active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

.cond-filter__tab:hover:not(.is-active) {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

/* ---- パネル ---- */
.cond-filter__panel[hidden] {
  display: none;
}

.cond-filter__panel {
  margin-top: var(--space-24);
}

/* ---- チップグリッド ---- */
.cond-filter__chip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cond-filter__chip {
  text-align: left;
  width: 100%;
  height: 100%;
  min-height: 45px;
  padding: var(--space-8) var(--space-12);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-blue);
  font-size: var(--font-size-sm-pc);
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  overflow-wrap: anywhere;
}

.cond-filter__chip:hover:not(.is-active):not(:disabled) {
  border: 1px solid var(--color-blue);
}

.cond-filter__chip.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.cond-filter__chip:disabled {
  background: var(--color-bg-disable);
  border-color: var(--color-border);
  color: var(--color-on-dark-muted);
  cursor: not-allowed;
}

.cond-filter__chip-count {
  margin-left: var(--space-4);
  font-weight: 400;
  font-size: var(--font-size-xs-pc);
}

/* ---- 「さらに絞り込む」アコーディオン ---- */
.cond-filter__more {
  margin-top: var(--space-24);
}

.cond-filter__more-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  height: 40px;
  padding: 0 var(--space-16);
  background: var(--color-on-dark-secondary);
  border: 0;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  text-align: left;
}

.cond-filter__more-title {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-white);
}

.cond-filter__more-icon {
  position: relative;
  display: inline-block;
  width: 19px;
  height: 19px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cond-filter__more-icon::before,
.cond-filter__more-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-border);
  transform: translate(-50%, -50%);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cond-filter__more-icon::before {
  width: 9px;
  height: 1px;
}

.cond-filter__more-icon::after {
  width: 1px;
  height: 9px;
}

/* 開時: グレー塗りつぶし・ボーダーなし・縦棒非表示（横棒は白） */
.cond-filter__more.is-open .cond-filter__more-icon {
  background: var(--color-border);
  border-color: var(--color-border);
}

.cond-filter__more.is-open .cond-filter__more-icon::before {
  background: var(--color-white);
}

.cond-filter__more.is-open .cond-filter__more-icon::after {
  opacity: 0;
}

/* 展開ボディ（白背景・枠線なし。ページ背景の上にそのまま展開） */
.cond-filter__more-body {
  display: none;
  padding: var(--space-16) var(--space-24);
}

.cond-filter__more.is-open .cond-filter__more-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  background: var(--color-bg-disable);
}

/* 親カテゴリ行（行間の区切り線なし） */
.cond-filter__row {
  display: grid;
  grid-template-columns: calc(180px + var(--space-32)) 1fr;
  gap: 0 var(--space-32);
  align-items: start;
  padding: 0;
}

.cond-filter__row[hidden] {
  display: none;
}

.cond-filter__row-label-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding-right: var(--space-16);
  overflow: hidden;
}

.cond-filter__row-label-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  background: var(--color-border);
  pointer-events: none;
}

.cond-filter__row-label {
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  align-self: center;
  width: 100%;
  padding-right: var(--space-32);
  min-width: 0;
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .cond-filter__row-label-wrap {
    padding-right: var(--space-16);
  }
  .cond-filter__row-label-wrap::after {
    top: 0;
    bottom: 0;
    height: auto;
  }
}
@media (max-width: 767px) {
  .cond-filter__row-label-wrap,
.cond-filter__row-label {
    padding-right: 0;
  }
  .cond-filter__row-label-wrap::after {
    display: none;
  }
}
/* 中カテゴリチェックリスト（3列） */
.cond-filter__sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16) var(--space-16);
  list-style: none;
  margin: 0;
  padding: var(--space-8) 0;
}

.cond-filter__sub-item {
  position: relative;
  display: block;
  padding-left: calc(18px + var(--space-8));
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  cursor: pointer;
  line-height: 1.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-width: 0;
}

.cond-filter__sub-item.is-disabled {
  color: var(--color-text-on-dark);
  cursor: not-allowed;
}

.cond-filter__sub-checkbox {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 2px;
  left: 0;
  margin: 0;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

.cond-filter__sub-checkbox:checked {
  background: var(--color-white);
}

.cond-filter__sub-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid var(--color-blue);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  background: var(--color-blue);
  border-color: var(--color-blue);
  box-shadow: inset 0 0 0 3px var(--color-white);
}

.cond-filter__sub-checkbox:disabled {
  background: var(--color-bg-disable);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.cond-filter__sub-name,
.cond-filter__sub-count {
  display: inline;
}

.cond-filter__sub-name {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cond-filter__sub-count {
  font-size: var(--font-size-sm-pc);
  margin-left: var(--space-4);
  white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .cond-filter__row,
.cond-filter__row-label-wrap,
.cond-filter__sub-item,
.cond-filter__sub-grid {
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .kwsearch-main .search-top__panel {
    gap: var(--space-12);
  }
  .articles-main .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: var(--space-16);
         column-gap: var(--space-16);
    row-gap: var(--space-24);
  }
  .articles-main .prod-card {
    gap: var(--space-8);
  }
  .kwsearch-main .search-top__panel, .kwsearch-main .search-top__panel .kw-search__form {
    flex-direction: column;
    align-items: flex-start;
  }
  .kwsearch-main .search-top__panel .kw-search__form {
    gap: var(--space-16);
  }
  .cond-filter {
    margin-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
  .cond-filter__panel {
    margin-top: var(--space-16);
  }
  .cond-filter__tabs {
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cond-filter__tabs::-webkit-scrollbar {
    display: none;
  }
  .cond-filter__tab {
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 var(--space-8);
    font-size: var(--font-size-h6-sp);
    text-align: center;
    display: flex;
    justify-content: center;
  }
  .cond-filter__chip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cond-filter__chip {
    min-height: 40px;
    height: 100%;
    text-align: left;
    font-size: var(--font-size-xs-pc);
    padding: var(--space-8);
  }
  .cond-filter__more {
    margin-top: var(--space-16);
  }
  .cond-filter__more-body {
    padding: var(--space-16);
  }
  .cond-filter__row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: 0;
  }
  .cond-filter__row + .cond-filter_row {
    margin-top: var(--space-16);
  }
  .cond-filter__row-label {
    font-size: var(--font-size-body-sp);
  }
  .cond-filter__sub-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: 0;
  }
  .cond-filter__sub-item {
    font-size: var(--font-size-sm-sp);
  }
  .cond-filter__sub-count {
    font-size: var(--font-size-sm-sp);
  }
}
.search-top__no-section {
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--color-border);
}

.nosearch-main .search-top__panel {
  flex-direction: row;
  gap: var(--space-32);
}

.nosearch-main .search-top__panel .kw-search__form {
  flex-direction: row;
  align-items: center;
}

.nosearch-main .search-top__panel-head {
  min-width: 162px;
}

.nosearch-main .multi-panel__form {
  width: 100%;
}

@media (max-width: 767px) {
  .search-top__no-section {
    padding-bottom: var(--space-24);
  }
  .nosearch-main .search-top__panel {
    flex-direction: column;
    gap: var(--space-12);
  }
}
.search-main__section {
  margin-top: var(--space-48);
}

.cat-search .sec-head h2, .search-main .sec-head h2 {
  color: var(--color-text-sub);
}

.search-main__desc {
  line-height: var(--line-height-body);
  font-size: var(--font-size-body-pc);
}

.search-top__kw-section {
  margin-top: var(--space-48);
}

.search-top__kw-heading {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-text-sub);
  margin: 0 0 var(--space-16);
}

.search-top__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.search-top__panel {
  background-color: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.search-top__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.search-top__panel-title-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.search-top__panel-title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
}

.search-top__panel-title-sub {
  font-size: var(--font-size-body-pc);
  font-weight: 400;
  color: var(--color-black);
}

.search-top__panel .kw-search__form {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.search-top__panel .kw-search__input-group {
  width: 100%;
  max-width: 620px;
}

.search-top__panel .kw-search__info-btn img {
  filter: brightness(0) invert(80%);
}

.search-top__panel .kw-search__input-wrap {
  flex: 1;
}

.search-top__panel .kw-search__input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-right: none;
}

.search-top__panel .kw-search__input:focus {
  outline: none;
  border-color: var(--color-black);
}

.search-top__panel .kw-search__input::-moz-placeholder {
  color: var(--color-text-on-dark);
}

.search-top__panel .kw-search__input::placeholder {
  color: var(--color-text-on-dark);
}

.search-top__panel .kw-search__submit {
  font-size: var(--font-size-body-pc);
  font-weight: normal;
}

.search-top__panel .kw-search__radio {
  color: var(--color-black);
}

.search-top__panel .kw-search__radio span {
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
}

.search-top__panel .kw-search__radio input[type=radio] {
  border: 1px solid #222;
}

.multi-panel__form-wrap {
  display: flex;
  gap: var(--space-24);
}

.multi-panel__textarea {
  flex: 1;
  height: 140px;
  padding: var(--space-12);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  resize: vertical;
  line-height: var(--line-height-base);
  box-sizing: border-box;
}

.multi-panel__textarea:focus {
  outline: none;
  border-color: var(--color-black);
}

.multi-panel__textarea::-moz-placeholder {
  font-size: var(--font-size-body-pc);
  color: var(--color-text-on-dark);
}

.multi-panel__textarea::placeholder {
  font-size: var(--font-size-body-pc);
  color: var(--color-text-on-dark);
}

.multi-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex-shrink: 0;
}

.multi-panel__btn {
  width: 100px;
  height: 48px;
  font-size: var(--font-size-body-pc);
  font-weight: normal;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.multi-panel__btn--search {
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
}

.multi-panel__btn--search:hover {
  opacity: 0.7;
}

.multi-panel__btn--clear {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  transition: opacity 0.3s;
}

.multi-panel__btn--clear:hover {
  opacity: 0.7;
}

.search-query-bar {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-16) 0;
}

.search-query-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.search-query-bar__label {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  white-space: nowrap;
}

.search-query-bar__keyword {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
}

.search-query-bar__form {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
}

.search-query-bar__input {
  height: 40px;
  padding: 0 var(--space-12);
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  min-width: 280px;
}

.search-query-bar__input:focus {
  outline: none;
  border-color: var(--color-blue);
}

.search-query-bar__submit {
  height: 40px;
  padding: 0 var(--space-20);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-black);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.search-query-bar__submit:hover {
  opacity: 0.7;
}

.search-empty {
  padding: var(--space-80) 0 var(--space-96);
  text-align: center;
}

.search-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--color-bg-disable);
  margin: 0 auto var(--space-24);
}

.search-empty__icon img {
  display: block;
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

.search-empty__title {
  font-size: var(--font-size-h2-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 var(--space-12);
}

.search-empty__keyword {
  color: var(--color-red);
}

.search-empty__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-text-sub);
  margin: 0 0 var(--space-32);
  line-height: var(--line-height-body);
}

.search-empty__suggestions {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-48);
  text-align: left;
  max-width: 480px;
  margin-inline: auto;
}

.search-empty__actions {
  display: flex;
  gap: var(--space-16);
  justify-content: center;
  flex-wrap: wrap;
}

.search-empty__suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.search-empty__suggestion-item:last-child {
  border-bottom: none;
}

.search-empty__suggestion-item::before {
  content: "・";
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.multi-search-section {
  padding: var(--space-48) 0 var(--space-80);
  background-color: var(--color-bg-disable);
}

.multi-search-section .inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
}

.multi-search-form {
  flex: 1;
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-40);
}

.multi-search-form__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 var(--space-8);
}

.multi-search-form__desc {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  margin: 0 0 var(--space-24);
  line-height: var(--line-height-body);
}

.multi-search-form__textarea {
  display: block;
  width: 100%;
  height: 200px;
  padding: var(--space-12) var(--space-16);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  resize: vertical;
  margin-bottom: var(--space-16);
  line-height: var(--line-height-body);
  box-sizing: border-box;
}

.multi-search-form__textarea:focus {
  outline: none;
  border-color: var(--color-blue);
}

.multi-search-form__textarea::-moz-placeholder {
  color: var(--color-text-on-dark);
}

.multi-search-form__textarea::placeholder {
  color: var(--color-text-on-dark);
}

.multi-search-form__note {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-24);
  line-height: var(--line-height-body);
}

.multi-search-guide {
  flex-shrink: 0;
  width: 280px;
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-32);
}

.multi-search-guide__title {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 var(--space-16);
}

.multi-search-guide__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.multi-search-guide__item {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  line-height: var(--line-height-body);
  padding-left: var(--space-16);
  position: relative;
}

.multi-search-guide__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.multi-search-guide__code {
  display: inline-block;
  background-color: var(--color-bg-disable);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-8);
  font-family: monospace;
  font-size: var(--font-size-xs-pc);
  color: var(--color-black);
  margin-top: var(--space-4);
}

@media (max-width: 767px) {
  .cat-search .sec-head h2,
.search-main .sec-head h2 {
    font-size: var(--font-size-h3-sp);
  }
  .search-main__section {
    margin-top: 0;
  }
  .search-main__desc {
    font-size: var(--font-size-body-sp);
  }
  .search-main__section + .search-main__section {
    margin-top: var(--space-32);
  }
  .search-top__kw-section {
    margin-top: var(--space-32);
  }
  .search-top__kw-heading {
    font-size: var(--font-size-h3-sp);
  }
  .search-top__panels {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
  .search-top__panel-title {
    font-size: var(--font-size-h4-sp);
  }
  .multi-panel__form-wrap {
    flex-direction: column;
    gap: var(--space-12);
  }
  .multi-panel__textarea {
    flex: none;
    width: 100%;
    height: 120px;
    line-height: var(--line-height-base);
  }
  .multi-panel__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: var(--space-8);
  }
  .search-top__panel {
    padding: var(--space-16) var(--space-16) var(--space-24) var(--space-16);
    gap: var(--space-12);
  }
  .search-top__panel .kw-search__submit {
    font-size: var(--font-size-body-sp);
  }
  .search-top__panel .kw-search__radio span {
    font-size: var(--font-size-xs-pc); /* 13px */
  }
  .multi-panel__textarea::-moz-placeholder {
    font-size: var(--font-size-body-sp);
  }
  .multi-panel__textarea::placeholder {
    font-size: var(--font-size-body-sp);
  }
  .multi-panel__btn {
    width: 80px;
    font-size: var(--font-size-body-sp);
    height: 40px;
  }
  .search-top__panel-title {
    font-size: var(--font-size-h6-sp);
  }
  .search-top__panel-title-group {
    gap: 0;
  }
  .search-top__panel-title-sub {
    font-size: var(--font-size-sm-sp);
  }
  .search-top__panel .kw-search__options {
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
  }
  .search-query-bar__inner {
    gap: var(--space-8);
  }
  .search-query-bar__label {
    font-size: var(--font-size-xs-sp);
  }
  .search-query-bar__keyword {
    font-size: var(--font-size-body-sp);
  }
  .search-query-bar__form {
    width: 100%;
    margin-left: 0;
  }
  .search-query-bar__input {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-xs-sp);
  }
  .search-empty {
    padding: var(--space-48) 0 var(--space-64);
  }
  .search-empty__title {
    font-size: var(--font-size-h2-sp);
  }
  .search-empty__desc {
    font-size: var(--font-size-body-sp);
  }
  .search-empty__suggestion-item {
    font-size: var(--font-size-sm-sp);
  }
  .multi-search-section .inner {
    flex-direction: column;
    gap: var(--space-32);
  }
  .multi-search-form {
    padding: var(--space-24);
    width: 100%;
  }
  .multi-search-form__title {
    font-size: var(--font-size-h4-sp);
  }
  .multi-search-form__desc {
    font-size: var(--font-size-sm-sp);
    margin-bottom: var(--space-16);
  }
  .multi-search-form__textarea {
    font-size: var(--font-size-body-sp);
    height: 160px;
  }
  .multi-search-form__note {
    font-size: var(--font-size-xs-sp);
  }
  .multi-search-guide {
    width: 100%;
  }
  .multi-search-guide__title {
    font-size: var(--font-size-h5-sp);
  }
  .multi-search-guide__item {
    font-size: var(--font-size-sm-sp);
  }
}
.pd-main {
  padding: var(--space-64) 0 0;
  background: var(--color-white);
}

/* 2カラムレイアウト（画像左・情報右） */
.pd-layout {
  display: flex;
  gap: var(--space-96);
  align-items: flex-start;
}

.pd-gallery {
  flex-shrink: 0;
  width: 420px;
}

/* メイン画像エリア（クリックでモーダル展開） */
.pd-gallery__main {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-1-1);
  background-color: var(--color-bg-disable);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-16);
  cursor: zoom-in;
}

.pd-gallery__main img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ズームボタン（右下・角丸は左上のみ） */
.pd-gallery__zoom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius) 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

/* アイコンを --color-blue (#0088BF) に変換 */
.pd-gallery__zoom img {
  filter: brightness(0) invert(43%) sepia(67%) saturate(683%) hue-rotate(158deg) brightness(95%) contrast(101%);
  width: 27px;
}

.pd-gallery__zoom:hover {
  opacity: 0.7;
}

/* サムネイル一覧（7枚・4+3） */
.pd-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.pd-gallery__thumb-btn {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-1-1);
  background-color: var(--color-bg-disable);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  /* border を使わず inset box-shadow で選択枠を表現
     → 画像が btn サイズをフルに使える */
  box-shadow: inset 0 0 0 3px transparent;
  transition: box-shadow 0.15s;
}

.pd-gallery__thumb-btn.is-active {
  box-shadow: inset 0 0 0 3px var(--color-blue);
  border: 3px solid var(--color-blue);
}

/* アクティブサムネイルの白オーバーレイ */
.pd-gallery__thumb-btn.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.pd-gallery__thumb-btn:hover {
  box-shadow: inset 0 0 0 3px var(--color-border);
}

.pd-gallery__thumb-btn img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pd-info {
  flex: 1;
  min-width: 0;
}

/* バッジセット */
.pd-info__badge-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-24);
}

/* 型番（h1の上に小さく表示） */
.pd-info__model-num {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* 製品名（h1） */
.pd-info__name {
  font-size: var(--font-size-h1-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-24);
}

/* アンカーリンク */
.pd-anchor-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.pd-anchor-link {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
  border-radius: var(--radius-sm);
  background: var(--color-bg-disable);
  text-decoration: none;
  transition: opacity 0.3s;
}

.pd-anchor-link:hover {
  opacity: 0.7;
}

/* 区切り線 */
.pd-info__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-24) 0;
}

.pd-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.pd-stepper__label {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
}

/* ステッパーボックス（−・数値・+ を1つの枠で囲む） */
.pd-stepper__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 120px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-12);
}

.pd-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--color-black);
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 0;
}

.pd-stepper__btn:hover {
  opacity: 0.7;
}

.pd-stepper__input {
  flex: 1;
  width: 0;
  text-align: center;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  border: none;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

/* ブラウザのスピンボタン非表示 */
.pd-stepper__input::-webkit-outer-spin-button,
.pd-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 非活性（販売終了品） */
.pd-stepper--disabled .pd-stepper__label {
  color: var(--color-text-muted);
}

.pd-stepper--disabled .pd-stepper__box {
  background: var(--color-bg-disable);
  border-color: var(--color-border);
}

.pd-stepper--disabled .pd-stepper__btn,
.pd-stepper--disabled .pd-stepper__input {
  color: var(--color-text-muted);
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pd-btn-row {
  display: flex;
  gap: var(--space-16);
  align-items: stretch;
  margin-bottom: var(--space-32);
}

/* カートに追加ボタン（340px固定） */
.pd-btn-row__cart {
  flex-shrink: 0;
  width: 340px;
  height: 48px;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
}

/* 販売終了品ボタン */
.btn--sold-out {
  background: var(--color-on-dark-secondary);
  color: var(--color-white);
  cursor: default;
  opacity: 1;
}

/* サブボタン群（お気に入り + お問い合わせ） */
.pd-btn-row__sub {
  display: flex;
  gap: var(--space-8);
  flex: 1;
}

.pd-sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex: 1;
  height: 48px;
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.3s;
}

.pd-sub-btn img {
  flex-shrink: 0;
  /* white SVG → --color-blue (#0088BF) */
  filter: brightness(0) invert(43%) sepia(67%) saturate(683%) hue-rotate(158deg) brightness(95%) contrast(101%);
}

.pd-sub-btn:hover {
  opacity: 0.7;
}

.pd-sub-btn.is-active {
  background: var(--color-bg-disable);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* お気に入り済アイコン: #CCCCCC グレー */
.pd-sub-btn.is-active img {
  filter: brightness(0) invert(80%);
}

.pd-info__descs {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin-bottom: var(--space-32);
}

.pd-info__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: var(--line-height-body);
  margin: 0;
}

/* YouTube iframe 埋め込みコンテナ */
.pd-video {
  position: relative;
  width: 540px;
  height: 290px;
  aspect-ratio: var(--ratio-16-9);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-32);
  background: var(--color-pure-black);
}

.pd-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* コンテナ */
.pd-together {
  background: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) var(--space-12) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-top: var(--space-32);
  margin-bottom: var(--space-48);
}

/* ヘッダー行 */
.pd-together__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.pd-together__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
}

.pd-together__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
}

.pd-together__more:hover {
  text-decoration: underline;
}

/* 一覧へ の > アイコン */
.pd-together__more-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: var(--color-blue);
  mask-image: url("../images/icon_chevron-right.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* スライダー本体（矢印は画像高さ106pxを基準に中央揃え） */
.pd-together__slider {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

/* 矢印ボタン（Figma: 32×32px, border 1px solid black, border-radius 2px）
   画像高さ106px の上下中央に揃える: (106 - 32) / 2 = 37px */
.pd-together__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: 37px;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
  background: transparent;
  opacity: 0.5;
  transition: opacity 0.3s;
  cursor: pointer;
}

.pd-together__arrow:hover {
  opacity: 0.2;
}

.pd-together__arrow:disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* 前矢印: アイコン反転 */
.pd-together__arrow--prev img {
  transform: scaleX(-1);
}

/* ビューポート */
.pd-together__viewport {
  flex: 1;
  overflow: hidden;
}

/* トラック */
.pd-together__track {
  display: flex;
  gap: var(--space-24);
  list-style: none;
  padding: 0;
  margin: 0;
  transition: transform 0.3s ease;
}

/* アイテム */
.pd-together__item {
  flex: 0 0 192px;
}

/* カード */
.pd-together-card {
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease;
}

.pd-together-card:hover .pd-together-card__img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.pd-together-card:hover .pd-together-card__name {
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

/* 画像wrap: 188×106px */
.pd-together-card__img-wrap {
  aspect-ratio: 16/9;
  background: var(--color-bg-disable);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.pd-together-card__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 型番 */
.pd-together-card__model {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* 名前行 */
.pd-together-card__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* 名前 */
.pd-together-card__name {
  flex: 1;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-base);
}

/* chevron: CSS mask 黒 7×12px */
.pd-together-card__chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  margin-top: 0.4em;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 各セクションのsection-titleにmargin-bottomを付与 */
.pd-spec-section .section-title,
.pd-articles-section .section-title,
.pd-successor-section .section-title,
.pd-companion-section .section-title {
  margin-bottom: var(--space-32);
}

.pd-spec-section {
  padding: 0 0 var(--space-48);
  background: var(--color-white);
}

.pd-spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pd-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-pc);
}

.pd-spec-table dl {
  display: grid;
  grid-template-columns: 260px 1fr;
}

.pd-spec-table tr:not(:first-child) td,
.pd-spec-table tr:not(:first-child) th,
.pd-spec-table dt,
.pd-spec-table dd {
  border-top: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  line-height: var(--line-height-base);
}

.pd-spec-table dt {
  display: flex;
  align-items: center;
}

.pd-spec-table tr:last-child {
  border-bottom: 1px solid var(--color-border);
}

.pd-spec-table th, .pd-spec-table dt {
  padding: var(--space-16);
  width: 260px;
  font-weight: 700;
  color: var(--color-black);
  background: none;
}

.pd-spec-table tr:not(:first-child) td, .pd-spec-table dd {
  padding: var(--space-16);
  color: var(--color-black);
}

/* カタログリンク */
.pd-spec-link {
  display: block;
  color: var(--color-black);
  text-decoration: underline;
  transition: opacity 0.3s;
}

.pd-spec-link:not(:last-child) {
  margin-bottom: var(--space-8);
}

.pd-spec-link:hover {
  opacity: 0.7;
}

.pd-spec-link__pdf-icon {
  display: inline-block;
  margin-left: 4px;
  vertical-align: text-bottom;
}

/* 外側ラッパー（横一列） */
.pd-cad {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* コンテナ行 */
.pd-cad__checks {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
  border-right: 1px solid var(--color-border);
  padding-right: var(--space-16);
}

/* 全て選択 */
.pd-cad__check-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  flex-shrink: 0;
}

.pd-cad__check-label {
  font-size: var(--font-size-xs-sp);
  color: var(--color-blue);
  text-align: center;
  line-height: var(--line-height-base);
}

/* 区切り線 */
.pd-cad__divider {
  width: 1px;
  height: 60px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* フォーマット個別チェック */
.pd-cad__check-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  flex-shrink: 0;
}

/* フォーマット名ボタン風ラベル */
.pd-cad__check-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 72px;
  background: var(--color-bg-disable);
  border-radius: var(--radius);
  font-size: var(--font-size-xs-pc);
  color: var(--color-blue);
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.pd-cad__check-name:hover {
  opacity: 0.7;
}

/* チェックボックス共通 */
.pd-cad__checkbox {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pd-cad__checkbox:checked {
  background: var(--color-white);
}

.pd-cad__checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid var(--color-blue);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.pd-cad__checkbox:disabled {
  background: var(--color-bg-disable);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* ダウンロードボタン */
.pd-cad__download-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--space-16);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  border-radius: var(--radius);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

.pd-cad__download-btn:hover {
  opacity: 0.7;
}

/* 寸法図 */
.pd-spec-drawing {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pd-spec-drawing img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
}

.pd-articles-section {
  padding: 0 0 var(--space-48);
}

.pd-articles-slider {
  position: relative;
  display: flex;
  align-items: center;
}

.pd-articles-viewport {
  overflow: hidden;
  flex: 1;
}

.pd-articles-track {
  display: flex;
  gap: var(--space-24);
  transition: transform 0.3s ease;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pd-articles-item {
  flex: 0 0 calc(25% - 18px);
}

.pd-articles-item .article-card__body {
  padding-top: var(--space-8);
}

.pd-articles-item .prod-card__badge-set {
  padding-top: 0;
}

/* 記事スライダー矢印位置（.inner の外側ガター内に配置）
   画像高さ132px に対して上下中央: (132 - 32) / 2 = 50px */
.pd-articles-slider__arrow--prev {
  left: calc(-1 * var(--space-24) - 32px);
  top: 50px;
  transform: none;
}

.pd-articles-slider__arrow--next {
  right: calc(-1 * var(--space-24) - 32px);
  top: 50px;
  transform: none;
}

.pd-successor-section {
  padding: 0;
}

.pd-successor-group {
  background: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16);
  border-radius: 0 0 var(--radius) var(--radius);
}

.pd-successor-group + .pd-successor-group {
  margin-top: var(--space-24);
}

.pd-successor-group__head {
  margin-bottom: var(--space-16);
}

.pd-successor-group__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
}

.pd-successor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* アイテム1行（bg white, 横並び） */
.pd-successor-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: var(--color-white);
  padding: var(--space-16);
}

/* 画像ラッパー 80×80 */
.pd-successor-item__img-wrap {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.pd-successor-item__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 画像右側のコンテナ（製品情報 + 区切り + カタログ） */
.pd-successor-item__body {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  flex: 1;
  min-width: 0;
}

/* 製品情報エリア（型番 + 製品名） */
.pd-successor-item__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 460px;
  flex-shrink: 0;
}

.pd-successor-item__model {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* 製品名リンク行 */
.pd-successor-item__name-row {
  display: block;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-black);
}

.pd-successor-item__name {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  text-decoration: underline;
  display: inline;
  transition: opacity 0.3s;
}

.pd-successor-item__name:hover {
  opacity: 0.7;
}

.pd-successor-item__chevron {
  display: inline-block;
  margin-left: var(--space-4);
  vertical-align: baseline;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 縦区切り線 */
.pd-successor-item__divider {
  display: block;
  flex-shrink: 0;
  width: 1px;
  height: 24px;
  background-color: var(--color-border);
}

/* カタログリンク（PDF） */
.pd-successor-item__catalogs {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pd-successor-item__catalog {
  display: block;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  text-decoration: underline;
  transition: opacity 0.3s;
}

.pd-successor-item__catalog img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

.pd-successor-item__catalog:hover {
  opacity: 0.7;
}

.pd-discontinued-badge {
  display: inline-block;
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-8);
  margin-bottom: var(--space-4);
}

.pd-companion-section {
  padding: var(--space-48) 0 var(--space-96);
  background: var(--color-white);
}

.pd-companion-section__title {
  font-size: var(--font-size-h2-pc);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-8);
  position: relative;
  padding-bottom: var(--space-12);
}

.pd-companion-section__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--color-red);
}

/* グループ間の並び */
.pd-companion-section .inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* 各グループのコンテナ */
.pd-companion-group {
  background: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* グループヘッダー */
.pd-companion-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.pd-companion-group__name {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}

.pd-companion-group__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
}

.pd-companion-group__more:hover {
  text-decoration: underline;
}

/* 一覧へ の > アイコン */
.pd-companion-group__more-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: var(--color-blue);
  mask-image: url("../images/icon_chevron-right.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* スライダー */
.pd-companion-slider {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 矢印ボタン */
.pd-companion-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
}

.pd-companion-arrow:hover {
  opacity: 0.2;
}

.pd-companion-arrow:disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* 前矢印: アイコン反転 */
.pd-companion-arrow--prev img {
  transform: scaleX(-1);
}

/* ビューポート */
.pd-companion-viewport {
  flex: 1;
  overflow: hidden;
}

/* トラック */
.pd-companion-track {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
  transition: transform 0.3s ease;
}

/* カード */
.pd-companion-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: var(--color-white);
  padding: var(--space-12);
  border-radius: var(--radius);
  width: 277px;
  height: 100%;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.pd-companion-card:hover .pd-companion-card__name {
  text-decoration: underline;
}

/* 画像wrap: 60×60px */
.pd-companion-card__img-wrap {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.pd-companion-card__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s;
}

.pd-companion-card:hover .pd-companion-card__img {
  opacity: 0.7;
}

/* 本文 */
.pd-companion-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* 型番 */
.pd-companion-card__model {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* 名前行 */
.pd-companion-card__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* 名前 */
.pd-companion-card__name {
  flex: 1;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: var(--line-height-base);
}

/* chevron */
.pd-companion-card__chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  margin-top: 0.4em;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* アイテム（li）*/
.pd-companion-item {
  flex-shrink: 0;
  list-style: none;
}

@media (max-width: 767px) {
  /* メインエリア */
  .pd-main {
    padding: var(--space-32) 0 0;
  }
  .pd-layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
  }
  /* ギャラリー */
  .pd-gallery {
    width: 100%;
  }
  .pd-gallery__main {
    margin-bottom: var(--space-16);
    background-color: var(--color-bg-white);
    aspect-ratio: unset;
  }
  .pd-gallery__main img {
    width: calc(100% - 78px);
    height: calc(100% - 78px);
    margin: 0 auto;
  }
  /* サムネイル: grid → flex 横スクロール
     要素が少ない時は safe center で中央揃え、
     多い時はオーバーフローして left-aligned スクロール */
  .pd-gallery__thumbs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: safe center;
    gap: var(--space-8);
    padding-bottom: var(--space-4);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* スクロールバー非表示（タッチで操作） */
    scrollbar-width: none;
  }
  .pd-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }
  /* サムネイルボタン: SP は 58×58px 固定 */
  .pd-gallery__thumb-btn {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    scroll-snap-align: start;
  }
  /* SP ではモーダル不要のためズームボタン非表示 */
  .pd-gallery__zoom {
    display: none;
  }
  /* 製品情報 */
  .pd-info__model-num {
    font-size: var(--font-size-h4-sp); /* 18px */
  }
  .pd-info__name {
    font-size: var(--font-size-h3-pc); /* 24px */
  }
  .pd-info__badge-set {
    margin-bottom: var(--space-8);
  }
  /* アンカーリンク: 2列折り返し */
  .pd-anchor-links {
    flex-wrap: wrap;
  }
  .pd-anchor-link {
    flex: 0 0 calc(50% - var(--space-4)); /* 2列（gap:8px の半分を引く） */
    font-size: var(--font-size-xs-pc); /* 13px */
    justify-content: center;
  }
  .pd-stepper {
    margin-bottom: var(--space-16);
  }
  /* ステッパー */
  .pd-stepper__label {
    font-size: var(--font-size-sm-sp);
  }
  /* アクションボタン行: SP では縦積み */
  .pd-btn-row {
    flex-direction: column;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
  }
  .pd-btn-row__cart {
    width: 100%;
    font-size: var(--font-size-body-sp);
  }
  .pd-btn-row__sub {
    gap: var(--space-8);
  }
  .pd-sub-btn {
    height: 40px;
    font-size: var(--font-size-sm-sp);
  }
  /* 説明文 */
  .pd-info__descs {
    gap: var(--space-24);
    margin-bottom: var(--space-24);
  }
  .pd-info__desc {
    font-size: var(--font-size-body-sp);
  }
  .pd-info__divider {
    margin: var(--space-16) 0 var(--space-24);
  }
  /* 動画: 全幅 */
  .pd-video {
    width: 100%;
    margin-bottom: var(--space-24);
  }
  /* よく一緒に購入されている商品: SP */
  .pd-together {
    margin-top: var(--space-24);
    margin-bottom: var(--space-32);
    padding: var(--space-12) var(--space-12) var(--space-16) var(--space-12);
  }
  .pd-together__head {
    gap: var(--space-8);
  }
  .pd-together__title {
    font-size: var(--font-size-h5-pc); /* 18px */
  }
  .pd-together__arrow {
    display: none;
  }
  .pd-together__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pd-together__track {
    transition: none;
    gap: var(--space-16);
  }
  .pd-together__item {
    flex: 0 0 136px;
    scroll-snap-align: start;
    width: 136px;
  }
  .pd-together__more {
    font-size: var(--font-size-sm-sp);
  }
  .pd-together-card__name {
    font-size: var(--font-size-sm-sp);
  }
  /* 仕様テーブル */
  .pd-spec-section {
    padding: 0 0 var(--space-32);
  }
  .pd-spec-section .section-title,
.pd-articles-section .section-title,
.pd-successor-section .section-title,
.pd-companion-section .section-title {
    margin-bottom: var(--space-24);
  }
  /* table-layout: fixed でth幅を確定させる（auto だと width 指定が効かない） */
  .pd-spec-table {
    width: auto;
    table-layout: fixed;
    font-size: var(--font-size-sm-pc); /* 14px: th/td ともに Figma SP 指定値 */
  }
  .pd-spec-table dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .pd-spec-table tr.spec-grid-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .pd-spec-table dt,
.pd-spec-table th {
    font-size: var(--font-size-sm-pc);
    white-space: normal;
    padding: var(--space-12) var(--space-8);
    display: flex;
    align-items: center;
  }
  .pd-spec-table dt {
    width: 100%;
  }
  .pd-spec-table th {
    width: auto;
  }
  .pd-spec-table tr:not(:first-child) td, .pd-spec-table dd {
    padding: var(--space-12) var(--space-8);
  }
  /* SP: CADデータ行は非表示 */
  .pd-spec-table__row--cad {
    display: none;
  }
  /* CADダウンロード */
  .pd-cad {
    flex-direction: column;
    align-items: flex-start;
  }
  .pd-cad__checks {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .pd-cad__check-name {
    font-size: var(--font-size-xs-sp);
  }
  .pd-cad__download-btn {
    width: 100%;
    justify-content: center;
  }
  /* 製品記事 */
  .pd-articles-section {
    padding: 0;
  }
  .pd-articles-slider {
    padding: 0;
  }
  .pd-articles-slider__arrow--prev,
.pd-articles-slider__arrow--next {
    display: none;
  }
  .pd-articles-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: calc(var(--gutter-sp) * -1);
    margin-right: calc(var(--gutter-sp) * -1);
  }
  .pd-articles-viewport::-webkit-scrollbar {
    display: none;
  }
  .pd-articles-track {
    transition: none;
    gap: 0;
  }
  .pd-articles-item {
    flex: 0 0 calc(50% - 19px);
    scroll-snap-align: start;
    padding-left: var(--gutter-sp);
  }
  .pd-articles-item:last-child {
    flex: 0 0 calc(50% - 19px + var(--gutter-sp));
    padding-right: var(--gutter-sp);
  }
  .pd-articles-section .article-card__body {
    gap: var(--space-8);
    padding-top: var(--space-8);
  }
  .pd-articles-section .article-card__title {
    font-size: var(--font-size-body-sp); /* 14px */
  }
  /* 後継品・旧製品 */
  .pd-successor-section {
    padding: var(--space-32) 0;
  }
  .pd-successor-section .section-title {
    margin-bottom: var(--space-24);
  }
  /* Figma SP: グループのパディングはヘッダー・リストに分散 */
  .pd-successor-group {
    padding: 0;
  }
  .pd-successor-group + .pd-successor-group {
    margin-top: var(--space-16);
  }
  .pd-successor-group__head {
    margin-bottom: 0;
    padding: var(--space-12);
  }
  .pd-successor-group__title {
    font-size: var(--font-size-h5-pc); /* 18px */
  }
  .pd-successor-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 0 var(--space-8) var(--space-8);
  }
  /* Figma SP: flex-row, items-start, p:16px, rounded */
  .pd-successor-item {
    align-items: flex-start;
    padding: var(--space-16);
    border-radius: var(--radius);
  }
  /* Figma SP: 画像 60×60px */
  .pd-successor-item__img-wrap {
    width: 60px;
    height: 60px;
  }
  .pd-successor-item__body {
    flex-wrap: wrap;
    gap: var(--space-8);
  }
  .pd-successor-item__info {
    width: auto;
    flex: 1 0 100%;
    white-space: normal;
    min-width: 0;
  }
  .pd-successor-item__divider {
    display: none;
  }
  .pd-discontinued-badge {
    margin-bottom: var(--space-8);
    font-size: var(--font-size-xs-sp);
  }
  .pd-successor-item__model {
    font-size: var(--font-size-sm-pc); /* 14px */
  }
  .pd-successor-item__name {
    font-size: var(--font-size-body-pc); /* 16px */
  }
  /* 関連製品 */
  .pd-companion-section {
    padding-top: 0;
    padding-bottom: var(--space-40);
  }
  .pd-companion-section .inner {
    gap: var(--space-16);
  }
  .pd-companion-section__title {
    font-size: 22px;
    margin-bottom: 0;
  }
  /* Figma SP: グループ padding 12px */
  .pd-companion-group {
    padding: var(--space-12);
  }
  /* Figma SP: ヘッダー gap 8px */
  .pd-companion-group__head {
    gap: var(--space-8);
  }
  /* Figma SP: グループ名 18px */
  .pd-companion-group__name {
    font-size: var(--font-size-h5-pc); /* 18px */
  }
  /* Figma SP: "一覧へ" 12px */
  .pd-companion-group__more {
    font-size: var(--font-size-sm-sp); /* 12px */
  }
  .pd-companion-arrow {
    display: none;
  }
  .pd-companion-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pd-companion-viewport::-webkit-scrollbar {
    display: none;
  }
  .pd-companion-track {
    transition: none;
    gap: var(--space-8); /* Figma SP: gap 8px */
  }
  /* Figma SP: カード縦積み, 136px 固定 */
  .pd-companion-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 136px;
    padding: var(--space-12) var(--space-8); /* py=12px, px=8px */
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  /* Figma SP: 画像 40×40px */
  .pd-companion-card__img-wrap {
    width: 40px;
    height: 40px;
  }
  /* Figma SP: 型番 12px */
  .pd-companion-card__model {
    font-size: var(--font-size-xs-sp); /* 12px */
  }
  /* Figma SP: 製品名 13px */
  .pd-companion-card__name {
    font-size: var(--font-size-xs-pc); /* 13px */
  }
}
/* モーダル内コンテナ（712px 幅・上下中央） */
.gallery-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 712px;
  max-width: 100%;
  margin: auto;
}

/* 閉じるボタン行 */
.gallery-modal__close-wrap {
  display: flex;
  justify-content: flex-end;
}

/* 閉じるボタン（白 ×）*/
.gallery-modal__close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

.gallery-modal__close::before,
.gallery-modal__close::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
}

.gallery-modal__close::before {
  transform: rotate(45deg);
}

.gallery-modal__close::after {
  transform: rotate(-45deg);
}

.gallery-modal__close:hover {
  opacity: 0.7;
}

/* 白いカード（画像 + ナビ） */
.gallery-modal__card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

/* 画像コンテナ（正方形） */
.gallery-modal__img-wrap {
  width: 100%;
  aspect-ratio: var(--ratio-1-1);
  overflow: hidden;
  border-radius: var(--radius);
}

.gallery-modal__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ナビ（← カウンター →） */
.gallery-modal__nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

/* カウンター（1 / 7） */
.gallery-modal__counter {
  font-size: var(--font-size-h5-pc);
  color: var(--color-black);
  text-align: center;
  min-width: 60px;
  white-space: nowrap;
  margin: 0;
}

/* 矢印ボタン共通 */
.gallery-modal__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.gallery-modal__arrow:hover {
  opacity: 0.2;
}

.gallery-modal__arrow:disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* 前矢印は左向きに反転 */
.gallery-modal__arrow--prev img {
  transform: scaleX(-1);
}

.cart-main {
  background-color: var(--color-white);
}

.cart-notice {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-red);
  border-radius: var(--radius);
  margin-bottom: var(--space-24);
  margin-top: var(--space-32);
}

.cart-notice__text {
  flex: 1;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-red);
  line-height: 1.5;
  margin: 0;
}

.cart-notice__close {
  flex-shrink: 0;
  position: relative;
  width: 12px;
  height: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

.cart-notice__close:hover {
  opacity: 0.7;
}

.cart-notice__close::before,
.cart-notice__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background-color: var(--color-red);
  border-radius: 1px;
}

.cart-notice__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cart-notice__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cart-set {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-24);
  margin-bottom: var(--space-16);
}

.cart-set__find-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-body-pc);
  color: var(--color-blue);
  text-decoration: none;
}

.cart-set__find-link:hover {
  text-decoration: underline;
}

.cart-set__find-chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--color-blue);
}

.cart-set__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.cart-set__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
}

.cart-set__ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

.cart-set__ctrl-btn:hover {
  opacity: 0.7;
}

.cart-set__ctrl-btn--all-off {
  color: var(--color-blue);
}

.cart-set__ctrl-btn--clear {
  color: var(--color-text-muted);
}

.cart-set__ctrl-check {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
}

.cart-set__total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 36px;
  padding: 0 var(--space-16);
  background-color: var(--color-white);
  border-radius: var(--radius);
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-black);
}

.cart-table {
  --col-option: 380px;
  --col-qty: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cart-table__head {
  display: grid;
  grid-template-columns: 1fr var(--col-option) var(--col-qty);
  background-color: var(--color-bg-disable);
  border-bottom: 1px solid var(--color-border);
}

.cart-table__th {
  padding: var(--space-8);
  font-size: var(--font-size-sm-pc);
  font-weight: normal;
  color: var(--color-black);
  text-align: center;
}

.cart-table__th--product {
  padding-left: 0;
}

.cart-table__th--option {
  border-left: 1px solid var(--color-border);
}

.cart-table__th--qty {
  border-left: 1px solid var(--color-border);
}

.cart-table__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-table__row {
  display: grid;
  grid-template-columns: 1fr var(--col-option) var(--col-qty);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.cart-table__row:first-child {
  border-top: none;
}

.cart-table__cell {
  padding: var(--space-16);
}

.cart-table__cell--product {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.cart-table__cell--option {
  padding: var(--space-16);
  border-left: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

.cart-option {
  font-size: var(--font-size-sm-pc);
}

.cart-table__cell--qty {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-24);
  padding: var(--space-16);
  border-left: 1px solid var(--color-border);
}

.cart-product__thumb {
  flex-shrink: 0;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
  transition: opacity 0.3s;
}

.cart-product__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.cart-product__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cart-product__sku {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
}

.cart-product__name {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  text-decoration: underline;
  word-break: break-all;
  transition: opacity 0.3s;
}

.cart-product__name:hover,
.cart-product__thumb:hover {
  opacity: 0.7;
}

.cart-qty {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.cart-qty__label {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
}

.cart-qty__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 120px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-12);
}

.cart-qty__stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--color-black);
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 0;
}

.cart-qty__stepper-btn:hover {
  opacity: 0.7;
}

.cart-qty__stepper-num {
  flex: 1;
  width: 0;
  text-align: center;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  border: none;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

.cart-qty__stepper-num::-webkit-outer-spin-button,
.cart-qty__stepper-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-qty__delete {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.cart-qty__delete:hover {
  opacity: 0.7;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.cart-empty__text {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.5;
}

.cart-purchase {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-32);
  margin-bottom: var(--space-48);
}

.cart-purchase__note {
  font-size: var(--font-size-sm-pc);
  color: var(--color-red);
  text-align: right;
  margin: 0;
  line-height: 1.6;
}

.cart-purchase__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 340px;
  height: 48px;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.3s;
}

.cart-purchase__btn:not(:disabled):hover {
  opacity: 0.7;
}

.cart-purchase__btn:disabled {
  background-color: var(--color-on-dark-secondary);
  cursor: default;
}

.cart-discontinued {
  background-color: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16);
}

.cart-discontinued__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.cart-discontinued__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  margin: 0;
}

.cart-discontinued__delete-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.cart-discontinued__delete-all:hover {
  opacity: 0.7;
}

.cart-discontinued__delete-all-text--sp {
  display: none;
}

.cart-discontinued__delete-all-text--pc,
.cart-discontinued__delete-all-text--sp {
  color: var(--color-text-muted);
}

.cart-discontinued__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  margin: 0 0 var(--space-16);
}

.cart-discontinued__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-discontinued__item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background-color: var(--color-white);
  border-radius: var(--radius);
}

.cart-discontinued__item--alert {
  border: 1px solid var(--color-red);
}

.cart-discontinued__thumb {
  flex-shrink: 0;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  overflow: hidden;
  transition: opacity 0.3s;
}

.cart-discontinued__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.cart-discontinued__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cart-discontinued__sku {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
}

.cart-discontinued__name {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  text-decoration: underline;
  transition: opacity 0.3s;
}

.cart-discontinued__name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: var(--space-4);
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  vertical-align: 0;
}

.cart-discontinued__name:hover,
.cart-discontinued__thumb:hover {
  opacity: 0.7;
}

.cart-discontinued__divider {
  display: block;
  width: 1px;
  height: 24px;
  background-color: var(--color-border);
  flex-shrink: 0;
}

.cart-discontinued__delete {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.3s;
  width: 339px;
  max-width: 100%;
}

.cart-discontinued__delete:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .cart-empty__text {
    font-size: var(--font-size-sm-pc);
  }
  .cart-notice {
    align-items: flex-start;
    margin-bottom: var(--space-16);
    padding: var(--space-8) var(--space-12);
    margin-top: var(--space-24);
  }
  .cart-notice__text {
    font-size: var(--font-size-xs-pc);
  }
  .cart-notice__close {
    margin-top: var(--space-4);
  }
  .cart-set {
    gap: var(--space-16);
  }
  .cart-set__find-link {
    font-size: var(--font-size-xs-pc);
  }
  .cart-set__body {
    gap: var(--space-12);
  }
  .cart-set__controls {
    flex-wrap: wrap;
    gap: var(--space-12);
  }
  .cart-set__ctrl-btn {
    font-size: var(--font-size-sm-sp);
  }
  .cart-set__total {
    font-size: var(--font-size-h4-pc);
  }
  .cart-table__head {
    display: none;
  }
  .cart-table {
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .cart-table__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .cart-table__row {
    display: grid;
    grid-template-columns: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0;
    gap: 0;
  }
  .cart-table__row:first-child {
    border-top: 1px solid var(--color-border);
  }
  .cart-table__cell {
    padding: 0;
  }
  .cart-table__cell--check {
    grid-column: 1;
    grid-row: 1/4;
    justify-content: center;
    margin-bottom: 0;
    background-color: var(--color-bg-disable);
    border-right: 1px solid var(--color-border);
  }
  .cart-table__cell--product {
    align-items: flex-start;
    grid-column: 2;
    grid-row: 1;
    padding: var(--space-16) var(--space-16) 0;
    margin-bottom: 0;
  }
  .cart-table__cell--option {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    border-left: none;
    padding: 0 var(--space-16) 0;
    justify-content: flex-end;
  }
  .cart-table__cell--option:has(.cart-option > *) {
    padding-top: var(--space-16);
  }
  .cart-option {
    width: 100%;
    padding-left: 76px;
    font-size: var(--font-size-xs-pc);
  }
  .cart-table__cell--qty {
    grid-column: 2;
    grid-row: 3;
    border-left: none;
    padding: var(--space-16);
    justify-content: flex-end;
    justify-content: space-between;
    padding-left: 92px;
  }
  .cart-product__thumb {
    width: 60px;
    height: 60px;
  }
  .cart-product__name {
    font-size: 16px;
  }
  .cart-qty__delete {
    font-size: var(--font-size-xs-pc);
  }
  .cart-qty__label {
    font-size: var(--font-size-sm-sp);
  }
  .cart-qty__stepper {
    width: 100px;
    height: 28px;
  }
  .cart-qty__stepper-btn {
    font-size: 14px;
    width: 14px;
    height: 14px;
  }
  .cart-qty__stepper-num {
    font-size: 14px;
  }
  .cart-purchase {
    align-items: stretch;
    gap: var(--space-24);
    margin-bottom: var(--space-32);
  }
  .cart-purchase__note {
    font-size: var(--font-size-sm-sp);
    text-align: left;
  }
  .cart-purchase__btn {
    width: 100%;
    font-size: var(--font-size-h5-sp);
  }
  .cart-discontinued {
    padding: var(--space-12) var(--space-8) var(--space-8);
  }
  .cart-discontinued__head {
    margin-bottom: var(--space-12);
  }
  .cart-discontinued__title {
    font-size: var(--font-size-h4-sp);
  }
  .cart-discontinued__delete-all {
    font-size: var(--font-size-xs-sp);
  }
  .cart-discontinued__delete-all-text--pc {
    display: none;
  }
  .cart-discontinued__delete-all-text--sp {
    display: inline;
    font-size: var(--font-size-sm-sp);
  }
  .cart-discontinued__desc {
    font-size: var(--font-size-sm-pc);
  }
  .cart-discontinued__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .cart-discontinued__item {
    display: grid;
    grid-template-columns: 32px 1fr;
    -moz-column-gap: var(--space-16);
         column-gap: var(--space-16);
    row-gap: var(--space-8);
    align-items: start;
    padding: var(--space-16);
  }
  .cart-discontinued__thumb {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius);
  }
  .cart-discontinued__info {
    grid-column: 2;
    grid-row: 1;
    flex: unset;
  }
  .cart-discontinued__sku {
    font-size: var(--font-size-sm-sp);
  }
  .cart-discontinued__name {
    font-size: var(--font-size-body-sp);
  }
  .cart-discontinued__divider {
    display: none;
  }
  .cart-discontinued__delete {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: auto;
    font-size: var(--font-size-sm-sp);
  }
}
/* =========================================================
   関連製品ページ
   ========================================================= */
/* --- 対象製品セクション --- */
.target-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-top: var(--space-48);
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--color-border);
}

.target-product__title {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-text-sub);
}

.target-product__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.target-product__thumb {
  flex-shrink: 0;
  display: block;
  width: 112px;
  height: 112px;
  border-radius: var(--radius);
  overflow: hidden;
  transition: opacity 0.3s;
}

.target-product__thumb:hover {
  opacity: 0.7;
}

.target-product__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.target-product__body {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
}

.target-product__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.target-product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.target-product__badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-12);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs-pc);
  line-height: 1;
}

.target-product__badge--cat {
  color: var(--color-blue);
}

.target-product__name-set {
  display: flex;
  flex-direction: column;
}

.target-product__sku {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.target-product__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-24);
}

.target-product__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-black);
}

.target-product__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8) var(--space-24);
  min-width: 160px;
}

.target-product__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-blue);
  font-size: var(--font-size-body-pc);
}

.target-product__link:hover {
  text-decoration: underline;
}

.target-product__link-icon {
  display: inline-block;
  width: 6px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
  mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
}

/* --- SP --- */
@media (max-width: 767px) {
  .target-product {
    gap: var(--space-16);
    padding-bottom: var(--space-24);
    margin-top: var(--space-32);
  }
  .target-product__title {
    font-size: var(--font-size-h4-pc);
  }
  .target-product__item {
    align-items: flex-start;
    gap: var(--space-16);
  }
  .target-product__thumb {
    width: 80px;
    height: 80px;
  }
  .target-product__body {
    align-self: auto;
    gap: var(--space-16);
  }
  .target-product__head {
    gap: var(--space-8);
  }
  .target-product__badge {
    height: 24px;
    padding: 0 var(--space-8);
    font-size: 12px;
  }
  .target-product__sku {
    font-size: 16px;
  }
  .target-product__wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
  }
  .target-product__name {
    font-size: 18px;
  }
  .target-product__links {
    min-width: auto;
  }
  .target-product__link {
    font-size: var(--font-size-sm-pc);
  }
}
.ad-head {
  padding-bottom: var(--space-48);
  background: var(--color-white);
}

/* 2カラム: 左=記事情報 / 右=画像 */
.ad-head__layout {
  display: flex;
  gap: var(--space-96);
  align-items: flex-start;
}

.ad-head__left {
  flex: 1;
  min-width: 0;
}

.ad-head__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-24);
}

.ad-head__title {
  font-size: var(--font-size-h1-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.4;
  margin-bottom: var(--space-16);
}

.ad-head__subtitle {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-text-sub);
  line-height: 1.4;
  padding-bottom: 24px;
  border-bottom: 1px solid #DDD;
  margin-bottom: var(--space-24);
}

.ad-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}

.ad-head__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ad-head__meta-label {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-muted);
}

.ad-head__meta-date {
  font-size: var(--font-size-sm-pc);
}

.ad-head__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.75;
}

.ad-head__img-wrap {
  flex-shrink: 0;
  width: 540px;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
}

.ad-head__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .ad-head {
    padding: 0 0 var(--space-24);
  }
  .ad-head__layout {
    flex-direction: column-reverse;
    gap: var(--space-32);
  }
  .ad-head__img-wrap {
    width: 100%;
  }
  .ad-head__badges {
    margin-bottom: var(--space-8);
  }
  .ad-head__title {
    font-size: var(--font-size-h1-sp);
    margin-bottom: var(--space-8);
  }
  .ad-head__subtitle {
    font-size: var(--font-size-h3-sp);
  }
  .ad-head__meta {
    gap: var(--space-16);
  }
  .ad-head__meta-label {
    font-size: var(--font-size-sm-sp);
  }
  .ad-head__meta-date {
    font-size: var(--font-size-sm-sp);
  }
  .ad-head__desc {
    font-size: var(--font-size-body-sp);
  }
}
.ad-specs {
  padding: var(--space-48) 0;
  background: var(--color-white);
}

/* search-top__panel と同じスタイル */
.ad-specs__panel {
  background: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-24);
}

/* タイトル: search-top__panel-title と同じ */
.ad-specs__panel .ad-specs__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-16);
}

.ad-specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-12);
  list-style: none;
}

.ad-specs__grid li {
  display: flex;
  align-items: stretch;
}

/* guide-card スタイル */
.ad-specs__item {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: var(--space-12);
  background: var(--color-white);
  border-radius: var(--radius);
  transition: border-color 0.3s;
  width: 100%;
}

.ad-specs__thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
  transition: opacity 0.3s;
}

.ad-specs__item:hover .ad-specs__thumb {
  opacity: 0.7;
}

.ad-specs__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ad-specs__info {
  flex: 1;
  min-width: 0;
  padding-left: var(--space-16);
  padding-right: var(--space-8);
}

.ad-specs__name {
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
}

.ad-specs__item:hover .ad-specs__name {
  text-decoration: underline;
}

.ad-specs__chevron {
  flex-shrink: 0;
  display: inline-block;
  width: 6px;
  height: 10px;
  background-color: #222;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 767px) {
  .ad-specs {
    padding: var(--space-32) 0;
  }
  .ad-specs__panel {
    padding: var(--space-12) var(--space-12) var(--space-16);
  }
  .ad-specs__title {
    font-size: var(--font-size-h4-sp);
    margin-bottom: var(--space-16);
  }
  .ad-specs__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ad-specs__item {
    min-height: 64px;
    padding: var(--space-12) var(--space-8);
  }
  .ad-specs__thumb {
    width: 40px;
    height: 40px;
  }
  .ad-specs__name {
    font-size: var(--font-size-sm-sp);
  }
  .ad-specs__info {
    padding-left: var(--space-12);
  }
}
.ad-section {
  padding: var(--space-48) 0;
  background: var(--color-white);
}

.ad-article {
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

@media (max-width: 767px) {
  .ad-article {
    padding-top: var(--space-32);
    padding-bottom: var(--space-48);
  }
}
/* H2: section-title相当（赤アクセントライン付き） */
.ad-article h2,
.ad-section h2,
.ad-imgtext h2,
.ad-2col h2,
.ad-3col h2,
.ad-5col h2 {
  font-size: var(--font-size-h2-pc);
  position: relative;
  padding-bottom: var(--space-8);
  margin-top: var(--space-48);
  margin-bottom: var(--space-32);
}

.ad-article h2::after,
.ad-section h2::after,
.ad-imgtext h2::after,
.ad-2col h2::after,
.ad-3col h2::after,
.ad-5col h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--heading-h2-accent-width);
  height: 2px;
  background-color: var(--heading-accent-color);
}

.ad-article h2:first-child,
.ad-section h2:first-child,
.ad-imgtext h2:first-child,
.ad-2col h2:first-child,
.ad-3col h2:first-child,
.ad-5col h2:first-child {
  margin-top: 0;
}

/* H3: subsection-title相当 */
.ad-article h3,
.ad-section h3,
.ad-imgtext h3,
.ad-2col h3,
.ad-3col h3,
.ad-5col h3 {
  font-size: var(--font-size-h3-pc);
  color: var(--color-text-sub);
  margin-top: var(--space-48);
  margin-bottom: var(--space-24);
}

.ad-section h3:first-child,
.ad-imgtext h3:first-child,
.ad-2col h3:first-child,
.ad-3col h3:first-child,
.ad-5col h3:first-child,
.ad-article h3:first-child {
  margin-top: 0;
}

/* H4 */
.ad-article h4,
.ad-section h4,
.ad-imgtext h4,
.ad-2col h4,
.ad-3col h4,
.ad-5col h4 {
  display: flex;
  align-items: center;
  margin-top: var(--space-32);
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  background-color: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
}

.ad-article h4:first-child,
.ad-section h4:first-child,
.ad-imgtext h4:first-child,
.ad-2col h4:first-child,
.ad-3col h4:first-child,
.ad-5col h4:first-child {
  margin-top: 0;
}

/* H5 */
.ad-article h5,
.ad-section h5,
.ad-imgtext h5,
.ad-2col h5,
.ad-3col h5,
.ad-5col h5 {
  margin-top: var(--space-24);
  margin-bottom: var(--space-16);
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
}

.ad-article h5:first-child,
.ad-section h5:first-child,
.ad-imgtext h5:first-child,
.ad-2col h5:first-child,
.ad-3col h5:first-child,
.ad-5col h5:first-child {
  margin-top: 0;
}

.ad-article h6,
.ad-section h6,
.ad-imgtext h6,
.ad-2col h6,
.ad-3col h6,
.ad-5col h6 {
  margin-top: var(--space-24);
}

.ad-body-block:first-child {
  margin-top: 0;
}

/* H6 */
.ad-article h6,
.ad-section h6,
.ad-imgtext h6,
.ad-2col h6,
.ad-3col h6,
.ad-5col h6 {
  margin-bottom: var(--space-16);
  font-size: var(--font-size-h6-pc);
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* 本文エリア */
.ad-body p + p,
.ad-body .ad-body-contents + p,
.ad-body p + .ad-body-contents,
.ad-body .ad-body-contents + .ad-body-contents {
  margin-top: var(--space-32);
}

/* HTML無効(p)・HTML有効(.ad-body-contents)とも本文は line-height 175%・同フォントサイズで揃える（Figma 本文指定） */
.ad-body p,
.ad-body .ad-body-contents {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
}

.ad-body p {
  line-height: var(--line-height-body);
}

.ad-body a:not(.ad-movie-btns__btn) {
  color: var(--color-blue);
  text-decoration: underline;
  transition: opacity 0.3s;
}

.ad-body a:hover {
  opacity: 0.7;
}

/* センター配置画像 */
.ad-center-img {
  margin-top: var(--space-32);
  display: flex;
  justify-content: center;
}

.ad-center-img:first-child {
  margin-top: 0;
}

.ad-center-img__wrap {
  width: 100%;
  max-width: 840px;
}

.ad-center-img__img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

/* ボタンセット */
.ad-btn-set {
  margin-top: var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.ad-btn-set:first-child {
  margin-top: 0;
}

.ad-btn-set__title {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
}

.ad-btn-set__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-text-sub);
  line-height: 1.75;
}

.ad-btn-set__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 320px;
  min-height: 48px;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s;
}

.ad-btn-set__btn:hover {
  opacity: 0.7;
}

.ad-btn-set__btn--outline {
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  background: var(--color-white);
}

.ad-btn-set__btn--primary {
  border: 1px solid var(--color-blue);
  background: var(--color-blue);
  color: var(--color-white);
}

.ad-btn-set__btn--contact {
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  background: var(--color-white);
}

.ad-btn-set__chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 2col: ボタンを中央揃え（auto幅） */
.ad-2col__col .ad-btn-set {
  align-items: center;
}

/* 3col/5col: ボタン全幅 */
.ad-3col__col .ad-btn-set,
.ad-5col__col .ad-btn-set {
  align-items: stretch;
}

.ad-5col__col .ad-btn-set__btn {
  width: 100%;
}

/* テーブル */
.ad-table-wrap {
  margin-top: var(--space-32);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ad-table-wrap:first-child {
  margin-top: 0;
}

.ad-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--font-size-sm-pc);
}

.ad-table__th {
  background: var(--color-bg-disable);
  border: 1px solid var(--color-border);
  padding: var(--space-12);
  font-weight: 400;
  color: var(--color-black);
  text-align: left;
  white-space: nowrap;
  text-align: center;
  line-height: var(--line-height-base);
}

.ad-table__td {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-12);
  color: var(--color-black);
  vertical-align: middle;
  line-height: var(--line-height-base);
}

/* 行見出しテーブル: 3等分 */
.ad-table--row-head .ad-table__th {
  width: 33.3333333333%;
}

/* 箇条書きリスト */
.ad-list {
  margin-top: var(--space-32);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ad-list:first-child {
  margin-top: 0;
}

.ad-list__item {
  position: relative;
  padding-left: 13px;
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.5;
}

/* Figma: 箇条書きドットは #CCC */
.ad-list__item::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  background: #ccc;
  border-radius: 50%;
}

/* 動画ボタンセット: ボタン幅 177px 固定（PC）。
   全幅ブロック内のため auto-fill で折り返す
   （タブレット幅でも 177px を保ちつつ列数が減るだけ＝横スクロールしない） */
.ad-movie-btns {
  margin-top: var(--space-32);
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: var(--space-8) var(--space-12);
}

.ad-movie-btns:first-child {
  margin-top: 0;
}

/* imgtext内: 4列（テキスト列732pxで各177px。狭い時は縮小） */
.ad-movie-btns--sm {
  grid-template-columns: repeat(4, 1fr);
}

.ad-movie-btns__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 40px;
  padding: var(--space-8);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-blue);
  text-align: left;
  transition: opacity 0.3s;
}

.ad-movie-btns__btn:hover {
  opacity: 0.7;
}

/* 動画埋め込み（YouTube iframe） */
.ad-movie {
  margin-top: var(--space-32);
  display: flex;
  justify-content: flex-start;
}

.ad-movie:first-child {
  margin-top: 0;
}

.ad-movie__wrap {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-black);
}

.ad-movie__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

/* videoタグ用カスタムプレイヤー */
.ad-movie__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
  display: block;
}

.ad-movie__play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
  border: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

.ad-movie__play-btn.is-playing {
  opacity: 0;
  pointer-events: none;
}

.ad-movie__play-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .ad-section {
    padding: var(--space-32) 0 var(--space-32);
  }
  /* H2 SP */
  .ad-article h2,
.ad-section h2,
.ad-imgtext h2,
.ad-2col h2,
.ad-3col h2,
.ad-5col h2 {
    font-size: var(--font-size-h2-sp);
    margin-top: var(--space-32);
    margin-bottom: var(--space-24);
  }
  /* H3 SP */
  .ad-article h3,
.ad-section h3,
.ad-imgtext h3,
.ad-2col h3,
.ad-3col h3,
.ad-5col h3 {
    font-size: var(--font-size-h3-sp);
    margin-top: var(--space-32);
    margin-bottom: var(--space-16);
  }
  /* H4 SP */
  .ad-article h4,
.ad-section h4,
.ad-imgtext h4,
.ad-2col h4,
.ad-3col h4,
.ad-5col h4 {
    margin-top: var(--space-24);
    margin-bottom: var(--space-16);
    font-size: var(--font-size-h4-sp);
  }
  /* H5 SP */
  .ad-article h5,
.ad-section h5,
.ad-imgtext h5,
.ad-2col h5,
.ad-3col h5,
.ad-5col h5 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-12);
    font-size: var(--font-size-h5-sp);
  }
  /* H6 SP */
  .ad-article h6,
.ad-section h6,
.ad-imgtext h6,
.ad-2col h6,
.ad-3col h6,
.ad-5col h6 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-12);
    font-size: var(--font-size-h6-sp);
  }
  .ad-body p,
.ad-body .ad-body-contents {
    font-size: var(--font-size-body-sp);
  }
  .ad-body p + p, .ad-body .ad-body-contents + p, .ad-body p + .ad-body-contents, .ad-body .ad-body-contents + .ad-body-contents {
    margin-top: var(--space-24);
  }
  .ad-list__item {
    font-size: var(--font-size-body-sp);
  }
  /* 非見出し要素 SP */
  .ad-center-img {
    margin-top: var(--space-24);
  }
  .ad-btn-set {
    margin-top: var(--space-24);
    align-items: center;
    gap: var(--space-24);
  }
  .ad-btn-set__btn {
    font-size: var(--font-size-sm-sp);
    width: 280px;
  }
  .ad-btn-set__btn--contact img {
    width: 14px;
    height: 21px;
  }
  .ad-btn-set__title {
    font-size: var(--font-size-h5-sp);
  }
  .ad-btn-set__desc {
    font-size: var(--font-size-body-sp);
  }
  .ad-table-wrap {
    margin-top: var(--space-24);
  }
  .ad-table__th {
    font-size: var(--font-size-sm-sp);
    padding: var(--space-8);
  }
  /* テーブル列幅（Figma SP）: 1列目（見出し）を 96px に固定し、残り列は table-layout:fixed で均等割り（→ 96 / 131 / 131px）。
     列見出し(thead)は先頭th、行見出し(--row-head)は見出しthが対象。PC の3等分指定 calc(100% / 3) を SP で上書きする。 */
  .ad-table__th:first-child {
    width: 96px;
  }
  .ad-table--row-head .ad-table__th {
    width: 96px;
  }
  .ad-table__td {
    font-size: var(--font-size-sm-sp);
    padding: var(--space-8);
    vertical-align: middle;
  }
  .ad-list {
    margin-top: var(--space-24);
  }
  .ad-movie-btns {
    margin-top: var(--space-24);
    /* SP はボタン幅 175px 固定（全幅ブロック内のため auto-fill で折り返し） */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .ad-movie-btns--sm {
    grid-template-columns: repeat(2, 1fr);
  }
  .ad-movie-btns__btn {
    font-size: var(--font-size-sm-sp);
  }
  .ad-movie {
    margin-block: var(--space-24);
  }
  .ad-movie__wrap {
    max-width: 100%;
  }
}
/* 背景なし（白） */
.ad-imgtext {
  padding: var(--space-48) 0;
  background: var(--color-white);
}

.ad-imgtext__block {
  display: flex;
  gap: var(--space-48);
  align-items: flex-start;
  margin-bottom: var(--space-48);
}

.ad-imgtext__block:last-of-type {
  margin-bottom: 0;
}

/* テキスト左・画像右（デフォルト） */
.ad-imgtext__block--text-left {
  flex-direction: row;
}

/* テキスト右・画像左 */
.ad-imgtext__block--text-right {
  flex-direction: row-reverse;
}

/* テキストエリア: gap廃止・各要素のmarginで余白管理 */
.ad-imgtext__text {
  flex: 1;
  min-width: 0;
}

/* imgtext内の本文（ad-body-block外に直接置く場合）*/
.ad-imgtext__text .ad-body {
  margin-top: var(--space-16);
}

.ad-imgtext__text .ad-body ~ .ad-body {
  margin-top: var(--space-32);
}

.ad-imgtext__img-wrap {
  flex-shrink: 0;
  width: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
}

.ad-imgtext__img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .ad-imgtext {
    padding: var(--space-32) 0;
  }
  .ad-imgtext__block {
    flex-direction: column;
    gap: var(--space-24);
    margin-bottom: var(--space-32);
  }
  .ad-imgtext__block--text-right {
    flex-direction: column;
  }
  .ad-imgtext__img-wrap {
    width: 100%;
  }
  .ad-imgtext__img {
    aspect-ratio: 2/1;
  }
  .ad-imgtext__text .ad-body {
    margin-top: 0;
  }
  .ad-imgtext__text .ad-body ~ .ad-body {
    margin-top: var(--space-24);
  }
}
.ad-2col {
  padding: var(--space-48) 0;
}

.ad-2col__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48);
}

/* 列: gap廃止・各要素のmarginで余白管理 */
.ad-2col__img-wrap {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
}

.ad-2col__img-wrap:first-child {
  margin-top: 0;
  margin-bottom: var(--space-48);
}

.ad-2col__img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .ad-2col {
    padding: var(--space-32) 0;
  }
  .ad-2col__grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  .ad-2col__img-wrap {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
  }
  .ad-2col__img-wrap:first-child {
    margin-top: 0;
    margin-bottom: var(--space-32);
  }
}
.ad-3col {
  padding: var(--space-48) 0;
  background: var(--color-white);
}

.ad-3col__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.ad-3col__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.ad-3col__col .ad-3col__img-wrap {
  margin-bottom: 0;
}

.ad-3col__col h5,
.ad-3col__col h6 {
  margin-top: 0;
  margin-bottom: 0;
}

.ad-3col__col p {
  line-height: var(--line-height-base);
}

.ad-3col__col .ad-body {
  margin-top: calc(-1 * var(--space-8));
}

.ad-3col__col .ad-body p,
.ad-3col__col .ad-body .ad-body-contents {
  font-size: var(--font-size-sm-pc);
}

.ad-3col__col .ad-body p + p, .ad-3col__col .ad-body .ad-body-contents + p, .ad-3col__col .ad-body p + .ad-body-contents, .ad-3col__col .ad-body .ad-body-contents + .ad-body-contents {
  margin-top: var(--space-16);
}

.ad-3col__col .ad-btn-set {
  gap: var(--space-16);
  align-items: center;
}

.ad-3col__col .ad-btn-set__btn {
  min-height: 40px;
  padding: var(--space-8) var(--space-16);
}

.ad-3col__img-wrap {
  margin-bottom: var(--space-24);
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
}

.ad-3col__img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .ad-3col {
    padding: var(--space-32) 0;
  }
  .ad-3col__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ad-3col__img-wrap {
    margin-bottom: var(--space-16);
  }
  .ad-3col__col {
    padding: var(--space-16);
  }
  .ad-3col__col .ad-body p,
.ad-3col__col .ad-body .ad-body-contents {
    font-size: var(--font-size-sm-sp);
  }
}
.ad-5col {
  padding: var(--space-48) 0;
}

.ad-5col__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
}

.ad-5col__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.ad-5col__col .ad-5col__img-wrap {
  margin-top: 0;
  margin-bottom: 0;
}

.ad-5col__col h5,
.ad-5col__col h6 {
  margin-top: 0;
  margin-bottom: 0;
}

.ad-5col__col p {
  line-height: var(--line-height-base);
}

.ad-5col__col .ad-body {
  margin-top: calc(-1 * var(--space-8));
}

.ad-5col__col .ad-body p,
.ad-5col__col .ad-body .ad-body-contents {
  font-size: var(--font-size-sm-pc);
}

.ad-5col__col .ad-body p + p, .ad-5col__col .ad-body .ad-body-contents + p, .ad-5col__col .ad-body p + .ad-body-contents, .ad-5col__col .ad-body .ad-body-contents + .ad-body-contents {
  margin-top: var(--space-16);
}

.ad-5col__col .ad-btn-set {
  gap: var(--space-16);
}

.ad-5col__img-wrap {
  margin-bottom: var(--space-16);
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
}

.ad-5col__img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 5列コンテキスト: ボタン高さを32pxに（幅が狭いため） */
.ad-5col__col .ad-btn-set__btn {
  min-height: 32px;
  padding: var(--space-4) var(--space-16);
}

/* 最後の列（画像が本文の後）: img-wrapのmarginを逆転 */
.ad-5col__col--img-bottom .ad-5col__img-wrap {
  margin-bottom: 0;
}

.ad-3col__col *,
.ad-5col__col * {
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .ad-5col {
    padding: var(--space-40) 0 var(--space-32);
  }
  .ad-5col__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .ad-5col__img-wrap {
    margin-bottom: var(--space-12);
  }
  .ad-5col__col {
    padding: var(--space-8);
  }
  .ad-5col__col .ad-btn-set__btn {
    font-size: var(--font-size-sm-sp);
    gap: var(--space-4);
  }
  .ad-5col__col .ad-body p,
.ad-5col__col .ad-body .ad-body-contents {
    font-size: var(--font-size-sm-sp);
  }
}
.ad-rel-pages {
  padding: var(--space-48) 0;
  background: var(--color-white);
}

.ad-rel-pages__group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-24);
  background: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-24);
}

.ad-rel-pages__group-title {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-16);
}

/* 製品詳細リンクリスト: 3列グリッド */
.ad-rel-pages__prod-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-12);
}

.ad-rel-pages__prod-list li {
  display: flex;
  align-items: stretch;
}

.ad-rel-pages__prod-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.3s;
}

.ad-rel-pages__prod-thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-bg-disable);
  border-radius: var(--radius);
  transition: opacity 0.3s;
}

.ad-specs__item:hover .ad-rel-pages__prod-thumb {
  opacity: 0.7;
}

.ad-rel-pages__prod-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ad-rel-pages__prod-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  padding-left: var(--space-16);
  padding-right: var(--space-8);
}

.ad-specs__item:hover .ad-rel-pages__prod-name {
  text-decoration: underline;
}

.ad-rel-pages__prod-chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: #222;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 事例紹介: 製品詳細と同じ横並びスタイル 3列グリッド */
.ad-rel-pages__case-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-12);
}

.ad-rel-pages__case-list li {
  display: flex;
  align-items: stretch;
}

.ad-rel-pages__case-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.3s;
}

.ad-rel-pages__case-thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg-disable);
  transition: opacity 0.3s;
}

.ad-specs__item:hover .ad-rel-pages__case-thumb {
  opacity: 0.7;
}

.ad-rel-pages__case-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ad-rel-pages__case-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
  padding-left: var(--space-16);
  padding-right: var(--space-8);
}

.ad-specs__item:hover .ad-rel-pages__case-name {
  text-decoration: underline;
}

.ad-rel-pages__case-chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: #222;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.ad-rel-pages__back {
  display: flex;
  justify-content: center;
  margin-top: var(--space-32);
}

.ad-rel-pages__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 410px;
  height: auto;
  min-height: 48px;
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-size-sm-pc);
  border-width: 1px;
  white-space: normal;
  line-height: var(--line-height-base);
}

.ad-rel-pages__back-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 767px) {
  .ad-rel-pages {
    padding: var(--space-32) 0 var(--space-32);
  }
  .ad-rel-pages__group {
    padding: var(--space-12) var(--space-12) var(--space-16);
    margin-bottom: var(--space-16);
  }
  .ad-rel-pages__group-title {
    font-size: var(--font-size-h4-sp);
  }
  .ad-rel-pages__prod-list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ad-rel-pages__prod-item {
    gap: var(--space-12);
    padding: var(--space-12) var(--space-8);
    border: none;
  }
  .ad-rel-pages__prod-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
  }
  .ad-rel-pages__prod-name {
    font-size: var(--font-size-sm-sp);
    padding-left: var(--space-12);
  }
  .ad-rel-pages__prod-sku {
    font-size: var(--font-size-xs-sp);
  }
  .ad-rel-pages__case-list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ad-rel-pages__case-item {
    padding: var(--space-12) var(--space-8);
    border: none;
  }
  .ad-rel-pages__case-thumb {
    width: 40px;
    height: 40px;
  }
  .ad-rel-pages__case-name {
    font-size: var(--font-size-sm-sp);
    padding-left: var(--space-12);
  }
  .ad-rel-pages__back {
    margin-top: var(--space-24);
  }
  .ad-rel-pages__back-btn {
    font-size: var(--font-size-sm-sp);
    min-width: 0;
    width: 280px;
  }
}
.ad-cat-list {
  padding: var(--space-24) 0 0;
  border-top: 1px solid var(--color-border);
}

.ad-cat-list__h5 {
  margin-bottom: var(--space-16);
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
}

.ad-cat-list__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.ad-cat-list__grid li {
  display: flex;
  align-items: stretch;
}

.ad-cat-list__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12);
  background: var(--color-white);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  font-weight: 400;
  color: var(--color-blue);
  transition: opacity 0.3s;
}

.ad-cat-list__item:hover {
  opacity: 0.7;
}

.ad-cat-list__item.is-active {
  font-weight: 700;
}

.ad-cat-list__name {
  flex: 1;
  min-width: 0;
}

.ad-cat-list__chevron {
  flex-shrink: 0;
  display: inline-block;
  width: 6px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 767px) {
  .ad-cat-list {
    padding: var(--space-16) 0 0;
  }
  .ad-cat-list__h5 {
    font-size: var(--font-size-h5-sp);
  }
  .ad-cat-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ad-cat-list__item {
    font-size: var(--font-size-sm-sp);
    padding: var(--space-8);
  }
}
:is(.ad-head, .ad-specs, .ad-section, .ad-imgtext, .ad-2col, .ad-3col, .ad-5col, .ad-rel-pages) + :is(.ad-specs, .ad-section, .ad-imgtext, .ad-2col, .ad-3col, .ad-5col, .ad-rel-pages) {
  padding-top: 0;
}

/* ad-specs__title（h2）: 汎用h2のfont-size・装飾ラインをリセット */
.ad-article .ad-specs__title {
  font-size: var(--font-size-h4-pc);
  padding-bottom: 0;
  margin-top: 0;
}

.ad-article .ad-specs__title::after {
  display: none;
}

/* ad-rel-pages__group-title（h3）: ad-article h3の色・marginを上書き */
.ad-article .ad-rel-pages__group-title {
  font-size: var(--font-size-h4-pc);
  color: var(--color-black);
  margin-bottom: var(--space-16);
}

@media (max-width: 767px) {
  .ad-article .ad-specs__title {
    font-size: var(--font-size-h4-sp);
    margin-bottom: var(--space-16);
  }
  .ad-article .ad-rel-pages__group-title {
    font-size: var(--font-size-h4-sp);
  }
}
.ad-sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-32);
  margin-bottom: var(--space-24);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  scroll-margin-top: var(--header-total-height);
}

.ad-sec-head__sub {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.5;
}

.ad-sec-head__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
}

.sing-main .ad-imgtext__block:has(+ .ad-sec-head) {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .ad-sec-head {
    margin-top: var(--space-24);
    margin-bottom: var(--space-16);
    padding: var(--space-8) var(--space-12);
  }
  .ad-sec-head__sub {
    font-size: var(--font-size-body-sp);
  }
  .ad-sec-head__title {
    font-size: var(--font-size-h4-sp);
  }
}
.case-main .ad-article {
  padding-top: 0;
  padding-bottom: 0;
}

.case-main .case-lead {
  margin: 0;
  padding-bottom: 0;
  color: var(--color-text-sub);
}

.case-main .case-lead::after {
  display: none;
}

.case-main .case-voice-head {
  display: flex;
  align-items: center;
  background-color: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--color-black);
}

.case-main .case-voice-head::after {
  display: none;
}

.case-main .ad-cat-list__h5 {
  margin: 0 0 var(--space-16);
  padding-bottom: 0;
}

.case-main .ad-cat-list__h5::after {
  display: none;
}

@media (min-width: 768px) {
  .case-main .case-lead {
    font-size: var(--font-size-h3-pc);
  }
  .case-main .case-voice-head {
    margin: var(--space-48) 0 var(--space-24);
    padding: var(--space-16);
    font-size: var(--font-size-h4-pc);
  }
  .case-main .ad-cat-list__h5 {
    font-size: var(--font-size-h5-pc);
  }
  .case-main .ad-imgtext__text .ad-body {
    margin-top: var(--space-24);
  }
  .case-main .case-voice p {
    line-height: 1.5;
  }
  .case-main .ad-rel-pages__group-title {
    font-size: var(--font-size-h4-pc);
  }
  .case-main .ad-rel-pages__group {
    margin-bottom: var(--space-32);
  }
  .case-main .ad-rel-pages__prod-name,
.case-main .ad-rel-pages__case-name {
    font-size: var(--font-size-sm-pc);
  }
}
@media (max-width: 767px) {
  .case-main .case-lead {
    font-size: var(--font-size-h3-sp);
  }
  .case-main .case-voice-head {
    margin: var(--space-24) 0 var(--space-16);
    padding: var(--space-12);
    font-size: var(--font-size-h4-sp);
  }
  .case-main .ad-cat-list__h5 {
    font-size: var(--font-size-h5-sp);
  }
  .case-main .ad-imgtext__text .ad-body {
    margin-top: var(--space-16);
  }
  .case-main .ad-imgtext__img {
    aspect-ratio: 16/9;
  }
  .case-main .ad-imgtext__block {
    gap: var(--space-24);
    margin-bottom: var(--space-24);
  }
  .case-main .ad-rel-pages {
    padding-top: var(--space-32);
  }
  .case-main .ad-rel-pages__group {
    margin-bottom: var(--space-16);
    padding: var(--space-12) var(--space-12) var(--space-16);
  }
  .case-main .ad-specs__item {
    padding: var(--space-12) var(--space-8);
  }
  .case-main .ad-rel-pages__back-btn {
    font-size: var(--font-size-sm-sp);
  }
}
.ar-main {
  padding: var(--space-40) 0 var(--space-80);
  background: var(--color-bg-disable);
}

@media (max-width: 767px) {
  .ar-main {
    padding: var(--space-24) 0 var(--space-64);
  }
}
.ar-filter {
  margin-bottom: var(--space-40);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ----- タブ（記事種別） ----- */
.ar-filter__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.ar-filter__tab {
  flex-shrink: 0;
  height: 52px;
  padding: 0 var(--space-16);
  border-bottom: 3px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--font-size-body-pc);
  color: var(--color-text-muted);
  background: var(--color-white);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.ar-filter__tab.is-active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
  font-weight: 700;
}

.ar-filter__tab:hover {
  color: var(--color-blue);
}

/* ----- カテゴリチップグリッド ----- */
.ar-filter__chip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding: var(--space-16);
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}

.ar-filter__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
  background: var(--color-white);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  text-align: center;
}

.ar-filter__chip:hover {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.ar-filter__chip.is-active {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.ar-filter__chip:disabled {
  background: var(--color-bg-disable);
  color: var(--color-text-on-dark);
  border-color: var(--color-border);
  cursor: default;
  pointer-events: none;
}

.ar-filter__chip-count {
  margin-left: var(--space-4);
  color: var(--color-text-on-dark);
  font-size: var(--font-size-xs-pc);
}

/* ----- さらに絞り込む（アコーディオン） ----- */
.ar-filter__more-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 40px;
  padding: 0 var(--space-24);
  background: #999999;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.ar-filter__more-head:hover {
  background: #888888;
}

/* + / − アイコン */
.ar-filter__more-icon {
  position: relative;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.ar-filter__more-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 1px;
  background: #999999;
}

.ar-filter__more-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 9px;
  background: #999999;
  transition: opacity 0.3s;
}

/* 展開中は縦棒を非表示（+ → −） */
.ar-filter__more-head[aria-expanded=true] .ar-filter__more-icon::after {
  opacity: 0;
}

.ar-filter__more-title {
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-white);
}

/* アコーディオン本文 */
.ar-filter__more-body {
  padding: var(--space-24);
  border-top: 1px solid var(--color-border);
}

.ar-filter__more-body[hidden] {
  display: none;
}

/* フィルター行 */
.ar-filter__row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ar-filter__row-label-wrap {
  flex-shrink: 0;
  width: 180px;
  padding: var(--space-12) var(--space-16);
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-disable);
  display: flex;
  align-items: center;
}

.ar-filter__row-label {
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: var(--color-black);
}

.ar-filter__sub-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-8) var(--space-16);
  padding: var(--space-12) var(--space-24);
}

.ar-filter__sub-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
}

.ar-filter__sub-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  accent-color: var(--color-blue);
}

.ar-filter__sub-name {
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
}

.ar-filter__sub-count {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-on-dark);
  margin-left: auto;
}

.ar-filter__sub-item.is-disabled {
  pointer-events: none;
  cursor: default;
}

.ar-filter__sub-item.is-disabled .ar-filter__sub-name {
  color: var(--color-text-on-dark);
}

.ar-filter__sub-item.is-disabled .ar-filter__sub-checkbox {
  border-color: var(--color-border);
  background: var(--color-bg-disable);
  cursor: default;
}

@media (max-width: 767px) {
  .ar-filter {
    margin-bottom: var(--space-24);
  }
  .ar-filter__tab {
    font-size: var(--font-size-sm-sp);
    height: 44px;
    padding: 0 var(--space-12);
  }
  .ar-filter__chip-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ar-filter__chip {
    font-size: var(--font-size-xs-sp);
    height: 40px;
  }
  .ar-filter__row {
    flex-direction: column;
  }
  .ar-filter__row-label-wrap {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .ar-filter__sub-grid {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-12) var(--space-16);
  }
  .ar-filter__sub-name {
    font-size: var(--font-size-xs-sp);
  }
}
.ar-result {
  /* article-grid / pagination を内包する */
}

/* ツールバー（件数 + 並び替え） */
.ar-result__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-24);
}

.ar-result__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
}

.ar-result__count {
  color: var(--color-blue);
}

.ar-result__sort {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ar-result__sort-label {
  font-size: var(--font-size-sm-pc);
  color: var(--color-text-sub);
  white-space: nowrap;
}

.ar-result__sort-select {
  width: 280px;
  height: 40px;
  padding: 0 var(--space-32) 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("../images/icon_chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 12px;
  cursor: pointer;
}

.ar-result__sort-select:focus {
  outline: none;
  border-color: var(--color-blue);
}

@media (max-width: 767px) {
  .ar-result__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
  }
  .ar-result__title {
    font-size: var(--font-size-h5-sp);
  }
  .ar-result__sort-select {
    width: 200px;
  }
  .ar-result__sort-label {
    font-size: var(--font-size-xs-sp);
  }
}
.susnow-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  list-style: none;
}

.susnow-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
}

.susnow-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.susnow-card__vol {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  white-space: nowrap;
}

.susnow-card__date {
  font-size: var(--font-size-xs-sp);
  line-height: 1.5;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.susnow-card__feature {
  font-size: var(--font-size-sm-pc);
  line-height: 1.5;
  color: var(--color-black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.susnow-card__feature-label {
  color: var(--color-blue);
}

.susnow-card__thumb {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-12);
  border-radius: var(--radius);
  background-color: var(--color-bg-disable);
  margin-top: auto;
}

.susnow-card__thumb-img {
  width: 100%;
  aspect-ratio: 5/7;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

.susnow-card__thumb-ph {
  display: block;
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: var(--radius);
  background-color: var(--color-border);
}

.susnow-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 32px;
  padding: 0 var(--space-8);
  border-radius: var(--radius);
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.susnow-card__btn:hover {
  opacity: 0.7;
}

.susnow-card__btn-icon {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .susnow-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .susnow-card {
    padding: var(--space-8);
  }
  .susnow-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .susnow-card__vol {
    font-size: var(--font-size-h5-sp);
  }
  .susnow-card__feature {
    font-size: var(--font-size-sm-sp);
  }
  .susnow-card__thumb {
    padding: var(--space-8);
  }
  .susnow-card__btn {
    font-size: var(--font-size-sm-sp);
  }
}
.sing-main .ad-article {
  padding: 0;
}

.sing-section + .sing-section {
  margin-top: var(--space-48);
}

.sing-anchor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-48);
  list-style: none;
}

.sing-latest__hero {
  display: flex;
  gap: var(--space-48);
  align-items: flex-start;
  margin-block: var(--space-32);
}

.sing-latest__cover {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  border-radius: var(--radius);
  background-color: var(--color-bg-disable);
}

.sing-latest__cover-img {
  display: block;
  width: 240px;
  aspect-ratio: 5/7;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

.sing-latest__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-32);
}

.sing-latest__h3 {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  color: var(--color-text-sub);
  line-height: 1.5;
  margin-bottom: var(--space-24);
}

.sing-latest__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-32);
}

.sing-latest__list-item {
  position: relative;
  padding-left: 13px;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  line-height: 1.5;
}

.sing-latest__list-item::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  background: #ccc;
  border-radius: 50%;
}

.sing-latest__list-item a {
  text-decoration: underline;
  transition: opacity 0.3s;
}

.sing-latest__list-item a:hover {
  opacity: 0.7;
}

.sing-latest__list-sub {
  color: var(--color-blue);
}

.sing-latest__list-link {
  color: var(--color-black);
  text-decoration: none;
}

.sing-latest__dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 320px;
  height: 48px;
  padding: 0 var(--space-8);
  border-radius: var(--radius);
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  line-height: 1.5;
  transition: opacity 0.3s;
}

.sing-latest__dl:hover {
  opacity: 0.7;
}

.sing-latest__banner {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-top: var(--space-32);
}

.sing-bn__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.5;
  margin: var(--space-32) 0;
}

.sing-bn-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  list-style: none;
}

.sing-bn-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 239px;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
}

.sing-bn-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.sing-bn-card__no {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
  white-space: nowrap;
}

.sing-bn-card__date {
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  line-height: 1.5;
  white-space: nowrap;
}

.sing-bn-card__feature {
  font-size: var(--font-size-sm-pc);
  line-height: 1.5;
  color: var(--color-black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sing-bn-card__feature-label {
  color: var(--color-blue);
}

.sing-bn-card__thumb {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-12);
  border-radius: var(--radius);
  background-color: var(--color-bg-disable);
  margin-top: auto;
}

.sing-bn-card__thumb-img {
  width: 100%;
  aspect-ratio: 5/7;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

.sing-bn-card__thumb-ph {
  display: block;
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: var(--radius);
  background-color: var(--color-border);
}

.sing-bn-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.sing-bn-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100px;
  height: 32px;
  padding: 0 var(--space-8);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.sing-bn-card__btn--detail {
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  background-color: var(--color-white);
  transition: opacity 0.3s;
}

.sing-bn-card__btn--detail:hover {
  opacity: 0.7;
}

.sing-bn-card__btn-chevron {
  margin-left: var(--space-4);
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.sing-bn-card__btn--dl {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.sing-bn-card__btn--dl:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .sing-section + .sing-section {
    margin-top: var(--space-32);
  }
  .sing-anchor {
    margin-bottom: var(--space-32);
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
  .sing-anchor a {
    width: 100%;
  }
  .sing-latest__hero {
    flex-direction: column;
    gap: var(--space-24);
    margin-top: var(--space-24);
  }
  .sing-latest__cover {
    align-self: center;
    padding: var(--space-12);
  }
  .sing-latest__cover-img {
    width: 200px;
  }
  .sing-latest__body {
    gap: var(--space-24);
    width: 100%;
  }
  .sing-latest__h3 {
    font-size: var(--font-size-h3-sp);
    margin-bottom: var(--space-16);
  }
  .sing-latest__list {
    margin-top: var(--space-24);
  }
  .sing-latest__list-item {
    font-size: var(--font-size-sm-sp);
  }
  .sing-latest__dl {
    width: 280px;
    align-self: center;
    display: flex;
    margin: 0 auto;
    font-size: var(--font-size-sm-sp);
  }
  .sing-latest__banner {
    display: flex;
    margin: 0 auto;
    max-width: 310px;
    margin-top: var(--space-24);
  }
  .ad-sec-head {
    margin-top: var(--space-24);
    margin-bottom: var(--space-16);
    padding: var(--space-8) var(--space-12);
  }
  .ad-sec-head__title {
    font-size: var(--font-size-h5-sp);
  }
  .sing-bn__desc {
    font-size: var(--font-size-body-sp);
    margin: var(--space-24) 0;
  }
  .sing-bn-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .sing-bn-card {
    padding: var(--space-8);
    max-width: 100%;
  }
  .sing-bn-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .sing-bn-card__no {
    font-size: var(--font-size-h5-sp);
  }
  .sing-bn-card__date {
    font-size: var(--font-size-xs-sp);
  }
  .sing-bn-card__feature {
    font-size: var(--font-size-sm-sp);
  }
  .sing-bn-card__thumb {
    padding: var(--space-8);
  }
  .sing-bn-card__btn {
    flex: 1;
    width: auto;
    font-size: var(--font-size-sm-sp);
  }
}
.catalog-main .inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.catalog-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-bottom: var(--space-32);
  border-bottom: 1px solid var(--color-border);
}

.catalog-set__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.75;
}

.catalog-set__login-btn {
  width: 320px;
  height: 48px;
}

.catalog-link-set,
.sw-link-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
}

.catalog-anchor-link,
.sw-anchor-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) 13px var(--space-8) var(--space-16);
  background-color: var(--color-bg-disable);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
  line-height: 1.5;
  text-decoration: none;
  transition: opacity 0.3s;
}

.catalog-anchor-link:hover,
.sw-anchor-link:hover {
  opacity: 0.7;
}

.catalog-anchor-link__chevron,
.sw-anchor-link__chevron {
  display: inline-block;
  width: 11px;
  height: 6px;
  flex-shrink: 0;
  background-color: var(--color-blue);
  -webkit-mask: url("../images/icon_arrow.svg") no-repeat center/contain;
  mask: url("../images/icon_arrow.svg") no-repeat center/contain;
  transform: rotate(90deg);
}

.catalog-item-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  list-style: none;
}

.catalog-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.catalog-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background-color: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
}

.catalog-item__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
  overflow-wrap: anywhere;
}

.catalog-item__date-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 26px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.catalog-item__body {
  display: flex;
  gap: var(--space-48);
  align-items: flex-start;
}

.catalog-item__thumb-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 170px;
  padding: var(--space-12);
  background-color: var(--color-bg-disable);
  flex-shrink: 0;
}

.catalog-item__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: var(--radius);
  overflow: hidden;
}

.catalog-item__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

.catalog-item__dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  height: 32px;
  padding: 0 var(--space-8);
  background-color: var(--color-blue);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.catalog-item__dl-btn:hover {
  opacity: 0.7;
}

.catalog-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  flex: 1;
  min-width: 0;
}

.catalog-item__desc {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.catalog-item__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.catalog-item__related-heading {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-text-muted);
}

.catalog-item__related-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
}

.catalog-item__related-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.catalog-item__related-bullet {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-on-dark-primary);
  flex-shrink: 0;
  margin-top: 0.5em;
}

.catalog-item__related-link {
  font-size: var(--font-size-body-pc);
  color: var(--color-blue);
  line-height: 1.5;
  text-decoration: underline;
  transition: opacity 0.3s;
  font-size: var(--font-size-sm-pc);
}

.catalog-item__related-link:hover {
  opacity: 0.7;
}

.catalog-item__related-chevron {
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: var(--space-4);
  vertical-align: middle;
  background-color: var(--color-blue);
  -webkit-mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
  mask: url("../images/icon_chevron-right.svg") no-repeat center/contain;
}

@media (max-width: 767px) {
  .catalog-main .inner {
    gap: var(--space-32);
  }
  .catalog-set {
    padding-bottom: var(--space-24);
  }
  .catalog-set__login-btn {
    width: 280px;
    align-self: center;
  }
  .catalog-set__desc {
    font-size: var(--font-size-sm-pc);
  }
  .catalog-link-set {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-link-set li {
    align-items: stretch;
  }
  .catalog-anchor-link {
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: var(--space-8);
  }
  .catalog-item-set {
    gap: var(--space-24);
  }
  .catalog-item {
    gap: var(--space-16);
  }
  .catalog-item__header {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    flex-wrap: wrap;
    padding: var(--space-12);
    gap: var(--space-8) var(--space-12);
  }
  .catalog-item__title {
    font-size: 18px;
  }
  .catalog-item__date-badge {
    height: 24px;
    padding: 0 var(--space-8);
    font-size: var(--font-size-xs-sp);
  }
  .catalog-item__body {
    gap: var(--space-24);
  }
  .catalog-item__thumb-wrap {
    width: 120px;
  }
  .catalog-item__dl-btn-text {
    display: none;
  }
  .catalog-item__desc {
    font-size: 14px;
    line-height: 1.75;
  }
  .catalog-item__content {
    gap: var(--space-24);
  }
  .catalog-item__related {
    gap: var(--space-12);
  }
  .catalog-item__related-heading {
    font-size: 16px;
  }
  .catalog-item__related-link {
    font-size: var(--font-size-sm-sp);
  }
}
.news-main .cond-filter__tab {
  border-bottom-width: 3px;
  margin-bottom: 0;
}

.news-main .news-list__badge {
  border-color: var(--color-border-strong);
}

.news-main .news-list {
  margin-top: var(--space-48);
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.news-main .news-list__item {
  border-bottom: 1px solid var(--color-border);
}

.news-main .news-list__link {
  padding: var(--space-16);
}

@media (max-width: 767px) {
  .news-main .cond-filter__tabs {
    gap: var(--space-8);
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .news-main .cond-filter__tab {
    height: auto;
    padding: 0 var(--space-8) var(--space-16);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .news-main .cond-filter__tab:nth-child(-n+2) {
    min-width: 80px;
  }
  .news-main .news-list {
    margin-top: var(--space-32);
  }
  .news-main .news-list__link {
    padding: var(--space-12) var(--space-8);
    gap: var(--space-12);
  }
  .news-main .news-list__meta {
    gap: var(--space-8);
  }
  .news-main .pagination__btn {
    font-size: var(--font-size-sm-sp);
  }
}
.news-detail-main .ad-article {
  padding-top: 0;
  padding-bottom: 0;
}

.news-detail-main .ad-section {
  padding-bottom: 0;
}

.news-detail-main .nd-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.news-detail-main .nd-head__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.news-detail-main .nd-head__date {
  font-size: var(--font-size-body-pc);
  color: var(--color-text-muted);
}

.news-detail-main .nd-head__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.news-detail-main .nd-head__title {
  margin: 0;
  font-size: var(--font-size-h1-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
}

.news-detail-main .nd-back {
  display: flex;
  justify-content: center;
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .news-detail-main .nd-head {
    gap: var(--space-8);
    padding-bottom: var(--space-24);
  }
  .news-detail-main .nd-head__date {
    font-size: var(--font-size-body-sp);
  }
  .news-detail-main .nd-head__badge {
    height: 24px;
    padding: 0 var(--space-8);
    font-size: var(--font-size-xs-sp);
  }
  .news-detail-main .nd-head__title {
    font-size: var(--font-size-h1-sp);
  }
  .news-detail-main .ad-section {
    padding-top: var(--space-32);
  }
  .news-detail-main .nd-back {
    margin-top: var(--space-32);
    padding-top: var(--space-16);
  }
  .news-detail-main .nd-back .ad-rel-pages__back-btn {
    font-size: var(--font-size-sm-sp);
  }
}
.qa-cat-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
}

.qa-cat-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-shrink: 0;
  padding: 0 var(--space-16) var(--space-16);
  background-color: var(--color-white);
  border: 0;
  border-bottom: 3px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--color-text-faint);
  cursor: pointer;
  text-align: center;
  transition: color 0.3s, border-bottom-color 0.3s;
}

.qa-cat-tab.is-active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

.qa-cat-tab:hover:not(.is-active) {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

.qa-cat-tab__code {
  font-size: var(--font-size-h5-pc);
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}

.qa-cat-tab__name {
  display: block;
  min-height: 3em;
  font-size: var(--font-size-sm-pc);
  font-weight: 400;
  line-height: 1.5;
}

.qa-section {
  margin-top: var(--space-48);
}

.qa-section__title {
  margin: 0 0 var(--space-24);
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-sub);
}

.qa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.qa-item {
  border-bottom: 1px solid var(--color-border);
}

.qa-item.is-open {
  background-color: var(--color-bg-disable);
}

.qa-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-16);
  background: none;
  border: 0;
  text-align: left;
  color: var(--color-black);
  cursor: pointer;
}

.qa-item.is-open .qa-item__q {
  gap: var(--space-24);
}

.qa-item__q-text {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-body-pc);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
}

.qa-item.is-open .qa-item__q-text {
  font-weight: 700;
}

.qa-item__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-sm);
}

.qa-item__icon::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 1px;
  background-color: var(--color-blue);
  border-radius: 1px;
}

.qa-item__icon::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 9px;
  background-color: var(--color-blue);
  border-radius: 1px;
}

.qa-item.is-open .qa-item__icon {
  background-color: var(--color-border);
  border-color: var(--color-border);
}

.qa-item.is-open .qa-item__icon::before {
  background-color: var(--color-white);
}

.qa-item.is-open .qa-item__icon::after {
  opacity: 0;
}

.qa-item__panel {
  padding: 0 var(--space-16) var(--space-16);
}

.qa-item__panel[hidden] {
  display: none;
}

.qa-item__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-24);
  background-color: var(--color-white);
  border-radius: var(--radius);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
}

.qa-item__answer p {
  margin: 0;
  line-height: 1.75;
}

@media (max-width: 767px) {
  .qa-cat-tabs {
    gap: var(--space-4);
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  /* Chrome / Safari / Edge(Chromium版)用：スクロールバーを消す */
  .scroll-container::-webkit-scrollbar {
    display: none;
  }
  .qa-cat-tab {
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    padding: 0 var(--space-8) var(--space-16);
  }
  .qa-cat-tab__code {
    font-size: var(--font-size-h5-sp);
  }
  .qa-cat-tab__name {
    display: none;
  }
  .qa-section {
    margin-top: var(--space-32);
  }
  .qa-section__title {
    font-size: var(--font-size-h3-sp);
    margin-bottom: var(--space-16);
  }
  .qa-item__q {
    gap: var(--space-16);
    padding: var(--space-12) var(--space-8);
  }
  .qa-item.is-open .qa-item__q {
    gap: var(--space-16);
  }
  .qa-item__q-text {
    font-size: var(--font-size-body-sp);
  }
  .qa-item__panel {
    padding: 0 var(--space-8) var(--space-12);
  }
  .qa-item__answer {
    gap: var(--space-24);
    padding: var(--space-12) var(--space-8);
  }
  .qa-item__answer p {
    font-size: 14px;
  }
}
/* ============================================================
   各種ソフトウェア ページ
   .software-main （+ .page-content）
   ============================================================ */
/* セクション
   ------------------------------------------------------------ */
.sw-section {
  margin-bottom: var(--space-48);
}

.sw-section:last-child {
  margin-bottom: 0;
}

.sw-section__head {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
  margin-bottom: var(--space-32);
}

.sw-section__head::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-red);
  margin-top: var(--space-8);
}

/* テーブル
   ------------------------------------------------------------ */
.sw-table {
  width: 100%;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}

.sw-table__row {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.sw-table__th {
  flex-shrink: 0;
  width: 320px;
  padding: var(--space-12);
  background: var(--color-bg-disable);
  font-weight: 700;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--color-border);
}

.sw-table__td {
  flex: 1;
  min-width: 0;
  background: white;
}

/* 通常行（リンクリストが直接入る場合） */
.sw-table__td--simple {
  padding: var(--space-12);
  display: flex;
  align-items: center;
}

/* サブカテゴリ行（XA/SiO等、複数サブセルを持つ場合） */
.sw-table__subcell {
  padding: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.sw-table__subcell:last-child {
  border-bottom: none;
}

.sw-table__cell-head {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-black);
  line-height: 1.5;
  margin-bottom: var(--space-8);
}

/* リンクリスト
   ------------------------------------------------------------ */
.software-main .catalog-link-set {
  margin-bottom: var(--space-48);
}

.sw-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* li を flex 行にして ::before で黒丸を表示 */
.sw-link-list > li {
  position: relative;
  padding-left: 13px;
}

.sw-link-list > li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  background: var(--color-on-dark-primary);
  border-radius: 50%;
  position: absolute;
  top: 0.65em;
  left: 0;
}

/* 通常リンク */
.sw-link {
  display: block;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  transition: opacity 0.3s;
}

.sw-link:hover {
  opacity: 0.7;
}

/* テキスト部分のみ下線・inline で折り返す */
.sw-link__text {
  display: inline;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* NEW バッジ（sw-link__text の ::after で inline に続ける） */
.sw-link--new .sw-link__text::after {
  content: "NEW";
  display: inline-block;
  font-size: var(--font-size-sm-sp);
  font-weight: 400;
  color: var(--color-red);
  line-height: 1.5;
  margin-left: var(--space-4);
  text-decoration: none;
}

.sw-link--update .sw-link__text::after {
  content: "UPDATE";
  display: inline-block;
  font-size: var(--font-size-sm-sp);
  font-weight: 400;
  color: var(--color-red);
  line-height: 1.5;
  margin-left: var(--space-4);
  text-decoration: none;
}

/* リンク後のアイコン（::after で inline-block として追加） */
.sw-link--external::after,
.sw-link--download::after,
.sw-link--download-blue::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-color: var(--color-black);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  margin-left: var(--space-4);
}

/* 外部リンク: external-link アイコン */
.sw-link--external::after {
  width: 13px;
  height: 11px;
  -webkit-mask-image: url("../images/icon_external-link.svg");
          mask-image: url("../images/icon_external-link.svg");
}

/* ダウンロードリンク: download アイコン */
.sw-link--download::after {
  width: 14px;
  height: 14px;
  margin-bottom: 2px;
  background-color: transparent;
  background-image: url("../images/icon_download-tray-blue.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: none;
          mask-image: none;
}

/* chevron（sw-link__text の内部に inline で配置） */
.sw-link__chevron {
  display: inline-block;
  width: 6px;
  height: 10px;
  background-color: var(--color-black);
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  vertical-align: middle;
  margin-left: var(--space-4);
  text-decoration: none;
}

/* ============================================================
   SP レスポンシブ
   ============================================================ */
@media (max-width: 767px) {
  .sw-section {
    margin-bottom: var(--space-32);
  }
  .sw-section__head {
    font-size: 22px;
    margin-bottom: var(--space-24);
  }
  .sw-table__row {
    flex-direction: column;
  }
  .sw-table__th {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-8);
    font-size: var(--font-size-sm-sp);
  }
  .sw-table__td--simple {
    padding: var(--space-8);
  }
  .sw-table__subcell {
    padding: var(--space-8);
  }
  .software-main .catalog-link-set {
    margin-bottom: var(--space-32);
  }
  .sw-link {
    font-size: var(--font-size-xs-pc);
    flex-wrap: wrap;
  }
  .sw-link--new .sw-link__text::after, .sw-link--update .sw-link__text::after {
    font-size: var(--font-size-xs-sp);
  }
  .sw-link-list > li {
    align-items: flex-start;
  }
}
.inquiry-main {
  background-color: var(--color-white);
}

.ss_visitor_form,
.ss_enquete_form {
  background-color: var(--color-bg-disable);
  padding: 0 var(--space-32);
}
@media (max-width: 767px) {
  .ss_visitor_form,
.ss_enquete_form {
    padding: 0 var(--space-8);
  }
}

.ss_contents > div:nth-last-child(3) {
  padding-bottom: var(--space-32);
}
@media (max-width: 767px) {
  .ss_contents > div:nth-last-child(3) {
    padding-bottom: var(--space-16);
  }
}

.inquiry-required-note {
  font-size: var(--font-size-sm-pc);
  line-height: 1.75;
  padding: var(--space-32) var(--space-32) var(--space-16) var(--space-32);
  color: var(--color-black);
  background-color: var(--color-bg-disable);
}

.inquiry-required-note__mark {
  color: var(--color-red);
}

.smpForm {
  position: relative;
}

.ss_contents {
  display: flex;
  flex-direction: column;
}

.ss_field,
.ss_enquete_field {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.ss_visitor_form .ss_field:first-child {
  border-top: 1px solid var(--color-border);
}

.ss_visitor_form .ss_field:last-child,
.ss_enquete_form .ss_enquete_field:last-child {
  border-bottom: 1px solid var(--color-border);
}

.ss_field + .ss_field,
.ss_enquete_field + .ss_enquete_field {
  border-top: 0;
}

.ss_form_title,
.ss_enquete_title {
  width: 210px;
  flex-shrink: 0;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.5;
}

.ss_user_notnull {
  color: var(--color-red);
}

.ss_grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ss_field .ss_grid,
.ss_enquete_field .ss_grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.ss_field:not(#ss_name):not(#ss_name_ka) .ss_grid,
.ss_enquete_field .ss_grid {
  width: 100%;
  flex-direction: column;
}

.ss_input {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

#ss_name .ss_input,
#ss_name_ka .ss_input {
  flex: 0 0 auto;
  width: 252px;
  max-width: 252px;
  gap: var(--space-4) var(--space-8);
}

#ss_name .ss_input input[type=text],
#ss_name_ka .ss_input input[type=text] {
  width: 200px;
}

#ss_name .ss_input .ss_leftComment,
#ss_name_ka .ss_input .ss_leftComment {
  margin-right: 0;
}

#ss_zip .ss_input input,
#ss_VisitorData\.attribute68 .ss_input input,
#ss_VisitorData\.attribute68 .ss_input select,
.ss_input:has(> select[name$=".attribute243"]) select,
.ss_input:has(> input[name$=".attribute244"]) input,
.ss_input:has(> input[name$=".attribute245"]) input,
.ss_input:has(> select[name$=".attribute246"]) select {
  width: 240px;
  max-width: 240px;
}

.ss_input br {
  display: none;
}

.ss_input:has(input[type=checkbox]) br,
.ss_input:has(input[type=radio]) br {
  display: block;
  line-height: 0.4;
}

.ss_error_msg + br,
.ss_input:has(input[type=checkbox]) .ss_error_msg + br,
.ss_input:has(input[type=radio]) .ss_error_msg + br {
  display: none;
}

.ss_input:has(input[type=checkbox]),
.ss_input:has(input[type=radio]) {
  display: block;
  max-width: 100%;
  font-size: var(--font-size-body-pc);
  line-height: 1.8;
}

.ss_leftComment {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ss_input input[type=text],
.ss_input input[type=tel],
.ss_input input[type=email] {
  flex: 0 0 auto;
}

.ss_warning_label {
  display: none;
}

.ss_error_msg {
  display: block;
  font-size: var(--font-size-xs-pc);
  color: var(--color-red);
  line-height: 1.5;
  width: 100%;
  order: -1;
}

.ss_input input[type=text],
.ss_input input[type=tel],
.ss_input input[type=email],
.ss_input select,
.ss_input textarea {
  height: 48px;
  padding: var(--space-12);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-body-pc);
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-black);
  line-height: 1.5;
  transition: border-color 0.3s;
  width: 520px;
  max-width: 100%;
}

.ss_input input[type=text]::-moz-placeholder, .ss_input input[type=tel]::-moz-placeholder, .ss_input input[type=email]::-moz-placeholder, .ss_input textarea::-moz-placeholder {
  color: #aaa;
  opacity: 1;
}

.ss_input input[type=text]::placeholder,
.ss_input input[type=tel]::placeholder,
.ss_input input[type=email]::placeholder,
.ss_input textarea::placeholder {
  color: #aaa;
  opacity: 1;
}

.ss_input input[type=text]:focus,
.ss_input input[type=tel]:focus,
.ss_input input[type=email]:focus,
.ss_input select:focus,
.ss_input textarea:focus {
  outline: none;
  border-color: var(--color-black);
}

.ss_input textarea {
  height: 160px;
  padding: var(--space-12);
  resize: vertical;
}

.ss_input select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("../images/icon_chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 12px auto;
  padding-right: var(--space-32);
}

.ss_input:has(.ss_error_msg) input[type=text],
.ss_input:has(.ss_error_msg) input[type=tel],
.ss_input:has(.ss_error_msg) input[type=email],
.ss_input:has(.ss_error_msg) select,
.ss_input:has(.ss_error_msg) textarea {
  background-color: #fff2f3;
  border-color: var(--color-red);
}

.ss_leftComment {
  display: inline-block;
  width: 40px;
  font-size: 14px;
  color: var(--color-black);
  text-align: right;
  line-height: 1.5;
  margin-right: var(--space-8);
}

.ss_upComment {
  display: block;
  font-size: var(--font-size-body-pc);
  color: var(--color-text-sub);
  line-height: 1.5;
  width: 100%;
  margin-bottom: var(--space-4);
}

.ss_bottomComment {
  display: block;
  font-size: var(--font-size-xs-pc);
  color: var(--color-text-sub);
  line-height: 1.5;
  width: 100%;
}

.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_grid {
  display: grid;
  grid-template-columns: 224px 16px auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-content: start;
  gap: var(--space-4) var(--space-12);
  width: 100%;
}

/* .ss_inputの中身を.ss_grid上で直接配置できるようにする */
.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_input {
  display: contents;
}

/* 不要な警告アイコンとbr */
.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_warning_label,
.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_input br {
  display: none;
}

/* 5桁側のエラー */
.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_input:first-child .ss_error_msg {
  grid-column: 1;
  grid-row: 1;
  width: auto;
}

/* 3桁側のエラー */
.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_input:nth-child(2) .ss_error_msg {
  grid-column: 3;
  grid-row: 1;
  width: auto;
}

/* 5桁入力 */
.ss_field:has(input[name$="VisitorData.attribute101"]) input[name$="VisitorData.attribute101"] {
  grid-column: 1;
  grid-row: 2;
  width: 224px;
  max-width: none;
  flex: none;
}

/* ハイフン */
.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_leftComment {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  margin: 0;
  text-align: center;
  justify-self: center;
}

/* 3桁入力 */
.ss_field:has(input[name$="VisitorData.attribute101"]) input[name$="VisitorData.attribute102"] {
  grid-column: 3;
  grid-row: 2;
  width: 132px;
  max-width: none;
  flex: none;
}

/* 説明文 */
.ss_field:has(input[name$="VisitorData.attribute101"]) .ss_bottomComment {
  grid-column: 1/-1;
  grid-row: 3;
  width: 100%;
}

.ss_input input[type=file] {
  width: 100%;
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  cursor: pointer;
}

.ss_input input[type=file]::-webkit-file-upload-button {
  width: 240px;
  height: 40px;
  padding: var(--space-12) var(--space-16) var(--space-10) var(--space-16);
  background-color: transparent;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
  margin-right: var(--space-16);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ss_input input[type=file]::file-selector-button {
  width: 240px;
  height: 40px;
  padding: var(--space-12) var(--space-16) var(--space-10) var(--space-16);
  background-color: transparent;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
  margin-right: var(--space-16);
  transition: opacity 0.3s;
}

.ss_input input[type=file]::-webkit-file-upload-button:hover {
  opacity: 0.7;
}

.ss_input input[type=file]::file-selector-button:hover {
  opacity: 0.7;
}

.ss_input:has(.ss_error_msg) input[type=file]::-webkit-file-upload-button {
  border: 1px solid var(--color-red);
  color: var(--color-red);
}

.ss_input:has(.ss_error_msg) input[type=file]::file-selector-button {
  border: 1px solid var(--color-red);
  color: var(--color-red);
}

.ss_input input[type=checkbox],
.ss_input input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  top: -1px;
  flex-shrink: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin: 0;
  margin-right: var(--space-8);
  vertical-align: middle;
  transition: all 0.3s;
}

.ss_input input[type=radio] {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.ss_input input[type=checkbox]:checked,
.ss_input input[type=radio]:checked {
  background-color: var(--color-white);
  border-color: var(--color-black);
}

.ss_input input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid var(--color-blue);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.ss_input input[type=radio]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--color-blue);
  border-radius: 50%;
}

.ss_required_field .ss_input:has(.ss_error_msg) input[type=checkbox],
.ss_required_field .ss_input:has(.ss_error_msg) input[type=radio] {
  background-color: #fff2f3;
  border-color: var(--color-red);
}

.ss_required_field .ss_input input[type=checkbox]:checked,
.ss_required_field .ss_input input[type=radio]:checked {
  background-color: var(--color-white);
  border-color: var(--color-black);
}

.ss_input input[type=text][name*=_plus_text] {
  margin-left: 26px;
  flex: 1;
  max-width: 494px;
}

.ss_input > table:has(input:is([type=radio], [type=checkbox])) {
  display: block;
  width: 100%;
  border-spacing: 0;
}
.ss_input > table:has(input:is([type=radio], [type=checkbox])) > tbody {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  width: 100%;
}
.ss_input > table:has(input:is([type=radio], [type=checkbox])) > tbody > tr {
  display: contents;
}
.ss_input > table:has(input:is([type=radio], [type=checkbox])) > tbody > tr > td {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0;
  vertical-align: middle;
}
.ss_input > table:has(input:is([type=radio], [type=checkbox])) > tbody > tr > td > input:is([type=radio],
[type=checkbox]) {
  top: 1px;
}

.ss_input > input[name$=".attribute387"],
.ss_input > input[name$=".attribute380"] {
  margin-block: var(--space-4);
}

.ss_input > input[name$=".attribute387"]:not(:first-of-type),
.ss_input > input[name$=".attribute380"]:not(:first-of-type) {
  margin-left: var(--space-16);
}

.ss_btnArea {
  text-align: center;
  padding: var(--space-32) 0 0;
}

.ss_btnArea p {
  margin: 0;
}

.ss_btnArea input[type=button] {
  width: 340px;
  height: 48px;
  background-color: var(--color-red);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
  transition: opacity 0.3s;
}

.ss_btnArea input[type=button]:hover {
  opacity: 0.7;
}

.ss_btnArea input[type=button]:active {
  opacity: 0.7;
}

.ss_submit_loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ss_submit_loader .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  -webkit-animation: spinner-rotate 0.8s linear infinite;
          animation: spinner-rotate 0.8s linear infinite;
}

@-webkit-keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 767px) {
  .inquiry-required-note {
    font-size: var(--font-size-xs-sp);
    padding: var(--space-16) 8px var(--space-12);
  }
  .ss_contents {
    gap: 0;
  }
  .ss_field,
.ss_enquete_field {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-12) 0;
  }
  .ss_form_title,
.ss_enquete_title {
    width: auto;
    font-size: var(--font-size-body-sp);
  }
  .ss_input input[type=text],
.ss_input input[type=tel],
.ss_input input[type=email],
.ss_input select,
.ss_input textarea {
    font-size: var(--font-size-body-pc);
  }
  .ss_input textarea {
    height: 160px;
  }
  .ss_leftComment {
    font-size: var(--font-size-xs-sp);
  }
  .ss_upComment {
    font-size: var(--font-size-body-sp);
  }
  .ss_bottomComment {
    font-size: var(--font-size-xs-sp);
  }
  .ss_field:has(input[name$="VisitorData.attribute101"]) .ss_grid {
    grid-template-columns: minmax(0, 5fr) 16px minmax(0, 3fr);
    gap: var(--space-4) var(--space-8);
  }
  .ss_field:has(input[name$="VisitorData.attribute101"]) input[name$="VisitorData.attribute101"],
.ss_field:has(input[name$="VisitorData.attribute101"]) input[name$="VisitorData.attribute102"] {
    width: 100%;
    min-width: 0;
  }
  .ss_error_msg {
    font-size: var(--font-size-xs-sp);
  }
  .ss_input input[type=text],
.ss_input input[type=tel],
.ss_input input[type=email],
.ss_input select,
.ss_input textarea {
    width: 100%;
  }
  .ss_field .ss_grid,
.ss_enquete_field .ss_grid {
    flex-direction: column;
  }
  #ss_name .ss_grid,
#ss_name_ka .ss_grid {
    flex-direction: row;
    gap: var(--space-8);
  }
  .ss_input {
    width: 100%;
    max-width: 100%;
  }
  #ss_name .ss_input,
#ss_name_ka .ss_input {
    flex: 1;
    width: calc(50% - 4px);
    max-width: none;
  }
  #ss_name .ss_input input[type=text],
#ss_name_ka .ss_input input[type=text] {
    width: calc(100% - 48px);
  }
  .ss_input:has(input[type=checkbox]),
.ss_input:has(input[type=radio]) {
    font-size: var(--font-size-body-sp);
  }
  .ss_input input[type=checkbox],
.ss_input input[type=radio] {
    margin-right: var(--space-8);
  }
  .ss_input:has(input[type=checkbox]) br,
.ss_input:has(input[type=radio]) br {
    line-height: 0.3;
  }
  .ss_input input[type=text][name*=_plus_text] {
    min-width: 150px;
    width: calc(100% - 26px);
  }
  .ss_input input[type=file]::-webkit-file-upload-button {
    width: 180px;
    height: 36px;
    font-size: var(--font-size-xs-sp);
  }
  .ss_input input[type=file]::file-selector-button {
    width: 180px;
    height: 36px;
    font-size: var(--font-size-xs-sp);
  }
  .ss_btnArea {
    padding: var(--space-24) 0 0;
  }
  .ss_btnArea input[type=button] {
    width: 280px;
    max-width: 100%;
    height: 48px;
    font-size: var(--font-size-body-sp);
  }
}
.inquiry-complete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}
@media (max-width: 767px) {
  .inquiry-complete {
    gap: var(--space-24);
  }
}

.inquiry-complete__text {
  width: 100%;
  max-width: 1260px;
  font-size: var(--font-size-body-pc);
  color: var(--color-text-sub);
  line-height: 1.75;
}
@media (max-width: 767px) {
  .inquiry-complete__text {
    color: var(--color-black);
    font-size: var(--font-size-body-sp);
    line-height: 1.75;
  }
}

.inquiry-complete__text p {
  margin: 0;
}

.inquiry-complete__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-blue);
  text-decoration: none;
  font-size: var(--font-size-body-pc);
  transition: opacity 0.3s;
}
@media (max-width: 767px) {
  .inquiry-complete__link {
    font-size: var(--font-size-body-sp);
  }
}

.inquiry-complete__link:hover {
  text-decoration: underline;
}

.inquiry-complete__link-text {
  display: inline-block;
}

.inquiry-complete__chevron {
  display: inline-block;
  width: 6px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
          mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.c2-block {
  margin-top: var(--space-48);
}

.c2-adwrap .ad-movie-btns {
  grid-template-columns: repeat(auto-fill, 200px);
  gap: var(--space-12);
}

.c2-btnvar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.c2-btnvar__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.c2-figbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 320px;
  min-height: 48px;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  transition: background 0.3s, color 0.3s;
}

.c2-figbtn--sm {
  width: 200px;
  min-height: 40px;
}

.c2-figbtn--dl {
  background: var(--color-blue);
  color: var(--color-white);
  transition: opacity 0.3s;
}

.c2-figbtn--dl:hover {
  opacity: 0.7;
}

.c2-figbtn--ext {
  background: var(--color-white);
  color: var(--color-blue);
  transition: opacity 0.3s;
}

.c2-figbtn--ext:hover {
  opacity: 0.7;
}

.c2-figbtn__icon {
  flex-shrink: 0;
}

.c2-figbtn__icon--ext {
  filter: brightness(0) invert(13%);
}

.c2-figbtn-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: var(--space-12);
}

.c2-dlcard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.subsection-title + .c2-dlcard-grid {
  margin-top: var(--space-24);
}

.c2-dlcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 0 0 calc((100% - var(--space-16) * 4) / 5);
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.c2-dlcard__img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-border);
}

.c2-dlcard__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.c2-dlcard__body {
  display: flex;
  flex-direction: column;
}

.c2-dlcard__title {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
}

.c2-dlcard__subtitle {
  font-size: var(--font-size-h6-pc);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: var(--space-16);
}

.c2-dlcard__text {
  font-size: var(--font-size-sm-pc);
  color: var(--color-black);
  line-height: var(--line-height-base);
  margin-top: var(--space-8);
}

.c2-dlcard__btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 32px;
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  transition: opacity 0.3s;
}

.c2-dlcard__btn:hover {
  opacity: 0.7;
}

.c2-emphasis {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.c2-emphasis__box {
  padding: var(--space-24);
  border: 2px solid var(--color-red);
  border-radius: var(--radius);
}

.c2-emphasis__title {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
}

.c2-emphasis__subtitle {
  margin-top: var(--space-24);
  font-size: var(--font-size-h6-pc);
  font-weight: 700;
  color: var(--color-text-muted);
}

.c2-emphasis__body {
  margin-top: var(--space-16);
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: var(--line-height-body);
}

.c2-emphasis__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
}

.c2-emphasis__col {
  flex: 0 0 calc((100% - var(--space-32) * 3) / 4);
}

.c2-emphasis__col-head {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  color: var(--color-black);
}

.c2-emphasis__col .ad-list {
  margin-top: var(--space-16);
}

.c2-anchornav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
}

.c2-anchornav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-16);
  background: var(--color-bg-disable);
  border-radius: var(--radius);
  font-size: var(--font-size-sm-pc);
  color: var(--color-blue);
  transition: opacity 0.3s;
}

.c2-anchornav__link:hover {
  opacity: 0.7;
}

.c2-anchornav__chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon_arrow-down.svg");
  mask-image: url("../images/icon_arrow-down.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.c2-stepbar {
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.c2-stepbar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border);
}

.c2-stepbar__num {
  flex-shrink: 0;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.c2-stepbar__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: var(--color-text-sub);
  border-radius: var(--radius);
  color: var(--color-white);
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
}

.c2-stepbar__tri {
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 15px solid var(--color-border);
}

.c2-stepbar__right {
  flex: 1;
  min-width: 0;
}

.c2-stepbar__right--img-sm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
}

.c2-stepbar__right--img-sm .c2-stepbar__body {
  flex: 1;
  min-width: 0;
}

.c2-stepbar__right--img-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.c2-stepbar__right--img-lg .c2-stepbar__img {
  align-self: flex-end;
}

.c2-stepbar__body {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: var(--line-height-base);
}

.c2-stepbar__img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius);
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--color-border);
}

.c2-stepbar__img--sm {
  width: 360px;
  height: auto;
}

.c2-stepbar__img--lg {
  max-width: 840px;
  height: auto;
}

.c2-numstep {
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.c2-numstep__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border);
}

.c2-numstep__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-text-sub);
  border-radius: var(--radius);
  color: var(--color-white);
  font-size: var(--font-size-body-pc);
  font-weight: 700;
}

.c2-numstep__right {
  flex: 1;
  min-width: 0;
}

.c2-numstep__right--img-sm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
}

.c2-numstep__right--img-sm .c2-numstep__body {
  flex: 1;
  min-width: 0;
}

.c2-numstep__right--img-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.c2-numstep__right--img-lg .c2-numstep__img {
  align-self: flex-end;
}

.c2-numstep__body {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: var(--line-height-base);
}

.c2-numstep__img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius);
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--color-border);
}

.c2-numstep__img--sm {
  width: 360px;
  height: auto;
}

.c2-numstep__img--lg {
  max-width: 840px;
  height: auto;
}

.c2-multi {
  display: flex;
  gap: var(--space-96);
  align-items: flex-start;
}

.c2-multi__text {
  flex: 1;
  min-width: 0;
}

.c2-multi .ad-article {
  padding: 0;
}

.c2-imgtable {
  display: flex;
  gap: var(--space-48);
  align-items: flex-start;
}

.c2-imgtable__img-wrap {
  flex-shrink: 0;
  width: 480px;
  height: auto;
  border-radius: var(--radius);
  overflow: hidden;
}

.c2-imgtable__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.c2-imgtable__table-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.c2-spectable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm-pc);
}

.c2-spectable__th {
  width: 160px;
  padding: var(--space-12);
  background: var(--color-bg-disable);
  border: 1px solid var(--color-border);
  font-weight: 400;
  color: var(--color-black);
  text-align: left;
  vertical-align: middle;
}

.c2-spectable__td {
  padding: var(--space-12);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-black);
  line-height: var(--line-height-base);
}

.c2-spectable__td--em {
  font-weight: 700;
  color: var(--color-red);
}

.c2-subhead {
  margin-top: var(--space-48);
  margin-bottom: var(--space-24);
}

.c2-block .sw-link__chevron {
  margin-left: var(--space-4);
}

.c2-linklist--blue .sw-link {
  color: var(--color-blue);
}

.c2-linklist--blue .sw-link__chevron {
  background-color: var(--color-blue);
}

.c2-linklist--blue .sw-link--external::after {
  background-color: var(--color-black);
}

.c2-dl-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  max-width: 480px;
  margin: auto;
}

.c2-dl-modal__close-wrap {
  display: flex;
  justify-content: flex-end;
}

.c2-dl-modal__close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.c2-dl-modal__close::before,
.c2-dl-modal__close::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
}

.c2-dl-modal__close::before {
  transform: rotate(45deg);
}

.c2-dl-modal__close::after {
  transform: rotate(-45deg);
}

.c2-dl-modal__close:hover {
  opacity: 0.7;
}

.c2-dl-modal__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  background: var(--color-white);
  border-radius: var(--radius);
}

.c2-dl-modal__title {
  font-size: var(--font-size-h4-pc);
  font-weight: 700;
  color: var(--color-black);
}

.c2-dl-modal__text {
  font-size: var(--font-size-body-pc);
  color: var(--color-black);
  line-height: var(--line-height-body);
}

@media (max-width: 767px) {
  .c2-block {
    margin-top: var(--space-32);
  }
  .c2-btnvar {
    align-items: stretch;
  }
  .c2-btnvar__stack {
    align-items: center;
  }
  .c2-figbtn {
    font-size: var(--font-size-sm-sp);
    width: 280px;
  }
  .c2-figbtn--sm {
    width: 100%;
  }
  .c2-figbtn-grid {
    font-size: var(--font-size-sm-sp);
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .c2-dlcard {
    flex: 0 0 calc((100% - var(--space-16)) / 2);
    padding: var(--space-8);
  }
  .c2-emphasis__col {
    flex: 0 0 100%;
  }
  .c2-anchornav {
    align-items: stretch;
  }
  .c2-anchornav > li {
    display: flex;
    flex: 0 0 calc((100% - var(--space-8)) / 2);
  }
  .c2-anchornav__link {
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: var(--space-8);
    font-size: var(--font-size-sm-sp);
  }
  .c2-stepbar__item,
.c2-numstep__item {
    gap: var(--space-16);
  }
  .c2-stepbar__right--img-sm,
.c2-numstep__right--img-sm {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }
  .c2-stepbar__img,
.c2-numstep__img {
    width: 100%;
  }
  .c2-stepbar__right--img-lg .c2-stepbar__img,
.c2-numstep__right--img-lg .c2-numstep__img {
    align-self: stretch;
  }
  .c2-stepbar__num {
    width: 48px;
  }
  .c2-stepbar__badge {
    height: 40px;
    font-size: var(--font-size-h5-sp);
  }
  .c2-stepbar__body {
    font-size: var(--font-size-body-sp);
  }
  .c2-stepbar__right--img-lg {
    gap: var(--space-16);
  }
  .c2-numstep__badge {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-body-sp);
  }
  .c2-numstep__body {
    font-size: var(--font-size-body-sp);
  }
  .c2-numstep__right--img-lg {
    gap: var(--space-16);
  }
  .c2-multi {
    flex-direction: column;
    gap: var(--space-32);
  }
  .c2-multi .ad-article h4 {
    font-size: var(--font-size-h4-sp);
    padding: var(--space-12);
  }
  .c2-multi .ad-btn-set__btn {
    font-size: var(--font-size-sm-sp);
  }
  .c2-multi .ad-btn-set__btn--contact img {
    width: 14px;
    height: 11px;
  }
  .c2-imgtable {
    flex-direction: column;
    gap: var(--space-24);
  }
  .c2-imgtable__img-wrap {
    width: 100%;
  }
  .c2-imgtable__table-wrap {
    order: -1;
  }
  .c2-spectable {
    font-size: var(--font-size-sm-sp);
  }
  .c2-spectable__th {
    width: 120px;
  }
  .c2-spectable__th,
.c2-spectable__td {
    padding: var(--space-8);
  }
  .c2-block > .section-title {
    margin-bottom: var(--space-24);
  }
  .c2-block:has(.c2-adwrap) > .section-title,
.c2-block:has(.c2-btnvar) > .section-title,
.c2-block:has(.c2-emphasis) > .section-title {
    margin-bottom: var(--space-32);
  }
  .c2-dlcard-grid {
    gap: var(--space-8);
  }
  .subsection-title + .c2-dlcard-grid {
    margin-top: var(--space-16);
  }
  .c2-emphasis {
    gap: var(--space-24);
  }
  .c2-emphasis__title {
    font-size: var(--font-size-h5-sp);
  }
  .c2-emphasis__subtitle {
    margin-top: var(--space-16);
    font-size: var(--font-size-h6-sp);
  }
  .c2-emphasis__body {
    margin-top: var(--space-12);
    font-size: var(--font-size-body-sp);
  }
  .c2-emphasis__cols {
    gap: var(--space-16);
  }
  .c2-emphasis__col-head {
    font-size: var(--font-size-h5-sp);
  }
  .c2-emphasis__col .ad-list {
    margin-top: var(--space-12);
  }
  .c2-subhead {
    margin-top: var(--space-32);
    margin-bottom: var(--space-16);
  }
  .c2-adwrap .ad-movie-btns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .c2-dlcard__title {
    font-size: var(--font-size-h5-sp);
  }
  .c2-dlcard__subtitle {
    font-size: var(--font-size-h6-sp);
  }
  .c2-dlcard__text {
    font-size: var(--font-size-sm-sp);
  }
  .c2-dlcard__btn {
    font-size: var(--font-size-sm-sp);
  }
  .c2-emphasis__box {
    padding: var(--space-16);
  }
}
/* ============================================================
   サービスページ
   _service.scss
   ============================================================ */
/* ------------------------------------------------------------
   KV セクション
   ------------------------------------------------------------ */
.service-kv {
  background-color: var(--color-bg-disable);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.service-kv__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 280px;
  overflow: hidden;
}

.service-kv__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  flex-shrink: 0;
  width: 527px;
}

.service-kv__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.service-kv__title {
  font-size: var(--font-size-h1-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
}

.service-kv__subtitle {
  font-size: var(--font-size-h3-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-sub);
}

.service-kv__desc {
  font-size: var(--font-size-body-pc);
  line-height: 1.75;
  color: var(--color-black);
}

.service-kv__images {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 280px;
}

/* SP専用: 上部画像バナー（PC非表示） */
.service-kv__sp-banner {
  display: none;
}

.service-kv__sp-banner img {
  display: block;
  width: 100%;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.service-kv__image-col {
  flex-shrink: 0;
  width: 168px;
  height: 280px;
  margin-right: -70px;
}

.service-kv__image-col--last {
  margin-right: 0;
}

.service-kv__image-col img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .service-kv {
    display: flex;
    flex-direction: column;
    border-top: none;
  }
  .service-kv__sp-banner {
    display: block;
  }
  .service-kv__inner {
    height: auto;
    padding-top: var(--space-16);
    padding-bottom: var(--space-24);
    flex-direction: column;
  }
  .service-kv__left {
    width: 100%;
    gap: var(--space-16);
  }
  .service-kv__title-group {
    gap: var(--space-8);
  }
  .service-kv__title {
    font-size: var(--font-size-h1-sp);
  }
  .service-kv__subtitle {
    font-size: var(--font-size-h3-sp);
  }
  .service-kv__desc {
    font-size: var(--font-size-body-sp);
  }
  .service-kv__images {
    display: none;
  }
}
/* ------------------------------------------------------------
   コンテンツセクション
   ------------------------------------------------------------ */
.service-contents {
  background-color: var(--color-white);
  padding-bottom: var(--space-96);
}

.service-contents__inner {
  padding-top: var(--space-64);
}

.service-contents__desc {
  font-size: var(--font-size-body-pc);
  line-height: 1.75;
  color: var(--color-black);
  margin-bottom: var(--space-32);
}

@media (max-width: 767px) {
  .service-contents {
    padding-bottom: var(--space-48);
  }
  .service-contents__inner {
    padding-top: var(--space-32);
  }
  .service-contents__desc {
    margin-bottom: var(--space-24);
    font-size: var(--font-size-body-sp);
  }
}
/* ------------------------------------------------------------
   タブナビゲーション
   ------------------------------------------------------------ */
.service-tabs {
  margin-bottom: var(--space-48);
}

.service-tabs--bottom {
  margin-top: var(--space-48);
  margin-bottom: 0;
}

.service-tabs__list {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  list-style: none;
  margin-bottom: -3px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.service-tabs__list::-webkit-scrollbar {
  display: none;
}

.service-tabs__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-12);
  height: 92px;
  min-width: 167px;
  width: 100%;
  padding: 0 var(--space-16) var(--space-16);
  border-bottom: 3px solid rgba(221, 221, 221, 0.87);
  border-radius: var(--radius) var(--radius) 0 0;
  white-space: nowrap;
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-faint);
  text-decoration: none;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.service-tabs__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* HTML内のimgは非表示にして、
   CSSのbackground-imageでSVGを切り替える */
.service-tabs__icon img {
  display: none;
}

@media (max-width: 767px) {
  .service-tabs {
    margin-bottom: var(--space-32);
  }
  .service-tabs--bottom {
    margin-top: var(--space-32);
    margin-bottom: 0;
  }
  .service-tabs__list {
    margin-right: calc(-1 * var(--gutter-sp));
  }
  .service-tabs__link {
    height: 72px;
    min-width: 80px;
    gap: var(--space-4);
    padding: 0 var(--space-8) var(--space-16);
    font-size: var(--font-size-h5-sp);
  }
  .service-tabs__icon {
    height: 22px;
  }
}
/* ------------------------------------------------------------
   サービス向けタブメニューの配色設定
   ------------------------------------------------------------ */
.service-tabs__item--blue {
  --tab-color: var(--service-blue);
}

.service-tabs__item--purple {
  --tab-color: var(--service-purple);
}

.service-tabs__item--pink {
  --tab-color: var(--service-pink);
}

.service-tabs__item--red {
  --tab-color: var(--service-crimson);
}

.service-tabs__item--orange {
  --tab-color: var(--service-orange);
}

.service-tabs__item--yellow {
  --tab-color: var(--service-yellow);
}

.service-tabs__item--lime {
  --tab-color: var(--service-lime);
}

/* ------------------------------------------------------------
   アイコン
   通常時：通常SVG
   active / hover / focus-visible：active SVG
   ------------------------------------------------------------ */
/* 全体 */
.service-tabs__item--blue .service-tabs__icon {
  width: 32px;
  background-image: url("../images/service-tab-icon-all.svg");
}

.service-tabs__item--blue.is-active .service-tabs__icon,
.service-tabs__item--blue .service-tabs__link:hover .service-tabs__icon,
.service-tabs__item--blue .service-tabs__link:focus-visible .service-tabs__icon {
  background-image: url("../images/service-tab-icon-all-active.svg");
}

/* 1 構想支援 */
.service-tabs__item--purple .service-tabs__icon {
  width: 32px;
  background-image: url("../images/service-tab-icon-1.svg");
}

.service-tabs__item--purple.is-active .service-tabs__icon,
.service-tabs__item--purple .service-tabs__link:hover .service-tabs__icon,
.service-tabs__item--purple .service-tabs__link:focus-visible .service-tabs__icon {
  background-image: url("../images/service-tab-icon-1-active.svg");
}

/* 2 設計支援 */
.service-tabs__item--pink .service-tabs__icon {
  width: 32px;
  background-image: url("../images/service-tab-icon-2.svg");
}

.service-tabs__item--pink.is-active .service-tabs__icon,
.service-tabs__item--pink .service-tabs__link:hover .service-tabs__icon,
.service-tabs__item--pink .service-tabs__link:focus-visible .service-tabs__icon {
  background-image: url("../images/service-tab-icon-2-active.svg");
}

/* 3 見積もり・発注支援 */
.service-tabs__item--red .service-tabs__icon {
  width: 35px;
  background-image: url("../images/service-tab-icon-3.svg");
}

.service-tabs__item--red.is-active .service-tabs__icon,
.service-tabs__item--red .service-tabs__link:hover .service-tabs__icon,
.service-tabs__item--red .service-tabs__link:focus-visible .service-tabs__icon {
  background-image: url("../images/service-tab-icon-3-active.svg");
}

/* 4 製作支援 */
.service-tabs__item--orange .service-tabs__icon {
  width: 44px;
  background-image: url("../images/service-tab-icon-4.svg");
}

.service-tabs__item--orange.is-active .service-tabs__icon,
.service-tabs__item--orange .service-tabs__link:hover .service-tabs__icon,
.service-tabs__item--orange .service-tabs__link:focus-visible .service-tabs__icon {
  background-image: url("../images/service-tab-icon-4-active.svg");
}

/* 5 納品 */
.service-tabs__item--yellow .service-tabs__icon {
  width: 48px;
  background-image: url("../images/service-tab-icon-5.svg");
}

.service-tabs__item--yellow.is-active .service-tabs__icon,
.service-tabs__item--yellow .service-tabs__link:hover .service-tabs__icon,
.service-tabs__item--yellow .service-tabs__link:focus-visible .service-tabs__icon {
  background-image: url("../images/service-tab-icon-5-active.svg");
}

/* 6 リサイクル */
.service-tabs__item--lime .service-tabs__icon {
  width: 30px;
  background-image: url("../images/service-tab-icon-6.svg");
}

.service-tabs__item--lime.is-active .service-tabs__icon,
.service-tabs__item--lime .service-tabs__link:hover .service-tabs__icon,
.service-tabs__item--lime .service-tabs__link:focus-visible .service-tabs__icon {
  background-image: url("../images/service-tab-icon-6-active.svg");
}

/* ------------------------------------------------------------
   タブのアクティブ・hover・focus
   ------------------------------------------------------------ */
.service-tabs__item.is-active .service-tabs__link,
.service-tabs__item .service-tabs__link:focus-visible,
.service-tabs__item .service-tabs__link:hover {
  border-bottom-color: var(--tab-color, var(--service-blue));
  color: var(--tab-color, var(--service-blue));
}

.service-tabs__item.is-active .service-tabs__link .service-tabs__icon,
.service-tabs__item .service-tabs__link:focus-visible .service-tabs__icon,
.service-tabs__item .service-tabs__link:hover .service-tabs__icon {
  color: var(--tab-color, var(--service-blue));
}

/* ------------------------------------------------------------
   サービスカードグリッド
   ------------------------------------------------------------ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  list-style: none;
}

.service-contents .service-grid {
  margin-bottom: var(--space-32);
}

.service-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-disable);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  height: 100%;
}

.service-card__img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.service-card:hover .service-card__img-wrap {
  opacity: 0.7;
}

.service-card__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  position: relative;
  flex: 1;
}

/* chevron（CSS mask / icon_chevron-right.svg 流用） */
.service-card__chevron {
  position: absolute;
  top: calc(var(--space-16) + 0.65em);
  right: var(--space-16);
  display: block;
  width: 6px;
  height: 10px;
  background-color: var(--color-black);
  mask-image: url("../images/icon_chevron-right.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../images/icon_chevron-right.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.service-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-right: var(--space-24);
}

.service-card:hover .service-card__title {
  text-decoration: underline;
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.service-card__icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.service-card__name {
  font-size: var(--font-size-h5-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
}

.service-card__desc {
  font-size: var(--font-size-sm-pc);
  line-height: 1.5;
  color: var(--color-black);
}

@media (max-width: 767px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16) var(--space-8);
  }
  .service-contents .service-grid {
    margin-bottom: var(--space-24);
  }
  .service-card__body {
    padding: var(--space-8);
    gap: var(--space-8);
  }
  .service-card__title {
    padding-right: var(--space-16);
  }
  .service-card__chevron {
    top: calc(var(--space-8) + 0.5em);
    right: var(--space-8);
  }
  .service-card__name {
    font-size: var(--font-size-h5-sp);
    white-space: normal;
  }
  .service-card__desc {
    font-size: var(--font-size-sm-sp);
  }
}
/* ============================================================
   サービス下層ページ
   ============================================================ */
/* ------------------------------------------------------------
   サブサービスリスト（製作支援内の4項目など）
   ------------------------------------------------------------ */
.service-detail-items {
  background-color: var(--color-bg-disable);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border-radius: var(--radius);
}

.service-detail-item {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-12);
  text-decoration: none;
}

.service-detail-item__thumb {
  flex-shrink: 0;
  aspect-ratio: 16/9;
  width: 124px;
  border-radius: var(--radius);
  overflow: hidden;
  transition: opacity 0.3s;
}

.service-detail-item:hover .service-detail-item__thumb {
  opacity: 0.7;
}

.service-detail-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.service-detail-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.service-detail-item__title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.service-detail-item__name {
  flex: 1;
  font-size: var(--font-size-body-pc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
}

.service-detail-item:hover .service-detail-item__name {
  text-decoration: underline;
}

.service-detail-item__arrow {
  display: inline-block;
  flex-shrink: 0;
  margin-top: 0.65em;
  width: 11px;
  height: 6px;
  background-color: var(--color-blue);
  -webkit-mask: url("../images/icon_arrow.svg") no-repeat center/contain;
  mask: url("../images/icon_arrow.svg") no-repeat center/contain;
  transform: rotate(90deg);
}

.service-detail-item__desc {
  font-size: var(--font-size-sm-pc);
  line-height: 1.5;
  color: var(--color-black);
}

@media (max-width: 767px) {
  .service-detail-items {
    padding: var(--space-8);
  }
  .service-detail-item {
    padding: var(--space-8);
  }
  .service-detail-item__thumb {
    width: 80px;
  }
  .service-detail-item__body {
    gap: var(--space-4);
  }
  .service-detail-item__name {
    font-size: var(--font-size-sm-pc);
  }
  .service-detail-item__desc {
    font-size: var(--font-size-sm-sp);
  }
}
/* ------------------------------------------------------------
   サービス詳細コンテンツ
   ------------------------------------------------------------ */
.service-detail-content.ad-article {
  padding: 0;
}

.service-detail-content + .service-tabs--bottom {
  margin-top: 0;
}

@media (max-width: 767px) {
  .service-detail-content + .service-tabs--bottom {
    margin-top: 0;
  }
}
/* ------------------------------------------------------------
   以下省略プレースホルダー
   ------------------------------------------------------------ */
.service-omit {
  background-color: var(--color-bg-disable);
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-faint);
}


#search-result-title{
  display: none;
}