@charset "UTF-8";

/*===== header =====*/

#section--ourvalue header {
	height: 85px; /*元は100px*/
	background-color: transparent !important;
}
#section--ourvalue div#header .header_row{
	padding: 10px 4rem 0; /*元は 1.5rem 4rem 0x*/
}
#section--ourvalue div#header .comp__header-list li,
#section--ourvalue div#header .comp__header-list li a {
    color: #fff;
}
#section--ourvalue div#header .comp__header-list li a:hover {
    color: #005EAD;
}
#section--ourvalue div#header ul.nav{
	padding: 5px 0 0; /*元は 10px 0 0*/
}
#section--ourvalue div#header ul.nav li {
	height: 36px; /*元は 40px*/
	color: #fff;
}
#section--ourvalue div#header ul.nav li a {
	height: 36px; /*元は 40px*/
	line-height: 36px;
	color: #fff;
}
#section--ourvalue div#header ul.nav li.btn_contact a{
	border:1px solid #fff;
}
#section--ourvalue div#header ul.nav li a:hover,
#section--ourvalue div#header ul.nav li a.current{
    color: #005EAD;
}
#section--ourvalue div#header.header-sticky{
	display: none;
}
#section--ourvalue .bbd__title a,
#section--ourvalue .comp--bddmenu dt a,
#section--ourvalue .comp--bddmenu li a{
	color: #201E1E !important;
}
#section--ourvalue .bbd__title a:hover,
#section--ourvalue .comp--bddmenu dt a:hover,
#section--ourvalue .comp--bddmenu li a:hover{
	color: #f5af3c !important;
}

@media only screen and (max-width: 978px) {
	#section--ourvalue .menu-trigger span:nth-of-type(1) {
			top: 0;
			background-color: #fff;
	}
	#section--ourvalue .menu-trigger span:nth-of-type(2) {
			top: 10px;
			background-color: #fff;
	}
	#section--ourvalue .menu-trigger span:nth-of-type(3) {
			bottom: 0;
			background-color: #fff;
	}
	#section--ourvalue header {
			height: 70px;
	}
	#section--ourvalue #header {
			background-color: transparent;
	}
	#section--ourvalue div#header .header_row{
		padding: 0;
	}
	#section--ourvalue div#header .header_row .sp_contact a{
		color: #fff;
		border:1px solid #fff;
	}
}

/*===== contents =====*/

#section--ourvalue section h2{
	font-size: 5.0rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 2px;
}
#section--ourvalue section p{
	font-size: 1.8rem;
	line-height: 2;
}
#section--ourvalue section p.link_btn a{
	display: inline-block;
	height: 20px;
	line-height: 20px;
	padding-right: 30px;
	background: url("/en/asset/images/our-value/sec02_btn.png") top right no-repeat;
	color: #fff;
}
#section--ourvalue section p.link_btn a:hover{
	opacity: 0.5;
}

@media only screen and (max-width: 978px) {
	#section--ourvalue section h2{
		font-size: 3.2rem;
	}
	#section--ourvalue section p{
		font-size: 1.6rem;
		line-height: 1.8;
	}
}

/*===== sec01 =====*/

#sec01{
	position: relative;
}
#sec01 .video_wrap{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height: 100vh;
}
#sec01 .video_wrap video{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#sec01 .scene01{
	max-width: 118rem;
	height: calc(100vh - 85px);
	margin: 0 auto;
	position: relative;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sec01 .scene01 h1{
	text-align: center;
	overflow: hidden;
}
#sec01 .scene01 h1 span{
	display: block;
	opacity: 0;
	animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#sec01 .scene01 h1 span:nth-of-type(1){
  animation-name: fadein01;
  animation-duration: 0.5s;
}
#sec01 .scene01 h1 span:nth-of-type(2){
  animation-name: fadein01;
  animation-duration: 0.5s;
	animation-delay: 0.1s;
}
#sec01 .scene01 h1 span:nth-of-type(3){
  animation-name: fadein01;
  animation-duration: 0.5s;
	animation-delay: 0.2s;
}
@keyframes fadein01{
  0% {
     opacity: 1;
     transform: translateY(80px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}
#sec01 .scene01 .scr{
	position: absolute;
	left:0;
	bottom: 0;
}

#sec01 .scene02{
	max-width: 118rem;
	height: 100vh;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
}
#sec01 .scene02 .box01 .mv01{
	width:480px;
	height: 640px;
}
#sec01 .scene02 .box01 .mv01 video{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 15px;
}
#sec01 .scene02 .box01 .pic03{
	display: none;
}
#sec01 .scene02 .box02{
	margin-left: 100px;
}
#sec01 .scene02 .box02 p{
	padding: 0 20px 20px 0;
}
#sec01 .scene02 .box02 p span{
	font-weight: 700;
}
#sec01 .scene02 .box02 .pic01{
	text-align: right;
}
#sec01 .scene02 .box02 .pic02{
	margin-top: -200px;
	margin-left: 50px;
}

@media only screen and (max-width: 978px) {
	#sec01 .scene01{
		max-width: 100%;
		height: calc(100vh - 70px);
	}
	#sec01 .scene01 h1{
		padding: 0 30px;
	}
	#sec01 .scene01 h1 span img{
		width:100%;
		height: auto;
	}
	#sec01 .scene02{
		max-width: 100%;
		height: auto;
		display: block;
	}
	#sec01 .scene02 .box01{
		width: 100%;
		padding: 20px;
		display: flex;
	}
	#sec01 .scene02 .box01 .mv01{
		width:50%;
		height: auto;
	}
	#sec01 .scene02 .box01 .pic03{
		display: block;
		padding: 20px 0 0 20px;
	}
	#sec01 .scene02 .box01 .pic03 div:nth-of-type(1) img{
		width:50%;
		height: auto;
	}
	#sec01 .scene02 .box01 .pic03 div:nth-of-type(2){
		text-align: right;
		padding: 20px 0 0;
	}
	#sec01 .scene02 .box01 .pic03 div:nth-of-type(2) img{
		width:70%;
		height: auto;
	}
	#sec01 .scene02 .box02{
		margin-left: 0;
		padding: 20px;
	}
	#sec01 .scene02 .box02 .pic01,
	#sec01 .scene02 .box02 .pic02{
		display: none;
	}
}

/*===== sec02 =====*/

#sec02{
	position: relative;
	z-index: 110;
}
#sec02 .video_wrap{
	width: 100%;
	height: 100vh;
	position: absolute;
	top:0;
	left:0;
}
#sec02 .video_wrap video{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#sec02 .wrap{
	max-width: 118rem;
	height: 100vh;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
#sec02 h2 span{
	display: block;
}
#sec02 p:nth-of-type(1){
	padding: 30px 0 10px;
}
#sec02 p span{
	font-weight: 700;
}

@media only screen and (max-width: 978px) {
	#sec02 .wrap{
		max-width: 100%;
	}
	#sec02 .wrap div{
		padding: 20px 30px;
	}
	#sec02 h2 span img{
		width:100%;
		height: auto;
	}
}

/*===== sec03 =====*/

#sec03{
	width: 100%;
	height: 100vh;
	background-color: #161B46;
	color: #fff;
	position: relative;
	z-index: 120;
	text-align: center;
}
#sec03 .wrap{
	width: 118rem;
	height: 100vh;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
#sec03 .wrap .bg01{
	width:331px;
	height: 100vh;
	position: absolute;
	top:0;
	left:-50px;;
	overflow: hidden;
}
#sec03 .wrap .bg02{
	width:363px;
	height: 100vh;
	position: absolute;
	top:0;
	right:-50px;
	overflow: hidden;
}
#sec03 .wrap .bg01 img,
#sec03 .wrap .bg02 img{
	animation: loop-scroll_01 40s linear infinite;
}
@keyframes loop-scroll_01 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
#sec03 .wrap .bg03{
	display: none;
}
#sec03 .mark{
	margin: 50px 0;
}

@media only screen and (max-width: 978px) {
	#sec03 .wrap{
		width: 100%;
		overflow: hidden;
	}
	#sec03 .wrap .bg01,
	#sec03 .wrap .bg02{
		display: none;
	}
	#sec03 .wrap .bg03{
		display: block;
		width:calc(100% + 100px);
		height: 100vh;
		position: absolute;
		top:0;
		left:-50px;
		overflow: hidden;
	}
	#sec03 .wrap .bg03 img{
		width:100%;
		animation: loop-scroll_02 40s linear infinite;
	}
	@keyframes loop-scroll_02 {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100%);
		}
	}
	#sec03 .wrap p:nth-of-type(1){
		text-align: left;
	}
	#sec03 .wrap .txt{
		width:100%;
		background:rgba(22,27,70,0.5);
		padding: 30px 20px;
		position: relative;
		z-index: 130;
	}
	#sec03 .mark{
		margin: 30px 0;
	}
	#sec03 .mark img{
		width:50%;
		height: auto;
	}
}

/*===== sec04 =====*/

#sec04{
	width: 100%;
	min-height: 100vh;
	background-color: #fff;
	color: #161B46;
	position: relative;
	z-index: 130;
}
#sec04 .wrap{
	max-width: 118rem;
	height: 50vh;
	margin: 0 auto 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sec04 .wrap h2{
	padding: 0 50px 0 0;
}
#sec04 .wrap > div{
	padding: 200px 0 0 50px;
}
#sec04 p span{
	font-weight: 700;
}
#sec04 p.link_btn a{
	color: #161B46 !important;
}
#sec04 .carousel_wrap{
	display: flex;
	overflow: hidden;
}
#sec04 .carousel_wrap ul{
	display: flex;
	animation: infinity_left 120s infinite linear 0.5s both;
}
@keyframes infinity_left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
#sec04 .carousel_wrap li{
	width: calc(100vw / 10);
}
#sec04 .carousel_wrap li img{
	width:100%;
	height: auto;
}

@media only screen and (max-width: 978px) {
	#sec04 .wrap{
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		padding: 50px 20px;
	}
	#sec04 .wrap h2{
		padding: 0 0 30px;
	}
	#sec04 .wrap > div{
		padding: 0;
	}
	#sec04 .carousel_wrap ul{
	}
	#sec04 .carousel_wrap li{
		width: calc(100vw / 3);
	}
}

/*===== sec05 =====*/

#sec05{
	width: 100%;
	height: 100vh;
	background-color: #161B46;
	color: #fff;
	position: relative;
	z-index: 140;
}
#sec05 .wrap{
	width: 118rem;
	height: 100vh;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
#sec05 h2{
	text-align: center;
}
#sec05 .wrap .box_wrap{
	display: flex;
	margin: 50px 0 0;
}
/*BOX01*/
#sec05 .box01{
	width:428px;
	height: 428px;
	position: relative;
}
#sec05 .box01 .box01_bg01{
	position: absolute;
	top:0;
	left:0;
	z-index: 160;
}
#sec05 .box01 .box01_bg02{
	position: absolute;
	top:-50px;
	left:-50px;
	opacity: 0;
}
#sec05 .box01 .bg_fade.active{
	animation: fade1-2 8s ease forwards;
}
#sec05 .box01 h3{
	background:url("/en/asset/images/our-value/sec05_icon01.png") top center no-repeat;
	padding: 70px 0 0;
	font-size: 2.6rem;
	font-weight: 700;
	text-align: center;
	position: relative;
	z-index: 165;
	margin: 40px 0 20px;
	opacity: 0;
}
#sec05 .box01 h3.active{
	animation: fade1-2 1s ease-in-out 1s forwards;
}
#sec05 .box01 p{
	font-size: 1.8rem;
	text-align: center;
	position: relative;
	z-index: 165;
	opacity: 0;
}
#sec05 .box01 p.active{
	animation: fade1-2 1s ease-in-out 1.5s forwards;
}
/*BOX02*/
#sec05 .box02{
	width:434px;
	height: 434px;
	position: relative;
	margin: 0 -60px 0 -80px;
}
#sec05 .box02 .box02_bg01{
	position: absolute;
	top:0;
	left:0;
	z-index: 150;
}
#sec05 .box02 .box02_bg02{
	position: absolute;
	bottom:-50px;
	right:-50px;
	opacity: 0;
}
#sec05 .box02 .bg_fade.active{
	animation: fade1-2 8s ease 1s forwards;
}
#sec05 .box02 h3{
	background:url("/en/asset/images/our-value/sec05_icon02.png") top center no-repeat;
	padding: 70px 0 0;
	font-size: 2.6rem;
	font-weight: 700;
	text-align: center;
	position: relative;
	z-index: 155;
	margin: 40px 0 20px;
	opacity: 0;
}
#sec05 .box02 h3.active{
	animation: fade1-2 1s ease-in-out 2s forwards;
}
#sec05 .box02 p{
	font-size: 1.8rem;
	text-align: center;
	position: relative;
	z-index: 155;
	opacity: 0;
}
#sec05 .box02 p.active{
	animation: fade1-2 1s ease-in-out 2.5s forwards;
}
/*BOX03*/
#sec05 .box03{
	width:424px;
	height: 424px;
	position: relative;
}
#sec05 .box03 .box03_bg01{
	position: absolute;
	top:0;
	left:0;
	z-index: 140;
}
#sec05 .box03 .box03_bg02{
	position: absolute;
	top:-10px;
	right:-10px;
	opacity: 0;
}
#sec05 .box03 .bg_fade.active{
	animation: fade1-2 8s ease 2s forwards;
}
#sec05 .box03 h3{
	background:url("/en/asset/images/our-value/sec05_icon03.png") top center no-repeat;
	padding: 70px 0 0;
	font-size: 2.6rem;
	font-weight: 700;
	text-align: center;
	position: relative;
	z-index: 145;
	margin: 40px 0 20px;
	opacity: 0;
}
#sec05 .box03 h3.active{
	animation: fade1-2 1s ease-in-out 3s forwards;
}
#sec05 .box03 p{
	font-size: 1.8rem;
	text-align: center;
	position: relative;
	z-index: 145;
	opacity: 0;
}
#sec05 .box03 p.active{
	animation: fade1-2 1s ease-in-out 3.5s forwards;
}
/*CIRCLE*/
#sec05 .box01 .move01,
#sec05 .box02 .move01,
#sec05 .box03 .move01{
	position: absolute;
	top:0;
	left:0;
}
#sec05 .box01 .move01{
	z-index: 160;
}
#sec05 .box02 .move01{
	z-index: 150;
}
#sec05 .box03 .move01{
	z-index: 140;
}
#sec05 .box01 .move01.active{
	animation: move01 1.5s forwards;
}
#sec05 .box02 .move01.active{
	animation: move01 1.5s 1s forwards;
}
#sec05 .box03 .move01.active{
	animation: move01 1.5s 2s forwards;
}
@keyframes move01 {
	0% {
		transform: rotate(0deg);
		opacity: 1:
	}
	100% {
		transform: rotate(360deg);
		opacity: 0;
	}
}
#sec05 .box01 .hide01,
#sec05 .box01 .hide02,
#sec05 .box01 .hide03{
	width:214px;
	height: 214px;
	background-color: #161B46;
	z-index: 160;
}
#sec05 .box02 .hide01,
#sec05 .box02 .hide02,
#sec05 .box02 .hide03{
	width:217px;
	height: 217px;
	background-color: #161B46;
	z-index: 150;
}
#sec05 .box03 .hide01,
#sec05 .box03 .hide02,
#sec05 .box03 .hide03{
	width:212px;
	height: 212px;
	background-color: #161B46;
	z-index: 140;
}
#sec05 .box01 .hide01,
#sec05 .box02 .hide01,
#sec05 .box03 .hide01{
	position: absolute;
	right:0;
	bottom: 0;
}
#sec05 .box01 .hide01.active{
	animation: fade1-1 0.5s linear forwards;
}
#sec05 .box02 .hide01.active{
	animation: fade1-1 0.5s linear 1s forwards;
}
#sec05 .box03 .hide01.active{
	animation: fade1-1 0.5s linear 2s forwards;
}
#sec05 .box01 .hide02,
#sec05 .box02 .hide02,
#sec05 .box03 .hide02{
	position: absolute;
	left:0;
	bottom: 0;
}
#sec05 .box01 .hide02.active{
	animation: fade1-1 0.8s linear forwards;
}
#sec05 .box02 .hide02.active{
	animation: fade1-1 0.8s linear 1s forwards;
}
#sec05 .box03 .hide02.active{
	animation: fade1-1 0.8s linear 2s forwards;
}
#sec05 .box01 .hide03,
#sec05 .box02 .hide03,
#sec05 .box03 .hide03{
	position: absolute;
	top:0;
	left: 0;
}
#sec05 .box01 .hide03.active{
	animation: fade1-1 1s linear forwards;
}
#sec05 .box02 .hide03.active{
	animation: fade1-1 1s linear 1s forwards;
}
#sec05 .box03 .hide03.active{
	animation: fade1-1 1s linear 2s forwards;
}
@keyframes fade1-1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade1-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 978px) {
	#sec05{
		height: auto;
	}
	#sec05 .wrap{
		width: 100%;
		height: auto;
		display: block;
		padding: 50px 20px;
	}
	#sec05 .wrap .box_wrap{
		display: block;
		margin: 30px 0 0;
	}
	#sec05 .box01,
	#sec05 .box03{
		margin: 0 auto;
		padding: 80px 0 0;
	}
	#sec05 .box02{
		margin: -50px auto;
		padding: 80px 0 0;
	}
	#sec05 .box01 h3,
	#sec05 .box02 h3,
	#sec05 .box03 h3{
		font-size: 2.2rem;
		margin: 0 0 20px;
	}
}

@media only screen and (max-width: 450px) {
	#sec05 .wrap{
		padding: 30px 10px;
	}
	#sec05 .box01,
	#sec05 .box03{
		width:350px;
		height: 350px;
		margin: 0 auto;
		padding: 40px 0 0;
	}
	#sec05 .box02{
		width:350px;
		height: 350px;
		margin: -40px auto;
		padding: 40px 0 0;
	}
	#sec05 .box01 .box01_bg01 img,
	#sec05 .box02 .box02_bg01 img,
	#sec05 .box03 .box03_bg01 img{
		width:350px;
		height: 350px;
	}
	#sec05 .box01 h3,
	#sec05 .box02 h3,
	#sec05 .box03 h3{
		font-size: 2.0rem;
		margin: 0 0 10px;
	}
	#sec05 .box01 p,
	#sec05 .box02 p,
	#sec05 .box03 p{
		font-size: 1.6rem;
	}
	#sec05 .box01 .hide01,
	#sec05 .box01 .hide02,
	#sec05 .box01 .hide03,
	#sec05 .box02 .hide01,
	#sec05 .box02 .hide02,
	#sec05 .box02 .hide03,
	#sec05 .box03 .hide01,
	#sec05 .box03 .hide02,
	#sec05 .box03 .hide03{
		width:175px;
		height: 175px;
	}
}

/*===== sec06 =====*/

#sec06{
	position: relative;
	z-index: 170;
}
#sec06 .video_wrap{
	width: 100%;
	height: 100vh;
	position: absolute;
	top:0;
	left:0;
}
#sec06 .video_wrap video{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#sec06 .wrap{
	max-width: 118rem;
	height: 100vh;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
#sec06 h2 span{
	display: block;
}
#sec06 p:nth-of-type(1){
	padding: 30px 0 10px;
}

@media only screen and (max-width: 978px) {
	#sec06 .wrap{
		max-width: 100%;
	}
	#sec06 .wrap div{
		padding: 20px 30px;
	}
	#sec06 h2 span img{
		width:100%;
		height: auto;
	}
}

/* ------------------------------
Fade Effect
------------------------------ */
.fadein {
  opacity: 0;
  transform: translate(0px, 0px);
  transition: all 2s;
}
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein_left {
  opacity: 0;
  transform: translate(-50px, 0px);
  transition: all 2s;
}
.fadein_left.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein_right {
  opacity: 0;
  transform: translate(50px, 0px);
  transition: all 2s;
}
.fadein_right.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein_top {
  opacity: 0;
  transform: translate(0px, 50px);
  transition: all 1s;
}
.fadein_top.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}