@charset "UTF-8";
/* =========================================================================
   overrides.css — SWELLブロック既定スタイルの上書き（隔離）
   出典：実装指示書 §5,§7 ／ design-spec.md §5
   依存：components.css（→ base → variables）
   方針：SWELL依存はこのファイルにのみ閉じ込める。色・フォントは直値禁止（var()）。

   ※ セレクタは SWELL 標準ブロックのクラス命名（.swell-block-*）を前提とした土台。
     実装時にエディタの実出力HTMLで class 名を必ず確認し、相違があれば調整する。
   ========================================================================= */

/* 注：CTAボタンはコアボタン（core/button ＋ .kc-macouleur-cta）で実装し、装飾は
       components.css に置く（2026-06-25 変更。CHANGELOG.md 参照）。
       SWELLボタンは supports.className:false でクラス付与不可・静的ブロックの
       貼り付け検証リスクがあるため不採用。 */

/* =========================================================================
   2. グローバルナビ — 浮いた白い角丸パネル＋CTA塗り
      SWELLの透過ヘッダー（.l-header 絶対配置・標準ホバー下線）を当社の抑制路線に上書き。
      重要：フローティングの上下余白は #header の padding で作る（margin不可）。padding は
      offsetHeight に含まれ、custom.js が測る --kc-header-h ＝ FV高 100svh のナビ分クリアに追従。
      影はトークン直値を避け color-mix(var) で薄く。
   ========================================================================= */
/* 上端ベタ付け回避＋左右インセット（フローティング）。pad はヘッダー占有高に含まれる。 */
#header.l-header {
  padding-block: clamp(12px, 2vw, 20px);
  padding-inline: clamp(12px, 4vw, 32px);
}
/* 白い角丸パネル：ロゴ＋ナビ＋CTA を囲む。角丸・影は控えめ（上質・抑制）。 */
#header .l-header__inner {
  background: var(--kc-color-base);
  color: var(--kc-color-ink);
  border: 1px solid var(--kc-color-line);
  border-radius: 14px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kc-color-ink) 8%, transparent);
  padding-block: 8px;
  padding-inline: clamp(12px, 2vw, 20px);
  align-items: center;
  /* ヘッダーinnerの幅をトップ(透過ヘッダー)と下層で統一。SWELLは透過(top)時に
     .l-header .l-container{max-width:100%} を出力し全幅にするが、非透過(下層)では
     .l-container 既定(max-width≒--container_size 1296px)で中央に絞られ狭くなる。
     ヘッダーinner だけを全幅に固定して全ページ統一（本文の .l-container には無影響）。 */
  max-width: 100%;
  margin-inline: 0;
}
/* ナビ項目を縦中央で揃える（テキストリンクと塗りCTAの高さ差で上下がずれないように）。
   gap で項目間に控えめなゆとり（詰まり過ぎ防止）。c-gnav はPCのみ表示で、SPハンバーガーは
   別メニュー（.c-spnav）のため、ここの変更はSP展開メニューに影響しない。 */
#header .c-gnav {
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}
/* ナビ項目：文字のみ。SWELL標準のホバー下線（::after スライド）を打ち消す。 */
#header .c-gnav > li > a::after { display: none !important; }
#header .c-gnav a {
  color: var(--kc-color-ink);
  font-size: 1.125rem; /* もう少し大きく（18px。抑制路線で読みやすい範囲） */
  transition: color 0.3s ease;
}
/* 通常項目：ホバーでテキスト色がじわっと（ink→pink）。CTA（最終項目）は除外。 */
#header .c-gnav > li:not(:last-child) > a:hover { color: var(--kc-color-pink); }
/* CTA「お問い合わせ」＝メニュー最終項目だけ塗り（pink-cta／白文字／角丸）。
   padding を厚めに取り、はっきりボタンと分かる塊に。inline-flex＋line-height:1 で
   縦paddingが確実に高さになり、SWELLのリンク高さ指定に影響されない。 */
#header .c-gnav > li:last-child > a {
  display: inline-flex;
  align-items: center;
  background: var(--kc-color-pink-cta);
  color: var(--kc-color-base);
  border-radius: 10px;
  padding: 16px 24px;
  line-height: 1;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
#header .c-gnav > li:last-child > a:hover {
  color: var(--kc-color-base);
  filter: brightness(0.95);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--kc-color-pink-cta) 28%, transparent);
}

/* =========================================================================
   2b. eyebrow → h2 のペア間隔（全ページ共通）
      SWELL `.post_content h2{margin:4em 0 2em}`（特異度0,1,1）の大きな上余白で
      eyebrowとh2が離れ、アイブロウとして機能しない。eyebrow直後のh2だけ上余白を
      撤去して「ひと組」に詰める。.wp-block-heading 併記で特異度を 0,2,1 に上げ確実に勝つ。
      上余白のみ調整（下余白2emは維持＝h2→本文のリズムは不変）。隣接セレクタなので
      eyebrowと無関係な通常h2のセクション間リズムは変えない。特定ページ非依存の汎用。
   ========================================================================= */
.kc-macouleur-eyebrow + h2.wp-block-heading {
  margin-top: 0;
}

/* =========================================================================
   1. SWELLステップ（流れ）— .swell-block-step（縦型・SWELL標準）
      番号→ピンク、連結線→金の細罫線、白基調に。
   ========================================================================= */
.swell-block-step .swell-block-step__number {
  background: var(--kc-color-pink-cta);
  color: #fff;
}
/* 連結線（番号間を結ぶ縦線）を金の細罫線に。 */
.swell-block-step .swell-block-step__item::before {
  border-color: var(--kc-color-goldln);
}
.swell-block-step .swell-block-step__title {
  color: var(--kc-color-ink);
  font-family: var(--kc-font-display);
}

/* =========================================================================
   3. SWELLアコーディオン（FAQ）— .swell-block-accordion（開閉式）
      SWELLは details/summary＋.__label/.__icon/.__body で出力。素人っぽい「詰まり」を避け、
      設問・回答に十分な余白と行間をとり、区切りは金の細罫線に。開閉指標・ホバーも当社トーン。
      キーボード操作・aria は SWELL 標準（details/summary）に委ねる。
   ========================================================================= */
/* 区切りは金の細罫線。最初の項目に上罫線、各項目に下罫線で清潔なリストに。 */
.swell-block-accordion__item {
  border-bottom: 1px solid var(--kc-color-goldln);
}
.swell-block-accordion__item:first-child {
  border-top: 1px solid var(--kc-color-goldln);
}
/* 設問（summary）：ゆとりのある行。右にアイコン分の余白。ホバーでピンクにじわり。 */
.swell-block-accordion__title {
  color: var(--kc-color-ink);
  font-family: var(--kc-font-display);
  font-size: 1.05rem;
  line-height: 1.7;
  padding: 1.25rem 2.75rem 1.25rem 0.25rem;
  cursor: pointer;
  transition: color 0.3s ease;
}
.swell-block-accordion__title:hover {
  color: var(--kc-color-pink);
}
/* 回答（body）：上に少し空け、下にゆとり。読みやすい行間・補助色。 */
.swell-block-accordion__body {
  padding: 0.25rem 2.75rem 1.4rem 0.25rem;
  line-height: 1.9;
  color: var(--kc-color-sub);
}
/* 開閉アイコン：当社トーン（機能ピンク）。開時に反転（SWELLの[open]）。 */
.swell-block-accordion__icon {
  color: var(--kc-color-pink);
  transition: transform 0.3s ease-out;
}
.swell-block-accordion__item[open] .swell-block-accordion__icon {
  transform: rotate(180deg);
}

/* =========================================================================
   4. 記事リストのアイキャッチ枠 — 少しだけ角丸
      SWELL `.c-postThumb`（特異度0,1,0）は border-radius 無指定。枠自体に
      px固定の角丸を付与（%だと横長で縦横の曲率が変わるため px で均一に）。
      2クラス併記（.p-postList__thumb.c-postThumb＝0,2,0）で確実に勝つ。
      overflow:hidden で画像のはみ出しを防ぎ、noimg（画像なし）でも枠に角丸が効く。
      アーカイブ等の同枠にも一律で適用される前提。
   ========================================================================= */
.p-postList__thumb.c-postThumb {
  border-radius: 7px;
  overflow: hidden;
}

/* =========================================================================
   5. 下層ページタイトル（h1.c-pageTitle）を視覚的に隠す（全下層共通）
      SWELLの罫線付きページタイトルを非表示に。ただし display:none ではなく
      sr-only（画面外クリップ）で、h1「ページ名」はDOMに残す＝SEO/スクリーンリーダー維持。
      可視の見出しはヒーローの大タイトル（p.kc-macouleur-hero-title）が担う。
      カスタマイザーに一括非表示オプションが無いためCSSで対応。
   ========================================================================= */
.c-pageTitle {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   6. プライバシーポリシー本文の可読幅（スラッグ .privacy-policy 限定）
      法務長文で1行が長い（約54字）ため、本文段落に max-width で約40字/行に詰める。
      SWELLは body_class を <body> でなく #body_wrap に出力し、そこにスラッグ由来の
      .privacy-policy クラスが付く。これでこのページに限定＝他ページの本文に影響させない
      （専用ラッパークラスが無いための最小スコープ。スラッグはページ作り直しでも維持）。
      見出し(h2)は記事幅のまま、本文は左寄せ据え置き（max-width のみ・margin auto しない
      ＝h2左端に揃う）。タイトル(hero-title)は除外、連絡先など短い段落は max-width 未満で影響なし。
   ========================================================================= */
.privacy-policy .post_content p:not(.kc-macouleur-hero-title) {
  max-width: 40em;
}

/* ① 画像ウィジェットを中央寄せ */
#media_image-5 {
  text-align: center !important;
}

/* ② フッターロゴの最大幅を200pxに */
img.footer-logo {
  max-width: 200px !important;
}

/* ③ フッターの2カラムコンテナの最大幅を800pxに */
#footer .l-container.w-footer.-col2 {
  max-width: 800px !important;
}
/* 背景グラデーションを最背面へ */
.kc-macouleur-hero-bg {
  position: absolute;
  z-index: 0;
}
.kc-macouleur-hero-bg::before {
  z-index: 0;
}

/* 文字・ボタン側を手前へ */
.kc-macouleur-hero-title,
.kc-macouleur-eyebrow,
.kc-macouleur-lead,
.wp-block-buttons {
  position: relative;
  z-index: 2;
}
/* スマホ表示（幅600px以下）では背景グラデーションを非表示 */
@media (max-width: 600px) {
  .kc-macouleur-hero-bg::before {
    display: none;
  }
}