@charset "UTF-8";
*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  /*-webkit-user-select: none;*/
  -webkit-font-smoothing: antialiased;
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}
a {display: block; cursor: pointer; text-decoration: none;}
img{width: inherit; vertical-align: middle;}
html{font-size: 16px;}
input, textarea, select,button{
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body{
  font-family: YuMincho, 'YuMincho', 'Yu Mincho', serif;
  line-height: 1.4rem;
  letter-spacing: .1em;
  color: #2f2f38;
  background: #fff;
}

/*-----------------------------------------------------
 共通
-----------------------------------------------------*/
.inner_section{
  width: 100%;
  max-width: 1200px;
  margin: -32px auto 64px auto;
  padding-top: 32px;
  text-align: center;
}
.inner_section h2{
  min-width: 640px;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-align: center;
  border-bottom: 1px solid #2f2f38;
  padding-bottom: 16px;
  margin: 48px 0;
  display: inline-block;
}

/*-----------------------------------------------------
header, nav, footer
-----------------------------------------------------*/
header{
  width: 100%;
  border-top: 8px solid #456a25;
  background: #fff;
}
.inner_header{
  width: 100%;
  height: 88px;
  max-width: 1200px;
  padding: 0 16px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
}
.menu{ display: none; }

.header_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}
.header_btn > div,
.header_btn > a{
  margin-left: 16px;
}
.header_btn > div p:first-child{
  font-size: 12px;
  font-weight: bold;
}
.header_btn > div p:nth-child(2){
  font-size: 20px;
  font-weight: bold;
}
.icon_tel{
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: #2f2f38;
}
.btn_header_shop{
  width: 240px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  border: 1px solid #e45355;
  background: #e45355;
}
.btn_header_shop:hover{
  opacity: .8;
}
.btn_header_cart{
  width: 160px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #e45355;
  border: 1px solid #e45355;
  background: #fff;
}
.btn_header_cart:hover{
  opacity: .8;
}
.icon_header_cart{
  width: 24px;
  height: 24px;
  vertical-align: middle;
  fill: #e45355;
}
nav{
  width: 100%;
  text-align: center;
  border-top: 1px solid #e8e9d6;
  border-bottom: 1px solid #e8e9d6;
  background: #fff;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.inner_nav{
  display: inline-block;
  position: relative;
}
nav ul{
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}
nav ul li{
  font-size: 14px;
  color: #aaa;
  display: inline-block;
}
nav ul li.selected,
nav ul li:hover{
  color: #456a25;
}
nav ul li a{
  line-height: 32px;
  padding: 0 16px;
}
nav #selectedBar{
  height: 2px;
  background: #456a25;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate3d(0,0,0);
  -webkit-transform: rotate3d(0,0,0);
  -moz-transform: rotate3d(0,0,0);
}
footer{
  width: 100%;
  font-size: 12px;
  font-weight: normal;
  color: #fff;
  background: #4a5a55;
}
.footer_top{
  width: 100%;
  max-width: 1200px;
  padding: 32px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: flex-start;
}
.footer_top > div{
  margin: 0 16px;
}
.footer_top .ttl{
  font-size: 14px;
  font-weight: bold;
}
.footer_top p{
  margin: 16px 0;
}
.footer_bottom{
  font-size: 10px;
  text-align: center;
  background: #354742;
  padding: 8px;
}

/*-----------------------------------------------------
 メイントップ
-----------------------------------------------------*/
.top_pic{
  width: 100%;
  background: url('./../img/feature/main_bg.png');
  padding: 16px;
}
.main_pic_pc{
  width: 100%;
  max-width: 1168px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.main_pic_sp{
  display: none;
}
.object_fit{
  object-fit: cover;
  font-family: 'object-fit: cover;';
}
/*-----------------------------------------------------
 特集商品
-----------------------------------------------------*/
.item_frame{
  width: 100%;
  padding: 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: flex-start;
}
.item_frame > div{
  margin: 0 16px;
}
.feature:nth-child(even) .item_pic{ order: 2; }
.feature:nth-child(even) .item_intro{ order: 1; }
.feature:nth-child(odd) .item_pic{ order: 1; }
.feature:nth-child(odd) .item_intro{ order: 2; }
.item_pic img{
  width: 480px;
  height: 368px;
}
.item_intro{
  text-align: left;
}
.item_intro > div{
  width: 100%;
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
  align-items:  flex-start;
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  -webkit-align-items: flex-start;
}
.item_intro > div img{
  width: 80px;
  height: auto;
  margin-right: 8px;
}
.item_intro h3{
  font-size: 28px;
  line-height: 32px;
  margin-bottom: 32px;
  font-weight: normal;
  letter-spacing: 0.1em;
}
.item_intro h4{
  font-size: 24px;
  line-height: 24px;
  color: #e45355;
  margin-left: 8px;
}
.item_intro > p{
  font-size: 14px;
  margin: 16px;
}
.item_intro button{
  width: 100%;
  max-width: 240px;
  height: 56px;
  line-height: 56px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  border-bottom: 2px solid #af2f31;
  background: #e45355;
  margin: 16px 16px 32px 16px;
  display: block;
  position: relative;
  top: 0;
  cursor: pointer;
}
.item_intro button:hover{
  border-bottom: 0;
  background: #dc4144;
  top: 2px;
}
.icon_feature_cart{
  width: 24px;
  height: 24px;
  vertical-align: middle;
  fill: #fff;
}
/*-----------------------------------------------------
 こだわり
-----------------------------------------------------*/
.inner_policy{
  width: 100%;
  max-width: 1168px;
  min-height: 460px;
  color: #fff;
  background: url('./../img/common/img_policy.png') no-repeat;
  background-position: top left;
  background-size: cover;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: flex-start;
  -webkit-flex-direction: column;
}
.inner_policy p{
  font-size: 12px;
  line-height: 24px;
  text-align: left;
  margin-left: 280px;
  padding: 8px;
}
.inner_policy .ttl{
  font-size: 28px;
  line-height: 32px;
  font-weight: normal;
  letter-spacing: 0.1em;
  padding-bottom: 32px;
}
/*-----------------------------------------------------
オススメ商品
-----------------------------------------------------*/
.recommend ul{
  width: 100%;
  padding: 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-flex-wrap: wrap;
}
.recommend li{
  width: 25%;
  margin-bottom: 64px;
}
.recommend li img{
  width: 100%;
  max-width: 200px;
  height: 200px;
  background: #efefef;
}
.recommend li h3{
  width: 100%;
  max-width: 200px;
  height: 32px;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.1em;
  margin: 16px auto;
}
.recommend li h4{
  height: 24px;
  line-height: 24px;
  color: #e45355;
}
.recommend li button{
  width: 100%;
  max-width: 160px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid #af2f31;
  background: #e45355;
  margin: 16px auto;
  display: block;
  position: relative;
  top: 0;
  cursor: pointer;
}
.recommend li button:hover{
  border-bottom: 0;
  background: #dc4144;
  top: 1px;
}
.icon_recommend_cart{
  width: 18px;
  height: 18px;
  vertical-align: middle;
  fill: #fff;
}
/*-----------------------------------------------------
ショップ紹介
-----------------------------------------------------*/
.intro .txt{
  font-size: 14px;
  line-height: 28px;
  margin: 32px;
}
.toshop p{
  font-size: 20px;
  padding: 8px 0;
}
.toshop p:first-child{
  color: #e45355;
}
.toshop_banner{
  margin: 16px 0;
}
.toshop_banner a{
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
.toshop_banner a:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 4px;
  left: 4px;
}
.toshop_banner a img{
  position: relative;
  top: 0;
  left: 0;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
}
.toshop_banner a:hover img,
.toshop_banner a:active img{
  top: 4px;
  left: 4px;
}

/*-----------------------------------------------------
tb
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
  .item_frame{
    padding: 0px 16px;
    display: block;
  }
  .item_intro {
    width: 80%;
    margin: 16px auto 0 auto !important;
    text-align: left;
    border: 1px solid #ddd;
    padding: 16px;
  }
  .item_intro button{
    margin: 16px auto;
  }
  .inner_policy{
    background-position: center right;
  }
  .inner_policy p{
    margin: 0 auto;
  }
  .recommend ul{
    padding: 0 32px;
  }
  .recommend li{
    width: 33%;
  }
}
/*-----------------------------------------------------
sp
-----------------------------------------------------*/
@media screen and (max-width: 414px) {
  header{
    height: 56px;
    border-top: none;
    border-bottom: 1px solid #ded6cf;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .inner_header{
    height: 56px;
    padding: 0;
  }
  .logo { margin-right: auto; }
  .logo img {
    width: auto;
    height: 35px;
  }
  .header_btn > div { display: none; }
  .btn_header_shop{ display: none; }
  .btn_header_cart{
    width: 56px;
    height: 56px;
    border: none;
    background: transparent;
    margin: 0;
  }
  .btn_header_cart span{ display: none;}
  .menu{
    width: 56px;
    height: 56px;
    display: block;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 4;
  }
  .menu p,
  .menu p:after{
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
  }
  .menu p,
  .menu p:before,
  .menu p:after{
    width: 24px;
    height: 2px;
    background: #456a25;
    position: absolute;
    content: "";
    display: block;
  }
  .menu p {
    top: 18px;
    left: 16px;
  }
  .menu p:before {
    top: 8px;
    left: 0;
  }
  .menu p:after {
    top: 16px;
    left: 0;
  }
  .menu.active p {
    top: 27px;
    right: 8px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
  }
  .menu.active p:before {
    top: 8px;
    right: 0;
    opacity: 0;
  }
  .menu.active p:after {
    top: 0px;
    right: 0;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
  }
  nav{
    border: none;
  }
  .inner_nav{
    width: 60%;
    height: calc(100% - 56px);
    height: -webkit-calc(100% - 56px);
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 56px;
    left: 0px;
    display: block;
    opacity: 0;
    transform: translate3d(-100%,0,0);
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
  }
  nav ul{
    display: block;
  }
  nav ul li{
    color: inherit;
    text-align: left;
    border-bottom: 1px solid #ded6cf;
    display: block;
  }

  nav ul li:hover{
    color: inherit;
  }
  nav ul li a{
    line-height: 48px;
  }
  nav #selectedBar{ display: none;}
  article{
    margin-top: 56px !important;
  }
  .inner_section{
    margin: -24px 0 0 0;
    padding-top: 56px;
  }
  .inner_section h2{
    width: calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
    min-width: calc(100% - 32px);
    min-width: -webkit-calc(100% - 32px);
    line-height: 28px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding-bottom: 8px;
    margin: 16px 0;
  }
  .top_pic{ padding: 0; }
  .main_pic_pc{ display: none; }
  .main_pic_sp{ display: block; }
  .item_pic img{
    width: 100%;
    height: auto;
  }
  .item_frame > div{ margin: 0; }
  .item_intro{
    width: 100%;
    border: none;
    padding: 0;
  }
  .item_intro > div img{
    width: 40px;
  }
  .item_intro h3{
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 8px;
  }
  .item_intro h4{
    margin-left: 4px;
  }
  .item_intro > p{
    margin: 16px 8px;
  }
  .inner_policy{
    padding: 16px 8px;
  }
  .inner_policy .ttl {
    font-size: 16px;
    line-height: 18px;
    padding-bottom: 8px;
  }
  .inner_policy p br{
    display: none;
  }
  .recommend ul{
    padding: 0 8px;
  }
  .recommend li{
    width: 50%;
    padding: 8px;
    margin-bottom: 32px;
  }
  .recommend li img{
    height: 160px;
  }
  .intro > div > img{
    padding: 0 16px;
  }
  .recommend li h3{
    height: 48px;
  }
  .intro .txt{
    text-align: left;
    margin: 16px;
  }
  .toshop{
    margin-bottom: 32px;
  }
  .toshop_banner {
    margin: 16px;
  }
  .toshop_banner a:before{
    display: none;
  }
  .toshop p{
    font-size: 12px;
    padding: 0 16px;
  }
  .toshop p:first-child{
    font-size: 18px;
  }
  .footer_top{ display: none;}
  .overlay{
    width: 100%;
    height: calc(100% - 56px);
    height: -webkit-calc(100% - 56px);
    position: fixed;
    top: 56px;
    left: 0;
    cursor: pointer;
  }
}