@charset "utf-8";


.anim-box{
	opacity:1;
	}
.js .anim-box.anim{
	opacity:0;
	}



/* フェードイン */
.anim-box.fadein.is-animated {
	animation:fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	}
@keyframes fadeIn {
	0% {
    opacity:0;
	}
	100% {
	opacity:1;
	}
	}





/* スライドイン */
.anim-box.slidein.is-animated {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	}
@keyframes slideIn {
	0% { transform: translateX(180px); opacity:0; }
	40%,100% { opacity:1; }
	100% { transform: translateX(0); }
	}

/* スライドイン2 */
.anim-box.slidein2.is-animated {
	animation: slideIn2 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	}
@keyframes slideIn2 {
	0% { transform: translateX(180px); opacity:0; }
	40%,100% { opacity:1; }
	100% { transform: translateX(0); }
	}




/* ズームイン */
.anim-box.zoomin.is-animated {
	animation:zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	}
@keyframes zoomIn {
	0% {
	transform:scale(0.8);
    opacity:0;
	}
	100% {
    opacity:1;
    transform:scale(1);
	}
	}





/* ぽよよん */
.anim-box.poyoyon.is-animated {
  animation:poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@keyframes poyoyon {
	0% {
    transform:translateX(140px);
    opacity:0;
	}
	50% {
    transform:translateX(0);
	}
	65% {
    transform:translateX(30px);
	}
	100% {
    transform:translateX(0);
	}
	20%,100% {
    opacity:1;
	}
	}





/* ぽよよん2 */
.anim-box.poyoyon2.is-animated {
	animation:poyoyon2 1s ease-in-out 1 forwards;
	}
@keyframes poyoyon2 {
	0%  {
	transform:scale(1.0, 1.0) translate(0, 0);
	}
	15% {
    transform:scale(0.98, 0.9) translate(0, 5px);
	}
	30% {
	transform:scale(1.02, 1.0) translate(0, 8px);
	}
	50% {
	transform:scale(0.98, 1.05) translate(0, -8px);
	}
	70% {
	transform:scale(1.0, 0.9) translate(0, 5px);
	}
	100% {
    transform:scale(1.0, 1.0) translate(0, 0);
	}
	0%, 100% {
	opacity:1;
	}
	}





/* ぽよよん3 */
.anim-box.poyoyon3 {
	animation:poyoyon3 2.5s infinite;
	opacity:1;
	}
@keyframes poyoyon3 {
	0%, 40% {
    transform:skew(0deg, 0deg);
	}
	5% {
	transform:skew(5deg, 5deg);
	}
	10% {
    transform:skew(-4deg, -4deg);
	}
	15% {
    transform:skew(3deg, 3deg);
	}
	20% {
    transform:skew(-2deg, -2deg);
	}
	25% {
    transform:skew(1deg, 1deg);
	}
	30% {
    transform:skew(-0.6deg, -0.6deg);
	}
	35% {
    transform:skew(0.3deg, 0.3deg);
	}
	}





/* ポップアップ */
.anim-box.popup.is-animated {
  animation:popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
	}
@keyframes popup {
	0% {
    transform:translateY(40px) scale(0.8);
    opacity:0;
	}
	100% {
	transform:translateY(0) scale(1.0);
	}
	80%, 100% {
    opacity:1;
	}
	}





/* ぽよぽよ収縮する */
.anim-box.poyopoyo{ opacity:0; }
.anim-box.poyopoyo.is-animated{
	opacity:1;
	animation:poyopoyo 2s ease-out infinite;
	}
@keyframes poyopoyo {
	0%, 40%, 60%, 80% { transform:scale(1.0); }
	50%, 70% { transform:scale(0.95); }
	}





/* ななめから出てくる */
.anim-box.slide-skew.is-animated {
	animation:slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	}
@keyframes slide-skew {
	0% {
    transform:translate(180px,30px);
    opacity:0;
	}
	100% {
    transform:translate(0,0);
	}
	20%,100% {
    opacity:1;
	}
	}





/* きらん */
.anim-box.kiran {
	opacity:1;
	overflow:hidden;
	position:relative;
	cursor:pointer;
	}
.anim-box.kiran::before {
	background-color:#fff;
	content:"";
	display:block;
	position:absolute;
	top:-100px;
	left:0;
	width:30px;
	height:100%;
	opacity:0;
	transition:cubic-bezier(0.32, 0, 0.67, 0);
	}
.anim-box.kiran:hover::before {
	animation:kiran 0.5s linear 1;
	}
@keyframes kiran {
	0% {
    transform:scale(2) rotate(45deg);
    opacity:0;
	}
	20% {
    transform:scale(20) rotate(45deg);
    opacity:0.6;
	}
	40% {
    transform:scale(30) rotate(45deg);
    opacity:0.4;
	}
	80% {
    transform:scale(45) rotate(45deg);
    opacity:0.2;
	}
	100% {
    transform:scale(50) rotate(45deg);
    opacity:0;
	}
	}





/* 背景色が流れてくる */
.bg .bg-wrap {
	position:relative;
	display:inline-block;
	}
.bg.is-animated .bg-wrap::before {
	animation:bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	background:linear-gradient(to right, #059de8 0%,#059de8 50%,#059de8 100%);
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transform-origin:left center;
	}
.bg .bg-wrap .inn {
	display:inline-block;
	position:relative;
	z-index:1;
	}
@keyframes bg {
	0% {
	opacity:0;
	transform:scaleX(0) translateX(-5%);
	}
	30% {
	transform:scaleX(1) translateX(0);
	}
	100% {
    transform:scaleX(1) translateX(0);
	}
	30%, 100% {
	opacity:1;
	}
	}





/* 文字がぬるりと現れる */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
	display:block;
	}
.matrix .bg-wrap {
	overflow:hidden;
	opacity:0;
	}
.matrix .bg-wrap + .bg-wrap {
	margin-top:10px;
	}
.matrix .bg-wrap .inn.large {
	font-size:36px;
	font-weight:bold;
	}
.matrix .bg-wrap .inn.small {
	font-size:15px;
	}
.matrix .bg-wrap .inn {
	opacity:0;
	transform:matrix(1, 0, 0, 1, 0, 100);
	transition:1.2s cubic-bezier(0.22, 1, 0.36, 1);
	}
.matrix.is-animated .bg-wrap {
	opacity:1;
	}
.matrix.is-animated .bg-wrap .inn {
	opacity:1;
	transform:matrix(1, 0, 0, 1, 0, 0);
	}





/* 背景色が消えてから表示されるテキスト */
.mask-bg {
	color:transparent;
	display:inline-block;
	font-size:36px;
	font-weight:bold;
	overflow:hidden;
	position:relative;
	transition:color 0ms 450ms;
	}
.mask-bg::after {
	background:linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
	bottom:0;
	content:'';
	display:block;
	left:0;
	position:absolute;
	right:0;
	top:0;
	transform:translate(0, 100%);
	}
.mask-bg.is-animated {
	color:#362ae0;
	}
.mask-bg.is-animated::after {
	animation:mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
	}
@keyframes mask-bg {
	0% {
	transform:translate(0, 101%)
	}
	40%, 60% {
    transform:translate(0, 0%)
	}
	100% {
    transform:translate(0, -100%)
	}
	}





/* 線が伸びる */
.line {
	display:block;
	position:relative;
	margin-top:20px;
	}
.line::after {
	background:linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
	content:'';
	display:block;
	height:1px;
	width:0;
	transform:translateX(-50%);
	transition:1.2s cubic-bezier(0.22, 1, 0.36, 1);
	position:absolute;
	bottom:0;
	left:50%;
	}
.line.is-animated::after {
	width:100%;
	}





/* フェードアップ */
.anim-box.fadeup.is-animated {
	animation:fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	}
@keyframes fadeup {
	0% {
	transform:translateY(30px);
	opacity:0;
	}
	80% {
	opacity:1;
	}
	100% {
	opacity:1;
	transform:translateY(0);
	}
	}





/* ボーダーが緩やかにつく */
.stroke {
	background:#f0f0f0;
	max-width:400px;
	height:250px;
	position:relative;
	}

.stroke .border {
	content:"";
	position:absolute;
	opacity:0;
	}
.stroke .border.top,
.stroke .border.bottom {
	width:calc(100% - 20px);
	}
.stroke .border.top {
	border-top:3px solid #362ae0;
	right:0;
	top:0;
	}
.stroke .border.bottom {
	border-bottom:3px solid #362ae0;
	left:0;
	bottom:0;
	}
.stroke .border.right,
.stroke .border.left {
	height:calc(100% - 20px);
	}
.stroke .border.right {
	border-right:3px solid #362ae0;
	right:0;
	top:0;
	}
.stroke .border.left {
	border-left:3px solid #362ae0;
	left:0;
	bottom:0;
	}
.stroke.is-animated .border {
	opacity:1;
	}
.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
	animation:stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
	}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
	animation:stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
	}
@keyframes stroke-width {
	0% {
	width:0;
    opacity:1;
	}
	100% {
    width:calc(100% - 20px);
    opacity:1;
	}
	}
@keyframes stroke-height {
	0% {
    height:0;
    opacity:1;
	}
	100% {
    height:calc(100% - 20px);
    opacity:1;
	}
	}





/* 文字が滑らかに表示される */
.smooth {
	clip-path:inset(0 100% 0 0);
	display:inline-block;
	font-size:36px;
	font-weight:bold;
	transition:1.4s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property:clip-path;
	line-height:1;
	height:40px;
	margin-top:15px;
	}
.smooth.is-animated {
	clip-path:inset(0);
	}





/* ふわふわ */
.fuwafuwa {
	animation:fuwafuwa 3s infinite ease-in-out .8s alternate;
	background:linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
	display:inline-block;
	transition:1.5s ease-in-out;
	width:70px;
	height:70px;
	margin-top:15px;
	}
@keyframes fuwafuwa {
	0% {
    transform:translate(0, 0) rotate(-7deg);
	}
	50% {
    transform:translate(0, -7px) rotate(0deg);
	}
	100% {
    transform:translate(0, 0) rotate(7deg);
	}
	}





/* ゆったりスクロールボタン */
.scroll {
	display:inline-block;
	padding-top:70px;
	position:relative;
	}
.scroll::before {
	animation:scroll 3.5s infinite;
	border:solid #000;
	border-width:0 0 1px 1px;
	content:"";
	display:inline-block;
	margin:auto;
	position:absolute;
	top:0;
	right:0;
	left:0;
	transform:rotate(-45deg);
	width:20px;
	height:20px;
	}
@keyframes scroll {
	0% {
    transform:rotate(-45deg) translate(0, 0);
	}
	80% {
    transform:rotate(-45deg) translate(-30px, 30px);
	}
	0%, 80%, 100% {
    opacity:0;
	}
	40% {
    opacity:1;
	}
	}





/* くるくる回りながら出現 */
.kurukuru {
	background:linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
	width:50px;
	height:50px;
	opacity:0;
	padding-bottom:40px;
	}
.kurukuru.is-animated {
	animation:kurukuru 1.4s ease-out;
	opacity:1;
	}
@keyframes kurukuru {
	0%{
    transform:rotateY(0) translateY(40px);
    opacity:0;
	}
	100%{
    transform:rotateY(360deg) translateY(0);
    opacity:1;
	}
	}





/*------------------------------------------------------------------------------
  clearfix
------------------------------------------------------------------------------*/

.clearfix:after,
.inner-block:after {
	clear:both;
	content:"";
	display:block;
	height:0px;
	font-size:0;
	visibility:hidden;
	}