@charset "utf-8";

@supports (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    --font-size-xs: clamp(1rem, 0vw + 1.1rem, 1rem);
    --font-size-s: clamp(1.3rem, 0.1vw + 1.2rem, 1.4rem);
    --font-size-m: clamp(1.6rem, 0.3vw + 1.4rem, 1.7rem);
    --font-size-l: clamp(1.8rem, 0.5vw + 1.6rem, 2rem);
    --font-size-xl: clamp(2.2rem, 0.7vw + 1.8rem, 2.5rem);
    --font-size-xxl: clamp(2.7rem, 1.1vw + 2.1rem, 3.2rem);
    --font-size-xxxl: clamp(3.2rem, 1.6vw + 2.3rem, 3.9rem);
  }
}

@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    --font-size-xs: 1rem;
    --font-size-s: 1.3rem;
    --font-size-m: 1.6rem;
    --font-size-l: 1.8rem;
    --font-size-xl: 2.2rem;
    --font-size-xxl: 2.7rem;
    --font-size-xxxl: 3.2rem;
  }
  @media screen and (min-width: 1000px) {
    :root {
      --font-size-xs: 1rem;
      --font-size-s: 1.4rem;
      --font-size-m: 1.7rem;
      --font-size-l: 2rem;
      --font-size-xl: 2.5rem;
      --font-size-xxl: 3.2rem;
      --font-size-xxxl: 3.9rem;
    }
  }
}



/* INTRO */
/*
.gg-intro {
  width: 100%;
  display: block;
  overflow: hidden;
}
*/

.gg-intro {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 8rem);
  min-height: calc(100svh - 8rem);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  
  overflow: hidden;
}

.gg-message{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;  
  background-color: rgb(0,174,178, 1); 
  opacity: 1;
  z-index: 100;
}

.start .gg-message{
  animation: fade-bg 3s 3.5s ease-in forwards;
}

@keyframes fade-bg {
  0% { opacity: 1; background-color: rgb(0,174,178, 1); }
  40% {  opacity: 1; background-color: rgb(255,255,255, 1); }
  100% {  opacity: 1; background-color: rgb(255,255,255, 0); }
}

.gg-message .logo-image{
  margin: 0;
  padding: 2em 0;
  width: 94%;
  max-width: 100rem;
  height: 100%;
  display: block;
  opacity: 1;  
}

.gg-message .logo-image img{
  width: 25%;
  max-width: 15rem;  
  aspect-ratio: 300 / 200;
  opacity: 0;
  filter: drop-shadow(0 0 0.3rem rgb(0,0,0, 0.5));
}

.start .gg-message .logo-image img{
  animation: show-logo-img 0.7s 6s ease-in forwards;
}

@keyframes show-logo-img {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

.gg-message .logo-image::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 40%;
  max-width: 20rem;  
  aspect-ratio: 300 / 200;
  display: block;
  background: url(/giangarden/lp/img/giangarden_logo.svg) no-repeat;
  opacity: 0;
  content: "";
}

.start .gg-message .logo-image::before{
  animation: show-logo 5s 0.5s ease-in forwards;
}

@keyframes show-logo {
  0% { opacity: 0;}
  20% { opacity: 1;}
  80% { opacity: 1;}
  90% { opacity: 0;}
}



.gg-main-copy{
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  max-width: 60rem;
  aspect-ratio: 600 / 48;
  opacity: 0;
  z-index: 1000;
}

.gg-main-copy-pc{ display: block;}
.gg-main-copy-sp{ display: none;}

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

.gg-main-copy{
  top: 35%;
  width: 75%;
  max-width: 38rem;
  aspect-ratio: 380 / 118;
}

.gg-main-copy-pc{ display: none;}
.gg-main-copy-sp{ display: block;}

}/* End max720 */


.start .gg-main-copy{
  animation: show-massage 1s 7s ease-in forwards;
}

@keyframes show-massage {
  0% { opacity: 0; filter: blur(1rem) drop-shadow(0 0 0.3rem rgb(0,0,0, 0.7)) drop-shadow(0 0 0.2rem rgb(0,0,0, 0.7));}
  100% { opacity: 1; filter: blur(0) drop-shadow(0 0 0.3rem rgb(0,0,0, 0.7)) drop-shadow(0 0 0.2rem rgb(0,0,0, 0.7));}
}



.dash-image{
  position: absolute;
  margin: 0;
  padding: 0;
  width: 25%;
  max-width: 12rem;
  display: block;
  overflow: hidden;
  aspect-ratio: 100 / 354;
  opacity: 0;
  z-index: 900;
}

.start .gg-message .dash-image{
  animation: dash-slide 1.5s 1.7s ease-in forwards;
}

@keyframes dash-slide {
  0% { transform: translateY(100vh) translateX(20vw) rotate( -30deg ); opacity: 1;}
  100% { transform: translateY(-100vh) translateX(-40vw) rotate( -20deg ); opacity: 1;}
}

.dash-image span img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
  display: block;
  overflow: hidden;
  animation: dash-move 0.2s steps(2) infinite;
}

@keyframes dash-move {
  to { object-position: 200% 0;}
}


.gg-slider{
  position: relative;
  width: 100%;
  min-height: 50rem;
  max-height: 70vh;
  display: block;
  overflow: hidden;
  z-index: 1;
}

.gg-slider::before,
.gg-slider::after{
  position: absolute;
  bottom: -0.1rem;
  margin: 0;
  padding: 0;
  width: calc(15% + 0.1rem);
  height: 4.1rem;  
  display: block;
  background-color: #fff;
  z-index: 100;  
  content: "";
}

.gg-slider::before {
  left: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.gg-slider::after {
  right: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

 
.gg-slider .slide-media .slide-inner {
  width: 100%;
  height: 100%;
  transition: transform 15s 0.5s ease-out, opacity 2s ease-out;
  transform: scale(1);
  opacity: 0.4;
}
 
.gg-slider .splide__slide[class*=-active] .slide-media .slide-inner {
  transition-delay: 0s;
  transform: scale(1.2);
  opacity: 1;
}
 
.gg-slider .slide-media img {
  width: 100%;
  height: 70vh;
  min-height: 50rem;
  max-height: 60rem;
  object-fit: cover;
  object-position: center 70% ;
}

.main-image-pc{ display: block;}
.main-image-sp{ display: none;}

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

.main-image-pc{ display: none;}
.main-image-sp{ display: block;}

}/* End max640 */




.gg-intro .white-base {
  position: relative;
  margin-top: -4rem;
  padding: 0 2em;
  width: 70%;
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: rgb(238,238,238);
  background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%); 
  z-index: 10;
}

.gg-intro .white-base::before {
  position: absolute;
  top: 0;
  left: 0;  
  width: 20%;
  height: 100%;
  display: block;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
  content: "";
  z-index: 1;
}

.gg-intro .white-base::after {
  position: absolute;
  top: 0;
  right: 0;  
  width: 20%;
  height: 100%;
  display: block;
  background: rgb(255,255,255);
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
  content: "";
  z-index: 1;
}

.gg-intro .white-base-inner {
  width: 100%;
  overflow: hidden;
}

.terrarium-base{
  position: relative;  
  padding: 0;
  width: 64%;
  max-width: 44rem;
  display: block;
  aspect-ratio: 440 / 250;
  transform: translateY(-55%);
  z-index: 10;
}
/*
.terrarium-base{
  position: relative;  
  padding: 0;
  width: 64%;
  max-width: 44rem;
  display: block;
  aspect-ratio: 440 / 266;
  transform: translateY(-65%);
}
*/
.terrarium-base .terrarium-01{
  position: relative;
  z-index: 10;
}

.terrarium-base .terrarium-02{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.terrarium-base .pillar{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 440 / 733;   
  z-index: 5;
}

.terrarium-base .pillar img{
  position: absolute;
  mix-blend-mode: overlay; 
  bottom: 0;
}

.start .terrarium-base .pillar img{
  animation: piller 3s ease-in infinite;
}

@keyframes piller {
  0% { height: 100%; opacity: 0.7;}
  35% { height: 85%; opacity: 0.8;}
  50% { height: 90%; opacity: 1;}
  100% { height: 100%; opacity: 0.7;}
}

.terrarium-base canvas{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  width: 100%;  
  z-index: 20;
}

.intro-image-01{
  position: absolute;
  top: 10%;
  right: -5%;
  padding: 0;
  width: 45%;
  max-width: 42rem;
  aspect-ratio: 420 / 188;
  opacity: 0;
  z-index: 1000;
}

.intro-image-02{
  position: absolute;
  top: -38%;
  left: -8%;
  padding: 0;
  width: 50%;
  max-width: 46rem;
  aspect-ratio: 460 / 380;
  opacity: 0;
  z-index: 1000;
}

.start .intro-image-01{ animation: show-animal 1s 6s ease-in forwards;}
.start .intro-image-02{ animation: show-animal 1s 6.5s ease-in forwards;}

@keyframes show-animal {
  0% { opacity: 0; filter: blur(1rem);transform: translateY(3em);}
  100% { opacity: 1; filter: blur(0);transform: translateY(0);}
}


@media screen and (min-width: 1280px) {

.gg-slider{
  min-height: 50rem;
  max-height: 80vh;
}

.gg-slider::before,
.gg-slider::after{
  width: calc(50% - 45rem + 0.1rem);
  height: 4.1rem;  
}

.gg-intro .white-base {
  margin-top: -4rem;
  width: 90rem;
}

}/* End min1280 */



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

.gg-slider::before,
.gg-slider::after{
  width: calc(8% + 0.1rem);
  height: 2.1rem;  
}

.gg-intro .white-base {
  margin-top: -2rem;
  width: 84%;
}

}/* End max768 */


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

.terrarium-base{ width: 75%; max-width: 40rem;}

}/* End max720 */

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

.terrarium-base{ width: 90%; max-width: 32rem;}

.intro-image-01{
  position: absolute;
  top: 10%;
  right: -15%;
  padding: 0;
  width: 60%;
  max-width: 22rem;
}

.intro-image-02{
  position: absolute;
  top: -40%;
  left: -24%;
  padding: 0;
  width: 65%;
  max-width: 24rem;
}

}/* End max520 */




@media screen and (max-height: 670px) {

.gg-slider{
  min-height: 40rem;
  max-height: 60vh;
}

}/* End */



/* PAGE TOP */
.page-top{ opacity: 0;}

/* charity-banner */

.sticky-foot-menu{
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  margin: 0 0;
  padding: 0;
  width: 100%;
  height: 5.5rem;
  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0,174,178, 1);
  z-index: 999;
  transition: all .5s ease;
  opacity: 0;
  pointer-events: none;
  contain: paint;
}

.scroll-on .sticky-foot-menu{ opacity: 1; pointer-events: all;}