@charset "UTF-8";
html{
	overflow-x: hidden;
}
.sec-til{
	color: #fff;
	width: 100%;
	font-size: 1.5rem;
	position: relative;
}
.sec-til:after{
	background-color: #70FF11;
	width: 40vw;
	height: 0.6vh;
	top: 1.8rem;
	left: 0;
	position: absolute;
	content: '';
}
.glidul{
    max-width: 1680px;
    width: 100%;
    position: absolute;
    top: 2vw;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,24vw);
    column-gap: 2vw;
    padding-left: 6vw;
    padding-right: 6vw;
}
.glidul img{
    width: 75%;
}
.gitems{
    text-align: center;
}
.hov{
    transition: 0.4s;
}
.gl-i1{
    grid-column: 1/2;
    grid-row: 1/2;
}
.gl-i2{
    grid-column: 2/3;
    grid-row: 1/2;
}
.gl-i3{
    grid-column: 3/4;
    grid-row: 1/2;
}
.gl-i4{
    grid-column: 1/2;
    grid-row: 2/3;
}
.gl-i5{
    grid-column: 2/3;
    grid-row: 2/3;
}
.gl-i6{
    grid-column: 3/4;
    grid-row: 2/3;
}
.hov:hover{
    transform: scale(1.5);
}
/*tabの形状*/
.board-wrapper{
	max-width: 1680px;
	margin: 0 auto 10vh auto;
	position: relative;
	width: 100%;
	text-align: center;
}
.board-wrapper>img{
    position: relative;
}
.bira{
	height: auto;
	width: 100%;
}
.bira.active{
	animation-name:board-bg-move;
	animation-duration: 2s;
    animation-fill-mode: forwards;
}
.board-content.righttop{
	transform: rotate(5deg);
}
.board-content.top{
	transform: rotate(0deg);
}
.board-content.lefttop{
	transform: rotate(352deg);
}
.board-content.rightbottom{
	transform: rotate(352deg);
}
.board-content.bottom{
	transform: rotate(5deg);
}
.board-content.leftbottom{
	transform: rotate(5deg);
}
.board-content{
	max-width: 150px;
	height: 220px;
}
.board-content.active{
	animation-neme:board-text-move;
	max-width: 150px;
	height: 220px;
}
@keyframes board-bg-move{
	from {
		background-position: center;
		position: relative;;
	}
	to {
		background-position: center;
		position: relative;
		transform: scale(2);
		z-index: 50;
	}
}
@keyframes board-text-move{
	0%{
		transform: scale(1);
	}
	100%{
		transform: scale(1.2);
	}
}
.about{
	color: #E8FF24;
	font-size: 2rem;
	max-width: 1000px;
	min-width: 290px;
	width: 30vw;
	text-align: center;
	margin: 0 auto;
}
.about-p{
	color: #fff;
	font-size: 0.9rem;
	min-width: 375px;
	width: 45vw;
	margin: 0 auto;
}
.about-bg{
	min-width: 375px;
	width: 45vw;
	text-align: center;
	margin: 0 auto 10vh auto;
	background-image: url("../images/index/about-bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.ranking{
	margin-bottom: 10vh;
}