@charset "UTF-8";

/*リセット系*/
*{
margin:0;
padding:0;
box-sizing: border-box;
text-align: center;
position: relative;
border: none;
outline: none;
}
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: #FFF;
font-size: 0;
font-family: "Noto Sans JP", sans-serif;
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: 1.0s all;
/*transition-delay: 0.3s;*/
transform: translate(0, 5vw);
opacity: 0;
filter: blur(1vw);
}
.effect.active{
transform: translate(0, 0);
opacity: 1;
filter: blur(0);
}
.pc, .inlinePC{
display: none;
}
.responsive{
width:100%;
height: auto;
}
#ctsWrap{
overflow: hidden;
}
#loaderWrap{
position: fixed;
width: 100%;
height: 100dvh;
background: #FFF;
z-index: 20;
}
#loader{
position: fixed;
width: 54dvw;
height: 54dvw;
top: 50dvh;
left: 50dvw;
margin-left: -25dvw;
margin-top: -25dvw;
}
#loader > img{
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
}
#loader img{
filter:blur(0.18vw);
}
#loader > span{
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
#loader > span:nth-of-type(1){
top: 65%;
left: 7%;
}
#loader > span:nth-of-type(2){
top: 26%;
left: -2%;
}
#loader > span:nth-of-type(3){
top: 43%;
left: -7%;
}
#loader > span:nth-of-type(4){
top: 6%;
left: 13%;
}
#loader > span > span{
position: absolute;
width: 100%;
height: 100%;
top: -55%;
left: -10%;
}
#loader > span > span > img{
width: 100%;
height: auto;
}

/*ハンバーガーメニュー*/
.hmBTN,
.modaal-close,
.round-wrap{
width: 13vw;
height: 13vw;
top: 2.5vw;
left: 2.5vw;
position: fixed;
z-index: 10;
}
.round-wrap{
mix-blend-mode: overlay;
mix-blend-mode: screen;
}
.rotate {
  width: 100%;
  height: 100%;
  animation: rotate-anime 10s linear infinite;
}
@keyframes rotate-anime {
    0%  {transform: rotate(0);}
  100%  {transform: rotate(-360deg);}
}
.round {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
  animation: round_anime 10s linear infinite;
  overflow: hidden;
  background: #61d7f1;
}
@keyframes round_anime {
    0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
   50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
   75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
  100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}
.modaal-close{
font-size: 0;
background: url("../assets/images_common/hm_close.png") center center no-repeat;
background-size: 100%;
}
.modaal-close:focus,
.modaal-close:hover{
opacity: 0.7;
}

/*パーティクル*/
canvas{
mix-blend-mode: screen;
filter: blur(1.0px);
}
#particles-js{
position: fixed;
top:0;
left: 0;
width: 100dvw;
height: 100lvh;
background: linear-gradient(325deg,rgba(0, 125, 199, 1) 0%, rgba(0, 93, 129, 1) 20%, rgba(0, 65, 162, 1) 45%, rgba(15, 172, 225, 1) 100%);
background: linear-gradient(325deg,rgba(38, 206, 226, 1) 0%, rgba(17, 142, 204, 1) 25%, rgba(31, 111, 189, 1) 45%, rgba(31, 111, 189, 1) 55%, rgba(17, 142, 204, 1) 75%, rgba(38, 206, 226, 1) 100%);
background: linear-gradient(325deg,rgba(28, 196, 216, 1) 0%, rgba(12, 132, 194, 1) 20%, rgba(0, 75, 182, 1) 45%, rgba(0, 75, 182, 1) 55%, rgba(12, 132, 194, 1) 80%, rgba(28, 196, 216, 1) 100%);
}

#cr{
text-align: center;
padding: 0.5rem 0 1.5rem 0;
font-size: 0.6rem;
}

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

html {
font-size: 1.9vw;
}
#loader{
width: 20vw;
height: 20vw;
margin-left: -10vw;
margin-top: -10vw;
}
#loader img{
filter:blur(0.05vw);
}

/*ハンバーガーメニュー*/
.hmBTN,
.modaal-close,
.round-wrap{
width: 4.5vw;
height: 4.5vw;
top: 1vw;
left: 1vw;
}

#cr{
padding: 0.5rem 0;
}

}


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