@charset "UTF-8";

/* reset */
html {
	min-width: 100%;
	overflow: hidden;
	font-size: 100%;
}
html.scroll-lock {
	overflow-y: hidden;
}
body, header, footer, nav, main, section, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, span, table, tr, th, td, a, :after, :before {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-style: normal;
	font: inherit;
	vertical-align: baseline;
}
object, embed {
	vertical-align: top;
}
img, abbr, acronym, fieldset {
	border: 0;
}
a img {
	outline: none;
	border: none;
}
img {
	vertical-align: top;
	border: none;
	outline: none;
}
ul, ol {
	list-style-type: none;
}
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
button, input, optgroup, select, textarea , label {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
	font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
a:focus, *:focus {
	outline:none;
}
*, :after, :before {
	box-sizing: border-box;
}

body {
	width: 100%;
	color: #000;
	font-family: Verdana, Helvetica, "Helvetica Neue", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
	line-height: 1.4;
	font-weight: 400;
	background: #FFF;
}



#wrap {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 1216px;
	height: 1920px;
	background: #FFD161;
	overflow: hidden;
}


/*video-wrap*/
.video-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.video-wrap video {
	width: 100%;
	height: 100%;
}



/*btn-wrap*/
.btn-wrap {
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
	aspect-ratio: 3 / 1;
	width: 600px;
	height: 200px;
	background-image: url("./btn_bg.svg");
	background-position: 0 0;
	background-size: 100%,;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 3;
}
.btn-wrap.clicked {
	cursor: default;
}
.btn-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 130px;
	background-image: url("./btn_top.svg");
	background-position: 0 0;
	background-size: 100%,;
	background-repeat: no-repeat;
	color: #FFF;
	font-size: 60px;
	font-weight: 700;
	text-align: center;
	line-height: 130px;
}
.btn-wrap.clicked .btn-top {
	animation-fill-mode: forwards;
	animation: btnAnime 50ms forwards;
	animation-timing-function: ease-in-out;
}
.btn-handle {
	position: absolute;
	top: 1040px;
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	height: 160px;
	background: transparent;
	cursor: pointer;
	z-index: 3;
}
.btn-handle.clicked {
	cursor: default;
}



/*animation-wrap*/
.animation-wrap {
	position: absolute;
	bottom: 10px;
	left: 10%;
	aspect-ratio: 1 / 1;
	width: 80%;
	z-index: 2;
}

.animation-circleWrap {
	position: absolute;
	top: 10%;
	left: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	height: 80%;
	z-index: 1;
}
.animation-txtWrap {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.infotext-Wrap {
	position: absolute;
	top: 500px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	padding: 50px;
	border-radius: 20px;
	width: 800px;
	color: #FFF;
	font-size: 45px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
}
.animation-wrap.animeColor01 .infotext-Wrap {
	background: rgba(255,107,107,.8);
}
.animation-wrap.animeColor02 .infotext-Wrap {
	background: rgba(96,163,188,.8);
}


/*animation-circle*/
.animation-circle .explosion {
	transform-origin: 250px 250px;
	transform: scale(0.02);
	stroke: #F8EFBA;
	fill: none;
	opacity: 0;
	stroke-width: 1;
}
.animation-circle .particleLayer {
	opacity: 0;
}
.animation-circle .particleLayer circle {
	transform-origin: 250px 250px;
	opacity: 0;
	animation-fill-mode: forwards;
}

.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(1) {
	fill: #ff0000;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(2) {
	fill: #ff0000;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(3) {
	fill: #ffcccc;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(4) {
	fill: #ffcccc;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(5) {
	fill: #ffcccc;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(6) {
	fill: #ff6666;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(7) {
	fill: #ff6666;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(8) {
	fill: #ff3333;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(9) {
	fill: #ff3333;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(10) {
	fill: #ea5415;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(11) {
	fill: #ffcccc;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(12) {
	fill: #ff0000;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(13) {
	fill: #ff0000;
}
.animation-wrap.animeColor01 .animation-circle .particleLayer circle:nth-child(14) {
	fill: #ff6666;
}


.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(1) {
	fill: #0000ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(2) {
	fill: #0000ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(3) {
	fill: #ccccff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(4) {
	fill: #ccccff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(5) {
	fill: #ccccff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(6) {
	fill: #9999ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(7) {
	fill: #9999ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(8) {
	fill: #6666ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(9) {
	fill: #6666ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(10) {
	fill: #3333ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(11) {
	fill: #ccccff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(12) {
	fill: #0000ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(13) {
	fill: #0000ff;
}
.animation-wrap.animeColor02 .animation-circle .particleLayer circle:nth-child(14) {
	fill: #9999ff;
}




.animation-wrap.animeColor01.clicked .animation-circle .explosion {
	animation: explosionAnime01 800ms;
}
.animation-wrap.animeColor02.clicked .animation-circle .explosion {
	animation: explosionAnime02 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer {
	animation: particleLayerAnime 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(1) {
	animation: particleAnimate1 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(2) {
	animation: particleAnimate2 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(3) {
	animation: particleAnimate3 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(4) {
	animation: particleAnimate4 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(5) {
	animation: particleAnimate5 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(6) {
	animation: particleAnimate6 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(7) {
	animation: particleAnimate7 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(8) {
	animation: particleAnimate8 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(9) {
	animation: particleAnimate9 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(10) {
	animation: particleAnimate10 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(11) {
	animation: particleAnimate11 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(12) {
	animation: particleAnimate12 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(13) {
	animation: particleAnimate13 800ms;
}
.animation-wrap.clicked .animation-circle .particleLayer circle:nth-child(14) {
	animation: particleAnimate14 800ms;
}



/*animation-txt*/
.animation-txt {
	opacity: 0;
}
.animation-txt .text {
	transform: scale(0.8);
	transform-origin: 250px 250px;
	font-size: 70px;
	font-weight: 700;
	font-family: "Noto Sans JP", sans-serif;
}


.animation-wrap.clicked .animation-txt {
	opacity: 1;
}

.animation-wrap.animeColor01.clicked .animation-txt .text01 {
	animation-fill-mode: forwards;
	animation: textAnime01 800ms forwards;
}
.animation-wrap.animeColor01.clicked .animation-txt .text02 {
	animation-fill-mode: forwards;
	animation: textAnime02 800ms forwards;
}
.animation-wrap.animeColor01.clicked .animation-txt .text03 {
	animation-fill-mode: forwards;
	animation: textAnime03 800ms forwards;
}

.animation-wrap.animeColor02.clicked .animation-txt .text01 {
	animation-fill-mode: forwards;
	animation: textAnime04 800ms forwards;
	animation-timing-function: ease-in-out;
}
.animation-wrap.animeColor02.clicked .animation-txt .text02 {
	animation-fill-mode: forwards;
	animation: textAnime05 800ms forwards;
	animation-timing-function: ease-in-out;
}
.animation-wrap.animeColor02.clicked .animation-txt .text03 {
	animation-fill-mode: forwards;
	animation: textAnime06 800ms forwards;
	animation-timing-function: ease-in-out;
}




/*keyframes*/
@keyframes explosionAnime01 {
  0% {
    opacity: 0;
    transform: scale(0.01);
  }
  1% {
    opacity: 1;
    transform: scale(0.01);
  }
  5% {
    stroke-width: 200;
  }
  20% {
    stroke-width: 300;
  }
  50% {
    stroke: #f8a5c2;
    transform: scale(1.1);
    stroke-width: 1;
  }
  50.1% {
    stroke-width: 0;
  }
  100% {
    stroke: #f8a5c2;
    transform: scale(1.1);
    stroke-width: 0;
  }
}

@keyframes explosionAnime02 {
	0% {
	  opacity: 0;
	  transform: scale(0.01);
	}
	1% {
	  opacity: 1;
	  transform: scale(0.01);
	}
	5% {
	  stroke-width: 200;
	}
	20% {
	  stroke-width: 300;
	}
	50% {
	  stroke: #D6A2E8;
	  transform: scale(1.1);
	  stroke-width: 1;
	}
	50.1% {
	  stroke-width: 0;
	}
	100% {
	  stroke: #D6A2E8;
	  transform: scale(1.1);
	  stroke-width: 0;
	}
  }

@keyframes particleLayerAnime {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  60% {
    transform: translate(0, 0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -20px);
  }
}

@keyframes particleAnimate1 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-16px, -59px);
  }
  90% {
    transform: translate(-16px, -59px);
  }
  100% {
    opacity: 1;
    transform: translate(-16px, -59px);
  }
}

@keyframes particleAnimate2 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(41px, 43px);
  }
  90% {
    transform: translate(41px, 43px);
  }
  100% {
    opacity: 1;
    transform: translate(41px, 43px);
  }
}

@keyframes particleAnimate3 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(50px, -48px);
  }
  90% {
    transform: translate(50px, -48px);
  }
  100% {
    opacity: 1;
    transform: translate(50px, -48px);
  }
}

@keyframes particleAnimate4 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-39px, 36px);
  }
  90% {
    transform: translate(-39px, 36px);
  }
  100% {
    opacity: 1;
    transform: translate(-39px, 36px);
  }
}

@keyframes particleAnimate5 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-39px, 32px);
  }
  90% {
    transform: translate(-39px, 32px);
  }
  100% {
    opacity: 1;
    transform: translate(-39px, 32px);
  }
}

@keyframes particleAnimate6 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(48px, 6px);
  }
  90% {
    transform: translate(48px, 6px);
  }
  100% {
    opacity: 1;
    transform: translate(48px, 6px);
  }
}

@keyframes particleAnimate7 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-69px, -36px);
  }
  90% {
    transform: translate(-69px, -36px);
  }
  100% {
    opacity: 1;
    transform: translate(-69px, -36px);
  }
}

@keyframes particleAnimate8 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-12px, -52px);
  }
  90% {
    transform: translate(-12px, -52px);
  }
  100% {
    opacity: 1;
    transform: translate(-12px, -52px);
  }
}

@keyframes particleAnimate9 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-43px, -21px);
  }
  90% {
    transform: translate(-43px, -21px);
  }
  100% {
    opacity: 1;
    transform: translate(-43px, -21px);
  }
}

@keyframes particleAnimate10 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-10px, 47px);
  }
  90% {
    transform: translate(-10px, 47px);
  }
  100% {
    opacity: 1;
    transform: translate(-10px, 47px);
  }
}

@keyframes particleAnimate11 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(66px, -9px);
  }
  90% {
    transform: translate(66px, -9px);
  }
  100% {
    opacity: 1;
    transform: translate(66px, -9px);
  }
}

@keyframes particleAnimate12 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(40px, -45px);
  }
  90% {
    transform: translate(40px, -45px);
  }
  100% {
    opacity: 1;
    transform: translate(40px, -45px);
  }
}

@keyframes particleAnimate13 {
	0% {
	  transform: translate(0, 0);
	}
	30% {
	  opacity: 1;
	  transform: translate(0, 0);
	}
	80% {
	  transform: translate(29px, 24px);
	}
	90% {
	  transform: translate(29px, 24px);
	}
	100% {
	  opacity: 1;
	  transform: translate(29px, 24px);
	}
  }

@keyframes particleAnimate14 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-10px, 50px);
  }
  90% {
    transform: translate(-10px, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(-10px, 50px);
  }
}


@keyframes textAnime {
	0% { opacity: 1; }
  }
@keyframes textAnime01 {
	0%   { transform: scale(0.8, 1.4) translate(0%, -100%); fill: none; stroke:none; }
	10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
	20%  { transform: scale(1.4, 0.6) translate(0%, 5%); }
	30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
	40%  { transform: scale(0.95, 1.2) translate(0%, -15%); }
	50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.2, 1.2) translate(0%, 0%); fill: #000; stroke:#000;}
}

@keyframes textAnime02 {
	0%   { transform: scale(0.8, 1.4) translate(0%, -100%); fill: none; stroke:none; }
	10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
	20%  { transform: scale(1.4, 0.6) translate(0%, 5%); }
	30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
	40%  { transform: scale(0.95, 1.2) translate(0%, -15%); }
	50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.2, 1.2) translate(0%, 0%); fill: #FFF; stroke:#FFF; }
}

@keyframes textAnime03 {
	0%   { transform: scale(0.8, 1.4) translate(0%, -100%); fill: none;  }
	10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
	20%  { transform: scale(1.4, 0.6) translate(0%, 5%); }
	30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
	40%  { transform: scale(0.95, 1.2) translate(0%, -15%); }
	50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.2, 1.2) translate(0%, 0%); fill: #ff4757;}
}

@keyframes textAnime04 {
	0%   { transform: translate(0%, -100%) rotate(10deg); fill: none; stroke:none; }
	20%  { transform: translate(0%, 5%) rotate(-10deg); }
	40%  { transform: translate(0%, -10%) rotate(10deg); }
	60%  { transform: rotate(-10deg); }
	80%  { transform: rotate(10deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); fill: #000; stroke:#000;}
}

@keyframes textAnime05 {
	0%   { transform: translate(0%, -100%) rotate(10deg); fill: none; stroke:none; }
	20%  { transform: translate(0%, 5%) rotate(-10deg); }
	40%  { transform: translate(0%, -10%) rotate(10deg); }
	60%  { transform: rotate(-10deg); }
	80%  { transform: rotate(10deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); fill: #FFF; stroke:#FFF;}
}

@keyframes textAnime06 {
	0%   { transform: translate(0%, -100%) rotate(10deg); fill: none; }
	20%  { transform: translate(0%, 5%) rotate(-10deg); }
	40%  { transform: translate(0%, -10%) rotate(10deg); }
	60%  { transform: rotate(-10deg); }
	80%  { transform: rotate(10deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); fill: #38ada9;}
}

@keyframes btnAnime {
	0%   { transform: translate(0%, 0%);}
	100% { transform: translate(0%, 30%);}
}