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

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

/* ==========================================================================
   コスメサロン美 土台整備（ローカル検証環境）
   1. 見出しフォント（明朝）
   2. SWELL × VK Blocks のブロックスタイル競合の解消
   3. VK Blocks のプライマリカラーをサイトカラーに合わせる
   ========================================================================== */

:root {
	--cosmebi-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
		"Yu Mincho", "YuMincho", "游明朝", "MS PMincho", serif;
	--cosmebi-ai: #33506e;      /* メインカラー（藍） */
	--cosmebi-ai-deep: #22364a; /* 濃色（テキスト用） */
	--cosmebi-accent: #cfdce6;  /* アクセント（淡藍） */
}

/* --------------------------------------------------------------------------
   1. 見出しフォント
   SWELLカスタマイザーは「サイト全体のベースフォント」しか選べず、
   「見出しだけ明朝」という設定項目が存在しないためCSSで補う。
   Webフォントは読み込まず、OS標準の明朝にフォールバックさせる。
   -------------------------------------------------------------------------- */
.c-headLogo,
.c-headLogo__title,
.c-pageTitle,
.c-secTitle,
.p-mainVisual__title,
.entry-title,
.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.vk_heading_title,
.wp-block-heading,
h1, h2, h3, h4 {
	font-family: var(--cosmebi-font-serif);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ウィジェット・カード見出し・ボタン類は可読性重視でベースフォントのまま */
.c-widget__title,
.widget_title,
.p-postList__title,
.c-tabList__button,
.wp-block-vk-blocks-button a,
.wp-element-button {
	font-family: inherit;
	letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   2. SWELL × VK Blocks のブロックスタイル競合の解消
   本文はVK Blocks（Lightning系）で作られており、見出しに
   `is-style-vk-heading-*` が付いている。VK側のCSSは `.is-style-vk-heading-plain`
   （詳細度 0,1,0）だが、SWELLは `.post_content h2`（0,1,1）で背景塗りを当てるため
   SWELLが勝ち、「装飾なし」で作られた見出しが濃紺の塗り帯になってしまう。
   要素セレクタを足して詳細度を上げ、VK側の意図（装飾なし）を復元する。
   -------------------------------------------------------------------------- */
.post_content h1[class*="is-style-vk-heading-"],
.post_content h2[class*="is-style-vk-heading-"],
.post_content h3[class*="is-style-vk-heading-"],
.post_content h4[class*="is-style-vk-heading-"] {
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	color: inherit;
}

.post_content h1[class*="is-style-vk-heading-"]::before,
.post_content h1[class*="is-style-vk-heading-"]::after,
.post_content h2[class*="is-style-vk-heading-"]::before,
.post_content h2[class*="is-style-vk-heading-"]::after,
.post_content h3[class*="is-style-vk-heading-"]::before,
.post_content h3[class*="is-style-vk-heading-"]::after,
.post_content h4[class*="is-style-vk-heading-"]::before,
.post_content h4[class*="is-style-vk-heading-"]::after {
	content: none;
}

/* 罫線系スタイルは罫線を復活させる */
.post_content h1[class*="is-style-vk-heading-"][class*="bottomborder"],
.post_content h2[class*="is-style-vk-heading-"][class*="bottomborder"],
.post_content h3[class*="is-style-vk-heading-"][class*="bottomborder"],
.post_content h4[class*="is-style-vk-heading-"][class*="bottomborder"] {
	padding: 0.6em 0 0.5em;
	border-bottom: solid 1px currentColor;
}

.post_content h2[class*="is-style-vk-heading-double_black"],
.post_content h3[class*="is-style-vk-heading-double_black"] {
	padding: 0.6em 0 0.5em;
	border-top: double 3px currentColor;
	border-bottom: double 3px currentColor;
}

.post_content h2[class*="is-style-vk-heading-background_fill_lightgray"],
.post_content h3[class*="is-style-vk-heading-background_fill_lightgray"] {
	background-color: #f2f2f2;
	padding: 0.6em 0.7em 0.5em;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. VK Blocks のプライマリカラー
   既定は Bootstrap 由来の #337ab7。サイトカラー（藍）に置き換える。
   -------------------------------------------------------------------------- */
:root {
	--vk-color-primary: var(--cosmebi-ai);
	--wp--preset--color--vk-color-primary: var(--cosmebi-ai);
}

.vk_borderBox,
.wp-block-vk-blocks-border-box {
	border-color: var(--cosmebi-accent);
}

.vk_borderBox_title,
.wp-block-vk-blocks-border-box .vk_borderBox_title_container {
	font-family: var(--cosmebi-font-serif);
}

/* --------------------------------------------------------------------------
   4. コラム記事の見出し（h2 / h3）の色味調整
   ※装飾そのもの（線の付き方）はSWELLカスタマイザー側で管理している。
     カスタマイザー → 投稿・固定ページ → コンテンツのデザイン
       見出し2のデザイン : 上下に線（b_topbottom）
       見出し3のデザイン : ２色の下線（main_thin）
       見出し4のデザイン : 左に縦線（left_line）
       見出しのキーカラー : #33506e
     カスタマイザーで表現できない「文字色を藍寄りの濃色にする」だけをここで補う。
     記事本文側にCSSやstyle属性は一切書かない（店主が編集できる状態を保つため）。
   -------------------------------------------------------------------------- */
.post_content h2,
.post_content h3,
.post_content h4 {
	color: var(--cosmebi-ai-deep);
}
.post_content h2 { letter-spacing: 0.06em; }
.post_content h3 { letter-spacing: 0.05em; }

/* 記事タイトルも同じ濃色に揃える */
.c-postTitle__ttl,
.entry-title {
	color: var(--cosmebi-ai-deep);
}

/* --------------------------------------------------------------------------
   5. コラム記事の末尾に出る「店舗案内・ご予約」導線
   HTMLの中身は SWELLブログパーツ「記事下：店舗案内・ご予約」（slug: column-cta）、
   差し込みは functions.php の the_content フィルター。
   記事本文には一切書かないので、ここを直せば全記事に反映される。
   -------------------------------------------------------------------------- */
.post_content .csb-postcta,
.csb-postcta {
	margin: 56px 0 0;
	padding: 38px 32px 34px;
	border: 1px solid var(--cosmebi-accent);
	border-radius: 2px;
	background: linear-gradient(180deg, #fdfdfd 0%, #f3f7fa 100%);
	text-align: center;
}
.csb-postcta__lead {
	margin: 0 auto;
	max-width: 34em;
	font-size: 0.92rem;
	line-height: 2;
	color: #3a4654;
	text-align: left;
}
.csb-postcta__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 34px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
/* SWELLは .post_content ul li::before で行頭マークを出すため、詳細度を上げて消す */
.post_content .csb-postcta__links,
.csb-postcta__links { list-style: none; }
.post_content .csb-postcta__links li,
.csb-postcta__links li { margin: 0; padding-left: 0; list-style: none; }
.post_content .csb-postcta__links li::before,
.post_content .csb-postcta__links li::marker,
.csb-postcta__links li::before { content: none; display: none; }
.csb-postcta__links a {
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	color: var(--cosmebi-ai);
	text-decoration: none;
	border-bottom: 1px solid var(--cosmebi-accent);
	transition: border-color 0.25s, color 0.25s;
}
.csb-postcta__links a:hover {
	border-color: var(--cosmebi-ai);
	color: var(--cosmebi-ai-deep);
}
/* ボタン行は core/buttons ブロック。ブロックを足しても崩れないよう flex 側で受ける */
.csb-postcta .wp-block-buttons,
.csb-postcta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}
.csb-postcta__line .wp-block-button__link,
.csb-postcta__tel .wp-block-button__link,
.csb-postcta__line,
.csb-postcta__tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 30px;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.csb-postcta__line .wp-block-button__link {
	background: #00804a;              /* LINE用の深緑（白文字でWCAG AA確保） */
	color: #ffffff;
	box-shadow: 0 8px 22px rgba(0, 128, 74, 0.18);
}
.csb-postcta__line .wp-block-button__link:hover { background: #069158; color: #ffffff; }
.csb-postcta__tel .wp-block-button__link {
	border: 1px solid var(--cosmebi-ai);
	color: var(--cosmebi-ai);
	background: rgba(255, 255, 255, 0.7);
}
.csb-postcta__tel .wp-block-button__link:hover { background: var(--cosmebi-ai); color: #ffffff; }
.csb-postcta__note {
	margin: 22px auto 0;
	max-width: 36em;
	font-size: 0.78rem;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: #7c8797;
}

@media (max-width: 600px) {
	.post_content .csb-postcta,
	.csb-postcta { padding: 28px 20px 26px; }
	.csb-postcta__actions { flex-direction: column; }
	.csb-postcta__line,
	.csb-postcta__tel,
	.csb-postcta__line .wp-block-button__link,
	.csb-postcta__tel .wp-block-button__link { width: 100%; }
}