@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ トップページ ◇◆◇
  
  
========================================================================================================================*/

@media print,screen and (min-width:768px) {
  header {
    display:none;
  }
}


/*----------------------------------------------------------------------------------------------------

  hero
  
----------------------------------------------------------------------------------------------------*/

.hero-warp {
  background-color:#ebe8f3;
}

@media print,screen and (min-width:768px) {
  .hero {
    width:1100px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    text-align:center;
    overflow:visible;
  }
}


/*-----------------------------------------------------------------------------------
  slide
-----------------------------------------------------------------------------------*/

.hero__mainSlide {
  width:1100px;
  height:600px;
  position:absolute;
  left:-100px;
  top:0;
  z-index:1;
}

.hero__mainSlide__container {
  list-style:none;
  z-index:9;
}

@media print,screen and (min-width:768px) {
  .hero__mainSlide:before {
    content:url(../image/top/slide/glow.png);
    width:1100px;
    height:600px;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
  }
}

@media screen and (max-width:767px) {
  .hero__mainSlide {
    width:100%;
    height:inherit;
    position:relative;
    left:inherit;
    top:inherit;
    overflow:hidden;
  }
  
  .hero__mainSlide__container {
    width:120%;
    height:inherit;
    margin-left:-10%;
    left:inherit;
    top:inherit;
  }
}

@media print {
  .hero__mainSlide__container img {
    width:1100px;
    max-width:1100px;
    height:600px;
  }
}


/* pagination /-------------------------------------------------------------------- */

.hero__mainSlide__pagination {
  line-height:0;
  position:absolute;
  bottom:30px;
  left:100px;
  text-align:center;
  z-index:11;
}

.hero__mainSlide__pagination .slick-dots li button {
  width:12px;
  height:12px;
}

.hero__mainSlide__pagination .slick-dots li button:before {
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:100%;
  box-sizing:border-box;
  border:1px solid #443f77;
  opacity:0.3;
}

.hero__mainSlide__pagination .slick-dots li.slick-active button:before {
  background-color:#443f77;
  opacity:1;
}

@media screen and (max-width:767px) {
  .hero__mainSlide__pagination {
    width:100%;
    left:inherit;
    bottom:1em;
  }
  
  .hero__mainSlide__pagination .slick-dots li button:before {
    border:0;
    background-color:#fff;
    opacity:0.6;
  }
}


/*-----------------------------------------------------------------------------------
  logo・診療時間
-----------------------------------------------------------------------------------*/

@media print,screen and (min-width:768px) {
  .hero__guide {
    width:450px;
    position:absolute;
    right:0;
    top:0;
    z-index:2;
    font-size:93.8%;
  }
}

.hero__guide__logo {
  padding-top:50px;
}

.hero__guide__logo:before {
  content:"";
  display:block;
  width:80px;
  height:80px;
  margin-left:auto;
  margin-right:auto;
  background:url(../image/logo.png) no-repeat center top;
  background-size:contain;
}

.hero__guide__logo-en {
  width:240px;
  height:12px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  background:url(../image/logo-en.png) no-repeat center top;
  background-size:contain;
}

.hero__guide__logo-jp {
  width:370px;
  height:40px;
  margin-left:auto;
  margin-right:auto;
  margin-top:30px;
  margin-bottom:15px;
  background:url(../image/logo-jp.png) no-repeat center top;
  background-size:contain;
}

.hero__guide__skamoku {
  width:240px;
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  line-height:1;
  margin-bottom:35px;
  color:#826eb4;
  position:relative;
  font-family:"NotoSerif";
  font-weight:100;
}

.hero__guide__skamoku span {
  display:inline-block;
  background-color:#ebe8f3;
  padding-left:0.75em;
  padding-right:0.75em;
  position:relative;
}

.hero__guide__skamoku:before {
  content:"";
  width:100%;
  height:1px;
  position:absolute;
  top:50%;
  left:0;
  background-color:rgba(130,110,180,0.3);
  margin-top:-1px;
}


/* 診療時間（備考） ----------------------------------------*/

.hero__guide__hrsInfo {
  background-color:#fff;
  text-align:left;
  list-style:none;
  border-radius:3px;
  margin-top:15px;
  box-sizing:border-box;
  padding:1em 1.25em;
}

.hero__guide__hrsInfo li:before {
  content:"※";
  display:inline-block;
  margin-right:0.25em;
}

@media screen and (max-width:767px) {
  .hero__guide {
    background-color:#fff;
    padding-top:0.5em;
    padding-bottom:1em;
  }
  
  .hero__guide__logo,
  .hero__guide .hrsTbl,
  .hero__guide__hrsInfo {
    display:none;
  }
  
  .hero__guide__skamoku span {
    background-color:#fff;
  }

  .hero__guide__logo-jp {
    width:330px;
    height:35px;
    margin-top:0;
    margin-bottom:0;
  }
  
  .hero__guide__skamoku {
    margin-top:1em;
    margin-bottom:0;
  }
}

@media screen and (max-width:500px) {
  .hero__guide {
    padding-top:0;
    padding-bottom:0.7em;
  }
  
  .hero__guide__logo-jp {
    width:270px;
    height:29px;
  }
  
  .hero__guide__skamoku {
    width:180px;
    margin-top:0.8em;
    font-size:87.5%;
  }
}


/*----------------------------------------------------------------------------------------------------

  お知らせ
  
----------------------------------------------------------------------------------------------------*/

.info__list {
  text-align:left;
}
  
.info__list dt {
  width:8.25em;
  float:left;
  clear:both;
  padding-top:0.5em;
}

.info__list dd {
  margin-left:8.25em;
  padding-top:0.5em;
}

.info__list dt:first-child,
.info__list dt:first-child + dd {
  padding-top:0;
}
  
.info__btn .l-Btn {
  display:block;
}

@media print,screen and (min-width:768px) {
  .info {
    width:1100px;
    margin-left:auto;
    margin-right:auto;
    padding-top:50px;
    padding-bottom:50px;
    position:relative;
  }
  
  .info__head__headline {
    width:320px;
    float:left;
    text-align:center;
    box-sizing:border-box;
    padding-left:35px;
    padding-right:35px;
    padding-top:15px;
    padding-bottom:75px;
    line-height:1.3;
  }
  
  .info--er .info__head__headline {
    padding-bottom:15px;
  }
    
  .info__head__headline span {
    display:block;
    font-size:56.3%;
    font-weight:200;
  }
  
  .info__list,
  .info--er__txt {
    width:780px;
    float:left;
    text-align:left;
    border-left:1px solid #e3e3e3;
    box-sizing:border-box;
    padding-left:35px;
  }
  
  .info--er__txt {
    padding-top:15px;
  }
  
  .info__btn {
    width:240px;
    position:absolute;
    left:40px;
    bottom:50px;
    box-sizing:border-box;
  }
}

@media screen and (max-width:767px) {
  .info {
    padding:2.3em 1.3em;
    position:relative;
  }
  
  .info__head__headline {
    line-height:1;
  }
  
  .info__head__headline span {
    font-size:62.5%;
    margin-right:0.25em;
    font-weight:200;
  }
  
  .info__btn {
    width:240px;
    margin-top:1.5em;
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
  }
  
  .info__list,
  .info--er__txt {
    padding-top:1.3em;
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
  }
}

@media screen and (max-width:500px) {
  .info {
    padding:1.7em 1em;
  }
  
  .info__head__headline {
    font-size:181.2%;
  }
  
  .info__list,
  .info--er__txt {
    padding-top:1em;
  }
  
  .info__btn {
    margin-top:1.3em;
  }
}


/*----------------------------------------------------------------------------------------------------

  院長紹介
  
----------------------------------------------------------------------------------------------------*/

.doctor-warp {
  background-color:#f4f7fb;
  position:relative;
  overflow:hidden;
}

@media print,screen and (min-width:768px) {
  .doctor {
    width:1100px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    box-sizing:border-box;
    position:relative;
    padding-right:490px;
    padding-top:60px;
    padding-bottom:60px;
  }
}

@media screen and (max-width:767px) {
  .doctor-warp {
    text-align:left;
  }
  
  .doctor {
    position:relative;
    z-index:2;
  }
}


/* 写真 ----------------------------------------*/

@media print,screen and (min-width:768px) {
  .doctor__photo {
    width:400px;
    height:496px;
    position:absolute;
    right:0;
    bottom:0;
  }
  
  .doctor__photo__name {
    width:100%;
    height:100%;
    position:relative;
    z-index:2;
    background:url(../image/top/doctor-pc.png) no-repeat center bottom;
  }

  .doctor__photo:before {
    content:"";
    border-width:1600px;
    border-style:solid;
    border-color:transparent #e6eef7 #e6eef7 transparent;
    position:absolute;
    left:50%;
    bottom:0;
    margin-left:50px;
    transition:margin-left 0.6s ease;
  }

  .no-csstransitions .doctor.animated .doctor__photo:before,
  .doctor.animated .doctor__photo:before {
    margin-left:-500px;
  }
}

@media screen and (max-width:767px) {  
  .doctor__photo {
    position:relative;
    width:100%;
    height:0;
    padding-top:55%;
    text-align:center;
    overflow:hidden;
  }
  
  .doctor__photo:before {
    content:"";
    border-width:100vw;
    border-style:solid;
    border-color:transparent #e6eef7 #e6eef7 transparent;
    position:absolute;
    left:-10vw;
    top:-50vw;
    margin-top:-80vw;
  }
  
  .doctor__photo:after {
    content:"";
    width:100%;
    max-width:700px;
    height:100%;
    background:url(../image/top/doctor-sp.png) no-repeat right bottom;
    background-size:contain;
    position:absolute;
    top:0;
    right:0;
    z-index:2;
  }
  
  .doctor__photo__name {
    width:100%;
    max-width:700px;
    height:100%;
    background:url(../image/top/doctor-sp-name.png) no-repeat center center;
    background-size:100% auto;
    position:absolute;
    top:0;
    left:auto;
    z-index:2;
  }
}


/* 挨拶 ----------------------------------------*/

@media screen and (max-width:767px) {
  .doctor__mess {
    padding:1.5em 1.3em;
  }
  
  .doctor__mess .sp-none {
    display:none;
  }
}

@media screen and (max-width:500px) {
  .doctor__mess {
    padding:1.3em 1em;
  }
}


/* 所属学会・資格取得 ----------------------------------------*/

.doctor__shikaku {
  position:relative;
  background-color:#fff;
}

.doctor__shikaku dt {
  padding-bottom:0.25em;
  line-height:1.4;
  font-family:"NotoSerif";
  font-weight:300;
}

.doctor__shikaku dd {
  padding-left:1.25em;
}

.doctor__shikaku dd:before {
  content:"●";
  font-size:75.0%;
  color:#739ece;
  display:inline-block;
  margin-right:0.5em;
  margin-left:-1.5em;
}

@media print,screen and (min-width:768px) {
  .doctor__shikaku {
    position:relative;
    padding:1.25em 1.75em;
    margin-top:40px;
  }
}

@media screen and (max-width:767px) {
  .doctor__shikaku {
    padding:1.3em;
    margin-left:1em;
    margin-right:1em;
    margin-bottom:1.5em;
  }
}

@media screen and (max-width:500px) {
  .doctor__shikaku {
    padding:1em;
    margin-left:0.7em;
    margin-right:0.7em;
    margin-bottom:1.3em;
  }
}


/*----------------------------------------------------------------------------------------------------

  nav
  
----------------------------------------------------------------------------------------------------*/

.ctNav ul {
  list-style:none;
  text-align:center;
}

.ctNav li {
  float:left;
  overflow:hidden;
  box-sizing:border-box;
  font-family:"NotoSerif";
  font-weight:200;
}

.ctNav li:first-child {
  margin-left:0;
}

.ctNav li img {
  vertical-align:bottom;
}

.ctNav li,
.ctNav li a,
.ctNav li a:visited,
.ctNav li a:hover { color:#fff; text-decoration:none; }

.ctNav li a {
  display:block;
  box-sizing:border-box;
}

.ctNav__photo {
  position:relative;
  overflow:hidden;
}
  
.ctNav__photo img {
  vertical-align:bottom;
}
  
.ctNav__txt {
  display:block;
  background-color:#9b8bc3;
  position:relative;
  z-index:2;
  line-height:1.4;
}


@media print,screen and (min-width:768px) {
  .ctNav ul {
    width:1100px;
    margin-top:60px;
    margin-bottom:90px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .ctNav li {
    width:260px;
    margin-left:20px;
  }

  .ctNav__photo {
    height:260px;
  }
  
  .ctNav__photo img {
    width:260px;
    height:260px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-130px;
    margin-left:-130px;
    transition:transform 0.4s ease;
  }
  
  .ctNav li:hover .ctNav__photo img {
    transform:scale(1.1);
  }
  
  .ctNav__txt {
    transition:background-color 0.2s ease;
    font-size:125.0%;
    padding:0.8em 1em 1em 1em;
  }
  
  .ctNav li:hover .ctNav__txt {
    background-color:#695a9b;
  }
}

@media screen and (max-width:767px) {
  .ctNav {
    overflow:hidden;
  }
    
  .ctNav ul {
    padding-left:1em;
    padding-right:1em;
    margin-top:1.5em;
    margin-bottom:4em;
    margin-left:-1%;
    margin-right:-1%;
    box-sizing:border-box;
  }
  
  .ctNav li {
    width:50%;
    padding-left:1%;
    padding-right:1%;
    margin-top:2%;
  }

  .ctNav__photo {
    height:0;
    padding-top:60%;
  }

  .ctNav__photo img {
    position:absolute;
    top:-20%;
    left:0;
  }
  
  .ctNav li:last-child .ctNav__photo img {
    top:inherit;
    bottom:-10%;
  }
  
  .ctNav__txt {
    font-size:125.0%;
    padding:0.7em 1em 0.9em 1em;
  }
}

@media screen and (max-width:640px) {
  .ctNav__txt {
    font-size:118.8%;
    padding:0.6em 1em 0.8em 1em;
  }
}

@media screen and (max-width:500px) {
  .ctNav ul {
    padding-left:0.7em;
    padding-right:0.7em;
    margin-top:1em;
    margin-bottom:3.3em;
  }

  .ctNav li {
  }
  
  .ctNav__txt {
    font-size:112.5%;
  }
}

/*----------------------------------------------------------------------------------------------------

  医院案内
  
----------------------------------------------------------------------------------------------------*/

.clinicInfo-warp {
  background-color:#f4f3f9;
}


/*-----------------------------------------------------------------------------------
  logo
-----------------------------------------------------------------------------------*/

.clinicInfo--logo {
  display:inline-block;
}

.clinicInfo--logo:before {
  content:"";
  display:block;
  border-radius:100%;
  margin-left:auto;
  margin-right:auto;
  background:url(../image/logo.png) no-repeat center top;
  background-color:#fff;
  background-size:contain;
}

.clinicInfo--logo-en {
  margin-left:auto;
  margin-right:auto;
  background:url(../image/logo-en.png) no-repeat center top;
  background-size:contain;
}

.clinicInfo--logo-jp {
  margin-left:auto;
  margin-right:auto;
  background:url(../image/logo-jp.png) no-repeat center top;
  background-size:contain;
}

@media print,screen and (min-width:768px) {
  .clinicInfo--logo {
    margin-top:-40px;
  }
  
  .clinicInfo--logo:before {
    width:80px;
    height:80px;
  }
  
  .clinicInfo--logo-en {
    width:240px;
    height:12px;
    margin-top:15px;
  }
  
  .clinicInfo--logo-jp {
    width:370px;
    height:40px;
    margin-top:25px;
  }
}

@media screen and (max-width:767px) {
  .clinicInfo--logo {
    margin-top:-30px;
  }
  
  .clinicInfo--logo:before {
    width:60px;
    height:60px;
  }
  
  .clinicInfo--logo-en {
    width:220px;
    height:11px;
    margin-top:0.7em;
  }
  
  .clinicInfo--logo-jp {
    width:330px;
    height:35px;
    margin-top:0.7em;
  }
}

@media screen and (max-width:500px) {
  .clinicInfo--logo {
    margin-top:-25px;
  }
  
  .clinicInfo--logo:before {
    width:50px;
    height:50px;
  }
  
  .clinicInfo--logo-en {
    width:180px;
    height:9px;
  }
  
  .clinicInfo--logo-jp {
    width:270px;
    height:29px;
  }
}


/*---------------------------------------------------------------------------------*/

@media print,screen and (min-width:768px) {
  .clinicInfo {
    width:1100px;
    margin-left:auto;
    margin-right:auto;
    padding-top:50px;
    padding-bottom:50px;
    position:relative;
  }
}

@media screen and (max-width:767px) {
  .clinicInfo {
    padding:2em 1em 1.5em 1em;
  }
}

@media screen and (max-width:500px) {
  .clinicInfo {
    padding:1.5em 0.7em 1em 0.7em;
  }
}


/*-----------------------------------------------------------------------------------
  tel・住所
-----------------------------------------------------------------------------------*/

.clinicInfo__ad__guide {
  margin-top:1.5em;
  padding-top:1.25em;
  padding-bottom:1.25em;
  line-height:1.5;
  border-top:1px solid rgba(130,110,180,0.30);
  border-bottom:1px solid rgba(130,110,180,0.30);
  color:#826eb4;
}
  
.clinicInfo__ad__guide b {
  display:inline-block;
  margin-bottom:0.25em;
  font-size:125.0%;
}

.clinicInfo__ad__guide b .pc-none {
  display:none;
}

.clinicInfo__ad address {
  line-height:1.5;
  padding-top:0.25em;
}

.clinicInfo__ad address small {
  display:inline-block;
  padding-right:1em;
}
  
@media print,screen and (min-width:768px) {
  .clinicInfo__ad {
    width:460px;
    float:left;
  }
  
  .clinicInfo__ad .l-tel {
    margin-top:0.25em;
    margin-bottom:25px;
  }
  
  .clinicInfo__ad-photo {
    position:absolute;
    left:-5px;
    bottom:0;
  }
}

@media screen and (max-width:767px) {
  .clinicInfo__ad-photo {
    margin-top:-1.25em;
    vertical-align:bottom;
  }
  
  .clinicInfo__ad__guide {
    margin-top:1.3em;
    padding-top:0.7em;
    padding-bottom:0.7em;
  }
  
  .clinicInfo__ad .l-tel {
    display:block;
    background-color:#fff;
    border-radius:3px;
    padding:1.25em 0.75em;
    margin-bottom:1em;
  }
}

@media screen and (max-width:500px) {
  .clinicInfo__ad__guide b .pc-none {
    display:inherit;
  }
  
  .clinicInfo__ad address small {
    display:block;
    padding-right:0;
  }
  
  .clinicInfo__ad-photo {
    margin-top:-1em;
  }
  
  .clinicInfo__ad .l-tel {
    padding:1em 0.75em;
  }
}


/*-----------------------------------------------------------------------------------
  access
-----------------------------------------------------------------------------------*/

.clinicInfo__access .l-Btn {
  display:block;
}
  
.clinicInfo__access__map {
  background-color:#fff;
  border-radius:3px;
  overflow:hidden;
}
  
.clinicInfo__access__map img { 
  vertical-align:bottom;
}

@media print,screen and (min-width:768px) {
  .clinicInfo__access {
    width:590px;
    float:right;
  }
  
  .clinicInfo__access__map {
    margin-bottom:15px;
  }
}

@media print,screen and (min-width:501px) {
  .clinicInfo__access .l-Btn {
    padding-top:0.75em;
    padding-bottom:0.75em;
  }
}

@media screen and (max-width:767px) {
  .clinicInfo__access__map {
    margin-bottom:1em;
  }
}

@media screen and (max-width:500px) {
  .clinicInfo__access .l-Btn small {
    display:none;
  }
}


/*----------------------------------------------------------------------------------------------------

  提携医療機関
  
----------------------------------------------------------------------------------------------------*/

.banner__headline {
  line-height:1;
  color:#322d69;
}

.banner__list {
  list-style:none;
  box-sizing:border-box;
}

.banner__list li {
  display:inline-block;
  box-sizing:border-box;
  text-align:center;
}

.banner__list li img {
  vertical-align:bottom;
  width:100%;
  max-width:348px;
}

.banner__list li a {
  display:block;
  border:1px solid #dcdcdc;
  border-radius:3px;
  overflow:hidden;
}

@media print,screen and (min-width:768px) {
  .banner {
    padding-top:50px;
    padding-bottom:50px;
  }
  
  .banner__list {
    width:1100px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    letter-spacing:-1em;
    font-size:0;
  }
  
  .banner__list li {
    width:350px;
    margin-left:25px;
  letter-spacing:inherit;
  }

  .banner__list li:first-child {
    margin-left:0;
  }
  
  .banner__list li a {
    transition:border-color 0.2s ease;
  }
  
  .banner__list li a:hover {
    border-color:#739ece;
  }
}

@media screen and (max-width:767px) {
  .banner {
    padding-top:2em;
    padding-bottom:2em;
    padding-left:1em;
    padding-right:1em;
    overflow:hidden;
  }
  
  .banner__list {
    margin-left:-1%;
    margin-right:-1%;
    margin-top:1em;
  }
  
  .banner__list li {
    display:block;
    float:left;
    width:50%;
    padding-left:1%;
    padding-right:1%;
    margin-top:2%;
  }
}

@media screen and (max-width:500px) {
  .banner {
    padding-top:1.5em;
    padding-bottom:1.5em;
    padding-left:0.7em;
    padding-right:0.7em;
  }
  
  .banner__list {
    margin-top:0.8em;
  }
}