/* 2026-10-25 Claude Code：アイコンと図（社長 10/25「視覚的に分かりやすくしろ、アイコンを入れろ」）。
   形は functions.php の egao_icon_shapes() だけ（Lucide・線だけ・単色）。色はリンクの茶橙（--egao-link）、橙の地の上は墨（--egao-ink）。
   文字は3段階（32/18/15、スマホ28/18/15）のまま。アイコンは文字の大きさに合わせて 18〜26px。 */

.egao-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--egao-link);line-height:1}
.egao-ico .egao-icon{display:block;width:20px;height:20px}

/* ── メニュー：PCの上は文字の上にアイコン（横幅を増やさない。960〜1199pxでもロゴを縮めない）。スマホの開閉と足元は文字の左。 */
#header .c-gnav>li>a{flex-direction:column!important;gap:3px!important;padding-top:9px!important;padding-bottom:9px!important}
#header .c-gnav>li>a>.egao-ico .egao-icon{width:22px;height:22px}
#header .c-gnav>li:last-child>a>.egao-ico{color:var(--egao-ink)}
.p-spMenu__nav a>.egao-ico .egao-icon{width:22px;height:22px}
#sp_menu .p-spMenu__nav .sub-menu a>.egao-ico .egao-icon{width:20px;height:20px}
.l-footer__nav a>.egao-ico .egao-icon{width:18px;height:18px}
.l-footer__nav a{gap:7px}

/* ── 節の札（15pxの太字）と、札の無い節の見出し（h2）。h2 はアイコンの箱と文字の箱を横に並べ、h2 の中の改行を崩さない。 */
.post_content .egao-kicker>.egao-ico{display:inline-flex;vertical-align:-5px;margin-right:8px}
.post_content .egao-kicker>.egao-ico .egao-icon{width:20px;height:20px;stroke-width:1.75}
.post_content h2.egao-ih{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;align-items:start}
.post_content h2.egao-ih>.egao-h-ico{width:48px;height:48px;background:var(--egao-warm);margin-top:3px}
.post_content h2.egao-ih>.egao-h-ico .egao-icon{width:26px;height:26px}
.post_content :is(.egao-warm,.egao-band) h2.egao-ih>.egao-h-ico{background:#fff}

/* ── 小見出し・表の項目・短い文の頭のアイコン */
.post_content :is(h3,h4,dt,p)>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:9px}
.post_content :is(h3,h4)>.egao-ico .egao-icon{width:22px;height:22px}
.post_content .egao-facts dt>.egao-ico .egao-icon{width:22px;height:22px}
.post_content .egao-dims dt>.egao-ico{vertical-align:-4px;margin-right:7px}
.post_content .egao-dims dt>.egao-ico .egao-icon{width:18px;height:18px}
.post_content .egao-plan-result>.egao-ico,.post_content .egao-cta .egao-ico{color:var(--egao-ink)}
.post_content .egao-plan-label>.egao-ico .egao-icon{width:20px;height:20px}
.post_content .egao-pillar-price-label>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:7px}
.post_content .egao-pillar-price-label>.egao-ico .egao-icon{width:18px;height:18px}

/* ── 箇条書き：点の代わりにアイコン（意味の合う物だけに付けた一覧） */
.post_content ul:has(>li>.egao-ico){list-style:none!important;padding-left:0!important}
.post_content ul>li:has(>.egao-ico){position:relative;list-style:none;padding-left:34px!important}
.post_content ul>li>.egao-ico{position:absolute;left:0;top:6px}
.post_content ul>li>.egao-ico .egao-icon{width:22px;height:22px}
/* サイトマップの一覧：点の代わりに、リンクの頭の行き先のアイコン */
.post_content ul.egao-linklist{list-style:none!important;padding-left:0!important}
.post_content ul.egao-linklist>li{margin:0 0 8px!important}
/* 流れの一覧（店舗の改装工事の流れ）は、アイコンを線でつなぐ */
.post_content ul.egao-flow-list>li{padding-bottom:16px;margin:0!important}
.post_content ul.egao-flow-list>li:not(:last-child)::after{content:"";position:absolute;left:11px;top:34px;bottom:-2px;border-left:1px solid #b7bcb1}

/* ── ボタン・文字のリンク・「記事を読む」：行き先のアイコン（相談＝吹き出し、住まい＝家、店舗＝店、認可保育園＝園舎、施工事例＝写真、読みもの＝本、ほかのサイト＝外へ） */
.post_content :is(.egao-textlink a,.wp-block-button__link,.egao-read-more,.egao-linklist a)>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:8px}
.post_content :is(.egao-textlink a,.wp-block-button__link,.egao-linklist a)>.egao-ico .egao-icon{width:20px;height:20px}
.post_content .egao-read-more>.egao-ico .egao-icon{width:18px;height:18px}
.post_content .wp-block-button__link>.egao-ico{color:var(--egao-ink)}
.post_content :is(.egao-cta,.is-style-outline) .wp-block-button__link>.egao-ico{color:var(--egao-link)}

/* ── 工事の進め方（4段階）：アイコンの箱を線でつなぐ流れの図。781px以下は縦の流れ。 */
.post_content ol.egao-steps>li{display:flex;flex-direction:column;position:relative;border-top:0!important;padding-top:0!important}
.post_content ol.egao-steps>li>.egao-ico{order:1;width:52px;height:52px;background:var(--egao-warm);position:relative;z-index:1}
.post_content ol.egao-steps>li>.egao-ico .egao-icon{width:26px;height:26px}
.post_content ol.egao-steps>li::before{order:2;margin:14px 0 6px!important}
.post_content ol.egao-steps>li>h3{order:3}
.post_content ol.egao-steps>li>p{order:4}
.post_content ol.egao-steps>li:not(:last-child)::after{content:"";position:absolute;top:26px;left:52px;right:-26px;border-top:1px solid #b7bcb1}
.post_content :is(.egao-warm,.egao-band) ol.egao-steps>li>.egao-ico{background:#fff}
@media(min-width:782px) and (max-width:959px){.post_content ol.egao-steps>li:nth-child(2n)::after{display:none}}
@media(max-width:781px){
 .post_content ol.egao-steps{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
 .post_content ol.egao-steps>li{display:block;min-height:52px;padding:0 0 26px 72px!important}
 .post_content ol.egao-steps>li>.egao-ico{position:absolute;left:0;top:0}
 .post_content ol.egao-steps>li::before{margin:0 0 4px!important}
 .post_content ol.egao-steps>li:not(:last-child)::after{top:52px;bottom:0;left:26px;right:auto;border-top:0;border-left:1px solid #b7bcb1}
}

/* ── スマホの開閉メニューと足元：文字の箱（中は文節で折る） */
.p-spMenu__nav a>.egao-mtext,.l-footer__nav a>.egao-mtext{min-width:0}
/* ── 計画の図（間取り・内装と収納・水まわりと設備）：781px以下はアイコンを文字の上の行に置いてそろえる */
@media(max-width:781px){.post_content .egao-plan-parts h3>.egao-ico{display:flex;margin:0 0 6px}}
/* ── 施工事例の目次：項目ごとのアイコン、矢印は右端。360px未満は1列（2列だと語の途中で折れる） */
@media(max-width:359px){.post_content .egao-case-toc{grid-template-columns:minmax(0,1fr)!important}}
.post_content .egao-case-toc a{justify-content:flex-start}
.post_content .egao-case-toc a>.egao-ico .egao-icon{width:20px;height:20px}
.post_content .egao-case-toc a>span:last-child{margin-left:auto}

/* ── 費用の目安の図（金額は egao-facts.php の正本から計算） */
/* 記事から「費用の目安」の節（#price）へ飛んだ時、上の追従の帯に見出しが隠れないように */
.post_content .egao-price-section{scroll-margin-top:110px}
.post_content .egao-chart{margin:28px 0 8px;padding:26px 28px 24px;border:1px solid #cbd0c4;background:#fff}
.post_content .egao-chart .egao-chart-title{margin:0 0 18px!important;font-size:18px!important;font-weight:700;line-height:1.7;color:var(--egao-ink)!important}
.post_content .egao-chart-title>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:9px}
.post_content .egao-chart-title>.egao-ico .egao-icon{width:22px;height:22px}
.post_content .egao-chart .egao-chart-lead{margin:-6px 0 18px!important;font-size:15px!important;color:#64675f}
.post_content .egao-chart .egao-chart-note{margin:20px 0 0!important;font-size:15px!important;line-height:1.8;color:#64675f}
/* 広さ別の総額の帯（0から同じ物差し） */
.post_content .egao-bars{display:grid;gap:18px}
.post_content .egao-bar-row{min-width:0}
.post_content .egao-chart .egao-bar-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;margin:0 0 7px!important;line-height:1.6}
.post_content .egao-bar-label{font-weight:700}
.post_content .egao-bar-label small{font-size:15px;font-weight:400;color:#64675f;margin-left:2px}
.post_content .egao-bar-value{font-weight:700}
.post_content .egao-bar-track{display:block;border-left:1px solid #8e9587;padding:3px 0}
.post_content .egao-bar{display:block;height:24px;background:var(--egao-orange);border-radius:0 4px 4px 0}
/* 住まいの目安の幅と、施工事例の位置 */
.post_content .egao-range{position:relative;padding-top:58px}
.post_content .egao-range-plot{position:relative;height:24px;border-left:1px solid #8e9587;background:linear-gradient(#dadbd5,#dadbd5) left center/100% 1px no-repeat}
.post_content .egao-range-band{position:absolute;top:0;bottom:0;left:var(--from);width:calc(var(--to) - var(--from));background:var(--egao-orange);border-radius:4px}
.post_content .egao-range-mark{position:absolute;left:var(--case);top:-7px;bottom:-7px;width:0;border-left:2px solid var(--egao-ink)}
.post_content .egao-range-mark:after{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--egao-ink);border:2px solid #fff;border-radius:50%}
.post_content .egao-range-mark-label{position:absolute;bottom:calc(100% + 4px);left:0;transform:translateX(-50%);white-space:nowrap;font-size:15px;font-weight:700;line-height:1.5;text-align:center}
.post_content .egao-range-mark-label>span{display:block}
.post_content .egao-range-axis{position:relative;height:28px;margin-top:8px;font-size:15px;line-height:1.6;color:#64675f}
.post_content .egao-range-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.post_content .egao-range-axis span:first-child{transform:none}
.post_content .egao-range-axis span.is-last{transform:translateX(-100%)}
.post_content .egao-chart-legend{list-style:none!important;padding:0!important;margin:18px 0 0!important;display:grid;gap:6px}
.post_content .egao-chart-legend li{position:relative;margin:0!important;padding-left:30px!important;font-size:15px;line-height:1.8}
.post_content .egao-key{position:absolute;left:0;top:7px;width:20px;height:12px}
.post_content .egao-key-band{background:var(--egao-orange);border-radius:3px}
.post_content .egao-key-mark{left:4px;width:12px;background:var(--egao-ink);border-radius:50%}
/* 坪あたり×広さ＝総額 */
.post_content .egao-formula{display:flex;align-items:stretch;gap:12px}
.post_content .egao-formula-term{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;background:var(--egao-paper);padding:16px 18px;line-height:1.6}
.post_content .egao-formula-term>.egao-ico{margin-bottom:6px;align-self:flex-start}
.post_content .egao-formula-term>.egao-ico .egao-icon{width:24px;height:24px}
.post_content .egao-formula-label{font-size:15px;font-weight:700;color:#64675f}
.post_content .egao-formula-term strong{font-size:18px}
.post_content .egao-formula-term small{font-size:15px;color:#64675f}
.post_content .egao-formula-result{background:var(--egao-warm);box-shadow:inset 0 2px 0 var(--egao-orange)}
.post_content .egao-formula-op{align-self:center;font-family:var(--egao-serif);font-size:32px;line-height:1;color:var(--egao-link)}
.post_content .egao-formula-set+.egao-formula-set{margin-top:22px}
.post_content .egao-chart .egao-formula-head{margin:0 0 10px!important;font-weight:700}
.post_content .egao-formula-head>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:8px}
.post_content .egao-formula-head>.egao-ico .egao-icon{width:22px;height:22px}

/* ── 対応地域の図（市ごとに区を並べ、当社の所在地の区に印。地図ではない） */
.post_content .egao-area-figure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0 20px}
.post_content .egao-area-group{border-top:2px solid var(--egao-orange);padding-top:16px;min-width:0}
.post_content .egao-area-figure .egao-area-city{margin:0 0 12px!important;font-weight:700}
.post_content .egao-area-city>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:8px}
.post_content .egao-area-city>.egao-ico .egao-icon{width:22px;height:22px}
.post_content .egao-area-wards{list-style:none!important;display:flex;flex-wrap:wrap;gap:10px;padding:0!important;margin:0!important}
.post_content .egao-area-wards>li{margin:0!important;padding:8px 16px!important;border:1px solid #b7bcb1;background:#fff;font-weight:700;line-height:1.6}
.post_content .egao-area-wards>li.is-base{border-color:var(--egao-orange)}
.post_content .egao-area-base{display:block;font-size:15px;font-weight:400;color:#64675f}
.post_content .egao-area-base>.egao-ico{display:inline-flex;vertical-align:-3px;margin-right:5px}
.post_content .egao-area-base>.egao-ico .egao-icon{width:16px;height:16px}

/* ── 足元の会社の情報、ページ内の移動の釦、記事の上の案内と下のリンク */
.l-footer .textwidget .egao-ico{display:inline-flex;vertical-align:-3px;margin-right:7px;color:var(--egao-link)}
/* 足元の著作権の行も、ほかの足元の文字と同じく左にそろえる（SWELL の中央寄せを打ち消す） */
.l-footer .l-footer__foot .copyright,.l-footer .copyright{text-align:left}
.l-footer .textwidget .egao-ico .egao-icon{width:18px;height:18px}
.egao-page-move button{display:grid;place-items:center}
.egao-page-move button .egao-icon{width:20px;height:20px}
.egao-history-notice>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:8px}
.egao-history-notice>.egao-ico .egao-icon{width:20px;height:20px}
.egao-article-next a>.egao-ico{display:inline-flex;vertical-align:-4px;margin-right:8px}

/* ── 文字の3段階から外れていた所を寄せる（前からの外れ。2026-10-25 の検証で見つけた）：記事の目次の題 21.6→18、目次の小項目 16.2→15、
   記事の「編集・掲載」の行 14.4→15、下へ送ると出る上の帯のメニュー 14→15 */
.post_content .p-toc__ttl{font-size:18px!important}
.post_content .p-toc__list [data-level="3"]{font-size:15px!important}
.egao-editorial-credit small{font-size:15px}
.l-fixHeader .c-gnav .ttl{font-size:15px!important}
/* 15px にした分、960〜1099px では上の帯の項目の左右の余白とロゴを少し詰めて1行に収める */
@media(min-width:960px) and (max-width:1099px){.l-fixHeader .c-gnav>li>a{padding-left:8px!important;padding-right:8px!important}.l-fixHeader .c-headLogo{max-width:220px!important}}

@media(max-width:781px){
 .post_content .egao-formula{flex-direction:column;gap:6px}
 .post_content .egao-formula-op{align-self:flex-start;padding-left:18px;font-size:28px}
 .post_content .egao-area-figure{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media(max-width:599px){
 .post_content h2.egao-ih{grid-template-columns:40px minmax(0,1fr);column-gap:12px}
 .post_content h2.egao-ih>.egao-h-ico{width:40px;height:40px;margin-top:3px}
 .post_content h2.egao-ih>.egao-h-ico .egao-icon{width:22px;height:22px}
 .post_content .egao-chart{padding:20px 18px 18px}
 .post_content .egao-range-axis span.is-minor{display:none}
 .egao-page-move button .egao-icon{width:18px;height:18px}
}
/* 360px未満：見出しのアイコンの箱は文字の上に置き、文字の幅を減らさない（長いカタカナ語がはみ出さないため）。
   ボタンは左右の余白を少し詰め、アイコンの分で語の途中に折れないようにする。 */
@media(max-width:359px){
 .post_content h2.egao-ih{display:block}
 .post_content h2.egao-ih>.egao-h-ico{display:flex;margin:0 0 10px}
 .post_content .wp-block-button__link{padding-left:1em!important;padding-right:1em!important}
}
