/* ==========================================================================
   rebuild.css — Issue-008 Global Component 層
   wp_diversity theme / enqueue: functions.php (wpd_enqueue_assets)
   読み込み順: style.css → rebuild.css → (front page のみ) top.css
   --------------------------------------------------------------------------
   方針
   - 既存 style.css（27KB）を書き換えない。上書きが必要な箇所だけ明示的に指定する。
   - Customizer の wp-custom-css（23KB・全13ページ配信）を肥大化させない。
   - Gutenberg の layout hash 依存セレクタ（wp-container-core-*）を新規に作らない。
   - 既存テーマの breakpoint（1100 / 800 / 700 / 500）に合わせる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens
   Source: Final Visual Approval (TOP Visual Draft Design)
   Reference の oklch() 値を、現行WordPressの対応ブラウザ前提で sRGB へ変換。
   「相対的な明度差」という Visual Intent を保持する（Plan §16.3-4）。
   既存テーマの --mainc (#3376A3) は他ページの既存デザインが使用中のため残す。
   -------------------------------------------------------------------------- */

:root {
  /* --- Ground / Surface ------------------------------------------------- */
  --c-bg:            #fbfaf7; /* oklch(0.985 0.004 85)  ページ基調 */
  --c-bg-sub:        #f3f1ec; /* oklch(0.966 0.005 85)  S3 / Footer のみ */
  --c-bg-card:       #fbfaf7; /* Product Card の面 */
  --c-bg-figure:     #f0eee9; /* oklch(0.955 0.004 85)  商品画像の下地 */
  --c-bg-drawer:     #f7f6f2; /* oklch(0.975 0.004 85) */

  /* --- Text ------------------------------------------------------------- */
  --c-text:          #2e3238; /* oklch(0.26 0.012 250)  本文 */
  --c-text-strong:   #2e3238;
  --c-text-2:        #494f57; /* oklch(0.34 0.012 250) */
  --c-text-3:        #575e66; /* oklch(0.40 0.012 250) */
  --c-text-muted:    #6f767d; /* oklch(0.50 0.012 250) */
  --c-text-faint:    #8f959b; /* oklch(0.62 0.012 250)  eyebrow / 注記 */
  --c-text-brandcopy:#858c93; /* oklch(0.58 0.012 250)  Brand Copy（DEMOTE） */

  /* --- Line ------------------------------------------------------------- */
  --c-line:          #e2e4e6; /* oklch(0.91 0.008 250) */
  --c-line-strong:   #c6cace; /* oklch(0.82 0.01 250)  Lead Evidence の上罫 */
  --c-line-connect:  #a9afb5; /* oklch(0.72 0.012 250)  Relationship コネクタ */

  /* --- Primary（CTA / Link） -------------------------------------------- */
  --c-primary:       #40567f; /* oklch(0.44 0.075 252) */
  --c-primary-dark:  #2f4468; /* oklch(0.36 0.075 252)  hover */
  --c-on-primary:    #fbfaf7;
  --c-link-underline:#c0c8d4; /* oklch(0.82 0.03 252)  装飾用（非リンク要素） */
  /* [Revision 2] リンクの下線は非テキストコントラスト 3:1 以上を確保する
     #73819f … page(#fbfaf7) 3.75:1 ／ S3(#f3f1ec) 3.46:1 */
  --c-link-underline-strong:#73819f;
  --c-focus:         #1f6feb;

  /* --- Brand Accent（S3 Brand Band の左罫のみ） -------------------------- */
  --c-brand-curble:  #5c7396; /* oklch(0.55 0.06 250) */
  --c-brand-marfys:  #3f7f6b; /* oklch(0.55 0.06 160) */
  --c-brand-fizx:    #8e6350; /* oklch(0.55 0.06 40)  */

  /* --- Typography ------------------------------------------------------- */
  --f-sans:  "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-serif: "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-h1:      clamp(29px, 3.4vw, 50px);
  --fs-h2:      clamp(22px, 2.2vw, 32px);
  --fs-h2-lg:   clamp(23px, 2.3vw, 34px);   /* S6 */
  --fs-h3-brand:clamp(21px, 1.9vw, 28px);
  --fs-h3-group:clamp(15px, 1.2vw, 17px);   /* S4 Group 見出し */
  --fs-h4:      clamp(15px, 1.2vw, 17px);   /* Product Card */
  --fs-lead:    clamp(15px, 1.3vw, 18.5px); /* S1 Definition */
  --fs-body:    clamp(14.5px, 1.2vw, 17px);
  --fs-body-s:  13.5px;
  --fs-card:    13px;
  --fs-eyebrow: 11px;
  --fs-meta:    12.5px;

  --fs-num-lead:clamp(40px, 4.8vw, 68px);   /* S4 Group1 */
  --fs-num:     clamp(28px, 2.7vw, 38px);   /* S4 Group2 */
  --fs-num-s:   clamp(24px, 2.2vw, 30px);   /* S4 Group3（意図的に小さく） */

  --lh-body: 1.85;
  --lh-lead: 2;
  --lh-head: 1.3;

  /* --- Spacing（流体） --------------------------------------------------- */
  --sp-gutter:  clamp(20px, 4.5vw, 96px);
  --sp-sec:     clamp(56px, 7.5vw, 120px);
  --sp-sec-cta: clamp(72px, 10vw, 168px);   /* S6 CTA Pause */
  --sp-lg:      clamp(28px, 3vw, 46px);
  --sp-md:      clamp(18px, 2vw, 30px);
  --sp-sm:      12px;

  --w-page:     1180px;
  --w-narrow:   760px;
  --w-measure:  33em;

  --tap:        44px;   /* 最小 tap target */
}

/* --------------------------------------------------------------------------
   Global Components（13ページ共通で再利用する層）
   C-01 Header / C-02 PC Nav / C-03 Mobile Drawer / C-04 Footer
   C-06 CTA / C-07 Button / C-08 Section Heading / C-09 Definition Block
   -------------------------------------------------------------------------- */

/* --- Base（style.css のリセットを前提に、必要な差分だけ指定） ---------------- */
/* style.css が既に box-sizing / margin:0 / img 表示 / li list-style:none を設定済み */

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-feature-settings: "palt" 1;
}

/* style.css は a:any-link { color:#444 } を全体に効かせている。
   Rebuild 対象のコンポーネント内だけ Primary 色に戻す。 */
.site-rebuild a,
header a,
footer a { color: var(--c-primary); }
header a:hover,
footer a:hover { color: var(--c-primary-dark); }

/* focus は消さない（Accessibility 必須） */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.l-inner { max-width: var(--w-page); margin-inline: auto; }

/* --- Skip link（Global / Theme responsibility） --------------------------- */
.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 999;
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 16px;
  background: var(--c-primary); color: var(--c-on-primary);
  font-size: 14px;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; color: var(--c-on-primary); }

/* --- C-01 Header --------------------------------------------------------- */
/* テーマ既定は header{position:fixed;height:60px} だが、Utility bar を持つ
   Approved Header は高さが可変のため、sticky + auto height へ上書きする。 */
header {
  position: sticky; top: 0; left: auto; z-index: 100;
  display: block; height: auto;
  width: 100%;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
/* style.css の .page{margin-top:150px} は fixed header 前提。sticky 化に伴い解除 */
.page { margin-top: 0; }

.header_utility { border-bottom: 1px solid var(--c-line); }
.header_utility__list {
  display: flex; justify-content: flex-end; gap: clamp(14px, 1.8vw, 24px);
  margin: 0; padding: 0 var(--sp-gutter); list-style: none;
  font-size: var(--fs-meta); letter-spacing: .03em;
}
.header_utility__list a {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; color: var(--c-text-muted);
}
.header_utility__list a:hover { color: var(--c-primary); }

/* Approved Header の内側レイアウト（style.css の width:80% を踏襲） */
.header_inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px var(--sp-gutter);
}

/* ロゴ：H1 にしない（G-1）。クラス名は現行CSS互換のため維持 */
.header_logo { margin: 0; font-size: 0; line-height: 1; }
.header_logo .logo { display: inline-flex; align-items: center; min-height: var(--tap); }
.header_logo img { display: block; width: auto; height: 34px; }

/* --- C-02 PC Navigation -------------------------------------------------- */
.header_menu { display: none; }
.header_menu > ul {
  display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px);
  margin: 0; padding: 0; list-style: none;
  font-size: 13.5px; letter-spacing: .04em;
}
.header_menu > ul > li { position: relative; }
.header_menu a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); color: var(--c-text-2);
}
.header_menu a:hover { color: var(--c-primary); }
.header_menu [aria-current="page"] { color: var(--c-text); font-weight: 700; }

/* Contact は Button スタイル（視覚的 Priority 最上位） */
.nav-cta a {
  padding: 0 20px; min-height: 42px;
  font-weight: 500;   /* 色は Primary CTA 一括指定（Revision 1 / A） */
}
/* hover/focus の色は上の Primary CTA 一括指定に集約（Revision 1 / A） */

/* Dropdown：hover のみに依存しない（button + aria-expanded） */
.header_dropParent { display: flex; align-items: center; }
.dropdown-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; min-height: var(--tap);
  border: 0; background: none; color: var(--c-text-faint);
  font: inherit; font-size: 10px; cursor: pointer;
}
.header_dropChild {
  position: absolute; top: 100%; left: -18px; z-index: 20;
  width: 288px; padding: 16px 20px 12px;
  background: var(--c-bg); border: 1px solid var(--c-line);
  box-shadow: 0 14px 34px rgba(70, 78, 86, .12);
}
.header_dropChild[hidden] { display: none; }
.header_dropChild__brand {
  margin: 0 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-text-2);
}
.header_dropChild ul { margin: 0 0 12px; padding: 0; list-style: none; }
.header_dropChild ul a {
  display: block; padding: 8px 0 8px 12px;
  min-height: 0; font-size: 13.5px; color: var(--c-text-2);
}
.header_dropChild__all {
  display: block; padding-top: 10px;
  border-top: 1px solid var(--c-line); font-size: 13px;
}

/* --- C-03 Mobile Drawer -------------------------------------------------- */
/* [Revision 1 / C] SP Drawer が Viewport 右で切れる問題
   style.css の #drawer_menu は
     width:300px / height:400px / top:10px / right:10px /
     transform:translateX(400px) / border / border-radius / backdrop-filter /
     flex-direction:column / justify-content:center / align-items:center / text-align:center
   を指定している。rebuild 側で width・height・transform を打ち消していなかったため、
   パネルが 400px 右へ押し出され Viewport 外で見切れていた。
   ここで **右端基準の全幅パネル**として明示的に上書きする。
   横スクロールで隠れた内容へアクセスさせる方式は採らない。 */
#drawer_button {
  /* style.css の position:fixed / top:20px / right:20px / border-radius:50% を解除し、
     ヘッダー内のフローに戻す */
  position: static;
  top: auto; right: auto; bottom: auto; left: auto;
  border-radius: 0;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px; width: var(--tap); height: var(--tap);
  min-width: var(--tap); max-width: var(--tap);
  padding: 0;
  border: 0; background: none; cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 auto;
}
/* style.css の `#drawer_button span:not(.drawer_text)` は詳細度 (1,1,1) で
   `#drawer_button span` (1,0,1) に勝つため、同じ詳細度で明示的に上書きする。
   現行マークアップは span 2本（.drawer_text は無い）。 */
#drawer_button span,
#drawer_button span:not(.drawer_text) {
  display: block;
  width: 22px; height: 1.5px;
  background-color: var(--c-text);
  transform: none;          /* span:first-child / nth-child(3) の translateY を解除 */
  transition: none;
}

#drawer_menu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* 右端基準。left:0 と併せて全幅に固定 */
  width: auto;                 /* style.css の width:300px を解除 */
  min-width: 0;
  max-width: 100vw;            /* Viewport 幅を超えない */
  height: auto;                /* style.css の height:400px を解除 */
  max-height: 100vh;
  transform: none;             /* style.css の translateX(400px) を解除 */
  transition: none;
  box-sizing: border-box;      /* padding を幅の内側に含める */
  display: block;              /* flex 前提の中央寄せレイアウトを解除 */
  text-align: left;
  border: 0; border-radius: 0;
  backdrop-filter: none;
  z-index: 200;
  overflow-x: hidden;          /* 横スクロールを発生させない */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px var(--sp-gutter) 40px;
  background-color: var(--c-bg-drawer);
}
#drawer_menu[hidden] { display: none; }
/* Drawer 内の要素が幅を押し広げないようにする */
#drawer_menu * { max-width: 100%; box-sizing: border-box; }
#drawer_menu .drawer_menu__head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.drawer_close {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  border: 0; background: none; color: var(--c-text-2); font: inherit; font-size: 13px; cursor: pointer;
}
.drawer_group + .drawer_group { margin-top: 24px; }
.drawer_group__label {
  margin: 0 0 6px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--c-text-faint);
}
.drawer_group--secondary .drawer_group__label { color: #a3a9af; }
.drawer_group ul { margin: 0; padding: 0; list-style: none; }
.drawer_group li { border-top: 1px solid var(--c-line); }
.drawer_group li:last-child { border-bottom: 1px solid var(--c-line); }
.drawer_group a {
  display: flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 6px 0;
  font-size: 16px; font-weight: 500; color: var(--c-text);
}
.drawer_group--consumer a { font-size: 14.5px; font-weight: 400; color: var(--c-text-2); }
.drawer_group--secondary a { font-size: 13.5px; font-weight: 400; color: var(--c-text-muted); }
.drawer_brand {
  margin: 2px 0 0; padding-left: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--c-text-3);
}
.drawer_sub li { border: 0; }
.drawer_sub a { padding-left: 28px; font-size: 14.5px; font-weight: 400; color: var(--c-text-2); }
.drawer_cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; margin-bottom: 24px;
  font-size: 15px; font-weight: 500; letter-spacing: .04em;
  /* 色は Primary CTA 一括指定（Revision 1 / A） */
}
/* hover/focus の色は上の Primary CTA 一括指定に集約（Revision 1 / A） */

body.is-drawer-open { overflow: hidden; }

/* --- C-06 CTA / C-07 Button ----------------------------------------------
   [Revision 1 / A] Primary CTA のコントラスト
   style.css の `a:any-link { color:#444 }` は詳細度 (0,1,1)。
   `.cta--primary`(0,1,0) や `.drawer_cta`(0,1,0) では負けるため、
   青背景に暗い文字（#444）が乗っていた。
   Primary CTA を使う全箇所（S1 Hero / S6 / Header Contact / Drawer Contact）で
   通常時 / :link / :visited / :hover / :focus / :focus-visible / :active の
   文字色・背景色を明示し、汎用リンク色に上書きされないようにする。
   Hero だけの個別 hack にはしない。
   -------------------------------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  font-size: 15px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none;
}

/* Primary CTA — 基本は「青背景 ＋ 白系文字」。
   `a.` を付けて詳細度 (0,1,1) 以上にし、a:any-link に負けないようにする。 */
.cta--primary,
a.cta--primary,
a.cta--primary:link,
a.cta--primary:visited,
.nav-cta a,
.nav-cta a:link,
.nav-cta a:visited,
.drawer_cta,
a.drawer_cta:link,
a.drawer_cta:visited {
  background-color: var(--c-primary);
  color: var(--c-on-primary);
}

.cta--primary:hover,
a.cta--primary:hover,
a.cta--primary:focus,
a.cta--primary:active,
.nav-cta a:hover,
.nav-cta a:focus,
.nav-cta a:active,
.drawer_cta:hover,
a.drawer_cta:hover,
a.drawer_cta:focus,
a.drawer_cta:active {
  background-color: var(--c-primary-dark);
  color: var(--c-on-primary);
}

/* focus は塗りつぶしの上でも見えるよう、外側にリングを出す */
a.cta--primary:focus-visible,
.nav-cta a:focus-visible,
a.drawer_cta:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  color: var(--c-on-primary);
}

/* --------------------------------------------------------------------------
   [Revision 2] Secondary CTA / Inline Link の Cascade 修正
   style.css の `a:any-link { color:#444 }` は詳細度 (0,1,1)。
   `.cta--secondary` / `.link-inline` は (0,1,0) のため負けており、
   意図した文字色（Primary 色）が失われていた。
   `a.〜:link` 等 (0,2,1) で全状態を明示し、上書きされないようにする。

   対象は **この2コンポーネントのみ**。
   Header / Navigation / Footer / Product Card / NEWS 行のリンクには波及させない。

   コントラスト（実測 / 背景は page #fbfaf7 と S3 #f3f1ec）
     文字 #40567f（normal・:link・:visited） … 7.05:1 ／ 6.52:1  → WCAG AA
     文字 #2f4468（:hover・:focus・:active） … 9.37:1 ／ 8.66:1  → WCAG AA
     下線 #73819f（normal）                  … 3.75:1 ／ 3.46:1  → 非テキスト 3:1 以上
     :visited は可読性を最優先し normal と同色（ブラウザ既定の紫を使わない）
   -------------------------------------------------------------------------- */

/* --- A. Secondary CTA（Hero の「取扱ブランド・商品を見る」） ---------------
   Primary CTA（塗り＋白文字）と明確に区別するため、
   背景を持たない「下線付きテキストリンク」として扱う。 */
.cta--secondary {
  min-height: var(--tap); padding: 0;
  background-color: transparent;
  border-bottom: 1px solid var(--c-link-underline-strong);
}
.cta--secondary,
a.cta--secondary,
a.cta--secondary:link,
a.cta--secondary:visited {
  background-color: transparent;
  color: var(--c-primary);
  border-bottom-color: var(--c-link-underline-strong);
}
a.cta--secondary:hover,
a.cta--secondary:focus,
a.cta--secondary:active {
  background-color: transparent;
  color: var(--c-primary-dark);
  border-bottom-color: currentColor;   /* hover で下線が明確に濃くなる */
}
a.cta--secondary:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  color: var(--c-primary-dark);
}

/* --- B. Inline Link（S3 / S4 / S5 のセクション末リンク） -------------------
   本文と区別でき、下線でリンクと認識でき、visited でも可読性を保つ。 */
.link-inline {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap);
  border-bottom: 1px solid var(--c-link-underline-strong);
  font-size: 14.5px;
  text-decoration: none;               /* 下線は border-bottom が担当 */
}
.link-inline,
a.link-inline,
a.link-inline:link,
a.link-inline:visited {
  color: var(--c-primary);
  border-bottom-color: var(--c-link-underline-strong);
}
a.link-inline:hover,
a.link-inline:focus,
a.link-inline:active {
  color: var(--c-primary-dark);
  border-bottom-color: currentColor;
}
a.link-inline:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  color: var(--c-primary-dark);
}
.ext-mark { font-size: 10px; color: var(--c-text-faint); }

/* --- C-08 Section Heading ------------------------------------------------ */
.sec-eyebrow {
  margin: 0 0 12px;
  font-family: var(--f-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .22em; color: var(--c-text-faint);
}
.sec-title {
  margin: 0 0 var(--sp-lg);
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-h2); letter-spacing: .06em; line-height: var(--lh-head);
}

/* --- C-04 Footer --------------------------------------------------------- */
.site-footer {
  padding: clamp(32px, 3.5vw, 52px) var(--sp-gutter) clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-sub);
}
.footer_top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px 32px;
}
/* 現行 h2.footer_lnc は廃止。社名は非Heading（G-6） */
.footer_name {
  margin: 0;
  font-family: var(--f-serif); font-size: 15px; letter-spacing: .08em;
}
.footer_menu_list {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  margin: 0; padding: 0; list-style: none; font-size: 13px;
}
.footer_menu_list a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--c-text-3);
}
.footer_bottom {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 32px;
  margin-top: clamp(22px, 2.4vw, 34px);
  padding-top: clamp(10px, 1.6vw, 22px);
  border-top: 1px solid var(--c-line);
}
.footer_legal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px;
  margin: 0; padding: 0; list-style: none; font-size: var(--fs-meta);
}
.footer_legal a, .footer_legal .is-pending {
  display: inline-flex; align-items: baseline; gap: 8px;
  min-height: var(--tap); color: var(--c-text-muted);
}
/* Privacy Policy は URL 未確定のため Preview では非リンク＋注記 */
.footer_legal .is-pending { align-items: center; }
.footer_legal .pending-note {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; color: #979da3;
}
.copyright {
  margin: 0;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; color: var(--c-text-faint);
}

/* --- Responsive：Drawer ↔ PC Nav 切り替え -------------------------------- */
@media (max-width: 1100px) {
  .header_utility { display: none; }   /* Utility は Drawer の CONSUMER で担保 */
}
@media (min-width: 1101px) {
  .header_menu { display: block; }
  #drawer_button { display: none; }
  /* PC幅では JS が Drawer を閉じる（C-03: リサイズでPC幅になったら自動close）。
     !important による強制は使わない。 */
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Utility -------------------------------------------------------------- */
/* スクリーンリーダー専用テキスト（WordPress 標準クラス名に合わせる） */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Sticky Header の compact 状態（scroll での完全 hide は行わない） */
header.is-compact .header_utility { display: none; }
header.is-compact .header_inner { padding-block: 8px; }
header.is-compact .header_logo img { height: 28px; }
@media (max-width: 1100px) {
  header.is-compact .header_inner { padding-block: 6px; }
}