body{
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
}
.wrap{overflow: hidden;}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 3;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
}
/* text/font
---------------------------------------------------------- */
.font-ro{font-family: ro-nikkatsu-sei-kai-std, serif;}
.font-noto{font-family: noto-serif, serif;}
.txt-center{text-align: center;}
.txt-right{text-align: right;}
.txt-left{text-align: left;}
.lh-18{line-height: 1.8}

/* common
---------------------------------------------------------- */
h1.hero{margin: 0;}
h2{font-size: 40px;}
a{color: #000000;}
a:hover{
  color: inherit;
  text-decoration: none;
}
img{
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}
ul{margin: 0}
li{list-style: none;}
section{padding: 100px 0 100px 0;}

#page-top{
  position: fixed;
  bottom: 30px;
  right: 30px;
}
#page-top img{
  width: 45px;
  height: auto;
}

/* button
---------------------------------------------------------- */
.btn-cart{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 5px;
  transition: .5s;
  padding: 0 10px 0 10px;
}
.gray .btn-cart{color: #ffffff;}
.btn-cart::before{
  content:'';
  display: inline-block;
  background-image: url(../img/ico_cart_bk@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 5px 0 0;
}
.soldout .btn-cart::before{display: none;}
.gray .btn-cart::before{background-image: url(../img/ico_cart_wh@2x.png);}
.ttl-sec-item-lower .btn-cart{
  width: 200px;
  height: 40px;
  margin: 0 0 0 20px;
}
.ttl-sec-item-lower .btn-cart::before{
  width: 30px;
  height: 30px;
}
.lineup-contents .btn-cart::before{
  width: 18px;
  height: 18px;
}
.btn-cart:hover{
  transform: translateY(4px);
  box-shadow: none !important;
}
.soldout .btn-cart:hover{
  transform: translateY(0);
}

/* flex
---------------------------------------------------------- */
.flex{display: flex;}
.jc_fs{justify-content: flex-start;}
.jc_fe{justify-content: flex-end;}
.jc_sb{justify-content: space-between;}
.jc_ce{justify-content: center;}
.ai_ce{align-items: center;}
.ai_st{align-items: stretch;}


/* =================================
header
================================= */
header{
  height: 60px;
  padding: 5px 0 5px 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
header h1{
  position: relative;
  width: 25px;
  height: 50px;
  margin: 0;
}
header h1 img{
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
header nav li{padding: 0 15px 0 0;}
header nav li::after{
  border-left: 1px solid #707070;
  width: 1px;
  height: 17px;
  content: '';
  margin: 0 0 0 15px;
}
header nav li:nth-last-child(1)::after{
  border: none;
  margin: 0;
}
header nav li.sp_menu{display: none;}
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  background: rgba(255,255,255,0.9);
}
.btn-menu{
  display: block;
  background: none;
  border: none;
  padding: 0;
  width: 42px;
  color: #333;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-align: center;
  outline: none;
}
.btn-menu span{
  display: block;
  height: 2px;
  background-color: #333;
  margin: 10px 0;
  transition: all 0.2s;
  transform-origin: 0 0;
}
button.active span{width: 49px;}
button.active span:nth-of-type(1){transform: rotate(45deg) translate(1px ,-6px);}
button.active span:nth-of-type(2){opacity: 0; width: 0;}
button.active span:nth-of-type(3){transform: rotate(-45deg) translate(-2px ,7px);}

/* =================================
area-btn
================================= */
.area-btn{
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.gray .area-btn{background-position: center;}
.area-btn .btn-contents{margin: 0 0 80px 0;}

/* =================================
camp-info
================================= */
section.camp-sec{
  padding: 0 15px 100px;
}
.camp-info{
  position: relative;
  padding: 30px 20px 20px;
  /*background-color: rgba(173, 222, 248,0.2) お中元*/
  background-color: #eee; /*お歳暮*/
}
.camp-info > span{
  position: absolute;
  top: -10px;
  left: -10px;
  /*background-color: #325FAC; お中元*/
  background-color: #8D0E10; /*お歳暮*/
  color: #fff;
  border-radius: 5px;
  padding: 2px 5px;
  font-size: 1.1em;
}
.camp-info ul{
  padding: 0;
}
.camp-info li{
  /*border: 1px solid #325FAC; お中元*/
  border: 1px solid #666; /*お歳暮*/
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  font-size: 0.9em;
}
.camp-info li:nth-of-type(1){
  margin: 0 10px 0 0;
}
.camp-info li i{
  font-size: 3em;
  display: block;
  margin: 5px auto 10px;
  /*color: #325FAC; お中元*/
  color: #8D0E10;/*お歳暮*/
}
.camp-info li span{
  font-size: 1.5em;
  font-weight: bold;
  color: #8D0E10;
  display: block;
}
@media screen and (max-width: 500px){
  .camp-sec .flex{
    flex-direction: column;
  }
  .camp-info li:nth-of-type(1){
    margin: 0 0 10px 0;
  }
}

/* =================================
sec-item
================================= */
section.sec-item{padding: 0 0 100px 0;}
.sec-item h2{z-index: 2;}
.sec-item h2 span{
  font-size: 200px;
  position: absolute;
  top: -200%;
  left: 0;
  z-index: -1;
}

/* box-item-hero
---------------------------------------------------------- */
.box-item-hero{
  height: 500px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  flex-direction: column;
  position: relative;
}
.ttl-sec-item-upper{
  background: linear-gradient(90deg, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  height: 150px;
  overflow: hidden;
}
.ttl-sec-item-upper p{margin: 0;}
.ttl-sec-item-lower{
  background: linear-gradient(-90deg, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  height: 150px;
  position: absolute;
  bottom: -80px;
  right: 0;
  z-index: 3;
  width: 100%;
}
.ttl-sec-item-lower > .container > .flex{align-items: center;}
.ttl-sec-item-lower .ico{
  margin: 0 15px 0 0;
  flex-shrink: 0
}
.ttl-sec-item-lower .ico img{width: 100px;}
.ttl-sec-item-lower h3{
  margin: 20px 0 20px 0;
  font-size: 1.5rem;
}
.ttl-sec-item-lower .price{font-size: 24px;}

/* assort-item
---------------------------------------------------------- */
.assort-item{
  padding: 100px 0 60px 0;
  background-repeat: repeat;
}
.gray .assort-item{
  background-repeat: no-repeat;
  background-size: 110% 100%;
  background-position: center bottom;
}
.assort-item-contents{
  flex-direction: column;
  align-items: center;
}
.assort-item-img{
  max-width: 200px;
  max-height: 200px;
}
.box-item h3{
  font-size: 24px;
  margin: 0 0 30px 0;
}
.assort-item-txt{width: 100%;}
.assort-item h4{
  font-size: 20px;
  text-align: center;
  margin: 10px 0 20px 0;
}
.bg-ttl{
  background-repeat: no-repeat;
  background-position: calc(50% + 50px) center;
}

/* voice
---------------------------------------------------------- */
.voice{padding: 60px 0 60px 0;}
.voice-contents{
  padding: 20px 10px 20px 20px;
  height: 100%;
  font-size: 15px;
}
.voice-contents .flex{align-items: flex-end;}
.voice-contents .flex figure{
  width: 16%;
  min-width: 82px;
  font-size: 12px;
  text-align: center;
}
.voice-contents p{
   padding-bottom: 0.2em;
   background-size: 2px 2.2em;
   line-height: 2.2;
}
/* lineup
---------------------------------------------------------- */
.lineup-contents{margin: 0 0 15px 0;}
.ico-wrap{
  display: flex;
  position: absolute;
  z-index: 2;
}
.ico-wrap span.ico::before{
  content: '';
  display: block;
  width: 70px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;:
}
.lineup-contents h4{
  font-size: 14px;
  min-height: 0%
}
.lineup-contents h4 span{height: 100%;}
.lineup-contents .flex{
  font-size: 18px;
  flex-direction: column;
}
.lineup-contents >.flex{height: 100%;}
.lineup-contents .lineup-img{min-height: 0%;}
.lineup-contents .lineup-txt{
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 5px 0 0 0;
}
.lineup-contents .btn-cart{
  margin: 12px 0 0 0;
  padding: 10px;
}
.lineup-contents.soldout{position: relative;}
.lineup-contents.soldout:after{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}
.lineup-contents.soldout::before{
  content:"ご好評につき完売しました。";
  position: absolute;
  width: 140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  color: #fff;
  text-align: center;
}
@media (max-width: 768px){
  .lineup-contents.soldout::before{
    width: 100%;
  }
}
/* staff
---------------------------------------------------------- */
.staff{margin: 40px 0 0 0;}
.staff .staff-wrap{
  border: 1px solid #707070;
  border-radius: 10px;
  background-image: url(../img/2019ochugen/bg_staff.jpg);
  position: relative;
  padding: 15px;
}
.staff .staff-wrap::before{
  content: '';
  width: 45px;
  height: 42px;
  background-image: url(../img/2019ochugen/bg_staff_top@2x.png);
  background-size: contain;
  position: absolute;
  top: -41px;
  left: 10%;
}
.staff h3{
  font-size: 20px;
  margin: 0 0 10px 0;
}
.staff p{margin: 0;}

/* =================================
ranking
================================= */
.sec-item.ranking h2{font-size: 32px;}
.sec-item.ranking h2 span{top:-75%}
.ranking{background-size: 100% 100%;}
.ranking > .container{padding: 0 15px 60px 15px;}
.ranking .ttl-sec-item-upper{transform: translateY(-50px);}
.ranking h3{
  font-size: 24px;
  margin: 0 0 20px 0;
}
.ranking h3 + p{margin: 0 0 30px 0;}
.ranking-upper{width: 40%;}
.ranking-lower{width: 60%;}
.ranking-contents{
  position: relative;
  margin: 0 15px 20px 0
}
.ranking-upper .ranking-contents{width: calc(50% - 15px); }
.ranking-lower .ranking-contents{width: calc(33% - 15px);; }
.ranking-contents >span,.ranking-contents .rank{color: #fff;}
.rank01 >span{background: #C4AE4F;}
.rank02 >span{background: #908E8D;}
.rank03 .rank{background: #A88675;}
.rank04 .rank,.rank05 .rank{background: #000000;}
.ranking-contents .ico-wrap{top: 25px;}
.ranking-contents img{
  background: #fff;
  padding: 5px;
}
.ranking-upper .ranking-contents a.d-flex{
  flex-direction: column;
  height: calc(100% - 20px);
}
.ranking-lower .ranking-contents > .flex{
  flex-direction: column;
  height: 100%;
}
.ranking-lower .ranking-contents a.d-flex{
  flex-direction: column;
}
.ranking-lower .ranking-contents a.d-flex:nth-of-type(2){flex-grow: 1;}
.ranking-contents .lineup-txt{
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px 0 0 0;
}
.ranking-contents h4{
  font-size: 14px;
  margin: 5px 0 5px 0;
}
.ranking-contents .txt-right{font-size: 14px;}

.ranking-contents.soldout{position: relative;}
.ranking-contents.soldout::before{
  content:"ご好評につき完売しました。";
  position: absolute;
  width: 140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  color: #fff;
  text-align: center;
}
.ranking-contents.soldout:after{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  transform: scale(1.05);
}
@media (max-width: 768px){
  .ranking-contents.soldout::before{
    width: 100%;
  }
}
/* =================================
select
================================= */
.btn-select-wrap{
  position: relative;
  width: 100%;
  display: block;
  transition: .5s;
  margin: 0 0 15px 0;
}
.btn-select-wrap:hover{transform: translateY(4px);}
.btn-select-wrap::before{
  content: '';
  display: block;
  padding-top: 31%;
}
.btn-select-wrap >span{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  padding: 10px;
}
.select-item .btn-select-wrap >span{
  justify-content: flex-start;

}
.select-item .btn-select-wrap >span img{
  flex-basis: 20%;
  width: auto;
  height: 100%;
}
.select-item .btn-select-wrap >span span{
  flex: 1;
  text-align: center;
}

/* =================================
guide
================================= */
.guide{
  background-size: cover;
  background-attachment: fixed;
}
.guide span{display: none;}
.guide h3{
  font-size: 24px;
  background-repeat:repeat-x;
  background-position: bottom;
}
.guide .row > div.col-md-6{
  margin: 0 0 35px 0;
  line-height: 1.8;
}
.guide .row + .row{margin:20px -15px 0 -15px;}
.guide h4{
  font-size: 20px;
  margin: 10px 0 5px 0;
}
.guide .row > div.col-md-3,
.guide .row > div.col-md-4{margin: 0 0 15px 0;}

@media (mim-width: 768px){
  .guide .content{display: block  !important;}
}

/* =================================
quolofune
================================= */
section.quolofune{padding-top: 50px;}
.quolofune h2{margin: 0 0 40px 0;}
.quolofune img{margin: 0 0 10px 0;}
.quolofune .bnr{margin: 20px 0 0;}

/* =================================
shopping
================================= */
section.shopping{
  background-color: #F2EFE1;
  padding: 40px 0 0 0;
  font-size: 14px;
}
.gray section.shopping{background: #eee;}
.shopping h3{font-size: 20px;}
.shopping img{
  width: 50%;
  margin: 0 0 5px 0;
}
.shopping .col-6{margin: 0 0 15px 0;}
/* =================================
footer
================================= */
footer{
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 5px 0 5px 0;
}
@media (min-width: 992px){
  .select .fs-small{
    font-size: 12px;
  }
}
@media (max-width: 991px){
  header nav{
    width: 300px;
    height: 100%;
    transition: all 0.3s;
    transform: translate(300px);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    background-color: #FFF;
    padding: 30px 20px 100px 20px;
  }
  header nav.open {transform: translate(0); }
  header nav .btn-close{margin: 0 0 20px auto;}
  header nav ul{
    flex-direction: column;
    padding: 0;
  }
  header nav li{border-bottom: 1px dashed #cccccc;}
  header nav li.sp_menu{display: list-item;}
  header nav li a{
    padding: 10px 5px;
    display: block;
  }
  header nav li::after{display: none;}
  .ranking-contents-wrap{flex-direction: column;}
  .ranking-upper,.ranking-lower{width: 100%;}
}

@media (max-width: 767px){
  h2{font-size: 28px;}
  .lead p{font-size: 3.3vw}
  .txt-right{font-size: 14px;}
  /* =================================
  area-btn
  ================================= */
  .area-btn .btn-contents{
    margin: 0 0 15px 0;
    text-align: center;
  }
  .area-btn .btn-contents img{max-width: 400px;}
  .ttl-sec-item-upper,.ttl-sec-item-lower{
    height: auto;
    padding: 20px 0;
  }
  .sec-item h2{font-size: 28px;}
  .sec-item h2 span{
    font-size: 180px;
    top:-170%;
  }
  .ttl-sec-item-upper p{font-size: 12px;}
  .ttl-sec-item-lower > .container > .flex{align-items: flex-start;}
  .ttl-sec-item-lower .ico{margin: 0 5px 0 0;}
  .ttl-sec-item-lower .ico img{
    width: 45px;
    height: 45px;
  }
  .ttl-sec-item-lower h3{
    font-size: 14px;
    margin: 0 0 10px 0;
  }
  .ttl-sec-item-lower .price{font-size: 14px;}
  .ttl-sec-item-lower .btn-cart{
    width: 100%;
    margin: 15px 0 0 0;
  }
  .box-item h3{font-size: 20px;}
  .assort-item-contents{
    flex-direction: row;
    margin: 0 0 15px 0;
  }
  .assort-item-img{
    width: calc(30% - 10px);
    margin: 0 10px 0 0;
  }
  .assort-item-txt{width: 70%;}
  .assort-item h4{
    font-size: 16px;
    text-align: left;
    margin: 0 0 10px 0;
  }
  .assort-item p{font-size: 11px;}
  .voice .col-md-6{margin: 0 0 20px 0;}
  .voice-contents{font-size: 12px;}

  /* lineup
  ---------------------------------------------------------- */
  .lineup-contents .flex{
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .lineup-contents > .flex{
    border-bottom: 1px dashed #ccc;
    padding: 15px 0 15px 0;
    margin: 0;
    align-items: stretch;
  }
  .ico-wrap{top:15px;}
  .ico-wrap span.ico::before{
    width: 40px;
    height: 40px;
  }
  .lineup-img{
    width: calc(30% - 10px);
    margin: 0 10px 0 0;
  }
  .lineup-contents .lineup-txt{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0;
  }
  .lineup-contents .btn-cart{
    flex: 1;
    font-size: 12px;
    padding: 5px 10px;
    max-width: 160px;
  }
  /* staff
  ---------------------------------------------------------- */
  .staff h3{font-size: 16px;}
  .staff p,.staff-name{font-size: 12px;}
  /* =================================
  ranking
  ================================= */
  .ranking h3{font-size: 20px;}
  .ranking h3 + p{font-size: 12px;}
  .ranking-upper{margin: 0 auto 30px;}
  .ranking-lower{flex-direction: column;}
  .ranking-lower .ranking-contents{
    width:100%;
    display: flex;
  }
  .ranking-lower .ranking-contents .ico-wrap{top:5px;}
  .ranking-lower .ranking-contents > .flex{
    flex-direction: row;
    height: auto;
  }
  .ranking-lower .ranking-contents span.flex{width: 15px;}
  .ranking-lower .ranking-contents .d-flex{
    width: 30%;
    min-width: 100px;
    margin: 0 15px 0 0;
  }
  .ranking-lower .ranking-contents .d-block + a.d-block{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
  }
  .ranking-lower .ranking-contents .lineup-txt{
    justify-content: flex-start;
  }
  .ranking-lower .ranking-contents .lineup-txt h4{margin: 10px 0 20px;}
  /* =================================
  select
  ================================= */
  .select{font-size: 2.5vw;}
  .btn-select-wrap >span img{display: none;}
  /* =================================
  guide
  ================================= */
  .guide{background-size: 100%;}
  .guide h3{
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }
  .guide p{font-size: 12px;}
  .guide img{
    max-width: 250px;
    padding: 0;
    display:block;
    margin:  0 auto;
  }
  .guide h4{font-size: 14px;}
  .guide .content{display: none;}
  .guide span{display: block;}
  .guide i{margin: 0 0 0 5px;}
  /* =================================
  quolofune
  ================================= */
  .quolofune p{font-size: 12px;}
  /* =================================
  shopping
  ================================= */
  .shopping h3{font-size: 12px;}
  .shopping p{font-size: 10px;}
}
@media (max-width: 414px){
  /* =================================
  select
  ================================= */
  .select{font-size: 3.5vw;}
}