@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300&display=swap');

*,
*:before,
*:after {
  box-sizing: inherit;
}

html{
  font-size: 14px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body{
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1rem;
  color: #101147;
  line-height: 2;
  letter-spacing: 0.1rem;
}

h1{
  font-size: 1.8rem;
}

h2{
  font-size: 1.3rem;
}

h3{
  margin-top: 1rem;
}

.wrapper{
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow-x: hidden !important;
  background: radial-gradient( circle at 0% 0%,#ffffff8a 90%, #5E87B5,#ffc4d2);
  position: relative;
  /* z-index: -50; */
}

header{
  width: 100%;
  height: 5rem;
  z-index: 100;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}


section{
  max-width: 1650px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.movie{
  width: 100vw;
  height: 1250px;
  overflow: hidden;
}



@keyframes fadeIn { 

  0% {opacity: 0} 

  100% {opacity: 1} 

}

.about1{
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 70%;
  height: 13rem;
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
  padding: 3rem;
  background-color:hsla(201, 69%, 91%, 0.7);
  box-shadow: 0 0 1rem 0 #88B9D7;
  z-index: 10;
  animation-name: puyopuyo;
  animation-duration: 30.0s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}


.about2{
  position: absolute;
  top: 7rem;
  left: 50%;
  width: 10rem;
  height: 8rem;
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
  padding: 2rem;
  background-color: hsla(239, 63%, 17%, 0.7);
  box-shadow: 0 0 1rem 0 #D9EDF8;
  color: #ffffff;
  z-index: 11;
  text-align: center;
  line-height: 5rem;
  animation-name: puyopuyo;
  animation-duration: 25.0s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.about3,
.about4,
.about5{
  display: none;
}


@keyframes puyopuyo{  
  0%{
      border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14%{
      border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28%{
      border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42%{
      border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56%{
      border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70%{
      border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84%{
      border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
  100%{
      border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
}

.level{
  position: relative;
  left: -10%;
  width: 120%;
  margin: 4rem 0;
  padding-left: 1rem;
}

.work{
  width: 70%;
  height: auto;
  margin-top: 8rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: [left] 1fr [right];
  grid-template-rows: 5rem 1fr 1fr 1fr;
  text-align: center;
  gap: 2rem;
}

.workall article{
  position: relative;
}

.workall article .mask {
	width:			100%;
	height:			100%;
  position: absolute;
  top: 0;
	top:			0;
	left:			0;
	/* opacity:		0;	マスクを表示しない */
	background-color:	#ffffff88;	/* マスクは半透明 */
	transition:		all 1s ease;
  align-items: center;
}

.work article:hover .mask {
  display: none;
	/* opacity:		0; */
}

.mask h2{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background-color: #ffffff;
  opacity: 1;
  padding: 1rem 0;
}


img{
  width: 100%;
  height: 100%;
  /* height: auto; */
  object-fit: cover;
}

video{
  width: 100%;
  height: 100%;
  /* height: auto; */
  object-fit: cover;
}

.w-web{
  z-index: 100;
  
}

.w-graphic{
  z-index: 200;
}

.w-graphic{
  z-index: 300;
}

.contact{
  width: 100%;
  height: auto;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

footer{
  width: 100%;
  height: auto;
  text-align: center;
  padding: 2rem;
}


  
  .arrow {
    position: relative;
    padding: 10px;
  }
  

  .arrow::before { /* くの字の表示設定 */
    content: "";
    margin: 0 auto;
    position: absolute;
    left: 25px;
    width: 20px;    /* くの字を山なりに見た時、左側の長さ */
    height: 20px;   /* くの字を山なりに見た時、右側の長さ */
    border-top: 3px solid #5E87B5;     /* くの字を山なりに見た時、左側の太さと色 */
    border-right: 3px solid #222D65;   /* くの字を山なりに見た時、右側の太さと色 */
    transform: rotate(-45deg);    /* くの字の向き */
    animation:grow 2s infinite, tikatika 5s infinite;
  }

  .arrow1 {
    position: relative;
    padding: 10px;
  }

  .arrow1::before { /* くの字の表示設定 */
    content: "";
    position: absolute;
    top: -90%;
    left:45%;
    width: 15px;    /* くの字を山なりに見た時、左側の長さ */
    height: 15px;   /* くの字を山なりに見た時、右側の長さ */
    border-top: 2px solid #5E87B5;     /* くの字を山なりに見た時、左側の太さと色 */
    border-right: 2px solid #222D65;   /* くの字を山なりに見た時、右側の太さと色 */
    transform: rotate(135deg);    /* くの字の向き */
    animation:grow 5s infinite, tikatika 5s infinite;
  }


.top{
  width: 5rem;
  height: auto;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  text-align: center;
  z-index: 100;
}

.to_top{
  width: 5rem;
  height: 5rem;
  background-image: url(/content/top/bin1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0.18rem 0.18rem 0.06rem #222D65) drop-shadow(0 0 0.18rem #3a5ba3) brightness(1.1);
  opacity: 1;
  animation:grow 2s infinite, fuwafuwa 5s infinite;
}

@keyframes grow{
  0% , 40% , 100%{
    filter: drop-shadow(0.18rem 0.18rem 0.06rem rgb(255, 255, 255)) drop-shadow(0 0 0.18rem #3a5ba3) brightness(1.1);
  }
  20% , 60% , 80% {
    filter: drop-shadow(0.18rem 0.18rem 0.06rem #222D65) drop-shadow(0 0 0.18rem #3a5ba3) brightness(1.3);
    
  }
}

@keyframes tikatika{
  0% , 40% , 100%{
    opacity: 0;
  }
  20% , 60% , 80% {
    opacity: 1;
  }
}

  @keyframes fuwafuwa{
  0%{
    transform: rotate(0turn);
  }
  100%{
    transform: rotate(1turn);
  }
}

.circles{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -10;
}

.circles li{
position: absolute;
display: block;
list-style: none;
width: 3rem;
height: 3rem;
background-color: #D9EDF8;
border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
filter: drop-shadow(0.18rem 0.18rem 1rem #222D65);
animation: puyopuyo 5s infinite, animate 200s linear infinite;
bottom: -150px;

}

.circles li:nth-child(1){
  left: 20%;
  width: 4rem;
  height: 4rem;
  animation-delay: 0s;
}


.circles li:nth-child(2){
  left: 30%;
  width: 5rem;
  height: 5rem;
  background-color: #88B9D7;
  animation-delay: 15s;
}

.circles li:nth-child(3){
  left: 40%;
  width: 6rem;
  height: 6rem;
  background-color: #D9EDF8;
  animation-delay: 40s;
}

.circles li:nth-child(4){
  left: 50%;
  width: 5rem;
  height: 5rem;
  background-color: #5E87B5;
  animation-delay: 53s;
}

.circles li:nth-child(5){
  left: 60%;
  width: 4rem;
  height: 4rem;
  background-color: #D9EDF8;
  animation-delay: 21s;
}

.circles li:nth-child(6){
  left: 70%;
  width: 5rem;
  height: 5rem;
  background-color: #88B9D7;
  animation-delay: 32s;
}

.circles li:nth-child(7){
  left: 80%;
  width: 7rem;
  height: 7rem;
  background-color: #5E87B5;
  animation-delay: 70s;
}

.circles li:nth-child(8){
  left: 90%;
  width: 6rem;
  height: 6rem;
  background-color: #D9EDF8;
  animation-delay: 2s;
}

.circles li:nth-child(9){
  left: 100%;
  width: 5rem;
  height: 5rem;
  background-color: #D9EDF8;
  animation-delay: 130s;
}

.circles li:nth-child(10){
  left: 80%;
  width: 4rem;
  height: 4rem;
  background-color: #D9EDF8;
  animation-delay: 14s;
}


@keyframes animate {

  0%{
      transform: translate(0) rotate(0deg);
      opacity: 1;
  }

  100%{
      transform: translate(-2000px, -8000px) rotate(720deg);
      opacity: 1;
  }

}




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

  html{
    font-size: 15px;
  }

  .movie{
    height: 1100px;
  }


  .line__label br{
    display: none;
  }

  .about1{
    width: 20rem;
    height: 13rem;
  }
  

  .about2{
    width: 12rem;
    top: 12rem;
    left: 10rem;
  }
  
  .about3{
    display: block;
    position: absolute;
    top: 25rem;
    left: 2rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
    padding: 2rem;
    background-color: hsla(203, 50%, 69%, 0.7);
    box-shadow: 0 0 1rem 0 #D9EDF8;
    z-index: 12;
    text-align: center;
    line-height: 5rem;
    animation-name: puyopuyo;
    animation-duration: 40.0s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }
  
  .about4{
    display: block;
    position: absolute;
    top: 35rem;
    left: 10rem;
    width: 10rem;
    height: 10rem;
    border-radius: 80% 30% 50% 50%/50%;
    padding: 2rem;
    background-color: hsla(230, 50%, 26%, 0.7);
    box-shadow: 0 0 1rem 0 #D9EDF8;
    color: #ffffff;
    z-index: 13;
    text-align: center;
    line-height: 5rem;
    animation-name: puyopuyo;
    animation-duration: 45.0s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }
  
  .about5{
    display: block;
    position: absolute;
    top: 45rem;
    left: 3rem;
    width: 10rem;
    height: 10rem;
    border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
    padding: 2rem;
    background-color: hsla(212, 37%, 54%, 0.7);
    box-shadow: 0 0 1rem 0 #D9EDF8;
    z-index: 14;
    text-align: center;
    line-height: 5rem;
    animation-name: puyopuyo;
    animation-duration: 35.0s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }

  .btn:hover {
    color: #272343;
    background: #ffd803;
    cursor: pointer;
    animation: pulsation 3s alternate infinite;
  }

  @keyframes pulsation {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1.1); }
  }
  
  .level{
    width: 120%;
  }


  .work{
    min-width: 605px;
    grid-template-columns: [left] 1fr 1fr [right];
    grid-template-rows: 5rem 1fr 1fr ;
  }
  
  
  .work div:first-child{
    grid-column-start: left;
    grid-column-end: right;
    height: auto;
  }

}


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

html{
font-size: 16px;
}

.work{
  min-width: 605px;
  grid-template-columns: [left] 1fr 1fr 1fr [right];
  grid-template-rows: 5rem 1fr;
}


}


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

  
  .movie{
    height: 1050px;
  }
  
  .level{
    display: grid;
    grid-template-columns: 45% 55%;
  }
  
  }

/* Color Theme Swatches in Hex */
.color-theme_e167367e2b6ae97394a81b910c029f3f-1-hex { color: #101147; }
.color-theme_e167367e2b6ae97394a81b910c029f3f-2-hex { color: #222D65; }
.color-theme_e167367e2b6ae97394a81b910c029f3f-3-hex { color: #5E87B5; }
.color-theme_e167367e2b6ae97394a81b910c029f3f-4-hex { color: #88B9D7; }
.color-theme_e167367e2b6ae97394a81b910c029f3f-5-hex { color: #D9EDF8; }