@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;-webkit-appearance: none;-webkit-text-size-adjust: 100%;}
*:before, *:after {box-sizing: border-box;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, p, blockquote, pre,em, img, strong,b,dl, dt, dd, ol, ul, li,fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td,canvas, details,figure,footer, header, hgroup, menu, nav, section, summary,mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align: baseline;background: transparent;font-weight: normal;font-style: normal;}
img{max-width: 100%;height:auto;vertical-align: middle;}
ul {list-style: none;}
ol {padding-left: 20px;}
a {color: #0075c1;vertical-align:baseline;background:transparent;text-decoration: none;}
a:hover{transition-property: all;transition: 0.2s linear;opacity: 0.6;}
a[href^="tel:"] {pointer-events: none;}
a.link{text-decoration:underline;}
a:visited{color: #4B0082;}
mark {background: linear-gradient(transparent 60%, #ff9 0%);color:#394044;font-weight:bold;}
table {border-collapse:collapse;border-spacing:0;}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}

/* 共通 */
body {min-width: 1280px;position: relative;margin:0 auto;font-feature-settings: "palt";font-family:'Alial','メイリオ', 'Meiryo','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif;color: #4d4d4d;line-height: 1.6;letter-spacing: 0.1rem;}
p.mb{margin-bottom: 1rem !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb60{margin-bottom: 60px !important;}
.mb80{margin-bottom: 80px !important;}
.fs18{font-size:1.125rem;}
.fs20{font-size:1.25rem;}
.fs22{font-size:1.375rem;}
.center,.center_l{text-align: center;}
.wb{font-weight: bold;}
.fcb{color:#0075c1 !important;}
.fcbl{color:#000 !important;}
.bgb{background-color: #e6f2f5;}
.bgg{background-color:#f4f2ef;}
.br{border-radius:15px;}
.border{text-decoration: underline;}
.inner-box{max-width: 1280px;width: 95% !important;margin: 0 auto;padding:80px 0;}
.flexbox{
	display: flex;
    flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
}
.c2 > *{width: 48.5%;}
.c3 > *{width: 32%;}
.c2 > *:not(:nth-last-child(-n+2)) {margin-bottom: 30px;}
.c3 > *:not(:nth-last-child(-n+3)) {margin-bottom: 30px;}
.sp_on,.tab_on{display: none;}


/* ヘッダー
------------------------------------------------------------*/
h1{font-size:.875rem;font-weight: normal;margin-left:4vw;padding:5px 0;}
header .header-box{
    width: 92%;
	margin: 0 auto 10px;
	flex-wrap: nowrap;
	align-items: center;
}
/* ナビゲーション
------------------------------------------------------------*/
/* pc-nav */
/*固定追従時CSS*/
.pc-nav .gnav.fixed ul{
	position:fixed;
	top:0;
	left:0;
	inset:0;
	margin: 0 auto;
	justify-content: center;
	background:rgba(255,255,255,0.9);
	height:60px;
	width:1000px;
	padding:20px;
	border:1px solid #0075c1;
	border-radius: 0 0 10px 10px;
	z-index: 999!important;
	animation: slideDownFade 0.4s ease-out;
}
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*----固定追従用ここまで*/
.pc-nav .gnav ul{display: flex;}
.pc-nav .gnav a{
	color:#000;
	padding-bottom: 1px;
	background-image: linear-gradient(#0075c1, #0075c1); text-decoration: none;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 0 1px;
	transition: background-size 0.3s;
}
.pc-nav .gnav > ul > li:not(:first-child){margin-left: 1.5vw;}
.pc-nav .gnav > ul > li:last-child{display:none;}
.pc-nav .gnav a.current{color: #0075c1;}
.pc-nav .gnav a:hover{
	color: #0075c1;
	opacity: 1.0;
	background-position: bottom left;
	background-size: 100% 1px;
}
/* ドロワー */
.hamburger-button,.hamburger-input,.hamburger-button {display: none;}

/* 共通　コンテンツ
------------------------------------------------------------*/
/*見出し*/
.ti2,.tiS{
	font-size:20px;
	border-bottom: 1px solid #0075c1;
	text-align: center;
	color: #000;
}
.ti2 span{
	display: flex;
    justify-content: center;
    align-items: center;
	padding-bottom: 10px;
}
.ti2 span::before{
	display:block;
	content:'';
	background-image:url(../images/h2.webp);
	background-size:contain;
	background-repeat: no-repeat;
	width:49px;
	height: 49px;
	margin-right:30px;
}
.ti2 span::after{
	display:block;
	content:'';
	background-image:url(../images/h2.webp);
	background-size:contain;
	background-repeat: no-repeat;
	width:49px;
	height: 49px;
	margin-left:30px;
	transform: scale(-1, 1);
}
.tiS::before{display: block; content: ""; width:10px; height: 10px; background-image:url("../images/h2.webp");background-size: contain; background-repeat: no-repeat;} 
.tiS.left{text-align: left;}
.tiS.left span{display: block;padding-left:30px;}
/* フッター
------------------------------------------------------------*/
footer{background-color:#e6f2f5;}
footer h2{font-size:20px;text-align:center;color:#000;}
footer h2::after{display: block;content:'';width:220px;margin:10px auto 0; border-bottom: 3px solid #0075c1;}
footer .flexbox > div:first-child{width:45%;}
footer img{max-width:600px;width:100%;display:block; height: auto; margin: auto;}
footer dl div{display:flex;padding:5px 0;}
footer dl dt:not(:last-child){width:6em;color:#0075c1;}
footer dl dt:last-child{max-width:320px; width:100%;margin:15px auto 0;}
footer dl.access{width:51%;background:#FFF;padding:20px;border-radius:15px;}
footer dl.access dt{width:10rem;}
footer dl.access dd{width:calc( 100% - 10rem);}
.map iframe{width:100%; border-radius: 15px;}
footer .copy{text-align:center;background:#0075c1;padding:15px 0;color:#FFF;}
#pagetop {
	position:fixed;
	bottom:50px;
	right:30px;
	opacity: 0;
	transition: 0.8s ease;
	transform: translateY(30px);
	pointer-events: none;
	z-index: 99!important;
}
#pagetop a:hover {opacity: 0.5;}
#pagetop.visible {
  opacity: 1;
  pointer-events: auto;
}
/* 1400px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
	img.logo,img.tel{width: 20vw;}
}
/* 1280px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1280px){
	body {min-width: 1230px!important;}
}
@media screen and (max-width: 1180px) {
	body {min-width: 1180px!important;}
	header .header-box{display:block;width:100%;}
	img.logo{width:300px !important;}
	img.tel{display:none;}
	/*固定追従のPC用ナビを消す*/
	.pc-nav .gnav.fixed ul{
		display:none;
		width:inherit;
	}
	.drawer .drawer-nav li{width:90%;border-bottom:1px dotted #ccc;}
	.drawer .drawer-nav a{display:block;text-align: center;padding:15px 0;}
	.drawer .gnav > ul > li:last-child{display:block; border:none;margin-top:20px;}
	.drawer{ position: relative;}
	.hamburger-input {display: none;}
	.drawer-bg {
		background-color: #000; /* カスタム */
		cursor: pointer;
		display: none;
		left: 0;
		opacity: 0.4; /* カスタム */
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	#hamburger:checked ~ .drawer-bg {display: block;}
	.hamburger-mark {
		background-color: #000; /* カスタム */
		display: block;
		height: 1px; /* カスタム */
		transition: 0.3s; /* カスタム */
		width: 30px; /* カスタム */
	}
	ul.drawer-nav {
		position: absolute;
		top:0;
		transform: translateY(-100%); /* 縦Y・横Xカスタム */
		width: 100%;
	}

	#hamburger:checked ~ ul.drawer-nav {
		position:fixed;
		top:0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content:center !important;
		height: 100%;
		background-color: #eeeeee; /* カスタム */
		transform: translateY(0%); /* 縦Y・横Xカスタム */
		transition: 0.5s;
		z-index: 998;
	}
	.hamburger-button {
		position: fixed;
		top:5px;
		right:5px;
		align-items: center;
		background-color: #ededed; /* カスタム */
		border: 1px solid #333; /* カスタム */
		border-radius: 3px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 7px; /* カスタム */
		height: 80px; /* カスタム */
		width: 80px; /* カスタム */
		z-index: 999;
	}
	#hamburger:checked	~ .hamburger-button	.hamburger-mark:nth-of-type(1) {transform:translate(4px, -3px) rotate(45deg); transform-origin: 0%;}
	#hamburger:checked ~ .hamburger-button .hamburger-mark:nth-of-type(2) {opacity: 0;}
	#hamburger:checked ~ .hamburger-button .hamburger-mark:nth-of-type(3) {transform:translate(4px, 3px) rotate(-45deg); transform-origin: 0%;}
}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	/* 共通 */
	.mb30{margin-bottom: 20px!important;}
	.mb60{margin-bottom: 30px !important;}
	.mb80{margin-bottom: 50px!important;}
	.fs18{font-size:1rem;}
	.fs20,.fs22,.ti2,footer h2{font-size:1.125rem;}
	.br{border-radius:10px;}
	.center_l{text-align: inherit;}
	.c2 > *{width: 100%;margin: 0;}
	.c2 > *:not(:last-child){margin-bottom: 30px;}
	.c3 > *{width: 48%;}
	.c3 > *:not(:nth-last-child(-n+2)) {margin-bottom: 30px;}
	.sp_non{display: none;}
	.inner-box{padding:50px 0;}
	/* ヘッダー
	--------------------------------------*/
	h1{font-size:0.875rem;margin-left:1.5vw;}
	header div{width:100%;}
	a[href^="tel:"] {pointer-events: auto;}
	img.logo{width:250px !important;}
	/* フッター
	--------------------------------------*/
	footer .flexbox > div{width:100% !important;}
	footer dl.access{width:100%;padding:15px;border-radius:10px;}
	footer dl div{display:block;padding:10px 0; }
	footer dl div:not(:last-child){border-bottom:1px dotted #ddd;}
	footer dl.access dt,footer dl.access dd{width:100%;}
	footer .ftel{margin-bottom:30px;}
	.map iframe{border-radius: 10px;}
	footer .copy{padding:10px 0;}
	.copy{font-size: 14px;}
	#pagetop {width: 50px;right:10px;bottom:50px;}
	
	/*見出し*/
	.ti2,.tiS{font-size:18px;}
	.ti2 span::before,.ti2 span::after{
		background-size:contain;
		background-repeat: no-repeat;
		width:15%;
		height: 49px;
	}
	.ti2 span::before{margin-right:15px;}
	.ti2 span::after{margin-left:15px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;color:#2d2d2d;}
	header .logo{width:50vw;height: auto;}
	h1{width:calc(100% - 54px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	/* 共通 */
	.c3 > *{width: 100%;margin: 0;}
	.c3 > *:not(:last-child){margin-bottom: 20px;}
	.hamburger-button {
		height: 52px; /* カスタム */
		width: 52px; /* カスタム */
	}
	/*見出し*/
	.ti2 br{display: none;}

}
@charset "utf-8";

/*メイン画像エリア*/
#main_area{position:relative;width:100%;}
#main_area img{
	display: block;
	width:100%;
	object-fit: contain !important;
}
#main_area p{
	white-space: nowrap;
	position: absolute;
	top:50%;
	left:10%;
	transform: translateY(-50%);
	font-size:min(1.3vw,38px);
	font-size:max(1.3vw,14px);
	letter-spacing: 0.2vw;
	font-weight: 500;
	color:#000;
}
#main_area p span{
	font-size:min(1.9vw,25px);
	font-size:max(1.9vw,18px);
	letter-spacing: 0.3vw;
	font-weight: 500;
	
}
/*お知らせ*/
.newswrap{align-items: center;}
.newstitle{width:250px;}
.newstitle a{display:block;background:#0075c1;color:#FFF;padding:5px;border-radius: 8px;}
.newstitle a span{display:block;border:1px solid #FFF;color:#FFF;padding:10px;border-radius: 5px;text-align: center;}
.news{width:calc(100% - 350px);}
.news li:not(:last-child){margin-bottom:1rem;}
.news li a{display: flex; background:#f0f7fb; border-radius:15px;align-items: center;padding:15px;color:#000;}
.news li a time{margin-right:20px;}
.news li a:hover {color:#0075c1;}

/*当院の特長*/
.feature li{flex-wrap:nowrap;background:#f4f2ef;padding:30px;border-radius: 15px;}
.feature h3{
	writing-mode: vertical-rl;
	padding-right:30px;
	color:#0075c1;
	margin:0 auto;
	
}
.feature p{width:430px;}
.feature p::before{
	display:block;
	content:'';
	height:166px;
	margin-bottom: 20px;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
}
.feature li:nth-child(1) p::before{background-image:url("../images/home/feature1.webp");}
.feature li:nth-child(2) p::before{background-image:url("../images/home/feature2.webp");}
.feature li:nth-child(3) p::before{background-image:url("../images/home/feature3.webp");}
.feature li:nth-child(4) p::before{background-image:url("../images/home/feature4.webp");}

/*診療案内*/
.guide li{padding:15px;border-radius:15px;align-items: stretch;}
.guide li:nth-child(odd){background-color:#f0f7fb;}
.guide li:nth-child(even){background-color:#f4f2ef;}
.guide li:last-child{background-color:#0075c1;}
.guide h3 a{display:flex;align-items: center; margin-bottom: 20px;color:#000;}
.guide h3 a::before{display:block; content:""; width:68px; height: 69px; margin-right:20px;background-size:contain;}
.guide h3 a::after{display:block; content:"≫"; margin-left:2rem;}
.guide li:nth-child(1) a::before{background-image:url("../images/home/guide1.webp");}
.guide li:nth-child(2) a::before{background-image:url("../images/home/guide2.webp");}
.guide li:nth-child(3) a::before{background-image:url("../images/home/guide3.webp");}
.guide li:nth-child(4) a::before{background-image:url("../images/home/guide4.webp");}
.guide li:nth-child(5) a::before{background-image:url("../images/home/guide5.webp");}
.guide li:nth-child(6) a::before{background-image:url("../images/home/guide6.webp");}
.guide li:nth-child(7) a::before{background-image:url("../images/home/guide7.webp");}
.guide li:nth-child(8) a::before{background-image:url("../images/home/guide8.webp");}
.guide li:nth-child(9) h3::before{background-image:url("../images/home/guide9.webp");display:block; content:""; width:68px; height: 69px; margin-right:20px;}
.guide li:last-child h3{color:#FFFFFF;line-height: 1.2;display:flex;align-items: center; margin-bottom: 20px;}
.guide li:last-child p{background-color:#FFFFFF;border-radius: 10px;padding:10px;}
/*左画像＋見出しコンテンツ*/
.imgboxL{align-items: center;}
.imgboxL img{max-width:400px; width:100%; height: auto;border-radius: 15px;}
.imgboxL div{width:calc(100% - 420px);padding:15px;}


/* レスポンシブ
------------------------------------------------------------*/

/* 1280px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1280px){
	body {min-width: 1230px!important;}
}


/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	/*トピックス*/
	.newstitle,.news{width:100%;}
	.newstitle a{width:70%;margin:0 auto 30px;}
	.news a{width:100%;}
	
	/*当院の特長*/
	.feature li{display:block;}
	.feature h3{
		writing-mode: inherit;
		padding-right:0px;
		text-align: center;
		margin:inherit;
		margin-bottom: 15px;
	}
	.feature p{width:100%;}
	
	/*診療案内*/
	.c3 > li:not(:last-child) {margin-bottom: 30px;}	

	/*左画像＋見出しコンテンツ*/
	.imgboxL img{order:2;margin:auto;}
	.imgboxL div{width:100%;padding:15px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area img{padding-bottom:60px;}
	#main_area p{
		top:inherit;
		bottom:5%;
		left:50%;
		transform: translateX(-50%);
		text-align: center;
		line-height: 1.2;
		background:#FFFFFF;
		padding:15px 25px;
		border-radius: 10px;
		box-shadow: 0px 0px 15px -5px #777777;
	}
/*	#main_area p span{
		font-size: 4.5vw;
	}*/
	/*トピックス*/
	.news li a{flex-wrap: wrap;}
	.news li a time{width:100%;margin:0px;color:#0075c1;}
	
	/*当院の特長*/
	.feature li{padding:20px 10px;}

	/*診療案内*/
	.guide h3 a::before{width:50px; height: 50px; margin-right:15px;}
	
	/*左画像＋見出しコンテンツ*/
	.imgboxL div{width:100%;padding:0px;}
}