@charset "utf-8";

@media screen and (min-width:768px){
/*pc・タブレットcss*/

.top-ttl{
	margin-bottom:30px;
	font-size:18px;
	letter-spacing:0.25em;
	text-indent:-0.25em;
	font-weight:500;
	text-align:center;
	color:#3A3E47;
}
.top-ttl .en{
	display:block;
	font-weight:100;
	font-size:100px;
	line-height:1;
	margin-bottom:10px;
	color:#1E3162;
	
}

/* +++++++++++++++++++++++++ */

/* #top-main {
	position:relative;
	min-width: 100%;
	width: 100%;
}
#top-main video {
	width: 100%;
	display: block;
}
 */
#top-main {
	position:relative;
	width: 100%;
	height:44vw;
	overflow:hidden;
	background-color:#000;
}
#top-main video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}

/* +++++++++++++++++++++++++ */

.cat-box{
	position:relative;
	margin-top:-7vw;
	padding-bottom:450px;
	background:url(../img/top/cat_bg.png) no-repeat top center /100% auto;
}
.cat-box .bg{
	position:relative;
	width:60%;
	margin:0 auto;
}
.cat-box .bg:before{
	content:"";
	position:absolute;
	top:0;
	left:15%;
	width:70%;
	height:100%;
	background:url(../img/top/cat_bglogo.png) no-repeat top center / contain;
	/* mix-blend-mode: multiply; */
}
.cat-box ul{
	position:relative;
	z-index:2;
	width:100%;
	margin:0 auto;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
.cat-box li{
	position:relative;
	width:50%;
	padding:3.5vw 7vw;
}
.cat-box li:nth-child(1){
	padding-bottom:0;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
.cat-box li:nth-child(2){
	padding-bottom:0;
	border-bottom: solid 1px #fff;
}
.cat-box li:nth-child(3){
	border-right: solid 1px #fff;
}

.cat-box li:nth-child(1) a,.cat-box li:nth-child(2) a{
	position:relative;
	top:-5vw;
}

/* +++++++++++++++++++++++++ */

.cat-box .bg:before {
	opacity:0;
}
.cat-box.active .bg:before {
	animation: LogoBg 1s both;
}
@keyframes LogoBg {
   0% { opacity:0; }
   100% { opacity:1; }
}

.cat-box li{
	opacity:0;
}
.cat-box.active li {
	animation: CatBox 0.5s both;
	animation-delay: 0.5s;
}
@keyframes CatBox {
   0% { opacity:0; }
   100% { opacity:1; }
}

.cat-box li a{
	position:relative;
	display:block;
}
.cat-box li a:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:100%;
	height:100%;
}
.cat-box li img{
	opacity:0;
}
.cat-box.active li:nth-child(1) img {
	animation: Cat01 0.5s both;
	animation-delay: 1.0s;
}
.cat-box.active li:nth-child(1) a:before {
	animation: Cat_txt 0.5s both;
	animation-delay: 2s;
	background:url(../img/top/cat01_txt.png) no-repeat left top /100% 100%;
}
.cat-box.active li:nth-child(2) img {
	animation: Cat02 0.5s both;
	animation-delay: 1.2s;
}
.cat-box.active li:nth-child(2) a:before {
	animation: Cat_txt 0.5s both;
	animation-delay: 2s;
	background:url(../img/top/cat02_txt.png) no-repeat left top /100% 100%;
}
.cat-box.active li:nth-child(3) img {
	animation: Cat03 0.5s both;
	animation-delay: 1.4s;
}
.cat-box.active li:nth-child(3) a:before {
	animation: Cat_txt 0.5s both;
	animation-delay: 2s;
	background:url(../img/top/cat03_txt.png) no-repeat left top /100% 100%;
}
.cat-box.active li:nth-child(4) img {
	animation: Cat04 0.5s both;
	animation-delay: 1.6s;
}
.cat-box.active li:nth-child(4) a:before {
	animation: Cat_txt 0.5s both;
	animation-delay: 2s;
	background:url(../img/top/cat04_txt.png) no-repeat left top /100% 100%;
}

@keyframes Cat01 {
   0% { opacity:0; transform: translateX(5%) translateY(7%);}
   100% { opacity:1; transform:translateX(0%) translateY(0); }
}
@keyframes Cat02 {
   0% { opacity:0; transform: translateX(-5%) translateY(7%);}
   100% { opacity:1; transform:translateX(0%) translateY(0); }
}
@keyframes Cat03 {
   0% { opacity:0; transform: translateX(5%) translateY(-7%);}
   100% { opacity:1; transform:translateX(0%) translateY(0); }
}
@keyframes Cat04 {
   0% { opacity:0; transform: translateX(-5%) translateY(-7%);}
   100% { opacity:1; transform:translateX(0%) translateY(0); }
}

@keyframes Cat_txt {
   0% { opacity:0;  transform: translateY(7%);}
   100% { opacity:1;  transform: translateY(0); }
}


/* +++++++++++++++++++++++++ */

#top-company{
	position: relative;
	top:-450px;
	z-index:3;
	width:100%;
	height: 30vw; 
	margin: 0 auto; 
}
#top-company .mask-svg{
}
#top-company .mask-svg-sp{
	display:none;
}
#top-company .mask-clip{
	position: absolute;
	width: 110vw;
	height: 50vw; 
	inset: 0;
	z-index: 2;
	left:-10vw;
	clip-path: url("#mask-clip-path");
	background: url(../img/top/company-bg01.jpg) no-repeat center center /  cover;
}
/*#top-company .mask-clip:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.3);
}*/
#top-company .inner{
	position:relative;
	z-index:2;
	width:80%;
	margin: 0 auto;
	padding-top:3vw;
}
#top-company .inner .box{
	width: 40%;
	margin-left:auto;
	color:#fff;
	font-size:1vw;
	line-height:1.8;
	transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
}
#top-company .inner .box .ttl{
	margin-bottom:1.5vw;
	font-weight:100;
	font-size:8vw;
	line-height:1;
}
#top-company .inner .box .txt{
	margin-bottom:2vw;
}
#top-company .inner .box .base-btn a{
	min-width:60%;
	display:inline-block;
	padding:5px;
	font-size:1.4vw;
	text-align:center;
	border: solid 1px #fff;
	background-color:#182B59;
	letter-spacing:0.25em;
	text-indent:-0.25em;
	color:#fff;
}


#top-company .mask-svg path{
	transform:scale(3.6, 2.6);
}

/* +++++++++++++++++++++++++ */

#top-recruit{
	position: relative;
	top:-600px;
	padding-top:6vw;
	padding-bottom:10vw;
	background: url(../img/top/rec-bg01.jpg) no-repeat center center /  cover;
}
#top-recruit .inner{
	position:relative;
	z-index:2;
	width:70%;
	margin: 0 auto;
	padding-top:3vw;
}
#top-recruit .inner .box{
	width: 40%;
	margin-left:auto;
	color:#fff;
	font-size:1vw;
	line-height:1.8;
	transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
}
#top-recruit .inner .box .ttl{
	margin-bottom:1.5vw;
	font-weight:100;
	font-size:8vw;
	line-height:1;
}
#top-recruit .inner .box .txt{
	margin-bottom:2vw;
}
#top-recruit .inner .box .base-btn a{
	min-width:60%;
	display:inline-block;
	padding:5px;
	font-size:1.4vw;
	text-align:center;
	border: solid 1px #fff;
	background-color:#182B59;
	letter-spacing:0.25em;
	text-indent:-0.25em;
	color:#fff;
}

/* +++++++++++++++++++++++++ */

#top-news{
	position: relative;
	top:-800px;
	padding-top:15vw;
	margin-bottom:6vw;
	background: url(../img/top/con-bg.png) no-repeat top center / 100% auto;
	transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
}
.news-list{
	border-top: solid 1px #D2D2D2;
	margin-bottom:100px;
}
.news-list li{
	padding:40px 30px;
	border-bottom: solid 1px #D2D2D2;
}
.news-list li a{
	text-decoration:none;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
.news-list li:nth-child(odd){
	background-color:#F9F9F9;
}
.news-list .day{
	width:8em;
	font-weight:700;
}
.news-list .cat{
	width:16%;
	font-size:14px;
	border: solid 1px #000;
	background-color:#fff;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
.news-list .ttl{
	width:calc(100% - 16% - 10em);
}


/* +++++++++++++++++++++++++ */

#contact-address{
	position: relative;
	top:-800px;
	background:url(../img/top/address_bg.jpg) no-repeat center top / 100% auto #F0F7F9;
	padding:6vw 0;
	transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
}
#contact-address .address-list{
	margin-bottom:60px;
}
#contact-address .address-list li{
	width:30%;
	margin-right:5%;
	margin-bottom:30px;
	padding:20px;
	border-radius: 10px;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);	
	background-color:#fff;
	text-align:center;
	font-size:21px;
}
#contact-address .address-list li:nth-child(3n),
#contact-address .address-list li:last-child{
	margin-right:0;
}
#contact-address .address-list .contact-ttl{
	margin-bottom:10px;
	font-size:16px;
	border-top: solid 1px #000;
	border-bottom: dashed 1px #666;
}
#contact-address .address-list .contact-ttl02{
	font-size:16px;
}
#contact-address .address-list .tel-link{
	font-size:1.8vw;
	font-weight:700;
}

/* +++++++++++++++++++++++++ */

#bottom-sns{
	position: relative;
	top:-800px;
}
#common-footer{
	position: relative;
	top:-800px;
}



}


@media screen and (min-width:768px) and ( max-width:1800px) {
	#top-company .mask-svg path{
		transform:scale(3.0, 2.4);
	}
	#top-company .mask-clip .inner{
		padding-top:5vw;
	}
	#top-recruit .inner{
		padding-top:6vw;
	}
	#top-company .inner .box,
	#top-recruit .inner .box{
		font-size:1.2vw;
	}
	
	
}
@media screen and (min-width:768px) and ( max-width:1500px) {
	#top-company .mask-svg path{
		transform:scale(3.0, 2.0);
	}
	#top-recruit{
		padding-bottom:10vw;
	}
	#top-recruit .inner{
		padding-top:10vw;
	}
	
}
@media screen and (min-width:768px) and ( max-width:1366px) {
	#top-company .inner .box,
	#top-recruit .inner .box{
		font-size:1.4vw;
	}
}
@media screen and (min-width:768px) and ( max-width:1150px) {
	#top-recruit .inner{
		padding-top:20vw;
		padding-bottom:10vw;
	}
}

@media (max-width: 768px) {


	.top-ttl{
		margin-bottom:5vw;
		font-size:16px;
		letter-spacing:0.25em;
		text-indent:-0.25em;
		font-weight:500;
		text-align:center;
		color:#3A3E47;
	}
	.top-ttl .en{
		display:block;
		font-weight:100;
		font-size:48px;
		line-height:1;
		margin-bottom:2vw;
		color:#1E3162;
		
	}
	
	/* +++++++++++++++++++++++++ */
	
	#top-main {
		position:relative;
		min-width: 100%;
		width: 100%;
	}
	#top-main video {
		width: 100%;
		display: block;
	}
	
	/* +++++++++++++++++++++++++ */
	
	.cat-box{
		position:relative;
		margin-top:-7vw;
		padding-bottom:16vw;
		background:url(../img/top/cat_bg.png) no-repeat top center /100% auto;
	}
	.cat-box .bg{
		position:relative;
		width:100%;
	}
	.cat-box .bg:before{
		content:"";
		position:absolute;
		top:0;
		left:15%;
		width:70%;
		height:100%;
		background:url(../img/top/cat_bglogo.png) no-repeat top center / contain;
		/* mix-blend-mode: multiply; */
	}
	.cat-box ul{
		position:relative;
		z-index:2;
		width:100%;
		margin:0 auto;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	.cat-box li{
		position:relative;
		width:50%;
		padding:3.5vw 7vw;
	}
	.cat-box li:nth-child(1){
		padding-bottom:0;
		border-right: solid 1px #fff;
		border-bottom: solid 1px #fff;
	}
	.cat-box li:nth-child(2){
		padding-bottom:0;
		border-bottom: solid 1px #fff;
	}
	.cat-box li:nth-child(3){
		border-right: solid 1px #fff;
	}
	
	.cat-box li:nth-child(1) a,.cat-box li:nth-child(2) a{
		position:relative;
		top:-5vw;
	}
	
	/* +++++++++++++++++++++++++ */
	
	.cat-box .bg:before {
		opacity:0;
	}
	.cat-box.active .bg:before {
		animation: LogoBg 0.5s both;
	}
	@keyframes LogoBg {
	   0% { opacity:0; }
	   100% { opacity:1; }
	}
	
	.cat-box li{
		opacity:0;
	}
	.cat-box.active li {
		animation: CatBox 0.5s both;
		animation-delay: 1s;
	}
	@keyframes CatBox {
	   0% { opacity:0; }
	   100% { opacity:1; }
	}
	
	.cat-box li a{
		position:relative;
		display:block;
	}
	.cat-box li a:before{
		content:"";
		position:absolute;
		top:0;
		left:0;
		z-index:2;
		width:100%;
		height:100%;
	}
	.cat-box li img{
		opacity:0;
	}
	.cat-box.active li:nth-child(1) img {
		animation: Cat01 0.5s both;
		animation-delay: 1.0s;
	}
	.cat-box.active li:nth-child(1) a:before {
		animation: Cat_txt 0.5s both;
		animation-delay: 2s;
		background:url(../img/top/cat01_txt.png) no-repeat left top /100% 100%;
	}
	.cat-box.active li:nth-child(2) img {
		animation: Cat02 0.5s both;
		animation-delay: 1.2s;
	}
	.cat-box.active li:nth-child(2) a:before {
		animation: Cat_txt 0.5s both;
		animation-delay: 2s;
		background:url(../img/top/cat02_txt.png) no-repeat left top /100% 100%;
	}
	.cat-box.active li:nth-child(3) img {
		animation: Cat03 0.5s both;
		animation-delay: 1.4s;
	}
	.cat-box.active li:nth-child(3) a:before {
		animation: Cat_txt 0.5s both;
		animation-delay: 2s;
		background:url(../img/top/cat03_txt.png) no-repeat left top /100% 100%;
	}
	.cat-box.active li:nth-child(4) img {
		animation: Cat04 0.5s both;
		animation-delay: 1.6s;
	}
	.cat-box.active li:nth-child(4) a:before {
		animation: Cat_txt 0.5s both;
		animation-delay: 2s;
		background:url(../img/top/cat04_txt.png) no-repeat left top /100% 100%;
	}
	
	
	@keyframes Cat01 {
	   0% { opacity:0; transform: translateX(5%) translateY(7%);}
	   100% { opacity:1; transform:translateX(0%) translateY(0); }
	}
	@keyframes Cat02 {
	   0% { opacity:0; transform: translateX(-5%) translateY(7%);}
	   100% { opacity:1; transform:translateX(0%) translateY(0); }
	}
	@keyframes Cat03 {
	   0% { opacity:0; transform: translateX(5%) translateY(-7%);}
	   100% { opacity:1; transform:translateX(0%) translateY(0); }
	}
	@keyframes Cat04 {
	   0% { opacity:0; transform: translateX(-5%) translateY(-7%);}
	   100% { opacity:1; transform:translateX(0%) translateY(0); }
	}
	
	@keyframes Cat_txt {
	   0% { opacity:0;  transform: translateY(7%);}
	   100% { opacity:1;  transform: translateY(0); }
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#top-company{
		position: relative;
		z-index:3;
		width:100%;
		margin: 0 auto;
		padding-top:15vw;
		padding-bottom:30vw;
		margin-top:-10vw;
		background: url(../img/top/company-bg01_sp.png) no-repeat top center / cover;
	}
	#top-company .mask-svg{
		display:none;
	}
	#top-company .inner{
		position:relative;
		z-index:2;
		width:100%;
		margin: 0 auto;
		padding: 0 5vw;
	}
	#top-company .inner .box{
		width:100%;
		color:#fff;
		transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
	}
	#top-company .inner .box .ttl{
		margin-bottom:1.5vw;
		font-weight:100;
		font-size:50px;
		line-height:1;
	}
	#top-company .inner .box .txt{
		margin-bottom:2vw;
	}
	#top-company .inner .box .base-btn a{
		min-width:60%;
		display:inline-block;
		padding:5px;
		text-align:center;
		border: solid 1px #fff;
		background-color:#182B59;
		letter-spacing:0.25em;
		text-indent:-0.25em;
		color:#fff;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#top-recruit{
		position: relative;
		padding-top:15vw;
		padding-bottom:15vw;
		margin-top:-10vw;
		background: url(../img/top/rec-bg01.jpg) no-repeat center center / cover;
	}
	#top-recruit .inner{
		position:relative;
		z-index:2;
		width:100%;
		margin: 0 auto;
		padding: 0 5vw;
	}
	#top-recruit .inner .box{
		width: 100%;
		margin-left:auto;
		color:#fff;
		transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
	}
	#top-recruit .inner .box .ttl{
		margin-bottom:1.5vw;
		font-weight:100;
		font-size:60px;
		line-height:1;
	}
	#top-recruit .inner .box .txt{
		margin-bottom:2vw;
	}
	#top-recruit .inner .box .base-btn a{
		min-width:60%;
		display:inline-block;
		padding:5px;
		text-align:center;
		border: solid 1px #fff;
		background-color:#182B59;
		letter-spacing:0.25em;
		text-indent:-0.25em;
		color:#fff;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#top-news{
		position: relative;
		top:-12vw;
		padding-top:15vw;
		margin-bottom:6vw;
		background: url(../img/top/con-bg.png) no-repeat top center / 100% auto;
		transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
	}
		
	.news-list{
		margin-bottom:10vw;
		border-top: solid 1px #D2D2D2;
	}
	.news-list li{
		padding:5vw;
		border-bottom: solid 1px #D2D2D2;
	}
	.news-list li:nth-child(odd){
		background-color:#F9F9F9;
	}
	.news-list li a{
		text-decoration:none;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	.news-list .day{
		width:7em;
		line-height:1;
		font-weight:700;
		padding:5px 0;
	}
	.news-list .cat{
		width:30%;
		border: solid 1px #000;
		background-color:#fff;
		font-size:10px;
		padding:5px 0;
		line-height:1;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center;
		-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}


	
	/* +++++++++++++++++++++++++ */
		
	
	#contact-address{
		position: relative;
		background:url(../img/top/address_bg.jpg) no-repeat center top / 100% auto #F0F7F9;
		padding:10vw 0;
		transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
	}
	#contact-address .address-list{
		margin-bottom:5vw;
	}
	#contact-address .address-list li{
		width:100%;
		margin-bottom:5vw;
		padding:3vw;
		border-radius: 10px;
		box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);	
		background-color:#fff;
		text-align:center;
		font-size:21px;
	}
	#contact-address .address-list .contact-ttl{
		margin-bottom:2vw;
		padding:2vw 0;
		font-size:14px;
		border-top: solid 1px #000;
		border-bottom: dashed 1px #666;
	}
	#contact-address .address-list .contact-ttl02{
		font-size:14px;
	}
	#contact-address .address-list .tel-link a{
		font-size:20px;
		font-weight:700;
		color:#EF741A;
		text-decoration:underline;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#bottom-sns{
		position: relative;
	}
	#common-footer{
		position: relative;
	}
	








}