/* ===== @font-face でローカルフォントを優先 ===== */
/* ===== 変数 ===== */
/* ===== 基本 ===== */
/* ===== ヘッダー（固定） ===== */
/* ===== レイアウト ===== */
/* ===== 部品 ===== */
/*		灰：393A3A			青：4479C5			緑：05A9C5  5,169,197			*/

/* ===== 変数 ====================================================================== */
:root{
	--gap: 1rem; /* 隙間サイズ 10px */
	--header-h: 100px;
	--drawer-w: 280px;
	--c-bg: rgba(255,255,255,1);	/*ヘッダ・ドローワー背景*/
	--c-text: #393A3A;
	--c-accent: #4479C5;
}

/* ===== 基本 ====================================================================== */
*{ box-sizing: border-box; }

html {
	font-size: 62.5%; /* font-sizeは16pxの62.5%の10px */
	scroll-padding-top: calc(var(--header-h) + var(--gap));
	scroll-behavior: smooth; /* スムーススクロール */
}

body {
	font-family: "Noto Serif JP", serif;
	font-size: 1.6rem;  /*DefaultSize 16px同等*/
	color: var(--c-text);
}

/* ===== ヘッダー（固定） ============================================================ */
.site-header{
	position: fixed; inset: 0 0 auto 0; /* top:0; left:0; right:0; */
	height: var(--header-h);
	background: var(--c-bg);
	z-index: 1000;
	display: flex; align-items: center; justify-content: center;
}

/* ロゴ：中央、ボタン：右　相対配置 */
.site-header__inner{
	position: relative; width: 100%; max-width: 1280px; height: 100%;
	display: flex; align-items: center; justify-content: center; padding: 0 16px;
}
.site-logo{ font-size: 20px; font-weight: 700; letter-spacing: .04em; }

/* ハンバーガー */
.hamburger{
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
}
.hamburger:focus-visible{ outline: 4px solid var(--c-accent); outline-offset: 4px; }
.hamburger__bars, .hamburger__bars::before, .hamburger__bars::after{
	content:""; display:block; width: 36px; height: 4px; background:#4479C5; margin: 0 auto;
	transition: transform .25s ease, opacity .2s ease;
}
.hamburger__bars{ position: relative; }
.hamburger__bars::before{ position: absolute; top: -12px; left: 0; }
.hamburger__bars::after{ position: absolute; top: 12px; left: 0; }

/* 開いた時の「×」アニメ */
.drawer-open .hamburger__bars{ transform: rotate(45deg); }
.drawer-open .hamburger__bars::before{ transform: rotate(90deg) translateX(0); top: 0; }
.drawer-open .hamburger__bars::after{ opacity: 0; }

/* ドロワーメニュー（右→左へスライドイン） */
.drawer{
	position: fixed; top: var(--header-h); right: 0; height: calc(100dvh - var(--header-h)); width: var(--drawer-w); background: var(--c-bg);
	transform: translateX(100%); transition: transform .3s ease; z-index: 999; padding: 1rem;
	display: flex; flex-direction: column; gap: 1rem; font-size: 1.8rem;
}
.drawer a{ color: #4479C5; text-decoration: none; padding: 1.6rem; display: block; font-weight:700; }
.drawer a:hover{ color: #4479C5; text-shadow: 0 0 1rem rgba(255,255,0,1); }
.drawer-open .drawer{ transform: translateX(0); }

/* 背景オーバーレイ（For UX向上） */
.overlay{
	position: fixed; inset: 0; background: rgba(0,0,0,.7);
	opacity: 0; pointer-events: none; transition: opacity .3s ease;
	z-index: 998;
}
.drawer-open .overlay{ opacity: 1; pointer-events: auto; }

	/* 固定ヘッダーの分だけ上に余白 */
	.wrapper{ width: 100%; }
	main{ padding-top: var(--header-h); } /* 固定ヘッダー余白を確保 */

/* ===== レイアウト ======================================================= */
section { padding:0 0 200px; }
section.first { padding:0 0 100px; }
footer { padding:0 0 100px; }

.contentY,.contentY1024,.contentY310 {
	display: flex; flex-wrap: wrap; gap: var(--gap);
	width: 100%; margin: 0 auto; padding: var(--gap);
	 align-items: stretch; /* 高さ揃え*/ }	/*justify-content: center;  横中央 */
.contentY { max-width: 1280px; }
.contentY1024{ max-width: 1024px; }	/*1260*80% */
.contentY310{ max-width: 310px; padding: 0; gap:0; }	/* forお問い合せ */
.contentY.center,.contentY1024.center { justify-content: center; }	/* 中央揃え */
.contentY.left,.contentY1024.left { justify-content: flex-start; }	/* 左寄せ */
.contentY.right,.contentY1024.right { justify-content: flex-end; }	/* 右寄せ */


.content1 {	/*1列 */
	flex: 1 1 100%; max-width: 1024px; padding: 1.5rem; border-radius: 2rem;
	display: flex; flex-direction: column; justify-content: center; }	/* Flex コンテナ化 > 縦に並べる > 縦中央揃え*/

.content2 {	/*2列 */
	padding: 1.5rem; border-radius: 2rem;
	display: flex; flex-direction: column; justify-content: center; }	/* Flex コンテナ化 > 縦に並べる > 縦中央揃え*/

.cols-2 .content2 { flex: 1 1 calc((100% - var(--gap)) / 2); } /* 50%-50% */
.main.cols-2 .content2 { flex: 1 1 calc((100% - var(--gap)) / 2); } /* 50%-50% */
.cols-20-80 .content2:nth-child(odd) { flex: 0 0 10%; }
.cols-20-80 .content2:nth-child(even) { flex: 0 0 calc(90% - var(--gap)); }	/* for トータルヘルスの概要 */
.cols-80-20 .content2:nth-child(odd) { flex: 0 0 calc(90% - var(--gap)); }
.cols-80-20 .content2:nth-child(even) { flex: 0 0 10%; }
.cols-70-30 .content2:nth-child(1) { flex: 0 0 calc(70% - var(--gap)); }	/* for 医師紹介 */
.cols-70-30 .content2:nth-child(2) { flex: 0 0 30%; }
.content2.top { justify-content: flex-start; } /* 上揃 */
.content2.accicon { padding: 1.5rem 1rem 1.5rem 0; } /* for access */
.content2.acc { padding: 1.5rem 0; }

/* SP：縦1列＋上下gap */
@media (max-width: 480px) {
		section.first { padding: 0 0 50px; }
		.contentY,.contentY1024{ flex-direction: column; gap: var(--gap); align-items: stretch; justify-content: flex-start;/* SPは左寄せ */ }
		.contentY1024.reverse-sp .content2:nth-child(1) { order: 2; }	/* 左 → 下 */
		.contentY1024.reverse-sp .content2:nth-child(2) { order: 1; }	/* 右 → 上 */
		.contentY1024.gapSPNone { gap: 0; }	/*隙間なし*/

		.content1 { flex: 1 1 100%; }
		.cols-2 .content2,.cols-70-30 .content2 { flex: 1 1 100%; }
		.cols-20-80,.cols-80-20 { flex-direction: row; flex-wrap: wrap; }
		.cols-20-80 .content2:nth-child(odd),.cols-80-20 .content2:nth-child(even) { flex: 0 0 10%; padding: 1.5rem 1rem; }
		.cols-20-80 .content2:nth-child(even),.cols-80-20 .content2:nth-child(odd) { flex: 1 1 calc(70% - var(--gap)); }
		.cols-70-30 .content2:nth-child(2) { padding: 0 1.5rem; align-items: center; }	/*横中央 padding上下0*/
}
@media (max-width: 768px){
		.contentY.gapSPNone { gap: 0; }	/*隙間なし*/
		.main.cols-2 .content2 { flex: 1 1 100%; padding: 0 1.5rem; }
}


/* ===== 部品 ============================================================ */
.graL {background: linear-gradient(to right, rgba(68,121,197,.3), rgba(255,255,255,0)); margin:0 0 50px; }
.graR {background: linear-gradient(to left, rgba(68,121,197,.3), rgba(255,255,255,0)); margin:0 0 50px; }
h2 { width:100%; max-width: calc(1024px - var(--gap)); margin: 0 auto; padding: 1rem 0.5rem; }
/* 英語併記*/
h2::after { content: attr(data-title); display: block;  font-size: 1.2rem; margin:0 0.4rem 0.4rem; letter-spacing:0.1rem; }
a {color:blue;}
a:hover{ color: #ffff00; text-shadow: 0 0 8px #393A3A; }
/*1  中間値(vw) = (最大フォントサイズ ÷ 基準画面幅) × 100 今回の中間は最大の64% 1:最小 = 最大 × 0.64 2:中間vw = 4vw × (最大 / 5.0)  */
.fz96 { font-size: clamp(6.2rem, 8vw, 9.6rem); }
.fz50 { font-size: clamp(3.6rem, 4vw, 5.0rem); }
.fz38 { font-size: clamp(2.8rem, 3vw, 3.8rem); }
.fz32 { font-size: clamp(2.4rem, 2.5vw, 3.2rem); }
.fz24 { font-size: clamp(2.0rem, 2vw, 2.4rem);  }
.fz20 { font-size: clamp(1.6rem, 1.8vw, 2.0rem); }
.fz12{ font-size: 1.2rem; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.textBlue { color: #4479C5; }
.fa-solid { margin: 0 5px; }	/*fontawsome左右5px*/
.fBold{ font-weight:900; }
.fSemiBold{ font-weight:600; }
.lh2 { line-height: 2; }
.logoH { height: 80px; }
.logoF { height: 64px; }
.pB30 { padding-bottom: 30px; }
.pB50 { padding-bottom: 50px; }
.pR10{ padding-right: 10px; }
.pL32{ padding-left: 32px; }
img.sono { object-fit: contain; } /*画像そのままのサイズ*/
img.main { object-fit: contain; width: 100%; height: auto; display: block; border-radius: 40px 0 40px 0; } /*mainのみwidth100%*/
.pcNone { display: none; }

/* 下固定BTN */
.floating-btn {
	position: fixed; bottom: 20px; background: #4479C5; color: #fff; text-decoration: none; z-index: 9999;
	padding: 16px; transition: all 0.3s ease; border-radius: 2.0rem; 
	display: inline-flex; /* インライン要素として振る舞いつつflex */	align-items: center; /* 縦中央 */
}
.floating-btn:hover { opacity: 1; transform: translateY(-3px); background: #4479C5; }
.floating-btn.left { left: 20px; box-shadow: 0 0 1rem rgba(255,255,0,1); }
.floating-btn.right { right: 20px; }


@media (max-width: 480px) {
		.floating-btn.left { left: 10px; }
		.floating-btn.right { right: 10px; }
		.logoH { height: 64px; }	/*80px x 80%*/
		.logoF { height: 50px; }
		.spNone { display: none!important; }
		.tabNone { display: block!important; }
		.pcNone { display: block!important; }
		img.sono { width:360px;}
}

@media (max-width: 768px) {
	 img.main { width: auto; height: 100%; object-fit: cover; }
	.tabNone { display: none!important; }
}