@charset "UTF-8";
/* CSS Document */
.under .title h1 {
    line-height: 1.2;
}
.title {
    background-image: url("../img/title_hospital.webp");
}
.myhos .title {
    background-image: url("../img/title_hospital.webp");
}
.interview_01 .title {
    background-image: url("../img/title_hospital_interview_01.webp");
}
.interview_02 .title {
    background-image: url("../img/title_hospital_interview_02.webp");
}
.interview_03 .title {
    background-image: url("../img/title_hospital_interview_03.webp");
}
/*-----------------------
インタビュー
-------------------------*/
.interview h2{
	padding: 0 8vw;
	min-height: 536px;
	font-size: 2.4rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	line-height: 1.4;
	font-weight: 100;
	position: relative;
}
.interview_01 h2{
	background: url("../img/h2_interview_01.webp") no-repeat 50% 50%;
	background-size: cover;
}
.interview_02 h2{
	background: url("../img/h2_interview_02.webp") no-repeat 50% 50%;
	background-size: cover;
}
.interview_03 h2{
	background: url("../img/h2_interview_03.webp") no-repeat 100% 50%;
	background-size: cover;
}

.interview h2>.sp_h2{
display: none;
}
.interview h2>.h2_box{
width: 600px;
display: flex;
flex-wrap: wrap;
}
.interview h2>.h2_box>div{
	display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 50px;
}
.interview h2>.h2_box>div>div{
	background: #FFFF00;
	display: flex;
	font-size: 96%;
	text-align: center;
	padding: 0 20px;
	align-items: center;
}
.interview h2>.h2_box>div>div>span{
	font-size: 110%;
	display: inline-block;
	margin: 0 15px;
}
.interview h2:before{
	display: none;
}
.interview_03 h2{
	font-size: 2.2rem;
}
.interview_03 h2>.h2_box>div{
position: absolute;
	bottom: 20px;
}
.interview_03 h2>.h2_box:first-child>div{
	right: 585px;
}
.interview_03 h2>.h2_box>div:last-child{
	right: 120px;
}
.interview_03 h2>.h2_box>div>div{
font-size: 70%;
}
.interview p.intro{
	color: #0076DD;
	font-size: 140%;
	text-align: center;
}
.interview .inter_box{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.interview .inter_box>h3{
	width: 400px;
	height: 400px;
	box-sizing: border-box;
	background: #D3F2FF;
	display: flex;
	justify-content: center;
	    align-content: center;
	flex-wrap: wrap;
}

.interview .inter_box>h3>span{
	width: 100%;
	margin-top: 20px;
justify-content: center;
display: flex;
text-align: center;
	color: #111;
	font-size: 2.0rem;
	line-height: 1.4;

}

.interview .inter_box>h3 img{
	display: block;
	width: 150px;
}

.interview .inter_box>.txt{
	width: calc(100% - 450px);
}

.interview .inter_box>.txt>img{
max-width: 750px;
	width: 100%;
margin: 20px auto;
display: block;
}
.interview .inter_box>.txt h4{
		background: #FFFF00;

	color: #111;
	display: inline-block;
	padding: 0 20px;
}
.interview h4.fukidashi{
		background: #0076DD !important;
	color: #fff !important;
	display: inline-block;
	padding: 0 20px;
  position: relative;
  min-width: 120px;
	text-align: center;
	border-radius: 10px;
}
.interview h4.fukidashi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #0076DD;
}
.interview h4.fukidashi span{
	font-size: 120%;
	margin-right: 10px;
	display: inline-block;
}
.interview .for_pati{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.interview .for_pati>*{
	width: calc(50% - 50px);
}


.interview .img_only{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
.interview .img_only>img{
max-width: 750px;
	width: calc(50% - 60px);
	display: block;
margin: 30px;
}

.interview .index_list ul{
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
@media screen and (max-width:768px) {
	.interview .index_list ul {
		display: block;
	}
}
.interview .index_list ul>li{
	width: calc(100% / 3 - 30px);
	margin: 15px;
}
@media screen and (max-width:768px) {
	.interview .index_list ul>li {
		width: 100%;
		margin: 0;
	}
}
.interview .index_list ul>li img{
	width: 100%;
}
.interview .index_list h2{
	text-align: center;
	display: flex;
	justify-content: center;
	height: auto;
		  background: linear-gradient(115deg, #0076DD, #26C3F5);
  padding: 10px 20px;
  color: #fff;
  font-size: 1.4em;
	min-height: auto;
	margin-top: 15px;
	
}

.interview .index_list ul li a{
	position: relative;
		-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
	text-align: center;
	background: #fff;
  border-radius: 6px;
	overflow: hidden;
}

.interview .index_list ul li a:before{
	content: "インタビューを見る →";
	color: #fff;
	position: absolute;
	width: 100%; 
	height: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(115deg, #0076DD, #26C3F5);
		-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
		z-index: 1000;
	opacity: 0;

}

.interview .index_list ul li a:hover:before{
		-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 0.8;
}
/*-----------------------
マイホス
-------------------------*/
.myhos h4{
	padding-left: 30px;
	position: relative;
	
}
.myhos h4:before{
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 3px;
	background: #0076DD;
	top: 17px;
	left: 0;
}
.myhos  .bg_white .flex{
	justify-content: space-between;
}
.myhos .flex .img{
	justify-content: center;
	display: flex;
}
.myhos .flex_box{
	justify-content: space-between;
	display: flex;
	align-items: flex-start;
}
.myhos .flex_box>.txt{
	width: calc(100% - 600px);
}
.myhos .flex_box>.img{
	width: 550px;
}
.myhos .flex_box>.w2bun{
	width: calc(100% / 2 - 20px);
	margin: 10px;
}
.myhos .flex_box>.w4bun{
	width: calc(100% / 4 - 20px);
	margin: 10px;
}
.myhos .flex_box>.w4bun>img{
	width: 100%;
	max-width: 300px;
}

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

}
@media screen and (max-width:768px) {
	.under section{
		margin: 0 auto;
	}
/*-----------------------
インタビュー
-------------------------*/
.interview h2{
	min-height: 230px;
    background: #e3e3e3 !important;
	padding: 20px 0 0;
}
.interview h2>.h2_box{
	width: 96%;
font-size: 4vw;
padding: 0 8vw;
text-align: center;
justify-content: center;
}
.interview h2>.h2_box>div{
justify-content: center;
	margin-top: 10px;
	margin-bottom: 20px;
	}
.interview h2:before{
	display: none;
}
	.interview h2>.sp_h2{
display: block;
		width: 100%;
}
	.interview h2>.sp_h2>img{
display: block;
		width: 100%;
}

	.under .box{
		margin-bottom: 20px;
	}
	.interview p.intro{
		font-size: 18px;
		margin-bottom: 20px;
	}
.interview .inter_box>h3{
	width: 100%;
	height: auto;
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
}
	.interview .inter_box > h3 > span{
		font-size: 5vw;
	}
.interview .inter_box>h3>img{
	width: 100%;
	max-width: 100px;
}

.interview .inter_box>h3>span{

	}


.interview .inter_box>.txt{
	width: 100%;
}


.interview .for_pati>*{
	width: 100%;
}
.interview .img_only{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
.interview .img_only>img{
	width: calc(100% - 0px);
	margin: 20px auto;
}

.interview_03 h2>.h2_box>div{
position: relative;
	bottom: auto;
	right:  auto !important;
}

	
}
@media (orientation: landscape) {}