@charset "utf-8";
/* ============================================================
   spec-switch.css  —  .c-specSwitch
   同じシリーズの「仕様違いページ」を左右に並べて行き来させるナビ。
   例：アネスト岩田 静音SLP の 0.8MPa仕様 ⇔ 1.0MPa仕様

   設計の狙い：
   ・現在地は青ベタ＋下向きの▼で「いま見ているページ」だと即座に分かる
   ・もう一方はカード全体がリンク。ホバーでわずかに持ち上がる
   ・カードごとに1行の説明を添え、仕様名だけで客に迷わせない

   【重要】#main-category 配下では common.css の全称リセット
     #wrapper #contents #main-column #main-category * { margin:0; padding:0; ... }
   が効く（ID 4個）。本ファイルも同じ強さ（ID 4個＋クラス1個）で
   指定している。セレクタを短くすると padding が 0 に潰れる。
   ※ ::before / ::after は全称セレクタ * の対象外なので、
     三角形（width:0 の指定）はすべて疑似要素で作っている。
   ============================================================ */

/* ------------------------------------------------------------
   1. 並び
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .c-specSwitch {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

/* ------------------------------------------------------------
   2. カード共通
   ------------------------------------------------------------ */
/* min-width:0 が要。既定の min-width:auto のままだと、中の文字の
   最小幅より狭くできず、狭い画面で2枚が横にはみ出す */
#wrapper #contents #main-column #main-category .c-specSwitch__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding: 14px 16px 13px;
  border-radius: 8px;
  text-align: center;
  text-decoration: none !important;
}

/* 幅が足りないときは、仕様名を途中で割らずにバッジと段組みへ落とす */
#wrapper #contents #main-column #main-category .c-specSwitch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin-bottom: 6px;
}

/* 【標準】【中圧】にあたる小さいラベル */
#wrapper #contents #main-column #main-category .c-specSwitch__badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

#wrapper #contents #main-column #main-category .c-specSwitch__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}

#wrapper #contents #main-column #main-category .c-specSwitch__desc {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  line-height: 1.5;
}

/* 下段の小さいピル（「この仕様を見る」／「いま見ているページ」） */
#wrapper #contents #main-column #main-category .c-specSwitch__go {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* kw レンジの強調表示（差し色）。バッジ＋仕様名の下に置く大きな数値。
   __desc とは別枠。新規クラスなので既存ページ（0.8MPa/1.0MPa）には影響しない
   （2026-08-10 追加・総合トップページ用） */
#wrapper #contents #main-column #main-category .c-specSwitch__kw {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 700;
  color: #D6650F;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__kw {
  color: #ffe6b3;
}

/* ------------------------------------------------------------
   3. 未選択（リンク側）
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link {
  background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 100%);
  border: 1px solid #00419b;
  color: #16325c !important;
  transition: border-color .25s ease, background .25s ease;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link .c-specSwitch__badge {
  background-color: #00419b;
  color: #fff;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link .c-specSwitch__desc {
  color: #5c6b80;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link .c-specSwitch__go {
  border: 1px solid #26467e;
  color: #26467e;
  transition: background-color .25s ease, color .25s ease;
}

/* ピル右端の ▶（疑似要素なのでリセットの width:auto を受けない） */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link .c-specSwitch__go::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  vertical-align: middle;
}

/* ホバーは「色が変わる」だけにする。浮き上がり（transform）や影は付けない
   ── 動きの演出は使わない方針（2026-08-05 ユーザー指示） */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link:hover {
  border-color: #00337a;
  background: linear-gradient(180deg, #ffffff 0%, #e9f1fd 100%);
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link:hover .c-specSwitch__go {
  background-color: #00419b;
  color: #fff;
}

/* ------------------------------------------------------------
   3.5 既存バナーに寄せたバリアント（--gold）
   本文中で既に使われているボタン画像（金〜琥珀のグラデーション・光沢・
   紺のバッジ・落款のような影）に色味とトーンを合わせるオプトイン修飾。
   `--link` と併記する（例: class="c-specSwitch__item--link c-specSwitch__item--gold"）。
   併記しなければ何も変わらないので、0.8MPa/1.0MPa の相互切り替えナビには影響しない。
   （2026-08-10 追加）
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold {
  border-radius: 8px;
  border: 1px solid #c9900f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #ffd35a 0%, #ffbc1f 45%, #f2960a 100%);
  box-shadow: 0 4px 10px rgba(130, 90, 10, .3);
  color: #2b1a05 !important;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__badge {
  background-color: #16325c;
  color: #fff;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__name {
  color: #2b1a05;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__kw {
  color: #2b1a05;
  font-size: 14px;
  margin-bottom: 6px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__desc {
  color: rgba(43, 26, 5, .78);
}

/* CTA は塗りつぶさず、バッジと同じ紺を枠線・文字色にだけ使う（背景は透過） */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__go {
  background-color: transparent;
  border: 1px solid #16325c;
  color: #16325c;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__go::after {
  border-left-color: currentColor;
}

/* ホバーは色が変わるだけ（浮き上がり・影は付けない方針を継承） */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #ffbc1f 0%, #f2960a 45%, #e18400 100%);
  border-color: #b8830f;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold:hover .c-specSwitch__go {
  background-color: #16325c;
  border-color: #16325c;
  color: #fff;
}

/* ------------------------------------------------------------
   3.6 --gold の文字サイズ（総合トップ「失敗しない選び方」用）

   主役は【標準】バッジ＋「0.8MPa仕様」。kw レンジは脇役に下げる。
   素の __badge / __name / __desc を直接いじると 0.8MPa・1.0MPa ページの
   切り替えナビまで太るため、--gold を併記したカードだけに限定している。
   （2026-08-21 ユーザー指示：kw を小さく、バッジと仕様名を大きく）
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__badge {
  padding: 5px 11px;
  font-size: 12px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__name {
  font-size: 21px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__desc {
  font-size: 12.5px;
}

/* ------------------------------------------------------------
   3.7 主役／脇役（--primary / --sub）

   2 択のうち実際に選ばれる比率が偏っているとき（0.8MPa が圧倒的多数）、
   面積差だけでは「どちらでも良い」に見えてしまう。
   そこで **地の色ごと格を分ける**：
     主役 = 金（--gold と併記）／脇役 = 白地に細いグレー枠、影なし
   脇役は「無効」ではなく「静か」。文字色・枠線・CTA は生かしたまま彩度だけ
   落とし、ホバーで紺に立ち上がる。
   （2026-08-21 追加 → 同日、面積差だけでは弱いとの指摘を受け配色差へ拡張）
   ------------------------------------------------------------ */

/* 共通の器：縦積みにして CTA をカード下端へ揃える。
   説明文の行数が左右で違っても、ボタンの高さが揃って落ち着く */
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--primary,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--sub,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--current {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--primary .c-specSwitch__desc,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--sub .c-specSwitch__desc,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--current .c-specSwitch__desc {
  align-self: stretch;
}

/* margin-top:auto で下端に貼り付ける（左右のボタン位置が揃う） */
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--primary .c-specSwitch__go,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--sub .c-specSwitch__go,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--current .c-specSwitch__go {
  margin-top: auto;
}

/* 用途の一文はカード先頭に置く「前書き」。
   板（塗りの箱）を敷くと付箋を貼ったように見えて野暮なので、
   文字色を濃く取り、下に罫線を一本引いて仕様名と分ける。
   塗りを外した分だけカードの高さも下がる。
   （2026-08-21 修正：白の板は「ださい」との指摘。可読性は文字色で担保する） */
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--primary .c-specSwitch__desc,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--sub .c-specSwitch__desc,
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--current .c-specSwitch__desc {
  background: none;
  line-height: 1.45;
  letter-spacing: .02em;
}

/* ---- 主役（0.8MPa）：--gold と併記する ---- */
/* 幅比。2026-09-14 の完成イメージ実測で 1.22:1 だったため 1.5 から詰めた。
   脇役を「同格の選択肢」に見せる設計（3.8）では、幅で突き放しすぎない */
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--primary {
  flex: 1.22 1 0;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary {
  padding: 10px 18px 10px;
  border-width: 2px;
  box-shadow: 0 6px 14px rgba(130, 90, 10, .38);
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__head {
  margin-bottom: 3px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__badge {
  padding: 5px 12px;
  font-size: 14px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__name {
  font-size: 25px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__kw {
  margin-bottom: 6px;
  font-size: 15px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__desc {
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(43, 26, 5, .3);
  color: #241503;
  font-size: 13.5px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__go {
  padding: 6px 20px;
  font-size: 12.5px;
}

/* ---- 脇役（1.0MPa）：--link と併記する（--gold は付けない） ----
   金を外して白地へ落とすのが眼目。ここが「面積以外の差」の本体。 */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub {
  border-radius: 7px;
  border: 1px solid #9daabb;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  box-shadow: none;
  color: #3a4657 !important;
  padding: 10px 13px 11px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__head {
  margin-bottom: 3px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__badge {
  padding: 4px 9px;
  background-color: #5a6a85;
  color: #fff;
  font-size: 11px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__name {
  color: #3a4657;
  font-size: 16px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__kw {
  margin-bottom: 6px;
  color: #6b7889;
  font-size: 12px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__desc {
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccd4de;
  color: #4b5768;
  font-size: 12px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__go {
  padding: 4px 14px;
  border: 1px solid #9aa5b4;
  background-color: transparent;
  color: #5a6675;
  font-size: 11px;
}

/* 静かでも「押せる」ことは伝える。ホバーで紺に立ち上がらせる */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub:hover {
  border-color: #00419b;
  background: linear-gradient(180deg, #ffffff 0%, #eaf1fb 100%);
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub:hover .c-specSwitch__go {
  border-color: #00419b;
  background-color: #00419b;
  color: #fff;
}

/* ------------------------------------------------------------
   3.8 脇役を「同格の選択肢」に上げ、地色だけ淡くする（--amber）

   `--sub` と併記する修飾。総合トップの 1.0MPa カードだけに付ける。

   経緯（2026-09-07 → 2026-09-14 で設計が変わった）：
   ・初回は「背景色：薄いオレンジ」だけの指示と読み、白地を淡橙に替え、
     寸法差（文字を小さく・幅を狭く）はそのまま残した。
   ・2026-09-14 に別の指示が来た——
       「0.8MPaが標準・主役。でも1.0MPaという選択肢もある」
       「1.0MPa側を"同じ選択肢"として見せながら、薄いオレンジに」
       「視線は自然に0.8MPaへ行くようにしたい」
     添付の完成イメージを実測したところ、用途文・kw・CTA は 0.8 と**同寸**、
     仕様名だけ一回り小さい（従来は 1.82 倍差 → 1.19 倍差）、
     カード幅比も 1.5:1 → 1.22:1 に縮まっていた。

   つまり **格差の担い手を「寸法」から「色の濃さ」へ移した**のが今の設計。
     主役 = 濃い金＋影＋2px枠＋仕様名25px
     脇役 = 淡い橙＋影なし＋1px枠＋仕様名21px（それ以外は同寸）
   枠線を灰褐色ではなく金系（#f0b12a）にしてあるのも「同じ家系の選択肢」に
   見せるため。ここを灰に戻すと、また"無効な選択肢"に見える。

   **地色をこれ以上濃くしない**。濃くすると 2026-08-21 に潰した
   「1.0 が目立ちすぎる」へ逆戻りする。淡さがこの設計の生命線。

   --sub と同じ詳細度（ID4＋クラス2）では後勝ち頼みになるため、
   3クラス（--link/--sub/--amber）を連結して確実に上書きする。
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber {
  padding: 10px 18px 10px;
  border-color: #f0b12a;
  background: linear-gradient(180deg, #fdf8e8 0%, #fdebb9 100%);
  box-shadow: none;
  color: #4a3520 !important;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber .c-specSwitch__head {
  margin-bottom: 3px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber .c-specSwitch__badge {
  padding: 5px 11px;
  background-color: #8a6524;
  color: #fff;
  font-size: 12px;
}

/* 仕様名だけは主役より一回り小さい（25px → 21px）。ここが唯一残した寸法差 */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber .c-specSwitch__name {
  color: #4a3520;
  font-size: 21px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber .c-specSwitch__kw {
  margin-bottom: 6px;
  color: #7d5c2c;
  font-size: 14px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber .c-specSwitch__desc {
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e7cfa8;
  color: #5b452c;
  font-size: 13.5px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber .c-specSwitch__go {
  padding: 6px 20px;
  border-color: #b98f4e;
  color: #6d4f22;
  font-size: 12.5px;
}

/* ホバーは 3.7 と同じ作法で、色が一段濃くなるだけ（浮き上がり・影は付けない） */
#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber:hover {
  border-color: #c9900f;
  background: linear-gradient(180deg, #fdf2d4 0%, #fde2a0 100%);
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub.c-specSwitch__item--amber:hover .c-specSwitch__go {
  border-color: #8a6524;
  background-color: #8a6524;
  color: #fff;
}

/* ------------------------------------------------------------
   4. 選択中（現在地）

   経緯：
   ・〜2026-08-12  青ベタ塗り
   ・2026-08-12    FVから続く青の面積が多すぎるとして淡いグレーへ変更
   ・2026-08-21    そのグレーが「無効」に見え、隣の白＋紺枠カードのほうが
                   選択中に見える——という取り違えの指摘。塗りを戻して濃淡を逆転。
                   当時の懸念は面積ではなく高さだった。カード高を約4割詰めた
                   ので、青ベタでも重くならない。

   見分けの要は3つ。
     ① 濃い塗り（もう一方は白地）
     ② 下向きの▼が本文へ刺さる＝「このページの中身がこれ」
     ③ ラベルは「札」（角丸4px・枠なし・矢印なし）にして押せるものに見せない
   もう一方は「ピル」（角丸20px・枠あり・▶あり）。塗りだけでなく形でも別物に
   しているので、色が判別しにくい環境でも役割を取り違えない。
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--current {
  padding: 10px 16px 11px;
  border-radius: 8px;
  border: 1px solid #00337a;
  background: linear-gradient(180deg, #1a63c4 0%, #00419b 100%);
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(0, 45, 110, .26);
}

/* ▼は疑似要素で作る（全称リセットの width:auto を受けないため）。
   刺さる余白が要るので、親の mb--2 を外さないこと */
#wrapper #contents #main-column #main-category .c-specSwitch__item--current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -8px;
  border-top: 8px solid #00419b;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__head {
  margin-bottom: 4px;
}

/* 紺地の上なので、バッジは白でも紺でもなく山吹を置く（地と喧嘩しない） */
#wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__badge {
  padding: 4px 10px;
  background-color: #ffc84d;
  color: #3a2600;
  font-size: 11px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__name {
  font-size: 19px;
}

#wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__desc {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
  color: rgba(255, 255, 255, .93);
  font-size: 11.5px;
}

/* 「札」。角丸を浅くし、枠も矢印も付けない＝押せるものに見えない */
#wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__go {
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   5. 補足の一文（切り替えの下に置く注意書き）

   装飾は付けない（背景・枠線・色替え・太字なし）。素のテキストで置く。
   ※ .ft--* ユーティリティは px ではなく rem（.ft--11 = 1.1rem = 17.6px）で、
     ここで欲しい 11px に該当するものが無いため、font-size だけ直接指定する。
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .c-specSwitch__note {
  font-size: 11px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   6. スマホ（2カラムのまま詰める）
   説明文は幅が足りず折り返しだらけになるため落とす。
   仕様名と「いま見ているページ」だけ残せば役目は果たす。
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  #wrapper #contents #main-column #main-category .c-specSwitch {
    gap: 8px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item {
    padding: 11px 8px 10px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__head {
    display: block;
    margin-bottom: 7px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__badge {
    margin-bottom: 5px;
    padding: 3px 7px;
    font-size: 10px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__name {
    display: block;
    font-size: 15px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__desc {
    display: none;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__go {
    padding: 4px 10px;
    font-size: 10px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link .c-specSwitch__go::after {
    margin-left: 6px;
  }

  /* __desc は幅不足で非表示になるが、__kw（短い数値）は残して見せる */
  #wrapper #contents #main-column #main-category .c-specSwitch__kw {
    font-size: 16px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__kw {
    font-size: 12px;
  }

  /* --gold の文字サイズ（SP）。PC 側の 3.6 と同じ詳細度で上書きする */
  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__badge {
    margin-bottom: 5px;
    padding: 3px 8px;
    font-size: 11px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold .c-specSwitch__name {
    font-size: 16px;
  }

  /* 主役側（SP）。横2枚のままなので、伸び率は PC より控えめにする */
  #wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--primary {
    flex: 1.15 1 0;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary {
    padding: 10px 8px 9px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__head {
    margin-bottom: 5px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__badge {
    padding: 4px 9px;
    font-size: 12px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__name {
    font-size: 17px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__kw {
    margin-bottom: 5px;
    font-size: 13px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--gold.c-specSwitch__item--primary .c-specSwitch__go {
    padding: 5px 12px;
    font-size: 11px;
  }

  /* 脇役側（SP）。__desc は SP で非表示なので、板の指定は効かない */
  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub {
    padding: 8px 6px 10px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__head {
    margin-bottom: 6px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__badge {
    margin-bottom: 5px;
    padding: 3px 7px;
    font-size: 10px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__name {
    font-size: 13px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__kw {
    margin-bottom: 5px;
    font-size: 11px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--link.c-specSwitch__item--sub .c-specSwitch__go {
    padding: 4px 10px;
    font-size: 10px;
  }

  /* 現在地（SP） */
  #wrapper #contents #main-column #main-category .c-specSwitch__item.c-specSwitch__item--current {
    padding: 9px 6px 10px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__badge {
    margin-bottom: 5px;
    padding: 3px 8px;
    font-size: 10px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__name {
    font-size: 15px;
  }

  #wrapper #contents #main-column #main-category .c-specSwitch__item--current .c-specSwitch__go {
    padding: 3px 9px;
    font-size: 9.5px;
  }
}