.site-root{
  font-family:'Noto Sans JP',sans-serif;
  font-size:20px;
  line-height:1.8;
  color:#1A1A1A;
  background:#FFFFFF;
  -webkit-text-size-adjust:100%;
}
/* ヘッダーは position:sticky。ラッパーに overflow が付くとスクロールコンテナ化して
   sticky が効かなくなるため、ヘッダー用ラッパーだけ overflow を発生させない */
.site-head-root{ overflow:visible !important; }
.site-foot-root{ background:transparent; }

/* ===== 受領 helmet CSS（ルール単位で重複排除して結合） ===== */
/* ---- common ---- */
body { margin: 0; }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 150px; }
@media (max-width: 1199px) {
    .gnav-links { display: none !important; }
    .gnav-links.open { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; width: auto !important; margin: 0 !important; background: linear-gradient(135deg,#0F0F0F 0%,#2B2B2B 18%,#7A7A7A 32%,#232323 46%,#5A5A5A 62%,#141414 80%,#2B2B2B 100%); padding: 16px 28px 72px; gap: 8px; box-shadow: 0 16px 30px rgba(0,0,0,.3); }
    .gnav-links.open > * { width: 100%; }
    .gnav-links.open > a, .gnav-links.open .price-dd > button { padding-left: 16px !important; }
    .gnav-links.open .price-dd > button { display: flex !important; width: 100% !important; justify-content: flex-start; }
    .gnav-links.open .price-dd { width: 100% !important; align-self: stretch; }
    .gnav-links.open .price-dd > div { position: static !important; min-width: 0 !important; width: 100% !important; box-shadow: none !important; margin: 6px 0 10px !important; padding: 6px 0 !important; background: #2B2B2B; }
    .gnav-links.open .price-dd > div > a { padding-left: 26px !important; }
    .gnav-links.open .nav-cta { margin-left: 0 !important; justify-content: center; width: 100%; flex-wrap: wrap; margin-top: 6px; }
  }
@media (min-width: 1200px) {
    .nav-toggle { display: none !important; }
    .head-hours { display: flex !important; }
  }
@media (min-width: 1200px) {
    .sticky-line { display: none !important; }
  }
.txtfill { position: relative; display: block; color: rgb(219, 219, 219) !important; }
.txtfill::before {
    content: attr(data-txt); position: absolute; inset: 0;
    color: var(--wc, rgb(51, 56, 63)); clip-path: inset(0 100% 0 0); pointer-events: none;
    white-space: pre-wrap;
  }
.txtfill.on::before { animation: txtFill 2.2s ease var(--d, 0s) forwards; }
@keyframes txtFill { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 560px) {
    section p, .site-root p, footer p, section li, .site-root li, section dd, section dt { text-align: left !important; }
    .eyebrow { text-align: center !important; }
    section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
    section > div[style*="margin-inline:auto"], footer > div[style*="margin-inline:auto"] { width: auto !important; margin-inline: 0 !important; }
  }
@media (max-width: 560px) {
    .footer-navs { flex-direction: column !important; gap: 0 !important; width: 100%; }
    .footer-navs nav { width: 100%; gap: 0 !important; }
    .footer-navs a { display: block; border-top: 1px solid #2B2B2B; padding: 15px 2px; }
    .footer-navs nav:last-child a:last-child { border-bottom: 1px solid #2B2B2B; }
    .footer-btns { align-items: center !important; }
    .footer-btns a { max-width: none !important; width: 100% !important; }
  }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .txtfill::before { clip-path: inset(0 0 0 0) !important; animation: none !important; }
  }

/* ---- index ---- */
@keyframes heroSlide {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
  }
@keyframes logoIn {
    from { opacity: 0; transform: scale(.55) rotate(-14deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
  }
@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
  }
@keyframes logoDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes logoFill { from { fill-opacity: 0; } to { fill-opacity: .7; } }
.drawlogo path {
    stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
    animation: logoDraw 2.1s ease forwards, logoFill 1s ease 1.9s forwards;
  }
.drawlogo path:nth-of-type(2) { animation-delay: .35s, 2.25s; }
.drawlogo path:nth-of-type(3) { animation-delay: 1.7s, 2.6s; }
.drawlogo path:nth-of-type(4) { animation-delay: 1.85s, 2.75s; }
@media (min-width: 1200px) {
    .nav-toggle { display: none !important; }
    .head-hours { display: flex !important; }
    .hero-copy { margin-left: calc(100px - (100vw - min(1180px, 94vw)) / 2); }
  }
@media (min-width: 769px) and (max-width: 1100px) {
    .hero-logo { left: 35% !important; }
  }
@media (max-width: 1100px) {
    .trouble-h { font-size: clamp(24px, 3.4vw, 36px) !important; }
  }
@media (max-width: 768px) {
    .about-lede { font-size: 30px !important; }
    .hero-logo { left: 34% !important; }
  }
@media (max-width: 560px) {
    section p, .site-root p, footer p, section li, .site-root li, section dd, section dt { text-align: left !important; }
    .eyebrow { text-align: center !important; }
    .hero-band { font-size: clamp(12px, 3.9vw, 20px) !important; letter-spacing: 0.04em !important; padding: 9px 14px !important; max-width: 100%; box-sizing: border-box; }
    .trouble-wrap { width: auto !important; margin-inline: 0 !important; }
    .hero-wrap { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
    .hero-h1 { font-size: clamp(30px, 9.2vw, 44px) !important; }
    .hero-copy { max-width: 100% !important; }
    .hero-media { width: 100% !important; top: auto !important; bottom: 0 !important; height: 58% !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr 1fr !important; gap: 0 !important; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; clip-path: polygon(0 11%, 100% 0, 100% 100%, 0 100%) !important; }
    .hero-media > div { grid-row: auto !important; grid-column: auto !important; }
    .hero-media > div:nth-child(1) { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%) !important; }
    .hero-media > div:nth-child(2) { clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%) !important; }
    .hero-media > div:nth-child(3) { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%) !important; }
    .hero-c-pc { display: none !important; }
    .hero-c-sp { display: block !important; }
    .hero-seam { display: none !important; }
    .hero-logo { display: none !important; }
    .hero-veil { display: block !important; background: linear-gradient(158deg, #0D0D0D 0%, #141414 12%, #7A7A7A 22%, #545A62 30%, #A0A0A0 38%, rgba(138,138,138,.35) 45%, transparent 52%) !important; }
    .hero-wrap { align-items: flex-start !important; padding-top: 48px !important; padding-bottom: 60px !important; }
    .hero-diag { display: none !important; }
  }
@keyframes flowGrad { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.flowgrad {
    background: linear-gradient(90deg, #0F0F0F, #6A6A6A, #BEBEBE, #6A6A6A, #0F0F0F);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
.flowgrad-bg {
    background: linear-gradient(90deg, #0F0F0F, #6A6A6A, #BEBEBE, #6A6A6A, #0F0F0F);
    background-size: 300% 100%;
  }
.txtfill.navy::before { color: #141414; }
@media (max-width: 560px) {
    section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
    section > div[style*="margin-inline:auto"], footer > div[style*="margin-inline:auto"] { width: auto !important; margin-inline: 0 !important; }
  }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .drawlogo path { stroke-dashoffset: 0 !important; fill-opacity: .7 !important; }
    .txtfill::before { clip-path: inset(0 0 0 0) !important; animation: none !important; }
  }

/* ---- flow ---- */
@media (max-width: 560px) {
    .flow-grid { grid-template-columns: 1fr !important; }
    .footer-navs nav { width: 100%; gap: 0 !important; }
    .footer-navs a { display: block; border-top: 1px solid #2B2B2B; padding: 15px 2px; }
    .footer-navs nav:last-child a:last-child { border-bottom: 1px solid #2B2B2B; }
    .footer-btns { align-items: center !important; }
    .footer-btns a { max-width: none !important; width: 100% !important; }
  }

/* ---- price-paint ---- */
table tr:nth-child(even) td { background: #F3F3F3; }

/* ---- faq ---- */
details > summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
    content: ''; flex: none; width: 22px; height: 22px; position: relative; transition: transform .25s ease;
    background:
      linear-gradient(#2B2B2B, #2B2B2B) center/100% 2.5px no-repeat,
      linear-gradient(#2B2B2B, #2B2B2B) center/2.5px 100% no-repeat;
  }
details[open] > summary::after { background: linear-gradient(#2B2B2B, #2B2B2B) center/100% 2.5px no-repeat; }

/* ---- information ---- */
@media (max-width: 560px) {
    section p, .site-root p, footer p, section li, .site-root li, section dd, section dt { text-align: left !important; }
    .eyebrow { text-align: center !important; }
    section dd { overflow-wrap: anywhere; }
    section > div > div[style*="overflow-x:auto"] { max-width: 100%; }
    .site-root { overflow-x: hidden; }
    section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; }
    section > div[style*="margin-inline:auto"], footer > div[style*="margin-inline:auto"] { width: auto !important; margin-inline: 0 !important; }
  }

/* ============================================================
   R-27 対応 ①：テキストのワイプ演出（.txtfill）★重要
   受領は .txtfill::before{content:attr(data-txt)} で「塗り終わった文字」を重ね、
   clip-path で左から出す作りだった。CueZillaの追加CSS欄は ::before の content を
   サニタイズで落とすため、そのまま納品すると疑似要素が生成されず
   「本文が rgb(219,219,219) の極薄グレーのまま」＝ほぼ読めない事故になる。
   （TOPの見出し18箇所＋ABOUT/PAINのリード文6行が該当）
   → 疑似要素を使わず、要素自身の background を background-clip:text で文字型に抜き、
     その背景位置をアニメーションさせて同じワイプを作る。
     content にも attr() にも依存しないのでサニタイズの影響を受けない。
     （このサイトは .flowgrad で既に background-clip:text を使っており実績のある手法）
   ============================================================ */
.txtfill::before{ display:none !important; }
.txtfill{
  position:relative;
  background-image:linear-gradient(to right, var(--wc, rgb(51,56,63)) 0 50%, rgb(219,219,219) 50% 100%);
  background-size:200% 100%;
  background-repeat:no-repeat;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent !important;
}
/* 受領の .txtfill.navy::before{color:#141414} 相当（塗り終わりの色） */
.txtfill.navy{ --wc:#141414; }
.txtfill.on{ animation:txtFillBg 2.2s ease var(--d, 0s) forwards; }
@keyframes txtFillBg{ to{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce){
  .txtfill{ background-position:0 0 !important; }
}
/* R-4: 受領HTMLに直接書かれた .txtfill（TOPのリード文6行）は、JSが動かないと
   薄グレーのまま残る。html.js が付いていない間は素の色で表示する。 */
html:not(.js) .txtfill{
  background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:inherit !important;
}

/* ============================================================
   R-27 対応 ②：よくあるご質問の開閉アイコン（details > summary）
   受領は summary::after{content:''} の箱に背景で＋/－を描いていた。content が落ちると
   アイコンごと消えるため、summary 自身の background で描き直す。
   ============================================================ */
details > summary::after{ display:none !important; }
details > summary{
  padding-right:58px !important;
  background-image:
    linear-gradient(#2B2B2B,#2B2B2B),
    linear-gradient(#2B2B2B,#2B2B2B);
  background-repeat:no-repeat;
  background-position:right 20px center, right 29.75px center;
  background-size:22px 2.5px, 2.5px 22px;
}
details[open] > summary{
  background-image:linear-gradient(#2B2B2B,#2B2B2B);
  background-position:right 20px center;
  background-size:22px 2.5px;
}

/* ============================================================
   R-4 対応：JS前提の初期非表示に no-JS フォールバック
   受領は .rline に inline style で opacity:0 を持たせ、JSが 1 に戻す作りのため、
   JSが動かないと本文が全消えになる。BODY内JSの先頭で html.js を付けるので、
   付いていない間は常時表示にする。
   ============================================================ */
html:not(.js) .rline{ opacity:1 !important; transform:none !important; }

/* ===== 写真未支給の画像スロット（受領 <image-slot src無し> の代替） ===== */
.img-slot-empty{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(45deg,#EFEFEF 0 12px,#E6E6E6 12px 24px);
  color:#8A8A8A; font-size:15px; letter-spacing:.04em; line-height:1.6;
  padding:12px; box-sizing:border-box;
}

/* ===== style-hover / style-focus から抽出（受領の擬似hover再現・R-7） ===== */
.mg-hv1:hover{background:#fff !important;color:#06C755 !important}
.mg-hv2:hover{background:#141414 !important;color:#fff !important;border-color:#fff !important}
.mg-hv3:hover{color:#fff !important}
.mg-hv4:hover{background:#fff !important;color:#141414 !important}
.mg-hv5:hover{background:#fff !important;color:#141414 !important;border-color:#141414 !important}
.mg-hv6:hover{background:#141414 !important;color:#fff !important}
.mg-hv7:hover{box-shadow:0 10px 30px rgba(20,20,20,.12) !important;border-color:#C2CEDE !important}
.mg-hv8:hover{background:#fff !important;color:#06C755 !important;border-color:#06C755 !important}
.mg-hv9:hover{background:#fff !important;color:#2B2B2B !important;box-shadow:inset 0 0 0 2px #2B2B2B!important}
.mg-hv10:hover{background:#141414 !important}


/* ===== 21_cuezilla-skin.css ===== */
/* ============================================================
   ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★
   ------------------------------------------------------------
   （Claude Code / Claude Design / 手作業、いずれの経路でも同じです）

   ■ 案件ごとの調整は、必ず `override.css` に書いてください。
     読み込み/結合順が  … → style.css → cuezilla-skin.css → 【override.css】  なので、
     override.css に書いた指定は本ファイルに打ち消されません。**案件の上書きが効く唯一の場所です。**
     （例: カード面を白にしたい → override.css に `:root{ --dyn-surface:#fff; }`）

   ■ なぜ編集してはいけないか
     本ファイルを案件で書き換えた瞬間、その案件の skin は共通資産から切り離されます。
     以後、共通側で直した修正（カード高さの不揃い／サイドバーの可読性／
     フォーム送信ボタンの崩れ 等）が **その案件には二度と届きません**。
     実際に S01189 で本ファイルの §0 が案件調整で書き換えられ、共通修正が届かなくなりました。
     「毎案件おなじ崩れを直している」の原因はこれです。

   ■ 共通で直すべき崩れを見つけたら
     案件で握り込まず、正本 `skin/cuezilla-skin.css` へ還流してください（全案件に効きます）。
     還流し忘れると、次の同期でその修正は消えます。

   詳細は R-30（70_運用ルール/運用ルール集.md）。
   ============================================================ */

/* ============================================================
   CueZilla 動的パーツ スキンキット v1.0
   ------------------------------------------------------------
   目的: ブログ/施工実績(blog-ex)/お問い合わせ/パンくず/ページヘッダー等の
         CueZilla 既定パーツを、サイトのトンマナ（ダーク/ライト・ブランド色・
         フォント・角丸）に "自動で寄せる" 汎用CSS。案件ごとの調整を最小化する。

   思想:
     (1) 色は CueZilla テーマ変数(--main-color 等)から自動連動
         → サイトのテーマ設定がそのまま skin にも効く（色は一元管理）
     (2) フォント/角丸/グリッド幅はトークンで指定（テーマ変数に無いため）
     (3) partsNNN は採番が可変だが接尾辞は共通(_post_wrap 等)
         → 属性セレクタ [class*="_xxx"] で番号非依存に当てる（単一属性セレクタまで。積んで詳細度を稼がない）

   ★適用範囲と安全契約（重要・memory: cuezilla-css-safety-contract）:
     ・本skinは「CueZilla既定の動的パーツ」だけを寄せる。サイトのフリーコーディング設計には当てない
       （生成サイトCSSは変数非依存＋具体値＋自作接頭辞クラスで組む＝構造的に非衝突・skinと干渉しない）。
     ・[class*=…]を積んで詳細度を同点/超過させる手法は禁止（脆い・過剰マッチ・アーマーレース）。
       単一の番号非依存セレクタ＋!important1個で当てる（theme_defaultは非importantなので確定勝ち）。
     ・!important可は「レイヤーで越えられない相手」＝theme_default／body内インライン／BSユーティリティ／
       .partsNNN_blog_<ID>(0,3,0) のみ。後者(0,3,0)+!importantには詳細度で負けるため、
       負けた時だけ §14 の手順で実採番(0,3,1)を【案件CSS】に足して勝つ（汎用skinには番号を書かない）。
     ・変数の注意：実機は body内コンポ<style>の:rootが7色(--main-color等)を撒きうる（490件中16件）。
       →§0の--dyn-*はその頁で乗っ取られ得る。動的パーツの色合わせには許容だが、サイト設計の主機構にしない。

   使い方:
     1. §0 のトークンを案件に合わせて調整（ダーク/ライトはプリセットをコピー）
     2. CueZilla テーマカラー(--main-color 等)をブランド値に設定
     3. 本ファイルをサイト全体CSS(AddCssInfo)へ貼る（サイト固有のフリーコーディングCSSの後ろ）
   ============================================================ */


/* ============================================================
   §0  トークン ─ ここだけ案件ごとに調整
   ============================================================ */
:root{
  /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） ---
     ※これらは【動的パーツの色合わせ用】。生成サイトCSSはこの変数に依存せず具体値で書く（安全契約）。
       実機では body内コンポ<style>の:rootが --main-color 等を頁単位で上書きしうる＝--dyn-*も追従する。 */
  --dyn-bg:        var(--background-color, #ffffff);   /* ページ/セクション背景 */
  --dyn-surface:   var(--temporary-color, #f4f4f2);    /* カード/パネル/入力欄の面 */
  --dyn-text:      var(--text-color, #222222);         /* 本文 */
  --dyn-heading:   var(--text-color, #111111);         /* 見出し */
  --dyn-muted:     var(--sub-color, #8a8a8a);          /* 補助/日付 */
  --dyn-border:    var(--sub-color, #dddddd);          /* 罫線/枠 */
  --dyn-accent:    var(--main-color, #1e3a5f);         /* アクセント（ボタン/チップ/見出しバー） */
  --dyn-accent-2:  var(--link-color, var(--main-color, #1e3a5f)); /* リンク/ホバー */
  --dyn-on-accent: #ffffff;                             /* アクセント面の上の文字 */

  /* --- フォント（site.css の :root に定義があればそれを使用） --- */
  --dyn-font-display: var(--font-display, "Noto Serif JP","Yu Mincho",serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Yu Gothic",sans-serif);
  --dyn-font-numeric: var(--font-numeric, "EB Garamond","Noto Serif JP",serif);

  /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 0 --- */
  --dyn-radius: 6px;
  /* --- 一覧カードの最小幅 / 段組ギャップ --- */
  --dyn-card-min: 300px;
  --dyn-gap: 32px;
}

/* === テーマ プリセット（使う方を §0 の後にコピペして上書き） =========
   【ダーク】
   :root{
     --dyn-bg:#0A0A0A; --dyn-surface:#111110; --dyn-text:#F4F1EC; --dyn-heading:#FAF7F1;
     --dyn-muted:#8C857A; --dyn-border:#3A352D; --dyn-accent:#8E3A22; --dyn-accent-2:#B0533A;
     --dyn-on-accent:#FAF7F1; --dyn-radius:0;
   }
   【ライト】
   :root{
     --dyn-bg:#ffffff; --dyn-surface:#f7f7f5; --dyn-text:#222222; --dyn-heading:#111111;
     --dyn-muted:#8a8a8a; --dyn-border:#e3e3e3; --dyn-accent:#1e3a5f; --dyn-accent-2:#1e3a5f;
     --dyn-on-accent:#ffffff; --dyn-radius:6px;
   }
   ※ CueZilla テーマ変数(--main-color 等)を設定する場合は §0 が自動連動するのでプリセット不要。
   ============================================================ */


/* ============================================================
   §1  パンくず（CueZilla parts###_breadcrumb / p-breadcrumb）
   実markup: div.parts###_breadcrumb.p-breadcrumb.c-breadcrumb
             > ul.p-breadcrumb__inner(BreadcrumbList) > li.p-breadcrumb__item(ListItem)
   CueZilla共通CSSにパンくず装飾は無い → skin側で横並び・区切り・配色を付与
   ============================================================ */
[class*="_breadcrumb"], .p-breadcrumb{ background:var(--dyn-bg) !important; }
.p-breadcrumb__inner{
  list-style:none; margin:0 auto; padding:14px 24px;
  max-width:1200px; display:flex; flex-wrap:wrap; align-items:center;
}
.p-breadcrumb__item{
  display:inline-flex; align-items:center;
  color:var(--dyn-muted) !important; font-family:var(--dyn-font-body);
  font-size:.78rem; letter-spacing:.04em;
}
.p-breadcrumb__item a{ color:var(--dyn-muted) !important; text-decoration:none; }
.p-breadcrumb__item a:hover{ color:var(--dyn-accent-2) !important; text-decoration:underline; }
.p-breadcrumb__item:last-child{ color:var(--dyn-text) !important; }   /* 現在地 */
/* 区切り（2件目以降の前に "›"） */
.p-breadcrumb__item + .p-breadcrumb__item::before{
  content:"\203A"; margin:0 .6em; color:var(--dyn-border) !important; font-size:.95em;
}
.p-breadcrumb meta{ display:none; }   /* schema.org の <meta itemprop="position"> は非表示 */


/* ============================================================
   §2  ページヘッダー（[class*="_article_header"]）画像上のタイトル
   ============================================================ */
[class*="_article_header"] .ja, [class*="_article_header"] h1, [class*="_article_header"] h2{
  color:var(--dyn-heading) !important; font-family:var(--dyn-font-display) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.5) !important;
}
[class*="_article_header"] .en{ color:var(--dyn-muted) !important; font-family:var(--dyn-font-numeric) !important; letter-spacing:.1em; text-shadow:0 1px 10px rgba(0,0,0,.5) !important; }


/* ============================================================
   §3  ページネーション（2系統。テーマCSSの持ち方が違うので扱いを分ける＝崩れ防止）
   ・.pagination_*（enjoyworks系）            … テーマが素 → 体裁＋色を一式付与
   ・[class*="_pagenation"]（parts222/225/228系）… テーマが体裁を持つ（flex/padding/border/白黒ハードコード）
        → レイアウト・サイズはテーマに任せ、ハードコードの白黒(#000/#fff)だけブランド色へ置換（最小限）。
          a/.current 以外（余白用の素の <span>）には触らない＝二重ボックス化を防ぐ。
          --dyn-accent は §0 で var(--main-color) にバインド済み＝サイトのCMS色に自動一致（案件側の手当て不要）。
   ============================================================ */
/* (A) pagination_* 系：テーマ装飾が無いので一式付与 */
.pagination_num, .pagination_prev, .pagination_next{
  font-family:var(--dyn-font-numeric); color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.pagination_num.current{ background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.pagination_num:hover, .pagination_prev:hover, .pagination_next:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }

/* (B) _pagenation 系：色だけ寄せる（ジオメトリはテーマのまま＝箱を再定義しない） */
[class*="_pagenation"] a{ border-color:var(--dyn-accent) !important; color:var(--dyn-text) !important; }
[class*="_pagenation"] span.current, [class*="_pagenation"] .current, [class*="_pagenation"] .active{
  background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
[class*="_pagenation"] a:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }
.pe-none{ opacity:.3; pointer-events:none; }


/* ============================================================
   §4  ブログ / 施工実績(blog-ex) 一覧（番号非依存）
   ============================================================ */
/* 一覧セクションの地 */
[class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */
/* カード並び（最小幅を確保して細くなりすぎない） */
[class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* カード */
[class*="_post_wrap"]{
  /* カード等寸化：中身を縦に積み、内側の <a>/本文枠を flex で伸長させて高さを揃える（S01189還流） */
  display:flex !important; flex-direction:column;
  margin:0 !important;   /* theme_default の margin-bottom(55px等)残存で最終行カードだけ高さ不揃いになるのを打ち消す */
  width:auto !important; max-width:none !important; text-decoration:none;
  background:var(--dyn-surface) !important; border:1px solid var(--dyn-border) !important;
  border-radius:var(--dyn-radius); overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
[class*="_post_wrap"]:hover{ transform:translateY(-4px); border-color:var(--dyn-accent-2) !important; }
[class*="_post_wrap"] > a{ display:flex; flex-direction:column; flex:1 1 auto; color:inherit; }  /* カード全体ラップ<a>を縦伸長（内容を上下に満たす） */
/* サムネ等寸化：グリッド列の幅から高さを算出（幅制約下＝§6.5の aspect-ratio×height 併用の罠には該当しない） */
[class*="_post_img"]{ width:100%; display:block; border-radius:0; aspect-ratio:16/10; overflow:hidden; }
[class*="_post_img"] img{ width:100%; height:100%; object-fit:cover; display:block; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:10px; align-items:center; }
[class*="_post_status"]:has([class*="_title-excerpt"]){ display:block !important; }   /* parts228系「日付｜タイトル」の横並びを解除（:has非対応環境ではflex-wrapで折返し） */
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; flex:1 1 auto; }   /* 本文枠を伸長＝カード等寸化の要 */
[class*="_post_status"]:has([class*="_title-excerpt"]) [class*="_title-excerpt"]{ padding:10px 0 16px !important; }   /* 施工実績は左端揃え */
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; font-weight:700 !important; line-height:1.5; }
[class*="_post_excerpt"]{ color:var(--dyn-muted) !important; }
[class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* カテゴリ/ステータスは1チップに。
   テーマは既に _post_category に border:1px solid var(--main-color) を持つ＝枠を“足す”と2重になるので
   同一要素に !important で単一の枠を確定（色は --dyn-accent=var(--main-color) で一致）。幅は % 制約を解除し content 幅に。 */
[class*="_post_category"]:not([class*="_sidebar"]), [class*="_post_status"] > span:last-child{
  /* :not(_sidebar) ＝ この§4チップ装飾が §5 の _sidebar_post_category_count へ漏れ二重適用されるのを防ぐ（S01189還流） */
  width:auto; max-width:none !important;
  background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important;
  border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important;
}
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; }

/* --- 一覧パーツ固有の崩れ2点（実共有CSS=theme parts222/225/228 を突き合わせて確定）---
   (a) 自動セクション見出し（「ブログ」「施工実績」等）の撤去：
       テーマは `.parts222_section h2 / .parts228_section h2` に
       color:var(--main-color)/font-size:35px/text-align:center を付与し、
       一覧上部に大見出しを自動描画する。自前の下層ヘッダー(hero)と二重化＝崩れ。
       → 一覧パーツ(_post_list を含む _section)直下の素の h2 だけ隠す。
         残したいサイトは案件CSSで個別に復帰。`:has()` 非対応保険に f_meiryo 版も併記。 */
[class*="_section"]:has([class*="_post_list"]) > h2,
[class*="_section"] > h2.f_meiryo{ display:none !important; }
/* (b) flex前提の余白スペーサー ::after の無効化：
       テーマは `.parts228_post_list::after{content:"";width:32.465%}` で flex の最終行詰めをする。
       §4 で _post_list を grid 化すると、この ::after が「空のゴースト列」になり最終行が片寄る。
       → grid では不要なので除去（content:none で擬似要素自体を消す）。 */
[class*="_post_list"]::after{ content:none !important; display:none !important; }


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
/* サイドバー見出し（「最近の投稿」「カテゴリ」）の可読性を確保。
   theme_default は `.partsNNN_sidebar h3{ background-color:var(--main-color); color:#fff }` と
   色を直当てするが、§12 の見出しリセットが**背景だけ**を transparent にするため、
   ライト基調の案件では「白地に白文字」で消える（ダーク案件では地に映えるため露見しない）。
   背景は戻さず（skinのフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。
   あわせて左右パディングも解除する：`padding:15px 20px` は**帯があった前提**の内側余白のため、
   帯を透明化したまま残すと「見出しだけ20px字下げ」になり、直下の日付／タイトルと文頭がズレる。
   （詳細ページ側の .recent_post_title には下で同じ手当てをしており、一覧側だけ取り残されていた） */
[class*="_sidebar"] h3{ color:var(--dyn-heading) !important; padding-left:0 !important; padding-right:0 !important; }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
/* 「最近の投稿」見出し（詳細ページ側）の帯を外して一覧側と体裁を揃える。
   theme_default は `.recent_posts_wrap .recent_post_title{ background-color:var(--main-color); color:#fff }` で帯を敷くが、
   §12 の見出しリセットは (a) 包み(parts166_single_article / parts-blog-ex-single-wrap)が `_section` を含まない
   (b) 要素が <div>（h2/h3でない）── の2点で**届かず**、帯だけが生き残る。
   一方すぐ上の §5 が文字色を --dyn-heading（＝ライトでは濃色）へ寄せるため「濃い帯に濃い文字」となり、
   案件ごとに帯との視認性を見て文字色を手当てする必要があった。帯を外せば一覧（§12で帯が外れる）と揃い、手当ても不要になる。
   ※帯を活かしたい案件は案件側で `background:var(--dyn-accent); color:var(--dyn-on-accent)` を再指定する。 */
.recent_post_title{ background:transparent !important; padding-left:0 !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* 記事li の区切り罫線：theme_default が #666 をハードコードしており地に合わず過剰に見える → トークンへ */
[class*="_sidebar"] ul li, .recent_posts_wrap ul li{ border-bottom-color:var(--dyn-border) !important; }
/* カテゴリ右の記事数を視認できるチップに */
[class*="_sidebar_post_category_count"]{ background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:0 8px !important; }
/* カテゴリ一覧 li：theme_default 由来の左右縦罫線(1px solid #666)を除去（下罫線は区切りとして意図的に残す）。S01189還流 */
[class*="category_post_count"] li{ border-left:0 !important; border-right:0 !important; }
/* カテゴリ名と件数チップが重ならないよう両端寄せ。
   あわせて左右パディングを解除：theme_default は `.category_post_count ul li a{ padding:15px 20px }` と
   **帯／箱があった前提**の字下げを持つため、帯を外した状態では
   カテゴリ名だけが 20px 右にずれ、見出し(h3)や「最近の投稿」リストと頭が揃わない。
   上下15pxはタップ領域として残す。 */
[class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-left:0 !important; padding-right:0 !important; }


/* ============================================================
   §6  詳細ページ（本文 / 署名 / SNS / 詳細内スライダー）
   ============================================================ */
.parts-blog-ex_text{ font-family:var(--dyn-font-body); color:var(--dyn-text) !important; line-height:1.9; }
.parts-blog-ex_text h2, .parts-blog-ex_text h3{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
.signature_wrap{ font-family:var(--dyn-font-display); color:var(--dyn-muted) !important; border-top:1px solid var(--dyn-border); padding-top:16px; }
.slick-prev, .slick-next{ color:var(--dyn-accent-2) !important; }
/* ※詳細本文の親ラッパーが固定class薄め。崩れる場合は実ページで本文コンテナを確認し追補 */


/* ============================================================
   §7  お問い合わせフォーム
   ============================================================ */
.contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
[class*="_form_wrap"]{ max-width:720px; margin:0 auto; }
[class*="_form_wrap"] label, [class*="_form_wrap"] dt, [class*="_form_wrap"] .ja, [class*="_form_wrap"] .en{ color:var(--dyn-text) !important; }
/* 入力欄を十分な大きさに（チェック/ラジオは除外） */
[class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
[class*="_form_wrap"] dd select{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
[class*="_form_wrap"] textarea, .form_textarea textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
/* チェックボックス/ラジオはサイズ統一 */
[class*="_form_wrap"] input[type="checkbox"], [class*="_form_wrap"] input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; }
/* 必須バッジ: 文字を中央・折り返さない・角丸はトークン */
.required{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.error{ color:var(--dyn-accent-2) !important; }
/* 「お問い合わせ内容」を囲む大きな箱(枠線)を撤去 */
.form_textarea, .form_text_dt{ border:none !important; background:transparent !important; }
/* 送信ボタン。★セレクタに包み(.contact_submit 自体)を含めないこと：
   包みは複数ボタンを載せるレイアウト用のdivで、ここを accent で塗ると
   (a) 完了ページ=藍の包みに藍のボタンが乗って同化し、ボタンが消えて見える
   (b) 確認ページ=すぐ下でアウトライン化する「戻る」が藍地に濃色文字となり判読不能（実測 1.01:1）
   になる。当てる先はボタン実体だけでよい（dynamic-form.md §1 の意図も「送信 .contact_submit input = accent地」）。 */
.contact_submit button, .contact_submit input{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; }
/* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */
.contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; }
/* 送信前 disabled（reCAPTCHA未完了）の見え方 */
.contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- フォーム実コードで頻出するが §7本体に無かった部品（parts213等の実装を突き合わせ）--- */
/* ファイル添付の自作UI：受領インライン<style>が #eee 地・#999 文字・明るいグラデで固定し、
   ダーク地で白い箱・低コントラストになる。トークンで地・枠・文字を寄せる（label_file_upload に限定）。 */
.label_file_upload{ display:block; width:100%; padding:12px 14px; cursor:pointer;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
.label_file_upload button{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; pointer-events:none; }
.label_file_upload span, #file-chosen, [id$="filechosen"]{ color:var(--dyn-muted) !important; }
.des{ color:var(--dyn-muted) !important; }
/* 注意書き（文字数制限・ファイル名規則等の補助）：色未指定/未定義var(--red)で可読性がばらつくため muted で固定（AA確保色） */
.attention{ color:var(--dyn-muted) !important; }
/* 郵便番号は narrow に保つ：上の入力欄ルール `[class*="_form_wrap"] dd input:not([checkbox]):not([radio])`
   は (0,3,2)+!important で .zip も全幅化し〒[郵便番号][住所]を壊す。これに勝つよう :not() を重ねて
   詳細度を (0,4,2) に上げて .zip だけ幅を戻す（parts219等 form_address系・番号非依存）。 */
[class*="_form_wrap"] dd input.zip:not([type="checkbox"]):not([type="radio"]){ width:9em !important; max-width:9em !important; display:inline-block; margin-right:8px; }
/* プライバシー同意 */
.privacypolicy{ background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:16px; color:var(--dyn-muted) !important; }
.privacypolicy-link{ color:var(--dyn-accent-2) !important; }
/* 電話/メール等の content バー（角丸はトークン） */
[class*="_content"] [class*="btn"], [class*="_content"] a[class*="round"]{ border-radius:var(--dyn-radius) !important; }


/* ============================================================
   §7b  お問い合わせフォーム ─ wpcf7 / .formBox 系（第2系統）
   ------------------------------------------------------------
   【重要】フォームには構造が2系統ある（dynamic-harvest.js の「フォーム系統」で判定）：
     ・§7  = parts_form/dl 系（[class*="_form_wrap"] / dt / dd / .required / .contact_submit）
     ・§7b = wpcf7/.formBox 系（.formWrap > .formBox > dt>label>span.req + dd>input,
              送信=input.wpcf7-submit。SEIKEN/協力会社フォーム等 Contact Form 7 由来）
   §7 の `[class*="_form_wrap"]` は §7b 構造に当たらないため、当該系統では本セクションが要る。
   いずれも番号非依存のセマンティッククラスで記述。
   ============================================================ */
.formWrapbg, .formWrap, .form, [class*="formSec"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.formWrap{ max-width:720px; margin:0 auto; }
.formBox{ margin-bottom:20px; }
.formBox dt, .formBox label{ color:var(--dyn-text) !important; }
.formBox dd input:not([type="checkbox"]):not([type="radio"]),
.formBox dd select,
.formWrap input[type="text"], .formWrap input[type="email"], .formWrap input[type="tel"]{
  width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important;
  min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formBox dd textarea, .formWrap textarea{
  width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formWrap input[type="checkbox"], .formWrap input[type="radio"]{
  width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important;
  vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important;
}
/* 必須バッジ（wpcf7系は .req） */
.req, .formBox .req{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important;
  white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important;
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
.wpcf7-not-valid-tip, .wpcf7-response-output{ color:var(--dyn-accent-2) !important; }
/* 送信（Contact Form 7） */
input.wpcf7-submit, .formWrap button[type="submit"]{
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
  border:none !important; border-radius:var(--dyn-radius) !important;
  min-height:54px !important; padding:14px 28px !important; font-size:16px !important; cursor:pointer;
}
/* プライバシー同意（両系統共通の .privacypolicy* は §7 で適用済） */


/* ============================================================
   §14  自動CSSに負けた時の手順（R-27）※汎用アーマーは持たない＝安全契約
   ------------------------------------------------------------
   CueZilla は body内コンポ<style>でパーツ単位に `.partsNNN_blog_<ID> .card .card-body{…!important}`
   等の高詳細度(0,3,0)+!important を吐く。§1〜§9 の単一属性セレクタ(0,1,0〜0,2,0)+!important は
   同プロパティで【負ける】（症状：当てているのに反映されない＝崩れの常連）。

   → 【禁止】[class*=…]を積んで(0,3,0)に並べる汎用アーマー（脆い・過剰マッチ・アーマーレース）。
        ＝以前ここにあった `[class*="parts"][class*="_blog"] .card` 等は本契約により撤去した。
        （theme_default 非importantへの色寄せは §8 の単一 `[class*="_blog"] .card`(0,2,0)+!important で足りる）
   → 【正】負けたパーツだけ、harvestで実採番を取り【案件CSS】末尾に (0,3,1) を1個足して確実に勝つ：
        section.parts131415_blog_xxxx .card .card-body{ … !important }   ← 実採番。構造変化に不感
     ※ skin は全案件共通なので案件固有の番号は書かない（負けた時だけ案件側で対処）。
     ※ 採番取得＝verify/dynamic-harvest.js。当て方＝50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §14。 */
/* 見出しのテーマ装飾(角丸/中央寄せ/背景/罫線)残りをパーツ内でリセット（R-21）。
   theme_default は非importantなので、単一 [class*="_section"] + !important で確定勝ち（[class*]を積まない）。 */
[class*="_section"] h2, [class*="_section"] h3{
  border-radius:0 !important; background:transparent !important; border:none !important; text-align:inherit !important;
}


/* ============================================================
   §8  トップ用 お知らせ/ブログ teaser（notice-news / blog teaser）
   ============================================================ */
.parts040506_notice-news{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.parts040506_notice-news *{ color:var(--dyn-text) !important; }
.parts040506_notice-news .title, .parts040506_notice-news .title a{ color:var(--dyn-heading) !important; }
.parts040506_notice-news [class*="date"], .parts040506_notice-news .f_yugothic{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
.parts040506_notice-news .more{ white-space:nowrap !important; color:var(--dyn-accent-2) !important; }
.parts040506_notice-news a{ color:var(--dyn-accent-2) !important; }
/* サムネ型ブログ teaser */
[class*="_blog_title_wrap"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_blog_thumbnail"]{ border-radius:var(--dyn-radius); }
/* teaser内が Bootstrap .card（既定で白）の場合のダーク/トーン化 */
[class*="_blog"] .card{ background:var(--dyn-surface) !important; border-color:var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; }
[class*="_blog"] .card-title, [class*="_blog"] .card-text{ color:var(--dyn-text) !important; }
[class*="_blog"] .card-title{ font-family:var(--dyn-font-display) !important; }


/* ============================================================
   §9  Bootstrap汎用クラスの地ならし（パーツ内に限定）
       text-dark / bg-light 等がパーツ内でトーンを乱すのを抑える
   ============================================================ */
[class*="parts"] .text-dark{ color:var(--dyn-text) !important; }
[class*="parts"] .bg-light{ background:var(--dyn-surface) !important; }
.card-header.bg-light{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }


/* ============================================================
   §10  プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版）
   ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される
   ============================================================ */
.privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; }
.privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); }
.privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; }
.privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; }
.privacy-item{ margin-bottom:32px; }
.privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; }
.privacy-item__body{ color:var(--dyn-text); }
/* 原文の (1)(2)… 表記を維持（auto ol の "1." ではなく括弧付き番号で表示） */
.privacy-item__list{ list-style:none; counter-reset:pp; margin:8px 0; padding:0; }
.privacy-item__list li{ counter-increment:pp; padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }
.privacy-item__list li::before{ content:"(" counter(pp) ") "; }


/* ============================================================
   §11  下層ヘッダーパーツ（templates/subpage-header.html）
   サイトヘッダーとパンくずの間。フリーコーディングで別パーツ化
   ============================================================ */
/* padding-top に固定ヘッダー高さ(--fixed-header-h)を加算＝固定ヘッダーへのめり込み防止。
   固定ヘッダーが無いサイトは既定0で無影響。固定ヘッダー採用サイトは案件CSSで :root{ --fixed-header-h:88px } 等を設定（R-18）。 */
.subpage-header{ position:relative; padding:calc(72px + var(--fixed-header-h, 0px)) 24px 72px; background:var(--dyn-surface); text-align:center; overflow:hidden; }
.subpage-header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:0; }
.subpage-header__inner{ position:relative; z-index:1; }
.subpage-header__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,3rem); line-height:1.3; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.subpage-header__en{ font-family:var(--dyn-font-numeric); color:var(--dyn-muted); letter-spacing:.12em; margin-top:8px; }


/* ============================================================
   §12  システム定型ページ：送信完了(thanks) / 404
   templates/thanks.html, templates/404.html 用。トークンスキン準拠
   ============================================================ */
.thanks, .notfound{ max-width:760px; margin:0 auto; padding:calc(80px + var(--fixed-header-h, 0px)) 24px 96px; text-align:center; }
/* CueZilla 既定404（section.not-found）はレイアウトを変えず、固定ヘッダー分の上余白だけ確保（R-18） */
.not-found{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); }
.thanks__title, .notfound__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.3; margin-bottom:28px; }
.thanks__lead, .notfound__lead{ color:var(--dyn-text); line-height:2; margin-bottom:40px; }
.thanks__action, .notfound__action{ margin-top:8px; }


/* ============================================================
   §13  Bootstrap(テーマ)既定の恒久打ち消し（R-20）
   ------------------------------------------------------------
   CueZillaテーマが読み込む Bootstrap の "素のタグ/汎用クラス" が
   フリーHTMLに当たって崩す症状を、案件ごとの手当て無しで地ならしする。
   ここは確認済みの実害2件（test0605）に限定して打ち消す。
   ※「色/余白/タイポ」を意図して変える装飾は接頭辞クラス(.xw- 等)で
     付け直す＝下記より高詳細度になり、本セクションに勝つ（壊さない）。
   ============================================================ */
/* (a) <mark> / .mark の黄ハイライト背景：ロゴや見出しが黄色い箱になる症状 → 無効化。
       意図的なマーカー装飾は専用クラスで（Bootstrap名 .mark を流用しない＝R-20）。 */
mark, .mark{
  background-color:transparent !important; color:inherit !important;
  padding:0 !important; border-radius:0 !important;
}
/* (b) a:hover が Bootstrap青(#0a58ca)になる症状 → 既定は「ホバーで色を変えない」。
       !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が
       そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */
a:hover{ color:inherit; }

/* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。
       本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */
a[href^="tel:"]{ white-space:nowrap; }


/* ===== 22_override.css ===== */
/* ============================================================
   override.css — CueZilla標準テーマ／自動描画パーツへの案件上書き（skinの後に結合／R-30）
   ============================================================ */

/* ============================================================
   ヘッダーの position:sticky を実際に効かせる（3点セット。1つでも欠けると追従しない）
   2026-08-18 に実機で「sticky が付いているのに追従しない」を実測して確定した。
   ------------------------------------------------------------
   ① theme_default の body{overflow-x:hidden} はスクロールコンテナを作って sticky を殺すので
      overflow-x:clip に置き換える（clip はスクロールコンテナを作らない）。
   ② theme_default が html,body に height:100% を当てており、**body の箱がビューポート高さで止まる**。
      sticky は「包含ブロックの箱の中」しか動けないので、これだと数百pxで抜けてしまう。
      → height:auto に戻し、min-height:100% で元の意図（最低でも1画面）は残す。
      （実測: body 676px → 9107px。theme_default.css は別オリジンで cssRules を読めないため、
        セレクタ走査では見つからない。height:auto を当てて body の高さが変わるかで確かめること）
   ③ ヘッダーを包む .site-head-root の高さ＝ヘッダーの高さ＝**動ける余地ゼロ**。
      ラッパー側を sticky にして、包含ブロックを body（＝全高）にする。
   ============================================================ */
body{ overflow-x:clip !important; }
html, body{ height:auto !important; min-height:100%; }
.site-head-root{ position:sticky; top:0; z-index:60; }

/* CueZilla自動パンくずは全ページ非表示（本サイトはパンくずを持たないデザインのため） */
.parts231_breadcrumb, [class*="_breadcrumb"], .p-breadcrumb{ display:none !important; }

/* ============================================================
   ▼▼ ここから下は「実機の実DOMを採って書いた」ブロック（R-28）▼▼
   採取日 2026-08-17 / https://enjoyworks-test23.tech（Chrome・認証済み）
   採番: お知らせ帯 = design-parts-54<ハッシュ> / TOPブログ抜粋 = parts131415_blog
        ブログ一覧 = parts222 / お問い合わせ = parts213（フォーム系統は parts_form/dl 系＝skin §7）
   ※ハッシュ部分はサイトごとに変わるので、当て先は接頭辞の部分一致で書く。
   ============================================================ */

/* ------------------------------------------------------------
   ① トップの「お知らせ」帯（design-parts-52 / design-parts-54）
   ★お知らせパーツは種類が複数ある。実機で2種を確認済みなので両方に当てる:
     design-parts-52 … section > div.container > div.content > h4.banner-area + ul > li > a > div.parts-52-textarea(span.date + span)
     design-parts-54 … section > div.container.px-0 > div.content.col-lg-8 > ul > span.banner-area + div.list-wrapper(slick) > li > a
   どちらもテーマ既定は「黒いラベル・素の並び」なので、受領デザインの帯
   （全幅#F3F3F3・下罫線・1180px・メタルグラデの18pxラベル・日付#8A8A8A）へ寄せる。
   ※パーツを差し替えると採番が変わって当て先が外れる。差し替えたら実DOMを採り直すこと（R-28）。
   ------------------------------------------------------------ */
[class*="design-parts-52"], [class*="design-parts-54"]{
  background:#F3F3F3 !important;
  border-bottom:1px solid #E2E2E2;
  padding:0 !important;
}
[class*="design-parts-52"] > .container, [class*="design-parts-54"] > .container{
  max-width:min(1180px,94vw) !important; width:min(1180px,94vw); margin-inline:auto;
  padding:16px 0 !important;
}
[class*="design-parts-52"] .content, [class*="design-parts-54"] .content{
  width:100% !important; max-width:none !important; flex:1 1 auto !important;
  border-radius:0 !important; align-items:center !important;
  gap:clamp(16px,3vw,40px); flex-wrap:wrap;
}
[class*="design-parts-52"] .banner-area, [class*="design-parts-54"] .banner-area{
  flex:none; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#232323 0%,#6A6A6A 20%,#9E9E9E 34%,#2B2B2B 50%,#767676 66%,#232323 84%,#3A3A3A 100%) !important;
  color:#fff !important; border-radius:0 !important;
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900 !important;
  font-size:18px !important; letter-spacing:0.12em !important;
  padding:8px 20px !important; line-height:1.2;
}
[class*="design-parts-52"] ul, [class*="design-parts-54"] ul{
  background:transparent !important; border-radius:0 !important; list-style:none;
  margin:0 !important; padding:0 !important;
  flex:1 1 240px; min-width:0; display:flex; align-items:center;
}
[class*="design-parts-52"] li, [class*="design-parts-54"] li{ padding:0 !important; width:100%; min-width:0; }
[class*="design-parts-52"] li a, [class*="design-parts-54"] li a{ color:#1A1A1A !important; text-decoration:none; }
[class*="design-parts-52"] .parts-52-textarea{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; min-width:0; }
[class*="design-parts-52"] .parts-52-textarea > span:not(.date){
  font-size:18px; letter-spacing:0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
[class*="design-parts-54"] .list-wrapper{ flex:1 1 auto; min-width:0; }
[class*="design-parts-54"] li a{ font-size:18px; letter-spacing:0.02em; }
[class*="design-parts-52"] .date, [class*="design-parts-54"] .date{
  color:#8A8A8A !important; font-weight:700 !important; font-size:16px !important; letter-spacing:0.04em; flex:none;
}
[class*="design-parts-52"] .more-link, [class*="design-parts-54"] .more-link{
  border:0 !important; border-radius:0 !important; background:transparent !important;
  color:#2B2B2B !important; font-weight:700; font-size:16px; padding:0 !important; white-space:nowrap;
}

/* ------------------------------------------------------------
   ② トップの「ブログ抜粋」（parts131415_blog）
   実DOM: section.container-fluid.parts131415_blog_xxxx > div.container-lg
            > div.parts131415_blog_title_wrap（見出し・05bに残したので非表示）
            > div.row.row-cols-lg-3 > div.col > div.card > div.card-body
                 > h5.card-title（＝カテゴリ名）
                 > a > p.card-text（＝記事タイトル） + div.parts131415_blog_thumbnail > img
   テーマは card に padding:45px 30px 40px を持ち、card-body の padding と二重になる。
   また画像がテキストの「後ろ」に来るので、flex order で 画像→タイトル→カテゴリ に並べ替える。
   （受領は 画像→日付＋カテゴリ→タイトル。このパーツは日付を出さないため、出せる範囲で寄せている）
   ------------------------------------------------------------ */
section[class*="parts131415_blog"]{
  background:#fff !important;
  padding:0 0 clamp(24px,3vw,44px) !important;
}
section[class*="parts131415_blog"] > .container-lg{
  max-width:min(1180px,94vw) !important; padding:0 !important;
}
section[class*="parts131415_blog"] .parts131415_blog_title_wrap{ display:none !important; }
section[class*="parts131415_blog"] .card{
  background:#fff !important; border:1px solid #E2E2E2 !important; border-radius:0 !important;
  padding:0 !important; height:100%; overflow:hidden;
}
section[class*="parts131415_blog"] .card .card-body{
  display:flex !important; flex-direction:column !important; padding:0 !important;
}
section[class*="parts131415_blog"] .card .card-body > a{
  display:flex !important; flex-direction:column !important; color:inherit; text-decoration:none;
}
section[class*="parts131415_blog"] .parts131415_blog_thumbnail{
  order:-1; width:100% !important; max-width:none !important; height:auto !important; background:#EFEFEF;
}
section[class*="parts131415_blog"] .parts131415_blog_thumbnail img{
  width:100% !important; aspect-ratio:3/2; height:auto !important; object-fit:cover !important; display:block;
}
section[class*="parts131415_blog"] .card .card-text{
  margin:0 !important; padding:18px 22px 0 !important; text-align:left !important;
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700 !important;
  font-size:19px !important; line-height:1.5 !important; letter-spacing:0.03em; color:#141414 !important;
}
section[class*="parts131415_blog"] .card .card-title{
  order:2; align-self:flex-start;
  margin:12px 22px 26px !important; padding:3px 12px !important;
  background:#8A8A8A; color:#fff !important; border-radius:30px;
  font-size:14px !important; font-weight:400 !important; letter-spacing:0.04em; text-align:left !important;
}

/* ------------------------------------------------------------
   ③ ブログ一覧（parts222）— 本文とサイドバーが 50/50 に割れる
   実DOM: div.parts222_wrap(flex,1180px) > main.parts222_main(590px) + aside.parts222_sidebar(590px)
   テーマは main に max-width:780px を置くだけで、両者とも flex の既定で等分される。
   本文を伸ばし、サイドバーを固定幅にして間隔を空ける。
   ※他案件でも同じはず＝skin への還流候補（ユーザー承認待ち・R-30）。
   ------------------------------------------------------------ */
.parts222_wrap, [class*="_wrap"]:has(> [class*="_sidebar"]){
  gap:clamp(24px,3vw,48px); align-items:flex-start;
}
.parts222_main{ flex:1 1 auto !important; max-width:none !important; min-width:0; }
.parts222_sidebar{ flex:0 0 clamp(240px,26%,320px) !important; max-width:320px !important; }

/* ------------------------------------------------------------
   ④ お問い合わせ（parts213）— フォーム本体だけ地色が白く割れる
   前後のフリーHTML（メールフォーム見出し／プライバシー注記）は #F3F3F3 の帯なので揃える。
   フォーム部品そのものの装飾は skin §7（parts_form/dl 系）が当たっている＝触らない。
   ------------------------------------------------------------ */
.contact_section, section[class*="parts213_section_form"]{ background:#F3F3F3 !important; }
section[class*="parts213_section_form"]{ padding-top:0 !important; }
/* 帯を #F3F3F3 にした分、入力欄は白に戻す（skin既定は --dyn-surface=#F3F3F3 で地色と同化するため）。
   受領デザインも「#F3F3F3の帯 × 白い入力欄 × 1px枠」だったので、これで受領と一致する。 */
section[class*="parts213_section_form"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
section[class*="parts213_section_form"] textarea,
section[class*="parts213_section_form"] select{ background:#fff !important; }
/* ★ボタン類を除外し忘れると、送信ボタン（input[type=submit]）まで白背景になり
   skin の白文字と重なって「ボタンが消える」。2026-08-18に実機で踏んだので除外を明示しておく。 */

/* ------------------------------------------------------------
   ⑤ R-28 既知の崩れの先回り（一覧カード／カテゴリチップが % で潰れる）
   ※ _sidebar はここでは対象外（③で幅を決めているため）
   ------------------------------------------------------------ */
[class*="_post_wrap"], [class*="_post_category"]{ max-width:none !important; }

/* ------------------------------------------------------------
   ⑥ パーツ前後で分割したページの継ぎ目に、地色の白が細く覗く問題
   実測: /form/inquiry で「メールフォーム」見出しブロックの最後の <p>（margin-bottom:24px）が
   セクションの下端から抜け出し（margin collapse）、.site-root の白が24px見えていた。
   分割ブロックは最後のセクションに下パディングを持たないので、どのページでも起きうる。
   → セクションを flow-root にして子マージンを内側に閉じ込める（見た目の余白は増えない）。
   ------------------------------------------------------------ */
.site-root > section{ display:flow-root; }

/* R-18: 固定/追従ヘッダー下へのシステム描画ページの潜り込み防止。
   このサイトのヘッダーは sticky（＝場所を取る）なので上余白は不要＝0 のまま。 */
:root{ --fixed-header-h: 0px; }