@charset "utf-8";

img{max-width: 100%; height: auto;}




.contents{
	width: calc(100vw - 20%);
	margin-left: auto;
	padding-right: 30px;
	padding-top: 220px;
	padding-bottom: 100px;
	box-sizing: border-box;
}
.main{
	width: calc(100% - 0px);
	height: calc(100vh - 220px);
	background-size:cover;
	background-position: center bottom;
	margin-left: auto;
	border-bottom: 20px solid #FFF;
	box-sizing: border-box;
}
.top .eight {
    width: 66%;
    margin: 60px auto 70px;
}

.top .banner{
	width: 66%;
	margin: 0px auto 0;
}
.top .eight a:hover img,
.top .banner a:hover img{
	opacity: 0.8;
}
@media screen and (min-width:900px) {
	.top .eight a img,
	.top .banner a img{
		transition: all 0.5s ease;
	}
	.top .eight a:hover img,
	.top .banner a:hover img{
		transform: scale(1.1);
	}
}
@media screen and (max-width:1270px) {
	.contents{
		padding-top: 200px;
	}
	.main{
		height: calc(100vh - 200px);
	}
}
@media screen and (max-width:1200px) {
	.contents{
		padding-top: 190px;
	}
	.main{
		height: calc(100vh - 190px);
	}
}
@media screen and (max-width:1070px) {
	.contents{
		padding-top: 130px;
	}
	.main{
		height: calc(100vh - 130px);
	}
}
@media screen and (max-width:950px) {
	.contents{
		padding-top: 130px;
	}
	.main{
		height: calc(100vh - 130px);
	}
}
@media screen and (max-width:900px) {
	.contents{
		width: calc(100vw - 28px);
		margin-left: auto;
		margin-right: auto;
		padding-right: 0px;
		padding-top: 150px;
		padding-bottom: 60px;
		box-sizing: border-box;
	}
	.main {
		height: calc(100vh - 64vw);
	}
	.top .eight{
		width: calc(100% - 40px);
    	margin: 60px auto 10vw;
	}
	.top .banner{
		width: calc(100% - 40px);
		margin: 0px auto 0;
	}
}

/*
.main h1 span{
	display: block;
    animation: 5.5s Roll ease-in-out infinite;
}
.main h1 img{
    animation: FloatHorizontal 7.0s ease-in-out infinite alternate;
}
@keyframes Roll {
    0% { transform: rotateZ(15deg) scale(0.9); }
    50% { transform: rotateZ(-15deg) scale(1.0); }
    100% { transform: rotateZ(15deg) scale(0.9); }
}
 
@keyframes FloatHorizontal {
    0% { transform:translate3d(2.5vw,0,0); }
    50% { transform:translate3d(-2.5vw,0,0); }
    100% { transform:translate3d(2.5vw,0,0); }
}
 
@keyframes FloatVertical {
    0% { transform:translate3d(0,2.5vw,0); }
    50% { transform:translate3d(0,-2.5vw,0); }
    100% { transform:translate3d(0,2.5vw,0); }
}

/*
.fuwafuwa {
-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 3s infinite linear alternate;
}
@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}
@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-5deg);}
50% {transform:translate(0, -5px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}
}
*/
.under .contents{
	padding-top: 0px;
	max-width: 1200px;
}
.under .contents h2{
	height: 180px;
	padding: 60px 0 60px;
	box-sizing: border-box;
}
.profile .contents h2{
	height: 190px;
}
.under .contents h2 img{
	height: 100%;
	display: block;
	margin: 0 auto;
}

.disco .contents ul{
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
}
.disco .contents ul li{
	width: calc(33% - 30px);
	margin-right: 45px;
	margin-bottom: 50px;
}
.disco .contents ul li:nth-child(3n){
	margin-right: 0px;
}
@media screen and (max-width:1100px) {
	.disco .contents ul li{
		width: calc(50% - 20px);
		margin-right: 40px;
	}
	.disco .contents ul li:nth-child(3n){
		margin-right: 40px;
	}
	.disco .contents ul li:nth-child(2n){
		margin-right: 0;
	}
}
@media screen and (max-width:900px) {
	.disco .contents ul li{
		width: calc(50% - 10px);
		margin-right: 20px;
		margin-bottom: 30px;
	}
	.disco .contents ul li:nth-child(3n){
		margin-right: 20px;
	}
	.disco .contents ul li:nth-child(2n){
		margin-right: 0;
	}
	.disco .contents ul li p{
		font-size: 13px;
	}
	.under .contents{
		padding-top: 60px;
	}
	.under .contents h2 img {
		height: 50px;
	}
}

.video .contents ul{
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
}
.video .contents ul li{
	width: calc(50% - 10px);
	margin-right: 20px;
	margin-bottom: 50px;
}
.video .contents ul li:nth-child(2n){
	margin-right: 0;
}
@media screen and (max-width:900px) {
	.video .contents ul li{
		margin-bottom: 30px;
	}
}
	



.profile .contents > ul li{
	display: flex;
	margin-bottom: 30px;
}
.profile .contents > ul li:first-child div.pic{
	width: 60%;
}
.profile .contents > ul li:nth-of-type(2) div.pic{
	width: 56%;
}
.profile .contents > ul li:last-child div.pic{
	width: 48%;
	margin-left: 60px;
}
.profile .contents > ul li .data{
	font-weight: normal;
	box-sizing: border-box;
	position: relative;
}
.profile .contents > ul li:first-child .data{
	margin-top: 100px;
	left: -70px;
}
.profile .contents > ul li:nth-of-type(2) .data{
	margin-top: 70px;
	right: -70px;
}
.profile .contents > ul li:last-child .data{
	margin-top: 100px;
	left: -50px;
	height: auto;
}
.profile .contents .data h3{
	font-weight: bold;
	letter-spacing: 5px;
	font-size: 40px;
	line-height: 100%;
	background: #FFF;
	padding: 40px 40px;
	padding-bottom: 15px;
}
.profile .contents .data p{
	background: #FFF;
	padding: 40px 40px;
	padding-top: 15px;
}
@media screen and (max-width:1510px) {
	.profile .contents > ul li:first-child div.pic{width: 70%;}
	.profile .contents > ul li:nth-of-type(2) div.pic{width: 66%;}
	.profile .contents > ul li:last-child div.pic{width: 58%;}
}
@media screen and (max-width:1430px) {
	.profile .contents > ul li:first-child div.pic{width: 80%;}
	.profile .contents > ul li:nth-of-type(2) div.pic{width: 76%;}
	.profile .contents > ul li:last-child div.pic{width: 68%;}
}
@media screen and (max-width:1300px) {
	.profile .contents .data h3{
		font-size: 30px;
		padding: 30px 30px;
		padding-bottom: 10px;
	}
	.profile .contents .data p{
		padding: 30px 30px;
		padding-top: 10px;
	}
}
@media screen and (max-width:1200px) {
	.profile .contents > ul li:first-child div.pic{width: 100%;}
	.profile .contents > ul li:nth-of-type(2) div.pic{width: 96%;}
	.profile .contents > ul li:last-child div.pic{width: 88%;}
}
@media screen and (max-width:1100px) {
	.profile .contents > ul li:first-child div.pic{
		width: calc(100% + 0px);
		margin-bottom: 50px;
	}
	.profile .contents > ul li:nth-of-type(2) div.pic{
		width: calc(110% + 0px);
		margin-bottom: 70px;
	}
	.profile .contents > ul li:first-child .data{
		margin-top: 60px;
		width: calc(500px + 100px);
	}
	.profile .contents > ul li:nth-of-type(2) .data{
		margin-top: 40px;
		width: calc(500px + 200px);
	}
	.profile .contents .data h3{
		padding: 20px 20px;
		padding-bottom: 10px;
	}
	.profile .contents .data p{
		padding: 20px 20px;
		padding-top: 10px;
	}
}
@media screen and (max-width:720px) {
	.profile .contents .data h3{
		font-size: 25px;
	}
	.profile .contents > ul li{
		position: relative;
	}
	.profile .contents > ul li div.pic{
		position: absolute;
	}
	.profile .contents > ul li:first-child div.pic{
		margin-bottom: 0px;
	}
	.profile .contents > ul li:nth-of-type(2) div.pic{
		width: calc(100% - 40px);
		margin-bottom: 0px;
		right: 0;
	}
	.profile .contents > ul li:last-child div.pic{
		width: calc(70% + 0px);
		margin-left: 0;
	}
	.profile .contents > ul li:first-child .data{
		margin-top: 56%;
		width: calc(100% - 40px);
		left: auto;
		margin-left: auto;
	}
	.profile .contents > ul li:nth-of-type(2) .data{
		margin-top: 60%;
		width: calc(100% - 30px);
		right: 0;
		z-index: 1;
	}
	.profile .contents > ul li:last-child .data{
		margin-top: 70%;
		width: calc(100% - 30px);
		left: auto;
		margin-left: auto;
	}
}