@charset "UTF-8";

.kvArea{ background: url("../img/bg_main.png") center top no-repeat; background-size: cover; width: 100%; height: 100vh; position: relative;}
.kvfream{ width: 100%; height: 100%; /*background: url("../img/freampc.png") left top no-repeat; background-size: contain*/}
.maintits{ position: absolute; left: 9%; top: 26%;width: 44%; text-align: center}
.maintits img{ witd:100%; height: auto}
.maintits h2{ padding-bottom: 40px;}

.mainavatar{ position: absolute; right: 15%; bottom: 0; width: 24%;}

.kvfream{background: url("../img/freamtop.svg") no-repeat top,
	url("../img/freambottom.svg") no-repeat bottom right/*,
	url("../img/freammit.svg") repeat-y top right/100px 100px;*/; background-size: 100%}

.kvfreammit{ background: url("../img/freammit.svg") 0 0 repeat-y; position: absolute; top: 42px; background-size: 100%; left: 0; width: 100%;
    height: calc(100% - 82px);}

.eventBtn{ width: 262px; height: 216px; position: fixed; right: 30px; bottom: 30px; z-index: 100; }
.eventBtn p{ position: absolute; top: 0; left: 0;}
.evtn{ width: 209px;}
.eventBtn p.evtn{ left: 34px;;}

/*section:nth-of-type(even).readarea { background: url("../img/bg_read.png") left top no-repeat; background-size: cover;}*/
.readarea h2{font-family: kinuta-maruminold-stdn, serif; font-size: 40px; font-weight: normal; color: #fff;}
.readarea p{font-family: kinuta-maruminold-stdn, serif;
font-style: normal;
font-weight: 400;
	color: #fff;
	font-size: 24px; line-height: 34px;
}

.readarea{ position: relative; min-height: 700px; width: 100%;} 
.readarea .video{
  width: 100%;
	height: 100%;
  min-height: 700px;
  background: url("../img/bg_read.png") left top no-repeat; background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.readarea video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.readarea .inner{ max-width: 1140px; margin: 0 auto; padding: 157px 20px; }
.readarea h2{ max-width: 840px; margin-bottom: 97px;}

section:nth-of-type(odd):not(.kvArea).howto{ background: url("../img/bg_mission.png") left top no-repeat; background-size: cover;}
.howto h2{ width: 100%; margin-bottom: 90px;}
.howto h2 img{ width: 100%; height: auto;}

.htTit{ max-width: 970px; margin: 0 auto; margin-bottom: 50px;}

.misImg{ max-width: 836px; margin: 0 auto; padding: 80px 0 70px;}

.howtoplayCon{}
.howtoplayCon .playTit{ max-width: 482px; margin: 0 auto; margin-bottom: 0;}
.howtoplayCon ul{ display: flex; max-width:  1320px; margin: 0 auto;}
.howtoplayCon li{ width: 33.3%;}

.mapblock{ max-width: 700px; margin: 0 auto;}
.prfblock{ max-width: 1100px; margin: 0 auto; margin-top: 40px; padding-bottom: 108px;}

main{ padding-top: 0;}

.ariund{animation: svelte-ifzyzl-rotation 60s linear infinite;}

.eventBtn p.ariund {
    width: 221px;
    left: 28px;
    top: -6px;
}
.salonlogo{ left: 50px; top: 50px; position: absolute;}

.howplaytit{ font-size: 40px; color: #FF8900; font-weight: bold; padding: 72px 0 50px; text-align: center;}




@keyframes svelte-ifzyzl-rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

	.pc{display: none}
	.sp{display: block}

.eventBtn{transition: all .5s .6s; opacity: 0; transform: translateY(30px)}
.intno .eventBtn{ opacity: 1; transform: translateY(0)}

@media only screen and (max-width: 1000px) {
	.howplaytit{ font-size: 15px; color: #FF8900; font-weight: bold; padding: 20px 0 10px; text-align: center;}
	
	.pc{display: none}
	.sp{display: block}
	.inner.svelte-1j7cpex.svelte-1j7cpex.svelte-1j7cpex{display: block; padding: 0 0 80px;}
	.maintits{ width: 80%;}
	
	.mainavatar{ width: 47%; right: 29%;}
		
		.eventBtn {
    width: 262px;
    height: 216px;
    position: absolute;
    right: 0px;
    bottom: -104px;
}
	
	.howtoplayCon ul{ display: block; padding: 0 20px;}
	.howtoplayCon li{ width: 100%;  margin-bottom: -40px;}
	.htTit{ padding: 20px 40px 0 40px;}
	.pcon{ display: none;}
	.official-site.svelte-1j7cpex.svelte-1j7cpex.svelte-1j7cpex { width: 100%;}
	.readarea h2 { margin-bottom: 40px;}
	.salonlogo {
    left: 0;
    top: 30px;
    position: absolute;
    width: 100%;
    text-align: center;
}
	.maintits img{ width: 100%;}
	.maintits { top: 80px;}
	.kvArea{ height: 587px;}
	.readarea .inner{    padding: 65px 20px;}
	.howto h2 { margin-bottom: 30px}
		.prfblock { margin-top: -20px; padding-bottom: 40px;}
		.readarea h2{ font-size: 25px;
        line-height: 41px;}
	.readarea p{ font-size: 18px;}
	
	
	.kvfream {
    background: url(../img/freamtop_sp.svg) no-repeat top, url(../img/freambottom_sp.svg) no-repeat bottom right /*, url("../img/freammit.svg") repeat-y top right/100px 100px;*/;
    background-size: 100%;
}
		
	.kvfreammit{background: url(../img/freammit_sp.svg) 0 0 repeat-y; background-size: 100%;}
	.eventBtn{transform: translateY(40px) scale(0.7); right: -40px;}
	.intno .eventBtn{transform: translateY(0) scale(0.7); right: -40px;}
	
	.intno .maintits img {
    opacity: 1;
    transform: scale(1);
    max-width: 310px;
    margin: 0 auto;
}
	
	.mainavatar {
        width: 47%;
        right: 29%;
        
        right: 0;
        margin: 0 auto;
        /* position: relative; */
		width: 100%;
    }
	
	.mainavatar img{ max-width: 200px; margin: 0 auto; display: block}
	.misImg{  padding: 40px 0 20px;}

}
@media only screen and (min-width: 1001px) {
.spon{ display: none;}
	.readarea .inner{ padding-bottom: 400px; padding-right: 15%; box-sizing: border-box;}
}

.maintits img{transition: all .4s; opacity: 0; transform: scale(0.8)} 

.intno .maintits img{ opacity: 1; transform: scale(1)}



.readarea h2.act{transition: all .5s .6s; opacity: 0; transform: translateY(30px)}
.readarea h2.act.on-active{ opacity: 1; transform: translateY(0)}
.readarea p.act{transition: all .5s .6s; opacity: 0; transform: translateY(30px)}
.readarea p.act.on-active{ opacity: 1; transform: translateY(0)}

.howto h2.act{transition: all .4s; opacity: 0; transform: scale(0.7)} 
.howto h2.act.on-active{transition: all .4s; opacity: 1; transform: scale(1)} 
.htTit.act{transition: all .5s .6s; opacity: 0; transform: translateY(30px)}
.htTit.act.on-active{ opacity: 1; transform: translateY(0)}

.misImg.act{transition: all .7s; opacity: 0; transform: scale(0.8)} 
.misImg.act.on-active{ opacity: 1; transform: scale(1)} 

.howtoplayCon .act{transition: all .5s .6s; opacity: 0; transform: translateY(30px)}
.howtoplayCon  .act.on-active{ opacity: 1; transform: translateY(0)}


.sxtx{ font-size: 16px; text-align: center; color: #fff;}
.howtosabtxtx{ margin-bottom: 60px; font-size: 18px; color: #F5FF02;}

.shoitTit{ text-align: center}
@media only screen and (max-width: 1000px) {
	.sxtx{ font-size: 14px;}
	.howtosabtxtx{ margin-bottom: 20px; font-size: 14px;}
	
}