:root{ --omi-frame-mask: url("data:image/svg+xml,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20724.19%20701.43%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M659.36%2C440.69c81.42-28.51%2C81.38-138.1%2C26.43-191%2C13.36-75.1-51.01-163.78-133.64-138.98-8.11%2C2.43-14.71%2C5.9-19.95%2C10.01%2C2.36-6.31%2C3.67-13.76%2C3.47-22.37-1.96-86.25-106.19-120.07-173.48-84.15-67.29-35.92-171.52-2.09-173.48%2C84.15-.19%2C8.53%2C1.08%2C15.92%2C3.41%2C22.2-5.25-4.15-11.88-7.65-20.06-10.1C89.42%2C85.65%2C25.04%2C174.32%2C38.41%2C249.42c-54.95%2C52.9-54.99%2C162.48%2C26.43%2C191%2C7.87%2C2.76%2C15.14%2C3.84%2C21.71%2C3.64-5.39%2C3.69-10.6%2C8.81-15.31%2C15.62-49.11%2C70.93%2C15.33%2C159.56%2C90.88%2C170.05%2C33.33%2C68.61%2C137.53%2C102.51%2C189.81%2C33.89%2C5.02-6.59%2C8.29-13.12%2C10.13-19.4%2C1.83%2C6.35%2C5.12%2C12.98%2C10.21%2C19.67%2C52.28%2C68.63%2C156.48%2C34.73%2C189.81-33.89%2C75.55-10.5%2C140-99.12%2C90.88-170.05-4.72-6.81-9.92-11.93-15.31-15.62%2C6.57.2%2C13.83-.88%2C21.71-3.64ZM590.24%2C478.85c6.31.23%2C11.5-4.56%2C11.77-10.8.26-6.04-4.28-11.16-10.23-11.72-.64-.09-1.32-.12-2.02-.12%2C8.64-13.85%2C33.52-18.01%2C51.35%2C5.25%2C47.28%2C61.66-14%2C150.81-89.37%2C154.31-26.62%2C70.6-130.34%2C101.33-174.38%2C37.31-16.61-24.15-4.97-46.52%2C10.88-50.46-.21.66-.39%2C1.32-.51%2C1.95-1.31%2C5.84%2C2.16%2C11.73%2C7.98%2C13.35%2C6.01%2C1.67%2C12.17-1.78%2C13.91-7.86%2C1.19-4.17-.08-11.78-9.33-14.6-15.21-4.63-32.51%2C6.28-38.16%2C24.01-5.55-17.89-22.96-28.93-38.24-24.27-9.25%2C2.82-10.52%2C10.43-9.33%2C14.6%2C1.73%2C6.07%2C7.9%2C9.53%2C13.91%2C7.86%2C5.83-1.62%2C9.3-7.52%2C7.98-13.35-.12-.63-.3-1.29-.51-1.95%2C15.85%2C3.94%2C27.48%2C26.32%2C10.88%2C50.46-44.03%2C64.02-147.76%2C33.29-174.38-37.31-75.37-3.5-136.65-92.65-89.37-154.31%2C17.83-23.26%2C42.71-19.1%2C51.35-5.25-.7%2C0-1.38.03-2.02.12-5.96.55-10.49%2C5.68-10.23%2C11.72.27%2C6.23%2C5.46%2C11.02%2C11.77%2C10.8%2C4.33-.16%2C11.18-3.71%2C11-13.38-.29-15.94-16.09-29.05-34.76-28.87%2C15.11-10.85%2C20.14-30.67%2C11.04-43.71-5.54-7.93-13.17-6.78-16.76-4.36-5.24%2C3.53-6.62%2C10.45-3.18%2C15.65%2C3.34%2C5.04%2C10.02%2C6.52%2C15.17%2C3.47.57-.31%2C1.14-.68%2C1.7-1.09%2C1.15%2C16.29-16.53%2C34.27-44.63%2C25.94C-.96%2C410.13-3.79%2C301.99%2C55.13%2C254.86c-19.96-72.76%2C45.89-158.59%2C119.14-132.68%2C27.63%2C9.77%2C31.37%2C34.72%2C20.86%2C47.22-.22-.66-.46-1.3-.74-1.88-2.37-5.49-8.64-8.23-14.31-6.11-5.84%2C2.18-8.8%2C8.6-6.63%2C14.53%2C1.49%2C4.07%2C6.98%2C9.48%2C16.13%2C6.33%2C15.18-5.24%2C22.77-24.56%2C16.59-42.37%2C15.02%2C11.38%2C35.74%2C10.13%2C45.42-2.69%2C5.83-7.72%2C2.38-14.62-1.03-17.29-4.97-3.89-11.99-3.07-15.87%2C1.82-3.76%2C4.73-3.1%2C11.55%2C1.39%2C15.49.47.45%2C1%2C.87%2C1.56%2C1.28-15.13%2C6.13-37.7-5.14-38.46-34.43-2-77.67%2C99.97-113.78%2C163-72.31%2C63.03-41.47%2C165.01-5.36%2C163%2C72.31-.76%2C29.3-23.32%2C40.56-38.46%2C34.43.56-.41%2C1.09-.84%2C1.56-1.28%2C4.49-3.95%2C5.15-10.76%2C1.39-15.49-3.88-4.88-10.9-5.71-15.87-1.82-3.41%2C2.67-6.86%2C9.57-1.03%2C17.29%2C9.65%2C12.78%2C30.29%2C14.06%2C45.3%2C2.77-6.3%2C17.85%2C1.29%2C37.29%2C16.52%2C42.55%2C9.14%2C3.16%2C14.64-2.26%2C16.13-6.33%2C2.17-5.93-.79-12.35-6.63-14.53-5.66-2.12-11.94.62-14.31%2C6.11-.28.58-.52%2C1.22-.74%2C1.88-10.5-12.5-6.77-37.44%2C20.86-47.22%2C73.25-25.91%2C139.11%2C59.92%2C119.14%2C132.68%2C58.92%2C47.13%2C56.09%2C155.28-18.4%2C177.37-28.1%2C8.33-45.78-9.65-44.63-25.94.57.41%2C1.13.78%2C1.7%2C1.09%2C5.14%2C3.05%2C11.83%2C1.57%2C15.17-3.47%2C3.45-5.2%2C2.07-12.13-3.18-15.65-3.59-2.42-11.22-3.57-16.76%2C4.36-9.11%2C13.03-4.08%2C32.86%2C11.04%2C43.71-18.66-.18-34.46%2C12.93-34.75%2C28.87-.18%2C9.67%2C6.67%2C13.23%2C11%2C13.38Z%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M453.33%2C36.29c29.46%2C9.32%2C49.69%2C29.58%2C54.12%2C54.21.22%2C1.21%2C1.27%2C2.06%2C2.46%2C2.06.15%2C0%2C.3-.01.45-.04%2C1.36-.25%2C2.26-1.54%2C2.02-2.9-4.76-26.49-26.27-48.21-57.53-58.09-16.33-5.16-34.28-6.57-50.56-3.96-16.7%2C2.68-31.19%2C9.37-42.09%2C19.41-10.9-10.04-25.4-16.73-42.1-19.41-16.27-2.61-34.23-1.2-50.56%2C3.96-31.26%2C9.89-52.77%2C31.6-57.53%2C58.09-.24%2C1.36.66%2C2.66%2C2.02%2C2.9%2C1.36.24%2C2.66-.66%2C2.9-2.02%2C4.43-24.63%2C24.66-44.9%2C54.12-54.21%2C33.24-10.51%2C69.16-4.11%2C89.39%2C15.91.97.96%2C2.54.96%2C3.52%2C0%2C20.23-20.03%2C56.15-26.42%2C89.38-15.91Z%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M636.6%2C169.84c20.26%2C28.36%2C25.28%2C64.5%2C12.49%2C89.93-.62%2C1.22-.13%2C2.72%2C1.09%2C3.35%2C25.3%2C13.05%2C42.48%2C45.24%2C42.76%2C80.09.24%2C30.9-12.78%2C56.4-34.83%2C68.22-1.22.65-1.67%2C2.17-1.02%2C3.38.45.84%2C1.31%2C1.32%2C2.21%2C1.32.4%2C0%2C.8-.1%2C1.18-.3%2C23.72-12.71%2C37.73-39.88%2C37.47-72.67-.13-17.12-4.35-34.63-11.86-49.3-7.71-15.05-18.55-26.77-31.46-34.04%2C6.18-13.47%2C8.06-29.33%2C5.45-46.03-2.55-16.29-9.43-32.93-19.39-46.86-19.06-26.68-46.37-40.42-73.03-36.76-1.37.19-2.32%2C1.45-2.14%2C2.82s1.45%2C2.31%2C2.82%2C2.14c24.8-3.4%2C50.32%2C9.58%2C68.28%2C34.72Z%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M541.16%2C598.21c-1.36-.21-2.62.71-2.85%2C2.07-4.59%2C28.09-29.89%2C54.38-62.96%2C65.41-29.31%2C9.78-57.59%2C5.28-75.65-12.05-1-.96-2.58-.92-3.53.07-.96%2C1-.92%2C2.58.07%2C3.53%2C12.72%2C12.2%2C30.04%2C18.53%2C49.21%2C18.53%2C10.11%2C0%2C20.74-1.76%2C31.47-5.34%2C16.24-5.42%2C31.59-14.84%2C43.23-26.51%2C11.93-11.98%2C19.73-25.92%2C22.65-40.44%2C14.72%2C1.71%2C30.38-1.4%2C45.46-9.04%2C14.7-7.45%2C28.4-19.14%2C38.58-32.92%2C19.48-26.37%2C24.12-56.58%2C12.4-80.81-.6-1.24-2.09-1.76-3.34-1.16-1.24.6-1.76%2C2.1-1.16%2C3.34%2C10.9%2C22.53%2C6.44%2C50.81-11.92%2C75.67-20.71%2C28.04-53.54%2C43.97-81.67%2C39.67Z%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M155.88%2C134.85c1.37.18%2C2.63-.77%2C2.82-2.14s-.77-2.63-2.14-2.82c-26.67-3.66-53.97%2C10.08-73.03%2C36.76-9.95%2C13.93-16.84%2C30.57-19.39%2C46.86-2.61%2C16.71-.73%2C32.56%2C5.45%2C46.03-12.91%2C7.27-23.76%2C18.99-31.46%2C34.04-7.51%2C14.67-11.72%2C32.18-11.86%2C49.3-.26%2C32.79%2C13.75%2C59.95%2C37.47%2C72.67.38.2.78.3%2C1.18.3.89%2C0%2C1.75-.48%2C2.21-1.32.65-1.22.19-2.73-1.02-3.38-22.06-11.82-35.08-37.32-34.83-68.22.27-34.86%2C17.46-67.04%2C42.76-80.09%2C1.22-.63%2C1.7-2.12%2C1.09-3.35-12.8-25.43-7.78-61.57%2C12.49-89.93%2C17.96-25.14%2C43.49-38.11%2C68.28-34.72Z%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M248.84%2C665.42c-33.07-11.03-58.37-37.32-62.96-65.41-.22-1.35-1.49-2.29-2.85-2.07-28.13%2C4.3-60.96-11.63-81.67-39.67-18.36-24.85-22.81-53.14-11.92-75.67.6-1.24.08-2.74-1.16-3.34-1.24-.6-2.74-.08-3.34%2C1.16-11.72%2C24.23-7.08%2C54.44%2C12.4%2C80.81%2C10.17%2C13.77%2C23.87%2C25.46%2C38.57%2C32.92%2C15.08%2C7.65%2C30.74%2C10.75%2C45.46%2C9.04%2C2.92%2C14.53%2C10.72%2C28.46%2C22.65%2C40.44%2C11.63%2C11.68%2C26.98%2C21.09%2C43.23%2C26.51%2C10.74%2C3.58%2C21.36%2C5.34%2C31.48%2C5.34%2C19.17%2C0%2C36.5-6.33%2C49.21-18.52%2C1-.96%2C1.03-2.54.07-3.53-.96-1-2.54-1.03-3.53-.07-18.06%2C17.32-46.34%2C21.83-75.65%2C12.05Z%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); }

/* ============================================================
   style.css ─ リセット＋最小限のみ
   ・デザイン（色・余白・レイアウト・装飾）は持たせない。
     受領デザインに沿って AI が「↓ サイトCSS」以下に追記する＝新規制作の邪魔をしない方針。
   ・納品時はこの内容を site.combined.css の「フリーCSS」部に集約し、後ろに skin を結合する。
   ============================================================ */

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

/* ===== 最小限の機能（デザインではない） ===== */
/* モバイルドロワーの初期非表示。Commons v1.3 が #p-drawer に .is-open を付与して開く。 */
#p-drawer { display: none; }
#p-drawer.is-open { display: block; }
/* ドロワー展開中は背面スクロールを固定（パネルを画面端まで密着させ、背景の動きを止める）。
   このとき縦スクロールバーが消え、右基準の固定ボタン（×）が約15px右へずれる。
   → 閉じるボタン側で --sbw（スクロールバー幅・commons.jsが計測）ぶん右オフセットして開くボタンに一致させる。 */
html.is-drawer-open { overflow: hidden; }

/* ============================================================
   ↓ サイトCSS（近江造園）─ 参考サイト（ゆうさんの植木屋さん）準拠の
     軽やかで親しみやすいトーン＋和のあしらい（縦書き・七宝・波形）
   ・CSS安全契約：グローバル変数非依存・具体値・自作接頭辞クラス（sh-/sf-/site-/xw-/rc-）。
   ・カラーパレット（具体値）
     本文（深緑鼠）  #3C4438
     緑（メイン）    #3F6B3F ／ 濃緑 #2F5230 ／ 明るめhover #4E824E
     生成り（地）    #F7F9F4 ／ 薄緑 #EEF3EC
     淡藍（面）      #E9F1F3 ／ 藍鼠 #4A6B78
     金茶（あしらい）#B98A3B
     罫線            #E4EBDF
   ============================================================ */

body {
  color: #3C4438;
  background: #FFFFFF;
  font-size: 16px;
  letter-spacing: .08em;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
}

/* ============================================================
   文字組み共通（孤立文字対策）─ 監査バッチA
   ・見出し・短い中央寄せブロック＝行を均等化し「行末に1文字だけ落ちる」を防止（text-wrap:balance）。
   ・本文＝最終行の孤立を回避（text-wrap:pretty／未対応ブラウザは無視＝安全）。
   ・日本語の禁則を厳格化（line-break:strict）で句読点・小書き仮名の行頭孤立を抑制。
   ・:where() でゼロ詳細度＝既存の個別指定を一切上書きしない（安全契約を維持）。
   ============================================================ */
:where(body) { line-break: strict; }
:where(
  h1, h2, h3, h4, h5, h6,
  .site-h1, .site-h2, .site-h3, .site-chip,
  .site-head__title, .site-service__title, .site-reason__title, .site-reason__text,
  .site-consult__copy h2, .site-access__info h2, .site-blog__lead, .site-mv__msg,
  .rc-empathy p, .rc-chapter__catch, .rc-pull, .rc-branch__title, .rc-cta__title,
  .xw-pagehead__title, .xw-h2, .xw-h3, .xw-card__title, .xw-cta__title
) { text-wrap: balance; }
:where(
  p, li, dd, figcaption,
  .site-about__text p, .site-recruit__text p, .site-service__text > p,
  .site-consult__copy p, .site-access__info p,
  .xw-body p, .rc-chapter__body p
) { text-wrap: pretty; }

/* ---------- 共通 ---------- */
.site-inner { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.site-en { font-family: 'Jost', sans-serif; letter-spacing: .12em; }

/* 見出し・キャッチ書体の切替は :root の変数1つで全体に反映される。
   --font-heading … 見出し・キャッチ共通（既定＝Klee One 手書き教科書体）
   --font-hero    … ヒーロー縦書きキャッチ専用（未指定なら --font-heading を継承）
   ▼書体を差し替える手順（2ステップ）
     ① 各ページ<head>のGoogle Fonts読み込みに対象書体を追加（index.htmlに候補をコメントで用意済み）
     ② 下の :root の値を差し替える。ヒーローだけ別書体にしたい時は --font-hero を指定。 */
:root{
  --font-heading: 'Klee One', 'Noto Sans JP', sans-serif;
  --font-hero: 'Klee One', 'Zen Old Mincho', 'Shippori Mincho', 'Noto Sans JP', serif;
}
.sh-drawer-nav a,
.sf-footer__philosophy,
.site-step__text, .site-tate,
.site-head__title, .site-reason__title, .site-service__title,
.site-consult__copy h2, .site-access__info h2,
.xw-pagehead__title, .xw-h2, .xw-h3, .xw-card__title, .xw-cta__title,
.rc-empathy p, .rc-chapter__catch, .rc-pull,
.rc-branch__title, .rc-cta__title {
  font-family: var(--font-heading);
}

/* ヒーロー縦書きキャッチ＝複数書体対応。
   ・font-family は --font-hero（明朝でも手書きでもゴシックでも差し替え可）。
   ・縦組みの字形／約物を最適化：upright基調＋縦組みかな(vkna/vpal)を有効化。
   ・書体別の微調整はモディファイアクラスで上書き（HTMLの span 親に付与）。 */
.site-mv__catch span, .rc-hero__catch span {
  font-family: var(--font-hero, var(--font-heading));
  font-feature-settings: "vkna" 1, "vpal" 1, "pkna" 1;
  text-orientation: mixed;
}
/* 書体別モディファイア：.site-mv__catch / .rc-hero__catch に付与して個別に切替 */
.site-mv__catch--klee span,     .rc-hero__catch--klee span     { font-family: 'Klee One', 'Noto Sans JP', sans-serif; }
.site-mv__catch--mincho span,   .rc-hero__catch--mincho span   { font-family: 'Zen Old Mincho', 'Noto Serif JP', serif; letter-spacing: .34em; }
.site-mv__catch--shippori span, .rc-hero__catch--shippori span { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; letter-spacing: .32em; }
.site-mv__catch--kaisei span,   .rc-hero__catch--kaisei span   { font-family: 'Kaisei Opti', 'Noto Serif JP', serif; }
.site-mv__catch--zenkaku span,  .rc-hero__catch--zenkaku span  { font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; }

/* 縦書き見出し（参考サイト tate-ttl 準拠） */
.site-tate {
  writing-mode: vertical-rl;
  font-feature-settings: "pkna";
  font-weight: 600; letter-spacing: .22em; line-height: 1.6;
  font-size: 26px; color: #3F6B3F;
  display: flex;
}
.site-tate .site-tate-en {
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 12px; letter-spacing: .18em; color: #8C6420;
  margin-left: 14px; text-transform: uppercase;
}
@media (min-width: 768px) { .site-tate { font-size: 32px; } }
/* 縦書き見出し内の半角数字を正立（既定では横倒しになるのを90°起こして読める向きに） */
.rc-tatenum { text-orientation: upright; text-combine-upright: none; }

/* ============================================================
   共通コンポーネント（基準＝About）─ 文字組みの単一ソース
   ・見出し・チップのサイズ/太さ/字送り/行間/色はここに集約。
   ・各セクションのクラスは「レイアウト・背景・装飾・余白」だけを担当。
   ・個別調整は後から修飾クラス（例 .site-h2--rev）で上乗せする。
   ・CSS変数非依存の具体値（安全契約）。font-family と擬似ボールドも自己完結。
   ============================================================ */
.site-h1 {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 600; letter-spacing: .18em; line-height: 2.4; color: #3F6B3F;
  -webkit-text-stroke: .35px currentColor; text-stroke: .35px currentColor; paint-order: stroke fill;
}
.site-h2 {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 600; letter-spacing: .14em; line-height: 1.7; color: #3F6B3F;
  -webkit-text-stroke: .35px currentColor; text-stroke: .35px currentColor; paint-order: stroke fill;
}
.site-h2--rev { color: #FFFFFF; }
/* スマホのみ改行（PCでは無効＝1行）。<br class="site-brsp"> で使う */
.site-brsp { display: none; }
@media (max-width: 767px) { .site-brsp { display: inline; } }
.site-h3 {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 600; letter-spacing: .1em; line-height: 1.8; color: #3F6B3F;
  -webkit-text-stroke: .35px currentColor; text-stroke: .35px currentColor; paint-order: stroke fill;
}
.site-chip {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 600; letter-spacing: .16em; line-height: 1.2; color: #3F6B3F;
  -webkit-text-stroke: .3px currentColor; text-stroke: .3px currentColor; paint-order: stroke fill;
  border: 1px solid #C9D8C4; border-radius: 24px; padding: 13px 26px 13px 27px;
}
@media (min-width: 768px) {
  .site-h1 { font-size: 22px; line-height: 2.8; }
  .site-h2 { font-size: 27px; }
  .site-h3 { font-size: 20px; }
}

/* サークル矢印ボタン（参考サイト btn-mini 準拠） */
.site-btn-mini {
  width: fit-content;
  display: flex; align-items: center; column-gap: 18px;
  position: relative; padding: 8px 0;
  font-weight: 600; letter-spacing: .15em; font-size: 16px; color: #3F6B3F;
  transition: color .3s ease;
}
.site-btn-mini::before {
  content: ""; display: inline-block; flex: none;
  width: 60px; height: 60px; border-radius: 50%;
  background: #F7F9F4; border: 1px solid #E4E9DF;
  position: relative; z-index: 1;
  order: 2;
  transition: background-color .3s ease, transform .3s ease;
}
/* 矢印は円より前面（円は hover 時 transform でスタッキングコンテキスト化し
   z-index 無指定だと矢印を覆う＝矢印が消える不具合を防ぐ）。 */
.site-btn-mini::after {
  content: ""; position: absolute; right: 26px; top: 50%; z-index: 2;
  width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid #3F6B3F; border-right: 2px solid #3F6B3F;
  transform: rotate(45deg);
  transition: border-color .3s ease;
}
.site-btn-mini:hover { color: #4E824E; }
.site-btn-mini:hover::before { background: #3F6B3F; transform: scale(.86); }
.site-btn-mini:hover::after { border-color: #FFFFFF; }
.site-btn-mini--white::before { background: #FFFFFF; }
.site-btn-mini--rev { color: #FFFFFF; }
.site-btn-mini--rev::after { border-color: #3F6B3F; }
.site-btn-mini--rev:hover { color: #F7F9F4; }
.site-btn-mini--rev:hover::before { background: #2F5230; }
.site-btn-mini--rev:hover::after { border-color: #FFFFFF; }

/* 大ボタン（参考サイト .btn.green 準拠） */
.site-btn {
  position: relative; display: block; width: fit-content; max-width: 100%;
  padding: 16px 74px 16px 28px; border-radius: 40px;
  background: #3F6B3F; color: #FFFFFF; text-align: left;
  font-weight: 600; letter-spacing: .1em; font-size: 16px; line-height: 1.5;
  transition: background-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.site-btn:hover {
  background: #4E824E; color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(47, 82, 48, .30);
}
/* 白丸は楕円（ピル）右端の半円と同心に：中心を右端から28px（＝ボタン高さの半分）に置く */
.site-btn::before {
  content: ""; position: absolute; right: 11px; top: 50%;
  width: 34px; height: 34px; margin-top: -17px;
  background: #FFFFFF; border-radius: 50%;
  transition: transform .3s ease;
}
.site-btn::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid #3F6B3F; border-right: 2px solid #3F6B3F;
  transform: rotate(45deg);
}
.site-btn:hover::before { transform: scale(1.12); }
.site-btn--center { margin-inline: auto; text-align: center; }

/* ghost（白地・緑枠）＝下層の副次アクション用。塗りの .site-btn と対で使う */
.site-btn--ghost { background: #FFFFFF; color: #3F6B3F; border: 1px solid #3F6B3F; }
.site-btn--ghost:hover { background: #3F6B3F; color: #FFFFFF; }
/* 白地では白丸が埋没するため丸を緑・矢印を白に。hoverで塗り緑化に伴い丸を白・矢印を緑へ戻す */
.site-btn--ghost::before { background: #3F6B3F; }
.site-btn--ghost::after { border-top-color: #FFFFFF; border-right-color: #FFFFFF; }
.site-btn--ghost:hover::before { background: #FFFFFF; }
.site-btn--ghost:hover::after { border-top-color: #3F6B3F; border-right-color: #3F6B3F; }

/* 面（生成り・薄緑・淡藍）＋薄い七宝柄 */
.site-bg-cream { background-color: #F7F9F4; }
.site-bg-shippo {
  background-color: #F7F9F4;
}
.site-bg-blue {
  background-color: #E9F1F3;
}

/* ============================================================
   ヘッダー（sh-）─ 固定ロゴ＋MENUボタンのみ（参考サイト準拠）
   ============================================================ */
.sh-header { position: static; }
.sh-logo {
  position: fixed; left: 20px; top: 16px; z-index: 10010;
  display: flex; align-items: center; gap: 10px; min-height: 44px;
}
.sh-logo__mark { width: 34px; flex: none; }
.sh-logo__mark img { display: block; width: 100%; height: auto; transition: filter .3s ease; }
.sh-logo__text { line-height: 1.15; }
/* 社名はフッターと同じ明朝ロゴタイプ＋マークと同じ墨グレーで統一 */
.sh-logo__name {
  display: block;
  font-family: 'Zen Old Mincho', serif; font-weight: 700; letter-spacing: .18em; color: #55524C;
  font-size: 19px;
  transition: color .3s ease;
}
.sh-logo__text small {
  display: block; margin-top: 3px;
  font-family: 'Zen Old Mincho', serif;
  font-size: 9px; font-weight: 500; letter-spacing: .3em; color: #5D6B54;
  transition: color .3s ease;
}
.sh-gnav { display: none; }
@media (min-width: 1024px) {
  .sh-logo { left: 40px; top: 32px; }
  .sh-logo__mark { width: 40px; }
  .sh-logo__name { font-size: 22px; }
}

/* MENUボタン（2本線＋MENU文字） */
.p-hamburger {
  position: fixed; right: 20px; top: 20px; z-index: 10020;
  width: 56px; min-height: 48px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
}
.p-hamburger span { display: block; width: 34px; height: 2px; background: #3F6B3F; transition: transform .3s ease, background-color .3s ease; }
.p-hamburger span:nth-child(2) { width: 26px; margin-left: 8px; }
.p-hamburger span:nth-child(3) { display: none; }
.p-hamburger::after {
  content: "MENU";
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: .08em; color: #3F6B3F;
  transition: color .3s ease;
}
.p-hamburger:hover span { transform: translateY(2px); }
@media (min-width: 1024px) { .p-hamburger { right: 44px; top: 36px; } }

/* 濃い背景セクションの上ではヘッダーを白抜きにして可読性を確保（JSで .is-on-dark を付与） */
.sh-header.is-on-dark .sh-logo__name { color: #FFFFFF; }
.sh-header.is-on-dark .sh-logo__text small { color: rgba(255, 255, 255, .82); }
.sh-header.is-on-dark .sh-logo__mark img { filter: brightness(0) invert(1); }
.sh-header.is-on-dark .p-hamburger span { background: #FFFFFF; }
.sh-header.is-on-dark .p-hamburger::after { color: #FFFFFF; }

/* ドロワー（右側パネル・緑地）。#p-drawer=暗い下地／.sh-drawer=右パネル本体。 */
#p-drawer {
  position: fixed; inset: 0; z-index: 10030;
  background: rgba(18, 30, 18, .42);   /* 左側を暗くする下地（パネルは右） */
}
/* パネル本体：右側・緑地・白文字・縦フレックス（フッターを最下部へ） */
.sh-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 86vw);
  display: flex; flex-direction: column;
  background: #3F6B3F; color: #FFFFFF;
  overflow-y: auto;
  padding: 92px 30px 40px;
  box-shadow: -10px 0 40px rgba(0, 0, 0, .28);
}
/* 閉じるボタン＝ハンバーガーと同じ位置（固定・右上・同じ56×48ボックス）。開いている間だけ表示。
   right に --sbw を足す＝open時に消えたスクロールバー幅ぶん右へずらし、開くボタン（バー有り時）と画面上で一致。 */
.p-drawer-close {
  position: fixed; top: 20px; right: calc(20px + var(--sbw, 0px)); z-index: 10040;
  width: 56px; min-height: 48px;
  font-size: 0; color: transparent;   /* ×テキストは隠し、疑似要素で線を描く */
}
/* ×＝2本の線をハンバーガーと同じ太さ(2px)・同じ位置（ボックス上端から10px＝開く線の中心）に。 */
.p-drawer-close::before, .p-drawer-close::after {
  content: ""; position: absolute; left: 50%; top: 10px;
  width: 28px; height: 2px; background: #FFFFFF; border-radius: 1px;
}
.p-drawer-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.p-drawer-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* 開いている間はハンバーガーを隠し、同位置の×だけ見せる */
.p-hamburger[aria-expanded="true"] { visibility: hidden; }

/* パネル頭：ロゴ（マーク白抜き＋社名） */
.sh-drawer__head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 20px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.sh-drawer__mark { width: 40px; flex: none; }
.sh-drawer__mark img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.sh-drawer__brand-ja { display: block; font-family: 'Zen Old Mincho', serif; font-weight: 700; font-size: 20px; letter-spacing: .18em; color: #FFFFFF; }
.sh-drawer__brand small { display: block; margin-top: 3px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: .3em; color: rgba(255, 255, 255, .7); }

/* ナビ */
.sh-drawer-nav { margin-top: 6px; }
.sh-drawer-nav a {
  display: flex; align-items: center; min-height: 46px;
  padding: 6px 2px; font-size: 17px; font-weight: 600; letter-spacing: .1em; color: #FFFFFF;
  transition: opacity .3s ease;
}
.sh-drawer-nav a:hover { opacity: .6; }
/* グループ区切り線：主要項目(非sub)の頭に。先頭「ホーム」は除く。 */
.sh-drawer-nav > a:not(.sh-drawer-nav__sub):not(:first-child) {
  margin-top: 10px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
/* 子メニュー：先頭の横線は無し（インデントのみ・淡い白） */
.sh-drawer-nav a.sh-drawer-nav__sub {
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .8);
  padding-left: 18px; min-height: 40px;
}
/* フッター：CTA＋電話（最下部へ） */
.sh-drawer__foot { margin-top: auto; padding-top: 26px; }
.sh-drawer-nav__contact {
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #2F5230; border-radius: 40px;
  font-size: 16px; font-weight: 600; letter-spacing: .08em; padding: 15px 20px;
  transition: background-color .3s ease;
}
/* color明示＝cuezilla-skinの a:hover{color:inherit}（緑地の白を継承し薄緑背景で不可視）を上書き。
   .sh-drawer-nav__contact:hover(0,2,0) が a:hover(0,1,1) に詳細度で勝つ。 */
.sh-drawer-nav__contact:hover { background: #EAF1E7; color: #2F5230; }
.sh-drawer__tel {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-top: 18px; font-family: 'Jost', sans-serif; font-size: 25px; letter-spacing: .04em; color: #FFFFFF;
}
.sh-drawer__tel span { font-size: 12px; letter-spacing: .1em; opacity: .85; }
@media (min-width: 1024px) {
  .p-drawer-close { top: 36px; right: calc(44px + var(--sbw, 0px)); }
  .sh-drawer { padding-top: 100px; }
}

/* ============================================================
   フッター（sf-）─ 軽やか・生成り（参考サイト準拠）
   ============================================================ */
.sf-footer { background: #F7F9F4; color: #3C4438; padding-top: 24px; }
.sf-footer__inner {
  max-width: 1120px; margin-inline: auto;
  padding: 56px 24px 8px;
  display: flex; flex-direction: column; gap: 44px;
}
/* ロゴ＋理念で1セット（＝密） */
.sf-footer__brandset { }
/* マーク＋社名は横並び。社名はマークと同じくらいの天地に大きく */
.sf-footer__brand { display: flex; align-items: center; gap: 14px; }
.sf-footer__mark { width: 44px; flex: none; }
.sf-footer__mark img { display: block; width: 100%; height: auto; }
/* ロゴタイプは見出し(Klee One)と分け、明朝で格調を出す（混在方針）。1行固定 */
.sf-footer__name-ja { font-family: 'Zen Old Mincho', serif; font-size: 40px; font-weight: 700; letter-spacing: .22em; line-height: 1; color: #55524C; white-space: nowrap; }
/* 英字はマーク＋社名の下に、文字間を広めに */
.sf-footer__name-en {
  display: block; margin-top: 12px;
  font-family: 'Zen Old Mincho', serif; font-size: 13px; font-weight: 500; letter-spacing: .5em; color: #67755F;
}
/* 理念はロゴと同セット＝近接 */
.sf-footer__philosophy { margin-top: 14px; font-size: 13px; letter-spacing: .18em; color: #5D6B54; }
/* 連絡先（電話＋住所）は別セット＝大きく空ける（粗密） */
.sf-footer__contact { margin-top: 40px; }
.sf-footer__tel {
  font-family: 'Jost', sans-serif; font-size: 30px; font-weight: 400; line-height: 1.2; color: #3F6B3F;
}
.sf-footer__tel span { font-size: 15px; margin-right: 6px; }
.sf-footer__tel a { color: #3F6B3F; }
.sf-footer__address { margin-top: 6px; font-size: 13px; line-height: 2; color: #5D6B54; }
/* コンパクト：行の高さ・列幅・列間を詰めてまとめて見せる */
.sf-footer__nav { display: flex; flex-wrap: wrap; gap: 0 32px; }
.sf-footer__nav ul { min-width: 150px; }
.sf-footer__nav a {
  display: inline-flex; align-items: center; min-height: 29px;
  font-size: 13.5px; letter-spacing: .08em; color: #3C4438;
  transition: opacity .3s ease;
}
.sf-footer__nav a:hover { opacity: .55; }
.sf-footer__bottom {
  max-width: 1120px; margin-inline: auto;
  padding: 10px 24px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px;
  font-size: 12px; color: #5D6B54;
}
.sf-footer__bottom a { display: inline-flex; align-items: center; min-height: 40px; color: #5D6B54; }
.sf-footer__bottom a:hover { opacity: .6; }
.sf-footer__bottom small { font-family: 'Jost', sans-serif; letter-spacing: .12em; }
@media (min-width: 768px) {
  .sf-footer__inner { flex-direction: row-reverse; justify-content: space-between; }
  .sf-footer__info { text-align: right; }
  .sf-footer__brand { justify-content: flex-end; }
  /* 右揃え時、各行末尾の字間・約物（。など）ぶんの余白を相殺して右端を一直線に揃える */
  .sf-footer__name-ja { margin-right: -.22em; }
  .sf-footer__name-en { margin-right: -.5em; }
  .sf-footer__philosophy { margin-right: -.5em; }
  .sf-footer__bottom small { margin-right: -.12em; }
}

/* ============================================================
   トップ：MV（コラージュ・縦書きキャッチ）
   ============================================================ */
/* 視覚非表示（SEO/AT用） */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* MV：縦書きキャッチ＋動画（枠付き＝旧メイン画像の位置）＋リードコピー。
   ・動画ファイルは後日支給。それまでは poster（hero-main.jpg）を表示。
   ・コピーの見せ方は section の修飾クラスで切替：
       .site-mv--aside   … 囲みなし・左の余白にテキスト（軽やか・引き算）
       .site-mv--overlay … 動画下部にグラデ＋白文字（映画的・一体感） */
.site-mv { background: #F7F9F4; padding: 104px 20px 24px; overflow: hidden; }
.site-mv__stage { position: relative; max-width: 1160px; margin-inline: auto; }
.site-mv__catch { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: 8px; margin: 0 0 22px; }
.site-mv__catch span {
  display: block; writing-mode: vertical-rl; font-feature-settings: "pkna";
  font-size: 22px; font-weight: 600; letter-spacing: .34em; line-height: 1.8; color: #3F6B3F;
}
/* 左へ向かって階段状に下げる（木と→人と→住まいと→向き合う） */
.site-mv__catch span:nth-child(2) { margin-top: 28px; }
.site-mv__catch span:nth-child(3) { margin-top: 56px; }
.site-mv__catch span:nth-child(4) { margin-top: 84px; }
.site-mv__cluster { display: flex; flex-direction: column; gap: 20px; }
.site-mv__col { display: flex; flex-direction: column; gap: 20px; }
/* 動画枠（poster/videoともcoverで角丸）。読込前の下地は薄緑。
   動画は一般的な 16:9 を遵守（1920×1080素材）。frame自体を16:9にするので歪み・不要クロップなし。 */
.site-mv__img-l :is(img, video) {
  width: 100%; display: block; border-radius: 6px; object-fit: cover;
  aspect-ratio: 16 / 9; object-position: 50% 50%; background: #EEF3EC;
}
/* リードコピー（囲みなしベース。色/配置は修飾クラスで上乗せ） */
.site-mv__lead { max-width: 440px; }
.site-mv__label {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; letter-spacing: .12em; color: #8C6420;
}
.site-mv__label::before { content: ""; flex: none; width: 28px; height: 1px; background: #C9A24B; }
.site-mv__msg { margin-top: 12px; font-size: 18px; font-weight: 500; line-height: 1.9; letter-spacing: .04em; color: #3F6B3F; }

/* ---- 縦積みレイアウト（≤1279＝スマホ〜狭いPC/タブレット）：①動画（大）②縦書きキャッチ ③リード。
       狭いPCでも早めにこの表示へ切替えて動画を大きく見せる。動画・見出し・リードの左端を揃える。 ---- */
@media (max-width: 1279px) {
  .site-mv { padding: 104px clamp(18px, 4vw, 56px) 44px; }
  .site-mv__stage { display: flex; flex-direction: column; align-items: stretch; max-width: none; margin: 0; }
  .site-mv__cluster, .site-mv__col { display: contents; }
  .site-mv__img-l { order: 1; width: 100%; margin: 0; }                    /* ①動画＝コンテンツ幅いっぱい（左端=paddingエッジ） */
  .site-mv__catch { order: 2; width: fit-content; align-self: flex-end; margin: 30px 0 20px; } /* ②見出し(h1)＝右揃え（ラベルは左揃えのまま） */
  .site-mv__catch span { font-size: clamp(27px, 3vw, 40px); }
  .site-mv__catch span:nth-child(2),
  .site-mv__catch span:nth-child(3),
  .site-mv__catch span:nth-child(4) { margin-top: 0; }
  .site-mv__msg { font-size: clamp(16px, 1.5vw, 19px); }
  .site-mv__lead { order: 3; margin: 0; max-width: 560px; }                /* ③リード＝左端を動画・見出しに揃える（margin-left:0） */
}

/* ---- 横並びレイアウト（≥1280＝広めのPC）：縦書きキャッチ左＋動画右。100svhでFV占有し次セクションのロゴを隠す ---- */
@media (min-width: 1280px) {
  .site-mv { padding: 110px 0 24px; min-height: 100svh; }
  .site-mv__stage { max-width: none; margin: 0; min-height: calc(100svh - 134px); }
  .site-mv__cluster { display: block; }
  .site-mv__col { display: contents; }
  /* 見出しは左へ寄せる（8vw）＝動画との間隔を広く取る余地を作る */
  .site-mv__catch { position: absolute; left: 8vw; top: 120px; margin: 0; gap: 12px; z-index: 2; align-items: flex-start; }
  .site-mv__catch span { font-size: clamp(25px, 3.3vw, 36px); }
  .site-mv__catch span:nth-child(2),
  .site-mv__catch span:nth-child(3),
  .site-mv__catch span:nth-child(4) { margin-top: 0; }
  /* 動画＝右側・全体表示（見切れなし）。左端 34vw 固定＝キャッチとの間隔が広い画面ほど広がる（1280≈38px→1920≈200px）。 */
  .site-mv__img-l { position: absolute; top: 50%; transform: translateY(-50%); left: 42vw; right: max(24px, 50vw - 760px); }
  .site-mv__img-l :is(img, video) { border-radius: 6px; }
  /* 囲みなしリード＝左下。見出しの少し内側。 */
  .site-mv--aside .site-mv__lead { position: absolute; left: calc(8vw + 40px); top: auto; bottom: 12%; max-width: 26%; z-index: 2; }
}

/* 写真2枚コラージュ＋ロゴ（MVから次セクションへつなぐ）。角丸の重なりは2pxリングで隙間 */
.site-step { background: #F7F9F4; padding: 12px 20px 80px; overflow: hidden; }
.site-step__inner {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  max-width: 1060px; margin-inline: auto;
}
/* 2枚を横並び・4pxの実隙間で staggered（重ね＝リングは使わない）。角丸はページ他所と同じく維持 */
.site-step__imgs { display: flex; align-items: flex-start; gap: 4px; width: 100%; max-width: 420px; }
.site-step__img1 { flex: 0 0 42%; }
.site-step__img2 { flex: 1 1 auto; margin-top: 22%; }
.site-step__img1 img, .site-step__img2 img {
  width: 100%; display: block; border-radius: 6px;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.site-step__img1 img { object-position: 50% 45%; }
.site-step__img2 img { object-position: 40% 60%; }
.site-step__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.site-step__mark { width: 54px; }
.site-step__mark img { width: 100%; height: auto; display: block; }
.site-step__name {
  margin-top: 14px; font-family: 'Zen Old Mincho', serif; font-weight: 700;
  font-size: 38px; letter-spacing: .2em; line-height: 1; color: #55524C;
}
.site-step__en {
  margin-top: 12px; font-family: 'Zen Old Mincho', serif;
  font-size: 13px; letter-spacing: .5em; color: #67755F;
}
@media (min-width: 768px) {
  .site-step { padding: 8px 24px 120px; }
  .site-step__inner { flex-direction: row; justify-content: center; align-items: center; gap: 7vw; }
  .site-step__imgs { width: 48%; max-width: 540px; }
  .site-step__img1 { flex: 0 0 40%; }
  .site-step__img2 { flex: 1 1 auto; margin-top: 20%; }
  .site-step__name { font-size: 46px; }
}

/* ============================================================
   トップ：セクション共通
   ============================================================ */
.site-sec { padding: 72px 0; position: relative; }
@media (min-width: 768px) { .site-sec { padding: 110px 0; } }

/* ============================================================
   有機的セクション背景（Figma背景層を反映｜2層構造）
   ・地色帯(::before)＋曲線(::after)を全て最背面(z-index:-1)へ。
     body を stacking context 化し、main も footer(main外) も同一背面レイヤーに揃える。
     → 文字・写真は常に前面で被らない。曲線は上のセクションへ有機的にはみ出す。
   ・調整：地色=--band ／ 曲線=--bgc-img,--bgc-h(高さ),--bgc-top(上端)。
   ・曲線は about / reason / service / recruit / blog(採用→ブログの波) / footer の6か所。
   ============================================================ */
body { position: relative; z-index: 0; }
section.bgband, footer.bgband { background-color: transparent; } /* 地色は::beforeへ移すため透明化 */
.bgband { position: relative; }
.bgband::before {   /* 地色帯（ベタ）：セクション全体・最背面 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--band, transparent);
}
.bgc::after {       /* 曲線：セクション上端に配置し上のセクションへはみ出す・最背面 */
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  top: var(--bgc-top);
  /* 幅100%を基準に高さをアスペクト比で比例算出（--bgc-vh＝幅1440時の表示高さ）。
     幅が変わっても縦横比を保って自然にスケール。--bgc-top も vw 化して比例移動。 */
  aspect-ratio: 1440 / var(--bgc-vh);
  background: var(--bgc-img) center / 100% 100% no-repeat;
}
/* 各セクションの地色（曲線と曲線の間のベタ帯） */
.site-mv        { --band: #F7F9F4; }
.site-step      { --band: #F7F9F4; }
.site-about-sec { --band: #EEF3EC; }
.site-reason-sec{ --band: #FFFFFF; } /* 白：SERVICE上部の透明帯(body白)と同化させ、境界の白筋を消す */
.site-service   { --band: #3F6B3F; }
.site-recruit   { --band: #FFFFFF; } /* 白：SERVICE下部の白カーブ/透明帯と同化（REASONと同理由） */
.site-blog      { --band: #F7F9F4; }
.site-access-sec{ --band: #FFFFFF; }
.sf-footer      { --band: #F7F9F4; }
/* 相談(consult)：フローティングカードの背面に生成り帯を全幅で敷く
   （左8vwの余白・上下も含め、ブログからの生成り帯を途切れさせず継続） */
.site-consult { position: relative; }
.site-consult::before {
  content: ""; position: absolute; z-index: -1;
  left: -8vw; right: 0; top: -120px; bottom: 0;
  background: #F7F9F4;
}
/* 各境界のカーブ（再調整後のFigma背景層 Vector を反映）
   ※緑(Vector3)はviewBox幅1436→100%伸縮で全幅化し、Figmaの左4pxズレを吸収 */
.site-about-sec { --bgc-vh: 693; --bgc-top: -39.72vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 693' preserveAspectRatio='none'%3E%3Cpath fill='%23EEF3EC' d='M 0 8.23 C 138.88 -20.61 522.61 10.39 946.52 365.03 C 1075.96 473.15 1257.98 527.21 1440 365.03 C 1440 543.79 1440 658.16 1440 693 L 0 693 L 0 8.23 Z'/%3E%3C/svg%3E"); }
.site-reason-sec { --bgc-vh: 419; --bgc-top: -2.15vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 419' preserveAspectRatio='none'%3E%3Cpath fill='%23EEF3EC' d='M 1440 187.82 C 1358.24 115.43 1125.1 -1.76 846.59 108.58 C 498.46 246.51 304.62 478.35 0 404.98 C 0 104.47 0 9.78 0 0 L 1440 0 L 1440 187.82 Z'/%3E%3C/svg%3E"); }
.site-service { --bgc-vh: 220; --bgc-top: calc(-9.03vw + 50px); --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1436 532' preserveAspectRatio='none'%3E%3Cpath fill='%233F6B3F' d='M 0 387.22 C 90.6 414.15 320.46 419.54 515.18 225.59 C 758.56 -16.84 957.33 33.67 1079.03 67.34 C 1200.72 101.01 1306.19 168.35 1436 0 C 1436 382.5 1436 514.04 1436 532 L 0 532 L 0 387.22 Z'/%3E%3C/svg%3E"); }
/* RECRUIT境界：白背景を活かし「白いなだらかな波」でSERVICE緑の下端を上へ削り、有機的な境界に。
   fillは波の下側（＝白）。緑を約100px上へ引き上げつつ直線を出さない。 */
.site-recruit { --bgc-vh: 160; --bgc-top: -8.82vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M 0 12 C 280 30 540 130 880 160 C 1120 180 1320 170 1440 172 L 1440 260 L 0 260 Z'/%3E%3C/svg%3E"); }
.site-blog { --bgc-vh: 146; --bgc-top: -10.14vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F9F4' d='M 0 146 C 164 28 164 200 360 38 C 500 -26 548 120 716 120 C 884 120 950 100 1100 28 C 1240 -34 1360 62 1440 0 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
.site-access-sec { --bgc-vh: 584; --bgc-top: -29.58vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 584' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F9F4' d='M 1440 132 C 1388.91 240 1184.27 449.6 774.45 424 C 364.64 398.4 87.39 520 0 584 L 0 0 L 1440 0 L 1440 132 Z'/%3E%3C/svg%3E"); }
.sf-footer { --bgc-vh: 464; --bgc-top: -27.78vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 464' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F9F4' d='M 0 368 C 52.14 314.67 231.84 214.4 533.48 240 C 910.53 272 1307.63 224 1440 0 C 1440 345.6 1440 453.33 1440 464 L 0 464 L 0 368 Z'/%3E%3C/svg%3E"); }
/* ↑ aspect-ratio＋vw で全幅比例スケールするため、旧・固定px＋media query調整は不要（撤去）。
   狭幅ではカーブが自然に浅くなる（縦伸び歪みは発生しない）。 */

/* 【A修正】SERVICE緑帯のはみ出し対策：
   緑帯 ::before は上端が直線(service上端 y=0)だが、緑カーブの谷は上端より下(≈2.7vw)にある。
   そのため帯の直線的な緑上端がカーブより上に露出していた。
   → 帯の上端をカーブの谷より下(＝全幅が緑になる線より下・カーブ下端 6.25vw より上)へ下げ、
     カーブの緑の中に隠す。左右下端は inset:0 のまま。 */
.site-service.bgband::before { top: calc(3.6vw + 50px); } /* 曲線を50px下げたのに追従（谷の下に隠す） */

/* ============================================================
   和のあしらい：左右余白のパララックス装飾レイヤー
   ・背景(::before/::after z-index:-1)の前面、本文(z-index:0)の背面に置く装飾。
   ・itemはJS(deco-parallax.js)がtop(=data-pos×全高)とtransform(translateY×data-speed+rotate)を制御。
   ・pointer-events:none で操作を妨げない。狭幅では余白が消えるためサイズ・不透明度を抑制。
   ============================================================ */
.site-deco {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.site-deco__item {
  position: absolute; top: 0; left: 0; width: 72px;
  opacity: var(--op, .5); will-change: transform;
  transform: translate3d(0,0,0); /* JS適用前の初期値。left/right/width/topはJSがdata属性から適用 */
}
.site-deco__item > img { display: block; width: 100%; height: auto; }
/* ≥1168px（コンテンツ幅1120が満たされる幅）は原寸、それ未満は deco-parallax.js が幅・位置を
   コンテンツ幅比で縮小（原寸→比例縮小）。モバイル(<768)は本文に被るため非表示。 */
@media (max-width: 767px) { .site-deco { display: none; } }

/* --- 位置/サイズ調整モード（?edit=1）。deco-edit.js が body に .deco-editing を付与 --- */
.deco-editing .site-deco { z-index: 60; display: block; } /* 編集中は幅に関わらず表示 */
.deco-editing .site-deco__item {
  pointer-events: auto; cursor: grab; opacity: .9 !important;
  outline: 1.5px dashed rgba(185,138,59,.9); outline-offset: 2px;
}
.deco-editing .site-deco__item:hover { outline-color: #B98A3B; }
.deco-editing .site-deco__item.is-drag { cursor: grabbing; outline-style: solid; }
.deco-edit__handle {
  position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
  background: #B98A3B; border: 2px solid #fff; border-radius: 50%;
  cursor: nwse-resize; pointer-events: auto; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* 各itemの操作バー（反転・複製・削除） */
.deco-edit__bar {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  display: flex; gap: 3px; pointer-events: auto; white-space: nowrap;
}
.deco-edit__bar button {
  font: 12px/1 system-ui, sans-serif; width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid #B98A3B; background: #fff; color: #7a5a20; border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center;
}
.deco-edit__bar button:hover { background: #B98A3B; color: #fff; }
.deco-edit__hud {
  position: fixed; top: 12px; right: 12px; z-index: 9999;
  width: 300px; max-height: 92vh; overflow: auto;
  background: rgba(255,255,255,.97); border: 1px solid #d8d8d8; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 12px; font: 12px/1.5 system-ui, sans-serif; color: #333;
}
.deco-edit__hud h4 { margin: 0 0 6px; font-size: 13px; }
.deco-edit__hud p  { margin: 0 0 8px; color: #666; }
.deco-edit__hud button {
  font: inherit; padding: 7px 10px; margin: 0 6px 6px 0; cursor: pointer;
  border: 1px solid #B98A3B; background: #B98A3B; color: #fff; border-radius: 6px;
}
.deco-edit__hud button.ghost { background: #fff; color: #B98A3B; }
.deco-edit__hud textarea {
  width: 100%; height: 150px; margin-top: 8px; font: 11px/1.4 ui-monospace, monospace;
  border: 1px solid #ccc; border-radius: 6px; padding: 6px; resize: vertical;
}
@media (prefers-reduced-motion: reduce) {
  .site-deco__item { transform: none !important; } /* パララックス停止（JS側でも抑制） */
}

/* ---------- about（縦書き見出し＋写真） ---------- */
.site-about { display: flex; flex-direction: column; gap: 32px; align-items: center; }
/* align-self:flex-start でモバイル=左寄せ、PC(row)=上揃え を1指定で両立 */
.site-about__ttl { align-self: flex-start; }
.site-about__text { max-width: 560px; }
.site-about__text p { margin-bottom: 16px; font-size: 16px; }
.site-about__meta { margin: 2px 0 20px; }
.site-about__figure { position: relative; width: 100%; max-width: 380px; }
.site-about__figure::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0; transform: translate(14px, 14px);
  border: 1px solid #D6C08A; border-radius: 6px;
}
.site-about__img {
  position: relative; z-index: 1;
  border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5;
}
.site-about__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: 6px; }
@media (min-width: 1024px) { /* 2カラム化は1024〜（タブレット768〜1023は縦1カラム中央） */
  .site-about { flex-direction: row; justify-content: center; align-items: flex-start; gap: 5vw; }
  .site-about__ttl { order: 1; }
  .site-about__text { order: 2; flex: 0 1 480px; margin-top: 14px; }
  /* 写真の高さをテキストに揃える（PC）：枠内で縦に伸縮＋cover */
  .site-about__figure { order: 3; flex: 0 1 380px; margin-top: 14px; align-self: stretch; }
  .site-about__img { aspect-ratio: auto; height: 100%; }
}

/* ---------- 選ばれる理由（軽い列挙） ---------- */
.site-head { text-align: center; margin-bottom: 44px; }
.site-head__en {
  font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .3em;
  color: #8C6420; text-transform: uppercase;
}
.site-head__title { margin-top: 6px; }

/* 背景の模様は無し・生成り地のまま */
.site-reason-sec { background-color: #F7F9F4; }
/* SPは1列。花フレーム(::before)はSVGマスクが箱の内側に余白を持つ＝実描画の花は箱より小さいので、
   箱が少し重なっても花同士は重ならない。414/430px以上は下の68px（承認済みの見た目）を維持し、
   400px以下（375/390）だけ狭い画面で間延びして見えるのを解消するため大きく詰める（下の@media）。
   ≥768（3列）では下の 2vw に上書き＝PC/1920の見た目は不変。 */
.site-reasons { display: grid; gap: 68px; max-width: 1040px; margin-inline: auto; }
/* 極狭幅(≤400px：iPhone SE/mini/標準)だけカード間を詰める。414px以上は上の68pxのまま。 */
@media (max-width: 400px) {
  .site-reasons { gap: 28px; }
}
/* 各項目を frame.svg（八弁の花フレーム）でカード化。色は CSS mask で調整可 */
.site-reason {
  position: relative; isolation: isolate; text-align: center;
  padding: 64px 26px 58px;
}
/* 花フレームは実要素(.site-reason__frame)に当てる。CueZilla AddCssInfo が ::before/::after の content を除去する(R-27)ため、擬似要素では実機で描画されない。 */
.site-reason__frame {
  content: ""; position: absolute; inset: -8% -3%; z-index: -1;
  background-color: #EEF3EC;
  -webkit-mask: var(--omi-frame-mask) center / contain no-repeat;
  mask: var(--omi-frame-mask) center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(63, 107, 63, .10));
}
.site-reason__no {
  font-family: 'Jost', sans-serif; font-size: 14px; letter-spacing: .28em; color: #8C6420;
}
.site-reason__title { margin: 10px 0 10px; }
.site-reason__text { font-size: 16px; max-width: 300px; margin-inline: auto; }
@media (min-width: 768px) {
  .site-reasons { grid-template-columns: repeat(3, 1fr); gap: 2vw; }
}

/* ---------- できること（緑ベタ・参考サイトWORKS準拠） ---------- */
.site-service { background: #3F6B3F; color: #FFFFFF; padding: 84px 0 150px; position: relative; }
.site-service__copy { display: flex; justify-content: center; margin-bottom: 8px; }
.site-service__copy svg { width: min(420px, 86vw); height: auto; overflow: visible; }
.site-service__en {
  text-align: center;
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 46px; letter-spacing: .26em; line-height: 1.2; color: #FFFFFF;
}
.site-service__title { text-align: center; margin-top: 14px; }
.site-service__grid { display: flex; flex-direction: column; gap: 32px; margin-top: 48px; align-items: center; }
.site-service__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
/* ピル内の改行：SP(≤767)のみ有効化して指定位置で2行に。≥768は非表示＝PC/1920は1行のまま不変 */
.u-sp-br { display: none; }
@media (max-width: 767px) { .u-sp-br { display: inline; } }
/* SPのピルは指定位置以外で折れないよう語中改行を抑制（熟語を保つ） */
@media (max-width: 767px) { .site-service__list li { word-break: keep-all; line-break: strict; } }
/* 375未満（SE等）は字間・サイズを僅かに詰め、2行を維持（375以上は不変）。
   ベース(.site-service__list li)より後・高特異度で確実に適用。 */
@media (max-width: 374px) {
  .site-service .site-service__list li { font-size: 13.5px; letter-spacing: .05em; }
}
.site-service__list li {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 24px;
  min-height: 48px; padding: 8px 12px; text-align: center;
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 600; letter-spacing: .16em; line-height: 1.2; color: #FFFFFF;
  -webkit-text-stroke: .3px currentColor; text-stroke: .3px currentColor; paint-order: stroke fill;
}
.site-service__text { max-width: 520px; }
.site-service__text > p { font-size: 16px; margin-bottom: 24px; color: #F2F7F0; }
/* 画像は About と体裁を揃える：縦長クロップ＋金茶オフセット枠（写真と同サイズ）＋リビール */
.site-service__figure { position: relative; width: 100%; max-width: 380px; }
.site-service__figure::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0; transform: translate(14px, 14px);
  border: 1px solid #D6C08A; border-radius: 6px;
}
.site-service__img { position: relative; z-index: 1; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; }
.site-service__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: 6px; }
@media (min-width: 768px) {
  .site-service { padding: 110px 0 190px; }
  .site-service__en { font-size: 60px; }
  .site-service__grid { flex-direction: row; justify-content: center; gap: 5vw; align-items: flex-start; }
  .site-service__figure { flex: 0 1 380px; }
  .site-service__list li { font-size: 15px; }
}

/* ---------- 求人（淡藍・縦書き見出し） ---------- */
.site-recruit { padding: 72px 0; }
.site-recruit__grid { display: flex; flex-direction: column; gap: 32px; align-items: center; }
.site-recruit__ttl { align-self: flex-start; }
.site-recruit__text { max-width: 560px; }
.site-recruit__text p { margin-bottom: 16px; font-size: 16px; }
/* 写真は About と体裁を揃える：金茶の1pxオフセット枠（影的な罫線） */
.site-recruit__img { position: relative; width: 100%; max-width: 380px; }
.site-recruit__img::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0; transform: translate(14px, 14px);
  border: 1px solid #D6C08A; border-radius: 6px;
}
.site-recruit__img img { position: relative; z-index: 1; border-radius: 6px; }
.site-recruit .site-btn { margin-top: 26px; }
@media (min-width: 1024px) { /* 2カラム化は1024〜（タブレット768〜1023は縦1カラム中央） */
  .site-recruit { padding: 110px 0; }
  .site-recruit__grid { flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: 5vw; }
  .site-recruit__ttl { order: 1; }
  .site-recruit__text { order: 2; flex: 0 1 480px; margin-top: 14px; }
  /* 写真の高さをテキストに揃える（PC）：枠内で縦に伸縮＋cover */
  .site-recruit__img { order: 3; flex: 0 1 380px; margin-top: 14px; align-self: stretch; }
  .site-recruit__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
}

/* ---------- ブログ ---------- */
.site-blog { text-align: center; }
/* Blogは見出し→リードを詰め、リード→カードを広げる（バランス調整） */
.site-blog .site-head { margin-bottom: 14px; }
/* 見出し→リードは詰め(14px)、リード→カードは広め(48px)でメリハリ */
.site-blog__lead { max-width: 620px; margin: 0 auto 48px; font-size: 16px; }
.site-blog .site-btn-mini { margin-inline: auto; margin-top: 28px; }

/* ---------- 相談ボックス（参考サイト consultation 準拠） ---------- */
.site-consult {
  background-color: #2F5230; /* 画像読込失敗時のフォールバック */
  background-image:
    linear-gradient(100deg, rgba(24, 40, 24, .90) 0%, rgba(40, 66, 40, .82) 55%, rgba(47, 82, 48, .78) 100%),
    url(https://cdn.cuezilla-cms.com/omizouen.com/images/584/cta-garden.webp);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  margin-left: 8vw; margin-top: 60px;
  border-top-left-radius: 40px; border-bottom-left-radius: 40px;
  padding: 64px 6vw 60px 6vw;
}
.site-consult__inner { display: flex; flex-direction: column; gap: 28px; max-width: 1040px; margin-inline: auto; }
/* コピー（文字領域）の最大幅を全ページ共通に固定＝ボタン幅（--fit/--even）に依存せず行長を揃える。
   トップ/採用/work は手動<br>で既に480px未満＝影響なし。 */
.site-consult__copy { max-width: 480px; }
.site-consult__copy p { margin-top: 14px; font-size: 16px; color: #EAF1E7; }
.site-consult__links { display: flex; flex-direction: column; gap: 22px; }
.site-consult__minis { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: fit-content; }
/* よくあるご質問⇔採用については詰める（採用⇔お問い合わせの間隔は下の要素ごと一緒に動くので不変） */
.site-consult__minis .site-btn-mini + .site-btn-mini { margin-top: -6px; }
/* テキスト左・円右（space-between）で2つのボタン幅を揃え、●を右端で整列。
   円は小さく（44px）＝操作列の高さも詰まる。矢印中心も円中心(右22px)に一致 */
.site-consult__minis .site-btn-mini { width: auto; justify-content: space-between; }
.site-consult__minis .site-btn-mini::before { width: 44px; height: 44px; background: #FFFFFF; }
.site-consult__minis .site-btn-mini::after { right: 18px; }
/* 背景が濃緑の写真になったので、ミニの文字は白（hover含む）。円は白のまま＝濃緑地に映える */
.site-consult__minis .site-btn-mini,
.site-consult__minis .site-btn-mini:hover { color: #FFFFFF; }
/* hover：白円override に勝たせて円を緑・矢印を白に（＞が消えないように明示） */
.site-consult__minis .site-btn-mini:hover::before { background: #3F6B3F; }
/* 大ボタンは濃緑地から浮かせて目立たせる＋色反転（白地・深緑文字） */
.site-consult .site-btn {
  background: #FFFFFF; color: #2F5230;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
}
.site-consult .site-btn:hover { background: #EEF3EC; color: #2F5230; }
/* 反転に伴い丸は深緑・矢印は白に */
.site-consult .site-btn::before { background: #2F5230; }
.site-consult .site-btn::after { border-top-color: #FFFFFF; border-right-color: #FFFFFF; }
/* 下層CTAで2ボタンを同幅に＋文字を折り返さない（トップ/採用の単一ボタンには付与しない） */
.site-consult__links--even .site-btn { width: 100%; white-space: nowrap; }
/* --fit：ボタンを枠いっぱいに伸ばさず「最も広いラベルの幅」で揃える（--evenの全幅ストレッチの代替）。
   コンテナを最大内容幅に収縮＋子を width:100% で、単一ボタンは内容幅・複数ボタンは最大幅に統一。 */
/* 複合セレクタ（2クラス）で後方の基底 .site-consult__links{flex:0 0 min(480px,44%)} に詳細度で勝つ。
   単一の --fit だけだと基底と同詳細度＝後勝ちで全幅のままになる。 */
.site-consult__links.site-consult__links--fit { width: max-content; max-width: 100%; align-self: center; }  /* align-self:center＝親のstretchを解除し内容幅を有効化 */
.site-consult__links--fit .site-btn { width: 100%; white-space: nowrap; }
@media (min-width: 1024px) {
  /* PCは「文章＝左／ボタン＝右カラム」の横並び。右カラム(min(480px,44%))の“左端”に左揃え
     （トップの よくあるご質問 と左端一致）。grid の max-content 列＋子 width:100% で、
     縦に2つ以上並ぶボタンは幅を最も長い方に統一（＝スッキリ揃う）。 */
  .site-consult__links.site-consult__links--fit {
    flex: 0 0 min(480px, 44%); align-self: flex-start; margin-left: 0; width: auto; max-width: none;
    display: grid; grid-template-columns: max-content; justify-content: start; gap: 22px;
  }
  .site-consult__links--fit .site-btn { width: 100%; min-width: 200px; }
}
@media (min-width: 1024px) { /* 2カラム化は1024〜（タブレット768〜1023は縦1カラム中央） */
  /* パララックス：PCのみ背景固定（モバイル・タブレットはiOSで崩れるため通常スクロール） */
  .site-consult { margin-top: 110px; padding: 80px 6vw 76px 6vw; background-attachment: fixed; }
  /* 左コピーは上、右ボタンは下へオフセット（対角の抜け） */
  .site-consult__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6vw; }
  .site-consult__links { flex: 0 0 min(480px, 44%); margin-top: 40px; }
}

/* ---------- 会社情報・アクセス ---------- */
.site-access { display: flex; flex-direction: column; gap: 24px; }
.site-access__info h2 { margin-bottom: 14px; }
.site-access__info p { font-size: 16px; line-height: 2.2; }
.site-access__info a { color: #3F6B3F; }
/* 電話番号はフッター（.sf-footer__tel）と同じ体裁：Jost 30px・下線なし */
.site-access__info .site-access__tel { font-family: 'Jost', sans-serif; font-size: 30px; font-weight: 400; line-height: 1.2; color: #3F6B3F; margin: 6px 0 10px; }
.site-access__tel span { font-size: 15px; margin-right: 6px; }
.site-access__map { border-radius: 6px; overflow: hidden; border: 1px solid #E4EBDF; }
.site-access__map iframe { display: block; width: 100%; height: 300px; border: 0; }
@media (min-width: 1024px) { /* 2カラム化は1024〜（タブレット768〜1023は縦1カラム中央） */
  .site-access { flex-direction: row; align-items: stretch; gap: 5vw; }
  .site-access__info { flex: 1; }
  .site-access__map { flex: 1.4; }
  .site-access__map iframe { height: 100%; min-height: 320px; }
}

/* ============ タブレット・スマホ：セクション見出し(h2)をデバイス中央寄せ ============
   Reason/Blog/Service は元から中央。左揃えだった h2 を中央に統一する。
   会社紹介・採用・会社情報・相談CTA は2カラム化を各セクション側で ≥1024 に上げたので、
   ≤1023（タブレット・スマホ）は縦1カラム積み＝見出しをデバイス中央に置ける。
   ・横書きh2（会社情報・相談CTA）：text-align:center。
   ・縦書きh2（会社紹介・採用 = .site-tate）：縦積み時に align-self:center。 */
@media (max-width: 1023px) {
  /* 見出し＋その下の本文をまとめて中央（見出しに対して本文が左過ぎるのを解消） */
  .site-consult__copy,
  .site-access__info { text-align: center; }
  .site-consult__copy { margin-inline: auto; }   /* max-width:480のコピー塊を中央に */
  .site-consult__links { align-items: center; }   /* CTAのボタン群も中央 */
  .site-about__ttl,
  .site-recruit__ttl { align-self: center; }
}
/* タブレット(768〜1023) 1カラム時：about/採用の写真の左端をテキスト(最大560)の左端に揃える。
   calc((100% - 560px)/2)=テキストの左オフセットに写真を合わせる（幅追従・写真幅は380のまま）。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-about__figure,
  .site-recruit__img {
    align-self: flex-start;
    margin-left: calc((100% - 560px) / 2);
    margin-right: auto;
  }
}

/* ============================================================
   下層ページ共通（xw-）
   ============================================================ */
.xw-pagehead {
  background-color: #F7F9F4;
  text-align: center;
  padding: 130px 24px 56px;
}
.xw-pagehead__en {
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .34em;
  color: #8C6420; text-transform: uppercase;
}
.xw-pagehead__title {
  font-size: 23px; font-weight: 600; letter-spacing: .12em; line-height: 1.7;
  color: #3F6B3F; margin-top: 6px;
}
.xw-pagehead__lead { max-width: 720px; margin: 14px auto 0; font-size: 16px; text-align: left; }
@media (min-width: 768px) {
  .xw-pagehead { padding: 170px 24px 72px; }
  .xw-pagehead__title { font-size: 30px; }
  .xw-pagehead__lead { text-align: center; }
}

/* ============================================================
   下層ヒーロー（八弁花クレスト＋縦書きページ名／採用FVを軽量流用・全下層共通ヘッダー）
   採用にあった左右の縦書きは無し。花SVGの下に英字＋文章を添える。
   ============================================================ */
.xw-hero { text-align: center; background-color: #F7F9F4; padding: 116px 24px 60px; }
.xw-hero__crest {
  position: relative; display: inline-grid; place-items: center;
  width: min(220px, 56vw); aspect-ratio: 724 / 701; margin: 0 auto;
}
.xw-hero__blossom {
  position: absolute; inset: 0;
  -webkit-mask: var(--omi-frame-mask) center / contain no-repeat;
  mask: var(--omi-frame-mask) center / contain no-repeat;
}
/* 花は1枚（2重にしない）・色はゴールド */
.xw-hero__blossom--front { background: #B98A3B; filter: drop-shadow(0 12px 26px rgba(63, 107, 63, .16)); }
.xw-hero__crest-text {
  position: relative; z-index: 1;
  writing-mode: vertical-rl; text-orientation: mixed; font-feature-settings: "vkna" 1, "pkna" 1;
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.8vw, 25px); font-weight: 600; letter-spacing: .3em; line-height: 1; color: #3F6B3F;
}
/* 花形内が6文字以上のページ＝縦書きを2列に（<br>で改列）。縦書きの line-height＝列の幅なので
   列が重ならないよう広げる。1列ページ（4文字）には付けない。 */
/* text-align:start＝縦書き(vertical-rl)では上端揃え。.xw-hero の text-align:center を継承すると
   短い列が縦中央に落ちるため、2列は上揃えに戻す。 */
.xw-hero__crest-text--2col { line-height: 1.9; text-align: start; }
.xw-hero__en {
  margin: 24px 0 0; font-family: 'Jost', sans-serif; text-transform: uppercase;
  font-size: 13px; font-weight: 500; letter-spacing: .34em; color: #8C6420;
}
.xw-hero__title {
  margin: 10px auto 0; max-width: 24em;
  font-family: var(--font-heading);
  font-size: clamp(21px, 3.2vw, 29px); font-weight: 600; letter-spacing: .08em; line-height: 1.7; color: #3F6B3F;
}
.xw-hero__lead { margin: 16px auto 0; max-width: 620px; font-size: 16px; line-height: 1.95; color: #3C4438; text-align: center; }
@media (min-width: 768px) { .xw-hero { padding: 150px 24px 78px; } }

/* 業務カード（角丸写真＋金茶ドット見出し・3×2グリッド）。テキスト羅列をやめ写真主役に */
.xw-worklist { display: grid; grid-template-columns: 1fr; gap: 38px 3vw; margin-top: 6px; }
@media (min-width: 600px) { .xw-worklist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .xw-worklist { grid-template-columns: repeat(3, 1fr); } }
.xw-workitem__img { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 10px 24px rgba(63, 107, 63, .10); }
.xw-workitem__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.xw-workitem:hover .xw-workitem__img img { transform: scale(1.04); }
.xw-workitem__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 19px; font-weight: 600; letter-spacing: .06em; color: #3F6B3F; margin: 18px 0 8px; }
.xw-workitem__title::before { content: ""; flex: none; width: 8px; height: 8px; background: #B98A3B; border-radius: 50%; }
.xw-workitem__text { font-size: 15px; line-height: 1.9; color: #3C4438; }

/* パンくず：背景は全幅・内容は1120px中央寄せ（padding-inlineで中央化）。
   旧・max-width:1120は背景も1120幅→左右にbody(白)が露出（ワイド画面で白帯）。全幅生成りで解消。 */
.p-breadcrumb { max-width: none; margin-inline: 0; padding: 10px max(24px, calc((100% - 1120px) / 2)); font-size: 12px; color: #5D6B54; }
/* cuezilla-skin が白(--dyn-bg)を!importantで敷くのを上書きし、生成り地に馴染ませる（全ページ共通） */
.p-breadcrumb.c-breadcrumb { background: #F7F9F4 !important; }
.p-breadcrumb__inner { display: flex; flex-wrap: wrap; gap: 4px; }
.p-breadcrumb__item { display: inline-flex; align-items: center; }
.p-breadcrumb__item + .p-breadcrumb__item::before { content: "›"; margin: 0 8px; color: #B0BCAA; }
.p-breadcrumb__item a { color: #5D6B54; }
.p-breadcrumb__item a:hover { color: #3F6B3F; text-decoration: underline; }

/* セクション */
.xw-sec { padding: 52px 0; }
.xw-sec--cream { background-color: #F7F9F4; }
.xw-sec--green { background-color: #EEF3EC; }
.xw-sec--blue { background-color: #E9F1F3; }
@media (min-width: 768px) { .xw-sec { padding: 76px 0; } }

/* 下層セクションの区切り曲線＝トップ SERVICE の非対称波を流用（アシンメトリ・コンテンツ非依存の固定形状）。
   使い方：下側セクションに class="xw-sec xw-sec--green bgc bgband"。波は上のセクションへせり上がる。 */
/* カーブ全体を境界より上へ確実に持ち上げ、帯の直線的上端が露出しないように（谷を境界の上に収める）。
   vh圧縮＝波を緩やかにしつつ、-top を谷の深さ以上に取る。 */
.xw-sec.bgc { --bgc-vh: 120; --bgc-top: -7.2vw; }
.xw-sec--cream.bgband { --band: #F7F9F4; }
.xw-sec--green.bgband { --band: #EEF3EC; }
.xw-sec--blue.bgband  { --band: #E9F1F3; }
.xw-sec--cream.bgc { --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1436 532' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F9F4' d='M 0 387.22 C 90.6 414.15 320.46 419.54 515.18 225.59 C 758.56 -16.84 957.33 33.67 1079.03 67.34 C 1200.72 101.01 1306.19 168.35 1436 0 C 1436 382.5 1436 514.04 1436 532 L 0 532 L 0 387.22 Z'/%3E%3C/svg%3E"); }
.xw-sec--green.bgc { --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1436 532' preserveAspectRatio='none'%3E%3Cpath fill='%23EEF3EC' d='M 0 387.22 C 90.6 414.15 320.46 419.54 515.18 225.59 C 758.56 -16.84 957.33 33.67 1079.03 67.34 C 1200.72 101.01 1306.19 168.35 1436 0 C 1436 382.5 1436 514.04 1436 532 L 0 532 L 0 387.22 Z'/%3E%3C/svg%3E"); }
.xw-sec--blue.bgc { --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1436 532' preserveAspectRatio='none'%3E%3Cpath fill='%23E9F1F3' d='M 0 387.22 C 90.6 414.15 320.46 419.54 515.18 225.59 C 758.56 -16.84 957.33 33.67 1079.03 67.34 C 1200.72 101.01 1306.19 168.35 1436 0 C 1436 382.5 1436 514.04 1436 532 L 0 532 L 0 387.22 Z'/%3E%3C/svg%3E"); }

/* 見出し */
.xw-h2 {
  font-size: 21px; font-weight: 600; letter-spacing: .12em; line-height: 1.7;
  color: #3F6B3F;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 26px;
}
.xw-h2::after { content: ""; width: 46px; height: 2px; background: #B98A3B; }
.xw-h3 {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: .08em; color: #3F6B3F;
  margin: 26px 0 10px;
}
.xw-h3::before {
  content: ""; width: 9px; height: 9px; flex: none; align-self: center;
  background: #B98A3B; border-radius: 50%;
}
@media (min-width: 768px) {
  .xw-h2 { font-size: 25px; }
  .xw-h3 { font-size: 18px; }
}

/* 本文パーツ */
.xw-body p { margin-bottom: 14px; }
.xw-lead { font-size: 16px; }
.xw-list { margin: 10px 0 18px; }
.xw-list li { position: relative; padding-left: 24px; margin-bottom: 18px; line-height: 2; }
.xw-list li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 10px; height: 10px;
  background: #3F6B3F; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.xw-meta {
  font-size: 13px;
  background: #EEF3EC; border-radius: 6px; padding: 10px 14px; margin: 8px 0 16px;
}
.xw-photo { margin: 16px 0 22px; }
.xw-photo img { border-radius: 6px; width: 100%; object-fit: cover; }
.xw-photo figcaption { font-size: 13px; color: #5D6B54; margin-top: 8px; }
.xw-photo-note {
  border: 1px dashed #9FB295; border-radius: 6px;
  background: #EEF3EC; color: #5D6B54;
  font-size: 13px; text-align: center; padding: 22px 16px; margin: 14px 0 22px;
}

/* テーブル */
.xw-scroll { overflow-x: auto; margin: 16px 0 20px; }
.xw-table { width: 100%; min-width: 480px; font-size: 15px; background: #FFFFFF; }
.xw-table th, .xw-table td { border: 1px solid #E4EBDF; padding: 17px 20px; line-height: 1.85; text-align: left; vertical-align: top; }
.xw-table th { background: #EEF3EC; color: #2F5230; font-weight: 700; white-space: nowrap; }
.xw-table--plain { min-width: 0; }

/* 2カラム（写真＋本文） */
.xw-media { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.xw-media__img { border-radius: 6px; overflow: hidden; }
.xw-media__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .xw-media { flex-direction: row; align-items: flex-start; gap: 40px; }
  .xw-media--rev { flex-direction: row-reverse; }
  .xw-media__img { flex: 1; }
  .xw-media__body { flex: 1.3; }
}

/* カード */
.xw-cards { display: grid; gap: 18px; margin: 8px 0 20px; }
.xw-card {
  background: #FFFFFF; border: 1px solid #E4EBDF; border-radius: 6px;
  padding: 24px 22px;
}
.xw-card__title { font-size: 16.5px; font-weight: 600; letter-spacing: .08em; color: #3F6B3F; margin-bottom: 8px; }
.xw-card__text { font-size: 16px; }
@media (min-width: 768px) { .xw-cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* FAQ */
.xw-faq { border-bottom: 1px solid #E4EBDF; }
.xw-faq summary {
  display: flex; align-items: baseline; gap: 12px;
  min-height: 48px; padding: 14px 34px 14px 0;
  font-weight: 600; cursor: pointer;
  list-style: none; position: relative;
}
.xw-faq summary::-webkit-details-marker { display: none; }
.xw-faq summary::before {
  content: "Q"; flex: none; align-self: flex-start;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #3F6B3F; color: #FFFFFF; font-family: 'Jost', sans-serif; font-size: 14px;
}
.xw-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid #3F6B3F; border-bottom: 2px solid #3F6B3F;
  transform: rotate(45deg); transition: transform .2s ease;
}
.xw-faq[open] summary::after { transform: rotate(-135deg); }
.xw-faq__a { display: flex; gap: 12px; padding: 2px 0 18px; }
.xw-faq__a::before {
  content: "A"; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #8C6420; color: #FFFFFF; font-family: 'Jost', sans-serif; font-size: 14px;
}
.xw-faq__a p { flex: 1; }

/* ステップ（応募の流れ） */
.xw-steps { counter-reset: xwstep; margin: 12px 0 20px; }
.xw-steps li {
  counter-increment: xwstep;
  position: relative; padding: 0 0 22px 52px;
}
.xw-steps li::before {
  content: counter(xwstep, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #3F6B3F; color: #FFFFFF;
  font-family: 'Jost', sans-serif; font-size: 14px;
}
.xw-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 42px; bottom: 4px;
  width: 1px; background: #B0C4AC;
}
.xw-steps li strong { display: block; font-size: 16px; color: #2F5230; }
.xw-steps li span { font-size: 16px; }

/* CTA帯（下層） */
.xw-cta { text-align: center; }
.xw-cta__title {
  font-size: 20px; font-weight: 600; letter-spacing: .12em; line-height: 1.8;
  color: #3F6B3F; margin-bottom: 14px;
}
.xw-cta p { max-width: 640px; margin: 0 auto 22px; }
.xw-cta .site-btn { margin-inline: auto; }
.xw-cta .site-btnrow { display: flex; flex-direction: column; gap: 14px; align-items: center; }
@media (min-width: 768px) {
  .xw-cta__title { font-size: 25px; }
  .xw-cta .site-btnrow { flex-direction: row; justify-content: center; }
  .xw-cta .site-btnrow .site-btn { width: auto; min-width: 300px; }
}
/* 汎用ボタン行（施工実績の2ボタン等）：スマホ縦並び／PC・タブレット(≥768)は横並び。両方とも同幅。 */
.site-btnrow { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 24px; }
.site-btnrow .site-btn { width: 100%; max-width: 300px; }  /* スマホ：縦並びでも同幅（最大300・中央） */
@media (min-width: 768px) {
  .site-btnrow { flex-direction: row; justify-content: center; gap: 20px; }
  .site-btnrow .site-btn { flex: 0 0 300px; width: auto; }  /* PC・タブ：横並び・同幅300px */
}

/* ============================================================
   求職者のみなさまへ（rc-）─ ストーリー型LP（トップと同等の和トーン）
   ・トップの設計言語を踏襲：縦書きキャッチ／有機的な波の区切り／面色交互／
     金茶オフセット枠の写真／Klee One 肉厚見出し／七宝地紋。
   ・波の区切りは bgc/bgband（トップと共有）。各章に --band と --bgc-img を持たせる。
   ============================================================ */

/* ---- FV：中央に八弁花クレスト（frame.svg流用／中に縦書き「採用サイト」）、左右に縦書きコピー、下にRECRUIT。
       下層ヘッダーに緑トーンの写真を薄く敷き、下へフェード（採用ページのみ）。 ---- */
.rc-hero { position: relative; overflow: hidden; min-height: 84svh;
  background:
    radial-gradient(54% 48% at 50% 44%, rgba(63, 107, 63, .10) 0%, rgba(63, 107, 63, 0) 62%),
    #F7F9F4;
}
/* FV背景レイヤー（写真＋深緑暗幕）。PC=全面absolute、スマホ=上部の低い帯（下参照）。
   js-onheader-dark はこのレイヤーだけに付与＝写真の上でのみロゴ白抜き（下の文章帯=生成りでは黒）。 */
.rc-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* FV写真：原色のまま活かす（暗幕は::after）。下端だけ生成りへ“緩やかに”溶かして次節へ繋ぐ。
   フェード開始を早め(45%)・終端(100%)まで長く取り、境目が見えないなだらかなグラデーションに。 */
.rc-hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url(https://cdn.cuezilla-cms.com/omizouen.com/images/584/recruit-hero-bg.webp);
  background-size: cover; background-position: 72% 52%;   /* 左側を足したワイド写真(2.5:1)。職人を右寄せ・中央左は生垣＝縦書き文字と人物を離す */
  filter: saturate(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%);
}
/* 文字可読性のための暗幕。黒ではなく深緑(#14341C系)で写真に緑の落ち着きを与える。
   上下をやや濃く・中央は薄く＝写真は活かす。写真と同じ下端フェードで生成りへ溶ける部分は暗幕もかけない。 */
.rc-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 52, 28, .42) 0%, rgba(20, 52, 28, .16) 42%, rgba(20, 52, 28, .32) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%);
}
.rc-hero__inner {
  position: relative; z-index: 2; max-width: 1160px; margin-inline: auto; min-height: 84svh;
  padding: 128px 24px 64px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center;
}

/* 構成：左テキスト｜花クレスト｜右テキスト。
   align-items:center＝左右テキストは花マークに対して縦センター（全体もセンター揃え）。
   文章自体（各ブロック内の2列）は .rc-hero__side の flex-start で上揃えのまま。 */
.rc-hero__composition { margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(16px, 3.6vw, 52px); }
/* 左右の縦書きコピー（各2列・上揃え。row-reverseで右→左の読み順） */
.rc-hero__side { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: clamp(5px, 1.2vw, 12px); }
.rc-hero__side > span {
  writing-mode: vertical-rl; font-feature-settings: "pkna" 1; text-orientation: mixed;
  font-family: var(--font-heading);
  font-size: clamp(17px, 2.2vw, 23px); font-weight: 600; letter-spacing: .1em; line-height: 1.7; color: #FFFFFF;
  -webkit-text-stroke: .5px rgba(0, 0, 0, .38); text-stroke: .5px rgba(0, 0, 0, .38); paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72), 0 2px 18px rgba(0, 0, 0, .72), 0 0 8px rgba(0, 0, 0, .58);   /* 白文字の光彩（暗い縁取り＋ぼかし） */
}
/* 八弁花クレスト：frame.svg を CSSマスクで花型に。前=緑枠／後=金茶オフセット枠（トップReasonカード踏襲） */
.rc-hero__crest { position: relative; flex: none; width: min(400px, 52vw); aspect-ratio: 724 / 701; display: grid; place-items: center; }
.rc-hero__blossom {
  position: absolute; inset: 0;
  -webkit-mask: var(--omi-frame-mask) center / contain no-repeat;
  mask: var(--omi-frame-mask) center / contain no-repeat;
}
.rc-hero__blossom--front { background: #FFFFFF; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .38)); }
/* クレスト内の縦書き「採用サイト」 */
.rc-hero__crest-text {
  position: relative; z-index: 1;
  writing-mode: vertical-rl; font-feature-settings: "vkna" 1, "pkna" 1; text-orientation: mixed;
  font-family: var(--font-hero, var(--font-heading));
  font-size: clamp(20px, 2.8vw, 28px); font-weight: 600; letter-spacing: .2em; line-height: 1; color: #FFFFFF;
  -webkit-text-stroke: .5px rgba(0, 0, 0, .38); text-stroke: .5px rgba(0, 0, 0, .38); paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72), 0 2px 18px rgba(0, 0, 0, .72), 0 0 8px rgba(0, 0, 0, .58);
}
/* SVGの下：RECRUIT 英字（花マークから離す＝margin-top大きめ） */
.rc-hero__en {
  margin: 84px 0 0; font-family: 'Jost', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(17px, 2vw, 23px); letter-spacing: .36em; color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72), 0 2px 18px rgba(0, 0, 0, .72), 0 0 8px rgba(0, 0, 0, .58);
}
/* ---- スマホ：写真は上部の低い帯にとどめ、文章＋花クレストは画像の下（生成り地）に配置。
        生成り地に載るので白文字→濃色（緑）に切替し光彩は解除。 ---- */
@media (max-width: 767px) {
  .rc-hero { min-height: 0; }
  .rc-hero__bg { position: relative; height: 38vh; min-height: 190px; }
  .rc-hero__inner { min-height: 0; padding: 32px 20px 48px; gap: 16px; }
  /* 見出しが狭い画面でガターにパツパツ→クレストと列間を詰めて左右に余白を確保（393で左右≒28px） */
  .rc-hero__composition { gap: clamp(8px, 3vw, 16px); }
  .rc-hero__crest { width: min(400px, 47vw); }
  .rc-hero__side > span,
  .rc-hero__crest-text {
    color: #3F6B3F;
    -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none;
  }
  .rc-hero__blossom--front { background: #3F6B3F; filter: none; }
  .rc-hero__en { margin-top: 48px; color: #8C6420; text-shadow: none; }
}

/* ---- 共感リード：無地・縦書き掛け軸・段落グループ（右から左へ4グループ） ---- */
/* 背景は bgband の ::before（z-index:-1・最背面）で塗る＝下のch1の波(::after 同レイヤー)が上に乗り、
   区切りが波形に見える。要素自体に背景(site-bg-cream)を塗ると波を隠して直線に見えるため bgband 方式に。 */
.rc-empathy { position: relative; text-align: center; --band: #F7F9F4; } /* position:relative＝::before/::after配置基準 */
.rc-empathy .site-inner { display: flex; justify-content: center; }
/* グループ間はflex gapで広く、グループ内の2列はline-heightで近く＝空行の間合いを表現 */
.rc-empathy__lead { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: clamp(1.5em, 4vw, 3em); }
.rc-empathy p {
  writing-mode: vertical-rl; font-feature-settings: "pkna" 1; text-orientation: mixed;
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 600; line-height: 1.9; letter-spacing: .12em; color: #3F6B3F;
  -webkit-text-stroke: .3px currentColor; text-stroke: .3px currentColor; paint-order: stroke fill;
  margin: 0;
  text-align: start; /* 縦書きでは各列を上端そろえに（既定のcenter継承だと短い列が縦中央に落ちる） */
}
@media (min-width: 768px) { .rc-empathy p { font-size: 22px; line-height: 2.0; } }
/* 共感リードは bgc を外しベタ色（#F7F9F4）＝パンくず左の「なぞの波線」を排除。区切り波は下の rc-ch1 が担う。 */

/* ---- 章：中央寄せストーリー・面色＋波＋金茶枠写真 ---- */
.rc-chapter { padding: 84px 0; text-align: center; }
@media (min-width: 768px) { .rc-chapter { padding: 118px 0; } }
/* 章ラベル＝トップのセクション見出し(site-head__en)と同じ見せ方：金茶Jostの英字ラベル（線なし） */
.rc-chapter__no {
  font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .3em; color: #8C6420; text-transform: uppercase;
}
.rc-chapter__catch {
  font-family: var(--font-heading);
  font-size: 25px; font-weight: 600; line-height: 1.85; letter-spacing: .1em; color: #3F6B3F;
  -webkit-text-stroke: .4px currentColor; text-stroke: .4px currentColor; paint-order: stroke fill;
  margin: 16px 0 24px;
}
/* 金茶下線（トップ xw-h2 の下線に準拠・中央寄せ章見出し用に中央配置） */
.rc-chapter__catch::after {
  content: ""; display: block; width: 46px; height: 2px; background: #B98A3B; margin: 22px auto 0;
}
.rc-chapter--green .rc-chapter__catch::after { background: #EAD9A6; } /* 緑地では明るい金茶で視認確保 */
@media (min-width: 768px) { .rc-chapter__catch { font-size: 34px; } }
.rc-chapter__body { max-width: 660px; margin-inline: auto; text-align: left; }
.rc-chapter__body p { margin-bottom: 16px; font-size: 16px; }
/* pull（引用）＝金茶の縦罫線・Klee肉厚 */
.rc-pull {
  font-family: var(--font-heading);
  text-align: center; font-size: 20px; font-weight: 600; line-height: 2; letter-spacing: .14em; color: #3F6B3F;
  -webkit-text-stroke: .4px currentColor; text-stroke: .4px currentColor; paint-order: stroke fill;
  padding: 6px 10px; margin: 36px auto 0;
}
@media (min-width: 768px) { .rc-pull { font-size: 24px; } }

/* 章の写真＝金茶オフセット枠（トップの about/service 図と同じ額装） */
.rc-figure { position: relative; width: 100%; max-width: 640px; margin: 40px auto 0; }
.rc-figure::before { content: ""; position: absolute; inset: 0; z-index: 0; transform: translate(14px, 14px); border: 1px solid #D6C08A; border-radius: 6px; pointer-events: none; }
.rc-figure__img { position: relative; z-index: 1; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; }
.rc-figure__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-figure figcaption { position: relative; z-index: 1; margin-top: 16px; font-size: 12.5px; letter-spacing: .04em; color: #7C8B77; }
/* 写真直後に本文が続くとき、金茶オフセット枠(::before は +14px 下へはみ出す)と文字が重なる。本文に上余白を確保して罫線をよける。 */
.rc-figure + .rc-chapter__body { margin-top: 36px; }

/* 面色バリエーション＋波の区切り（bgc/bgband をトップと共有。fill=その節の色で上へせり上がる） */
/* ---- 章の2カラム版（縦書き見出し＋本文＋写真）＝トップ about/採用 のレイアウトを踏襲 ---- */
.rc-chapter--split { text-align: left; }
.rc-split { display: flex; flex-direction: column; gap: 32px; align-items: center; }
/* display:block＝site-tate(flex)を上書き。flexだと正立数字(rc-tatenum)を含む列だけ
   揃え位置がずれる（他列が1文字分下がる）ため、blockにして全列を上端で揃える。 */
.rc-split__ttl { display: block; align-self: flex-start; }   /* モバイル=左寄せ／PC(row)=上揃え を1指定で両立 */
.rc-split__text { max-width: 560px; }
.rc-split__text > p { margin-bottom: 16px; font-size: 16px; }
.rc-split__text .rc-chapter__no { margin-bottom: 14px; }
/* pull（引用）＝金茶の縦罫線・Klee肉厚（トップのkakejikuに準じた面内アクセント） */
.rc-split__pull {
  font-family: var(--font-heading);
  font-size: 19px; font-weight: 600; line-height: 1.95; letter-spacing: .1em; color: #3F6B3F;
  border-left: 2px solid #B98A3B; padding: 2px 0 2px 16px; margin-top: 26px;
  -webkit-text-stroke: .3px currentColor; text-stroke: .3px currentColor; paint-order: stroke fill;
}
.rc-split .rc-figure { width: 100%; max-width: 380px; margin: 0; }
.rc-split .rc-figure__img { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) { /* 2カラム化は1024〜（タブレット768〜1023は縦1カラム中央） */
  .rc-split { flex-direction: row; justify-content: center; align-items: flex-start; gap: 5vw; }
  .rc-split--rev { flex-direction: row-reverse; }
  .rc-split__ttl { order: 1; }
  .rc-split__text { order: 2; flex: 0 1 480px; margin-top: 6px; }
  .rc-split .rc-figure { order: 3; flex: 0 1 380px; margin-top: 6px; align-self: stretch; }
  .rc-split .rc-figure__img { aspect-ratio: auto; height: 100%; }
}
/* ≤1023（タブレット・スマホ）は縦1カラム積み＝縦書き見出しをデバイス中央に（トップ about/採用 と同仕様）。
   base .rc-split__ttl{align-self:flex-start} を後勝ちで上書きするため rc-split 定義より後に置く。 */
@media (max-width: 1023px) {
  .rc-split__ttl { align-self: center; }
}

/* 季節カード＝トップReasonカード(.site-reason／八弁花frame.svg)を4列で流用（テーブルの代替） */
.rc-seasons { margin-top: 10px; max-width: 1120px; }
/* 花枠は既定#EEF3ECだと03章の薄緑地と同色で消える→白にしてカードを浮かせる */
.rc-seasons .site-reason__frame { background-color: #FFFFFF; filter: drop-shadow(0 10px 20px rgba(63, 107, 63, .12)); }
.rc-seasons .site-reason { padding: 56px 20px 50px; }
.rc-seasons .site-reason__title { font-family: var(--font-heading); font-size: 30px; font-weight: 600; color: #3F6B3F; margin: 6px 0 10px; }
.rc-seasons .site-reason__text { font-size: 15px; max-width: none; }
/* 花形フレームは box より左右約7.6px外へ張り出すため、gap は「見た目のすき間＋15px」で設計（くっつき/離れすぎ防止） */
@media (max-width: 767px) { .site-reasons.rc-seasons { grid-template-columns: repeat(2, 1fr); column-gap: 30px; row-gap: 64px; } }
@media (min-width: 768px) { .site-reasons.rc-seasons { grid-template-columns: repeat(4, 1fr); gap: clamp(30px, 2.8vw, 38px); } }

.rc-chapter--cream { --band: #EEF3EC; }
.rc-chapter--paper { --band: #F7F9F4; }
.rc-chapter--green { --band: #3F6B3F; }
/* 3つの入口：緑(ink)の06章から生成りの波でせり上がり、直線の下端を全幅で隠す。
   全幅で境界を覆い直線・白の継ぎ目を出さない。谷は浅め＝約30px下げても谷が境界より上に残る。 */
/* Why Omizouen下の区切り：他章より約30px下げる（-9.9vw→-7.5vw、vw基準で全幅スケール）。
   谷を浅くした滑らかなS字波（谷=100/146）で、下げても谷が境界を割らず継ぎ目ゼロを維持。 */
.rc-entrance { --band: #F7F9F4; --bgc-vh: 146; --bgc-top: -7.5vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F9F4' d='M 0 55 C 240 55 240 100 480 100 C 720 100 720 55 960 55 C 1200 55 1200 100 1440 100 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
/* 波の区切り＝トップの実物の曲線を流用（about/blogの波形を各章の面色に配色。緑章はserviceの波形）。
   fill=各章の面色で上へせり上がる。トップと同じ有機的・非対称の曲線。 */
/* 章の区切り曲線＝トップの曲線をそのまま流用（各章に固有の --bgc-vh/--bgc-top を持たせ、
   幅比例スケール＝squashなし。fill色は各章の --band と一致させ、上の章へ色がせり上がる）。 */
/* 01「庭には命がある」の上の区切り＝谷が下辺まで届く波（ブログ波）で共感リードへせり上がる。
   旧・大カーブ(vh693)は谷が浅く境界が直線に見えたため、全幅を覆う波線に変更（薄緑）。 */
.rc-ch1 { --bgc-vh: 146; --bgc-top: -10.14vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%23EEF3EC' d='M 0 45 C 240 45 240 125 480 125 C 720 125 720 45 960 45 C 1200 45 1200 125 1440 125 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
/* 02：谷が下辺まで届く波（面色=生成り）。旧・浅い波は境界が直線に見えたため差し替え。 */
.rc-ch2 { --bgc-vh: 146; --bgc-top: -10.14vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F9F4' d='M 0 45 C 240 45 240 125 480 125 C 720 125 720 45 960 45 C 1200 45 1200 125 1440 125 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
/* 03/04/05：トップ ブログ境界のゆるやかな波を流用（面色で色替え） */
.rc-ch3 { --bgc-vh: 146; --bgc-top: -10.14vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%23EEF3EC' d='M 0 45 C 240 45 240 125 480 125 C 720 125 720 45 960 45 C 1200 45 1200 125 1440 125 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
.rc-ch4 { --bgc-vh: 146; --bgc-top: -10.14vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F9F4' d='M 0 45 C 240 45 240 125 480 125 C 720 125 720 45 960 45 C 1200 45 1200 125 1440 125 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
.rc-ch5 { --bgc-vh: 146; --bgc-top: -10.14vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%23EEF3EC' d='M 0 45 C 240 45 240 125 480 125 C 720 125 720 45 960 45 C 1200 45 1200 125 1440 125 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
/* 06 Why Omizouen：谷が下辺まで届く波（fill=ロゴと同じ濃いグレー #55524C）で上の05章へせり上がる。
   旧・SERVICE緑カーブは谷が浅く、上端左に白の抜け／下端に直線が出たため全幅を覆う波線に変更。 */
.rc-ch6 { --bgc-vh: 146; --bgc-top: -9.9vw; --bgc-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 146' preserveAspectRatio='none'%3E%3Cpath fill='%2355524C' d='M 0 45 C 240 45 240 125 480 125 C 720 125 720 45 960 45 C 1200 45 1200 125 1440 125 L 1440 146 L 0 146 Z'/%3E%3C/svg%3E"); }
/* 06のグレー帯は inset:0（境界から）。波の谷が下辺まで届くので帯上端をずらす必要なし。 */
.rc-ch6.bgband::before { top: 0; }
/* 緑章：文字は白系 */
.rc-chapter--green .rc-chapter__catch { color: #FFFFFF; }
/* Why Omizouen（06章）＝トップSERVICE体裁・ロゴと同じ濃いグレー地（RECRUITのみ） */
.rc-chapter--ink { --band: #55524C; color: #FFFFFF; }
.rc-chapter--ink .rc-chapter__body { max-width: 620px; }
.rc-chapter--ink .rc-chapter__body p { color: #E9E7E2; }
/* 縦書き見出し（上揃え・中央）：site-tateをblock化＋text-align:startで列を上端そろえ */
.rc-ch6__ttl { display: block; width: max-content; margin: 0 auto; text-align: start; color: #FFFFFF; }
/* 大きい英字（トップ SERVICE の site-service__en に準拠） */
.rc-ch6__en {
  text-align: center; margin: 20px 0 0;
  font-family: 'Jost', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 6.4vw, 56px); letter-spacing: .16em; line-height: 1.15; color: #FFFFFF;
}
@media (min-width: 768px) { .rc-ch6__en { letter-spacing: .2em; } }
/* 水引(musubi3)の結び＝Why Omizouen見出しと本文の区切り（左右へ伸びる横線はSVGから削除済み） */
.rc-ch6__rule { width: 100%; display: flex; align-items: center; justify-content: center; margin: 40px 0 46px; }
.rc-ch6__rule img { flex: none; height: 44px; width: auto; }
.rc-chapter--green .rc-chapter__body p { color: #EAF1E7; }
.rc-chapter--green .rc-chapter__no { color: #EAD9A6; }
.rc-chapter--green .rc-pull { color: #FFFFFF; }
.rc-chapter--green .rc-figure figcaption { color: rgba(255, 255, 255, .72); }

/* 季節テーブルは章の中央カラムに収める */
.rc-chapter .xw-scroll { max-width: 660px; margin: 26px auto 0; }

/* ---- 3つの入口：金茶天ラインのカード（トップ体系・角丸6px） ---- */
.rc-branches { display: grid; gap: 20px; max-width: 1040px; margin-inline: auto; }
.rc-branch {
  background: #FFFFFF; border: 1px solid #E4EBDF; border-top: 3px solid #B98A3B; border-radius: 6px;
  padding: 34px 24px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.rc-branch__title { font-family: var(--font-heading); font-size: 19px; font-weight: 600; letter-spacing: .1em; color: #3F6B3F; -webkit-text-stroke: .3px currentColor; text-stroke: .3px currentColor; paint-order: stroke fill; }
.rc-branch__text { font-size: 14px; margin: 12px 0 20px; flex: 1; }
@media (min-width: 768px) { .rc-branches { grid-template-columns: repeat(3, 1fr); } }

/* ---- 求人CTA帯＝緑地・白文字・白ボタン（反転） ---- */
.rc-cta { text-align: center; }
.rc-cta__title { margin-bottom: 14px; }
.rc-cta p { max-width: 620px; margin: 0 auto 26px; }
.rc-cta .site-btn { margin-inline: auto; }
.rc-cta--green { background: #3F6B3F; }
.rc-cta--green .rc-cta p { color: #EAF1E7; }
.rc-cta--green .site-btn { background: #FFFFFF; color: #2F5230; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.rc-cta--green .site-btn:hover { background: #F1F5EE; color: #2F5230; }
.rc-cta--green .site-btn::before { background: #2F5230; }
.rc-cta--green .site-btn::after { border-top-color: #FFFFFF; border-right-color: #FFFFFF; }

/* ============================================================
   プライバシーポリシー（テンプレ既存クラスへの最小指定）
   ============================================================ */
.pp-body { max-width: 800px; margin-inline: auto; padding: 40px 24px 72px; }
.pp-body .item_title {
  font-size: 17px; font-weight: 600; color: #3F6B3F;
  margin: 30px 0 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.pp-body .item_title::after { content: ""; width: 36px; height: 2px; background: #B98A3B; }
.pp-body .item_description { margin-bottom: 12px; }

/* ============================================================
   モーション（和の見せ方）＋ Klee One 擬似ボールド
   ・<head> または site.js が <html> に .has-motion を付与。
   ・site.js が [data-reveal] を IntersectionObserver で監視し .is-revealed を付与。
   ・no-JS（.has-motion 無し）／prefers-reduced-motion では常時表示＝安全側。
   ============================================================ */

/* Klee One は 400/600 の2ウェイトのみ。見出し・キャッチは 600 ＋ 同色の text-stroke で
   肉厚化（“700相当”の擬似ボールド）。細い本文には掛けない。 */
.site-mv__catch span, .rc-hero__catch span,
.site-tate, .site-step__text, .site-kakejiku,
.site-head__title, .site-service__title,
.site-reason__title, .site-consult__copy h2, .site-access__info h2,
.xw-pagehead__title, .rc-chapter__catch, .rc-pull {
  -webkit-text-stroke: .35px currentColor;
  text-stroke: .35px currentColor;
  paint-order: stroke fill;
}

/* ---------- ① 縦書き（短冊／掛け軸）＝緑セクションの理念 ---------- */
.site-service__philosophy { display: flex; justify-content: center; margin-bottom: 30px; }
.site-kakejiku {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-heading);
  font-size: 24px; font-weight: 600; letter-spacing: .4em; line-height: 2;
  color: #FFFFFF; padding: 6px 0;
}
/* 2行（右列＝1行目「緑を守り、」／左列＝2行目「暮らしを豊かに。」）
   縦書き（vertical-rl）は inline-block だと確実に縦組みになる。
   行スパンの間に <br> を置いて列（行）を分ける。 */
.site-kakejiku__line { display: inline-block; }
.site-kakejiku span { display: inline-block; }
@media (min-width: 768px) {
  .site-service__philosophy { margin-bottom: 36px; }
  .site-kakejiku { font-size: 32px; }
}

/* 起動前（.has-motion のときだけ隠す） */
.has-motion [data-reveal="tate"] .site-kakejiku span {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * .07s);
}
.has-motion [data-reveal="tate"].is-revealed .site-kakejiku span { opacity: 1; transform: translateY(0); }

/* ---------- ② 横一行「筆リビール」＝ステップ見出し（左→右ワイプ） ----------
   ・クリップは内側 .site-step__ink に掛ける。監視要素(h1)自身をクリップすると
     IntersectionObserver が「面積0＝非交差」と判定し永久に発火しないため（デッドロック回避）。 */
.site-step__ink { display: inline-block; }
.has-motion [data-reveal="fude"] .site-step__ink {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.65,0,.35,1), -webkit-clip-path 1.1s cubic-bezier(.65,0,.35,1);
}
.has-motion [data-reveal="fude"].is-revealed .site-step__ink {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* ---------- 汎用スクロールイン（up）＋子スタガー＋画像リビール（img） ----------
   ・fade_up の実発火版。監視要素自身は隠さない場合（stagger）と隠す場合（up 単体）を分離。
   ・画像は overflow:hidden の枠内で img を scale(1.12)→1 に着地（参考サイト .img-load 準拠）。
     クリップ/変形は必ず内側 img に。監視要素(枠)をゼロ化しないこと（IOデッドロック回避）。 */
.has-motion [data-reveal="up"]:not([data-stagger]) {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.has-motion [data-reveal="up"]:not([data-stagger]).is-revealed { opacity: 1; transform: none; }
.has-motion [data-stagger] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i, 0) * .09s);
}
.has-motion [data-stagger].is-revealed > * { opacity: 1; transform: none; }
.has-motion [data-reveal="img"] { overflow: hidden; }
.has-motion [data-reveal="img"] img {
  opacity: 0; transform: scale(1.12);
  transition: opacity 1.1s ease, transform 1.5s cubic-bezier(.16,.84,.44,1);
}
.has-motion [data-reveal="img"].is-revealed img { opacity: 1; transform: scale(1); }

/* ---------- reduced-motion：全て即時表示 ---------- */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal="fude"] .site-step__ink { clip-path: none !important; -webkit-clip-path: none !important; transition: none !important; }
  .has-motion [data-reveal="tate"] .site-kakejiku span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .has-motion [data-reveal="up"]:not([data-stagger]),
  .has-motion [data-stagger] > *,
  .has-motion [data-reveal="img"] img { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   働く環境ページ：テーブル刷新（単調さ解消）
   ① 1日の流れ＝縦タイムライン  ② 年収の道のり＝5段ラダー
   面色：① 面緑(#EEF3EC) ② 生成り(#F7F9F4) 上で映える配色。
   ============================================================ */
.env-note{ max-width:640px; margin:0 auto 22px; text-align:center; font-size:13px; line-height:1.8; color:#5D6B54; }

/* ① 縦タイムライン */
.env-timeline{ list-style:none; margin:6px auto 0; padding:0; max-width:640px; }
.env-timeline__item{ display:grid; grid-template-columns:58px 1fr; column-gap:22px; }
.env-timeline__time{ font-family:'Jost',sans-serif; font-size:16px; font-weight:600; color:#3F6B3F; text-align:right; line-height:1.7; letter-spacing:.02em; }
.env-timeline__body{ position:relative; border-left:2px solid #CBDbC6; padding:0 0 26px 26px; }
.env-timeline__body::before{ content:""; position:absolute; left:-8px; top:6px; width:14px; height:14px; border-radius:50%; background:#B98A3B; box-shadow:0 0 0 4px #EEF3EC; }
.env-timeline__item:last-child .env-timeline__body{ border-left-color:transparent; padding-bottom:0; }
.env-timeline__body p{ margin:0; font-size:16px; line-height:1.85; color:#3C4438; }
@media (max-width:520px){ .env-timeline__item{ grid-template-columns:46px 1fr; column-gap:14px; } .env-timeline__body{ padding-left:22px; } }

/* ② 年収の道のり＝ラダー */
.env-career{ max-width:720px; margin:6px auto 0; }
.env-career__ladder{ list-style:none; margin:0; padding:0; }
.env-career__step{ position:relative; display:grid; grid-template-columns:132px 1fr; column-gap:26px; padding:0 0 26px; }
.env-career__step::before{ content:""; position:absolute; left:11px; top:22px; bottom:-2px; width:2px; background:#E4EBDF; }
.env-career__step:last-child::before{ display:none; }
.env-career__yr{ position:relative; padding-left:34px; font-family:var(--font-heading); font-size:18px; font-weight:600; color:#3F6B3F; line-height:1.4; }
.env-career__yr::before{ content:""; position:absolute; left:5px; top:5px; width:14px; height:14px; border-radius:50%; background:#3F6B3F; box-shadow:0 0 0 4px #EAF1E7; }
.env-career__yr span{ display:block; margin-top:3px; font-family:'Noto Sans JP',sans-serif; font-size:12px; font-weight:600; color:#8C6420; letter-spacing:.08em; }
.env-career__do{ margin:1px 0 0; font-size:16px; line-height:1.85; color:#3C4438; }
/* 年収の目安＝主役として目立たせる：ラベルは小さく、金額はKleeで大きく。 */
.env-career__pay{ display:inline-flex; align-items:baseline; gap:10px; margin-top:14px; font-family:'Noto Sans JP',sans-serif; font-size:12px; font-weight:600; color:#5D6B54; letter-spacing:.06em; background:#EAF1E7; border:1px solid #CFE0CB; border-radius:12px; padding:12px 22px; box-shadow:0 6px 18px rgba(63,107,63,.08); }
.env-career__pay strong{ font-family:var(--font-heading); font-size:clamp(24px,5vw,29px); font-weight:600; line-height:1; color:#3F6B3F; letter-spacing:.02em; }
.env-career__step--goal .env-career__yr::before{ background:#B98A3B; box-shadow:0 0 0 4px #F1E6CC; }
/* ゴール(5年目・一人前)の年収は金茶で到達感を強調 */
.env-career__step--goal .env-career__pay{ background:#F8F1DE; border-color:#E3CE9A; box-shadow:0 6px 18px rgba(185,138,59,.14); }
.env-career__step--goal .env-career__pay strong{ color:#8C6420; }
@media (max-width:560px){
  .env-career__step{ grid-template-columns:1fr; row-gap:4px; }
  .env-career__step::before{ display:none; }
  .env-career__do, .env-career__pay{ margin-left:34px; }
}

/* ============================================================
   文字サイズ底上げ（可読性・2026-07-13）：本文16→17px／表15→16／注記13→14。
   見出し(h1/h2/en等)は据置。末尾に置き既存指定へ後勝ちで上書き。
   ============================================================ */
/* 流し込み本文・リード・リスト・ステップ・タイムライン等 → 17px */
.xw-body p, .xw-list li, .xw-lead,
.rc-split__text > p, .rc-chapter__body p, .site-consult__copy p,
.xw-hero__lead, .xw-pagehead__lead,
.xw-steps li strong, .xw-steps li span,
.env-timeline__body p, .env-career__do,
.site-about__text p, .site-service__text > p, .site-recruit__text p,
.site-blog__lead, .site-access__info p { font-size: 17px; }
/* コンパクトなカード/表 → 16px */
.xw-table, .xw-workitem__text, .site-reason__text, .rc-seasons .site-reason__text, .xw-card__text { font-size: 16px; }
/* 注記・キャプション → 14px */
.xw-meta, .xw-photo-note, .xw-photo figcaption, .env-note { font-size: 14px; }

/* ============================================================
   比較表（経験者ページ The Difference）：スマホは横スクロールをやめカード化。
   各行を「項目名（見出し）＋下請け中心の現場／近江造園（強調）」の縦積みカードに。
   PC(≥768)は通常の .xw-table のまま（下の指定は max-width:767 のみ）。
   ============================================================ */
@media (max-width: 767px) {
  .xw-scroll--compare { overflow: visible; margin: 12px 0 20px; }
  .xw-table--compare { min-width: 0; width: 100%; border: 0; background: transparent; }
  .xw-table--compare tr { display: block; margin-bottom: 16px; border: 1px solid #E4EBDF; border-radius: 10px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 16px rgba(63,107,63,.06); }
  .xw-table--compare tr:first-child { display: none; }                 /* ヘッダー行を隠す */
  .xw-table--compare td { display: block; border: 0; padding: 13px 16px; line-height: 1.75; }
  /* 項目名＝カード見出し（緑帯・Klee） */
  .xw-table--compare td:first-child { background: #EEF3EC; color: #2F5230; font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
  /* 値セル：data-labelを小見出しに */
  .xw-table--compare td:nth-child(2)::before,
  .xw-table--compare td:nth-child(3)::before {
    content: attr(data-label); display: block;
    font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 3px;
  }
  /* 下請け中心＝控えめ */
  .xw-table--compare td:nth-child(2) { color: #5D6B54; border-bottom: 1px solid #EEF3EC; }
  .xw-table--compare td:nth-child(2)::before { color: #9AA891; }
  /* 近江造園＝緑地で強調 */
  .xw-table--compare td:nth-child(3) { background: #F3F8F1; color: #2F5230; }
  .xw-table--compare td:nth-child(3)::before { color: #3F6B3F; }
}

/* ============================================================
   ブログ記事末の署名＋CTA（.blog-sign）：会社紹介＋お問い合わせ導線。
   ============================================================ */
.blog-sign { margin: 48px 0; padding: 34px 28px 36px; background: #F7F9F4; border: 1px solid #E4EBDF; border-top: 3px solid #B98A3B; border-radius: 8px; text-align: center; }
.blog-sign__label { font-family: var(--font-heading); font-size: 21px; font-weight: 600; color: #3F6B3F; margin: 0 0 12px; letter-spacing: .08em; }
.blog-sign__text { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.95; color: #3C4438; max-width: 560px; margin: 0 auto 24px; }
.blog-sign .site-btn { margin-inline: auto; }


/* ============================================================
   スプラッシュ（オープニング演出・トップ初回のみ）
   ------------------------------------------------------------
   ・既定は display:none（リピーター/低モーション設定＝一切表示しない・チラつきなし）。
   ・<head>の同期スクリプトが初回のみ html.splash-on を付与→ここで全面表示。
   ・末尾JSが .splash-out を付けてフェードアウト→DOM除去。
   ・スクロールロックは意図的に不使用（装飾パララックスが幅依存のため、
     スクロールバー増減による横幅ジッタを避ける。§10-1）。
   ============================================================ */
.site-splash{ display:none; }
html.splash-on .site-splash{
  display:flex; position:fixed; inset:0; z-index:9999;
  align-items:center; justify-content:center;
  background:#F7F9F4;
}
html.splash-on.splash-out .site-splash{ animation:site-splashOut .75s ease forwards; }
.site-splash__inner{ display:flex; flex-direction:column; align-items:center; }
.site-splash__mark{
  width:96px; height:auto; opacity:0; transform:translateY(10px) scale(.94);
  animation:site-splashMark .95s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
.site-splash__name{
  /* ヘッダーロゴと同じ明朝ロゴタイプ（Zen Old Mincho 700）＋同じ墨グレー */
  font-family:'Zen Old Mincho', serif; font-weight:700; color:#55524C;
  font-size:30px; letter-spacing:.18em; margin-top:16px; opacity:0;
  animation:site-splashName .8s ease .45s forwards;
}
.site-splash__rule{
  width:0; height:2px; background:#B98A3B; margin-top:14px;
  animation:site-splashRule .7s ease .7s forwards;
}
@keyframes site-splashMark{ to{ opacity:1; transform:none; } }
@keyframes site-splashName{ to{ opacity:1; } }
@keyframes site-splashRule{ to{ width:52px; } }
@keyframes site-splashOut{ to{ opacity:0; visibility:hidden; } }

/* ============================================================
   可読性調整：本文の行間と段落間を広げ、詰まった印象を解消
   （縦書きの見出し・ヒーロー・共感リードには影響しない横組み本文のみ）
   ============================================================ */
.xw-body p { margin-bottom: 24px; line-height: 2.1; }
.xw-body p:last-child { margin-bottom: 0; }
.xw-lead { line-height: 2.1; }
.xw-hero__lead { line-height: 2.15; margin-top: 22px; }
.xw-pagehead__lead { line-height: 2.1; }
.site-about__text p, .site-recruit__text p { margin-bottom: 22px; line-height: 2.05; }
.site-service__text > p { margin-bottom: 26px; line-height: 2.05; }
.site-consult__copy p { line-height: 2.05; margin-top: 18px; }
.site-access__info p { line-height: 2.3; }
.rc-chapter__body p { margin-bottom: 22px; line-height: 2.05; }
.xw-table th, .xw-table td { padding: 20px 22px; line-height: 2.05; }
.xw-list li { margin-bottom: 16px; line-height: 2.05; }
.xw-faq__a p { line-height: 2.1; }
.xw-h2 { margin-bottom: 6px; }
.xw-section + .xw-section, .xw-block + .xw-block { margin-top: 8px; }


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

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

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

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


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

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

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

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


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


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


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

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


/* ============================================================
   §4  ブログ / 施工実績(blog-ex) 一覧（番号非依存）
   ============================================================ */
/* 一覧セクションの地 */
[class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */
/* カード並び（最小幅を確保して細くなりすぎない） */
[class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* カード */
[class*="_post_wrap"]{
  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チップに。
   テーマは既に _post_category に border:1px solid var(--main-color) を持つ＝枠を“足す”と2重になるので
   同一要素に !important で単一の枠を確定（色は --dyn-accent=var(--main-color) で一致）。幅は % 制約を解除し content 幅に。 */
[class*="_post_category"], [class*="_post_status"] > span:last-child{
  width:auto; max-width:none !important;
  background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important;
  border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important;
}
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; }

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


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
[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; }
/* 詳細ページ「最近の投稿」見出しは緑(--main-color)帯の上に載る＝白文字で可読に。
   上の .recent_post_title への heading色上書き(暗色)が深緑地で見えなくなるのを是正（詳細度で勝つ）。 */
.recent_posts_wrap .recent_post_title{ color:#fff !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; }
/* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */
.contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; }
/* 送信前 disabled（reCAPTCHA未完了）の見え方 */
.contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; }
/* 確認画面のボタン装飾是正：囲み(.contact_submit)自体の塗りを消す。上の一括塗り(.contact_submit{background:accent})が
   「戻る｜送信」の周囲・隙間に緑帯を出し、送信ボタン(同色)が囲みに溶けてボタンの区切りが無くなるため。ボタン自身の色は保持。
   2ボタンは gap:20px で分離し均等幅に（テーマの d-flex gap0 / mx-2 依存をやめる）。単一ボタン画面は全幅。
   教訓: [[cuezilla-parts213-form-css-loses-to-theme]] */
.contact_submit{ background:transparent !important; }
.contact_submit.d-flex{ display:flex !important; gap:20px !important; justify-content:center !important; align-items:stretch !important; }
.contact_submit.d-flex input[type="submit"]{ flex:1 1 0 !important; width:auto !important; max-width:280px !important; margin:0 !important; }
.contact_submit:not(.d-flex) input[type="submit"]{ width:100% !important; }

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


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


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

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


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


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


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


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


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


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

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


/* ============================================================
   §近江造園（案件）ブログ(parts222)/施工実績(parts228) 一覧を本サイトのトンマナへ
   ── xw-worklist準拠：生成りセクション＋角丸4:3画像カード(影/ホバーズーム)、
      Klee緑タイトル・Jost日付・緑ピルのカテゴリ/タグ・緑ページネーション。
      §4の汎用skinより後に置き上書き（同接頭辞クラス・後勝ち／!importantでtheme/skinに勝つ）。
   ============================================================ */
/* セクション：生成り地・サイト幅・余白（他下層 xw-sec と同トーン） */
.parts222_section, .parts228_section{ background:#F7F9F4 !important; padding:72px 24px 100px !important; }
.parts222_wrap, .parts228_wrap{ max-width:1120px !important; margin-inline:auto !important; }

/* カード：灰緑枠のボックスをやめ「角丸画像＋下にテキスト」に（xw-workitem） */
.parts222_post_wrap, .parts228_post_wrap{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; overflow:visible !important;
}
.parts222_post_wrap:hover, .parts228_post_wrap:hover{ transform:none !important; }

/* 画像：角丸6px・4:3・影・ホバーで拡大。
   ⚠ themeの固定 height:240px / img max-height:240px を解除しないと、モバイル(≤520)で
   コンテナ(4:3)より img が低く止まり画像下に白スペースが出る（施工実績505px不具合の原因）。 */
.parts222_post_img, .parts228_post_img{
  border-radius:6px !important; overflow:hidden !important;
  height:auto !important; aspect-ratio:4/3 !important; box-shadow:0 10px 24px rgba(63,107,63,.10);
}
.parts222_post_img img, .parts228_post_img img{
  width:100% !important; height:100% !important; max-height:none !important; aspect-ratio:auto !important;
  object-fit:cover !important; border-radius:0 !important;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.parts222_post_wrap:hover .parts222_post_img img,
.parts228_post_wrap:hover .parts228_post_img img{ transform:scale(1.04); }

/* 日付・タイトル：画像の左端に揃える（横パディングを消す） */
.parts222_post_status, .parts228_post_status{
  margin:16px 0 0 !important; padding:0 !important; border:0 !important; background:transparent !important;
}
/* blog(parts222)：日付＝左・カテゴリ＝右の1行 */
.parts222_post_status{ display:flex !important; flex-wrap:wrap; gap:10px !important; align-items:center; justify-content:space-between; }
/* 施工実績(parts228)：statusの中に日付＋(タイトル＋タグ)が入れ子＝縦積み（日付→タイトル→タグ） */
.parts228_post_status{ display:block !important; }
.parts228_post_date{ display:block; margin-bottom:6px; }
.parts222_post_title-excerpt, .parts228_post_title-excerpt{ padding:6px 0 0 !important; }
.parts228_post_title-excerpt{ padding:0 !important; }

/* 日付：Jost・落ち着いた緑グレー・小さめ */
.parts222_post_date, .parts228_post_date{
  font-family:'Jost',sans-serif !important; color:#5D6B54 !important;
  font-size:13px !important; letter-spacing:.06em !important;
}
/* タイトル：Klee・緑（xw-workitem__title） */
.parts222_post_title, .parts228_post_title{
  font-family:'Klee One','Zen Old Mincho',serif !important; color:#3F6B3F !important;
  font-size:19px !important; font-weight:600 !important; line-height:1.7 !important; letter-spacing:.02em;
}
.parts222_post_excerpt{
  font-family:'Noto Sans JP',sans-serif !important; color:#3C4438 !important;
  font-size:15px !important; line-height:1.9 !important; margin-top:6px !important;
}
/* カテゴリ／施工実績タグ：緑ピル */
.parts222_post_category, .parts222_post_status > span:last-child, .parts-blog-ex_tag{
  display:inline-block; font-family:'Noto Sans JP',sans-serif !important;
  font-size:12px !important; color:#3F6B3F !important;
  background:#EEF3EC !important; border:1px solid #CFE0CB !important;
  border-radius:999px !important; padding:3px 12px !important; letter-spacing:.04em;
}
.parts-blog-ex-tag_wrap{ padding:10px 0 0 !important; gap:6px !important; }

/* ページネーション：現在地を緑丸・数字はJost（枠色は§4-Bで緑寄せ済み） */
.parts222_pagenation a, .parts228_pagenation a,
.parts222_pagenation span, .parts228_pagenation span{ font-family:'Jost',sans-serif !important; }
.parts222_pagenation span.current, .parts228_pagenation span.current{
  background:#3F6B3F !important; color:#fff !important; border-color:#3F6B3F !important;
}

/* --- ページャー二重リング／「最後>>」崩れの是正（R-27 override定石＝子孫総リセット＋直下childに単一ピル） ---
   真因: §3(A)が外側span(.pagination_prev/next/num)をピル化＋(B)が内側<a>にも枠 → 枠が二重。
        さらに「最後>>」は class=page-item で(A)に当たらず外側ピルなし・display:block(高さ62px)＝崩れ。
   入れ子(span>a)・クラス差(page-item)に依存せず、直下childだけに1枚のピルを描く。教訓: theme-pagenation-double-ring-on-nested-nav */
.parts222_pagenation, .parts228_pagenation{
  display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px !important;
}
/* ① 子孫を全部リセット＝二重枠・余分な箱を殲滅（display は触らず＝番号の d-none/d-xl-block を保持） */
.parts222_pagenation *, .parts228_pagenation *{
  border:0 !important; background:none !important; border-radius:0 !important; box-shadow:none !important;
  margin:0 !important; padding:0 !important; min-width:0 !important; height:auto !important;
}
/* ② 直下child（番号/current/最初/前/次/最後）だけに単線ピルを1枚 */
.parts222_pagenation > *, .parts228_pagenation > *{
  display:flex !important; align-items:center; justify-content:center;
  min-width:40px !important; height:40px !important; padding:0 14px !important; box-sizing:border-box !important;
  border:1px solid #7C8B77 !important; border-radius:6px !important;
  color:#3C4438 !important; font-family:'Jost',sans-serif !important; text-decoration:none;
}
/* ②-b 番号の d-none/d-xl-block（レスポンシブ表示）を維持＝xl(1200px)未満では番号を隠す */
@media (max-width:1199.98px){
  .parts222_pagenation > .d-none, .parts228_pagenation > .d-none{ display:none !important; }
}
/* ③ ラッパ内の <a> はクリック範囲をピル全体へ（枠は②が持つ＝aは枠なし） */
.parts222_pagenation > * > a, .parts228_pagenation > * > a{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:100% !important; color:inherit !important; text-decoration:none;
}
/* ④ 現在地は緑塗り／⑤ ホバーは金茶（現在地は塗りを維持） */
.parts222_pagenation > .current, .parts228_pagenation > .current{
  background:#3F6B3F !important; border-color:#3F6B3F !important; color:#fff !important;
}
.parts222_pagenation > *:hover, .parts228_pagenation > *:hover{ border-color:#B98A3B !important; color:#B98A3B !important; }
.parts222_pagenation > .current:hover, .parts228_pagenation > .current:hover{ background:#3F6B3F !important; border-color:#3F6B3F !important; color:#fff !important; }

/* --- 本文とサイドバーの間隔（1055px等でくっつく対策）＋狭幅で縦積み --- */
.parts222_wrap{ gap:clamp(32px,4vw,64px) !important; }
@media (max-width:1023px){
  .parts222_wrap{ flex-direction:column !important; }
  .parts222_main, .parts222_sidebar{ max-width:100% !important; width:100% !important; }
  .parts222_sidebar{ margin-top:8px !important; }
}

/* --- サイドバー：CMS既定の「緑バー見出し＋グレー枠」をサイトトーンへ全面是正 ---
   §21-12で h3 の色だけ緑にした結果、themeの緑バー地に緑文字＝不可視（崩れ）だったのを解消。 */
.parts222_sidebar h3{
  background:transparent !important; color:#3F6B3F !important;
  font-family:'Klee One','Zen Old Mincho',serif !important;
  font-size:18px !important; font-weight:600 !important; letter-spacing:.04em !important;
  padding:0 0 10px !important; margin:0 0 4px !important;
  border-bottom:2px solid #B98A3B !important; border-radius:0 !important;   /* 金茶アンダーライン */
}
/* 最近の投稿：行はグレー罫→薄緑罫 */
.parts222_sidebar ul li{ border-bottom:1px solid #E4EBDF !important; margin-top:0 !important; padding:14px 2px !important; }
.parts222_sidebar ul li:last-child{ border-bottom:0 !important; }
.parts222_sidebar_date{ font-family:'Jost',sans-serif !important; color:#5D6B54 !important; font-size:12px !important; margin-bottom:4px !important; }
.parts222_sidebar_post_title{ font-family:'Noto Sans JP',sans-serif !important; color:#3C4438 !important; line-height:1.7 !important; }
/* カテゴリ：左右のグレー縦罫を撤去し、下罫だけの素直なリストに */
.category_post_count ul li{ border-left:0 !important; border-right:0 !important; border-bottom:1px solid #E4EBDF !important; margin-top:0 !important; padding:0 !important; }
.category_post_count ul li:last-child{ border-bottom:0 !important; }
.category_post_count ul li a{ padding:12px 2px !important; align-items:center; }
.parts222_sidebar_post_category{ font-family:'Noto Sans JP',sans-serif !important; color:#3C4438 !important; }
.parts222_sidebar_post_category_count{
  width:auto !important; min-width:26px; height:22px !important; padding:0 9px !important;
  background:#EEF3EC !important; color:#3F6B3F !important; border:1px solid #CFE0CB !important;
  border-radius:999px !important; font-family:'Jost',sans-serif !important; font-size:12px !important;
}


/* ============================================================
   §近江造園 お問い合わせフォーム(parts213)：ゆとり調整
   ・スキン§7が幅720pxに絞る＋theme「ラベル左/入力右」で入力欄が狭い
     → ラベルを入力の上に積んで入力欄を全幅化（読みやすい760px）
   ・入力/テキストエリア/ファイル添付の余白拡大（パツパツ解消）
   ============================================================ */
.parts213_section_form{ background:#F7F9F4 !important; padding:56px 24px 84px !important; }
.parts213_form_wrap{ max-width:760px !important; }
/* ラベル上・入力全幅に積む */
.parts213_section_form dl{ display:block !important; margin-bottom:30px !important; }
.parts213_section_form dt{ max-width:none !important; width:auto !important; display:flex; align-items:center; justify-content:flex-start; gap:12px; margin-bottom:10px !important; font-size:16px; font-weight:600; }
.parts213_section_form .form_text_dt{ flex-wrap:wrap; }
.parts213_section_form dd{ max-width:none !important; width:100% !important; margin-left:0 !important; }
.form_textarea{ margin-top:30px !important; }
/* 入力・テキストエリア：ゆったり＋白地（生成りセクションに映える） */
[class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
[class*="_form_wrap"] dd select{ padding:16px 18px !important; min-height:58px !important; background:#FFFFFF !important; }
[class*="_form_wrap"] textarea, .form_textarea textarea{ padding:16px 18px !important; min-height:240px !important; background:#FFFFFF !important; }
/* チェック項目：折り返し・間隔 */
.parts213_section_form dd label{ display:inline-flex !important; align-items:center; margin:0 26px 12px 0 !important; }
/* 必須バッジ：内容に合わせて（theme固定50x30を解除） */
.parts213_section_form .required{ width:auto !important; height:auto !important; }
/* ファイル添付：箱を広く・ボタンにゆとり・ボタン↔ファイル名の間隔 */
.label_file_upload{ display:flex !important; align-items:center; gap:16px; flex-wrap:wrap; padding:15px 18px !important; min-height:58px; background:#FFFFFF !important; }
.label_file_upload button{ padding:11px 24px !important; font-size:15px; white-space:nowrap; flex:none; border-radius:6px !important; }
.des{ margin-top:8px !important; }
/* 送信ボタン：上に余白 */
.parts213_section_form .contact_submit{ margin-top:40px !important; }

/* お問い合わせ内容(textarea)の必須マーク位置を他フィールドと揃える。
   themeが .form_text_dt 内で .required を position:absolute(右上)にしていたため右端に浮いていた。
   → static に戻しラベル直後へ。注意書き(attention)は絶対配置で下段に。 */
.parts213_section_form .form_text_dt{ position:relative; display:flex !important; align-items:center; flex-wrap:nowrap; gap:12px; padding-bottom:26px; }
.parts213_section_form .form_text_dt > span:first-child{ display:inline-flex; align-items:center; flex:0 0 auto; }
.parts213_section_form .form_text_dt .required{ position:static !important; order:0; }
.parts213_section_form .form_text_dt .attention{ position:absolute; left:0; bottom:0; display:block; margin:0; }