.section__block--top-page {
  max-width: 1100px;
}

/* width, height 指定の際に、padding や border に依存しない（IE8以上）  */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/* スライダー */
.slider {
  margin-top: 0;
}
.slider .bx-wrapper {
  margin-bottom: 0;
}
.slider .bx-wrapper .bx-caption {
  text-align: center;
  top: 0;
  bottom: auto;
}

#slider img {
  display: block;
  margin: 0 auto;
}

/* スライダー下の動くリンク */
.banner__section {
  margin-top: 2px;
}

.news__lists {
  list-style-type: none;
  margin: 0 0 2em;
}

.news__list {
  margin-bottom: .5em;
}

.news__date {
  margin-right: 1em;
}

/* トップコピー */
.top-copy{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/bg01.gif?cmsp_timestamp=20190729112259);
  padding:30px 0;
}
.top-copy .container{
    position:relative;
}
.top-copy .container h2{
  width:136px;
  margin: 0 0 0 20px;
}
.top-copy .container h2 img{
  width:100%;
  height:auto;
}
.top-copy .copy-in{
  background:#fff;
  margin-top: -35px;
  padding:3.5em 2em 2em 2em;
  line-height: 2em;
  font-size: 110%;
}
.top-copy .chara{
  width:160px;
  margin: 0 auto;
  
  position:absolute;
  top:60px;
  right:20px;
  margin:0;
}
.top-copy .chara img{
  width:100%;
  height:auto;
}
.top-copy .copy-in .btn-detail{
  margin-top:20px;
  text-align:center;
}
@media only screen and (min-width: 768px){
  .top-copy{
    padding:110px 0 100px 0;
  }
  .top-copy .container{
    width:100%;
    position:relative;
  }
  .top-copy .container h2{
    position:absolute;
    top:-50px;
    left:30px;
    width:161px;
    margin: 0 auto;
  }
  .top-copy .copy-in{
    margin:0 0 0 80px;
    padding:3em 3em 2em 7.6em;
    line-height: 2.0em;
    font-size: 120%;
  }
  .top-copy .copy-in .btn-detail{
    margin-top:25px;
    padding-right:50px;
    text-align:center;
  }
  .top-copy .chara{
    position:absolute;
    top:inherit;
    bottom:10px;
    left:20px;
    right:inherit;
    width:193px;
    margin:0;
  }
}
@media print, screen and (min-width: 900px){
  .top-copy .container{
    /*width:1100px;*/
    width: 100%;
    max-width: 1100px;
  }
  .top-copy .container h2{
    top:-50px;
    /*left:-60px;*/
    left:0;
  }
  .top-copy .copy-in{
    margin:0 0 0 80px;
    /*padding:3em 3em 3em 4.6em;*/
    padding:3em 3em 3em 8em;
  }
  .top-copy .copy-in .btn-detail{
    margin-top:30px;
    padding-right:130px;
    text-align:center;
  }
  .top-copy .chara{
    /*left:-70px;*/
    left:-15px;
  }
}

.btn-detail{
   
}
.btn-detail a{
  position:relative;
  padding: .5em 1.0em .5em 2.1em;
  color:#371804;
  background: #efefef;
}
.btn-detail a::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  margin: auto;
  content: "";
  vertical-align: middle;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border: 8px solid transparent;
  border-left: 12px solid #dfccbd;
}
.btn-detail a:hover{
  text-decoration:none;
}

/* トップカテゴリー */
.top-category{
  padding: 20px 0 60px 0;
  background:#fff;
}
.top-category h2{
  position:relative;
  margin-bottom:80px;
  font-weight:normal;
  text-align:center;
  font-size:170%;
}
.top-category h2::before{
  content: "Category";
  position: absolute;
  display:block;
  left:0;
  right:0;
  bottom: -45px;
  font-size:60%;
  color:#371804;
}
.top-category h2::after{
  content: '';
  position: absolute;
  bottom: -12px;
  display: inline-block;
  width: 80px;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #dfccbd;
}

.cate-top-list{
  /*display: grid;
  display: -ms-grid;
  gap: 20px;*/
}
.cate-top-list .item{
  margin-bottom:10px;
  padding: 0;
  border-radius: 3px;
  
  position:relative;
}

.cate-top-list .item a{
  display:block;
  height:100%;
  padding:50px 0;
  cursor:pointer;
}
.cate-top-list .item a:hover{
  opacity:.7;
}
.cate-top-list .item span{
  background: rgba(55,24,4,0.9);;
  color: #fff;
  font-size: 150%;
  padding: 6px 10px;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.cate-top-list .item.box-otsumami{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-otsumami.jpg?cmsp_timestamp=20190731103721);
  background-size:cover;
}
.cate-top-list .item.box-nuts{
    background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-nuts.jpg?cmsp_timestamp=20190731105157);
  background-size:cover;
}
.cate-top-list .item.box-fry{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-fry.jpg?cmsp_timestamp=20190731105345);
  background-size:cover;
}
.cate-top-list .item.box-ume{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-ume.jpg?cmsp_timestamp=20190731105429);
  background-size:cover;
}
.cate-top-list .item.box-fruits{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-fruits.jpg?cmsp_timestamp=20190731105515);
  background-size:cover;
}
.cate-top-list .item.box-rakkasei{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-rakkasei.jpg?cmsp_timestamp=20190731105531);
  background-size:cover;
}
.cate-top-list .item.box-kobukoro{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-kobukuro.jpg?cmsp_timestamp=20190731105545);
  background-size:cover;
}
.cate-top-list .item.box-mame{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-kome.jpg?cmsp_timestamp=20190731105623);
  background-size:cover;
}
.cate-top-list .item.box-asort{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-asort.jpg?cmsp_timestamp=20190731105645);
  background-size:cover;
}
.cate-top-list .item.box-etc{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/cate-etc.jpg?cmsp_timestamp=20190731105659);
  background-size:cover;
}

@media only screen and (min-width: 768px){
  .top-category{
    padding: 30px 0 60px 0;
  }
  .cate-top-list{
    display: grid;
    display: -ms-grid;
    gap: 20px;
  
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 220px 220px 220px 220px auto;
    
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	-ms-grid-rows: 220px 220px 220px 220px auto;
  }
  .cate-top-list .item{
    margin-bottom:0;
    padding: 0;
    border-radius: 3px;
    text-align:center;
  }
  .cate-top-list .item span{
    font-size: 120%;
  }
  .cate-top-list .item a{
    display:block;
    height:100%;
    padding:0;
  }
  .cate-top-list .item.box-otsumami{
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    /*-ms-grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-column-span: 6;*/
  }
  .cate-top-list .item.box-nuts{
    -ms-grid-column: 4;
    -ms-grid-row: 1;
    -ms-grid-column-span: 1;
  }
  .cate-top-list .item.box-fry{
    grid-column: 5 / 7;
    
    -ms-grid-column: 5;
    -ms-grid-row: 1;
    -ms-grid-column-span: 2;
  }
  .cate-top-list .item.box-ume{
    grid-column: 4 / 6;
    
    -ms-grid-column: 4;
    -ms-grid-row: 2;
    -ms-grid-column-span: 2;
  }
  .cate-top-list .item.box-fruits{
    -ms-grid-column: 6;
    -ms-grid-row: 2;
    -ms-grid-column-span: 1;
  }
  .cate-top-list .item.box-rakkasei{
    grid-column: 2 / 4;
    
    -ms-grid-column: 2;
    -ms-grid-row: 3;
    -ms-grid-column-span: 2;
  }
  .cate-top-list .item.box-kobukoro{
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 1;
  }
  .cate-top-list .item.box-mame{
    grid-column: 4 / 7;
    grid-row: 3 / 5;
    
    -ms-grid-column: 4;
    -ms-grid-row-span: 2;
    -ms-grid-row: 3;
    -ms-grid-column-span: 6;
  }
  .cate-top-list .item.box-asort{
	grid-column: 1 / 3;
    
    -ms-grid-column: 1;
    -ms-grid-row: 4;
    -ms-grid-column-span: 2;
  }
  .cate-top-list .item.box-etc{
    -ms-grid-column: 3;
    -ms-grid-row: 4;
    -ms-grid-column-span: 1;
  }
}
@media print, screen and (min-width: 900px){
  .cate-top-list .item span{
    font-size: 200%;
  }
}

/* トップお知らせ */
.top-news{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/news-bg.gif?cmsp_timestamp=20190730130806);
  padding: 0 0 60px 0;
}
.top-news .section__block{
  margin: 0 auto;
}
.top-news h2{
  background:#331604;
  color:#fff;
  text-align:center;
  width:100%;
  height:100px;
  margin:0;
  padding:24px 0 60px 0;
  font-weight:normal;
  position:relative;
}
.top-news h2::after{
  content: "News";
  position: absolute;
  display:block;
  left:0;
  right:0;
  bottom: 20px;
  font-size:70%;
}
.top-news .col-lg-12{
  background:#fff;
  margin: 20px auto 0 auto;
  padding: 3em 3em 3em 3em;
  line-height: 2.0em;
  font-size: 116%;
  width: 90%;
}
.top-news .col-lg-12 a{
  text-decoration:underline;
}
@media only screen and (min-width: 768px){
  
}
@media print, screen and (min-width: 900px){
  .top-news{
    padding: 60px 0 70px 0;
  }
  .top-news .col-lg-12{
    background:#fff;
    margin: -100px 0 0 80px;
    padding: 3em 3.6em 3em 7.4em;
    line-height: 2.0em;
    font-size: 120%;
    width: 1020px;
  }
  .top-news h2{
    background:#331604;
    color:#fff;
    text-align:center;
    width:160px;
    height:100px;
    padding:45px 0 105px 0;
    position:relative;
  }
  .top-news h2::after{
    bottom: 35px;
  }
  
}

/* トップおすすめ */
.top-osusume{
  padding:0 0 20px 0;
  background:#fff;
}
.top-osusume h2{
  text-align:center;
  font-weight:normal;
  margin:0 auto;
  padding:50px 0 40px 0;
}
.top-osusume h2{
  width:100%;
  height:auto;
}
.img-l, .img-r{
   margin-bottom: 40px;
}
.top-osusume h3{
  font-size: 140%; 
}
.top-osusume h3 span{
  background: linear-gradient(transparent 60%, #cfdebd 60%);
}
.img-l p, .img-r p{
  font-size: 120%;
  line-height: 1.7em;
  margin-bottom: 20px;
}
.top-osusume .btn-detail a::before{
  border-left: 12px solid #cfdebd;
}


@media only screen and (min-width: 768px){
  .top-osusume{
    padding:0 0 30px 0;
  }
  .top-osusume .container{
    width:100%;
    margin:0 auto;
  }
  .img-l, .img-r{
    overflow:hidden; 
    margin-bottom:40px;
  }
  .img-l img{
  	float:left;
    margin-right:40px;
    margin-bottom: 80px;
    width:50%;
  }
  .img-r img{
  	float:right;
    margin-left:40px;
    margin-bottom: 80px;
    width:50%;
  }
}
@media print, screen and (min-width: 900px){
  .top-osusume .container{
    width:980px;
    margin:0 auto;
  }
  .img-l img{
  	float:left;
    margin-right:40px;
    margin-bottom: auto;
    width:auto;
  }
  .img-r img{
  	float:right;
    margin-left:40px;
    margin-bottom: auto;
    width:auto;
  }
}

/* まるまんからのご案内 */
.top-info{
  background:url(https://img21.shop-pro.jp/PA01434/433/etc/top-info-bg.jpg?cmsp_timestamp=20190729115500);
  background-size:cover;
  padding:30px 0;
  position:relative;
}
.top-info::before{
  background: url(https://img21.shop-pro.jp/PA01434/433/etc/bg02.png?cmsp_timestamp=20190729115808);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
.top-info h2{
  color:#fff;
  text-align:center;
  margin-bottom:66px;
  font-weight:normal;
  position:relative;
}
.top-info h2::after{
  content: '';
  position: absolute;
  bottom: -24px;
  display: inline-block;
  width: 80px;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #fff;
}
.top-info h3{
  text-align:center;
  font-size:146%;
}
.info-in{
  background:#fff;
  width:90%;
  margin: -60px auto 30px auto;
  padding: 15px 30px 10px 30px;
  position: relative;
}
.top-info .info-r p.imp{
  position:absolute;
  top:-65px;
  right:-25px;
  color:#fff;
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ec4351;
  text-align: center;
  padding: 18px 0px;
  line-height: 1.45em;
  font-size: 100%;
  font-weight: bold;
}
.top-info .info-r h3 span{
  background: linear-gradient(transparent 60%, #debdcf 60%);
}
.top-info .info-l h3 span{
  background: linear-gradient(transparent 60%, #bdcfde 60%);
}
.top-info .info-l p, 
.top-info .info-r p{
  margin: 0 0 20px;
  font-size: 120%;
  line-height:1.6em;
}
.top-info .info-r .btn-detail, .top-info .info-l .btn-detail{
  text-align:center; 
}
.top-info .info-r .btn-detail a::before{
  border-left: 12px solid #debdcf;
}
.top-info .info-l .btn-detail a::before{
  border-left: 12px solid #bdcfde;
}

@media only screen and (min-width: 768px){
  .top-info{
	padding:30px 0 60px 0;
  }
  .top-info .info-wrap{
    display: flex;
    width: 100%;
    margin:0 auto;
  }
  .top-info .info-r, .top-info .info-l{
    width:50%;
  }
  .top-info .info-r{
    margin-right:10px; 
  }
  .top-info .info-l{
    margin-left:10px; 
  }
  .info-in{
    background:#fff;
    width:90%;
    margin: -60px auto 0 auto;
    padding: 15px 30px 10px 30px;
    position: relative;
  }
  .top-info .info-l p, 
  .top-info .info-r p{
    line-height:1.8em;
  }
  .top-info .info-r p.imp{
    top:-62px;
    right:-12px;
  }
}
@media print, screen and (min-width: 900px){
  .info-in{
    background:#fff;
    width:480px;
  }
  .top-info .info-r p.imp{
    top:-45px;
    right:20px;
  }
}