@charset "UTF-8";
/*
* gnavi.css
* description : CINEMA COFFEE ROASTERS
*
* Created  2021/10/31.
* Last Update 2022/02/09.
*/










/*
[[[ Global Navi ]]]
*/

/*----- [[[ Out Frame ]]] -----*/

#global-navi.cc-content-frame {
 margin: 0;
 padding: 0;
}
#global-navi.cc-content-frame.height-min {
 padding: 0;
}


@media screen and (min-width: 768px) {
 #global-navi.cc-content-frame {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
 }
 
}


@media screen and (min-width: 1200px) {
 #global-navi.cc-content-frame {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
 }
 
}










/*----- [[[ Humbarger Menu (Index and Pages) ]]] -----*/

/*[ Common ]*/
@media screen and (min-width: 992px) {/**/
 #global-navi .open-btn {
  display: none;
 }

}

#global-navi .open-btn {
 position: relative;
 background:#A67744;
 cursor: pointer;
 width: 42px;
 height: 42px;
 border-radius: 0;
 z-index: 9999;
}

#global-navi .open-btn span {
 display: inline-block;
 transition: all .4s;
 position: absolute;
 left: 10px;
 height: 3px;
 border-radius: 2px;
 background: #fff;
 width: 50%;
 }

#global-navi .open-btn span:nth-of-type(1) {
 top:11px; 
}
#global-navi .open-btn span:nth-of-type(2) {
 top:19px;
}
#global-navi .open-btn span:nth-of-type(3) {
 top:27px;
}

#global-navi .open-btn.active span:nth-of-type(1) {
 top: 14px;
 left: 10px;
 transform: translateY(6px) rotate(-45deg);
 width: 50%;
}
#global-navi .open-btn.active span:nth-of-type(2) {
 opacity: 0;
}
#global-navi .open-btn.active span:nth-of-type(3){
 top: 26px;
 left: 10px;
 transform: translateY(-6px) rotate(45deg);
 width: 50%;
}


.scroll-prevent {
 overflow: hidden;
}





/*----- [[[ Back Ground ]]] -----*/

/* [ for Index ]*/
#index #global-navi.height-min .cc-bg-gnavi {
 background: url("../images/img_bg_film@2x.jpg") no-repeat center / cover;
}


/*[ for Pages ]*/
#pages #global-navi .cc-bg-gnavi {
 background: url("../images/img_bg_film@2x.jpg") no-repeat center / cover;
}


/* [ Common ]*/

@media screen and (min-width: 1200px) {
 #global-navi .cc-bg-gnavi {
  padding-left: 3rem;
  padding-right: 3rem;
 }

} /* @media screen and (min-width: 1200px) end */


@media screen and (max-width: 1199px) and (min-width: 992px) {
 #global-navi .cc-bg-gnavi {
  padding-left: 2rem;
  padding-right: 2rem;
 }
 
} /* @media screen and (max-width: 1199px) and (min-width: 992px) end */


@media screen and (max-width: 991px) and (min-width: 768px) {
 #global-navi .cc-bg-gnavi {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
 }
 
} /* @media screen and (max-width: 991px) and (min-width: 768px) end */


@media screen and (max-width: 767px) {
 #global-navi .cc-bg-gnavi {
  padding-left: 1rem;
  padding-right: 1rem;
 }
 
} /* @media screen and (max-width: 767px) end */




/*[[[ Logo ]]]*/

/*[ Common ]*/
#global-navi .cc-logo-gnavi {
 position: relative;
 z-index: 8889;
 line-height: 1;
}

#index #global-navi.height-min .cc-logo-gnavi {
 /* max-width: 150px; */
}

@media screen and (min-width: 1200px) {
 #global-navi .cc-logo-gnavi {
  max-width: 145px;
 }
	#pages #global-navi .cc-logo-gnavi {
  max-width: 220px;
 }

} /* @media screen and (min-width: 768px) end */

@media screen and (max-width: 1199px) and (min-width: 768px) {
 #global-navi .cc-logo-gnavi {
  max-width: 120px;
 }

} /* @media screen and (min-width: 768px) end */

@media screen and (max-width: 767px) {
 #global-navi .cc-logo-gnavi {
  max-width: 102px;
 }

} /* @media screen and (max-width: 767px) end */



/*[[[ List ]]]*/

/*[ Common ]*/
#global-navi .cc-list-frame {
 position: relative;
 z-index: 9992;
}



/*[[[ Hover Action ]]]*/

/*[ for PC ]*/
#global-navi .cc-list-frame li a {
 position: relative;
 text-decoration: none;
 line-height: 1;
}
#global-navi .cc-list-frame li a:hover {
 color: #A67744 !important;
}

#global-navi .cc-list-frame li a.h-bd::after {
 content: '';
 position: absolute;
 bottom: -10px;
 left: 0;
 width: 100%;
 height: 2px;
 background:#A67744;
 transition: all .3s;
 transform: scale(0, 1);
 transform-origin: center top;
}

#global-navi .cc-list-frame li.current a.h-bd::after,
#global-navi .cc-list-frame li a.h-bd:hover::after {
 transform: scale(1, 1);
}


/*[[[ Frame ]]]*/
/*[ for PC ]*/
@media screen and (min-width: 992px) {
 #global-navi .cc-gnavi-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

} /* @media screen and (min-width: 992px) end */





/*----- [[[ Global Navi Move ]]] -----*/

/*[ Common ]*/
#global-navi .cc-bg-gnavi .cc-gnavi-flex {
 width: 100%;
 height: 115px;
}
#global-navi.height-min .cc-bg-gnavi .cc-gnavi-flex {
 height: 75px;
}

#global-navi.height-min {
 width: 100%;
 position: fixed;
 z-index: 9991;
 animation: DownAnime .6s ease-in-out;
}


/* [ for Index ]*/
#index #global-navi.height-min {
 left:0;
 top: 0;
}

@keyframes DownAnime {
 from {
  opacity: 0;
  transform: translateY(-115px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }

} /* @keyframes DownAnime end */

@media screen and (min-width: 768px) {
 #index #global-navi.height-min .cc-logo-gnavi {
  max-width: 120px;
 }

}


@media screen and (max-width: 767px) {
 #global-navi.height-min .cc-logo-gnavi {
  max-width: 80px;
 }

 #index #global-navi.height-min .cc-logo-gnavi {
  max-width: 100px;
 }

}







/*----- [[[ Global Navi for Smart Phone ]]] -----*/

/*[ Common ]*/
@media screen and (max-width: 991px) {
 #global-navi .cc-gnavi-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
 }

 #global-navi .cc-gnavi-flex .cc-list-frame li {
  padding: .4rem .6rem;
  border-top: 1px solid #fff;
 }
 #global-navi .cc-gnavi-flex .cc-list-frame li:last-child {
  border-bottom: 1px solid #fff;
 }

} /* @media screen and (max-width: 991px) end */


@media screen and (max-width: 767px) {
 #global-navi .cc-bg-gnavi .cc-gnavi-flex {
  height: 98px;
 }

} /* @media screen and (max-width: 767px) end */










/*----- [[[ Circle Back Ground for Smart Phone ]]] -----*/

/* [ Common ]*/
@media screen and (max-width: 991px) {
 #global-navi .cc-list-frame {
  display: none;
 }
 #global-navi.panelactive .cc-list-frame {
  display: block;
  position:fixed;
  z-index: 9997;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
 }

 #global-navi.panelactive .cc-list-frame ul {
  position: absolute;
  z-index: 9998;
  width: 72%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
 }

} /* @media screen and (max-width: 991px) end */


/*[ Common ]*/
.circle-bg {
 position: fixed;
 z-index: 9990;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 background: #A67744;
 transform: scale(0);
 right: -50px;
 top: -50px;
 transition: all 0.8s;
}

.circle-bg.circleactive {
 transform: scale(50);
}