@charset "UTF-8";
/* auther: cee; */

#verticalheader {display: none;}
.EnableJS header,
.EnableJS #verticalheader {opacity: 0;}
.EnableJS header.On,
.EnableJS #verticalheader {opacity: 1;}
#hero.swiper-container {
min-height: 451px;
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background: #ccc;
position: relative;
}
#hero.swiper-container > p:nth-of-type(1) {
max-width: 100%;
margin: 0;
color: #2a2a2a;
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
text-align: left;
line-height: 1.3em;
word-break: break-word;
z-index: 6;
position: relative;
position: absolute;
left: 20px;
}
#hero.swiper-container > p:nth-of-type(1)::before,
#hero.swiper-container > p:nth-of-type(1)::after {
width: 0;
height: 0;
content: "";
display: block;
border: 0 solid transparent;
visibility: visible;
position: absolute;
left: 0;
top: 0;
}
#hero.swiper-container > p:nth-of-type(1)::before {
border-top-color: rgba(255,248,31,.5);
border-left-width: 30px;
border-right-width: 25px;
border-top-width: 25px;
z-index: -1;
transform: rotate(30deg);
transform-origin: 0 0;
left: -10px;
top: -15px;
animation-name: heroKv01;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes heroKv01 {
	0%,100% {
	border-left-width: 30px;
	border-right-width: 25px;
	border-top-width: 25px;
	}
	50% {
	border-left-width: 35px;
	border-right-width: 30px;
	}
}
#hero.swiper-container > p:nth-of-type(1)::after {
border-top-color: rgba(255,248,31,.4);
border-left-width: 35px;
border-right-width: 30px;
border-top-width: 30px;
z-index: -1;
transform: rotate(10deg);
transform-origin: 50% 20%;
left: -20px;
top: 0;
animation-name: heroKv02;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes heroKv02 {
	0%,100% {
	border-left-width: 35px;
	border-right-width: 30px;
	border-top-width: 30px;
	transform: rotate(20deg);
	}
	50% {
	border-left-width: 30px;
	border-right-width: 25px;
	border-top-width: 25px;
	transform: rotate(-20deg);
	}
}

#hero .swiper-slide {
min-height: 451px;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
z-index: 1;
position: relative;
}
#hero .swiper-slide::before {
height: 100%;
width: 100%;
content: "";
display: block;
z-index: -1;
position: absolute;
left: 0;
top: 0;
}
#hero .box {
margin: auto 0;
overflow: visible;
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
}
#hero .box h2 {
max-width: 9em;
padding: 0 0 20px;
color: #fff;
font-size: 90px;
font-weight: 700;
text-align: left;
text-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);
text-transform: none;
line-height: 1em;
word-break: break-word;
z-index: 6;
}
#hero .box h2 span {
padding: 7px 0;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
font-size: 22px;
line-height: 1.4em;
display: block;
}
@media all and (-ms-high-contrast: none) {
	#hero .box h2 span {font-family: '游明朝', 'Yu Mincho', 'YuMincho', 'HGS明朝E', 'メイリオ', 'Meiryo', serif;}
}
#hero .box h2 small {
padding: 0 2px 0 7px;
font-size: 60%;
}
#hero .box .button {
margin: 0;
z-index: 6;
font-weight: 400;
}
#hero .hero_slideTypeA::before {
background: url(/jpn/images/top/hero01_bg.png) repeat center center;
opacity: .4;
}
#hero .hero_slideTypeA .box::before,
#hero .hero_slideTypeA .box::after {
width: calc(100vw + 70px);
height: 50vh;
content: "";
z-index: -1;
display: block;
visibility: visible;
position: absolute;
left: -35px;
}
#hero .hero_slideTypeA .box::before {background: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,1));}
#hero .hero_slideTypeA .box::after {background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,1));}
#hero .hero_slideTypeA .box h2 {
padding-bottom: 40px;
font-weight: 900;
line-height: 1.35em;
}
#hero .hero_slide11 {
background: #000 url(../images/top/hero11.jpg) no-repeat;
background-size: auto 100%;
}
#hero .hero_slide11 .box {
max-width: 80vw;
min-width: 220px;
min-height: 180px;
width: 40vh;
height: 40vh;
margin: auto;
padding-top: 0;
left: 0;
right: 0;
}
#hero .hero_slide11 h2 {
max-width: 120%;
width: 120%;
height: 100%;
margin-left:  -10%;
background: url(../images/top/hero11_RAPIDE-NEO.svg) no-repeat center center;
background-size: contain;
background-origin: content-box;
}
#hero .hero_slide11 .button {
width: 84%;
margin: 0 auto;
}
#hero .hero_slide10 {
background: #acb6c7 url(../images/top/hero10_bg.jpg) repeat-x center top;
background-size: cover;
}
#hero .hero_slide10::before {
background: url(../images/top/hero10_01.png) no-repeat left bottom;
background-size: contain;
opacity: 1;
}
#hero .hero_slide10::after {
height: 100%;
width: 100%;
content: "";
background: url(../images/top/hero10.png) no-repeat left bottom;
background-size: contain;
display: block;
z-index: -1;
position: absolute;
left: 35%;
bottom: 0;
}
#hero .hero_slide10 .box {
position: relative;
z-index: 2;
}
#hero .hero_slide10 h2 {
width: 100%;
background: url(../images/top/hero10_VZ.png) no-repeat center top;
background-size: contain;
}
#hero .hero_slide10 .box p:first-of-type {
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
line-height: 1.5em;
text-align: center;
}
@media all and (-ms-high-contrast: none) {
	#hero .hero_slide10 .box p:first-of-type {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}
#hero .hero_slide10 .box .button {
background-color: rgba(120,30,30,1);
border-color: rgba(130,60,60,1);
}
#hero .hero_slide10 .box .button::before {background: rgba(20,0,0,.2);}
#hero .hero_slide10 .box .button a {box-shadow: 0 -15px 15px 3px rgba(84,0,0,.5) inset;}
#hero .hero_slide10 .box .button a:hover {box-shadow: 0 10px 15px 3px rgba(44,0,0,.3) inset;}
#hero .hero_slide09 {
background: #040821 url(../images/top/hero09_bg.jpg) repeat-x center bottom;
background-size: cover;
}
#hero .hero_slide09::before {
background: url(../images/top/hero09.png) no-repeat center bottom;
background-size: contain;
}
#hero .hero_slide09 > p {
margin: auto;
content: '';
background: url(../images/top/hero09_copy.png) no-repeat;
background-size: contain;
display: block;
position: absolute;
z-index: -1;
}
#hero .hero_slide09 h2 {
color: #a7adae;
text-align: center;
font-family: 'Noto sans';
background: url(../images/top/hero09_XD.png) no-repeat;
background-size: contain;
}
#hero .hero_slide08 {
color: #fff;
background: url(../../astralx/images/kv.jpg) no-repeat left top;
background-size: cover;
}
#hero .hero_slide08 .box {
margin: auto;
text-align: center;
right:0;
left: 0;
}
#hero .hero_slide08 .box p,
#hero .hero_slide08 .box #astralx_present {font-family: 'Noto Sans JP', sans-serif;}
@media all and (-ms-high-contrast: none) {
	#hero .hero_slide08 .box p,
	#hero .hero_slide08 .box #astralx_present {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}
#hero .hero_slide08 .box p {text-align: center;}
#hero .hero_slide08 .box p:nth-of-type(-n+2) {
margin: 0 0 20px;
position: relative;
}
#hero .hero_slide08 .box p:nth-of-type(1) {
margin-bottom: 10px;
font-weight: 600;
}
#hero .hero_slide08 .box p:nth-of-type(1)::after {
content: '';
background: url(../../astralx/images/img.png) no-repeat right top;
background-size: contain;
position: absolute;
z-index: -1;
transform: rotate(45deg);
}
#hero .hero_slide08 .box h2 {
max-width: 100%;
margin: 0 auto 20px;
text-align: right;
text-shadow: none;
background: url(../../astralx/images/logo.png) no-repeat center top;
background-size: contain;
}
#hero .hero_slide08 #astralx_present {
width: 100%;
margin: 0 auto 2px;
font-weight: 600;
text-align: left;
text-shadow: rgba(0,0,0,1) 1px 1px 1px;
position: relative;
}
#hero .hero_slide08 #astralx_present span {
margin: 0 0 0 -10px;
color: #fff;
display: block;
}
#hero .hero_slide08 #astralx_present span::before {
width: 100px;
height: 100px;
content: '';
background: url(../../astralx/images/present_mark.png) no-repeat 0 0;
background-size: cover;
display: block;
position: absolute;
left: -35px;
top: -23px;
z-index: -1;
}
#hero .hero_slide08 #astralx_present span::after {
width: 100%;
height: 30px;
margin: 2px 0 0;
content: '';
background: url(../../astralx/images/present_text.png) no-repeat 0 0;
background-size: contain;
display: block;
position: relative;
z-index: 10;
}
#hero .hero_slide08 .box .button {margin: 0 auto;}
#hero .hero_slide07 {
background: #040821 url(../images/top/hero07_bg.jpg) repeat-x left bottom;
background-size: cover;
}
#hero .hero_slide07::before {
background: url(../images/top/hero07.png) no-repeat right bottom;
background-size: contain;
}
#hero .hero_slide07 h2 {
width: 430px;
height: 220px;
margin-bottom: 25px;
background: url(../images/top/hero07_Xseries.png) no-repeat center top;
background-size: contain;
}
#hero .hero_slide07 .button {margin-left: 20px;}
#hero .hero_slide01 {
background: #666 url(../images/top/hero01.jpg) no-repeat center center;
background-size: cover;
}
#hero .hero_slide01 h2 {font-family: 'Noto Sans JP', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
@media all and (-ms-high-contrast: none) {
	#hero .hero_slide01 h2 {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}
#hero .hero_slide02 {background: #fff;}
#hero .hero_slide02::before {
margin: 180px 0 0;
background: url(../images/top/hero02.jpg) no-repeat 4vw 50%;
background-size: cover;
}
#hero .hero_slide02 .box {
padding-top: 10px;
position: relative;
}
#hero .hero_slide02 h2 {
color: #000;
font-family: 'Roboto', sans-serif;
text-shadow: none;
}
#hero .hero_slide03 {
background: #ccc url(../images/top/hero03.jpg) no-repeat center top;
background-size: cover;
}
#hero .hero_slide03 .box {
height: auto;
top: auto;
bottom: 60px;
}
#hero .hero_slide03 h2 {font-family: 'Roboto', sans-serif;}

#hero .hero_slide04 {
background: #ccc url(../images/top/hero04.jpg) no-repeat center top;
background-size: cover;
}
#hero .hero_slide04 h2 {max-width: 100%;}
#hero .hero_slide05 {
background: #000 url(../images/top/hero05.jpg) no-repeat right bottom;
background-size: contain;
}
#hero .hero_slide05 .box {
padding-top: 50px;
position: relative;
}
#hero .hero_slide05 h2 {font-family: 'Roboto', sans-serif;}
#hero .hero_slide06 {
background: #ccc url(../images/top/hero06_bg.jpg) repeat-x left bottom;
background-size: contain;
}
#hero .hero_slide06::before {
background: url(../images/top/hero06.png) no-repeat left bottom;
background-size: cover;
}
#hero .hero_slide06 .box {
width: calc(100% - 20px);
height: 100%;
top: 0;
bottom: 0;
}
#hero .hero_slide06 h2 {
max-width: 100%;
height: calc(100% - 20px - 50px - 60px);
margin: 20px 0 0;
padding: 0;
background: url(../images/top/hero06_VECTOR-X.png) no-repeat center center;
background-size: contain;
}

#hero .button_next {
width: 100%;
height: 30px;
display: block;
z-index: 10;
position: absolute;
bottom: 0;
}
#hero .button_next img {display: none;}
#hero .button_next span {
width: 140px;
height: 30px;
margin: 0 auto;
content:"";
background: linear-gradient(0deg, rgba(73, 190, 226, 0.85), rgba(44, 177, 231, 0.85));
border-top: 1px solid rgba(255, 255, 255, .3);
box-shadow: 0 1px 10px 2px rgba(0, 0, 0, .2);
opacity: .8;
position: relative;
display: block;
transition: .2s ease-in;
}
#hero .button_next:hover span {opacity: 1;}
#hero .button_next span::before,
#hero .button_next span::after {
width: 56px;
height: 1px;
margin: 0 auto;
content:"";
visibility: visible;
background: #fff;
display: block;
z-index: 11;
position: absolute;
left: 0;
right: 0;
bottom: 5px;
}
#hero .button_next span::before {
transform-origin: right bottom;
transform: translate(-50%,0) rotate(16deg);
}
#hero .button_next span::after {
transform-origin: left bottom;
transform: translate(50%,0) rotate(-16deg);
}

@media all and (min-width:995px) {
	#verticalheader {
	width: 227px;
	transform: translate(227px,0);
	transition: transform .3s ease;
	display: block;
	}
	.verticalHeader #verticalheader {
	transform: translate(0,0);
	transition: transform .3s ease;
	}
	#verticalheader::after {
	height: 0;
	content: '.';
	visibility: hidden;
	display: block;
	clear: both;
	}
	#verticalheader h1 {
	padding: 15px 0;
	background: rgba(44, 177, 231, 0.85);
	}
	#verticalheader h1 a {
	width: 100%;
	height: 85px;
	background-image: url(/jpn/images/common/logo.png);
	}
	#verticalheader ul:nth-of-type(1) li:nth-of-type(7) span::after {content: '・Recruit'}
	#verticalheader ul:nth-of-type(2) {
	width: 144px;
	margin: 0 auto;
	bottom: -36px;
	}
	#verticalheader ul:nth-of-type(2) a {
	height: 30px;
	margin: 0 5px;
	}
	#verticalheader ul:nth-of-type(2) li:nth-of-type(1) a {width: 29px;}
	#verticalheader ul:nth-of-type(2) li:nth-of-type(2) a {width: 36px;}
	#verticalheader ul:nth-of-type(2) li:nth-of-type(3) a {width: 49px;}
	#hero.swiper-container > p:nth-of-type(1) {top: 20px;}
	#hero .swiper-slide {padding: 45px 35px;}
	#hero .box {
	height: 337px;
	padding-top: 0;
	}
	#hero .box::before {bottom: calc(337px + 40px);}
	#hero .box::after {top: calc(337px + 40px + 18px + 25px);}
	#hero .box h2 {font-size: 80px;}
	#hero .box .button:hover a {line-height: 62px;}
	#hero .hero_slide10::before {
	width: 50%;
	left: 10%;
	}
	#hero .hero_slide10 .box {
	width: 330px;
	padding-top: 50px;
	}
	#hero .hero_slide10 .box p:first-of-type {margin-bottom: 20px;}
	#hero .hero_slide10 h2 {height: 130px;}
	#hero .hero_slide09 > p {
	width: 100%;
	max-height: 640px;
	height: 70%;
	background-position: center center;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	#hero .hero_slide09 .box {
	height: auto;
	top: auto;
	bottom: 40px;
	}
	#hero .hero_slide09 .box h2 {
	max-width: 100%;
	width: 340px;
	height: 140px;
	background-position: left top;
	}
	#hero .hero_slide06 .box {
	width: calc(100% - 227px);
	margin: auto;
	padding: 0;
	left: 0;
	right: 0;
	}
	#hero .hero_slide06 .box h2 {
	height: calc(100% - 60px - 90px);
	margin-top: 60px;
	margin-bottom: -20px;
	background-position: left top;
	position: relative;
	z-index: 10;
	}
	#hero .hero_slide06 .box .button {margin: 0 0 0 10px;}
	#hero .hero_slide04 .box {height: 258px;}
	#hero .hero_slide04 .box::before {bottom: calc(258px + 40px);}
	#hero .hero_slide04 .box::after {top: calc(258px + 40px + 18px + 25px);}
	#hero .hero_slide04 .box h2 {font-size: 60px}
}
@media all and (max-width:994.9px) {
	#hero.swiper-container > p:nth-of-type(1) {top: 74px;}
	#hero .swiper-slide {padding: 94px 20px 10px;}
	#hero .box {
	height: 298px;
	padding-top: 88px;
	}
	#hero .box h2 span {font-size: 17px;}
	#hero .box .button:hover a {line-height: 52px;}
	#hero .hero_slideTypeA .box::before {bottom: calc(248px - 64px - 24px + 20px);}
	#hero .hero_slideTypeA .box::after {top: calc(248px + 10px + 20px);}
	#hero .hero_slideTypeA .box h2 {
	padding-bottom: 20px;
	font-size: 37px;
	}
	#hero .hero_slideTypeB .box h2 {font-size: 50px;}
	#hero .hero_slide10::before {
	width: 70%;
	left: -5%;
	}
	#hero .hero_slide10 .box {
	width: 300px;
	padding-top: 15px;
	}
	#hero .hero_slide10 .box p:first-of-type {margin-bottom: 10px;}
	#hero .hero_slide10 h2 {height: 110px;}
	#hero .hero_slide09 p:nth-of-type(2) {
	width: 120px;
	height: calc(100vh - 140px);
	min-height: 300px;
	background-position: left top;
	top: 110px;
	left: 10px;
	}
	#hero .hero_slide09 .box {
	width: 280px;
	height: 100%;
	padding: 0;
	right: 10px;
	top: 100px;
	bottom: auto;
	}
	#hero .hero_slide09 .box h2 {
	width: 280px;
	height: 110px;
	}
	#hero .hero_slide08 .box {padding-top: 30px;}
	#hero .hero_slide02 {min-height: 700px;}
	#hero .hero_slide02::before {background-position: 22% 50%;}
	#hero .hero_slide02 .box h2 span {font-size: 20px;}
	#hero .hero_slide07 .box {
	left: 0;
	top: 35px;
	bottom: auto;
	}
	#hero .hero_slide07 .box h2 {
	width: 320px;
	height: 170px;
	background-size: 320px auto;
	}
}
@media all and (min-width:540px) {
	#hero .box {
	height: 298px;
	padding-top: 88px;
	}
	#hero .box h2 span {font-size: 17px;}
	#hero .box .button:hover a {line-height: 52px;}
	#hero .hero_slideTypeA .box::before {bottom: calc(248px - 64px - 24px + 30px);}
	#hero .hero_slideTypeA .box::after {top: calc(248px + 10px + 20px);}
	#hero .hero_slideTypeA .box h2 {
	padding-bottom: 20px;
	font-size: 37px;
	}
	#hero .hero_slideTypeB .box h2 {font-size: 50px;}
	#hero .hero_slide11 {background-position: center top;}
	#hero .hero_slide10::before {
	width: 70%;
	left: -5%;
	}
	#hero .hero_slide10 .box {
	width: 300px;
	padding-top: 15px;
	}
	#hero .hero_slide10 .box p:first-of-type {margin-bottom: 10px;}
	#hero .hero_slide10 h2 {height: 110px;}
	#hero .hero_slide09 > p {
	width: 120px;
	height: calc(100vh - 140px);
	min-height: 300px;
	background-position: left top;
	top: 110px;
	left: 10px;
	}
	#hero .hero_slide08 .box {
	width: 500px;
	height: 297px;
	padding-top: 30px;
	}
	#hero .hero_slide08::before {background: rgba(0,0,0,.2);}
	#hero .hero_slide08 .box p:nth-of-type(-n+2) {line-height: 1.75em;}
	#hero .hero_slide08 .box p br:nth-of-type(1) {display: none;}
	#hero .hero_slide08 .box p:nth-of-type(1)::after {
	width: 120px;
	height: 120px;
	right: -45px;
	top: -55px;
	}
	#hero .hero_slide08 .box h2 {
	padding: 3px 98px 55px 0;
	font-size: 14px;
	}
	#hero .hero_slide08 #astralx_present {max-width: 350px;}
	#hero .hero_slide02 {min-height: 700px;}
	#hero .hero_slide02::before {background-position: 22% 50%;}
	#hero .hero_slide02 .box h2 span {font-size: 20px;}
	#hero .hero_slide07 .box {
	left: 0;
	top: 35px;
	bottom: auto;
	}
	#hero .hero_slide07 .box h2 {
	width: 320px;
	height: 170px;
	background-size: 320px auto;
	}
	.EnableJS header {
	width: 100%;
	transform: translate(0,-64px);
	transition: transform .3s linear;
	}
	.EnableJS .wideHeader header.On {
	transform: translate(0,0);
	transition: transform .3s linear;
	}
}
@media all and (max-width:540px) {
	#hero .hero_slide11 {background-position: left 40% top 0;}
	#hero .hero_slide09 .box {
	width: 280px;
	height: 100%;
	padding: 0;
	right: 10px;
	top: 100px;
	bottom: auto;
	}
	#hero .hero_slide09 .box h2 {
	width: 280px;
	height: 110px;
	}
	#hero .hero_slide08::before {background: rgba(0,0,0,.3);}
	#hero .hero_slide08 .box {width: 300px;}
	#hero .hero_slide04 h2 {max-width: calc(100% - 10px);}
	#hero .hero_slide08 .box p:nth-of-type(2) {font-size: 14px;}
	#hero .hero_slide08 .box p:nth-of-type(-n+2) {line-height: 1.5em;}
	#hero .hero_slide08 .box p:nth-of-type(1)::after {
	width: 100px;
	height: 100px;
	right: -30px;
	top: -35px;
	}
	#hero .hero_slide08 .box h2 {
	padding: 1px 63px 32px 0;
	font-size: 11px;
	}
	#hero .hero_slide08 #astralx_present {max-width: 280px;}
}
@media all and (max-width:490px) {
	#hero .box h2 span br {display: none;}
	#hero .hero_slide02 .box h2 span br {display: block;}
}
@media all and (max-width:430px) {
	#hero .hero_slide09::before {
	width: 110%;
	left: 15px;
	}
	#hero .hero_slide09 > p {
	max-height: 380px;
	height: calc(100vh - 140px - 180px);
	min-height: 220px;
	background-position: left center;
	top: 275px;
	left: 15px;
	}
	#hero .hero_slide09 .box {
	margin: 0 auto;
	left: 20px;
	right: auto;
	}
}
@media all and (max-width:315px) {
	#hero .hero_slide11 h2 {
	width: 100%;
	margin-left: 0;
	}
}