@charset "utf-8";

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


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

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

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

.mainSlide {
  width:1100px;
  height:550px;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;
  position:relative;
  text-align:center;
  overflow:hidden;
}

.mainSlide-container {
  width:1100px;
  height:550px;
}

.mainSlide-container li img {
  border-radius:4px;
}

@media screen and (max-width:767px) {
  .mainSlide {
    width:100%;
    height:inherit;
    position:relative;
    left:inherit;
    top:inherit;
    margin-top:0;
  }
  
  .mainSlide-container {
    width:130%;
    height:inherit;
    margin-left:-15%;
    left:inherit;
    top:inherit;
    position:relative;
  }
  
  .mainSlide-container li {
    width:inherit;
    margin:0 0;
    opacity:1;
  }
  
  .mainSlide-container li img {
    border-radius:0;
  }
}

@media print {
  .mainSlide .mainSlide-container img {
    width:1100px;
    max-width:1100px;
    height:550px;
  }
}


/* arrows /-------------------------------------------------------------------- */

.mainSlide .arrow {
  width:140px;
  margin-left:-1px;
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  border-radius:0 3px 0 0;
  background-color:#fff;
}

.mainSlide .slick-prev,
.mainSlide .slick-next {
  width:70px;
  height:50px;
  -moz-background-size:auto;
  -webkit-background-size:auto;
  background-size:auto 25px;
  background-repeat:no-repeat;
  background-position:center center;
  float:left;
}

.mainSlide .slick-prev { background-image:url(../image/icon/prev-black.svg); }
.mainSlide .slick-prev:hover { background-image:url(../image/icon/prev-blue.svg); }
.no-svg .mainSlide .slick-prev { background-image:url(../image/icon/prev-black.png); }
.no-svg .mainSlide .slick-prev:hover { background-image:url(../image/icon/prev-blue.png); }
@media print {
  .mainSlide .slick-prev { background-image:url(../image/icon/prev-black.png); }
  .mainSlide .slick-prev:hover { background-image:url(../image/icon/prev-blue.png); }
}

.mainSlide .slick-next {
  background-image:url(../image/icon/next-black.svg);
  position:relative;
}
.mainSlide .slick-next:hover { background-image:url(../image/icon/next-blue.svg); }
.no-svg .mainSlide .slick-next { background-image:url(../image/icon/next-black.png); }
.no-svg .mainSlide .slick-next:hover { background-image:url(../image/icon/next-blue.png); }
@media print {
  .mainSlide .slick-next { background-image:url(../image/icon/next-black.png); }
  .mainSlide .slick-next:hover { background-image:url(../image/icon/next-blue.png); }
}

.mainSlide .slick-next:before {
  content:"";
  width:1px;
  height:16px;
  background-color:#e3e3e3;
  display:inline-block;
  position:absolute;
  left:0;
  top:17px;
  z-index:2;
}

@media screen and (max-width:767px) {
  .mainSlide .arrow {
    display:none;
  }
}


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

.mainSlide .pagination {
  line-height:0;
  position:absolute;
  bottom:1.25em;
  right:1em;
  text-align:center;
  z-index:3;
}

.mainSlide .slick-dots li button {
  width:14px;
  height:14px;
}

.mainSlide .slick-dots li button:before {
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:100%;
  box-sizing:border-box;
  border:1px solid #fff;
  opacity:1;
}

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

@media screen and (max-width:767px) {
  .mainSlide .pagination {
    width:100%;
    right:inherit;
  }
}

@media screen and (max-width:500px) {
  .mainSlide .slick-dots li button,
  .mainSlide .slick-dots li button:before {
    width:12px;
    height:12px;
  }
  
  .mainSlide .slick-dots li {
    margin:0 5px;
  }
}

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

.cols2 {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.cols2 .col {
  width:520px;
  text-align:left;
  box-sizing:border-box;
}

@media screen and (max-width:767px) {
  .cols2 .col {
    width:100%;
    float:none;
    padding-left:1em;
    padding-right:1em;
  }
}


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

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

#info {
  float:left;
  margin-top:60px;
  margin-bottom:60px;
  position:relative;
}

@media screen and (max-width:767px) {
  #info {
    margin-top:2em;
    margin-bottom:2em;
  }
}

@media screen and (max-width:500px) {
  #info {
    margin-top:1.5em;
    margin-bottom:1.5em;
  }
}

#info h2 {
  font-size:175.0%;
  font-weight:500;
}

#info .txtLink {
  position:absolute;
  right:0;
  top:1em;
  color:inherit;
  text-decoration:none;
}

#info .txtLink:hover {
  color:#2980c2;
  text-decoration:underline;
}

.info--er__txt {
  margin-top:0.5em;
}

.infoList {
  border-top:1px solid #e3e3e3;
  list-style:none;
  margin-top:0.5em;
}

.infoList li {
  border-bottom:1px solid #e3e3e3;
  padding:0.75em 0;
}

.infoList li a {
  display:block;
}

.infoList li a,
.infoList li a:visited,
.infoList li a:hover {
  text-decoration:none;
}

.infoList li small {
  display:inline-block;
  width:9em;
  float:left;
  clear:both;
  color:#999;
}

.infoList li p {
  margin-left:9em;
}

.infoList li a p { text-decoration:underline; }
.infoList li a:hover p { text-decoration:none; }

@media screen and (max-width:767px) {
  #info .txtLink {
    right:1em;
    top:0.75em;
  }
}

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

  web予約
  
----------------------------------------------------------------------------------------------------*/

#web-reserve {
  float:right;
  margin-top:60px;
  margin-bottom:60px;
  position:relative;
}

@media screen and (max-width:767px) {
  #web-reserve {
    margin-top:0;
    margin-bottom:2em;
  }
}

@media screen and (max-width:500px) {
  #web-reserve {
    margin-bottom:1.5em;
  }
}

#web-reserve h2 {
  font-size:175.0%;
  font-weight:500;
}

#web-reserve .txtLink {
  position:absolute;
  right:0;
  top:1em;
  color:inherit;
  text-decoration:none;
}

#web-reserve .txtLink:hover {
  color:#2980c2;
  text-decoration:underline;
}

.web-reserveList {
  border-top:1px solid #e3e3e3;
  list-style:none;
  margin-top:0.5em;
}

.web-reserveList li:first-child{
	padding-top:0.75em;
}

.web-reserveList li:not(:last-child) {
  /*border-bottom:1px solid #e3e3e3;*/
  padding-bottom:0.75em;
}

.web-reserveList li a {
  display:block;
}

.web-reserveList li a,
.web-reserveList li a:visited,
.web-reserveList li a:hover {
  text-decoration:none;
}

.web-reserveList li small {
  display:inline-block;
  width:9em;
  float:left;
  clear:both;
  color:#999;
}

.web-reserveList li p {
  margin-left:9em;
}

.web-reserveList li a p { text-decoration:underline; }
.web-reserveList li a:hover p { text-decoration:none; }

@media screen and (max-width:767px) {
  #web-reserve .txtLink {
    right:1em;
    top:0.75em;
  }
}
/*----------------------------------------------------------------------------------------------------

  ブログ
  
----------------------------------------------------------------------------------------------------*/

#blog {
  float:right;
  margin-top:60px;
  margin-bottom:60px;
  position:relative;
}

@media screen and (max-width:767px) {
  #blog {
    margin-top:0;
    margin-bottom:2em;
  }
}

@media screen and (max-width:500px) {
  #blog {
    margin-bottom:1.5em;
  }
}

#blog h2 {
  font-size:175.0%;
  font-weight:500;
}

#blog .txtLink {
  position:absolute;
  right:0;
  top:1em;
  color:inherit;
  text-decoration:none;
}

#blog .txtLink:hover {
  color:#2980c2;
  text-decoration:underline;
}

.blogList {
  border-top:1px solid #e3e3e3;
  list-style:none;
  margin-top:0.5em;
}

.blogList li {
  border-bottom:1px solid #e3e3e3;
  padding:0.75em 0;
}

.blogList li a {
  display:block;
}

.blogList li a,
.blogList li a:visited,
.blogList li a:hover {
  text-decoration:none;
}

.blogList li small {
  display:inline-block;
  width:9em;
  float:left;
  clear:both;
  color:#999;
}

.blogList li p {
  margin-left:9em;
}

.blogList li a p { text-decoration:underline; }
.blogList li a:hover p { text-decoration:none; }

@media screen and (max-width:767px) {
  #blog .txtLink {
    right:1em;
    top:0.75em;
  }
}


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

  診療時間
  
----------------------------------------------------------------------------------------------------*/

#hrs {
  margin-bottom:60px;
}

#hrs h3 {
  font-size:175.0%;
  font-weight:500;
  text-align:left;
}

.hrsTbl {
  float:left;
}

.hrsInfo {
  float:right;
}

html.font-large .hrsTbl br {
  display:inherit;
}

@media screen and (max-width:767px) {
  #hrs {
    margin-bottom:2em;
  }
  
  #hrs h3 {
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .hrsInfo {
    padding-top:0.5em;
  }
  
  .hrsInfo .sp-none {
    display:none;
  }
}

@media screen and (max-width:500px) {
  #hrs {
    margin-bottom:1.75em;
  }
}


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

  院長から
  
----------------------------------------------------------------------------------------------------*/

#message {
  background-color:#e8f5fb;
}

.message-inner {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  padding-top:60px;
  padding-bottom:60px;
  position:relative;
}

.message-inner:after {
  width:161px;
  height:211px;
  content:url(../image/top/message-img.png);
  position:absolute;
  right:0;
  bottom:-30px;
}

#message h4 {
  font-size:175.0%;
  font-weight:500;
}

#message h4 b {
  color:#2980c2;
  font-size:137.5%;
  font-weight:500;
  display:inline-block;
  margin-left:0.25em;
}

#message h4 rt {
  font-size:37.5%;
  font-weight:normal;
}

.no-ruby #message h4 ruby {
  display:inline-block;
  position:relative;
}

.no-ruby #message h4 rt {
  position:absolute;
  width:100%;
  left:0;
  top:-1em;
  text-align:center;
  white-space:nowrap;
}

#message h4 b span {
  font-size:77.5%;
}

.message--txt {
  padding-top:0.75em;
  padding-bottom:1.5em;
}

#message h4,
.message--txt,
#message .lBtn {
  margin-left:380px;
}

.message--photo {
  line-height:0;
  position:absolute;
  left:0;
  top:50px;
}

@media screen and (max-width:767px) {
  .message-inner {
    padding:1.75em 1em 1.5em 1em;
  }
  
  .message-inner:after {
    display:none;
  }
  
  #message h4 {
    text-align:center;
    font-size:156.2%;
  }
  
  #message h4,
  .message--txt,
  #message .lBtn {
    margin-left:0;
  }
  
  .message--photo {
    position:inherit;
    left:inherit;
    top:inherit;
    text-align:center;
    padding-top:0.25em;
  }
  
  .message--photo img {
    width:60%;
    max-width:220px;
  }

  .message--txt {
    padding-top:1em;
    padding-bottom:1em;
  }
  
  .message--txt br.sp-none {
    display:none;
  }
  
  #message .lBtn {
    display:block;
  }
}

@media screen and (max-width:640px) {
  #message h4 {
    font-size:143.8%;
  }
}

@media screen and (max-width:500px) {
  .message-inner {
    padding:1.25em 1em;
  }

  #message h4 b {
    display:block;
    margin-left:0;
    padding-top:0.15em;
  }
  
  .no-ruby #message h4 b {
    padding-top:0.25em;
  }
}


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

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

#clinicInfo {
  margin-top:50px;
  margin-bottom:40px;
  text-align:left;
}

@media screen and (max-width:767px) {
  #clinicInfo {
    margin-top:2em;
    margin-bottom:2em;
  }
}

@media screen and (max-width:500px) {
  #clinicInfo {
    margin-top:1.5em;
    margin-bottom:1.5em;
  }
}


/*-----------------------------------------------------------------------------------
  住所
-----------------------------------------------------------------------------------*/

.clinicInfo--ad.col {
  float:left;
  text-align:center;
}

@media screen and (max-width:767px) {
  .clinicInfo--ad.col {
    float:none;
  }
}

.clinicInfo--ad h5 {
  width:100%;
  height:70px;
  margin-bottom:1em;
  background-image:url(../image/logo.svg);
  background-position:center top;
  background-repeat:no-repeat;
  background-size:contain;
}

.no-svg .clinicInfo--ad h5 { background-image:url(../image/logo.png); }
@media print {
  .clinicInfo--ad h5 { background-image:url(../image/logo.png); }
}

@media screen and (max-width:767px) {
  .clinicInfo--ad h5 {
    height:60px;
    margin-bottom:0.75em;
  }
  
  .clinicInfo--ad .telLinkBtn {
    margin-top:1em;
  }
}

@media screen and (max-width:500px) {
  .clinicInfo--ad h5 {
    height:55px;
    margin-bottom:0.5em;
  }
}

@media screen and (max-width:420px) {
  .clinicInfo--ad h5 {
    height:50px;
  }
}


/* 宮川コンタクト ----------------------------------------*/

.clinicInfo--ad .miyakawaContactlens {
  text-align:center;
  padding-top:2em;
}

.miyakawaContactlens--head {
  display:block;
  position:relative;
  margin-bottom:1em;
  text-align:center;
  color:#47a7da;
}

.miyakawaContactlens--head:before,
.miyakawaContactlens--head span:before,
.miyakawaContactlens--head span:after {
  content:"";
  width:100%;
  height:1px;
  display:block;
  background-color:#a0d4ef;
  position:absolute;
  left:0;
}

.miyakawaContactlens--head:before { top:50%; }

.miyakawaContactlens--head span {
  display:inline-block;
  background-color:#fff;
  border-top:1px solid #a0d4ef;
  border-bottom:1px solid #a0d4ef;
  position:relative;
  padding:0.15em 3em;
}

.miyakawaContactlens--head span:before { top:-3px; }
.miyakawaContactlens--head span:after { bottom:-3px; }


.miyakawaContactlens--logo {
  width:100%;
  height:30px;
  background-image:url(../image/logo-n--miyakawaContactlens.svg);
  background-position:center top;
  background-repeat:no-repeat;
  background-size:contain;
  margin-bottom:1.25em;
}

.no-svg .miyakawaContactlens--logo { background-image:url(../image/logo-n--miyakawaContactlens.png); }
@media print {
  .miyakawaContactlens--logo { background-image:url(../image/logo-n--miyakawaContactlens.png); }
}

@media screen and (max-width:500px) {
  .miyakawaContactlens--logo {
    height:28px;
  }
}

@media screen and (max-width:420px) {
  .miyakawaContactlens--logo {
    height:25px;
  }
}

.miyakawaContactlens--photo {
  line-height:0;
  text-align:center;
  display:inline-block;
  width:180px;
  float:left;
  margin-bottom:1em;
}

.miyakawaContactlens--photo img {
  border-radius:4px;
}

.miyakawaContactlens--ad {
  padding-left:205px;
  padding-bottom:1em;
  font-size:93.8%;
  text-align:left;
}

.miyakawaContactlens .lBtn {
  display:block;
  margin-top:0.95em;
}

html.font-large .miyakawaContactlens--ad {
  font-size:93.8%;
  line-height:1.5;
}

html.font-large .lBtn {
  margin-left:-205px;
  clear:both;
  margin-top:1em;
}

@media screen and (max-width:767px) {
  .miyakawaContactlens--photo {
    width:100%;
    padding-right:0;
    float:none;
  }
  
  .miyakawaContactlens--photo img {
    width:100%;
    max-width:400px;
  }
  
  .miyakawaContactlens--ad {
    font-size:100%;
    padding-left:0;
    text-align:center;
    padding-bottom:0;
  }
  
  .miyakawaContactlens .lBtn {
    clear:both;
    margin-top:1em;
    font-size:118.8%;
  }
  
  .miyakawaContactlens .lBtn--ic {
    width:20px;
    height:20px;
    margin-top:-10px;
  }
}

@media screen and (max-width:500px) {
  .miyakawaContactlens .lBtn--ic {
    width:17px;
    height:17px;
    margin-top:-8.5px;
  }
}
  

/*-----------------------------------------------------------------------------------
  地図
-----------------------------------------------------------------------------------*/

.clinicInfo--map {
  float:right;
  padding-top:20px;
}

#gmap {
  width:100%;
  height:590px;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  border-radius:4px;
}

html.font-large .clinicInfo--map #gmap {
  height:535px;
}

@media screen and (max-width:767px) {
  .clinicInfo--map {
    padding-top:0;
  }
}

@media screen and (max-width:640px) {
  #gmap {
    height:400px;
  }
}

@media screen and (max-width:500px) {
  #gmap {
    height:300px;
  }
}

@media screen and (max-width:767px) {
  .clinicInfo--map {
    margin-top:2em;
  }
}

@media screen and (max-width:500px) {
  .clinicInfo--map {
    margin-top:1.5em;
  }
}