body{
  background: #d2d5d0;
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, Arial, Helvetica, "ＭＳ Ｐゴシック", "MS PGothic", Osaka－等幅, sans-serif;
  font-size: 1.2rem;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  font-feature-settings: "palt", "kern" 0;
  line-height: 1.6;
}
.holder {
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
  height: 66vw;
  margin-top: -7vw;
}
.free{
  width: 11vw;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}
.cylinder {
  position: relative;
  height: 40vw;
  width: 100vw;
  transform-style: preserve-3d;
  animation: spin 11s infinite linear;
}
.title{
  position: absolute;
  top: 12%;
  right: 25vw;
  color: #333;
  font-weight: 700;
  font-size: 4rem;
  line-height: 2;
  z-index: 100;
  width: 50vw;
  transform: rotateX(15deg);
}
.h1{
  width: 40vw;
  display: flex;
  margin: 0 auto;
}
.face {
  position: absolute;
  background-color: #fff;
  opacity: 1;
  height: 12vw;
  display: flex;
  border-radius: 1vw;
  overflow: hidden;
  width: 22vw;
  align-items: center;
  box-sizing: border-box;
  padding: 5vw;
  justify-content: center;
  top: 70%;
  left: 38%;
  transform: rotateY(calc(60deg * var(--index))) translateZ(calc(28.915494vw - -6px));
  background: #ffffff7d;
  backdrop-filter: blur(10px) brightness(100%) opacity(1);
  -webkit-backdrop-filter: blur(10px) brightness(80%) opacity(1);
}
.face:nth-child(1) {
  padding: 4vw;
}
.face:nth-child(2) {
  padding: 5vw;
}
.face:nth-child(3) {
  padding: 5vw;
}
.face:nth-child(4) {
  padding: 3.2vw;
}
.face:nth-child(5) {
  padding: 3.9vw;
}
.face:nth-child(6) {
  padding: 3.2vw;
}
img{
  width: 100%;
}

@keyframes spin {
  to {
    transform: rotateY(-360deg);
  }
}


@media only screen and (max-width: 768px) {
.holder {
  transform-style: preserve-3d;
  animation: animateHolder 18s infinite;
  height: 133vw;
  margin-top: -9vw;
}
@keyframes animateHolder {
    0%, 100% {
        transform: rotateX(20deg);
    }
    50% {
        transform: rotateX(-20deg);
    }
}
.title {
  position: absolute;
  top: 6%;
  right: 1vw;
  color: #333;
  font-weight: 700;
  font-size: 4rem;
  line-height: 2;
  z-index: 100;
  width: 98vw;
  animation: animateTitle 18s infinite;
}
@keyframes animateTitle {
    0%, 100% {
        transform: rotateX(-20deg);
    }
    50% {
        transform: rotateX(20deg);
    }
}
.free{
  width: 22.5vw;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}
.h1{
  width: 58vw;
  display: flex;
  margin: 0 auto;
}
.face {
  position: absolute;
  background-color: #fff;
  opacity: 1;
  height: 22vw;
  display: flex;
  border-radius: 2.5vw;
  overflow: hidden;
  width: 46vw;
  align-items: center;
  box-sizing: border-box;
  padding: 5vw;
  justify-content: center;
  left: 30vw;
  transform: rotateY(calc(60deg * var(--index))) translateZ(60vw);
  background: #ffffff57;
  backdrop-filter: blur(10px) brightness(102%) opacity(0.97);
  -webkit-backdrop-filter: blur(10px) brightness(80%) opacity(0.95);
  animation: animateFace 11s ease-in-out infinite;
}
@keyframes animateFace {
    0%, 100% {
        top: 76vw;
    }
    50% {
        top: 50vw;
    }
}
.face:nth-child(1) {
  padding: 5vw;
}
.face:nth-child(2) {
  padding: 8vw;
}
.face:nth-child(3) {
  padding: 7.5vw;
}
.face:nth-child(4) {
  padding: 6.6vw;
}
.face:nth-child(5) {
  padding: 3.9vw;
}
.face:nth-child(6) {
  padding: 3.2vw;
}
.cta{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60vw;
  font-size: 20px;
  color: #fff;
  background: #005326;
  text-decoration: none;
  margin: 0 auto;
  height: 16vw;
  margin-top: 8.4vw;
  box-shadow: 0px 2px 10px -6px #fff, 0px 15px 20px 0px #fff;
  z-index: 9999;
  position: relative;
  font-weight: bold;
  letter-spacing: 0.1rem;
}
footer{
  width: 100%;
  background: #0e301e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 15vw;
  padding-bottom: 12vw;
}
footer img{
  width: 20vw;
  margin: 12vw 0 6vw;
}
footer a{
  color: #fff;
  margin-bottom: 4vw;
} 
footer span{
  font-size: 13px;
} 
}

@media only screen and (min-width: 768px) {
.free {
  width: 120px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}
.holder {
  transform-style: preserve-3d;
  height: 666px;
  width: 800px;
  margin: 0 auto;
  display: flex;
  animation: animateHolder 18s infinite;
  margin-top: 0;
}
@keyframes animateHolder {
    0%, 100% {
        transform: rotateX(-20deg);
    }
    50% {
        transform: rotateX(20deg);
    }
}
.title {
  position: absolute;
  top: 0;
  right: 140px;
  color: #333;
  font-weight: 700;
  font-size: 4rem;
  line-height: 2;
  z-index: 100;
  width: 520px;
  animation: animateTitle 18s infinite;
}
@keyframes animateTitle {
    0%, 100% {
        transform: rotateX(20deg);
    }
    50% {
        transform: rotateX(-20deg);
    }
}
.cylinder {
  position: relative;
  height: 360px;
  width: 800px;
  transform-style: preserve-3d;
  animation: spin 11s infinite linear;
}
.face {
  position: absolute;
  background-color: #fff;
  opacity: 1;
  height: 140px;
  display: flex;
  border-radius: 1vw;
  overflow: hidden;
  width: 290px;
  align-items: center;
  box-sizing: border-box;
  padding: 5vw;
  justify-content: center;
  top: 200px;
  left: 255px;
  transform: rotateY(calc(60deg * var(--index))) translateZ(350px);
  background: #ffffff7d;
  backdrop-filter: blur(10px) brightness(100%) opacity(1);
  -webkit-backdrop-filter: blur(10px) brightness(80%) opacity(1);
  animation: animateFace 11s ease-in-out infinite;
  }
@keyframes animateFace {
      0%, 100% {
          top: 320px;
      }
      50% {
          top: 200px;
      }
  }
.face:nth-child(1) {
  padding: 60px;
}
.face:nth-child(2) {
  padding: 70px;
}
.face:nth-child(3) {
  padding: 60px;
}
.face:nth-child(4) {
  padding: 50px;
}
.face:nth-child(5) {
  padding: 50px;
}
.face:nth-child(6) {
  padding: 40px;
}
.h1 {
  width: 330px;
  display: flex;
  margin: 0 auto;
}
.cta{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  font-size: 22px;
  color: #fff;
  background: #005326;
  text-decoration: none;
  margin: 0 auto;
  height: 90px;
  margin-top: 50px;
  box-shadow: 0px 2px 10px -6px #fff, 0px 15px 20px 0px #fff;
  z-index: 9999;
  position: relative;
  font-weight: bold;
  letter-spacing: 0.1rem;
}
.c1{
  width: 500px;
  margin: 0px calc((100vw - 500px)/2);
}
footer{
  width: 100%;
  background: #0e301e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 80px;
  padding-bottom: 90px;
}
footer .logo{
  width: 120px;
  margin: 80px 0 40px;
}
footer a{
  color: #fff;
  margin-bottom: 30px;
  font-size: 13px;
}
footer span{
  font-size: 13px;
}
  
}