@charset 'utf-8';

/* 下層共通
--------------------------------------- */
#main{}
#main .h2l{
  margin-top:50px;
  margin-bottom:30px;
  padding-top:10px;

  font-size:1.56rem;
  font-weight:600;
  color:#0e357f;
  text-align:center;
}
#main .h2l span{border-bottom:4px solid #0e357f;}
#main .h3l{
  margin-bottom:30px;
  font-size:2.34rem;
  font-weight:600;
  color:#0e357f;
  text-align:center;
}
#main .h4l{
  margin-bottom:30px;
  font-size:1.34rem;
  font-weight:600;
  color:#0e357f;
}
#main .h5l{}
#main .wrap-content{
  width:900px;
  margin:auto;
}
@media screen and (max-width:640px){
  #main .h2l{font-size:42px;}
  #main .h3l{font-size:36px;}
  #main .h4l{font-size:32px;}
  #main .h5l{font-size:28px;}
  #main .wrap-content{width:100%;}
}
/* h3の英語表記消し */
#main .h2l{margin-bottom:50px;}
#main .h3l{display:none;}

/* splash */
#splash{height:300px;}
#splash .kv img{
  width:100%;
  height:auto;
}
@media screen and (max-width:1480px){
  #splash .kv{
    position:absolute;
    top:50%;
    left:50%;
    width:1480px;
    height:300px;
    margin-top:-150px;
    margin-left:-740px;
  }
  #splash .kv img{width:initial;}
}
@media screen and (max-width:640px){
  #splash{height:130px;}
  #splash .kv img{width:100%;}
  #splash .kv{
    top:0;
    left:0;
    width:100%;
    height:130px;
    margin-top:0;
    margin-left:0;
  }
}
#main #access{margin-top:100px;}

/* パンくず*/
#main #breadcrumbs{font-size:14px;margin-bottom:40px;}
#main #breadcrumbs .wrap{padding:5px 0 0;}
#main #breadcrumbs a{text-decoration:underline;}
#main #breadcrumbs li{display:inline;}
#main #breadcrumbs li:after{content:'\03e';margin:0 0.3em;}
#main #breadcrumbs li:last-child:after{content:'';margin:0;}
@media screen and (max-width:640px){
  #main #breadcrumbs{font-size:21px;}
}

/* 院長のご紹介
--------------------------------------- */
#main.greeting{}
#main.greeting .wrap-content{width:1000px;}
#main.greeting .message{}
#main.greeting .message .wrap{padding:0 0 90px;}
#main.greeting .message .msg{
  float:left;
  width:670px;
}
#main.greeting .message .msg span{font-size:1.34rem;}
#main.greeting .message .pho{
  float:right;
  width:278px;
}

@media screen and (max-width:640px){
  #main.greeting .wrap-content{width:100%;}
  #main.greeting .message .msg{
    float:none;
    width:100%;
  }
  #main.greeting .message .pho{
    float:none;
    margin:40px auto 0
  }
}
/* プロフ */
#main.greeting .prof{}
#main.greeting .prof .wrap{
  background:#efefef;
  padding:40px 0 120px;
}
#main.greeting .prof .box-l{
  float:left;
  width:490px;
}
#main.greeting .prof .box-r{
  float:right;
  width:490px;
}
#main.greeting .prof li{margin-bottom:10px;}
@media screen and (max-width:640px){
  #main.greeting .prof .box-l,
  #main.greeting .prof .box-r{
    float:none;
    width:100%;
  }
  #main.greeting .prof .box-l{margin-bottom:60px;}
}

/* 院内のご紹介
--------------------------------------- */
#main.floor{}
@media screen and (max-width:640px){}

/* 機器のご紹介
--------------------------------------- */
#main.facility{}
@media screen and (max-width:640px){}

/* 院内のご紹介 & 機器のご紹介
--------------------------------------- */
.photo .box-wide,
.photo .box-half{
  margin-bottom:40px;
  padding-bottom:40px;
  border-bottom:1px solid #efefef;
}
.photo .box-half:last-of-type{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom-width:0;
}
.photo .box-wide{width:900px;margin-left:auto;margin-right:auto;}
.photo .box-half .box-left{
  float:left;
  width:430px;
}
.photo .box-half .box-right{
  float:right;
  width:430px;
}
.photo .box-wide h4,
.photo .box-half h4{
  padding:8px 0.5em;
  margin-bottom:1px;
  font-size:21px;
  font-weight:600;
  color:#fff;
  background-color:#0e357f;
}
.photo .box-wide .img,
.photo .box-half .img{text-align:center;}
.photo .box-h{}
.photo .box-v{}
.photo .box-v .img{
  float:left;
  width:220px;
}
.photo .box-v p{
  float:right;
  width:210px;
  padding:5px 0 0 5px;
}
@media screen and (max-width:640px){
  .photo .box-wide,
  .photo .box-half{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
  }
  .photo .box-wide,
  .photo .box-half .box-left,
  .photo .box-half .box-right{
    margin-bottom:40px;
    padding-bottom:40px;
    float:none;
    width:600px;
  }
  .photo .box-wide h4,
  .photo .box-half h4{margin-bottom:4px;font-size:32px;}
  .photo .box-v .img{width:300px;}
  .photo .box-v p{
    width:300px;
    padding:5px 0 0 10px;
  }
}

/* 目の病気について
--------------------------------------- */
#main.eye{}
#eye  h3.eye,
#eye .block-detail .detail h5{
  padding:8px 10px;
  margin-bottom:20px;
  font-size:21px;
  font-weight:600;
  color:#fff;
  background-color:#0e357f;
  border-radius:5px;
}
@media screen and (max-width:640px){
  #eye .wrap-block{width:600px;}
  #eye  h3.eye,
  #eye .block-detail .detail h5{font-size:32px;}
}

/* リンク */
#eye .block-link p.mi{
  font-size:21px;
  font-weight:600;
  color:#0e357f;
}
#eye .block-link{}
#eye .block-link .box-link1,
#eye .block-link .box-link2,
#eye .block-link .box-link3{margin-bottom:0px;}
#eye .block-link .box-link1 .btn-l{
  float:left;
  width:450px;
}
#eye .block-link .box-link1 .btn-r{
  float:right;
  width:450px;
}
#eye .block-link .box-link1 .btn-l,
#eye .block-link .box-link1 .btn-r{}
#eye .block-link .box-link1 a{
  display:block;
  padding:8px 0;
  font-size:18px;
  font-weight:600;
  text-align:center;
  color:#494e51;
  background-color:#fff;
  border:2px solid #0e357f;
  border-bottom-width:0;
  border-radius:5px 5px 0 0;
  transition:color 300ms,background-color 300ms;
}
#eye .block-link .box-link1 .current a,
#eye .block-link .box-link1 a:hover{
  color:#fff;
  background-color:#0e357f;
}

#eye .block-link .box-link2{
  margin-bottom:40px;
  padding:20px 30px;
  border:2px solid #0e357f;
  border-radius:0 0 5px 5px;
}
#eye .block-link .box-link2 p.mi{margin-bottom:10px;}
#eye .block-link .box-link2 ul{margin-bottom:20px;}
#eye .block-link .box-link2 ul.words{text-align:center;}
#eye .block-link .box-link2 ul:last-of-type{margin-bottom:0;}

#eye .block-link .box-link2 ul li{
  display:inline-block;
  margin-right:20px;
}
#eye .block-link .box-link2 ul li a{
  display:block;
  padding:4px 2.0em;
  font-weight:600;
  white-space:nowrap;
  background-color:#fff;
  border:2px solid #0e357f;
  border-radius:5px;
  transition:color 300ms,background-color 300ms;
}
#eye .block-link .box-link2 ul li.current a,
#eye .block-link .box-link2 ul li a:hover{
  color:#fff;
  background-color:#0e357f;
}

#eye .block-link .box-link3 ul{
  /*margin-left:1.0em;*/
  padding-left:1.0em;
  text-indent:-1.0em;
}
#eye .block-link .box-link3 ul li{margin-bottom:8px;}
#eye .block-link .box-link3 ul li a:hover{text-decoration:underline;}

@media screen and (max-width:640px){
  #eye .block-link p.mi{font-size:36px;}
  #eye .block-link .box-link1,
  #eye .block-link .box-link2,
  #eye .block-link .box-link3{
    width:100%;
    margin-bottom:40px;
  }
  #eye .block-link .box-link1 .btn-l,
  #eye .block-link .box-link1 .btn-r{
    float:none;
    width:100%;
  }
  #eye .block-link .box-link1 .btn-l{margin-bottom:30px;}
  #eye .block-link .box-link1 a{
    width:100%;
    padding:12px 0;
    font-size:32px;
    border-bottom-width:2px;
    border-radius:5px;
  }

  #eye .block-link .box-link2{padding:30px 20px 0;border-radius:5px;}
  #eye .block-link .box-link2 ul{margin-bottom:0px;}
  #eye .block-link .box-link2 ul li{
    margin-right:40px;
    margin-bottom:40px;
  }
  #eye .block-link .box-link2 ul li a{padding:8px 2.0em;}
  /*#eye .block-link .box-link2 ul.words li a{width:560px;padding:8px 0;}*/
  #eye .block-link .box-link2 ul.words{text-align:left;}
  #eye .block-link .box-link3 ul li{margin-bottom:20px;}
  #eye .block-link .box-link3 ul li:last-of-type{margin-bottom:0;}
}

/* 詳細 */
#eye .block-detail{}
#eye .block-detail .detail p{line-height:1.8;}
#eye .block-detail .detail ul{
  /*margin-left:1.0em;*/
  line-height:1.8;
  padding-left:1.0em;
  text-indent:-1.0em;
}
#eye .block-detail .detail ul.depth{margin-left:1.0em;}
#eye .block-detail .detail ul ul{margin:1.0em 0;}
#eye .block-detail .detail a{text-decoration:underline;}
#eye .block-detail .detail dl{margin-bottom:1.0em;}
#eye .block-detail .detail dl dt{font-weight:600;}
#eye .block-detail .detail dl dt:before{content:'\025a0';color:#0e357f;}

@media screen and (max-width:640px){
  #eye .block-detail .detail{margin-left:0;}
  #eye .block-detail .detail p,
  #eye .block-detail .detail ul{line-height:1.8;}
}

/* 関連 */
#eye .block-related{
  margin-top:70px;
  padding:1.0em 20px 1.0em;
  border:2px solid #0e357f;
  border-radius:5px;
}
#eye .block-related h3.rel{
  margin-top:-2.0em;
  font-size:18px;
  font-weight:600;
  line-height:2.0;
}
#eye .block-related h3.rel span{
  padding:0 10px;
  background:#fff;
}
#eye .block-related ul{
  margin-top:10px;
  line-height:2.0;
  padding-left:1.0em;
  text-indent:-1.0em;
}
#eye .block-related ul li:before{
  content:'\025b6';
  margin-right:4px;
  color:#0e357f;
}
#eye .block-related ul li a:hover{text-decoration:underline;}

@media screen and (max-width:640px){
  #eye .block-related h3.rel{margin-top:-1.8em;font-size:32px;}
  #eye .block-related ul{margin-top:20px;}
}
@media screen and (max-width:640px){}

/* 目の病気Q&A
--------------------------------------- */
#main.faq{}
#faq h3.def{
  padding:8px 0.5em;
  margin-bottom:40px;
  font-size:21px;
  font-weight:600;
  color:#fff;
  background-color:#0e357f;
  border-radius:5px;
}
@media screen and (max-width:640px){
  #faq h3.def{font-size:32px;}
}

/* 目次 */
#faq.idx{}
#faq.idx ul{}
#faq.idx ul li{width:430px;}
#faq.idx ul li:nth-child(odd){float:left;}
#faq.idx ul li:nth-child(even){float:right;}
#faq.idx ul li a{
  display:block;
  width:430px;
  margin-bottom:50px;
  padding:12px 0;
  font-size:18px;
  font-weight:600;
  color:#494e51;
  text-align:center;
  background-color:#fff;
  border-radius:5px;
  border:2px solid #0e357f;
  transition:color 300ms,background-color 300ms;
}
#faq.idx ul li a:hover{
  color:#fff;
  background-color:#0e357f;
}
@media screen and (max-width:640px){
  #faq.idx ul li{width:100%;}
  #faq.idx ul li:nth-child(odd),
  #faq.idx ul li:nth-child(even){float:none;}
  #faq.idx ul li a{
    width:100%;
    font-size:32px;
  }
  #faq.idx ul li a:hover{
    color:#fff;
    background-color:#0e357f;
  }
}

/* 詳細 */
#faq .faq-detail{}
#faq .faq-detail dl{}
#faq .faq-detail dl.q{margin-bottom:20px;}
#faq .faq-detail dl.a{margin-bottom:40px;}
#faq .faq-detail dl dt{
  display:inline-block;
  margin-right:14px;
  width:46px;
  font-size:24px;
  font-weight:600;
  border:2px solid #0e357f;
  border-radius:5px;
  text-align:center;
  vertical-align:top;
}
#faq .faq-detail dl.q dt{color:#fff;background-color:#0e357f;}
#faq .faq-detail dl.a dt{color:#1d8ac8;background-color:#fff;border-color:#1d8ac8;}
#faq .faq-detail dl.q dd{
  margin-top:6px;
  font-size:1.07rem;
  font-weight:600;
}
#faq .faq-detail dl dd{
  display:inline-block;
  width:840px;
  margin-top:4px;
  vertical-align:top;
}
@media screen and (max-width:640px){
  #faq .faq-detail dl.q{margin-bottom:20px;}
  #faq .faq-detail dl dt{
    margin-right:10px;
    width:50px;
    font-size:34px;
  }
  #faq .faq-detail dl dd{width:540px;}
}

/* 初めて受診される患者様へ
--------------------------------------- */
#main.firsttime{}
#firsttime{}
#firsttime .box{margin-bottom:80px;}
#firsttime .box:last-of-type{margin-bottom:0;}
#firsttime .h4l{
  padding:8px 0.5em;
  margin-bottom:20px;
  font-size:21px;
  font-weight:600;
  color:#fff;
  background-color:#0e357f;
  border-radius:5px;
}
/*#firsttime ul.flow-h{}
#firsttime ul.flow-h li{
  float:left;
  margin-top:20px;
  color:#0e357f;
}
#firsttime ul.flow-h li span{
  display:inline-block;
  margin-right:8px;
  padding:0.5em 1.0em;
  font-weight:600;
  text-align:center;
  border:1px solid #0e357f;
  border-radius:3px;
}
#firsttime ul.flow-h.arrow li:after{content:'\025b6';margin-right:8px;}
#firsttime ul.flow-h.arrow li:last-of-type:after{content:'';margin-right:0;}
#firsttime ul.dot li:after{content:'、';margin-right:0;vertical-align:bottom;}
#firsttime ul.dot li:last-of-type:after{content:'';margin-right:0;}
#firsttime .detail{}*/
#firsttime .detail .mi{margin-bottom:4px;font-weight:600;color:#0e357f;}
#firsttime dl.flow-v{
  margin-top:20px;
  text-align:center;
}
#firsttime dl.flow-v dd{
  display:inline-block;
  /*max-width:800px;*/
  width:800px;
  margin-bottom:10px;
  padding:0.5em 1.0em;
  color:#0e357f;
  border:1px solid #0e357f;
  border-radius:3px;
}
#firsttime dl.flow-v dd span{
  display:block;
  text-align:left;
  padding-left:1.36em;
  text-indent:-1.36em;
}
#firsttime dl.flow-v.arrow dt:after{content:'\025bc';display:block;margin-bottom:10px;}

@media screen and (max-width:640px){
  #firsttime .h4l{font-size:32px;}
  #firsttime dl.flow-v dd{width:598px;}
  #firsttime dl.flow-v.arrow dt{font-size:32px;}
}

/* NEWS
--------------------------------------- */
#main.news{}
#news .wrap{padding:0;}
#news .topics{max-height:initial;}
#news .pagination{
  width:100%;
  margin:40px auto 0;
  text-align:center;
}
#news .pagination .pages{display:none;}
#news .pagination a,
#news .pagination span.current{
  display:inline-block;
  margin:5px 4px;
  padding:2px 8px;
  background-color:#fff;
  border:1px solid #0e357f;
  border-radius:3px;
  transition:color 300ms,
             background-color 300ms,
             border-color 300ms;
}
#news .pagination a:hover,
#news .pagination span.current{
  color:#fff;
  background-color:#1d8ac8;
  border:1px solid #1d8ac8;
}
@media screen and (max-width:640px){
  #news .pagination{}
  #news .pagination a,
  #news .pagination span.current{
    margin:8px 5px;
    padding:2px 12px;
  }
}

/* single topic */
#news .wrap-topics{
  width:900px;
  margin:auto;
}
#news .wrap-topics .mi{
  margin-bottom:20px;
  padding:4px 0 4px 8px;
  font-size:1.17em;
  line-height:1.2;
  border-left:5px solid #0e357f;
}
#news .wrap-topics .date{
  margin-bottom:8px;
  font-size:0.78;
  text-align:right;
}
#news .wrap-area{
  width:900px;
  margin:auto;
  padding:20px 19px;
  border:1px solid #c8c8c8;
}
#news .editor-area{
  width:860px;
  margin:auto;
}

#news .back{margin:40px 0 10px;text-align:center;}
#news .back a{
  display:inline-block;
  padding:2px 8px;
  background-color:#fff;
  border:1px solid #0e357f;
  border-radius:3px;
  transition:color 300ms,
             background-color 300ms,
             border-color 300ms;
}
#news .back a:hover{
  color:#fff;
  background-color:#1d8ac8;
  border:1px solid #1d8ac8;
}
@media screen and (max-width:640px){
  #news .wrap-topics{width:600px;}
  #news .wrap-area{width:600px;padding:30px 19px;}
  #news .editor-area{width:100%;}
}