@charset "utf-8";
/* ==========================================================

home.css

============================================================ */

/*-------------------------------------------------------

アニメーション

--------------------------------------------------------*/
@-webkit-keyframes sdb {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    20% {
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
    }
    40% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@keyframes sdb {
    0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
    }
    20% {
		-webkit-transform: translate(0, 5px);
		transform: translate(0, 5px);
    }
    40% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
    }
}

@-webkit-keyframes fade-in2 {
	0% {opacity: 0; transform: translate3d(0,-20px,0);}
	100% {opacity: 1; transform: translate3d(0,0,0);}
}

@keyframes fade-in2 {
	0% {opacity: 0; transform: translate3d(0,-20px,0);}
	100% {opacity: 1; transform: translate3d(0,0,0);}
}

@media print, screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

  PC

  _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/	
	
	/*-------------------------------------------------------
	
	レイアウト
	
	--------------------------------------------------------*/
	#main{
		background: url("../img/bg_main01.jpg") no-repeat 0 0;
		background-size: cover;
		padding-top: 52.08%;
		height: 0;
		position: relative;
	}
	
	#txt_main01{
		width: 50%;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: 300px;
		animation-name:fade-in2;
		animation-duration:1s;
		animation-timing-function: ease-out;
		animation-delay:0.1s;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	
	#txt_main01 img{width: 100%;}
	
	
	#scroll_arrow a{
		color: #aaa;
		font-size: 2rem;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 20px;
		width: 45px;
    	height: 62px;
		-webkit-animation: sdb 3s infinite;
	 	animation: sdb 3s infinite;
	}
	
	#scroll_arrow img{width: 100%;}
	
	/*-------------------------------------------------------
	
	ＳＥＲＶＩＣＥ
	
	--------------------------------------------------------*/
	#service .inner01{margin: 100px auto 0;}
	
	#serviceList{
		-webkit-display: flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	#serviceList li{
		width: 30%;
		text-align: center;
	}
	
		
	#serviceList li img{
		margin-bottom: 20px;
		width: 100%;
	}
	
	/*-------------------------------------------------------
	
	VISION
	
	--------------------------------------------------------*/
	.vision_box01{
		-webkit-display: flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.vision_box01 .box01{
		width: 45%;
		line-height: 2.5;
	}
	
	.vision_box01 .box01 h3{
		font-weight: bold;
		margin-bottom: 25px;
		font-size: 1.6rem;
		line-height: 2;
		text-align: center;
	}
	
	.vision_box01 figure{width: 45%;}
	.vision_box01 figure img{width: 100%;}
	
	/*-------------------------------------------------------
	
	VALUE
	
	--------------------------------------------------------*/
	.value_box01{
		display: flex;
		justify-content: space-between;
	}
	
	.value_box01 .box01{
		width: 30%;
		text-align: center;
	}
	
	.value_box01 .box01 h3{
		font-weight: bold;
		margin-bottom: 25px;
		font-size: 2rem;
		line-height: 2;
		text-align: center;
		letter-spacing: 0.4rem;
		position: relative;
		padding-bottom: 22px;
	}
	
	.value_box01 .box01 h3::after{
		content: '';
		width: 64px;
		height: 2px;
		display: block;
		background: #000;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2px;
	}
	
	.value_box01 .box01 figure{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.value_box01 .box01 figure img{height: 70px;}
	
	.value_box01 .box01 p{font-size: 1.4rem;}
	
	/*-------------------------------------------------------
	
	RECRUIT
	
	--------------------------------------------------------*/
	.comingsoon{
		text-align: center;
		color: #ccc;
		font-size: 3rem;
	}
	
	/*-------------------------------------------------------
	
	CONTACT
	
	--------------------------------------------------------*/
	#contact p{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.txt_contact01 a{
		color: #000;
		font-size: 2rem;
	}
	
	.txt_contact01 img{
		vertical-align: middle;
		margin-right: 10px;
	}
	
	
	
}

@media screen and (min-width:768px) and ( max-width:1200px) {
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

  ipad (デザイン用)

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
	
	/*-------------------------------------------------------
	
	レイアウト
	
	--------------------------------------------------------*/

}


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

スマートフォン（iPhone,Android)

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
	
	/*-------------------------------------------------------
	
	レイアウト
	
	--------------------------------------------------------*/
	#main{
		background: url("../img/bg_main02.jpg") no-repeat 0 0;
		background-size: cover;
		padding-top: 97.65%;
		height: 0;
		position: relative;
	}
	
	#txt_main01{
		width: 80%;
		position: absolute;
		top: 46%;
		left: 0;
		right: 0;
		margin: auto;
		animation-name:fade-in2;
		animation-duration:1s;
		animation-timing-function: ease-out;
		animation-delay:0.1s;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#txt_main01 img{width: 100%;}

	#scroll_arrow a{
		color: #aaa;
		font-size: 1.3rem;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 20px;
		width: 32px;
    	height: 32px;
		-webkit-animation: sdb 3s infinite;
	 	animation: sdb 3s infinite;
	}
	
	#scroll_arrow img{width: 100%;}
	
	/*-------------------------------------------------------
	
	ＳＥＲＶＩＣＥ
	
	--------------------------------------------------------*/
	#service .inner01{margin: 50px auto 0;}
	
	#serviceList li{
		margin-bottom: 50px;
		text-align: center;
	}
	
	#serviceList li:last-child{margin-bottom: 0;}
	
	#serviceList li img{
		margin-bottom: 20px;
		width: 100%;
	}
	
	/*-------------------------------------------------------
	
	VISION
	
	--------------------------------------------------------*/	
	.vision_box01 .box01{
		line-height: 2.5;
		margin-bottom: 30px;
	}
	
	.vision_box01 .box01 h3{
		font-weight: bold;
		margin-bottom: 25px;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	
	.vision_box01 figure img{width: 100%;}
	
	/*-------------------------------------------------------
	
	VALUE
	
	--------------------------------------------------------*/
	
	.value_box01 .box01{
		text-align: center;
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px dashed #000;
	}
	.value_box01 .box01:last-of-type{
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	
	.value_box01 .box01 h3{
		font-weight: bold;
		margin-bottom: 10px;
		font-size: 1.8rem;
		line-height: 2;
		text-align: center;
		letter-spacing: 0.4rem;
		position: relative;
	}
	
	
	.value_box01 .box01 figure{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.value_box01 .box01 figure img{height: 86px;}
	
	.value_box01 .box01 p{font-size: 1.4rem;}
	
	/*-------------------------------------------------------
	
	RECRUIT
	
	--------------------------------------------------------*/
	.comingsoon{
		text-align: center;
		color: #ccc;
		font-size: 3rem;
	}
	
	/*-------------------------------------------------------
	
	CONTACT
	
	--------------------------------------------------------*/
	#contact p{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.txt_contact01 a{
		color: #000;
		font-size: 2rem;
	}
	
	.txt_contact01 img{
		vertical-align: middle;
		margin-right: 10px;
	}
	
	
}