@charset "UTF-8";

.contentpage .m_img_area{background-image: url(../images/m_img@2x.jpg);}


/* welcome
---------------------------------------------------------*/
#welcome .bg{
	position: relative;
	padding-bottom: 150px;
}
#welcome .bg::before{
	position: absolute;
	display: block;
	content: "";
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
	background-size: 100% auto;
	width: 100%;
	height: calc(100% - 150px);
	bottom: 0;
	left: 0;
}
#welcome .w1220{
	position: relative;
	z-index: 2;
}

/*img960*/
#welcome .img960{
	position: relative;
}
#welcome .img960 div{
	width: 80%;
	margin: 0 auto;
}
#welcome .img960 .cli_index2{
	position: absolute;
	bottom: -0.6em;
	right: 0;
	text-align: right;
}

/*cli_index1*/
.cli_index1{
	margin-bottom: .5em;
}

/*cli_index2*/
.cli_index2{
	color: #d3d3d5;
	line-height: 1em;
}

/*img420_flex*/
#welcome .img420_flex{
	position: relative;
	z-index: 3;
	display: flex;
    justify-content: space-between;
	margin-top: -80px;
	margin-bottom: 80px;
}
#welcome .img420_flex .img{
	width: 35%;
}
#welcome .img420_flex .txt{
	width: 55%;
	max-width: 504px;
	margin: 0 auto;
	padding-top: 170px;
}

/*img640_flex*/
#welcome .img640_flex{
	position: relative;
	display: flex;
    justify-content: space-between;
	flex-flow: row-reverse;
	align-items: center;	
}
#welcome .img640_flex::before{
	position: absolute;
	display: block;
	content: "";
	background: url("../images/abs.svg")no-repeat top right;
	background-size: 100% auto;
	width: 100%;
	max-width: 1300px;
	aspect-ratio: 1300 / 1300;
	top: 50%;
	transform: translateY(-50%);
	right: -25%;
	z-index: -1;
}
#welcome .img640_flex .img{
	width: 53%;
}
#welcome .img640_flex .txt{
	width: 40%;
	max-width: 330px;
	margin: 0 auto;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#welcome .bg{
	padding-bottom: 10%;
}
#welcome .bg::before{
	height: calc(100% - 10vw);
}

/*cli_index1*/
.cli_index1{
	margin-bottom: .3em;
}

/*img420_flex*/
#welcome .img420_flex{
	margin-top: -4vw;
	margin-bottom: 8vw;
}
#welcome .img420_flex .txt{
	padding-top: 14vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#welcome .bg{
	padding-bottom: 20%;
}
#welcome .bg::before{
	height: calc(100% - 60vw);
}

/*img960*/
#welcome .img960{
	padding-top: 0;
}
#welcome .img960 div{
	width: 100%;
}
#welcome .img960 .cli_index2{
	position: static;
	margin-bottom: .15em;
}

/*cli_index1*/
.cli_index1{
	text-align: center;
	margin-bottom: .3em;
}

/*img420_flex*/
#welcome .img420_flex{
	display: block;
	margin-top: -20vw;
	border-bottom: 1px solid #ccc;
	padding-bottom: 8%;
	margin-bottom: 9%;
}
#welcome .img420_flex .img{
	width: 45%;
	margin: 0  -5.5% 0 auto;
}
#welcome .img420_flex .txt{
	width: 100%;
	max-width: 100%;
	padding-top: 0;
	margin-top: -6vw;
}
#welcome .img420_flex .txt .cli_index1{
	text-align: left;
}
	
/*img640_flex*/
#welcome .img640_flex{
	display: block;
	border-bottom: 1px solid #ccc;
	padding-bottom: 8%;
}
#welcome .img640_flex .img{
	width: 100%;
	margin: 0 auto;
}
#welcome .img640_flex .txt{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}
}






/* private
---------------------------------------------------------*/
#private .w1220{
	position: relative;
	z-index: 2;
	padding-bottom: 150px;
}

#private .img550{
	position: relative;
}
#private .img550 div{
	width: 50%;
	margin: 0 auto;
}
#private .img550 .cli_index2{
	position: absolute;
	top:-0.5em;
	left: 0;
}

#private .img360_flex{
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin-top: -110px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
    justify-content: space-between;
}
#private .img360_flex .img{
	width: 33%;
}
#private .img360_flex .txt{
	width: 62%;
	max-width: 326px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#private .w1220{
	padding-bottom: 10%;
}

#private .img360_flex{
	margin-top: -9.5vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#private .w1220{
	padding-bottom: 10%;
}

#private .img550 div{
	width: 75%;
	margin-left: auto;
	margin-right: 0;
}
#private .img550 .cli_index2{
	top:-0.7em;
}

#private .img360_flex{
	margin-top:-20vw;
	display: block;
}
#private .img360_flex .img{
	width: 50%;
	margin-bottom: 4%;
}
#private .img360_flex .txt{
	width: 100%;
	max-width: 100%;
}
}





/* medical
---------------------------------------------------------*/
#medical{
	position: relative;
	z-index: 2;
	padding-bottom: 150px;
}
#medical .com_slide .swiper-slide{
	width: min(960px,65vw);
	margin: 0 4px;
}
#medical .titlebox{
	position: relative;
	z-index: 2;
	margin-top: -2.8em;
	text-align: center;
	margin-bottom: 80px;
}
#medical .titlebox .cli_index2{
	margin-bottom: .3em;
}
#medical .titlebox .zen30{
	margin-bottom: .5em;
}

#medical .img640_flex{
	display: flex;
    justify-content: space-between;
    align-items: center;	
	max-width: 1100px;
	margin: 0 auto 80px;
}
#medical .img640_flex .img{
	width: 58.5%;
}
#medical .img640_flex .txt{
	width: 36.5%;
	max-width: 330px;
}

#medical .col2{
	position: relative;
	display: flex;
    justify-content: space-between;
}
#medical .col2::before{
	position: absolute;
	display: block;
	content: "";
	background: url("../images/abs.svg")no-repeat top left;
	background-size: 100% auto;
	width: 100%;
	max-width: 1300px;
	aspect-ratio: 1300 / 1300;
	top:40%;
	transform: translateY(-50%);
	left: -25%;
	z-index: -1;
}
#medical .col2 section{
	width: 48%;
	max-width: 550px;
}
#medical .col2 .img{
	margin-bottom: 40px;
}
#medical .col2 .txt{
	max-width: 515px;
	margin: 0 auto;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#medical{
	padding-bottom: 10%;
}
#medical .titlebox{
	margin-top: -2em;
	margin-bottom: 6vw;
}
#medical .titlebox .cli_index2{
	margin-bottom: .2em;
}
#medical .titlebox .zen30{
	margin-bottom: .3em;
}

#medical .img640_flex{
	margin: 0 auto 6%;
}
#medical .col2 .img{
	margin-bottom: 4%;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#medical{
	padding-bottom: 10%;
}
#medical .com_slide .swiper-slide{
	width: 80vw;
	margin: 0 0.5vw;
}
#medical .titlebox{
	margin-top: -1.4em;
	margin-bottom: 8%;
}
#medical .titlebox .cli_index2{
	letter-spacing: normal;
	font-size:350%;
	margin-bottom: .2em;
}
#medical .titlebox .zen30{
	margin-bottom: .3em;
}

#medical .img640_flex{
	display: block;	
	margin: 0 auto 8%;
}
#medical .img640_flex .img{
	width:100%;
	margin: 0 auto 4%;
}
#medical .img640_flex .txt{
	width: 100%;
	max-width:100%;
}

#medical .col2{
	display: block;
}
#medical .col2 section{
	width: 100%;
	margin-bottom: 0;
	margin-top: 8%;
	
	border-top: 1px solid #ccc;
	padding-top: 8%;
}
#medical .col2 section:last-child{
	margin-bottom: 0;
}
#medical .col2 .img{
	width: 80%;
	margin: 0 auto 4%;
}
#medical .col2 .txt{
	max-width: 100%;
}
}





/* other
---------------------------------------------------------*/
#other.bg_white{
	padding: 150px 0;
}
#other .col3{
	display: flex;
    justify-content: space-between;
}
#other .col3 li{
	width: 31.5%;
	max-width: 410px;
}
#other .col3 li .img{
	margin: 0 auto 35px;
}
#other .col3 li .txt{
	max-width: 330px;
	margin: 0 auto;
}
#other .col3 li .cli_index1{
	text-align: center;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#other.bg_white{
	padding: 10% 0;
}
#other .col3 li .img{
	margin: 0 auto 5%;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#other.bg_white{
	padding: 10% 0 20%;
}
#other .col3{
	display: block;
}
#other .col3 li{
	width: 100%;
	max-width: 100%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 8%;
	margin-bottom: 9%;
}
#other .col3 li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
#other .col3 li .img{
	width: 75%;
	margin: 0 auto 4%;
}
#other .col3 li .txt{
	max-width: 100%;
}
}








/* shisetsu
---------------------------------------------------------*/
#shisetsu .bg{
	background: url("../images/img12@2x.jpg")no-repeat center center;
	background-size: cover;
}
#shisetsu .inbox{
	position: relative;
	padding: 40px 0;
}
#shisetsu .cli_index2{
	position: absolute;
	top:-0.6em;
	left: 0;
}
#shisetsu h3,
#shisetsu .com_btn2_list{
	max-width: 1220px;
	margin: 0 auto;
}
#shisetsu .com_btn2_list{
	margin-top: 40px;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#shisetsu .inbox{
	padding: 3% 0;
}
#shisetsu .com_btn2_list{
	margin-top: 4%;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) {
#shisetsu .bg{
	background-position: center right 30%;
}
#shisetsu .inbox{
	padding: 6% 0 6%;
}
#shisetsu .cli_index2{
	right: 0;
	margin: 0 auto;
	text-align: center;
}
#shisetsu .com_btn2_list{
	margin-top: 6%;
}
}