@charset "utf-8";
/* CSS Document */

.mvCatch{
    mix-blend-mode: screen;
    width: 447px;
    width: 31.9285714286vw;
    top: 24vw;
}



/* topMes
   ----------------------------------------------------------------- */
.topMes::after{
	content: "";
	width: 50%;
	height: 100%;
	background : #121235;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
.topMes .inner div:first-of-type p{transform: rotate(0.25turn); color: #525263;border: #525263 solid 1px; padding: 15px 20px;display: inline-block;letter-spacing: 0.7em;}
.topMes .inner h2::before{
	content: "";
	position: absolute;
	background-color: #2e2e93;
	width: 60px;
	height: 5px;
	top: -30px;
}
.topMes .more{left: 90%;}

/* topCon1,topCon2,topCon3
   ----------------------------------------------------------------- */
.topCon1 .inner h2 span,.topCon2 .inner h2 span,.topCon3 .inner h2 span{font-size: 65px;}
.topCon1 .inner h2,.topCon2 .inner h2,.topCon3 .inner h2,.topNews .inner h2{letter-spacing: 0.5em;}
.topCon1 .inner h2::before,.topCon2 .inner h2::before,.topCon3 .inner h2::before,.topNews .inner h2::before{content: "";	background-color: #2e2e93;width: 100px;height: 5px; position: absolute;bottom: 28px;left: -50px;z-index: -1;}
.topCon1::after,.topCon2::after,.topCon3::after{content: "";background : #121235;position: absolute;	z-index: -2;}

/* topCon1
   ----------------------------------------------------------------- */

.topCon1 .inner div div:first-of-type{width: 50%; padding: 0px 100px 0px 0px;}
.topCon1 .inner div div:last-of-type{width: 50%; padding: 100px 0px 0px 100px; }
.topCon1::after{top: 50px;left: 0;width: 50%;height: 60%;}

/* topCon2
   ----------------------------------------------------------------- */
.topCon2 .inner div:first-of-type{width: 50%; }
.topCon2 .inner div:last-of-type{width: 50%; padding: 100px 100px 0px 100px; }
	.topCon2 .inner figure{padding-left: 100px;}
.topCon2::after{top: 50px;right: 0;width: 50%;height: 65%;}

/* topCon2
   ----------------------------------------------------------------- */
.topCon3 .inner h2{margin-left: -100px;}
.topCon3 .inner div div:first-of-type{width: 30%;}
.topCon3 .inner div div:last-of-type{width: 70%; padding: 100px 0px 0px 200px; }
.topCon3::after{top: 0px;left: 0;width: 30%;height: 60%;}

/* topNews
   ----------------------------------------------------------------- */
.topNews .inner .box a div:first-of-type{
	color: #4444ae;
}
.topNews .inner .box a{
	border-bottom: 1px solid #121235;
	padding: 30px 30px;
	    opacity: 1;
    transition: transform .9s cubic-bezier(.08,.92,.35,1),opacity .6s;
	position: relative;
}
.topNews .inner .box a::before {
    z-index: -1;
    transform: scaleX(.97);
    transition: .3s;
	content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background:
#525263;
opacity: 0;
}
.topNews .inner .box a:hover::before {
    opacity: .12;
    transform: scaleX(1.00);
    transition: transform .7s cubic-bezier(.08,.92,.35,1),opacity .7s;
}
.topNews .more{ margin: 20px 0px 0px auto;}
/* =====================
  Vegas
===================== */
#vegas{width: 100%; height: 600px;}
.vegas-timer-progress{background: #2e2e93!important;}

@keyframes kenburns {
    0% {
        transform: scale(1.5) rotate(0.1deg);
    }
    100% {
        transform: scale(1) rotate(0.1deg);
    }
}

/* ---------- 1000px以下 ---------- */
@media screen and (max-width: 1200px){
	.topMes .more {left: 80%;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#vegas{height: 500px;}
	.mvCatch{top: 250px;}
.topCon1 .inner h2::before, .topCon2 .inner h2::before, .topCon3 .inner h2::before, .topNews .inner h2::before{bottom: 19px; height: 3px;}
	.topCon1 .inner div div:first-of-type{padding: 0px 5% 0px 0px;}
	.topCon1 .inner div div:last-of-type{padding: 5% 0px 0px 5%;}
	.topCon2 .inner div:last-of-type{padding: 5% 5% 0px 5%;}
	.topCon2 .inner figure{padding-left: 5%;}
	.topCon3 .inner div div:last-of-type{padding: 5% 0px 0px 5%;}
	.topNews h2{margin-left: 5%;}
	
}
/* ---------- スマホ ---------- */
@media screen and (max-width : 667px ){
#vegas{height: 300px;}
.mvCatch{
    width: 220px;
	top: 50%;
}
#vegas img{	width: 220px;}
.topCon1 .inner h2::before, .topCon2 .inner h2::before, .topCon3 .inner h2::before, .topNews .inner h2::before{display: none;}
.topCon1 .inner h2 span, .topCon2 .inner h2 span, .topCon3 .inner h2 span{font-size: 45px;}
	.topCon1 .inner div div:first-of-type{margin: 0 auto; padding: 0px;}
	.topCon1 .inner div div:last-of-type{width:100%; padding: 10% 5% 0px 5%;}
	.topCon2 .inner div:first-of-type{width: 100%;}
	.topCon2 .inner div:first-of-type h2{margin:0px 0px 100px 0px;}
	.topCon2 .inner div:last-of-type{width: 100%; }
	.topCon3 .inner div div:first-of-type{width: 70%; margin: 0 auto;}
	.topCon3 .inner div div:last-of-type{width: 100%; padding: 5% 5% 0px 5%;}
	.topNews h2{margin-bottom: 30px;}
	.topNews .inner .box a{padding: 30px 10px;}
	
	.topMes .more{left: 0;}
.topNews .more{ margin: 20px auto 0px 0px;}
}