/*
Theme Name: X-T9 Child (WiFiストア)
Template: x-t9
Description: WiFiストア リニューアル用 X-T9 子テーマ。商品マスタ（プロバイダ）と共通部品を実装する。
Version: 0.4.0
*/

/* ===== デザイントークン（Figma 20260714修正版より） ===== */
:root {
	--wf-purple: #5534E7;   /* メイン（--main_p） */
	--wf-pink:   #FF1AB3;   /* アクセント・金額強調 */
	--wf-text:   #27273A;   /* 基本文字 */
	--wf-gray:   #686A88;   /* 補足文字 */
	--wf-star:   #F7FF16;   /* 星 */
	--wf-line:   #E5E5EF;   /* 罫線 */
}

/* ===== プロバイダカード（カード幅347・角丸10・白背景） ===== */
.wf-provider-list { display: grid; gap: 24px; justify-items: center; }
.wf-card { width: 100%; max-width: 347px; background: #fff; border-radius: 10px; padding: 20px 14px 20px; color: var(--wf-text); box-shadow: 0 1px 6px rgba(39,39,58,.08); }
.wf-card-logo { text-align: center; margin-bottom: 8px; }
.wf-card-logo img { max-width: 250px; height: auto; }

/* バッジ（左）＋レーダー（右） */
.wf-card-eval { display: flex; align-items: flex-start; gap: 8px; }
.wf-badges { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; padding-top: 28px; }
.wf-badge { display: inline-flex; justify-content: center; align-items: center; width: 127px; height: 30px; border-radius: 50px; color: #fff; font-size: 11px; font-weight: 700; }
.wf-badge-pink { background: var(--wf-pink); }
.wf-badge-purple { background: var(--wf-purple); }
.wf-stars { color: var(--wf-star); letter-spacing: 1px; }
.wf-card-radar { flex: 1; text-align: center; }
.wf-card-radar .wf-radar { width: 170px; height: auto; }

/* ポイント（ピンク枠・帯見出し） */
.wf-points { border: 2px solid var(--wf-pink); border-radius: 10px; overflow: hidden; margin: 14px 0 0; }
.wf-points-title { display: block; background: var(--wf-pink); color: #fff; font-weight: 700; font-size: 10px; text-align: center; padding: 4px 0; }
.wf-points ul { list-style: none; margin: 0; padding: 10px 10px 12px; }
.wf-points li { font-size: 12px; font-weight: 700; line-height: 20px; padding-left: 18px; position: relative; }
.wf-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--wf-pink); background:
	linear-gradient(#fff, #fff); }
.wf-points li::after { content: "✓"; position: absolute; left: 2.5px; top: 3px; font-size: 8px; line-height: 12px; color: var(--wf-pink); }
.wf-points li.wf-point-note { font-size: 10px; font-weight: 400; padding-left: 18px; line-height: 12px; margin-top: -2px; margin-bottom: 4px; }
.wf-points li.wf-point-note::before, .wf-points li.wf-point-note::after { content: none; }

/* 実質月額ハイライト＋料金内訳（1つの箱） */
.wf-price-box { border: 1px solid var(--wf-line); border-radius: 6px; overflow: hidden; margin: 14px 0 0; }
.wf-price-highlight { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; background: #F4F4F8; padding: 10px 14px 8px; }
.wf-price-label { font-size: 12px; font-weight: 700; grid-row: 1; }
.wf-price-value { grid-row: 1; text-align: right; color: var(--wf-pink); font-weight: 700; font-size: 30px; line-height: 1; }
.wf-price-value small { font-size: 20px; font-weight: 700; }
.wf-price-formula { grid-column: 1 / -1; text-align: center; color: var(--wf-gray); font-size: 12px; margin-top: 2px; }
.wf-price-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.wf-price-table th, .wf-price-table td { border-top: 1px solid var(--wf-line); padding: 9px 10px; text-align: left; vertical-align: middle; }
.wf-price-table th { width: 100px; font-weight: 700; color: var(--wf-text); }
.wf-price-table td { color: #000; }
.wf-val-pink { color: var(--wf-pink); font-weight: 700; }
.wf-cb-when { color: #000; font-weight: 500; margin-right: 2px; }

/* ボタン（紫枠・ピル・右シェブロン） */
.wf-cta { margin: 16px 0 0; }
.wf-cta a { position: relative; display: flex; justify-content: center; align-items: center; height: 50px; border: 2px solid var(--wf-purple); border-radius: 999px; color: var(--wf-purple); font-size: 16px; font-weight: 600; letter-spacing: .32px; text-decoration: none; }
.wf-cta-arrow { position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--wf-purple); border-right: 2px solid var(--wf-purple); transform: translateY(-50%) rotate(45deg); }

/* 人気トップ3（3カード横並び） */
.wf-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 347px; margin: 0 auto; }
.wf-top3-card { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border: 2px solid var(--wf-purple); border-radius: 8px; padding: 10px 6px; text-decoration: none; color: var(--wf-text); text-align: center; font-size: 10px; }
.wf-top3-card.is-first { border-color: var(--wf-pink); }
.wf-top3-badge { background: var(--wf-pink); color: #fff; border-radius: 999px; font-size: 9px; font-weight: 700; padding: 2px 6px; }
.wf-top3-logo { max-width: 90px; height: auto; }
.wf-top3-price { font-weight: 700; font-size: 12px; }
.wf-top3-price small { font-size: 9px; font-weight: 400; }
.wf-top3-first { color: var(--wf-pink); font-weight: 700; }
.wf-top3-note { line-height: 1.3; }

/* 絞り込みタブ（角丸アウトラインボタン） */
.wf-type-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.wf-type-tab { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 2px solid var(--wf-purple); border-radius: 8px; color: var(--wf-purple); font-size: 14px; font-weight: 700; text-decoration: none; background: #fff; }
.wf-type-tab.is-active { background: var(--wf-purple); color: #fff; }

/* ===== まとめ比較表 ===== */
.wf-compare-wrap { overflow-x: auto; }
.wf-compare { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--wf-text); }
.wf-compare th, .wf-compare td { border: 1px solid var(--wf-line); padding: 6px 8px; text-align: center; }
.wf-compare thead th { background: #F4F4F8; font-weight: 700; }
.wf-compare-name { text-align: left; }
.wf-compare-name a { color: var(--wf-purple); }
.wf-compare-operator { display: block; font-size: 10px; color: var(--wf-gray); }
.wf-compare-rank { font-weight: 700; }
.wf-rank-1 { color: #E8A800; }
.wf-rank-2 { color: #8C8C9E; }
.wf-rank-3 { color: #B0713B; }

/* ===== 新着記事（旧サーバー記事のフィード／手動指定） ===== */
.wf-news { display: grid; gap: 12px; max-width: 347px; margin: 0 auto; }
.wf-news-item { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--wf-text); }
.wf-news-thumb { flex: 0 0 auto; width: 96px; height: 64px; border-radius: 6px; overflow: hidden; background: #F4F4F8; display: block; }
.wf-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-news-thumb-empty { border: 1px solid var(--wf-line); }
.wf-news-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wf-news-date { font-size: 10px; color: var(--wf-gray); }
.wf-news-title { font-size: 13px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== ページャー ===== */
.wf-pagination ul { display: flex; gap: 6px; justify-content: center; list-style: none; padding: 0; margin: 16px 0; }
.wf-pagination a, .wf-pagination span { display: inline-block; min-width: 34px; padding: 6px 8px; text-align: center; border: 1px solid var(--wf-line); border-radius: 6px; text-decoration: none; color: var(--wf-text); }
.wf-pagination .current { background: var(--wf-purple); color: #fff; border-color: var(--wf-purple); }

/* ===== デザインQA調整 2026/8/10（Figma突き合わせ） ===== */

/* --- 人気トップ3: 白カード＋影（Figmaは枠線なし）・バッジ紫地黄文字 --- */
.wf-top3-card,
.wf-top3-card.is-first { border: none; box-shadow: 0 2px 8px rgba(39,39,58,.18); border-radius: 10px; padding: 14px 8px; gap: 6px; }
.wf-top3-badge { background: var(--wf-purple); color: #F5D323; border-radius: 4px; font-size: 10px; padding: 3px 8px; line-height: 1.3; }
.wf-top3-price { font-size: 11px; }
.wf-top3-price b { color: var(--wf-purple); font-size: 17px; font-weight: 700; }
.wf-top3-first { font-size: 11px; }
.wf-top3-first b { font-size: 16px; }
.wf-top3-note { color: var(--wf-pink); font-weight: 700; font-size: 10px; }
.wf-top3-cta { display: flex; justify-content: center; align-items: center; width: 100%; height: 30px; margin-top: auto; border: 1.5px solid var(--wf-purple); border-radius: 999px; color: var(--wf-purple); font-size: 11px; font-weight: 700; }

/* --- まとめ表: 薄紫ヘッダー・紫外枠・メダル（Figma準拠） --- */
.wf-compare { border: 2px solid var(--wf-purple); font-size: 12px; }
.wf-compare th, .wf-compare td { border: 1px solid #A49DCA; }
.wf-compare thead th { background: #CEC4FA; font-weight: 700; color: var(--wf-text); }
.wf-compare-name a { color: var(--wf-text); font-weight: 700; text-decoration: none; }
.wf-compare-name { font-weight: 700; }
.wf-compare td { font-weight: 700; }
.wf-compare-rank.wf-rank-1, .wf-compare-rank.wf-rank-2, .wf-compare-rank.wf-rank-3 { background: #fcd1ee; color: var(--wf-pink); }
.wf-rank-none { font-weight: 400; }

/* --- 新着記事: 横スクロールカルーセル（Figma準拠） --- */
.wf-news { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; max-width: none; padding: 4px 4px 56px; -webkit-overflow-scrolling: touch; }
.wf-news .wf-news-item { flex: 0 0 220px; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.wf-news .wf-news-thumb { width: 100%; height: 130px; border-radius: 8px; box-shadow: 0 1px 4px rgba(39,39,58,.15); }
.wf-news .wf-news-title { font-size: 13px; -webkit-line-clamp: 2; min-height: 3.2em; }

/* --- カテゴリから選ぶ: ミニTOP3リスト --- */
.wf-mini-top3 { list-style: none; margin: 0; padding: 0; text-align: left; }
.wf-mini-top3 li { border-top: 1px solid var(--wf-line); padding: 8px 2px; }
.wf-mini-top3 li:last-child { border-bottom: 1px solid var(--wf-line); }
.wf-mini-top3 .wf-mini-name { display: block; font-weight: 700; font-size: 13px; color: var(--wf-text); }
.wf-mini-top3 .wf-mini-price { display: block; font-size: 11px; color: var(--wf-gray); }
.wf-mini-top3 .wf-mini-badge { display: inline-block; background: var(--wf-purple); color: #F5D323; font-size: 9px; font-weight: 700; border-radius: 3px; padding: 1px 5px; margin-right: 4px; vertical-align: 1px; }

/* ===== 検収指摘11: 商材カードの商材名・総合評価の点数（2026-08-25） =====
   ロゴだけでは同一社の複数商材（GMOの光回線／ポケット型WiFi／ホームルーター等）を
   見分けにくいというご指摘への対応。ロゴの下に商材名、星バッジの下に点数を出す。 */
.wf-card-name {
	margin: 8px 0 0;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wf-text);
}
.wf-rating-num {
	display: block;
	width: 127px;          /* バッジと同じ幅にして中央を揃える */
	margin: 4px 0 0;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wf-purple);
}
.wf-rating-max {
	font-size: 10px;
	font-weight: 500; /* H-3: 満点の併記は点数より控えめに（2026-08-31） */
}

/* ===== 検収指摘12: 記事本文の左右余白（PC）（2026-08-25） =====
   PCは .wp-site-blocks を 520px に絞って「SP幅のカラムを中央に置く」作りだが、
   本文の内側幅は --wp--custom--width--content = min( 1100px, 90vw ) と
   ビューポート基準のため、520px のカラムでは 1100px > 520px で頭打ちにならず、
   SPでは付いていた左右 18.75px（375px の 90%）の余白がPCだけ 0 になっていた。
   カラム幅を基準に、SPと同じだけの余白（左右19px）を確保する。
   ※記事上部の見出し・アイキャッチ（.alignfull のテンプレートパーツ）は
     SPと同じくカラム幅いっぱいのままにするため除外する。 */
@media (min-width: 600px) {
	body.single .wp-site-blocks > main > :not(.alignfull) {
		max-width: calc(100% - 38px);
	}
}

/* ===== 検収指摘16: PC左サイドメニューの固定リンク（2026-08-25） =====
   総合TOP・トライネット・限定プランを、カテゴリ一覧とは別のリストにまとめた
   （inc/pc-side-menu.php）。1件目（総合TOP）は従来どおりパネル上端の余白
   （padding-top:45px）の直後に置きたいので、カテゴリ一覧側の
   .wf-pc-side__list li:first-child{margin-top:21px} を打ち消す。 */
@media (min-width: 1240px) {
	.wf-pc-side .wf-pc-side__list--fixed li:first-child { margin-top: 0; }
}

/* ===== 検収指摘15: パンくずリスト（2026-08-25） =====
   inc/breadcrumb.php が全ページに自動生成する（総合TOPと診断LPを除く）。
   帯の見た目の正本は追加CSS（body.page .wf-breadcrumb-note …）側にあるので、
   ここでは追加CSSが効かない記事（body.single）と、
   本文の外＝main直下に出る場合（記事・トライネット等の固定ページ）だけを補う。 */
.wf-breadcrumb-note > p {
	margin-left: auto;
	margin-right: auto;
	white-space: nowrap;   /* 記事はタイトルが長いので1行に収め、溢れた分は … で省略する */
	overflow: hidden;
	text-overflow: ellipsis;
}
body:not(.page) .wf-breadcrumb-note {
	/* 記事本文用のCSS（SWELL互換）がグループの余白を 1.5em にするため上書きする */
	padding: 4px 0 !important;
	font-size: 11px;
	line-height: 12px;
}
body:not(.page) .wf-breadcrumb-note > p {
	max-width: 355px;
	margin: 0 auto !important;
	padding: 0 !important;
	line-height: 12px;
}
body:not(.page) .wf-breadcrumb-note a { font-size: 11px; }
/* PC幅では、固定ページの本文内に出るときと同じく帯の幅いっぱいに寄せる
   （追加CSSの 355px 指定はSP幅向けで、PCでは本文内のみ none に戻されている） */
@media (min-width: 600px) {
	body.page main > .wf-breadcrumb-note > p,
	body:not(.page) main > .wf-breadcrumb-note > p { max-width: none !important; }
}

/* ===== 検収チェックNo.65/69: 記事カテゴリ一覧のPCレイアウト（2026-08-31） =====
   アーカイブテンプレートの main-layout 2カラム（本文＋サイドバー）が、PCの520px固定ボディ内で
   横並びになり本文列が約236pxに圧縮され、ページネーションが多段に崩れていた。
   このサイトのPC表示はSP幅を中央に置く設計のため、アーカイブのカラムは常に縦積みにする。
   （使用箇所は /category/ 配下のアーカイブのみ。TOP・カテゴリLP・記事・検索には無いことを確認済み） */
.wp-block-columns.is-style-main-layout { flex-wrap: wrap !important; }
.wp-block-columns.is-style-main-layout > .wp-block-column { flex-basis: 100% !important; flex-grow: 1; }

/* ===== 検収チェックNo.46: 記事の大アイコン付きボックスの余白（2026-08-31 / no46-bigicon） =====
   本番SWELLの実測 margin 40px(上)/32px(下) を再現。0のままだと上に張り出すアイコンが
   直前の要素（ラベル段落など）に重なる。記事ページ限定（限定プラン等の固定ページは既対応・対象外） */
body.single .post_content [class*="is-style-big_icon_"] {
	margin-top: 40px;
	margin-bottom: 32px;
}