@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);
    }
}

@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: 47.34%;
		position: absolute;
		top: 30%;
		left: 0;
	}
	
	#txt_main02{
		width: 31.75%;
		position: absolute;
		top: 50%;
		left: 0;
	}
	
	#txt_main01 img,
	#txt_main02 img{width: 100%;}
	
	#scroll_arrow{
		
	}
	
	#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: 48%;
		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.7rem;
	}
	
	.vision_box01 figure{width: 45%;}
	.vision_box01 figure img{width: 100%;}
	
	/*-------------------------------------------------------
	
	RECRUIT
	
	--------------------------------------------------------*/
	.comingsoon{
		text-align: center;
		color: #ccc;
		font-weight: bold;
		font-size: 3rem;
	}
	
	/*-------------------------------------------------------
	
	CONTACT
	
	--------------------------------------------------------*/
	#contact p{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.txt_contact01 a{
		color: #000;
		font-weight: bold;
		font-size: 2rem;
	}
	
	.txt_contact01 img{
		vertical-align: middle;
		margin-right: 10px;
	}

	.popup-content li{
		margin-bottom: 20px;
	}

	.popup-content li:last-child{
		margin-bottom: 0;
	}

	.popup-content h3{
		font-weight: bold;
		padding-bottom: 3px;
		margin-bottom: 3px;
		border-bottom: #000 solid 1px;
	}

	.popup-content p{
		text-align: left !important;
	}
	
	
	
}

@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_main01.jpg") no-repeat 0 0;
		background-size: cover;
		padding-top: 52.08%;
		height: 0;
		position: relative;
	}
	
	#txt_main01{
		width: 51.34%;
		position: absolute;
		top: 30%;
		left: 0;
	}
	
	#txt_main02{
		width: 36.75%;
		position: absolute;
		top: 55%;
		left: 0;
	}
	
	#txt_main01 img,
	#txt_main02 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{
	}
	
	#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.7rem;
	}
	
	.vision_box01 figure img{width: 100%;}
	
	/*-------------------------------------------------------
	
	RECRUIT
	
	--------------------------------------------------------*/
	.comingsoon{
		text-align: center;
		color: #ccc;
		font-weight: bold;
		font-size: 3rem;
	}
	
	/*-------------------------------------------------------
	
	CONTACT
	
	--------------------------------------------------------*/
	#contact p{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.txt_contact01 a{
		color: #000;
		font-weight: bold;
		font-size: 2rem;
	}
	
	.txt_contact01 img{
		vertical-align: middle;
		margin-right: 10px;
	}

	.popup-content li{
		margin-bottom: 20px;
	}

	.popup-content li:last-child{
		margin-bottom: 0;
	}

	.popup-content h3{
		font-weight: bold;
		padding-bottom: 3px;
		margin-bottom: 3px;
		border-bottom: #000 solid 1px;
	}

	.popup-content p{
		text-align: left !important;
	}
	
	
}