@charset 'UTF-8';

/*reset*/
main.main{padding:0;}
.content{margin-top:0;}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*mv area------------------------------------------------*/
section#mv__top{padding:0 !important;}
/*
top_ver202401_sp.cssとtop_ver202401_pc.cssに記載
*/
/*mv area------------------------------------------------*/
/*events-----------------------------------------------*/
#event__top{background-color:var(--color-blue03);}
/*kc.cssに記載*/
/*events-----------------------------------------------*/


/*researvation-------------------------------------------*/

#reservation__top{
  background:url(/wp-content/themes/cocoon-child-master/img/top_ver202401/bg_service__top.webp) no-repeat center / cover;
}
#reservation__top .inner{
  background-color:#fff;
  width:94.6666666%;
}
  .txt-block_reservation__top{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
  .catch_reservation__top{
    display:flex;
    flex-wrap:wrap;
    align-items: flex-start;
    font-weight:bold;
    line-height:1.4em;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
  }
  .catch_reservation__top .icon{
    line-height:0;
  }
  .catch_reservation__top span.icon img{
    max-width:130px;
    width:100%;
  }
.btn_reservation__top{
  margin:0 auto;
  display:block;
  width:100%;
  position: relative;
}
.btn_reservation__top a{
  text-decoration:none;
  color:#fff;
  font-weight:bold;
  line-height:3em;
  background-color:var(--color-green01);
  border:1px solid var(--color-green01);;
  display:block;
  width:100%;
  text-align:center;
}
.btn_reservation__top a:after{
  position:absolute;
  content: "";
  display:inline-block;
  transition: all 0.3s;
  width:0.75em;
  height:0.75em;
  background:url(/wp-content/themes/cocoon-child-master/img/top_ver202401/icon_arrow.png) no-repeat center center / contain;
  right:0.75em;
  top:40%;
}
.txt_reservation__top{
  line-height: var(--txt-long-lineHeight);
}
@media screen and (max-width:959px){
  .catch_reservation__top span.icon{
    width:calc(100% - 11em - 10px) ;
    margin-right:10px;
  }
  .catch_reservation__top{
    font-size:var(--font-size20);
  }
  .txt_reservation__top{
    margin-bottom:18px;
  }
  .btn_reservation__top{
    max-width:230px;
    margin-bottom:6px;
  }
  .btn_reservation__top a{
    font-size:var(--font-size15);
  }
  .txt-block_reservation__top{
    padding:18px;
  }
  .img-block_reservation__top{
    overflow: hidden;
    position: relative;
    padding-top: 49.8587%;
  }
  .img-block_reservation__top img{
    position:absolute;
    top:0;
    width:100%;
    max-width:inherit;
  }
}
@media screen and (min-width:960px){
  #reservation__top .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .img-block_reservation__top,
  .txt-block_reservation__top{
    width:var(--wide-colum-6-12);
  }
  .img-block_reservation__top{
    overflow: hidden;
    position: relative;
    padding-top: 31.333%;
  }
  .img-block_reservation__top img{
    width:100%;
    max-width:inherit;
  }
  .catch_reservation__top span.icon{
    width:calc(100% - 10em) ;
  }
  .catch_reservation__top span.icon img{
    margin-right:10px;
    width:90%;
  }
  .img-block_reservation__top img{
    position:absolute;
    top:0;
    left:0;
  }
  .txt-block_reservation__top{
    padding:3.8461%;
  }
  .catch_reservation__top,
  .txt_reservation__top{
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .catch_reservation__top{
    margin-bottom:10px;
    font-size:var(--font-size20);
  }
  .txt_reservation__top{
    font-size:14px;
    margin-bottom:20px;
  }
  .btn_reservation__top{
    max-width:326px;
  }
  .btn_reservation__top a{
    transition: all 0.3s;
    font-size:var(--font-size16);
  }
  .btn_reservation__top a:hover{
    color:var(--color-green01);
    background-color:#ffffff;
    border:1px solid var(--color-green01);
  }
  .btn_reservation__top a:hover:after{
    background:url(/wp-content/themes/cocoon-child-master/img/top_ver202401/icon_arrow_o2.png) no-repeat center center / contain;
    right:0.75em;/*仮*/
    top:40%;/*仮*/
  }

}
@media screen and (min-width:1040px){
  .catch_reservation__top{
    font-size:var(--font-size24);
  }  
}
@media screen and (max-width:960px) and (min-width:768px){
  .catch_reservation__top{
    align-items: center;
    font-size:24px;
  }
  .br-none-tab{
    display:none;
  }
  .br-tab{
    display:block;
  }
  .txt_reservation__top{
    text-align:center;
    width:100%;
  }
  .btn_reservation__top{
    max-width:328px;
  }
  .txt-block_reservation__top{
    padding-bottom:30px;
  }
  .btn_reservation__top a{
    font-size:16px;
  }
  #reservation__top .inner{
    width:92.1875%;
  }
  .catch_reservation__top span.icon{
    width: calc(100% - 15em - 10px);
  }
}
/*researvation-------------------------------------------*/

/*renovation-------------------------------------------*/
/*top_ver202401_sp.cssとtop_ver202401_pc.cssに記載*/
/*renovation ------------------------------------------------*/


/*blocg column ----------------------------------------------*/
#blogCloum__top .inner{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .block_blog__top .card-thumb img,
  .block_column__top .card-thumb img{
    max-width:250px;
  }

#blogCloum__top h3{
  border-bottom: 2px solid var(--color-blue01);
  line-height:1;
}
#blogCloum__top .infotop-card-content{
  margin-top:0px;
  margin-bottom:10px;
}

#blogCloum__top .entry-card-snippet{
  color:var(--color-gray01);
  font-size:12px;
}

@media screen and (max-width:767px){
  #blogCloum__top .inner{
    margin: 0 10px;
  }
  #blogCloum__top h3{
    margin-bottom: 24px;
    padding-bottom:15px;
  }

  .block_blog__top,
  .block_column__top{
    padding:0 4px;
    width:100%;
  }
  .block_blog__top{
    margin-bottom:30px;
  }
  .block_blog__top .a-wrap,
  .block_column__top .a-wrap{
    margin-bottom:24px;
  }
  .block_blog__top .entry-card,
  .block_column__top .entry-card{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }
  #blogCloum__top .entry-card-title{
    margin-bottom:0;
    line-height:var(--txt-short-lineHeight);
  }
  .block_blog__top .entry-card-thumb,
  .block_column__top .entry-card-thumb{
    width:var(--wide-colum-4-12);
    line-height:0;
    padding-top:21%!important;
  }
  .block_blog__top .entry-card-content,
  .block_column__top .entry-card-content{
    width:var(--wide-colum-8-12);
    padding-left:10px;
  }
  .block_blog__top .entry-card-thumb img,
  .block_column__top .entry-card-thumb img{
    max-width:250px;
  }
  #blogCloum__top .btn_more_txt{
    display:block;
    width:var(--wide-colum-4-12);
    float:right;
  }
  #blogCloum__top .btn_more_txt a{
    line-height:1em;
    text-decoration:none;
  }
}
@media screen and (min-width:768px){
  #blogCloum__top .inner,
  #blogCloum__top .entry-card{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  #blogCloum__top h3{
    margin-bottom: 40px;
    padding-bottom:20px;
  }
  #blogCloum__top .entry-card-title{
    margin:0 auto 20px;
  }
    .block_blog__top,
    .block_column__top{
      padding-left:10px;
      padding-right: 10px;
      width: var(--wide-colum-6-12);
    }
    #blogCloum__top .entry-card-thumb{
      padding-top:29.5%!important;
    }
      #blogCloum__top .entry-card-thumb,
      #blogCloum__top .entry-card-content{
        width:calc(50% - 10px);
      }
      .block_blog__top .card-thumb img,
      .block_column__top .card-thumb img{
        max-width:250px;
      }
}
@media screen and (max-width:959px){
  #blogCloum__top .entry-card-snippet{display:none;}
}
/* tablet */
@media screen and (max-width:960px) and (min-width:768px){
  #blogCloum__top .entry-card-title{margin:0 auto;}
  .entry-card-content .cat-label{font-size:9px;}
}
/*blocg column ----------------------------------------------*/

/*instagram -------------------------------------------------*/
#instagram__top{
  background-color:#f6f2ef;  
}
.introBox_instagram__top{
  background-color:#fff;
  position:relative;
}
  .introBox_instagram__top::before{
    content:'';
    background:url(/wp-content/themes/cocoon-child-master/img/top_ver202401/tag_instagram__top.png?ver12) no-repeat left top / contain;
    height:70px;
    width:100%;
    display:block;
    position:absolute;
    top:0;
    left:0;
  }
  .introBox_instagram__top p{
    text-align:center;
    margin-bottom:1em;
  }
  .btn_instagram__top{
    margin:0 auto;
    display:block;
    width:100%;
  }
  .btn_instagram__top a{
    background-image: linear-gradient(90deg, rgba(232, 0, 16, 1), rgba(186, 0, 174, 1));
    border:none;
  }
  .btn_instagram__top a:after,
  .btn_instagram__top a:hover:after{
    position:absolute;
    background:url(/wp-content/themes/cocoon-child-master/img/top_ver202401/icon_arrow.png) no-repeat center center / contain;
  }
  .btn_instagram__top a:hover{
    color:#fff;
  }
.feed_instagram__top{
  display: flex;
  flex-wrap: wrap;
}
.post_instagram__top{
  display: block;
  overflow:hidden;
  position:relative;
}
.post_instagram__top img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-duration: 0.5s;
  width:100%;
}
.txt_instagram__top{line-height: var(--txt-long-lineHeight);}
@media screen and (min-width:481px){
  .post_instagram__top {
    width: calc(((100% - 16px) / 8) * 2);
    padding-top: 31.79%;
    margin-bottom:8px;
  }
}
@media screen and (max-width:767px){
  #instagram__top .inner{
    width:92%;
  }
  .introBox_instagram__top{
    background-color: #fff;
    position: relative;
    padding: 40px 20px;
  }
  .icon_instagram__top{
    background: url(/wp-content/themes/cocoon-child-master/img/top_ver202401/icon_instagram__top.png) no-repeat center center / contain;
    height: 30px;
    width: 30px;
    margin-right: 6px;
    margin-top: 6px;
  }
  h3.ttl_instagram__top{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: var(--txt-short-lineHeight);
    align-items: start;
    max-width: 280px;
    margin: 0 auto 20px;
  }
  .feed_instagram__top{
    margin-top:8px;
  }
  .post_instagram__top {
    width: calc(((100% - 16px) / 6) * 2);
    padding-top: 31.79%;
    margin-bottom:8px;
  }
  .post_instagram__top:nth-child(3n + 1),
  .post_instagram__top:nth-child(3n + 2){margin-right:4px;}
  .post_instagram__top:nth-child(3n + 3),
  .post_instagram__top:nth-child(3n + 2){margin-left:4px;}
  .post_instagram__top:nth-child(4 + n){margin-bottom:0;}
  .none-sp{display:none;}
}
@media screen and (max-width:959px) and (min-width:768px){
  #instagram__top .inner{
    padding-left:15px;
    padding-right:15px;
  }
  .introBox_instagram__top{
    background-color: #fff;
    position: relative;
    padding: 40px 20px;
  }
  .icon_instagram__top{
    background: url(/wp-content/themes/cocoon-child-master/img/top_ver202401/icon_instagram__top.png) no-repeat center center / contain;
    height: 40px;
    width: 40px;
  }
  h3.ttl_instagram__top{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: var(--txt-short-lineHeight);
    align-items: start;
    max-width: 280px;
    margin: 0 auto 20px;
  }
  .feed_instagram__top{
    margin-top:8px;/*仮*/
  }
  .post_instagram__top {
    width: calc(((100% - 24px) / 8) * 2);
    padding-top: 24.468%;
    margin-bottom:8px;
  }
  .post_instagram__top:nth-child(4n + 1),
  .post_instagram__top:nth-child(4n + 2),
  .post_instagram__top:nth-child(4n + 3){margin-right:8px;}
  .post_instagram__top:nth-child(5 + n){margin-bottom:0;}
    .introBox_instagram__top::before{height:30%;max-height:140px;}
}

@media screen and (min-width:960px){
  #instagram__top .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .introBox_instagram__top{
    width: calc(((100% / 12) * 4) - 20px);
    margin-left:10px;
    margin-right:10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
  .icon_instagram__top{
    background: url(/wp-content/themes/cocoon-child-master/img/top_ver202401/icon_instagram__top.png?ver202404) no-repeat center center / contain;
    height: 40px;
    width: 40px;
  }
  h3.ttl_instagram__top,
  .introBox_instagram__top p,
  .btn_instagram__top{
    width:240px;
    margin-left:auto;
    margin-right:auto;
  }
  h3.ttl_instagram__top{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: var(--txt-short-lineHeight);
    align-items: start;
    margin-bottom:20px;
  }
  .feed_instagram__top{
    width:var(--wide-colum-8-12);
  }
  .post_instagram__top{
    width: calc(25% - 20px);
    padding-top: 22.836%;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:20px;
  }
  .post_instagram__top:nth-child(n+5){
    margin-bottom:0;
  }
  .introBox_instagram__top::before{height:25%;}
  
}
@media screen and (min-width:1040px){
  .introBox_instagram__top::before{
    height:84px;
  }
}