@charset "UTF-8";
/*!
 * tire.css — タイヤ製品（CPT tire / タクソノミー tire_cat）専用スタイル
 * -----------------------------------------------------------------------------
 * 対応テンプレート : taxonomy-tire_cat.php / single-tire.php / template-parts/tire/*
 * 読み込み方法     : takato_tire_stylesheet_link() による <link> 直書き（暫定措置。
 *                    詳細は inc/tire/helpers.php の同関数のコメント）
 * 対応デザイン     : _docs/tire/CSTタイヤ_製品ページ_モックアップv2.html
 *                    （製品ページ／中分類ページの製品カード・ヒーロー）
 *
 * 【重要】
 * ・SCSS は経由していません。修正はこの CSS を直接編集してください。
 * ・product.css が全ページで読み込まれるため、セレクタはすべて .p-tire 配下に閉じています。
 * ・.p-tire a / .p-tire img の共通指定より優先させたい箇所は「.p-tire .p-tire__xxx」で書いています。
 * ・フォントはテーマで読み込み済みの Figtree（--l-en-font-set）と Noto Sans JP を使います。
 * ・コンテナ幅は common.css の l-container（data-max="lg:xlarge"）を使います。
 *
 * ブレークポイント : md 768px / lg 1024px（common.css と同一）
 * -----------------------------------------------------------------------------
 */

/*=============================
  Base
=============================*/
.p-tire {
  --tire-bg: #292a2c;
  --tire-stage: #14171c;
  --tire-panel: #222326;
  --tire-dim: #242528;
  --tire-line: #3a3d41;
  --tire-accent: var(--l-accent-color, #ed743e);
  --tire-soft: #cfd0d2;
  --tire-muted: #a3a5a8;
  --tire-noimage: #1f2022;
  --tire-en: var(--l-en-font-set, "Figtree", sans-serif);
  /* 旧変数名（タイル・注意書きなどで使用） */
  --tire-text-muted: var(--tire-muted);
  --tire-border: rgba(255, 255, 255, 0.15);

  background: var(--tire-bg);
  color: #fff;
  padding-bottom: clamp(4rem, 2.5rem + 6.4vw, 8rem);
}

/* 製品ページは最後の「輸入発売元」をフッターに接するように置く */
.p-tire.-product {
  padding-bottom: 0;
}

.p-tire a {
  color: inherit;
  text-decoration: none;
}

.p-tire a:focus-visible,
.p-tire button:focus-visible {
  outline: 2px solid var(--tire-accent);
  outline-offset: 3px;
}

.p-tire img {
  max-width: 100%;
  height: auto;
}

.p-tire .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*=============================
  共通パーツ：タグ／ボタン
=============================*/
.p-tire__tag {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  border-radius: 2px;
  background: var(--tire-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.p-tire .p-tire__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.875rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.p-tire .p-tire__btn.-main {
  background: var(--tire-accent);
  color: #fff;
}

.p-tire .p-tire__btn.-main:hover {
  background: #f0864f;
}

.p-tire .p-tire__btn.-line {
  border-color: #55585e;
  color: #fff;
}

.p-tire .p-tire__btn.-line:hover {
  border-color: var(--tire-accent);
  color: var(--tire-accent);
}

/*=============================
  分類ナビ（template-parts/tire/cat-nav.php）
=============================*/
.p-tire__catNav {
  background: #1c1e22;
  border-bottom: 1px solid #2c2f33;
}

.p-tire__catNavList {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem 0;
  margin: 0;
  list-style: none;
  scrollbar-width: none;
}

.p-tire__catNavList::-webkit-scrollbar {
  display: none;
}

.p-tire .p-tire__catNavLink {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.3125rem 0.9375rem;
  border: 1px solid var(--tire-line);
  border-radius: 999px;
  color: var(--tire-soft);
  font-family: var(--tire-en);
  font-weight: 600;
  font-size: 0.78125rem;
  line-height: 1.5;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.p-tire .p-tire__catNavLink:hover {
  border-color: var(--tire-accent);
  color: #fff;
}

.p-tire .p-tire__catNavLink.-current {
  background: var(--tire-accent);
  border-color: var(--tire-accent);
  color: #fff;
}

/*=============================
  パンくず（template-parts/tire/breadcrumb.php）
=============================*/
.p-tire__breadcrumbList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--tire-muted);
  font-size: 0.78125rem;
  line-height: 1.6;
}

.p-tire__breadcrumbItem:not(:last-child)::after {
  content: "›";
  margin: 0 0.625rem;
  color: var(--tire-accent);
}

.p-tire .p-tire__breadcrumbItem a {
  color: var(--tire-soft);
}

.p-tire .p-tire__breadcrumbItem a:hover {
  color: var(--tire-accent);
}

/*=============================
  背景の輪郭文字（製品ページのステージ／分類ページのヒーロー）
  装飾のみ（aria-hidden）。親要素の isolation で、本文より後ろに置く
=============================*/
.p-tire__stageName {
  position: absolute;
  z-index: -1;
  right: -3vw;
  bottom: 16%;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.09);
  font-family: var(--tire-en);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(9.375rem, 21vw, 22.5rem);
  line-height: 0.8;
  letter-spacing: -0.045em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.p-tire__stageName.-hero {
  bottom: -12%;
  font-size: clamp(7.5rem, 15vw, 16.25rem);
}

/*=============================
  分類ページのヒーロー（template-parts/tire/hero.php）
=============================*/
.p-tire__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 1.125rem;
  padding: 3.5rem 0 3.125rem;
  background: var(--tire-stage);
}

.p-tire__heroTag {
  margin: 0;
}

.p-tire__heroTitle {
  margin: 1rem 0 0.375rem;
  color: #fff;
  font-family: var(--tire-en);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.375rem, 1.6rem + 2.8vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.p-tire__heroLead {
  max-width: 48em;
  color: var(--tire-soft);
  font-size: 0.875rem;
  line-height: 1.9;
}

.p-tire__heroLead p {
  margin: 0;
}

.p-tire__heroLead p + p {
  margin-top: 0.75em;
}

/*=============================
  製品ページのステージ（template-parts/tire/product-stage.php）
=============================*/
.p-tire__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 1.125rem;
  background: var(--tire-stage);
}

/* 床 */
.p-tire__stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.025) 1px, rgba(0, 0, 0, 0.25) 100%);
}

.p-tire__stageIn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 2.5rem;
  padding: 1.75rem 0 4.5rem;
}

.p-tire .p-tire__back {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 2.125rem;
  color: var(--tire-soft);
  font-size: 0.8125rem;
}

.p-tire__back .-ico {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid #4a4d52;
  border-radius: 50%;
  transition: border-color 0.2s;
}

.p-tire__back .-ico::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  width: 6px;
  height: 6px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-tire .p-tire__back:hover {
  color: var(--tire-accent);
}

.p-tire__back:hover .-ico {
  border-color: var(--tire-accent);
}

.p-tire__stageTag {
  margin: 0;
}

.p-tire__productName {
  margin: 1.25rem 0 0.625rem;
  color: #fff;
  font-family: var(--tire-en);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.875rem, 1.6rem + 4.2vw, 4.875rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.p-tire__productName small {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--tire-muted);
  font-size: 0.42em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p-tire__productSub {
  margin: 0 0 1.625rem;
  color: var(--tire-accent);
  font-family: var(--tire-en);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
}

.p-tire__productLead {
  max-width: 31em;
  margin: 0 0 1.625rem;
  color: var(--tire-soft);
  font-size: 0.9375rem;
  line-height: 2.05;
}

.p-tire__productLead > * {
  margin: 0;
}

.p-tire__productLead > * + * {
  margin-top: 1em;
}

.p-tire .p-tire__productLead a {
  color: var(--tire-accent);
  text-decoration: underline;
}

.p-tire__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2.125rem;
  padding: 0;
  list-style: none;
}

.p-tire__points li {
  padding: 0.25rem 0.75rem;
  border: 1px solid #3d4046;
  border-radius: 2px;
  color: var(--tire-soft);
  font-size: 0.78125rem;
  line-height: 1.6;
}

.p-tire__points strong {
  margin-right: 0.1875rem;
  color: #fff;
  font-family: var(--tire-en);
  font-weight: 700;
}

.p-tire__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/*=============================
  ステージ：製品画像（template-parts/tire/gallery.php）
  枠なし・背景透明。後ろに柔らかい光、下に接地の影と床への映り込み。
  NO IMAGE だけ #1f2022 の枠（光・映り込みなし）
=============================*/
.p-tire__showcase {
  position: relative;
}

.p-tire__spot {
  position: relative;
  aspect-ratio: 1 / 1;
}

/* 柔らかい光（輪郭を出さない） */
.p-tire__spot::before {
  content: "";
  position: absolute;
  inset: -6% -6% 2% -6%;
  background: radial-gradient(closest-side at 50% 46%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0) 100%);
}

/* 接地の影 */
.p-tire__spot::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3%;
  height: 7%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.p-tire .p-tire__spotImage {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease;
}

.p-tire .p-tire__spotImage.is-fading {
  opacity: 0;
}

/* 床への映り込み（メイン画像を上下反転して下端だけを薄く見せる） */
.p-tire__reflect {
  position: absolute;
  left: 0;
  right: 0;
  top: 99%;
  height: 28%;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}

.p-tire .p-tire__reflect img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform: scaleY(-1);
}

/*
 * 写真（JPEG など透過のない画像）… 白い背景が四角く浮かないよう、写真として枠に収める。
 * 薄い枠の内側に余白をとり、角を少し丸める（v2 の技術詳細の写真と同じ考え方）。
 * 光・接地の影・床への映り込みは出さない。判定は gallery.php / tire-gallery.js（.-photo）
 */
.p-tire__spot.-photo {
  border: 1px solid var(--tire-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.p-tire__spot.-photo::before,
.p-tire__spot.-photo::after,
.p-tire__spot.-photo .p-tire__reflect {
  display: none;
}

.p-tire .p-tire__spot.-photo .p-tire__spotImage {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 88%;
  margin: auto;
  border-radius: 3px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.p-tire__spot.-noImage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tire-noimage);
}

.p-tire__spot.-noImage::before,
.p-tire__spot.-noImage::after {
  display: none;
}

/* サムネイル（追加画像がある製品のみ）。背景透明、選択中はオレンジの枠、それ以外は細い枠線 */
.p-tire__thumbs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.625rem;
  margin: -0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.p-tire__thumb {
  display: block;
  width: 4.5rem;
  aspect-ratio: 1 / 1;
  padding: 0.375rem;
  border: 1px solid #3d4046;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s;
}

.p-tire .p-tire__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 写真（JPEG）のサムネイル … ステージと同じく、内側の余白（padding）の中に角を丸めた写真として収める */
.p-tire .p-tire__thumb.-photo img {
  border-radius: 2px;
  object-fit: cover;
}

.p-tire__thumb:hover {
  border-color: #6a6d72;
}

.p-tire__thumb.is-active,
.p-tire__thumb.is-active:hover {
  border-color: var(--tire-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .p-tire .p-tire__spotImage {
    animation: tire-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.1s;
  }

  .p-tire__spot::before {
    animation: tire-light 1.4s ease both;
  }

  @keyframes tire-rise {
    from {
      opacity: 0;
      transform: translateY(24px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes tire-light {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/*=============================
  製品ページのセクション共通
  背景は表示する順に交互（2つ目・4つ目…が -dim）。single-tire.php で付与
=============================*/
.p-tire__sec {
  padding: clamp(3.75rem, 3rem + 2.5vw, 5.25rem) 0;
}

.p-tire__sec + .p-tire__sec {
  border-top: 1px solid #323438;
}

.p-tire__sec.-dim {
  background: var(--tire-dim);
}

.p-tire__secHeading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0 0 2.75rem;
}

.p-tire__secHeading .-en {
  color: var(--tire-accent);
  font-family: var(--tire-en);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.p-tire__secHeading .-ja {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.p-tire__secHeading .-note {
  margin-left: auto;
  color: var(--tire-muted);
  font-weight: 400;
  font-size: 0.8125rem;
}

/* Feature：線で区切った横並び（番号なし） */
.p-tire__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.p-tire__feature {
  padding: 0.25rem 2.25rem;
  border-left: 1px solid var(--tire-line);
}

.p-tire__feature:first-child {
  padding-left: 0;
  border-left: 0;
}

.p-tire__featureKeyword {
  margin: 0;
  color: var(--tire-accent);
  font-family: var(--tire-en);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.125rem, 1.4rem + 1.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.p-tire__featureTitle {
  margin: 1rem 0 0.625rem;
  font-weight: 700;
  font-size: 0.9375rem;
}

.p-tire__featureText {
  margin: 0;
  color: var(--tire-soft);
  font-size: 0.875rem;
  line-height: 1.95;
}

/* Technology：文章と図版を横並び、2つ目・4つ目…は左右を入れ替え */
.p-tire__tech {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 4rem;
}

.p-tire__tech + .p-tire__tech {
  margin-top: 4.5rem;
}

.p-tire__tech.-reverse .p-tire__techVisual {
  order: -1;
}

.p-tire__tech.-textOnly {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
}

.p-tire__techTitle {
  margin: 0 0 1rem;
  font-size: 1.3125rem;
  letter-spacing: 0.02em;
}

.p-tire__techText {
  color: var(--tire-soft);
  line-height: 2.05;
}

.p-tire__techText p {
  margin: 0 0 1em;
}

.p-tire__techText p:last-child {
  margin: 0;
}

.p-tire__techVisual {
  position: relative;
  margin: 0;
}

.p-tire__techVisual::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(closest-side at 50% 50%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.p-tire .p-tire__techVisual img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* OE Fitment：3列 */
.p-tire__oe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tire-line);
  list-style: none;
}

.p-tire__oe li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--tire-line);
}

.p-tire__oe li:nth-child(3n + 2),
.p-tire__oe li:nth-child(3n + 3) {
  padding-left: 1.75rem;
}

.p-tire__oe b {
  font-family: var(--tire-en);
  font-weight: 800;
  font-style: italic;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.p-tire__oe span {
  color: var(--tire-muted);
  font-size: 0.78125rem;
}

/* Lineup：サイズ一覧。列数が中分類ごとに変わるため、横スクロールで受ける */
.p-tire__tableWrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tire-line);
  border-radius: 2px;
}

.p-tire__table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
}

.p-tire__table th {
  padding: 0.875rem 1.25rem;
  background: #1d1f22;
  border-bottom: 1px solid var(--tire-line);
  color: var(--tire-muted);
  font-family: var(--tire-en);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}

.p-tire__table th small {
  margin-left: 0.25rem;
  font-family: var(--l-primary-font-set, sans-serif);
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0;
}

.p-tire__table td {
  padding: 0.9375rem 1.25rem;
  border-bottom: 1px solid #313337;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.p-tire__table tbody tr:last-child td {
  border-bottom: 0;
}

.p-tire__table tbody tr:hover {
  background: rgba(237, 116, 62, 0.06);
}

.p-tire__table td.-size {
  font-family: var(--tire-en);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.p-tire__chip {
  display: inline-block;
  padding: 0.125rem 0.5625rem;
  border: 1px solid #45484d;
  border-radius: 2px;
  color: var(--tire-soft);
  font-size: 0.75rem;
}

.p-tire__tableNote {
  margin: 0.875rem 0 0;
  color: var(--tire-muted);
  font-size: 0.75rem;
  line-height: 1.8;
}

/* 使用上の注意 */
.p-tire__caution {
  padding-top: 1.125rem;
  border-top: 2px solid #c98a3a;
  color: #d8cbb8;
  font-size: 0.875rem;
  line-height: 1.9;
}

.p-tire__cautionTitle {
  margin: 0 0 0.375rem;
  color: #e2a65c;
  font-size: 0.875rem;
}

.p-tire__cautionText p {
  margin: 0;
}

.p-tire__cautionText p + p {
  margin-top: 0.75em;
}

/* お問い合わせ／輸入発売元 */
.p-tire__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.875rem;
  padding: 2.75rem 3rem;
  border-left: 4px solid var(--tire-accent);
  background: var(--tire-stage);
}

.p-tire__contactTitle {
  margin: 0 0 0.375rem;
  font-size: 1.3125rem;
}

.p-tire__contactText {
  margin: 0;
  color: var(--tire-soft);
  font-size: 0.875rem;
}

.p-tire__importer {
  margin: 0;
  padding: 1.875rem 1.25rem;
  background: #202124;
  color: var(--tire-muted);
  font-size: 0.78125rem;
  line-height: 1.9;
  text-align: center;
}

/*=============================
  製品カード（template-parts/tire/product-card.php）
  中分類ページ（3列）と「同じ分類の製品」（4列）で共通
=============================*/
.p-tire__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.p-tire__cards.-related {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.p-tire__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #303236;
  border-radius: 2px;
  background: var(--tire-panel);
  transition: border-color 0.2s;
}

.p-tire__card:hover {
  border-color: #55585e;
}

/* 画像：1:1・背景透明・後ろに柔らかい光。NO IMAGE だけ #1f2022 */
.p-tire__cardImage {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.p-tire__cardImage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 48%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}

.p-tire .p-tire__cardImage img {
  position: absolute;
  left: 12%;
  top: 10%;
  width: 76%;
  height: 80%;
  object-fit: contain;
}

/*
 * 写真（メイン画像が JPEG）… 製品ページのステージ（.p-tire__spot.-photo）と同じ見せ方。
 * 後ろの光は出さず、::before を薄い枠として使い、その内側に余白をとって角を少し丸めた写真を置く。
 */
.p-tire__cardImage.-photo::before {
  inset: 8%;
  border: 1px solid var(--tire-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.p-tire .p-tire__cardImage.-photo img {
  inset: 0;
  width: auto;
  height: auto;
  max-width: 76%;
  max-height: 76%;
  margin: auto;
  border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.p-tire__cardImage.-noImage::before {
  display: none;
}

.p-tire__cardBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.25rem 1.5rem 1.375rem;
}

.p-tire__cardCat {
  display: block;
  margin: 0 0 0.375rem;
  color: var(--tire-muted);
  font-size: 0.75rem;
}

.p-tire__cardName {
  margin: 0;
  font-family: var(--tire-en);
  font-weight: 800;
  font-style: italic;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.p-tire__cardSub {
  display: block;
  margin: 0.375rem 0 0;
  color: var(--tire-accent);
  font-family: var(--tire-en);
  font-weight: 700;
  font-size: 0.71875rem;
  letter-spacing: 0.14em;
}

.p-tire__cardDesc {
  display: -webkit-box;
  margin: 0.875rem 0 0;
  overflow: hidden;
  color: var(--tire-soft);
  font-size: 0.84375rem;
  line-height: 1.85;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.p-tire__cardFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid #34363a;
}

/* 説明やサブタイトルが無いカードでも、区切り線の上に余白を確保する（直前の要素の下に余白） */
.p-tire__cardBody > :not(.p-tire__cardFoot):nth-last-child(2) {
  margin-bottom: 1.125rem;
}

.p-tire__cardCount {
  color: var(--tire-muted);
  font-size: 0.8125rem;
}

.p-tire__cardCount strong {
  margin-right: 0.1875rem;
  color: #fff;
  font-family: var(--tire-en);
  font-size: 1.0625rem;
}

.p-tire__arrow {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid #4a4d52;
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s;
}

.p-tire__arrow svg {
  width: 13px;
  height: 10px;
  fill: #fff;
}

.p-tire__card:hover .p-tire__arrow {
  background: var(--tire-accent);
  border-color: var(--tire-accent);
}

.p-tire__count {
  margin: 0;
  color: var(--tire-muted);
  font-size: 0.8125rem;
}

.p-tire__empty {
  padding: 3em 1em;
  text-align: center;
  color: var(--tire-muted);
  border: 1px dashed var(--tire-border);
}

/*=============================
  絞り込み（template-parts/tire/filter.php）
  ボタンはリンク。クリックでページを読み込み直す（見た目はモックアップ v2 の .filter）
  ・選択中 … オレンジ背景
  ・押せない（ほかの条件と組み合わせると0件）… グレー
=============================*/
.p-tire__filter {
  display: grid;
  gap: 0.875rem;
  /*
   * 再読み込み後に #tire-filter へ戻ったときの位置。
   * 固定ヘッダーの高さ（約90px）に加え、ヘッダーのドロップダウン（.sub-menu）が
   * 閉じている間も透明のまま上端から約140pxまでを覆いクリックを受け止めるため、
   * それより下に止まるようにしている（ヘッダー側は編集禁止のため、こちらで回避）
   */
  scroll-margin-top: 11rem;
}

.p-tire__filterGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.p-tire__filterLabel {
  margin-right: 0.375rem;
  font-weight: 700;
  font-size: 0.8125rem;
}

.p-tire__filterOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-tire .p-tire__filterOption {
  display: inline-flex;
  align-items: baseline;
  padding: 0.375rem 1rem;
  border: 1px solid #45484d;
  border-radius: 999px;
  color: var(--tire-soft);
  font-family: var(--tire-en);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.4;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.p-tire__filterOption small {
  margin-left: 0.25rem;
  color: var(--tire-muted);
  font-size: 0.6875rem;
}

.p-tire a.p-tire__filterOption:hover {
  border-color: #6a6d72;
  color: #fff;
}

.p-tire .p-tire__filterOption.is-active,
.p-tire a.p-tire__filterOption.is-active:hover {
  background: var(--tire-accent);
  border-color: var(--tire-accent);
  color: #fff;
}

.p-tire__filterOption.is-active small {
  color: #ffe1d1;
}

.p-tire .p-tire__filterOption.is-disabled {
  border-color: #34363a;
  color: rgba(255, 255, 255, 0.28);
  cursor: not-allowed;
}

.p-tire__filterOption.is-disabled small {
  color: rgba(255, 255, 255, 0.22);
}

/*=============================
  大分類ページの中分類タイル（CST下層のタイルと同じ見た目。変更しない）
=============================*/
.p-tire__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1b1b1b;
}

.p-tire__tileImage {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
}

.p-tire__tileImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-tire__tileImage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 100%);
  transition: opacity 0.3s ease-in-out;
}

.p-tire__tileLabel {
  position: relative;
  z-index: 1;
  padding: 0 1em clamp(1.25rem, 0.744rem + 2.16vw, 2.6875rem);
  color: #fff;
  text-align: center;
  font-family: var(--tire-en);
  line-height: 1.25;
  letter-spacing: 0.01em;
  /* 375:20px → 1440:30px */
  font-size: clamp(1.25rem, 1.03rem + 0.94vw, 1.875rem);
}

.p-tire__tile:hover .p-tire__tileImage img {
  transform: scale(1.06);
}

.p-tire__tile:hover .p-tire__tileImage::after {
  opacity: 0.8;
}

/*=============================
  画像未設定時の NO IMAGE（中分類タイル / 製品カード）
  製品ページのステージは .p-tire__spot.-noImage
=============================*/
.p-tire__tileImage.-noImage,
.p-tire__cardImage.-noImage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tire-noimage);
}

.p-tire__noImageText {
  color: #5c5f63;
  font-family: var(--tire-en);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
}

/*=============================
  戻るリンク（中分類ページ下部 → 大分類）
=============================*/
.p-tire__backLink {
  text-align: center;
}

.p-tire__backLink a {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: 0.875rem;
}

.p-tire__backLink .-ico {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--tire-accent);
  border-radius: 50%;
  transition: background-color 0.2s;
}

.p-tire__backLink .-ico::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid var(--tire-accent);
  border-left: 1.5px solid var(--tire-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-tire__backLink a:hover .-ico {
  background: var(--tire-accent);
}

.p-tire__backLink a:hover .-ico::before {
  border-color: #fff;
}

/*=============================
  編集者向け注意書き
=============================*/
.p-tire__notice {
  padding: 1em 1.25em;
  background: #fff4cc;
  color: #5c4400;
  font-size: 0.8125rem;
  line-height: 1.7;
}

/*=============================
  Responsive
=============================*/
@media screen and (max-width: 1023px) {
  .p-tire__stageIn {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    padding-bottom: 3.75rem;
  }

  .p-tire__showcase {
    width: 100%;
    max-width: 32.5rem;
    margin: 0 auto;
  }

  .p-tire__features {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-tire__feature {
    padding: 1.625rem 0;
    border-left: 0;
    border-top: 1px solid var(--tire-line);
  }

  .p-tire__feature:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .p-tire__tech {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .p-tire__tech.-reverse .p-tire__techVisual {
    order: 0;
  }

  .p-tire__oe {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-tire__oe li:nth-child(3n + 2),
  .p-tire__oe li:nth-child(3n + 3) {
    padding-left: 0;
  }

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

@media screen and (max-width: 767px) {
  .p-tire__cards,
  .p-tire__cards.-related {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-tire__contact {
    padding: 1.875rem 1.5rem;
  }

  .p-tire__secHeading .-note {
    width: 100%;
    margin-left: 0;
  }

  .p-tire__stageName {
    top: 46%;
    bottom: auto;
  }
}

/*=============================
  Reduced motion
=============================*/
@media (prefers-reduced-motion: reduce) {
  .p-tire__tileImage img,
  .p-tire__thumb,
  .p-tire__card,
  .p-tire .p-tire__spotImage {
    transition: none;
  }
}