@charset "UTF-8"; /*! Theme Name: Cocoon Child Description: Cocoon専用の子テーマ Theme URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Template: cocoon-master Version: 1.1.3 */ /************************************ ** 子テーマ用のスタイルを書く ************************************/ /*必要ならばここにコードを書く*/ /************************************ ** レスポンシブデザイン用のメディアクエリ ************************************/ /*1023px以下*/ @media screen and (max-width: 1023px){ /*必要ならばここにコードを書く*/ } /*834px以下*/ @media screen and (max-width: 834px){ /*必要ならばここにコードを書く*/ } /*480px以下*/ @media screen and (max-width: 480px){ /*必要ならばここにコードを書く*/ } /* HG-DESIGN-START */ /* フォントは functions.php の HG FONTS ブロックが で読み込む。style.css 内の @import は @media より後ろに置かれるため無効になる（2026-09-06 実測）。 */ /* ========================================================= 北海道外壁塗装ガイド - design system v4 (light / editorial) 2026-08-03 Chromedesign のレイアウトに合わせて全面刷新。 v3 の濃紺ヒーロー主体から、白基調 + オレンジ #d97a26 の 明るい編集メディア型へ変更。 ========================================================= */ :root{ --hg-bg:#ffffff; --hg-band:#eff8fc; /* 淡い水色の帯 */ --hg-line:#e2eef4; --hg-line-2:#c7dee8; --hg-ink:#15242e; /* 見出し・主要テキスト */ --hg-ink-2:#2c3d48; /* 本文 */ --hg-muted:#4d5f6b; /* 補足 */ --hg-muted-2:#5e7079; --hg-muted-3:#647783; /* 日付などの小さい補足。白地で 4.7:1 */ --hg-mv-bg:#FFD84D; /* ヒーローの黄。濃紺文字で 14.7:1 */ --hg-slate:#3c4d59; --hg-navy:#38474f; /* フッター・表ヘッダー（白文字 9.5:1） */ --hg-accent:#0FA3C9; /* 基調のシアン。面と大きい文字に使う */ --hg-accent-deep:#09758F; /* 白地の小さい文字／白文字を載せる面（5.4:1。淡い水色のピルの上でも 4.5:1 を超える） */ --hg-accent-line:#a8dfef; --hg-accent-bg:#e9f7fc; --hg-sun:#FFC42E; /* 差し色の山吹 */ --hg-sun-deep:#8A6100; /* 白地に置く小さい文字用（5.5:1） */ --hg-pink:#E85A9B; --hg-blue:#2C6FE8; --hg-radius:14px; --hg-radius-sm:10px; --hg-pill:100px; --hg-wrap:1120px; --hg-font:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif; --hg-en:"Archivo","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif; --hg-shadow:0 2px 10px rgba(16,60,80,.07); --hg-shadow-2:0 12px 30px rgba(16,60,80,.14); } /* ---------- base ---------- */ /* ヘッダーが sticky なのでページ内ジャンプは高さぶん逃がす（目次・#columns等） */ html{scroll-padding-top:84px;} body{ margin:0;background:var(--hg-bg);color:var(--hg-ink); font-family:var(--hg-font);font-size:15.5px;line-height:2; -webkit-font-smoothing:antialiased;letter-spacing:.01em; } #container,.wrap{background:transparent;} a{color:var(--hg-ink);text-decoration:none;} a:hover{color:var(--hg-accent-deep);} a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--hg-accent-deep);outline-offset:2px;border-radius:3px; } /* ========================================================= header : ロゴ左 + ナビ右の1行、追従 Cocoonの #header-in / #navi-in には固定幅の .wrap が付くため 必ず width:auto で解除する（外すとナビがロゴに重なる） ========================================================= */ #header-container{ position:sticky;top:0;z-index:120;background:#fff; border-bottom:1px solid var(--hg-line); } #header-container-in{ display:flex;align-items:center;justify-content:space-between;gap:24px; max-width:var(--hg-wrap);margin:0 auto;padding:0 24px;min-height:66px; background:#fff;box-sizing:border-box; } .header-container,#header,#header-in,#navi,.navi-in{background:#fff;} #header{flex:0 0 auto;padding:0;margin:0;} #header-in{ width:auto !important;max-width:none !important; margin:0 !important;padding:0 !important; display:block;border:0;min-height:0;height:auto; } #header-in .tagline{display:none;} #header-in .logo-header{margin:0;padding:0;text-align:left;line-height:1.2;} #header-in .logo-header a{display:flex;align-items:center;gap:10px;} #header-in .logo-header a::before{ content:"";width:12px;height:12px;background:var(--hg-accent);flex:none; } .logo-header .site-name-text{ font-size:17px;font-weight:900;letter-spacing:.02em;color:var(--hg-ink); } #header-in .logo-header a:hover{opacity:.75;} #navi{flex:0 0 auto;min-width:0;display:block;} #navi-in{ width:auto !important;max-width:none !important; margin:0 !important;padding:0 !important;display:block; } .navi-in>.menu-header{ display:flex !important;align-items:center;justify-content:flex-end; flex-wrap:nowrap;gap:2px;margin:0;padding:0;list-style:none; } .navi-in>.menu-header>li{ float:none !important;flex:0 0 auto; width:auto !important;min-width:0 !important;max-width:none !important; } .navi-in>.menu-header li a{ display:flex;align-items:center;min-height:auto; padding:8px 11px;border-radius:4px;white-space:nowrap; } .navi-in>.menu-header .item-label{font-size:13.5px;font-weight:600;color:var(--hg-ink);} .navi-in>.menu-header li a:hover{background:#f4f6f8;} .navi-in>.menu-header li a:hover .item-label{color:var(--hg-accent-deep);} .navi-in>.menu-header li a::after{display:none;} .navi-in>.menu-header .caption-wrap{padding:0 !important;margin:0 !important;} /* 最後の項目（よくある質問）だけ枠線で区別 */ .navi-in>.menu-header>li:last-child>a{ border:1px solid var(--hg-line-2);border-radius:4px;margin-left:8px;padding:7px 14px; } .navi-in>.menu-header>li:last-child>a:hover{border-color:var(--hg-accent);background:#fff;} @media screen and (max-width:1180px){ .navi-in>.menu-header .item-label{font-size:12.5px;} .navi-in>.menu-header li a{padding:8px 7px;} } /* ========================================================= 記事本文の見出し・要素 ========================================================= */ .entry-content h2,.article h2{ font-size:23px;font-weight:900;line-height:1.6;color:var(--hg-ink); margin:2.6em 0 1em;padding:14px 20px; background:var(--hg-band);border:0;border-left:4px solid var(--hg-accent);border-radius:0; } .entry-content h3,.article h3{ font-size:19px;font-weight:900;line-height:1.65;color:var(--hg-ink); border:0;border-bottom:2px solid var(--hg-line);padding:0 0 .5em;margin:2.2em 0 .9em; } .entry-content h4{ font-size:17px;font-weight:700;color:var(--hg-ink);border:0;padding:0;margin:1.9em 0 .7em; } .entry-content p{font-size:15px;line-height:2.2;color:var(--hg-ink-2);} .entry-title,.archive-title{font-weight:900;line-height:1.55;letter-spacing:.01em;} .entry-content table{ width:100%;border-collapse:collapse;font-size:14px; } .entry-content table th{ background:var(--hg-navy);color:#fff;font-weight:700; padding:12px 16px;text-align:left;border:0; } .entry-content table td{ padding:12px 16px;border:0;border-bottom:1px solid var(--hg-line);color:var(--hg-ink-2); } /* ---------- Cocoon カード ---------- */ .entry-card-wrap,.related-entry-card-wrap{ background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius); overflow:hidden;transition:box-shadow .15s ease;box-shadow:none; } .entry-card-wrap:hover,.related-entry-card-wrap:hover{box-shadow:0 4px 16px rgba(26,39,51,.08);} .entry-card-title,.related-entry-card-title{font-weight:700;color:var(--hg-ink);line-height:1.6;font-size:15px;} .a-wrap:hover{background:transparent;} .cat-label{ background:#fff;color:var(--hg-accent-deep);border:1px solid var(--hg-accent-line); border-radius:3px;font-size:11px;font-weight:700;padding:2px 8px; } .sidebar h3,.widget-sidebar-title{ font-size:13px;font-weight:900;background:transparent;color:var(--hg-ink); border:0;border-bottom:2px solid var(--hg-navy);border-radius:0;padding:0 0 10px;margin-bottom:14px; } /* ========================================================= MV（縦ラベル / 主コピー / インデックスの3分割） ========================================================= */ /* 背景は北海道の住宅地の実写。文字を読ませるため濃紺のグラデーションを重ねる */ .hg-mv{ position:relative;border-bottom:0; background:var(--hg-navy) url("/wp-content/uploads/2026/08/mv-hokkaido-1.jpg") center 38% / cover no-repeat; } .hg-mv::before{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(12,22,32,.90) 0%,rgba(12,22,32,.74) 46%,rgba(12,22,32,.42) 100%); } .hg-mv__in{ position:relative;z-index:1; max-width:var(--hg-wrap);margin:0 auto;box-sizing:border-box; display:grid;grid-template-columns:58px 1fr 290px;align-items:stretch; } .hg-mv__vlabel{ writing-mode:vertical-rl;text-orientation:mixed; font-size:12px;font-weight:700;letter-spacing:.22em; margin:0;padding:44px 0;justify-self:center; border-right:1px solid rgba(255,255,255,.18); display:flex;align-items:flex-start; } .hg-mv__main{padding:76px 44px 72px;border-right:1px solid rgba(255,255,255,.18);} .hg-mv__title{ font-size:clamp(30px,4.2vw,52px);font-weight:900;line-height:1.34; letter-spacing:.01em;margin:0 0 20px;color:#fff; background:transparent;border:0;padding:0; text-shadow:0 2px 18px rgba(0,0,0,.35); } .entry-content .hg-mv__title{ background:transparent !important;border:0 !important;color:#fff !important; padding:0 !important;margin:0 0 20px !important;border-radius:0 !important; } .hg-mv__title .hl{color:var(--hg-accent);} .hg-mv__tag{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em; color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3); border-radius:3px;padding:4px 12px;margin:0 0 18px; } .hg-mv__lead{font-size:15.5px;line-height:2.05;max-width:600px;margin:0 0 28px;} .hg-mv__actions{display:flex;gap:12px;flex-wrap:wrap;} .hg-mv__actions a{ display:inline-flex;align-items:center;min-height:50px;padding:0 26px; border-radius:3px;font-size:14.5px;font-weight:700; } /* 白文字とのコントラストを4.5:1以上にするため、ボタンは濃いほうのオレンジを使う */ .hg-mv__actions a.is-main{background:var(--hg-accent-deep);color:#fff;} .hg-mv__actions a.is-main:hover{background:#8f470D;color:#fff;} .hg-mv__actions a.is-sub{border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08);} .hg-mv__actions a.is-sub:hover{border-color:#fff;background:rgba(255,255,255,.18);} .hg-mv__index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;} .hg-mv__index li{border-bottom:1px solid rgba(255,255,255,.18);flex:1;} .hg-mv__index li:first-child{border-top:0;} .hg-mv__index li:last-child{border-bottom:0;} .hg-mv__index a{display:flex;flex-direction:column;justify-content:center;height:100%;padding:22px 26px;} .hg-mv__index a:hover{background:rgba(255,255,255,.10);} .hg-mv__index .n{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--hg-accent);margin-bottom:6px;} .hg-mv__index .t{font-size:14.5px;font-weight:700;color:#fff;line-height:1.6;} .hg-link{ font-size:14px;font-weight:700;color:var(--hg-slate); border-bottom:2px solid var(--hg-line-2);padding-bottom:4px; } .hg-link:hover{color:var(--hg-accent-deep);border-bottom-color:var(--hg-accent);} .hg-link--accent{color:var(--hg-accent-deep);border-bottom-color:var(--hg-accent);} /* ========================================================= セクション ========================================================= */ .hg-section{max-width:var(--hg-wrap);margin:0 auto;padding:72px 24px;box-sizing:border-box;} .hg-band{background:var(--hg-band);border-top:1px solid var(--hg-line);} .hg-band > .hg-section{padding-top:64px;padding-bottom:72px;} /* 生成りの帯。MVと同じ地色でページ後半にもう一度あたたかい面を作る */ .hg-band--warm{background:var(--hg-mv-bg);border-top:1px solid #e6ded2;} .hg-band--warm .hg-card{border-color:#e2d9ca;} /* セクション見出し上の小ラベル（英字キッカー）。同じ形の見出しが続く単調さを断つ */ .hg-kicker{ display:flex;align-items:center;gap:10px; font-size:11px;font-weight:700;letter-spacing:.22em; color:var(--hg-accent-deep);margin:0 0 10px; } .hg-kicker::before{content:"";width:26px;height:2px;background:var(--hg-accent);flex:none;} .hg-section-title{ font-size:26px;font-weight:900;letter-spacing:.02em;margin:0 0 8px;color:var(--hg-ink); background:transparent;border:0;padding:0; } .entry-content .hg-section-title{ background:transparent !important;border:0 !important;padding:0 !important; margin:0 0 8px !important;border-radius:0 !important; } .hg-section-lead{font-size:14px;color:var(--hg-muted-2);margin:0 0 28px;line-height:1.9;} /* カード内の見出しに Cocoon の h2/h3 装飾を持ち込ませない */ .entry-content .hg-card__title, .entry-content .hg-point__title, .entry-content .hg-acard__title{ border:0 !important;background:transparent !important; padding:0 !important;border-radius:0 !important; } .entry-content .hg-card__title{font-size:17px;margin:0 !important;} .entry-content .hg-point__title{font-size:14.5px;margin:0 0 6px !important;} .entry-content .hg-acard__title{font-size:15px;margin:0 !important;} .hg-section-head{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; margin:0 0 28px;flex-wrap:wrap; } .hg-section-head .hg-section-title{margin-bottom:0;} .hg-section-head .hg-section-lead{margin:0;flex-basis:100%;} /* ========================================================= カード ========================================================= */ .hg-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; list-style:none;margin:0;padding:0; } .hg-cards--articles{gap:28px;} /* 帯の中の白カードは境界がぼやけるので少し締める */ .hg-band .hg-card{border-color:#dde4ea;} .hg-card--accent{border-left:4px solid var(--c,var(--hg-accent));} .hg-card{ display:block;background:#fff;border:1px solid var(--hg-line); border-radius:var(--hg-radius);padding:24px 26px; transition:border-color .15s ease,box-shadow .15s ease; } a.hg-card{color:var(--hg-ink);} a.hg-card:hover{border-color:var(--hg-accent);color:var(--hg-ink);} .hg-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;} .hg-card__title{display:block;font-size:17px;font-weight:900;margin:0;line-height:1.5;} .hg-card__text{display:block;font-size:13px;line-height:1.8;color:var(--hg-muted);margin:0;} /* ---------- 記事カード（サムネイル付き） ---------- */ .hg-acard{ display:block;background:#fff;border:1px solid var(--hg-line); border-radius:var(--hg-radius);overflow:hidden;transition:box-shadow .15s ease; } .hg-acard:hover{box-shadow:0 4px 16px rgba(26,39,51,.08);color:var(--hg-ink);} .hg-acard__media{ aspect-ratio:16/9;background:var(--hg-band) center/cover no-repeat;display:block; } .hg-acard__body{display:block;padding:16px 18px 18px;} .hg-acard__title{display:block;} .hg-acard__meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .hg-acard__cat{ font-size:11px;font-weight:700;color:var(--hg-accent-deep); border:1px solid var(--hg-accent-line);padding:2px 8px;border-radius:3px; } .hg-acard__date{font-size:12px;color:var(--hg-muted-3);} .hg-acard__title{font-size:15px;font-weight:700;line-height:1.6;color:var(--hg-ink);margin:0;} /* ========================================================= POINT カード / 注記 ========================================================= */ .hg-points{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; list-style:none;margin:0;padding:0; } .hg-point{ border:1px solid var(--hg-line);border-top:4px solid var(--c,var(--hg-accent)); border-radius:var(--hg-radius);padding:22px 24px;background:#fff; position:relative;overflow:hidden; } /* 右上に大きな背景数字を敷き、3枚のカードに奥行きを出す */ .hg-point::after{ position:absolute;top:2px;right:12px;font-size:58px;font-weight:900;line-height:1; color:var(--c,var(--hg-accent));opacity:.10;pointer-events:none;letter-spacing:-.02em; } .hg-point--a::after{content:"01";} .hg-point--b::after{content:"02";} .hg-point--c::after{content:"03";} .hg-point__no{ display:inline-block;font-size:11.5px;font-weight:700;color:var(--c,var(--hg-accent-deep)); background:var(--cbg,var(--hg-accent-bg));border-radius:3px;padding:3px 10px; letter-spacing:.04em;margin:0 0 12px; } .hg-point--a{--c:#A8322B;--cbg:#fbf0ef;} .hg-point--b{--c:#1E6FA8;--cbg:#eef5fa;} .hg-point--c{--c:#9A6B12;--cbg:#fbf5e8;} .hg-point__title{font-size:14.5px;font-weight:700;line-height:1.7;margin:0 0 6px;color:var(--hg-ink);} .hg-point__text{font-size:12.5px;line-height:1.9;color:var(--hg-muted);margin:0;} .hg-note{ background:var(--hg-accent-bg);border:1px solid var(--hg-accent-line); border-radius:var(--hg-radius);padding:20px 26px;margin:2em 0; } .hg-note__title{ display:block;font-size:13px;font-weight:900;color:var(--hg-accent-deep);margin-bottom:8px; } .hg-note p:last-child{margin-bottom:0;} .hg-note--plain{background:#fff;border-color:var(--hg-line);} .hg-note--plain .hg-note__title{color:var(--hg-ink);} .hg-note--warn{background:#fdf3f2;border-color:#eec9c6;} .hg-note--warn .hg-note__title{color:#B3261E;} /* ========================================================= カテゴリーカード（横並びの2カラム。上の3カラムと形を変えて単調さを避ける） ========================================================= */ .hg-cards--cat{grid-template-columns:repeat(2,1fr);gap:20px;} .hg-cards--cat .hg-catcard{display:grid;grid-template-columns:172px 1fr;align-items:stretch;} .hg-cards--cat .hg-catcard__media{aspect-ratio:auto;height:100%;min-height:132px;} .hg-cards--cat .hg-catcard__media::after{left:auto;top:0;right:0;bottom:0;width:4px;height:auto;} .hg-catcard{ display:block;background:#fff;border:1px solid var(--hg-line); border-radius:var(--hg-radius);overflow:hidden;color:var(--hg-ink); transition:box-shadow .15s ease,transform .15s ease; } .hg-catcard:hover{ box-shadow:0 6px 20px rgba(26,39,51,.10);transform:translateY(-2px);color:var(--hg-ink); } .hg-catcard__media{ aspect-ratio:16/9;background:var(--hg-band) center/cover no-repeat; display:block;position:relative; } .hg-catcard__media::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c,var(--hg-accent)); } .hg-catcard__body{display:block;padding:18px 20px 20px;border-top:0;} .hg-catcard__label{ display:block;font-size:11px;font-weight:700;letter-spacing:.06em; color:var(--c,var(--hg-accent-deep));margin:0 0 6px; } .hg-catcard__title{ display:block;font-size:17px;font-weight:900;margin:0 0 8px;line-height:1.5;color:var(--hg-ink); } .hg-catcard__text{display:block;font-size:13px;line-height:1.85;color:var(--hg-muted);margin:0;} .entry-content .hg-catcard__title{ border:0 !important;background:transparent !important; padding:0 !important;margin:0 0 8px !important;border-radius:0 !important;font-size:17px; } /* カテゴリー別アクセント */ .c-cost{--c:#C7480A;} .c-season{--c:#1E6FA8;} .c-damage{--c:#A8322B;} .c-materials{--c:#2E7D52;} .c-contractor{--c:#3E4C7A;} .c-subsidy{--c:#9A6B12;} /* ========================================================= ステップ / 注意喚起 / CTA帯（トップの色アクセント） ========================================================= */ .hg-steps{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px; list-style:none;margin:0;padding:0;counter-reset:hgstep; } .hg-step{ background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius); padding:22px 20px;position:relative; } .hg-step__n{ display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;margin:0 0 12px; background:var(--c,var(--hg-accent));color:#fff;font-weight:900;font-size:16px; } .hg-step__title{ display:block;font-size:15.5px;font-weight:900;margin:0 0 8px;line-height:1.6;color:var(--hg-ink); } .entry-content .hg-step__title{border:0 !important;background:transparent !important;padding:0 !important;margin:0 0 8px !important;} .hg-step__text{display:block;font-size:13px;line-height:1.85;color:var(--hg-muted);margin:0;} .hg-step--1{--c:#1E6FA8;} .hg-step--2{--c:#2E7D52;} .hg-step--3{--c:#C7480A;} .hg-step--4{--c:#3E4C7A;} /* 4枚が横に並ぶ幅ではカード間に山括弧を置き、順番に進む流れを見せる */ @media screen and (min-width:1024px){ .hg-steps{gap:28px;} .hg-step:not(:last-child)::after{ content:"";position:absolute;top:50%;right:-19px;width:10px;height:10px; border-top:2px solid var(--hg-line-2);border-right:2px solid var(--hg-line-2); transform:translateY(-50%) rotate(45deg); } } .hg-alert{ background:#fdf3f2;border:1px solid #eec9c6;border-left:5px solid #A8322B; border-radius:var(--hg-radius);padding:26px 30px; } .hg-alert__title{ display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900; color:#8E241D;margin:0 0 12px;background:transparent;border:0;padding:0; } .entry-content .hg-alert__title{border:0 !important;background:transparent !important;padding:0 !important;margin:0 0 12px !important;font-size:18px;} .hg-alert__title::before{ content:"!";flex:none;width:26px;height:26px;border-radius:50%; background:#A8322B;color:#fff;font-size:15px;font-weight:900; display:flex;align-items:center;justify-content:center; } .hg-alert p{font-size:14.5px;line-height:2;color:var(--hg-ink-2);margin:0 0 .9em;} .hg-alert p:last-child{margin-bottom:0;} .hg-alert__num{color:#A8322B;font-weight:900;} .hg-ctaband{background:var(--hg-navy);} .hg-ctaband__in{ max-width:var(--hg-wrap);margin:0 auto;padding:52px 24px 56px; box-sizing:border-box;text-align:center; } .hg-ctaband__title{ font-size:clamp(20px,2.6vw,27px);font-weight:900;color:#fff;margin:0 0 12px; background:transparent;border:0;padding:0;letter-spacing:.02em; } .entry-content .hg-ctaband__title{border:0 !important;background:transparent !important;padding:0 !important;margin:0 0 12px !important;color:#fff;} .hg-ctaband__text{font-size:15px;line-height:2;color:#dbe3ea;margin:0 0 26px;} .hg-ctaband__links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .hg-ctaband__links a{ display:inline-flex;align-items:center;min-height:48px;padding:0 26px; border-radius:4px;font-size:14.5px;font-weight:700; } .hg-ctaband__links a.is-main{background:var(--hg-accent);color:#fff;} .hg-ctaband__links a.is-main:hover{background:#c26a1c;color:#fff;} .hg-ctaband__links a.is-sub{border:1px solid #40525f;color:#dde5eb;} .hg-ctaband__links a.is-sub:hover{border-color:var(--hg-accent);color:var(--hg-accent);} /* ========================================================= 固定ページ用レイアウト（記事ページとは別の見せ方） ========================================================= */ body.page .article-header,body.page .entry-title, body.page .date-tags,body.page .post-date,body.page .post-update, body.page .sns-share,body.page .sns-share-message, body.page .sns-follow,body.page .sns-follow-message, body.page #toc,body.page .toc, body.page .entry-categories-tags,body.page .author-info, body.page .pager-post-navi,body.page #related-entries, body.page .eye-catch-wrap{display:none !important;} body.page #sidebar,body.page .sidebar{display:none !important;} body.page #main,body.page .main{ width:100% !important;max-width:100% !important;float:none !important; margin:0 !important;padding:0 !important;background:transparent;border:0; } body.page #content-in,body.page #content .wrap{ width:auto !important;max-width:100% !important;padding:0 !important;margin:0 !important; } body.page #content{margin-top:0;padding-top:0;} body.page .article{padding:0;} body.page .entry-content{margin:0;} body.page .entry-content > :first-child{margin-top:0;} body.page .breadcrumb{ max-width:var(--hg-wrap);margin:0 auto;padding:18px 24px 0; font-size:12px;color:var(--hg-muted-3);box-sizing:border-box; } /* ページ見出し帯 */ .hg-page-head{background:var(--hg-band);border-bottom:1px solid var(--hg-line);} .hg-page-head__in{ max-width:var(--hg-wrap);margin:0 auto;padding:44px 24px 40px;box-sizing:border-box; } .hg-page-head__title{ display:flex;align-items:center;gap:14px;margin:0 0 16px; font-size:clamp(26px,3.4vw,34px);font-weight:900;letter-spacing:.02em;color:var(--hg-ink); background:transparent;border:0;padding:0; } .entry-content .hg-page-head__title{ background:transparent !important;border:0 !important;padding:0 !important; margin:0 0 16px !important;border-radius:0 !important; } .hg-page-head__title::before{content:"";width:8px;height:32px;background:var(--hg-accent);flex:none;} .hg-page-head__lead{ font-size:15px;line-height:2.1;color:var(--hg-muted);max-width:780px;margin:0; } .hg-page-head__meta{font-size:12.5px;color:var(--hg-muted-3);margin:16px 0 0;} /* 固定ページ本文は読みやすい幅に絞る */ /* 上の余白はCocoon側にも約40pxあるので、こちらは持たせない */ .hg-page-body{max-width:840px;margin:-16px auto 0;padding:0 24px 72px;box-sizing:border-box;} /* 見出し帯の直後に余白が二重で乗るのを防ぐ（先頭要素の上マージンを消す） */ .hg-page-body > *:first-child{margin-top:0 !important;} /* wpautop がブロック要素の間に空の

を作るため、高さを持たせない */ .hg-page-body > p:empty,.entry-content .hg-page-body > p:empty{display:none !important;margin:0 !important;} .hg-page-body > h2{ font-size:21px !important;font-weight:900;line-height:1.6;color:var(--hg-ink); margin:2.4em 0 1em !important;padding:0 0 12px !important; background:transparent !important;border:0 !important; border-bottom:2px solid var(--hg-navy) !important;border-radius:0 !important; } .hg-page-body > h2:first-child{margin-top:0 !important;} .hg-page-body > h3{ font-size:17px !important;font-weight:700;color:var(--hg-ink); border:0 !important;border-left:3px solid var(--hg-accent) !important; padding:2px 0 2px 12px !important;margin:2em 0 .8em !important; } .hg-page-body p{font-size:15px;line-height:2.15;color:var(--hg-ink-2);} .hg-page-body ul,.hg-page-body ol{font-size:15px;line-height:2.1;color:var(--hg-ink-2);} /* 定義リスト（運営者情報など） */ .hg-dl{border-top:1px solid var(--hg-line);margin:0 0 8px;} .hg-dl__row{ display:grid;grid-template-columns:160px 1fr;gap:0; border-bottom:1px solid var(--hg-line); } .hg-dl__k{ background:var(--hg-band);padding:14px 18px;font-size:13.5px;font-weight:700;color:var(--hg-slate); } .hg-dl__v{padding:14px 18px;font-size:14.5px;color:var(--hg-ink-2);line-height:1.9;} /* Q&A */ .hg-qa{border:1px solid var(--hg-line);border-radius:var(--hg-radius);margin:0 0 14px;overflow:hidden;} .hg-qa__q{ display:flex;gap:12px;align-items:flex-start; background:var(--hg-band);padding:16px 20px;font-size:15.5px;font-weight:700;color:var(--hg-ink); margin:0;line-height:1.7; } .hg-qa__q::before{ content:"Q";flex:none;width:24px;height:24px;border-radius:3px; background:var(--hg-navy);color:#fff;font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center;margin-top:2px; } .hg-qa__a{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;margin:0;} .hg-qa__a::before{ content:"A";flex:none;width:24px;height:24px;border-radius:3px; background:var(--hg-accent);color:#fff;font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center;margin-top:2px; } .hg-qa__a > div{font-size:14.5px;line-height:2.05;color:var(--hg-ink-2);} .hg-qa__a p{margin:0 0 .9em;font-size:14.5px;} .hg-qa__a p:last-child{margin-bottom:0;} .hg-qa-group{margin:0 0 40px;} /* H2直下のセクション写真 */ .hg-photo{margin:1.4em 0 1.8em;padding:0;} .hg-photo img{ width:100%;height:auto;display:block; border-radius:var(--hg-radius);object-fit:cover; } /* 記事内の図解（コード描画のPNGをfigureで挿入） */ .hg-fig{margin:2.4em 0;padding:0;} .hg-fig img{width:100%;height:auto;display:block;border:1px solid var(--hg-line);border-radius:var(--hg-radius);} .hg-fig figcaption{ margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--hg-muted-2);text-align:center; } .entry-content .hg-fig figcaption{font-size:13.5px;color:var(--hg-muted-2);} /* 管理者ログイン時にカードへ出るCocoonのアクセス数表示（本日/週/月/全体）を隠す。 訪問者には元から表示されない。運営側の見た目を整えるための指定 */ .admin-pv,.admin-pv-by,.today-pv,.week-pv,.month-pv,.total-pv{display:none !important;} /* ========================================================= FAQ（カテゴリー別アコーディオン） details/summary を使いJSに依存しない。Cocoon側のJSと競合しない ========================================================= */ .hg-faq{margin:0 0 40px;} .hg-faq__cat{ border:1px solid var(--hg-line);border-radius:var(--hg-radius); margin:0 0 12px;overflow:hidden;background:#fff; } .hg-faq__cat[open]{border-color:var(--c,var(--hg-accent));} .hg-faq__btn{ display:flex;align-items:center;gap:14px; padding:18px 22px;cursor:pointer;list-style:none; background:var(--hg-band);transition:background .15s ease; } .hg-faq__btn::-webkit-details-marker{display:none;} .hg-faq__btn:hover{background:#eef2f5;} .hg-faq__cat[open] .hg-faq__btn{background:#fff;border-bottom:1px solid var(--hg-line);} .hg-faq__label{ flex:none;font-size:10.5px;font-weight:700;letter-spacing:.1em; color:#fff;background:var(--c,var(--hg-accent));border-radius:3px;padding:4px 10px; } .hg-faq__name{flex:1;font-size:16.5px;font-weight:900;color:var(--hg-ink);line-height:1.5;} .hg-faq__count{flex:none;font-size:12px;color:var(--hg-muted-3);} .hg-faq__btn::after{ content:"開く";flex:none;font-size:12px;font-weight:700;color:var(--hg-accent-deep); border:1px solid var(--hg-accent-line);border-radius:3px;padding:3px 12px; } .hg-faq__cat[open] .hg-faq__btn::after{content:"閉じる";} .hg-faq__body{padding:22px 22px 8px;} .hg-faq__body .hg-qa{margin-bottom:12px;} .hg-faq__body .hg-qa:last-child{margin-bottom:14px;} .hg-faq__more{ font-size:13.5px;color:var(--hg-slate);margin:0 0 6px;padding:12px 0 0; border-top:1px solid var(--hg-line); } .hg-faq__more a{color:var(--hg-accent-deep);border-bottom:1px solid var(--hg-accent-line);} @media screen and (max-width:600px){ .hg-faq__btn{flex-wrap:wrap;gap:8px 10px;padding:14px 16px;} .hg-faq__name{flex:1 1 100%;order:3;font-size:15.5px;} .hg-faq__count{order:2;} .hg-faq__body{padding:16px 14px 6px;} } /* ページ内リンク集 */ .hg-pagenav{ background:var(--hg-band);border:1px solid var(--hg-line);border-radius:var(--hg-radius); padding:20px 24px;margin:0 0 40px; } .hg-pagenav__title{font-size:13px;font-weight:900;color:var(--hg-slate);margin:0 0 12px;letter-spacing:.04em;} .hg-pagenav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;} .hg-pagenav a{font-size:13.5px;color:var(--hg-slate);border-bottom:1px solid var(--hg-line-2);} .hg-pagenav a:hover{color:var(--hg-accent-deep);border-bottom-color:var(--hg-accent);} /* ========================================================= お問い合わせフォーム ========================================================= */ .hg-form{ background:var(--hg-band);border:1px solid var(--hg-line); border-radius:var(--hg-radius);padding:28px 30px;margin:1.6em 0 2.4em; } .hg-form__row{margin:0 0 22px;display:flex;flex-direction:column;gap:7px;} .hg-form__label{font-weight:700;font-size:14.5px;color:var(--hg-ink);display:flex;align-items:center;gap:9px;} .hg-form__req{background:#B3261E;color:#fff;border-radius:3px;font-size:11px;font-weight:700;padding:.2em .6em;} .hg-form__opt{background:#8b98a5;color:#fff;border-radius:3px;font-size:11px;font-weight:700;padding:.2em .6em;} .hg-form__help{font-size:12.5px;color:var(--hg-muted-2);line-height:1.8;} .hg-form input[type="text"],.hg-form input[type="email"],.hg-form input[type="url"], .hg-form select,.hg-form textarea{ width:100%;box-sizing:border-box;border:1px solid var(--hg-line-2);border-radius:4px; background:#fff;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--hg-ink);line-height:1.7; } .hg-form input:focus,.hg-form select:focus,.hg-form textarea:focus{ border-color:var(--hg-accent);box-shadow:0 0 0 3px rgba(217,122,38,.15);outline:none; } .hg-form textarea{resize:vertical;min-height:170px;} .hg-form select{appearance:none;-webkit-appearance:none;padding-right:38px;} .hg-form__note{font-size:13px;color:var(--hg-muted);line-height:1.9;margin:0 0 20px;} .hg-form__hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;} .hg-form-msg{margin:0 0 1.6em;} .hg-form-msg--ok{background:#f1f8f3;border-color:#c3ddc9;} .hg-form-msg--ok .hg-note__title{color:#2E7D52;} .hg-btn{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:.8em 2em;border-radius:4px; font-weight:700;font-size:15px;border:0;cursor:pointer; background:var(--hg-accent-deep);color:#fff !important; transition:background .15s ease; } .hg-btn:hover{background:#8f470D;color:#fff !important;} .hg-form__submit .hg-btn{width:100%;max-width:340px;} /* ========================================================= footer ========================================================= */ .footer{background:var(--hg-navy);color:#c6d0d9;border:0;} .footer a{color:#8fa0af;} .footer a:hover{color:var(--hg-accent);} .footer .menu-footer li a{color:#8fa0af;font-size:12.5px;} /* 2026-08-04: フッターの面をおよそ3倍にして、下端に余裕を持たせる */ .footer #footer-in{padding-top:78px;padding-bottom:78px;} .footer .footer-bottom{padding-top:0;padding-bottom:0;} .footer .footer-bottom-logo{margin-bottom:26px;} .footer .navi-footer-in{padding:0;} /* 「運営者情報」はサイトマップの左。順序はWPのメニュー側（DOM）で入れ替えているので、 ここではCSSのorderを使わない（読み上げ順と表示順をそろえるため） */ .footer .menu-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;} /* テキストの上に薄い横線が出るので、フッター内の区切り線は出さない */ .footer-bottom{background:var(--hg-navy);color:#6d7f8f;border-top:0;} .footer #footer-in,.footer .footer-bottom,.footer .footer-bottom-content, .footer .navi-footer,.footer .navi-footer-in{border-top:0 !important;border-bottom:0 !important;} .footer-bottom a{color:#8fa0af;} .copyright{font-size:11.5px;color:#98a9b7;} /* ========================================================= 記事（投稿）ページ : サイドバーとSNSボタンを外して1カラムに ========================================================= */ body.single .sns-share,body.single .sns-share-message, body.single .sns-follow,body.single .sns-follow-message, body.single .sns-buttons,body.single .sns-share-buttons{display:none !important;} body.single #sidebar,body.single .sidebar{display:none !important;} body.single #main,body.single .main{ width:100% !important;max-width:100% !important;float:none !important;margin:0 auto !important; } body.single #content-in,body.single #content .wrap{ width:auto !important;max-width:var(--hg-wrap) !important;margin:0 auto !important; } body.single .article{max-width:820px;margin:0 auto;} body.single .entry-title{font-size:clamp(24px,3vw,32px);margin-bottom:18px;} body.single .entry-content{font-size:15.5px;} body.single .entry-content p{font-size:15.5px;line-height:2.2;color:var(--hg-ink-2);} .hg-source{font-size:12.5px;color:var(--hg-muted-2);border-top:1px solid var(--hg-line);padding-top:14px;margin-top:36px;} /* セクションごとの出典。記事末にまとめず、その内容を書いたH2の末尾に置く。 本文より一段小さくして、読みの流れを切らない見え方にする。 */ .hg-cite, .entry-content .hg-cite{ font-size:12.5px;line-height:1.9;color:var(--hg-muted-2); margin:18px 0 0;padding-left:12px;border-left:3px solid var(--hg-line); } .hg-cite a, .entry-content .hg-cite a{color:var(--hg-muted-2);text-decoration:underline;text-underline-offset:2px;} /* 出典のリンク名や強調の一文は「国税庁「No.1379 修繕費とならないものの判定」」のように 区切りのない長い語になる。SPの幅では折り返し先がなく数pxはみ出すので、 語の途中でも折り返してよいことにする（日本語なので可読性はほぼ変わらない）。 */ .hg-cite, .entry-content .hg-cite, .hg-cite a, .entry-content .hg-cite a, .entry-content p, .entry-content li, .entry-content strong{overflow-wrap:anywhere;} /* ---------- 記事本文の太字を暗い赤に（2026-08-23 ユーザー指示） ---------- 記事（single）の本文中の だけ色を付ける。太さはそのまま。 #A8322B は既存のアラート色と同じ暗い赤で、白地の上で 6.6:1（AA 合格）。 出典・免責・業者一覧の要約・リンク内の太字は、もともと色を持っている行なので 従来の色のまま残す。 */ body.single .entry-content strong{color:#A8322B;} body.single .entry-content .hg-cite strong, body.single .entry-content .hg-source strong, body.single .entry-content a strong{color:inherit;} /* 業者一覧の要約だけは、基盤CSSと同じ本文色を明示で戻す （color:inherit だと親の --hg-ink-2 を拾ってしまい、従来の --hg-ink から変わるため） */ body.single .entry-content .hg-gyousha__summary strong{color:var(--hg-ink);} /* 出典行だけは禁則処理も解く。overflow-wrap では「）」」のような閉じ括弧の連なりが 行頭に来られず（禁則）、Chrome で数px はみ出すため。脚注サイズの行なので読みやすさへの影響は小さい。 */ .hg-cite, .entry-content .hg-cite, .hg-cite a, .entry-content .hg-cite a{line-break:anywhere;} .hg-cite a:hover, .entry-content .hg-cite a:hover{color:var(--hg-accent-deep);} /* 目次は初期状態でたたむ（クリックで開く）。 開閉は functions.php の is-open トグルだけで制御する。Cocoon 標準の チェックボックス開閉（.toc-checkbox:checked～）が並走すると1回目の クリックが空振りするため、ここでは #toc 付きセレクタと !important で Cocoon 側の表示ルール・[閉じる]ラベルを無効化している */ /* 目次ボックスは中央寄せ（Cocoonの .toc は display:table＝内容幅なので左右autoで中央に置く。 ここを margin:2em 0 にすると Cocoon の .toc-center より詳細度が高く左寄せに戻るので注意） */ body.single #toc,body.page #toc{ border:1px solid var(--hg-line);border-radius:var(--hg-radius); background:var(--hg-band);padding:0;margin:2em auto; } body.single .toc-title,body.page .toc-title{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 20px;margin:0;font-size:14.5px;font-weight:900;color:var(--hg-ink);cursor:pointer; } body.single #toc .toc-title::after{ content:"開く";font-size:12px;font-weight:700;color:var(--hg-accent-deep); border:1px solid var(--hg-accent-line);border-radius:3px;padding:3px 12px; } body.single #toc.is-open .toc-title::after,body.page #toc.is-open .toc-title::after{content:"閉じる";} body.single #toc .toc-content,body.page #toc .toc-content{ display:none !important;padding:0 20px 16px; } body.single #toc.is-open .toc-content,body.page #toc.is-open .toc-content{ display:block !important;visibility:visible !important;height:auto !important;opacity:1 !important; } body.single #toc .toc-list,body.page #toc .toc-list{margin:0;} body.single #toc a,body.page #toc a{font-size:13.5px;color:var(--hg-slate);} body.single #toc a:hover,body.page #toc a:hover{color:var(--hg-accent-deep);} /* ========================================================= アーカイブ（カテゴリー等）: サイドバーを外して1カラムに ========================================================= */ body.archive #sidebar,body.archive .sidebar{display:none !important;} body.archive #main,body.archive .main{ width:100% !important;max-width:100% !important;float:none !important;margin:0 auto !important; } body.archive #content-in,body.archive #content .wrap{ width:auto !important;max-width:var(--hg-wrap) !important;margin:0 auto !important; } /* 記事カードの一覧は読みやすい幅に絞って中央へ */ body.archive #list{max-width:860px;margin-left:auto;margin-right:auto;} body.archive .archive-title{font-size:clamp(22px,3vw,28px);} /* ========================================================= front page only : Cocoonの記事用パーツを止めて全幅にする ========================================================= */ body.home .article-header,body.home .entry-title, body.home .date-tags,body.home .post-date,body.home .post-update, body.home .sns-share,body.home .sns-share-message, body.home .sns-follow,body.home .sns-follow-message, body.home #toc,body.home .toc,body.home .breadcrumb, body.home .entry-categories-tags,body.home .author-info, body.home .pager-post-navi,body.home #related-entries, body.home .eye-catch-wrap{display:none !important;} body.home #sidebar,body.home .sidebar{display:none !important;} body.home #main,body.home .main{ width:100% !important;max-width:100% !important;float:none !important; margin:0 !important;padding:0 !important;background:transparent;border:0; } body.home #content-in,body.home #content .wrap{ width:auto !important;max-width:100% !important;padding:0 !important;margin:0 !important; } body.home #content{margin-top:0;padding-top:0;} body.home .article{padding:0;} body.home .entry-content{margin:0;} body.home .entry-content > :first-child{margin-top:0;} /* ========================================================= responsive ========================================================= */ /* max-width は各要素側の指定を尊重する（ここで100%にすると中央寄せが壊れる） */ .hg-hero,.hg-section,.hg-calendar,.hg-card,.hg-note,.hg-cards,.hg-points,.hg-form, .hg-acard,.hg-point{box-sizing:border-box;} @media screen and (max-width:1023px){ .hg-cards,.hg-points{grid-template-columns:repeat(2,1fr);} .hg-steps{grid-template-columns:repeat(2,1fr);} } @media screen and (max-width:834px){ body.home #content-in,body.home #content .wrap, body.home #main,body.home .main, body.home .article,body.home .entry-content, body.page #content-in,body.page #content .wrap, body.page #main,body.page .main, body.page .article,body.page .entry-content{width:auto !important;max-width:100% !important;} .hg-mv__in{grid-template-columns:1fr;} .hg-mv__vlabel{writing-mode:horizontal-tb;border-right:0;border-bottom:1px solid #e6ded2; padding:14px 20px;justify-self:stretch;letter-spacing:.1em;} .hg-mv__main{padding:36px 20px 32px;border-right:0;border-bottom:1px solid #e6ded2;} .hg-mv__index{flex-direction:row;flex-wrap:wrap;} .hg-mv__index li{flex:1 1 100%;border-bottom:1px solid #e6ded2;} .hg-mv__index a{padding:16px 20px;} .hg-cards--cat{grid-template-columns:1fr;} .hg-page-head__in{padding:32px 20px 28px;} .hg-page-body{padding:36px 20px 56px;} .hg-dl__row{grid-template-columns:1fr;} .hg-dl__k{padding:10px 16px;} .hg-dl__v{padding:12px 16px;} .hg-section{padding:48px 20px;} .hg-band > .hg-section{padding-top:44px;padding-bottom:48px;} .hg-calendar{padding:20px 18px;} .hg-calendar__grid{grid-template-columns:repeat(6,1fr);} } @media screen and (max-width:600px){ .hg-cards,.hg-points,.hg-cards--cat,.hg-steps{grid-template-columns:1fr;} .hg-hero__actions{gap:16px;flex-direction:column;align-items:flex-start;} .hg-alert{padding:20px 18px;} .hg-ctaband__links a{width:100%;justify-content:center;} } @media screen and (max-width:480px){ body{font-size:15px;} .entry-content h2,.article h2{font-size:19px;padding:12px 16px;} .entry-content h3,.article h3{font-size:17px;} .hg-page-body > h2{font-size:19px !important;} } /* ========================================================= accessibility ========================================================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } .hg-sr-only{ position:absolute !important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ========================================================= トップページ v6（2026-08-04） REASON=濃紺の2カラム、FLOW=縦タイムライン、CATEGORY/GUIDE=行リスト、 CTA=山のシルエット。文言は変えずに見た目だけ差し替える。 ========================================================= */ /* ---------- REASON：濃紺の2カラム ---------- */ .hg-band--reason{background:var(--hg-navy);border-top:0;} .hg-band--reason > .hg-section{ display:grid;grid-template-columns:330px 1fr;column-gap:64px; padding-top:84px;padding-bottom:84px;align-items:start; } .hg-reason__head{grid-column:1;} .hg-band--reason .hg-kicker{color:#7fa5c4;margin:0 0 18px;} .hg-band--reason .hg-section-title{ color:#fff;font-size:clamp(24px,2.6vw,32px);line-height:1.55;margin:0 0 18px; } .hg-band--reason .hg-section-lead{color:#9db3c4;margin:0;font-size:14px;line-height:2;} .hg-band--reason .hg-points{grid-column:2;grid-template-columns:1fr;gap:0;} .hg-band--reason .hg-point{ background:transparent;border:0;border-top:1px solid rgba(255,255,255,.14); border-radius:0;padding:30px 0;display:grid;grid-template-columns:104px 1fr; column-gap:24px;align-items:start;overflow:visible; } .hg-band--reason .hg-point:first-child{border-top:0;padding-top:0;} .hg-band--reason .hg-point::after{display:none;} .hg-band--reason .hg-point__no{ grid-row:1 / span 2;background:transparent;padding:0;margin:0;white-space:nowrap; font-size:23px;font-weight:900;letter-spacing:.01em;color:#8fb7d6;line-height:1.2; } .hg-band--reason .hg-point--a, .hg-band--reason .hg-point--b, .hg-band--reason .hg-point--c{--c:#8fb7d6;--cbg:transparent;} .hg-band--reason .hg-point__title{color:#fff;font-size:17px;margin:0 0 10px;} .hg-band--reason .hg-point__text{color:#a9bccb;font-size:13px;line-height:2;} /* ---------- FLOW：縦のタイムライン ---------- */ .hg-section--flow{text-align:center;} .hg-section--flow .hg-section-title{font-size:clamp(22px,2.4vw,28px);} .hg-section--flow .hg-steps{ grid-template-columns:1fr;gap:0;text-align:left; max-width:760px;margin:38px auto 0;position:relative; } .hg-section--flow .hg-step{ background:transparent;border:0;border-radius:0;padding:0 0 34px 74px;position:relative; } .hg-section--flow .hg-step:last-child{padding-bottom:0;} /* 丸をつなぐ縦線 */ .hg-section--flow .hg-step:not(:last-child)::before{ content:"";position:absolute;left:21px;top:44px;bottom:0;width:1px;background:var(--hg-line-2); } .hg-section--flow .hg-step::after{display:none !important;} .hg-section--flow .hg-step__n{ position:absolute;left:0;top:0;width:44px;height:44px;margin:0; background:var(--hg-navy);font-size:15px; } .hg-section--flow .hg-step--1 .hg-step__n{background:#16232f;} .hg-section--flow .hg-step--2 .hg-step__n{background:#22384a;} .hg-section--flow .hg-step--3 .hg-step__n{background:#2f4c65;} .hg-section--flow .hg-step--4 .hg-step__n{background:#54718c;} .hg-section--flow .hg-step__title{font-size:17px;margin:9px 0 10px;} .hg-section--flow .hg-step__text{font-size:13.5px;line-height:2;} /* ---------- CATEGORY / GUIDE：写真をやめて行リストにする ---------- */ .hg-section--rows .hg-cards, .hg-section--rows .hg-cards--cat{grid-template-columns:repeat(2,1fr);gap:0 44px;} .hg-section--rows.is-single .hg-cards{grid-template-columns:1fr;} .hg-section--rows .hg-catcard, .hg-section--rows .hg-card{ border:0;border-top:1px solid var(--hg-line);border-radius:0;background:transparent; box-shadow:none;padding:24px 34px 24px 0;position:relative;display:block; } .hg-section--rows .hg-catcard:hover, .hg-section--rows .hg-card:hover{box-shadow:none;transform:none;background:#fff;} .hg-section--rows .hg-catcard::after, .hg-section--rows .hg-card::after{ content:"→";position:absolute;right:6px;top:50%;transform:translateY(-50%); color:var(--hg-muted-3);font-size:15px; } .hg-section--rows .hg-catcard:hover::after, .hg-section--rows .hg-card:hover::after{color:var(--hg-accent);} .hg-section--rows .hg-catcard__media{display:none;} .hg-section--rows .hg-catcard__body{padding:0;} .hg-section--rows .hg-catcard__label{ font-size:10.5px;letter-spacing:.14em;color:var(--hg-muted-3);margin:0 0 7px; } .hg-section--rows .hg-catcard__title, .hg-section--rows .hg-card__title{font-size:16px;margin:0 0 6px;} .hg-section--rows .hg-catcard__text, .hg-section--rows .hg-card__text{font-size:12.5px;color:var(--hg-muted);} .hg-section--rows .hg-card--accent{border-left:0;} .hg-section--rows .hg-card__head{margin-bottom:6px;} /* GUIDE は1列。上下に太い罫を入れて塊に見せる */ .hg-section--guide .hg-cards{grid-template-columns:1fr;gap:0;border-top:2px solid var(--hg-ink);} .hg-section--guide .hg-card{ display:grid;grid-template-columns:230px 1fr;column-gap:32px;align-items:baseline; padding:26px 34px 26px 0; } .hg-section--guide .hg-card__title{font-size:17px;margin:0;} .hg-section--guide .hg-card__text{font-size:12.5px;} /* ---------- COLUMN：先頭1件を大きく、右に4件 ---------- */ .hg-columns--feature{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:start;} .hg-acard--lead{border:0;border-radius:0;background:transparent;} .hg-acard--lead:hover{box-shadow:none;} .hg-acard--lead .hg-acard__media{aspect-ratio:16/10;border-radius:4px;} .hg-acard--lead .hg-acard__body{padding:18px 0 0;} .hg-acard--lead .hg-acard__title{font-size:21px;font-weight:900;line-height:1.55;margin:0 0 10px;} .hg-acard--lead .hg-acard__text{display:block;font-size:13px;line-height:1.95;color:var(--hg-muted);margin:0;} .hg-columns__rest{list-style:none;margin:0;padding:0;} .hg-columns__rest > li{border-top:1px solid var(--hg-line);} .hg-columns__rest > li:first-child{border-top:0;} .hg-acard--row{ display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center; border:0;border-radius:0;background:transparent;padding:16px 0; } .hg-acard--row:hover{box-shadow:none;} .hg-acard--row .hg-acard__media{aspect-ratio:16/10;border-radius:3px;} .hg-acard--row .hg-acard__body{padding:0;} .hg-acard--row .hg-acard__meta{margin-bottom:5px;} .hg-acard--row .hg-acard__title{font-size:13.5px;line-height:1.7;} @media screen and (max-width:900px){ .hg-columns--feature{grid-template-columns:1fr;gap:24px;} } /* ---------- v6のレスポンシブ（既存のメディアクエリより後ろにあるので、ここで畳む） ---------- */ /* ヘッダーのナビは flex-wrap:nowrap なので、狭い画面では画面幅を超えて ページ全体に横スクロールが出る。タブレット以下では隠し、 Cocoonのスライドインメニューと下部ナビに任せる。 */ @media screen and (max-width:1023px){ #navi{display:none !important;} #header-container-in{padding:0 16px;min-height:58px;gap:12px;} .logo-header .site-name-text{font-size:15.5px;} } @media screen and (max-width:900px){ .hg-band--reason > .hg-section{grid-template-columns:1fr;column-gap:0;row-gap:26px;padding:56px 24px;} .hg-band--reason .hg-points{grid-column:1;} .hg-band--reason .hg-point{grid-template-columns:1fr;row-gap:8px;padding:22px 0;} .hg-band--reason .hg-point__no{grid-row:auto;font-size:19px;} .hg-section--rows .hg-cards, .hg-section--rows .hg-cards--cat{grid-template-columns:1fr;gap:0;} .hg-section--guide .hg-card{grid-template-columns:1fr;row-gap:8px;} .hg-section--flow .hg-steps{margin-top:26px;} .hg-section--flow .hg-step{padding-left:58px;} .hg-section--flow .hg-step__n{width:36px;height:36px;font-size:14px;} .hg-section--flow .hg-step:not(:last-child)::before{left:17px;top:38px;} .hg-mv__in{grid-template-columns:1fr;} .hg-mv__vlabel{display:none;} .hg-mv__main{padding:52px 24px 44px;border-right:0;} .hg-mv__index{border-top:1px solid rgba(255,255,255,.18);} .footer #footer-in{padding-top:52px;padding-bottom:52px;} } /* ---------- CTA帯：下端に山のシルエット ---------- */ .hg-ctaband{position:relative;overflow:hidden;} .hg-ctaband::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none; background:no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 78 L150 34 L300 92 L470 22 L640 96 L800 48 L960 100 L1090 56 L1200 88 L1200 120 Z' fill='%230e1a25'/%3E%3C/svg%3E"); } .hg-ctaband__in{position:relative;z-index:1;} /* ========================================================= 業者一覧（/gyousha/ と /gyousha/<市町村>/） ========================================================= */ /* 市町村チップ */ .hg-munis{margin:22px 0 8px;} .hg-munis__row{ display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start; padding:14px 0;border-top:1px solid var(--hg-line); } .hg-munis__row:last-child{border-bottom:1px solid var(--hg-line);} .hg-munis__gyo{ font-size:13px;font-weight:800;color:var(--hg-accent-deep); letter-spacing:.04em;padding-top:5px;display:block; } /* 行ラベルを出さない一列版（市町村ページの「ほかの市町村から探す」） */ .hg-munis__row--plain{grid-template-columns:1fr;} .hg-munis__list{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;} .hg-munis__list li{margin:0;padding:0;list-style:none;} .hg-muni{ display:block;font-size:13px;line-height:1.5;padding:5px 10px;border-radius:4px; border:1px solid var(--hg-line);background:#fbfcfd;color:var(--hg-muted-2); text-decoration:none;white-space:nowrap; } a.hg-muni.is-ready{ border-color:var(--hg-accent);background:#fff;color:var(--hg-accent-deep);font-weight:700; } a.hg-muni.is-ready:hover{background:var(--hg-accent);color:#fff;} .hg-sec--munis .hg-sec__more{margin-top:18px;font-size:14px;} /* 本文中の記事リンクは、リンクだと一目で分かる装飾にする */ .hg-page-body p > a[href^="/"], .hg-page-body li > a[href^="/"], .hg-gyousha__summary a[href^="/"]{ color:var(--hg-accent-deep);font-weight:700; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px; text-decoration-color:var(--hg-accent); } .hg-page-body p > a[href^="/"]::after, .hg-page-body li > a[href^="/"]::after{ content:"\203A";margin-left:4px;font-weight:900; } .hg-page-body p > a[href^="/"]:hover, .hg-page-body li > a[href^="/"]:hover{background:var(--hg-accent-bg);} /* 業者カード */ .hg-gyousha{ border:1px solid var(--hg-line);border-top:4px solid var(--hg-accent); border-radius:6px;padding:26px 26px 12px;margin:0 0 42px;background:#fff; box-shadow:0 1px 3px rgba(22,35,47,.06); } /* 連番はCSSカウンターで振る。Cocoonの目次機能が見出し内のHTMLを に置き換えてしまうため、マークアップでは持たせない。 */ .hg-page-body{counter-reset:hg-gyousha-no;} .hg-gyousha{counter-increment:hg-gyousha-no;} .hg-gyousha__name{ display:flex !important;align-items:center;gap:12px; font-size:20px !important;font-weight:900;line-height:1.5;margin:0 0 18px !important; padding:0 0 14px !important;border:0 !important; border-bottom:1px solid var(--hg-line) !important;color:var(--hg-ink); } .hg-gyousha__name::before{ content:counter(hg-gyousha-no,decimal-leading-zero); flex:none;display:inline-flex;align-items:center;justify-content:center; min-width:32px;height:30px;padding:0 7px;border-radius:4px; background:var(--hg-navy);color:#fff;font-size:14px;font-weight:900;letter-spacing:.02em; } .hg-gyousha__shot{display:block;margin:0 0 18px;border:1px solid var(--hg-line);border-radius:4px;overflow:hidden;} .hg-gyousha__shot img{display:block;width:100%;height:auto;} .hg-gyousha__toc{margin:0 0 34px;padding:18px 22px;background:var(--hg-band);border-radius:6px;} .hg-gyousha__toc li{margin:0 0 6px;} .hg-gyousha__meta{border-top:1px solid var(--hg-line);margin:0;padding:0;} .hg-gyousha__meta dt{ font-size:12.5px;font-weight:800;color:var(--hg-accent-deep); letter-spacing:.03em;padding:12px 0 0;margin:0; } .hg-gyousha__meta dd{ font-size:14px;line-height:1.9;color:var(--hg-ink-2);margin:0;padding:2px 0 12px; border-bottom:1px dashed var(--hg-line);word-break:break-all; } .hg-gyousha__meta dd:last-child{border-bottom:0;} /* 各社カードの「公式サイトを見る」ボタン */ .hg-gyousha__cta{margin:18px 0 0;} /* 白文字とのコントラストは約5.4:1（WCAG AA）。濃紺より明るい青にしている */ .hg-btn--site{ min-height:46px;padding:.7em 1.8em;font-size:14.5px; background:#1E6FA8;color:#fff !important; } .hg-btn--site::after{content:"\203A";margin-left:10px;font-weight:900;} .hg-btn--site:hover{background:#175882;color:#fff !important;} .entry-content .hg-gyousha__cta{margin:18px 0 0;} @media screen and (max-width:640px){ .hg-btn--site{width:100%;} } /* 出典が公式サイトであることの控えめな注記 */ .hg-gyousha__verified{ font-size:11.5px;line-height:1.8;color:var(--hg-muted-3); margin:10px 0 14px;padding-top:10px;border-top:1px dotted var(--hg-line); } .entry-content .hg-gyousha__verified{color:var(--hg-muted-3);font-size:11.5px;} @media (max-width:640px){ .hg-gyousha{padding:18px 16px 6px;} .hg-gyousha__name{font-size:17px !important;} .hg-munis__row{grid-template-columns:1fr;gap:6px;} .hg-munis__gyo{padding-top:0;} } /* ========================================================= 色の上書き対策（最後に置く） Cocoonの `.entry-content p` が本文色を上書きするため、 濃色背景に載せる文字は必ずここで指定し直す。 ========================================================= */ .entry-content .hg-ctaband__text{color:#dbe3ea;font-size:15px;} .entry-content .hg-ctaband__title{color:#fff;} .entry-content .hg-mv__tag{color:#fff;font-size:12px;} .entry-content .hg-mv__lead{color:var(--hg-ink-2);font-size:15.5px;line-height:2.05;} .entry-content .hg-mv__vlabel{color:var(--hg-muted-2);font-size:12px;} .entry-content .hg-alert p{color:var(--hg-ink-2);font-size:14.5px;line-height:2;} .entry-content .hg-point__no{color:var(--c,var(--hg-accent-deep));font-size:11.5px;} .entry-content .hg-point__text{color:var(--hg-muted);font-size:14px;line-height:1.9;} /* トップv6：濃紺のREASONは白文字なので、Cocoonの上書きより後ろで指定し直す */ .entry-content .hg-band--reason .hg-section-title{color:#fff;} .entry-content .hg-band--reason .hg-section-lead{color:#9db3c4;font-size:14px;} .entry-content .hg-band--reason .hg-kicker{color:#7fa5c4;} .entry-content .hg-band--reason .hg-point__no{color:#8fb7d6;font-size:23px;} .entry-content .hg-band--reason .hg-point__title{color:#fff;font-size:17px;} .entry-content .hg-band--reason .hg-point__text{color:#a9bccb;font-size:13px;line-height:2;} .entry-content .hg-mv__lead{color:#d7e2ea;font-size:15.5px;line-height:2.05;} .entry-content .hg-mv__vlabel{color:#9db3c4;font-size:12px;} .entry-content .hg-section--flow .hg-step__text{color:var(--hg-muted);font-size:13.5px;line-height:2;} .entry-content .hg-section--rows .hg-catcard__text, .entry-content .hg-section--rows .hg-card__text{color:var(--hg-muted);font-size:12.5px;} .entry-content .hg-section--rows .hg-catcard__label{color:var(--hg-muted-3);font-size:10.5px;} .entry-content .hg-card__text{color:var(--hg-muted);font-size:13.5px;line-height:1.85;} .entry-content .hg-section-lead{color:var(--hg-muted-2);font-size:14.5px;} .entry-content .hg-kicker{color:var(--hg-accent-deep);font-size:11px;margin:0 0 10px;} .entry-content .hg-catcard__text{color:var(--hg-muted);font-size:13.5px;} .entry-content .hg-step__text{color:var(--hg-muted);font-size:13.5px;line-height:1.9;} .entry-content .hg-page-head__lead{color:var(--hg-muted);font-size:15px;} .entry-content .hg-note p{color:var(--hg-ink-2);font-size:14.5px;} .entry-content .hg-gyousha__summary{color:var(--hg-ink-2);font-size:14.5px;line-height:2.05;margin:0 0 15px;} .entry-content .hg-gyousha__summary:last-of-type{margin-bottom:20px;} .entry-content .hg-gyousha__summary strong{color:var(--hg-ink);font-weight:800;} .entry-content .hg-sec--munis .hg-sec__lead{color:var(--hg-muted);font-size:14.5px;} .entry-content .hg-munis__list li{font-size:13px;line-height:1.5;} .hg-ctaband__links a.is-main{color:#fff !important;} .hg-ctaband__links a.is-sub{color:#e4ebf1 !important;} .hg-ctaband__links a.is-sub:hover{color:var(--hg-accent) !important;} .hg-mv__actions a.is-main{color:#fff !important;} /* ============================================================ 塗装カレンダー（/tosou-calendar/）2026-08-05 ============================================================ */ .hg-cal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px;} .entry-content .hg-cal{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;margin:0 0 6px;} .entry-content .hg-cal th,.entry-content .hg-cal td{border:1px solid var(--hg-line);padding:7px 4px;text-align:center;} .entry-content .hg-cal thead th{background:var(--hg-navy);color:#fff;font-size:12.5px;font-weight:700;padding:8px 4px;} .entry-content .hg-cal thead th:first-child{text-align:left;padding-left:12px;min-width:88px;} .entry-content .hg-cal thead th:last-child{min-width:74px;} .entry-content .hg-cal tbody th{background:#f6f8fa;text-align:left;padding-left:12px;font-weight:700; font-size:13.5px;color:var(--hg-ink);white-space:nowrap;} .entry-content .hg-cal td{font-size:15px;font-weight:800;line-height:1.3;white-space:nowrap;} .entry-content .hg-cal td:last-child{font-size:12.5px;font-weight:700;color:var(--hg-ink-2);} .entry-content .hg-cal--best{background:#e8f3ec;color:#1d6b40;} .entry-content .hg-cal--ok{background:#f3f7ea;color:#5b6f22;} .entry-content .hg-cal--lim{background:#fdf3e4;color:#8a5a12;} .entry-content .hg-cal--no{background:#f2f4f6;color:#8d97a1;} .hg-cal__h{display:inline-block;font-size:9.5px;font-weight:700;line-height:1; background:#2b6ea8;color:#fff;border-radius:2px;padding:2px 3px;margin-left:2px;vertical-align:middle;} .entry-content .hg-page-head__meta{color:var(--hg-muted);font-size:13px;margin:8px 0 0;} @media screen and (max-width:834px){ .entry-content .hg-cal{font-size:13px;} .entry-content .hg-cal td{font-size:14px;} } /* ============================================================ 費用シミュレーター（[hg_cost_sim]）2026-08-05 ============================================================ */ .hg-sim{border:1px solid var(--hg-line);border-radius:8px;overflow:hidden;margin:26px 0 30px;background:#fff;} .hg-sim__hd{background:var(--hg-navy);color:#fff;padding:15px 20px;} .hg-sim__hd b{display:block;font-size:17px;font-weight:800;letter-spacing:.01em;} .entry-content .hg-sim__hd span{display:block;color:#d6e0e9;font-size:12.5px;margin-top:4px;line-height:1.7;} .hg-sim__body{padding:20px;} .hg-sim__row{margin:0 0 16px;} .entry-content .hg-sim__row > label{display:block;font-size:13.5px;font-weight:700;color:var(--hg-ink);margin:0 0 7px;} .hg-sim__opts{display:flex;flex-wrap:wrap;gap:8px;} .hg-sim__opts button{appearance:none;border:1px solid var(--hg-line);background:#fff;border-radius:6px; padding:9px 14px;font-size:13.5px;font-family:inherit;color:var(--hg-ink-2);cursor:pointer;line-height:1.4;} .hg-sim__opts button:hover{border-color:var(--hg-accent);color:var(--hg-accent-deep);} .hg-sim__opts button[aria-pressed="true"]{background:var(--hg-accent-deep);border-color:var(--hg-accent-deep); color:#fff;font-weight:700;} .hg-sim__out{background:#f6f8fa;border-top:1px solid var(--hg-line);padding:18px 20px;} .entry-content .hg-sim__label{font-size:12.5px;color:var(--hg-muted);margin:0 0 4px;} .entry-content .hg-sim__val{font-size:26px;font-weight:900;color:var(--hg-accent-deep);margin:0 0 10px;line-height:1.3; font-feature-settings:"tnum";} .entry-content .hg-sim__val small{font-size:15px;font-weight:700;} .entry-content .hg-sim__break{font-size:13px;color:var(--hg-ink-2);margin:0 0 4px;line-height:1.9;} .entry-content .hg-sim__note{font-size:12px;color:var(--hg-muted);margin:12px 0 0;line-height:1.85;} .hg-sim__bars{margin:12px 0 0;} .hg-sim__bar{display:flex;align-items:center;gap:8px;margin:0 0 5px;font-size:12.5px;} .hg-sim__bar i{flex:0 0 136px;font-style:normal;color:var(--hg-muted);font-size:12px;line-height:1.5;} .hg-sim__bar u{flex:1;height:9px;background:#e4e9ee;border-radius:5px;text-decoration:none;overflow:hidden;display:block;} .hg-sim__bar u b{display:block;height:100%;background:var(--hg-accent);border-radius:5px;} .hg-sim__bar em{flex:0 0 84px;font-style:normal;text-align:right;color:var(--hg-ink-2);font-feature-settings:"tnum";} @media screen and (max-width:600px){ .entry-content .hg-sim__val{font-size:22px;} .hg-sim__bar i{flex:0 0 104px;font-size:11px;} .hg-sim__bar em{flex:0 0 74px;} } /* 記事冒頭の最終更新日（HG UPDATED） */ .entry-content .hg-updated{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px; font-size:12.5px;color:var(--hg-muted);margin:0 0 22px;padding:0 0 12px; border-bottom:1px solid var(--hg-line);line-height:1.7;} .entry-content .hg-updated span{color:var(--hg-muted-2);} .entry-content .hg-updated a{color:var(--hg-accent-deep);text-decoration:underline;} /* ============================================================ 行リストのカードを「面」にする（2026-08-05 ユーザー指摘） 背景と同化していたのと、テキストが枠に張り付いていたのを直す。 対象: トップの TOOLS / CATEGORY / GUIDE ============================================================ */ /* カード同士の間隔。これまでは罫線1本で仕切っていたので縦の間隔が0だった */ .hg-section--rows .hg-cards, .hg-section--rows .hg-cards--cat{grid-template-columns:repeat(2,1fr);gap:16px 24px;} .hg-section--rows .hg-catcard, .hg-section--rows .hg-card{ background:#fff; border:1px solid #dfe5eb; border-top:1px solid #dfe5eb; /* 罫線1本だった名残を打ち消す */ border-radius:6px; /* 右は矢印のぶんを空ける。左は色帯のぶんを見込む */ padding:20px 44px 20px 20px; box-shadow:0 1px 2px rgba(22,35,47,.04); } /* カテゴリー色を左端の帯として残す（面になったぶん、色で見分けやすくする） */ .hg-section--rows .hg-card--accent, .hg-section--rows .hg-catcard{border-left:4px solid var(--c,var(--hg-accent));} .hg-section--rows .hg-catcard:hover, .hg-section--rows .hg-card:hover{ background:#fff; border-color:var(--hg-accent); border-left-color:var(--c,var(--hg-accent)); box-shadow:0 3px 12px rgba(22,35,47,.09); transform:none; } .hg-section--rows .hg-catcard::after, .hg-section--rows .hg-card::after{right:16px;} /* 淡い色の帯の上では、枠線もわずかに色を寄せる */ .hg-band--warm .hg-section--rows .hg-catcard, .hg-band--warm .hg-section--rows .hg-card{border-color:#e7ded1;} .hg-band--warm .hg-section--rows .hg-card--accent, .hg-band--warm .hg-section--rows .hg-catcard{border-left-color:var(--c,var(--hg-accent));} /* GUIDE は1列。上の太罫はカードが面になったので不要 */ .hg-section--guide .hg-cards{grid-template-columns:1fr;gap:12px;border-top:0;} /* 見出しと本文を横に並べるGUIDEでは、縦積み用の .hg-card__head の下マージンが 行の下側に残り、中身が上に寄って見える。ここでは打ち消す。 */ .hg-section--guide .hg-card__head{margin-bottom:0;} /* .hg-card__text は

なので Cocoon 本体の段落下マージン（22.5px）が付く。 そのままだとカードの下だけ余白が増え、中身が上に寄る。TOOLS と GUIDE が該当 （CATEGORY の .hg-catcard__text は なので影響なし）。 */ .hg-section--rows .hg-card__text{margin-bottom:0;} .hg-section--guide .hg-card{ grid-template-columns:230px 1fr;column-gap:28px;align-items:baseline; padding:22px 44px 22px 20px; } /* 本文と見出しの間も少し空ける */ .hg-section--rows .hg-catcard__title, .hg-section--rows .hg-card__title{margin:0 0 8px;} .hg-section--guide .hg-card__title{margin:0;} .hg-section--rows .hg-catcard__text, .hg-section--rows .hg-card__text{line-height:1.9;} @media screen and (max-width:834px){ .hg-section--rows .hg-cards, .hg-section--rows .hg-cards--cat{grid-template-columns:1fr;gap:12px;} .hg-section--guide .hg-card{grid-template-columns:1fr;row-gap:8px;} } /* wpautop が hg-note の見出しspanと本文pのあいだに空の

を差し込む（記事側で有効なため）。 いまは見出しのマージンと相殺されて見た目には出ていないが、余白計算の邪魔になるので消す。 */ .entry-content p:empty{display:none;} /* ============================================================ v7 POP 2026-09-06 cybozu.co.jp のデザインを参照して全面刷新（本文テキストは変更なし）。 参考にしたのは次の5点。 1. セクション見出し＝英字を大きく、日本語をその下に置く 2. 帯はグラデーションの面。そこに白いカードを浮かせる 3. タグ・ボタン・チップはピル型、カードは角丸14px 4. ヘッダー下端に4色のストライプ 5. フッターは濃いスレート、上下2段 色は「塗料の色見本」として6色を持たせ、基調はシアン（冬の空と雪）。 このブロックはファイル末尾に置き、前の記述を上書きする。 .entry-content 配下は先行ルールの詳細度が高いので、同じ形で書き直す。 ============================================================ */ /* ---------- base ---------- */ body{font-size:15.5px;} a:hover{color:var(--hg-accent-deep);} a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--hg-accent-deep);outline-offset:2px;border-radius:6px; } /* ---------- ヘッダー：白い追従バー＋下端の4色ストライプ ---------- */ #header-container{border-bottom:0;box-shadow:0 2px 12px rgba(16,60,80,.07);} #header-container::after{ content:"";display:block;height:5px; background:linear-gradient(90deg,var(--hg-accent) 0%,var(--hg-blue) 34%,var(--hg-pink) 67%,var(--hg-sun) 100%); } #header-in .logo-header a::before{ width:14px;height:14px;border-radius:50%; background:linear-gradient(135deg,var(--hg-accent),var(--hg-blue)); } .navi-in>.menu-header li a{border-radius:var(--hg-pill);padding:9px 13px;} .navi-in>.menu-header li a:hover{background:var(--hg-accent-bg);} .navi-in>.menu-header>li:last-child>a{ border:0;background:var(--hg-accent-deep);border-radius:var(--hg-pill);padding:9px 18px; } .navi-in>.menu-header>li:last-child>a .item-label{color:#fff;} .navi-in>.menu-header>li:last-child>a:hover{background:var(--hg-ink);} .navi-in>.menu-header>li:last-child>a:hover .item-label{color:#fff;} /* ============================================================ MV：黄色の面に大きな文字。写真は右カラムに移して残す ============================================================ */ .hg-mv{background:var(--hg-mv-bg);} .hg-mv::before{ background: radial-gradient(70% 100% at 92% 0%, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 62%), radial-gradient(60% 90% at 0% 100%, rgba(255,180,20,.38) 0%, rgba(255,180,20,0) 60%); } .hg-mv__in{grid-template-columns:56px 1fr 322px;column-gap:30px;} .hg-mv__vlabel{border-right:1px solid rgba(21,36,46,.22);} .hg-mv__main{padding:74px 8px 74px 34px;border-right:0;} .hg-mv__title,.entry-content .hg-mv__title{ color:var(--hg-ink) !important;text-shadow:none;letter-spacing:0; font-size:clamp(31px,4.4vw,54px);line-height:1.3; } /* 「北海道」は白抜きの色見本にして、黄色の面から一段引き立てる */ .hg-mv__title .hl,.entry-content .hg-mv__title .hl{ color:#fff;background:var(--hg-accent-deep); border-radius:12px;padding:.02em .16em; -webkit-box-decoration-break:clone;box-decoration-break:clone; } .hg-mv__tag,.entry-content .hg-mv__tag{ background:#fff;border:0;color:var(--hg-ink); border-radius:var(--hg-pill);padding:8px 18px;margin:0 0 20px; font-family:var(--hg-en);font-size:11.5px;letter-spacing:.1em; box-shadow:var(--hg-shadow); } .hg-mv__lead,.entry-content .hg-mv__lead{color:var(--hg-ink-2);font-size:15.5px;line-height:2.05;} .hg-mv__vlabel,.entry-content .hg-mv__vlabel{color:var(--hg-ink-2);font-size:12px;} .hg-mv__actions a{border-radius:var(--hg-pill);min-height:56px;padding:0 30px;font-size:15px;} .hg-mv__actions a.is-main{background:var(--hg-accent-deep);color:#fff;box-shadow:0 6px 16px rgba(10,124,153,.32);} .hg-mv__actions a.is-main:hover{background:var(--hg-ink);color:#fff;} .hg-mv__actions a.is-sub{background:#fff;border:0;color:var(--hg-ink);box-shadow:var(--hg-shadow);} .hg-mv__actions a.is-sub:hover{background:var(--hg-ink);color:#fff;} /* 右カラムは写真の面にして、黄色との対比をつくる */ .hg-mv__index{ margin:30px 0;border-radius:var(--hg-radius);overflow:hidden; background: linear-gradient(180deg,rgba(9,38,52,.74) 0%,rgba(9,38,52,.88) 100%), var(--hg-navy) url("/wp-content/uploads/2026/08/mv-hokkaido-1.jpg") center 42%/cover no-repeat; box-shadow:var(--hg-shadow-2); } .hg-mv__index li{border-bottom:1px solid rgba(255,255,255,.16);} .hg-mv__index a{padding:22px 24px;} .hg-mv__index a:hover{background:rgba(255,255,255,.14);} .hg-mv__index .n,.entry-content .hg-mv__index .n{ font-family:var(--hg-en);font-size:11px;letter-spacing:.12em;color:var(--hg-sun); } .hg-mv__index .t{font-size:15px;} /* ============================================================ セクション見出し：英字を主役に、日本語をその下に（サイボウズの型） ============================================================ */ .hg-kicker,.entry-content .hg-kicker{ display:block;text-align:center; font-family:var(--hg-en);font-weight:800;letter-spacing:.005em; font-size:clamp(30px,4.4vw,46px);line-height:1.05; color:var(--hg-accent);margin:0 0 12px; } .hg-kicker::before{display:none;} .hg-section-title,.entry-content .hg-section-title{ text-align:center;font-size:clamp(18px,2vw,22px);font-weight:700; letter-spacing:.02em;color:var(--hg-ink);margin:0 0 14px !important; } .hg-section-lead,.entry-content .hg-section-lead{ text-align:center;max-width:760px;margin:0 auto 36px; color:var(--hg-muted);font-size:14px;line-height:2; } .hg-section-head{position:relative;display:block;text-align:center;} .hg-section-head .hg-link{position:absolute;right:0;top:2px;} @media screen and (max-width:980px){ .hg-section-head .hg-link{position:static;margin:0 0 22px;} } /* 「もっと見る」はピルのボタンにする（文末の矢印と役割が重ならないよう丸印は付けない） */ .hg-link{ display:inline-flex;align-items:center;gap:6px; border:0;border-bottom:0;padding:11px 22px;border-radius:var(--hg-pill); background:#fff;color:var(--hg-accent-deep);font-size:13.5px;font-weight:700; box-shadow:inset 0 0 0 2px var(--hg-accent-line),var(--hg-shadow); transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease; } .hg-link:hover{ background:var(--hg-accent-deep);color:#fff;transform:translateY(-1px); box-shadow:inset 0 0 0 2px var(--hg-accent-deep),var(--hg-shadow-2); } .hg-link--accent{background:var(--hg-accent-deep);color:#fff;box-shadow:inset 0 0 0 2px var(--hg-accent-deep),var(--hg-shadow);} .hg-link--accent:hover{background:var(--hg-ink);color:#fff;box-shadow:inset 0 0 0 2px var(--hg-ink),var(--hg-shadow-2);} /* ---------- 帯：色の面にする ---------- */ .hg-band{background:linear-gradient(180deg,#F5FBFE 0%,#E6F3FA 100%);border-top:0;} .hg-band--warm{ border-top:0; background: radial-gradient(120% 90% at 10% 0%, rgba(255,196,46,.34) 0%, rgba(255,196,46,0) 58%), radial-gradient(110% 100% at 94% 100%, rgba(232,90,155,.26) 0%, rgba(232,90,155,0) 60%), linear-gradient(160deg,#EAF7FC 0%,#F6F1FB 100%); } .hg-band--warm .hg-card{border-color:transparent;} /* REASON はオーロラの面。白文字を載せるので下地は濃いまま */ .hg-band--reason{ background: radial-gradient(85% 120% at 2% 100%, rgba(232,90,155,.30) 0%, rgba(232,90,155,0) 58%), radial-gradient(80% 110% at 98% 4%, rgba(47,191,214,.26) 0%, rgba(47,191,214,0) 55%), linear-gradient(115deg,#0A536F 0%,#2C3E96 52%,#5E2E84 100%); } .hg-band--reason .hg-kicker,.entry-content .hg-band--reason .hg-kicker{ text-align:left;color:var(--hg-sun);margin:0 0 14px; } .hg-band--reason .hg-section-title,.entry-content .hg-band--reason .hg-section-title{ text-align:left;color:#fff;font-size:clamp(22px,2.6vw,30px);line-height:1.55;margin:0 0 18px !important; } .hg-band--reason .hg-section-lead,.entry-content .hg-band--reason .hg-section-lead{ text-align:left;color:#dbe6f2;margin:0;max-width:none; } .hg-band--reason .hg-point{border-top:1px solid rgba(255,255,255,.18);box-shadow:none;border-radius:0;} .hg-band--reason .hg-point::before{display:none;} .entry-content .hg-band--reason .hg-point__no{color:var(--hg-sun);font-size:24px;font-family:var(--hg-en);} .entry-content .hg-band--reason .hg-point__title{color:#fff;font-size:17px;} .entry-content .hg-band--reason .hg-point__text{color:#e2ebf5;font-size:13px;line-height:2;} /* ============================================================ カード：枠線をやめて白い面を浮かせる ============================================================ */ .hg-card,.hg-acard,.hg-catcard,.hg-point,.hg-step{ border:0;border-radius:var(--hg-radius);background:#fff;box-shadow:var(--hg-shadow); } .hg-band .hg-card,.hg-band .hg-acard,.hg-band .hg-catcard{border-color:transparent;} .hg-card{padding:26px 28px;} a.hg-card:hover,.hg-acard:hover,.hg-catcard:hover{ box-shadow:var(--hg-shadow-2);transform:translateY(-3px);color:var(--hg-ink); } a.hg-card{transition:box-shadow .18s ease,transform .18s ease;} .hg-card--accent{position:relative;overflow:hidden;padding-left:32px;} .hg-card--accent::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:8px; background:var(--c,var(--hg-accent)); } .hg-card__title{font-size:17.5px;} .hg-card__text{font-size:13px;color:var(--hg-muted);} /* 記事カード */ .hg-acard{overflow:hidden;} .hg-acard__media{background:var(--hg-band) center/cover no-repeat;} .hg-acard__cat{ border:0;border-radius:var(--hg-pill);padding:4px 12px;font-size:11px; background:var(--hg-accent-bg);color:var(--hg-accent-deep); } .hg-acard__date{font-family:var(--hg-en);font-size:12.5px;font-weight:600;color:var(--hg-muted-3);letter-spacing:.02em;} .hg-acard__title{font-size:15.5px;font-weight:700;} .hg-acard--lead,.hg-acard--row{box-shadow:none;background:transparent;} .hg-acard--lead .hg-acard__media{border-radius:var(--hg-radius);} .hg-acard--row .hg-acard__media{border-radius:var(--hg-radius-sm);} .hg-acard--lead:hover,.hg-acard--row:hover{box-shadow:none;transform:none;} .hg-acard--lead:hover .hg-acard__title,.hg-acard--row:hover .hg-acard__title{color:var(--hg-accent-deep);} .hg-columns__rest > li{border-top:1px solid var(--hg-line);} /* POINT カード */ .hg-point{border-top:0;padding:24px 26px;position:relative;overflow:hidden;} .hg-point::before{ content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--c,var(--hg-accent)); } .hg-point::after{font-family:var(--hg-en);opacity:.12;font-size:62px;} .hg-point__no{ border-radius:var(--hg-pill);padding:4px 12px;font-size:11.5px; background:var(--cbg,var(--hg-accent-bg));color:var(--cd,var(--hg-accent-deep)); } .hg-point--a{--c:#E24B5E;--cd:#B02335;--cbg:#FDEDEF;} .hg-point--b{--c:#2C8FD6;--cd:#12688F;--cbg:#EAF5FC;} .hg-point--c{--c:#E3A21A;--cd:#8A6100;--cbg:#FDF4E0;} /* 注記 */ .hg-note{border:0;border-radius:var(--hg-radius);background:var(--hg-accent-bg);padding:22px 28px;} .hg-note__title{color:var(--hg-accent-deep);} .hg-note--plain{background:#fff;box-shadow:var(--hg-shadow);} .hg-note--warn{background:#FDEDEF;} .hg-note--warn .hg-note__title{color:#B02335;} /* ============================================================ カテゴリーカード：6色の色見本として見せる ============================================================ */ .c-cost{--c:#F2701D;--cd:#B34A05;--cbg:#FFF1E6;} .c-season{--c:#2C8FD6;--cd:#12688F;--cbg:#EAF5FC;} .c-damage{--c:#E24B5E;--cd:#B02335;--cbg:#FDEDEF;} .c-materials{--c:#2FA96B;--cd:#1B7346;--cbg:#EAF8F0;} .c-contractor{--c:#6C63D8;--cd:#463FA6;--cbg:#F0EFFC;} .c-subsidy{--c:#E3A21A;--cd:#8A6100;--cbg:#FDF4E0;} .hg-catcard{overflow:hidden;} .hg-catcard__media::after{height:6px;background:var(--c,var(--hg-accent));} .hg-cards--cat .hg-catcard__media::after{width:6px;} .hg-catcard__body{padding:20px 22px 22px;} .hg-catcard__label{ display:inline-block;border-radius:var(--hg-pill); background:var(--cbg,var(--hg-accent-bg));color:var(--cd,var(--hg-accent-deep)); padding:4px 13px;font-size:11.5px;letter-spacing:.04em;margin:0 0 9px; } .hg-catcard__title,.entry-content .hg-catcard__title{font-size:17.5px;} .hg-catcard__text{font-size:13px;color:var(--hg-muted);} /* ============================================================ 4ステップ：番号を大きな丸にする ============================================================ */ .hg-step{padding:26px 22px;} .hg-step__n{ width:54px;height:54px;font-size:21px;font-family:var(--hg-en);font-weight:700; margin:0 0 16px;box-shadow:0 6px 16px rgba(16,60,80,.18); } .hg-step--1{--c:#2C8FD6;} .hg-step--2{--c:#2FA96B;} .hg-step--3{--c:#F2701D;} .hg-step--4{--c:#6C63D8;} @media screen and (min-width:1024px){ .hg-step:not(:last-child)::after{ border-top-color:var(--hg-line-2);border-right-color:var(--hg-line-2); width:12px;height:12px;right:-20px; } } /* 注意喚起 */ .hg-alert{border:0;border-radius:var(--hg-radius);background:#FDEDEF;padding:28px 32px;box-shadow:var(--hg-shadow);} .hg-alert__title,.entry-content .hg-alert__title{color:#98202F;} .hg-alert__title::before{background:#B02335;} .hg-alert__num{color:#B02335;} /* ============================================================ CTA帯：シアンの面に山吹のピル ============================================================ */ .hg-ctaband{background:linear-gradient(105deg,#064E66 0%,#0A7C99 100%);} .hg-ctaband__links a{border-radius:var(--hg-pill);min-height:54px;padding:0 30px;font-size:15px;} .hg-ctaband__links a.is-main{background:var(--hg-sun);color:#3A2A00;box-shadow:0 8px 20px rgba(0,0,0,.2);} .hg-ctaband__links a.is-main:hover{background:#fff;color:var(--hg-ink);} .hg-ctaband__links a.is-sub{border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.10);color:#fff;} .hg-ctaband__links a.is-sub:hover{border-color:#fff;background:rgba(255,255,255,.22);color:#fff;} .entry-content .hg-ctaband__text{color:#e6f2f6;} /* ============================================================ 市町村チップ：179個がページの色をつくるのでピルにする ============================================================ */ .hg-munis__row{border-top:1px solid var(--hg-line);padding:16px 0;} .hg-munis__gyo{ font-size:12.5px;font-weight:700;color:var(--hg-accent-deep); background:var(--hg-accent-bg);border-radius:var(--hg-pill); padding:5px 0;text-align:center; } .hg-munis__list{gap:8px;} .hg-muni{ border:0;border-radius:var(--hg-pill);background:#eff4f7;color:var(--hg-muted-2); padding:6px 14px;font-size:12.5px; } a.hg-muni.is-ready{ border:0;background:var(--hg-accent-bg);color:var(--hg-accent-deep); box-shadow:inset 0 0 0 2px var(--hg-accent-line); } a.hg-muni.is-ready:hover{background:var(--hg-accent-deep);color:#fff;box-shadow:inset 0 0 0 2px var(--hg-accent-deep);} /* ============================================================ 記事本文 ============================================================ */ .entry-content h2,.article h2{ background:var(--hg-accent-bg);border:0;border-left:8px solid var(--hg-accent); border-radius:0 var(--hg-radius) var(--hg-radius) 0; padding:16px 24px;font-size:23px; } .entry-content h3,.article h3{border:0;position:relative;padding:0 0 .55em;} .entry-content h3::after,.article h3::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:3px; background:linear-gradient(90deg,var(--hg-accent) 0%,var(--hg-accent) 76px,var(--hg-line) 76px,var(--hg-line) 100%); } .entry-content h4{border-left:4px solid var(--hg-sun);padding:0 0 0 12px;border-radius:2px;} .entry-content table{border-radius:var(--hg-radius-sm);overflow:hidden;box-shadow:var(--hg-shadow);} .entry-content table th{background:var(--hg-navy);} .entry-content blockquote{ border:0;border-left:6px solid var(--hg-accent-line);background:var(--hg-accent-bg); border-radius:0 var(--hg-radius-sm) var(--hg-radius-sm) 0;padding:18px 24px; } .entry-card-wrap,.related-entry-card-wrap{border:0;border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);} .entry-card-wrap:hover,.related-entry-card-wrap:hover{box-shadow:var(--hg-shadow-2);} .cat-label{border:0;border-radius:var(--hg-pill);background:var(--hg-accent-bg);color:var(--hg-accent-deep);padding:3px 11px;} .sidebar h3,.widget-sidebar-title{border-bottom:3px solid var(--hg-accent);} .hg-cite,.entry-content .hg-cite{border-left:3px solid var(--hg-accent-line);} /* ============================================================ 固定ページ ============================================================ */ .hg-page-head{ border-bottom:0; background: radial-gradient(90% 130% at 96% 0%, rgba(255,196,46,.24) 0%, rgba(255,196,46,0) 60%), linear-gradient(160deg,#EAF7FC 0%,#F6F1FB 100%); } .hg-page-head__in{padding:52px 24px 48px;} .hg-page-head__title::before{ width:10px;height:36px;border-radius:5px; background:linear-gradient(180deg,var(--hg-accent),var(--hg-blue)); } .hg-page-body > h2{border-bottom:0 !important;position:relative;padding:0 0 14px !important;} .hg-page-body > h2::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:3px; background:linear-gradient(90deg,var(--hg-accent) 0%,var(--hg-accent) 88px,var(--hg-line) 88px,var(--hg-line) 100%); } .hg-page-body > h3{ border-left:5px solid var(--hg-sun) !important;border-radius:3px; padding:2px 0 2px 14px !important; } .hg-dl{border-top:0;border-radius:var(--hg-radius);overflow:hidden;box-shadow:var(--hg-shadow);} .hg-dl__row{border-bottom:1px solid var(--hg-line);} .hg-dl__row:last-child{border-bottom:0;} .hg-dl__k{background:var(--hg-accent-bg);color:var(--hg-accent-deep);} /* Q&A / FAQ */ .hg-qa{border:0;border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);} .hg-qa__q{background:var(--hg-accent-bg);} .hg-faq__cat{border:0;border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);} .hg-faq__cat[open]{box-shadow:var(--hg-shadow-2);} .hg-faq__btn{background:#fff;} .hg-faq__btn:hover{background:var(--hg-accent-bg);} .hg-faq__cat[open] .hg-faq__btn{border-bottom:1px solid var(--hg-line);} .hg-faq__label{border-radius:var(--hg-pill);padding:5px 13px;} .hg-faq__btn::after{border:0;border-radius:var(--hg-pill);background:var(--hg-accent-bg);padding:5px 14px;} .hg-faq__more{border-top:1px solid var(--hg-line);} /* フォーム */ .hg-form{border:0;border-radius:var(--hg-radius);background:var(--hg-band);padding:30px 32px;} .hg-form__req,.hg-form__opt{border-radius:var(--hg-pill);padding:.25em .8em;} .hg-form input[type="text"],.hg-form input[type="email"],.hg-form input[type="url"], .hg-form select,.hg-form textarea{border:2px solid #fff;border-radius:var(--hg-radius-sm);} .hg-form input:focus,.hg-form select:focus,.hg-form textarea:focus{ border-color:var(--hg-accent);box-shadow:0 0 0 4px rgba(15,163,201,.18); } .hg-btn{border-radius:var(--hg-pill);min-height:54px;font-size:15.5px;} .hg-btn:hover{background:var(--hg-ink);} /* 業者カード */ .hg-gyousha{ border:0;border-top:6px solid var(--hg-accent);border-radius:var(--hg-radius); box-shadow:var(--hg-shadow); } /* シミュレーター・カレンダー */ .hg-sim{border:0;border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);} .hg-sim__hd{background:linear-gradient(105deg,#064E66,#0A7C99);} .entry-content .hg-cal thead th{background:var(--hg-navy);} /* ============================================================ フッター：濃いスレート＋上下2段 ============================================================ */ .footer{color:#cfe0ea;} .footer a,.footer .menu-footer li a,.footer-bottom a{color:#cfe0ea;} .footer a:hover,.footer .menu-footer li a:hover{color:var(--hg-sun);} .footer #footer-in{padding-top:64px;padding-bottom:52px;} .footer .footer-bottom{border-top:1px solid rgba(255,255,255,.14) !important;padding-top:22px;padding-bottom:8px;} .copyright{font-size:11.5px;color:#a9bcc7;font-family:var(--hg-en);letter-spacing:.02em;} /* ============================================================ レスポンシブ ============================================================ */ @media screen and (max-width:1023px){ .hg-mv__in{grid-template-columns:1fr;column-gap:0;} .hg-mv__main{padding:44px 24px 40px;} .hg-mv__index{margin:0 24px 34px;} } @media screen and (max-width:600px){ .hg-kicker,.entry-content .hg-kicker{font-size:clamp(26px,9vw,34px);} .hg-card{padding:22px 22px;} .hg-card--accent{padding-left:28px;} .entry-content h2,.article h2{padding:14px 18px;font-size:20px;} .hg-munis__gyo{text-align:left;padding-left:12px;padding-right:12px;justify-self:start;} } /* 動きを減らす設定を尊重する */ @media (prefers-reduced-motion:reduce){ a.hg-card:hover,.hg-acard:hover,.hg-catcard:hover,.hg-link:hover{transform:none;} } /* ------------------------------------------------------------ v7 の後始末（先行ブロックとの噛み合わせ） ------------------------------------------------------------ */ /* h3 の下線は記事本文だけ。部品の見出し（.hg-*__title 等）は h3 でも引かない */ .entry-content h3[class*="hg-"]::after, .article h3[class*="hg-"]::after{display:none;} /* FLOW：縦のタイムライン。番号をステップの色にして大きくする */ .hg-section--flow .hg-step{box-shadow:none;background:transparent;padding:0 0 36px 78px;} .hg-section--flow .hg-step__n{ width:52px;height:52px;font-size:19px;font-family:var(--hg-en);font-weight:700; box-shadow:0 6px 16px rgba(16,60,80,.18); } .hg-section--flow .hg-step:not(:last-child)::before{left:25px;top:56px;width:2px;background:var(--hg-line);} .hg-section--flow .hg-step--1 .hg-step__n{background:#2C8FD6;} .hg-section--flow .hg-step--2 .hg-step__n{background:#2FA96B;} .hg-section--flow .hg-step--3 .hg-step__n{background:#F2701D;} .hg-section--flow .hg-step--4 .hg-step__n{background:#6C63D8;} .hg-section--flow .hg-step__title{margin:12px 0 10px;} /* 行カード（TOOLS / CATEGORY / GUIDE）も角丸の面にそろえる */ .hg-section--rows .hg-catcard, .hg-section--rows .hg-card{ border:0;border-radius:var(--hg-radius);box-shadow:var(--hg-shadow); padding:22px 56px 22px 24px; } .hg-section--rows .hg-card--accent, .hg-section--rows .hg-catcard{border-left:6px solid var(--c,var(--hg-accent));} .hg-section--rows .hg-catcard:hover, .hg-section--rows .hg-card:hover{ border-color:transparent;border-left-color:var(--c,var(--hg-accent)); box-shadow:var(--hg-shadow-2);transform:translateY(-2px); } .hg-band--warm .hg-section--rows .hg-catcard, .hg-band--warm .hg-section--rows .hg-card{border-color:transparent;} .hg-section--rows .hg-card--accent{padding-left:24px;} .hg-section--rows .hg-card--accent::before{display:none;} /* 右端の矢印は丸に入れる */ .hg-section--rows .hg-catcard::after, .hg-section--rows .hg-card::after{ right:18px;width:30px;height:30px;border-radius:50%; background:var(--hg-accent-bg);color:var(--hg-accent-deep);font-size:13px; display:flex;align-items:center;justify-content:center; transition:background .15s ease,color .15s ease; } .hg-section--rows .hg-catcard:hover::after, .hg-section--rows .hg-card:hover::after{background:var(--hg-accent-deep);color:#fff;} .hg-section--rows .hg-catcard__label{ font-family:var(--hg-en);font-size:10.5px;letter-spacing:.12em; color:var(--cd,var(--hg-accent-deep));background:var(--cbg,var(--hg-accent-bg)); } /* MV：写真をもう少し見せる */ .hg-mv__index{ background: linear-gradient(180deg,rgba(9,38,52,.52) 0%,rgba(9,38,52,.78) 100%), var(--hg-navy) url("/wp-content/uploads/2026/08/mv-hokkaido-1.jpg") center 42%/cover no-repeat; } /* CTA帯の山は、下に続くフッターと同じ色にして1つの面に見せる */ .hg-ctaband::after{ background:no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 78 L150 34 L300 92 L470 22 L640 96 L800 48 L960 100 L1090 56 L1200 88 L1200 120 Z' fill='%2338474f'/%3E%3C/svg%3E"); } /* フッター */ .footer .footer-bottom-logo{margin-bottom:20px;} .footer .menu-footer li a{padding:4px 12px;} /* トップ：CTA帯の山とフッターを地続きにする（間に白が出ないようにする） */ body.home .hg-ctaband{margin-bottom:0 !important;} body.home #content,body.home #content-in,body.home #main, body.home .article,body.home .entry-content{margin-bottom:0 !important;padding-bottom:0 !important;} body.home .footer{margin-top:0 !important;} .footer #footer-in{padding-top:52px;} /* ------------------------------------------------------------ v7 仕上げ：業者ページ／アーカイブ ------------------------------------------------------------ */ .hg-gyousha__name::before{ min-width:36px;height:32px;border-radius:100px; background:var(--hg-accent-deep);font-family:var(--hg-en);font-size:14px; } .hg-gyousha__shot{border:0;border-radius:var(--hg-radius-sm);box-shadow:var(--hg-shadow);} .hg-gyousha__toc{border-radius:var(--hg-radius);background:var(--hg-accent-bg);padding:20px 24px;} .hg-gyousha__meta dt{color:var(--hg-accent-deep);} .hg-btn--site{background:var(--hg-accent-deep);border-radius:100px;} .hg-btn--site:hover{background:var(--hg-ink);} /* アーカイブ見出しは固定ページと同じ「色の縦棒つき」にそろえる */ body.archive .archive-title{ display:flex;align-items:center;gap:14px; font-size:clamp(24px,3vw,32px);margin:10px 0 30px; } body.archive .archive-title::before{ content:"";flex:none;width:10px;height:34px;border-radius:5px; background:linear-gradient(180deg,var(--hg-accent),var(--hg-blue)); } body.archive .archive-title .fa,body.archive .archive-title .icon-folder{display:none;} /* ------------------------------------------------------------ v7 修正（レビュー指摘の反映 2026-09-06） ------------------------------------------------------------ */ /* 淡い色の帯の中でもカテゴリー色の左帯を消さない（枠線だけを消す） */ .hg-band--warm .hg-section--rows .hg-catcard, .hg-band--warm .hg-section--rows .hg-card{ border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent; border-left-color:var(--c,var(--hg-accent)); } /* 固定ページの h3 は左の山吹棒だけにする（記事本文用の下線を引き継がない） */ .hg-page-body > h3::after{display:none;} /* 白文字を載せるところは、明るいほうの色ではなく濃いほうの色を使う（AA確保） ・FAQのカテゴリーラベルは10.5pxの小さい文字なので 4.5:1 以上 */ .hg-faq__label{background:var(--cd,var(--hg-accent-deep));} /* ・ステップの番号は19pxの太字（大きい文字）。緑と橙だけ 3:1 に届かないので少し落とす */ .hg-step--2{--c:#219665;} .hg-step--3{--c:#DB5F0E;} .hg-section--flow .hg-step--2 .hg-step__n{background:#219665;} .hg-section--flow .hg-step--3 .hg-step__n{background:#DB5F0E;} /* CTA帯の副ボタン：白の薄膜を敷くと下地が明るくなり白文字が 4.5:1 を割るので、 膜をやめて枠線だけにする。hover は白地に濃紺で反転させる。 */ .hg-ctaband__links a.is-sub{background:transparent;border:2px solid rgba(255,255,255,.75);color:#fff;} .hg-ctaband__links a.is-sub:hover{background:#fff;border-color:#fff;color:var(--hg-ink);} /* MVの写真カラム：上端の空が明るいので、覆いを少し濃くして白文字を確実に読ませる */ .hg-mv__index{ background: linear-gradient(180deg,rgba(9,38,52,.66) 0%,rgba(9,38,52,.86) 100%), var(--hg-navy) url("/wp-content/uploads/2026/08/mv-hokkaido-1.jpg") center 42%/cover no-repeat; } /* 投稿ページ（/articles/）だけCocoon既定の2カラムが残っていたので、 ほかの一覧ページ（コラム一覧・カテゴリー）と同じ1カラムにそろえる */ body.blog #sidebar,body.blog .sidebar{display:none !important;} body.blog #main,body.blog .main{ width:100% !important;max-width:100% !important;float:none !important;margin:0 auto !important; } body.blog #content-in,body.blog #content .wrap{ width:auto !important;max-width:var(--hg-wrap) !important;margin:0 auto !important; } /* Cocoon既定のボタン（検索など）もブランド色にそろえる */ .search-submit,.search-form input[type="submit"],.search-box input[type="submit"]{ background:var(--hg-accent-deep);border:0;border-radius:100px;color:#fff; } .search-submit:hover,.search-form input[type="submit"]:hover{background:var(--hg-ink);} /* ------------------------------------------------------------ v7 修正2：先行の「色の上書き対策」ブロックが !important で 色を固定しているので、同じ強さで指定し直す ------------------------------------------------------------ */ /* CTA帯の主ボタンは山吹地。白文字だと 1.8:1 で読めないので濃い茶にする */ .hg-ctaband__links a.is-main{color:#3A2A00 !important;} .hg-ctaband__links a.is-main:hover{color:var(--hg-ink) !important;} .hg-ctaband__links a.is-sub{color:#fff !important;} .hg-ctaband__links a.is-sub:hover{color:var(--hg-ink) !important;} /* カテゴリーカードのラベルはカテゴリーの色にそろえる */ .entry-content .hg-section--rows .hg-catcard__label{ color:var(--cd,var(--hg-accent-deep));font-size:11.5px; } /* セクション見出しの英字は46pxの太字＝大きい文字なので 3:1 以上が要る。 #0FA3C9 は白地で 2.96 とわずかに足りないので、見た目を保ったまま一段落とす */ .hg-kicker,.entry-content .hg-kicker{color:#0D93B6;} .hg-band--reason .hg-kicker,.entry-content .hg-band--reason .hg-kicker{color:var(--hg-sun);} /* パンくずはCocoon既定の #999（白地で2.9:1）だったので、読める濃さにする */ .breadcrumb,.breadcrumb a,.breadcrumb-caption,.breadcrumb .fa{color:var(--hg-muted-3);} .breadcrumb a:hover{color:var(--hg-accent-deep);} /* 1023px以下でMVを1カラムにしたので、縦書きラベルもここで消す。 （既存の非表示指定は900px以下だったため、901〜1023pxで宙に浮いていた） */ @media screen and (max-width:1023px){ .hg-mv__vlabel{display:none;} } /* 900px以下のFLOW。v7で丸を大きくした指定がファイル末尾にあるぶん、 前方のメディアクエリ（900px以下）を打ち消してしまうので、ここで指定し直す */ @media screen and (max-width:900px){ .hg-section--flow .hg-step{padding:0 0 30px 58px;} .hg-section--flow .hg-step__n{width:42px;height:42px;font-size:16px;margin:0;} .hg-section--flow .hg-step:not(:last-child)::before{left:20px;top:46px;} .hg-section--flow .hg-step__title{margin:8px 0 8px;} } /* ============================================================ v7 POP：記事ページと固定ページを、トップと同じ言語にそろえる 2026-09-06（テキストは変更なし。見た目だけ） ・記事の冒頭を「色の面のカード」にして、トップの帯と呼応させる ・日付・目次・関連記事・前後記事をすべてカード／ピルに ・固定ページの見出し・箇条書きにブランド色を通す ============================================================ */ /* ---------- 記事：冒頭を色の面のカードにする ---------- */ body.single .article-header{ background: radial-gradient(95% 130% at 97% 0%, rgba(255,196,46,.26) 0%, rgba(255,196,46,0) 62%), radial-gradient(80% 120% at 0% 100%, rgba(232,90,155,.14) 0%, rgba(232,90,155,0) 60%), linear-gradient(160deg,#EAF7FC 0%,#F6F1FB 100%); border-radius:var(--hg-radius); padding:34px 34px 28px; margin:0 0 32px; } body.single .entry-title{ margin:0 0 22px;font-size:clamp(23px,2.9vw,31px);line-height:1.5; } body.single .article-header .eye-catch-wrap{margin:0;} body.single .article-header .eye-catch{ margin:0;border-radius:var(--hg-radius-sm);overflow:hidden; box-shadow:0 10px 26px rgba(16,60,80,.16); } body.single .article-header .eye-catch img{display:block;width:100%;height:auto;} /* 日付は白いピルにして、色の面から浮かせる */ body.single .article-header .date-tags{ display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:16px 0 0; } body.single .article-header .date-tags .post-date, body.single .article-header .date-tags .post-update{ display:inline-flex;align-items:center;gap:6px; background:#fff;border-radius:var(--hg-pill);padding:5px 14px; font-family:var(--hg-en);font-size:12.5px;font-weight:600; color:var(--hg-muted);box-shadow:var(--hg-shadow); } /* 更新日・編集方針の行は薄い水色の帯にする */ .entry-content .hg-updated{ background:var(--hg-accent-bg);border-bottom:0;border-radius:var(--hg-radius-sm); padding:12px 18px;margin:0 0 30px;gap:6px 16px; } .entry-content .hg-updated a{color:var(--hg-accent-deep);} /* ---------- 記事：目次を白いカードにする ---------- */ body.single #toc{ display:block;width:100%;max-width:100%;box-sizing:border-box; border:0;border-radius:var(--hg-radius);background:#fff; box-shadow:var(--hg-shadow);margin:2.4em 0;text-align:left;overflow:hidden; } /* 前段の body.single #toc .toc-title は ID を含み詳細度が高いので、同じ形で書き直す */ body.single #toc .toc-title{ background:var(--hg-accent-bg);color:var(--hg-accent-deep); padding:15px 22px;font-size:15px; } body.single #toc .toc-title::after,body.page #toc .toc-title::after{ border:0;background:var(--hg-accent-deep);color:#fff;border-radius:var(--hg-pill);padding:5px 15px; } body.single #toc .toc-content{padding:18px 24px 20px;} body.single #toc a{font-size:13.5px;color:var(--hg-ink-2);} body.single #toc .toc-list > li::marker{ color:var(--hg-accent-deep);font-weight:700; } body.single #toc .toc-list ol > li::marker{color:var(--hg-muted-3);} /* ---------- 記事：関連記事の見出しをセクション見出しにそろえる ---------- */ body.single .related-entry-heading{ position:relative;margin:56px 0 24px;padding:0 0 14px; border:0;background:transparent;border-radius:0; font-size:20px;font-weight:800;color:var(--hg-ink); } body.single .related-entry-heading::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:3px; background:linear-gradient(90deg,var(--hg-accent) 0%,var(--hg-accent) 84px,var(--hg-line) 84px,var(--hg-line) 100%); } body.single .related-entry-card-wrap{border:0;border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);} body.single .related-entry-card-wrap:hover{box-shadow:var(--hg-shadow-2);} /* ---------- 記事：前後の記事を2枚のカードにする ---------- */ body.single #pager-post-navi{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px; margin:44px 0 8px;border:0; } body.single #pager-post-navi .prev-post{grid-column:1;} body.single #pager-post-navi .next-post{grid-column:2;} body.single #pager-post-navi a{ display:grid;grid-template-columns:88px 1fr;align-items:center;gap:14px; background:#fff;border:0;border-radius:var(--hg-radius); box-shadow:var(--hg-shadow);padding:14px 16px;width:auto;float:none; transition:box-shadow .18s ease,transform .18s ease; } body.single #pager-post-navi a:hover{box-shadow:var(--hg-shadow-2);transform:translateY(-2px);} body.single #pager-post-navi a.next-post{grid-template-columns:1fr 88px;} body.single #pager-post-navi a.next-post .next-post-thumb{grid-column:2;grid-row:1;} body.single #pager-post-navi .card-thumb{margin:0;} body.single #pager-post-navi .card-thumb img{ display:block;width:88px;height:58px;object-fit:cover;border-radius:var(--hg-radius-sm); } body.single #pager-post-navi .iconfont{ display:none; } body.single #pager-post-navi a.next-post{text-align:right;} /* ---------- 記事：出典の見え方 ---------- */ .entry-content .hg-cite{ background:var(--hg-band);border-left:4px solid var(--hg-accent-line); border-radius:0 var(--hg-radius-sm) var(--hg-radius-sm) 0; padding:14px 18px;margin:20px 0 0; } /* ============================================================ 固定ページ（運営者情報など） ============================================================ */ /* 見出しは記事と同じ「淡い水色の面＋シアンの棒」にそろえる */ .hg-page-body > h2{ background:var(--hg-accent-bg) !important; border-left:8px solid var(--hg-accent) !important; border-radius:0 var(--hg-radius) var(--hg-radius) 0 !important; padding:15px 22px !important;margin:2.6em 0 1.1em !important; font-size:21px !important; } .hg-page-body > h2::after{display:none;} .hg-page-body > h2:first-child{margin-top:0 !important;} /* h3 は山吹の棒のまま。太さだけそろえる */ .hg-page-body > h3{margin:2.2em 0 .9em !important;} /* 箇条書きの点をブランド色の四角に、番号はシアンの丸にする */ .hg-page-body > ul{list-style:none;padding-left:2px;} .hg-page-body > ul > li{position:relative;padding-left:26px;margin:0 0 .5em;} .hg-page-body > ul > li::before{ content:"";position:absolute;left:2px;top:.82em; width:9px;height:9px;border-radius:3px;background:var(--hg-accent); } .hg-page-body > ol{list-style:none;padding-left:2px;counter-reset:hgol;} .hg-page-body > ol > li{position:relative;padding-left:40px;margin:0 0 .6em;counter-increment:hgol;} .hg-page-body > ol > li::before{ content:counter(hgol);position:absolute;left:0;top:.28em; display:flex;align-items:center;justify-content:center; width:25px;height:25px;border-radius:50%; background:var(--hg-accent-deep);color:#fff; font-family:var(--hg-en);font-size:12.5px;font-weight:700; } /* 定義リスト（運営者情報の表）は白いカードのまま、キー列を色の面に */ .hg-dl__k{background:var(--hg-accent-bg);color:var(--hg-accent-deep);font-weight:700;} /* 固定ページの注記も記事と同じ角丸の面に */ .hg-page-body .hg-note{margin:2.2em 0;} /* ---------- レスポンシブ ---------- */ @media screen and (max-width:834px){ body.single .article-header{padding:24px 20px 22px;border-radius:var(--hg-radius);} body.single #pager-post-navi a.next-post{grid-template-columns:88px 1fr;text-align:left;} body.single #pager-post-navi a.next-post .next-post-thumb{grid-column:1;} } /* 前後記事：片方しかない記事があるので、グリッド固定をやめて伸びるようにする */ body.single #pager-post-navi{display:flex;flex-wrap:wrap;gap:18px;margin:40px 0 0;} body.single #pager-post-navi .prev-post, body.single #pager-post-navi .next-post{grid-column:auto;flex:1 1 260px;min-width:0;} body.single #pager-post-navi .card-thumb img{width:100px;height:64px;} body.single #pager-post-navi a{grid-template-columns:100px 1fr;padding:14px 18px;} body.single #pager-post-navi a.next-post{grid-template-columns:1fr 100px;} /* 記事下のパンくずを本文の幅にそろえる */ body.single .breadcrumb.sbp-main-bottom{ max-width:820px;margin:30px auto 0;padding:0;box-sizing:border-box; } /* 前後記事カードの中身を1行に置く（サムネと見出しを明示的に配置する） */ body.single #pager-post-navi a{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:14px;} body.single #pager-post-navi a .card-thumb{grid-column:1;grid-row:1;} body.single #pager-post-navi a [class$="-post-title"]{grid-column:2;grid-row:1;margin:0;} body.single #pager-post-navi a.next-post{grid-template-columns:1fr 100px;} body.single #pager-post-navi a.next-post .card-thumb{grid-column:2;grid-row:1;} body.single #pager-post-navi a.next-post [class$="-post-title"]{grid-column:1;grid-row:1;} @media screen and (max-width:834px){ body.single #pager-post-navi a.next-post{grid-template-columns:100px 1fr;} body.single #pager-post-navi a.next-post .card-thumb{grid-column:1;} body.single #pager-post-navi a.next-post [class$="-post-title"]{grid-column:2;} } /* Cocoonの .cf（クリアフィックス）の ::before/::after はグリッドの子として数えられ、 カードに空の2行目を作ってしまうので消す */ body.single #pager-post-navi a::before, body.single #pager-post-navi a::after{display:none;} body.single #pager-post-navi{align-items:flex-start;} body.single #pager-post-navi::before,body.single #pager-post-navi::after{display:none;} /* 前後記事の並びはグリッドで組む。 flex + flex-wrap にすると、グリッドの子カードの高さが確定できず 行が伸びてカードが縦長になる（実測260px）ため。 */ body.single #pager-post-navi{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;align-items:start;margin:40px 0 0; } body.single #pager-post-navi .prev-post, body.single #pager-post-navi .next-post{grid-column:auto;} /* 固定ページ下部のパンくずも本文の幅にそろえる */ body.page .breadcrumb.sbp-main-bottom{ max-width:840px;margin:26px auto 0;padding:0 24px;box-sizing:border-box; } /* 前後記事の見出しはCocoonでは .prev-post-title / .next-post-title。 .post-navi-title / .title は存在しないので、実際のクラスで指定し直す */ body.single #pager-post-navi [class$="-post-title"]{ font-size:13.5px;font-weight:700;line-height:1.65;color:var(--hg-ink); } /* ------------------------------------------------------------ v7 修正3（レビュー指摘の反映 2026-09-06） ------------------------------------------------------------ */ /* 前後記事の見出しはクラス名で直接指定する（属性セレクタは複数クラス時に外れる） */ body.single #pager-post-navi .prev-post-title, body.single #pager-post-navi .next-post-title{ grid-row:1;margin:0;font-size:13.5px;font-weight:700;line-height:1.65;color:var(--hg-ink); } body.single #pager-post-navi .prev-post-title{grid-column:2;} body.single #pager-post-navi .next-post-title{grid-column:1;} @media screen and (max-width:834px){ body.single #pager-post-navi .next-post-title{grid-column:2;} } /* 業者ページの一覧（ol.hg-gyousha__toc）は専用カードなので、左の余白を戻す */ .hg-page-body > ol.hg-gyousha__toc{padding-left:24px;} .hg-page-body > ol.hg-gyousha__toc > li{padding-left:36px;} /* 固定ページH2のスマホ用サイズを維持する（前段の480px指定を打ち消さない） */ @media screen and (max-width:480px){ .hg-page-body > h2{font-size:19px !important;padding:13px 16px !important;} } /* 費用シミュレーター：選択ボタンもピルにそろえる */ .hg-sim__opts button{border:0;border-radius:var(--hg-pill);background:var(--hg-band);padding:10px 18px;} .hg-sim__opts button:hover{background:var(--hg-accent-bg);color:var(--hg-accent-deep);} .hg-sim__opts button[aria-pressed="true"]{ background:var(--hg-accent-deep);border:0;color:#fff;box-shadow:0 4px 12px rgba(9,117,143,.28); } .hg-sim__out{background:var(--hg-accent-bg);border-top:0;} .hg-sim__bar u{background:#dfeef4;} /* 費用シミュレーターは /hiyou-simulator/ の本文に同じCSSが