@charset "utf-8";
html {
font-size: 62.5%;
}
.firstview {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(255, 255, 255);
animation: fadeOut 5s;
animation-fill-mode: both;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
@keyframes fadeOut {
80% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
/*最後に消える*/
}
}
svg.kv {
width: fit-content;
height: auto;
transform: scale(60%);
}
/* ---------- svg ---------- */
/***************************************************
* Generated by SVG Artista on 1/7/2026, 2:29:32 PM
* MIT license (https://opensource.org/licenses/MIT)
* W. https://svgartista.net
**************************************************/
@-webkit-keyframes animate-svg-stroke-1 {
0% {
stroke-dashoffset: 118.44851684570312px;
stroke-dasharray: 118.44851684570312px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 118.44851684570312px;
}
}
@keyframes animate-svg-stroke-1 {
0% {
stroke-dashoffset: 118.44851684570312px;
stroke-dasharray: 118.44851684570312px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 118.44851684570312px;
}
}
@-webkit-keyframes animate-svg-fill-1 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-1 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-1 {
-webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}
@-webkit-keyframes animate-svg-stroke-2 {
0% {
stroke-dashoffset: 215.89036560058594px;
stroke-dasharray: 215.89036560058594px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 215.89036560058594px;
}
}
@keyframes animate-svg-stroke-2 {
0% {
stroke-dashoffset: 215.89036560058594px;
stroke-dasharray: 215.89036560058594px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 215.89036560058594px;
}
}
@-webkit-keyframes animate-svg-fill-2 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-2 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-2 {
-webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}
@-webkit-keyframes animate-svg-stroke-3 {
0% {
stroke-dashoffset: 217.4057159423828px;
stroke-dasharray: 217.4057159423828px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 217.4057159423828px;
}
}
@keyframes animate-svg-stroke-3 {
0% {
stroke-dashoffset: 217.4057159423828px;
stroke-dasharray: 217.4057159423828px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 217.4057159423828px;
}
}
@-webkit-keyframes animate-svg-fill-3 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-3 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-3 {
-webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}
@-webkit-keyframes animate-svg-stroke-4 {
0% {
stroke-dashoffset: 213.0377960205078px;
stroke-dasharray: 213.0377960205078px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 213.0377960205078px;
}
}
@keyframes animate-svg-stroke-4 {
0% {
stroke-dashoffset: 213.0377960205078px;
stroke-dasharray: 213.0377960205078px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 213.0377960205078px;
}
}
@-webkit-keyframes animate-svg-fill-4 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-4 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-4 {
-webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}
@-webkit-keyframes animate-svg-stroke-5 {
0% {
stroke-dashoffset: 120.3693618774414px;
stroke-dasharray: 120.3693618774414px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 120.3693618774414px;
}
}
@keyframes animate-svg-stroke-5 {
0% {
stroke-dashoffset: 120.3693618774414px;
stroke-dasharray: 120.3693618774414px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 120.3693618774414px;
}
}
@-webkit-keyframes animate-svg-fill-5 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-5 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-5 {
-webkit-animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}
@-webkit-keyframes animate-svg-stroke-6 {
0% {
stroke-dashoffset: 175.6654052734375px;
stroke-dasharray: 175.6654052734375px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 175.6654052734375px;
}
}
@keyframes animate-svg-stroke-6 {
0% {
stroke-dashoffset: 175.6654052734375px;
stroke-dasharray: 175.6654052734375px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 175.6654052734375px;
}
}
@-webkit-keyframes animate-svg-fill-6 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-6 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-6 {
-webkit-animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}
@-webkit-keyframes animate-svg-stroke-7 {
0% {
stroke-dashoffset: 198.87619018554688px;
stroke-dasharray: 198.87619018554688px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 198.87619018554688px;
}
}
@keyframes animate-svg-stroke-7 {
0% {
stroke-dashoffset: 198.87619018554688px;
stroke-dasharray: 198.87619018554688px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 198.87619018554688px;
}
}
@-webkit-keyframes animate-svg-fill-7 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-7 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-7 {
-webkit-animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}
@-webkit-keyframes animate-svg-stroke-8 {
0% {
stroke-dashoffset: 19.30916976928711px;
stroke-dasharray: 19.30916976928711px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 19.30916976928711px;
}
}
@keyframes animate-svg-stroke-8 {
0% {
stroke-dashoffset: 19.30916976928711px;
stroke-dasharray: 19.30916976928711px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 19.30916976928711px;
}
}
@-webkit-keyframes animate-svg-fill-8 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-8 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-8 {
-webkit-animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}
@-webkit-keyframes animate-svg-stroke-9 {
0% {
stroke-dashoffset: 215.47238159179688px;
stroke-dasharray: 215.47238159179688px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 215.47238159179688px;
}
}
@keyframes animate-svg-stroke-9 {
0% {
stroke-dashoffset: 215.47238159179688px;
stroke-dasharray: 215.47238159179688px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 215.47238159179688px;
}
}
@-webkit-keyframes animate-svg-fill-9 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-9 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-9 {
-webkit-animation: animate-svg-stroke-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
animation: animate-svg-stroke-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}
@-webkit-keyframes animate-svg-stroke-10 {
0% {
stroke-dashoffset: 221.58334350585938px;
stroke-dasharray: 221.58334350585938px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 221.58334350585938px;
}
}
@keyframes animate-svg-stroke-10 {
0% {
stroke-dashoffset: 221.58334350585938px;
stroke-dasharray: 221.58334350585938px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 221.58334350585938px;
}
}
@-webkit-keyframes animate-svg-fill-10 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-10 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-10 {
-webkit-animation: animate-svg-stroke-10 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both,
animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
animation: animate-svg-stroke-10 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both,
animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
}
@-webkit-keyframes animate-svg-stroke-11 {
0% {
stroke-dashoffset: 175.66571044921875px;
stroke-dasharray: 175.66571044921875px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 175.66571044921875px;
}
}
@keyframes animate-svg-stroke-11 {
0% {
stroke-dashoffset: 175.66571044921875px;
stroke-dasharray: 175.66571044921875px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 175.66571044921875px;
}
}
@-webkit-keyframes animate-svg-fill-11 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-11 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-11 {
-webkit-animation: animate-svg-stroke-11 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both,
animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
animation: animate-svg-stroke-11 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both,
animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}
@-webkit-keyframes animate-svg-stroke-12 {
0% {
stroke-dashoffset: 198.87673950195312px;
stroke-dasharray: 198.87673950195312px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 198.87673950195312px;
}
}
@keyframes animate-svg-stroke-12 {
0% {
stroke-dashoffset: 198.87673950195312px;
stroke-dasharray: 198.87673950195312px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 198.87673950195312px;
}
}
@-webkit-keyframes animate-svg-fill-12 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-12 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-12 {
-webkit-animation: animate-svg-stroke-12 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both,
animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s both;
animation: animate-svg-stroke-12 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both,
animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s both;
}
@-webkit-keyframes animate-svg-stroke-13 {
0% {
stroke-dashoffset: 260.064697265625px;
stroke-dasharray: 260.064697265625px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 260.064697265625px;
}
}
@keyframes animate-svg-stroke-13 {
0% {
stroke-dashoffset: 260.064697265625px;
stroke-dasharray: 260.064697265625px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 260.064697265625px;
}
}
@-webkit-keyframes animate-svg-fill-13 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-13 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-13 {
-webkit-animation: animate-svg-stroke-13 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both,
animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
animation: animate-svg-stroke-13 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both,
animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}
@-webkit-keyframes animate-svg-stroke-14 {
0% {
stroke-dashoffset: 201.60105895996094px;
stroke-dasharray: 201.60105895996094px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 201.60105895996094px;
}
}
@keyframes animate-svg-stroke-14 {
0% {
stroke-dashoffset: 201.60105895996094px;
stroke-dasharray: 201.60105895996094px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 201.60105895996094px;
}
}
@-webkit-keyframes animate-svg-fill-14 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-14 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-14 {
-webkit-animation: animate-svg-stroke-14 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s both,
animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
animation: animate-svg-stroke-14 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s both,
animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
}
@-webkit-keyframes animate-svg-stroke-15 {
0% {
stroke-dashoffset: 183.9639129638672px;
stroke-dasharray: 183.9639129638672px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 183.9639129638672px;
}
}
@keyframes animate-svg-stroke-15 {
0% {
stroke-dashoffset: 183.9639129638672px;
stroke-dasharray: 183.9639129638672px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 183.9639129638672px;
}
}
@-webkit-keyframes animate-svg-fill-15 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-15 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-15 {
-webkit-animation: animate-svg-stroke-15 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s both,
animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
animation: animate-svg-stroke-15 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s both,
animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
}
@-webkit-keyframes animate-svg-stroke-16 {
0% {
stroke-dashoffset: 246.84039306640625px;
stroke-dasharray: 246.84039306640625px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 246.84039306640625px;
}
}
@keyframes animate-svg-stroke-16 {
0% {
stroke-dashoffset: 246.84039306640625px;
stroke-dasharray: 246.84039306640625px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 246.84039306640625px;
}
}
@-webkit-keyframes animate-svg-fill-16 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-16 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-16 {
-webkit-animation: animate-svg-stroke-16 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s both,
animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
animation: animate-svg-stroke-16 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s both,
animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
}
@-webkit-keyframes animate-svg-stroke-17 {
0% {
stroke-dashoffset: 285.4236145019531px;
stroke-dasharray: 285.4236145019531px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 285.4236145019531px;
}
}
@keyframes animate-svg-stroke-17 {
0% {
stroke-dashoffset: 285.4236145019531px;
stroke-dasharray: 285.4236145019531px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 285.4236145019531px;
}
}
@-webkit-keyframes animate-svg-fill-17 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-17 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-17 {
-webkit-animation: animate-svg-stroke-17 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s both,
animate-svg-fill-17 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s both;
animation: animate-svg-stroke-17 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s both,
animate-svg-fill-17 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s both;
}
@-webkit-keyframes animate-svg-stroke-18 {
0% {
stroke-dashoffset: 391.8433532714844px;
stroke-dasharray: 391.8433532714844px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 391.8433532714844px;
}
}
@keyframes animate-svg-stroke-18 {
0% {
stroke-dashoffset: 391.8433532714844px;
stroke-dasharray: 391.8433532714844px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 391.8433532714844px;
}
}
@-webkit-keyframes animate-svg-fill-18 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-18 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-18 {
-webkit-animation: animate-svg-stroke-18 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s both,
animate-svg-fill-18 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
animation: animate-svg-stroke-18 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s both,
animate-svg-fill-18 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
}
@-webkit-keyframes animate-svg-stroke-19 {
0% {
stroke-dashoffset: 364.2828674316406px;
stroke-dasharray: 364.2828674316406px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 364.2828674316406px;
}
}
@keyframes animate-svg-stroke-19 {
0% {
stroke-dashoffset: 364.2828674316406px;
stroke-dasharray: 364.2828674316406px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 364.2828674316406px;
}
}
@-webkit-keyframes animate-svg-fill-19 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-19 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-19 {
-webkit-animation: animate-svg-stroke-19 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s both,
animate-svg-fill-19 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s both;
animation: animate-svg-stroke-19 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s both,
animate-svg-fill-19 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s both;
}
@-webkit-keyframes animate-svg-stroke-20 {
0% {
stroke-dashoffset: 128.2735366821289px;
stroke-dasharray: 128.2735366821289px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 128.2735366821289px;
}
}
@keyframes animate-svg-stroke-20 {
0% {
stroke-dashoffset: 128.2735366821289px;
stroke-dasharray: 128.2735366821289px;
}
100% {
stroke-dashoffset: 0;
stroke-dasharray: 128.2735366821289px;
}
}
@-webkit-keyframes animate-svg-fill-20 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
@keyframes animate-svg-fill-20 {
0% {
fill: transparent;
}
100% {
fill: rgb(0, 0, 0);
}
}
.svg-elem-20 {
-webkit-animation: animate-svg-stroke-20 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s both,
animate-svg-fill-20 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s both;
animation: animate-svg-stroke-20 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s both,
animate-svg-fill-20 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s both;
}
/* ---------- wrapper ---------- */
.wrapper {
display: flex;
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
background-image: url(../image/top.jpg);
background-position: top center;
background-color:rgba(255,255,255,0.4);
background-blend-mode:lighten;
align-items: center;
padding: 0 10%;
box-sizing: border-box;
}
.inner {
width: 50%;
height: auto;
padding: 2%;
display: flex;
flex-wrap: wrap;
}
.inner h2 {
width: 100%;
font-size: 3rem;
margin-bottom: 20px;
}
.inner p {
width: 100%;
font-size: 2rem;
margin-bottom: 40px;
}
.inner a {
padding: 10px;
text-decoration: none;
color: #fff;
font-size: 1.6rem;
display: block;
width: 150px;
text-align: center;
margin-right: 20px;
border-radius: 10px;
}
.inner .hstop {
background-color: #810D31;
}
.inner .jhtop {
background-color: #1E4184;
}
/* ------------------- tablet -------------------- */
@media screen and (max-width: 1000px) {
svg.kv {
transform: scale(80%);
}
.wrapper {
background-image: url(../image/top.jpg);
background-position: bottom center;
align-items: end;
padding: 0 5%;
box-sizing: border-box;
}
.inner {
width: 100%;
height: auto;
padding: 4%;
display: flex;
flex-wrap: wrap;
background-color: #ffffffe0;
margin-bottom: 10%;
}
.inner h2 {
width: 100%;
font-size: 2.4rem;
margin-bottom: 20px;
}
.inner p {
width: 100%;
font-size: 1.4rem;
margin-bottom: 40px;
}
.inner a {
padding: 10px;
text-decoration: none;
color: #fff;
font-size: 1.6rem;
display: block;
width: 150px;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}
.inner .hstop {
background-color: #810D31;
}
.inner .jhtop {
background-color: #1E4184;
}
}