<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";


/***************************************************
 * Generated by SVG Artista on 2/4/2022, 5:50:30 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
.mv-line { -webkit-animation: mv-line1 1.2s ease 0s both; animation: mv-line1 1.2s ease 0s both;}
@-webkit-keyframes mv-line1 {
0% { stroke-dashoffset: 400%; stroke-dasharray: 400%;}
100% { stroke-dashoffset: 0; stroke-dasharray: 400%;}
}
@keyframes mv-line1 {
0% { stroke-dashoffset: 400%; stroke-dasharray: 400%;}
100% { stroke-dashoffset: 0; stroke-dasharray: 400%;}
}


/*--------------------
s0
----------------------*/
.gamen {}
.gamen .s0{ width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; bottom: 0%; background: url("../img/smp/line.jpg") 50% 40% #06c755 no-repeat; background-size: 80% auto; transition: 0.6s;}
@media screen and (max-width: 840px) {
.gamen .s3, 
.gamen .s4, 
.gamen .s5, 
.gamen .s6, 
.gamen .s7 { display: none !important;}
}
/*--------------------
s1
----------------------*/
.fix .gamen .s1{ left: 100%;}
.gamen .s1::after, 
.gamen .s1::before{ width: 100%; height: 40%; position: absolute; z-index: 4; left: 0; content: "";}
.gamen .s1::after{ top: 0; background: url("../img/smp/0_top.png") 0 0 no-repeat; background-size: 100% auto;}
.gamen .s1::before{ bottom: 0; background: url("../img/smp/0_bottom.jpg") 100% 100% no-repeat; background-size: 100% auto;}
.gamen .s1{ width: 100%; height: 100%; position: absolute; z-index: 2; left: 0; bottom: 0%; background: url("../img/smp/01.jpg") 0 0% no-repeat; background-size: 100% auto; animation: gamen1 15s linear infinite; transition: 0.6s;}

@keyframes gamen1 {
0% { background-position: 0 0;}
25% { background-position: 0 0;}
50% { background-position: 0% 100%;}
70% { background-position: 0% 100%;}
85% { background-position: 0 0;}
100% { background-position: 0 0;}
}

/*--------------------
s2
----------------------*/
.gamen .s2{ width: 100%; height: 100%; position: absolute; z-index: 3; left: 100%; top: 0%; background: url("../img/smp/line.jpg") 50% 45% #06c755 no-repeat #fff;  background-size: 80% auto; transition: 0.6s;}

.sec2 .gamen .s2{ left: 0;}



/*--------------------
s3
----------------------*/
.gamen .s3{ width: 100%; height: 100%; position: absolute; z-index: 4; left: 0%; top: 100%; transition: 0.6s;}
.sec3 .gamen .s3, 
.sec4 .gamen .s3{ top: 0%;}

.gamen .s3 #sliderBox-1{ width: 100%; height: 100%; display: block; position: relative; background: #fff;}
.gamen .s3 #sliderBox-1 &gt; div{ width: 100%; height: 100%; position: absolute; top: 0; transition: 0.4s;}

.gamen .s3 #sliderBox-1.sec3_1 .item1, 
.gamen .s3 #sliderBox-1.sec3_2 .item2, 
.gamen .s3 #sliderBox-1.sec3_3 .item3, 
.gamen .s3 #sliderBox-1.sec3_4 .item4, 
.gamen .s3 #sliderBox-1.sec3_5 .item5 { left: 0;}
.gamen .s3 #sliderBox-1.sec3_1 .item2, 
.gamen .s3 #sliderBox-1.sec3_1 .item3, 
.gamen .s3 #sliderBox-1.sec3_1 .item4, 
.gamen .s3 #sliderBox-1.sec3_1 .item5, 
.gamen .s3 #sliderBox-1.sec3_2 .item3, 
.gamen .s3 #sliderBox-1.sec3_2 .item4, 
.gamen .s3 #sliderBox-1.sec3_2 .item5, 
.gamen .s3 #sliderBox-1.sec3_3 .item4, 
.gamen .s3 #sliderBox-1.sec3_3 .item5, 
.gamen .s3 #sliderBox-1.sec3_4 .item5 { left: 100%;}
.gamen .s3 #sliderBox-1.sec3_2 .item1, 
.gamen .s3 #sliderBox-1.sec3_3 .item1, 
.gamen .s3 #sliderBox-1.sec3_3 .item2, 
.gamen .s3 #sliderBox-1.sec3_4 .item1, 
.gamen .s3 #sliderBox-1.sec3_4 .item2, 
.gamen .s3 #sliderBox-1.sec3_4 .item3, 
.gamen .s3 #sliderBox-1.sec3_5 .item1, 
.gamen .s3 #sliderBox-1.sec3_5 .item2, 
.gamen .s3 #sliderBox-1.sec3_5 .item3, 
.gamen .s3 #sliderBox-1.sec3_5 .item4{ left: -100%;}

.gamen .s3 #sliderBox-1 .item1{ background:url("../img/smp/s3_1.jpg") 50% 0 no-repeat; background-size: 100% auto;}
.gamen .s3 #sliderBox-1 .item2{ background:url("../img/smp/s3_2.jpg") 50% 0 no-repeat; background-size: 100% auto;}
.gamen .s3 #sliderBox-1 .item3{ background:url("../img/smp/s3_3.jpg") 50% 0 no-repeat; background-size: 100% auto;}
.gamen .s3 #sliderBox-1 .item4{ background:url("../img/smp/s3_4.jpg") 50% 0 no-repeat; background-size: 100% auto;}
.gamen .s3 #sliderBox-1 .item5{ background:url("../img/smp/s3_5.jpg") 50% 0 no-repeat; background-size: 100% auto;}


.gamen .s3 #sliderBox-1.sec3_4 .item4, 
.gamen .s3 #sliderBox-1.sec3_5 .item5{ animation: gamen_s3 10s linear infinite;}

@keyframes gamen_s3 {
0% { background-position: 0 0;}
10% { background-position: 0 0;}
30% { background-position: 0% 100%;}
50% { background-position: 0% 100%;}
60% { background-position: 0 0;}
100% { background-position: 0 0;}
}

/*--------
スライダー①
-------------*/
.gamen .s3 #sliderBox-1 .item1 .svg{ opacity: 0; z-index: 10; transition:0.8s 0.8s; width:140px; height: 130px; position: absolute; top: 240px; left: 25px;}
@media screen and (max-width: 1000px) {
.gamen .s3 #sliderBox-1 .item1 .svg{ top: 41%; left: 9%;}
}
@media screen and (max-width: 900px) {
.gamen .s3 #sliderBox-1 .item1 .svg{ top: 40%; left: 5%;}
}
.sec2 .gamen .s3 #sliderBox-1 .item1 .svg{ opacity: 0;}
.sec3 .gamen .s3 #sliderBox-1 .item1 .svg, 
.sec3 .gamen .s3 #sliderBox-1.sec3_1 .item1 .svg{ opacity: 1;}
.gamen .s3 #sliderBox-1 .item1 .svg svg{ width: 100%; height: 100%;}

.sec3 .gamen .s3 #sliderBox-1.sec3_1 .item1 .svg .s3_a1 {
  -webkit-animation: s3_a1 1s ease-in-out 1.6s both;
          animation: s3_a1 1s ease-in-out 1.6s both;
}
@-webkit-keyframes s3_a1 {
0% {stroke-dashoffset: 53px; stroke-dasharray: 53px;}
100% {stroke-dashoffset: 0;stroke-dasharray: 53px;}
}
@keyframes s3_a1 {
0% {stroke-dashoffset: 53px; stroke-dasharray: 53px;}
100% {stroke-dashoffset: 0;stroke-dasharray: 53px;}
}
/**/
.sec3 .gamen .s3 #sliderBox-1.sec3_1 .item1 .svg .s3_a2 {
  -webkit-animation: s3_a2 1s ease-in-out 2.6s both;
          animation: s3_a2 1s ease-in-out 2.6s both;
}
@-webkit-keyframes s3_a2 {
0% {stroke-dashoffset: 120px; stroke-dasharray: 120px; }
100% {stroke-dashoffset: 0; stroke-dasharray: 120px; }
}
@keyframes s3_a2 {
0% {stroke-dashoffset: 120px; stroke-dasharray: 120px; }
100% {stroke-dashoffset: 0; stroke-dasharray: 120px; }
}

/**/
.sec3 .gamen .s3 #sliderBox-1.sec3_1 .item1 .svg .s3_a3 {
  -webkit-animation: s03_1-3 1s ease-in-out 0.6s both;
          animation: s03_1-3 1s ease-in-out 0.6s both;
}
@-webkit-keyframes s03_1-3 {
0% {stroke-dashoffset: 210px; stroke-dasharray: 210px; }
100% {stroke-dashoffset: 0; stroke-dasharray: 210px; }
}

@keyframes s03_1-3 {
0% {stroke-dashoffset: 210px; stroke-dasharray: 210px; }
100% {stroke-dashoffset: 0; stroke-dasharray: 210px; }
}



/*--------
スライダー②
-------------*/
.gamen .s3 #sliderBox-1 .item2 .svg{ opacity: 0; z-index: 10; transition:0.8s 0.8s; width:180px; height: 160px; position: absolute; bottom: 130px; left: 5px;}
.sec3 .gamen .s3 #sliderBox-1 .item2 .svg, 
.sec3 .gamen .s3 #sliderBox-1.sec3_1 .item2 .svg{ opacity: 0;}
.sec3 .gamen .s3 #sliderBox-1 .item2 .svg, 
.sec3 .gamen .s3 #sliderBox-1.sec3_1 .item2 .svg{ opacity: 1;}
.gamen .s3 #sliderBox-1 .item2 .svg svg{ width: 100%; height: 100%;}

@media screen and (max-width: 900px) {
.gamen .s3 #sliderBox-1 .item2 .svg{ width: 150px; bottom: 94px;}
}



.sec3 .gamen .s3 #sliderBox-1.sec3_2 .item2 .svg .s3_b1 {
-webkit-animation: s3_b1 1s ease-in-out 0s both,
 svg-fill1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
animation: s3_b1 1s ease-in-out 0s both,
 svg-fill1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes s3_b1 {
0% { stroke-dashoffset: 250px; stroke-dasharray: 250px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 250px;}
}
@keyframes s3_b1 {
0% { stroke-dashoffset: 250px; stroke-dasharray: 250px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 250px;}
}

.sec3 .gamen .s3 #sliderBox-1.sec3_2 .item2 .svg .s3_b2 {
-webkit-animation: s3_b2 1s ease-in-out 0.12s both,
 svg-fill2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
animation: s3_b2 1s ease-in-out 0.12s both,
 svg-fill2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}
@-webkit-keyframes s3_b2 {
0% { stroke-dashoffset: 250px; stroke-dasharray: 250px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 250px;}
}
@keyframes s3_b2 {
0% { stroke-dashoffset: 250px; stroke-dasharray: 250px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 250px;}
}
.sec3 .gamen .s3 #sliderBox-1.sec3_2 .item2 .svg .s3_b3 {
-webkit-animation: s3_b3 1s ease-in-out 0.24s both,
 svg-fill3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
animation: s3_b3 1s ease-in-out 0.24s both,
 svg-fill3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}
@-webkit-keyframes s3_b3 {
0% { stroke-dashoffset: 50px; stroke-dasharray: 50px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 50px;}
}
@keyframes s3_b3 {
0% { stroke-dashoffset: 50px; stroke-dasharray: 50px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 50px;}
}


.sec3 .gamen .s3 #sliderBox-1.sec3_2 .item2 .svg .s3_b4 {
-webkit-animation: s3_b4 1s ease-in-out 0.36s both,
 svg-fill4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
animation: s3_b4 1s ease-in-out 0.36s both,
 svg-fill4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}
@-webkit-keyframes s3_b4 {
0% { stroke-dashoffset: 50px; stroke-dasharray: 50px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 50px;}
}
@keyframes s3_b4 {
0% { stroke-dashoffset: 50px; stroke-dasharray: 50px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 50px;}
}

.sec3 .gamen .s3 #sliderBox-1.sec3_2 .item2 .svg .s3_b5 {
-webkit-animation: s3_b5 1s ease-in-out 0.48s both,
 svg-fill5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
animation: s3_b5 1s ease-in-out 0.48s both,
 svg-fill5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}
@-webkit-keyframes s3_b5 {
0% { stroke-dashoffset: 350px; stroke-dasharray: 350px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 350px;}
}
@keyframes s3_b5 {
0% { stroke-dashoffset: 350px; stroke-dasharray: 350px;}
100% { stroke-dashoffset: 0; stroke-dasharray: 350px;}
}

@-webkit-keyframes svg-fill5 {
0% {fill: transparent;}
100% {fill: rgb(232, 73, 47);}
}
@keyframes svg-fill5 {
0% {fill: transparent;}
100% {fill: rgb(232, 73, 47);}
}


/*--------
スライダー③
-------------*/
.gamen .s3 #sliderBox-1 .item3 .item3-1{ position: absolute; z-index: 20; top: 40%; left: 7%; width: 77%; height: 0%; border: solid 0px #e8492f; transition:0.4s 0.6s;}
.gamen .s3 #sliderBox-1.sec3_3 .item3 .item3-1{ top: 35%; height: 14%; border: solid 6px #e8492f; }
.gamen .s3 #sliderBox-1 .item3 .item3-2{ position: absolute; z-index: 20; top: 60%; left: 7%; width: 77%; height: 0%; border: solid 0px #e8492f; transition:0.4s 1.2s;}
.gamen .s3 #sliderBox-1.sec3_3 .item3 .item3-2{ top: 55.5%; height: 8%; border: solid 6px #e8492f; }

/*--------
スライダー4
-------------*/
.gamen .s3 #sliderBox-1 .item4 .item4-1{ position: absolute; z-index: 20; bottom:0%; left: 0%; width: 100%; height: 100%; background: url("../img/smp/s3_4_1.png") 100% 100% no-repeat; background-size: 100% auto; box-shadow: 0px -15px 15px 15px rgba(255,255,255,0.5);}
.gamen .s3 #sliderBox-1 .item4 .item4-1::after{ width: 60px; height: 60px; position: absolute; left: 50%; bottom: 120px; content: "";  background: url("../img/smp/s3_4_2.png") 100% 100% no-repeat; z-index: 22; margin-left: -30px; margin-top: -30px; opacity: 0; transition: 0.4s 3.0s;}

.gamen .s3 #sliderBox-1.sec3_4 .item4 .item4-1::after{ animation: gamen_s4-1 10s linear infinite; margin-top: 0; opacity: 1;}

@keyframes gamen_s4-1 {
0% { bottom: 120px;}
10% { bottom: 120px;}
11% { bottom: 140px;}
12% { bottom: 120px;}
13% { bottom: 140px;}
14% { bottom: 120px;}
61% { bottom: 120px;}
62% { bottom: 140px;}
63% { bottom: 120px;}
64% { bottom: 140px;}
65% { bottom: 120px;}
100% { bottom: 120px;}
}



/*--------------------
s4
----------------------*/
.gamen .s4{ width: 100%; height: 100%; position: absolute; z-index: 8; left: 0%; top: 100%; transition: 0.6s; background: #fff;}
.sec4 .gamen .s4, 
.sec5 .gamen .s4{ top: 0%;}

.gamen .s4 #sliderBox-2{ width: 100%; height: 100%; display: block; position: relative; background: #fff;}
.gamen .s4 #sliderBox-2 &gt; div{ width: 100%; height: 100%; position: absolute; top: 0; transition: 0.4s;}

.gamen .s4 #sliderBox-2.sec4_1 .item1, 
.gamen .s4 #sliderBox-2.sec4_2 .item2, 
.gamen .s4 #sliderBox-2.sec4_3 .item3, 
.gamen .s4 #sliderBox-2.sec4_4 .item4, 
.gamen .s4 #sliderBox-2.sec4_5 .item5, 
.gamen .s4 #sliderBox-2.sec4_6 .item6{ left: 0;}

.gamen .s4 #sliderBox-2.sec4_1 .item2, 
.gamen .s4 #sliderBox-2.sec4_1 .item3, 
.gamen .s4 #sliderBox-2.sec4_1 .item4, 
.gamen .s4 #sliderBox-2.sec4_1 .item5, 
.gamen .s4 #sliderBox-2.sec4_1 .item6, 
.gamen .s4 #sliderBox-2.sec4_2 .item3, 
.gamen .s4 #sliderBox-2.sec4_2 .item4, 
.gamen .s4 #sliderBox-2.sec4_2 .item5, 
.gamen .s4 #sliderBox-2.sec4_2 .item6, 
.gamen .s4 #sliderBox-2.sec4_3 .item4, 
.gamen .s4 #sliderBox-2.sec4_3 .item5, 
.gamen .s4 #sliderBox-2.sec4_3 .item6, 
.gamen .s4 #sliderBox-2.sec4_4 .item5, 
.gamen .s4 #sliderBox-2.sec4_4 .item6, 
.gamen .s4 #sliderBox-2.sec4_5 .item6 { left: 100%;}

.gamen .s4 #sliderBox-2.sec4_2 .item1, 
.gamen .s4 #sliderBox-2.sec4_3 .item1, 
.gamen .s4 #sliderBox-2.sec4_3 .item2, 
.gamen .s4 #sliderBox-2.sec4_4 .item1, 
.gamen .s4 #sliderBox-2.sec4_4 .item2, 
.gamen .s4 #sliderBox-2.sec4_4 .item3, 
.gamen .s4 #sliderBox-2.sec4_5 .item1, 
.gamen .s4 #sliderBox-2.sec4_5 .item2, 
.gamen .s4 #sliderBox-2.sec4_5 .item3, 
.gamen .s4 #sliderBox-2.sec4_5 .item4, 
.gamen .s4 #sliderBox-2.sec4_6 .item1, 
.gamen .s4 #sliderBox-2.sec4_6 .item2, 
.gamen .s4 #sliderBox-2.sec4_6 .item3, 
.gamen .s4 #sliderBox-2.sec4_6 .item4, 
.gamen .s4 #sliderBox-2.sec4_6 .item5 { left: -100%;}

.gamen .s4 #sliderBox-2 .item1{ background:url("../img/smp/s4_1.jpg") 50% 100% no-repeat; background-size: 100% auto;}
.gamen .s4 #sliderBox-2 .item2{ background:url("../img/smp/s4_2.jpg") 50% 100% no-repeat; background-size: 100% auto;}
.gamen .s4 #sliderBox-2 .item3{ background:url("../img/smp/s4_3.jpg") 50% 100% no-repeat; background-size: 100% auto;}
.gamen .s4 #sliderBox-2 .item4{ background:url("../img/smp/s4_4.jpg") 50% 100% no-repeat; background-size: 100% auto;}
.gamen .s4 #sliderBox-2 .item5{ background:url("../img/smp/s4_5.jpg") 50% 100% no-repeat; background-size: 100% auto;}
.gamen .s4 #sliderBox-2 .item6{ background:url("../img/smp/s4_6.jpg") 50% 100% no-repeat; background-size: 100% auto;}


/*--------------------
s5
----------------------*/
.gamen .s5{ width: 0%; height: 0%; position: absolute; z-index: 10; left: 50%; top: 50%; background: url("../img/smp/s5_0.jpg") 50% 50% no-repeat #fff; background-size: auto 100%; transition: 0.6s; opacity: 0; border-radius: 10px;}
.sec5 .gamen .s5, 
.sec6 .gamen .s5, 
.sec7 .gamen .s5 { left: 0; top: 0; width: 100%; height: 100%; opacity: 1;}


.gamen .s5 span{ width: 100%; height: 300px; position: absolute; left: -100%; top: 50%; margin-top: -170px; background: url("../img/smp/s5_1.jpg") -90% 0 no-repeat; transition: 0.8s;}
.sec5 .gamen .s5 span, 
.sec6 .gamen .s5 span, 
.sec7 .gamen .s5 span{ animation: gamen_s5 20s linear infinite; left: 0;}
.sec7 .gamen .s5 span{ left: 100% !important;}

@keyframes gamen_s5 {
0% { background-position: -100% 0%;}
4% { background-position: 0% 0%;}

17% { background-position: 0% 0%;}
18% { background-position: 9.5% 0%;}

25% { background-position: 9.5% 0%;}
26% { background-position: 19% 0%;}

33% { background-position: 19% 0%;}
34% { background-position: 28.5% 0%;}

41% { background-position: 28.5% 0%;}
42% { background-position: 38% 0%;}

49% { background-position: 38% 0%;}
50% { background-position: 47.5% 0%;}

57% { background-position: 47.5% 0%;}
58% { background-position: 57% 0%;}

65% { background-position: 57% 0%;}
66% { background-position: 66.5% 0%;}

73% { background-position: 66.5% 0%;}
74% { background-position: 76% 0%;}

81% { background-position: 76% 0%;}
82% { background-position: 85.5% 0%;}

96% { background-position: 85.5% 0%;}
100% { background-position: 100% 0%;}

}


/*--------------------
s7
----------------------*/
.gamen .s7{ width: 100%; height: 100%; position: absolute; z-index: 10; left:0%; top: 0%; display: none;}
.sec6 .gamen .s7, 
.sec7 .gamen .s7{ display: block;}
.gamen .s7 .logo{ width: 200px; height: 100px; position: absolute; left: 50%; top: 50%; display: block; margin: -50px 0 0 -100px; background: url("../img/logo_eng_wh.png") 50% 50% no-repeat; z-index: 1000001; opacity: 0; transition: 0.1s;}
.sec7 .gamen .s7 .logo{ opacity: 1; transition: 0.8s 1.2s;}
.sec7 .gamen .s7{ z-index: 10;}
.gamen .s7::before, 
.gamen .s7::after { width: 100%; height: 0; content: ""; position: absolute; left: 0; transition: 0.4s 0.4s; background: #333; z-index: 100000;}
.gamen .s7::before{ bottom: 0;}
.gamen .s7::after{ top: 0;}
.sec7 .gamen .s7::before, 
.sec7 .gamen .s7::after{ height: 50%;}


.gamen .s7 .itemBox{ width: 400px; height: 300px; position: fixed; left: 20%; top: 50%; margin: -150px 0 0; background: #fff; opacity: 0; transition: 0.8s; padding: 20px 30px; border-radius: 16px; box-shadow: 1px 8px 16px rgba(0,0,0,0.2);}
.sec7 .gamen .s7 .itemBox{ left: 50%; opacity: 1; display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center;}

.gamen .s7 .itemBox dl {}
.gamen .s7 .itemBox dl, 
.gamen .s7 .itemBox dl &gt; *{ display:block; color: #06c755; font-weight: bold; text-align: center;}
.gamen .s7 .itemBox dl dt{ font-size: 28px; margin-bottom: 10px;}
.gamen .s7 .itemBox dl dd span{ display: block; font-size: 12px; color: #06c755; font-weight: bold;}
.gamen .s7 .itemBox dl dd{ line-height: 1.2em; font-size: 18px;}
.gamen .s7 .itemBox dl dd img{ margin: 10px;}















</pre></body></html>