@charset "utf-8";
/* CSS Document */
#video{height: 100vh; overflow: hidden;}
video{height: 100vh;}
#video::after{
content: "";
/*background-color: #0000006e;*/
background-image: radial-gradient(#222121 30%, transparent 0), radial-gradient(#222121 30%, transparent 0);
background-image: -webkit-radial-gradient(#222121 30%, transparent 0), radial-gradient(#222121 30%, transparent 0);
background-image: -moz-radial-gradient(#222121 30%, transparent 0), radial-gradient(#222121 30%, transparent 0);
background-image: -ms-radial-gradient(#222121 30%, transparent 0), radial-gradient(#222121 30%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 3px 3px;
position: absolute;
z-index: 99;
width: 100%;
height: 100vh;
top: 0px;
left: 0px;
}
#mainVisua .scrolldown{
	right: 0;
	left: 0;
	margin: auto;
	bottom: 0;
	z-index: 999;
}
#mainVisua .scrolldown span{
	width: 1px;
	height: 50px;
	background-color: rgb(106, 104, 104);
}
#mainVisua .scrolldown span::before{
	width: 100%;
	background-color: #fff;
	left: 0;
	animation: line 4s ease 0s infinite;
}
@keyframes line {
	0% {
		bottom: 100%;
		height: 0;
	}
	20% {
		bottom: 0;
		height: 100%;
	}
	40% {
		bottom: 0;
		height: 0;
	}
	100% {
		bottom: 0;
		height: 0;
	}
}

.mvCatch{
    mix-blend-mode:screen;
    width: 447px;
	z-index: 100;
}
.topMes{
	background-image: url("../img/topMes.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;		
}

/* topCon1
   ----------------------------------------------------------------- */
#topCon1 .conTitle{padding-left: 5%; padding-top: 5%; }
#topCon1 .conTitle h4 span{letter-spacing: 0.2em;}
#topCon1 .conTitle h4 span::after{background: #AD9842; width: 100px; height: 2px;position: absolute; right:-100px;top: 50%;}
#topCon1 .conText{margin-left: 5%;margin-top: -100px;}
#topCon1::after{background: #F2F1ED;position: absolute; left: 0;top: 18%; width: 100%; height: 90%;z-index: -1;}
#topCon1 .more{right: 5%; z-index: 3;}

/* topCon2
   ----------------------------------------------------------------- */
#topCon2 .conTitle{padding-left: 5%; }
#topCon2 .conTitle h4 span{letter-spacing: 0.2em;}
#topCon2 .conTitle h4 span::after{background: #AD9842; width: 100px; height: 2px;position: absolute; right:-100px;top: 50%; z-index: 5;}
#topCon2 .conText{width: 90%;}
#topCon2 .conText li{border-bottom: 1px solid #AAABAC;}
#topCon2::after{background: #F2F1ED;position: absolute; right: 0;top: 6%; width: 70%; height: 90%;z-index: -1;}
#topCon2 .more{bottom: -1%; right: 5%; z-index: 3;}

/* topCon3
   ----------------------------------------------------------------- */
#topCon3 .conTitle{padding-left: 5%; padding-top: 5%; }
#topCon3 .conTitle h4 span{letter-spacing: 0.2em;}
#topCon3 .conTitle h4 span::after{background: #AD9842; width: 100px; height: 2px;position: absolute; right:-100px;top: 50%; z-index: 5;}
#topCon3 .conText{margin-left: 5%;margin-top: -50px;}
#topCon3 .conText span{padding: 2px 8px;}
#topCon3 .conText span:empty{display: none;}
#topCon3::after{background: #F2F1ED;position: absolute; left: 0;top: 18%; width: 70%; height: 90%;z-index: -1;}
#topCon3 .more{right: 5%; bottom: -15%; z-index: 3;}




/* =====================
  topMember
===================== */
.topMember{position: relative; padding: 150px 0px;}
.topMember .swiper .swiper-slide figure{border-top: 5px solid #1d1e20; border-bottom: 5px solid #1d1e20;}
.topMember .swiper .swiper-slide h4{}
.topMember .swiper .swiper-slide span{color: #29aee2;}
.topMember .swiper .swiper-slide:nth-child(odd) span{color: #29e2d0;}
.topMember .swiper .swiper-slide p{color: #b5b5b5; font-size: 14px;}
.topMember .swiper .swiper-slide > div{
	background-color: #fff;
	position: relative;
	z-index: 2;
}
/*
.topMember .swiper .swiper-slide a{ width: 100%;height: 100%;display: block;position: relative;  z-index: 1;}
*/
.topMember .swiper .swiper-slide a figure{position: relative;}
.topMember .swiper .swiper-slide a figure::before{
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to right, #29aee2, #29b3d0);
	transform-origin: center right;
	transform: scaleX(0);
	transition: transform 0.5s ease-in-out;
	opacity: 0.7;
}

.topMember .swiper .swiper-slide a:hover figure::before{
	transform: scaleX(1);
  transform-origin: center left;
}
.topMember .swiper .swiper-slide a figure::after{
	content: 'VIEW';
	font-family: 'Roboto', sans-serif; font-weight: 900;
	color: #fff;
	letter-spacing: 0.4em;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	opacity: 0;
	transform: translate(-50%,-100%);
	  transition: transform 0.5s ease-in-out;
}
.topMember .swiper .swiper-slide a:hover figure::after{
	opacity: 1;
	transform: translate(-50%,-50%);
}
/*ここからタブレット用（1200px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 1000px){
	.mvCatch{width: 300px;}
	.topMes{padding: 0px 5%;}
	.conTitle h4{font-size: 30px;}
	#topCon1 .conText{margin-top: 50px; width: 90%!important;}
	#topCon1 .conTitle h4::after {left: 200px;}
	#topCon2::after {height: 100%;}
	#topCon2 .more {bottom: -15%;}
	#topCon2 .conTitle h4::after {left: -120px;}
	#topCon3 .conTitle h4::after{left: 230px;}
}

/*ここからタブレット用（900px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	#mainVisua .scrolldown{display: none;}
	.img-container__img{opacity: 1;}
	#video{height: auto; overflow: hidden;}
video{height: auto; width: 100%; position: static;}

}
/*ここからスマートフォン用（480px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width : 667px ){

.mvCatch{
    width: 220px;
	top: 50%;
}
	#topCon1 .conTitle{padding-bottom: 5%;}
	#topCon2 .conTitle h4::after{left: 150px;}
	#topCon3 .conTitle{padding-bottom: 5%;}

}