@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
*/

/* ==========================================================
   SELECT｜デザイントークン
   最終更新 2026-09-07
   このファイルは style.css の「全文」です。
   テーマファイルエディターで全選択して置き換えてください。
   ========================================================== */


/* ----------------------------------------------------------
   1. カラーとフォント
   ---------------------------------------------------------- */
:root {
	--sel-ink:       #2B2622; /* 墨茶  ヘッダー・フッター・本文 */
	--sel-wood:      #8E7259; /* 胡桃  セクション背景 */
	--sel-vermilion: #A8503F; /* 錆朱  CTA・アクセント */
	--sel-paper:     #F7F3EC; /* 生成り 背景 */

	--sel-serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
	             "Noto Serif JP", "MS PMincho", serif;
}


/* ----------------------------------------------------------
   2. 見出しの書体
   本文はSWELL標準のゴシックのまま。長文の可読性を優先。
   ---------------------------------------------------------- */
h1, h2, h3,
.c-pageTitle,
.p-mainVisual__title {
	font-family: var(--sel-serif);
	font-weight: 500;
	letter-spacing: 0.1em;
	font-feature-settings: "palt";
}

.post_content {
	line-height: 1.9;
	letter-spacing: 0.02em;
}


/* ----------------------------------------------------------
   3. セクション見出し
   SWELLの帯デザインを打ち消して、大きな明朝の中央揃えにする。
   ★color: inherit が重要。SWELLの帯見出しは白文字なので、
     背景だけ消すと白背景に白文字になって消える。
   ---------------------------------------------------------- */
.post_content h2 {
	font-size: clamp(24px, 4vw, 38px);
	line-height: 1.6;
	letter-spacing: 0.18em;
	text-align: center;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 1.4em;
}
.post_content h2::before,
.post_content h2::after {
	content: none;
	display: none;
}

/* スマホは字間を詰める（広いまま折り返すと読みにくいため） */
@media (max-width: 781px) {
	.post_content h2 { letter-spacing: 0.08em; }
	.post_content h3 { letter-spacing: 0.04em; }
}

.post_content h3 {
	font-size: clamp(18px, 2.4vw, 22px);
	letter-spacing: 0.1em;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 0.8em;
}
.post_content h3::before,
.post_content h3::after {
	content: none;
	display: none;
}


/* ----------------------------------------------------------
   4. セクション背景の帯
   グループブロックの「高度な設定 → 追加CSSクラス」に
   is-band-ink / is-band-paper / is-band-wood を入れて使う。
   ---------------------------------------------------------- */
.is-band-ink {
	background-color: var(--sel-ink);
	color: #fff;
}
.is-band-wood {
	background-color: var(--sel-wood);
	color: #fff;
}
.is-band-paper {
	background-color: var(--sel-paper);
}

/* 濃い帯の中のテキストリンク（ボタンは別ルールで上書きされる） */
.is-band-ink a:not(.wp-block-button__link),
.is-band-wood a:not(.wp-block-button__link) {
	color: #fff;
}

/* 読み物の段落は幅を絞る。カラム内の段落は対象外 */
.post_content .wp-block-group > p {
	max-width: 760px;
	margin-inline: auto;
}


/* ----------------------------------------------------------
   5. 装飾ラベル（「大切にしている3つのこと」の 1 2 3 など）
   ---------------------------------------------------------- */
.is-en-label {
	font-family: var(--sel-serif);
	font-size: clamp(28px, 6vw, 44px);
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-align: center;
	color: var(--sel-wood);
	margin-bottom: 0.2em;
}
/* 濃い帯の中では胡桃色が沈むため明るくする */
.is-band-wood .is-en-label,
.is-band-ink .is-en-label {
	color: rgba(255, 255, 255, 0.7);
}


/* ----------------------------------------------------------
   6. 二重枠ボタン
   ボタンブロックの追加CSSクラスに is-btn-select
   ---------------------------------------------------------- */
.is-btn-select .wp-block-button__link,
a.is-btn-select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 260px;
	padding: 1.1em 3em;
	background: #fff;
	color: var(--sel-ink);
	font-family: var(--sel-serif);
	font-weight: 500;
	letter-spacing: 0.12em;
	border: 1px solid var(--sel-vermilion);
	border-radius: 2px;
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--sel-vermilion);
	transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.is-btn-select .wp-block-button__link:hover,
a.is-btn-select:hover {
	background: var(--sel-vermilion);
	color: #fff;
	box-shadow: inset 0 0 0 4px var(--sel-vermilion),
	            inset 0 0 0 5px #fff;
}


/* ----------------------------------------------------------
   7. 症状から探す
   ---------------------------------------------------------- */
.is-symptom-link {
	margin: 0;
}
.is-symptom-link a {
	display: block;
	padding: 1.1em 0.5em;
	border-bottom: 1px solid rgba(43, 38, 34, 0.15);
	color: inherit;
	text-decoration: none;
	letter-spacing: 0.08em;
	transition: opacity 0.2s;
}
.is-symptom-link a:hover {
	opacity: 0.55;
}

/* スマホでは1列に落とさず2列にする（縦に伸びすぎるため） */
@media (max-width: 781px) {
	.is-symptom-grid.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 0 1rem;
	}
	.is-symptom-grid .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
		flex-grow: 0;
	}
}

/* 「すべて見る」リンク */
.is-more-link {
	margin-top: 2.5em;
}
.is-more-link a {
	color: inherit;
	text-decoration: none;
	letter-spacing: 0.08em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.2em;
}
.is-more-link a:hover {
	opacity: 0.6;
}


/* ----------------------------------------------------------
   7.5 予約ブロックの囲み枠
   ---------------------------------------------------------- */
.is-cta-box {
	max-width: 720px;
	margin-inline: auto;
	border: 1px solid rgba(255, 255, 255, 0.45);
	padding: 3em 1.5em;
}
.is-cta-box h2 {
	margin-bottom: 0.6em;
}
.is-cta-box p {
	margin-bottom: 2em;
}


/* ----------------------------------------------------------
   8. メニューカード
   ---------------------------------------------------------- */
.is-menu-card figure.wp-block-image {
	margin: 0 0 1.2em;
}
.is-menu-card figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}


/* ----------------------------------------------------------
   9. アコーディオン（WordPress標準の「詳細」ブロック）
   ---------------------------------------------------------- */
.wp-block-details {
	max-width: 760px;
	margin-inline: auto;
	border-bottom: 1px solid rgba(43, 38, 34, 0.15);
}
.wp-block-details summary {
	font-family: var(--sel-serif);
	font-size: clamp(16px, 2.2vw, 19px);
	letter-spacing: 0.08em;
	padding: 1.1em 0;
	cursor: pointer;
}
.wp-block-details > *:not(summary) {
	padding-bottom: 1.2em;
}


/* ----------------------------------------------------------
   10. お知らせ一覧
   ---------------------------------------------------------- */
.wp-block-latest-posts {
	max-width: 720px;
	margin-inline: auto;
	list-style: none;
	padding-left: 0;
}
.wp-block-latest-posts li {
	padding: 1em 0;
	border-bottom: 1px solid rgba(43, 38, 34, 0.15);
}
.wp-block-latest-posts a {
	color: inherit;
	text-decoration: none;
}
.wp-block-latest-posts a:hover {
	opacity: 0.6;
}
.wp-block-latest-posts__post-date {
	display: block;
	font-size: 13px;
	opacity: 0.6;
	margin-bottom: 0.3em;
}


/* ----------------------------------------------------------
   11. SWELLフルワイドブロックを使う場合の余白
   （トップページはグループブロックで組んでいるため未使用）
   ---------------------------------------------------------- */
.swell-block-fullWide {
	padding-top: clamp(56px, 9vw, 120px);
	padding-bottom: clamp(56px, 9vw, 120px);
}


/* ----------------------------------------------------------
   12. スマホ固定フッターメニュー（電話 / ご予約）
   カスタマイザー側の背景色設定は無視されます。
   ボタンごとに色を分けるため、liに直接背景を当てています。
   ---------------------------------------------------------- */
#fix_bottom_menu {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}
#fix_bottom_menu .menu_list {
	background: transparent !important;
	align-items: stretch;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0;
	border: none !important;
}
#fix_bottom_menu .menu_list > li {
	flex: 1 1 0;
	margin: 0;
	border: none !important;
	background: var(--sel-ink);          /* 1つ目＝電話：墨茶 */
}
#fix_bottom_menu .menu_list > li:nth-child(2) {
	background: var(--sel-vermilion);    /* 2つ目＝ご予約：錆朱 */
}

#fix_bottom_menu .menu_list > li a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	height: 100%;
	padding: 1.05em 0;
	color: #fff !important;
	text-decoration: none;
}

/* SWELLが出力する空のアイコン枠を消す */
#fix_bottom_menu .menu_list > li a i:empty {
	display: none;
}

/* ラベル。flex:1 のままだと余白を全部取ってアイコンが左端に離れる */
#fix_bottom_menu .menu_list > li a span {
	flex: 0 0 auto;
	width: auto;
	font-family: var(--sel-serif);
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1;
}

/* アイコンはSVG。記号文字だとフォント依存でサイズが揃わないため */
#fix_bottom_menu .menu_list > li a::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
#fix_bottom_menu .menu_list > li:nth-child(2) a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6 12 13 2 6'/%3E%3C/svg%3E");
}


/* ----------------------------------------------------------
   13. 症状ページ（テンプレートB）
   ---------------------------------------------------------- */

/* 全幅ブロックの前後に入る余計な余白を詰める */
.post_content > .alignfull {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

/* 記事下の余白 */
.post_content > *:last-child {
	margin-bottom: 0;
}

/* CTA帯の中の電話番号。タップできることを示す */
.is-band-wood .wp-block-buttons + p a[href^="tel:"],
.is-band-ink .wp-block-buttons + p a[href^="tel:"] {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 0.15em;
}
.is-band-wood .wp-block-buttons + p a[href^="tel:"]:hover,
.is-band-ink .wp-block-buttons + p a[href^="tel:"]:hover {
	opacity: 0.7;
}

/* 「関連する症状」の見出しは本文中のH2より控えめに */
.post_content .is-symptom-grid {
	margin-top: 1.5rem;
}
/* 症状ページ：タイトルと本文の間を詰める */
.post_content > *:first-child {
	margin-top: 0;
}
.p-articleThumb + .post_content,
.c-postTitle + .post_content {
	margin-top: 1.5rem;
}
/* 症状ページ：記事本文エリア上部の余白を詰める */
.l-mainContent__inner > .post_content {
	margin-top: 0;
}
.p-articleHead + * {
	margin-top: 1.5rem;
}