@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ==========================================================
 * 全ページ最下部：院のご案内ブロック
 * 貼り付け先：Cocoon Child の style.css の一番最後（@media の } の外側）
 * PC（1024px以上）＝［院情報｜地図｜予約］3列
 * タブレット（768〜1023px）＝左に院情報＋予約、右に地図
 * スマホ（767px以下）＝院情報 → 地図 → 予約 の縦並び
 * ========================================================== */
.kmrb-info {
	--kmrb-bg: #FAF7F0;
	--kmrb-text: #3A3530;
	--kmrb-text-muted: #6B6459;
	--kmrb-border: #E5DFD3;
	--kmrb-primary: #4A6741;
	--kmrb-cta: #D9714B;
	--kmrb-cta-hover: #C05E3A;
	--kmrb-btn: #8A1C12;           /* 予約ボタン（えんじ） */
	--kmrb-btn-top: #A3291C;
	--kmrb-btn-hover: #6F150D;
	--kmrb-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;

	background: var(--kmrb-bg);
	color: var(--kmrb-text);
	padding: 40px 16px;
	border-top: 1px solid var(--kmrb-border);
}
.kmrb-info *,
.kmrb-info *::before,
.kmrb-info *::after { box-sizing: border-box; }
.kmrb-info p { margin: 0; }

/* ---- レイアウト ---- */
.kmrb-info__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"about"
		"map"
		"contact";
}
.kmrb-info__about   { grid-area: about; min-width: 0; }
.kmrb-info__map     { grid-area: map; }
.kmrb-info__contact { grid-area: contact; min-width: 0; }

/* ---- 院情報（明朝） ---- */
.kmrb-info__about {
	font-family: var(--kmrb-serif);
	line-height: 1.6;
}
.kmrb-info__eyebrow { font-size: 16px; letter-spacing: .04em; }
.kmrb-info__name {
	margin-top: 2px !important;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.3;
	color: var(--kmrb-text);
}
.kmrb-info__addr   { margin-top: 18px !important; font-size: 16px; }
.kmrb-info__access { margin-top: 4px !important; font-size: 16px; }

/* ---- 地図 ---- */
.kmrb-info__map {
	max-width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--kmrb-border);
	overflow: hidden;
}
.kmrb-info__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- 電話ボックス ---- */
.kmrb-info__tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 16px;
	background: linear-gradient(#FFFDF8, #F3EFE6);
	border: 2px solid var(--kmrb-border);
	border-radius: 8px;
	text-decoration: none !important;
	transition: border-color .2s ease;
}
.kmrb-info__tel:hover { border-color: var(--kmrb-primary); }
.kmrb-info__tel-lead {
	color: var(--kmrb-text-muted);
	font-size: 15px;
	letter-spacing: .06em;
	line-height: 1.5;
}
.kmrb-info__tel-num {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--kmrb-cta-hover);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.kmrb-info__tel-icon { width: 26px; height: 26px; fill: var(--kmrb-primary); flex: none; }

/* ---- 受付時間 ---- */
.kmrb-info__hours {
	margin: 18px 0 20px;
	font-size: 17px;
	line-height: 1.7;
}
.kmrb-info__hours div { display: flex; flex-wrap: wrap; }
.kmrb-info__hours dt { font-weight: 400; margin: 0; }
.kmrb-info__hours dt::after { content: "："; }
.kmrb-info__hours dd { margin: 0; }

/* ---- ボタン ---- */
.kmrb-info__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 8px 52px;
	border-radius: 6px;
	color: #FFFFFF !important;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(58, 53, 48, .18);
	transition: background .2s ease, transform .1s ease;
}
.kmrb-info__btn + .kmrb-info__btn { margin-top: 10px; }
.kmrb-info__btn:hover { transform: translateY(-1px); color: #FFFFFF !important; }
.kmrb-info__btn {
	width: 100%;
	background: linear-gradient(var(--kmrb-btn-top), var(--kmrb-btn) 55%);
	border: 1px solid var(--kmrb-btn-hover);
}
.kmrb-info__btn:hover { background: var(--kmrb-btn-hover); }

/* LINEボタンのアイコン（吹き出し） */
.kmrb-info__btn-icon {
	width: 26px;
	height: 26px;
	margin-right: 10px;
	flex: none;
	fill: #FFFFFF;
}

/* 右端の丸矢印 */
.kmrb-info__arrow {
	position: absolute;
	right: 18px;
	top: 50%;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	border-radius: 50%;
	background: #FFFFFF;
}
.kmrb-info__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -4px 0 0 -5px;
	border-top: 2px solid var(--kmrb-text);
	border-right: 2px solid var(--kmrb-text);
	transform: rotate(45deg);
}

/* ---- タブレット：左に院情報＋予約／右に地図 ---- */
@media (min-width: 768px) {
	.kmrb-info { padding: 48px 24px; }
	.kmrb-info__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 36px;
		grid-template-areas:
			"about   map"
			"contact map";
		align-items: start;
	}
	.kmrb-info__map { aspect-ratio: auto; height: 100%; min-height: 360px; }
}

/* ---- PC：［院情報｜地図｜予約］3列 ---- */
@media (min-width: 1024px) {
	.kmrb-info__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .95fr);
		column-gap: 32px;
		grid-template-areas: "about map contact";
		align-items: stretch;
	}
	.kmrb-info__name { font-size: 36px; }
	.kmrb-info__map { min-height: 300px; }
	.kmrb-info__contact { align-self: start; }
}