/**
 * 業種別ページ（wc_gyoshu）本文用ユーティリティCSS
 *
 * 配置先: /seo-best.jp/public_html/blog/wp-content/themes/seobest_new/assets/css/wc-gyoshu.css
 * （ファイル名は "wc-gyoshu.css" にする）
 *
 * 読み込み設定は functions.php 側にすでに追記済みです（既存の
 * wp_enqueue_scripts 内、basename($template) === 'single-wc_gyoshu.php'
 * の分岐で $css_directory . 'wc-gyoshu.css' を読み込むようになっています）。
 * このCSSファイルをアップロードするだけで自動的に読み込まれます。
 *
 * 使い方:
 * ブロックエディタの「カスタムHTML」ブロックに、下記クラスを使ったHTMLを
 * 直接貼り付けて本文を組み立てる（04_content-blocks-guide.md にひな形あり）。
 */

.wc-gyoshu-body { font-size: 16px; line-height: 1.95; color: #3C3D42; overflow-x: hidden; }
.wc-gyoshu-body .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.wc-gyoshu-body section { padding: clamp(44px,6vw,80px) 20px; }
.wc-gyoshu-body section.alt { background: #F2F4F6; }
.wc-gyoshu-body section.navy { background: #322D63; color: #fff; }

/* 見出し */
.wc-gyoshu-body h2.wc-h2 {
	margin: 0 0 4px; font-size: clamp(22px,3vw,30px); line-height: 1.5;
	font-weight: 700; color: #322D63; position: relative; padding-bottom: 16px;
}
.wc-gyoshu-body h2.wc-h2::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #C42A38;
}
.wc-gyoshu-body h3.wc-h3 { margin: 40px 0 6px; font-size: clamp(19px,2.2vw,24px); font-weight: 700; color: #322D63; line-height: 1.5; }
.wc-gyoshu-body h4.wc-h4 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #322D63; line-height: 1.6; }

/* 比較表・データ表（.tw でラップ → table.dt） */
.wc-gyoshu-body .tw { overflow-x: auto; border-radius: 10px; box-shadow: 8px 8px 30px rgba(0,0,0,.07); background: #fff; margin: 18px 0; }
.wc-gyoshu-body table.dt { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.8; }
.wc-gyoshu-body table.dt th, .wc-gyoshu-body table.dt td { padding: 14px 16px; text-align: left; vertical-align: top; border: 1px solid #DDE1E8; }
.wc-gyoshu-body table.dt thead th { background: #322D63; color: #fff; font-weight: 700; font-size: 14px; border-color: #322D63; letter-spacing: .02em; }
.wc-gyoshu-body table.dt tbody th { background: #F2F4F6; color: #322D63; font-weight: 700; white-space: nowrap; }
.wc-gyoshu-body table.dt tbody tr:nth-child(even) td { background: #F8F9FB; }
.wc-gyoshu-body table.dt td b, .wc-gyoshu-body table.dt th b { color: #C42A38; }

/* チェックリスト */
.wc-gyoshu-body ul.ck { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 10px; }
.wc-gyoshu-body ul.ck li { display: grid !important; grid-template-columns: 22px 1fr !important; gap: 12px; width: 100%; box-sizing: border-box; padding: 15px 18px; background: #fff; border: 1px solid #DDE1E8; border-radius: 10px; font-size: 15.5px; line-height: 1.8; }
.wc-gyoshu-body ul.ck li::before { content: "✓"; color: #C42A38; font-weight: 700; line-height: 1.8; }

/* 箇条書き（ドット） */
.wc-gyoshu-body ul.pl { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 9px; }
.wc-gyoshu-body ul.pl li { display: grid !important; grid-template-columns: 8px 1fr !important; gap: 12px; width: 100%; box-sizing: border-box; font-size: 15.5px; line-height: 1.85; }
.wc-gyoshu-body ul.pl li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #CAB053; margin-top: 13px; }

/* カードグリッド（課題・特徴など、列数はカード数に応じて自動折返し） */
.wc-gyoshu-body .wc-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; margin: 16px 0; align-items: stretch; }
.wc-gyoshu-body .wc-card { box-sizing: border-box; width: 100%; background: #fff; border-radius: 16px; box-shadow: 8px 8px 30px rgba(0,0,0,.07); padding: 26px 24px; }
.wc-gyoshu-body .wc-card .wc-tag { font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; color: #CAB053; }

/* 定義バナー（ネイビー背景） */
.wc-gyoshu-body .teigi { background: #322D63; color: #fff; padding: clamp(40px,6vw,70px) 0; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.wc-gyoshu-body .teigi .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.wc-gyoshu-body .teigi .wrap p.lead { font-size: clamp(17px,2vw,22px); line-height: 1.9; font-weight: 500; max-width: 900px; }
.wc-gyoshu-body .teigi .wrap p.sub { margin-top: 16px; font-size: 14.5px; color: #D8DBE8; max-width: 900px; }

/* 料金カード */
.wc-gyoshu-body .wc-plan-card { border-top: 3px solid #322D63; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 8px 8px 30px rgba(0,0,0,.07); padding: 22px; }
.wc-gyoshu-body .wc-plan-card.accent { border-top-color: #C42A38; }
.wc-gyoshu-body .wc-plan-card .wc-price { margin: 0 0 10px; font-family: Roboto, sans-serif; font-size: 15px; color: #757992; }

/* CTAボタン */
.wc-gyoshu-body .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: #D5202E; color: #fff; text-decoration: none; border-radius: 8px; padding: 16px 32px; font-size: 16px; font-weight: 700; box-shadow: 0 8px 22px rgba(213,32,46,.22); }

/* 加工事例・ギャラリー写真のサイズ固定
   ※テーマ側の img{height:auto !important} 等のレスポンシブ指定に負けないよう !important を付与
   object-fit:contain で画像全体を表示（はみ出た部分は切らず、余白は背景色で埋める） */
.wc-gyoshu-body img.wc-photo-lg { width: 100% !important; height: 240px !important; object-fit: contain !important; display: block !important; border-radius: 8px; margin-bottom: 14px; background: #F8F9FB; }
.wc-gyoshu-body img.wc-photo-sm { width: 100% !important; height: 170px !important; object-fit: contain !important; display: block !important; background: #F8F9FB; }

/* スマホ追従CTA（テンプレート側で常時出力） */
.mcta { display: none; }
@media (max-width: 900px) {
	.mcta { display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; grid-template-columns: 1fr 1fr; gap: 0; box-shadow: 0 -4px 20px rgba(0,0,0,.14); }
	body { padding-bottom: 68px; }
	.wc-gyoshu-body table.dt th, .wc-gyoshu-body table.dt td { padding: 11px 12px; font-size: 14px; }
}