/*
Theme Name: Taniguchi Clinic
Theme URI: https://example.com/
Author: あなたの名前
Author URI: https://example.com/
Description: 谷口クリニックのオリジナルテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taniguchi-clinic
*/

/* ↓必要ならここで共通CSSを書くこともできます */

:root {
	--wide-width: 1200px;
	--thin-width: 900px;
}

html {
	margin-top: 0px !important;
}

p{
	font-size: 14px;
}


@media screen and (max-width: 980px) {
	.br-pc {
		display: none !important;
	}

	.br-sp {
		display: block !important;
	}
	h1 {
		font-size: min(11vw, 120px)!important;
		margin-bottom: auto;
		text-align: left;
	}

}
.br-pc {
	display: block;
}
.br-sp {
	display: none;
}

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.container {
	margin: 0 auto;
	width: 90%;
	box-sizing: border-box;
}
@media screen and (max-width: 980px) {

	.container {
		width: 100%;
	}

}

.icon {
	margin-right: 8px;
	font-size: 18px;
}

h1 {
	font-size: 4vw;
	color: #fff;
	margin-bottom: 40px;
	text-align: left;
	font-family: hiragino-mincho-pron, sans-serif;
	font-weight: 600;
	font-style: normal;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* --- ボタン共通 --- */
.web {
	background-color: #fff;
	color: #68B4B3;
	border: 1px solid transparent;
	border-radius: 8px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.3s ease;
	text-decoration: none;
}

/* ホバー時に色反転 */
.web:hover {
	background-color: #fff;
	color: #68b4b3;
	border: 1px solid #96D0C0;
}


/* --- header --- */
.header {
	position: absolute;
	top: 30px;
	left: 30px;
}

#header .logo-box {
	display: block;
	z-index: 1000;
}

.logo {
	font-size: 24px;
	font-weight: bold;
}

.logo-sp {
	display: none;
}

.logo-pc {
	display: block;
}

.site-header {
	position: relative;
	left: 0;
	z-index: 10;
	max-width: -webkit-fill-available;
	width: 100%;
}

.logo-box {
	width: 160px;
	height: auto;
	position: absolute;
}

.site-logo {
	width: 100%;
	height: auto;
}

/* --- Navigation --- */
.nav-links {
	background: #fff;
	padding: 0px;
	position: relative;
}

.nav-links ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: baseline;
	position: relative;
}

.nav-links li {
	margin: 0 24px;
	padding: 4vh 0px;
	color: #646868;
	font-family: 'hiragino-kaku-gothic-pron', sans-serif;
	font-weight: 600;
	font-style: normal;
}

.nav-links a {
	text-decoration: none;
	gap: 16px;
	color: #646868;
	font-size: 14px;
	font-family: 'hiragino-kaku-gothic-pron', sans-serif;
	font-weight: 600;
	font-style: normal;
}

.organ-item-origin {
	gap: 0 !important;
}

.nav-links a:hover {
	border: 1px solid #A5D7CA;
	transition: all 0.3s ease;
}

/* --- サブメニュー全体をホバー対象に含める --- */
.has-submenu:hover .header-organ-submenu,
.header-organ-submenu:hover {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* グリッドレイアウト */
.header-organ-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 0 auto;
	padding: 10px 22vw;
	text-align: center;
	justify-content: center;
}

.header-search-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 auto;
	padding: 10px 25vw;
	text-align: center;
	justify-content: center;
}

/* サブメニュー本体 */
.header-organ-submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #eaf7f5;
	z-index: 999;
	padding: 24px 0;
	min-width: 100vw;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.header-search-submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #eaf7f5;
	z-index: 999;
	padding: 24px 0;
	min-width: 100vw;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: opacity 0.1s ease, visibility 0.1s ease;
}

/* メニュー項目 */
.header-organ-item {
	background: #fff;
	border-radius: 8px;
	padding: 40px 8px 25px;
	text-decoration: none;
	transition: transform 0.1s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #333;
}

.header-organ-item img {
	width: 45px;
	height: 40px;
	margin: 10px 0 10px;
	transition: transform 0.3s ease;
}

.header-organ-item:hover img {
	transform: scale(1.2);
}

.header-organ-item span {
	display: block;
	font-size: 14px;
	line-height: 1.4;
}

.global-nav li {
	display: inline-block;
	color: #646868;
	cursor: pointer;
	transition: color 0.1s ease;
	font-size: 14px;
}

.global-nav li:hover::after {
	width: 100%;
}

/* --- ハンバーガーメニュー（初期非表示）--- */
.hamburger {
	display: none;
}

/* --- PCナビゲーションリンク --- */
.nav-links-pc {
	display: flex;
}

.mobile-nav-sp {
	display: none;
}

@media screen and (max-width: 980px) {
	#header .logo-box {
		display: block;
		height: auto;
	}

	.site-logo {
		width: 100%;
		height: inherit;
	}

	.logo-sp {
		display: block;
	}

	.logo-pc {
		display: none;
	}

	.nav-links {
		display: none;
	}

	.hamburger {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 35px;
		height: 25px;
		cursor: pointer;
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 1100;
		position: fixed;
	}

	.hamburger span {
		height: 4px;
		background-color: #fff;
		border-radius: 2px;
		display: block;
		transition: all 0.2s ease;
		transform-origin: center;
	}

	.hamburger.active span:nth-child(1) {
		transform: rotate(45deg) translate(25px, 25px);
		background-color: #646868;
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
		background-color: #646868;
	}

	.hamburger.active span:nth-child(3) {
		transform: rotate(-45deg) translate(-11px, 9px);
		background-color: #646868;
	}

	.hamburger.active {
		top: 0px;
		right: 20px;
	}

	.mobile-nav-sp {
		display: block;
		width: -webkit-fill-available;
		height: 100%;
		background-color: #ecf8fd;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.mobile-nav-sp.active {
		opacity: 1;
		visibility: visible;
	}

	.mobile-nav-inner-sp {
		padding: 50px 36px;
		background: #ECF8FD;
	}

	.mobile-navin-logo {
		width: 100%;
		background:
			#fff;
	}

	.mobile-nav-logo-sp {
		width: 40%;
	}

	.mobile-nav-menu-sp {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.menu-section-sp {
		background-color: #fff;
		border:
			1px solid #d9e7e7;
		border-radius:
			8px;
		margin-bottom: 5px;
		overflow:
			hidden;
	}

	.accordion-body-sp {
		display: none;
		background-color: #fff;
		padding: 10px 16px;
		font-size: 27px;
		color: #646868;
		font-weight: 600;
		padding: 15px 70px;
	}

	/* 表示切替用 */
	.accordion-body-sp.open {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 12px 16px 20px;
		background: #fff;
	}

	.accordion-icon-sp {
		width: 30px;
		height: 30px;
		position: relative;
		display: block;
	}

	.accordion-icon-sp .line-sp {
		position: absolute;
		background-color: #696d6d;
		border-radius:
			1px;
		display: block;
	}

	.accordion-icon-sp .vertical-sp {
		width: 2px;
		height: 100%;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}

	.accordion-icon-sp .horizontal-sp {
		height: 2px;
		width: 100%;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}

	.accordion-icon-sp.active .vertical-sp {
		display: none;
	}

	.tel-text-sp {
		font-size: 14px;
		color: #444;
	}

	.tel-number-sp {
		font-weight: bold;
		color: #00a2a8;
	}

	.btn-sp.web-btn-sp {
		background-color: #fff;
		border: 1px solid #00a2a8;
		border-radius: 8px;
		padding: 8px 12px;
		font-size: 14px;
		font-weight: bold;
		display: flex;
		align-items: center;
		color: #00a2a8;
		text-decoration: none;
	}

	.btn-sp .icon-sp {
		margin-right: 6px;
	}

	.btn-sp .icon-sp img {
		width: 18px;
		height: 18px;
	}

	.organ-grid-menu-sp {
		display: none;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding: 16px;
		background: #ECF8FD;
	}

	.organ-grid-menu-sp {
		display: none;
	}

	.organ-item-sp {
		background-color: #fff;
		border-radius: 8px;
		padding: 36px 12px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
		text-align: center;
		color: #646868;
		line-height: 1.6;
		font-family: 'hiragino-kaku-gothic-pron', sans-serif;
		font-weight: 400;
	}

	.organ-item-sp-origin {
		margin: 0px;
	}




	.organ-item-sp img {
		width: 70px;
		height: auto;
		display: block;
		margin: 0;
	}

	.accordion-header-sp {
		font-size: 22px;
		padding:
			16px 30px;
		font-weight: 600;
		color: #646868;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.accordion-icon-sp .line-sp {
		position: absolute;
		background-color: #696d6d;
		border-radius:
			1px;
		display: block;
	}

	.contact-sp {
		position: absolute;
		right: 0;
		text-align: right;
		display: flex;
		gap: 5px;
		width: 100%;
		background: #95D0C0;
		align-items: center;
		justify-content: center;
		bottom: auto;
	}

	.contact-sp p {
		background: #fff;
		padding: 24px 20px;
		border-radius: 8px;
		color: #6f7373;
		font-size: 38px;
	}

	.contact-sp a {
		text-decoration: none;
		color: #68b4b3;
		font-size: 40px;
		font-family: roboto, sans-serif;
		font-weight: 700;
		font-style: normal;
	}

	.contact-sp>.buttons-sp {
		display: flex;
		gap: 5px;
		justify-content: center;
		align-items: center;
		margin: 0;
	}

	.buttons-sp a {
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		font-size: 14px;
		font-family: hiragino-kaku-gothic-pron, sans-serif;
		font-weight: 600;
		font-style: normal;
		padding: 52px 20px;
	}

	.buttons-sp a {
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		font-size: 40px !important;
		font-family: hiragino-kaku-gothic-pron, sans-serif;
		font-weight: 600;
		padding: 54px 40px;
		font-style: normal;
	}

	.buttons-sp .btn .icon {
		width: 50px;
	}

	.buttons-sp .btn .icon img {
		width: 100%;
	}

	.recruit {
		display: none !important;
	}
}

/* ---END header --- */
/* top-page-st */
.hero {
	background-image: url("../../img-file/mv_background.png");
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 90vh;
	background-size: cover;
	background-position: center;
}


.overlay {
	width: 100%;
	padding-top: 0%;
	margin: auto;
	max-width: 1200px;
	transform: translateY(50%);
}
.features {
	display: flex;
	margin-bottom: 100px;
}

.feature {
	background: #e6f9f9;
	border-radius: 50%;
	width: 12vw;
	height: 12vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: inset 2px 2px 6px rgba(60, 60, 60, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
	margin-left: -10px;
	border: 0.8px solid #fff;
	gap: 10px;
}

.feature img {
	width: 4vw;
	height: 4vw;
}

.feature p {
	font-size: 1vw;
	color: #6f7373;
}

.feature span {
	color: #00b0b9;
	font-weight: bold;
}

/* 右下固定のTEL・ボタン */
/* --- Contact (右下固定) --- */
.contact {
	position: fixed;
	right: 0;
	bottom: 0;
	text-align: right;
	display: flex;
	width: 50%;
	border-radius: 8px;
	background: #96D0C0;
	padding: 0 10px;
	z-index: 1000;
}

.contact p {
	background: #fff;
	padding: 0.4vw 1vw;
	border-radius: 8px;
	color: #6f7373;
	font-size: 0.8vw;
	margin: 12px 0;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
}

.contact a {
	text-decoration: none;
	color: #68b4b3;
	font-size: 1.5vw;
}

.contact>.buttons {
	display: flex;
	gap: 5px;
	justify-content: flex-start;
	align-items: center;
	margin: 0;
	width: 100%;
}

.buttons a {
	display: flex;
	justify-content: center;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 600;
	font-style: normal;
	background: #fff;
	border-radius:8px;
}

.buttons .btn {
	padding: 0.6vw 0.1vw;
}

.recruit {
	font-size: 1vw !important;
	width: 12% !important;
}
.web:hover,
.recruit:hover {
	opacity: 1;
}

/* --- Hero内ボタン配置 --- */
.hero>.overlay>.buttons {
	position: relative;
}

.clinic-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1000;
}

.contact-span-sp {
	display: block;
}

@media (min-width: 1800px) {
	.overlay {
		max-width: 1500px;
	}
}
@media screen and (max-width: 497px) {
	.hero {
		background-image: url("../../img-file/mv_sp_background.png");
		width: 100%;
		height: 80vh;
	}

	.feature p {
		font-size: 3vw;
		color: #6f7373;
	}

	.overlay {
		width: 90%;
		padding-top: 0;
		margin: auto;
		transform: translateY(25%);
	}


	h1 {
		font-size: 42px;
		margin-bottom: auto;
		text-align: left;
	}

	.features {
		justify-content: center;
		margin:
			160px auto 0;
	}

	.feature {
		width: 230px;
		height: 130px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	.feature img {
		width: 50px;
		height: 50px;
	}

	feature p {
		font-size: 12px;
	}
}

/* スマホ対応：iPhone 14 Proサイズ以下 */
@media screen and (max-width: 430px) {
	.contact {
		width: 100%;
		bottom: 0;
		left: 0;
		right: 0;
		padding:
			10px 8px;
		border-radius:
			0;
		flex-direction: column;
	}

	.contact>.buttons {
		flex-direction: row;
		flex-wrap: nowrap;
		gap:
			3px;
		width: 100%;
	}

	.contact p {
		width: 80%;
		font-size: 3.5vw;
		padding: 6px;
		margin: 10px 0;
		align-items: center;
		font-family: roboto-mono, monospace;
		font-weight: 700;
		font-style: normal;
		gap: 1vw;
	}

	.buttons a {
		width: auto;
		padding: 0;
		font-size: 5vw !important;
	}

	.buttons .icon img {
		width: 22px;
		height: 18px;
	}

	.buttons .web {
		padding: 15px 0;
		font-size: 2.6vw !important;
		gap: 0.5vw;
	}
	.contact-span-sp {
		text-align: justify;
		display: block;
		font-family: roboto-mono, monospace;
		font-weight: 700;
		font-style: normal;
	}
}

/* END top-page-st */
/*Clinic-Features-st*/
.clinic-tetra {
	overflow: hidden;
	/* 枠外にはみ出しても隠す */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 画像をエリアいっぱいに自然に伸ばす */
	z-index: -1;
	/* 背景に回す */
}

.clinic-features {
	width: 70%;
	padding: 80px 30px;
	box-sizing: border-box;
	position: relative;
	margin: auto;
}

.clinic-features img {
	position: absolute;
	width: 50%;
	top: -150px;
	z-index: -100;
	right: -200px;
}

.clinic-content {
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}

.clinic-title, .treatments-title {
	font-size: min(8vw, 160px);
	color: #d8ebed;
	line-height: 1;
	margin: 0;
	flex-shrink: 0;
	font-family: garamond-premier-pro, serif;
	font-weight: 700;
	font-style: normal;
}

h3 {
    font-size: min(1.8vw, 40px);
	color: #646868;
	margin: 0 0 20px 0px;
	font-family: hiragino-mincho-pron, sans-serif;
	font-weight: 300;
	font-style: normal;
}


.clinic-sub {
	display: flex;
	width: 100%;
	margin: 0 0 0 10vw;
	gap: 200px;
}

.description {
	font-size: 16px;
	color: #646868;
	line-height: 2;
	width: 60%;
}
.description p {
	margin: 0 0 20px;
}
.clinic-sub>h3 {
   font-size: min(1.8vw, 40px);
}
@media screen and (min-width: 1500px) {
	.clinic-content {
		max-width: 1300px;
		font-size: min(2vw, 42px);
	}
}
/* SP Clinic-Features-st*/
@media screen and (max-width: 980px) {
	.description {
		margin: 0;
		width: 100%;
	}
	.clinic-title, .treatments-title {
		font-size: min(14vw, 60px);
	}
	.clinic-sub {
		display: flex;
		width: 100%;
		margin: 0;
		justify-content: space-around;
		gap: 10px;
		flex-direction: column;
	}
	.clinic-sub>h3 {
		font-size: min(6vw, 25px);
	}

    .clinic-features {
        width: 90%;
        padding: 80px 0;
        box-sizing: border-box;
        position: relative;
        margin: auto;
        max-width: 1100px;
    }
	h3 {
		font-size: 4vw;
		color: #646868;
	}
	.clinic-features img {
		position: absolute;
		width: 50%;
		top: -60px;
		z-index: -100;
		right: -50px;
	}
	.clinic-content {
		max-width: 1200px;
		margin: 0 auto;
		width: 100%;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

}

/* END SP Clinic-Features-st*/
/* END Clinic-Features-st*/
/* clinic-element-st */
.clinic-element {
	position: relative;
	overflow: hidden;
}

.clinic-element-bg {
	position: absolute;
	top: 0%;
	transform: translate(-30%, 0);
	z-index: -1;
	width: 300vw;
	height: auto;
	pointer-events: none;
}

.clinic-element-bg img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width: 980px) {
    .clinic-element-bg {
        top: 0%;
        left: -120%;
        width: 1500vw;
        height: auto;
        overflow: hidden;
    }
}


/* END clinic-element-st */
/* clinic-info-st */
.clinic-info {
	transform: scale(1);
	transform-origin: top center;
	padding: 150px 0;
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
	color: #6f7373;
	width: 70%;
	margin: auto;
}

.clinic-info-content {
	margin: 0 auto;
	display: flex;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	gap: 30px;
	justify-content: space-between;
	padding: 30px 60px;
}
.schedule {
	width: 50%;
	font-size: 14px;
}

.schedule table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	font-size: max(0.8vw, 12px);
}

.schedule th, .schedule td {
	text-align: center;
	padding: 10px;
	color: #707070;
}

.business {
	color: #68B4B3 !important;
}

.schedule th:first-child, .schedule td:first-child {
	text-align: center;
	padding: 15px 0px;
	width: 25%;
	font-weight: 600;
	color: #707070;
}

.schedule td:first-child {
	font-family: roboto, sans-serif;
	font-weight: 500;
	font-style: normal;
}

.schedule th {
	border-bottom: 2px solid #7ab8b1;
	font-weight: 600;
}

.schedule tbody tr {
	border-bottom: 1px solid #94D0BF;
}

.note {
	font-size: min(0.8vw, 16px);
	color: #6f7373;
	font-weight: 600;
	margin: 20px 0 0;
}

.clinic-details {
	width: 45%;
	padding-left: 20px;
}

.clinic-header {
	display: flex;
	gap: 4vw;
	align-items: flex-end;
}

.clinic-details .map {
	width: 40%;
	color: #97cbca;
	padding: 0;
	text-decoration: underline;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: min(0.8vw, 16px);
}


.clinic-header img {
	width: 15%;
	height: 80%;
}

.contact-box {
	width: 100%;
}

.contact-box-p {
	border-radius: 6px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	width: 100%;
	margin: auto;
}

.contact-box a {
	text-decoration: none;
	color: #488864;
	font-size: min(1.8vw,32px);
	font-family: roboto, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.web {
	font-size: 1vw !important;
}

.tel {
	text-align: center;
	font-weight: bold;
}

.tel span {
	font-size: 20px;
	color: #488864;
	margin: 0 5px;
}

.buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 10px;
}

.contact-box .btn {
	display: flex;
	align-items: center;
	padding: 1vw 3vw;
	border: 2px solid #7ab8b1;
	border-radius: 6px;
	background-color: #fff;
	color: #488864;
	text-decoration: none;
	font-weight: bold;
	width: 100%;
	justify-content: center;
}

.btn .icon {
	margin-right: 5px;
}

.line {
	margin-right: 5px;
	width: 16%;
}

.line img {
	width: 100%;
}

.clinic-details h2 {
	font-size: min(1.8vw, 60px);
	color: #488864;
	margin: 0 0 10px;
	font-family: hiragino-mincho-pron, sans-serif;
	font-weight: 600;
	font-style: normal;
	display: flex;
	align-items: center;
	gap: 0.4vw;
}

.clinic-details h2 span {
	font-size: min(0.8vw, 22px);
	color: #646868;
	padding: 0;

}

.clinic-details p {
	font-size: min(0.7vw, 20px);
	line-height: 1.8;
	color: #646868;
	font-family: roboto, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.contact-box>.buttons>.web {
	font-size: 1.4vw !important;
	width: 50% !important;
}

.reservation-notice {
	text-align: center;
	font-size: 26px !important;
	margin-top: 60px;
	font-family: hiragino-mincho-pron, sans-serif;
	font-weight: 300;
	font-style: normal;
	position: relative;
}
.reservation-notice span {
	font-size: min(2vw, 60px);
	font-weight: bold;
	letter-spacing: 3px;
	margin: 0px 0px 0 0px;
}


.reservation-notice .dots span {
	font-size: min(1.4vw, 30px);
	font-weight: bold;
	letter-spacing: -10px;
	margin: -6px 20px 0 0;
}
.highlight {
	position: relative;
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 3px;
	margin: 0 6px;
}

.dots {
	position: absolute;
	top: -15px;
	left: 54%;
	transform: translateX(-52%);
	display: flex
		;
	gap: 0;
}

.dots span {
	font-size: 30px;
	color: #7ab8b1;
}

.dots span {
	font-size: 30px;
	color: #7ab8b1;
	margin: 0px 20px 0 0px;
}

.contact-box-inner {
	border: 2px solid #7ab8b1;
	border-radius: 6px;
	padding: 10px;
	text-align: center;
	margin: 50px 0 0;
}

@media (min-width: 1800px) {

	.clinic-info-content {
		padding: 100px 50px;
	}

	.clinic-details h2 {
		font-size: min(2vw, 60px);
	}

}
/* SP Clinic-info-st */
@media screen and (max-width: 980px) {
	.note {
		font-size: 10px;
		margin: 0 0;
	}

	.clinic-info {
		padding: 30px 10px;
		transform: scale(1);
		max-width: 1100px;
		margin: auto;
		width: 100%;
	}

	.clinic-info-content {
		flex-direction: column;
		padding: 40px 30px;
		gap: 0;
	}

	.schedule,
	.clinic-details {
		width: 100%;
		padding: 0;
	}

	.clinic-details {
		margin-top: 20px;
	}

	.contact-box-p {
		border-radius:
			6px;
		display: flex;
		justify-content: center;
		width: 100%;
		margin:
			0 auto 0;
		padding:
			0px 0;
		align-items: baseline;
		gap:
			5px;
	}

	.contact-box-p a {
		font-size: 4.8vw;
		font-family: roboto, sans-serif;
		font-weight: 700;
		color: #488864;
		margin-top: 5px;
		text-decoration: none;
	}

	.contact-box-inner {
		margin: 10px 0 0px;
	}

	.contact-box .btn {
		width: 100%;
		font-size: 16px;
		padding: 10px 0;
	}

	.contact-box>.buttons>.web {
		font-size: 4vw !important;
		width: 50% !important;
	}


	.clinic-details h2 {
		font-size: 4.4vw;
		text-align: center;
		justify-content: space-between;
	}
	.clinic-details h2 span {
		display: block;
		font-size: 12px;
		text-align: center;
	}

	.clinic-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0;
	}

	.clinic-details p {
		font-size: 2.6vw;

	}

	.clinic-details .map {
		padding: 0;
		font-size: 2.8vw;
		width: 45%;
	}

	.reservation-notice {
		font-size: 14px !important;
		margin-top: inherit;
	}

	.reservation-notice span {
		font-size: 28px;
		font-weight: bold;
		letter-spacing: 5px;
		margin:
			0px 10px 0 10px;
	}
	.reservation-notice .dots span {
		font-size: 24px;
		font-weight: bold;
		letter-spacing: normal;
		margin: -5px 9px 0 0px;
	}



	.dots {
		position: absolute;
		top: -15px;
		left: 45%;
		transform: translateX(-50%);
		display: flex;
		gap:
			0;
	}

	.highlight {
		font-size: 20px;
	}

	.dots span {
		font-size: 29px;
	}

	.schedule table {
		font-size: 2.9vw;
		margin-bottom: 10px;
	}

	.schedule th,
	.schedule td {
		padding: 6px;
	}

	.contact-box>.buttons>a {
		font-size: 6vw !important;
	}

	.line {
		width: 25%;
	}

	.buttons .line img {
		width: 25px;
		height: 25px;
	}

	.btn .icon {
		margin-right: 0px;
	}
}

/* END SP Clinic-info-st */
/* END Clinic-info-st */
/* clinic-treatments-st */
.treatment-section {
	padding: 120px 0 0;
	text-align: center;
	position: relative;
	width: 70%;
	margin: auto;
}
.treatments-content {
	width: 100%;
	margin: 0 auto;
}

.treatments-title {
	color: #cfe3e6;
	line-height: 0.7;
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.treatments-title .tre-sta {
	text-align: left;
	font-size: min(7.1vw, 140px);
}

.treatments-title .amp {
	display: block;
	font-size: min(7vw, 120px);
	margin: 10px 0;
	width: 105%;
}

.treatments-title .tre-end {
	text-align: right;
	width: 110%;
	font-size: min(7vw, 150px);
}

.treatments-content .jp-subtitle {
	font-size: 1.8vw;
	color: #6f7373;
	font-family: hiragino-mincho-pron, sans-serif;
	font-weight: 300;
	font-style: normal;
	position: absolute;
	bottom: 0;
	left: 80px;
}

/* スマホ表示 */
@media screen and (max-width: 600px) {
	.treatment-section {
		padding: 60px 0 0;
		width: 1000px;
	}

	.treatments-title {
		font-size: min(12vw, 60px);
	}

	.treatments-title .tre-sta {
		/*font-size: 9.5vw;*/
		font-size: min(12vw, 60px);

	}

	.treatments-title .amp {
		font-size: min(12vw, 60px);
		width: 35%;
	}

	.treatments-title .tre-end {
		width: 38%;
		font-size: min(12vw, 60px);
	}


	.treatments-content .jp-subtitle {
		left: 20px;
		bottom: -50px;
		font-size: min(6vw, 25px);
	}
	.card-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
		margin: 0;
	}

	.small-card-box .medium-card img {
		width: 100%;
		border-radius: 8px;
		margin: 36px auto;
		max-width: 500px;
	}

	.small-card-box .detail-button {
		padding: 8px 20px;
		font-size: 13px;
		width: 80%;
		margin: auto;
	}

	.treatments-content {
		max-width: 1200px;
		width: 100%;
		margin:
			0 auto;
		padding:
			0 20px;
	}
}

/* END Clinic-Treatmentso-st */
/* clinic-card-st */
.treatment-cards {
	padding: 60px 0 120px;
	transform: scale(0.9);
}


.card-container {
	max-width: 1250px;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 0;
	margin: auto;
}

/* 上段・下段の行 */
.card-row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	flex-direction: row;
	position: relative;
}

.revised-bottom-row .card p {
	margin: 20px 0 16px;
}

.small-card-box {
	display: flex;
	flex: 0 1 50%;
	flex-direction: row;
}

.small-card-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
}

.revised-bottom-row .medium-card {
	flex: 0 0 50%;
}

.small-row .card {
	flex: 1 1 33%;
}

/* カード共通 */
.card {
	background: #fff;
	padding: 30px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-row .card {
	flex: 0 1 50%;
}

/* サイズごとに画像調整 */
.large-card img {
	width: 100%;
	height: auto;
	margin-bottom: 12px;
}

.small-card img {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}

/* カードの中身 */
.card h3 {
	font-size: 24px;
	color: #ffffff;
	position: absolute;
	margin: 10px 0 20px 10px !important;
	font-family: hiragino-kaku-gothic-pron, sans-serif !important;
	font-weight: 600;
	font-style: normal;
}

.card p {
	font-size: min(1vw, 18px);
	color: #646868;
	margin: 10px 0 16px;
}
.detail-button {
	padding: 8px 16px;
	border: 1px solid #7ab9a8;
	color: #646868;
	background: transparent;
	border-radius: 24px;
	text-decoration: none;
	font-size: 20px;
	text-align: center;
	transition: 0.3s;
}

.detail-button:hover {
	background: #94D0BF;
	color: #fff;
	border: 1px solid #94D0BF;
}

/* その他の検査カード（リスト型） */
.list-card {
	padding: 24px 16px;
}

/* 下段用の新しい行スタイル */
.revised-bottom-row .small-card {
	flex: 0 0 50%;
}

.revised-bottom-row .medium-card {
	flex: 0 0 48%;
}

/* mediumカード */
.medium-card h3 {
	font-size: 24px;
	font-weight: 600;
	color: #646868;
	position: relative;
	margin: 0 !important;
}

.medium-card img {
	width: 100%;
	max-width: 320px;
	border-radius: 12px;
	margin-bottom: 20px;
}

.revised-bottom-row .list-card {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 16px;
}

/* リスト見た目 */
.card-last ul {
	list-style: none;
	padding-left: 0;
	margin-top: 12px;
}

.card-last ul li {
	display: flex;
	align-items: center;
	font-size: min(1vw, 18px);
	color: #6f7373;
	padding: 10px 0;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 400;
	font-style: normal;
	position: relative;
}

.card-last ul li ::after {
	content: "";
	position: absolute;
	left: 1vw;
	bottom: 0;
	width: 85%;
	height: 1px;
	background-color: #68B4B3;
}

.list-card ul li::before {
	color: #1eaba2;
	font-size: 16px;
	position: absolute;
	left: 0;
	top: 0px;
}

.card-last h3 {
	font-size: 24px;
	color: #6f7373;
	position: absolute;
	margin: 0px 0px 20px 20px !important;
	font-family: hiragino-kaku-gothic-pron, sans-serif !important;
	font-weight: 600;
	font-style: normal;
	top: 20px;
}

.icon-box {
	width: 10px;
	height: 10px;
	background-color: #61c1bc;
	border-radius: 2px;
	margin-right: 10px;
	flex-shrink: 0;
}

@media (min-width: 1800px) {
	.card-container {
		max-width: 1400px;
	}
}
/* SP Clinic-card-st*/
@media screen and (max-width: 980px) {
	.card-container {
		max-width: 1100px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
		margin: auto;
	}

	.treatment-cards {
		transform: scale(1);
		padding: 90px 20px 10px;
	}

	.card-row {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 100%;
		align-items: center;
		margin-bottom: auto;
	}

	.card {
		width: 100%;
		max-width: -webkit-fill-available;
		padding: 20px;
		border-radius: 16px;
		background-color: #fff;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.card img {
		width: 100%;
		height: auto;
		border-radius: 12px;
		margin-bottom: 12px;
	}

	.card h3 {
		font-size: min(5vw,20px);
	}

	.card p {
		font-size: 16px;
		color: #6f7373;
		margin-bottom: 14px;
		text-align: justify;
	}

	.detail-button {
		display: inline-block;
		padding: 4px 0px;
		border: 1.5px solid #7ab8b1;
		color: #488864;
		border-radius: 30px;
		font-size: 14px;
		text-decoration: none;
	}
	.revised-bottom-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
		margin-top: 0;
		margin-bottom: 0;
	}

	.small-card-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: space-between;
		gap: 5px;
	}

	.small-card img {
		border-radius: 8px;
		margin-bottom: 16px;
	}

	.small-card p {
		font-size: 14px;
		color: #6f7373;
		margin-bottom: 14px;
	}

	.small-card .detail-button {
		margin-top: 10px;
	}

	.small-card ul {
		padding-left: 0;
		list-style: none;
		text-align: left;
		margin: 0;
	}

	.card-last ul li ::after {
		content: "";
		display: none;
	}


	.small-card ul li .icon-box {
		position: absolute;
		width: 10px;
		height: 10px;
		background-color: #7ab8b1;
		border-radius: 2px;
	}

	.small-card-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
	}

	.small-card-box .card {
		flex: 0 0 98%;
		padding: 16px;
		box-sizing: border-box;
		height: auto;
	}

	.small-card-box .card h3 {
		font-size: min(5vw,20px);
		text-align: left;
		top: 0;
	}

	.small-card-box .medium-card img {
		width: 100%;
		border-radius: 8px;
		margin: 16px auto;
		max-width: 500px;
	}

	.small-card-box .card ul {
		text-align: left;
		padding-left: 0;
		list-style: none;
		margin: 0;
	}


	.small-card-box .card ul li {
		font-size: 3.5vw;
		margin-bottom: 0px;
	}

	.small-card ul li {
		position: relative;
		margin-bottom: 10px;
		font-size: 14px;
		color: #646868;
		padding-bottom: 6px;
		align-items: center;
	}

	.icon-box-inline::before {
		content: "";
		border: 1px solid #cfe3e6;
		width: 85%;
		left: 11vw;
	}


	.icon-box-top::before {
		content: "";
		border: 1px solid #cfe3e6;
		width: 75%;
		left: 7vw !important;
		top: 10vw !important;
	}
	.icon-box-bottom::before {
		content: "";
		border: 1px solid #cfe3e6;
		width: 85%;
		left: 10vw;
	}

	.list-card ul li::before {
		width: 75%;
		color: #1eaba2;
		font-size: 16px;
		position: absolute;
		left: 7vw;
		top: 9vw;
	}


	.small-card-box .card ul li .icon-box {
		position: relative;
		width: 14px;
		height: 14px;
		background-color: #7ab8b1;
		border-radius: 2px;
	}

	.small-card-box .detail-button {
		padding: 4px 0;
		font-size: 14px;
		width: auto;
		margin: 0;
	}

	.card-last h3 {
		font-size: 20px;
		font-weight: 600;
		color: #646868;
		position: relative;
		margin: 0 !important;
	}
}

/* END Clinic-card-st*/
/* Clinic-organ-st */
/* organ-section */
.organ-section {
	background: linear-gradient(to bottom, #e2f9ff, #95e5e3, #f2f9fb, #fff);
	position: relative;
	opacity: 0.9;
	padding: 100px 0;
	overflow: hidden;
}

.organ-title-jp {
	font-size: min(8vw, 160px);
	font-family: garamond-premier-pro, serif;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
}

.organ-sub {
	display: flex;
	width: 100%;
	padding: 0;
	align-items: baseline;
	margin: 0 auto;
	justify-content: center;
	gap: 60px;
}

.organ-jp-title {
	font-size: 1.8vw;
	color: #646868;
	font-family: hiragino-mincho-pron, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.organ-sub p {
	margin: 0 !important;
	color: #68b4b3;
	white-space: nowrap;
	opacity: 0.4;
}

/* グリッド：上段は3列、下段は5列 */
.organ-grid {
	display: grid;
	gap: 8px;
	max-width: 1250px;
	width: 100%;
	margin: 0 auto 8px;
}
.top-grid {
	grid-template-columns: repeat(3, 1fr);
}

.bottom-grid {
	grid-template-columns: repeat(5, 1fr);
}

/* カード共通 */
.organ-card {
	background: #fff;
	border-radius: 12px;
	padding: 24px 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	text-align: center;
	transition: all 0.1s ease;
}

.organ-card:hover .organ-icon img {
	transform: scale(1.2);
	transition: transform 0.1s ease;
}

.organ-icon {
	background: radial-gradient(circle, #d9f1f3 40%, transparent 41%);
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin: 35px auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.organ-origin {
	margin: 10px auto 16px;
}

.organ-icon img {
	max-width: 8vw;
	max-height: 8vh;
	transition: transform 0.1s ease;
	/* 通常時もスムーズに戻す */
}

.bottom-grid .organ-card h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 12px;
	color: #696969;
}

.organ-card p {
	font-size: 15px;
	line-height: 1.6;
	color: #696969;
}

.bottom-grid>.organ-card>h3 {
	margin: 0;
}

.top-grid>.organ-card>h3 {
	position: absolute;
	margin: 6px !important;
	color: #696969;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 600;
	font-size: 1.1vw;
	font-style: normal;
}

.organ-card h3 {
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 600;
	font-size: min(4vw, 20px);
	font-style: normal;
}

.organ-fail {
	display: flex;
	margin: 40px 20px 0;
	gap: 18px;
	text-align: justify;
	align-items: center;
}

.bottom-grid .card img {
	width: 80px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.organ-img {
	height: 100vh;
	display: block;
	position: absolute;
	z-index: -200;
	top: 0px;
	opacity: 0.3;
	object-fit: cover;
	width: 100%;
}

.organ-container {
	max-width: 1110px;
	width: 100%;
	margin: 0 auto;
}
.organ-flex{
	display: none;
}
@media (min-width: 1800px) {
	.organ-container {
		max-width: 1250px;
	}
}
@media screen and (max-width: 980px) {
	.organ-jp-title {
		margin: 0;
	}

	.organ-container {
		max-width: 100%;
		width: 100%;
		transform: scale(0.95);
		margin: auto;
	}

	.top-grid {
		grid-template-columns: repeat(2, 1fr);
		display: none!important;
	}
	.organ-flex{
		display: block;
		margin: auto;
	}
	.organ-card-sp {
		margin: auto;
		width: 60%;
	}

	.organ-flex-box {
		display: flex;
		margin: 5px 0;
		gap: 5px;
	}
	.organ-grid {
		display: grid;
		gap: 8px;
		max-width: 100%;
		width: 100%;
		margin: 0 auto 8px;
		justify-content: center;
	}
	.organ-card-second {
		gap: 26px;
	}
	.organ-card {
		padding: 10px 6px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.organ-card-sp {
		padding: 10px 6px;
		width: 100%;
	}
	.organ-section {
		padding: 40px 0;
		height: auto;
	}


	.organ-sub {
		padding: 40px 0 0;
		width: 90%;
		gap: 0px;
		flex-direction: column-reverse;
	}

	.organ-icon {
		margin: 10px auto 0px;
		width: 40%;
		height: auto;
	}
	.organ-icon img {
		max-width: 35vw;
		width: 80%;
		max-height: 30vh;
	}
	.organ-card p {
		font-size: 16px;
		line-height: 1.6;
		color: #696969;
	}
	.top-grid>.organ-card>h3 {
		font-size: 16px;
		font-style: normal;
		margin: 6px 20px !important;
		width: 35%;
	}

	.bottom-grid>.organ-card>h3 {
		font-size: 4vw;
		font-style: normal;
	}


	.bottom-grid>.organ-card>.organ-icon {
		width: 30%;
		margin: 20px auto 20px;
	}

	.bottom-grid>.organ-card>.organ-icon img {
		max-width: 33vw;
		width: 100%;
	}


	.organ-jp-title {
		font-size: min(6vw, 25px);
	}
	.organ-title-jp {
		font-size: min(14vw, 60px);
		font-family: garamond-premier-pro, serif;
		font-weight: 700;
		font-style: normal;
	}

	.bottom-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.organ-origin {
		margin: 5px auto 16px !important;
		width: 25% !important;
	}

	.organ-fail {
		display: flex;
		margin: 10px 10px 0;
		gap: 18px;
		text-align: justify;
		align-items: center;
		flex-direction: column;
	}

	.organ-img {
		height: auto;
	}
}

/* END Sp Clinic-organ-st*/
/* END Clinic-organ-st*/