@charset "UTF=8";

*{
	margin: 0;
	padding: 0;
	color: #111;
	font-family: 'Noto Serif JP', serif;
}




/* slik */
.slick-prev::before,.slick-next::before{
	color: #050505;
}
.slick-prev{
	left: -100px;
}
.slick-next{
	right: -100px;
}



.contact{
	width: 100%;
	padding: 35px 0;
	background-color: #f5ee41;
	position: relative;
}
.contact div{
	text-align: center;
}
.button{
	width: 23%;
	margin: 20px auto 0;
	padding: 30px 0;
	display: flex;
	justify-content: center;
	gap: 10px;
	background-image: url( ../images/conbutton_back_w.png );
	background-size: 100% 100%;
}
.button p img{
	width: 35px;
	height: auto;
	vertical-align: center;
}
.button:hover {
	transition: all 0.5s;
	color: #e6e6e6;
	background-image: url( ../images/conbutton_back_g.png );
}
.button p img:hover{
	filter: invert(100%);
}
.contact::before{
	content: '';
	display: block;
	position: absolute;
	left:0;
	top: -140px;
	border-top: 70px solid transparent;
	border-left: 50vw solid #f5ee41;
	border-right: calc( 50vw - 17px ) solid transparent; 
	border-bottom: 70px solid #f5ee41; 
}
.con_bottom{
	width: 100%;
	padding-bottom: 105px;
	display: flex;
	justify-content: center;
	gap: 10%;
}
.con_btn_area{
	width: 30%;
}
.con_bottom .button{
	width: 100%;
	margin: 20px 0 0;
}
.contact_btn{
	text-decoration: none;
}

.banner_btn{
	width: 30%;
}
.banner_btn img{
	width: 100%;
}
.banner_btn img:hover{
	opacity: 0.9;
	box-shadow: 0 0 15px #fefefe;
}




/* ファーストビュー */
header{
	width: 100%;
	height: calc( 100vh + 140px );
	background: #050505;
	background: url( ../images/fv_back.jpg );
	position: relative;
}

.fv_copy{
	position: absolute;
	top: 50vh;
	transform: translateY( -50% );
	left: 5vw;
}
.fv_copy h1{
	color: #75757533;
	font-family: 'Open Sans', sans-serif;	font-size: 120px;
	font-weight: 700;
	letter-spacing: 5px;
	line-height: 1.2;
}
.fv_copy h2{
	margin-top: 40px;
	color: #fefefe;
	font-size: 35px;
}

.fv_items p{
	width: 27vw;
}
.fv_items p img{
	width: 27vw;
	height: auto;
}
.item01 img{
	opacity: 0;
	position: absolute;
	right: 9vw;
}
.item02 img{
	opacity: 0;
	position: absolute;
	top: 34vh;
	right: 29vw;
}
.item03 img{
	opacity: 0;
	position: absolute;
	right: 5vw;
	top: 50vh;
}

.copy_action{
	transform: translate( -100%, 0 );
}
.span_action{
	transform: translate( 100%, 0 );
}



/* fv下あいさつ文 */
.bigin{
	margin: -140px auto 0;
	position: relative;
}
.bigin::before{
	content: '';
	display: block;
	position: absolute;
	left:0;
	top: 0;
	border-top: 70px solid transparent;
	border-left: 50vw solid #fefefe;
	border-right: calc( 50vw - 17px ) solid transparent; 
	border-bottom: 70px solid #fefefe; 
}
.bigin::after{
	content: '';
	display: block;
	position: absolute;
	left:0;
	bottom: 0;
	border-top: 70px solid transparent;
	border-left: 50vw solid #3b3b3b;
	border-right: calc( 50vw - 17px ) solid transparent; 
	border-bottom: 70px solid #3b3b3b; 

}
.bigin p{
	padding: 210px 0;
	text-align: center;
	font-size: 22px;
	letter-spacing: 2px;
	line-height: 2.5;
}
.bigin p:nth-child( 2 ){
	display: none;
}



/* 私たちの自信 */
#confidence{
	padding: 140px 0 280px;
	background-color: #3b3b3b;
}
.heading{
	margin-bottom: 150px;
	position: relative;
}
.heading h1{
	width: 100%;
	text-align: center;
	font-size: 55px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;	
	letter-spacing: 2px;
	opacity: 0.65;
}
.heading h2{
	width: 100%;
	color: #fefefe;
	text-align: center;
	position: absolute;
	font-size: 28px;
	letter-spacing: 1px;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
}
.heading_w h1{
	color: #e6e6e6;
}
.heading_w h2{
	color: #050505;
}
.conf{
	margin: 0 auto 125px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 100px;
}
.confback{
	width: 28vw;
	position: relative;
}
.confback img{
	width: 100%;
	height: auto;
}
.confback_bk{
	opacity: 0;
}
.confback_y{
	transform: rotate(-15deg);
	transition: all 0.7s;
	opacity: 0;
	position: absolute;
	top: 30%;
	left: -30%;
}
.confback02_y{
	right: -105%;

}
.confback h2{
	width: 100%;
	opacity: 0;
	transition: all 0.5s;
	font-weight: 700;
	text-align: center;
	letter-spacing: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	transition: all 1s;
}
.confback h2 span{
	font-size: 36px;
	font-weight: 700;
}
.conf p{
	width: 34vw;
	margin: auto 0;
	color: #fefefe;
	letter-spacing: 2px;
	line-height: 2.5;
	font-feature-settings: "palt";
}



/* カスタマイズ社員研修 */
#example{
	width: 100%;
	margin: 0 auto;
	padding: 280px 0;
	position: relative;
	background: url( ../images/back00.jpg );
}
#example::before{
	content: '';
	display: block;
	position: absolute;
	left:0;
	top: 0;
	border-top: 70px solid #f5ee41;
	border-left: 50vw solid transparent;
	border-right: calc( 50vw - 17px ) solid #f5ee41; 
	border-bottom: 70px solid transparent; 
}
#example::after{
	content: '';
	display: block;
	position: absolute;
	left:0;
	bottom: 0;
	border-top: 70px solid transparent;
	border-left: 50vw solid #3b3b3b;
	border-right: calc( 50vw - 17px ) solid transparent; 
	border-bottom: 70px solid #3b3b3b; 
}
#example .heading{
	margin-bottom: 50px;
}
.exsol_copy{
	width: 80%;
	margin: 0 auto;
	display: flex;
}
.exarea{
	width: 60%;
}
.exarea h2{
	text-align: center;
}
.exsol{
	width: 55%;
}
.exsol02{
	margin-top: -150px;
	margin-left: 55%;
}
.exsol03{
	margin-top: -150px;
}
.solarea{
	width: 100%;
	margin-top: 30px;
	position: relative;
}
.solarea > img{
	width: 90%;
	height: auto;
	margin-left: 5%;
}
.solution{
	width: 130%;
}
.solution img {
	width: 100%;
	height: 55%;
	text-align: center;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: -30%;
	transform: translateY(-50%);
	transition: all 0.7s;
}
.solution p{
	width: 60%;
	letter-spacing: 1px;
	line-height: 1.7;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 1s;
}

.excopy{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.excopy img{
	width: 60%;
	height: auto;
	margin-left: 40%;
}
.excopy h1{
	width: 60%;
	height: 10em;
	color: #fefefe;
	letter-spacing: 4px;
	line-height: 1.7;
	writing-mode: vertical-rl;
	position: absolute;
	top: 50%;
	transform: translate( 0, -50% );
}
.line_02{
	color: #fefefe;
	margin-top: 1em;
}
.excopy_y{
	color: #f5ee41;
}



/* 研修の流れ */
#flow{
	width: 100%;
	margin: 0 auto;
	padding: 140px 0 280px;
	background-color: #3b3b3b;
}
.flowarea{
	width: 80%;
	margin: 0 auto;
	display: flex;
}
.flowcon{
	width: 25%;
	border: 1px solid #e6e6e6;
	border-right: none;
	position: relative;
}
.flowcon:last-of-type{
	border-right: 1px solid #e6e6e6;
}
.flow_bk,.flow_y{
	padding: 5px 70px;
	color: #111;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 22px;
	font-weight: 400;
	position: absolute;
	top: -21px;
	left: 50%;
	transform: translateX(-50%);
	background-image: url( ../images/flowback_g.png );
	background-size: 100% 45px;
	background-repeat: no-repeat;
}
.flow_y{
	color: #050505;
	background-image: url( ../images/flowback_y02.png );
}
.step{
	text-align: center;
}
.step h2{
	margin: 61px 0 20px;
	color: #fefefe;
}
.step img{
	width: 25%;
}
.step p{
	margin: 25px 0 40px;
	color: #fefefe;
	font-size: 19px;
	line-height: 1.7;
}
.step span{
	color: #fefefe;
	font-size: 16px;
}
.arrow{
	width: 16px;
	height: auto;
	position: absolute;
	top: 50%;
	right: -8px;
	transform: translateY(-50%);
	z-index: 100;
}



/* 講師紹介 */
#teacher{
	width: 100%;
	margin: 0 auto;
	padding: 280px 0;
	position: relative;
}
#teacher::before{
	content: '';
	display: block;
	position: absolute;
	left:0;
	top: 0;
	border-top: 70px solid #f5ee41;
	border-left: 50vw solid transparent;
	border-right: calc( 50vw - 17px ) solid #f5ee41; 
	border-bottom: 70px solid transparent; 
}
.teacherarea{
	width: 50%;
	margin: 0 auto;
	margin-bottom: 50px;
	display: flex;
	justify-content: space-between;
}
.teacherimg{
	width: 35%;
}
.teacherimg img{
	width: 100%;
	height: auto;
}
.teacherimg h3{
	text-align: center;
	letter-spacing: 1px;
}
.teachersen{
	width: 60%;
	margin: auto 0;
	background-image: url( ../images/confback_y04.png );
	background-size: 100% 90%;
	background-position: 0;
	background-repeat: no-repeat;
}
.teachersen h2{
	margin-bottom: 50px;
	padding-bottom: 5px;
	opacity: 0;
	transition: all 1s;
	text-align: center;
	/* background-image: url( ../images/teacherback.png ); */
	background-size: 75% 18px;
	background-position: center bottom;
	background-repeat: no-repeat;
}
.teachersen p{
	width: 80%;
	margin: 0 auto;
	opacity: 0;
	transition: all 1s;
	text-align: justify;
	letter-spacing: 2px;
	line-height: 2;
}


.con_heading{
	margin: 100px 0 50px;
}
form{
	position: relative;
}
table{
	width: 50%;
	margin: 0 auto;
}
tr{
	padding-bottom: 20px;
	position: relative;
}
tr::after{
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 1px;
	border-bottom: 1px solid #e6e6e6;
}
tr:last-of-type::after{
	display: none;
}
th{
	width: 30%;
	padding: 40px 0;
	font-size: 18px;
	text-align: left;
	letter-spacing: 1px;
}
th span{
	margin-left: 10px;
	padding: 0 5px;
	color: #fefefe;
	font-size: 16px;
	background-color: rgb(216, 29, 29);
}
td{
	width: 60%;
}
td input{
	width: 100%;
	padding: 10px ;
}
.con_con td{
	padding: 30px 0;
}
td textarea{
	width: 100%;
	padding: 10px;
}
.btn{
	position: absolute;
	left: 50%;
	bottom: -150px;
	transform: translateX( -50% );
}
.btn input{
	padding: 25px 70px;

}






@media( max-width: 430px ){


	/* ファーストビュー */
	header{
		width: 100vw;
		height: calc( 100vh + 70px );
		overflow: hidden;
	}
	.fv_copy{
		width: 100%;
		margin-top: -100px;
		overflow: hidden;
		text-align: center;
		left: 0;
	}
	.fv_copy h1{
		font-size: 60px;
	}
	.fv_copy h2{
		margin-top: 10px;
		font-size: 26px;
	}
	
	.fv_items{
		width: 100%;
		width: 100vh;
	}
	.fv_items p{
		overflow: hidden;
	}
	.fv_items p img{
		width: 75vw;
		height: auto;
	}
	.item01 img{
		top: -5vh;
		right: -11vw;
	}
	.item02 img{
		left: -31vw;
		top: 18vh;
	}
	.item03 img{
		margin-top: 50px;
		bottom: 0;
		right: 0;

	}



	/* fvした挨拶文 */
	.bigin{
		width: 100%;
		margin-top: -70px;
	}
	.bigin > p{
		display: none;
		text-align: center;
		font-size: 20px;
		line-height: 2;
	}
	.bigin p:nth-child( 2 ){
		width: 90%;
		margin: 0 auto;
		padding: 140px 0;
		display: block;
		text-align: justify;
		font-size: 20px;
		letter-spacing: 2px;
		line-height: 2;
	}
	.bigin::before{
		border-top: 35px solid transparent;
		border-left: 50vw solid #fefefe;
		border-right: 50vw solid transparent; 
		border-bottom: 35px solid #fefefe; 
	}
	.bigin::after{
		border-top: 35px solid transparent;
		border-left: 50vw solid #3b3b3b;
		border-right: 50vw solid transparent; 
		border-bottom: 35px solid #3b3b3b; 
	}
		



	/* 私たちの自信 */
	#confidence{
		padding: 70px 0;
	}
	.conf{
		margin-bottom: 100px;
		display: block;
	}
	.conf02{
		display: flex;
		flex-direction: column-reverse;
		gap: 0;
	}
	.confback{
		width: 90vw;
		margin: 0 auto;
	}
	.confback h2{
		font-size: 22px;
	}
	.confback h2 span{
		font-size: 34px;
	}
	.conf p{
		width: 85vw;
		margin: 50px auto 0;
	}



	/* お問い合わせボタン */
	.contact{
		padding: 70px 0;
	}
	.contact::before{
		top: -70px;
		border-top: 35px solid transparent;
		border-left: 50vw solid #f5ee41;
		border-right: 50vw solid transparent; 
		border-bottom: 35px solid #f5ee41; 
	}
	.button{
		width: 95%;
	}
	.con_bottom{
		width: 100%;
		height: auto;
		padding-bottom: 105px;
		display: block;
	}
	.con_btn_area{
		width: 95%;
		margin: 0 auto;
	}
	.banner_btn{
		width: 90%;
		margin: 100px auto 0;
	}

	
	



	/* カスタマイズ社員研修 */
	#example{
		padding: 140px 0;
	}
	#example::before{
		border-top: 35px solid #f5ee41;
		border-left: 50vw solid transparent;
		border-right: 50vw solid #f5ee41; 
		border-bottom: 35px solid transparent; 
	}
	#example::after{
		border-top: 35px solid transparent;
		border-left: 50vw solid #3b3b3b;
		border-right: 50vw solid transparent; 
		border-bottom: 35px solid #3b3b3b; 
	}	
	.exsol_copy{
		width: 100%;
		display: block;
		display: flex;
		flex-direction: column-reverse;
	}
	.exarea{
		width: 90%;
		margin: 0 auto;
	}
	.exsol{
		width: 100%;
	}
	.exsol{
		margin-top: 30px;
		margin-bottom: 50px;
	}
	.exsol02{
		margin-left: 0;
	}

	.excopy{
		width: 100%;
		margin-bottom: 100px;
	}
	.excopy img{
		margin: 0 auto;
		text-align: center;
	}
	.excopy h1{
		width: auto;
		top: 25%;
		left: 50%;
		transform: translateX( -50% );
	}



	/* 研修の流れ */
	#flow{
		width: 100%;
		margin: 0 auto;
		padding-bottom: 140px;
	}
	.flowarea{
		display: block;
	}
	.flowcon{
		width: 100%;
		margin-bottom: 60px;
		border: 1px solid #e6e6e6;
	}
	.flowcon:last-of-type{
		border-bottom: 1px solid #e6e6e6;
	}
	.step p{
		margin: 25px 0 40px;
	}
	.arrow{
		display: none;
	}



	/* 講師紹介 */
	#teacher{
		width: 100%;
		padding: 140px 0;
	}
	#teacher::before{
		border-top: 35px solid #f5ee41;
		border-left: 50vw solid transparent;
		border-right: 50vw solid #f5ee41; 
		border-bottom: 35px solid transparent; 
	}	
	.teacherarea{
		width: 100%;
		margin: 0 auto 50px;
		display: block;
	}
	.teacherarea02{
		display: flex;
		flex-direction: column-reverse;
		gap: 0;
	}
	.teacherimg{
		width: 90vw;
		margin: 0 auto;
	}
	.teachersen{
		width: 90vw;
		margin: 50px auto 75px;
		background-size: 100% 80%;
	}
	.teachersen h2{
		margin-bottom: 30px;
		background-size: 100% 50%;
	}
	.teachersen p{
		width: 90%;
	}

	table{
		width: 90%;
	}
	tr{
		display: flex;
		flex-flow: column;
	}
	th{
		width: auto;
		padding: 25px 0;
	}
	td{
		width: 90%;
		padding-bottom: 25px;
	}
	.con_con td{
		padding-top: 0;
	}
	.btn{
		bottom: -100px;
	}




	@media( max-width: 400px ){

		.fv_copy h2{
			font-size: 25px;
		}

		.bigin_sp{
			font-size: 18px;
		}


		.heading h1{
			font-size: 45px;
		}


		.confback h2{
			font-size: 20px;
		}
		.confback h2 span{
			font-size: 30px;
		}


		.teacherimgm{
			width: 95vw;
		}
		.teachersen h2{
			font-size: 22px;
		}

	}


	@media( max-width: 380px ){
		
		header{
			height: 120vh;
		}


		.heading h1{
			font-size: 40px;
		}
		.heading h2{
			font-size: 22px;
		}


		.teachersen h2{
			font-size: 21px;
		}



	}

}