@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;
}
.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;
}

.top2{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
/*　パンくずリスト　*/
.kuzu{
     margin-bottom: 10px;
     margin-top: 10px;
     margin-left: 20px;
     margin-right: 20px
}
.kuzu ol{
  margin: 0;
  padding: 0;
  list-style: none
}
.kuzu li a{
     display: inline;
     padding-top: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     font-size: 14px;
     text-decoration: none
}
.kuzu ol::after{
  content: "";
  display: block;
  clear: both
}
.kuzu li{
  float: left;
  width: auto
}
.kuzu li::after{
  content: '\003e';
  margin-left: 10px;
  margin-right: 10px;
  color: 888888
;
} 
.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;
}
/* side */
.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;
     font-size: 8px;
     font-weight: 100;
}
.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;
     font-size: 60%;
}
.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;
}
.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;
}
.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"
               "top2"
               "container"
               "knee"
               "footer";
  grid-template-columns: 20px 7fr 10px 3fr 20px;
  grid-template-rows: auto auto 40px auto 30px auto;
}
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
}
.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%;
}
}
/* ########### 1000px以上 ########### */
@media (min-width: 1040px)　{
  /*　幅を固定　*/
.header, .top2, .container, .knee, footer,
{width: 1000px;
margin-left: auto;
maegin-right: auto} 
}