/* ============================================================
   自動生成ファイル。直接編集しない。
   node tools/build-theme-assets.mjs で再生成する。
   元: tools/column-wp.extra.css ＋ ブログ記事/scripts/common.css
   ============================================================ */
/* ============================================================
   Irodori HP テーマ用 追加CSS（公式 /style.css の後に読み込む）
   このファイルは tools/build-theme-assets.mjs が
   theme/irodori-hp/assets/column-wp.css に組み立てる元。
   column-wp.css を直接編集しない（再生成で消える）。
   ============================================================ */

/* ------------------------------------------------------------
   1. 記事本文（.irodori-article）を公式 style.css から守る
   ------------------------------------------------------------
   公式 style.css には p / a / h1〜h5 への全体指定（文字色 #000・
   明朝体・両端揃え・字間）と、.column_box p / h2 / p a の指定がある。
   これが記事内部に当たると、白文字の CTA が黒くなる・見出しが
   明朝体になる・スマホで本文が 13px になる、などが起きる。

   詳細度の設計:
   - 層0  .irodori-article :where(...)  = (0,1,0)
          公式の要素指定 (0,0,1) にだけ勝つ。記事CSS・共通CSSには負ける。
   - 層1  div.irodori-article p など    = (0,1,2)〜(0,1,3)
          .column_box p (0,1,1) / .column_box p a (0,1,2) に勝つ。
          記事CSS・共通CSSの「クラス2つ以上」のルール (0,2,x) には負ける。
   - 共通CSS（common.css）は :where(.column_box) .irodori-article で
     スコープし、旧ブログと同じ詳細度 (0,1,x) のまま置く。
     本文中の記事ごとの <style>（.irodori-article ... ）が後から来て
     同じ詳細度で勝てるようにするため（記事ごとの配色が効く）。
   ------------------------------------------------------------ */

/* 層0: 公式の要素指定（p, a, h1 / h2, h4 / h3, h4, h5 / リセット）を打ち消す */
.irodori-article :where(p, a, h1, h2, h3, h4, h5, h6) {
	letter-spacing: inherit;
	font-family: inherit;
	font-style: inherit;
	text-align: inherit;
	text-justify: auto;
	color: inherit;
	line-height: inherit;
}
.irodori-article :where(h1, h2, h3, h4, h5, h6) {
	font-weight: bold;
}
.irodori-article :where(h1) { font-size: 2em; }
.irodori-article :where(h2) { font-size: 1.5em; }
.irodori-article :where(h3) { font-size: 1.17em; }
.irodori-article :where(h4) { font-size: 1em; }
.irodori-article :where(h5) { font-size: .83em; }
.irodori-article :where(h6) { font-size: .67em; }

/* 層1: .column_box p / h2 / p a（スマホ・PC 両方のメディアクエリ分）に勝つ */
div.irodori-article p {
	font-size: inherit;
	line-height: inherit;
	margin-bottom: 0;
}
div.irodori-article h2 {
	font-size: 1.5em;
	font-family: inherit;
	font-weight: bold;
	line-height: inherit;
}
div.irodori-article p a {
	color: #1a5276; /* 全記事の a{color:#1a5276} と同じ値 */
}

/* 公式の .hero（トップ動画用。height:100vh）が記事の .hero に当たるのを止める */
.column_box .irodori-article .hero {
	height: auto;
	top: auto;
	bottom: auto;
}

/* ------------------------------------------------------------
   ブログ記事 共通CSS（scripts/common.css を :where(.column_box) .irodori-article にスコープ）
   131 ルール
   ------------------------------------------------------------ */
:where(.column_box) .irodori-article *{margin:0;padding:0;box-sizing:border-box}
:where(.column_box) .irodori-article{font-family:'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;color:var(--c-text);background:var(--c-bg);line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased;font-feature-settings:'palt'}
:where(.column_box) .irodori-article a{color:#1a5276;text-decoration:none}
:where(.column_box) .irodori-article a:hover{text-decoration:underline}
:where(.column_box) .irodori-article img{max-width:100%;height:auto;border-radius:12px}
:where(.column_box) .irodori-article .wrap{max-width:740px;margin:0 auto;padding:0 20px}
:where(.column_box) .irodori-article .hero{background:linear-gradient(135deg,var(--c-primary-dark) 0%,var(--c-primary) 40%,var(--c-blue) 100%);color:#fff;padding:50px 20px 50px;text-align:center;position:relative;overflow:hidden}
:where(.column_box) .irodori-article .hero::after{content:'';position:absolute;bottom:-40px;left:-10%;width:120%;height:80px;background:var(--c-bg);border-radius:50% 50% 0 0}
:where(.column_box) .irodori-article .hero-badge{display:inline-block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);border-radius:30px;padding:6px 18px;font-size:12px;font-weight:700;letter-spacing:.5px;margin-bottom:16px;position:relative;z-index:1}
:where(.column_box) .irodori-article .hero h1{font-size:clamp(22px,5vw,32px);font-weight:900;line-height:1.4;margin-bottom:14px;position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.3)}
:where(.column_box) .irodori-article .hero-sub{font-size:14px;opacity:.95;line-height:1.7;position:relative;z-index:1}
:where(.column_box) .irodori-article .author{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:18px 20px;margin:-30px 20px 30px;max-width:740px;margin-left:auto;margin-right:auto;box-shadow:0 4px 20px rgba(0,0,0,.08);position:relative;z-index:2}
:where(.column_box) .irodori-article .author-icon{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--c-primary),var(--c-blue));display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:900;flex-shrink:0;overflow:hidden;padding:6px}
:where(.column_box) .irodori-article .author-info{font-size:13px;color:#666;line-height:1.5}
:where(.column_box) .irodori-article .author-name{font-size:15px;font-weight:800;color:var(--c-primary)}
:where(.column_box) .irodori-article .toc{background:#fff;border-left:4px solid var(--c-primary);border-radius:0 14px 14px 0;padding:24px 24px 24px 28px;margin:30px 0;box-shadow:0 2px 12px rgba(0,0,0,.05)}
:where(.column_box) .irodori-article .toc-title{font-size:15px;font-weight:800;color:var(--c-primary);margin-bottom:12px;display:flex;align-items:center;gap:8px}
:where(.column_box) .irodori-article .toc-title::before{content:'📋';font-size:18px}
:where(.column_box) .irodori-article .toc ol{padding-left:20px;counter-reset:toc}
:where(.column_box) .irodori-article .toc li{margin:8px 0;font-size:14px;line-height:1.6;list-style:none;counter-increment:toc;padding-left:8px}
:where(.column_box) .irodori-article .toc li::before{content:counter(toc)'.';color:var(--c-primary);font-weight:800;margin-right:6px}
:where(.column_box) .irodori-article .toc a{color:#333;border-bottom:1px dashed #ccc}
:where(.column_box) .irodori-article .toc a:hover{color:var(--c-primary);border-bottom-color:var(--c-primary);text-decoration:none}
:where(.column_box) .irodori-article .section{margin:40px 0}
:where(.column_box) .irodori-article .section h2{font-size:22px;font-weight:900;color:var(--c-primary);padding-bottom:10px;border-bottom:3px solid var(--c-primary);margin-bottom:24px;line-height:1.4}
:where(.column_box) .irodori-article .section p{margin:16px 0;font-size:15.5px}
:where(.column_box) .irodori-article .lead{background:#fff;border-radius:16px;padding:30px 24px;margin:30px 0;box-shadow:0 2px 16px rgba(0,0,0,.06)}
:where(.column_box) .irodori-article .lead-question{font-size:20px;font-weight:800;color:var(--c-primary-dark);text-align:center;margin-bottom:20px;line-height:1.5}
:where(.column_box) .irodori-article .lead-stat{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:12px;padding:18px 20px;margin:20px 0;text-align:center}
:where(.column_box) .irodori-article .lead-stat .num{font-size:36px;font-weight:900;color:#e65100;display:block}
:where(.column_box) .irodori-article .lead-stat .label{font-size:13px;color:#666;margin-top:4px}
:where(.column_box) .irodori-article .pro-comment{background:#e8f5e9;border-radius:14px;padding:20px 22px;margin:20px 0;position:relative;border:1px solid #a5d6a7}
:where(.column_box) .irodori-article .pro-comment::before{content:'💬 動画でも話していますが';font-size:12px;font-weight:800;color:var(--c-primary-dark);display:block;margin-bottom:8px}
:where(.column_box) .irodori-article .pro-comment p{font-size:14.5px;color:#333;line-height:1.8;margin:0}
:where(.column_box) .irodori-article .highlight-box{background:linear-gradient(135deg,#1a237e,#283593);color:#fff;border-radius:16px;padding:28px 24px;margin:30px 0;text-align:center}
:where(.column_box) .irodori-article .highlight-box .big{font-size:28px;font-weight:900;display:block;margin-bottom:8px}
:where(.column_box) .irodori-article .highlight-box .sub{font-size:14px;opacity:.9}
:where(.column_box) .irodori-article .cta{background:linear-gradient(135deg,var(--c-primary),var(--c-blue));border-radius:18px;padding:36px 28px;margin:40px 0;text-align:center;color:#fff;position:relative;overflow:hidden}
:where(.column_box) .irodori-article .cta::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:rgba(255,255,255,.1);border-radius:50%}
:where(.column_box) .irodori-article .cta h3{font-size:22px;font-weight:900;margin-bottom:12px}
:where(.column_box) .irodori-article .cta p{font-size:14px;opacity:.95;margin-bottom:20px;line-height:1.7}
:where(.column_box) .irodori-article .cta-btn{display:inline-block;background:#fff;color:var(--c-primary);font-size:16px;font-weight:800;padding:14px 36px;border-radius:50px;box-shadow:0 4px 16px rgba(0,0,0,.2);margin:6px 4px}
:where(.column_box) .irodori-article .cta-btn:hover{transform:scale(1.05);text-decoration:none}
:where(.column_box) .irodori-article .cta-info{margin-top:16px;font-size:12px;opacity:.85}
:where(.column_box) .irodori-article .related{background:#fff;border-radius:16px;padding:24px;margin:30px 0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
:where(.column_box) .irodori-article .related h3{font-size:16px;font-weight:800;color:var(--c-primary);margin-bottom:16px;display:flex;align-items:center;gap:8px}
:where(.column_box) .irodori-article .related h3::before{content:'🎬'}
:where(.column_box) .irodori-article figure{margin:28px 0;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.08);background:#fff}
:where(.column_box) .irodori-article figure img{width:100%;height:auto;display:block;border-radius:0}
:where(.column_box) .irodori-article figcaption{font-size:13px;color:#444;padding:12px 18px;background:var(--c-bg);margin:0;line-height:1.7;border-top:1px solid #f0f0f0;font-weight:500}
:where(.column_box) .irodori-article figcaption::before{content:'▲ ';color:var(--c-primary);font-weight:700}
:where(.column_box) .irodori-article .brand-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--c-border);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}
:where(.column_box) .irodori-article .brand-logo{display:flex;align-items:center;gap:10px}
:where(.column_box) .irodori-article .brand-logo img{width:auto;height:36px;max-width:280px;object-fit:contain;border-radius:0}
:where(.column_box) .irodori-article .brand-cta{font-size:12px;font-weight:700;color:#fff;background:var(--c-primary);padding:8px 16px;border-radius:30px}
:where(.column_box) .irodori-article .video-card{display:block;position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin:16px 0;background:#000;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:transform .2s}
:where(.column_box) .irodori-article .video-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.2);text-decoration:none}
:where(.column_box) .irodori-article .video-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
:where(.column_box) .irodori-article .video-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%);z-index:1}
:where(.column_box) .irodori-article .video-card .play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(255,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:transform .2s}
:where(.column_box) .irodori-article .video-card:hover .play-icon{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,0,0,1)}
:where(.column_box) .irodori-article .video-card .play-icon::after{content:'';width:0;height:0;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff;margin-left:6px}
:where(.column_box) .irodori-article .video-card .video-card-title{position:absolute;bottom:14px;left:18px;right:18px;color:#fff;font-size:14px;font-weight:700;line-height:1.5;text-shadow:0 2px 8px rgba(0,0,0,.6);z-index:2}
:where(.column_box) .irodori-article .video-card .video-card-meta{position:absolute;top:14px;left:18px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:4px;z-index:2;letter-spacing:.3px}
:where(.column_box) .irodori-article .author-footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--c-border)}
:where(.column_box) .irodori-article .author-footer-brand video{width:100%;max-width:260px;height:auto;flex-shrink:0;border-radius:0;mix-blend-mode:multiply}
:where(.column_box) .irodori-article .faq{background:#fff;border-radius:16px;padding:24px;margin:24px 0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
:where(.column_box) .irodori-article .faq-item{padding:16px 0;border-bottom:1px solid #f0f0f0}
:where(.column_box) .irodori-article .faq-item:last-child{border-bottom:none}
:where(.column_box) .irodori-article .faq-q{font-size:15.5px;font-weight:800;color:var(--c-primary);margin-bottom:8px;display:flex;align-items:flex-start;gap:8px}
:where(.column_box) .irodori-article .faq-q::before{content:'Q.';font-weight:900;flex-shrink:0}
:where(.column_box) .irodori-article .faq-a{font-size:14.5px;color:#333;line-height:1.85;padding-left:24px;display:flex;align-items:flex-start;gap:8px}
:where(.column_box) .irodori-article .faq-a::before{content:'A.';font-weight:900;color:#2e7d32;flex-shrink:0;margin-left:-24px;width:24px}
:where(.column_box) .irodori-article .author-footer{background:#fff;border-radius:18px;padding:32px 28px;margin:40px 0 30px;box-shadow:0 2px 16px rgba(0,0,0,.07);border:1px solid #f0e6d6}
:where(.column_box) .irodori-article .author-footer-title{font-size:14px;font-weight:800;color:#888;margin-bottom:20px;letter-spacing:.5px}
:where(.column_box) .irodori-article .author-footer-name{font-size:20px;font-weight:900;color:var(--c-primary);margin-bottom:8px}
:where(.column_box) .irodori-article .author-footer-job{font-size:14px;color:#555;margin-bottom:20px;line-height:1.7}
:where(.column_box) .irodori-article .author-footer-info{font-size:13.5px;line-height:1.85;color:#444}
:where(.column_box) .irodori-article .author-footer-info dt{font-weight:700;color:var(--c-primary);margin-top:10px}
:where(.column_box) .irodori-article .author-footer-info dd{margin-left:0;margin-bottom:6px}
:where(.column_box) .irodori-article .author-footer-info a{color:var(--c-primary);font-weight:600}
:where(.column_box) .irodori-article .footer{text-align:center;padding:30px 20px;font-size:12px;color:#999}
:where(.column_box) .irodori-article .field-memo{background:linear-gradient(135deg,var(--c-light),#c8e6c9);border-radius:14px;padding:22px 24px 18px;margin:30px 0;position:relative;border-left:4px solid var(--c-primary);box-shadow:0 2px 12px rgba(0,105,92,.08)}
:where(.column_box) .irodori-article .field-memo-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
:where(.column_box) .irodori-article .field-memo-icon{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--c-primary),var(--c-blue));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
:where(.column_box) .irodori-article .field-memo-icon img{width:100%;height:auto;border-radius:0;padding:5px}
:where(.column_box) .irodori-article .field-memo-label{font-size:11px;font-weight:800;color:var(--c-primary);letter-spacing:1px;line-height:1.3}
:where(.column_box) .irodori-article .field-memo-name{font-size:15px;font-weight:900;color:var(--c-primary-dark);line-height:1.3;margin-top:2px}
:where(.column_box) .irodori-article .field-memo-text{font-size:14.5px;color:#333;line-height:1.95;margin:6px 0 12px}
:where(.column_box) .irodori-article .field-memo-text strong{color:var(--c-primary);font-weight:700}
:where(.column_box) .irodori-article .field-memo-source{font-size:11.5px;color:var(--c-blue);line-height:1.65;border-top:1px dashed #80cbc4;padding-top:10px;margin-top:8px}
:where(.column_box) .irodori-article .field-memo-source::before{content:'📺 ';font-size:12px}
:where(.column_box) .irodori-article .field-memo-source a{color:var(--c-primary);text-decoration:underline;font-weight:600}
:where(.column_box) .irodori-article .section h3{font-size:18px;font-weight:800;color:var(--c-text);margin:28px 0 12px;padding-left:14px;border-left:4px solid var(--c-green);line-height:1.5}
:where(.column_box) .irodori-article .section strong{color:var(--c-primary);font-weight:700}
:where(.column_box) .irodori-article .danger-box{background:#fff;border:2px solid var(--c-warning);border-radius:14px;padding:20px 22px;margin:24px 0;box-shadow:0 2px 12px rgba(198,40,40,.1)}
:where(.column_box) .irodori-article .danger-box-title{font-size:15px;font-weight:900;color:var(--c-warning);margin-bottom:12px;display:flex;align-items:center;gap:8px}
:where(.column_box) .irodori-article .danger-box-title::before{content:'⚠️';font-size:20px}
:where(.column_box) .irodori-article .danger-box ul{padding-left:20px;font-size:14.5px;line-height:1.85}
:where(.column_box) .irodori-article .danger-box li{margin:6px 0}
:where(.column_box) .irodori-article .danger-box li strong{color:var(--c-warning)}
:where(.column_box) .irodori-article .scene-card{background:#fff;border-radius:16px;padding:0;margin:28px 0;box-shadow:0 3px 16px rgba(0,0,0,.07);overflow:hidden}
:where(.column_box) .irodori-article .scene-header{display:flex;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid #f0f0f0;background:linear-gradient(135deg,var(--c-light),#b2dfdb)}
:where(.column_box) .irodori-article .scene-num{width:48px;height:48px;border-radius:50%;background:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff;flex-shrink:0}
:where(.column_box) .irodori-article .scene-title{font-size:17px;font-weight:800;color:var(--c-primary-dark);line-height:1.4}
:where(.column_box) .irodori-article .scene-body{padding:20px 24px}
:where(.column_box) .irodori-article .scene-body p{font-size:15px;margin:12px 0;line-height:1.85}
:where(.column_box) .irodori-article .compare-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);margin:24px 0;font-size:14px}
:where(.column_box) .irodori-article .compare-table th{background:var(--c-primary);color:#fff;padding:14px 12px;font-size:13px;font-weight:700;text-align:left}
:where(.column_box) .irodori-article .compare-table td{padding:14px 12px;background:#fff;border-bottom:1px solid #f0f0f0;line-height:1.6}
:where(.column_box) .irodori-article .compare-table tr:last-child td{border-bottom:none}
:where(.column_box) .irodori-article .compare-table .ng{color:var(--c-warning);font-weight:700}
:where(.column_box) .irodori-article .compare-table .ok{color:#2e7d32;font-weight:700}
:where(.column_box) .irodori-article .video-thumb{display:block;border-radius:12px;overflow:hidden;margin:12px 0;position:relative}
:where(.column_box) .irodori-article .video-thumb img{display:block;width:100%}
:where(.column_box) .irodori-article .video-thumb-caption{padding:10px 14px;background:var(--c-text);color:#fff;font-size:13px;font-weight:600}
:where(.column_box) .irodori-article{--c-primary:#00695c; --c-primary-dark:#004d40; --c-blue:#1565c0; --c-green:#43a047; --c-light:#e0f2f1; --c-text:#212121; --c-text-sub:#5a5a5a; --c-bg:#fafafa; --c-card:#fff; --c-border:#e0e0e0; --c-warning:#c62828}
:where(.column_box) .irodori-article .author-icon img{width:100%;height:auto;border-radius:0}
:where(.column_box) .irodori-article .area-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0}
:where(.column_box) .irodori-article .area-chips span{background:#fff;color:var(--c-primary-dark);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.06)}
:where(.column_box) .irodori-article .area-chips .home{background:var(--c-primary);color:#fff;font-weight:800}
:where(.column_box) .irodori-article .related-article{background:var(--c-light);border-radius:14px;padding:18px 20px;margin:24px 0;border-left:4px solid var(--c-primary)}
:where(.column_box) .irodori-article .related-article-label{font-size:11px;font-weight:800;color:var(--c-primary-dark);letter-spacing:1px;margin-bottom:6px}
:where(.column_box) .irodori-article .related-article a{font-size:14.5px;font-weight:700;color:var(--c-primary);line-height:1.5}
:where(.column_box) .irodori-article .point-box{background:linear-gradient(135deg,#e3f2fd,#e8f5e9);border-radius:14px;padding:24px;margin:24px 0;border-left:4px solid var(--c-green)}
:where(.column_box) .irodori-article .point-box-title{font-size:15px;font-weight:900;color:var(--c-green-dark);margin-bottom:12px;display:flex;align-items:center;gap:8px}
:where(.column_box) .irodori-article .point-box-title::before{content:'✅';font-size:18px}
:where(.column_box) .irodori-article .point-box ol{padding-left:20px;font-size:15px;line-height:1.95}
:where(.column_box) .irodori-article .point-box li{margin:8px 0}
:where(.column_box) .irodori-article .point-box li strong{color:var(--c-primary)}
@media(max-width:600px){
  :where(.column_box) .irodori-article .brand-cta{display:none}
}

/* ------------------------------------------------------------
   1b. 記事本文の文字まわりを公式コラム（/columns/co_NNN.html）に寄せる
   ------------------------------------------------------------
   公式の値（https://iro-dori.biz/style.css）:
     本文 .column_box p   … 游ゴシック系 / 字間 .04em / 両端揃え
                            959px 以下 14px・行間 1.7・下余白 13px
                            960px 以上 16px・行間 1.9・下余白 18px
     h3 .shift_box h3      … 17px（PC 24px）太字・上下 2px（PC 3px）の線・
                            薄い背景・字間 .11em
     h4 .shift_box h4      … 17px（PC 21px）太字・下線 2px
     本文リンク            … #4275FF

   詳細度: 記事ごとの <style>（.irodori-article .section p など (0,2,1)）は
   このファイルより後ろ（<head> の末尾）に来るので、:where(.column_box) の
   スコープ（同じ (0,2,1)）では負けて効かない。そのため、ここだけ
   .column_box .irodori-article (0,2,0) から始めて (0,3,x) 以上にしている。
   触るのは「文字の大きさ・行間・字間・揃え・余白・見出しの線」だけ。
   文字色・見出しの色・ボタン色は記事の <style> の値をそのまま使う
   （h3 の線の色も記事のテーマカラー --c-primary を使う）。

   対象は本文だけ:
     .section / .lead の「直下の」class なしの p、.section 直下の ul（本文の箇条書き）、
     .section 直下の h2 / h3 / h4。
   FAQ・引用カード・現場メモ・箱・表・CTA・著者フッターの中は
   フォント（書体）だけ揃え、大きさ・余白・色は変えない。
   ------------------------------------------------------------ */

/* 書体: 記事全体（部品の中も）を公式と同じ游ゴシック系にする。
   'palt'（詰め組み）は公式に無いので切る */
.column_box .irodori-article {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
	font-feature-settings: normal;
}

/* 本文の段落・箇条書き（スマホ・タブレット: 959px 以下） */
.column_box .irodori-article .section > p:not([class]),
.column_box .irodori-article .lead > p:not([class]),
.column_box .irodori-article .section > ul:not([class]),
.column_box .irodori-article .section > ul.plain {
	font-size: 14px; /* 公式は 13px だが、部品の中（14.5px）より小さく見えるので 14px（2026-10-15 判断） */
	line-height: 1.7;
	letter-spacing: .04em;
	text-align: justify;
	text-justify: inter-ideograph;
}
.column_box .irodori-article .section > p:not([class]),
.column_box .irodori-article .lead > p:not([class]) {
	margin: 13px 0;
}

/* 本文リンク（公式 .column_box p a と同じ色） */
.column_box .irodori-article .section > p:not([class]) a,
.column_box .irodori-article .lead > p:not([class]) a,
.column_box .irodori-article .section > ul:not([class]) a,
.column_box .irodori-article .section > ul.plain a {
	color: #4275FF;
}

/* h2: 公式スマホと同じ 21px。装飾（下線・色）は記事のまま */
.column_box .irodori-article .section > h2 {
	font-size: 21px;
	line-height: 1.5;
}

/* h3: 公式 .shift_box h3 の作り（上下の線・薄い背景・太字・字間）。
   記事の左の縦線は消し、線の色は記事のテーマカラー */
.column_box .irodori-article .section > h3 {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: .11em;
	text-align: left;
	border-left: 0;
	border-top: 2px solid var(--c-primary, #353535);
	border-bottom: 2px solid var(--c-primary, #353535);
	background-color: #FFFFFF;
	padding: 8px 5px;
	margin: 32px 0 16px;
}

/* h4: 公式 .shift_box h4 の作り（下線） */
.column_box .irodori-article .section > h4 {
	display: inline-block;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: .11em;
	border-bottom: 2px solid var(--c-primary, #353535);
	margin: 24px 0 12px;
}

@media (min-width:960px) {
	.column_box .irodori-article .section > p:not([class]),
	.column_box .irodori-article .lead > p:not([class]),
	.column_box .irodori-article .section > ul:not([class]),
	.column_box .irodori-article .section > ul.plain {
		font-size: 16px;
		line-height: 1.9;
	}
	.column_box .irodori-article .section > p:not([class]),
	.column_box .irodori-article .lead > p:not([class]) {
		margin: 18px 0;
	}
	.column_box .irodori-article .section {
		margin: 60px 0;
	}
	/* 公式 PC の h2 は 38px だが、あれは写真の帯に白文字で載せる大見出し。
	   本文幅 700px の中で 38px だと 1 行 18 字ほどで 2〜3 行に折れるので、
	   ブログの 22px から 1 段上げた 28px にする（h3 の 22px より明確に大きい） */
	.column_box .irodori-article .section > h2 {
		font-size: 28px;
	}
	/* 公式 PC の h3 は 24px・線 3px。本文幅が公式（約 900px）より狭い 700px なので
	   22px に抑え、線の太さは公式と同じ */
	.column_box .irodori-article .section > h3 {
		font-size: 22px;
		border-top-width: 3px;
		border-bottom-width: 3px;
		padding: 12px 12px;
		margin: 48px 0 24px;
	}
	.column_box .irodori-article .section > h4 {
		font-size: 19px;
		padding-bottom: 5px;
		margin: 36px 0 20px;
	}
}

/* ------------------------------------------------------------
   2. ブログ記事のヒーロー（アイキャッチを背景にする）
   ------------------------------------------------------------ */
.blog_hero {
	background-color: #3a3a3a;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ------------------------------------------------------------
   2-b. ブログ記事の本文枠を既存コラムと同じ幅にする
   既存コラムは .column_table .container { width:90%; max-width:900px; 中央 }。
   ブログ記事の .wrap は元々 max-width:740px（padding 20px → 中身 700px）で、既存コラムより
   200px 狭く見えた（2026-10-15 吉田さん指摘「幅が細い」）。左右の位置もパンくずと揃える
   ------------------------------------------------------------ */
.column_box .irodori-article .wrap,
.column_box .irodori-article .author {
	width: 90%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}
.column_box .irodori-article .author {
	padding-left: 20px;
	padding-right: 20px;
	/* ヒーロー下の白い斜め帯 .slopebox_F（z-index:3）がカード上端（顔アイコン・氏名）に被らないよう前面に（2026-10-15 Codex 指摘） */
	position: relative;
	z-index: 5;
}

/* ------------------------------------------------------------
   3. パンくず（本文枠と同じ 90%・最大 900px）
   ------------------------------------------------------------ */
.irodori-breadcrumb {
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
	padding: 14px 0 6px;
	font-size: 12px;
	line-height: 1.6;
	position: relative;
	z-index: 4; /* 斜めライン（.slopebox_F は z-index:3）より手前に出す */
}
.irodori-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.irodori-breadcrumb li {
	display: inline;
	color: #555555;
	font-size: 12px;
}
.irodori-breadcrumb li + li::before {
	content: "›";
	margin: 0 .6em;
	color: #999999;
}
.irodori-breadcrumb a {
	color: #007BDC;
	text-decoration: none;
	letter-spacing: 0.04em;
	font-size: 12px;
	line-height: 1.6;
}
.irodori-breadcrumb a:hover {
	text-decoration: underline;
}
.irodori-breadcrumb [aria-current="page"] {
	color: #555555;
}
@media (min-width:960px) {
	.irodori-breadcrumb {
		padding: 20px 0 10px;
		font-size: 13px;
	}
	.irodori-breadcrumb li,
	.irodori-breadcrumb a {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------
   4. 関連コラム（記事末尾。カードは column_list.html と同じ部品）
   ------------------------------------------------------------ */
.irodori-related {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px 0 60px;
}
.irodori-related .irodori-related-title {
	font-size: 20px;
	font-weight: bold;
	color: #2E2E2E;
	text-align: center;
	margin-bottom: 25px;
	letter-spacing: 0.04em;
}
.irodori-related .irodori-related-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: 5%;
}
/* .all_tab は公式CSSで display:none（タブ選択時だけ表示）なので、ここでは常に表示 */
.irodori-related .all_tab {
	display: inline-block;
}
.irodori-related .irodori-related-more {
	text-align: center;
	margin-top: 10px;
}
.irodori-related .irodori-related-more a {
	color: #007BDC;
	font-size: 14px;
	text-align: center;
}
@media (min-width:960px) {
	.irodori-related {
		padding: 50px 0 100px;
	}
	.irodori-related .irodori-related-title {
		font-size: 26px;
		margin-bottom: 40px;
	}
	.irodori-related .irodori-related-list {
		column-gap: 5%;
	}
	.irodori-related .all_tab {
		width: 30%;
	}
	.irodori-related .all_tab .columns .img_box {
		height: 16vw;
		max-height: 220px;
	}
}

/* ------------------------------------------------------------
   5. コラム一覧: 「施工事例」タブ（新設）
   既存タブと同じ仕組み（ラジオボタン + 兄弟セレクタ）
   ------------------------------------------------------------ */
#works:checked ~ .works_tab {
	display: inline-block;
}
/* タブが 7 個になったので、最後の行の余白（.tab_box）で行を埋める
   スマホ: 3 個ずつ → 最後の行は「その他」1 個 + 余白 2/3
   PC   : 5 個ずつ → 最後の行は「施工事例」「その他」2 個 + 余白 3/5 */
.tabs #works ~ .tab_box {
	width: calc(100% / 3 * 2);
}
@media (min-width:960px) {
	.tabs #works ~ .tab_box {
		width: calc(100% / 5 * 3);
	}
}

/* ------------------------------------------------------------
   6. 一覧ページ以外の簡易テンプレート（index / archive / search）
   ------------------------------------------------------------ */
.irodori-simple {
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 0 80px;
	text-align: center;
}
.irodori-simple p {
	text-align: center;
	margin-bottom: 20px;
}
.irodori-simple a {
	color: #007BDC;
	text-align: center;
}

/* ------------------------------------------------------------
   7. 本番公開後の指摘（2026-10-15 吉田さん・Codex astra）
      出典欄のリンクが 11.5px の動画 ID で「何か分からない・押せない」
      → 文字 13px、リンクは太字・タップ余白つき（リンク文字は記事側で「▶ 動画を見る」に統一）
      スマホで艶・耐候の表（.grade-table）の左列が折り返し禁止で広がり、説明欄が細長い
   ------------------------------------------------------------ */
.column_box .irodori-article .field-memo-source,
.column_box .irodori-article .grade-note,
.column_box .irodori-article .bar-chart-note {
	font-size: 13px;
	line-height: 1.8;
}
.column_box .irodori-article .field-memo-source a,
.column_box .irodori-article .grade-note a,
.column_box .irodori-article .bar-chart-note a {
	display: inline-block;
	padding: 4px 2px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.column_box .irodori-article figcaption {
	font-size: 13.5px;
	line-height: 1.75;
}
@media (max-width: 599px) {
	.column_box .irodori-article .grade-table td.gname {
		white-space: normal;
		width: 32%;
		overflow-wrap: anywhere;
	}
}

/* ------------------------------------------------------------
   8. 81 本の目視レビューで見つかったレイアウトの実害（2026-10-15）
      文章は変えず、見た目だけを直す
   ------------------------------------------------------------ */
/* 8-a. ヒーロー見出しの白文字が明るい写真に埋もれる（co_035・037・036・040 など）
        写真の上の網点（.dot_filter）に暗い半透明を重ね、見出しに影を付ける。
        対象はコラムのヒーローだけ（ブログ記事 = .blog_hero、既存コラム = .co_NNN_hero） */
.video_hero .parallax_hero:is(.blog_hero, [class^="co_"]) > .dot_filter {
	background-color: rgba(0, 0, 0, .35);
}
.video_hero .parallax_hero:is(.blog_hero, [class^="co_"]) .column_title,
.video_hero .parallax_hero:is(.blog_hero, [class^="co_"]) .title p {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .5);
}
/* 8-b. 既存コラムの写真見出し（.col_A.point）に、アドバイス枠用の緑の枠線（.column_box .point）が当たる
        （co_026・027・032・036・039） */
.column_box .col_A.point {
	border: 0;
}
/* 8-c. 記事 01〜15 の「RELATED」「施工事例の記事」の枠で、複数のリンクが 1 行に続く
        （記事 16 以降の記事ごとの CSS と同じ指定を共通にする） */
.column_box .irodori-article .related-article a {
	display: block;
	margin: 4px 0;
}
/* 8-d. co_011 のまとめ見出し（#anchor_P、3 行）が下の本文カードに隠れる（2026-10-17、WP 化に合わせて静的版の <head> の指定を移す）
        #anchor_P は全コラム共通の id なので、co_011 のヒーローがあるページだけに当てる */
body:has(.co_011_hero) #anchor_P.col_A {
	height: auto;
	min-height: 290px;
	padding-bottom: 60px;
}
@media (min-width: 600px) {
	body:has(.co_011_hero) #anchor_P.col_A { min-height: 380px; padding-bottom: 60px; }
}
@media (min-width: 960px) {
	body:has(.co_011_hero) #anchor_P.col_A { min-height: 800px; padding-bottom: 230px; }
}