@charset "utf-8";
#fullWrap {
	position: relative;
	z-index: 0;
	background: linear-gradient(90deg, #D0E2FF 0%, #CCF7FF 20%, #F4FFE2 50%, #CCF7FF 80%, #D0E2FF 100%);
	overflow: hidden;
}
.mainTitle,section {
	width: min(calc(1366 / var(--vw-min) * 100vw),1366px);
	margin: 0 auto;
	padding: 0 min(calc(155 / var(--vw-min) * 100vw),155px);
	@media screen and (max-width:768px) {
		width: 100%;
		padding: 0 calc(20 / var(--vw-min) * 100vw);
	}
}
.mainTitle {
	padding-top: min(calc(119 / var(--vw-min) * 100vw),119px);
	position: relative;
	z-index: 1;
	@media screen and (max-width:768px) {
		padding-top: calc(58 / var(--vw-min) * 100vw);
	}
}
.mainTitle__title {
	width:min(calc(737 / var(--vw-min) * 100vw),737px);
	height:min(calc(80 / var(--vw-min) * 100vw),80px);
	margin: 0 auto min(calc(85 / var(--vw-min) * 100vw),85px);
	background: url(../../img/vr/title.png) no-repeat center center / contain;
	@media screen and (max-width:768px) {
		width: calc(323 / var(--vw-min) * 100vw);
		height: calc(46 / var(--vw-min) * 100vw);
		margin-bottom: calc(40 / var(--vw-min) * 100vw);
	}
}
.mainTitle__deco {
	content:'';
	position: absolute;
	top: min(calc(176 / var(--vw-min) * 100vw),176px);
	right: max(calc(-109 / var(--vw-min) * 100vw),-109px);
	width: min(calc(436 / var(--vw-min) * 100vw),436px);
	height: min(calc(120 / var(--vw-min) * 100vw),120px);
	background:url(../../img/live/deco_cloud.png) no-repeat center center / contain;
	z-index: -1;
	@media screen and (max-width:768px) {
		display: none;
	}
}
.localNav {
	margin-bottom: min(calc(80 / var(--vw-min) * 100vw), 80px);
	@media screen and (max-width:768px) {
		margin-bottom: calc(33 / var(--vw-min) * 100vw);
	}
}
.localNav__item{
	width: auto;
}
.localNav__link{
	padding: 0 2em;
}

section {
	text-align: center;
	margin-bottom: min(calc(84 / var(--vw-min) * 100vw),84px);
	position: relative;
	@media screen and (max-width:768px) {
		margin-bottom: calc(40 / var(--vw-min) * 100vw);
	}
}
.about__inner,
.tutorial__inner,
.worlds__inner,
.ccc {
	position: relative;
	z-index: 1;
}
section:last-of-type {
	margin-bottom: 0;
}
#vr .commonBtnLink:after {
	width:min(calc(20 / var(--vw-min) * 100vw),20px);
	height:min(calc(19 / var(--vw-min) * 100vw),19px);
	right:min(calc(24 / var(--vw-min) * 100vw),24px);
	margin-top: max(calc(-8 / var(--vw-min) * 100vw), -8px);
	@media screen and (max-width:768px) {
		right: calc(20 / var(--vw-min) * 100vw);
	}
}

.commonSubSection__content {
	text-align: left;
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	letter-spacing: 0.02em;
	line-height: min(calc(30 / var(--vw-min) * 100vw),30px);
	font-weight: 500;
	@media screen and (max-width:768px) {
		font-size: calc(13 / var(--vw-min) * 100vw);
		line-height: calc(25 / var(--vw-min) * 100vw);
	}
}
.commonSubSection__content h3 {
	margin-bottom: min(calc(49 / var(--vw-min) * 100vw),49px);
	font-size: min(calc(28 / var(--vw-min) * 100vw),28px);
	letter-spacing: -0.02em;
	line-height: min(calc(38 / var(--vw-min) * 100vw),38px);
	font-weight: 900;
	@media screen and (max-width:768px) {
		margin-bottom: calc(24 / var(--vw-min) * 100vw);
		font-size: calc(17 / var(--vw-min) * 100vw);
		line-height: calc(26 / var(--vw-min) * 100vw);
	}
}
.commonSubSection__content--color-purple {
	color: #8373FF;
}
.commonSubSection__content--color-pink {
	color: #FF7ABB;
}
.about__deco {
	bottom: max(calc(-106 / var(--vw-min) * 100vw),-106px);
	left: max(calc(-48 / var(--vw-min) * 100vw),-48px);
	@media screen and (max-width:768px) {
		bottom: calc(-71 / var(--vw-min) * 100vw);
		left: calc(-29 / var(--vw-min) * 100vw);
	}
}
.about__chatBtn {
	position: fixed;
	bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
	right: min(calc(9 / var(--vw-min) * 100vw), 9px);
	width: min(calc(120 / var(--vw-min) * 100vw), 120px);
	height: min(calc(120 / var(--vw-min) * 100vw), 120px);
	border-radius: 50%;
	background: var(--color-purple);
	border-radius: 100px;
	z-index: 100;
}
.about__chatBtn::before {
	content:'';
	position: absolute;
	left: min(calc(18 / var(--vw-min) * 100vw), 18px);
	bottom: min(calc(14 / var(--vw-min) * 100vw), 14px);
	width: min(calc(24 / var(--vw-min) * 100vw), 18px);
	height: min(calc(18 / var(--vw-min) * 100vw), 18px);
	background: var(--color-purple);
	-webkit-mask: url(../../img/common/btn_deco.svg) no-repeat center center / contain;
	mask: url(../../img/common/btn_deco.svg) no-repeat center center / contain;
	z-index: 1;
}
.about__chatBtn::after {
	content: '';
	position: absolute;
	bottom: min(calc(15 / var(--vw-min) * 100vw), 15px);
	right: min(calc(26 / var(--vw-min) * 100vw), 26px);
	width: min(calc(13 / var(--vw-min) * 100vw), 13px);
	height: min(calc(13 / var(--vw-min) * 100vw), 13px);
	mask: url(../../img/common/icon_arrow.svg) no-repeat center center / contain;
	-webkit-mask: url(../../img/common/icon_arrow.svg) no-repeat center center / contain;
	background: #F0FFB9;
	z-index: 1;
}
.about__chatBtnLink {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #CFC8FF 0%, #8C8EEF 100%);
	border-radius: 100px;
	text-decoration: none;
	position: relative;
	transform:translateY(max(calc(-4 / var(--vw-min) * 100vw),-4px));
	transition:all 0.3s ease;
}
.about__chatBtnLink:hover {
	transform: translateY(0);
}
.about__chatBtnLink::before {
	content:'';
	position: absolute;
	top: max(calc(-5 / var(--vw-min) * 100vw),-5px);
	right: max(calc(-1 / var(--vw-min) * 100vw),-1px);
	width: min(calc(63 / var(--vw-min) * 100vw),63px);
	height: min(calc(80 / var(--vw-min) * 100vw),80px);
	background: url("../../img/vr/deco_bear_mic.png") no-repeat center / contain;
	z-index: 1;
}
.about__chatBtnLink::after {
	content:'';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-56%, -50%);
	margin-top: min(calc(4 / var(--vw-min) * 100vw),4px);
	width: min(calc(110 / var(--vw-min) * 100vw),110px);
	height: min(calc(51 / var(--vw-min) * 100vw),51px);
	background: url("../../img/vr/join _vrChat.png") no-repeat center / contain;
	z-index: 1;
}
.about__text {
	@media screen and (max-width:768px) {
		font-size: calc(13 / var(--vw-min) * 100vw);
		letter-spacing: 0.02em;
		line-height: calc(25 / var(--vw-min) * 100vw);
	}
}
.about__text.-mb{
	margin-bottom: min(calc(64 / var(--vw-min) * 100vw), 64px);
	@media screen and (max-width:768px){
		margin-bottom: calc(32 / var(--vw-min) * 100vw);
	}
}
.about__subTitle {
  text-align: center;
}
.about__link {
  margin-top: min(calc(25 / var(--vw-min) * 100vw),25px);
  display: block;
  text-align: center;
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  letter-spacing: 0.02em;
  line-height: min(calc(30 / var(--vw-min) * 100vw), 30px);
  font-weight: 500;
  color: #8373FF;
  @media screen and (max-width:768px) {
    margin-bottom: calc(20 / var(--vw-min) * 100vw);
		font-size: calc(13 / var(--vw-min) * 100vw);
		letter-spacing: 0.02em;
		line-height: calc(25 / var(--vw-min) * 100vw);
	}
}
.about__link img {
  width: min(calc(16 / var(--vw-min) * 100vw), 16px);
  height: auto;
  margin-right: min(calc(8 / var(--vw-min) * 100vw), 8px);
  display: inline-block;
}
.tutorial__title {
	@media screen and (max-width:768px) {
		font-size: calc(14 / var(--vw-min) * 100vw);
	}
}
.tutorial__content .tutorial__subTitle {
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw),40px);
	@media screen and (max-width:768px) {
		margin-bottom: calc(20 / var(--vw-min) * 100vw);
	}
}
.tutorial__deco {
	top: min(calc(429 / var(--vw-min) * 100vw),429px);
	right: min(calc(41 / var(--vw-min) * 100vw),41px);
	@media screen and (max-width:768px) {
		top: calc(448 / var(--vw-min) * 100vw);
		right: calc(-22 / var(--vw-min) * 100vw);
	}
}
.tutorial__text {
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw),40px);
	@media screen and (max-width:768px) {
		margin-bottom: calc(24 / var(--vw-min) * 100vw);
	}
}
.tutorial__text .tutorial__note {
  font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
  font-weight: 900;
  @media screen and (max-width:768px) {
    font-size: calc(13 / var(--vw-min) * 100vw);
  }
}
.tutorial__subTitle {
  text-align: center;
}
.tutorial__img {
	width: min(calc(680 / var(--vw-min) * 100vw),680px);
  margin: 0 auto;
	margin-bottom: min(calc(42 / var(--vw-min) * 100vw),42px);
	@media screen and (max-width:768px) {
		width: 100%;
		margin-bottom: calc(28 / var(--vw-min) * 100vw);
	}
}
.tutorial__img picture img {
	width: 100%;
	object-fit: contain;
}
.tutorial__banner {
  width: min(calc(680 / var(--vw-min) * 100vw),680px);
  margin: 0 auto;
  margin-bottom: min(calc(20 / var(--vw-min) * 100vw),20px);
  @media screen and (max-width:768px) {
    width: 100%;
  }
}

.tutorial__banner-wrapper {
  display: flex;
  align-items: center;
}
.tutorial__banner-img--logo {
width: min(calc(100 / var(--vw-min) * 100vw),100px);
}
.tutorial__banner-img--banner {
width: min(calc(200 / var(--vw-min) * 100vw),580px);
aspect-ratio: 16 / 9;
overflow: hidden;
}
.tutorial__banner-img img {
  width: 100%;
  object-fit: contain;
}
.tutorial__banner-text {
  @media screen and (max-width:768px) {
    font-size: calc(8 / var(--vw-min) * 100vw);
  }
}
.tutorial__progress {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	margin-bottom: min(calc(29 / var(--vw-min) * 100vw),29px);
	@media screen and (max-width:768px) {
		margin-bottom: calc(20 / var(--vw-min) * 100vw);
	}
}
.tutorial__progressNum {
	margin-top: min(calc(8 / var(--vw-min) * 100vw),8px);
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0;
	color: #FF7ABB;
	font-family: var(--font-poppins);
	@media screen and (max-width:768px) {
		margin-top: calc(8 / var(--vw-min) * 100vw);
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}
.tutorial__progressTrack {
	width: 100%;
	height: min(calc(16 / var(--vw-min) * 100vw),16px);
	border-radius: 100px;
	background: #E6E6E6;
	overflow: hidden;
	@media screen and (max-width:768px) {
		height: calc(8 / var(--vw-min) * 100vw);
	}
}
.tutorial__progressFill {
	width: 0%;
	height: 100%;
	border-radius: 100px;
	background: #FF95C9;
	transition: width .3s ease;
}
.tutorial__note {
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw),40px);
	font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
	font-weight: 700;
	line-height: min(calc(38 / var(--vw-min) * 100vw),38px);
	@media screen and (max-width:768px) {
		margin-bottom: calc(24 / var(--vw-min) * 100vw);
		font-size: calc(14 / var(--vw-min) * 100vw);
		line-height: calc(24 / var(--vw-min) * 100vw);
	}
}
.tutorial__btnWrap {
	width: min(calc(480 / var(--vw-min) * 100vw),480px);
	height: min(calc(64 / var(--vw-min) * 100vw),64px);
	margin: 0 auto;
	border-radius: 100px;
	background: #FF5FBD;
	@media screen and (max-width:768px) {
		width: calc(301 / var(--vw-min) * 100vw);
		height: calc(48 / var(--vw-min) * 100vw);
	}
}
.tutorial__btnWrap .commonBtnLink {
	@media screen and (max-width:768px) {
		font-size: calc(13 / var(--vw-min) * 100vw);
	}
}


/**
* Worlds
**/
.worlds__title-deco--inu {
	position: absolute;
	top: max(calc(-13 / var(--vw-min) * 100vw),-13px);
	left: min(calc(68 / var(--vw-min) * 100vw),68px);
	width: min(calc(136 / var(--vw-min) * 100vw),136px);
	height: min(calc(146 / var(--vw-min) * 100vw),146px);
	background:url(../../img/live/deco_pink_inu.png) no-repeat center center / contain;
	@media screen and (max-width:768px) {
		left: calc(9 / var(--vw-min) * 100vw);
		width: calc(74 / var(--vw-min) * 100vw);
		height: calc(80 / var(--vw-min) * 100vw);
	}
}
.worlds__title-deco--music {
	position: absolute;
	top: max(calc(-23 / var(--vw-min) * 100vw),-23px);
	right: min(calc(111 / var(--vw-min) * 100vw),111px);
	width: min(calc(35 / var(--vw-min) * 100vw),35px);
	height: min(calc(72 / var(--vw-min) * 100vw),72px);
	background:url(../../img/live/deco_red_music.png) no-repeat center center / contain;
	@media screen and (max-width:768px) {
		top: calc(-15 / var(--vw-min) * 100vw);
		right: calc(22 / var(--vw-min) * 100vw);
		width: calc(22 / var(--vw-min) * 100vw);
		height: calc(44 / var(--vw-min) * 100vw);
	}
}
.worlds__soon {
	font-size: min(calc(48 / var(--vw-min) * 100vw),48px);
	letter-spacing: 0;
	line-height: min(calc(48 / var(--vw-min) * 100vw),48px);
	color: #fff;
	font-family: var(--font-poppins);
	text-align: center;
	text-shadow: 0 0 min(calc(30 / var(--vw-min) * 100vw),30px) #ff62ae;
	@media screen and (max-width:768px) {
		font-size: calc(24 / var(--vw-min) * 100vw);
		line-height: calc(24 / var(--vw-min) * 100vw);
		text-shadow: 0 0 calc(16 / var(--vw-min) * 100vw) #ff62ae;
	}
}


/**
* LIVE
**/
.live__deco {
	bottom: max(calc(334 / var(--vw-min) * 100vw),334px);
	left: max(calc(33 / var(--vw-min) * 100vw),33px);
	@media screen and (max-width:768px) {
		top: calc(-91 / var(--vw-min) * 100vw);
		left: calc(-10 / var(--vw-min) * 100vw);
	}
}
.live__soon {
	font-size: min(calc(48 / var(--vw-min) * 100vw),48px);
	letter-spacing: 0;
	line-height: min(calc(48 / var(--vw-min) * 100vw),48px);
	color: #fff;
	font-family: var(--font-poppins);
	text-align: center;
	text-shadow: 0 0 min(calc(30 / var(--vw-min) * 100vw),30px) #8373FF;
	@media screen and (max-width:768px) {
		font-size: calc(24 / var(--vw-min) * 100vw);
		line-height: calc(24 / var(--vw-min) * 100vw);
		text-shadow: 0 0 calc(16 / var(--vw-min) * 100vw) #8373FF;
	}
}