@charset "UTF-8";
/* CSS Document */

/* 共通 -------------*/
h2{
	font-family: 'Yusei Magic', sans-serif;
	font-size:  2.5rem;
	margin-bottom: 30px;
	border-bottom: 2px solid #333333;
}

.motto-container,
.doctor-container,
.medical-container{
	margin-top: 120px;
}

.motto-content,
.doctor-content{
	display: flex;
	justify-content: space-between;
}

.motto-content .text-area,
.doctor-content .text-area,
.medical-content .text-area{
	text-align: justify;
	padding: 30px 0 60px;
}
.motto-content .text-area,
.doctor-content .text-area{
	width: calc(100% - 530px);
}
.medical-content .text-area{
	padding-right: 30px;
}

.motto-content .text-area div,
.doctor-content .text-area div,
.medical-content .text-area div{
	background-color: rgba(255,255,255,0.8);
	padding: 16px;
}

.motto-content .img-area img,
.doctor-content .img-area img{
	width: 500px;
	height: 100%;
	object-fit:cover;
}
/* /共通 -------------*/



/* スライド -------------*/
.slide-container{
	padding-top: 110px;
	position: relative;
    z-index: 1;
}

.slide{
	width: 100%;
	margin: 0 auto;
}

.slide img{
	width: 100%;
	height: 100%;
}

/* slickカスタム -------------*/
/* 前後の画像半透明 -------------*/
.slick-slide:not(.slick-center){
	opacity: 0.3;  
	transition: opacity .5s, transform .5s;
}
/* /前後の画像半透明 -------------*/

/* 矢印 -------------*/
.slick-next{
	right: 15px;
}

.slick-prev{
	left: 15px;
}

.slick-arrow{
	z-index: 2;
	width: 70px;
	height: 70px;
}

.slick-arrow:before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}

.slick-next:before{
	background: url("../images/icon/arrow-next.png");
	background-size: contain;
	opacity: 1;
}

.slick-prev:before{
	background: url("../images/icon/arrow-prev.png");
	background-size: contain;
	opacity: 1;
}
/* /矢印 -------------*/

/* ドット -------------*/
.slick-dots{
	bottom:20px;
}

.slick-dots li{
	margin: 0 10px;
	width: 15px;
	height: 15px;
}

.slick-dots li button:before{
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1;
}

.slick-dots li.slick-active button:before{
	background: #1FA597;
}

.slick-dotted.slick-slider{
	margin-bottom: 0;/* slick下にできる余白をなくす -------------*/
}
/* /ドット -------------*/
/* /slickカスタム -------------*/
/* /スライド -------------*/



/* 医院のモットー -------------*/
.motto-container{
	background:linear-gradient(to right, #EFEADE 0%, #EFEADE 50%, transparent 50%, transparent 100%);
}

.motto-content{
	background-color: #EFEADE;
}

.motto-content .text-area{
	position: relative;
}

.motto-content .text-area::before{
	content: "MOTTO";
	font-size:  5rem;
	font-weight: bold;
	position: absolute;
	top: -96px;
	left: 0;
	color: #EFEADE;
}

.motto-content .text-area div{
	border-radius: 0 0 30px 0;
}
/* /医院のモットー -------------*/



/* 院長はこんな人 -------------*/
.doctor-container{
	background:linear-gradient(to right, transparent 0%, transparent 50%, #E8F6F4 50%, #E8F6F4 100%);
}

.doctor-content{
	background-color: #E8F6F4;
	flex-direction: row-reverse;
}

.doctor-content .text-area{
	position: relative;
}

.doctor-content .text-area::before{
	content: "DOCTOR";
	font-size:  5rem;
	font-weight: bold;
	position: absolute;
	top: -96px;
	left: 0;
	color: #E8F6F4;
}

.doctor-content .text-area div{
	border-radius: 0 0 0 30px;
}

h4{
	font-weight: bold;
}

h4 .name{
	font-family: 'Yusei Magic', sans-serif;
	font-size:  2.5rem;
	font-weight: normal;
	margin-bottom: 30px;
	margin-right: 16px;
}

.doctor-content .text-area div p:nth-of-type(2){
	margin-top: 16px;
}

.doctor-content .text-area div img{
	display: block;
	margin: 32px auto 0;
	width: 500px;
	height: 100%;
}
/* /院長はこんな人 -------------*/



/* 診療のご案内 -------------*/
.medical-container{
	background:linear-gradient(to right, #FCE8EA 0%, #FCE8EA 50%, transparent 50%, transparent 100%);
}

.medical-content{
	background-color: #FCE8EA;
}

.medical-content .text-area{
	position: relative;
}

.medical-content .text-area::before{
	content: "MEDICAL";
	font-size:  5rem;
	font-weight: bold;
	position: absolute;
	top: -96px;
	left: 0;
	color: #FCE8EA;
}

.medical-content .text-area div{
	border-radius: 0 0 30px 0;
}
/* /診療のご案内 -------------*/



/* 病院情報 -------------*/
.info-container{
	margin-top: 60px;
	background-color: #EFEADE;
	padding: 60px 0;
}

.info-content{
	display: flex;
	justify-content: space-between;
}

.info-content .contact-area{
	width: 340px;
}

.info-content .contact-area .logo-g{
	margin-bottom: 10px;
}

.info-content .contact-area .logo-g img{
	width: 340px;
}

.info-content .contact-area .department{
	margin-bottom: 30px;
}

.info-content .contact-area .tel,
.info-content .contact-area .fax{
	display: flex;
	align-items: center;
}

.info-content .contact-area .tel span,
.info-content .contact-area .fax span{
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
}

.info-content .time-area{
	width: calc(100% - 400px);
}

.info-content .time-area table{
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	margin-bottom: 5px;
}

.info-content .time-area table thead tr th{
	background: #1FA597;
	color: #fff;
	padding: 10px 15px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.info-content .time-area table thead tr th:first-of-type{
	border-left: 1px solid #1FA597;
}
.info-content .time-area table thead tr th:last-of-type{
	border-right: 1px solid #1FA597;
}

.info-content .time-area table tbody tr td{
	background: #fff;
	padding: 10px 15px;
	border: 1px solid #333333;
}

.info-content .time-area .note{
	text-align: justify;
}

.info-content .time-area .note ul li .bold{
	font-weight: bold;
}
/* /病院情報 -------------*/



/* マップ -------------*/
.google-map{
	width:100%;
	height: 500px;
}

.google-map iframe{
	width:100%;
	height: 500px;
	border: none;
}
/* /マップ -------------*/



/* その他情報 -------------*/
.about-container{
	background-color: #EFEADE;
}

.about-content .note{
	text-align: justify;
	padding: 30px 0 60px;
	font-size: 0.9rem;
}

.about-content .note ul li .bold{
	display: block;
	font-weight: bold;
	border-bottom: 1px dashed #000;
	margin-bottom: 6px;
	margin-top: 30px;
}

.about-content .note ul li:nth-of-type(3) ul li:nth-of-type(2){
	margin-bottom: 15px;
}

.about-content .note ul li ul li{
	list-style-type: disc;
	margin-left: 20px;
}
/* /その他情報 -------------*/









/* タブレット用（1024px以下）-------------*/
@media screen and (max-width: 1024px) {
/* 共通 -------------*/
.motto-content,
.doctor-content{
	display: flex;
	flex-direction:column;
}
	
.motto-content .text-area,
.doctor-content .text-area{
	width: 100% ;
}
.medical-content .text-area{
	padding-right: 0;
}

.motto-content .img-area,
.doctor-content .img-area{
	text-align: center;	
}

.motto-content .img-area img,
.doctor-content .img-area img{
	width: 70%;
	height: 100%;
}
/* /共通 -------------*/



/* スライド -------------*/
.slide-container{
	padding-top: 50px;
}

/* slickカスタム -------------*/
/* 前後の画像半透明 -------------*/
.slick-slide:not(.slick-center){
	opacity: 1;
}
/* /前後の画像半透明 -------------*/

/* 矢印 -------------*/
.slick-next{
	right: 0;
}

.slick-prev{
	left: 0;
}
/* /矢印 -------------*/
/* /slickカスタム -------------*/
/* /スライド -------------*/



/* 医院のモットー -------------*/
.motto-container{
	background-color: #EFEADE;
}
/* /医院のモットー -------------*/



/* 院長はこんな人 -------------*/
.doctor-container{
	background-color: #E8F6F4;
}

.doctor-content .text-area div img{
	width: 50%;
	height: 100%;
}
/* /院長はこんな人 -------------*/



/* 診療のご案内 -------------*/
.medical-container{
	background-color: #FCE8EA;
}
/* /診療のご案内 -------------*/	



/* 病院情報 -------------*/
.info-container{
	margin-top: 0;
}

.info-content{
	display: flex;
	flex-direction:column;
}

.info-content .contact-area{
	text-align: center;
	margin: 0 auto 30px;
}

.info-content .contact-area .tel,
.info-content .contact-area .fax{
	display: flex;
	justify-content: center;
}

.info-content .time-area{
	width: 100%;
}
/* /病院情報 -------------*/
}
/* /タブレット用（1024px以下） -------------*/









/* スマホ用（600px以下） -------------*/
@media screen and (max-width: 600px) {
/* 共通 -------------*/
.motto-container,
.doctor-container,
.medical-container{
	margin-top: 100px;
}

.motto-content .img-area img,
.doctor-content .img-area img{
	width: 100%;
	height: 100%;
}
/* /共通 -------------*/



/* 医院のモットー -------------*/
.motto-content .text-area{
	position: relative;
}

.motto-content .text-area::before{
	content: "MOTTO";
	font-size:  4rem;
	position: absolute;
	top: -76px;
	left: 0;
}
/* /医院のモットー -------------*/



/* 院長はこんな人 -------------*/
.doctor-content .text-area{
	position: relative;
}

.doctor-content .text-area::before{
	content: "DOCTOR";
	font-size:  4rem;
	position: absolute;
	top: -76px;
	left: 0;
}

.doctor-content .text-area div img{
	width: 100%;
	height: 100%;
}
/* /院長はこんな人 -------------*/



/* 診療のご案内 -------------*/
.medical-content .text-area{
	position: relative;
}

.medical-content .text-area::before{
	content: "MEDICAL";
	font-size:  4rem;
	position: absolute;
	top: -76px;
	left: 0;
}
/* /診療のご案内 -------------*/
	


/* 病院情報 -------------*/
.info-content .contact-area{
	width: 100%;
}
	
.info-content .time-area .table-wrap{
	overflow-x: scroll;		
}

.info-content .time-area table{
	min-width: 600px;
}
/* /病院情報 -------------*/	



/* マップ -------------*/
.google-map{
	position: relative;
	width:100%;
	height: 0;
	padding-top: 75%;
}

.google-map iframe{
	position: absolute;
	top:0;
	left: 0;
	width:100%;
	height:100%;
}
/* /マップ -------------*/
}
/* /スマホ用（600px以下） -------------*/