@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

/*--------------------------------------------------------------
#main-visual
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#main-visual {
		margin: 0 5.08vw;
		padding-top: 8vw;
	}
	
	.left_box {
		width: auto;
	}
	
	.tiktok_item,
	.youtube_item{
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.tiktok_item li:first-child {
		width: 50.89vw;
		font-family: "Inter Tight", sans-serif;
		font-size: 1.78vw;
		font-weight: 700;
	}
	
	.tiktok_item li:last-child {
		width: 35.62vw;
	}
	
	.tiktok_item li:last-child span {
		font-size: 10.94vw;
		padding-bottom: 0.521vw;
	}
	
	.youtube_item li:first-child {
		width: 44.78vw;
	}
	
	.youtube_item li:first-child span {
		font-size: 12.21vw;
		padding-bottom: 0.521vw;
	}
	
	.youtube_item li:last-child {
		width: 41.5vw;
		font-family: "Inter Tight", sans-serif;
		font-size: 4.3vw;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 1.3;
	}
	
	.youtube_item li:last-child span {
		font-weight: 400;
	}
	
	.tiktok_item li:last-child span,
	.youtube_item li:first-child span{
		font-family: "DotGothic16", sans-serif;
		background: #84F668;
		line-height: 1em;
		text-align: center;
		display: block;
	}
	
	.tiktok_item li:last-child span,
	.youtube_item li:first-child span {
		font-family: "DotGothic16", sans-serif;
		background: linear-gradient(270deg, #ff00ff, #00ffff, #84f668, #ffea00, #ff00ff);
		background-size: 1000% 1000%;
		animation: neonGradient 8s ease infinite;
		line-height: 1em;
		text-align: center;
		display: block;
	}
	
	.cord {
		font-family: "Libre Barcode 39", system-ui;
		font-size: 15.5vw;
		line-height: 1em;
		padding-top: 0;
	}
	
	.right_box {
		width: auto;
		margin-top: -10px;
	}
	
	.right_box dl {
		font-family: "Noto Serif JP", serif;
		font-weight: 700;
	}
	
	.right_box dt {
		font-size: 10.43vw;
		letter-spacing: -0.573vw;
		line-height: 1em;
	}
	
	.right_box dd {
		font-size: 29.5vw;
		letter-spacing: -3.5vw;
		line-height: 1em;
	}
	
	.right_box dd span {
		letter-spacing: -15.62vw;
		margin-left: -2.604vw;
	}
	
	.catch {
		font-size: 12.2vw;
		font-family: "Inter Tight", sans-serif;
		font-weight: 600;
		letter-spacing: -0.521vw;
		line-height: 1em;
		margin: 15px 20px 15px 20px;
	}
	
	
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#main-visual {
		margin: 6.25vw 2.604vw 0 2.604vw;
		padding-top: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	
	.left_box {
		width: 49.47vw;
	}
	
	.tiktok_item,
	.youtube_item{
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.tiktok_item li:first-child {
		width: 28vw;
		font-family: "Inter Tight", sans-serif;
		font-size: 0.938vw;
		font-weight: 700;
	}
	
	.tiktok_item li:last-child {
		width: 19.79vw;
	}
	
	.tiktok_item li:last-child span {
		font-size: 6.25vw;
		padding-bottom: 0.521vw;
	}
	
	.youtube_item li:first-child {
		width: 24.47vw;
	}
	
	.youtube_item li:first-child span {
		font-size: 6.771vw;
		padding-bottom: 0.521vw;
	}
	
	.youtube_item li:last-child {
		width: 23.43vw;
		font-family: "Inter Tight", sans-serif;
		font-size: 2.604vw;
		font-weight: 600;
		letter-spacing: -2px;
		line-height: 1.2;
	}
	
	.youtube_item li:last-child span {
		font-weight: 400;
	}
	
	.tiktok_item li:last-child span,
	.youtube_item li:first-child span{
		font-family: "DotGothic16", sans-serif;
		background: #84F668;
		line-height: 1em;
		text-align: center;
		display: block;
	}
	
	.tiktok_item li:last-child span,
	.youtube_item li:first-child span {
		font-family: "DotGothic16", sans-serif;
		background: linear-gradient(270deg, #ff00ff, #00ffff, #84f668, #ffea00, #ff00ff);
		background-size: 1000% 1000%;
		animation: neonGradient 8s ease infinite;
		line-height: 1em;
		text-align: center;
		display: block;
	}
	
	.cord {
		font-family: "Libre Barcode 39", system-ui;
		font-size: 8.58vw;
		line-height: 1em;
		padding-top: 10px;
	}
	
	.right_box {
		width: 44.2vw;
	}
	
	.right_box dl {
		font-family: "Noto Serif JP", serif;
		font-weight: 700;
	}
	
	.right_box dt {
		font-size: 5.469vw;
		letter-spacing: -0.573vw;
		line-height: 1em;
	}
	
	.right_box dd {
		font-size: 15.8vw;
		letter-spacing: -1.562vw;
		line-height: 1em;
	}
	
	.right_box dd span {
		letter-spacing: -15.62vw;
		margin-left: -2.604vw;
	}
	
	.catch {
		font-size: 12.95vw;
		font-family: "Inter Tight", sans-serif;
		font-weight: 600;
		letter-spacing: -0.521vw;
		line-height: 1em;
		margin: -2.604vw 2vw 1.042vw 2vw;
	}
	
}

@keyframes neonGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/*--------------------------------------------------------------
.scroll-list
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	.scroll-container {
		overflow: hidden;
		width: 100vw;
		position: relative;
	}
	
	.scroll-list {
		display: flex;
		list-style: none;
		padding-inline: 0;
		margin-inline: 0;
		position: relative;
		left: calc(50% - 50vw);
		width: 100vw;
	}
	
	.scroll-list li {
		font-family: "Inter Tight", sans-serif;
		font-size: 18.32vw;
		font-weight: bold;
		white-space: nowrap;
		padding: 0;
		animation: marquee-left 16s linear infinite;
		color: transparent;
		-webkit-text-stroke: 1px #0059FF;
	}
	
	.scroll-list li span {
		margin: 0 7.63vw;
	}
}

@media screen and (min-width: 771px) {
	
	
	
}


@media screen and (min-width: 1161px) {
	
	
	.scroll-container {
		overflow: hidden;
		width: 100vw;
		position: relative;
		padding: 4.167vw 0 0 0;
	}
	
	.scroll-list {
		display: flex;
		list-style: none;
		padding-inline: 0;
		margin-inline: 0;
		position: relative;
		left: calc(50% - 50vw);
		width: 100vw;
	}
	
	.scroll-list li {
		font-family: "Inter Tight", sans-serif;
		font-size: 10.417vw;
		font-weight: bold;
		white-space: nowrap;
		padding: 0;
		animation: marquee-left 16s linear infinite;
		color: transparent;
		-webkit-text-stroke: 3px #0059FF;
		letter-spacing: -0.469vw;
	}
	
	.scroll-list li span {
		margin: 0 2.604vw;
	}

}


@keyframes marquee-left {
   0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-100%);
  }
}


/*--------------------------------------------------------------
#about-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#about-area {
		position: relative;
		margin: 0;
		padding: 14.62vw 0 9.62vw 0;
	}
	
	#about-area .inner {
		margin: 0 5.08vw;
		
	}
	
	#about-area h4,
	#about-area h5 {
		font-family: "Noto Serif JP", serif;
		font-weight: 700;
		letter-spacing: -0;
	}
	
	#about-area h4 {
		font-size: 8.36vw;
		line-height: 1.3em;
	}
	
	#about-area h5 {
		font-size: 9.6vw;
		line-height: 1em;
		margin-bottom: 6.88vw;
	}
	
	#about-area h5 i {
		font-style: normal;
		letter-spacing: -2vw;
	}
	
	#about-area p {
		font-size: 4.58vw;
		line-height: 1.8;
		margin-bottom: 10.35vw;
		padding: 0;
		letter-spacing: -2px;
	}
	
	#about-area p span {
		background: #0059FF;
		color: #EAEEF0;
		line-height: 1em;
	}
	
	#about-area .english {
		font-size: 3.81vw;
		line-height: 1.5;
		margin-bottom: 12.35vw;
		padding: 0;
		font-weight: 500;
		letter-spacing: -0.25vw;
	}
	
	.copyright {
		display: none;
	}
}

@media screen and (min-width: 771px) {
	
	
	
}


@media screen and (min-width: 1161px) {
	
	#about-area {
		position: relative;
		margin: 0;
		padding: 7.812vw 0 0 0;
	}
	
	#about-area .inner {
		margin: 0 auto;
		width: 79.68vw;
	}
	
	#about-area h4,
	#about-area h5 {
		font-family: "Noto Serif JP", serif;
		font-weight: 700;
		letter-spacing: -0.521vw;
	}
	
	#about-area h4 {
		font-size: 5.208vw;
		line-height: 1em;
	}
	
	#about-area h5 {
		font-size: 7.812vw;
		line-height: 1em;
		margin-bottom: 4.167vw;
	}
	
	#about-area h5 i {
		font-style: normal;
		letter-spacing: -1.042vw;
	}
	
	#about-area p {
		font-size: 2.083vw;
		line-height: 1.8;
		margin-bottom: 4.167vw;
		padding: 0 0.521vw;
		letter-spacing: -2px;
	}
	
	#about-area p span {
		background: #0059FF;
		color: #EAEEF0;
		line-height: 1em;
	}
	
	#about-area .english {
		font-size: 3.125vw;
		line-height: 1.5;
		margin-bottom: 4.167vw;
		padding: 0 0.521vw;
		font-weight: 500;
		letter-spacing: -0.26vw;
	}
	
	.copyright {
		font-family: "Inter Tight", sans-serif;
		font-size: 0.938vw;
		font-weight: 600;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		position: absolute;
		top: 50%;
		right: 3%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		display: inherit;
	}
	
}

/*--------------------------------------------------------------
#join-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#join-area {
		margin: 0 5.08vw;
		width: auto;
		padding-top: 10.2vw;
	}
	
	#join-area ul {
		position: relative;
		margin-bottom: 12.35vw;
	}
	
	#join-area ul li:nth-child(1) {
		font-family: "Inter Tight", sans-serif;
		font-size: 8vw;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1em;
		margin-top: 2.54vw;
		margin-bottom: 3vw;
	}
	
	#join-area ul li:nth-child(2) {
		font-family: "Noto Serif JP", serif;
		font-size: 12.2vw;
		font-weight: 700;
		letter-spacing: -1.5vw;
		line-height: 1em;
		margin-bottom: 3vw;
		margin-left: 0;
	}
	
	#join-area ul li:nth-child(3) {
		font-size: 7.2vw;
		font-weight: 500;
		line-height: 1em;
		margin-bottom: 3vw;
		letter-spacing: -0.5vw;
		margin-left: 0;
	}
	
	#join-area ul li:nth-child(4) {
		font-family: "Noto Serif JP", serif;
		font-size: 8.9vw;
		font-weight: 700;
		letter-spacing: -1vw;
		line-height: 1em;
		margin-bottom: 4vw;
	}
	
	#join-area ul li:nth-child(5) {
		font-family: "Noto Serif JP", serif;
		font-size: 5.85vw;
		letter-spacing: -0.5vw;
		font-weight: 700;
		line-height: 1em;
		margin-left: 0;
		margin-bottom: 3vw;
	}
	
	#join-area ul li:nth-child(6) {
		font-size: 7.63vw;
		font-weight: 500;
		letter-spacing: -0.5vw;
		line-height: 1em;
	}
	
	#join-area ul {
		
	}
	
	#join-area .recruit {
		margin-bottom: 25px;
	}
	
	#join-area .recruit p {
		font-size: 5.08vw;
		line-height: 1.7;
		margin-bottom: 7.63vw;
		padding: 0 2.54vw;
		font-weight: 500;
		color: #EAEEF0;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		background-color: #0059FF;
	}
	
	#join-area .english {
		font-size: 3.81vw;
		line-height: 1.5;
		margin-bottom: 12.35vw;
		padding: 0;
		font-weight: 500;
		letter-spacing: -0.25vw;
	}
}

@media screen and (min-width: 771px) {
	
	
	
}


@media screen and (min-width: 1161px) {
	
	#join-area {
		margin: 0 auto;
		width: 79.68vw;
		padding-top: 7.812vw;
	}
	
	#join-area ul {
		position: relative;
		padding-bottom: 2.604vw;
		margin-bottom: 0;
	}
	
	#join-area ul li:nth-child(1) {
		font-family: "Inter Tight", sans-serif;
		font-size: 5.0vw;
		font-weight: 700;
		letter-spacing: -0.104vw;
		line-height: 1em;
		margin-top: 0.521vw;
		margin-bottom: 1.562vw;
	}
	
	#join-area ul li:nth-child(2) {
		font-family: "Noto Serif JP", serif;
		font-size: 6.771vw;
		font-weight: 700;
		letter-spacing: -0.521vw;
		line-height: 1em;
		margin-bottom: 1.823vw;
		margin-left: 11.97vw;
	}
	
	#join-area ul li:nth-child(3) {
		font-size: 3.802vw;
		font-weight: 500;
		line-height: 1em;
		margin-bottom: 1.562vw;
		margin-left: 11.97vw;
		letter-spacing: 0;
	}
	
	#join-area ul li:nth-child(4) {
		font-family: "Noto Serif JP", serif;
		font-size: 4.896vw;
		font-weight: 700;
		letter-spacing: -0.677vw;
		line-height: 1em;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		position: absolute;
		right: 0;
		top: 0;
		margin-bottom: 0;
	}
	
	#join-area ul li:nth-child(5) {
		font-family: "Noto Serif JP", serif;
		font-size: 4.583vw;
		letter-spacing: -0.417vw;
		font-weight: 700;
		line-height: 1em;
		margin-left: 11.97vw;
	}
	
	#join-area ul li:nth-child(6) {
		font-size: 4.896vw;
		font-weight: 500;
		letter-spacing: -0.781vw;
		line-height: 1em;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		position: absolute;
		left: 0;
		top: 7.031vw;
	}
	
	#join-area ul {
		
	}
	
	#join-area .recruit {
		margin-bottom: 1.302vw;
	}
	
	#join-area .recruit p {
		font-size: 2.083vw;
		line-height: 1.7;
		margin-bottom: 1.562vw;
		padding: 0 0 0 0.521vw;
		font-weight: 500;
		color: #EAEEF0;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		background-color: #0059FF;
	}
	
	#join-area .english {
		font-size: 3.125vw;
		line-height: 1.2;
		margin-bottom: 0;
		padding: 0 0.521vw;
		font-weight: 500;
		letter-spacing: -0.26vw;
	}
	
	
}


/*--------------------------------------------------------------
.btn_area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	.btn_area {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
	.btn{
		position: relative;
		overflow: hidden;
		text-decoration: none;
		display: inline-block;
		border: 2px solid #0059FF;/* ボーダーの色と太さ */
		padding: 20px 0 20px 15px;
		width: 50.25vw;
		border-radius: 12.72vw;
		text-align: center;
		background: #84F668;
		outline: none;
		transition: ease .2s;
		color: #0059FF;
		font-family: "Inter Tight", sans-serif;
		font-size: 6.36vw;
		font-weight: 600;
	}

	.btn span {
		position: relative;
		z-index: 3;
		color: #0059FF;
	}

	.btn:hover span{
		color: #0059FF;;
	}

	.bgleft:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		background: #FF8F7B;/*背景色*/
		width: 100%;
		height: 100%;
		transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
		transform: scale(0, 1);
		transform-origin: right top;
	}

	.bgleft:hover:before{
		transform-origin:left top;
		transform:scale(1, 1);
	}
	
	.btn_area .material-symbols-outlined {
		font-size: 6.36vw;
		vertical-align: -1.27vw;
		color: #0059FF;
		font-variation-settings:
			'FILL' 0,
			'wght' 500,
			'GRAD' 0,
			'opsz' 24;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
}

@media screen and (min-width: 771px) {
	
	
	
}


@media screen and (min-width: 1161px) {
	
	.btn_area {
		margin: 0 6.25vw;
		padding: 0;
		text-align: right;
	}
	
	.btn{
		position: relative;
		overflow: hidden;
		text-decoration: none;
		display: inline-block;
		border: 2px solid #0059FF;/* ボーダーの色と太さ */
		padding: 20px 0 20px 15px;
		width: 280px;
		border-radius: 50px;
		text-align: center;
		background: #84F668;
		outline: none;
		transition: ease .2s;
		color: #0059FF;
		font-family: "Inter Tight", sans-serif;
		font-size: 2.604vw;
		font-weight: 600;
	}

	.btn span {
		position: relative;
		z-index: 3;
		color: #0059FF;
	}

	.btn:hover span{
		color: #0059FF;;
	}

	.bgleft:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		background: #FF8F7B;/*背景色*/
		width: 100%;
		height: 100%;
		transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
		transform: scale(0, 1);
		transform-origin: right top;
	}

	.bgleft:hover:before{
		transform-origin:left top;
		transform:scale(1, 1);
	}
	
	.btn_area .material-symbols-outlined {
		font-size: 2.604vw;
		vertical-align: -8px;
		color: #0059FF;
		font-variation-settings:
			'FILL' 0,
			'wght' 500,
			'GRAD' 0,
			'opsz' 24;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	
}