@charset "utf-8";
/* CSS Document */
#mv{background: url("../../honten/images/information/mv_bg.jpg") no-repeat center center/cover;}

#info .box{margin: 0 0 90px;}

#info .inner { }
#info .box-txt { }
#info .accordionBox { margin: 0 0 20px 0; }
#info .accordionBox time { display: block; color: rgba(43,144,182,255); font-size: 14px; font-weight: bold; margin: 0 0 0.5em 0;}
#info .accordionBox h3 { position: relative; padding: 0 2em 10px 0; margin: 0 0 1em 0; font-size: 16px; border-bottom: #e9f3f9 solid 5px; }
#info .accordionBtn { display: none; position: absolute; right:0; top:calc( ( 100% - 10px ) / 2); transform: translateY( -50% ); color: rgba(43,144,182,255); cursor: pointer;}
#info .accordionBtn.active { display: block;}
#info .accordionTarget { display: none; font-size: 16px; line-height: 1.8; border-top: #f1f1f1 dotted 1px; padding: 1em 0 1em 1em;}
#info .accordionTarget.active { display: block; }
#info .accordionBox p { margin: 0 0 0.5em 0;}
#info .accordionBox a { color: rgba(43,144,182,255); text-decoration: underline;}

#topic .tit{font-size: 16px; font-weight: bold; display: flex; color: rgba(43,144,182,255); flex-wrap: wrap; width: 100%;}
#topic .tit p:nth-of-type(1){width: 120px;}
#topic .tit p:nth-of-type(2){width: calc(100% - 120px);}
#topic .tit:after{content: ''; width: 100%; height: 6px; background: #e9f3f9; display: block; margin: 15px 0 20px; border-radius: 6px;}

#topic .inner{display: flex; flex-wrap: wrap; justify-content: space-between;}
#topic .box-txt{width: 64%; padding: 0 0 0 10px; line-height: 1.9;}
#topic .box-img{width: 31%;}
#topic .txt{margin: 0 0 25px;}
#topic .price{font-weight: bold; margin: 0 0 25px;}
#topic .btn{color: rgba(43,144,182,255); font-weight: bold; background: url("../../images/common/ic_arrow.png") no-repeat center left/18px 18px; padding: 0 0 0 30px; display: inline-block;}
#topic .btn:hover{text-decoration: underline;}


#pagination {display: flex; justify-content: center; margin: 0 0 70px;}
#pagination a{width: 38px; height: 38px; color: rgba(43,144,182,255); border: 1px solid rgba(43,144,182,255); text-align: center; line-height: 38px; margin: 0 6px; font-weight: bold; font-size: 16px; display: inline-block;}
#pagination a:hover,
#pagination a.active,
#pagination .current{background: rgba(43,144,182,255); color: #fff; width: 38px; height: 38px; border: 1px solid rgba(43,144,182,255); text-align: center; line-height: 38px; margin: 0 6px; font-weight: bold; font-size: 16px; display: inline-block;}
#pagination .pages { height: 38px; color: rgba(43,144,182,255); border: 1px solid rgba(43,144,182,255); text-align: center; line-height: 38px; margin: 0 6px; font-weight: bold; font-size: 16px; display: inline-block; padding: 0 0.5em; }

.lowerpage .article p {
margin: 0 0 2em 0;
}

/*  Media  */
@media only screen and (max-width: 767px){
    #info .tit p:nth-of-type(1){width: 100%;}
  #info .tit p:nth-of-type(2){width: 100%;}

  #info .box-img{width: 100%; order: -1; text-align: center; margin: 10px 0 20px;}
  #info .box-txt{width: 100%; padding: 0;}

  #topic .tit p:nth-of-type(1){width: 100%;}
  #topic .tit p:nth-of-type(2){width: 100%;}

  #topic .box-img{width: 100%; order: -1; text-align: center; margin: 10px 0 20px;}
  #topic .box-txt{width: 100%; padding: 0;}
}


/* ============== Detail =============== */
#detail .tit{font-size: 16px; font-weight: bold; display: flex; color: rgba(43,144,182,255); flex-wrap: wrap; width: 100%;}
#detail .tit p:nth-of-type(1){width: 120px;}
#detail .tit p:nth-of-type(2){width: calc(100% - 120px);}
#detail .tit:after{content: ''; width: 100%; height: 6px; background: #e9f3f9; display: block; margin: 15px 0 50px; border-radius: 6px;}

#detail .box-img{text-align: center; margin: 0 0 50px;}
#detail .box-txt{padding: 0 4%; line-height: 1.9;}
#detail .txt{margin: 0 0 25px;}
#detail .price{font-weight: bold;}
#detail .btn-back{background: rgba(43,144,182,255); color: #fff; font-size: 16px; text-align: center; max-width: 300px; width: 70%; height: 48px; line-height: 48px; margin: 50px auto 90px; display: block; position: relative; overflow: hidden; z-index: 0;}
#detail .btn-back:before{content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #07afbc; border-radius: 100%; transform: scale(0); transition: all .5s ease-in-out;}
#detail .btn-back:hover:before{transform: scale(2);}

/*  Media */
@media only screen and (max-width: 767px){
    #detail .tit p:nth-of-type(1){width: 100%;}
    #detail .tit p:nth-of-type(2){width: 100%;}
}