@charset "utf-8";

/*====================================================================================================

  トップ

====================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  Main visual
  
----------------------------------------------------------------------------------------------------*/

.mainVisual-wrap {
  overflow:hidden;

}

.mainVisual {
  width:100%;
  position:relative;
  overflow:hidden;
}

.mv-txt {
  position:absolute;
  top:45%;
  left: 50%;
  transform: translateY(-45%) translateX(-50%);
  -webkit-transform: translateY(-45%) translateX(-50%);
  z-index: 100;
}

.mv-txt__item {
  line-height:1.6;
  z-index:3;
  text-shadow : 
   2px  2px 2px rgba(255,255,255,0.8),
  -2px  2px 2px rgba(255,255,255,0.8),
   2px -2px 2px rgba(255,255,255,0.8),
  -2px -2px 2px rgba(255,255,255,0.8),
   2px  0px 2px rgba(255,255,255,0.8),
   0px  2px 2px rgba(255,255,255,0.8),
  -2px  0px 2px rgba(255,255,255,0.8),
   0px -2px 2px rgba(255,255,255,0.8);
}

.mv-txt-preinfo{
  position:absolute;
  width: 100%;
  background: url("../image/pre-info.png") no-repeat;
  background-position: calc(50% - 300px);
  bottom:0;
  text-align: center;
}

.mv-txt-preinfo .mv-txt__item {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.mv-txt-preinfo .mv-txt__item span{
  font-size: 0.77em;
}

.mv-photo {
  background-color:#fff;
  /*border-radius:16px;*/
  position:absolute;
  overflow:hidden;
}

.mv-p__item {
  /*display:block;*/
  height:100%;
  position:relative;
  overflow:hidden;
  /*border-radius:8px;*/
}

.mv-p__item div {
  height:100%;
  background-repeat: no-repeat;
  background-position: center;
  /*background-size: cover;*/
}

.mv-p__item div:nth-of-type(1){
  background-image: url("../image/mainvisual/01.jpg?v=2");
  background-size: cover;
}
.mv-p__item div:nth-of-type(2){
  background-image: url("../image/mainvisual/02.jpg?v=2");background-size: cover;
}
.mv-p__item div:nth-of-type(3){
  background-image: url("../image/mainvisual/03.jpg?v=2");
}

/*.mv-p__item img {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}*/

@media print,screen and (min-width:641px) and (max-width:1400px) {
  .mainVisual {
    width:1400px;
  }
}

@media print,screen and (min-width:641px) {
  .mainVisual {
    height:920px;
  }
  
  .mainVisual:before {
    /*top:64px;*/
  }
    
  .mv-txt {
    /*padding-top:200px;*/
  }
  
  .mv-txt:before {
    top:64px;
  }
  
  .mv-photo {
    /*padding:10px;*/
  }

  .mv-p01 {
    /*width:820px;
    height:500px;*/
    width: 100%;
    height: 830px;
  }
  
  .mv-txt__item {
    font-size:72px;
    white-space: nowrap;
  }
    
  .mv-txt-preinfo{
    height: 180px;
  }

  .mv-p01 {
    /*bottom:0;
    right:-webkit-calc(50% + 336px);
    right:calc(50% + 336px);*/
  }

}

@media screen and (max-width:640px) {
  .mainVisual-wrap {
    padding-top:1.5em;
  }
  
  .mainVisual {
    width:640px;
    height:720px;
  }

  .mainVisual:before {
    background-position:center center;
    background-size:140% auto;
    top:-9%;
  }
  
  .mv-txt {
    /*padding-top:305px;*/
  }
  
  .mv-txt:before {
    /*width:400px;
    height:400px;
    top:180px;*/
  }
  .mv-txt__item {
    font-size:48px;
    white-space: nowrap;
  }
  .mv-txt-preinfo{
    height: 100px;
  }
  .mv-photo {
    /*padding:8px;*/
  }
  .mv-p01 {
    width:100%;
    height:700px;
  }
}


/*----------------------------------------------------------------------------------------------------

  お知らせ
  
----------------------------------------------------------------------------------------------------*/
  
.info-hdline {
  margin-left: 30px;
  margin-bottom: 30px;
  z-index:1;
}

.info-cols-back {
  background-image: url("../image/info-back-right.png");
  background-position: calc(50% + 750px);
  background-repeat: no-repeat;
}

@media print,screen and (min-width:641px) {
    .info-cols {
      max-width: 1200px;
      padding-top:60px;
      /*padding-bottom:60px;*/
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
	  justify-content: center;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      align-items: flex-end;
		padding-bottom: 100px;
    }
}

@media print,screen and (max-width:640px) {
    .info-cols {
      padding-top:60px;
      padding-bottom:30px;
      /*padding-bottom:60px;*/
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      /*-webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;*/
      justify-content: center;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .info-hdline {
      margin-left: 20px;
    }
}

.inful-bana {
	margin-top: -50px;
	text-align: center;
}

@media print,screen and (max-width:640px) {
	.inful-bana {
		padding-left: 30px;
		padding-right: 30px;
		margin-top: 0;
	}
	.inful-bana img {
		max-width: 100%;
	}
}

/*--------------------------------------------------------------------------------
  お知らせ
--------------------------------------------------------------------------------*/
  .info-cnt .inner{ 
    position:relative;
    z-index:1;
    background: -moz-linear-gradient(to bottom,#F5F5F5,#e6e6e6,#F5F5F5); 
    background: -webkit-linear-gradient(to bottom,#F5F5F5,#e6e6e6,#F5F5F5); 
    background: linear-gradient(to bottom,#F5F5F5,#e6e6e6,#F5F5F5); 
  }

  .info-cnt .inner::before { 
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    box-sizing:border-box;
    padding:0px 2px; 
    width:100%;
    height:100%;
    background:#fff;
    background-clip:content-box;
    content:"";
  }

 .info-cnt .inner ul li .caution{
    color: #ff4f4f;
  } 
 .info-cnt .inner ul li .date{
    color: #565656;
    font-size: 0.88em;
	white-space: nowrap;
  }
 .info-cnt .inner ul li .info-item-ttl{
    color: #ef858c;
    display: block;
    margin-bottom: 5px;
  }
  .info-cnt .inner ul li {
    padding-bottom: 20px;
    border-bottom: 1px dashed #cdcdcd;
  } 
  .info-cnt .inner {
    background-color:#fff;
  }
  .info-cnt .inner ul{
    height: 300px;
    padding:0px 30px 30px 30px;
    box-sizing: border-box;
  }  

  .info-cnt .inner ul li{
    line-height: 1.4;
  }


@media print,screen and (min-width:641px) {
    .info-cnt {
      width:-webkit-calc(50% - 30px);
      width:calc(50% - 30px);    
      width: 690px;
      margin-right: 30px;
    }
	.info-cnt .inner ul{
      height: 200px;
		
    } 
	
    .info-cnt .inner ul li{
      display: flex;
      margin-bottom: 20px;
    }    
    .info-cnt .inner ul li p{
      /*font-size: 0.88em;*/
    }
    .info-cnt .inner ul li .date{
      font-size:0.88em;
      margin-right: 1.22em;
    }  
    .infoList {
      padding-bottom:40px;
    }
    .banner-cnt{
      min-width:420px;
    }
}

@media screen and (max-width:640px) {

	.info-cnt {
      width: 100%;
      margin-bottom:0px;
    }
    .info-cnt .inner {
      font-size:1em;
    }
    .info-cnt .inner ul{
      /*height: 290px;*/
      height: 240px;
      padding:30px 0 30px 20px;
      box-sizing: border-box;
	  margin-bottom: 30px;
    }  
    .infoList {
      padding-bottom:2.5em;
    }
}

/*----------------------------------------------------------------------------------------------------

イントロ
  
----------------------------------------------------------------------------------------------------*/

.intro-back{
  background-image: url("../image/intro-back.jpg");
  background-repeat: no-repeat;
  /*background-attachment: fixed;*/
  background-size: cover;
}

.intro-hdline{
  margin-bottom: 60px;
  text-shadow : 
  2px  2px 2px rgba(255,255,255,0.8),
  -2px  2px 2px rgba(255,255,255,0.8),
  2px -2px 2px rgba(255,255,255,0.8),
  -2px -2px 2px rgba(255,255,255,0.8),
  2px  0px 2px rgba(255,255,255,0.8),
  0px  2px 2px rgba(255,255,255,0.8),
  -2px  0px 2px rgba(255,255,255,0.8),
  0px -2px 2px rgba(255,255,255,0.8);
}

.intro-col{
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.intro-col .txt-box{
  position: absolute;
  background-color: rgba(255,255,255,0.8);
}

.intro-col p:not(:last-of-type){
  margin-bottom: 20px;
}
.intro-col p:last-of-type{
  text-align: right;
}

.intro-col p span{
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.js-parallax {
  width: 100%;
  background-attachment: fixed;
}

@media screen and (min-width: 641px) {
  .intro-back {
    margin-top: 90px;
    margin-bottom: 180px;
    height: 1018px;
  }
  .intro-col {
    max-width: 1380px;
    height: 1020px;
  }
    
  .intro-col .txt-box {
    padding: 120px;
    max-width: 840px;
  }

}

@media screen and (max-width: 750px) {
  .js-parallax {
    background-size: cover;
    background-attachment: scroll;
  }
}

@media screen and (max-width: 640px) {
  .intro-back{
    margin-top: 40px;
    margin-bottom: 60px;          
  }
  .intro-col{
    max-width: 640px;
    height: 1020px;
  }
  .intro-col .txt-box{
    padding: 120px 20px;
    max-width: 640px;
  }
  .intro-back{
    background-position: center;
  }
    
}

/*----------------------------------------------------------------------------------------------------

医院のクレド
  
----------------------------------------------------------------------------------------------------*/
.credo-back{
  background-image: url("../image/credo-back-left.png"),url("../image/credo-back-right.png");
  background-repeat: no-repeat;
  background-position: calc(50% - 900px),calc(50% + 1000px);
}

.credo-cols {
  max-width: 1140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.credo-list{
  list-style:none;
}

.credo-list li{
  padding:40px 60px;
  display: flex;
  /*padding-left: 60px;
  padding-right: 60px;*/
  /*padding-top: 0.6rem;
  padding-bottom:0.6rem;*/
  position:relative;
  z-index:1;
  background: -moz-linear-gradient(to right,rgba(255,255,255,0),#ffe2e4,rgba(255,255,255,0)); 
  background: -webkit-linear-gradient(to right,rgba(255,255,255,0),#ffe2e4,rgba(255,255,255,0)); 
  background: linear-gradient(to right,rgba(255,255,255,0),#ffe2e4,rgba(255,255,255,0));  
}

.credo-list li::before { 
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  box-sizing:border-box;
  padding:1px 0px; 
  width:100%;
  height:100%;
  background:#fff;
  background-clip:content-box;
  content:"";
}

.credo-list li:first-child::before { 
  padding:0px 0px 1px 0px; 
}

.credo-list li:last-child::before { 
  padding:1px 0px 2px 0px; 
}

.credo-list-ttl{
  text-align: center;
  letter-spacing: 2px;
  line-height: 0;
  font-weight: 400;
  color: #CDCDCD;
}
.credo-list-ttl span{
  display: block;
  font-size:72px;
  font-weight: 300;
  letter-spacing: -3px;
  line-height: 1.1;
  white-space: nowrap;
  transform   : scale(1, 1.1);
}
.credo-list li p{
  margin-top: 5px;
  min-width: 320px;
  font-weight: 500;
}

@media screen and (min-width: 641px) {
  .credo-back {
    padding-bottom: 180px;
    padding-top: 180px;
  }
  .credo-hdline {
    margin-bottom: 80px;
  }

  .credo-list-ttl {
    margin-right: 40px;
  }
}


@media screen and (max-width: 640px) {
  .credo-back{
    padding-top: 60px;
    padding-bottom: 60px;
  }
    
  .credo-cols {
    max-width: 1140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
    
  .credo-col.img-box{
    margin-bottom: 40px;
  }
    
  .credo-hdline{
    text-align: center;
    margin-bottom: 40px;
  }
    
  .credo-list li{
    padding:40px 0px;
    justify-content: center;
    flex-wrap: wrap;
  }
    
  .credo-list li p{
    margin-top: 10px;
    text-align: center;
  }
    
}

/*----------------------------------------------------------------------------------------------------

 院長略歴
  
----------------------------------------------------------------------------------------------------*/

.profile-cols {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-list{
  list-style:none;
}
.profile-list li{
  position:relative;
  z-index:1;
  background: -moz-linear-gradient(to right,rgba(255,255,255,0),#bfeee5,rgba(255,255,255,0)); 
  background: -webkit-linear-gradient(to right,rgba(255,255,255,0),#bfeee5,rgba(255,255,255,0)); 
  background: linear-gradient(to right,rgba(255,255,255,0),#bfeee5,rgba(255,255,255,0));  
}

.profile-list li::before { 
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  box-sizing:border-box;
  padding:1px 0px; 
  width:100%;
  height:100%;
  background:#fff;
  background-clip:content-box;
  content:"";
}

.profile-cols .img-box dt span{
  display: block;
  font-size: 0.88em;
}

.profile-list li:first-child::before{
  padding-top:0px; 
}
.profile-list li:last-child::before{
  padding-bottom:0px; 
}

@media screen and (min-width: 641px) { 
  .profile-back{
    background-image: url("../image/profile-back-left.png"),url("../image/profile-back-right.png");
    background-repeat: no-repeat;
    background-position: calc(50% - 880px),calc(50% + 800px);
  }  
  .profile-cols {
    padding-bottom: 180px;
    padding-top: 180px;
  }
  .profile-hdline{
    padding-left: 60px;
    margin-bottom: 80px;
  } 
  .profile-list li{
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 0.6rem;
    padding-bottom:0.6rem;
  }
  .profile-list li span{
    display: inline-block;
    min-width:120px;
  }  
  .profile-cols .img-box dl{
    position: relative;
    top: 80px;
  }
  .profile-cols .img-box dt{
    position: absolute;
    bottom:120px;
    left: -30px;
    z-index: 1;
  }
}

@media screen and (max-width: 640px) {
  .profile-back{
    background-image: url("../image/profile-back-left.png"),url("../image/profile-back-right.png");
    background-repeat: no-repeat;
    background-position:calc(50% - 280px) 110%, calc(50% + 800px) 150%;
  }
    
  .profile-cols {
    padding-bottom: 60px;
    padding-top: 60px;
    justify-content: center;
    flex-wrap: wrap;
  }
    
  .profile-hdline{
    text-align: center;
    margin-bottom: 40px;
  }
  .profile-list li{
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 1rem;
    padding-bottom:1rem;
  }
  .profile-list li span{
    display: inline-block;
    min-width:90px;
  }
    
  .profile-cols .img-box dl{
    position: relative;
    top: 60px;
  }

  .profile-cols .img-box dt{
    position: absolute;
    bottom:120px;
    left: 0px;
    z-index: 1;
  }

}

/*----------------------------------------------------------------------------------------------------

 web問診
  
----------------------------------------------------------------------------------------------------*/

.interview{
box-sizing: border-box;
background-color: #FFF4F5;
border: 5px dotted #F8C7CB;
}

.interview h3{
text-align: center;
font-weight: 700;
background-color: #fff;
color: #ef858c;
}

.flex_interview_banner{
width: 100%;
display: flex;
}

.about_interview_banner{
box-sizing: border-box;
background-color: #fff;
text-align: center;
position:relative;
}

.about_interview_banner dt{
font-weight: 600;
color: #12aaa5;
}

.about_interview_banner dd{
padding-left: 1em;
text-indent: -1em; 
text-align: left;
margin-left: 0;
}

.btn_interview_banner{
background-color: #ef858c;
color: #fff!important;
text-decoration: none!important;
box-sizing: border-box;
text-align: center;
}

.btn_interview_banner:hover{
opacity: 0.8;
}

@media screen and (min-width:641px){
	.interview{
		
padding:30px;
margin-bottom: 50px;
}
	
.interview h3{
padding: 10px 0;
margin-bottom: 30px;
}
	
.flex_interview_banner{
width: 100%;
}
	
.about_interview_banner{
width: 50%;
height: 100%;
padding:30px;

}
	
.about_interview_banner:first-of-type{
margin-right: 30px;
}

.about_interview_banner dl{
min-height: 210px;
margin-right: 20px;
margin-bottom: 30px;
}
.about_interview_banner dt{
font-size: 20px;
margin-bottom: 10px;
}

.btn_interview_banner{
padding:10px 30px;
font-size: 24px;
height: 100%;
}
}

@media screen and (max-width:640px){
	.interview{
		margin-top: 60px;
padding:20px;
margin-bottom: 50px;
}
	
.interview h3{
padding: 10px 0;
margin-bottom: 20px;
}
	
.flex_interview_banner{
display: block;
}
	
.about_interview_banner{
width: 100%;
height: 100%;
padding:20px 20px 30px;
}
	
.about_interview_banner:first-of-type{
margin-bottom: 30px;
}

.about_interview_banner dl{
margin-bottom: 30px;
}
.about_interview_banner dt{
font-size: 20px;
margin-bottom: 10px;
}

.btn_interview_banner{
padding:10px 30px;
font-size: 18px;
height: 100%;
}
}


/*----------------------------------------------------------------------------------------------------

 医院情報
  
----------------------------------------------------------------------------------------------------*/
.cliinfo-cols{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cliinfo-cols dt::before{
  content: "●";
  font-size: 0.88em;
  margin-right: 0.4em;
}

.cliinfo-cols dd{
  margin-left: 1.2em;
}

.cliinfo-cols dd:not(:last-child){
  margin-bottom: 20px;
}

.cli-info-logo{
  max-width: 370px;
  margin-bottom: 40px;  
}

.cliinfo-cols .txt-box{
  margin-right: 30px;
}

@media screen and (min-width: 641px) {
  .cliinfo-cols{
    max-width: 1140px;
    padding-bottom: 80px;
    padding-top: 80px;
  }
}

@media screen and (max-width: 640px) {
  .cliinfo-cols {
    padding-top: 120px;
    padding-bottom: 80px;
    flex-wrap: wrap;
  }
  .cliinfo-col.txt-box {
    margin-bottom: 30px;
  }
}

.cli-info-table{
	margin-top: 20px;
}

.cli-info-table p{
	text-align: right;
}

/*----------------------------------------------------------------------------------------------------

  コンテンツバナー
  
----------------------------------------------------------------------------------------------------*/

.contents-banner-list{
  list-style: none;
  display: flex;
}

.contents-banner-list li{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.contents-banner-list li:nth-child(1){background-image: url("../image/contents-banner/new_patient.jpg")}
.contents-banner-list li:nth-child(2){background-image: url("../image/contents-banner/treatment.jpg") }
.contents-banner-list li:nth-child(3){background-image: url("../image/contents-banner/recruit.jpg") }

.contents-banner-list li a{
  position: relative;
  text-align: center;
  font-weight: 600;
}

.contents-banner-list li a span{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-shadow : 
  2px  2px 2px rgba(255,255,255,0.2),
  -2px  2px 2px rgba(255,255,255,0.2),
  2px -2px 2px rgba(255,255,255,0.2),
  -2px -2px 2px rgba(255,255,255,0.2),
  2px  0px 2px rgba(255,255,255,0.2),
  0px  2px 2px rgba(255,255,255,0.2),
  -2px  0px 2px rgba(255,255,255,0.2),
  0px -2px 2px rgba(255,255,255,0.2);
}

@media screen and (min-width: 641px) {
  .contents-banner-list li{
    width:33.33333%;
    width: calc(100%/3);
    height: 450px;
  } 
}

@media screen and (max-width: 640px) {
  .contents-banner-list{
    flex-wrap: wrap;
  }
    
  .contents-banner-list li{
    width: 100%;
    height: 300px;
  }
    
}

/*----------------------------------------------------------------------------------------------------

foot-gallery-col
  
----------------------------------------------------------------------------------------------------*/

#foot-gallery-col {
  width: 100%;
  padding-top: 80px;
  padding-bottom:80px;
  background-color: #ffeced;
}

#footSlide li{
  margin: 0 15px;
} 

@media print,screen and (max-width:640px) {
  #foot-gallery-col {
    width: 100%;
    padding-top: 40px;
    padding-bottom:40px;
    background-color: #ffeced;
  }

  #footSlide li{
    margin: 0 5px;
  } 
}
