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

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

Grid >> 12 Columns

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

body {-webkit-text-size-adjust:100%}

/*●PC　画面の横幅が769px以上*/
.grid_1 {width: 60px;}
.grid_2 {width: 150px}
.grid_3 {width: 240px}
.grid_4 {width: 330px}
.grid_5 {width: 420px}
.grid_6 {width: 510px}
.grid_7 {width: 600px}
.grid_8 {width: 690px;}
.grid_9 {width: 780px;}
.grid_10 {width: 870px;}
.grid_11 {width: 960px;}
.grid_12 {width: 1050px;}

/*●sp・タブレット　画面の横幅が768pxまで*/
@media screen and (max-width:768px){
.grid_1,.grid_2 {width: 50%;}
.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12  {width: 100%;}
}
	
/* ==============================================

   header

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

/*●PC　画面の横幅が769px以上*/
#header{position:fixed; top: 0; background:#FFF;width:100%; min-width:1050px; z-index: 1000; }
#header .wrap{width:100%;background:#FFF; border-bottom: 1px solid #CCC;height:80px;}
#header h1{width:150px; position: absolute; top: 20px; left: 20px; display: block;}
#sp_menu{display:none;}
#sp_favo{display:none;}

/*●sp・タブレット　画面の横幅が768pxまで*/
@media screen and (max-width:768px){
#header{position:relative;min-width:auto; height:70px;}
#header .wrap{height:auto;}
#header h1{width:160px; top:15px; left:15px;}
#sp_menu{ display: block; width:70px; position: absolute; top:0; right:0;}
#sp_favo{ display: block; width:70px; position: absolute; top:0; right:70px;}
}

/* 2018-09-09 h1タグの位置変更用 */
#header #title_h1{width:150px;position:absolute;top:20px;left:20px;display:block;}
@media screen and (max-width: 768px){
#header #title_h1{width:160px;top:15px;left:15px;}
}

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

  グローバルナビ

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

/*●PC　画面の横幅が769px以上*/
#nav_box {position: relative; float: right;}
#nav_box #g_nav { padding-top: 30px; float:right;}
#nav_box #g_nav li{ float:left; margin-right:16px;}
#nav_box #g_nav li a{ color: #000;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all  1s ease;outline: none;}
#nav_box #g_nav li a:hover{text-decoration: none;color:#46B052;}
#nav_box #sns_nav { float:right; padding-top: 20px; margin-right:160px;}
#nav_box #sns_nav li{ float:left; margin-right:5px;}
#nav_box #sns_nav li a{ color: #2a430b;}
#nav_box #seach{ position: absolute;width:150px;top: 0; right: 0; z-index: 10000;}  
#nav_box #seach a{text-align: center;color: #FFF;display: block; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all  0.4s ease;width: 100%;height:50px; padding-top: 30px;background: url(../sl_images/common/head_icon_01_off.png) no-repeat left #2a430b; font-size: 120%; padding-left:12px; font-weight: bold; letter-spacing: 0.1em;}
#nav_box #seach a:hover{color:#000;background: url(../sl_images/common/head_icon_01_on.png) no-repeat left #ffea00;}
#seach_list{ position: absolute;width:150px;top:80px; right: 0; padding:5px 0;background:#ffea00; display: none; border-top: 1px dotted #000;}
#seach_list li a{text-align: center;color: #000;display: block;width:90%;padding:8% 5%; font-size:110%; padding-left:12px; font-weight: bold; letter-spacing: 0.1em; border-bottom: 1px dotted #000;}
#seach_list li:last-child a{ border: none;}
/*g_nav*/
#to_top {position:relative;width:100%;height:0;margin:0 auto;}
#to_top a {position: fixed;bottom:30px;display: block; right: 50px;}
#sp_kensaku{display:none;}


/*●sp・タブレット　画面の横幅が768pxまで*/
@media screen and (max-width:768px){
#nav_box {float: none; z-index: 1000; position: absolute;top:70px;width: 100%; display: none;}
#nav_box #g_nav {float:none; padding-top: 0; float:none; margin-right:0;width:100%; clear:both;}
#nav_box #g_nav li{ float:left; margin-right:0;width: 100%;float: left;border-bottom: 1px solid  #c0c5b9;background: rgba(22,49,6,0.9); text-align: center; position: relative;}
#nav_box #g_nav li.sp_limit{width: 100%; display: block;}
#nav_box #g_nav li a{ color: #FFF; font-weight: bold; padding: 15px 15px; display: block;}
#nav_box #sns_nav { display: none;}
/*#nav_box #seach{  position: static;padding: 20px 0;width:100%; height:auto;}*/
#nav_box #g_nav .second_nav{display: none;}
	
#to_top a {bottom:70px;bottom:calc(70px + env(safe-area-inset-bottom));right:10px;z-index:1}
	
/* sp_nav */
#sp_nav{display:block;position:absolute; top:70px; width:100%; color:#FFF; z-index:100;display:none;background:rgba(0,0,0,0.9);}
#sp_nav.clicked{position:fixed; top:0; padding:10px 0;}
#sp_nav ul{width:100%; clear:both;}
#sp_nav ul li{width: 100%;float:none;border-bottom: 1px solid #333; background: url( ../sl_images/common/arrow_02.png) no-repeat right;}
#sp_nav ul li:last-child{ border: none;}
#sp_nav ul li a{ color:#FFF; padding:12px 0; text-align:center; display:block; font-size:110%;}
#sp_nav ul li a:hover{ text-decoration:none;}

/* sp_在庫検索*/
#sp_kensaku{display:block;position:absolute; top:0; width:100%; z-index:100;display:none;background:rgba(0,0,0,0.9);position: fixed;width: 100%;} 
#sp_kensaku p { padding:20px 0; font-size: 130%; text-align: center;border-bottom: 1px solid #333;background: url(../sl_images/common/head_icon_01_on.png) no-repeat left #ffea00;background-position:23%;}
#sp_kensaku ul{width:100%; clear:both;}
#sp_kensaku ul li{width: 100%;float:none;border-bottom: 1px solid #333; background: url( ../sl_images/common/arrow_02.png) no-repeat right;color:#FFF; }
#sp_kensaku ul li:last-child{ border: none;}
#sp_kensaku li a{ color:#FFF; padding:12px 0; text-align:center; display:block; font-size:110%;}
#sp_kensaku li a:hover{ text-decoration:none;}
}

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

  footer

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

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
●PC　画面の横幅が769px以上
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#footer{color:#FFF; background:#163106; padding-top:60px; margin-top:0px;}
#footer .wrap{ position:relative; margin-bottom: 40px;}
#footer #footer_nav{float: right;}
#footer #footer_nav ul{ float: left; font-size:85%; padding:0 10px}
#footer #footer_nav ul li.arrow{ background: url( ../sl_images/common/arrow_03.png) no-repeat left; padding-left: 14px;color: #FFF; margin-bottom: 10px;}
#footer #footer_nav ul li.blank{ background: url( ../sl_images/common/foot_blank.png) no-repeat left; padding-left: 14px;color: #FFF; margin-bottom: 10px;}
#footer #footer_nav ul li a{ color:#FFF;margin: 0 5px;}
#footer #footer_nav ul li.arrow a,
#footer #footer_nav ul li.blank a{color: #FFF;}
#footer #footer_nav ul li a:hover{ text-decoration: none; opacity: 0.6;}
#footer .logo { float: left;}
#footer .copyright{ text-align: center; font-size: 70%; padding:15px 0 10px; }
#footer .btn_recruit{margin:38px auto 0; width:180px;}
#footer .btn_contact{margin:15px auto 0; width:180px;}
/*#footer .btn_contact{ background: url( ../sl_images/common/mail.png) no-repeat left rgba(0,0,0,0.4);background-position:15%;color: #FFFF; margin-top:70px; border:2px solid #FFF; border-radius: 6px; text-align: center; width:180px;}
#footer .btn_contact a{ display: block;padding:10% 0 10% 15%; color: #FFF; width:85%; height:80%;}*/

#footer .dealerlist{width:1050px;margin:auto;}
#footer .dealerlist ul li{display:inline-block}
#footer .dealerlist ul li a{color:#FFF;}
#footer .dealerlist ul li+li{padding-left:15px}
#footer .dealerlist ul li a:hover{ text-decoration: none; opacity: 0.6;}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
●sp・タブレット　画面の横幅が768pxまで
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:768px){
#footer{padding-top:20px;}
#footer .wrap{ margin-bottom: 20px;}
#footer #footer_nav{/* display: none;*/}
#footer .logo { float:none; text-align: center;}
#footer .btn_recruit{margin:15px auto 0;}
#footer .btn_contact{margin:15px auto 0;}
#footer #footer_nav ul{width:50%; padding:0}
#footer #footer_nav{float:none;margin-top:20px}
#footer #footer_nav a{padding:5px;display:block}
#footer .dealerlist{width:100%;margin-bottom:20px;text-align:center;}
#footer .dealerlist p{border-bottom:1px solid #FFF;font-size:18px;padding-bottom:5px}
#footer .dealerlist ul li{padding:5px 0;display:block}
#footer #footer_nav ul.footerSp{width:100%!important}
}
	


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

  共通セレクタ（全ページ共通で使う基本レイアウト）

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

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
●PC　画面の横幅が769px以上
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*共通レイアウト*/
#contents{margin:0px auto;padding-top:80px;}
.wrap{margin:0px auto;width:1050px; clear:both}
h1.PageName{ background: url(../sl_images/common/bg.jpg) repeat; text-align: center; padding: 30px; margin-bottom: 70px; font-size:150%; color: #fff; overflow: hidden;height:25px;}
h2.PageName{ background: url(../sl_images/common/bg.jpg) repeat; text-align: center; padding: 30px; margin-bottom: 70px; font-size:150%; color: #fff; overflow: hidden;height:25px;}
h3.Title{ padding-bottom:15px; margin:70px auto 35px; font-size:200%; border-bottom:1px solid #a0a0a0; text-align: center;}
.entry{text-align: center; margin-bottom: 50px; font-size: 120%; line-height: 1.6em;}

/*リスト2列*/
.list_2 li{ float: left; margin-right: 30px; width:510px; margin-bottom: 15px;}
.list_2 li:last-child{ margin-right: 0;}
.list_2 li img{max-width: 100%;height:auto;width:100%;}
/*リスト3列*/
.list_3 li{ float: left; margin-right: 30px; width:330px; margin-bottom: 15px; /*max-height:465px*/}
.list_3 li:last-child{ margin-right: 0;}
/*.list_3 li img{ width: 100%; height: 100%;}*/
.list_3 li img{max-width: 100%;height:auto;}
.list_3 li a .pic:hover { opacity: 0.8;-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;transition: all  0.4s ease;}

/*リスト4列*/
.list_4 li{ float: left; margin-right:30px; width:240px; margin-bottom: 15px;}	
.list_4 li:nth-child(4n){ margin-right: 0;}
.list_4 li img{max-width: 100%;height:auto;}
.list_4 li .title{ margin: 8px auto 10px; line-height: 1.5em;}
.list_4 li.snap{ margin-bottom: 30px}
.list_4 li a .pic:hover { opacity: 0.8;-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;transition: all  0.4s ease;}
.picbox{height:200px;display:block}
.picbox>img{object-fit:cover!important;height:100%!important;width:100%;}

/*在庫情報リスト*/
#ZAIKO .list_4 li{ float: left;margin-bottom:30px; height:270px;}
#ZAIKO .list_4 li img{ width: 100%; height:auto !important;}
#ZAIKO .list_4 .pic {width:240px; height:160px; overflow: hidden; margin-bottom:8px;}
#ZAIKO .list_4 .detail { font-size:80%; font-weight: bold;}
#ZAIKO .list_4 .name {color: #306799;line-height: 1.5em; margin-bottom:5px;}
#ZAIKO .list_4 .kakaku .price {font-weight: bold;color:#d60000; font-size:170%;}

#PLAY .list_4 li{ float: left; margin-right:30px; width:240px; margin-bottom: 15px; min-height: 335px;}
#PLAY .list_4 li:nth-child(4n){ margin-right: 0;}


#ajax-load-more .alm-btn-wrap .done{display:none}


/*PCのみのセレクタ*/
#sp_nav,.sp_foot_nav {display:none;}
.pc_hidden{display:none;}
.sp_hidden{display:block;}
.sp_hidden.inline{display:inline;} 

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
●sp・タブレット　画面の横幅が768pxまで
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:768px){
/*共通レイアウト*/
#contents{margin:0px auto;padding-top:0}
.wrap{width:90%; margin: 0 auto;}
h1.PageName{ padding:20px; margin-bottom:30px; font-size:140%; font-weight: bold;}
h2.PageName{ padding:20px; margin-bottom:30px; font-size:140%; font-weight: bold;}
h3.Title{ padding-bottom:10px; margin:30px auto 15px; font-size:150%;}
.entry{text-align:left; margin-bottom: 30px; font-size: 100%;}
	
/*リスト2列*/
.list_2 li{ float:none;width:100%;}
.list_2 li:nth-child(2n) { margin-right: 0;}
	
/*リスト3列*/
.list_3 li{ float:none;width:100%;}
.list_4 li{ float: left; margin-right:4%;width:48%;}
.list_4 li:nth-child(2n) { margin-right: 0;}
.picbox{height:150px;display:block}


/*SPのみのセレクタ*/
.sp_foot_nav {display: block; position: relative;}
.sp_foot_nav_01{position: fixed;left: 0;bottom:0;display: block;width: 70px; border: 1px solid #CCC; z-index: 10000;}
.sp_foot_nav_02{position: fixed;right: 0;bottom:0;display: block;width: 70px;border: 1px solid #CCC; z-index: 10000;}
.sp_hidden,.sp_hidden.inline{display:none;} 
.pc_hidden{display:block;}	
}