@charset "UTF-8";


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

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

/* 親要素からはみ出して画面いっぱいに */
.full {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}
@media print {
	.full {
		margin: 0;
		width: 100%;
	}
}

.hline {
	display: inline-block;
	width: 40px; /* 横棒の長さ（調整可） */
	height: 1px; /* 横棒の太さ（調整可） */
	background-color: #2d2d2d; /* 横棒の色 */
	vertical-align: middle;
	margin: 0 0.1em; /* 文章と横棒の間隔 */
}

/*パンくず*/
.sec_pankuzu{
	padding: 0px;
	background-color: var(--base-color);
	position: relative;
	z-index: 1;
}

/* タグ */
.kakomi01{
	text-align: center;
}
.kakomi01 span {
	padding: 3px 7px 2px 7px;
	margin: 0px 0px 5px;
	background-color: var(--main-color);
	border: 1px solid #eee;
	color:#FFF;
	border-radius: 5px;
	text-align: center;
	display: inline-block;
	font-size: clamp(12px, 1.3vw, 12px);
}

/* タグ（左右が揃う）  */
.kakomi-tag01 {
	display: flex;
	flex-wrap: wrap; /* 子要素を折り返す */
	gap: 10px;
	width: 100%;
	justify-content: space-between; /* 左右のボックスを揃える */
}
.kakomi-tag01 p {
	background-color: var(--accent-color3);
	padding: 5px 10px;
	font-size: clamp(14px, 1.6vw, 16px);
	font-family: Arial, sans-serif;
	flex-grow: 1; /* ボックスのサイズを自動調整 */
	min-width: 100px; /* ボックスの最小幅を設定 */
	box-sizing: border-box;
	text-align: center; /* 水平方向の中央揃え */
}
.kakomi-tag01 .end{		/* などを末尾につけたい場合に */
	background-color:transparent;
	padding: 5px;
	font-size: clamp(14px, 1.3vw, 14px);
	font-family: Arial, sans-serif;
	width: 20px;
	min-width: 40px; /* ボックスの最小幅を設定 */
	box-sizing: border-box;
	text-align: right; /* 水平方向の中央揃え */
}



/*======= TOPページ ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(40px, 6vw, 90px) 0 clamp(110px, 12vw, 160px);
	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: bottom;
		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: bottom;
		background-size: cover;
	}
}

.greeting-haba{
	margin: 0 auto;
	max-width: 900px;
	padding: 2% 0 0 0;
}

/* イメージ写真 */
.greeting_photo{
	padding:0 10px 10px;
}

.greeting_photo *{
	box-sizing:border-box;
}

.greeting_photo .photo-cloud{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	max-width:1100px;
	margin:0 auto;
}

.greeting_photo .circle-img{
	border-radius:50%;
	object-fit:cover;
	box-shadow:0 15px 35px rgba(0,0,0,0.08);
	transition:transform 0.3s ease;
}

.greeting_photo .circle-img:hover{
	transform:scale(1.05);
	z-index:5;
}

/* ===== PCサイズ固定 ===== */
.greeting_photo .img-large{
	width:340px;
	height:340px;
	z-index:2;
}

.greeting_photo .img-medium{
	width:260px;
	height:260px;
	margin-top:140px;
	margin-left:-50px;
	z-index:1;
}

.greeting_photo .img-small{
	width:200px;
	height:200px;
	margin-bottom:120px;
	margin-left:-30px;
	z-index:3;
}

/* ===== SPは幅基準で自然縮小 ===== */
@media (max-width:768px){

	.greeting_photo .photo-cloud{
		flex-wrap:nowrap;
		gap:0;
	}

	.greeting_photo .circle-img{
		height:auto;
		aspect-ratio:1 / 1;
	}

	.greeting_photo .img-large{
		width:45%;
		max-width:260px;
	}

	.greeting_photo .img-medium{
		width:35%;
		max-width:200px;
		margin-top:20%;
		margin-left:-5%;
	}

	.greeting_photo .img-small{
		width:30%;
		max-width:170px;
		margin-bottom:15%;
		margin-left:-5%;
	}
}

/*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_img img{
	border: solid 1px var(--main-color);
}
/* 新着情報 */
.news-section{
	padding: 0 0 var(--v-space2);
	background: #ffffff;

	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}
/* 区切り用 ::before */
.news-section::before {
	content: '';
	position: absolute;
	top: -110px;/* 上に重ねる高さに調整 */
	left: 0;
	right: 0;
	height: 110px;/* 高さを大きくして波を並々に */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z' fill='%23ffffff'/%3E%3Cpath d='M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z' opacity='.5' fill='%23ffffff'/%3E%3Cpath d='M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z' opacity='.5' fill='%23ffffff'/%3E%3C/svg%3E");	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 110px;

	z-index: 3;
	pointer-events: none;
}

/* 大画面対応 */
@media (min-width:2100px) {
	.news-section::before {
		background-size: 100% calc(2vw + 133px);
	}
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
	.news-section::before {
		height: 70px;/* 高さを低くする */
		top: -70px;/* topも同じ高さに合わせる */
		background-size: 100% 70px;/* 背景SVGのサイズも合わせる */
	}
}


.news-title{
	text-align: center;
	margin-bottom: 30px;
	font-size: 1.5rem;
}

.news-item{
	display: grid;
	grid-template-columns: 60px 120px 1fr; /* NEW / 日付 / 内容 */
	gap: 10px;
	padding: 15px 0 10px;
	border-bottom: 1px solid #ddd;
	align-items: start;
}

.news-date{
	color: #888;
	font-size: 0.9rem;
}

.news-text{
	display: block;
	line-height: 1.6;
}
.news-text a{
	text-decoration: underline;
	color:var(--accent-color3);
	padding: 0 2px;
}
.news-text a:hover{
	color:var(--accent-color1);
}
.new-label{
	background: var(--accent-color3);
	color: #fff;
	font-size: 0.7rem;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 5px;
	animation: pyoko 1.2s infinite ease-in-out;
	justify-self: start;
	align-self: start;
	margin-top: 2px;
}

@keyframes pyoko{
	0%{opacity: 1;}
	100%{opacity: 0.85;}
}

/* NEWじゃない行は「見えないけど幅は確保」 */
.new-label.is-empty{
	visibility: hidden;
	animation: none;
}

/* Toggle */
.more-news{
	display: none;
}

#news-toggle{
	display: none;
}

.more-btn-label,
.close-btn-label{
	display: block;
	width: fit-content;
	margin: clamp(20px, 5vw, 32px) auto 0;
	padding: clamp(5px, 1vw, 12px) clamp(24px, 4vw, 40px);
	border-radius: 999px;
	cursor: pointer;
	font-weight: bold;
}

.more-btn-label{
	background: var(--main-color);
	color: #fff;
}

.close-btn-label{
	background: #999;
	color: #fff;
	display: none;
}

#news-toggle:checked ~ .more-news{
	display: block;
}

#news-toggle:checked ~ .more-btn-label{
	display: none;
}

/* 開いたら「閉じる」を表示 */
#news-toggle:checked ~ .more-news .close-btn-label{
	display: block;
}

/* =========================
   スマホ表示（縦並び：NEW→日付→内容）
========================= */
@media (max-width: 600px){
	.news-item{
		grid-template-columns: 1fr; /* 1カラム */
		gap: 6px;
	}

	.new-label{
		flex-shrink: 0;
		min-width: 30px;
		text-align: center;
	}

	.news-date{
		font-size: 0.85rem;
	}
	.new-label.is-empty{
		display: none;
	}
}

/* お悩み */
.top_sec1{
	background-color:#fff;
	background-image:radial-gradient(#ffe0b2 1px, transparent 1px);
	background-size:20px 20px;
	padding:60px 20px;
	position:relative;
	overflow:hidden;
}

/* 装飾的な波形ボーダー */
.top_sec1::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:10px;
	background:repeating-linear-gradient(-45deg, var(--accent-color1), var(--accent-color1) 10px, #fff 10px, #fff 20px);
}

.top_sec1 .section-title{
	font-size:1.8rem;
	color:var(--accent-color2);
	margin-bottom:10px;
	position:relative;
	display: block;
	width: fit-content;
	margin-inline: auto;
	font-family:
			"Hiragino Maru Gothic ProN",
			"ヒラギノ丸ゴ ProN",
			"UD丸ゴシック",
			"Rounded M+ 1c",
			"Arial Rounded MT Bold",
			"Comic Sans MS",
			"メイリオ",
			sans-serif;
}

.top_sec1 .section-title::after{
	content:"****";
	display:block;
	font-size:1.2rem;
	letter-spacing:5px;
	color:var(--accent-color3);
	margin-top:5px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
}

.top_sec1 .character-box{
	margin:30px auto 20px;
	width:100px;
	height:100px;
	position:relative;
	animation:bounce 2s infinite;
}

@keyframes bounce{
	0%, 100%{ transform:translateY(0); }
	50%{ transform:translateY(-10px); }
}

.top_sec1 .character-icon{
	width:100%;
	height:auto;
	filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.1));
}

.top_sec1 .grid-container{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	gap:20px;
	max-width:800px;
	margin:0 auto 40px;
}

.top_sec1 .problem-card{
	background:var(--white);
	padding:20px;
	border-radius:10px;
	border:2px solid #ffe0b2;
	display:flex;
	align-items:center;
	text-align:left;
	transition:all 0.3s ease;
	cursor:pointer;
	position:relative;
}

.top_sec1 .problem-card:hover{
	transform:scale(1.03);
	border-color:var(--accent-color1);
	box-shadow:0 8px 20px rgba(255,179,71,0.2);
}

/* チェックボックスのカスタムデザイン */
.top_sec1 .checkbox-custom{
	width:24px;
	height:24px;
	background-color:#fff;
	border:2px solid var(--accent-color1);
	border-radius:5px;
	margin-right:15px;
	flex-shrink:0;
	position:relative;
}

/* タップ時の変なハイライト抑制（iOS対策） */
.top_sec1 .problem-card{
	-webkit-tap-highlight-color:transparent;
	user-select:none;
}

/* radio自体は見せない */
.top_sec1 .problem-radio{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

/* 選択中：✔表示 */
.top_sec1 .problem-radio:checked + .checkbox-custom::after{
	content:"\2714\FE0E"; /* ✔ + テキスト表示強制 */
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	color:var(--accent-color3);
	font-weight:700;
	font-size:16px;
	line-height:1;
	font-family:inherit;
}

/* 選択中：カードの強調（hoverと同等） */
.top_sec1 .problem-radio:checked ~ .problem-text{
	color:var(--accent-color2);
}

.top_sec1 .problem-radio:checked ~ .checkbox-custom{
	border-color:var(--accent-color1);
	background-color:rgba(255,179,71,0.15);
}

/* 選択中のカード自体を強調したい場合（labelに効かせる） */
.top_sec1 .problem-card:has(.problem-radio:checked){
	transform:scale(1.03);
	border-color:var(--accent-color1);
	box-shadow:0 8px 20px rgba(255,179,71,0.2);
}

.top_sec1 .problem-text{
	color:var(--text-color);
	font-size:1.2rem;
	line-height:1.6;
	font-weight:500;
}

.top_sec1 .footer-message{
	max-width:750px;
	margin:0 auto;
	color:var(--text-color);
	font-size:0.95rem;
	line-height:1.8;
	background:rgba(255,179,71,0.2);
	padding:20px;
	border-radius:15px;
}

.top_sec1 .highlight{
	color:var(--accent-color3);
	font-weight:bold;
}

/* 肉球装飾 */
.top_sec1 .paw-print{
	position:absolute;
	opacity:0.1;
	z-index:0;
}
.top_sec1 .paw-1{ top:20%; left:5%; transform:rotate(-20deg); }
.top_sec1 .paw-2{ bottom:10%; right:5%; transform:rotate(15deg); }

@media (max-width:600px){
	.top_sec1 .section-title{ font-size:1.4rem; }
	.top_sec1 .grid-container{ grid-template-columns:1fr; }
}

/* 初めてご来院の方へ */
.top_sec2{
	background-color:#fcf9f2;
}

.top_sec2 *{
	box-sizing:border-box;
}

/* 2カラムレイアウト */
.top_sec2 .top_sec2__grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-areas:"photo content";
	min-height:520px;
}

/* 左：写真（背景） */
.top_sec2 .top_sec2__photo{
	grid-area:photo;
	background-size:cover;
	background-position: left 20% bottom;
	background-repeat:no-repeat;
	min-height:520px;
}
@media print, screen and (min-width: 768px) {
	.top_sec2 .top_sec2__photo {
		background-image: url(../img/bg_02.jpg);
	}
}
@media only screen and (max-width: 767px) {
	.top_sec2 .top_sec2__photo {
		background-image: url(../img/bg_02_sp.jpg);
	}
}

/* PCのみ fixed（iOS対策も兼ねてhover条件） */
@media screen and (min-width:1024px) and (hover:hover) and (pointer:fine){
	.top_sec2 .top_sec2__photo{
		background-attachment:fixed;
	}
}

/* 右：コンテンツ */
.top_sec2 .top_sec2__content{
	grid-area:content;
	padding:60px 20px;
	display:flex;
	align-items:center;
}

.top_sec2 .top_sec2__content .w-container{
	width:100%;
	max-width:700px;
	margin:0 auto;
}

/* ====== contents ====== */
.top_sec2 .header{
	text-align:center;
	margin-bottom:1rem;
	color:var(--accent-color2);
	line-height:1.9;
}

.top_sec2 .header h2{
	font-size:1.7rem;
	color:var(--accent-color2);
	margin:0 0 15px 0;
	font-weight:700;
	display:inline-block;
	position:relative;
}

.top_sec2 .header h2::after{
	content:"";
	display:block;
	width:80%;
	height:4px;
	background:var(--accent-color1);
	margin:8px auto 0;
	border-radius:10px;
	opacity:0.6;
}

.top_sec2 .header p{
	font-size:1rem;
	margin:0;
	font-weight:500;
}

.top_sec2 .illustration-spacer{
	width: fit-content;
	margin-inline: auto;
	margin-bottom: 2rem;
}
.top_sec2 .illustration-spacer img{
	width: 50%;
	max-width: 400px;
	height: auto;
	display: block;
	margin-inline: auto;
}

.top_sec2 .notice-card{
	background-color:#fffaf0;
	border:2px solid var(--accent-color1);
	border-radius:25px;
	padding:45px 35px 30px;
	position:relative;
}

.top_sec2 .notice-label{
	position:absolute;
	top:-18px;
	left:35px;
	background:var(--accent-color1);
	color:#fff;
	padding:6px 25px;
	border-radius:50px;
	font-size:0.95rem;
	font-weight:700;
	box-shadow:0 4px 8px rgba(249,177,122,0.3);
	white-space:nowrap;
}

.top_sec2 .notice-list{
	list-style:none;
	padding:0;
	margin:0;
}
.top_sec2 .notice-list li {
	position: relative;
	padding-left: 35px;
	margin-bottom: 20px;
	font-size: 1.05rem;
	color: var(--accent-color2);
	line-height: 1.9;
}

.top_sec2 .notice-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;	/* ← 縦位置はここで微調整 */
	width: 30px;
	height: 30px;
	background-image: url("../icon/icon_paw.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

/* モバイル対応：縦積み（上：写真、下：内容） */
@media (max-width:900px){
	.top_sec2 .top_sec2__grid{
		grid-template-columns:1fr;
		grid-template-areas:
			"photo"
			"content";
		min-height:auto;
	}

	.top_sec2 .top_sec2__photo{
		min-height:40vh;
		background-attachment:scroll;
	}

	.top_sec2 .top_sec2__content{
		padding:50px 15px;
	}

	.top_sec2 .header h2{
		font-size:1.4rem;
	}

	.top_sec2 .notice-card{
		padding:40px 20px 25px;
	}

	.top_sec2 .notice-list li{
		font-size:0.95rem;
	}

	.top_sec2 .notice-label{
		left:50%;
		transform:translateX(-50%);
		width:min(320px, 90%);
		text-align:center;
		white-space:normal;
	}

	.top_sec2 .footprints-art{
		letter-spacing:14px;
	}
}

/* =========================
	ab_sec1（当院の特徴）
========================= */
.ab_sec1{
	padding: var(--v-space2) 0;
	background: #eaf5f3;
	position: relative;
}
/* 区切り用 ::before */
.ab_sec1::before {
	content: '';
	position: absolute;
	top: -110px;/* 上に重ねる高さに調整 */
	left: 0;
	right: 0;
	height: 110px;/* 高さを大きくして波を並々に */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z' fill='%23eaf5f3'/%3E%3Cpath d='M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3Cpath d='M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3C/svg%3E");	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 110px;

	z-index: 3;
	pointer-events: none;
}

/* 大画面対応 */
@media (min-width:2100px) {
	.ab_sec1::before {
		background-size: 100% calc(2vw + 133px);
	}
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
	.ab_sec1::before {
		height: 70px;/* 高さを低くする */
		top: -70px;/* topも同じ高さに合わせる */
		background-size: 100% 70px;/* 背景SVGのサイズも合わせる */
	}
}

.ab_sec1-container{
	display: grid;
	gap: 30px;
	margin-top: 30px;
}
.ab_sec1-item{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0px;
	align-items: center;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	overflow: hidden;
}
.ab_sec1-item.reverse{
	direction: rtl;
}
.ab_sec1-item.reverse > *{
	direction: ltr;
}
.ab_sec1-item__img img{
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.ab_sec1-item__body{
	padding: 22px 22px 26px;
}
.ab_sec1-num{
	font-family: 'Kiwi Maru', serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--main-color);
	margin-bottom: 10px;
}
.ab_sec1-ttl{
	position: relative;
	font-size: 20px;
	margin-bottom: 10px;
	padding-left: 14px;
}

.ab_sec1-ttl::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.4em;
	background-color: var(--main-color);
	border-radius: 2px;
}
.ab_sec1-txt{
	line-height: 1.9;
}

/* --- responsive --- */

@media only screen and (max-width: 767px) {
	.ab_sec1-item{
		grid-template-columns: 1fr;
		gap:0px;
	}
	.ab_sec1-item__body{
		padding: 18px 18px 22px;
	}
}

/* =========================
	ab_sec2（野生動物・野鳥の救護）
	分割はtop_sec2方式／中身デザインは前回案を維持
========================= */

.ab_sec2{
	padding: 0;
	background: #fff;
}

.ab_sec2 *{
	box-sizing: border-box;
}

.ab_sec2__grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "photo panel";
	min-height: 520px;
}

/* 左：写真（背景） */
.ab_sec2__photo{
	grid-area: photo;
	background-size: cover;
	background-position: left 20% center;
	background-repeat: no-repeat;
	min-height: 520px;
}

/* 画像切替（必要なければSPも同じでOK） */
@media print, screen and (min-width: 768px){
	.ab_sec2__photo{
		background-image: url(../img/bg_03.jpg);
	}
}
@media only screen and (max-width: 767px){
	.ab_sec2__photo{
		background-image: url(../img/bg_03_sp.jpg);
	}
}

/* PCのみ fixed */
@media screen and (min-width:1024px) and (hover:hover) and (pointer:fine){
	.ab_sec2__photo{
		background-attachment: fixed;
	}
}

/* 右：内容面（前回のベージュパネルの雰囲気を維持） */
.ab_sec2__panel{
	grid-area: panel;
	background: #fbf7ef;
	padding: 70px 50px;
	display: grid;
	align-items: center;
	position: relative;
}

/* 背景点々装飾 */
.ab_sec2__panel::before{
	content: "";
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	height: 70px;
	background-image: radial-gradient(rgba(242,170,105,0.35) 1px, transparent 1px);
	background-size: 14px 14px;
	opacity: 0.55;
	pointer-events: none;
}

.ab_sec2__inner{
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* 見出し */
.ab_sec2-hgroup{
	text-align: center;
	margin-bottom: 18px;
}

.ab_sec2-ttl{
	font-size: 26px;
	letter-spacing: 0.08em;
	color: var(--accent-color2);
}

.ab_sec2-en{
	margin-top: 6px;
	font-size: 14px;
	letter-spacing: 0.12em;
	opacity: 0.8;
	color:var(--accent-color3);
}

.ab_sec2-lead{
	margin: 16px auto 30px;
	line-height: 1.9;
}

/* 囲み */
.ab_sec2-box{
	position: relative;
	border: 2px solid rgba(242,170,105,0.75);
	border-radius: 22px;
	padding: 35px 22px 18px;
	background: linear-gradient(
		180deg,
		rgba(255,255,255,0.95) 0%,
		rgba(255,248,235,0.95) 100%
	);

	box-shadow:
		0 12px 30px rgba(0,0,0,0.06),
		0 2px 6px rgba(0,0,0,0.03);
}

.ab_sec2-box__label{
	position:absolute;
	top:clamp(-18px,-1.2vw,-14px);
	left:18px;

	display:inline-block;
	padding:6px 16px;

	border-radius:999px;
	background:var(--accent-color1);
	color:#fff;

	font-weight:700;
	font-size:14px;
	letter-spacing:0.06em;

	box-shadow:0 4px 10px rgba(242,170,105,0.35);
}

.ab_sec2-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ab_sec2-list li{
	position: relative;
	padding-left: 1.2em;
	line-height: 1.7;
}

.ab_sec2-list li::before{
	content: "●";
	position: absolute;
	left: 0;
	top: 0.5em;
	font-size: 0.7em;
	color: var(--accent-color3);
}

/* --- responsive --- */
@media only screen and (max-width: 968px){
	.ab_sec2__grid{
		grid-template-columns: 1fr;
		grid-template-areas:
			"photo"
			"panel";
		min-height: auto;
	}

	.ab_sec2__photo{
		min-height: 40vh;
		background-attachment: scroll;
	}

	.ab_sec2__panel{
		padding: 45px 20px;
	}

	.ab_sec2__panel::before{
		height: 55px;
	}
	.ab_sec2-box{
		padding: 35px 15px 10px;
	}
}


/*======= 診療内容 ======*/
/* ========================
	me_sec1
======================== */

.me_sec1{
	padding: var(--v-space2) 0;
	background: #eaf5f3;
	position: relative;
}
/* 区切り用 ::before */
.me_sec1::before {
	content: '';
	position: absolute;
	top: -110px;/* 上に重ねる高さに調整 */
	left: 0;
	right: 0;
	height: 110px;/* 高さを大きくして波を並々に */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z' fill='%23eaf5f3'/%3E%3Cpath d='M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3Cpath d='M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3C/svg%3E");	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 110px;

	z-index: 3;
	pointer-events: none;
}

/* 大画面対応 */
@media (min-width:2100px) {
	.me_sec1::before {
		background-size: 100% calc(2vw + 133px);
	}
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
	.me_sec1::before {
		height: 70px;/* 高さを低くする */
		top: -70px;/* topも同じ高さに合わせる */
		background-size: 100% 70px;/* 背景SVGのサイズも合わせる */
	}
}

.me_sec1-grid{
	margin-top:40px;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:28px;
}

.me_sec1-card{
	text-align:center;
	padding:25px 20px 30px;
	border-radius:22px;
	background:#fff;
	box-shadow:0 12px 30px rgba(0,0,0,0.06);
	transition:.3s;
}

.me_sec1-card:hover{
	transform:translateY(-6px);
	box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

.me_sec1-photo{
	width:120px;
	height:120px;
	margin:0 auto 14px;
	border-radius:50%;
	overflow:hidden;
}

.me_sec1-photo img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.me_sec1-card h3{
	font-size:20px;
	margin:0;
	color:var(--accent-color2);
}

.me_sec1-card .kana{
	display:block;
	font-size:13px;
	color:#888;
	margin-bottom:8px;
}

.me_sec1-card p{
	font-size:14px;
	line-height:1.7;
	color:#555;
}

/* tablet */
@media only screen and (max-width:950px){
	.me_sec1-grid{
		grid-template-columns:repeat(2,1fr);
	}
}

/* SP */
@media only screen and (max-width:500px){
	.me_sec1-grid{
		grid-template-columns:1fr;
	}
}

/* ========================
me_sec2
======================== */

.me_sec2{
	padding:var(--v-space) 0;
	background:#fff;
}

.me_sec2-list{
	display:grid;
	gap:40px;
}

.me_sec2-item{
	display:grid;
	grid-template-columns:360px 1fr;
	gap:28px;
	align-items:center;
}

.me_sec2-img img{
	width:100%;
	object-fit:cover;
	border-radius:16px;
	aspect-ratio: 3 / 2;
}

.me_sec2-body h3{
	font-size:20px;
	color:var(--accent-color2);
	margin-bottom:6px;
}

.me_sec2-catch{
	color:var(--main-color);
	font-weight:700;
	margin-bottom:10px;
}

.me_sec2-body p{
	line-height:1.9;
}

/* responsive */

@media only screen and (max-width:768px){

	.me_sec2-item{
		grid-template-columns:1fr;
	}

	.me_sec2-list{
		display:grid;
		gap:80px;
	}
}

/*======= FAQ ======*/
.faq_sec1{
	padding: var(--v-space2) 0;
	background: #eaf5f3;
	position: relative;
}
/* 区切り用 ::before */
.faq_sec1::before {
	content: '';
	position: absolute;
	top: -110px;/* 上に重ねる高さに調整 */
	left: 0;
	right: 0;
	height: 110px;/* 高さを大きくして波を並々に */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z' fill='%23eaf5f3'/%3E%3Cpath d='M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3Cpath d='M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3C/svg%3E");	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 110px;

	z-index: 3;
	pointer-events: none;
}

/* 大画面対応 */
@media (min-width:2100px) {
	.faq_sec1::before {
		background-size: 100% calc(2vw + 133px);
	}
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
	.faq_sec1::before {
		height: 70px;/* 高さを低くする */
		top: -70px;/* topも同じ高さに合わせる */
		background-size: 100% 70px;/* 背景SVGのサイズも合わせる */
	}
}

.faq-item {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	column-gap: 10px;
	row-gap: 5px;
	background-color: #fff;
	padding: 25px 25px 15px 20px;
	margin: 0 0 17px 0;
	border-radius: 10px;
}

.faq-label {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5;
	border-radius: 3px;
	width: 1.5em;
	text-align: center;
	align-self: start;
	/* lavelを上揃えに */
}

.faq-label.q {
	background-color: var(--main-color);
}

.faq-label.a {
	background-color: var(--accent-color1);
}

.faq-question,
.faq-answer {
	margin: 0;
	line-height: 1.6;
	text-align: justify;
}

.faq-question {
	font-weight: bold;
}

hr.faqHr {
	margin-top: 15px;
	margin-bottom: 15px;
	border-top: 1px solid #e9e9e9;
}

/*======= 会社案内ページ ======*/
/*会社案内*/
.info_sec1{
	padding: var(--v-space2) 0;
	background: #eaf5f3;
	position: relative;
}
/* 区切り用 ::before */
.info_sec1::before {
	content: '';
	position: absolute;
	top: -110px;/* 上に重ねる高さに調整 */
	left: 0;
	right: 0;
	height: 110px;/* 高さを大きくして波を並々に */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z' fill='%23eaf5f3'/%3E%3Cpath d='M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3Cpath d='M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z' opacity='.5' fill='%23eaf5f3'/%3E%3C/svg%3E");	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 110px;

	z-index: 3;
	pointer-events: none;
}

/* 大画面対応 */
@media (min-width:2100px) {
	.info_sec1::before {
		background-size: 100% calc(2vw + 133px);
	}
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
	.info_sec1::before {
		height: 70px;/* 高さを低くする */
		top: -70px;/* topも同じ高さに合わせる */
		background-size: 100% 70px;/* 背景SVGのサイズも合わせる */
	}
}


.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 {
	display: inline-flex;
	align-items: center;
	gap: 12px;           /* ← これが欲しかったやつ */
}

/* 左の肉球 */
.label-square::before {
	content: "";
	width: 25px;
	height: 25px;
	background-image: url("../icon/icon_paw.svg");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.access_sec1{
	padding: var(--v-space) 0;
	background-color: #fff;

	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}
/* アクセス部分のテーブル */
.access1 {
	font-weight: bold;
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 5.25em;
}
.access2 {
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 400px;
}
@media screen and (max-width: 568px) {
	.access1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	.access2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
}