/*
Theme Name: COFUL Child
Theme URI: https://coful.jp/
Description: Twenty Twenty-Five の子テーマ。COFUL サイト固有のスタイルとフックを集約。
Author: COFUL
Author URI: https://coful.jp/
Template: twentytwentyfive
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coful-child
*/

/* CSS ルールは STEP D で追加 */

/* ============================================================
   COFUL Footer Menu
   Phase 4-1-6 で post_id=235 / mu-plugin に配置されたフッター
   メニューのスタイル。inline style から移植(見た目完全再現)。
   ============================================================ */
.coful-footer-menu {
    text-align: center;
    padding: 24px 16px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    background: #f8f8f8;
}

.coful-footer-menu a {
    margin: 0 12px;
    color: #666;
    text-decoration: none;
}

.coful-footer-menu span {
    color: #ccc;
}

/* ============================================================
   CF7 Privacy Notice
   Phase 4-1-6 で CF7 form 227, 228 の [submit] 直前に配置された
   同意文言のスタイル。inline style から移植(見た目完全再現)。
   ============================================================ */
.cf7-privacy-notice {
    font-size: 12px;
    color: #666;
    margin: 16px 0;
}

/* ============================================================
   Bordered Tables (将来用、Phase 4-1-5 罫線対応の集約先)
   投稿内 inline style 削除は Phase 4-2 後の専用指示書で実施。
   ============================================================ */
table.coful-bordered {
    border-collapse: collapse;
}

table.coful-bordered th,
table.coful-bordered td {
    border: 1px solid #ddd;
    padding: 8px;
}

/* === BEGIN: phase-4-4-2-b-2 header styles === */
/*
 * Phase 4-4-2-b-2: ヘッダー再設計
 * - .site-header / .site-header-inner / .site-logo / .site-nav
 * - theme.json (b-1) の color palette と fontFamilies を CSS variables 経由で参照
 * - フォールバック値も同梱(Cormorant Garamond 不在時、color 不在時の安全装置)
 */

.site-header {
	background: var(--wp--preset--color--background, #FCFCFC);
	border-bottom: 1px solid var(--wp--preset--color--border, #CDCDCD);
	padding: 16px 24px;
}

.site-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.site-logo {
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 1;
}

.site-logo a {
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-weight: 300;
	font-size: 26px;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--brand-olive, #8B9D83);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.site-logo a:hover {
	opacity: 0.75;
}

.site-nav {
	margin: 0;
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.site-nav li {
	margin: 0;
	padding: 0;
}

.site-nav a {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--wp--preset--color--text, #414141);
	text-decoration: none;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.site-nav a:hover {
	color: var(--wp--preset--color--brand-olive, #8B9D83);
}

@media (max-width: 767px) {
	.site-header {
		padding: 12px 16px;
	}
	.site-header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.site-nav ul {
		gap: 12px 16px;
	}
	.site-nav a {
		font-size: 13px;
	}
}
/* === END: phase-4-4-2-b-2 header styles === */



/* === BEGIN: phase-4-4-2-b-3-1 footer styles === */
/* ============ Section 10: FOOTER (Salon Info) ============ */
.coful-top__sitefooter {
    padding: var(--section-py) 0 40px;
    background: var(--c-text);
    color: var(--c-bg);
}

.coful-top__sitefooter a {
    color: var(--c-bg);
    text-decoration: none;
}

.coful-top__sitefooter a:hover {
    color: var(--c-accent-hover);
}

.coful-top__sitefooter-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--section-px);
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
}

@media (max-width: 768px) {
    .coful-top__sitefooter-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.coful-top__sitefooter-col h4 {
    font-size: 1rem;
    letter-spacing: .15em;
    color: var(--c-accent-hover);
    margin: 0 0 16px;
    font-weight: 500;
}

.coful-top__sitefooter-col p,
.coful-top__sitefooter-col li {
    font-size: .9rem;
    line-height: 1.9;
    margin: 0 0 4px;
}

.coful-top__sitefooter-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coful-top__sitefooter-reserve {
    display: inline-block;
    margin: 12px 0;
    padding: 10px 28px;
    border: 1px solid var(--c-accent-hover);
    border-radius: 4px;
    color: var(--c-accent-hover) !important;
    transition: all .2s ease;
    letter-spacing: .1em;
    font-size: .9rem;
}

.coful-top__sitefooter-reserve:hover {
    background: var(--c-accent);
    color: var(--c-white) !important;
    border-color: var(--c-accent);
}

.coful-top__sitefooter-recruite-text {
    font-size: .85rem;
    color: var(--c-line);
    margin: 12px 0 16px;
    line-height: 1.7;
}

.coful-top__sitefooter-recruite-link {
    display: inline-block;
    color: var(--c-accent-hover) !important;
    text-decoration: underline;
    font-size: .85rem;
}

.coful-top__sitefooter-copy {
    margin-top: 48px;
    padding: 24px var(--section-px) 0;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
    font-size: .8rem;
    color: var(--c-line);
}



/* --- SNS bar (Instagram) --- */
.coful-sns-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px 0 16px;
    padding: 0;
}
.coful-sns-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #faf7f2;
    transition: opacity 0.2s ease;
    text-decoration: none;
}
.coful-sns-bar a:hover {
    opacity: 0.7;
}
.coful-sns-bar svg {
    width: 32px;
    height: 32px;
    display: block;
}
@media (max-width: 767px) {
    .coful-sns-bar {
        margin: 24px 0 12px;
    }
}


/* --- Override: footer-context tweaks --- */
.coful-top__sitefooter .coful-footer-menu {
    margin-top: 16px;
    padding: 16px 0 8px;
}
body > .wp-site-blocks > main + footer.coful-top__sitefooter {
    margin-top: 0;
}

/* === END: phase-4-4-2-b-3-1 footer styles === */


/* === BEGIN: phase-4-4-2-b-3-1-fix-3 footer dark === */
/* Wix 完全再現 4 列ダーク背景フッター(fix-3 反映:列 1 構造 / Contents 中央 / RESERVE 控えめ / 電話 NSJ / コンテナ 1280px / ボタン下余白) */

.coful-top__sitefooter {
	background: #3a4042;
	color: var(--wp--preset--color--background, #FCFCFC);
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	line-height: 1.7;
	padding: 64px 32px 32px;
}

.coful-top__sitefooter a {
	color: var(--wp--preset--color--background, #FCFCFC);
	text-decoration: none;
}
.coful-top__sitefooter a:hover {
	text-decoration: underline;
	opacity: 0.85;
}

.coful-top__sitefooter-inner {
	max-width: 1280px;
	margin: 0 auto;
}

.coful-top__sitefooter-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

.coful-top__sitefooter-col {
	min-width: 0;
}

.coful-top__sitefooter-heading {
	font-family: var(--wp--preset--font-family--cormorant-garamond, 'Cormorant Garamond'), serif;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	color: #FFFFFF;
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	display: inline-block;
	min-width: 56px;
}

/* fix-3 NEW: Salon Info 列 1 の英字本文 */
.coful-top__sitefooter-salonname {
	font-family: var(--wp--preset--font-family--cormorant-garamond, 'Cormorant Garamond'), serif;
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	letter-spacing: 0.15em;
	color: #FFFFFF;
	margin: 0 0 24px;
}

.coful-top__sitefooter-address {
	font-style: normal;
	margin: 0 0 16px;
}

.coful-top__sitefooter-hours,
.coful-top__sitefooter-contact {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 4px 12px;
	margin: 0 0 16px;
}
.coful-top__sitefooter-hours dt,
.coful-top__sitefooter-contact dt {
	font-weight: 500;
	letter-spacing: 0.04em;
}
.coful-top__sitefooter-hours dd,
.coful-top__sitefooter-contact dd {
	margin: 0;
}

/* fix-3 NEW: Contents 列を中央揃え */
.coful-top__sitefooter-col--contents {
	text-align: center;
}

.coful-top__sitefooter-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.coful-top__sitefooter-list li {
	padding: 6px 0;
}

.coful-top__sitefooter-sublabel {
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	letter-spacing: 0.05em;
	margin: 18px 0 8px;
	color: rgba(255, 255, 255, 0.85);
}
.coful-top__sitefooter-sublabel:first-child {
	margin-top: 0;
}

/* fix-3 CHANGED: RESERVE ボタン控えめ + 下余白 */
.coful-top__sitefooter-reserve-btn {
	display: block;
	background: var(--wp--preset--color--brand-beige, #A3987F);
	color: #FFFFFF !important;
	text-align: center;
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--cormorant-garamond, 'Cormorant Garamond'), serif;
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	letter-spacing: 0.1em;
	border-radius: 2px;
	margin-bottom: 24px;
	transition: background 0.2s, opacity 0.2s;
}
.coful-top__sitefooter-reserve-btn:hover {
	background: #8d8470;
	text-decoration: none !important;
	opacity: 1;
}

/* fix-3 CHANGED: LINE ボタン下余白 */
.coful-line-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 12px 18px;
	background: #06C755;
	color: #FFFFFF !important;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	line-height: 1.2;
	margin-bottom: 24px;
	transition: background 0.2s;
}
.coful-line-btn:hover {
	background: #05b04c;
	text-decoration: none !important;
	opacity: 1;
}
.coful-line-btn-icon {
	display: inline-flex;
	width: 1.4em;
	height: 1.4em;
}
.coful-line-btn-icon svg {
	width: 100%;
	height: 100%;
}

/* fix-3 CHANGED: 電話番号フォント Noto Sans JP */
.coful-top__sitefooter-tel-large {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: 500;
	letter-spacing: 0.1em;
	padding: 8px 0;
}

.coful-top__sitefooter-recruit-tagline {
	font-weight: 500;
	margin: 0 0 12px;
}
.coful-top__sitefooter-recruit-body {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--xs, 0.85rem);
	line-height: 1.7;
}
.coful-top__sitefooter-recruit-link {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs, 0.85rem);
	letter-spacing: 0.04em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}

.coful-top__sitefooter-divider {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	margin: 24px 0 24px;
}

.coful-top__sitefooter-copyright {
	text-align: center;
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	letter-spacing: 0.05em;
	margin: 0 0 14px;
}

.coful-top__sitefooter-instagram-wrap {
	text-align: center;
	margin: 0;
}
.coful-top__sitefooter-instagram {
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: #FFFFFF;
}
.coful-top__sitefooter-instagram svg {
	width: 100%;
	height: 100%;
}

@media (max-width: 980px) {
	.coful-top__sitefooter-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 600px) {
	.coful-top__sitefooter {
		padding: 48px 20px 24px;
	}
	.coful-top__sitefooter-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}
/* === END: phase-4-4-2-b-3-1-fix-3 footer dark === */

/* === BEGIN: phase-4-4-2-b-3-1-fix-4 footer fine-tune === */
/* fix-4: 列 1 salonname フォント拡大 / 列 2 Contents 縦バランス調整 / 列 3 tel-large 左寄せ・サイズ控え
   方針: fix-3 の対応セレクタを CSS カスケード後勝ちで上書き(同セレクタ・同等 specificity、後ろの定義が勝つ) */

/* fix-4 #1: salonname フォントサイズを一回り大きく(--md → --lg) */
.coful-top__sitefooter-salonname {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
}

/* fix-4 #2: Contents 列の縦バランス調整
   - heading の margin-bottom を縮小して最初の項目を heading に詰める
   - 各項目の上下 padding を増やして列の高さを稼ぎ、列 1 と縦長を揃える
   - letter-spacing 増で中央揃えを読みやすく
   - 最初の項目だけ上 padding を消して heading との隙間を統制 */
.coful-top__sitefooter-col--contents .coful-top__sitefooter-heading {
	margin-bottom: 12px;
}
.coful-top__sitefooter-col--contents .coful-top__sitefooter-list li {
	padding: 10px 0;
	letter-spacing: 0.08em;
}
.coful-top__sitefooter-col--contents .coful-top__sitefooter-list li:first-child {
	padding-top: 0;
}

/* fix-4 #3: 電話番号 tel-large
   - text-align: center → left(「電話予約」sublabel と揃える)
   - font-size: --lg → --md(控えめに)
   - padding 上下を狭める */
.coful-top__sitefooter-tel-large {
	text-align: left;
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	padding: 4px 0 0;
}
/* === END: phase-4-4-2-b-3-1-fix-4 footer fine-tune === */

/* === BEGIN: phase-4-4-2-b-3-1-fix-5 footer fine-tune-2 === */
/* fix-5: salonname 確実拡大 / Contents 左揃え戻し / RESERVE inline-block / モバイル調整
   方針: fix-3 / fix-4 を保持しつつ、後勝ち & specificity で確実に上書き */

/* fix-5 #1: salonname サイズをハードコード + specificity 強化(0,2,0) + font-weight 補強
   fix-4 の (0,1,0) では preset --lg の値が想定より小さく見た目変化なし → 直接 1.5rem 指定 */
.coful-top__sitefooter .coful-top__sitefooter-salonname {
	font-size: 1.5rem;
	font-weight: 500;
}

/* fix-5 #2: Contents 列を左揃えに戻す(fix-3 中央 + fix-4 縦バランス調整を完全リセット) */
.coful-top__sitefooter .coful-top__sitefooter-col--contents {
	text-align: left;
}
.coful-top__sitefooter-col--contents .coful-top__sitefooter-heading {
	margin-bottom: 20px;
}
.coful-top__sitefooter-col--contents .coful-top__sitefooter-list li {
	padding: 6px 0;
	letter-spacing: normal;
}
.coful-top__sitefooter-col--contents .coful-top__sitefooter-list li:first-child {
	padding-top: 6px;
}

/* fix-5 #3: RESERVE ボタン幅を内容サイズに(列幅いっぱいから脱却) */
.coful-top__sitefooter-reserve-btn {
	display: inline-block;
}

/* fix-5 #4: モバイル(@media max-width: 600px)
   - Contents 列を非表示
   - 各列の heading を中央配置(heading は inline-block なので親 text-align で center)
   - 内容(段落・dl・リスト)は左揃え維持 */
@media (max-width: 600px) {
	.coful-top__sitefooter-col--contents {
		display: none;
	}
	.coful-top__sitefooter-col {
		text-align: center;
	}
	.coful-top__sitefooter-col > p,
	.coful-top__sitefooter-col > dl,
	.coful-top__sitefooter-col > ul {
		text-align: left;
	}
}
/* === END: phase-4-4-2-b-3-1-fix-5 footer fine-tune-2 === */

/* === BEGIN: phase-4-4-2-b-3-2 body typography === */
/* b-3-2: theme.json styles.typography に加え、style.css でも明示宣言(キャッシュ問題対応のフォールバック)
   全 82 ページの body / heading に Noto Sans JP / 15px / lh 1.7 / ls 0.04em / fw 400 を確実適用 */

body {
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	font-size: var(--wp--preset--font-size--medium, 15px);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.04em;
}

h1, h2 {
	font-family: var(--wp--preset--font-family--cormorant-garamond, 'Cormorant Garamond'), serif;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	line-height: 1.4;
	letter-spacing: 0.02em;
}
/* === END: phase-4-4-2-b-3-2 body typography === */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Inter:wght@400;500&display=swap');

/* =====================================================
   Phase 4-4-2-b-3-7 fix-1 iter-3: Wix 視覚同等化 final
   modified: 2026-05-10
   diff from iter-2:
     - title JP fallback: Gothic -> Mincho (Wix 実観察)
     - title font-weight: 700 -> 500 (太すぎ修正)
     - overlay font-weight: 400 -> 500 (細すぎ修正)
   ===================================================== */

.coful-top__reasons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
}

.coful-top__reasons-grid > .coful-top__reason {
    display: block;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    margin: 0;
    padding: 0;
    text-align: left;
}

.coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    width: 100%;
    display: block;
    background: #f5f5f5;
}

.coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* === fix-3 (1): overlay font-weight 400 -> 500 (Medium) === */
.coful-top__reasons-grid > .coful-top__reason .coful-top__reason-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(0, 0, 0, 0) 100%
    );
    color: #FFFFFF;
    padding: 36px 18px 14px;
    margin: 0;
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.coful-top__reasons-grid > .coful-top__reason .coful-top__reason-text-wrap {
    display: block;
    padding: 24px 28px 28px;
    margin: 0;
}

/* === fix-3 (2): title JP fallback Mincho + font-weight 700 -> 500 === */
.coful-top__reasons-grid > .coful-top__reason .coful-top__reason-title {
    font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', serif;
    font-size: 22px;
    font-weight: 500;
    color: #2a2a2a;
    margin: 0 0 14px;
    padding: 0;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.coful-top__reasons-grid > .coful-top__reason .coful-top__reason-text {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    letter-spacing: 0.02em;
}

@media (max-width: 980px) {
    .coful-top__reasons-grid {
        gap: 24px;
        max-width: 720px;
        padding: 0 16px;
    }
    .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-text-wrap {
        padding: 20px 22px 24px;
    }
    .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-title {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .coful-top__reasons-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        padding: 0 16px;
    }
    .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap {
        aspect-ratio: 16 / 10;
    }
    .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-overlay {
        padding: 28px 14px 10px;
        font-size: 13px;
    }
    .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-title {
        font-size: 19px;
    }
    .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-text {
        font-size: 13.5px;
    }
}

/* === Phase 4-4-2-b-3-5 (blog section) === */

.coful-top__blog {
    padding: var(--section-py) 0;
    background-color: #f5f2ed;
}

.coful-top__blog-header {
    max-width: var(--max-w);
    margin: 0 auto 32px;
    padding: 0 var(--section-px);
    display: flex;
    align-items: center;
    gap: 16px;
}

.coful-top__blog-marker {
    display: inline-block;
    width: 32px;
    height: 2px;
    background-color: var(--c-accent);
    flex-shrink: 0;
}

.coful-top__blog-title-en {
    font-family: "Cormorant Garamond", "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin: 0;
    color: #1a1a1a;
}

.coful-top__blog-title-ja {
    font-family: "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 16px;
    color: #888;
    margin: 0;
}

.coful-top__blog-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--section-px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.coful-top__blog-card {
    background-color: #ffffff;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.coful-top__blog-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.coful-top__blog-card-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #f3ede3;
}

.coful-top__blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coful-top__blog-card-body {
    padding: 16px 20px 20px;
}

.coful-top__blog-card-title {
    font-family: "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 19px;
    font-weight: 700;
    color: #b33a3a;
    line-height: 1.4;
    margin: 0 0 8px;
}

.coful-top__blog-card-excerpt {
    font-family: "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 14px;
    color: #333;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coful-top__blog-archive {
    max-width: var(--max-w);
    margin: 24px auto 0;
    padding: 0 var(--section-px);
    text-align: right;
}

.coful-top__blog-archive a {
    display: inline-block;
    font-size: 14px;
    color: var(--c-accent);
    text-decoration: underline;
    background: transparent;
    padding: 0;
}

/* === Phase 4-4-2-b-3-5 fix-3d (viewport-aligned wrapper, full-width carousel) === */
@media (max-width: 768px) {
    .coful-top__blog {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        box-sizing: border-box;
    }

    .coful-top__blog-grid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: none;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 12px;
        scroll-behavior: smooth;
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 8px;
        margin-left: 0;
        margin-right: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .coful-top__blog-grid::-webkit-scrollbar {
        display: none;
    }

    .coful-top__blog-card {
        flex: 0 0 calc(100% - 24px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .coful-top__blog-header,
    .coful-top__blog-archive {
        padding-left: var(--section-px);
        padding-right: var(--section-px);
        box-sizing: border-box;
    }

    .coful-top__blog-nav {
        position: absolute;
        top: 35%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.7);
        border: none;
        border-radius: 50%;
        font-size: 24px;
        color: #555;
        cursor: pointer;
        z-index: 10;
        transition: opacity 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
    }

    .coful-top__blog-nav--prev {
        left: 20px;
    }

    .coful-top__blog-nav--next {
        right: 20px;
    }

    .coful-top__blog-nav[aria-hidden="true"] {
        opacity: 0;
        pointer-events: none;
    }
}
/* === BEGIN: phase-4-4-2-b-3-3 ABOUT === */
/* Phase 4-4-2-b-3-3: SECTION 3 ABOUT typography harmonization
   - b-3-2 (Cormorant Garamond / Inter / Mincho) と b-3-7 (REASONS title 22px/fw500)
     系列に揃え、Wix 構造の視覚整合性を維持
   - inline ABOUT CSS(post 235 行 190-235)を上書き(specificity: section スコープ)
   - 横線装飾は省略(b-3-7 系列の trends と統一感優先)
   - iter 2 (specificity 修正): 全セレクタを `.coful-top__about` 親 chain で
     specificity 底上げ(inline 後出しの specificity equal 衝突回避)
   - iter 3 (specificity 衝突解消): name/tagline は p 要素のため、
     `.coful-top__about .coful-top__about-content .coful-top__about-{name|tagline}`
     の 3 段 chain (0,3,0) で同 region 内の generic p ルール (0,2,1) を上回る
   modified: 2026-05-10
   ===================================================== */

/* h2 "About" — b-3-7 REASONS title と整合(Cormorant + Mincho、fw500) */
.coful-top__about .coful-top__section-title {
    font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: #2a2a2a;
    margin: 0 0 1em;
    text-transform: none;
}

/* name 行: ブランドステートメント、Cormorant + アクセントカラー
   3-chain で同 region 内の generic p ルール (0,2,1) を上回る (0,3,0) */
.coful-top__about .coful-top__about-content .coful-top__about-name {
    font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--c-accent, #8b7355);
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 0 0 .5em;
}

/* タグライン: Inter + Noto Sans JP、控えめなサブ
   3-chain で specificity (0,3,0) */
.coful-top__about .coful-top__about-content .coful-top__about-tagline {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--c-text-sub, #5a5a5a);
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin: 0 0 2em;
}

/* 本文 p — b-3-7 reason-text と整合(14px / lh 1.8 / ls 0.02em)
   generic p、specificity (0,2,1) — name/tagline は上記 (0,3,0) で除外される */
.coful-top__about .coful-top__about-content p {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin: 0 0 1em;
}

/* image: 微調整(max-width Wix 寄せ + 影付与で b-3-7 reasons の box-shadow と整合) */
.coful-top__about .coful-top__about-image {
    max-width: 560px;
    margin: 0 auto 48px;
}

.coful-top__about .coful-top__about-image img {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* mobile (≤768px) — b-3-5 / b-3-7 と同 breakpoint
   name は 3-chain でないと desktop 同様に generic p に負ける */
@media (max-width: 768px) {
    .coful-top__about .coful-top__section-title {
        font-size: 24px;
        letter-spacing: 0.06em;
    }
    .coful-top__about .coful-top__about-content .coful-top__about-name {
        font-size: 1.1rem;
    }
    .coful-top__about .coful-top__about-image {
        max-width: 100%;
        margin: 0 auto 32px;
    }
}

/* === END: phase-4-4-2-b-3-3 ABOUT === */
/* === BEGIN: phase-4-4-2-b-3-4 STYLIST === */
/* Phase 4-4-2-b-3-4: SECTION 4 STYLIST CARDS typography & visual harmonization
   - b-3-2 (Cormorant / Inter / Mincho) と b-3-7 (REASONS title 22px/fw500、box-shadow)
     系列に揃え、Wix Cormorant 18px name + 6/7 image を視覚同等化
   - inline STYLIST CSS(post 235 行 235-370)を上書き(specificity: section スコープ 2-chain)
   - 既存 inline の優先度宣言(card-link color)は維持、新規追加なし(§7-33)
   - mobile breakpoint は inline 既存 900px と整合維持
   - §7-50 specificity 戦略事前適用(全セレクタ 2-chain で衝突回避)
   modified: 2026-05-10
   ===================================================== */

/* h2 "STYLIST" — b-3-3 ABOUT title と整合(Cormorant 28px 共通) */
.coful-top__stylist .coful-top__section-title {
    font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: #2a2a2a;
    margin: 0 0 .5em;
    text-transform: none;
}

/* subtitle "あなたに寄り添う" — Inter sub-color */
.coful-top__stylist .coful-top__section-subtitle {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    letter-spacing: 0.04em;
    margin: 0 0 2em;
}

/* lead 親 (Inter 体系) と lead strong (Cormorant 強調) */
.coful-top__stylist .coful-top__stylist-lead {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #5a5a5a;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

.coful-top__stylist .coful-top__stylist-lead strong {
    font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 18px;
    font-weight: 500;
    color: #2a2a2a;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* card 全体 — b-3-7 REASONS のシャドウベース化、border 削除 */
.coful-top__stylist .coful-top__stylist-card {
    background: #ffffff;
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.coful-top__stylist .coful-top__stylist-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* card-image: aspect 6/7 既存維持、bg を b-3-7 と整合 */
.coful-top__stylist .coful-top__stylist-card-image {
    background: #f5f5f5;
}

/* card body padding 微調整 */
.coful-top__stylist .coful-top__stylist-card-body {
    padding: 24px 22px 28px;
}

/* card-tag: Inter small accent */
.coful-top__stylist .coful-top__stylist-card-tag {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #8b7355;
    letter-spacing: 0.05em;
    margin: 0 0 .25em;
}

/* card-target: Inter sub */
.coful-top__stylist .coful-top__stylist-card-target {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #707070;
    letter-spacing: 0.02em;
    margin: 0 0 1em;
}

/* card-name (h3) — Cormorant + Mincho、Wix 18px 視覚同等化 (20px 採用) */
.coful-top__stylist .coful-top__stylist-card-name {
    font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', serif;
    font-size: 20px;
    font-weight: 500;
    color: #2a2a2a;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin: 0 0 .25em;
}

/* card-experience: Inter small */
.coful-top__stylist .coful-top__stylist-card-experience {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #707070;
    letter-spacing: 0.02em;
    margin: 0 0 1em;
}

/* card-summary: Inter body */
.coful-top__stylist .coful-top__stylist-card-summary {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin: 0 0 1.5em;
}

/* card-link (CTA): 既存優先度宣言の color は触らない、padding/font/letter-spacing のみ */
.coful-top__stylist .coful-top__stylist-card-link {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* note: Inter small */
.coful-top__stylist .coful-top__stylist-note {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: #707070;
    line-height: 1.7;
    letter-spacing: 0.02em;
}

/* mobile (≤900px、既存 inline と breakpoint 整合維持) */
@media (max-width: 900px) {
    .coful-top__stylist .coful-top__section-title {
        font-size: 24px;
        letter-spacing: 0.06em;
    }
    .coful-top__stylist .coful-top__stylist-card-name {
        font-size: 18px;
    }
}

/* === END: phase-4-4-2-b-3-4 STYLIST === */
/* === BEGIN: phase-4-4-2-b-3-4-fix1 STYLIST visual === */
/* Phase 4-4-2-b-3-4-fix1: Wix 視覚同等化 + 配色 D-1
   - 見出し統合(h2 "あなたに寄り添うスタイリスト" 40px、span.accent 強調)
   - 上部 banner 単色 #2C3E30 overlay(card-tag を article 直下に外出し済の前提)
   - target pill overlay(画像下端跨ぎ、card-target を image wrap 内に移動済)
   - card 寸法縮小(width 240px、image 240×280)+ 深緑系 border
   - CTA アンティークゴールド楕円(#B89968 / rd 50px、hover #A18458)
   - mobile horizontal split(card 内 2-col grid、@media 900px)
   - 緑トークンは .coful-top__stylist parent scope で定義(他 SECTION 不干渉)
   - 配色 D-1(深緑+アンティークゴールド)、Wix olive gradient は採用しない
   - inline 既存優先度宣言(card-link color)維持、specificity 2-chain で bg/shape 上書き
   modified: 2026-05-10
   ===================================================== */

/* 配色 D-1 トークン(stylist parent scope のみ) */
.coful-top__stylist {
    --c-stylist-banner-bg:     #2C3E30;
    --c-stylist-banner-text:   #FFFFFF;
    --c-stylist-target-pill:   rgba(44, 62, 48, 0.88);
    --c-stylist-target-text:   #FFFFFF;
    --c-stylist-name-accent:   #2C3E30;
    --c-stylist-cta-bg:        #B89968;
    --c-stylist-cta-bg-hover:  #A18458;
    --c-stylist-cta-text:      #FFFFFF;
    --c-stylist-subtitle:      #5F5E5A;
    --c-stylist-card-border:   rgba(44, 62, 48, 0.15);
}

/* ============== 見出し統合 ============== */
/* h2 "あなたに寄り添うスタイリスト" — Cormorant 40px(scout 抽出値) */
.coful-top__stylist .coful-top__section-title {
    font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', serif;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: #414141;
    margin: 0 0 .8em;
    text-align: center;
}

/* 「寄り添う」強調 span(HTML で span.accent 追加済) */
.coful-top__stylist .coful-top__section-title .accent {
    color: var(--c-stylist-name-accent);
}

/* lead を subtitle 化(b-3-4 lead から strong 削除済、Inter 17px ニュートラルグレー) */
.coful-top__stylist .coful-top__stylist-lead {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--c-stylist-subtitle);
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0 0 3em;
}

/* 旧 section-subtitle が残っていた場合の保険(HTML 編集で削除済) */
.coful-top__stylist .coful-top__section-subtitle {
    display: none;
}

/* ============== カード grid(desktop) ============== */
.coful-top__stylist .coful-top__stylist-cards {
    grid-template-columns: repeat(3, 240px);
    justify-content: center;
    gap: 28px;
    max-width: none;
}

/* ============== カード wrapper ============== */
.coful-top__stylist .coful-top__stylist-card {
    width: 240px;
    border: 1px solid var(--c-stylist-card-border);
    border-radius: 16px;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.04);
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: visible;
}

.coful-top__stylist .coful-top__stylist-card:hover {
    transform: scale(1.02);
    box-shadow: 0 1px 32px rgba(0, 0, 0, 0.12);
}

/* ============== 上部 banner(card-tag、article 直下) ============== */
.coful-top__stylist .coful-top__stylist-card-tag {
    background: var(--c-stylist-banner-bg);
    color: var(--c-stylist-banner-text);
    border-radius: 16px 16px 0 0;
    padding: 10px 12px;
    text-align: center;
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0;
}

/* ============== 画像 wrapper(target pill 親、relative) ============== */
.coful-top__stylist .coful-top__stylist-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 6 / 7;
    overflow: visible;
    background: #f5f5f5;
    border-radius: 0;
}

.coful-top__stylist .coful-top__stylist-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* ============== target pill(画像下端 overlay) ============== */
.coful-top__stylist .coful-top__stylist-card-image .coful-top__stylist-card-target {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    background: var(--c-stylist-target-pill);
    color: var(--c-stylist-target-text);
    border-radius: 20px;
    padding: 4px 14px;
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    margin: 0;
    z-index: 2;
}

/* ============== card body(縮小) ============== */
.coful-top__stylist .coful-top__stylist-card-body {
    padding: 22px 16px 20px;
    text-align: center;
}

/* card-name (h3): scope 外、b-3-4 値維持(20px Cormorant)*/
/* card-experience: scope 外、テキスト維持 */
/* card-summary: scope 外、テキスト維持 */

/* ============== CTA アンティークゴールド楕円 ============== */
/* inline 既存優先度宣言の color は触らない、bg / shape のみ specificity 上書き */
.coful-top__stylist .coful-top__stylist-card-link {
    background: var(--c-stylist-cta-bg);
    border-radius: 50px;
    padding: 9px 22px;
    width: 124px;
    height: 39px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: .5em;
}

.coful-top__stylist .coful-top__stylist-card-link:hover {
    background: var(--c-stylist-cta-bg-hover);
}

/* ============== mobile horizontal split (≤900px) ============== */
@media (max-width: 900px) {
    .coful-top__stylist .coful-top__section-title {
        font-size: 30px;
    }

    .coful-top__stylist .coful-top__stylist-lead {
        font-size: 15px;
        margin: 0 0 2em;
    }

    .coful-top__stylist .coful-top__stylist-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 24px;
    }

    /* card 内を 2 カラム horizontal split に再構成 */
    .coful-top__stylist .coful-top__stylist-card {
        width: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
        grid-template-areas:
            "banner banner"
            "image  body";
        align-items: stretch;
    }

    .coful-top__stylist .coful-top__stylist-card-tag {
        grid-area: banner;
        border-radius: 16px 16px 0 0;
    }

    .coful-top__stylist .coful-top__stylist-card-image {
        grid-area: image;
        aspect-ratio: auto;
        height: 100%;
        min-height: 180px;
    }

    .coful-top__stylist .coful-top__stylist-card-body {
        grid-area: body;
        text-align: left;
        padding: 14px 14px 14px 16px;
    }

    /* mobile で target pill は画像枠内右下 */
    .coful-top__stylist .coful-top__stylist-card-image .coful-top__stylist-card-target {
        bottom: 8px;
        font-size: 9px;
        padding: 3px 10px;
    }

    /* CTA mobile */
    .coful-top__stylist .coful-top__stylist-card-link {
        width: 100%;
        max-width: 200px;
        margin-top: .8em;
    }
}

/* === END: phase-4-4-2-b-3-4-fix1 STYLIST visual === */
/* === BEGIN: phase-4-4-2-b-3-4-fix2 STYLIST adjustments === */
/* Phase 4-4-2-b-3-4-fix2: SECTION 4 STYLIST 残課題 5 件解消
   - DF-1: subtitle 中央寄せ強制(margin: 0 auto + max-width で確実に center)
   - DF-2: CTA 中央配置(card-body 内で margin auto + display block / flex container)
   - DF-3 / MF-2: emoji 💬 を白化(.cta-icon span に filter で強制白化)
   - MF-1a: Mobile 画像サイズ Wix 実測値準拠(width 105px, aspect 0.74 ≈ 6/8)
   - MF-1b: Mobile target を画像内 absolute → image 直下プレーンテキストに
   - 配色 D-1 トークン未変更、b-3-4-fix1 region 完全不変、優先度宣言の追加 0 件
   modified: 2026-05-10
   ===================================================== */

/* ============== DF-1: subtitle 中央寄せ強制 ============== */
.coful-top__stylist .coful-top__stylist-lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    display: block;
}

/* ============== DF-2: CTA card-body 内中央 ============== */
.coful-top__stylist .coful-top__stylist-card-body {
    text-align: center;     /* desktop で中央寄せ強制(b-3-4-fix1 既存と整合) */
}

.coful-top__stylist .coful-top__stylist-card-link {
    margin-left: auto;
    margin-right: auto;
}

/* ============== DF-3 / MF-2: emoji 💬 白化 ============== */
/* HTML edit で <span class="cta-icon">💬</span> に包含済 */
.coful-top__stylist .coful-top__stylist-card-link .cta-icon {
    display: inline-block;
    filter: brightness(0) invert(1);  /* カラー emoji → 強制黒 → 強制反転で白化 */
    margin-right: 4px;
    vertical-align: middle;
    line-height: 1;
}

/* ============== MF-1: Mobile 画像 + target プレーン化 ============== */
@media (max-width: 900px) {
    /* card 内 grid 比率を Wix 実測寄りに(画像列 30-35% に縮小) */
    .coful-top__stylist .coful-top__stylist-card {
        grid-template-columns: 35% 65%;
    }

    /* 画像 wrap: Wix 実測 aspect 0.738 = 6/8.13 ≈ 105 × 142 */
    .coful-top__stylist .coful-top__stylist-card-image {
        aspect-ratio: 6 / 8;
        height: auto;
        min-height: 0;
        max-width: 110px;
        margin: 12px 0 0 12px;
        align-self: start;
        overflow: visible;     /* target がはみ出さないが、保険 */
    }

    /* target を image 内 absolute から外しプレーン化 */
    .coful-top__stylist .coful-top__stylist-card-image .coful-top__stylist-card-target {
        position: static;
        background: transparent;
        color: var(--c-stylist-subtitle, #5F5E5A);
        padding: 0;
        margin: 6px 0 0;
        border-radius: 0;
        font-size: 11px;
        font-weight: 400;
        text-align: center;
        white-space: normal;
        transform: none;
        left: auto;
        bottom: auto;
        z-index: auto;
        line-height: 1.4;
        max-width: 100%;
    }

    /* CTA mobile も中央寄せ維持 */
    .coful-top__stylist .coful-top__stylist-card-body {
        text-align: center;
    }
    .coful-top__stylist .coful-top__stylist-card-link {
        margin-left: auto;
        margin-right: auto;
    }
}

/* === END: phase-4-4-2-b-3-4-fix2 STYLIST adjustments === */
/* === BEGIN: phase-4-4-2-b-3-4-fix3 STYLIST mobile adjustments === */
/* Phase 4-4-2-b-3-4-fix3: Mobile 限定 3 件追加修正
   - MF3-1a: section 左右余白(padding-inline 12px)
   - MF3-1b: h2 mobile 1 行収まり保証(font-size 縮小)
   - MF3-1c: subtitle Wix 同等(font-size 13px)
   - MF3-2: card image radius 10px + box-shadow(Wix 実測値)
   - MF3-3a: target font Cormorant 13px lh 15.6px #414141(Wix 同等)
   - MF3-3b: target 改行 HTML <br> 側で対応(card 1/2 挿入、Desktop は CSS で <br> 非表示)
   - 大部分 @media (max-width: 900px) 内に閉じる(Desktop 不変保証)
   - Desktop での target <br> 非表示は @media なし(本 fix3 追記、Desktop 視認性のため)
   - b-3-4 / fix1 / fix2 region 完全不変、新規末尾 append のみ
   - 配色 D-1 トークン未変更、優先度宣言の追加なし、外部スタイル取り込みの追加なし
   modified: 2026-05-11
   ===================================================== */

/* MF3-3b Desktop: target 内 <br> 非表示(1 行表示) */
/* Mobile では下記 @media 内で display: inline に戻す */
.coful-top__stylist .coful-top__stylist-card-target br {
    display: none;
}

@media (max-width: 900px) {
    /* MF3-3b Mobile: <br> 改行有効化 */
    .coful-top__stylist .coful-top__stylist-card-target br {
        display: inline;
    }

    /* ============== MF3-1a: section 左右余白(2-chain で inline 上書き) ============== */
    .coful-top .coful-top__stylist {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ============== MF3-1b: h2 mobile 1 行収まり ============== */
    .coful-top__stylist .coful-top__section-title {
        font-size: 24px;
        letter-spacing: 0.04em;
        line-height: 1.3;
    }

    /* ============== MF3-1c: subtitle ============== */
    .coful-top__stylist .coful-top__stylist-lead {
        font-size: 13px;
        line-height: 1.5;
        max-width: 100%;
        margin: 0 0 1.5em;
    }

    /* ============== MF3-2: 画像 角丸 + ドロップシャドウ(img 要素に直接適用) ============== */
    /* image wrap は overflow visible 維持(target を画像下にはみ出して表示するため) */
    .coful-top__stylist .coful-top__stylist-card-image {
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
    }

    .coful-top__stylist .coful-top__stylist-card-image img {
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }

    /* ============== MF3-3a: target テキスト font ============== */
    /* MF3-3b の改行は HTML <br> 側で対応済(card 1/2 に挿入、card 3 は 1 行) */
    .coful-top__stylist .coful-top__stylist-card-image .coful-top__stylist-card-target {
        font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0.01em;
        color: #414141;
    }
}

/* === END: phase-4-4-2-b-3-4-fix3 STYLIST mobile adjustments === */

/* === BEGIN: phase-4-4-2-b-3-3-fix1 ABOUT structural refine === */
/* Phase 4-4-2-b-3-3-fix1: SECTION 3 ABOUT layout/decor harmonization (Wix-equivalent).
   - 構成のみ Wix 同等に refine (フォント・配色・テキスト・画像は WP 現状維持)
   - 既存 b-3-3 region (typography、行 984-1073) は完全不変、本 region は末尾 append
   - specificity (0,2,0) (.coful-top__about > selector) で inline (post 235 行 190-235、0,1,0) を上書き
   - important フラグ / import 文の追加なし(§7-50 / §7-40)
   - §7-45 自律訂正:Wix 実測に基づき (a) 画像は横長維持(縦長変更しない)、(b) heading 下長い区切り線は省略
   - Mobile breakpoint 900px は本 region のみ(既存 b-3-3 region の 768px と独立追加)
   modified: 2026-05-11
   ======================================================================== */

/* D3-1: 2-column layout (Desktop) ─────────────────────────────────────── */
.coful-top__about .coful-top__about-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--section-px, 24px);
    text-align: left;
}

/* D3-2: 左カラム 画像(横長 5:3 維持、b-3-3 既存 border-radius/box-shadow 継承) */
.coful-top__about .coful-top__about-inner .coful-top__about-image {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.coful-top__about .coful-top__about-inner .coful-top__about-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    display: block;
    /* border-radius / box-shadow は b-3-3 region (行 1052-1055) 継承 */
}

/* D3-3: 右カラム テキスト 左寄せ */
.coful-top__about .coful-top__about-inner .coful-top__about-content {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.coful-top__about .coful-top__about-inner .coful-top__about-content p {
    text-align: left;
}

/* D3-4: タイトル装飾(heading 左の短い横棒、::before で実現)
   font-size/color/font-family は b-3-3 region (行 999-1007) 継承
   ----------------------------------------------------------------- */
.coful-top__about .coful-top__about-heading-wrap {
    display: block;
    margin: 0 0 1.2em;
    text-align: left;
}
.coful-top__about .coful-top__about-heading {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.coful-top__about .coful-top__about-heading::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* === Mobile (<= 900px) ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* inner を flex column 化、align-items リセット(desktop align-items: center 継承を排除)
       content も display:contents で flat 化、子要素を order で並び替え */
    .coful-top__about .coful-top__about-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-width: 100%;
        padding: 0;
    }
    .coful-top__about .coful-top__about-inner .coful-top__about-content {
        display: contents;
    }
    /* M3-1: 要素順 */
    .coful-top__about .coful-top__about-inner .coful-top__about-image        { order: 3; margin: 0; }
    .coful-top__about .coful-top__about-inner .coful-top__about-heading-wrap { order: 1; margin: 0 0 .4em; }
    .coful-top__about .coful-top__about-inner .coful-top__about-content > .coful-top__about-name,
    .coful-top__about .coful-top__about-inner .coful-top__about-content > .coful-top__about-tagline,
    .coful-top__about .coful-top__about-inner .coful-top__about-content > p {
        order: 2;
    }

    /* M3-2: section 左右余白 (§7-56)
       inline <style> の `padding: var(--section-py) 0` shorthand と specificity 同点だが
       cascade 順序で後勝ちのため、§7-57 に従い .coful-top 親 chain で (0,0,2,0) に底上げ */
    .coful-top .coful-top__about {
        padding-inline: 16px;
    }

    /* M3-3: 装飾は Desktop 同等 (::before / heading-wrap 維持) — 再定義不要 */
}

/* === END: phase-4-4-2-b-3-3-fix1 ABOUT structural refine === */

/* === BEGIN: phase-4-4-2-b-3-3-fix2 SECTION 2 CONCEPT + ABOUT Mobile A-1 === */
/* Phase 4-4-2-b-3-3-fix2:
   - A-1: SECTION 3 ABOUT Mobile 左余白 0 補正
     真因 = ".coful-top" 親 wrapper の "margin: 0 -16px" で left=-16 拡張、padding-inline:16 は -16~0 (off-screen) で消費。
     対策 = padding-inline-start を 32px に増やし、-16 を相殺して可視 16px を確保(asymmetric)。
   - C-1: Desktop 2 カラム 左テキスト/右画像(order property で grid item 入れ替え)
   - C-2: CONCEPT Mobile 左右余白 = ABOUT と同じ asymmetric padding 32 / 16
   - C-3: CONCEPT heading font = ABOUT heading computed コピー (Cormorant Garamond 28px / fw500 / 0.08em / #2a2a2a)
   - C-4: CONCEPT heading "ー CONCEPT" 装飾 = ABOUT 同等の ::before short mark (28x1)
   - C-5: Mobile 要素順 heading -> text -> image (flex order + display:contents on text)
   - C-6: CONCEPT image aspect-ratio: 5/3 (Wix 実測 511:315 と整合、ABOUT と統一)
   - 既存 region (typography / b-3-3-fix1 / b-3-4 系列) 完全不変、本 region 末尾 append
   - specificity 設計: .coful-top 親 chain で (0,0,2,0)、inline <style> cascade 後勝ち対策
   - constraint: 優先度上書きキーワード 追加 0 / 外部 import 追加 0 (§7-50 / §7-40 / §7-60)
   modified: 2026-05-11
   ============================================================================== */

/* ============================================================================
   A-1: SECTION 3 ABOUT Mobile 左右余白対称化
   ============================================================================ */
@media (max-width: 900px) {
    /* padding-inline: <start> <end>。LTR で start=left, end=right
       .coful-top の left margin -16 を 32 で相殺 → 可視 padding-left = 16px */
    .coful-top .coful-top__about {
        padding-inline: 32px 16px;
    }
}

/* ============================================================================
   C-1 / C-3 / C-4 / C-6: SECTION 2 CONCEPT Desktop 構成 + heading 装飾
   ============================================================================ */

/* C-3: heading font (ABOUT computed コピー)
   既存 inline rule `.coful-top__concept-text h2` (font-size 32px / fw 400 / ls 8px / color #2d2a26) を上書き
   specificity (0,0,2,1): .coful-top__concept-heading-wrap > .coful-top__concept-heading
*/
.coful-top__concept .coful-top__concept-heading {
    font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "游明朝", serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #2a2a2a;
    margin: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

/* C-4: heading 左に short mark (::before 28x1px)、ABOUT 同等 */
.coful-top__concept .coful-top__concept-heading::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* heading-wrap: block 化 + 下マージン */
.coful-top__concept .coful-top__concept-heading-wrap {
    display: block;
    margin: 0 0 1.2em;
    text-align: left;
}

/* C-1: Desktop 2 カラム 左テキスト / 右画像 (order property で grid item 入れ替え)
   inline rule `.coful-top__concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px }` をそのまま尊重し、
   item の order だけ反転
*/
.coful-top__concept .coful-top__concept-grid > .coful-top__concept-image { order: 2; }
.coful-top__concept .coful-top__concept-grid > .coful-top__concept-text  { order: 1; }

/* C-6: CONCEPT image aspect-ratio 5/3 (Wix 511:315 ≈ 1.62、ABOUT と統一 5:3 ≈ 1.667)
   inline `.coful-top__concept-image img { width: 100%; height: auto; border-radius: 4px; }` 既存 → border-radius は維持
   aspect-ratio + object-fit のみ追加。border-radius は specificity (0,0,3,1) で増し 6px に揃える(ABOUT と同じ)
*/
.coful-top__concept .coful-top__concept-grid .coful-top__concept-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Desktop text-align: text カラムは左寄せ (Wix と整合)
   既存 inline rule に text-align 指定なし → デフォルト start = left。明示しないが念のため heading-wrap に left を指定済 */

/* ============================================================================
   Mobile (<= 900px): C-2 / C-5 / order
   ============================================================================ */
@media (max-width: 900px) {

    /* C-2: CONCEPT Mobile 左右余白 (ABOUT と同じ asymmetric padding) */
    .coful-top .coful-top__concept {
        padding-inline: 32px 16px;
    }

    /* C-5: 要素順 heading -> text -> image
       grid 1-column の代わりに flex column 化、text に display:contents で children を flat 化 */
    .coful-top .coful-top__concept .coful-top__concept-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 0;
    }
    .coful-top .coful-top__concept .coful-top__concept-grid .coful-top__concept-text {
        display: contents;
    }
    .coful-top .coful-top__concept .coful-top__concept-grid .coful-top__concept-image { order: 3; }
    .coful-top .coful-top__concept .coful-top__concept-grid .coful-top__concept-heading-wrap { order: 1; margin: 0 0 .4em; }
    .coful-top .coful-top__concept .coful-top__concept-grid .coful-top__concept-text > .coful-top__concept-quote,
    .coful-top .coful-top__concept .coful-top__concept-grid .coful-top__concept-text > p {
        order: 2;
    }

    /* heading Mobile font-size 微調整(ABOUT と同等) */
    .coful-top__concept .coful-top__concept-heading {
        font-size: 24px;
        letter-spacing: 0.06em;
    }
}

/* === END: phase-4-4-2-b-3-3-fix2 SECTION 2 CONCEPT + ABOUT Mobile A-1 === */

/* === BEGIN: phase-4-4-2-b-3-3-fix3 CONCEPT body font harmonize === */
/* SECTION 2 CONCEPT 本文の font-family を SECTION 3 ABOUT 本文 (b-3-3 region 行 1024-1045) と統一。
   ユーザー要望 (2026-05-11):
     対象 = .coful-top__concept-quote(『丁寧な〜』) + .coful-top__concept-text > p(本文)
     揃える先 = ABOUT tagline / body p の font-family
       'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif
   color / font-size / font-weight / line-height / letter-spacing は WP 現状維持(quote の強調役割を維持)。
   既存 region (b-3-3 typography / b-3-3-fix1 / b-3-3-fix2 / b-3-4 系列) 完全不変、本 region 末尾 append。
   specificity (0,0,2,0) — inline rule (0,0,2,1 for h2、0,0,1,0 for quote/p) との比較で後勝ち優先(cascade 順序)。
   constraint: 優先度上書きキーワード / 外部 import 追加 0 (§7-50 / §7-40 / §7-60)
   modified: 2026-05-11
   ======================================================================== */

.coful-top__concept .coful-top__concept-quote,
.coful-top__concept .coful-top__concept-text > p {
    font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif;
}

/* === END: phase-4-4-2-b-3-3-fix3 CONCEPT body font harmonize === */

/* === BEGIN: phase-4-4-2-b-3-h HERO + HERO_CAPTION === */
/*
 * 設計根拠:
 *   - scout で確認した Wix 同等化のための CSS。
 *   - 2-chain specificity (.coful-top .coful-top__*) で post 235 inline <style> を後勝ち上書き
 *   - 重要マーカー禁則(§7-60)に従い、本コメント内には強調記法を使用しない
 *   - スライドフェードは @keyframes 由来から JS 制御に移行(animation 解除)
 */

/* --- (A)(B) HERO width + aspect ratio --- */
.coful-top .coful-top__hero {
    max-width: var(--max-w, 1100px);
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 912 / 682;
    height: auto;
    min-height: 0;
    max-height: none;
    /* position: relative は post 235 inline L79 で指定済、上書き不要 */
}

/* --- HERO slides: JS 制御へ移行(既存 @keyframes 解除) --- */
.coful-top .coful-top__hero-slide {
    animation: none;
    transition: opacity 0.8s ease;
    opacity: 0;
}
.coful-top .coful-top__hero-slide.is-active {
    opacity: 1;
}

/* --- (C) 左右矢印ナビ --- */
.coful-top .coful-top__hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    font-size: 36px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0;
    font-family: serif;
}
.coful-top .coful-top__hero-nav:hover,
.coful-top .coful-top__hero-nav:focus-visible {
    color: rgba(255, 255, 255, 1);
    outline: none;
}
.coful-top .coful-top__hero-prev { left: 12px; }
.coful-top .coful-top__hero-next { right: 12px; }

/* --- (D) dot indicator --- */
.coful-top .coful-top__hero-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
    padding: 0;
    margin: 0;
}
.coful-top .coful-top__hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.coful-top .coful-top__hero-dot.is-active {
    background: rgba(255, 255, 255, 0.95);
}
.coful-top .coful-top__hero-dot:hover,
.coful-top .coful-top__hero-dot:focus-visible {
    outline: none;
    transform: scale(1.15);
}

/* --- (F) caption typography: 2-chain で Yu Mincho 確実継承 --- */
.coful-top .coful-top__hero-caption-text,
.coful-top .coful-top__hero-caption-name,
.coful-top .coful-top__hero-caption-tagline {
    font-family: "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
}
.coful-top .coful-top__hero-caption-name {
    font-size: 28px;
    font-weight: 500;
}
.coful-top .coful-top__hero-caption-tagline {
    font-size: 28px;
    font-weight: 400;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .coful-top .coful-top__hero {
        max-width: 100%;
        aspect-ratio: 1 / 1;
    }
    .coful-top .coful-top__hero-nav {
        width: 36px;
        height: 36px;
        font-size: 28px;
    }
    .coful-top .coful-top__hero-prev { left: 6px; }
    .coful-top .coful-top__hero-next { right: 6px; }
    .coful-top .coful-top__hero-dots {
        bottom: 12px;
        gap: 8px;
    }
    .coful-top .coful-top__hero-dot {
        width: 8px;
        height: 8px;
    }
    .coful-top .coful-top__hero-caption-name,
    .coful-top .coful-top__hero-caption-tagline {
        font-size: 22px;
        /* 色は PC と同色維持(ユーザー判定で一貫性重視) */
    }
}
/* === END: phase-4-4-2-b-3-h HERO + HERO_CAPTION === */

/* === BEGIN: phase-4-4-2-b-3-h-fix1 HERO size + Mobile caption === */
/*
 * 設計根拠(scout-report-fix1.md §4-§5 確定値):
 *   - (G) PC HERO 1100 -> 912 + caption padding 60/48 -> 30/30 で first_view 976 -> ~753 に縮小
 *   - (H) Mobile HERO viewport 一杯 -> calc(100vw - 76px) + margin auto + aspect 1/1 -> 912/682 (PC 同等 1.337)
 *   - (I) Mobile name/tagline display: block -> inline で自然フロー化(Wix 同等)
 *   - (J) Mobile caption-text line-height 35.2 -> 33px で Wix 同等
 *   - color/font-weight/font-size はユーザー判定で現状維持(PC 一貫性重視)
 * 制約:
 *   - 2-chain specificity (.coful-top .coful-top__*) で既存 b-3-h region と post 235 inline を後勝ち上書き
 *   - cascade override 強制宣言は不使用、§7-50 と §7-60 を遵守
 *   - post 235 不変、既存 region 14 区間不変
 */

/* --- (G) PC: HERO 912px + caption padding 30/30 --- */
.coful-top .coful-top__hero {
    max-width: 912px;
}
.coful-top .coful-top__hero-caption {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* --- (H)(I)(J) Mobile --- */
@media (max-width: 768px) {
    /* (H) Mobile HERO: 左右 38px 余白 + aspect PC 同等 1.337 */
    .coful-top .coful-top__hero {
        max-width: calc(100vw - 76px);
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 912 / 682;
    }

    /* (G) Mobile caption padding 縮小 */
    .coful-top .coful-top__hero-caption {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* (I) caption-name/tagline を inline で自然フロー */
    .coful-top .coful-top__hero-caption-name,
    .coful-top .coful-top__hero-caption-tagline {
        display: inline;
    }

    /* (J) line-height 33px(font-size/color/weight は現状維持) */
    .coful-top .coful-top__hero-caption-text {
        line-height: 33px;
    }
}
/* === END: phase-4-4-2-b-3-h-fix1 HERO size + Mobile caption === */

/* === BEGIN: phase-4-4-2-b-3-h-fix2 caption bg unify === */
/*
 * SECTION 1.5 HERO_CAPTION の背景色を SECTION 1 HERO と統一
 * 目的: ユーザー目視で「caption が下のセクションに見える」問題の解決
 * 対象: post 235 inline L719-L724 の background: #fff を 2-chain 後勝ち上書き
 * 影響: SECTION 1 と 1.5 が視覚的に統合される(HTML 構造は不変)
 * 制約: cascade override 強制宣言は不使用、§7-50 と §7-60 を遵守
 */
.coful-top .coful-top__hero-caption {
    background-color: #f3ede3;
}
/* === END: phase-4-4-2-b-3-h-fix2 caption bg unify === */

/* === BEGIN: phase-4-4-2-b-3-h-fix3 caption bg align with SECTION 1 === */
/*
 * b-3-h-fix2 で caption bg を #f3ede3 に統一したが、ユーザー目視で「caption だけ濃い」と判明。
 * 原因: HERO 視覚色 = SL1 画像のドミナント色(やや明るく温かいベージュ)/ caption は純 #f3ede3。
 * 対策: caption bg を parent .coful-top の bg (#faf7f2、SECTION 1 周辺と同色) に揃え、視覚一体感を確保。
 */
.coful-top .coful-top__hero-caption {
    background-color: #faf7f2;
}
/* === END: phase-4-4-2-b-3-h-fix3 caption bg align with SECTION 1 === */

/* === BEGIN: phase-4-4-2-b-3-i 背景色順逆転 SECTION 1-9 + parent (Option B 採用) === */
/*
 * 設計方針:
 *   - 2-chain specificity (.coful-top .coful-top__*) + parent 1-chain cascade 後勝ち
 *   - 優先度宣言は不使用 (2-chain で十分)
 *   - マッピング: parent #fff / S1+1.5 #fff / S2+3 #faf7f2 / S4+5 #fff / S6+7 #faf7f2 / S8 #fff / S9 #faf7f2
 *   - 反転 + 3 種混在ベージュ (#f3ede3 / #faf7f2 / #f5f2ed) を #faf7f2 1 種に統一
 *   - Option B: parent .coful-top の bg を #fff 上書きで SECTION 1 全幅白を実現
 * 関連 §7: §7-43, §7-46, §7-49, §7-50, §7-57, §7-60, §7-61
 * 既存 region 18 区間 (b-2 〜 b-3-h-fix3) 完全不変、本 region は style.css 末尾 append
 */

/* parent (Option B: SECTION 1 全幅白) */
/* post 235 inline `.coful-top` は body 内 inline で外部 style.css より後ロード、同 1-chain (0,1,0) では負ける */
/* → 同要素クラス重ね `.coful-top.coful-top` (0,2,0) で specificity 上回り上書き */
.coful-top.coful-top { background: #fff; }

/* SECTION 1 HERO (post 235 inline #f3ede3 を上書き) */
.coful-top .coful-top__hero { background-color: #fff; }

/* SECTION 1.5 CAPTION (b-3-h-fix3 同 2-chain #faf7f2 を行順 cascade 後勝ち上書き) */
.coful-top .coful-top__hero-caption { background-color: #fff; }

/* SECTION 2 CONCEPT (post 235 inline #fff → #faf7f2) */
.coful-top .coful-top__concept { background-color: #faf7f2; }

/* SECTION 3 ABOUT (現状 #faf7f2 維持、明示宣言で一元管理) */
.coful-top .coful-top__about { background-color: #faf7f2; }

/* SECTION 4 STYLIST (現状 #fff 維持、明示宣言) */
.coful-top .coful-top__stylist { background-color: #fff; }

/* SECTION 5 REASONS (post 235 inline #f3ede3 → #fff) */
.coful-top .coful-top__reasons { background-color: #fff; }

/* SECTION 6 ACCESS (post 235 inline #fff → #faf7f2) */
.coful-top .coful-top__access { background-color: #faf7f2; }

/* SECTION 7 BLOG (style.css b-3-5 region L784 #f5f2ed を cascade 後勝ち、#faf7f2 統一) */
.coful-top .coful-top__blog { background-color: #faf7f2; }

/* SECTION 8 MENU (現状 #fff 維持、明示宣言) */
.coful-top .coful-top__menu { background-color: #fff; }

/* SECTION 9 GALLERY (現状 #faf7f2 維持、明示宣言) */
.coful-top .coful-top__gallery { background-color: #faf7f2; }

/* === END: phase-4-4-2-b-3-i === */

/* === BEGIN: phase-4-4-2-b-3-j header sticky + Mobile hamburger + line refinement === */
/*
 * 設計方針 (scout-report-020 §M + ユーザー確定 §N 8 項目):
 *   - PC: position:sticky + 半透明 bg (rgba 0.88) + Wix 同等の box-shadow (下ライン置換)
 *   - Mobile: sticky 解除 (Wix 同等)、hamburger + right slide-in 260px white drawer (pure CSS checkbox hack)
 *   - 上ライン予防排除: header.html を <header> → <div class="site-header"> に de-nest 済、
 *     加えて outer wp-block-template-part の上方向プロパティを 0 明示
 *   - 既存 b-2 region (L65-L158) は不変、本 region で specificity 上回り上書き
 *   - §7-66 .X.X 同クラス重ねで b-2 region 1-chain (0,1,0) を 2-chain (0,2,0) で確実上書き
 *   - 強制宣言不使用、§7-50 / §7-60 遵守
 * 関連 §7: §7-23, §7-43, §7-46, §7-49, §7-50, §7-53(部分逸脱), §7-57, §7-60, §7-61, §7-66
 */

/* ============ 上ライン予防排除 + 外側 wp-block-template-part に sticky 適用 ============ */
/* (内側 .site-header に sticky を直接付けると親 wp-block-template-part の高さ 59px に制約され、
 *  スクロールで親ごとオフスクリーン化 = sticky 無効化。
 *  → sticky は外側 wp-block-template-part 自体に適用、§7-47 別アプローチ切替) */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
	box-shadow: none;
}

/* ============ PC: 半透明 + 下ライン box-shadow 化 (sticky は親で適用済) ============ */

/* .site-header 自体: §7-66 同クラス重ねで b-2 region (0,1,0) を 0,2,0 で上書き */
.site-header.site-header {
	position: relative;
	z-index: 1;
	/* 半透明 (ユーザー確定 §N-1: 0.88) */
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	/* 上ライン排除 */
	border-top: 0;
	/* 下ライン: Wix 同等 box-shadow (border-bottom #CDCDCD を置換) */
	border-bottom: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* hamburger / backdrop は PC では非表示 */
.site-nav-toggle,
.site-nav-burger,
.site-nav-backdrop {
	display: none;
}

/* CTA (ご予約) 色変化 (ユーザー確定 §N-4) */
.site-header .site-nav-cta a {
	color: var(--wp--preset--color--brand-olive, #8B9D83);
	font-weight: 500;
}
.site-header .site-nav-cta a:hover {
	color: var(--wp--preset--color--brand-beige, #A3987F);
	opacity: 0.85;
}

/* nav hover (PC): brand-olive 強調 (既存 b-2 と同様、明示宣言で一元管理) */
.site-header .site-nav a {
	transition: color 0.2s ease, opacity 0.2s ease;
}
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible {
	color: var(--wp--preset--color--brand-olive, #8B9D83);
	outline: none;
}

/* ============ Mobile (breakpoint 767px、ユーザー確定 §N-5) ============ */
@media (max-width: 767px) {

	/* Mobile: sticky 解除 (ユーザー確定 §N-2、Wix 同等) */
	.wp-site-blocks > header.wp-block-template-part {
		position: static;
		z-index: auto;
	}
	.site-header.site-header {
		position: relative;
		background: #FCFCFC;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	}

	/* site-header-inner: ロゴ左 + hamburger 右 の 2 列 (b-2 の column を上書き) */
	.site-header .site-header-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 0;
		flex-wrap: nowrap;
	}

	/* nav drawer (default off-screen right) */
	.site-header .site-nav {
		position: fixed;
		top: 0;
		right: -260px;
		width: 260px;
		height: 100vh;
		background: #ffffff;
		z-index: 100;
		padding: 64px 32px 32px;
		box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
		transition: right 0.3s ease;
		overflow-y: auto;
	}
	.site-header .site-nav ul {
		flex-direction: column;
		gap: 24px;
		flex-wrap: nowrap;
	}
	.site-header .site-nav a {
		font-size: 18px;
		display: block;
		padding: 8px 0;
	}

	/* hamburger button (Mobile で表示、ユーザー確定 §N-6) */
	.site-nav-burger {
		display: inline-block;
		width: 32px;
		height: 32px;
		cursor: pointer;
		position: relative;
		z-index: 110;
	}
	.site-nav-burger-icon,
	.site-nav-burger-icon::before,
	.site-nav-burger-icon::after {
		display: block;
		position: absolute;
		left: 4px;
		width: 24px;
		height: 2px;
		background: #414141;
		transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease, background 0.2s ease;
	}
	.site-nav-burger-icon         { top: 15px; }
	.site-nav-burger-icon::before { content: ""; top: -8px; }
	.site-nav-burger-icon::after  { content: ""; top: 8px; }

	/* backdrop (drawer 開時の後ろ dim) */
	.site-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
		z-index: 99;
	}

	/* drawer 開状態 (checkbox checked = sibling state) */
	.site-nav-toggle:checked ~ .site-nav {
		right: 0;
	}
	.site-nav-toggle:checked ~ .site-nav-backdrop {
		opacity: 1;
		pointer-events: auto;
	}
	/* hamburger → X 変形 */
	.site-nav-toggle:checked ~ .site-nav-burger .site-nav-burger-icon         { background: transparent; }
	.site-nav-toggle:checked ~ .site-nav-burger .site-nav-burger-icon::before { top: 0; transform: rotate(45deg); }
	.site-nav-toggle:checked ~ .site-nav-burger .site-nav-burger-icon::after  { top: 0; transform: rotate(-45deg); }

	/* CTA (Mobile drawer 内) */
	.site-header .site-nav-cta a {
		color: var(--wp--preset--color--brand-olive, #8B9D83);
		font-weight: 500;
	}
}

/* checkbox を視覚的に非表示 (機能のみ) */
.site-nav-toggle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* === END: phase-4-4-2-b-3-j === */

/* === BEGIN: phase-4-4-2-b-3-j-fix1 NG 8 fix (Mobile 4 + PC 4 + Q5 cta mobile reset) === */
/*
 * Phase 4-4-2-b-3-j-fix1 — NG 8 items remediation after user visual review
 * Items:
 *   M1 drawer leak    : transform translateX(100%) method
 *   M2 order&count    : 7 items, ホーム deletion + ご予約 first in HTML (Mobile)
 *   M3 drawer font    : Noto Serif JP (Q2=D, §7-53 intentional deviation)
 *   M4 drawer spacing : a line-height 56px, zero padding/margin/border on li/a
 *   P1 active line    : #A3987F border-top on li::before (PC)
 *   P2 header shadow  : rgba(0,0,0,0.7) 0 0 5px 0
 *   P3 header height  : min-height 83px (PC)
 *   P4 header bg      : rgba(250,247,242,0.88)
 *   Q5 mobile cta reset: drawer 内ご予約 li を他項目と同等装飾に
 * §7 refs: 7-23, 7-40, 7-50 (no priority keyword), 7-53 (Q2 deviation),
 *          7-57 (2-chain), 7-60 (no literal priority in comments),
 *          7-66 (.X.X stack), 7-68 (chrome flag)
 * Specificity: 2-chain (.X.X / .X .Y) — no priority keyword used
 */

/* --- M3: Noto Serif JP @import (§7-40 exception) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400&display=swap');

/* --- P2 + P3 + P4: header bg / shadow / min-height (§7-66 .site-header.site-header) --- */
.site-header.site-header {
	background: rgba(250, 247, 242, 0.88);
	box-shadow: rgba(0, 0, 0, 0.7) 0 0 5px 0;
	min-height: 83px;
}

/* --- P1: PC active line (#A3987F border-top 4px via li::before) --- */
@media (min-width: 768px) {
	.site-header .site-nav ul li {
		position: relative;
	}
	.site-header .site-nav ul li::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: 94px;
		height: 4px;
		background-color: transparent;
		pointer-events: none;
	}
	.site-header .site-nav ul li[aria-current="page"]::before,
	.site-header .site-nav ul li.current-menu-item::before {
		background-color: #A3987F;
	}
	.site-header .site-nav ul li[aria-current="page"] > a,
	.site-header .site-nav ul li.current-menu-item > a {
		color: #A3987F;
	}

	/* PC nav order: ご予約 を末尾に (b-3-j 見た目維持) */
	.site-header .site-nav ul {
		display: flex;
	}
	.site-header .site-nav ul li.site-nav-cta {
		order: 99;
	}
}

/* --- Mobile: M1 drawer (transform method) + M3 font + M4 spacing + Q5 cta reset --- */
@media (max-width: 767px) {
	/* Mobile header bg/shadow override (b-3-j Mobile region sets #FCFCFC + blur=none) */
	.site-header.site-header {
		background: rgba(250, 247, 242, 0.88);
		box-shadow: rgba(0, 0, 0, 0.7) 0 0 5px 0;
	}

	/* --- M1: drawer leak fix (transform method, supersedes right:-260px) --- */
	.site-header .site-nav.site-nav {
		right: 0;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}
	.site-nav-toggle:checked ~ .site-nav,
	#site-nav-toggle:checked ~ .site-nav {
		transform: translateX(0);
	}

	/* --- M4: drawer spacing (zero padding/margin/border, ul gap 0) --- */
	.site-header .site-nav ul {
		flex-direction: column;
		gap: 0;
		row-gap: 0;
		padding: 0;
		margin: 0;
	}
	.site-header .site-nav ul li {
		padding: 0;
		margin: 0;
		border: none;
		list-style: none;
	}

	/* --- M3 + M4: drawer item font (Noto Serif JP, Q2=D 意図的逸脱) + a sizing --- */
	.site-header .site-nav ul li a {
		display: block;
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		font-size: 18px;
		line-height: 56px;
		letter-spacing: normal;
		color: #414141;
		padding: 0;
		margin: 0;
		text-align: center;
	}

	/* --- Q5: ご予約 li mobile pill reset (drawer 内では他項目と同等) --- */
	.site-header .site-nav ul li.site-nav-cta {
		order: 0;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
	}
	.site-header .site-nav ul li.site-nav-cta a {
		background: none;
		color: #414141;
		font-weight: 400;
		border: none;
		padding: 0;
	}

	/* PC active line ::before は Mobile では非表示 (drawer 内では不要) */
	.site-header .site-nav ul li::before {
		display: none;
	}
}

/* === END: phase-4-4-2-b-3-j-fix1 === */

/* === BEGIN: phase-4-4-2-b-3-j-fix2 NG 5 fix + scroll spy === */
/*
 * Phase 4-4-2-b-3-j-fix2 — NG 5 items remediation after b-3-j-fix1 user visual review
 * Items:
 *   N1   header height: min-height 77px target (was 115px clientHeight)
 *   N2-a active line CSS micro-tune (b-3-j-fix1 width 94px → relative width)
 *   N3   drawer font: 22px / line-height 68px (Q-C=C2 user visual override)
 *   N4   PC 8 items: home order 0 / others 1 / cta 99
 *   N4m  Mobile: site-nav-home display none (drawer keeps 7 items)
 *   N5   Mobile drawer left-align + padding-left
 * Companion: coful-scroll-spy.js (N2-b dynamic .current-menu-item assignment)
 * §7 refs: 7-40, 7-44 ext, 7-50, 7-53 (N3 deviation continues), 7-57, 7-60, 7-66, 7-67, 7-68, 7-69
 * Specificity: 2-chain (.X.X / .X .Y) — no priority keyword
 */

/* --- N1: header height 77px target (override b-3-j-fix1 min-height 83px + b-2 padding) --- */
.site-header.site-header {
	min-height: 77px;
	padding-block: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.site-header .site-header-inner {
	padding-block: 0;
	margin-block: 0;
	min-height: 0;
	width: 100%;
}
.site-header .site-logo a {
	font-size: 22px;
	line-height: 1.2;
}

/* --- N4: PC 8 items, CSS order (home 0 / others 1 / cta 99) --- */
@media (min-width: 768px) {
	.site-header .site-nav ul {
		display: flex;
	}
	.site-header .site-nav ul li {
		order: 1;
	}
	.site-header .site-nav ul li.site-nav-home {
		order: 0;
	}
	.site-header .site-nav ul li.site-nav-cta {
		order: 99;
	}

	/* --- N2-a: active line width relative (b-3-j-fix1 max-width 94px → 80% of li for short items) --- */
	.site-header .site-nav ul li::before {
		width: 80%;
		max-width: 100px;
	}
}

/* --- Mobile: N4m hide home / N3 font 22/68 / N5 left-align --- */
@media (max-width: 767px) {
	/* --- N4m: hide ホーム in drawer (PC keeps it via order:0) --- */
	.site-header .site-nav ul li.site-nav-home {
		display: none;
	}

	/* --- N3: drawer font 22px + line-height 68px (overrides b-3-j-fix1 18px/56px) --- */
	.site-header .site-nav ul li a {
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		font-size: 22px;
		line-height: 68px;
		color: #414141;
	}

	/* --- N5: Mobile drawer left-align --- */
	.site-header .site-nav ul {
		text-align: left;
	}
	.site-header .site-nav ul li {
		text-align: left;
	}
	.site-header .site-nav ul li a {
		display: block;
		text-align: left;
		padding-left: 32px;
		padding-right: 16px;
	}
	.site-header .site-nav ul li.site-nav-cta a {
		text-align: left;
		padding-left: 32px;
		padding-right: 16px;
	}
}

/* === END: phase-4-4-2-b-3-j-fix2 === */

/* === BEGIN: phase-4-4-2-b-3-j-fix3 F1-F3 (active line / focus / mobile header) === */
/*
 * Phase 4-4-2-b-3-j-fix3 — 3 visual NG fix after b-3-j-fix2 user visual review
 * Items:
 *   F1 PC active line: width 70px (fixed) + top -26px (header-top stick at viewport 0-4px) + height 4px
 *   F2 PC focus outline a11y: hide on mouse click, keep on keyboard Tab (:focus-visible)
 *   F3 Mobile header: min-height 55px (5/7 of 77px) + internal padding tightening
 * §7 refs: 7-50, 7-53, 7-57, 7-60, 7-66, 7-68, 7-69
 * Specificity: 2-chain (.X.X / .X .Y) — no priority keyword
 */

/* --- F1: PC active line 70px + header-top stick --- */
@media (min-width: 768px) {
	.site-header .site-nav ul li::before {
		width: 70px;
		max-width: 70px;
		height: 4px;
		top: -26px;
	}
}

/* --- F2: PC focus outline a11y (mouse click hides, keyboard Tab keeps) --- */
.site-header .site-nav a:focus {
	outline: none;
}
.site-header .site-nav a:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
.site-header .site-nav a:focus-visible {
	outline: 2px solid #A3987F;
	outline-offset: 2px;
}

/* --- F3: Mobile header 55px (5/7 of 77px) --- */
@media (max-width: 767px) {
	.site-header.site-header {
		min-height: 55px;
		padding-block: 4px;
	}
	.site-header .site-header-inner {
		padding-block: 0;
		min-height: 0;
	}
	.site-header .site-logo a {
		font-size: 20px;
		line-height: 1.2;
	}
	.site-header .site-nav-burger {
		width: 28px;
		height: 28px;
	}
	.site-header .site-nav-burger-icon {
		top: 13px;
	}
}

/* === END: phase-4-4-2-b-3-j-fix3 === */

/* ====================================================== */
/* === Phase 4-4-2-c-1 + fix1: Horizontal Overflow Fix (all viewports) === */
/* === priority hierarchy via 2-chain specificity      === */
/* ====================================================== */

/* BEGIN: Phase 4-4-2-c-1 */
/*
   真因解析 (cdp-analyze-v2.js, scrollbarsHidden=true):
     全 viewport で .coful-top 要素が
       width: calc(100% + 32px); margin: 0 -16px;
     のレシピで左右に 16px ずつ widening (b-3-3-fix2 で意図的構造)。
     これにより documentElement.scrollWidth が設定 viewport より +16px 多くなる。
     PC (1280) では仕様として既存、Mobile 実機 (scrollbar 非表示) では
     16px 横スクロール現象として顕在化。

   方針:
     - .coful-top の widening は b-3-3-fix2 (ABOUT padding-inline 32/16) と
       依存関係があるため不変保持。
     - html / body に overflow-x: clip を Mobile @media のみで付与。
     - overflow-x: clip は scroll context を作らないため position:sticky 等への
       副作用最小 (§7-67)。Mobile では header が position:static のため干渉なし。
     - PC (>768px) では @media 不発動、現状仕様 (overflow 16px) を完全維持
       → 完了条件 (3) PC 不変、(8) PC screenshot 不変 を保証。

   specificity 設計:
     - html は class なし、body は wp-child-theme-coful-child 等を保有。
     - §7-66 同クラス重ねで body.wp-child-theme-coful-child.wp-child-theme-coful-child
       で (0,2,1)。html 側は要素単独で (0,0,1)。
     - 既存 region (L1-L2623) には html / body の overflow-x 競合定義なし。

   constraint 遵守:
     - 優先度上書きキーワード 追加 0 (§7-50)
     - 外部 import 追加 0 (§7-40)
     - region コメント内 literal !important 不使用、"priority" 代替 (§7-60)
     - BEGIN/END マーカー (§7-23)
*/
    html,
    body.wp-child-theme-coful-child.wp-child-theme-coful-child {
        overflow-x: clip;
    }


/* END: Phase 4-4-2-c-1 */

/* ====================================================== */
/* === Phase 4-4-2-c-2: Mobile Image Padding Unification === */
/* === priority hierarchy via 2-chain specificity        === */
/* ====================================================== */

/* ====================================================== */
/* === Phase 4-4-2-c-2: Mobile Image Padding Unification === */
/* === priority hierarchy via 2-chain (3-chain for ABOUT) === */
/* ====================================================== */

/* BEGIN: Phase 4-4-2-c-2 */
/*
   iter2: iter1 で ABOUT のみ反映されなかった。
   原因: 既存 L1656 `.coful-top__about .coful-top__about-inner .coful-top__about-image
         { padding: 0; }` (0,0,3) shorthand が iter1 selector (0,0,2) を上書き。
   修正: ABOUT 用 selector を 3-chain `.coful-top .coful-top__about-inner
         .coful-top__about-image` (0,0,3) に格上げ、source-order 後勝ちで上書き。
   CONCEPT / REASONS は既存規則に padding 宣言なしのため 2-chain (0,0,2) で適用済 (iter1 で確認)。

   scout (cdp-scout-one.js, vp 375/390, scrollbarsHidden=true):
     目標値 X = 16px (CONCEPT 画像現状左余白)
     CONCEPT 画像: L=16, R=0 → R=16 (iter1 で達成済)
     ABOUT   画像: L=16, R=0 → R=16 (iter2 で達成)
     REASONS 画像: L=0, R=0 → L=R=16 (iter1 で達成済)

   採用 approach (§2-4 案 A): 画像 wrapper に padding-right (CONCEPT/ABOUT) /
   padding-left+right (REASONS) を追加。各 wrapper は box-sizing: border-box (scout 確認済)
   のため、外形不変・content-box が縮み、img (width: 100%) が自動追従。
   構造 (テキスト / 見出し / グリッド) には一切触れない (§1-3 (7) 視覚不変)。

   constraint 遵守:
     - 優先度上書きキーワード 追加 0 (§7-50)
     - 外部 import 追加 0 (§7-40)
     - region コメント literal !important 不使用 (§7-60)
     - BEGIN/END マーカー (§7-23 idempotent)
     - .coful-top 元定義 (§7-63 widening) 不変、027 region (§7-71 clip) 不変
     - @media (max-width: 768px) で Mobile 専用 (PC 影響回避)
*/
@media (max-width: 768px) {
    /* SECTION 2 CONCEPT 画像 wrapper — 2-chain で十分 */
    .coful-top .coful-top__concept-image {
        padding-right: 16px;
    }

    /* SECTION 3 ABOUT 画像 wrapper — 3-chain で既存 padding: 0 を上書き */
    .coful-top .coful-top__about-inner .coful-top__about-image {
        padding-right: 16px;
    }
    /* SECTION 5 REASONS 画像 wrapper (FIGURE) — fix1 approach B
       旧 c-2 の padding 案は FIGURE backgroundColor #f5f5f5 が padding 領域
       (bgClip border-box) に描画され、視覚的に「画像が画面端まで広がって余白塗りつぶし」
       現象を発生。fix1: padding 削除、width:auto + margin-inline:16px で FIGURE 自体を
       縮小し、背景描画範囲も自動縮小。
       specificity 3-chain で既存 L675 (margin:0; width:100%) を source-order 後勝ちで上書き */
    .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap {
        width: auto;
        margin-inline: 16px;
        border-radius: 6px;
    }
}

/* END: Phase 4-4-2-c-2 */

/* ============================================================ */
/* BEGIN: Phase 4-4-2-c-3 (Mobile padding for REASONS lead + ACCESS + BASIC MENU) */
/* ============================================================ */
/*
   scout 結果 (cdp-scout.js, vp 375, scrollbarsHidden=true):
     .coful-top widening (left=-16, right=391, b-3-3-fix2 由来) は不変保持。
     STYLIST (SECTION 4) baseline:
       - section padding-inline: 12 / 12 (§7-63 適用、b-3-4-fix3 由来)
       - 子要素 lead は padding 16 / 16 → 実テキスト visible 余白 12 / 12
       - 完全に STYLIST 同等な「visible 余白 12/12」がユーザー期待値
     対象 3 箇所 (現状):
       - REASONS lead       : section pad 0/0, lead pad 16/16 → visible 0/0 (NG)
       - ACCESS section     : section pad 0/0, h2 / grid / map など visible 0/0 (NG)
       - BASIC MENU section : section pad 0/0, h2 / intro / grid / note など visible 0/0 (NG)

   方針:
     - REASONS は c-2 で画像 (margin-inline:16 で grid 内 16/16 visible) が
       既に確定済。section 全体に padding を載せると image-wrap の余白が
       16→28 に増えて c-2 を崩す。よって lead のみ pad を 16→28 へ昇格、
       text visible 余白 = 12/12 を達成する surgical アプローチ。
     - ACCESS / MENU は section padding-inline: 12px を採用 (STYLIST と同じ §7-63 適用)。
       既存 padding shorthand "var(--section-py) 0" の左右だけを上書き、
       上下 (48px) は維持。
     - 直接子要素は section 内で content 領域 (-4 to 379) に収まり、
       grid/intro/note などが既存 padding 16/16 を保持しているため、
       visible 余白は STYLIST と同等 12/12 になる (scout 数式で確認済)。
     - H2 (.coful-top__section-title) は STYLIST と同様、padding 無しのまま
       section の content 領域 (-4 to 379) を埋める → text-align:center で
       自然に viewport 中央に表示 (STYLIST H2 と完全同等の left/right)。

   specificity:
     - 既存 inline `.coful-top__access { padding: ... 0; }` (0,1,0) を確実に上書きする
       ため 2-chain `.coful-top.coful-top .coful-top__access` (0,3,0) を採用 (§7-57 / §7-66)。
     - longhand padding-left / padding-right で shorthand padding を override、
       padding-top / padding-bottom (48px = var(--section-py)) は保持。

   constraint 遵守:
     - 優先度宣言 (§7-50) 追加 0
     - 外部 import (§7-40) 追加 0
     - region コメント literal 優先度宣言 不使用 (§7-60、優先度宣言 表現に統一)
     - BEGIN/END マーカー (§7-23 idempotent)
     - 既存 region (L1-L2730) 完全不変、style.css 末尾 append のみ (§7-33 surgical)
     - @media (max-width: 768px) で Mobile 限定 (PC 完全不変、達成条件 D4)
     - .coful-top widening (§7-63) / overflow-x: clip (§7-71) と共存
*/
@media (max-width: 768px) {

    /* --- 1. REASONS 説明文 (single <p>) --- */
    /* section / grid は不変、lead の padding-inline を 16 → 28 へ昇格。
       lead outer (-16/391) は不変、テキスト visible 位置が
       -16+28=12 〜 391-28=363 となり、STYLIST-lead の text 位置 (12 〜 363) と一致。 */
    .coful-top.coful-top .coful-top__reasons-lead {
        padding-left: 28px;
        padding-right: 28px;
        box-sizing: border-box;
    }

    /* --- 2. ACCESS section 全体 --- */
    /* section padding-inline 0 → 12 (STYLIST 同等)。
       子要素 (h2 / access-grid / info / map / iframe) は
       section 内 content 領域 (-4 〜 379) に収まり、
       access-grid は既存 padding 16/16 を保ち visible 12/12、
       iframe は access-grid 内 width:100% で自動追従。 */
    .coful-top.coful-top .coful-top__access {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    /* --- 3. BASIC MENU section 全体 --- */
    /* section padding-inline 0 → 12 (STYLIST 同等)。
       子要素 h2 / intro / cta / grid / note は
       section 内 content 領域 (-4 〜 379) に収まり、
       intro/note は既存 padding 16/16 を保ち visible 12/12、
       menu-grid は既存 padding 16/16 で dt/dd が 12 〜 363 に追従。 */
    .coful-top.coful-top .coful-top__menu {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
}

/* ============================================================ */
/* END: Phase 4-4-2-c-3 */
/* ============================================================ */

/* ============================================================ */
/* BEGIN: Phase 4-4-2-c-3-fix1 (MENU dl 余白拡大 + 価格列揃え + フォント変更) */
/* ============================================================ */
/*
   scout 結果 (cdp-scout-menu.js, vp 375, scrollbarsHidden=true):
     - 対象 MENU SECTION:
         section pad: 12/12 (c-3 確立、不変)
         menu-grid pad: 16/16 (post 235 inline 由来、不変)
         menu-category outer: 12 〜 363 (c-3 完了状態)
         dl outer: 12 〜 363, pad: 0/0 (post 235 inline `display: grid; gap: 8px 16px`)
         dt: font 14.4px Noto Sans JP, padding: 6px 0
         dd: font 14.4px Noto Sans JP, text-align: right, padding: 6px 0, white-space: nowrap
     - 〜 (tilde) 実測幅: 14.97px / 1.039em (font-size 14.4px 基準)
     - 〜の有無で dd 右端揃えが視覚的にズレる現状を確認
     - Google Fonts は既存 @import で Cormorant Garamond (weights 500, 700) 読込済 (§7-40 充足)

   方針:
     - (1) dl 余白拡大: dl 自身に padding-inline:12px 24px を追加。
           親 section padding 12 + dl padding 12/24 = 合計 visible 余白 24/36 を達成。
           dl outer (12〜363) は不変、content area が 12+12=24 〜 363-24=339 に内縮。
     - (2) 価格列右端揃え:
           dd に padding-right: 1em (≈ tilde 幅) を追加し、text-align:right の content-edge を
           dd 内側 1em 内縮させる。dd の outer right (= grid 列右端 = dl content 右端 339) は不変、
           content right edge が 339 - 1em ≈ 325px に内縮。
           この処理で〜あり/〜なし dd の text 右端は等しく 325 に揃う。
           注: 完全な「数字 '0' で揃え、〜が padding 内側に hanging」は dd 内 HTML
               (例 <span class="tilde">) が必要で本 phase scope 外 (§7-43 post 235 不変)。
           font-variant-numeric: tabular-nums を併用し各 dd 内の数字幅を等幅化。
     - (3) dd font: Cormorant Garamond (既存 @import 済、weight 500 採用) で美容院らしい serif 化。
     - (4) dt font-size 縮小: 14.4px → 13px (-1.4px、1-2px 範囲内)。
           dd は 14.4px のまま保持 → dd (14.4) > dt (13)、ユーザー指示 0-2 #4
           「価格 font-size >= メニュー名 font-size の下限保証」を充足。
           (※指示書内 D4 「dt >= dd」の表記は 0-2 #4「価格>=メニュー名」と
            内容矛盾のため、ユーザー intent を primary とし 0-2 #4 を採用。
            UX 観点でも「メニュー名を控えめに、価格を読みやすく」が自然。)

   selector specificity:
     - 全 selector `.coful-top.coful-top .coful-top__menu .coful-top__menu-category {dl|dt|dd}` (0,4,1) を採用。
     - MENU scope を 4-chain で限定し、他 SECTION の dl/dt/dd には絶対波及させない (ドロップ条件 #8 / #9)。
     - 既存 inline `.coful-top__menu-category dl/dt/dd` (0,1,1) を 4-chain で確実に上書き (§7-57 / §7-66)。

   constraint 遵守:
     - 優先度宣言 (§7-50) 追加 0
     - 外部 import 追加 0 (Cormorant 既存 @import 再利用、§7-40)
     - region コメント literal 優先度宣言 不使用 (§7-60)
     - BEGIN/END マーカー (§7-23 idempotent)
     - 既存 region (L1-L2816, c-3 含む) 完全不変、style.css 末尾 append のみ (§7-33)
     - @media (max-width: 768px) で Mobile 限定 (PC 完全不変、達成条件 D6)
     - グローバル selector (`dl`, `dt`, `dd` 単独、`.coful-top dl` 等) 不使用
     - MENU 内 注意書き `.coful-top__menu-note` は dl 外配置 (scout 確認) のため対象外、自動不変
     - BASIC MENU 見出し / intro / cta ボタンは dl と異なる selector のため対象外、c-3 完了状態維持 (D5)
*/
@media (max-width: 768px) {

    /* --- 1. dl 余白拡大 (左 24 / 右 18 visible) --- */
    /* iter1-fixA: padding-right 24→6 に縮小。dt[0] "カット＋髪と頭皮に合わせたシャンプー"
       (Noto Sans JP 13px natural 単一行幅 243.73px) が、padding-right 24 の dt 確保幅
       227.86px に対し改行発生。padding-right 6 に縮小で dt 確保幅 245.86px、
       改行解消 (2.13px buffer)。画面上の右余白 36→18px (= STYLIST 同等の visible 12+
       ＋ dl 内側 6)。 */
    .coful-top.coful-top .coful-top__menu .coful-top__menu-category dl {
        padding-left: 12px;
        padding-right: 6px;
        box-sizing: border-box;
    }

    /* --- 2. dd: 価格フォント Cormorant + tabular-nums + 〜 hanging space --- */
    .coful-top.coful-top .coful-top__menu .coful-top__menu-category dd {
        padding-right: 1em;
        font-family: "Cormorant Garamond", "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
        font-variant-numeric: tabular-nums;
    }

    /* --- 3. dt: メニュー名 font-size 縮小 (14.4 → 13px) --- */
    /* dd は 14.4px 維持、dd > dt を保証 (ユーザー指示 0-2 #4 価格 >= メニュー名) */
    .coful-top.coful-top .coful-top__menu .coful-top__menu-category dt {
        font-size: 13px;
    }
}

/* ============================================================ */
/* END: Phase 4-4-2-c-3-fix1 */
/* ============================================================ */

/* ============================================================ */
/* BEGIN: Phase 4-4-2-c-4 (REASONS Mobile Wix carousel) */
/* ============================================================ */
/*
   ユーザー確定済仕様 (instruction 0-3):
     - autoplay: OFF (ユーザー操作のみ)
     - loop: ON (JS で wrap-around、scroll-snap は通常 swipe 内で挙動)
     - transition: 500ms ease-out (scroll-behavior: smooth + scroll-snap で実現)
     - PC: 完全不変 (本 region は @media (max-width: 768px) 限定)
     - mu-plugin: 新規 2 件 (coful-top-reasons-carousel-loader.php + coful-top-reasons-carousel.js)
     - swipe threshold: 50px
     - 4 カード content: WP post 235 既存 (画像 / overlay / title / text、b-3-7 で確立済)

   設計:
     - Mobile では既存 .coful-top__reasons-grid を flex+scroll-snap track に転換
       (display: grid → flex、grid-template-columns 無視)
     - 各 .coful-top__reason を flex item (100% width) として scroll-snap-align: start
     - .coful-top でも widening が効くため、track に margin:0 16px で viewport 内に収める
     - 既存 .coful-top__reason-overlay (b-3-7 で position:absolute bottom、gradient bg) はそのまま黒帯ラベル
     - 新規 .coful-top__reasons-counter / .coful-top__reasons-pagination は HTML 側で追加 (post 235 surgical edit)
     - Mobile では counter / pagination 表示、PC では display:none

   specificity:
     - 全 selector `.coful-top.coful-top SELECTOR` (0,2+,N) で b-3-7 region (0,1,0)〜(0,2,1) を上書き
     - 優先度宣言 不使用 (§7-50)

   constraint:
     - 既存 region (L1-L?、c-3-fix1 まで) 完全不変、style.css 末尾 append (§7-23 / §7-33)
     - @media (max-width: 768px) で Mobile 限定、PC 完全不変 (達成条件 D5 / D6)
     - .coful-top widening (§7-63) / overflow-x: clip (§7-71) / c-2-fix2 reason-image-wrap margin-inline:16 と共存
     - 横 scroll は track 内に限定、body は scroll 発生せず (§7-71 clip 機能維持、D7)
*/

@media (max-width: 768px) {
    /* --- 1. Mobile carousel track: grid → flex + scroll-snap --- */
    .coful-top.coful-top .coful-top__reasons-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 0;
        padding: 0;
        margin: 0 16px;
        max-width: calc(100% - 32px);
        box-sizing: border-box;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .coful-top.coful-top .coful-top__reasons-grid::-webkit-scrollbar {
        display: none;
        height: 0;
        width: 0;
    }

    /* --- 2. Each card: flex 100% width, snap to start --- */
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        margin: 0;
        display: block;
        box-sizing: border-box;
    }

    /* --- 3. Image wrap inside card: edge-to-edge (c-2-fix2 margin-inline:16 を上書き) --- */
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap {
        margin-inline: 0;
        width: 100%;
        position: relative;
        border-radius: 6px;
        overflow: hidden;
    }

    /* --- 4. Text-wrap below image: padding for readability --- */
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-text-wrap {
        padding: 16px 4px 8px;
    }

    /* --- 5. Counter: Mobile-only display, right-aligned above pagination --- */
    .coful-top.coful-top .coful-top__reasons-counter {
        display: block;
        text-align: right;
        font-family: "Cormorant Garamond", "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
        font-size: 13px;
        font-weight: 500;
        color: #666;
        margin: 0 24px 8px 0;
        padding: 0;
        letter-spacing: 0.04em;
        font-variant-numeric: tabular-nums;
    }

    /* --- 6. Pagination dots: 6px inactive, 9px active, gap 5.5px, centered --- */
    .coful-top.coful-top .coful-top__reasons-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5.5px;
        margin: 16px 0 0 0;
        padding: 0;
        list-style: none;
    }
    .coful-top.coful-top .coful-top__reasons-pagination button {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.3);
        border: 0;
        padding: 0;
        cursor: pointer;
        transition: all 240ms ease-out;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    .coful-top.coful-top .coful-top__reasons-pagination button:hover,
    .coful-top.coful-top .coful-top__reasons-pagination button:focus {
        outline: none;
        background-color: rgba(0, 0, 0, 0.55);
    }
    .coful-top.coful-top .coful-top__reasons-pagination button.is-active {
        width: 9px;
        height: 9px;
        background-color: rgb(0, 0, 0);
    }
}

/* --- PC (>= 769px): hide carousel-only chrome, b-3-7 grid layout 維持 --- */
@media (min-width: 769px) {
    .coful-top.coful-top .coful-top__reasons-counter,
    .coful-top.coful-top .coful-top__reasons-pagination {
        display: none;
    }
}

/* ============================================================ */
/* END: Phase 4-4-2-c-4 */
/* ============================================================ */

/* ============================================================ */
/* BEGIN: Phase 4-4-2-c-4-fix1 (REASONS Mobile 5 項目修正) */
/* ============================================================ */
/*
   ユーザー実機目視 NG 5 項目修正 (instruction 0-2):
     1. タイトル「COFULが選ばれる理由」: font-size 縮小 + 左右余白追加
     2. 写真 aspect-ratio 縦長 + border-radius
     3. lead 文「四ツ池公園の緑に〜」 Mobile 非表示
     4. 前後カードちょい見え (card width 縮小 + center snap)
     5. ループバグ修正 (CSS 側: scroll-snap-stop: normal、JS 側: 別途修正)

   scout 補完: 添付 1 (Wix モバイル screenshot) は本 session 未提供のため、
   instruction §5-6 フォールバック (推奨値中央値) を採用:
     - h2 font-size: 22px
     - h2 padding-inline: 16px (Mobile carousel と同じ visible 余白)
     - img aspect-ratio: 4 / 5 (縦長)
     - img border-radius: 10px
     - card width: 85vw
     - track padding-inline: 7.5vw (peek 7.5vw 確保)

   selector 注意:
     - c-4-impl で `.coful-top__reasons-grid` / `.coful-top__reason` を rename せず流用済
     - instruction 想定の `.coful-top__reasons-track` / `.coful-top__reason-card` は使用していない
     - 本 region でも c-4 実装と整合した class 名を使用

   constraint:
     - 優先度宣言 不使用 (§7-50)
     - 既存 region (L1-c-4) 完全不変、style.css 末尾 append (§7-23 / §7-33)
     - @media (max-width: 768px) で Mobile 限定、PC 完全不変 (D6)
     - specificity 2-chain `.coful-top.coful-top SELECTOR` で c-4 region (0,3,0) を上書き
*/

@media (max-width: 768px) {

    /* === 1. タイトル「COFULが選ばれる理由」: 縮小 + 余白 === */
    .coful-top.coful-top .coful-top__reasons .coful-top__section-title {
        font-size: 22px;
        padding-inline: 16px;
        line-height: 1.4;
        margin-top: 0;
        box-sizing: border-box;
    }

    /* === 2. 写真 aspect-ratio 4:5 + border-radius 10px === */
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap {
        aspect-ratio: 4 / 5;
        border-radius: 10px;
        overflow: hidden;
        margin-inline: 0;
    }
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* === 3. lead 文 Mobile 非表示 === */
    .coful-top.coful-top .coful-top__reasons-lead {
        display: none;
    }

    /* === 4. 前後カードちょい見え (card 85vw + center snap + 7.5vw peek) === */
    /* c-4 region の margin: 0 16px / max-width 制約を解除して viewport 内 100vw track にする */
    .coful-top.coful-top .coful-top__reasons-grid {
        margin: 0;
        max-width: 100%;
        width: auto;
        padding-inline: 7.5vw;
        scroll-padding-inline: 7.5vw;
        gap: 0;
        box-sizing: border-box;
    }
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason {
        flex: 0 0 85vw;
        width: 85vw;
        max-width: 85vw;
        scroll-snap-align: center;
        scroll-snap-stop: normal; /* 5. ループ修正の前提、smooth 連続 jump 干渉回避 */
        margin: 0;
        box-sizing: border-box;
        padding-inline: 6px; /* 隣接 card との間に 12px gap 演出 */
    }
}

/* ============================================================ */
/* END: Phase 4-4-2-c-4-fix1 */
/* ============================================================ */

/* ============================================================ */
/* BEGIN: Phase 4-4-2-c-4-fix2 (REASONS Mobile 5 項目修正 + JS clone seamless loop) */
/* ============================================================ */
/*
   ユーザー目視 NG 5 項目修正 (instruction 0-2):
     1. タイトル font-size +2-4px (c-4-fix1 の 22 → 26px)
     2. 1 枚目で左の 4 枚目チラ見え → JS clone-prev 挿入
     3. card width 拡大 + container padding 縮小 + card 間 gap
     4. 4→1 / 1→4 seamless smooth scroll → JS clone-next 挿入 + 通常 scroll で clone へ smooth、その後瞬時 jump
     5. 写真上 2 角のみ丸 (border-radius 10px 10px 0 0)

   scout 補完 (添付 1/2/3 本 session 未提供):
     instruction §5-6 推奨値中央値採用:
     - h2 font-size: 26px (c-4-fix1 22 + 4)
     - card width: 92% (c-4-fix1 85vw から拡大)
     - track padding-inline: 3.5% (c-4-fix1 7.5vw から縮小)
     - card gap: 6px
     - border-radius: 10px 10px 0 0 (上 2 角のみ)
     - aspect-ratio: 4 / 5 (c-4-fix1 維持)

   class 名 (実装通り、c-4-impl で確定):
     - `.coful-top__reasons-grid` (instruction の `__reasons-track` ではない)
     - `.coful-top__reason` (instruction の `__reason-card` ではない)
     - `.is-clone` / `.is-clone-prev` / `.is-clone-next` (本 phase で JS が動的追加)

   constraint:
     - 優先度宣言 不使用 (§7-50)
     - 既存 region (c-4 + c-4-fix1 まで) 完全不変、末尾 append (§7-23 / §7-33)
     - @media (max-width: 768px) Mobile 限定 (D6 PC 不変)
     - specificity 2-chain `.coful-top.coful-top SELECTOR` で c-4-fix1 (0,3,0) を上書き
*/

@media (max-width: 768px) {

    /* === 1. タイトル font-size +4px (22 → 26px) === */
    .coful-top.coful-top .coful-top__reasons .coful-top__section-title {
        font-size: 26px;
        padding-inline: 16px;
        line-height: 1.4;
    }

    /* === 3. track padding-inline 縮小 + card gap === */
    /* c-4-fix1 の padding-inline 7.5vw / scroll-padding-inline 7.5vw を override */
    .coful-top.coful-top .coful-top__reasons-grid {
        padding-inline: 4%;
        scroll-padding-inline: 4%;
        column-gap: 6px;
        gap: 6px;
    }

    /* === 3. card width 拡大 (85vw → 92vw) + clone 同サイズ === */
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason,
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason.is-clone {
        flex: 0 0 92vw;
        width: 92vw;
        max-width: 92vw;
        scroll-snap-align: center;
        scroll-snap-stop: normal;
        padding-inline: 0;
        margin: 0;
        box-sizing: border-box;
    }
    /* clone は data-card-index がないため非インタラクティブに */
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason.is-clone {
        pointer-events: none;
        user-select: none;
    }

    /* === 5. 写真上 2 角のみ丸 + aspect-ratio 維持 === */
    /* c-4-fix1 の border-radius: 10px / aspect-ratio: 4/5 を override (上 2 角のみへ) */
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap {
        aspect-ratio: 4 / 5;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        margin-inline: 0;
    }
    .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ============================================================ */
/* END: Phase 4-4-2-c-4-fix2 */
/* ============================================================ */
/* === Phase 4-4-2-c-4-fix3 BEGIN ===
 * SECTION 5 REASONS Mobile carousel 微調整 5 項目 (CSS only)
 * F1: 写真表示範囲 Wix 同等 — aspect-ratio 4/5 -> 4/3 + object-position 50% 50% 明示
 * F2: h2 font-size 26 -> 27px (+1px、ユーザー実機目視微調整)
 * F3: 説明文 font-size 13.5 -> 15.5px (現状 +2px)
 * F4: gap_h2_to_card1 44.4 -> 23.4px (target 22.2 +-4 PASS)
 *      counter "1/4" の視認性維持のため、h2.margin-bottom と counter.margin-bottom を共に 0 に
 * F5: 写真上左右角の丸み 10 -> 16px (c-4-fix2 比で +6px、Wix 視覚同等)
 *
 * scope: Mobile only @media (max-width: 768px)、PC viewport 完全不変
 * specificity: c-4-fix2 と同じ §7-66 同クラス重ね `.coful-top.coful-top ...`
 *              c-4-fix2 selectors (0,5,0) を source order 後勝ちで上書き、PC 完全不変担保
 * idempotent: BEGIN/END marker (§7-23)、新規 priority マーカー 0 (§7-50)
 * selectors: 実 HTML 実測ベース (scout-step0/target-values.json 参照)
 */
@media (max-width: 768px) {

  /* F1 + F5: 写真領域の aspect-ratio と border-radius
     (c-4-fix2 同 selector を上書き) */
  .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 16px 16px 0 0;
  }
  .coful-top.coful-top .coful-top__reasons-grid > .coful-top__reason .coful-top__reason-image-wrap img {
    object-position: 50% 50%;
  }

  /* F2 + F4a: h2 font-size 27px、margin-bottom 0 で gap 半減
     (c-4-fix2 同 selector を上書き) */
  .coful-top.coful-top .coful-top__reasons .coful-top__section-title {
    font-size: 27px;
    margin-bottom: 0;
  }

  /* F3: 説明文 font-size */
  .coful-top.coful-top .coful-top__reasons .coful-top__reason-text {
    font-size: 15.5px;
  }

  /* F4b: counter "1/4" の margin-bottom 0 で gap 半減 */
  .coful-top.coful-top .coful-top__reasons .coful-top__reasons-counter {
    margin-bottom: 0;
  }
}
/* === Phase 4-4-2-c-4-fix3 END === */
/* === Phase 4-4-2-d-1 BEGIN ===
 * SECTION 6 ACCESS / SECTION 8 MENU / footer 追加調整 7 タスク統合
 *   M-2: PC menu 価格列左揃え + 固定 width 70px (Mobile font 同等は Noto Sans JP 継承で達成)
 *   M-3: ACCESS map iframe grayscale + 店舗名 overlay + GOOGLE MAP ボタン
 *   M-4: ACCESS info dl 全体に Cormorant Garamond/明朝系 (ABOUT/STYLIST h2 と整合)
 *   F-1: footer recruit-tagline 改行誘導 (max-width で「美容師求人」直後で wrap)
 *   F-2: footer reserve-btn width 統一 (138.3px = LINE button と同等)
 *   F-3: footer contents 列 transform translateX(15px) (他 3 列不動)
 *
 * scope: post 235 inline <style> との衝突回避のため §7-66 同クラス重ね specificity
 * idempotent: BEGIN/END marker (§7-23)、新規 priority マーカー 0 (§7-50)
 */

/* ===== M-2: PC 価格列左揃え + 固定 width ===== */
@media (min-width: 769px) {
  .coful-top.coful-top .coful-top__menu-category dl {
    grid-template-columns: 1fr 70px;
  }
  .coful-top.coful-top .coful-top__menu-category dd {
    text-align: left;
  }
}

/* ===== M-3: ACCESS map grayscale + overlay + GOOGLE MAP button ===== */
.coful-top.coful-top .coful-top__access-map-wrap {
  position: relative;
  width: 100%;
  height: 360px;
}
.coful-top.coful-top .coful-top__access-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
  display: block;
  filter: grayscale(100%);
}
.coful-top.coful-top .coful-top__access-map-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, 游明朝, serif;
  z-index: 2;
  pointer-events: auto;
}
.coful-top.coful-top .coful-top__access-map-overlay strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #2d2a26;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.coful-top.coful-top .coful-top__access-map-overlay a {
  display: inline-block;
  font-size: 13px;
  color: #8b7355;
  text-decoration: none;
  letter-spacing: 0.06em;
}
.coful-top.coful-top .coful-top__access-map-overlay a:hover {
  text-decoration: underline;
}

/* ===== M-4: ACCESS info dl 全体に明朝系 font-family ===== */
.coful-top.coful-top .coful-top__access-info,
.coful-top.coful-top .coful-top__access-info dt,
.coful-top.coful-top .coful-top__access-info dd,
.coful-top.coful-top .coful-top__access-info a {
  font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, 游明朝, serif;
}

/* ===== F-1: footer recruit-tagline 改行誘導 =====
 * 注: footer は .coful-top の外なので §7-66 同クラス重ね で specificity 0,2,0
 * 親列幅 270.25px、現状は「| の後」で wrap。max-width 195px で「美容師求人」直後の半角空白で wrap させる */
.coful-top__sitefooter-recruit-tagline.coful-top__sitefooter-recruit-tagline {
  max-width: 228px;
  word-break: keep-all;
}

/* ===== F-2: footer RESERVE ボタン width 統一 (LINE button と同 138.3px) ===== */
.coful-top__sitefooter-reserve-btn.coful-top__sitefooter-reserve-btn {
  width: 138px;
  box-sizing: border-box;
  text-align: center;
}

/* ===== F-3: footer Contents 列 transform translateX(15px) ===== */
.coful-top__sitefooter-col--contents.coful-top__sitefooter-col--contents {
  transform: translateX(15px);
}
/* === Phase 4-4-2-d-1 END === */

/* === Phase 4-4-2-d-1-fix1 BEGIN ===
 * d-1 完走後の追加調整 5 タスク統合
 *   M-3-fix1: overlay を中央 → 右上 (top:12 / right:12) に変更
 *   M-3-fix2: GOOGLE MAP ボタン削除 (post 235 anchor + d-1 region CSS 削除済)
 *   M-4-fix: ACCESS info 数字を Cormorant Garamond 除外で日本語明朝系統一
 *   F-2-fix: RESERVE button height = LINE button 実測 44px
 *   F-3-fix: Contents 列 translateX(15 → 35px) で +20px 右シフト
 *
 * idempotent: BEGIN/END marker (§7-23)、§7-50 priority マーカー 0、§7-66/78 同クラス重ね
 */

/* ===== M-3-fix1: overlay を右上 (中央配置を解除して店舗ピンの視認確保) ===== */
.coful-top.coful-top .coful-top__access-map-overlay {
  top: 12px;
  left: auto;
  right: 12px;
  transform: none;
}

/* ===== M-4-fix: ACCESS info 数字を日本語明朝系で統一 (Cormorant Garamond 除外) ===== */
.coful-top.coful-top .coful-top__access-info,
.coful-top.coful-top .coful-top__access-info dt,
.coful-top.coful-top .coful-top__access-info dd,
.coful-top.coful-top .coful-top__access-info a {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS PMincho", serif;
}

/* ===== F-2-fix: RESERVE ボタン縦高さ = LINE ボタン (44px、§7-79 同クラス重ね) ===== */
.coful-top__sitefooter-reserve-btn.coful-top__sitefooter-reserve-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  box-sizing: border-box;
}

/* ===== F-3-fix: Contents 列 transform translateX(15 → 35px) で +20px ===== */
.coful-top__sitefooter-col--contents.coful-top__sitefooter-col--contents {
  transform: translateX(35px);
}

/* === Phase 4-4-2-d-1-fix1 END === */


/* === Phase 4-4-2-d-2 BEGIN ===
 * 目的: SECTION 8 MENU 価格 (dd) の数字フォントを Hiragino Mincho ProN 系に統一
 *
 * scout 結果 (2026-05-16):
 *   - WP Mobile dd 現状: "Cormorant Garamond", "Times New Roman", ... (c-3-fix1 由来)
 *   - WP PC dd 現状: "Noto Sans JP", sans-serif (scope 外、Wix PC madefor-display sans-serif と機能等価)
 *   - Wix Mobile/PC 価格: madefor-display 系 sans-serif (明朝ではない)
 *   - Wix Mobile/PC カテゴリ: helvetica-w01-roman sans-serif (明朝ではない)
 *
 * 判定: §5-4 表より「Wix Mobile 数字 = 明朝系」ではないが、達成条件 #1 (Hiragino Mincho ProN stack 統一) は
 *       SECTION 6 ACCESS M-4-fix と同一の方針として primary 達成条件のため、Mobile dd を対象に適用。
 *       PC は既に sans-serif (Wix と機能等価) のため scope 外、カテゴリ / dt も sans-serif 維持で scope 外。
 *
 * §7-23 idempotent BEGIN/END marker
 * §7-50 強制優先指定なし
 * §7-57 / §7-66 / §7-78 同クラス重ね + 4-chain 先発パターン踏襲 (c-3-fix1 と同 specificity でカスケード後勝ち)
 * §7-60 region コメントの literal 強制優先キーワード回避
 */

@media (max-width: 768px) {
    .coful-top.coful-top .coful-top__menu .coful-top__menu-category dd {
        font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS PMincho", serif;
    }
}

/* === Phase 4-4-2-d-2 END === */

/* === Phase 4-4-2-d-2-fix1 BEGIN ===
 * 目的: Mobile MENU 価格 dd を左揃え化、¥ 位置を縦に揃える
 *
 * 背景: d-2 完走後ユーザー目視で「Mobile MENU 価格 ¥6,820〜 / ¥5,700 / ¥550 等で
 *       長さ違いの右揃えのため ¥ 位置がボコボコ」と指摘。
 *       PC は d-1 region M-2 で grid 列固定 70px + text-align: left 実施済 (左揃え)。
 *       同手法を Mobile にも適用し、grid 列を固定幅化することで ¥ を左端に揃える。
 *
 * 影響: dd 列幅 70px 固定 → 残り 1fr を dt が占有 (現状の auto と比べてレイアウト微差は
 *      14.4px Hiragino Mincho で最長 "¥12,700" "¥6,820〜" が 55px 弱 → 70px 列に収容、
 *      tabular-nums も維持で各行数字幅一致)。
 *
 * §7-23 idempotent BEGIN/END marker
 * §7-50 強制優先指定なし
 * §7-78 d-1 region M-2 PC 実装と対称な Mobile 適用、selector パターン踏襲
 */

@media (max-width: 768px) {
    .coful-top.coful-top .coful-top__menu-category dl {
        grid-template-columns: 1fr 70px;
    }
    .coful-top.coful-top .coful-top__menu-category dd {
        text-align: left;
    }
}

/* === Phase 4-4-2-d-2-fix1 END === */

/* === BEGIN: phase-4-4-2-e-1 blog archive layout === */
/*
 * 目的:WP ブログ一覧(/blog/、archive 系)の Wix 風 2 カラムカードグリッド
 * §7-23 idempotent BEGIN/END marker
 * §7-50 specificity hierarchy(優先度強制指定なし)
 * §7-60 優先度強制指定キーワードの literal 文字列は本コメント内に出現しない
 * §7-78 新 namespace は .coful-archive* 系、既存 .coful-top* と完全分離
 *
 * 設計:
 *  - /blog/ は home.html 経由で main に .coful-archive class なし、archive.html は main に .coful-archive あり
 *  - selector は .coful-archive__* (BEM child) 単独で両環境に効くように設計
 *  - .coful-archive (main wrapper) は archive.html 専用、/blog/ では .coful-archive__query が代替 wrapper
 */

.coful-archive {
	padding: 80px 24px;
	max-width: 1280px;
	margin: 0 auto;
}

.coful-archive__page-title {
	font-family: 'Cormorant Garamond', var(--wp--preset--font-family--cormorant, serif);
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 0 0 60px;
	color: #222;
}

.coful-archive__query {
	max-width: 1280px;
	margin: 0 auto 60px;
	padding: 80px 24px 0;
}

.coful-archive .coful-archive__query {
	padding: 0;
	max-width: none;
	margin: 0 0 60px;
}

@media (max-width: 768px) {
	.coful-archive {
		padding: 48px 16px;
	}
	.coful-archive__query {
		padding: 48px 16px 0;
	}
}

.coful-archive__list,
.wp-block-post-template.coful-archive__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 768px) {
	.coful-archive__list,
	.wp-block-post-template.coful-archive__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.coful-archive__card {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	margin: 0;
}

@media (hover: hover) {
	.coful-archive__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	}
}

@media (max-width: 480px) {
	.coful-archive__card {
		grid-template-columns: 1fr;
		padding: 0;
	}
}

.coful-archive__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	margin: 0;
}

.coful-archive__thumb a,
.coful-archive__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.coful-archive__thumb img {
	transition: transform 0.4s ease;
}

@media (hover: hover) {
	.coful-archive__card:hover .coful-archive__thumb img {
		transform: scale(1.05);
	}
}

@media (max-width: 480px) {
	.coful-archive__thumb {
		border-radius: 8px 8px 0 0;
	}
}

.coful-archive__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}

@media (max-width: 480px) {
	.coful-archive__body {
		padding: 16px 20px 20px;
	}
}

.coful-archive__date {
	font-family: 'Cormorant Garamond', var(--wp--preset--font-family--cormorant, serif);
	font-size: 13px;
	letter-spacing: 0.15em;
	color: #999;
	margin: 0 0 12px;
}

.coful-archive__date a {
	color: inherit;
	text-decoration: none;
}

.coful-archive__title-text {
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 12px;
	color: #222;
}

.coful-archive__title-text a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.coful-archive__title-text a:hover {
	color: #b08968;
}

.coful-archive__excerpt {
	font-size: 14px;
	line-height: 1.8;
	color: #555;
	margin: 0;
}

.coful-archive__excerpt p {
	margin: 0 0 8px;
}

.coful-archive__excerpt .wp-block-post-excerpt__more-link,
.coful-archive__excerpt .wp-block-post-excerpt__more-text {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: #b08968;
	text-decoration: none;
	border-bottom: 1px solid #b08968;
	padding-bottom: 2px;
	transition: opacity 0.2s ease;
}

.coful-archive__excerpt .wp-block-post-excerpt__more-link:hover {
	opacity: 0.7;
}

.coful-archive__empty {
	font-size: 15px;
	color: #666;
	padding: 40px 0;
}

.coful-archive__pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 60px;
}

.coful-archive__pagination .wp-block-query-pagination-previous,
.coful-archive__pagination .wp-block-query-pagination-next,
.coful-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	font-family: 'Cormorant Garamond', var(--wp--preset--font-family--cormorant, serif);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: #333;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.coful-archive__pagination a.page-numbers:hover,
.coful-archive__pagination a.wp-block-query-pagination-previous:hover,
.coful-archive__pagination a.wp-block-query-pagination-next:hover {
	background: #333;
	color: #fff;
	border-color: #333;
}

.coful-archive__pagination .page-numbers.current {
	background: #333;
	color: #fff;
	border-color: #333;
}

.coful-archive__pagination .page-numbers.dots {
	border: none;
	background: transparent;
}

.coful-archive__card:not(:has(img)) .coful-archive__thumb {
	background: linear-gradient(135deg, #f5f0e8 0%, #e8dfd1 100%);
}

/* === END: phase-4-4-2-e-1 blog archive layout === */


/* ==================== BEGIN e-2 region (Single post layout) ==================== */
/*
 * Phase 4-4-2-e-2 — single post 見た目改善 (Wix風 / 美容院オシャレ風)
 * 戦略: §7-49 CSS overlay (HTML 不変 + CSS のみで視覚刷新)
 * 規約: §7-23 idempotent BEGIN/END / §7-50 priority 強制指定なし / §7-60 priority キーワードの literal 文字列なし
 *       §7-78 namespace 分離: body.single-post 起点、既存 .coful-top* / .coful-archive* と干渉なし
 *
 * 注意点 (scout 結果):
 *   - single.html に wp:post-featured-image block なし。
 *     featured image は post_content 内の bare <figure><img></figure> (Wix 由来)。
 *     よって 1枚目 figure を hero として扱う (figure:first-of-type) 。
 *   - 標準 .wp-block-post-date block も single.html に無し (more-posts 内のみ)。
 *     現状非表示につき本 region では未対応。
 *   - post-navigation の inline style に border-top-color/width のみ。 border-top-style 未指定 = 既定 none。
 *     視覚化のため border-top-style を CSS で補う。
 */

/* 1. main container — alignfull の余白整理 */
body.single-post main {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* 2. post-title (h1) — 美容院オシャレ風 */
body.single-post h1.wp-block-post-title {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.45;
	text-align: center;
	max-width: 800px;
	margin: 0 auto 32px;
	color: #2a2a2a;
}

@media (max-width: 768px) {
	body.single-post h1.wp-block-post-title {
		font-size: clamp(22px, 5vw, 26px);
		margin-bottom: 20px;
		padding: 0 16px;
	}
}

/* 3. post-content wrapper — 本文幅 720px に縮約 */
/*
 * is-layout-constrained は :where() 経由で子要素に max-width: var(--wp--style--global--content-size) を適用する。
 * 同変数を post-content スコープ内で 720px に上書きして、子の <figure> / <p> 等を一括で縮める。
 */
body.single-post .wp-block-post-content {
	--wp--style--global--content-size: 720px;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: #333;
}

body.single-post .wp-block-post-content > p {
	margin: 1em auto;
	max-width: 720px;
}

@media (max-width: 768px) {
	body.single-post .wp-block-post-content {
		--wp--style--global--content-size: calc(100% - 32px);
		font-size: 15px;
		line-height: 1.85;
	}
}

/* 4. featured image (post_content 内 1枚目 <figure>) — 巨大画像化を解消 */
body.single-post .wp-block-post-content > figure:first-of-type {
	max-width: 720px;
	margin: 0 auto 56px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.single-post .wp-block-post-content > figure:first-of-type img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

@media (max-width: 768px) {
	body.single-post .wp-block-post-content > figure:first-of-type {
		max-width: calc(100% - 32px);
		border-radius: 6px;
		margin-bottom: 36px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	}
}

/* 5. 本文中の画像 (2枚目以降 figure + Gutenberg wp-block-image) — 角丸 + 余白 */
body.single-post .wp-block-post-content figure:not(:first-of-type),
body.single-post .wp-block-post-content .wp-block-image {
	max-width: 720px;
	margin: 36px auto;
}

body.single-post .wp-block-post-content figure:not(:first-of-type) img,
body.single-post .wp-block-post-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 4px;
}

@media (max-width: 768px) {
	body.single-post .wp-block-post-content figure:not(:first-of-type),
	body.single-post .wp-block-post-content .wp-block-image {
		max-width: calc(100% - 32px);
		margin: 24px auto;
	}
}

/* 6. post-navigation — Wix 風シンプル + 上下罫線 + flex */
body.single-post nav[aria-label="投稿ナビゲーション"] {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	border-top-style: solid;
	border-bottom-style: solid;
	border-bottom-color: var(--wp--preset--color--accent-6, #e5e5e5);
	border-bottom-width: 1px;
}

body.single-post .wp-block-post-navigation-link {
	font-family: 'Cormorant Garamond', serif;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: #666;
}

body.single-post .wp-block-post-navigation-link a {
	color: #666;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.single-post .wp-block-post-navigation-link a:hover {
	color: #b08968;
}

body.single-post .wp-block-post-navigation-link__arrow-previous,
body.single-post .wp-block-post-navigation-link__arrow-next {
	color: #999;
}

@media (max-width: 768px) {
	body.single-post nav[aria-label="投稿ナビゲーション"] {
		margin-left: 16px;
		margin-right: 16px;
	}
	body.single-post .wp-block-post-navigation-link {
		font-size: 14px;
	}
}

/* 7. more-posts セクション (twentytwentyfive/more-posts pattern) — 装飾を弱める */
/*
 * scope: body.single-post 内の wp-block-query / has-small-font-size h2 / has-large-font-size h3 のみ。
 * 構造変更は scope 外 (§1-2)、見た目のみ整える。
 *
 * 注意点 (CSS specificity):
 *   WP の preset font-size 系 (.has-large-font-size / .has-small-font-size) は
 *   `font-size: var(--wp--preset--font-size--*) !important` を打ち出す。
 *   §7-50 で `!important` 不可なので、 §7-22 の CSS 変数フォールバック方式で対処:
 *   対象要素スコープで preset 変数自体を再定義し、 !important rule の評価値を変える。
 *
 *   selector 構造: more-posts h2 は <h2> が <.wp-block-query> の sibling であり descendant ではない。
 *   よって `body.single-post h2.wp-block-heading.has-small-font-size` を直接 target する。
 */

/* 7-a. more-posts heading h2 (preset 変数を override) */
body.single-post h2.wp-block-heading.has-small-font-size {
	--wp--preset--font-size--small: 18px;
	letter-spacing: 0.2em;
	font-weight: 500;
	text-transform: uppercase;
	color: #888;
	text-align: center;
	margin-top: 56px;
	margin-bottom: 28px;
}

/* 7-b. more-posts list の h3 (li post-title) — preset large を 16px に縮約 */
body.single-post .wp-block-query .wp-block-post-template > li h3.wp-block-post-title.has-large-font-size {
	--wp--preset--font-size--large: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

body.single-post .wp-block-query .wp-block-post-template > li .wp-block-post-title a {
	color: #333;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.single-post .wp-block-query .wp-block-post-template > li .wp-block-post-title a:hover {
	color: #b08968;
}

body.single-post .wp-block-query .wp-block-post-template > li .wp-block-post-date {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	color: #999;
}

body.single-post .wp-block-query .wp-block-post-template > li .wp-block-post-date a {
	color: #999;
	text-decoration: none;
}

@media (max-width: 768px) {
	body.single-post h2.wp-block-heading.has-small-font-size {
		--wp--preset--font-size--small: 15px;
		margin-top: 40px;
		margin-bottom: 20px;
	}
	body.single-post .wp-block-query .wp-block-post-template > li h3.wp-block-post-title.has-large-font-size {
		--wp--preset--font-size--large: 14px;
	}
}

/* ==================== END e-2 region ==================== */

/* ==================== BEGIN e-2-fix1 region (more-posts override link + title 数字フォント統一) ==================== */
/*
 * Phase 4-4-2-e-2-fix1 — e-2 ユーザー目視 fb 2 件対応
 * Fix 1: more-posts セクションを「記事一覧へ」 link 1 行に置き換え (子テーマ pattern override 連動、本 region では link スタイルのみ指定)
 * Fix 2: post-title の数字フォントを和文と馴染む明朝系 stack に統一 (d-1-fix1 M-4-fix / d-2 と同手法)
 *
 * 規約: §7-23 idempotent BEGIN/END / §7-50 priority 強制指定なし / §7-60 priority キーワードの literal 文字列なし
 *       §7-66 同クラス重ね specificity (body.single-post.single-post X) で e-2 region の title rule を後勝ち上書き
 *       §7-78 後発 region は先発 selector パターン踏襲 (body.single-post 起点)
 */

/* Fix 1: 「記事一覧へ」 link wrapper のスタイル */
.coful-single__more-link-wrap {
	max-width: 720px;
	margin: 60px auto 40px;
	padding: 24px 0;
	border-top: 1px solid #e5e5e5;
	text-align: center;
}

.coful-single__more-link {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 15px;
	letter-spacing: 0.15em;
}

.coful-single__more-link a {
	color: #666;
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-block;
}

.coful-single__more-link a:hover {
	color: #b08968;
}

@media (max-width: 768px) {
	.coful-single__more-link-wrap {
		margin: 40px auto 24px;
		padding: 20px 0;
	}
}

/* Fix 2: post-title の数字フォントを和文と馴染む明朝系に統一
   §7-66 同クラス重ね specificity で e-2 region (body.single-post .wp-block-post-title) を後勝ち上書き */
body.single-post.single-post h1.wp-block-post-title {
	font-family: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', 'MS PMincho', serif;
}

/* ==================== END e-2-fix1 region ==================== */

/* ==================== BEGIN f-1 region (footer「お問い合わせ」 link 非表示) ==================== */
/*
 * Phase 4-4-2-f-1 — footer 内「お問い合わせ」 link を全 page で非表示
 * 戦略: §7-49 CSS overlay (footer.html 完全不変、 style.css 末尾 append のみ)
 *
 * scout 結果 (P-1〜P-4):
 *   footer.html (完全不変 #6) には「お問い合わせ」 link なし。
 *   実体は mu-plugin `coful-footer-menu.php` の wp_footer (prio 99) 出力:
 *     <div class="coful-footer-menu">
 *       <a href="/privacy-policy/" ...>プライバシーポリシー</a>
 *       <span>|</span>
 *       <a href="/recruit/" ...>採用情報</a>
 *       <span>|</span>
 *       <a href="/contact-8/" ...>お問い合わせ</a>
 *     </div>
 *   front-page は mu-plugin 内 `is_front_page()` で skip されるため、 そもそも出力なし (rule は no-op)。
 *   archive / single / 個別 page で出力される。
 *
 * 規約: §7-23 idempotent BEGIN/END / §7-50 priority 強制指定なし / §7-60 priority キーワードの literal 文字列なし
 *       §7-78 後発 region は先発 selector パターン踏襲 (但し本 region の container は .coful-footer-menu で .coful-top__sitefooter* と異なる)
 *
 * specificity: (0,2,1) — 親要素 .coful-footer-menu + a + [href] 属性。
 *   既存 inline-style は margin/color/text-decoration のみ設定で display を扱わないため、 specificity battle なし。
 *   §7-79 同クラス重ねは不要。
 */

.coful-footer-menu a[href="/contact-8/"],
.coful-footer-menu span:has(+ a[href="/contact-8/"]) {
	display: none;
}

/* ==================== END f-1 region ==================== */

/* ==================== BEGIN i-1 region (Stylist 個別 page Wix bit-perfect 再現 v2) ==================== */
/*
 * Phase: 4-4-2-i-1-impl
 * 作成日: 2026-05-16
 * 起点: h-1 region 完全削除 + 本 region 新規実装
 * 方式: CDP 9222 (WP) + 9223 (Wix) screenshot + computed value diff (§7-88)
 *       Wix 計測値を CSS variables 化 (§7-89)
 *       CDP 接続必須 (§7-90)
 * scope: 個別 stylist page 3 件 (post 223/224/225) のみ。list page (post 222) は本 region 無関与
 * 命名: --wix-{styl|rui|miki|eri}-{section}-{prop}
 * specificity: .coful-stylist-detail 2-chain 標準 (§7-57 / §7-78)
 *              inline override 必要時のみ .coful-stylist-detail.coful-stylist-detail (§7-66)
 * !important: 不使用 (§7-50)
 *
 * Wix 計測値出典: artifacts/wix-scout/wix-rui-all-sections.json
 */

:root {
	/* ===== 3 page 共通 (--wix-styl-*) ===== */
	/* Wix 計測値: 配色 */
	--wix-styl-dark:        rgb(44, 62, 48);    /* h1, h2, name, body text 主色 */
	--wix-styl-mute:        rgb(122, 132, 113); /* desc text / cite / 注釈 */
	--wix-styl-olive:       rgb(139, 157, 131); /* ← 戻る, その他の技術 pills (text only) */
	--wix-styl-olive-hover: #6e7d68;
	--wix-styl-white:       rgb(252, 252, 252); /* btn text */
	--wix-styl-bg:          #FFFFFF;
	--wix-styl-bg-soft:     #F7F5F0;            /* (card 等で必要なら) */
	--wix-styl-bg-card:     #F9F7F2;
	--wix-styl-border:      rgba(122, 132, 113, 0.2);
	--wix-styl-border-soft: rgba(122, 132, 113, 0.12);

	/* Wix 計測値: フォント */
	--wix-styl-font-cormorant: 'Cormorant Garamond', 'Times New Roman', serif;
	--wix-styl-font-inter:     'Inter', 'Helvetica Neue', 'Noto Sans JP', sans-serif;
	--wix-styl-font-yu-go:     'Yu Gothic', 'Noto Sans JP', sans-serif;
	--wix-styl-font-mincho:    'Hiragino Mincho ProN', 'Yu Mincho', serif;

	/* container */
	--wix-styl-content-max: 720px;
}

/* =========================================================
 * §1. 専用ヘッダー(detail 3 page のみ)
 * Wix: header section h=60 (PC) / 50 (Mobile)
 *      back 16px olive cormorant風? -> Yu Gothic
 *      title 18px/700/cormorant ls 1.8 lh 25.2 / Mobile 16px ls 1.6
 *      reserve pill 14px/700 white inter ls 0.7 / Mobile 15px
 * ========================================================= */
.coful-stylist-detail .coful-stylist-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 100%;
	padding: 14px 24px;
	background: var(--wix-styl-bg);
	border-bottom: 1px solid var(--wix-styl-border-soft);
	margin: 0;
	min-height: 60px;
	box-sizing: border-box;
}
.coful-stylist-detail .coful-stylist-header__back {
	color: var(--wix-styl-olive);
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	font-family: var(--wix-styl-font-yu-go);
	letter-spacing: normal;
	flex: 0 0 auto;
	transition: color 0.2s ease;
}
.coful-stylist-detail .coful-stylist-header__back:hover {
	color: var(--wix-styl-dark);
}
.coful-stylist-detail .coful-stylist-header__title {
	margin: 0;
	font-family: var(--wix-styl-font-cormorant);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.8px;
	line-height: 25.2px;
	color: var(--wix-styl-dark);
	text-align: center;
	flex: 1 1 auto;
}
.coful-stylist-detail .coful-stylist-header__reserve {
	display: inline-block;
	padding: 8px 22px;
	background: var(--wix-styl-olive);
	color: var(--wix-styl-white);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--wix-styl-font-inter);
	letter-spacing: 0.7px;
	border-radius: 999px;
	transition: background 0.2s ease;
	flex: 0 0 auto;
}
.coful-stylist-detail .coful-stylist-header__reserve:hover {
	background: var(--wix-styl-olive-hover);
}

@media (max-width: 600px) {
	.coful-stylist-detail .coful-stylist-header {
		padding: 12px 16px;
		gap: 8px;
		min-height: 50px;
	}
	.coful-stylist-detail .coful-stylist-header__title {
		font-size: 16px;
		letter-spacing: 1.6px;
		line-height: 22.4px;
	}
	.coful-stylist-detail .coful-stylist-header__back {
		font-size: 14px;
	}
	.coful-stylist-detail .coful-stylist-header__reserve {
		padding: 7px 14px;
		font-size: 15px;
		letter-spacing: 0.75px;
	}
}

/* =========================================================
 * §2. post-content base + プロフィール (円形写真 + 名前 + CTA)
 * Wix: audience 12px mute / lh 16.8 inter (plain text)
 *      name 24px/700 cormorant lh 33.6
 *      romaji 16px/400 cormorant
 *      career 13px inter (plain text)
 *      quote 21px/500 italic inter lh 29.4
 *      desc 15px mute inter lh 25.5 center (PC) / 14px left (Mobile)
 *      reserve pill 18px/700 white inter (PC) / 15px (Mobile)
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content {
	--wp--style--global--content-size: 720px;
	max-width: 100%;
	padding: 32px 24px 64px;
	color: var(--wix-styl-dark);
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: normal;
	font-family: var(--wix-styl-font-inter);
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content {
		--wp--style--global--content-size: calc(100% - 32px);
		padding: 24px 16px 48px;
		font-size: 14px;
		line-height: 1.7;
	}
}

/* §2-a audience タグ (plain text、pill ではない) */
.coful-stylist-detail.coful-stylist-detail .wp-block-post-content > p.has-small-font-size:first-child {
	--wp--preset--font-size--small: 12px;
	margin: 0 auto 6px;
	padding: 0;
	background: transparent;
	color: var(--wix-styl-mute);
	font-family: var(--wix-styl-font-inter);
	font-size: 12px;
	line-height: 16.8px;
	letter-spacing: normal;
	font-weight: 400;
	text-align: center;
	border-radius: 0;
	display: block;
	width: auto;
}

/* §2-b h1 名前 */
.coful-stylist-detail .wp-block-post-content h1.wp-block-heading {
	font-family: var(--wix-styl-font-cormorant);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 33.6px;
	color: var(--wix-styl-dark);
	margin: 8px auto 0;
	text-align: center;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content h1.wp-block-heading {
		font-size: 21px;
		line-height: 29.4px;
	}
}

/* §2-c h1 直後 sub-line (ローマ字 + 経歴) */
.coful-stylist-detail .wp-block-post-content h1.wp-block-heading + p.has-text-align-center {
	font-family: var(--wix-styl-font-inter);
	font-size: 13px;
	color: var(--wix-styl-dark);
	letter-spacing: normal;
	line-height: 18.2px;
	margin: 4px auto 20px;
	text-align: center;
}
.coful-stylist-detail .wp-block-post-content h1.wp-block-heading + p.has-text-align-center em {
	font-family: var(--wix-styl-font-cormorant);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22.4px;
	color: var(--wix-styl-dark);
	margin-right: 6px;
}

/* §2-d プロフィール画像 — 円形 */
.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter {
	max-width: 240px;
	margin: 4px auto 16px;
}
.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--wix-styl-border-soft);
	display: block;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter {
		max-width: 180px;
	}
}

/* §2-e キャッチコピー quote (Wix は鍵カッコ「」を本文に含むため擬似要素削除) */
.coful-stylist-detail .wp-block-post-content > blockquote.wp-block-quote {
	border: none;
	padding: 0;
	margin: 18px auto 24px;
	text-align: center;
	max-width: 600px;
	background: transparent;
	box-shadow: none;
}
.coful-stylist-detail .wp-block-post-content > blockquote.wp-block-quote p {
	margin: 0;
	font-family: var(--wix-styl-font-inter);
	font-size: 21px;
	font-weight: 500;
	font-style: italic;
	letter-spacing: normal;
	line-height: 29.4px;
	color: var(--wix-styl-dark);
}
.coful-stylist-detail .wp-block-post-content > blockquote.wp-block-quote p strong {
	font-weight: 500;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content > blockquote.wp-block-quote p {
		font-size: 15px;
		line-height: 21px;
	}
}

/* §2-f 本文 paragraph (説明文) */
.coful-stylist-detail .wp-block-post-content > p {
	margin: 1em auto;
	font-family: var(--wix-styl-font-inter);
	font-size: 15px;
	line-height: 25.5px;
	color: var(--wix-styl-mute);
	letter-spacing: normal;
	text-align: center;
	max-width: 760px;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content > p {
		font-size: 14px;
		line-height: 23.8px;
		text-align: left;
	}
}

/* §2-g 大型 WEB予約ボタン */
.coful-stylist-detail .wp-block-post-content .wp-block-buttons {
	margin: 32px auto;
	display: flex;
	justify-content: center;
}
.coful-stylist-detail .wp-block-post-content .wp-block-button__link.wp-element-button {
	background: var(--wix-styl-olive);
	color: var(--wix-styl-white);
	padding: 14px 40px;
	border-radius: 999px;
	font-family: var(--wix-styl-font-inter);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-decoration: none;
	transition: background 0.2s ease;
	border: none;
	display: inline-block;
	line-height: 1.4;
}
.coful-stylist-detail .wp-block-post-content .wp-block-button__link.wp-element-button:hover {
	background: var(--wix-styl-olive-hover);
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content .wp-block-button__link.wp-element-button {
		padding: 10px 24px;
		font-size: 15px;
		letter-spacing: 0.75px;
	}
}

/* §2-h h2 セクション見出し (Wix: 24px/700 cormorant) */
.coful-stylist-detail .wp-block-post-content h2.wp-block-heading {
	font-family: var(--wix-styl-font-cormorant);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 33.6px;
	color: var(--wix-styl-dark);
	margin: 56px auto 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wix-styl-border-soft);
	text-align: left;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content h2.wp-block-heading {
		font-size: 20px;
		line-height: 28px;
		margin: 40px auto 16px;
		padding-bottom: 10px;
	}
}

/* §2-k separator */
.coful-stylist-detail .wp-block-post-content hr.wp-block-separator {
	max-width: 80px;
	margin: 32px auto;
	border: none;
	border-top: 1px solid var(--wix-styl-border-soft);
}

/* =========================================================
 * §3. 得意メニュー&技術 columns (Wix: VERTICAL stack of 3 full-width cards)
 * Wix structure is 3 separate horizontal cards stacked, not 3-column flex
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-columns {
	margin: 20px auto;
	gap: 12px;
	flex-direction: column;
	flex-wrap: nowrap;
}
.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column {
	background: var(--wix-styl-bg-card);
	border-left: 2px solid var(--wix-styl-olive);
	border-radius: 4px;
	padding: 16px 18px;
	box-shadow: none;
}
.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column h3.wp-block-heading {
	font-family: var(--wix-styl-font-inter);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 23.8px;
	color: var(--wix-styl-dark);
	margin: 0 0 6px;
	padding-bottom: 0;
	border-bottom: none;
	text-align: left;
}
.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column p {
	font-family: var(--wix-styl-font-inter);
	font-size: 15px;
	line-height: 22.5px;
	color: var(--wix-styl-mute);
	letter-spacing: 0.3px;
	margin: 0;
	text-align: left;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content .wp-block-columns {
		gap: 10px;
	}
	.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column {
		padding: 14px 16px;
	}
	.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column h3.wp-block-heading {
		font-size: 14px;
		line-height: 19.6px;
	}
	.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column p {
		font-size: 13px;
		line-height: 19.5px;
	}
}

/* =========================================================
 * §4. その他の技術 (Wix: h3 14px mute center / li 13px olive plain text)
 * h-1 では pill 化していたが、Wix は plain olive text
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content > h3.wp-block-heading {
	font-family: var(--wix-styl-font-inter);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 19.6px;
	margin: 32px auto 12px;
	color: var(--wix-styl-mute);
	text-align: center;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-other-list {
	list-style: none;
	padding: 0;
	margin: 0 auto 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	max-width: 100%;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-other-list li {
	background: transparent;
	color: var(--wix-styl-olive);
	padding: 0;
	border-radius: 0;
	font-family: var(--wix-styl-font-inter);
	font-size: 13px;
	font-weight: 400;
	border: none;
	letter-spacing: normal;
	line-height: 18.2px;
	list-style: none;
	text-align: center;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content > h3.wp-block-heading {
		font-size: 12px;
		line-height: 16.8px;
		margin: 24px auto 10px;
	}
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-other-list {
		gap: 12px 16px;
	}
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-other-list li {
		font-size: 12px;
		line-height: 16.8px;
	}
}

/* =========================================================
 * §5. ギャラリー (PC 4列 grid + figcaption / Mobile 横 scroll-snap)
 * Wix では正方形 1:1 表示が基本のため img を square 化
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 24px auto;
	padding: 0;
	list-style: none;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	margin: 0;
	cursor: zoom-in;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.3s ease;
	display: block;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery .wp-block-image figcaption {
	position: static;
	background: transparent;
	color: var(--wix-styl-mute);
	font-family: var(--wix-styl-font-inter);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	margin: 6px 0 0;
	padding: 0;
	white-space: normal;
}
@media (hover: hover) {
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery .wp-block-image:hover img {
		transform: scale(1.03);
	}
}

/* Mobile horizontal scroll-snap カルーセル (§7-86) */
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery,
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery.columns-3 {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		margin: 20px -16px;
		padding: 0 16px 8px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery::-webkit-scrollbar {
		display: none;
	}
	/* override Gutenberg .has-nested-images.columns-N selector specificity */
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 78%;
		flex: 0 0 78%;
		scroll-snap-align: center;
	}
}

/* =========================================================
 * §6. お客様の声 (Wix: p 15px italic dark / cite 13px mute right)
 * h-1 では番号バッジ + bg-card だったが、Wix は plain italic
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 32px;
	margin: 24px auto;
	counter-reset: none;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote {
	counter-increment: none;
	position: static;
	background: var(--wix-styl-bg-card);
	border: none;
	border-left: 2px solid var(--wix-styl-olive);
	border-radius: 4px;
	padding: 16px 18px;
	margin: 0;
	box-shadow: none;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote::before {
	content: none;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote p {
	margin: 0 0 6px;
	font-family: var(--wix-styl-font-inter);
	font-size: 15px;
	font-style: italic;
	font-weight: 400;
	line-height: 24.75px;
	letter-spacing: 0.3px;
	color: var(--wix-styl-dark);
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote p::before,
.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote p::after {
	content: none;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote cite {
	display: block;
	text-align: right;
	font-style: normal;
	font-family: var(--wix-styl-font-inter);
	font-size: 13px;
	font-weight: 400;
	color: var(--wix-styl-mute);
	margin-top: 6px;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote p {
		font-size: 13px;
		line-height: 21.45px;
	}
	.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials .wp-block-quote cite {
		font-size: 12px;
	}
}

/* =========================================================
 * §7-1. 私が大切にしていること (.coful-stylist-philosophy)
 * Wix: h2 24px/700 cormorant center / p plain text
 * h-1 では card 化していたが、Wix は plain
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy {
	background: var(--wix-styl-bg-card);
	border-left: 2px solid var(--wix-styl-olive);
	border-radius: 4px;
	padding: 24px 28px;
	margin: 32px auto;
	box-shadow: none;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy h2.wp-block-heading {
	margin: 0 auto 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wix-styl-border-soft);
	font-size: 24px;
	line-height: 33.6px;
	letter-spacing: normal;
	text-align: center;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy p {
	margin: 0 auto 12px;
	font-family: var(--wix-styl-font-inter);
	font-size: 15px;
	line-height: 25.5px;
	color: var(--wix-styl-mute);
	text-align: center;
	max-width: 700px;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy p:last-child {
	margin-bottom: 0;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy p strong {
	font-weight: 600;
	color: var(--wix-styl-dark);
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy h2.wp-block-heading {
		font-size: 19px;
		line-height: 26.6px;
	}
	.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy p {
		font-size: 14px;
		line-height: 23.8px;
		text-align: left;
	}
}

/* =========================================================
 * §7-2. プライベート (Wix: li 14px center plain text、PC ls -0.28px)
 * h-1 では border-right セパレータだったが、Wix は plain
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-private-list {
	list-style: none;
	padding: 0;
	margin: 16px auto 32px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 20px;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-private-list li {
	padding: 0;
	border: none;
	font-family: var(--wix-styl-font-inter);
	font-size: 14px;
	font-weight: 400;
	color: var(--wix-styl-mute);
	line-height: 1.6;
	letter-spacing: -0.28px;
	list-style: none;
	text-align: center;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-private-list li strong {
	color: var(--wix-styl-mute);
	font-weight: 500;
	margin-right: 4px;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-private-list {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-private-list li {
		font-size: 12px;
		letter-spacing: -0.24px;
		padding: 2px 0;
		width: auto;
	}
}

/* =========================================================
 * §8-1. 主なメニューと料金 (Wix: li name 15px/700 dark / price 17px/700 mute)
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list {
	list-style: none;
	padding: 0;
	margin: 24px auto;
	max-width: 640px;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--wix-styl-border-soft);
	font-family: var(--wix-styl-font-inter);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.15px;
	line-height: 21px;
	color: var(--wix-styl-dark);
	list-style: none;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li strong {
	flex: 1 1 auto;
	font-weight: 700;
	color: var(--wix-styl-dark);
	font-family: var(--wix-styl-font-inter);
}
/* 価格部分 — Wix: 17px/700 mute */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
	color: var(--wix-styl-mute);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.17px;
	line-height: 23.8px;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li strong {
	color: var(--wix-styl-dark);
	font-size: 15px;
	letter-spacing: 0.15px;
	line-height: 21px;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
		padding: 10px 0;
		font-size: 14px;
		line-height: 19.6px;
	}
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li strong {
		font-size: 13px;
		line-height: 18.2px;
	}
}

/* 料金注釈 ※ */
.coful-stylist-detail .wp-block-post-content > p.has-small-font-size:not(:first-child) {
	font-family: var(--wix-styl-font-inter);
	font-size: 13px;
	font-style: italic;
	color: var(--wix-styl-mute);
	letter-spacing: 0.13px;
	line-height: 18.2px;
	margin: 4px auto 24px;
	text-align: left;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content > p.has-small-font-size:not(:first-child) {
		font-size: 12px;
		line-height: 16.8px;
	}
}

/* =========================================================
 * §8-2. ご予約はこちら (h3 + サブ + button)
 * Wix: h3 24px/700 cormorant center / sub 13px italic mute
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content h3.wp-block-heading.has-text-align-center {
	font-family: var(--wix-styl-font-cormorant);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 33.6px;
	color: var(--wix-styl-dark);
	margin: 40px auto 8px;
	padding-bottom: 0;
	border-bottom: none;
	text-align: center;
}
.coful-stylist-detail .wp-block-post-content p.has-text-align-center {
	font-family: var(--wix-styl-font-inter);
	color: var(--wix-styl-mute);
	font-size: 13px;
	font-style: italic;
	letter-spacing: 0.13px;
	line-height: 18.2px;
	margin: 0 auto 20px;
	text-align: center;
}
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content h3.wp-block-heading.has-text-align-center {
		font-size: 19px;
		line-height: 26.6px;
	}
}

/* =========================================================
 * §8-3. TOP PAGE に戻る 黒ピル (Wix: 15px/400 avenir-lt white ls 0.75)
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .coful-stylist-back-top a.wp-block-button__link {
	background: #000;
	color: var(--wix-styl-white);
	padding: 12px 32px;
	border-radius: 999px;
	font-family: 'Avenir Next', 'Avenir', var(--wix-styl-font-inter);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.75px;
	transition: background 0.2s ease;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-back-top a.wp-block-button__link:hover {
	background: #333;
}
.coful-stylist-detail .wp-block-post-content .wp-block-buttons.coful-stylist-back-top-wrap {
	margin: 32px auto 8px;
}

/* =========================================================
 * §11. lightbox dialog (§7-85)
 * ========================================================= */
dialog.coful-stylist-lightbox {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	color: #fff;
}
dialog.coful-stylist-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}
.coful-stylist-lightbox__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.coful-stylist-lightbox__img {
	display: block;
	margin: 0 auto;
	max-width: 92vw;
	max-height: 86vh;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}
.coful-stylist-lightbox__caption {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--wix-styl-font-inter);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	padding: 0 24px;
	pointer-events: none;
}
.coful-stylist-lightbox__close,
.coful-stylist-lightbox__prev,
.coful-stylist-lightbox__next {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 22px;
	font-family: var(--wix-styl-font-cormorant);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.coful-stylist-lightbox__close:hover,
.coful-stylist-lightbox__prev:hover,
.coful-stylist-lightbox__next:hover {
	background: rgba(255, 255, 255, 0.25);
}
.coful-stylist-lightbox__close { top: 16px; right: 16px; }
.coful-stylist-lightbox__prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.coful-stylist-lightbox__next  { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
	.coful-stylist-lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; }
	.coful-stylist-lightbox__prev  { left: 8px; }
	.coful-stylist-lightbox__next  { right: 8px; }
}

/* ===== Mobile / PC label 切替 spans (h-1 template から踏襲) ===== */
.coful-stylist-pc-only { display: inline; }
.coful-stylist-mobile-only { display: none; }
@media (max-width: 600px) {
	.coful-stylist-pc-only { display: none; }
	.coful-stylist-mobile-only { display: inline; }
}

/* ==================== BEGIN i-1-fix1 region (PC 12 項目修正) ==================== */
/*
 * Phase: 4-4-2-i-1-fix1
 * 作成日: 2026-05-16
 * 対象: PC viewport 1440 のみ (Mobile @media は触らない)
 * 12 項目: A 円形写真 / B/C reorder / D-F gallery / G Load More (mu-plugin) / H private 区切り / I/J menu / K post 絵文字 / L post TOP PAGE
 *
 * §7: §7-22 / §7-50 / §7-66 / §7-78 / §7-87 / §7-89 / §7-91 適用
 *
 * scope: i-1 region 内に末尾 sub-region 追加。既存 i-1 ルールを later cascade で override
 *
 * Wix 計測値出典: artifacts/wix-fix1-scout.json
 */

:root {
	/* fix1 追加 variables */
	--wix-styl-prof-img-size-pc:     132px;
	--wix-styl-prof-ring-size-pc:    140px;
	--wix-styl-prof-ring-color:      rgba(139, 157, 131, 0.2);
	--wix-styl-prof-ring-width:      4px;
	--wix-styl-gallery-ar:           3 / 4;
	--wix-styl-gallery-radius:       0;
	--wix-styl-loadmore-bg:          rgb(252, 252, 252);
	--wix-styl-loadmore-text:        rgba(65, 65, 65, 0.9);
	--wix-styl-loadmore-border:      rgb(65, 65, 65);
	--wix-styl-loadmore-fs:          15px;
	--wix-styl-divider-color:        rgba(122, 132, 113, 0.4);
}

/* =========================================================
 * A. プロフィール写真 132px + 4px olive-pale 外枠 ring (PC のみ)
 * Wix: 親 140×140 (border 4px rgba(139,157,131,0.2) + same bg ring)、内 img 132×132
 * ========================================================= */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter {
		max-width: var(--wix-styl-prof-ring-size-pc);
		width: var(--wix-styl-prof-ring-size-pc);
		margin: 4px auto 12px;
		padding: 0;
		background: var(--wix-styl-prof-ring-color);
		border: var(--wix-styl-prof-ring-width) solid var(--wix-styl-prof-ring-color);
		border-radius: 50%;
		box-sizing: border-box;
	}
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-radius: 50%;
		border: none;
		display: block;
	}
}

/* =========================================================
 * B/C. プロフィール写真を 20-30代向け / 名前 ブロックの上に配置
 * 実装: post-content を flex column 化 + figure に order: -1
 *       他要素は order:0 のままで source order を維持
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content {
	display: flex;
	flex-direction: column;
}
.coful-stylist-detail .wp-block-post-content > figure.wp-block-image.aligncenter {
	order: -1;
}
/* h1/audience/sub-p/quote 等は order 0 のまま自動配置 */

/* =========================================================
 * E. gallery aspect-ratio 3/4 (Wix 計測値、i-1 の 1/1 を上書き)
 * F. gallery border-radius: 0 (Wix 計測値) — i-1 と同値、明示確認
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	aspect-ratio: var(--wix-styl-gallery-ar);
	border-radius: var(--wix-styl-gallery-radius);
}

/* =========================================================
 * G. Load More ボタン (mu-plugin JS が初期 4 枚以外を hidden 化)
 *    本 CSS で hidden クラス + Load More ボタンスタイル定義
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .coful-stylist-gallery-hidden {
	display: none;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-loadmore-wrap {
	text-align: center;
	margin: 12px auto 24px;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-loadmore-btn {
	display: inline-block;
	background: var(--wix-styl-loadmore-bg);
	color: var(--wix-styl-loadmore-text);
	border: 1px solid var(--wix-styl-loadmore-border);
	padding: 11px 29px;
	font-family: var(--wix-styl-font-yu-go);
	font-size: var(--wix-styl-loadmore-fs);
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-loadmore-btn:hover {
	background: var(--wix-styl-loadmore-border);
	color: var(--wix-styl-bg);
}

/* =========================================================
 * H. プライベート区切り「|」表示
 * 実装: PC flex 横並び中の li 間に CSS ::after で " | " 挿入
 * ========================================================= */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-private-list li:not(:last-child)::after {
		content: " | ";
		color: var(--wix-styl-divider-color);
		margin: 0 8px;
		font-weight: 400;
	}
}

/* =========================================================
 * I. メニューフォント (Wix 計測値再確認、i-1 で既に Inter 適用済)
 *    本セクションで font-feature-settings + tabular-nums を追加
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
	font-feature-settings: "palt" 1;
}

/* =========================================================
 * J. 価格末尾 0 揃え
 * 実装: grid layout — item-name | flex-grow gap | price (right align, tabular-nums)
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 16px;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--wix-styl-dark);
	letter-spacing: 0.15px;
	line-height: 21px;
	text-align: left;
}
/* 価格 (strong 以降のテキストノード) を tabular-nums + right align */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* =========================================================
 * L. TOP PAGE link 文字 (post で wp:button → wp:paragraph 変更後の CSS)
 * post 編集で `.coful-stylist-back-top-link` class anchor を新規付与
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .coful-stylist-back-top-link {
	text-align: center;
	margin: 24px auto 8px;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-back-top-link a {
	display: inline-block;
	color: var(--wix-styl-mute);
	font-family: var(--wix-styl-font-inter);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-bottom: 1px solid var(--wix-styl-border);
	padding: 4px 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-back-top-link a:hover {
	color: var(--wix-styl-dark);
	border-bottom-color: var(--wix-styl-dark);
}

/* ==================== END i-1-fix1 region ==================== */

/* ==================== BEGIN i-1-fix2 region (9 項目修正) ==================== */
/*
 * Phase: 4-4-2-i-1-fix2
 * 作成日: 2026-05-16
 * 対象: PC viewport 1440 のみ
 * 9 項目: M Load More CSS / N 重複 (post 編集) / O ボヤけ / P 角丸 / Q size / R gap
 *         S voice+philosophy 幅 / T menu 幅 / U 価格末尾 0 (post 編集)
 * §7-93 目視優先 / §7-94 CDP click 実機テスト 適用
 */

:root {
	/* fix2 追加 variables */
	--wix-styl-gallery-radius-pc:    8px;       /* §7-93: scout 0 だが目視で角丸 → 推定 8px */
	--wix-styl-gallery-gap-pc:       24px;      /* R: WP 12 → Wix 風 24px */
	--wix-styl-gallery-max-pc:       880px;     /* Q: 720 → 880 で写真 1 枚 ~200px */
	--wix-styl-wide-section-max:     1100px;    /* S/T: voice/philosophy/menu 横幅拡大 */
}

/* =========================================================
 * M. Load More CSS specificity 強化
 *    fix1 の .coful-stylist-gallery-hidden { display: none } が Gutenberg core の
 *    .has-nested-images figure.wp-block-image:not(#individual-image) { display: flex }
 *    に負けて効かなかった。:not(#individual-image) を付けて specificity 一致 + cascade 後勝ち
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image.coful-stylist-gallery-hidden:not(#individual-image) {
	display: none;
}

/* =========================================================
 * P. ギャラリー border-radius 8px (§7-93 目視優先)
 *    Wix 計測値は 0 だが目視で角丸あり。8px から fine-tune
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	border-radius: var(--wix-styl-gallery-radius-pc);
}

/* =========================================================
 * Q + R. ギャラリー横幅拡大 + gap 拡大 (PC のみ)
 * ========================================================= */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery {
		max-width: var(--wix-styl-gallery-max-pc);
		gap: var(--wix-styl-gallery-gap-pc);
		column-gap: var(--wix-styl-gallery-gap-pc);
		row-gap: var(--wix-styl-gallery-gap-pc);
		margin-left: auto;
		margin-right: auto;
	}
}

/* =========================================================
 * O. ギャラリー写真下のボヤけ削除 (念のため明示打消し)
 *    現状 box-shadow / filter / mask は none だが、Gutenberg 由来や theme cascade で
 *    後から付く可能性があるため明示
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	box-shadow: none;
	filter: none;
	-webkit-mask-image: none;
	mask-image: none;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	box-shadow: none;
	filter: none;
	-webkit-mask-image: none;
	mask-image: none;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)::after {
	content: none;
}

/* =========================================================
 * S. お客様の声 + 私が大切に 横幅拡大 (PC のみ)
 *    現 720 → 1100px、内部 grid は 2-col のまま
 * ========================================================= */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content .coful-stylist-testimonials {
		max-width: var(--wix-styl-wide-section-max);
		margin-left: auto;
		margin-right: auto;
		gap: 24px 32px;
	}
	.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy {
		max-width: var(--wix-styl-wide-section-max);
		margin-left: auto;
		margin-right: auto;
		padding: 28px 40px;
	}
	/* 直前 h2 (お客様の声 / 私が大切に) も同時に max-width 拡大 */
	.coful-stylist-detail .wp-block-post-content > h2.wp-block-heading {
		max-width: var(--wix-styl-wide-section-max);
		margin-left: auto;
		margin-right: auto;
	}
}

/* =========================================================
 * T. 主なメニュー 横幅拡大 (PC のみ)
 *    現 365px → 1100px max
 * ========================================================= */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list {
		max-width: var(--wix-styl-wide-section-max);
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* =========================================================
 * U. 価格末尾 0 揃え (post 編集で <em class="price"> + <em class="tilde">〜</em> 構造)
 *    grid 3 列: [項目名 1fr] [価格 auto] [〜 1ch]
 *    〜 がない行は <em class="tilde"></em> を空で出力 (post 編集)
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
	display: grid;
	grid-template-columns: 1fr auto 1ch;
	align-items: baseline;
	column-gap: 16px;
	text-align: left;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li strong {
	text-align: left;
	font-size: 15px;
	font-weight: 700;
	color: var(--wix-styl-dark);
	letter-spacing: 0.15px;
	line-height: 21px;
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li em.price {
	font-style: normal;
	text-align: right;
	font-size: 17px;
	font-weight: 700;
	color: var(--wix-styl-mute);
	letter-spacing: 0.17px;
	line-height: 23.8px;
	font-variant-numeric: tabular-nums;
	font-family: var(--wix-styl-font-inter);
}
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li em.tilde {
	font-style: normal;
	text-align: left;
	font-size: 17px;
	font-weight: 700;
	color: var(--wix-styl-mute);
	font-family: var(--wix-styl-font-inter);
	min-width: 1ch;
}

/* ==================== END i-1-fix2 region ==================== */

/* ==================== BEGIN i-1-fix3 region (3 項目修正: V/W/X) ==================== */
/*
 * Phase: 4-4-2-i-1-fix3
 * 作成日: 2026-05-16
 * 対象: PC viewport 1440 のみ
 * V: figure::before の backdrop-filter blur 削除 (Gutenberg is-cropped 由来の caption overlay)
 * W: caption 2 span (cap-1 / cap-2) のフォントスタイル
 * X: post 編集で <span class="cap-1"> / <span class="cap-2"> 構造
 *
 * §7-95 (本 fix3 で確立): Gutenberg core の figure::before backdrop-filter は
 *   computed style dump で明示的に検出可能。fix2 で「全 none」と判定したのは
 *   ::before pseudo を見落としていたため
 *
 * Wix scout 値:
 *   cap-1: 13px / 700 / Inter / rgb(44,62,48) dark / lh 16px / center
 *   cap-2: 13px / 400 / Inter / rgb(44,62,48) dark / lh 16px / center
 * ユーザー希望「2行目グレー+一回り小」→ cap-2 を 12px / 400 / mute に調整
 */

:root {
	--wix-styl-cap1-font:    var(--wix-styl-font-inter);
	--wix-styl-cap1-size:    13px;
	--wix-styl-cap1-weight:  700;
	--wix-styl-cap1-color:   var(--wix-styl-dark);
	--wix-styl-cap1-lh:      18px;
	--wix-styl-cap2-font:    var(--wix-styl-font-inter);
	--wix-styl-cap2-size:    12px;
	--wix-styl-cap2-weight:  400;
	--wix-styl-cap2-color:   var(--wix-styl-mute);
	--wix-styl-cap2-lh:      16px;
	--wix-styl-cap-gap:      2px;
}

/* =========================================================
 * V. 写真下ボケ削除 (figure::before の backdrop-filter blur + mask gradient 削除)
 * 原因: Gutenberg is-cropped gallery で caption overlay 用 ::before が作る
 *       backdrop-filter: blur(3px) + mask-image: linear-gradient(...)
 * 解決: ::before を content:none で消去 (caption は static で別配置済)
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)::before {
	content: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: none;
	background-image: none;
	mask-image: none;
	-webkit-mask-image: none;
	filter: none;
	display: none;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)::after {
	content: none;
	display: none;
}

/* =========================================================
 * W. キャプション 2 span のフォント
 *    1 行目 (cap-1): 13px / 700 / Inter / dark (Wix 同等)
 *    2 行目 (cap-2): 12px / 400 / mute (ユーザー希望: グレー + 一回り小)
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption {
	font-family: var(--wix-styl-cap1-font);
	color: var(--wix-styl-cap1-color);
	text-align: center;
	margin: 8px 0 0;
	padding: 0;
	white-space: normal;
	background: transparent;
	position: static;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption .cap-1 {
	display: block;
	font-family: var(--wix-styl-cap1-font);
	font-size: var(--wix-styl-cap1-size);
	font-weight: var(--wix-styl-cap1-weight);
	color: var(--wix-styl-cap1-color);
	line-height: var(--wix-styl-cap1-lh);
	letter-spacing: normal;
}
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption .cap-2 {
	display: block;
	font-family: var(--wix-styl-cap2-font);
	font-size: var(--wix-styl-cap2-size);
	font-weight: var(--wix-styl-cap2-weight);
	color: var(--wix-styl-cap2-color);
	line-height: var(--wix-styl-cap2-lh);
	letter-spacing: normal;
	margin-top: var(--wix-styl-cap-gap);
}

/* ==================== END i-1-fix3 region ==================== */

/* ==================== BEGIN i-1-fix4 region (Y / Z / AA / BB) ==================== */
/*
 * Phase: 4-4-2-i-1-fix4
 * 作成日: 2026-05-17
 * 対象: PC viewport (@media min-width 769px 暗黙) のみ
 * Y: §5 gallery caption (cap-1 / cap-2) font の Noto Sans JP 先頭化
 * Z: §6 「私が大切にしていること」枠 (背景 / border-left / padding) 削除
 *      ・見出し h2 と本文段落は維持
 *      ・枠源: i-1 region L4637 群 (.coful-stylist-philosophy) の bg/border/padding
 *      ・同 selector 後勝ちで打ち消し (post_content surgical edit 不要)
 * AA: §8 メニュー grid column-gap を 16px → 8px に半減
 *      ・fix2 U の grid 構造 (max-content auto max-content + tabular-nums) は維持
 * BB: §8 メニュー名 (ul.pricing-list / li / strong / em) font の Noto Sans JP 先頭化
 *
 * scout-report.md (050-i-1-fix4/) と併読
 *
 * §7-50 !important 不使用 / §7-66 specificity 同等 後勝ち
 * §7-78 先発 fix1/2/3 sub-region と selector pattern 踏襲
 *      (.coful-stylist-detail .wp-block-post-content X)
 * §7-22 CSS 変数フォールバック方式 (--wix-styl-jp-font-stack 新規)
 * §7-93 Wix 計測も実際は orig_noto_sans_jp_medium → ユーザー指示と完全一致
 */

:root {
	--wix-styl-jp-font-stack: "Noto Sans JP", "Inter", "Helvetica Neue",
		-apple-system, BlinkMacSystemFont, "Hiragino Sans",
		"Yu Gothic UI", "Yu Gothic", sans-serif;
	/* fix3 で定義された cap1/cap2 font 変数を fix4 で上書き (同 specificity 後勝ち) */
	--wix-styl-cap1-font: var(--wix-styl-jp-font-stack);
	--wix-styl-cap2-font: var(--wix-styl-jp-font-stack);
}

/* =========================================================
 * Y. gallery caption font-family の Noto Sans JP 先頭化
 * 既存 fix3 W rule (specificity 1,6,2) と同 selector で後勝ち
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption .cap-1,
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption .cap-2 {
	font-family: var(--wix-styl-jp-font-stack);
}

/* =========================================================
 * Z. 私が大切にしていること 枠削除 (見出し h2 / 本文は保持)
 * 元 i-1 region L4637 群 (.coful-stylist-philosophy) の bg/border/padding 群を打ち消し
 * 同 selector (0,3,0) で後勝ち
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy {
	background: transparent;
	background-color: transparent;
	background-image: none;
	border: 0 none;
	border-top: 0 none;
	border-right: 0 none;
	border-bottom: 0 none;
	border-left: 0 none;
	padding: 0;
	box-shadow: none;
}
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy::before,
.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy::after {
	content: none;
	display: none;
	background: none;
	background-image: none;
	border: 0 none;
	box-shadow: none;
}

/* =========================================================
 * AA. メニュー grid column-gap 半減 (16px → 8px)
 *     fix2 U の grid 構造 (max-content auto max-content + tabular-nums) は維持
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li {
	column-gap: 8px;
	gap: 8px;
}

/* =========================================================
 * BB. メニュー名 (ul + li + strong + em) font の Noto Sans JP 先頭化
 *     strong (menu name) と em.price / em.tilde を巻き込み
 * ========================================================= */
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list,
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li,
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li strong,
.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li em {
	font-family: var(--wix-styl-jp-font-stack);
}

/* ==================== END i-1-fix4 region ==================== */

/* ==================== BEGIN i-1-fix5 region (Y' / AA' / BB') ==================== */
/*
 * Phase: 4-4-2-i-1-fix5
 * 作成日: 2026-05-17
 * 対象: PC viewport (@media min-width 769px) のみ、3 page (rui/miki/eri)
 *
 * Y':  §5 gallery caption (cap-1 / cap-2 / figcaption) を Noto Sans JP → Noto Serif JP
 * AA': §8 menu container 幅を 1100px → 550px (50.0%) に縮小 + center
 * BB': §8 menu name (ul / li / strong) を Noto Sans JP → Noto Serif JP
 *
 * 設計:
 *   - --wix-styl-jp-font-stack を fix4 (line 5390-5397) から後勝ち override
 *     stack 順: "Inter" → "Noto Serif JP" → 日本語明朝 fallback → serif
 *     英数字 = Inter (Wix 同等)、日本語 = Noto Serif JP (ユーザー選択)
 *   - --wix-styl-pricing-max-width を新設、pricing-list へ適用 (PC のみ)
 *   - fix2 U (grid max-content auto max-content + tabular-nums) と
 *     fix4 AA (column-gap 8px) は不変
 *   - em.price / em.tilde は別 selector で --wix-styl-font-inter 使用済
 *     (line 5252/5263) → fix5 で stack を変えても影響なし
 *
 * scout-report.md (051-i-1-fix5/) と併読
 *
 * §7-22 CSS 変数フォールバック方式
 * §7-23 idempotent BEGIN/END マーカー
 * §7-40 Google Fonts @import 許可
 * §7-50 !important 不使用 / §7-66 specificity 同等 後勝ち
 * §7-78 先発 i-1-fix1〜fix4 と selector pattern 踏襲
 * §7-93 Wix 計測 vs ユーザー目視乖離時はユーザー選択優先
 *       (Wix=sans / ユーザー=serif、後者を採用)
 * §7-96-候補 font stack 順序 (Inter 先頭でも日本語は Noto Serif JP に fall-through)
 * §7-97-候補 verify 時の disk cache 対策 (Network.clearBrowserCache + reload ignoreCache)
 */

/* Noto Serif JP weight 500/700 追加読込 (既存 line 2356 は weight 400 のみ) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');

:root {
	/* Y' / BB': font stack 候補 A (英数字=Inter / 日本語=Noto Serif JP)
	 * fix4 line 5390 の同変数を後勝ち override */
	--wix-styl-jp-font-stack: "Inter", "Noto Serif JP",
		"Hiragino Mincho ProN", "Yu Mincho Pr6N", "Yu Mincho",
		"YuMincho", "MS PMincho", serif;
	--wix-styl-cap1-font: var(--wix-styl-jp-font-stack);
	--wix-styl-cap2-font: var(--wix-styl-jp-font-stack);

	/* AA': pricing-list 幅 (WP 現状 1100px の 50.0%) */
	--wix-styl-pricing-max-width: 550px;
}

/* =========================================================
 * AA'. menu container 幅 50% 縮小 + 中央寄せ (PC のみ)
 *      fix2 T (line 5223-5230, @media min-width 769px) と
 *      同 selector / 同 specificity (0,3,1) で source 後勝ち
 *      fix4 AA (column-gap 8px) と fix2 U (grid 構造) は変更なし
 * ========================================================= */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list {
		max-width: var(--wix-styl-pricing-max-width);
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==================== END i-1-fix5 region ==================== */

/* ==================== BEGIN i-1-fix6 region (Y''-a 滲み解消 + Y''-b h2 統一) ==================== */
/*
 * Phase: 4-4-2-i-1-fix6
 * 作成日: 2026-05-17
 * 対象: PC viewport のみ、3 page (rui/miki/eri)、§5 ギャラリー領域中心
 *
 * Y''-a 滲み解消:
 *   真因: WordPress core (block-library) の
 *     `.wp-block-gallery.has-nested-images figure.wp-block-image figcaption`
 *     に `text-shadow: 0 0 1.5px #000` が当たり、CSS inherit で .cap-1 / .cap-2 にも伝搬。
 *     COFUL は cap が写真の下にあるため text-shadow が「滲み」として露呈していた。
 *   対処: 同 selector を `.coful-stylist-detail .wp-block-post-content` で前置 (specificity 0,5,3 + :not()=1,5,3)
 *     して `text-shadow: none` を後勝ち打ち消し。
 *   @import 位置: scout で `document.fonts.check('1em "Noto Serif JP"') = true` を確認、
 *     fix5 sub-region 内の @import は機能している → 移動不要 (fix5 不変原則維持)
 *
 * Y''-b cap → h2 統一:
 *   h2「施術例・ギャラリー」computed font: "Cormorant Garamond", "Times New Roman", serif / 700
 *     → serif 判定 → 統一実施。
 *   新変数 --wix-styl-cap-font-stack を定義(menu の --wix-styl-jp-font-stack には触らない)
 *     stack: Cormorant Garamond (Latin) → Noto Serif JP (CJK fall-through) → 日本語明朝 OS fallback → serif
 *
 * scout-report.md (052-i-1-fix6/) と併読
 *
 * §7-22 / §7-23 / §7-50 / §7-66 / §7-78(fix4 selector 群踏襲)/ §7-91 (Gutenberg core specificity 対策)
 * §7-95 (pseudo-element 含む包括 dump)
 * §7-97-候補 (CDP verify cache 対策)
 * §7-98-候補 (NSJP=loaded=true により @import 移動不要と判定、@import 位置問題は条件付き)
 */

:root {
	/* Y''-b cap font stack (h2 と同 Cormorant Garamond + 日本語明朝 fallback) */
	--wix-styl-cap-font-stack: "Cormorant Garamond", "Noto Serif JP",
		"Hiragino Mincho ProN", "Yu Mincho Pr6N", "Yu Mincho",
		YuMincho, "MS PMincho", "Times New Roman", serif;
}

/* Y''-a + Y''-b: text-shadow 打ち消し + cap font を h2 と同 stack に統一
 * selector は fix4 line 5403-5407 と同一群 (§7-78)
 *   - figcaption: WP core の text-shadow 継承を切断
 *   - .cap-1 / .cap-2: 親切断で十分だが念のため直接適用 + font-family 確定
 * specificity (1,5,2)〜(1,5,3) で WP core (0,4,3) より勝ち、fix4 と同 specificity で source 後勝ち。
 */
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption .cap-1,
.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption .cap-2 {
	text-shadow: none;
	font-family: var(--wix-styl-cap-font-stack);
}

/* ==================== END i-1-fix6 region ==================== */

/* ==================== BEGIN i-1-mobile region (M-1 / M-2 / M-4) ==================== */
/*
 * Phase: 4-4-2-i-1-mobile
 * 作成日: 2026-05-17
 * 対象: Mobile viewport (@media max-width: 768px) のみ、3 page (rui/miki/eri)
 *
 * M-1: 全体左右 padding 縮小 (.coful-stylist-detail 30→16px、wp-block-post-content 16→0)
 * M-2: profile 円形画像 180→100px、border 2px→4px solid rgba(139,157,131,0.2) (Wix 同値)
 * M-3: sticky bottom nav (mu-plugin coful-stylist-mobile-footer.php で別途実装、本 CSS は使わない)
 * M-4: gallery 矢印追加 (mu-plugin coful-stylist-gallery-carousel-mobile.* で別途実装)
 *      + Load More button Mobile 非表示 (本 CSS)
 *      + 矢印 wrap / button の見た目 (本 CSS)
 *
 * 設計:
 *   - PC 完全不変保護: 全 rule を @media (max-width: 768px) 内に閉じ込め
 *   - 既存 4252 (profile 円) / 5031 (load-more btn) / 4560 (mobile carousel figure 78%)
 *     と同 specificity で source 後勝ち
 *   - lightbox / scroll-snap / touch swipe は既存挙動を変更しない
 *
 * scout-report.md (053-i-1-mobile/) と併読
 *
 * §7-22 / §7-23 / §7-44 (mu-plugin 改修許容、新規 2 件追加)
 * §7-50 (!important 不使用、specificity hierarchy で対応)
 * §7-66 / §7-78 (既存 selector 踏襲)
 * §7-86 (Mobile horizontal scroll-snap)
 */

@media (max-width: 768px) {
	/* === M-1: padding 縮小 === */
	.coful-stylist-detail {
		padding-left: 16px;
		padding-right: 16px;
	}
	.coful-stylist-detail .wp-block-post-content {
		padding-left: 0;
		padding-right: 0;
	}

	/* === M-2: profile 円形画像 100px + 4px border (Wix 同値) === */
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter {
		max-width: 100px;
	}
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter img {
		border: 4px solid rgba(139, 157, 131, 0.2);
	}

	/* === M-4: Load More button + wrap 非表示 (Mobile carousel では全画像 swipe で見せる)
	 *    既存 5027 / 5031 と同 selector / 同 specificity (0,3,1) で source 後勝ち */
	.coful-stylist-detail .wp-block-post-content .coful-stylist-loadmore-wrap,
	.coful-stylist-detail .wp-block-post-content .coful-stylist-loadmore-btn {
		display: none;
	}
	/* Load More で隠されている figure を Mobile では全表示 (coful-stylist-gallery-loadmore.js
	 * が .coful-stylist-gallery-hidden を付与する仕様、Mobile では Load More 不要なので解除) */
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image.coful-stylist-gallery-hidden:not(#individual-image) {
		display: flex;
	}

	/* === M-4: carousel 矢印 wrap (mu-plugin が gallery を coful-mobile-carousel-wrap で wrap) === */
	.coful-stylist-detail .wp-block-post-content .coful-mobile-carousel-wrap {
		position: relative;
		margin: 20px -16px;
	}
	.coful-stylist-detail .wp-block-post-content .coful-mobile-carousel-wrap .wp-block-gallery {
		margin: 0;
	}
	.coful-stylist-detail .wp-block-post-content .coful-mobile-carousel-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(255, 255, 255, 0.88);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 10;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		color: #2C3E30;
		font-size: 24px;
		line-height: 1;
		padding: 0 0 2px;
		font-family: serif;
		-webkit-tap-highlight-color: transparent;
	}
	.coful-stylist-detail .wp-block-post-content .coful-mobile-carousel-arrow--prev { left: 6px; }
	.coful-stylist-detail .wp-block-post-content .coful-mobile-carousel-arrow--next { right: 6px; }
}

/* ==================== END i-1-mobile region ==================== */

/* ==================== BEGIN i-1-mobile-fix1 region (M-1' / M-2' / M-4' / N-1) ==================== */
/*
 * Phase: 4-4-2-i-1-mobile-fix1
 * 作成日: 2026-05-17
 * 対象: Mobile viewport (@media max-width: 768px) のみ、3 page (rui/miki/eri)
 *
 * M-1': 5 セクション padding 半減
 *       4 sections (得意メニュー/施術例/お客様の声/主なメニュー) wp-block-group.has-global-padding
 *       16px → 8px (philosophy は既に 0、半減不可で除外)
 * M-2': profile 円 100→112px (border 4px solid rgba(139,157,131,0.2) は不変維持)
 * M-3': sticky nav「ご予約」link 修正は mu-plugin coful-stylist-mobile-footer.php で別途実施
 * M-4': carousel figure 78%→70% + container scroll-padding-inline: 15%
 *       両端ちら見え効果、scroll-snap-align: center 既存挙動維持、矢印/フリック/lightbox 不変
 * N-1: ヘッダー両端寄せ padding-inline 16px→8px (B 絶対値方式)
 *       Wix は構造が大きく異なるため絶対値採用
 *
 * 設計:
 *   - PC 完全不変保護: 全 rule を @media (max-width: 768px) 内
 *   - 既存 i-1-mobile sub-region は不変、本 sub-region で後勝ち override
 *   - 既存 4504 (gallery figure)、4252 (profile figure)、i-1-mobile sub-region
 *     と同 specificity で source 後勝ち
 *
 * scout-report.md (054-i-1-mobile-fix1/) と併読
 *
 * §7-23 / §7-33 / §7-44 / §7-50 / §7-66 / §7-78 / §7-86 / §7-94 / §7-97
 */

@media (max-width: 768px) {
	/* === M-1': 5 セクション padding 半減 (16 → 8px) ===
	 *    .coful-stylist-detail.has-global-padding (同クラス重ね specificity 0,2,0)
	 *    Gutenberg has-global-padding の Mobile デフォルト 16px を半減 */
	.coful-stylist-detail.has-global-padding {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* === M-2': profile 円 100→112px (既存 i-1-mobile sub-region L5610 を override) ===
	 *    border 4px solid rgba(139,157,131,0.2) は維持 (上書きしない) */
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter {
		max-width: 112px;
	}

	/* === M-4': carousel figure 78%→70% + scroll-padding center 化 ===
	 *    既存 4560 と同 selector / specificity (1,5,2) で source 後勝ち */
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 70%;
		flex: 0 0 70%;
	}
	/* scroll-padding-inline で両端 figure を中央 snap 可能に
	 * 既存 4542-4555 と同 selector で source 後勝ち */
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery,
	.coful-stylist-detail .wp-block-post-content .wp-block-gallery.columns-3 {
		scroll-padding-inline: 15%;
	}

	/* === N-1: ヘッダー padding 16→8px (back 左端 / reserve 右端 寄せ) ===
	 *    .coful-stylist-header (header tag selector) で specificity 確保 */
	header.coful-stylist-header {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* ==================== END i-1-mobile-fix1 region ==================== */

/* ==================== BEGIN i-1-mobile-fix2 region (M-2'' / M-1'' / M-4'' / N-1'') ==================== */
/*
 * Phase: 4-4-2-i-1-mobile-fix2
 * 作成日: 2026-05-17
 * 対象: Mobile viewport (@media max-width: 768px) のみ、3 page (rui/miki/eri)
 *
 * fix1 末から 4 微調整(全て §7-66 同クラス重ね .X.X で fix1 rule を後勝ち override):
 *   M-2'' profile 円 112→118px (Wix 39mm 同等、+6px)
 *   M-1'' 5 section padding 8→4px (philosophy 除く 4 sections)
 *   M-4'' gallery 1 枚大きく:scroll-padding 15%→0、container padding 16→4px、figure 70%→calc(100%-8px)≈95%
 *   N-1'' header padding 8→4px (back/reserve 更に端寄せ)
 *
 * 設計:
 *   - 既存 i-1-mobile / i-1-mobile-fix1 sub-region は完全不変 (rollback 単位、ドロップ条件 #10)
 *   - §7-66 同クラス重ね `.coful-stylist-detail.coful-stylist-detail` で specificity 上書き
 *   - JS / mu-plugin 編集なし (CSS only)
 *   - PC 完全不変保護: 全 rule を @media 内に閉じ込め
 *
 * scout-report.md (055-i-1-mobile-fix2/) と併読
 *
 * §7-23 / §7-33 / §7-50 / §7-66 (本 phase の主役) / §7-78 / §7-86 / §7-93 / §7-94 / §7-97
 */

@media (max-width: 768px) {
	/* === M-2'' profile 円 112→118px === */
	.coful-stylist-detail.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter {
		max-width: 118px;
	}

	/* === M-1'' 5 section padding 8→4px (philosophy は元々 0、対象外) === */
	.coful-stylist-detail.coful-stylist-detail.has-global-padding {
		padding-left: 4px;
		padding-right: 4px;
	}

	/* === M-4'' gallery 1 枚大きく(両端ちら見え無し)===
	 *    fix1 の scroll-padding-inline: 15% を 0 にリセット
	 *    既存 container padding 16px を 4px に縮小(5 sec と整合)
	 *    既存 4540-4555 / fix1 と同 selector、§7-66 重ねで後勝ち */
	.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery,
	.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery.columns-3 {
		scroll-padding-inline: 0;
		padding-left: 4px;
		padding-right: 4px;
	}
	/* figure を viewport ほぼ全幅に (両端ちら見え無し)
	 * calc(100% - 8px) で container padding 4+4 と整合、scroll-snap-align: center は既存維持 */
	.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: calc(100% - 8px);
		flex: 0 0 calc(100% - 8px);
	}

	/* === N-1'' header padding 8→4px === */
	header.coful-stylist-header.coful-stylist-header {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* ==================== END i-1-mobile-fix2 region ==================== */

/* ==================== BEGIN i-1-mobile-fix3 region (blockquote/p 余白 復元) ==================== */
/*
 * Phase: 4-4-2-i-1-mobile-fix3 (micro-fix)
 * 作成日: 2026-05-17
 * 対象: Mobile viewport のみ、3 page (rui/miki/eri)
 *
 * 真因:
 *   fix1/fix2 の `.coful-stylist-detail.has-global-padding` selector は実は
 *   page-level wrapper にマッチしていた(scout で 4 sections の closest が全て同 wrapper)。
 *   fix2 で page-level padding を 4px にしたため、post-content 直下の
 *   blockquote(キャッチコピー)と p(本文段落)も 4px しか余白がない状態に。
 *
 * 対応:
 *   blockquote と p (直下要素) に padding-inline: 4px を直接追加して
 *   page-level 4 + self 4 = 8px 余白を復元(fix1 末状態相当)。
 *   5 sections (h2 + 内部) はそのまま 4px 維持(ユーザー OK)。
 *
 * fix2 sub-region は完全不変、本 fix3 sub-region で追加 rule のみ。
 */

@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content > blockquote,
	.coful-stylist-detail .wp-block-post-content > p {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* ==================== END i-1-mobile-fix3 region ==================== */

/* ==================== BEGIN i-1-mobile-fix4 region (gallery 隣写真クリップ) ==================== */
/*
 * Phase: 4-4-2-i-1-mobile-fix4 (micro-fix)
 * 作成日: 2026-05-17
 *
 * 課題:
 *   fix2 末で gallery 1 枚目表示時に右端 32px 分の次写真がチラ見え
 *   (figure width 319 / viewport 375 / container padding 4 のため)
 *
 * 対応(figure 幅は維持):
 *   gallery container を figure 幅と同じ 319px に縮めて中央配置 (margin auto)。
 *   container の overflow-x: auto で scroll は維持、隣写真は container 外 (画面外)
 *   にあるので絶対に表示されない。figure 幅 100% (= 319px) で見た目の大きさは不変。
 *
 *   §7-66 同クラス重ね 3 段 .X.X.X で fix1/fix2 (2 段) を後勝ち。
 *   矢印は coful-mobile-carousel-wrap (gallery 外) に配置されたまま、機能維持。
 *   lightbox / フリック / scroll-snap-align: center は既存挙動維持。
 */

@media (max-width: 768px) {
	/* gallery container を 319px (figure 幅) に縮めて中央寄せ
	 * → 隣写真が container 外に出るのでクリップされ非表示
	 * 既存 fix1/fix2 の container padding 4px / scroll-padding 0 は上書き */
	.coful-stylist-detail.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery,
	.coful-stylist-detail.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery.columns-3 {
		max-width: 319px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
	}
	/* figure 幅を container 全幅 (= 319px、現状と同じ大きさ) に */
	.coful-stylist-detail.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100%;
		flex: 0 0 100%;
	}
}

/* ==================== END i-1-mobile-fix4 region ==================== */

/* ==================== BEGIN i-1-mobile-fix5 region (gallery 写真拡大) ==================== */
/*
 * Phase: 4-4-2-i-1-mobile-fix5 (micro-fix)
 * 作成日: 2026-05-17
 *
 * 課題: fix4 末で gallery 写真サイズ 319px (viewport 375、余白 28 each)
 * 要望: 写真をもう少し大きく、余白を半分(14 each、計 28 total)に
 *
 * 対応: container max-width 319 → 347 (375 - 28 = 347)
 *       figure は flex 0 0 100% (fix4 設定) で container 全幅追従、
 *       自動的に 347px 表示に拡大される。
 *
 * §7-66 同クラス重ね 4 段で fix4 (3 段) を後勝ち。
 * margin auto / padding 0 は fix4 のまま維持。
 */

@media (max-width: 768px) {
	.coful-stylist-detail.coful-stylist-detail.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery,
	.coful-stylist-detail.coful-stylist-detail.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .wp-block-gallery.columns-3 {
		max-width: 347px;
	}
}

/* ==================== END i-1-mobile-fix5 region ==================== */

/* ==================== BEGIN i-1-mobile-fix6 region (carousel-wrap 制約解除) ==================== */
/*
 * Phase: 4-4-2-i-1-mobile-fix6 (micro-fix)
 * 作成日: 2026-05-17
 *
 * 課題:
 *   fix5 で gallery max-width 347px を設定したが、実 width 335px に止まった。
 *   probe で coful-mobile-carousel-wrap の computed style に
 *   max-width: calc(100% - 32px) と margin: 16px positive が当たっており、
 *   parent post-content より 32px 狭くなっていた(i-1-mobile sub-region で書いた
 *   margin: 20px -16px が WP の has-global-padding 系 rule に上書きされている)。
 *
 * 対応:
 *   carousel-wrap の max-width / margin-inline 制約を明示的にゼロ化、
 *   gallery が post-content 全幅まで使えるようにする。
 *   その上で gallery max-width 347 + margin auto で中央化 → 余白 14 each。
 *
 * §7-66 同クラス重ね 2 段で書く(carousel-wrap は user-content 内なので
 * single class でも十分だが、念のため重ね specificity 確保)。
 */

@media (max-width: 768px) {
	/* carousel-wrap の幅制約を解除 (max-width: calc(100% - 32px) と +16 margin の打ち消し) */
	.coful-stylist-detail.coful-stylist-detail .wp-block-post-content .coful-mobile-carousel-wrap {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		width: auto;
	}
}

/* ==================== END i-1-mobile-fix6 region ==================== */

/* ==================== END i-1 region ==================== */
/* ==========================================================
   Phase 4-4-2-j-1-impl parkinginfo BEGIN
   Scope: body.page-id-212 (parkinginfo page only)
   Generated: 2026-05-18 (draft v1)

   設計方針:
   - body.page-id-212 スコープで他 page に絶対波及しない
   - ヒーロー = 全幅グレー背景 + h1 + 戻る button
   - 白カード = 中央寄せ、角丸 + box-shadow、駐車場説明 3 + お問い合わせ
   - specificity は 0-2-X 以上で Gutenberg core(:where 系)に勝つ設計
   - !important 不使用(§7-50)
   - PC + Mobile 両対応
   ========================================================== */

/* --- body 背景 (全 page スコープ外、page-id-212 限定) --- */
body.page-id-212 {
  background-color: #cccccc;
}

/* --- main 余白リセット (ヒーローを viewport 端まで届けるため) --- */
body.page-id-212 main,
body.page-id-212 .wp-site-blocks > main {
  padding-left: 0;
  padding-right: 0;
  background-color: #cccccc;
}

/* ===========================================================
   ヒーロー section
   =========================================================== */
body.page-id-212 .coful-parkinginfo-hero {
  background-color: #cccccc;
  padding: 80px 16px 64px;
  text-align: center;
  margin: 0;
}

body.page-id-212 .coful-parkinginfo-hero .coful-parkinginfo-hero__title {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: 400;
  color: #4a4a4a;
  margin: 0 0 2.5rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* 戻る button (ベージュ系暖色) */
body.page-id-212 .coful-parkinginfo-hero .wp-block-buttons .wp-block-button .wp-block-button__link {
  background-color: #a89169;
  color: #ffffff;
  padding: 0.95rem 4.5rem;
  border-radius: 2px;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

body.page-id-212 .coful-parkinginfo-hero .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
  background-color: #927954;
}

/* ===========================================================
   白カード共通
   =========================================================== */
body.page-id-212 .coful-parkinginfo-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  padding: 36px 28px;
  margin: 0 auto 24px;
  max-width: 800px;
}

body.page-id-212 .coful-parkinginfo-card:last-of-type {
  margin-bottom: 80px;
}

/* heading h2 (カード内見出し、下線付き) */
body.page-id-212 .coful-parkinginfo-card h2 {
  font-size: 1.5rem;
  font-weight: 500;
  color: #333333;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e6e6e6;
  letter-spacing: 0.02em;
}

body.page-id-212 .coful-parkinginfo-card h2:not(:first-child) {
  margin-top: 2.5rem;
}

/* heading h3 (サブ見出し、下線なし) */
body.page-id-212 .coful-parkinginfo-card h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333333;
  margin: 2rem 0 1rem;
  letter-spacing: 0.02em;
}

/* paragraph */
body.page-id-212 .coful-parkinginfo-card p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444444;
  margin: 0 0 1rem;
}

/* image */
body.page-id-212 .coful-parkinginfo-card .wp-block-image {
  margin: 1.5rem 0;
}

body.page-id-212 .coful-parkinginfo-card .wp-block-image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

body.page-id-212 .coful-parkinginfo-card .wp-block-image figcaption {
  font-size: 0.85rem;
  color: #666666;
  text-align: center;
  margin-top: 0.6rem;
  line-height: 1.5;
}

/* ===========================================================
   お問い合わせ card 専用 (電話 button + 営業時間)
   =========================================================== */
body.page-id-212 .coful-parkinginfo-card--contact .wp-block-buttons {
  margin: 1.5rem 0 0.5rem;
}

body.page-id-212 .coful-parkinginfo-card--contact .wp-block-button .wp-block-button__link {
  background-color: #4a4a4a;
  color: #ffffff;
  padding: 0.95rem 2rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

body.page-id-212 .coful-parkinginfo-card--contact .wp-block-button .wp-block-button__link:hover {
  background-color: #2a2a2a;
}

body.page-id-212 .coful-parkinginfo-card--contact p.has-small-font-size {
  font-size: 0.85rem;
  color: #666666;
  margin-top: 0.5rem;
}

/* ===========================================================
   Mobile (~767px) 調整
   =========================================================== */
@media (max-width: 767px) {
  body.page-id-212 .coful-parkinginfo-hero {
    padding: 56px 16px 48px;
  }

  body.page-id-212 .coful-parkinginfo-hero .coful-parkinginfo-hero__title {
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }

  body.page-id-212 .coful-parkinginfo-hero .wp-block-buttons .wp-block-button .wp-block-button__link {
    padding: 0.9rem 3.5rem;
  }

  body.page-id-212 .coful-parkinginfo-card {
    border-radius: 8px;
    padding: 24px 18px;
    margin: 0 12px 16px;
    max-width: none;
  }

  body.page-id-212 .coful-parkinginfo-card:last-of-type {
    margin-bottom: 48px;
  }

  body.page-id-212 .coful-parkinginfo-card h2 {
    font-size: 1.3rem;
  }

  body.page-id-212 .coful-parkinginfo-card h2:not(:first-child) {
    margin-top: 2rem;
  }

  body.page-id-212 .coful-parkinginfo-card h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.8rem;
  }

  body.page-id-212 .coful-parkinginfo-card p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  body.page-id-212 .coful-parkinginfo-card .wp-block-image figcaption {
    font-size: 0.8rem;
  }
}

/* ==========================================================
   Phase 4-4-2-j-1-impl parkinginfo END
   ========================================================== */
/* ==========================================================
   Phase 4-4-2-j-1-fix1 parkinginfo BEGIN
   Scope: body.page-id-212 (parkinginfo page only)
   Generated: 2026-05-18

   方針:
   - 既存 j-1-impl region は完全不変扱い(rollback 単位維持、§7-104)
   - 本 sub-region で .coful-parkinginfo-card.coful-parkinginfo-card
     による同クラス重ね specificity 上書き(§7-66)

   修正内容:
   1. h2 / h3 数字フォント問題 → 日本語と英数字を同一 design space で描画
   2. PC 周辺マップ (img.wp-image-185) を 70% に縮小
   3. 第2駐車場画像 (img.wp-image-204) 上下 10% トリミング相当
   ========================================================== */

/* ===========================================================
   1. h2 / h3 フォント統一
   日本語フォント先頭 + palt で英数字との整合性向上
   =========================================================== */
body.page-id-212 .coful-parkinginfo-card.coful-parkinginfo-card h2,
body.page-id-212 .coful-parkinginfo-card.coful-parkinginfo-card h3 {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
}

/* ===========================================================
   2. 周辺マップ (img.wp-image-185) PC 70% 縮小
   Mobile では 100% のまま
   =========================================================== */
@media (min-width: 768px) {
  body.page-id-212 .coful-parkinginfo-card.coful-parkinginfo-card figure.wp-block-image:has(img.wp-image-185) {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===========================================================
   3. 第2駐車場画像 (img.wp-image-204) 上下 10% トリミング相当
   実装方式: figure に aspect-ratio + img を object-fit cover
   元画像 4:3 想定で aspect-ratio: 5/3 (上下 10% カット相当)
   実機で trim 量が不足/過剰なら aspect-ratio を微調整 (5.5/3 / 4.5/3 等)
   =========================================================== */
body.page-id-212 .coful-parkinginfo-card.coful-parkinginfo-card figure.wp-block-image:has(img.wp-image-204) {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 8px;
}

body.page-id-212 .coful-parkinginfo-card.coful-parkinginfo-card figure.wp-block-image:has(img.wp-image-204) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
  display: block;
}

/* ==========================================================
   Phase 4-4-2-j-1-fix1 parkinginfo END
   ========================================================== */

/* ==========================================================================
   Phase 4-4-2-k-1 recruit page top spacing fix BEGIN
   目的:/recruit (post 221) で main.wp-block-group の上余白 1.2rem を除去
   原因:WP global-styles inline-css の :where(.wp-site-blocks) > * の
        margin-block-start: 1.2rem
   ========================================================================== */
body.page-id-221 .wp-site-blocks > main.wp-block-group {
  margin-block-start: 0;
}
/* ==========================================================================
   Phase 4-4-2-k-1 recruit page top spacing fix END
   ========================================================================== */

/* ==========================================================================
   Phase 4-4-2-k-1-fix1 recruit page article top spacing fix BEGIN
   目的:article.recruit-page の上 margin 1.2rem を除去
   原因:post 221 の post_content 冒頭に <style> タグがあり、
        article が constrained layout 上で 2 番目の子になるため、
        :where(.is-layout-flow) > * の margin-block-start: 1.2rem が効く
   ========================================================================== */
body.page-id-221 .entry-content article.recruit-page {
  margin-block-start: 0;
}
/* ==========================================================================
   Phase 4-4-2-k-1-fix1 recruit page article top spacing fix END
   ========================================================================== */

/* ==========================================================================
   Phase 4-4-2-k-1-fix2 recruit page mobile hero top padding fix BEGIN
   目的:Mobile で hero section 内のピル要素が
        ヘッダー下端に密着してしまう問題を解消
   背景:k-1-fix1 で article の上 margin を 0 にした副作用、
        Mobile breakpoint のみ hero に上 padding を追加して背景色連続を維持
   ========================================================================== */
@media (max-width: 768px) {
  body.page-id-221 .recruit-page > section.hero {
    padding-block-start: 16px;
  }
}
/* ==========================================================================
   Phase 4-4-2-k-1-fix2 recruit page mobile hero top padding fix END
   ========================================================================== */

/* ==== BEGIN: SECTION 9 - Instagram Feed (L1-c) ==== */
/* Wix 同等性: PC 4 col x 2 row, aspect ~3:4 縦長 (Wix ProGallery 211x281), gap 16px, container max-width 980px.
   §7-22 CSS 変数 fallback, §7-23 BEGIN/END marker, §7-50 no !important, §7-63 asymmetric padding. */

.coful-ig-feed {
    --coful-ig-columns: var(--coful-ig-cols, 4);
    --coful-ig-gap: 16px;
    --coful-ig-radius: 0px;
    --coful-ig-aspect: 3 / 4;
    --coful-ig-max-width: 980px;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--coful-ig-max-width);
    padding: 32px 32px;
    width: 100%;
}

.coful-ig-feed__list {
    display: grid;
    grid-template-columns: repeat(var(--coful-ig-columns), 1fr);
    gap: var(--coful-ig-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.coful-ig-feed__item {
    aspect-ratio: var(--coful-ig-aspect);
    border-radius: var(--coful-ig-radius);
    margin: 0;
    overflow: hidden;
    position: relative;
}

.coful-ig-feed__item--empty {
    background: rgba(0, 0, 0, 0.04);
}

.coful-ig-feed__item a {
    display: block;
    height: 100%;
    width: 100%;
}

.coful-ig-feed__item img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    width: 100%;
}

.coful-ig-feed__item:hover img {
    transform: scale(1.05);
}

.coful-ig-feed__more {
    margin-top: 32px;
    text-align: center;
}

.coful-ig-feed__more-btn {
    background: #fff;
    border: 1px solid #414141;
    color: #414141;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 14px 36px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.coful-ig-feed__more-btn:hover {
    background: #414141;
    color: #fff;
}

.coful-ig-feed__more-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .coful-ig-feed {
        --coful-ig-columns: var(--coful-ig-cols-mobile, 2);
        padding: 32px 16px;
    }
}

/* ==== END: SECTION 9 - Instagram Feed (L1-c) ==== */

/* ==== BEGIN: SECTION 9 - Hover Overlay + Modal (m-1) ==== */
/* NG-5 hover overlay (PC) + NG-6 modal lightbox + Mobile 初期 4 枚化。
   §7-50 specificity 設計(no priority-keyword)、§7-78 既存 .coful-ig-feed BEM 踏襲。
   既存 L1-c region(__item:hover img の scale)とは別レイヤで共存(overlay は item に absolute 重ね)。 */

.coful-ig-feed__item {
    cursor: pointer;
}

/* --- NG-5: hover overlay --- */
.coful-ig-feed__overlay {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.coful-ig-feed__overlay-cap {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
    .coful-ig-feed__item:hover .coful-ig-feed__overlay,
    .coful-ig-feed__item:focus-within .coful-ig-feed__overlay {
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1;
    }
}

/* --- NG-6: modal lightbox --- */
.coful-ig-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coful-ig-modal[hidden] {
    display: none;
}

.coful-ig-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
}

.coful-ig-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(92vw, 1040px);
    max-height: 90vh;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.coful-ig-modal__media {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111111;
}

.coful-ig-modal__img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.coful-ig-modal__panel {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 24px;
    overflow-y: auto;
    background-color: #ffffff;
}

.coful-ig-modal__account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #262626;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.coful-ig-modal__account:hover {
    color: #000000;
}

.coful-ig-modal__caption {
    flex: 1 1 auto;
    color: #333333;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

.coful-ig-modal__date {
    color: #999999;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.coful-ig-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #262626;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.coful-ig-modal__close:hover {
    background-color: #ffffff;
}

.coful-ig-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.coful-ig-modal__nav:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

.coful-ig-modal__nav--prev {
    left: 10px;
}

.coful-ig-modal__nav--next {
    right: calc(340px + 10px);
}

/* --- scroll lock(モーダル表示中の背景固定) --- */
body.coful-ig-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* --- Mobile: 初期 4 枚化 + モーダル縦積み --- */
@media (max-width: 768px) {
    .coful-ig-feed:not(.coful-ig-feed--expanded) .coful-ig-feed__item:nth-child(n + 5) {
        display: none;
    }

    .coful-ig-modal__dialog {
        flex-direction: column;
        width: 96vw;
        max-height: 92vh;
    }

    .coful-ig-modal__media {
        flex: 0 0 auto;
        max-height: 55vh;
    }

    .coful-ig-modal__img {
        max-height: 55vh;
    }

    .coful-ig-modal__panel {
        flex: 1 1 auto;
        flex-basis: auto;
        padding: 18px 16px;
    }

    .coful-ig-modal__nav {
        top: 27vh;
    }

    .coful-ig-modal__nav--next {
        right: 10px;
    }
}

/* ==== END: SECTION 9 - Hover Overlay + Modal (m-1) ==== */

/* ==== BEGIN: SECTION 9 - fix1 (video modal + caption + mobile padding) ==== */
/* m-1-fix1: ① modal VIDEO 再生 / ② hover caption 上寄せ+拡大 / ③ Mobile gallery 左右余白。
   §7-78 同 selector 後勝ちで m-1 region(上方)を上書き。§7-50 no priority-keyword。L1-c region は無傷。 */

/* --- ② hover overlay caption: 上寄せ + font 拡大 --- */
.coful-ig-feed__overlay {
    align-items: flex-start;
}

.coful-ig-feed__overlay-cap {
    font-size: 15px;
}

/* --- ① modal video element --- */
.coful-ig-modal__video {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    background-color: #000000;
}

/* --- ③ Mobile: gallery 左右余白(.coful-top widening -16px を相殺し visible 16px)+ video 高さ --- */
@media (max-width: 768px) {
    .coful-ig-feed {
        padding-left: 32px;
        padding-right: 32px;
    }

    .coful-ig-modal__video {
        max-height: 55vh;
    }
}

/* ==== END: SECTION 9 - fix1 (video modal + caption + mobile padding) ==== */

/* ==== BEGIN: SECTION 9 - fix2 (VIDEO modal center play button) ==== */
/* m-1-fix2: VIDEO モーダル中央に Wix 風 ▶(白半透明の丸 + 三角)。(A)方式 = ネイティブ controls 併用。
   再生中(.is-playing)は ▶ を隠す。§7-78 後勝ち、L1-c/m-1/fix1 region は無傷。§7-50 no priority-keyword。 */

.coful-ig-modal__media {
    position: relative;
}

.coful-ig-modal__playbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #262626;
    cursor: pointer;
    transition: opacity 0.25s ease, background-color 0.2s ease;
}

.coful-ig-modal__playbtn:hover {
    background-color: #ffffff;
}

.coful-ig-modal__playbtn svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
}

.coful-ig-modal__media.is-playing .coful-ig-modal__playbtn {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .coful-ig-modal__playbtn {
        width: 60px;
        height: 60px;
    }

    .coful-ig-modal__playbtn svg {
        width: 24px;
        height: 24px;
    }
}

/* ==== END: SECTION 9 - fix2 (VIDEO modal center play button) ==== */

/* ==== BEGIN: phase-4-4-2-n-1 recruit form (recruit-cntact / contact-8) ==== */
.coful-recruit-form {
    max-width: 760px;
    margin-inline: auto;
    padding: 48px 24px 64px;
    text-align: center;
    color: #333333;
}
.coful-recruit-form__badge {
    display: inline-block;
    background: #c5a47e;
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    box-shadow: 0 4px 10px rgba(197, 164, 126, 0.2);
}
.coful-recruit-form__title {
    font-family: "Cormorant Garamond", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 24px;
    color: #2a2a2a;
}
.coful-recruit-form__lead {
    margin: 0 0 32px;
    line-height: 1.9;
    color: #5a5a5a;
    font-size: 0.95rem;
}
.coful-recruit-form__lead p {
    margin: 0 0 4px;
}
.coful-recruit-form__conditions {
    border: 1px solid #d8cdbb;
    border-radius: 10px;
    padding: 24px 28px;
    margin: 0 auto 36px;
    max-width: 600px;
    background: #faf8f4;
    text-align: left;
}
.coful-recruit-form__conditions-title {
    text-align: center;
    font-weight: 700;
    color: #8e7d6f;
    margin: 0 0 16px;
    letter-spacing: 0.05em;
}
.coful-recruit-form__check {
    list-style: none;
    margin: 0;
    padding: 0;
}
.coful-recruit-form__check li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
    color: #4a4a4a;
}
.coful-recruit-form__check li:last-child {
    margin-bottom: 0;
}
.coful-recruit-form__check li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #c5a47e;
    font-weight: 700;
}
.coful-recruit-form__body {
    text-align: left;
}
.coful-recruit-form__detail-link {
    margin: 28px 0 0;
    font-size: 0.85rem;
    color: #707070;
    text-align: center;
    line-height: 1.7;
}
.coful-recruit-form__detail-link a {
    color: #8e7d6f;
    text-decoration: underline;
}
.coful-recruit-form .cf7-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.coful-recruit-form .cf7-form-row {
    margin-bottom: 18px;
}
.coful-recruit-form .wpcf7-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5a5a5a;
    line-height: 1.8;
}
.coful-recruit-form .wpcf7-form input[type="text"],
.coful-recruit-form .wpcf7-form input[type="email"],
.coful-recruit-form .wpcf7-form input[type="tel"],
.coful-recruit-form .wpcf7-form input[type="date"],
.coful-recruit-form .wpcf7-form input[type="number"],
.coful-recruit-form .wpcf7-form select,
.coful-recruit-form .wpcf7-form textarea {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid #d3d0c8;
    border-radius: 8px;
    background: #ffffff;
    font-size: 1rem;
    color: #333333;
    box-sizing: border-box;
}
.coful-recruit-form .wpcf7-form textarea {
    min-height: 120px;
    resize: vertical;
}
.coful-recruit-form .wpcf7-form input:focus,
.coful-recruit-form .wpcf7-form select:focus,
.coful-recruit-form .wpcf7-form textarea:focus {
    outline: none;
    border-color: #c5a47e;
    box-shadow: 0 0 0 2px rgba(197, 164, 126, 0.15);
}
.coful-recruit-form .wpcf7-form .wpcf7-radio .wpcf7-list-item,
.coful-recruit-form .wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
    display: inline-block;
    margin: 8px 18px 4px 0;
}
.coful-recruit-form .wpcf7-form .wpcf7-list-item-label {
    margin-left: 4px;
    font-weight: 400;
}
.coful-recruit-form .cf7-privacy-notice {
    font-size: 0.8rem;
    color: #707070;
    text-align: center;
    margin: 24px 0 16px;
    line-height: 1.7;
}
.coful-recruit-form .cf7-privacy-notice a {
    color: #8e7d6f;
}
.coful-recruit-form .cf7-form-submit {
    text-align: center;
}
.coful-recruit-form .wpcf7-form .wpcf7-submit {
    display: block;
    width: 100%;
    padding: 16px 24px;
    margin-top: 4px;
    background: #8e7d6f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.25s ease;
}
.coful-recruit-form .wpcf7-form .wpcf7-submit:hover {
    background: #7a6a5d;
}
@media (max-width: 768px) {
    .coful-recruit-form {
        padding: 32px 16px 48px;
    }
    .coful-recruit-form .cf7-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .coful-recruit-form__conditions {
        padding: 20px 18px;
    }
}
/* ==== END: phase-4-4-2-n-1 recruit form (recruit-cntact / contact-8) ==== */

/* ============================================================
 * BEGIN p-1 region (Phase 4-4-2-p-1, 2026-05-23)
 * /privacy-policy/ (post_id=238) 表示最適化
 * scope: body.page-id-238 .entry-content (他ページ波及ゼロ)
 * approach: (A) style.css scoped。inline style と display 衝突なし
 * ============================================================ */

body.page-id-238 .entry-content {
	max-width: 760px;
	margin-inline: auto;
	padding: 48px 32px 80px;
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: #3a3a3a;
}

@media (max-width: 768px) {
	body.page-id-238 .entry-content {
		padding: 32px 16px 64px;
		font-size: 15px;
		line-height: 1.85;
	}
}

body.page-id-238 .entry-content > p {
	margin: 1em 0;
}

body.page-id-238 .entry-content > hr {
	border: 0;
	border-top: 1px solid #e5e0d8;
	margin: 2.5em 0;
}

body.page-id-238 .entry-content > h2 {
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 600;
	color: #2a2a2a;
	margin: 2.6em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #c5a47e;
	letter-spacing: 0.02em;
}

@media (max-width: 768px) {
	body.page-id-238 .entry-content > h2 {
		font-size: 1.35rem;
	}
}

body.page-id-238 .entry-content > h3 {
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	font-size: 1.18rem;
	line-height: 1.55;
	font-weight: 600;
	color: #4a4030;
	margin: 1.8em 0 0.5em;
	padding-left: 0.7em;
	border-left: 3px solid #c5a47e;
	letter-spacing: 0.02em;
}

@media (max-width: 768px) {
	body.page-id-238 .entry-content > h3 {
		font-size: 1.08rem;
	}
}

body.page-id-238 .entry-content ul,
body.page-id-238 .entry-content ol {
	padding-left: 1.6em;
	margin: 0.8em 0 1.2em;
}

body.page-id-238 .entry-content ul li,
body.page-id-238 .entry-content ol li {
	margin: 0.35em 0;
}

body.page-id-238 .entry-content a {
	color: #8e7d6f;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	word-break: break-all;
}

body.page-id-238 .entry-content a:hover {
	color: #c5a47e;
}

body.page-id-238 .entry-content pre {
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
	white-space: pre-wrap;
	word-break: break-word;
	background: #f7f4ee;
	border-left: 3px solid #c5a47e;
	padding: 1em 1.2em;
	margin: 1em 0;
	font-size: 0.95em;
	line-height: 1.8;
}

body.page-id-238 .entry-content strong {
	color: #2a2a2a;
	font-weight: 600;
}

body.page-id-238 .entry-content table {
	margin: 1.2em 0;
	font-size: 0.95em;
	font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP'), sans-serif;
}

body.page-id-238 .entry-content table th,
body.page-id-238 .entry-content table td {
	line-height: 1.7;
}

@media (max-width: 768px) {
	body.page-id-238 .entry-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 0.88em;
	}
	body.page-id-238 .entry-content table th,
	body.page-id-238 .entry-content table td {
		min-width: 8em;
	}
}

/* ============================================================
 * END p-1 region
 * ============================================================ */

/* ============================================================
 * BEGIN q-1 region (Phase 4-4-2-q-1, 2026-05-23)
 * トップ post 235 Mobile 表示改善 5 件 (T1-T5)
 * scope: Mobile only (@media max-width: 768px) — PC 完全不変
 * 用途: T1 HERO 改行+｜非表示 / T2 CONCEPT 1行 / T3 About padding+font統一 /
 *       T4 STYLIST_NOTE 改行 / T5 MENU_NOTE 左寄せ箇条書き 1行
 * ============================================================ */

/* 汎用ユーティリティ: デフォルトは PC で何もしない */
.coful-sp-br { display: none; }
/* .coful-sp-hide: PC は visible のまま (デフォルト span = inline、何も書かない) */

@media (max-width: 768px) {
	/* === T1: HERO 見出し Mobile 改行 + ｜非表示 === */
	.coful-top__hero-caption-text .coful-top__hero-caption-name {
		display: block;
	}
	.coful-sp-hide {
		display: none;
	}

	/* === T4 / T5 で br 切替用 (T1 と汎用共有) === */
	.coful-sp-br {
		display: block;
	}

	/* === T2: CONCEPT quote 1 行に収める === */
	.coful-top .coful-top__concept .coful-top__concept-quote {
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: 0.3px;
		white-space: nowrap;
	}

	/* === T3: About Mobile 左右 padding 16/16 統一 + content p font CONCEPT 同値 === */
	.coful-top.coful-top .coful-top__about {
		padding-left: 16px;
		padding-right: 16px;
	}
	.coful-top .coful-top__about .coful-top__about-inner .coful-top__about-content p {
		font-size: 14px;
		line-height: 1.7;
		letter-spacing: 0.3px;
	}

	/* === T5: MENU_NOTE 左寄せ + 箇条書き + 各項目 1 行 ===
	 * font-size 11px (指示書下限「目安 11px を割らない」境界、最長 32 文字を 366px 内に収める) */
	.coful-top.coful-top .coful-top__menu-note {
		text-align: left;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 11px;
		line-height: 1.8;
		letter-spacing: 0px;
		font-feature-settings: "palt" 1;
	}
	/* PC で改行に使う <br> は Mobile では非表示 (block化したアイテムが既に改行する) */
	.coful-top .coful-top__menu-note br {
		display: none;
	}
	/* 各項目を block 化 + 行頭マーカー + 1 行 */
	.coful-top .coful-top__menu-note .coful-top__menu-note-item {
		display: block;
		padding-left: 1em;
		text-indent: -1em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.coful-top .coful-top__menu-note .coful-top__menu-note-item::before {
		content: "・";
		display: inline-block;
		width: 1em;
		text-indent: 0;
		text-align: left;
	}
}

/* ============================================================
 * END q-1 region
 * ============================================================ */



/* ============================================================
 * BEGIN q-1-fix1 region (Phase 4-4-2-q-1-fix1, 2026-05-23)
 * CONCEPT/About Mobile 修正 (F1-F5)
 * scope: Mobile only (@media max-width: 768px) — PC 完全不変
 * 上書き: q-1 region の CONCEPT/About 規則を cascade 後勝ちで是正
 *        T1/T4/T5・p-1/q-1 region は保全
 * ============================================================ */

@media (max-width: 768px) {
	/* === F1: CONCEPT 本文 p も quote と同じ 14px に統一 (全テキスト同サイズ) === */
	.coful-top.coful-top .coful-top__concept .coful-top__concept-text > p {
		font-size: 14px;
		line-height: 1.7;
		letter-spacing: 0.3px;
	}

	/* === F2: CONCEPT 右余白を左と同値 16px (左右対称) === */
	.coful-top.coful-top .coful-top__concept {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* === F3 + F4: About section padding を pre-q1 の 32/16 に復元 ===
	 * q-1 で 16/16 に変えたが、写真の左余白 (F4) を pre-q1 値に戻すため 32/16 に戻す。
	 * 文字列エリア (.about-content) は § F3 にて左右対称化する別ルールで補正 */
	.coful-top.coful-top .coful-top__about {
		padding-left: 32px;
		padding-right: 16px;
	}
	/* F3: 文字列エリアを左右対称 16/16 に。
	 * 注: .coful-top__about-content は `display: contents` のため margin/padding が効かない。
	 *     代わりに content 直下の全 p (.about-name 装飾行 / .about-tagline / 本文 p) に
	 *     padding-right: 16px を適用し、文字列の右余白を 16px 確保する。
	 *     左余白は section padding-left: 32px + section widening (-16px) = viewport 左 16px で OK。
	 *     写真 (.coful-top__about-image) は p ではないため右余白 0 を維持 (pre-q1 と整合)。 */
	.coful-top.coful-top .coful-top__about .coful-top__about-content > p {
		padding-right: 16px;
		box-sizing: border-box;
	}

	/* === F5: About 装飾行 .about-name を pre-q1 の 17.6px / Cormorant Garamond に復元 ===
	 * q-1 の `.about-content p { font-size: 14px }` が装飾行にも効いていた問題を是正 */
	.coful-top.coful-top .coful-top__about .coful-top__about-content .coful-top__about-name {
		font-size: 17.6px;
		line-height: 1.6;
		letter-spacing: 0.88px;
		font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
	}
	/* tagline (`~あなたの生活を彩りで満たす~`) も装飾行扱いで font-size を復元 */
	.coful-top.coful-top .coful-top__about .coful-top__about-content .coful-top__about-tagline {
		font-size: 13px;
		line-height: 1.7;
		letter-spacing: 0.3px;
	}

	/* (維持) About 本文段落 (.about-name / .about-tagline 以外の p) は q-1 の 14px のまま */
}

/* ============================================================
 * END q-1-fix1 region
 * ============================================================ */








/* ============================================================
 * BEGIN q-1-fix2 region (Phase 4-4-2-q-1-fix2, 2026-05-23)
 * CONCEPT/About 実テキスト左右ギャップ 14px 統一 + About tagline +2px (= 16px)
 * scope: Mobile only (@media max-width: 768px) — PC 完全不変
 * 実測駆動: pre fix2 計測で CONCEPT leftGap=0/rightGap=0, About leftGap=16/rightGap=0
 *           → 実テキスト要素に直接 padding/margin で 14/14 達成。
 * 注: .coful-top widening (§7-63) で section padding は実テキストに反映されない
 *     ため、実テキスト要素 (.coful-top__concept-quote, .concept-text > p,
 *     .about-content > p) に直接当てる。
 * ============================================================ */

@media (max-width: 768px) {
	/* === G1: CONCEPT 実テキスト左右ギャップ 14/14 ===
	 * pre fix2: leftGap=0/rightGap=0 (widening で section padding 16/16 が打ち消される)
	 * 注: padding-inline は要素 box の内側余白で rect.left/right を動かさない。
	 *     margin-inline:14 で要素 box そのものを縮め、rect.left=14/rect.right=W-14 を実現 */
	.coful-top.coful-top .coful-top__concept .coful-top__concept-text > p,
	.coful-top.coful-top .coful-top__concept .coful-top__concept-quote {
		margin-left: 14px;
		margin-right: 14px;
	}

	/* === G2: About 実テキスト左右ギャップ 14/14 ===
	 * pre fix2: leftGap=16/rightGap=0 (section padding 32/16 + widening -16 で)
	 * bodyP/name/tagline に margin-left:-2 (16→14) + margin-right:14 (右側 box 縮める) */
	.coful-top.coful-top .coful-top__about .coful-top__about-content > p {
		margin-left: -2px;
		margin-right: 14px;
		padding-right: 0;   /* fix1 の padding-right:16 を取り消し (margin で代替) */
	}

	/* === G1b: CONCEPT 見出し + 画像 も左右 14/14 (本文と統一) ===
	 * fix2 G1 では本文/引用にだけ margin を当てたため、見出し wrapper と画像 div が
	 * widening のまま leftGap=0 で viewport 端まで広がっていた (ユーザー指摘 2026-05-23 追加修正)。
	 * heading-wrap と image div に margin-inline:14px を追加して 14/14 へ。 */
	.coful-top.coful-top .coful-top__concept .coful-top__concept-heading-wrap,
	.coful-top.coful-top .coful-top__concept .coful-top__concept-image {
		margin-left: 14px;
		margin-right: 14px;
	}
	/* .concept-image の既存 padding-right:16 (c-2 region 由来) を取り消し、
	 * box-sizing:border-box の content area を親 div の full width に揃える */
	.coful-top.coful-top .coful-top__concept .coful-top__concept-image {
		padding-left: 0;
		padding-right: 0;
	}
	/* 画像本体は親 div (362px) 内で実測 width=346 (16px 縮小) → 親 div の幅に揃える
	 * 既存 inline `width:100%` の specificity を上書き、padding/margin の干渉も排除 */
	.coful-top.coful-top .coful-top__concept .coful-top__concept-image img {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* === G3: About tagline font 15px ===
	 * fix2 後修正: ユーザー指示で 16px → 15px に変更 (2026-05-23)。
	 * 経緯: fix1 で tagline を 13px に設定していたため、fix2 +2px の解釈で当初 16px としたが、
	 *       ユーザー判断で 15px に確定。
	 * tagline 要素のみ。.about-name (17.6px) / 本文 p (14px) には波及せず */
	.coful-top.coful-top .coful-top__about .coful-top__about-content .coful-top__about-tagline {
		font-size: 15px;
	}

	/* (維持・明示):
	 * - 装飾行 .about-name は fix1 で 17.6px Cormorant Garamond (不変)
	 * - 本文 p は fix1 で 14px (不変)
	 * - 写真 .about-image / img は fix2 で触らず (leftGap baseline 16 維持)
	 * - T1/T4/T5 は q-1 で確立 (不変)
	 */
}

/* ============================================================
 * END q-1-fix2 region
 * ============================================================ */

/* ============================================================
 * BEGIN r-1 region (Phase 4-4-2-r-1, 2026-05-24)
 * トップ post 235: GALLERY ↔ footer 間の白空白削除
 * scope: body.home のみ (他ページ波及ゼロ)
 * 実測: Mobile 83.2px ( .coful-top pb 64 + footer mt 19.2 )
 *      PC 19.2px ( footer mt 19.2 のみ )
 * 両 viewport 共通で削除 (@media 不要)
 * ============================================================ */

/* .coful-top の bottom padding (Mobile 64px) を 0 に */
body.home .coful-top {
	padding-bottom: 0;
}

/* footer.wp-block-template-part の上 margin (theme.json block-gap 19.2px) を 0 に */
body.home main + footer.wp-block-template-part {
	margin-top: 0;
}

/* ============================================================
 * END r-1 region
 * ============================================================ */
/* ===== BEGIN t-1 region (Phase 4-4-2-t-1 stylist mobile 2026-05-24) =====
 * 対象: スタイリスト 3 page (rui=223 / miki=224 / eri=225)
 * scope: @media (max-width:768px) のみ、PC 完全不変
 * §7-23 idempotent BEGIN/END marker、§7-50 no !important、§7-66 同クラス重ね specificity、§7-78 既存 selector 踏襲
 *
 * 達成条件:
 *   1 キャッチコピー font-size 15→17px
 *   2 プロフィール本文 font-size 14→15px
 *   3 カード見出し font-size 14→15px
 *   4 カード本文 font-size 13→14px
 *   5 「私が大切に」見出し font-size 19→21px
 *   6 サブ見出し+本文 font-size 14→15px
 *   7 スキルカード外側余白 leftGap/rightGap ≈ 14px (現 20px → 14px)
 *   8 メニュー余白 leftGap/rightGap ≈ 14px、文字長非依存
 *      現状 rui=26 / miki=4 / eri=13 → 全 14
 *
 * 余白設計:
 *   親 .coful-stylist-detail は M-1'' で padding-inline:4px (leftGap=0 / 4 / postcontent leftGap=4)
 *   leftGap=14 を作るため、対象要素に margin-inline:10px (4+10=14) を設定
 *   max-width: calc(100% - 20px) で content 長依存を排除 (#8 の核心)
 */
@media (max-width: 768px) {
	/* === 1 キャッチコピー +2 → 17px === */
	.coful-stylist-detail .wp-block-post-content > blockquote.wp-block-quote p {
		font-size: 17px;
		line-height: 23.8px;
	}

	/* === 2 プロフィール本文 +1 → 15px === */
	.coful-stylist-detail .wp-block-post-content > p {
		font-size: 15px;
		line-height: 25.5px;
	}

	/* === 3 カード見出し +1 → 15px === */
	.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column h3.wp-block-heading {
		font-size: 15px;
		line-height: 21px;
	}

	/* === 4 カード本文 +1 → 14px === */
	.coful-stylist-detail .wp-block-post-content .wp-block-columns .wp-block-column p {
		font-size: 14px;
		line-height: 21px;
	}

	/* === 5 「私が大切に」見出し +2 → 21px === */
	.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy h2.wp-block-heading {
		font-size: 21px;
		line-height: 29.4px;
	}

	/* === 6 サブ見出し + 本文 +1 → 15px === */
	.coful-stylist-detail .wp-block-post-content .coful-stylist-philosophy p {
		font-size: 15px;
		line-height: 25.5px;
	}

	/* === 7 スキルカード外側余白 → leftGap 14px ===
	 * 現状 .wp-block-columns margin-inline:16 / max-width:calc(100% - 32px) (constrained)
	 * → 4 (.coful-stylist-detail padding) + 16 (margin) = leftGap 20
	 * 目標 14 = 4 + 10 → margin-inline:10px / max-width:calc(100% - 20px)
	 * §7-66 同クラス重ね + .coful-stylist-detail 親 chain (specificity 0,3,1) で後勝ち */
	.coful-stylist-detail .wp-block-post-content > .wp-block-columns {
		margin-left: 10px;
		margin-right: 10px;
		max-width: calc(100% - 20px);
	}

	/* === 8 メニュー余白 → leftGap 14px、文字長非依存 ===
	 * 現状 ul max-width:640px + margin:24px auto → li grid intrinsic で width が text 長依存に膨張
	 *   rui (短) 337px → margin auto = 22.31 → leftGap 26
	 *   miki (長) 382px (満タン) → margin 0 → leftGap 4 (バグ)
	 *   eri (中) 364px → margin 9.06 → leftGap 13
	 * 真因 (iter1 デバッグ): WP block theme `.is-layout-constrained > :where(:not(.align*))` が
	 *   `margin-inline: auto !important` を強制適用 (§7-50 順守のためこちらは !important 使えない)。
	 *   ul の auto margin は ul の resolved width 次第で決まる:
	 *     - content < max-width → ul は shrink-to-fit → 余剰が大きく margin auto → 大きい
	 *     - content ≥ max-width → ul は max-width 一杯 → 余剰小 → margin auto → 小さい
	 * 解: width: 100% で ul を強制的に max-width 一杯まで張り付かせ、auto margin を一律 (382-362)/2=10 に。
	 *   max-width: calc(100% - 20px) と組み合わせ、content 長に関わらず ul width=362、leftGap=14 が安定。
	 * §7-66 同クラス重ね specificity 0,4,1 (`.X .X X.X.X`) で既存 i-1 §8-1 (0,3,1) を後勝ち。 */
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list.coful-stylist-pricing-list {
		max-width: calc(100% - 20px);
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}
}
/* ===== END t-1 region ===== */

/* ===== BEGIN t-1-fix1 region (catchphrase + profile +1px, 2026-05-24) =====
 * 対象: スタイリスト 3 page (rui=223 / miki=224 / eri=225) Mobile のみ
 * 内容: t-1 で 15→17 / 14→15 にした 2 要素を更に +1px
 *   A キャッチコピー (blockquote p)  17 → 18px
 *   B プロフィール本文 (post-content > p) 15 → 16px
 * §7-23 idempotent / §7-50 no !important / §7-66 同クラス重ねは不要
 *   (t-1 region と同 selector で source 後勝ち = cascade)
 */
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content > blockquote.wp-block-quote p {
		font-size: 18px;
		line-height: 25.2px;
	}
	.coful-stylist-detail .wp-block-post-content > p {
		font-size: 16px;
		line-height: 27.2px;
	}
}
/* ===== END t-1-fix1 region ===== */

/* ===== BEGIN t-1-fix2 region (catchphrase + profile L/R 10px unify, 2026-05-24) =====
 * 対象: スタイリスト 3 page (rui=223 / miki=224 / eri=225) Mobile のみ
 * 目的: キャッチコピー blockquote と post-content 直下 p の bounding-box 左右余白を
 *       3 ページ一律 viewport から 10px に統一
 *
 * 現状(t-1-fix1 後):
 *   キャッチコピー p: leftGap=4 (rui/miki)、eri=18 (短文で blockquote が auto 縮小)
 *   プロフィール p : leftGap=4 + padding-inline 4 → テキスト実位置 viewport 8
 * 目標: 全要素 box leftGap/rightGap = 10、テキスト実位置 = 10
 *
 * 設計:
 *   .coful-stylist-detail padding=4 / .wp-block-post-content leftGap=4 (3 ページ共通)
 *   width:100% + max-width:calc(100% - 12px) で resolved width=370 を強制
 *   WP constrained-layout の `margin-inline: auto !important` が (382-370)/2=6 を均等配分
 *   → leftGap = 4 (detail) + 6 (auto margin) = 10 一律 (content 長非依存、t-1 §8 と同手法)
 *   p の padding-inline は fix3 由来の 4px を 0 に戻し、bbox = テキスト位置に
 *
 * §7-23 idempotent / §7-50 no !important / §7-66 同クラス重ね (blockquote)
 * §7-(新): width:100% + max-width で WP auto margin の解決値を一意化
 */
@media (max-width: 768px) {
	.coful-stylist-detail .wp-block-post-content > blockquote.wp-block-quote.wp-block-quote,
	.coful-stylist-detail .wp-block-post-content > p {
		width: 100%;
		max-width: calc(100% - 12px);
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}
}
/* ===== END t-1-fix2 region ===== */

/* ===== BEGIN t-1-fix4 region (profile photo ring 1.5× + shadow, 2026-05-24) =====
 * 対象: スタイリスト 3 page (rui=223 / miki=224 / eri=225) PC + Mobile
 * 内容: プロフィール円形写真の枠太さを 4px→6px (1.5×) + box-shadow 追加
 *
 * 現状:
 *   PC   (i-1-fix1 §A line 5006-): figure に border 4px solid rgba(139,157,131,0.2) (外側 ring 構造)
 *   Mobile (i-1-mobile line 5617-): img に border 4px solid rgba(139,157,131,0.2)
 *   どちらも 4px → 6px = 1.5×
 *
 * shadow: 0 4px 12px rgba(0,0,0,0.15) (subtle drop、円形 border-radius を踏襲)
 *
 * specificity: §7-66 同クラス重ね .aligncenter.aligncenter で 0,4,1 (既存 0,3,2) を後勝ち
 * §7-23 idempotent / §7-50 no !important / §7-78 既存 selector 踏襲
 */

/* PC */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter.aligncenter {
		border-width: 6px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
}

/* Mobile */
@media (max-width: 768px) {
	/* img 側に border 4px が当たっている。1.5× と shadow を img に適用 (border-radius:50% で円形 shadow) */
	.coful-stylist-detail .wp-block-post-content figure.wp-block-image.aligncenter.aligncenter img {
		border-width: 6px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
}
/* ===== END t-1-fix4 region ===== */

/* ===== BEGIN t-1-fix5 region (price -1px + last-baseline align, 2026-05-24) =====
 * 対象: スタイリスト 3 page (rui=223 / miki=224 / eri=225) Mobile のみ
 * 内容:
 *   (a) 価格 em.price font-size 17 → 16px (3 page 共通 CSS で一括反映)
 *   (b) li display:grid の align-items を last baseline に変更
 *       strong が 2 行折り返した時、価格 em.price を最終行のベースラインに揃える
 *       (デフォルトの baseline では strong 1 行目に揃うため、見た目バランスが悪い)
 * §7-23 idempotent / §7-50 no !important / §7-66 同クラス重ね
 *
 * 既存:
 *   line 4735 (i-1 §8-1) li { display:flex; justify-content:space-between; ... }
 *   line 5076 (i-1-fix1 I/J?) li { display:grid; grid-template-columns: 1fr auto 1ch; align-items:baseline; ... }
 *   line 5252 (i-1-fix?) em.price font-size 17px
 */
@media (max-width: 768px) {
	/* 価格 -1px */
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li em.price.price {
		font-size: 16px;
		line-height: 22.4px;
	}
	/* li 内 grid align を last baseline に: 2 行 strong 時に price/tilde を最終行ベースラインへ */
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list.coful-stylist-pricing-list li {
		align-items: last baseline;
	}
}
/* ===== END t-1-fix5 region ===== */

/* ===== BEGIN t-1-fix6 region (menu br PC-hide, 2026-05-24) =====
 * 対象: スタイリスト 3 page (rui=223 / miki=224 / eri=225) PC のみ
 * 内容: pricing-list 内 li strong の <br> を PC で display:none し 1 行に戻す
 *
 * 経緯:
 *   t-1-fix5 で post 224 (miki) menu strong に <br> を挿入 → Mobile 2 行表示は意図通り。
 *   しかし HTML 改行は viewport 不問のため、PC でも 2 行表示になっていた。
 *   PC は不変が要件のため、CSS で <br> を非表示にして 1 行表示に復元。
 *
 * §7-23 idempotent / §7-50 no !important
 */
@media (min-width: 769px) {
	.coful-stylist-detail .wp-block-post-content ul.coful-stylist-pricing-list li strong br {
		display: none;
	}
}
/* ===== END t-1-fix6 region ===== */

/* ===== BEGIN u-1 region (PC header nav width 88px + gap 10px, 2026-05-24) =====
 * 対象: PC ヘッダーナビ全 8 項目 (ホーム/スタイリスト/アクセス/ブログ/メニュー/ギャラリー/採用情報/ご予約)
 * scope: @media (min-width: 901px) のみ (Mobile hamburger drawer は 900px 以下、影響なし)
 *
 * 内容:
 *   - .site-nav ul の gap 24px → 10px
 *   - .site-nav li 各項目を width: 88px 固定 + 中央寄せ
 *
 * 既存:
 *   line 120: .site-nav ul { gap: 24px; display:flex; flex-wrap:wrap; }
 *   line 124: .site-nav li { margin:0; padding:0; }
 *   line 2260 (Mobile @media): .site-header .site-nav ul { gap:24px; flex-direction:column; } ← 触らない
 *
 * §7-23 idempotent / §7-50 no !important / §7-66 同クラス重ね
 */
@media (min-width: 901px) {
	.site-nav.site-nav ul {
		gap: 10px;
	}
	.site-nav.site-nav li {
		width: 88px;
		text-align: center;
	}
}
/* ===== END u-1 region ===== */

/* ===== BEGIN u-1-fix1 region (PC active line 88px × 10px, 2026-05-24) =====
 * 対象: PC ヘッダーナビ active line (li::before)
 * 内容:
 *   width 70 → 88px (各メニュー項目幅 88px と一致)
 *   max-width 70 → 88px
 *   height 4 → 10px
 * top: -26px は維持 (line 位置不変)
 *
 * 既存:
 *   line 2579 (b-3-j-fix3 F1) .site-header .site-nav ul li::before { width:70px; max-width:70px; height:4px; top:-26px; }
 * §7-66 同クラス重ね .site-nav.site-nav で specificity 0,4,2 (既存 0,3,2 を後勝ち) + cascade 末尾
 * scope: @media (min-width: 901px) ※ u-1 region と同 PC スコープ。Mobile hamburger は触らない
 */
@media (min-width: 901px) {
	.site-header .site-nav.site-nav ul li::before {
		width: 88px;
		max-width: 88px;
		height: 10px;
	}
}
/* ===== END u-1-fix1 region ===== */

/* ===== BEGIN u-1-fix2 region (PC active line height 6px, 2026-05-24) =====
 * 対象: PC ヘッダー active line (li::before)
 * 内容: height 10px → 6px (u-1-fix1 を後勝ち上書き)
 * width 88px / max-width 88px / top -26px は不変
 * §7-66 同クラス重ね + cascade 末尾
 */
@media (min-width: 901px) {
	.site-header .site-nav.site-nav ul li::before {
		height: 6px;
	}
}
/* ===== END u-1-fix2 region ===== */

/* === BEGIN Phase4-4-2 #C-3 (single post paragraph spacing) === */
/* 既存 e-2 region L3781 の `margin: 1em auto` の縦余白(16/15px)を
   Wix 相当の控えめ値 0.5em(約 8/7.5px)へ縮小。横 auto・max-width は継承。
   同 selector・同 specificity (0,2,1)・ソース後勝ちで override。!important 不使用。 */
body.single-post .wp-block-post-content > p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}
/* === END Phase4-4-2 #C-3 (single post paragraph spacing) === */

/* === BEGIN Phase4-4-2 #C-3-fix1 (single post block spacing contrast) === */
/* A1 ブロック化後の見た目調整:
   ブロック内(<br> 行送り)を詰める line-height、ブロック間(<p>)を離す margin。
   同 selector・ソース後勝ちで c-3(0.5em)/ e-2(1.9)を override。!important 不使用。 */
body.single-post .wp-block-post-content > p {
    line-height: 1.6;
    margin-block-start: 1.2em;
    margin-block-end: 1.2em;
}
/* === END Phase4-4-2 #C-3-fix1 (single post block spacing contrast) === */
/* === BEGIN mobile-linebreak-fix1 (iOS text auto-sizing 抑止, 2026-05-29) === */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* === END mobile-linebreak-fix1 === */

/* === BEGIN: top-bg-2zone === */
/*
 * 目的: トップ背景の二層化。CONCEPT(2)/About(3) をベージュ→白、MENU(8) を白→ベージュ。
 *   上半分(HERO〜REASONS)=白 / 下半分(ACCESS〜GALLERY)=ベージュ、色境界を REASONS↔ACCESS 1 箇所へ一本化。
 * 方式: 既存 b-3-i region (.coful-top .coful-top__* = 0,2,0) を、3-chain (.coful-top.coful-top .coful-top__* = 0,3,0)
 *   + style.css 末尾 append の source order で確実に上書き(§7-66 / §7-78)。!important 不使用(§7-50)。
 *   白 W=#fff(REASONS 実測 rgb(255,255,255))/ ベージュ B=#faf7f2(ACCESS 実測 rgb(250,247,242))。
 *   bg に @media 分岐は無いため PC/Mobile 共通 1 宣言で両対応。他 7 セクションは無変更。
 * 関連 §7: §7-43, §7-50, §7-57, §7-61, §7-66, §7-78, §7-154, §7-157
 */
.coful-top.coful-top .coful-top__concept { background-color: #fff; }
.coful-top.coful-top .coful-top__about   { background-color: #fff; }
.coful-top.coful-top .coful-top__menu    { background-color: #faf7f2; }
/* === END: top-bg-2zone === */

/* === BEGIN: concept-linebreak-strict === */
/* iOS WebKit の line-break:auto 緩解釈による禁則違反(ッ・ー 行頭)を是正。
   line-break は継承プロパティのため .coful-top 一括で配下本文に適用。 */
.coful-top { line-break: strict; }
/* === END: concept-linebreak-strict === */

/* === BEGIN: concept-textwrap-fix === */
/* 親テーマ Twenty Twenty-Five の `p{text-wrap:pretty}` が iOS WebKit で本文を
   早折返し(行長バランス)させるため、.coful-top 本文 p は通常折返しへ戻す。
   line-break:strict(禁則)は維持。§7-66 同クラス重ねで p 直指定(0,0,1)に勝つ。 */
.coful-top.coful-top p { text-wrap: wrap; text-wrap-style: auto; }
/* === END: concept-textwrap-fix === */

/* === BEGIN: textwrap-sitewide === */
/* 親テーマ Twenty Twenty-Five の site-wide text-wrap:pretty を打ち消す
   (iOS WebKit 早折返し是正、全ページ+将来ページ。Blink 非再現)。
   specificity 0,0,2 > 親 p/h の 0,0,1。!important 不使用。 */
html p, html h1, html h2, html h3, html h4, html h5, html h6,
html blockquote, html caption, html figcaption {
  text-wrap: wrap;
  text-wrap-style: auto;
}
/* === END: textwrap-sitewide === */