/* ******************************************************************
 *	File name		: top.css
 *	Summary			: page layout
 * ******************************************************************
 */
/*

blue #004DA1 rgba(0,77,161,0.5)

*/

/* ------------------------------------------------
   base
------------------------------------------------- */

body{
	height:100%;
	background:#EEF4F9;
	}
	#wrapper{
		height:100%;
}
header{
	position:absolute;
	top:0px;
}
main{
	height:100%;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	body{
		height:auto;
	}
	footer{
		position:relative;
	}
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#bdid_top main .container{
		max-width:600px;
	}
}


/* ------------------------------------------------
   top_MV
------------------------------------------------- */

#top_MV{
	position:relative;
	top:126px;
	height:calc(56.25vw - 80px);
	margin:0px 0 126px;
	overflow:hidden;
	background:var(--color-main);
}

#top_MV h2{
	position:absolute;
	top:60px;
	right:10%;
	width:360px;
/*	height:193px;*/
	z-index:10;
}

#top_MV #movie{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(56.25vw - 280px);

	z-index:0;
	overflow:hidden;
	}
/*
	#top_MV #movie #over_crop{
		position:absolute;
	}
*/
	#top_MV #movie #vimeo{
		position:absolute;
		top:calc(-36.6vw - 140px);
		left:-15%;
		width:130vw;
		height:130vw;
		background:#000;
	}
	#top_MV #movie #vimeo div{
		position:relative;
		width:100%;
		height:100%;
	}
	#top_MV #movie #vimeo div iframe{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
}
#top_MV #top_MV_cover{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.01);
}

#top_MV_anime{
	display:block;
	position:absolute;
	left:0px;
	bottom:0px;
	z-index:0;
	width:100%;
	height:104px;
	overflow:hidden;
	background:url(../../image/top/top_MV_anime_2.png) repeat-x;
	animation:top_MV_anime var(--top_MV_anime_speed) linear 0s infinite both;
	}
	#top_MV_anime img{
		display:none;
}
#top_MV.height_s #top_MV_anime{
	height:52px;
	background-size:2350px 52px;
	animation:top_MV_anime_s var(--top_MV_anime_speed) linear 0s infinite both;
}

@keyframes top_MV_anime{
	0% {background-position:0 0;}
	100% {background-position:-4700px 0;}
}
@keyframes top_MV_anime_s{
	0% {background-position:0 0;}
	100% {background-position:-2350px 0;}
}

/* next_scroll_btn */
#next_scroll_btn{
	position:absolute;
	right:calc(15vw - 20px - 41px + 5px);
	top:290px;
	width:82px;
	height:calc(100% - 290px - 104px - 20px);
	overflow:hidden;
	}
	#next_scroll_btn::before{
		content:" ";
		position:absolute;
		top:82px;
		left:calc(50% - 3px);
		width:6px;
		height:calc(100% - 82px);
		background:linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
	}
	#next_scroll_btn::after{
		content:" ";
		position:absolute;
		top:82px;
		left:calc(50% - 3px);
		width:6px;
		height:20px;
		background:rgba(255,255,255,0.2);
		animation:scroll_cursor 4s linear 0s infinite both;
	}
	#next_scroll_btn a{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:82px;
		height:82px;
		text-decoration:none;
		font-size:0.8rem;
		border:2px solid rgba(255,255,255,0.5);
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		color:#FFF;
		transition-duration:0.5s;
		}
		#next_scroll_btn a:hover{
			background:rgba(0,0,0,0.5);
		}
		#next_scroll_btn a::before{
			content:" ";
			position:absolute;
			top:3px;
			left:3px;
			width:72px;
			height:72px;
			border:2px dotted rgba(255,255,255,0.8);
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			border-radius:50%;
			animation:scroll_turn 5s linear 0s infinite both;
		}
		#next_scroll_btn a::after{
			content:" ";
			position:absolute;
			top:3px;
			left:3px;
			width:72px;
			height:72px;
			background:rgba(255,255,255,0.2);
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			border-radius:50%;
			animation:scroll_circle 2s linear 0s infinite both;
}

@keyframes scroll_cursor{
	0% {top:82px;opacity:0;}
	100% {top:100%;opacity:1;}
}
@keyframes scroll_turn{
	0% {transform:rotate(0deg);}
	100% {transform:rotate(180deg);}
}
@keyframes scroll_circle{
	0% {top:50%;left:50%;width:0px;height:0px;opacity:1;}
	100% {top:3px;left:3px;width:72px;height:72px;opacity:0;}
}

/* --- responsive --- */
@media only screen and (max-width:1200px){
	#top_MV{
		height:calc(56.25vw + 200px);
	}
	#top_MV #movie{
		height:56.25vw;
	}
	#top_MV #movie #vimeo{
		top:-36.6vw;
	}
}
@media only screen and (max-width:767px){
	#top_MV{
		top:0px;
		height:calc(56.25vw + 400px);
		margin:0px 0 0px;
	}
	#top_MV h2{
		top:auto;
		bottom:140px;
		right:calc(50% - 140px);
		width:281px;
		}
		#top_MV.height_s h2{
			bottom:90px;
	}
	#next_scroll_btn{
		display:none;
	}
}
@media only screen and (max-width:500px){
	#top_MV h2{
		top:300px;
		bottom:auto;
		}
		#top_MV.height_s h2{
			bottom:90px;
	}
}

/* ------------------------------------------------
   float_banner
------------------------------------------------- */

#float_banner{
	position:absolute;
	bottom:210px;
	left:10px;
	z-index:999999999;
	}
	#float_banner img{
		width:100%;
		max-width:320px;
		margin:5px;
		-moz-box-shadow:var(--shadow);
		-webkit-box-shadow:var(--shadow);
		box-shadow:var(--shadow);
	}
	#float_banner a{
		transition:0.5s;
	}
	#float_banner a:hover{
		opacity:0.7;
}

/* --- responsive --- */
@media only screen and (max-width:1600px){
	#float_banner{
		bottom:10px;
	}
}
@media only screen and (max-width:767px){
	#float_banner{
		top:60vw;
		left:calc(50% - 160px);
		right:calc(50% - 160px);
		max-width:calc(100% - 40px);
	}
}

/* ------------------------------------------------
   top_about
------------------------------------------------- */

#top_about{
	padding-top:60px;
	margin-bottom:60px;
}
#top_about h2{
	margin-bottom:40px;
	color:var(--color-main);
	font-weight:bold;
	font-size:2.5rem;
	line-height:1.4;
}
#top_about .top_about_flex{
		overflow:hidden;
		position:relative;
		width:100%;
	}
	#top_about .top_about_text{
		width:520px;
	}
	#top_about .top_about_text p{
		margin-bottom:24px;
		color:var(--color-main);
		font-weight:bold;
		line-height:2.4;
	}

#top_about .img_frame{
	position:absolute;
	top:10px;
	right:0;
	overflow:hidden;
	width:calc(50% - 80px);
	height:100%;
	object-fit:cover;
	}
	#top_about .img_frame .img_01,#top_about .img_frame .img_02{
		position:absolute;
		width:100%;
		height:100%;
		background:url("../../image/top/top_about_1.jpg");
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		animation: slide-animation-01 10s infinite;
	}
	#top_about .img_frame .img_02{
		background:url("../../image/top/top_about_2.jpg");
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		animation: slide-animation-02 10s infinite;
	}
	@keyframes slide-animation-01 {
		0% {opacity: 1;}
		20% {opacity: 1;}
		40% {opacity: 0;}
		60% {opacity: 0;}
		80% {opacity: 0;}
		100% {opacity: 1;}
	}
	@keyframes slide-animation-02 {
		0% {opacity: 0;}
		20% {opacity: 0;}
		40% {opacity: 1;}
		60% {opacity: 1;}
		80% {opacity: 1;}
		100% {opacity: 0;}
}

/* --- responsive --- */
@media only screen and (max-width:1200px){
	#top_about .top_about_text{
		width:50%;
	}
	#top_about img{
		width:calc(50% - 40px);
	}
}
@media only screen and (max-width:767px){
	#top_about{
	padding-top:40px;
	margin-bottom:0;
	}
	#top_about h2{
		margin-bottom:16px;
		font-size:1.75rem;
	}
	#top_about .top_about_flex{
			overflow:hidden;
			position:relative;
			width:100%;
		}
		#top_about .top_about_text{
			width:100%;
		}
		#top_about .top_about_text p{
			margin-bottom:16px;
		}
		#top_about .img_frame{
			position:relative;
			width:100%;
			height:280px;
	}
}


/* ------------------------------------------------
   top_product
------------------------------------------------- */

#top_product{
	margin-bottom:80px;
	padding:60px 0 80px;
	background:var(--color-main);
	color:#FFF;
}
#top_product h2{
	margin-bottom:32px;
	text-align:center;
	font-weight:bold;
	font-size:3rem;
	line-height:1.4;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#top_product{
		margin-bottom:40px;
		padding:40px 0 24px;
	}
	#top_product h2{
		margin-bottom:24px;
		font-size:2rem;
	}
}
	
/* ------------------------------------------------
   top_service
------------------------------------------------- */

#top_service{
	margin-bottom:40px;
}
#top_service h2{
	display:inline-block;
	margin-bottom:16px;
	padding:4px 32px;
	background:var(--color-main);
	color:#EEF4F9;
	font-size:1.5rem;
	font-weight:bold;
	letter-spacing:4px;
}
#top_service .top_service_flex{
	display:flex;
	overflow:hidden;
	position:relative;
	width:100%;
	margin-bottom:60px;
}
#top_service .top_service_flex .top_service_text{
	width:520px;
}
#top_service .top_service_flex .top_service_title{
	margin-bottom:8px;
	color:var(--color-main);
	font-weight:bold;
	font-size:2.5rem;
	line-height:1.4;
}
#top_service .top_service_flex .top_service_desc{
	margin-bottom:24px;
	color:var(--color-main);
	font-weight:bold;
}
#top_service .top_service_flex ul{
		margin-bottom:40px;
	}
	#top_service .top_service_flex .top_service_list{
		float:right;
		margin-bottom:10px;
		padding-left:70px;
		font-size:0.75rem;
		line-height:1.7;
	}
	#top_service .top_service_flex .top_service_list::before{
		content:"";
		display:block;
		float:left;
		width:60px;
		height:62px;
		margin-left:-70px;
	}
	#top_service .top_service_flex .top_service_list:nth-child(1)::before{
		background:url("../../image/top/01.png");
		background-size:contain;
		background-repeat:no-repeat;
		}
		#top_service .top_service_flex .top_service_list:nth-child(2)::before{
			background:url("../../image/top/02.png");
			background-size:contain;
			background-repeat:no-repeat;
		}
		#top_service .top_service_flex .top_service_list:nth-child(3)::before{
			background:url("../../image/top/03.png");
			background-size:contain;
			background-repeat:no-repeat;
	}
	#top_service .top_service_flex .top_service_list h4{
		display:inline-block;
		margin-bottom:5px;
		color:var(--color-main);
		font-size:1.5rem;
		font-weight:bold;
	}
	#top_service .top_service_flex .top_service_list h4::after{
		content:"";
		display:block;
		width:100%;
		height:16px;
		margin-top:-16px;
		background:var(--color-primary);
}
#top_service .top_service_flex .top_service_img{
		display:flex;
		position:absolute;
		right:0;
		max-width:calc(50% - 80px);
		height:100%;
		margin-top:10px;
	}
	#top_service .top_service_flex .top_service_img img{
		max-width:calc(20% - 5px);
		margin-left:5px;
		object-fit:cover;
}
/* --- responsive --- */
@media only screen and (max-width:1020px){
	#top_service .top_service_flex .top_service_text{
		width:60%;
	}
	#top_service .top_service_flex .top_service_img{
			max-width:calc(40% - 20px);
		}
		#top_service .top_service_flex .top_service_img img{
			max-width:calc(20% - 1px);
			margin-left:1px;
	}
}
@media only screen and (max-width:767px){
	#top_service{
		margin-bottom:24px;
	}
	#top_service h2{
		margin-bottom:10px;
		padding:4px 24px;
		font-size:1.125rem;
	}
	#top_service .top_service_flex{
		flex-direction:column;
		margin:0 auto 24px;
	}
	#top_service .top_service_flex .top_service_text{
		width:100%;
	}
	#top_service .top_service_flex .top_service_title{
		margin-bottom:8px;
		font-size:1.75rem;
	}
	#top_service .top_service_flex .top_service_desc{
		margin-bottom:16px;
	}
	#top_service .top_service_flex .top_service_list{
		margin:0 auto 10px;
		padding-left:40px;
		font-size:0.75rem;
		}
		#top_service .top_service_flex .top_service_list::before{
			width:32px;
			height:32px;
			margin-top:5px;
			margin-left:-40px;
		}
	#top_service .top_service_flex .top_service_img{
			position:relative;
			max-width:100%;
			padding:0 20px;
		}
		#top_service .top_service_flex .top_service_img img{
			max-width:calc(20% - 1px);
			margin-left:1px;
	}
}

/* top_service_depertment */
#top_service .top_service_department{
	display:flex;
	justify-content:space-between;
	width:100%;
	height:480px;
	margin-bottom:40px;
	}
	#top_service .top_service_department div{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		width:calc(100% / 3 - 1px);
		background:var(--color-main);
	}
	#top_service .top_service_department div:nth-of-type(1){
		background:url("../../image/top/top_service_eigyo.jpg");
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	#top_service .top_service_department div:nth-of-type(2){
		background:url("../../image/top/top_service_seizo.jpg");
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	#top_service .top_service_department div:nth-of-type(3){
		background:url("../../image/top/top_service_FA.jpg");
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	#top_service .top_service_department div h3{
		margin-bottom:20px;
		color:#FFF;
		font-size:2.5rem;
		font-weight:bold;
		line-height:1;
		letter-spacing:2px;
	}
	#top_service .top_service_department div p{
		padding:14px 10px;
		background:var(--color-primary);
		color:var(--color-main);
		font-size:1.125rem;
		font-weight:bold;
		text-align:center;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#top_service .top_service_department{
		flex-direction:column;
		width:100%;
		height:auto;
		margin-bottom:24px;
		}
		#top_service .top_service_department div{
			width:100%;
			margin-bottom:1px;
			padding:20px;
		}
		#top_service .top_service_department div h3{
			margin-bottom:10px;
			font-size:2rem;
		}
}

/* top_service_btn */
#top_service .top_service_btn a{
	display:flex;
	justify-content:space-between;
	width:100%;
	align-items:center;
	margin-bottom:10px;
	padding:20px;
	border-radius:8px;
	font-weight:bold;
	text-decoration:none;
	transition:0.5s;
	}
	#top_service .top_service_btn a::after{
		content:"";
		display:block;
		width:24px;
		height:24px;
		background:url("../../image//base/arrow_l.png");
		background-size:contain;
		background-repeat:no-repeat;
	}
	#top_service .top_service_btn a:hover{
		opacity:0.5;
	}
	#top_service .top_service_btn .btn_equipment{
		height:80px;
		box-shadow:var(--shadow);
		background:var(--color-main);
		background-image:url("../../image/top/btn_equipment.jpg");
		background-size:cover;
		background-position:center;
		color:#FFF;
	}
	#top_service .top_service_btn .btn_sample{
		height:160px;
		box-shadow:var(--shadow);
		background:var(--color-gray-m);
		background-image:url("../../image/top/btn_sample.jpg");
		background-position:center;
		background-repeat:no-repeat;
		color:#FFF;
		text-shadow:0px 0px 10px rgba(0, 0, 0, 0.4);
}


/* ------------------------------------------------
   top_philosophy
------------------------------------------------- */

#top_philosophy{
	padding:60px 0 80px;
	background:var(--color-main);
	color:#FFF;
}
#top_philosophy h2{
	display:inline-block;
	margin-bottom:16px;
	padding:4px 32px;
	background:#EEF4F9;
	color:var(--color-main);
	font-size:1.5rem;
	font-weight:bold;
	letter-spacing:4px;
}
#top_philosophy .top_philosophy_flex{
	display:flex;
	justify-content:space-between;
}
#top_philosophy .top_philosophy_flex .top_philosophy_title{
	width:50%;
	font-size:2rem;
	font-weight:bold;
	line-height:1.4;
}
#top_philosophy .top_philosophy_flex div{
	width:calc(70% - 80px);
}
#top_philosophy .top_philosophy_flex div p{
	margin-bottom:20px;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#top_philosophy{
		padding:40px 0 24px;
	}
	#top_philosophy h2{
		margin-bottom:16px;
		padding:4px 24px;
		font-size:1.125rem;
	}
	#top_philosophy .top_philosophy_flex{
		flex-direction:column;
	}
	#top_philosophy .top_philosophy_flex .top_philosophy_title{
		width:100%;
		margin-bottom:10px;
		font-size:1.75rem;
	}
	#top_philosophy .top_philosophy_flex div{
		width:100%;
	}
}


/* ------------------------------------------------
   top_interview
------------------------------------------------- */

#top_interview{
	padding:80px 0 40px;
	background:url("../../image/top/top_interview_bg.png");
	background-position:top right;
	background-size:contain;
	background-repeat:no-repeat;
}
#top_interview h2{
	margin-bottom:16px;
	font-size:2rem;
	font-weight:bold;
	text-align:center;
}
#top_interview p{
	margin-bottom:32px;
	text-align:center;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#top_interview{
		padding:32px 0 24px;
		background-size:cover;
	}
	#top_interview p{
		margin-bottom:10px;
	}
}


/* ------------------------------------------------
   top_recruit
------------------------------------------------- */

#top_recruit{
	width:100%;
	background:var(--color-recruit);
	background-image:url("../../image/top/top_recruit_bg.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#top_recruit .top_recruit_text{
		max-width:600px;
		padding:80px 0 40px;
		color:#FFF;
	}
	#top_recruit .top_recruit_text h2{
		display:inline-block;
		margin-bottom:16px;
		padding:4px 32px;
		background:#EEF4F9;
		color:var(--color-recruit);
		font-size:1.5rem;
		font-weight:bold;
		letter-spacing:4px;
	}
	#top_recruit .top_recruit_text p{
		margin-bottom:20px;
	}
	#top_recruit .top_recruit_text .top_recruit_title{
		font-size:2rem;
		font-weight:bold;
		line-height:1.4;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#top_recruit .top_recruit_text{
		padding:40px 0 10px;
		}
		#top_recruit .top_recruit_text h2{
			padding:4px 24px;
			font-size:1.125rem;
		}
		#top_recruit .top_recruit_text p{
			margin-bottom:10px;
		}
		#top_recruit .top_recruit_text .top_recruit_title{
			font-size:1.5rem;
	}
}

/* top_recruit_btn */
#top_recruit .top_recruit_btn{
	display:flex;
	justify-content:space-between;
	width:100%;
	height:100px;
	}
	#top_recruit .top_recruit_btn a{
		display:flex;
		justify-content:center;
		align-items:center;
		width:calc(100% / 3 - 1px);
		padding:20px;
		box-shadow:var(--shadow);
		background:var(--color-recruit);
		color:#FFF;
		font-size:1.25rem;
		font-weight:bold;
		text-decoration:none;
		transition:0.5s;
	}
	#top_recruit .top_recruit_btn a::after{
		content:"";
		display:block;
		width:32px;
		height:32px;
		margin-left:8px;
		background:url("../../image/base/arrow_l.png");
		background-size:contain;
		background-repeat:no-repeat;
	}
	#top_recruit .top_recruit_btn a:hover{
		opacity:0.6;
		background:#000;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#top_recruit .top_recruit_btn{
		flex-direction:column;
		height:100%;
		}
		#top_recruit .top_recruit_btn a{
			width:100%;
			margin-top:2px;
			padding:10px 20px;
			font-size:1rem;
		}
		#top_recruit .top_recruit_btn a::after{
			width:24px;
			height:24px;
			margin-left:8px;
		}
}