@charset "utf-8";

/* ヘッダー */
header{
	position: relative;
	margin: 0 auto ;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 132.84%;
}
header .bg{
	background-image: url("../img/main.jpg");
	padding-top: 132.84%;
	z-index: -1;
}
.catch{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 15px;
	width: calc(100% - 90px);
	overflow: hidden;
	opacity: 0;
}
.catch span{display: block;width: 100%;height: 100%;position: absolute;top:0;left: 0;}
.catch::before, .catch::after,.catch span::before, .catch span::after{
	position: absolute;
	content: '';
	background-color: #ffffff; 
}
.catch::before{
	top:-100%;
	left: 0;
	width: 6px;
	height: 100%;
}
.catch::after{
	bottom:0;
	left: -100%;
	width: 100%;
	height: 6px;
}
.catch span::before{
	bottom:-100%;
	right: 0;
	width: 6px;
	height: 100%;
}
.catch span::after{
	top:0;
	right: -100%;
	width: 100%;
	height: 6px;
}
.catch.disp {animation: dispAnim .5s ease-in 0s 1 forwards;}
.catch.disp::before {animation: topAnim .5s ease-in .6s 1 forwards;}
.catch.disp::after {animation: leftAnim .7s ease-in 1.2s 1 forwards;}
.catch span.disp::before {animation: bottomAnim .5s ease-in .6s 1 forwards;}
.catch span.disp::after {animation: rightAnim .7s ease-in 1.2s 1 forwards;}
@keyframes dispAnim {
    0% {top:calc(50% + 20px);opacity: 0;}
    100% {top:50%;opacity: 1;}
}
@keyframes topAnim {
    0% {top:60%;}
    100% {top:0;}
}
@keyframes leftAnim {
    0% {left: -100%;}
    100% {left:0;}
}
@keyframes bottomAnim {
    0% {bottom:-100%;}
    100% {bottom:0;}
}
@keyframes rightAnim {
    0% {right:-100%;}
    100% {right:0;}
}

/* about */
#about{
	position: relative;
	margin: 0 auto;
	padding: 45px 0;
	background-color: #ffffff;
}
#about p.lead{
	position: relative;
	margin: 20px 0;
	font-size: .16rem;
}
#about p{
	position: relative;
	margin: 0 auto;	
}

/* reason */
#reason{
	position: relative;
	margin: 0 auto;
	color: #ffffff;
}
#reason .bg{
	background-image: url("../img/reason.jpg");
	padding-top: 100vh;
	background-position: 39% 50%;
	background-size: auto 110%;
}
#reason .ttl{
	position: relative;
	background-color: #ffffff;
	padding-bottom: 20px;
}
#reason .ttl p{
	position: relative;
	border-bottom: solid 6px #1d2087;
	padding-bottom: 5px;
	color: #000000;
	text-align: center;
	font-size: .15rem;
}
#reason ul {
	position: relative;
	margin: 20px 0;
	width: 100%;
}
#reason ul li{
	position: relative;
	margin: 0;
	padding: 20px 20px 10px calc(1.5em + 20px);
	counter-increment: number;
}
#reason ul li:nth-child(2){background-color: rgba(13,16,75,0.40)}
#reason ul li h3{font-size: .14rem;margin-bottom: 10px;}
#reason ul li h3::before{
	position: absolute;
    top:20px;
    left: 20px;
    content: counter(number)'.';
    display: block;
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
	width: 1.5em;
	height: 1em;
}

/* service */
#service{
	position: relative;
	margin: 0 auto;
	padding: 45px 0;
	background-color: #ffffff;
}
#service p.lead{
	position: relative;
	margin: 20px 0;
}
#service ul {
	position: relative;
	margin: 20px auto;
}
#service ul li{
	position: relative;
	margin: 0;
	padding: 20px;
	background-color: #6e7ddc;
	color: #ffffff;
}
#service ul li:nth-child(2){background-color: #5662c3;}
#service ul li .Img{
	position: relative;
	margin: 0;
	width: 30%;
}
#service ul li .ttl{
	position: relative;
	margin: 0;
	width: 70%;
	text-align: center;
	font-size: .16rem;
}
#service ul li .ttl span{font-size: .13rem;}
#service ul li .Txt{
	position: relative;
	margin: 10px 0 0 0;
	width: 100%;
}
#service ul li .Txt a{
	position: relative;
	margin: 15px auto 0 auto;
	width: 150px;
	display: block;
	padding: 5px 0;
	background-color: #ffff4d;
	text-align: center;
	color: #3c3c3c;
}

/* company */
#company{
position: relative;
	margin: 0 auto;
	padding: 0 0 45px 0;
	background-color: #ffffff;
}
#company .bg{
	position: relative;
	margin: 0 auto 45px auto;
	background-image: url("../img/company.jpg");
	background-size: cover;
	padding-top: 66%;
	z-index: auto;
}

#company .bg a {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	text-align: center;
}
#company .bg a:hover {
	background: rgba(0,0,0,0.2);
}
#company .bg a span {
	text-align: center;
	display: inline-block;
	color: #fff;
	font-weight: bold;
	font-size: 150%;
}


#company dl{
	position: relative;
	margin: 45px auto 0 auto;
	border-top: solid 1px #1d2087;
	font-size: .13rem;
}
#company dl dt{
	position: relative;
	border-bottom: solid 1px #1d2087;
	width: 4em;
	padding: 10px 10px 0 20px;
	text-align: center;
}
#company dl dd{
	position: relative;
	border-bottom: solid 1px #1d2087;
	width: calc(100% - 4em - 65px);
	padding: 10px 20px 10px 15px;
	font-weight: 500;
}
#company dl dd ul li{
	position: relative;
	padding-left: 1.2em;
}
#company dl dd ul li::before{
	position: absolute;
	display: block;
	content: '●';
	top:0;
	left: 0;
}

a.btn{
	position: relative;
	margin: 10px auto 0 auto;
	display: block;
	padding: 10px 0;
	background-color: #1d2087;
	text-align: center;
	color: #ffffff;
	font-weight: 700;
}

/* ----- pc ----- */
@media screen and (min-width: 768px) {

	/* ヘッダー */
	header{padding-top: 600px;}
	header .bg{padding-top: 600px;background-image: url("../img/main_pc.jpg"); background-position: 50% 70%;}
	
	.catch{width: 840px;padding: 15px 25px;}
	.catch::before{width: 8px;}
	.catch::after{height: 8px;}
	.catch span::before{width: 8px;}
	.catch span::after{height: 8px;}
	.snsLinks{
		position: absolute;
		right:50px;
		bottom:70px;
	}
	.snsLinks li{margin-bottom: 15px;}

	/* about */
	#about{padding: 70px 0;}
	#about .contentsInner{width: 800px;}
	#about p.lead{
		margin: 40px auto;
		font-size: .32rem;
		text-align: left;
		line-height: 1.5em;
		font-weight: 600;
	}
	#about p{font-weight: 500;text-align: left}

	/* reason */
	#reason .bg{
		background-position: 50% 50%;
		background-size: cover;
	}
	#reason .ttl{padding-bottom: 40px;}
	#reason .ttl p{
		border-bottom: solid 8px #1d2087;
		padding-bottom: 15px;
		font-size: .32rem;
		width: 680px;
	}
	#reason ul {margin: 0;}
	#reason ul li{padding: 35px 0;}
	#reason ul li:nth-child(1){background-color: rgba(13,16,75,0.40);width: 100%;}
	#reason ul li:nth-child(2){background-color: rgba(13,16,75,0.55);width: 50%;}
	#reason ul li:nth-child(3){background-color: rgba(13,16,75,0.70);width: 50%;}
	#reason .reasonWrap{
		position: relative;
		width: 40%;
		margin: 0 auto;
		text-align: left;
	}
	#reason ul li:nth-child(2) .reasonWrap, #reason ul li:nth-child(3) .reasonWrap{width: 90%;}
	#reason ul li h3{font-size: .22rem;margin: 0 auto 20px auto;padding-left: 1.5em; }
	#reason ul li h3::before{
		top:0;
		left: 0;
		font-size: .22rem;
		width: 1.5em;
	}
	#reason .reasonWrap p{
		padding-left: 2.5em; 
		font-size: .13rem;
		text-align: left;
	}

	/* service */
	#service{padding: 70px 0;}
	#service .contentsInner{width: 800px;}
	#service p.lead{
		margin: 40px auto;
		text-align: left;
		font-weight: 500;
	}
	#service ul {
		width: 960px;
		transform: translateX(-75px);
	}
	#service ul li{
		padding: 30px 50px;
		width:calc(50% - 100px);
	}
	#service ul li .Img{
		margin: 0 auto;
		width: 50%;
	}
	#service ul li .ttl{
		margin: 20px auto;
		width: 100%;
		font-size: .19rem;
	}
	#service ul li .ttl span{display: none;}
	#service ul li .Txt{
		margin: 0;
		font-size: .14rem;
	}
	#service ul li .Txt a{
		margin: 25px auto 0 auto;
		width: 145px;
		padding: 0;
	}

	/* company */
	#company{padding: 0 0 120px 0;}
	#company .bg{
		margin: 0 auto 70px auto;
		padding-top: 330px;
		background-position: 50% 50%;
	}
	#company .contentsInner{width: 800px;}
	#company dl{
		margin: 70px auto 0 auto;
		font-size: .14rem;
		line-height: 1.7em;
	}
	#company dl dt{
		width: 125px;
		padding: 15px 0;
	}
	#company dl dd{
		width: 615px;
		padding: 15px 30px;
	}

	a.btn{
		margin: 45px auto 80px auto;
		padding: 15px 0;
		width: 500px;
	}
}