@charset "UTF-8";

/* =========================================================
   kakagood 新デザイン用 追加スタイル（開発用）
   - 本番化時は kakagood.css へ統合予定
   - 画像/アイコンは img1.kakaku.k-img.com（本番）参照
   ========================================================= */

/* ---------------------------------------------------------
   PC系カルーセル：横スワイプ無効化（カードが縦に長くなったため）
   ・横スクロール/スナップをやめ、折り返し（wrap）で縦積みに
   ・スマホ：1枚幅なので1列縦積み／PC（768px〜）：50%幅なので2枚並び＋折り返し
   ・PC以外の商材は従来どおり横スワイプ可（このクラスを付けない）
   --------------------------------------------------------- */
.carousel-no-swipe {
  flex-wrap: wrap;
  overflow-x: hidden;
  scroll-snap-type: none;
  justify-content: center;
}

/* 商品名のフォントサイズ 18px → 20px */
.product-title-text {
  font-size: 20px;
}

/* 一覧リンクボタンの下に余白を追加（次の小見出しとの間を空ける／h2との間は空けない） */
.more-btn {
  margin-bottom: 30px;
  /* 17px @375px → 4.53vw。375px以上は17px固定（現状維持）、狭幅(320px等)で相対縮小 */
  font-size: clamp(13px, 4.53vw, 17px);
}

/* ノートPC（note-pc / gaming-note）の一覧周りを整理：
   ＼ここに注目／（attention-catch）と bottom-tags をトルツメ（非表示）。
   デスクトップPC(desktop-pc)・他商材は対象外。 */
.bottom-section:has(a.more-btn[href*="/pc/note-pc/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/pc/note-pc/"]) .bottom-tags,
.bottom-section:has(a.more-btn[href*="/pc/gaming-note/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/pc/gaming-note/"]) .bottom-tags,
.bottom-section:has(a.more-btn[href*="/pc/desktop-pc/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/pc/desktop-pc/"]) .bottom-tags,
.bottom-section:has(a.more-btn[href*="/pc/lcd-monitor/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/pc/lcd-monitor/"]) .bottom-tags {
  display: none;
}

/* 新デザイン適用カテゴリ（光回線/SIM/ウォーターサーバー/クレカ）の一覧周りもスリム化：
   ＼ここに注目／（attention-catch）と bottom-tags をトルツメ（非表示）。bottom-desc は据え置き。
   ※保険（hoken pet/travel）は対象外。 */
.bottom-section:has(a.more-btn[href*="/bb/ranking/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/bb/ranking/"]) .bottom-tags,
.bottom-section:has(a.more-btn[href*="/mobile_data/sim/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/mobile_data/sim/"]) .bottom-tags,
.bottom-section:has(a.more-btn[href*="/waterserver/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/waterserver/"]) .bottom-tags,
.bottom-section:has(a.more-btn[href*="/card/ranking/"]) .attention-catch,
.bottom-section:has(a.more-btn[href*="/card/ranking/"]) .bottom-tags {
  display: none;
}

/* bottom-desc は .tag のエンジ色に（PC系＋新デザイン適用カテゴリで統一） */
.bottom-section:has(a.more-btn[href*="/pc/note-pc/"]) .bottom-desc,
.bottom-section:has(a.more-btn[href*="/pc/gaming-note/"]) .bottom-desc,
.bottom-section:has(a.more-btn[href*="/pc/desktop-pc/"]) .bottom-desc,
.bottom-section:has(a.more-btn[href*="/pc/lcd-monitor/"]) .bottom-desc,
.bottom-section:has(a.more-btn[href*="/bb/ranking/"]) .bottom-desc,
.bottom-section:has(a.more-btn[href*="/mobile_data/sim/"]) .bottom-desc,
.bottom-section:has(a.more-btn[href*="/waterserver/"]) .bottom-desc,
.bottom-section:has(a.more-btn[href*="/card/ranking/"]) .bottom-desc {
  color: #d44242;
}
/* bottom-desc（＼…／の訴求文）を画面幅に追従させ、狭幅でも1行に収める。
   bottom-section は全幅なので vw 基準。最長文言（クレカ「＼お得な…カードは他にも！／」約23字）が
   320pxでも1行に収まる係数に設定。上限16px。nowrap は付けず、十分縮めることで自然に1行化（溢れ防止）。 */
.bottom-desc {
  font-size: clamp(11px, 3.9vw, 16px);
}
/* スマホ（〜767px）のみ：横スワイプ無効のPCカルーセルは単体・複数いずれも全幅で縦積みに統一
   （本番CSSの only-child ルール＝最大500px を上書きするため十分な詳細度で指定）
   PC（768px〜）は本番既定のまま＝複数は2枚横並び(calc(50% - 5px))／単体は max-width:400px */
@media (max-width: 767px) {
  .carousel-no-swipe:not(:has(.carousel-slide:only-child)) > .carousel-slide,
  .carousel-no-swipe:has(.carousel-slide:only-child) > .carousel-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* PC（768px〜）：同じ切り口で2枚横並びになるカルーセル（AIノート等）の
   カード間スペースを、違う切り口（別h3セクション横並び）と同じ約30pxに合わせる。
   カルーセル左右padding(10px)で外端も別セクションと揃う。 */
@media (min-width: 768px) {
  .carousel-no-swipe:not(:has(.carousel-slide:only-child)) {
    gap: 30px;
  }
  .carousel-no-swipe:not(:has(.carousel-slide:only-child)) > .carousel-slide {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

/* ---------------------------------------------------------
   スペック表記（2×2カラーボックス型）
   対象（プロトタイプ）：軽量モバイルPC ThinkPad K0001723336
   --------------------------------------------------------- */
.card-top-row:has(.spec-grid) {
  position: relative;
  min-height: 140px; /* スペックが画像より高い端末でも下段に被らないよう確保 */
  margin-bottom: 4px; /* 画像/スペックと価格の間を詰める */
}
/* 価格エリア上端の余白も詰める */
.card-top-row:has(.spec-grid) + .card-bottom-row {
  padding-top: 0;
}

.spec-grid {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(55% - 5px);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-content: start;
}

.spec-box {
  container-type: inline-size; /* 各ボックスを基準にして中の文字を cqi で追従させる */
  min-width: 0;
  padding: 5px 6px 6px;
  background: #fff;
  border: 3px solid #ccc;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.spec-box-label {
  text-align: center;
  font-size: clamp(8px, 15cqi, 13px);
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;            /* はみ出しは隠す（JSでフォント縮小して収める） */
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #ccc;
}

.spec-box-value {
  flex: 1 1 auto;            /* ラベルの下の残り領域を占有 */
  display: flex;
  align-items: center;       /* 値を上下センタリング（長文で縮小しても浮かない） */
  justify-content: center;
  text-align: center;
  font-size: clamp(9px, 17cqi, 15px);
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}

.spec-box-vinner {
  display: inline-block;
  white-space: nowrap;
}

.spec-box-num {
  font-size: 1.73em; /* 値(単位)に連動。JSで親(.spec-box-value)を縮小すると数値も追従 */
  margin-right: 1px;
}

.spec-box-screen  { border-color: #E6622C; }
.spec-box-screen  .spec-box-label { color: #E6622C; border-bottom-color: #E6622C; }
.spec-box-screen  .spec-box-value { color: #E6622C; }
.spec-box-memory  { border-color: #2893B3; }
.spec-box-memory  .spec-box-label { color: #2893B3; border-bottom-color: #2893B3; }
.spec-box-memory  .spec-box-value { color: #2893B3; }
.spec-box-storage { border-color: #68A460; }
.spec-box-storage .spec-box-label { color: #68A460; border-bottom-color: #68A460; }
.spec-box-storage .spec-box-value { color: #68A460; }
.spec-box-weight  { border-color: #C59418; }
.spec-box-weight  .spec-box-label { color: #C59418; border-bottom-color: #C59418; }
.spec-box-weight  .spec-box-value { color: #C59418; }

/* ---------------------------------------------------------
   見出し：指定スペック◯製品中 売れ筋人気◯位！
   --------------------------------------------------------- */
.rank-headline {
  margin: 32px 4px 8px;       /* 上はリボン分を空ける */
  text-align: center;
  color: #e60012;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.3;
}
.rank-headline::after {
  content: "";
  display: block;
  margin-top: -5px;           /* 文字と下線の間隔（マイナスで食い込ませる） */
  border-top: 2px solid #e60012;
}
.rank-headline-inner {
  display: inline-block;
  white-space: nowrap;
}
.rank-headline-num {
  font-size: 2em;
  margin: 0 1px;
}
/* 見出しの直後は card-top-row の上余白（リボン用32px）を詰める */
.rank-headline + .card-top-row {
  margin-top: 8px;
}

/* リボンと「◯商品中◯位！」見出しの間隔をカード間で統一する。
   旧実装＝absolute リボン＋固定 margin-top:32px では、狭幅でリボン文字が2行に折り返すと
   見出しがリボンに隠れ（重なり）、1行カードでも隙間がまちまちになっていた。
   → 新デザインカード（rank-headlineあり）はリボンを通常フローに置き、見出しがリボン実高に
     自動追従するようにして、リボンが1行でも2行でも常に一定の小さい間隔にする。 */
/* リボン文字を cqi（カード幅基準）で相対縮小させ、長文でも1行に収めるため
   カードをコンテナ化する。 */
.product-card:has(.rank-headline),
.provider-card {
  container-type: inline-size;
}
.product-card:has(.rank-headline) .ribbon {
  position: static;
  margin: -8px -8px 0;     /* カードの padding(8px) を相殺し、上・左右をカード端に密着 */
}
.product-card:has(.rank-headline) .ribbon-content {
  display: block;          /* ブロックにしてベースライン由来の上切れを回避 */
  width: fit-content;      /* タグ幅（内容幅）を維持 */
  max-width: 100%;
  padding-right: 28px;     /* 斜めカット分、文字右の余白を広げて窮屈さを解消（既定18px→28px） */
  white-space: nowrap;     /* 折り返さず1行（下のcqiで縮小して収める） */
  font-size: clamp(13px, 7cqi, 22px); /* カード幅に追従。上限22px（現状維持） */
}
.product-card:has(.rank-headline) .rank-headline {
  margin-top: 4px;         /* リボン直下の間隔（旧 32px の固定リザーブを置換・詰めた値） */
}
/* PC以外（provider系：光回線/SIM/保険/ウォーターサーバー/クレカ）のリボンも、
   文言右の余白を product カードと揃え、長文は cqi で相対縮小して1行に収める
   （リボンは絶対配置のまま）。 */
.provider-card .ribbon-content {
  padding-right: 28px;     /* 斜めカット分の右余白（既定18px→28px） */
  white-space: nowrap;     /* 折り返さず1行 */
  font-size: clamp(13px, 7cqi, 22px); /* カード幅に追従。上限22px（現状維持） */
}

/* ---------------------------------------------------------
   価格 ＋ タグ を左右に配置（価格は桁増でも自動縮小）
   --------------------------------------------------------- */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
.price-row .price-info {
  flex: 1 1 auto;
  min-width: 0;
}
.price-row .tags-area {
  flex: 0 0 auto;            /* タグは縮めない */
  margin-bottom: 8px;        /* 価格(68px)の行ボックス下余白ぶん沈むので底上げして数字に揃える */
}
.price-row .price-value-wrapper {
  align-self: flex-start;    /* 内容幅にフィット（JSが offsetWidth で計測） */
  font-size: 68px;           /* 基準サイズ。桁あふれ時に本JSで縮小 */
}
.price-row .price-value { font-size: 1em; }
.price-row .price-yen { font-size: 0.34em; }

/* ---------------------------------------------------------
   ユーザーレビュー「ここがグッド」レイアウト
   対象（プロトタイプ）：軽量モバイルPC ThinkPad K0001723336
   --------------------------------------------------------- */
.goodpoint-section {
  margin-top: 5px;
  margin-bottom: 6px;
  background: #fff;
  position: relative;
  z-index: 1; /* card-link-overlay(z-index:5)より下げ、レビュー部分のクリックも商品リンクへ透過させる */
}

/* 新デザインカードはレビュー部分も含めカード全体をクリッカブルにする
   （旧デザインカードの bottom:100px はそのまま＝レビュー全文表示を維持） */
.product-card:has(.goodpoint-section) .card-link-overlay,
.provider-card:has(.goodpoint-section) .card-link-overlay {
  bottom: 0;
}

.goodpoint-header {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.goodpoint-badge {
  flex-shrink: 0;
  display: block;
  width: 48px;
  height: auto;
}

.goodpoint-title {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;       /* nowrap の子で列幅がつっぱらないようにし、JS自動縮小の計測幅を有効化 */
  line-height: 1.3;
  container-type: inline-size; /* タイトル列を基準にして main を cqi で追従（2枚並び等でも1行化） */
}

.goodpoint-title-sub {
  /* main と同じくタイトル列幅(cqi)基準で追従。上限16px（現状維持）、狭い列で縮小して1行に収める。
     ※sub は最長で全角約16〜17字（例「クレカ専門家 菊地崇仁さんが考える」）。係数は全幅で収まるよう調整 */
  font-size: clamp(11px, 5.6cqi, 16px);
  font-weight: bold;
  color: #16228E;
  line-height: 1.7;
}

.goodpoint-title-main {
  /* タイトル列幅(cqi)基準で追従。上限22px（現状維持）、狭い列ほど縮小して全カテゴリで1行に収める。
     ※全角約12文字（例「このカードのここがグッド」）が収まるよう係数を調整。vwと違い2枚並びでも有効 */
  font-size: clamp(15px, 7.6cqi, 22px);
  font-weight: bold;
  color: #16228E;
  line-height: 1;
}

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

.goodpoint-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}

.goodpoint-face {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #eee;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ▼ レビューのバリエーション切替 ▼
   ・デフォルト（ユーザーレビュー版）：顔は .goodpoint-face1/2/3 の個別アイコン
   ・編集長版：.goodpoint-section に .goodpoint-editor を付与すると顔を編集長に統一
   ・サブタイトル／本文テキストは HTML 側に直書きで切替
   ・他バリエーションを追加する場合は .goodpoint-xxxx を足し、ここに顔アイコンのみ定義 */
.goodpoint-face1 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/sister2.gif'); }
.goodpoint-face2 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/mam41.gif'); }
.goodpoint-face3 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/dad11.gif'); }

/* ユーザーレビュー版の顔セット（カードに goodpoint-set1/2/3 を付けて切替）。
   未指定カードは上記デフォルト（sister2/mam41/dad11）。 */
.goodpoint-set1 .goodpoint-face1 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/sister1.gif'); }
.goodpoint-set1 .goodpoint-face2 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/mam32.gif'); }
.goodpoint-set1 .goodpoint-face3 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/dad22.gif'); }

.goodpoint-set2 .goodpoint-face1 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/boy1.gif'); }
.goodpoint-set2 .goodpoint-face2 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/mam51.gif'); }
.goodpoint-set2 .goodpoint-face3 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/dad51.gif'); }

.goodpoint-set3 .goodpoint-face1 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/sister2.gif'); }
.goodpoint-set3 .goodpoint-face2 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/granpapa11.gif'); }
.goodpoint-set3 .goodpoint-face3 { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/mam41.gif'); }

/* 編集長版：顔アイコンを編集長に統一 */
.goodpoint-editor .goodpoint-face {
  background-image: url('https://img1.kakaku.k-img.com/images/kakagood/icon_editor.png');
}
/* マガジン編集部版（編集長版の派生）：顔アイコンをライターアイコンに差し替え。
   .goodpoint-editor .goodpoint-face と同詳細度のため、ソース順で後勝ちさせる */
.goodpoint-maga .goodpoint-face {
  background-image: url('https://img1.kakaku.k-img.com/images/maga/writer/icon_52.jpg');
}
/* クレカ評論家版（編集長版の派生）：既存の評論家アイコンを data-review-type で差し替え。
   属性セレクタ併用で .goodpoint-editor .goodpoint-face（0,2,0）より高詳細度（0,3,0） */
.goodpoint-section[data-review-type="editor4"] .goodpoint-face {
  background-image: url('https://img1.kakaku.k-img.com/images/card/ranking/photo_iwataakio.png');
}
.goodpoint-section[data-review-type="editor3"] .goodpoint-face {
  background-image: url('https://img1.kakaku.k-img.com/images/card/ranking/photo_kikuchitakahito.png');
}
/* 編集長版：AI生成の注記は不要なので非表示（注記HTMLは残しクラスで切替） */
.goodpoint-editor .goodpoint-note {
  display: none;
}

.goodpoint-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 0.8;
  color: #333;
  overflow: hidden;
  background-image: repeating-linear-gradient(to right, #FFCB18 0, #FFCB18 7px, transparent 7px, transparent 11px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 3px;
}

.goodpoint-text-inner {
  display: inline-block;
  white-space: nowrap;
}

/* ▼ 編集長版の本文：顔アイコン1つ＋文章流し込み ▼
   ・1文ずつではなく1本の文章を流し込む。
   ・高さはユーザーレビュー版（顔3行＋AI注記）の高さに JS で合わせ、
     その枠内で溢れない最大フォントサイズに調整（行数は可変＝4・5行でも可）。
     ※編集長版は注記を非表示にするぶん、注記の高さも本文に充てられる。
   ・各行の下に黄色点線（行高に追従して可変行数に対応。背面に敷く）。 */
.goodpoint-editor .goodpoint-item {
  align-items: flex-start;
}
.goodpoint-editor .goodpoint-face {
  margin-top: 1px;
}
.goodpoint-para {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 1.7;
  height: 135px;            /* JSでユーザーレビュー版（リスト＋注記）の高さに上書き。未適用時のフォールバック */
  overflow: hidden;
}
/* 各行の下に黄色点線（行数可変・行高に追従）。本文の背面に敷く */
.goodpoint-para::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.7em - 2px),
    #FFCB18 calc(1.7em - 2px),
    #FFCB18 1.7em
  );
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0, #000 7px, transparent 7px, transparent 11px);
          mask-image: repeating-linear-gradient(to right, #000 0, #000 7px, transparent 7px, transparent 11px);
}

.goodpoint-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #555;
}

/* 商品の詳細を見る ボタン */
.detail-button {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;      /* 縦を 14px→10px に薄く（横は維持） */
  border-radius: 999px;
  background: #e60012;
  color: #fff;
  /* 20px @375px → 5.33vw。上限20px（現状以上にはしない）、狭幅で相対縮小 */
  font-size: clamp(16px, 5.33vw, 20px);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 0 #b3000e;
}

@media (hover: hover) and (pointer: fine) {
  .detail-button:hover {
    background: #c8000f;
  }
}

/* PC版でカードを横並びにした際、注記の有無などで高さが変わっても
   「商品の詳細を見る」ボタンをカード下端に揃えてガタつきを防ぐ。
   SP版は縦積みで余白が出ないため影響なし。 */
@media (min-width: 768px) {
  .product-card:has(.goodpoint-section) .card-bottom-row {
    flex: 1 1 auto;
  }
  .product-card:has(.goodpoint-section) .detail-button {
    margin-top: auto;
  }
}

/* =========================================================
   光回線カルーセル 新デザイン（.hikari-new）
   対象（プロトタイプ）：戸建て用 BIGLOBE光
   ========================================================= */
.hikari-new {
  display: flex;
  flex-direction: column;
}

/* ヘッダー：ロゴ ＋ プラン名/スペック概要 */
.hikari-new .hikari-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 40px;
  margin-bottom: 12px;
}
.hikari-new .hikari-logo {
  flex: 0 0 96px;
  max-width: 96px;
}
.hikari-new .hikari-logo .provider-logo-img {
  display: block;
  width: 100%;
  height: auto;
}
.hikari-new .hikari-header-body {
  flex: 1 1 auto;
  min-width: 0;
}
.hikari-new .hikari-plan-name {
  font-size: 20px;
  font-weight: bold;
  color: #16228E;
  line-height: 1.35;
}
.hikari-new .hikari-plan-spec {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}

/* 訴求見出し（特典）— ここがグッド見出しを流用しつつ余白だけ調整 */
.hikari-new .hikari-goodhead {
  margin-bottom: 8px;
}
/* 「公式特典＋…」は改行させず、幅に応じて JS で文字サイズ自動縮小 */
.hikari-new .hikari-goodhead .goodpoint-title-main {
  white-space: nowrap;
  overflow: hidden;
}

/* 比較テーブル */
.hikari-new .hikari-compare {
  margin: 10px 0;
  border: 1px solid #d3d3d3;
}
.hikari-new .hikari-compare--total {
  margin-bottom: 0;
}
.hikari-new .hikari-compare-head {
  padding: 6px 10px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}
.hikari-new .hcompare-head-sm {
  font-size: 14px;
}
.hikari-new .hikari-compare--total .hikari-compare-head {
  background: #29A2C6;
}
.hikari-new .hikari-compare--monthly .hikari-compare-head {
  background: #FF6D31;
}
.hikari-new .hikari-compare-body {
  display: flex;
  align-items: stretch;
}
.hikari-new .hikari-compare-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e3e3e3;
}
.hikari-new .hikari-compare-col:first-child {
  border-left: none;
}
.hikari-new .hcol-label {
  padding: 5px 4px;
  background: #f4f4f4;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.25;
  color: #555;
}
.hikari-new .hcol-value {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;        /* 金額と「円」を下揃え（列をまたいでも底が揃う） */
  justify-content: center;
  padding: 8px 4px;
  text-align: center;
  font-weight: bold;
  color: #2CA3C7;
  white-space: nowrap;
}
.hikari-new .hcol-num {
  font-size: 24px;
  letter-spacing: -1px;
}
.hikari-new .hcol-unit {
  font-size: 11px;
  margin-left: 5px;
}
/* 公式サイト・価格.com経由の金額色は各表のヘッダー色に合わせる（お得列は後段で赤に上書き） */
.hikari-new .hikari-compare--total .hcol-value {
  color: #29A2C6;
}
.hikari-new .hikari-compare--monthly .hcol-value {
  color: #FF6D31;
}
/* 「こんなにお得！」列を強調 */
.hikari-new .hikari-compare-col--highlight {
  flex: 1.25 1 0;
}
.hikari-new .hikari-compare-col--highlight .hcol-label {
  background: #f4f4f4;
  color: #333;
}
.hikari-new .hikari-compare-col--highlight .hcol-value {
  color: #e60012;
}
.hikari-new .hikari-compare-col--highlight .hcol-num {
  font-size: 40px;
  letter-spacing: -2px;
  position: relative;
  top: 2px;
}

/* 比較テーブル下の注記 */
.hikari-new .hikari-note {
  margin: 2px 0 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #555;
}

/* レビュー（ここがグッド）と詳細ボタンは PC カードと共通の goodpoint-* / detail-button を流用 */
.hikari-new .goodpoint-section {
  margin-top: 10px;
}

/* PC版でカード横並び時、詳細ボタンを下端に揃える（PCカードと同様） */
@media (min-width: 768px) {
  .provider-card:has(.goodpoint-section) {
    height: 100%;
  }
  .provider-card:has(.goodpoint-section) .detail-button {
    margin-top: auto;
  }
}

/* =========================================================
   モバイル用 スリム固定メニュー（スクロール連動の出し入れ＋スクロールスパイ）
   ・JS（kakagood_new.js）で .nav-menu-grid から動的生成し body 直下へ挿入。
   ・下スクロールで隠す／上スクロールで出す。現在地セクションを is-active で強調。
   ・PC版は別途「右サイド常時表示」を実装予定のため、ここでは非表示。
   ========================================================= */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  will-change: transform;
  display: flex;
  align-items: stretch;
}
.sticky-nav.is-visible {
  transform: translateY(0);
}
/* ロゴはスクロールせず常時表示（ロゴ右からスワイプ）。クリックでページ先頭へ戻る */
.sticky-nav-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: #fff;
  border-right: 1px solid #eee;
  cursor: pointer;
}
.sticky-nav-logo img {
  height: 34px;
  width: auto;
  display: block;
}
.sticky-nav-scroll {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sticky-nav-scroll::-webkit-scrollbar {
  display: none;
}
.sticky-nav-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 4px solid transparent;
  color: #333;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.sticky-nav-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  display: block;
}
/* 現在地は紺色のバー（下線） */
.sticky-nav-item.is-active {
  border-bottom-color: #16228E;
}
@media (min-width: 768px) {
  .sticky-nav {
    display: none;
  }
}

/* ---------------------------------------------------------
   狭幅スマホ（iPhone SE 第2世代＝320px 等）対応：見出し・推薦文を横幅相対で縮小
   - 基準は iPhone 標準幅 375px。375px 以上は現行サイズ（上限）に固定＝PC/タブレット/標準スマホは変化なし。
   - 375px 未満は vw に応じて相対縮小。下限を設けて小さくなりすぎを防止。
   - 本番 kakagood.css の固定px（section-h3:24px / recommend-text:20px）を後勝ちで上書き。
   --------------------------------------------------------- */
.section-h3 {
  /* 24px @375px → 6.4vw（下限20px・上限24px） */
  font-size: clamp(20px, 6.4vw, 24px);
}
.recommend-text {
  /* 20px @375px → 5.33vw（下限16px・上限20px） */
  font-size: clamp(16px, 5.33vw, 20px);
}

/* 光回線 比較テーブルの金額：狭幅で「円」がはみ出るため横幅相対に縮小（nowrap維持）。
   元定義（.hcol-num 24px／強調 .hcol-num 40px）を同詳細度・後勝ちで上書き。 */
.hikari-new .hcol-num {
  /* 通常列：24px @375px → 6.4vw（下限18px・上限24px） */
  font-size: clamp(18px, 6.4vw, 24px);
}
.hikari-new .hikari-compare-col--highlight .hcol-num {
  /* 強調列「こんなにお得！」：上限40px。狭幅ほど強く縮め、SE(320px)で収まるよう係数を調整 */
  font-size: clamp(28px, 9.6vw, 40px);
}

/* 比較テーブルのラベル「公式サイト／価格.com経由」＋「［契約期間なし］」を、
   <br>でのみ改行（各行は折り返さない）し、列幅(cqi)で縮小して「［契約期間なし］」を1行に収める。 */
.hikari-new .hikari-compare-col {
  container-type: inline-size;   /* ラベルを列幅基準で縮小するためのコンテナ */
}
.hikari-new .hcol-label {
  white-space: nowrap;           /* <br>でのみ改行・各行は折り返さない */
  font-size: clamp(8px, 10.5cqi, 14px); /* 列幅に追従。上限14px（現状維持） */
}