@charset "UTF-8";

[class*="sec_top"]{
	position: relative;
	z-index: 1;
}
.section_top{
	position: relative;
}
.section_top .inner{
	position: relative;
	z-index: 1;
	margin-top: 0;
}
.section_top .ttl{
	/* font-size: 20.4rem; */
	font-size: 12vw;
	line-height: 0.8;
	color: #fff;
	font-weight: 300;
	white-space: nowrap;
	mix-blend-mode: difference;
	margin-left: -.12em;
	position: relative;
	margin-right: -1vw;
}
.ie .section_top .ttl{
	color: #FFECB8;
}
.section_top .ttl::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 160px;
	height: 100%;
	background: linear-gradient(to right, rgba(0,9,26,1),rgba(0,9,26,0));
}
.section_top .box dt{
	/* font-size: 4.5rem; */
	/* font-size: 3.2rem; */
	line-height: 1.2;
	font-weight: 700;
	color: #000613;
	font-size: 2.6vw;
}
.section_top .box dd{
	/* font-size: 2rem; */
	/* font-size: 1.6rem; */
	font-size: 1.18vw;

	line-height: 1.67;
	line-height: 2;
	color: #000613;
	margin-top: 20px;
}
.section_top .box dd .name{
	font-size: 3.2rem;
	font-weight: 700;
	display: block;
	margin-top: 10px;
}
.section_top .box dd .btn{
	margin-top: 45px;
}
@media screen and (max-width: 768px) {
	.section_top .ttl{
		font-size: 15.6vw;
		letter-spacing: 0;
		margin-left: -.1em;
	}
	.section_top .ttl::before{
		max-width: 10vw;
	}
	.section_top .txt::after{
		display: none;
	}
	.section_top .box dt{
		font-size: 6.25vw;
	}
	.section_top .box dd{
		font-size: 3.1vw;
		margin-top: 8%;
	}
	.section_top .box dd .name{
		font-size: 4.4vw;
		font-weight: 600;
		margin-top: 10px;
	}
	.section_top .box dd .btn{
		margin-top: 8%;
	}
}

/* topkv
--------------------------------*/
.sec_topkv{
	background-color: #000208;
	position: relative;
	min-height: auto;
	height: 105vh;
	min-height: 750px;
}

.sec_topkv .wrap{
	max-width: 100%;
	width: 100%;
}
.sec_topkv::before{
	content: '';
	position: absolute;
	top: 0;
	/* left: 0; */
	right: 0;
	width: 100%;
	height: 1200px;
	background: url(../img/common/bg01.jpg) no-repeat center top;
	z-index: 2;
	display: block;
	background-size: cover;

}
.sec_topkv .particles-js-canvas-el{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.sec_topkv .inner{
	position: relative;
	z-index: 2;
	height: auto;
	min-height: auto;
	height: 98vh;
	min-height: 700px;
}


/* @media screen and (max-width: 1024px) {
	.sec_topkv{
		min-height: 640px;
	}

	.sec_topkv .inner{
		position: relative;
		z-index: 2;
		height: 640px;
	}
} */

.sec_topkv .img01,
.sec_topkv .img02,
.sec_topkv .img03,
.sec_topkv .img04,
.sec_topkv .img05,
.sec_topkv .icon{
	position: absolute;
	transform: translate(-50%,-50%);
	z-index: 2;
}

.sec_topkv .img01 img,
.sec_topkv .img02 img,
.sec_topkv .img03 img,
.sec_topkv .img04 img,
.sec_topkv .img05 img,
.sec_topkv .icon img{
	width: 100%;
}
 .sec_topkv .img01{
	opacity: 0.8;

}

.sec_topkv #circleAnime{

	opacity: 0;
}


.sec_topkv #iconAnime{

	opacity: 0;
}



.sec_topkv #iconAnime .img05{

	opacity: 0;
}

.sec_topkv #iconAnime .icon{

	opacity: 0;
}

.sec_topkv #iconAnime .img05 .IEonly{
	display: none;
}

.sec_topkv #iconAnime .img05.useIE .IEonly{
	display: block;
}

.sec_topkv #iconAnime .img05.useIE .move{
	display: none;
}


.sec_topkv .img01.active{
	/* display: none; */
	opacity: 0.8;

	animation: usefadeIn 2s linear forwards;
}

.sec_topkv .icon.active{
	/* display: none; */

	animation: usefadeIn 2s linear forwards;

}

.sec_topkv .img05.active{
	/* display: none; */

	animation: usefadeIn 2s linear forwards;
}



@keyframes usefadeIn {
  0%   { 
		opacity: 0;
	}
	100% { 
		opacity: 1; 
	}
}



@keyframes rotation1 {
  0%   { 
		transform: translate(-50%,-50%) rotate(0deg); 
	}
  100% { 
		transform: translate(-50%,-50%) rotate(360deg); 
	}
}

.sec_topkv .img01{
	/* width: 3220px; */
	width: 130%;
	top: 44%;
	left: 48.5%;
}

.sec_topkv .img01 img.up{
	opacity: 0;
}

.sec_topkv .img01 img.up.active{

}

.sec_topkv .img01 img.bg{
	width: 100%;
	position: absolute;
	top: 10px;
	left: 0;
}

.sec_topkv .img01 img.bg.active{
}

.sec_topkv #bgAnime{
	opacity: 0;
}


@keyframes bgfadeIn {
  0%   { 
		opacity: 0;
	}
  50% { 
		opacity: 0.3; 
	}
	100% { 
		opacity: 0; 
	}
}

@keyframes bgfadeout {
  0%   { 
		opacity: 1;
	}
  50% { 
		opacity: 0; 
	}
	100% { 
		opacity: 1; 
	}
}




.sec_topkv .img02{
	/* width: 1215px; */
	/* width: 1170px; */
	width: 78%;
	width: 90%;
	max-width: 1215px;
	/* top: 52.7%; */
	top: 56%;
	left: 49.5%;
	transform: translate(-50%,-50%) rotate(0deg); 
	/* animation: rotation1 280s linear infinite; */
}

.sec_topkv.on .img02{
	animation: rotation1 280s linear infinite;

}

.sec_topkv.on2 .img02{
	animation: rotation1 280s linear infinite;

}


.sec_topkv .img03{
	/* width: 823px; */
	/* width: 1070px; */
	width: 68%;
	width: 78%;
	max-width: 1070px;
	top: 54%;
	left: 49.5%;
	/* animation: rotation1 160s linear infinite; */
	opacity: 0.6;
	transform: translate(-50%,-50%) rotate(0deg); 

}


.sec_topkv.on .img03{
	animation: rotation1 160s linear infinite;
}
.sec_topkv.on2 .img03{
	animation: rotation1 160s linear infinite;

}

.sec_topkv .img04{
	/* width: 1055px; */
	width: 67.5%;
	width: 78.5%;
	max-width: 1055px;
	top: 54%;
	left: 49.5%;
	transform: translate(-50%,-50%) rotate(0deg); 
	/* animation: rotation1 80s linear infinite; */
}

.sec_topkv.on .img04{
	animation: rotation1 80s linear infinite;
}
.sec_topkv.on2 .img04{
	animation: rotation1 80s linear infinite;

}

.sec_topkv .img05{
	/* width: 580px; */
	width: 38%;
	width: 50%;
	max-width: 620px;
	/* top: 48.8%; */
	top: 54%;
	left: 49.5%;
	z-index: 3;

}
.sec_topkv .icon{
	width: 38%;
	/* max-width: 520px; */
	width: 43%;
	width: 50%;
	max-width: 665px;
	top: 52%;
	/* top: 47%; */
	left: 50%;
}

.sec_topkv .icon img.bg1{
	position: absolute;
	top: -2%;
	left: 25.6%;
	width: 78%;

	opacity: 0;
}

.sec_topkv .icon img.bg2{
	position: absolute;
	position: absolute;
	/* left: 0%;
	bottom: -3%;
	width: 102%;
	min-width: 516px; */
	left: -1%;
	bottom: -3%;
	min-width: 104%;
	opacity: 0;
}

.sec_topkv .icon.active .bg1{
	animation: fadeInBg 4s linear infinite;
}

.sec_topkv .icon.active .bg2{
	animation: fadeInBg 4s linear infinite;
}

@keyframes fadeInBg {
  0%   { 
		opacity: 0;
	}
  50% { 
		opacity: 1; 
	}
	100% { 
		opacity: 0; 
	}
}


.sec_topkv .txt{
	position: relative;
	z-index: 3;
	margin-left: -4em;
	/* padding-top: 228px; */
	/* padding-top: 18.5vw; */
	/* max-width: 1024px; */
	margin: 0 auto;
	position: absolute;
	top: 28%;
	left: 0;
}

.sec_topkv .en{
	width: 100%;
	width: 67%;
	width: 53vw;
	max-width: 900px;
	margin: 0 auto 0 11.5vw;
	position: relative;
	/* min-height: 180px; */
}

.sec_topkv .en::before{
	content:"";
	display: block;
	width:0;
	height:0;
	padding-bottom:28%;
}

.sec_topkv .en.active .text1{
	animation: usefadeIn 1.8s linear forwards;
}

.sec_topkv .en.active .text2{
	animation: usefadeIn 1.8s linear 0.4s forwards;
}

.sec_topkv .en.active .text3{
	animation: usefadeIn 1.8s linear 1s forwards;
}


.sec_topkv .txt .en .text1{
	position: absolute;
	top: 0%;
	left: 0%;
	opacity: 0;
	/* width: 38%; */
	width: 20vw;
	max-width: 336px;
}


@keyframes usefadeIn {
  0%   { 
		opacity: 0;
	}
	100% { 
		opacity: 1; 
	}
}


.sec_topkv .txt .en .text1 img{
	width: 100%;
}

.sec_topkv .txt .en .text2 img{
	width: 100%;
}

.sec_topkv .txt .en .text3 img{
	width: 100%;
}


.sec_topkv .txt .en .text1 .bg{
	position: absolute;
	top: -8%;
	left: -9.5%;
	width: 99%;
	/* transform: scale(1.01); */
	min-width: 118%;
	
	opacity: 0;

}


.sec_topkv .txt .en .text2{
	position: absolute;
	top: 0;
	left: 44%;
	/* width: 44%; */
	width: 22vw;
	max-width: 380px;
	/* display: none; */
	opacity: 0;
}


.sec_topkv .txt .en .text2 .bg{
	position: absolute;
	left: -8%;
	top: -4%;
	min-width: 118%;

	opacity: 0;
}

.sec_topkv .txt .en .text3{
	position: absolute;
	top: 49%;
	left: -2%;
	width: 102%;
	opacity: 0;
}

.sec_topkv .txt .en .text3 .bg{
	position: absolute;
	left: -10%;
	top: -10.6%;
	min-width: 120%;

	opacity: 0;
}



.sec_topkv .txt .en .text1 .bg.active{
	animation: fadeInBg 4s linear infinite;
}

.sec_topkv .txt .en .text2 .bg.active{
	animation: fadeInBg 4s linear infinite;
}

.sec_topkv .txt .en .text3 .bg.active{
	animation: fadeInBg 4s linear infinite;
}



.sec_topkv .catch{
	/* font-size: 5.6rem; */
	/* font-size: 4.5rem; */
	font-size: 3.5vw;
	line-height: 1.39;
	color: #fff;
	margin-top: -.15em;
	font-weight: 700;
	padding-left: .6em;
	letter-spacing: .03em;

	/* display: none; */
	opacity: 0;
	width: 53vw;
	max-width: 900px;
	position: relative;
	padding-left: 0;
	left: 11.5vw;
	
}

.sec_topkv .catch.active{
	animation: usefadeIn 2s linear forwards;
}



/* 
.sec_topkv.active #circleAnime{

	animation: usefadeIn 2s linear forwards;
}


.sec_topkv.active .catch{

	animation: usefadeIn 2s linear forwards;

} */

	.sec_topkv.active #circleAnime{

		animation: usefadeIn 2s linear forwards;
	}
	

	
	.sec_topkv.active .en .text1{
		animation: usefadeIn 1.8s linear 0.5s forwards;
	}
	
	.sec_topkv.active .en .text2{
		animation: usefadeIn 1.8s linear 1s forwards;
	}
	
	.sec_topkv.active .en .text3{
		animation: usefadeIn 1.8s linear 1.5s forwards;
	}

		
	.sec_topkv.active .catch{
	
		animation: usefadeIn 2s linear 2s forwards;
	
	}

	
.sec_topkv.active #iconAnime{

	animation: usefadeIn 2s linear 2.8s forwards;
}

.sec_topkv.active #iconAnime .img05{

	animation: usefadeIn 2s linear 2.8s forwards;
}

.sec_topkv.active #iconAnime .icon{

	animation: usefadeIn 2s linear 2.8s forwards;
}

.sec_topkv.active #bgAnime .up{

	animation: bgfadeIn 4s linear infinite;
}

.sec_topkv.active #bgAnime .bg{

	animation: bgfadeout 6s linear infinite;
}


.sec_topkv.active #bgAnime{
	animation: usefadeIn 2s linear 3.5s forwards;
}

@media screen and (min-width: 1440px) {

	.sec_topkv .en{
		margin: 0 auto 0 16.5vw;
	}
	.sec_topkv.active .catch{
		left: 16.5vw;
	}

}

@media screen and (max-width: 1280px) {

	.sec_topkv .txt{
		top: 30%;
	}
}

@media screen and (max-width: 768px) {
	.sec_topkv .wrap{
		width: 94%;
		zoom: 1;
	}
	.sec_topkv::before{
		height: 210vw;
		background: url(../img/common/bg01_sp.jpg) no-repeat center top;
		background-size: 100%;
	}
	.sec_topkv .inner{
		height: 171vw;
		min-height: auto;
	}
	.sec_topkv .img01,
	.sec_topkv .img02,
	.sec_topkv .img03,
	.sec_topkv .img04,
	.sec_topkv .icon{
		position: absolute;
		transform: translate(-50%,-50%);
		z-index: 1;
	}
	.sec_topkv .img01{
		display: none;
	}
	.sec_topkv .img02{
		width: 118%;
	}
	/* .sec_topkv .img03{
		width: 84%;
		top: 52%;
	} */

	.sec_topkv .img03{
		width: 108%;
		top: 52%;
	}
	
	.sec_topkv .img04{
		width: 105%;
		top: 52%;
	}
	.sec_topkv .img05{
		width: 58%;
		top: 53%;
	}
	.sec_topkv .icon{
		top: 51.5%;
		left: 51.5%;
		width: 69%;
	}

	.sec_topkv .icon img.bg2{
		min-width: inherit;
	}
	.sec_topkv .txt{
		padding-top: 30vw;
		margin-left: 0;
		width: 97%;
		top: 0;
	}
	.sec_topkv .en{
		width: 100%;
		min-height: 170px;
		margin: 0;
	}

	@media screen and (max-width: 425px) {
		.sec_topkv .en{
			min-height: 110px;
		}
		
	}

	.sec_topkv .txt .en .text1{
		min-width: inherit;
		width: 34.6%;
		left: 5%;
		
	}
	.sec_topkv .txt .en .text2{
		min-width: inherit;
		width: 41%;
		left: 44%;
		
	}
	.sec_topkv .txt .en .text3{
		min-width: inherit;
		width: 90.2%;
		top: 42%;
		left: 4%;
	}

	.sec_topkv .txt .en .text1 .bg{
		min-width: inherit;
		left: -1.4%;
    top: 2%;
    transform: scale(1.2);
		
	}
	.sec_topkv .txt .en .text2 .bg{
		min-width: inherit;
		left: -0.9%;
    top: 2%;
    transform: scale(1.2);
	}
	.sec_topkv .txt .en .text3 .bg{
		min-width: inherit;
		left: 0;
    top: 2%;
    transform: scale(1.2);
	}
	.sec_topkv .catch{
		font-size: 8.3vw;
		margin-top: -.5em;
		padding-left: .4em;
		left: 0;
		width: auto;
		
	}
	.sec_topkv .particles-js-canvas-el{
		display: block;
	}

	.sec_topkv.active #iconAnime{
		animation: usefadeIn 2s linear 1s forwards;
	}

	.sec_topkv.active #iconAnime .img05{
		animation: usefadeIn 2s linear 2s forwards;
	}

	.sec_topkv.active #iconAnime .icon{
		animation: usefadeIn 2s linear 2s forwards;
	}

	.sec_topkv.active .en .text1{
		animation: usefadeIn 1.2s linear 0.4s forwards;
	}

	.sec_topkv.active .en .text2{
		animation: usefadeIn 1.2s linear 0.8s forwards;	
	}

	.sec_topkv.active .en .text3{
		animation: usefadeIn 1.2s linear 1.2s forwards;
	}

	.sec_topkv.active .catch{
		animation: usefadeIn 1.6s linear 1.6s forwards;
	}
	
}

/* topnews
--------------------------------*/
.sec_topnews{
	padding: 18px 0;
	background: #021C5D;
	margin-top: 4rem;
	/* margin-top: 10rem; */

	/* position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 2;
	width: 100%; */
}

.sec_topnews .wrap{
	width: 80%;
	margin: 0 auto;
}
.sec_topnews .flex{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.sec_topnews .ttl{
	font-size: 2.4rem;
	font-weight: 700;
	width: 120px;
}
.sec_topnews .list{
	padding-left: 55px;
	border-left: 1px solid #fff;
	width: calc(100% - 120px);
}
.sec_topnews .list li{
	display: flex;
	justify-content: flex-start;
}
.sec_topnews .list li+li{
	margin-top: 5px;
}
.sec_topnews .list .time{
	font-size: 1.4rem;
	letter-spacing: .1em;
	margin-top: .2em;
	width: 110px;
	display: inline-block;
}
.sec_topnews .list .txt{
	padding: 0;
	margin: 0;
	letter-spacing: .1em;
	width: calc(100% - 110px);
}
.sec_topnews .list .txt a{
	transition: color .4s;
	text-decoration: underline;
}
.sec_topnews .list .txt a:hover{
	color: #4AFF88;
}
@media screen and (max-width: 768px) {
	.sec_topkv{
		min-height: 624px;
		height: auto;
	}
	.sec_topnews{
		padding: 5% 0;
		position: relative;
		margin-top: -50px;
	}
	.sec_topnews .flex{
		display: block;
	}
	.sec_topnews .ttl{
		font-size: 4.1vw;
		width: auto;
	}
	.sec_topnews .list{
		padding-left: 0;
		border-left: 0;
		width: auto;
	}
	.sec_topnews .list li{
		display: block;
		margin-top: 4%;
	}
	.sec_topnews .list li+li{
		margin-top: 5%;
	}
	.sec_topnews .list .time{
		font-size: 2.6vw;
		line-height: 1.6;
		letter-spacing: .1em;
		margin-top: 0;
		width: auto;
		display: block;
	}
	.sec_topnews .list .txt{
		font-size: 2.6vw;
		line-height: 1.6;
		width: auto;
		display: block;
	}
}

/* topmission
--------------------------------*/
.sec_topmission{
	/* padding: 165px 0; */
	padding: 14rem 0;

	overflow: hidden;
}
.sec_topmission .ttl{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-25%,-50%);
	width: 100%;
	opacity: 0;
}
.fadeInRight{
	opacity: 0;
}
.sec_topmission .ttl.fadeInRight.active{
	animation: fadeInRighttext 2s ease 0.2s forwards;
}

@keyframes fadeInRighttext {
  from {
    opacity: 0;
    transform: translate(-40%,-50%);
  }

  to {
    opacity: 1;
    transform: translate(-50%,-50%);
  }
}

.sec_topmission .txt{
	text-align: center;
	width: 80%;
	margin: 0 auto;
}

.sec_topmission .ttl.scrollText{
	left: inherit;
	right: 50%;
	transition: 0.8s ease;
}



.sec_topmission .ttl.scrollText img{
	width: 100vw;
}

.sec_topmission .ttl.scrollText.stop{
	right: 50%!important;
}

@media screen and (max-width: 768px) {
	.sec_topmission{
		padding: 21% 0;
	}
	.sec_topmission .ttl{
		min-width: 0;
		width: 100%;
	}
	.sec_topmission .wrap{
		width: 100%;
	}
}

/* topfield/topbusiness
--------------------------------*/
.sec_topfield .img,
.sec_topbusiness .img{
	width: calc(100% - 320px);
	overflow: hidden;
	margin-left: auto;
}
.sec_topfield .img img,
.sec_topbusiness .img img{
	/* min-width: 1600px; */
}
.sec_topfield .txt,
.sec_topbusiness .txt{
	position: absolute;
	top: -0.52vw;
	left: 0;
}
.sec_topfield .box,
.sec_topbusiness .box{
	/* width: 720px; */
	/* width: 48%; */
	width: 40vw;
	/* height: 460px; */
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 6vw 6vw;
	background: #fff;
	margin: -0.3vw 0 0 230px;
}

.sec_topbusiness .ttl{
	line-height: 0.78;
}
@media screen and (max-width: 1820px) and (min-width: 769px)  {
	.sec_topfield .img,
	.sec_topbusiness .img{
		width: calc(100% - 200px);
		/* width: 76%; */
	}
	.sec_topfield .catch,
	.sec_topbusiness .catch{
		margin-left: 265px;
	}
	.sec_topfield .box,
	.sec_topbusiness .box{
		margin-left: 120px;
	}
}
@media screen and (max-width: 768px) {
	.sec_topfield .img,
	.sec_topbusiness .img{
		width: calc(100% - 8vw);
	}
	.sec_topfield .img img,
	.sec_topbusiness .img img{
		min-width: 0;
	}
	.sec_topfield .txt,
	.sec_topbusiness .txt{
		top: 0;
		height: 100%;
	}
	.sec_topfield .box,
	.sec_topbusiness .box{
		width: 53vw;
		height: auto;
		padding: 16% 6%;
		margin: 0;
		position: static;
		left: 4vw;
		bottom: 15vw;
	}
	.sec_topbusiness .ttl{
		line-height: 0.7;
	}
}

/* topfield
--------------------------------*/
.sec_topfield{
	padding-bottom: 162px;
}
.sec_topfield .img{
	margin-left: 0;
	margin-right: auto;
}
.sec_topfield .box{
	margin: -0.5vw 230px 0 auto;
}
.sec_topfield .txt{
	left: auto;
	right: 0;
}
.sec_topfield .ttl{
	text-align: right;
	margin-right: -1.2vw;
}
.sec_topfield .ttl::before{
	right: 0;
	left: auto;
	background: linear-gradient(to right, rgba(0,9,26,0),rgba(0,9,26,1));
}

@media screen and (max-width: 1820px) and (min-width: 769px)  {
	.sec_topfield .img{
		/* width: calc(100% - 200px); */
		width: 82%;
	}
	.sec_topfield .catch{
		margin-right: 265px;
	}
	.sec_topfield .box{
		/* margin-right: 160px; */
		margin-right: 10vw;
	}
}
@media screen and (max-width: 768px) {
	.sec_topfield{
		padding-bottom: 23%;
	}
	.sec_topfield .img{
		margin-left: auto;
		margin-right: 0;
	}
	.sec_topfield .box{
		margin: 0 0 0 4vw;
	}
	.sec_topfield .txt{
		left: 0;
		right: auto;
	}
	.sec_topfield .ttl{
		text-align: left;
	}
	.sec_topfield .ttl::before{
		right: auto;
		left: 0;
		background: linear-gradient(to right, rgba(0,9,26,1),rgba(0,9,26,0));
	}
	.sec_topfield .box{
		padding: 11% 6%;
	}
}

/* topbusiness
--------------------------------*/
.sec_topbusiness{
	padding-bottom: 162px;
	background-color: #000208;
	position: relative;
}
.sec_topbusiness .inner{
	position: relative;
	z-index: 1;
	margin-top: 0;
}
.sec_topbusiness .img{
	margin-left: auto;
}
.sec_topbusiness .txt{
	position: absolute;
	left: 0;
}

.sec_topbusiness .box .btn .btn_more{
	/* width: 100%; */
	max-width: 256px;
}
@media screen and (max-width: 768px) {
	.sec_topbusiness{
		padding-bottom: 22%;
	}
	.sec_topbusiness .box{
		margin: 0 0 0 4vw;
	}
	.sec_topbusiness .inner{
		margin-top: 0;
	}
	.sec_topbusiness .txt{
		left: 0;
		right: auto;
	}
}

/* topmsg
--------------------------------*/
.sec_topmsg{
	padding-bottom: 238px;
}

.sec_topmsg::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	/* width: calc(50% + 720px); */
	width: 90%;
	height: 100%;
	background: #fff;
}
.sec_topmsg .ttl{
	position: absolute;
	right: 0;
	z-index: 2;
	top: -0.6vw;
}

@media all and (-ms-high-contrast: none) {

	.sec_topmsg .ttl.noIE::before{
		display: none;
	}
}



.sec_topmsg .wrap{
	width: 100%;
	max-width: 100%;
}
.sec_topmsg .inner{
	display: flex;
	/* justify-content: flex-start; */
	flex-direction: row-reverse;
}
.sec_topmsg .ttl::before{
	right: 0;
	left: auto;
	background: linear-gradient(to right, rgba(0,0,0,0),rgba(0,0,0,1));
}
.sec_topmsg .txt{
	width: 50%;
}
.sec_topmsg .img{
	/* margin-left: -230px; */
	/* width: 960px; */
	width: 50%;
}
.sec_topmsg .box{
	/* width: 720px; */
	width: 80%;
	height: auto;
	/* height: 580px; */
	background: #011341;
	display: flex;
	justify-content: center;
	flex-direction: column;
	/* padding: 85px 120px 10px; */
	padding: 16vw 4vw 7vw 6vw;
}

.sec_topmsg .box .btn .btn_more{
	/* width: 100%; */
	max-width: 256px;
}

.sec_topmsg .box .btn .btn_more:hover{
	color: #000613;
}

.sec_topmsg .box dt,
.sec_topmsg .box dd{
	color: #fff;
}
@media screen and (max-width: 768px) {
	.sec_topmsg{
		padding-bottom: 22%;
	}
	.sec_topmsg .wrap{
		width: 100%;
	}
	.sec_topmsg::before{
		width: calc(100% - 4vw);
	}
	.sec_topmsg .txt{
		position: absolute;
		top: 0;
		left: 0;
	}

	.sec_topmsg .txt::before{
		content: '';
		background-color: #fff;
		width: 4vw;
		height: 100px;
		display: block;
		position: absolute;
		left: 4vw;
	}
	.sec_topmsg .ttl{
		position: relative;
	}
	.sec_topmsg .inner{
		display: block;
	}
	.sec_topmsg .ttl::before{
		right: inherit;
		left: 0;
		max-width: 6vw;
		background: linear-gradient(to right, rgba(0,9,26,1),rgba(0,9,26,0));
	}

	.sec_topmsg .img{
		margin-left: auto;
		width: calc(100% - 8vw);
	}
	.sec_topmsg .box{
		width: 53vw;
		height: auto;
		padding: 10% 5% 10%;
		margin: -0.58vw 0 0 4vw;
		z-index: 1;
    position: relative;
		
	}

	.sec_topmsg .ttl{
		top: -0.8vw;
		line-height: 0.8;
	}
}

/* topinfo
--------------------------------*/
.sec_topinfo{
	padding-bottom: 162px;
}
.sec_topinfo::before{
	content: '';
	position: absolute;
	top: -100px;
	right: 0;
	/* width: calc(50% + 720px); */
	width: 90%;
	height: calc(100% + 102px);
	background: #fff;
}
.sec_topinfo .ttl{
	position: absolute;
	top: -8px;
	left: 15px;
	z-index: 2;
	line-height: 0.79;
	
}

.fadeInLeft{
	opacity: 0;
}

.sec_topinfo .wrap{
	width: 100%;
	max-width: 100%;
}
.sec_topinfo .inner{
	display: flex;
	justify-content: flex-start;
}

.sec_topinfo .img{
	/* margin-right: -230px; */
	/* width: 960px; */
	width: 50%;
}

.sec_topinfo .img img{
	vertical-align: inherit;
}

.sec_topinfo .txt{
	width: 50%;
}
.sec_topinfo .box{
	/* width: 720px;
	height: 800px; */
	width: 100%;
	height: auto;
	width: 80%;
	margin: 0 0 0 auto;
	background: #011341;
	display: flex;
	justify-content: center;
	flex-direction: column;
	/* padding: 75px 75px 10px; */
	padding: 16vw 4vw 12vw 6vw;
}
.sec_topinfo .box dt,
.sec_topinfo .box dd{
	color: #fff;
}

.sec_topinfo .box .btn .btn_more:hover{
	color: #000613;
}
@media screen and (max-width: 768px) {
	.sec_topinfo{
		padding-bottom: 23%;
	}
	.sec_topinfo .wrap{
		width: 100%;
	}
	.sec_topinfo::before{
		width: calc(100% - 4vw);
		height: calc(100% + 290px);
	}
	.sec_topinfo .txt{
		position: absolute;
		top: 0;
		left: 0;
	}
	.sec_topinfo .txt::before {
    content: '';
    background-color: #fff;
    width: 4vw;
    height: 100px;
    display: block;
    position: absolute;
    left: 4vw;
}
.section_top .ttl::before{
	max-width: 6vw;
}
	.sec_topinfo .ttl{
		position: relative;
		top: 0;
		left: 0.05em;
		line-height: 0.7;
	}
	.sec_topinfo .inner{
		display: block;
	}
	.sec_topinfo .img{
		margin-left: auto;
		margin-right: 0;
		width: calc(100% - 8vw);
	}
	.sec_topinfo .box{
		width: 53vw;
		height: auto;
		min-height: 185px;
		padding: 16% 5% 10%;
		margin: 0.4vw 0 0 4vw;
		justify-content: flex-start;
		position: relative;
		
	}

	.sec_topinfo .box dd .btn{
		margin-top: 12%;
	}
}


/* toprecruit
--------------------------------*/
.sec_toprecruit{
	padding-bottom: 125px;
}
.sec_toprecruit::after{
	content: '';
	position: absolute;
	top: 2px;
	right: 0;
	width: 50%;
	height: 100%;
	background: #011341;
}


.sec_toprecruit .wrap{
	width: 100%;
	max-width: 90%;
	margin: 0 0 0 auto;
}
.sec_toprecruit .inner{
	/* max-width: 1671px; */
	/* max-width: 2016px;
	width: calc(80% + 720px); */
	margin-left: auto;
	z-index: 3;
	position: relative;
}
.sec_toprecruit .inner::before{
	content: '';
	position: absolute;
	top: -10px;
	right: 0;
	width: 45%;
	height: 50%;
	z-index: -1;
	background: #fff;
}
.sec_toprecruit .ttl{
	text-align: right;
	right: 0;
	z-index: 10;
	position: relative;
	line-height: 0.78;
}


@media all and (-ms-high-contrast: none) {

	.sec_toprecruit .ttl.noIE::before{
		display: none;
	}
}

.sec_toprecruit .txt{
	position: absolute;
	right: 0;
	top: -0.5vw;
}
.sec_toprecruit .ttl::before{
	right: 0;
	left: auto;
	background: linear-gradient(to right, rgba(0,0,0,0),rgba(0,0,0,1));
}
.sec_toprecruit .img{
	/* width: 1124px; */
	width: 50vw;
	/* transform: translateY(1.6%); */
}
.sec_toprecruit .box{
	/* width: 700px;
	height: 400px; */
	background: #fff;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	/* padding: 62px 65px 10px; */
	padding: 5vw 13vw 7vw 5vw;
	margin-left: auto;
	margin-top: -5px;
	z-index: 9;
	position: relative;
}

@media screen and (max-width: 768px) {
	.sec_toprecruit{
		padding-bottom: 21%;
	}
	.sec_toprecruit::before {
    width: calc(100% - 4vw);
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    /* width: calc(50% + 720px); */
    height: 40%;
    background: #fff;

		display: none;
}
	.sec_toprecruit::after{
		width: 50%;
		top: 50%;
	}
	.sec_toprecruit .inner{
		max-width: 100%;
		width: auto;
		margin-left: auto;
		z-index: 3;
		position: relative;
	}
	.sec_toprecruit .inner::before{
		display: none;
		width: calc(100% - 4vw);
	}
	.sec_toprecruit .ttl{
		text-align: left;
		left: -1px;
		line-height: 0.75;
	}
	.sec_toprecruit .txt::before {
    content: '';
    background-color: #fff;
    width: 4vw;
    height: 100px;
    display: block;
    position: absolute;
    left: 4vw;
		top: -0.2vw;
}
	.sec_toprecruit .txt{
		right: auto;
		left: 0;
		top: 0;
	}
	.sec_toprecruit .ttl::before{
		right: auto;
		left: 0;
		max-width: 6vw;
		background: linear-gradient(to left, rgba(0,9,26,0),rgba(0,9,26,0.7));
	}
	.sec_toprecruit .img{
		margin-left: auto;
		margin-right: 0;
		width: 100%;
		transform: none;
	}
	.sec_toprecruit .box{
		width: 53vw;
		height: auto;
		padding: 10% 6%;
		margin: 0 0 0 4vw;
	}

	.sec_toprecruit .wrap{
		width: 100%;
		max-width: calc(100% - 8vw);
	}

	.sec_toprecruit .img{
		width: 100%;
		max-width: calc(100% - 8vw);
	}

	.sec_toprecruit .img img{
		width: 100%;
	}
}

/* topstaff
--------------------------------*/
.sec_topstaff{
	position: relative;
}
.sec_topstaff .wrap{
	/* max-width: 1600px; */
	margin-right: 0;
	width: 82%;
	max-width: 82%;
}
.sec_topstaff::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: #011341;
	z-index: -1;
}
.sec_topstaff .ttl{
	font-size: 3.2rem;
	font-size: 2.65vw;
	letter-spacing: .1em;
	font-weight: 700;
}
.sec_topstaff .list{
	display: flex;
	justify-content: flex-start;
	margin-top: 50px;
}
.sec_topstaff .list li a{
	display: block;
	background: #fff;
	position: relative;
}
.sec_topstaff .list li a::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 3px solid transparent;
	transition: border .4s;
	z-index: 1;
}
.sec_topstaff .list .img{
	position: relative;
}

.sec_topstaff .list .img img{
	width: 100%;
}
.sec_topstaff .list .catch{
	/* font-size: 2.4rem; */
	/* font-size: 1.5rem; */
	font-size: 1.3vw;
	color: #011341;
	font-weight: 700;
	letter-spacing: .1em;
	position: absolute;
	left: 0;
	text-align: center;
	background: #fff;
	padding: 1.1em 0;
	display: inline-block;
	bottom: 0;
	/* min-width: 405px; */
	width: 78%;
	transition: background .4s;
}
.sec_topstaff .list dl{
	padding: 30px 2.2vw;
}
.sec_topstaff .list dt{
	/* font-size: 4.5rem; */
	font-size: 2.2rem;
	font-size: 1.7vw;
	line-height: 1;
	color: #000613;
	font-weight: 700;
	opacity: .2;
	margin-bottom: 25px;
}
.sec_topstaff .list dd{
	/* font-size: 2.4rem; */
	font-size: 1.4rem;
	font-size: 1vw;
	color: #000613;
	line-height: 1.67;
}
.sec_topstaff .list dd .name{
	/* font-size: 3.2rem; */
	font-size: 2rem;
	font-size: 1.6vw;
	font-weight: 500;
}
.sec_topstaff .list dd .name .en{
	/* font-size: 2rem; */
	font-size: 1.2rem;
	font-size: 0.9vw;
	font-weight: 300;
	margin-left: 1.5em;
}
.sec_topstaff .list a:hover .catch{
	background: #4AFF88;
}
.sec_topstaff .list li a:hover::before{
	border-color: #4AFF88;
}
@media screen and (max-width: 768px) {
	.sec_topstaff{
		position: relative;
		padding-bottom: 17%;
	}
	.sec_topstaff .wrap{
		max-width: 100%;
		width: calc(100% - 8vw);
		margin-right: 0;
	}
	.sec_topstaff::after{
	}
	.sec_topstaff .ttl{
		font-size: 5.2vw
	}
	.sec_topstaff .list{
		display: block;
		margin-top: 11%;
	}
	.sec_topstaff .list li a{
		display: block;
	}
	.sec_topstaff .list li a::before{
		display: none;
	}
	.sec_topstaff .list .img{
		position: relative;
	}
	.sec_topstaff .list .catch{
		font-size: 3.1vw;
		width: 52vw;
		min-width: 52vw;
	}
	.sec_topstaff .list dl{
		padding: 4%;
	}
	.sec_topstaff .list dt{
		font-size: 5.86vw;
		margin-bottom: 3%;
	}
	.sec_topstaff .list dd{
		font-size: 3.1vw;
	}
	.sec_topstaff .list dd .name{
		font-size: 4.2vw;
		margin-top: 2%;
		display: block;
	}
	.sec_topstaff .list dd .name .en{
		font-size: 2.6vw;
		margin-left: 1em;
	}
}

/* topcareer
--------------------------------*/
.sec_topcareer{
	position: relative;
	padding-top: 80px;
	padding-bottom: 80px;
}
.sec_topcareer::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: #011341;
	z-index: -1;
}

.sec_topcareer .wrap{
	width: 64%;
	max-width: 64%;
	margin: 0 auto;
}
.sec_topcareer .list li a{
	/* height: 540px; */
	/* height: 360px; */
	/* height: 39vh; */
	height: auto;
}

.sec_topcareer .list li a:before{
	content:"";
	display: block;
	width:0;
	height:0;
	padding-bottom:42%;
	
}
@media screen and (max-width: 768px) {
	.sec_topcareer{
		padding: 0;
	}
	.sec_topcareer .wrap{
		width: 100%;
	}
	.sec_topcareer::after{
		display: none;
	}
	.sec_topcareer .list li a{
		height: 46.875vw;
	}

	.sec_topcareer .wrap{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
}

/* toprecruit2
--------------------------------*/
.sec_toprecruit2{
	padding-top: 80px;
}

.sec_toprecruit2::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	background: #011341;
	z-index: -1;
}
.sec_toprecruit2 .list{
	display: flex;
	justify-content: flex-start;
}
.sec_toprecruit2 .list li{
	flex: 1;
}
.sec_toprecruit2 .list li+li{
	margin: 0;
}
.sec_toprecruit2 .list li a{
	/* height: 540px; */
	/* height: 375px; */
	height: auto;
}

.sec_toprecruit2 .list li a:before{
	content:"";
	display: block;
	width:0;
	height:0;
	padding-bottom:75%;
	
}

.sec_toprecruit2 .wrap{
	width: 80%;
	max-width: 80%;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.sec_toprecruit2{
		padding: 0;
	}
	.sec_toprecruit2 .wrap{
		width: 100%;
	}
	.sec_toprecruit2 .list{
		display: block;
	}
	.sec_toprecruit2 .list li,
	.sec_toprecruit2 .list li+li{
		margin-top: 2%;
	}
	.sec_toprecruit2 .list li a{
		height: 46.875vw;
	}

	.sec_toprecruit2 .wrap{
		width: 100%;
		max-width: 100%;
	}
}