@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==================================================
   5. ショップ一覧ページ（旧・テーブル版／巻き戻し用に保持）
   --------------------------------------------------
   旧 <table class="shop-list-table"> レイアウトのスタイル。
   2026-08-30、CD原本に基づき functions.php のショートコード
   [shop_list] の出力を .shop-row（CSS Grid）版へ差し替えたため、
   このセクション（.shop-list-table / .shop-btn-row / .shop-table-btn /
   .shop-name-display / .btn-more / .shop-tel-row 等）は現在は未使用。
   ただし、テキストリンク化を元に戻す際の巻き戻し用として意図的に残す。
   新レイアウトのスタイルは下記「5-A. カード行レイアウト（現行）」。
   ================================================== */

/* --------------------------------------------------
   5-1. テーブル（表）のデザイン
   -------------------------------------------------- */
.shop-list-table {
    width: 100%;
    border-collapse: collapse; /* セル同士の境界線を重ねる */
    table-layout: fixed;       /* 列幅を固定 */
    margin-bottom: 40px;
    border: 1px solid #e0e0e0;
}

/* 全セル共通：余白・ボーダー・文字サイズ */
.shop-list-table th,
.shop-list-table td {
    padding: 20px 15px;
    border: 1px solid #e0e0e0;
    vertical-align: middle; /* 縦方向：中央揃え */
    font-size: 15px;
    line-height: 1.6;
}
.shop-list-table th {
    text-align: left;
}

/* 1行目（ヘッダー行）：背景色あり・太字・中央揃え */
.shop-list-table tr:first-child th,
.shop-list-table tr:first-child td {
    background-color: #f7f7f7;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #e0e0e0;
}

/* 列幅の設定 */
.shop-list-table th:nth-child(1),
.shop-list-table td:nth-child(1) { width: 50%; }                          /* 1列目：店舗情報 */

.shop-list-table th:nth-child(2),
.shop-list-table td:nth-child(2) { width: 30%; text-align: center; }      /* 2列目：営業案内 */

.shop-list-table th:nth-child(3),
.shop-list-table td:nth-child(3) { width: 20%; text-align: center; }      /* 3列目：リンク */

/* 営業時間の強調表示 */
.shop-hours-display {
    font-size: 1.2rem;
    font-weight: 500; /* 通常(400)よりやや太め。boldより軽い */
    color: #333;
    line-height: 1.2;
}

/* --------------------------------------------------
   スマホ表示（599px以下）：カード型に変換
   -------------------------------------------------- */
@media (max-width: 599px) {
    /* テーブル全体をブロック要素に変換 */
    .shop-list-table,
    .shop-list-table tbody,
    .shop-list-table th,
    .shop-list-table td,
    .shop-list-table tr {
        display: block;
        width: 100% !important;
    }
    /* ヘッダー行（項目名）を非表示 */
    .shop-list-table tr:first-child {
        display: none;
    }
    /* 各行をカード風に */
    .shop-list-table tr {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        margin-bottom: 16px;
        overflow: hidden;
    }
    /* 各セルの共通設定 */
    .shop-list-table td {
        text-align: left !important;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 15px;
    }
    /* 最後のセルは下線なし */
    .shop-list-table td:last-child {
        border-bottom: none;
    }
    /* 各セルの前にラベルを表示 */
    .shop-list-table td:nth-child(2)::before {
        content: "営業案内";
        display: block;
        font-size: 11px;
        font-weight: bold;
        color: #888;
        margin-bottom: 4px;
    }
    .shop-list-table td:nth-child(3)::before {
        content: "リンク";
        display: block;
        font-size: 11px;
        font-weight: bold;
        color: #888;
        margin-bottom: 4px;
    }
    /* リンクセルをflexコンテナに（スマホのみ） */
    .shop-list-table td:nth-child(3) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        align-items: stretch;
    }
    /* shop-btn-rowのコンテナを消してボタンを直接flex参加させる */
    .shop-list-table td:nth-child(3) .shop-btn-row {
        display: contents;
    }
    /* 全ボタン均等幅・同じ高さ */
    .shop-list-table td:nth-child(3) .shop-table-btn,
    .shop-list-table td:nth-child(3) .btn-map {
        flex: 1 1 0;
        height: 52px;
        min-height: unset;
        flex-direction: column;
        gap: 3px;
        width: auto !important;
        margin-bottom: 0;
    }
}

/* --------------------------------------------------
   タブレット表示（600px〜781px）：列幅を調整
   -------------------------------------------------- */
@media (min-width: 600px) and (max-width: 781px) {
    .shop-list-table th:nth-child(1),
    .shop-list-table td:nth-child(1) { width: 45%; }
    .shop-list-table th:nth-child(2),
    .shop-list-table td:nth-child(2) { width: 30%; }
    .shop-list-table th:nth-child(3),
    .shop-list-table td:nth-child(3) { width: 25%; }
}

/* --------------------------------------------------
   5-2. 見出しのデザイン（エリア名・店舗名）
   --------------------------------------------------
   SWELL の h2・h3 デフォルトスタイル（背景・下線など）を
   リセットして、ショップ一覧専用のデザインを適用します。
   -------------------------------------------------- */

/* エリア見出し h2（例：「東京都」「大阪府」） */
.shop-list h2.shop-area-title {
    /* SWELLのh2デフォルトスタイルをリセット */
    background: transparent;
    background-image: none;
    border: none;
    padding: 0;

    /* 見た目の設定 */
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;

    /* 上下の余白（em = 現在の文字サイズ基準） */
    margin-top: 2em;
    margin-bottom: 1em;
}

/* 店舗名 h3（例：「○○店」） */
.shop-list h3.shop-name-display {
    all: unset;      /* SWELLのh3デフォルトスタイルを全てリセット */
    display: block;  /* リセット後にブロック要素として再定義 */

    /* 見た目の設定 */
    font-size: 1.2rem;
    font-weight: bold;
    color: #ab5d00; /* 茶色系のアクセントカラー */
    line-height: 1.3;
}

/* h3の直後に要素がある場合のみ、下に余白をとる */
.shop-list h3.shop-name-display:has(+ *) {
    margin-bottom: 0.5em;
}

/* SWELLが追加する擬似要素（装飾線など）を確実に消す */
.shop-list h3.shop-name-display::before,
.shop-list h3.shop-name-display::after {
    content: none;
    display: none;
}

/* --------------------------------------------------
   5-3. ボタンのデザイン
   --------------------------------------------------
   上段：ウェブサイト・ECショップ（横並び・同じ高さ）
   下段：Google Map（横幅いっぱい）
   -------------------------------------------------- */

/* 上段ボタンを横並びにするコンテナ */
.shop-btn-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    min-height: 52px; /* 上段ボタンの高さを統一 */
}

/* 全ボタン共通スタイル */
.shop-table-btn {
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    font-size: 10px;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 6px;
    text-align: center;
    transition: opacity 0.3s;
    box-sizing: border-box;
}

/* ボタン内アイコンのサイズ */
.shop-table-btn i {
    font-size: 14px; /* アイコンの大きさ。数値で調整可能 */
}
/* Google Mapボタン内アイコンのサイズ */
.btn-map i {
    font-size: 13px;
}

/* 上段ボタン（ウェブサイト・ECショップ）：flex で均等幅 */
.shop-btn-row .shop-table-btn {
    flex: 1;
    min-height: 52px; /* 片方しかない場合も高さを維持 */
}

/* ウェブサイトボタン（ブルー系） */
.btn-site {
    background: #4a90c4;
    color: #fff;
}
/* ECショップボタン（グリーン系） */
.btn-ec {
    background: #5aaa6a;
    color: #fff;
}
/* インスタグラムボタン（ピンク系） */
.btn-instagram {
    background: #c13584;
    color: #fff;
}
/* 楽天ボタン（レッド系） */
.btn-rakuten {
    background: #bf0000;
    color: #fff;
}
/* Yahoo!ボタン（パープル系） */
.btn-yahoo {
    background: #720e9e;
    color: #fff;
}

/* Google Map ボタン（下段・横幅いっぱい） */
.btn-map {
    font-weight: 400;
    display: flex;
    flex-direction: row; /* アイコンとテキストを横並び */
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 36px;
    background: #fff;
    color: #e05c3a;
    border: 1.5px solid #e05c3a;
    border-radius: 6px;
    font-size: 10px;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.3s;
}

/* ホバー時：ボタン全体を薄くする */
.shop-table-btn:hover,
.btn-map:hover {
    opacity: 0.7;
}

/* 電話番号と More ボタンを同じ行に並べるコンテナ */
.shop-tel-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左に電話番号・右にMoreボタン */
    margin-top: 4px;
}

/* 電話番号リンク */
.shop-tel {
    color: var(--color_link); /* SWELLのリンクカラーを使用 */
    text-decoration: none;
}
.shop-tel:hover {
    opacity: 0.7;
}

/* 電話番号リンク内のアイコン */
.shop-tel i {
    margin-right: 4px; /* アイコンと番号の間の隙間 */
}

/* .shop-info-display（廃止・2026-08-21）
   店舗情報（shop_info）の一部を小さめグレーで表示するために用意したが、
   ACF側で該当部分を分離できず、出力コードに接続されないまま未使用だった。
   現在は Shop 詳細ページの入力時に <small> タグを直接記述して代用している。
   ACF のフィールド分離を行う場合は、この用途を再検討すること。 */

/* More ボタン（詳細ページへのリンク） */
.btn-more {
    display: inline-block;
    font-size: 11px;
    color: #ab5d00;
    text-decoration: none;
    border: 1px solid #ab5d00;
    border-radius: 20px;        /* ピル型の角丸 */
    padding: 3px 10px;
    transition: opacity 0.3s;
    white-space: nowrap;        /* 折り返し防止 */
}
.btn-more:hover {
    opacity: 0.7;
}

/* 店舗名リンク（詳細ページあり） */
.shop-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #ab5d00;
    transition: opacity 0.3s;
}
.shop-name-link:hover {
    opacity: 0.7;
}

/* ==================================================
   5-A. ショップ一覧ページ：カード行レイアウト（現行）
   --------------------------------------------------
   （Claude Code により実装, 2026-08-30）
   CD原本 docs/cd-reference/shopguide/（links.js の ShopCard /
   AreaHead / OnlineBlock、hero.js の AreaIndex）に準拠。
   functions.php のショートコード [shop_list] が出力する
   .shop-row（CSS Grid）構成のスタイル。旧テーブル版は上のセクション5。
   ブレイクポイントは CD原本準拠の 959px / 599px
   （本サイト標準の 960 / 600 とは別。ブレイクポイント不統一は既知の
   保留課題であり、本タスクでの統一対応は範囲外）。
   ================================================== */

.shop-list {
    padding: 0 0 clamp(40px, 6vw, 72px);   /* 2026-09-05、上を0に変更（境界線との余白解消） */
}

/* ---- エリア索引（AreaIndex）：スティッキーな都道府県プルダウン ---- */
.shop-area-bar {
    position: sticky;
    /* スクロール時に上部を覆うヘッダーの高さ分オフセットする。
       PC（≥960px）＝ SWELL 追従ヘッダー #fix_header 64px、
       SP（<960px）＝ sticky な #header 48px（下の @media）。
       ※ --swl-fix_headerH はスクロール後も 0 のままで当てにならないため固定値。
       手動で微調整する場合はテーマファイルエディタで --shop-areabar-top を指定 */
    top: var(--shop-areabar-top, 64px);
    z-index: 200;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    /* 全幅化：left ではなく margin で行う（sticky+leftの不具合を回避。2026-09-05） */
    margin-left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
    margin-right: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
    width: calc(100vw - var(--swl-scrollbar_width, 0px));
}
/* SWELL側の汎用ルール .alignfull>.wp-block-group__inner-container>*（詳細度0,2,0・
   margin-bottom:2em）に margin-bottom だけが負けていたため、同じ詳細度のセレクタで
   分離して指定し直す（2026-09-05） */
.wp-block-group__inner-container > .shop-area-bar {
    margin-bottom: clamp(48px, 4vw, 72px);
}
.shop-area-bar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px clamp(12px, 3vw, 24px);
    /* 背景は全幅、中身は本文幅に中央寄せ（2026-09-05） */
    max-width: var(--article_size);
    margin-left: auto;
    margin-right: auto;
}
.shop-area-bar__label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--accent);
}
.shop-area-bar__select {
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text);
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 10px 34px 10px 14px;
    min-width: 220px;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-mid) 50%),
        linear-gradient(135deg, var(--text-mid) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ---- エリア（都道府県）ブロック ---- */
.shop-area {
    margin-bottom: clamp(36px, 4vw, 56px);
    scroll-margin-top: calc(var(--shop-areabar-top, 64px) + 90px);
}
/* SP（<960px）は #fix_header ではなく sticky な #header（48px）が上部を覆う。
   SWELL のヘッダー切替と同じ 960px でオフセット値を出し分ける */
@media (max-width: 959px) {
    .shop-area-bar {
        top: var(--shop-areabar-top, 48px);
    }
    .shop-area {
        scroll-margin-top: calc(var(--shop-areabar-top, 48px) + 90px);
    }
}
.shop-list .shop-area__title {
    display: flex;          /* .has-rule-after と同じ（罫線を引くため） */
    align-items: center;
    margin: 0 0 clamp(16px, 2vw, 26px);
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: var(--text);
    white-space: nowrap;
}
.shop-list .shop-area__title::before {
    display: none;          /* 親テーマ h2 の装飾（左の棒）を消す */
}
.shop-list .shop-area__title.has-rule-after::after {
    content: "";
    display: block;         /* 親テーマ h2::after のリセットに勝たせる */
}

/* ---- 店舗行（.shop-row）：左＝店舗情報／右＝営業案内・リンク ---- */
.shop-rows {
    padding: 0 clamp(0px, 2vw, 28px);
}
.shop-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
    gap: clamp(20px, 2.4vw, 32px);
    /* align-items は既定の stretch のまま：左右セルが行の高さ（＝長い方）まで
       伸び、.shop-row__right の border-left（区切り線）が常に長い列に届く */
    border-top: 1px solid var(--border);
    padding: clamp(22px, 2.6vw, 30px) 0;
}
.shop-row__left {
    padding-left: clamp(16px, 2vw, 24px);
}
.shop-row__right {
    padding-left: clamp(16px, 2vw, 24px);
    border-left: 1px solid var(--border);   /* 左右の区切り線。高さは .shop-row の grid stretch に追従 */
}

/* 左：店舗名・住所・電話
   .shop-list を前置して詳細度 0,0,2,0 とし、親テーマ
   .post_content h3（0,0,1,1：太字・大余白・装飾線 ::before）に勝たせる
   （.shop-area__title と同じ手法。2026-08-30） */
.shop-list .shop-row__name {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(19px, 1.5vw, 21px);
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--text);
}
.shop-list .shop-row__name::before {
    display: none;      /* 親テーマ h3 の装飾線を消す */
}
.shop-row__name-link {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
}
.shop-row__zip {
    margin: 0;
    font-family: var(--font-body);
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--text-mid);
}
.shop-row__addr {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-mid);
}
.shop-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 8px;
}
.shop-row__tel {
    font-family: var(--font-body);
    font-size: 14.5px;
    letter-spacing: 0.04em;
    color: var(--text);
    text-decoration: none;
}
.shop-row__more {
    margin-left: auto;      /* 左列（.shop-row__meta flex）の右寄せ */
    margin-right: clamp(16px, 2vw, 24px);   /* 右端に .shop-row__left の内側 padding と同じ余白を残す */
    font-family: var(--font-body);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
    white-space: nowrap;
}

/* 右：営業案内 */
.shop-row__hours-block {
    margin-bottom: 16px;
}
.shop-row__right .section-eyebrow {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
}
.shop-row__hours {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    letter-spacing: 0.03em;
    line-height: 1.6;
    color: var(--text);
}
.shop-row__note {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-mid);
}

/* 右：リンク（テキストリンク版。詳細ページの色ボタンとは別系統） */
.shop-row__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.shop-link {
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text);
    border-bottom: 1px solid var(--text-light);
    padding-bottom: 3px;
}
.shop-link.is-map {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.shop-link__ext {
    font-weight: 400;
    font-size: 9px;
    margin-left: 5px;
    opacity: 0.65;
}

/* ---- クロージング（ShopNote）：全幅グループに .shop-note ---- */
.shop-note {
    text-align: center;
}
.shop-note .wp-block-buttons {
    justify-content: center;
}

/* ---- ページのタイトルエリア：flexグループに .page-title-area ---- */
.page-title-area {
    display: flex;
    align-items: stretch;   /* 画像を左テキスト列の高さに追従（CD原本 .page-head） */
    gap: clamp(24px, 4vw, 48px);
}
/* 列の間隔を除いた幅をテキスト5：画像4で分ける。画像を非表示にしたページでは
   テキスト列だけが伸びて全幅になる（2026-09-25） */
.page-title-area__text {
    flex: 5 1 0;
}
/* CD-07 §2：タイトルエリア直前のアイブロウ。下余白を詰め、テキストの前（左）に
   横線（幅22px・高さ1px・accent／テキストとの間隔14px）を ::before で生成する。
   共有 .section-eyebrow は変更せず、クラスを重ねて詳細度 0,3,0（::before は 0,3,1）とし、
   直後に .page-title-area が来る場合のみに限定（両ページに効く。2026-09-04） */
.section-eyebrow.section-eyebrow:has(+ .page-title-area) {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.section-eyebrow.section-eyebrow:has(+ .page-title-area)::before,
.shop-single__head-row .section-eyebrow::before,
.voice-single__review > .section-eyebrow::before,
.voice-single__photo > .section-eyebrow::before {
    content: "";
    flex: none;
    width: 22px;
    height: 1px;
    margin-right: 14px;
    background: var(--accent);
}
/* 詳細ページ（正規取扱店・お客様の声）のアイブロウにも上の横線を付けるための横並び（2026-09-25） */
.shop-single__head-row .section-eyebrow,
.voice-single__review > .section-eyebrow,
.voice-single__photo > .section-eyebrow {
    display: flex;
    align-items: center;
}
/* CD-07 §2：ページタイトル専用クラス（H1・core/post-title）。共有 .section-title-standard
   から独立させ「ページ全体のタイトル」と「セクション内見出し（ShopNote等）」の役割を分離する
   （2026-09-04）。font-family/weight/color/line-height/letter-spacing は旧 .section-title-standard
   由来を引き継ぎ、font-size の最小値のみ SP 視認性のため拡大（22px→27px。3vw・最大36px は不変）。
   margin-bottom は CD-07 §2 のH1↔リード間隔。.post_content を前置して詳細度 0,2,0 とし、親テーマ
   .post_content h1 の font-size:2em（詳細度 0,1,1）と .post_content .is-style-section_ttl
   （0,2,0・color:inherit / letter-spacing）に勝たせる（子テーマは親より後方ロード）。
   .section-title-standard 自体は変更しない。 */
.post_content .page-title {
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--text);
    line-height: 1.7;
    letter-spacing: 0.05em;
    font-size: clamp(27px, 3vw, 36px);
    margin-bottom: clamp(10px, 1.5vw, 16px);
}
/* .section-body-standard は font-family 未指定で、.post_content の
   継承（SWELL標準 Yu Gothic）になるため、本文フォントを明示する（2026-08-30）。
   CD-07 §2：リード文の最大幅 660px（2026-09-03 追加） */
.page-title-area .section-body-standard {
    font-family: var(--font-body);
    max-width: 660px;
}
/* CD-07 §2：タイトルエリアを囲む全幅グループに、セクション上下padding と
   下端の境界線（画面幅いっぱい）。.alignfull を重ねて詳細度 0,3,0 とし、後方の
   .alignfull.no-vpadding-block（0,2,0・!important・padding-top/bottom:0）に
   出典順ではなく詳細度で確実に勝たせる（!important は相手も !important のため必須。
   詳細度で上回るのが本質）。.page-title-area を内包する align:full グループにのみ効く。
   （ID:15249／ID:64 とも タイトルエリアを align:full グループで囲んでおり両方に効く。2026-09-04） */
.alignfull.alignfull:has(.page-title-area) {
    padding-block: clamp(6px, 2vw, 6px) clamp(40px, 5vw, 56px) !important;
    border-bottom: 1px solid var(--border);
}
/* CD-07 §2：上記と同じ下線・余白を、外側グループが「幅指定なし」
   （.alignfullが付かない）のページにも効かせる。:not(.alignfull)により
   alignfull側のページには構造上一致しない。.no-vpadding-block自体の
   padding-top/bottom:0 !importantに勝つ必要があるため、上記と同じ
   手段（padding-block + !important）を踏襲する（2026-09-16）。 */
.no-vpadding-block:not(.alignfull):has(.page-title-area) {
    padding-block: clamp(6px, 2vw, 6px) clamp(40px, 5vw, 56px) !important;
    border-bottom: 1px solid var(--border);
}
/* 行の高さはテキスト列と min-height だけで決める。画像は絶対配置で枠いっぱいに広げ、
   画像自身の比率が行の高さに影響しないようにする（2026-09-25） */
.page-title-area__img {
    position: relative;
    flex: 4 1 0;
    overflow: hidden;
    min-height: 150px;      /* CD原本 .head-banner の min-height */
    /* 上マージンは付けない（見出しと画像の開始位置をそろえる）。
       親テーマ .wp-block-group.is-row > * { margin: 0 } がそのまま効く */
}
.page-title-area__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
/* タイトル部の右の列（画像の代わりに枠などを置く。テキスト5：右4、高さは中身のまま）（2026-10-31） */
.page-title-area__side {
    flex: 4 1 0;
    align-self: flex-start;
}

/* ---- タブレット（959px以下）：右列をやや狭める ---- */
@media (max-width: 959px) {
    .shop-row {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 40%);
        gap: 20px;
    }
}

/* ---- スマホ（599px以下）：1カラム縦積み ---- */
@media (max-width: 599px) {
    .shop-row {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    .shop-row__left,
    .shop-row__right {
        padding-left: 0;
    }
    .shop-row__right {
        border-left: none;
    }
    .shop-rows {
        padding: 0;
    }
    /* ページのタイトルエリア：599px以下で縦積み。画像は CD原本 .head-banner のモバイル値 */
    .page-title-area {
        flex-direction: column;
        align-items: stretch;
    }
    /* 縦並びでは flex-basis 0 が高さに効いてしまうため flex を戻し、枠に高さを持たせる（2026-09-25） */
    .page-title-area__img {
        flex: none;
        min-height: 0;
        height: 180px;
    }
    /* タイトル部の右の列：縦並びで flex-basis 0 が高さに効かないよう flex を戻す（2026-10-31） */
    .page-title-area__side {
        flex: none;
    }
}

/* =====================================================
   12. shop・voice詳細ページ：一覧に戻るボタンの外側の余白
   -----------------------------------------------------
   ボタン本体は mycst_render_back_button()（functions.php §25）が出力する
   .section-btn 枠線版のボタンブロック（CD-12、2026-09-24）
   ===================================================== */
.shop-single__back {
    margin-top: clamp(56px, 7vw, 88px);
    margin-bottom: clamp(56px, 7vw, 80px);
}

/* =====================================================
   12-A. 正規取扱店 詳細ページ（CD-12）：見出し部・店舗情報の枠・リンク
   （本文・ギャラリーは個別の指定なし。共通の設定のまま）
   ===================================================== */

/* 見出し部：小見出し「SHOP」＋都道府県のピル（2026-09-24） */
.shop-single__head-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.shop-single__head-row .section-eyebrow {
    margin-bottom: 0;
}
.single-shop .c-postTitle__ttl {
    margin-bottom: clamp(14px, 1.8vw, 18px);
}
.shop-single__pref {
    padding: 4px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--text);
}

/* 店舗情報の枠：所在地｜営業案内の2列（2026-09-24） */
.shop-single__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.shop-single__panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--accent);
}
.shop-single__panel--single {
    grid-template-columns: minmax(0, 1fr);
}
.shop-single__col {
    padding: clamp(26px, 3.2vw, 36px) clamp(0px, 2.6vw, 26px);
}
.shop-single__col--hours {
    border-left: 1px solid var(--border);
    padding-left: clamp(24px, 3vw, 32px);
}
.shop-single__panel--single .shop-single__col--hours {
    border: 0;
    padding-left: clamp(0px, 2.6vw, 26px);
}
.shop-single__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--accent);
}
.shop-single__label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.shop-single__zip {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-mid);
}
.shop-single__addr {
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.95;
    color: var(--text);
}
.shop-single__tel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dotted var(--border);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text);
}
.shop-single__tel-link {
    color: var(--text);
    text-decoration: none;
}
.shop-single__hours {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text);
}
.shop-single__note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted var(--border);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text);
}
.shop-single__note small {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--text-mid);
}

/* リンク：件数に関わらず等幅で横並び（2026-09-24） */
.shop-single__links {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.shop-single__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text);
    text-decoration: none;
    transition: opacity 0.2s;
}
.shop-single__link:hover {
    opacity: 0.65;
}
.shop-single__link-ext {
    font-size: 10px;
    color: var(--text-mid);
}
.shop-single__link--map {
    border-color: var(--accent);
    color: var(--accent);
}

/* 599px以下：店舗情報の枠・リンクを1列に（2026-09-24） */
@media (max-width: 599px) {
    .shop-single__panel {
        grid-template-columns: minmax(0, 1fr);
    }
    .shop-single__col--hours {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-left: 0;
    }
    .shop-single__links {
        grid-auto-flow: row;
    }
}

/* =====================================================
   12-2. voice詳細ページ：注記（CD-13、2026-09-25）
   ===================================================== */
.voice-single__notice {
    font-weight: 400;
    margin-top: clamp(44px, 5.5vw, 64px);
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--text-mid);
    font-size: 11.5px;
    line-height: 1.9;
}
.voice-single__notice a {
    color: inherit;
    text-decoration: underline;
}

/* =====================================================
   12-B. お客様の声 詳細ページ（CD-13）：評価と署名・アイキャッチ・要約・本文・写真
   （見出し部は 12-A の .shop-single__head-row を流用。★の色変数は .voice-list の定義に相乗り）
   ===================================================== */

/* 評価と署名の行：下罫線＋左端のアクセント線（2026-09-25） */
.voice-single__meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: clamp(16px, 2vw, 20px);
    margin-bottom: clamp(28px, 3.5vw, 44px);
    padding-bottom: clamp(16px, 2vw, 20px);
    border-bottom: 1px solid var(--border);
}
.voice-single__meta::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--accent);
}

/* アイキャッチ：16:9 で切り抜き（2026-09-25） */
.single-voice .p-articleThumb {
    margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.single-voice .p-articleThumb__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* 要約（2026-09-25） */
.voice-single__summary {
    padding: clamp(22px, 2.8vw, 30px) clamp(22px, 3vw, 32px);
    background: var(--bg-alt);
    font-family: var(--font-heading);
    font-size: clamp(15px, 1.8vw, 18px);
    font-weight: 400;
    line-height: 2.05;
    letter-spacing: 0.03em;
}

/* レビュー本文：文字サイズ・段落間隔は SWELL の .post_content と同じ変数（2026-09-25） */
.voice-single__review {
    margin-top: clamp(40px, 5vw, 56px);
}
.voice-single__body {
    font-size: var(--swl-fz--content, 16px);
}
.voice-single__body > :not(:last-child) {
    margin-bottom: var(--swl-block-margin, 2em);
}
.voice-single__date {
    text-align: right;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--text-mid);
}

/* 写真（ギャラリー）（2026-09-25） */
.voice-single__photo {
    margin-top: clamp(44px, 5.5vw, 64px);
}

/* =====================================================
   11. shop詳細ページ：タイトル横の日付を非表示
   -----------------------------------------------------
   都道府県などのタクソノミーバッジは残したまま、
   公開日・更新日（c-postTimes）の表示だけを消します。
   ===================================================== */
.single-shop .c-postTimes {
    display: none;
}

/* =====================================================
   TOPページ関連スタイル（Claude Code により実装）
   -----------------------------------------------------
   以下、「① 共通クラス」（複数セクション／サイト全体で使い回すもの）と
   「② 個別クラス」（特定のセクション専用のもの）の2つに分けて記載する。
   ===================================================== */

/* #####################################################
   ① 共通クラス
   ##################################################### */

/* --------------------------------------------------
   カラー・フォント変数（共通の土台）
   --------------------------------------------------
   Serenityパレットに基づく共通のカラー・フォント変数。:rootに定義し、
   固定ページ・投稿・カスタム投稿を含むサイト全体で使用する。
   -------------------------------------------------- */
:root {
    --bg: #FAF8F5;
    --bg-alt: #F0EAE3;
    --bg-dark: #2C2420;
    --accent: #C8614A;
    --accent-hover: #A84C38;
    /* accent の淡色。CD-07 §4（2026-09-03）で :root への変数化を判断済みだったが
       未実施だったため今回追加。製品への想い Story の大きな章番号などに使用（2026-09-08） */
    --accent-soft: #F4E4DC;
    --text: #2C2420;
    --text-mid: #574842;
    --text-light: #BFB0A8;
    --border: #E0D4CC;
    --font-heading: "Noto Serif JP", serif;
    --font-body: "Noto Sans JP", sans-serif;
}

/* --------------------------------------------------
   .reveal / .reveal-left / .reveal-right
   --------------------------------------------------
   スクロールで要素をフェードインさせる共通アニメーション。
   要素が画面内に入ると、top-page.js（IntersectionObserver）が
   .is-visibleを付与する。
   -------------------------------------------------- */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal { transform: translateY(28px); }
.reveal-left { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------
   div.alignfull（align:full セクション共通の上下左右の余白）
   --------------------------------------------------
   （Claude Code により実装, 2026-07-25／2026-08-01 has-background依存を解消）
   当初はdiv.alignfull.has-background（背景色ありの場合のみ）を対象と
   していたが、NEWS&INFOで背景色をクリアした際にこのパディングも同時に
   失われ、内部の孫要素（お知らせ一覧の最後の項目、親テーマmain.cssの
   `.post_content li{margin:.25em 0}`由来）のmarginがマージン相殺により
   外側へ染み出す不具合が発生した（詳細は下記.no-margin-block参照）。
   パディングの有無を背景色の有無に暗黙的に紐付けない設計に変更し、
   align:fullのセクションには背景色の有無に関わらず常にこのパディングを
   適用する（K様の指示、2026-08-01）。パディングを持たせたくない場合は、
   個別に.no-padding-blockクラスを付与する。
   親テーマmain.cssの`div.has-background,p.has-background,.has-border
   {padding:var(--swl-box_padding)}`（詳細度0,0,1,1）に対しては、has-
   backgroundを外した現在のセレクタでも型+クラス1個（0,0,1,1）で詳細度
   が同点になり得るため、!importantで確実に上書きする。
   ※留意事項：親テーマには p.has-background に対する同様のルールも存在
   する。section-eyebrow等の<p>要素に将来背景色を追加する場合、同じ
   詳細度競合が再発する可能性があるため注意。
   -------------------------------------------------- */
div.alignfull {
    padding: clamp(56px, 8vw, 96px) clamp(20px, 6vw, 60px) !important;
}

/* --------------------------------------------------
   .fade-media-card（汎用ユーティリティクラス）
   --------------------------------------------------
   （Claude Code により実装, 2026-08-01）
   旧.top-sectioncardが持っていた複数の役割（フェードイン・画像4:3
   トリミング・背景色対応・パディング・見出し/本文のタイポグラフィ等）
   のうち、「フェードイン」「画像4:3トリミング」の2つだけを切り出した
   汎用クラス。ABOUT/MESSAGE/GENUINE/STAFF BLOG（公式・K様の検証用
   複製セクションとも）は現在すべてこのクラスに移行済みで、旧
   .top-sectioncard本体のCSSは削除済み（2026-08-01）。方向の決定方法は
   has-media-on-the-rightクラスの有無のみを基準にした position-based
   設計（並び順・階層に依存しない）。
   overflow:hiddenは、translateXによるフェードインアニメーション実行中
   の見切れ・横スクロールバーの発生を防ぐため（Claude Code により追加,
   2026-08-01）。テキスト側の左右パディングも同時に追加しているが、
   上下は追加していない（テキスト量に応じた可変の高さのまま）。
   margin関連の指定（margin-bottom等）は.fade-media-card自体には一切
   持たせない方針とし、含めていない。余白の解消は、ブロック側でK様が
   SWELL標準のu-mb-ctrl・u-mb-0クラスを個別に設定する運用とする
   （2026-08-01、u-mb-ctrl/u-mb-0相当の効果を組み込む一時実装を検証・
   撤去した上で確定）。
   -------------------------------------------------- */
.fade-media-card {
    overflow: hidden;
}
/* アンカーリンク付きカード（About理由カード等）専用。id属性を持つ
   カードにのみ適用され、Topページの既存カードには影響しない */
.fade-media-card[id] {
    scroll-margin-top: 90px;
}
.fade-media-card .wp-block-media-text__content {
    padding-left: 8%;
    padding-right: 8%;
}
.fade-media-card:not(.has-media-on-the-right) .wp-block-media-text__media {
    opacity: 0;
    transform: translateX(-32px);
}
.fade-media-card:not(.has-media-on-the-right) .wp-block-media-text__content {
    opacity: 0;
    transform: translateX(32px);
}
.fade-media-card.has-media-on-the-right .wp-block-media-text__media {
    opacity: 0;
    transform: translateX(32px);
}
.fade-media-card.has-media-on-the-right .wp-block-media-text__content {
    opacity: 0;
    transform: translateX(-32px);
}
.fade-media-card .wp-block-media-text__media.is-visible,
.fade-media-card .wp-block-media-text__content.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-media-card .wp-block-media-text__media img {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center 30%;
}

/* --------------------------------------------------
   .no-padding-block（汎用ユーティリティクラス）
   --------------------------------------------------
   （Claude Code により実装, 2026-08-01。旧名no-gap-groupから改名）
   上記div.alignfullの既定パディングを個別に無効化したい場合に、
   ブロックエディタで対象グループへ手動付与する汎用クラス。特定の構造
   には一切紐付けない。
   .alignfull.no-padding-blockを併記しているのは、`div.alignfull`
   （型+クラス1個）と`.no-padding-block`単体（クラス1個のみ）が同じ
   !importantの中で詳細度が並ばず、単体では上のdiv.alignfullに負けて
   しまうため（実機検証で確認）。alignfullと組み合わせたクラス2個分の
   詳細度で確実に上回るようにしている。
   -------------------------------------------------- */
.no-padding-block,
.alignfull.no-padding-block {
    padding: 0 !important;
}

/* --------------------------------------------------
   .no-vpadding-block（汎用ユーティリティクラス）
   --------------------------------------------------
   （Claude Code により実装, 2026-08-01。ABOUT/STAFF BLOG幅不一致調査で
   .no-padding-blockの左右0が原因ではないと判明したことを受けて新設）
   上記div.alignfullの既定パディングのうち、上下（セクション間の縦の
   余白）のみを無効化したい場合に付与する。左右は意図的に上書きしない。
   左右を残す理由：このクラスを持つalign:fullグループの中身の実幅は
   `.wp-block-group__inner-container{max-width:var(--article_size)}`
   （centered、外側のpaddingの値には非依存）で決まるため、左右padding
   の有無は中身の幅に影響しない。一方、align:fullグループを持たず
   `.post_content`直下に裸で置かれる兄弟ブロック（例：STAFF BLOG）は
   `.post_content`自身の左右padding（`--swl-pad_post_content`）を
   そのまま受けるため、こちら側で左右paddingを0にすると、かえって両者の
   実効幅が食い違う（2026-08-01、ABOUT/STAFF BLOG幅不一致調査で判明。
   詳細は.no-padding-block参照）。
   -------------------------------------------------- */
.no-vpadding-block,
.alignfull.no-vpadding-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --------------------------------------------------
   .no-margin-block（汎用ユーティリティクラス）
   --------------------------------------------------
   （Claude Code により実装, 2026-08-01）
   親テーマmain.cssの`.post_content li{margin:.25em 0}`等、WP標準/
   親テーマ側の既定marginを個別に無効化したい要素に、ブロックエディタで
   手動付与する汎用クラス。特定の構造（クエリループの最後の項目である
   等）には紐付けない。align:fullセクションのパディングをdiv.alignfull
   の既定にした（上記参照）ことで、こうした孫要素のmarginがマージン
   相殺により外側へ染み出す事象は基本的に発生しなくなるが、念のため
   個別に打ち消したい場合の受け皿として用意する。
   -------------------------------------------------- */
.no-margin-block {
    margin: 0 !important;
}

/* --------------------------------------------------
   .is-accent（汎用ユーティリティクラス）
   --------------------------------------------------
   （Claude Code により実装, 2026-08-14）
   見出し等のテキストをaccent色にするだけの、色専用の汎用クラス。
   既存の見出しクラス（.section-card-title等）と併用する想定のため、
   併用先クラスの詳細度（is-style-section_ttlとの組み合わせ等）に
   関わらず確実に上書きできるよう!importantを付与する。
   -------------------------------------------------- */
.is-accent {
    color: var(--accent) !important;
}

/* --------------------------------------------------
   このクラスが付いた要素の改行は、スマホ幅でのみ有効にする
   --------------------------------------------------
   手動で追記
   -------------------------------------------------- */

.is-br-mobile-only br {
    display: none;
}
@media (max-width: 599px) {
    .is-br-mobile-only br {
        display: inline;
    }
}

/* --------------------------------------------------
   付与した要素の右に、残り幅いっぱいの横線を引く
   --------------------------------------------------
   手動で追記
   -------------------------------------------------- */

.has-rule-after {
    display: flex;
    align-items: center;
    flex: 1;
}
.has-rule-after::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
    margin-left: 16px;
}
/* .has-rule-after内の短い単語ラベル（CORE/CARRIER・MiaMily/JAPAN等）が、
   body{overflow-wrap:break-word}（親テーマ）の継承により、.has-rule-after
   自体がflex:1で狭い幅に押し込まれた際に単語の途中で改行される場合がある
   （2026-08-17、狭い画面幅でラベル文言が長い場合に発覚）。単語内で改行
   させたくないため明示的に打ち消す */
.has-rule-after p {
    overflow-wrap: normal;
    word-break: normal;
}

/* --------------------------------------------------
   .section-eyebrow
   --------------------------------------------------
   セクション見出し上部の小さいラベル文字。OUR PROMISE・NEWS&INFO・
   SHOP GUIDE・AWARD・MEDIA・CUSTOMER REVIEWの共通クラス。
   -------------------------------------------------- */
.section-eyebrow {
    font-size: 11px;
    font-weight: 500;   /* CD原本のeyebrow指定。基本フォント変更（body 400化）後も維持するため明示（2026-08-30） */
    letter-spacing: 0.22em;
    color: var(--accent);
    /* 複数ページ・複数箇所で流用する共通クラスのため、下余白は
       ブロック側のu-mb-N属性に頼らずこのクラス自体に焼き込む
       （新方針、2026-08-14）。CD原本の大半の使用箇所
       （FIVE REASONS・SAFETY & TRUST・HIP HEALTHY DESIGN・
       SEVEN WAYS TO HOLD等）のmarginBottom値（20px）を採用 */
    margin-bottom: 20px;
}
/* u-mb-ctrl（直後要素のmargin-topを打ち消すSWELL標準ユーティリティ）を
   ブロック側で都度付与する運用は設定漏れのリスクがあるため、共通クラス
   側に同等の効果を焼き込む（2026-08-14）。直後要素は常に見出し等、
   margin-top:0を望む前提のため、u-mb-ctrl本体と同じ強さ（!important）
   で確実に上書きする */
.section-eyebrow + * {
    margin-top: 0 !important;
}
/* 小見出しの左に横線（22px×1px・accent・文字との間隔14px）を付ける共通クラス。.section-eyebrow と併用する（2026-09-27） */
.section-eyebrow-line {
    display: flex;
    align-items: center;
}
.section-eyebrow-line::before {
    content: "";
    flex: none;
    width: 22px;
    height: 1px;
    margin-right: 14px;
    background: var(--accent);
}

/* 追従する目次（リストブロックに付ける。全幅は margin で作る〈sticky と left の不具合を避ける〉。.post_content の直下に置く）（2026-10-31） */
.post_content .section-sticky-bar {
    position: sticky;
    top: 64px;
    z-index: 50;
    display: flex;
    gap: clamp(14px, 2.4vw, 28px);
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
    margin-left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
    margin-right: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
    padding: 0 max(20px, calc((100vw - var(--article_size)) / 2));
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
/* 目次の項目：折り返さずに横に並べる（2026-10-31） */
.section-sticky-bar li {
    flex: none;
    white-space: nowrap;
}
/* 目次のリンク（2026-10-31） */
.section-sticky-bar a {
    display: block;
    padding: 16px 0 13px;
    font-size: 12.5px;
    color: var(--text-mid);
    text-decoration: none;
}
.section-sticky-bar a:hover {
    color: var(--accent);
}
/* 目次の行き先：追従ヘッダーと目次に隠れないよう、上に余白を取って止める（2026-10-31） */
.section-anchor {
    scroll-margin-top: 110px;
}
/* 白地に細い枠線の囲み（グループに付ける）（2026-10-31） */
.section-frame {
    background: #fff;
    border: 1px solid var(--border);
    padding: clamp(16px, 3vw, 32px) clamp(20px, 3vw, 32px);
}
/* 点と下線のリスト（リストブロックに付ける）（2026-10-31） */
.post_content .section-dot-list {
    list-style: none;
    padding-left: 0;
}
.section-dot-list li {
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
    line-height: inherit;
}
.section-dot-list li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 11px;
    border-radius: 50%;
    background: var(--accent);
}
/* 追従する目次：959px以下は SWELL の追従する #header（48px）の下に止める（2026-10-31） */
@media (max-width: 959px) {
    .post_content .section-sticky-bar {
        top: 48px;
    }
}

/* --------------------------------------------------
   .section-head-row
   --------------------------------------------------
   見出し行（ラベル＋タイトル＋VIEW MORE等のリンク）の共通クラス。
   NEWS&INFO・SHOP GUIDE・MEDIA・CUSTOMER REVIEWで使用。
   margin-bottomの!importantは、align:wideが付与されるケース
   （MEDIA/CUSTOMER REVIEW）でWP自動生成の内側ラッパーの直接の子になり、
   親テーマ main.css の
   `.alignfull>.wp-block-group__inner-container>*{margin-bottom:2em}`
   （詳細度0,0,2,0）に勝つ必要があるため。
   -------------------------------------------------- */
.section-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 36px !important;
}
/* SHOP GUIDEのようにVIEW MOREリンクを持たず子要素が1つのみの場合、
   flexの初期値では箱が中身の幅に縮んでtext-align:centerが効かなくなる
   ため、子要素が1つだけの場合に限り親の幅いっぱいに広げる */
.section-head-row > *:only-child {
    flex: 1;
}
.section-head-row > *:only-child > .is-row__inner-container {
    width: 100%;
}

/* --------------------------------------------------
   .section-viewmore
   --------------------------------------------------
   「VIEW ALL/VIEW MORE →」リンクの共通クラス。NEWS&INFO・MEDIA・
   CUSTOMER REVIEWで使用。
   -------------------------------------------------- */
.section-viewmore {
    font-size: 11px;
    font-weight: 500;   /* ラベル系。基本フォント変更後も維持（2026-08-30） */
    letter-spacing: 0.1em;
    color: var(--text-mid);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
    white-space: nowrap;
}

/* --------------------------------------------------
   .section-btn
   --------------------------------------------------
   フォント・色・余白・枠線のみのボタン共通クラス。
   幅のみブロックエディタ標準設定。角の丸みはCSSで固定。
   クラスはボタンのラッパー（.wp-block-button）側に付け、実際の
   スタイルは子要素の.wp-block-button__link（aタグ）に適用する
   （aタグ自体にはクラスを追加しない運用のため）。
   個別に角丸が必要な場合は、ブロックエディタの
   「スタイル > 枠線 > 半径」で上書き可能（インラインstyleが優先）
   -------------------------------------------------- */
.section-btn .wp-block-button__link {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-decoration: none;
    padding: 13px 36px;
    transition: opacity 0.25s;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
	border-radius: 0;        /* ← 追加：CD原本はスクエア。全ボタン共通 */
}
.section-btn .wp-block-button__link:hover { opacity: 0.8; }

/* --------------------------------------------------
   .section-pager / .section-pager__next
   --------------------------------------------------
   一覧のページ送り共通クラス（[cocoraku_list]・アーカイブの mycst_render_archive_pager() 等）。
   中身は paginate_links() の plain 出力（.page-numbers 系）＋末尾の「次へ →」。
   中央揃え・要素間8px・一覧本体からの上マージン。
   親テーマの [class*=page-numbers]（詳細度 0,1,0／height36・min-width36・
   margin6・box-shadow、current は --color_main）を上書きする。
   .current／.dots は 0,2,0 の親ルールと同点になるため 0,3,0 で確実に勝たせる。
   （2026-09-06、.cocoraku-list__pager から共通クラス化）
   -------------------------------------------------- */
.section-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: clamp(44px, 5.5vw, 68px);
}
.section-pager .page-numbers {
    font-weight: 400;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 1px solid var(--border);
    background: transparent;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--text-mid);
    text-decoration: none;
}
.section-pager .page-numbers.current {
    border: none;
    background: var(--accent);
    color: #fff;
}
.section-pager .page-numbers.dots {
    border: none;
    color: var(--text-light);
}
.section-pager .section-pager__next {
    padding: 0 16px;
}

/* --------------------------------------------------
   .section-width-540／640／740／840
   --------------------------------------------------
   幅専用のクラス（方針3-1の例外規定）。幅と中央配置だけを担当し、
   幅だけが異なる4つ。新しい幅が必要になったときは、まずこの中から選ぶ。
   全幅（alignfull）のグループには付けない（SWELL の .alignfull の max-width:100vw!important に負けて効かないため、全幅のグループの内側にグループを入れ、そちらに付ける）。
   -------------------------------------------------- */
.section-width-540 {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.section-width-640 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.section-width-740 {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}
.section-width-840 {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

/* セクション見出し（サイズ3段階の共通クラス群）／2026-08-22 */
.post_content .section-title-compact,
.post_content .section-title-standard,
.post_content .section-title-large {
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--text);
    line-height: 1.7;
    letter-spacing: 0.05em;
    margin-bottom: 1.2em;
}
.post_content .section-title-compact { font-size: clamp(18px, 2.4vw, 26px); }
.post_content .section-title-standard { font-size: clamp(22px, 3vw, 36px); }
.post_content .section-title-large { font-size: clamp(25px, 3.6vw, 45px); }

/* CTA（クロージング）セクションの見出し専用クラス。5ページ（特徴・製品情報・
   製品への想い・正規取扱店・お客様の声）の CTA 見出しを .section-title-standard /
   .heading-serif から独立させて集約する（2026-09-04）。現時点の値は
   .section-title-standard と完全同一。スタイルの見直しは後日このクラス単体で行う。
   前置セレクタ（.post_content）も .section-title-standard に合わせる。
   .section-title-standard・.heading-serif 自体は変更しない。 */
.post_content .section-title-cta {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-bottom: 1.2em;
}

/* --------------------------------------------------
   .section-archive-head
   --------------------------------------------------
   アーカイブ見出し（英字ラベル＋見出しを中央寄せ）。ココラク通信の
   カテゴリアーカイブ（swell_child/category.php）でバナー直下に置く。
   中身は .section-eyebrow ＋ .section-title-compact.is-style-section_ttl。
   上下の余白は隣接ブロック（バナー div.alignfull の下 padding／親テーマの
   .post_content > * の margin-bottom）に委ね、ここは中央寄せのみ。
   （2026-09-07）
   -------------------------------------------------- */
.section-archive-head {
    text-align: center;
}

/* --------------------------------------------------
   .section-body-standard
   標準サイズ
   --------------------------------------------------*/
.section-body-standard {
    font-weight: 400;
    font-size: clamp(13px, 1.4vw, 15px);
    color: var(--text-mid);
    line-height: 2.2;
}
/* 見出し直下の点線区切り（CD原本準拠）。WP標準の区切り（Separator）
   ブロックに付与するモディファイア。コア標準は2px実線のみのため、
   線種・太さ・色・余白をここで上書きする */
.wp-block-separator.section-divider-dashed {
    border-top: 1px dashed var(--text-light);
    margin-top: 0;
    margin-bottom: 24px;
	width: 100% !important;        /* ← 追加：親要素いっぱいに広げる */
    max-width: none !important;    /* ← 追加：デフォルトの幅制限を解除 */
}

/* --------------------------------------------------
   .post_content > .wp-block-group
   --------------------------------------------------
   運用ルール：セクションはグループブロックとして実装し、グループブロック
   同士の間にはデフォルトで余白を持たせない。余白がほしい場合はスペーサー
   ブロックで都度明示的に追加する（通常の段落・見出し・画像等、グループで
   囲んでいないブロックの余白には影響しない）。
   -------------------------------------------------- */
.post_content > .wp-block-group {
    margin-bottom: 0;
}

/* --------------------------------------------------
   .footer-grid（フッター5列グリッド）
   --------------------------------------------------
   フッターの5列グリッド（ロゴ/タグライン＋ABOUT/PRODUCTS/INFO/CONTACT）と
   ダークテーマ配色。全ページ共通のフッターで使用する
   （theme/parts/footer/foot_widget.php・footer_contents.php参照）。
   -------------------------------------------------- */
#footer.l-footer {
    background: #2C2420;
    padding: clamp(52px, 7vw, 80px) clamp(20px, 6vw, 48px) 28px;
}
#footer .l-footer__widgetArea {
    padding: 0;
    margin-bottom: 52px;
}
#footer .l-container.footer-grid {
    max-width: 1200px;
    padding: 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr repeat(4, 1fr);
    gap: 40px;
}
/* タブレット幅：ブランド列を全幅1行にし、リンク4列を2×2で並べる／2026-08-29 */
@media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-grid__brand { grid-column: 1 / -1; }
}
/* スマホ幅：ブランド列を全幅1行にし、リンク4列を2×2で並べる（縦20px・横16px）／2026-08-29 */
@media (max-width: 599px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
    .footer-grid__brand { grid-column: 1 / -1; }
}
.footer-grid__logo {
    display: block;
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    margin-bottom: 18px;
}
.footer-grid__tagline {
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 6px;
}
/* 親テーマ静的CSS（build/css/modules/parts/footer.css）の
   `.l-footer a{color:inherit}`（詳細度0,0,1,1）が、単一クラスの
   `.footer-grid__siteurl`（詳細度0,0,1,0）より優先度が高く上書きされるため、
   `.footer-grid__brand`との組み合わせで詳細度0,0,2,0に引き上げて確実に優先させる */
.footer-grid__brand .footer-grid__siteurl {
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none;
}
.footer-grid__sns {
    margin-top: 22px;
}
.footer-grid__heading {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.36);
    margin-bottom: 16px;
}
.footer-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-grid__list a {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 500;   /* フッターナビ。基本フォント変更後も維持（2026-08-30） */
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none;
    margin-bottom: 11px;
    line-height: 1.4;
}
.footer-grid__list a:hover {
    opacity: 0.7;
}
#footer .l-footer__foot {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}
#footer .l-footer__foot .l-container {
    max-width: 1200px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
#footer .c-iconList__link {
    color: rgba(255, 255, 255, 0.38);
}
#footer .c-iconList__link:hover {
    color: rgba(255, 255, 255, 0.85);
}
#footer .l-footer__nav {
    display: flex;
    gap: 0;
    list-style: none;
}
/* 縦線〜文字の余白を全項目で 16px に統一（親 .l-footer__nav a の padding:0 .75em を上書き。gap は項目間のみに効き非対称になるため 0 に。2026-09-07） */
#footer .l-footer__nav a {
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.28);
    text-decoration: none;
    padding: 0 16px;
}
#footer .copyright {
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------
   ヘッダーナビ（SWELL .c-gnav）：メイン・追従ヘッダー共通
   --------------------------------------------------
   font-size：SWELL既定 14px → 13px（.c-gnav>.menu-item>a .ttl を上書き）
   font-weight：400（CD原本は 500 だが Noto Sans JP 500 が重く見えるため
   K様指示で 400 に。2026-08-31）
   SPドロワー（#sp_menu）は対象外。
   -------------------------------------------------- */
.c-gnav > .menu-item > a .ttl {
    font-size: 13px;
}
.c-gnav a {
    font-weight: 400;
}

/* スマホ開閉メニュー（SWELL #sp_menu）：項目の区切り線・矢印／2026-10-23 */
.p-spMenu .c-spnav a {
    border-bottom-color: color-mix(in srgb, var(--text) 8%, transparent);
}
.p-spMenu .c-listMenu a::before {
    display: none;
}
.p-spMenu .c-listMenu a,
.p-spMenu .c-listMenu a:hover {
    padding-left: .25em;
}

/* #####################################################
   ② 個別クラス（セクション固有）
   ##################################################### */

/* --------------------------------------------------
   NEWS&INFO：.top-news__*
   --------------------------------------------------
   投稿一覧の1行分（日付・カテゴリータグ・タイトルの横並び）。
   -------------------------------------------------- */
.top-news__item {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 24px);
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}
.top-news__date {
    font-size: 11px;
    font-weight: 500;   /* ラベル系。基本フォント変更後も維持（2026-08-30） */
    color: var(--text-mid);
    flex-shrink: 0;
}
.top-news__cat {
    font-size: 9px;
    font-weight: 500;   /* ラベル系。基本フォント変更後も維持（2026-08-30） */
    letter-spacing: 0.1em;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 3px 10px;
    flex-shrink: 0;
}
.top-news__text {
    font-size: 13px;
    color: var(--text);
    font-weight: 300;
    line-height: 1.5;
}
@media (max-width: 599px) {
    .top-news__item { flex-wrap: wrap; gap: 8px; }
    .top-news__text { flex-basis: 100%; }
}

/* --------------------------------------------------
   ABOUT/MESSAGE/GENUINE/STAFF BLOG：.section-card-*（見出し・本文の文字装飾）
   --------------------------------------------------
   （Claude Code により実装, 2026-08-01。旧名.top-sectioncard__title・
   __sub・__labelから改名。フェードイン・画像トリミング・レイアウト等の
   役割は.fade-media-cardへ移行済みのため、旧.top-sectioncard本体
   （外側ラッパー）向けのCSSは削除し、文字装飾のみを担うこれらの
   クラスをこの名前で独立させた。CSS宣言値はリネーム前と一切変更して
   いない）
   -------------------------------------------------- */
.section-card-title {
    font-family: var(--font-heading);
    font-size: clamp(23px, 2.8vw, 34px);
    font-weight: 300;
    color: var(--text);
    line-height: 1.7;
    letter-spacing: 0.04em;
    margin-bottom: 1.2em !important;
    /* 親テーマの.post_content h2{margin:4em 0 2em}／h3{margin:3em 0 2em}
       （詳細度0,0,1,1）に、単一クラスの.section-card-title（詳細度0,0,1,0）
       が部分的に負け、margin-topだけ親テーマ側の値が残っていた。共通パーツは
       ブロック側の個別対応ではなくCSSクラス側に焼き込む方針（u-mb-ctrl撤去時と
       同じ考え方）に従い、margin-topを明示的に0にする（2026-08-14） */
    margin-top: 0 !important;
}
/* 理由は.section-title-compact.is-style-section_ttl（共通クラス側）を参照。
   font-weight/font-sizeを明示しないと親テーマの既定値に負ける */
.section-card-title.is-style-section_ttl {
    color: var(--text);
    font-weight: 300;
    font-size: clamp(23px, 2.8vw, 32px);
    letter-spacing: 0.04em;
}
.section-card-body {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-mid);
    line-height: 2.1;
    margin-bottom: 32px;
}
.section-card-label {
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 300;
    color: var(--text-mid);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------
   SHOP GUIDE：.top-guide__*
   --------------------------------------------------
   3カードグリッド。!importantはWPが自動生成する当該ブロック専用の
   グリッド設定（.wp-container-core-group-is-layout-XXXXX等）に
   勝つため必要。960px以下は1カラムに切り替える。
   -------------------------------------------------- */
.top-guide__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px;
}
.top-guide__card {
    display: block;
    position: relative;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.top-guide__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.top-guide__card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
/* SWELL標準の入れ子グループ既定margin（.wp-block-group__inner-container>*
   {margin-bottom:1em}）を打ち消す。本来は「DOM上最後の子要素」であれば
   親テーマ側で自動的に0になるが、カード全体クリック用の透明リンク
   （.top-guide__card-link）がこの要素の後ろに続くDOM構造のため対象外
   となり、16pxの余白が漏れていた（CD原本の設計には無い余白のため、
   専用クラス側で直接打ち消す。Claude Code により修正, 2026-08-01） */
.top-guide__card-body { padding: 20px 24px; margin-bottom: 0; background: var(--bg); }
/* カード全体をクリック領域にするための透明リンク。
   .top-guide__cardはブロックエディタの検証エラー回避のため
   tagName:"a"をやめ通常のdivに戻したので、代わりにこの見えない
   <a>をカード全体に重ねてクリック領域を維持する
   （aria-labelはスクリーンリーダー向け、視覚的なテキストは無し）。 */
.top-guide__card-link {
    position: absolute;
    /* insetはボーダーボックスではなくパディングボックス基準のため、
       .top-guide__cardの1pxボーダー分を-1pxで補正し、ボーダーの
       外周まで含めてカード全体を確実にクリック領域にする */
    inset: -1px;
    margin: 0;
}
.top-guide__card-link a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.top-guide__card-en {
    font-size: 10px;
    font-weight: 500;   /* ラベル系。基本フォント変更後も維持（2026-08-30） */
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 4px;
}
.top-guide__card-ja {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--text);
    font-weight: 300;
}
@media (max-width: 960px) {
    .top-guide__grid { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------
   AWARD：.top-award__row
   --------------------------------------------------
   受賞ロゴを横並び中央配置するレイアウト。
   -------------------------------------------------- */
.top-award__row {
    display: flex;
    justify-content: center;
    gap: clamp(28px, 5vw, 64px);
    flex-wrap: wrap;
    align-items: center;
    max-width: 620px;
    margin: 0 auto;
}
.top-award__row img {
    height: clamp(72px, 9vw, 104px);
    width: auto;
    object-fit: contain;
    opacity: 0.85;
}

/* --------------------------------------------------
   MEDIA/CUSTOMER REVIEW：.top-carousel*
   --------------------------------------------------
   トラック(.top-carousel__track)をJS（top-page.js）でtranslateXし、
   下部ドット(.top-carousel__dots)で現在位置を示すカルーセル。
   .top-carousel（外側）はalignfullによる画面幅いっぱいの背景表示に加え、
   top-page.jsがカルーセル初期化のルート要素として
   document.querySelectorAll('.top-carousel')で参照するため、
   スタイルの有無に関わらずクラス自体は必須（JSフック用途）。
   .top-carousel__viewport（内側）はWP自動生成ラッパーのさらに内側で、
   横方向のpaddingとoverflow:hidden（スライドのクリッピング）を担当する。
   overflow:hiddenは記事幅（900px）の位置で行う必要があり、.top-carousel
   側（画面幅1280px）で行うとスライド中のカードが記事幅を超えてはみ出す
   ため、2クラスの分離を維持する。
   -------------------------------------------------- */
.top-carousel__viewport {
    padding: 0 clamp(20px, 6vw, 60px);
    overflow: hidden;
}
.top-carousel__track {
    display: flex !important;
    gap: 12px;
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
/* ドラッグ操作時にブラウザ標準の画像／リンクドラッグを抑止（top-page.js の
   dragstart 抑止と対。写真の上でもカルーセルをドラッグできるようにする）／2026-09-02 */
.top-carousel__track img,
.top-carousel__track a {
    -webkit-user-drag: none;
    user-select: none;
}
/* クエリループブロックが自動生成する<div class="wp-block-query">・
   <ul class="wp-block-post-template">・<li>を透過し、カードを直下に
   並べる。!importantはこれらWP自動生成要素の詳細度に勝つため必要 */
.top-carousel__track .wp-block-query,
.top-carousel__track .wp-block-post-template,
.top-carousel__track .wp-block-post-template > li {
    display: contents !important;
}
.top-carousel__card {
    flex: 0 0 calc(25% - 9px);
    text-decoration: none;
    display: block;
}
.top-carousel--review .top-carousel__card {
    flex-basis: calc(33.333% - 8px);
    border: 1px solid var(--border);
    overflow: hidden;
}
.top-carousel__card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.top-carousel--review .top-carousel__card img { aspect-ratio: 4/3; }
.top-carousel__card-text {
    font-size: 12px;
    color: var(--text-mid);
    margin-top: 10px;
    line-height: 1.5;
    font-weight: 300;
}
/* ★評価・満足度バッジの色（2026-09-05。お客様の声 一覧と同じ配色で揃えている） */
.top-carousel__rating-on  { color: #E09A00; font-weight: 500; }
.top-carousel__rating-off { color: #E2DAD1; font-weight: 500; }
.top-carousel__badge {
    display: inline-block;
    padding: 4px 10px;
    color: #55793E;
    background: transparent;
    border: 1px solid #BAD3A5;
    font-weight: 500;
}
.top-carousel--review .top-carousel__card-body { padding: 16px 20px; background: var(--bg); }
.top-carousel--review .top-carousel__card-body > :first-child { margin-top: 0; }
.top-carousel--review .top-carousel__card-name { font-family: var(--font-heading); font-size: 14px; color: var(--text); margin-top: 2px; }
/* CUSTOMER REVIEW：写真の無い投稿はタイトルを4:3の「手紙」の枠に入れる（[voice_carousel]、F案）／2026-11-01 */
.top-carousel--review .top-carousel__card-noimg {
    aspect-ratio: 4 / 3;
    padding: 12px;
    background: #FFFDF9;
    border-bottom: 1px solid var(--border);
}
.top-carousel--review .top-carousel__card-noimg a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 26px;
    border: 1px solid #E6D9CC;
    text-decoration: none;
}
.top-carousel--review .top-carousel__card-noimg a::before {
    content: "\201C";
    position: absolute;
    top: 22px;
    left: 20px;
    font-family: var(--font-heading);
    font-size: 64px;
    line-height: .5;
    color: var(--accent);
    opacity: .35;
}
.top-carousel--review .top-carousel__card-noimg a::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid #EFE5DA;
    pointer-events: none;
}
.top-carousel--review .top-carousel__card-noimg p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: .05em;
    color: var(--text);
    font-weight: 400;
    text-wrap: balance;
    word-break: auto-phrase;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.top-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}
.top-carousel__dot {
    width: 7px;
    height: 2px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: var(--border);
    transition: all 0.3s;
}
.top-carousel__dot.is-active {
    width: 24px;
    background: var(--accent);
}
@media (max-width: 900px) {
    .top-carousel__card { flex-basis: calc(50% - 6px); }
    .top-carousel--review .top-carousel__card { flex-basis: calc(50% - 6px); }
}
@media (max-width: 520px) {
    .top-carousel__card { flex-basis: 100%; }
    .top-carousel--review .top-carousel__card { flex-basis: 100%; }
    .top-carousel--review .top-carousel__card-noimg p { font-size: 14px; }
}

/* --------------------------------------------------
   MEDIA：.top-media-marquee（ロゴ自動流し）
   --------------------------------------------------
   .top-carousel系とは別クラス（JSのカルーセル制御対象外）。
   ロゴ画像を[media_logos]で2セット複製出力し、@keyframesで
   等速に左へ無限ループさせるCSSのみのマーキー（2026-09-19）。
   -------------------------------------------------- */
.top-media-marquee__viewport {
    overflow: hidden;
}
.top-media-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: top-media-marquee-scroll 80s linear infinite;
}
.top-media-marquee__dup {
    display: contents;
}
.top-media-marquee__logo {
    height: clamp(72px, 9vw, 104px);
    width: auto;
    object-fit: contain;
    opacity: 0.85;
    flex: 0 0 auto;
    margin-right: clamp(28px, 5vw, 64px);
}
@keyframes top-media-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .top-media-marquee__track { animation: none; }
}
@media (min-width: 960px) {
    .top-media-marquee__track {
        animation-duration: 120s;
    }
}

/* --------------------------------------------------
   ヒーロー（メインビジュアル）微調整
   --------------------------------------------------
   基本機構（フェード切替・スワイプ・スライドごとのテキスト配置等）は
   SWELL標準の画像スライダーをそのまま使用し、デザイン仕様との差分のみ
   上書きする。.p-mainVisual__brand・__labelはCD原本にあわせて追加した
   要素（theme/parts/top/main_visual-slider.php）。
   -------------------------------------------------- */
/* Ken Burnsズームアウト（SWELL標準はズームインのみ対応のため、
   独自キーフレームで--mv_slide_animationを上書き） */
:root {
    --mv_slide_animation: kbZoomOut !important;
}
@keyframes kbZoomOut {
    0%   { transform: scale(1.06); }
    100% { transform: scale(1); }
}
/* スライドごとの画像表示位置。カスタマイザー slider{N}_objpos / _objpos_sp の値を
   main_visual-slider.php が <picture> に CSS変数として出力する。未設定のスライドは
   変数が無く、object-position はブラウザ既定（中央）のまま。SP の境界（959px）は
   SWELL がスライダーの PC/SP 画像を切り替える幅に揃える（2026-09-08） */
.p-mainVisual__img {
    object-position: var(--mv-objpos, center center);
}
@media (max-width: 959px) {
    .p-mainVisual__img {
        object-position: var(--mv-objpos-sp, var(--mv-objpos, center center));
    }
}
.p-mainVisual__brand {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: #fff;
    opacity: 0.65;
    margin-bottom: 8px;
}
.p-mainVisual__label {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(13px, 1.2vw, 15px);
    /* 500は読み込み済みウェイトのため、太らせずに視認性を上げられる
       （他の値はfaux-boldになる） */
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #DF6433;
    margin-bottom: 18px;
}
/* SWELL標準は5.5vw/固定28pxで、CD原本のclamp(28px,4vw,52px)より小さい */
.p-mainVisual__slideTitle {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 22px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
}
/* バー型スライドインジケーター（SWELL標準は丸ドット固定サイズ） */
.p-mainVisual {
    --swiper-pagination-bullet-width: 14px;
    --swiper-pagination-bullet-height: 2px;
    --swiper-pagination-bullet-inactive-color: rgba(255,255,255,0.38);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-color: #fff;
}
.p-mainVisual .swiper-pagination-bullet {
    border-radius: 2px;
    transition: all 0.35s;
}
.p-mainVisual .swiper-pagination-bullet-active {
    width: 28px;
    height: 3px;
}
.p-mainVisual .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
    background: rgba(255,255,255,0.85);
    height: 3px;
}
/* 「SCROLL」縦書き演出（SWELL標準のscroll_arrowパーツをCSSのみで作り替え） */
.p-mainVisual__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.55;
    bottom: 28px;
    right: clamp(20px, 4vw, 48px);
    left: auto;
    transform: none;
}
.p-mainVisual__scroll::before {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    background: #fff;
    animation: heroScrollGrow 1.8s ease infinite;
}
.p-mainVisual__scrollArrow {
    display: none;
}
.p-mainVisual__scrollLabel {
    font-weight: 400;
    writing-mode: vertical-rl;
    text-transform: uppercase;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: #fff;
}
@keyframes heroScrollGrow {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------------------------
   TOPページ全体：ヒーロー直後／フッター直前の余白調整
   --------------------------------------------------
   [ヒーロー直後] カスタマイザー生成の動的CSS
   （.top #content{padding-top:4em}、詳細度0,1,1,0）はクラスだけの
   上書きでは打ち消せず、また<link>のstyle.cssより後にhead内へ出力される
   保証がないため、同一セレクタ+!importantで確実に上書きする。
   [フッター直前] 親テーマ.l-content{margin:0 auto 6em}のmargin-bottomが
   最後のセクションとフッターの間に余白を作るため、フロントページに
   限定して0にする（通常の固定ページ・投稿には影響させない）。
   -------------------------------------------------- */
.home #content {
    padding-top: 0 !important;
    margin-bottom: 0;
}
.home .l-mainContent__inner > .post_content {
    margin-top: 0;
}

/* =====================================================
   13. お客様の声 一覧ページ（archive-voice.php の一覧 /voice/／CD-07 §3〜§9）
   -----------------------------------------------------
   （Claude Code により実装, 2026-09-03。
   docs/cd-reference/voice-list/CD-07_お客様の声一覧_デザイン仕様.md に基づく。
   Hero（§2）・アウトロ（§10）はブロックエディタで組む。）
   ・一覧（.voice-list）は archive-voice.php が align:full ＋ .no-vpadding-block の
     グループで囲んで出力する（旧固定ページと同じ構成。[voice_list] は 2026-09-26 に廃止）。記事カラム幅（既定 900px）＝そのまま採用し、
     CSS 側で全幅化・背景塗りはしない（記事エリアの背景は body 背景
     #faf8f5 が透過。一覧セクションに背景帯は不要）。
   ・上下 padding は CD-07 §3 の値。左右 padding は付けない
     （.voice-list__item の左端をタイトルエリア左端に揃えるため。2026-09-04）。
   ・写真あり／なしの 2/1 カラム切替は :has(.voice-list__photo) で判定する
     （PHP はモディファイアクラスを付けない）。
   ・★の点灯／消灯色は下の --voice-star-on / --voice-star-off の 2 変数で管理。
     2026-09-05、黄色系（#E09A00／#E2DAD1）に変更（[voice_carousel] の★色も
     同じ値で揃えている）。詳細ページ（single-voice.php）は .voice-single__meta で
     この 2 変数と ★ のクラスをそのまま使っている（2026-09-25）。
   ===================================================== */
.voice-list,
.voice-single__meta {
    --voice-star-on: #E09A00;
    --voice-star-off: #E2DAD1;
}

/* §3 セクション枠：上下 CD-07 §3・左右なし。上パディングを /news/ 一覧に合わせ 64→48px（2026-09-04／2026-09-07） */
.post_content .voice-list {
    padding: clamp(40px, 5vw, 48px) 0 clamp(56px, 7vw, 88px);
}

/* §3 1件ごとの外枠：2件目以降の上に区切り線（1件目の上はタイトルエリア
   下端の全幅線が担うため付けない）。最後の1件の下は余白を詰める。
   「直前に item がある＝先頭以外」で判定（並び順の番号には依存しない）。 */
.voice-list__item {
    padding: clamp(30px, 4vw, 46px) 0;
}
/* 1件目の上余白は .post_content .voice-list の padding-top のみで確保する（2026-09-07） */
.post_content .voice-list__item:first-child {
    padding-top: 0;
}
.voice-list__item ~ .voice-list__item {
    border-top: 1px solid var(--border);
}
.voice-list__item:not(:has(~ .voice-list__item)) {
    padding-bottom: 0;
}

/* §4-A 写真あり：写真＋本文の 2 カラム（カラム幅は §11 で変える） */
.voice-list__item:has(.voice-list__photo) {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: start;
    gap: clamp(20px, 3vw, 36px);
}
.voice-list__photo {
    margin: 0;
}
.voice-list__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* §4 本文セル（写真なしのときはこれ単体で 1 カラム） */
.voice-list__body {
    min-width: 0;
}

/* §5 見出し行（レビューひと言・明朝）。本文行が続くときだけ下余白を持つ */
.voice-list__phrase {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(17px, 2.1vw, 23px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--text);
}
.voice-list__phrase:has(+ .voice-list__summary),
.voice-list__phrase:has(+ .voice-list__rating),
.voice-list__phrase:has(+ .voice-list__badge) {
    margin-bottom: clamp(12px, 1.5vw, 16px);
}
/* ひと言の詳細ページへのリンク：見た目は通常の文字のまま（2026-09-24） */
.voice-list__phrase a {
    color: inherit;
    text-decoration: none;
}

/* §5 本文行（レビュー要約 or 本文抜粋・ゴシック） */
.voice-list__summary {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.4vw, 14.5px);
    font-weight: 300;
    line-height: 2.1;
    letter-spacing: 0.02em;
    color: var(--text);
}

/* §5 フッター行：左＝評価＋署名（縦積み）、右＝全文を読む。下端揃え */
.voice-list__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: clamp(16px, 2vw, 22px);
}
.voice-list__eval {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* §6 評価（星型）：点灯／消灯を色で分ける＋数値ラベル */
.voice-list__rating {
    display: flex;
    align-items: baseline;
    margin: 0;
}
.voice-list__rating-on,
.voice-list__rating-off {
    font-weight: 400;
    font-size: 18px;   /* 2026-09-05、16px→18px（一覧ページのみ。数値ラベルと同じ比率で拡大） */
    letter-spacing: 0.14em;
    line-height: 1;
}
.voice-list__rating-on  { color: var(--voice-star-on); }
.voice-list__rating-off { color: var(--voice-star-off); }
.voice-list__rating-num {
    font-weight: 400;
    margin-left: 5px;
    font-size: 13.5px;   /* 2026-09-05、12px→13.5px（★との比率4:3を維持） */
    letter-spacing: 0.1em;
    color: var(--text-light);
}

/* §6 満足度バッジ（2026-09-05、色を確定値に変更。[voice_carousel] のバッジも同じ配色で
   揃えている。一覧ページはサイズ・太さを1段階強調。詳細ページ（single-voice.php）も、
   この指定をそのまま使っている（2026-09-25）） */
.voice-list__badge {
    width: fit-content;   /* 2026-09-23、要約の前へ移動したため文字幅に合わせる */
    margin: 0;
    padding: 5px 12px;   /* 2026-09-05、4px 10px→5px 12px */
    font-size: 13px;   /* 2026-09-05、12px→13px */
    font-weight: 500;   /* 2026-09-05、未指定（継承400）→500 */
    letter-spacing: 0.16em;
    line-height: 1;
    color: #55793E;
    background: transparent;
    border: 1px solid #BAD3A5;
}
/* 評価（★／バッジ）の下の余白：要約が続くときだけ（2026-09-23） */
.voice-list__rating:has(+ .voice-list__summary),
.voice-list__badge:has(+ .voice-list__summary) {
    margin-bottom: clamp(12px, 1.5vw, 16px);
}

/* §7 署名 */
.voice-list__byline {
    margin: 0;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: var(--text-mid);
}
.voice-list__byline-name {
    font-weight: 400;
    color: var(--text);
}
.voice-list__byline-sep {
    margin: 0 7px;
    font-weight: 400;
    color: var(--text-light);
}

/* §8 「全文を読む →」（詳細ページへの唯一の入口） */
.voice-list__more {
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.voice-list__more:hover {
    opacity: 0.7;
}

/* §9 ページ送り：PHP 側のラッパーを共通クラス .section-pager に統一
   （[cocoraku_list] と共通）。スタイルは style.css「① 共通クラス」の
   .section-pager 参照。この §13 内には持たない（2026-09-06）。 */

/* §11 ブレイクポイント：写真ありカラムの幅（≤959）／縦積み（≤599） */
@media (max-width: 959px) {
    .voice-list__item:has(.voice-list__photo) {
        grid-template-columns: 210px 1fr;
    }
}
@media (max-width: 599px) {
    .voice-list__item:has(.voice-list__photo) {
        grid-template-columns: 1fr;
    }
    /* 縦積みで写真が全幅になるため、元画像（多くは16:9）の上下切れを
       避けて 16/9 で表示する。600px以上は 4/3 のまま */
    .voice-list__photo img {
        aspect-ratio: 16 / 9;
    }
}

/* =====================================================
   14. Aboutページ（ミアミリーの特徴）
   -----------------------------------------------------
   （Claude Code により実装, 2026-08-12）
   固定ページ /about/ 専用。標準機能・既存共通クラス（.fade-media-card・
   .section-eyebrow・.section-card-title・.section-card-body・
   .section-btn等）で組めない要素のみ、機能ベースで新規クラス化した。
   ===================================================== */

/* --------------------------------------------------
   .fade-media-card の比率モディファイア（1クラス1責務）
   --------------------------------------------------
   .fade-media-card本体は「フェードイン＋4:3トリミング」の2責務を
   既に持っており（Topページで稼働中のため変更しない）、本ページで
   必要な比率違いを追加モディファイアとして分離した。フェードイン
   機構（has-media-on-the-rightクラスによる構造非依存の方向判定）は
   そのまま流用する。
   -------------------------------------------------- */
/* 列の高さいっぱいに写真をカバー表示する（固定比率ではなく、CD原本の
   minHeight+object-fit:cover相当）。min-heightの値のみクラスごとに
   異なる（1クラス1責務、img側の共通ルールは3クラスまとめて指定）。
   - .is-ratio-fill：横抱きサポートカード（SEVEN WAYS TO HOLD内）用
   - .is-ratio-fill-tall：体幹セクション用
   - .is-ratio-fill-mid：股関節セクション用 */
.fade-media-card.is-ratio-fill .wp-block-media-text__media {
    position: relative;
    min-height: 320px;
}
.fade-media-card.is-ratio-fill-tall .wp-block-media-text__media {
    position: relative;
    min-height: clamp(380px, 46vw, 620px);
	height: 100%;
}
.fade-media-card.is-ratio-fill-mid .wp-block-media-text__media {
    position: relative;
    min-height: clamp(320px, 42vw, 560px);
	height: 100%;
}
.fade-media-card.is-ratio-fill .wp-block-media-text__media img,
.fade-media-card.is-ratio-fill-tall .wp-block-media-text__media img,
.fade-media-card.is-ratio-fill-mid .wp-block-media-text__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
}
/* 体幹セクションの画像の枠をスマホでは5:6にする／2026-10-23 */
@media (max-width: 600px) {
    .fade-media-card.is-ratio-fill-tall .wp-block-media-text__media {
        min-height: 0;
        height: auto;
        aspect-ratio: 5 / 6;
    }
}

/* --------------------------------------------------
   体幹／股関節セクション共通：.about-note（アクセント罫線つきの補足段落）
   -------------------------------------------------- */
.about-note {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--text-mid);
    line-height: 2.1;
    padding-left: 18px;
    border-left: 2px solid var(--accent);
    margin-bottom: 32px;
}

/* --------------------------------------------------
   .heading-serif（複数ページ・複数箇所で流用する共通クラス）
   --------------------------------------------------
   （2026-08-14、.about-heading-serifから改名。方針文書4-2節「クラス名は
   機能を表す、由来を名前にしない」に合わせ、ページ由来の接頭辞を除去）
   h1・h3等、.section-*-title系のサイズプリセットが対象外の見出しに
   見出し用フォントだけを適用する単機能クラス（サイズ・太さ・行間は
   各ブロックのタイポグラフィ属性側で個別指定する）。h2に使う場合は
   親テーマの見出し装飾リセット対象のため、is-style-section_ttl・
   font-weightの上書きを別途あわせて指定すること。
   複数ページ・複数箇所で流用する共通クラスのため、マージン等は
   ブロック側のu-mb-ctrl・u-mb-N属性に頼らず、このクラス自体に
   焼き込む方針とする（新方針、2026-08-14）。 */
.heading-serif {
    font-family: var(--font-heading);
}
/* 「大見出し」用途（is-style-section_ttlと併用するh2）の下余白。
   親テーマ.post_content h2{margin:4em 0 2em}（詳細度0,0,1,1）に負けない
   よう、is-style-section_ttlとの組み合わせ（詳細度0,0,2,0）で上書きする。
   h3で使う場合（7通りの抱き方のグループ見出し等）はis-style-section_ttl
   を併用しないため、このルールの対象外＝余白なしのまま。
   値は元clamp(28px,4vw,44px)（CD原本のhero.jsxラベル+見出し行の
   marginBottom値）を採用していたが、vwはビューポート全幅基準のため、
   狭い.page-hero__text-col（520px）内では一般的なデスクトップ幅
   （1280px以上）で常に上限44pxに張り付き、中間スケーリングが実質的に
   機能しないことが判明。固定値44pxに変更（2026-08-14、対応1） */
.heading-serif.is-style-section_ttl {
    margin-bottom: 44px;
}
.page-hero__eyebrow {
    display: flex;
    align-items: flex-start;
    /* 元clamp(18px,3vw,32px)。上と同じ理由（狭い列内でvw基準のため
       一般的なデスクトップ幅で常に上限に張り付く）で固定値化
       （2026-08-14、対応1） */
    gap: 32px;
}
.page-hero__eyebrow-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 4px;
}
/* 高さはWP標準のスペーサーブロック自体のheight属性が担うため、
   ここでは幅と色のみを指定する（2026-08-14：空のグループブロックが
   エディタでパターン選択プレースホルダー表示になる問題を受けて、
   スペーサーブロック＋本クラスの組み合わせに変更） */
.page-hero__eyebrow-rule {
    width: 1px;
    background: var(--accent);
}
.page-hero__eyebrow-label {
    font-size: 9.5px;
    letter-spacing: 0.32em;
    color: var(--accent);
    font-weight: 500;
    writing-mode: vertical-rl;
}
/* ページタイトルバー非表示化に伴い、post_title（「ミアミリーの特徴」）を
   意味的なH1として復活させるための小見出しスタイル（2026-08-13）。
   「MIAMILY JAPAN・」の段落と、post_titleのH1の両方に付与し、
   1本の続いたラベルに見せる。色はaccentではなくtextMid（黒系サブカラー）。
   複数ページで流用される想定のため、下余白はブロック側のu-mb-N属性に
   頼らずこのクラス自体に焼き込む（新方針、2026-08-14、指摘2対応） */
.section-eyebrow-hero {
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--text-mid);
    font-weight: 500;
    margin-top: 0;
    /* .section-title-row（layout:"flex"）が実際の表示時にis-rowクラスを
       持つため、親テーマの.wp-block-group.is-row > *, .wp-block-group.
       is-stack > * {margin:0}（詳細度0,0,2,0）に単一クラス（詳細度0,0,1,0）
       では負ける。!importantで確実に上書きする（2026-08-14） */
    margin-bottom: 24px !important;
}
/* 親テーマmain.cssの.post_content h1{font-size:2em}（詳細度0,0,1,1）に
   font-sizeだけ負けるため、WP標準付与クラスとの組み合わせ（詳細度0,0,2,0）
   で確実に上書きする。h1は core/post-title ブロックで実装しているため
   .wp-block-post-title を利用（2026-08-30、全ページ Hero H1 の投稿タイトル
   動的化。旧実装は手書き core/heading ＝ .wp-block-heading だった）。 */
.wp-block-post-title.section-eyebrow-hero {
    font-size: 11px;
}

/* .section-eyebrow-sub：補助的な小ラベル（Hero下部・Story英字ラベル等）／2026-08-23（下余白は行側.message-story__row .section-title-rowへ移動、2026-08-28） */
.section-eyebrow-sub {
    font-size: 9.5px;
    font-weight: 500;   /* ラベル系。基本フォント変更後も維持（2026-08-30） */
    color: var(--text-mid);
    letter-spacing: 0.22em;
}
/* h1（core/post-title）は.section-title-row（is-row）の最後の子でも
   あるため、上記のmargin-bottom:24px !importantだけでは親テーマの
   .post_content div>:last-child {margin-bottom:0!important}
   （詳細度0,0,2,1）にも部分的に負ける（.wp-block-post-title.section-eyebrow-hero
   単体は詳細度0,0,2,0で届かない）。祖先の.section-title-rowを含めた
   3クラスの組み合わせ（詳細度0,0,3,0）で確実に上回らせる（2026-08-14／
   2026-08-30 post-title化に伴いクラス名を更新） */
.section-title-row .wp-block-post-title.section-eyebrow-hero {
    margin-bottom: 24px !important;
}
.page-hero__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
}
/* WPはlayout属性の有無に関わらずグループブロックの中身を
   .wp-block-group__inner-containerで包む（layout属性を外しても
   ラッパー自体は消えない、is-layout-*クラスが付かなくなるだけと
   実機検証で確認済み）。このラッパーに高さ0（auto）のままだと、
   直下画像のheight:100%が親のaspect-ratioまで届かず、画像が箱の
   高さいっぱいに伸びない。ラッパーにも高さを明示的に伝える */
.page-hero__portrait > .wp-block-group__inner-container {
    height: 100%;
}
/* 画像ブロックの.wp-block-image（figure）も高さ0(auto)のままだと
   同じ理由でheight:100%の連鎖がここで途切れるため、あわせて伝える */
.page-hero__portrait .wp-block-image {
    height: 100%;
}
.page-hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-hero__portrait::after {
    content: "";
    position: absolute;
    inset: -12px;
    border: 1px solid var(--border);
    pointer-events: none;
}
.page-hero__portrait-label {
    position: absolute;
    right: -44px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 10px;
    letter-spacing: 0.5em;
    color: var(--text-mid);
    font-weight: 500;
    white-space: nowrap;
}
/* Heroのテキスト列・画像列（wp:columns、59%/41%）は、WPコア標準では
   781px以下でのみ縦積みに切り替わる。782〜960px（タブレット幅）では
   横並びのまま列幅（%指定）どおりに縮み続けるため、画像列が極端に
   狭くなっていた。サイト内の他セクション（Comfort・Design・Functions）
   と同じ960pxブレークポイントで先に縦積みへ切り替え、この区間を無くす。
   .page-hero__portraitはAbout・Products共通の部品（.page-hero__*）の
   ため、この変更は両ページのHeroに影響する。画像の最大幅はCD原本
   （hero.jsの画像列maxWidth値）に合わせ520pxで中央配置する
   （2026-08-18） */
@media (max-width: 960px) {
    .wp-block-columns:has(> .wp-block-column .page-hero__portrait) {
        flex-direction: column;
    }
    .wp-block-columns:has(> .wp-block-column .page-hero__portrait) > .wp-block-column {
        flex-basis: 100% !important;
    }
    /* margin-leftのみ指定（margin-rightは指定しない）。CD原本
       （hero.js）の画像列指定どおり：960px以下でコンテナ幅が520pxを
       上回る間はmargin-left:autoが左側にだけ余白を吸収し右寄せに見え、
       コンテナ幅が520pxまで縮むとmargin-left:autoが0に収束して余白が
       消え、それ以降は画像自体がコンテナ幅に合わせて縮小するため、
       結果的に中央のまま縮んで見える。margin-right:autoも指定すると
       常に中央寄せになってしまいこの動きが再現できない
       （2026-08-18、margin-right:auto除去で修正） */
    .page-hero__portrait {
        max-width: 520px;
        margin-left: auto;
    }
}

/* --------------------------------------------------
   .page-hero__brand-label
   --------------------------------------------------
   Hero内の「ブランド名＋区切り線＋小ラベル」行（MiaMily JAPAN・
   CORE CARRIER等）の共通フォント設定。.has-rule-after内の各<p>に
   付与して使う。複数ページ共通のHero部品群の一員（.page-hero__*）。
   -------------------------------------------------- */
.page-hero__brand-label {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 22px);
    font-weight: 300;
    letter-spacing: 0.06em;
    margin: 0;
}
@media (max-width: 599px) {
    .page-hero__brand-label {
        font-size: 17px;
    }
}

/* --------------------------------------------------
   5つの理由：.about-reasons__*
   -------------------------------------------------- */
.about-reasons__pill {
    display: inline-flex;
    align-items: center;
	justify-content: center;    /* ← 追加：中身を中央寄せ */
    gap: 10px;
    padding: 12px 20px;
	min-width: 160px;           /* ← 追加：最小幅を揃える */
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
}
.about-reasons__pill-no {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--accent);
    font-weight: 400;
}
.about-reasons__pill-label {
    font-size: clamp(12px, 1.3vw, 13.5px);
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.about-reasons__no {
    font-family: var(--font-heading);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 300;
    color: var(--accent);
    line-height: 1;
}

/* カード先頭の「01」＋「横線／EN ラベル」の横並び行（CD原本
   reasons.jsx 70〜79行目に対応、2026-08-14、カード01のみ先行実装） */
.about-reasons__card-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}
.about-reasons__label-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.about-reasons__label-rule {
    width: 28px;
    background: var(--accent);
}
/* 見出し直前のリード文（CD原本 reasons.jsx 83〜84行目のr.lead、
   2026-08-14、カード01のみ先行実装） */
.about-reasons__lead {
    font-weight: 400;
    font-size: clamp(12px, 1.3vw, 14px);
    color: var(--text-mid);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
/* 見出し下・本文上の飾り線（CD原本 reasons.jsx 90行目、
   2026-08-14、カード01のみ先行実装） */
.about-reasons__body-rule {
    width: 36px;
    background: var(--border);
    margin-bottom: 22px;
}
/* --------------------------------------------------
   .about-reasons__card（.fade-media-cardからの分離、2026-08-14）
   --------------------------------------------------
   Topページの.fade-media-card（カード4枚：4:3比率・8%padding・
   ボタン付き・画像/テキスト個別収束フェード）とAboutページ
   「5つの理由」カード（6:5比率・CD原本固有のpadding・番号/リード文/
   飾り線・カード単位フェード）は、方針検討の結果、当初から
   実質的に別物と判断し分離した。Topページの.fade-media-card本体は
   一切変更していない。
   フェードインは、既存の.fade-media-card同様
   has-media-on-the-rightクラスの有無（mediaPosition:"right"属性の
   有無、並び順や階層に依存しない）で方向を自動判定するが、画像・
   テキストを個別に収束させるのではなく、カード全体を1つの塊として
   動かす点が異なる（方針文書4-1節に準拠）。
   2026-08-15：style.cssの巻き戻り事故により本ブロックが一時消失、
   復元した。 */
.about-reasons__card {
    overflow: hidden;
    scroll-margin-top: 90px;
    background: var(--bg);
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.about-reasons__card:not(.has-media-on-the-right) {
    transform: translateX(-32px);
}
.about-reasons__card.has-media-on-the-right {
    transform: translateX(32px);
}
.about-reasons__card.is-visible {
    opacity: 1;
    transform: none;
}
.about-reasons__card .wp-block-media-text__media img {
    aspect-ratio: 6 / 5;
    object-fit: cover;
}
/* CD原本 reasons.jsx 68行目のpadding値をそのまま採用
   （.fade-media-cardの8%固定値とは別物のため個別に持たせる） */
.about-reasons__card .wp-block-media-text__content {
    padding: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 64px);
}

/* --------------------------------------------------
   体幹で支える：.about-ribbon-label（クリップパスのリボン見出し）
   -------------------------------------------------- */
.about-ribbon-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(18px, 2.3vw, 30px);
    color: #fff;
    letter-spacing: 0.08em;
    background: var(--accent);
    padding: 15px clamp(38px, 5vw, 64px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
}

/* --------------------------------------------------
   体幹で支える：.about-posture__compare-item（脊柱比較の2枚組）
   --------------------------------------------------
   良否の判定はnth-child等の並び順ではなく、.is-good／.is-badという
   意味を表すクラスの有無のみを基準にする（構造非依存の原則）。
   -------------------------------------------------- */
.about-posture__compare-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid var(--border);
}
.about-posture__compare-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-posture__compare-item.is-good {
    border-color: var(--accent);
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------
   7通りの抱き方：.about-positions__card
   --------------------------------------------------
   画像＋ラベルはWP標準のカバー画像ブロックの標準機能（背景画像／
   コンテンツ位置＝左下／文字色）で実現し、このクラスでは3:4比率
   のみを担う。
   -------------------------------------------------- */
.about-positions__card {
    aspect-ratio: 3 / 4;
}
.about-positions__card.wp-block-cover {
    /* SWELL/WP標準のカバー画像は高さ基準のため、比率適用時は
       min-heightではなくaspect-ratioが優先されるよう明示する */
    min-height: 0;
}

/* テキストカラムの最大幅。CD原本（hero.jsx）は520pxだったが、
   Products側の見出しが折り返れる問題のため550pxに調整（2026-08-17）。
   Aboutページとも共有しているクラスのため、変更時は両ページの見た目を確認すること。 */
.page-hero__text-col {
    max-width: 550px;
    padding-left: clamp(0px, 3vw, 44px);
}
/* --------------------------------------------------
   保存データのブロックバリデーション不整合の是正（2026-08-13）
   --------------------------------------------------
   グループブロックのlayout:{"type":"flex"}指定について、当初は
   WPが表示時に動的付与するクラス（is-layout-flex等）・インライン
   styleを保存データ側に直書きしてしまっていた（Topページの実績
   パターンと不一致、Gutenbergのブロックバリデーションエラーの
   直接原因と判明）。正しくは、保存データ側は独自クラス名のみを
   持たせ、実際の表示（display:flex等）はこちらの個別クラス側で
   担う（Topページの.section-head-row等と同じ考え方）。
   -------------------------------------------------- */
/* .section-title-row（複数ページ・複数箇所で流用する共通クラス、
   2026-08-14に.about-hero__title-rowから改名）
   ラベルと見出しをベースライン揃えで横並びにする行 */
.section-title-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
/* 横線を持つ行（.has-rule-after を含む＝パターンB：Story章の
   「01 ── THE BIRTH」等）だけ gap を 16px にする。Hero部の
   「MIAMILY JAPAN・」＋ページタイトル（パターンA、横線なし）は
   対象外のため 2px のまま（2026-09-11） */
.section-title-row:has(.has-rule-after) {
    gap: 16px;
}
/* .section-eyebrowと同じ理由・同じ強さで、直後要素のmargin-topを
   このクラス自体で打ち消す（2026-08-14、u-mb-ctrl撤去に伴う対応） */
.section-title-row + * {
    margin-top: 0 !important;
}
/* Story章（製品への想い）の見出し行のみ下余白を持たせる。.section-eyebrow-sub自身のmargin-bottomは親テーマの:last-childリセットに負けるため行側で担う／2026-08-28 */
.message-story__row .section-title-row {
    margin-bottom: 36px;
}
/* 親テーマの.post_content .is-style-section_ttlリセット（詳細度0,0,2,0）に
   単一クラスでは負けるため、is-style-section_ttlとの組み合わせで確実に
   上書きする（他のsection-*-title系クラスと同じ考え方）。
   下余白は.heading-serif.is-style-section_ttlの汎用値（大見出し用）を
   このリード行専用に上書きする（CD原本のリード行marginBottom値を踏襲、
   詳細度が同点のため、こちらを後方に配置して優先させる） */
.about-hero__lead.is-style-section_ttl {
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
/* .section-eyebrow・.section-title-rowと同じ理由・同じ強さで、直後要素
   （大見出し）のmargin-topをこのクラス自体で打ち消す
   （2026-08-14、u-mb-ctrl撤去に伴う対応） */
.heading-serif.about-hero__lead.is-style-section_ttl + * {
    margin-top: 0 !important;
}
.about-reasons__pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.about-ribbon-row {
    display: flex;
    justify-content: center;
}
.about-positions__group-head {
    display: flex;
    align-items: center;
    gap: 18px;
}
.about-positions__cradle {
    background-color: #F0EAE3;
}
/* wp-block-buttonsはWP標準で常時display:flexのため、中央寄せのみ
   このクラスで補う（display:flex自体は独自に持たせない） */
.section-btn-row {
    justify-content: center;
}

/* --------------------------------------------------
   .feature-group（Products専用共通コンポーネント）
   --------------------------------------------------
   縦書きタイトル＋画像＋項目リストを横並びにするセクション構造。
   Comfort・Designセクションで共通使用。960px以下は縦積みに変形。
   .feature-group・.feature-group__itemsは意図的にlayout:flexを持たせず
   （＝post_content側もlayout属性なしの素のwp:group）、自動生成される
   .wp-block-group__inner-container側をflexコンテナにしている。理由：
   親テーマ（lib/gutenberg.php）はlayout:flexのグループをレンダリングする際、
   'class="wp-block-group'という文字列をブロック全体（ネストした子ブロックの
   HTML含む）に対してstr_replaceで置換して is-row クラスを付与する実装のため、
   layout:flexのグループの中にwp:groupが入れ子になっていると、内側の
   グループ（およびその.wp-block-group__inner-container）にも意図せず
   is-row（.wp-block-group.is-row{display:flex}）が付与されてしまい、
   本来ブロック積みにしたい要素まで横並びのflexアイテムとして扱われ
   レイアウトが崩れる（2026-08-17判明）。子にwp:groupを持たない
   .feature-group__vtitle・.feature-group__media・.feature-group__item-head
   はこの問題の影響を受けないためlayout:flexのままで問題ない。
   実装：Claude Code、2026-08-17
   -------------------------------------------------- */
.feature-group > .wp-block-group__inner-container {
    display: flex;
    align-items: stretch;
    gap: clamp(22px, 3vw, 44px);
}
@media (max-width: 960px) {
    .feature-group > .wp-block-group__inner-container { flex-direction: column; }
}
/* flex-wrapは.section-eyebrowを直下に持つ場合のみ有効化する（:hasでスコープ
   限定）。eyebrowだけを単独行にするために必要。Comfort・Design・Functions
   いずれもeyebrowを直下に持つため対象になる（2026-08-19、Functions見出し
   エリアをComfort/Design方式に統一した際にFunctionsも対象化） */
.feature-group > .wp-block-group__inner-container:has(> .section-eyebrow) {
    flex-wrap: wrap;
}
/* eyebrow：.feature-group直下では常に単独行にする。margin-bottomは
   行間gap（上記clamp(22px,3vw,44px)）と二重にならないよう0にリセット
   （.section-eyebrow自体の既定値20pxを打ち消す）。.section-eyebrow自体は
   サイト内の他ページ・他セクションでも使う汎用クラスのため直接変更せず、
   .feature-group内限定のこのセレクタで対応する */
.feature-group > .wp-block-group__inner-container > .section-eyebrow {
    flex-basis: 100%;
    margin-bottom: 0;
}
/* PC（960px超）時のみ、eyebrowと見出し・画像・items行との間に追加の余白を
   設ける（K様のご依頼、2026-08-19）。960px以下は列積みのため上記gapのみで
   十分な余白があり、対象外とする。
   ※960px以下は列積みのためこの余白は不要。この @media は同セクションの
   @media (max-width: 960px)（feature-group の列積み切替。5箇所）の補集合として
   961px を使用（意図的。SWELL標準の 959/960 とは別の「≤960 / >960」慣用） */
@media (min-width: 961px) {
    .feature-group > .wp-block-group__inner-container > .section-eyebrow {
        margin-bottom: 14px;
    }
}
/* 概要文：PCでは非表示、960px以下でのみ表示。.section-card-bodyは
   サイト内の他箇所（.feature-group__item内の説明文等）でも使う汎用クラス
   のため、.feature-group直下の子要素に限定してスコープする */
.feature-group > .wp-block-group__inner-container > .section-card-body {
    display: none;
}
@media (max-width: 960px) {
    .feature-group > .wp-block-group__inner-container > .section-card-body {
        display: block;
    }
}
/* --------------------------------------------------
   .feature-group__vtitle-text
   --------------------------------------------------
   縦書きタイトル。Comfort・Design・Functionsの3セクション共通で、h2が
   .feature-group直下のフレックス子要素として直接使われる（箱としての
   見た目＝背景・padding・flex-shrinkもこの要素自身が持つ）。以前は
   Functionsのみ.feature-group__vtitleというdivでh2を包んでいたが、
   Comfort・Design同様のdiv階層なし構成に統一したため.feature-group__vtitle
   自体は廃止（2026-08-19、Functions見出しエリアをComfort/Design方式に統一） */
.feature-group__vtitle-text {
    flex-shrink: 0;
    background: var(--text-light);
    padding: clamp(30px, 3.5vw, 48px) clamp(10px, 1.1vw, 16px);
    font-family: var(--font-heading);
    writing-mode: vertical-rl;
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.26em;
    line-height: 1.3;
    margin: 0;
}
/* 親テーマmain.cssの.post_content .is-style-section_ttl{background:none;
   padding:0;...}（詳細度0,2,0）が、単一クラスの.feature-group__vtitle-text
   側のbackground・padding指定（詳細度0,1,0）に競り勝ってしまい、縦書き
   ボックスの背景色・paddingが消える不具合が発生していた（2026-08-19、
   K様の実機確認で発覚）。他のsection-*-title系クラスと同じ考え方で、
   is-style-section_ttlとの組み合わせ（詳細度0,0,2,0、同点だが後方詳細で
   親テーマに競り勝つ）でbackground・paddingも含めて確実に再指定する */
.feature-group__vtitle-text.is-style-section_ttl {
    background: var(--text-light);
    padding: clamp(30px, 3.5vw, 48px) clamp(10px, 1.1vw, 16px);
    color: #fff;
    font-weight: 400;
    font-size: clamp(22px, 2.3vw, 30px);
    letter-spacing: 0.26em;
    /* 親テーマ.post_content h2のmargin-bottom:2emを打ち消し帯下端を右列と揃える（960px以下は後方の@mediaが16pxへ上書き）／2026-08-29 */
    margin-bottom: 0;
}
/* --------------------------------------------------
   .feature-group__image
   --------------------------------------------------
   Comfort・Design専用の画像。PCでは42%幅で行内配置、960px以下では全幅
   （旧.feature-group__media・.feature-group__mobile-imageを統合）
   実装：Claude Code、2026-08-19 -------------------------------------------------- */
.feature-group__image {
    flex: 0 0 42%;
    margin: 0;
}
.feature-group__image img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 960px) {
    .feature-group__image {
        flex-basis: auto;
        margin-bottom: clamp(28px, 5vw, 40px);
    }
}
.feature-group__items {
    flex: 1;
}
.feature-group__items > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: clamp(24px, 3vw, 40px);
}
/* 親テーマの.wp-block-group__inner-container > *{margin-bottom:1em}
   （汎用の子要素間余白ルール）が、.wp-block-group__inner-containerの
   直接の子である.feature-group__itemにも適用されてしまい、上記gapに
   1em分（実測15px、960px以下のカード化で発覚）が余計に加算されていた。
   項目間の余白は.feature-group__items側のgapのみで担う設計のため、
   打ち消す（2026-08-17） */
.feature-group__item {
    margin-bottom: 0;
}
.feature-group__item-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
}
/* Gutenbergエディタで保存し直されるたびに、post_content側のこのスペーサー
   ブロックにwidth:"0px"やstyle.layout.flexSize等の余分な属性が自動付与され、
   正方形表示に戻る不具合が繰り返し発生した（2026-08-17・2026-08-18判明）。
   2026-08-18にwidth:3px !importantのみで恒久対策したつもりだったが、
   .feature-group__item-headがdisplay:flex（横方向）のため、flexSize由来の
   block-supports生成CSS（flex-basis:24px相当）がflexboxの主軸サイズ決定で
   widthより優先され、依然として24px四方の正方形になっていた
   （2026-08-19、K様のブロックエディタでの保存後に再発・実測で発覚）。
   width・flex-basis・flex-grow・flex-shrinkの全てを!importantで固定し、
   post_content側を都度修正する対症療法ではなくCSS側で確実に幅を強制する */
.feature-group__item-bar {
    width: 3px !important;
    flex: 0 0 3px !important;
    background: var(--accent);
}
.feature-group__item-title {
    font-weight: 400;
    font-family: var(--font-heading);
    font-size: clamp(19px, 2vw, 27px);
    color: var(--accent);
    letter-spacing: 0.05em;
    margin: 0;
}
.feature-group__item-rule.wp-block-separator {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 15px;
    width: 100% !important;
    max-width: none !important;
}
/* 960px以下（.feature-groupがflex-direction:columnに変わるブレークポイントと
   同じ）：縦書きタイトルボックスを横書き中央に切り替える。背景・padding・
   flex-shrinkを外し、文字色・フォントサイズ・字間も横書き用に変更する
   （2026-08-19、Comfort・Design再構築に合わせて.feature-group__title案の
   960px以下スタイルを.feature-group__vtitle-textに統合）。Functions
   セクションも同じクラスのため同様に横書き中央へ切り替わる（意図した挙動、
   ご確認済み）。以前は599px以下のみでの切り替えだったが、ボックス自体は
   960px以下で既にflex-direction:columnにより全幅の横長バーに変形するため、
   600〜960px（タブレット幅）では「横長バーの中に縦書きの細い文字列」という
   見た目になっていた問題を2026-08-18に960pxへ統一済み。font-sizeは
   .section-title-large（既存クラス、同じくらいのサイズ感で使用中）の
   font-size値に合わせている（K様のご依頼、2026-08-19。.section-title-large
   自体は変更しない） */
@media (max-width: 960px) {
    .feature-group__vtitle-text,
    .feature-group__vtitle-text.is-style-section_ttl {
        flex-shrink: unset;
        background: none;
        padding: 0;
        writing-mode: horizontal-tb;
        font-size: clamp(25px, 3.6vw, 45px);
        font-weight: 300;
        color: var(--text);
        letter-spacing: 0.05em;
        margin-bottom: 16px;
        text-align: center;
    }
}
/* 960px以下（.feature-groupがflex-direction:columnに変わるブレークポイントと
   同じ）：CD原本のfg-mobile仕様（items.map()内の各カード）に合わせ、
   項目（.feature-group__item）をカード形式にする。背景色・枠線色は
   CD原本のSerenityテーマトークン（t.bgAlt・t.border）と完全一致する
   既存CSS変数（--bg-alt・--border）を使用。角の丸みはCD原本のt.radius
   （Serenityテーマは0）およびサイト全体の方針に合わせborder-radius:0。
   区切り線（.feature-group__item-rule）はCD原本のモバイル版に存在しない
   ため非表示にする。項目間gapもCD原本のfg-mobile値（16px）に合わせる */
@media (max-width: 960px) {
    .feature-group__items > .wp-block-group__inner-container {
        gap: 16px;
    }
    .feature-group__item {
        background: var(--bg-alt);
        border: 1px solid var(--border);
        border-radius: 0;
        padding: 22px 24px;
    }
    .feature-group__item-rule {
        display: none;
    }
    /* CD原本はカード背景をbg?t.bg:t.bgAlt（セクション自体に背景色指定が
       あればカードは--bg、無ければ--bg-alt）で切り替えており、セクションと
       カードの背景色が同化しないようにしている。WPが背景色指定ブロックに
       自動付与する.has-backgroundクラスを目印に、祖先に.has-backgroundが
       あるセクション（Design等）内のカードのみ--bgに切り替える
       （2026-08-17、Design実装時に対応） */
    .wp-block-group.has-background .feature-group__item {
        background: var(--bg);
    }
}

/* --------------------------------------------------
   .func-*（Functions専用コンポーネント：便利な機能）
   --------------------------------------------------
   丸画像＋タイトル＋説明文の行・2列グリッド・注目ボックス・バッジ群。
   外側の行（縦書きタイトル＋コンテンツ列）は.feature-groupをそのまま
   流用する（960px以下で縦積みになる仕様も継承）。
   .func-content・.func-item は内側にwp:groupを持つため、layout:flexを
   直接持たせず（親テーマの一括is-row付与がネストしたグループにも
   波及してレイアウトが崩れるため）、代わりに自動生成される
   .wp-block-group__inner-container側をflexコンテナにする
   （.feature-group / .feature-group__itemsと同じ考え方）。
   .func-badgesは子がwp:paragraphのみでこの問題が起きないため、
   layout:flexをそのまま使用する。
   実装：Claude Code、2026-08-17
   -------------------------------------------------- */
/* flex-basis:0%を含むflex:1（.feature-group__itemsと同じ考え方）に加えて
   min-width:0が必要。flexアイテムはflex-basis:0%でもmin-width:auto
   （既定値）により中身のcontent本来の最小幅（min-content、丸画像や
   グリッドを含むfunc-contentの場合は相応に大きい）に下限を張られ、
   flex-wrapを持つ親では折り返し判定がその下限幅で行われてしまう
   （flex:1だけでは折り返しが解消しなかったため追加、2026-08-19。
   Functions見出しエリアをComfort/Design方式に統一しeyebrowが増えて
   flex-wrapの対象になった際に発覚） */
.func-content {
    flex: 1;
    min-width: 0;
}
.func-content > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.5vw, 48px);
}
.func-highlight {
    background: var(--bg-alt);
    border-radius: 20px;
    padding: clamp(28px, 3vw, 40px);
}
.func-item > .wp-block-group__inner-container {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 24px);
}
.func-item.is-featured > .wp-block-group__inner-container {
    align-items: center;
}
.func-item__image {
    flex-shrink: 0;
    width: clamp(96px, 9vw, 128px);
    height: clamp(96px, 9vw, 128px);
    border-radius: 50%;
    overflow: hidden;
}
.func-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.func-item.is-featured .func-item__image {
    width: clamp(132px, 13vw, 184px);
    height: clamp(132px, 13vw, 184px);
}
.func-item__body {
    flex: 1;
}
.func-item__title {
    font-weight: 400;
    margin: 0 0 12px;
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.4;
    letter-spacing: 0.03em;
}
.func-item.is-featured .func-item__title {
    font-weight: 400;
    margin-bottom: 14px;
    font-size: clamp(20px, 2.4vw, 28px);
}
.func-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 3.5vw, 56px) clamp(28px, 3.5vw, 48px);
}
/* 列数を幅ごとに固定するためgridを使用（2026-08-18、flexのwrap任せだと
   バッジごとの文字数で折り返し位置が不安定になるため変更）。
   PC:6列×1行／960px以下:3列×2行／599px以下:2列×3行。
   .func-badges自体はlayout:flexを持つグループのため、親テーマが自動付与
   する.is-rowクラス（.wp-block-group.is-row{display:flex}、詳細度0,2,0）
   が単一クラスの.func-badges{display:grid}（詳細度0,1,0）に勝ってしまう。
   他の.feature-group等と同じく、自動生成される
   .wp-block-group__inner-container側にgridを適用して回避する */
.func-badges {
    padding-top: clamp(40px, 5vw, 56px);
    border-top: 1px solid var(--border);
}
.func-badges > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(12px, 1.4vw, 18px);
}
.func-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: clamp(92px, 9vw, 104px);
    margin: 0;
    font-size: clamp(12.5px, 1.3vw, 14px);
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    background: var(--bg);
    text-align: center;
    border: 1px solid var(--text-light);
    border-radius: 14px;
    box-sizing: border-box;
}
@media (max-width: 960px) {
    .func-content > .wp-block-group__inner-container {
        gap: 26px;
    }
    .func-highlight {
        border-radius: 16px;
        padding: 22px;
    }
    .func-grid > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
        gap: 26px;
    }
    .func-item__image {
        width: 84px;
        height: 84px;
    }
    .func-item.is-featured .func-item__image {
        width: 104px;
        height: 104px;
    }
    .func-badges > .wp-block-group__inner-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 599px) {
    .func-badges > .wp-block-group__inner-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------
   .color-item__image
   --------------------------------------------------
   Products COLORSセクション専用。縦長2:3トリミング、containで全体を収める
   （.fade-media-card等の4:3/coverとは異なる仕様のため新規）。
   -------------------------------------------------- */
.color-item__image img {
    aspect-ratio: 2/3;
    object-fit: contain;
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------
   .color-item__swatch
   --------------------------------------------------
   カラー見本の丸インジケーター（13px円）。色自体はブロックエディタの
   背景色設定（カスタムカラー）で個別指定するため、このクラスには持たせない。
   flex-basis等はGutenberg保存時の自動付与（.feature-group__item-barと同じ
   既知の挙動）に対して確実に固定するため!importantを付与する。
   padding:0は、親テーマのdiv.has-background{padding:var(--swl-box_padding)}
   （div.alignfullのコメント参照）がこのクラスにも作用するため、実レンダリング
   確認で判明した打ち消し（2026-08-20、do_blocks()による実HTML検証で発見）。
   -------------------------------------------------- */
.color-item__swatch {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
    padding: 0 !important;
    border-radius: 50%;
    border: 1px solid var(--border);
}

/* --------------------------------------------------
   .color-item__name
   --------------------------------------------------
   カラー英字名のフォント指定のみ。
   -------------------------------------------------- */
.color-item__name {
    font-weight: 400;
    font-family: var(--font-heading);
    font-size: clamp(16px, 1.8vw, 20px);
    color: var(--text);
    letter-spacing: 0.04em;
}

/* --------------------------------------------------
   .color-item__label
   --------------------------------------------------
   カラー日本語ラベルのフォント指定のみ。
   -------------------------------------------------- */
.color-item__label {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--text-mid);
}


/* --------------------------------------------------
   .option-item
   --------------------------------------------------
   Products OPTIONSセクション専用。カード外枠（枠線・角丸0・はみ出し
   トリミング）のみを担当。
   -------------------------------------------------- */
.option-item {
    border: 1px solid var(--border);
    overflow: hidden;
    border-radius: 0;
}

/* --------------------------------------------------
   .option-item__image
   --------------------------------------------------
   Products OPTIONSセクション専用。3:2トリミング、coverで全体を覆う
   （.color-item__imageの2:3/containとは異なる仕様のため別クラス）。
   -------------------------------------------------- */
.option-item__image img {
    aspect-ratio: 3/2;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------
   .option-item__title
   --------------------------------------------------
   オプション名（h3）のフォント指定のみ。
   -------------------------------------------------- */
.option-item__title {
    font-family: var(--font-heading);
    font-size: clamp(17px, 1.9vw, 21px);
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.03em;
    margin: 0 0 12px;
}




/* --------------------------------------------------
   .spec-table
   --------------------------------------------------
   製品仕様表（Products）／2026-08-21
   -------------------------------------------------- */

.spec-table table {
    border-top: 1px solid var(--text);
}
.spec-table td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 20px 8px;
	vertical-align: middle;
}
.spec-table.wp-block-table table tr > td:first-child {
    width: 20%;
    font-weight: 500;
    letter-spacing: 0.06em;
}
@media (max-width: 599px) {
    .spec-table.wp-block-table table tr > td:first-child {
        width: 30%;
    }
}
.spec-table td:nth-child(2) {
    color: var(--text-mid);
    line-height: 2;
}

/* --------------------------------------------------
   .spec-cert-row
   --------------------------------------------------
   Products SAFETY & TRUSTセクション専用。認証カード1件分（画像＋
   テキスト列の横並び・枠線・角丸0）と、直下画像のサイズをまとめて
   担当する。背景色はCSSに持たせず、ブロックエディタの背景色設定
   （インラインstyle、#F0EAE3=--bg-alt）で持たせる方針のため、
   親テーマのdiv.has-background{padding:var(--swl-box_padding)}
   （div.alignfullのコメント参照）がこのクラスにも作用する。
   paddingに!importantを付与して打ち消す。
   -------------------------------------------------- */
.spec-cert-row {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    border: 1px solid var(--border);
    padding: clamp(24px, 3.5vw, 40px) !important;
    border-radius: 0;
}
.spec-cert-row img {
    width: clamp(96px, 14vw, 140px);
    height: auto;
    flex-shrink: 0;
    display: block;
}

/* --------------------------------------------------
   .spec-cert-title
   --------------------------------------------------
   認証カードの見出し（h3）フォントのみ。
   -------------------------------------------------- */
.spec-cert-title {
    font-family: var(--font-heading);
    font-size: clamp(17px, 1.9vw, 22px);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin: 0 0 14px;
}


/* --------------------------------------------------

   .cta-rule
   --------------------------------------------------
   Products CTA ／2026-08-21
   -------------------------------------------------- */

.cta-rule {
    width: 1px;
    background: var(--accent);
    margin-left: auto;
    margin-right: auto;
}
.section-btn.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

/* .message-intro__frame：全幅画像の21:8トリミング＋下端グラデーション（製品への想い Intro）／2026-08-23 */
.message-intro__frame {
    position: relative;
    aspect-ratio: 21/8;
    overflow: hidden;
}
.message-intro__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
}
.message-intro__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, #FAF8F5F2 100%);
    pointer-events: none;
}

/* .message-intro__caption：画像左下の縦書きキャプション（製品への想い Intro）／2026-08-23 */
.message-intro__caption {
    position: absolute;
    left: clamp(20px, 4vw, 44px);
    bottom: clamp(18px, 3vw, 30px);
    writing-mode: vertical-rl;
    font-size: 10px;
    letter-spacing: 0.42em;
    color: var(--text-mid);
    font-weight: 500;
}

/* .message-story__row：Story章の画像+テキスト2カラム、is-rightで反転（製品への想い Story）／2026-08-23、flex構成へ復元・is-flip→is-right統一2026-08-24 */
.message-story__row {
    display: flex;
    align-items: center;
    gap: clamp(40px, 7vw, 100px);
}
.message-story__row .page-hero__portrait {
    flex: 1 1 0;
    min-width: 0;
}
.message-story__row .page-hero__text-col {
    flex: 0 1 550px;
    min-width: 0;
    padding-left: 0;
}
.message-story__row.is-right {
    flex-direction: row-reverse;
}
.message-story__row img {
    object-position: center 30%;
}
.message-story__row.is-right img {
    object-position: center 35%;
}
@media (max-width: 960px) {
    .message-story__row,
    .message-story__row.is-right {
        flex-direction: column;
    }
    .message-story__row .page-hero__portrait,
    .message-story__row .page-hero__text-col {
        flex: 1 1 auto;
    }
}

/* .message-story__number：画像上の大きな章番号、.page-hero__portrait内に画像と並べて配置（製品への想い Story）／2026-08-23、z-index修正2026-08-23、既存2カラム構成への切り替えに伴いセレクタ整理2026-08-24 */
.message-story__number {
    position: absolute;
    top: -30px;
    left: -14px;
    font-family: var(--font-heading);
    font-size: clamp(56px, 7vw, 104px);
    font-weight: 300;
    line-height: 1;
    color: var(--accent-soft); /* #F4E4DC を変数化（2026-09-08） */
    z-index: 1;
    pointer-events: none;
}
.message-story__number.is-right {
    left: auto;
    right: -14px;
}

/* .message-story__quote：章末の引用ブロック（製品への想い Story）／2026-08-23 */
.message-story__quote {
    max-width: 860px;
    margin: clamp(48px, 7vw, 88px) auto 0;
    text-align: center;
    padding-top: clamp(40px, 5vw, 60px);
    border-top: 1px solid var(--border);
}

/* --------------------------------------------------
   Philosophy セクション（製品への想い ID:15568）／2026-08-28
   -------------------------------------------------- */
/* 汎用3カラムグリッド。CD原本 docs/cd-reference/message/layout.css 準拠。
   .func-grid と同じくグループ内側コンテナを grid 化（layout属性なし・!important不要）。960px以下で1カラム */
.three-col > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 52px);
}
@media (max-width: 960px) {
    .three-col > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
    }
}
/* Philosophy 3原則カード：上辺アクセント罫線＋上パディング（CD原本の borderTop:1px solid accent）／2026-08-28 */
.message-philosophy__principle {
    border-top: 1px solid var(--accent);
    padding-top: clamp(22px, 3vw, 30px);
}

/* =====================================================
   会社案内ページ（ID:15813）：② 会社概要／③ お問い合わせ導線
   -----------------------------------------------------
   CD-08 §2〜§3 に基づく（2026-09-04）。①タイトルエリアは .page-title-area 系（構築済み）。
   共通クラス（.section-eyebrow / .section-body-standard / .section-btn）は変更せず流用。
   ===================================================== */

/* ② 会社概要セクション。align:full グループ（①③と同じく内側は inner-container の
   max-width:var(--article_size)=900px で統一。背景は塗らず body 背景 #faf8f5 が透過）。
   .alignfull を重ねて詳細度 0,3,0 とし、後方の div.alignfull（0,1,1・!important）に勝たせる */
.alignfull.alignfull.company-profile {
    padding: clamp(40px, 5vw, 64px) clamp(20px, 6vw, 48px) clamp(48px, 6vw, 72px) !important;
}
/* ② 見出し「販売元」上の小見出し（accent 色ラベル＋下境界線）。
   .section-title-*（text 色・下線なし）・.section-eyebrow（11px）とは値が異なるため新規。
   .post_content を前置し詳細度 0,2,0 とし、親テーマ .post_content h2（font-size/weight）と
   .post_content .is-style-section_ttl（color:inherit / letter-spacing）に勝たせる */
.post_content .company-profile__title {
    color: var(--accent);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-align: center;
    padding-bottom: clamp(20px, 2.4vw, 26px);
    margin-bottom: clamp(24px, 3vw, 32px);
}
/* ② 定義リスト（core/table）。縦線なし・上境界線＋各行下境界線（色は var(--border)）。
   .post_content .company-profile__table td（0,2,1）で親テーマ .post_content td,th（0,1,1）の
   格子ボーダーを上書きする */
.company-profile__table {
    max-width: 680px;
    margin: 0 auto;
}
.post_content .company-profile__table table {
    border-top: 1px solid var(--border);
}
.post_content .company-profile__table td {
    border: none;
    border-bottom: 1px solid var(--border);
    background: none;
}
.post_content .company-profile__table td:first-child {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-mid);
    letter-spacing: 0.08em;
    line-height: 1.8;
    padding: clamp(16px, 2vw, 20px) 0;
    white-space: nowrap;
}
.post_content .company-profile__table td:last-child {
    font-size: 13.5px;
    font-weight: 300;
    color: var(--text);
    letter-spacing: 0.02em;
    line-height: 1.9;
    padding: clamp(16px, 2vw, 20px) 0;
}
/* 会社概要：600px以上の項目名列の幅と右寄せ（2026-09-05確定分の追加・2026-09-23） */
@media (min-width: 600px) {
    .post_content .company-profile__table td:first-child {
        --swl-minwidth-cell: clamp(120px, 15vw, 160px);
        text-align: right;
        padding-right: 24px;
    }
}
/* SP（599px以下）：項目名｜値の横並びを縦積みに切り替え、項目名の色を accent に変更 */
@media (max-width: 599px) {
    .post_content .company-profile__table tr,
    .post_content .company-profile__table td {
        display: block;
    }
    .post_content .company-profile__table td:first-child {
        border-bottom: none;
        color: var(--accent);
        padding-bottom: 0px;
    }
}

/* ③ お問い合わせ導線。外側 align:full グループ（背景 #f0eae3・flex 横並び）。
   .alignfull を重ねて詳細度 0,3,0 とし、後方の div.alignfull（0,1,1・!important・padding）に
   詳細度で勝たせる（!important は相手も !important のため必須。タイトルエリアと同手法）。
   flex-wrap・justify-content はブロック属性（layout.flexWrap/justifyContent）でも指定しているが、
   align:full＋custom className を併記した状態だと WP コアの動的レイアウトclass生成（wp-container-*）
   が発火せず対応する自動生成styleが出力されないことを実機検証で確認したため、確実性を優先し
   ここに明示する（2026-09-04） */
.alignfull.alignfull.company-contact {
    padding-block: clamp(44px, 6vw, 72px) !important;
    padding-inline: clamp(20px, 6vw, 48px) !important;
    gap: clamp(28px, 4vw, 56px);
    flex-wrap: wrap;
    justify-content: center;
}
/* ③ 見出し（明朝・細字）。サイズが .section-title-* と異なるため新規。前置は §2 と同じ理由 */
.post_content .company-contact__title {
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-bottom: clamp(12px, 1.5vw, 22px);
}

/* =====================================================
   15. ココラク通信 一覧ページ（[cocoraku_list] ショートコード／CD-09 §5-4・§5-5）
   -----------------------------------------------------
   （Claude Code により実装, 2026-09-06。
   docs/cd-reference/cocoraku/CD-09_ココラク通信_デザイン仕様.md §5-4・§5-5 に基づく。
   functions.php セクション14 のショートコード出力に対応。色・フォントは :root の
   Serenity パレット変数（CD §2 と一致）、寸法・字間は CD §5-4・§5-5 の値。）
   ===================================================== */

/* 一覧コンテナ。左右幅は囲みの align:full グループ（div.alignfull の左右 padding
   ＋ .wp-block-group__inner-container の max-width:var(--article_size)=900px）で決まるため、
   ここでは持たない。お客様の声（.voice-list）・正規取扱店（.shop-list）と同じ扱い
   （2026-09-06、CD §5-4 の左右 padding／max-width:960px を削除）。上パディングは維持 */
.cocoraku-list {
    margin-inline: auto;
    padding: clamp(32px, 4vw, 48px) 0 0;
}

/* カードグリッド：≥960=3列／600–959=2列／≤599=1列（CD §5-4） */
.cocoraku-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(20px, 2.6vw, 32px);
    row-gap: clamp(28px, 3.5vw, 44px);
}
@media (max-width: 959px) {
    .cocoraku-list__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
    .cocoraku-list__grid { grid-template-columns: 1fr; }
}

/* カード全体（記事リンク）：縦並び・要素間14px・下線なし（CD §5-4）。
   親テーマ .post_content a（詳細度 0,1,1）に勝つよう .post_content を前置する */
.post_content .cocoraku-list__card,
.post_content .cocoraku-list__card:hover {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: var(--text);
}

/* 画像枠：3:2・はみ出しを切る・背景 bgAlt（CD §5-4） */
.cocoraku-list__thumb {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-alt);
}
.cocoraku-list__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
}
.cocoraku-list__card:hover .cocoraku-list__img {
    transform: scale(1.04);
}
/* メディア掲載の記事：画像を切らずに枠に収める（2026-09-23） */
.cocoraku-list__thumb--contain .cocoraku-list__img {
    object-fit: contain;
}
/* アイキャッチ無し時の「NO IMAGE」（CD §5-4） */
.cocoraku-list__noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--text-light);
}

/* メタ行：カテゴリ名・縦罫・日付の横並び、間隔12px（CD §5-4） */
.cocoraku-list__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cocoraku-list__cat {
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--accent);
}
.cocoraku-list__sep {
    width: 1px;
    height: 10px;
    background: var(--border);
}
.cocoraku-list__date {
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

/* 記事タイトル（h3・CD §5-4）。親テーマ .post_content h3（margin:3em 0 2em／
   font-size:1.3em／font-weight:700／::before の下線バー）を打ち消す。
   .post_content を前置し詳細度 0,2,0（::before は 0,2,1）で上回らせる */
.post_content .cocoraku-list__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: var(--text);
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    transition: opacity .25s;
}
.post_content .cocoraku-list__title::before {
    content: none;
}
.cocoraku-list__card:hover .cocoraku-list__title {
    opacity: .65;
}
p.cocoraku-list__empty {
    margin: 0;
    color: var(--text-mid);
}


/* =====================================================
   ココラク通信 記事詳細ページ（CD-10）
   -----------------------------------------------------
   （2026-09-10、Claude Code により実装）
   親テーマ swell/single.php が描画する投稿(post)の詳細ページを
   CD-10 の体裁にする。テンプレートは作らず、functions.php
   セクション23（ブログ名）＋この節の CSS のみで対応する。
   数値は初期値。微調整はテーマファイルエディタで行う。
   前提：K様がカスタマイザーで 見出し2/3/4=装飾なし・タイトル横日付=非表示・
   記事下シェアボタン=有効・目次タイトル=CONTENTS・関連記事見出し=RELATED
   に変更する（このデプロイと同時に反映する）。
   ===================================================== */

/* 【A】本文見出し H2・H3・H4（機能・2026-09-10）
   カスタマイザーで見出し2/3/4を「装飾なし」にした前提。他CSSと混在させない。 */
.post_content h2 {
    margin: clamp(48px, 6vw, 76px) 0 clamp(20px, 2.4vw, 28px);
    padding-top: clamp(24px, 3vw, 34px);
    border-top: 1px solid var(--border);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.03em;
}
.post_content h2::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--accent);
}
.post_content h3 {
    margin: clamp(34px, 4vw, 48px) 0 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--accent);
    font-weight: 500;
    line-height: 1.8;
}
.post_content h4 {
    margin: clamp(26px, 3vw, 34px) 0 12px;
    padding-left: 13px;
    border-left: 2px solid var(--accent);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0.06em;
}

/* 【B】記事ヘッダーの並べ替え・間隔（機能・2026-09-10）
   DOM順「ブログ名 → H1 → カテゴリ+日付 → アイキャッチ」を、
   「ブログ名 → カテゴリ+日付 → H1 → アイキャッチ」に変える。
   移動する3要素だけに負の order を付ける。.p-articleThumb 以降は
   order:0（既定）のまま＝DOM順を維持し、未列挙要素が先頭へ飛ばない。
   ※SWELL は body_class を #body_wrap に出力するため .single-post は
     body ではなく #body_wrap に付く。
   カテゴリ+日付の行（.p-articleMetas.-top）とタイトルの間隔（CD-10）を
   margin-bottom で付与。親テーマ single.css は .p-articleMetas.-top に
   margin-top:.75em のみ（margin-bottom なし）＝追加指定。.p-articleHead は
   親テーマにマージン指定なし（.c-postTitle への margin は .p-postList 限定）。 */
.single-post article.l-mainContent__inner,
.single-news article.l-mainContent__inner {
    display: flex;
    flex-direction: column;
}
.single-post .article-blogname,
.single-news .article-blogname    { order: -3; }
.single-post .p-articleMetas.-top,
.single-news .p-articleMetas.-top { order: -2; margin-bottom: clamp(18px, 2.2vw, 24px); }
.single-post .p-articleHead,
.single-news .p-articleHead       { order: -1; }

/* 【C】カテゴリのピル表示（機能・2026-09-10。カテゴリ別の色分けはしない） */
.p-articleMetas.-top .c-categoryList__link,
.p-articleMetas.-top .c-taxList__link {
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* 【D】アイキャッチ（機能・2026-09-10） */
.l-article .p-articleThumb {
    margin-top: clamp(28px, 3.5vw, 44px);
}
.l-article .p-articleThumb__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* 【E】目次 .p-toc.-simple（機能・2026-09-10）
   タイトル文言（CONTENTS）はカスタマイザー。連番なし（リストは ul）。
   SWELL標準のタイトル先頭アイコン（::before の icomoon）と下の破線
   （border-bottom）を消す。 */
#main_content .p-toc.-simple {
    margin-top: clamp(36px, 4.5vw, 56px);
    margin-bottom: clamp(36px, 4.5vw, 56px);
}
.post_content .p-toc.-simple {
    border-color: var(--border);
    padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 36px);
}
.post_content .p-toc.-simple .p-toc__ttl {
    color: var(--accent);
    font-size: 10px;
    letter-spacing: 0.26em;
    font-weight: 500;
    border-bottom: 0;
}
.post_content .p-toc.-simple .p-toc__ttl::before {
    content: none;
}

/* 【F】タグ .p-articleFoot .c-tagList（機能・2026-09-10） */
.p-articleFoot .c-tagList__link {
    font-weight: 400;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    color: var(--text-mid);
}
/* 記事下のお知らせカテゴリーをココラク側と同じ見た目にする（機能・2026-09-13）
   親テーマ main.css の .c-categoryList__link（記事下にも無条件に適用）と
   同じ値を .c-taxList__link に指定。.p-articleFoot 配下限定のため
   記事ヘッダー（.p-articleMetas.-top 側の別指定）には影響しない。 */
.p-articleFoot .c-taxList__link {
    background-color: var(--accent);
    color: #fff;
    border-radius: 1px;
    padding: 4px .5em;
    display: block;
    line-height: 1;
    text-decoration: none;
}

/* 【G】前後の記事 .p-pnLinks（機能・2026-09-10）
   上下に罫線。サムネイル表示(-thumb-on)／非表示(-thumb-off)の
   どちらでも崩れない（コンテナへの指定のみ）。
   PREV / NEXT ラベルは .p-pnLinks__title の ::before で擬似的に付与し、
   タイトルの上（同じテキスト列内）に置く。SWELL標準の ::before（矢印）は
   .p-pnLinks__item 側なので競合しない。 */
.l-articleBottom .p-pnLinks {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: clamp(18px, 2.2vw, 26px) 0;
}
.l-articleBottom .p-pnLinks__title {
    display: block;
}
.l-articleBottom .p-pnLinks__title::before {
    font-weight: 400;
    display: block;
    color: var(--accent);
    font-size: 9.5px;
    letter-spacing: 0.2em;
}
.l-articleBottom .p-pnLinks__item.-prev .p-pnLinks__title::before {
    content: "前の記事";
}
.l-articleBottom .p-pnLinks__item.-next .p-pnLinks__title::before {
    content: "次の記事";
}

/* 矢印の帯を除去し、矢印自体をメインカラーにする（機能・2026-09-12） */
.single-post .p-pnLinks .-prev .p-pnLinks__link,
.single-news .p-pnLinks .-prev .p-pnLinks__link {
    border-left: none;
    padding-left: 2.0em;
}
.single-post .p-pnLinks .-next .p-pnLinks__link,
.single-news .p-pnLinks .-next .p-pnLinks__link {
    border-right: none;
    padding-right: 2.0em;
}
.single-post .p-pnLinks .-prev::before,
.single-news .p-pnLinks .-prev::before,
.single-post .p-pnLinks .-next::before,
.single-news .p-pnLinks .-next::before {
    color: var(--accent);
}

/* 【H】関連記事の見出し RELATED（機能・2026-09-10）
   .-related 配下限定。サイドバーのウィジェット見出し(.c-secTitle.-widget)には
   効かせない。SWELL の border-left（縦線）を打ち消し、ラベル体裁にする。
   横線（::before）と文字を横並び・上下中央（【J】ブログ名と共通の見た目。
   共通クラス化しない理由は下の【J】コメント参照）。 */
.l-articleBottom__section.-related .c-secTitle {
    display: flex;
    align-items: center;
    border-left: 0;
    padding: 0;
    color: var(--accent);
    font-size: 9.5px;
    letter-spacing: 0.3em;
    font-weight: 500;
}
.l-articleBottom__section.-related .c-secTitle::before {
    content: "";
    position: static;
    flex: none;
    width: 22px;
    height: 1px;
    margin-right: 14px;
    background: var(--accent);
}
/* 関連記事カードのタイトルを一覧ページと同じ400に揃える（機能・2026-09-13）
   親テーマ .p-postList .p-postList__title{font-weight:700} を上書き。
   p-postList はタグアーカイブ等の他ページでも使われているため、
   .l-articleBottom__section.-related 配下（＋実在する .p-relatedPosts）に
   限定し、他ページのp-postListには影響させない。 */
.l-articleBottom__section.-related .p-relatedPosts .p-postList__title {
    font-weight: 400;
}
/* お知らせ詳細では関連記事セクション全体を非表示（機能・2026-09-12）
   .l-articleBottom__section.-related は見出し・一覧を含むセクション全体。
   サイドバーのウィジェット見出し（#sidebar 配下）とは別要素のため影響なし。 */
.single-news .l-articleBottom__section.-related {
    display: none;
}

/* 【I】公開日／更新日 .c-postTimes
   親テーマ .c-postTimes{display:flex;flex-wrap:wrap;gap:.5em} により、
   公開日のみ・公開日＋更新日のどちらでも折り返しで対応（実HTMLで確認）。
   お知らせ（news）は「更新」概念を持たせない運用のため、更新日
   （.c-postTimes__modified）のみ非表示にする（機能・2026-09-12）。
   公開日（.c-postTimes__posted）は対象外。.single-post 側は変更なし。 */
.single-news .c-postTimes__modified {
    display: none;
}

/* 【J】タイトル上のブログ名 .article-blogname（機能・2026-09-10）
   functions.php セクション23 が出力する <p class="article-blogname">。
   関連記事の見出し【H】と同じラベル体裁（横線＋文字を横並び・上下中央）。
   ── 共通クラスにしない理由：
   【H】の対象 <h2 class="l-articleBottom__title c-secTitle"> は親テーマ
   parts/single/related_post_list.php が直接出力しており、フックが無いため
   CSSだけでは共通クラスを付与できない。両者は余白・文脈が別で、K様が
   テーマファイルエディタで個別調整する運用のため、grouped セレクタで
   結合せず個別記述とする。 */
.article-blogname {
    display: flex;
    align-items: center;
    margin: 0 0 clamp(18px, 2.2vw, 24px);
    color: var(--accent);
    font-size: 9.5px;
    letter-spacing: 0.3em;
    font-weight: 500;
}
.article-blogname::before {
    content: "";
    flex: none;
    width: 22px;
    height: 1px;
    margin-right: 14px;
    background: var(--accent);
}

/* 【K】記事タイトル H1 .c-postTitle__ttl（機能・2026-09-10）
   ココラク通信 記事詳細（.single-post）／正規取扱店 詳細（.single-shop、
   店舗名タイトル）／お客様の声 詳細（.single-voice）の H1（いずれも SWELL
   parts/single/post_head.php が出力する h1.c-postTitle__ttl）を共通の体裁にする。
   見出しは明朝（子テーマ :root の --font-heading = "Noto Serif JP", serif）。
   親テーマ .c-postTitle__ttl（font-size 5vw/24px・line-height 1.4、詳細度0,1,0）と
   ブラウザ既定の h1{font-weight:bold} を、body_class 前置（0,2,0）で上回る。
   （2026-09-11、.single-shop / .single-voice を追加） */
.single-post .c-postTitle__ttl,
.single-shop .c-postTitle__ttl,
.single-voice .c-postTitle__ttl,
.single-news .c-postTitle__ttl {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.9vw, 34px);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.03em;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
}

/* 【L】本文の行間・字間 .post_content（機能・2026-09-10、2026-09-24 詳細ページ共通に拡大）
   .single 前置で詳細ページ共通（ココラク通信・お知らせ・正規取扱店・お客様の声）。
   固定ページ（TOP 等）は #body_wrap に .single が付かないため対象外。
   font-size / font-weight は指定せず現状維持。
   段落間マージンは親テーマ .post_content>*{margin-bottom:var(--swl-block-margin,2em)} のまま。
   line-height / letter-spacing は継承プロパティ。自前の値を持つ子孫
   （見出し=【A】、目次タイトル=【E】、テーブル 1.6、li 1.5、コード等）は影響を受けない。
   .p-articleFoot（タグ）・.p-pnLinks（前後記事）・関連記事は .post_content の外側の
   兄弟要素のため影響なし。 */
.single .post_content,
.single .voice-single__body {
    line-height: 1.9;
    letter-spacing: 0.02em;
}

/* SHAREボタン部をCDのトンマナに合わせる（機能・2026-09-12） */
.single-post .p-articleFoot,
.single-news .p-articleFoot {
    margin-bottom: 4px;
}
.single-post .c-shareBtns.-bottom,
.single-news .c-shareBtns.-bottom {
    margin: 4px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.single-post .c-shareBtns.-bottom .c-shareBtns__message,
.single-news .c-shareBtns.-bottom .c-shareBtns__message {
    text-align: right;
    width: auto;
    padding: 0;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    color: var(--text-light);
    font-family: var(--font-body);
}
.single-post .c-shareBtns.-bottom .c-shareBtns__message .__text,
.single-news .c-shareBtns.-bottom .c-shareBtns__message .__text {
    padding: 0;
}
.single-post .c-shareBtns.-bottom .c-shareBtns__message .__text::before,
.single-post .c-shareBtns.-bottom .c-shareBtns__message .__text::after,
.single-news .c-shareBtns.-bottom .c-shareBtns__message .__text::before,
.single-news .c-shareBtns.-bottom .c-shareBtns__message .__text::after {
    content: none;
}
.single-post .c-shareBtns.-bottom .c-shareBtns__list,
.single-news .c-shareBtns.-bottom .c-shareBtns__list {
    justify-content: flex-end;
    border-top: none;
    border-bottom: none;
    gap: 14px;
}
.single-post .c-shareBtns.-bottom .c-shareBtns__item,
.single-news .c-shareBtns.-bottom .c-shareBtns__item {
    flex: none;
    margin-right: 0;
}
.single-post .c-shareBtns.-bottom .c-shareBtns__icon,
.single-news .c-shareBtns.-bottom .c-shareBtns__icon {
    color: var(--text);
}


/* =====================================================
   サイト全体のフォントウェイト 300 基準化（2026-09-11）
   -----------------------------------------------------
   SWELL のカスタマイザーに 300 を選ぶ項目がないため、body に直接指定する。
   親テーマ swell/build/css/main.css の body{font-weight:var(--swl-font_weight)}
   （＝400）を、同詳細度（0,0,1）＋子テーマの後方ロードで上回る（!important なし）。
   :root 変数（--swl-font_weight 等）は変更しない。
   400 を維持するクラスは各既存ルールに font-weight:400 を明示追記した
   （§実装2、26クラス。分散しているため位置は memo.md 参照）。
   500・700 を明示しているクラスは対象外。正規取扱店/お客様の声 詳細の
   ボタン系（.shop-single__tel-link / .shop-single__back-btn / .shop-table-btn /
   .btn-map）は 400 を明示（元 .shop-single__tel-link・.shop-single__back-btn は
   bold=700 だったが今回 400 に変更）。他の .shop-single__* は 300 継承。
   ===================================================== */
body {
    font-weight: 300;
}

/* =====================================================
   16. サイドバー（CD-11）：共通サイドバー sidebar-1／お知らせ用サイドバー sidebar_news
   ===================================================== */

/* 見出し（2026-09-23） */
#sidebar h2.wp-block-heading {
    position: relative;
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--text);
}
#sidebar h2.wp-block-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 28px;
    height: 1px;
    background: var(--accent);
}

/* 検索（2026-09-23） */
#sidebar .wp-block-search__inside-wrapper {
    display: flex;
    border: 1px solid var(--border);
    background: #fff;
}
#sidebar .wp-block-search__input {
    flex: 1;
    border: 0;
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text);
}
#sidebar .wp-block-search__input::placeholder {
    color: #8C7F76;
}
#sidebar .wp-block-search__button {
    padding: 0 18px;
    border-radius: 0;
    box-shadow: none;
    background: var(--accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.12em;
}
#sidebar .wp-block-search__button:hover {
    background: var(--accent-hover);
}

/* 最近の投稿・最近のお知らせ（2026-09-23） */
#sidebar .wp-block-latest-posts {
    border-top: 0;
}
#sidebar .wp-block-latest-posts li {
    padding: 14px 0;
    border-bottom-color: var(--border);
}
#sidebar .wp-block-latest-posts__post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
}
#sidebar .wp-block-latest-posts__post-title:hover {
    color: var(--accent);
}
#sidebar .wp-block-latest-posts__post-date {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-mid);
}

/* 最近の投稿：サムネイル付きリストのみ2列（2026-09-23） */
#sidebar .wp-block-latest-posts:has(.wp-block-latest-posts__featured-image) li {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 14px;
    align-items: center;
}
#sidebar .wp-block-latest-posts:has(.wp-block-latest-posts__featured-image) .wp-block-latest-posts__post-title {
    grid-column: 2;
}
#sidebar .wp-block-latest-posts__featured-image {
    aspect-ratio: 4 / 3;
    background: var(--bg-alt);
}
#sidebar .wp-block-latest-posts__featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カテゴリー（2026-09-23） */
#sidebar .wp-block-categories-list li {
    border-bottom: 1px solid var(--border);
}
#sidebar .wp-block-categories-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border-bottom: 0;
    background: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
}
#sidebar .wp-block-categories-list a:hover {
    color: var(--accent);
}
#sidebar .wp-block-categories-list a::before {
    content: "";
    position: static;
    transform: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 1;
    background: var(--accent);
}
#sidebar .wp-block-categories-list a:hover::before {
    background: var(--accent-hover);
}
#sidebar .wp-block-categories-list a::after {
    content: "›";
    margin-left: auto;
    font-size: 12px;
    color: var(--accent);
}

/* アーカイブ（2026-09-23） */
#sidebar .wp-block-archives-dropdown {
    position: relative;
    margin-top: 14px;
}
#sidebar .wp-block-archives-dropdown select {
    padding: 12px 36px 12px 14px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: #fff;
    font-size: 12.5px;
    line-height: normal;
    font-weight: 400;
    color: var(--text);
}
#sidebar .wp-block-archives-dropdown::after {
    content: "▼";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--accent);
    pointer-events: none;
}

/* =====================================================
   19. お問い合わせフォーム（Contact Form 7）
   ===================================================== */

/* ---- 項目の並び ---- */
/* 項目を2列に並べ、上に罫線（CD-14 の値）（2026-09-27）。区切りの上に同意の枠の上と同じ余白（上の要素に線がくっつかないように）（2026-09-30） */
.wpcf7-form .contact-fields {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px clamp(20px, 3vw, 32px);
    margin-top: clamp(28px, 3.5vw, 36px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--border);
}
/* 罫線の左端に重ねる accent の線（2026-09-27） */
.wpcf7-form .contact-fields::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--accent);
}
/* 項目・条件付きのグループは横幅いっぱい（2026-09-27） */
.wpcf7-form .contact-fields > * {
    grid-column: 1 / -1;
}
/* contact-half の項目は1列分（2026-09-27） */
.wpcf7-form .contact-fields > .contact-half {
    grid-column: auto;
}
/* お問い合わせ種類の項目の後の間隔（行の間隔 20px との差を足す）（2026-09-27） */
.wpcf7-form .contact-item:has([data-name="contact-category"]) {
    margin-bottom: calc(clamp(28px, 3.5vw, 36px) - 20px);
}
/* 条件付きのグループ（Conditional Fields）：お問い合わせ種類との間 14px、後ろは種類の後と同じ間隔、左に accent の縦線（2026-09-27） */
.wpcf7-form .contact-fields > [data-class="wpcf7cf_group"] {
    margin-top: calc(14px - clamp(28px, 3.5vw, 36px));
    margin-bottom: calc(clamp(28px, 3.5vw, 36px) - 20px);
    padding-left: 16px;
    border-left: 2px solid var(--accent);
}

/* ---- 項目の見出し ---- */
/* 見出し（2026-09-27） */
.wpcf7-form .contact-item__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-mid);
}
/* ラジオ・選択肢のチェックボックスの項目は見出しと選択肢の間を 8px に（2026-09-27、2026-09-30 チェックボックスを追加） */
.wpcf7-form .contact-item:has(.wpcf7-radio, .wpcf7-checkbox) .contact-item__label {
    margin-bottom: 8px;
}
/* 必須の項目の見出しの後ろに「必須」の印。必須の欄（CF7 が付ける wpcf7-validates-as-required）、
   ラジオ（CF7 では常に必須）、同意（optional でないもの）で自動的に付く（2026-09-27） */
.wpcf7-form .contact-item:has(.wpcf7-validates-as-required, .wpcf7-radio, .wpcf7-acceptance:not(.optional)) .contact-item__label::after {
    content: "必須";
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 9.5px;
    letter-spacing: 0.08em;
}

/* ---- 入力欄 ---- */
/* テキスト・メール・電話・日付・選択・その他の記入欄・テキストエリア：下の線だけの入力欄（SWELL の input・textarea の背景・枠を上書き）（2026-09-27、2026-09-30 日付・選択・その他の記入欄を追加） */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-date,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-free-text,
.wpcf7-form .wpcf7-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--text-mid);
    background-color: #fff;
    font-size: 15px;
    color: var(--text);
}
/* プレースホルダーの色（2026-09-27） */
.wpcf7-form .wpcf7-text::placeholder,
.wpcf7-form .wpcf7-textarea::placeholder {
    color: #B3A69C;
}
/* 入力が足りない欄の下の線を赤に（入力中は下の accent を優先）（2026-09-27） */
.wpcf7-form .wpcf7-text.wpcf7-not-valid,
.wpcf7-form .wpcf7-date.wpcf7-not-valid,
.wpcf7-form .wpcf7-select.wpcf7-not-valid,
.wpcf7-form .wpcf7-textarea.wpcf7-not-valid {
    border-bottom-color: #d98585;
}
/* 入力中：下の線を accent に（ブラウザ標準の枠線は出さない）（2026-09-27） */
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-date:focus,
.wpcf7-form .wpcf7-select:focus,
.wpcf7-form .wpcf7-free-text:focus,
.wpcf7-form .wpcf7-textarea:focus {
    border-bottom-color: var(--accent);
    box-shadow: 0 1px 0 var(--accent);
    outline: 0;
}
/* テキストエリア：高さの変更は縦のみ（2026-09-27） */
.wpcf7-form .wpcf7-textarea {
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.9;
    resize: vertical;
}
/* エラーの文字の色・大きさ（2026-09-27、2026-09-30 大きさを追加） */
.wpcf7-form .wpcf7-not-valid-tip {
    color: #cc3033;
    font-size: 12px;
}

/* ---- ラジオボタン・同意のチェックボックス ---- */
/* ラジオ・チェックボックスの選択肢を横に並べ、折り返し可（2026-09-27、2026-09-30 チェックボックスを追加） */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
}
/* CF7 の選択肢の左の余白を外す（間隔は gap で取る）（2026-09-27） */
.wpcf7-form .wpcf7-list-item {
    margin: 0;
}
/* 丸・四角と文字を横に並べる（間隔 8px は仮の値）（2026-09-27） */
.wpcf7-form .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
/* CF7 が選択肢の文字の前後に入れる空白を外す（間隔は gap で取る）（2026-09-27） */
.wpcf7-form .wpcf7-list-item-label::before,
.wpcf7-form .wpcf7-list-item-label::after {
    content: none;
}
/* ラジオ・チェックボックスのブラウザ標準の見た目を消す（SWELL の input の余白・背景も上書き）（2026-09-27） */
.wpcf7-form .wpcf7-list-item input {
    position: relative;
    flex: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--text-mid);
    background-color: #fff;
    appearance: none;
    cursor: pointer;
}
/* ラジオ：16px の円（2026-09-27） */
.wpcf7-form .wpcf7-list-item input[type="radio"] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
/* ラジオの選択中：枠を accent に（2026-09-27） */
.wpcf7-form .wpcf7-list-item input[type="radio"]:checked {
    border-color: var(--accent);
}
/* ラジオの選択中の中の丸（8px・accent）（2026-09-27） */
.wpcf7-form .wpcf7-list-item input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
}
/* 同意のチェックボックス：20px の四角（2026-09-27） */
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
}
/* 同意のチェック時：背景と枠を accent に（2026-09-27） */
.wpcf7-form .wpcf7-list-item input[type="checkbox"]:checked {
    border-color: var(--accent);
    background-color: var(--accent);
}
/* 同意のチェック時の白い「✓」（2026-09-27） */
.wpcf7-form .wpcf7-list-item input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}
/* 選択肢のチェックボックス：ラジオと同じ 16px（同意の四角は 20px のまま）（2026-09-30） */
.wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}
/* 1つだけ選べるチェックボックス（CF7 の wpcf7-exclusive-checkbox）：ラジオと同じ円（2026-09-30） */
.wpcf7-form .wpcf7-exclusive-checkbox input[type="checkbox"] {
    border-radius: 50%;
}
/* 1つだけ選べるチェックボックスの選択中：背景は白のまま（枠の accent は同意のチェック時の指定）（2026-09-30） */
.wpcf7-form .wpcf7-exclusive-checkbox input[type="checkbox"]:checked {
    background-color: #fff;
}
/* 1つだけ選べるチェックボックスの選択中の中の丸（ラジオと同じ 8px・accent）（2026-09-30） */
.wpcf7-form .wpcf7-exclusive-checkbox input[type="checkbox"]:checked::before {
    content: "";
    inset: calc(50% - 4px) auto auto calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
}
/* 「その他」の記入欄（free_text）：同じ選択肢のチェックボックスにチェックが無いときは表示しない（2026-09-30） */
.wpcf7-form .wpcf7-list-item:has(input[type="checkbox"]:not(:checked)) .wpcf7-free-text {
    display: none;
}
/* 入力が足りないラジオの丸・同意の四角の枠を赤に（2026-09-27） */
.wpcf7-form .wpcf7-not-valid .wpcf7-list-item input {
    border-color: #d98585;
}
/* ラジオ・チェックボックスの選択肢の文字（2026-09-27、2026-09-30 チェックボックスを追加） */
.wpcf7-form .wpcf7-radio .wpcf7-list-item-label,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-mid);
}
/* ラジオ・チェックボックスの選択中の選択肢の文字（2026-09-27、2026-09-30 チェックボックスを追加） */
.wpcf7-form .wpcf7-radio input:checked + .wpcf7-list-item-label,
.wpcf7-form .wpcf7-checkbox input:checked + .wpcf7-list-item-label {
    color: var(--text);
    font-weight: 500;
}
/* 同意の文字（2026-09-27） */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 14px;
}

/* ---- 同意と送信ボタンの枠 ---- */
/* 同意の項目と送信ボタンを1つの枠に（2026-09-27） */
.wpcf7-form .contact-agree {
    margin-top: clamp(28px, 3.5vw, 36px);
    padding: clamp(20px, 2.6vw, 26px);
    background-color: var(--bg-alt);
    text-align: center;
}
/* 同意とボタンの間（2026-09-27） */
.wpcf7-form .contact-agree .contact-item {
    margin-bottom: 20px;
}
/* 送信ボタン（CD-14 の「送信する」の値）（2026-09-27）。文字の右の白い線（背景の線）は消し、左右の余白を 52px にそろえた（2026-11-02、K様の決定）
   以前は、右の余白 86px（外側 44px ＋ 線 24px ＋ 文字との間 18px）に、背景の線を描いていた */
.wpcf7-form .wpcf7-submit {
    padding: 18px 52px;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.18em;
}
/* ホバー（2026-09-27） */
.wpcf7-form .wpcf7-submit:hover {
    background-color: var(--accent-hover);
}
/* キーボード操作で移動したときの枠線：ラジオ・同意のチェックボックス・送信ボタン（2026-09-27） */
.wpcf7-form .wpcf7-list-item input:focus-visible,
.wpcf7-form .wpcf7-submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* 送信中の印（CF7 がボタンの後ろに入れる）がボタンの中央揃えをずらさないようにする（2026-09-27） */
.wpcf7-form .wpcf7-spinner {
    position: absolute;
}

/* ---- 送信後のメッセージ ---- */
/* 送信できたとき：枠を accent に（2026-09-27） */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--accent);
}
/* 入力不足・送信の失敗・迷惑メールの判定のとき：枠を入力不足の欄と同じ赤に（2026-09-27） */
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
    border-color: #d98585;
}
/* 入力不足の欄が無くなったら、入力不足のメッセージを隠す（2026-10-21） */
.wpcf7 form.invalid:not(:has(.wpcf7-not-valid)) .wpcf7-response-output {
    display: none;
}

/* ---- スマホ ---- */
@media (max-width: 599px) {
    /* 項目を1列に（2026-09-27） */
    .wpcf7-form .contact-fields {
        grid-template-columns: minmax(0, 1fr);
    }
    /* ラジオ・チェックボックスの選択肢を縦に並べる（2026-09-27、2026-09-30 チェックボックスを追加） */
    .wpcf7-form .wpcf7-radio,
    .wpcf7-form .wpcf7-checkbox {
        flex-direction: column;
        gap: 2px;
    }
}

/* ---- フォームの下の案内 ---- */
/* 案内の枠：上の罫線、中身を横に並べて折り返し可（2026-09-26） */
.contact-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
/* グループの内側のラッパー（既定・縦積みのグループで付く）をなくし、段落を直接横に並べる（2026-09-26） */
.contact-help > .wp-block-group__inner-container {
    display: contents;
}
/* 段落の既定の余白（SWELL の .wp-block-group__inner-container>* の margin-bottom:1em）を打ち消す（2026-09-26） */
.contact-help p {
    margin-bottom: 0;
}
/* 最初の段落（リンクなし）（2026-09-26） */
.contact-help p:not(:has(a)) {
    font-size: 12px;
    color: var(--text-mid);
}
/* リンク（2026-09-26） */
.contact-help a {
    font-size: 13px;
    text-decoration: none;
}
/* リンクの後ろの accent の「→」（2026-09-26） */
.contact-help a::after {
    content: "→";
    margin-left: 8px;
    color: var(--accent);
}
/* ホバーで文字を accent に（2026-09-26） */
.contact-help a:hover {
    color: var(--accent);
}

/* =====================================================
   20. 404ページ（CD-15）
   ===================================================== */

/* 大きな「404」（2026-09-27） */
.post_content .notfound__code {
    font-family: var(--font-heading);
    font-size: clamp(64px, 10vw, 112px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--border);
    margin-bottom: 0;
}

/* 見出し h1：下の罫線と左端の accent の線（2026-09-27） */
.post_content .notfound__title {
    position: relative;
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-top: clamp(20px, 3vw, 32px);
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
/* 罫線の左端に重なる accent の線（2026-09-27） */
.post_content .notfound__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--accent);
}

/* リンクの一覧：記号・左余白なし、上の罫線（2026-09-27） */
.post_content .notfound__links {
    list-style: none;
    padding-left: 0;
    margin-top: clamp(40px, 5vw, 56px);
    border-top: 1px solid var(--border);
}
/* 各行の下の罫線（2026-09-27） */
.notfound__links li {
    margin: 0;
    border-bottom: 1px solid var(--border);
}
/* 左に文字、右端に「→」（2026-09-27） */
.notfound__links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 2px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s;
}
/* 「→」（2026-09-27） */
.notfound__links a::after {
    content: "→";
    color: var(--accent);
}
/* ホバーで文字を accent に（2026-09-27） */
.notfound__links a:hover {
    color: var(--accent);
}

/* =====================================================
   21. よくあるご質問（CD-16）
   ===================================================== */

/* ---- 2列の配置（カラムブロック） ---- */
/* カラム間の間隔（SWELL の gap:var(--wp-column-gap)!important の変数を変える）（2026-09-28） */
.post_content .faq__layout {
    --wp-column-gap: clamp(32px, 5vw, 64px);
}
/* 左のカラム：引き伸ばさずに上揃えにして、スクロールしても画面に残す（2026-09-28） */
.faq__side {
    align-self: flex-start;
    position: sticky;
    top: 100px;
}
/* 左のカラムの小見出し「CATEGORY」の下の余白（.section-eyebrow-hero の margin-bottom:24px!important を上書き）（2026-09-28） */
.faq__side .section-eyebrow-hero {
    margin-bottom: 14px !important;
}

/* ---- 分類へのリンクの一覧 ---- */
/* 行頭の記号・左の余白なし（2026-09-28） */
.post_content .faq__nav {
    list-style: none;
    padding-left: 0;
}
/* 行の余白なし（2026-09-28） */
.faq__nav li {
    margin: 0;
}
/* リンク：左に 2px の線（2026-09-28） */
.faq__nav a {
    display: block;
    padding: 14px 0 14px 14px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text);
    text-decoration: none;
    border-left: 2px solid var(--border);
    transition: color 0.2s, border-color 0.2s;
}
/* ホバーで文字を accent に（2026-09-28） */
.faq__nav a:hover {
    color: var(--accent);
}

/* ---- 分類 ---- */
/* 分類のグループ：上端の左に accent の線、ページ内リンクの移動先の位置（2026-09-28） */
.faq__category {
    position: relative;
    padding-top: 18px;
    margin-bottom: clamp(48px, 6vw, 72px);
    scroll-margin-top: 96px;
}
/* 上端の左の accent の線（2026-09-28） */
.faq__category::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--accent);
}
/* 分類の小見出しの下の余白（2026-09-28） */
.faq__category .section-eyebrow {
    margin-bottom: 6px;
}
/* 分類の見出し h2（子テーマ・SWELL の .post_content h2 の見た目を打ち消す）（2026-09-28） */
.post_content .faq__category-title {
    font-family: var(--font-heading);
    font-size: clamp(19px, 2.2vw, 24px);
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 18px;
    border-top: none;
    border-bottom: 1px solid var(--text);
}
/* 子テーマの .post_content h2::before（48×2px の線）を出さない（2026-09-28） */
.post_content .faq__category-title::before {
    content: none;
}

/* ---- 質問（詳細ブロック） ---- */
/* 1問の枠：下の線、なめらかな開閉のための指定（2026-09-28） */
.faq__item {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    interpolate-size: allow-keywords;
}
/* 質問の行：Q・質問文・開閉のアイコンの3列（2026-09-28） */
.faq__item > summary {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 14px;
    align-items: start;
    padding: 22px 4px;
    list-style: none;
    font-family: var(--font-heading);
    font-size: clamp(14.5px, 1.6vw, 16px);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: var(--text);
    text-wrap: pretty;
}
/* Safari の行頭の三角を消す（2026-09-28） */
.faq__item > summary::-webkit-details-marker {
    display: none;
}
/* ホバーで質問文を accent に（2026-09-28） */
.faq__item > summary:hover {
    color: var(--accent);
}
/* キーボード操作時の枠線（2026-09-28） */
.faq__item > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* 「Q」（2026-09-28） */
.faq__item > summary::before {
    content: "Q";
    font-size: 20px;
    color: var(--accent);
    line-height: 1.4;
}
/* 開閉のアイコン：丸の中に＋（2026-09-28） */
.faq__item > summary::after {
    content: "";
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background:
        linear-gradient(var(--text-mid), var(--text-mid)) center / 10px 1px no-repeat,
        linear-gradient(var(--text-mid), var(--text-mid)) center / 1px 10px no-repeat;
}
/* 開いているとき：accent の丸の中に白い−（2026-09-28） */
.faq__item[open] > summary::after {
    border-color: var(--accent);
    background:
        linear-gradient(#fff, #fff) center / 10px 1px no-repeat,
        var(--accent);
}
/* なめらかな開閉（::details-content に対応するブラウザのみ）（2026-09-28） */
.faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.35s, content-visibility 0.35s allow-discrete;
}
.faq__item[open]::details-content {
    block-size: auto;
}

/* ---- 答え ---- */
/* 答えの枠：A と中身の2列（詳細ブロックの .wp-block-details>:not(summary) の上の余白と :last-child{margin-bottom:0} を上書き）（2026-09-28） */
.post_content .faq__answer {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    margin-top: 0;
    margin-bottom: 24px;
    padding: 24px clamp(18px, 3vw, 32px) 28px clamp(14px, 2vw, 20px);
    background: #fff;
    border: 1px solid var(--border);
}
/* 「A」（2026-09-28） */
.faq__answer::before {
    content: "A";
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    color: var(--text-mid);
    line-height: 1.4;
}
/* 答えの中の要素の間隔 18px（2026-09-28） */
.faq__answer > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* 答えの中の要素の既定の margin を打ち消す（2026-09-28） */
.faq__answer .wp-block-group__inner-container > * {
    margin: 0;
}
/* 答えの中の文中のリンク（2026-09-28） */
.faq__answer p a {
    color: var(--accent);
    text-underline-offset: 4px;
}
/* 答えの中の小見出し h4（子テーマ・SWELL の .post_content h4 の見た目を打ち消す）（2026-09-28） */
.faq__answer .faq__subtitle {
    margin-top: 8px;
    padding-top: 22px;
    padding-left: 0;
    border-top: 1px dashed var(--border);
    border-left: none;
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 0.05em;
    color: var(--text);
    text-decoration: underline 1px var(--accent);
    text-underline-offset: 6px;
}
/* 注記（2026-09-28） */
.faq__answer .faq__note {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 2.1;
    color: var(--text-mid);
}

/* ---- タブレット・スマホ（959px以下）：縦積み ---- */
@media (max-width: 959px) {
    /* 左右のカラムを縦に積む（WP 標準の flex をやめて1列の grid にする）（2026-09-28） */
    .post_content .faq__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    /* 左のカラム：sticky をやめて、中の要素を横に並べる（2026-09-28） */
    .faq__side {
        position: static;
        display: flex;
        flex-wrap: wrap;
    }
    /* 小見出し「CATEGORY」は出さない（2026-09-28） */
    .faq__side .section-eyebrow-hero {
        display: none;
    }
    /* リンクを横に並べる（2026-09-28） */
    .post_content .faq__nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    /* リンク：四方に線、白の背景（2026-09-28） */
    .faq__nav a {
        padding: 9px 14px;
        font-size: 12.5px;
        border: 1px solid var(--border);
        background: #fff;
    }
}

/* ---- スマホ（599px以下） ---- */
@media (max-width: 599px) {
    /* 質問の行の3列と余白を詰める（2026-09-28） */
    .faq__item > summary {
        grid-template-columns: 22px minmax(0, 1fr) 26px;
        gap: 10px;
        padding: 18px 0;
    }
    /* 開閉のアイコン 26px（2026-09-28） */
    .faq__item > summary::after {
        width: 26px;
        height: 26px;
    }
    /* 答えを1列に（2026-09-28） */
    .post_content .faq__answer {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}