* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  font-size: var(--font-size);
}

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

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

.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;
}

/* =========================
   Buttons / chips
========================= */
/* 丸アイコン共通 */
.btnIcon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  /* SVGは currentColor を使う */
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* 小さい版（chip用） */
.btnIcon--sm {
  width: 18px;
  height: 18px;
}

.icon-arrow {
  width: 12px;
  height: 12px;
  display: block;
}

.btnIcon--sm .icon-arrow {
  width: 10px;
  height: 10px;
}

/* hover 反転（濃色背景のみ白指定OKルール） */
.btn--ghost:hover .btnIcon,
.chip:hover .btnIcon {
  background: #fff;
  color: var(--main);
}

.btn--primary {
  background: var(--main);
  color: #fff;
  box-shadow: 0 10px 18px rgba(19, 0, 121, .20);
  padding: 12px 55px;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--main);
  gap: 16px;
  padding: 12px 55px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--main);
  font-size: var(--btn-font);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  transition: background-color .2s ease, color .2s ease;
}

.btn--ghost:hover {
  background: var(--main);
  color: #fff;
}

@media (max-width:767px) {
  .btn--ghost {
    width: 100%;
  }
}

/* =========================
   Card / layout helpers
========================= */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.grid {
  display: grid;
  gap: 16px;
}

/* =========================
   Hero
========================= */
.hero {
  background: var(--main);
  overflow: hidden;
}

.hero__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 1.5rem;
}

.hero__news {
  background: #fff;
  padding: 12px 20px;
  border-radius: 5px;
  margin: 24px 250px 24px 200px;
  display: flex;
  font-size: 14px;
}

.hero__news-badge {
  display: inline-block;
  background: var(--main);
  color: #fff;
  font-weight: bold;
  padding: 0 15px;
  border-radius: 20px;
  white-space: nowrap;
  margin-right: 16px;
}

.hero__news-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.hero__news-date {
  font-weight: bold;
}

.hero__news-title {
  font-weight: bold;
}

.hero__news-more {
  text-decoration: underline;
}

.hero__slider {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
  position: relative;
  opacity: 0;
}

.hero__slide {
  position: relative;
  flex: 0 0 746px;
  opacity: 1;
  margin-right: 50px;
}

.hero__img {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
}

.hero__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 1.5rem;
}

.hero__dots .dot {
  width: 5px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  border: none;
  margin: 0 4px;
  cursor: pointer;
}

.hero__dots .dot.is-active {
  background: #fff;
}

/* =========================
   SP
========================= */
@media (max-width: 768px) {
  .hero__news {
    display: block;
    margin: 12px 3px;
  }

  .hero__news-badge {
    display: none;
  }

  .hero__news-more {
    text-align: right;
    display: block;
  }

  .hero__wrap {
    padding: 0;
  }

  .hero__slide {
    flex: 0 0 100%;
    padding: 0 3px;
    margin-right: 0;
  }

  .hero__img {
    width: 100%;
  }

  .hero__dots {
    padding: 14px 0;
  }
}

/* =========================
   Section Title (h2)
========================= */
.sec-title {
  text-align: left;
  margin: 0 0 28px;
}

.sec-title__jp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--main);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.sec-title__jp::before {
  content: "";
  width: 36px;
  height: 2px;
  background: var(--main);
}

.sec-title__en {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(42px, 4vw, 52px);
  font-weight: 800;
  color: var(--main);
  line-height: 1.1;
}

/* =========================
   Search
========================= */
.searchArea {
  padding: 28px 0;
  background: transparent;
}

.searchArea__box {
  background: #F4F5F6;
  border-radius: 6px;
  padding: 48px 80px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: center;
}

.searchArea__label {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.searchArea__left {
  display: flex;
  flex-direction: column;
}

.searchForm {
  display: grid;
  grid-template-columns: 1fr 110px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0px 8px rgba(0, 0, 0, .12);
  background: #fff;
}

.searchForm__input {
  border: 0;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  min-height: 52px;
}

.searchForm__input::placeholder {
  color: #9aa0a6;
}

.searchForm__btn {
  border: 0;
  background: var(--main);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.icon-search {
  width: 18px;
  height: 18px;
  display: block;
}

.searchCta {
  margin: 1rem auto 0;
}

/* =========================
   SP：全幅で #F4F5F6
========================= */
@media (max-width: 767px) {
  .searchArea {
    background: #F4F5F6;
    padding: 18px 6px;
    margin-top: 2rem;
  }

  .searchArea__box {
    background: transparent;
    padding: 0;
    border-radius: 0;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .searchForm__input {
    min-height: 56px;
    font-size: 14px;
  }

  .searchCta {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   Section base
========================= */
.sec {
  padding: 50px 0;
}

.sec__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sec__foot {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

@media (max-width: 767px) {
  .sec {
    padding: 30px 0;
  }
}

/* =========================
   Section background
========================= */
.sec--alt {
  background: #F4F5F6;
}

/* =========================
   TOPICS (PC)
   左：見出し＋ボタン / 右：リスト
========================= */
.topicsSec {
  display: grid;
  /* ★これが無いと1カラムになる */
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  row-gap: 18px;
  align-items: start;
}

.topicsSec__head {
  grid-column: 1;
  grid-row: 1;
}

.topicsList {
  grid-column: 2;
  grid-row: 1 / span 2;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #F4F5F6;
}

.topicsItem {
  border-bottom: 1px solid #E6E9F2;
}

/* 1行（右に丸矢印） */
.topicsItem__row {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 20px;
  align-items: center;
  padding: 12px 0;
  color: var(--text);
  background: transparent;
}

.topicsItem__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topicsItem__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.topicsItem__date {
  font-size: 12px;
}

.topicsItem__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 2px;
  background: #E31B23;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* タイトル */
.topicsItem__title {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}

/* 右の丸矢印（SVG） */
.topicsItem__go,
.topicsBtn__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  display: grid;
  place-items: center;
}

.icon-arrow {
  width: 12px;
  height: 12px;
  display: block;
}

.topicsItem__row:hover .topicsItem__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   一覧ボタン（PC：左カラムの下）
========================= */
.topicsBtn {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 35px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--main);
  color: var(--main);
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  transition: background-color .2s ease, color .2s ease;
}

.topicsBtn:hover {
  background: var(--main);
  color: #fff;
}

.topicsBtn:hover .topicsBtn__icon {
  background: #fff;
  color: var(--main);
}

/* =========================
   SP（縦：見出し→リスト→ボタン）
========================= */
@media (max-width:767px) {
  .topicsSec {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
  }

  .topicsSec__head {
    grid-column: auto;
    grid-row: auto;
  }

  .topicsList {
    grid-column: auto;
    grid-row: auto;
  }

  .topicsBtn {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    gap: 22px;
  }

  .topicsItem__row {
    padding: 16px 14px;
    grid-template-columns: 1fr 40px;
    align-items: start;
  }

  .topicsItem__go {
    justify-self: end;
    align-self: center;
    /* ← 行の中央に来る */
  }
}

/* =========================
   Lineup
========================= */
.lineup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 2rem 0;
}

@media (max-width:767px) {
  .lineup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 1rem 0;
  }
}

/* card */
.productCard {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 12px hsl(249deg 100% 24% / 30%);
}

/* img */
.productCard__img {
  background: #fff;
  height: 240px;
}

.productCard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  display: block;
}

@media (max-width:767px) {
  .productCard__img {
    height: 118px;
  }

  .productCard__img img {
    padding: 0;
  }
}

/* body */
.productCard__body {
  padding: 12px 24px 30px;
  background: #f4f5f6;
}

/* title */
.productCard__title {
  margin: 0 0 18px;
  padding: 8px 0 10px 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  border-bottom: 1px solid #949494;
  position: relative;
}

.productCard__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--sub);
}

/* actions (PC:横並び / SP:縦積み) */
.productCard__actions {
  display: flex;
  gap: 16px;
}

@media (max-width:767px) {
  .productCard__actions {
    flex-direction: column;
    gap: 8px;
  }

  .productCard__body {
    padding: 5px 10px 22px;
  }

  .productCard__title {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .chip {
    justify-content: center;
  }
}

/* ===== Lineup chips (本体 / 付属品) ===== */
.chip {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--main);
  padding: 7px 38px 7px 12px;
  min-height: 32px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(19, 0, 121, .45);
  font-size: var(--btn-font);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.chip .btnIcon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.chip:hover {
  background: var(--main);
  color: #fff;
}

.catBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11px;
  background: var(--sub);
}

/* category colors (bar + title marker) */
.productCard[data-cat="paint"] .catBar {
  background: var(--paint);
}

.productCard[data-cat="clean"] .catBar {
  background: var(--clean);
}

.productCard[data-cat="compressor"] .catBar {
  background: var(--compressor);
}

.productCard[data-cat="polish"] .catBar {
  background: var(--polish);
}

.productCard[data-cat="encore"] .catBar {
  background: var(--encore);
}

.productCard[data-cat="other"] .catBar {
  background: var(--other);
}

.productCard[data-cat="paint"] .productCard__title::before {
  background: var(--paint);
}

.productCard[data-cat="clean"] .productCard__title::before {
  background: var(--clean);
}

.productCard[data-cat="compressor"] .productCard__title::before {
  background: var(--compressor);
}

.productCard[data-cat="polish"] .productCard__title::before {
  background: var(--polish);
}

.productCard[data-cat="encore"] .productCard__title::before {
  background: var(--encore);
}

.productCard[data-cat="other"] .productCard__title::before {
  background: var(--other);
}

/* =========================
   Videos
========================= */
.videos {
  display: grid;
  gap: 16px;
  padding: 2rem 0;
}

/* ---------- 上段（2枚） ---------- */
.videos__top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ---------- 下段（3枚） ---------- */
.videos__bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.videoCard__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 6px;
}

/* サムネ画像・iframe共通 */
.videoCard__thumb img,
.videoCard__thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 767px) {
  .videos {
    grid-template-columns: 1fr;
    padding: 1.5rem 0;
  }

  /* 上段：縦積み */
  .videos__top {
    grid-template-columns: 1fr;
  }

  /* 下段：横スワイプ */
  .videos__top {
    grid-template-columns: 1fr;
  }

  /* 下段：中央スナップ + 余白込みで気持ちよく見せる */
  .videos__bottom {
    --card: 78%;
    /* 1枚の見え幅（好みで 72%〜82%） */
    --gap: 12px;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100% - var(--card)) / 2);
    /* 左右に「センター用余白」を作る */
    padding-inline: calc((100% - var(--card)) / 2);
    padding-bottom: 4px;
  }

  .videos__bottom .videoCard {
    flex: 0 0 var(--card);
    scroll-snap-align: center;
  }
}

/* ========================
 * Banner
 * ======================== */
/* バナーをリンクとして扱う */
.banner--link {
  display: block;
  color: inherit;
  /* 文字色を変えない */
  text-decoration: none;
  /* 下線消す */
}

/* hover時の“押せる感”（任意） */
.banner--link:hover {
  opacity: .96;
}

.banner {
  position: relative;
  border: 4px solid var(--main);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: 3rem;
  --corner: 90px;
  /* 角サイズ（共通） */
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("../images/banner_corner_tl.png") left top / var(--corner) var(--corner) no-repeat, url("../images/banner_corner_tr.png") right top / var(--corner) var(--corner) no-repeat, url("../images/banner_corner_bl.png") left bottom / var(--corner) var(--corner) no-repeat, url("../images/banner_corner_br.png") right bottom / var(--corner) var(--corner) no-repeat;
}

.banner__inner {
  position: relative;
  z-index: 1;
}

/* ========= 中身 ========= */
.banner__inner {
  --chara-w: clamp(80px, 7vw, 110px);
  position: relative;
  z-index: 1;
  padding: 35px calc(22px + var(--chara-w)) 35px;
  text-align: center;
}

.banner__content {
  max-width: 560px;
  margin: 0 auto;
}

/* ========= バッジ ========= */
.banner__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--main);
  border-bottom: 1px solid var(--main);
}

/* 再生アイコン */
.banner__badgeIcon {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--main);
  flex: 0 0 auto;
}

.banner__badgeIcon::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 7px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ========= タイトル ========= */
.banner__title {
  position: relative;
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .02em;
}

.banner__title::before,
.banner__title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  background: url("../images/line_slash.png") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .9;
}

/* 左（そのまま） */
.banner__title::before {
  left: 60px;
}

/* 右（左右反転） */
.banner__title::after {
  right: 65px;
  transform: translateY(-50%) scaleX(-1);
}

/* SP調整 */
@media (max-width: 767px) {
  .banner__title::before {
    left: 40px;
  }

  .banner__title::after {
    right: 43px;
  }

  .banner__title::before,
  .banner__title::after {
    height: 35px;
  }
}

/* ========= 説明文 ========= */
.banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

/* ========= キャラ ========= */
.banner__chara {
  position: absolute;
  bottom: 0;
  width: var(--chara-w);
  pointer-events: none;
  user-select: none;
}

.banner__chara--left {
  left: 70px;
}

.banner__chara--right {
  right: 70px;
}

.sp-br {
  display: none;
}

/* ========= SP ========= */
@media (max-width: 767px) {
  .banner__chara--left {
    left: 5px;
  }

  .banner__chara--right {
    right: 5px;
  }

  .banner__inner {
    --chara-w: 76px;
    padding: 38px 14px 38px;
  }

  .banner__badge {
    font-size: 16px;
  }

  .banner__title {
    font-size: 18px;
  }

  .banner__text {
    font-size: 13px;
    line-height: 1.85;
  }

  .sp-br {
    display: block;
  }
}

/* =========================
   Support 
========================= */
.supportLinks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.supportLink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 46px 14px 16px;
  /* 右の丸矢印分 */
  box-shadow: 0 4px 10px rgba(19, 0, 121, .14);
  border-radius: 10px;
  text-decoration: none;
  min-height: 64px;
}

.supportLink__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.supportLink__label {
  font-weight: 700;
  line-height: 1.3;
}

.supportLink__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.supportLink__spBr {
  display: none;
}

.supportLink__badge {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  background: var(--main);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  white-space: nowrap;
  z-index: 2;
}

.supportLink__badge::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -10px;
  width: 10px;
  height: 15px;
  transform: translateY(-80%);
  background: #000;
  clip-path: polygon(0 0, 100% 80%, 0 80%);
  z-index: 1;
}

/* panels */
.supportPanels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.supportPanel {
  padding: 30px 50px;
  box-shadow: 0 4px 10px rgba(19, 0, 121, .14);
  border-radius: 10px;
  color: var(--main);
}

.supportPanel__title {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 800;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--main);
}

.supportPanel__text {
  margin: 0 0 12px;
  line-height: 1.8;
}

.supportPanel__telRow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.supportPanel__telRow i {
  color: var(--main);
  font-size: 26px;
  transform: translateY(2px);
}

.supportPanel__telLink {
  font-size: 32px;
  font-weight: 900;
  font-family: var(--font-num);
  letter-spacing: 1px;
}

.supportPanel__note {
  margin: 0;
  font-size: 13px;
}

.supportPanel__btn {
  margin-top: 8px;
  padding: 12px 30px;
}

/* dev banner */
.supportDev {
  margin-top: 14px;
  overflow: hidden;
  border-radius: 10px;
  border: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.supportDev__left {
  position: relative;
  background: var(--main);
  color: #fff;
  padding: 50px;
  min-height: 170px;
}

.supportDev__title {
  margin: 0 0 24px;
  font-size: 20px;
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
}

.supportDev__text {
  margin: 0 0 22px;
  line-height: 1.8;
}

.supportDev__lead {
  margin: 0;
  font-size: 13px;
}

.supportDev__telRow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.supportDev__telRow i {
  font-size: 32px;
  transform: translateY(2px);
}

.supportDev__telLink {
  font-size: 40px;
  font-family: var(--font-num);
  letter-spacing: 1px;
}

.supportDev__chara {
  position: absolute;
  right: 12px;
  bottom: 0;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.supportDev__chara img {
  width: 120px;
  height: auto;
  display: block;
}

.supportDev__right {
  position: relative;
}

.supportDev__right img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ===== SP ===== */
@media (max-width: 767px) {
  .supportLink--wide {
    grid-column: auto;
    padding-top: 26px;
  }

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

  .supportPanel {
    padding: 25px 30px;
  }

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

  .supportDev__left {
    padding: 30px;
  }

  .supportDev__telLink {
    font-size: 32px;
  }

  .supportDev__chara {
    right: 7px;
  }

  .supportDev__chara img {
    width: 85px;
  }

  .supportPanel__title,
  .supportDev__title {
    font-size: 18px;
  }

  .supportLink__spBr {
    display: block;
  }

  .supportLink__badge {
    font-size: 11px;
  }

  /* カード並び */
  .supportLinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ===== カード本体 ===== */
  .supportLink {
    display: grid;
    grid-template-columns: 1fr auto;
    /* 下段用 */
    grid-template-rows: auto 1fr;
    /* 上：icon / 下：text */
    row-gap: 8px;
    padding: 15px 20px;
    height: 120px;
  }

  /* ===== 上段：アイコン（中央） ===== */
  .supportLink__icon {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  /* ===== 下段：テキスト（左） ===== */
  .supportLink__label {
    grid-column: 1;
    grid-row: 2;
    font-size: 14px;
    text-align: left;
    align-self: center;
  }

  /* ===== 下段：矢印（右・位置固定） ===== */
  .supportLink__arrow {
    position: static;
    /* absolute解除 */
    transform: none;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}

.site-main {
  display: flex;
  flex-direction: column;
}

/* デフォルト順（PC） */
.site-main [data-home-order="hero"] {
  order: 10;
}

.site-main [data-home-order="search"] {
  order: 20;
}

.site-main [data-home-order="topics"] {
  order: 30;
}

.site-main [data-home-order="lineup"] {
  order: 40;
}

.site-main [data-home-order="videos"] {
  order: 50;
}

.site-main [data-home-order="support"] {
  order: 60;
}

/* =========================
   Responsive (rough)
========================= */
@media (max-width: 960px) {
  .lineup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supportGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 560px) {
  .site-main [data-home-order="topics"] {
    order: 40;
  }

  .site-main [data-home-order="lineup"] {
    order: 30;
  }
}
/* ==============================
   検索ページ
============================== */

.searchBox {
  background: #F4F5F6;
  padding: 40px 32px;
  border-radius: 6px;
}

.searchBox__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px;
}

.searchBox__keyword {
  grid-column: span 1;
}

.searchBox__category {
  grid-column: span 3;
}

.searchBox__engineLink{
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--main);
    font-weight: bold;
    margin: 1rem 0;
}

.searchBox__engineLink i{
    font-size: 13px;
}

.searchBox__label {
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}

.searchBox__inputWrap {
  display: flex;
}

.searchBox__inputWrap input {
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

.searchBox__btn {
  height: 44px;
  padding: 0 20px;
  background: var(--main);
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.searchBox__cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 12px;
}

.searchBox__submit{
  display: flex;
  justify-content: center;
}

.searchBox__mainBtn {
  cursor: pointer;
}

.searchBox__mainBtn:hover {
  background: var(--main);
  color: #fff;
}

.searchBox__col label {
  display: block;
  margin-bottom: 8px;
}

.search-count{
    font-size:16px;
    margin-bottom:20px;
    margin-top: 40px;
    padding-left:14px;
    position:relative;
}

.search-count::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:4px;
    height:18px;
    background:var(--main);
}

.search-count strong{
    font-size:20px;
    font-weight:bold;
    color:var(--main);
}

.search-card{
    background:#F4F5F6;
    border:1px solid #e5e5e5;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

.product-title{
    padding:14px 16px;
    font-size:16px;
    font-weight:bold;
    margin:0;
}

.variation-block{
    padding:0 16px 16px;
}


.search-card{
    transition:all .2s ease;
}

.search-card:hover{
    box-shadow:0 6px 16px rgba(0,0,0,0.12);
    transform:translateY(-2px);
}

.product-media{
    position: relative;
    background: #fff;
}

.product-media img{
    width: 100%;
    height: 300px;
    object-fit: contain;
    padding: 1rem;
}

.product-category{
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
    line-height: 1;
}
.cat-paint,
.cat-paint-acc{
    background: var(--paint);
}

.cat-clean,
.cat-clean-acc{
    background: var(--clean);
}

.cat-compressor,
.cat-compressor-acc{
    background: var(--compressor);
}

.cat-polish,
.cat-polish-acc{
    background: var(--polish);
}

.cat-encore,
.cat-encore-acc{
    background: var(--encore);
}

.cat-other,
.cat-other-acc{
    background: var(--other);
}

.cat-uncategorized{
    background: var(--main);
}

.badge-discontinued{
  position: absolute;
  top: 0;
  left: 0;
  background: #e8a337;
  color: #fff;
  padding: 6px 12px;
  font-weight: bold;
}
.variation-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    text-align:center;
    background: #fff;
}

.variation-table th{
    background:var(--sub);
    color:#fff;
    font-weight:bold;
    padding:6px 8px;
    border:1px solid #dcdcdc;
    white-space: nowrap;
}

.variation-table td{
    padding:6px 8px;
    border:1px solid #dcdcdc;
}
.variation-table td:nth-child(2) {
    word-break: break-all;
}
/* =================================
   検索ページネーション
================================= */

.search-pagination{
  margin:40px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.search-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border:1px solid #ddd;
  border-radius:4px;
  background:#fff;
  color:#333;
  transition:.2s;
}

.search-pagination a.page-numbers:hover{
  background:var(--main);
  border-color:var(--main);
  color:#fff;
}

.search-pagination .current{
  background:var(--main);
  border-color:var(--main);
  color:#fff;
  cursor:default;
}

.search-pagination .dots{
  border:none;
  background:none;
  padding:0 4px;
}

.search-pagination .prev,
.search-pagination .next{
  padding:0 16px;
}
@media (max-width: 767px) {
  .searchBox {
    padding: 28px 16px;
  }

  .searchBox__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .searchBox__category {
    grid-column: span 1;
  }

  .searchBox__cats {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    gap: 12px 0;
  }

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

  .search-pagination{
    margin-bottom: 0;
  }

}

/* ==============================
   結果グリッド
============================== */

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

@media (max-width: 767px) {

  .searchBox__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

}
/* =========================
  コンシェルジュデータベース
========================= */

.selectorTabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0;
}

.selectorTabs__btn {
  padding: 18px;
  border: 1px solid var(--border);
  background: #e9eaec;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

.selectorTabs__btn.is-active {
  background: var(--main) !important;
  color: #fff !important;
}

.selectorTabs__btn:hover {
  background: #fff;
  border-color: var(--main);
  color: var(--main);
}

.selectorContent {
  margin-top: 30px;
}

.selectorPanel {
  display: none;
}

.selectorPanel.is-active {
  display: block;
}

.selectorForm {
  max-width: 700px;
  margin: 0 auto;
}

.selectorForm__row {
  margin-bottom: 22px;
}

.selectorForm__label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.selectorForm__select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border);
  padding: 0 12px;
  border-radius: 4px;
}

.selectorForm__radioGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.selectorForm__radioGroup label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

.selectorForm__radioGroup input[type="radio"] {
  accent-color: var(--main);
  cursor: pointer;
}

.selectorForm__radioGroup label {
  font-size: 14px;
}

.selectorActions {
  text-align: center;
  margin-top: 30px;
}

.selectorAnswer {
  margin-top: 40px;
}

.selectorAnswer__box {
  border: 1px solid var(--border);
  padding: 20px;
  min-height: 80px;
  background: #fff;
}
.selectorActions .btn {
  cursor: pointer;
}
#paint-result-area {
  margin-top: 20px;
  overflow-x: auto;
}

.selectorTable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 900px;
}

.selectorTable th {
  background: #f4f5f6;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  text-align: center;
  white-space: nowrap;
}

.selectorTable td {
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  vertical-align: middle;
}

.selectorTable tbody tr:nth-child(even) {
  background: #fafafa;
}

@media (max-width: 767px) {
  .selectorTabs__btn {
    font-size: 13px;
  }

  .selectorTable {
    min-width: 700px;
  }
}
/* =========================
   商品詳細（single-product.php）
========================= */
.breadcrumb {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  font-size: 13px;
  width: min(100% - 32px, var(--outer));
  margin-inline: auto;
}

.breadcrumb__list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__list li::after {
  content: ">";
  margin-left: 8px;
}

.breadcrumb__list li:last-child::after {
  content: "";
}
.productDetail__head {
  margin-bottom: 32px;
}

.productDetail__cat {
  display: inline-flex;
  align-items: center;
  padding: 3px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  background: #f4f5f6;
  border: 1px solid transparent;
}

.productDetail__cat--paint,
.productDetail__cat--paint-acc {
  background: var(--paint);
  color: #fff;
}

.productDetail__cat--clean,
.productDetail__cat--clean-acc {
  background: var(--clean);
  color: #fff;
}

.productDetail__cat--compressor,
.productDetail__cat--compressor-acc {
  background: var(--compressor);
  color: #fff;
}

.productDetail__cat--polish,
.productDetail__cat--polish-acc {
  background: var(--polish);
  color: #fff;
}

.productDetail__cat--encore,
.productDetail__cat--encore-acc {
  background: var(--encore);
  color: #fff;
}

.productDetail__cat--other,
.productDetail__cat--other-acc {
  background: var(--other);
  color: #fff;
}

.productDetail__head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.productDetail__title {
  position: relative;
  margin: 0;
  padding-left: 18px;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: .02em;
}

.productDetail__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: calc(100% - 10px);
  border-radius: 2px;
}
/* paint */
.productDetail__head[data-cat="paint"] .productDetail__title::before {
  background: var(--paint);
}

/* clean */
.productDetail__head[data-cat="clean"] .productDetail__title::before {
  background: var(--clean);
}

/* compressor */
.productDetail__head[data-cat="compressor"] .productDetail__title::before {
  background: var(--compressor);
}

/* polish */
.productDetail__head[data-cat="polish"] .productDetail__title::before {
  background: var(--polish);
}

/* encore */
.productDetail__head[data-cat="encore"] .productDetail__title::before {
  background: var(--encore);
}

/* other */
.productDetail__head[data-cat="other"] .productDetail__title::before {
  background: var(--other);
}

.productDetail__body {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
}

.productDetail__thumb img {
  width: 100%;
  height: auto;
}

.productDetail__variations {
  margin-top: 24px;
}

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

.variationList li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.productDetail__thumb {
    margin-bottom: 20px;
}

.productDetail__cta {
  margin-top: 60px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.priceTable {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  border: 1px solid #dcdcdc;
}

.priceTable th {
  background: #ddeeff;
  padding: 12px;
  white-space: nowrap;
}

.priceTable td {
  padding: 12px;
  border-bottom: 1px solid #dcdcdc;
}

.priceTable td.price {
  white-space: nowrap;
}

td.has-text-align-center img {
    display: inline-block;
}

.productDetail__cta {
  margin: 40px 0 50px;
  display: grid;
  gap: 20px;

  grid-template-columns: repeat(3, 200px);
  justify-content: center;
}

.productDetail__cta a {
  display: block;
}

.productDetail__cta img {
  width: 100%;
  height: auto;
  display: block;
  transition: 0.2s;
}

.productDetail__cta a:hover img {
  transform: translateY(-3px);
}

.productDetail__badge {
    background: #e8a337;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    padding: 20px 0;
    color: #fff;
    margin-bottom: 1rem;
}

.productDetail__right a {
    text-decoration: underline;
    color: var(--sub);
}

.productDetail__stock {
  margin-bottom: 20px;
}

.productDetail__stockTitle {
  font-weight: bold;
  margin-bottom: 8px;
}

.productDetail__stockList {
  margin: 0;
  padding-left: 1em;
}

.productDetail__stockList li {
  margin-bottom: 6px;
}

.productDetail__stockBadge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.productDetail__stockBadge.is-red {
  background: #d01720;
}

.productDetail__stockBadge.is-purple {
  background: #7a3eb1;
}

.productDetail__stockBadge.is-gray {
  background: #666;
}

@media (max-width: 768px) {
  .breadcrumb {
    margin-top: 10px;
  }
  .productDetail__cta {
    grid-template-columns: repeat(2, 1fr);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 115px;
    margin-top: 15px;
  }
  .productDetail__body {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
/* ===============================
テーブル共通
=============================== */
.wp-block-table td, .wp-block-table th {
    border: 1px solid #dcdcdc !important;
}
/* ===============================
① 左列見出し（仕様表）
=============================== */
.is-style-spec-table table td:first-child,
.is-style-spec-table table th:first-child{
    background:#ddeeff;
    font-weight:bold;
}
/* ===============================
② 上見出し
=============================== */
.is-style-table-header-top table tr:first-child > *{
    background:#ddeeff;
    font-weight:bold;
}
/* ===============================
③ 上＋左列見出し
=============================== */
.is-style-table-header-top-left table tr:first-child > *{
    background:#ddeeff;
    font-weight:bold;
}
.is-style-table-header-top-left table td:first-child,
.is-style-table-header-top-left table th:first-child{
    background:#ddeeff;
    font-weight:bold;
}