@charset "UTF-8";

/* ▼▼▼ 新着アイテム
=====================================*/

/* ページナビ */
#page_nav{
	background: #FAF7F7;
	padding: 16px 20px;
	margin: 0 auto 50px;
	}
	#page_nav ul{
		max-width: 1000px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: justify;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		margin: 0 auto;
		}
	#page_nav ul li {
		width: 12.5%;
		text-align: center;
		}
	#page_nav ul li img{
		width: 78px;
		}
	#page_nav ul li a{
		display: block;
		}
article {
	margin: 0 0 100px;
	}
	article .shop_area{
		display: table;
		overflow: hidden;
		margin: 0 0 40px;
		}
	article .shop_area .shop_logo{
		float: left;
		border: 1px solid #ccc;
		padding: 15px;
		margin-right: 30px;
		}
	article .shop_area .shop_logo  p{
		width: 241px;
		height: 141px;
		}
	article .shop_area .txt_box{
		display: table-cell;
		vertical-align: middle;
		}
	article table{
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		width: 100%;
		margin: 0 0 40px;
		}
	article table th,
	article table td{
		padding: 20px 0;
		}
	article table tr:not(:first-child) th,
	article table tr:not(:first-child) td{
		border-top: 1px dotted #ccc;
		}
	article table th{
		width: 8em;
		}

#page_nombre{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto 50px;
	}
	#page_nombre li{
		display: table;
		text-align: center;
		width: 45px;
		height: 45px;
		}
	#page_nombre li:not(:first-child){
		margin-left: 15px;
		}
	#page_nombre li a{
		display: table-cell;
		vertical-align: middle;
		border: 1px solid #ccc;
		color: #666;
		}
	#page_nombre li.active a,
	#page_nombre li a:hover{
		opacity: 1;
		background: #B1A9A9;
		border: 1px solid #B1A9A9;
		color: #fff;
		}

/* 働くメリット */
#merits {
	overflow: hidden;
	}
	#merits h2{
		margin: 0 0 50px;
		}
	#merits .merits_point{
		max-width: 1000px;
		padding: 0 20px;
		margin: 0 auto;
		}
    #merits .merits_point li{
        clear: both;;
        overflow: hidden;
        }
    #merits .merits_point li > p{
		position: relative;
		}
        #merits .merits_point li > p img {max-width: 40%;}
	#merits .merits_point li:nth-child(2) > p{
		text-align: right;
		}
	#merits .merits_point li:nth-child(4) > p{
		text-align: right;
		}
	#merits .merits_point li > p span{
	    font-family: arial, sans-serif;
		color: #fff;
		font-weight: bold;
		font-size: 140px;
		line-height: 1;
		position: absolute;
		left: 40px;
		bottom: -25px;
		}
	#merits .merits_point li:nth-child(2) > p span{
		right: 40px;
		left: auto;
		}
	#merits .merits_point li:nth-child(4) > p span{
		right: 40px;
		left: auto;
		}
	#merits .merits_point li .box{
		background: #fff;
		width: 560px;
		padding: 45px 0 45px 40px;
		margin-top: -170px;
		margin-bottom: 40px;
		float: right;
		position: relative;
		}
	#merits .merits_point li:nth-child(2) .box{
		float: none;
		padding: 45px 40px 45px 0;
		}
	#merits .merits_point li:nth-child(3) .box{
		margin-top: -250px;
		}
	#merits .merits_point li:nth-child(4) .box{
		float: none;
		padding: 45px 40px 45px 0;
		}
	#merits .merits_point li .box h3{
		color: #A25E5E;
		font-size: 30px;
		margin: 0 0 20px;
		}

/* detail */
.detail .photo_box {
	overflow: hidden;
	width: 100%;
	margin: 0 0 40px;
	}
	.detail .photo_box > .txt_box{
		float: right;
		width: 50%;
		}
	.detail .photo_box > p.shop_img{
		float: left;
		position: relative;
		display: block;
		overflow: hidden;
		width: 460px;
		height: 283px;
		}
	.detail article .shop_area{
		float: right;
		width: 50%;
		}
	.detail article .shop_area .txt_box{
		width: 100%;
		}
	.detail article .shop_area .shop_logo p {
		width: 158px;
		height: 93px;
		}
	.detail article table td span.box{
		border: 1px solid;
		padding: 3px 5px;
		margin-right: 5px;
		}
.detail #main .more_btn a{
	background: #B4B4B4!important;
	}

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

/* ▼▼▼ 1024px
=====================================*/
@media screen and (max-width: 1024px) {
.shop_list li .img-container{
	margin: 0;
	width: 230px;
	height: 230px;
	}
}

/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {

/* ページナビ */
#page_nav{
	background: #FAF7F7;
	padding: 16px 20px;
	margin: 0 auto 40px;
	}
	#page_nav ul{
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 auto;
		}
	#page_nav ul li {
		width: 25%;
		text-align: center;
		}
	#page_nav ul li img{
		width: 72px;
		}
	#page_nav ul li a{
		display: block;
		}

article {
	margin: 0 0 50px;
	}
	article .shop_area{
		display: table;
		overflow: hidden;
		margin: 0 0 20px;
		}
	article .shop_area .shop_logo{
		float: left;
		border: 1px solid #ccc;
		padding: 15px;
		margin-right: 15px;
		}
	article .shop_area .shop_logo  p{
	    width: 32.5vw;
	    height: 19vw;
	    }
	article .shop_area .txt_box{
		display: table-cell;
		vertical-align: middle;
		}
	article table{
		margin: 0 0 20px;
		}
	article table th,
	article table td{
		padding: 20px 0;
		}

#page_nombre{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto 40px;
	}
	#page_nombre li{
		display: table;
		text-align: center;
		width: 37px;
		height: 37px;
		}
	#page_nombre li:not(:first-child){
		margin-left: 10px;
		}

/* 働くメリット */
#merits h2{
	margin: 0 0 40px;
	}
	#merits .merits_point{
		padding: 0;
		}
	#merits .merits_point li > p{
		position: relative;
		}
        #merits .merits_point li > p img {max-width: 100%;}
	#merits .merits_point li:nth-child(2) > p{
		text-align: right;
		}
	#merits .merits_point li:nth-child(4) > p{
		text-align: right;
		}
	#merits .merits_point li > p span{
		font-size: 84px;
		left: 30px;
		bottom: -4.5vw;
		}
	#merits .merits_point li:nth-child(2) > p span{
		right: auto;
		left: 30px;
		}
	#merits .merits_point li:nth-child(4) > p span{
		right: auto;
		left: 30px;
		}
	#merits .merits_point li .box{
		background: #fff;
		width: 100%;
		padding: 20px;
		margin: 0 0 20px;
		float: none;
		position: relative;
		}
	#merits .merits_point li:nth-child(2) .box{
		padding: 0 20px;
		}
	#merits .merits_point li:nth-child(3) .box{
		margin-top: 0;
		}
	#merits .merits_point li:nth-child(4) .box{
		padding: 0 20px;
		}
	#merits .merits_point li .box h3{
		color: #A25E5E;
		font-size: 18px;
		margin: 0 0 10px;
		}

/* detail */
.detail .photo_box {
	overflow: hidden;
	width: 100%;
	margin: 0 0 40px;
	}
	.detail .photo_box > .txt_box{
		float: none;
		width: 100%;
		}
	.detail .photo_box > p.shop_img{
		float: none;
		width: 89vw;
		height: 55vw;
		margin: 0 0 20px;
		}
	.detail article .shop_area{
		float: none;
		width: 100%;
		}
	.detail article .shop_area .txt_box{
		width: 100%;
		}
	.detail article .shop_area .shop_logo p {
		width: 32vw;
		height: 19vw;
		}
	.detail article table td span.box{
		border: 1px solid;
		padding: 3px 5px;
		margin-right: 5px;
		}

}


/****************************/
.job_sec{
	padding: 50px 0 100px;
}
.job_card{
	display: flex;
	justify-content: space-between;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
}
.job_card .job_list{
	width: calc(100% / 2 - 39px);
}
.job_card .job_list .text{
	margin: 25px 0 30px;
	text-align: center;
	font-size: 17px;
}
@media screen and (max-width: 768px) {
	.job_card{
		flex-direction: column;
	}
	.job_card .job_list{
		width: 100%;
	}
	.job_card .job_list:last-of-type{
		margin-top: 50px;
	}
	.job_card .job_list .text{
		font-size: 16px;
		margin: 10px 0 20px;
		text-align: start;
	}
}