@charset "UTF-8";


/*=======================================================*/
/*					セクション毎のCSS					  */
/*======================================================*/

/*============ 共通 =========== */

/* 親要素からはみ出して画面いっぱいに */
.full {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}
@media print {
	.full {
		margin: 0;
		width: 100%;
	}
}
/*パンくず*/
.sec_pankuzu{
	padding: 0 0 15px 0;
	background-color: var(--base-color);
	position: relative;
	z-index: 1;
}


/*======= TOPページ ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(40px, 6vw, 90px) 0 5px 0;
	background-color: #FFF;

	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}
@media print, screen and (min-width: 768px) {
	.greeting {
		background-image: url(../img/bg_01.jpg);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	}
}
@media only screen and (max-width: 767px) {
	.greeting {
		background-image: url(../img/bg_01_sp.jpg);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	}
}

/* Greeting Layout */
.greeting{
	--card-radius: 0px;
	--photo-radius: 0px;
	--gap: 10px;
}
.greeting__inner{
	margin: 0 auto;
	max-width: 1250px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--gap);
	align-items: start;
}
/* 左：白カード（テキスト） */
.greeting__text{
	background: #ffffffd1;
	padding: clamp(18px, 2.2vw, 26px);
	border-radius: var(--card-radius);
	/* box-shadow: 0 10px 18px rgba(0,0,0,.08); */
}
.greeting__title{
	margin: 0 0 2px 0;
	color: var(--accent-color3);
	font-size: clamp(21px, 2.3vw, 27px);
	line-height: 1.45;
	letter-spacing: .06em;
	font-family: serif;
	font-weight: 600;
}
.greeting hgroup p {
	margin: 0 0 17px 0;
	color: var(--main-color);
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.6;
	letter-spacing: .08em;
}
.greeting__text p{
	margin: 0;
	color: #111;
	font-size: 15px;
	line-height: 1.9;
}
/* 右：2枚の縦長画像を「別々の列」に配置 */
.greeting__media{
	display: contents; /* ←親の3カラム(2fr/1fr/1fr)をそのまま使う */
}
/* 画像共通 */
.greeting__photo{
	margin: 0;
	height: clamp(320px, 42vw, 520px);  /* 縦長の気持ち良さ */
	background: rgba(0,0,0,.06);        /* 読み込み前の下地 */
	overflow: hidden;
	border-radius: var(--photo-radius);
	/* box-shadow: 0 10px 18px rgba(0,0,0,.10); */
}
.greeting__photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* 空や余白を上に見せたい時にも効く */
	display: block;
	outline: 10px solid #ffffff69;
	outline-offset: -10px;
}
/* 右の“段差”を作る：見本っぽく、右端の方を上に/下にずらす */
.greeting__photo.is-a{
	grid-column: 2;             /* 真ん中の1fr */
	margin-top: 5vw;           /* 少し下げる（見本の中段っぽさ） */
}

.greeting__photo.is-b{
	grid-column: 3;             /* 右の1fr */
	margin-top: 0;              /* こちらは上め */
}
/* PC時：テキスト位置を下げる */
@media print, screen and (min-width: 768px) { 
	.greeting__text{
		margin-top: 10vw; /* ← 画像に合わせて調整（40$301C80pxで微調整） */
	}
}
/* ====== SP：縦積み ====== */
@media only screen and (max-width: 767px) {
	.greeting__inner {
		grid-template-columns: 1fr;
	}
	.greeting__media {
		order: 1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap);
	}
	.greeting__text {
		order: 2;	/* 文章を後 */
	}
	.greeting__photo.is-a,
	.greeting__photo.is-b {
		grid-column: auto;
		/* margin-top: 0; */
		height: 320px;
	}
	.greeting__text p{
		text-align: justify;
	}
	.greeting__photo.is-a{
		margin-top: 0vw;
	}
}



/* お知らせ欄 */
.news-section {
	background: rgba(255, 255, 255, 0.7);
	padding: 20px 30px;
	border: 3px double var(--accent-color1);
	border-radius: 8px;
	margin: 30px 0;
}
/**/
@media screen and (max-width: 567px) {
	.news-section {
		padding: 20px 20px;
	}
}
.news-heading {
	display: flex;
	align-items: center; /* 縦方向の中央揃え */
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 400;
	line-height: 1.3;
	margin: 10px 0;
	padding: 3px 2px 5px 47px;
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
	background: url(../img/icon02.png) no-repeat 3px center;
	background-size: 40px;
	min-height: 40px;
	color: var(--main-color);
	background-color: #dbd0ba38;
}
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.news-item {
	padding: 10px 0;
	border-bottom: 1px dashed #ccc;
}
.news-item > .new-icon {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #b02f2f;
	background-color: #f9dc6b4f;
	padding: 2px 5px;
	margin-right: 12px;
	border-radius: 3px;
	width: 60px;
	text-align: center;
	vertical-align: middle;
}
.news-date {
	font-weight: 600;
	color: var(--accent-color2);
	margin-right: 15px;
	display: inline-block;
	min-width: 90px;
}
.news-title {
	display: inline-block;
	font-weight: 600;
}
.news-body {
	margin-top: 5px;
	color: #333;
}
/* モバイル対応 */
@media screen and (max-width: 767px) {
	.news-date,
	.news-title {
		display: block;
		/*margin-bottom: 4px;*/
	}
}
/*印刷時の為*/
@media print{
	.news-date {
		font-weight: 600;
		color: var(--accent-color2);
		margin-right: 15px;
		display: inline-block;
		min-width: 90px;
	}
	.news-title {
		display: inline-block;
		font-weight: 600;
	}
}




/*当院の5つの特徴*/
.top_sec1 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
.top_sec1__head {
	text-align: center;
	margin-bottom: 32px;
}
.top_sec1__en {
	font-size: 12px;
	letter-spacing: 0.22em;
	font-weight: 700;
	color: var(--main-color);
	margin: 0 0 10px;
}
.top_sec1__ttl {
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.3;
	margin: 0;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}
.top_sec1__ttl::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: #d9e6f2;
	border-radius: 999px;
	margin: 12px auto 0;
}

/* feature（POINT01） */
.top_sec1__feature {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	grid-template-areas: "img body";
	gap: 24px;
	align-items: center;
	background: #fff;
	border: 1px solid #eaf0f6;
	border-radius: 28px;
	padding: 24px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
	margin-bottom: 28px;
}
.top_sec1__feature-img {
	grid-area: img;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}
.top_sec1__feature-img img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.top_sec1__feature-body {
	grid-area: body;
}
.top_sec1__point {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: #95735e;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	padding: 6px 12px;
	border-radius: 10px;
	margin: 0 0 12px;
}
.top_sec1__feature-ttl {
	font-size: clamp(18px, 2.1vw, 28px);
	line-height: 1.25;
	margin: 0 0 12px;
	color: #0f172a;
	position: relative;
	padding-left: 14px;
}
.top_sec1__feature-ttl::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0em;
	width: 8px;
	height: 1.2em;
	background: #d9e6f2;
	border-radius: 3px;
}
.top_sec1__feature-txt {
	margin: 0 0 18px;
	color: #475569;
	line-height: 1.9;
	font-size: 15px;
}

/* cards */
.top_sec1__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.top_sec1__card {
	background: #fff;
	border: 1px solid #eaf0f6;
	border-radius: 22px;
	padding: 22px 20px;
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}
.top_sec1__card-point {
	font-size: 12px;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: #95735e;
	margin: 0 0 12px;
	position: relative;
	padding-bottom: 10px;
}
.top_sec1__card-point::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	background: #d9e6f2;
	border-radius: 999px;
	margin-top: 10px;
}
.top_sec1__card-ttl {
	font-size: 18px;
	line-height: 1.35;
	margin: 0 0 10px;
	color: #0f172a;
}
.top_sec1__card-txt {
	margin: 0;
	color: #475569;
	line-height: 1.9;
	font-size: 14px;
}
/* responsive */
@media only screen and (max-width: 1068px) {
	.top_sec1__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 960px) {
	.top_sec1__feature {
		grid-template-columns: 1fr;
		grid-template-areas:
			"img"
			"body";
	}
	.top_sec1__cards {
		grid-template-columns: 1fr;
	}
}



/* 院内感染対策 */
.infection {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
.infection__inner {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}
.infection__media {
	flex: 0 0 40%;
	text-align: center;
}
.infection__media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	transition: 0.3s;
}
.infection__media img:hover {
	transform: scale(1.03);
}
.infection__body {
	flex: 1;
}
.infection__lead {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
	margin-bottom: 25px;
}
.infection__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.infection__list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 9px;
	line-height: 1.8;
}
.infection__list li::before {
	content: "●";
	position: absolute;
	left: 0;
	color: #2a7f9e;
	font-size: 10px;
	top: 6px;
}

/* */
@media (max-width: 768px) {
	.infection {
		padding: 70px 0;
	}
	.infection__inner {
		flex-direction: column;
		gap: 40px;
	}
	.infection__lead {
		font-size: 15px;
	}
}

/* 院内感染対策：内側ボックス */
.infection__box {
	background: #f5f8fb;
	padding: 60px;
}
/* SP */
@media (max-width: 768px) {
	.infection__box {
		padding: 40px 20px;
	}
}




/*診療内容のご案内*/
.top_sec4 {
	padding: var(--v-space2) 0 var(--v-space3) 0;
	background-color: var(--base-color);
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}

/**/
.strength-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 70px 20px;
	margin-top: 50px;
}
/* 各カード */
.strength-details {
	background-color: #fff; /* デフォルト */
	padding: 1.8rem;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0 2px 6px rgba(0,0,0,0.09);
	/*display: flex;
	flex-direction: column;*/
}
.strength-details figure {
	margin-bottom: 1.2rem;
	/*margin-top: -17%;*/
}
.strength-details img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}
.strength-details h3 {
	font-size: clamp(16px,1.6vw,19px);
	text-align: center;
	margin-bottom: 0.6rem;
	line-height: 1.5;
	font-feature-settings: 'palt' 1;
	-webkit-font-smoothing: antialiased;
}
.strength-details p {
	font-size: 0.95rem;
	line-height: 1.7;
	margin-top: auto;
	text-align: justify;
}
@media screen and (max-width: 1024px) {
	.strength-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 767px) {
	.strength-list {
		grid-template-columns: 1fr;
	}
	.strength-details {
		padding: 1.4rem;
	}
}

/* CTA*/
.service_cta {
	margin: 20px auto 10px auto !important;
	text-align: center;
}

/*ボタン*/
.detail-link {
	margin-top: 10px;;
}
.detail-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	padding: 0.5em 1.5em 0.7em 1.5em;
	min-width: 180px;
	box-sizing: border-box;

	font-size: clamp(11px,1.2vw,14px);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;

	color: #fff;
	background-color: var(--main-color);
	border-radius: 9999px;

	transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* 矢印アイコン（CSSのみ） */
.detail-link a::after {
	content: "→";
	font-size: 0.9em;
	transition: transform 0.2s ease;
}
.detail-link a:hover {
	background-color: var(--accent-color1);
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.detail-link a:hover::after {
	transform: translateX(4px);
}

/* スマホ対応 */
@media (max-width: 768px) {
	.detail-link a {
		width: 100%;
		min-width: unset;
		justify-content: center;
	}
}






/* お問い合わせ */
.contact_sec {
	padding: var(--v-space3) 0;
	background-color: #f2faf8;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
@media print, screen and (min-width: 768px) {
	.conbg-01 {
		background-image: url(../img/bg_06.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
}
@media only screen and (max-width: 767px) {
	.conbg-01 {
		background-image: url(../img/bg_06.jpg);
		background-repeat: no-repeat;
		background-position: 70%;
		background-size: cover;
	}
}
.contact_sec h2{
	font-size: clamp(20px,2.5vw,25px);
	/*letter-spacing: 0.28em;*/
	text-align: center;
	font-family: "WindSong", serif;
	margin: 0;
	font-size: clamp(30px,3vw,50px);
	white-space: nowrap;
	/*text-transform: lowercase;*/
	font-weight: normal;
	color: #886a45;
}
.contact_sec p {
	font-size: clamp(14px,1.5vw,16px);
	line-height: 1.6;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.99);
	text-align: center;
}
@media only screen and (max-width: 767px) {
	.contact_sec p {
		text-align: justify;
	}
	.contact_bg{
		background-color: rgba(255, 255, 255, 0.4);
		padding: 30px 20px 40px 20px;
	}
}
/*TELバナー*/
.tel_bnr{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
}
@media only screen and (max-width: 767px) {
	.tel_bnr{
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 10px;
	}
}
.tel_bnr-contact{
	display: grid;
	grid-template-columns: 1fr 0.3fr;
	grid-template-rows: 1fr;
	grid-column-gap: 50px;
	grid-row-gap: 10px;
	max-width: 700px;
	margin: 0 auto;
}
@media only screen and (max-width: 767px) {
	.tel_bnr-contact{
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 10px;
	}
}
/* ================================
   single（見た目：白い枠だけ）
================================ */
.tel_bnr-single{
	background: #ffffff85;
	/*border: 1px solid #e2e8f0;
	border-radius: 10px;*/
	padding: 20px 40px;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* ================================
   ボタン制御
================================ */
.tel_bnr-single .btn-call{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: end; /* grid内で右寄せ */
}

/* ================================
   ボタンデザイン
================================ */
.btn-call{
	background: var(--main-color);
	color: #fff;
	padding: 14px 28px;
	border-radius: 8px;
	font-weight: bold;
	font-size: 15px;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
	transition: background 0.2s, transform 0.1s;
	width: auto;          /* auto列を押し広げない */
	max-width: none;
	align-self: center;
}
.btn-call:hover{
	background: var(--accent-color1);
	transform: translateY(-1px);
}

/* SP：押しやすくフル幅 */
@media only screen and (max-width: 767px) {
	.btn-call{
		width: 100%;
		box-sizing: border-box;
	}
	.tel_bnr-single .btn-call{
		justify-self: center; /* grid内で中央寄せ */
	}
	.tel_bnr-single{
		background: #ffffffa6;
		padding: 20px 20px;
	}
}







/*======= 医院についてページ ======*/
.about_sec1 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
.mt20 {
	margin-top: 20px;
}
/* 院長メッセージ */
.director-message {
	background-color: #F2F2F2;
	padding: 60px 40px;
	margin: 60px 0 90px;
}
@media (max-width: 768px) {
	.director-message {
		padding: 40px 20px;
		margin: 40px 0 60px;
	}
}
.director-message__inner {
	display: flex;
	gap: 50px;
	align-items: flex-start;
}
@media (max-width: 768px) {
	.director-message__inner {
		display: flex;
		gap: 30px;
		align-items: flex-start;
	}
}
.director-message__image {
	width: 19%;
	margin: 0 auto;
	text-align: center;
}
.director-message__image img {
	width: 100%;
	border-radius: 50%;
}
.director-name {
	margin-top: 15px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--main-color);
	font-family: 'Noto Serif JP', serif;
}
.director-name span {
	font-size: 1.3rem;
}
.director-message__text {
	width: 70%;
}
.director-message__text h3 {
	font-size: clamp(18px,2.1vw,26px);
	color: var(--accent-color1);
	margin-bottom: 25px;
	line-height: 1.5;
	font-family: 'Noto Serif JP', serif;
}

/* レスポンシブ */
@media (max-width: 768px) {
	.director-message__inner {
		flex-direction: column;
	}
	.director-message__image {
		width: 40%;
		margin: 0 auto;
	}
	.director-message__text {
		width: 100%;
	}
}
@media (max-width: 568px) {
	.director-message__image {
		width: 60%;
		margin: 0 auto;
	}
}

/* 経歴 */
.director-career {
	max-width: 900px;
	margin: 0 auto 60px;
	padding: 0 24px;
}
.career-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.career-list li {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	padding: 14px 0;
	border-bottom: 1px solid #eaeaea;
}
.career-list span {
	font-weight: 600;
	color: var(--accent-color1);
}
@media (max-width: 600px) {
	.career-list li {
		grid-template-columns: 1fr;
	}
}
/* 所属学会 */
.director-affiliation {
	max-width: 900px;
	margin: 0 auto 30px;
	padding: 0 24px;
}
/* サブ見出し（所属学会用） */
.heading13 {
	font-family: 'Noto Serif JP', serif;
	color: var(--main-color);
	font-weight: 500;
	font-size: clamp(18px, 2vw, 22px);
	margin: 5px 0 20px;
	position: relative;
	padding-left: 18px;
}
.heading13::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background-color: var(--accent-color2);
	border-radius: 50%;
}

.affiliation-list {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}
.affiliation-list li {
	padding: 12px 0;
	border-bottom: 1px solid #eaeaea;
	position: relative;
	padding-left: 18px;
}
.affiliation-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;          /* 長さ */
	height: 2px;          /* 太さ ← ここで調整 */
	background-color: var(--accent-color1);
}


/*医院概要*/
.about_sec2 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}

.info_sec1__haba{
	/*max-width: 900px;*/
	margin: 0 auto;
	background-color: #ffffffc2;
	padding: 50px;
}
/* テーブルデザイン */
.info_container {
	display: grid;
	grid-template-columns: 1fr;
}
.info_container .item {
	border-bottom: 1px dashed #c1bcad;
	/*background-color: #ffffff85;*/
	padding: 11px 5px;
	display: grid;
	grid-template-columns: 10.5em 1fr;
	align-items: stretch;
	gap: 20px;
	box-sizing: border-box;
}
@media screen and (max-width: 1199px) and (min-width: 800px) {
	.info_container .item {
		padding: 8px 5px;
		grid-template-columns: 7.5em 1fr;
	}
}
.info_container .label {
	display: flex;
	align-items: center;
	font-weight: bold;
	color: #353535;
	white-space: nowrap;
	padding: 5px;
	font-size: clamp(15px, 1.6vw, 17px);
}
.info_container .content {
	display: flex;
	align-items: center;
	color: #333;
	padding: 5px;
	font-size: clamp(15px, 1.6vw, 17px);
}
@media screen and (max-width: 568px) {
	.company_sec1 {
		background-position: 70% top;
	}
	.info_sec1__haba {
		padding: 30px 20px;
	}
	.info_container .item {
		grid-template-columns: 1fr;
		padding: 8px 1px;
		gap: 0;
	}
	.info_container .label {
		line-height: 1.6;
		background-color: #ece7dc5e;
	}
	.info_container .content {
		display: block;
		font-size: 15px;
		line-height: 1.4;
		padding: 10px 5px 5px 5px;
		text-align: justify;
	}
}
/*装飾*/
.label-square {
	gap: 12px; /* 文字との間隔調整 */
	position: relative;
}

/* 左の4つの■（2×2の正方形） */
.label-square::before {
	content: "";
	width: 18px;   /* 全体の大きさ */
	height: 18px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 2px; /* 四角同士の隙間 */
}

/* 4つの小さな■を作る */
.label-square::before {
	background:
		linear-gradient(var(--main-color) 0 0) left top,
		linear-gradient(var(--sub-color1) 0 0) right top,
		linear-gradient(var(--sub-color1) 0 0) left bottom,
		linear-gradient(var(--main-color) 0 0) right bottom;
	background-size: 8px 8px; /* 小さい■のサイズ */
	background-repeat: no-repeat;
}


/** 院内のご案内 */
.our-clinic_sec{
	padding: var(--v-space2) 0;
	background-color: #f9f9f9;
	position: relative;
	z-index: 1;
}
/* グリッド全体 */
.our-clinic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 15px;
	margin: 30px auto 0 auto;
	box-sizing: border-box;
	/*max-width: 1030px;*/
}
/* 各カード */
.oc-card {
	overflow: hidden;
	display: flex;
	flex-direction: column; /* 縦方向に並べる */
}
/* 画像 */
.oc-image {
	width: 100%;
	aspect-ratio: 4 / 3; /* 横長比率（おすすめ） */
	overflow: hidden;
	/*border-radius: 8px;*/
}

.oc-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}
.oc-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* ここが重要 */
	object-position: center; /* 中央基準 */
	display: block;
	transition: transform 0.4s ease;
}

/* ホバー時の画像拡大（枠内で拡大） */
.oc-image:hover img {
	transform: scale(1.05);
}
/* テキスト：画像の下に配置 */
.oc-text {
	padding: 5px 4px 16px 4px;
}
/* タイトル */
.oc-title {
	font-size: clamp(15px, 1.5vw, 16px);
	/*margin-bottom: 8px;*//*下に説明文などがある場合*/
	line-height: 1.4;
	text-align: center;
}
/* レスポンシブ対応 */
@media (max-width: 550px) {
	.our-clinic-grid {
		grid-template-columns: 1fr;
	}
}


/* 医療設備 */
.equipment_sec {
	padding: var(--v-space2) 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
/* グリッド全体 */
.equipment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin: 30px auto 0 auto;
	box-sizing: border-box;
}
/* 各カード */
.eq-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* 画像 */
.eq-image {
	width: 100%;
	/*height: 200px;*/
	overflow: hidden;
	margin-bottom: 10px;
}
.eq-image img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 中央基準で上下切れる */
	display: block;
	border-radius: 8px;
}
/* タイトル */
.eq-title {
	font-size: clamp(16px, 1.5vw, 18px);
	font-weight: 600;
	margin-bottom: 5px;
	text-align: center;
}
/* 説明文 */
.eq-text p {
	font-size: 14px;
	line-height: 1.4;
	color: #555;
	margin: 0;
}
/* 案内文 */
.equipment_sec p.tx-c {
	text-align: center;
	margin-top: 20px;
	color: #777;
}
/* レスポンシブ */
@media (max-width: 600px) {
	.equipment-grid {
		grid-template-columns: 1fr;
	}
}









/*======= 一般・小児歯科ページ ======*/
.gen-ped_sec1 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
/*一般歯科（虫歯・入れ歯）*/
.gen-ped_sec2 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
.gen-ped_sec2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(2px,0.7vw,3px);
	background-image: linear-gradient( 135deg, #fff 0%, #b5997b 40%, #b7952d 60%, #fff 100% );
}
.general-link {
	margin-top: 20px;
}
.txt-link {
	color: var(--accent-color3);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.3s ease;
}
.txt-link:hover {
	opacity: 0.7;
}
.iminli{
	outline: 1px solid #ccc;
 	outline-offset: -0.5rem;
}


/*画像＋重ねテキスト*/
.overlap-container {
	position: relative;
	width: 100%;
	padding: 70px 0 130px 0; /* 上下余白 */
}
/* 画像 */
.overlap-image {
	width: 55%;
}
.overlap-image img {
	width: 100%;
	height: auto;
	display: block;
}
/* テキスト */
.overlap-text {
	position: absolute;
	top: 28%;          /* ← 画像上端より少し下 */
	left: 47%;         /* ← 真ん中やや左から */
	width: 52%;
	background: rgba(255,255,255,0.85);
	padding: clamp(20px, 3vw, 40px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.15);
	box-sizing: border-box;
}

@media (max-width: 968px) {
	.overlap-container {
		padding: 20px 0 50px 0;
	}
	.overlap-image {
		width: 100%;
	}
	.overlap-text {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin: 0 auto 0px;
		background: none;
		box-shadow: none;   /* ← これ追加 */
		padding: clamp(20px, 3vw, 40px) 5px;
	}
}

.overlap-container.reverse .overlap-image {
	margin-left: auto;
}
.overlap-container.reverse .overlap-text {
	left: auto;
	right: 45%;
}

@media (max-width: 968px) {
.overlap-container.reverse .overlap-text {
 		right: auto;
		left: auto;
	}
	 .overlap-container.reverse .overlap-image {
		margin-left: 0;
	}
}




/* 虫歯の進行段階 */
.caries-stage {
	margin-top: 20px;
	text-align: center;
}
.cs-title {
	font-size: clamp(18px, 2vw, 22px);
	margin-bottom: 20px;
}
.cs-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}
.cs-item {
	max-width: 200px;   /* 画像以上に広げない */
}
.cs-item img {
	width: 100%;
	height: auto;
	display: block;
}
.cs-label {
	margin-top: 8px;
	font-size: 14px;
}
@media (max-width: 968px) {
	.cs-item {
		max-width: 160px;
	}
}
@media (max-width: 768px) {
	.cs-item {
		max-width: 135px;
	}
}
/* スマホ調整 */
@media (max-width: 668px) {
	.cs-grid {
		display: grid;                /* ← flexからgridへ */
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		justify-items: center;        /* 中央寄せ */
	}
	.cs-item {
		max-width: 135px;
		width: 100%;
	}
}



/*銀歯について*/
.gen-ped_sec3 {
	padding: 0 0 var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
.silver-cons {
	padding: 20px;
	background-color: #f7f7f7;
}
.silver-cons h4 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
	border-left: 4px solid var(--sub-color1);
	padding: 2px 2px 3px 10px;
	background-color: #fff;
}
.silver-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin: 16px 0 10px 0;
}
.silver-item {
	background: #fff;
	padding: 20px 20px 20px 20px;
	border-radius: 13px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}
/* 文章 */
.silver-item p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: justify;
}
/* 対応 */
@media (max-width: 968px) {
	.silver-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}
@media (max-width: 768px) {
	.silver-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.silver-item p {
		min-height: fit-content;
	}
}

/* 印刷用 */
@media print {
	.silver-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 20px;
		margin: 16px 0 10px 0;
	}
}

/**/
.arrow_bottom {
	display: block;
	padding: 1rem 1.2rem;
	width: 30px;
	height: 35px;
	background: var(--sub-color1);
	clip-path: polygon(0 48.2%, 31% 48.2%, 31% 0, 69% 0, 69% 48.2%, 100% 48.2%, 50% 100%);
	margin: 25px auto;
}


/* 銀歯の有用性 */
.silver-benefit {
	background: #fdf3ed;
	border-left: 5px solid #c4a778;
	padding: 20px 25px;
	border-radius: 8px;
	font-size: clamp(0.85rem, 1vw, 1rem);
	line-height: 1.6;
	color: #333;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	margin: 0px auto 15px auto;
}
.silver-mf {
	background: #e0f7fa; /* 青系で別扱い */
	border-left: 5px solid #377f88;
	padding: 20px 25px;
	border-radius: 8px;
	font-size: clamp(0.85rem, 1vw, 1rem);
	line-height: 1.6;
	color: #007c91;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	margin: 0px auto 15px auto;
}

/* 画像エリア */
.silver-cons-note:last-child {
	margin-bottom: 0;
}

/**/
@media screen and (max-width: 768px) {
	.silver-cons-note {
		padding: 24px 20px;
	}
}

/* 画像並び */
.case-images {
	display: flex;
	gap: 20px;
}
/* 1画像単位 */
.case-image {
	position: relative;
	width: 100%;
}
.case-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
/* 被せ文字 */
.case-label {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 6px 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 14px;
	text-align: center;
	letter-spacing: 0.05em;
	border-radius: 0 0 6px 6px;
}

/* 2カラム */
.silver-cons-note:has(.case-images) {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 30px;
}
.silver-cons-note:has(.case-images) .case-images {
	grid-column: 2 / 3;
}

/**/
@media screen and (max-width: 968px) {
	.silver-cons-note:has(.case-images) {
		display: block;
	}
	.case-images {
		display: flex;
		flex-direction: row; /* ← 画像は横並び */
		gap: 16px;
		margin-top: 16px;
	}
}
@media screen and (max-width: 468px) {
	.case-images {
		flex-direction: column;
	}
}


/*歯周病予防*/
.gen-ped_sec4 {
	padding: var(--v-space3) 0;
	background-color: #f9f9f9;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}

/* Related Links */
.related-links {
	margin: 60px 0;
}

.related-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.related-card {
	display: block;
	padding: 30px;
	border: 1px solid #ddd;
	background: #fafafa;
	text-decoration: none;
	color: #333;
	transition: all .3s ease;
}

.related-card:hover {
	background: #f0f7f6;
	border-color: #6bb5ad;
	transform: translateY(-3px);
}

.related-card h4 {
	font-size: 18px;
	margin-bottom: 10px;
	color: #2c6b67;
}

.related-card p {
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 15px;
}

.related-more {
	font-size: 13px;
	color: #2c6b67;
	border-bottom: 1px solid #2c6b67;
	padding-bottom: 2px;
}

/* SP対応 */
@media screen and (max-width: 768px) {
	.related-container {
		grid-template-columns: 1fr;
	}
}


/* チラシセクション */
.flyer-section {
	margin: 60px 0 40px;
	text-align: center;
}
.flyer-title {
	font-size: 22px;
	margin-bottom: 10px;
	position: relative;
}
.flyer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 20px;
}
.flyer-grid a {
	display: block;
	transition: 0.3s ease;
}
.flyer-grid img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.flyer-grid a:hover {
	transform: translateY(-6px);
}

/* タブレット */
@media screen and (max-width: 1024px) {
	.flyer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* スマホ */
@media screen and (max-width: 768px) {
	.flyer-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}




/*小児歯科*/
.gen-ped_sec5 {
	padding: var(--v-space3) 0 var(--v-space) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
.gen-ped_sec5::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(2px,0.7vw,3px);
	background-image: linear-gradient( 135deg, #fff 0%, #b5997b 40%, #b7952d 60%, #fff 100% );
}

/**/
.det_grid{
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 17px;
}
@media (max-width: 868px) {
	.det_grid{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 568px) {
	.det_grid{
		grid-template-columns: 1fr;
	}
}
.det_point{
	background: #f9f8f8;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 12px;
	padding: 18px 18px 16px;
	text-align: left;
	position: relative;
}
.det_point::before{
	content:"";
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(90deg, var(--main-color), var(--accent-color3));
}
.det_point h4{
	margin: 8px 0 8px;
	color: var(--accent-color2);
	font-size: clamp(1.05rem, 1.8vw, 1.15rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.det_point p{
	margin: 0;
	color: rgba(0,0,0,0.72);
	font-size: clamp(0.875rem, 1.2vw, 0.95rem);
}
.det_full{
	margin-top: 30px;
}

/**/
.support_list {
	list-style: none;
	padding: 0;
	margin: 20px auto 20px auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	gap: 12px;
}
.support_list li {
	padding: 12px 10px;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	background: #fff;
	font-size: clamp(14px, 1.5vw, 16px);
	color: var(--accent-color1);
	text-align: center;
}
.support_list li:hover {
	background: #f0e9e5;
}

@media (max-width: 568px) {
	.support_list {
		grid-template-columns: 1fr;
	}
	.support_list li {
		padding: 12px 7px;
	}
}









/*======= 歯科口腔外科ページ ======*/
.oral_sec1 {
	padding: var(--v-space3) 0 0 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
/*親知らずの治療*/
.oral_sec2 {
	padding: var(--v-space3) 0;
	background-color: #f9f9f9;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
/*顎関節症の治療*/
.oral_sec3 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
/*歯根嚢胞の治療*/
.oral_sec4 {
	padding: var(--v-space3) 0;
	background-color: #f9f9f9;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}

/* floatレイアウト専用 */
.floattext {
	position: relative;
}
.float-img {
	float: right;
	width: 230px;
	margin: 0 0 20px 30px;
}
.float-img img {
	width: 100%;
	height: auto;
	display: block;
}
/* 回り込み解除 */
.floattext::after {
	content: "";
	display: block;
	clear: both;
}
/* スマホ対応 */
@media screen and (max-width: 767px) {
	.floattext {
		display: flex;
		flex-direction: column;
	}
	.float-img {
		float: none;
		order: 3;                 /* ← 最後に回す */
		width: 60%;
		max-width: 200px;
		margin: 20px auto 0;
	}
}

/**/
.cyst-stage {
	margin-top: 20px;
}
.cyst-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	justify-content: center;   /* PCは中央寄せ */
}
.cyst-item {
	text-align: center;
}
.cyst-item img {
	width: 100%;
	height: auto;
	display: block;
}
.cyst-label {
	margin-top: 8px;
	font-size: 14px;
}
/* ===== 3列（タブレット） ===== */
@media (max-width: 924px) {
	.cyst-grid {
		grid-template-columns: repeat(3, 1fr);
		justify-content: center;  /* まだ中央寄せ */
	}
}
/* ===== 2列（スマホ） ===== */
@media (max-width: 668px) {
	.cyst-grid {
		grid-template-columns: repeat(2, 1fr);
		justify-content: start;   /* 左から展開 */
	}
}


/*口内炎と癌*/
.oral_sec5 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
/* 口内炎と癌 比較セクション */
.compare-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 40px;
}
.compare-item {
	background: #f9f9f9;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	border: 1px solid #e1e1e1;
}
.compare-item.caution {
	background: #fff5f5;
	border: 1px solid #f2dede;
}
/* イラスト中央配置 */
.compare-img {
	text-align: center;
	margin-bottom: 20px;
}
.compare-img img {
	max-width: 260px;
	width: 100%;
	height: auto;
	display: inline-block; /* 中央揃え確実 */
}
/* タイトル中央揃え・強調 */
.compare-title {
	font-size: clamp(22px, 2.6vw, 26px);
	margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
	color: #333;
	border-bottom: 2px dotted #a49090;
}
/* 比較リスト */
.compare-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.compare-list li {
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.8;
}
/* strongを四角で囲む装飾 */
.compare-list li strong {
	display: inline-block;
	background-color: #D8BFAA85;
	color: var(--main-color);
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: bold;
	margin-right: 10px;
}

/* ===== SP対応 ===== */
@media (max-width: 768px) {
	.compare-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}
}


/* タイトルとサブタイトル（短い線で装飾）今回→ずっと真ん中*/
.heading-decoration2 {
	font-size: clamp(22px, 2.6vw, 26px); /* 今回のみ */
	min-height: 0vw;
	font-weight: 400;
	color: #444;
	font-family: 'Noto Serif JP', serif;
	text-align:center;
}
.heading-decoration2::after {
	display: block;
	content: '';
	width: 160px;
	height: 0px;
	border-top: solid 1px var(--main-color);
	margin-top: 0.2em;
	margin-right:auto;
	margin-left:auto;
}
.heading-decoration2 + p {
	margin-top: 0.5em;
	margin-bottom: 1em;
	font-family: "Montserrat", sans-serif;
	text-align:center;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--accent-color1);
}













/*======= セレック治療ページ ======*/
.cerec_sec1 {
	padding: var(--v-space3) 0 0 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
/**/
.kukuri2{
	padding: 15px 18px 15px 18px;
	margin: 0px auto 20px auto;
	box-sizing: border-box;
	width: fit-content;
	background-color: #ece5e59e;
}
.cerec_sec2 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
.cerec-flex {
	display: flex;
	align-items: center;
	gap: 40px;
}
/* 比率設定 */
.cerec-left {
	flex: 0.7;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cerec-text {
	flex: 1.5;
}
.cerec-right {
	flex: 1;
}
/* 画像共通 */
.cerec-left img,
.cerec-right img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
    .cerec-flex {
        flex-direction: column;
        gap: 30px;
    }
    /* SPでは文章→画像の順 */
    .cerec-text {
        order: 1;
    }
    .cerec-left {
        order: 2;
    }
    .cerec-right {
        order: 3;
    }
}



/*ご相談の流れ*/
.flow_sec {
	padding: var(--v-space2) 0 var(--v-space2) 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
	background-size: 6px 6px;
	background-image: repeating-linear-gradient(0deg, #9fc4a529, #9fc4a529 1px, #fff 1px, #fff);
}

/*4つ*/
.flow-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}
@media (max-width: 968px) {
	.flow-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media (max-width: 468px) {
	.flow-container {
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}
}
/*印刷用*/
@media print{
	.flow-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40px;
	}
}
/**/
.flow-container-item{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;/*4行*/
	gap: 0px;
	align-items: center;
	padding: 15px;
	background-color: rgba(126, 126, 126, 0.07);
	box-sizing: border-box;
	position: relative;
}
/**/
.flow-container-item1{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;/*4行*/
	gap: 0px;
	align-items: center;
	padding: 15px;
	background-color: rgba(126, 126, 126, 0.07);
	box-sizing: border-box;
}
/**/
.f-icon01 {
	line-height: 2;
	width: 2em;
	height: 2em;
	text-align: center;
	color: #fff;
	background: var(--main-color);
	margin: 0 auto 15px;
	display: block;
	border-radius: 100vh;
	position: relative;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: clamp(16px,1.6vw,17px);
	font-weight: 600;
}
/**/
.flow-container-item::after {
	content: "";
	width: 13px;
	height: 13px;
	margin-right: 13px;
	display: inline-block;
	border-top: 2px solid #999;	/* 右矢印 */
	border-right: 2px solid #999;/*  */
	position: absolute;
	top: calc(50% - 13px);/* 矢印の位置 */
	left: -31px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
@media (max-width: 968px) {
	.flow-container-item::after {
		display: none;
	}
}
/*印刷用*/
@media print{
	.flow-container-item::after {
		content: "";
		width: 13px;
		height: 13px;
		margin-right: 13px;
		display: inline-block;
		border-top: 2px solid #999;	/* 右矢印 */
		border-right: 2px solid #999;/*  */
		position: absolute;
		top: calc(50% - 13px);/* 矢印の位置 */
		left: -31px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
/*番号部分の吹き出し*/
div.f-icon01::before {
	content: "";
	border: solid transparent;
	border-width: 7px;
	border-top-color: var(--main-color);
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
/**/
h4.flow-h{
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(16px,1.6vw,19px);
	font-weight: 600;
	color: var(--main-color);
	text-align: center;
	line-height: 1.3;
	margin-bottom: 15px;
}
@media (max-width: 568px) {
	h4.flow-h{
		font-size: 17px;
	}
}
.flow-p{
	margin-left: 0;
	margin-bottom: 20px;
	font-size: clamp(14px,1.4vw,15px);
	line-height: 1.5;
	text-align: justify;
}
.flow-container-item1 img {
	outline: 1px solid #fff;
	outline-offset: -0.4rem;
	margin: 0 auto;
}
.flow-container-item img {
	outline: 1px solid #fff;
	outline-offset: -0.4rem;
	margin: 0 auto;
}


/*補綴治療／ジルコニアクラウン（自由診療）*/
.cerec_sec3 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
/* 画像3枚 */
.cerec_sec3_images {
	display: flex;
	gap: 20px;
	margin: 50px auto 80px auto;
	max-width: 1000px;
}
.cerec_sec3_images img {
	flex: 1 1 0;
	width: 100%;
	height: auto;
	min-width: 0;
	border-radius: 8px;
}
@media (max-width: 568px) {
	.cerec_sec3_images {
		flex-direction: column;
	}
}

/* 特長カード */
.cerec-features-cards {
	margin: 40px auto;
}
.cerec-features-cards .cfcards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	margin: 0 auto;
}
.cerec-features-cards .cfcard {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cerec-features-cards .cfcard:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* 見出し*/
.cerec-features-cards .cfcard h4 {
	font-size: clamp(13px, 1.3vw, 17px);
	font-weight: 700;
	color: #fff;
	background: var(--accent-color1);
	padding: 10px 9px;
	border-radius: 8px 8px 0 0;
	margin: 0;
	text-align: center;
}
/* 文章 */
.cerec-features-cards .cfcard div {
	padding: 19px;
}
.cerec-features-cards .cfcard p {
	font-size: clamp(14px, 1.4vw, 15px);
	line-height: 1.6;
	text-align: justify;
}
/* レスポンシブ */
@media screen and (max-width: 1024px) {
	.cerec-features-cards .cfcards {
		grid-template-columns: repeat(3, 1fr);
	}
	.cerec-features-cards .cfcard h4 {
		font-size: clamp(15px, 1.5vw, 16px);
	}
}
@media screen and (max-width: 768px) {
	.cerec-features-cards .cfcards {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 568px) {
	.cerec-features-cards .cfcards {
		grid-template-columns: 1fr;
	}
	.cerec-features-cards .cfcard h4 {
		font-size: 16px;
	}
	.cerec-features-cards .cfcard p {
		font-size: 14px;
	}
}
/* 印刷用 */
@media print {
	.cerec-features-cards .cfcards {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 24px;
		margin: 0 auto;
	}
	.cerec-features-cards .cfcard h4 {
		font-size: clamp(13px, 1.3vw, 17px);
		font-weight: 700;
		color: #fff;
		background: var(--accent-color1);
		padding: 10px 9px;
		border-radius: 8px 8px 0 0;
		margin: 0;
		text-align: center;
	}
}

/* デメリット */
.cerec_sec3_demerit {
	padding: 20px;
	background-color: #f7f7f7;
}
.cerec_sec3_demerit h4 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
	border-left: 4px solid var(--sub-color1);
	padding: 2px 2px 3px 10px;
	background-color: #fff;
}
.demerit-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 16px 0 10px 0;
}
.demerit-item {
	background: #fff;
	padding: 20px 20px 20px 20px;
	border-radius: 13px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}
/* 文章 */
.demerit-item p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: justify;
}
/* 対応 */
@media (max-width: 768px) {
	.demerit-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.demerit-item p {
		min-height: fit-content;
	}
}

/* 印刷用 */
@media print {
	.demerit-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin: 16px 0 10px 0;
	}
}


/* 治療概要テーブル */
.treatment_table {
	width: 100%;
	border-collapse: collapse;
	box-sizing: border-box;
}
.treatment_table th,
.treatment_table td {
	border: 1px solid #ddd;
	padding: 15px;
	vertical-align: top;
	line-height: 1.7;
	box-sizing: border-box;
}
.treatment_table th {
	width: 180px;
	background: #f7f7f7;
	text-align: left;
}

/* ▼ スマホ対応 */
@media screen and (max-width: 768px) {
	.treatment_table tr {
		display: block;
		margin-bottom: 20px;
		border: 1px solid #ddd;
	}
	.treatment_table th,
	.treatment_table td {
		display: block;
		width: 100%;
		border: none;
	}
	.treatment_table th {
		background: #f7f7f7;
		border-bottom: 1px solid #ddd;
	}
}

/* 当院のジルコニア治療 */
.cerec_bg {
	background: #fdf5e5;
	padding: 20px 30px;
	box-sizing: border-box;
}
.cerec_subttl {
	font-size: clamp(17px, 1.7vw, 18px);
	margin-bottom: 7px;
}



/*リグロスを用いる歯周組織再生療法*/
.regroth_sec1 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
.regroth_sec1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(2px,0.7vw,3px);
	background-image: linear-gradient( 135deg, #fff 0%, #b5997b 40%, #b7952d 60%, #fff 100% );
}
/**/
.cerec_bg2 {
	background: #f7f7f7;
	padding: 30px 35px;
	margin: 0 0 10px 0;
	box-sizing: border-box;
}
.empregroth{
	font-weight: bold;
	font-size:  clamp(17px, 1.8vw, 20px);
	margin: 50px auto 20px 0;
}

/**/
.regroth_wrap {
	display: grid;
	grid-template-columns: 1.2fr 1fr; /* ←ここで比率調整 */
	gap: 20px;
	align-items: flex-start;
	margin: 50px 0 60px 0;
}
/* 比率を変えたい時はここを変更 */
/*
例：
テキスト広め → 1.3fr 1fr
画像広め → 1fr 1.3fr
*/
.regroth_text {
	width: 100%;
}
.regroth_image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
/**/
@media screen and (max-width: 768px) {
	.regroth_wrap {
		grid-template-columns: 1fr; /* 縦並び */
		gap: 25px;
	}
}

/**/
.periodontal_regeneration {
	margin: 80px 0;
}

/* メリット・デメリット */
.merit_demerit {
	display: flex;
	gap: 30px;
	margin-bottom: 50px;
}
.merit_demerit .box {
	flex: 1;
	padding: 15px 25px 25px 25px;
	border-radius: 6px;
}
.merit h3 {
	color: #2c7a4b;
	margin-bottom: 15px;
}
.demerit h3 {
	color: #733c3c;
	margin-bottom: 15px;
}
.merit {
	background: #f1faf4;
	border: 1px solid #cfe9d8;
}
.demerit {
	background: #f2efefc9;
	border: 1px solid #dbd3d3;
}
@media screen and (max-width: 768px) {
	.merit_demerit {
		flex-direction: column;
	}
}


/* 治療の流れ */
.flow {
	margin-bottom: 40px;
}
.flow h3 {
	margin-bottom: 20px;
}

.flow ol {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 15px;
	counter-reset: step;
	list-style: none; /* 念のため */
	padding: 0;
	margin: 0;
}
.flow li {
	counter-increment: step;
	position: relative;
	padding-top: 35px;
	padding-bottom: 15px;
	background: #f7f7f7;
	border-top: 4px solid #666;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
}
/* 番号を表示 */
.flow li::before {
	content: counter(step) ".";
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold;
}
/* 可変 */
@media screen and (max-width: 1068px) {
	.flow ol {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 768px) {
	.flow ol {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* PCのみリンクを表示 */
@media screen and (max-width: 768px) {
	.pc-only {
		pointer-events: none; /* クリックを無効にする */
		cursor: default;
	}
}

/**/
.periodontal_care {
	margin: 30px 0;
	padding: 20px 15px;
	background-color: #fffeee;
	border-radius: 8px;
}
.periodontal_care .section-title {
	text-align: center;
	font-size: 24px;
	margin-bottom: 40px;
}
.care-items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
.care-item img {
	max-width: 170px;
	height: auto;
	margin: 0 auto 15px;
}
.care-item h4 {
	font-size: clamp(18px, 1.8vw, 19px);
	margin-bottom: 10px;
	line-height: 1.4;
	text-align: center;
}
.care-item p {
	font-size: clamp(13px, 1.3vw, 14px);
	line-height: 1.6;
	padding: 9px;
	background: #fff;
	border-radius: 8px;
	margin: 0 10px;
}

/* スマホ対応 */
@media screen and (max-width: 1024px) {
	.care-items {
		grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
	}
}
@media screen and (max-width: 468px) {
	.care-items {
		grid-template-columns: 1fr; /* スマホは1列 */
	}
}
.poc{
	color: #42abb1;
}







/*インプラント*/
.implant_sec1 {
	padding: var(--v-space3) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}
.implant_sec1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(2px,0.7vw,3px);
	background-image: linear-gradient( 135deg, #fff 0%, #b5997b 40%, #b7952d 60%, #fff 100% );
}



.implant_images {
	margin: 40px 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
/* 4枚セット */
.img-set.set-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0 0 40px 0;
}
.img-set.set-4 img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.img-set.set-4 p {
	font-size: clamp(14px, 1.4vw, 15px);
	text-align: center;
}
@media screen and (max-width: 868px) {
	.img-set.set-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}


/**/
.img-set-row {
	display: flex;
	justify-content: space-between; /* 3セット均等配置 */
	gap: 20px;
}
.img-set.set-small {
	display: flex;
	flex-direction: column; /* タイトル→画像 */
	width: calc((100% - 40px)/3); /* 3セットで横幅均等 */
	text-align: center;
	font-size: clamp(13px, 1.3vw, 14px);
}
.img-set.set-small h4 {
	margin: 0 0 10px;
	font-size: clamp(15px, 1.4vw, 16px);
	background-color: #d8bfaaa3;
}
.img-set.set-small .img-2col {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2列画像 */
	gap: 10px;
}
.img-set.set-small .img-2col img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

/* スマホ対応 */
@media screen and (max-width: 868px) {
	.img-set-row {
		flex-direction: column; /* 3セット縦並び */
		gap: 20px;
	}
	.img-set.set-small {
		width: 100%;
	}
}
 /* 画像も縦1列 */
/*
@media screen and (max-width: 468px) {
	.img-set.set-small .img-2col {
		grid-template-columns: 1fr;
	}
}
*/





/*審美治療*/
.cos-den_sec1 {
	padding: var(--v-space2) 0;
	background-color: #fff;
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
	background-image: url(../img/bg_04.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.cos-den_sec1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(2px,0.7vw,3px);
	background-image: linear-gradient( 135deg, #fff 0%, #b5997b 40%, #b7952d 60%, #fff 100% );
}
.whitening_table_wrap {
	margin-top: 40px;
}










/*==========================================================*/
/*      	　　　個人よく使う指定CSS  		  	  */
/*=========================================================*/
/*------------------------------------------------*/
/*セクションの間イメージ画像*/
.sec-adimg{
	padding: 0px;
	background-color: var(--base-color);
	position: relative;
	z-index: 1;
}
.sec-adimg-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.sec-adimg-container-item1 { grid-area: 1 / 1 / 2 / 2; }
.sec-adimg-container-item2 { grid-area: 1 / 2 / 2 / 3; }
.sec-adimg-container-item3 { grid-area: 1 / 3 / 2 / 4; }
.sec-adimg-container-item4 { grid-area: 1 / 4 / 2 / 5; }
.sec-adimg-container-item5 { grid-area: 1 / 5 / 2 / 6; }

@media (max-width: 968px) {
	.sec-adimg-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	
	.sec-adimg-container-item1 { display: none; }
	.sec-adimg-container-item2 { grid-area: 1 / 1 / 2 / 2; }
	.sec-adimg-container-item3 { grid-area: 1 / 2 / 2 / 3; }
	.sec-adimg-container-item4 { grid-area: 1 / 3 / 2 / 4; }
	.sec-adimg-container-item5 { display: none; }
}

@media (max-width: 568px) {
	.sec-adimg-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	
	.sec-adimg-container-item1 { display: none; }
	.sec-adimg-container-item2 { grid-area: 1 / 1 / 2 / 2; }
	.sec-adimg-container-item3 { grid-area: 1 / 2 / 2 / 3; }
	.sec-adimg-container-item4 { display: none; }
	.sec-adimg-container-item5 { display: none; }
}

/*------------------------------------------------*/

/*印刷には表示されない*/
@media print{
	.print_none{
		display: none;
	}
}
/*調整*/
.adjus{
	padding-top: 10px;
	padding-bottom: 30px;
}
/*テキストcenter→justify*/
.tx-ctj {
	text-align: center;
}
@media (max-width: 968px) {
	.tx-ctj {
		text-align: justify;
	}
}
/*印刷時*/
@media print{
	.tx-ctj {
		text-align: center;
	}
}
/*文字シャドウ*/
.tx-sha {
	text-shadow: #000 1px 0 10px;
}
/**/
.kukuri{
	border: 1px solid var(--sub-color1);
	padding: 15px 18px 15px 18px;
	margin: 40px auto 20px auto;
	box-sizing: border-box;
	outline: 1px solid #ccc;
	outline-offset: -0.4rem;
	width: fit-content;
	background-color: #ffffffc2;
}
.kukuri p{
	font-size: clamp(15px, 1.6vw, 16px);
	line-height: 1.5;
	text-align: justify;
}

/* タグ */
.kakomi01{
	margin-top: 5px;
	margin-bottom: 5px;
}
.kakomi01 span {
	padding: 3px 7px 3px 7px;
	margin: 2.5px 7px 7px 0;
	background-color: #2c973d9c;
	color:#fff;
	/*border: 1px solid var(--main-color);*/
	border-radius: 5px;
	text-align: center;
	display: inline-block;
	font-size: clamp(11px, 1.3vw, 13px);
}
/*任意のみ表示*/
@media only screen and (max-width: 869px) {
	.nini-869 {
		display: none;
	}
}
/*印刷時*/
@media print{
	.nini-869 {
		display: inline;
	}
}

/*画像角丸*/
img.borad {
	border-radius: 7px;
	/*border: 1px solid #e1e1e1;*/
}
img.borad2 {
	border-radius: 11px;
}
/* コンテンツ幅 */
div.haba{
	margin: 0 8%;
	padding: 0;
}
@media only screen and (max-width: 968px)  {
	div.haba{
		margin: 0;
		padding: 0;
	}
}
/*印刷時*/
@media print{
	div.haba{
		margin: 0 8%;
		padding: 0;
	}
}
/*pcとspで画像のサイズ変えたいときの指定*/
.pcspwid{
	width: 450px;
	margin: 0 auto;
}
@media only screen and (max-width: 568px) {
	.pcspwid{
		width: 100%;
	}
}
/**/
.pcspwid2{
	width: 460px;
	margin: 15px auto;
}
@media only screen and (max-width: 568px) {
	.pcspwid2{
		width: 100%;
		margin: 15px auto;
	}
}
/**/
.fniyori {
	font-feature-settings: 'palt' 1;
	-webkit-font-smoothing: antialiased;
}
/*四角デザイン*/
.head-square {
	color: #a7ccad;
	font-size: clamp(16px, 1.8vw, 19px);
	display: flex;
	align-items: center;
	gap: 12px; /* 文字との間隔調整 */
	position: relative;
	margin-top: 10px;
}

/* 左の4つの■（2×2の正方形） */
.head-square::before {
	content: "";
	width: 14px;   /* 全体の大きさ */
	height: 14px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 2px; /* 四角同士の隙間 */
}

/* 4つの小さな■を作る */
.head-square::before {
	background:
		linear-gradient(#9acaa2 0 0) left top,
		linear-gradient(#fff 0 0) right top,
		linear-gradient(#fff 0 0) left bottom,
		linear-gradient(#9acaa2 0 0) right bottom;
	background-size: 6px 6px; /* 小さい■のサイズ */
	background-repeat: no-repeat;
}
/*□装飾*/
.cp_h4title {
	position: relative;
	font-size: clamp(18px, 1.8vw, 20px);
	padding: 2px 2px 2px 32px;
	border-bottom: 1px dotted #999;
	margin: 0 0 10px 0;
}
.cp_h4title::before,
.cp_h4title::after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	/*border: 2px solid var(--accent-color1);*/
}
.cp_h4title::before {
	top: 10px;
	left: 5px;
	border: 2px solid var(--accent-color2);
}
.cp_h4title::after {
	top: 15px;
	left: 10px;
	border: 2px solid var(--accent-color1);
}
/*リスト　大きめディスク*/
ul.nor{
	list-style: disc;
	margin: 5px 5px 5px 25px;
	line-height: 1.4;
}
ul.nor li::marker{
	font-size: 150%;
	font-weight: bold;
	line-height: 0.7;
	color: #d3b457;
	left: 10px;
}
ul.nor li{
	/*border-bottom: 1px dashed #b9b9b9;*/
	padding: 0.2em 0;
	font-size: clamp(14px, 1.5vw, 15px);
}
ul.nor li.noli::marker{
	font-size: 150%;
	font-weight: bold;
	line-height: 0.7;
	color: rgba(255,255,255,0);
}
ul.nor li.noli{
	margin-left: -25px;
}
/*リスト　通常*/
ul.usuallyul{
	list-style: disc;
	margin: 5px 1px 5px 25px;
}
ul.usuallyul li{
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.3;
	margin-bottom: 5px;
}
ul.usuallyul li:last-child{
	margin-bottom: 0px;
}
/*4つの枠で3つ*/
/*flexで*/
.general-item-circle3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	box-sizing: border-box;
	margin: 30px auto;
	max-width: 1100px;
}
.circle-item3 {
	width: calc((100% - 60px) / 4); /* gap分引いた上で4分割 */
	/*min-width: 250px;*/ /* スマホで潰れすぎ防止 */
	box-sizing: border-box;
}
/* タブレット対応：2カラム */
@media only screen and (max-width: 868px) {
	.general-item-circle3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px 15px;
		margin: 30px 0;
		box-sizing: border-box;
	}
	.circle-item3 {
		width: calc((100% - 30px) / 3);
	}
}
/* スマホ対応：2カラム */
@media only screen and (max-width: 468px) {
	.circle-item3 {
		width: calc((100% - 15px) / 2);
	}
}

/* 印刷用 */
@media print {

}

.circle-item3 img{
	/*outline: 10px solid #ffffff69;*/
	outline: 2px solid #ffffff69;
	outline-offset: -10px;
}


/*円*/
.circle {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

/* ゆらゆらアニメーション */
@keyframes float-updown {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px); /* 上に10px動く */
	}
}

/* 適用クラス */
.float-anim {
	animation: float-updown 3s ease-in-out infinite;
}

/* 遅延付きバリエーション */
.float-delay1 {
	animation-delay: 0s;
}
.float-delay2 {
	animation-delay: 1s;
}
.float-delay3 {
	animation-delay: 2s;
}
/* 印刷用 */
@media print {
	/* アニメーションを無効にする */
	.float-anim {
		animation: none !important;
	}
}