@charset "utf-8";

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


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

body { background-color:#fff; }

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

  mv
  
----------------------------------------------------------------------------------------------------*/

#mv-warp {
  width:100%;
  min-width:1160px;
  height:500px;
  position:relative;
  overflow:hidden;
}

#mv_container {
  width:100%;
  max-width:1100px;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:2;
}

#mv_txt {
  width:535px;
  position:absolute;
  left:0;
  top:100px;
  display:inline-block;
  z-index:2;
  text-align:left;
  font-family:"NotoSerif";
  font-weight:300;
  font-size:156.2%;
  line-height:1.8;
}

#mv_hrs {
  width:505px;
  position:absolute;
  left:0;
  bottom:60px;
}

@media screen and (max-width:640px) {
  #mv-warp {
    min-width:100%;
    height:400px;
  }
  
  #mv-warp:before { display:none; }
  #mv_hrs { display:none; }
  
  #mv_txt {
    white-space:nowrap;
    font-size:143.8%;
    font-weight:400;
    text-align:center;
    width:auto;
    right:inherit;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color:rgba(255,255,255,0.8);
    padding:1.75rem 1.5rem;
    line-height:1.7;
  }
}

@media screen and (max-width:500px) {
  #mv-warp { height:350px; }
  #mv_txt {  font-size:137.5%; }
}

@media screen and (max-width:420px) {
  #mv_txt { font-size:125%;  }
}

@media screen and (max-width:360px) {
  #mv_txt { font-size:118.8%; }
}


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

#mv_mainSlide {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
}

.mv_mainSlide__container {
  width:100%;
  height:100%;
  list-style:none;
}

.mv_mainSlide__container li {
  width:100%;
  height:500px;
  position:relative;
}

.mv_mainSlide__container li img {
  width:100%;
  min-width:1800px;
  min-height:500px;
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

.lte-ie8 .mv_mainSlide__container li img {
  left:0;
  top:0;
}

@media print {
  .mv_mainSlide__container li img {
    left:-18%;
    top:inherit;
  }
}

@media screen and (max-width:640px) {
  .mv_mainSlide__container li {
    height:400px;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
  }
  
  .mv_mainSlide__container li img { display:none; }
  
  .mv_mainSlide__container li.photo01 { background-image:url(../image/top/slide/s01.jpg); }
  .mv_mainSlide__container li.photo02 { background-image:url(../image/top/slide/s02.jpg); }
  .mv_mainSlide__container li.photo03 { background-image:url(../image/top/slide/s03.jpg); }
}

@media screen and (max-width:500px) {
  .mv_mainSlide__container li {
    height:350px;
  }
}


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

.mv_mainSlide__pagination {
  width:100%;
  max-width:1100px;
  line-height:0;
  position:absolute;
  bottom:24px;
  left:50%;
  margin-left:-550px;
  z-index:11;
}

.mv_mainSlide__pagination .slick-dots {
  text-align:center;
}

.mv_mainSlide__pagination .slick-dots li button {
  width:12px;
  height:12px;
  float:left;
}

.mv_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 #fff;
  opacity:1;
}

.mv_mainSlide__pagination .slick-dots li.slick-active button:before {
  background-color:#fff;
  opacity:1;
}

@media screen and (max-width:640px) {
  .mv_mainSlide__pagination {
    margin-left:0;
    left:0;
    bottom:1.25rem;
  }
  
  .mv_mainSlide__pagination .slick-dots {
    text-align:center;
  }
}


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

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

#info {
  width:100%;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-top:50px;
  padding-bottom:50px;
  position:relative;
  display:table;
}

#info .info_hd {
  width:250px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  padding-bottom:70px;
  box-sizing:border-box;
}

#info.error .info_hd { padding-bottom:0; }

#info .l-hdline { padding-right:50px; }

#info .info_list,
#info.error .info_error {
  width:850px;
  display:table-cell;
  vertical-align:top;
  border-left:1px solid #e6e4e1;
  padding-left:50px;
  box-sizing:border-box;
  text-align:left;
}

#info.error .info_error { padding-top:0.75em; }
  
#info .l-btn {
  width:200px;
  position:absolute;
  left:0;
  bottom:50px;
  box-sizing:border-box;
}
  
#info .info_list dt {
  width:9.5em;
  float:left;
  clear:both;
  padding-top:0.5em;
}

#info .info_list dd {
  margin-left:9.5em;
  padding-top:0.5em;
}

#info .info_list dt:first-child,
#info .info_list dt:first-child + dd {
  padding-top:0;
}

@media screen and (max-width:640px) {
  #info {
    padding:2rem 0.75rem 2.5rem 0.75rem;
    display:block;
    box-sizing:border-box;
  }
  
  #info.error { padding-bottom:1rem; }

  #info .info_hd {
    width:100%;
    display:block;
    padding-bottom:0;
  }
  
  #info .l-hdline { padding-right:0; }
  
  #info .info_list,
  #info.error .info_error {
    width:100%;
    display:block;
    border-left:0;
    padding-left:0;
    padding-top:1.5rem;
    padding-bottom:2rem;
  }

  #info.error .info_error { text-align:center; }
  
  #info .info_list dt { width:9.25rem; }
  #info .info_list dd { margin-left:9.25rem; }
  
  #info .l-btn {
    width:220px;
    position:relative;
    left:inherit;
    bottom:inherit;
  }
}


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

  診療カレンダー
  
----------------------------------------------------------------------------------------------------*/

#scalendar {
  background-color:#efede6;
  padding-top:50px;
  padding-bottom:60px;
}

#scals {
  width:100%;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.cal {
  width:535px;
  float:left;
  text-align:center;
}

.cal:first-child { margin-right:30px; }

.calMonth {
  font-family:"NotoSerif";
  color:#006f6f;
  font-size:137.5%;
  font-weight:100;
  line-height:1.5;
}

.calMonth .m {
  font-size:175%;
  font-weight:500;
  display:inline-block;
  margin-left:0.25em;
  margin-right:0.25em;
}

.calTbl {
  width:100%;
  border-collapse:collapse;
  margin-top:0.5em;
}

.calTbl thead td {
  background-color:#cdc8b1;
  color:#fff;
  width:14%;
  padding:0.5em 0 0.5em 0.5em;
  font-size:87.5%;
}
.calTbl thead td:last-child { width:16%; padding-right:0.5em; }

.calTbl tbody tr { border-bottom:1px solid #e6e4e1; }
.calTbl tbody tr:last-child { border-bottom:0; }

.calTbl tbody td {
  font-size:75%;
  background-color:#fff;
  padding:0.25em 0 0.75em 0.75em;
  vertical-align:top;
}
.calTbl tbody td:last-child { padding-right:0.75em; }

.calTbl tbody td .date {
  text-align:left;
  color:#8b8878;
  padding:0 0.25em;
}

.calTbl tbody td span {
  font-size:93.8%;
  display:block;
  text-align:center;
  background-color:#f9e2e4;
  border-radius:2px;
  color:#d73b47;
  line-height:1;
  padding:5px 2px;
  margin-top:0.25em;
  margin-top:0.25rem;
}

.calTbl tbody td p {
  font-size:93.8%;
  text-align:left;
  line-height:1.4;
  margin-top:0.25em;
  margin-top:0.25rem;
}

@media screen and (max-width:640px) {
  #scalendar {
    padding:2rem 0.75rem;
  }
  
  .cal {
    width:100%;
    float:none;
    margin-top:1rem;
  }
  
  .cal:first-child { margin-right:0; }

  .calTbl {
    min-width:480px;
    margin-top:0.75rem;
  }
}


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

  診療案内
  
----------------------------------------------------------------------------------------------------*/

#medical-warp {
  background-color:#f7f6f2;
  padding-top:50px;
  padding-bottom:60px;
}

#medical-warp p.txt {
  padding-top:1.25rem;
  padding-bottom:2rem;
}

#medical {
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  list-style:none;
  font-size:93.8%;
}

#medical a,
#medical a:visited,
#medical a:hover { color:inherit; text-decoration:none; }

#medical li {
  /*width:260px;*/
  width: calc(100%/3 - 20px);
  float:left;
  margin:0 10px;
  box-sizing:border-box;
}

#medical li .inner {
  width:100%;
  height:100%;
  padding:2.25rem 1rem 1.75rem 1rem;
  box-sizing:border-box;
  background-color:#fff;
  position:relative;
}

#medical li .sbj {
  font-family:"NotoSerif";
  font-weight:400;
  font-size:150%;
  display:block;
  margin-bottom:0.75rem;
  position:relative;
}

#medical li.geka .sbj { color:#008b8b; }
#medical li.naika .sbj { color:#389f60; }
#medical li.dm .sbj { color:#0877a2; }
#medical li.kenshin .sbj { color:#f2aa1f; }

#medical li .sbj:before {
  content:"";
  width:100%;
  height:76px;
  display:block;
  background-repeat:no-repeat;
  background-position:center center;
  margin-bottom:0.75rem;
}

#medical li.geka .sbj:before { background-image:url(../image/top/icon_geka_s.png?v=2); }
#medical li.naika .sbj:before { background-image:url(../image/top/icon_naika_s.png?v=2); }
/*#medical li.dm .sbj:before { background-image:url(../image/top/icon_dm_s.png); }*/
#medical li.kenshin .sbj:before { background-image:url(../image/top/icon_kenshin_s.png); }

@media screen and (max-width:640px) {
  #medical li .sbj:before { background-size:contain; }
  #medical li.geka .sbj:before { background-image:url(../image/top/icon_geka.png); }
  #medical li.naika .sbj:before { background-image:url(../image/top/icon_naika.png); }
  #medical li.dm .sbj:before { background-image:url(../image/top/icon_dm.png); }
  #medical li.kenshin .sbj:before { background-image:url(../image/top/icon_kenshin.png); }
}

@media screen and (max-width:640px) {
  #medical-warp {
    padding:2rem 0;
  }
  
  #medical-warp p.txt {
    padding:1rem 0.75rem;
    text-align:left;
  }
  
  #medical {
    padding:0 0.375rem;
  }
  
  #medical li {
    /*width:50%;*/
    width:100%;
    padding:0.75rem 0.375rem 0 0.375rem;
    margin:0;
  }
  
  #medical li .inner {
    padding:2rem 1rem 1.5rem 1rem;
  }
  
  #medical li .sbj:before {
    height:70px;
  }
}

@media screen and (max-width:500px) {
  #medical li .sbj:before {
    height:13vw;
  }
}

#medical li .inner {
  position:relative;
}

#medical li .inner p {
  padding-bottom:1.5rem;
}

#medical li .ar {
  content:"";
  width:20px;
  height:20px;
  box-sizing:border-box;
  position:relative;
  display:inline-block;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  border-width:1px;
  border-style:solid;
  border-radius:50%;
  -webkit-border-radius:50%;
  position:absolute;
  right:1rem;
  bottom:1rem;
  border-color:#cdc8b1;
  background-color:#fff;
}

#medical li .ar:after {
  content:"";
  position:absolute;
  left:5px;
  top:6px;
  width:5px;
  height:5px;
  border-top:1px solid #b7ae8c;
  border-right:1px solid #b7ae8c;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

@media screen and (min-width:641px) {
  #medical li .inner .ar,
  #medical li .inner.ar:after { transition:border-color 0.2s ease, background 0.2s ease; }
  #medical li .inner:hover .ar { border-color:#cdc8b1; background-color:#cdc8b1; }
  #medical li .inner:hover .ar:after { border-color:#fff; }
}


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

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

#ctNav {
  width:1020px;
  margin-left:auto;
  margin-right:auto;
  list-style:none;
  padding-top:60px;
  padding-bottom:60px;
}

#ctNav li {
  width:300px;
  float:left;
  margin:0 20px;
  text-align:left;
}

#ctNav li .photo {
  overflow:hidden;
  height:210px;
  line-height:0;
  margin-bottom:0.75em;
  position:relative;
}
  
#ctNav li .photo img {
  vertical-align:bottom;
  width:310px;
  height:210px;
  transition:transform 0.5s ease;
}

#ctNav li p {
  font-size:93.8%;
  line-height:1.6;
}

#ctNav li .sbj {
  font-family:"NotoSerif";
  font-weight:400;
  font-size:150%;
  display:inline-block;
  margin-bottom:0.15em;
}

#ctNav li a,
#ctNav li a:visited,
#ctNav li a:hover { color:inherit; text-decoration:none; }
.lte-ie8 #ctNav li a:hover .sbj { color:#008b8b; }

@media screen and (min-width:641px) {
  #ctNav li:hover .photo img {
    transform:scale(1.1);
  }
  #ctNav li a:hover .sbj { color:#008b8b; }
}

@media screen and (max-width:640px) {
  #ctNav {
    width:100%;
    padding:0 0.75rem 2rem 0.75rem;
    box-sizing:border-box;
  }
  
  #ctNav li {
    width:100%;
    float:none;
    margin:2rem 0 0 0;
    box-sizing:border-box;
    text-align:center;
  }

  #ctNav li .photo {
    height:0;
    padding-top:40%;
    margin-bottom:0.5rem;
  }
    
  #ctNav li .photo img {
    width:100%;
    max-width:400px;
    height:auto;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    transition:none;
  }
  
  #ctNav li .sbj { color:#008b8b; }
}


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

  当院の特徴
  
----------------------------------------------------------------------------------------------------*/

#point-warp {
  background:url(../image/top/point_bg.png) no-repeat center top;
  background-size:cover;
  background-color:#bfe3cc;
  padding-top:50px;
  padding-bottom:60px;
}

#point {
  max-width:1130px;
  margin-left:auto;
  margin-right:auto;
  padding-top:10px;
  list-style:none;
  counter-reset:number;
}

#point li {
  counter-increment:number;
  background-color:#fff;
  width:535px;
  min-height:221px;
  float:left;
  margin-left:15px;
  margin-right:15px;
  margin-top:50px;
  text-align:left;
  position:relative;
}

#point li:before {
  content:"0"counter(number);
  width:2em;
  display:block;
  background-color:#389f60;
  text-align:center;
  color:#fff;
  position:absolute;
  left:0;
  top:-1em;
  z-index:2;
  line-height:1.4;
  padding-top:0.25em;
  padding-bottom:0.25em;
  box-sizing:border-box;
  font-family:"NotoSerif";
  font-weight:400;
  font-size:156.2%;
}

#point li p {
  font-size:93.8%;
  line-height:1.6;
  padding:2.5em 20px 20px 20px;
  margin-right:240px;
}

#point li .sbj {
  font-family:"NotoSerif";
  font-weight:400;
  font-size:162.5%;
  display:inline-block;
  padding-bottom:0.25em;
  margin-bottom:0.5em;
  color:#389f60;
  position:relative;
}

#point li .sbj:after {
  content:"";
  display:inline-block;
  width:100%;
  height:1px;
  background-color:#60b280;
  position:absolute;
  left:0;
  bottom:0;
}

#point li p:before {
  content:"";
  width:240px;
  height:100%;
  display:block;
  position:absolute;
  right:0;
  top:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}

#point li.no01 p:before { background-image:url(../image/top/point-photo01.jpg); }
#point li.no02 p:before { background-image:url(../image/top/point-photo02.jpg); }
#point li.no03 p:before { background-image:url(../image/top/point-photo03.jpg); }
#point li.no04 p:before { background-image:url(../image/top/point-photo04.jpg); }

@media screen and (max-width:640px) {
  #point-warp {
    padding:2rem 0.75rem;
    background:url(../image/top/point_sp_bg.png) no-repeat center top;
    background-size:contain;
    background-color:#bfe3cc;
  }
  
  #point {
    padding-top:0;
  }
  
  #point li {
    width:100%;
    min-height:180px;
    float:none;
    margin-left:0;
    margin-right:0;
    margin-top:3rem;
  }
  
  #point li p {
    padding:2.25rem 1.25rem 1.25rem 1.25rem;
    margin-right:40%;
  }
  
  #point li p:before { width:40%; }
}

@media screen and (max-width:500px) {
  #point li { font-size:93.8%; }
}