html{
	overflow-y: scroll !important;
}
/* body {
	margin: 0 auto;
	background-image: url(../img/bg_pc.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #fff;
	overflow-x: hidden;
} */

.bg{
	background: url(../img/bk_pc.jpg) no-repeat center center/cover;
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -3;
}


@media only screen and (max-width: 600px) {
/* body {
	background-image: url(../img/bg_s.jpg);
	overflow-x: hidden !important;
	height:100lvh !important;
} */

.bg{
	background: url(../img/bk_s.jpg) no-repeat center center/cover;
}

	/*body{
		border: 1px solid red;
		background-image: url('../img/nav_brush.png');
		background-position: top -30px right -30px;
		background-size: 120px auto;
		z-index: 900;
	}*/
	}
/*.bg {
	margin: 0 auto;
	background-image: linear-gradient(0deg, transparent 14px, #00CBD280 15px), linear-gradient(90deg, transparent 14px, #00CBD280 15px);
	background-size: 15px 15px;
}

.logoBg {
	background: #00000040;
}*/

.glitch {
	color: white;
	font-size: 2em;
	position: relative;
	width: 100%;
	text-align: left;
	font-weight: bold;
	font-style: italic;

	height: auto;
}

@keyframes noise-anim {
	0% {
		clip: rect(77px, 9999px, 6px, 0);
	}

	5% {
		clip: rect(65px, 9999px, 70px, 0);
	}

	10% {
		clip: rect(82px, 9999px, 82px, 0);
	}

	15% {
		clip: rect(32px, 9999px, 35px, 0);
	}

	20% {
		clip: rect(31px, 9999px, 49px, 0);
	}

	25% {
		clip: rect(18px, 9999px, 46px, 0);
	}

	30% {
		clip: rect(94px, 9999px, 64px, 0);
	}

	35% {
		clip: rect(69px, 9999px, 31px, 0);
	}

	40% {
		clip: rect(6px, 9999px, 72px, 0);
	}

	45% {
		clip: rect(25px, 9999px, 35px, 0);
	}

	50% {
		clip: rect(82px, 9999px, 26px, 0);
	}

	55% {
		clip: rect(7px, 9999px, 92px, 0);
	}

	60% {
		clip: rect(54px, 9999px, 30px, 0);
	}

	65% {
		clip: rect(86px, 9999px, 90px, 0);
	}

	70% {
		clip: rect(38px, 9999px, 65px, 0);
	}

	75% {
		clip: rect(41px, 9999px, 66px, 0);
	}

	80% {
		clip: rect(31px, 9999px, 37px, 0);
	}

	85% {
		clip: rect(8px, 9999px, 12px, 0);
	}

	90% {
		clip: rect(50px, 9999px, 69px, 0);
	}

	95% {
		clip: rect(7px, 9999px, 42px, 0);
	}

	100% {
		clip: rect(14px, 9999px, 57px, 0);
	}
}

.glitch:after {
	content: attr(data-text);
	position: absolute;
	left: 1px;
	text-shadow: -1px 0 #00CBD2;
	top: 0;
	color: white;
	background: transparent;
	overflow: hidden;
	clip: rect(0, 900px, 0, 0);
	animation: noise-anim 4s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
	0% {
		clip: rect(18px, 9999px, 13px, 0);
	}

	5% {
		clip: rect(74px, 9999px, 51px, 0);
	}

	10% {
		clip: rect(33px, 9999px, 65px, 0);
	}

	15% {
		clip: rect(64px, 9999px, 66px, 0);
	}

	20% {
		clip: rect(75px, 9999px, 6px, 0);
	}

	25% {
		clip: rect(40px, 9999px, 49px, 0);
	}

	30% {
		clip: rect(71px, 9999px, 1px, 0);
	}

	35% {
		clip: rect(42px, 9999px, 73px, 0);
	}

	40% {
		clip: rect(92px, 9999px, 57px, 0);
	}

	45% {
		clip: rect(4px, 9999px, 33px, 0);
	}

	50% {
		clip: rect(4px, 9999px, 34px, 0);
	}

	55% {
		clip: rect(49px, 9999px, 25px, 0);
	}

	60% {
		clip: rect(24px, 9999px, 44px, 0);
	}

	65% {
		clip: rect(31px, 9999px, 99px, 0);
	}

	70% {
		clip: rect(54px, 9999px, 83px, 0);
	}

	75% {
		clip: rect(57px, 9999px, 97px, 0);
	}

	80% {
		clip: rect(3px, 9999px, 15px, 0);
	}

	85% {
		clip: rect(84px, 9999px, 34px, 0);
	}

	90% {
		clip: rect(100px, 9999px, 88px, 0);
	}

	95% {
		clip: rect(91px, 9999px, 59px, 0);
	}

	100% {
		clip: rect(10px, 9999px, 87px, 0);
	}
}

.glitch:before {
	content: attr(data-text);
	position: absolute;
	left: -1px;
	text-shadow: 1px 0 #00CBD2;
	top: 0;
	color: white;
	/* background: black; */
	background: transparent;
	overflow: hidden;
	clip: rect(0, 900px, 0, 0);
	animation: noise-anim-2 2s infinite linear alternate-reverse;
}



.titleBack{
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	white-space: nowrap;
	/*height: 90px;*/
	overflow: hidden;
	transform: rotate(7deg);
	margin-left: -100px;
	width: 120%;
	margin-top: 160px;
	background-color: #f7ed00;
	
}

@media only screen and (max-width: 880px) {
		.titleBack{
			margin-top: 60px;
			width: 120%;
			margin-left: -50px;
	}
}

.titleBackUl{
	list-style: none;
	padding-bottom: 30px;
}

.titleBackUl li{
	display: inline-block;
	font-size: 3.0em;
	padding-left: 30px;
	color: #65499b;
}

.wrapper {
	width: 94%;
	margin: 0 auto;
}

ul {
	margin: 0;
	padding: 0.5rem !important;
}


.textBorder {
	margin-bottom: 1rem;
}

.box {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.cyberBox {
	background: #00CBD240;
	width: 100%;
	margin-bottom: 1rem;
}

li {
	list-style: none;
	color: #fff;
}

.eventBox li {
	color: #4CB1BE;
	font-weight: bold;
}

.newsBox li:first-child {
	color: #4CB1BE;
	font-weight: bold;
}

.cyberBorder {
	position: absolute;
}

.topLeft {
	border-top: 2px solid #4CB1BE;
	width: 10px;
	top: 1px;
	left: 1px;
	border-left: 2px solid #4CB1BE;
	height: 10px;
}

.topRight {
	border-top: 2px solid #4CB1BE;
	width: 10px;
	top: 1px;
	right: -1px;
	border-right: 2px solid #4CB1BE;
	height: 10px;
}

.bottomLeft {
	border-bottom: 2px solid #4CB1BE;
	height: 10px;
	width: 10px;
	bottom: 1px;
	left: 1px;
	border-left: 2px solid #4CB1BE;
}

.bottomRight {
	border-bottom: 2px solid #4CB1BE;
	height: 10px;
	width: 10px;
	bottom: 1px;
	right: -1px;
	border-right: 2px solid #4CB1BE;
}

.titleLine_box {
	position: relative;
}

.titleLine::before {
	content: "";
	border-right: 2px solid #f7ff00;
	position: absolute;
	height: 56px;
	right: -20px;
	bottom: -23px;
	transform: rotate(45deg);
}

.titleLine::after {
	content: "";
	background: #f7ff00;
	position: absolute;
	bottom: 23px;
	right: -122px;
	height: 2px;
	width: 84px;
}

h2 {
	/*font-size: 1.2em !important;
	margin-top: 0;
	border-bottom: 2px solid #f7ff00;
	padding-bottom: 1rem;
	width: 60%;
	margin-top: 2rem;
	background-image: url(../img/renewal/title_s.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height: 36px;
	font-family: 'Titillium Web', sans-serif;
	letter-spacing: 1.4;*/
}

.backBtn {
	color: #ed4a99;
    font-weight: bold;
    text-align: center;
    position: relative;
    font-size: 1.2em;
    background: #fff;
    width: 94%;
    margin: 0 auto 6rem;
    padding: 0.5rem 0;
    border-radius: 1rem;
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.5);
    border: 2px solid #ed4a99;
}

/* .logoBg::before{
    content: '';
      display: block;
      position: fixed;
      z-index: 10000;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: linear-gradient(
  180deg, rgba(89, 215, 217, 0.25) 1px, #59d7d9 1px);
      background-size: 100% 2px;
      pointer-events: none;
      -webkit-filter: brightness(40%);
      filter: brightness(40%);
      -webkit-transition: all 1200ms;
      transition: all 1200ms;
      animation: load 2s forwards;
  } */

@keyframes load {
	100% {
		opacity: 0;
		display: none;
		z-index: -1;
	}
}

@media only screen and (min-width: 768px) {

	.wrapper,
	.wrapperBg {
		width: 90%;
		max-width: 1400px;
	}

	.glitch {
		font-size: 2.8em;
	}

	.titleLine::after {
		bottom: 24px;
		right: -124px;
		width: 80px;
		height: 4px;
	}

	.titleLine::before {
		height: 64px;
		right: -24px;
		bottom: -28px;
		border-right: 4px solid #f7ff00;
	}

	h2 {
		/*height: 44px;
		background-image: url(../img/renewal/title_pad.png);*/
	}

}

@media only screen and (min-width: 900px) {

	h2 {
		height: 52px;
		background-image: url(../img/renewal/title_pc.png);
	}

}

@media only screen and (min-width: 1020px) {

  .backBtn{
    max-width: 1280px;
    background-size: 2%;
    border-radius: 1.5rem;
    padding: 1rem 0;
  }

}