@charset "UTF-8";
/*　PC用(基本設定) */
{
  margin: 0;
  padding: 0;
  border: none;
}
/*　グリッド　*/
body{
  display: flex-column;
  font-family: Arial, Verdana, sans-serif;
  font-size: 90%;
  background-color: #a2ffa2
}
p{
  margin-top: 0px;
  margin-right: 5px;
  margin-left: 5px;
}
h1{
     font-size: 125%;
     font-weight: 400;
     margin-top: 15px;
     margin-right: 5px;
     margin-bottom: 15px;
     margin-left: 5px;
     font-family: "AR PＰＯＰ４B";
     border-left-width: 7px;
     border-left-color: #2bd559;
     border-bottom-width: 3px;
     border-bottom-style: dashed;
     border-bottom-color: #2bd559;
     border-left-style: solid;
}
h2{
  font-size: 100%;
  font-weight: 100;
  padding-top: 3px;
  padding-right: 0px;
  padding-bottom: 3px;
  padding-left: 0px;
  margin-left: 5px;
}
a:hover img{
  opacity:0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha( opacity=50 )";
  background: #fff;
}
#menu ul{
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     list-style-type: none;
     list-style-position: outside;
     font-family: HG丸ｺﾞｼｯｸM-PRO;
}
#menu li{
  display: inline;
  padding: 0;
  margin: 0;
}
#menu li a{
     display: block;
     border-width: 1px;
     border-style: solid;
     border-color: #2bd559;
     background-color: white;
     padding-top: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     text-decoration: none;
     color: black;
     width: auto;
     margin-top: 5px;
     margin-right: 5px;
     margin-bottom: 5px;
     margin-left: 5px;
     text-align: left;
     font-size: 80%;
}
#menu li a:hover{
  border : 1px solid #2bd559;
  background-color : #a2ffa2;
}
#header{
  border-bottom-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  background-color: rgba(255, 255, 255, 0.4);
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.head-logo{
  float: left;
  width: 44.408%;
  margin-right: 3.66%;
}
.head-dial{
  float: left;
  width: 29.355%;
  margin-right: 2.577%;
}
.head-contact{
  float: left;
  width: 20%;
}
.head-ad{
  font-size: 85%;
}
.logo-smp{
  float: none;
}
.gnavi{
  clear: both;
}
#headerNav ul{
  list-style: none;
  overflow: hidden;
}
#headerNav li{
  float:left;
  width: 20%;
}
#headerNav-sp{
  display: none;
}
#top2{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
#css-slider {
	width: 100%;
	height: 130px;
	overflow: hidden;
}

.slide-item {
	width: 130px;
	height: 130px;
	float: left;
	position: relative;
}


.slider-wrapper {
	width: 600%;
	position: relative;
	left: 0;
	will-change: transform;
	animation: slider 20s infinite;
}

@keyframes slider {
  0% { transform: translateX(0); }
  16.6% { transform: translateX(-130px);}
  33.3% { transform: translateX(-260px); }
  50% { transform: translateX(-390px);}
  66.6% { transform: translateX(-520px); }
  83.3% { transform: translateX(-650px);}
  100% { transform: translateX(0); }
}
#container{
     overflow: hidden;
     background-color: rgba(255, 255, 255, 0.4);
     border-top-left-radius: 10px 10px;
     border-top-right-radius: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
     padding-top: 5px;
     padding-left: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
}
#main{
     float: left;
     width: 70%;
     background-color: white;
     padding-top: 5px;
     padding-left: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
     overflow: auto;
     border-top-left-radius: 10px 10px;
     border-top-right-radius: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
}
/* 商品棚 */
.itemlist{
     overflow: hidden;
     clear: both;
     list-style-type: none;
     table-layout: fixed;
}
.itemlist ul {
     display: flex;
}
.itemlist li {
     display: inline-block;
     vertical-align: top;
     width: 22%;
     margin: 0 3% 3% 0;
}
.itemlist li a{
     displey: block;
     text-decoration: none;
}
/* 人気商品の棚 */
.ninki{
     overflow: hidden;
     clear: both;
     list-style-type: none;
     table-layout: auto;
}
.ninki ul{
     display: flex;
}
.ninki li {
     display: inline-block;
     vertical-align: top;
     width: 80%;
     margin:0 4% 0%;
}
.ninki li a{
     displey: block;
     text-decoration: none;
}
#sub{
     float: right;
     width: 26%;
     padding-top: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     border-top-left-radius: 10px 10px;
     border-top-right-radius: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
     background-color: white;
}
/* subのBOX管理 */
.boxA:after {content: "";
                 display: block;
                 clear: both}
.box1{
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     border-top-left-radius: 10px 10px;
     border-top-right-radius: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
     background-color: white;
}
.box2{
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     border-top-left-radius: 10px 10px;
     border-top-right-radius: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
     background-color: white;
}
.box3{
     display: none;
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     border-top-left-radius: 10px 10px;
     border-top-right-radius: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
     background-color: white;
}
.box4{
     display: none;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     border-top-left-radius: 10px 10px;
     border-top-right-radius: 10px 10px;
     border-bottom-right-radius: 10px 10px;
     border-bottom-left-radius: 10px 10px;
     background-color: white;
}
#knee{
  padding-left: 10px;
  padding-right: 10px;
}
#footer{
  padding-top: 10px;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  background-color: rgba(255, 255, 255, 0.4);
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}
#footerNav{
  display: none;
}
.copyright{
  text-align: center;
  font-size: 80%;
  color: #333;
}
.copyright a{
  text-decoration: none;
  color: #333;
}
/* ########### 600～999px ########### */
@media (min-width: 600px) and (max-width: 999px){
  /*　グリッド　*/
body{
  display: grid;
  font-family: Arial, Verdana, sans-serif;
  font-size: 90%;
  background-color: #a2ffa2;
  grid-template-areas:
 　　　　　　 "header header"
               "top2 top2"
               "main sub"
               "knee knee"
               "footer footer";
  grid-template-columns: 20px 7fr 30px 3fr 20px;
}
#wrapper{
  width: 100%;
}
img{
  max-width: 100%;
  height: auto;
  width /***/:auto;
}
.head-ad{
  font-size: 80%;
  margin: 0;
}
.itemlist li{
  width: 33.33%
;
}
}
/* 以下、スマートフォン（ディスプレイ幅599px以下）より小さい画面に使われるCSS */

@media screen and (max-width: 599px) {
  /* グリッド */
body{
  display: block;
  grid-template-areas:
               "header"
               "top2"
               "main"
               "sub"
               "knee"
               "footer";
grid-template-columns: 1fr
}
#wrapper{
  width: 100%;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}
#header{
  width: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0px;
}
#top2{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  text-align: inherit;
  width: 100%;
}
#container{
  clear: both;
  overflow: auto;
}
#main{
  float: auto;
  width: 100%;
  padding: 0px;
}
/* スマホサイズの商品棚 */
.itemlist ul {
  display: flex;
  flex-wrap: wrap
}
.itemlist li {
	
     display: inline-block;
	
     vertical-align: top;
	
     width: 45%;
	
}
#sub{
  float: auto;
  width: 100%;
  padding: 0px;
}
/* subはBOX管理 */
.boxA:after {content: "";
                 display: block;
                 clear: both}
.box1{	
     display: none;
}
.box2{
     display: none;
}
.box3{
     display: inline;
float: auto;
}
.box4{
     display: inline;
}
#knee{
  padding-left: 10px;
  padding-right: 10px;
}
#footer{
  padding-top: 10px;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  background-color: rgba(255, 255, 255, 0.4);
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}
#headerNav{
  display: none;
}
#headerNav-sp{
  display: block;
}
.head-logo{
  display: none;
}
.logo-smp{
  float: left;
  width: 100%;
}
.footerNavLink{
  clear: both;
  float: left;
  width: 49%;
  margin-right: 2%;
}
.dial-smp{
  float: left;
  width: 49%;
}
#footerNav{
  display: block;
}
#footerNav ul{
  list-style: none;
  overflow: hidden;
}
#footerNav li{
  float:left;
  width: 20%;
}
}