/* ===== 20a_site.css ===== */
/* ★未使用ルールを刈り取り済み（死セレクタ 74 件）。属性セレクタ・先頭擬似は刈らない。
   ★再生成は scratchpad/build-site-css.mjs（組み立て→rule-effect→刈り取り→コメント無害化）を通すこと。 */
/* ===== 1. MISSION layout primitives（bake済み） ===== */
.l-center{
  box-sizing: content-box;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: calc(clamp(1.5rem,   1.438rem + 0.278vw, 1.688rem)   * 1.1);
}
/* ===== 2. MISSION ui components 抜粋（bake済み） ===== */
.ui-heading{
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.ui-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font: inherit; font-size: clamp(0.75rem,  0.729rem + 0.093vw, 0.813rem); font-weight: 500; line-height: 1;
  letter-spacing: 0.08em;
  padding: 0.75em 1.6em; border: 0; border-radius: 9999px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  /* 最小ターゲットサイズ。ボタンは誤タップの影響が大きいので WCAG 2.5.5(AAA) の 44px を採る。
     padding だけだと実測 42.06px で 1.94px 足りなかった（実測 2026-07-30）。 */
  min-block-size: 44px;
  transition: transform 0ms cubic-bezier(0.22, 1, 0.36, 1),
              background 0ms cubic-bezier(0, 0, 0.2, 1),
              box-shadow 0ms cubic-bezier(0, 0, 0.2, 1),
              filter 0ms cubic-bezier(0, 0, 0.2, 1);
}
.ui-btn:active{ transform: translateY(1px) scale(0.99); }
.ui-btn--primary:hover{ box-shadow: 0 4px 12px rgb(0 0 0 / 0.08 ), 0 2px 4px rgb(0 0 0 / 0.04 ); filter: brightness(1.06); }
.ui-btn--lg{ --btn-pad-y: 1.3em; --btn-pad-x: 3em; }
/* ------------------------------------------------------------
   .ui-subnav — サブナビ（親項目の直下に降りる小型ドロップダウン）
   .ui-mega（全幅パネル）と対をなす、もう一つの階層メニュー語彙。開閉方式・
   マークアップの骨格・キーボード操作は .ui-mega を踏襲する（対応関係は下記）。

   使い分け（どちらを選ぶか）:
     .ui-mega    … 子リンクが多い／画像や説明文を添えたい／複数カラムに整理したい時。
                   帯の下いっぱいに全幅パネルが降りる（例: 事業内容の下に建築/土木/設備…＋写真）。
     .ui-subnav  … 子リンクが数個の単純なリストで足りる時。親項目の直下、
                   左端揃えの幅の狭いパネルに縦1列でリンクを並べる（例: 施工実績→住宅/店舗/公共施設）。
                   実案件で最も頻出するのはこちら。

   マークアップ（ヘッダー側の階層項目 ＜li＞ に載せる。.ui-mega と同じ骨格・対応関係）:
     ＜li class="ui-subnav-host"＞
       ＜input type="checkbox" id="subnav-works" class="ui-subnav-toggle"＞    ＜!-- SP開閉。★hidden を付けない（付けるとキーボードで開けない。下の a11y 注記参照） --＞
       ＜a class="ui-subnav-trigger" href="…/works/" aria-haspopup="true"＞施工実績＜/a＞  ＜!-- PC。常時フォーカス可（.ui-mega-trigger 相当） --＞
       ＜label class="ui-subnav-summary" for="subnav-works"＞施工実績＜/label＞           ＜!-- SP。PCでは隠す（.ui-mega-summary 相当） --＞
       ＜div class="ui-subnav"＞
         ＜ul class="ui-subnav__list"＞
           ＜li＞＜a href="…"＞住宅＜/a＞＜/li＞
           ＜li＞＜a href="…"＞店舗＜/a＞＜/li＞
           ＜li＞＜a href="…"＞公共施設＜/a＞＜/li＞
         ＜/ul＞
       ＜/div＞
     ＜/li＞

   開閉: .ui-mega と同じ規約。
     PC（60rem 以上）… `.ui-subnav-host` の :hover / :focus-within でパネルが降りる。
       トリガー ＜a＞ は常時表示・常時フォーカス可能なので、キーボードでも開ける。
     SP（60rem 未満）… パネルはドロワー内で縦積みのアコーディオンになる。開閉は
       ホスト側の合図に従う: `:has(＞ input:checked)`（checkboxハック）または `.is-open`。
       ※ ＜details＞ はホストにしない（.ui-mega と同じ理由。閉じた details の子は UA が
         `::details-content{ content-visibility: hidden }
` で隠すため、PCのhover表示が
         author CSS から復帰できない）。

   位置（.ui-mega との違いはここだけ）: .ui-mega は viewport 基準の fixed（全幅・
   ヘッダー直下から降りる）だが、.ui-subnav はホスト基準の absolute（トリガー項目の
   直下・左端揃え）。ホスト（`.ui-subnav-host`）に position:relative を持たせている
   ので、ヘッダー側で追加の位置調整は不要。
   **出る位置だけは修飾子で選べる**（体裁は共有のまま）:
     `.ui-subnav--flyout` … 親項目の右隣に出す（縦置きレール・サイドバー型）
     `.ui-subnav--center` … 親項目の中央下に出す（中央ロゴ型）
   ★PCへの切替は **60rem 固定**（CSSのメディアクエリはカスタムプロパティを読めないため
   変数化できない）。ヘッダー側のブレークポイントが 60rem でない場合は、**そのヘッダーの
   @media 内で `.ui-subnav-host ＞ .ui-subnav-trigger` / `.ui-subnav-summary` の表示切替を
   上書きして揃える**（.ui-mega と同じ作法。実例＝`site-header-menubar` は `--shmb-bp:64rem`）。
   ------------------------------------------------------------ */

.ui-subnav-toggle{
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  appearance: none;
  pointer-events: none; /* 見えない1pxを誤クリックさせない（操作はラベル経由） */
}
.ui-subnav-toggle:focus-visible ~ .ui-subnav-summary{
  outline: 2px solid #228B22; /* 2px は layout/primitives.css の :focus-visible と同値 */
  outline-offset: 2px;
}
.ui-subnav-host{ position: relative; }
.ui-subnav{ display: none; }
.ui-subnav-host:has(> .ui-subnav-toggle:checked) > .ui-subnav{ display: block; }
/* `（0-1-1）のような広い子孫セレクタが実在し、
   単一クラス（0-1-0）だと負けて **パネルの子リンクが横一列に化ける**（実測: site-header-floating-pill）。
   縦並びは .ui-subnav の構造そのものなので、ここだけは負けない詳細度で書く。 */
.ui-subnav .ui-subnav__list{ display: flex; flex-direction: column; }
/* `（0-1-1）に負けて
   SPでトリガーとサマリーが二重表示される。 */
.ui-subnav-host > .ui-subnav-summary{ display: flex; justify-content: space-between; align-items: center; gap: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1); cursor: pointer; }
.ui-subnav-summary__chev{
  inline-size: 0.55rem; block-size: 0.55rem; flex: none;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  rotate: 45deg; transition: rotate 0ms cubic-bezier(0.2, 0, 0, 1);
}
.ui-subnav-host:has(> .ui-subnav-toggle:checked) > .ui-subnav-summary .ui-subnav-summary__chev{ rotate: -135deg; }
.ui-subnav-host > .ui-subnav-trigger{ display: none; }
@media (min-width: 60rem){
.ui-subnav-host > .ui-subnav-summary{ display: none; }
.ui-subnav-host > .ui-subnav-trigger{ display: block; }
.ui-subnav{
    display: block;
    position: absolute; inset-block-start: 100%; inset-inline-start: 0;
    z-index: 100;
    min-inline-size: 12rem;
    background: #FFFFFF; color: #232A20;
    border: 1px solid #303646;
    border-radius: 19.2px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.12 ), 0 4px 8px rgb(0 0 0 / 0.06 );
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0ms cubic-bezier(0.2, 0, 0, 1), visibility 0ms;
  }
.ui-subnav-host:hover > .ui-subnav,
  .ui-subnav-host:focus-within > .ui-subnav{ opacity: 1; visibility: visible; pointer-events: auto; }

}
/* ===== 3. MISSION part: site-header-menubar（bake済み・sites/S01664-gojo/theme.css） ===== */
/* ============================================================
   site-header-menubar / style.css
   2段ヘッダー。上段=ロゴ＋連絡先/SNS、下段=全幅メニュー帯（等幅セル・区切り罫）。
   SPは下段メニューをCSS-onlyドロワー化（checkboxハック）。
   前提: tokens / fluid / primitives / ui/components / motion.css
   差込:
     --shmb-bg        上段の帯背景（既定 --color-bg）
     --shmb-fg        文字色（既定 --color-text）
     --shmb-h         上段バー高さ（既定 5rem）
     --shmb-menu-bg   下段メニュー帯の背景（既定 --color-secondary）
     --shmb-menu-fg   下段メニュー帯の文字色（既定 --color-on-primary）
     --shmb-bp        PC/SP切替幅（既定 64rem。未満で下段をドロワー化）
   出自: 旧CueZilla parts58 有料コンポーネント（imports/0707・122/144/160統合）
   ============================================================ */

.site-header-menubar {
  --shmb-h: 5rem;
  --shmb-bp: 1024px;
  position: sticky; top: 0; z-index: 200;
  background: #FFFFFF;
  color: #232A20;
  border-bottom: 1px solid #303646;
  /* 注: container-type は使わない。fixed ドロワー/スクリムの包含ブロックが
     ヘッダーに移り全画面化できなくなるため。切替は @media（ヘッダーは常に全幅）。 */
}

/* ============================================================
   上段: ロゴ ｜ 連絡先/SNS ｜ SP操作
   ============================================================ */
.site-header-menubar__top {
  display: flex; align-items: center; gap: calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
  min-height: 5rem;
  padding-block: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1);
}

/* --- ブランド --- */
.site-header-menubar__brand { display: flex; align-items: center; gap: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1); color: inherit; }
.site-header-menubar__logo { display: inline-flex; width: 2.5rem; height: 2.5rem; color: #228B22; flex: none; }
.site-header-menubar__logo svg { width: 100%; height: 100%; }
.site-header-menubar__brand-text { display: flex; flex-direction: column; }
.site-header-menubar__brand-sub { font-size: clamp(0.75rem,  0.729rem + 0.093vw, 0.813rem); color: #8b92a3; font-weight: 400; }

/* --- 連絡先＋SNS（PCは右寄せ・縦積み） --- */
.site-header-menubar__contact {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(clamp(0.25rem,  0.229rem + 0.093vw, 0.313rem) * 1.1);
  text-align: right;
}
.site-header-menubar__contact-lead { margin: 0; font-size: clamp(0.75rem,  0.729rem + 0.093vw, 0.813rem); font-weight: 600; }
.site-header-menubar__tel {
  display: inline-flex; align-items: center; gap: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1);
  color: inherit; font-size: clamp(1.75rem,  1.583rem + 0.741vw, 2.25rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}

/* ============================================================
   下段: 全幅メニュー帯（等幅セル・区切り罫）
   ============================================================ */
.site-header-menubar__menu {
  background: #14601A;
  color: #ffffff;
}
.site-header-menubar__menu-list {
  display: flex; margin: 0 auto; padding: 0; list-style: none;
  max-width: 1280px; width: 100%;
}
.site-header-menubar__menu-list > li {
  flex: 1 1 0; min-width: 0;
  border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

/* 通常項目（リンク直下）
   .ui-subnav-trigger/.ui-subnav-summary は display を持たない（共有語彙 ui/components.css
   側の @media(min-width:60rem) 切替に委ねる。ここで display を書くと詳細度で共有語彙の
   表示切替を上書きしてしまいSPでトリガーとサマリーが二重表示される＝書かない）。 */
.site-header-menubar__menu-list > li > a { display: block; }
.site-header-menubar__menu-list > li > a,
.site-header-menubar__menu-list > li > .ui-subnav-trigger,
.site-header-menubar__menu-list > li > .ui-subnav-summary {
  padding: calc(clamp(1rem,     0.958rem + 0.185vw, 1.125rem)   * 1.1) calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1);
  color: inherit; text-align: center; text-decoration: none;
  font-size: clamp(0.875rem, 0.854rem + 0.093vw, 0.938rem); font-weight: 600;
  letter-spacing: 0.04em; white-space: nowrap;
  position: relative; cursor: pointer;
  /* R-27対応でbackground-imageに下線を持たせるため、hoverの色面(background-color)と
     下線の伸縮(background-size)を別々のタイミングで遷移させる（shorthand transition:backgroundだと
     両方が同じdur-fastになってしまい、旧::afterのdur-base感が失われるため分離） */
  transition: background-color 0ms cubic-bezier(0.2, 0, 0, 1), background-size 0ms cubic-bezier(0.2, 0, 0, 1);
}
/* hoverの色面塗り: R-27対応でbackground-imageに下線を持たせたため、shorthand background:ではなく
   background-color:に限定する（shorthandだとbackground-imageがnoneにリセットされ下線が消えるため） */
/* 下線ホバー（R-27対応: ::afterのcontentはAddCssInfoで除去されるため使わない。旧の淡青アクセント色 → primary。
   要素自身のbackground-imageを0→100%pxへ伸ばし、旧scaleX(0→1)と同じ「中央から広がる」動きを
   background-position:centerで再現する。左右余白の inset が無いため計算は不要） */
.site-header-menubar__menu-list > li > a,
.site-header-menubar__menu-list > li > .ui-subnav-trigger {
  background-image: linear-gradient(#228B22, #228B22);
  background-repeat: no-repeat; background-position: center bottom; background-size: 0 3px;
}
.site-header-menubar__menu-list > li > a:hover,
.site-header-menubar__menu-list > li > .ui-subnav-trigger:hover { background-size: 100% 3px; }

/* --- 階層メニュー（ドロップダウン） ---
   体裁は共有語彙 .ui-subnav（ui/components.css）に委譲。ここでは書かない
   （2026-07-31: 旧144版の独自CSS(.sub/.submenu・details/summary)を撤去し共有語彙(checkbox+label
   の contract。＜details＞ は契約上ホストにしない)へ移行）。 */

/* --- ハンバーガー／スクリム（既定は非表示・SPで出す） --- */
.site-header-menubar__burger { display: none; flex-direction: column; gap: 5px; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; cursor: pointer; margin-left: calc(clamp(1rem,     0.958rem + 0.185vw, 1.125rem)   * 1.1); flex: none; }
.site-header-menubar__burger span { display: block; width: 1.5rem; height: 2px; background: currentColor; transition: transform 0ms cubic-bezier(0.2, 0, 0, 1), opacity 0ms; }
.site-header-menubar__scrim { display: none; }

/* 開閉トグルは .u-visually-hidden で視覚的に隠す（タブ順は残す）。
   フォーカスリングは1pxの本体では見えないため、操作用ラベル（バーガー）側に出す。 */
.site-header-menubar__toggle:focus-visible ~ .site-header-menubar__top .site-header-menubar__burger {
  outline: 2px solid #228B22;
  outline-offset: 2px;
}

/* ============================================================
   SP: --shmb-bp 未満で下段メニューをドロワー化（@media＝fixed包含ブロック回避）
   ============================================================ */
@media (max-width: 1023px) {
  .site-header-menubar__burger { display: flex; }

  /* 共有語彙 .ui-subnav（ui/components.css）のPC切替は60rem固定だが、本ヘッダーの
     PC/SP切替（--shmb-bp）は64rem。60rem〜64remの間で放置すると、下段メニューは
     まだドロワー（SPモード・閉じたまま）なのにトリガー(＜a＞)だけPC表示になり、
     開閉トグルであるサマリー(＜label＞)が隠れて子リンクへhover以外で到達できなくなる。
     .ui-mega と同じ作法（そのヘッダーの@media内で表示切替を再宣言）で64remに揃える
     （--shmb-bp の値そのものは変えない＝ヘッダー本来の意匠BPは維持する）。
     scoped selector（0,3,1）は共有語彙の0,2,0より詳細度が高いので読み込み順に依存しない。 */
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav-trigger { display: none; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav-summary { display: flex; }

  /* 上段の連絡先はドロワーへ寄せず、SPは非表示（ドロワー内に再掲する形も可だが簡潔に隠す） */
  .site-header-menubar__contact { display: none; }

  /* 下段メニュー → 右スライドインの全高ドロワー */
  .site-header-menubar__menu {
    position: fixed; inset: 0 0 0 auto; z-index: 400;
    width: min(84vw, 22rem);
    padding: calc(5rem + calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1)) 0 calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.16 );
    transform: translateX(100%);
    transition: transform 0ms cubic-bezier(0.2, 0, 0, 1);
    overflow-y: auto;
  }
  .site-header-menubar__menu-list { flex-direction: column; max-width: none; }
  .site-header-menubar__menu-list > li { flex: none; border-inline: 0; border-block-end: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
  .site-header-menubar__menu-list > li:last-child { border-inline-end: 0; }
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-summary { text-align: left; padding-inline: calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1); }
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-trigger { background-image: none; }

  /* 階層メニュー(.ui-subnav)のSP平坦化は共有語彙側の既定（display切替のみ・position無し）
     に委ねる。ここでの追加宣言は不要（.ui-mega と同じ規約）。 */

  .site-header-menubar__scrim {
    display: block; position: fixed; inset: 0; z-index: 300;
    background: rgb(0 0 0 / 0.4); opacity: 0; visibility: hidden;
    transition: opacity 0ms cubic-bezier(0.2, 0, 0, 1), visibility 0ms;
  }

  /* トグルON → ドロワーを出す・スクリム表示・バーガーを×に */
  .site-header-menubar__toggle:checked ~ .site-header-menubar__menu { transform: translateX(0); }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__scrim { opacity: 1; visibility: visible; }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__burger span:nth-child(2) { opacity: 0; }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

}

/* PC: 階層メニューの hover 開閉は共有語彙 .ui-subnav-host の :hover/:focus-within（ui/components.css）
   に委ねる。旧144版はdetailsの[open]属性に依存しhoverだけでは開かなかったため、この位置に
   強制displayのフォールバック規則が必要だったが、共有語彙への移行でその制約が無くなり不要（撤去）。 */

/* ===== 3. MISSION part: footer-link-matrix（bake済み・sites/S01664-gojo/theme.css） ===== */
/* ============================================================
   footer-link-matrix / style.css
   列見出し＋子リンク群を4〜6列並べる多列リンクマトリクスフッター。
   既定は面色＝ブランド色（--color-primary）／文字＝--color-on-primary。
   出自: 実案件16件の棚卸し（「サイトマップ多段」9件が最頻出）＋UIギャラリー
        （design-library.jp フッターカテゴリ）のマトリクス型。
   前提: tokens / fluid / primitives / ui/components / motion.css
   差込:
     --footer-link-matrix-bg   面の背景（既定 --color-primary）
     --footer-link-matrix-fg   文字色（既定 --color-on-primary）
     --footer-ghost-*          ゴースト英字（site-footer 等と共通のダイヤル。下部参照）
   注: 固定要素を持たないが、既存フッター群と方針を揃え @media でレイアウト切替する
       （chrome系共通の掟 §6.5。フッターは常にビューポート全幅）。
   ============================================================ */

.footer-link-matrix {
  --footer-link-matrix-bg: #228B22;
  --footer-link-matrix-fg: #ffffff;
  --footer-link-matrix-line: color-mix(in srgb, #ffffff 30%, transparent);
  position: relative;
  background: #228B22;
  color: #ffffff;
  padding-block: calc(clamp(6rem,     5.75rem  + 1.111vw, 6.75rem) * 1.1) calc(clamp(3rem,     2.875rem + 0.556vw, 3.375rem)  * 1.1);
}

.footer-link-matrix__inner {
  position: relative;
  z-index: 10;
}

/* --- 1. リンクマトリクス（主役）: 列見出し＋子リンクの列を4〜6列。
   列数は固定せず auto-fit で可変。増減してもレイアウトは破綻しない。 --- */
.footer-link-matrix__col {
  display: flex;
  flex-direction: column;
  gap: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1);
}
/* 列見出し: h2/h3 は使わない（ページ本体の見出し階層と衝突するため）。
   既存フッター（sitefooter__company-name 等）と同じく ＜p＞ の強調文字で揃える。
   リンクにもテキストにもできる構造（実務ではどちらもある）。 */
.footer-link-matrix__col-head {
  margin: 0 0 calc(clamp(0.75rem,  0.708rem + 0.185vw, 0.875rem)  * 1.1);
  font-size: clamp(1rem,     0.958rem + 0.185vw, 1.125rem);
  font-weight: 700;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: 0.04em;
}
.footer-link-matrix__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(clamp(0.25rem,  0.229rem + 0.093vw, 0.313rem) * 1.1);
}
.footer-link-matrix__col-list a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-size: clamp(0.875rem, 0.854rem + 0.093vw, 0.938rem);
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity 0ms cubic-bezier(0, 0, 0.2, 1);
}
.footer-link-matrix__col-list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; }

/* --- 4. 法務リンク＋コピーライト（常時） --- */
.footer-link-matrix__legal {
  display: flex;
  flex-wrap: wrap;
  gap: calc(clamp(1rem,     0.958rem + 0.185vw, 1.125rem)   * 1.1) calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
  justify-content: space-between;
  align-items: center;
  padding-block-start: calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
  margin-block-start: calc(clamp(3rem,     2.875rem + 0.556vw, 3.375rem)  * 1.1);
  border-block-start: 1px solid color-mix(in srgb, #ffffff 30%, transparent);
}
.footer-link-matrix__legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1) calc(clamp(1.5rem,   1.438rem + 0.278vw, 1.688rem)   * 1.1); }
.footer-link-matrix__legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; font-size: clamp(0.875rem, 0.854rem + 0.093vw, 0.938rem); opacity: 0.9; }
.footer-link-matrix__legal-links a:hover { opacity: 1; }
.footer-link-matrix__copy { font-size: clamp(0.75rem,  0.729rem + 0.093vw, 0.813rem); letter-spacing: 0.04em; opacity: 0.8; }
@supports (-webkit-text-stroke: 1px black) {
  .footer-link-matrix--ghost.footer-link-matrix--ghost-outline .footer-link-matrix__ghost

}

/* ============================================================
   SP: 46rem 未満で中央寄せの縦積みに（chrome系共通の掟 §6.5 に合わせ @media）
   ============================================================ */
@media (max-width: 46rem) {
  .footer-link-matrix { padding-block-start: calc(clamp(4rem,     3.833rem + 0.741vw, 4.5rem) * 1.1); }
  .footer-link-matrix__matrix { text-align: center; }
  .footer-link-matrix__col-list { align-items: center; }

  .footer-link-matrix__legal { flex-direction: column; text-align: center; }

}

/* ===== 3. MISSION part: stats-band（bake済み・sites/S01664-gojo/theme.css） ===== */
/* ============================================================
   stats-band / style.css
   「数字で見る◯◯」実績スタッツ帯。左に見出し（アイブロウ＋一言）、
   右に左罫線アクセント付きの巨大数字＋単位＋補足ラベルを複数並べる。
   実案件25件中13件で同型が出現した最頻出の空白パーツ（資産化調査 2026-07-09）。
   カウントアップ演出は R-16 準拠の受け皿方式: 最終値をHTMLに直書きし
   （JSが動かなくても数字は見える）、data-count 属性を site.js が
   スクロール発火でアニメーションする（納品時オプション）。
   前提: tokens / fluid / primitives / ui/components / motion.css
   差込: --stb-pad（セクション上下余白: 既定 --space-xl。帯なので控えめ）
         --stb-bg / --stb-ink（帯の背景/文字色: 既定 --color-bg / --color-text。
                               ダーク帯は --stb-bg: #11141d 等を指定）
         --stb-min（数字項目の最小幅=列数の分岐点: 既定 12rem）
         --stb-value-size（巨大数字のfont-size: 既定は現状のclamp式）
   バリアント: --stacked（見出しを上・数字を下に積む全幅版）
   出自: 実案件資産化（DPS/サン建創/鳴海/MORITA/中山/田原/SEIKEN/上岡/
         ブライト/創墨社/ヤサカ/御槙/佐々木の同型13件を統合。imports/clients 参照）
   ============================================================ */

.stats-band {
  container-type: inline-size;
  padding-block: calc(clamp(3rem,     2.875rem + 0.556vw, 3.375rem)  * 1.1);
  padding-inline: calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
  background: #FFFFFF;
  color: #232A20;
}

.stats-band__inner {
  display: flex;
  flex-direction: column;
  gap: calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
  margin-inline: auto;
  max-inline-size: 1280px;
}

/* 見出し側: アイブロウ（短いラベル）＋一言リード */
.stats-band__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-inline-start: calc(1.5rem + calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1));
  font-size: clamp(1rem,     0.958rem + 0.185vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #228B22;
  /* アイキャッチ前の短い横線。CueZilla AddCssInfoが ::before の content 宣言を
     サニタイズで除去するため（R-27）、要素自身の background-image で描画する。
     linear-gradient はSVGデータURIと異なりcurrentColorをそのまま解決できる。 */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.5rem 2px;
}
.stats-band__lead {
  margin: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1) 0 0;
  max-inline-size: 16em;
  font-size: clamp(0.875rem, 0.854rem + 0.093vw, 0.938rem);
  opacity: 0.75;
}

/* 数字グリッド */
.stats-band__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
  min-inline-size: 0;
}

.stats-band__stat {
  border-inline-start: 2px solid color-mix(in srgb, #228B22 60%, transparent);
  padding-inline-start: calc(clamp(1.5rem,   1.438rem + 0.278vw, 1.688rem)   * 1.1);
}

/* 数字行: 巨大数字＋前置/後置の単位（小さめ）をベースライン揃え */
.stats-band__value {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.375rem, 6cqi, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.stats-band__num { color: #228B22; font-variant-numeric: tabular-nums; }
.stats-band__unit {
  font-size: 0.3em;
  font-weight: 700;
  opacity: 0.8;
  margin-inline: 0.1em;
  letter-spacing: 0;
}

.stats-band__label {
  margin: calc(clamp(0.75rem,  0.708rem + 0.185vw, 0.875rem)  * 1.1) 0 0;
  font-size: clamp(0.875rem, 0.854rem + 0.093vw, 0.938rem);
  opacity: 0.75;
}

/* 広幅: 見出し左・数字右の帯レイアウト */
@container (min-width: 56rem) {
  .stats-band__head { inline-size: 14rem; }
}

/* ===== 3. MISSION part: cta-band（bake済み・sites/S01664-gojo/theme.css） ===== */
/* ============================================================
   cta-band / style.css
   全幅の行動喚起バンド（見出し＋ボタン）。既定はダーク面。
   ボタンは共有 .ui-btn。体裁トークン追従。
   前提: tokens / fluid / primitives / ui/components / motion.css
   差込: --cta-bg / --cta-fg / 背景画像 --cta-image / --cta-title-size（見出しのfont-size。既定は現状のclamp式）
   ============================================================ */

.cta-band {
  position: relative; container-type: inline-size; isolation: isolate;
  background:
    radial-gradient(85% 140% at 12% 115%, color-mix(in srgb, #228B22 32%, transparent), transparent 58%),
    radial-gradient(70% 120% at 92% -20%, color-mix(in srgb, #228B22 14%, transparent), transparent 55%),
    #11141d;
  color: #f7f8fa;
  overflow: hidden;
}
.cta-band__inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(clamp(1.5rem,   1.438rem + 0.278vw, 1.688rem)   * 1.1) calc(clamp(4rem,     3.833rem + 0.741vw, 4.5rem) * 1.1);
  padding: calc(clamp(6rem,     5.75rem  + 1.111vw, 6.75rem) * 1.1) calc(clamp(2rem,     1.917rem + 0.370vw, 2.25rem)   * 1.1);
  text-align: center;
}
.cta-band__copy { display: flex; flex-direction: column; gap: calc(clamp(0.5rem,   0.479rem + 0.093vw, 0.563rem) * 1.1); align-items: center; }
.cta-band__title { font-size: clamp(1.7rem, 4.5cqi, 2.8rem); letter-spacing: 0.08em; }
.cta-band__sub { margin: 0; font-size: clamp(0.875rem, 0.854rem + 0.093vw, 0.938rem); letter-spacing: 0.18em; opacity: 0.7; }

@container (max-width: 40rem) {
  .cta-band__inner { flex-direction: column; gap: calc(clamp(1.5rem,   1.438rem + 0.278vw, 1.688rem)   * 1.1); padding-block: calc(clamp(3rem,     2.875rem + 0.556vw, 3.375rem)  * 1.1); }
  .cta-band__title { font-size: clamp(1.438rem, 1.333rem + 0.463vw, 1.75rem); }
}

/* ===== 4. 案件CSS（トンマナ・顔・パーツへの従属調整）★最後に置く＝ここが勝つ ===== */
/* ============================================================
   株式会社五常（S01664）トップページ草案 style.css
   ★共通1ファイル集中管理（design_rules「HTML版草案生成時の追加ルール」）
   値の正本: 1_ディレクション/契約.md ```確定値``` / ```署名DNA```
   ★署名（参考② masatokisangyo.com より・2026-08-31 指差し）:
     「丸ゴシック最太（900）と縦書きの併用」＝太らせず"書字方向を変えて"強調する
   ============================================================ */

:root{
  /* --- パレット（契約.md 署名DNA。★赤は使用禁止・②コンセプトシート§7） --- */
  --green:        #228B22;  /* メイン緑：面・大きい文字専用（白文字 4.39:1＝大テキストのみ） */
  --green-ink:    #1B7A1B;  /* 白地の小さい文字／白文字を載せるボタン地（5.46:1） */
  --green-dark:   #14601A;  /* 本文を載せる濃地（白文字 7.73:1） */
  --beige:        #FAF6EA;  /* ベース（生成りベージュ） */
  --beige-deep:   #F2EAD6;  /* 帯 */
  --yellow:       #F5B301;  /* アクセント：地としてのみ。載せる文字は --ink（7.96:1） */
  --ink:          #232A20;  /* 文字（主役色に寄せた極暗色＝参考②の手つき） */
  --ink-sub:      #55604E;  /* 補助文字（白地 6.0:1） */
  --white:        #FFFFFF;

  /* --- タイポ（確定値 body:17 / jump:3.3 / font-size-kinds:12） --- */
  --font-ja: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Outfit", var(--font-ja);
  --t-eyebrow: 13px;
  --t-small:   15px;   /* キャプション・法的表記のみ。本文には使わない（二重基準の禁止） */
  --t-body:    17px;
  --t-lead:    19px;
  --t-h4:      22px;
  --t-h3:      26px;
  --t-h2:      36px;
  --t-num:     44px;
  --t-h1:      56px;   /* 56 ÷ 17 = 3.29 ＝ 量契約 heading-ratio 3.3±1.0 */
  --lh-heading: 1.3;
  --lh-body:    1.9;   /* 参考②実測1.95。見出し1.3との差が「息」をつくる */

  /* --- 余白（design_rules「セクション間の余白は背景色で決める」・density 1.1） --- */
  --row-pad: clamp(72px, 8vw, 112px);  /* P_large：Rowの上下端＝背景の切り替わり */
  --sec-gap: clamp(44px, 5vw, 64px);   /* P_medium：同一Row内のセクション間 */
  --el-gap:  24px;                     /* P_small：セクション内の要素間 */

  --radius:   19px;                    /* roundness 1.6 */
  --radius-s: 12px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-ja);
  font-size:var(--t-body);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:.01em;
  color:var(--ink);
  background:var(--white);
}
a{ color:var(--green-dark); }

/* 見出しは丸ゴシック最太で通す＝★署名の実体 */
h1, h2, h3, .site-h2{
  font-family:var(--font-ja);
  font-weight:900;
  line-height:var(--lh-heading);
  letter-spacing:.02em;
  margin:0;
}

/* 英字アイブロウ（①ページ構成 §5-2：H2直上・13px相当・字間0.2em・グリーン） */
.site-eyebrow{
  display:block;
  font-family:var(--font-en);
  font-size:var(--t-eyebrow);
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.6;
  color:var(--green-ink);
  margin-bottom:6px;
}

/* ============ Row（背景色でセクション余白を決める） ============ */
.site-row{ padding-block:var(--row-pad); }
.site-row > * + *{ margin-top:var(--sec-gap); }
.site-row > section{ padding-block:0; }
.site-row--beige{ background:var(--beige); }

.l-center{ max-width:var(--center-max, 1160px); }

/* ============ FV（顔＝自作。★署名の縦書きはここが主役） ============ */
.site-fv{
  position:relative;
  min-height:clamp(520px, 78vh, 760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--green-dark);
}
.site-fv__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,48,20,.20) 0%, rgba(20,48,20,.55) 55%, rgba(20,48,20,.86) 100%);
}
.site-fv__inner{ position:relative; padding-block:var(--row-pad); color:var(--white); width:100%; }
.site-fv__label{
  margin:0 0 var(--el-gap);
  font-size:var(--t-body); font-weight:800;
  color:var(--white);
  background:var(--green-ink);
  display:inline-block; padding:6px 18px; border-radius:999px;
}
.site-fv__sub{
  margin:var(--el-gap) 0 0;
  font-size:var(--t-lead); font-weight:500; color:var(--white);
  text-shadow:0 1px 12px rgba(20,48,20,.6);
}

/* ★署名: 縦書きの標語（900px以上でのみ縦組み。狭幅は横書きに戻す） */
.site-catch-vertical{
  font-size:var(--t-h1);
  color:var(--white);
  letter-spacing:.06em;              /* 量契約 heading-letter-spacing 0.06±0.03 */
  text-shadow:0 2px 18px rgba(20,48,20,.55);
}
@media (min-width:900px){
  .site-fv{ align-items:center; }
  .site-fv__inner{ display:flex; flex-direction:column; align-items:flex-start; }
  .site-catch-vertical{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    max-height:min(60vh, 460px);
    margin-block:var(--el-gap);
  }
  .site-catch-vertical br{ display:none; }

}

/* ============ NEWS帯 ============ */
.site-newsbar{ background:var(--beige-deep); padding-block:20px; }

/* ============ ボタン（.ui-btn への案件側の従属調整） ============ */
.ui-btn{
  font-family:var(--font-ja);
  font-size:var(--t-body);          /* ★13px相当の既定を17pxへ。CTAコピーを本文より小さくしない */
  font-weight:800;
  letter-spacing:.04em;
  padding:.85em 1.9em;
  border-radius:999px;
  transition:transform .2s cubic-bezier(.22,1,.36,1), background .2s ease, filter .2s ease;
}
.ui-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.ui-btn--lg{ font-size:var(--t-lead); padding:1em 2.2em; }
.ui-btn--primary{ background:var(--green-ink); color:var(--white); }   /* 白文字 5.46:1 */
.site-btn-line{ background:#06C755; color:#08331A; }                   /* LINE（8.6:1） */
.site-hd-entry{ background:var(--yellow); color:var(--ink); }          /* 黄地＋濃色文字 7.96:1 */

/* ============ 数字（stats-band を案件トークンへ従属させる） ============ */
.stats-band{ background:transparent; padding-inline:0; }
.stats-band__value{ font-family:var(--font-en); font-weight:800; color:var(--green-dark); font-size:var(--t-num); line-height:1.15; }
.stats-band__num{ font-size:inherit; }
.stats-band__unit{ font-size:var(--t-h4); }
.stats-band__label{ font-size:var(--t-body); color:var(--ink); line-height:var(--lh-body); }
.stats-band__stat{ background:var(--white); border-radius:var(--radius); padding:24px; border:2px solid var(--beige-deep); }

/* ============ フッター（footer-link-matrix を案件トークンへ従属） ============ */
.footer-link-matrix{ background:var(--green-dark); color:var(--white); }
.footer-link-matrix a{ color:var(--white); }
.footer-link-matrix__col-head{ font-size:var(--t-h4); font-weight:900; }
.footer-link-matrix__col-list{ font-size:var(--t-body); }
.site-foot-info{ margin-top:var(--sec-gap); font-size:var(--t-body); line-height:var(--lh-body); }
.site-foot-info__name{ font-weight:900; margin:0 0 8px; }
.site-foot-info__addr{ font-style:normal; margin:0; }
.site-foot-info p{ margin:0 0 4px; }
.footer-link-matrix__copy{ font-size:var(--t-small); }

/* ============ 出現演出（JS不要・view() タイムライン。動き＝自由軸） ============ */
@keyframes site-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@supports (animation-timeline: view()){
  .site-reveal{
    animation:site-rise cubic-bezier(.22,1,.36,1) both;
    animation-timeline:view();
    animation-range:entry 0% entry 45%;
  }

}
@media (prefers-reduced-motion: reduce){
  .site-reveal{ animation:none !important; opacity:1 !important; transform:none !important; }
  .ui-btn{ transition:none; }

}

/* ★JSが動かないときの復帰（design-top-draft 手順4 必須ブロック） */
@media (scripting: none){
  [data-reveal], .site-reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
[data-opening],
.opening{ display:none !important; }

}

/* ============ 未支給の写真スロット（草案の可視プレースホルダ） ============ */
/* ★[data-ph]{position:relative} は書かない。クラスと同詳細度(0,1,0)で後勝ちし、
   position:absolute で敷いている FV 写真面（.site-fv__photo）を 0×0 に潰した（2026-08-31 実測） */

/* ============ MISSION primitives の必須ユーティリティ（bake不要・値固定） ============ */
.u-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:where(a, input, [tabindex]):focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
}

/* ============================================================
   草案 第1回自己確認（2026-08-31）の修正
   ============================================================ */

/* ① 縦書き標語は原稿の ＜br＞ で2列に割る（3列に折れて読み順が分かりにくかった） */
@media (min-width:900px){
  .site-catch-vertical{ max-height:none; }
  .site-catch-vertical br{ display:inline; }   /* 縦書きでは改列になる＝原稿の意味の切れ目で割れる */

}

/* ② 数字は見出しを上・カードを下の stacked 型にする（見出し列が狭く「数字で見る五／常」と縦割れしていた）
      ＋4項目なので PC4列 / タブレット2列 / モバイル1列で右の空きを作らない（#16 版面充填率） */
.stats-band__inner{ flex-direction:column !important; }
.stats-band__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px;
  width:100%;
}
@media (max-width:1023px){ .stats-band__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } 
}
@media (max-width:599px){ .stats-band__grid{ grid-template-columns:1fr; } 
}

/* ③ FVの写真プレースホルダのタグは右下へ固定（中央配置だと本文と重なって見切れていた） */
.site-fv__phtag{
  position:absolute; right:24px; bottom:24px;
  display:inline-block;
}

/* ④ ヘッダーのブランド副題・NEWSのリンクは下線を出さない（ナビ以外の既定下線対策） */
.site-header-menubar__brand-sub{ text-decoration:none; }

/* ⑤ FV内の要素間を詰める（縦書きの脇に余白が溜まっていた） */
@media (min-width:900px){
  .site-fv__inner{ gap:0; }
  .site-catch-vertical{ margin-block:8px; }
  .site-fv__sub{ margin-top:12px; }

}

/* ============ 第2回自己確認（2026-08-31）の修正 ============ */
/* 版面は 1120px に統一（1240pxだと1280幅で左右の余白がほぼ消えて端に張り付いていた） */
.stats-band__inner{ max-width:1120px; margin-inline:auto; padding-inline:26px; }
.stats-band__head{ text-align:left; }
.stats-band__lead{ font-size:var(--t-h2); white-space:nowrap; }

/* 写真プレースホルダを「何が入るか読める枠」にする（草案での申し送りを兼ねる） */
.site-fv__phtag{
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  width:min(320px, 38vw);
  display:block; text-align:left;
  font-family:var(--font-ja); font-size:var(--t-small); font-weight:500; letter-spacing:.02em;
  line-height:1.7;
  color:rgba(255,255,255,.9);
  background:rgba(20,48,20,.35);
  border:2px dashed rgba(255,255,255,.55);
  border-radius:var(--radius);
  padding:18px 20px;
}
.site-fv__phtag b{
  display:block; font-family:var(--font-en); font-size:var(--t-eyebrow); font-weight:700;
  letter-spacing:.2em; color:var(--yellow); margin-bottom:6px;
}
.site-fv__phtag small{ display:block; margin-top:8px; font-size:13px; color:rgba(255,255,255,.75); }
@media (max-width:899px){
  .site-fv__phtag{ position:static; transform:none; width:auto; margin:0 0 var(--el-gap); }
  .site-fv__photo

}

/* ============ 第3回自己確認（モバイル）の修正 ============ */
@media (max-width:899px){
  /* 写真プレースホルダは写真面の下端に置き、本文とは重ねない（重なって文字が透けていた） */
  .site-fv__phtag{
    position:absolute; left:20px; right:20px; bottom:20px; top:auto;
    transform:none; width:auto;
  }
  .site-fv__inner{ padding-bottom:calc(var(--row-pad) + 200px); }

}
/* フッターはモバイルでも左揃え（中央寄せだとリンク列が読みにくい） */
.footer-link-matrix__matrix,
.footer-link-matrix__col,
.footer-link-matrix__col-head,
.footer-link-matrix__col-list,
.site-foot-info{ text-align:left; }

/* ============ コントラスト実測（contrast-pixels）で出たAA割れ40件の修正 ============ */
/* ①濃地用の明るい黄＝lite値を持つ（design_rules「アクセント色は ink/lite の2値で最初から持つ」）
     #F5B301 は濃緑(#14601A)上で 4.17:1 と基準割れ。#FFD152 で 5.33:1 */
:root{ --yellow-lite:#FFD152; }
.footer-link-matrix__col-head .site-eyebrow{ color:var(--yellow-lite); }

/* ②LINEボタンの文字色。footer の a{color:#fff}（0,1,1）に負けて白のままだった（2.26:1）
     → フッター内で指定し直す（濃色文字で 8.6:1） */
.footer-link-matrix .site-btn-line{ color:#08331A; }/* ③ヘッダーの副題・受付時間はパーツ既定のグレー rgb(139,146,163)＝3.12:1 だった
     → 本文系の補助色へ（白地 6.0:1）。サイズも本文16px以上を保つ */
.site-header-menubar__brand-sub{ color:var(--ink-sub); }

/* 本文行間: 参考②の実測1.95より、社内教訓 body-lineheight-paragraph-spacing.md の
   「和文横組み本文は 2.0〜2.3」を優先して 2.0 にする（measure-pages が 1.9 で警告） */
:root{ --lh-body:2.0; }

/* ============ measure-pages の機械可NG 7件の修正 ============ */
/* #10 タップ領域: フッターのリンク列が 44x28 / 28x28 だった（WCAG 2.5.5） */
.footer-link-matrix__col-list a,
.footer-link-matrix__legal-links a{
  display:inline-flex; align-items:center; min-height:44px;
}
/* #14 行末孤立: 最終行が1〜2文字になる箇所を組版側で回避（本文は1文字も変えない） */
p, li, dd, td, .stats-band__label{ text-wrap:pretty; }
/* 署名DNA reveal: クラスに加えて [data-reveal] を持たせる（@media(scripting:none) の受け皿と一致させる） */
[data-reveal]{ }

/* #14 行末孤立: FVラベルが狭幅で「工事」2文字の行末孤立になっていた（本文は変えずに組版で解消） */
.site-fv__label{ word-break:keep-all; }   /* 改行位置は ＜wbr＞ だけに許す。balance は「草／加市」で割れた */

/* ============================================================
   4-c 全セクション実装ぶんのCSS（②コンセプトシート §7 の指定意匠）
   カード／吹き出し／ポラロイド風フレーム・斜め配置 は案件固有の明示指定なので実装する
   ============================================================ */

/* --- セクションの骨格 --- */
.site-sec{ margin-inline:auto; max-width:1120px; padding-inline:26px; }
.site-sec__body{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px);
  align-items:start; margin-top:var(--el-gap);
}
.site-sec__body--rev .site-photo{ order:-1; }
.site-sec__text > p{ margin:0 0 1.1em; }
.site-sec__text > p:last-child{ margin-bottom:0; }
.site-actions{ margin-top:var(--el-gap); display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:899px){
  .site-sec__body{ grid-template-columns:1fr; }
  /* 狭幅の縦積みは「画像→テキスト」（論点 narrow-stack-order の回答・全セクション共通） */
  .site-sec__body .site-photo{ order:-1; }

}

/* --- 写真プレースホルダ（ポラロイド風フレーム＋微傾斜） --- */
.site-photo{ margin:0; }
.site-photo--polaroid{
  background:var(--white);
  padding:14px 14px 12px;
  border-radius:var(--radius-s);
  box-shadow:0 10px 28px rgba(35,42,32,.16);
}
.site-photo figcaption{
  font-size:var(--t-small); color:var(--ink-sub); line-height:1.7; margin-top:10px;
}
.site-photo__frame{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding:16px;
  border:2px dashed rgba(35,42,32,.35);
  border-radius:var(--radius-s);
  background:
    repeating-linear-gradient(135deg, rgba(35,42,32,.045) 0 12px, rgba(35,42,32,0) 12px 24px),
    var(--beige-deep);
}
.site-photo__frame--43{ aspect-ratio:4/3; }
.site-photo__frame--34{ aspect-ratio:3/4; }
.site-photo__frame--11{ aspect-ratio:1/1; }
.site-photo__frame--169{ aspect-ratio:16/9; }
.site-photo__tag{
  font-family:var(--font-en); font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.2em;
  color:var(--green-dark);
}
.site-photo__desc{ font-size:var(--t-small); line-height:1.7; color:var(--ink); }

/* --- 表（勤務時間など） --- */
.site-table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:var(--sec-gap);
  border:2px solid var(--beige-deep); border-radius:var(--radius); overflow:hidden;
  font-size:var(--t-body); line-height:var(--lh-body);
}
.site-table th,.site-table td{ padding:16px 20px; text-align:left; vertical-align:top; }
.site-table th{ width:12em; background:var(--beige); font-weight:900; }
.site-table tr + tr th,.site-table tr + tr td{ border-top:2px solid var(--beige-deep); }
@media (max-width:599px){
  .site-table th,.site-table td{ display:block; width:auto; }
  /* 縦積み時は見出しの下に少しだけ余白を置く（詰まって見えるため）
     ★年収モデル表（--salary）は縦積みにしないので除外 */
  .site-table tr + tr th{ border-top:2px solid var(--beige-deep); }
  .site-table tr + tr td{ border-top:0; }

}

/* --- カード（②§7 UI要素） --- */
.site-cards{ display:grid; gap:24px; margin-top:var(--sec-gap); }
.site-cards--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:899px){ .site-cards--3{ grid-template-columns:1fr; } 
}
.site-card{
  background:var(--white); border:2px solid var(--beige-deep);
  border-radius:var(--radius); padding:20px;
}
.site-card__title{ font-size:var(--t-h4); margin:16px 0 10px; color:var(--green-dark); }
.site-card > p{ margin:0; }
.site-card__meta{ font-size:var(--t-small); color:var(--ink-sub); margin-top:12px !important; }

/* --- 吹き出し（②§7 UI要素） --- */
.site-balloon{
  position:relative;
  background:var(--beige);
  border:2px solid var(--green);
  border-radius:var(--radius);
  padding:18px 22px;
  font-weight:800;
  color:var(--green-dark);
  margin:1.4em 0 1.8em !important;
}
.site-balloon::after{
  content:""; position:absolute; left:40px; bottom:-14px;
  width:22px; height:14px; background:var(--beige);
  clip-path:polygon(0 0, 100% 0, 22% 100%);
  border-left:2px solid var(--green);
}

/* --- 申し送り（公開前に削除する注記） --- */
.site-todo{
  border:2px dashed var(--yellow); background:#FFFBF0;
  border-radius:var(--radius-s); padding:16px 20px;
  font-size:var(--t-body); line-height:var(--lh-body); margin:var(--el-gap) 0 0;
}

/* --- CTA帯（フルブリード＝Row paddingを掛けない。内側の余白を --row-pad に合わせる） --- */
.site-cta{ padding-block:var(--row-pad); }
.site-cta--green{ background:var(--green-dark); color:var(--white); }
.site-cta--deep{ background:var(--green-dark); color:var(--white); }
.site-cta__inner{
  margin-inline:auto; max-width:1120px; padding-inline:26px;
  display:grid; grid-template-columns:1.2fr auto; gap:clamp(24px,4vw,56px); align-items:center;
}
@media (max-width:899px){ .site-cta__inner{ grid-template-columns:1fr; } 
}
.site-cta .site-h2{ color:var(--white); margin-bottom:var(--el-gap); }
.site-cta .site-eyebrow{ color:var(--yellow-lite); }
.site-cta p{ margin:0 0 .9em; }
.site-cta__tel{ font-weight:800; font-size:var(--t-lead); }
.site-cta__tel a{ color:var(--yellow-lite); }
.site-cta__actions{ display:flex; flex-direction:column; gap:12px; margin:0; }
@media (max-width:899px){ .site-cta__actions{ flex-direction:row; flex-wrap:wrap; } 
}
.site-btn-oncolor{ background:var(--yellow); color:var(--ink); }          /* 黄地＋濃色文字 7.96:1 */
.site-btn-ghost{ background:var(--white); color:var(--green-dark); }     /* 濃地の上の第2ボタン 7.73:1 */
.site-cta .site-btn-line{ color:#08331A; }

/* --- ★署名の縦書き2箇所目: MESSAGE の見出し（900px以上でのみ縦組み） --- */
@media (min-width:900px){
  .site-catch-vertical--sub{
    writing-mode:vertical-rl; text-orientation:mixed;
    letter-spacing:.06em;
    font-size:var(--t-h2);
    max-height:none;
    margin:0 0 var(--el-gap) auto;
  }
  .site-sec__body--rev .site-sec__text{ display:flex; flex-direction:column; }

}

/* ============ 全ページ実装後の自己確認の修正 ============ */
/* MESSAGE は［写真｜本文｜縦書き見出し］の3列。縦書き見出しを本文列に入れると、
   見出しの高さぶん本文が押し下げられて左に大きな空白ができていた */
@media (min-width:900px){
  .site-sec__body--message{ grid-template-columns:.85fr 1fr auto; align-items:center; }
  .site-sec__body--message .site-catch-vertical--sub{ margin:0; align-self:center; }

}
@media (max-width:899px){
  /* 狭幅では横書きに戻し、本文の前（画像→見出し→本文）に置く */
  .site-sec__body--message .site-catch-vertical--sub{ order:-1; margin:0 0 var(--el-gap); }

}
/* #14 行末孤立: プレースホルダのキャプションも組版側で回避 */
figcaption{ text-wrap:pretty; }
/* CTA帯の見出しが「次の現／場を」等で割れていたので均等割りにする */
.site-cta .site-h2{ text-wrap:balance; }
.site-cta__inner{ grid-template-columns:1.5fr auto; }
@media (max-width:899px){ .site-cta__inner{ grid-template-columns:1fr; } 
}

/* CTA見出しが「次の現／場を」「ご応募／も。」と語中で割れていた。
   balance だけでは日本語は任意位置で折れるので、句読点でだけ折る（溢れる時だけ任意折り） */
.site-cta .site-h2{ word-break:keep-all; overflow-wrap:break-word; }
/* 写真枠が狭幅で画面いっぱいになり主役を食っていた（特に3:4のポートレート） */

/* ============ gate-run（フル）の指摘の修正 ============ */
/* ① .site-h2 に font-size が当たっておらず、セクション見出しがブラウザ既定の25.5pxだった
      （h1 56 / CTA見出し44.8 と不揃い）。トークンへ揃える */
.site-h2{ font-size:var(--t-h2); }
.cta-band__title{ font-size:var(--t-h2); }
/* ② 見出しの字間。★署名の縦書き2箇所は0.06em、その他の見出しは0.04emに揃える
      （量契約 heading-letter-spacing 0.06±0.03＝0.03〜0.09 の範囲に収める） */
h1, h2, h3, .site-h2{ letter-spacing:.04em; }
.site-catch-vertical,.site-catch-vertical--sub{ letter-spacing:.06em; }
/* ③ ヘッダーの電話番号が -0.02em の負トラッキングで、量契約の見出し字間の実測を持っていっていた */
/* ④ 日本語の禁則（行頭に「。」「っ」「ッ」「ー」が来ていた） */
body{ line-break:strict; }
/* ⑤ 行末孤立（1〜2文字）を組版側で回避。span系も対象に含める */
p,li,dd,td,figcaption,
.site-photo__desc,.site-fv__phtag,.site-card__meta,.stats-band__label{ text-wrap:pretty; }
/* ⑥ 原稿の ＜br＞ が狭幅では途中の行を極端に短くしていた（本文は変えずに改行だけ無効化） */
@media (max-width:640px){ .site-fv__sub br{ display:none; } 
}

/* ⑦ 見出しは句読点でだけ折る（36pxへ上げた結果「…帰／る。」「…魅／力」で割れた）。
      溢れる時だけ任意位置で折るフォールバックを添える */
h1,h2,h3,.site-h2,.cta-band__title{ text-wrap:balance; word-break:keep-all; overflow-wrap:break-word; }
/* ⑧ ヘッダーの電話番号が36px＝見出し級で、量契約の「見出しの字間」の実測を持っていっていた。
      見出し(36px)より下のH3級に落とす（連絡先であって見出しではない） */
.site-header-menubar__tel{ font-size:var(--t-h3); letter-spacing:.02em; }

/* ⑨ 見出しに text-wrap:balance を当てると「五常で働く3つの／魅力」のように
      1行に収まる見出しまで2行に割られて行末孤立になった。pretty（孤立回避）に替える */
h1,h2,h3,.site-h2,.cta-band__title,.stats-band__lead,.ui-heading{ text-wrap:pretty; }
/* ⑩ 写真枠のラベルは折り返さない */

/* ⑪ 狭幅では見出し36pxが版面に収まらず「…3つの／魅力」と2文字だけの行末が残る。
      モバイルだけ見出しを1段落とす（ジャンプ率の検定はPC幅で行うので契約には影響しない） */
@media (max-width:599px){ :root{ --t-h2:28px; --t-h1:40px; } 
}
/* ⑫ 数字の見出し列は常に全幅（パーツ既定の flex 割り付けが残ると狭い列で折り返す） */
.stats-band__head{ width:100%; max-width:none; flex:0 0 auto; }

/* ⑬ モバイルでFVキャッチの「。」が1文字だけ最終行に残っていた（40px→34px） */
@media (max-width:599px){ :root{ --t-h1:34px; } 
}

/* ⑭ 草案プレースホルダのラベル・説明は折り返さない／折り返しても孤立させない
      （responsive の掃引で「5」「）」「ろ姿」等の1〜2文字の行末が出ていた） */
.site-photo__tag{ white-space:nowrap; word-break:keep-all; overflow:visible; }
.site-photo__desc{ text-wrap:pretty; word-break:keep-all; overflow-wrap:break-word; }
.site-fv__phtag{ width:min(420px, 44vw); }

/* ⑮ ★写真枠が193pxまで縮んでいた真因: .site-photo の margin-inline:auto。
      グリッド項目にインライン方向の auto マージンを付けると **ストレッチが無効になり
      fit-content（内容幅）に縮む**（列は457pxあるのに枠は162pxだった）。
      センタリングは justify-self で行い、幅は列いっぱいに取る。
      ＝ラベル「PHOTO 05」や「代表のポートレート」が2行に折れていたのはこれが原因で、
        文字側の問題ではなかった。 */
.site-photo{ width:100%; max-width:560px; margin-inline:0; justify-self:center; }
.site-photo--portrait{ max-width:420px; }

/* ⑯（撤回）.site-photo__desc への white-space:nowrap は入れない。
   responsive-audit の「行末が2文字だけ」は実測で1行レンダリング（getClientRects()=1）を
   2行と数えた誤検知で、nowrap を当てても報告が変わらなかった＝文字側の問題ではない。
   狭幅でラベルが切れる副作用だけが残るため撤回した（2026-09-01 実測）。 */

/* ============================================================
   下層ページ（design-buildout）
   ★契約: jump 2.12（下層H1 36px ÷ 本文17px）／署名DNAはトップから継承
   ============================================================ */

/* --- 本文へスキップ（page-new.mjs が全下層に入れる） --- */
.site-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--yellow); color:var(--ink); font-weight:800;
  padding:12px 20px; border-radius:0 0 var(--radius-s) 0;
}
.site-skip:focus{ left:0; }

/* --- 下層ヒーロー帯（顔＝自作。②§7「英字ラベル＋ページ名のみ」） --- */
.site-subhead{
  position:relative; isolation:isolate;
  background:var(--green-dark) url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/subhead-city.webp") center 72% / cover no-repeat;
  color:var(--white);
  padding-block:clamp(48px, 6vw, 88px);
}
/* 写真の上に見出しを載せるため、暗い緑のベールを敷く */
.site-subhead::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(11,58,20,.86) 0%, rgba(11,58,20,.7) 55%, rgba(11,58,20,.5) 100%);
}
.site-subhead__inner{ position:relative; }
.site-subhead__en{ color:var(--yellow-lite); margin-bottom:10px; }
.site-subhead__title{
  font-size:var(--t-h2);          /* 36px ＝ 契約 jump 2.12 */
  color:var(--white);
  letter-spacing:.04em;
  margin:0;
}

/* --- パンくず --- */
.p-breadcrumb{ background:var(--beige-deep); padding-block:12px; }
.p-breadcrumb__inner{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  list-style:none; margin:0; font-size:var(--t-small);
}
.p-breadcrumb__item + .p-breadcrumb__item::before{ content:"／"; margin-right:10px; color:var(--ink-sub); }
.p-breadcrumb a{ color:var(--green-dark); }

/* --- カード 2列（誤解カードのように本文が長いもの） --- */
@media (max-width:899px){ .site-cards--2 
}
.site-card h3 + p{ margin-top:0; }
.site-card p + p{ margin-top:.9em; }

/* --- STEPカード（作業の流れ） --- */
.site-steps{
  list-style:none; margin:var(--sec-gap) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;
  counter-reset:step;
}
@media (max-width:1023px){ .site-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); } 
}
@media (max-width:599px){ .site-steps{ grid-template-columns:1fr; } 
}
.site-step{
  background:var(--white); border:2px solid var(--beige-deep);
  border-radius:var(--radius); padding:20px;
}
.site-step__title{ font-size:var(--t-h4); margin:16px 0 10px; color:var(--green-dark); }
.site-step > p{ margin:0; }

/* --- 横長の写真枠（セクション上部に敷くもの） --- */
.site-photo--wide{ max-width:none; margin-bottom:var(--sec-gap); }

/* ============ 下層1枚目のゲートで出た構造的不良の修正（★全ページに複製される型） ============ */
/* ① a11y anchor-under-header: 固定ヘッダー（実測 101px / 231px）の裏にアンカー着地が潜っていた
      （WCAG 2.2 2.4.11・R-18）。id を持つ要素すべてに退避距離を持たせる */
[id]{ scroll-margin-top:clamp(110px, 18vw, 250px); }

/* ② CLS 0.179: data-include のヘッダーが後から差し込まれて本文が押し下げられていた。
      差し込み前から高さを確保しておく（実測ヘッダー高 101px / 231px） */
[data-include]{ display:block; min-height:101px; }
@media (min-width:900px){ [data-include]{ min-height:231px; } 
}

/* ④ #14 行末孤立: 下層H2が狭幅で「…ではありま／せん」と割れる。句読点でだけ折る */
.site-h2, .site-subhead__title{ word-break:keep-all; overflow-wrap:break-word; }

/* ⑤ 下層H2は狭幅（375px）で「…ではありま／せん」と2文字の行末が残る。モバイルだけ1段落とす */
@media (max-width:599px){ :root{ --t-h2:24px; } 
}

/* ⑥ 狭幅の左右余白を26px→18pxに詰める。375px幅で本文に使える幅が323→339pxになり、
      下層H2「ただ壊す仕事ではありません」（13字）が1行に収まる。
      ★見出しをさらに小さくする方向（24→22px）では逃げない＝版面側で解く（read-width の教訓） */
@media (max-width:599px){
  .site-sec, .stats-band__inner, .site-cta__inner{ padding-inline:18px; }
  .l-center{ padding-inline:18px; }

}

/* ============ 下層で追加した部品（採用系ページ） ============ */
.site-h3{ font-size:var(--t-h3); color:var(--green-dark); margin:1.4em 0 .5em; }
.site-h3:first-child{ margin-top:0; }
.site-note{ font-size:var(--t-small); color:var(--ink-sub); line-height:1.9; margin-top:var(--el-gap); }
/* 強調ボックス（募集資格など） */
/* 年収モデル表は見出し行を持つ */
.site-table thead th{ background:var(--green-dark); color:var(--white); }
@media (max-width:599px){
  .site-table--salary th,.site-table--salary td
  .site-table--salary th[scope="row"]

}
/* 読み進めナビ RECRUIT GUIDE（①§5-4） */
.site-guide__title{ border-bottom:4px solid var(--yellow); padding-bottom:10px; }
.site-guide__list li{ counter-increment:g; }
.site-guide__list a{
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:baseline;
  background:var(--white); border:2px solid var(--beige-deep); border-radius:var(--radius);
  padding:18px 22px; text-decoration:none; color:var(--ink);
  transition:border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.site-guide__list a:hover{ border-color:var(--green); transform:translateY(-2px); }

/* ⑦ 注記も本文サイズにする（design_rules「本文16px以上／二重基準を作らない」。
      色を落として階層をつけ、サイズでは落とさない） */
.site-note{ font-size:var(--t-body); }
/* ⑧ モバイルの下層H2は20px。原稿の見出しには読点の後に14〜16字続くものがあり
      （例「なぜ、早く終わっても日給は1日分なのか」）、24pxだと必ず1〜2文字の行末が残る。
      ★版面（左右18px）を先に広げたうえで、なお収まらないぶんをサイズで解いている */
@media (max-width:599px){ :root{ --t-h2:20px; } 
}

/* --- Pull Quote（①§5指定：1文・3行以内） --- */
.site-pull{
  margin:var(--sec-gap) 0; padding:24px 28px;
  border-left:8px solid var(--yellow);
  background:var(--white);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-ja); font-weight:900; font-size:var(--t-h3);
  line-height:1.6; color:var(--green-dark);
  word-break:keep-all; overflow-wrap:break-word;
}
/* --- 箇条書き --- */
.site-list{ margin:.6em 0 0; padding-left:1.3em; }
.site-list li{ margin-bottom:.4em; }
/* --- 読み進めナビ 5ステップ版（現在地つき） --- */
.site-guide__steps li{ counter-increment:g; }
.site-guide__steps .is-current .site-guide__cur{ border-color:var(--green); background:var(--beige); }
.site-guide__steps .is-next a{ border-color:var(--yellow); }

/* --- 写真を縦に2枚重ねる列（成長ステップ等） --- */
.site-photo-stack{ display:grid; gap:24px; align-content:start; }
/* --- STEP 4件のときは2列（3列だと最後が1枚だけ余る） --- */
@media (max-width:599px){ .site-steps--4 
}
/* --- 中央寄せのCTA（募集要項の直下） --- */
.site-actions--center{ justify-content:center; }
/* --- 白地の上に置く第2ボタン --- */
.site-btn-ghost2{ background:var(--white); color:var(--green-dark); border:2px solid var(--green); }

/* --- STEP/番号つき見出しは1つのテキストとして扱う（span で分けると
       measure-pages が別の行として数え、行末孤立の誤検出になる。2026-09-01 実測） --- */
.site-step__title, .site-card__title{ word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty; }
/* --- 3列カードの見出しは1段小さく（3列だと22pxで必ず折れて2文字の行末が残る） --- */
.site-cards--3 .site-card__title{ font-size:var(--t-lead); }
/* --- モバイルのH3も1段落とす --- */
@media (max-width:599px){ :root{ --t-h3:20px; } 
}/* ============================================================
   L008 / L011（rule-effect の落とし穴lint）の修正
   ============================================================ */
/* --- L008: hoverで変わるプロパティが transition に無く「そこだけ瞬時」になっていた。
       状態が変わる要素へ共通トランジションを1つ敷く（教訓 global-hover-transition-base）。
       ★入場演出（site-reveal）とは別レイヤー。reduced-motion では即時に戻す --- */
a,
label,
.ui-btn,
.ui-subnav,
.site-card,
.site-step,
.site-guide__steps a,
.site-guide__list a,
.footer-link-matrix__col-list a,
.footer-link-matrix__legal-links a,
.site-header-menubar__menu-list a,
.site-header-menubar__menu-list label,
.p-breadcrumb a,
.site-photo{
  transition:
    color .45s cubic-bezier(.22,1,.36,1),
    background-color .45s cubic-bezier(.22,1,.36,1),
    border-color .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    opacity .45s cubic-bezier(.22,1,.36,1),
    transform .45s cubic-bezier(.22,1,.36,1),
    filter .45s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){
  a, label, .ui-btn, .ui-subnav, .site-card, .site-step, .site-photo{ transition-duration:0s; }

}

/* --- L011: grid/flex の子が min-width:auto のまま器より広く、
       overflow-x:hidden に切られて「横スクロールも出ないのに文字が欠ける」状態だった --- */
.site-cta__inner > *,
.site-fv__inner > *,
.site-sec__body > *,
.site-cards > *,
.site-steps > *,
.site-guide__steps > *,
.site-guide__list > *,
.stats-band__grid > *{ min-width:0; }
/* 縦書きの標語は inline 方向の最小幅も外す（縦組みでは幅＝列幅） */
.site-catch-vertical{ min-inline-size:0; }

/* --- L008 残り3件: ナビの a / .ui-subnav-trigger / .ui-subnav-summary は
       パーツ側の (0,1,2) セレクタが要素セレクタ a(0,0,1) に勝つため、同じ詳細度で当て直す --- */
.site-header-menubar__menu-list > li > a,
.site-header-menubar__menu-list > li > .ui-subnav-trigger,
.site-header-menubar__menu-list > li > .ui-subnav-summary{
  transition:
    color .45s cubic-bezier(.22,1,.36,1),
    background-color .45s cubic-bezier(.22,1,.36,1),
    border-color .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    opacity .45s cubic-bezier(.22,1,.36,1),
    transform .45s cubic-bezier(.22,1,.36,1),
    filter .45s cubic-bezier(.22,1,.36,1);
}
/* --- L011 残り1件: cta-band__copy の中の見出しも flex の子 --- */
.cta-band__copy > *{ min-width:0; }

/* --- #14: カード／STEPの見出しは「折れるなら均等に折る」。
       keep-all は折れ口を消してしまい、溢れたときに1〜2文字だけ残る原因になっていた --- */
.site-card__title, .site-step__title{
  word-break:normal;
  text-wrap:balance;
}

/* ============ 会社情報・FAQ・サイトマップ用の部品 ============ */
/* 親ページ上部の子ページ導線（旧サイトで /information が会社概要だったため・①§5） */
/* 署名（代表挨拶の末尾） */
.site-sign{ text-align:right; font-weight:900; color:var(--green-dark); margin-top:var(--sec-gap) !important; }
/* Pull Quote 大（企業理念＝コンセプトワードを直接使う唯一の箇所） */
.site-pull--lg{ font-size:var(--t-h2); text-align:center; border-left:0; border-top:8px solid var(--yellow); border-radius:0 0 var(--radius) var(--radius); }
/* FAQ */
.site-faq__q{
  font-weight:900; font-size:var(--t-h4); color:var(--green-dark);
  background:var(--white); border:2px solid var(--beige-deep); border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0; padding:18px 22px; margin:0;
  text-wrap:balance;
}
.site-faq__a p:last-child{ margin-bottom:0; }
/* サイトマップのカードは中身がリンク列なので見出しを小さく揃える */

/* --- 長文ページは「帯そのもの」を読み幅に絞る（本文だけ狭めると右が空く＝#16）。
       実測: FAQ の回答が1行59字（目安35〜45字）だった。★文字を小さくして字数を稼がない --- */
.site-sec--narrow{ max-width:780px; }
/* --- サイトマップのリンク列はタップ領域44pxを確保（実測 33x23px） --- */


/* ============ 文字のにじみ調整（2026-09-01） ============ */
/* ① FVの見出し・リード文は blur 18px/12px の text-shadow が輪郭を溶かしていた。
      可読性はスクリム（.site-fv__scrim）が担保しているので、影は「浮かせる」最小限に絞る */
.site-catch-vertical{ text-shadow:0 1px 3px rgba(20,48,20,.55); }
.site-fv__sub{ text-shadow:0 1px 2px rgba(20,48,20,.65); }

/* ② FVの写真プレースホルダ内の文字は不透明度0.9/0.75で下地の斜線パターンが透け、
      にじんで見えていた。文字は不透明にして下地側を締める */
.site-fv__phtag{ color:#fff; background:rgba(20,48,20,.62); }
.site-fv__phtag small{ color:rgba(255,255,255,.9); }

/* ③ ボタンhoverの filter:brightness() は要素をラスタライズし直すため文字がぼける。
      明度変化は背景色の指定で行う（見た目の意図は同じ） */
.ui-btn:hover{ filter:none; }
.ui-btn--primary:hover{ filter:none; background:var(--green);color: #fff!important; }
.site-btn-oncolor:hover{ background:#FFC634; color: #000;!important}
.site-btn-ghost:hover,
.site-btn-ghost2:hover{ background:#F4F8F2; color: #000;!important}
.site-btn-line:hover{ background:#0BD962;color: #000;!important }

/* ④ 傾けたポラロイド枠は回転で文字が中間ピクセルに乗り、ぼやけて見えていた。
      傾き（署名意匠）は残したまま、角度を浅くして再サンプリングの影響を抑える */
.site-photo--tilt-l{ transform:rotate(-1.2deg); }
.site-photo--tilt-r{ transform:rotate(1deg); }/* ⑤ 和文の丸ゴシックは太字＋大サイズでサブピクセル描画が滲みやすい。
      見出し系だけグレースケール描画に寄せて輪郭を立てる */
h1,
h2,
h3,
.site-h2,
.site-catch-vertical,
.site-catch-vertical--sub,
.stats-band__value,
.site-pull{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/* ============ 本文のにじみ調整・第2弾（2026-09-01） ============
   原因: 本文まで丸ゴシック(M PLUS Rounded 1c) 400 を使っていた。丸ゴシックは
   終端が丸く、17px・行間2.0の長文だと画面上で輪郭が甘く＝ぼやけて見える。
   対処: 見出し（★署名）は丸ゴシックのまま、本文だけ角ゴシック(Noto Sans JP)に分離し、
   ウエイトを400→500に上げる。字間も .01em→0 に戻す（和文は字間を空けるほど甘く見える）。 */
:root{
  --font-ja-round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Outfit", var(--font-ja);
}
body{
  font-family:var(--font-ja);
  font-weight:500;
  letter-spacing:0;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  text-rendering:optimizeLegibility;
}/* 見出し・ボタン・縦書き署名は丸ゴシックを維持（ブランドの手つき） */
h1,
h2,
h3,
.site-h2,
.ui-btn,
.site-catch-vertical,
.site-catch-vertical--sub,
.site-fv__label,
.site-guide__list b,
.site-pull,
.footer-link-matrix__col-head,
.site-foot-info__name{
  font-family:var(--font-ja-round);
}
/* 強調ボックス内も本文書体。antialiased は線を痩せさせるので本文からは外す */
p,
li,
dd,
dt,
td,
th,
figcaption,
.site-note,
.site-balloon,
.stats-band__label,
.site-guide__list span{
  font-family:var(--font-ja);
}
p, li, dd, td, figcaption, .site-note, .site-balloon{ font-weight:500; }


/* ============================================================
   HEADER 1c 採用：深緑ベタ1段（2026-09-02）
   現行の2段（上段=ロゴ/連絡先・下段=緑のメニュー帯）を1段に集約。
   HTML側は ＜nav＞ を __top 内・ブランドと連絡先の間へ移動済み。
   色の強さ（深緑ベタ＋黄アクセント）は現行のまま、高さだけ半分に落とす。
   ============================================================ */
.site-header-menubar{
  background:#14601A;
  color:#fff;
  border-bottom:0;
}
.site-header-menubar__top{
  min-height:92px;
  gap:28px;
  color:#fff;
}
/* --- ブランド（緑地に白、シンボルは黄） --- */
.site-header-menubar__brand{ flex:none; color:#fff; }
.site-header-menubar__logo{ color:#F5B301; }
.site-header-menubar__brand-sub{ color:rgba(255,255,255,.78); white-space:nowrap; }

/* --- ナビ：帯ではなく緑面に白ヘアラインで刻む --- */
.site-header-menubar__menu{
  background:transparent;
  flex:none;
}
.site-header-menubar__menu-list{
  max-width:none; width:auto; margin:0;
  align-items:center;
  white-space:nowrap;
}
.site-header-menubar__menu-list > li{
  flex:none;
  border-inline-start:1px solid rgba(255,255,255,.24);
}
.site-header-menubar__menu-list > li:last-child{ border-inline-end:1px solid rgba(255,255,255,.24); }
.site-header-menubar__menu-list > li > a,
.site-header-menubar__menu-list > li > .ui-subnav-trigger,
.site-header-menubar__menu-list > li > .ui-subnav-summary{
  padding:.5rem .9375rem;
  white-space:nowrap;
  background-image:none;
}
.site-header-menubar__menu-list > li > a:hover,
.site-header-menubar__menu-list > li > .ui-subnav-trigger:hover,
.site-header-menubar__menu-list > li > .ui-subnav-summary:hover{
  background-color:rgba(255,255,255,.12);
}
/* 現在地は黄で示す（下線ではなく文字色＝1段では下線が窮屈） */
.site-header-menubar__menu-list > li > [aria-current="page"],
.site-header-menubar__menu-list > li.is-current > a,
.site-header-menubar__menu-list > li.is-current > .ui-subnav-trigger{ color:#F5B301; }

/* --- 連絡先：TEL/FAXのラベルは落とし、番号を黄で抜く --- */
.site-header-menubar__contact{ flex:none; gap:.0625rem; }
.site-header-menubar__tel{
  color:#F5B301;
  font-size:1.5625rem;
  white-space:nowrap;
}

/* --- 応募CTA：緑地なので白ピルで抜く --- */
.site-hd-entry.ui-btn--primary,
.site-hd-entry{
  flex:none;
  white-space:nowrap;
  padding:.875rem 1.375rem;
  border-radius:999px;
  background:#ffffff;
  color:#14601A;
  box-shadow:none;
}
.site-hd-entry:hover{ background:#F2EAD6; color:#14601A!important; }

/* --- バーガーは白 --- */
.site-header-menubar__burger{ color:#fff; }

/* --- SP：ドロワーは従来どおり（背景を戻す・ナビは__top内でも fixed なので影響なし） --- */
@media (max-width:1023px){
  .site-header-menubar__top{ min-height:4.5rem; gap:1rem; justify-content:space-between; flex-wrap:nowrap; }
  /* ロゴは左端、バーガーは右端 */
  .site-header-menubar__brand{ margin-inline-end:auto; }
  .site-header-menubar__burger{ order:9; margin-inline-start:auto; flex:none; }
  .site-header-menubar__menu{ background:#14601A; }
  .site-header-menubar__menu-list{ width:100%; }
  .site-header-menubar__menu-list > li{ border-inline-start:0; }
  .site-header-menubar__menu-list > li:last-child{ border-inline-end:0; }
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{ padding-block:1rem; }
}

/* 最小幅帯（〜480px）：ブランド列が nowrap の副題で230px固定になり、
   バーガーが版面外へ押し出されていた。副題は折り返し可＋列を縮小可にする。 */
@media (max-width:30rem){
  .site-header-menubar__top{ gap:.625rem; }
  .site-header-menubar__brand{ min-inline-size:0; flex:1 1 auto; }
  .site-header-menubar__brand-text{ min-inline-size:0; }
  .site-header-menubar__brand-sub{ white-space:nowrap; }
}
/* 320px：副題は13pxのまま1行に収める。版面パディングと gap を詰めて
   ブランドとバーガーの間に確実な余白をつくる。 */
@media (max-width:22.5rem){
  .site-header-menubar__top{ padding-inline:12px; gap:1rem; }
  .site-header-menubar__logo{ height:1.75rem; }
}


/* ============================================================
   NAV プルダウン 2b 採用（2026-09-02）
   ・求人（子6件）＝ヘッダー下いっぱいに降りる全幅メガパネル（説明文＋写真1枚）
   ・業務案内／五常について（子2件）＝2a準拠の小型白カード
     ※子2件で全幅パネルを降ろすと面が空くため、小型カードを併用する
   ============================================================ */

/* --- 小型白カード（.ui-subnav 既定の体裁を上書き） --- */
@media (min-width:60rem){
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav{
    min-inline-size:16.25rem;
    padding-block:.5rem;
    background:#ffffff;
    border:0;
    border-block-start:3px solid #F5B301;
    border-radius:0;
    box-shadow:0 14px 30px rgba(20,48,20,.24);
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.8125rem 1.25rem;
    color:#232A20; font-size:.875rem; font-weight:700; text-decoration:none;
    white-space:nowrap;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a::after{
    content:"→"; color:#8FA98C; font-family:"Outfit",sans-serif; font-weight:700;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a:hover{
    background:#F1F6EE; color:#14601A;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a:hover::after{ color:#14601A; }

  /* --- メガパネル：ホストではなくヘッダー基準で全幅に降ろす --- */
  .site-header-menubar__menu-list > li.ui-subnav-host:has(> .ui-subnav--mega){ position:static; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega{
    inset-block-start:100%; inset-inline:0;
    min-inline-size:0;
    padding:2rem 0 2.25rem;
    background:#F2EAD6;
    border:0;
    border-block-end:1px solid #E2D7BC;
    border-radius:0;
    box-shadow:0 14px 24px rgba(20,48,20,.14);
  }
  .ui-mega-panel{
    display:flex; align-items:flex-start; gap:2.5rem;
    padding-inline:1.5rem;
  }
  .ui-mega-panel__head{ flex:none; inline-size:15.625rem; }
  .ui-mega-panel__eyebrow{
    margin:0 0 .625rem;
    font-family:"Outfit",sans-serif; font-size:.6875rem; font-weight:700;
    letter-spacing:.16em; color:#14601A;
  }
  .ui-mega-panel__title{
    margin:0 0 .625rem;
    font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
    font-size:1.25rem; font-weight:800; line-height:1.5; color:#232A20;
  }
  .ui-mega-panel__lead{ margin:0; font-size:.75rem; line-height:1.9; color:#5C6355; }

  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid{
    flex:1; min-inline-size:0;
    display:grid; grid-template-columns:1fr 1fr; gap:.25rem 2rem;
    margin:0; padding:0; list-style:none;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid > li > a{
    display:flex; flex-direction:column; gap:.25rem;
    padding:.875rem 1rem; border-radius:4px;
    text-decoration:none; white-space:normal;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid > li > a::after{ content:none; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid > li > a:hover{ background:#ffffff; }
  .ui-mega-panel__grid b{
    font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
    font-size:.9375rem; font-weight:800; color:#14601A;
  }
  .ui-mega-panel__grid span{ font-size:.75rem; color:#5C6355; }

  .ui-mega-panel__photo{
    flex:none; inline-size:14.375rem; block-size:9.375rem; margin:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.25rem; padding:.75rem; text-align:center;
    border:1px dashed #B9AE8E;
    background:repeating-linear-gradient(135deg,#EDE4CD 0 8px,#E7DCC2 8px 16px);
    font-size:.6875rem; line-height:1.7; color:#7A7259;
  }
}

/* --- SP：メガパネルはドロワー内で通常のアコーディオンに平坦化 --- */
@media (max-width:1023px){
.ui-mega-panel__head{ display:none; }
  .ui-subnav--mega .ui-mega-panel{ display:block; padding:0; }
  .ui-subnav--mega .ui-mega-panel__grid{ margin:0; padding:0; list-style:none; }
  .ui-subnav--mega .ui-mega-panel__grid > li > a{
    display:flex; flex-direction:column; gap:.125rem;
    padding:.875rem 3rem; text-decoration:none; color:#fff;
  }
  .ui-mega-panel__grid b{ font-size:.9375rem; font-weight:700; }
  .ui-mega-panel__grid span{ font-size:.75rem; color:rgba(255,255,255,.7); }
}


/* ============================================================
   1c適用の後始末（2026-09-02）
   ① nav を __top 内へ移したため、ドロワー開閉の兄弟結合子が外れていた。
      子孫結合子で当て直す（旧ルールは残置＝一致しないだけで無害）。
   ② ブランドと電話番号のリンク下線を解除（1cモック準拠）。
   ============================================================ */
@media (max-width:1023px){
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__menu{
    transform:translateX(0);
  }
}
.site-header-menubar__brand,
.site-header-menubar__brand:hover,
.site-header-menubar__tel{ text-decoration:none; }
.site-header-menubar__tel:hover{ text-decoration:underline; text-underline-offset:.18em; }


/* --- 子2件のメガパネルは1列（2列だと右半分が空く） --- */
@media (min-width:60rem){
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid--1col{
    grid-template-columns:1fr;
    align-content:start;
  }
}


/* --- FVラベル：狭幅で2行になったとき高さが1行分のままで下へはみ出していた。
       inline-flex にして内容高さに追従させ、2行時は角丸長方形として成立させる --- */
.site-fv__label{
  display:inline-flex; align-items:center; flex-wrap:wrap;
  block-size:auto; min-block-size:0; height:auto;
  padding:.375rem 1.125rem; line-height:1.7;
  max-inline-size:100%;
}
@media (max-width:48rem){
  .site-fv__label{ border-radius:14px; }
}


/* --- メガパネルの写真枠は不要との判断で撤去（2026-09-02）。
       リンク列を余白まで使い切らせる（HTML側の要素も削除済み） --- */
@media (min-width:60rem){
  .ui-mega-panel__head{ inline-size:17.5rem; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid--1col{
    grid-template-columns:1fr 1fr;
  }
}


/* ============================================================
   ヘッダー追従（2026-09-02）
   スクロールしても全ページでナビが上端に残る。JS不要の sticky。
   ============================================================ */
.site-header-menubar{
  position:sticky;
  inset-block-start:0;
  z-index:200;
  box-shadow:0 2px 10px rgba(20,48,20,.18);
}
/* 追従中もメガパネルはヘッダー直下に降りる（重ね順の担保） */
.site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav{ z-index:210; }

/* アンカー遷移時に見出しがヘッダー下へ隠れないよう逃げ幅を確保 */
:target{ scroll-margin-block-start:6.5rem; }
[id]{ scroll-margin-block-start:6.5rem; }

/* sticky は overflow:hidden/clip の祖先で効かなくなるため、
   ヘッダーを含む祖先の横スクロール抑制は clip ではなく x 方向限定にしておく */
html{ overflow-x:clip; }
body{ overflow-x:clip; }
@media (max-width:1023px){
  /* SPドロワーは fixed のまま全高。追従ヘッダーの上に出す */
  .site-header-menubar__menu{ z-index:400; }
}

/* ============================================================
   NAV ホバーの「離れる」対策（2026-09-02）
   親項目（高さ約40px）はヘッダー上段（92px）の中央寄せなので、項目の下端と
   パネル上端（ヘッダー下端）の間に約26pxの無反応帯ができ、カーソルを下ろす
   途中で :hover が切れてパネルが消えていた。ホバー中だけ項目の直下に透明の
   橋を渡してホバーを継続させる（非ホバー時は生成しないので本文のクリックを
   妨げない）。実測の無反応帯は36px（上段はTEL＋CTAで実高116〜118px）なので
   余裕を持たせて3remで塞ぐ。
   ============================================================ */
@media (min-width:1024px){
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav-trigger{ position:relative; }
  .site-header-menubar__menu-list > li.ui-subnav-host:hover > .ui-subnav-trigger::after,
  .site-header-menubar__menu-list > li.ui-subnav-host:focus-within > .ui-subnav-trigger::after{
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-start:100%;
    block-size:3rem;
    background:transparent;
  }
}


/* ============================================================
   ブログ一覧（blog.html）／応募フォーム（form-recruit.html）  2026-09-02 追加
   既存トークン（色・角丸・余白・書体）だけで組む。新色は作らない。
   ============================================================ */

/* --- カテゴリ（ピル） --- */
.site-blog-cats{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:var(--el-gap) 0 0; padding:0;
}
.site-blog-cats a{
  display:block; padding:.55em 1.2em;
  border:2px solid var(--beige-deep); border-radius:999px;
  background:var(--white); color:var(--ink);
  font-size:var(--t-small); font-weight:800; text-decoration:none;
}
.site-blog-cats a:hover{ border-color:var(--green-ink); color:var(--green-dark); }
.site-blog-cats a[aria-current="page"]{ background:var(--green-dark); border-color:var(--green-dark); color:var(--white); }

/* --- 記事カード --- */
.site-blog-list{
  list-style:none; margin:var(--sec-gap) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px;
}
@media (max-width:899px){ .site-blog-list{ grid-template-columns:1fr; } }
/* タブレット縦（④768px 前後）でも施工実績カードは2列を保つ */
@media (min-width:600px) and (max-width:899px){
  .site-blog-list{ grid-template-columns:repeat(2,1fr); gap:1.25rem; }
}
.site-blogcard{
  background:var(--white); border:2px solid var(--beige-deep); border-radius:var(--radius);
}
.site-blogcard > a{
  display:flex; flex-direction:column; gap:14px; height:100%;
  padding:18px; color:var(--ink); text-decoration:none;
}
.site-blogcard .site-photo{ width:100%; max-width:none; margin:0; }
.site-blogcard .site-photo--polaroid{ box-shadow:none; padding:0; }
.site-blogcard__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:0; font-size:var(--t-small); color:var(--ink-sub);
}
.site-blogcard__meta time{ font-family:var(--font-en); font-weight:700; color:var(--green-ink); }
.site-blogcard__cat{
  padding:.25em .9em; border-radius:999px;
  background:var(--beige-deep); color:var(--green-dark); font-weight:800;
}
.site-blogcard__title{
  margin:0; font-size:var(--t-h4); color:var(--green-dark);
  text-wrap:pretty; word-break:normal;
}
.site-blogcard__excerpt{ margin:0; font-size:var(--t-small); line-height:1.9; }
.site-blogcard > a:hover .site-blogcard__title{ text-decoration:underline; text-underline-offset:4px; }

/* --- ページ送り（タップ44px以上） --- */
.site-pager{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:var(--sec-gap) 0 0; padding:0;
}
.site-pager a, .site-pager span{
  display:grid; place-items:center;
  min-width:2.875rem; min-height:2.875rem; padding-inline:.6em;
  border:2px solid var(--beige-deep); border-radius:var(--radius-s);
  background:var(--white); color:var(--ink);
  font-family:var(--font-en); font-weight:700; text-decoration:none;
}
.site-pager a:hover{ border-color:var(--green-ink); color:var(--green-dark); }
.site-pager [aria-current="page"]{ background:var(--green-dark); border-color:var(--green-dark); color:var(--white); }

/* --- フォーム --- */
.site-form{ display:grid; gap:var(--sec-gap); margin-top:var(--sec-gap); }
.site-form__set{
  margin:0; padding:24px; border:2px solid var(--beige-deep); border-radius:var(--radius);
  background:var(--white); display:grid; gap:var(--el-gap);
}
.site-form__legend{
  padding:0 .6em; margin-inline-start:-.6em;
  font-family:var(--font-ja); font-size:var(--t-h4); font-weight:900; color:var(--green-dark);
}
.site-form__row{ display:grid; gap:8px; }
.site-form__row--half{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--el-gap); align-items:start; }
@media (max-width:599px){ .site-form__row--half{ grid-template-columns:1fr; } }
.site-form__row--half > div{ display:grid; gap:8px; }
.site-form__label{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:var(--t-body); font-weight:800; color:var(--ink);
}
.site-form__req, .site-form__opt{
  font-family:var(--font-en); font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.08em;
  padding:.25em .7em; border-radius:999px;
}
.site-form__req{ background:var(--green-dark); color:var(--white); }
.site-form__opt{ background:var(--beige-deep); color:var(--ink-sub); }
.site-form__field{
  width:100%; box-sizing:border-box;
  min-height:3rem; padding:.75em .9em;
  font-family:var(--font-ja); font-size:var(--t-body); color:var(--ink);
  background:var(--beige); border:2px solid var(--beige-deep); border-radius:var(--radius-s);
}
.site-form__field::placeholder{ color:var(--ink-sub); opacity:.75; }
.site-form__field:hover{ border-color:#E2D7BC; }
.site-form__field:focus{ outline:3px solid var(--yellow); outline-offset:2px; border-color:var(--green-ink); background:var(--white); }
.site-form__field--area{ min-height:9rem; line-height:var(--lh-body); resize:vertical; }
select.site-form__field{ appearance:none; padding-right:2.4em;
  background-image:linear-gradient(45deg,transparent 50%,var(--green-dark) 50%),linear-gradient(135deg,var(--green-dark) 50%,transparent 50%);
  background-position:calc(100% - 1.15em) 1.35em, calc(100% - .8em) 1.35em;
  background-size:.4em .4em,.4em .4em; background-repeat:no-repeat;
}
.site-form__choices{ display:flex; flex-wrap:wrap; gap:10px; }
.site-form__choice{
  display:flex; align-items:center; gap:.6em;
  min-height:2.875rem; padding:.5em 1.1em;
  border:2px solid var(--beige-deep); border-radius:999px; background:var(--beige);
  font-size:var(--t-body); font-weight:700; cursor:pointer;
}
.site-form__choice:hover{ border-color:var(--green-ink); }
.site-form__choice input{ accent-color:var(--green-ink); width:1.15rem; height:1.15rem; }
.site-form__choice:has(input:checked){ background:var(--white); border-color:var(--green-dark); color:var(--green-dark); }
.site-form__hint{ margin:0; font-size:var(--t-small); line-height:1.8; color:var(--ink-sub); }
.site-form__consent{
  padding:20px 24px; border:2px solid var(--beige-deep); border-radius:var(--radius); background:var(--white);
}
.site-form__consent .site-form__choice{ border:0; background:transparent; padding:0; font-weight:700; }
.site-form__consent .site-form__choice:hover{ border:0; }
.site-form__submit{ display:grid; justify-items:center; gap:14px; text-align:center; }
.site-form__submit .ui-btn{ min-width:min(100%, 22rem); border:0; cursor:pointer; }
.site-form__submit .site-note{ margin:0; }
@media (max-width:599px){
  .site-form__set{ padding:20px 16px; }
}

/* --- 施工実績カードの物件データ（blogcard に添える。2026-09-02） --- */
.site-workcard__spec{
  margin:0; padding-top:12px; border-top:2px solid var(--beige-deep);
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  font-size:var(--t-small); line-height:1.8;
}
.site-workcard__spec dt{ font-weight:800; color:var(--green-dark); white-space:nowrap; }
.site-workcard__spec dd{ margin:0; color:var(--ink-sub); }
.site-workcard > a{ gap:12px; }
.site-workcard .site-blogcard__excerpt{ margin-bottom:2px; }
/* 左右のカード高さを揃え、本文の長さが違っても物件データの区切り線が同じ高さに来るよう
   抜粋を伸縮させて spec ブロックを下端へ寄せる */
.site-blog-list{ align-items:stretch; }
.site-blog-list > li{ block-size:100%; }
.site-workcard .site-blogcard__excerpt{ flex:1 1 auto; }
.site-workcard__spec{ margin-block-start:auto; }

/* ①②幅（〜430px）：カードが画面ギリギリに見えないよう内側を詰め、
   長い語も必ず折り返す（実測：spec のddが押し出していた） */
@media (max-width:26.875rem){
  .site-blog-list{ gap:1rem; }
  .site-blogcard > a{ padding:14px; gap:10px; }
  .site-workcard__spec{ grid-template-columns:1fr; gap:2px; }
  .site-workcard__spec dt{ white-space:normal; }
}
.site-blogcard,.site-blogcard > a,.site-workcard__spec{ min-inline-size:0; }
.site-blogcard__title,.site-blogcard__excerpt,.site-workcard__spec dd{ overflow-wrap:anywhere; }

/* ①320px前後：さらにコンパクトに（写真は16:9のまま、文字と余白を詰める） */
@media (max-width:22.5rem){
  .site-blog-list{ gap:.75rem; }
  .site-blogcard{ border-width:1px; }
  .site-blogcard > a{ padding:11px; gap:8px; }
  .site-blogcard__title{ font-size:1rem; line-height:1.5; }
  .site-blogcard__excerpt{ font-size:.8125rem; line-height:1.75; }
  .site-blogcard__cat{ font-size:.75rem; padding:.2em .7em; }
  .site-workcard__spec{ padding-top:8px; border-top-width:1px; font-size:.75rem; line-height:1.7; }
}

/* 実績カード：下線ではなくカード全体で反応させる */
.site-workcard{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-workcard > a:hover .site-blogcard__title,
.site-workcard > a:focus-visible .site-blogcard__title{ text-decoration:none; }
.site-workcard:has(> a:hover),
.site-workcard:has(> a:focus-visible){
  transform:translateY(-6px);
  border-color:var(--green-ink);
  box-shadow:0 14px 28px rgba(31,58,42,.16);
}
.site-workcard:has(> a:hover) .site-blogcard__title{ color:var(--green-ink); }
@media (prefers-reduced-motion:reduce){
  .site-workcard{ transition:box-shadow .2s ease, border-color .2s ease; }
  .site-workcard:has(> a:hover){ transform:none; }
}


/* --- 第3ボタン（白地の行での控えめな選択肢）。素の .ui-btn は地も枠も持たないため
       文字が浮いて見えていた（2026-09-02） --- */
.site-btn-outline{
  background:var(--white);
  color:var(--green-dark);
  box-shadow:inset 0 0 0 2px var(--green-dark);
}
.site-btn-outline:hover{ background:var(--beige); color:var(--green-dark); }


/* ============================================================
   サイトロゴ（支給の実ロゴ / https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/logo.webp）
   ヘッダーは緑面なので白抜き版を使用。旧SVGシンボル用の
   固定 2.5rem 正方形を解除して、横長ワードマークに合わせる。
   ============================================================ */
.site-header-menubar__logo{
  width: auto;
  height: 2.125rem;          /* 34px：ヘッダー5remの中で視覚的に収まる高さ */
  align-items: center;
}
.site-header-menubar__logo img{
  display: block;
  height: 100%;
  width: auto;
}
@media (max-width: 40rem){
  .site-header-menubar__logo{ height: 1.75rem; }
}


/* ============================================================
   ヘッダー調整 2026-09
   ・ブランド：ロゴの下に業種＋エリアの副題を置く（横並び→縦積み）
   ・連絡先：受話器アイコンを廃し、
     「TEL［営業電話お断り］」／番号／応募ボタン の3行に整理
   ============================================================ */
.site-header-menubar__brand{
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
}
.site-header-menubar__brand-text{ align-items: flex-start; }
.site-header-menubar__brand-sub{
  font-size: .8125rem;
  letter-spacing: .04em;
  line-height: 1.4;
}

.site-header-menubar__contact-lead{
  display: flex;
  align-items: baseline;
  gap: .375rem;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.86);
}
.site-header-menubar__contact-note{
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255,255,255,.68);
}
@media (max-width: 1023px){
  .site-header-menubar__brand{ gap: .25rem; }
}


/* --- ヘッダー微調整：ロゴ拡大 / 連絡先を中央揃え・幅そろえ --- */
.site-header-menubar__logo{ height: 2.75rem; }
@media (max-width: 40rem){ .site-header-menubar__logo{ height: 2.125rem; } }

/* 連絡先ブロックは電話番号の幅を基準に、TEL行・ボタンを中央/全幅で揃える */
.site-header-menubar__contact{
  align-items: stretch;
  text-align: center;
  gap: 0;
}
.site-header-menubar__contact-lead{
  justify-content: center;
  margin-block-end: .0625rem;   /* 番号の上の余白は詰める */
}
.site-header-menubar__tel{
  justify-content: center;
  text-align: center;
}
.site-header-menubar__contact .site-hd-entry{
  display: flex;
  width: 100%;
  margin-block-start: .625rem;  /* ボタン上の余白 */
}


/* --- ヘッダー高さのコンパクト化 --- */
.site-header-menubar__top{
  min-height: 0;
  padding-block: .625rem;
}
.site-header-menubar__tel{ font-size: 1.375rem; line-height: 1.1; }
.site-header-menubar__contact .site-hd-entry{
  min-block-size: 40px;
  padding: .5rem 1.25rem;
  margin-block-start: .5rem;
}
@media (max-width: 1023px){
  .site-header-menubar__top{ min-height: 0; padding-block: .5rem; }
}


/* ============================================================
   1024〜1200px帯：PCナビにしたことで brand＋ナビ＋連絡先の3カラムが
   版面（実効981px）に収まらず、右端の電話番号・応募ボタンが切れていた。
   この帯だけメニュー行を下段へ落として2段組にする（幅を削る調整では解けない）。
   ============================================================ */
@media (min-width:1024px) and (max-width:1200px){
  /* 2段に落とさず1段で収める。ナビの文字と左右パディング、列間、
     ロゴ・電話番号の寸法を段階的に詰めて版面（実効981px）に納める。 */
  .site-header-menubar__top{ gap: 1rem; }
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-trigger,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{
    padding: .5rem .5rem;
    font-size: .8125rem;
    letter-spacing: 0;
  }
  .site-header-menubar__logo{ height: 2.125rem; }
  .site-header-menubar__brand-sub{ font-size: .6875rem; }
  .site-header-menubar__contact{ flex: none; margin-inline-start: 0; }
  /* ナビは左ロゴと右CTAの中間に置く（右だけ余白が余っていた） */
  .site-header-menubar__menu{ margin-inline: auto; }
  .site-header-menubar__tel{ font-size: 1.125rem; }
  .site-header-menubar__contact-lead{ font-size: .6875rem; }
  .site-header-menubar__contact .site-hd-entry{
    font-size: .8125rem; padding: .5rem .875rem; min-block-size: 36px;
  }
}


/* ============================================================
   SPドロワー（〜1023px）の使い勝手
   ・開閉を0msから0.32sへ（キットの既定はモーション無効だった）
   ・右上に×ボタン（ラベル＝トグル操作なのでJS不要）
   ・末尾に電話番号と応募ボタンを再掲（上段の連絡先はSPで非表示のため）
   ============================================================ */
.site-header-menubar__close{ display:none; }
.site-header-menubar__drawer-contact{ display:none; }

@media (max-width:1023px){
  .site-header-menubar__menu{
    transition: transform .32s cubic-bezier(.22,1,.36,1);
    padding-block-start: 4.5rem;
  }
  .site-header-menubar__scrim{ transition: opacity .32s ease, visibility .32s ease; }
  .site-header-menubar__burger span{ transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease; }

  .site-header-menubar__close{
    position:absolute; inset-block-start:1rem; inset-inline-end:1rem; z-index:2;
    display:flex; align-items:center; justify-content:center;
    inline-size:2.75rem; block-size:2.75rem;
    cursor:pointer; border-radius:50%;
    background:rgba(255,255,255,.12);
  }
  .site-header-menubar__close span{
    position:absolute; inline-size:1.25rem; block-size:2px; background:#fff; border-radius:2px;
  }
  .site-header-menubar__close span:nth-child(1){ transform:rotate(45deg); }
  .site-header-menubar__close span:nth-child(2){ transform:rotate(-45deg); }

  .site-header-menubar__drawer-contact{
    display:flex; flex-direction:column; align-items:center; gap:.375rem;
    margin-block-start:1.75rem;
    padding:1.5rem clamp(1.25rem,5vw,2.25rem) 0;
    border-block-start:0;
    text-align:center;
  }
  .site-header-menubar__drawer-lead{
    margin:0; display:flex; align-items:baseline; gap:.375rem;
    font-family:"Outfit",sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.12em;
    color:rgba(255,255,255,.86);
  }
  .site-header-menubar__drawer-lead span{
    font-weight:500; letter-spacing:.02em; font-size:.6875rem; color:rgba(255,255,255,.7);
  }
  .site-header-menubar__drawer-tel{
    font-family:"Outfit",sans-serif; font-weight:800; font-size:1.625rem; line-height:1.15;
    color:#F5B301; text-decoration:none;
  }
  .site-header-menubar__drawer-entry{ inline-size:100%; margin-block-start:.75rem; }
}


/* ============================================================
   SPドロワーのナビ項目
   ・リンク面はメニュー幅いっぱい（タップ範囲を広げる）
   ・文字は中央、シェブロンは右端に離す。タイトルと山は上下中央
   ============================================================ */
@media (max-width:1023px){
  /* 親 ul の align-items:center（PC用宣言）が交差軸を内容幅にしていたため、
     li も a も 62px しかなかった。SPでは stretch にして全幅に伸ばす。 */
  .site-header-menubar__menu-list{ align-items: stretch; }
  .site-header-menubar__menu-list > li{ inline-size: 100%; }
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    text-align: center;
    padding-inline: 1rem;
    position: relative;
  }
  /* シェブロンは中央揃えの文字を押しずらさないよう絶対配置で右端へ */
  .site-header-menubar__menu-list > li > .ui-subnav-summary .ui-subnav-summary__chev{
    position: absolute;
    inset-inline-end: 1.25rem;
    inset-block-start: 50%;
    margin-block-start: -.35rem;
  }
  /* ドロワー内のサブメニューはタイトルのみ（説明文は落とす） */
  .site-header-menubar__menu-list .ui-mega-panel__grid > li > a > span,
  .site-header-menubar__menu-list .ui-subnav__list > li > a > span{ display: none; }
  /* 親項目は大きめの太字、子項目は一段小さく淡く。どちらも中央揃え */
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{
    font-size: 1.0625rem; font-weight: 800; letter-spacing: .04em;
  }
  .site-header-menubar__menu-list .ui-mega-panel__grid > li > a,
  .site-header-menubar__menu-list .ui-subnav__list > li > a{
    display: flex; align-items: center; justify-content: center;
    inline-size: 100%; text-align: center;
    padding-block: .75rem; padding-inline: 1rem;
    font-size: .875rem; font-weight: 500; letter-spacing: .02em;
    color: rgba(255,255,255,.82);
  }
  .site-header-menubar__menu-list .ui-mega-panel__grid > li > a > b,
  .site-header-menubar__menu-list .ui-subnav__list > li > a > b{ font-weight: 500; }
  .site-header-menubar__menu-list .ui-mega-panel__grid,
  .site-header-menubar__menu-list .ui-subnav__list{ align-items: stretch; }
}


/* ============================================================
   SPドロワーのサブメニュー：display切替では動きが出ないので、
   grid の行高さ（0fr→1fr）でなめらかに開閉する。
   ============================================================ */
@media (max-width:1023px){
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1),
                opacity .24s ease;
    opacity: 0;
    overflow: hidden;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host:has(> .ui-subnav-toggle:checked) > .ui-subnav{
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav > *{
    min-block-size: 0;
    overflow: hidden;
  }
  /* シェブロンの回転もアニメーションさせる（キット既定は 0ms） */
  .ui-subnav-summary__chev{ transition: rotate .28s cubic-bezier(.22,1,.36,1); }
}


/* ============================================================
   〜480px（③スマホ大以下）：サブメニューを開いてもドロワー内で
   スクロールが起きないよう、行高と余白を段階的に詰める。
   ============================================================ */
@media (max-width:30rem){
  .site-header-menubar__menu{ padding-block: 3.5rem 1.25rem; }
  .site-header-menubar__close{ inset-block-start:.5rem; inset-inline-end:.5rem; }

  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{
    padding-block: .625rem;
    font-size: 1rem;
  }
  .site-header-menubar__menu-list .ui-mega-panel__grid > li > a,
  .site-header-menubar__menu-list .ui-subnav__list > li > a{
    padding-block: .4375rem;
    font-size: .8125rem;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav{ background: rgba(0,0,0,.14); }

  .site-header-menubar__drawer-contact{
    margin-block-start: .875rem;
    padding-block-start: .875rem;
    gap: .25rem;
  }
  .site-header-menubar__drawer-tel{ font-size: 1.375rem; }
  .site-header-menubar__drawer-entry{ margin-block-start: .5rem; }
}


/* ============================================================
   フッター（全ページ共通）
   トップで確定した構成をサイト全体へ適用：
   ・PC（1024px以上）は「会社情報＋ナビ3列」＝計4列
   ・1023px以下は会社情報を上・ナビを下に積み、間に区切り線
   ・600px以下はナビ1グループ1行＋リンク2列、360px以下は1列中央寄せ
   ・フッター内のリンクは下線なし（hoverは透過で示す）
   ============================================================ */
/* --- フッター：会社情報＋ナビ3列＝計4列。リンクの下線はすべて外す --- */
.footer-link-matrix__inner{
  display:grid;
  grid-template-columns:minmax(19rem, 1.4fr) 3fr;
  column-gap:clamp(2rem,4vw,3.5rem);
  row-gap:2rem;
  align-items:start;
}
.site-foot-info{ order:1; margin:0; }
.site-foot-info__logo{ margin:0 0 1rem; }
.site-foot-info__logo img{ display:block; inline-size:auto; block-size:3.75rem; }
.site-foot-info__name{ font-weight:400; }
/* 社名行と電話以外は一段小さく。住所は1行に収める */
.site-foot-info > p:not(.site-foot-info__name):not(.site-foot-info__tel):not(.site-foot-info__logo),
.site-foot-info__addr{
  font-size:.8125rem; line-height:1.8;
}
.site-foot-info__addr{ white-space:nowrap; }
.site-foot-info .site-btn-line{ margin-block-start:1.25rem; }
.site-foot-info__tel{
  display:flex; align-items:center; flex-wrap:wrap; gap:.75rem;
  margin-block:.75rem;
}
.site-foot-info__tel-block{
  display:flex; flex-direction:column; align-items:center;
}
.site-foot-info__tel-label{
  font-family:Outfit,sans-serif; font-weight:700; font-size:.75rem;
  letter-spacing:.14em; color:rgba(255,255,255,.8);
}
.site-foot-info__tel a{
  font-family:Outfit,sans-serif; font-weight:800; font-size:1.75rem; line-height:1.1;
  color:#fff;
}
.site-foot-info__tel a:hover{ color:#FFC42E; }
.site-foot-info__tel-note{
  font-size:.8125rem; color:rgba(255,255,255,.8);
}
.footer-link-matrix__matrix{ order:2; }
.footer-link-matrix__legal{ order:3; grid-column:1 / -1; }
.footer-link-matrix__matrix{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.footer-link-matrix a,
.site-foot-info a{ text-decoration:none; }
.footer-link-matrix a:hover,
.site-foot-info a:hover{ text-decoration:none; opacity:.75; }
/* ④タブレット縦（768px）以下：会社情報を上、ナビを下に積む */
@media (max-width:1023px){
  .footer-link-matrix__inner{ grid-template-columns:1fr; }
  .footer-link-matrix__matrix{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  /* 会社情報は横に広がるので2カラムに割る（ロゴは段抜き）。
     column-count は段の高さが揃わないので、grid で列を明示する。 */
  .site-foot-info{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(1.5rem,4vw,3rem); row-gap:.5rem;
    align-content:start;
  }
  .site-foot-info__logo{ grid-column:1 / -1; grid-row:1; }
  /* 列だけの指定では行が揃わず右列が下へずれるため、行も明示する */
  .site-foot-info__name{ grid-column:1; grid-row:2; margin-block:0; }
  .site-foot-info__addr{ grid-column:1; grid-row:3; margin-block:0; }
  .site-foot-info__tel{ grid-column:1; grid-row:4; margin-block:0; }
  .site-foot-info > p:not([class]){ grid-column:2; margin-block:0; }
  /* p の nth-of-type は address を数えない：logo=1, name=2, tel=3, 以降が右列 */
  .site-foot-info > p:not([class]):nth-of-type(4){ grid-row:2; }
  .site-foot-info > p:not([class]):nth-of-type(5){ grid-row:3; }
  .site-foot-info > p:not([class]):nth-of-type(6){ grid-row:4; }
  /* 会社情報とナビの区切り */
  .footer-link-matrix__matrix{
    padding-block-start:1.75rem;
    border-block-start:1px solid rgba(255,255,255,.24);
  }
}
@media (max-width:37.5rem){
  .footer-link-matrix__matrix{ grid-template-columns:1fr; }
  /* 見出しは「日本語＋英字」を横並び、リンクは左寄せの2列 */
  .footer-link-matrix__col-head{
    display:flex; align-items:baseline; gap:.625rem;
    margin-block-end:.5rem;
  }
  .footer-link-matrix__col-head .site-eyebrow{
    order:2; font-size:.6875rem; letter-spacing:.16em;
  }
  .footer-link-matrix__col-list{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:1rem; align-items:start; text-align:left;
  }
  .footer-link-matrix__col-list a{ justify-content:flex-start; }
  .footer-link-matrix__matrix{ padding-block-start:1.5rem; }
  .footer-link-matrix__col + .footer-link-matrix__col{ margin-block-start:1rem; }
}
/* ③スマホ大（430px）以下：会社情報は縦1列に戻す
   （1023px以下の行固定は :nth-of-type で詳細度が高いため、同じ形で打ち消す） */
@media (max-width:37.5rem){
  .site-foot-info{ grid-template-columns:1fr; }
  .site-foot-info__logo,
  .site-foot-info__name,
  .site-foot-info__addr,
  .site-foot-info__tel,
  .site-foot-info > p:not([class]){ grid-column:1; }
  .site-foot-info > p:not([class]):nth-of-type(4),
  .site-foot-info > p:not([class]):nth-of-type(5),
  .site-foot-info > p:not([class]):nth-of-type(6){ grid-row:auto; }
  .site-foot-info__name,
  .site-foot-info__addr,
  .site-foot-info__tel{ grid-row:auto; }
}
@media (max-width:22.5rem){
  /* ①320px：1列に戻し、リンクは中央寄せ */
  .footer-link-matrix__col-list{
    grid-template-columns:1fr; text-align:center;
  }
  .footer-link-matrix__col-list a{ justify-content:center; }
  .footer-link-matrix__col-head{ justify-content:center; }
}


/* ============================================================
   パンくずをコンテンツ幅（--center-max）に収める（全ページ共通）
   .p-breadcrumb__inner の margin:0 が .l-center の margin-inline:auto を
   打ち消していたため左端に張り付き、content-box で padding 分はみ出していた。
   ============================================================ */
.p-breadcrumb__inner{
  box-sizing: border-box;
  margin-inline: auto;
  max-inline-size: var(--center-max, 1120px);
  inline-size: 100%;
}


/* ============================================================
   装飾ブロブ（全ページ共通）
   トップで使っている語彙をサイト全体へ。HTML側に
   ＜span class="pop-blob pop-blob--…" aria-hidden="true"> を Row 直下へ置く。
   ============================================================ */
:root{
  --pop-cream:#FAF6EA; --pop-cream-d:#F2EAD6;
  --pop-green:#228B22; --pop-green-d:#14601A;
  --pop-lime:#8CC63F; --pop-yellow:#F5B301; --pop-mint:#E9F1E2;
  --blob-a:58% 42% 47% 53% / 52% 47% 53% 48%;
  --blob-b:42% 58% 62% 38% / 46% 56% 44% 54%;
  --blob-c:63% 37% 41% 59% / 57% 42% 58% 43%;
}
.site-row{ position:relative; overflow:hidden; z-index:1; }
.site-row > section,
.site-row > .site-sec,
.site-row > .stats-band{ position:relative; z-index:1; }
.pop-blob{
  position:absolute; display:block; pointer-events:none; z-index:0;
  border-radius:var(--blob-b);
}
.pop-blob--mint{ background:var(--pop-mint); }
.pop-blob--cream{ background:var(--pop-cream-d); }
.pop-blob--lime{ background:var(--pop-lime); }
.pop-blob--yellow{ background:var(--pop-yellow); }
.pop-blob--green{ background:var(--pop-green); }
.pop-blob--ring{
  background:none; border:3px solid rgba(34,139,34,.22); border-radius:999px;
}
.pop-blob--outline{
  background:none; border:2px solid rgba(34,139,34,.18);
  border-radius:var(--blob-a);
}
.pop-blob--outline-y{
  background:none; border:2px solid rgba(245,179,1,.45);
  border-radius:var(--blob-c);
}
.pop-blob--dots{
  background-image:radial-gradient(rgba(34,139,34,.28) 2.5px, transparent 2.6px);
  background-size:16px 16px; border-radius:0;
}
.pop-blob--dots-y{
  background-image:radial-gradient(rgba(245,179,1,.55) 2.5px, transparent 2.6px);
  background-size:16px 16px; border-radius:0;
}
.pop-blob--dots-lime{
  background-image:radial-gradient(rgba(140,198,63,.6) 2.5px, transparent 2.6px);
  background-size:14px 14px; border-radius:0;
}
.pop-blob--dots-dense{
  background-image:radial-gradient(rgba(34,139,34,.22) 2px, transparent 2.1px);
  background-size:11px 11px; border-radius:0;
}

/* --- パンくず：スラッシュ含めて文字色を統一、下線なし --- */
.p-breadcrumb,
.p-breadcrumb a,
.p-breadcrumb__item + .p-breadcrumb__item::before{ color:var(--green-dark); }
.p-breadcrumb a{ text-decoration:none; }
.p-breadcrumb a:hover{ text-decoration:none; opacity:.7; }


/* ============================================================
   ブログ一覧（CMSテンプレート準拠）
   本文＋サイドバーの2カラム。カードは2列で、上サムネイル→
   タイトル→日付＋カテゴリの順。
   ============================================================ */
.blog-index__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 17.5rem;
  gap:clamp(1.75rem,4vw,3rem);
  align-items:start;
}
.blog-cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.25rem,3vw,1.75rem);
}
.blog-cards > li > a{
  display:flex; flex-direction:column; gap:.625rem; block-size:100%;
  padding:.875rem .875rem 1.25rem;
  background:#fff; color:var(--ink); text-decoration:none;
  box-shadow:0 10px 24px rgba(35,42,32,.12);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
}
.blog-cards > li > a:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(35,42,32,.16); }
.blog-card__thumb{
  display:block; overflow:hidden; aspect-ratio:16 / 9; background:var(--beige-deep);
}
.blog-card__thumb img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; }
.blog-card__title{
  margin:0; font-family:var(--font-ja-round);
  font-size:1.0625rem; font-weight:800; line-height:1.7; text-wrap:pretty;
}
.blog-card__meta{
  margin:0; display:flex; align-items:center; gap:.625rem; flex-wrap:wrap;
  font-family:var(--font-en); font-weight:700; font-size:.875rem; color:var(--green-ink);
}
.blog-card__cat{
  padding:.15rem .6875rem; border-radius:999px;
  background:var(--mint, #E9F1E2); color:var(--green-dark);
  font-family:var(--font-ja); font-size:.6875rem; font-weight:700; white-space:nowrap;
}

/* --- ページネーション --- */
.blog-pager{ margin-block-start:clamp(2rem,4vw,3rem); }
.blog-pager ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem;
}
.blog-pager a,
.blog-pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:44px; padding-inline:.875rem;
  border-radius:999px; background:#fff; color:var(--green-dark);
  font-family:var(--font-en); font-weight:700; font-size:.9375rem;
  text-decoration:none; box-shadow:0 2px 8px rgba(35,42,32,.08);
}
.blog-pager .blog-pager__num{ min-inline-size:44px; padding-inline:.5rem; }
.blog-pager a:hover{ background:var(--green); color:#fff; }
.blog-pager .is-current{ background:var(--green-dark); color:#fff; }
.blog-pager .is-disabled{ opacity:.4; box-shadow:none; background:transparent; }

/* --- サイドバー --- */
.blog-side{ display:flex; flex-direction:column; gap:1.5rem; }
.blog-side__block{
  background:#fff; padding:1.25rem 1.25rem 1.5rem;
  box-shadow:0 6px 18px rgba(35,42,32,.08);
}
.blog-side__head{
  margin:0 0 .875rem; font-family:var(--font-ja-round);
  font-size:1rem; font-weight:800; color:var(--green-dark);
  padding-block-end:.625rem; border-block-end:2px solid var(--beige-deep);
}
.blog-side__recent,
.blog-side__cats{ list-style:none; margin:0; padding:0; }
.blog-side__recent > li + li{ margin-block-start:.75rem; padding-block-start:.75rem; border-block-start:1px dashed var(--line, #E4DCC4); }
.blog-side__recent a{
  display:flex; flex-direction:column; gap:.25rem;
  color:var(--ink); text-decoration:none;
}
.blog-side__recent a:hover .blog-side__ttl{ color:var(--green); }
.blog-side__ttl{ font-size:.875rem; font-weight:700; line-height:1.7; }
.blog-side__recent time{
  font-family:var(--font-en); font-weight:700; font-size:.75rem; color:var(--green-ink);
}
.blog-side__cats > li + li{ margin-block-start:.25rem; }
.blog-side__cats a{
  display:flex; align-items:center; min-block-size:44px;
  color:var(--ink); text-decoration:none; font-size:.875rem;
}
.blog-side__cats a::before{
  content:""; inline-size:.4rem; block-size:.4rem; margin-inline-end:.625rem;
  border-radius:50%; background:var(--yellow, #F5B301);
}
.blog-side__cats a:hover{ color:var(--green); }
.blog-side__cats [aria-current="page"]{ color:var(--green-dark); font-weight:700; }

/* 1024px を含めて2カラムを維持（64rem 指定だと境界を含んで1列化していた）。
   本文が狭くなる帯はカードを1列にして、2カラム構成そのものは保つ。 */
/* サイドバーは詰めるが、カードは2列を保つ */
@media (max-width:60rem){
  .blog-index__body{ grid-template-columns:minmax(0,1fr) 15rem; }
}
@media (max-width:47.5rem){
  .blog-index__body{ grid-template-columns:minmax(0,1fr); }
  .blog-side{ flex-direction:row; flex-wrap:wrap; }
  .blog-side__block{ flex:1 1 16rem; }
}
/* 1列にするのは本当に狭い帯だけ */
@media (max-width:30rem){
  .blog-cards{ grid-template-columns:1fr; }
  .blog-side{ flex-direction:column; }
}


/* ============================================================
   CTA帯：写真をパララックスで敷く（全ページ共通）
   ・background-attachment:fixed でスクロール時に背景が留まる
   ・文字は白なので、濃緑のグラデーションを重ねて可読性を確保
   ・iOS/Android は fixed が効かない（＝通常のcoverになる）ため、
     タッチ環境では scroll に切り替えて破綻を避ける
   ============================================================ */
.cta-band{
  background-image:
    linear-gradient(rgba(14,60,16,.93), rgba(14,60,16,.93)),
    url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/cta-cityscape-bg.webp");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
.site-cta--green{
  background-image:
    linear-gradient(rgba(17,84,22,.93), rgba(12,58,15,.95)),
    url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/photo04a-barashi-bg.webp");
}
@media (hover:none){
  .cta-band{ background-attachment: scroll, scroll; }
}
@media (prefers-reduced-motion:reduce){
  .cta-band{ background-attachment: scroll, scroll; }
}


/* ============================================================
   チェキ風フレーム（角丸なし・下だけ広い白フチ）
   ============================================================ */
.site-photo--cheki{
  background:#FFFFFF; border:0; border-radius:0;
  padding:.875rem .875rem 1.5rem;
  box-shadow:inset 0 0 0 1px rgba(35,42,32,.12), 0 10px 24px rgba(35,42,32,.12);
  margin-inline:0;
  align-self:center;
}
/* 左の文字カラムと上下中央で揃える */
.site-sec__body:has(> .site-photo--cheki){ align-items:center; }
.site-photo--cheki figcaption{ display:none; }
.site-photo--cheki .site-photo__frame{
  border:0; border-radius:0; box-shadow:none; padding:0; background:var(--beige-deep);
  overflow:hidden;
}
.site-photo__frame--filled{ padding:0; background:none; display:block; }
.site-photo__frame--filled img{
  display:block; inline-size:100%; block-size:100%; object-fit:cover;
}

/* 未支給プレースホルダの点線・枠は消す（面だけ） */
.site-photo__frame{ border:0; box-shadow:none; }
.site-fv__phtag{ border:0; }




/* ============================================================
   よくある誤解（work.html）
   4人のイラストの上に「誤解」の吹き出し、その下に「実際は」のリスト
   ============================================================ */
.myth-ask{
  margin-block-start:clamp(1.5rem,3vw,2.5rem);
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(.75rem,2vw,1.25rem);
}
/* PC：4つとも画像の上に並べる */
.myth-ask__bubbles--top{ grid-area:1 / 1; }
.myth-ask__bubbles--bottom{ grid-area:1 / 2; }
.myth-ask__illust{ grid-area:2 / 1 / 3 / 3; }
.myth-ask__bubbles{
  list-style:none; margin:0 0 -1rem; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(.75rem,2vw,1.25rem); align-items:end;
}
/* PC：尻尾はイラストの人物（横位置およそ 15/36/59/84%）を指す */
.myth-ask__bubbles--top .myth-ask__bubble:nth-child(1)::after{ inset-inline-start:30%; }
.myth-ask__bubbles--top .myth-ask__bubble:nth-child(2)::after{ inset-inline-start:22%; }
.myth-ask__bubbles--bottom .myth-ask__bubble:nth-child(1)::after{ inset-inline-start:18%; }
.myth-ask__bubbles--bottom .myth-ask__bubble:nth-child(2)::after{ inset-inline-start:68%; }
.myth-ask__bubble{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-block-size:5.5rem;
  background:#fff; color:var(--ink);
  padding:1.25rem 1.125rem;
  border-radius:26px 34px 26px 34px;
  box-shadow:0 8px 20px rgba(35,42,32,.12);
  font-family:var(--font-ja-round); font-weight:800;
  font-size:.9375rem; line-height:1.7; text-align:center; text-wrap:pretty;
}
.myth-ask__bubble::after{
  content:""; position:absolute; inset-block-end:-.5rem; inset-inline-start:2.25rem;
  inline-size:1.125rem; block-size:1.125rem; background:#fff;
  transform:rotate(45deg);
}
/* 番号は吹き出しの左上角に掛けるバッジ */
.myth-ask__illust{ margin:0; }
.myth-ask__illust img{ display:block; inline-size:100%; block-size:auto; }

.myth-truth{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0;
  display:grid; gap:1.25rem;
}
.myth-truth__row{
  display:grid; grid-template-columns:4.5rem 1fr; gap:1.5rem; align-items:start;
  background:#fff; padding:1.5rem 1.75rem;
  box-shadow:0 8px 20px rgba(35,42,32,.09);
}
.myth-truth__no{
  display:flex; align-items:center; justify-content:center;
  inline-size:4.5rem; block-size:4.5rem;
  border-radius:56% 44% 48% 52% / 46% 56% 44% 54%;
  background:var(--green-dark); color:#fff;
  font-family:var(--font-en); font-weight:800; font-size:1.625rem;
}
.myth-truth__row:nth-child(2n) .myth-truth__no{ background:var(--yellow); color:var(--ink); }
/* 誤解 → 実際は の流れを1ブロックで見せる */
.myth-truth__q{
  margin:0 0 .625rem;
  font-family:var(--font-ja-round); font-weight:800; font-size:1rem; line-height:1.7;
  color:#7A8274;
}
.myth-truth__q::after{
  content:" →"; font-family:var(--font-en); font-weight:700; color:var(--yellow);
}
.myth-truth__lead{
  display:block; margin:0 0 .75rem;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.125rem; line-height:1.9;
  color:var(--green-dark);
}
.myth-truth__lead span{
  display:inline-flex; align-items:center; margin-inline-end:.625rem;
  padding:.2rem .75rem; border-radius:999px;
  background:var(--green-dark); color:#fff; font-size:.6875rem; letter-spacing:.08em;
  vertical-align:.1em;
}
.myth-truth__text{ margin:.375rem 0 0; font-size:.9375rem; line-height:1.95; color:var(--ink-sub); }

/* ④タブレット縦以下：画像の上に2つ、下に2つ
   ・上段は画像に被せない（下に余白）
   ・下段は画像へ重ねる（負のマージン）
   ・尻尾はイラストの人物（横位置およそ 15/36/59/84%）を指す位置に置く */
@media (max-width:1023px){
  .myth-ask{ grid-template-columns:1fr; row-gap:0; }
  .myth-ask__bubbles--top{ grid-area:auto; margin:0 0 .75rem; }
  .myth-ask__illust{ grid-area:auto; position:relative; z-index:0; }
  .myth-ask__bubbles--bottom{
    grid-area:auto; position:relative; z-index:1;
    /* イラスト（16:9相当）の高さに追従させる。固定値だと狭い幅で覆い隠していた */
    margin-block-start:-6vw;
  }
  .myth-ask__bubble{ min-block-size:4.75rem; }

  /* 上段：1人目（15%）と3人目（59%）へ */
  .myth-ask__bubbles--top .myth-ask__bubble:nth-child(1)::after{ inset-inline-start:30%; }
  .myth-ask__bubbles--top .myth-ask__bubble:nth-child(2)::after{ inset-inline-start:18%; }

  /* 下段：尻尾は上向き。2人目（36%）と4人目（84%）へ */
  .myth-ask__bubbles--bottom .myth-ask__bubble::after{
    inset-block-end:auto; inset-block-start:-.5rem;
  }
  .myth-ask__bubbles--bottom .myth-ask__bubble:nth-child(1)::after{ inset-inline-start:72%; }
  .myth-ask__bubbles--bottom .myth-ask__bubble:nth-child(2)::after{ inset-inline-start:68%; }
}
@media (max-width:37.5rem){
  /* 番号バッジの隣に「誤解」の問いを置き、本文は下段に全幅で流す */
  .myth-truth__row{
    grid-template-columns:3.25rem 1fr;
    column-gap:.875rem; row-gap:.75rem;
    padding:1.25rem 1.25rem;
  }
  .myth-truth__no{ inline-size:3.25rem; block-size:3.25rem; font-size:1.25rem; }
  .myth-truth__body{ display:contents; }
  .myth-truth__q{ grid-column:2; align-self:center; margin:0; }
  .myth-truth__lead,
  .myth-truth__text{ grid-column:1 / -1; }
}


/* ============================================================
   作業の流れ（work.html）：TOPのWHY GOJOと同じチェキ風カード＋マステ風バッジ
   ============================================================ */
.site-steps > .site-step{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff; border:0; border-radius:0;
  padding:.875rem .875rem 1.5rem;
  box-shadow:0 10px 24px rgba(35,42,32,.14);
}
.site-steps{ align-items:stretch; }
.site-steps > .site-step:nth-child(3n+1){ rotate:-1.2deg; }
.site-steps > .site-step:nth-child(3n+2){ rotate:.9deg; }
.site-steps > .site-step:nth-child(3n){ rotate:-.6deg; }
.site-steps > .site-step:hover{
  rotate:0deg; transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(35,42,32,.18); z-index:3;
}
.site-steps > .site-step .site-photo__frame{
  border-radius:0; box-shadow:none; margin-block-end:1.125rem;
  aspect-ratio:5 / 4;
}
.site-step__tape{
  position:absolute; inset-block-start:-.625rem; inset-inline-start:-.75rem; z-index:2;
  padding:.3rem 1rem; rotate:-4deg;
  background:var(--yellow); color:var(--ink);
  font-family:var(--font-en); font-weight:800; font-size:.75rem; letter-spacing:.14em;
  box-shadow:0 3px 8px rgba(35,42,32,.16);
}
.site-steps > .site-step:nth-child(2n) .site-step__tape{ background:#8CC63F; rotate:3deg; }
.site-steps > .site-step .site-step__title{
  margin:0 0 .5rem; font-size:1rem; line-height:1.6;
}
.site-steps > .site-step > p{ margin:0; font-size:.9375rem; line-height:1.85; }
@media (max-width:48rem){
  .site-steps > .site-step{ rotate:0deg !important; }
}


/* ============================================================
   対応エリア・対応建物（work.html）
   ・見出しと写真の間に余白／写真の角丸は解除
   ・3項目の見出しの前に絵文字ではないアイコン（丸バッジ＋記号）を置く
   ============================================================ */
.site-photo--wide{
  margin-block:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.25rem);
  border-radius:0;
  padding:.875rem;           /* 上下左右そろえる */
}
.site-photo--wide figcaption{ display:none; }
/* 3項目は写真のすぐ下へ */
.site-photo--wide + .site-cards{ margin-block-start:0; }

.site-photo--wide .site-photo__frame{ border-radius:0; }
.site-photo--wide img{ border-radius:0; }

.site-card__title--icon{
  display:flex; align-items:center; gap:.875rem;
  font-size:1.1875rem;
}
.site-card__title--icon::before{
  content:""; flex:none;
  inline-size:2rem; block-size:2rem;
  background:none no-repeat center / contain;
}
.site-card__title--icon[data-icon="area"]::before{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E');
}
.site-card__title--icon[data-icon="building"]::before{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M3 22V5.6L11 2v20H3zm2-3h2v-2H5v2zm0-4h2v-2H5v2zm0-4h2V9H5v2zM13 22V9h6a2 2 0 0 1 2 2v11h-8zm3-3h2v-2h-2v2zm0-4h2v-2h-2v2z'/%3E%3C/svg%3E');
}
.site-card__title--icon[data-icon="license"]::before{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M14 2H5v20h14V7h-5V2zm1.5.5L19.5 6H15.5V2.5zM8 11h8v1.6H8V11zm0 4h5.5v1.6H8V15z'/%3E%3C/svg%3E');
}


/* ============================================================
   下層ページのボタンもトップと同じゆったり寸法に。
   .site-actions は中央寄せで統一。
   ============================================================ */
.ui-btn:not(.site-hd-entry):not(.site-header-menubar__drawer-entry){
  padding:1em 2.2em; font-size:var(--t-lead);
}
.site-actions{
  display:flex; justify-content:center; flex-wrap:wrap; gap:1rem;
  align-items:stretch;
  margin-block-start:clamp(1.75rem,3vw,2.5rem);
}


/* ============================================================
   版面の左右余白を広げる（全ページ共通・ヘッダーは対象外）
   26px だと 1120px 版面が窓幅に近い時に端へ張り付いていた。
   段階的に 40px → 32px → 24px。
   ============================================================ */
.site-sec,
.stats-band__inner,
.site-cta__inner,
.p-breadcrumb__inner,
.site-subhead__inner,
main .l-center:not(.site-header-menubar__top){
  padding-inline:40px;
}
@media (max-width:64rem){
  .site-sec,
  .stats-band__inner,
  .site-cta__inner,
  .p-breadcrumb__inner,
  .site-subhead__inner,
  main .l-center:not(.site-header-menubar__top){
    padding-inline:32px;
  }
}
@media (max-width:37.5rem){
  .site-sec,
  .stats-band__inner,
  .site-cta__inner,
  .p-breadcrumb__inner,
  .site-subhead__inner,
  main .l-center:not(.site-header-menubar__top){
    padding-inline:24px;
  }
}


/* フッターの版面も本文と同じ左右余白に揃える
   （.l-center の box-sizing:content-box のままだと版面が 1120+80px に膨らみ、
     本文より40px外側から始まっていた） */
.footer-link-matrix__inner{
  box-sizing:border-box; max-inline-size:1120px; inline-size:100%;
  padding-inline:40px;
}
@media (max-width:64rem){ .footer-link-matrix__inner{ padding-inline:32px; } }
@media (max-width:37.5rem){ .footer-link-matrix__inner{ padding-inline:24px; } }


/* ============================================================
   業務案内 1つ目のセクション（〜1023px）
   縦2段に落ちる幅では、チェキ枠を傾けず版面いっぱいの横長に。
   ============================================================ */
@media (max-width:1023px){
  .site-photo--cheki{
    /* 傾きの実体は transform（rotate プロパティでは打ち消せない） */
    transform:none !important; rotate:0deg;
    inline-size:100%; max-inline-size:none;
  }
  .site-photo--cheki .site-photo__frame{ aspect-ratio:16 / 9; }
  .site-photo--cheki .site-photo__frame img{ inline-size:100%; block-size:100%; object-fit:cover; }
}


/* ①②③（〜600px）：上下2つずつを保つため吹き出しは2列のまま。
   重なりはイラストが小さいので浅くする。 */
@media (max-width:37.5rem){
  .myth-ask__bubbles{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.625rem; }
  .myth-ask__bubble{ min-block-size:0; padding:.75rem .75rem; font-size:.8125rem; line-height:1.6; }
  .myth-ask__bubbles--bottom{ margin-block-start:-3vw; }
}


/* ============================================================
   対応エリア・対応建物（〜1023px）
   1列に落ちる幅では、左にアイコン＋見出し／右に本文の横組みにして
   カードの縦幅を詰める。
   ============================================================ */
@media (max-width:1023px){
  .site-cards--3:has(.site-card__title--icon){ gap:1rem; }
  .site-card:has(> .site-card__title--icon){
    display:grid; grid-template-columns:8.5rem 1fr;
    column-gap:1.5rem; align-items:center;
    padding-block:1.25rem;
  }
  .site-card > .site-card__title--icon{
    grid-column:1; grid-row:1 / span 99; align-self:center; margin:0;
    flex-direction:column; align-items:center; text-align:center; gap:.625rem;
    font-size:1.0625rem;
  }
  .site-card > .site-card__title--icon::before{
    inline-size:3.25rem; block-size:3.25rem;
  }
  .site-card:has(> .site-card__title--icon) > p{
    grid-column:2; margin-block:0;
    font-size:.9375rem; line-height:1.85;
  }
  .site-card:has(> .site-card__title--icon) > p + p{ margin-block-start:.5rem; }
}
@media (max-width:37.5rem){
  .site-card:has(> .site-card__title--icon){ grid-template-columns:1fr; row-gap:.75rem; }
  .site-card > .site-card__title--icon{
    grid-row:auto; align-self:start;
    flex-direction:row; align-items:center; text-align:start;
  }
  .site-card:has(> .site-card__title--icon) > p{ grid-column:1; }
}


/* ============================================================
   CTA（〜1023px）：ボタンは縦3段・中央寄せ・同じ幅に揃える
   ============================================================ */
@media (max-width:1023px){
  .site-cta__inner{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .site-cta__actions{
    display:flex; flex-direction:column; align-items:center; gap:.875rem;
    inline-size:100%; max-inline-size:22rem; margin-inline:auto;
  }
  .site-cta__actions .ui-btn{ inline-size:100%; }
  .site-cta__tel{ justify-content:center; }
  .site--top .site-cta__tel{ justify-content:center; }
}


/* ============================================================
   〜600px：よくある誤解セクションを全体的にコンパクトに
   ============================================================ */
@media (max-width:37.5rem){
  .myth-truth{ margin-block-start:clamp(1.75rem,4vw,2.5rem); gap:.875rem; }
  .myth-truth__row{ padding:1rem 1rem; row-gap:.5rem; }
  .myth-truth__no{ inline-size:2.75rem; block-size:2.75rem; font-size:1.0625rem; }
  .myth-truth__q{ font-size:.875rem; line-height:1.55; }
  .myth-truth__lead{ font-size:1rem; line-height:1.75; margin-block-end:.5rem; }
  .myth-truth__lead span{ font-size:.625rem; padding:.15rem .625rem; margin-inline-end:.5rem; }
  .myth-truth__text{ margin-block-start:.25rem; font-size:.875rem; line-height:1.85; }
}


/* ============================================================
   〜600px：作業の流れは画像を小さく、左に写真＋右にテキストの横組みで詰める
   ============================================================ */
@media (max-width:37.5rem){
  .site-steps{ gap:.875rem; }
  .site-steps > .site-step{
    display:grid; grid-template-columns:minmax(4.5rem, 32%) 1fr;
    column-gap:.875rem; align-items:start;
    padding:.625rem .75rem .875rem;
  }
  .site-steps > .site-step .site-photo__frame{
    grid-column:1; grid-row:1 / span 99; align-self:start;
    margin-block-end:0; aspect-ratio:4 / 3;
  }
  .site-step__tape{
    inset-block-start:-.5rem; inset-inline-start:-.5rem;
    padding:.2rem .625rem; font-size:.625rem; letter-spacing:.1em;
  }
  .site-steps > .site-step .site-step__title{
    grid-column:2; margin:0 0 .25rem; font-size:.9375rem; line-height:1.55;
  }
  .site-steps > .site-step > p{
    grid-column:2; font-size:.8125rem; line-height:1.75;
  }
}


/* 〜600px：対応エリアの3カードもコンパクトに（左に小さめアイコン＋右に本文） */
@media (max-width:37.5rem){
  .site-cards--3:has(.site-card__title--icon){ gap:.875rem; }
  .site-card:has(> .site-card__title--icon){
    grid-template-columns:1fr;
    row-gap:.5rem;
    padding:.875rem 1rem 1rem;
  }
  .site-card > .site-card__title--icon{
    grid-column:1; grid-row:auto; align-self:start;
    flex-direction:row; align-items:center; text-align:start;
    gap:.5rem; font-size:.9375rem;
  }
  .site-card > .site-card__title--icon::before{
    inline-size:1.75rem; block-size:1.75rem;
  }
  .site-card:has(> .site-card__title--icon) > p{
    grid-column:1; font-size:.8125rem; line-height:1.8;
  }
  .site-card:has(> .site-card__title--icon) > p + p{ margin-block-start:.375rem; }
}


/* ============================================================
   〜430px（②スマホ以下）：作業の流れは縦積みに戻す。
   画像は本来（5:4）の8割程度の高さ＝おおよそ 16:10 に。
   ============================================================ */
@media (max-width:400px){
  .site-steps > .site-step{
    grid-template-columns:1fr;
    row-gap:.5rem;
    padding:.75rem .75rem 1rem;
  }
  .site-steps > .site-step .site-photo__frame{
    grid-column:1; grid-row:auto; align-self:auto;
    aspect-ratio:16 / 10; margin-block-end:.625rem;
  }
  .site-steps > .site-step .site-step__title,
  .site-steps > .site-step > p{ grid-column:1; }
  .site-steps > .site-step .site-step__title{ font-size:1rem; }
  .site-steps > .site-step > p{ font-size:.875rem; line-height:1.85; }
}


/* ============================================================
   AREAセクション（works.html）：4枚のポップカード（テープ見出し）
   ============================================================ */

.area-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem;
  margin-top:calc(var(--sec-gap) + .75rem);
}
.area-card{
  position:relative; background:var(--white);
  border:2px solid var(--beige-deep); border-radius:1.25rem;
  padding:2.75rem 2.25rem 2.25rem;
}
.area-card{ transform:none; }
/* カード本体はまっすぐ。ラベルだけ角度をばらけさせる */
.area-card:nth-child(1) .area-card__tape{ rotate:-3deg; }
.area-card:nth-child(2) .area-card__tape{ rotate:2.2deg; }
.area-card:nth-child(3) .area-card__tape{ rotate:1.4deg; }
.area-card:nth-child(4) .area-card__tape{ rotate:-2.4deg; }
.area-card__tape{
  position:absolute; inset-block-start:-.9rem; inset-inline-start:1.25rem;
  padding:.3rem 1rem; border-radius:999px;
  background:var(--pop-yellow); color:#3b2a00;
  font-family:Outfit,sans-serif; font-weight:800; font-size:.8125rem; letter-spacing:.08em;
}
.area-card__head{
  display:flex; align-items:center; gap:.75rem; margin:0 0 .625rem; padding-inline-end:4.5rem;
  font-family:var(--font-round,"M PLUS Rounded 1c","Hiragino Sans",sans-serif); font-weight:800;
  font-size:1.125rem; color:var(--green-dark);
}
/* アイコンは文字の左ではなく、カード右上にゴーストとして置く */
.area-card::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block-start:1rem; inset-inline-end:1rem;
  inline-size:4.5rem; block-size:4.5rem;
  background:none no-repeat center / contain;
  opacity:.12;
}
.area-card__head,
.area-card p{ position:relative; z-index:1; }
.area-card p{ margin:0; font-size:.9375rem; line-height:1.9; }
.area-card:has(.area-card__head[data-icon="area"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z'/%3E%3C/svg%3E');
}
.area-card:has(.area-card__head[data-icon="building"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M3 22V5.6L11 2v20H3zm2-3h2v-2H5v2zm0-4h2v-2H5v2zm0-4h2V9H5v2zM13 22V8h8v14h-8zm2-3h4v-2h-4v2zm0-4h4v-2h-4v2z'/%3E%3C/svg%3E');
}
.area-card:has(.area-card__head[data-icon="tool"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M20.7 5.3a1 1 0 0 0-1.4 0l-2.6 2.6-1.6-1.6 2.6-2.6a1 1 0 0 0-.5-1.7 5 5 0 0 0-5.7 6.4L3.6 15.9a2 2 0 0 0 0 2.8l1.7 1.7a2 2 0 0 0 2.8 0l7.5-7.5a5 5 0 0 0 6.4-5.7 1 1 0 0 0-1.3-1.9z'/%3E%3C/svg%3E');
}
.area-card:has(.area-card__head[data-icon="license"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M14 2H5v20h14V7h-5V2zm1.5.5L19.5 6H15.5V2.5zM8 11h8v1.6H8V11zm0 4h8v1.6H8V15z'/%3E%3C/svg%3E');
}
@media (max-width:47.5rem){
  .area-cards{ grid-template-columns:1fr; gap:1.5rem; }
  .area-card{ transform:none; padding:2.5rem 1.75rem 1.75rem; }
}
@media (max-width:25rem){
  .area-card__head{ font-size:1rem; gap:.5rem; }
  .area-card::after{ inline-size:3.25rem; block-size:3.25rem; }
  .area-card p{ font-size:.875rem; }
  .area-chips li
}

/* 並んだボタンの幅を揃える（対応エリアの2ボタンなど） */
.site-actions--even{ display:flex; flex-wrap:wrap; justify-content:center; }
.site-actions--even .ui-btn{
  flex:0 1 auto; inline-size:22rem; max-inline-size:100%; min-inline-size:0;
  justify-content:center; text-align:center;
}
@media (max-width:37.5rem){
  .site-actions--even{ flex-direction:column; align-items:stretch; }
  .site-actions--even .ui-btn{ flex:none; inline-size:100%; }
}

/* ============================================================
   サイトマップページ：カテゴリごとの索引。装飾はゴースト欧文だけ（案I）
   ============================================================ */
.smap-index{ position:relative; margin-top:calc(var(--sec-gap) - .5rem); }
.smap-group{ position:relative; padding-block:2rem; }
.smap-group + .smap-group{ border-block-start:2px solid var(--beige-deep); }
.smap-group__ghost{
  position:absolute; inset-block-start:.25rem; inset-inline-end:0; z-index:0;
  font-family:Outfit,sans-serif; font-weight:800;
  font-size:clamp(3.5rem,9vw,7rem); line-height:1;
  color:rgba(34,139,34,.08); white-space:nowrap; pointer-events:none;
}
.smap-group__ja{
  position:relative; z-index:1; margin:0 0 1rem;
  font-family:var(--font-round,"M PLUS Rounded 1c","Hiragino Sans",sans-serif);
  font-weight:800; font-size:1.125rem; color:var(--green-dark);
}
.smap-list{
  position:relative; z-index:1; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.25rem 3rem;
}
.smap-list a{
  display:grid; grid-template-columns:2.75rem 1fr; align-items:center; gap:.75rem;
  min-block-size:48px; padding:.375rem .25rem;
  color:var(--ink); text-decoration:none; font-weight:700; font-size:1rem;
}
.smap-list__no{ font-family:Outfit,sans-serif; font-weight:800; font-size:.8125rem; color:var(--pop-lime); }
.smap-list a > span:nth-child(2){ border-block-end:2px solid transparent; padding-block-end:.1em; }
.smap-list a:hover{ color:var(--green-dark); }
.smap-list a:hover > span:nth-child(2){ border-block-end-color:var(--pop-lime); }
.smap-list li.is-child a{ font-size:.9375rem; color:var(--ink-sub); }
@media (max-width:47.5rem){
  .smap-list{ grid-template-columns:1fr; }
  .smap-group{ padding-block:1.5rem; }
}
/* ①320px前後：ゴースト欧文が画面端で切れないよう小さくして内側へ収める */
@media (max-width:26.875rem){
  .smap-group__ghost{
    inset-inline-end:auto; inset-inline-start:0; inset-block-start:1.75rem;
    font-size:2.75rem; max-inline-size:100%; overflow:hidden;
  }
  .smap-group__ja{ position:relative; z-index:1; }
}

/* 本文中の電話番号リンク（プライバシーポリシーの窓口など）：下線なし・太字 */
.site-tel-plain{ font-weight:800; text-decoration:none; color:var(--green-dark); }
.site-tel-plain:hover{ text-decoration:none; color:var(--green-ink); }

/* 本文中のひと言を見出し級に見せる（装飾なし・サイズと余白だけ） */
.site-emph-lead{
  margin:2.25rem 0 0 !important;
  font-family:var(--font-round,"M PLUS Rounded 1c","Hiragino Sans",sans-serif); font-weight:800;
  font-size:clamp(1.375rem,3.2vw,2rem); line-height:1.55; color:var(--green-dark);
  text-wrap:pretty;
}

/* ============================================================
   五常で働く5つの理由：左右交互のジグザグ（番号ブロブ＋点線区切り）
   ============================================================ */
.reasons-zig{ display:grid; gap:0; margin-top:calc(var(--sec-gap) + .5rem); }
.reason-zig{
  display:grid; grid-template-columns:8rem 1fr; align-items:center; gap:2.25rem;
  padding-block:2.25rem;
}
.reason-zig + .reason-zig{ border-block-start:2px dashed var(--beige-deep); }
.reason-zig:nth-child(even){ grid-template-columns:1fr 8rem; }
.reason-zig:nth-child(even) .reason-zig__no{ order:2; }
.reason-zig:nth-child(even) .reason-zig__body{ order:1; text-align:end; }
.reason-zig__no{
  display:flex; align-items:center; justify-content:center;
  inline-size:8rem; block-size:8rem; border-radius:var(--blob-a);
  background:linear-gradient(155deg, #C9E36A 0%, var(--pop-lime) 50%, #4FB07A 100%); color:#123a12;
  font-family:Outfit,sans-serif; font-weight:800; font-size:2.5rem;
}
.reason-zig:nth-child(2) .reason-zig__no{ border-radius:var(--blob-b); background:linear-gradient(160deg, #FBD24B 0%, var(--pop-yellow) 50%, #E9A23C 100%); color:#3b2a00; }
.reason-zig:nth-child(3) .reason-zig__no{ border-radius:var(--blob-c); background:linear-gradient(150deg, #EDF6E4 0%, var(--pop-mint) 50%, #D6E7DE 100%); color:var(--green-dark); }
.reason-zig:nth-child(4) .reason-zig__no{ border-radius:var(--blob-b); background:linear-gradient(160deg, #2F8A3C 0%, var(--green-dark) 50%, #15584C 100%); color:#fff; }
.reason-zig:nth-child(5) .reason-zig__no{ border-radius:var(--blob-c); background:linear-gradient(145deg, #D7E56A 0%, var(--pop-lime) 50%, #5FB58F 100%); color:#123a12; }
.reason-zig__title{
  margin:0 0 .625rem;
  font-family:var(--font-round,"M PLUS Rounded 1c","Hiragino Sans",sans-serif); font-weight:800;
  font-size:1.3125rem; line-height:1.5; color:var(--green-dark); text-wrap:pretty;
}
.reason-zig__body p{ margin:0; font-size:.9375rem; line-height:1.95; max-inline-size:40rem; }
.reason-zig:nth-child(even) .reason-zig__body p{ margin-inline-start:auto; }
@media (max-width:47.5rem){
  .reason-zig,
  .reason-zig:nth-child(even){ grid-template-columns:4.75rem 1fr; gap:1.25rem; align-items:start; padding-block:1.75rem; }
  .reason-zig:nth-child(even) .reason-zig__no{ order:0; }
  .reason-zig:nth-child(even) .reason-zig__body{ order:0; text-align:start; }
  .reason-zig:nth-child(even) .reason-zig__body p{ margin-inline-start:0; }
  .reason-zig__no{ inline-size:4.75rem; block-size:4.75rem; font-size:1.5rem; }
  .reason-zig__title{ font-size:1.125rem; }
}
@media (max-width:26.875rem){
  .reason-zig,
  .reason-zig:nth-child(even){ grid-template-columns:3.25rem 1fr; gap:.5rem .875rem; padding-block:1.5rem; align-items:center; }
  .reason-zig__body{ display:contents; }
  .reason-zig__no{ inline-size:3.25rem; block-size:3.25rem; font-size:1.125rem; }
  .reason-zig__title{ margin:0; grid-column:2; font-size:1.0625rem; }
  .reason-zig__body p{ grid-column:1 / -1; font-size:.875rem; line-height:1.85; max-inline-size:none; }
  .reason-zig:nth-child(even) .reason-zig__no{ order:0; }
  .reason-zig:nth-child(even) .reason-zig__body{ order:0; }
}

/* ============================================================
   年収モデル：階段（年次が上がるほど高くなる）
   ============================================================ */
.salary-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  align-items:end; margin-top:.75rem;
}
.salary-step{
  background:var(--white); border:2px solid var(--beige-deep);
  border-start-start-radius:1.25rem; border-start-end-radius:1.25rem;
  padding:1.5rem 1.25rem 1.375rem; text-align:center;
}
.salary-step:nth-child(1){ min-block-size:11rem; }
.salary-step:nth-child(2){ min-block-size:13.5rem; background:var(--pop-mint); }
.salary-step:nth-child(3){
  min-block-size:16rem; background:var(--green-dark); border-color:var(--green-dark); color:#fff;
}
.salary-step__year{
  margin:0 0 .75rem;
  font-family:var(--font-round,"M PLUS Rounded 1c","Hiragino Sans",sans-serif);
  font-weight:800; font-size:.9375rem; color:var(--green-dark);
}
.salary-step:nth-child(3) .salary-step__year{ color:var(--pop-lime); }
.salary-step__amount{
  margin:0; font-family:Outfit,sans-serif; font-weight:800; line-height:1;
  font-size:clamp(1.75rem,4.4vw,2.5rem); color:var(--green-dark);
}
.salary-step:nth-child(3) .salary-step__amount{ color:#fff; }
.salary-step__amount em{ font-style:normal; font-size:.5em; margin-inline-start:.15em; }
.salary-step__month{ margin:.75rem 0 0; font-size:.8125rem; color:var(--ink-sub); }
.salary-step:nth-child(3) .salary-step__month{ color:rgba(255,255,255,.8); }
/* ③以下（〜600px）：縦積みだがカード幅を段階的に広げて階段を残す */
@media (max-width:37.5rem){
  .salary-steps{ grid-template-columns:1fr; align-items:stretch; gap:.5rem; }
  .salary-step{
    display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.75rem;
    min-block-size:0; padding:.875rem 1.125rem;
    border-radius:0; border-start-end-radius:1rem; border-end-end-radius:1rem;
    text-align:start;
  }
  .salary-step:nth-child(1){ inline-size:78%; min-block-size:0; }
  .salary-step:nth-child(2){ inline-size:89%; min-block-size:0; }
  .salary-step:nth-child(3){ inline-size:100%; min-block-size:0; }
  .salary-step__year{ margin:0; font-size:.875rem; }
  .salary-step__amount{ justify-self:end; font-size:1.5rem; }
  .salary-step__amount em{ font-size:.5em; margin-inline-start:.2em; }
  .salary-step__month{ grid-column:1 / -1; margin:.25rem 0 0; font-size:.75rem; }
}
/* 下から順に伸びてくる（JSが .is-armed を付けた時だけ発動＝JS無効時は素の表示） */
.salary-steps.is-armed .salary-step{
  clip-path:inset(100% 0 0 0); transform:translateY(14px);
  transition:clip-path .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.salary-steps.is-armed .salary-step:nth-child(2){ transition-delay:.16s; }
.salary-steps.is-armed .salary-step:nth-child(3){ transition-delay:.32s; }
.salary-steps.is-armed .salary-step.is-in{ clip-path:inset(0 0 0 0); transform:none; }
/* 縦積み（〜600px）のときは左→右に伸ばす */
@media (max-width:37.5rem){
  .salary-steps.is-armed .salary-step{
    clip-path:inset(0 100% 0 0); transform:translateX(-14px);
  }
  .salary-steps.is-armed .salary-step.is-in{ clip-path:inset(0 0 0 0); transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .salary-steps.is-armed .salary-step{ transition:none; clip-path:none; transform:none; }
}

/* WHO WE WANT の写真：枠も画像も角丸なし */
.site-photo--square,
.site-photo--square .site-photo__frame,
.site-photo--square img{ border-radius:0; }

/* ============================================================
   WHO WE WANT：写真の下にブロブ枠の募集資格を配置（少しずらす）
   ============================================================ */
.who-aside{ display:grid; gap:0; }
.who-badges{ display:grid; justify-items:center; gap:.75rem; margin-block-start:1.5rem; }
.who-badge{
  position:relative; /* エディタでドラッグ移動できるように */
  display:grid; align-content:center; gap:.25rem; margin:0; padding:1rem;
  inline-size:16.3125rem; block-size:14.3125rem;
  background:linear-gradient(150deg, #FFC46B 0%, #F5941D 55%, #E2760F 100%);
  border-radius:62% 38% 45% 55% / 55% 62% 38% 45%;
  font-family:var(--font-round,"M PLUS Rounded 1c","Hiragino Sans",sans-serif);
  font-weight:800; font-size:1.625rem; color:#4a2400; text-align:center;
  transform:rotate(-3deg); justify-self:center;
}
.who-badge span{
  font-family:Outfit,sans-serif; font-weight:800; font-size:.8125rem; letter-spacing:.12em;
  color:#7a3d00;
}
.who-badge:nth-child(1){ margin-inline-end:6.5rem; }
.who-badge:nth-child(2){
  inline-size:13.75rem; block-size:11.75rem;
  border-radius:42% 58% 60% 40% / 47% 40% 60% 53%; transform:rotate(3.5deg);
  margin-inline-start:7rem; margin-block-start:-3.25rem;
  background:linear-gradient(150deg, #D7E56A 0%, var(--pop-lime) 55%, #5FB58F 100%); color:#123a12;
}
.who-badge:nth-child(2) span{ color:#1c4a1c; }
@media (max-width:47.5rem){
  .who-badges{ grid-auto-flow:column; justify-content:start; align-items:start; gap:1rem; margin-block-start:1.25rem; }
  .who-badge{ inline-size:10rem; block-size:10rem; padding:.875rem; font-size:1.3125rem; }
  .who-badge:nth-child(1){ margin-inline-end:0; }
  .who-badge:nth-child(2){ margin-inline-start:0; margin-block-start:1rem; }
}
/* ④タブレット縦（およそ640〜900px）：写真の右にバッジ2つを縦に置く */
@media (min-width:40rem) and (max-width:56.25rem){
  .who-aside{ grid-template-columns:1fr auto; align-items:center; column-gap:0; }
  .who-badges{
    grid-auto-flow:row; justify-items:center; align-content:center;
    margin-block-start:0; margin-inline-start:-2.5rem; gap:0;
  }
  .who-badge{ inline-size:11rem; block-size:9.625rem; font-size:1.1875rem; }
  .who-badge:nth-child(1){ margin-inline-end:1.5rem; }
  .who-badge:nth-child(2){
    inline-size:9.25rem; block-size:7.9375rem; font-size:1.0625rem;
    margin-inline-start:2rem; margin-block-start:-1.25rem;
  }
}
@media (max-width:26.875rem){
  .who-badges{ grid-auto-flow:column; justify-content:center; align-items:start; gap:.5rem; margin-block-start:1.25rem; }
  .who-badge{ inline-size:9.25rem; block-size:8.125rem; font-size:1.0625rem; padding:.75rem; }
  .who-badge:nth-child(1){ margin-inline-end:0; }
  .who-badge:nth-child(2){
    inline-size:8.375rem; block-size:7.25rem; font-size:1rem;
    margin-inline-start:-1.25rem; margin-block-start:1.25rem;
  }
  .who-badge span{ font-size:.6875rem; }
}

/* ============================================================
   働く環境ダイジェスト：ブロブのアイコン＋タイトル＋内容（2列）
   ============================================================ */
.env-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem 3rem; margin-top:var(--sec-gap); }
.env-item{
  display:grid; grid-template-columns:4.5rem 1fr; align-items:start; gap:1.25rem;
  padding-block:1.5rem; border-block-start:2px dashed var(--beige-deep);
}
.env-item__ic{
  inline-size:4.5rem; block-size:4.5rem;
  background:var(--pop-mint) no-repeat center / 2rem;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
}
.env-item:nth-child(2) .env-item__ic{ background-color:#FBE6A8; border-radius:42% 58% 62% 38% / 46% 56% 44% 54%; }
.env-item:nth-child(3) .env-item__ic{ background-color:#D9EBC6; border-radius:63% 37% 41% 59% / 57% 42% 58% 43%; }
.env-item:nth-child(4) .env-item__ic{ background-color:#E4EFD8; border-radius:47% 53% 58% 42% / 42% 57% 43% 58%; }
.env-item:nth-child(5) .env-item__ic{ background-color:#FBE6A8; border-radius:55% 45% 39% 61% / 61% 44% 56% 39%; }
.env-item:nth-child(6) .env-item__ic{ background-color:#D9EBC6; border-radius:40% 60% 52% 48% / 48% 52% 48% 52%; }
.env-item__ic[data-icon="holiday"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8v9H5v-9h14zM7 12h4v4H7v-4z'/%3E%3C/svg%3E'); }
.env-item__ic[data-icon="pay"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M6.6 5.6H9L12 10.2 15 5.6h2.4L13.6 11.4H16.5V13H13v1.2h3.5v1.6H13V19H11v-3.2H7.5v-1.6H11V13H7.5v-1.6h2.9L6.6 5.6z'/%3E%3C/svg%3E'); }
.env-item__ic[data-icon="insurance"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 2 4 5v6.5c0 5 3.4 9.3 8 10.5 4.6-1.2 8-5.5 8-10.5V5l-8-3zm0 2.2 6 2.2v5.1c0 3.9-2.5 7.3-6 8.4-3.5-1.1-6-4.5-6-8.4V6.4l6-2.2zM11 8v2.5H8.5v2H11V15h2v-2.5h2.5v-2H13V8h-2z'/%3E%3C/svg%3E'); }
.env-item__ic[data-icon="gear"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5v-9zm2.4 1.1L12 11.7l6.6-3.1L12 5.3 5.4 8.6zM5 10.4v5.2l6 3v-5.2l-6-3zm8 8.2 6-3v-5.2l-6 3v5.2z'/%3E%3C/svg%3E'); }
.env-item__ic[data-icon="home"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 3 2 11h3v10h6v-6h2v6h6V11h3L12 3zm0 2.7 5 4V19h-2v-6H9v6H7V9.7l5-4z'/%3E%3C/svg%3E'); }
.env-item__ic[data-icon="cert"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 2a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 1.6-.9 1.9-2.1.3 1.5 1.5-.35 2.1 1.85-1 1.85 1L13.5 9.3 15 7.8l-2.1-.3L12 5.6zM8.6 15.6 6.5 22l5.5-2.6L17.5 22l-2.1-6.4a8.4 8.4 0 0 1-2 .8l1 3-2.4-1.1-2.4 1.1 1-3a8.4 8.4 0 0 1-2-.8z'/%3E%3C/svg%3E'); }
.env-item__title{
  margin:.25rem 0 .375rem;
  font-family:var(--font-round,"M PLUS Rounded 1c","Hiragino Sans",sans-serif); font-weight:800;
  font-size:1.125rem; color:var(--green-dark);
}
.env-item p{ margin:0; font-size:.9375rem; line-height:1.9; }
@media (max-width:47.5rem){ .env-list{ grid-template-columns:1fr; gap:0; } }
@media (max-width:26.875rem){
  .env-item{ grid-template-columns:3.5rem 1fr; gap:1rem; padding-block:1.25rem; }
  .env-item__ic{ inline-size:3.5rem; block-size:3.5rem; background-size:1.625rem; }
  .env-item__title{ font-size:1.0625rem; }
  .env-item p{ font-size:.875rem; line-height:1.85; }
}

/* ============================================================
   RECRUIT GUIDE：白パネル1枚の全幅リスト（ホバーで緑地に反転）
   ============================================================ */
.site-guide__list{
  list-style:none; counter-reset:g; margin:var(--sec-gap) 0 0; padding:0;
  display:block; gap:0;
  background:var(--white); border-radius:1.5rem; overflow:hidden;
  box-shadow:0 12px 30px rgba(35,42,32,.08);
}
.site-guide__list li + li{ border-block-start:2px dashed var(--beige-deep); }
.site-guide__list a{
  display:grid; grid-template-columns:3.5rem 15rem 1fr auto; align-items:center; gap:1.25rem;
  padding:1.375rem 1.75rem; border:0; border-radius:0; background:transparent;
  text-decoration:none; color:var(--ink);
}
.site-guide__list a:hover{ background:var(--green-dark); color:#fff; transform:none; }
.site-guide__list a::before{
  content:counter(g,decimal-leading-zero); grid-row:auto;
  font-family:Outfit,sans-serif; font-weight:800; font-size:1.25rem; color:var(--pop-lime);
}
.site-guide__list b{ font-size:1.125rem; color:var(--green-dark); }
.site-guide__list span{ grid-column:auto; font-size:.9375rem; line-height:1.8; color:var(--ink-sub); }
.site-guide__list a::after{
  content:"→"; font-family:Outfit,sans-serif; font-weight:800; color:var(--pop-lime);
  transition:transform .2s ease;
}
.site-guide__list a:hover b{ color:#fff; }
.site-guide__list a:hover span{ color:rgba(255,255,255,.8); }
.site-guide__list a:hover::after{ transform:translateX(5px); }
@media (max-width:60rem){
  .site-guide__list a{ grid-template-columns:3rem 1fr auto; row-gap:.25rem; }
  .site-guide__list span{ grid-column:2; }
}
@media (max-width:37.5rem){
  .site-guide__list{ border-radius:1.25rem; }
  .site-guide__list a{ padding:1.125rem 1.25rem; gap:.75rem; }
}

/* ============================================================
   読み進めナビ 5ステップ版：RECRUIT GUIDE（求職者ページ）と同じ作りに揃える
   ============================================================ */
.site-guide__steps{
  list-style:none; counter-reset:g; margin:var(--sec-gap) 0 0; padding:0;
  display:block; gap:0;
  background:var(--white); border-radius:1.5rem; overflow:hidden;
  box-shadow:0 12px 30px rgba(35,42,32,.08);
}
.site-guide__steps li + li{ border-block-start:2px dashed var(--beige-deep); }
.site-guide__steps a,
.site-guide__cur{
  display:grid; grid-template-columns:3.5rem 15rem 1fr auto; align-items:center; gap:1.25rem;
  padding:1.375rem 1.75rem; border:0; border-radius:0; background:transparent;
  text-decoration:none; color:var(--ink);
}
.site-guide__steps a::before,
.site-guide__cur::before{
  content:counter(g,decimal-leading-zero); grid-row:auto;
  font-family:Outfit,sans-serif; font-weight:800; font-size:1.25rem; color:var(--pop-lime);
}
.site-guide__steps a::after{
  content:"→"; font-family:Outfit,sans-serif; font-weight:800; color:var(--pop-lime);
  transition:transform .2s ease;
}
.site-guide__steps b{ font-family:var(--font-ja-round); font-size:1.125rem; font-weight:800; color:var(--green-dark); }
.site-guide__steps span span,
.site-guide__steps a span{ grid-column:auto; font-size:.9375rem; line-height:1.8; color:var(--ink-sub); }
.site-guide__steps a:hover{ background:var(--green-dark); color:#fff; transform:none; }
.site-guide__steps a:hover b{ color:#fff; }
.site-guide__steps a:hover span{ color:rgba(255,255,255,.8); }
.site-guide__steps a:hover::after{ transform:translateX(5px); }
/* 現在地の行はベージュ地＋ライムのラベル */
.site-guide__steps .is-current .site-guide__cur{ background:var(--beige); border:0; }
.site-guide__steps em{
  grid-column:auto; justify-self:end; font-style:normal;
  display:inline-flex; align-items:center; padding:.3rem .9rem; border-radius:999px;
  background:var(--green-dark); color:#fff;
  font-family:var(--font-ja-round); font-weight:800; font-size:.8125rem; letter-spacing:.02em;
  white-space:nowrap;
}
.site-guide__steps .is-next a{ border:0; }
@media (max-width:60rem){
  .site-guide__steps a,
  .site-guide__cur{ grid-template-columns:3rem 1fr auto; row-gap:.25rem; }
  .site-guide__steps span span,
  .site-guide__steps a span{ grid-column:2; }
  .site-guide__steps em{ grid-column:3; justify-self:end; }
}
@media (max-width:37.5rem){
  .site-guide__steps{ border-radius:1.25rem; }
  .site-guide__steps a,
  .site-guide__cur{ padding:1.125rem 1.25rem; gap:.75rem; }
}

/* ============================================================
   スタッフインタビュー：チェキ風の写真（角丸なし）＋名前、
   回答待ちの入力欄（回収後に本文へ差し替える）
   ============================================================ */
.staff-card{
  display:grid; grid-template-columns:20rem 1fr; gap:2.25rem; align-items:center;
  margin-top:var(--sec-gap);
  background:transparent; border:0; padding:0;
}
.staff-card--rev{ grid-template-columns:1fr 20rem; }
.staff-card--rev .staff-card__media{ order:2; }
.staff-card--rev .staff-card__qa{ order:1; }
.staff-card--wide{ grid-template-columns:1fr; }

/* チェキ（角丸なし・白フチ・影・軽い傾き） */
.staff-cheki{
  margin:0; background:var(--white); padding:.75rem .75rem 1rem;
  box-shadow:0 12px 28px rgba(35,42,32,.16);
  transform:rotate(-1.5deg);
}
.staff-card--rev .staff-cheki{ transform:rotate(1.5deg); }
.staff-cheki__frame{
  display:flex; align-items:flex-end; aspect-ratio:3 / 4; padding:.625rem;
  background:var(--beige-deep); color:var(--green-dark);
  font-size:.6875rem; font-weight:700; border-radius:0;
}
.staff-card--wide .staff-cheki__frame{ aspect-ratio:16 / 9; }
.staff-cheki__frame img{ inline-size:100%; block-size:100%; object-fit:cover; border-radius:0; }
.staff-cheki__name{
  margin:.875rem .25rem 0; text-align:center;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.0625rem; color:var(--green-dark);
}
.staff-cheki__name small{
  display:block; margin-block-start:.25rem;
  font-family:var(--font-ja); font-weight:500; font-size:.8125rem; color:var(--ink-sub);
}

/* 回答待ちの入力欄 */
.staff-qa{ display:grid; gap:1.25rem; margin:0; }
.staff-qa__q{
  margin:0 0 .5rem; display:inline-block;
  padding:.5rem 1rem; border-radius:1rem 1rem 1rem 0;
  background:var(--green-dark); color:#fff;
  font-family:var(--font-ja-round); font-weight:800; font-size:.9375rem;
}
.staff-qa__field{
  margin:0 0 0 1.5rem; min-block-size:3rem;
  padding:.75rem 1rem; border-radius:1rem 1rem 0 1rem;
  background:var(--white); border:2px solid var(--beige-deep);
  font-size:.875rem; line-height:1.9; color:var(--ink);
}
.staff-qa__field:empty::before{ content:"（回答待ち）"; color:#a8b0a2; }
/* ④タブレット縦（〜960px）は2カラムのまま、写真列だけ細くする */
@media (min-width:47.5rem) and (max-width:60rem){
  .staff-card:not(.staff-card--wide){ grid-template-columns:15rem 1fr; gap:1.5rem; }
  .staff-card--rev:not(.staff-card--wide){ grid-template-columns:1fr 15rem; gap:1.5rem; }
  .staff-card--rev .staff-cheki{ inline-size:100%; margin-inline:0; }
  .staff-card--wide{ grid-template-columns:1fr; }
}
@media (max-width:47.5rem){
  .staff-card,
  .staff-card--rev{ grid-template-columns:1fr; gap:1.5rem; padding:0; }
  .staff-card--rev .staff-card__media{ order:0; }
  .staff-card--rev .staff-card__qa{ order:0; }
  .staff-cheki{ inline-size:min(20rem,100%); margin-inline:auto; }
  .staff-card--wide .staff-cheki{ inline-size:100%; }
}
@media (max-width:26.875rem){
  /* ③以下は①②の写真も③と同じ全幅・同じ比率（16:9）に */
  .staff-cheki,
  .staff-card--rev .staff-cheki{ inline-size:100%; margin-inline:0; }
  .staff-cheki__frame{ aspect-ratio:16 / 9; }
  .staff-qa__q{ font-size:.9375rem; }
}

/* ①最小幅（〜360px）：読み進めナビは番号・タイトル・説明を縦積みに */
@media (max-width:22.5rem){
  .site-guide__list a,
  .site-guide__steps a,
  .site-guide__cur{
    grid-template-columns:auto 1fr; row-gap:.125rem; column-gap:.75rem;
    padding:.875rem 1rem;
  }
  /* 1行目＝番号＋（矢印／バッジ）、2行目以降＝タイトル・説明を全幅 */
  .site-guide__list a::after,
  .site-guide__steps a::after{ grid-column:2; grid-row:1; justify-self:end; }
  .site-guide__steps em{ grid-column:2; grid-row:1; justify-self:end; margin:0; padding:.2rem .7rem; font-size:.75rem; }
  .site-guide__list b,
  .site-guide__steps b{ grid-column:1 / -1; }
  .site-guide__list span,
  .site-guide__steps span span,
  .site-guide__steps a span{ grid-column:1 / -1; }
}

/* パンくずは折り返さず1行。狭幅では横スクロールで逃がす */
.p-breadcrumb__inner{
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.p-breadcrumb__inner::-webkit-scrollbar{ display:none; }
.p-breadcrumb__item{ white-space:nowrap; flex:none; }
.p-breadcrumb__item + .p-breadcrumb__item::before{ flex:none; }

/* 会社概要：情報リストと写真を上下中央揃え（写真は傾き・角丸なし） */
.site-sec__body:has(> .site-table),
.site-sec__body:has(> .company-col){ align-items:center; }

/* ============================================================
   会社概要：点線区切りの定義リスト（枠なし）
   ============================================================ */
.company-dl{ margin:0; display:grid; }
.company-dl__row{
  display:grid; grid-template-columns:12em 1fr; gap:0;
  padding-block:0; align-items:baseline;
}
.company-dl dt,
.company-dl dd{ padding:.875rem 1rem; }
.company-dl dt{ padding-inline-start:1.5rem; white-space:nowrap; }
.company-dl__row + .company-dl__row{ border-block-start:2px dashed var(--beige-deep); }
.company-dl{ font-size:var(--t-body); line-height:var(--lh-body); }
.company-dl dt{
  margin:0; font-family:inherit; font-weight:900; font-size:inherit; color:var(--green-dark);
}
.company-dl dd{ margin:0; font-size:inherit; line-height:inherit; }
@media (max-width:47.5rem){
  .company-dl__row{ grid-template-columns:9em 1fr; }
  .company-dl dt{ padding-inline-start:.75rem; }
}
@media (max-width:37.5rem){
  .company-dl__row{ grid-template-columns:1fr; }
  .company-dl__row + .company-dl__row{ border-block-start:2px dashed var(--beige-deep); }
  .company-dl dt{ padding:.875rem 0 0; white-space:normal; }
  .company-dl dd{ padding:.25rem 0 .875rem; }
}

/* 番号つきの行（キャリアなど順番のある内容） */
.num-rows{ list-style:none; margin:var(--sec-gap) 0 0; padding:0; }
.num-rows__item{
  display:grid; grid-template-columns:3rem 1fr; gap:1.25rem;
  padding-block:1.25rem; align-items:start;
}
.num-rows__item + .num-rows__item{ border-block-start:2px dashed var(--beige-deep); }
.num-rows__n{
  inline-size:3rem; block-size:3rem; display:grid; place-content:center;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  background:linear-gradient(145deg,#C9E36A 0%,var(--pop-lime) 55%,#4FB07A 100%);
  color:#123a12; font-family:Outfit,sans-serif; font-weight:800;
}
.num-rows__item:nth-child(even) .num-rows__n{
  border-radius:42% 58% 62% 38% / 46% 56% 44% 54%;
  background:linear-gradient(150deg,#FBE6A8 0%,#F6D77E 55%,#F0C765 100%); color:#5a3d05;
}
.num-rows__title{
  margin:0 0 .25rem;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.0625rem; color:var(--green-dark);
}
.num-rows__item p{ margin:0; line-height:1.9; }
@media (max-width:30rem){
  .num-rows__item{ grid-template-columns:2.5rem minmax(0,1fr); gap:.875rem; }
  .num-rows__n{ inline-size:2.5rem; block-size:2.5rem; font-size:.875rem; }
  .num-rows__title{ font-size:1rem; text-wrap:pretty; overflow-wrap:anywhere; }
}
@media (max-width:23.4375rem){
  .num-rows__item{ grid-template-columns:2.25rem minmax(0,1fr); gap:.75rem; }
  .num-rows__n{ inline-size:2.25rem; block-size:2.25rem; font-size:.8125rem; }
  .num-rows__title{ font-size:.9375rem; }
}

/* 会社概要：リストの下に「五常について」ボタン（左カラム内） */
.company-col{ min-inline-size:0; }
.company-col__action{ justify-content:flex-start; margin-block-start:1.5rem; }
@media (max-width:37.5rem){
  .company-col__action{ justify-content:center; }
}

/* ============================================================
   1日の流れ：時刻ピル＋点線の1本道（休憩は黄色のピル）
   ============================================================ */
.day-timeline{
  position:relative; display:grid; gap:.75rem;
  inline-size:fit-content; max-inline-size:100%;
  margin:var(--sec-gap) auto clamp(2.5rem,5vw,4rem);
}
/* 点線は時刻ピル（幅5.5rem）の中心を通す */
.day-timeline::before{
  content:""; position:absolute; inset-block:1.5rem; inset-inline-start:calc(2.75rem - 1px);
  border-inline-start:3px dotted var(--beige-deep);
}
.day-item{ position:relative; display:grid; grid-template-columns:5.5rem 1fr; align-items:start; gap:1.75rem; }
.day-item__pill{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:5.5rem; padding:.4rem .875rem; border-radius:999px;
  background:var(--green-dark); color:#fff;
  font-family:Outfit,sans-serif; font-weight:800; font-size:.9375rem;
}
.day-item--rest .day-item__pill{ background:var(--pop-yellow); color:#3b2a00; }
.day-item__body{ padding-block:.25rem 1rem; }
.day-item__title{
  margin:0 0 .25rem; font-family:var(--font-ja-round); font-weight:800; font-size:1.0625rem; color:var(--green-dark);
}
.day-item--rest .day-item__title{ color:#7a5200; }
.day-item__body p{ margin:0; font-size:.9375rem; line-height:1.9; }
@media (max-width:37.5rem){
  .day-timeline{ inline-size:100%; }
  .day-item{ grid-template-columns:5.5rem 1fr; gap:1.25rem; }
  .day-item__body{ padding-block:.25rem 1rem; }
}
@media (max-width:26.875rem){
  .day-item{ gap:1rem; }
  .day-item__title{ font-size:1rem; }
  .day-item__body p{ font-size:.875rem; line-height:1.85; }
}

/* ============================================================
   働く環境：日給ポリシー節の下余白／BENEFITS の写真下余白／各種手当
   ============================================================ */
.site-row:has(#e-sec2) .site-sec{ padding-block-end:clamp(1.5rem,4vw,3rem); }
.benefits-eyebrow{ margin-block-start:clamp(1.75rem,4vw,2.75rem); }

/* 各種手当：左にブロブのバッジ、右にTOPと同じ丸い行の表 */
.benefit-row{
  display:grid; grid-template-columns:8.5rem 1fr; align-items:center; gap:1.75rem;
  margin-top:var(--sec-gap);
}
.benefit-badge{
  position:relative; display:grid; place-content:center; margin:0;
  inline-size:8.5rem; block-size:8.5rem;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  background:linear-gradient(150deg, #C9E36A 0%, var(--pop-lime) 50%, #4FB07A 100%);
  color:#123a12; text-align:center; line-height:1.35;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.125rem;
}
/* 装飾：後ろにもうひとつブロブを重ねる */
.benefit-badge::before{
  content:""; position:absolute; z-index:0;
  inset-block-start:-.875rem; inset-inline-start:-1.125rem;
  inline-size:4.25rem; block-size:4.25rem;
  border-radius:42% 58% 62% 38% / 46% 56% 44% 54%;
  background:var(--pop-mint);
}
.benefit-badge > span{ position:relative; z-index:1; white-space:nowrap; }
/* 白背景では白い行が沈むため、点線区切りの行にする */
.site-table--rows{
  border-collapse:collapse; border:0; background:none;
  margin-top:0; overflow:visible; border-radius:0;
}
.site-table--rows th,
.site-table--rows td{
  border:0 !important; background:transparent; padding:.875rem 1rem; vertical-align:baseline;
}
.site-table--rows th{
  white-space:nowrap; color:var(--green-dark); width:12em; padding-inline-start:1.5rem;
}
.site-table--rows tr + tr th,
.site-table--rows tr + tr td{ border-block-start:2px dashed var(--beige-deep) !important; }
@media (max-width:47.5rem){
  .benefit-row{ grid-template-columns:7rem 1fr; gap:1.125rem; }
  .benefit-badge{ inline-size:7rem; block-size:7rem; font-size:.9375rem; }
  .benefit-badge::before{ inline-size:3.25rem; block-size:3.25rem; inset-block-start:-.75rem; inset-inline-start:-.875rem; }
  .site-table--rows th{ width:9em; padding-inline-start:.75rem; }
}
@media (max-width:30rem){
  .benefit-row{ grid-template-columns:6rem 1fr; gap:.875rem; }
  .benefit-badge{ inline-size:6rem; block-size:6rem; font-size:.8125rem; }
  .benefit-badge::before{ inline-size:2.75rem; block-size:2.75rem; inset-block-start:-.625rem; inset-inline-start:-.75rem; }
}
@media (max-width:23.4375rem){
  .benefit-row{ grid-template-columns:1fr; gap:1rem; justify-items:start; }
  .benefit-badge{ inline-size:7rem; block-size:7rem; font-size:.9375rem; }
}
@media (max-width:37.5rem){
  .site-table--rows th,
  .site-table--rows td{ display:block; width:auto; }
  .site-table--rows th{ padding:.875rem 0 0; }
  .site-table--rows td{ padding:.25rem 0 .875rem; }
  .site-table--rows tr + tr td{ border-block-start:0 !important; }
}

/* ============================================================
   福利厚生カード：ブロブのアイコン＋白カード
   ============================================================ */
.benefit-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:var(--sec-gap); }
.benefit-card{
  background:var(--white); border:2px solid var(--beige-deep); border-radius:1.25rem;
  padding:1.75rem 1.75rem 1.625rem;
}
.benefit-card__head{ display:flex; align-items:center; gap:1rem; margin:0 0 .75rem; }
.benefit-card__ic{
  flex:none; inline-size:3.75rem; block-size:3.75rem;
  background:var(--pop-mint) no-repeat center / 1.75rem;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
}
.benefit-card:nth-child(2) .benefit-card__ic{ background-color:#D9EBC6; border-radius:42% 58% 62% 38% / 46% 56% 44% 54%; }
.benefit-card:nth-child(3) .benefit-card__ic{ background-color:#D9EBC6; border-radius:63% 37% 41% 59% / 57% 42% 58% 43%; }
.benefit-card:nth-child(4) .benefit-card__ic{ background-color:#E4EFD8; border-radius:47% 53% 58% 42% / 42% 57% 43% 58%; }
.benefit-card__ic[data-icon="insurance"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 2 4 5v6.5c0 5 3.4 9.3 8 10.5 4.6-1.2 8-5.5 8-10.5V5l-8-3zm0 2.2 6 2.2v5.1c0 3.9-2.5 7.3-6 8.4-3.5-1.1-6-4.5-6-8.4V6.4l6-2.2zM11 8v2.5H8.5v2H11V15h2v-2.5h2.5v-2H13V8h-2z'/%3E%3C/svg%3E'); }
.benefit-card__ic[data-icon="gear"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5v-9zm2.4 1.1L12 11.7l6.6-3.1L12 5.3 5.4 8.6zM5 10.4v5.2l6 3v-5.2l-6-3zm8 8.2 6-3v-5.2l-6 3v5.2z'/%3E%3C/svg%3E'); }
.benefit-card__ic[data-icon="home"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 3 2 11h3v10h6v-6h2v6h6V11h3L12 3zm0 2.7 5 4V19h-2v-6H9v6H7V9.7l5-4z'/%3E%3C/svg%3E'); }
.benefit-card__ic[data-icon="cert"]{ background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 2a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 1.6-.9 1.9-2.1.3 1.5 1.5-.35 2.1 1.85-1 1.85 1L13.5 9.3 15 7.8l-2.1-.3L12 5.6zM8.6 15.6 6.5 22l5.5-2.6L17.5 22l-2.1-6.4a8.4 8.4 0 0 1-2 .8l1 3-2.4-1.1-2.4 1.1 1-3a8.4 8.4 0 0 1-2-.8z'/%3E%3C/svg%3E'); }
.benefit-card__title{
  margin:0; font-family:var(--font-ja-round); font-weight:800; font-size:1.1875rem; color:var(--green-dark);
}
.benefit-card p{ margin:0 0 .625rem; font-size:.9375rem; line-height:1.9; }
.benefit-card p:last-child{ margin:0; }
.benefit-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; padding:0; }
.benefit-chips li{
  padding:.25rem .8rem; border-radius:999px; background:var(--beige);
  font-size:.8125rem; font-weight:700; color:var(--green-dark);
}
@media (max-width:47.5rem){ .benefit-cards{ grid-template-columns:1fr; } }
@media (max-width:26.875rem){
  .benefit-card{ padding:1.25rem 1.125rem 1.375rem; }
  .benefit-card__ic{ inline-size:3rem; block-size:3rem; background-size:1.5rem; }
  .benefit-card__title{ font-size:1.0625rem; }
  .benefit-card p{ font-size:.875rem; line-height:1.85; }
}

/* 社内イベント：1カラムで、タイトルと本文を横並びにした同じ枠 */
.benefit-card--row{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1.75rem;
  margin-top:1.25rem;
}
.benefit-card--row .benefit-card__head{ margin:0; }
.benefit-card__ic[data-icon="event"]{
  background-color:#FBE6A8; border-radius:55% 45% 39% 61% / 61% 44% 56% 39%;
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v11a2 2 0 0 1-1 1.7V20h-2.5v-2h-11v2H4v-2.3A2 2 0 0 1 3 16V5a2 2 0 0 1 2-2zm0 2v5h14V5H5zm1 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm12 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E');
}
@media (max-width:47.5rem){
  .benefit-card--row{ grid-template-columns:1fr; gap:.75rem; align-items:start; }
}


/* SAFETY & HEALTH：左右カラムを上下中央揃え */
.site-sec:has(#e-sec4) .site-sec__body{ align-items:center; }

/* ============================================================
   ATMOSPHERE：TOPのWHY GOJOカードと同じ作り（テープ＋矩形写真＋浮くホバー）
   ============================================================ */
.why-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:var(--sec-gap); }
.why-card{
  position:relative; background:var(--white); border:0; border-radius:0;
  padding:1.5rem 1.5rem 1.75rem;
  box-shadow:0 14px 30px rgba(35,42,32,.10);
  transition:rotate .25s ease, transform .25s ease, box-shadow .25s ease;
}
.why-card:nth-child(1){ rotate:-1deg; }
.why-card:nth-child(2){ rotate:1.2deg; }
.why-card:hover{ rotate:0deg; transform:translateY(-6px); box-shadow:0 20px 40px rgba(35,42,32,.18); z-index:3; }
.why-card .site-photo__frame{
  border-radius:0; box-shadow:none; margin-block-end:1.125rem; aspect-ratio:5 / 4;
}
.why-card__tape{
  position:absolute; inset-block-start:-.625rem; inset-inline-start:-.75rem; z-index:2;
  padding:.3rem 1rem;
  background:var(--pop-yellow); color:#232A20;
  font-family:Outfit,sans-serif; font-weight:800; font-size:.75rem; letter-spacing:.14em;
  box-shadow:0 3px 8px rgba(35,42,32,.16);
  rotate:-4deg;
}
.why-card:nth-child(2) .why-card__tape{ rotate:3.5deg; background:var(--pop-lime); }
.why-card__title{
  margin:0 0 .5rem;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.125rem; line-height:1.5; color:var(--green-dark);
}
.why-card p{ margin:0 0 .625rem; font-size:.9375rem; line-height:1.9; }
.why-card p:last-child{ margin:0; }
@media (max-width:47.5rem){
  .why-cards{ grid-template-columns:1fr; }
  .why-card,
  .why-card:nth-child(1),
  .why-card:nth-child(2){ rotate:0deg; }
}

/* Pull Quote：背景・ラインを外して文字だけで見せる */
.site-pull{
  padding:0; border:0; background:none; border-radius:0;
  margin-block:clamp(1.25rem,2.5vw,1.75rem);
}
.site-pull--lg{ border:0; }
.site-pull--center{ text-align:center; }
.site-pull-note{ text-align:center; }

/* ③以下：働く環境ページのカード類をコンパクトに */
@media (max-width:27rem){
  .day-item{ padding-block:.625rem; }
  .day-item__body{ padding:.75rem .875rem; }
  .day-item__title{ margin-block-end:.25rem; }
  .day-item__body p{ line-height:1.7; }
  .benefit-cards{ gap:.875rem; }
  .benefit-card{ padding:1.125rem 1.125rem 1rem; }
  .benefit-card__head{ gap:.75rem; margin-block-end:.5rem; }
  .benefit-card__ic{ inline-size:2.75rem; block-size:2.75rem; background-size:1.375rem; }
  .benefit-card p{ line-height:1.75; margin-block-end:.5rem; }
  .benefit-chips{ gap:.375rem; }
  .why-card{ padding:1.125rem 1.125rem 1.25rem; }
  .why-card .site-photo__frame{ margin-block-end:.875rem; }
  .why-card p{ line-height:1.75; margin-block-end:.5rem; }
}

/* ①幅：次に読むボタンをコンテンツ幅内に収める */
@media (max-width:23.4375rem){
  .site-actions .ui-btn{
    max-inline-size:100%; padding-inline:1rem;
    font-size:.875rem; text-align:center; white-space:normal;
  }
}

/* ①幅：指定位置で改行 */
.br-xs{ display:none; }
@media (max-width:23.4375rem){
  .br-xs{ display:block; }
}

/* 経験者ページ：いまの職場で〜 の3項目をブロブ枠で3並び */
.exp-ask__h{ text-align:center; margin-block-end:0; }
.exp-asks{
  list-style:none; margin:clamp(1.5rem,3vw,2.25rem) auto 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,13.5rem)); justify-content:center;
  gap:clamp(1rem,2.5vw,1.5rem);
}
.exp-ask{
  display:grid; place-content:center; text-align:center;
  aspect-ratio:1 / 1; padding:clamp(1rem,2vw,1.5rem);
  background:linear-gradient(145deg, #BFE3C0 0%, var(--pop-mint) 55%, #8FD3B4 100%);
  border:0;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  font-family:var(--font-ja-round); font-weight:700;
  font-size:clamp(.875rem,1.5vw,1rem); line-height:1.75; color:var(--green-dark);
  text-wrap:pretty;
}
.exp-ask:nth-child(2){
  border-radius:42% 58% 62% 38% / 46% 56% 44% 54%; rotate:1.5deg;
  background:linear-gradient(150deg, #FBE6A8 0%, #F6D77E 55%, #F0C765 100%);
}
.exp-ask:nth-child(3){
  border-radius:63% 37% 41% 59% / 57% 42% 58% 43%; rotate:-1.5deg;
  background:linear-gradient(135deg, #D9EBC6 0%, var(--pop-lime) 60%, #A9D46A 100%);
}
.exp-ask:nth-child(1){ rotate:-1deg; }
@media (max-width:47.5rem){
  .exp-asks{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
  .exp-ask{ font-size:.8125rem; padding:.875rem; }
}
/* ③②：2＋1の中央揃え */
@media (max-width:30rem){
  .exp-asks{ display:flex; flex-wrap:wrap; justify-content:center; gap:.875rem; }
  .exp-ask{ flex:0 0 calc(50% - .5rem); font-size:.8125rem; padding:1rem; }
}
/* ①：横長のバッジにして縦を詰める */
@media (max-width:23.4375rem){
  .exp-asks{ flex-direction:column; align-items:center; gap:.75rem; }
  .exp-ask{
    flex:none; inline-size:100%; aspect-ratio:auto;
    padding:1.5rem 2rem; font-size:.9375rem; line-height:1.7;
  }
  .exp-ask br{ display:none; }
}

/* 経験者ページ：3つのブロブ枠まわりの装飾 */
.exp-asks-wrap{ position:relative; }
.exp-asks-wrap > .pop-blob{ position:absolute; z-index:0; pointer-events:none; }
.exp-asks-wrap .exp-asks{ position:relative; z-index:1; }
@media (max-width:47.5rem){
  .exp-asks-wrap > .pop-blob{ display:none; }
}

/* ============================================================
   FAQ：Q/Aブロブバッジ＋点線区切り（TOPの雰囲気に合わせる）
   ============================================================ */
.site-faq{ margin:var(--sec-gap) 0 0; }
.site-faq__q{
  display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; align-items:start;
  background:none; border:0; border-radius:0; padding:1.5rem 0 0;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.0625rem; line-height:1.6;
  color:var(--green-dark); text-wrap:pretty;
}
.site-faq__q::before{
  content:"Q"; display:grid; place-content:center;
  inline-size:2.5rem; block-size:2.5rem;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  background:linear-gradient(145deg,#C9E36A 0%,var(--pop-lime) 55%,#4FB07A 100%);
  color:#123a12; font-family:Outfit,sans-serif; font-weight:800; font-size:1.125rem;
}
.site-faq__a{
  display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; align-items:start;
  background:none; border:0; border-radius:0;
  margin:0; padding:.875rem 0 1.5rem;
  border-block-end:2px dashed var(--beige-deep);
}
.site-faq__a::before{
  content:"A"; display:grid; place-content:center;
  inline-size:2.5rem; block-size:2.5rem;
  border-radius:42% 58% 62% 38% / 46% 56% 44% 54%;
  background:linear-gradient(150deg,#FBE6A8 0%,#F6D77E 55%,#F0C765 100%);
  color:#5a3d05; font-family:Outfit,sans-serif; font-weight:800; font-size:1.125rem;
}
.site-faq__a > *{ grid-column:2; }
.site-faq__a p{ margin:0 0 .7em; line-height:1.9; }
.site-faq__a p:last-child{ margin:0; }
@media (max-width:30rem){
  .site-faq__q,
  .site-faq__a{ grid-template-columns:2rem 1fr; gap:.75rem; }
  .site-faq__q::before,
  .site-faq__a::before{ inline-size:2rem; block-size:2rem; font-size:.9375rem; }
  .site-faq__q{ font-size:1rem; }
}

/* お問い合わせ：本文中の電話番号を強調 */
.tel-strong{
  font-weight:800; font-size:1.125em; text-decoration:none;
  color:var(--green-dark);
}
.tel-strong:hover{ text-decoration:none; opacity:.75; }

/* 注意事項の帯リンク */
.notice-band{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
  margin-block-start:1.25rem;
  padding:.875rem 1.25rem;
  background:var(--green-dark); border:0;
  color:#fff; font-size:.875rem; line-height:1.8; text-decoration:none;
  text-wrap:pretty;
  transition:background .2s ease, transform .2s ease;
}
.notice-band::after{
  content:""; flex:none; inline-size:2rem; block-size:2rem; border-radius:999px;
  background:#fff no-repeat center / .75rem;
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23123a12'%3E%3Cpath d='M13.2 4.8 11.8 6.2l4.8 4.8H3v2h13.6l-4.8 4.8 1.4 1.4L20.4 12z'/%3E%3C/svg%3E');
  transition:translate .2s ease;
}
.notice-band:hover::after{ translate:.25rem 0; }
.notice-band:hover{
  background:var(--green); transform:translateY(-2px); text-decoration:none; color:#fff;
}

/* ③以下：お問い合わせの種類のバッジをコンテンツ幅に揃える */
@media (max-width:27rem){
  .site-form__choices{ display:grid; grid-template-columns:1fr; gap:.625rem; }
  .site-form__choices .site-form__choice{ inline-size:100%; }
  .site-form__consent .site-form__choices{ display:flex; }
}

/* ============================================================
   応募のながれ：矢羽根でつながる3ステップ
   ============================================================ */
.entry-flow{
  list-style:none; margin:var(--sec-gap) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem;
  align-items:stretch;
}
.entry-flow__item{
  position:relative; background:var(--beige);
  display:grid; grid-template-columns:2.75rem 1fr; grid-template-rows:auto 1fr;
  gap:.25rem .875rem; align-items:center; align-content:start;
  padding:1.5rem 1.375rem; text-align:start;
}
/* 先のカードほど手前に置き、矢印が次のカードに隠れないようにする */
.entry-flow__item:nth-child(1){ z-index:3; }
.entry-flow__item:nth-child(2){ z-index:2; }
.entry-flow__item:nth-child(3){ z-index:1; }
.entry-flow__item:not(:last-child)::after{
  content:""; position:absolute; z-index:3;
  inset-inline-end:-.875rem; inset-block-start:50%; translate:50% -50%;
  inline-size:2.5rem; block-size:2.5rem; border-radius:999px;
  background:var(--pop-yellow) no-repeat center / 1.125rem;
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23123a12'%3E%3Cpath d='M13.2 4.8 11.8 6.2l4.8 4.8H3v2h13.6l-4.8 4.8 1.4 1.4L20.4 12z'/%3E%3C/svg%3E');
  box-shadow:0 3px 10px rgba(35,42,32,.18);
}
.entry-flow__num{
  grid-column:1; grid-row:1;
  inline-size:2.75rem; block-size:2.75rem; display:grid; place-content:center;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  background:linear-gradient(145deg,#C9E36A 0%,var(--pop-lime) 55%,#4FB07A 100%);
  color:#123a12; font-family:Outfit,sans-serif; font-weight:800; font-size:1.0625rem;
}
.entry-flow__title{
  grid-column:2; grid-row:1; min-inline-size:0; margin:0;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.0625rem; color:var(--green-dark);
}
.entry-flow__item p{
  grid-column:1 / -1; grid-row:2; align-self:start; min-inline-size:0; margin:.5rem 0 0;
  font-size:.875rem; line-height:1.85;
}
@media (max-width:47.5rem){
  .entry-flow{ grid-template-columns:1fr; gap:1.75rem; }
  .entry-flow__item{ padding:1.25rem; }
  .entry-flow__item:not(:last-child)::after{
    inset-inline-end:50%; inset-block-start:auto; inset-block-end:-.875rem;
    translate:50% 50%; rotate:90deg;
  }
}

/* OTHER WAYS：ボタン2つを同幅で並べ、下に枠なしの電話番号 */
.other-ways__btns{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.875rem;
}
.other-ways__btns .ui-btn{
  flex:0 1 15rem; min-inline-size:0; justify-content:center; text-align:center;
}
.other-ways__tel{
  display:grid; justify-items:center; gap:.25rem;
  margin-block-start:1.5rem; text-align:center;
}
.other-ways__tel span{ font-size:.8125rem; color:#4a5544; letter-spacing:.04em; }
.other-ways__tel .tel-strong{
  font-family:Outfit,sans-serif; font-size:2.375rem; font-weight:800; letter-spacing:.02em;
}
@media (max-width:30rem){
  .other-ways__btns .ui-btn{ flex:1 1 100%; }
  .other-ways__tel .tel-strong{ font-size:1.875rem; }
}

/* 代表挨拶ページ：写真と写真枠の角丸を解除 */
.site--information .site-photo,
.site--information .site-photo__frame,
.site--information .site-photo__frame img{ border-radius:0; }

/* ============================================================
   五常について：単調な文字量に視覚のリズムをつくる
   ============================================================ */
/* 仁義礼智信の5バッジ */
.gojo-five{
  list-style:none; margin:clamp(1.75rem,3vw,2.5rem) 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.75rem,2vw,1.25rem);
}
.gojo-five__item{
  display:grid; justify-items:center; align-content:center; gap:.125rem;
  aspect-ratio:1 / 1; padding:.5rem;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  background:linear-gradient(145deg,#DCEFC2 0%,var(--pop-lime) 60%,#A9D46A 100%);
  color:var(--green-dark); text-align:center;
}
.gojo-five__item:nth-child(2){ border-radius:42% 58% 62% 38% / 46% 56% 44% 54%; rotate:1.5deg;
  background:linear-gradient(150deg,#FBE6A8 0%,#F6D77E 55%,#F0C765 100%); }
.gojo-five__item:nth-child(3){ border-radius:63% 37% 41% 59% / 57% 42% 58% 43%; rotate:-1.5deg;
  background:linear-gradient(145deg,#BFE3C0 0%,var(--pop-mint) 55%,#8FD3B4 100%); }
.gojo-five__item:nth-child(4){ border-radius:47% 53% 58% 42% / 43% 58% 42% 57%; rotate:1deg; }
.gojo-five__item:nth-child(5){ border-radius:55% 45% 38% 62% / 60% 40% 60% 40%; rotate:-1deg;
  background:linear-gradient(150deg,#FBE6A8 0%,#F6D77E 55%,#F0C765 100%); }
.gojo-five__kanji{
  font-family:var(--font-ja-round); font-weight:800;
  font-size:clamp(1.5rem,3.5vw,2.125rem); line-height:1.1;
}
.gojo-five__yomi{ font-size:.6875rem; letter-spacing:.08em; opacity:.72; }
.gojo-five__note{
  margin-block-start:.25rem; font-size:clamp(.625rem,1.15vw,.75rem);
  font-weight:700; line-height:1.4; white-space:nowrap;
}

/* 補足の白カード */
.about-note{
  margin-block:clamp(1.75rem,3vw,2.5rem) 0;
  padding:0;
  background:none;
  border:0;
}
.about-note__title{ margin-block-start:0; }
.about-note p{ margin:0 0 .8em; line-height:1.95; }
.about-note p:last-child{ margin:0; }

/* 沿革タイムライン */
.about-history{
  list-style:none; margin:var(--sec-gap) 0 0; padding:0;
}
.about-history__item{
  position:relative;
  display:grid; grid-template-columns:11rem 1fr; gap:4rem; align-items:start;
  padding-block:0 2.25rem; padding-inline-start:0;
}
.about-history__item:not(:last-child)::before{
  content:""; position:absolute; z-index:0;
  inset-block:1.5rem -.75rem; inset-inline-start:11rem;
  border-inline-start:3px dashed var(--pop-lime);
}
.about-history__item::after{
  content:""; position:absolute; z-index:1;
  inset-block-start:.625rem; inset-inline-start:11rem; translate:-50% 0;
  inline-size:1rem; block-size:1rem; border-radius:999px;
  background:var(--pop-lime); box-shadow:0 0 0 4px var(--beige);
}
.about-history__year{
  justify-self:start; padding-inline-end:2rem;
  font-family:Outfit,sans-serif; font-weight:800; font-size:1.75rem;
  color:var(--green-dark); line-height:1.2; white-space:nowrap;
}
.about-history__year small{ font-family:var(--font-ja-round); font-size:.9375rem; margin-inline-start:.1875rem; }
.about-history__item p{ margin:.375rem 0 0; font-size:1.0625rem; line-height:1.95; }
@media (max-width:27rem){
  /* 3＋2の中央揃え、色の並びを入れ替える */
  .gojo-five{ display:flex; flex-wrap:wrap; justify-content:center; }
  .gojo-five__item{ flex:0 0 calc(33.333% - .75rem); }
  .gojo-five__item:nth-child(2){
    background:linear-gradient(145deg,#BFE3C0 0%,var(--pop-mint) 55%,#8FD3B4 100%);
  }
  .gojo-five__item:nth-child(3){
    background:linear-gradient(150deg,#FBE6A8 0%,#F6D77E 55%,#F0C765 100%);
  }
  .gojo-five__item:nth-child(4){
    background:linear-gradient(150deg,#FBE6A8 0%,#F6D77E 55%,#F0C765 100%);
  }
  .gojo-five__item:nth-child(5){
    background:linear-gradient(145deg,#DCEFC2 0%,var(--pop-lime) 60%,#A9D46A 100%);
  }
}
@media (max-width:37.5rem){
  .gojo-five{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .about-history__item{ grid-template-columns:1fr; gap:.25rem; padding-inline-start:1.5rem; padding-block-end:1.75rem; }
  .about-history__item:not(:last-child)::before{ inset-inline-start:0; inset-block:1.25rem -.5rem; }
  .about-history__item::after{ inset-inline-start:0; inset-block-start:.5rem; }
  .about-history__year{ justify-self:start; padding-inline-end:0; font-size:1.375rem; }
  .about-history__item p{ font-size:1rem; }
}

/* 沿革：見出しと会社概要リンクを横並び */
.about-sec-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem 1.5rem;
}
.about-sec-head .site-h2{ margin-block-end:0; }
@media (max-width:37.5rem){
  .about-sec-head{ align-items:flex-start; }
}

/* ボタン幅を揃える */
.site-actions--even{ display:flex; flex-wrap:wrap; gap:.875rem; }
.site-actions--even .ui-btn{ flex:0 1 16rem; justify-content:center; text-align:center; }
@media (max-width:30rem){
  .site-actions--even .ui-btn{ flex:1 1 100%; }
}

/* ============================================================
   スクロール演出（案2＋案3）
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .anim-armed{ opacity:1 !important; translate:none !important; scale:none !important; }
}

/* 初期状態はCSSだけで確定させる（JSの anim-armed 付与を待たない＝ちらつき防止）。
   html.anim-ready はページ ＜head＞ のインラインスクリプトが初回描画前に付ける。 */
.anim-ready :is(.anim-rise, [data-reveal], .site-card, .why-card, .benefit-card,
  .entry-flow__item, .exp-ask, .gojo-five__item, .about-history__item, .day-item,
  .site-photo):not(.stats-band, .stats-band *):not(.anim-rise){
  opacity:0; translate:0 24px; scale:.96;
}
.anim-ready .anim-rise:not(.stats-band, .stats-band *) > .anim-rise__in{ translate:0 110%; }
@media (prefers-reduced-motion: reduce){
  .anim-ready :is(.anim-rise, [data-reveal], .site-card, .why-card, .benefit-card,
    .entry-flow__item, .exp-ask, .gojo-five__item, .about-history__item, .day-item,
    .site-photo){ opacity:1 !important; translate:none !important; scale:none !important; }
  .anim-ready .anim-rise > .anim-rise__in{ translate:none !important; }
}

/* 見出し：窓の下から立ち上がる */
.anim-rise{ overflow:clip; overflow-clip-margin:.35em; }
.anim-rise .anim-rise__in{ display:block; will-change:transform; }
.anim-ready .anim-rise.anim-armed .anim-rise__in{ translate:0 110%; }
.anim-ready .anim-rise.anim-armed.is-in .anim-rise__in{
  animation:animRise .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes animRise{ to{ translate:0 0; } }

/* 通常要素：ふわっと弾んで登場 */
.anim-ready .anim-armed:not(.anim-rise){
  opacity:0; translate:0 24px; scale:.96;
}
.anim-ready .anim-armed:not(.anim-rise).is-in{
  animation:animPop .6s cubic-bezier(.34,1.56,.64,1) var(--anim-delay,0s) forwards;
}
@keyframes animPop{ to{ opacity:1; translate:0 0; scale:1; } }

/* ブロブのバッジ：遅れてぷるっと弾み、そのあとゆっくり形が揺れる */
.anim-ready .anim-armed .entry-flow__num,
.anim-ready .anim-armed .benefit-card__ic,
.anim-ready .gojo-five__item.anim-armed,
.anim-ready .anim-armed .site-faq__q::before{
  will-change:transform;
}
.anim-ready .entry-flow__item.anim-armed .entry-flow__num{
  opacity:0; scale:.35; rotate:-40deg;
}
.anim-ready .entry-flow__item.anim-armed.is-in .entry-flow__num{
  animation:animBlobPop .65s cubic-bezier(.34,1.7,.5,1) calc(var(--anim-delay,0s) + .2s) forwards,
            animBlobFloat 5s ease-in-out calc(var(--anim-delay,0s) + .9s) infinite;
}
@keyframes animBlobPop{
  60%{ opacity:1; scale:1.12; rotate:6deg; }
  to{ opacity:1; scale:1; rotate:0deg; }
}
@keyframes animBlobFloat{
  0%,100%{ border-radius:58% 42% 47% 53% / 52% 47% 53% 48%; translate:0 0; }
  50%{ border-radius:42% 58% 55% 45% / 48% 55% 45% 52%; translate:0 -4px; }
}
/* 仁義礼智信のバッジは登場後もゆっくり形が変わる */
.anim-ready .gojo-five__item.anim-armed.is-in{
  animation:animPop .6s cubic-bezier(.34,1.56,.64,1) var(--anim-delay,0s) forwards,
            animShapeFloat 6s ease-in-out calc(var(--anim-delay,0s) + .8s) infinite;
}
@keyframes animShapeFloat{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -5px; }
}

/* 経験者ページ：写真とOUR DIFFERENCE見出しの間隔 */
.site-sec:has(#x-sec2) > .site-photo{ margin-block-end:clamp(2.5rem,5vw,4rem); }

/* 経験者ページ：見出しとリストの間隔 */
.site-sec:has(#x-sec2) .company-dl{ margin-block-start:clamp(2rem,4vw,3rem); }

/* HIRING FLOW：対応エリアカードと同じ体裁のアイコン */
.area-card:has(.area-card__head[data-icon="entry"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M4 3h11l5 5v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm10 1.9V9h4.1L14 4.9zM7 12h10v1.7H7V12zm0 4h10v1.7H7V16z'/%3E%3C/svg%3E');
}
.area-card:has(.area-card__head[data-icon="calendar"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h2V2zm12 7H5v10h14V9zM7 11h4v4H7v-4z'/%3E%3C/svg%3E');
}
.area-card:has(.area-card__head[data-icon="talk"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M3 4h13a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8l-5 4V4zm16 4h2a1 1 0 0 1 1 1v11l-4-3h-7v-2h7a1 1 0 0 0 1-1V8z'/%3E%3C/svg%3E');
}
.area-card:has(.area-card__head[data-icon="check"])::after{
  background-image:url('data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314601A'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.4-5.4 1.7 1.7-7.1 7.1z'/%3E%3C/svg%3E');
}

/* リンクのないカードはホバーで動かさない（全ページ共通） */
.site-card:not(:has(a)):hover,
.benefit-card:not(:has(a)):hover,
.area-card:not(:has(a)):hover,
.entry-flow__item:not(:has(a)):hover{
  translate:none;
}
.why-card:not(:has(a)):hover{
  transform:none; box-shadow:0 14px 30px rgba(35,42,32,.10);
}
.why-card:nth-child(1):not(:has(a)):hover{ rotate:-1deg; }
.why-card:nth-child(2):not(:has(a)):hover{ rotate:1.2deg; }
@media (max-width:47.5rem){
  .why-card:nth-child(1):not(:has(a)):hover,
  .why-card:nth-child(2):not(:has(a)):hover{ rotate:0deg; }
}

/* 経験者ページ：募集要項の見出しと表の間隔 */
.site-sec:has(#x-sec5) .site-table--rows{ margin-block-start:clamp(2rem,4vw,3rem); }

/* 五常について：④以下の幅では代表ポートレートも PHOTO I02 と同じ全幅・横長にする */
@media (max-width:56.25rem){
  .site-sec:has(#i-sec1) .site-sec__body{ display:block; }
  .site-sec:has(#i-sec1) .site-photo{
    inline-size:100%; max-inline-size:none; margin:0 0 clamp(1.5rem,4vw,2.5rem);
    rotate:0deg; transform:none;
  }
  .site-sec:has(#i-sec1) .site-photo__frame--34{ aspect-ratio:16 / 9; inline-size:100%; }
}

/* ③以下：指定位置で改行 */
.br-sm{ display:none; }
@media (max-width:27rem){
  .br-sm{ display:block; }
}
/* ①幅：VISIONのボタンを1行に収める */
@media (max-width:23.4375rem){
  .site-actions--even .ui-btn{
    font-size:.8125rem; padding-inline:.75rem; white-space:nowrap;
  }
}

/* ブロブバッジ内の文字色は黒で統一 */
.exp-ask,
.gojo-five__item,
.entry-flow__num,
.entry-flow__item:nth-child(even) .entry-flow__num,
.num-rows__n,
.num-rows__item:nth-child(even) .num-rows__n,
.benefit-badge,
.who-badge,
.site-faq__q::before,
.site-faq__a::before{
  color:#232A20;
}

/* 未経験者ページ：募集要項の見出しと表の間隔（経験者ページと同じ） */
.site-sec:has(#b-sec5) .site-table--rows{ margin-block-start:clamp(2rem,4vw,3rem); }

/* 文字だけで目立たせる強調文 */
.lead-emphasis{
  margin-block:1.75rem 0;
  font-family:var(--font-ja-round); font-weight:800;
  font-size:clamp(1.25rem,2.6vw,1.5rem); line-height:1.8;
  color:var(--green-dark); letter-spacing:.02em; text-wrap:pretty;
}

/* ============================================================
   未経験の方に向いている理由：イラスト左右交互の3行
   ============================================================ */
.why-suits{ display:grid; margin-block-start:var(--sec-gap); }
.why-suits__item{
  display:grid; grid-template-columns:9.5rem 1fr; gap:.5rem 2.5rem;
  align-items:center; padding-block:2rem;
}
.why-suits__ill{ grid-column:1; grid-row:1 / span 2; align-self:center; }
.why-suits__body{ grid-column:2; grid-row:1; align-self:end; }
.why-suits__text{ grid-column:2; grid-row:2; margin:0; font-size:.9375rem; line-height:1.9; align-self:start; }
.why-suits__item:nth-child(even) .why-suits__ill{ grid-column:2; }
.why-suits__item:nth-child(even) .why-suits__body,
.why-suits__item:nth-child(even) .why-suits__text{ grid-column:1; }
.why-suits__item + .why-suits__item{ border-block-start:2px dashed var(--beige-deep); }
.why-suits__item:nth-child(even){ grid-template-columns:1fr 9.5rem; }
.why-suits__ill{
  inline-size:9.5rem; block-size:9.5rem;
  display:grid; place-items:end start; overflow:visible;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  background:var(--pop-mint);
}
.why-suits__item:nth-child(2) .why-suits__ill{
  border-radius:42% 58% 62% 38% / 46% 56% 44% 54%; background:#FBE6A8;
}
.why-suits__item:nth-child(3) .why-suits__ill{
  border-radius:63% 37% 41% 59% / 57% 42% 58% 43%; background:#DCEFC2;
}
/* 3枚とも人物のバウンディングボックスで正規化済み。高さ基準で一律に揃える */
.why-suits__ill img{ display:block; block-size:8.4rem; inline-size:auto; max-inline-size:none; }
.why-suits__n{
  display:block; font-family:Outfit,sans-serif; font-weight:800; font-size:1rem;
  color:var(--green); letter-spacing:.06em;
}
.why-suits__title{
  margin:.125rem 0 .5rem;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.125rem; color:var(--green-dark);
}
.why-suits__body p{ margin:0; font-size:.9375rem; line-height:1.9; }
/* ③②①：見出し左・イラスト右／本文は全幅（コンパクト） */
@media (max-width:37.5rem){
  .why-suits__item,
  .why-suits__item:nth-child(even){
    grid-template-columns:1fr 4.25rem; gap:.5rem .75rem;
    align-items:center; padding-block:1.125rem;
  }

  .why-suits__ill{
    grid-column:2; grid-row:1;
    inline-size:4.25rem; block-size:4.25rem;
    place-items:end center;
  }
  .why-suits__ill img{ block-size:3.85rem; translate:0 0; }
  .why-suits__body{ grid-column:1; grid-row:1; align-self:center; }
  .why-suits__item:nth-child(even) .why-suits__ill{ grid-column:2; }
  .why-suits__item:nth-child(even) .why-suits__body{ grid-column:1; }
  .why-suits__item:nth-child(even) .why-suits__text{ grid-column:1 / -1; }

  .why-suits__title{
    margin:.0625rem 0 0; font-size:.9375rem; line-height:1.5;
    word-break:normal; overflow-wrap:anywhere;
  }
  .why-suits__body{ min-inline-size:0; }
  .why-suits__text{ min-inline-size:0; }
  .why-suits__n{ font-size:.8125rem; }
  .why-suits__text{ grid-column:1 / -1; grid-row:2; margin:.25rem 0 0; font-size:.875rem; line-height:1.85; }
}

/* ============================================================
   未経験｜こんな不安がありませんか？（吹き出し＋回答カード）
   ============================================================ */
.concerns__voices{
  display:grid; grid-template-columns:1fr 14rem 1fr;
  gap:1.5rem 2.25rem; align-items:center; justify-items:stretch;
  margin-block:var(--sec-gap) 3rem;
}
.concerns__ill{
  grid-column:2; grid-row:1 / span 2; justify-self:center; align-self:center;
  inline-size:14rem; block-size:14rem;
  display:grid; place-items:end center;
  border-radius:44% 56% 52% 48% / 54% 48% 52% 46%;
  background:#FBE6A8;
}
.concerns__ill img{ display:block; block-size:12.75rem; inline-size:auto; max-inline-size:none; translate:-.75rem 0; }
.concerns__bl{
  position:relative; margin:0;
  background:var(--pop-lime); border:0;
  border-radius:1.75rem; padding:.9375rem 1.375rem;
  font-family:var(--font-ja-round); font-weight:800; font-size:1rem;
  color:var(--ink); text-align:center; line-height:1.6;
}
/* しっぽ：イラスト側を向く */
.concerns__bl::after{
  content:""; position:absolute; inset-block-start:50%;
  inline-size:0; block-size:0; border-block:.6rem solid transparent;
}
.concerns__bl:nth-child(1),
.concerns__bl:nth-child(4){ grid-column:1; }
.concerns__bl:nth-child(2),
.concerns__bl:nth-child(5){ grid-column:3; }
.concerns__bl:nth-child(1){ grid-row:1; rotate:-1.5deg; }
.concerns__bl:nth-child(2){ grid-row:1; rotate:1.5deg; }
.concerns__bl:nth-child(4){ grid-row:2; rotate:1.25deg; }
.concerns__bl:nth-child(5){ grid-row:2; rotate:-1.25deg; }
/* 左列：右向きのしっぽ */
.concerns__bl:nth-child(1)::after,
.concerns__bl:nth-child(4)::after{
  inset-inline-end:-.8rem; translate:0 -50%;
  border-inline-start:.95rem solid var(--pop-lime);
}
/* 右列：左向きのしっぽ */
.concerns__bl:nth-child(2)::after,
.concerns__bl:nth-child(5)::after{
  inset-inline-start:-.8rem; translate:0 -50%;
  border-inline-end:.95rem solid var(--pop-lime);
}

.concerns{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.concerns__item{
  background:var(--white); padding:1.5rem 1.75rem;
  border:2px solid var(--green-dark);
  box-shadow:.5rem .5rem 0 var(--pop-lime);
}
.concerns__q{
  margin:0 0 .625rem;
  font-family:var(--font-ja-round); font-weight:800; font-size:1.0625rem; color:var(--green-dark);
}
.concerns__check{
  display:inline-block; vertical-align:-.15em; margin-inline-end:.4375rem;
  inline-size:1.25rem; block-size:1.25rem; color:var(--green);
}
.concerns__check svg{ inline-size:100%; block-size:100%; display:block; }
.concerns__a{ margin:0; font-size:.9375rem; line-height:1.9; }

@media (max-width:56.25rem){
  .concerns__voices{ grid-template-columns:1fr 11rem 1fr; gap:1rem 1.25rem; }
  .concerns__ill{ inline-size:11rem; block-size:11rem; }
  .concerns__ill img{ block-size:10rem; }
  .concerns__bl{ font-size:.875rem; padding:.8125rem 1rem; }
}
@media (max-width:43.75rem){
  .concerns{ grid-template-columns:1fr; }
  .concerns__item{ padding:1.25rem 1.125rem; box-shadow:.375rem .375rem 0 var(--pop-lime); }
  .concerns__q{ font-size:1rem; }
  .concerns__a{ font-size:.875rem; }
  .concerns__voices{ grid-template-columns:1fr 1fr; gap:.875rem; }
  .concerns__ill{ grid-column:1 / -1; grid-row:1; inline-size:11rem; block-size:11rem; margin-inline:auto; }
  .concerns__bl,
  .concerns__bl:nth-child(1),
  .concerns__bl:nth-child(2),
  .concerns__bl:nth-child(4),
  .concerns__bl:nth-child(5){ grid-column:auto; grid-row:auto; rotate:0deg; }
  .concerns__bl::after{ display:none; }
}

/* ============================================================
   未経験｜入社後の成長ステップ：ピル＋点線の1本道タイムライン
   ============================================================ */
.growth-timeline{ position:relative; display:grid; gap:.5rem; margin-block-start:var(--sec-gap); }
.growth-timeline::before{
  content:""; position:absolute; inset-block:1.5rem;
  inset-inline-start:calc(3.25rem - 1px);
  border-inline-start:3px dotted var(--beige-deep);
}
.growth-item{ display:grid; grid-template-columns:6.5rem 1fr; gap:1.25rem; align-items:start; }
.growth-item__pill{
  position:relative; z-index:1; justify-self:center;
  display:inline-grid; place-items:center; inline-size:6.5rem;
  padding:.4375rem .5rem; border-radius:999px;
  background:var(--green-dark); color:var(--white);
  font-family:var(--font-ja-round); font-weight:800; font-size:.8125rem; letter-spacing:.02em;
}
.growth-item:last-child .growth-item__pill{ background:var(--pop-lime); color:var(--ink); }
.growth-item__body{ padding-block:0 1.375rem; }
.growth-item__title{
  margin:0 0 .375rem; font-family:var(--font-ja-round); font-weight:800;
  font-size:1.0625rem; color:var(--green-dark);
}
.growth-item__body p{ margin:0; font-size:.9375rem; line-height:1.9; }
/* 角丸解除（成長ステップの写真） */
.site-photo--square,
.site-photo--square .site-photo__frame,
.site-photo--square .site-photo__frame img{ border-radius:0; }
@media (max-width:37.5rem){
  .growth-timeline::before{ inset-inline-start:calc(2.75rem - 1px); }
  .growth-item{ grid-template-columns:5.5rem 1fr; gap:.875rem; }
  .growth-item__pill{ inline-size:5.5rem; font-size:.75rem; }
  .growth-item__body{ padding-block:.125rem 1rem; }
}

/* ④タブレット縦：成長ステップの写真を横並びに */
@media (max-width:56.25rem) and (min-width:37.5625rem){
  [data-section="section-4"] .site-photo-stack{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem;
  }
}

/* ①（〜360px）：ピルを本文の上に置き、線は左端の1本に。本文を全幅に使う */
@media (max-width:22.5rem){
  .growth-timeline{ gap:0; }
  .growth-timeline::before{ inset-inline-start:calc(.5rem - 1px); inset-block:1rem .75rem; }
  .growth-item{ display:block; position:relative; padding-inline-start:1.75rem; padding-block:.75rem; }
  .growth-item::before{
    content:""; position:absolute; inset-block-start:1.0625rem; inset-inline-start:0;
    inline-size:1rem; block-size:1rem; border-radius:999px;
    background:var(--green-dark); box-shadow:0 0 0 .25rem var(--beige);
  }
  .growth-item:last-child::before{ background:var(--pop-lime); }
  .growth-item__pill{
    display:inline-block; inline-size:auto; justify-self:auto;
    padding:.25rem .75rem; font-size:.6875rem; margin-block-end:.25rem;
  }
  .growth-item__body{ padding:0; }
  .growth-item__title{ font-size:1rem; word-break:normal; overflow-wrap:anywhere; }
  .growth-item__body p{ font-size:.875rem; line-height:1.85; }
}

/* ============================================================
   FV 案I：写真4枚を縦4分割で敷き、コピーはベージュのカードで抜く
   ============================================================ */
.site-fv--collage{ background:var(--beige); min-height:clamp(640px, 92vh, 940px); }
.site-fv__collage{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr);
}
.site-fv__cell{
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(160deg, #2c4a24 0%, #16301a 100%);
}
.site-fv__cell:nth-child(2){ background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(160deg, #34532a 0%, #1b3720 100%); }
.site-fv__cell:nth-child(3){ background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(160deg, #294520 0%, #142c17 100%); }
.site-fv__cell:nth-child(4){ background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(160deg, #385a2e 0%, #1e3b22 100%); }
/* FV写真セル（①のみプレースホルダ、②③④は実写真） */
.site-fv__cell.site-fv__cell--photo{
  /* nth-child のプレースホルダ shorthand（0,2,0）に負けていたので同詳細度で後勝ちさせる */
  --fv-x:50%; --fv-y:50%;
  background-repeat:no-repeat; background-position:var(--fv-x) var(--fv-y); background-size:cover;
}
.site-fv--collage .site-fv__phtag{
  position:absolute; inset-inline:.75rem; inset-block-end:.875rem; inset-block-start:auto;
  transform:none; inline-size:auto; max-inline-size:none;
  padding:.625rem .75rem; border-radius:.25rem;
  font-family:var(--font-ja); font-size:.75rem; letter-spacing:.01em; line-height:1.5;
  background:rgba(20,48,20,.72); color:#fff;
}
.site-fv--collage .site-fv__phtag b{ font-size:.6875rem; margin-block-end:.25rem; }
.site-fv--collage .site-fv__phtag small{ margin-block-start:.25rem; font-size:.6875rem; }
.site-fv--collage .site-fv__scrim{
  background:linear-gradient(90deg, rgba(20,48,20,.30) 0 55%, rgba(20,48,20,.10) 100%);
}
.site-fv--collage .site-fv__inner{ display:block; padding-block:clamp(2rem,5vw,4rem); }
.site-fv__card{
  position:relative; z-index:2;
  inline-size:min(34rem, 52%);
  background:var(--beige); padding:clamp(1.75rem,3vw,2.75rem);
  box-shadow:0 24px 50px rgba(35,42,32,.24);
}
/* カード上は白文字→濃色に。書体・字送りは既存のまま */
.site-fv--collage .site-catch-vertical{
  writing-mode:horizontal-tb; max-block-size:none;
  font-size:clamp(1.625rem,3.1vw,2.875rem); line-height:1.45; letter-spacing:.03em;
  color:var(--green-dark); text-shadow:none; margin-block:.75rem;
}
.site-fv--collage .site-fv__sub{
  color:var(--ink); text-shadow:none;
  font-size:clamp(.875rem,1.15vw,1rem); line-height:1.85; text-wrap:balance;
}
@media (max-width:40rem){ .site-fv--collage .site-fv__sub br{ display:none; } }
.site-fv__badge{
  position:absolute; z-index:3;
  /* 直接編集で決まった位置：カード右上の外側へ寄せる */
  inset-block-start:-2rem; inset-inline-start:100%; inset-inline-end:auto;
  translate:-62% 0; rotate:7deg;
  inline-size:clamp(13rem,26vw,17rem); aspect-ratio:667/566;
  /* grid だと文字ノードと＜b＞が別行に分かれて上下に離れるので flex 縦積みで中央寄せ */
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border-radius:0;
  background:url(https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/fv-badge-burst-yellow.webp) center/100% 100% no-repeat;
  color:var(--ink);
  padding:0 1.25rem 1.1em; white-space:nowrap; word-break:keep-all;
  font-family:var(--font-ja-round); font-weight:800; font-size:clamp(.75rem,1vw,.9375rem); line-height:1.35;
}
.site-fv__badge b{
  display:block; margin-block-start:.1em;
  font-weight:800; font-size:1.65em; line-height:1.2; letter-spacing:0;
}
.site-fv--collage .pop-fv-mark{
  position:absolute; inset-block-end:1rem; inset-inline-end:1.5rem; z-index:2;
  color:#fff; -webkit-text-stroke:0; text-shadow:0 .125rem .75rem rgba(20,48,20,.35);
}
@media (max-width:56.25rem){
  .site-fv__collage{ grid-template-columns:repeat(2,1fr); }
  /* 写真が2＋2で並ぶ幅では、4枚の中央にカードを置く */
  .site-fv{ align-items:center; }
  .site-fv--collage .site-fv__inner{ display:flex; justify-content:center; align-items:center; }
  .site-fv__card{
    inline-size:100%; max-inline-size:34rem;
    margin-inline:auto;
  }
  /* PC版のカード幅に対する文字の比率（見出し7.6%／ラベル小さめ）に合わせる */
  .site-fv--collage .site-catch-vertical{ font-size:clamp(1.875rem,5vw,2.5rem); line-height:1.4; }
  .site-fv--collage .site-fv__label{ font-size:.8125rem; letter-spacing:.01em; }
  .site-fv--collage .site-fv__sub{ font-size:.9375rem; line-height:1.9; }
  /* 900px以下：カード幅100%になるのでバッジは右端の内側に収める（はみ出し防止） */
  .site-fv__badge{
    inset-block-start:calc(-1 * (clamp(9.5rem,28vw,13rem) * 566 / 667) * .2);
    inset-inline-start:auto; inset-inline-end:.25rem;
    translate:0 0; inline-size:clamp(9.5rem,28vw,13rem);
  }
}
@media (max-width:37.5rem){
  .site-fv--collage .site-fv__phtag{ font-size:.6875rem; padding:.5rem .625rem; }
  .site-fv--collage .site-fv__phtag small{ display:none; }
  /* ③以下：本文はカード幅いっぱいで折り返す（原稿の＜br＞は無効化） */
  .site-fv--collage .site-fv__sub{
    max-inline-size:none; inline-size:100%; text-wrap:normal;
  }
  .site-fv--collage .site-fv__sub br{ display:none; }
  /* ラベルピルは「埼玉県越谷市・／草加市の型枠解体工事」で2行にして横幅を詰める */
  .site-fv--collage .site-fv__label{
    box-sizing:border-box;
    inline-size:fit-content; max-inline-size:min(13em, 100%);
    text-align:center; line-height:1.6;
  }
  /* タイトルは②①幅でも2行に収まる字送りに */
  .site-fv--collage .site-catch-vertical{
    font-size:clamp(1.3rem,6.5vw,2.5rem); line-height:1.4;
  }
  /* 本文はカード幅いっぱいで折り返す */
  .site-fv--collage .site-fv__sub{
    text-wrap:wrap; word-break:normal; overflow-wrap:anywhere;
  }
  /* バッジは少し右へ（画面外へわずかに切れる）＋少し下へ。FVは overflow:hidden なので横スクロールは出ない */
  .site-fv__badge{
    inset-block-start:-4.75rem; inset-inline-end:-2rem;
    inline-size:clamp(9.5rem,44vw,12rem);
    font-size:clamp(.6875rem,2.6vw,.8125rem);
    padding:0 1rem .5rem;
  }
}

/* ---- FVカードの入場演出（ファーストビューなので読み込み即・順番に弾む） ---- */
@keyframes fvPop{
  0%  { opacity:0; translate:0 1.25rem; scale:.94; }
  62% { opacity:1; translate:0 -.1875rem; scale:1.015; }
  100%{ opacity:1; translate:0 0; scale:1; }
}
@keyframes fvCardPop{
  0%  { opacity:0; translate:0 2rem; scale:.97; }
  70% { opacity:1; translate:0 -.25rem; scale:1.005; }
  100%{ opacity:1; translate:0 0; scale:1; }
}
@keyframes fvBadgePop{
  0%  { opacity:0; scale:.3; rotate:-24deg; }
  58% { opacity:1; scale:1.14; rotate:12deg; }
  100%{ opacity:1; scale:1; rotate:7deg; }
}
@keyframes fvBadgeFloat{
  0%,100%{ rotate:7deg; translate:-62% 0; }
  50%    { rotate:2deg; translate:-62% -.375rem; }
}
.site-fv--collage .site-fv__card{
  animation:fvCardPop .72s cubic-bezier(.34,1.5,.64,1) .1s both;
}
.site-fv--collage .site-fv__label{ animation:fvPop .6s cubic-bezier(.34,1.56,.64,1) .34s both; }
.site-fv--collage .site-catch-vertical{ animation:fvPop .66s cubic-bezier(.34,1.56,.64,1) .46s both; }
.site-fv--collage .site-fv__sub{ animation:fvPop .6s cubic-bezier(.34,1.56,.64,1) .62s both; }
.site-fv--collage .site-fv__badge{
  animation:fvBadgePop .7s cubic-bezier(.34,1.7,.5,1) .82s both,
            fvBadgeFloat 5s ease-in-out 1.6s infinite;
}
@media (max-width:56.25rem){
  /* 狭幅はバッジが右端内側に収まる位置なので、浮遊も translate:0 基準に合わせる */
  @keyframes fvBadgeFloat{
    0%,100%{ rotate:7deg; translate:0 0; }
    50%    { rotate:2deg; translate:0 -.375rem; }
  }
}
@media (prefers-reduced-motion: reduce){
  .site-fv--collage .site-fv__card,
  .site-fv--collage .site-fv__label,
  .site-fv--collage .site-catch-vertical,
  .site-fv--collage .site-fv__sub,
  .site-fv--collage .site-fv__badge{ animation:none !important; opacity:1 !important; }
}
@media (scripting: none){
  .site-fv--collage .site-fv__card,
  .site-fv--collage .site-fv__label,
  .site-fv--collage .site-catch-vertical,
  .site-fv--collage .site-fv__sub,
  .site-fv--collage .site-fv__badge{ opacity:1; }
}


/* ============================================================
   スマホ幅のタップ幅確保（44px）
   パンくず／電話リンク／フッターのリンク／フォームのラベル
   見た目（文字サイズ・色）は変えず、押せる高さだけを広げる
   ============================================================ */
@media (max-width:47.9375rem){
  .p-breadcrumb__item > a,
  .c-breadcrumb__item > a{
    display:inline-flex; align-items:center;
    min-block-size:44px; padding-block:.5rem;
  }
  .site-header-menubar__drawer-tel,
  a[href^="tel:"],
  .site-tel-plain{
    display:inline-flex; align-items:center;
    min-block-size:44px;
  }
  .footer-link-matrix__col-list a,
  .footer-link-matrix__legal-links a,
  .site-guide__steps a,
  .site-guide__list a{
    display:flex; align-items:center;
    min-block-size:44px;
  }
  .site-form__label{
    display:flex; align-items:center; min-block-size:44px;
  }
}


/* 320px幅でFVの内枠（.l-center=content-box）がpadding分だけ横にはみ出していたので、
   FVだけborder-boxに戻して縮められるようにする */
.site-fv.site-fv--collage > .site-fv__inner.l-center{
  box-sizing:border-box;
  min-inline-size:0; max-inline-size:min(1120px, 100%);
  flex:1 1 auto;
}


/* ①幅（〜360px）：カードが縦に伸びてバッジがラベルに触るので、少しだけ上げて小さくする */
@media (max-width:22.5rem){
  /* ①幅：バッジの下端がカード上端をかすめる位置に */
  .site-fv__badge{
    inset-block-start:calc(-1 * (clamp(9.5rem,50vw,11rem) * 566 / 667) + 2.25rem);
    inset-inline-end:-2.25rem;
    inline-size:clamp(9.5rem,50vw,11rem);
    font-size:.75rem;
    padding:0 .75rem .5rem;
  }
}


/* 421〜600px：見出し2行目が長く、バッジ左下の網点が行末に触るので少し上へ */
@media (min-width:26.3125rem) and (max-width:37.5rem){
  .site-fv__badge{ inset-block-start:-3.25rem; inset-inline-end:-2.5rem; }
}


/* ============================================================
   FVカード：ラベルと見出しの間の余白を詰める（⑤幅はラベル自体も小さく）
   ============================================================ */
.site-fv--collage .site-fv__label{
  margin-block-end:.5rem;
  font-size:.9375rem; padding-block:.3rem; padding-inline:.9rem;
}
.site-fv--collage .site-catch-vertical{ margin-block:.375rem .625rem; }
/* ③以下：カードの縦幅を詰める。見出し上下は同じ量にしてバランスを取る */
@media (max-width:37.5rem){
  .site-fv--collage .site-fv__card{ padding:1.25rem 1.5rem 1.375rem; }
  .site-fv--collage .site-fv__label{ margin-block-end:0; }
  .site-fv--collage .site-catch-vertical{ margin-block:.625rem .625rem; }
  .site-fv--collage .site-fv__sub{ margin-block-start:0; line-height:1.8; }
}
/* ①幅：文字も余白もひと段詰める */
@media (max-width:22.5rem){
  .site-fv--collage .site-fv__card{ padding:1.125rem 1.25rem 1.25rem; }
  .site-fv--collage .site-fv__label{ font-size:.75rem; }
  .site-fv--collage .site-catch-vertical{ margin-block:.5rem .5rem; line-height:1.35; }
  .site-fv--collage .site-fv__sub{ margin-block-start:0; font-size:.875rem; line-height:1.75; }
}


/* ============================================================
   TOP レスポンシブ調整（2026-09 指示分）
   ============================================================ */
/* ⑤：WORK STYLE の左右カラムを上下中央に */
@media (min-width:75rem){
  .site--top .site-sec:has(#sec-workstyle) .site-sec__body{ align-items:center; }
}

/* ④（601〜904px） */
@media (min-width:37.5625rem) and (max-width:56.25rem){
  /* --- WORK STYLE：前半2段落は全幅、POINT＋写真は2カラム、後半はコンテンツ幅 --- */
  .site--top .site-sec:has(#sec-workstyle) .site-sec__body{
    display:grid; grid-template-columns:1fr .74fr;
    column-gap:clamp(1.25rem,3vw,2rem); row-gap:0;
    align-items:center;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-sec__text{ display:contents; }
  .site--top .site-sec:has(#sec-workstyle) .site-sec__text > p:nth-child(1),
  .site--top .site-sec:has(#sec-workstyle) .site-sec__text > p:nth-child(2){
    grid-column:1 / -1; margin-block-end:1.1em;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-sec__text > .site-balloon{
    grid-column:1; grid-row:3; margin:0 !important;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-sec__text > p:nth-child(4){
    grid-column:1; grid-row:4; margin-block:1.1em .8em;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-sec__text > p:nth-child(5){
    grid-column:1; grid-row:5; margin:0;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-sec__body > .site-photo{
    grid-column:2; grid-row:3 / span 3; align-self:center;
    order:0; inline-size:100%; max-inline-size:none; margin:0;
  }

  /* --- MESSAGE：写真と見出しを内側に寄せ、本文はその下でコンテンツ幅 --- */
  .site--top .site-sec__body--message{
    display:grid; grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
    column-gap:clamp(1.5rem,4vw,2.5rem); row-gap:1.25rem;
    align-items:center; padding-inline:clamp(1rem,5vw,3.5rem);
  }
  .site--top .site-sec__body--message > .site-photo{
    order:0; grid-column:1; grid-row:1; inline-size:100%; max-inline-size:none; margin:0;
  }
  .site--top .site-sec__body--message .site-catch-vertical--sub{
    grid-column:2; grid-row:1; margin:0; align-self:center;
  }
  .site--top .site-sec__body--message .site-sec__text{
    grid-column:1 / -1; grid-row:2;
  }

  /* --- OUR WORK：PCと同じ「左に写真／右に文章」 --- */
  .site--top .site-sec:has(#sec-ourwork) .site-sec__body{
    grid-template-columns:1fr minmax(0,.95fr); align-items:center;
    column-gap:clamp(1.25rem,3vw,2rem);
  }
  .site--top .site-sec:has(#sec-ourwork) .site-sec__body > .site-photo{
    order:0; grid-column:1; inline-size:100%; max-inline-size:none; margin:0;
  }
  .site--top .site-sec:has(#sec-ourwork) .site-sec__text{ grid-column:2; }

  /* --- 施工実績：3カード横並び --- */
  .site--top [aria-labelledby="sec-works"] .site-cards--3{
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:.875rem;
  }
  .site--top [aria-labelledby="sec-works"] .site-card--work{ padding:.625rem .625rem 1rem; }
  .site--top [aria-labelledby="sec-works"] .site-card__meta{ font-size:.8125rem; }

  /* --- ブログ：縦積み・左に写真／右に文章 --- */
  .site--top .blog-teaser__grid{ grid-template-columns:1fr; gap:.875rem; }
  .site--top .blog-teaser__card > a{
    display:grid; grid-template-columns:12rem minmax(0,1fr);
    column-gap:1.25rem; row-gap:.375rem; align-items:center;
  }
  .site--top .blog-teaser__thumb{ grid-column:1; grid-row:1 / span 2; margin:0; }
  .site--top .blog-teaser__meta{ grid-column:2; grid-row:1; align-self:end; }
  .site--top .blog-teaser__title{ grid-column:2; grid-row:2; align-self:start; }
}


/* ============================================================
   PC（1200px以上）では版面の左右パディングを外す
   max-width:1120px + 左右40px で実質1040pxまで狭まっていたため、
   窓側に余白が確保できる幅では 1120px をそのまま使う。
   ============================================================ */
@media (min-width:1200px){
  .site-sec,
  .stats-band__inner,
  .site-cta__inner,
  .p-breadcrumb__inner,
  .site-subhead__inner,
  main .l-center:not(.site-header-menubar__top),
  .footer-link-matrix__inner{
    padding-inline:0;
  }
}

/* フッターナビのホバー：不透明度落としだと分かりにくいので黄色に */
.footer-link-matrix a:hover,
.footer-link-matrix a:focus-visible,
.site-foot-info a:hover,
.site-foot-info a:focus-visible{
  opacity:1; color:var(--yellow-lite); text-decoration:none;
}
.footer-link-matrix__col-list a,
.footer-link-matrix__legal-links a,
.footer-link-matrix__col-list a:hover,
.footer-link-matrix__legal-links a:hover{ text-decoration:none; }
.footer-link-matrix__col-list a:hover,
.footer-link-matrix__legal-links a:hover{ opacity:1; color:var(--yellow-lite); }
.footer-link-matrix .site-btn-line:hover{ color:#08331A; }


/* ============================================================
   スマホ幅の読み進めナビ（RECRUIT GUIDE／あなたに合ったページから）
   1行目＝番号・タイトル・矢印（またはバッジ）、2行目＝本文。
   ※44pxタップ確保の display:flex より後に置いて grid を勝たせる。
   ============================================================ */
@media (max-width:47.9375rem){
  .site-guide__list a,
  .site-guide__steps a,
  .site-guide__cur{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:.75rem; row-gap:.375rem;
  }
  .site-guide__list a::before,
  .site-guide__steps a::before,
  .site-guide__cur::before{ grid-column:1; grid-row:1; }
  .site-guide__list b,
  .site-guide__steps b,
  .site-guide__cur b{ grid-column:2; grid-row:1; }
  .site-guide__list a::after,
  .site-guide__steps a::after{ grid-column:3; grid-row:1; justify-self:end; }
  .site-guide__steps em{
    grid-column:3; grid-row:1; justify-self:end;
    margin:0; padding:.2rem .7rem; font-size:.75rem;
  }
  .site-guide__list span,
  .site-guide__steps a span,
  .site-guide__steps span span,
  .site-guide__cur span{ grid-column:1 / -1; grid-row:2; }
}


/* スマホ幅のみ有効な強制改行（読み進めナビ04「未経験者のかたへ／経験者のかたへ」等） */
.u-br-sp{ display:none; }
@media (max-width:47.9375rem){ .u-br-sp{ display:inline; } }


/* ============================================================
   スマホ幅の読み進めナビ・微調整
   「今ここ」バッジは1行目に置くと長いタイトル（未経験者のかたへ／経験者のかたへ）を
   圧迫するため、2行目＝説明文の行の右端へ移す。タイトルは1行目を全幅で使う。
   ============================================================ */
@media (max-width:47.9375rem){
  .site-guide__cur{ align-items:start; }
  .site-guide__cur b{ grid-column:2 / -1; grid-row:1; }
  .site-guide__steps .is-current .site-guide__cur > span{ grid-column:1 / 3; grid-row:2; }
  .site-guide__steps .is-current .site-guide__cur em{
    grid-column:3; grid-row:2; justify-self:end; align-self:center;
    white-space:nowrap;
  }
  /* 矢印つきの行はタイトルの折返しに合わせて上寄せに（矢印だけ浮かない） */
  .site-guide__list a,
  .site-guide__steps a{ align-items:start; }
  .site-guide__list a::before,
  .site-guide__steps a::before,
  .site-guide__cur::before{ align-self:center; line-height:1.2; }
  .site-guide__list a::after,
  .site-guide__steps a::after{ align-self:center; }
}


/* ============================================================
   スタッフインタビュー③：PC・タブレットは①と同じ「左に写真／右に文章」
   （全幅16:9の型はスマホ幅のみ残す）
   ============================================================ */
@media (min-width:47.5rem){
  .staff-card--wide{ grid-template-columns:20rem 1fr; gap:2.25rem; align-items:center; }
  .staff-card--wide .staff-cheki{ inline-size:100%; margin-inline:0; transform:rotate(-1.5deg); }
  .staff-card--wide .staff-cheki__frame{ aspect-ratio:3 / 4; }
}
@media (min-width:47.5rem) and (max-width:60rem){
  .staff-card--wide{ grid-template-columns:15rem 1fr; gap:1.5rem; }
}


/* 五常についてページのCTA：⑤（900px）以下は「五常の考え方に／共感してくださった方へ。」で改行 */
.br-cta{ display:none; }
@media (max-width:64rem){ .br-cta{ display:block; } }


/* ブログのCTA：④〜⑤幅（768〜1024px）は余白のみ広げる（文字サイズは共通のまま） */
@media (min-width:48rem) and (max-width:64rem){
  .cta-band--blog .cta-band__inner{ padding-block:clamp(2.5rem,5vw,3.25rem); gap:1.75rem; }
  .cta-band--blog .cta-band__copy{ padding-inline:1rem; }
}


/* ============================================================
   FVの縦幅を画面高に合わせる（ヘッダー分を差し引いた残り＝1画面ぴったり）
   --hdr-h は site-nav.js が実測してセット。JS未実行時も 100svh で破綻しない。
   ============================================================ */
.site-fv.site-fv--collage{
  min-height:calc(100svh - var(--hdr-h, 0px));
  max-height:none;
}
@supports not (height:100svh){
  .site-fv.site-fv--collage{ min-height:calc(100vh - var(--hdr-h, 0px)); }
}
/* 横向きスマホなど本当に低い画面のみ下限を確保（通常の低めウィンドウでは効かせない） */
@media (orientation:landscape) and (max-height:26rem){
  .site-fv.site-fv--collage{ min-height:26rem; }
}


/* ============================================================
   パンくず：スマホ幅は横スクロールをやめて折り返し・14px
   （3576行の nowrap/overflow-x 指定を上書き）
   ============================================================ */
@media (max-width:47.9375rem){
  .p-breadcrumb__inner{
    flex-wrap:wrap; overflow:visible;
    font-size:14px; line-height:1.6; gap:2px 8px;
  }
  .p-breadcrumb__item{ white-space:normal; }
  .p-breadcrumb__item + .p-breadcrumb__item::before{ margin-right:8px; }
  .p-breadcrumb__item > a,
  .c-breadcrumb__item > a{ min-block-size:0; }
}


/* ============================================================
   写真枠のドラッグ＆ドロップ（image-slot）用
   ・スロットは枠いっぱいに絶対配置するので、枠側に位置基準を持たせる
   ・PHOTOタグ・説明ラベルはスロットの上に重ね、ドロップを邪魔しない
   ============================================================ */
.site-photo__frame,
.staff-cheki__frame,
.site-fv__cell{ position:relative; }
.site-photo__frame image-slot,
.staff-cheki__frame image-slot,
.site-fv__cell image-slot{ z-index:0; }
.site-photo__frame > .site-photo__tag,
.site-photo__frame > .site-photo__desc,
.site-fv__cell > .site-fv__phtag{ position:relative; z-index:2; pointer-events:none; }
/* 既存ルールが absolute 指定の場合はそちらを尊重しつつ重なり順だけ上げる */
.site-photo__frame > .site-photo__tag,
.site-photo__frame > .site-photo__desc{ isolation:isolate; }
/* TOPは .site--top 側で position:static に上書きされるため、詳細度を合わせて前面に */
.site--top .site-photo__frame > .site-photo__tag,
.site--top .site-photo__frame > .site-photo__desc{ position:relative; z-index:2; }
.staff-cheki__frame{ color:transparent; }


/* ============================================================
   FVの写真をドラッグ＆ドロップできるようにする
   コラージュの上にスクリム・GOJOロゴマーク・コピー面が重なっていて
   ドロップ操作を受け取れなかったため、装飾側のみクリックを透過させる。
   ============================================================ */
.site-fv__scrim,
.pop-fv-mark{ pointer-events:none; }
.site-fv__inner{ pointer-events:none; }
.site-fv__card{ pointer-events:none; }
.site-fv__card a,
.site-fv__card button{ pointer-events:auto; }
.site-fv__collage{ pointer-events:auto; }
.site-fv__cell image-slot{ pointer-events:auto; }


/* ============================================================
   よくある誤解セクションの視認性改善
   丸ゴシックの800はこのサイズだと字画が詰まって潰れて見えるため、
   ウェイトを700に落として字面を少し大きく・字間を開ける。
   「建物を取り壊す〜」のグレーも白背景で 3.6:1 しかなかったので濃くする。
   ============================================================ */
.myth-ask__bubble{
  font-weight:700;
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.02em;
  padding:1.25rem 1.25rem;
}
.myth-truth__q{
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:.02em;
  color:#556050;
}
.myth-truth__lead{
  font-weight:700;
  letter-spacing:.015em;
  line-height:1.85;
}
.myth-truth__lead span{
  font-weight:700; font-size:.75rem; letter-spacing:.1em;
  padding:.25rem .85rem;
}
.myth-truth__text{ letter-spacing:.01em; color:#3E4739; }
@media (max-width:37.5rem){
  .myth-ask__bubble{ font-size:.875rem; line-height:1.7; letter-spacing:.01em; }
  .myth-truth__q{ font-size:1rem; }
}


/* 誤解セクション追い込み：丸ゴシックは700でも字画が埋まるので500＋やや大きめに。
   吹き出しはイラストより前面（PCで左2つがイラストの下に潜っていた）。 */
.myth-ask__bubble{
  font-weight:500;
  font-size:1.0625rem;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.myth-truth__q{ font-weight:500; -webkit-font-smoothing:antialiased; }
/* 「実際は 目的が異なる工事です。」も字を大きくしてウェイトを落とす */
.myth-truth__lead{
  -webkit-font-smoothing:antialiased;
  font-size:1.3125rem;
  font-weight:500;
  letter-spacing:.03em;
  line-height:1.8;
}
.myth-truth__lead span{
  font-size:.8125rem; font-weight:500; letter-spacing:.12em;
  padding:.3rem .95rem;
}
@media (max-width:47.9375rem){
  .myth-truth__lead{ font-size:1.1875rem; letter-spacing:.02em; }
}
.myth-ask__bubbles{ position:relative; z-index:2; }
.myth-ask__illust{ position:relative; z-index:0; }
@media (max-width:37.5rem){
  .myth-ask__bubble{ font-size:.9375rem; letter-spacing:.02em; }
}


/* ============================================================
   C案：小さい文字は本文書体（Noto Sans JP）、強調の一行は丸ゴシック
   丸ゴシックは字画が丸いぶん小サイズで字面が詰まって見えるため、
   吹き出し・問いかけ・ピル状のラベルなど小さい文字は本文書体に寄せる。
   セクション見出し・カード見出し・「実際は」の強調行は丸ゴシックのまま。
   ============================================================ */
.myth-ask__bubble,
.myth-truth__q,
.concerns__bl,
.myth-ask__bubbles li,
.site-guide__cur em,
.growth-item__pill,
.staff-qa__q,
.site-guide__steps span span,
.site-guide__steps a span,
.about-history__year small,
.staff-cheki__name small,
.site-foot-info__name,
.footer-link-matrix__col-head{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-weight:500;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
.myth-truth__q{ font-size:1.0625rem; }
.myth-ask__bubble{ font-size:1rem; line-height:1.8; }
/* ピル状ラベルは白抜きなので少しだけ太く */
.site-guide__cur em,
.growth-item__pill,
.footer-link-matrix__col-head{ font-weight:700; letter-spacing:.06em; }
@media (max-width:37.5rem){
  .myth-ask__bubble{ font-size:.9375rem; }
}


/* ============================================================
   ヘッダーのドロップダウン（メガパネル）：文字が小さく読みにくいので拡大
   ・項目名 15px → 16.5px／説明文 12px → 13.5px
   ・パネル見出し 20px → 22px／リード 12px → 13.5px
   ============================================================ */
@media (min-width:1024px){
  .ui-mega-panel__grid b{ font-size:1.03125rem; }
  .ui-mega-panel__grid span{ font-size:.84375rem; line-height:1.75; color:#525A4C; }
  .ui-mega-panel__title{ font-size:1.375rem; }
  .ui-mega-panel__lead{ font-size:.84375rem; color:#525A4C; }
  .ui-mega-panel__eyebrow{ font-size:.75rem; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a{
    font-size:.9375rem;
  }
}


/* ============================================================
   本文の最小サイズを16pxに統一（読みにくい箇所の解消）
   ・本文・説明文・リンク・表・Q&A・フッターなど読ませる文字は 1rem 以上
   ・マスキングテープ／バッジ／欧文ラベルなど装飾の小文字は
     レイアウトが崩れるため 0.8125〜0.875rem を下限に上げるだけに留める
   ※ファイル末尾＝カスケード最後尾なので各ブレークポイントの指定にも勝つ
   ============================================================ */

/* --- 読ませる文字：16px --- */
.myth-ask__bubble,
.myth-truth__q,
.myth-truth__text,
.site-steps > .site-step > p,
.site-steps > .site-step .site-step__title,
.site-card:has(> .site-card__title--icon) > p,
.site-card > .site-card__title--icon,
.area-card p,
.reason-zig__body p,
.env-item p,
.day-item__body p,
.day-item__pill,
.benefit-card p,
.benefit-chips li,
.why-card p,
.why-suits__text,
.why-suits__body p,
.why-suits__title,
.concerns__bl,
.concerns__a,
.exp-ask,
.growth-item__body p,
.entry-flow__item p,
.notice-band,
.staff-qa__q,
.staff-qa__field,
.num-rows__title,
.salary-step__year,
.site-guide__list span,
.site-guide__steps span span,
.site-guide__steps a span,
.site-faq__q::before,
.site-faq__a::before,
.smap-list li.is-child a,
.blog-card__meta,
.blog-side__ttl,
.blog-side__cats a,
.blog-side__recent time,
.blog-pager a,
.blog-pager span,
.site-blogcard__excerpt,
.site-workcard__spec,
.site-actions .ui-btn,
.site-actions--even .ui-btn,
.other-ways__tel span,
.about-history__year small,
.staff-cheki__name small,
.site-foot-info > p:not(.site-foot-info__name):not(.site-foot-info__tel):not(.site-foot-info__logo),
.site-foot-info__addr,
.site-foot-info__tel-note,
.gojo-five__yomi{
  font-size:1rem;
}
.myth-truth__q{ font-size:1.0625rem; }
.myth-ask__bubble{ line-height:1.8; }
.site-foot-info__addr{ white-space:normal; }

/* --- TOP固有 --- */
.site--top .stats-band__label,
.site--top .site-cta__telnote,
.site--top .blog-teaser__date,
.site--top .site-sec:has(#sec-workstyle) .site-balloon__text,
.site--top [aria-labelledby="sec-why"] .site-cards--3 .site-card__title,
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card > p,
.site--top .site-table th,
.site--top .site-table td,
.site--top [aria-labelledby="sec-works"] .site-card__meta,
.news-c__all,
.news-c__title{
  font-size:1rem;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 .site-card__title{ white-space:normal; }

/* --- ヘッダー／ドロップダウン --- */
@media (min-width:1024px){
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-trigger,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{ font-size:1rem; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a{ font-size:1rem; }
  .ui-mega-panel__grid b{ font-size:1.0625rem; }
  .ui-mega-panel__grid span,
  .ui-mega-panel__lead{ font-size:1rem; line-height:1.8; }
  .site-header-menubar__brand-sub{ font-size:.9375rem; }
}
@media (max-width:1023px){
  .site-header-menubar__menu-list .ui-mega-panel__grid > li > a,
  .site-header-menubar__menu-list .ui-subnav__list > li > a{ font-size:1rem; }
}
.site-header-menubar__contact .site-hd-entry{ font-size:1rem; }
.footer-link-matrix__col-list a,
.footer-link-matrix__legal-links a{ font-size:1rem; }

/* --- 装飾ラベル：下限14px（レイアウト維持のため16pxにはしない） --- */
.site-step__tape,
.why-card__tape,
.area-card__tape,
.site-card__tape,
.myth-truth__lead span,
.growth-item__pill,
.site-guide__steps em,
.benefit-badge,
.who-badge span,
.blog-card__cat,
.site-blogcard__cat,
.news-c__tag,
.site--top .blog-teaser__cat,
.salary-step__month,
.smap-list__no,
.num-rows__n,
.why-suits__n,
.site-foot-info__tel-label,
.site--top .site-cta__tel-label,
.site-header-menubar__contact-lead,
.footer-link-matrix__col-head .site-eyebrow,
.ui-mega-panel__eyebrow,
.news-c__label span{
  font-size:.875rem;
}
.site--top .site-balloon__label,
.site--top .site-sec:has(#sec-workstyle) .site-balloon__label{ font-size:.8125rem; }


/* FVのキャッチカードを画面中央に置く（左寄せだったものを中央揃えに） */
.site-fv--collage .site-fv__inner{
  display:flex; justify-content:center; align-items:center;
}
.site-fv--collage .site-fv__card{
  inline-size:min(34rem, 100%);
  margin-inline:auto;
}


/* 代表挨拶：写真を左に寄せて小さめに、本文の横幅を広げる（縦に伸びすぎていたため） */
@media (min-width:56.3125rem){
  .site-sec:has(#i-sec1) .site-sec__body{
    grid-template-columns:minmax(0,21rem) minmax(0,1fr);
    column-gap:clamp(1.75rem,3vw,2.75rem);
    align-items:start;
  }
  .site-sec:has(#i-sec1) .site-photo{
    inline-size:100%; max-inline-size:21rem; margin-inline:0;
  }
}


/* ============================================================
   スマホ幅：タイムライン系の本文が横幅いっぱいで読めるようにする
   ------------------------------------------------------------
   ラベル列（5.5〜6.5rem）と本文列の2段組を維持していたため、
   375px では本文が166〜210pxしか取れず数文字で折り返していた。
   480px以下はラベルを本文の上に置き、本文を全幅にする。
   ============================================================ */
@media (max-width:30rem){
  /* 成長ステップ（未経験者のかたへ） */
  .growth-timeline{ gap:0; }
  .growth-timeline::before{ inset-inline-start:calc(.5rem - 1px); inset-block:1rem .75rem; }
  .growth-item{
    display:block; position:relative;
    padding-inline-start:1.75rem; padding-block:.75rem;
    grid-template-columns:none;
  }
  .growth-item::before{
    content:""; position:absolute; inset-block-start:1.0625rem; inset-inline-start:0;
    inline-size:1rem; block-size:1rem; border-radius:50%;
    background:var(--green); border:3px solid var(--beige-deep);
  }
  .growth-item:last-child::before{ background:var(--pop-lime); }
  .growth-item__pill{
    display:inline-block; inline-size:auto; justify-self:auto;
    padding:.25rem .8rem; margin-block-end:.375rem;
  }
  .growth-item__body{ padding:0; }

  /* 1日の流れ（働く環境）：点線も左端へ移し、節目の丸で受ける */
  .day-timeline{ inline-size:100%; }
  .day-timeline::before{ inset-inline-start:calc(.5rem - 1px); inset-block:1rem .75rem; }
  .day-item::before{
    content:""; position:absolute; inset-block-start:1.0625rem; inset-inline-start:0;
    inline-size:1rem; block-size:1rem; border-radius:50%;
    background:var(--green-dark); border:3px solid var(--beige-deep);
  }
  .day-item--rest::before{ background:var(--pop-yellow); }
  .day-item{
    display:block; position:relative;
    grid-template-columns:none;
    padding-inline-start:1.75rem; padding-block:.625rem;
  }
  .day-item__pill{
    inline-size:auto; margin-block-end:.375rem;
  }
  .day-item__body{ padding-inline:0; }
}


/* ============================================================
   ヘッダー右上：応募／お問い合わせの2ボタン
   応募を主（白ピル）、お問い合わせを従（白の輪郭）として並べる
   ============================================================ */
.site-hd-btns{
  display:flex; gap:.5rem; inline-size:100%;
  margin-block-start:.5rem;
}
.site-header-menubar__contact .site-hd-btns .site-hd-entry{
  flex:1 1 0; min-inline-size:0; margin-block-start:0;
  justify-content:center; text-align:center;
}
.site-hd-contact.ui-btn,
.site-hd-contact{
  background:transparent; color:#ffffff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);
}
.site-hd-contact:hover{ background:rgba(255,255,255,.14); column-rule: #fff!important; }
@media (max-width:75rem){
  .site-hd-btns{ gap:.375rem; }
  .site-header-menubar__contact .site-hd-btns .site-hd-entry{ padding:.5rem .75rem; }
}


/* ===== 20b_pop-shared.css ===== */
/* ============================================================
   pop-shared.css — 下層ページ用の「TOPの雰囲気」レイヤー
   style.css の後ろに読み込む（TOPは top-pop.css が担当するので読み込まない）
   ・装飾ブロブは使わない
   ・ベージュRowはドット地（TOPと同値）
   ・写真入りカードとチェキ枠は黒フチ＋硬いずれ影のコマ調
   ============================================================ */

/* --- 装飾ブロブは全廃 --- */
.pop-blob{ display:none; }

/* --- 背景：ベージュRowはドット地（TOPと同じ目・同じ濃度） --- */
.site-row--beige{
  background-color:#F2EAD6;
  background-image:radial-gradient(rgba(34,139,34,.14) 2px, transparent 2.1px);
  background-size:18px 18px;
  background-position:0 0;
}

/* --- 見出しの英字ラベル：TOPと同じ黄色ダッシュ --- */
.site-sec > .site-eyebrow,
.cta-band__sub{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:Outfit,sans-serif; letter-spacing:.18em;
  background-image:none; padding-inline-start:0;
}
.site-sec > .site-eyebrow::before,
.cta-band__sub::before{
  content:""; inline-size:1.75rem; block-size:2px; background:#F5B301; border-radius:2px;
}

/* --- カード：角丸を大きく、浮かせる（TOPの標準カードと同じ） --- */
.site-card{
  background:#fff; border:0; border-radius:28px;
  padding:1.5rem 1.5rem 1.75rem;
  box-shadow:0 14px 34px rgba(35,42,32,.09);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
}
.site-card:hover{ transform:translateY(-6px); box-shadow:0 20px 42px rgba(35,42,32,.14); }

/* --- 写真入りカードは黒フチのコマに（TOP「五常で働く3つの魅力」と同じ） --- */
.site-cards > .site-card:has(.site-photo__frame){
  position:relative;
  border:3px solid #232A20; border-radius:18px;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
  overflow:visible;
}
.site-cards > .site-card:has(.site-photo__frame):hover{
  transform:none; translate:-2px -2px;
  box-shadow:.5rem .5rem 0 rgba(35,42,32,.85);
}
.site-cards > .site-card:has(.site-photo__frame) .site-photo__frame{
  border-radius:0; box-shadow:none; margin-block-end:1.125rem;
}

/* --- タグ／テープはマスキングテープ風＋黒フチ（TOPのPOINTと同じ語彙） --- */
.site-card__tape{
  position:absolute; inset-block-start:-.625rem; inset-inline-start:-.75rem; z-index:2;
  padding:.3rem 1rem;
  background:#F5B301; color:#232A20;
  font-family:Outfit,sans-serif; font-weight:800; font-size:.75rem; letter-spacing:.14em;
  border:2.5px solid #232A20;
  box-shadow:.1875rem .1875rem 0 #232A20;
  rotate:-4deg;
}

/* --- チェキ風の写真：白フチは残し、黒フチ＋硬いずれ影を足す --- */
.site-photo--cheki{
  border:3px solid #232A20;
  box-shadow:.4375rem .4375rem 0 rgba(35,42,32,.85);
}
.site-photo--cheki .site-photo__frame{ box-shadow:none; }

/* --- 施工実績／ブログの写真カード：TOPの実績カード（チェキ調）に合わせる --- */
.site-blogcard{
  border:3px solid #232A20; border-radius:0;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
}
.site-blogcard .site-photo__frame,
.site-blogcard .site-photo{ border-radius:0; box-shadow:none; }
.site-workcard{ transition:transform .25s ease, box-shadow .25s ease; }
.site-workcard:has(> a:hover),
.site-workcard:has(> a:focus-visible){
  transform:none; translate:-2px -2px;
  border-color:#232A20;
  box-shadow:.5rem .5rem 0 rgba(35,42,32,.85);
}
@media (max-width:22.5rem){
  .site-blogcard{ border-width:2.5px; box-shadow:.25rem .25rem 0 rgba(35,42,32,.85); }
}

/* --- エリアカードのラベルも同じテープ表現に --- */
.area-card{
  border:3px solid #232A20; border-radius:14px;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
}
.area-card__tape{
  border:2.5px solid #232A20;
  box-shadow:.1875rem .1875rem 0 #232A20;
}

/* --- 5つの理由：項目間は白いラインを、左右がすっと消えるグラデーションで --- */
.reason-zig + .reason-zig,
.why-suits__item + .why-suits__item{
  border-block-start:0;
  position:relative;
}
.reason-zig + .reason-zig::before,
.why-suits__item + .why-suits__item::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  block-size:2px; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.95) 22%,
    rgba(255,255,255,.95) 78%,
    rgba(255,255,255,0) 100%);
}

/* --- 経験者ページ「こんなことはありませんか？」：TOPの数字カードと同じコマ調に --- */
.exp-ask{
  background:#fff !important;
  border:3px solid #232A20;
  border-radius:26px !important;
  box-shadow:.4375rem .4375rem 0 #14601A;
  color:#232A20;
  aspect-ratio:auto;
  min-block-size:11rem;
  padding:1.75rem 1.5rem !important;
  font-weight:800;
}
.exp-ask:nth-child(1){ rotate:-1.2deg; }
.exp-ask:nth-child(2){ rotate:1.4deg; }
.exp-ask:nth-child(3){ rotate:-1.2deg; }
@media (max-width:47.5rem){
  .exp-ask{ min-block-size:0; padding:1.25rem 1rem !important; border-width:2.5px; }
}

/* --- ATMOSPHERE：TOPの「3つの魅力」と同じ黒フチのコマ＋チェキ調写真に --- */
.why-card{
  border:3px solid #232A20;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
}
.why-card:hover{
  transform:none; translate:-2px -2px;
  box-shadow:.5rem .5rem 0 rgba(35,42,32,.85);
}
.why-card .site-photo__frame{ border-radius:0; box-shadow:none; }
.why-card__tape{
  border:2.5px solid #232A20;
  box-shadow:.1875rem .1875rem 0 #232A20;
}
@media (max-width:47.5rem){
  .why-card{ border-width:2.5px; box-shadow:.3125rem .3125rem 0 rgba(35,42,32,.85); }
}

/* --- 画像枠は全ページでチェキ風に（白フチ＋黒フチ＋硬いずれ影・角丸なし） --- */
.site-photo{
  background:#fff;
  border:3px solid #232A20; border-radius:0;
  padding:.75rem .75rem 1.25rem;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
}
.site-photo .site-photo__frame{
  border:0; border-radius:0; box-shadow:none;
}
.site-photo figcaption{ display:none; }
/* カード内の写真は枠を重ねない（カード自体がコマ枠なので二重になる） */
.site-card .site-photo,
.why-card .site-photo,
.site-blogcard .site-photo{
  border:0; padding:0; box-shadow:none; background:none;
}
@media (max-width:47.5rem){
  .site-photo{
    border-width:2.5px; padding:.5rem .5rem 1rem;
    box-shadow:.3125rem .3125rem 0 rgba(35,42,32,.85);
  }
}

/* --- 成長ステップ：1本道は黄緑のライン（上下はフェード） --- */
.growth-timeline::before{
  border-inline-start:0;
  inline-size:3px; border-radius:2px;
  background:linear-gradient(180deg,
    rgba(140,198,63,0) 0%,
    rgba(140,198,63,1) 8%,
    rgba(140,198,63,1) 92%,
    rgba(140,198,63,0) 100%);
}
/* 追加していた丸ノードは置かない */
.growth-item::after,
.growth-item + .growth-item::after{ content:none; }

@media (prefers-reduced-motion: reduce){
  .site-card,
  .site-cards > .site-card:has(.site-photo__frame){ transition:none; }
  .site-card:hover,
  .site-cards > .site-card:has(.site-photo__frame):hover{ transform:none; translate:none; }
  .site-workcard:has(> a:hover){ translate:none; }
}
@media (max-width:48rem){
  .site-photo--cheki{ box-shadow:.3125rem .3125rem 0 rgba(35,42,32,.85); }
}
/* 900〜1023pxはカードが3列のままなので、アイ
コン横並びの2カラム化を解除
   （136pxのアイコン列に本文が押されて1文字ずつ折れていた） */
@media (min-width:56.25rem) and (max-width:63.9375rem){
  .site-card:has(> .site-card__title--icon){ display:block; }
  .site-card > .site-card__title--icon{
    flex-direction:row; align-items:center; text-align:start;
    margin-block-end:.75rem;
  }
  .site-card > .site-card__title--icon::before{ inline-size:2rem; block-size:2rem; }
}


/* ============================================================
   リンク先を持たないカードのホバー演出を無効化
   ・業務案内「作業の流れ」（STEPカード）／「対応エリア・対応建物」
   ・働く環境「五常の職場は、こんな雰囲気です」
   静止時の傾き・影をそのまま維持し、カーソルも通常矢印にする。
   ============================================================ */
[aria-labelledby="w-sec3"] .site-steps > .site-step:nth-child(3n+1){ --tilt:-1.2deg; }
[aria-labelledby="w-sec3"] .site-steps > .site-step:nth-child(3n+2){ --tilt:.9deg; }
[aria-labelledby="w-sec3"] .site-steps > .site-step:nth-child(3n){ --tilt:-.6deg; }
[aria-labelledby="w-sec3"] .site-steps > .site-step:hover{
  rotate:var(--tilt); transform:none; translate:0 0; z-index:auto;
  box-shadow:0 10px 24px rgba(35,42,32,.14);
  cursor:default;
}
[aria-labelledby="w-sec4"] .site-cards > .site-card:hover{
  transform:none; translate:0 0;
  box-shadow:0 14px 34px rgba(35,42,32,.09);
  cursor:default;
}
[aria-labelledby="e-sec5"] .why-cards > .why-card:nth-child(1){ --tilt:-1deg; }
[aria-labelledby="e-sec5"] .why-cards > .why-card:nth-child(2){ --tilt:1.2deg; }
[aria-labelledby="e-sec5"] .why-cards > .why-card:hover{
  rotate:var(--tilt, 0deg); transform:none; translate:0 0; z-index:auto;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
  cursor:default;
}
@media (max-width:47.5rem){
  [aria-labelledby="e-sec5"] .why-cards > .why-card:hover{
    box-shadow:.3125rem .3125rem 0 rgba(35,42,32,.85);
  }
}


/* 本文の最小16px／装飾ラベルは14px（style.css より後に読み込まれるため上書き） */
.site-card__tape,
.why-card__tape,
.area-card__tape{ font-size:.875rem; }
.why-card p,
.area-card p{ font-size:1rem; }


/* 本文の最小16px：パンくずとタブレット幅のドロップダウン項目名（取りこぼし分） */
.p-breadcrumb__inner{ font-size:1rem; }
.p-breadcrumb__item{ font-size:1rem; }
@media (max-width:47.9375rem){
  .p-breadcrumb__inner{ font-size:1rem; }
}
@media (max-width:1023px){
  .ui-mega-panel__grid b{ font-size:1rem; }
  .ui-mega-panel__grid span{ font-size:1rem; }
}


/* 透過PNGのイラストを入れているスロットは枠のグレー地を消す */
.why-suits__ill image-slot,
.concerns__ill image-slot,
.myth-ask__illust image-slot,
.site-ill image-slot,
image-slot[fit="contain"]{
  --slot-frame-bg:transparent;
}


/* ============================================================
   経験者ページ「五常で経験を活かすなら」：定義リストをカードに
   項目名と本文が横並びで読みにくかったため、白カードに分離。
   カードの語彙はサイト共通（黒フチ＋ずれ影／わずかな傾き）。
   ============================================================ */
.exp-cards{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem;
}
.exp-cards > .exp-card{
  flex:1 1 17rem;
  max-inline-size:calc((100% - 2rem) / 3);
  min-inline-size:17rem;
}
.exp-card{
  background:#fff;
  border:3px solid #232A20;
  border-radius:14px;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
  padding:1.375rem 1.375rem 1.5rem;
}
.exp-card__title{
  margin:0 0 .625rem;
  display:flex; align-items:center; gap:.5rem;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  font-size:1.125rem; font-weight:800; line-height:1.5; color:#14601A;
}
.exp-card__title::before{
  content:""; flex:none;
  inline-size:.5rem; block-size:1.375rem; border-radius:2px;
  background:#F5B301;
}
.exp-card p{
  margin:0; font-size:1rem; line-height:1.9; color:#3E4739; text-wrap:pretty;
}
.exp-cards > .exp-card:nth-child(odd){ rotate:-.5deg; }
.exp-cards > .exp-card:nth-child(even){ rotate:.6deg; }
@media (max-width:47.9375rem){
  .exp-cards{ gap:.875rem; }
  .exp-cards > .exp-card{ flex:1 1 100%; max-inline-size:100%; min-inline-size:0; }
  .exp-card{ padding:1.125rem 1.125rem 1.25rem; box-shadow:.3125rem .3125rem 0 rgba(35,42,32,.85); rotate:0deg !important; }
  .exp-card__title{ font-size:1.0625rem; }
}


/* ============================================================
   レスポンシブ確認（全16ページ×6幅）で残っていた小さい文字の底上げ
   ・日本語の読ませる文字は16px以上
   ・欧文ラベル／タグ／テープ／バッジなど装飾は14pxを下限
   ============================================================ */
.site-header-menubar__brand-sub,
.site-header-menubar__drawer-lead,
.site-header-menubar__contact-lead,
.site-fv__label,
.site-fv__sub,
.site-form__hint,
.news-c__all,
.site-foot-info__tel-note{
  font-size:1rem;
}
.site-header-menubar__drawer-lead span,
.site-header-menubar__contact-note,
.site-fv__badge,
.site-form__req,
.site-form__opt,
.site-eyebrow,
.cta-band__sub,
.stats-band__eyebrow,
.gojo-five__note,
.salary-step__month em,
.site-table em{
  font-size:.875rem;
}
@media (max-width:23.4375rem){
  .site-fv__label,
  .site-fv__sub{ font-size:1rem; }
  .site-fv__badge{ font-size:.875rem; }
}


/* FVの文字：.site-fv--collage 付きの既存指定に勝つよう同じ詳細度で16px以上に */
.site-fv--collage .site-fv__label,
.site-fv--collage .site-fv__sub{ font-size:1rem; }
.site-fv--collage .site-fv__badge{ font-size:.875rem; }
@media (max-width:56.25rem){
  .site-fv--collage .site-fv__label,
  .site-fv--collage .site-fv__sub{ font-size:1rem; }
  .site-fv--collage .site-fv__badge{ font-size:.875rem; }
}
@media (max-width:22.5rem){
  .site-fv--collage .site-fv__label,
  .site-fv--collage .site-fv__sub{ font-size:1rem; }
  .site-fv--collage .site-fv__badge{ font-size:.875rem; }
}


/* ============================================================
   スマホ幅：タイムライン系の本文が横幅いっぱいで読めるようにする
   ------------------------------------------------------------
   ラベル列（5.5〜6.5rem）と本文列の2段組を維持していたため、
   375px では本文が166〜210pxしか取れず数文字で折り返していた。
   480px以下はラベルを本文の上に置き、本文を全幅にする。
   ============================================================ */
@media (max-width:30rem){
  /* 成長ステップ（未経験者のかたへ） */
  .growth-timeline{ gap:0; }
  .growth-timeline::before{ inset-inline-start:calc(.5rem - 1px); inset-block:1rem .75rem; }
  .growth-item{
    display:block; position:relative;
    padding-inline-start:1.75rem; padding-block:.75rem;
    grid-template-columns:none;
  }
  .growth-item::before{
    content:""; position:absolute; inset-block-start:1.0625rem; inset-inline-start:0;
    inline-size:1rem; block-size:1rem; border-radius:50%;
    background:var(--green); border:3px solid var(--beige-deep);
  }
  .growth-item:last-child::before{ background:var(--pop-lime); }
  .growth-item__pill{
    display:inline-block; inline-size:auto; justify-self:auto;
    padding:.25rem .8rem; margin-block-end:.375rem;
  }
  .growth-item__body{ padding:0; }

  /* 1日の流れ（働く環境）：点線も左端へ移し、節目の丸で受ける */
  .day-timeline{ inline-size:100%; }
  .day-timeline::before{ inset-inline-start:calc(.5rem - 1px); inset-block:1rem .75rem; }
  .day-item::before{
    content:""; position:absolute; inset-block-start:1.0625rem; inset-inline-start:0;
    inline-size:1rem; block-size:1rem; border-radius:50%;
    background:var(--green-dark); border:3px solid var(--beige-deep);
  }
  .day-item--rest::before{ background:var(--pop-yellow); }
  .day-item{
    display:block; position:relative;
    grid-template-columns:none;
    padding-inline-start:1.75rem; padding-block:.625rem;
  }
  .day-item__pill{
    inline-size:auto; margin-block-end:.375rem;
  }
  .day-item__body{ padding-inline:0; }
}


/* ============================================================
   本文の折り返しを横幅いっぱいに戻す
   ------------------------------------------------------------
   行末孤立を避けるため本文に text-wrap:pretty を当てていたが、
   Safari（iOS）の pretty は段落全体を組み直して各行を短くするため、
   iPhone では行末が大きく余って不揃いに見えていた
   （Chrome は最終行の孤立だけを直すので差が出なかった）。
   本文は既定の折り返しに戻し、見出しの pretty だけ残す。
   ============================================================ */
p, li, dd, td,
figcaption,
.site-sec__text p,
.stats-band__label,
.site-card__meta,
.site-photo__desc,
.reason-zig__body p,
.day-item__body p,
.growth-item__body p,
.why-card p,
.benefit-card p,
.env-item p,
.myth-truth__text,
.site-faq__a p,
.exp-card p,
.staff-qa__field,
.site-blogcard__excerpt{
  text-wrap:wrap;
}


/* ============================================================
   text-wrap の一律解除（iOS Safari 対応）
   ------------------------------------------------------------
   pretty / balance を使っている箇所すべてを既定の折り返しに戻す。
   iOS Safari の pretty・balance は段落全体を組み直して各行を短くするため、
   本文・見出し・カード内テキストの行末が大きく余って不揃いに見えていた。
   ============================================================ */
p, li, dd, td, figcaption,
h1, h2, h3, h4,
.ui-heading, .site-h2, .cta-band__title, .stats-band__lead, .stats-band__label,
.site-cta .site-h2,
.site-photo__desc, .site-fv__phtag, .site-card__meta,
.site-step__title, .site-card__title,
.site-faq__q, .site-blogcard__title, .blog-card__title,
.myth-ask__bubble, .site-emph-lead, .reason-zig__title,
.num-rows__title, .exp-ask, .notice-band, .lead-emphasis,
.site-fv--collage .site-fv__sub,
.site--top .blog-teaser__title,
.exp-card p{
  text-wrap:wrap;
}


/* スマホ幅：吹き出しの原稿改行は幅に合わないので無効化し、自然に折り返す
   （「力任せに壊していく／力仕事？」が「力任せに壊してい／く／力仕事？」と3行に割れていた） */
@media (max-width:30rem){
  .myth-ask__bubble br{ display:none; }
  .myth-ask__bubble{ padding:1rem .9rem; line-height:1.75; }
}


/* ============================================================
   5つの理由：スマホ幅で行が右に伸びて切れていた原因の修正
   ------------------------------------------------------------
   .reason-zig は 3.25rem + 1fr の2段組で、見出しが grid 2列目に入る。
   見出しには word-break:keep-all が効いているため
   「働き方のことを、代表に直接相談できる」が分割不可の一塊になり、
   grid アイテムの既定 min-width:auto によって 1fr トラックが
   最小コンテンツ幅まで広がり、親（overflow:hidden）で右が切れていた。
   トラックを縮められるようにし、収まらない見出しは折り返す。
   ============================================================ */
.reason-zig{ min-inline-size:0; }
.reason-zig > *{ min-inline-size:0; }
.reason-zig__title{ min-inline-size:0; word-break:normal; overflow-wrap:anywhere; }
.reason-zig__body,
.reason-zig__body p{ min-inline-size:0; max-inline-size:100%; }

/* 同じ「keep-all の見出しが grid トラックを押し広げる」型の枠をまとめて保険 */
.site-cards > *,
.site-steps > *,
.growth-item > *,
.day-item > *,
.num-rows__item > *,
.site-guide__steps li > *{ min-inline-size:0; }


/* ============================================================
   登場アニメーションの CSS 側フェイルセーフ
   ------------------------------------------------------------
   JS の表示判定（IntersectionObserver）が発火しない端末で
   opacity:0 のまま空白になる事故を、CSS だけで必ず解除する。
   3秒後に可視化するアニメーションを初期状態に仕込み、
   通常どおり is-in が付いた要素は animPop が上書きする。
   ============================================================ */
/* keyframes + animation-fill-mode は、端末側でアニメーションのタイムラインが
   進まない状況（iOS Safari の省電力・履歴復帰など）だと opacity:0 のまま
   固まり、セクションが永久に空白になる。最終状態は素の宣言で持たせ、
   動きは transition に任せる（transition が動かなくても必ず可視になる）。 */
.anim-ready .anim-armed:not(.anim-rise):not(.gojo-five__item),
.anim-ready :is([data-reveal], .site-card, .why-card, .benefit-card,
  .entry-flow__item, .exp-ask, .about-history__item, .day-item, .site-photo):not(.stats-band, .stats-band *):not(.anim-rise):not(.gojo-five__item){
  animation:none;
  opacity:0; translate:0 24px; scale:.96;
  /* opacity は transition に載せない。端末側でトランジションのタイムラインが
     進まない場合でも、is-in が付いた瞬間に必ず不透明になるようにする。
     動き（浮き上がり・拡大）だけを transition で表現する。 */
  transition:translate .6s cubic-bezier(.34,1.56,.64,1) var(--anim-delay,0s),
             scale .6s cubic-bezier(.34,1.56,.64,1) var(--anim-delay,0s);
}
.anim-ready .anim-armed:not(.anim-rise):not(.gojo-five__item).is-in,
.anim-ready :is([data-reveal], .site-card, .why-card, .benefit-card,
  .entry-flow__item, .exp-ask, .about-history__item, .day-item, .site-photo):not(.stats-band, .stats-band *):not(.anim-rise):not(.gojo-five__item).is-in{
  animation:none;
  opacity:1; translate:none; scale:none;
}


/* ============================================================
   端末の横幅に必ず収める（横に伸びて右が切れるのを根本で止める）
   ------------------------------------------------------------
   grid / flex の子要素は既定で min-width:auto のため、
   分割できない日本語（見出しの word-break:keep-all など）があると
   トラックが最小コンテンツ幅まで広がり、画面幅を超えて右側が切れる。
   版面内のすべての子要素で縮小を許可し、画像・表も幅上限を持たせる。
   ============================================================ */
.site-sec *,
.site-row *,
.cta-band *{ min-inline-size:0; min-block-size:0; }
.why-cards, .why-card,
.site-cards, .site-card,
.benefit-cards, .benefit-card,
.exp-cards, .exp-card,
.site-steps, .site-step,
.staff-card, .staff-card__media,
.num-rows, .num-rows__item,
.day-timeline, .day-item,
.growth-timeline, .growth-item,
.reasons-zig, .reason-zig{ min-inline-size:0; max-inline-size:100%; }
.site-sec img,
.site-sec table{ max-inline-size:100%; }
.why-card > *,
.site-card > *,
.benefit-card > *,
.exp-card > *{ min-inline-size:0; max-inline-size:100%; }

/* スマホ幅：雰囲気カードは1列にして全幅で読ませる */
@media (max-width:47.5rem){
  .why-cards{ grid-template-columns:minmax(0,1fr); }
}


/* ============================================================
   スマホ幅の改行・折り返しの見直し
   ------------------------------------------------------------
   ① 「いまの職場で…」の3つの吹き出し：原稿の ＜br＞ が枠幅に合わず
      「会社との距離が遠／く、」と語中で割れていたため、768px以下は
      ＜br＞ を無効化して枠幅に合わせて自然に折り返す。
   ② 本文中の電話番号リンク：タップ領域確保のため inline-flex に
      していたため一塊のブロックとして扱われ、「お電話（」の直後で
      強制的に改行されていた。本文中では inline に戻し、
      上下パディングでタップ領域を確保する。
   ============================================================ */
@media (max-width:47.5rem){
  .exp-ask br{ display:none; }
  .exp-ask{ line-height:1.8; }

  .area-card p a[href^="tel:"],
  .site-step p a[href^="tel:"],
  .entry-flow__item p a[href^="tel:"],
  .site-sec__text a[href^="tel:"],
  p a[href^="tel:"]{
    display:inline; min-block-size:0;
    padding-block:.35rem; white-space:nowrap;
  }
  /* 電話番号の前の「（」で切れないよう、括弧ごと1つの塊にする */
  .area-card p, .site-step p, .entry-flow__item p{ overflow-wrap:break-word; }
}


/* スマホ幅：吹き出しは1列・全幅にして、狭い枠で語中改行が起きないようにする */
@media (max-width:30rem){
  .exp-asks{ display:flex; flex-direction:column; align-items:center; gap:.75rem; }
  .exp-ask{
    flex:none; inline-size:100%; max-inline-size:22rem;
    aspect-ratio:auto; padding:1.25rem 1.5rem;
    font-size:1rem; line-height:1.8;
  }
}


/* ===== 20c_top-pop.css ===== */
/* ============================================================
   top-pop.css — トップページ専用のポップ表現レイヤー
   style.css の後ろに読み込む。body.site--top が付いたページにのみ効く。
   ・有機的なブロブ（円を歪ませた角丸）で写真とあしらいを柔らかく
   ・セクション背景にゴースト欧文（data-ghost）
   ・緑面は山なりのクリップで切り出し、直線的な帯感を消す
   下層ページには一切影響させない（セレクタは必ず .site--top から書く）
   ============================================================ */

.site--top{
  --pop-cream:#FAF6EA;
  --pop-cream-d:#F2EAD6;
  --pop-green:#228B22;
  --pop-green-d:#14601A;
  --pop-lime:#8CC63F;
  --pop-yellow:#F5B301;
  --pop-mint:#E9F1E2;
  --blob-a:58% 42% 47% 53% / 52% 47% 53% 48%;
  --blob-b:42% 58% 62% 38% / 46% 56% 44% 54%;
  --blob-c:63% 37% 41% 59% / 57% 42% 58% 43%;
  background:var(--pop-cream);
}

/* --- 装飾ブロブ（HTML側に ＜span class="pop-blob pop-blob--…"> を置く） --- */
.site--top .pop-blob{
  position:absolute; display:block; pointer-events:none; z-index:0;
  border-radius:var(--blob-b);
}
.site--top .pop-blob--mint{ background:var(--pop-mint); }
.site--top .pop-blob--cream{ background:var(--pop-cream-d); }
.site--top .pop-blob--lime{ background:var(--pop-lime); }
.site--top .pop-blob--yellow{ background:var(--pop-yellow); }
.site--top .pop-blob--green{ background:var(--pop-green); }
.site--top .pop-blob--ring{
  background:none; border:3px solid rgba(34,139,34,.22); border-radius:999px;
}
/* 線だけのブロブ（塗らないので本文の邪魔にならない） */
.site--top .pop-blob--outline{
  background:none; border:2px solid rgba(34,139,34,.18);
  border-radius:var(--blob-a);
}
.site--top .pop-blob--outline-y{
  background:none; border:2px solid rgba(245,179,1,.45);
  border-radius:var(--blob-c);
}
.site--top .pop-blob--dots{
  background-image:radial-gradient(rgba(34,139,34,.28) 2.5px, transparent 2.6px);
  background-size:16px 16px; border-radius:0;
}
/* ドットの色バリエーション（カードの裏に潜り込ませて使う） */
.site--top .pop-blob--dots-y{
  background-image:radial-gradient(rgba(245,179,1,.55) 2.5px, transparent 2.6px);
  background-size:16px 16px; border-radius:0;
}
.site--top .pop-blob--dots-lime{
  background-image:radial-gradient(rgba(140,198,63,.6) 2.5px, transparent 2.6px);
  background-size:14px 14px; border-radius:0;
}
.site--top .pop-blob--dots-dense{
  background-image:radial-gradient(rgba(34,139,34,.22) 2px, transparent 2.1px);
  background-size:11px 11px; border-radius:0;
}

/* Rowはブロブの器。はみ出しは切る */
.site--top .site-row{ position:relative; overflow:hidden; z-index:1; }
.site--top .site-row--beige{ background:var(--pop-cream-d); }
.site--top .site-sec{ position:relative; z-index:1; }
/* .stats-band は .site-sec ではないため上の規則から漏れ、装飾ブロブ（position:absolute）に
   見出しを塗り潰されていた（実測 2026-09-02）。Row直下のセクション全般を持ち上げる。 */
.site--top .site-row > section,
.site--top .stats-band{ position:relative; z-index:1; }

/* --- ゴースト欧文：セクション名を薄く大きく背景へ --- */
.site--top .site-sec[data-ghost]::before{
  content:attr(data-ghost);
  position:absolute; inset-block-start:-.34em; inset-inline-end:-.02em;
  font-family:Outfit,"Noto Sans JP",sans-serif; font-weight:800;
  font-size:clamp(4.5rem,12vw,11.5rem); line-height:1; letter-spacing:.01em;
  color:rgba(34,139,34,.07); white-space:nowrap; pointer-events:none; z-index:-1;
}

/* --- 見出しまわり --- */
/* 単独で立つアイビーブロウのみ装飾する。NEWSバーやフッター見出しの
   .site-eyebrow は「NEWS＋お知らせ」のように日本語ラベルの前置きとして
   使われており、box-model を触ると同じ行に詰まってしまう（実測 2026-09-02）。 */
.site--top .site-sec > .site-eyebrow,
.site--top .cta-band__sub{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:Outfit,sans-serif; letter-spacing:.18em;
}
.site--top .site-sec > .site-eyebrow::before,
.site--top .cta-band__sub::before{
  content:""; inline-size:1.75rem; block-size:2px; background:var(--pop-yellow); border-radius:2px;
}
.site--top .site-h2{ letter-spacing:.01em; }

/* --- 写真：矩形をやめ、ブロブに --- */
.site--top .site-photo--polaroid{
  background:none; border:0; box-shadow:none; padding:0;
}
.site--top .site-photo--polaroid figcaption{ display:none; }
.site--top .site-photo__frame{
  border-radius:var(--blob-a);
  background:linear-gradient(150deg,#E4EEDC,#F2EAD6);
  border:0;
  box-shadow:0 18px 40px rgba(35,42,32,.12);
  overflow:hidden;
}
.site--top .site-photo--tilt-l .site-photo__frame{ border-radius:var(--blob-b); }
.site--top .site-photo--tilt-r .site-photo__frame{ border-radius:var(--blob-c); }
/* ブロブは四隅を大きく削るので、枠内の注記は絶対配置をやめて中央に寄せる
   （左上固定のままだと曲線に食われて「PHOTO 02」が切れていた） */
.site--top .site-photo__frame{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; padding:18%; text-align:center;
}
.site--top .site-photo__tag,
.site--top .site-photo__desc{
  position:static; inset:auto; margin:0; max-inline-size:100%;
}

/* 重ねる小さなブロブ写真枠（OUR WORK：メイン写真の右下に重ねる） */
.site--top .site-photo--stacked{ position:relative; }
.site--top .site-photo__inset{
  position:absolute; inset-block-end:-4.5rem; inset-inline-end:1.5rem; z-index:2;
  inline-size:48%; aspect-ratio:3 / 2;
  overflow:hidden;
  border-radius:63% 37% 41% 59% / 57% 42% 58% 43%;
  border:0;
  box-shadow:0 14px 30px rgba(35,42,32,.18);
}
.site--top .site-photo__inset img{
  display:block; inline-size:100%; block-size:100%; object-fit:cover;
}
@media (max-width:48rem){
  .site--top .site-photo__inset{
    inline-size:46%; inset-block-end:-3rem; inset-inline-end:.5rem;
  }
}

/* 実写が入った枠：注記用のパディングを外し、画像をブロブ形状いっぱいに敷く */
.site--top .site-photo__frame--filled{
  padding:0; background:none; display:block;
}
.site--top .site-photo__frame--filled img{
  display:block; inline-size:100%; block-size:100%; object-fit:cover;
}

/* --- FV：下辺を丸く抜いて、遊びのあるシルエットに --- */
.site--top .site-fv{
  border-end-start-radius:clamp(2.5rem,7vw,6rem);
  border-end-end-radius:clamp(2.5rem,7vw,6rem);
  overflow:hidden;
}
.site--top .site-fv__actions .ui-btn{ box-shadow:0 8px 20px rgba(0,0,0,.18); }
.site--top .pop-fv-mark{
  position:absolute; inset-inline-start:clamp(1rem,4vw,3rem); inset-block-end:.4rem;
  margin:0; font-family:Outfit,sans-serif; font-weight:800;
  font-size:clamp(3.5rem,11vw,9rem); line-height:.85; letter-spacing:.02em;
  /* 白抜き（線のみ）→ 塗りつぶし */
  color:rgba(255,255,255,.92); -webkit-text-stroke:0;
  text-shadow:0 .125rem 1rem rgba(20,48,20,.32);
  pointer-events:none; z-index:2;
}

/* --- NEWS / BLOG バー：カード化 --- */
.site--top .site-newsbar{ background:transparent; border:0; }
/* 記事タイトルの下線は抜く（3件並ぶと罫線が目立ちすぎる） */
.site--top .site-newsbar__list a{ text-decoration:none; }
.site--top .site-newsbar__list a:hover{ text-decoration:underline; text-underline-offset:3px; }
.site--top .site-newsbar__list li + li{ margin-block-start:.625rem; }
/* 白カードは news-c の .news-c__panel が担う。ここでも白地を敷くと
   パネルが2重に見えるので、BLOGバー（.news-c なし）のみに限定する。 */
.site--top .site-newsbar:not(.news-c) > .l-center{
  background:#fff; border-radius:24px; padding:1.25rem 1.75rem;
  box-shadow:0 10px 30px rgba(35,42,32,.07);
  margin-block:1.5rem;
}

/* --- 数字で見る五常：カードをブロブにし、上下に差をつけて並べる --- */
/* 見出しは中央。lead は max-width 付きのブロックなので、
   text-align だけでは箱が左に寄ったまま＝auto マージンで箱ごと中央へ。 */
.site--top .stats-band{ padding-block:clamp(2rem,3.5vw,2.75rem) clamp(3.5rem,6vw,5rem); margin-block-start:0; }
.site--top .site-row:has(.stats-band){ padding-block-start:clamp(2rem,3.5vw,2.75rem); }
.site--top .stats-band__head{ text-align:center; margin-block-end:.625rem; }
/* 見出し→カードの間隔は .stats-band__inner の flex gap が支配的（head の margin ではない） */
.site--top .stats-band__inner{ gap:.5rem; }
.site--top .stats-band__lead{ margin-block-start:.25rem; }
.site--top .stats-band__eyebrow,
.site--top .stats-band__lead{ margin-inline:auto; }
/* 中央寄せなので、style.css 由来の左ダッシュ（背景グラデ＋左パディング）は落とす */
.site--top .stats-band__eyebrow{ background-image:none; padding-inline-start:0; }
.site--top .stats-band__grid{ align-items:flex-start; }
@keyframes pop-bounce{
  0%,100%{ scale:1 1; }
  30%    { scale:1.05 .95; }
  60%    { scale:.955 1.045; }
  82%    { scale:1.015 .985; }
}
.site--top .stats-band__stat{
  background:#fff;
  /* B案：コミック太フチ＋硬いずれ影（POINTカードと同じ語彙） */
  border:3px solid var(--ink);
  border-radius:26px;
  padding:2rem 2.25rem;
  min-block-size:13.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center;
  box-shadow:.4375rem .4375rem 0 var(--ink);
  position:relative;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
}
/* 読み込み直後ではなく、画面に入った瞬間に1回だけ弾ませる（.is-bounced はJSが付与） */
.site--top .stats-band__stat:nth-child(1){ --tilt:-1.2deg; margin-block-start:0; rotate:var(--tilt); }
.site--top .stats-band__stat:nth-child(2){ --tilt:1.4deg; margin-block-start:2.5rem; rotate:var(--tilt); }
.site--top .stats-band__stat:nth-child(3){ --tilt:-1.2deg; margin-block-start:1rem; rotate:var(--tilt); }
.site--top .stats-band__stat:nth-child(4){ --tilt:1.4deg; margin-block-start:3.25rem; rotate:var(--tilt); }
.site--top .stats-band.is-bounced .stats-band__stat{
  animation:statBlobPop .65s cubic-bezier(.34,1.7,.5,1) 1 both,
            statBlobFloat 5s ease-in-out .9s infinite;
}
@keyframes statBlobPop{
  0%{ opacity:0; scale:.35; rotate:calc(var(--tilt,0deg) - 40deg); }
  60%{ opacity:1; scale:1.12; rotate:calc(var(--tilt,0deg) + 6deg); }
  100%{ opacity:1; scale:1; rotate:var(--tilt,0deg); }
}
@keyframes statBlobFloat{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -6px; }
}
.site--top .stats-band.is-bounced .stats-band__stat:nth-child(2){ animation-delay:.12s,1.02s; }
.site--top .stats-band.is-bounced .stats-band__stat:nth-child(3){ animation-delay:.24s,1.14s; }
.site--top .stats-band.is-bounced .stats-band__stat:nth-child(4){ animation-delay:.36s,1.26s; }
.site--top .stats-band__stat:hover{ transform:none; translate:-2px -2px; box-shadow:.5625rem .5625rem 0 var(--ink); }
@media (prefers-reduced-motion:reduce){
  .site--top .stats-band__stat{ animation:none !important; }
}
/* アクセントの粒は使わない（B案の太フチのみで見せる） */
.site--top .stats-band__stat::before{ content:none; }
.site--top .stats-band__stat:nth-child(2)::before,
.site--top .stats-band__stat:nth-child(3)::before{ content:none; }
.site--top .stats-band__value{ justify-content:center; }
.site--top .stats-band__num{
  color:var(--pop-green-d);
  font-size:clamp(2.5rem,4.4vw,3.5rem); line-height:1;
}
/* 桁の少ない「2」「10」は大きく見せてリズムを作る */
.site--top .stats-band__stat:nth-child(3) .stats-band__num,
.site--top .stats-band__stat:nth-child(4) .stats-band__num{
  font-size:clamp(3.25rem,6vw,4.75rem);
}
.site--top .stats-band__unit{ font-size:1.0625rem; }
.site--top .stats-band__label{ font-size:.9375rem; line-height:1.7; margin:0; }
@media (max-width:48rem){
  .site--top .stats-band__stat{ margin-block-start:0 !important; min-block-size:0; }
}

/* --- WHY GOJO：3枚のカードをチェキ（インスタント写真）風にして、少し傾けて置く --- */
.site--top [aria-labelledby="sec-why"] .site-cards--3{
  align-items:stretch; padding-block:1.75rem 2.5rem;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff; border:0;
  /* チェキ＝細い白フチ、下だけ大きく余白。角丸なし・写真の影なし */
  padding:.875rem .875rem 1.5rem;
  border-radius:0;
  box-shadow:0 10px 24px rgba(35,42,32,.14);
  transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(1){ rotate:-1.6deg; }
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(2){ rotate:1.2deg; }
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(3){ rotate:-.8deg; }
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:hover{
  rotate:0deg; transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(35,42,32,.18);
  z-index:3;
}
/* 写真面は矩形・影なし。1:1 だと縦に嵩むので横長（5:4）に詰める */
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card .site-photo__frame{
  border-radius:0; box-shadow:none; margin-block-end:1.125rem;
  aspect-ratio:5 / 4;
}
/* POINT 01 などはマスキングテープ風のバッジにして、左上に重ねる */
.site--top .site-card__tape{
  position:absolute; inset-block-start:-.625rem; inset-inline-start:-.75rem; z-index:2;
  padding:.3rem 1rem;
  background:#F5B301; color:#232A20;
  font-family:Outfit,sans-serif; font-weight:800; font-size:.75rem; letter-spacing:.14em;
  box-shadow:0 3px 8px rgba(35,42,32,.16);
  rotate:-4deg;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(2) .site-card__tape{
  rotate:3.5deg; background:#8CC63F;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(3) .site-card__tape{
  rotate:2.5deg;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 .site-card__title{
  font-size:.9375rem; letter-spacing:-.01em;
  line-height:1.5; margin-block-end:.5rem; white-space:nowrap;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card > p{
  font-size:.9375rem; line-height:1.85; margin-block-end:0;
}
@media (max-width:48rem){
  .site--top [aria-labelledby="sec-why"] .site-cards--3 .site-card__title{ white-space:normal; }
}
@media (max-width:48rem){
  .site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card{ rotate:0deg !important; }
}

/* --- BLOG（CTAとフッターの間）：帯ではなく通常セクション＋3カード --- */
.site--top .blog-teaser{ background:#FAF6EA; }
.site--top .blog-teaser__grid{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.5rem;
}
.site--top .blog-teaser__card > a{
  display:flex; flex-direction:column; gap:.625rem; block-size:100%;
  padding:.875rem .875rem 1.25rem;
  background:#fff; text-decoration:none; color:#232A20;
  box-shadow:0 10px 24px rgba(35,42,32,.12);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
}
.site--top .blog-teaser__card > a:hover{
  transform:translateY(-6px); box-shadow:0 18px 38px rgba(35,42,32,.16);
}
.site--top .blog-teaser__thumb{
  display:block; overflow:hidden;
  aspect-ratio:16 / 9;
  background:#F2EAD6;
}
.site--top .blog-teaser__thumb img{
  display:block; inline-size:100%; block-size:100%; object-fit:cover;
}
.site--top .blog-teaser__meta{
  display:flex; align-items:center; gap:.625rem; flex-wrap:wrap;
}
.site--top .blog-teaser__cat{
  padding:.15rem .6875rem; border-radius:999px;
  background:#E9F1E2; color:#14601A;
  font-size:.6875rem; font-weight:700; white-space:nowrap;
}
.site--top .blog-teaser__date{
  font-family:Outfit,sans-serif; font-weight:700; font-size:.875rem; color:#1B7A1B;
}
.site--top .blog-teaser__title{
  font-family:"M PLUS Rounded 1c","Hiragino Sans",sans-serif;
  font-weight:800; font-size:1rem; line-height:1.7; text-wrap:pretty;
}
/* ブレークポイントはページ内の他グリッド（.site-cards--3）に揃える */
@media (max-width:1023px){
  .site--top .blog-teaser__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:599px){
  .site--top .blog-teaser__grid{ grid-template-columns:1fr; }
}

/* --- WORKS：セクション上に余白 --- */
.site--top [aria-labelledby="sec-works"]{ padding-block-start:clamp(2.5rem,5vw,4.5rem); }

/* --- カード：角丸を大きく、浮かせる --- */
.site--top .site-card{
  background:#fff; border:0; border-radius:28px;
  padding:1.5rem 1.5rem 1.75rem;
  box-shadow:0 10px 28px rgba(35,42,32,.08);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
}
.site--top .site-card:hover{ transform:translateY(-6px); box-shadow:0 20px 42px rgba(35,42,32,.14); }
.site--top .site-card .site-photo__frame{ border-radius:var(--blob-a); margin-block-end:1rem; }
/* 実績カードはチェキ調（角丸なし・写真の影なし）。.site-card より後に置いて勝たせる */
.site--top .site-card--work{
  border-radius:0;
  padding:.875rem .875rem 1.25rem;
  /* 下層ページの実績カードと同じチェキ調（黒フチ＋硬いずれ影） */
  border:3px solid #232A20;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
}
.site--top .site-card--work:hover{
  transform:none; translate:-2px -2px;
  box-shadow:.5rem .5rem 0 rgba(35,42,32,.85);
}
.site--top .site-card--work .site-card__meta{ margin-block-end:0; }
.site--top .site-card--work .site-photo__frame{ border-radius:0; box-shadow:none; }

/* --- 表：罫線ではなく丸みのある行で --- */
.site--top .site-table{
  border-collapse:separate; border-spacing:0 .5rem; border:0; background:none;
}
.site--top .site-table th,
.site--top .site-table td{ border:0; background:#fff; padding:1rem 1.25rem; }
.site--top .site-table th{ border-start-start-radius:18px; border-end-start-radius:18px; white-space:nowrap; }
/* 項目名は緑に。左は行頭が詰まって見えるので余白を足す */
.site--top .site-table th{ color:#14601A; padding-inline-start:1.75rem; }
.site--top .site-table td{ border-start-end-radius:18px; border-end-end-radius:18px; }
.site--top .site-row--beige .site-table th,
.site--top .site-row--beige .site-table td{ background:#fff; }

/* --- POINTカラウト（採用案：淡緑地＋緑の細枠＋ずらし影） --- */
.site--top .site-balloon{
  position:relative; display:flex; align-items:center; justify-content:center; gap:2.25rem;
  margin:2rem 0; padding:0;
  background:none; color:var(--green-dark);
  border:0; border-radius:0; box-shadow:none;
  font-family:"M PLUS Rounded 1c","Hiragino Sans",sans-serif;
  font-weight:700; font-size:1.375rem; line-height:1.9;
  justify-content:flex-start; gap:1.5rem;
}
.site--top .site-balloon__label{
  flex:none; display:flex; align-items:center; justify-content:center;
  inline-size:4.5rem; block-size:4.5rem;
  border-radius:58% 42% 47% 53% / 52% 47% 53% 48%;
  background:#F5B301; color:#232A20;
  font-family:Outfit,sans-serif; font-weight:800; font-size:.8125rem; letter-spacing:.1em;
}
.site--top .site-balloon__text{ margin:0; letter-spacing:.06em; color:#14601A; }
.site--top .site-balloon__text b{ color:#14601A; }
/* 旧デザイン（矩形の吹き出し）の三角シッポは合わないので消す */
.site--top .site-balloon::after{ content:none; }
.site--top .site-balloon b{
  color:var(--green-dark); white-space:nowrap;
  font-size:1.35em; font-weight:900; letter-spacing:.02em;
  margin-inline-end:.15em;
}
@media (max-width:34rem){
  .site--top .site-balloon{
    flex-direction:column; align-items:center; text-align:center; gap:1rem;
    padding:1.5rem 1.25rem; border-radius:22px 30px 22px 30px;
  }
}

/* --- 緑面（RECRUIT）：上下の辺を半円で剤り、中央がへこんだ形に --- */
/* WHY GOJO と RECRUIT の間に見えていたベージュの空き帯を消す。余白そのものは要るので、
   Row の下パディングは残したまま、帯を同じ分だけ上へ食い込ませて緑で塗る。 */
/* Row 側が position:relative; z-index:1 のため、静的な帯を負マージンで潜り込ませても
   Row のベージュが上に塗られていた（実測 2026-09-02）。帯を一段上へ。 */
.site--top .site-cta--green{
  margin-block-start:calc(clamp(3rem, 2.875rem + 0.556vw, 3.375rem) * -1.1);
  position:relative; z-index:2;
}

.site--top .cta-band{
  position:relative; border:0;
  padding-block:clamp(6.5rem,11vw,9.5rem) clamp(6rem,10vw,8.5rem);
}
/* 上下のへこみは mask で「抜く」のをやめ、隣のセクション色の楕円を重ねて描く。
   mask だと背後に body のクリームが出てしまい、WHY GOJO のベージュと段差になっていた。 */
.site--top .site-cta--green::before,
.site--top .site-cta--green::after{
  content:""; position:absolute; inset-inline-start:50%; translate:-50% 0;
  inline-size:130%; border-radius:50%; z-index:0; pointer-events:none;
}
.site--top .site-cta--green::before{
  inset-block-start:0; block-size:11rem; transform:translateY(-50%);
  background:#F2EAD6;   /* WHY GOJO（ベージュRow）と同色 */
  /* 上のベージュRowと同じドットを載せて面をつなぐ */
  background-image:radial-gradient(rgba(34,139,34,.14) 2px, transparent 2.1px);
  background-size:18px 18px;
  background-color:#F2EAD6;
}
.site--top .site-cta--green::after{
  inset-block-end:0; block-size:9rem; transform:translateY(50%);
  background:#FAF6EA;   /* 下は body のクリーム面 */
}
/* CTA（濃緑）も RECRUIT と同じ形に。上は白 Row、下はブログのクリーム面なので
   それぞれの色の楕円を重ねて中央をへこませる。 */
.site--top .site-cta--deep{
  padding-block:clamp(6.5rem,11vw,9.5rem) clamp(6rem,10vw,8.5rem);
  border-radius:0;
  margin-block-start:calc(clamp(3rem, 2.875rem + 0.556vw, 3.375rem) * -1.1);
  position:relative; z-index:2;
}
.site--top .site-cta--deep::before,
.site--top .site-cta--deep::after{
  content:""; position:absolute; inset-inline-start:50%; translate:-50% 0;
  inline-size:130%; border-radius:50%; z-index:0; pointer-events:none;
}
.site--top .site-cta--deep::before{
  inset-block-start:0; block-size:11rem; transform:translateY(-50%);
  background:#FAF6EA;   /* 上は施工実績Row（透明）＝body のクリームが見えている */
}
.site--top .site-cta--deep::after{
  inset-block-end:0; block-size:9rem; transform:translateY(50%);
  background:#FAF6EA;   /* 下はブログのクリーム面 */
}
.site--top .cta-band__inner{ position:relative; z-index:1; }
/* CONTACT：左カラムと右ボタン列を上下中央、電話番号は大きく下線なし */
.site--top .site-cta--deep .cta-band__inner{ align-items:center; }
.site--top .site-cta--deep .site-cta__actions{ align-self:center; }
.site--top .site-cta__tel{
  display:flex; align-items:center; gap:.875rem; flex-wrap:wrap;
  margin-block:1.25rem .375rem;
}
.site--top .site-cta__tel-label{
  font-family:Outfit,sans-serif; font-weight:700; font-size:.8125rem;
  letter-spacing:.14em; color:rgba(255,255,255,.8);
}
.site--top .site-cta__tel a{
  font-family:Outfit,sans-serif; font-weight:800; font-size:clamp(2rem,3.6vw,2.75rem);
  line-height:1; color:#fff; text-decoration:none; letter-spacing:.01em;
}
.site--top .site-cta__tel a:hover{ color:#FFC42E; text-decoration:none; }
.site--top .site-cta__telnote{
  margin:0; font-size:.875rem; line-height:1.7; color:rgba(255,255,255,.82);
}
/* 装飾の白ブロブは楕円より前面に */
.site--top .cta-band::after{ z-index:0; }

/* --- ボタン：ポップに（矢印つき丸ピル） --- */
/* サイズ差でパディングがばらついて見えたので、トップ内は --lg 相当のゆったり寸法に統一。
   ヘッダーの応募ボタンだけは3行レイアウトの一部なので除外する。 */
.site--top .ui-btn:not(.site-hd-entry){ padding:1em 2.2em; font-size:var(--t-lead); }
.site--top .ui-btn{ border-radius:999px; font-weight:700; letter-spacing:.04em; }
.site--top .ui-btn--primary::after,
.site--top .site-btn-oncolor::after,
.site--top .site-btn-onphoto::after{
  content:"→"; font-family:Outfit,sans-serif; font-weight:700;
  margin-inline-start:.1em; transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.site--top .ui-btn--primary:hover::after,
.site--top .site-btn-oncolor:hover::after,
.site--top .site-btn-onphoto:hover::after{ transform:translateX(3px); }
/* ヘッダー内の応募ボタンは3行レイアウトの一部。矢印を足すと幅が動くので除外 */
.site--top .site-hd-entry::after{ content:none; }

/* --- 申し送りブロックはポップ面でも視認できる濃度に --- */
.site--top .site-todo{ border-radius:20px; }

@media (max-width:60rem){
  .site--top .site-sec[data-ghost]::before{ font-size:clamp(3.5rem,16vw,7rem); opacity:.8; }
  .site--top .site-cta--green::before{ block-size:7rem; }
  .site--top .site-cta--green::after{ block-size:6rem; }
}


/* お知らせセクション（採用案C：白いパネル1枚に全幅リスト） */
/* ============ C：白いパネル1枚に全幅リスト ============ */
.news-c{ background:transparent; padding-block:2.5rem; }
.news-c__panel{
  position:relative; overflow:hidden;
  container-type:inline-size;
  background:#fff; border-radius:32px; padding:1.75rem 2rem 1.25rem;
  box-shadow:0 12px 34px rgba(35,42,32,.09);
}
.news-c__bar{
  position:relative; z-index:1;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block-end:.75rem;
}
.news-c__label{
  margin:0; display:flex; align-items:baseline; gap:.75rem;
  font-family:"M PLUS Rounded 1c","Hiragino Sans",sans-serif; font-weight:800; font-size:1.25rem; color:#232A20;
}
.news-c__label span{
  font-family:Outfit,sans-serif; font-size:.8125rem; letter-spacing:.2em; color:#228B22;
}
.news-c__all{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:.4em; padding:.5rem 1.125rem;
  border-radius:999px; background:#228B22; border:2px solid #228B22; color:#fff;
  font-size:.8125rem; font-weight:700; text-decoration:none; white-space:nowrap;
}
.news-c__all:hover{ background:#14601A; border-color:#14601A; color:#fff; }
.news-c__list{ position:relative; z-index:1; list-style:none; margin:0; padding:0; }
.news-c__list > li + li{ border-block-start:1px dashed #E4DCC4; }
.news-c__list a{
  display:grid; grid-template-columns:6.5rem 5.5rem 1fr 1.25rem; gap:1rem;
  align-items:center; padding:.9375rem .5rem; margin-inline:-.5rem;
  border-radius:14px; text-decoration:none; color:#232A20;
  transition:background .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
.news-c__list a:hover{ background:#FAF6EA; transform:translateX(3px); }
.news-c__date{ font-family:Outfit,sans-serif; font-weight:700; color:#1B7A1B; }
.news-c__tag{
  justify-self:start; padding:.2rem .75rem; border-radius:999px;
  background:#F2EAD6; color:#14601A; font-size:.75rem; font-weight:700; white-space:nowrap;
}
.news-c__title{ font-weight:500; }
.news-c__go{ justify-self:end; color:#8CC63F; font-family:Outfit,sans-serif; font-weight:700; }
/* パテンの幅で切る（ビューポート幅だと、箱が広いのに1列化して右半分が空く） */
@container (max-width:34rem){
  .news-c__list a{ grid-template-columns:auto auto; grid-template-areas:"d t" "ti ti"; row-gap:.4rem; }
  .news-c__date{ grid-area:d; } .news-c__tag{ grid-area:t; } .news-c__title{ grid-area:ti; }
  .news-c__go{ display:none; }
}
/* ============================================================
   すっきり整理：装飾ブロブは全廃。ドットは「セクション背景全面」に、
   ベージュRowだけに敷いて“たまに入る”リズムを作る
   ============================================================ */
.site--top .pop-blob{ display:none; }
.site--top .site-row--beige{
  background-color:var(--pop-cream-d);
  background-image:radial-gradient(rgba(34,139,34,.14) 2px, transparent 2.1px);
  background-size:18px 18px;
  background-position:0 0;
}

@media (max-width:60rem){
  .news-c__panel{ padding:1.5rem 1.25rem 1rem; border-radius:24px; }
}

/* ============================================================
   A案の味つけ（コミック寄せ）※既存レイアウト・パララックス・チェキは触らない
   ============================================================ */
/* ① POINTカラウトはフキダシ画像をやめ、地なしで文言＋バッジだけ残す */
.site--top .site-balloon{
  background:none;
  border:0; border-radius:0;
  padding:0;
  color:#232A20;
  filter:none;
}
.site--top .site-balloon::after{ content:none; }
@media (max-width:40rem){
  /* 狭幅でも地は敷かない（文言＋バッジのみ） */
  .site--top .site-balloon{
    background:none; border:0; box-shadow:none; padding:0; filter:none;
  }
}
/* ② POINTテープは太フチ＋ずれ影でコマの見出しっぽく */
.site--top .site-card__tape{
  border:2.5px solid #232A20;
  box-shadow:.1875rem .1875rem 0 #232A20;
}
/* ③ 3つの魅力カードは黒フチのコマに（角丸・写真は現状のまま） */
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card{
  border:3px solid #232A20;
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85);
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:hover{
  translate:-2px -2px; box-shadow:.5rem .5rem 0 rgba(35,42,32,.85);
}
/* ④ 数字バッジは現状のまま（フチを足すと形が重くなるため見見さない） */
@media (prefers-reduced-motion: reduce){
  .site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:hover{ translate:none; }
}


/* ④（601〜904px）：数字カードは1枚目を右下がり、2枚目を左下がりに */
@media (min-width:37.5625rem) and (max-width:56.25rem){
  .site--top .stats-band__stat:nth-child(1){ --tilt:2deg; }
  .site--top .stats-band__stat:nth-child(2){ --tilt:-2deg; }
}


/* ④（601〜904px）：ブログは縦積み・左に写真／右に文章（style.css の指定を最終確定） */
@media (min-width:37.5625rem) and (max-width:56.25rem){
  .site--top .blog-teaser__grid{ grid-template-columns:1fr; gap:.875rem; }
  .site--top .blog-teaser__card > a{
    display:grid; grid-template-columns:12rem minmax(0,1fr);
    column-gap:1.25rem; row-gap:.375rem; align-items:center;
  }
  .site--top .blog-teaser__thumb{ grid-column:1; grid-row:1 / span 2; margin:0; }
  .site--top .blog-teaser__meta{ grid-column:2; grid-row:1; align-self:end; }
  .site--top .blog-teaser__title{ grid-column:2; grid-row:2; align-self:start; }
}


/* ④（601〜904px）：3つの魅力は縦積み・左に写真／右に文章（上下中央）
   ※ top-pop.css 側に置くことで無条件ルール（display:flex / 5:4）に確実に勝たせる */
@media (min-width:37.5625rem) and (max-width:56.25rem){
  .site--top [aria-labelledby="sec-why"] .site-cards--3{
    grid-template-columns:1fr; gap:1.125rem;
  }
  .site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card{
    display:grid; grid-template-columns:13rem minmax(0,1fr);
    column-gap:1.25rem; row-gap:.375rem; align-items:center;
    padding:1.25rem 1.5rem;
  }
  .site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card .site-photo__frame{
    grid-column:1; grid-row:1 / span 2; margin:0; aspect-ratio:4 / 3;
  }
  .site--top [aria-labelledby="sec-why"] .site-cards--3 .site-card__title{
    grid-column:2; grid-row:1; white-space:normal; font-size:1.0625rem;
    align-self:end; text-align:start; margin-block-end:0;
  }
  .site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card > p{
    grid-column:2; grid-row:2; font-size:.875rem; line-height:1.85;
    align-self:start; text-align:start;
  }
}


/* ④（601〜904px）：WORK STYLE の POINT は2行に収める／MESSAGE の写真比率を上げる */
@media (min-width:37.5625rem) and (max-width:56.25rem){
  .site--top .site-sec:has(#sec-workstyle) .site-balloon{ gap:1rem; }
  .site--top .site-sec:has(#sec-workstyle) .site-balloon__label{
    inline-size:3.5rem; block-size:3.5rem; font-size:.6875rem;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-balloon__text{
    font-size:1.0625rem; line-height:1.7; letter-spacing:.02em;
  }
  .site--top .site-sec__body--message{
    grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  }
  .site--top .site-sec__body--message .site-photo__frame{ aspect-ratio:4 / 3; }
}


/* ③（〜600px）調整 */
@media (max-width:37.5rem){
  /* お知らせ：日付とカテゴリを隣同士に（gridの列幅がタイトルに引っ張られるのでflexへ） */
  .site--top .news-c__list a{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:.375rem .625rem;
  }
  .site--top .news-c__date{ flex:none; }
  .site--top .news-c__tag{ flex:none; }
  .site--top .news-c__title{ flex:1 1 100%; }

  /* WORK STYLE：POINTバッジと文章は横並び、文章は2行で収める */
  .site--top .site-sec:has(#sec-workstyle) .site-balloon{
    display:flex; flex-direction:row; align-items:center; gap:.875rem;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-balloon__label{
    inline-size:3.25rem; block-size:3.25rem; font-size:.625rem;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-balloon__text{
    flex:1 1 auto; min-inline-size:0;
    font-size:clamp(1.0625rem,3.4vw,1.25rem); line-height:1.7; letter-spacing:0;
  }

  /* 勤務条件の表：枠は1つにまとめてコンパクトに */
  .site--top .site-table{
    display:block; background:#fff; border:2px solid rgba(35,42,32,.18);
    border-radius:14px; overflow:hidden;
  }
  .site--top .site-table tbody,
  .site--top .site-table tr{ display:block; }
  .site--top .site-table tr + tr{ border-block-start:1px solid rgba(35,42,32,.12); }
  .site--top .site-table th,
  .site--top .site-table td{
    display:block; background:none; border:0; border-radius:0;
    padding:.5rem .875rem; font-size:.8125rem; line-height:1.6;
  }
  .site--top .site-table th{
    padding-block-end:0; padding-inline-start:.875rem; color:#14601A; font-size:.75rem;
  }

  /* OUR WORK：小窓を右上へ逃がして本文と重ならないように */
  .site--top .site-photo--stacked .site-photo__inset{
    inset-block-end:auto; inset-block-start:-.25rem;
    inset-inline-end:-.5rem; inline-size:42%;
  }
}


/* ①②③帯（〜600px）：数字で見る五常は2＋2 */
@media (max-width:37.5rem){
  .site--top .stats-band__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .site--top .stats-band__stat{
    margin-block-start:0 !important; min-block-size:9.5rem;
    padding:1.25rem 1rem;
  }
  .site--top .stats-band__num{ font-size:clamp(1.5rem,6.6vw,2.5rem); }
  .site--top .stats-band__stat:nth-child(3) .stats-band__num,
  .site--top .stats-band__stat:nth-child(4) .stats-band__num{ font-size:clamp(2rem,8.5vw,3rem); }
  .site--top .stats-band__unit{ font-size:clamp(.625rem,2.4vw,.8125rem); }
  .site--top .stats-band__label{ font-size:.6875rem; line-height:1.55; }
  .site--top .stats-band__value{ flex-wrap:nowrap; gap:.25em; }
}


/* 2枚目の数字：左に 15:00／右に「〜」「16:00」の2段カラム。両者を上下中央で揃える */
.site--top .stats-band__stat:nth-child(2) .stats-band__value{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:.35em; flex-wrap:nowrap;
}
.site--top .stats-band__unit--stack{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.15; text-align:center; white-space:nowrap;
}


/* ①②幅（〜430px）：お知らせの「一覧を見る」はリストの下へ */
@media (max-width:26.875rem){
  .site--top .news-c__panel{ display:flex; flex-direction:column; gap:.75rem; }
  .site--top .news-c__bar{ display:contents; }
  .site--top .news-c__label{ order:1; }
  .site--top .news-c__list{ order:2; margin:0; }
  .site--top .news-c__all{
    order:3; align-self:flex-start;
    display:inline-flex; align-items:center; gap:.25rem;
  }
}


/* ②以下（〜430px）：ボタン文字が2行になっていたので1行に収める */
@media (max-width:26.875rem){
  .site--top .ui-btn{
    font-size:1rem; letter-spacing:0;
    padding-inline:1.25rem;
    white-space:nowrap;
  }
  .site--top .ui-btn--lg{ font-size:1.0625rem; }
}


/* ①幅（〜360px）：数字で見る五常は縦積み／POINTの文章は2行に収める */
@media (max-width:22.5rem){
  .site--top .stats-band__grid{ grid-template-columns:1fr; gap:.875rem; }
  .site--top .stats-band__stat{ min-block-size:0; padding:1.125rem 1.25rem; }
  .site--top .stats-band__num{ font-size:2rem; }
  .site--top .stats-band__stat:nth-child(3) .stats-band__num,
  .site--top .stats-band__stat:nth-child(4) .stats-band__num{ font-size:2.25rem; }
  .site--top .stats-band__label{ font-size:.75rem; line-height:1.65; }

  /* POINT：バッジを小さくして本文の行長を稼ぎ、文字サイズは維持したまま2行に */
  .site--top .site-sec:has(#sec-workstyle) .site-balloon{ gap:.625rem; }
  .site--top .site-sec:has(#sec-workstyle) .site-balloon__label{
    inline-size:2.5rem; block-size:2.5rem; font-size:.5625rem; letter-spacing:.04em;
  }
  .site--top .site-sec:has(#sec-workstyle) .site-balloon__text{
    font-size:.9375rem; line-height:1.6; letter-spacing:-.01em;
  }
  /* 強調の「日給は1日分」が1.35emで2行目からはみ出していたので詰める */
  .site--top .site-sec:has(#sec-workstyle) .site-balloon__text b{
    font-size:1.12em; letter-spacing:-.01em;
  }
}


/* ============================================================
   リンク先を持たないカードのホバー演出を無効化
   「数字で見る五常」「五常で働く3つの魅力」はクリックできないため、
   浮き上がり・影の変化・傾き戻しをすべて止める（見た目は静止時のまま）。
   ============================================================ */
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:hover{
  transform:none !important;
  translate:none !important;
  rotate:var(--tilt, inherit);
  cursor:default;
}
/* 数字カードは常時ふわふわ（statBlobFloat が translate を使う）ので
   !important で打ち消すと「ホバーで動きが止まる」＝別のホバー演出になる。
   通常宣言のみで戻し、アニメーションを勝たせ続ける。 */
.site--top .stats-band__stat:hover{
  transform:none; translate:0 0; rotate:var(--tilt);
  box-shadow:.4375rem .4375rem 0 var(--ink);
  cursor:default;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:hover{
  box-shadow:.375rem .375rem 0 rgba(35,42,32,.85) !important;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(1){ --tilt:-1.6deg; }
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(2){ --tilt:1.2deg; }
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(3){ --tilt:-.8deg; }
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:hover{ rotate:var(--tilt); }
@media (max-width:48rem){
  .site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card:nth-child(n):hover{ rotate:0deg !important; }
}


/* ============================================================
   本文の最小サイズ16px（style.css の指定より後に読み込まれるため
   ここで上書きする）／装飾ラベルは14pxを下限
   ============================================================ */
.site--top .stats-band__label,
.site--top .site-cta__telnote,
.site--top .blog-teaser__date,
.site--top .site-sec:has(#sec-workstyle) .site-balloon__text,
.site--top [aria-labelledby="sec-why"] .site-cards--3 .site-card__title,
.site--top [aria-labelledby="sec-why"] .site-cards--3 > .site-card > p,
.site--top .site-table th,
.site--top .site-table td,
.news-c__all,
.news-c__title{
  font-size:1rem;
}
.site--top [aria-labelledby="sec-why"] .site-cards--3 .site-card__title{ white-space:normal; }
.site--top .site-card__tape,
.site-card__tape,
.news-c__tag,
.site--top .blog-teaser__cat,
.news-c__label span,
.site--top .site-cta__tel-label{
  font-size:.875rem;
}
.site--top .site-balloon__label,
.site--top .site-sec:has(#sec-workstyle) .site-balloon__label{ font-size:.8125rem; }


/* 本文の最小16px：パンくず・タブレット幅のドロップダウン項目名 */
.p-breadcrumb__inner,
.p-breadcrumb__item{ font-size:1rem; }
@media (max-width:1023px){
  .ui-mega-panel__grid b,
  .ui-mega-panel__grid span{ font-size:1rem; }
}


/* 透過PNGのイラストのスロットは枠のグレー地を消す */
image-slot[fit="contain"]{ --slot-frame-bg:transparent; }


/* ============================================================
   レスポンシブ確認（全16ページ×6幅）で残っていた小さい文字の底上げ
   ・日本語の読ませる文字は16px以上
   ・欧文ラベル／タグ／テープ／バッジなど装飾は14pxを下限
   ============================================================ */
.site-header-menubar__brand-sub,
.site-header-menubar__drawer-lead,
.site-header-menubar__contact-lead,
.site-fv__label,
.site-fv__sub,
.site-form__hint,
.news-c__all,
.site-foot-info__tel-note{
  font-size:1rem;
}
.site-header-menubar__drawer-lead span,
.site-header-menubar__contact-note,
.site-fv__badge,
.site-form__req,
.site-form__opt,
.site-eyebrow,
.cta-band__sub,
.stats-band__eyebrow,
.gojo-five__note,
.salary-step__month em,
.site-table em{
  font-size:.875rem;
}
@media (max-width:23.4375rem){
  .site-fv__label,
  .site-fv__sub{ font-size:1rem; }
  .site-fv__badge{ font-size:.875rem; }
}


/* FVの文字：.site-fv--collage 付きの既存指定に勝つよう同じ詳細度で16px以上に */
.site-fv--collage .site-fv__label,
.site-fv--collage .site-fv__sub{ font-size:1rem; }
.site-fv--collage .site-fv__badge{ font-size:.875rem; }
@media (max-width:56.25rem){
  .site-fv--collage .site-fv__label,
  .site-fv--collage .site-fv__sub{ font-size:1rem; }
  .site-fv--collage .site-fv__badge{ font-size:.875rem; }
}
@media (max-width:22.5rem){
  .site-fv--collage .site-fv__label,
  .site-fv--collage .site-fv__sub{ font-size:1rem; }
  .site-fv--collage .site-fv__badge{ font-size:.875rem; }
}


/* ============================================================
   本文の折り返しを横幅いっぱいに戻す
   ------------------------------------------------------------
   行末孤立を避けるため本文に text-wrap:pretty を当てていたが、
   Safari（iOS）の pretty は段落全体を組み直して各行を短くするため、
   iPhone では行末が大きく余って不揃いに見えていた
   （Chrome は最終行の孤立だけを直すので差が出なかった）。
   本文は既定の折り返しに戻し、見出しの pretty だけ残す。
   ============================================================ */
p, li, dd, td,
figcaption,
.site-sec__text p,
.stats-band__label,
.site-card__meta,
.site-photo__desc,
.reason-zig__body p,
.day-item__body p,
.growth-item__body p,
.why-card p,
.benefit-card p,
.env-item p,
.myth-truth__text,
.site-faq__a p,
.exp-card p,
.staff-qa__field,
.site-blogcard__excerpt{
  text-wrap:wrap;
}


/* ============================================================
   text-wrap の一律解除（iOS Safari 対応）
   ------------------------------------------------------------
   pretty / balance を使っている箇所すべてを既定の折り返しに戻す。
   iOS Safari の pretty・balance は段落全体を組み直して各行を短くするため、
   本文・見出し・カード内テキストの行末が大きく余って不揃いに見えていた。
   ============================================================ */
p, li, dd, td, figcaption,
h1, h2, h3, h4,
.ui-heading, .site-h2, .cta-band__title, .stats-band__lead, .stats-band__label,
.site-cta .site-h2,
.site-photo__desc, .site-fv__phtag, .site-card__meta,
.site-step__title, .site-card__title,
.site-faq__q, .site-blogcard__title, .blog-card__title,
.myth-ask__bubble, .site-emph-lead, .reason-zig__title,
.num-rows__title, .exp-ask, .notice-band, .lead-emphasis,
.site-fv--collage .site-fv__sub,
.site--top .blog-teaser__title,
.exp-card p{
  text-wrap:wrap;
}


/* ============================================================
   登場アニメーションの CSS 側フェイルセーフ
   ------------------------------------------------------------
   JS の表示判定（IntersectionObserver）が発火しない端末で
   opacity:0 のまま空白になる事故を、CSS だけで必ず解除する。
   3秒後に可視化するアニメーションを初期状態に仕込み、
   通常どおり is-in が付いた要素は animPop が上書きする。
   ============================================================ */
/* keyframes + animation-fill-mode は、端末側でアニメーションのタイムラインが
   進まない状況（iOS Safari の省電力・履歴復帰など）だと opacity:0 のまま
   固まり、セクションが永久に空白になる。最終状態は素の宣言で持たせ、
   動きは transition に任せる（transition が動かなくても必ず可視になる）。 */
.anim-ready .anim-armed:not(.anim-rise):not(.gojo-five__item),
.anim-ready :is([data-reveal], .site-card, .why-card, .benefit-card,
  .entry-flow__item, .exp-ask, .about-history__item, .day-item, .site-photo):not(.stats-band, .stats-band *):not(.anim-rise):not(.gojo-five__item){
  animation:none;
  opacity:0; translate:0 24px; scale:.96;
  /* opacity は transition に載せない。端末側でトランジションのタイムラインが
     進まない場合でも、is-in が付いた瞬間に必ず不透明になるようにする。
     動き（浮き上がり・拡大）だけを transition で表現する。 */
  transition:translate .6s cubic-bezier(.34,1.56,.64,1) var(--anim-delay,0s),
             scale .6s cubic-bezier(.34,1.56,.64,1) var(--anim-delay,0s);
}
.anim-ready .anim-armed:not(.anim-rise):not(.gojo-five__item).is-in,
.anim-ready :is([data-reveal], .site-card, .why-card, .benefit-card,
  .entry-flow__item, .exp-ask, .about-history__item, .day-item, .site-photo):not(.stats-band, .stats-band *):not(.anim-rise):not(.gojo-five__item).is-in{
  animation:none;
  opacity:1; translate:none; scale:none;
}


/* ============================================================
   端末の横幅に必ず収める（横に伸びて右が切れるのを根本で止める）
   ------------------------------------------------------------
   grid / flex の子要素は既定で min-width:auto のため、
   分割できない日本語（見出しの word-break:keep-all など）があると
   トラックが最小コンテンツ幅まで広がり、画面幅を超えて右側が切れる。
   版面内のすべての子要素で縮小を許可し、画像・表も幅上限を持たせる。
   ============================================================ */
.site-sec *,
.site-row *,
.cta-band *{ min-inline-size:0; min-block-size:0; }
.why-cards, .why-card,
.site-cards, .site-card,
.benefit-cards, .benefit-card,
.exp-cards, .exp-card,
.site-steps, .site-step,
.staff-card, .staff-card__media,
.num-rows, .num-rows__item,
.day-timeline, .day-item,
.growth-timeline, .growth-item,
.reasons-zig, .reason-zig{ min-inline-size:0; max-inline-size:100%; }
.site-sec img,
.site-sec table{ max-inline-size:100%; }
.why-card > *,
.site-card > *,
.benefit-card > *,
.exp-card > *{ min-inline-size:0; max-inline-size:100%; }

/* スマホ幅：雰囲気カードは1列にして全幅で読ませる */
@media (max-width:47.5rem){
  .why-cards{ grid-template-columns:minmax(0,1fr); }
}


/* ===== 20d_page-inline.css ===== */
/* ============================================================
   20d_page-inline.css — 受領16ページの ＜head＞ に入っていたインライン style（全ページ同一）を
   そのまま移したもの。写真枠（.ph-wrap/.ph-img/.ph-empty）と最小幅の指定で、
   これが無いと全ページの写真が潰れる。読み込み順は style.css 群の後（受領と同じ）。
   ============================================================ */
/* 写真枠と横幅の最小指定は HTML 内に持たせる（外部CSSの状態に依存させない） */
.ph-wrap{position:relative;display:block;overflow:hidden}
.ph-wrap>.ph-img{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;min-inline-size:0;min-block-size:0;translate:none;rotate:none;scale:none;transform:none;margin:0;padding:0;border:0;object-fit:cover;object-position:center}
.ph-wrap>.ph-img--contain{object-fit:contain}
.ph-empty{position:relative;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#EFE9D8 0 12px,#E7E0CC 12px 24px);color:#7A8272;font-size:.875rem;letter-spacing:.08em}
.site-sec *,.site-row *,.cta-band *{min-inline-size:0}
.why-cards,.why-card,.site-cards,.site-card,.benefit-cards,.benefit-card,.exp-cards,.exp-card,.site-steps,.site-step,.num-rows__item,.day-item,.growth-item,.reason-zig{min-inline-size:0;max-inline-size:100%}
@media (max-width:47.5rem){.why-cards{grid-template-columns:minmax(0,1fr)}}


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

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

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

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

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

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

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

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

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


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

  /* --- フォント（site.css の :root に定義があればそれを使用） ---
     KEEP: ★既定を明朝にしない（2026-08-31 ディレクター判断）。旧既定は display と numeric が
     `"Noto Serif JP","Yu Mincho",serif` / `"EB Garamond","Noto Serif JP",serif` ＝**明朝**で、
     案件が `--font-*` を渡し忘れると**動的ページ（ブログ・施工実績）だけが明朝で出る**。
     実測 S00757 スマイルカミオン: 記事タイトル・抜粋・タグ（display）7要素＋20要素、日付（numeric）各4要素が明朝になり、
     ディレクター指摘「ブログページに明朝が活用されていますが、サイト全体のフォントで統一してください」を受けた。
     ★渡し忘れは"案件のミス"だが、**気づけるのが公開直前の目視だけ**で、静的ページを見ている限り絶対に露見しない。
     ＝**既定が事故を作っていた**ので、既定側を直す。方針は「今後進める案件がサイトに使用しているフォントで
     反映される仕様にする」（ディレクター 2026-08-31）。
     ★意図して明朝にしたい案件は、これまでどおり `--font-display` 等を渡せばそのまま効く（機構は不変）。
     ★numeric は日付・英字ラベル用なので、和文本文より英字の顔が合う。sans を既定にしつつ英字を先頭へ置く。
     ★既存の納品済み案件は影響を受けない（納品CSSは書き出し時にベイク済みで、再エクスポートしない限り変わらない）。 */
  --dyn-font-display: var(--font-display, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif);
  --dyn-font-numeric: var(--font-numeric, "Helvetica Neue",Arial,"Noto Sans JP",sans-serif);
  /* /KEEP */

  /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 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件目以降の左に縦罫線）※R-27対応（2026-08-26）
   旧実装は `::before` の content 宣言（文字リテラル "›"）で区切りを描いていたが、AddCssInfo は
   疑似要素の content 宣言をサニタイズで落とすため、実機では区切りが消えて
   「ホーム私たちの歴史」のように語が詰まっていた。
   ★実要素（＜span＞）へ昇格させず「content を使わない罫線」で代替した理由:
     パンくずの運用第一候補は「CueZilla がページ階層から自動描画するパンくずパーツ」で、
     その markup に区切り用の要素を挿す手段が無い。templates/breadcrumb.html（明示設置版）だけ
     直しても自動描画側は直らないので、両経路に1本のCSSで効く手段を採った。
     border / padding はサニタイズ後も残る（R-27「残る」側）。
   ★物理プロパティ（border-left）で書く理由: サニタイズのホワイトリストに論理プロパティが
     載っていない可能性を避ける。和文サイトは横書きLTR固定なので意味は同じ。 */
.p-breadcrumb__item + .p-breadcrumb__item{
  margin-left:.7em; padding-left:.7em;
  border-left:1px solid var(--dyn-border) !important;
}
.p-breadcrumb meta{ display:none; }   /* schema.org の ＜meta itemprop="position"＞ は非表示 */


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


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

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


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

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


/* ============================================================
   §4-b  ブログ枠パーツ（parts131415_blog 系）＝ 内側でBootstrapが生きている型
   ------------------------------------------------------------
   §4 は parts222/225/228 の `_post_list` / `_post_wrap` 接尾辞を前提にしている。
   parts131415_blog 系は接尾辞が違い（`.row.row-cols-lg-3 > .col > .card`）、§4のセレクタが
   **1つも届かない**。そのため案件ごとに同じCSSを書き直す状態になっていた。
   教訓: 70_運用ルール/デザイン教訓/cms-part-bootstrap-grid-collapses-cards.md
         70_運用ルール/デザイン教訓/cms-part-heading-typography-override.md
   （承認: 2026-09-01「A・B・C ＋ I ＋ G/H（受領チェック1項目）」）

   (a) カードが列幅のさらに1/3に潰れる（独立3案件で真因一致: S02150・O01540・S00459）
       パーツが吐く `.row.row-cols-1.row-cols-sm-2.row-cols-lg-3` は Bootstrap の
       `.row-cols-lg-3 > *{flex:0 0 auto; width:33.3333%}` が生きたまま。案件側で `.row` を
       grid 化しても **grid の子に残った width:33.3333% が「列幅の33.3%」として再び効く**ため、
       341px の列の中でカードが 114px（サムネイル 52px）まで潰れる（実測 S02150 2026-08-25）。
       ★崩れるのは実機だけで、受領データを単体で開くと正常に見える＝**受領物を見ている限り
         絶対に気づけない**。だから案件ごとの気づきに任せず skin の既定にする。
       → §4 の `_post_list` と同じ扱い（auto-fill グリッド＋子の幅指定を落とす）を対にして当てる。
         **grid 化と子の無効化は必ずセット**。片方だけだと、grid 化なしで幅を落とせば1列に伸び、
         幅を落とさず grid 化すれば上記の 1/3 潰れが起きる。
       ★施工実績枠には当たらない。あちらは `.content.d-flex`（`.row` を持たない）で、
         flex の子に幅を当てると3枚が横にあふれる。クラス名では枠を判別できない
         （CMSが `parts131415_blog_DKhwGnz7DM` のように乱数の接尾辞を付け、作り直すと変わる）ため、
         **`.row` を持つか＝中身で分岐している**。 */
[class*="parts131415_blog"] .row{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important;
  gap:var(--dyn-gap) !important;
}
[class*="parts131415_blog"] .row > *{
  width:auto !important; max-width:none !important; min-width:0 !important;
  flex:none !important; margin:0 !important; padding:0 !important;
}

/* (b) パーツ見出しがCMS既定の書体・色のまま出てブランドタイポから浮く（独立2案件: S00459・S01926）
       レイアウト（配置・カラム）は案件CSSで整えられる一方、**パーツ自身が生成する見出し要素の
       書体・色はパーツ内部に付いているため見落とされやすい**。結果「配置は整っているのに見出しだけ
       フォントが違う・色が違う」という部分的な浮きが残る。
       実測: S00459 `.design-parts-11 .parts-title` が色 #0E6FB8 のまま／
             S01926 `.parts131415_blog_title_wrap .title` が明朝のまま（一度PC幅だけ直して
             「全端末で適用」と差し戻された＝BP単位の個別対応では同じ穴が別BPで再発する）。
       → §4 の `_post_title` / §5 の `_sidebar_post_title` と同じ扱いで、**書体と色だけ**を寄せる。
       ★サイズ・寄せは案件ごとのデザイン判断なので skin では触らない（§4の既存方針と同じ）。
         そちらは 30_コード生成/AI生成指示書_CueZilla.md 側の手順で担保する。
       ★全BP共通で当たる（メディアクエリの外に置いてある）。
       ★実測で確認できた2クラスだけに絞ってある。`.card-title` / `.card-text` は当てていない
         （O01540 では `.card-title` が「濃緑地に白文字のチップ」＝見出しではなくラベルとして
         使われており、`--dyn-heading` を当てると読めなくなる）。パーツが増えたら実機で確認して追記する。 */
[class*="_blog_title_wrap"] .title,
[class*="design-parts-"] .parts-title{
  font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important;
}


/* ============================================================
   §4-c  テーマが一覧サムネに掛ける「固定の高さ」を打ち消す（番号非依存）
   ------------------------------------------------------------
   ★§4 の意図が theme_default に**黙って負けていた**のを直すぶん（2026-09-11 実測）。

   何が起きていたか:
     §4 は `[class*="_post_img"]{ aspect-ratio:16/10 }` でサムネを等寸化する設計だが、
     theme_default は `.parts228_post_wrap .parts228_post_img{ height:240px }` と
     `… img{ max-height:240px }` を持つ。**セレクタの詳細度は テーマ(0,2,0) > skin(0,1,0)** なので、
     skin の aspect-ratio は計算に使われず**常にテーマの240pxで確定**していた。
     実測（local-sandbox・theme+skin のみ・案件CSS無し）:
       打ち消し前: .parts228_post_img の computed height = 240px（aspect-ratio:16/10 は設定されているのに無効）
       打ち消し後: 233px（＝列幅375px ÷ 1.6）＝**skin 自身の設計どおりになる**
     ＝「skin を採用しているのにサムネだけテーマの寸法」という状態で、案件側は毎回
     `.parts228_post_wrap .parts228_post_img img{ max-height:unset; height:200px }` を手で書いていた
     （実測: 収穫ログで4案件が同じ規則を貼っていた。機械化台帳 B1）。

   線引き（§4 の既存方針と同じ。ここを広げないこと）:
     ・**打ち消すだけ**＝テーマが持ち込む固定値を外して §4 の aspect-ratio に戻す。
     ・**寸法の具体値と色は入れない**。案件が貼っていた `height:200px` `margin-bottom:45px`
       `background:#FFFFFF` は**デザイン判断**なので案件CSSに残す（値は案件ごとに違う）。

   ★入れなかったもの（実測して落とした・同じ検討を繰り返さないため）:
     `[class*="_sidebar"]{ max-width:none !important }`（案件が4件で手貼りしていた規則）は
     **skin に入れてはいけない**。theme_default は `.parts222_sidebar{ max-width:28.179%; width:100% }`
     と対で持っており、max-width だけ外すと width:100% が生きて**2カラムが崩れる**。
     実測（local-sandbox）: main 780px + sidebar 333px → **main 590px + sidebar 590px**。
     サイドバー幅は案件ごとのレイアウト判断なので、案件CSSで width とセットで指定すること。
   ============================================================ */
[class*="_post_wrap"] [class*="_post_img"]{ height:auto !important; }          /* テーマの height:240px を外し §4 の aspect-ratio に戻す */
[class*="_post_wrap"] [class*="_post_img"] img{ max-height:none !important; }  /* 同 max-height:240px の頭打ちを外す（§4 の height:100% を効かせる） */



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


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


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

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


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


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

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


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


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


/* ============================================================
   §10  プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版）
   ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される
   ============================================================ */
.privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; }
.privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); }
.privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; }
.privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; }
.privacy-item{ margin-bottom:32px; }
.privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; }
.privacy-item__body{ color:var(--dyn-text); }
/* 原文の (1)(2)… 表記は【HTML側のテキスト】で持つ ※R-27対応（2026-08-26）
   旧実装は `li::before` の content 宣言（`counter(pp)` を括弧で挟む）で番号を描いていたが、AddCssInfo は
   content 宣言をサニタイズで落とす（counter() は content 専用なのでCSS単独の代替が無い）。実機では番号が消えたうえに
   下のぶら下げインデントだけが残り、本文が左へはみ出していた。
   ★番号を捨てず HTML テキストへ移した理由: 本文が「上記(1)から(6)に掲げるほか」と番号を参照しており、
     番号は装飾ではなく文書の一部（消すと文意が壊れる）。会社承認の定型文なので表記も変えられない。
     → templates/privacy-policy.html の各 ＜li＞ 先頭に "(1) " 等を直接書く形へ変更した。
   ★ぶら下げインデント（padding-left / text-indent）は残す: 番号が行頭テキストになった今も、
     折り返し行を本文位置に揃えるために必要（＝この2行が番号の受け皿）。
     番号を持たない古い privacy HTML に当たると字下げだけが見えるので、その場合はCSSではなく
     HTML側に番号を入れて直す。counter-reset / counter-increment は用が無くなったので外した。 */
.privacy-item__list{ list-style:none; margin:8px 0; padding:0; }
.privacy-item__list li{ padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }


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


/* ===== 20f_override.css ===== */
/* ============================================================
   40_override.css — S01664 株式会社五常 / 案件追補（結合の最後に入る）
   共通資産 cuezilla-skin.css は編集しない（R-30）。案件固有の打ち消しだけここに書く。
   ============================================================ */

/* R-10a: 受領コードは CueZilla と同じ class 名でパンくずを埋めていたため、
   納品側を site-breadcrumb に改名した。自動描画側はこれで隠して1本にする。
   装飾は .p-breadcrumb / .c-breadcrumb が担うので見た目は変わらない。 */
.parts231_breadcrumb{ display:none !important; }

/* CueZillaパーツ（施工実績・ブログ・フォーム）の直後に置く「続きブロック」は上余白を詰める。
   受領デザインでは同じセクションの続きなので、ブロック分割ぶんの余白を足さない。 */
.site-row--after-parts{ padding-block-start:0; }

/* ページ地。受領のトップは地色がクリームで、CueZillaのブロック間余白がそのまま
   ページ地として見えるため、白抜けしないよう body 側を合わせる。
   ★実機で下層ページの余白色も確認すること（1行で戻せる）。 */
body{ background:#fff!important; }
.p-breadcrumb{background:#FAF6EA!important;}

.contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"],.site-row--after-parts{
        background-color: #F2EAD6!important;
    background-image: radial-gradient(rgba(34, 139, 34, .14) 2px, transparent 2.1px)!important;
    background-size: 18px 18px!important;
}
.parts219_section_form dl,.parts213_section_form dl{
        display: block!important;
}
.parts219_section_form dd,.parts213_section_form dd{
        margin-left: 0px!important;
}
.p-breadcrumb__item + .p-breadcrumb__item{
        border-left: none!important;
}
html, body{
  height: auto;
  min-height: 100%;
}
.site-btn-oncolor:hover{
    color: #000!important;
}

/* ============================================================
   S01664 株式会社五常 — 20f_override.css への【追記】
   ------------------------------------------------------------
   ★このファイルの中身を 20f_override.css の末尾にそのまま貼る。
     （結合順が …→ style.css → cuezilla-skin.css →【override.css】なので
       ここに書いた指定が最後に効く。共通資産 cuezilla-skin.css は触らない＝R-30）
 
   ■ 直している不具合
     1026〜1560px でヘッダーの中身（電話番号・応募／お問い合わせボタン）が
     版面の外へ最大 210px はみ出し、html{overflow-x:clip} に切られて画面外で消えていた。
 
     実測（/faq・Chrome）:
       1026px → +171px はみ出し   1100px → +97px
       1200px →  ±0（＝1024〜1200の圧縮指定でギリギリ収まっていた）
       1280px → +123px   1400px → +63px   1500px → +13px   1560px 以上 → 収まる
 
     真因は2つ重なっている:
       (a) ヘッダーが brand(283px) + ナビ(687px) + 連絡先(304px) + gap56px = 1330px 必要なのに、
           .l-center の版面は 1120px しかない。1561px 以上では版面の外（左右の余白）へ
           こぼれても画面内に収まるので露見しなかっただけ。
       (b) ★ファイル末尾の「本文の最小サイズを16pxに統一」ブロックが、
           1024〜1200px 用に書いた圧縮指定を**丸ごと打ち消していた**。
           メディアクエリは詳細度を上げないので、同詳細度なら後ろに書いた方が勝つ:
             .site-header-menubar__menu-list > li > a{font-size:1rem}   ← 16px統一ブロック（後）
             @media(1024-1200){ 同セレクタ {font-size:.8125rem} }        ← 圧縮指定（前）＝負ける
           ロゴ(2.125rem→2.75rem)・副題・TEL・応募ボタンも同様に戻されていた。
           ＝「圧縮したつもりで実際は圧縮されていない」状態。
 
   ■ 採った対処（2026-09 指示: 1400px 以下はハンバーガー）
     ヘッダーの PC/SP 切替を 1024px → 1400px に引き上げる。
     文字サイズには一切手を触れないので「本文16px以上」方針はそのまま保てる。
     切替の実体は @media(max-width:1023px) 群なので、同じ内容を
     @media(max-width:1399.98px) で当て直し、1024〜1399.98px に残る PC 用指定
     （.ui-subnav の絶対配置・白カード／メガパネル＝共有語彙の min-width:60rem 側）を打ち消す。
 
   ■ 検証（Chrome 実測・/faq を 900px のドロワーと算出値で突き合わせ）
     1200px / 1399px のヘッダー計算値は 900px のドロワーと一致（差分はビューポート幅由来の
     auto マージンのみ）。1400px で元の横並びナビへ戻ることも確認済み。
   ============================================================ */
 
/* ── ヘッダーのドロワー切替を 1400px 未満へ拡張 ───────────────── */
@media (max-width:1399.98px){
 
  /* 上段：ロゴ左・バーガー右の1行に */
  .site-header-menubar__burger{ display:flex; order:9; margin-inline-start:auto; flex:none; }
  .site-header-menubar__top{
    min-height:0; gap:1rem; justify-content:space-between; flex-wrap:nowrap; padding-block:.5rem;
  }
  .site-header-menubar__brand{ margin-inline-end:auto; gap:.25rem; }
  .site-header-menubar__contact{ display:none; }   /* 連絡先はドロワー末尾に再掲される */
 
  /* 下段メニュー → 右スライドインの全高ドロワー */
  .site-header-menubar__menu{
    position:fixed; inset:0 0 0 auto; z-index:400;
    width:min(84vw, 22rem);
    padding:4.5rem 0 calc(clamp(2rem,1.917rem + 0.370vw,2.25rem) * 1.1);
    background:#14601A;
    box-shadow:0 24px 64px rgb(0 0 0 / .16);
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
    margin-inline:0;      /* 1024-1200帯の margin-inline:auto を戻す */
    flex:none;
  }
  .site-header-menubar__menu-list{
    flex-direction:column; max-width:none; width:100%; align-items:stretch; margin:0;
  }
  .site-header-menubar__menu-list > li{
    flex:none; inline-size:100%;
    border-inline:0;
    border-block-end:1px solid color-mix(in srgb, currentColor 25%, transparent);
  }
  .site-header-menubar__menu-list > li:last-child{ border-inline-end:0; }
 
  /* 共有語彙 .ui-subnav の PC 切替は 60rem 固定なので、ここで表示を揃える */
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav-trigger{ display:none; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav-summary{ display:flex; }
 
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{
    display:flex; align-items:center; justify-content:center;
    inline-size:100%; text-align:center; position:relative;
    padding-block:1rem; padding-inline:1rem;
    font-size:1.0625rem; font-weight:800; letter-spacing:.04em;
    background-image:none;
  }
  .site-header-menubar__menu-list > li > .ui-subnav-summary .ui-subnav-summary__chev{
    position:absolute; inset-inline-end:1.25rem; inset-block-start:50%; margin-block-start:-.35rem;
  }
  .ui-subnav-summary__chev{ transition:rotate .28s cubic-bezier(.22,1,.36,1); }
 
  /* サブメニュー：PC の絶対配置・白カード・メガパネル体裁を打ち消してアコーディオンに。
     ★ここが 1024〜1399.98px で新しく必要になる部分（60rem＝960px 以上の指定が残るため）。
       ついでに従来から潜在していた 960〜1023px の同じ取りこぼしも直る。 */
  .site-header-menubar__menu-list > li.ui-subnav-host{ position:relative; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav,
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega{
    position:static; inset:auto;
    display:grid; grid-template-rows:0fr;
    min-inline-size:0; padding:0;
    background:transparent; border:0; border-radius:0; box-shadow:none;
    opacity:0; visibility:visible; pointer-events:auto; overflow:hidden;
    transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .24s ease;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host:has(> .ui-subnav-toggle:checked) > .ui-subnav{
    grid-template-rows:1fr; opacity:1;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav > *{ min-block-size:0; overflow:hidden; }
 
  .ui-mega-panel__head{ display:none; }
  .ui-subnav--mega .ui-mega-panel{ display:block; padding:0; gap:0; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid,
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav--mega .ui-mega-panel__grid--1col{
    display:flex; flex-direction:column; grid-template-columns:none;
    margin:0; padding:0; list-style:none; align-items:stretch;
  }
  /* ★詳細度は PC 側（0,4,3）と同じにして「後ろに書いた方が勝つ」形にする。
     これを (0,2,2) で書くと文字色が #232A20 のままになり、濃緑のドロワーで読めない。 */
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-mega-panel__grid > li > a,
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    inline-size:100%; text-align:center;
    padding-block:.75rem; padding-inline:1rem;
    font-size:1rem; font-weight:500; letter-spacing:.02em;
    color:rgba(255,255,255,.82); background:transparent;
  }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-mega-panel__grid > li > a::after,
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a::after{ content:none; }
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-mega-panel__grid > li > a > b,
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a > b{
    font-weight:500; font-size:1rem; color:inherit;
  }
  /* ドロワー内の子項目は見出しだけ（説明文は落とす） */
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-mega-panel__grid > li > a > span,
  .site-header-menubar__menu-list > li.ui-subnav-host > .ui-subnav .ui-subnav__list > li > a > span{ display:none; }
  .site-header-menubar__menu-list .ui-subnav__list{ align-items:stretch; }
 
  /* スクリム／バーガーの× */
  .site-header-menubar__scrim{
    display:block; position:fixed; inset:0; z-index:300;
    background:rgb(0 0 0 / .4); opacity:0; visibility:hidden;
    transition:opacity .32s ease, visibility .32s ease;
  }
  .site-header-menubar__burger span{ transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
 
  /* 開閉。nav は __top の中にあるので子孫結合子の方が実際に一致する（旧兄弟版も残置＝無害） */
  .site-header-menubar__toggle:checked ~ .site-header-menubar__menu,
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__menu{ transform:translateX(0); }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__scrim{ opacity:1; visibility:visible; }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__burger span:nth-child(2){ opacity:0; }
  .site-header-menubar__toggle:checked ~ .site-header-menubar__top .site-header-menubar__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
 
  /* ドロワー右上の×ボタン */
  .site-header-menubar__close{
    position:absolute; inset-block-start:1rem; inset-inline-end:1rem; z-index:2;
    display:flex; align-items:center; justify-content:center;
    inline-size:2.75rem; block-size:2.75rem;
    cursor:pointer; border-radius:50%; background:rgba(255,255,255,.12);
  }
  .site-header-menubar__close span{
    position:absolute; inline-size:1.25rem; block-size:2px; background:#fff; border-radius:2px;
  }
  .site-header-menubar__close span:nth-child(1){ transform:rotate(45deg); }
  .site-header-menubar__close span:nth-child(2){ transform:rotate(-45deg); }
 
  /* ドロワー末尾の連絡先（上段の連絡先を隠しているので必須）。
     ★書体・色まで当て直すこと。落とすと電話番号が濃緑地に濃緑（#14601A）で消える。 */
  .site-header-menubar__drawer-contact{
    display:flex; flex-direction:column; align-items:center; gap:.375rem;
    margin-block-start:1.75rem; padding:1.5rem clamp(1.25rem,5vw,2.25rem) 0;
    text-align:center;
  }
  .site-header-menubar__drawer-lead{
    margin:0; display:flex; align-items:baseline; gap:.375rem;
    font-family:"Outfit",sans-serif; font-weight:700; font-size:1rem; letter-spacing:.12em;
    color:rgba(255,255,255,.86);
  }
  .site-header-menubar__drawer-lead span{
    font-weight:500; letter-spacing:.02em; font-size:.875rem; color:rgba(255,255,255,.7);
  }
  .site-header-menubar__drawer-tel{
    font-family:"Outfit",sans-serif; font-weight:800; font-size:1.625rem; line-height:1.15;
    color:#F5B301; text-decoration:none;
  }
  .site-header-menubar__drawer-entry{ inline-size:100%; margin-block-start:.75rem; }
}
 
/* 1024〜1399.98px のロゴ高さ。1024〜1200帯の 2.125rem 指定が後ろにあって勝つため、
   ドロワー帯だけ 2.75rem に戻して 1023px 以下と見た目を揃える。
   ★40rem 以下の 2.125rem には触らないよう min-width を必ず付ける。 */
@media (min-width:1024px) and (max-width:1399.98px){
  .site-header-menubar__logo{ height:2.75rem; }
}

/* ============================================================
   S01664 株式会社五常 — 20f_override.css への【追記 その2】
   ------------------------------------------------------------
   ★前回の「1400px 以下はドロワー」ブロックの【後ろ】に、このまま貼り足す。
     （前回ぶんを差し替える必要はない。追記するだけ）
 
   ■ 直している不具合
     1400〜1580px では横並びナビに戻るが、ヘッダーの中身が
     版面（1120px）より広いままなので右端が画面外へ出ていた。
 
     実測（/faq・Chrome・ドロワー化適用後の現状）:
       1400px → +63px はみ出し
       1450px → +38px
       1500px → +13px
       1560px → 収まる（-17px）
       1580px 以上 → 収まる
 
   ■ 対処
     この帯だけ、文字と左右パディングを clamp() で 1400px→1580px に向けて
     なめらかに戻す（1580px で元の値に一致するので段差が出ない）。
     ナビ文字は 16px → 15px までしか落とさない（1px ぶん）。
 
     ★ここに書く理由: ファイル末尾の「本文最小16px統一」ブロックが
       同じセレクタを font-size:1rem で上書きしているため、
       override.css の【さらに後ろ】＝ここでないと効かない。
       応募／お問い合わせボタンだけは (0,2,0) で当てられているので、
       .site-hd-btns を挟んで (0,3,0) にして勝たせている。
 
   ■ 検証（Chrome 実測）
       1400px → -60px（余裕あり）  1440 → -53  1480 → -46
       1520px → -39  1560 → -32  1580 → -27
       1580px と 1581px で連絡先右端が 1553px で一致＝境界に段差なし。
   ============================================================ */
 
@media (min-width:1400px) and (max-width:1580px){
 
  /* 列間 28px → 22px */
  .site-header-menubar__top{ gap:clamp(22px, 3.333vw - 24.67px, 28px); }
 
  /* ナビ：16px → 15px、左右パディング 15px → 12px */
  .site-header-menubar__menu-list > li > a,
  .site-header-menubar__menu-list > li > .ui-subnav-trigger,
  .site-header-menubar__menu-list > li > .ui-subnav-summary{
    font-size:clamp(.9375rem, .5556vw + .4514rem, 1rem);
    padding-inline:clamp(12px, 1.667vw - 11.33px, 15px);
  }
 
  /* 社名下のキャッチ／TEL のラベル：16px → 15px */
  .site-header-menubar__brand-sub,
  .site-header-menubar__contact-lead{
    font-size:clamp(.9375rem, .5556vw + .4514rem, 1rem);
  }
 
  /* 電話番号：22px → 21px */
  .site-header-menubar__tel{ font-size:clamp(1.3125rem, .5556vw + .826rem, 1.375rem); }
 
  /* 応募／お問い合わせボタン：16px → 15px、左右 20px → 17px
     （.site-hd-btns を挟んで詳細度を 0,3,0 にし、16px統一ブロックに勝たせる） */
  .site-header-menubar__contact .site-hd-btns .site-hd-entry{
    font-size:clamp(.9375rem, .5556vw + .4514rem, 1rem);
    padding-inline:clamp(17px, 1.667vw - 6.33px, 20px);
  }
}
.parts228_section{
    padding-top: 1px!important;
}
.design-parts-52_PrLkrrMYLp.bg-color{
        background: var(--pop-cream)!important;
}
.design-parts-52_PrLkrrMYLp .container .content h4.banner-area{
        color: rgb(34, 139, 34)!important;
            background-color: #ffcc4400!important;
            font-family: var(--font-ja-round)!important;
}
.parts131415_blog_IGEUpLoTAd .card{
    border: 1px solid #a3a3a3 !important;
}
.parts131415_blog_IGEUpLoTAd.bg-color,.parts131415_blog_kzgtEQp4Xj.bg-color{
        background-color: #faf6ea!important;
            padding-top: 1px!important;
}
.seko-b{
    border: 2px solid var(--beige-deep);
    background: var(--white);
    color: var(--ink);
}
/* ============================================================
   S01664 — 各アイコンを支給SVG（CDN）へ差し替え
   対象:
     ① 求職者のみなさまへ｜働く環境ダイジェスト  .env-item__ic[data-icon]
     ② 働く環境｜手当・保険・福利厚生            .benefit-card__ic[data-icon]
     ③ 経験者のかたへ｜ご応募から入社までの流れ  .area-card ... ::after
   既存は data URI の ＜svg＞ を background-image で描いている。
   ここでは URL だけを差し替える（寸法・位置・ブロブ地・opacity は既存のまま）。
   ★ファイル名はこのブロック内だけ直せば全箇所に反映される。
   ★セレクタは既存と同詳細度。override.css が結合の最後なので後勝ちで当たる。
   ============================================================ */

/* --- ① 働く環境ダイジェスト（6件） --- */
.env-item__ic[data-icon="holiday"]   { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/01_holiday.svg")!important; }
.env-item__ic[data-icon="pay"]       { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/02_pay.svg")!important; }
.env-item__ic[data-icon="insurance"] { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/03_insurance.svg")!important; }
.env-item__ic[data-icon="gear"]      { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/04_supply.svg")!important; }
.env-item__ic[data-icon="home"]      { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/05_home.svg")!important; }
.env-item__ic[data-icon="cert"]      { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/06_cert.svg")!important; }
.env-item__ic[data-icon]{ background-image:var(--ic); }

/* --- ② 手当・保険・福利厚生（5件。①と同名のものは同じファイルを使う） --- */
.benefit-card__ic[data-icon="insurance"]{ --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/03_insurance.svg")!important; }
.benefit-card__ic[data-icon="gear"]     { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/04_supply.svg")!important; }
.benefit-card__ic[data-icon="home"]     { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/05_home.svg")!important; }
.benefit-card__ic[data-icon="cert"]     { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/06_cert.svg")!important; }
.benefit-card__ic[data-icon="event"]    { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/05_event.svg")!important; }
.benefit-card__ic[data-icon]{ background-image:var(--ic); }

/* --- ③ ご応募から入社までの流れ（4件・カード右上のゴースト。opacity:.12 は既存のまま） --- */
.area-card:has(.area-card__head[data-icon="entry"])   { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/01_entry.svg")!important; }
.area-card:has(.area-card__head[data-icon="calendar"]){ --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/02_calendar.svg")!important; }
.area-card:has(.area-card__head[data-icon="talk"])    { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/03_talk.svg")!important; }
.area-card:has(.area-card__head[data-icon="check"])   { --ic:url("https://cdn.cuezilla-cms.com/enjoyworks-test1.site/images/1549/04_check.svg")!important; }
.area-card:has(.area-card__head[data-icon])::after{ background-image:var(--ic)!important; }