@charset "UTF-8";

/*リセット系*/
*{
margin:0;
padding:0;
box-sizing: border-box;
text-align: center;
position: relative;
border: none;
outline: none;
font-weight: 400;
}
a img{
border:none;
}
img{
vertical-align:bottom;
height: auto;
pointer-events: none;
}
a img{
pointer-events: auto;
}
li{
list-style-type: none;
display:inline;
}
iframe{
width: 100%;
border:none;
}
.responsive{
width:100%;
height: auto;
}
.SPhover{
opacity: 0.7;
}
/*
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900
*/
html, body{
color: #111;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 400;
font-style: normal;
/*font-feature-settings: "palt" 1;
letter-spacing: 0.075em;*/
}
html {
font-size: 3.8vw;
line-height: 1.7;
text-align: center;
background: #FFF;
}
.effect{
transition: 0.7s all;
transform: translate(0, 8vw);
opacity: 0;
/*filter: blur(2vw);*/
}
.effect.active{
transform: translate(0, 0);
opacity: 1;
/*filter: blur(0);*/
}
.pc, .inlinePC{
display: none;
}
#loader{
position: fixed;
width: 100%;
height: 100lvh;
height: 100dvh;
background: rgba(230, 0, 0, 1.0);
background: rgba(255, 255, 255, 1.0);
top: 0;
left: 0;
z-index: 100;
display: flex;
justify-content:center;
align-items:center;
}
#loaderIcon{
width: 10vw;
aspect-latio:1;
}
#loaderIcon img{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
#loaderIcon img:nth-of-type(1){
position: relative;
}
#loader img{
animation:1s ease-in-out infinite scales;
transform-origin:50% 50%;
}
#loader img:nth-of-type(2){
animation:0.3s linear infinite rotation;
}
#loader img:nth-of-type(3){
animation:3.6s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
100%{ transform:rotate(-360deg); }
}
@keyframes scales{
  0%{ transform:scale(1.0);}
 50%{ transform:scale(1.1); }
100%{ transform:scale(1.0); }
}
.copyright{
font-size: 0.6rem;
line-height: 1;
text-align: center;
padding: 3rem 0 1rem 0;
}
.modaal-fullscreen .modaal-close{
position: fixed;
top: -0.5vw;
left: 1.5vw;
width: 12vw;
height: auto;
aspect-ratio:30/34;
text-indent: -99999px;
z-index: 2;
background:url("../images/modaal_close.png") center center no-repeat;
background-size:90%;
font-size: 0;
}
.modaal-close::before,
.modaal-close::after{
display: none;
}
.modaal-close:focus,
.modaal-close:hover{
opacity: 0.7;
}


/*PC*/
@media screen and (min-width:768px){
html, body{
color: #333;
}
.mobile{
display: none;
}
.pc{
display: block;
}
.inlinePC{
display: inline;
}
.effect{
transform: translate(0, 2vw);
}
	
#loaderIcon{
width: 4vw;
}

html {
font-size: 1.8vw;
}
.copyright{
font-size: 0.6rem;
}

.modaal-fullscreen .modaal-close{
top: 0rem;
left: 0.75rem;
width: 3.0rem;
}


}


@media screen and (min-width:1600px){
html {
font-size: 28.5px;
}
}