@charset "Shift_JIS";
/*--------------------------------------------------------
  共通レイアウトパーツ設定
--------------------------------------------------------*/
body{width:100%;height:100%;margin:0;padding:0;font-size:1em;color:#333;background-image:url('../img/bk.png');position:relative;overflow:hidden;}
a{color:#333;}
img{border:0;margin:0;padding:0;vertical-align:bottom;}
.fonts{line-height:1.3em;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.bk{width:100%;height:100%;position:fixed;z-index:-1;pointer-events:none;}

#logo{top:50%;left:50%;position:absolute;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,35%);}
#logoy{width:255px;}
#logox, #sp_bk_top, #sp_contents, .nav-unshown{display:none;}
#navmenu{top:30%;left:60%;font-size:1em;position:fixed;}
#navmenu li{width:300px;height:65px;margin:10px 0;list-style-type:none;background:url('../img/surf_borad.png') top left / cover;color:#FFF;line-height:4em;text-indent:1in;}
#navmenu li a, #navmenu2 li a{color:#FFF;text-decoration:none;}
#sns{background-image:none !important;}
#sns img{width:50px;margin:0 30px 6px 0;}
#appeal{top:23%;left:62%;position:fixed;}
address{top:65%;left:62%;font-size:1em;font-style:normal;position:fixed;z-index:-1 !important;}
.addrchar{font-size:0.85em;}
.worktime{min-width:95px;display:block;float:left;}
#popup{position:fixed;top:0;right:0;bottom:0;left:0;background:url('../img/bk_popup.png') top left / cover;display:none;}
#popup img{left:50%;position:absolute;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,25%);z-index:110;}
#copyright{top:81%;left:46%;font-size:0.8em;font-style:normal;color:#777;position:fixed;z-index:-1;}

#container{height:100%;margin:0 auto;position:absolute;left:17%;z-index:-3;}
#slideShow img{display:block;cursor:pointer;}

#logo2{top:19%;left:9%;position:fixed;}
#logo2 img{width:180px;}
.bk2{width:100%;position:fixed;z-index:-1;}
#bk_top{top:0;left:0;}
#bk_bottom{bottom:0;left:0;}
#navmenu2{top:17%;left:24%;font-size:1em;position:fixed;}
#navmenu2 li{width:300px;height:65px;margin:0 10px;list-style-type:none;background:url('../img/surf_borad.png') top left / cover;color:#FFF;line-height:4em;text-indent:1in;float:left;}
#navmenu2 #sns{text-indent:0;}
#address2{top:62%;left:9%;font-size:0.9em;font-style:normal;position:fixed;}
#copyright2{top:81%;left:9%;font-size:0.8em;font-style:normal;color:#777;position:fixed;}

#menu{top:30%;left:27%;max-width:894px;max-height:450px;position:fixed;overflow-x:hidden;overflow-y:scroll;}
#menu p{margin:0;}
#menu li{list-style:none;background-color:#FFF;}
#top1,#regular,#nophotos1,#nophotos2{display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:flex-start;align-content:space-around;}
#top1 li{width:300px;height:360px;text-align:center;}
#gp2017{border:2px solid #FC0;}
#gp2017p{background-color:#FC0;}
#gp2018{border:2px solid #F90;}
#gp2018p{background-color:#F90;}
#regular li{border:1px dashed #aaa;width:270px;height:300px;margin-bottom:20px;}
.product_name{font-weight:bold;font-size:1.1em;text-align:left;padding:8px;}
.product_desc{font-size:0.73em;text-align:left;padding:0 8px;}
.price{text-align:right;padding:8px;}
#nophotos1 li,#nophotos2 li{border:1px dashed #aaa;width:270px;}
#nophotos1 li{height:162px;margin-bottom:20px;}
#nophotos2 li{height:100px;margin-bottom:10px;}
.um{width:162px;}
.cha{color:#960;}
.red{color:#900;}
.blue{color:#009;}
.top3 img{width:270px;}
hr{width:100%;border:0;clear:both;}

#map{top:30%;left:36%;width:640px;position:fixed;}

/* =======================================================
  レスポンシブル設定
======================================================= */
@media screen and (min-width: 569px) and (max-width:1300px) {
	#logo{top:120px;left:40%;}
	#logo img{width:185px;}
	#container{left:7%;}
	#navmenu{left:55%;}
	#appeal{left:54%;}
	address{left:54%;}
	#copyright{left:54%;}
	.bk{width:1300px;height:900px;}
	
	.bk2{width:1300px;}
	#navmenu2 li{width:200px;height:45px;margin:0 5px;line-height:3em;text-indent:0.7in;}
}

@media screen and (min-width: 0px) and (max-width:568px) {
	body{overflow-y:scroll;overflow-x:hidden;}
	#logoy, .bk, #container, #bk_top, #bk_bottom, #logo2, .um{display:none;}
	#logox{display:block;width:80%;margin:10px auto;position:relative;}
	#sns{background-color:#FFF !important;}
	#sp_bk_top{display:block;width:100%;top:0;left:0;}
	#sp_contents{display:block;width:100%;}
	#sp_contents img{width:100%;}
	#appeal{top:0;left:0;position:relative;margin:20px;}
	address, #address2{top:auto;left:0;position:relative;width:100%;padding:10px 20px;background-color:#FFF;font-size:0.8em;line-height:1.2em;box-sizing:border-box;z-index:120 !important;font-size:1em;}
	.lastimg{margin-bottom:0;}
	#copyright, #copyright2{left:0;position:relative;width:100%;padding-bottom:10px;background-color:#FFF;margin:0;text-align:right;z-index:1;}
	
	#navmenu2 li{float:none;margin:10px 0;}
	#navmenu2 #sns{text-indent:1in;}
	#menu{top:auto;left:0;width:100%;position:relative;max-height:none;overflow-y:visible;}
	
	#top1,#regular,#nophotos1,#nophotos2{display:contents;}
	#menu li{float:none;border:0;width:100%;height:auto;margin:0;border-bottom:1px dashed #aaa;}
	#top1{left:0;position:relative;-ms-transformX:translate(0%);-webkit-transformX:translate(0%);transform:translateX(0%);margin-top:30px !important;}
	#top1 li{width:100%;height:auto;padding:0;}
	#top1 .product_name{font-weight:bold;font-size:1.1em;}
	.grandprix{width:100% !important;float:none;margin:0;}
	#menu img{width:100%;}

	#map{top:auto;left:0;width:100%;position:relative;margin-top:30px !important;}

	/*-----以下ハンバーガー-----*/
	#nav-drawer{position:relative;}

	/*アイコンのスペース*/
	#nav-open{width:28px;height:28px;position:fixed;top:70px;right:20px;z-index:100;background-color:#fff;border-radius:5px;padding:10px 5px 2px 8px;}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after{
		position:absolute;height:3px;width:25px;border-radius:3px;background:#555;display:block;content:'';cursor:pointer;
	}
	#nav-open span:before{bottom:-8px;}
	#nav-open span:after{bottom:-16px;}

	/*閉じる用の薄黒カバー*/
	#nav-close{display:none;position:fixed;z-index:99;top:0;left:0;width:100%;height:100%;background:black;opacity:0;transition:.3s ease-in-out;}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close{display: block;opacity:.5;}
	#nav-input:checked ~ #navmenu, #nav-input:checked ~ #navmenu2{-webkit-transform:translateX(-1%);transform:translateX(-1%);}
	#navmenu, #navmenu2{
		overflow:visible;position:fixed;top:150px;left:auto;right:0;z-index:9999;width:85%;max-width:300px;height:320px;
		transition:.3s ease-in-out;-webkit-transform:translateX(+110%);transform:translateX(+110%);
	}
}