/* ===== 20_site.css ===== */
/* ============================================================
   style.css ─ 株式会社インプルーヴ サイトCSS
   ・CSS安全契約：グローバル変数(var(--main-color)等)に依存せず【具体値】で記述。
     素タグ・Bootstrap汎用名には当てず、必ず自作接頭辞クラス（site-/sh-/sf-/sd-）に当てる。
   ・デザイン方針：参考サイト（モクネ）の上質な質感を踏襲（明朝ディスプレイ／英字ラベル／
     ピル・円形矢印ボタン／写真に重なるカード／控えめな透かし英字）。ただし以下は
     ★ディレクター指示を優先★：配色＝青#277dd2＋エメラルド#3a9f95／派手すぎず誠実／
     原色ベタ・黒基調NG／本文max-width基準・コントラストAA・本文16px。
   ・配色：#277dd2 明るい青(大見出し/数字) / #1c5f9e 濃い青(白抜き/小文字/枠線)
           #3a9f95 明るいエメラルド(装飾) / #277dd2 濃いエメラルド(白抜き/小ラベル)
           #FFFFFF ベース / #EEF5FB 淡色 / #222629 本文
   ============================================================ */

/* ===== リセット（しっかり目・モダンリセット） ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  line-height: 1.8;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid #1c5f9e; outline-offset: 2px; }

/* モバイルドロワーの初期非表示。Commons v1.3 / include.js が #p-drawer に .is-open を付与して開く。 */
#p-drawer { display: none; }
#p-drawer.is-open { display: block; animation: drawer-open .42s cubic-bezier(.22,.61,.36,1) both; transform-origin: top center; }
@keyframes drawer-open { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
#p-drawer.is-open .sd-link { animation: drawer-link .4s ease both; }
#p-drawer.is-open .sd-link:nth-child(1) { animation-delay: .1s; }
#p-drawer.is-open .sd-link:nth-child(2) { animation-delay: .14s; }
#p-drawer.is-open .sd-link:nth-child(3) { animation-delay: .18s; }
#p-drawer.is-open .sd-link:nth-child(4) { animation-delay: .22s; }
#p-drawer.is-open .sd-link:nth-child(5) { animation-delay: .26s; }
#p-drawer.is-open .sd-link:nth-child(6) { animation-delay: .3s; }
#p-drawer.is-open .sd-link:nth-child(7) { animation-delay: .34s; }
#p-drawer.is-open .sd-link:nth-child(8) { animation-delay: .38s; }
#p-drawer.is-open .sd-link:nth-child(9) { animation-delay: .42s; }
#p-drawer.is-open .sd-link:nth-child(10) { animation-delay: .46s; }
#p-drawer.is-open .sd-link:nth-child(n+11) { animation-delay: .5s; }
@keyframes drawer-link { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #p-drawer.is-open, #p-drawer.is-open .sd-link { animation: none; } }

/* ============================================================
   ↓ サイトCSS（具体値・接頭辞クラス）
   ============================================================ */

body { color: #222629; font-size: 16px; background: #ffffff; }

/* ---------- 共通レイアウト ---------- */
#top { position: relative; --rail-x: clamp(12px, 3.2vw, 46px); }

/* ---------- スクロール連動レール（セクションごとにルートを変えて1本につなぐ） ---------- */
.site-srail { position: absolute; left: 0; right: 0; z-index: 30; pointer-events: none; }
.site-srail-seg { position: absolute; background: rgba(39,125,210,.10); border-radius: 5px; }
.site-srail-seg.v { width: 5px; top: 0; bottom: 0; }
.site-srail-seg.h { height: 5px; }
.site-srail-fill { position: absolute; border-radius: 5px; background: linear-gradient(var(--ang,180deg), #277dd2 0%, #2f9e93 55%, #3a9f95 100%); box-shadow: 0 0 10px rgba(58,159,149,.35); }
.site-srail-seg.v .site-srail-fill { top: 0; left: 0; width: 100%; height: 0; }
.site-srail-seg.h .site-srail-fill { top: 0; left: 0; height: 100%; width: 0; }
.site-srail-spark { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7px 0 0 -7px; border-radius: 50%; background: #eafff9; box-shadow: 0 0 6px 2px rgba(58,159,149,.9), 0 0 18px 6px rgba(39,125,210,.55); opacity: 0; will-change: transform, opacity; animation: rail-pulse 1.6s ease-in-out infinite; }
.site-srail-seg.is-on .site-srail-spark { opacity: 1; }
@keyframes rail-pulse { 0%,100% { box-shadow: 0 0 6px 2px rgba(58,159,149,.9), 0 0 16px 5px rgba(39,125,210,.5); } 50% { box-shadow: 0 0 9px 3px rgba(58,159,149,1), 0 0 26px 9px rgba(39,125,210,.7); } }

/* 各セクションの起点ノード */
.site-railnode { position: absolute; width: 5px; height: 5px; z-index: 31; pointer-events: none; }
.site-railnode::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%,-50%) scale(.5); border-radius: 50%; background: rgba(39,125,210,.18); transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .5s ease, box-shadow .5s ease; }
.site-railnode.is-lit::before { background: #3a9f95; transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 0 4px rgba(58,159,149,.18), 0 0 12px 3px rgba(58,159,149,.55); }
@media (prefers-reduced-motion: reduce) { .site-srail-spark { animation: none; } }

.site-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.site-section { position: relative; overflow: hidden; padding: 150px 0; }
.site-section--alt { background: #EEF5FB; }
.site-section--tight { padding: 150px 0; }
.site-narrow { max-width: 820px; }

/* 一般業者との違い：列ごとの背景（1列目=白 / 2列目=メイン / 3列目=グレー） */
.site-table--vs th, .site-table--vs td { border: 1px solid #e2e9f0 !important; padding: 16px 20px !important; text-align: left !important; }
.site-table--vs th:nth-child(1), .site-table--vs td:nth-child(1) { background: #ffffff !important; color: #333333 !important; }
.site-table--vs th:nth-child(2), .site-table--vs td:nth-child(2) { background: #277dd1 !important; color: #ffffff !important; }
.site-table--vs th:nth-child(3), .site-table--vs td:nth-child(3) { background: #bbbbbb !important; color: #ffffff !important; }

/* Before/After 比較（中央見出し＋左右画像＋青い三角＋ラベル） */
.site-bacmp-title { text-align: center; font-family: 'Noto Serif JP', serif; font-size: 24px; font-weight: 600; color: #1a1a1a; letter-spacing: .04em; margin-bottom: 34px; }
.site-bacmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.site-bacmp-col { position: relative; display: block; padding-bottom: 44px; }
.site-bacmp-col .site-imgslot { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
.site-bacmp-label { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 500; letter-spacing: .08em; }
.site-bacmp-arrow { width: 0; height: 0; border-style: solid; border-width: 18px 0 18px 26px; border-color: transparent transparent transparent #277dd2; margin-bottom: 44px; }
@media (max-width: 600px) {
  .site-bacmp-row { grid-template-columns: 1fr; gap: 30px; }
  .site-bacmp-arrow { transform: rotate(90deg); justify-self: center; margin-bottom: 0 !important; margin-top: 0 !important; }
}

/* ---------- リスクバー（メインカラー帯・白文字／背景が左→右に出現・上から順に） ---------- */
.site-riskbars { display: flex; flex-direction: column; gap: 20px; }
.site-riskbar { position: relative; overflow: hidden; padding: 24px 32px; color: #ffffff; font-weight: 700; font-size: 17px; line-height: 1.7; letter-spacing: .02em; }
.site-riskbar::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--rb,#277dd2); transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.site-riskbar > span { position: relative; z-index: 1; opacity: 0; transition: opacity .4s ease .25s; }
.site-riskbars.is-in .site-riskbar::before { transform: scaleX(1); }
.site-riskbars.is-in .site-riskbar > span { opacity: 1; }
.site-riskbars.is-in .site-riskbar:nth-child(1)::before { transition-delay: 0s; }
.site-riskbars.is-in .site-riskbar:nth-child(2)::before { transition-delay: .18s; }
.site-riskbars.is-in .site-riskbar:nth-child(3)::before { transition-delay: .36s; }
.site-riskbars.is-in .site-riskbar:nth-child(4)::before { transition-delay: .54s; }
.site-riskbars.is-in .site-riskbar:nth-child(1) > span { transition-delay: .2s; }
.site-riskbars.is-in .site-riskbar:nth-child(2) > span { transition-delay: .38s; }
.site-riskbars.is-in .site-riskbar:nth-child(3) > span { transition-delay: .56s; }
.site-riskbars.is-in .site-riskbar:nth-child(4) > span { transition-delay: .74s; }
@media (prefers-reduced-motion: reduce) { .site-riskbar::before { transform: scaleX(1) !important; } .site-riskbar > span { opacity: 1 !important; } }
@media (max-width: 600px) { .site-riskbar { font-size: 15px; padding: 18px 20px; } }

/* ---------- 番号付き3カラム（罫線区切り・余白広め／番号＋明朝見出し＋本文） ---------- */
.site-num3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid #e3e8ee; }
.site-num3-item { padding: 48px 40px 56px; border-left: 1px solid #e3e8ee; }
.site-num3-item:last-child { border-right: 1px solid #e3e8ee; }
.site-num3-no { font-family: 'Oswald', sans-serif; font-size: 40px; font-weight: 600; line-height: 1; color: #277dd2; letter-spacing: .02em; margin-bottom: 26px; }
.site-num3-title { font-family: 'Noto Serif JP', serif; font-size: 21px; font-weight: 600; line-height: 1.6; color: #1a1a1a; letter-spacing: .03em; margin-bottom: 20px; }
.site-num3-item p { font-size: 15px; line-height: 2.0; color: #55636d; }
@media (max-width: 860px) {
  .site-num3 { grid-template-columns: 1fr; border-top: none; }
  .site-num3-item { border: 1px solid #e3e8ee; border-bottom: none; padding: 36px 30px 40px; }
  .site-num3-item:last-child { border-bottom: 1px solid #e3e8ee; }
}

/* ---------- 業務内容セクション（番号＋見出し／リード／サブポイント＋縦長画像・余白広め） ---------- */
.site-svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,6vw,104px); align-items: start; }
.site-svc-media .site-imgslot { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; }
.site-svc-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 48px; }
.site-svc-no { font-family: 'Noto Serif JP', serif; font-size: clamp(34px,4vw,46px); font-weight: 600; line-height: 1; color: #277dd2; letter-spacing: .02em; }
.site-svc-title { font-family: 'Noto Serif JP', serif; font-size: clamp(26px,3vw,34px); font-weight: 600; line-height: 1.4; color: #1a1a1a; letter-spacing: .04em; }
.site-svc-lead { font-size: 16px; line-height: 2.0; color: #55636d; margin-bottom: 8px; }
.site-svc-point { margin-top: 48px; }
.site-svc-point-title { font-family: 'Noto Serif JP', serif; font-size: 20px; font-weight: 600; color: #1a1a1a; letter-spacing: .03em; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; }
.site-svc-point-title::before { content: ""; flex: 0 0 auto; width: 28px; height: 2px; background: #277dd2; }
.site-svc-point p { font-size: 15px; line-height: 2.0; color: #55636d; margin-bottom: 12px; }
.site-svc-point p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .site-svc { grid-template-columns: 1fr; gap: 40px; }
  .site-svc-media { order: -1; }
  .site-svc-media .site-imgslot { aspect-ratio: 4 / 3; }
}

/* タブレット時のみ：各セクション内容の左右余白を40pxに（全幅画像・PC/スマホは変更しない） */
@media (min-width: 601px) and (max-width: 1160px) {
  #p-drawer .sd-link { font-size: 16px; }
  [data-om-label="NEW OPTIONS"] .site-grid2 { gap: 15px !important; }
  .site-container { padding: 0 40px; }
  .sh-inner { padding-left: 40px !important; }
  .site-feature-text { padding-left: 40px; padding-right: 40px; }
  /* OUR POLICY：テキスト左端をSERVICES等のコンテナ左端にそろえる */
  .site-policy .site-feature-text { padding-left: max(40px, calc((100vw - 1080px) / 2 + 40px)); }
  /* トラスト：文字中央寄せ＋全体を20px狭める */
  .site-trust { width: calc(100% - 20px); margin-left: auto; margin-right: auto; }
  .site-trust > .site-trust-item { align-items: center; text-align: center; }
  .site-trust > .site-trust-item b { transform-origin: center; }
  /* SERVICES：画像ブロックの縦幅を半分に（3/4→3/2） */
  .site-service .site-service-media .site-imgslot { aspect-ratio: 3 / 2; }
  /* SCHEDULE：テキスト左端をSERVICES等のコンテナ左端にそろえる */
  .site-feature--rev .site-feature-text { padding-left: max(40px, calc((100vw - 1080px) / 2 + 40px)); }
}

/* SOLUTIONS / WHY US：タブレット・スマホ共通（数字が左、右上に文章・右下に画像） */
@media (max-width: 1160px) {
  .site-sol-list .site-sol-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 24px; row-gap: 16px; padding: 28px 0; }
  .site-sol-list .site-sol-no { grid-column: 1; grid-row: 1 / 3; padding-left: 20px; }
  .site-sol-list .site-sol-text { grid-column: 2; grid-row: 1; max-width: none; }
  .site-sol-list .site-sol-media { grid-column: 2; grid-row: 2; min-height: 0; aspect-ratio: auto; height: 150px; width: 100%; align-self: start; }
}

/* レール：タブレット・スマホ共通（幅3px・端寄り8px・マーカー縮小） */
@media (max-width: 1160px) {
  #top { --rail-x: 8px; }
  .site-srail-seg.v { width: 3px; }
  .site-srail-seg.h { height: 3px; }
  .site-srail-spark { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .site-railnode { width: 3px; height: 3px; }
  .site-railnode::before { width: 8px; height: 8px; }
}

/* NEW OPTIONS：1文字ずつ出現するテキスト＋下向き矢印が流れるエフェクト */
.site-typein span { display: inline-block; opacity: 0; transform: translateY(.35em); }
.site-typein.is-in span { animation: typein-char .42s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes typein-char { to { opacity: 1; transform: translateY(0); } }
.site-downarrow { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 26px 0 4px; height: 44px; }
.site-downarrow span { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #3a9f95; opacity: 0; animation: downarrow-flow 1.8s ease-in-out infinite; }
.site-downarrow span:nth-child(2) { animation-delay: .22s; }
.site-downarrow span:nth-child(3) { animation-delay: .44s; }
@keyframes downarrow-flow { 0% { opacity: 0; transform: translateY(-6px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .site-typein span { opacity: 1 !important; transform: none !important; animation: none !important; } .site-downarrow span { animation: none; opacity: .6; } }

/* ---------- 全幅フィーチャー帯（画像が画面端までブリード・テキストは余白付きカラム／左右交互） ---------- */
.site-feature { position: relative; overflow: hidden; }
.site-feature-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; align-items: stretch; }
.site-feature-text { display: flex; flex-direction: column; justify-content: center; padding: 150px clamp(32px,6vw,112px); }
.site-feature-text .site-head-row { margin-bottom: 40px; }
.site-feature-text .site-text { max-width: 560px; }
.site-feature-media { position: relative; min-height: 640px; }
.site-feature-media .site-imgslot { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* --rev：画像を左・テキストを右（交互リズム） */
.site-feature--rev .site-feature-media { order: -1; }
.site-feature--rev .site-feature-text { align-items: flex-start; }

/* ---------- 新しい床の選択肢：画像＋色パネルカード（角丸なし） ---------- */
.site-newopt { display: flex; flex-direction: column; background: #E7F1FB; border-radius: 0; overflow: hidden; }
.site-newopt .site-imgslot { width: 100%; }
.site-newopt-body { padding: 34px 34px 40px; }
.site-newopt-title { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 30px; line-height: 1.35; color: #2e8bd8; margin: 0; }
.site-newopt-rule { width: 56px; height: 4px; background: #2e8bd8; margin: 18px 0 22px; }
.site-newopt-body p { margin: 0; font-size: 15px; line-height: 1.9; color: #2c3d4c; }

/* ---------- 透かし英字（控えめ・装飾） ---------- */
.site-wm { position: absolute; top: 8px; right: 2%; z-index: 0; font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 130px; line-height: 1; letter-spacing: .02em; color: #eaf2fa; pointer-events: none; user-select: none; }
.site-section--alt .site-wm { color: #e0ecf7; }
.site-section > .site-container { position: relative; z-index: 1; }
/* 「私たちが大事にしていること」の透かし「Policy」：150px・-90°回転・右上寄せ */
.site-policy .site-wm { font-size: 150px; left: auto; right: 0; top: 0; transform-origin: right top; transform: translateX(-180px) rotate(-90deg); }
/* 「事業内容」の透かし「Service」：150px・-90°回転・右上寄せ */
.site-services .site-wm { font-size: 150px; left: auto; right: 0; top: 0; transform-origin: right top; transform: translateX(-180px) rotate(-90deg); }
/* 「インプルーヴが選ばれる理由」の透かし「Reason」：150px・-90°回転・右上寄せ */
.site-why .site-wm { font-size: 150px; left: auto; right: 0; top: 0; transform-origin: right top; transform: translateX(-180px) rotate(-90deg); }

/* ---------- 見出し・共通パーツ ---------- */
.site-eyebrow { font-family: 'Noto Serif JP', serif; font-size: 13px; font-weight: 600; letter-spacing: .22em; color: #3a9f95; margin-bottom: 12px; }
.site-eyebrow--onblue { color: #bfe6dc; }
.site-h1 { font-family: 'Noto Serif JP', serif; font-size: 36px; line-height: 1.5; font-weight: 600; color: #1c5f9e; margin-bottom: 18px; letter-spacing: .03em; }
.site-h2 { font-family: 'Noto Serif JP', serif; font-size: 45px; line-height: 1.5; font-weight: 600; color: #1c5f9e; margin-bottom: 26px; letter-spacing: .04em; display: flex; align-items: center; gap: 18px; }
.site-h2::before { content: ""; flex: 0 0 auto; width: 46px; height: 3px; background: #3a9f95; }
.site-h2--center { display: block; text-align: center; }
/* 見出し行：英字ラベルを左に、見出しを右に横並び（添付レイアウト） */
.site-head-row { display: flex; align-items: baseline; gap: 32px; margin-bottom: 64px; }
.site-head-row .site-eyebrow { margin: 0; flex: 0 0 auto; letter-spacing: .22em; color: #3a9f95; padding-top: 8px; }
.site-head-row .site-h2 { margin: 0; }
.site-head-row .site-h2::before { display: none; }
.site-h2--center::before { content: ""; display: block; width: 56px; height: 4px; background: #3a9f95; margin: 0 auto 18px; }
.site-h3 { font-family: 'Noto Serif JP', serif; font-size: 20px; line-height: 1.6; font-weight: 600; color: #1c5f9e; margin-bottom: 10px; }
.site-lead { font-size: 18px; line-height: 1.95; font-weight: 500; color: #2b3a45; margin-bottom: 16px; }
.site-lead-serif { font-family: 'Noto Serif JP', serif; font-size: 23px; line-height: 1.75; font-weight: 600; color: #1c5f9e; letter-spacing: .04em; margin-bottom: 16px; }
.site-text { font-size: 16px; line-height: 1.95; margin-bottom: 14px; }
.site-text:last-child { margin-bottom: 0; }
.site-caption { font-size: 13px; color: #6B7885; }

/* ---------- ボタン ---------- */
.site-btnrow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.site-btnrow--center { justify-content: center; }
.site-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 15px 38px; border-radius: 50px; font-weight: 700; font-size: 16px; background: #277dd2; color: #ffffff; transition: transform .2s, box-shadow .2s, background .2s; box-shadow: 0 10px 24px rgba(39,125,210,.24); }
.site-btn::after { content: "→"; font-size: 15px; transition: transform .2s; }
.site-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(39,125,210,.32); background: #1f66ac; }
.site-btn:hover::after { transform: translateX(4px); }
.site-btn--sub { background: #ffffff; color: #1c5f9e; border: 2px solid #1c5f9e; box-shadow: none; padding: 13px 34px; }
.site-btn--sub:hover { background: #EEF5FB; box-shadow: none; }
/* ヒーロー「施工実績を見る」：白地＋濃色枠、hoverでアクセント塗り */
.site-btn--herooutline { background: #ffffff; color: #333333; border: 1px solid #333333; }
.site-btn--herooutline:hover { background: #3a9f95; color: #ffffff; border-color: #3a9f95; }
/* CONTACT の「業務案内を見る」：hoverは白地＋アクセント文字 */
.site-cta-band .site-btn--herooutline:hover { background: #ffffff !important; color: #3a9f95 !important; border-color: #ffffff !important; }
/* CONTACT の「無料お見積もり」：hoverは白地＋メインカラー文字 */
.site-cta-band .site-btn--onblue:hover { background: #ffffff !important; color: #277dd2 !important; }
/* ヒーローの2ボタン：hoverで右へほんの少し伸びる */
.site-hero .site-btnrow .site-btn,
.site-cta-band .site-btnrow .site-btn { transition: transform .28s ease, background .2s, color .2s, border-color .2s; transform-origin: left center; }
.site-hero .site-btnrow .site-btn:hover,
.site-cta-band .site-btnrow .site-btn:hover { transform: scaleX(1.05); }
.site-btn--onblue { background: #ffffff; color: #277dd2; box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.site-btn--onblue:hover { background: #f2fbf8; }
.site-btn--onblue-sub { background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,.85); box-shadow: none; }
.site-btn--onblue-sub:hover { background: rgba(255,255,255,.12); }

/* 円形矢印ボタン（参考サイト踏襲・テキストリンク型） */
.site-btn-round { display: inline-flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 600; color: #333333; margin-top: 8px; }
.site-btn-round .site-chk { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: transparent; border: 1px solid #c9d3db; display: inline-flex; align-items: center; justify-content: center; transition: background .28s ease, border-color .28s ease; }
.site-btn-round .site-chk::after { content: ""; width: 8px; height: 8px; border-top: 2px solid #4a5058; border-right: 2px solid #4a5058; transform: rotate(45deg); margin-left: -2px; transition: border-color .28s ease; }
.site-btn-round:hover .site-chk { background: #3a9f95; border-color: #3a9f95; }
.site-btn-round:hover .site-chk::after { border-top-color: #ffffff; border-right-color: #ffffff; }
.site-btn-round--center { justify-content: center; }
/* ピル装飾は廃止し、円形＋矢印＋ラベルの共通デザインに統一 */
.site-btn-pill { gap: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #333333; margin-top: 44px; }
.site-btn-pill .site-chk { width: 52px; height: 52px; }
.site-btn-pill:hover { background: transparent; color: #333333; border: 0; }
.site-btn-pill:hover .site-chk { background: #3a9f95; }
.site-btn-pill:hover .site-chk::after { border-top-color: #ffffff; border-right-color: #ffffff; }

/* ---------- 画像プレースホルダ（要素材まで） ---------- */
.site-ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 16px; min-height: 200px; border: 1px dashed #9fc0dd; border-radius: 10px; background: linear-gradient(135deg,#eaf3fb,#dcecf8); color: #4a6b85; font-size: 13px; line-height: 1.6; }
.site-ph--sm { min-height: 150px; }
.site-ph--emerald { background: linear-gradient(135deg,#e4f7f1,#d3f0e7); border-color: #8fd9c6; color: #2a6f5d; }

/* ---------- ドラッグ&ドロップ画像スロット（image-slot・要素材まで／納品後はCMS画像へ差替） ----------
   ・空欄時の見た目は旧 .site-ph を踏襲（淡色グラデ＋破線・エメラルド版）＝::part で shadow を着色。
   ・比率は 3:2（コンポーネント既定）。写真をドロップすると枠いっぱいに表示される。 */
.site-imgslot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.site-imgslot::part(frame) { background: linear-gradient(135deg,#eaf3fb,#dcecf8); }
.site-imgslot::part(ring) { border-color: #9fc0dd; }
.site-imgslot::part(empty) { color: #4a6b85; }
.site-imgslot--emerald::part(frame) { background: linear-gradient(135deg,#e4f7f1,#d3f0e7); }
.site-imgslot--emerald::part(ring) { border-color: #8fd9c6; }
.site-imgslot--emerald::part(empty) { color: #2a6f5d; }
/* サービスカード（写真＋重なるキャプション）は旧デザイン通り枠線なし */
.site-service .site-imgslot::part(ring) { display: none; }
.site-imgslot--square { aspect-ratio: 1 / 1; border-radius: 0; }

/* ---------- グリッド ---------- */
.site-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.site-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.site-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.site-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }

/* ---------- カード ---------- */
.site-card { border: 1px solid #dbe4ec; border-radius: 14px; padding: 28px; background: #ffffff; transition: transform .25s, box-shadow .25s; }
.site-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(26,100,168,.1); }
.site-card .site-ph { margin-bottom: 16px; }
.site-card-label { display: block; font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; color: #1c5f9e; margin-bottom: 10px; line-height: 1.5; }
.site-card p { font-size: 15px; line-height: 1.9; }
/* SOLUTIONS：番号＋見出し＋説明＋右画像の縦並び行（罫線区切り） */
[data-om-label="NEW OPTIONS"] .site-btnrow { gap: 50px; }
.site-sol-list { border-top: 1px solid #d7dde3; }
.site-sol-row { display: grid; grid-template-columns: 120px 1fr 380px; align-items: center; gap: 44px; padding: 0; border-bottom: 1px solid #d7dde3; }
.site-sol-no { font-family: 'Oswald', sans-serif; font-size: 46px; font-weight: 600; line-height: 1; color: #3a9f95; letter-spacing: .04em; }
.site-sol-title { font-family: 'Noto Serif JP', serif; font-size: 26px; font-weight: 600; color: #333333; margin-bottom: 12px; letter-spacing: .04em; }
.site-sol-text p { font-size: 15px; line-height: 1.95; color: #55636d; }
.site-sol-media { display: block; align-self: stretch; min-height: 220px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.site-sol-row:hover .site-sol-media { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .site-sol-row:hover .site-sol-media { transform: none !important; } }

/* 症状別カード（青ヘッダーバー＋本文＋下部イラスト・角丸なし） */
.site-symptom { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #dbe4ec; border-radius: 0; overflow: hidden; }
.site-symptom-head { display: block; background: #277dd2; color: #ffffff; font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; letter-spacing: .04em; text-align: center; padding: 14px 12px; margin: 20px 20px 0; }
.site-symptom p { font-size: 14.5px; line-height: 1.85; color: #33414d; padding: 18px 22px 20px; margin: 0; }
.site-symptom-img { display: block; margin: auto 20px 20px; aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-repeat: no-repeat; }
.site-card ul { margin-top: 8px; }
.site-card li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.85; }
.site-card li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #3a9f95; }

.site-services .site-grid3 { gap: 34px; }
/* サービスカード（縦長写真＋番号ラベル＋白パネルが下部に重なる・角丸なし） */
.site-grid3 { align-items: stretch; }
.site-service { position: relative; background: transparent; min-height: 0; overflow: visible; display: block; transition: none; }
.site-service:hover { transform: none; z-index: auto; }
.site-service-media { position: relative; overflow: hidden; }
.site-service-media .site-imgslot { position: static; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; }
.site-service-tag { position: absolute; top: 20px; left: 22px; z-index: 2; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: #ffffff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.site-service-body { position: relative; z-index: 2; margin: -78px 18px 0; background: #ffffff; padding: 34px 30px 34px; box-shadow: 0 18px 40px rgba(10,42,74,.10); }
.site-service-body .site-card-label { display: block; font-size: 22px; margin-bottom: 14px; color: #333333; }
.site-service-body .site-card-label::before { content: none; }
.site-service-body p { font-size: 15px; line-height: 1.95; color: #55636d; }
.site-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.site-chips span { display: inline-block; border: 1px solid #d3dde6; border-radius: 20px; padding: 5px 15px; font-size: 12.5px; color: #6b7885; letter-spacing: .04em; }

/* ---------- トラストストリップ（罫線グリッド・角丸なし・隣接） ---------- */
.site-trust { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; border-top: 1px solid #dfe4ea; border-left: 1px solid #dfe4ea; }
.site-trust-item { position: relative; aspect-ratio: auto; width: 100%; max-width: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 40px 44px; border-right: 1px solid #dfe4ea; border-bottom: 1px solid #dfe4ea; }
/* 出現アニメ：左から順に、下から上へ立ち上がる（reveal を利用したstagger） */
.site-trust-item.site-reveal { transform: translateY(40px); }
.site-trust-item.site-reveal:nth-child(1) { transition-delay: 0s; }
.site-trust-item.site-reveal:nth-child(2) { transition-delay: .15s; }
.site-trust-item.site-reveal:nth-child(3) { transition-delay: .3s; }
.site-trust-item.site-reveal:nth-child(4) { transition-delay: .45s; }
.site-trust-eyebrow { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: .22em; color: #9aa5b1; margin-bottom: 18px; }
.site-trust-item b { display: block; font-family: 'Noto Serif JP', serif; font-size: 52px; font-weight: 600; color: #277dd2; margin-bottom: 18px; letter-spacing: .02em; line-height: 1.05; }
.site-trust-cap { font-size: 14px; line-height: 1.6; color: #56636e; }

/* ---------- Site風「価値」構図：縦書きタイトル＋番号円形ポイント ---------- */
.site-value-grid { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
.site-vhead { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.site-vtitle { writing-mode: vertical-rl; font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 54px; letter-spacing: .3em; line-height: 1; color: #1c5f9e; margin: 12px 0 26px; }
.site-value-body .site-lead-serif { margin-top: 6px; }

/* 「私たちの強み」：中央コンテンツ＋左右の縦スクロール画像レール（左=下→上／右=上→下） */
.site-strength { background: #f3f7fa; overflow: hidden; padding: 0; }
.site-strength-layout { display: grid; grid-template-columns: 1fr minmax(480px,720px) 1fr; gap: 32px; align-items: stretch; }
.site-strength-center { display: flex; align-items: flex-start; padding: 150px 100px; }
.site-strail { position: relative; z-index: 32; overflow: hidden; min-height: 0; margin: 150px 0; }
.site-strail-track { display: block; will-change: transform; position: absolute; top: 0; left: 0; width: 100%; }
.site-strail-track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 20px; }
.site-strail--up .site-strail-track { animation: strail-up 34s linear infinite; }
.site-strail--down .site-strail-track { animation: strail-down 34s linear infinite; }
@keyframes strail-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes strail-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
/* スマホ：STRENGTHの画像を横スクロール帯として使うためのキーフレーム */
@keyframes strail-x-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes strail-x-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .site-strail-track { animation: none !important; } }
.site-strength .site-eyebrow { color: #3a9f95; }
/* 中央コンテンツ：横並びの見出し→3ブロック→本文→中央ボタンの縦積み */
.site-value-stack { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.site-strength-center .site-vhead { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 18px; margin-bottom: 34px; }
.site-strength-center .site-eyebrow { margin: 0; }
.site-strength-center .site-vtitle { writing-mode: horizontal-tb; font-size: 40px; letter-spacing: .1em; margin: 0; }
.site-strength-center .site-points { justify-content: center; margin: 0 0 34px; flex-wrap: nowrap; }
.site-strength-center .site-lead-serif,
.site-strength-center .site-text { text-align: left; }
.site-strength-center .site-btn-round { margin-top: 36px; }
.site-strength .site-vtitle { color: #1c5f9e; }
.site-strength .site-lead-serif { color: #1c5f9e; }
.site-strength .site-text { color: #333333; }
.site-strength .site-lead-serif { font-size: 34.5px; }
.site-strength .site-point .site-point-no { color: #277dd2; }
.site-strength .site-point:nth-child(2) .site-point-no { color: #2f9e93; }
.site-strength .site-point .site-point-label { color: #1c5f9e; }
.site-strength .site-point .site-point-label::after { background: #3a9f95; }
.site-strength .site-wm { color: #eef2f6; font-size: 150px; right: auto; left: 0; top: 0; transform-origin: left top; transform: translate(180px, 669px) rotate(-90deg); }
.site-strength .site-btn-round { color: #333333; }
.site-strength .site-btn-round .site-chk { background: transparent; border: 1px solid #c9d3db; }
.site-strength .site-btn-round .site-chk::after { border-top-color: #4a5058; border-right-color: #4a5058; }
.site-strength .site-btn-round:hover .site-chk { background: #3a9f95; border-color: #3a9f95; }
.site-strength .site-btn-round:hover .site-chk::after { border-top-color: #ffffff; border-right-color: #ffffff; }
/* hoverでボタン全体を1px枠で囲む（左→右に出現）：円形矢印ボタン共通 */
.site-btn-round { position: relative; border: 0; padding: 8px 20px 8px 8px; }
.site-btn-round::after { content: ""; position: absolute; inset: 0; border: 1px solid #3a9f95; border-radius: 50px; clip-path: inset(0 100% 0 0); transition: clip-path .45s ease; pointer-events: none; }
.site-btn-round:hover::after { clip-path: inset(0 0 0 0); }
/* FOR YOU の「詳しく見る」：カードhoverでもボタン演出を発火 */
.site-branchcard:hover .site-btn-round .site-chk { background: #3a9f95; border-color: #3a9f95; }
.site-branchcard:hover .site-btn-round .site-chk::after { border-top-color: #ffffff; border-right-color: #ffffff; }
.site-branchcard:hover .site-btn-round::after { clip-path: inset(0 0 0 0); }

/* ---------- ポイント（四角カード＋コーナーリボン番号） ---------- */
.site-points { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; margin: 0 0 26px; }
.site-point { position: relative; flex: 1 1 0; max-width: 210px; aspect-ratio: 1 / 1; margin: 0; padding: 20px; border: 1px solid #e2e9f0; border-radius: 0; background: #ffffff; box-shadow: 0 10px 30px rgba(39,125,210,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.site-point .site-point-no { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 12px 0 0; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: .02em; color: #277dd2; }
.site-point:nth-child(2) .site-point-no { color: #2f9e93; }
.site-point .site-point-label { font-family: 'Noto Serif JP', serif; font-size: 21px; font-weight: 700; color: #1c5f9e; position: relative; padding-bottom: 16px; margin: 20px 0 0; text-align: center; letter-spacing: .02em; white-space: nowrap; }
.site-point .site-point-label::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 34px; height: 4px; background: #3a9f95; }
.site-point::after { content: none; }

/* ---------- 立場分岐カード（画像＋パネル・縦積み） ---------- */
.site-branch { display: flex; flex-direction: column; gap: 40px; }
.site-branchcard { display: grid; grid-template-columns: 480px 1fr; align-items: stretch; background: #eef2f5; border-radius: 0; overflow: hidden; color: #26313a; box-shadow: none; transition: box-shadow .25s, transform .25s; }
.site-branchcard:hover { box-shadow: 0 16px 36px rgba(26,100,168,.16); transform: translateY(-8px); }
.site-branchcard .site-imgslot { width: 100%; height: auto; aspect-ratio: 4 / 3; align-self: start; }
.site-branchcard-body { display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 46px; }
.site-branchcard-eyebrow { margin: 30px 0 8px; font-size: 12px; letter-spacing: .12em; color: #7d8b96; }
.site-branchcard-title { margin: 0; font-family: 'Noto Serif JP', serif; font-size: 28px; font-weight: 600; color: #1f2a33; }
.site-branchcard-rule { height: 1px; background: #cfd8df; margin: 20px 0 24px; }
.site-branchcard-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; margin-top: auto; }
.site-branchcard-foot .site-btn-round { align-self: flex-end; }
.site-branchcard-text { margin: 0 0 4px; font-size: 15px; line-height: 1.9; color: #55636d; text-align: left; }
.site-branchcard-more { display: inline-flex; align-items: center; gap: 16px; font-weight: 700; font-size: 15px; color: #1f2a33; white-space: nowrap; }
.site-branchcard-arrow { width: 46px; height: 46px; border: 1px solid #2e8bd8; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #2e8bd8; font-style: normal; font-size: 18px; transition: background .25s, color .25s; }
.site-branchcard:hover .site-branchcard-arrow { background: #2e8bd8; color: #ffffff; }

/* ---------- ステップ ---------- */
.site-step { display: flex; gap: 32px; padding: 44px 0; border-bottom: 1px solid #e2e9f0; }
.site-step:last-child { border-bottom: 0; }
.site-step-no { flex: 0 0 auto; width: auto; height: auto; border-radius: 0; background: none; color: #277dd2; display: block; font-family: 'Oswald', sans-serif; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: .02em; }
.site-step-body h3 { font-family: 'Noto Serif JP', serif; font-size: 27px; font-weight: 600; color: #1a1a1a; margin-bottom: 14px; letter-spacing: .03em; }
.site-step-body .site-text { font-size: 15px; line-height: 2.0; color: #55636d; }

/* ---------- テーブル ---------- */
.site-table { width: 100%; font-size: 15px; }
.site-table th, .site-table td { border: 1px solid #dbe4ec; padding: 15px 16px; text-align: left; line-height: 1.7; vertical-align: top; }
.site-table th { background: #EEF5FB; color: #1c5f9e; font-weight: 700; white-space: nowrap; }
.site-table--compare th { text-align: center; }
.site-table--compare td:first-child { background: #f6f9fc; font-weight: 700; color: #33414d; }
.site-table--compare td { text-align: center; }
/* 会社概要プロフィール：縦罫線なし・横罫線のみ・小さめグレーラベル・余白広め */
.site-table--profile th, .site-table--profile td { border: 0 !important; border-bottom: 1px solid #e3e8ee !important; padding: 26px 8px !important; }
.site-table--profile th { background: none !important; color: #8a939d !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .04em !important; width: 16% !important; }
.site-table--profile td { color: #333333 !important; }

/* ---------- リスク・ノート・引用 ---------- */
.site-risk { background: #fbecec; border: 1px solid #e3b7b7; border-radius: 12px; padding: 24px 28px; }
.site-risk li { position: relative; padding-left: 24px; color: #9a3b3b; font-size: 15px; line-height: 1.95; }
.site-risk li::before { content: "!"; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #c0504d; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 16px; }
.site-note { background: #fff7e6; border: 1px solid #f0d9a0; border-radius: 8px; padding: 14px 16px; font-size: 13px; color: #7a5a00; margin-top: 16px; }
.site-quote { border-left: 4px solid #3a9f95; background: #f4fbf9; padding: 22px 26px; margin: 20px 0; font-family: 'Noto Serif JP', serif; font-size: 20px; line-height: 1.9; font-weight: 500; color: #1a3b33; }

/* ---------- フィルターチップ ---------- */
.site-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.site-filter span { display: inline-block; border: 1px solid #1c5f9e; color: #1c5f9e; border-radius: 20px; padding: 6px 18px; font-size: 14px; }
.site-filter span:first-child { background: #1c5f9e; color: #ffffff; }

/* ---------- Before / After ---------- */
.site-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.site-ba .site-ph { min-height: 150px; }

/* ============================================================
   ヘッダー（sh-）
   ============================================================ */
.sh-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: background .3s, box-shadow .3s; }
.sh-inner { max-width: none; margin: 0 auto; padding: 14px 28px 14px 80px; display: flex; align-items: center; gap: 20px; }
.sh-logo { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.sh-logo-lead { font-size: 11px; letter-spacing: .04em; color: #333333; }
.sh-logo-name { display: flex; align-items: center; gap: 8px; font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 600; letter-spacing: .02em; color: #333333; }
.sh-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #277dd2; color: #ffffff; font-size: 18px; font-weight: 700; font-family: 'Noto Serif JP', serif; }
.sh-logo-img { width: 54px; height: 54px; object-fit: contain; }

.sh-menu { display: flex; align-items: center; gap: 18px; margin: 0; }
.sh-nav { display: flex; align-items: center; }
.sh-menu > li > a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: #223; padding: 8px 0; white-space: nowrap; }
.sh-menu > li > a:hover { color: #1c5f9e; }
.sh-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px; }
.sh-has-child { position: relative; }
.sh-submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; background: #ffffff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 8px 0; opacity: 0; visibility: hidden; transition: .22s; }
.sh-has-child:hover .sh-submenu, .sh-has-child:focus-within .sh-submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sh-submenu a { display: block; padding: 10px 22px; font-size: 13px; color: #223; }
.sh-submenu a:hover { background: #EEF5FB; color: #1c5f9e; }

.sh-cta { position: relative; display: inline-flex; align-items: center; align-self: center; padding: 8px 0; line-height: 1.8; border-radius: 0; background: transparent; color: #333333; font-weight: 500; font-size: 14px; white-space: nowrap; vertical-align: middle; transition: color .2s; }
.sh-cta::before { content: "✉"; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: -7px; font-size: 16px; line-height: 1; }
.sh-cta:hover { background: transparent; color: #277dd2; }

/* ヘッダーは常に白背景・ダーク文字 */
.sh-header { background: #ffffff; }
.sh-header:not(.sh-solid) { background: #ffffff; }
.sh-header:not(.sh-solid) .sh-logo-lead { color: #333333; }
.sh-header:not(.sh-solid) .sh-logo-name { color: #333333; }
.sh-header:not(.sh-solid) .sh-logo-mark { background: #277dd2; color: #ffffff; }
.sh-header:not(.sh-solid) .sh-menu > li > a { color: #1c5f9e; }
.sh-header:not(.sh-solid) .sh-menu > li > a:hover { color: #277dd2; }
.sh-header:not(.sh-solid) .p-hamburger span { background: #1c5f9e; }
/* ナビ文字色は常に#333333・hoverは#277dd2 */
.sh-menu > li > a,
.sh-header:not(.sh-solid) .sh-menu > li > a { color: #333333; }
.sh-menu > li > a:hover,
.sh-header:not(.sh-solid) .sh-menu > li > a:hover { color: #277dd2; }
.sh-header.sh-solid { background: rgba(255,255,255,.97); box-shadow: 0 2px 14px rgba(0,0,0,.07); }

.p-hamburger { display: none; flex-direction: column; gap: 6px; padding: 8px; }
.p-hamburger span { width: 26px; height: 2px; background: #1c5f9e; transition: .3s; }
.sh-header:not(.sh-solid) .p-hamburger span { background: #1c5f9e; }

/* ============================================================
   ドロワー（sd-）
   ============================================================ */
.sd-drawer { position: fixed; inset: 0; z-index: 200; background: #ffffff; padding: 72px 24px 40px; overflow-y: auto; }
.sd-close { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; font-size: 30px; line-height: 1; color: #1c5f9e; }
.sd-nav { display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; }
.sd-link { padding: 15px 8px; border-bottom: 1px solid #e2e9f0; font-size: 14px; font-weight: 500; color: #223; }
.sd-child { padding-left: 28px; font-size: 14px; color: #445; background: #f6f9fc; }
.sd-child::before { content: "└ "; color: #9fb2c4; }
.sd-cta { margin-top: 20px; border: 0; border-radius: 0; background: linear-gradient(135deg,#277dd2,#3a9f95); color: #ffffff; font-weight: 700; text-align: center; }

/* ============================================================
   ヒーロー（トップ）
   ============================================================ */
.site-hero { position: relative; background: none; color: #ffffff; padding: 176px 0 172px; min-height: 90vh; display: flex; align-items: center; overflow: hidden; }
.site-hero::before { content: none; }
.site-hero-inner { position: relative; z-index: 2; width: 100%; }
/* FV背景画像レイヤ＋可読性用オーバーレイ（テキストは z-index:2 で最前面） */
.site-hero-slider { position: absolute; inset: 0; z-index: 0; }
.site-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 1.2s ease; background-size: cover; background-position: center; background-repeat: no-repeat; }
.hb1 { background-image: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/hero-1.webp); }
.hb2 { background-image: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/hero-2.webp); }
.hb3 { background-image: url(https://cdn.cuezilla-cms.com/improve87.com/images/1473/hero-3.webp); }
@media (max-width: 600px) {
  .hb1 { background-image: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/hero-sp-1.webp); }
  .hb2 { background-image: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/hero-sp-2.webp); }
  .hb3 { background-image: url(https://cdn.cuezilla-cms.com/improve87.com/images/1473/hero-sp-3-c.webp); }
}
.site-hero-slider picture.site-hero-bg > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-hero-slider .site-hero-bg.is-active { opacity: 1; }
.site-hero-shade { position: absolute; inset: 0; z-index: 1; background: none; transition: opacity .35s ease; }

/* ===== ヒーロー：控えめなキラキラ演出（斜めの光スイープ＋点滅パーティクル） ===== */
.site-hero-sparkle { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.site-hero-sparkle .site-sweep { position: absolute; top: -60%; left: -30%; width: 45%; height: 220%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); filter: blur(6px); animation: hero-sweep 9s ease-in-out 1.2s infinite; }
.site-hero-sparkle .spk { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 6px 1px rgba(255,255,255,.85); animation: hero-spk 4.5s ease-in-out infinite; }
.site-hero-sparkle .spk::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); transform: translate(-50%,-50%); }
.site-hero-sparkle .spk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 14px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent); transform: translate(-50%,-50%); }
.site-hero-sparkle .s1 { left: 14%; top: 30%; animation-delay: .0s; }
.site-hero-sparkle .s2 { left: 26%; top: 66%; animation-delay: 1.1s; transform: scale(.7); }
.site-hero-sparkle .s3 { left: 43%; top: 22%; animation-delay: 2.4s; transform: scale(.85); }
.site-hero-sparkle .s4 { left: 58%; top: 52%; animation-delay: .7s; transform: scale(.6); }
.site-hero-sparkle .s5 { left: 70%; top: 28%; animation-delay: 3.1s; }
.site-hero-sparkle .s6 { left: 82%; top: 60%; animation-delay: 1.8s; transform: scale(.8); }
.site-hero-sparkle .s7 { left: 90%; top: 38%; animation-delay: 3.6s; transform: scale(.65); }
.site-hero-sparkle .s8 { left: 36%; top: 80%; animation-delay: 2.0s; transform: scale(.75); }
@keyframes hero-sweep { 0% { left: -30%; opacity: 0; } 12% { opacity: 1; } 40% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } }
@keyframes hero-spk { 0%, 100% { opacity: 0; transform: scale(.5); } 45% { opacity: 0; } 60% { opacity: .95; transform: scale(1); } 75% { opacity: 0; transform: scale(.5); } }
@media (prefers-reduced-motion: reduce) { .site-hero-sparkle { display: none; } }

/* ===== ヒーロー登場アニメーション（ページ表示時に1回・印象的な段階表示） ===== */
@keyframes site-hero-rise { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes site-hero-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.site-hero .site-eyebrow { opacity: 0; animation: site-hero-rise .9s cubic-bezier(.22,.61,.36,1) .25s both; }
.site-hero h1 .hero-line { display: block; opacity: 0; animation: site-hero-rise 1s cubic-bezier(.22,.61,.36,1) both; }
.site-hero h1 .hero-line:nth-child(1) { animation-delay: .4s; }
.site-hero h1 .hero-line:nth-child(2) { animation-delay: .55s; }
.site-hero h1 .hero-line:nth-child(3) { animation-delay: .7s; }
.site-hero .site-hero-lead { opacity: 0; animation: site-hero-rise .9s cubic-bezier(.22,.61,.36,1) .9s both; }
.site-hero .site-btnrow { opacity: 0; animation: site-hero-rise .9s cubic-bezier(.22,.61,.36,1) 1.05s both; }
/* 背景写真：アクティブ中はゆっくりズーム（Ken Burns）で動きを出す */
.site-hero-slider .site-hero-bg.is-active { animation: site-kenburns 6.5s ease-out both; }
@keyframes site-kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }

/* ===== SCROLL インジケーター（中央下・縦線を光が流れるキラッと演出） ===== */
.site-scroll { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #ffffff; opacity: 0; animation: site-hero-rise 1s ease 1.4s both; }
.site-scroll-txt { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .38em; writing-mode: vertical-rl; text-indent: .38em; color: #ffffff; }
.site-scroll-line { position: relative; width: 5px; height: 66px; background: rgba(255,255,255,.4); border-radius: 5px; overflow: hidden; }
.site-scroll-line::after { content: ""; position: absolute; left: 0; top: -45%; width: 100%; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,0), #ffffff); animation: site-scroll-run 2s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes site-scroll-run { 0% { top: -45%; } 55% { top: 100%; } 100% { top: 100%; } }
.site-scroll:hover .site-scroll-txt { color: #d7ecfb; }

@media (prefers-reduced-motion: reduce) {
  .site-hero .site-eyebrow, .site-hero h1 .hero-line, .site-hero .site-hero-lead, .site-hero .site-btnrow, .site-scroll { opacity: 1 !important; animation: none !important; }
  .site-hero-slider .site-hero-bg.is-active { animation: none !important; }
  .site-scroll-line::after { animation: none !important; }
}

/* ===== FVの表情を変えるTweaks（data属性でCSSが反応） =====
   雰囲気(atmo)＝画像とオーバーレイの主従／カラームード(mood)＝重ねる色調／構え(comp)＝見出しの配置。 */
/* カラームード：重ねるグラデの色調を切替 */
.site-hero[data-fv-mood="emerald"] .site-hero-shade { background: linear-gradient(135deg,rgba(18,134,109,.80) 0%,rgba(58,159,149,.52) 58%,rgba(26,100,168,.40) 100%); }
.site-hero[data-fv-mood="mono"] .site-hero-shade { background: linear-gradient(180deg,rgba(11,19,28,.80) 0%,rgba(22,34,48,.52) 100%); }
/* 雰囲気：写真主役=薄く明るく／濃色=暗く沈める */
.site-hero[data-fv-atmo="light"] .site-hero-shade { opacity: .5; }
.site-hero[data-fv-atmo="light"] .site-hero-bg { filter: brightness(1.04) saturate(1.02); }
.site-hero[data-fv-atmo="deep"] .site-hero-bg { filter: brightness(.6) saturate(1.08); }
/* 構え：中央寄せの大見出し（劇的）／左寄せ（既定・エディトリアル） */
.site-hero[data-fv-comp="center"] .site-hero-inner { text-align: center; }
.site-hero[data-fv-comp="center"] .site-hero-lead { margin-left: auto; margin-right: auto; }
.site-hero[data-fv-comp="center"] .site-btnrow { justify-content: center; }
.site-hero[data-fv-comp="center"] h1 { font-size: 62px; letter-spacing: .09em; }
.site-hero h1 { font-family: 'Noto Serif JP', serif; font-size: 62px; line-height: 1.45; font-weight: 600; letter-spacing: .06em; margin-bottom: 24px; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.7); }
.site-hero-lead { font-size: 18px; line-height: 1.95; color: #eaf4fd; max-width: 720px; margin-bottom: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.8), 0 0 18px rgba(0,0,0,.6); }
.site-hero .site-ph { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #eaf4fd; margin: 24px 0; min-height: 240px; }
/* FV 2カラム（テキスト＋画像スロット）。狭幅では1カラムに戻す。 */
.site-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.site-hero-media { width: 100%; }
.site-hero-media.site-imgslot { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(10,42,74,.32); }
.site-hero-media.site-imgslot::part(frame) { background: rgba(255,255,255,.12); }
.site-hero-media.site-imgslot::part(ring) { border-color: rgba(255,255,255,.55); }
.site-hero-media.site-imgslot::part(empty) { color: #eaf4fd; }

/* 下層ページのヒーロー帯（濃色バリエーション） */
.site-hero--clients { background: linear-gradient(135deg,#154d84,#1c5f9e); }
.site-hero--owners { background: linear-gradient(135deg,#3a9f95,#48b3a7); }
.site-hero--owners::before { background: rgba(46,139,216,.18); }
.site-hero--contractors { background: linear-gradient(135deg,#243b63,#1c5f9e); }
.site-hero--contractors::before { background: rgba(46,139,216,.16); }
.site-hero--sm { min-height: 0; display: block; padding: 150px 0 96px; }
.site-hero--sm h1 { font-size: 36px; }
/* 3ページのヘッダーを白背景＋pageheadと同じ見出し・説明文に */
.site-hero--clients, .site-hero--owners, .site-hero--contractors { background: #ffffff; color: #222629; }
.site-hero--clients::before, .site-hero--owners::before, .site-hero--contractors::before { display: none; }
.site-hero--sm h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(38px,5vw,60px); line-height: 1.35; font-weight: 600; color: #1a1a1a; letter-spacing: .04em; text-shadow: none; }
.site-hero--sm .site-hero-lead { font-size: 16px; line-height: 2.0; color: #55636d; text-shadow: none; margin-top: 22px; }
/* 他の下層ヘッダー（pagehead）と同じ見出しアニメ：h1は左→右クリップ、説明文は下→上 */
.site-hero--clients h1, .site-hero--owners h1, .site-hero--contractors h1 { clip-path: inset(0 100% 0 0); animation: ph-wipe 1s cubic-bezier(.22,.61,.36,1) .28s both; }
.site-hero--clients .site-hero-lead, .site-hero--owners .site-hero-lead, .site-hero--contractors .site-hero-lead { opacity: 0; animation: ph-rise .7s ease .5s both; }
@media (prefers-reduced-motion: reduce) { .site-hero--clients h1, .site-hero--owners h1, .site-hero--contractors h1, .site-hero--clients .site-hero-lead, .site-hero--owners .site-hero-lead, .site-hero--contractors .site-hero-lead { animation: none !important; opacity: 1 !important; clip-path: none !important; } }

/* ============================================================
   下層ページ見出し帯＋パンくず
   ============================================================ */
.site-pagehead { position: relative; overflow: hidden; background: #ffffff; padding: 150px 0 96px; border-bottom: none; }
.site-pagehead::after { content: attr(data-wm); position: absolute; left: -8px; bottom: -22px; z-index: 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(88px,17vw,224px); line-height: 1; letter-spacing: .01em; color: #f1f3f4; white-space: nowrap; pointer-events: none; user-select: none; }
.site-pagehead > .site-container { position: relative; z-index: 1; }
.site-pagehead .site-eyebrow { color: #277dd2; margin-bottom: 26px; }
.site-pagehead h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(38px,5vw,60px); line-height: 1.35; font-weight: 600; color: #1a1a1a; letter-spacing: .04em; }
/* 見出し帯アニメ：見出しは左→右にクリップ表示、ウォーターマークは下→上 */
.site-pagehead .site-eyebrow { opacity: 0; animation: ph-rise .7s ease .1s both; }
.site-pagehead h1 { clip-path: inset(0 100% 0 0); animation: ph-wipe 1s cubic-bezier(.22,.61,.36,1) .28s both; }
.site-pagehead::after { opacity: 0; transform: translateY(60px); animation: ph-up 1s cubic-bezier(.22,.61,.36,1) .5s both; }
@keyframes ph-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes ph-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ph-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .site-pagehead .site-eyebrow, .site-pagehead h1, .site-pagehead::after { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; } }

.site-breadcrumb { padding: 14px 0; background: #ffffff; }
.site-breadcrumb .p-breadcrumb__inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.site-breadcrumb .c-breadcrumb__item { display: inline; font-size: 13px; color: #6B7885; }
.site-breadcrumb .c-breadcrumb__item a { color: #1c5f9e; }
.site-breadcrumb .c-breadcrumb__item + .c-breadcrumb__item::before { content: "›"; margin: 0 10px; color: #9fb2c4; }

/* ============================================================
   FAQ（アコーディオン）
   ============================================================ */
.site-faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid #e3e8ee; }
.site-faq details { border: 0; border-bottom: 1px solid #e3e8ee; border-radius: 0; background: none; overflow: hidden; }
.site-faq summary { list-style: none; cursor: pointer; padding: 34px 54px 34px 4px; position: relative; font-weight: 700; color: #1a1a1a; font-size: 16px; line-height: 1.7; display: flex; align-items: baseline; gap: 16px; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::before { content: "Q"; flex: 0 0 auto; width: auto; height: auto; margin: 0; border-radius: 0; background: none; color: #277dd2; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.site-faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: #277dd2; }
.site-faq details[open] summary::after { content: "−"; }
.site-faq-body { padding: 0 20px 34px 34px; font-size: 15px; line-height: 2.0; color: #55636d; position: relative; }
.site-faq-body::before { content: "A"; position: absolute; left: 4px; top: 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .04em; color: #3a9f95; }

/* ============================================================
   CTAバンド（参考サイトのContact帯を踏襲・青基調）
   ============================================================ */
.site-cta-band { position: relative; overflow: hidden; background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/bg-contact.webp) center/cover no-repeat; padding: 150px 24px; text-align: center; }
.site-cta-band-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.site-cta-band .site-eyebrow { color: #bfe6dc; margin-bottom: 26px; }
.site-cta-band h2 { font-family: 'Noto Serif JP', serif; font-size: 46px; font-weight: 600; color: #ffffff; letter-spacing: .06em; margin-bottom: 22px; }
.site-cta-band p { color: #eaf4fd; margin-bottom: 64px; }

/* ============================================================
   フッター（sf-）
   ============================================================ */
.sf-footer { background: #ececeb; color: #3a3f45; padding: 92px 0 30px; }
.sf-inner { max-width: 1200px; margin: 0 auto; padding: 0 44px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.sf-name { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: #2a2f35; letter-spacing: .05em; }
.sf-logo-img { width: 54px; height: 54px; object-fit: contain; }
.sf-tagline { font-family: 'Noto Serif JP', serif; font-size: 32px; font-weight: 500; line-height: 1.5; color: #2a2f35; letter-spacing: .07em; margin-top: 24px; }
.sf-meta { margin-top: 30px; font-size: 13px; line-height: 1.9; color: #5a616a; letter-spacing: .04em; }
.sf-meta a { color: #5a616a; }
.sf-meta a:hover { color: #277dd2; }
.sf-note { margin-top: 6px; font-size: 13px; line-height: 1.9; color: #5a616a; letter-spacing: .02em; }
.sf-nav { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 28px 44px; align-content: start; padding-top: 8px; }
.sf-nav a { width: fit-content; font-size: 15px; color: #4a5058; letter-spacing: .06em; transition: color .2s; }
.sf-nav a:hover { color: #277dd2; text-decoration: none; }
.sf-bottom { max-width: 1200px; margin: 60px auto 0; padding: 24px 44px 0; border-top: 1px solid rgba(0,0,0,.12); }
.sf-copy { font-size: 12px; color: #9aa0a6; letter-spacing: .1em; }

/* ============================================================
   スクロール演出（reveal）／ページトップ
   ============================================================ */
.site-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.site-reveal.is-in { opacity: 1; transform: none; }
/* 方向バリエーション（共通のフェードは保ちつつ、セクションごとに立ち上がりを変える） */
.site-reveal--left  { transform: translateX(-48px); }
.site-reveal--right { transform: translateX(48px); }
.site-reveal--zoom  { transform: scale(.9); }
.site-reveal--left.is-in, .site-reveal--right.is-in, .site-reveal--zoom.is-in { transform: none; }
/* クリップ立ち上げ（下→上に現れる・写真帯向け） */
.site-reveal--clip { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.7,0,.2,1); }
.site-reveal--clip.is-in { clip-path: inset(0 0 0 0); }

/* キラッとした光沢スイープ（出現時に1回＋hoverで再演出・清潔感の演出） */
.site-shine { position: relative; overflow: hidden; }
.site-shine::after { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; z-index: 4; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 100%); opacity: 0; }
.site-shine.is-in::after { animation: site-sheen 1.15s ease .3s 1; }
.site-shine:hover::after { animation: site-sheen 1.15s ease 1; }
@keyframes site-sheen { 0% { left: -80%; opacity: 0; } 18% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
/* image-slot（カスタム要素）自体に光沢を載せる場合の器化 */
.site-imgslot.site-shine { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-reveal, .site-reveal--left, .site-reveal--right, .site-reveal--zoom { opacity: 1 !important; transform: none !important; }
  .site-reveal--clip { clip-path: none !important; }
  .site-shine::after { display: none !important; }
}
.site-pagetop { position: fixed; right: 20px; bottom: 22px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; background: rgba(26,100,168,.92); color: #ffffff; display: none; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.site-pagetop.is-show { display: flex; }

/* ============================================================
   ブロックのホバー演出（種類ごとに異なる控えめな動き）
   ============================================================ */
/* サービスカード：写真ズーム＋白パネル浮上 */
.site-service-media .site-imgslot { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.site-service:hover .site-service-media .site-imgslot { transform: scale(1.05); }
.site-service-body { transition: transform .3s ease, box-shadow .3s ease; }
.site-service:hover .site-service-body { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(10,42,74,.16); }
/* 症状/理由カード：浮上＋枠色 */
.site-symptom { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.site-symptom:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(39,125,210,.12); border-color: #277dd2; }
/* 立場分岐カード：写真ズーム（カード浮上は既存） */
.site-branchcard .site-imgslot { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.site-branchcard:hover .site-imgslot { transform: scale(1.05); }
/* トラスト数値：淡い地色＋数字が少し拡大 */
.site-trust-item { transition: background .3s ease; }
.site-trust-item:hover { background: #f4f8fc; }
.site-trust-item b { transition: transform .3s ease; transform-origin: left center; }
.site-trust-item:hover b { transform: scale(1.06); }
/* 円形ポイント：浮上＋影 */
.site-point { transition: transform .3s ease, box-shadow .3s ease; }
.site-point:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(39,125,210,.16); }
/* 新しい床の選択肢パネル：浮上 */
.site-newopt { transition: transform .3s ease, box-shadow .3s ease; }
.site-newopt:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(39,125,210,.14); }
/* タグチップ：ホバーで反転 */
.site-chips span { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.site-chips span:hover { background: #277dd2; border-color: #277dd2; color: #ffffff; }
/* 全幅フィーチャー写真：ゆるくズーム */
.site-feature-media { overflow: hidden; }
.site-feature-media .site-imgslot { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.site-feature-media:hover .site-imgslot { transform: scale(1.04); }
/* 施工実績など汎用スロット写真：ズーム＋わずかな明度 */
[data-om-label="WORKS"] .site-imgslot { transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease; }
[data-om-label="WORKS"] .site-imgslot:hover { transform: scale(1.05); filter: brightness(1.03); }
/* 汎用カード：浮上（既存の site-card 用を強調） */
.site-card { transition: transform .3s ease, box-shadow .3s ease; }
.site-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(39,125,210,.12); }
/* 流れる帯タイル：ホバーで少し拡大 */
.site-mq-item { transition: transform .3s ease, box-shadow .3s ease; }
.site-mq-item:hover { transform: scale(1.03); box-shadow: 0 16px 32px rgba(39,125,210,.2); }
@media (prefers-reduced-motion: reduce) {
  .site-service:hover .site-service-media .site-imgslot,
  .site-service:hover .site-service-body,
  .site-branchcard:hover .site-imgslot,
  .site-feature-media:hover .site-imgslot,
  [data-om-label="WORKS"] .site-imgslot:hover,
  .site-symptom:hover, .site-point:hover, .site-newopt:hover, .site-card:hover, .site-mq-item:hover,
  .site-trust-item:hover b { transform: none !important; }
}

/* ============================================================
   動的ページ 追補CSS（HTMLは触らない＝R-29。単純な番号非依存セレクタ＋!important で
   theme_default/skin/BS の上から site 見た目に寄せる。固定ヘッダー分の上余白も付与）
   ============================================================ */
/* --- 固定ヘッダー分の上余白（pageheadを持たないフォーム系動的ページ） --- */
.contact_section, .parts213_section_form { padding-top: 128px !important; }

/* --- 一覧セクションの器（幅・余白・地色）。※ブログ/施工実績には他ページ同様 .site-pagehead を
       別途配置（自動h2はskinが非表示にする設計＝二重見出し防止）。ここは pagehead 直下の詰め値。 --- */
.parts222_section, .parts228_section { background: #ffffff !important; padding-top: 56px !important; padding-bottom: 92px !important; }
.parts222_wrap, .parts228_wrap { max-width: 1080px !important; margin: 0 auto !important; padding: 0 24px !important; display: flex !important; gap: 40px !important; align-items: flex-start !important; }
.parts228_wrap { display: block !important; }

/* --- 記事/実績カードのグリッド --- */
.parts222_post_list, .parts228_post_list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
.parts228_post_list { margin-top: 100px !important; }
.parts222_post_list { margin-top: 100px !important; }
.parts228_pagenation { margin-top: 50px !important; }
.parts222_pagenation { margin-top: 50px !important; }
.parts222_main, .parts228_main { flex: 1 1 auto !important; min-width: 0 !important; }

/* --- 記事カード --- */
.parts222_post_wrap, .parts228_post_wrap { max-width: 100% !important; margin-bottom: 0 !important; border: 1px solid #dbe4ec !important; border-radius: 14px !important; overflow: hidden !important; background: #ffffff !important; transition: transform .25s, box-shadow .25s !important; }
.parts222_post_wrap:hover, .parts228_post_wrap:hover { transform: translateY(-3px) !important; box-shadow: 0 16px 34px rgba(26,100,168,.1) !important; }
.parts222_post_img, .parts228_post_img { height: 210px !important; overflow: hidden !important; }
.parts222_post_img img, .parts228_post_img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.parts222_post_status, .parts228_post_status { padding: 16px 20px 4px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; }
.parts222_post_date, .parts228_post_date { color: #6B7885 !important; font-size: 13px !important; }
.parts222_post_category, .parts-blog-ex_tag { display: inline-block !important; background: #EEF5FB !important; color: #1c5f9e !important; border-radius: 20px !important; padding: 2px 12px !important; font-size: 12px !important; }
.parts222_post_title, .parts228_post_title { padding: 4px 20px 20px !important; font-family: 'Noto Serif JP', serif !important; font-weight: 600 !important; font-size: 17px !important; line-height: 1.6 !important; color: #1c5f9e !important; }
.parts228_post_title { padding-bottom: 8px !important; }
.parts-blog-ex-tag_wrap { padding: 0 20px 18px !important; }

/* --- サイドバー（ブログ） --- */
.parts222_sidebar { flex: 0 0 260px !important; }
.parts222_sidebar_wrap { border: 1px solid #dbe4ec !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 20px !important; background: #ffffff !important; }
.parts222_sidebar_wrap h3 { font-family: 'Noto Serif JP', serif !important; font-weight: 600 !important; font-size: 16px !important; color: #1c5f9e !important; border-left: 3px solid #3a9f95 !important; padding-left: 10px !important; margin-bottom: 14px !important; }
.parts222_sidebar_wrap li { border-bottom: 1px solid #eef2f6 !important; padding: 8px 0 !important; }
.parts222_sidebar_date { color: #6B7885 !important; font-size: 12px !important; }
.parts222_sidebar_post_title { font-size: 14px !important; color: #33414d !important; line-height: 1.6 !important; }

/* --- ブログ（parts222）：添付デザイン＝枠なしフラットカード＋帯見出しサイドバー（配色は自社パレット） --- */
.parts222_post_wrap, .parts228_post_wrap { border: 0 !important; border-radius: 0 !important; overflow: visible !important; background: none !important; }
.parts222_post_wrap:hover, .parts228_post_wrap:hover { transform: none !important; box-shadow: none !important; }
.parts222_post_img, .parts228_post_img { height: 230px !important; border-radius: 0 !important; }
.parts222_post_wrap:hover .parts222_post_img img, .parts228_post_wrap:hover .parts228_post_img img { transform: scale(1.04) !important; transition: transform .6s cubic-bezier(.22,.61,.36,1) !important; }
.parts222_post_status, .parts228_post_status { padding: 20px 0 0 !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.parts222_post_date, .parts228_post_date { color: #8a7a63 !important; font-size: 13px !important; letter-spacing: .04em !important; }
.parts222_post_category, .parts-blog-ex_tag { background: none !important; color: #3a9f95 !important; border: 1px solid #3a9f95 !important; border-radius: 0 !important; padding: 3px 5px !important; font-size: 13px !important; }
.parts-blog-ex-tag_wrap { padding: 6px 0 0 !important; }
.parts222_post_title, .parts228_post_title { padding: 10px 0 0 !important; font-family: 'Noto Serif JP', serif !important; font-weight: 600 !important; font-size: 20px !important; line-height: 1.6 !important; color: #1a1a1a !important; }
.parts222_section .parts222_post_list, .parts228_section .parts228_post_list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px 40px !important; }

/* 施工実績（parts228）：画像下のテキスト帯をメインカラー・白文字。日付/タイトル左揃え。カテゴリ白背景・枠なし */
.parts228_section .parts228_post_status, .parts228_section .parts228_post_title-excerpt, .parts228_section .parts228_post_title { background: #277dd2 !important; }
.parts228_section .parts228_post_wrap { padding: 0 !important; gap: 0 !important; }
.parts228_section .parts228_post_img { margin: 0 !important; display: block !important; }
.parts228_section .parts228_post_status { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; margin: 0 !important; padding: 14px 18px 16px !important; gap: 6px 10px !important; }
.parts228_section .parts228_post_date { grid-column: 1 !important; grid-row: 1 !important; color: #ffffff !important; }
.parts228_section .parts228_post_title-excerpt { display: contents !important; }
.parts228_section .parts-blog-ex-tag_wrap { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; padding: 0 !important; }
.parts228_section .parts-blog-ex_tag { background: #ffffff !important; color: #277dd2 !important; border: 0 !important; border-radius: 0 !important; padding: 3px 8px !important; font-size: 13px !important; }
.parts228_section .parts228_post_title { grid-column: 1 / -1 !important; grid-row: 2 !important; padding: 0 !important; color: #ffffff !important; }

/* サイドバー：帯見出し＋罫線リスト＋件数バッジ */
.parts222_sidebar_wrap { border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 40px !important; background: none !important; }
.parts222_section .parts222_sidebar_wrap h3, .parts222_sidebar .parts222_sidebar_wrap h3 { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; color: #ffffff !important; background: #277dd2 !important; border-left: 0 !important; padding: 14px 18px !important; margin-bottom: 0 !important; letter-spacing: .04em !important; }
.parts222_sidebar_wrap ul { border-top: 0 !important; }
.parts222_sidebar_wrap li { border-bottom: 1px solid #e3e8ee !important; padding: 16px 4px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; }
.category_post_count li a { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 12px !important; }
.category_post_count .parts222_sidebar_post_category, .parts222_sidebar .parts222_sidebar_post_category { border: 0 !important; outline: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; color: #33414d !important; font-size: 15px !important; border-radius: 0 !important; }
.parts222_sidebar_post_category_count { flex: 0 0 auto !important; min-width: 34px !important; text-align: center !important; background: #eef2f6 !important; color: #55636d !important; font-size: 13px !important; padding: 4px 8px !important; }

/* --- ページネーション --- */
.parts222_pagenation, .parts228_pagenation { display: flex !important; justify-content: center !important; gap: 8px !important; margin-top: 40px !important; }
.parts222_pagenation a, .parts228_pagenation a, .parts222_pagenation .current, .parts228_pagenation .current { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; border-radius: 0 !important; border: 1px solid #cfe0ef !important; color: #1c5f9e !important; font-weight: 600 !important; }
.parts222_pagenation .current, .parts228_pagenation .current { background: #1c5f9e !important; color: #ffffff !important; border-color: #1c5f9e !important; }

/* --- お問い合わせフォーム（parts213） --- */
.contact_section { background: #ffffff !important; padding-bottom: 92px !important; }
.parts213_form_wrap { max-width: 820px !important; margin: 0 auto !important; padding: 0 24px !important; }
.parts213_form_wrap dl { border-bottom: 1px solid #e2e9f0 !important; padding: 20px 0 !important; }
.parts213_form_wrap dt { font-weight: 700 !important; color: #1c5f9e !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.parts213_form_wrap dt .required { background: #277dd2 !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; border-radius: 0 !important; padding: 2px 8px !important; }
.parts213_form_wrap dt .attention { font-size: 12px !important; color: #6B7885 !important; font-weight: 400 !important; }
.parts213_form_wrap input[type="text"], .parts213_form_wrap input[type="email"], .parts213_form_wrap input[type="tel"], .parts213_form_wrap textarea { width: 100% !important; border: 1px solid #cfe0ef !important; border-radius: 0 !important; padding: 12px 14px !important; background: #fbfdff !important; }
.parts213_form_wrap textarea { min-height: 160px !important; }
.parts213_form_wrap label { margin-right: 18px !important; }
.contact_submit { text-align: center !important; margin-top: 32px !important; }
.contact_submit input[type="submit"] { min-height: 56px !important; padding: 15px 48px !important; border-radius: 0 !important; background: linear-gradient(135deg,#277dd2,#3a9f95) !important; color: #fff !important; font-weight: 700 !important; font-size: 16px !important; cursor: pointer !important; box-shadow: none !important; border: 1px solid #ffffff !important; }

/* ============================================================
   施工シーンの流れる帯（marquee・汎用の帯演出／配色は青＋エメラルド）
   ============================================================ */
.site-marquee { overflow: hidden; padding: 10px 0; background: #ffffff; }
.site-marquee-track { display: flex; width: max-content; gap: 16px; animation: site-marquee 48s linear infinite; }
.site-marquee:hover .site-marquee-track { animation-play-state: paused; }
.site-mq-item { flex: 0 0 auto; width: 450px; height: 376px; border-radius: 0; display: flex; align-items: flex-end; padding: 16px 18px; color: #ffffff; font-family: 'Noto Serif JP', serif; font-size: 15px; font-weight: 600; letter-spacing: .03em; text-shadow: 0 1px 8px rgba(0,0,0,.28); box-shadow: 0 10px 24px rgba(26,100,168,.12); }
.site-mq-item--a { background: linear-gradient(135deg,#277dd2,#1c5f9e); }
.site-mq-item--b { background: linear-gradient(135deg,#3a9f95,#277dd2); }
.site-mq-item--c { background: linear-gradient(135deg,#4a9fd8,#277dd2); }
.site-mq-item--d { background: linear-gradient(135deg,#3fd0ad,#277dd2); }
.site-mq-item--photo-nuritoko { background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/mq-nuritoko.webp) center/cover no-repeat; }
.site-mq-item--photo-uv { background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/mq-uv.webp) center/cover no-repeat; }
.site-mq-item--photo-shitaji { background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/mq-shitaji.webp) center/cover no-repeat; }
.site-mq-item--photo-kenma { background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/mq-kenma.webp) center/cover no-repeat; }
.site-mq-item--photo-chunyu { background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/mq-chunyu.webp) center/cover no-repeat; }
.site-mq-item--photo-bosui { background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/mq-bosui.webp) center/cover no-repeat; }
.site-mq-item--photo-kizoko { background: url(https://cdn.cuezilla-cms.com/enjoyworks-test17.site/images/1473/mq-kizoko.webp) center/cover no-repeat; }
.site-mq-cap { background: rgba(46,139,216,.85); border-radius: 100px; padding: 7px 14px; }
@keyframes site-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .site-marquee-track { animation: none; } }

/* ============================================================
   フローティング見積もりボタン（トップ・汎用のサイドCTA）
   ============================================================ */
.site-float { position: fixed; right: 0; bottom: 84px; z-index: 88; width: 88px; height: 88px; background: #277dd2; color: #ffffff; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.35; padding: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: -2px 6px 18px rgba(39,125,210,.32); transition: background .2s, color .2s, transform .2s; }
.site-float:hover { background: linear-gradient(135deg,#277dd2,#3a9f95); color: #ffffff; transform: translateX(-2px); }
.site-float-ico { width: 22px; height: 20px; background: #ffffff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M2 6l10 7 10-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M2 6l10 7 10-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1240px) {
  .sh-logo-lead { display: none; }
  .sh-menu { gap: 15px; }
}
@media (max-width: 1160px) {
  .sh-nav, .sh-cta { display: none; }
  .p-hamburger { display: flex; }
  .sh-header.sh-solid .p-hamburger span { background: #1c5f9e; }
}
@media (max-width: 860px) {
  .site-split { grid-template-columns: 1fr; gap: 24px; }
  .site-grid3 { grid-template-columns: 1fr; }
  .site-grid4 { grid-template-columns: 1fr 1fr; }
  .site-trust { grid-template-columns: 1fr 1fr; }
  .site-branch { grid-template-columns: 1fr; }
  .site-branchcard { grid-template-columns: 1fr; }
  .site-branchcard .site-imgslot { aspect-ratio: 3 / 2; }
  .site-feature-grid { grid-template-columns: 1fr; min-height: 0; }
  .site-feature-media { min-height: 0; aspect-ratio: 4 / 3; }
  .site-feature--rev .site-feature-media { order: -1; }
  .site-feature-text { padding: 64px 35px; }
  .sf-inner { grid-template-columns: 1fr; gap: 40px; }
  .sf-nav { grid-template-rows: repeat(7, auto); gap: 20px 32px; }
  .site-wm { font-size: 92px; }
  .site-trust { grid-template-columns: 1fr 1fr; }
  .site-mq-item { width: 240px; height: 150px; font-size: 14px; }
  .site-value-grid { grid-template-columns: 1fr; gap: 26px; }
  .site-strength-layout { display: block; }
  .site-strail { display: none; }
  .site-vhead { align-items: flex-start; text-align: left; padding-top: 0; }
  .site-vtitle { writing-mode: horizontal-tb; margin: 6px 0 14px; letter-spacing: .06em; }
  .site-points { justify-content: center; }
  .parts222_wrap { display: block !important; }
  .parts222_post_list, .parts228_post_list { grid-template-columns: 1fr 1fr !important; }
  .parts222_sidebar { margin-top: 32px !important; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .site-pagehead { padding: 100px 0 60px; }
  .contact_section { padding-top: 100px !important; }
  .parts213_section_form { padding-top: 0 !important; }
  .site-breadcrumb { padding: 10px 0; }
  .site-hero--sm { min-height: 0 !important; padding: 110px 0 40px !important; }
  .site-concern-split { grid-template-columns: 1fr !important; }
  .site-num3 { grid-template-columns: 1fr !important; }
  .site-concern-split .site-imgslot { aspect-ratio: 4 / 3 !important; height: auto !important; }
  .sh-inner { padding-left: 30px !important; padding-right: 20px !important; }
  .sh-logo-name { font-size: 16px; }
  .sh-logo-img { width: 48px; height: 48px; }
  .p-hamburger { margin-right: 0; padding: 4px; gap: 5px; }
  .p-hamburger span { width: 22px; }
  .site-section { padding: 80px 0; }
  .site-feature-text { padding-top: 80px; padding-bottom: 80px; }
  .site-strength-center { padding-top: 80px; padding-bottom: 80px; padding-left: 35px; padding-right: 35px; }
  .site-strength-center .site-vhead { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* STRENGTH：左右の縦スクロール画像を、ボタン下に横スクロール帯として配置 */
  .site-strength-layout { display: flex; flex-direction: column; }
  .site-strength-center { order: 0; }
  .site-strail { display: block; order: 1; width: 100%; height: auto; margin: 0 0 10px; overflow: hidden; }
  .site-strail--down { order: 2; }
  .site-strail .site-strail-track { position: static; display: flex; width: max-content; }
  .site-strail--up .site-strail-track { animation: strail-x-ltr 28s linear infinite; }
  .site-strail--down .site-strail-track { animation: strail-x-rtl 28s linear infinite; }
  .site-strail .site-strail-track img { width: 200px; aspect-ratio: 4 / 3; height: auto; margin: 0 10px 0 0; }
  .site-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-container { padding: 0 35px; }
  .site-h1 { font-size: 27px; }
  .site-h2 { font-size: 28px; gap: 12px; }
  .site-head-row .site-eyebrow, .site-strength-center .site-eyebrow, .site-eyebrow { font-size: 12px; }
  .site-strength-center .site-vtitle { font-size: 28px; }
  .site-strength .site-lead-serif { font-size: 20px; }
  .site-strength-center .site-points { flex-direction: column; gap: 0; width: 100%; margin-left: 0; }
  .site-strength-center .site-point { max-width: none; width: 100%; aspect-ratio: auto; min-height: 0; flex-direction: row; align-items: center; justify-content: center; gap: 26px; padding: 30px 50px; border: 1px solid #dfe4ea; border-top: none; box-shadow: none; }
  .site-strength-center .site-points .site-point:first-child { border-top: 1px solid #dfe4ea; }
  .site-strength-center .site-point .site-point-no { position: static; display: inline-block; padding: 0; text-align: left; border-bottom: none; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 5px; font-size: 20px; }
  .site-strength-center .site-point .site-point-label { margin: 0; padding: 0; font-size: 18px; }
  .site-strength-center .site-point .site-point-label::after { display: none; }
  /* SOLUTIONS / WHY US：上段=左に数字・右に文章、下段=画像（全幅） */
  .site-sol-list .site-sol-no { grid-column: 1; grid-row: 1; align-self: start; }
  .site-sol-list .site-sol-text { grid-column: 2; grid-row: 1; align-self: start; }
  .site-sol-list .site-sol-media { grid-column: 1 / 3; grid-row: 2; }
  .site-trust { grid-template-columns: 1fr; }
  .site-trust-item b { font-size: 40px; }
  .site-trust > .site-trust-item { padding-top: 20px; padding-bottom: 20px; }
  .site-h2::before { width: 32px; }
  .site-lead { font-size: 16px; }
  .site-lead-serif { font-size: 19px; }
  .site-hero { min-height: 100vh; padding: 124px 0 90px; }
  .site-hero .site-hero-inner { max-width: none !important; margin: 0 !important; padding-left: 30px !important; padding-right: 30px !important; }
  .site-hero .site-hero-grid { grid-template-columns: 1fr !important; justify-items: center; }
  .site-hero .site-hero-grid > div { text-align: left !important; width: 100%; }
  .site-hero .site-btnrow { justify-content: center; }
  .site-hero .site-btnrow .site-btn { max-width: 100%; }
  .site-hero h1 { font-size: 45px; }
  .site-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-hero-media.site-imgslot { order: -1; aspect-ratio: 16 / 10; }
  .site-hero::after { height: 56px; }
  .site-hero h1 { font-size: 30px; text-shadow: 0 1px 6px rgba(0,0,0,.5), 0 0 14px rgba(0,0,0,.4) !important; }
  .site-hero-lead { font-size: 16px; text-shadow: 0 1px 5px rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.35) !important; }
  .site-grid2, .site-grid4 { grid-template-columns: 1fr; }
  .site-service { min-height: 400px; }
  .site-service-body { max-width: none; left: 0; right: 0; }
  .site-pagehead { padding: 108px 0 34px; }
  .site-pagehead h1 { font-size: 26px; }
  .site-btn, .site-btn--sub { width: 100%; justify-content: center; }
  .site-ba { grid-template-columns: 1fr 1fr; }
  .site-wm { font-size: 64px; top: 4px; }
  .site-point { width: 132px; height: 132px; }
  .site-cta-band h2 { font-size: 25px; }
  .parts222_section .parts222_post_list, .parts228_section .parts228_post_list { grid-template-columns: 1fr !important; }
  .parts222_section > h2, .parts228_section > h2 { font-size: 23px !important; }
}

.site-svc-point-title.site-norule::before { display: none; }

.site-cards--flat .site-card { border-radius: 0; }


/* ===== 21_skin_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（skin後に結合される最後のCSS）─ 株式会社インプルーヴ
   実採番の動的パーツ微調整は投入後の実DOMで確認して追記（R-28/R-30）。
   ============================================================ */
/* CueZilla自動パンくずを全ページ非表示（ユーザー標準ルール）。
   設計の手組みパンくずは .site-breadcrumb へ退避済み＝ここでは巻き込まれない。 */
[class*="_breadcrumb"], .p-breadcrumb{ display:none !important; }
/* TOP「新しい床の選択肢」2枚（UV/研磨）の高さ揃え。image-slot→img変換の inline height:100% が
   .site-imgslot の aspect-ratio を無効化していたため height:auto に戻し 3/2 で統一。 */
.site-newopt .site-imgslot{ height:auto !important; aspect-ratio:3 / 2; }
/* TOP 施工実績抜粋（CueZilla parts131415）タイトル調整（R-28・実採番・ユーザー指定）。
   font-familyはh2へ直接当てる（h2のf_meiryo等ゴシック指定に勝たせて明朝化）。--dyn-*はテーマ7値連動。 */
[class*="_blog_title_wrap"], [class*="_blog_title_wrap"] h2{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
.parts131415_blog_title_wrap{ text-align:left !important; }
.parts131415_blog_title_wrap h2{ font-size:50px !important; }
/* ブログ/施工実績の一覧をskinのauto-fillグリッドへ戻す（記事一覧とサイドバーの重なり回避・全端末）。
   style.cssの .partsNNN_section .partsNNN_post_list(1fr 1fr固定=0,2,0)に勝つよう属性セレクタ二重化(0,2,0)＋override(後勝ち)。採番非依存。 */
[class*="_post_list"][class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* TOP 事業内容(SERVICES) 5項目：861px以上で3列（3+2・左寄せ）、未満は1列（ユーザー指示 2026-08-07） */
.site-services .site-svc5{ grid-template-columns:1fr !important; }
@media (min-width:861px){ .site-services .site-svc5{ grid-template-columns:repeat(3, 1fr) !important; } }
/* SERVICES 5カード：本文とチップをカード幅に収める（塗床本文「…します。」／UVチップ「長持ち」の溢れ回避） */
.site-services .site-service-body p{ font-size:14px !important; letter-spacing:-0.01em !important; }
.site-services .site-chips{ gap:8px !important; }
.site-services .site-chips span{ padding:5px 11px !important; font-size:12px !important; letter-spacing:.02em !important; }