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



	common



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




html{

  font-size: 62.5%;

  overflow-x: hidden;

  height: 100vh;
  scroll-behavior: auto;

}



body{

	color:#5a5129;

  background: #f3f2ea;

  font-family: "Inter", serif;

  font-weight: 400;

  font-style: normal;

	font-size: 1.4rem;

  width: 100vw;

	line-height: 1.2;

	position: relative;

	z-index:1;
  -webkit-text-size-adjust: 100%;
}







body.fixed {

  position: fixed;

  width: 100%;

  height: 100%;

}



img{

  max-width: 100%;

}





img, svg {

    height: auto;

    min-height: 1px;

}



a{

  color: #0a508e;

  text-decoration: none;

  transition: all 0.2s;

  outline: none;

}





a img{

  transition: all 0.2s;

}



p {

  /*word-break: break-all;*/

  word-wrap: break-word;

  line-height:2;

  letter-spacing: 1px;

}



/******************



  hover



******************/



a:hover,button:hover {

    opacity: 0.5;

    transition: all 0.2s;

}







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

loading

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

#loader-bg {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0px;

  left: 0px;

  background: #ffffff;

  z-index: 10000;

}



#js-loader {

  width: 190px;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  display: flex;

  align-items: center;

}







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



  globalHeader



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



#globalHeader {

}



/*

#globalHeader.is-show {

  background: #fff;

}

*/



.globalHeaderInnerWrap{



}





#globalHeaderInnerWrapFixed{

  position: fixed;

  top: -100px;  

}





#globalHeaderInnerWrapFixed.is-show {

  position: fixed;

  top: 0; /* 隠していたヘッダーを表示 */

  z-index: 98;

}







.globalHeaderInner{

  display: flex;

  margin: 0 auto;

  padding: 28px 80px;

  justify-content: space-between;

  position: relative;

  align-items: center;

  width: 100%;

  z-index: 99;

  height: 100px; 

  transition: all 0.5s ease;

  background: #f3f2ea;   

}



.globalLogo{

  width: 20%;

}









.globalNav{

  width: 36%;

}



.globalNavList{

  display: flex;

  justify-content: right;

  gap: 30px;

}



.globalNavList li {

  font-size: 1.6rem;

  color: #b49531;

  height: 100px;

  display: flex;

  align-items: center;

  cursor: pointer;

}



.globalNavList li a{

    color: #b49531;

    display: block;

    position: relative;

}



.globalNavList li a::after {

  position: absolute;

  left: 0;

  content: '';

  width: 100%;

  height: 2px;

  background: #b49531;

  bottom: -10px;

  transform: scale(0, 1);

  transform-origin: right top;

  transition: transform 0.5s;

}



.globalNavList li a:hover::after {

  transform: scale(1, 1);

  transform-origin: left top;

}



.navContact::after{

  display: none;

}







.navContact{

    border-radius: 100px;

    background: #4d8064;

    color: #fff!important;

    text-align: center;

    padding: 10px 20px ;

}





li.menu__single .menu__singleTtl{

  position: relative;

  display: block;

}



li.menu__single .menu__singleTtl::after{

  content: "";

  position: absolute;

  display: inline-block;

  width: 8px;

  height: 8px;

  border-top: 2px solid #b49531;

  border-right: 2px solid #b49531;

  margin: auto;

  transform: rotate(45deg);

  right: -12px;

  top: 2px;

  bottom: 0;

  -webkit-transition: all .2s ease;

  transition: all .2s ease;    

}



li.menu__single:hover .menu__singleTtl::after{

  transform: rotate(135deg);

}  







li.menu__single div.menu__second-level {

  position: absolute;

  right: 0;

  top: 100px;

  width: 100%;

  -webkit-transition: all .2s ease;

  transition: all .2s ease;

  background: #f9f9f4;

  padding: 50px 0;

  visibility: hidden;

  opacity: 0;

}



.menu__second-level_inner{

  max-width: 1280px;

  display: flex;

  justify-content: space-between;

  margin: 0 auto;

}



.menu__second-level_innerTtl {

  font-size: 6rem;

  font-weight: bold;

  color: #b49531;

}



.menu__second-level_nav{

  display: flex;

  gap: 20px;

  width: 73%;

}



.menu__second-level_nav a{

  display: block;

  color: #5a5129!important;

  font-size: 2.4rem;

  font-weight: bold;

}



.menu__second-level_nav a img{

  display: block;

  margin-bottom: 10px;

}





/*

#globalHeader.is-fixed  li.menu__single div.menu__second-level {

  top: 60px;

}

*/



li.menu__single:hover div.menu__second-level {

    visibility: visible;

    opacity: 1;

}



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

infoCont

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

#globalCont{

}





.subTtl{

  color: #b49531;

  font-size: 2.4rem;

  font-weight: bold;

  text-align: center;

  padding-bottom: 30px;

  margin-bottom: 30px;

  position: relative;

  display: block;

}



.subTtl::after{

  content: "";

  position: absolute;

  background: #b49531;

  width:6px;

  height: 1px;

  margin: auto;

  bottom: 0;

  right: 0;

  left: 0;

}



.subInto{

  text-align: center;

  margin-bottom: 100px;

}







.infoContWrap{

  background: #fff;

  position: relative;

}



.infoCont{

  display: flex;

  padding: 50px 0;

  justify-content: space-between;

  max-width: 1280px;

  margin: 0 auto;

}



.infoContInner{

  width: 40%;

  text-align: center;

}



.infoContInner P{

  text-align: center;

  margin-bottom: 30px;

}



.btnInfo{

  width: 125px;

  height: 35px;

  line-height: 35px;

  display: block;

  color: #fff;

  font-weight: bold;

  text-align: center;

  border-radius: 50px;

  background:#4d8064;

  margin: 0 auto;

}





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

footer

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

.footerInner{

  max-width: 1280px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  padding: 100px 0;

  color: #b49531;

}



#footerLogo{

  display: block;

  width: 190px;

}



.iconOnFooter{

  display: block;

  text-align: right;

  margin-bottom: 10px;

}



.iconOnFooter img{

  max-width: 30px;

}



.footerItem a{

  color: #b49531;

}



#footerNav ul{

  display: flex;

  gap: 30px;

  margin-bottom: 14px;

}



.footerLink{

  display: block;

  margin-bottom: 30px;

  text-align: right;

}



#copyright{

  display: block;

  text-align: right;

}



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

igSlider

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



#igSlider{

  margin: 200px auto 20px;

}



.igSliderTtl{

  display: block;

  text-align: center;

  margin-bottom: 80px;  

}



.igSliderTtl img{

  display: block;

  max-width: 50px;

  margin: 0 auto 30px;

}



.scroll-infinity__wrap{

    display: flex;

    flex-wrap: nowrap;

    overflow: hidden;

}





@keyframes infinity-scroll-left {

  from {

    transform: translateX(0);

  }

    to {

    transform: translateX(-100%);

  }

}



.scroll-infinity__list--left {

    animation: infinity-scroll-left 20s infinite linear 0.5s both;

}





.loopList{

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  width: 100%;

  flex-shrink: 0;

}



.loopList li {

  width: 23%;

  margin-right: 2%;

  text-align: center; 

}



.loopList li img{

  width: 100%;

}





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

common

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

.btnMore{

  width: 100px;

  padding-bottom: 14px;

  color: #5a5129;

  font-weight: bold;

  border-bottom: 1px solid;

  display: block;

  position: relative;

}



.btnMore::after {

  content: "";

  position: absolute;

  display: inline-block;

  vertical-align: middle;

  color: #5a5129;

  line-height: 1;

  width: 0;

  height: 0;

  border-style: solid;

  border-color: transparent;

  border-width: 0.375em 0.64952em;

  border-left-color: #5a5129;

  border-right: 0;

  right: 0;

  top: 4px;  

}





.btnTop{

  width: 100px;

  height: 100px;

  position: absolute;

  margin: auto;

  left: 0;

  right: 0;

  bottom: -50px;

  background: #fff;

  border-radius: 100px;

}



.dli-chevron-up {

  display: inline-block;

  vertical-align: middle;

  color: #4d8064;

  line-height: 1;

  width: 25px;

  height: 25px;

  border: 5px solid #4d8064;

  border-left: 0;

  border-bottom: 0;

  box-sizing: border-box;

  transform: translateY(25%) rotate(-45deg);

  position: absolute;

  right: 0;

  margin: auto;

  left: 0;

  top: 40px;

}





.pageTtl {

  font-size: 4.5rem;

  font-weight: bold;

  color: #b49531;

  position: relative;

  padding: 150px 0 156px;

  margin-bottom: 40px;

  margin-top: 180px;

  background-image: url(../img/common/waGara_left.svg), url(../img/common/waGara_rightBottom.svg);

  background-position: -150px top, calc(100% + 150px) bottom;

  background-size: 500px, 420px;

  background-repeat: no-repeat, no-repeat;

  text-align: center;

}



.pageTtl::after{

  content: "";

  position: absolute;

  background: #b49531;

  width: 10px;

  height: 1px;

  margin: auto;

  left: 0;

  right: 0;

  top: 250px;

}



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

catchScroll

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

.catchScroll{

  width: 100%;

  color: #b49531;

  text-align: center;

  padding-bottom: 10px;

}



.catchScroll strong{

  display: block;

  margin-bottom: 10px;

}



.fa {

  display: inline-block;

}



.fa-angle-down::before {

  content: "";

  /*position: absolute;*/

  display: inline-block;

  width: 8px;

  height: 8px;

  border-top: 1px solid #b49531;

  border-right: 1px solid #b49531;

  margin: auto;

  transform: rotate(135deg);

  right: 0;

  left:0;

  bottom: 0;

  -webkit-transition: all .2s ease;

  transition: all .2s ease;

}





.bounce {

  -webkit-animation-name: bounce;

  animation-name: bounce;

  -webkit-transform-origin: center bottom;

  transform-origin: center bottom;

  animation-iteration-count: infinite;

  -webkit-animation-iteration-count: infinite;

}



.animated {

 -webkit-animation-duration: 2s;

 animation-duration: 2s;

 -webkit-animation-fill-mode: both;

 animation-fill-mode: both;

}



@-webkit-keyframes bounce {

    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}

    40% {-webkit-transform: translateY(-20px);}

    60% {-webkit-transform: translateY(-10px);}

} 

 

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

    40% {transform: translateY(-20px);}

    60% {transform: translateY(-10px);}

} 





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

scroll

---------------------------------*/
/*
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}

.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
*/

.scroll-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}

.scroll-up.is-show {
  opacity: 1;
  transform: translateY(0);
}




/*

.anchor {

    margin-top: -140px!important;

    padding-top: 140px!important;

}

*/



.only_sp{ display: none!important; }



/* Media Queries ================================================== */

/*896*/

@media screen and (max-width: 896px) {

html{
  
  overflow: visible;

}


  .anchor {

      margin-top: -70px;

      padding-top: 70px;

  }



  .only_pc{ display: none !important; }

  .only_sp{ display: block !important; }



  body {

    font-size: 1.6rem;

    width: 100vw;

    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

  }





  body.fixed {

    position: relative;

    width: auto;

    height: auto;

  }



  p {

    /*line-height: 1.5;*/

  }





  #globalHeader {

      height: 50px;

      top: 0;

  }





  .globalHeaderInner{

    padding: 0 20px;

    height: 50px;

  }



 .globalHeaderInner.fixed{

  top: 0;

  position: fixed;

  z-index: 99;

 } 



  

  .globalLogo {

      width: 60%;

  }    





 .btnMenu {

    width: 30px;

    height: 30px;

    display: block;

    position: relative;

  }



  .btnMenu span {

    position: absolute;

    width: 30px;

    height: 2px;

    left: 0;

    right: 0;

    margin:auto;

    background-color: #b49531;

    transition: all 0.2s ease-out;

  }







  .btnMenu span:nth-of-type(1) {

    top: 4px;

  }



  .btnMenu span:nth-of-type(2) {

    top: 14px;

  }



  .btnMenu span:nth-of-type(3) {

    top: 25px;

  }





  .btnMenu.close span:nth-of-type(1) {

      transform: rotate(45deg);

      -webkit-transform: rotate(45deg);

      top: 14px;

  }



 



  .btnMenu.close span:nth-of-type(2){

      transform: rotate(-45deg);

      -webkit-transform: rotate(-45deg);

      top: 14px;

  }





 .btnMenu.close span:nth-of-type(3){

    display: none;

  }









  #globalCont{

    margin-top: 0;

  }





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

globalNavSp

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



  #globalNavSp {

    transition: all 0.2s  ease-out;

    position: fixed;

    width: 100%;

    z-index: -1;

    opacity: 0;

    height: 100vh;

    background: #f9f9f4;

    color: #fff;

    top: 50px;

  }





  #globalNavSp.action{

    z-index: 998;

    opacity: 1;

  }



  #globalNavSpWrap {

    height: 90vh;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    padding: 40px 20px;    

  }  





  #navSpLogo{

    width: 30%;

    margin: 0 auto 60px;

    display: block;  

  }



  .globalNavMenuSpTtl{

      color: #88b83e;

      display: block;

      text-align: center;

      margin-bottom: 40px;

      font-size: 3rem;   

  }  





  #globalNavMenuSp{

    margin-bottom: 20px;

  }





  #globalNavMenuSp li{

    font-size: 3rem;

    margin-bottom: 20px;

    padding-bottom: 25px;

    padding-left: 20px;

    position: relative;

    color: #b49531;

    border-bottom: 1px solid #b49531;

    font-weight: bold;  

  }





   #globalNavMenuSp li:last-child::after{

    display: none;

   } 



  #globalNavMenuSp li a {

      color: #b49531;

      display: block;

  }



  .btnNav{

    display: block;

    background: #4d8064;

    width: 100%;

    height: 50px;

    line-height: 50px;

    color: #fff;

    font-weight: bold;

    text-align: center;

    margin-bottom: 20px;

    border-radius: 50px;

  }



  .btnSns{

    display: flex;

    align-items: center;

    color: #b49531;

    border:2px solid #b49531;

    width: 100%;

    height: 50px;

    line-height: 50px;

    font-weight: bold;

    border-radius: 50px;

    padding: 0 20px;

    margin-bottom: 20px;    

  }



  .btnSns span{

    text-align: center;

    display: block;

    width: 100%;

  }



  .btnSns img{

    max-width: 30px;

  }  





  .subMenu a{

    display: block;

    font-size: 1.6rem;

    color: #b49531;

    padding-left: 20px;

  }







  li.menu_single_sp .menu_singleTtl_sp{

    position: relative;

    display: block;

  }



  li.menu_single_sp .menu_singleTtl_sp::before,

  li.menu_single_sp .menu_singleTtl_sp::after{

    content: "";

    position: absolute;

    display: inline-block;

    width: 14px;

    height: 2px;

    background:#b49531 ;

    border-top: none;

    border-right: none;

    margin: auto; 

    transition: all .2s ease;

  }



  li.menu_single_sp .menu_singleTtl_sp::before {

    transform: rotate(90deg);

    right: 0;

    top: 17px;

  }





 li.menu_single_sp .menu_singleTtl_sp::after {

    transform: rotate(0);

    right: 0;

    top: 0;

    bottom: 0;

  }





  li.menu_single_sp.active .menu_singleTtl_sp::before{

    display: none;

  }



  /*

  li.menu__single.active: .menu__singleTtl:after{

    transform: rotate(0);

  }

  */  





   li.menu_single_sp div.menu__second-level {

    position: static;

    background: none;

    transition: all 0.2s ease-out;

    height: 0;

    padding: 0;

    visibility: hidden;

    opacity: 0;

  }





  .menu__second-level_innerTtl {

    display: none;  

  }





   li.menu_single_sp.active div.menu__second-level {

      visibility: visible;

      opacity: 1;

      height: auto;

      padding: 20px 0 0;

  }



  .menu__second-level_nav {

    display: block;

  }  



  .menu__second-level_nav a {

    margin-bottom: 20px;

  }  





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

  infoCont

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



  .infoCont {

      display: block;

      padding: 50px 20px;

    }





    .infoContInner {

      width: 100%;

      text-align: center;

    }



    .infoContInner.firstChild{

      margin-bottom: 30px;

      padding-bottom: 30px;

      border-bottom: 1px solid #b49531;

    }



    .subTtl {

      margin-bottom: 20px;

      padding-bottom: 20px;

    }



    .subInto {

      margin-bottom: 50px;

    }



    .pageTtl {

      margin-top: 90px;

      padding: 90px 0;

      background-position: -110px top, calc(100% + 110px) bottom;

      background-size: 100%, 70%;      

    }



    .pageTtl::after {

      top: 180px;

     } 







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

  footer

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



#igSlider{

  margin: 100px auto 100px;

}



.igSliderTtl {

  margin-bottom: 40px;

}



.photoListWrap{

  position: relative;

}



.photoList{

  margin-bottom: 40px; 

}



.photoList li{

  max-width: 240px;

}







  #arrows_pos {

    position: absolute;

    left: 0;

    right: 0;

    top: -20%;

    bottom: 0;

    margin: auto;

    width: 92%;
    z-index: 1;

  }



  #arrows_pos .arrow {

    position: absolute;

    top: 0;

    bottom: 0;

    margin: auto;

    cursor: pointer;

    max-width: 35px;
    

  }



  #arrows_pos .arrow.prev {

    left: 0;

  }



  #arrows_pos .arrow.next {

    right: 0;

  }



.photoListWrap .btnInfo{
	position: relative;
	z-index: 2;
}



  .footerInner {

    display: block;

  }



  #footerLogo {

    display: block;

    width: 50%;

    text-align: center;

    margin: 0 auto 40px;

  }



  #footerNav ul {

    padding: 0 20px;

    gap: 24px;

    font-size: 1.4rem;

  }





  .footerLink {

    display: block;

    margin-bottom: 30px;

    text-align: left;

    padding-left: 20px;

    font-size: 1.4rem;

  }





  #copyright {

    text-align: center;

  }





  .btnTop {

    width: 100%;

    height: 50px;

    position: absolute;

    margin: auto;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: 0;

    display: block;

  }



  .dli-chevron-up {

    top: 14px;

  }  



}