@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@100..900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:750px) {
html {
font-size: 1.3px;
line-height: 1.3px;
}
}
* {
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color:#fff;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
a{
text-decoration: none;
}
@media screen and (min-width:750px) {
a{
transition: 0.2s ease-out;
}
a:hover{
opacity: 0.64;
}
}



.pc{
display:none;
}
@media screen and (min-width:750px) {
.pc{
display:block;
}
.sp{
display:none;
}
}
.none{
display: none;
}



/* ==============================================
body
============================================== */

body{
background: #ff0000;
}
body.c2{
background: #ff00ff;
}
body.c3{
background: #0000ff;
}
body.c4{
background: #00be00;
}
body.c5{
background: #a0c800;
}
body.c6{
background: #c80000;
}
body.c7{
background: #ff3c8c;
}
body.c8{
background: #00a0c8;
}
body.c9{
background: #ff8c00;
}
body.c10{
background: #ffe600;
}



/* ==============================================
header
============================================== */

header{
}
header p{
position: absolute;
top: 16rem;
left: 16rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
header p{
top: 32px;
left: 32px;
}
}
header p a{
}
header p a img{
max-width: 52rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
header p a img{
max-width: 128px;
}
}



/* ==============================================
main
============================================== */

main{
}



/* ==============================================
#hero
============================================== */

#hero{
}
#hero .inner{
}
#hero .inner h1{
text-align: center;
padding: 80rem 0 0 0;
}
#hero .inner h1 img{
max-width: 300rem;
}
@media screen and (min-width:750px) {
#hero .inner h1 img{
max-width: 640px;
}
}
#hero .inner p{
font-size: 12rem;
line-height: 20rem;
letter-spacing: 0;
font-weight: 900;
color: #FFF;
max-width: 228rem;
margin: 8rem auto 0 auto;
}
@media screen and (min-width:750px) {
#hero .inner p{
max-width: 100%;
text-align: center;
margin: 16px auto 0 auto;
padding: 0 0 0 6px;
}
}
#hero .inner p span{
font-size: 12rem;
line-height: 20rem;
letter-spacing: 0;
font-weight: 700;
color: #FFF;
opacity:0;
}



/* ==============================================
#introduction
============================================== */

#introduction{
}
#introduction .inner{
}



/* ==============================================
#contents
============================================== */

#contents{
overflow: hidden;
}
#contents .inner{
text-align: center;
}
#contents .inner .contents{
padding: 60rem 0 0 0;
text-align: left;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#contents .inner .contents{
display: inline-block;
width: 480px;
margin: 0 32px;
vertical-align: top;
}
}
#contents .inner .contents a{
position: relative;
display: block;
}
#contents .inner .contents.cs a{
pointer-events: none;
}
#contents .inner .contents a div{
position: relative;
}
#contents .inner .contents a div figure{
position: relative;
margin: 0 32rem;
}
#contents .inner .contents a div figure img{
border-radius: 2rem;
}
#contents .inner .contents a div figure.shadow::after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 160rem;
background: linear-gradient(0deg, rgba(0,0,0,0.16) 64%, rgba(0,0,0,0.0) 100%);
border-radius: 0 0 2rem 2rem;
}
#contents .inner .contents.cs a div figure::before{
content: "COMING SOON";
font-family: 'Dela Gothic One';
font-size: 21rem;
line-height: 220rem;
letter-spacing: 0;
font-weight: 700;
text-align: center;
color:#fff;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.32);
border-radius: 2rem;
}
#contents .inner .contents a div h2{
font-size: 41rem;
line-height: 37rem;
position: absolute;
bottom: -18rem;
left: 16rem;
}
#contents .inner .contents a div h2 span{
font-family: 'Dela Gothic One';
font-size: 41rem;
line-height: 37rem;
letter-spacing: 0.8rem;
font-weight: 400;
color: #FFF;
opacity:0;
}
#contents .inner .contents a h3{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #FFF;
margin: 28rem 0 0 16rem;
}
#contents .inner .contents a h3 + p{
font-size: 12rem;
line-height: 20rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #222;
margin: 4rem 0 0 16rem;
}
#contents .inner .contents a h3 + p img{
max-width: 8rem;
display: inline-block;
vertical-align: middle;
margin: -2rem 4rem 0 0;
}
#contents .inner .contents a .arrow{
position: absolute;
bottom: 30rem;
right: -4rem;
}
#contents .inner .contents.cs a .arrow{
display: none;
}
#contents .inner .contents a .arrow img{
max-width: 92rem;
}



/* ==============================================
#check
============================================== */

#check{
margin: 60rem 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#check{
margin: 128px 0 0 0;
}
}
#check h2{
text-align: center;
padding: 0 0 32rem 0;
}
#check h2 img{
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#check h2 img{
max-width: 480px;
}
}
#check .inner{
text-align: center;
}
#check .inner div{
padding: 0 32rem;
text-align: left;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#check .inner div{
display: inline-block;
text-align: center;
vertical-align: top;
margin: 64px 0 0 0;
}
}
#check .inner div .number{
margin: -12rem 0 0 0;
}
#check .inner div .number span{
font-family: 'Dela Gothic One';
font-size: 41rem;
line-height: 41rem;
letter-spacing: 0;
font-weight: 400;
color: #FFF;
display: inline-block;
}
#check .inner div:nth-child(even) .number{
text-align: right;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#check .inner div:nth-child(even) .number{
text-align: center;
}
}
#check .inner div h3{
margin: 8rem 0 0 0;
}
#check .inner div h3 span{
font-size: 19rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #FFF;
opacity:0;
}
#check .inner div:nth-child(even) h3{
text-align: right;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#check .inner div:nth-child(even) h3{
text-align: center;
}
}
#check .inner div h3 + p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #FFF;
margin: 8rem 0 0 0;
}
#check .inner div:nth-child(even) h3 + p{
text-align: right;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#check .inner div:nth-child(even) h3 + p{
text-align: center;
}
}



/* ==============================================
footer
============================================== */

footer{
padding: 0 0 64rem 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
footer{
padding: 0 0 128px 0;
}
}



footer div{
border: solid 8rem #fff;
margin: 60rem 32rem 0 32rem;
padding: 0 0 20rem 0;
}
@media screen and (min-width:750px) {
footer div{
width: 800px;
margin: 96px auto 0 auto;
padding: 0 0 36px 0;
}
}
footer div h2{
font-family: 'Dela Gothic One';
font-size: 19rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 400;
color: #FFF;
text-align: center;
padding: 12rem 0 0 0;
}
@media screen and (min-width:750px) {
footer div h2{
font-size: 31px;
line-height: 39px;
padding: 28px 0 0 0;
}
}
footer div p{
margin: 12rem 16rem 0 16rem;
text-align: justify;
}
@media screen and (min-width:750px) {
footer div p{
text-align: center;
}
}
footer div .button{
text-align: center;
}
@media screen and (min-width:750px) {
footer div .button{
margin: 24px 0 0 0;
}
}
footer div .button a{
font-family: 'Dela Gothic One';
font-size: 19rem;
line-height: 19rem;
letter-spacing: 0.8rem;
font-weight: 400;
color: #ff0000;
text-align: center;
display: inline-block;
height: 44rem;
border-radius: 22rem;
background: #fff;
padding: 11rem 32rem 0 32rem;
}
footer div + p{
font-family: 'Dela Gothic One';
font-size: 21rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 400;
color: #FFF;
text-align: center;
padding: 56rem 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
footer div + p{
padding: 112px 0 0 0;
}
}



/* ==============================================
animation
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.slideInLeft {
animation-name: slideInLeft;
}
@keyframes slideInLeft {
0% {
transform: translateX(-64rem);
}
100% {
transform: translateX(0);
}
}



.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
transform: scale(0.0,0.0);
}
100% {
transform: scale(1.0,1.0);
}
}



.zoomOut {
animation-name: zoomOut;
}
@keyframes zoomOut {
0% {
transform: scale(1.6,1.6);
}
100% {
transform: scale(1.0,1.0);
}
}