@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4&display=swap');

body{
	margin:0;
}

header{
	height: 60px;
	position: relative;
	z-index: 999;
}

/*--- ヘッダー --- */
#fixed h2{
	color:#b81a1e;
	margin:15px 0 0 350px;
	font-family: 'Source Serif 4', sans-serif;
	font-size:26px;
}

/* --- お問い合わせボタン ---- */
.button{
	font-size:18px;
	border:1px solid #b6121d;
    background-color:#b6121d;
	color:#fff;
	border-radius:100vh;
	padding:9.5px 47px;
	margin:5px 350px 7px 0;
	text-decoration:none;
}
.button:hover{
	color:#b6121d;
	background-color:#fff;
}
/* --- //お問い合わせボタン ---- */

#fixed{
    display:flex;
    justify-content:space-between;
	position:fixed;
	top:0;
	right:0;
	background-color:#fff;
	width:100%;
}
/* --- //ヘッダー --- */

#features{
	text-align:center;
}
#features h2{
	margin:100px 0 0;
}
.sub{
	margin:10px 0 0;
}
p{
	line-height:25px;
}
#documents{
	margin:47px 0 100px;
}

#fv{
	width: 100%;
	position:relative;
}
#fv img{
	width:100%;
} 
#top{
	position:absolute;
	top:20%;
	left:31%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	text-align: center;
	color:#465d79;
}
#top h1{
	font-size:75px;
	font-weight:normal;
	text-decoration:none;
}
#top p{
	font-size: 27px;
	line-height: 32px;
}
#problem{
	background: #ddd url("../images/okomari_1.jpg")no-repeat center center;
	height: 661px;
}
#problem h2{
	text-align:center;
	padding-top:25px;
}
/* #problem p{
	position:relative;
	top:78px;
	left:425px;
	right:0;
	line-height:70px;
	width:50%;
} */

/* --- 三角形 --- */
#triangle{
	text-align:center;
	margin-top:32px;
}
/* --- //三角形 --- */

/* --- 男女シルエット横並び --- */
#solve{
	display:flex;
	justify-content:center;
}
/* --- //男女シルエット横並び --- */

#solve h2{
	margin-bottom:10px;
}
#solve p{
	padding:30px 0 28px 0;
}

#s-silhouette img{
	widows:300px;
	height:300px;
}


/* #training img{
	width:50%;
	height:auto;
} */

#training{
	display:flex;
	flex-direction:column;
	padding:180px;
}
/* #training h1{
	text-align: center;
} */
#training h3{
	font-size:18px;
}
#training p{
	font-size:16px;
}
.box{
	display:flex;
	/* padding:80px; */
}
.box:nth-child(odd){
	flex-direction: row-reverse;
}
.text{
	width:50%;
	padding:75px;
}
.phot{
	width:50%;
	padding:75px;
}
.phot img{
	width:100%;
}

/* --- 最後の呼びかけ --- */
#last-call{
	text-align: center;
	line-height: 0%;
	background-color: rgb(226, 229, 233);
	padding:30px 0 70px;
}
#last-call p{
	margin-bottom:75px;
}
.last{
	margin:0;
	padding:20px 80px 20px 80px;
}
/* --- //最後の呼びかけ --- */

/* --- カスタマイズ研修へのリンク --- */
#banner{
	text-align: center;
	margin:25px 0 25px;
}
#banner img{
	width: 650px;
	height: auto;
}
#banner img:hover{
	opacity: 0.6;
}
/* --- //カスタマイズ研修へのリンク --- */

/* --- フッター --- */
	/* --- コピーライト --- */
	footer{
		/* text-align:center; */
		background-color:#314047;
		color:#d0d4d9;
		font-size:16px;
		display:flex;
		justify-content:space-between;
		padding-left:35px;
		margin-top:30px;
	}
	/* --- //コピーライト --- */

	footer p{
		margin:2px;
	}

	/* --- 引用 --- */
	#quote{
		padding-right:35px;
	}
	#quote a{
		color:#d0d4d9;
	}
	#quote a:hover{
		color:#b6121d;
	}
	/* --- //引用 --- */
/* --- //フッター --- */



/* フェードイン(初期値) */
.fade--right,
.fade--left {
	transition: all 2s;
	opacity: 0;
}

.fade--right {
	transform: translateX( -30px );
}
.fade--left {
	transform: translateX( 30px );
}
.fade--in-view {
	transform: translateX( 0 );
	opacity: 1;
}

.phot img{
	position: relative;
	z-index: 5;
}
.phot::after{
	content: "";
	background-image: url(../images/bg-1.png);
	background-size: contain;
	width: 620px;
	height: 465px;
	position: absolute;
	z-index: 0;
	top: 100px;
	left: 100px;
	/* filter: brightness(98%); */
	/* filter: blur(5px); */
}