/* ==========================================================================
   LINE公式アカウント導線（https://lin.ee/r5rspv5）
   - common.css は非改変。全ページで izumo-common の「後」に読み込む（inc/enqueue.php）。
   - 既存の WEB予約ボタン（.p-btn-reserve）と同じ寸法・同じホバー演出に揃え、
     並べたときに「兄弟ボタン」に見えるようにしている。
   - 地色 #06C755 は LINE の公式グリーン。支給アイコン LINE_Brand_icon.png の
     角丸スクエアと同一値のため、アイコンは地色に溶けて白い吹き出しだけが見える
     ＝ LINE公式の「友だち追加」ボタンと同じ見え方になる（ロゴは無改変で使用）。
   ========================================================================== */

.p-button.p-btn-line {
	position: relative;
	display: grid;
	grid-template-columns: -webkit-max-content 1fr;
	grid-template-columns: max-content 1fr;
	grid-template-areas: "icon label";
	align-items: center;
	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
	padding: 16px;
	padding-left: 20px;
	max-width: 100%;
	overflow: hidden;
	font-family: "Zen Old Mincho", sans-serif;
	font-weight: normal;
	font-size: 1.25rem;
	/* line-height は指定しない。.p-btn-reserve と同じ継承値（20px文字で42px）を受け、
	   padding 16px と合わせて高さ74px＝隣の予約ボタンと同寸になる。
	   ここで 1.4 などを指定すると高さが60pxになり、並べたときに段差が出る。 */
	text-align: center;
	border-radius: 10px;
	background-color: #06C755;
	/* 既定幅は .p-btn-reserve.p-secondary と同値（20.8333vw）。並置時に段差が出ない */
	width: 20.8333333333vw;
}

.p-button.p-btn-line:link,
.p-button.p-btn-line:visited,
.p-button.p-btn-line:hover,
.p-button.p-btn-line:active {
	color: #FFFFFF;
}

.p-button.p-btn-line.u-center-icon {
	grid-template-columns: -webkit-max-content -webkit-max-content;
	grid-template-columns: max-content max-content;
	justify-content: center;
}

.p-button.p-btn-line::after {
	grid-area: icon;
	content: "";
	width: 26px;
	height: 26px;
	display: inline-block;
	background-image: url("../img/ico_line.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* ホバー時に下地を塗り替える演出（.p-btn-reserve::before と同じ手法・同じイージング）。
   .p-button{z-index:1} が作る重ね合わせ文脈の中で z-index:-1 は
   「要素自身の背景の上・テキストの下」に描画されるため、緑が濃緑に変わって見える。 */
.p-button.p-btn-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: #05A948;
	transition: -webkit-transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: top;
	transform-origin: top;
}

.p-button.p-btn-line:hover::before {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

/* 明るい面にベタ塗りの緑を置きたくない箇所用（地色を抑えて枠線でLINE色を出す） */
.p-button.p-btn-line.p-btn-line--ghost {
	background-color: #FFFFFF;
	-webkit-box-shadow: inset 0 0 0 2px #06C755;
	box-shadow: inset 0 0 0 2px #06C755;
}

.p-button.p-btn-line.p-btn-line--ghost:link,
.p-button.p-btn-line.p-btn-line--ghost:visited {
	color: #067D3A; /* 白地でのコントラスト比を確保するため公式グリーンより暗い同系色 */
}

.p-button.p-btn-line.p-btn-line--ghost:hover:link,
.p-button.p-btn-line.p-btn-line--ghost:hover:visited {
	color: #FFFFFF;
}

.p-button.p-btn-line.p-btn-line--ghost::before {
	background-color: #06C755;
}

.p-button.p-btn-line small {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   設置箇所ごとの微調整（WEB予約ボタンの直下に置いたときの間隔・幅）
   -------------------------------------------------------------------------- */

/* ヘッダー引き出しの右パネル（.p-header_nav-secondary / 地色 #45667D）。
   幅は基底の 20.8333vw のまま＝隣の .p-btn-reserve.p-secondary と同値。
   ここで width:100% にすると親のパディング差で1pxずれるため指定しない
   （≤1279px では下のMQが両方とも全幅に切り替える）。 */
.l-header .p-header_nav-reserve .p-btn-line {
	margin-top: 12px;
}

/* TOP「当院のご案内」の予約ブロック。
   .p-reserve 自身は common.css で display:flex の“横1列”。子を［ボタン群］［注意書き］の
   2つに保つため、2本のボタンはこの .p-reserve-actions にまとめて縦に積む
   （直接3つ目の子にすると flex-shrink でWEB予約ボタンが潰れる）。
   ボタン幅は common.css の `.p-reserve .p-button { width:338px }` にそのまま従わせる。 */
.p-home-clinicguide-content .p-reserve .p-reserve-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}

/* フッター下部の2カラム導線（li は縦積み）。
   ≥1280px のみ 300px に揃える。それ未満は common.css が .p-btn-reserve を
   全幅・vw文字サイズに切り替えるため、こちらも同じ挙動にする（下のMQで100%へ戻す）。 */
.l-footer .p-footer-secondary-navigation .p-btn-line {
	width: 100%;
	max-width: 300px;
	margin-top: 12px;
}

/* 記事下・事例下・404 のCTA行。
   ⚠ ここに置く .p-btn-reserve は common.css で width:23.47vw（＋overflow:hidden）のため、
     flexアイテムとして縮むと文字が切れる。flex-shrink:0 で縮ませず、
     2本のボタンを同じ幅に揃えて「対のボタン」に見せる。 */
.c-case-cta > a,
.izumo-404-cta > a {
	flex: 0 0 auto;
}

.c-case-cta .p-button.p-btn-reserve,
.c-case-cta .p-button.p-btn-line,
.izumo-404-cta .p-button.p-btn-reserve,
.izumo-404-cta .p-button.p-btn-line {
	width: 300px;
	max-width: 100%;
}


/* 404（予約＋LINEを横並びで中央に。狭い画面では自然に縦積みになる） */
.izumo-404-cta {
	margin: 24px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 16px;
}

/* common.css は max-width:1279px で .p-btn-reserve を「全幅＋vw文字サイズ」に切り替える
   （スマホ想定の指定がタブレット幅まで及ぶ既存仕様）。LINEボタンも同じ挙動に合わせ、
   幅を固定値でキャップしない。キャップすると文字量が箱を超えて overflow:hidden で
   切れる（実測: 1024px幅のフッターで 365px の中身が 300px の箱に入らず欠けた）。 */
@media screen and (max-width: 1279px) {
	.p-button.p-btn-line {
		width: 100%;
		font-size: 5.3333333333vw;
	}

	.p-button.p-btn-line::after {
		width: 6.4vw;
		height: 6.4vw;
	}

	.l-footer .p-footer-secondary-navigation .p-btn-line {
		max-width: 100%;
	}

	/* TOP「当院のご案内」: この幅では common.css が .p-reserve を縦積みにし、
	   WEB予約ボタンを width:100% に切り替える。LINEボタンには
	   `.p-reserve .p-button { width:338px }`（線2308・MQ外）が効いたままなので、
	   固定338pxの箱に vw で拡大した文字が入らず切れる（実測 1100px幅で 398px 必要）。
	   セレクタを1段深くして（0,4,0）で上書きし、隣の予約ボタンと同じ全幅に揃える。 */
	.p-home-clinicguide-content .p-reserve .p-reserve-actions {
		width: 100%;
	}

	.p-home-clinicguide-content .p-reserve .p-reserve-actions .p-btn-line {
		width: 100%;
	}

	/* CTA行は縦積みに切り替える（2本とも全幅＝現行サイトのタブレット/スマホの見え方に合わせる） */
	.c-case-cta,
	.izumo-404-cta {
		flex-direction: column;
		align-items: center;
	}

	.c-case-cta .p-button.p-btn-reserve,
	.c-case-cta .p-button.p-btn-line,
	.izumo-404-cta .p-button.p-btn-reserve,
	.izumo-404-cta .p-button.p-btn-line {
		width: 100%;
		max-width: 100%;
	}

	.c-case-cta > a,
	.izumo-404-cta > a {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-button.p-btn-line::before {
		transition: none;
	}
}