@charset "UTF-8";



@import url("https://fonts.googleapis.com/css?family=Courgette");





/*  共通

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



#container {

	width:100%;

	margin:0 auto;

	background:#FFF;

	

	display: grid;

	display: -ms-grid;/* IE */

	

	}



.item{position:relative;}



.box-in{ position:absolute;left:0;top:0; width: 100%; height: 100%;}



		

h2{

	font-size:1.8rem;

	font-weight:normal;

	border-bottom:1px solid #333;

	margin-bottom:.8rem;

	}





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

    エリア選択

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



/* 札幌 */

#sapporo{

	background:url(../yes_img-top/top/btn_sapporo.jpg);

	}



/* 水戸 */

#ibaraki{

	background:url(../yes_img-top/top/btn_ibaraki.jpg);

	}



/* 土浦 */

#tsuchiura{

	background:url(../yes_img-top/top/btn_tsuchiura.jpg);

	}



/* 横浜 */

#yokohama{

	background:url(../yes_img-top/top/btn_yokohama.jpg);

	}



/* 松山 */

#matsuyama{

	background:url(../yes_img-top/top/btn_matsuyama.jpg);

	}



/* 福岡 */

#hukuoka{

	background:url(../yes_img-top/top/btn_hukuoka.jpg);

	}



/* 熊本 */

#kumamoto{

	background:url(../yes_img-top/top/btn_kumamoto.jpg);

	}



/* 那覇 */

#naha{

	background:url(../yes_img-top/top/btn_naha.jpg);

	}



/* エリア名 */

#sapporo .tit_area{ background:#398ec5;}

#ibaraki .tit_area{ background:#e45c36;}

#tsuchiura .tit_area{ background:#e3366e;}

#yokohama .tit_area{ background:#73b025;}

#matsuyama .tit_area{ background:#24b089;}

#hukuoka .tit_area{ background:#9e59ac;}

#kumamoto .tit_area{ background:#6849e5;}

#naha .tit_area{ background:#ca4999;}





/* 背景画像の収縮 */	

.box-big1,

#map,

#job_girl,

#job_men,

#kangen20,

#card,

#card2,

#first_v,

#contact{

	background-position: center center !important;

    background-repeat: no-repeat !important;

    background-size: cover !important;

	}

	

	

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

    MAP

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



#map{background:url(../yes_img-top/top/map_bg.jpg);}



#map p{

	position:absolute;

	display:block;

	}



/* 日本列島 */		

.map_in{

	position:absolute;

	left:50%;

	-webkit-transform: translate(-50%, -50%);

	transform: translate(-50%, -50%);

	width:100%;

	max-width:500px;

	height: 0;

	padding-top:66%;

		

	background:url(../yes_img-top/top/map.png) center center no-repeat;

	background-size: 96%  !important;

	}



/* 在籍数 */	

.girl_count{

	position: absolute;

	top: 32%;

	left:22%;

	font-size: 2.4rem;

	line-height: 3.8rem;

	text-align: center;

	}



.girl_count span{

	font-size:4rem;

	font-weight:bold;

	border-bottom:3px solid #b6b6b6;

	font-family: 'Courgette', cursive;

	}



/* エリアボタン */

.map_btn{

	position:absolute;

	font-size:1.6rem;

    vertical-align: middle;

	border-radius: 800px ;

    -moz-border-radius: 800px;

    -webkit-border-radius: 800px;

	}



.map_btn a {

    display: block;

	width: 50px;

    height: 50px;

    text-align: center;

    color: #FFF;

	padding:1.8rem 0;

	}



.map_btn a:hover{color: #FFF;}



/* 地域名 */

.map_al{position:absolute;font-size:1.3rem;color:#000;}	

	



/* 札幌のボタン設定 */

.map_sapporo{right:18%;top:15%;background:#398ec5;}

.map_al_su{	right:1%;top:22%;}



/* 水戸のボタン設定 */

.map_mito{right:12%;top:48%;background:#e45c36;}



/* 土浦のボタン設定 */

.map_tsuchiura{right:14%;top:60%;background:#e3366e;}



.map_al_ib{right:23%;top:57%;}

	

/* 横浜のボタン設定 */

.map_yokohama{right:26%;top:68%;background:#73b025;}

.map_al_ka{right:37%;top:75%;}

	

/* 松山のボタン設定 */

.map_matsuyama{left:30%;top:65%;background:#24b089;	}

.map_al_eh{left:31%;top:78%;}

	

/* 福岡のボタン設定 */

.map_hukuoka{left:16%;top:58%;background:#9e59ac;}	

.map_al_ha{left:14%;top:54%;}



/* 熊本のボタン設定 */

.map_kumamoto{left:10%;top:72%;background:#6849e5;}	

.map_al_ku{left:0%;top:70%;}



/* 那覇のボタン設定 */

.map_naha{left:-6%;	bottom:8%;background:#ca4999;}	

.map_al_ok{left:3%;bottom:6%;}



		

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

     女の子求人

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



#job_girl{background:url(../yes_img-top/top/btn_jobgirl.jpg);}





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

     男性求人

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



#job_men{background:url(../yes_img-top/top/btn_jobmen.jpg);	}



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

     初めてご来店の

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



#first_v{background:url(../yes_img-top/top/btn_first_v.jpg);}





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

    還元20

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



#kangen20{background:url(../yes_img-top/top/btn_kangen20.jpg);}



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

     会員カード

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



#card{background:url(../yes_img-top/top/btn_card.jpg);}	

#card2{background:url(../yes_img-top/top/btn_card2.jpg);}	







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

     最新情報

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



#news{background:#fbd3e2;}	



#news .box-in{ padding:1.6rem;}



.area_tab{ margin-bottom:1rem;

	font-size:1.3rem; }



.area_tab li.tab_on {

    background: #434343;

    color: #fff;

	}

	

.area_tab li {

	float:left;

    position: relative;

    width: 11.2%;

    padding: .4rem 0;

	margin-right:.4rem;

    border-radius: .2rem;

    background: #aca8a7;

    color: #e1e1e1;

    text-align: center;

    cursor: pointer;

	}



.area_tab li:last-child{margin-right:0; }

	

.area_tab li.tab_on::before {

    display: block;

    position: absolute;

    z-index: 1;

    bottom: -.7rem;

    left: 50%;

    width: 0;

    height: 0;

    border-top: .8rem solid #434343;

    border-right: .8rem solid transparent;

    border-left: .8rem solid transparent;

    content: "";

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

	}



.area_tab_body{

	position: relative; 

	height:86%;

	background:#fee3ed;

	}



.area_tab_body > div {

	display:none;

	z-index: 1;

	opacity: 0;

	}





.area_tab_body div {

	position:absolute;

	top:0;

	height:100%;

	width:100%;

	overflow:hidden;

	padding:0 1rem;

	}

	

.area_tab_body > div.tab_show {

	display:inline;

	z-index: 2;

	opacity: 1;

	}





.area_tab_body li{ position:absolute; width:100%; clear:both;}

.area_tab_body li:first-child{  bottom:85%;}

.area_tab_body li:last-child{ bottom:7%;}

.area_tab_body li:nth-child(2){ bottom:69%;}

.area_tab_body li:nth-child(3){ bottom:54%;}

.area_tab_body li:nth-child(4){ bottom:39%;}

.area_tab_body li:nth-child(5){ bottom:23%;}



.area_tab_body dl{ width:100%;display:block;} 

.area_tab_body dt{ margin-bottom:.2rem;} 

	

.area_tab_body dd.shop_name,

.area_tab_body dd.news_txt{

	float:left;

	display:block;

	font-size:1.1rem;

	}



.area_tab_body dd.shop_name a,

.area_tab_body dd.news_txt a{display:block;}

 

  

.area_tab_body dd.shop_name{

	width:42%;

	margin-right:.8rem;

	letter-spacing:0;

	padding:.6rem .2rem;

	background:#333;

	color:#FFF;

	border-radius: .2rem;

	text-align:center;

	}

	

.area_tab_body dd.news_txt{

	width:49%;

	line-height:1.8rem;

	letter-spacing:0;

	padding-top:.4rem;

	white-space: nowrap;

	} 



 

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

     セキュリティポリシー

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



#first_v{background:url(../yes_img-top/top/btn_first_v.jpg);}	





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

     お問合せ

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



#contact{background:url(../yes_img-top/top/btn_contact.jpg);}







	

/*  レスポンシブ 画面サイズ別

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



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

    min-width: 320px; 320～600 (スマホ表示)

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



@media screen and (max-width:600px){

	

	

	/* エリア選択縦長サイズ用 */	

	#container {

		width:100%;

		height: auto;

		max-width:600px;

		position:relative;

		display:block;

		}



	/* エリア選択*/ 	

	.box-big1{

		position:relative;

		display:block;

		background-position: center top !important;

		float:left;

		width : 33.33333% ;

		padding-top:35% ;

		}

	





	/* MAP */	

	#map{

		position: absolute;

		width: 100%;

		padding-top:100%;

		}

		

	#map p{

		width:100%;

		font-size:1.4rem;

		top:14%;

		left:12%;

		line-height:2rem;

		}

	

	/* 日本列島 */

	.map_in{

		width:95%;

		top:58%;

		-webkit-transform: translate(-47%, -50%);

		transform: translate(-47%, -50%);

		}

	

	/* 在籍数 */

	.girl_count{

		top: 36%;

		left:18%;

		font-size: 2.4rem;

		}

		

	.girl_count span{font-size:3.4rem;}

	

	/* 札幌のボタン設定 */

	.map_sapporo{right:20%;top:8%;}

	.map_al_su{right:6%;top:16%;}

	

	/* 水戸のボタン設定 */

	.map_mito{right:12%;top:45%;}

	

	/* 土浦のボタン設定 */

	.map_tsuchiura{right:14%;top:58%;}

	

	.map_al_ib{	right:24%;top:55%;}

	

	/* 横浜のボタン設定 */

	.map_yokohama{right:26%;top:68%;}

	.map_al_ka{right:30%;top:83%;}

	

	/* 松山のボタン設定 */

	.map_matsuyama{left:30%;top:65%;}

	.map_al_eh{left:31%;top:80%;}

	

	/* 福岡のボタン設定 */

	.map_hukuoka{left:16%;top:58%;}	

	.map_al_ha{left:14%;top:54%;}

	

	/* 那覇のボタン設定 */

	.map_naha{left:0;	bottom:-10%;}

	.map_al_ok{left:3%;bottom:5%;}



		

	/* 最新情報 */

	#news{

		position: absolute;

		width: 100%;

		padding-top:110%;

		margin-top:100%;

		}

			

	/* 女の子求人 */	

	#job_girl{

		position:absolute;

		left:0;

		display:block;

		width : 33.33333% ;

		padding-top:33% ;

		margin-top:210%;

		}



	/* 男性求人 */	

	#job_men{

		position:absolute;

		left:33.33333%;

		display:block;

		width : 33.33333% ;

		padding-top:33% ;

		margin-top:210%;

		}

	

	/*還元20 */

	#kangen20{

		position:absolute;

		left:66.66666%;

		display:block;

		width : 33.33333% ;

		padding-top:33% ;

		margin-top:210%;

		}



	/* 会員カード */

	#card,#card2{

		position:absolute;

		left:0;

		display:block;

		width : 33.33333% ;

		padding-top:33% ;

		margin-top:243%;

		}

	

	/* 初めてご来店 */	

	#first_v{

		position:absolute;

		left:33.33333%;

		display:block;

		width : 33.33333% ;

		padding-top:33% ;

		margin-top:243%;

		}

		

	/* お問合せ */	

	#contact{

		position:absolute;

		left:66.66666%;

		display:block;

		width : 33.33333% ;

		padding-top:33% ;

		margin-top:243%;

		}

	

	

	/* エリア名 */

	.tit_area{

		width:100%;

		position:absolute;

		font-size:1.8rem;

		left:0;

		bottom:0;

		text-align:center;

		color:#FFF;

		padding:.4rem;

		}



		}





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

    320～420 (小さいスマホ調整用)

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



@media screen and (max-width:450px){



	#map p{

		font-size:1.1rem;

		line-height:1.6rem;

		}

	

	/* 在籍数 */

	.girl_count{

		font-size:1.8rem;

		line-height:2.8rem;

		left:14%;

		}

		

	.girl_count span{

		font-size:3rem;

		}

	

	/* エリアボタン */

	.map_btn{

		font-size:1.1rem;

		border-radius: 80px ;

		-moz-border-radius: 80px;

		-webkit-border-radius: 80px;

		}

	

	.map_btn a {

		width: 36px;

		height: 36px;

		padding:1.3rem 0;

		}

	

	/* 地域名 */

	.map_al{

		font-size:1rem;

		letter-spacing:0;

		}	

	

	/* Kanagawa の位置調整 */

	.map_al_ka{right:32%;top:84%;}

	



	

	/* News の調整 */

	.area_tab_wrap{

		overflow-x: scroll;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

		}

	

	.area_tab {width:500px; margin-bottom:.6rem; font-size:1.2rem ;}

		

	.area_tab li{ width:11.4%; padding:.8rem 0;}

	

	.area_tab_body{ clear:both}

	.area_tab_body li:first-child{  bottom:86%;}

	.area_tab_body li:nth-child(2){ bottom:69%;}

	.area_tab_body li:nth-child(3){ bottom:52%;}

	.area_tab_body li:nth-child(4){ bottom:35%;}

	.area_tab_body li:nth-child(5){ bottom:18%;}

	.area_tab_body li:last-child{ bottom:1%;}

	

	h2{ font-size:1.4rem; margin-bottom:.4rem;}

	

	.area_tab_body dd.shop_name,

	.area_tab_body dd.news_txt{ font-size:1.0rem; }

			

		}

		

		



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

    min-width: 601px; 601～2000 ★SP以外共通

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





@media screen and (min-width:601px){

	

	/* エリア選択縦長サイズ用 */	

	.box-big1{

		position: relative;

		grid-row:1 / span 2;

		

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-row: 1;/* IE */

		  

		}

		

	/*  ディレイ設定 */	

	.box-big1,

	#map,

	#job_girl,

	#job_men,

	#kangen20,

	#card,

	#card2,

	#news,

	#first_v,

	#contact {

		opacity: 0;

		

		filter:alpha(opacity=0); /* IE 6,7*/

		-ms-filter: "alpha(opacity=0)"; /* IE 8,9 */

		-moz-opacity:0; /* FF , Netscape */

		-khtml-opacity: 0; /* Safari 1.x */

		opacity:0;

		zoom:1; /*IE*/

		

		}



			

	/* エリア選択縦長サイズ用の比率を変えない為の設定 */	

	.box-big1:before{

		content:"";

		display: block;

		padding-top: 200%;

		}

		

	.box-in{ position:absolute;left:0;top:0; width: 100%; height: 100%;}

	

	#sapporo > a:hover .box-in { border:4px solid #80cdff; box-sizing:border-box; }

	#ibaraki > a:hover .box-in { border:4px solid #ffa68d; box-sizing:border-box;}

	#tsuchiura > a:hover .box-in { border:4px solid #ff8db2; box-sizing:border-box;}

	#yokohama > a:hover .box-in { border:4px solid #bbea80; box-sizing:border-box;}

	#matsuyama > a:hover .box-in { border:4px solid #80eacc; box-sizing:border-box;}

	#hukuoka > a:hover .box-in { border:4px solid #ea83ff; box-sizing:border-box;}

	#kumamoto > a:hover .box-in { border:4px solid #ac97ff; box-sizing:border-box;}

	/* #kumamoto > a:hover .box-in { border:4px solid #aa98fd; box-sizing:border-box;}*/

	#naha > a:hover .box-in { border:4px solid #ff8ad2; box-sizing:border-box;}

	

	/* エリア名 */

	.tit_area{ position:absolute; font-size:3rem; left:1rem; top:1rem;}



	#map p{

		font-size:1.5rem;

		top:12%;

		left:4rem;

		line-height:2.4rem;

		}

	

	/* 日本列島 */			

	.map_in{top:50%;}



	/* エリアボタン(SP以外の動き) */

	.map_btn{

		transition: all 0.5s ease;

		-webkit-transition: all 0.5s ease;

		-moz-transition: all 0.5s ease;

		-ms-transition: all 0.5s ease;

		-o-transition:all 0.5s ease;

		}

		

	a .map_btn{

		-webkit-backface-visibility: hidden;   

		}

		

	.map_btn:hover{

		background:#333;

		-webkit-transform: scale( 1.5,1.5 );

		-moz-transform: scale( 1.5,1.5 );

		-ms-transform: scale( 1.5,1.5 );

		-o-transform: scale( 1.5,1.5 );

		z-index:100;

		}

		

	.map_sapporo:hover{border:4px solid #398ec5;}

	.map_mito:hover{border:4px solid #e45c36;}

	.map_tsuchiura:hover{border:4px solid #e3366e;}

	.map_yokohama:hover{border:4px solid #73b025;}

	.map_matsuyama:hover{border:4px solid #24b089;}

	.map_hukuoka:hover{border:4px solid #9e59ac;}

	.map_kumamoto:hover{border:4px solid #6849e5;}

	.map_naha:hover{border:4px solid #ca4999;}

	

	#job_girl > a:hover .box-in{border:4px solid #df4358; box-sizing:border-box;}

	#job_men > a:hover .box-in{border:4px solid #13a5a4; box-sizing:border-box;}

	#card > a:hover .box-in{border:4px solid #827424; box-sizing:border-box;}

	#card2 > a:hover .box-in{border:4px solid #827424; box-sizing:border-box;}

	#first_v > a:hover .box-in{border:4px solid #3f9d97; box-sizing:border-box;}

	#kangen20 > a:hover .box-in{border:4px solid #FFF; box-sizing:border-box;}

	#contact > a:hover .box-in{border:4px solid #333; box-sizing:border-box;}



		}





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

    min-width: 601px; 601～750

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



@media screen and (min-width:601px) and (max-width: 750px){

	

	#container {

		max-width:750px;

		

		grid-template-columns: repeat(3, 1fr);

		grid-template-rows: repeat(11, auto); 

		

		-ms-grid-columns: 33.33% 33.33% 33.33% 33.33%;/* IE */

		-ms-grid-rows:repeat(11, auto);/* IE */

		}



		

	#yokohama,	

	#matsuyama,

	#hukuoka { grid-row: 3 / span 2;}

	

	#kumamoto{ grid-row: 5 / span 2;}

	

	/* IE対策用 */

	#ibaraki{-ms-grid-column: 2;}

	#tsuchiura{-ms-grid-column: 3;}

	#yokohama{-ms-grid-column: 1;-ms-grid-row: 3;}

	#matsuyama{-ms-grid-column: 2; -ms-grid-row: 3;}

	#hukuoka{-ms-grid-column: 3; -ms-grid-row: 3;}

	#kumamoto{-ms-grid-column: 1; -ms-grid-row: 5;}



	#naha{

		grid-row: 5 / span 2;

		-ms-grid-row: 5;/* IE */

		-ms-grid-column: 2;/* IE */

		}



		

	/* 女の子求人 */	

	#job_girl{

		grid-row: 5;

		grid-column: 3;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:3 ;/* IE */

		}



	/* 男性求人 */	

	#job_men{

		grid-row: 6;

		grid-column: 3;

				

		-ms-grid-row: 6;/* IE */

		-ms-grid-column:3 ;/* IE */

		}

		

	/* MAP */	

	#map{

		grid-row: 7;

		grid-column: 1 / 4;

		

		-ms-grid-row: 7;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column: 1;/* IE */

		-ms-grid-column-span:3;/* IE */

		}

	

	/* 比率を変えない為の設定 */	

	#map:before {

		content:"";

		display: block;

		padding-top:66.6%;

		}	





	/* 最新情報 */	

	#news{

		grid-row: 9 / 11;

		grid-column: 1 / 3;

		

		-ms-grid-row: 9;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column:1;/* IE */

		-ms-grid-column-span:2 ;/* IE */

		}	

								

	/* 比率を変えない為の設定 */	

	#news:before {

		content:"";

		display: block;

		padding-top:100%;

		}	

		

	/*還元20 */

	#kangen20{

		grid-row: 9;

		grid-column:3 ;

		

		-ms-grid-row: 9;/* IE */

		-ms-grid-column:3 ;/* IE */

		}

		

	/* 会員カード */

	#card,

	#card2{

		grid-row: 10 ;

		grid-column: 3;

		

		-ms-grid-row: 10 ;/* IE */

		-ms-grid-column:3 ;/* IE */

		}

	

	/* 初めてご来店 */	

	#first_v{

		grid-row: 11;

		grid-column:1;

		

		-ms-grid-row: 11;/* IE */

		-ms-grid-column:1 ;/* IE */

		}	





	/* 比率を変えない為の設定 */	

	#first_v:before {

		content:"";

		display: block;

		padding-top:100%;

		}	



		

	/* お問合せ */	

	#contact{

		grid-row: 11;

		grid-column:2;

		

		-ms-grid-row: 11;/* IE */

		-ms-grid-column:2 ;/* IE */

		}





	/* ディレイ設定 */	

	.box-big1,

	#job_girl,

	#job_men{

		-webkit-animation: example 0.5s ease 0.5s 1 forwards;

		animation: example 0.5s ease 0.5s 1 forwards;

		}



	#kangen20,

	#card,

	#card2,

	#first_v,

	#contact,

	#news,

	#map{

		-webkit-animation: example 1.2s ease 0.5s 1 forwards;

		animation: example 1.2s ease 0.5s 1 forwards;

		}	

													

		}





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

    min-width:　751px; 751～1000

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



@media screen and (min-width:751px) and (max-width: 1000px){

	#container {

		max-width:1000px;

		

		grid-template-columns: repeat(4, 1fr);

		grid-template-rows: repeat(8, auto);

		

		-ms-grid-columns: 25% 25% 25% 25%;/* IE */

		-ms-grid-rows:  repeat(8, auto);/* IE */

		}

		

	#matsuyama,

	#hukuoka,

	#kumamoto{ grid-row: 3 / span 2;}

	

	/* IE対策用 */

	#ibaraki{-ms-grid-column: 2;}

	#tsuchiura{-ms-grid-column: 3;}

	#yokohama{-ms-grid-column: 4;}

	#matsuyama{-ms-grid-column: 1; -ms-grid-row: 3;}

	#hukuoka{-ms-grid-column: 2; -ms-grid-row: 3;}

	#kumamoto{-ms-grid-column: 3; -ms-grid-row: 3;}



	#naha{

		grid-row: 3 / span 2;

		-ms-grid-row: 3;/* IE */

		-ms-grid-column: 4;/* IE */

		}

	

	/* MAP */	

	#map{

		grid-row: 5 / 7;

		grid-column: 1 / 4;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column: 1;/* IE */

		-ms-grid-column-span:3;/* IE */

		}

	

	/* 比率を変えない為の設定 */	

	#map:before {

		content:"";

		display: block;

		padding-top:66.6%;

		}	





	/* 女の子求人 */	

	#job_girl{

		grid-row: 5 ;

		grid-column: 4 ;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:4 ;/* IE */

		}



	/* 男性求人 */	

	#job_men{

		grid-row: 6;

		grid-column: 4 ;

		

		-ms-grid-row: 6;/* IE */

		-ms-grid-column:4 ;/* IE */

		}

		

	/*還元20 */

	#kangen20{

		grid-row: 7 ;

		grid-column: 1 ;

		

		-ms-grid-row: 7;/* IE */

		-ms-grid-column:1 ;/* IE */

		}

		

	/* 会員カード */

	#card,

	#card2{

		grid-row: 8 ;

		grid-column: 1 ;

		

		-ms-grid-row: 8;/* IE */

		-ms-grid-column:1 ;/* IE */

		}



	/* 比率を変えない為の設定 */	

	#kangen20:before,

	#card:before,

	#card2:before{

		content:"";

		display: block;

		padding-top:100%;

		}	



	/* 最新情報 */	

	#news{

		grid-row: 7 / 9;

		grid-column: 2 / 4;

		

		-ms-grid-row: 7;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column:2 ;/* IE */

		-ms-grid-column-span:2 ;/* IE */

		}	

		

	/* 初めてご来店 */	

	#first_v{

		grid-row: 7;

		grid-column: 4 ;

		

		-ms-grid-row: 7;/* IE */

		-ms-grid-column:4 ;/* IE */

		}	

		

	/* お問合せ */	

	#contact{

		grid-row: 8;

		grid-column: 4 ;

		

		-ms-grid-row: 8;/* IE */

		-ms-grid-column:4 ;/* IE */

		}

		

	/* ディレイ設定 */	

	.box-big1{

		-webkit-animation: example 0.5s ease 0.5s 1 forwards;

		animation: example 0.5s ease 0.5s 1 forwards;

		}

		

	#job_girl,

	#job_men,

	#kangen20,

	#card,

	#card2,

	#first_v,

	#contact,

	#news,

	#map{

		-webkit-animation: example 1.2s ease 0.5s 1 forwards;

		animation: example 1.2s ease 0.5s 1 forwards;

		}



									

		}





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

    min-width:　1001px; 1001～1250

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



@media screen and (min-width:1001px) and (max-width: 1250px){

	#container {

		max-width:1250px;

		

		grid-template-columns: repeat(5, 1fr);

		grid-template-rows: repeat(6, auto);

		

		-ms-grid-columns: 20% 20% 20% 20% 20%;/* IE */

		-ms-grid-rows:  repeat(6, auto);/* IE */

		}

		

		

	#hukuoka,

	#kumamoto{ grid-row: 3 / span 2;}

	

	/* IE対策用 */

	#ibaraki{-ms-grid-column: 2;}

	#tsuchiura{-ms-grid-column: 3;}

	#yokohama{-ms-grid-column: 4;}

	#matsuyama{-ms-grid-column: 5;}

	#hukuoka{-ms-grid-row: 3;}

	#kumamoto{-ms-grid-column: 2;-ms-grid-row: 3;}

	

	

	#naha{

		grid-row: 3 / span 2;

		-ms-grid-row: 3;/* IE */

		-ms-grid-column:3;/* IE */

		}





	/* MAP */	

	#map{

		grid-row: 3 / 5;

		grid-column: 4 / 6;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column: 4;/* IE */

		-ms-grid-column-span:2;/* IE */

		}

	

	

	.map_in{

		-webkit-transform: translate(-50%, -40%);

		transform: translate(-50%, -40%);

		}

	

	.girl_count{top: 36%;left:12%;}

	

	

	/* 札幌のボタン設定 */

	.map_sapporo{top:10%;}

	.map_al_su{top:17%;}



	/* 水戸のボタン設定 */

	.map_mito{top:44%;}

	

	/* 松山のボタン設定 */

	.map_al_eh{top:82%;}

	

	/* 福岡のボタン設定 */

	.map_hukuoka{left:16%;top:58%;}	



	/* 那覇のボタン設定 */

	.map_naha{left:1%;bottom:-15%;}	

	.map_al_ok{bottom:1%;}

	

		

	/* 女の子求人 */	

	#job_girl{

		grid-row: 5;

		grid-column:1;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:1;/* IE */

		}



	/* 男性求人 */	

	#job_men{

		grid-row: 6;

		grid-column:1;

		

		-ms-grid-row: 6;/* IE */

		-ms-grid-column:1 ;/* IE */

		}

		

	/* 比率を変えない為の設定 */	

	#job_girl:before,

	#job_men:before{

		content:"";

		display: block;

		padding-top:100%;

		}





	/*還元20 */

	#kangen20{

		grid-row: 5;

		grid-column:2;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:2 ;/* IE */

		} 

		

	

	/* 会員カード */

	#card,

	#card2{

		grid-row: 6;

		grid-column:2;

		

		-ms-grid-row: 6;/* IE */

		-ms-grid-column:2 ;/* IE */

		} 

		



	/* 最新情報 */	

	#news{

		grid-row: 5 / 7;

		grid-column: 3 / 5;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column:3 ;/* IE */

		-ms-grid-column-span:2 ;/* IE */

		}	



	

	/* 初めてご来店 */	

	#first_v{

		grid-row: 5;

		grid-column:5;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:5 ;/* IE */

		}	

		

	/* お問合せ */	

	#contact{

		grid-row: 6;

		grid-column:5;

		

		-ms-grid-row: 6;/* IE */

		-ms-grid-column:5 ;/* IE */

		}

		



	/* ディレイ設定 */	

	.box-big1,

	#map{

		-webkit-animation: example 0.5s ease 0.5s 1 forwards;

		animation: example 0.5s ease 0.5s 1 forwards;

		}

		

	#job_girl,

	#job_men,

	#kangen20,

	#card,

	#card2,

	#first_v,

	#contact,

	#news{

		-webkit-animation: example 1.2s ease 0.5s 1 forwards;

		animation: example 1.2s ease 0.5s 1 forwards;

		}

		

							

		}



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

    min-width:　1251px; 1251～1500

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



@media screen and (min-width:1251px) and (max-width: 1500px){

	#container {

  

		max-width:1500px;

		

		grid-template-columns: repeat(6, 1fr);

		grid-template-rows:  repeat(5, auto) ;

		

		-ms-grid-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;/* IE */

		-ms-grid-rows:repeat(5, auto);/* IE */

		}

		



	#kumamoto{ grid-row: 3 / span 2;}

	



	/* IE対策用 */

	#ibaraki{-ms-grid-column: 2;}

	#tsuchiura{-ms-grid-column: 3;}

	#yokohama{-ms-grid-column: 4;}

	#matsuyama{-ms-grid-column: 5;}

	#hukuoka{-ms-grid-column: 6;}

	#kumamoto{ -ms-grid-row: 3;}

	

	

	#naha{

		grid-row: 3 / span 2;

		-ms-grid-row: 3;/* IE */

		-ms-grid-column: 2;/* IE */

		}





	/* MAP */	

	#map{

		grid-row: 3 / 5;

		grid-column: 3 / 5;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column: 3;/* IE */

		-ms-grid-column-span:2;/* IE */

		}

		

	.map_in{

		-webkit-transform: translate(-50%, -40%);

		transform: translate(-50%, -40%);

		}

		

	.girl_count{top: 36%;left:12%;}

	

	/* 札幌のボタン設定 */

	.map_sapporo{top:10%;}

	.map_al_su{top:17%;}



	/* 水戸のボタン設定 */

	.map_mito{top:44%;}

	

	/* 松山のボタン設定 */

	.map_al_eh{top:82%;}

	

	/* 福岡のボタン設定 */

	.map_hukuoka{left:16%;top:58%;/*background:#8d33d1;*/}	

	.map_al_ha{left:16%;top:54%;}



	/* 那覇のボタン設定 */

	.map_naha{left:1%;bottom:-15%;}	

	.map_al_ok{bottom:1%;}





	/* 最新情報 */	

	#news{

		grid-row: 3 / 5;

		grid-column: 5 / 7;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column:5 ;/* IE */

		-ms-grid-column-span:2 ;/* IE */

		}	



	/* 女の子求人 */	

	#job_girl{

		grid-row: 5;

		grid-column:1;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:1;/* IE */

		}

	



		

	/* 比率を変えない為の設定 */	

	#job_girl:before {

		content:"";

		display: block;

		padding-top:100%;

		}



	/* 男性求人 */	

	#job_men{

		grid-row: 5;

		grid-column:2;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:2 ;/* IE */

		}





	/*還元20 */

	#kangen20{

		grid-row: 5;

		grid-column:3;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:3 ;/* IE */

		} 

		

	

	/* 会員カード */

	#card,

	#card2{

		grid-row: 5;

		grid-column:4;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:4 ;/* IE */

		} 

	

	/* 初めてご来店 */	

	#first_v{

		grid-row: 5;

		grid-column:5;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:5 ;/* IE */

		}	

		

	/* お問合せ */	

	#contact{

		grid-row: 5;

		grid-column:6;

		

		-ms-grid-row: 5;/* IE */

		-ms-grid-column:6 ;/* IE */

		}

		

	/* ディレイ設定 */	

	.box-big1,

	#map,

	#news{

		-webkit-animation: example 0.5s ease 0.5s 1 forwards;

		animation: example 0.5s ease 0.5s 1 forwards;

		}

		

	#job_girl,

	#job_men,

	#kangen20,

	#card,

	#card2,

	#first_v,

	#contact{

		-webkit-animation: example 1.2s ease 0.5s 1 forwards;

		animation: example 1.2s ease 0.5s 1 forwards;

		}

		

		}

		

		

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

    min-width:　1501px; 1501～2000

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





@media screen and (min-width:1501px) {

	#container {

		max-width:2000px;

		

		grid-template-columns: repeat(8, 1fr);

		grid-template-rows: repeat(4, auto);

		

		-ms-grid-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% ;/* IE */

		-ms-grid-rows: repeat(4, auto);/* IE */

		

		}

		

		

	/* IE対策用 */

	#ibaraki{-ms-grid-column: 2;}

	#tsuchiura{-ms-grid-column: 3;}

	#yokohama{-ms-grid-column: 4;}

	#matsuyama{-ms-grid-column: 5;}

	#hukuoka{-ms-grid-column: 6;}

	#kumamoto{-ms-grid-column: 7;}

	#naha{-ms-grid-column: 8;}

		



	/* MAP */	

	#map{

		grid-row: 3 / 5;

		grid-column: 1 / 4;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column: 1;/* IE */

		-ms-grid-column-span:3;/* IE */

		

		}

	

	/* 比率を変えない為の設定 */	

	#map:before {

		content:"";

		display: block;

		padding-top:66.6%;

		}

		

	#map p{ left:10%;}

				

	/* 女の子求人 */	

	#job_girl{

		grid-row: 3 ;

		grid-column: 4 ;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-column:4 ;/* IE */

		}



	/* 男性求人 */	

	#job_men{

		grid-row: 4 ;

		grid-column: 4 ;

		

		-ms-grid-row: 4;/* IE */

		-ms-grid-column:4 ;/* IE */

		}

				

	/*還元20 */

	#kangen20{

		grid-row: 3 ;

		grid-column: 5 ;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-column:5 ;/* IE */

		} 



	/* 会員カード */

	#card,

	#card2{

		grid-row: 4 ;

		grid-column: 5 ;

		

		-ms-grid-row: 4;/* IE */

		-ms-grid-column:5 ;/* IE */

		} 

	

	/* 最新情報 */	

	#news{

		grid-row: 3 / 5;

		grid-column: 6 / 8;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-row-span: 2;/* IE */

		-ms-grid-column:6 ;/* IE */

		-ms-grid-column-span:2 ;/* IE */

		}	

	

	/* 初めてご来店 */	

	#first_v{

		grid-row: 3;

		grid-column: 8;

		

		-ms-grid-row: 3;/* IE */

		-ms-grid-column:8 ;/* IE */

		}	

		

	/* お問合せ */	

	#contact{

		grid-row: 4;

		grid-column: 8;

		

		-ms-grid-row: 4;/* IE */

		-ms-grid-column:8 ;/* IE */

		}

	

	

	/* ディレイ設定 */	

	.box-big1{

		-webkit-animation: example 0.5s ease 0.5s 1 forwards;

		animation: example 0.5s ease 0.5s 1 forwards;

		}

		

	#map,

	#job_girl,

	#job_men,

	#kangen20,

	#card,

	#card2,

	#news,

	#first_v,

	#contact{

		-webkit-animation: example 1.2s ease 0.5s 1 forwards;

		animation: example 1.2s ease 0.5s 1 forwards;

		}



		}







	/*  ディレイ設定(スマホサイズ以上) */	



	@keyframes example {

		100% {

			opacity: 1;

			

			filter:alpha(opacity=100); /* IE 6,7*/

			-ms-filter: "alpha(opacity=100)"; /* IE 8,9 */

			zoom:1; /*IE*/

			}

			}

		

	@-webkit-keyframes example {

		100% {

			opacity: 1;

			

			filter:alpha(opacity=100); /* IE 6,7*/

			-ms-filter: "alpha(opacity=100)"; /* IE 8,9 */

			zoom:1; /*IE*/

			}

			}





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

    年齢認証

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



.modal {

  position: fixed;

  display: none;

  z-index: 9999999999;

  top: 50%;

  left: 50%;

  width: 42rem;

  height: 32rem;

  margin-top: -16rem;

  margin-left: -21rem;

  text-align: center;

  line-height: 1.4;

  font-weight: 500;

  letter-spacing: 0.8pt;

  box-sizing: border-box;

}



.modal p {

  margin-bottom: .5rem;

}



.modal p.modal_text1,

.modal p.modal_text3 {

  font-size: 2.2rem;

}



.modal p.modal_text1 span {

  font-size: 1.8rem;

  display: block;

  margin-bottom: .5rem;

}



.modal p.modal_text2 {

  font-size: 1.8rem;

  color: #777;

}



.modal p.modal_text3 {

  margin-bottom: .8rem;

}



.modal ul {

  overflow: hidden;

}



.modal li {

  width: 50%;

  float: left;

  font-size: 1.4rem;

}



.modal li.no {

  color: #999;

}



.modal li a {

  cursor: pointer;

  margin: 0 3%;

  padding: 1rem 0 1rem;

  border-radius: .5rem;

  display: block;

  line-height: 1.2;

  font-size: 1.8rem;

  -webkit-transition: all .3s;

  transition: all .3s;

}



.modal li.yes a {

  color: #fff;

  border: 1px solid #404040;

  background: #404040;

}



.modal li.no a {

  color: #999;

  border: 1px solid #999;

}



@media screen and (min-width: 960px) {

  .modal li.yes a:hover {

    border: 1px solid #777;

    background: #777;

    -webkit-transition: all .3s;

    transition: all .3s;

  }

  .modal li.no a:hover {

    border: 1px solid #777;

    color: #777;

    -webkit-transition: all .3s;

    transition: all .3s;

  }

}



@media screen and (max-width: 480px) {

  .modal {

    width: 320px;

    height: 300px;

    margin-top: -150px;

    margin-left: -160px;

  }

  .modal p.modal_text2 {

    font-size: 14px;

  }

  .modal ul {

    padding: 0 .5rem;

  }

}















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

    告知バナー

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


/*
#head_bar {

  background-image: url(../yes_img-top/head_bar/banner.png);

  background-size: 225px;

  width: 100%;

  height: 30px;

}

#head_bar a {

  background-image: url(../yes_img-top/head_bar/banner.png);

  background-size: 771px;

  display: block;

  width: 100%;

height: 100%;

-webkit-transition: opacity .2s;

transition: opacity .2s;

}
*/


#head_bar02 {

  width: 100%;

  height: 50px;

  /*border-bottom: 1px solid #111;*/

}

#head_bar02 a {

  background-image: url(../yes_img-top/head_bar/banner.png);

  background-size: 640px;

  display: block;

  width: 100%;

height: 100%;

-webkit-transition: opacity .2s;

transition: opacity .2s;

}

@media screen and (max-width:640px) {

#head_bar02 {

  height: auto;

}

#head_bar02 a {
  background-image: url(../yes_img-area/common/y25.png);
  background-size: 100%;

  padding-top:30%;

}

}
/*
@media screen and (max-width:600px) {



#head_bar02 {

  height: auto;

}

#head_bar02 a {

    background-image: url(../yes_img-top/head_bar/banner_sp.png);

  background-size: 100%;

    padding-top: 28%;

}

}
*/
/*
@media screen and (min-width:601px) {

#head_bar02 a:hover {

  opacity: 0.7;

}

}

@media screen and (max-width:450px) {

#head_bar {

  background-size: 50%;

  padding-top: 6.666%;

  height: 0;

}

}

*/