@charset "UTF-8";
/*!
 * cst.css — CSTタイヤ 親ページ専用スタイル
 * -----------------------------------------------------------------------------
 * 対応テンプレート : page/page-cst.php
 * 対応デザイン     : _design/cst-top-pc.png（1440px幅）
 * 読み込み方法     : page-cst.php 内の <link>（暫定措置。詳細は同ファイル冒頭コメント）
 *
 * 【重要】
 * ・SCSS は経由していません。修正はこの CSS を直接編集してください。
 *   （assets/sass/ に追加すると他作業者の全体ビルドに影響するため）
 * ・product.css が全ページで読み込まれるため、
 *   セレクタはすべて .p-cst 配下に閉じています。新規追加時も必ず .p-cst 起点で。
 * ・余白・カラム・コンテナ幅は common.css のデザイントークン
 *   （l-container / l-grid / l-flex / l-spacer の data-* 属性）で指定し、
 *   ここには装飾とトークンで表現できない指定のみを記述しています。
 *
 * 【デザイン実測値（@1440px）】
 *   背景     ダーク #292a2c ／ Instagramのみ #3e3f41
 *   アクセント #ed743e（= --l-accent-color） ／ YouTube帯 #e20325
 *   ヒーロー   高さ560px・コンテナ1280（左余白80px）
 *   その他    コンテナ1160 ／ Instagramグリッド1032中央 ／ YouTubeバナー640中央
 *   タイル    480×480の3分割・隙間なし・全幅
 *
 * ブレークポイント : md 768px / lg 1024px（common.css と同一）
 * -----------------------------------------------------------------------------
 */

/*=============================
  Base
=============================*/
.p-cst {
  --cst-bg: #292a2c;
  --cst-bg-light: #3e3f41;
  --cst-accent: var(--l-accent-color, #ed743e);
  --cst-text-muted: rgba(255, 255, 255, 0.6);

  background: var(--cst-bg);
  color: #fff;
}

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

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

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

.p-cst figure {
  margin: 0;
}

.p-cst__section.-light {
  background: var(--cst-bg-light);
}

/*=============================
  Hero
  デザイン: 高さ560px / 右にバイク写真・左に黒のグラデーション
=============================*/
.p-cst__hero {
  position: relative;
  background-color: #050505;
  background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.55) 55%, rgba(5, 5, 5, 0.4) 100%), var(--cst-hero-sp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media screen and (min-width: 1024px) {
  .p-cst__hero {
    background-image: linear-gradient(90deg, rgb(5, 5, 5) 0%, rgba(5, 5, 5, 0.9) 22%, rgba(5, 5, 5, 0.5) 48%, rgba(5, 5, 5, 0) 78%), var(--cst-hero-pc);
  }
}

.p-cst__heroBody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* 1440pxで560px */
  min-height: clamp(20rem, 38.9vw, 35rem);
}

.p-cst__heroLogo {
  /* 1440pxで545px（= 37.85vw） */
  width: clamp(11.25rem, 37.85vw, 34.0625rem);
}

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

.p-cst__heroTitle {
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  /* 375:24px → 1440:36px */
  font-size: clamp(1.5rem, 1.236rem + 1.13vw, 2.25rem);
}

.p-cst__tag {
  display: inline-block;
  background: #fff;
  color: var(--l-primary-text-color, #37393c);
  border-radius: 0;
  /* デザイン: 145×40 */
  padding: 0.85em 1.8em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  /* 375:12px → 1440:14px */
  font-size: clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem);
}

.p-cst__heroLead {
  color: #fff;
  line-height: 2;
  /* 375:14px → 1440:15px */
  font-size: clamp(0.875rem, 0.853rem + 0.09vw, 0.9375rem);
}

/*=============================
  Breadcrumb（ダーク背景用の色上書き）
  区切りはデザインに合わせてオレンジのシェブロン
=============================*/
.p-cst__breadcrumb .c-breadcrumb a {
  color: #fff;
}

.p-cst__breadcrumb .c-breadcrumb a::after {
  right: 2px;
  width: 6px;
  height: 6px;
  background: none;
  border-top: 1.5px solid var(--cst-accent);
  border-right: 1.5px solid var(--cst-accent);
  transform: translateY(-50%) rotate(45deg);
}

.p-cst__breadcrumb .c-breadcrumb .breadcrumb_last {
  color: var(--cst-text-muted);
}

/*=============================
  Heading
=============================*/
.p-cst__heading {
  flex-wrap: wrap;
}

.p-cst__heading.-center {
  display: block;
  text-align: center;
}

.p-cst__headingEn {
  display: block;
  color: var(--cst-accent);
  font-family: var(--l-en-font-set, sans-serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  /* 375:32px → 1440:48px */
  font-size: clamp(2rem, 1.648rem + 1.5vw, 3rem);
}

.p-cst__headingJa {
  display: block;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  /* 375:13px → 1440:16px */
  font-size: clamp(0.8125rem, 0.746rem + 0.28vw, 1rem);
}

.p-cst__headingJa.-large {
  letter-spacing: 0.04em;
  /* 375:22px → 1440:34px */
  font-size: clamp(1.375rem, 1.111rem + 1.13vw, 2.125rem);
}

.p-cst__sectionHead {
  width: 100%;
}

/*=============================
  もっと見るリンク（オレンジ丸矢印）
=============================*/
.p-cst__moreLink {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  color: #fff;
  font-weight: 500;
  line-height: 1.4;
  /* 375:13px → 1440:15px */
  font-size: clamp(0.8125rem, 0.766rem + 0.19vw, 0.9375rem);
  transition: opacity 0.3s ease-in-out;
}

.p-cst__moreLink .-ico {
  display: block;
  flex-shrink: 0;
  width: clamp(1.75rem, 1.53rem + 0.94vw, 2rem);
  transition: transform 0.3s ease-in-out;
}

.p-cst__moreLink .-ico svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-cst__moreLink:hover {
  opacity: 0.75;
}

.p-cst__moreLink:hover .-ico {
  transform: translateX(4px);
}

@media screen and (max-width: 1023px) {
  .p-cst__sectionHead .p-cst__moreLink {
    align-self: flex-end;
  }
}

/*=============================
  カテゴリタイル（全幅3分割・隙間なし・1:1）
=============================*/
.p-cst__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #1b1b1b;
}

@media screen and (min-width: 1024px) {
  .p-cst__tile {
    aspect-ratio: 1 / 1;
  }
}

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

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

/* 文字の可読性を確保する下方向の暗幕 */
.p-cst__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-cst__tileBody {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  width: 100%;
  /* デザイン: 左端から40pxの位置にオレンジ線、テキストは70px、下40px */
  margin-bottom: clamp(1.25rem, 0.658rem + 2.53vw, 2.5rem);
  padding-right: clamp(1.25rem, 0.658rem + 2.53vw, 2.5rem);
  padding-left: clamp(2.5rem, 1.316rem + 5.06vw, 4.375rem);
}

.p-cst__tileBody::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(1.25rem, 0.658rem + 2.53vw, 2.5rem);
  width: 6px;
  background: var(--cst-accent);
}

.p-cst__tileEn {
  display: block;
  color: #fff;
  font-family: var(--l-en-font-set, sans-serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  /* 375:22px → 1440:34px */
  font-size: clamp(1.375rem, 1.111rem + 1.13vw, 2.125rem);
}

.p-cst__tileJa {
  display: block;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  /* 375:13px → 1440:15px */
  font-size: clamp(0.8125rem, 0.766rem + 0.19vw, 0.9375rem);
}

.p-cst__tile:hover .p-cst__tileImage img {
  transform: scale(1.06);
}

.p-cst__tile:hover .p-cst__tileImage::after {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .p-cst__tileImage img,
  .p-cst__blogThumb img,
  .p-cst__youtubeImage img {
    transition: none;
  }
}

/*=============================
  Blog
=============================*/
.p-cst__blogCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-cst__blogThumb {
  overflow: hidden;
  /* デザイン: 272×168 */
  aspect-ratio: 16 / 10;
  background: #1b1b1b;
}

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

.p-cst__blogCard:hover .p-cst__blogThumb img {
  transform: scale(1.06);
}

.p-cst__blogBody {
  padding-top: 1.15em;
}

.p-cst__blogDate {
  display: block;
  color: var(--cst-text-muted);
  font-family: var(--l-en-font-set, sans-serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  /* 375:12px → 1440:13px */
  font-size: clamp(0.75rem, 0.735rem + 0.06vw, 0.8125rem);
}

.p-cst__blogTitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0.85em;
  color: #fff;
  font-weight: 700;
  line-height: 1.55;
  /* 375:13px → 1440:15px */
  font-size: clamp(0.8125rem, 0.766rem + 0.19vw, 0.9375rem);
}

.p-cst__blogCard.is-dummy {
  opacity: 0.5;
  pointer-events: none;
}

/*=============================
  SNSカード（Instagram / Facebook 共通）
  カードの種類はアイコンだけを差し替え、配色はオレンジで統一
=============================*/
.p-cst__snsBanner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #1b1b1b;
  transition: transform 0.3s ease-in-out;
}

.p-cst__snsBannerImage {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

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

.p-cst__snsBannerBody {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: clamp(0.875rem, 0.727rem + 0.63vw, 1.25rem) clamp(1rem, 0.704rem + 1.27vw, 1.625rem);
  background: #1b1b1b;
}

.p-cst__snsBannerBody .-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(1.5rem, 1.352rem + 0.63vw, 1.875rem);
  height: clamp(1.5rem, 1.352rem + 0.63vw, 1.875rem);
  color: var(--cst-accent);
}

.p-cst__snsBannerBody .-ico svg {
  width: 100%;
  height: 100%;
}

.p-cst__snsBannerBody .-body {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin-right: auto;
  min-width: 0;
}

.p-cst__snsBannerBody .-name {
  display: block;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  /* 375:14px → 1440:16px */
  font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
}

.p-cst__snsBannerBody .-handle {
  display: block;
  color: var(--cst-text-muted);
  font-family: var(--l-en-font-set, sans-serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  /* 375:12px → 1440:13px */
  font-size: clamp(0.75rem, 0.735rem + 0.06vw, 0.8125rem);
}

.p-cst__snsBannerBody .-arrow {
  display: block;
  flex-shrink: 0;
  width: clamp(1.75rem, 1.53rem + 0.94vw, 2rem);
  transition: transform 0.3s ease-in-out;
}

.p-cst__snsBannerBody .-arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-cst__snsBanner:hover .p-cst__snsBannerImage img {
  transform: scale(1.06);
}

.p-cst__snsBanner:hover .p-cst__snsBannerBody .-arrow {
  transform: translateX(4px);
}

/*=============================
  YouTube バナー
  支給画像（640×248）に赤帯「公式Youtubeチャンネルはこちら」まで
  含まれているため、帯はCSSではなく画像で表現しています
=============================*/
.p-cst__youtube {
  display: block;
  overflow: hidden;
  transition: opacity 0.3s ease-in-out;
}

.p-cst__youtubeImage {
  overflow: hidden;
  aspect-ratio: 640 / 248;
  background: #1b1b1b;
}

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

.p-cst__youtube:hover {
  opacity: 0.85;
}

.p-cst__youtube:hover .p-cst__youtubeImage img {
  transform: scale(1.04);
}

/*=============================================================================
  下層ページ（page/page-cst-child.php）
  対応デザイン : _design/MOTORCYCLE.png / CST ADVENTURE.png / RUNBIKE.png
  ヒーローとタイルグリッドのみ親と異なり、Blog以降は親と共通です。

  【デザイン実測値（@1440px）】
    ヒーロー 高さ480px・コンテナ1280（左余白80px）
    CSTロゴ  217×32（親は545px）
    h1       80px 白・英字大文字
    タグ     231×40 オレンジ背景/白文字・24px（親は白背景/黒文字）
    タイル   コンテナ1160・3列・隙間0・386.67×386.67（1:1）
    ラベル   30px 白・水平中央／下から約43px
=============================================================================*/

/*=============================
  下層ヒーロー
=============================*/
.p-cst__hero.-child {
  /* カンプは素材写真そのままだが、白文字の可読性確保のため薄く暗幕を敷く */
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.3) 100%), var(--cst-hero-sp);
}

@media screen and (min-width: 1024px) {
  .p-cst__hero.-child {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0) 80%), var(--cst-hero-pc);
  }
}

.p-cst__heroBody.-child {
  justify-content: flex-start;
  /* 1440pxで480px */
  min-height: clamp(17.5rem, 33.33vw, 30rem);
}

.p-cst__heroLogo.-small {
  /* 1440pxで217px */
  width: clamp(8.75rem, 15.07vw, 13.5625rem);
}

.p-cst__heroTitle.-en {
  font-family: var(--l-en-font-set, sans-serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  /* 375:40px → 1440:80px */
  font-size: clamp(2.5rem, 1.619rem + 3.76vw, 5rem);
}

.p-cst__tag.-accent {
  background: var(--cst-accent);
  color: #fff;
  /* デザイン: 231×40 / 左右padding 10px */
  padding: 0.25em 0.42em;
  letter-spacing: 0.02em;
  /* 375:16px → 1440:24px */
  font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
}

/*=============================
  下層タイルグリッド
  （親タイルと違い、オレンジ縦線なし・ラベルは水平中央）
=============================*/
.p-cst__gridTile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1b1b1b;
}

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

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

/* 文字の可読性を確保する下方向の暗幕（親タイルと同じ考え方） */
.p-cst__gridTileImage::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-cst__gridTileLabel {
  position: relative;
  z-index: 1;
  /* デザイン: 下から約43px */
  padding: 0 1em clamp(1.25rem, 0.744rem + 2.16vw, 2.6875rem);
  color: #fff;
  text-align: center;
  font-family: var(--l-en-font-set, sans-serif);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  /* 375:20px → 1440:30px */
  font-size: clamp(1.25rem, 1.03rem + 0.94vw, 1.875rem);
}

/* ホバー演出は親のタイルと統一 */
.p-cst__gridTile:hover .p-cst__gridTileImage img {
  transform: scale(1.06);
}

.p-cst__gridTile:hover .p-cst__gridTileImage::after {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .p-cst__gridTileImage img {
    transition: none;
  }
}

/*=============================
  編集者向けの注意書き（スラッグ未定義時のみ表示）
=============================*/
.p-cst__notice {
  padding: 1em 1.5em;
  background: var(--cst-accent);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.766rem + 0.19vw, 0.9375rem);
}

/*=============================================================================
  下層ページ 回遊動線
=============================================================================*/

/*=============================
  施策1：カテゴリ切替ナビ（sticky）

  ヘッダー高さはテーマトークン --l-headerHight-sp / -pc を参照。
  ただし実測値（SP 78px / PC 90px）がトークン（56 / 66px）より
  約22〜24px 大きいため、その差分を加算しています。
  ヘッダーの高さが変わったら --cst-header-h の加算値だけ調整してください。
=============================*/
.p-cst__catNav {
  --cst-header-h: calc(var(--l-headerHight-sp, 56px) + 22px);

  position: sticky;
  top: var(--cst-header-h);
  /* ヘッダー(z-index:7)より背面、本文より前面 */
  z-index: 5;
  background: var(--cst-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media screen and (min-width: 1024px) {
  .p-cst__catNav {
    --cst-header-h: calc(var(--l-headerHight-pc, 66px) + 24px);
  }
}

.p-cst__catNavList {
  display: flex;
  flex-wrap: nowrap;
  /* SPでははみ出し分を横スクロール */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.p-cst__catNavItem {
  position: relative;
  flex-shrink: 0;
}

/* 区切りの細い縦線 */
.p-cst__catNavItem + .p-cst__catNavItem::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1em;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%);
}

.p-cst__catNavLink {
  display: block;
  padding: 1.15em clamp(1rem, 0.704rem + 1.27vw, 1.625rem);
  border-bottom: 3px solid transparent;
  color: #999;
  white-space: nowrap;
  font-family: var(--l-en-font-set, sans-serif);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  /* 375:13px → 1440:15px */
  font-size: clamp(0.8125rem, 0.766rem + 0.19vw, 0.9375rem);
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.p-cst a.p-cst__catNavLink:hover {
  color: #fff;
}

.p-cst__catNavLink.is-current {
  border-bottom-color: var(--cst-accent);
  color: #fff;
  font-weight: 700;
}

/*=============================
  施策2：他カテゴリバナー
  タイル本体は親の .p-cst__tile を流用し、横長化のみ上書き
=============================*/
.p-cst__subHeading {
  color: #fff;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  /* 375:15px → 1440:18px */
  font-size: clamp(0.9375rem, 0.871rem + 0.28vw, 1.125rem);
}

.p-cst__tile.-banner {
  aspect-ratio: 16 / 9;
}

@media screen and (min-width: 1024px) {
  .p-cst__tile.-banner {
    aspect-ratio: 12 / 5;
  }

  /* 横長なので文字まわりを少し詰める */
  .p-cst__tile.-banner .p-cst__tileEn {
    font-size: clamp(1.25rem, 1.017rem + 0.95vw, 1.75rem);
  }
}

/* 横長バナーは文字が左下に来るため、下方向に加えて左方向にも暗幕を足す */
.p-cst__tile.-banner .p-cst__tileImage::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 55%);
}

/*=============================
  親ページ（CSTタイヤ トップ）への戻り導線
=============================*/

/* --- 切替ナビ内の先頭項目 --- */
.p-cst__catNavLink.-home {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--l-primary-font-set, sans-serif);
  font-weight: 500;
}

.p-cst__catNavItem.-home {
  /* カテゴリのタブ群と役割が違うので少し間隔をあける */
  margin-right: 0.25em;
}

/* 左向きシェブロン（共通） */
.p-cst__catNavLink.-home .-ico,
.p-cst__backLink .-ico {
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}

.p-cst a.p-cst__catNavLink.-home:hover .-ico {
  transform: rotate(45deg) translate(2px, -2px);
}

/* --- 他カテゴリバナー下のテキストリンク --- */
.p-cst__backLink {
  text-align: center;
}

.p-cst__backLink a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: #fff;
  font-weight: 500;
  line-height: 1.4;
  /* 375:13px → 1440:15px */
  font-size: clamp(0.8125rem, 0.766rem + 0.19vw, 0.9375rem);
  transition: opacity 0.3s ease-in-out;
}

.p-cst__backLink a:hover {
  opacity: 0.7;
}

.p-cst__backLink a:hover .-ico {
  transform: rotate(45deg) translate(2px, -2px);
}

.p-cst__backLink .-text {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.15em;
}

/*=============================
  SNSアイコン列（TOPページのみ / config の show_icons で制御）
  単色の白アイコン → ホバーで各SNSブランドカラー
=============================*/
.p-cst__snsIcons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 0.954rem + 1.27vw, 1.875rem);
}

.p-cst__snsIconsItem {
  display: block;
}

.p-cst .p-cst__snsIconsLink {
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  width: clamp(2rem, 1.815rem + 0.76vw, 2.5rem);
  height: clamp(2rem, 1.815rem + 0.76vw, 2.5rem);
  color: #fff;
  transition: transform 0.3s ease-in-out;
}

.p-cst .p-cst__snsIconsLink:hover {
  color: #fff;
  transform: translateY(-2px);
}

.p-cst .p-cst__snsIconsLink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none;
}

.p-cst .p-cst__snsIconsLink:hover::after {
  opacity: 1;
}

.p-cst .p-cst__snsIconsLink.is-facebook::after {
  background-image: url("../img/cst/facebook-official.svg");
}

.p-cst .p-cst__snsIconsLink.is-youtube::after {
  background-image: url("../img/cst/youtube-official.svg");
}

.p-cst .p-cst__snsIconsLink.is-instagram::after {
  background-image: url("../img/cst/instagram-official.svg");
}

.p-cst .p-cst__snsIconsLink.is-x::after {
  background-image: url("../img/cst/x-official.svg");
}

.p-cst__snsIconsItem svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease-in-out;
}

.p-cst .p-cst__snsIconsLink:hover svg {
  opacity: 0;
}

/*=============================
  最終セクションの下余白の担保

  「他のカテゴリを見る」は下余白を持たず、次セクション（Blog等）の
  上余白に任せる設計。RUNBIKE のように後続セクションが全て非表示の
  ページでは最終要素になるため、ここで下余白を補います。
  （後続がある場合はこのルールが効かないので余白は二重になりません）
=============================*/
.p-cst__section.-otherCategories:last-child {
  padding-bottom: clamp(4rem, 3.111rem + 3.8vw, 6rem);
}