@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  style.css
=================================================================== */
body,html {
	overscroll-behavior: none;
}
/* =====================================
common
===================================== */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fo322h');
  src:  url('fonts/icomoon.eot?fo322h#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fo322h') format('truetype'),
    url('fonts/icomoon.woff?fo322h') format('woff'),
    url('fonts/icomoon.svg?fo322h#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tiktok:before {
  content: "\e900";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-youtube:before {
  content: "\ea9d";
}

body {
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    background-color: #f2f2f2;
	color: #fff;
	
}

main {
	background: url(../img/bg.jpg) no-repeat top center / 100% fixed,#000;
}

.wrapper {
	background: url(../img/bg.jpg) no-repeat top center / cover, #000;
	max-width: 750px;
	min-height: 100vh;
	margin: 0 auto;
    -webkit-box-shadow: 0 0 10px 2px #221E42;
	-moz-box-shadow: 0 0 10px 2px #221E42;
	box-shadow: 0 0 10px 2px #221E42;
	padding: min(calc(50/750 * 100vw), 50px) min(calc(40/750 * 100vw), 40px) min(calc(100/750 * 100vw), 100px) ;
}

/* =====================================
header
===================================== */
header{
	text-align: center;
}
.thumbnail {
	width: min(calc(300/750 * 100vw), 300px);
	margin: min(calc(40/750 * 100vw), 40px) auto;
}

h1 {
	font-size: min(calc(24/750 * 100vw), 24px);
	line-height: min(calc(50/750 * 100vw), 50px);
	margin-bottom: min(calc(20/750 * 100vw), 20px);
}
.name {
	display: block;
	width: min(calc(199/750 * 100vw), 199px);
	margin: 0 auto min(calc(20/750 * 100vw), 20px);
}

/* =====================================
link
===================================== */
.sns {
	display: flex;
	justify-content: center;
	gap: min(calc(20/750 * 100vw), 20px);
	margin-bottom: min(calc(40/750 * 100vw), 40px);
}

.sns li a {
	display: block;
	color: #fff;
}

.sns li a::before {
	font-size: min(calc(40/750 * 100vw), 40px);
	line-height: min(calc(55/750 * 100vw), 55px);
}

.mainlink li {
	position: relative;
	width: min(calc(600/750 * 100vw), 600px);
	margin: min(calc(40/750 * 100vw), 40px) auto;
}

.mainlink li a {
	display: block;
	width: 100%;
	background: #221e42;
	padding: min(calc(20/750 * 100vw), 20px) 0;
	text-align: center;
	color: #fff;
	font-size: min(calc(24/750 * 100vw), 24px);
	position: relative;
	z-index: 5;
	transition: all 0.2s ease;
}
.mainlink li a:hover {
	box-shadow: 0 0 20px 10px #5f598b;;
}

.mainlink li::before, .mainlink li::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: min(calc(600/750 * 100vw), 600px);
	height: min(calc(76/750 * 100vw), 76px);
	transition: all 0.2s ease;
}

.mainlink li::before {
	background-color: #01dadb;
	top: max(calc(-5/750 * 100vw), -5px);
	left: max(calc(-5/750 * 100vw), -5px);
}

.mainlink li::after {
	background-color: #c3007e;
	bottom: max(calc(-5/750 * 100vw), -5px);
	right: max(calc(-5/750 * 100vw), -5px);
}

.mainlink li:hover::before {
	top: 0;
	left: 0;
}
.mainlink li:hover::after {
	bottom: 0;
	right: 0;
}

/* =====================================
glitch
===================================== */

.glitch {
	background:  no-repeat center;
	background-size: 100%;
	width: min(calc(750/750 * 100vw), 750px);
	position: relative;
	overflow: hidden;
}

.glitch01 {
	width: min(calc(300/750 * 100vw), 300px);
	height: min(calc(300/750 * 100vw), 300px);
}

.glitch::before,
.glitch::after,
.glitch .channel {
	background: inherit;
	background-size: cover;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.glitch::before {
	-webkit-animation: glitch-before 1s linear infinite alternate both;
	animation: glitch-before 1s linear infinite alternate both;
	content: "";
}

@-webkit-keyframes glitch-before {
	0% {
		-webkit-clip-path: polygon(0% 42.0347872562%, 100% 42.0347872562%, 100% 51.1953681821%, 0% 51.1953681821%);
		clip-path: polygon(0% 42.0347872562%, 100% 42.0347872562%, 100% 51.1953681821%, 0% 51.1953681821%);
		-webkit-transform: translate(-7.7232940504%, 0.0178494942%);
		transform: translate(-7.7232940504%, 0.0178494942%);
	}

	0.8% {
		-webkit-clip-path: polygon(0% 29.0972988494%, 100% 29.0972988494%, 100% 37.0416614536%, 0% 37.0416614536%);
		clip-path: polygon(0% 29.0972988494%, 100% 29.0972988494%, 100% 37.0416614536%, 0% 37.0416614536%);
		-webkit-transform: translate(-5.8163610272%, -0.3947000515%);
		transform: translate(-5.8163610272%, -0.3947000515%);
	}

	1.6% {
		-webkit-clip-path: polygon(0% 13.323938907%, 100% 13.323938907%, 100% 22.8429478077%, 0% 22.8429478077%);
		clip-path: polygon(0% 13.323938907%, 100% 13.323938907%, 100% 22.8429478077%, 0% 22.8429478077%);
		-webkit-transform: translate(7.0362742479%, 0.1544483478%);
		transform: translate(7.0362742479%, 0.1544483478%);
	}

	2.4% {
		-webkit-clip-path: polygon(0% 24.1526814602%, 100% 24.1526814602%, 100% 26.2904056058%, 0% 26.2904056058%);
		clip-path: polygon(0% 24.1526814602%, 100% 24.1526814602%, 100% 26.2904056058%, 0% 26.2904056058%);
		-webkit-transform: translate(4.8102849133%, 0.0581254225%);
		transform: translate(4.8102849133%, 0.0581254225%);
	}

	3.2% {
		-webkit-clip-path: polygon(0% 7.9231846034%, 100% 7.9231846034%, 100% 16.0588447633%, 0% 16.0588447633%);
		clip-path: polygon(0% 7.9231846034%, 100% 7.9231846034%, 100% 16.0588447633%, 0% 16.0588447633%);
		-webkit-transform: translate(4.1677496349%, 0.4716473748%);
		transform: translate(4.1677496349%, 0.4716473748%);
	}

	4% {
		-webkit-clip-path: polygon(0% 54.7841366379%, 100% 54.7841366379%, 100% 64.0733368012%, 0% 64.0733368012%);
		clip-path: polygon(0% 54.7841366379%, 100% 54.7841366379%, 100% 64.0733368012%, 0% 64.0733368012%);
		-webkit-transform: translate(1.6513708416%, 0.2222100241%);
		transform: translate(1.6513708416%, 0.2222100241%);
	}

	4.8% {
		-webkit-clip-path: polygon(0% 23.5884552369%, 100% 23.5884552369%, 100% 27.9785213206%, 0% 27.9785213206%);
		clip-path: polygon(0% 23.5884552369%, 100% 23.5884552369%, 100% 27.9785213206%, 0% 27.9785213206%);
		-webkit-transform: translate(3.5545150911%, 0.2720604078%);
		transform: translate(3.5545150911%, 0.2720604078%);
	}

	5.6% {
		-webkit-clip-path: polygon(0% 0.4381172287%, 100% 0.4381172287%, 100% 5.9977215673%, 0% 5.9977215673%);
		clip-path: polygon(0% 0.4381172287%, 100% 0.4381172287%, 100% 5.9977215673%, 0% 5.9977215673%);
		-webkit-transform: translate(5.9306228044%, 0.186063521%);
		transform: translate(5.9306228044%, 0.186063521%);
	}

	6.4% {
		-webkit-clip-path: polygon(0% 60.8485278443%, 100% 60.8485278443%, 100% 63.3552085023%, 0% 63.3552085023%);
		clip-path: polygon(0% 60.8485278443%, 100% 60.8485278443%, 100% 63.3552085023%, 0% 63.3552085023%);
		-webkit-transform: translate(2.6712783385%, 0.0191342852%);
		transform: translate(2.6712783385%, 0.0191342852%);
	}

	7.2% {
		-webkit-clip-path: polygon(0% 66.8013013304%, 100% 66.8013013304%, 100% 68.2081196891%, 0% 68.2081196891%);
		clip-path: polygon(0% 66.8013013304%, 100% 66.8013013304%, 100% 68.2081196891%, 0% 68.2081196891%);
		-webkit-transform: translate(0.4854873593%, -0.442070781%);
		transform: translate(0.4854873593%, -0.442070781%);
	}

	8%,
	100% {
		-webkit-clip-path: none;
		clip-path: none;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes glitch-before {
	0% {
		-webkit-clip-path: polygon(0% 42.0347872562%, 100% 42.0347872562%, 100% 51.1953681821%, 0% 51.1953681821%);
		clip-path: polygon(0% 42.0347872562%, 100% 42.0347872562%, 100% 51.1953681821%, 0% 51.1953681821%);
		-webkit-transform: translate(-7.7232940504%, 0.0178494942%);
		transform: translate(-7.7232940504%, 0.0178494942%);
	}

	0.8% {
		-webkit-clip-path: polygon(0% 29.0972988494%, 100% 29.0972988494%, 100% 37.0416614536%, 0% 37.0416614536%);
		clip-path: polygon(0% 29.0972988494%, 100% 29.0972988494%, 100% 37.0416614536%, 0% 37.0416614536%);
		-webkit-transform: translate(-5.8163610272%, -0.3947000515%);
		transform: translate(-5.8163610272%, -0.3947000515%);
	}

	1.6% {
		-webkit-clip-path: polygon(0% 13.323938907%, 100% 13.323938907%, 100% 22.8429478077%, 0% 22.8429478077%);
		clip-path: polygon(0% 13.323938907%, 100% 13.323938907%, 100% 22.8429478077%, 0% 22.8429478077%);
		-webkit-transform: translate(7.0362742479%, 0.1544483478%);
		transform: translate(7.0362742479%, 0.1544483478%);
	}

	2.4% {
		-webkit-clip-path: polygon(0% 24.1526814602%, 100% 24.1526814602%, 100% 26.2904056058%, 0% 26.2904056058%);
		clip-path: polygon(0% 24.1526814602%, 100% 24.1526814602%, 100% 26.2904056058%, 0% 26.2904056058%);
		-webkit-transform: translate(4.8102849133%, 0.0581254225%);
		transform: translate(4.8102849133%, 0.0581254225%);
	}

	3.2% {
		-webkit-clip-path: polygon(0% 7.9231846034%, 100% 7.9231846034%, 100% 16.0588447633%, 0% 16.0588447633%);
		clip-path: polygon(0% 7.9231846034%, 100% 7.9231846034%, 100% 16.0588447633%, 0% 16.0588447633%);
		-webkit-transform: translate(4.1677496349%, 0.4716473748%);
		transform: translate(4.1677496349%, 0.4716473748%);
	}

	4% {
		-webkit-clip-path: polygon(0% 54.7841366379%, 100% 54.7841366379%, 100% 64.0733368012%, 0% 64.0733368012%);
		clip-path: polygon(0% 54.7841366379%, 100% 54.7841366379%, 100% 64.0733368012%, 0% 64.0733368012%);
		-webkit-transform: translate(1.6513708416%, 0.2222100241%);
		transform: translate(1.6513708416%, 0.2222100241%);
	}

	4.8% {
		-webkit-clip-path: polygon(0% 23.5884552369%, 100% 23.5884552369%, 100% 27.9785213206%, 0% 27.9785213206%);
		clip-path: polygon(0% 23.5884552369%, 100% 23.5884552369%, 100% 27.9785213206%, 0% 27.9785213206%);
		-webkit-transform: translate(3.5545150911%, 0.2720604078%);
		transform: translate(3.5545150911%, 0.2720604078%);
	}

	5.6% {
		-webkit-clip-path: polygon(0% 0.4381172287%, 100% 0.4381172287%, 100% 5.9977215673%, 0% 5.9977215673%);
		clip-path: polygon(0% 0.4381172287%, 100% 0.4381172287%, 100% 5.9977215673%, 0% 5.9977215673%);
		-webkit-transform: translate(5.9306228044%, 0.186063521%);
		transform: translate(5.9306228044%, 0.186063521%);
	}

	6.4% {
		-webkit-clip-path: polygon(0% 60.8485278443%, 100% 60.8485278443%, 100% 63.3552085023%, 0% 63.3552085023%);
		clip-path: polygon(0% 60.8485278443%, 100% 60.8485278443%, 100% 63.3552085023%, 0% 63.3552085023%);
		-webkit-transform: translate(2.6712783385%, 0.0191342852%);
		transform: translate(2.6712783385%, 0.0191342852%);
	}

	7.2% {
		-webkit-clip-path: polygon(0% 66.8013013304%, 100% 66.8013013304%, 100% 68.2081196891%, 0% 68.2081196891%);
		clip-path: polygon(0% 66.8013013304%, 100% 66.8013013304%, 100% 68.2081196891%, 0% 68.2081196891%);
		-webkit-transform: translate(0.4854873593%, -0.442070781%);
		transform: translate(0.4854873593%, -0.442070781%);
	}

	8%,
	100% {
		-webkit-clip-path: none;
		clip-path: none;
		-webkit-transform: none;
		transform: none;
	}
}

.glitch::after {
	-webkit-animation: glitch-after 1s linear infinite alternate both;
	animation: glitch-after 1s linear infinite alternate both;
	content: "";
}

@-webkit-keyframes glitch-after {
	0% {
		-webkit-clip-path: polygon(0% 29.0330846352%, 100% 29.0330846352%, 100% 37.0298673707%, 0% 37.0298673707%);
		clip-path: polygon(0% 29.0330846352%, 100% 29.0330846352%, 100% 37.0298673707%, 0% 37.0298673707%);
		-webkit-transform: translate(0.6841986133%, -0.3649786192%);
		transform: translate(0.6841986133%, -0.3649786192%);
	}

	0.8% {
		-webkit-clip-path: polygon(0% 17.6626854267%, 100% 17.6626854267%, 100% 20.5583604076%, 0% 20.5583604076%);
		clip-path: polygon(0% 17.6626854267%, 100% 17.6626854267%, 100% 20.5583604076%, 0% 20.5583604076%);
		-webkit-transform: translate(-1.3365661107%, 0.4204734214%);
		transform: translate(-1.3365661107%, 0.4204734214%);
	}

	1.6% {
		-webkit-clip-path: polygon(0% 88.4359232352%, 100% 88.4359232352%, 100% 97.8092819534%, 0% 97.8092819534%);
		clip-path: polygon(0% 88.4359232352%, 100% 88.4359232352%, 100% 97.8092819534%, 0% 97.8092819534%);
		-webkit-transform: translate(0.7668697379%, -0.1605274433%);
		transform: translate(0.7668697379%, -0.1605274433%);
	}

	2.4% {
		-webkit-clip-path: polygon(0% 34.9227017616%, 100% 34.9227017616%, 100% 37.0495633058%, 0% 37.0495633058%);
		clip-path: polygon(0% 34.9227017616%, 100% 34.9227017616%, 100% 37.0495633058%, 0% 37.0495633058%);
		-webkit-transform: translate(-7.5545820857%, -0.2359602497%);
		transform: translate(-7.5545820857%, -0.2359602497%);
	}

	3.2% {
		-webkit-clip-path: polygon(0% 51.6347620932%, 100% 51.6347620932%, 100% 53.6272199866%, 0% 53.6272199866%);
		clip-path: polygon(0% 51.6347620932%, 100% 51.6347620932%, 100% 53.6272199866%, 0% 53.6272199866%);
		-webkit-transform: translate(-3.9971336206%, 0.2025483772%);
		transform: translate(-3.9971336206%, 0.2025483772%);
	}

	4% {
		-webkit-clip-path: polygon(0% 31.9510065896%, 100% 31.9510065896%, 100% 39.4378221463%, 0% 39.4378221463%);
		clip-path: polygon(0% 31.9510065896%, 100% 31.9510065896%, 100% 39.4378221463%, 0% 39.4378221463%);
		-webkit-transform: translate(1.8951501563%, 0.4819409688%);
		transform: translate(1.8951501563%, 0.4819409688%);
	}

	4.8% {
		-webkit-clip-path: polygon(0% 81.2595874938%, 100% 81.2595874938%, 100% 85.3834278749%, 0% 85.3834278749%);
		clip-path: polygon(0% 81.2595874938%, 100% 81.2595874938%, 100% 85.3834278749%, 0% 85.3834278749%);
		-webkit-transform: translate(4.372006372%, -0.1039661205%);
		transform: translate(4.372006372%, -0.1039661205%);
	}

	5.6% {
		-webkit-clip-path: polygon(0% 82.5636859078%, 100% 82.5636859078%, 100% 87.7462142561%, 0% 87.7462142561%);
		clip-path: polygon(0% 82.5636859078%, 100% 82.5636859078%, 100% 87.7462142561%, 0% 87.7462142561%);
		-webkit-transform: translate(4.7594476941%, -0.4069019942%);
		transform: translate(4.7594476941%, -0.4069019942%);
	}

	6.4% {
		-webkit-clip-path: polygon(0% 2.3482403547%, 100% 2.3482403547%, 100% 4.2788735881%, 0% 4.2788735881%);
		clip-path: polygon(0% 2.3482403547%, 100% 2.3482403547%, 100% 4.2788735881%, 0% 4.2788735881%);
		-webkit-transform: translate(3.4350770275%, -0.0475621375%);
		transform: translate(3.4350770275%, -0.0475621375%);
	}

	7.2% {
		-webkit-clip-path: polygon(0% 1.6489872998%, 100% 1.6489872998%, 100% 8.5000533348%, 0% 8.5000533348%);
		clip-path: polygon(0% 1.6489872998%, 100% 1.6489872998%, 100% 8.5000533348%, 0% 8.5000533348%);
		-webkit-transform: translate(1.1002868657%, 0.1023817871%);
		transform: translate(1.1002868657%, 0.1023817871%);
	}

	8%,
	100% {
		-webkit-clip-path: none;
		clip-path: none;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes glitch-after {
	0% {
		-webkit-clip-path: polygon(0% 29.0330846352%, 100% 29.0330846352%, 100% 37.0298673707%, 0% 37.0298673707%);
		clip-path: polygon(0% 29.0330846352%, 100% 29.0330846352%, 100% 37.0298673707%, 0% 37.0298673707%);
		-webkit-transform: translate(0.6841986133%, -0.3649786192%);
		transform: translate(0.6841986133%, -0.3649786192%);
	}

	0.8% {
		-webkit-clip-path: polygon(0% 17.6626854267%, 100% 17.6626854267%, 100% 20.5583604076%, 0% 20.5583604076%);
		clip-path: polygon(0% 17.6626854267%, 100% 17.6626854267%, 100% 20.5583604076%, 0% 20.5583604076%);
		-webkit-transform: translate(-1.3365661107%, 0.4204734214%);
		transform: translate(-1.3365661107%, 0.4204734214%);
	}

	1.6% {
		-webkit-clip-path: polygon(0% 88.4359232352%, 100% 88.4359232352%, 100% 97.8092819534%, 0% 97.8092819534%);
		clip-path: polygon(0% 88.4359232352%, 100% 88.4359232352%, 100% 97.8092819534%, 0% 97.8092819534%);
		-webkit-transform: translate(0.7668697379%, -0.1605274433%);
		transform: translate(0.7668697379%, -0.1605274433%);
	}

	2.4% {
		-webkit-clip-path: polygon(0% 34.9227017616%, 100% 34.9227017616%, 100% 37.0495633058%, 0% 37.0495633058%);
		clip-path: polygon(0% 34.9227017616%, 100% 34.9227017616%, 100% 37.0495633058%, 0% 37.0495633058%);
		-webkit-transform: translate(-7.5545820857%, -0.2359602497%);
		transform: translate(-7.5545820857%, -0.2359602497%);
	}

	3.2% {
		-webkit-clip-path: polygon(0% 51.6347620932%, 100% 51.6347620932%, 100% 53.6272199866%, 0% 53.6272199866%);
		clip-path: polygon(0% 51.6347620932%, 100% 51.6347620932%, 100% 53.6272199866%, 0% 53.6272199866%);
		-webkit-transform: translate(-3.9971336206%, 0.2025483772%);
		transform: translate(-3.9971336206%, 0.2025483772%);
	}

	4% {
		-webkit-clip-path: polygon(0% 31.9510065896%, 100% 31.9510065896%, 100% 39.4378221463%, 0% 39.4378221463%);
		clip-path: polygon(0% 31.9510065896%, 100% 31.9510065896%, 100% 39.4378221463%, 0% 39.4378221463%);
		-webkit-transform: translate(1.8951501563%, 0.4819409688%);
		transform: translate(1.8951501563%, 0.4819409688%);
	}

	4.8% {
		-webkit-clip-path: polygon(0% 81.2595874938%, 100% 81.2595874938%, 100% 85.3834278749%, 0% 85.3834278749%);
		clip-path: polygon(0% 81.2595874938%, 100% 81.2595874938%, 100% 85.3834278749%, 0% 85.3834278749%);
		-webkit-transform: translate(4.372006372%, -0.1039661205%);
		transform: translate(4.372006372%, -0.1039661205%);
	}

	5.6% {
		-webkit-clip-path: polygon(0% 82.5636859078%, 100% 82.5636859078%, 100% 87.7462142561%, 0% 87.7462142561%);
		clip-path: polygon(0% 82.5636859078%, 100% 82.5636859078%, 100% 87.7462142561%, 0% 87.7462142561%);
		-webkit-transform: translate(4.7594476941%, -0.4069019942%);
		transform: translate(4.7594476941%, -0.4069019942%);
	}

	6.4% {
		-webkit-clip-path: polygon(0% 2.3482403547%, 100% 2.3482403547%, 100% 4.2788735881%, 0% 4.2788735881%);
		clip-path: polygon(0% 2.3482403547%, 100% 2.3482403547%, 100% 4.2788735881%, 0% 4.2788735881%);
		-webkit-transform: translate(3.4350770275%, -0.0475621375%);
		transform: translate(3.4350770275%, -0.0475621375%);
	}

	7.2% {
		-webkit-clip-path: polygon(0% 1.6489872998%, 100% 1.6489872998%, 100% 8.5000533348%, 0% 8.5000533348%);
		clip-path: polygon(0% 1.6489872998%, 100% 1.6489872998%, 100% 8.5000533348%, 0% 8.5000533348%);
		-webkit-transform: translate(1.1002868657%, 0.1023817871%);
		transform: translate(1.1002868657%, 0.1023817871%);
	}

	8%,
	100% {
		-webkit-clip-path: none;
		clip-path: none;
		-webkit-transform: none;
		transform: none;
	}
}
