@charset 'utf-8';

/* 共通
--------------------------------------- */
/* ページタイトル */
.kv,
.kv .wrap,
.kv .inner{width:100%;}
.kv .wrap{
  position:relative;
  aspect-ratio: 1920 / 260;
}
.kv .bg:after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
  background-color:rgba(112, 181, 44, 0.15);
  z-index:1;
}
.kv .bg img{width:100%;opacity:0.15;}
.kv .h2lw{
  position:absolute;
  top:0;
  bottom:0;
  left:9.8%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap:50px;
  height:175px;
  margin:auto 0;
}
.kv .h2lw:before{
  content:'';
  position:absolute;
  top:0;
  left:-60px;
  width:175px;
  height:175px;
  background-color:#70b52c;
  border-radius:50%;
  z-index:0;
}
.kv .h2lw .en{
  position:relative;
  font-family: "Heebo", sans-serif;
  font-size:70px;
  line-height:1.0;
  font-weight: 600;
  border-bottom:1px solid #4d4d4d;
  z-index:1;
}
.kv .h2lw .jp{
  margin-top:0.8em;
  font-size:28px;
  font-weight: 700;
  line-height:1.0;
  color:#70b52c;
}
@media screen and (max-width:1920px){
  .kv .bg img{
    width:1920;
    height:260px;
    object-fit:none;
    margin-left:50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width:800px){
  .kv .wrap{aspect-ratio: 8 / 3;}
  .kv .bg img{
    width:100%;
    height:initial;
    object-fit:fill;
    margin-left:0;
    transform: translateX(0);
  }
  .kv .h2lw{
    left:116px;
    gap:50px;
    height:190px;
}
  .kv .h2lw:before{
  left:-60px;
    width:190px;
    height:190px;
  }
  .kv .h2lw .en{
    font-size:75.58px;
  }
  .kv .h2lw .jp{
    margin-top:0.0em;
    font-size:30.22px;
  }
}

/* パンくず */
ul.breadcrumbs{
  width:980px;
  margin:10px auto 40px;
  font-size:0;
  line-height:1.2;
}
ul.breadcrumbs li{display:inline;font-size:16px;font-weight:500;}
ul.breadcrumbs li:after{content:'＞';margin:0 4px;}
ul.breadcrumbs li:last-child:after{content:'';margin:0;}
ul.breadcrumbs li a{}
ul.breadcrumbs li a:hover{text-decoration:underline;}
@media screen and (max-width:1024px){
  ul.breadcrumbs{
    width:96%;
    max-width: 980px;
  }
  ul.breadcrumbs li{font-size:14px;}
}
@media screen and (max-width:800px){
  ul.breadcrumbs{width:100%;max-width:initial;}
  ul.breadcrumbs li{font-size:21px;}
  ul.breadcrumbs a:hover{text-decoration:none;}
}

/* メイン */
.content{
  width:960px;
  margin:auto;
}
.h3def{
  margin-bottom:30px;
  padding-left:0.8em;
  font-size:28px;
  font-weight:700;
  color:#70b52c;
  border-left:8px solid #70b52c;
  border-bottom:1px solid #70b52c;
}
.h4def{
  margin-bottom:30px;
  padding:4px 1.0em;
  font-size:24px;
  color:#fff;
  background-color:#70b52c;
}
@media screen and (max-width:980px){
  .content{
    width:98%;
    max-width:960px;
  }
}
@media screen and (max-width:800px){
  .content{
    width:100%;
    max-width:initial;
  }
  .h3def{
    font-size:37px;
    border-bottom-width:2px;
  }
  .h4def{
    padding:8px 1.0em;
    font-size:32px;
  }
}


/* 当院の特徴 > 院長ご挨拶
--------------------------------------- */
.greeting{}
.greeting .wrap{padding:0px 0 110px;}
.greeting .inner{}
.greeting .block1{
  display: flex;
  justify-content: space-between;
  gap:40px;
  margin-bottom:70px;
}
.greeting .block1 .photo{
  width:240px;
}
.greeting .block1 .photo .img{margin-bottom:10px;}
.greeting .block1 .photo .cap1{
  font-size:14px;
}
.greeting .block1 .photo .cap2{
  font-size:21px;
  font-weight:700;
  letter-spacing:0.2em;
}
.greeting .block1 .message{
  width:calc(100% - 280px);
  width:680px;
}
.greeting .block1 .message .txt{
  font-size:19px;
  line-height:1.8;
}

.greeting .block2{
}

.greeting .block2 .hist{
}
.greeting .block2 .hist dl{
  display: flex;
  justify-content: flex-start;
  margin-bottom:10px;
  font-size:19px;
}
.greeting .block2 .hist dl dt{width:160px;}
.greeting .block2 .hist dl dd{width:calc(100% - 160px);}
@media screen and (max-width:800px){
  .greeting .wrap{padding:0px 0 90px;}
  .greeting .block1{
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .greeting .block1 .photo{
    width:100%;
    margin:auto;
  }
  .greeting .block1 .photo .img{
    width:280px;
    margin:0 auto 10px;
  }
  .greeting .block1 .photo .cap1{
    font-size:26px;
    text-align:center;
  }
  .greeting .block1 .photo .cap2{
    font-size:32px;
    text-align:center;
  }
  .greeting .block1 .message{
    width:100%;
  }
  .greeting .block1 .message .txt{
    font-size:28px;
  }

  .greeting .block2 .hist dl{
  display: flex;
  justify-content: flex-start;
  margin-bottom:10px;
    font-size:28px;
  }
  .greeting .block2 .hist dl dt{width:180px;}
  .greeting .block2 .hist dl dd{width:calc(100% - 180px);}
}

/* 院内のご案内
--------------------------------------- */
.facility{}
.facility .wrap{padding:0px 0 110px}
.facility .inner{}
.facility .clinic{margin-bottom:70px;}
.facility .device{}
.facility .block{
  display: flex;
  justify-content: space-between;
  gap:40px;
  margin-bottom:40px;
}
.facility .block .box{
  width:48%;
  max-width:460px;
}
.facility .block .box .mi{
  padding:0.2em 0.5em;
  font-size:21px;
  background-color:#edf2c5
}
.facility .block .box .item{}
.facility .block .box .item .pho{margin-bottom:10px;}
.facility .block .box .item .dtl{}
.facility .block .box.wide{width:100%;max-width:initial;}
.facility .block .box.wide .item{
  display: flex;
  justify-content: space-between;
  gap:40px;
}

.facility .block .box.hori .item{
  display: flex;
  justify-content: space-between;
  gap:20px;
}
.facility .block .box.hori .item .pho{
  width:220px;
  margin-bottom:0;
}
.facility .block .box.hori .item .dtl{
  width:220px;
}
@media screen and (max-width:1217px){}
@media screen and (max-width:800px){
  .facility .wrap{padding:0px 0 90px}
.facility .clinic{}
.facility .device{}
  .facility .block{
    display: block;
    justify-content: normal;
    gap:0;
    margin-bottom:0;
  }
  .facility .block .box{
    width:690px;
    max-width:initial;
    margin:0 auto 40px;
  }
  .facility .block .box .mi{
    font-size:32px;
  }
  .facility .block .box.wide .item{
    display: block;
    justify-content: normal;
    gap:0;
  }
  .facility .block .box.wide .item .pho:nth-of-type(1){margin-bottom:40px;}
  .facility .block .box.hori .item{
    gap:30px;
  }
  .facility .block .box.hori .item .pho{
    width:340px;
  }
  .facility .block .box.hori .item .dtl{
    width:320px;
  }
}

/* 目の病気Q&A
--------------------------------------- */
.faq{}
.faq .wrap{padding:0px 0 110px}
.faq .inner{}
/* index */
.faq .index{}
.faq .index ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  gap:40px;
}
.faq .index ul li{
  width:calc(50% - 20px);
}
.faq .index ul li a{
  position:relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width:100%;
  height:80px;
  font-size:24px;
  font-weight:700;
  text-align:center;
  color:#fff;
  background-color:#70b52c;
  border-radius:10px;
  transition:opacity 300ms;
}
.faq .index ul li a:hover{
  opacity:0.7;
}
.faq .index ul li a:after{
  content:'';
  position:absolute;
  top:0;
  right:60px;
  bottom:0;
  width:36px;
  height:36px;
  margin:auto;
  background:url(../images/home/icon_arrow.png) center center no-repeat;
  background-size:cover;
}
@media screen and (max-width:1217px){}
@media screen and (max-width:800px){
  .faq .wrap{padding:0px 0 90px}
  .faq .index ul{
    flex-wrap: normal;
    align-content: normal;
    flex-direction: column;
    justify-content: flex-start;
    gap:60px;
  }
  .faq .index ul li{
    width:100%;
  }
  .faq .index ul li a{
    font-size:32px;
    transition:none;
  }
  .faq .index ul li a:hover{
    opacity:1;
  }
}

/* detail */
.faq .detail{}
.faq .detail .box{
  margin-bottom:40px;
}
.faq .detail .box .h4def{
  color:#4d4d4d;
  background-color:#edf2c5;
}
.faq .detail .box strong{
  background-color:#efefef;
  padding:2px 0.5em;
  border-radius:4px;
}
@media screen and (max-width:1217px){}
@media screen and (max-width:800px){}




/* 眼の病気について
--------------------------------------- */
.eye .content{padding-bottom:110px;}

/* 目次 */
.eye .list-eye{}
.eye .list-eye .search{
  margin:0 auto 5px;
  padding:0px 0 20px;
  border-radius:5px;
  display:flex;
  justify-content:space-between;
}
.eye .list-eye .search li{
  width:48%;
}
.eye .list-eye .search li{}
.eye .list-eye .search li a{
  display:block;
  width:100%%;
  padding:0 20px;
  line-height:48px;
  color:#70b52c;
  text-align:center;
  background:#fff;
  border:1px solid #70b52c;
  border-radius:3px;
  transition:color 300ms,background-color 300ms;
}
.eye .list-eye .search li.current a,
.eye .list-eye .search li a:hover{
  color:#fff;
  background-color:#70b52c;
}
@media screen and (max-width:800px){
  .eye .list-eye .search{
    margin:0 auto 10px;
  }
  .eye .list-eye .search li{
    width:49%;
  }
  .eye .list-eye .search li a{
    padding:0;
    line-height:64px;
    border-width:2px;
    transition:none;
  }
  .eye .list-eye .search li.current a:hover{
    color:#fff;
    background-color:#70b52c;
  }
  .eye .list-eye .search li a:hover{
    color:#70b52c;
    background-color:#fff;
  }
}

/*  */
.eye .list-eye .disease{
  margin:0 auto 40px;
  padding:20px 40px;
  border:1px solid #70b52c;
  border-radius:3px;
}

.eye .list-eye .disease ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap:20px 5%;
}
.eye .list-eye .disease ul li{width:30%;}
.eye .list-eye .disease ul li a:before{
  content:'';
  display:inline-block;
  width:14px;
  height:16px;
  margin-right:6px;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  background-color:#4d4d4d;
}
.eye .list-eye .disease ul li.current a{color:#70b52c;}
.eye .list-eye .disease ul li.current a:before{
  width:16px;
  height:14px;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background-color:#70b52c;
}
.eye .list-eye .disease ul li a{transition:color 300ms;}
.eye .list-eye .disease ul li a:hover{color:#70b52c;}
.eye .list-eye .disease ul li a:hover:before{background-color:#70b52c;}

.eye .list-eye .disease.aiu{}
.eye .list-eye .disease.aiu ul{
  margin-left:0;
  display:flex;
  justify-content:space-around;
}
.eye .list-eye .disease.aiu ul li{width:7%;}
@media screen and (max-width:800px){
  .eye .list-eye .disease{
    margin:0 auto 20px;
    padding:30px 40px;
    border-width:2px;
  }
  .eye .list-eye .disease ul{
    justify-content: flex-start;
    gap:20px 0%;
  }
  .eye .list-eye .disease ul li{width:50%;}
  .eye .list-eye .disease ul li a{transition:none;}
  .eye .list-eye .disease ul li a:hover{color:#4d4d4d;}
  .eye .list-eye .disease ul li a:hover:before{background-color:#4d4d4d;}
  .eye .list-eye .disease.aiu ul li{width:10%;}
}

/* 詳細 */
.eye .disease-ex h3{
  display:iniline-block;
  margin:40px 0 20px;
  font-weight:700;
  color:#70b52c;
  border-bottom:5px solid #b7da95;
}
.eye .disease-ex{}
.eye .disease-ex .ex{
  width:92%;
  margin:0px auto 40px;
}
@media screen and (max-width:800px){
  .eye .disease-ex .ex{
    width:100%;
  }
}

/*  */
.eye .disease-ex .ex p{margin-bottom:1em;}
.eye .disease-ex .ex ul,
.eye .disease-ex .ex ol{
  margin-left:0em;
  margin-bottom:1em;
  line-height:2;
}
.eye .disease-ex .ex ul.list{margin-left:0;}
.eye .disease-ex .ex a{color:#70b52c;}
.eye .disease-ex .ex a:hover{text-decoration:underline;}

.eye #kanren{
  display:inline-block;
  margin-left:0.48em;
  margin-top:70px;
  margin-bottom:10px;
  font-size:21px;
  background-color:#fff;
}

.eye ul#kanrenList{
  margin-top:-24px;
  padding:20px 30px;
  border:1px solid #ccc;
  border-radius:3px;
}
.eye ul#kanrenList li{}
.eye ul#kanrenList li:before{
  content:'・';
  color:#70b52c;
}
.eye ul#kanrenList li a{}
@media screen and (max-width:800px){
.eye #kanren{
  margin-left:0.48em;
  margin-top:70px;
  margin-bottom:10px;
  font-size:28px;
}
.eye ul#kanrenList{
  margin-top:-32px;
  border-width:2px;
}

/* お知らせ
--------------------------------------- */
/* 一覧 */
.news{background-image:none;}
.news .wrap{padding:0px 0 110px;}
.news .inner{padding:0;}

.news .wrap-news{
  margin-bottom:0;
  padding:0;
  border-width:0;
}
@media screen and (max-width:800px){
  .news .wrap{padding:0px 0 140px;}
}






/*
.information{background:none;}
.information .wrap{
  margin-top:20px;
  padding:0px 0 90px;
}
.information .wrap-news{
  width:100%;
  max-width:initial;
  max-height:initial;
  margin:0 auto 70px;
  padding:40px 40px;
  overflow:visible;
}

/* pagination */
/*
.information .pagination{margin-top:70px;}
.information .wp-pagenavi{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  margin:auto;
  text-align:center;
}
.information .pagination .pages{display:none;}
.information .pagination a,
.information .pagination span.current{
  display: flex;
  justify-content: center;
  align-items: center;
  width:36px;
  height:36px;
  margin:0 4px 10px;
  font-size:16px;
  color:#006837;
  text-align:center;
  background-color:#fff;
  border-radius:3px;
  border:1px solid #006837;
  transition:color 300ms, background-color 300ms;
}
.information .pagination .previouspostslink,
.information .pagination .nextpostslink{}
.information .pagination .previouspostslink{padding-left:0;}
.information .pagination .nextpostslink{padding-right:0;}
.information .pagination a.page{}
.information .pagination a:hover,
.information .pagination span.current{
  color:#fff;
  background-color:#006837;
}
@media screen and (max-width:1024px){}
@media screen and (max-width:800px){
  .information .pagination{margin-top:90px;}
  .information .wp-pagenavi{
    justify-content: flex-start;
    align-content: flex-start;
  }
  .information .pagination a,
  .information .pagination span.current{
    width:58px;
    height:58px;
    margin:0 8px 10px;
    font-size:26.88px;
    border-width:2px;
    border-radius:3px;
  }
  .information .pagination a:hover{
    color:#fff;
    background-color:#006837;
  }
}

/* back button */
/*
.information .back{
  margin:auto;
  padding-bottom:8px;
  text-align:center;
}
.information .back a{
  padding:20px 40px;
  color:#fff;
  background-color:#006837;
  border:1px solid #006837;
  border-radius:3px;
  transition:color 300ms, background-color 300ms;
}
.information .back a:hover{
  color:#006837;
  background-color:#fff;
}
@media screen and (max-width:1024px){}
@media screen and (max-width:800px){
  .information .back a{padding:8px 50px;}
  .information .back a{transition:none;}
  .information .back a:hover{
    color:#fff;
    background-color:#006837;
  }
}

/* single page */
/*
.information .h3lw{
  font-size:21px;
  font-weight:700;
  color:#006837;
  margin-bottom:40px;
}
.information .date{
  margin-bottom:0px;
  font-size:14px;
  text-align:right;
}
.information .block-topics-dtl{
  margin-bottom:70px;
  padding:30px 40px 40px;
  background-color:#fff;
  border-radius:10px;
  box-shadow:0 0 8px rgba(0, 0, 0, 0.2);
}
.information .block-topics-dtl .detail{}
.information .block-topics-dtl .editor-area{}
@media screen and (max-width:1024px){}
@media screen and (max-width:800px){
  .information .inner{overflow:visible;}
  .information .h3lw{
    font-size:30.72px;
    margin-bottom:40px;
  }
  .information .date{font-size:19px;}
  .information .block-topics-dtl{
    margin-bottom:90px;
    padding:20px 20px;
  }
}
*/

/* 
--------------------------------------- */
.sectionX{}
.sectionX .wrap{padding:0px 0 0px}
.sectionX .inner{}
@media screen and (max-width:1217px){}
@media screen and (max-width:800px){}

@media screen and (max-width:1497px){}
@media screen and (max-width:1217px){}
@media screen and (max-width:997px){}
@media screen and (max-width:767px){}
@media screen and (max-width:1580px){}
@media screen and (max-width:1280px){}
@media screen and (max-width:980px){}
@media screen and (max-width:800px){}