@charset "utf-8";
/* CSS Document */

body{
	color:#000000;
	width: 100%;
    padding: 0;
    margin: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
	
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.pcob{
	display:block;
}
.spob{
	display:none;
}
#footer{
	width:100%;
	background:#ccc;
}
.desc{
	clear: both;
	padding:2% 5% 10% 2%;
    width: 90%;
    font-size: 80%;
	margin-left:0!important;
}


#footerin{
	width:960px;
	margin:0 auto;
}

#footerin ul li{
	list-style:none;
	width:20%;
	float:left;
	margin:2%;
}

#newshopwrap{
	width:100%;
	background:#E7EFF2;
	position: relative;
}
/*new shop List*/
#newshop{
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
	background:#e7eff2;
}

#wrap {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
	text-align: center;
}

#shoplist{
	width:100%;
	max-width:1200px;
}

.coopb{
	background:#e0e2e7;
	width:100%;
	text-align:center;
}

.coopox{
	width: 1200px;
    margin: 0 auto;
    padding-bottom: 1%;
    margin-top: -30px;
    z-index: 50;
    position: relative;
}
.coopox img.pcobb{
	display:inline-block;
}
.atbox{
	background:#fff;
	width:100%;
	text-align:center;
}

.atbox_in{
	width:1200px;
	text-align:left;
	display:inline-block;
}

.atbox_in ul{
	border-bottom:1px solid #00325c;
	padding-bottom:1em;
}

.atboxttl{
	font-size:180%;
	margin-bottom:0;
}
.atboxdes{
	font-size:120%;
	margin-top:0.5em;
}
	
#kotei{
width:100%;

}


#kotei.m_fixed {
	left: 0;
	position: fixed;
	top: 0;
	z-index:100;
	width:100%;
	background: rgba(255,255,255,0.9);	
}


	
	#menubutn .btnbox1{
		/*background: rgba(255,255,255,0.9);*/
		width:670px;
		margin:0 auto;
	}
#menubutn .btnbox2{
		width:560px;
		margin:0 auto;
	}
	#menubutn .ttl h2{
		margin:0 auto;
		padding:10px;
		position:relative;
		cursor:pointer;
	}

#menubutn .ttl h2 span{
		
		position:absolute;
	right:10%;
	
	}

#test{	
	height: 200px;
    width: 100%;
	background-size:100%;
    z-index: 0;
    position: absolute;
	top:200px;
	left:0;
    background: #002870 url(../img/choosepc.jpg) top right no-repeat;
	
}
	
#test.m_fixed{
	position: fixed;
	top: 200px;
	left: 0;
}


#ttlimg{
	
	width:450px;
	z-index:100;
	margin:0 auto;
	
}


#nan4{
	position:absolute;
	width:200px;
	top:2%;
	right:2%;
	z-index:100;
	margin:0;
}

	
/*main area*/
#main{
	width:100%;
	margin:0 auto;
	position:relative;
	background:#e7eff2 url("../img/main_bk.jpg") center center no-repeat;
	background-size:cover;
	height:550px;
	overflow: hidden;
}
#main img{
	width:100%;
}

#signimg{
	width:140px;position:absolute;right:20%;bottom:5px;z-index:100;margin:0;
}
.swiper-slide img{
	width:100%;
}
	
/*shop information*/
.slideConts {
	width: 500px;
	/*height: 600px;*/
	margin: 40px auto;
	
}



.slbox{
	/*width:300px;*/
	width:250px;
	margin:0 auto;
	-webkit-transition: .7s;
	-o-transition: .7s;
	transition: .7s;
	-webkit-filter: drop-shadow(0px 25px 15px rgba(0,0,0,.5));
	filter: drop-shadow(0px 25px 20px rgba(0,0,0,.5));
	position:relative;
}

.slbox .gotop{
	position:absolute;
	top:0px;
	right:20px;
	width:60px;
	margin:0;
}
.slbox .gotop img{width:100%;}

.slideContsL {
	/*width:33.3%;*/
	width:25%;
	margin-bottom:5%;
	float: left;
	position: relative;
	/*background-color: lightpink;*/
	transform: translate(0px, -40px);
	/*transform:translateY(-1000px);*/
}

.slideContsR {
	width:100%;
	position: relative;
	/*background-color: lightblue;*/
	transform: translate(800px, 0);
}

/*#shoplist .slideConts img:hover{
	transform:scale(1.05);
	transition:0.2s;
}*/

#shoplist .slideConts .slbox:hover{
	transform:scale(1.05);
	transition:0.2s;
}



.hide{
	display:none;
}
		
.slideContsL.show {
  transform: translate(0, 0) !important;
	transition-duration : 0.2s;
}
.slideContsR.show {
  transform: translate(0, 0) !important;
	transition-duration : 0.2s;
}
	
.img01 { width: 100%;}
.mask { position: absolute; top: 0; left: 0; overflow: hidden; transition: all 0.2s ease-out;}
.img02 { position: absolute; top: 0; left: 0; transition: all 0.2s ease-out;}
	
#menubutn{
	clear:both;
	width:960px;
	margin:0 auto;
}
#menubutn p{
	width:28%;
	
	float:left;
	margin:2%;
	text-align:center;
}
#menubutn p#all{
	width: auto;
    margin: 1%;
}

#menubutn p#all:hover{
	cursor:pointer;
}

#menubutn p#all img{
	width:100%;
}
	
.ttl{
	width:100%;
	text-align:center;
	color:#00325c;
}
	
.white-popup {
	position: relative;
	background: #FFF;
	padding: 10px;
	width: auto;
	width: 400px;
	margin: 20px auto;
	height:80vh;
	overflow-y:scroll;
	overflow-x:hidden;
}

.white-popup .menuinf{
	width:96%;
	padding:5% 2%;
}

.white-popup .stinf{
	width:96%;
	padding:2%;
}

.white-popup .prb{
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:120%;
	margin-top: -8px;
    padding: 3% 0;
	background:#e0e2e7;
}
.white-popup .prb2{
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:120%;
	margin:0;
	background:#c0c3ce;
	padding:2% 0;
}

.white-popup .prb2 span{
	background:#c0c3ce;
	color:#005bab;
}

.white-popup span.atp{
	color:#000000;
	font-size:14px;
	font-weight:normal;
}

.white-popup .grbtnbox{
	width: 80%;
    margin: 5% auto 1%;
}
.white-popup .grbtnbox img{
	width:100%;
}


.white-popup .pbox{
	position:relative;
}


.white-popup .gotop{
	position:absolute;
	top:0;
	left:20px;
}


.tokuten{
	width:100%;
	background:#fff1d0;
}
.tokleft{width: 13%;
    float: left;
    padding: 3%;}
.tokright{width:75%;float:right;padding: 3%;text-align:center;}
.tokleft img{width:100%;}

.tokright .tok{font-size: 130%;
    font-weight: bold;
    padding-top: 0.1rem;text-align:center;}
.tokright .tok span{border-bottom: 2px solid #FF0000;text-align:center;}
.tokright p.atp{font-size:14px;text-align:center;padding-top: 5px;}
label{
	cursor: pointer;
	/*padding: 1%;
	border: 1px solid #434343;
	border-radius: 5px;
	width: 72px; */ 
	float: left;
	margin: 1%;
	text-align: center;
}
	
label img{
	width:100%;
}
input{
  display: none;
}
/*.check_box:checked + .label {
	background-color:#00325c;
	color:#fff;
}*/
	
#top_scroll{ 
    /*position: relative; */
    z-index: 100; 
    margin: 0; 
    padding: 0; 
}
 
#page-top1{
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: -250px;
    right: 5%;
    width: 76px;
    height: 76px;
    padding: 0;
    color: #222;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

#page-top1 img{
	width:100%;
}
 
#page-top1:hover{ 
    background: ;
    transform: translateY(-10px);
}
 
#top_scroll:hover{
    background: #fff;
}


.white-popup{
	color:#000000;
	background:#fff;
	padding:0 100px;
	width:400px;
	height:600px;
}
.white-popup p{
	margin:0;
	text-align:justify;
}

.white-popup p.tatem{
	border-top:1px solid #00325c;
	border-bottom:1px solid #00325c;
	padding: 0.2em;
	margin: 0.8em 0.5em;
	clear:both;
}
.white-popup p.stnm{
font-size: 22px;
font-weight: bold;
padding-left:0.5em;
}
.white-popup ul{
	padding-left:10px;
}
.white-popup ul li{
	list-style:none;
}
.white-popup ul.mnlst li{
	list-style:outside;
}

.white-popup ul li.tel{
	background:url(../img/icon/tel.jpg) left center no-repeat;
	background-size:18px;
	padding-left:25px;
}

.white-popup ul li.tel a{
	text-decoration:none;
	color:#00325c;
}
.white-popup ul li.time{
	background:url(../img/icon/time.jpg) left 5px no-repeat;
	background-size:18px;
	padding-left:25px;
}
.white-popup ul li.seki{
	background:url(../img/icon/cha.jpg) left center no-repeat;
	background-size:18px;
	padding-left:25px;
}
.white-popup p img{
	width:50%;
	float:left;
	margin-right:2%;
}

@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}
	
@media (max-width: 812px){
	#main{
	width:100%;
	background-image:none;
		height:auto;
}
	
	#menubutn .btnbox1,#menubutn .btnbox2{width:100%;clear: both;}
	.white-popup{
	color:#000000;
	background:#fff;
	padding:0px;
	max-width:320px;
	height:80vh;
	overflow-y:scroll;
		overflow-x:hidden;
	}
	.white-popup p img{
	width:40%;
	float:left;
	margin-right:2%;
}
	
	.white-popup .menuinf,
	.white-popup .stinf{
	width:auto;
	float:none;
}
	
	.white-popup .menuinf{padding:5%;}
	
	.white-popup .prb{
	width:94%;
	font-size:120%;
	margin-top: -8px;
    padding: 3%;
}
.white-popup .prb2{
	width:94%;padding:3%;
}
	.white-popup .tokright p{text-align:center;}
	
	.tokright .tok{
		font-size:110%;
	}
	
	.tokleft{width: 100%;
		float: none;
		text-align:center;
		padding:0}
	
.tokright{width:94%;float:none;padding: 3%;text-align:center;}
.tokleft img{
	max-width: 45px;
    margin: 8px auto 0;}
	
	
	#shoplist{
	width:100%;
	max-width:100%;
	}
	
label{
	cursor: pointer;
	/*padding: 1%;
	border: 1px solid #434343;
	 border-radius: 5px; */
	width: 23%;
	float: left;
	margin: 1%;
	text-align: center;
}
	.gotol{
		width:98%;
	}
#menubutn p#all{
	width: 98%;
    margin: 2% 1%;
}
	
#test{	
	height: 400px;
    width: 100%;
	background-size:100%;
    z-index: 0;
    position: absolute;
	top:200px;
	left:0;
    background: url(../img/choosepc.jpg) top right no-repeat;
	
}
.coopox{
	width:96%;;
	margin:0 auto;
	padding:1% 2%;
}
	.coopox img{
		width:100%;
	}

	.slbox{
	width: 70vw;
	height:auto;
	margin:0 auto;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	-webkit-filter: drop-shadow(0px 25px 15px rgba(0,0,0,.5));
	filter: drop-shadow(0px 25px 20px rgba(0,0,0,.5));
}

	.slideConts {
		margin:80px auto;
	}

	.slideContsL {
		width:100%;
		float:none;
		transform: translate(-500px,0);
	}
	.slideContsL.show {		
	}
	
	#footerin{
		width:100%;
		margin:0 auto;
	}
	#footerin ul{
		padding:0;
	}
	#footerin ul li{
		width:48%;
		margin:1%;
		float:left;
	}
	#page-top1{width:60px;height:60px;}
	
	#signimg{
	width:100px;position:absolute;right:5px;bottom:5px;z-index:100;
}
.coopox .pcobb{
		display:none!important;
	}
	
	.pcob,.pcobb{
		display:none;
	}
	.spob{
		display:block;
	}
	
	#wrap {
		width: 100%;
	}
	
	
	#menubutn,#newshop{
		width:100%;
	}
	
	.atbox_in{
	width:90%;
	text-align:left;
	display:inline-block;
}

.atbox_in ul{
	border-bottom:1px solid #00325c;
	padding-bottom:1em;
	padding-left:20px;
}

.atboxttl{
	font-size:130%;
	margin-bottom:0;
}
.atboxdes{
	font-size:110%;
	margin-top:0.5em;
}
	
	
}


@media (max-width: 320px){
	.white-popup {
		color: #000000;
		background: #fff;
		padding: 0px;
		max-width: 280px;
		height: 80vh;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	
	.white-popup .prb,.white-popup .prb2{
		font-size:100%;
	}
	
	.tokright {
    width: 96%;
    float: none;
    padding: 2%;
    text-align: center;
}
	
}