/* ===== A: 濵田板金工業 サイト本体CSS（受領 css/style.css・画像パスをCueZilla CDN(.webp)へ変換） ===== */
@charset "UTF-8";

:root {
  --c-cream: #f0f5f9;
  --c-cream-deep: #e2edf5;
  --c-sand: #cfe0ee;
  --c-blue-pale: #d4e8f5;
  --c-blue-soft: #7baed1;
  --c-teal-pale: #c8dfe8;
  --c-navy: #1d3c6e;
  --c-navy-deep: #16305a;
  --c-accent: #2b5aa6;
  --c-accent-deep: #1d4a8a;
  --c-text: #2a3a52;
  --c-white: #f8fbfe;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --asym-l: 56px 0 56px 0;
  --asym-m: 40px 0 40px 0;
  --asym-s: 24px 0 24px 0;
  --font-head: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --header-h: 96px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== スプラッシュ（オープニング） ===== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--c-white), var(--c-blue-pale));
  /* JS無効でも確実に消えるようCSSアニメーションで自動フェードアウト */
  animation: splash-out .8s ease 2.2s forwards;
}
.splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
html.splash-seen .splash { display: none; }
.splash__inner { display: grid; justify-items: center; gap: 18px; padding: 24px; }
.splash__logo {
  height: 36px; width: auto;
  animation: splash-up .9s cubic-bezier(.2,.7,.3,1) both;
}
.splash__tag {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-navy);
  font-size: 0.95rem;
  animation: splash-up .9s cubic-bezier(.2,.7,.3,1) .25s both;
}
.splash__bar {
  width: 160px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-blue-soft));
  transform-origin: left center;
  animation: splash-bar 1.5s ease .15s both;
}
@keyframes splash-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes splash-bar { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .splash__logo, .splash__tag, .splash__bar { animation-duration: .01s; }
}
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-cream);
  line-height: 1.9;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ===== 写真プレースホルダー ===== */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(43,90,166,.22), rgba(100,160,210,.35)),
    repeating-linear-gradient(45deg, #dde9f4 0 14px, #d3e3f0 14px 28px);
  border-radius: var(--asym-m);
  overflow: hidden;
}
.ph span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: #3a6080;
  background: rgba(248,251,254,.88);
  padding: 6px 16px;
  border-radius: 999px;
}
.ph--hero { aspect-ratio: 4 / 3; border-radius: var(--asym-l); }
.ph--about { aspect-ratio: 4 / 3; border-radius: var(--asym-l); }
.ph--card { aspect-ratio: 4 / 3; }
.ph--work { aspect-ratio: 4 / 3; border-radius: var(--asym-s); }
.ph--work-after {
  background:
    linear-gradient(135deg, rgba(43,90,166,.18), rgba(100,160,210,.32)),
    repeating-linear-gradient(45deg, #dce8f2 0 14px, #d0e0ec 14px 28px);
}
.ph--episode { aspect-ratio: 16 / 10; }
.ph--service { aspect-ratio: 16 / 9; border-radius: 0; }
.ph--network { aspect-ratio: 4 / 3; border-radius: var(--asym-s); }

/* 実画像ラッパー */
.img-hero { aspect-ratio: 4/3; border-radius: var(--asym-l); overflow: hidden; }
.img-about { aspect-ratio: 4/3; border-radius: var(--asym-l); overflow: hidden; }
.img-card { aspect-ratio: 4/3; border-radius: var(--asym-m); overflow: hidden; }
.img-work { aspect-ratio: 4/3; border-radius: var(--asym-s); overflow: hidden; }
.img-service { aspect-ratio: 16/9; border-radius: 0; overflow: hidden; }
.img-episode { aspect-ratio: 16/10; border-radius: var(--asym-s); overflow: hidden; }
.img-network { aspect-ratio: 4/3; border-radius: var(--asym-s); overflow: hidden; }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================
   ヘッダー
============================================ */
.header {
  position: fixed;
  top: 0;
  left: 40px;
  right: 40px;
  z-index: 100;
  background: var(--c-white);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  box-shadow: 0 4px 28px rgba(29,60,110,.13);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  max-width: 1560px;
  margin: 0 auto;
  padding: 12px clamp(12px, 1.4vw, 20px) 12px clamp(14px, 1.7vw, 24px);
  min-height: var(--header-h);
}
.header__logo a { display: flex; align-items: center; }
.header__logo-img {
  height: clamp(30px, 2.6vw, 38px);
  width: auto;
  display: block;
  object-fit: contain;
}

.gnav { margin-left: auto; min-width: 0; }
.gnav__list { display: flex; flex-wrap: nowrap; }
.gnav__list li { border-left: 1px solid #ccdde8; }
.gnav__list li:last-child { border-right: 1px solid #ccdde8; }
.gnav__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px clamp(5px, 0.7vw, 10px);
  font-size: clamp(0.66rem, 0.32rem + 0.45vw, 0.74rem);
  font-weight: 700;
  color: var(--c-navy);
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
  border-radius: var(--radius-s);
  transition: background .25s, transform .25s;
}
.gnav__list a:hover { background: var(--c-cream); transform: translateY(-3px); }
.gnav__icon { display: flex; align-items: center; justify-content: center; line-height: 1; opacity: .75; }

/* --- 採用情報ドロップダウン --- */
.gnav__has-sub { position: relative; }
.gnav__label { display: inline-flex; align-items: center; gap: 4px; }
.gnav__caret { font-size: 0.7em; opacity: .75; transition: transform .22s ease; }
.gnav__has-sub:hover .gnav__caret,
.gnav__has-sub:focus-within .gnav__caret { transform: rotate(180deg); }
.gnav__has-sub:hover > a,
.gnav__has-sub:focus-within > a { background: var(--c-cream); }
.gnav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: block;
  min-width: 196px;
  background: var(--c-white);
  border: 1px solid #ccdde8;
  border-radius: var(--radius-m);
  box-shadow: 0 18px 36px rgba(29,60,110,.20);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.gnav__sub::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--c-white);
}
.gnav__sub::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ccdde8;
  z-index: -1;
}
.gnav__has-sub:hover .gnav__sub,
.gnav__has-sub:focus-within .gnav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.gnav__sub-head {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: #8aa0b8;
  padding: 4px 12px 8px;
  border-bottom: 1px solid #eef4f8 !important;
  margin-bottom: 4px;
}
.gnav__sub li { border: none !important; }
.gnav__sub a {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  gap: 9px;
  padding: 10px 12px;
  font-size: 0.82rem;
  border-radius: var(--radius-s);
}
.gnav__sub a:hover { background: var(--c-cream); transform: none; }
.gnav__sub-icon { display: inline-flex; align-items: center; color: var(--c-accent); opacity: .9; }

.header__contact { text-align: center; white-space: nowrap; line-height: 1; }
.header__tel-label { display: block; font-size: 0.68rem; color: var(--c-navy); margin-bottom: 3px; }
.header__tel {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.2rem, 0.55rem + 0.95vw, 1.5rem);
  color: var(--c-navy);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.header__tel::before { content: none; }
.header__hours {
  display: block;
  font-size: 0.68rem;
  background: var(--c-blue-pale);
  border-radius: 999px;
  padding: 2px 12px;
  color: var(--c-navy);
  line-height: 1.6;
}

.menu-btn { display: none; }

/* ===== CTA（ヘッダーflex内・余白計算は自動） ===== */
.fixed-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-start;
  margin: 2px 0 -56px;
  width: 164px;
  padding: 20px 24px 22px;
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--asym-s);
  box-shadow: 0 6px 18px rgba(43,90,166,.4);
  text-align: center;
  white-space: nowrap;
  transition: transform .25s, box-shadow .25s;
}
.fixed-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 24px rgba(43,90,166,.5); }
.fixed-cta__badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--c-white);
  color: var(--c-accent-deep);
  border-radius: 999px;
  padding: 1px 10px;
}
.fixed-cta__icon { font-size: 1.5rem; line-height: 1.2; }
.fixed-cta__main { font-family: var(--font-head); font-weight: 900; font-size: 1.2rem; line-height: 1.3; }
.fixed-cta__sub { font-size: 0.7rem; }

.fixed-campaign {
  position: fixed;
  right: 12px; bottom: 24px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 96px;
  padding: 16px 10px;
  background: linear-gradient(180deg, #4d80c4, var(--c-accent));
  color: #fff;
  border-radius: var(--asym-s);
  box-shadow: 0 6px 18px rgba(43,90,166,.38);
  transition: transform .25s;
}
.fixed-campaign:hover { transform: translateY(-3px); }
.fixed-campaign__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.5;
}
.fixed-campaign__text {
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  max-height: 180px;
}
.fixed-campaign__off {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.1rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.12);
}

/* ============================================
   共通セクション
============================================ */
main { padding-top: var(--header-h); }

.section { padding: 96px 24px; }
.section--blue { background: linear-gradient(180deg, var(--c-blue-pale), #e0eef6); }
.section--teal { background: var(--c-teal-pale); }
.section--paper { background: var(--c-cream-deep); }

.section__head { max-width: 880px; margin: 0 auto 56px; text-align: center; }

.sec-eyebrow {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--c-accent-deep);
  font-size: 1rem;
  margin-bottom: 8px;
}
.sec-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  color: var(--c-navy);
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.sec-sub {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--c-blue-soft);
  letter-spacing: 0.22em;
  font-size: 0.9rem;
  margin: 10px 0 18px;
}
.sec-divider {
  width: 72px; height: 4px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-blue-soft));
}

.marker {
  color: var(--c-accent-deep);
  background: linear-gradient(transparent 68%, rgba(43,90,166,.2) 68%);
  font-weight: 700;
}

.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 16px;
  border-radius: 999px;
  line-height: 1.7;
}
.tag--teal { background: #3a7db0; color: #fff; }
.tag--accent { background: var(--c-accent); color: #fff; }

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  background: var(--c-navy);
  color: #fff;
  padding: 14px 44px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--c-navy-deep);
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-navy-deep); }
.btn--accent { background: var(--c-accent); box-shadow: 0 4px 0 var(--c-accent-deep); }
.btn--accent:hover { box-shadow: 0 1px 0 var(--c-accent-deep); }
.btn--large { font-size: 1.15rem; padding: 18px 56px; }
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.32em;
  margin-right: 10px;
  opacity: .85;
}

/* ===== 波形区切り ===== */
.wave { line-height: 0; }
.wave svg { width: 100%; height: 64px; display: block; }
.wave--cream-to-blue svg path { fill: var(--c-blue-pale); }

/* ============================================
   見出しバウンスアニメーション
============================================ */
.js-bounce .bounce-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}
.js-bounce.is-inview .bounce-char {
  animation: bounceIn .6s cubic-bezier(.33,1.2,.66,1) forwards;
  animation-delay: calc(var(--char-i) * 0.04s);
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(20px); }
  60%  { opacity: 1; transform: translateY(-5px); }
  80%  { transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}
.js-fade { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.js-fade.is-inview { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js-bounce .bounce-char { opacity: 1; transform: none; animation: none !important; }
  .js-fade { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   ヒーロー（フルブリード）
============================================ */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url('https://cdn.cuezilla-cms.com/enjoyworks-seisaku.biz/images/1422/AdobeStock_303323324.webp') center / cover no-repeat;
  filter: brightness(0.78) saturate(0.55) contrast(1.05);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(5, 14, 48, 0.90) 0%,
    rgba(8, 22, 62, 0.74) 48%,
    rgba(12, 30, 72, 0.42) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 60px) 56px 80px;
}
.hero__copy { max-width: 620px; }
.hero__tag {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: #a8cde8;
  letter-spacing: 0.28em;
  margin-bottom: 24px;
  padding: 6px 20px;
  border: 1px solid rgba(168, 205, 232, 0.45);
  border-radius: 999px;
}
.hero__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  color: #fff;
  line-height: 1.55;
  letter-spacing: 0.06em;
  margin-bottom: 28px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero__title > span { display: block; }
.hero__title-main {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6.2vw, 5.2rem);
}
.hero__title-sub {
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  margin-top: -6px;
}
.hero__lead {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 2;
  margin-bottom: 44px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--c-accent);
  color: #fff;
  padding: 16px 40px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--c-accent-deep), 0 8px 24px rgba(43,90,166,.4);
  transition: transform .2s, box-shadow .2s;
}
.hero__btn-primary:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-accent-deep), 0 4px 12px rgba(43,90,166,.3); }
.hero__btn-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: 0.04em;
}
.hero__btn-tel svg { flex-shrink: 0; }
.hero__badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 5px 18px;
  letter-spacing: 0.06em;
}

/* ============================================
   お知らせ
============================================ */
.news { background: var(--c-blue-pale); padding: 18px 24px; }
.news__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 960px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: 999px;
  padding: 10px 28px;
  box-shadow: 0 2px 10px rgba(29,60,110,.07);
}
.news__label {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--c-navy);
  color: #fff;
  border-radius: 999px;
  padding: 2px 16px;
}
.news__link { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news__link:hover { color: var(--c-accent-deep); }
.news__date { margin-left: auto; flex-shrink: 0; font-size: 0.82rem; color: #7a8fa8; }

/* ============================================
   会社紹介
============================================ */
.about { background: linear-gradient(180deg, var(--c-blue-pale), var(--c-cream) 85%); }
/* 見出しは<br>どおり3行で収める（コンテンツ幅を超えてよい） */
.about__body .sec-title { white-space: nowrap; width: max-content; max-width: none; }
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.about__body .sec-title { text-align: left; }
.about__body p { margin-bottom: 18px; }
.about__body .btn { margin-top: 12px; }

/* ============================================
   こだわり
============================================ */
.feature__list { max-width: 1100px; margin: 0 auto; display: grid; gap: 72px; }
.feature__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--c-white);
  border-radius: var(--asym-l);
  padding: 48px 56px;
  box-shadow: 0 8px 32px rgba(29,60,110,.09);
}
.feature__item--reverse .feature__body { order: 2; }
.feature__item--reverse .feature__visual { order: 1; }
.feature__num {
  position: absolute;
  top: -28px; left: 32px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 3.4rem;
  color: var(--c-blue-soft);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
}
.feature__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--c-navy);
  line-height: 1.6;
}

/* ============================================
   お客様の声
============================================ */
.voice__lead { margin-top: 20px; }
.voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1140px;
  margin: 0 auto;
}
.voice-card {
  background: var(--c-white);
  border: 1px solid #bbd2e4;
  border-radius: var(--asym-m);
  padding: 28px 26px;
  box-shadow: 0 6px 20px rgba(29,60,110,.08);
  transition: transform .25s, box-shadow .25s;
}
.voice-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.voice-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--c-navy); }
.voice-card__stars { color: var(--c-accent); letter-spacing: 0.1em; }
.voice-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.voice-card__place { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--c-navy); }
.voice-card__pin { color: var(--c-accent); flex-shrink: 0; }
.voice-card p { font-size: 0.95rem; }

/* ============================================
   施工事例
============================================ */
.works__slider { max-width: 1140px; margin: 0 auto; }
.works__track { display: grid; }
.work-card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(32px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
  background: var(--c-white);
  border-radius: var(--asym-l);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(29,60,110,.09);
}
.work-card.is-active { opacity: 1; visibility: visible; transform: translateX(0); }
.work-card__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.work-card__images figure { position: relative; }
.work-card__label {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 16px;
  border-radius: 999px;
  color: #fff;
}
.work-card__label--before { background: #3b3b3b; }
.work-card__label--after { background: var(--c-accent); }
.work-card__body h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--c-navy);
  margin: 10px 0 4px;
}
.work-card__place { font-size: 0.85rem; color: var(--c-navy); }

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
}
.slider-nav__btn {
  width: 52px; height: 52px;
  border: none;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29,60,110,.15);
  transition: transform .2s, background .2s, color .2s;
}
.slider-nav__btn:hover { transform: scale(1.1); background: var(--c-navy); color: #fff; }
.slider-nav__count {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-navy);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}
.works__more { text-align: center; margin-top: 40px; }

/* ============================================
   対応エリア
============================================ */
.area__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.area__circle {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-white);
  border: 6px solid var(--c-white);
  box-shadow: 0 10px 32px rgba(29,60,110,.2);
  overflow: hidden;
}
.area__map-img {
  position: absolute;
  /* 濃色ハイライト（対応エリア）を円内に大きく収めるクロップ（PNG） */
  width: 200%;
  height: 200%;
  max-width: none;
  left: -64%;
  top: -74%;
  object-fit: fill;
}
.area__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--c-navy);
  color: #fff;
  border-radius: 999px;
  padding: 3px 14px;
  white-space: nowrap;
}
.area__pin--main {
  top: 58%; left: 50%;
  background: var(--c-white);
  color: var(--c-navy);
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.area__row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.area__row dt { flex-shrink: 0; min-width: 130px; text-align: center; }
.area__row dd { padding-top: 2px; }
.area__note { margin-top: 22px; font-size: 0.85rem; color: #5d6b80; }

/* ============================================
   お問い合わせCTA
============================================ */
.contact { background: linear-gradient(180deg, var(--c-blue-pale), var(--c-cream) 60%); }
.contact__box {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: var(--asym-l);
  padding: 64px 48px 56px;
  text-align: center;
  box-shadow: 0 10px 36px rgba(29,60,110,.1);
}
.contact__eyebrow {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: 0.25em;
  background: var(--c-accent);
  color: #fff;
  border-radius: 999px;
  padding: 4px 28px;
}
.contact__lead { margin: 20px 0 36px; }
.contact__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.contact__tel-label { font-size: 0.85rem; font-weight: 700; color: var(--c-navy); }
.contact__tel-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2rem;
  color: var(--c-navy);
}
.contact__tel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .75;
}
.contact__tel-num:hover { color: var(--c-accent-deep); }
.contact__tel-hours { font-size: 0.75rem; color: #5d6b80; }

/* ============================================
   工事の流れ
============================================ */
.episode__lead { margin-top: 16px; }
.episode__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1140px;
  margin: 0 auto;
}
.episode-card {
  background: var(--c-white);
  border-radius: var(--asym-m);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(29,60,110,.09);
  transition: transform .25s, box-shadow .25s;
}
.episode-card .ph { border-radius: 0; }
.episode-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--c-navy);
  padding: 18px 22px 4px;
}
.episode-card p { font-size: 0.9rem; padding: 0 22px 22px; }

/* ============================================
   数字で見る
============================================ */
.reason__lead { margin-top: 20px; }
.reason__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1140px;
  margin: 0 auto;
}
.reason-card {
  position: relative;
  background: var(--c-white);
  border-radius: var(--asym-m);
  padding: 48px 28px 32px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(29,60,110,.09);
  transition: transform .25s;
}
.reason-card__num {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.3rem;
  color: #fff;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--c-accent-deep);
}
.reason-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--c-navy);
  margin-bottom: 12px;
}
.reason-card p { font-size: 0.92rem; text-align: left; }

/* ============================================
   業務案内
============================================ */
.service__lead { margin-top: 16px; }
.service__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}
.service-card {
  background: var(--c-white);
  border-radius: var(--asym-m);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(29,60,110,.1);
  transition: transform .25s, box-shadow .25s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(29,60,110,.17); }
.service-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--c-navy);
  padding: 18px 26px;
}
.service-card__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-blue-pale);
  color: var(--c-navy);
  font-size: 1.1rem;
  transition: background .25s, color .25s, transform .25s;
}
.service-card:hover .service-card__arrow { background: var(--c-accent); color: #fff; transform: translateX(4px); }

/* ============================================
   採用情報
============================================ */
.network__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.network-card {
  background: var(--c-white);
  border-radius: var(--asym-m);
  padding: 16px 16px 0;
  box-shadow: 0 6px 18px rgba(29,60,110,.09);
  transition: transform .25s;
}
.network-icon {
  display: grid;
  place-items: center;
  padding: 22px 0;
  border-radius: var(--asym-s);
  background: var(--c-cream);
  color: var(--c-accent);
}
.network-icon svg {
  width: 48px;
  height: 48px;
  stroke-width: 1.2;
}
.network-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-navy);
  text-align: center;
  padding: 14px 0 18px;
}

/* ============================================
   フッター
============================================ */
.footer {
  background: var(--c-cream-deep);
  border-top: 1px solid #bdd0e0;
  padding: 72px 24px 32px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__logo { margin-bottom: 20px; }
.footer__logo-img { height: 34px; width: auto; display: block; object-fit: contain; }
.footer__company address { font-style: normal; font-size: 0.9rem; line-height: 1.9; }
.footer__tel {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--c-navy);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 6px 0 2px;
}
.footer__tel:hover { color: var(--c-accent-deep); }
.footer__fax { display: block; }
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 32px;
  align-content: start;
}
.footer__nav a { font-size: 0.9rem; line-height: 2.4; }
.footer__nav a:hover { color: var(--c-accent-deep); }
.footer__copy { text-align: center; margin-top: 48px; color: #7a8fa8; }

/* ============================================
   レスポンシブ
============================================ */
@media (max-width: 1520px) {
  :root { --header-h: 72px; }
  .gnav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--c-white);
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    box-shadow: 0 12px 24px rgba(29,60,110,.13);
    padding: 16px 24px 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .3s, transform .3s, visibility .3s;
  }
  .gnav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .gnav__list { flex-direction: column; }
  .gnav__list li { border: none; border-bottom: 1px solid #ddeaf3; }
  .gnav__list a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px 8px; font-size: 0.95rem; }
  /* 採用情報サブメニュー：ドロワー内では常時展開・インデント表示 */
  .gnav__sub {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: block;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0 44px;
  }
  .gnav__sub::before, .gnav__sub::after { display: none; }
  .gnav__caret { display: none; }
  .gnav__sub-head { padding: 12px 8px 6px; border-bottom: none !important; margin-bottom: 0; }
  .gnav__sub li { border-bottom: 1px solid #ddeaf3 !important; }
  .gnav__sub li.gnav__sub-head { border-bottom: none !important; }
  .gnav__sub li:last-child { border-bottom: none !important; }
  .gnav__sub a { padding: 12px 8px; font-size: 0.9rem; }
  /* TAB: gnavがドロップダウン化で通常フローから消えるため、電話番号を右寄せ起点に */
  .header__contact { margin-left: auto; }
  /* デザインはPCと同じ縦積みのまま縮小のみ */
  .fixed-cta {
    margin: 2px 0 -42px;
    width: 132px;
    padding: 12px 14px 14px;
    gap: 3px;
  }
  .fixed-cta__badge { font-size: 0.62rem; }
  .fixed-cta__icon svg { width: 18px; height: 18px; }
  .fixed-cta__main { font-size: 1rem; }
  .menu-btn {
    display: grid;
    place-content: center;
    gap: 6px;
    width: 44px; height: 44px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-btn span {
    width: 24px; height: 2.5px;
    background: var(--c-navy);
    border-radius: 999px;
    transition: transform .3s, opacity .3s;
  }
  .menu-btn.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-btn.is-open span:nth-child(2) { opacity: 0; }
  .menu-btn.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .fixed-campaign { display: none; }
  .hero__inner, .about__inner, .area__inner { grid-template-columns: 1fr; }
  .feature__item { grid-template-columns: 1fr; padding: 40px 28px; gap: 28px; }
  .feature__item--reverse .feature__body { order: 1; }
  .feature__item--reverse .feature__visual { order: 2; }
  .voice__list, .episode__list, .reason__list { grid-template-columns: 1fr 1fr; }
  .network__list { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
}

/* 構造変更ポイント②: 電話番号はここまで（右寄せ起点をCTAへ引き継ぎ）
   ※1240pxブロックのmarginショートハンドより後に置くこと */
@media (max-width: 859px) {
  .header__contact { display: none; }
  .fixed-cta { margin-left: auto; }
}

@media (max-width: 640px) {
  .header { left: 12px; right: 12px; }
  .header__inner { gap: 12px; padding: 10px 12px 10px 16px; }
  .header__logo-img { height: 30px; }
  .header__contact { display: none; }
  :root { --header-h: 58px; }
  .fixed-cta { margin-left: auto; width: 116px; padding: 8px 10px 9px; gap: 2px; }
  .fixed-cta__icon { display: none; }
  .fixed-cta__main { font-size: 0.9rem; }
  .section { padding: 64px 18px; }
  /* ヒーロー: 左右余白を詰め、改行は自然位置に任せ、全文をファーストビューに収める */
  .hero { min-height: 100svh; }
  .hero__inner { padding: calc(var(--header-h) + 28px) 22px 40px; }
  .hero__tag { margin-bottom: 14px; }
  .hero__title-main { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .hero__title-sub { font-size: clamp(1.15rem, 5.2vw, 1.5rem); white-space: nowrap; margin-top: 2px; }
  .hero__lead { line-height: 1.75; margin: 18px 0 26px; }
  .hero__lead br { display: none; }
  .hero__actions { gap: 12px; }
  .hero__title { white-space: normal; }
  .about__body .sec-title { white-space: normal; width: auto; }
  .voice__list, .episode__list, .reason__list, .service__list, .network__list { grid-template-columns: 1fr; }
  .reason__list { gap: 44px; }
  .work-card__images { grid-template-columns: 1fr; }
  .contact__box { padding: 48px 22px 36px; }
  .contact__lead { margin: 16px 0 24px; }
  .contact__actions { flex-direction: column; gap: 16px; }
  .contact__tel-num { gap: 8px; font-size: 1.7rem; }
  /* お知らせカード: 縦積み時はアイテム間を詰めてカード余白とまとめる */
  .news__inner { flex-direction: column; align-items: flex-start; gap: 6px; border-radius: var(--radius-m); padding: 16px 20px; }
  .news__link { white-space: normal; line-height: 1.55; }
  .news__date { margin-left: 0; }
}

/* ============================================================
   下層ページ用パーツ（subpage components）
   ============================================================ */

/* --- 共通コンテンツ幅 --- */
.l-content { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.l-content--narrow { max-width: 800px; }
/* セクション内ブロックの縦リズム統一（section__headのmargin-bottom 56pxとは折りたたみで両立） */
.l-content > * + * { margin-top: 40px; }

/* 下層ページ見出しは文節単位で自然に改行（全デバイス） */
.page-hero__title,
.l-content .sec-title,
.prose h2,
.prose h3,
.media-row__body h3 {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* --- 下層ページヘッダー（サイトを象徴する印象的なヘッダー） --- */
.page-hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 80px) 24px 72px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(120deg, var(--c-navy-deep), var(--c-accent));
}
/* 金属の継ぎ目（板金）を想起させる斜めライン */
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image: repeating-linear-gradient(125deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}
/* 上辺の屋根ライン（ジグザグ） */
.page-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 2;
  background:
    linear-gradient(135deg, var(--c-cream) 50%, transparent 51%) repeat-x,
    linear-gradient(225deg, var(--c-cream) 50%, transparent 51%) repeat-x;
  background-size: 24px 14px;
  background-position: 0 0, 12px 0;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: center / cover no-repeat;
  filter: brightness(.45) saturate(.7);
}
.page-hero__inner { position: relative; z-index: 3; }
.page-hero__icon {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--c-blue-pale);
}
.page-hero__eyebrow {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  color: var(--c-blue-pale);
  margin-bottom: 6px;
}
.page-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.page-hero__rule {
  width: 64px; height: 4px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-blue-soft), #fff);
}

/* --- パンくず --- */
.breadcrumb { padding: 14px 24px; background: var(--c-cream-deep); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1080px; margin: 0 auto; font-size: 0.8rem; color: #5d6b80; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: "›"; color: #9ab5cc; }
.breadcrumb a:hover { color: var(--c-accent-deep); }
.breadcrumb li:last-child { color: var(--c-navy); font-weight: 700; }

/* --- 本文タイポグラフィ（prose） --- */
.prose > * + * { margin-top: 1.2em; }
.prose h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--c-navy);
  line-height: 1.5;
  padding-left: 16px;
  border-left: 6px solid var(--c-accent);
  margin-top: 2em;
}
.prose h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-navy);
  margin-top: 1.6em;
  padding-bottom: 8px;
  border-bottom: 2px dotted var(--c-sand);
}
.prose h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--c-accent-deep); margin-top: 1.4em; }
.prose p { line-height: 2; }
.prose a { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.5em; line-height: 1.9; }
.prose ul li::marker { color: var(--c-accent); }
.prose blockquote {
  border-left: 4px solid var(--c-blue-soft);
  background: var(--c-cream);
  padding: 16px 20px;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: #45566f;
}
.prose img { border-radius: var(--radius-m); }
.prose figure figcaption { font-size: 0.8rem; color: #7a8fa8; text-align: center; margin-top: 8px; }

/* --- 補足・注意ボックス（callout） --- */
.callout {
  display: flex;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius-m);
  background: var(--c-blue-pale);
  border: 1px solid var(--c-sand);
}
.callout__icon { flex-shrink: 0; color: var(--c-accent); }
.callout__title { font-family: var(--font-head); font-weight: 700; color: var(--c-navy); margin-bottom: 4px; }
.callout--warn { background: #fdeef0; border-color: #f3c9cf; }
.callout--warn .callout__icon { color: #c0455a; }

/* --- 中間CTA帯 --- */
.cta-band {
  background: linear-gradient(120deg, var(--c-navy), var(--c-accent));
  color: #fff;
  border-radius: var(--asym-m);
  padding: 40px 32px;
  text-align: center;
}
.cta-band__title { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; margin-bottom: 8px; }
.cta-band__lead { color: rgba(255,255,255,.85); margin-bottom: 24px; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn { background: var(--c-white); color: var(--c-accent-deep); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
/* 上下/横に2つ並ぶボタンは同じ大きさに揃える */
.cta-band__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  text-align: center;
}
@media (max-width: 520px) {
  .cta-band__actions { flex-direction: column; align-items: center; }
  .cta-band__actions .btn { width: 100%; max-width: 320px; min-width: 0; }
}

/* --- 情報テーブル（会社概要など） --- */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--c-sand); vertical-align: top; line-height: 1.8; }
.info-table th {
  width: 30%;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-navy);
  background: var(--c-cream);
  white-space: nowrap;
}

/* --- 仕様・料金テーブル --- */
.spec-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--c-white); border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 4px 16px rgba(29,60,110,.08); }
.spec-table th, .spec-table td { padding: 14px 18px; border: 1px solid var(--c-sand); text-align: center; }
.spec-table thead th { background: var(--c-navy); color: #fff; font-family: var(--font-head); font-weight: 700; border-color: var(--c-navy); }
.spec-table tbody th { background: var(--c-cream); font-weight: 700; color: var(--c-navy); text-align: left; }
.spec-table tbody tr:nth-child(even) td { background: #fbfdff; }

/* --- FAQアコーディオン --- */
.faq { display: grid; gap: 14px; }
.faq__item { background: var(--c-white); border-radius: var(--radius-m); box-shadow: 0 4px 14px rgba(29,60,110,.07); overflow: hidden; }
.faq__q {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 20px 24px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  color: var(--c-navy); text-align: left;
}
.faq__q::before { content: "Q"; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 0.9rem; }
.faq__mark { margin-left: auto; flex-shrink: 0; width: 18px; height: 18px; position: relative; transition: transform .3s; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--c-accent); }
.faq__mark::before { width: 16px; height: 2px; }
.faq__mark::after { width: 2px; height: 16px; transition: transform .3s; }
.faq__item.is-open .faq__mark::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__a-inner { display: flex; gap: 14px; padding: 0 24px 22px; color: #45566f; line-height: 1.9; }
.faq__a-inner::before { content: "A"; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-cream-deep); color: var(--c-accent-deep); font-weight: 700; }

/* --- フォーム --- */
.form { display: grid; gap: 24px; }
.form__row { display: grid; gap: 8px; }
.form__label { font-family: var(--font-head); font-weight: 700; color: var(--c-navy); }
.form__req { font-size: 0.7rem; font-weight: 700; color: #fff; background: #c0455a; border-radius: 4px; padding: 2px 7px; margin-left: 8px; }
.form__opt { font-size: 0.7rem; font-weight: 700; color: #5d6b80; background: var(--c-cream-deep); border-radius: 4px; padding: 2px 7px; margin-left: 8px; }
.form__field, .form textarea, .form select {
  width: 100%;
  font-family: inherit; font-size: 1rem;
  padding: 13px 16px;
  border: 1.5px solid var(--c-sand);
  border-radius: var(--radius-s);
  background: var(--c-white);
  color: var(--c-text);
}
.form__field:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(43,90,166,.15); }
.form textarea { min-height: 140px; resize: vertical; }
.form__choices { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.form__choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.form__choice input { width: 18px; height: 18px; accent-color: var(--c-accent); }
.form__submit { display: flex; justify-content: center; margin-top: 8px; }
.form__note { font-size: 0.82rem; color: #7a8fa8; }

/* --- 縦フロー（ステップ） --- */
.flow { display: grid; gap: 0; max-width: 760px; margin: 0 auto; }
.flow__step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-bottom: 36px; }
.flow__step:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 56px; bottom: 0; width: 2px; background: var(--c-sand); }
.flow__num {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-accent); color: #fff;
  font-family: var(--font-head); font-weight: 900; font-size: 1.3rem;
  position: relative; z-index: 1;
}
.flow__body { padding-top: 6px; }
.flow__body h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--c-navy); margin-bottom: 6px; }

/* --- スタッフ／プロフィールカード --- */
.staff-card { background: var(--c-white); border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 6px 18px rgba(29,60,110,.1); }
.staff-card__photo { aspect-ratio: 4 / 3; border-radius: 0; }
.staff-card__photo--avatar {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-blue-pale), var(--c-cream-deep));
}
.staff-card__photo--avatar img { width: auto; height: 100%; object-fit: contain; display: block; }
.staff-card__body { padding: 20px 22px 24px; }
.staff-card__role { font-size: 0.78rem; font-weight: 700; color: var(--c-accent); }
.staff-card__name { font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; color: var(--c-navy); margin: 2px 0 12px; }
.staff-card__name small { font-size: 0.7rem; font-weight: 500; color: #7a8fa8; margin-left: 8px; }
.staff-card__quote { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; line-height: 1.55; color: var(--c-accent-deep); margin: 4px 0 8px; }
.staff-card__quote::before { content: "“"; color: var(--c-blue-soft); margin-right: 1px; }
.staff-card__quote::after { content: "”"; color: var(--c-blue-soft); margin-left: 1px; }
.staff-qa { margin-top: 6px; }
.staff-qa dt { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; color: var(--c-accent-deep); margin-top: 12px; }
.staff-qa dd { margin: 3px 0 0; line-height: 1.85; }

/* --- 要素材（取材・撮影で取得）マーカー --- */
.material-note {
  position: relative;
  border: 2px dashed #b3c8de;
  background: repeating-linear-gradient(45deg, #f4f8fc 0 18px, #eef4fa 18px 36px);
  border-radius: var(--radius-m);
  padding: 22px 26px;
  max-width: 760px;
  margin: 0 auto;
}
.material-note__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--c-navy);
  background: var(--c-white);
  border: 1px solid #b3c8de;
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 12px;
}
.material-note__label svg { color: var(--c-accent); }
.material-note p { line-height: 1.9; color: #45586e; }
.material-note ul { padding-left: 1.3em; list-style: disc; margin-top: 8px; }
.material-note ul li { margin-top: 5px; line-height: 1.8; color: #45586e; }
.material-note ul li::marker { color: var(--c-accent); }
.note-sm { max-width: 760px; margin: 18px auto 0; font-size: 0.82rem; line-height: 1.8; color: #7a8fa8; }

/* 板金屋の1日：各工事写真＋キャプション */
.work-photo { margin: 0; }
.work-photo figcaption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-accent-deep);
}

/* --- 募集要項（グループ見出し＋推奨リスト） --- */
.req-head {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--c-navy);
  margin: 34px 0 12px;
  padding-left: 13px;
  border-left: 4px solid var(--c-accent);
  line-height: 1.4;
}
.req-head:first-child { margin-top: 0; }
.req-recommend {
  background: var(--c-white);
  border: 1px solid var(--c-sand);
  border-radius: var(--radius-m);
  padding: 22px 26px;
  margin-bottom: 8px;
}
.req-recommend__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-accent-deep);
  margin: 0 0 12px;
}
.req-recommend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.req-recommend li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.7; }
.req-recommend li svg { flex: none; margin-top: 3px; color: var(--c-accent); }
.info-table td .req-lead { display: inline-block; margin-top: 4px; color: var(--c-accent-deep); font-weight: 600; }

/* --- 施工実績／投稿カード（一覧グリッド） --- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-grid--2 { grid-template-columns: repeat(2, 1fr); }
.post-card { display: block; background: var(--c-white); border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 6px 18px rgba(29,60,110,.09); transition: transform .25s, box-shadow .25s; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(29,60,110,.16); }
.post-card__thumb { aspect-ratio: 4 / 3; position: relative; }
.post-card__cat { position: absolute; top: 12px; left: 12px; }
.post-card__body { padding: 16px 18px 20px; }
.post-card__date { font-size: 0.76rem; color: #7a8fa8; }
.post-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--c-navy); line-height: 1.6; margin-top: 4px; }

/* --- ページネーション --- */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pager__item {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: grid; place-items: center;
  border-radius: var(--radius-s);
  background: var(--c-white);
  color: var(--c-navy); font-weight: 700;
  box-shadow: 0 2px 8px rgba(29,60,110,.08);
  transition: background .2s, color .2s;
}
.pager__item:hover { background: var(--c-cream-deep); }
.pager__item.is-current { background: var(--c-accent); color: #fff; }
.pager__item.is-disabled { opacity: .4; pointer-events: none; }

/* --- 目次（toc） --- */
.toc { background: var(--c-white); border: 1px solid var(--c-sand); border-radius: var(--radius-m); padding: 24px 26px; }
.toc__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--c-navy); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--c-cream-deep); }
.toc__title::before { content: ""; width: 5px; height: 18px; border-radius: 999px; background: var(--c-accent); }
.toc ol { list-style: none; padding: 0; display: grid; gap: 8px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: var(--c-cream);
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.78rem;
}
.toc a:hover { background: var(--c-blue-pale); color: var(--c-accent-deep); }

/* ============================================================
   パーツカタログ専用（parts.html のみ）
   ============================================================ */
.catalog { padding: 56px 24px 96px; max-width: 1180px; margin: 0 auto; }
.catalog__intro { background: var(--c-white); border-radius: var(--radius-l); padding: 32px 36px; box-shadow: 0 6px 18px rgba(29,60,110,.08); margin-bottom: 48px; }
.catalog__intro h1 { font-family: var(--font-head); font-weight: 900; font-size: 1.8rem; color: var(--c-navy); margin-bottom: 10px; }
.cat-group { margin-bottom: 64px; }
.cat-group__title {
  font-family: var(--font-head); font-weight: 900; font-size: 1.35rem; color: var(--c-navy);
  padding: 10px 18px; margin-bottom: 28px;
  background: var(--c-blue-pale); border-radius: var(--radius-s);
}
.cat-item { margin-bottom: 40px; }
.cat-item__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px dotted var(--c-sand); }
.cat-item__name { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--c-navy); }
.cat-item__code { font-family: monospace; font-size: 0.78rem; color: #6f8093; background: var(--c-cream-deep); padding: 2px 8px; border-radius: 4px; }
.cat-item__note { font-size: 0.82rem; color: #7a8fa8; width: 100%; }
.cat-demo { background: var(--c-white); border: 1px solid var(--c-sand); border-radius: var(--radius-m); padding: 28px; }
.cat-demo--plain { background: none; border: none; padding: 0; }
.cat-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cat-swatch { display: grid; gap: 6px; }
.cat-swatch__chip { width: 96px; height: 64px; border-radius: var(--radius-s); border: 1px solid rgba(0,0,0,.06); }
.cat-swatch__label { font-size: 0.72rem; color: #5d6b80; font-family: monospace; }
.cat-toc { position: sticky; top: calc(var(--header-h) + 12px); }

@media (max-width: 860px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .info-table th { width: 34%; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { border-bottom: none; }
  .flow__step { grid-template-columns: 48px 1fr; gap: 14px; }
  .flow__num { width: 48px; height: 48px; font-size: 1.1rem; }
  .flow__step:not(:last-child)::before { left: 23px; top: 52px; }
}

/* ============================================================
   ビジュアル強化パーツ（工事ページ等）
   ============================================================ */

/* --- マーキー（流れる帯） --- */
.marquee { overflow: hidden; background: var(--c-navy); color: #fff; padding: 14px 0; }
.marquee__track { display: inline-flex; white-space: nowrap; animation: marquee 28s linear infinite; }
.marquee__track:hover { animation-play-state: paused; }
.marquee__track span { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0 28px; }
.marquee__track span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue-soft); margin-right: 28px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- お悩みアイコンカード --- */
.trouble-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.trouble-grid--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .trouble-grid--2col { grid-template-columns: 1fr; } }
.trouble-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--c-white);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(29,60,110,.08);
}
.trouble-card__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-accent);
}
.trouble-card p { font-weight: 700; color: var(--c-navy); line-height: 1.6; }

/* --- メリット / 注意点 対比カード --- */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pc-card {
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(29,60,110,.09);
}
/* カード全体を淡く塗り分け */
.pc-card--pro { background: #eaf2fb; }
.pc-card--con { background: #fbf2e8; }
/* 見出しは色帯（白文字） */
.pc-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  font-family: var(--font-head); font-weight: 900; font-size: 1.15rem;
  color: #fff;
}
.pc-card--pro .pc-card__head { background: linear-gradient(120deg, var(--c-accent), var(--c-accent-deep)); }
.pc-card--con .pc-card__head { background: linear-gradient(120deg, #e0954a, #cf7e30); }
.pc-card__badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; font-weight: 900; }
.pc-card--pro .pc-card__badge { color: var(--c-accent-deep); }
.pc-card--con .pc-card__badge { color: #cf7e30; }
.pc-card ul { list-style: none; display: grid; gap: 10px; padding: 22px 26px; }
.pc-card li { position: relative; padding-left: 28px; line-height: 1.7; }
.pc-card li::before { position: absolute; left: 0; top: 0; font-weight: 900; }
.pc-card--pro li::before { content: "✓"; color: var(--c-accent); }
.pc-card--con li::before { content: "!"; color: #cf7e30; }

/* --- ブログ（記事一覧＋サイドバーの2カラム） --- */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; max-width: 1140px; margin: 0 auto; align-items: start; }
.blog-side { display: grid; gap: 26px; }
.side-widget { background: var(--c-white); border-radius: var(--radius-m); padding: 24px 26px; box-shadow: 0 4px 16px rgba(29,60,110,.08); }
.side-widget__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--c-navy); font-size: 1.05rem; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid var(--c-cream-deep); }
.side-widget__title::before { content: ""; width: 5px; height: 18px; border-radius: 999px; background: var(--c-accent); }
.recent-list { display: grid; gap: 14px; }
.recent-list a { display: block; }
.recent-list__date { display: block; font-size: 0.76rem; color: #7a8fa8; letter-spacing: 0.04em; }
.recent-list__ttl { display: block; font-size: 0.9rem; color: var(--c-navy); line-height: 1.55; margin-top: 2px; }
.recent-list a:hover .recent-list__ttl { color: var(--c-accent-deep); }
.cat-list li { border-bottom: 1px dotted var(--c-sand); }
.cat-list li:last-child { border-bottom: none; }
.cat-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; color: var(--c-navy); font-size: 0.92rem; }
.cat-list a:hover { color: var(--c-accent-deep); }
.cat-list__count { color: #7a8fa8; font-size: 0.82rem; }
@media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; } }

.blog-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(29,60,110,.08);
  transition: transform .25s, box-shadow .25s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(29,60,110,.16); }
.blog-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--c-cream); overflow: hidden; }
.blog-card__thumb img, .blog-card__thumb .img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.blog-card__meta { display: flex; align-items: center; gap: 12px; }
.blog-card__date { font-size: 0.82rem; color: #7a8fa8; letter-spacing: 0.04em; }
.blog-card__title {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--c-navy); line-height: 1.6;
}
.blog-card:hover .blog-card__title { color: var(--c-accent-deep); }
.blog-card__excerpt { font-size: 0.88rem; color: #5d6b80; line-height: 1.8; }
@media (max-width: 560px) {
  .blog-list { grid-template-columns: 1fr; }
}

/* --- 誘導リンクカード（もっと知る等） --- */
.nav-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nav-card {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(135deg, var(--c-navy-deep), var(--c-accent));
  border-radius: var(--radius-m) 0 var(--radius-m) 0;
  padding: 24px 26px;
  box-shadow: 0 8px 22px rgba(29,60,110,.28);
  border: 2px solid transparent;
  transition: transform .25s, box-shadow .25s;
}
.nav-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(29,60,110,.4); }
.nav-card__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-accent);
  transition: background .25s, color .25s;
}
.nav-card:hover .nav-card__icon { background: transparent; border: 2px solid #fff; color: #fff; }
.nav-card__body { flex: 1; min-width: 0; }
.nav-card__title { display: block; font-family: var(--font-head); font-weight: 900; font-size: 1.15rem; color: #fff; }
.nav-card__desc { display: block; font-size: 0.85rem; color: rgba(255,255,255,.82); margin-top: 4px; }
.nav-card__arrow {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-accent);
  font-weight: 900;
  transition: transform .25s, background .25s, color .25s;
}
.nav-card:hover .nav-card__arrow { background: transparent; border: 2px solid #fff; color: #fff; transform: translateX(4px); }
@media (max-width: 640px) { .nav-cards { grid-template-columns: 1fr; } }

/* もっと知る → 募集要項 への誘導リンク */
.more-jump { text-align: center; margin-top: 30px; }
.more-jump a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--c-accent-deep); text-decoration: none;
  padding: 12px 26px; border-radius: 999px;
  background: var(--c-white);
  box-shadow: 0 4px 14px rgba(29,60,110,.12);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.more-jump a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,60,110,.2); background: var(--c-accent); color: #fff; }
.more-jump__arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-cream); color: var(--c-accent); transition: background .25s, color .25s; animation: moreJumpBob 1.8s ease-in-out infinite; }
.more-jump a:hover .more-jump__arrow { background: #fff; color: var(--c-accent-deep); }
@keyframes moreJumpBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .more-jump__arrow { animation: none; } }

/* --- 画像＋文章の横並び（交互） --- */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.media-row + .media-row { margin-top: 40px; }
.media-row--reverse .media-row__visual { order: 2; }
.media-row__body h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--c-navy); margin-bottom: 14px; }
.media-row__body h3 .media-row__no { color: var(--c-accent); margin-right: 10px; }
.media-row__body p { line-height: 2; }
.media-row__body p + p { margin-top: 1em; }

/* --- まとめ施工の図式（屋根＋外壁＋雨樋→一社完結） --- */
.combo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.combo__item { display: grid; justify-items: center; gap: 8px; background: var(--c-white); border-radius: var(--radius-m); padding: 22px 26px; box-shadow: 0 4px 14px rgba(29,60,110,.08); min-width: 120px; }
.combo__item svg { color: var(--c-accent); }
.combo__item span { font-family: var(--font-head); font-weight: 700; color: var(--c-navy); }
.combo__op { font-size: 1.6rem; font-weight: 900; color: var(--c-blue-soft); }
.combo__result { background: var(--c-navy); color: #fff; }
.combo__result span { color: #fff; }
.combo__result svg { color: var(--c-blue-pale); }

@media (max-width: 760px) {
  .pros-cons { grid-template-columns: 1fr; }
  .media-row { grid-template-columns: 1fr; gap: 24px; }
  .media-row--reverse .media-row__visual { order: 0; }
  .combo { flex-direction: column; }
  .combo__op { transform: rotate(90deg); }
}

/* --- お悩み別の導線（屋根・外壁・雨樋） --- */
.trouble { background: var(--c-white); }
.trouble__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.trouble-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-sand);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(29,60,110,.08);
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.trouble-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(29,60,110,.18); border-color: var(--c-blue-soft); }
.trouble-card__head {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--c-navy), var(--c-accent));
  color: #fff;
}
.trouble-card__icon {
  flex: none;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-accent-deep);
  box-shadow: 0 4px 12px rgba(8,22,62,.25);
}
.trouble-card__icon svg { width: 30px; height: 30px; stroke-width: 2.1; }
.trouble-card:hover .trouble-card__icon { color: var(--c-accent); }
.trouble-card__head-text { display: grid; gap: 3px; }
.trouble-card__en { font-size: .66rem; letter-spacing: .14em; opacity: .82; }
.trouble-card__name { font-family: var(--font-head); font-weight: 900; font-size: 1.24rem; line-height: 1.2; }
.trouble-card__list { list-style: none; margin: 0; padding: 22px 24px 6px; display: grid; gap: 13px; flex: 1; }
.trouble-card__list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; font-size: .95rem; color: var(--c-text); }
.trouble-card__list li svg { flex: none; margin-top: 2px; color: var(--c-accent); }
.trouble-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 18px 20px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--c-cream);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  color: var(--c-accent-deep);
  transition: background .25s, color .25s;
}
.trouble-card:hover .trouble-card__foot { background: var(--c-accent); color: #fff; }
.trouble-card__arrow {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-white);
  color: var(--c-accent);
  transition: transform .25s, background .25s, color .25s;
}
.trouble-card:hover .trouble-card__arrow { transform: translateX(3px); background: #fff; color: var(--c-accent-deep); }
.trouble__note {
  max-width: 880px;
  margin: 36px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 12px 22px; flex-wrap: wrap;
  text-align: center;
  background: var(--c-cream);
  border-radius: var(--radius-m);
  padding: 24px 30px;
}
.trouble__note p { color: var(--c-text); font-weight: 500; line-height: 1.7; }
.trouble__note strong { color: var(--c-navy); font-weight: 700; }
@media (max-width: 880px) { .trouble__grid { grid-template-columns: 1fr; max-width: 480px; } }

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

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

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


/* ============================================================
   §0  トークン ─ ここだけ案件ごとに調整
   ============================================================ */
:root{
  /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） --- */
  --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  ページネーション（.pagination_* / [class*="_pagenation"]）
   ============================================================ */
.pagination_num, .pagination_prev, .pagination_next,
[class*="_pagenation"] a, [class*="_pagenation"] span{
  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, [class*="_pagenation"] .current, [class*="_pagenation"] .active{
  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; }
.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"]{
  display:block !important; 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_img"]{ width:100%; display:block; border-radius:0; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; gap:10px; align-items:center; }
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; }
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_post_excerpt"]{ color:var(--dyn-muted) !important; }
[class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* カテゴリ/ステータスは1チップに */
[class*="_post_category"], [class*="_post_status"] > span:last-child{ border:1px solid var(--dyn-accent); border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent-2) !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; }


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !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; }


/* ============================================================
   §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, .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; }
/* プライバシー同意 */
.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; }


/* ============================================================
   §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; }

/* ============================================================
   C: 案件追補（濵田板金工業）— skinトークン調整 / R-18 / R-20・R-21保険
   ============================================================ */
:root{
  /* skin(§0)が参照するフォント・角丸トークンをサイトのトンマナへ合わせる */
  --font-display: var(--font-head);
  --font-numeric: "Noto Serif JP", serif;
  --dyn-radius: 12px;
  --dyn-card-min: 280px;
  --dyn-gap: 28px;
  /* R-18: 固定ヘッダー高さ（施工実績/ブログ/問い合わせ/送信完了/404 の潜り込み防止）。
     値・ブレークポイントは受領 --header-h と一致させる */
  --fixed-header-h: 96px;
}
@media (max-width:1520px){ :root{ --fixed-header-h: 72px; } }
@media (max-width:640px){ :root{ --fixed-header-h: 58px; } }

/* R-21: CueZilla既定パーツ見出しに付くテーマ装飾（角丸/中央寄せ）を地ならし。
   skin が各パーツに配色・字体を当てる前提のリセット。 */
[class*="parts"] h2, [class*="parts"] h3{ border-radius:0; text-align:left; }

/* ヒーロー本文を「ヘッダー領域を除いた天地センター」に配置:
   .hero は align-items:center だが margin-top:-header-h で不透明な固定ヘッダー裏に潜り込むため、
   素の中央寄せだとヘッダー分だけ上に寄り、先頭タグ(.hero__tag)も潜る。
   padding-top を「ヘッダー高×2＋下padding」にして中央寄せ位置をヘッダー下〜ヒーロー下の帯の中心へ補正。
   ※iframe実測(390〜1568px): 帯中心との差 -3〜-15px、先頭タグも全幅でクリア。上書きは天地paddingのみ（左右は受領のまま）。 */
.hero__inner{ padding-top: calc(var(--header-h) * 2 + 40px); padding-bottom: 40px; }

/* === 白画面防止 × 入場演出の両立（js-on 方式）===
   受領は .js-fade / .js-bounce .bounce-char を opacity:0 で初期非表示にし、JS(IntersectionObserver)で is-inview を
   付けてフェード＋スライド表示する設計（＝元デザイン/参照と同じ「文字の出方」）。この演出をそのまま活かす。
   ただし「万一 commons JS が動かない時に opacity:0 のまま＝不可視/白画面」を防ぐため、
   JSが起動した時だけ <html> に付く .js-on を条件に「初期非表示（＝演出ON）」を有効化する。
   - JS有り(html.js-on): 受領どおりフェード＋スライド演出ON（参照と一致）。
   - JS無し(.js-on 無し): 下記2行で強制可視＝opacity:0で隠れる事故が起きない（白画面保険を維持）。
   ※ js-on は HEAD内インラインスクリプトで本文描画前に付与（初期非表示→可視のチラつき防止）。 */
html:not(.js-on) .js-fade{ opacity:1 !important; transform:none !important; }
html:not(.js-on) .js-bounce .bounce-char{ opacity:1 !important; transform:none !important; }
/* ヒーローのキャッチコピー入場演出はスプラッシュ退場イベント基準でJS側(01_サイト情報.md boot)が再生する（時間固定の遅延は廃止）。 */

/* スマホ横スクロール解消: 施工実績カルーセル外枠が overflow:visible でトラックを切り取れず、
   カードが右へはみ出して横スクロールが発生(scrollW 385>clientW 371)。外枠をクリップ。 */
.works__slider{ overflow-x: hidden; }

/* お知らせ(design-parts-52): 受領 .news 設計を再現。
   ① .content を白pill(楕円)化（白背景・角丸999px・影）＝受領 .news__inner。
   ② 楕円後ろの帯を水色(c-blue-pale #d4e8f5)＝受領 .news。skin §8の上に確実に乗せる。
   ③ 楕円の周りに余白(18px 24px)＝受領 .news padding。
   ④ 「お知らせ」ラベル(banner-area)を紺pill化（CueZilla既定は黄#ffcc44・角丸無し→navy・999px）。
      skin §8 のnavy化がCueZilla高詳細度に負けるため !important で確実に上書き。受領 .news__label 相当。
   ⑤ CueZilla既定の固定 height:60px が帯と白pillを圧縮していた（pill 24px）。height:auto で解除し、
      内容に合わせて伸ばす→白pillが自然高さ約49px（従来比≒2倍）・帯85px・ラベルも非圧縮に。 */
.design-parts-52{ background: var(--c-blue-pale) !important; height:auto !important; }
.design-parts-52 .container{ padding: 18px 24px !important; height:auto !important; }
.design-parts-52 .content{ background:#fff; border-radius:999px; padding:10px 28px; box-shadow:0 2px 10px rgba(29,60,110,.07); }
.design-parts-52 .banner-area{ background: var(--c-navy) !important; color:#fff !important; border-radius:999px !important; padding:4px 18px !important; font-size:0.82rem !important; line-height:1.6 !important; }
@media (max-width:640px){ .design-parts-52 .content{ border-radius: var(--radius-m); padding:16px 20px; } }
/* スマホ(≤520px)で帯「お知らせ」・日付・タイトルを左揃えに。
   CueZilla既定パーツCSS(高詳細度)が ≤520px で h4.banner-area を width:100%+justify-content:center＝帯が中央、
   かつ .content を flex-direction:column にし本文行も左に大きくインデント(ul pl + li15 + textarea20 ≈ 67px)＝中央寄りに見える。
   → 帯ラベルを左寄せ、本文行のインデントを詰めて帯ラベル左端に揃える。CueZilla詳細度に勝つため要所 !important。
   ※iframe390px実測: 修正後 帯テキスト62 / 日付63 / タイトル63 で左端一致。 */
@media (max-width:520px){
  .design-parts-52 .content{ align-items:flex-start !important; }
  .design-parts-52 h4.banner-area{ justify-content:flex-start !important; }
  .design-parts-52 .content ul{ padding-left:4px !important; }
  .design-parts-52 .parts-52-textarea{ align-items:flex-start !important; padding-left:0 !important; padding-right:0 !important; text-align:left !important; }
  .design-parts-52 .parts-52-textarea span{ text-align:left !important; }
}

/* お悩みカード(独自調整・受領とは別): 旧 .trouble-card(1639行)の padding 20px22px が残り、
   紺ヘッダーが左右22/上20でインセット＆角が四角＝違和感。左右を上値(20px)に揃え、紺背景を角丸に。 */
.trouble-card{ padding:20px; }
.trouble-card__head{ border-radius:14px; }

/* 下層ヘッダー(.page-hero): margin-top:-header-h と padding-top(header-h+80)で本文開始が常に上端80px固定。
   不透明ヘッダー(実108px)にアイコンが埋もれるため、padding-top を header-h*2+50 にして全体を下げ、
   ヘッダー下に gap38〜44px 確保（メインヒーロー同方針）。padding-top のみ上書き。 */
.page-hero{ padding-top: calc(var(--header-h) * 2 + 50px); }

/* プライバシーポリシー(CueZillaパーツ privacypolicy-parts)上部テキストの固定ヘッダー潜り込み解消。
   パーツ既定 padding-top:80px に対し実ヘッダーは108px → 先頭の「PrivacyPolicy」が28px裏に隠れていた。
   page-hero と違い負マージン無しで top:0 から始まるので、ヘッダー高(--header-h)＋48pxのクリアランスを与える。
   ※実機(デスクトップ)で先頭テキスト top80→144px、ヘッダー(108)を36px余白でクリアを確認。 */
[class*="privacypolicy-parts"]{ padding-top: calc(var(--header-h) + 48px) !important; }
/* プライバシー本文の先頭ブロックに class="about" が付いており、トップページ用 .about の青グラデーション背景
   (linear-gradient(#d4e8f5,#f0f5f9)) が誤って乗って先頭段落が「水色マーカー」状態になっていた(クラス名衝突)。
   プライバシーパーツ内の .about だけ背景を透明化（トップページの .about セクションには影響しない）。 */
[class*="privacypolicy-parts"] .about{ background:transparent !important; }

/* 下層パンくず左端をコンテンツ領域(標準コンテナ .l-content=1080px)左端に一致:
   CueZilla が nav.breadcrumb を flex 化し ol(margin:auto)が中央寄せになるため、nav を block に戻し
   ol を 1080px 幅で左揃え。読込順非依存に nav.breadcrumb で詳細度を上げる。
   ※iframe/実機実測: ol左端=.l-content テキスト左端=350px で一致。 */
nav.breadcrumb{ display:block; }
nav.breadcrumb ol{ max-width:1080px; margin-inline:auto; padding-inline:24px; box-sizing:border-box; justify-content:flex-start; }

/* 会社概要等で .l-content--narrow が l-content 無しの単独使用となり中央寄せ(margin:auto)が
   効かず左端に張り付くページがある。narrow 修飾子だけで自己完結して中央寄せ＋左右余白を持たせる。
   ※実機実測: info-table 親が left24→466、テーブル left490 で本文と整列。 */
.l-content--narrow{ margin-inline:auto; padding-inline:24px; }

/* 施工実績(CueZillaパーツ228): 導入文セクションと一覧の間が広すぎ(導入pad96+パーツpad100≈200px)。
   導入セクション下と一覧上の余白を縮小。:has 未対応環境でもパーツ側だけは効く二段構え。 */
.section:has(+ .parts228_section){ padding-bottom: 28px; }
.parts228_section{ padding-top: 32px !important; }

/* 施工実績カード(パーツ228)を受領 .post-card 設計に極力合わせる:
   3列グリッド(gap24)/白カード(角丸radius-m・影・hover浮き)/画像4:3/カテゴリtag(teal #3a7db0)を画像左上へ
   オーバーレイ/本文padding・日付(.76rem #7a8fa8)・タイトル(head 700 1.02rem navy)を受領に合わせる。
   CueZilla既定に勝つよう要所 !important。受領: .post-grid/.post-card/.post-card__thumb/__cat/__body/__date/__title。 */
.parts228_post_list{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px !important; }
.parts228_post_wrap{ position:relative; background:#fff; border:none !important; border-radius:var(--radius-m); overflow:hidden; box-shadow:0 6px 18px rgba(29,60,110,.09) !important; transition:transform .25s, box-shadow .25s; }
.parts228_post_wrap:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(29,60,110,.16) !important; }
.parts228_post_img{ aspect-ratio:4/3 !important; height:auto !important; }
.parts228_post_img a{ display:block !important; width:100% !important; height:100% !important; }
/* global の max-height:240px に阻まれ 4:3箱の下に空白が出るため max-height:none で箱いっぱいに（parts225と同方針） */
.parts228_post_img img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover; display:block; }
.parts228_post_wrap .parts-blog-ex-tag_wrap{ position:absolute; top:12px; left:12px; margin:0; z-index:2; display:flex; flex-wrap:wrap; gap:6px; }
.parts228_post_wrap .parts-blog-ex_tag{ background:#3a7db0 !important; color:#fff !important; font-size:.78rem; font-weight:700; padding:3px 16px; border-radius:999px; }
/* 天地の余白を圧縮（status の外側padと title-excerpt の内側padで二重になり広かった）＋日付・タイトル左揃え */
.parts228_post_status{ padding:12px 16px 14px !important; margin-top:0 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:2px !important; text-align:left !important; }
.parts228_post_title-excerpt{ padding:2px 0 0 !important; text-align:left !important; }
.parts228_post_date{ font-size:.76rem !important; color:#7a8fa8 !important; text-align:left !important; font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif !important; }
.parts228_post_title{ font-family:var(--font-head) !important; font-weight:700; font-size:1.02rem !important; color:var(--c-navy) !important; line-height:1.6; margin-top:2px; text-align:left !important; }
@media (max-width:900px){ .parts228_post_list{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:560px){ .parts228_post_list{ grid-template-columns:1fr !important; } }

/* ヘッダーお問い合わせボタン(.fixed-cta)のhover青化を抑止:
   Bootstrap の全リンク規則 a:hover{color:#0a58ca} が白文字ボタンに当たり hover で文字が青化。
   詳細度(0,2,0)で勝つ .fixed-cta:hover で白を固定。 */
.fixed-cta:hover{ color:#fff; }

/* ソリッドCTAボタン(.btn=濃色地・白文字)のhover青化を抑止（同じく a:hover{color:#0a58ca} 由来）。
   トップ各セクションの 無料で相談する/会社概要を見る/施工実績をもっと見る/メールで相談する/採用情報を見る 等が対象。
   ただし .cta-band 内の .btn は「白地・濃紺文字」なので白にすると消える→濃紺(accent-deep)を維持して除外。 */
.btn:hover{ color:#fff; }
.cta-band .btn:hover{ color: var(--c-accent-deep); }

/* item③ ブログ/施工実績ページ下部CTA: 03_footer.html に常設した .prefooter-cta を既定で隠し、
   ページがブログ一覧(パーツ225)または施工実績一覧(パーツ228)を含む時だけ表示。
   ブログ/施工実績はシステムページでフリーHTMLを差し込めないため、フッター常設＋:has出し分けで対応。
   :has 非対応/除去時は安全側（非表示のまま）に倒れる。 */
.prefooter-cta{ display:none; }
body:has(.parts225_section) .prefooter-cta,
body:has(.parts228_section) .prefooter-cta{ display:block; }

/* ハンバーガーメニュー(≤1520px ドロワー):
   ① 子メニュー左ズレ: デスクトップのドロップダウン中央寄せ transform:translateX(-50%) が詳細度で勝ち、
      ドロワー内hoverでサブメニューが左へずれる→@media内で transform:none に打ち消す。
   ② 「ヘッダーの白背景が下に伸びてメニューになる」見た目: ドロワーをヘッダーと同じ左右インセット
      (40px ／ ≤640pxは12px)・白(c-white)・角丸下(radius-l)・ヘッダー同等の影に。開いた時はヘッダー
      下端の角丸と影を消して連結（一体の白バーが下へ伸びた見え方）。高さは内容なりで、超える場合は
      max-height+スクロール。受領 .header（left/right 40・@media640(line1160)で12・radius-l・影）に合わせる。
      ※当初859と誤認していたが受領は640切替（641〜859ではドロワーだけ広がるズレが出ていた）。 */
@media (max-width:1520px){
  .gnav__has-sub:hover .gnav__sub,
  .gnav__has-sub:focus-within .gnav__sub{ transform:none; }
  .gnav{ left:40px; right:40px; bottom:auto; background:var(--c-white); border-radius:0 0 var(--radius-l) var(--radius-l); box-shadow:0 4px 28px rgba(29,60,110,.13); max-height:calc(100vh - var(--header-h) - 40px); overflow-y:auto; }
  .header:has(.menu-btn.is-open){ border-radius:0; box-shadow:none; }
  /* お問い合わせボタン・電話番号を展開ナビ(.gnav)より前面へ。.gnav は開く時 transform で重ね順コンテキストを
     作り、ヘッダー右側の要素がドロワーに隠れるため、relative+z-index で上に重ねる（同レイヤーに統一）。 */
  .fixed-cta, .header__contact{ position:relative; z-index:10; }
}
@media (max-width:640px){ .gnav{ left:12px; right:12px; } }

/* CTA帯の横幅を全ページで統一。.l-content 内の cta-band は内容幅 1032px(=l-content 1080 − 左右padding24×2)。
   会社概要/お問い合わせは .l-content 無しで .section 直下＝全幅になるため、同じ 1032px で中央寄せに揃える。
   これで全ページ(工事・ブログ・施工実績・会社概要・問い合わせ)のCTA帯が同一幅になる。 */
.cta-band{ max-width:1032px; margin-inline:auto; }

/* ブログ/施工実績 詳細ページのサイドバー見出し「最近の投稿」: 背景ネイビー(#1d3c6e)に対し
   既定の文字色が濃色(rgb42,58,82)で視認不可。白文字へ。 */
.recent_post_title{ color:#fff !important; }

/* ブログ一覧カードのカテゴリチップ(.parts225_post_category)が小さく読みづらい。font/paddingを少し拡大。
   ※テスト投稿はカテゴリ未設定で空表示。実カテゴリ付き投稿での最終確認を推奨。 */
.parts225_post_category{ font-size:0.82rem !important; padding:3px 12px !important; line-height:1.6 !important; }

/* タブレット幅で、トップページのコンテンツ左右余白を 48px 確保（既定は .section の左右24px）。
   ※当初 body:has(.hero) .section で限定していたが、トップはGSAP演出でDOM/クラスが頻繁に変化し、
     body:has(...) が都度再評価されてタブレット/モバイルで描画が重くなったため、:has を撤去し
     トップ専用セクションクラス（下層ページには存在しない）を直接指定する方式へ変更。
   モバイル(≤640)は据え置き、デスクトップ(>1240)は max-width 中央寄せのまま。 */
@media (min-width:641px) and (max-width:1240px){
  .about, .trouble, .feature, .voice, .works, .area, .contact, .episode, .reason, .service, .network{ padding-inline:48px; }
}

/* スマホ(≤640px): サービスエリアの大エリア(dt.tag)と小エリア(dd)を縦並びに。
   受領 .area__row は display:flex(dt min-width130 + dd 横並び)で、スマホ幅だと dd が窮屈。
   flex-direction:column にして dt(大エリア)→dd(小エリア)を縦に積み、左端を揃える。追補が後勝ちで!important不要。
   ※iframe390px実測: 修正後 dt top9507/left18・dd top9538/left18(縦積み・左端一致)、dd全幅316に。 */
@media (max-width:640px){
  .area__row{ flex-direction:column; gap:4px; }
  .area__row dt{ min-width:0; text-align:left; }
}

/* 工事3ページ(屋根/外壁/雨樋)「まとめて施工」.combo のスマホ表示を「□＋□(＋□)／＝／■」の式形に。
   受領は ≤760px で .combo を flex-direction:column＝全部縦一列(＋/＝もrotate)にしていた。
   → 入力□と＋は1行に並べ、＝(最後のop)と■(result)だけを flex-basis:100% で各行へ落とす。
   .combo__op:last-of-type が常に＝(result直前の最後のspan op)＝2入力(外壁)でも3入力でも成立。
   追補が受領@760の後に来るため同詳細度で後勝ち(!important不要)。
   入力□は同一 basis(25%)＋flex-grow:1 で、3個ページは伸びて行幅いっぱい(箱を最大化)。
   2入力ページ(=＋が1つ＝op2個＝3番目のopが無い)だけ flex-grow:0 にして伸ばさず、箱は3個時と同幅のまま
   justify-content:center で左右に余白。:has で個数判定（他案件同様 :has 使用）。
   ※iframe390px実測(コンテンツ統一18px込み): 屋根=3個が18→357充填(各85px)、外壁=2個が85pxのまま中央寄せ左右余白63px、箱幅は両者85pxで一致。＝全幅(2行目)・■全幅(3行目)。 */
@media (max-width:760px){
  .combo{ flex-direction:row; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
  .combo__op{ transform:none; }
  /* ＝(最後のop)は自分の行へ落とし、かつ90度回転（スマホ式形時のみ。＋は回転させない） */
  .combo__op:last-of-type{ flex-basis:100%; text-align:center; transform:rotate(90deg); }
  .combo__result{ flex-basis:100%; }
  /* 入力□は flex-basis:0 で「コンテンツ幅に依存せず必ず1行に3個収まり、伸びて充填」(狭い幅で折り返さない) */
  .combo__item:not(.combo__result){ flex:1 1 0; min-width:0; padding:14px 8px; }
  /* 2入力ページは伸ばさず固定幅(30%)・中央寄せ＝左右に余白 */
  .combo:not(:has(.combo__op:nth-of-type(3))) .combo__item:not(.combo__result){ flex:0 1 30%; }
}

/* スマホ(≤640px)のコンテンツ幅を全ページで統一（二重余白の解消）。
   下層は .section(横18px) の内側に .l-content / .l-content--narrow(padding:0 24px) が入り、
   左右 18+24=42px の二重余白でコンテンツが狭まっていた。トップは __inner(padding0)で18pxのみ＝不一致。
   → スマホでは l-content系の内側paddingを0にし、セクションの18pxに一本化（＝トップと一致）。
   パンくずも nav(24)+ol(24)=48px と二重なので、nav18+ol0 で本文左端(18px)に揃える。
   ※タブレット(641-1240)はトップも補追で48px・下層も24+24=48pxで一致、PC(>1240)はl-content中央寄せで
     section余白が左右マージンに吸収され二重にならない＝スマホのみ修正で全幅域が整合(iframe実測で確認)。
   ※iframe390px実測: work/information/recruit いずれも本文左端 42→18px、パンくず48→18px。 */
@media (max-width:640px){
  .l-content, .l-content--narrow{ padding-inline:0 !important; }
  nav.breadcrumb{ padding-inline:18px !important; }
  nav.breadcrumb ol{ padding-inline:0 !important; }
}

/* ブログ一覧(parts225)カードを施工実績(parts228)と同じ体裁に統一：白カード/角丸/影/ホバー/画像4:3/ゴシック/左揃え/余白。
   - フォント: 既定は f_yugothic→Noto Serif(明朝!)・f_meiryo→メイリオ でバラバラ → Noto Sans JP に統一。
   - 日付＋カテゴリ: status の CueZilla既定 justify-content:space-between を flex-start に直して左に寄せ、カテゴリはチップ化。
   - 画像: global の max-height:240px に阻まれ 4:3箱の下に空白が出ていた → a を高さ100%・img を max-height:none で箱いっぱいに。
   - カテゴリ/タグは「定められた位置」(blog=status内・施工実績=画像左上オーバーレイ)を維持。
   ※iframe/実機(デスクトップ)で確認済。グリッド段組はサイドバー導入時に主カラム幅へ再調整する想定。 */
.parts225_post_date, .parts225_post_category, .parts225_post_title, .parts225_post_excerpt, .parts225_post_excerpt p{ font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif !important; }
.parts225_post_list{ grid-template-columns:repeat(3,1fr) !important; gap:24px !important; align-items:start !important; }
.parts225_post_wrap{ background:#fff !important; border-radius:var(--radius-m) !important; overflow:hidden !important; box-shadow:0 6px 18px rgba(29,60,110,.09) !important; transition:transform .25s, box-shadow .25s !important; }
.parts225_post_wrap:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(29,60,110,.16) !important; }
.parts225_post_img{ aspect-ratio:4/3 !important; height:auto !important; }
.parts225_post_img a{ display:block !important; width:100% !important; height:100% !important; }
.parts225_post_img img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover !important; display:block !important; }
.parts225_post_status{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; margin-top:0 !important; padding:14px 18px 0 !important; text-align:left !important; }
.parts225_post_date{ font-size:.76rem !important; color:#7a8fa8 !important; }
.parts225_post_category{ background:#3a7db0 !important; color:#fff !important; font-size:.72rem !important; font-weight:700 !important; padding:2px 12px !important; border-radius:999px !important; }
.parts225_post_title-excerpt{ padding:6px 18px 18px !important; text-align:left !important; }
.parts225_post_title{ font-family:var(--font-head) !important; font-weight:700 !important; font-size:1.02rem !important; color:var(--c-navy) !important; line-height:1.6 !important; text-align:left !important; margin-top:2px !important; }
.parts225_post_excerpt, .parts225_post_excerpt p{ color:#5d6b80 !important; font-size:.9rem !important; line-height:1.7 !important; text-align:left !important; }
@media(max-width:900px){ .parts225_post_list{ grid-template-columns:1fr 1fr !important; } }
@media(max-width:560px){ .parts225_post_list{ grid-template-columns:1fr !important; } }

/* ブログ(サイドバー付き parts222)のカード統一＋サイドバー整形。
   ※ブログ一覧はサイドバー導入で parts225→parts222 に切替（parts225ブロックは公開後に不要なら整理可）。
   - カード: 施工実績228と同じ白カード/画像4:3(global max-height:240を解除)/ゴシック/左揃え/日付＋カテゴリチップ。
     既定フォントは日付=明朝・カテゴリ=メイリオで混在 → Noto Sans JP に統一。
   - レイアウト: .parts222_wrap(flex)=main+aside。gap40・上揃え、≤900pxで縦積み(サイドバーを下へ)。
   - サイドバー: 最近の投稿(日付小→タイトル)・カテゴリ(名前＋件数チップ)。見出しゴシック・行に区切り線。
   ※プレビュー(?op=newc)実機で確認済。 */
/* ブログ一覧上部の「ブログ」見出し(section直下のh2)を非表示。サイドバー見出し/カードタイトルはh3なので無影響。 */
.parts222_section > h2{ display:none !important; }
.parts222_post_date,.parts222_post_category,.parts222_post_title,.parts222_post_title-excerpt h3{ font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif !important; }
.parts222_post_list{ grid-template-columns:1fr 1fr !important; gap:24px !important; align-items:start !important; }
.parts222_post_wrap{ background:#fff !important; border:none !important; border-radius:var(--radius-m) !important; overflow:hidden !important; box-shadow:0 6px 18px rgba(29,60,110,.09) !important; transition:transform .25s, box-shadow .25s !important; }
.parts222_post_wrap:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(29,60,110,.16) !important; }
.parts222_post_img{ aspect-ratio:4/3 !important; height:auto !important; }
.parts222_post_img a{ display:block !important; width:100% !important; height:100% !important; }
.parts222_post_img img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover !important; display:block !important; }
.parts222_post_status{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; margin-top:0 !important; padding:14px 18px 0 !important; }
.parts222_post_date{ font-size:.76rem !important; color:#7a8fa8 !important; text-align:left !important; }
/* カード内カテゴリ: 色地ピル＋白文字・枠(罫線)なし */
.parts222_post_category{ background:#3a7db0 !important; border:none !important; color:#fff !important; font-size:.72rem !important; font-weight:700 !important; padding:3px 12px !important; border-radius:999px !important; }
.parts222_post_title-excerpt{ padding:6px 18px 18px !important; text-align:left !important; }
.parts222_post_title-excerpt h3,.parts222_post_title{ font-family:var(--font-head) !important; font-weight:700 !important; font-size:1.02rem !important; color:var(--c-navy) !important; line-height:1.6 !important; text-align:left !important; margin-top:2px !important; }
@media(max-width:560px){ .parts222_post_list{ grid-template-columns:1fr !important; } }
.parts222_wrap{ gap:40px !important; align-items:flex-start !important; }
@media(max-width:900px){ .parts222_wrap{ flex-direction:column !important; } .parts222_main,.parts222_sidebar{ width:100% !important; max-width:100% !important; } }
.parts222_sidebar h3{ font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif !important; }
.parts222_sidebar_wrap{ margin-bottom:28px !important; }
.parts222_sidebar ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
/* 行間を詰める（CueZilla既定の li margin-top:20px/padding-bottom 等を解除） */
.parts222_sidebar li{ margin:0 !important; border:none !important; border-bottom:1px solid #e2edf5 !important; }
.parts222_sidebar_wrap:not(.category_post_count) li a{ display:flex !important; flex-direction:column !important; gap:2px !important; padding:9px 4px !important; color:var(--c-navy) !important; font-family:"Noto Sans JP",sans-serif !important; font-size:.9rem !important; text-decoration:none !important; }
.parts222_sidebar_wrap:not(.category_post_count) li a > :first-child{ font-size:.74rem !important; color:#7a8fa8 !important; }
.category_post_count li a{ display:flex !important; justify-content:space-between !important; align-items:center !important; gap:10px !important; padding:9px 4px !important; color:var(--c-navy) !important; font-family:"Noto Sans JP",sans-serif !important; font-size:.9rem !important; text-decoration:none !important; }
/* カテゴリ名・件数の囲み(枠/背景)を全て除去＝プレーン表示（②⑥）。件数はグレー数字のみ。 */
.category_post_count li a > *{ border:none !important; background:none !important; padding:0 !important; }
.category_post_count li a > :last-child{ color:#7a8fa8 !important; font-size:.8rem !important; }
.parts222_sidebar li a:hover{ color:#3a7db0 !important; }

/* スマホ フッター: footer__nav は2列グリッド(ul×3)。3つ目のul(採用情報〜プライバシーポリシー)は左列に入り
   「プライバシーポリシー」が窮屈で2行に折り返す。右隣は空いているので、この最後のulを全幅(grid-column:1/-1)に
   広げて1行に収める。※iframe390px実測: リンク高 56→21px(折返し解消)、ul幅327。 */
@media (max-width:640px){ .footer__nav > ul:last-child{ grid-column:1 / -1; } }

/* お問い合わせフォームのボタン領域 .contact_submit（入力「確認画面へ」/確認「戻る・送信」/完了「TOPへもどる」共通）。
   - 確認ページ: 戻る・送信が同色(紺塗り)同形で並び「合体」して見えた → 送信=紺塗り(主)/戻る=白地・紺枠(二次)、等幅・gap分離。
   - 完了ページ: 単独ボタン「TOPへもどる」が flex-start で左寄せ＝ズレて見えた → 中央寄せに。
   .contact_submit を一律 flex+中央寄せ+gap16+wrap にして全ページで整える(狭幅では縦積み)。入力ボタンは input[type=submit]、
   完了ボタンは button.btn-main。戻る(=.mx-2)だけ二次ボタン化。 */
.contact_submit{ display:flex !important; justify-content:center !important; gap:16px !important; flex-wrap:wrap !important; align-items:center !important; }
.contact_submit input[type=submit]{ flex:0 1 200px !important; min-width:150px !important; max-width:220px !important; width:auto !important; }
.contact_submit input.mx-2{ margin:0 !important; background:#fff !important; color:var(--c-navy) !important; border:2px solid var(--c-navy) !important; }

/* ===== 確実な上書き層 =====
   配信時は add.css が CueZilla のパーツCSSより前に読まれ、同詳細度(0,1,0)だと後勝ちでパーツ側(!important)に負ける。
   そのため card/カテゴリ等の重要指定は祖先クラスを足して詳細度(0,3,0)に上げ、読込順に関係なく確実に勝たせる。
   （注入テストでは私のstyleが最後で勝っていたため差が出ず、配信で初めて顕在化したcase。） */
/* ③ ブログ カード内カテゴリ: 色地ピル＋白文字（既定の白地・青字・枠に勝つ） */
.parts222_post_list .parts222_post_wrap .parts222_post_category{ background:#3a7db0 !important; border:none !important; color:#fff !important; border-radius:999px !important; }
/* ④ ブログ カード: 白・罫線なし */
.parts222_post_list .parts222_post_wrap{ background:#fff !important; border:none !important; }
/* ⑤ ブログ 日付・タイトルを左揃え */
.parts222_post_list .parts222_post_wrap .parts222_post_status{ justify-content:flex-start !important; text-align:left !important; }
.parts222_post_list .parts222_post_wrap .parts222_post_date,
.parts222_post_list .parts222_post_wrap .parts222_post_title,
.parts222_post_list .parts222_post_wrap .parts222_post_title-excerpt h3{ text-align:left !important; }
/* 施工実績① 背景白 ② 日付・タイトル左揃え */
.parts228_post_list .parts228_post_wrap{ background:#fff !important; border:none !important; }
.parts228_post_list .parts228_post_wrap .parts228_post_status{ align-items:flex-start !important; text-align:left !important; }
.parts228_post_list .parts228_post_wrap .parts228_post_date,
.parts228_post_list .parts228_post_wrap .parts228_post_title{ text-align:left !important; }
/* ブログ サイドバー: カテゴリ名の文字色を黒に（件数はグレーのまま） */
.parts222_sidebar .category_post_count li a{ color:#000 !important; }
.parts222_sidebar .category_post_count li a > :last-child{ color:#7a8fa8 !important; }