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

/* =========================================== =================================
   TOP
   ========================================================================== */

/*ローディング*/
#loading{ position: absolute;top: 40%; text-align: center;width: 100%;}
#loader-bg {position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;background: #FFF; z-index: 10000;}
 body{ background-color: #FFF;}
 #main-contents{text-align: center; margin-top: 20%;}


#TOP #main { width: 100%;background:#163106;}
#TOP #main ul { width: 100%;background:#163106;}
#TOP #main ul li img{ width: 100%; /*height: auto;*/}
#TOP #main ul li img.sp{ display: none;}

#TOP h2{ text-align: center; border-bottom:4px solid #163106; margin:80px auto 40px; padding-bottom: 10px; font-weight: bold; letter-spacing: 0.1em; font-size: 100%;}	

#TOP .box_01{ background: url(../sl_images/common/bg.jpg) repeat; text-align:center; height:auto;}	
#TOP .box_01 .wrap{ position: relative; padding:38px 0;font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#TOP .box_01 .wrap .item_01{ position: absolute; bottom:20px;left:-120px;}
#TOP .box_01 .wrap div {width:760px; margin: 0 auto;}
#TOP .box_01 .wrap .txt_01{ color: #FFF; font-weight:bold; font-size:150%;}
#TOP .box_01 .wrap .txt_01 span.txt_02{font-size:200%; padding-right:30px;}
#TOP .box_01 .wrap .txt_01 #count{ color: #ffea00; font-weight:bold; font-size:280%;margin: 0 8px; letter-spacing:-0.05em;}
#TOP .box_01 .wrap .txt_03{ color: #FFF; font-size:80%; font-weight: normal;margin-top:5px; float: right;}


#TOP .box_02{ margin: 10px auto 40px; clear: both;}	
#TOP .box_02 ul li{ float: left; width: 33.3333%;}
#TOP .box_02 ul li img{ width: 100%;}

#TOP .box_03 { margin-bottom:40px;}
#TOP .box_03 .list_3 li .pic,#TOP .box_03 .list_4 li .pic{position: relative;}
#TOP .box_03 .list_3 li .pic span{position: absolute; bottom: 10px; left:-10px; background: #ffea00; padding:5px 15px; font-weight: bold; font-size:90%;}
#TOP .box_03 .list_3 li a:hover .pic span{ color: #000;}
#TOP .box_03 .list_3 li .title{margin:10px auto; height:40px; overflow: hidden; line-height: 1.5em;}
#TOP .box_03 .list_4 li .pic span{position: absolute; bottom: 10px; left:-10px; background: #ffea00; padding: 0 15px; font-weight: bold; font-size: 80%;}
#TOP .box_03 .list_4 li a:hover .pic span{ color: #000;}
#TOP .box_03 .list_4 li .waku{height:90px; overflow: hidden;}
#TOP .box_03 .list_4 li .title{margin:10px auto 0;line-height: 1.4em; font-size: 90%;}
#TOP .box_03 .list_4 li .date{ font-weight: bold; font-size:80%;}

#TOP .box_04 { background-color: #163604; margin-bottom: 30px;}
#TOP .box_04 li{ float: left; width: 50%;}
#TOP .about .box_04 li{ position: relative;}
#TOP .about .box_04 li span{ position: absolute;width:33px; height: 66px; top:34%;right: 0;}
#TOP .box_04 li.intro{width:40%;height: 270px; color: #FFF;padding:0 5%;}
#TOP .box_04 li.intro h4{ font-size:240%; font-weight: bold; text-align: center;padding:50px 0 25px;}
#TOP .box_04 li.intro h5{ font-size:120%; text-align: center; margin-bottom: 25px; line-height: 1.5em;}
#TOP .grid_6 li.intro{width:40%;padding:0 5%;}
#TOP .grid_6 li.intro h4{ font-size:180%; padding:50px 0 25px;}
#TOP .grid_6 li.intro h5{ margin-bottom:20px; font-size:95%;}
#TOP .box_04 .btn_02 a:hover{color:#000;background: url( ../sl_images/common/arrow_01.png) no-repeat right #ffea00;}

#TOP #info {background-color:#f5f4f0; padding: 60px 0 0; margin:40px auto 0; position: relative;}
#TOP #info .wrap { position: absolute; top:0; left: 0;width:100%;}
#TOP #info .wrap .center_box{ width: 1050px; margin: 0 auto;}
#TOP #info .wrap .waku{ width:43%; padding:3%; background: #FFF; float: left; font-size: 90%;border:4px solid #163106;}
#TOP #info .wrap .no-border{ border-right: none;}
#TOP #info .wrap .waku h3{ text-align: center; font-weight: bold; margin:0 auto 20px;}
#TOP #info .wrap ul { margin-bottom: 40px; height:240px; overflow: hidden;}
#TOP #info .wrap ul li{ border-bottom: 1px dotted #999; margin-bottom: 6px; padding-bottom: 3px; position: relative; }
#TOP #info .wrap ul li span{ color: #204e02; font-size:90%; font-weight: bold; position: absolute;top: 0; left: 0; }
#TOP #info .wrap ul li p{width:300px; line-height: 1.6em; margin-left:100px;}
#TOP #info .pic{ padding-top:140px;}

#TOP .box_05{ margin:100px auto;}
#TOP .box_05 .list_01 li{ float: left; margin-right:30px;width:320px; margin-bottom: 15px; }
#TOP .box_05 .list_01 li:nth-child(3),
#TOP .box_05 .list_01 li:nth-child(6) { margin-right: 0;}

#TOP .shop_box .list_01 li a{display:block;border:2px solid #240;}
#TOP .shop_box .list_01 li{background:#240}
#TOP .shop_box .list_01 .shoplabel{display:block;text-align:center;color:#FFF;font-size:26px;line-height:26px}
#TOP .shop_box .list_01 .shoplabel img{width:50%;padding:25px 0;vertical-align:middle;margin-right:0.5em;margin-top:-5px}
#TOP .shop_box .list_01 .goshop{background:#FFF;text-align:center;font-size:18px;padding:15px 0;position:relative}

#TOP .bg_01 { padding:30px 0;}
#TOP .bg_01 h3.Title{ margin:0 auto 35px; }

#STOCK {padding-bottom:60px;}
#STOCK ul li {width:240px; float:left; background: #FFF; height:290px;}
#STOCK ul li .waku {padding: 10px 15px;}
#STOCK ul li .pic {width:240px; height:150px; overflow: hidden;}
#STOCK ul li .pic img {width:100%;}
#STOCK ul li .detail { font-size:80%; font-weight: bold;}
#STOCK ul li .name {color: #306799;line-height: 1.3em; margin-bottom: 5px; font-size: 95%;}
#STOCK ul li .name span { margin-right:8px;}
#STOCK ul li .kakaku { font-size:80%;}
#STOCK ul li .kakaku span {font-weight: bold;color:#d60000; font-size:220%; padding:0 4px;}

/*===============================================
●sp・タブレット　画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	
/*ローディング*/
#loading{ position: absolute;top:20%;}
#loading img{ width:90%; margin: 0 auto;}
	
#TOP #main ul li img.pc{display: none;}
#TOP #main ul li img.sp{display: block;}

#TOP h2{  margin:30px auto 10px; font-size: 120%;}
	
#TOP .box_01{background-size:80px 80px;}	
#TOP .box_01 .wrap {padding:15px 0 8px;}
#TOP .box_01 .wrap .item_01{ display: none;}
#TOP .box_01 .wrap div {width:100%;}
#TOP .box_01 .wrap .txt_01{font-size:100%;}
#TOP .box_01 .wrap .txt_01 span.txt_02{font-size:120%; padding-right:10px; }
#TOP .box_01 .wrap .txt_01 #count{font-size:200%;}
#TOP .box_01 .wrap .txt_03{ text-align: center; float: none;}
#TOP .box_01 .wrap .txt_03{ font-size:80%;margin-top:3px;}
		
#TOP .box_02{ margin:5px auto 0;}	

#TOP .about .box_04 li{width: 100%; margin-bottom:0}
#TOP .box_04 br {display: none;}
#TOP .box_04 li.intro{width:90%;height:auto;overflow: hidden;}
#TOP .box_04 li.intro h4{ font-size:200%;padding:30px 0 15px;}
#TOP .box_04 li.intro h5{ font-size:100%;margin-bottom:15px;}
#TOP .grid_6 {width:100%; float: none; margin:10px auto;}
#TOP .grid_6.ex {width:100%; float: none; margin:10px auto 30px;}
#TOP .grid_6 li.intro{width:40%;padding:5%; float: left; height: auto;}
#TOP .grid_6 li.intro h4{ font-size:100%; padding:10px 0;}
#TOP .grid_6 li.intro h5{ margin-bottom:10px; font-size:80%;}
#TOP .box_04 li img{width:100%; height:100%;}
#TOP .box_04 .btn_02 a { margin:0 auto 15px;}
#TOP .grid_6 .btn_02 a{ font-size:80%; padding:5px 0; margin: 0 auto;}
#TOP .grid_6 .btn_02 { border:none;}
#TOP .about .box_04 li span{ position: absolute; background: url(../sl_images/top/arrow_02.png) no-repeat center; width:100%; height:33px; top:-2px; right:0;}
	
#TOP #info { padding:30px 0 0; margin:20px auto 0;}
#TOP #info .wrap { position: static;width:100%;}
#TOP #info .wrap .center_box{ width:96%;}
#TOP #info .wrap .waku{ width:90%; padding:4%;float:none; margin: 0 auto 30px;}
#TOP #info .wrap .no-border{ border-right:4px solid #163106;}
#TOP #info .wrap .waku h3{ margin:20px auto;}
#TOP #info .wrap ul { margin-bottom: 10px; height:auto;}
#TOP #info .pic{ display: none;}
#TOP .box_05{ margin:20px auto;}
/*#TOP .box_05 .list_01 li{ float:none; margin:0 0 10px 0;width:100%;}*/
#TOP .box_05 .list_01 li{ float: left; margin-right:2%;width:49%;}
#TOP .box_05 .list_01 li img{width:100%;}
#TOP .box_05 .list_01 li:nth-child(3),
#TOP .box_05 .list_01 li:nth-child(6) { margin-right:2%;}
#TOP .box_05 .list_01 li:nth-child(2n) { margin-right: 0;}

#TOP .shop_box .list_01 li a{display:block;border:2px solid #240;}
#TOP .shop_box .list_01 li{background:#240}
#TOP .shop_box .list_01 .shoplabel{font-size:100%;}
#TOP .shop_box .list_01 .shoplabel img{padding:15px 0;margin-top:-4px}
#TOP .shop_box .list_01 .goshop{padding:5px 0;font-size:80%;text-indent:-0.5em}


#TOP .play_box li img{
	width: 100%;
}
#STOCK { padding-bottom:10px;}
#STOCK ul {width:310px; margin:20px auto 0;}	
#STOCK ul li .detail { line-height: 1.3em;}
#STOCK ul li { width:150px; margin: 0 5px 20px 0; height:210px;}
#STOCK ul li .waku {padding:5px 10px;}
#STOCK ul li li:nth-child(2n) { margin-right: 0;}
#STOCK ul li .pic {width:150px; height:90px;}
#STOCK ul li .name {line-height: 1.3em; height:auto;font-size: 80%; height: auto;}
#STOCK ul li .kakaku  {font-size:80%;}
#STOCK ul li .kakaku span {font-size:120%;}

}