@charset "UTF-8";

@import url("reset.css");

/***********************************************************
	layout
***********************************************************/

html {
  font-size: calc( 460 / 540 * 10px );
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

@media screen and (max-width:480px) {
  html{
    font-size : calc( 10/540 * 100vw ) ;
  }
}

body{
	font-size : 2rem;
	font-family : "Noto Sans JP", sans-serif;
	color : #000 ;
  font-feature-settings: "palt";
  text-align: center;
}
body::before ,
body::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
body::before {
  background: #004ea2;
}
body::after {
  background: url(../img/body_bg.png) repeat;
  opacity: 0.25;
}


body img{
  width : 100%;
	height : auto ;
}

body a,
body .opacity{
	color : #333 ;
	text-decoration : none ;
	transition-duration : 0.3s ;
}

body textarea,
body input,
body select,
body button{
	font-size : 14px ;
	font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo,Verdana, "游ゴシック", YuGothic,  sans-serif;
}

body article p,
body article li,
body article dt,
body article dd,
body article th,
body article td{
	line-height : 140% ;
}
body article h1,
body article h2,
body article h3,
body article h4{
	line-height : 120% ;
}

body .opacity:hover{
	opacity : 0.4 ;
	filter : alpha(opacity=40) ;
}

body article{
	position : relative ;
	margin : 0 auto ;
}

#pcbg {
  position: relative;
  z-index: 1;
}


#pcbg::after {
  content: "";
  display: block;
  max-width: 520px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
}

#wrap {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  background: #fff;
}


/***********************************************************
	header
***********************************************************/
#globalHeader{
  max-width: 460px;
  width: 100%;
  position: fixed;
	z-index : 999;
}
#globalHeader .logoLayout{
  box-sizing: border-box;
	padding : 1rem 1.5rem;
	background : #00a2e6 ;
}
#globalHeader .logoLayout .inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#globalHeader .logoLayout #siteLogo {
	width : 16.6rem;
}
#globalHeader .logoLayout #makerLogo {
	width : 15rem ;
}


/***********************************************************
	footer
***********************************************************/
#globalFooter{
	position : relative ;
	padding : 1rem ;
	background : #fff ;
	z-index : 2 ;
}
#globalFooter .inner{
	position : relative ;
	margin : 0 auto ;
	text-align : center ;
}
#globalFooter .inner p.makerLogo {
  width: 20rem;
	margin : 2.5rem auto 2rem ;
}
#globalFooter .inner p.makerLogo img {
  width: 100%;
}

#globalFooter .inner ul.link{
	position : static ;
	margin : 0 0 2rem ;
	font-size : 1.2rem ;
}
#globalFooter .inner ul.link li {
	display : inline-block ;
}
#globalFooter .inner ul.link li:first-child {
	margin : 0 1rem 0 0 ;
	padding : 0 1rem 0 0 ;
	border-right : #c4cae3 1px solid ;
}
#globalFooter .inner ul.link li a {
	color : #203a95 ;
}
#globalFooter .inner p.copyright {
	font-size : 1.2rem ;
	color : #203a95 ;
}


/***********************************************************
	contents
***********************************************************/

body article p {
	font-size : 2.2rem;
  font-weight: bold;
  line-height: 4rem;
  letter-spacing: 0.075rem;
}

article p span {
	font-size : 110%;
  vertical-align: sub;
  font-weight: normal;
  display: inline-block;
  margin-bottom: -0.5em;
  position: relative;
  top: 0.5rem;
}

#fv {
  padding-top: 6.7rem;
}

#project {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6rem), 0 100%);
  background: url(../img/project_bg.jpg) no-repeat center bottom;
  background-size: 100% auto;
  padding-bottom: 40rem;
  text-align: left;
}
#project p {
  padding-left: 3.5rem;
}
#project .mt10 { margin-top: 1.2rem;}
#project .mt20 { margin-top: 2rem;}
#project .mt35 { margin-top: 3.7rem;}
#project .mt40 { margin-top: 4rem;}
#project .mt50 { margin-top: 5rem;}
#project .sec1 { margin-top: 42rem;}
#project .sec2 { margin-top: 18rem;}

#cycle {
  padding: 5rem 4rem;
}

#anime {
  margin-top: 2rem;
  width: 100%;
  aspect-ratio: 46 / 71;
  position: relative;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  font-weight: 900;
  color: #203a95;
}
#anime > div {
  position: absolute;
}

@keyframes boxani {
    0% {
  transform: scale(0);
    }
    70% {
  transform: scale(1.1);
    }
    100% {
  transform: scale(1);
    }
}

.text-span span {
  display: inline-block;
  position: relative;
  opacity: 0;
}
.text-span.active span {
  animation: textani1 0.3s forwards;
}
#ani24.active span,
#ani27.active span {
  animation-name: textani2;
}
@keyframes textani1 {
    0% {
      opacity: 0;
        transform: translateY(-1em);
    }
    40% {
        transform: translateY(0.1em);
    }
    80% {
      opacity: 1;
        transform: translateY(-0.05em);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}
@keyframes textani2 {
    0% {
      opacity: 0;
        transform: translateX(-1em);
    }
    40% {
        transform: translateX(0.1em);
    }
    80% {
      opacity: 1;
        transform: translateX(-0.05em);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
}
.text-span.active span:nth-child(1) {
    animation-delay: 0s
}
.text-span.active span:nth-child(2) {
    animation-delay: 0.05s
}
.text-span.active span:nth-child(3) {
    animation-delay: 0.1s
}
.text-span.active span:nth-child(4) {
    animation-delay: 0.15s
}
.text-span.active span:nth-child(5) {
    animation-delay: 0.2s
}
.text-span.active span:nth-child(6) {
    animation-delay: 0.25s
}
.text-span.active span:nth-child(7) {
    animation-delay: 0.3s
}
.text-span.active span:nth-child(8) {
    animation-delay: 0.35s
}
.text-span.active span:nth-child(9) {
    animation-delay: 0.4s
}
.text-span.active span:nth-child(10) {
    animation-delay: 0.45s
}
.text-span.active span:nth-child(11) {
    animation-delay: 0.5s
}
.text-span.active span:nth-child(12) {
    animation-delay: 0.55s
}
.text-span.active span:nth-child(13) {
    animation-delay: 0.6s
}
.text-span.active span:nth-child(14) {
    animation-delay: 0.65s
}
.text-span.active span:nth-child(15) {
    animation-delay: 0.7s
}
.text-span.active span:nth-child(16) {
    animation-delay: 0.75s
}
.text-span.active span:nth-child(17) {
    animation-delay: 0.8s
}
.text-span.active span:nth-child(18) {
    animation-delay: 0.85s
}
.text-span.active span:nth-child(19) {
    animation-delay: 0.9s
}
.text-span.active span:nth-child(20) {
    animation-delay: 0.95s
}

.boxani {
  transform: scale(0);
}
.boxani.active {
  animation: boxani 0.3s forwards;
}

.arrowani {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}
.arrowani.active {
  animation: arrowani1 1s forwards;
}
#ani21.active {
  animation: arrowani2 1s forwards;
}
@keyframes arrowani1 {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}
@keyframes arrowani2 {
  0% {
    -webkit-clip-path: inset(100% 50% 0 0);
    clip-path: inset(100% 50% 0 0);
  }
  100% {
    webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}

#ani01 {
  left: 0;
  top: 0;
}
#ani02-1 {
  width: 17rem;
  left: 1.7rem;
  top: 2.0rem;
  opacity: 0;
}
#ani02-1.active {
  animation: textani1 0.3s forwards;
}
#ani02-2 {
  left: 19.7rem;
  top: 2.7rem;
  font-size: 3rem;
  color: #fff;
  text-shadow: 0px 0px 0.5rem rgba(0, 0, 0, 0.5);
}
#ani03 {
  width: 35rem;
  left: 2rem;
  top: 8rem;
}
#ani04 {
  width: 9rem;
  left: -1rem;
  top: 17rem;
}
#ani05 {
  left: 7.5rem;
  top: 24.4rem;
}
#ani06 {
  width: 5rem;
  left: 17rem;
  top: 30rem;
  z-index: 1;
}
#ani07 {
  left: 0;
  top: 35rem;
}
#ani08 {
  width: 31rem;
  left: 4rem;
  top: 37rem;
}
#ani09 {
  width: 11rem;
  left: -1rem;
  top: 33rem;
}
#ani10 {
  left: 1.5rem;
  top: 43.5rem;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0px 0px 0.5rem rgba(0, 0, 0, 0.5);
}
#ani11 {
  width: 11rem;
  left: 29rem;
  top: 33rem;
}
#ani12 {
  left: 30.9rem;
  top: 43.5rem;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0px 0px 0.5rem rgba(0, 0, 0, 0.5);
}
#ani13 {
  left: 11.5rem;
  top: 39.1rem;
}
#ani14 {
  width: 5rem;
  left: 32rem;
  top: 46rem;
  z-index: 1;
}
#ani15 {
  width: 26rem;
  left: 13rem;
  top: 49rem;
}
#ani16 {
  left: 20.6rem;
  top: 51.3rem;
}
#ani17 {
  width: 5rem;
  left: 32rem;
  top: 54.5rem;
  z-index: 1;
}
#ani18 {
  width: 26rem;
  left: 13rem;
  top: 58rem;
}
#ani19 {
  width: 10rem;
  left: 21rem;
  top: 56rem;
}
#ani20 {
  left: 16.6rem;
  top: 62.5rem;
}
#ani21 {
  width: 7rem;
  left: 38rem;
  top: 31rem;
}
#ani22 {
  width: 6rem;
  left: 38.5rem;
  top: 8rem;
}
#ani23 {
  width: 10rem;
  left: 36.5rem;
  top: 25rem;
}
#ani24 {
  font-size: 3rem;
  left: 39.9rem;
  top: 10.4rem;
  writing-mode: vertical-rl;
}
#ani25 {
  width: 5rem;
  left: 2rem;
  top: 47rem;
  z-index: 1;
}
#ani26 {
  width: 9rem;
  left: 0;
  top: 51rem;
}
#ani27 {
  left: 3.2rem;
  top: 54.3rem;
  color: #4d4d4d;
  writing-mode: vertical-rl;
}

#event {
  background: url(../img/event_bg.png) repeat;
  clip-path: polygon(0 6rem, 100% 0, 100% 100%, 0 100%);
  padding: 10rem 5rem 4rem;
}
#event .place {
  margin: 4rem auto 3rem;
  font-size: 2.4rem;
  line-height: 1.15;
}
#event .eventbox {
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  margin: 2rem auto;
  padding: 3rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}

#event .eventbox .logo {
  order: 1;
  width: 32rem;
  margin: 0 auto 2rem;
}
#event .eventbox p.date {
  order: 2;
  font-size: 2rem;
  color: #203a95;
  line-height: 1.5;
}
#event .eventbox h3 {
  order: 3;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
  color: #203a95;
}