@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* 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: "Barlow", "Noto Sans JP", sans-serif;
font-size:20px;
font-weight: 500;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#333;
min-width:960px;
}
@media screen and (max-width:960px){
html,body{ font-size:3.75vw; min-width:240px; max-width:960px; background: #FFEC00;}
}

/*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*/
p{ line-height:2em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}

strong{ font-weight:700;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.noto-sans{ font-family: "Noto Sans JP", sans-serif;}
.barlow{ font-family: "Barlow", sans-serif;}
.barlow-condensed{ font-family: "Barlow Condensed", sans-serif;}

.white{ color:#fff;}
.black{ color:#333;}

.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;}



/*header*/
#fixed_sns{ position: fixed; right: 0; top: 0; z-index: 99; width: 60px; height: 100%; min-height: 100dvh; background: #FFEC00; border-left: 2px solid #333; display: flex; align-items: center; justify-content: center;}
#fixed_sns ul{ width: 34px;}
#fixed_sns ul li{ margin: 14px auto;}

#h_logo{ position: fixed; left: 90px; top: 25px; z-index: 9;}
#h_logo img{ height: 46px;}
@media screen and (max-width:960px){
#fixed_sns{ position: static; width: auto; height: auto; min-height: 0; background: none; border: none;}
#fixed_sns ul{ position: fixed; right: 10vw; top: 5vw; z-index: 99; width: auto; display: flex;}
#fixed_sns ul li{ width: 8vw; margin: 0 0 0 2vw;}

#h_logo{ position: fixed; left: 10vw; top: 5vw; z-index: 99;}
#h_logo img{ height: 8.75vw;}
}



/*footer*/
#copyright{ position: fixed; left: 0; top: 0; z-index: 99; width: 60px; height: 100%; min-height: 100dvh; background: #FFEC00; border-right: 2px solid #333; display: flex; align-items: center; justify-content: center;}
#copyright p{ writing-mode: vertical-rl; font-size: 0.6rem; font-weight: 700;}

#footer{}
@media screen and (max-width:960px){
#copyright{ position: static; width: auto; height: auto; min-height: 0; background: none; border: none; border-top: 2px solid #333;}
#copyright p{ writing-mode: unset; font-size: 0.6rem; padding: 0.5em;}

}



/*メイン*/
#content{ padding: 0 60px;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
@media screen and (max-width:960px){
#content{ margin: 0 5vw; padding: 0; background: #fff; border-left: 2px solid #333; border-right: 2px solid #333;}
.maincontent{ padding:0; margin:0 auto; width:85%;}
}



/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em; font-weight: 700;}
h2.tit_h2{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px;}
h2.tit_h2 strong{ font-size: 3.5rem; line-height: 1em; border-bottom: 4px solid #333;}
h2.tit_h2 span{ display: flex; align-items: center; justify-content: center; background: #333; color: #fff; font-size: 0.8rem; line-height: 1em; padding: 0.25em 0.5em; margin-top: 0.75em;}
@media screen and (max-width:960px){
h2.tit_h2{ margin-bottom: 7.5%;}
h2.tit_h2 strong{ font-size: 3.5rem;}
h2.tit_h2 span{ font-size: 0.9rem;}
}



/*fv*/
#fv{ background: url("../images/fv_bg.png") center center no-repeat #fff; background-size: cover; padding: 60px 0 180px; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;}
#fv h1{ width: 500px;}

#fv .date{ position: absolute; left: 30px; bottom: 30px;}
#fv .date dl{ display: flex; flex-direction: column;}
#fv .date dl dt{ align-self: flex-start; border-bottom: 6px solid #333; font-size: 4rem; line-height: 1em; font-weight: 600;}
#fv .date dl dd{ border-bottom: 6px solid #333; font-size: 2.3rem; line-height: 1em; font-weight: 600;}
#fv .date dl dd strong{ font-size: 5.6rem; line-height: 1em; font-weight: 600;}
#fv .date dl dd span{ margin: 0 0.25em;}

#fv .area{ position: absolute; right: 30px; bottom: 30px; text-align: right; display: flex; flex-direction: column;}
#fv .area p{ font-size: 1rem; letter-spacing: 0.05em; font-weight: 700; border-bottom: 2px solid #333;}
#fv .area p:nth-child(1){ align-self: flex-end; margin-bottom: 0.2em;}

#fv .follow{ position: absolute; right: 60px; top: 40px;}
#fv .follow a{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 200px; height: 170px; background: #70D8B4; border: 2px solid #333; border-radius: 50%;}
#fv .follow a strong{ font-size: 0.9rem; letter-spacing: 0.04em; line-height: 1.25em;}
#fv .follow a span{ font-size: 0.7rem; line-height: 1.5em; font-weight: 700; margin-top: 0.125em;}
#fv .follow a i{ font-size: 1rem; line-height: 0; margin-top: 0.35em;}
@media print, screen and (min-width:1441px){
#fv .date dl dt{ font-size: calc((80/1440)*100vw);}
#fv .date dl dd{ font-size: calc((46/1440)*100vw);}
#fv .date dl dd strong{ font-size: calc((112/1440)*100vw);}

#fv .area p{ font-size: calc((20/1440)*100vw);}
}
@media screen and (max-width:1440px){
#fv .date dl dt{ font-size: calc((80/1440)*100vw);}
#fv .date dl dd{ font-size: calc((46/1440)*100vw);}
#fv .date dl dd strong{ font-size: calc((112/1440)*100vw);}

#fv .area p{ font-size: calc((20/1440)*100vw);}
}
@media screen and (max-width:960px){
#fv{ background: url("../images/fv_bg_smp.png") center center no-repeat #fff; background-size: cover; padding: 20vw 0 8.75vw; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
#fv h1{ width: 84%;}

#fv .date{ position: static; margin: 7.5% auto 5%; width: 90%;}
#fv .date dl{ display: flex; flex-direction: column; width: 100%;}
#fv .date dl dt{ border-bottom: 4px solid #333; font-size: 2.8rem;}
#fv .date dl dd{ border-bottom: 4px solid #333; font-size: 1.8rem;}
#fv .date dl dd strong{ font-size: 4.2rem;}
#fv .date dl dd span{ margin: 0 0.25em;}

#fv .area{ position: static; text-align: left; margin: 0 auto; width: 90%;}
#fv .area p{ font-size: 1rem;}
#fv .area p:nth-child(1){ align-self: flex-start; margin-bottom: 0.2em;}

#fv .follow{ display: none;}
}





/*home*/
/*about*/
#about{ padding: 160px 0; background: #FECBD5;}
#about h3{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.8rem; margin-bottom: 40px;}
#about h3 strong{ font-weight: 900;}
#about .txt p{ font-size: 0.9rem; letter-spacing: 0.1em; font-weight: 700; max-width: 720px; margin: 0 auto; text-align: justify;}
@media screen and (max-width:960px){
#about{ padding: 20% 0;}
#about h3{ text-align: left; font-size: 1.8rem; margin-bottom: 7.5%;}
#about .txt p{ font-size: 0.9rem;}
}



/*funding*/
#funding{ padding: 160px 0; background: #F8C864;}
#funding .txt p{ text-align: center; font-size: 0.8rem; letter-spacing: 0.1em;}
#funding .img{ max-width: 860px; margin: 40px auto 0; position: relative;}
#funding .img .ico{ position: absolute; right: -40px; top: -40px; z-index: 7; width: 160px; height: 140px; border-radius: 50%; background: #70D8B4; border: 2px solid #333; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.5em;}
#funding .img figure.comingsoon{ position: relative;}
#funding .img figure.comingsoon:before{ content: "Coming Soon..."; font-size: 1.7rem; font-weight: 700; color: #fff; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 5;}
#funding .img figure.comingsoon:after{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.5); border: 2px solid #333; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 3;}
@media screen and (max-width:960px){
#funding{ padding: 20% 0;}
#funding h2.tit_h2 strong{ font-size: 2.5rem;}
#funding .txt p{ font-size: 0.9rem;}
#funding .img{ white-space: 100%; margin-top:20%;}
#funding .img .ico{ right: -3.75vw; top: -10vw; width: 30vw; height: 25vw; font-size: 0.8rem;}
#funding .img figure.comingsoon:before{ font-size: 1.7rem;}
}



/*follow*/
#follow{ padding: 80px 0 40px; background: #BBE0EF;}
#follow h3{ display: flex; align-items: center; justify-content: center; margin-bottom: 40px;}
#follow h3 strong{ display: flex; align-items: center; justify-content: center; text-align: center; min-width: 540px; font-size: 0.9rem; font-weight: 700; padding: 0.25em 0.5em; background: #333; color: #FFEC00; position: relative; border-radius: 3em;}
#follow h3 strong:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 12px 0px 12px; border-color: #333333 transparent transparent transparent; position: absolute; left: 0; right: 0; bottom: -9px; margin: auto;}

#follow .sns{ margin-bottom: 80px;}
#follow .sns ul{ display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto;}
#follow .sns ul li{ width: 300px;}
#follow .sns ul li a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; position: relative; background: #fff; color: #333; border: 2px solid #333; border-radius: 70px; font-size: 1rem; letter-spacing: 0.1em; font-weight: 700; transition: 0.3s;}
#follow .sns ul li a .arrow{ width:12px; height:12px; display:flex; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);}
#follow .sns ul li a .arrow svg{ width:100%; height:100%; display:block; fill: none; stroke: currentColor;}
#follow .sns ul li a:hover{ background: #333; color: #fff;}

#follow .sponsor{ text-align: center;}
#follow .sponsor dl{ display: flex; align-items: center; justify-content: center; font-size: 0.6rem; margin-bottom: 1em;}
#follow .sponsor dl:last-child{ margin-bottom: 0;}
#follow .sponsor dl dt{ font-weight: 700;}
#follow .sponsor dl dd{ margin-left: 1em;}
@media screen and (max-width:960px){
#follow{ padding: 20% 0 10%;}
#follow h3{ margin-bottom: 10%;}
#follow h3 strong{ min-width: 1px; width: 100%; font-size: 1rem; line-height: 1.5em; padding: 0.5em 1em;}
#follow h3 strong:after{ border-width: 2.5vw 2.75vw 0px 2.75vw; position: absolute; left: 0; right: 0; bottom: -2.25vw;}

#follow .sns{ margin-bottom: 15%;}
#follow .sns ul{ display: block;}
#follow .sns ul li{ width: 100%; margin-top: 3.75%;}
#follow .sns ul li a{ height: 15vw; border-radius: 15vw; font-size: 1.2rem;}
#follow .sns ul li a .arrow{ width: 2.5vw; height: 2.5vw; right: 7.5vw;}

#follow .sponsor dl{ flex-direction: column; font-size: 0.8rem; line-height: 1.5em;}
#follow .sponsor dl dd{ margin: 0.25em auto 0;}
}










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