@charset "UTF-8";
/* =========================================================================
   components.css — 共通パーツ（kc-macouleur-*）
   出典：design-spec.md §4,§5 ／ 実装指示書 §5,§6 ／ 各モックの共通CSS
   依存：base.css（→ variables.css）
   方針：装飾（ピンクのマーク・金の細罫線）は擬似要素で付与し、ブロックHTMLに
        直書きしない。色・フォントは直値禁止（var() を参照）。
   ========================================================================= */

/* --- ブランドマーク（ロゴのピンクの発光マークを小さく反復する主シグネチャー）
   鮮やかなブランドピンクはここにのみ使う。✦ は擬似要素 content で出力。 -------- */
.kc-macouleur-mark {
  color: var(--kc-color-brand-pink);
  line-height: 1;
}
.kc-macouleur-mark::before {
  content: "\2726"; /* ✦ */
}

/* --- eyebrow（ブランドマーク＋金の細罫線） --------------------------------
   構造：<span class="kc-macouleur-eyebrow">ラベル</span>
   先頭にブランドのシンボルマーク（王冠状のM）を ::before に CSS mask で描画し、
   background-color: var(--kc-color-brand-pink) で着色（変数変更に追従）。
   末尾に金の細罫線（::after）を擬似要素で付与。全ページ共通のシグネチャー。 */
.kc-macouleur-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--kc-color-gold);
  margin-bottom: 14px;
}
.kc-macouleur-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  height: 1.1em; /* もう少しだけ大きく（0.9em→1.1em。ワンサイズUP） */
  aspect-ratio: 815.58 / 509.73; /* マーク縦横比。高さ基準で幅が決まる（width:auto相当） */
  background-color: var(--kc-color-brand-pink); /* 色は変数で管理＝ブランドカラー変更に追従 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20815.58%20509.73%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M729.81%2C481.07l-18.01-.2-62.28-.05h-8.49s-86.99%2C0-86.99%2C0h-9.15c-1.1-3.54-95.74%2C7.15-84.08-6%2C6.16-22.29%2C13.78-49.39%2C21.29-72.17%2C12.85-33.63-10.25-15.97-26.94-6.11-2.84%2C1.81-7.92%2C5-11.12%2C6.03-3.42%2C3.6-9.56%2C5.28-13.44%2C8.35-6.12%2C2.92-13.11%2C8.5-19.61%2C9.8-16.37-8.52-31.11-17.34-46.63-26.78-14.14-8.23-34.34-21.86-22.55%2C7.77%2C4.95%2C20.84%2C13.2%2C39.46%2C17.88%2C59.97-.33-1.55%2C7.3%2C18.64%2C4.31%2C19.2-30.59.8-61.07-.51-92.85.01-76.67-.97-163.85%2C1.97-239.44-.48%2C43.4-6.21%2C86.37-10.35%2C130.56-13.4l6.38-1.5c27.6-3.04%2C57.64-5.4%2C85.28-8.48%2C29.5-4.37%2C42.18%2C2.17%2C21.8-31.24l-3.63-6.59-4.09-7.91-4.32-8.35c-3.03-4.16-4.82-11.69-8.66-15.13l-1.77-6.3c-5.15-5.56-5.92-13.42-10.77-19.19-.89-2.83-1.61-5.97-4.35-7.92l-1.23-5.03c-4.04-3.83-5.58-11.57-8.85-16.13l-4.54-8.8-3.41-5.43-3.75-7.19-4.71-9.26c-2.13-5.2-6.69-10.75-7.68-16.4l-3.26-3.71c-1.73-5.85-4.84-11.02-8.32-15.9l-1.7-5.11c-1.27-.79-6.84-11.42-6.06-12.5l7.1%2C2.27c39.93%2C29.24%2C83.02%2C53.05%2C124.08%2C81.63l6.7%2C4.17c24.83%2C16.04%2C48.84%2C31.15%2C73.93%2C47.8%2C15.95%2C16.69%2C30.62-2.8%2C46.01-10.7-4.4%2C2.79%2C19.54-13.03%2C12.61-7.89%2C11.56-8.67%2C25.79-17.07%2C37.97-25.01l7.32-4.64c3.86-2.58%2C8.72-6.08%2C12.75-8.32-2.51%2C1.42%2C15.84-10.16%2C12.28-7.57%2C36.92-24.15%2C73.31-50.25%2C111.64-71.69-1.28%2C9.19-9.25%2C17.72-12.55%2C26.71l-2.51%2C3.54c-.67%2C3.27-1.99%2C5.59-4.39%2C7.88l-1.07%2C4.52c-2.33%2C2.49-3.33%2C4.9-3.94%2C8.34l-3.41%2C4.01c-4.99%2C15.9-16.54%2C29.98-21.32%2C45.45l-3.86%2C3.32c-2.8%2C13.56-14.08%2C24.65-17.26%2C38.57l-3.21%2C3.26c-3.83%2C8.57-7.04%2C17.98-12.6%2C25.15l-1.28%2C4.87c-4.83%2C7.5-20.49%2C29.68-3.37%2C30.28%2C40.69%2C3.73%2C81.31%2C8.75%2C122.11%2C12.7%2C38.26%2C3.6%2C76.98%2C5.29%2C114.89%2C12.84-18.73%2C1.35-33.78.03-53.45.67Z%22%2F%3E%3Cpath%20d%3D%22M416.49%2C289.69c-1.07%2C2.09-2.79%2C5.18-3.78%2C7.07-4.99%2C2.97-8.82-14.35-12.29-17.81l-4.08-8.08-4.26-8.46-3.76-7.01-4.01-7.48-4.19-7.83c-2.45-7.28-10.89-14.8-8.16-22.66%2C3.8-16.35%2C5.72-33.28%2C9.81-49.66%2C8.64-45.75%2C16.03-91.71%2C25.65-136.44l1.69-6.75c10.63%2C31.11%2C13.07%2C72.01%2C22.53%2C106.04.32%2C25.82%2C27.55%2C87.65%2C11.06%2C105.13l-1.15%2C5.12c-3.43%2C4.65-6.45%2C9.92-8.11%2C15.52l-3.31%2C4.71c-3.09%2C9.91-9.24%2C19.06-13.64%2C28.59Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20815.58%20509.73%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M729.81%2C481.07l-18.01-.2-62.28-.05h-8.49s-86.99%2C0-86.99%2C0h-9.15c-1.1-3.54-95.74%2C7.15-84.08-6%2C6.16-22.29%2C13.78-49.39%2C21.29-72.17%2C12.85-33.63-10.25-15.97-26.94-6.11-2.84%2C1.81-7.92%2C5-11.12%2C6.03-3.42%2C3.6-9.56%2C5.28-13.44%2C8.35-6.12%2C2.92-13.11%2C8.5-19.61%2C9.8-16.37-8.52-31.11-17.34-46.63-26.78-14.14-8.23-34.34-21.86-22.55%2C7.77%2C4.95%2C20.84%2C13.2%2C39.46%2C17.88%2C59.97-.33-1.55%2C7.3%2C18.64%2C4.31%2C19.2-30.59.8-61.07-.51-92.85.01-76.67-.97-163.85%2C1.97-239.44-.48%2C43.4-6.21%2C86.37-10.35%2C130.56-13.4l6.38-1.5c27.6-3.04%2C57.64-5.4%2C85.28-8.48%2C29.5-4.37%2C42.18%2C2.17%2C21.8-31.24l-3.63-6.59-4.09-7.91-4.32-8.35c-3.03-4.16-4.82-11.69-8.66-15.13l-1.77-6.3c-5.15-5.56-5.92-13.42-10.77-19.19-.89-2.83-1.61-5.97-4.35-7.92l-1.23-5.03c-4.04-3.83-5.58-11.57-8.85-16.13l-4.54-8.8-3.41-5.43-3.75-7.19-4.71-9.26c-2.13-5.2-6.69-10.75-7.68-16.4l-3.26-3.71c-1.73-5.85-4.84-11.02-8.32-15.9l-1.7-5.11c-1.27-.79-6.84-11.42-6.06-12.5l7.1%2C2.27c39.93%2C29.24%2C83.02%2C53.05%2C124.08%2C81.63l6.7%2C4.17c24.83%2C16.04%2C48.84%2C31.15%2C73.93%2C47.8%2C15.95%2C16.69%2C30.62-2.8%2C46.01-10.7-4.4%2C2.79%2C19.54-13.03%2C12.61-7.89%2C11.56-8.67%2C25.79-17.07%2C37.97-25.01l7.32-4.64c3.86-2.58%2C8.72-6.08%2C12.75-8.32-2.51%2C1.42%2C15.84-10.16%2C12.28-7.57%2C36.92-24.15%2C73.31-50.25%2C111.64-71.69-1.28%2C9.19-9.25%2C17.72-12.55%2C26.71l-2.51%2C3.54c-.67%2C3.27-1.99%2C5.59-4.39%2C7.88l-1.07%2C4.52c-2.33%2C2.49-3.33%2C4.9-3.94%2C8.34l-3.41%2C4.01c-4.99%2C15.9-16.54%2C29.98-21.32%2C45.45l-3.86%2C3.32c-2.8%2C13.56-14.08%2C24.65-17.26%2C38.57l-3.21%2C3.26c-3.83%2C8.57-7.04%2C17.98-12.6%2C25.15l-1.28%2C4.87c-4.83%2C7.5-20.49%2C29.68-3.37%2C30.28%2C40.69%2C3.73%2C81.31%2C8.75%2C122.11%2C12.7%2C38.26%2C3.6%2C76.98%2C5.29%2C114.89%2C12.84-18.73%2C1.35-33.78.03-53.45.67Z%22%2F%3E%3Cpath%20d%3D%22M416.49%2C289.69c-1.07%2C2.09-2.79%2C5.18-3.78%2C7.07-4.99%2C2.97-8.82-14.35-12.29-17.81l-4.08-8.08-4.26-8.46-3.76-7.01-4.01-7.48-4.19-7.83c-2.45-7.28-10.89-14.8-8.16-22.66%2C3.8-16.35%2C5.72-33.28%2C9.81-49.66%2C8.64-45.75%2C16.03-91.71%2C25.65-136.44l1.69-6.75c10.63%2C31.11%2C13.07%2C72.01%2C22.53%2C106.04.32%2C25.82%2C27.55%2C87.65%2C11.06%2C105.13l-1.15%2C5.12c-3.43%2C4.65-6.45%2C9.92-8.11%2C15.52l-3.31%2C4.71c-3.09%2C9.91-9.24%2C19.06-13.64%2C28.59Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.kc-macouleur-eyebrow::after {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: var(--kc-color-gold);
}

/* --- セクション区切り：色面でなく余白＋細罫線 ---------------------------- */
.kc-macouleur-divider {
  border: 0;
  border-top: 1px solid var(--kc-color-line);
  margin: 0;
}
.kc-macouleur-divider--gold {
  border-top-color: var(--kc-color-goldln);
}

/* --- ヘッダー（白＋下辺に金の細罫線） ------------------------------------ */
.kc-macouleur-header {
  background: var(--kc-color-base);
  border-bottom: 1px solid var(--kc-color-goldln);
}

/* --- フッター（白＋上辺に金の細罫線） ------------------------------------ */
.kc-macouleur-footer {
  background: var(--kc-color-base);
  border-top: 1px solid var(--kc-color-goldln);
  color: var(--kc-color-sub);
}

/* --- ヒーローの空気のグラデ ----------------------------------------------
   明度差中心・低彩度の微かなグラデ。ページ階層の目印に色を分ける：
     トップ（入口）       ＝ 白 → 淡いピンク（--kc-color-soft）
     下層ページ（--lower） ＝ 白 → 淡いシャンパン（--kc-color-champagne）
   ゴールドの面利用はこの淡いシャンパンの空気のグラデまで。 */
.kc-macouleur-hero {
  position: relative;
  overflow: hidden;
  /* 全幅(100vw)でも知覚できる「空気のグラデ」。低彩度ピンク(--kc-color-air-pink)を
     上部〜右上に置き、白(--kc-color-base)へなだらかに抜く。明度差中心・微か。 */
  background:
    radial-gradient(
      120% 95% at 82% -8%,
      var(--kc-color-air-pink) 0%,
      var(--kc-color-base) 58%
    );
  background-color: var(--kc-color-base); /* グラデ無効時のフォールバック地色 */
}
.kc-macouleur-hero--lower {
  /* 下層ページ＝白基調で統一（グラデ廃止）。design-spec の「下層＝淡シャンパン」方針は撤回。
     トップ（入口）のグラデ/スライダー/パララックスは従来どおり維持。 */
  background: var(--kc-color-base);
}
/* 下層では装飾レイヤー（ピンクの光）ごと非表示＝実績カードへの覆いかぶさり解消。
   パララックス対象の hero-bg も出さない（動きはトップのみ）。 */
.kc-macouleur-hero--lower .kc-macouleur-hero-bg {
  display: none;
}
/* 下層ヒーローは全画面フィット不要。上部の過剰な余白を詰める。
   ただしヘッダー回避のクリアランスには触れず、SWELLの .l-content padding-top
   （モバイル2em／PC≥960は4em）ぶん"だけ"を負マージンで相殺する（＝ナビと重ならない安全側）。
   ※以前 --kc-header-h（管理バー高さ込み）で相殺したらヘッダーと重なったため、
     クリアランスは残し l-content 余白のみ打ち消す方式に変更。
   .kc-macouleur-section の padding-block に確実に勝つよう2クラス併記（0,2,0）。 */
.kc-macouleur-hero--lower.kc-macouleur-section {
  margin-top: -2em;
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
}
@media (min-width: 960px) {
  .kc-macouleur-hero--lower.kc-macouleur-section {
    margin-top: -4em;
  }
}

/* トップヒーローの装飾レイヤー（淡いピンクの光＋極薄マーク）。
   パララックスはこの要素のみ custom.js で動かす（背景の装飾レイヤーのみ）。
   装飾は擬似要素で出力しブロックHTMLに直書きしない。 */
.kc-macouleur-hero-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -15%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.kc-macouleur-hero-bg::before {
  /* 淡いピンクの光。全幅でも比率を保つようビューポート基準でスケール（最小/最大でクランプ）。 */
  content: "";
  position: absolute;
  right: -4%;
  top: -6%;
  width: clamp(330px, 42vw, 620px);
  height: clamp(330px, 42vw, 620px);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--kc-color-air-pink) 0%,
    transparent 72%
  );
}
/* 注：以前あった ::after の ✦ 透かしは、全幅化で大きな菱形として目立つため削除。
   ✦ シグネチャは eyebrow と最終CTA に残る。装飾光は ::before（淡いピンクの光）のみ。 */

/* ヒーロー本文は装飾レイヤーの上に置く。 */
.kc-macouleur-hero > *:not(.kc-macouleur-hero-bg) {
  position: relative;
  z-index: 1;
}

/* --- ファーストビュー：ヒーロー＋実績バーをヘッダー下〜画面高に収める ---------
   親 .kc-macouleur-firstview（align:full）を、ビューポート高からヘッダー高
   （--kc-header-h。custom.js が #header 実測値を設定／未設定時は 80px）を引いた
   高さに確保。svh でモバイルのアドレスバー対策。min-height なので内容過多は縦に伸びる。
   ヒーローが余白を吸って伸び、実績バーは下端に置かれる。 */
.kc-macouleur-firstview {
  /* 全幅（画面端まで）。SWELL の .alignfull と同一手法をクラス自体にも持たせ、
     万一マークアップから align:full が外れても全幅になるよう保証する。
     left/width が同値なので .alignfull と併用しても二重オフセットにならない。
     スクロールバー幅（SWELLが --swl-scrollbar_width をJSで設定）も考慮。 */
  position: relative;
  left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
  width: calc(100vw - var(--swl-scrollbar_width, 0px));
  max-width: 100vw;
  margin-inline: 0;
}
/* 重要：SWELL/WPは core/group を .wp-block-group__inner-container で包み、
   SWELL CSS が `.alignfull > .wp-block-group__inner-container{max-width:var(--article_size)}`
   で中央に絞る。firstview ではこれを解除して中身（hero/trustbar）も全幅にする。
   SWELL（特異性 0,2,0）に確実に勝つため !important で上書き。 */
.kc-macouleur-firstview > .wp-block-group__inner-container {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
/* 高さ・縦並び（hero=flex:1で伸び、実績バーは下端）は「実際に hero/trustbar を
   子に持つ要素」に当てる必要がある。SWELLが inner-container を挟むため、firstview と
   その inner-container の両方に適用（inner-container の有無どちらでも成立）。 */
.kc-macouleur-firstview,
.kc-macouleur-firstview > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  /* SWELLの透過ヘッダーは絶対配置のオーバーレイ＝ドキュメントフローを取らない。
     よって FV は画面全高にし、ナビ分は下の hero の padding-top で空ける（trustbarは最下端）。
     旧版の calc(100svh - header-h) は下端に header-h の隙間が出て次セクションが覗いていた。 */
  min-height: 100vh;   /* 旧ブラウザ用フォールバック */
  min-height: 100svh;
}
/* hero/trustbar は inner-container の有無で親が変わるので子孫セレクタで指定。
   hero は grid + align-content:center で内容を縦中央に。flex だと内側 inner-container の
   margin-inline:auto と干渉して内容幅が縮むため grid を使う（内容は記事幅のまま中央）。
   padding-top で浮いた透過ナビ（--kc-header-h／custom.js が #header 実測）ぶんをクリア。 */
.kc-macouleur-firstview .kc-macouleur-hero {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 1カラム＝コンテナ全幅。内側は記事幅で中央 */
  align-content: center;                  /* 内容を縦中央に */
  padding-top: var(--kc-header-h, 80px);  /* オーバーレイのナビに内容が被らないよう確保 */
}
.kc-macouleur-firstview .kc-macouleur-trustbar {
  flex: 0 0 auto;
}
/* 短い画面・横向き：高さ固定を解除して内容優先（はみ出し回避）。 */
@media (max-height: 700px) {
  .kc-macouleur-firstview,
  .kc-macouleur-firstview > .wp-block-group__inner-container {
    min-height: 0;
  }
  .kc-macouleur-firstview .kc-macouleur-hero {
    justify-content: flex-start;
  }
}

/* --- 最終CTA帯（淡いピンク面＋金の上下細罫線＋ブランドマーク署名） -------- */
.kc-macouleur-final-cta {
  background: var(--kc-color-soft);
  border-top: 1px solid var(--kc-color-goldln);
  border-bottom: 1px solid var(--kc-color-goldln);
  text-align: center;
}
.kc-macouleur-final-cta::before {
  content: "";
  display: inline-block;
  height: 48px; /* 署名として大きめ（40〜56px目安・実機調整前提） */
  aspect-ratio: 815.58 / 509.73; /* 縦横比維持。高さ基準で幅が決まる（width:auto相当） */
  margin-bottom: 16px; /* 見出しとの署名らしい余白 */
  background-color: var(--kc-color-brand-pink); /* eyebrowと同じ変数管理（ブランドカラー追従） */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20815.58%20509.73%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M729.81%2C481.07l-18.01-.2-62.28-.05h-8.49s-86.99%2C0-86.99%2C0h-9.15c-1.1-3.54-95.74%2C7.15-84.08-6%2C6.16-22.29%2C13.78-49.39%2C21.29-72.17%2C12.85-33.63-10.25-15.97-26.94-6.11-2.84%2C1.81-7.92%2C5-11.12%2C6.03-3.42%2C3.6-9.56%2C5.28-13.44%2C8.35-6.12%2C2.92-13.11%2C8.5-19.61%2C9.8-16.37-8.52-31.11-17.34-46.63-26.78-14.14-8.23-34.34-21.86-22.55%2C7.77%2C4.95%2C20.84%2C13.2%2C39.46%2C17.88%2C59.97-.33-1.55%2C7.3%2C18.64%2C4.31%2C19.2-30.59.8-61.07-.51-92.85.01-76.67-.97-163.85%2C1.97-239.44-.48%2C43.4-6.21%2C86.37-10.35%2C130.56-13.4l6.38-1.5c27.6-3.04%2C57.64-5.4%2C85.28-8.48%2C29.5-4.37%2C42.18%2C2.17%2C21.8-31.24l-3.63-6.59-4.09-7.91-4.32-8.35c-3.03-4.16-4.82-11.69-8.66-15.13l-1.77-6.3c-5.15-5.56-5.92-13.42-10.77-19.19-.89-2.83-1.61-5.97-4.35-7.92l-1.23-5.03c-4.04-3.83-5.58-11.57-8.85-16.13l-4.54-8.8-3.41-5.43-3.75-7.19-4.71-9.26c-2.13-5.2-6.69-10.75-7.68-16.4l-3.26-3.71c-1.73-5.85-4.84-11.02-8.32-15.9l-1.7-5.11c-1.27-.79-6.84-11.42-6.06-12.5l7.1%2C2.27c39.93%2C29.24%2C83.02%2C53.05%2C124.08%2C81.63l6.7%2C4.17c24.83%2C16.04%2C48.84%2C31.15%2C73.93%2C47.8%2C15.95%2C16.69%2C30.62-2.8%2C46.01-10.7-4.4%2C2.79%2C19.54-13.03%2C12.61-7.89%2C11.56-8.67%2C25.79-17.07%2C37.97-25.01l7.32-4.64c3.86-2.58%2C8.72-6.08%2C12.75-8.32-2.51%2C1.42%2C15.84-10.16%2C12.28-7.57%2C36.92-24.15%2C73.31-50.25%2C111.64-71.69-1.28%2C9.19-9.25%2C17.72-12.55%2C26.71l-2.51%2C3.54c-.67%2C3.27-1.99%2C5.59-4.39%2C7.88l-1.07%2C4.52c-2.33%2C2.49-3.33%2C4.9-3.94%2C8.34l-3.41%2C4.01c-4.99%2C15.9-16.54%2C29.98-21.32%2C45.45l-3.86%2C3.32c-2.8%2C13.56-14.08%2C24.65-17.26%2C38.57l-3.21%2C3.26c-3.83%2C8.57-7.04%2C17.98-12.6%2C25.15l-1.28%2C4.87c-4.83%2C7.5-20.49%2C29.68-3.37%2C30.28%2C40.69%2C3.73%2C81.31%2C8.75%2C122.11%2C12.7%2C38.26%2C3.6%2C76.98%2C5.29%2C114.89%2C12.84-18.73%2C1.35-33.78.03-53.45.67Z%22%2F%3E%3Cpath%20d%3D%22M416.49%2C289.69c-1.07%2C2.09-2.79%2C5.18-3.78%2C7.07-4.99%2C2.97-8.82-14.35-12.29-17.81l-4.08-8.08-4.26-8.46-3.76-7.01-4.01-7.48-4.19-7.83c-2.45-7.28-10.89-14.8-8.16-22.66%2C3.8-16.35%2C5.72-33.28%2C9.81-49.66%2C8.64-45.75%2C16.03-91.71%2C25.65-136.44l1.69-6.75c10.63%2C31.11%2C13.07%2C72.01%2C22.53%2C106.04.32%2C25.82%2C27.55%2C87.65%2C11.06%2C105.13l-1.15%2C5.12c-3.43%2C4.65-6.45%2C9.92-8.11%2C15.52l-3.31%2C4.71c-3.09%2C9.91-9.24%2C19.06-13.64%2C28.59Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20815.58%20509.73%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M729.81%2C481.07l-18.01-.2-62.28-.05h-8.49s-86.99%2C0-86.99%2C0h-9.15c-1.1-3.54-95.74%2C7.15-84.08-6%2C6.16-22.29%2C13.78-49.39%2C21.29-72.17%2C12.85-33.63-10.25-15.97-26.94-6.11-2.84%2C1.81-7.92%2C5-11.12%2C6.03-3.42%2C3.6-9.56%2C5.28-13.44%2C8.35-6.12%2C2.92-13.11%2C8.5-19.61%2C9.8-16.37-8.52-31.11-17.34-46.63-26.78-14.14-8.23-34.34-21.86-22.55%2C7.77%2C4.95%2C20.84%2C13.2%2C39.46%2C17.88%2C59.97-.33-1.55%2C7.3%2C18.64%2C4.31%2C19.2-30.59.8-61.07-.51-92.85.01-76.67-.97-163.85%2C1.97-239.44-.48%2C43.4-6.21%2C86.37-10.35%2C130.56-13.4l6.38-1.5c27.6-3.04%2C57.64-5.4%2C85.28-8.48%2C29.5-4.37%2C42.18%2C2.17%2C21.8-31.24l-3.63-6.59-4.09-7.91-4.32-8.35c-3.03-4.16-4.82-11.69-8.66-15.13l-1.77-6.3c-5.15-5.56-5.92-13.42-10.77-19.19-.89-2.83-1.61-5.97-4.35-7.92l-1.23-5.03c-4.04-3.83-5.58-11.57-8.85-16.13l-4.54-8.8-3.41-5.43-3.75-7.19-4.71-9.26c-2.13-5.2-6.69-10.75-7.68-16.4l-3.26-3.71c-1.73-5.85-4.84-11.02-8.32-15.9l-1.7-5.11c-1.27-.79-6.84-11.42-6.06-12.5l7.1%2C2.27c39.93%2C29.24%2C83.02%2C53.05%2C124.08%2C81.63l6.7%2C4.17c24.83%2C16.04%2C48.84%2C31.15%2C73.93%2C47.8%2C15.95%2C16.69%2C30.62-2.8%2C46.01-10.7-4.4%2C2.79%2C19.54-13.03%2C12.61-7.89%2C11.56-8.67%2C25.79-17.07%2C37.97-25.01l7.32-4.64c3.86-2.58%2C8.72-6.08%2C12.75-8.32-2.51%2C1.42%2C15.84-10.16%2C12.28-7.57%2C36.92-24.15%2C73.31-50.25%2C111.64-71.69-1.28%2C9.19-9.25%2C17.72-12.55%2C26.71l-2.51%2C3.54c-.67%2C3.27-1.99%2C5.59-4.39%2C7.88l-1.07%2C4.52c-2.33%2C2.49-3.33%2C4.9-3.94%2C8.34l-3.41%2C4.01c-4.99%2C15.9-16.54%2C29.98-21.32%2C45.45l-3.86%2C3.32c-2.8%2C13.56-14.08%2C24.65-17.26%2C38.57l-3.21%2C3.26c-3.83%2C8.57-7.04%2C17.98-12.6%2C25.15l-1.28%2C4.87c-4.83%2C7.5-20.49%2C29.68-3.37%2C30.28%2C40.69%2C3.73%2C81.31%2C8.75%2C122.11%2C12.7%2C38.26%2C3.6%2C76.98%2C5.29%2C114.89%2C12.84-18.73%2C1.35-33.78.03-53.45.67Z%22%2F%3E%3Cpath%20d%3D%22M416.49%2C289.69c-1.07%2C2.09-2.79%2C5.18-3.78%2C7.07-4.99%2C2.97-8.82-14.35-12.29-17.81l-4.08-8.08-4.26-8.46-3.76-7.01-4.01-7.48-4.19-7.83c-2.45-7.28-10.89-14.8-8.16-22.66%2C3.8-16.35%2C5.72-33.28%2C9.81-49.66%2C8.64-45.75%2C16.03-91.71%2C25.65-136.44l1.69-6.75c10.63%2C31.11%2C13.07%2C72.01%2C22.53%2C106.04.32%2C25.82%2C27.55%2C87.65%2C11.06%2C105.13l-1.15%2C5.12c-3.43%2C4.65-6.45%2C9.92-8.11%2C15.52l-3.31%2C4.71c-3.09%2C9.91-9.24%2C19.06-13.64%2C28.59Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* 最終CTAのボタン群を中央寄せ（buttonsブロックは render 時 is-layout-flex）。
   保存マークアップは素のままにし、配置はここで担保（貼り付け検証の安全側）。 */
.kc-macouleur-final-cta .wp-block-buttons {
  justify-content: center;
}

/* --- 要素の見せ分け -------------------------------------------------------
   “概念”＝枠なし・アイコン主導（淡いピンクの円＋線アイコン） */
.kc-macouleur-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 13px;
  border-radius: 50%;
  background: #F5E5EA; /* 淡いピンクの円。トーンはヒーロー光と同系 */
}
.kc-macouleur-icon svg {
  stroke: var(--kc-color-ink);
}

/* “モノ”（画像・価格・ボタンを持つ）＝枠ありカード */
.kc-macouleur-card {
  background: var(--kc-color-base);
  border: 1px solid var(--kc-color-line);
  border-radius: 12px;
  padding: 16px 17px;
}

/* --- トップヒーロー：スライドショー（クロスフェードの土台） ----------------
   ルート .kc-macouleur-hero-slider／スライド .kc-macouleur-hero-slider__slide。
   custom.js が現在スライドに .is-active を付与。表示は opacity トランジションに委ねる。
   JS不発時は1枚目（first-child）を可視にしておくフォールバックを用意。 */
.kc-macouleur-hero-slider {
  position: relative;
  overflow: hidden;
}
.kc-macouleur-hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-out; /* フェード 0.8〜1.2s 目安 */
}
.kc-macouleur-hero-slider__slide.is-active {
  opacity: 1;
}
/* JS不発フォールバック：is-active が一切付かなければ1枚目を表示。 */
.kc-macouleur-hero-slider:not(:has(.is-active)) .kc-macouleur-hero-slider__slide:first-child {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* reduce 時は自動切替しない。1枚目のみ表示・トランジション無し。 */
  .kc-macouleur-hero-slider__slide {
    transition: none;
  }
}

/* --- 見出しスクロールリビール（土台） -------------------------------------
   custom.js が対象見出し（ヒーロータイトル／各セクションのh2）に .kc-macouleur-reveal
   を付与し、ビューに入ると .is-in を付ける。JS不発／reduce 時はクラスが付かず即表示。
   動き：左から右へ少し滑り込み（translateX -24px→0）＋透明→濃く。ease-out・1回のみ。
   単一クラスで動きを定義＝対象へ二重掛けにならない。 */
.kc-macouleur-reveal {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.kc-macouleur-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   トップページ用コンポーネント（top-page-structure.md T0〜T7）
   コアブロックのクラス（kc-macouleur-*）に対して整形。装飾は擬似要素／CSS mask。
   ========================================================================= */

/* --- セクションのリズム：全幅の帯＋内側コンテンツを記事幅に収める ----------
   各セクションは align:full（.alignfull）で全幅表示。背景・罫線は全幅に伸ばし、
   内側コンテンツだけ SWELL の記事幅（--article_size。未定義時は 1100px）に収め中央寄せ。
   ヒーローの装飾レイヤー（.kc-macouleur-hero-bg）は全幅のまま除外。 */
.kc-macouleur-section {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.kc-macouleur-section > :not(.kc-macouleur-hero-bg) {
  max-width: var(--article_size, 1100px);
  width: 100%; /* flex/grid親(hero)でも margin-auto に潰されず記事幅まで広がるよう確定 */
  margin-inline: auto;
}
/* 一般セクションの上辺に中立の細罫線（--ruled を付けたセクションのみ）。 */
.kc-macouleur-section--ruled {
  border-top: 1px solid var(--kc-color-line);
}

/* --- リード文（補助色・読みやすい幅） ------------------------------------ */
.kc-macouleur-lead {
  color: var(--kc-color-sub);
  margin-top: 0.6em;
}

/* T2 OEMの左ピンク罫線は撤去（他セクションと同じ素の見た目に揃える）。
   border-left と付随の padding-left を削除＝中身は他セクションの左端に揃う。
   .kc-macouleur-accent-left は OEM セクション専用クラスで他に未使用のため定義ごと撤去。
   （マークアップ上のクラスは残るが、対応CSSが無く無害。装飾は付かない。） */

/* --- T0 ヒーロー：見出し・レイアウト -------------------------------------- */
.kc-macouleur-hero-title {
  font-family: var(--kc-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.2rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: 0;
}
/* ヒーロー右側のスライダーに高さを与える（スライドは absolute）。
   形は角丸矩形でも卵型でもなく、有機的な流体シェイプ（豆／おにぎり寄り・1案固定）。
   border-radius多値だと楕円になり「尖り」が出せないため、CSS mask（インラインSVG）で輪郭を定義。
   viewBoxを4:3に合わせ mask-size:100% 100% でレスポンシブに伸縮（歪まない）。
   mask は子（スライド・画像）すべてを同じ輪郭で切り抜く＝object-fit画像も追従。 */
.kc-macouleur-hero-slider {
  aspect-ratio: 4 / 3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='none'%3E%3Cpath d='M36 10C66 2 96 6 108 26C116 40 112 52 104 64C98 72 96 78 88 80C80 82 74 76 64 78C44 82 16 80 10 56C5 36 16 16 36 10Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' preserveAspectRatio='none'%3E%3Cpath d='M36 10C66 2 96 6 108 26C116 40 112 52 104 64C98 72 96 78 88 80C80 82 74 76 64 78C44 82 16 80 10 56C5 36 16 16 36 10Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* スライド内のラベルを中央に。 */
.kc-macouleur-hero-slider__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--kc-color-sub);
}
/* スライド画像を枠いっぱいに固定（3枚のサイズ・位置のガタつきを防ぐ）。
   absolute＋inset:0＋object-fit:cover で同じ枠に揃え、親の流体シェイプに追従。 */
.kc-macouleur-hero-slider__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ken Burns：アクティブな画像だけ、ゆっくり拡大（1.0→1.08 / 8s ease-out）。
   旧版は 10s で、1スライドの表示時間（INTERVAL=4s）内にほぼ進まず知覚できなかった。
   表示窓に対して見える割合を上げるため 8s / 1.08 に。強さは実機で微調整する前提。
   非アクティブに戻ると scale(1) に戻る。reduce 時は付与しない。 */
@media (prefers-reduced-motion: no-preference) {
  .kc-macouleur-hero-slider__slide.is-active img {
    transform-origin: center;
    will-change: transform;
    animation: kc-macouleur-kenburns 8s ease-out forwards;
  }
}
@keyframes kc-macouleur-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* --- T2 概念アイコン（淡いピンクの円＋線アイコン）------------------------
   .kc-macouleur-icon（円）の中に CSS mask で線アイコンを描画（HTMLにSVGを書かない）。
   モディファイアでアイコンを切替。 */
.kc-macouleur-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  background-color: var(--kc-color-ink);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.kc-macouleur-icon--materials::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9.5'%20cy%3D'9.5'%20r%3D'5'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'15'%20r%3D'5'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9.5'%20cy%3D'9.5'%20r%3D'5'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'15'%20r%3D'5'%2F%3E%3C%2Fsvg%3E");
}
.kc-macouleur-icon--line::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3.2'%2F%3E%3Cpath%20d%3D'M12%203.2v2.4M12%2018.4v2.4M20.8%2012h-2.4M5.6%2012H3.2M18.2%205.8l-1.7%201.7M7.5%2016.5l-1.7%201.7M18.2%2018.2l-1.7-1.7M7.5%207.5%205.8%205.8'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3.2'%2F%3E%3Cpath%20d%3D'M12%203.2v2.4M12%2018.4v2.4M20.8%2012h-2.4M5.6%2012H3.2M18.2%205.8l-1.7%201.7M7.5%2016.5l-1.7%201.7M18.2%2018.2l-1.7-1.7M7.5%207.5%205.8%205.8'%2F%3E%3C%2Fsvg%3E");
}
.kc-macouleur-icon--promo::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%209.5v5a1%201%200%200%200%201%201h2l4.5%203.2V5.3L7%208.5H5a1%201%200%200%200-1%201Z'%2F%3E%3Cpath%20d%3D'M16%209.5a3.5%203.5%200%200%201%200%205'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%209.5v5a1%201%200%200%200%201%201h2l4.5%203.2V5.3L7%208.5H5a1%201%200%200%200-1%201Z'%2F%3E%3Cpath%20d%3D'M16%209.5a3.5%203.5%200%200%201%200%205'%2F%3E%3C%2Fsvg%3E");
}
/* 概念ブロックの簡易フロー（ご相談→…→納品）の矢印色。 */
.kc-macouleur-flow {
  color: var(--kc-color-sub);
}
.kc-macouleur-flow strong {
  color: var(--kc-color-pink);
  font-weight: 400;
}

/* --- T1 信頼の一撃（実績バー）：白＋上下の金の細罫線 ---------------------- */
.kc-macouleur-trustbar {
  border-top: 1px solid var(--kc-color-goldln);
  border-bottom: 1px solid var(--kc-color-goldln);
  text-align: center;
}
.kc-macouleur-stat {
  font-family: var(--kc-font-display);
  font-size: clamp(1.2rem, 3.5vw, 1.4rem);
  font-weight: 500;
  margin: 0;
}
.kc-macouleur-stat-label {
  font-size: 0.75rem;
  color: var(--kc-color-sub);
  margin: 0.25em 0 0;
}
/* SP：実績バーを2×2にコンパクト化（WPコアはSPで各カラム flex-basis:100%＝4段縦積みに
   なるため上書き）。縦を節約し、ファーストビュー1画面への収まりを助ける。
   ブレークポイントは WP コアの段組みスタック（781px）に合わせる。 */
@media (max-width: 781px) {
  /* WPコアはSPで段組みを flex-basis:100%!important＝4段縦積みにする。flex-basis 上書きは
     列間 gap との兼ね合いで2-upに崩れやすいので、コンテナを2列グリッドに置換して堅牢に2×2化。
     grid では flex-basis が無効化されるためコア規則と競合しない。特異度は2クラス併記で確保。 */
  .kc-macouleur-trustbar.kc-macouleur-section .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1rem;
  }
}

/* --- 画像プレースホルダー（写真素材は[要確認]。差し替えまでの明示プレース）--- */
.kc-macouleur-ph {
  background: var(--kc-color-soft);
  border-radius: 10px;
}
.kc-macouleur-ph--square { aspect-ratio: 1 / 1; }
.kc-macouleur-ph--4-3 { aspect-ratio: 4 / 3; }
.kc-macouleur-ph--16-9 { aspect-ratio: 16 / 9; }

/* --- 商品カードの価格・小ボタン ------------------------------------------ */
.kc-macouleur-price {
  font-size: 0.8rem;
  color: var(--kc-color-pink);
  margin: 0.4em 0 0.8em;
}

/* --- CTA：コアボタン（core/button ＋ .kc-macouleur-cta）-------------------
   第一CTA＝ピンク塗り＋白文字／第二CTA（--outline）＝枠線／--sm＝小サイズ。 */
.kc-macouleur-cta .wp-block-button__link {
  background-color: var(--kc-color-pink-cta);
  color: #fff;
  border: 1px solid var(--kc-color-pink-cta);
  border-radius: 8px;
  padding: 0.75em 1.5em;
  font-family: var(--kc-font-base);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease-out, color 0.2s ease-out,
    border-color 0.2s ease-out;
}
.kc-macouleur-cta .wp-block-button__link:hover,
.kc-macouleur-cta .wp-block-button__link:focus {
  background-color: var(--kc-color-pink);
  border-color: var(--kc-color-pink);
  color: #fff;
}
/* 第二CTA（枠線） */
.kc-macouleur-cta.kc-macouleur-cta--outline .wp-block-button__link {
  background-color: transparent;
  color: var(--kc-color-ink);
  border-color: #B7ABB0;
}
.kc-macouleur-cta.kc-macouleur-cta--outline .wp-block-button__link:hover,
.kc-macouleur-cta.kc-macouleur-cta--outline .wp-block-button__link:focus {
  background-color: transparent;
  color: var(--kc-color-pink-cta);
  border-color: var(--kc-color-pink-cta);
}
/* 小サイズ（商品カードの「shopを見る」等） */
.kc-macouleur-cta.kc-macouleur-cta--sm .wp-block-button__link {
  padding: 0.5em 1em;
  font-size: 0.75rem;
}

/* --- T5 お知らせ：無装飾の罫線リスト（core/latest-posts）------------------
   className は出力される <ul> 自身に付く（ul.kc-macouleur-newslist）。 */
ul.kc-macouleur-newslist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kc-color-line);
}
.kc-macouleur-newslist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kc-color-line);
}
.kc-macouleur-newslist .wp-block-latest-posts__post-date {
  font-size: 0.75rem;
  color: var(--kc-color-pink);
  margin: 0;
  order: -1;
}
.kc-macouleur-newslist a {
  font-size: 0.9rem;
  text-decoration: none;
}

/* --- T6 コラム：サムネ付きカードグリッド（core/latest-posts grid）---------
   className は出力される <ul> 自身に付く（ul.kc-macouleur-columnlist）。 */
ul.kc-macouleur-columnlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kc-macouleur-columnlist li {
  border: 1px solid var(--kc-color-line);
  border-radius: 12px;
  overflow: hidden;
}
.kc-macouleur-columnlist .wp-block-latest-posts__featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.kc-macouleur-columnlist .wp-block-latest-posts__post-title {
  display: block;
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  text-decoration: none;
}

/* =========================================================================
   OEMページ固有コンポーネント（トップの共通パーツで足りない2つ）
   ========================================================================= */

/* --- S5 選ばれる理由：金の細罫線で仕切る縦リスト -------------------------
   各項目（h4＋lead）を金の細罫線で仕切る。装飾は罫線のみ、色は変数経由。 */
.kc-macouleur-reason {
  border-top: 1px solid var(--kc-color-goldln);
  padding-block: 1.1rem;
}
.kc-macouleur-reason h4 {
  margin: 0 0 0.35em;
}

/* --- S8 実績ロスター：社名テキストのグリッド（金の細罫線で仕切る）--------
   ロゴ不可・社名テキストのみ。1pxのgapに金の罫線色を透かせて格子に見せる。
   SWELLはgroupの子を .wp-block-group__inner-container で包むため、そこにgrid。 */
.kc-macouleur-roster > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--kc-color-goldln);
  border: 1px solid var(--kc-color-goldln);
}
.kc-macouleur-roster > .wp-block-group__inner-container > * {
  margin: 0;
  padding: 1rem 0.75rem;
  background: var(--kc-color-base);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--kc-color-ink);
}
@media (max-width: 768px) {
  .kc-macouleur-roster > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- S1 ヒーロー右：実績4項目カード（2×2・白＋金の細罫線）----------------
   トップの実績バーとの差別化。数字＝游明朝(.kc-macouleur-stat)で大きめ、ラベル小。
   SWELLはgroupの子を inner-container で包むため、そこに2×2グリッド。 */
.kc-macouleur-herostats > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kc-macouleur-herostat {
  border: 1px solid var(--kc-color-goldln);
  border-radius: 10px;
  background: var(--kc-color-base);
  padding: 1.1rem 0.75rem;
  text-align: center;
}
.kc-macouleur-herostat .kc-macouleur-stat {
  margin: 0;
}
.kc-macouleur-herostat .kc-macouleur-stat-label {
  margin: 0.3em 0 0;
}

/* =========================================================================
   お問い合わせページ用（contact / thanks）
   ========================================================================= */

/* --- B. お問い合わせフォーム（CF7出力の整形）---------------------------------
   .kc-macouleur-form 配下にスコープ。白基調・無装飾・1カラム縦積み。色は変数経由。
   CF7の実idやHTMLは石田がGUIで作成。ここは見た目だけ担当。 */
.kc-macouleur-form .wpcf7 { margin-top: 1.5rem; }
/* CF7は各項目を <p> で包む。項目間に十分な余白（詰めない）。 */
.kc-macouleur-form .wpcf7-form p { margin: 0 0 1.4rem; }
.kc-macouleur-form label {
  display: block;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--kc-color-ink);
}
/* 入力欄：細枠＋十分な余白＋控えめ角丸。1カラム＝幅100%。 */
.kc-macouleur-form input[type="text"],
.kc-macouleur-form input[type="email"],
.kc-macouleur-form input[type="tel"],
.kc-macouleur-form input[type="url"],
.kc-macouleur-form select,
.kc-macouleur-form textarea {
  width: 100%;
  margin-top: 0.4em;
  padding: 0.7em 0.9em;
  font-size: 1rem;
  font-family: inherit;
  color: var(--kc-color-ink);
  background: var(--kc-color-base);
  border: 1px solid var(--kc-color-line);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kc-macouleur-form textarea { min-height: 9em; resize: vertical; }
/* フォーカスで枠＝機能ピンク(#C96591)。淡いリングも同系で。 */
.kc-macouleur-form input[type="text"]:focus,
.kc-macouleur-form input[type="email"]:focus,
.kc-macouleur-form input[type="tel"]:focus,
.kc-macouleur-form input[type="url"]:focus,
.kc-macouleur-form select:focus,
.kc-macouleur-form textarea:focus {
  outline: none;
  border-color: var(--kc-color-pink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc-color-pink) 18%, transparent);
}
/* 種別ラジオ・同意チェック：詰めず、選択色はブランド。 */
.kc-macouleur-form .wpcf7-list-item { display: inline-block; margin: 0.35em 1.3em 0.35em 0; }
.kc-macouleur-form .wpcf7-list-item-label { margin-left: 0.35em; }
.kc-macouleur-form input[type="radio"],
.kc-macouleur-form input[type="checkbox"] { accent-color: var(--kc-color-pink-cta); }
/* 同意リンク（/privacy-policy/）：機能ピンクで分かるように。 */
.kc-macouleur-form a { color: var(--kc-color-pink); text-decoration: underline; }
/* 送信ボタン：ピンクCTA（kc-macouleur-cta に寄せる）。 */
.kc-macouleur-form .wpcf7-submit {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.85em 2.4em;
  font-size: 1rem;
  font-family: inherit;
  color: var(--kc-color-base);
  background: var(--kc-color-pink-cta);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}
.kc-macouleur-form .wpcf7-submit:hover {
  filter: brightness(0.95);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--kc-color-pink-cta) 28%, transparent);
}
.kc-macouleur-form .wpcf7-spinner { margin-left: 0.6em; }
/* エラー表示：浮かないよう最低限（色は変数・小さく）。 */
.kc-macouleur-form .wpcf7-not-valid-tip { margin-top: 0.3em; font-size: 0.8rem; color: var(--kc-color-pink-cta); }
.kc-macouleur-form .wpcf7-not-valid { border-color: var(--kc-color-pink-cta); }
.kc-macouleur-form .wpcf7-response-output {
  margin: 1.2rem 0 0;
  padding: 0.8em 1em;
  border: 1px solid var(--kc-color-line);
  border-radius: 8px;
  font-size: 0.9rem;
}

/* --- Q3. 別の連絡手段：TEL/FAX/所在地（小さめ・アイコン＋テキスト）------------
   アイコンは既存 .kc-macouleur-icon と同じ線トーン（viewBox24・stroke幅1.5・round）で mask。
   色は ink（既存アイコンの表情と揃える）。サイズは小さめ22px。 */
.kc-macouleur-contact-methods > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2.5rem;
  margin-top: 1.2rem;
}
.kc-macouleur-contact-method {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  color: var(--kc-color-sub);
  font-size: 0.95rem;
}
.kc-macouleur-contact-method::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: var(--kc-color-ink);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.kc-macouleur-contact-method--tel::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E"); }
.kc-macouleur-contact-method--fax::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209V3h12v6%27%2F%3E%3Cpath%20d%3D%27M6%2018H5a2%202%200%200%201-2-2v-4a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v4a2%202%200%200%201-2%202h-1%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2715%27%20width%3D%2712%27%20height%3D%276%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209V3h12v6%27%2F%3E%3Cpath%20d%3D%27M6%2018H5a2%202%200%200%201-2-2v-4a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v4a2%202%200%200%201-2%202h-1%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2715%27%20width%3D%2712%27%20height%3D%276%27%2F%3E%3C%2Fsvg%3E"); }
.kc-macouleur-contact-method--addr::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); }

/* --- C. thanks 中央のブランドシンボル署名（王冠M・小・中央）------------------
   eyebrow/最終CTAと同じSVGマスク＋--kc-color-brand-pink。セクション幅内で mask center により
   自動的に中央へ。高さ40pxの小さめ署名。 */
.kc-macouleur-signmark {
  height: 40px;
  margin: 0 auto 1.2rem;
  background-color: var(--kc-color-brand-pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20815.58%20509.73%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M729.81%2C481.07l-18.01-.2-62.28-.05h-8.49s-86.99%2C0-86.99%2C0h-9.15c-1.1-3.54-95.74%2C7.15-84.08-6%2C6.16-22.29%2C13.78-49.39%2C21.29-72.17%2C12.85-33.63-10.25-15.97-26.94-6.11-2.84%2C1.81-7.92%2C5-11.12%2C6.03-3.42%2C3.6-9.56%2C5.28-13.44%2C8.35-6.12%2C2.92-13.11%2C8.5-19.61%2C9.8-16.37-8.52-31.11-17.34-46.63-26.78-14.14-8.23-34.34-21.86-22.55%2C7.77%2C4.95%2C20.84%2C13.2%2C39.46%2C17.88%2C59.97-.33-1.55%2C7.3%2C18.64%2C4.31%2C19.2-30.59.8-61.07-.51-92.85.01-76.67-.97-163.85%2C1.97-239.44-.48%2C43.4-6.21%2C86.37-10.35%2C130.56-13.4l6.38-1.5c27.6-3.04%2C57.64-5.4%2C85.28-8.48%2C29.5-4.37%2C42.18%2C2.17%2C21.8-31.24l-3.63-6.59-4.09-7.91-4.32-8.35c-3.03-4.16-4.82-11.69-8.66-15.13l-1.77-6.3c-5.15-5.56-5.92-13.42-10.77-19.19-.89-2.83-1.61-5.97-4.35-7.92l-1.23-5.03c-4.04-3.83-5.58-11.57-8.85-16.13l-4.54-8.8-3.41-5.43-3.75-7.19-4.71-9.26c-2.13-5.2-6.69-10.75-7.68-16.4l-3.26-3.71c-1.73-5.85-4.84-11.02-8.32-15.9l-1.7-5.11c-1.27-.79-6.84-11.42-6.06-12.5l7.1%2C2.27c39.93%2C29.24%2C83.02%2C53.05%2C124.08%2C81.63l6.7%2C4.17c24.83%2C16.04%2C48.84%2C31.15%2C73.93%2C47.8%2C15.95%2C16.69%2C30.62-2.8%2C46.01-10.7-4.4%2C2.79%2C19.54-13.03%2C12.61-7.89%2C11.56-8.67%2C25.79-17.07%2C37.97-25.01l7.32-4.64c3.86-2.58%2C8.72-6.08%2C12.75-8.32-2.51%2C1.42%2C15.84-10.16%2C12.28-7.57%2C36.92-24.15%2C73.31-50.25%2C111.64-71.69-1.28%2C9.19-9.25%2C17.72-12.55%2C26.71l-2.51%2C3.54c-.67%2C3.27-1.99%2C5.59-4.39%2C7.88l-1.07%2C4.52c-2.33%2C2.49-3.33%2C4.9-3.94%2C8.34l-3.41%2C4.01c-4.99%2C15.9-16.54%2C29.98-21.32%2C45.45l-3.86%2C3.32c-2.8%2C13.56-14.08%2C24.65-17.26%2C38.57l-3.21%2C3.26c-3.83%2C8.57-7.04%2C17.98-12.6%2C25.15l-1.28%2C4.87c-4.83%2C7.5-20.49%2C29.68-3.37%2C30.28%2C40.69%2C3.73%2C81.31%2C8.75%2C122.11%2C12.7%2C38.26%2C3.6%2C76.98%2C5.29%2C114.89%2C12.84-18.73%2C1.35-33.78.03-53.45.67Z%22%2F%3E%3Cpath%20d%3D%22M416.49%2C289.69c-1.07%2C2.09-2.79%2C5.18-3.78%2C7.07-4.99%2C2.97-8.82-14.35-12.29-17.81l-4.08-8.08-4.26-8.46-3.76-7.01-4.01-7.48-4.19-7.83c-2.45-7.28-10.89-14.8-8.16-22.66%2C3.8-16.35%2C5.72-33.28%2C9.81-49.66%2C8.64-45.75%2C16.03-91.71%2C25.65-136.44l1.69-6.75c10.63%2C31.11%2C13.07%2C72.01%2C22.53%2C106.04.32%2C25.82%2C27.55%2C87.65%2C11.06%2C105.13l-1.15%2C5.12c-3.43%2C4.65-6.45%2C9.92-8.11%2C15.52l-3.31%2C4.71c-3.09%2C9.91-9.24%2C19.06-13.64%2C28.59Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20815.58%20509.73%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M729.81%2C481.07l-18.01-.2-62.28-.05h-8.49s-86.99%2C0-86.99%2C0h-9.15c-1.1-3.54-95.74%2C7.15-84.08-6%2C6.16-22.29%2C13.78-49.39%2C21.29-72.17%2C12.85-33.63-10.25-15.97-26.94-6.11-2.84%2C1.81-7.92%2C5-11.12%2C6.03-3.42%2C3.6-9.56%2C5.28-13.44%2C8.35-6.12%2C2.92-13.11%2C8.5-19.61%2C9.8-16.37-8.52-31.11-17.34-46.63-26.78-14.14-8.23-34.34-21.86-22.55%2C7.77%2C4.95%2C20.84%2C13.2%2C39.46%2C17.88%2C59.97-.33-1.55%2C7.3%2C18.64%2C4.31%2C19.2-30.59.8-61.07-.51-92.85.01-76.67-.97-163.85%2C1.97-239.44-.48%2C43.4-6.21%2C86.37-10.35%2C130.56-13.4l6.38-1.5c27.6-3.04%2C57.64-5.4%2C85.28-8.48%2C29.5-4.37%2C42.18%2C2.17%2C21.8-31.24l-3.63-6.59-4.09-7.91-4.32-8.35c-3.03-4.16-4.82-11.69-8.66-15.13l-1.77-6.3c-5.15-5.56-5.92-13.42-10.77-19.19-.89-2.83-1.61-5.97-4.35-7.92l-1.23-5.03c-4.04-3.83-5.58-11.57-8.85-16.13l-4.54-8.8-3.41-5.43-3.75-7.19-4.71-9.26c-2.13-5.2-6.69-10.75-7.68-16.4l-3.26-3.71c-1.73-5.85-4.84-11.02-8.32-15.9l-1.7-5.11c-1.27-.79-6.84-11.42-6.06-12.5l7.1%2C2.27c39.93%2C29.24%2C83.02%2C53.05%2C124.08%2C81.63l6.7%2C4.17c24.83%2C16.04%2C48.84%2C31.15%2C73.93%2C47.8%2C15.95%2C16.69%2C30.62-2.8%2C46.01-10.7-4.4%2C2.79%2C19.54-13.03%2C12.61-7.89%2C11.56-8.67%2C25.79-17.07%2C37.97-25.01l7.32-4.64c3.86-2.58%2C8.72-6.08%2C12.75-8.32-2.51%2C1.42%2C15.84-10.16%2C12.28-7.57%2C36.92-24.15%2C73.31-50.25%2C111.64-71.69-1.28%2C9.19-9.25%2C17.72-12.55%2C26.71l-2.51%2C3.54c-.67%2C3.27-1.99%2C5.59-4.39%2C7.88l-1.07%2C4.52c-2.33%2C2.49-3.33%2C4.9-3.94%2C8.34l-3.41%2C4.01c-4.99%2C15.9-16.54%2C29.98-21.32%2C45.45l-3.86%2C3.32c-2.8%2C13.56-14.08%2C24.65-17.26%2C38.57l-3.21%2C3.26c-3.83%2C8.57-7.04%2C17.98-12.6%2C25.15l-1.28%2C4.87c-4.83%2C7.5-20.49%2C29.68-3.37%2C30.28%2C40.69%2C3.73%2C81.31%2C8.75%2C122.11%2C12.7%2C38.26%2C3.6%2C76.98%2C5.29%2C114.89%2C12.84-18.73%2C1.35-33.78.03-53.45.67Z%22%2F%3E%3Cpath%20d%3D%22M416.49%2C289.69c-1.07%2C2.09-2.79%2C5.18-3.78%2C7.07-4.99%2C2.97-8.82-14.35-12.29-17.81l-4.08-8.08-4.26-8.46-3.76-7.01-4.01-7.48-4.19-7.83c-2.45-7.28-10.89-14.8-8.16-22.66%2C3.8-16.35%2C5.72-33.28%2C9.81-49.66%2C8.64-45.75%2C16.03-91.71%2C25.65-136.44l1.69-6.75c10.63%2C31.11%2C13.07%2C72.01%2C22.53%2C106.04.32%2C25.82%2C27.55%2C87.65%2C11.06%2C105.13l-1.15%2C5.12c-3.43%2C4.65-6.45%2C9.92-8.11%2C15.52l-3.31%2C4.71c-3.09%2C9.91-9.24%2C19.06-13.64%2C28.59Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* --- 商品ページ P3 特長アイコン（既存 .kc-macouleur-icon と同じ線トーンで追加）------
   泡立ち／3色／エコ。viewBox24・stroke1.5・round・ink＝サイト全体のアイコン表情に統一。 */
.kc-macouleur-icon--foam::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2714%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2711%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2716%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2714%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2711%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2716%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E"); }
.kc-macouleur-icon--colors::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%279.5%27%20r%3D%273.3%27%2F%3E%3Ccircle%20cx%3D%2715.5%27%20cy%3D%279.5%27%20r%3D%273.3%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2715.5%27%20r%3D%273.3%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%279.5%27%20r%3D%273.3%27%2F%3E%3Ccircle%20cx%3D%2715.5%27%20cy%3D%279.5%27%20r%3D%273.3%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2715.5%27%20r%3D%273.3%27%2F%3E%3C%2Fsvg%3E"); }
.kc-macouleur-icon--eco::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%27%2F%3E%3Cpath%20d%3D%27M2%2021c0-3%201.85-5.36%205.08-6%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%27%2F%3E%3Cpath%20d%3D%27M2%2021c0-3%201.85-5.36%205.08-6%27%2F%3E%3C%2Fsvg%3E"); }

/* =====================================================================
   画像の額装ユーティリティ（任意）
   画像ブロック → 高度な設定 → 追加CSSクラス に1つ書くだけで適用。
     kc-macouleur-frame        淡いピンクの面が右下にチラ見（奥行き）
     kc-macouleur-frame--left  同上・左下にチラ見（画像が右側のとき向き）
     kc-macouleur-frame--line  金の細罫線が右下にチラ見（より控えめ）
     kc-macouleur-mat          淡いピンクの台紙の上に画像（マット額装）
   ※ 白・淡い背景で映える。淡いピンク面（最終CTA等）の上では付けない方が無難。
   ※ "ここぞ"の主役級の写真に絞って使う（全画像に付けない）。
   ===================================================================== */
.kc-macouleur-frame,
.kc-macouleur-frame--left,
.kc-macouleur-frame--line { position: relative; isolation: isolate; }

.kc-macouleur-frame::before,
.kc-macouleur-frame--left::before,
.kc-macouleur-frame--line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.kc-macouleur-frame::before {
  transform: translate(clamp(10px, 1.6vw, 18px), clamp(10px, 1.6vw, 18px));
  background: var(--kc-color-soft);
}
.kc-macouleur-frame--left::before {
  transform: translate(calc(-1 * clamp(10px, 1.6vw, 18px)), clamp(10px, 1.6vw, 18px));
  background: var(--kc-color-soft);
}
.kc-macouleur-frame--line::before {
  transform: translate(clamp(10px, 1.4vw, 16px), clamp(10px, 1.4vw, 16px));
  border: 1px solid var(--kc-color-goldln);
}
.kc-macouleur-frame img,
.kc-macouleur-frame--left img,
.kc-macouleur-frame--line img { position: relative; z-index: 1; }

.kc-macouleur-mat { background: var(--kc-color-soft); padding: clamp(10px, 2vw, 22px); }

/* --- C3 会社概要：無装飾の定義リスト（core/table を整形）--------------------
   崩れにくさ優先で core/table を採用。外枠・ストライプを除き、行を金の細罫線で仕切る。
   項目名列＝補助色・控えめ幅、値＝本文。SWELLの .post_content td/th 既定に勝つよう
   .kc-macouleur-deflist table td / th で指定（特異度0,1,2 ＞ 0,1,1）。 */
.kc-macouleur-deflist table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin: 1.2rem 0 0;
}
.kc-macouleur-deflist table th,
.kc-macouleur-deflist table td {
  text-align: left;
  vertical-align: top;
  padding: 0.85em 0.5em;
  border: 0;
  border-bottom: 1px solid var(--kc-color-goldln);
  font-weight: 400;
  line-height: 1.8;
}
/* 各行の先頭セル＝項目名（補助色・控えめ幅・折り返さない）。 */
.kc-macouleur-deflist table tr > :first-child {
  width: 8.5em;
  color: var(--kc-color-sub);
  white-space: nowrap;
}
.kc-macouleur-deflist table tr > :last-child {
  color: var(--kc-color-ink);
}
@media (max-width: 600px) {
  .kc-macouleur-deflist table tr > :first-child { width: 6em; }
}