@charset "UTF-8";
/******************************************************************
Theme Name: Cocopaver Theme
Theme URI: https://****.co.jp/
Description: Cocopaver様のオリジナルテーマです。
Version: 1.0.0
Author: cocopaver
Author URI: https://****.co.jp/
******************************************************************/
/* =============================================================
 * Design Tokens (CSS Variables)
 * 元データ: docs/figma-cache/tokens.json + spacing-survey.json
 * 余白方針: パターン B (CLAUDE.md 「Bootstrap utility と独自CSS の役割分担」参照)
 * ============================================================= */
:root {
  /* ===== Colors ===== */
  /* デザイナー指定の基本カラー 5 色 (_designer-notes.md 参照)
   * Figma Variables には #eceada は未登録だが、デザイナーが基本5色として明示。
   */
  --cocopaver-primary-dark: #445630; /* 深いグリーン */
  --cocopaver-primary:      #5a713f; /* メイングリーン (見出し同色) */
  --cocopaver-accent:       #cec79a; /* ベージュ */
  --cocopaver-cream:        #eceada; /* オフホワイト・クリーム (Figma ECEADA) */
  --cocopaver-bg-light:     #eceada; /* 明るいベージュ (背景系) ← デザイナー指定の基本5色目、Variables 未登録 */
  /* フロント HOW TO USE (.sec-how) 背景オーバーレイ (Figma: rgba(213, 208, 176, 0.8)) */
  --cocopaver-how-bg-tint:  rgb(213 208 176 / 80%);
  --text-main:              #272e28; /* 文字色 */
  --white:                  #ffffff;
  /* 補助 */
  --black:                  #242424;

  /* ===== Spacing ===== (4px 刻み + spacing-survey 頻出値) */
  --space-0:    0;
  --space-2:    2px;
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-13:   13px;
  --space-15:   15px;
  --space-16:   16px;
  --space-20:   20px;
  --space-24:   24px;
  --space-32:   32px;
  --space-40:   40px;
  --space-44:   44px;  /* SP container padding 例外値 */
  --space-48:   48px;
  --space-52:   52px;  /* card padding (right) */
  --space-56:   56px;
  --space-60:   60px;  /* card padding (left) */
  --space-64:   64px;  /* PC/SP section vertical 主要 */
  --space-72:   72px;
  --space-80:   80px;
  --space-96:   96px;
  --space-104:  104px; /* footer padding-top 系 */
  --space-120:  120px; /* PC section vertical 主要 */
  --space-148:  148px; /* PC container padding 例外値 */
  --space-160:  160px;
  --space-184:  184px; /* PC ヘッダー/フッター padding-x */
  --fv-sp-height-cap: 655px; /* top-sp FV_L2 + FV_R2 */

  /* ===== Border Radius ===== */
  --radius-xs:   2px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-2xl:  80px;
  --radius-full: 9999px;

  /* ===== Typography ===== */
  /* フォント: Figma 「コーダー様へ」メモ参照
   * - Zen Old Mincho:    日本語見出し系
   * - Noto Sans JP:      フォーム補助UI (文字数カウンター等)
   * - Playfair Display:  英語装飾 (PRODUCTS / Business 等のセクションタイトル)
   * - Body は system font 暫定
   */
  --font-base:    -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
  --font-sans-jp: "Noto Sans JP", "Helvetica Neue", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
  --font-mincho:  "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-display: "Playfair Display", "Times New Roman", serif;

  /* font-size (CLAUDE.md 改善: 参照テーマでは未対応の変数化) */
  --font-size-10:    10px;
  --font-size-xs:    12px;
  --font-size-13:    13px;
  --font-size-sm:    14px;
  --font-size-base:  16px;
  --font-size-lg:    18px;
  --font-size-xl:    20px;
  --font-size-22:    22px;
  --font-size-2xl:   24px;
  --font-size-30:    30px;
  --font-size-3xl:   32px;
  --font-size-4xl:   40px;
  --font-size-5xl:   50px;
  --font-size-6xl:   64px;

  /* line-height */
  --leading-tight:   1.2;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* font-weight */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}
.bg-primary {
  background-color: #3498db;
  color: #fff;
}
.text-primary {
  color: #3498db;
}
.bg-secondary-1 {
  background-color: #217dbb;
  color: #fff;
}
.text-secondary-1 {
  color: #217dbb;
}
.bg-secondary-2 {
  background-color: #196090;
  color: #fff;
}
.text-secondary-2 {
  color: #196090;
}
.bg-secondary-3 {
  background-color: #124364;
  color: #fff;
}
.text-secondary-3 {
  color: #124364;
}
.bg-secondary-4 {
  background-color: #0a2639;
  color: #fff;
}
.text-secondary-4 {
  color: #0a2639;
}
.bg-secondary-5 {
  background-color: #02090e;
  color: #fff;
}
.text-secondary-5 {
  color: #02090e;
}
.bg-secondary-tint-1 {
  background-color: #5faee3;
  color: #000;
}
.text-secondary-tint-1 {
  color: #5faee3;
}
.bg-secondary-tint-2 {
  background-color: #8bc4ea;
  color: #000;
}
.text-secondary-tint-2 {
  color: #8bc4ea;
}
.bg-secondary-analogous-1 {
  background-color: #34dbcb;
  color: #fff;
}
.text-secondary-analogous-1 {
  color: #34dbcb;
}
.bg-secondary-analogous-2 {
  background-color: #3445db;
  color: #fff;
}
.text-secondary-analogous-2 {
  color: #3445db;
}
.bg-secondary-complementary {
  background-color: #db7734;
  color: #fff;
}
.text-secondary-complementary {
  color: #db7734;
}
.bg-secondary-triad-1 {
  background-color: #db3498;
  color: #fff;
}
.text-secondary-triad-1 {
  color: #db3498;
}
.bg-secondary-triad-2 {
  background-color: #98db34;
  color: #fff;
}
.text-secondary-triad-2 {
  color: #98db34;
}
.bg-key-complement {
  background-color: #db7734;
  color: #fff;
}
.text-key-complement {
  color: #db7734;
}
.bg-key-analogous-1 {
  background-color: #34dbcb;
  color: #fff;
}
.text-key-analogous-1 {
  color: #34dbcb;
}
.bg-key-analogous-2 {
  background-color: #3445db;
  color: #fff;
}
.text-key-analogous-2 {
  color: #3445db;
}
.bg-key-triad-1 {
  background-color: #db3498;
  color: #fff;
}
.text-key-triad-1 {
  color: #db3498;
}
.bg-key-triad-2 {
  background-color: #98db34;
  color: #fff;
}
.text-key-triad-2 {
  color: #98db34;
}
.bg-key-shade-1 {
  background-color: #217dbb;
  color: #fff;
}
.text-key-shade-1 {
  color: #217dbb;
}
.bg-key-tint-1 {
  background-color: #5faee3;
  color: #000;
}
.text-key-tint-1 {
  color: #5faee3;
}
:root {
  --black: #333333;
  --primary: #3498db;
  --secondary: #217dbb;
  --key: #db7734;
}
html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
body {
  /* Cocopaver Base (冒頭 :root の Cocopaver Variables 経由) */
  color: var(--text-main);
  background-color: var(--white);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: 0.04em;
  /* 汎用設定 (参照テーマ踏襲) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  word-wrap: break-word;
  overflow-x: hidden;
  position: relative;
  margin: 0;
}
/* img: max-width / height / vertical-align は bootstrap-grid.css L219 で定義済。
   下の余白対策で display: block だけ追加。 */
img { display: block; }
/* a: text-decoration: none は bootstrap-grid.css L276 で定義済。
   Cocopaver では color を親継承化 (var(--text-main) 等を継承) + hover で opacity 変化 */
a {
  color: inherit;
  transition: opacity .2s ease;
}
a:hover { opacity: .75; }
/* .list-unstyled は bootstrap-grid.css L4693 で定義済 (padding-left: 0; list-style: none) — 重複定義回避で削除 */
.number-font {
  font-family: Arial, Helvetica, sans-serif;
}
a:hover {
  opacity: .75;
}
#breadcrumb {
  font-size: 60%;
  margin: 7px auto 0;
}
#breadcrumb ol {
  display: flex;
  align-items: center;
  max-width: calc(100%);
  list-style: none;
  overflow: auto;
  white-space: nowrap;
  padding-left: 0;
}
#breadcrumb ol li {
  margin-left: 0.5em;
}
#breadcrumb ol li:first-child {
  margin-left: 0;
}
#breadcrumb ol li a::after {
  color: var(--black);
  content: "＞";
  display: inline-block;
  line-height: 1.7;
  margin-left: 5px;
}
#breadcrumb ol li a:hover {
  opacity: .5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}
#breadcrumb li a {
  text-decoration: none;
}
button {
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
input[type="submit"] {
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
input[type="text"] {
  display: block;
  padding: 10px 2%;
  font-size: 1em;
  color: var(--black);
  -webkit-transition: background-color .24s ease-in-out;
  transition: background-color .24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid var(--bs-gray-400);
}
input[type="email"] {
  display: block;
  padding: 10px 2%;
  font-size: 1em;
  color: var(--black);
  -webkit-transition: background-color .24s ease-in-out;
  transition: background-color .24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid var(--bs-gray-400);
}
input[type="url"] {
  display: block;
  padding: 10px 2%;
  font-size: 1em;
  color: var(--black);
  -webkit-transition: background-color .24s ease-in-out;
  transition: background-color .24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid var(--bs-gray-400);
}
input[type="tel"] {
  display: block;
  padding: 10px 2%;
  font-size: 1em;
  color: var(--black);
  -webkit-transition: background-color .24s ease-in-out;
  transition: background-color .24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid var(--bs-gray-400);
}
input[type="date"] {
  display: block;
  padding: 10px 2%;
  font-size: 1em;
  color: var(--black);
  -webkit-transition: background-color .24s ease-in-out;
  transition: background-color .24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid var(--bs-gray-400);
}
textarea {
  display: block;
  padding: 10px 2%;
  font-size: 1em;
  color: var(--black);
  -webkit-transition: background-color .24s ease-in-out;
  transition: background-color .24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid var(--bs-gray-400);
  resize: vertical;
}
select {
  width: auto;
  border: 1px solid var(--bs-gray-400);
  padding: 10px 30px 10px 2%;
  -webkit-appearance: none;
  appearance: none;
  background-image: url(./library/images/material/select-arrow.svg);
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
}
.asterisk {
  color: var(--bs-red);
}
input[type="search"] {
  display: block;
  padding: 10px 2%;
  font-size: 16px;
  -webkit-transition: background-color .24s ease-in-out;
  transition: background-color .24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  width: calc(100% - 70px);
  height: 40px;
  line-height: 40px;
  border: 1px solid var(--bs-gray-400);
}
.searchform button {
  height: 40px;
  width: 50px;
  cursor: pointer;
  position: relative;
  border: none;
  border-radius: 4px;
  background: var(--bs-gray-100);
}
.searchform button::before {
  content: " ";
  background-image: url(./library/images/icon/search.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  width: 23px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.policy ul {
  list-style: none;
  padding-left: 0;
}
.policy ul li {
  position: relative;
  padding-left: 25px;
}
.policy ul li span {
  position: absolute;
  left: 0;
}
#post-not-found {
  border: 1px solid var(--primary);
  padding: 40px 20px;
  border-radius: 20px;
}
#post-not-found ul {
  list-style-type: disc;
  list-style-type: disc;
  list-style-type: disc;
  margin-left: 15px;
  margin-left: 15px;
  margin-left: 15px;
}
#post-not-found ul::marker {
  color: var(--primary);
}
#post-not-found ul li a {
  text-decoration: underline;
  text-decoration: underline;
  text-decoration: underline;
}
#post-not-found h2 {
  font-size: 2em;
  line-height: 1.2;
}
#post-not-found h3 {
  border-bottom: 2px solid var(--bs-gray-400);
  color: var(--black);
  position: relative;
  padding-left: 25px;
  line-height: 1.2;
  padding-bottom: 5px;
}
#post-not-found h3::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: var(--bs-gray-600) transparent transparent transparent;
  position: absolute;
  left: 0;
  top: calc(50% - 2.5px);
  transform: translateY(-50%);
}
table.form {
  margin-top: -15px;
}
table.form tr th {
  vertical-align: text-top;
  padding: 15px 0 0;
}
table.sp-block-table tr th {
  display: block;
  width: 100%;
  text-align: left;
}
table.sp-block-table tr td {
  display: block;
  width: 100%;
  text-align: left;
}
.category-name {
  padding: .2em .5em;
  opacity: .9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)";
  font-size: 65%;
}
@media print {
  #breadcrumb {
    font-size: 70%;
    margin: 1em auto 0;
  }
  #post-not-found {
    padding: 40px;
  }
  #post-not-found h2 {
    font-size: 2.5em;
  }
  table.sp-block-table tr th {
    display: table-cell;
    width: auto;
  }
  table.sp-block-table tr td {
    display: table-cell;
    width: auto;
  }
  table.form.sp-block-table tr th {
    padding: 20px 10px 20px 0;
    font-size: 20px;
    line-height: 1.2;
    width: 280px;
  }
}
@media screen and (min-width: 768px) {
  #breadcrumb {
    font-size: 70%;
    margin: 1em auto 0;
  }
  #post-not-found {
    padding: 40px;
  }
  #post-not-found h2 {
    font-size: 2.5em;
  }
  table.sp-block-table tr th {
    display: table-cell;
    width: auto;
  }
  table.sp-block-table tr td {
    display: table-cell;
    width: auto;
  }
  table.form.sp-block-table tr th {
    padding: 20px 10px 20px 0;
    font-size: 20px;
    line-height: 1.2;
    width: 280px;
  }
}
table {
  border-collapse: collapse;
}
table th, table td {
  width: 100%;
  display: inline-block;
  padding: .85em 0;
  text-align: left;
}
table th + td {
  padding-top: 0;
}
table td {
  border-bottom: 1px solid var(--bs-gray-400);
}
@media print, screen and (min-width: 768px) {
  table th, table td {
    display: table-cell;
    width: auto;
  }
  table tr {
    border-bottom: 1px solid var(--bs-gray-400);
  }
  table th + td {
    padding-top: .85em;
  }
  table td {
    border-bottom: none;
  }
  .company-table th {
    width: 40%;
  }
}
/* =============================================================
 * Cocopaver Layout
 * 色は最低限 (text-main / white / bg-light) のみ仮配色。
 * 装飾 (border / 影 / グラデ) は必要に応じて個別CSSで実装。
 * ============================================================= */
/* (Cocopaver Base = body / img / a / .list-unstyled は冒頭の base 領域 (L289 周辺) に統合済み — 重複定義回避) */
/* =============================================================
 * Container
 * Cocopaver 仕様。最大幅 1440px・breakpoint で段階的に左右 padding を拡大。
 * 1440px 超は中央寄せ + padding 維持で内側コンテンツが流動的に追従する。
 * ============================================================= */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-40); } }
@media (min-width: 992px)  { .container { padding-inline: var(--space-80); } }
@media (min-width: 1440px) { .container { padding-inline: var(--space-120); } }
/* =============================================================
 * Section vertical spacing (パターン B 主要値)
 * SP 40 → md 64 → lg 120 を共通変数 --sec-pad-y で適用する。
 * セレクタを重複3回書かず単一ブロックで宣言する。
 * ============================================================= */
.sec-about,
.sec-how,
.sec-products,
.sec-cta-double,
.sec-works,
.sec-news,
.sec-faq,
.sec-cta-long,
.cta-partner,
.page-works-list,
.page-blog-list,
.page-news-list,
.page-agency-merit,
.page-agency-contact,
.page-agency-shops,
.page-contact-form-section,
.page-thanks-message {
  --sec-pad-y: var(--space-40);
  padding-block: var(--sec-pad-y);
}
@media (min-width: 768px) {
  .sec-about,
  .sec-how,
  .sec-products,
  .sec-cta-double,
  .sec-works,
  .sec-news,
  .sec-faq,
  .sec-cta-long,
  .cta-partner,
  .page-works-list,
  .page-blog-list,
  .page-news-list,
  .page-agency-merit,
  .page-agency-contact,
  .page-agency-shops,
  .page-contact-form-section,
  .page-thanks-message {
    --sec-pad-y: var(--space-64);
  }
}
@media (min-width: 992px) {
  .sec-about,
  .sec-how,
  .sec-products,
  .sec-cta-double,
  .sec-works,
  .sec-news,
  .sec-faq,
  .sec-cta-long,
  .cta-partner,
  .page-works-list,
  .page-blog-list,
  .page-news-list,
  .page-agency-merit,
  .page-agency-contact,
  .page-agency-shops,
  .page-contact-form-section,
  .page-thanks-message {
    --sec-pad-y: var(--space-120);
  }
}
/* PRODUCTS / CTA-double / WORKS: 隣接セクション間でテクスチャの継ぎ目が出ないよう共通指定 */
.sec-products,
.sec-cta-double,
.sec-works {
  position: relative;
  background: rgba(213, 208, 176, 0.8);
}
.sec-products::before,
.sec-cta-double::before,
.sec-works::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("library/images/material/faq-bg-texture.webp") repeat center top /
    max(900px, 100vw) auto;
  background-attachment: fixed;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* =============================================================
 * Section heading
 * 英字 (Playfair Display) と和文 (Zen Old Mincho) を縦並び。
 * font-size と margin-bottom は SP 393 / PC 1440 の clamp 線形補完。
 * ============================================================= */
.sec-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: clamp(32px, calc(32px + 32 * (100vw - 393px) / 1047), 64px);
  text-align: center;
}
.sec-heading-en {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, calc(24px + 16 * (100vw - 393px) / 1047), 40px);
  letter-spacing: 0.1em;
}
.sec-heading-jp {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(24px, calc(24px + 8 * (100vw - 393px) / 1047), 32px);
  font-weight: var(--weight-medium);
}
/* Reference-site-style reveal for English heading text. */
[data-text-fade-in] {
  --text-fade-clip-bleed: 0.35em;

  overflow: visible;
  clip-path: inset(calc(var(--text-fade-clip-bleed) * -1) 0);
}
[data-text-fade-in] > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.1em);
  transition: opacity 0.75s ease, transform 0.75s ease;
  transition-delay: 0.2s;
  will-change: opacity, transform;
}
[data-text-fade-in].is-text-fade-in > span {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 992px) {
  .sec-how-group-en[data-text-fade-in] > span {
    transform: rotate(90deg) translateY(1.1em);
  }

  .sec-how-group-en[data-text-fade-in].is-text-fade-in > span {
    transform: rotate(90deg) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-text-fade-in] > span {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .sec-how-group-en[data-text-fade-in] > span {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .sec-how-group-en[data-text-fade-in] > span {
    transform: rotate(90deg);
  }
}
/* ==============================================================
   FAQ セクション
   ============================================================== */
.sec-faq {
  position: relative;
  isolation: isolate;
  background: rgba(213, 208, 176, 0.8);
  padding-block: var(--space-64);
}
.sec-faq::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("library/images/material/faq-bg-texture.webp") repeat-y center top /
    max(900px, 100vw) auto;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.sec-faq > .container {
  position: relative;
  z-index: 1;
}
@media (min-width: 1200px) {
  .sec-faq > .container {
    max-width: min(100%, 1440px);
    padding-inline: 0;
  }
}
@media (min-width: 992px) {
  .sec-faq {
    padding-block: var(--space-120);
  }

  .sec-faq::after {
    background-size: max(1440px, 100vw) auto;
  }
}
/* === 見出し === */
.sec-faq .sec-heading {
  gap: var(--space-8);
  margin-bottom: var(--space-40);
}
.sec-faq .sec-heading-en {
  font-size: clamp(32px, calc(32px + (64 - 32) * (100vw - 393px) / (1440 - 393)), 64px);
  color: var(--cocopaver-primary-dark);
  line-height: 1;
}
.sec-faq .sec-heading-jp {
  font-size: clamp(14px, calc(14px + (20 - 14) * (100vw - 393px) / (1440 - 393)), 20px);
  font-weight: 900;
  color: var(--cocopaver-primary-dark);
  letter-spacing: 0.1em;
}
@media (min-width: 992px) {
  .sec-faq .sec-heading {
    gap: var(--space-12);
    margin-bottom: var(--space-80);
  }
}
/* === Q&A リスト === */
.sec-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}
@media (min-width: 992px) {
  .sec-faq-list {
    gap: var(--space-80);
    max-width: min(100%, 1200px);
    margin-inline: auto;
  }
}
.sec-faq-item {
  border: none;
  interpolate-size: allow-keywords;
}
/* 質問 (詳細トリガ) */
.sec-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding-bottom: var(--space-20);
  border-bottom: 2px solid var(--cocopaver-accent);
  font-family: var(--font-mincho);
  font-size: clamp(16px, calc(16px + (24 - 16) * (100vw - 393px) / (1440 - 393)), 24px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--cocopaver-primary-dark);
  cursor: pointer;
  list-style: none;
}
.sec-faq-q::-webkit-details-marker,
.sec-faq-q::marker {
  display: none;
}
.sec-faq-q::after {
  content: "";
  display: block;
  width: 19px;
  height: 11px;
  flex-shrink: 0;
  background: url(library/images/icon/wave-line.svg) no-repeat center / contain;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}
.sec-faq-item[open] .sec-faq-q::after {
  transform: rotate(180deg);
}
@supports selector(::details-content) {
  .sec-faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size 0.32s ease,
      opacity 0.24s ease,
      content-visibility 0.32s allow-discrete;
  }

  .sec-faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sec-faq-q::after,
  .sec-faq-item::details-content {
    transition: none;
  }
}
@media (min-width: 992px) {
  .sec-faq-q {
    padding-bottom: var(--space-24);
  }
}
/* 回答 */
.sec-faq-a {
  margin: 0;
  padding-top: var(--space-16);
  font-family: var(--font-mincho);
  font-size: clamp(14px, calc(14px + (16 - 14) * (100vw - 393px) / (1440 - 393)), 16px);
  font-weight: var(--weight-regular);
  line-height: 1.94;
  letter-spacing: 0.02em;
  color: var(--text-main);
}
@media (min-width: 992px) {
  .sec-faq-a {
    line-height: 2.2;
    padding-top: var(--space-32);
  }
}
/* =============================================================
 * Header (PC + SP 共通)
 *
 * 構成:
 *   .header
 *     .header-main
 *       .header-pc       (PC ナビ: 1200px 以上で grid 表示)
 *         .header-nav-left  / .header-logo-wrap / .header-logo / .header-nav-right
 *         .header-actions
 *       .header-sp       (SP: ハンバーガーのみ)
 *
 * SP ベース (393px) → md/lg/xl で min-width 拡張する mobile-first 構成。
 * !important は既存挙動 (PC/SP 切替の上書き打ち消し) のため最小限に維持。
 * ============================================================= */
/* ===== 1. ルート / メイン帯 ===== */
.header {
  height: auto;
}
.header-main {
  position: relative;
  z-index: 110;
  min-height: var(--space-48);
  background: var(--cocopaver-primary-dark);
  color: var(--white);
}
/* ===== 2. PC ナビ骨格 ===== */
.header-pc {
  position: relative;
}
.header-nav-left {
  grid-column: 1;
  min-width: 0;
}
.header-nav-right {
  grid-column: 3;
  min-width: 0;
}
/* ===== 3. ロゴ (PC: 上方向にせり出すバッジ風) ===== */
.header-logo-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  /* 装飾固定: SVG 寸法と一致 */
  width: 249px;
  height: 107px;
  margin: 0;
  transform: translateX(-50%);
}
.header-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("library/images/material/header-logo-bg.svg") no-repeat center top / 249px 107px;
}
.header-logo {
  position: absolute;
  top: var(--space-16);
  left: 50%;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translateX(-50%);
  color: var(--text-main);
  text-decoration: none;
}
.header-logo .header-logo-img {
  width: 58px;
  height: auto;
}
.header-logo-tagline {
  font-family: var(--font-display);
  font-size: 0;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* ===== 4. アクション (右上の電話/LINE/お問合わせ) ===== */
.header-actions {
  position: absolute;
  top: var(--space-24);
  right: var(--space-64);
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  font-family: var(--font-mincho);
  /* SP ~ md は 15px 固定。PC/xl は @media で再指定。 */
  font-size: 15px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.header-line-link {
  display: grid;
  place-items: center;
  /* 装飾固定 (LINE 角丸ボタン) */
  width: 39px;
  height: 39px;
  border-radius: 10px;
  background: #273321;
  color: var(--white);
  font-family: var(--font-base);
  font-size: var(--font-size-10);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
}
/* ===== 5. PC ナビリスト ===== */
.header-nav-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-12);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  letter-spacing: 0.06em;
}
.header-nav-list a,
.header-nav-parent {
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
}
.header-nav-list > li {
  position: relative;
}
.header-nav-has-sub > a,
.header-nav-has-sub > .header-nav-parent {
  position: relative;
}
.header-nav-parent {
  cursor: default;
}
/* ===== 6. PC ナビ サブメニュー (hover 展開) ===== */
.header-nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  min-width: 160px;
  margin-top: var(--space-16);
  padding: var(--space-16) var(--space-24);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s ease, visibility 0.2s ease, margin-top 0.2s ease;
}
/* hover 領域埋め (タイトルとサブの間に空白を作らない) */
.header-nav-sub::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-16));
  left: 0;
  right: 0;
  height: var(--space-16);
}
.header-nav-sub a {
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
}
.header-nav-has-sub:hover > .header-nav-sub,
.header-nav-has-sub:focus-within > .header-nav-sub {
  visibility: visible;
  margin-top: var(--space-8);
  opacity: 1;
  pointer-events: auto;
}
/* ===== 7. SP Header (Figma SpMainheader: 393x66) ===== */
.header-sp {
  position: relative;
  min-height: 50px;
  /* !important: Bootstrap d-flex utility による justify-content 上書きを防ぐ。 */
  justify-content: flex-end !important;
  padding: 0 14px;
}
/* SP body は 50px、159x66 ロゴ背景は FV にせり出す */
.header-sp-logo {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 159px;
  height: 66px;
  background: url("library/images/material/header-logo-bg.svg") no-repeat center top / 159px 66px;
  transform: translateX(-50%);
  pointer-events: none;
}
.header-sp-logo img {
  display: block;
  width: 35px;
  height: 35px;
  margin: 10px auto 0;
  pointer-events: auto;
}
/* ===== 8. SP ハンバーガーボタン ===== */
.header-hamburger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--cocopaver-cream);
  cursor: pointer;
}
.header-hamburger img {
  display: block;
  width: 100%;
  height: 100%;
}
/* ===== 10. xl+ (1200px) PC グリッドレイアウト ===== */
@media (min-width: 1200px) {
  .header-main {
    min-height: 0;
  }

  .header-pc {
    /* !important: Bootstrap d-none d-xl-block utility の display 上書きを防ぐ。 */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 259px minmax(0, 1fr);
    column-gap: var(--space-24);
    align-items: center;
    height: 88px;
  }
  .header-pc.container {
    padding-inline: var(--space-80);
  }

  .header-actions {
    right: var(--space-32);
    font-size: var(--font-size-sm);
  }

  .header-nav-list {
    gap: var(--space-12);
    font-size: 13px;
    align-items: center;
  }

  .header-nav-list a:not(.header-line-link),
  .header-nav-parent {
    transition: color 300ms ease;
  }

  /* PC ナビ: テキストリンク・親ラベルのホバー/フォーカス (LINE 角丸ボタンは除外) */
  .header-nav-list a:not(.header-line-link):hover,
  .header-nav-list a:not(.header-line-link):focus-visible,
  .header-nav-parent:hover,
  .header-nav-parent:focus-visible,
  .header-nav-has-sub:hover > .header-nav-parent,
  .header-nav-has-sub:focus-within > .header-nav-parent {
    color: var(--cocopaver-accent);
  }

  /* ココペーバー便りサブメニュー (お知らせ / ブログ) */
  .header-nav-sub a {
    text-shadow: 0 0 4px var(--cocopaver-primary-dark);
  }
}
@media (min-width: 1200px) and (max-width: 1320px) {
  .header-nav-right .header-nav-list {
    justify-content: flex-start;
    gap: 5%;
  }
}
@media (min-width: 1321px) and (max-width: 1399px) {
  .header-nav-right .header-nav-list {
    justify-content: flex-start;
    gap: var(--space-32);
  }
}
/* ===== 11. 1321px+ デザイン上のアクション font-size 復帰 ===== */
@media (min-width: 1321px) {
  .header-actions {
    font-size: 15px;
    right: 57px;
  }
}
@media (min-width: 1400px) {
  .header-pc.container {
    padding-inline: var(--space-120);
  }
}
/* ===== 12. xxl+ (1440px) PC ナビ余白・タイポ調整 ===== */
@media (min-width: 1440px) {
  .header-pc.container {
    padding-inline: 112px;
    max-width: min(100%, 1440px);
  }

  .header-nav-list {
    align-items: center;
    font-size: var(--font-size-base);
    gap: var(--space-32);
  }
}
/* =============================================================
 * SP Nav Modal (ハンバーガーメニュー全画面オーバーレイ)
 *
 * Figma 2036:15016
 *   - メニュー top:164 / 6項目 gap 24
 *   - LINE_LOGO top:468 (= メニュー末から 40px 下)
 *   - CTA top:646 (画面下部固定 2 列)
 *
 * SP 専用なので min-width クエリは持たない (lg+ では .sp-nav は表示しない想定)。
 * ============================================================= */
/* ===== 1. body ロック / オーバーレイ枠 ===== */
html.is-sp-nav-open {
  overflow: hidden;
}
.sp-nav {
  --sp-nav-open-duration: 0.65s;
  --sp-nav-content-pause: 0.05s;
  --sp-nav-content-start-delay: calc(var(--sp-nav-open-duration) + var(--sp-nav-content-pause));
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  padding: 0;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform var(--sp-nav-open-duration) ease, visibility 0s var(--sp-nav-open-duration);
}
.sp-nav.is-open {
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--sp-nav-open-duration) ease, visibility 0s 0s;
}
/* ===== 2. 上部ヘッダー (スクロール後に2つ目ヘッダーから開いた場合の閉じる導線) ===== */
.sp-nav-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 50px;
  padding: 0 14px;
}
.sp-nav-head-logo {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 159px;
  height: 66px;
  background: url("library/images/material/header-logo-bg.svg") no-repeat center top / 159px 66px;
  transform: translateX(-50%);
}
.sp-nav-head-logo img {
  display: block;
  width: 35px;
  height: 35px;
  margin: 10px auto 0;
}
.sp-nav-head-hamburger {
  position: relative;
  z-index: 2;
}
.sp-nav-head-hamburger img {
  display: none;
}
.sp-nav-head-hamburger::before,
.sp-nav-head-hamburger::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  border-radius: var(--radius-full);
  background: currentColor;
  transform-origin: center;
}
.sp-nav-head-hamburger::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.sp-nav-head-hamburger::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* ===== 3. 内側スタック (メニュー + LINE) — modal 内部スクロール領域 ===== */
.sp-nav-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  min-height: 0;
  overflow-y: auto;
  /* top 164px は Figma 余白実測値 (4倍数外、SP 専用)、bottom 24 は CTA との余白 */
  padding: 164px 0 var(--space-24);
}
/* ===== 4. メニュー6項目 (Figma PC ナビ準拠 Zen Old Mincho Medium 16/1.5) ===== */
.sp-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
}
.sp-nav-list a,
.sp-nav-sub a {
  color: var(--white);
  text-decoration: none;
}
.sp-nav-list > li,
.sp-nav-line,
.sp-nav-cta a {
  --sp-nav-content-offset: 0s;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sp-nav.is-open .sp-nav-list > li,
.sp-nav.is-open .sp-nav-line,
.sp-nav.is-open .sp-nav-cta a {
  opacity: 1;
  transition-delay: calc(var(--sp-nav-content-start-delay) + var(--sp-nav-content-offset));
}
.sp-nav.is-open .sp-nav-list > li:nth-child(1) {
  --sp-nav-content-offset: 0s;
}
.sp-nav.is-open .sp-nav-list > li:nth-child(2) {
  --sp-nav-content-offset: 0.06s;
}
.sp-nav.is-open .sp-nav-list > li:nth-child(3) {
  --sp-nav-content-offset: 0.12s;
}
.sp-nav.is-open .sp-nav-list > li:nth-child(4) {
  --sp-nav-content-offset: 0.18s;
}
.sp-nav.is-open .sp-nav-list > li:nth-child(5) {
  --sp-nav-content-offset: 0.24s;
}
.sp-nav.is-open .sp-nav-list > li:nth-child(6) {
  --sp-nav-content-offset: 0.3s;
}
.sp-nav.is-open .sp-nav-line {
  --sp-nav-content-offset: 0.36s;
}
.sp-nav.is-open .sp-nav-cta a:nth-child(1) {
  --sp-nav-content-offset: 0.42s;
}
.sp-nav.is-open .sp-nav-cta a:nth-child(2) {
  --sp-nav-content-offset: 0.48s;
}
.sp-nav-has-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: gap 0.35s ease;
}
.sp-nav-has-sub.is-open {
  gap: var(--space-24);
}
.sp-nav-parent {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--white);
  font: inherit;
  cursor: pointer;
}
.sp-nav-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.35s ease;
  will-change: max-height, opacity, transform;
}
.sp-nav-has-sub.is-open .sp-nav-sub {
  max-height: 120px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* ===== 5. LINE バッジ ===== */
.sp-nav-line {
  text-align: center;
}
.sp-nav-line-link {
  display: inline-block;
}
.sp-nav-line-link img {
  display: block;
  width: var(--space-56);
  height: var(--space-56);
}
/* ===== 6. modal 底部 CTA (2 列: パートナー / お問合わせ) =====
 * modal 内部 flex の最終要素として常時底部に表示し、内側メニュー領域はその上で
 * 個別スクロールする。Figma 2036:15041 (top 646 / h 70 / w 393) は modal 高 716 の
 * 末端に一致するため、modal 内部の自然レイアウトで再現する。
 */
.sp-nav-cta {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* gap 7px / padding 7px は Figma SP-ハンバーガーメニュー 2036:15041 準拠 */
  gap: 7px;
  margin: 0;
}
.sp-nav-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 70px;
  padding: var(--space-16) 0;
  font-family: var(--font-mincho);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
.sp-nav-cta-partner {
  flex-direction: column;
  gap: 6px;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  border-top: 1px solid var(--cocopaver-cream);
}
.sp-nav-cta-contact {
  flex-direction: column;
  gap: var(--space-4);
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  padding-inline: 8px;
}
.sp-nav-cta-text-main,
.sp-nav-cta-text-sub {
  font-size: var(--font-size-sm);
  letter-spacing: 0.98px;
  line-height: 1.09;
}
.sp-nav-cta-text-sub {
  text-transform: uppercase;
}
.sp-nav-cta-text {
  min-width: 0;
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 1.1;
  text-box: trim-both text text;
  text-transform: uppercase;
  font-feature-settings: 'ordn' 1, 'salt' 1, 'dlig' 1;
}
.sp-nav-cta-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 3px;
}
.sp-nav-cta-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.sp-nav-cta-icon img {
  display: block;
  width: 23px;
  height: 18px;
}
.sp-nav-cta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 35x16 は Figma バッジ実測 */
  width: 35px;
  height: 16px;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  border-radius: 0;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 1.76px;
  line-height: 1.22;
  text-transform: uppercase;
  font-feature-settings: 'dlig' 1;
}
@media (prefers-reduced-motion: reduce) {
  .sp-nav,
  .sp-nav.is-open,
  .sp-nav-list > li,
  .sp-nav-line,
  .sp-nav-cta a,
  .sp-nav-has-sub,
  .sp-nav-sub {
    transition: none;
  }
}
/* ==============================================================
   FV (TOP, 画像 2 枚 + 中央キャプション重ね)
   ============================================================== */
.front-page {
  overflow-x: clip;
}
body.home {
  overflow-x: clip;
}
/* === レイアウト基盤 (SP base) === */
.fv {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
  /* height: min(80vh, var(--fv-sp-height-cap)); */
  height: calc(100dvh - 50px);
}
.fv::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 178px;
  left: -8px;
  right: -8px;
  height: 315px;
  pointer-events: none;
  background: var(--cocopaver-primary-dark);
  opacity: 0.18;
  filter: blur(6.5px);
  mix-blend-mode: multiply;
}
.fv-images {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  height: 100%;
}
.fv-images figure {
  position: relative;
  margin: 0;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
}
.fv-images picture {
  display: block;
  width: 100%;
  height: 100%;
}
.fv-images figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* === シーンA/B クロスフェード === */
.fv-images .fv-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}
.fv-images .fv-scene.is-active {
  opacity: 1;
}
.fv-images.is-scene-b .fv-scene-a {
  opacity: 0;
}
.fv-images.is-scene-b .fv-scene-b {
  opacity: 1;
}
.fv-images .fv-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .fv-images .fv-scene {
    transition: none;
  }
}
/* === 中央キャプション === */
.fv-caption-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.fv-caption {
  position: absolute;
  top: 45.5%;
  left: var(--space-24);
  right: var(--space-24);
  bottom: auto;
  transform: translateY(-50%);
  text-align: center;
  color: var(--white);
  pointer-events: none;
  background: transparent;
  border-radius: 0;
  white-space: normal;
  text-shadow: 0 3px 18px rgba(var(--text-main-rgb), 0.3);
}
@media (min-width: 576px) {
  .fv-caption {
    top: 45%;
  }
}
@media (min-width: 768px) {
  .fv-caption {
    top: 44%;
    left: var(--space-40);
    right: var(--space-40);
  }
}
.fv-caption-en {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 0 var(--space-24);
  font-family: var(--font-display);
}
.fv-caption-en-brand {
  font-size: var(--font-size-3xl);
}
.fv-caption-en-tagline {
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
}
.fv-caption-jp {
  display: flex;
  flex-direction: column;
  /* gap: var(--space-32); */
  margin: 0;
}
.fv-caption-jp-lead {
  font-family: var(--font-mincho);
  font-size: clamp(
    20px,
    calc(20px + (38 - 20) * (100vw - 393px) / (1440 - 393)),
    38px
  );
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  line-height: 1.75;
  -webkit-text-stroke: 1px rgba(68, 86, 48, 0.86);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 3px rgba(68, 86, 48, 0.95))
    drop-shadow(0 3px 8px rgba(68, 86, 48, 0.72));
  text-shadow:
    1px 0 0 rgba(68, 86, 48, 0.8),
    -1px 0 0 rgba(68, 86, 48, 0.8),
    0 1px 0 rgba(68, 86, 48, 0.8),
    0 -1px 0 rgba(68, 86, 48, 0.8),
    0 0 6.5px rgba(68, 86, 48, 1),
    0 3px 18px rgba(var(--text-main-rgb), 0.42);
}
.fv-caption-jp-brand {
  font-family: var(--font-mincho);
  font-size: clamp(
    48px,
    calc(48px + (64 - 48) * (100vw - 393px) / (1440 - 393)),
    64px
  );
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.7;
  -webkit-text-stroke: 1.4px rgba(68, 86, 48, 0.88);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 3px rgba(68, 86, 48, 0.95))
    drop-shadow(0 4px 10px rgba(68, 86, 48, 0.76));
  text-shadow:
    1px 0 0 rgba(68, 86, 48, 0.86),
    -1px 0 0 rgba(68, 86, 48, 0.86),
    0 1px 0 rgba(68, 86, 48, 0.86),
    0 -1px 0 rgba(68, 86, 48, 0.86),
    0 0 6.5px rgba(68, 86, 48, 1),
    0 4px 20px rgba(var(--text-main-rgb), 0.46);
}
@media (max-width: 390px) {
  .fv-caption-jp-lead {
    font-size: var(--font-size-lg);
  }
  .fv-caption-jp-brand {
    font-size: var(--font-size-4xl);
  }
}
/* === 装飾文字 (Figma SVG) === */
.fv-decoration {
  position: absolute;
  right: 62px;
  bottom: -11px;
  transform: none;
  z-index: 3;
  pointer-events: none;
}
.fv-decoration-tagline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(
    11px,
    calc(11px + (13 - 11) * (100vw - 393px) / (1440 - 393)),
    13px
  );
  color: var(--white);
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  margin-top: var(--space-4);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
/* === サイドCTA (PC固定表示) === */
.fv-side-cta {
  position: fixed;
  top: 166px;
  right: 0;
  z-index: 30;
  width: 62px;
  flex-direction: column;
  font-family: var(--font-mincho);
  letter-spacing: 0.12em;
}
.fv-side-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.fv-side-cta-partner {
  height: 162px;
  padding: var(--space-16) 0;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  line-height: 18px;
  writing-mode: vertical-rl;
  letter-spacing: 1.1px;
  white-space: nowrap;
}
.fv-side-cta-contact {
  height: 242px;
  gap: var(--space-4);
  padding: 28px 0;
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  text-align: center;
  font-variant-numeric: ordinal;
  font-feature-settings:
    "dlig" 1,
    "salt" 1;
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.fv-side-cta-contact img {
  display: block;
  width: 28px;
  height: 28px;
  inline-size: 28px;
  block-size: 28px;
  object-fit: contain;
}
.fv-side-cta-contact span {
  line-height: 1.1;
  letter-spacing: 1.92px;
}
.fv-side-cta-contact small {
  flex: 0 0 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 17px;
  height: 33px;
  min-width: 17px;
  min-height: 33px;
  align-self: center;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 1.92px;
  writing-mode: vertical-rl;
  text-align: center;
}
.fv-side-cta-mail {
  width: 18px;
  height: 14px;
  border: 1px solid currentColor;
  position: relative;
}
.fv-side-cta-mail::before,
.fv-side-cta-mail::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 11px;
  height: 1px;
  background: currentColor;
}
.fv-side-cta-mail::before {
  left: 0;
  transform: rotate(32deg);
}
.fv-side-cta-mail::after {
  right: 0;
  transform: rotate(-32deg);
}
/* === PC (992px〜) === */
@media (min-width: 992px) {
  .fv {
    height: calc(100dvh - 120px);
  }
  .fv::before {
    top: auto;
    right: auto;
    bottom: 0;
    left: clamp(40px, 7vw, 100px);
    width: clamp(440px, 36vw, 520px);
    height: 204px;
  }
  .fv-images {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  .fv-caption {
    top: auto;
    left: var(--space-80);
    right: auto;
    bottom: 72px;
    transform: none;
    text-align: left;
    white-space: nowrap;
  }
  .fv-caption-en-brand {
    font-size: var(--font-size-4xl);
  }
  .fv-caption-jp {
    gap: clamp(20px, 1.7vw, 24px);
  }
  .fv-caption-jp-lead {
    letter-spacing: 3.8px;
    line-height: 61px;
  }
  .fv-caption-jp-brand {
    letter-spacing: clamp(0.08em, calc(1.22vw - 8.58px), 0.14em);
    line-height: 1.35;
  }
  /* 991px以下は表示しない */
  .fv-decoration {
    left: calc(50% + 26px);
    right: auto;
    /* right: clamp(40px, 4.3vw, 62px); */
    /* bottom: clamp(-11px, -0.75vw, -6px); */
    bottom: 70px;
    text-align: right;
  }
  .fv-decoration-script {
    display: block;
    width: 400px;
    height: auto;
    /* aspect-ratio: 693 / 266; */
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.18));
  }
  .fv-decoration-tagline {
    /* font-size: clamp(11px, 1.4vw, 20px); */
    font-size: 12px;
    position: absolute;
    /* bottom: clamp(5.75rem, 8.5vw, 7rem); */
    bottom: 62px;
    right: 16px;
  }
}
@media (min-width: 1200px) {
  .fv-caption {
    bottom: 19px;
  }
  .fv-decoration {
    left: calc(50% + 19px);
    right: auto;
    bottom: 28px;
  }
  .fv-decoration-script {
    width: 525px;
  }

  .fv-decoration-tagline {
    font-size: 16x;
    bottom: 91px;
    right: 19px;
  }
}
@media (min-width: 1400px) {
  .fv-caption {
    bottom: 19px;
  }
  .fv-decoration {
    left: calc(50% - 20px);
    right: auto;
    bottom: -8px;
  }
  .fv-decoration-script {
    width: 672px;
  }

  .fv-decoration-tagline {
    font-size: 20px;
    bottom: 117px;
    right: 29px;
  }
}
@media (min-width: 1440px) {
  .fv-caption {
    left: var(--space-120);
  }
}
/* ==============================================================
   NEWS バー (FV直下、最新お知らせ 1件)
   ============================================================== */
.news-bar {
  position: relative;
  z-index: 5;
  width: calc(100% - var(--space-24));
  height: 79px;
  margin: calc(-79px - var(--space-12)) var(--space-24) var(--space-12) 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  border-radius: 0 4px 4px 0;
}
.news-bar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19px;
  grid-template-rows: 8px 36px;
  align-content: start;
  gap: 7px var(--space-16);
  width: 100%;
  height: 100%;
  padding: var(--space-16) 22px var(--space-16) var(--space-24);
  font-size: var(--font-size-xs);
}
.news-bar-label {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--text-main);
}
.news-bar-link {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19px;
  grid-template-rows: var(--space-16) var(--space-20);
  column-gap: var(--space-16);
  min-width: 0;
  color: var(--text-main);
  text-decoration: none;
}
.news-bar-date {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  line-height: var(--space-16);
  color: var(--cocopaver-primary);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.news-bar-title {
  max-width: none;
  overflow: hidden;
  font-family: var(--font-mincho);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-regular);
  line-height: var(--space-20);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-bar-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19px;
  grid-template-rows: var(--space-16) var(--space-20);
  column-gap: var(--space-16);
  margin: 0;
  min-width: 0;
  color: var(--text-main);
}
.news-bar-empty .news-bar-title {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  white-space: normal;
}
.news-bar-more {
  grid-column: 2;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  width: 19px;
  height: 19px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
  white-space: nowrap;
}
.news-bar-more::after {
  content: "";
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-left: 0;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
  transform: none;
}
/* === PC (992px〜) === */
@media (min-width: 992px) {
  .news-bar {
    width: 620px;
    height: 75px;
    margin: -75px 61px 0 auto;
    background: rgba(255, 255, 255, 0.9);
    padding: 0;
    border-radius: 4px 4px 0 0;
  }
  .news-bar-inner {
    display: flex;
    align-items: center;
    gap: var(--space-32);
    padding: 0 27px 0 25px;
    font-size: 15px;
    height: 77px;
  }
  .news-bar-link,
  .news-bar-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    column-gap: 28px;
    flex: 1;
  }
  .news-bar-label,
  .news-bar-date {
    font-size: 15px;
    line-height: 1;
  }
  .news-bar-date {
    grid-column: 1;
    grid-row: 1;
  }
  .news-bar-title {
    grid-column: 1;
    grid-row: 2;
    max-width: 280px;
    font-size: 18px;
    line-height: 1;
  }
  .news-bar-more {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    width: auto;
    height: auto;
    margin-left: 0;
    font-size: var(--font-size-13);
    line-height: 1;
  }
  .news-bar-more::after {
    margin-left: 19px;
    width: var(--font-size-2xl);
    height: var(--font-size-2xl);
  }
}
/* ==============================================================
   FRONT FOLLOW NAV (FV下の追従ナビ)
   ============================================================== */
.front-follow-nav {
  position: relative;
  z-index: 20;
  height: 50px;
  background: var(--cocopaver-bg-light);
}
.front-follow-nav.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.front-follow-nav-placeholder {
  display: none;
  height: 50px;
}
.front-follow-nav-placeholder.is-active {
  display: block;
}
.front-follow-nav-sp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--space-16);
}
.front-follow-nav-sp-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.front-follow-nav-sp-logo img {
  width: 35px;
  height: auto;
}
.front-follow-nav-hamburger.header-hamburger {
  display: grid;
  place-items: center;
  width: var(--space-32);
  height: var(--space-32);
  padding: 0;
  background: var(--cocopaver-primary-dark);
  border: 0;
  border-radius: var(--radius-full);
}
.front-follow-nav-hamburger.header-hamburger img {
  width: 16px;
  height: 15px;
}
.front-follow-nav-inner {
  display: none;
  height: 100%;
}
.front-follow-nav-inner a {
  text-decoration: none;
  white-space: nowrap;
}
.front-follow-nav-group {
  min-width: 0;
}
.front-follow-nav-actions {
  display: none;
}
.front-follow-nav-logo {
  justify-self: center;
}
.front-follow-nav-logo img {
  width: 58px;
  height: auto;
}
@media (min-width: 992px) {
  .front-follow-nav-hamburger.header-hamburger {
    width: var(--space-40);
    height: var(--space-40);
  }
}
@media (min-width: 1200px) {
  .front-follow-nav {
    height: 88px;
  }

  .front-follow-nav-placeholder {
    height: 88px;
  }

  .front-follow-nav-sp {
    display: none;
  }

  .front-follow-nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 259px minmax(0, 1fr);
    align-items: center;
    max-width: min(100%, 1440px);
    margin-inline: auto;
    padding-inline: var(--space-80);
    column-gap: var(--space-24);
    font-family: var(--font-mincho);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--cocopaver-primary-dark);
    text-align: center;
  }

  .front-follow-nav-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-12);
  }

  .front-follow-nav-inner a {
    transition: color 300ms ease;
  }

  .front-follow-nav-inner a:hover,
  .front-follow-nav-inner a:focus-visible {
    color: var(--cocopaver-accent);
  }

  .front-follow-nav .header-nav-list a:not(.header-line-link),
  .front-follow-nav .header-nav-parent {
    color: var(--cocopaver-primary-dark);
  }

  .front-follow-nav .header-nav-list a:not(.header-line-link):hover,
  .front-follow-nav .header-nav-list a:not(.header-line-link):focus-visible,
  .front-follow-nav .header-nav-parent:hover,
  .front-follow-nav .header-nav-parent:focus-visible,
  .front-follow-nav .header-nav-has-sub:hover > .header-nav-parent,
  .front-follow-nav .header-nav-has-sub:focus-within > .header-nav-parent {
    color: var(--cocopaver-accent);
  }

  .front-follow-nav .header-nav-sub a {
    color: var(--cocopaver-primary-dark);
    text-shadow: none;
  }

  .front-follow-nav-actions {
    position: absolute;
    top: var(--space-24);
    right: var(--space-32);
    align-items: center;
  }
}
@media (min-width: 1200px) and (max-width: 1320px) {
  .front-follow-nav-right .header-nav-list {
    justify-content: flex-start;
    gap: 5%;
  }
}
@media (min-width: 1321px) and (max-width: 1399px) {
  .front-follow-nav-right .header-nav-list {
    justify-content: flex-start;
    gap: var(--space-32);
  }

  .front-follow-nav-actions {
    right: 57px;
  }
}
@media (min-width: 1400px) {
  .front-follow-nav-inner {
    padding-inline: var(--space-120);
  }
}
@media (min-width: 1440px) {
  .front-follow-nav-inner {
    padding-inline: 112px;
    max-width: min(100%, 1440px);
    font-size: var(--font-size-base);
  }

  .front-follow-nav-group {
    gap: var(--space-32);
  }
}
/* ==============================================================
   FRONT SP CTA (SP: 最下部固定の2ボタン)
   ============================================================== */
.front-sp-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 7px;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.front-sp-cta.is-active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* SP nav modal が開いているときは modal 内 CTA に役割を譲り、
 * フロントページ用の固定 CTA は隠す (二重表示防止)。 */
html.is-sp-nav-open .front-sp-cta {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.front-sp-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 11px 0;
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
.front-sp-cta small {
  display: block;
  margin-top: 6px;
  font-size: var(--font-size-sm);
  line-height: 1.1;
  letter-spacing: 0.07em;
}
.front-sp-cta-partner {
  padding-block: 16px;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
}
.front-sp-cta-contact {
  flex-direction: row;
  gap: 3px;
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
}
.front-sp-cta-contact small {
  display: inline-grid;
  place-items: center;
  margin-top: 0;
  width: 35px;
  height: var(--space-16);
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1;
}
.front-sp-cta-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.front-sp-cta-icon img {
  display: block;
  width: 23px;
  height: 18px;
}
.front-sp-cta-text {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  justify-content: center;
}
/* =============================================================
 * Business CTA セクション (Figma 準拠)
 *   PC: 2列 (左 = 見出し+ボタン / 右 = 本文)
 *   SP: 縦並び (リード上 / ボタン下、ベース定義)
 *   variant: light (ABOUT 直後) / dark (Footer 上、デフォルト)
 *
 * SP ベース → md/lg で min-width クエリ上書きする mobile-first 構成。
 * ============================================================= */
/* ===== 1. セクション骨格 ===== */
.cta-partner {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding-block: var(--space-40);
}
.cta-partner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("library/images/material/cta-partner-overlay.webp") no-repeat center / cover;
  pointer-events: none;
}
.cta-partner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(10.5px);
  pointer-events: none;
}
.cta-partner > .container {
  position: relative;
  z-index: 1;
}
/* ===== 2. variant: dark (Footer 上) ===== */
.cta-partner-dark {
  background: var(--cocopaver-primary-dark);
  color: var(--white);
}
.cta-partner-dark::after {
  background: rgba(68, 86, 48, 0.82);
}
/* ===== 3. variant: light (ABOUT 直後) ===== */
.cta-partner-light {
  background: #b8b884;
  color: var(--white);
}
.cta-partner-light::after {
  background: rgba(184, 184, 132, 0.8);
}
/* ===== 4. 行 (Bootstrap row ベース 2 カラム) ===== */
.cta-partner-row {
  row-gap: var(--space-24);
  text-align: center;
}
/* ===== 5. 左ブロック (見出し + ボタン) ===== */
.cta-partner-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 2;
  gap: var(--space-24);
}
.cta-partner-head {
  /* grid stacking: Business と見出しを同セルに重ねる (Figma 320:2108)
   * grid-template-columns は max-content だが、SP (~ 393px) で和文タイトルが
   * 折り返せず親をはみ出すため、minmax(0, max-content) で親幅を上限にする。
   */
  display: grid;
  grid-template-columns: minmax(0, max-content);
  grid-template-rows: max-content;
  place-items: start center;
  max-width: 100%;
}
.cta-partner-en,
.cta-partner-title {
  grid-area: 1 / 1;
}
.cta-partner-en {
  align-self: start;
  margin: 0;
  color: var(--cocopaver-accent);
  font-family: var(--font-display);
  font-size: clamp(56px, calc(56px + 40 * (100vw - 393px) / 1047), 96px);
  letter-spacing: 0.1em;
  line-height: 0.8;
  text-transform: uppercase;
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}
.cta-partner-title {
  align-self: start;
  position: relative;
  margin: 0;
  margin-top: clamp(14px, calc(14px + 5 * (100vw - 393px) / 1047), 19px);
  font-family: var(--font-mincho);
  font-size: clamp(28px, calc(28px + 12 * (100vw - 393px) / 1047), 40px);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: center;
}
.cta-partner-action {
  margin: 0;
}
.cta-partner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-148);
  height: var(--space-148);
  border-radius: 50%;
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.cta-partner-dark .cta-partner-btn,
.cta-partner-light .cta-partner-btn {
  background: var(--white);
  color: var(--cocopaver-primary-dark);
}
.cta-partner-btn:hover,
.cta-partner-btn:focus-visible {
  background: var(--cocopaver-accent);
  color: var(--white);
  opacity: 1;
}
/* ===== 6. 右ブロック (本文) ===== */
.cta-partner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 1;
  gap: var(--space-20);
  font-family: var(--font-mincho);
}
.cta-partner-lead {
  margin: 0;
  font-size: clamp(20px, calc(20px + 4 * (100vw - 393px) / 1047), 24px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  line-height: 1.75;
  text-align: center;
}
.cta-partner-lead-line {
  display: inline;
}
.cta-partner-lead-line + .cta-partner-lead-line::before {
  content: "\A";
  white-space: pre;
}
.cta-partner-body {
  max-width: 618px;
  margin: 0;
  font-size: clamp(15px, calc(15px + 1 * (100vw - 393px) / 1047), 16px);
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-align: center;
}
.cta-partner-title,
.cta-partner-lead,
.cta-partner-body {
  text-align: center;
}
/* light variant SP ベース: ブロック中央寄せ (PC で右寄せに切替) */
.cta-partner-light .cta-partner-block,
.cta-partner-light .cta-partner-head {
  align-items: center;
}
/* ===== 7. md+ (768px) ===== */
@media (min-width: 768px) {
  .cta-partner {
    padding-block: var(--space-64);
  }
}
/* ===== 8. lg+ (992px) PC レイアウト ===== */
@media (min-width: 992px) {
  .cta-partner {
    min-height: 451px;
    padding-block: var(--space-80);
  }

  .cta-partner-row {
    column-gap: var(--space-48);
    row-gap: 0;
    justify-content: center;
    text-align: left;
  }

  .cta-partner-block {
    order: 0;
    flex: 0 0 auto;
    width: clamp(300px, 43.88%, 524px);
    align-items: center;
    gap: var(--space-40);
  }

  .cta-partner-content {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: 618px;
    align-items: flex-start;
    gap: var(--space-40);
  }

  .cta-partner-lead {
    line-height: 1.6666;
    text-align: center;
  }

  .cta-partner-lead-line {
    display: block;
  }
  .cta-partner-lead-line + .cta-partner-lead-line::before {
    content: none;
  }

  .cta-partner-body {
    line-height: 1.625;
    letter-spacing: 0.1em;
  }

  /* light variant: PC でボタン右寄せ・本文左 */
  .cta-partner-light .cta-partner-block {
    order: 2;
    align-items: flex-end;
  }
  .cta-partner-light .cta-partner-content {
    order: 1;
  }
  .cta-partner-light .cta-partner-head {
    align-items: flex-end;
  }
  .cta-partner-light .cta-partner-title,
  .cta-partner-light .cta-partner-lead {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  }
}
/* ===== 9. xxl+ (1440px) Figma canvas pixel-perfect 上書き ===== */
@media (min-width: 1440px) {
  .cta-partner > .container {
    /* Figma 1440px canvas の横パディング 123px (4 倍数外の Figma 固有値) */
    padding-inline: 123px;
  }
}
/* ==============================================================
   CTA-ABOUT (ABOUT直後専用)
   ベージュトーン。cta-endとは別実装で共有しない。
   ============================================================== */
.front-page {
  /* コンテンツを置く安全領域 */
  --front-cta-about-visible-height: 433px;
  /* CTA背景がHOWへ潜り込む量 */
  --front-cta-how-overlap: 280px;
  /* 後面: CTA写真そのものの透け具合 */
  --front-cta-back-image-opacity: 1;
  /* 後面: CTA写真に重ねる色膜。Figma: rgba(184,184,132,0.8) */
  --front-cta-back-tint-opacity: 0.8;
  /* 前面: HOWのベージュ色膜。下のCTA写真の透け具合に効く */
  --front-how-bg-tint-opacity: 0.8;
  /* 前面: HOWに重ねるテクスチャ画像。Figma: mix-blend-overlay */
  --front-how-front-texture-opacity: 0.8;
}
@media (min-width: 393px) {
  .front-page {
    --front-cta-how-overlap: 300px;
  }
}
@media (min-width: 576px) {
  .front-page {
    --front-how-bg-tint-opacity: 0.8;
  }
}
@media (min-width: 768px) {
  .front-page {
    --front-cta-about-visible-height: 400px;
    --front-cta-how-overlap: 130px;
  }
}
@media (min-width: 992px) {
  .front-page {
    --front-cta-about-visible-height: 244px;
    --front-cta-how-overlap: 196px;
  }
}
@media (min-width: 1200px) {
  .front-page {
    --front-cta-how-overlap: 206px;
  }
}
@media (min-width: 1440px) {
  .front-page {
    --front-cta-how-overlap: 206px;
  }
}
.cta-about {
  position: relative;
  z-index: 0;
  /* mix-blend-mode / backdrop-filter が後続の HOW セクションへ合成されないよう隔離 */
  isolation: isolate;
  overflow: hidden;
  /* 背景だけを HOW 上部へ潜らせる。Figma: PC 244+207 / SP 433+280 */
  min-height: calc(
    var(--front-cta-about-visible-height) + var(--front-cta-how-overlap)
  );
  padding-block: 0;
  background: transparent;
  color: var(--white);
}
.cta-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("library/images/material/cta-partner-overlay.webp") no-repeat
    center / cover;
  opacity: var(--front-cta-back-image-opacity);
  z-index: 0;
  pointer-events: none;
  /* Safari: isolation 内の backdrop-filter は効かないため画像側でブラー */
  filter: blur(10.5px);
  transform: scale(1.08);
  transform-origin: center center;
}
.cta-about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgb(184 184 132 / var(--front-cta-back-tint-opacity));
  mix-blend-mode: multiply;
}
.cta-about > .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  min-height: var(--front-cta-about-visible-height);
}
/* Bootstrap は row / col-12 まで。中の配置は .cta-about-row で管理する。 */
.cta-about-grid {
  width: 100%;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
/* === 内部レイアウト === */
.cta-about-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--space-20);
  text-align: center;
  margin-top: var(--space-64);
}
/* 見出し (英語+和文を重ね)
 * SP は 1fr で親幅内に収め、576px 以上は文字幅に合わせる。
 */
.cta-about-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content;
  place-items: center center;
  max-width: 100%;
}
.cta-about-en,
.cta-about-title {
  grid-area: 1 / 1;
}
.cta-about-en {
  margin: 0 0 0 9px;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 40px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cocopaver-accent);
  opacity: 0.2;
  user-select: none;
  pointer-events: none;
}
.cta-about-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 32px;
  font-weight: var(--weight-bold);
  line-height: calc(40 / 32);
  letter-spacing: 0.1em;
  text-wrap: balance;
}
.cta-about-action {
  margin: 0;
}
.cta-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.cta-about-btn:hover,
.cta-about-btn:focus-visible {
  background: var(--cocopaver-accent);
  color: var(--white);
  opacity: 1;
}
/* === 本文側コンテンツ === */
.cta-about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-24);
  font-family: var(--font-mincho);
}
.cta-about-lead {
  margin: 0;
  width: 100%;
  font-size: 18px;
  font-weight: var(--weight-medium);
  line-height: calc(31 / 20);
  letter-spacing: 0.04em;
}
@media (max-width: 350px) {
  .cta-about-lead {
    font-size: 16px;
  }
}
@media (min-width: 393px) {
  .cta-about-lead {
    font-size: 20px;
  }
}
@media (min-width: 576px) {
  .cta-about-content {
    gap: var(--space-16);
  }
  .cta-about-head {
    width: auto;
    grid-template-columns: minmax(0, max-content);
  }
  .cta-about-en {
    font-size: clamp(
      64px,
      calc(64px + (96 - 64) * (100vw - 393px) / (1440 - 393)),
      96px
    );
    letter-spacing: 0.1em;
  }
  .cta-about-title {
    font-size: clamp(
      32px,
      calc(32px + (40 - 32) * (100vw - 393px) / (1440 - 393)),
      40px
    );
    line-height: 40px;
  }
  .cta-about-lead {
    width: auto;
    font-size: clamp(
      20px,
      calc(20px + (24 - 20) * (100vw - 393px) / (1440 - 393)),
      24px
    );
  }
}
/* === PC (992px〜) === */
@media (min-width: 992px) {
  .cta-about-row {
    flex-direction: row;
    column-gap: var(--space-120);
    row-gap: 0;
    text-align: left;
    margin-top: var(--space-48)
  }
  .cta-about-content {
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
    max-width: min(100%, 843px);
    gap: var(--space-24);
  }
  .cta-about-block {
    flex: 0 0 148px;
    width: 148px;
  }
  .cta-about-head {
    place-items: start;
  }
  .cta-about-title {
    text-align: left;
  }
  .cta-about-lead {
    margin-top: var(--space-12);
    line-height: 40px;
    letter-spacing: 0.1em;
    text-align: left;
    white-space: nowrap;
  }
  .cta-about-title,
  .cta-about-lead {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  }
}
/* === XXL (1440px+) コンテナ追従 === */
@media (min-width: 1440px) {
  .cta-about > .container {
    padding-inline: clamp(96px, 8.5vw, 148px);
  }
}
/* ==============================================================
   CTA-END (FAQ直後専用)
   FAQ直後専用。背景合成はFigmaのベージュトーンに合わせる。
   ============================================================== */
.cta-end {
  position: relative;
  overflow: hidden;
  min-height: 0;
  margin-bottom: -1px;
  padding-block: var(--space-64) var(--space-48);
  background: transparent;
  color: var(--white);
}
.cta-end::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("library/images/material/cta-partner-overlay.webp") no-repeat
    center / cover;
  z-index: 0;
  pointer-events: none;
  /* Safari: backdrop-filter + mix-blend は不安定なため画像側でブラー */
  filter: blur(10.5px);
  transform: scale(1.08);
  transform-origin: center center;
}
.cta-end::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(184 184 132 / 80%);
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}
.cta-end > .container {
  position: relative;
  z-index: 1;
}
/* === 行レイアウト === */
.cta-end-row {
  row-gap: var(--space-32);
  text-align: center;
  align-items: flex-start;
}
/* === ボタン側ブロック === */
.cta-end-block {
  order: 1;
  display: contents;
}
/* 見出し (英語+和文を重ね) */
.cta-end-head {
  display: grid;
  order: 1;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start center;
  margin-inline: auto;
}
.cta-end-en,
.cta-end-title {
  grid-area: 1 / 1;
}
.cta-end-en {
  margin: 17px 0 0 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 3.249rem + 3.06vw, 6rem);
  letter-spacing: 0.1em;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--cocopaver-accent);
  opacity: 0.2;
  align-self: start;
  pointer-events: none;
  user-select: none;
}
.cta-end-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(32px, calc(32px + (40 - 32) * (100vw - 393px) / (1440 - 393)), 40px);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  line-height: calc(40 / 32);
  text-align: center;
  align-self: start;
}
.cta-end-action {
  order: 3;
  margin: 0;
  width: 100%;
  text-align: center;
  padding-top: 10px;
}
.cta-end-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.09em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.cta-end-btn:hover,
.cta-end-btn:focus-visible {
  background: var(--cocopaver-accent);
  color: var(--white);
  opacity: 1;
}
/* === 本文側コンテンツ === */
.cta-end-content {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-40);
  font-family: var(--font-mincho);
}
.cta-end-lead {
  margin: 0;
  font-size: min(1rem + 0.38vw, 1.5rem);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  line-height: calc(31 / 20);
  text-align: center;
}
.cta-end-lead-line {
  display: inline;
}
.cta-end-lead-line + .cta-end-lead-line::before {
  content: "\A";
  white-space: pre;
}
.cta-end-body {
  margin: 0;
  max-width: min(100%, 618px);
  font-size: clamp(0.875rem, 0.828rem + 0.19vw, 1rem);
  font-weight: var(--weight-regular);
  line-height: calc(22 / 14);
  letter-spacing: 0.1em;
  text-align: center;
}
/* === PC (992px〜) === */
@media (min-width: 992px) {
  .cta-end {
    min-height: 422px;
    padding-block: clamp(80px, 5.6vw, 96px);
  }
  .cta-end-row {
    column-gap: var(--space-48);
    row-gap: 0;
    text-align: left;
    justify-content: center;
  }
  .cta-end-en {
    margin: 0;
  }
  .cta-end-block {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: clamp(300px, 43.88%, 524px);
    gap: var(--space-40);
  }
  .cta-end-head,
  .cta-end-action {
    order: 0;
    width: auto;
  }
  .cta-end-content {
    order: 0;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
    max-width: min(100%, 618px);
    gap: clamp(18px, 3vw, 28px);
  }
  .cta-end-lead {
    letter-spacing: 0.1em;
    line-height: calc(40 / 24);
  }
  .cta-end-lead-line {
    display: block;
  }
  .cta-end-lead-line + .cta-end-lead-line::before {
    content: none;
  }
  .cta-end-body {
    line-height: calc(26 / 16);
    letter-spacing: 0.1em;
    text-align: left;
  }
}
/* === XXL (1440px+) コンテナ追従 === */
@media (min-width: 1440px) {
  .cta-end > .container {
    padding-inline: clamp(96px, 8.5vw, 148px);
  }
}
/* =============================================================
 * Footer
 *
 * 構成:
 *   .footer
 *     .container > .footer-inner
 *       .footer-main       (.footer-cta + .footer-body を囲む flex)
 *         .footer-cta      (TEL + .footer-cta-card-wrapper 内 2 カード)
 *         .footer-body     (会社情報 + ナビ)
 *       .footer-copyright  (帯)
 *
 * SP ベース → md/lg で min-width 拡張する mobile-first 構成。
 * font-size は SP/PC 二段以上の差があるものを clamp 化、それ以外は変数のみ。
 * ============================================================= */
.footer {
  position: relative;
  isolation: isolate;
  /* Figma フッター下地 #445630（--cocopaver-primary-dark） */
  background-color: var(--cocopaver-primary-dark);
  color: var(--white);
}
/* Figma: 下地 #445630 の上に faq-bg-texture を 50% で重ねる。
 * 通常の source-over だとテクスチャの明るい画素で緑が持ち上がるため、乗算で色相を #445630 側に寄せる */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("library/images/material/faq-bg-texture.webp") repeat-y center top /
    max(900px, 100vw) auto;
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.footer > .container {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .footer::before {
    background-size: max(1440px, 100vw) auto;
  }
}
.footer-inner {
  padding-block: var(--space-48) 0;
}
@media (min-width: 1152px) {
  .footer-inner {
    padding: 104px 62px 0;
  }
}
/* .footer-cta + .footer-body のラッパー */
.footer-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-32);
  min-width: 0;
}
@media (min-width: 992px) {
  .footer-main {
    gap: var(--space-64);
  }
}
/* =============================================================
 * 1. CTA エリア (上半分)
 * ============================================================= */
.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-20);
}
/* お問合わせ / パートナー 2 カードを横並び（SP は 1 行、PC は全体の右 2/3 相当） */
.footer-cta-card-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 13px;
  min-width: 0;
}
.footer-cta-card-wrapper .footer-cta-card {
  flex: 1 1 0;
  min-width: 0;
  /* 行の最大高さに合わせる（height:100% は親が auto 高さのとき不安定なため使わない） */
  align-self: stretch;
}
.footer-cta-tel {
  display: flex;
  min-width: 0;
}
@media (min-width: 992px) {
  .footer-cta {
    flex-direction: row;
    gap: var(--space-24);
  }

  /* 旧 3 等分グリッド相当: TEL 1/3 + カード列 2/3（各カード 1/3） */
  .footer-cta-tel {
    flex: 1 1 0;
    min-width: 0;
  }

  .footer-cta-card-wrapper {
    flex: 2 1 0;
    gap: var(--space-24);
  }
}
/* タイトル内の改行・中点（旧 Bootstrap d-none / d-md-* の代替） */
.footer-cta-card-title-sep {
  display: none;
}
@media (min-width: 768px) {
  .footer-cta-card-title-sep {
    display: inline;
  }
}
.footer-cta-card-title-br-sm {
  display: block;
}
@media (min-width: 768px) {
  .footer-cta-card-title-br-sm {
    display: none;
  }
}
/* ===== 1-1. TEL セクション ===== */
.footer-tel {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  min-width: 0;
  min-height: 0;
}
@media (min-width: 992px) {
  .footer-tel {
    flex-direction: column;
    gap: var(--space-24);
    text-align: center;
  }
}
.footer-tel-icon img,
.footer-tel-icon svg {
  flex-shrink: 0;
  /* 装飾固定: アイコン SVG 寸法 */
  width: 55px;
  height: var(--space-40);
}
.footer-tel-body {
  display: flex;
  flex-direction: column;
}
.footer-tel-label {
  font-family: var(--font-mincho);
  font-size: clamp(16px, calc(16px + 2 * (100vw - 393px) / 1047), 18px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.011em;
  line-height: 1;
}
.footer-tel-num {
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: clamp(30px, calc(30px + 10 * (100vw - 393px) / 1047), 40px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
}
/* ===== 1-2. CTA カード共通 (お問合わせ / パートナー) =====
 * 高さ揃え: ラッパー align-items: stretch + 子 align-self: stretch（縦は auto に任せる）。
 * min-height は SP の Figma カード下限 (151px) を保証するためのフロアとして残す。
 */
.footer-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  /* SP 高 151px は Figma カードサイズ準拠 (下限) */
  min-height: 151px;
  padding: var(--space-16) 0 var(--space-8);
  border-radius: var(--radius-xs);
  font-family: var(--font-mincho);
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-cta-card:hover {
  opacity: 0.8;
}
@media (min-width: 992px) {
  .footer-cta-card {
    justify-content: center;
    gap: var(--space-12);
    min-height: 144px;
    padding: var(--space-24) var(--space-16) var(--space-16);
  }
  .footer-tel-label, .footer-tel-num {
    line-height: 1.5;
  }
}
.footer-cta-card-icon img,
.footer-cta-card-icon svg {
  width: auto;
  height: auto;
  max-width: var(--space-40);
  max-height: var(--space-40);
}
.footer-cta-card-title {
  display: block;
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 0.953rem + 0.19vw, 1.125rem);
  font-weight: var(--weight-semibold);
  letter-spacing: 16%;
  line-height: 1.37;
}
.footer-cta-card-partner .footer-cta-card-title {
  font-size: clamp(0.875rem, 0.781rem + 0.38vw, 1.125rem);
  letter-spacing: 2%;
}
@media (min-width: 992px) {
  .footer-cta-card-title {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.16em;
    line-height: 1.5;
  }
  .footer-cta-card-partner .footer-cta-card-title {
    letter-spacing: 16%;
  }
}
.footer-cta-card-badge {
  display: inline-block;
  margin-left: 0;
  padding: var(--space-2) var(--space-8);
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-family: var(--font-base);
  font-size: var(--font-size-xs);
  vertical-align: middle;
}
.footer-cta-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 文言が少ないカードでも矢印をカード下端付近へ（lg は .footer-cta-card-title の flex-grow と併用） */
  margin-top: auto;
}
@media (min-width: 992px) {
  .footer-cta-card-badge {
    margin-left: var(--space-4);
  }
}
@media (min-width: 992px) {
  .footer-cta-card-arrow {
    margin-top: 0;
  }
}
.footer-cta-card-arrow img {
  display: block;
  width: var(--space-24);
  height: var(--space-24);
}
/* お問合わせカード (ベージュ背景) */
.footer-cta-card-contact {
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
}
/* パートナーカード (ライトグレー背景) */
.footer-cta-card-partner {
  background: #f3f3f3;
  color: var(--cocopaver-primary-dark);
}
/* =============================================================
 * 2. フッター本体 (会社情報 + ナビ)
 * ============================================================= */
.footer-body {
  display: grid;
  grid-template-columns: 1fr;
  /* align-items: stretch; */
}
@media (min-width: 992px) {
  .footer-body {
    /* 会社情報 : 仕切り(1px) : ナビ = 1 : 0 : 2。仕切りは column-gap で左右対称の溝の中央に置く */
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 2fr);
    column-gap: var(--space-24);
    /* align-items: stretch; */
  }
}
@media (min-width: 1280px) {
  .footer-body {
    column-gap: var(--space-56);
  }
}
/* PC の2列間の縦線（グリッド中央トラック。SP では非表示のためレイアウトに影響しない） */
.footer-body-divider {
  display: none;
}
@media (min-width: 992px) {
  .footer-body-divider {
    display: block;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
  }
}
.footer-info {
  margin-bottom: var(--space-20);
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-info {
    padding-right: var(--space-48);
  }
}
@media (min-width: 992px) {
  .footer-info {
    margin-bottom: 0;
    padding-right: 0;
  }
}
.footer-distributor {
  margin-bottom: 0;
  font-family: var(--font-mincho);
  font-size: clamp(14px, calc(14px + 2 * (100vw - 393px) / 1047), 16px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.footer-company {
  margin-bottom: var(--space-12);
  font-family: var(--font-mincho);
  font-size: clamp(20px, calc(20px + 2 * (100vw - 393px) / 1047), 22px);
  font-weight: var(--weight-bold);
  letter-spacing: 1.2px;
  line-height: 1.5;
}
.footer-address {
  margin-bottom: 0;
  font-family: var(--font-mincho);
  font-size: clamp(14px, calc(14px + 2 * (100vw - 393px) / 1047), 16px);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
/* ===== 2-1. ナビゲーション (SP 縦 2列 / PC 横 2x4 grid) ===== */
.footer-nav {
  padding-top: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  font-family: var(--font-mincho);
  font-size: clamp(0.813rem, 0.789rem + 0.1vw, 0.875rem);
  font-weight: var(--weight-regular);
  letter-spacing: 0.03em;
  min-width: 0;
}
@media (min-width: 992px) {
  .footer-nav {
    display: flex;
    align-items: center;
    align-self: center;
    height: auto;
    min-height: 0;
    padding-top: 0;
    border-top: none;
    letter-spacing: 0.03em;
  }
}
.footer-nav a {
  color: var(--white);
  text-decoration: none;
}
.footer-nav a:hover {
  opacity: 0.7;
}
.footer-nav-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 1fr 1fr;
  gap: 0;
  line-height: 2;
  width: 100%;
  min-width: 0;
}
@media (min-width: 992px) {
  .footer-nav-list {
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 0 var(--space-12);
    line-height: 2.41;
  }
}
@media (min-width: 1280px) {
  .footer-nav-list {
    gap: 0 var(--space-32);
  }
}
/* =============================================================
 * 3. コピーライト帯
 * ============================================================= */
.footer-copyright {
  font-family: var(--font-mincho);
  font-size: clamp(10px, calc(10px + 4 * (100vw - 393px) / 1047), 14px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding-block: var(--space-12) var(--space-64);
}
@media (min-width: 992px) {
  .footer-copyright {
    padding-block: var(--space-40) var(--space-24);
  }
}
/* =============================================================
 * Page Hero (下層共通ヒーロー)
 *
 * Figma 構造:
 *   .page-hero (1440x280 PC / 393x105 SP)
 *     - 背景写真 (page-hero-{slug}{,-sp}.jpg)
 *     - 暗色オーバーレイ (linear-gradient で表現)
 *     - 英字タイトル .page-hero-en (Playfair Display, opacity 0.3, ベージュ)
 *     - 和文タイトル .page-hero-jp (Zen Old Mincho Bold, 白)
 *
 * 過去に英字・和文タイトルを画像へ焼き込み SP で `opacity:0` 隠す運用をしていたが、
 * 多言語化・SEO・テキスト編集が破綻するため、画像は背景写真のみとし、英字/和文は
 * すべて HTML/CSS で描画する構造に戻した。背景画像はデザイン PNG をブラーした
 * クリーンな写真 (scripts/extract-page-hero-images.mjs)。
 * ============================================================= */
/* ===== 1. 共通レイアウト ===== */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(105px, calc(105px + 175 * (100vw - 393px) / 1047), 280px);
  padding-block: 0;
  background-color: var(--cocopaver-bg-light);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 暗緑オーバーレイ。Figma では Rectangle37 が hero 全面に乗っている想定で、
   写真の上に半透明の cocopaver-primary-dark トーンを敷いて白テキストを読める
   ようにしている。各ページ固有 CSS でも同色系の overlay を継続使用する。 */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(68, 86, 48, 0.18), rgba(68, 86, 48, 0.18));
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
}
/* ===== 2. タイトル (en/jp を同セルに重ねる) ===== */
.page-hero-en,
.page-hero-jp {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  justify-self: center;
  align-self: center;
  text-align: center;
}
.page-hero-en {
  color: rgba(206, 199, 154, 0.3);
  font-family: var(--font-display);
  font-size: clamp(36px, calc(36px + 60 * (100vw - 393px) / 1047), 96px);
  line-height: 40px;
  letter-spacing: clamp(3.6px, calc(3.6px + 6 * (100vw - 393px) / 1047), 9.6px);
}
.page-hero-jp {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: clamp(20px, calc(20px + 20 * (100vw - 393px) / 1047), 40px);
  line-height: clamp(40px, calc(40px + 10 * (100vw - 393px) / 1047), 50px);
  letter-spacing: clamp(2px, calc(2px + 2 * (100vw - 393px) / 1047), 4px);
}
/* ===== 3. ページ別背景画像 (新規ページが増えたらここに追記) =====
 *
 * 画像は Figma から取得した背景写真のみ（タイトル文字や装飾は焼き込まない）。
 * タイトルは .page-hero-en / .page-hero-jp で描画する。
 * SP/PC 共通で page-hero-{slug}.jpg を使い、background-size: cover で適切にスケール。
 *
 * 各ページ固有 CSS が `.page-{slug} .page-hero` で背景を上書きする可能性があるため、
 * body 要素を含む高い specificity で指定する (!important は使わない)。
 */
body.page-template-page-products .page-hero {
  background-image: url("library/images/material/page-hero-products.jpg");
}
main.page-works .page-hero {
  background-image: url("library/images/material/page-hero-works.jpg");
}
main.page-blog .page-hero {
  background-image: url("library/images/material/page-hero-blog.jpg");
}
main.page-news .page-hero {
  background-image: url("library/images/material/page-hero-news.jpg");
}
main.page-privacy-policy .page-hero {
  background-image: url("library/images/material/page-hero-news.jpg");
}
/* 404: お知らせヒーロー写真を流用（落ち着いた下層トーンに合わせる） */
body.error404 main.page-not-found .page-hero,
body.search main.page-not-found .page-hero {
  background-image: url("library/images/material/page-hero-news.jpg");
}
body.error404 main.page-not-found .page-hero::before,
body.search main.page-not-found .page-hero::before {
  content: none;
}
body.error404 main.page-not-found .page-hero::after,
body.search main.page-not-found .page-hero::after {
  background: linear-gradient(rgba(68, 86, 48, 0.18), rgba(68, 86, 48, 0.18));
}
main.page-agency .page-hero {
  background-image: url("library/images/material/page-hero-agency.jpg");
  background-position: center 90%;
}
main.page-contact-corp .page-hero {
  background-image: url("library/images/material/page-hero-contact-corp.jpg");
  background-position: center 70%;
}
/* 過去 page-hero-{slug}.jpg にタイトル文字を焼き込んでいた頃、各ページ固有 CSS が
   `.page-hero::before { url(about-hero.jpg) blur }` でガラス越しの背景を作っていた。
   今は背景写真を直接 `.page-hero` に当てる方針なので、各ページ固有の `::before`
   装飾を共有 CSS 側で無効化する。`!important` を使わず element セレクタで
   specificity を上げて上書きする。 */
main.page-works .page-hero::before,
main.page-blog .page-hero::before,
main.page-news .page-hero::before,
main.page-agency .page-hero::before,
main.page-contact-corp .page-hero::before {
  content: none;
}
/* お知らせ一覧 main は .page-news のみ（便り .page-blog と分離） */
main.page-news .page-hero::after {
  background: linear-gradient(rgba(68, 86, 48, 0.18), rgba(68, 86, 48, 0.18));
}
/*
 * 投稿詳細 (single.php の main.single-entry)
 * main に page-blog / page-works を付けると一覧用ページ背景テクスチャが単体記事全体に波及するため、
 * body.single-cpt_* でヒーロー背景・overlay のみ一覧と揃える。
 */
body.single-cpt_blog main.single-entry .page-hero {
  background-image: url("library/images/material/page-hero-blog.jpg");
}
body.single-cpt_blog main.single-entry .page-hero::before {
  content: none;
}
/* 一覧 .page-blog .page-hero::after と同じブラウン系オーバーレイ */
body.single-cpt_blog main.single-entry .page-hero::after {
  background: rgba(88, 54, 22, 0.12);
}
body.single-cpt_works main.single-entry .page-hero {
  background-image: url("library/images/material/page-hero-works.jpg");
}
body.single-cpt_works main.single-entry .page-hero::before {
  content: none;
}
body.single-cpt_news main.single-entry .page-hero {
  background-image: url("library/images/material/page-hero-news.jpg");
}
body.single-cpt_news main.single-entry .page-hero::before {
  content: none;
}
body.single-cpt_news main.single-entry .page-hero::after {
  background: linear-gradient(rgba(68, 86, 48, 0.18), rgba(68, 86, 48, 0.18));
}
/* ===== 4. PC 専用 background-position 上書き ===== */
@media (min-width: 992px) {
  main.page-agency .page-hero {
    background-position: center 35%;
  }
}
/* =============================================================
 * Cards / Lists 共通グリッド
 * SP 1列 / md 以上で 2-3 列グリッド。
 * gap は --space-24 を共通に使用する。
 * ============================================================= */
.sec-products-list,
.sec-works-list,
.sec-news-list,
.page-blog-list-cards,
.page-works-list-cards,
.page-news-list-rows {
  display: grid;
  gap: var(--space-24);
  margin: 0;
}
@media (min-width: 768px) {
  .sec-products-list,
  .sec-works-list,
  .page-blog-list-cards,
  .page-works-list-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .sec-news-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =============================================================
 * More link / Pagination ラッパ
 * セクション末尾の中央寄せリンク領域とページャーの基本配置。
 * ============================================================= */
.sec-more,
.page-blog-pager,
.page-works-pager,
.page-news-pager {
  margin-top: var(--space-64);
  text-align: center;
}
.page-blog-pager ul,
.page-works-pager ul,
.page-news-pager ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
}
.page-blog-pager li,
.page-works-pager li,
.page-news-pager li {
  margin: 0;
}
.page-blog-pager li .page-numbers,
.page-works-pager li .page-numbers,
.page-news-pager li .page-numbers {
  color: var(--cocopaver-primary-dark);
}
.page-blog-pager li .page-numbers.current,
.page-works-pager li .page-numbers.current,
.page-news-pager li .page-numbers.current{
  color: var(--cocopaver-accent);
}
/* prev/next: flex の gap に加え、便り一覧と同じくリンク内マージンで数字と矢印の間を確保 */
.page-blog-pager li .page-numbers.prev,
.page-works-pager li .page-numbers.prev,
.page-news-pager li .page-numbers.prev {
  position: relative;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-inline-end: var(--space-12);
}
.page-blog-pager li .page-numbers.next,
.page-works-pager li .page-numbers.next,
.page-news-pager li .page-numbers.next {
  position: relative;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-inline-start: var(--space-12);
}
/* ==============================================================
   WORKS セクション (Figma: node 320:2027)
   ============================================================== */
.sec-works {
  --works-slider-container-padding: var(--space-24);
  --works-slider-right-bleed: var(--works-slider-container-padding);
  padding-block: var(--space-48);
}
.sec-works > .container {
  position: relative;
  z-index: 1;
  max-width: min(100%, 1440px);
}
@media (min-width: 768px) {
  .sec-works {
    --works-slider-container-padding: var(--space-40);
  }
}
@media (min-width: 992px) {
  .sec-works {
    --works-slider-right-bleed: 0px;
    padding-block: var(--space-96);
  }
}
/* === ヘッダ === */
.sec-works-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-bottom: var(--space-40);
}
.sec-works-head .sec-heading {
  margin: 0;
  gap: var(--space-16);
  align-items: flex-start;
  text-align: left;
}
.sec-works-head .sec-heading-en {
  margin: 0;
  font-size: clamp(32px, calc(32px + (64 - 32) * (100vw - 393px) / (1440 - 393)), 64px);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
}
.sec-works-head .sec-heading-jp {
  margin: 0;
  font-size: clamp(14px, calc(14px + (20 - 14) * (100vw - 393px) / (1440 - 393)), 20px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
}
.sec-works-more {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: fit-content;
  max-width: 100%;
  margin: var(--space-32) auto 0;
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
  text-decoration: none;
}
.sec-works-more::after {
  content: "";
  width: 24px;
  height: 24px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
}
@media (min-width: 992px) {
  .sec-works .col-12 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .sec-works-head {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
    margin-bottom: var(--space-56);
  }
  .sec-works-head .sec-heading {
    gap: var(--space-24);
  }
  .sec-works-more {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    max-width: none;
    margin: 0 0 var(--space-56);
  }
  .works-slider-wrap,
  .sec-works-item-empty {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
/* === スライダー === */
.works-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.works-slider {
  width: calc(100% + var(--works-slider-right-bleed));
  margin-right: calc(-1 * var(--works-slider-right-bleed));
  overflow: hidden;
}
.works-slider .swiper-slide {
  flex-shrink: 0;
}
@media (min-width: 992px) {
  .works-slider .swiper-slide {
    width: 409px;
  }
}
/* === 各事例カード === */
.sec-works-item a {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  color: var(--text-main);
  text-decoration: none;
}
.sec-works-item-img {
  margin: 0;
  width: 100%;
  aspect-ratio: 409 / 262;
  overflow: hidden;
}
.sec-works-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-works-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sec-works-item-no {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
}
.sec-works-item-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-lg), 0.19vw + 17.25px, var(--font-size-xl));
  font-weight: var(--weight-medium);
  line-height: calc(26 / 20);
  letter-spacing: 0.1em;
  color: var(--text-main);
}
.sec-works-item-cat {
  margin: 6px 0 0;
}
.sec-works-item-cat span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  background: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--white);
  text-align: center;
  padding: 7px 14px;
}
@media (min-width: 992px) {
  .sec-works-item a {
    gap: 30px;
  }
  .sec-works-item-body {
    gap: var(--space-12);
  }
  .sec-works-item-cat span {
    padding: var(--space-8) var(--space-16);
  }
}
/* === スライダーナビ === */
.works-slider-nav {
  display: flex;
  gap: var(--space-80);
  align-items: center;
  justify-content: center;
}
.works-slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.works-slider-icon {
  display: block;
  width: 40px;
  height: 40px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
}
.works-slider-icon-prev {
  transform: scaleX(-1);
}
/* === 空状態 === */
.sec-works-item-empty {
  display: flex;
  align-items: center;
  margin: 0;
  min-height: var(--space-120);
  padding: 0;
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: 1.8;
  color: var(--cocopaver-primary-dark);
  text-align: left;
}
@media (min-width: 992px) {
  .sec-works-item-empty {
    min-height: var(--space-160);
  }
}
/* ==============================================================
   NEWS LETTER セクション (Figma: node 323:2312)
   ココペーバー便りのダイジェスト + slider
   ============================================================== */
.sec-news {
  --news-slider-container-padding: var(--space-24);
  --news-slider-outer-gap: 0px;
  --news-slider-right-bleed: calc(
    var(--news-slider-container-padding) + var(--news-slider-outer-gap)
  );
  position: relative;
  overflow: hidden;
  padding-block: var(--space-64);
}
.sec-news::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("library/images/material/faq-bg-texture.webp") repeat center /
    cover;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sec-news > .container {
  position: relative;
  z-index: 1;
  max-width: min(100%, 1440px);
}
@media (min-width: 768px) {
  .sec-news {
    --news-slider-container-padding: var(--space-40);
  }
}
@media (min-width: 992px) {
  .sec-news {
    --news-slider-container-padding: var(--space-80);
    padding-block: var(--space-96);
  }
}
@media (min-width: 1440px) {
  .sec-news {
    --news-slider-container-padding: var(--space-120);
    --news-slider-outer-gap: max(0px, calc((100vw - 1440px) / 2));
  }
}
/* === レイアウト (head + slider) === */
.sec-news-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 992px) {
  .sec-news-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-56);
  }
}
/* === ヘッダ === */
.sec-news-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  color: var(--cocopaver-primary-dark);
}
.sec-news-head-jp-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  order: 2;
}
.sec-news-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(18px, calc(18px + (26 - 18) * (100vw - 393px) / (1440 - 393)), 26px);
  font-weight: var(--weight-medium);
  font-feature-settings: 'vkna' 1;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
.sec-news-lead {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(14px, calc(14px + (16 - 14) * (100vw - 393px) / (1440 - 393)), 16px);
  font-weight: var(--weight-medium);
  font-feature-settings: 'vkna' 1;
  line-height: 1.25;
  letter-spacing: 0.1em;
}
.sec-news-head-en {
  margin: 0;
  order: 1;
  font-family: var(--font-display);
  font-size: clamp(24px, calc(24px + (32 - 24) * (100vw - 393px) / (1440 - 393)), 32px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--cocopaver-accent);
}
@media (min-width: 992px) {
  .sec-news-head {
    flex-direction: row;
    gap: var(--space-24);
    min-height: 390px;
  }
  .sec-news-head-jp-wrap {
    order: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    gap: var(--space-16);
  }
  .sec-news-title {
    line-height: 1.2;
  }
  .sec-news-lead {
    line-height: 1.25;
  }
  .sec-news-head-en {
    order: 2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
}
/* === スライダー === */
.news-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.news-slider {
  width: calc(100% + var(--news-slider-right-bleed));
  margin-right: calc(-1 * var(--news-slider-right-bleed));
  overflow: hidden;
}
@media (min-width: 992px) {
  .news-slider-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: min(100%, 1125px);
  }
  .news-slider {
    width: calc(100% + var(--news-slider-right-bleed));
  }
}
/* === 各記事カード === */
.sec-news-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-20);
  color: var(--text-main);
  text-decoration: none;
}
.sec-news-item-img {
  margin: 0;
  width: 100%;
  aspect-ratio: 409 / 262;
  overflow: hidden;
  background: #d5d0b0;
}
.sec-news-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-news-item-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-12);
}
.sec-news-item-date {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
}
@media (min-width: 992px) {
  .sec-news-item-date {
    font-size: var(--font-size-base);
  }
}
.sec-news-item-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(18px, calc(18px + (20 - 18) * (100vw - 393px) / (1440 - 393)), 20px);
  font-weight: var(--weight-medium);
  line-height: calc(26 / 20);
  letter-spacing: 0.1em;
  color: var(--text-main);
}
/* .sec-news-item-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text-main);
} */
.sec-news-item-cat {
  margin: 6px 0 0;
}
.sec-news-item-cat span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 7px 14px;
}
@media (min-width: 992px) {
  .sec-news-item-cat span {
    padding: var(--space-8) var(--space-16);
  }
}
/* === スライダーフッタ (nav + more) === */
.news-slider-foot {
  display: flex;
  justify-content: center;
}
.news-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
}
@media (min-width: 992px) {
  .news-slider-nav {
    gap: var(--space-32);
  }
  .sec-news-item a {
    gap: 30px;
  }
  .news-slider-foot {
    justify-content: flex-start;
  }
  .sec-news-item-img {
    aspect-ratio: 409 / 262;
  }
  .sec-news-item-body {
    min-height: 148px;
    gap: var(--space-12);
  }
}
.news-slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
}
.news-slider-icon {
  display: block;
  position: relative;
  width: 40px;
  height: 24px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
}
.news-slider-icon-prev {
  transform: scaleX(-1);
}
.news-slider-more {
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
  text-decoration: none;
}
/* === 空状態 === */
.sec-news-item-empty {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  margin: 0;
  min-width: 0;
  min-height: var(--space-120);
  padding: 0;
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: 1.8;
  color: var(--cocopaver-primary-dark);
  text-align: left;
}
@media (min-width: 992px) {
  .sec-news-item-empty {
    min-height: var(--space-160);
  }
}
/* ==============================================================
   PRODUCTS セクション (Figma: 白カード on ベージュ背景)
   ============================================================== */
.sec-products {
  padding-block: 0;
}
.sec-products > .container {
  max-width: min(100%, 1440px);
  padding-inline: var(--space-24);
}
@media (min-width: 992px) {
  .sec-products {
    margin-top: 0;
    padding-block: 0 26px;
  }
  .sec-products > .container {
    padding-inline: clamp(var(--space-96), 8.333vw, var(--space-120));
  }
}
/* === 内側の白カード === */
.sec-products-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--space-4);
  box-sizing: border-box;
  padding: var(--space-48) var(--space-16) var(--space-56);
}
@media (min-width: 992px) {
  .sec-products-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: var(--space-72) var(--space-56) var(--space-56);
  }
}
/* === ヘッダ (heading + more) === */
.sec-products-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
  align-items: center;
  text-align: center;
}
.sec-products-head .sec-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
  margin-bottom: 0;
}
.sec-products-head .sec-heading-en {
  margin: 0;
  font-size: clamp(32px, calc(32px + (64 - 32) * (100vw - 393px) / (1440 - 393)), 64px);
  font-weight: var(--weight-regular);
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--cocopaver-primary-dark);
}
.sec-products-head .sec-heading-jp {
  margin: 0;
  font-size: clamp(14px, calc(14px + (20 - 14) * (100vw - 393px) / (1440 - 393)), 20px);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--cocopaver-primary-dark);
}
.sec-products-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: fit-content;
  margin: var(--space-48) auto 0;
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
  text-decoration: none;
}
.sec-products-more::after {
  content: "";
  width: 24px;
  height: 24px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
}
@media (min-width: 992px) {
  .sec-products-head {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
    margin-bottom: var(--space-56);
  }
  .sec-products-head .sec-heading {
    gap: var(--space-24);
    align-items: flex-start;
  }
  .sec-products-more {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 var(--space-56);
    font-size: var(--font-size-base);
  }
}
/* === 商品一覧 === */
.sec-products-list {
  gap: var(--space-48);
}
.sec-products-item {
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 992px) {
  .sec-products-list {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 330px));
    gap: var(--space-48);
    width: 100%;
    justify-content: space-between;
    align-items: start;
  }
  .sec-products-item {
    width: 100%;
  }
}
.sec-products-item a {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: var(--text-main);
}
.sec-products-item figure {
  margin: 0;
  aspect-ratio: 330 / 331;
  overflow: hidden;
  border-radius: 0;
}
.sec-products-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-products-item-name {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-height: var(--space-48);
  margin: calc(-1 * var(--space-32)) auto 0;
  padding: var(--space-12) var(--space-16);
  background: #f8f7f2;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(20px, calc(20px + (24 - 20) * (100vw - 393px) / (1440 - 393)), 24px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1;
}
@media (min-width: 992px) {
  .sec-products-item-name {
    width: calc(100% - var(--space-24));
    min-height: var(--space-56);
    margin: calc(-1 * var(--space-24)) auto 0;
    padding: var(--space-16);
  }
}
/* =============================================================
 * Products Page (商品紹介ページ)
 * 設計メモ:
 *   - 基準幅 SP 393 / PC 1440。可変は clamp(SP, vw計算, PC)。
 *   - メディアクエリは Bootstrap 5 (576/768/992/1200/1440)。
 *   - SP の固定 max-width は禁止。流動レイアウトで親 padding を活かす。
 *   - 余白は --space-* を優先。装飾位置・アイコン寸法は単発値可。
 * ============================================================= */
/* =============================================================
 * Page background
 * テクスチャは repeat。タイル幅は min(100%, 120rem) で最大約 1920px（ルート 16px 想定）まで拡大。
 * PC: デザインの rgba 層 + JPG を重ね、画像のみ overlay（Figma 由来の座標・%サイズは未使用）。
 * ============================================================= */
.page-template-page-products main {
  position: relative;
  isolation: isolate;
  background: rgba(213, 208, 176, 0.8);
}
.page-template-page-products main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(library/images/material/faq-bg-texture.webp) repeat-y center top / max(900px, 100vw) auto;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
/* .page-template-page-products,
.page-template-page-products main {
  background-color: var(--cocopaver-bg-light);
  background-image: url("library/images/material/products-bg-sp.jpg");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: min(100%, 120rem) auto;
} */
@media (min-width: 992px) {
  /* .page-template-page-products,
  .page-template-page-products main {
    background-image:
      url("library/images/material/products-bg-pc.jpg"),
      linear-gradient(var(--cocopaver-how-bg-tint), var(--cocopaver-how-bg-tint));
    background-repeat: repeat, no-repeat;
    background-position: 0 0, 0 0;
    background-size: min(100%, 120rem) auto, 100% 100%;
    background-blend-mode: overlay, normal;
  } */
}
.page-products-features,
.page-products-lineup,
.page-products-spec {
  background: transparent;
}
.page-template-page-products #breadcrumb {
  display: none;
}
/* =============================================================
 * Section vertical rhythm
 * ============================================================= */
.page-products-features {
  padding-block: var(--space-48) 0;
}
.page-products-lineup {
  padding-block: var(--space-80) var(--space-64);
}
@media (min-width: 992px) {
  .page-products-lineup {
    padding-block: var(--space-104) var(--space-64);
  }
}
.page-products-spec {
  padding-block: 0 var(--space-80);
}
/* =============================================================
 * Section heading (Features / LINEUP / Specification 共通)
 * ============================================================= */
.page-products-features .sec-heading,
.page-products-lineup .sec-heading,
.page-products-spec .sec-heading {
  gap: var(--space-12);
  margin-bottom: var(--space-32);
  color: var(--cocopaver-primary-dark);
}
.page-products-features .sec-heading-en,
.page-products-lineup .sec-heading-en,
.page-products-spec .sec-heading-en {
  color: var(--cocopaver-primary-dark);
  font-size: clamp(2rem, 1.625rem + 1.53vw, 3rem);
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-products-features .sec-heading-jp,
.page-products-lineup .sec-heading-jp,
.page-products-spec .sec-heading-jp {
  color: var(--cocopaver-primary-dark);
  font-size: clamp(0.875rem, 0.734rem + 0.57vw, 1.25rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
/* =============================================================
 * Lineup: container のみ Bootstrap。lineup-inner 以降は flex。
 * lineup-stack = 3グループの縦並び1本の flex カラム
 * lineup-cards = 各グループ内（ドアマット2枚 / シェード+フェンス2枚 / ココマット単独）
 * lg の2列行（--cocomat 以外）は単一 CSS Grid。card-cell と article に display:contents を
 * 当て、figure/h4/spec/note を nth-of-type で行・列に配置し用途行の高さを揃える（subgrid は使わない）。
 * display: contents は環境によって支援技術でラッパーの意味が弱まることがあるため lg のみ。
 * ============================================================= */
.lineup-inner {
  background-color: var(--white);
  padding: var(--space-16) var(--space-16) 42px; 
}
@media (min-width: 992px) {
  .lineup-inner {
    padding: var(--space-16) var(--space-64) 55px;
  }
}
.page-products-lineup .sec-heading-en {
  margin-top: -35px;
}
.page-products-lineup-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  min-width: 0;
}
.page-products-lineup-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
  min-width: 0;
}
.page-products-lineup-cards--cocomat {
  flex-direction: column;
  align-items: stretch;
}
.page-products-lineup-card-cell {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.page-products-lineup-card-cell--wide {
  flex: 1 1 100%;
  width: 100%;
}
.page-products-lineup-card-cell .page-products-card > meta[itemprop="position"] {
  display: none;
}
/* =============================================================
 * Feature card (Features セクション)
 * ============================================================= */
.page-products-feature-list-wrap {
  padding-inline: var(--space-16);
}
.page-products-feature-list {
  row-gap: 36px;
  margin-bottom: 0;
  padding-block: var(--space-8);
  padding-inline: 0;
}
.page-products-feature-card {
  height: 100%;
  background: var(--white);
  border-radius: 0;
  padding: 0 0 var(--space-32);
  text-align: center;
}
.page-products-feature-card figure {
  position: relative;
  margin: 0 0 var(--space-24);
}
.page-products-feature-list > li:nth-child(1) .page-products-feature-card figure::before,
.page-products-feature-list > li:nth-child(2) .page-products-feature-card figure::before,
.page-products-feature-list > li:nth-child(3) .page-products-feature-card figure::before {
  position: absolute;
  z-index: 1;
  content: "";
  display: block;
  width: 141px;
  height: 100px;
  top: -50px;
  left: -20px;
  transform: rotate(-3.265deg);
  background-color: var(--cocopaver-accent);
  opacity: 1;
  font-size: 0;
  font-style: normal;
  letter-spacing: 0;
}
.page-products-feature-list > li:nth-child(1) .page-products-feature-card figure::before {
  -webkit-mask: url("library/images/material/Features1.svg") left center / 100% 100% no-repeat;
  mask: url("library/images/material/Features1.svg") left center / 100% 100% no-repeat;
}
.page-products-feature-list > li:nth-child(2) .page-products-feature-card figure::before {
  -webkit-mask: url("library/images/material/Features2.svg") left center / 100% 100% no-repeat;
  mask: url("library/images/material/Features2.svg") left center / 100% 100% no-repeat;
}
.page-products-feature-list > li:nth-child(3) .page-products-feature-card figure::before {
  -webkit-mask: url("library/images/material/Features3.svg") left center / 100% 100% no-repeat;
  mask: url("library/images/material/Features3.svg") left center / 100% 100% no-repeat;
}
.page-products-feature-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.page-products-feature-card h3 {
  margin: 0 var(--space-20) var(--space-16);
  font-size: var(--font-size-xl);
  letter-spacing: 0.1em;
}
@media (min-width: 992px) {
  .page-products-feature-card img {
    aspect-ratio: 330 / 230;
  }
  .page-products-feature-card h3 {
    margin: 0 var(--space-20) var(--space-24);
  }
  .page-products-feature-list > li:nth-child(1) .page-products-feature-card figure::before,
  .page-products-feature-list > li:nth-child(2) .page-products-feature-card figure::before,
  .page-products-feature-list > li:nth-child(3) .page-products-feature-card figure::before {
    top: -40px;
    left: -16px;
  }
}
.page-products-feature-card p {
  margin: 0 var(--space-20);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 1.85;
  letter-spacing: 0.1em;
  text-align: left;
}
/* 共通タイポ (見出し系) */
.page-products-feature-card h3,
.page-products-card h4,
.page-products-group-title {
  font-family: var(--font-mincho);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--cocopaver-primary-dark);
}
.page-products-feature-card h3 {
  line-height: 1.5;
}
/* =============================================================
 * Lineup head (LINEUP 見出し直下のリード)
 * ============================================================= */
.page-products-lineup-head {
  margin-bottom: var(--space-48);
}
.page-products-lead {
  margin: var(--space-8) 0 0;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: clamp(0.875rem, 0.828rem + 0.19vw, 1rem);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
}
/* =============================================================
 * Group (商品グループ ココ・ドアマット 等)
 * ============================================================= */
.page-products-group-title {
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-32);
  padding: var(--space-16);
  border-bottom: 0;
  background: #f8f7f2;
  font-size: clamp(var(--font-size-xl), 0.38vw + 18.5px, var(--font-size-2xl));
  line-height: var(--leading-normal);
  letter-spacing: 0.1em;
  text-align: center;
}
@media (min-width: 992px) {
  .page-products-group-title {
    line-height: 1;
  }
}
.page-products-group-title small {
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.1em;
}
.page-products-group-title-note {
  display: none;
}
/* =============================================================
 * Product card (商品カード)
 * ============================================================= */
.page-products-card,
.page-products-spec-body {
  height: 100%;
  border-radius: 0;
  padding: 0 var(--space-16);
}
.page-products-card {
  --products-lineup-slide-ratio: 850 / 502;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: center;
}
.page-products-card figure {
  position: relative;
  height: clamp(184px, 11.2vw + 140px, 304px);
  margin: 0 0 var(--space-8);
  overflow: visible;
  border-radius: var(--radius-xs);
}
.page-products-card figure::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 32px;
  height: 4px;
  transform: translateX(-50%);
  background: var(--cocopaver-primary-dark);
}
.page-products-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.page-products-card figure.page-products-image-slider {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding-bottom: 0;
  overflow: hidden;
  min-width: 0;
}
.page-products-card .page-products-image-slider::after {
  display: none;
}
.page-products-image-slider.swiper {
  width: 100%;
  min-width: 0;
}
.page-products-image-slider .swiper-wrapper,
.page-products-image-slider .swiper-slide {
  height: auto;
  aspect-ratio: var(--products-lineup-slide-ratio);
}
.page-products-image-slider .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.page-products-image-slider .swiper-wrapper {
  z-index: 0;
}
.page-products-image-slider:not(.swiper-initialized) .swiper-wrapper {
  display: block;
}
.page-products-image-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
.page-products-image-slider .swiper-pagination {
  position: static;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-12);
  margin: var(--space-12) 0 0;
}
.page-products-image-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  background: #d6ca98;
  opacity: 1;
}
.page-products-image-slider .swiper-pagination-bullet-active {
  background: var(--cocopaver-primary-dark);
}
.page-products-image-slider:not(.swiper-initialized) .page-products-image-pagination::before,
.page-products-image-slider:not(.swiper-initialized) .page-products-image-pagination::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d6ca98;
}
.page-products-image-slider:not(.swiper-initialized) .page-products-image-pagination::before {
  background: var(--cocopaver-primary-dark);
}
.page-products-card h4 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.5rem, 1.312rem + 0.76vw, 2rem);
  font-weight: 900;
  line-height: var(--leading-normal);
  letter-spacing: 0.1em;
}
.page-products-card p,
.page-products-spec-body p {
  margin: 0;
  font-family: var(--font-mincho);
  line-height: 26px;
  letter-spacing: 0.64px;
}
.page-products-spec-body p {
  line-height: 28px;
}
.page-products-card p + p,
.page-products-spec-body p + p {
  margin-top: 0;
}
.page-products-card dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 var(--space-24);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
  letter-spacing: 0.1em;
}
.page-products-card dt {
  color: var(--cocopaver-primary-dark);
  font-weight: var(--weight-bold);
}
.page-products-card dd {
  margin: 0;
}
.page-products-card-spec,
.page-products-card-note p {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 23px;
  letter-spacing: 1.6px;
  text-align: center;
  font-weight: 500;
}
.page-products-card-short-ls {
  letter-spacing: 3%;
}
.page-products-card-spec {
  color: var(--text-main);
}
.page-products-card-note {
  margin-top: var(--space-24);
  padding: var(--space-24) var(--space-16);
  background: #e7ece2;
}
.page-products-card-note .page-products-card-use {
  margin-bottom: var(--space-16);
  color: var(--cocopaver-primary-dark);
  font-size: clamp(15px, 0.1vw + 14.6px, var(--font-size-base));
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
}
@media (min-width: 992px) {
  .page-products-spec-body p {
    line-height: 36px;
  }
  .page-products-card-short-ls {
    letter-spacing: 3%;
  }
}
/* =============================================================
 * Badge (人気商品ラベル)
 * ============================================================= */
.page-products-badge {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  margin: 0;
}
.page-products-badge span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 0;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 0.906rem + 0.38vw, 1.25rem);
  line-height: 1;
  letter-spacing: 1.4px;
}
.page-products-card-note-small {
  font-size: var(--font-size-xs);
  line-height: 23px;
  letter-spacing: 0.06em;
}
/* =============================================================
 * Movie (Specification 左カラム / プレースホルダ装飾)
 * ============================================================= */
.page-products-movie {
  position: relative;
  /* height: clamp(220px, 28vw + 110px, 520px);
  background: var(--white);
  border-radius: 0;
  padding: var(--space-56) var(--space-24);
  text-align: center; */
}
.page-products-movie p {
  margin: 0 0 var(--space-16);
  color: var(--black);
  font-family: var(--font-mincho);
  font-size: var(--font-size-lg);
  line-height: var(--leading-normal);
}
.page-products-movie iframe {
  aspect-ratio: 16 / 9;
  height: auto;
}
/* =============================================================
 * Spec body (Specification 右カラム本文)
 * ============================================================= */
.page-products-spec-body {
  margin-top: var(--space-16);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
  letter-spacing: 0.06em;
}
/* =============================================================
 * lg (>=992px): 2カラム LINEUP / Spec / Feature 余白拡張
 * ============================================================= */
@media (min-width: 992px) {
  .page-products-features {
    padding-block: 194px var(--space-80);
  }

  .page-products-lineup {
    padding-bottom: 69px;
  }

  .page-products-spec {
    padding-block: 0 var(--space-120);
  }

  .page-products-features .sec-heading,
  .page-products-lineup .sec-heading,
  .page-products-spec .sec-heading {
    gap: var(--space-24);
    margin-bottom: var(--space-56);
  }

  .page-products-features .sec-heading {
    margin-bottom: var(--space-48);
  }

  .page-products-feature-list-wrap {
    padding-inline: var(--space-56);
  }

  .page-products-feature-list {
    --bs-gutter-x: var(--space-48);
    padding-block: 0;
  }

  .page-products-feature-card {
    padding-bottom: var(--space-32);
  }

  .page-products-feature-card figure {
    margin-bottom: var(--space-32);
  }

  .page-products-feature-card p {
    margin-inline: var(--space-20);
  }

  .page-products-lineup-head {
    margin-bottom: var(--space-72);
    transform: translateY(-16px);
  }

  .page-products-lead {
    margin-top: 0;
    line-height: 36px;
  }

  .page-products-lineup-stack {
    gap: var(--space-120);
  }

  .page-products-group-title-note {
    display: block;
  }

  /*
   * 2カラム行（非ココマット）: 単一 grid + display:contents。
   * auto-placement は使わず、左右の .page-products-lineup-card-cell:nth-child(1|2) 配下に
   * figure / h4 / spec / note を配置する（nth-of-type は各カード内で常に 1 番目になり重なるため使わない）。
   */
  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--space-48);
    row-gap: 0;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell,
  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell > .page-products-card {
    display: contents;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(1) figure {
    grid-column: 1;
    grid-row: 1;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(2) figure {
    grid-column: 2;
    grid-row: 1;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(1) h4 {
    grid-column: 1;
    grid-row: 2;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(2) h4 {
    grid-column: 2;
    grid-row: 2;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(1) p.page-products-card-spec {
    grid-column: 1;
    grid-row: 3;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(2) p.page-products-card-spec {
    grid-column: 2;
    grid-row: 3;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(1) .page-products-card-note {
    grid-column: 1;
    grid-row: 4;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) > .page-products-lineup-card-cell:nth-child(2) .page-products-card-note {
    grid-column: 2;
    grid-row: 4;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) .page-products-lineup-card-cell .page-products-card-spec {
    margin-bottom: 24px;
  }

  #coco-doormat .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) .page-products-lineup-card-cell .page-products-card-spec {
    margin-bottom: 50px;
  }

  .page-products-lineup-cards:not(.page-products-lineup-cards--cocomat) .page-products-lineup-card-cell .page-products-card-note {
    margin-top: 0;
    min-height: 0;
    align-self: stretch;
  }

  .page-products-group-title {
    min-height: 76px;
    margin-bottom: var(--space-40);
    padding: var(--space-24);
  }

  .page-products-card {
    padding: 0;
    background: transparent;
  }

  .page-products-card figure {
    margin-bottom: var(--space-20);
    background: var(--white);
  }

  .page-products-card figure.page-products-image-slider {
    width: 100%;
    margin-inline: 0;
  }

  .page-products-card h4 {
    margin-bottom: var(--space-8);
  }

  .page-products-card dl {
    margin-bottom: var(--space-32);
  }

  .page-products-card-note {
    margin-top: var(--space-32);
    padding: var(--space-24) var(--space-16);
  }

  .page-products-card-note .page-products-card-use {
    margin-bottom: 10px;
  }

  .page-products-badge span {
    padding-inline: var(--space-16);
  }

  .page-products-card-wide {
    display: block;
    max-width: calc((100% - 48px) / 2);
    margin-inline: auto;
  }
  .page-products-spec .row {
    justify-content: center;
  }

  .page-products-spec .col-lg-6 {
    width: 100%;
    max-width: min(100%, 928px);
  }

  .page-products-movie {
    /* padding: var(--space-160) 0 0; */
    border-radius: 0;
  }

  .page-products-movie p {
    margin-top: 0;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    letter-spacing: 0.1em;
  }

  .page-products-movie::before,
  .page-products-movie::after {
    top: 45%;
  }

  .page-products-spec-body {
    width: min(100%, 768px);
    height: auto;
    margin: var(--space-56) auto 0;
    padding: 0;
    background: transparent;
    font-size: var(--font-size-base);
    line-height: 2.25;
    letter-spacing: 0.04em;
    text-align: center;
  }
}
/* ==============================================================
   CTA_2 (CONTACT + TRIAL の 2 カード)
   Figma: ベージュ + ダークグリーン
   レイアウトは container > row > col-12 col-lg-6 に統一。
   背景はセクション全幅、コンテンツは Bootstrap container 幅で配置。
   ============================================================== */
.sec-cta-double {
  padding: var(--space-56) var(--space-12) var(--space-40);
}
/* container-fluid を使い、コンテンツ幅は本セクション専用の幅で制御。
   背景はセクション全幅、カードは SP で左右 24px・PC で max 1440px の枠内に収める。 */
.sec-cta-double-container {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .sec-cta-double {
    padding: var(--space-56) 0 var(--space-40);
  }

  .sec-cta-double-container {
    /* max-width: min(100%, 1440px); */
    margin-inline: auto;
    padding-inline: 2px;
  }
}
/* === 行 (Bootstrap row のガター調整) === */
.sec-cta-double-row {
  --bs-gutter-x: var(--space-16);
  --bs-gutter-y: var(--space-16);
}
@media (min-width: 992px) {
  .sec-cta-double-row {
    --bs-gutter-x: var(--space-24);
  }
}
/* === カード共通 === */
.sec-cta-double-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: var(--space-24) var(--space-20);
  border-radius: var(--radius-xs);
  text-align: center;
}
@media (min-width: 992px) {
  .sec-cta-double {
    padding-block: var(--space-80);
  }
  .sec-cta-double-card {
    min-height: 304px;
    gap: var(--space-32);
    padding: var(--space-32) var(--space-56);
  }
}
.sec-cta-double-card-contact {
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
}
.sec-cta-double-card-trial {
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  margin-top: var(--space-4);
}
/* === 見出し === */
.sec-cta-double-card header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}
.sec-cta-double-en {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
  line-height: calc(40 / 18);
  letter-spacing: 0.1em;
}
@media (min-width: 992px) {
  .sec-cta-double-en {
    font-size: var(--font-size-2xl);
    line-height: calc(40 / 24);
  }
  .sec-cta-double-card-trial {
    margin-top: 0;
  }
}
.sec-cta-double-card-contact .sec-cta-double-en {
  color: var(--cocopaver-primary-dark);
}
.sec-cta-double-card-trial .sec-cta-double-en {
  color: var(--cocopaver-accent);
}
.sec-cta-double-jp {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(24px, calc(24px + (32 - 24) * (100vw - 393px) / (1440 - 393)), 32px);
  font-weight: var(--weight-semibold);
  line-height: 1.09;
  letter-spacing: 0.16em;
}
.sec-cta-double-card-contact .sec-cta-double-jp {
  color: var(--cocopaver-primary-dark);
}
.sec-cta-double-card-trial .sec-cta-double-jp {
  color: var(--cocopaver-accent);
}
/* === 本文 === */
.sec-cta-double-text {
  margin: 18px auto 0;
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--font-size-13);
  font-weight: var(--weight-regular);
  line-height: calc(24 / 14);
  letter-spacing: 10%;
}
.sec-cta-double-card-trial .sec-cta-double-text {
  letter-spacing: 9%;
}
@media (min-width: 992px) {
  .sec-cta-double-text {
    font-size: var(--font-size-sm);
    line-height: calc(24 / 14);
  }
  .sec-cta-double-card-trial .sec-cta-double-text {
    letter-spacing: 9%;
  }
}
.sec-cta-double-card-contact .sec-cta-double-text {
  width: 356px;
  max-width: 100%;
}
.sec-cta-double-card-trial .sec-cta-double-text {
  width: 499px;
  max-width: 100%;
}
/* === ボタン === */
.sec-cta-double-action {
  width: 100%;
  margin: 0;
}
.sec-cta-double-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  border: none;
  border-radius: 0;
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.64px;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.sec-cta-double-btn:hover {
  background: var(--cocopaver-accent);
  transition: background 0.3s;
}
@media (min-width: 992px) {
  .sec-cta-double-btn {
    font-size: var(--font-size-lg);
  }
}
.sec-cta-double-btn::after {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
  transition: filter 0.2s;
}
.sec-cta-double-card-contact .sec-cta-double-btn {
  width: 356px;
  max-width: 100%;
}
.sec-cta-double-card-contact .sec-cta-double-btn:hover,
.sec-cta-double-card-contact .sec-cta-double-btn:focus-visible {
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  opacity: 1;
}
.sec-cta-double-card-contact .sec-cta-double-btn:hover::after,
.sec-cta-double-card-contact .sec-cta-double-btn:focus-visible::after {
  filter: brightness(0) invert(1);
}
.sec-cta-double-card-trial .sec-cta-double-btn {
  width: 216px;
  max-width: 100%;
}
@media (min-width: 992px) {
  .sec-cta-double-card-trial .sec-cta-double-btn {
    width: 249px;
  }
}
/* ==============================================================
   ABOUT セクション (TOP)
   ============================================================== */
.sec-about {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  background:
    linear-gradient(rgba(255, 253, 244, 0.74), rgba(255, 253, 244, 0.74)),
    url("library/images/material/faq-bg-texture.webp") repeat center top /
      1440px auto;
  text-align: left;
}
/* 葉っぱ1 */
.sec-about::before {
  content: "";
  position: absolute;
  top: 480px;
  right: clamp(-20px, calc(-20px + 100 * (100vw - 393px) / (991 - 393)), 200px);
  width: 430px;
  height: 300px;
  background: url("library/images/material/about-decoration-leaves.webp")
    no-repeat center / contain;
  transform: rotate(-5deg);
  opacity: 1;
  pointer-events: none;
  /* DEV: 下の1行を消すと葉の色は元に戻る（セクション背景は未変更） */
  /* filter: contrast(1.35) saturate(10) hue-rotate(298deg) brightness(1.12) drop-shadow(0 0 3px #ff00cc) drop-shadow(0 0 14px rgba(255, 0, 170, 0.95)); */
}
/* 葉っぱ2（992px未満は非表示） */
.sec-about::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: 250px;
  width: 360px;
  height: 270px;
  background: url("library/images/material/about-decoration-leaves2.webp")
    no-repeat center / contain;
  transform: rotate(-30deg);
  opacity: 1;
  pointer-events: none;
  display: none;
  /* DEV: 下の1行を消すと葉の色は元に戻る */
  /* filter: contrast(1.35) saturate(10) hue-rotate(298deg) brightness(1.12)  drop-shadow(0 0 3px #ff00cc) drop-shadow(0 0 14px rgba(255, 0, 170, 0.95)); */
}
.sec-about > .container {
  position: relative;
  z-index: 1;
  max-width: min(100%, 1440px);
  padding: var(--space-64) var(--space-24) var(--space-72);
}
.sec-about-layout {
  min-height: 0;
}
/* === コピーブロック (見出し + 本文) === */
.sec-about-copy {
  width: auto;
}
.sec-about-heading {
  margin-bottom: var(--space-56);
}
.sec-about-heading-en {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(
    32px,
    calc(32px + (64 - 32) * (100vw - 393px) / (1440 - 393)),
    64px
  );
  line-height: 40px;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
}
.sec-about .sec-heading-jp {
  margin-top: var(--space-12);
  font-family: var(--font-mincho);
  font-size: clamp(
    14px,
    calc(14px + (20 - 14) * (100vw - 393px) / (1440 - 393)),
    20px
  );
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
}
.sec-about-body {
  width: 100%;
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.84px;
  color: var(--text-main);
}
.sec-about-lead {
  margin: 0 0 var(--space-24);
  font-family: var(--font-mincho);
  font-size: 20px;
  font-style: normal;
  font-weight: var(--weight-semibold);
  line-height: 30px;
  letter-spacing: 0.06em; /* 1.2px / 20px */
  color: var(--text-main);
}
.sec-about-body p:not(.sec-about-lead) {
  margin: 0 0 var(--space-20);
}
/* === 写真レイアウト (4枚をabsoluteで重ね配置) === */
.sec-about-photo-layer {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: clamp(385px, 85vw, 500px);
  margin-right: auto;
  margin-left: auto;
  margin-top: var(--space-40);
}
.sec-about-photo {
  position: absolute;
  margin: 0;
  overflow: visible;
}
.sec-about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 8px 10px 18px rgba(39, 46, 40, 0.12);
}
.sec-about-photo figcaption {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 4px 5px 12px rgba(39, 46, 40, 0.1);
  font-family: var(--font-mincho);
  font-size: clamp(
    10px,
    calc(10px + (12 - 10) * (100vw - 393px) / (1440 - 393)),
    12px
  );
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--cocopaver-primary);
  white-space: nowrap;
  transform: rotate(-2deg);
}
/* 4枚の個別配置 */
.sec-about-photo-easy {
  top: 0;
  left: 2%;
  width: 35%;
  height: 46%;
}
.sec-about-photo-easy img {
  object-position: 50% 52%;
}
.sec-about-photo-easy figcaption {
  top: -6px;
  left: -10px;
  padding: 10px 7px;
  writing-mode: vertical-rl;
}
.sec-about-photo-cushion {
  top: 7.2%;
  right: -1%;
  width: 60%;
  height: 26%;
}
.sec-about-photo-cushion img {
  object-position: 50% 48%;
}
.sec-about-photo-cushion figcaption {
  top: -23px;
  right: auto;
  bottom: auto;
  left: 1px;
  max-width: 140px;
  line-height: 1.2;
  white-space: normal;
  transform: rotate(4.47deg);
}
.sec-about-photo-comfort {
  top: 50%;
  left: -1%;
  width: 58.5%;
  height: 32.25%;
}
.sec-about-photo-comfort img {
  object-position: 54% 54%;
}
.sec-about-photo-comfort figcaption {
  left: 0;
  bottom: -9px;
  transform: rotate(-1.55deg);
}
.sec-about-photo-design {
  top: 37.5%;
  right: 3%;
  width: 35%;
  height: 44.5%;
}
.sec-about-photo-design img {
  object-position: 56% 50%;
}
.sec-about-photo-design figcaption {
  top: -6px;
  right: -10px;
  padding: 10px 7px;
  writing-mode: vertical-rl;
  transform: rotate(2deg);
}
/* === 全国対応バッジ (回転リング付き) === */
.sec-about-region {
  /* 外周文字SVGを親円より外側へ広げる量。viewBoxごと拡大されるため、見た目の半径にも影響する。 */
  --about-region-ring-box-offset: 33px;
  position: relative;
  top: auto;
  left: auto;
  order: 2;
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  margin: 0 auto var(--space-8);
  border-radius: 50%;
  background: var(--cocopaver-accent);
  color: var(--text-main);
  text-align: center;
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: calc(29 / 16);
  letter-spacing: 0.02em;
}
.sec-about-region-ring {
  position: absolute;
  /* SVG全体を広げて配置する。外周文字の基準円はPHP側の固定SVGパスで定義する。 */
  inset: calc(0px - var(--about-region-ring-box-offset));
  width: calc(
    100% + var(--about-region-ring-box-offset) +
      var(--about-region-ring-box-offset)
  );
  height: calc(
    100% + var(--about-region-ring-box-offset) +
      var(--about-region-ring-box-offset)
  );
  overflow: visible;
  /* 回転速度は duration で調整する。secondsを短くすると速く、長くすると遅くなる。 */
  animation: about-rotate 24s linear infinite;
}
.sec-about-region-ring text {
  color: var(--cocopaver-accent);
  fill: currentColor;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: var(--weight-regular);
  line-height: calc(29 / 16);
  /* 外周文字の字間。文字同士が重なる／間が空きすぎるときに調整する。 */
  letter-spacing: 0.13em;
}
.sec-about-region span {
  position: relative;
  z-index: 1;
}
@keyframes about-rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 400px) and (max-width: 767px) {
  .sec-about-photo-cushion figcaption {
    top: -30px;
  }
}
@media (min-width: 680px) {
  .sec-about-photo-cushion figcaption {
    max-width: 148px;
  }
}
/* === PC (992px〜) === */
@media (min-width: 992px) {
  /* ページ内リンクスクロール時の余白調整 */
  .sec-about {
    scroll-margin-top: 50px;
  }

  /* 葉っぱ1 */
  .sec-about::before {
    top: 400px;
    right: 80px;
    width: 650px;
    height: 420px;
  }
  /* 葉っぱ2 */
  .sec-about::after {
    display: block;
    right: 20px;
    bottom: 670px;
    width: 520px;
    height: 360px;
    transform: rotate(-12deg);
  }
  .sec-about > .container {
    padding: 60px clamp(48px, 8.33vw, 120px) 82px;
  }
  .sec-about-layout {
    display: grid;
    grid-template-columns: minmax(0, 445fr) minmax(0, 760fr);
    column-gap: clamp(25px, 2.5vw, 48px);
    align-items: start;
    justify-content: center;
    min-height: 0;
  }
  .sec-about-copy {
    grid-column: 1;
    grid-row: 1;
    width: 445px;
    max-width: 100%;
  }
  .sec-about .sec-heading-jp {
    margin-top: var(--space-32);
  }
  .sec-about-body {
    width: 445px;
    max-width: 100%;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1.6px;
  }
  .sec-about-lead {
    width: 430px;
    max-width: 100%;
    font-size: 26px;
    font-weight: var(--weight-semibold);
    line-height: 40px;
    letter-spacing: 0.1em; /* 1.6px / 16px */
  }
  .sec-about-photo figcaption {
    letter-spacing: 0.12em;
    padding: 10px 13px;
  }
  .sec-about-photo-layer {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    max-width: 745px;
    height: auto;
    aspect-ratio: 745 / 760;
    justify-self: end;
    margin-top: 0;
  }
  .sec-about-photo-easy {
    top: 0;
    right: auto;
    left: 5.8%;
    width: 33.02%;
    height: 47.5%;
  }
  .sec-about-photo-easy figcaption {
    top: 5.54%;
    bottom: auto;
    left: -9.76%;
    padding: 18px 13px;
    writing-mode: vertical-rl;
  }
  .sec-about-photo-cushion {
    top: 20.4%;
    right: auto;
    left: 41.8%;
    width: 56.64%;
    height: 26.97%;
  }
  .sec-about-photo-cushion figcaption {
    top: -8.29%;
    right: -1.9%;
    bottom: auto;
    left: auto;
    max-width: 373px;
  }
  .sec-about-photo-comfort {
    top: 53.8%;
    right: auto;
    left: 1.25%;
    width: 55.03%;
    height: 30.53%;
  }
  .sec-about-photo-comfort figcaption {
    left: 2.93%;
    bottom: -17px;
  }
  .sec-about-photo-design {
    top: 56.8%;
    right: 7%;
    left: auto;
    width: 33.02%;
    height: 46.18%;
  }
  .sec-about-photo-design figcaption {
    top: 0;
    right: -8.94%;
    bottom: auto;
    left: auto;
    padding: 18px 13px;
    writing-mode: vertical-rl;
  }
  .sec-about-region {
    grid-column: 1;
    grid-row: 2;
    order: initial;
    margin: 150px 0 0 46px;
  }
}
@media (min-width: 1200px) {
  .sec-about::before {
    top: 61vh;
    right: 21%;
    width: 518px;
    height: 370px;
  }
}
@media (min-width: 1400px) {
  .sec-about::before {
    top: 74vh;
    right: 23%;
  }

  .sec-about > .container {
    padding: 60px clamp(48px, 8.33vw, 120px) 103px;
  }
  .sec-about-photo figcaption {
    font-size: 1rem;
  }
  .sec-about-photo-easy figcaption {
    padding: 18px 13px 63px;
  }
  .sec-about-photo-cushion figcaption {
    padding: 8px 48px 8px 14px;
  }
}
/* ==============================================================
   HOW TO USE セクション
   ============================================================== */
.cta-about + #how {
  /* CTA の背景だけを HOW に重ねる。値は cta-about.css と共通管理 */
  margin-top: calc(-1 * var(--front-cta-how-overlap));
}
.sec-how {
  --how-slider-container-padding: var(--space-24);
  --how-slider-right-screen-gap: var(--space-24);
  --how-slider-right-bleed-target: 0px;
  --how-slider-right-bleed: 0px;
  position: relative;
  /* cta-about(z-index:0) より手前に固定し、重なりで前面要素が透けないようにする */
  z-index: 4;
  isolation: isolate;
  /* backdrop-filter 側の合成レイヤと sibling 重なり時の順序を安定させる */
  transform: translateZ(0);
  overflow: hidden;
  padding-block: var(--space-64);
  /* CTA 背景写真が重なり領域で透けるよう、HOW 本体は半透明トーンに留める */
  background: rgb(213 208 176 / var(--front-how-bg-tint-opacity));
}
.sec-how::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("library/images/material/faq-bg-texture.webp") repeat center /
    cover;
  mix-blend-mode: overlay;
  opacity: var(--front-how-front-texture-opacity);
}
.sec-how > .container {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .sec-how {
    /* 右側だけ container 外へ見せる量。target と screen-gap で表示幅を調整する */
    --how-slider-container-padding: var(--space-40);
    --how-slider-right-screen-gap: var(--space-12);
    --how-slider-right-bleed-target: clamp(32px, 5vw, 48px);
    --how-slider-right-bleed: min(
      var(--how-slider-right-bleed-target),
      calc(
        var(--how-slider-container-padding) - var(--how-slider-right-screen-gap)
      )
    );
  }
}
@media (min-width: 992px) {
  .sec-how {
    --how-slider-container-padding: var(--space-80);
    --how-slider-right-bleed-target: clamp(64px, 6vw, 112px);
    --how-slider-right-bleed: min(
      var(--how-slider-right-bleed-target),
      calc(
        var(--how-slider-container-padding) - var(--how-slider-right-screen-gap)
      )
    );
    padding-block: 120px 120px;
  }
}
@media (min-width: 1440px) {
  .sec-how {
    --how-slider-container-padding: var(--space-120);
    /* 1440px時点の右端の切れ幅を、PC固定CTA（.fv-side-cta）の幅62pxと揃える */
    --how-slider-right-bleed-target: calc(
      var(--how-slider-container-padding) - 62px
    );
  }
  .sec-how .container {
    padding-inline: var(--space-120);
  }
}
/* === セクション見出しオーバーライド === */
.sec-how .sec-heading {
  gap: var(--space-12);
  margin-bottom: var(--space-40);
}
.sec-how .sec-heading-en {
  font-family: var(--font-display);
  font-size: clamp(
    32px,
    calc(32px + (64 - 32) * (100vw - 393px) / (1440 - 393)),
    64px
  );
  font-weight: var(--weight-regular);
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--cocopaver-primary-dark);
}
.sec-how .sec-heading-jp {
  font-family: var(--font-mincho);
  font-size: clamp(
    14px,
    calc(14px + (20 - 14) * (100vw - 393px) / (1440 - 393)),
    20px
  );
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--cocopaver-primary-dark);
  line-height: 1;
}
@media (min-width: 992px) {
  .sec-how .sec-heading {
    margin-bottom: 68px;
  }
}
/* === グループ (PERSONAL / PUBLIC USE) === */
.sec-how-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}
.sec-how-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  align-items: flex-start;
}
/* グループヘッド (縦書きラベル) */
.sec-how-group-head {
  display: flex;
  flex-shrink: 0;
  flex-direction: column-reverse;
  gap: var(--space-20);
  align-items: flex-start;
}
.sec-how-group-jp {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--space-8);
  align-items: flex-start;
  flex-wrap: wrap;
}
.sec-how-group-jp span {
  writing-mode: horizontal-tb;
  font-feature-settings: "vkna" 1;
  font-family: var(--font-mincho);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-medium);
  color: var(--cocopaver-primary-dark);
  letter-spacing: 0.1em;
  line-height: 1.2;
  width: auto;
}
.sec-how-group-en {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
}
.sec-how-group-en span {
  display: block;
  writing-mode: horizontal-tb;
  transform: none;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  color: var(--cocopaver-accent);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.sec-how-group-en[data-text-fade-in="vertical"] {
  clip-path: none;
}
.sec-how-group-en[data-text-fade-in="vertical"] > span {
  opacity: 0;
  transform: translateY(1.1em);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
  transition-delay: 0.2s;
  will-change: opacity, transform;
}
.sec-how-group-en[data-text-fade-in="vertical"].is-text-fade-in > span {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 992px) {
  .sec-how-groups {
    gap: 123px;
  }
  .sec-how-group {
    flex-direction: row;
    gap: var(--space-56);
  }
  .sec-how-group-head {
    flex-direction: row;
    gap: var(--space-24);
    padding-top: 0;
  }
  .sec-how-group-jp {
    flex-direction: row;
    gap: var(--space-16);
  }
  .sec-how-group-jp span {
    writing-mode: vertical-rl;
    font-size: 26px;
    font-weight: var(--weight-medium);
    font-feature-settings:
      "vert" on,
      "vkna" on;
    line-height: 40px;
    width: 27px;
  }
  .sec-how-group-en {
    align-items: flex-start;
    width: 43px;
  }
  .sec-how-group-en span {
    transform: rotate(90deg);
    font-size: var(--font-size-3xl);
    transform-origin: 22px 22px;
  }
  .sec-how-group-en[data-text-fade-in="vertical"] > span {
    transform: translateY(1.1em) rotate(90deg);
  }
  .sec-how-group-en[data-text-fade-in="vertical"].is-text-fade-in > span {
    transform: translateY(0) rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sec-how-group-en[data-text-fade-in="vertical"] > span {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .sec-how-group-en[data-text-fade-in="vertical"] > span {
    transform: rotate(90deg);
  }
}
/* === スライダーラッパー === */
.how-slider-wrap {
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow: visible;
}
.how-slider {
  overflow: hidden;
}
.how-slider .swiper-wrapper {
  display: flex;
  align-items: flex-start;
}
.how-slider:not(.swiper-initialized) .swiper-wrapper {
  gap: var(--space-16);
}
.how-slider .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .how-slider {
    overflow: visible;
  }
  .how-slider-wrap {
    width: calc(100% + var(--how-slider-right-bleed));
    max-width: none;
    margin-right: calc(-1 * var(--how-slider-right-bleed));
  }
  .how-slider:not(.swiper-initialized) .swiper-wrapper {
    gap: var(--space-32);
  }
  .how-slider .swiper-slide {
    width: clamp(340px, 46vw, 450px);
  }
}
@media (min-width: 992px) {
  .how-slider-wrap {
    width: auto;
    max-width: calc(1125px + var(--how-slider-right-bleed));
    margin-right: calc(-1 * var(--how-slider-right-bleed));
  }
  .how-slider:not(.swiper-initialized) .swiper-wrapper {
    gap: 48px;
  }
  .how-slider .swiper-slide {
    width: 409px;
  }
}
/* === スライダーナビ === */
.how-slider-nav {
  display: flex;
  gap: var(--space-80);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-20);
}
@media (min-width: 992px) {
  .how-slider-nav {
    margin-top: var(--space-40);
    justify-content: flex-start;
    gap: var(--space-32);
  }
}
.how-slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.how-slider-icon {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
}
.how-slider-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("library/images/icon/arrow-link.svg") no-repeat center /
    contain;
  transform: none;
}
.how-slider-icon-prev::after {
  content: none;
}
.how-slider-icon-next::after {
  content: none;
}
.how-slider-icon-prev {
  transform: scaleX(-1);
}
/* === カード === */
.how-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
@media (min-width: 992px) {
  .how-card {
    gap: var(--space-32);
  }
}
/* 画像エリア */
.how-card-img {
  position: relative;
  aspect-ratio: 345 / 220;
  height: auto;
  overflow: hidden;
  margin: 0;
}
.how-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.how-card-num {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(
    16px,
    calc(16px + (20 - 16) * (100vw - 393px) / (1440 - 393)),
    20px
  );
  color: var(--white);
  letter-spacing: 0.1em;
  text-align: right;
  /* PDF / カンプに寄せた行間（旧 1.14 は詰まり過ぎ）。font-size の clamp と同軸で可変 */
  line-height: clamp(
    22px,
    calc(22px + (28 - 22) * (100vw - 393px) / (1440 - 393)),
    28px
  );
  padding: 0 var(--space-12) var(--space-12) 0;
  margin: 0;
  /* 改行はデータ内の \n のみ（how-slider.php は nl2br しない。br+\n の二重改行を防ぐ） */
  white-space: pre-line;
}
@media (min-width: 992px) {
  .how-card-img {
    height: 262px;
  }
  .how-card-num {
    padding: 0 var(--space-12) var(--space-12) 0;
  }
}
/* テキストエリア */
.how-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.how-card-title {
  font-family: var(--font-mincho);
  font-size: clamp(
    24px,
    calc(24px + (32 - 24) * (100vw - 393px) / (1440 - 393)),
    32px
  );
  font-weight: var(--weight-medium);
  color: var(--cocopaver-primary-dark);
  letter-spacing: 0.1em;
  margin: 0;
  line-height: 1;
  flex-shrink: 0;
}
.how-card-text {
  font-family: var(--font-mincho);
  font-size: 14px;
  line-height: calc(24 / 14);
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin: 0;
  font-feature-settings: normal;
}
@media (min-width: 992px) {
  .how-card-text {
    line-height: calc(26 / 14);
  }
}
.how-card-text small {
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 2;
  margin-top: var(--space-6);
}
@media (min-width: 992px) {
  .how-card-text small {
    font-size: 10px;
    line-height: 2.6;
  }
}
/* =============================================================
 * Form 共通プリミティブ
 * contact-corp / contact-personal / agency 共有のフォーム要素スタイル。
 * ページ固有の幅・色・上書きは page/contact/{corp,personal}.css と
 * page/agency/*.css で .page-{contact,agency}-{...} プレフィックス付きで上書きする。
 * ============================================================= */
/* ===== 1. フォーム本体 / 行 / ラベル ===== */
.page-agency-form,
.page-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
}
.page-agency-form {
  gap: 44px;
}
.page-agency-form p,
.page-contact-form p {
  margin-bottom: 0;
}
.page-agency-form p#agency-area-counter {
  display: none;
}
.wpcf7 form.page-agency-form .wpcf7-response-output,
.wpcf7 form.page-contact-form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  color: #dc3232;
}
.wpcf7 form.page-agency-form.sent .wpcf7-response-output,
.wpcf7 form.page-contact-form.sent .wpcf7-response-output {
  display: none;
}
.page-agency-form-row,
.page-contact-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.page-agency-form-label,
.page-contact-form-label,
.page-contact-form-section-title {
  color: var(--text-main);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.page-agency-form-label,
.page-contact-form-label {
  margin-bottom: 10px;
}
.page-agency-form-required,
.page-contact-form-required {
  display: inline-block;
  margin-left: 10px;
  padding: var(--space-4) var(--space-12);
  min-width: var(--space-44);
  border-radius: var(--radius-full);
  background: var(--cocopaver-primary);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-regular);
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}
.page-contact-form-fieldset {
  min-inline-size: 0;
  margin: 0;
  border: 0;
}
/* Bootstrap Reboot の legend 用 font-size・float を打ち消し、他ラベル行と同じ段階に揃える */
.page-contact-form-fieldset > legend.page-contact-form-label {
  float: none;
  width: auto;
  margin-bottom: 0;
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
}
/* 施工の有無など: 見出し〜選択肢は他行と同じ 8px 段間（過剰な空きを防ぐ） */
.page-contact-form-fieldset.page-contact-form-row {
  gap: var(--space-8);
}
.page-contact-form-fields,
.page-contact-form-subfields {
  row-gap: var(--space-24);
}
/* h-adr 内はネストした Bootstrap .row にしない（親の row-gap が効かず縦詰まりになるため）。
 * 郵便番号〜住所ブロックはこのスタックで、親 .page-contact-form-fields / .page-contact-form-subfields と同じ段間隔に揃える。 */
.page-contact-form-h-adr-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-inline-size: 0;
}
/* 代理店フォームの .page-agency-form-fields は row-gap: space-16 前提のため揃える */
.page-agency-form-h-adr-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-inline-size: 0;
}
.page-contact-form-section-block {
  margin-top: 0;
}
.page-contact-form-section-title {
  margin: 0 0 var(--space-32);
  font-size: var(--font-size-base);
}
.page-contact-form-checks .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}
/* ===== 2. 入力要素 (text/email/tel/url/date/select/textarea) ===== */
.page-agency-form input[type="text"],
.page-agency-form input[type="email"],
.page-agency-form input[type="tel"],
.page-agency-form input[type="url"],
.page-agency-form input[type="date"],
.page-agency-form input.page-contact-form-date,
.page-agency-form select,
.page-agency-form textarea,
.page-contact-form input[type="text"],
.page-contact-form input[type="email"],
.page-contact-form input[type="tel"],
.page-contact-form input[type="url"],
.page-contact-form input[type="date"],
.page-contact-form input.page-contact-form-date,
.page-contact-form select,
.page-contact-form textarea {
  width: 100%;
  min-height: var(--space-40);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--cocopaver-accent);
  border-radius: var(--space-4);
  background: var(--white);
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
}
.page-contact-form ::placeholder,
.page-agency-form ::placeholder,
.page-contact-form-note {
  color: var(--cocopaver-primary);
  opacity: 1;
}
.page-contact-form-note {
  color: var(--text-main);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
}
.page-contact-form textarea,
.page-agency-form textarea {
  min-height: unset;
  height: auto;
  resize: vertical;
}
.page-contact-form textarea.is-cocopaver-autogrow,
.page-agency-form textarea.is-cocopaver-autogrow {
  overflow-y: hidden;
  resize: none;
}
.page-contact-form textarea.is-cocopaver-autogrow-scroll,
.page-agency-form textarea.is-cocopaver-autogrow-scroll {
  overflow-y: auto;
}
.page-contact-form textarea.is-cocopaver-char-overlimit,
.page-agency-form textarea.is-cocopaver-char-overlimit {
  border-color: #c0392b;
}
.page-contact-form-counter,
.page-agency-form-count {
  margin: var(--space-8) 0 0;
  color: var(--text-main);
  font-family: var(--font-sans-jp);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  text-align: right;
}
.page-contact-form-counter.is-error,
.page-agency-form-count.is-error {
  color: #c0392b;
}
/* ===== 3. セレクト (複数行 / 商品 / 配送先) ===== */
.page-contact-form-select-list {
  width: 100%;
  height: auto;
  min-height: 162px;
  padding: var(--space-12) 0;
  overflow: hidden;
}
.page-contact-form-select-list option {
  min-height: var(--space-32);
  padding: var(--space-8) var(--space-12);
  font-family: var(--font-mincho);
}
.page-contact-form-select-list option:checked {
  background: #edede7 linear-gradient(#edede7, #edede7);
}
.page-contact-form-select-list-quote {
  min-height: 146px;
}
.page-contact-form-select-list-delivery {
  min-height: 185px;
}
.page-contact-form-custom-select {
  position: relative;
  display: block;
  width: 100%;
}
.page-contact-form-custom-select-native {
  display: none;
}
.page-contact-form-custom-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--space-40);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--cocopaver-accent);
  border-radius: var(--space-4);
  background: var(--white);
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  text-align: left;
  cursor: pointer;
  transition: none;
}
.page-contact-form-custom-select-button:focus-visible {
  outline: 2px solid var(--cocopaver-primary);
  outline-offset: 2px;
}
.page-contact-form-custom-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-semibold);
}
.page-contact-form-custom-select-arrow {
  flex: 0 0 auto;
  width: 11.705px;
  height: 7.218px;
  aspect-ratio: 60 / 37;
  margin-right: var(--space-4);
  background: var(--Schemes-On-Surface, #1d1b20);
  mask: url("library/images/material/keyboard_arrow_up.svg") center / contain no-repeat;
  transform: rotate(180deg);
  transition: none;
  -webkit-mask: url("library/images/material/keyboard_arrow_up.svg") center / contain no-repeat;
}
.page-contact-form-custom-select.open .page-contact-form-custom-select-arrow {
  transform: none;
}
.page-contact-form-custom-select.open .page-contact-form-custom-select-button {
  border-bottom-color: transparent;
  border-radius: var(--space-4) var(--space-4) 0 0;
}
.page-contact-form-custom-select-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 220px;
  margin: 0;
  overflow-y: auto;
  border: 1px solid var(--cocopaver-accent);
  border-top: 0;
  border-radius: 0 0 var(--space-4) var(--space-4);
  background: var(--white);
}
.page-contact-form-custom-select-list[hidden] {
  display: none;
}
.page-contact-form-custom-select-option {
  width: 100%;
  min-height: var(--space-32);
  padding: var(--space-8) var(--space-12);
  border: 0;
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  text-align: left;
  cursor: pointer;
  transition: none;
}
.page-contact-form-custom-select-option:hover,
.page-contact-form-custom-select-option:focus,
.page-contact-form-custom-select-option.selected {
  background: #edede7;
  outline: none;
}
.page-contact-form-custom-select-option.selected {
  font-weight: var(--weight-semibold);
}
.page-contact-form-custom-select.is-error .page-contact-form-custom-select-button {
  border-color: #c0392b;
}
@media (min-width: 768px) {
  .page-contact-form .page-contact-form-custom-select {
    max-width: 351px;
  }

  .page-contact-form .page-contact-form-custom-select-narrow {
    max-width: 320px;
  }
}
@media (min-width: 992px) {
  .works-slider-nav {
    justify-content: flex-start;
  }
}
/* ===== 4. ラジオ・チェックボックス ===== */
.page-contact-form-radios,
.page-contact-form-checks {
  display: block;
}
/* CF7 は [radio] を .wpcf7-form-control-wrap > .wpcf7-radio 内に出すため、
 * 選択肢間の gap はここで付ける（外側 .page-contact-form-radios の flex では効かない） */
.page-contact-form-radios .wpcf7-form-control.wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-24);
  row-gap: var(--space-8);
  margin-bottom: var(--space-24);
}
.page-contact-form-checks .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
}
.page-contact-form-checks .wpcf7-form-control.wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  row-gap: var(--space-8);
}
.page-contact-form-radios .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.page-contact-form-checks .wpcf7-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* CF7 が選択肢の間に挿す改行は縦積みレイアウトでは不要（余計な段間を防ぐ） */
.page-contact-form-checks .wpcf7-list-item + br {
  display: none;
}
.page-contact-form-radios label,
.page-contact-form-checks label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  line-height: 1.5;
  cursor: pointer;
}
.page-contact-form-radios .wpcf7-list-item-label,
.page-contact-form-checks .wpcf7-list-item-label {
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
}
/* カンプ: 細い円枠＋選択時は内側に濃い緑の塗り（ネイティブ accent に依存しない） */
.page-contact-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--space-20);
  height: var(--space-20);
  margin: 0;
  padding: 0;
  border: 1px solid var(--cocopaver-primary-dark);
  border-radius: 50%;
  background-color: var(--white);
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
.page-contact-form input[type="radio"]:checked {
  background-color: var(--white);
  background-image: radial-gradient(
    circle at center,
    var(--cocopaver-primary-dark) 0,
    var(--cocopaver-primary-dark) 32%,
    transparent 33%
  );
}
.page-contact-form input[type="radio"]:focus-visible {
  outline: 2px solid var(--cocopaver-primary);
  outline-offset: 2px;
}
.page-contact-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--space-20);
  height: var(--space-20);
  margin: 0;
  padding: 0;
  border: 1px solid var(--cocopaver-primary-dark);
  border-radius: 5px;
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
.page-contact-form input[type="checkbox"]:checked {
  background-color: var(--cocopaver-primary-dark);
  border-color: var(--cocopaver-primary-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");
}
.page-contact-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cocopaver-primary);
  outline-offset: 2px;
}
/* ===== 5. ドロップゾーン (添付ファイル) ===== */
.page-contact-form-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 275px;
  padding: var(--space-40) var(--space-24);
  border: 1px dashed var(--cocopaver-primary);
  border-radius: var(--radius-sm);
  background: var(--white);
  text-align: center;
}
/* ドロップゾーン装飾アイコン */
.page-contact-form-dropzone::before {
  content: "";
  display: block;
  width: 32px;
  height: 31px;
  margin-bottom: var(--space-16);
  flex-shrink: 0;
  background: url("library/images/icon/icon-form-dropzone.svg") no-repeat center /
    contain;
}
.page-contact-form-dropzone-text {
  max-width: 100%;
  margin: 0 0 var(--space-16);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-main);
}
.page-contact-form-dropzone-line1,
.page-contact-form-dropzone-line2 {
  display: inline;
}
/* SP: 意図した位置で改行し、行内で不自然な折返しを防ぐ */
@media (max-width: 767.98px) {
  .page-contact-form-dropzone-line1,
  .page-contact-form-dropzone-line2 {
    white-space: nowrap;
  }
}
.page-contact-form-dropzone-or {
  font-size: var(--font-size-sm);
  padding: var(--space-16) 0;
  display: inline-block;
}
/* PC: 案内1行目を結合し、幅不足での途中折返しを防ぐ */
@media (min-width: 768px) {
  br.page-contact-form-dropzone-br-sm {
    display: none;
  }

  .page-contact-form-dropzone-lines12 {
    white-space: nowrap;
  }
}
.page-contact-form-note.page-contact-form-files-limit-note,
.page-contact-form-note.page-contact-form-dropzone-note {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  text-align: center;
}
.page-contact-form-files-limit-detail {
  display: block;
  margin-top: var(--space-2);
}
.page-contact-form-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-32);
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--cocopaver-primary);
  border-radius: var(--radius-full);
  color: var(--cocopaver-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  cursor: pointer;
}
.page-contact-form-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.page-contact-form-date {
  max-width: 320px;
  color: var(--cocopaver-accent);
}
.page-contact-form-date-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
}
.page-contact-form-date-wrap .page-contact-form-date {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-right: var(--space-40);
  /* iOS Safari の native date 表示が疑似表示と重ならないように隠す。 */
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  cursor: pointer;
}
.page-contact-form-date-wrap .page-contact-form-date::-webkit-date-and-time-value {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.page-contact-form-date-wrap .page-contact-form-date::-webkit-datetime-edit,
.page-contact-form-date-wrap .page-contact-form-date::-webkit-datetime-edit-fields-wrapper,
.page-contact-form-date-wrap .page-contact-form-date::-webkit-datetime-edit-year-field,
.page-contact-form-date-wrap .page-contact-form-date::-webkit-datetime-edit-month-field,
.page-contact-form-date-wrap .page-contact-form-date::-webkit-datetime-edit-day-field,
.page-contact-form-date-wrap .page-contact-form-date::-webkit-datetime-edit-text {
  color: transparent;
  background: transparent;
  -webkit-text-fill-color: transparent;
}
.page-contact-form-date-wrap .page-contact-form-date::-webkit-calendar-picker-indicator {
  opacity: 0;
}
.page-contact-form-date-wrap .page-contact-form-date::selection {
  background: transparent;
  color: transparent;
}
.page-contact-form-date-placeholder {
  position: absolute;
  top: 50%;
  left: var(--space-12);
  z-index: 2;
  color: var(--cocopaver-accent);
  display: block;
  min-width: 120px;
  padding-right: var(--space-8);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  pointer-events: auto;
  transform: translateY(-50%);
}
.page-contact-form-date-wrap.has-value .page-contact-form-date-placeholder {
  color: var(--text-main);
}
.page-contact-form-date-icon {
  position: absolute;
  top: 50%;
  right: var(--space-12);
  z-index: 2;
  display: block;
  width: var(--space-24);
  height: var(--space-24);
  background: url("library/images/material/calendar.svg") no-repeat center /
    contain;
  cursor: pointer;
  transform: translateY(-50%);
}
/* ===== 6. 送信ボタン ===== */
.page-agency-form-action,
.page-contact-form-action {
  margin: var(--space-32) 0 0;
  text-align: center;
}
.page-contact-form-submit,
.page-agency-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 50px;
  padding: var(--space-12);
  border: 0;
  /* 35px = ボタン高 50px の半分相当の角丸 (ピル形状) */
  border-radius: 35px;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  letter-spacing: 1.6px;
  cursor: pointer;
}
.page-contact-form-submit:hover,
.page-agency-form-submit:hover {
  background: var(--bs-black);
}
.wpcf7 form.submitting .page-contact-form-submit,
.wpcf7 form[data-status="submitting"] .page-contact-form-submit,
.wpcf7 form.submitting .page-agency-form-submit,
.wpcf7 form[data-status="submitting"] .page-agency-form-submit {
  opacity: 0.82;
  cursor: progress;
  pointer-events: none;
}
/* CF7標準の点滅表示を、一般的なリング型ローディングに置き換える。 */
body .wpcf7 form .wpcf7-spinner {
  position: relative;
  display: inline-flex;
  width: var(--space-24);
  height: var(--space-24);
  margin: 0 0 0 var(--space-12);
  padding: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  vertical-align: middle;
  visibility: hidden;
}
body .wpcf7 form.submitting .wpcf7-spinner,
body .wpcf7 form[data-status="submitting"] .wpcf7-spinner {
  opacity: 1;
  visibility: visible;
}
body .wpcf7 form .wpcf7-spinner::before {
  content: "";
  position: absolute;
  inset: var(--space-4);
  width: auto;
  height: auto;
  margin: 0;
  border: 2px solid var(--cocopaver-primary-dark);
  border-top-color: transparent;
  border-radius: 50%;
  background: transparent;
  transform-origin: center;
  animation: cocopaver-form-loading 0.75s linear infinite;
}
@keyframes cocopaver-form-loading {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  body .wpcf7 form .wpcf7-spinner::before {
    border-top-color: var(--cocopaver-primary-dark);
    opacity: 0.65;
    animation: none;
  }
}
/* =============================================================
 * サンクスページ
 * 構成:
 *   1. 共通 (background / container)
 *   2. 見出し (sec-heading)
 *   3. 本文 (message-body)
 *   4. アクションボタン (message-action / btn)
 *   5. 表示切替 (sp-only / pc-only)
 *   6. フッター調整 (~ .footer)
 *
 * font-size 可変化: SP 393 / PC 1440 を両端に clamp。
 * ============================================================= */
/* ----- 1. 共通: 背景・コンテナ ----- */
.page-thanks-message {
  min-height: 534px;
  margin-top: 0;
  padding-block: var(--space-56) var(--space-64);
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)),
    url("library/images/material/faq-bg-texture.webp") repeat center top / 900px auto;
}
.page-thanks-corp .page-thanks-message {
  min-height: 507px;
}
.page-thanks-message .container {
  padding-inline: var(--space-40);
}
.page-thanks-message .col-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ----- 2. 見出し ----- */
.page-thanks-message .sec-heading {
  gap: var(--space-16);
  margin-bottom: var(--space-32);
  color: var(--cocopaver-primary);
}
.page-thanks-message .sec-heading-en {
  font-size: clamp(48px, 4.585vw + 29.99px, 96px);
  line-height: 1;
  letter-spacing: 0;
}
.page-thanks-message .sec-heading-jp {
  font-size: clamp(20px, 0.382vw + 18.5px, 24px);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 2px;
}
/* ----- 3. 本文 ----- */
.page-thanks-message-body {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(14px, 0.191vw + 13.25px, 16px);
  font-weight: var(--weight-medium);
  line-height: 1.92;
  letter-spacing: 0.6px;
  text-align: center;
}
/* ----- 4. アクションボタン ----- */
.page-thanks-message-action {
  margin: var(--space-32) 0 0;
  text-align: center;
}
.page-thanks-message-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-120);
  height: var(--space-120);
  border-radius: 50%;
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.7px;
  text-decoration: none;
}
/* ----- 5. SP/PC 表示切替 ----- */
.page-thanks-sp-only {
  display: inline;
}
.page-thanks-pc-only {
  display: none;
}
/* ----- 6. SP 時のフッター調整 ----- */
@media (max-width: 991.98px) {
  .page-thanks ~ .footer .footer-cta {
    padding-bottom: var(--space-24);
  }

  .page-thanks ~ .footer .footer-cta-card-wrapper {
    gap: var(--space-12);
  }
  .page-thanks ~ .footer .footer-cta-card {
    gap: var(--space-4);
    padding-inline: var(--space-8);
  }
  .page-thanks ~ .footer .footer-body {
    padding-top: var(--space-24);
  }
  .page-thanks ~ .footer .footer-nav {
    padding-top: var(--space-16);
  }
  .page-thanks ~ .footer .footer-nav-list {
    line-height: 1.8;
  }
  .page-thanks ~ .footer .footer-copyright {
    padding-block: var(--space-8);
  }
}
/* ----- PC (>= 992px) ----- */
@media (min-width: 992px) {
  .page-thanks-message {
    min-height: 614px;
    padding-block: var(--space-104) var(--space-120);
    margin-top: 0;
    background:
      linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)),
      url("library/images/material/faq-bg-texture.webp") repeat center top / 1440px auto;
  }

  .page-thanks-corp .page-thanks-message {
    min-height: 614px;
  }

  .page-thanks-message .container {
    padding-inline: var(--space-96);
  }

  .page-thanks-message .col-12 {
    display: grid;
    grid-template-columns: 549px minmax(0, 1fr);
    column-gap: var(--space-40);
    align-items: start;
  }

  .page-thanks-message .sec-heading {
    align-items: flex-start;
    gap: var(--space-40);
    margin-bottom: 0;
    text-align: left;
  }

  .page-thanks-message .sec-heading-en {
    line-height: 0.98;
  }

  .page-thanks-message .sec-heading-jp {
    letter-spacing: 2.4px;
  }

  .page-thanks-message-body {
    max-width: 555px;
    padding-top: 28px;
    text-align: left;
    letter-spacing: 0.4px;
    line-height: 2.25;
  }

  .page-thanks-agency .page-thanks-message-body {
    max-width: 583px;
    line-height: 2.25;
  }

  .page-thanks-message-action {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: var(--space-64);
  }

  .page-thanks-message-btn {
    width: var(--space-148);
    height: var(--space-148);
  }

  .page-thanks-sp-only {
    display: none;
  }

  .page-thanks-pc-only {
    display: inline;
  }

  .page-thanks ~ .footer .footer-body {
    padding: var(--space-40) 0 26px;
  }

  .page-thanks ~ .footer .footer-copyright {
    padding-block: var(--space-8);
  }
}
/* =============================================================
 * 施工・販売パートナー募集ページ (base)
 * 構成:
 *   1. リード/コンタクトリードの共通テキスト
 *   2. 共通リスト (merit / shops / form fields)
 *   3. メリットアイテム (page-agency-merit-item)
 *   4. コンタクト/ショップ背景 (page-agency-contact / -shops)
 *   5. フォーム共通 (form-section / form-note)
 *   6. ショップパネル/領域 (page-agency-shops-*)
 * ============================================================= */
/* ----- 1. 共通テキスト (lead) ----- */
.page-agency-lead-text,
.page-agency-contact-lead {
  margin: 0;
  text-align: center;
  line-height: var(--leading-relaxed);
}
/* ----- 2. 共通リスト (gutter / row gap) ----- */
.page-agency-merit-list,
.page-agency-shops-list,
.page-agency-form-fields,
.page-agency-form-subfields {
  --bs-gutter-x: 0;
  row-gap: var(--space-24);
  margin-inline: 0;
}
.page-agency-merit-list,
.page-agency-shops-list {
  margin-bottom: 0;
}
/* ----- 3. メリットアイテム ----- */
.page-agency-merit-item {
  height: 100%;
  padding: var(--space-24);
  background: var(--white);
  border-radius: var(--radius-md);
}
.page-agency-merit-item-title,
.page-agency-shops-region-title,
.page-agency-form-section-title {
  font-family: var(--font-mincho);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.page-agency-merit-item-title {
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-xl);
}
.page-agency-merit-item-text,
.page-agency-form-note {
  margin: 0;
  line-height: var(--leading-relaxed);
}
/* ----- 4. コンタクト / ショップ背景 ----- */
.page-agency-contact,
.page-agency-shops {
  background: var(--cocopaver-bg-light);
}
/* ----- 5. フォーム共通 ----- */
.page-agency-form-section {
  margin-top: var(--space-16);
}
.page-agency-form-section-title {
  margin: 0 0 var(--space-24);
  font-size: var(--font-size-base);
}
.page-agency-form-note {
  color: var(--cocopaver-primary);
  font-size: var(--font-size-sm);
}
/* ----- 6. ショップパネル / 領域 ----- */
.page-agency-shops-region + .page-agency-shops-region {
  margin-top: var(--space-40);
}
.page-agency-shops-panel {
  padding: var(--space-24) var(--space-8);
  background: var(--white);
}
.page-agency-shops-columns {
  row-gap: var(--space-40);
}
.page-agency-shops-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.page-agency-shops-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-16);
}
.page-agency-shops-item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.page-agency-shops-name {
  display: block;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.page-agency-shops-sns a + a {
  margin-left: var(--space-12);
}
/* ----- LG (>= 992px) ----- */
@media (min-width: 992px) {
  .page-agency-form {
    padding: 0;
  }
  .page-agency .page-contact-form-field-narrow,
  .page-agency .page-contact-form-custom-select,
  .page-agency .page-contact-form-custom-select-button {
    max-width: 320px;
  }

  .page-agency-shops-panel {
    padding: var(--space-64) var(--space-40) var(--space-80);
  }

  .page-agency-shops-columns {
    --bs-gutter-x: var(--space-80);
  }

  .page-agency-shops-region + .page-agency-shops-region {
    margin-top: var(--space-64);
  }
}
/* =============================================================
 * 法人お問い合わせページ (visual pass)
 * 構成:
 *   1. ページ背景
 *   1. ページ背景
 *   2. タブ (page-contact-tabs)
 *   3. フォームセクション見出し (page-contact-form-section / sec-heading)
 *   4. フォームレイアウト (page-contact-form / fields / dropzone / select-list)
 *   5. MD (>= 768px) 上書き
 *
 * font-size 可変化: SP 393 / PC 1440 を両端に clamp。
 * ============================================================= */
.page-contact-corp .container {
  /* padding-inline: var(--space-40); */
  padding-inline: clamp(2.5rem, -2.075rem + 18.62vw, 14.688rem);
}
/* ----- 1. ページ背景 ----- */
.page-template-page-contact-corp,
.page-template-page-contact-corp main,
.page-contact-corp {
  background:
    linear-gradient(rgba(255, 253, 244, 0.74), rgba(255, 253, 244, 0.74)),
    url("library/images/material/faq-bg-texture.webp") repeat center top / 1440px
      auto;
}
/* ----- 2. タブ ----- */
.page-contact-tabs {
  padding: var(--space-32) 0 var(--space-32);
}
.page-contact-tabs-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
}
.page-contact-tabs-group,
.page-contact-tabs-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-contact-tabs-current {
  gap: 0;
  justify-content: center;
}
.page-contact-tabs-item {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.page-contact-tabs-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  width: min(100%, 313px);
  min-height: 72px;
  padding: 5px var(--space-24) 5px var(--space-8);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-13);
  letter-spacing: normal;
  line-height: 1;
  text-decoration: none;
}
.page-contact-tabs-link {
  font-size: var(--font-size-base);
}
.page-contact-tabs-group
  .page-contact-tabs-item:first-child
  .page-contact-tabs-link {
  background: var(--cocopaver-accent);
}
.page-contact-tabs-link-sub {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  text-align: center;
}
@media (min-width: 375px) {
  .page-contact-tabs-link-sub {
    font-size: var(--font-size-base);
  }
}
.page-contact-tabs-link-arrow {
  flex: 0 0 auto;
  width: var(--space-24);
  height: var(--space-24);
  background: url("library/images/material/guidance_left-arrow.svg") no-repeat
    center / contain;
}
.page-contact-tabs-link-pc {
  display: none;
}
.page-contact-tabs-link-sp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  line-height: 1.15;
}
.page-contact-tabs-link-main:not(:only-child) {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-height: 60px;
  padding-inline: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-size: var(--font-size-sm);
  line-height: 1.15;
  text-align: center;
}
.page-contact-tabs-group
  .page-contact-tabs-item:nth-child(2)
  .page-contact-tabs-link-main:not(:only-child) {
  width: auto;
  min-width: 70px;
  min-height: 60px;
  height: auto;
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  font-size: var(--font-size-xs);
  line-height: 1.15;
}
.page-contact-tabs-link-current {
  width: min(100%, 313px);
  min-height: 47px;
  padding: var(--space-8) var(--space-24);
  border-radius: 0;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-size: clamp(20px, 0.382vw + 18.5px, 24px);
  letter-spacing: clamp(2px, 0.176vw + 1.31px, 3.84px);
}
.page-contact-tabs-link-current .page-contact-tabs-link-main {
  position: static;
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  transform: none;
}
/* ----- 3. フォームセクション見出し ----- */
.page-contact-form-section {
  padding: 0 0 var(--space-40);
}
.page-contact-corp .sec-heading {
  gap: 18px;
  margin-bottom: var(--space-64);
}
.page-contact-corp .sec-heading-en {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  line-height: 1;
  letter-spacing: 1.6px;
}
.page-contact-corp .sec-heading-jp {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: clamp(0.2rem, 0.155rem + 0.18vw, 0.32rem);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .page-contact-corp .sec-heading-jp {
    font-size: var(--font-size-3xl);
  }

  .page-contact-corp .sec-heading-en {
    color: var(--cocopaver-primary-dark);
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    line-height: 1;
    letter-spacing: 1.6px;
  }
}
.page-contact-corp .page-contact-form-lead {
  font-size: var(--font-size-xs);
  margin-bottom: 0;
}
@media (min-width: 375px) {
  .page-contact-corp .page-contact-form-lead {
    margin-top: 14px;
    color: var(--text-main);
    font-family: var(--font-mincho);
    font-size: clamp(0.875rem, 0.828rem + 0.19vw, 1rem);
    line-height: 1.85;
  }
}
/* ----- 4. フォームレイアウト ----- */
.page-contact-corp .page-contact-form-fields,
.page-contact-corp .page-contact-form-subfields {
  row-gap: var(--space-24);
}
.page-contact-corp .page-contact-form-section-block {
  margin-top: var(--space-8);
}
.page-contact-corp .page-contact-form-section-title {
  margin-top: var(--space-24);
  margin-bottom: var(--space-16);
}
.page-contact-corp .page-contact-form-action {
  margin-top: var(--space-24);
}
.page-contact-corp .page-contact-form-dropzone {
  min-height: 220px;
  padding: var(--space-24) var(--space-16);
}
.page-contact-corp .page-contact-form-select-list {
  min-height: 140px;
}
.page-contact-corp .page-contact-form-select-list-quote {
  min-height: 124px;
}
.page-contact-corp .page-contact-form-select-list-delivery {
  min-height: 158px;
}
/* ----- 5. MD (>= 768px) 上書き ----- */
@media (min-width: 768px) {
  .page-contact-tabs {
    padding: 104px 0 var(--space-48);
  }

  .page-contact-tabs-layout {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: clamp(var(--space-24), 3vw, var(--space-40));
    row-gap: var(--space-56);
  }

  .page-contact-tabs-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto;
    column-gap: clamp(var(--space-24), 3vw, var(--space-40));
    row-gap: var(--space-32);
  }

  .page-contact-tabs-item {
    width: auto;
  }

  .page-contact-tabs-current {
    flex-basis: 100%;
    flex-direction: row;
    justify-content: center;
  }

  .page-contact-tabs-link {
    width: 410px;
    padding: 5px var(--space-24) 5px var(--space-24);
  }

  .page-contact-tabs-link-main:not(:only-child) {
    flex-direction: row;
    width: auto;
    min-width: 113px;
    min-height: 28px;
    height: auto;
    padding-inline: var(--space-12);
    font-size: var(--font-size-sm);
    line-height: 1;
  }

  .page-contact-tabs-group
    .page-contact-tabs-item:nth-child(2)
    .page-contact-tabs-link-main:not(:only-child) {
    min-width: 126px;
    min-height: 28px;
    font-size: var(--font-size-sm);
  }

  .page-contact-tabs-link-current {
    width: 450px;
    min-height: 58px;
    padding-inline: var(--space-24);
  }

  .page-contact-tabs-link-pc {
    display: inline;
  }

  .page-contact-tabs-link-sp {
    display: none;
  }

  .page-contact-form-section {
    padding-bottom: var(--space-40);
  }

  .page-contact-corp .sec-heading {
    margin-bottom: var(--space-40);
  }

  .page-contact-corp .sec-heading-jp {
    line-height: 1;
    font-feature-settings: normal;
    text-wrap: wrap;
  }

  .page-contact-corp .page-contact-form-lead {
    margin-top: var(--space-40);
    line-height: 2.15;
  }

  .page-contact-corp .page-contact-form {
    max-width: 800px;
    margin: 0 auto;
  }

  .page-contact-corp .page-contact-form-fields,
  .page-contact-corp .page-contact-form-subfields {
    row-gap: var(--space-16);
  }

  .page-contact-corp .page-contact-form-section-block {
    margin-top: 0;
  }

  .page-contact-corp .page-contact-form-section-title {
    margin-top: var(--space-40);
    margin-bottom: var(--space-24);
  }

  .page-contact-corp .page-contact-form-action {
    margin-top: var(--space-32);
  }

  .page-contact-corp .page-contact-form-dropzone {
    min-height: 275px;
    padding: var(--space-40) var(--space-24);
  }

  .page-contact-corp .page-contact-form-select-list {
    min-height: 162px;
  }

  .page-contact-corp .page-contact-form-select-list-quote {
    min-height: 146px;
  }

  .page-contact-corp .page-contact-form-select-list-delivery {
    min-height: 185px;
  }

  .page-contact-corp .page-contact-form-field-narrow {
    width: 100%;
    max-width: 320px;
  }

  .page-contact-corp .page-contact-form select.page-contact-form-select-list {
    width: 100%;
    max-width: 351px;
  }

  .page-contact-corp .page-contact-form-submit {
    width: 100%;
    max-width: 800px;
  }
}
/* =============================================================
 * 個人お問い合わせページ (visual pass)
 * 構成:
 *   1. ページ背景
 *   2. フォームセクション・コンテナ (page-contact-form-section)
 *   3. ラベル / セクション見出し (page-contact-personal-label / sec-heading)
 *   4. フォームレイアウト (page-contact-form 幅、SP 専用の fields / dropzone / select)
 *   5. MD (>= 768px) 上書き
 *
 * フォームの入力・ラベル・送信などのプリミティブは ui/form.css に集約。
 * font-size 可変化: SP 393 / PC 1440 を両端に clamp。
 * ============================================================= */
/* ----- 1. ページ背景 ----- */
.page-template-page-contact-personal,
.page-template-page-contact-personal main,
.page-contact-personal {
  background:
    linear-gradient(rgba(255, 253, 244, 0.74), rgba(255, 253, 244, 0.74)),
    url("library/images/material/faq-bg-texture.webp") repeat center top / 900px
      auto;
}
/* ----- 2. フォームセクション ----- */
.page-contact-personal .page-contact-form-section {
  padding: var(--space-56) 0 var(--space-56);
}
.page-contact-personal .page-contact-form-section .container {
  width: 100%;
  max-width: 1440px;
  padding-inline: clamp(2.5rem, -2.075rem + 18.62vw, 14.688rem);
}
/* ----- 3. ラベル / 見出し ----- */
.page-contact-personal-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 313px);
  min-height: 48px;
  margin: 0 auto var(--space-16);
  padding: var(--space-4) var(--space-24);
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(20px, 0.382vw + 18.5px, 24px);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  letter-spacing: clamp(1.6px, 0.0764vw + 1.3px, 2.4px);
  text-align: center;
}
.page-contact-personal .sec-heading {
  gap: var(--space-12);
  margin-bottom: var(--space-48);
}
.page-contact-personal .sec-heading-en {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
  font-size: clamp(16px, 0.764vw + 13px, 24px);
  line-height: 1.6;
  letter-spacing: clamp(1.6px, 0.0764vw + 1.3px, 2.4px);
}
.page-contact-personal .sec-heading-jp {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(20px, 1.146vw + 15.5px, 32px);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: clamp(1.2px, 0.191vw + 0.45px, 3.2px);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}
.page-contact-personal .page-contact-form-lead {
  margin-top: var(--space-12);
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: clamp(14px, 0.191vw + 13.25px, 16px);
  line-height: 1.7;
  letter-spacing: clamp(0.4px, 0.0153vw + 0.34px, 0.56px);
}
/* ----- 4. フォームレイアウト ----- */
.page-contact-personal .page-contact-form {
  max-width: 313px;
  margin: 0 auto;
}
/* SP のみ: form.css 共通値より詰める。MD 以上は form.css に委ねる */
@media (max-width: 767.98px) {
  .page-contact-personal .page-contact-form-fields,
  .page-contact-personal .page-contact-form-subfields {
    row-gap: var(--space-20);
  }

  .page-contact-personal .page-contact-form-section-block {
    margin-top: var(--space-16);
  }

  .page-contact-personal .page-contact-form-section-title {
    margin-top: var(--space-40);
    margin-bottom: var(--space-24);
  }

  .page-contact-personal .page-contact-form-dropzone {
    min-height: 240px;
    padding: var(--space-32) var(--space-16);
  }

  .page-contact-personal .page-contact-form-select-list {
    min-height: 150px;
  }

  .page-contact-personal .page-contact-form-select-list-quote {
    min-height: 130px;
  }

  .page-contact-personal .page-contact-form-select-list-delivery {
    min-height: 170px;
  }
}
/* ----- 5. MD (>= 768px) 上書き ----- */
@media (min-width: 768px) {
  .page-contact-personal .page-contact-form-section {
    padding: var(--space-104) 0 var(--space-40);
  }

  .page-contact-form-section-title {
    margin-top: var(--space-40);
  }

  .page-contact-personal-label {
    width: 450px;
    min-height: 58px;
    margin: 0 auto 14px;
    padding: 9px var(--space-80);
    line-height: 2;
  }

  .page-contact-personal .sec-heading {
    gap: 14px;
    margin-bottom: var(--space-64);
  }

  .page-contact-personal .sec-heading-en {
    line-height: 1.67;
  }

  .page-contact-personal .sec-heading-jp {
    line-height: 1.25;
    font-feature-settings: normal;
    text-wrap: wrap;
  }

  .page-contact-personal .page-contact-form-lead {
    margin-top: var(--space-40);
    margin-bottom: 0;
    line-height: 2;
  }

  .page-contact-personal .page-contact-form {
    max-width: 800px;
    margin: 0 auto;
  }

  /* 入力幅は Figma の 800/320/351 を上限にしつつ、
   * 中間サイズで container を超えないよう max-width に切り替えて流動化する。 */
  .page-contact-personal .page-contact-form input[type="text"],
  .page-contact-personal .page-contact-form input[type="email"],
  .page-contact-personal .page-contact-form input[type="tel"],
  .page-contact-personal .page-contact-form textarea {
    width: 100%;
    max-width: 800px;
  }

  .page-contact-personal .page-contact-form-field-narrow {
    width: 100%;
    max-width: 320px;
  }

  .page-contact-personal
    .page-contact-form
    select.page-contact-form-select-list {
    width: 100%;
    max-width: 351px;
  }

  .page-contact-personal .page-contact-form-submit {
    width: 100%;
    max-width: 800px;
  }
}
/* =============================================================
 * Contact Form Dropzone (state + file preview list)
 * ui/form.css の .page-contact-form-dropzone をベースに、
 * JS によるドラッグ中・エラー時の視覚状態と、選択ファイル一覧の
 * レイアウトを追加する。CF7 標準 [file* multiple] と組み合わせ。
 * ============================================================= */
.page-contact-form-dropzone.is-dragover {
  border-style: solid;
  outline: 2px dashed var(--cocopaver-primary);
  outline-offset: -8px;
}
.page-contact-form-dropzone.is-error {
  border-color: #c0392b;
}
.page-contact-form-dropzone-list {
  list-style: none;
  width: 100%;
  margin: var(--space-16) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.page-contact-form-dropzone-list:empty {
  display: none;
}
.page-contact-form-dropzone-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--cocopaver-accent);
  border-radius: var(--radius-xs);
  background: var(--white);
  font-size: var(--font-size-sm);
  text-align: left;
}
.page-contact-form-dropzone-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-contact-form-dropzone-item-size {
  flex: 0 0 auto;
  color: var(--cocopaver-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
}
.page-contact-form-dropzone-item-remove {
  flex: 0 0 auto;
  width: var(--space-24);
  height: var(--space-24);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
}
.page-contact-form-dropzone-error {
  width: 100%;
  margin: var(--space-12) 0 0;
  color: #c0392b;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-align: center;
}
.page-contact-form-dropzone-error:empty {
  display: none;
}
/* =============================================================
 * 条件分岐表示 (Conditional Fields)
 * library/js/contact-form-conditional.js が data-cf7-conditional 要素の表示を
 * トリガーフィールド値に応じて切り替える。JS 初期化前のフラッシュを防ぐため、
 * 初期状態を非表示にしておく (JS が一致を判定したら hidden 属性を外す)。
 * ============================================================= */
[data-cf7-conditional] {
  display: none;
}
[data-cf7-conditional]:not([hidden]) {
  display: block;
}
.is-cf7-conditional-hidden {
  display: none !important;
}
/* =============================================================
 * Contact Confirm Modal
 * 自前 JS (library/js/contact-form-confirm.js) で生成される
 * 「入力内容のご確認」モーダルのスタイル。
 *
 * Multi-Step Forms プラグインの cookie 4KB 制限を回避するため、
 * 確認画面はページ遷移せずモーダルで表示する。
 * ============================================================= */
/* ----- モーダル本体 ----- */
.cocopaver-cf7-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cocopaver-cf7-confirm-modal[aria-hidden="true"] {
  display: none;
}
.cocopaver-cf7-confirm-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 53, 36, 0.6);
}
.cocopaver-cf7-confirm-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - var(--space-32));
  max-height: calc(100dvh - var(--space-32));
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-md, 12px);
  background: var(--white);
  outline: none;
  overflow: hidden;
}
/* スクロールはボディに集約 */
.cocopaver-cf7-confirm-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-16) 0;
}
.cocopaver-cf7-confirm-modal-header {
  flex: 0 0 auto;
  margin-bottom: var(--space-16);
  text-align: center;
}
.cocopaver-cf7-confirm-modal .sec-heading-en {
  margin: 0 0 var(--space-8);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  line-height: 1.5;
  letter-spacing: 3.2px;
}
.cocopaver-cf7-confirm-modal-title {
  margin: 0 0 var(--space-12);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(20px, 1.146vw + 15.5px, 32px);
  line-height: 1.4;
}
.cocopaver-cf7-confirm-modal-lead {
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}
.cocopaver-cf7-confirm-modal-footer {
  flex: 0 0 auto;
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--cocopaver-accent);
}
/* 確認モーダル表示中は背面ページを固定し、モーダル内だけをスクロールさせる */
html.cocopaver-cf7-confirm-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.cocopaver-cf7-confirm-modal-open {
  position: fixed;
  top: var(--cocopaver-cf7-confirm-scroll-lock-top, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
/* ----- 確認内容 dl レイアウト ----- */
.page-contact-confirm-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
}
.page-contact-confirm-list dt {
  margin: 0;
  color: var(--cocopaver-primary-dark);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.page-contact-confirm-list dd {
  margin: 0 0 var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--cocopaver-accent);
  line-height: 1.7;
  word-break: break-word;
}
.page-contact-confirm-list dd:empty {
  display: none;
}
/* ----- アクションボタン (戻る / 送信) ----- */
.page-contact-confirm-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: stretch;
  margin-top: 0;
}
.page-contact-form-submit-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: var(--space-12);
  /* ピル形状: ボタン高 50px の半分相当の角丸 */
  border: 1px solid var(--cocopaver-primary-dark);
  border-radius: 35px;
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  letter-spacing: 1.6px;
  cursor: pointer;
}
/* ----- MD (>= 768px) 上書き ----- */
@media (min-width: 768px) {
  .cocopaver-cf7-confirm-modal-panel {
    padding: var(--space-48) var(--space-56);
  }

  .page-contact-confirm-list {
    grid-template-columns: 240px 1fr;
    gap: var(--space-12) var(--space-24);
    align-items: baseline;
  }

  .page-contact-confirm-list dt {
    grid-column: 1;
  }

  .page-contact-confirm-list dd {
    grid-column: 2;
    margin-bottom: 0;
  }

  .page-contact-confirm-action {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-32);
  }

  .page-contact-confirm-action .page-contact-form-submit,
  .page-contact-confirm-action .page-contact-form-submit-back {
    width: auto;
    min-width: 240px;
    max-width: 320px;
  }
}
/* =============================================================
 * 施工・販売パートナー募集ページ (visual pass)
 * 構成:
 *   1. ページ背景 / breadcrumb
 *   2. ページヒーロー
 *   3. イントロセクション (intro / intro-card / lead)
 *   4. メリットセクション (merit / merit-list / merit-item)
 *   5. コンタクトセクション見出し (contact / sec-heading)
 *   6. ショップ一覧 (shops / shops-panel / shops-list / shops-item)
 *   7. 非表示 (cta-partner)
 *   8. PC (>= 992px) 上書き
 *
 * フォーム見た目: ui/form.css + page/agency/base.css（visual-pass では上書きしない）
 *
 * font-size 可変化: SP 393 / PC 1440 を両端に clamp。
 * ============================================================= */
.page-agency-contact .container {
  padding-inline: clamp(2.5rem, -2.075rem + 18.62vw, 14.688rem);
}
/* ----- 1. ページ背景 / breadcrumb ----- */
.page-template-page-agency,
.page-template-page-agency main,
.page-agency {
  background:
    linear-gradient(rgba(248, 247, 242, 0.82), rgba(248, 247, 242, 0.82)),
    url("library/images/material/faq-bg-texture.webp") repeat center top / 900px auto;
}
.page-agency-breadcrumb {
  display: none;
}
/* ----- 2. ページヒーロー ----- */
.page-agency .page-hero {
  background-image: url("library/images/material/page-hero-agency-sp.jpg");
}
.page-agency .page-hero::after {
  background: linear-gradient(rgba(114, 75, 32, 0.22), rgba(114, 75, 32, 0.22));
}
/* ----- 3. イントロセクション ----- */
.page-agency-intro {
  padding: var(--space-64) 0;
  background: transparent;
}
.page-agency-intro-card {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: 0 var(--space-16) var(--space-32);
  border-radius: var(--radius-xs);
  background: var(--white);
  box-sizing: border-box;
}
.page-agency-script {
  position: absolute;
  top: -16px;
  left: -14px;
  display: block;
  width: clamp(120px, 39vw, 260px);
  height: auto;
  margin: 0;
  opacity: 0.7;
  transform: rotate(-2deg);
  transform-origin: left center;
  pointer-events: none;
}
.page-agency-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  color: var(--cocopaver-primary-dark);
  padding-block: var(--space-32, --space-48);
  font-family: var(--font-mincho);
  text-align: center;
}
.page-agency-intro .page-agency-merit {
  padding-block: var(--space-32);
}
@media (min-width: 992px) {
  .page-agency-intro .page-agency-merit{
    padding-block: var(--space-40) var(--space-56);
  }
}
.page-agency-lead-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  font-size: clamp(20px, 1.146vw + 15.5px, 32px);
  font-weight: var(--weight-medium);
  line-height: clamp(33px, 1.624vw + 26.62px, 50px);
  letter-spacing: clamp(2px, 0.115vw + 1.55px, 3.2px);
}
.page-agency-lead-note {
  margin: 0;
  font-size: clamp(14px, 0.191vw + 13.25px, 16px);
  line-height: 26px;
  letter-spacing: clamp(1.4px, 0.0191vw + 1.325px, 1.6px);
}
/* ----- 4. メリットセクション ----- */
.page-agency-merit {
  width: 100%;
  padding: var(--space-20) var(--space-20);
  background: var(--cocopaver-bg-light);
  font-family: var(--font-mincho);
}
.page-agency-merit-main {
  margin: 0 0 var(--space-16);
  color: var(--cocopaver-primary-dark);
  font-size: clamp(20px, 1.146vw + 15.5px, 32px);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  letter-spacing: clamp(2px, 0.115vw + 1.55px, 3.2px);
  text-align: center;
}
.page-agency-merit-panel {
  width: 100%;
  padding: var(--space-24) var(--space-16) var(--space-32);
  background: var(--white);
}
.page-agency-merit .sec-heading {
  gap: var(--space-12);
  margin-bottom: var(--space-24);
  color: var(--cocopaver-primary-dark);
}
.page-agency-merit .sec-heading-en {
  color: var(--cocopaver-primary-dark);
  font-size: clamp(24px, 0.764vw + 21px, 32px);
  line-height: 1;
  letter-spacing: clamp(2.4px, 0.0764vw + 2.1px, 3.2px);
}
.page-agency-merit .sec-heading-jp {
  color: var(--cocopaver-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 1.4px;
}
.page-agency-merit-list {
  --bs-gutter-x: 0;
  row-gap: var(--space-20);
  margin: 0;
  padding: 0;
}
.page-agency-merit-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  height: auto;
  padding: 0 0 0 28px;
  border-radius: 0;
  background: transparent;
}
.page-agency-merit-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--cocopaver-accent);
}
.page-agency-merit-item::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 4px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
}
.page-agency-merit-item-title {
  margin: 0;
  color: var(--cocopaver-primary-dark);
  font-size: clamp(16px, 0.382vw + 14.5px, 20px);
  font-weight: var(--weight-bold);
  line-height: 30px;
  letter-spacing: clamp(1.6px, 0.0382vw + 1.45px, 2px);
}
.page-agency-merit-item-text {
  margin: 0;
  color: var(--cocopaver-primary-dark);
  font-size: var(--font-size-sm);
  line-height: 22px;
  letter-spacing: 1.4px;
}
/* ----- 5. コンタクトセクション ----- */
.page-agency-contact {
  padding: 0 0 var(--space-40);
  background: transparent;
}
.page-agency-contact .sec-heading {
  gap: var(--space-16);
  margin-bottom: var(--space-64);
  color: var(--cocopaver-primary-dark);
}
@media (min-width: 992px) {
  .page-agency-contact .sec-heading{
    gap: var(--space-8);
  }
}
.page-agency-contact .sec-heading-en {
  color: var(--cocopaver-primary-dark);
  font-size: clamp(16px, 0.764vw + 13px, 24px);
  line-height: 1;
  letter-spacing: clamp(1.6px, 0.0764vw + 1.3px, 2.4px);
}
.page-agency-contact .sec-heading-jp {
  display: flex;
  flex-direction: column;
  color: var(--cocopaver-primary-dark);
  font-size: clamp(20px, 1.146vw + 15.5px, 32px);
  font-weight: var(--weight-semibold);
  line-height: clamp(26px, 2.005vw + 18.12px, 47px);
  letter-spacing: clamp(0.2rem, 0.155rem + 0.18vw, 0.32rem);
}
.page-agency-contact-lead {
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: clamp(14px, 0.191vw + 13.25px, 16px);
  line-height: clamp(26px, 0.955vw + 22.25px, 36px);
  letter-spacing: clamp(0.56px, 0.00764vw + 0.53px, 0.64px);
  margin-top: var(--space-16);
}
@media (min-width: 992px) {
  .page-agency-contact-lead {
    margin-top: var(--space-48);
  }
}
@media (min-width: 768px) {
  .page-agency-contact .page-agency-form {
    max-width: 800px;
    margin: 0 auto;
  }
}
.page-agency-form-action {
  margin-top: var(--space-12);
}
/* ----- 6. ショップ一覧 ----- */
.page-agency-shops {
  padding: var(--space-40) 0 var(--space-64);
  margin-bottom: var(--space-64);
  border-radius: var(--radius-xs);
  background: var(--cocopaver-bg-light);
}
@media (min-width: 992px) {
  .page-agency-shops {
    margin-bottom: 0;
  }
}
.page-agency-shops .sec-heading {
  margin-bottom: var(--space-4);
}
.page-agency-shops .sec-heading-jp {
  color: var(--cocopaver-primary-dark);
  font-size: clamp(20px, 1.146vw + 15.5px, 32px);
  font-weight: var(--weight-medium);
  line-height: 50px;
  letter-spacing: clamp(2px, 0.115vw + 1.55px, 3.2px);
}
.page-agency-shops-panel {
  width: 100%;
  padding: var(--space-32) var(--space-8);
  background: var(--white);
}
.page-agency-shops-columns {
  --bs-gutter-x: 0;
  row-gap: var(--space-40);
  margin-inline: 0;
}
.page-agency-shops-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-inline: 0;
}
.page-agency-shops-region + .page-agency-shops-region {
  margin-top: 0;
}
.page-agency-shops-region-title {
  margin: 0 0 var(--space-24);
  color: var(--cocopaver-primary-dark);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-bold);
  line-height: 30px;
  letter-spacing: 2px;
}
.page-agency-shops-list {
  gap: var(--space-20);
  margin: 0;
  padding: 0;
}
.page-agency-shops-item {
  position: relative;
  gap: var(--space-2);
  padding: 0 0 0 var(--space-16);
}
.page-agency-shops-item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: 900;
  line-height: 26px;
  letter-spacing: 1.6px;
}
.page-agency-shops-name {
  display: block;
  margin: 0;
  color: var(--cocopaver-primary-dark);
  font-size: var(--font-size-base);
  font-weight: 900;
  line-height: 26px;
  letter-spacing: 1.6px;
}
.page-agency-shops-name a {
  color: var(--cocopaver-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-agency-shops-addr,
.page-agency-shops-tel,
.page-agency-shops-mail,
.page-agency-shops-sns {
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  line-height: 21px;
  letter-spacing: 1.4px;
}
.page-agency-shops-sns-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -2px;
  object-fit: contain;
}
/* .page-agency-shops a {
  text-decoration: underline;
  text-underline-offset: 2px;
} */
/* ----- 7. 非表示 ----- */
.page-agency .cta-partner {
  display: none;
}
/* ----- 8. PC (>= 992px) 上書き ----- */
@media (min-width: 992px) {
  .page-agency .page-hero {
    background-image: url("library/images/material/page-hero-agency.jpg");
  }

  .page-agency-intro {
    padding: var(--space-80) 0 var(--space-40);
  }

  .page-agency-intro-card {
    padding: var(--space-64) var(--space-80) var(--space-64);
  }

  .page-agency-lead {
    gap: 30px;
    padding-block: 0;
    margin-bottom: var(--space-48);
  }

  .page-agency-merit {
    width: 100%;
    max-width: min(100%, calc((var(--space-120) * 7) - var(--space-15)));
    margin-inline: auto;
    padding: var(--space-48) var(--space-80) var(--space-56);
  }

  .page-agency-merit-main {
    margin-bottom: var(--space-24);
    line-height: 1.5;
  }

  .page-agency-merit-panel {
    width: 100%;
    padding: var(--space-32) var(--space-104) var(--space-48);
  }

  .page-agency-merit .sec-heading {
    gap: var(--space-8);
    margin-bottom: var(--space-32);
  }

  .page-agency-merit-list {
    width: 100%;
    margin-inline: auto;
  }

  .page-agency-merit-item {
    gap: var(--space-8);
    padding-left: 28px;
  }

  .page-agency-contact {
    padding: 0 0 var(--space-56);
  }

  .page-agency-shops {
    padding: var(--space-24) 0 var(--space-48);
  }

  .page-agency-shops .sec-heading {
    margin-bottom: var(--space-32);
  }

  .page-agency-shops-panel {
    max-width: min(100%, calc((var(--space-120) * 8) + var(--space-80)));
    margin-inline: auto;
    padding: var(--space-56) var(--space-40);
  }

  .page-agency-shops-columns {
    --bs-gutter-x: var(--space-48);
  }

  .page-agency-shops-column {
    gap: var(--space-80);
  }

  .page-agency-shops-list {
    gap: var(--space-20);
  }
}
/* =============================================================
 * Works Page (施工事例ページ)
 * 設計メモ:
 *   - 基準幅 SP 393 / PC 1440。可変は clamp(SP, vw計算, PC)。
 *   - メディアクエリは Bootstrap 5 (576/768/992/1200/1440)。
 *   - SP 固定 max-width 禁止。 .container は親 padding + Bootstrap で制御。
 *   - 余白は --space-* を優先。装飾位置・アイコン寸法は単発値可。
 * ============================================================= */
/* =============================================================
 * Page background (cream tint + texture)
 * ============================================================= */
.page-template-page-works,
.page-template-page-works main,
.page-works {
  background:
    linear-gradient(rgba(248, 247, 242, 0.83), rgba(248, 247, 242, 0.83)),
    url("library/images/material/faq-bg-texture.webp") repeat center / 900px auto;
}
/* =============================================================
 * Breadcrumb (現状非表示)
 * ============================================================= */
.page-works-breadcrumb {
  display: none;
}
/* =============================================================
 * Lead (DIYから外構工事まで対応)
 * ============================================================= */
.page-works-lead {
  padding: var(--space-40) 0 var(--space-32);
  background: transparent;
}
.page-works-lead .container,
.page-works-list .container {
  max-width: none;
  padding-inline: var(--space-24);
}
.page-works-lead .sec-heading {
  margin-bottom: var(--space-32);
}
.page-works-lead .sec-heading-jp {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-lg), 1.15vw + 15.5px, var(--font-size-3xl));
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.2em;
}
.page-works-lead-text {
  margin: 0;
  text-align: center;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-sm), 0.19vw + 13.25px, var(--font-size-base));
  font-weight: var(--weight-medium);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media (min-width: 992px) {
  .page-works-lead .sec-heading {
    margin-bottom: var(--space-32);
  }
  .page-works-lead-text {
    line-height: 2.25;
  }
}
/* =============================================================
 * Works list section
 * ============================================================= */
.page-works-list {
  padding: 0 0 var(--space-64);
  background: transparent;
}
/* =============================================================
 * Category nav (SP: select / MD+: pill buttons)
 * ============================================================= */
.page-works-cats {
  margin-bottom: var(--space-32);
  text-align: center;
}
.page-works-cats-label {
  margin: 0 0 var(--space-16);
  font-family: var(--font-display);
  font-size: clamp(var(--font-size-base), 0.76vw + 13px, var(--font-size-2xl));
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cocopaver-primary-dark);
}
.page-works-cats-list {
  display: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
}
.page-works-cats-link {
  display: inline-block;
  min-width: 68px;
  padding: calc(var(--space-8) - 1px) calc(var(--space-16) - 1px);
  /* border: 1px solid var(--cocopaver-primary-dark); */
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  /* font-weight: var(--weight-semibold); */
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.page-works-cats-link:hover,
.page-works-cats-link:focus-visible {
  background: var(--cocopaver-primary-dark);
  color: var(--white);
}
.page-works-cats-link.is-current {
  background: var(--cocopaver-primary-dark);
  color: var(--white);
}
.page-works-cats-select-wrap {
  position: relative;
  display: inline-block;
  width: min(100%, 273px);
}
.page-works-cats-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-16);
  width: 12px;
  height: 8px;
  pointer-events: none;
  background: var(--cocopaver-accent);
  transform: translateY(-50%);
  mask: url("library/images/material/select-arrow-2.svg") no-repeat center / contain;
  -webkit-mask: url("library/images/material/select-arrow-2.svg") no-repeat center / contain;
}
.page-works-cats-select {
  width: 100%;
  height: 50px;
  padding: 0 var(--space-40) 0 var(--space-16);
  border: 0;
  border-radius: 0;
  appearance: none;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: 0.96px;
}
@media (min-width: 768px) {
  .page-works-cats-link {
    background: var(--cocopaver-primary-dark);
    font-size: var(--font-size-base);
    line-height: .85;
    padding: var(--space-8) var(--space-16);
  }
}
/* =============================================================
 * Empty state (該当する施工事例なし)
 * ============================================================= */
.page-works-empty {
  margin: var(--space-32) auto;
  padding: var(--space-32) 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  text-align: center;
}
/* =============================================================
 * Card grid (SP: 1col / LG: 3col)
 * ============================================================= */
.page-works-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: var(--space-56);
  width: calc(100% - var(--space-32));
  margin: 0 auto;
  padding: 0;
}
.page-works-cards > li:nth-child(6) {
  display: none;
}
/* =============================================================
 * Card (1件)
 * ============================================================= */
.page-works-card {
  height: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.page-works-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.page-works-card figure {
  margin: 0 0 var(--space-20);
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 156 / 100;
  background: var(--cocopaver-bg-light);
}
.page-works-card figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-works-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--cocopaver-bg-light);
}
.page-works-card-placeholder img {
  width: clamp(116px, 1.43vw + 110.4px, 132px);
  height: auto;
}
.page-works-card-num {
  margin: 0 0 var(--space-4);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  letter-spacing: 0.12em;
}
.page-works-card-tag {
  margin: var(--space-8) 0 0;
}
.page-works-card-tag span {
  display: inline-block;
  min-width: 56px;
  padding: 5px 14px 6px;
  border: 0;
  border-radius: 0;
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}
.page-works-card-title {
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-lg), 0.19vw + 17.25px, var(--font-size-xl));
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 0.1em;
}
/* =============================================================
 * Pager (ページ番号) — 便り .page-blog-list .pagination と同系
 * ============================================================= */
.page-works-list .page-works-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-64);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
}
.page-works-list .page-works-pager ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-left: 0;
  line-height: 1;
}
.page-works-list .page-works-pager li {
  /* min-width: 1.6875rem; */
  margin-bottom: 0;
}
.page-works-list .page-works-pager li::marker {
  content: none;
}
.page-works-list .page-works-pager a,
.page-works-list .page-works-pager span.page-numbers {
  border: none;
  padding: 0;
  /* color: var(--cocopaver-primary-dark); */
  font-size: var(--font-size-xl);
  line-height: 1.5;
  letter-spacing: 1.6px;
  text-decoration: none;
}
.page-works-list .page-works-pager .current {
  background-color: transparent;
  color: var(--cocopaver-accent);
  cursor: default;
}
.page-works-list .pagination-arrow.prev::before,
.page-works-list .pagination-arrow.next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
}
.page-works-list .pagination-arrow.prev::before {
  transform: translate(-50%, -50%) scaleX(-1);
}
.page-works-list .pagination-arrow.next::before {
  transform: translate(-50%, -50%);
}
/* =============================================================
 * md (>=768px): カテゴリは pill buttons へ
 * ============================================================= */
@media (min-width: 768px) {
  .page-works-cats-list {
    display: flex;
  }
}
/* =============================================================
 * lg (>=992px): PC ヒーロー / lead 余白 / 3col grid
 * ============================================================= */
@media (min-width: 992px) {
  .page-works-lead {
    padding: var(--space-120) 0 var(--space-40);
  }

  .page-works-lead .container,
  .page-works-list .container {
    max-width: 1200px;
    padding-inline: 0;
  }

  .page-works-lead .sec-heading {
    margin-bottom: var(--space-48);
  }

  .page-works-cats {
    margin-bottom: var(--space-56);
  }

  .page-works-cats-label {
    display: inline-block;
    margin: 0 var(--space-24) 0 0;
    vertical-align: middle;
  }

  .page-works-cats-list {
    display: inline-flex;
    gap: var(--space-24);
    vertical-align: middle;
  }

  .page-works-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-80) var(--space-60);
    width: 100%;
    margin: 0;
    justify-content: space-between;
  }

  .page-works-cards > li:nth-child(6) {
    display: block;
  }

  .page-works-card figure {
    margin-bottom: var(--space-24);
    aspect-ratio: 179 / 121;
  }

  .page-works-card-num {
    margin-bottom: var(--space-12);
    font-size: var(--font-size-base);
  }

  .page-works-card-tag {
    margin-top: var(--space-20);
  }

  .page-works-card-tag span {
    font-size: var(--font-size-sm);
    padding: var(--space-8) var(--space-16);
    line-height: .85;
  }

  .page-works-list .page-works-pager {
    margin-top: var(--space-120);
  }

  .page-works-list {
    padding: 0 var(--space-80) var(--space-120);
  }
}
/* =============================================================
 * ココペーバー便り (Blog) ページ
 * 構成:
 *   1. ページ背景
 *   2. ページヒーロー (page-hero)
 *   3. 記事リストのコンテナ (page-blog-list)
 *   4. セクション見出し (sec-heading)
 *   5. カテゴリフィルタ (page-blog-cats)
 *   6. 記事カード (page-blog-cards: grid+gap は施工事例 .page-works-cards に合わせる)
 *   7. Empty state (Not Found...)
 *   8. ニュースリンクボタン (page-blog-news-link)
 *   9. ページネーション (pagination)
 *
 * font-size 可変化: SP 393 / PC 1440 を両端に clamp。
 * ============================================================= */
/* ----- 1. ページ背景 ----- */
.page-template-page-blog,
.page-template-page-blog main,
.page-blog {
  background:
    linear-gradient(rgba(248, 247, 242, 0.83), rgba(248, 247, 242, 0.83)),
    url("library/images/material/faq-bg-texture.webp") repeat center / 900px auto;
}
/* ----- 2. ページヒーロー ----- */
.page-blog .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(88, 54, 22, 0.12);
}
.page-blog .page-blog-breadcrumb {
  display: none;
}
/* ----- 3. 記事リストコンテナ ----- */
.page-blog-list {
  padding: 32px 0 var(--space-64);
  background: transparent;
}
.search .page-blog-list {
  padding: var(--space-48) 0 var(--space-64);
}
.page-blog-list .container {
  width: 100%;
  max-width: none;
  padding-inline: var(--space-24);
  box-sizing: border-box;
}
/* ----- 4. セクション見出し ----- */
.page-blog-list .sec-heading {
  margin-bottom: 26px;
}
.page-blog-list .sec-heading-jp {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(18px, 1.91vw + 10.5px, 32px);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  letter-spacing: clamp(2px, 0.191vw + 1.25px, 4px);
}
/* ----- 5. カテゴリフィルタ ----- */
.page-blog-cats {
  margin-bottom: var(--space-32);
  text-align: center;
}
.page-blog-cats-label {
  margin: 0 0 var(--space-12);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
  font-size: clamp(16px, 0.764vw + 13px, 24px);
  line-height: 1.5;
  letter-spacing: clamp(1.6px, 0.0764vw + 1.3px, 2.4px);
}
.page-blog-cats-list {
  display: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
}
.page-blog-cats-link {
  display: inline-block;
  min-width: 67px;
  padding: 4px var(--space-16) 5px;
  /* border: 1px solid var(--cocopaver-primary-dark); */
  border-radius: 0;
  background: transparent;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  letter-spacing: 1.4px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.page-blog-cats-link:hover,
.page-blog-cats-link:focus-visible {
  background: var(--cocopaver-accent);
}
.page-blog-cats-link.is-current {
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
}
.page-blog-cats-select-wrap {
  position: relative;
  display: inline-block;
  width: min(100%, 273px);
}
.page-blog-cats-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-16);
  width: 12px;
  height: 8px;
  pointer-events: none;
  background: var(--cocopaver-primary-dark);
  transform: translateY(-50%);
  mask: url("library/images/material/select-arrow-2.svg") no-repeat center / contain;
  -webkit-mask: url("library/images/material/select-arrow-2.svg") no-repeat center / contain;
}
.page-blog-cats-select {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-40) 0 var(--space-16);
  border: 0;
  border-radius: 0;
  appearance: none;
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: 0.96px;
}
@media (min-width: 768px) {
  .page-blog-card-date time {
    font-size: var(--font-size-base);
  }
  .page-blog-cats-link {
    background: var(--cocopaver-accent);
    font-size: var(--font-size-base);
    line-height: .85;
    padding: var(--space-8) var(--space-16);
  }
}
/* ----- 6. 記事カード (grid / gap は page/works の .page-works-cards と同トークン) ----- */
.page-blog-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: var(--space-56);
  width: calc(100% - var(--space-32));
  margin: 0 auto;
  padding: 0;
}
.page-blog-cards > li {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}
.page-blog-cards > li.col-12 {
  grid-column: 1 / -1;
}
.page-blog-card-col {
  width: 100%;
}
.page-blog-card {
  height: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.page-blog-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.page-blog-card figure {
  margin: 0 0 var(--space-20);
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 314 / 201;
  background: var(--cocopaver-bg-light);
}
.page-blog-card figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-blog-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--cocopaver-bg-light);
}
.page-blog-card-placeholder img {
  width: 115px;
  height: auto;
}
.page-blog-card-date {
  order: 2;
  margin: 0 0 var(--space-8);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  letter-spacing: 1.4px;
}
.page-blog-card-cat {
  order: 4;
  margin: var(--space-16) 0 0;
}
.page-blog-card-cat span {
  display: inline-block;
  min-width: 72px;
  padding: 5px 14px 6px;
  border: 0;
  border-radius: 0;
  background: var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 1;
  letter-spacing: 1.2px;
  text-align: center;
}
.page-blog-card-title {
  order: 3;
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-lg), 0.19vw + 17.25px, var(--font-size-xl));
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 1.6px;
}
/* ----- 7. Empty state (Not Found...) ----- */
.page-blog-empty,
#post-not-found {
  padding: var(--space-32) 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  text-align: center;
}
.page-blog-empty h2,
.page-blog-empty h3,
#post-not-found h2,
#post-not-found h3 {
  margin: 0 0 var(--space-8);
  color: inherit;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.page-blog-empty p,
#post-not-found p {
  margin: 0;
  color: inherit;
  font-size: var(--font-size-base);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
#post-not-found .search {
  margin-top: var(--space-40);
}
#post-not-found section {
  margin-top: var(--space-32);
  text-align: left;
}
#post-not-found section h3 {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
}
/* ----- 8. ニュースリンクボタン ----- */
.page-blog-news-link {
  margin: var(--space-64) 0 0;
  text-align: center;
}
.page-blog-news-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 345px;
  height: 57px;
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--cocopaver-primary-dark);
  border-radius: 0;
  background-color: var(--white);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-lg);
  line-height: 1.5;
  letter-spacing: 1.6px;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.page-blog-news-link-btn::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
  transition: filter 0.2s;
}
.page-blog-news-link-btn:hover,
.page-blog-news-link-btn:focus-visible {
  opacity: 1;
  border-color: var(--cocopaver-primary-dark);
  background-color: var(--cocopaver-primary-dark);
  color: var(--white);
}
.page-blog-news-link-btn:hover::after,
.page-blog-news-link-btn:focus-visible::after {
  filter: brightness(0) invert(1);
}
/* ----- 9. ページネーション ----- */
.page-blog-list .pagination,
.page-blog-list .page-blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-64);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
}
.page-blog-list .pagination ul,
.page-blog-list .page-blog-pager ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-left: 0;
  line-height: 1;
}
.page-blog-list .pagination li,
.page-blog-list .page-blog-pager li {
  /* min-width: 1.6875rem; */
  margin-bottom: 0;
}
.page-blog-list .pagination li::marker,
.page-blog-list .page-blog-pager li::marker {
  content: none;
}
.page-blog-list .pagination a,
.page-blog-list .pagination span,
.page-blog-list .page-blog-pager a,
.page-blog-list .page-blog-pager span {
  border: none;
  padding: 0;
  color: var(--cocopaver-primary-dark);
  font-size: var(--font-size-xl);
  line-height: 1.5;
  letter-spacing: 1.6px;
  text-decoration: none;
}
.page-blog-list .pagination .current,
.page-blog-list .page-blog-pager .current {
  background-color: transparent;
  color: var(--cocopaver-accent);
  cursor: default;
}
.page-blog-list .pagination-arrow.prev::before,
.page-blog-list .pagination-arrow.next::before,
.page-blog-list .page-blog-pager .pagination-arrow.prev::before,
.page-blog-list .page-blog-pager .pagination-arrow.next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
}
.page-blog-list .pagination-arrow.prev::before,
.page-blog-list .page-blog-pager .pagination-arrow.prev::before {
  transform: translate(-50%, -50%) scaleX(-1);
}
.page-blog-list .pagination-arrow.next::before,
.page-blog-list .page-blog-pager .pagination-arrow.next::before {
  transform: translate(-50%, -50%);
}
/* ----- MD (>= 768px): カテゴリリスト二段化 ----- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-blog-cats-list {
    display: flex;
  }
}
/* ----- LG (>= 992px): PC レイアウト ----- */
@media (min-width: 992px) {
  /* PC 余白: works (>=992px) の lead / list に合わせる */
  .page-blog-list, .search .page-blog-list {
    padding: var(--space-120) var(--space-80) var(--space-96);
  }

  .page-blog-list .container {
    max-width: 1200px;
    padding-inline: 0;
  }

  .page-blog-list .sec-heading {
    margin-bottom: var(--space-48);
  }

  .page-blog-cats {
    margin-bottom: var(--space-56);
  }

  .page-blog-cats-label {
    display: inline-block;
    margin: 0 var(--space-24) 0 0;
    vertical-align: middle;
  }

  .page-blog-cats-list {
    display: inline-flex;
    gap: var(--space-24);
    vertical-align: middle;
  }

  .page-blog-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-80) var(--space-60);
    width: 100%;
    margin: 0;
    justify-content: space-between;
  }

  .page-blog-card figure {
    margin-bottom: var(--space-32);
    aspect-ratio: 358 / 242;
  }

  .page-blog-card-placeholder img {
    width: 130px;
  }

  .page-blog-card-date time {
    margin-bottom: var(--space-12);
  }

  .page-blog-card-cat {
    margin-top: var(--space-20);
  }

  .page-blog-card-cat span {
    font-size: var(--font-size-sm);
    padding: var(--space-8) var(--space-16);
    line-height: .85;
  }

  .page-blog-news-link {
    margin-top: var(--space-64);
  }

  .page-blog-news-link-btn {
    max-width: 356px;
  }

  .page-blog-list .pagination,
  .page-blog-list .page-blog-pager {
    margin-top: var(--space-160);
  }
}
/* =============================================================
 * お知らせ一覧 (/news/)
 * デザイン: 下層・お知らせ PC / SP（テキストリスト + 罫線 + ページャー）
 * 便り一覧 (.page-blog) とは別レイアウトのため main は .page-news のみとする。
 * ============================================================= */
/* ----- ページ背景 (Figma: rgba(213,208,176,0.8) + テクスチャ) ----- */
main.page-news {
  background:
    linear-gradient(rgba(248, 247, 242, 0.83), rgba(248, 247, 242, 0.83)), url("library/images/material/faq-bg-texture.webp") repeat center / 900px auto;
}
/* 投稿ページ用ヒーロー調整コメントは page-hero.css を参照 */
.page-news-breadcrumb {
  display: none;
}
/* ----- リストセクション ----- */
.page-news-list {
  padding: var(--space-40) 0 var(--space-64);
}
.page-news-list .container {
  width: 100%;
  max-width: none;
  padding-inline: var(--space-24);
  box-sizing: border-box;
}
.page-news-list-head {
  margin: 0 0 var(--space-32);
  text-align: center;
}
.page-news-list-title {
  margin: 0 0 var(--space-8);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-lg), 0.382vw + 14.5px, var(--font-size-xl));
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: clamp(2px, 0.191vw + 1.25px, 2.88px);
  text-transform: uppercase;
}
/* ----- 行リスト ----- */
.page-news-rows {
  margin: 0;
  padding: 0;
}
.page-news-row {
  margin: 0;
  padding: 0;
}
.page-news-row-empty {
  border-bottom: 0;
}
.page-news-row-article {
  margin: 0;
}
.page-news-row-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-20) 0 var(--space-12);
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
  border-bottom: 1px solid var(--cocopaver-accent);
}
.page-news-row-link:hover,
.page-news-row-link:focus-visible {
  opacity: 0.85;
}
.page-news-row-link:focus-visible {
  outline: 2px solid var(--cocopaver-primary);
  outline-offset: 2px;
}
.page-news-row-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
  min-width: 0;
}
.page-news-row-date {
  flex-shrink: 0;
  margin: 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0.05em;
}
.page-news-row-title {
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.page-news-row-icon {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / 24px 24px;
}
/* ----- 空状態 ----- */
.page-news-empty {
  margin: 0;
  padding: var(--space-32) 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  text-align: center;
}
.page-news-empty p {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
/* ----- ページャー矢印 (.page-news-pager は more-link.css で色・フォント共通) ----- */
.page-news-list .pagination-arrow.prev::before,
.page-news-list .pagination-arrow.next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
}
.page-news-list .pagination-arrow.prev::before {
  transform: translate(-50%, -50%) scaleX(-1);
}
.page-news-list .pagination-arrow.next::before {
  transform: translate(-50%, -50%);
}
.page-news-list .page-news-pager li .page-numbers.dots {
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
}
@media (min-width: 768px) {
  .page-news-row-link {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-32);
    padding: var(--space-24);
  }

  .page-news-row-main {
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    gap: var(--space-32);
    width: auto;
  }

  .page-news-row-date {
    flex: 0 0 clamp(140px, 11.4vw + 76px, 164px);
    width: clamp(140px, 11.4vw + 76px, 164px);
  }

  .page-news-row-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .page-news-row-icon {
    display: block;
  }
}
@media (min-width: 992px) {
  .page-news-list {
    padding: var(--space-80) 0 var(--space-120);
  }

  .page-news-list .container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 0;
  }
  .page-news-row {
    padding: 0 var(--space-80);
  }
  .page-news-row-link {
    padding: 30px 0;
  }
  .page-news-list-head {
    margin-bottom: 0;
  }
  .page-news-list-title {
    display: none;
  }

  .page-news-list .page-news-pager {
    margin-top: var(--space-120);
  }
}
@media (min-width: 1200px) {
  .page-news-row {
    padding: 0 var(--space-40);
  }
}
/* =============================================================
 * Single Entry Page (cpt_blog / cpt_news / cpt_works の詳細)
 * 設計メモ:
 *   - Figma 未確定。テーマトーン (ベージュ背景 + 深緑見出し + Mincho) で構成。
 *   - サイドバー無しの 1 カラム、本文は max-width 720px で読みやすく。
 *   - 一覧ページのテイスト (page-blog / page-works) と整合させる。
 *   - 一覧へ戻るボタン (.single-entry-back-link) は便り一覧の page-blog-news-link-btn と同型 (cpt_blog / cpt_news / cpt_works)。
 * ============================================================= */
.single-entry {
  background: var(--cocopaver-bg-light);
}
.single-entry-breadcrumb {
  padding: var(--space-16) var(--space-24);
}
.single-entry-body {
  padding: var(--space-40) 0 var(--space-80);
}
.single-entry-body .container {
  max-width: none;
  padding-inline: var(--space-24);
}
.single-entry-article {
  max-width: 720px;
  margin: 0 auto;
}
.single-entry-header {
  margin-bottom: var(--space-32);
}
.single-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin: 0 0 var(--space-16);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
}
.single-entry-date {
  color: var(--cocopaver-primary-dark);
  letter-spacing: 0.05em;
}
.single-entry-cat {
  display: inline-block;
  padding: 2px var(--space-12);
  background: var(--cocopaver-primary-dark);
  color: var(--white);
  letter-spacing: 0.1em;
}
.single-entry-title {
  margin: 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-xl), 2vw + 14px, var(--font-size-3xl));
  font-weight: var(--weight-bold);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.single-entry-eyecatch {
  margin: 0 0 var(--space-40);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--white);
}
.single-entry-eyecatch > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.single-entry-content {
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.single-entry-content > *:first-child {
  margin-top: 0;
}
.single-entry-content h2 {
  margin: var(--space-40) 0 var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--cocopaver-primary-dark);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-lg), 1vw + 14px, var(--font-size-xl));
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}
.single-entry-content h3 {
  margin: var(--space-32) 0 var(--space-12);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-base), 0.5vw + 14px, var(--font-size-lg));
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}
.single-entry-content p {
  margin: 0 0 var(--space-24);
}
.single-entry-content img {
  max-width: 100%;
  height: auto;
  margin: var(--space-24) 0;
}
.single-entry-content ul,
.single-entry-content ol {
  margin: 0 0 var(--space-24);
  padding-left: var(--space-24);
}
.single-entry-content li {
  margin-bottom: var(--space-8);
}
.single-entry-content a {
  color: var(--cocopaver-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-entry-content a:hover {
  text-decoration-thickness: 2px;
}
.single-entry-content blockquote {
  margin: var(--space-24) 0;
  padding: var(--space-16) var(--space-24);
  border-left: 4px solid var(--cocopaver-accent);
  background: var(--white);
  color: var(--cocopaver-primary-dark);
  font-style: normal;
}
.single-entry-content .wp-block-table {
  margin: var(--space-32) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.single-entry-content .wp-block-table table {
  margin: 0;
  width: max-content;
  min-width: 100%;
}
.single-entry-content th,
.single-entry-content td {
  display: table-cell;
  width: auto;
}
.single-entry-back {
  margin: var(--space-64) auto 0;
  text-align: center;
}
.single-entry-back-link {
  display: inline-block;
  min-width: 240px;
  padding: var(--space-12) var(--space-32);
  border: 1px solid var(--cocopaver-primary-dark);
  background: transparent;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.single-entry-back-link:hover,
.single-entry-back-link:focus-visible {
  background: var(--cocopaver-primary-dark);
  color: var(--white);
}
/* 便り / お知らせ / 施工事例 記事詳細: 一覧へボタンを便り一覧の「お知らせはこちら」(page-blog-news-link-btn) と同型に */
:is(body.single-cpt_blog, body.single-cpt_news, body.single-cpt_works) .single-entry-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 345px;
  min-width: 0;
  height: 57px;
  padding: var(--space-16) var(--space-24);
  border-radius: 0;
  background-color: var(--white);
  font-size: var(--font-size-lg);
  line-height: 1.2;
  letter-spacing: 1.6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
:is(body.single-cpt_blog, body.single-cpt_news, body.single-cpt_works) .single-entry-back-link::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("library/images/icon/arrow-link.svg") no-repeat center / contain;
  transition: filter 0.2s;
}
:is(body.single-cpt_blog, body.single-cpt_news, body.single-cpt_works) .single-entry-back-link:hover,
:is(body.single-cpt_blog, body.single-cpt_news, body.single-cpt_works) .single-entry-back-link:focus-visible {
  opacity: 1;
  border-color: var(--cocopaver-primary-dark);
  background-color: var(--cocopaver-primary-dark);
  color: var(--white);
}
:is(body.single-cpt_blog, body.single-cpt_news, body.single-cpt_works) .single-entry-back-link:hover::after,
:is(body.single-cpt_blog, body.single-cpt_news, body.single-cpt_works) .single-entry-back-link:focus-visible::after {
  filter: brightness(0) invert(1);
}
/* ----- LG (>= 992px): PC レイアウト ----- */
@media (min-width: 992px) {
  .single-entry-body {
    padding: var(--space-80) 0 var(--space-120);
  }

  .single-entry-header {
    margin-bottom: var(--space-40);
  }

  .single-entry-eyecatch {
    margin-bottom: var(--space-56);
  }

  :is(body.single-cpt_blog, body.single-cpt_news, body.single-cpt_works) .single-entry-back-link {
    max-width: 356px;
  }
}
/* =============================================================
 * 404 Not Found
 * body.error404 — 下層と同じテクスチャ背景、カード内は明朝 + グリーン系
 * ============================================================= */
body.error404 main.page-not-found,
body.search main.page-not-found {
  background:
    linear-gradient(rgba(248, 247, 242, 0.83), rgba(248, 247, 242, 0.83)),
    url("library/images/material/faq-bg-texture.webp") repeat center / 900px auto;
}
.page-not-found-breadcrumb {
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}
.page-not-found-breadcrumb .container,
.page-not-found-content .container {
  max-width: 1200px;
  padding-inline: var(--space-24);
  box-sizing: border-box;
}
.page-not-found-content {
  padding: var(--space-24) 0 var(--space-64);
}
.page-not-found #not-found {
  margin: 0;
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--cocopaver-primary);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.04em;
}
.page-not-found #not-found h2 {
  margin: 0 0 var(--space-16);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-2xl), 0.764vw + 19px, var(--font-size-3xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: 0.06em;
}
.page-not-found #not-found > p {
  margin: 0 0 var(--space-24);
  font-size: clamp(var(--font-size-sm), 0.191vw + 12.25px, var(--font-size-lg));
  line-height: var(--leading-relaxed);
}
.page-not-found #not-found h3 {
  margin: var(--space-32) 0 var(--space-12);
  padding: 0 0 var(--space-8);
  border-bottom: 1px solid var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-base), 0.191vw + 13.25px, var(--font-size-xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: 0.04em;
}
.page-not-found #not-found h3::before {
  content: none;
}
.page-not-found #not-found .search h3 {
  margin-top: 0;
}
.page-not-found #not-found ul {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-24);
  list-style-type: disc;
}
.page-not-found #not-found ul::marker {
  color: var(--cocopaver-primary);
}
.page-not-found #not-found ul li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-not-found #not-found .searchform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: stretch;
  margin-top: var(--space-8);
  max-width: 100%;
}
.page-not-found #not-found input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 44px;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--cocopaver-primary-dark);
  border-radius: var(--radius-xs);
  background: var(--white);
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  box-sizing: border-box;
}
/* UA の focus リング（outline / box-shadow）が既存ボーダーと二重にならないようにする */
.page-not-found #not-found input[type="search"]:focus,
.page-not-found #not-found input[type="search"]:focus-visible {
  outline: none;
  box-shadow: none;
  border: 1px solid var(--cocopaver-primary-dark);
}
.page-not-found #not-found .searchform button {
  flex-shrink: 0;
  align-self: stretch;
  min-width: 48px;
  width: auto;
  height: auto;
  min-height: 44px;
  border-radius: var(--radius-xs);
  background: var(--cocopaver-primary-dark);
}
.page-not-found #not-found .searchform button::before {
  filter: brightness(0) invert(1);
}
@media (min-width: 768px) {
  .page-not-found-breadcrumb, .page-not-found-content .container {
    padding-inline: var(--space-80);
  }
}
@media (min-width: 992px) {
  .page-not-found-content {
    padding: var(--space-80) 0 var(--space-120);
  }
  .page-not-found #not-found {
    padding: var(--space-40) var(--space-48);
  }
  .page-not-found #not-found h2 {
    font-size: clamp(var(--font-size-3xl), 1.53vw + 22px, var(--font-size-4xl));
  }
}
@media (min-width: 1200px) {
  .page-not-found-breadcrumb, .page-not-found-content .container {
    padding-inline: var(--space-120);
    max-width: none;
  }
}
@media (min-width: 1400px) {
  .page-not-found-breadcrumb, .page-not-found-content .container {
    padding-inline: 0;
    max-width: 1200px;
  }
}
/* =============================================================
 * プライバシーポリシー (/privacy-policy/)
 * 下層共通のクリーム系テクスチャ背景 + 読み物プローズレイアウト
 * ============================================================= */
.page-privacy-policy {
  background:
    linear-gradient(rgba(248, 247, 242, 0.83), rgba(248, 247, 242, 0.83)),
    url("library/images/material/faq-bg-texture.webp") repeat center / 900px auto;
}
.page-privacy-policy-breadcrumb {
  display: none;
}
.page-privacy-policy-article {
  padding: var(--space-48) 0;
}
.page-privacy-policy-header {
  margin: 0 0 var(--space-32);
  text-align: center;
}
.page-privacy-policy-title {
  margin: 0;
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-lg), 1.15vw + 15.5px, var(--font-size-3xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: clamp(2px, 0.191vw + 1.25px, 2.88px);
}
.page-privacy-policy-prose {
  color: var(--text-main);
  font-family: var(--font-base);
  font-size: clamp(var(--font-size-sm), 0.159vw + 13.38px, var(--font-size-base));
  line-height: var(--leading-relaxed);
}
.page-privacy-policy-prose > p {
  margin: 0 0 var(--space-16);
}
.page-privacy-policy-prose > p:last-child {
  margin-bottom: 0;
}
.page-privacy-policy-note-list,
.page-privacy-policy-prose ul:not(.page-privacy-policy-contact-methods) {
  margin: 0 0 var(--space-24);
  padding-left: 1.25em;
}
.page-privacy-policy-note-list li,
.page-privacy-policy-prose ul:not(.page-privacy-policy-contact-methods) li {
  margin-bottom: var(--space-8);
}
.page-privacy-policy-note-list li:last-child,
.page-privacy-policy-prose ul:not(.page-privacy-policy-contact-methods) li:last-child {
  margin-bottom: 0;
}
.page-privacy-policy-section {
  margin-top: var(--space-40);
}
.page-privacy-policy-section:first-of-type {
  margin-top: var(--space-24);
}
.page-privacy-policy-heading {
  margin: 0 0 var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--cocopaver-accent);
  color: var(--cocopaver-primary-dark);
  font-family: var(--font-mincho);
  font-size: clamp(var(--font-size-base), 0.318vw + 14.75px, var(--font-size-lg));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
.page-privacy-policy-subheading {
  margin: var(--space-24) 0 var(--space-12);
  color: var(--cocopaver-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.page-privacy-policy-section > p {
  margin: 0 0 var(--space-12);
}
.page-privacy-policy-section > p:last-child {
  margin-bottom: 0;
}
.page-privacy-policy-section > ul {
  margin-top: var(--space-8);
}
.page-privacy-policy-contact-card {
  margin-top: var(--space-24);
  padding: var(--space-24) var(--space-24) var(--space-32);
  border: 1px solid var(--cocopaver-primary);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-mincho);
}
.page-privacy-policy-contact-name {
  margin: 0 0 var(--space-12);
  color: var(--cocopaver-primary-dark);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
.page-privacy-policy-contact-address {
  margin: 0 0 var(--space-16);
  color: var(--text-main);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
}
.page-privacy-policy-contact-role {
  margin: 0 0 var(--space-8);
  color: var(--cocopaver-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
}
.page-privacy-policy-contact-methods {
  margin: 0;
  padding: 0;
}
.page-privacy-policy-contact-methods li {
  margin-bottom: var(--space-8);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
}
.page-privacy-policy-contact-methods li:last-child {
  margin-bottom: 0;
}
.page-privacy-policy-contact-methods a {
  color: var(--cocopaver-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-privacy-policy-contact-methods a:hover,
.page-privacy-policy-contact-methods a:focus-visible {
  opacity: 0.85;
}
@media (min-width: 768px) {
  .page-privacy-policy-article {
    padding: var(--space-120);
  }

  .page-privacy-policy-contact-card {
    padding: var(--space-32) var(--space-40);
  }
}