@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: YakuHanJP, "Montserrat", "Noto Sans JP", sans-serif;
font-size:20px;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color: #fff;
background: #000;
min-width:1080px;
}
body{ background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(10,20,30,1) 100%);}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
.gothic{ font-family: "Kaisei Decol",'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
p{ line-height:1.75em; margin:0 0 1em; padding:0; font-family: "Kaisei Decol",'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.bk{ color:#0a141e;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
body{ padding-top: 70px;}
header{ position: fixed; left: 0; right: 0; top: 0; z-index: 999; background: rgba(0,0,0,0.9); color: #fff; width: 100%; min-width: 1180px; padding: 20px 20px; margin: auto; display: flex; align-items: center; justify-content: space-between; box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
header h1 img{ height: 30px;}
header nav{ margin: 0 0 0 auto; display: flex; justify-content: flex-end; align-items: center;}
header nav ul{ display: flex; align-items: center; justify-content: flex-end;}
header nav ul li{ margin: 0; font-size: 0.7rem; line-height: 1em; font-weight: bold;}
header nav ul li a{ display: block; border-left: 1px solid #fff; padding: 0 1em; line-height: 1em; transition: 0.3s;}
header nav ul li:last-child a{ border-right: 1px solid #fff;}
header nav ul li a:hover{ background: #fff; color: #0a141e;}
header nav ul.sns{ margin-left: 10px;}
header nav ul.sns li{ margin-left: 10px; border: none; font-size: 1.2rem;}
header nav ul.sns li a{ border: none; padding: 0; transition: 0.3s;}
header nav ul.sns li a:hover{ background: none; color: #fff; opacity: 0.7;}
@media print, screen and (min-width:768px){
header nav{ display: flex !important; opacity: 1.0 !important; height: auto !important;}
#smp_nav_btn{ display: none !important;}
}
@media screen and (max-width:767px){
body{ padding-top: 10vw;}
header{ min-width: 100%; padding: 3.75vw;}
header h1{ width: auto; margin: 0;}
header h1 img{ height: 5vw;}

header nav{ display: none; position: fixed; left: 0; right: 0; top: 12.5vw; padding-bottom: 12.5vw; /*display: flex;*/ align-items: center; justify-content: center; width: 100%; background: rgba(0,0,0,0.9); overflow-x: hidden; overflow-y: auto;}
header nav{ min-height: 100dvh !important; flex-direction: column;}
header nav ul{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92.5%; margin: 0 auto;}
header nav ul li{ margin: 0.66em auto; font-size: 1.33rem; letter-spacing: 0.2em; width: 100%; text-align: center;}
header nav ul li a{ border: none;}
header nav ul li:last-child a{ border: none;}
header nav ul li a:hover{ background: none; color: inherit;}
header nav ul.sns{ flex-direction: row; align-items: center; justify-content: center; font-size: 1.5rem; margin: 1em auto 0;}
header nav ul.sns li{ width: auto; font-size: 2rem; margin: 0 0.5em;}

#smp_nav_btn{ display: flex; align-items: flex-end; justify-content: center; padding: 0; width: 10vw; height: 10vw; position: fixed; right:1.875vw; top: 1.25vw; z-index:9999; transition:0.3s; cursor:pointer;}
#smp_nav_btn span{ display:block; height:2px; width:7.5vw; background:#fff; position:absolute; left:0; right:0; top: 50%; transform: translateY(-50%); margin:auto; transition:0.3s;}
#smp_nav_btn span:before{ content: ""; display:block; height:2px; width:7.5vw; background:#fff; position:absolute; bottom:1.875vw; transition:0.3s;}
#smp_nav_btn span:after{ content: ""; display:block; height:2px; width:7.5vw; background:#fff; position:absolute; top:1.875vw; transition:0.3s;}
#smp_nav_btn.active span{ background:rgba(255,255,255,0);}
#smp_nav_btn.active span:before{ bottom:0; transform: rotate(45deg);}
#smp_nav_btn.active span:after{ top:0; transform: rotate(-45deg);}
}

/*フッター*/
footer{ position: relative; z-index: 99; background: #0a141e; color: #fff; padding: 40px;}
footer nav{ margin: 0 auto; display: flex; justify-content: center; align-items: center;}
footer nav ul{ display: flex; align-items: center; justify-content: flex-end;}
footer nav ul li{ margin: 0; font-size: 0.8rem; line-height: 1em; font-weight: bold;}
footer nav ul li a{ display: block; border-left: 1px solid #fff; padding: 0 1em; line-height: 1em; transition: 0.3s;}
footer nav ul li:last-child a{ border-right: 1px solid #fff;}
footer nav ul li a:hover{ background: #fff; color: #0a141e;}
footer nav ul.sns{ margin-left: 10px;}
footer nav ul.sns li{ margin-left: 10px; border: none; font-size: 1.2rem;}
footer nav ul.sns li a{ border: none; padding: 0; transition: 0.3s;}
footer nav ul.sns li a:hover{ background: none; color: #fff; opacity: 0.7;}
footer p.copyright{ text-align: center; font-size: 0.8rem; letter-spacing: 0.1em; line-height: 1em; margin-top: 40px;}
@media screen and (max-width:767px){
footer{ padding: 5%;}
footer nav{ flex-direction: column;}
footer nav ul{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: 100%; margin: 0 auto;}
footer nav ul li{ width: 33.33%; margin: 0.25em 0; font-size: 0.8rem; letter-spacing: 0.1em; text-align: center;}
footer nav ul li:nth-child(3n) a{ border-right: 1px solid #fff;}
footer nav ul li a:hover{ background: none; color: inherit;}
footer nav ul.sns{ flex-direction: row; align-items: center; justify-content: center; margin: 5% auto 0;}
footer nav ul.sns li{ width: auto; font-size: 1.75rem; margin: 0 0.25em;}
footer nav ul.sns li a{ border: none;}
footer p.copyright{ font-size: 0.8rem; margin-top: 5%;}
}

/*メイン*/
#wrap{ overflow: hidden; position: relative; z-index: 3}
#wrap #cont_bg_top{ opacity: 0.66; width: calc(3838px*2); height: 720px; position: absolute; left: 0; top: 0; z-index: 1;}
#wrap #cont_bg_top ul{ display: flex; position: relative;}
#wrap #cont_bg_top ul{ animation: cont_bg_top 30s infinite linear;}
@media screen and (max-width:767px){
#wrap #cont_bg_top{ width: calc(383.8vw*2); height: 72vw;}
#wrap #cont_bg_top ul{ animation: cont_bg_top_smp 30s infinite linear;}
}
@keyframes cont_bg_top{
0%{ left: 0;}
100%{ left: -3838px;}
}
@keyframes cont_bg_top_smp{
0%{ left: 0;}
100%{ left: -383.8vw;}
}

#wrap #cont_bg_bottom{ opacity: 0.33; width: calc(3838px*2); height: 720px; position: absolute; right: 0; bottom: 0; z-index: 1;}
#wrap #cont_bg_bottom ul{ display: flex; position: relative;}
#wrap #cont_bg_bottom ul{ animation: cont_bg_bottom 30s infinite linear;}
@media screen and (max-width:767px){
#wrap #cont_bg_bottom{ width: calc(383.8vw*2); height: 72vw;}
#wrap #cont_bg_bottom ul{ animation: cont_bg_bottom_smp 30s infinite linear;}
}
@keyframes cont_bg_bottom{
0%{ right: 0;}
100%{ right: -3838px;}
}
@keyframes cont_bg_bottom_smp{
0%{ right: 0;}
100%{ right: -383.8vw;}
}

#wrap #noise{ width: 100%; height: 100%; background: url("../images/noise.webp"); opacity: 0.2; position: fixed; left: 0; top: 0; z-index: 3;}
#wrap #noise{ animation: noise 0.5s infinite linear;}
@keyframes noise {
0% { transform: scale(1.01) translate(0,0);}
50% { transform: scale(1.01) translate(2px,0px);}
100% { transform: scale(1.01) translate(0,0);}
}

#wrap #bubble01{ width: 240px; position: absolute; left: 40px; bottom: 40px;}
#wrap #bubble02{ width: 240px; position: absolute; right: 40px; bottom: 40px; transform: rotate(180deg);}
#wrap #bubble01 img{ width: 100%; height: auto; position: relative; opacity: 0; animation: bubble 7.5s infinite linear;}
#wrap #bubble02 img{ width: 100%; height: auto; position: relative; opacity: 0; animation: bubble2 7.5s infinite linear; animation-delay: 2.5s;}
@media screen and (max-width:767px){
#wrap #bubble01{ width: 24vw; left: 4vw; bottom: 4vw;}
#wrap #bubble02{ width: 24vw; right: 4vw; bottom: 4vw;}
#wrap #bubble01 img{ animation: bubble_smp 7.5s infinite linear;}
#wrap #bubble02 img{ animation: bubble2_smp 7.5s infinite linear; animation-delay: 2.5s;}
}
@keyframes bubble{
0%{ opacity: 0; left: 0; bottom: 0; transform: scale(0.8);}
25%{ opacity: 1.0; left: 40px; bottom: 240px; transform: scale(1.0);}
50%{ opacity: 0; left: 20px; bottom: 360px; transform: scale(0.9);}
}
@keyframes bubble2{
0%{ opacity: 0; right: 0; bottom: 0; transform: scale(0.8);}
25%{ opacity: 1.0; right: -40px; bottom: -240px; transform: scale(1.0);}
50%{ opacity: 0; right: -20px; bottom: -360px; transform: scale(0.9);}
}
@keyframes bubble_smp{
0%{ opacity: 0; left: 0; bottom: 0; transform: scale(0.8);}
25%{ opacity: 1.0; left: -4vw; bottom: 24vw; transform: scale(1.0);}
50%{ opacity: 0; left: -2vw; bottom: 36vw; transform: scale(0.9);}
}
@keyframes bubble2_smp{
0%{ opacity: 0; right: 0; bottom: 0; transform: scale(0.8);}
25%{ opacity: 1.0; right: -4vw; bottom: -24vw; transform: scale(1.0);}
50%{ opacity: 0; right: -2vw; bottom: -36vw; transform: scale(0.9);}
}



#content{ overflow:hidden; position: relative; z-index: 5;}
section{ width:100%; margin:0 auto; padding: 80px 0; position: relative; z-index: 5;}
.maincontent{ padding:0; margin:0 auto; width:1000px;}
@media screen and (max-width:767px){
section{ padding: 10% 0;}
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}
@media screen and (max-width:767px){
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.05em;}
}


.tit_h2{ margin-bottom: 40px; text-align: center; position: relative;}
.tit_h2 h2{ font-size: 5rem; line-height: 1em;}
.tit_h2:before{ content: ""; width: 1040px; height: 10px; background: #fff; position: absolute; left: -960px; top: 50%; transform: translateY(-50%); z-index: 1; border-radius: 10px;}
.tit_h2:after{ content: ""; width: 1040px; height: 10px; background: #fff; position: absolute; right: -1140px; top: 50%; transform: translateY(-50%); z-index: 1; border-radius: 10px;}
.tit_h2 h2:before{ content: ""; width: 960px; height: 10px; background: #d19564; position: absolute; left: -960px; top: 50%; transform: translateY(-50%); z-index: 3;}
.tit_h2 h2:after{ content: ""; width: 20px; height: 20px; background: #d19564; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); z-index: 3; border-radius: 50%;}
.tit_h2 .icon{ display: flex; position: absolute; right: -80px; top: 50%; transform: translateY(-50%);}
.tit_h2 .icon i{ font-size: 1.5rem; margin-left: 0.5em;}
.tit_h2.even:before{ left: auto; right: -960px;}
.tit_h2.even:after{ right: auto; left: -1140px;}
.tit_h2.even h2:before{ left: auto; right: -960px;}
.tit_h2.even h2:after{ left: auto; right: -10px;}
.tit_h2.even .icon{ right: auto; left: -80px;}
.tit_h2.even .icon i{ margin-left: 0; margin-right: 0.5em;}
@media screen and (max-width:767px){
.tit_h2{ margin-bottom: 7.5%;}
.tit_h2 h2{ font-size: 2.5rem;}
.tit_h2:before{ width: 20vw; height: 1.875vw; left: -7.5vw; border-radius: 1.875vw;}
.tit_h2:after{ display: none;}
.tit_h2 h2:before{ width: 21.875vw; height: 1.875vw; left: -17.5vw;}
.tit_h2 h2:after{ width: 3.75vw; height: 3.75vw; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; border-radius: 50%;}
.tit_h2 .icon{ right: -2.5vw;}
.tit_h2 .icon i{ font-size: 1rem;}
.tit_h2.even:before{ left: auto; right: -7.5vw;}
.tit_h2.even h2:before{ left: auto; right: -17.5vw;}
.tit_h2.even h2:after{ left: auto; right: 0;}
.tit_h2.even .icon{ right: auto; left: -2.5vw;}
}

/*animetion*/
.tit_h2 h2 strong{ display: inline-block; position: relative; z-index: 1;}
.tit_h2 h2 strong span:not(:nth-child(1)){ position: absolute; left: 0; right: 0; top: 0; margin: auto; z-index: -1;}
.tit_h2 h2 strong span{ color: #fff; animation: glitch1 5s infinite;}
.tit_h2 h2 strong span:nth-child(2){ color: #67f3da; animation: glitch2 5s infinite;}
.tit_h2 h2 strong span:nth-child(3){ color: #f16f6f; animation: glitch3 5s infinite;}
@keyframes glitch1 {
0% { transform: none; opacity: 1;}
7% { transform: skew(-0.5deg, -0.9deg); opacity: 1.0;}
10% { transform: none; opacity: 1;}
27% { transform: none; opacity: 1;}
30% { transform: skew(0.8deg, -0.1deg); opacity: 1.0;}
35% { transform: none; opacity: 1;}
52% { transform: none; opacity: 1;}
55% { transform: skew(-1deg, 0.2deg); opacity: 1.0;}
60% { transform: none; opacity: 1;}
72% { transform: none; opacity: 1;}
75% { transform: skew(0.4deg, 1deg); opacity: 1.0;}
80% { transform: none; opacity: 1;}
100% { transform: none; opacity: 1;}
}
@keyframes glitch2 {
0% { transform: none; opacity: 0.25;}
7% { transform: translate(-2px, -3px); opacity: 0.5;}
10% { transform: none; opacity: 0.25;}
27% { transform: none; opacity: 0.25;}
30% { transform: translate(-5px, -2px); opacity: 0.5;}
35% { transform: none; opacity: 0.25;}
52% { transform: none; opacity: 0.25;}
55% { transform: translate(-5px, -1px); opacity: 0.5;}
60% { transform: none; opacity: 0.25;}
72% { transform: none; opacity: 0.25;}
75% { transform: translate(-2px, -6px); opacity: 0.5;}
80% { transform: none; opacity: 0.25;}
100% { transform: none; opacity: 0.25;}
}
@keyframes glitch3 {
0% { transform: none; opacity: 0.25;}
7% { transform: translate(2px, 3px); opacity: 0.5;}
10% { transform: none; opacity: 0.25;}
27% { transform: none; opacity: 0.25;}
30% { transform: translate(5px, 2px); opacity: 0.5;}
35% { transform: none; opacity: 0.25;}
52% { transform: none; opacity: 0.25;}
55% { transform: translate(5px, 1px); opacity: 0.5;}
50% { transform: none; opacity: 0.25;}
72% { transform: none; opacity: 0.25;}
75% { transform: translate(2px, 6px); opacity: 0.5;}
80% { transform: none; opacity: 0.25;}
100% { transform: none; opacity: 0.25;}
}

.tit_h2 .icon i{ animation: tit_ico 0.9s infinite;}
.tit_h2 .icon i:nth-child(2){ animation-delay: 0.3s;}
.tit_h2 .icon i:nth-child(3){ animation-delay: 0.6s;}
@keyframes tit_ico {
0%{ transform: scale(1.0);}
16.66%{ transform: scale(1.2);}
33.33%{ transform: scale(1.0);}
100%{ transform: scale(1.0);}
}

.tit_h2 h2:before{ left: -960px; animation: tit_bar01 3.0s infinite;}
.tit_h2 h2:after{ left: -10px; animation: tit_bar02 3.0s infinite;}
.tit_h2.even h2:before{ right: -960px; animation: tit_bar01_2 3.0s infinite;}
.tit_h2.even h2:after{ right: -10px; animation: tit_bar02_2 3.0s infinite;}
@media screen and (max-width:767px){
.tit_h2 h2:before{ left: -20vw; animation: tit_bar01_smp 3.0s infinite;}
.tit_h2 h2:after{ left: 0; animation: tit_bar02_smp 3.0s infinite;}
.tit_h2.even h2:before{ right: -960px; animation: tit_bar01_2_smp 3.0s infinite;}
.tit_h2.even h2:after{ right: -10px; animation: tit_bar02_2_smp 3.0s infinite;}
}
@keyframes tit_bar01 {
0%{ left: -960px;}
16.66%{ left: -1080px;}
33.33%{ left: -920px;}
100%{ left: -960px;}
}
@keyframes tit_bar02 {
0%{ left: -10px;}
16.66%{ left: -130px;}
33.33%{ left: 30px;}
100%{ left: -10px;}
}
@keyframes tit_bar01_2 {
0%{ right: -960px;}
16.66%{ right: -1080px;}
33.33%{ right: -920px;}
100%{ right: -960px;}
}
@keyframes tit_bar02_2 {
0%{ right: -10px;}
16.66%{ right: -130px;}
33.33%{ right: 30px;}
100%{ right: -10px;}
}
@keyframes tit_bar01_smp {
0%{ left: -22.5vw;}
16.66%{ left: -27.5vw;}
33.33%{ left: -17.5vw;}
100%{ left: -22.5vw;}
}
@keyframes tit_bar02_smp {
0%{ left: -2.5vw;}
16.66%{ left: -7.5vw;}
33.33%{ left: 2.5vw;}
100%{ left: -2.5vw;}
}
@keyframes tit_bar01_2_smp {
0%{ right: -22.5vw;}
16.66%{ right: -27.5vw;}
33.33%{ right: -17.5vw;}
100%{ right: -22.5vw;}
}
@keyframes tit_bar02_2_smp {
0%{ right: -2.5vw;}
16.66%{ right: -7.5vw;}
33.33%{ right: 2.5vw;}
100%{ right: -2.5vw;}
}


h3.tit_h3{ display: flex; align-items: center; justify-content: center; width: 1000px; height: 80px; background: #fff; color:#0a141e; font-size: 2rem; line-height: 1em; padding-top: 0.2em; margin: 80px auto 20px; transform: skewX(-33.33deg); position: relative;}
h3.tit_h3:first-child{ margin-top: 0;}
h3.tit_h3 strong{ font-weight: 900; transform: skewX(33.33deg);}
h3.tit_h3:before{ content: ""; width: 1000px; height: 76px; border: 2px dotted #fff; border-left: none; border-right: none; position: absolute; left: -1040px; top: 50%; transform: translateY(-50%);}
h3.tit_h3:after{ content: ""; width: 1000px; height: 76px; border: 2px dotted #fff; border-left: none; border-right: none; position: absolute; right: -1040px; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:767px){
h3.tit_h3{ width: 72.5vw; height: 10vw; font-size: 1.33rem; padding-top: 0.2em; margin: 15% auto 5%;}
h3.tit_h3:before{ width: 72.5vw; height: calc(10vw - 4px); left: -75vw;}
h3.tit_h3:after{ width: 72.5vw; height: calc(10vw - 4px); right: -75vw;}
}

/*animetion*/
h3.tit_h3 strong{ position: relative; animation: tit_h3 3s infinite;}
@keyframes tit_h3{
0% { left: 0; top: 0;}
1% { left: 4px; top: 8px;}
2% { left: -8px; top: -4px;}
3% { left: 2px; top: 4px;}
4% { left: -4px; top: -2px;}
5% { left: 0; top: 0;}
100% { left: 0; top: 0;}
}


h4.tit_h4{ text-align: center; font-size: 2rem; margin: 80px auto 20px; overflow: hidden;}
h4.tit_h4 strong{ display: inline-block; position: relative;}
h4.tit_h4 strong:before{ content: ""; width: 960px; height: 0; border-bottom: 2px solid #fff; position: absolute; left: -1000px; top: calc(50% - 4px); transform: translateY(-50%);}
h4.tit_h4 strong:after{ content: ""; width: 960px; height: 0; border-bottom: 2px solid #fff; position: absolute; right: -1000px; top: calc(50% - 4px); transform: translateY(-50%);}
@media screen and (max-width:767px){
h4.tit_h4{ font-size: 1.33rem; margin: 15% auto 5%;}
h4.tit_h4 strong:before{ width: 92.5vw; left: -100vw;}
h4.tit_h4 strong:after{ width: 92.5vw; right: -100vw;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}