/*----------------------------------------
hokuhokuri_sp.css
ほくほ栗LP
----------------------------------------*/

body,
#wrap {
  background-image:  none;
}
.top {
  margin-bottom: 0 !important;
}
#main-content {
  padding-top: 0;
}
#undercolumn {
  padding-bottom: 0;
}

.lp_hokuhokuri {
  overflow-y: hidden;
}
.lp_hokuhokuri * {
  box-sizing: border-box;
}
.lp_hokuhokuri img {
  width: 100%;
  vertical-align: bottom;
}


.cnt1 {
  min-height: 267vw;
  background: url(sp/cnt1_bg.jpg) no-repeat;
  background-size: 100% auto;
  padding: 8vw 0 0;
}
.cnt1_btn {
  height: 28.8vw;
  background: url(sp/cnt1_btn_bg.jpg) no-repeat;
  padding: 6.3vw 7vw 0 7vw;
}
.cnt2 {
  min-height: 315vw;
  background: url(sp/cnt2_bg.jpg) no-repeat;
  background-size: 100% auto;
  padding: 8vw 0 0;
}
.cnt2_column{
  width: 86vw;
  height: 110vw;
  background: url(sp/cnt2_column_img.png) no-repeat;
  background-size: 100%;
  position: relative;
  top: 8vw;
  left: 7vw;
}
.cnt3 {
  min-height: 275vw;
  background: url(sp/cnt3_bg.jpg) no-repeat;
  background-size: 100% auto;
  padding: 8vw 0 0;
}
.cnt4 {
  width: 100%;
  overflow: hidden;
  background: #fff url(sp/cnt4_bg.jpg) no-repeat left 14vw;
  background-size: 100% auto;
  padding-bottom: 8vw;
}
.cnt5 {
  min-height: 826.9vw;
  background: url(sp/cnt5_bg.jpg) no-repeat center top;
  background-size: cover;
  padding: 8vw 0 8.4vw;
}

/*ttl*/
.cnt1 .ttl,
.cnt2 .ttl,
.cnt3 .ttl,
.cnt5 .ttl {
  width: 89.3vw;
  margin: auto;
}
/*subttl*/
.cnt1 .subttl {
  width: 77.46vw;
  margin: 5.3vw auto 6.66vw;
}
.cnt2 .subttl {
  width: 62vw;
  margin: 4.8vw 20vw 6.53vw;
}
.cnt3 .subttl {
  width: 85vw;
  margin: 4.8vw auto 6.66vw;
}
.cnt4 .subttl {
  width: 88.66vw;
  margin: 4.7vw auto 4.2vw;
}
.cnt5 .subttl {
  width: 82.53vw;
  margin: 4.53vw auto 6.66vw;
}

/*cmn_box*/
.cmn_box {
  position: relative;
}
.cmn_box:after {
  content: "";
  display: block;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
}
.box1 {
  margin: 0 auto 6.66vw;
  position: relative;
}


.cmn_box .txtbox {
  width: 86.6vw;
  background: rgba(255,255,255,0.8);
  padding: 6.26vw 4.8vw 0;
}
.box1 .txtbox {
  position: relative;
  float: right;
  margin-top: -4.8vw;
}
.box2 .txtbox {
  position: relative;
  margin-top: -5vw;
  float: left;
}
.cmn_box .img1 {
  width: 59.6vw;
  padding-left: 5.3vw;
}
.cmn_box .img2 {
  width: 59.6vw;
  float: right;
}

.txtbox p {
  color: #000;
  font-size: 4vw;
  line-height: 1.8;
  padding-top: 2.4vw;
}

.cnt4 .p1 {
  color: #3b0f0b;
  font-size: 3.2vw;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 4.8vw;
}
.cnt4 .p2 {
  width: 79.3vw;
  margin: 6.1vw  auto 0;
}
.bnt_insta {
  display: block;
  width: 82.66vw;
  height: 16vw;
  margin: 7.7vw auto 6.6vw;
}
.btn_product {
  display: block;
  height: 16vw;
}


.cmn_box .txtbox2 {
  width: 89.3vw;
  background: rgba(255,255,255,0.8);
  padding: 12vw 4.8vw 0;
  margin: auto;
  position: relative;
}
.cmn_box .img3 {
  display: block;
  width: 84.26vw;
  margin-left: 6.93vw;
  position: relative;
  z-index: 10;
}
.cmn_box .img4 {
  display: block;
  width: 84.26vw;
  margin-left: 6.93vw;
  position: relative;
  z-index: 10;
}
.txtbox2 h4 {
  color: #a04444;
  font-size: 5.3vw;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 2vw;
  text-align: center;
}
.txtbox2 p {
  color: #000;
  font-size: 4vw;
  line-height: 1.8;
}
.column_txtbox p {
  width: 75vw;
  color: #000;
  font-size: 4vw;
  line-height: 2;
  position: absolute;
  top: 88vw;
  left: 5vw;
}
.btn_nosi {
  display: block;
  width: 82.66vw;
  height: 16vw;
  margin: 8vw auto;
}

.txt_hokuhokuri {
  display: block;
  width: 28%;
  margin: 4.5vw auto;
}
.cmn_box .img5 {
  display: block;
  width: 62.66vw;
  margin: 0 auto 5.3vw;
}
.cmn_box .txtbox3 {
  width: 89.3vw;
  margin: auto;3.46vw;}
.cmn_box .txtbox3 h3 {
  text-align: center;
  margin-bottom: 26px;
}
.cmn_box .txtbox3 .data {
  background: rgba(255,255,255,0.8);
  padding: 4.66vw 6.2vw 4.2vw;
}
.cmn_box .txtbox3 .data li {
  border-left: 4px solid #a04444;
  border-bottom: 1px solid #a04444;
  padding: 1.73vw 0 1.86vw 3.06vw;
  position: relative;
}
.cmn_box .txtbox3 .data li + li {
  margin-top: 3.2vw;
}
.cmn_box .txtbox3 .data li b {
  color: #a04444;
  font-size: 3.46vw;
  line-height: 1;
}
.cmn_box .txtbox3 .data li span {
  color: #000;
  font-size: 3.46vw;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 10px;
}
.cmn_box .txtbox3 .data p {
  color: #000;
  font-size: 3.2vw;
  line-height: 1;
  margin-top: 3.7vw;
}

.hokuhokuri_item_list {
  width: 80vw;
  margin: 6.6vw auto 0;
}
.hokuhokuri_item_list li {
  width: 36vw;
  position: relative;
  text-align: center;
}
.hokuhokuri_item_list li:nth-child(odd) {
  clear: both;
  float: left;
}
.hokuhokuri_item_list li:nth-child(even) {
  float: right;
}
.hokuhokuri_item_list li:nth-child(n+3) {
  margin-top: 8.5vw;
}

.hokuhokuri_item_list li .item_img {
  display: block;
  margin-bottom: 2.66vw;
}
.hokuhokuri_item_list li .item_name {
  color: #000;
  font-size: 3.7vw;
  font-weight: normal;
  line-height: 1.875;
}
.hokuhokuri_item_list li .item_price {
  color: #000;
  font-size: 3.7vw;
  line-height: 1.875;
}
.hokuhokuri_item_list li button {
  display: block;
  margin-top: 12px;
  border: 0;
  background: transparent;
  padding: 0;
}
.cmn_icon {
  display: block;
  width: 13.3vw;
  height: 13.3vw;
  position: absolute;
  left: -4vw;
  top: -2.66vw;
}


/*insta*/
.insta_box {
  width: 80vw;
  margin: auto;
}

.slick-slide {
  margin: 0 5px !important;
}

.insta_box .img_loading {
  width: 32px;
  height: 32px;
  display: block;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.insta_box iframe {
  border: 1px solid rgb(219, 219, 219);
  margin: 0px auto;
  height: 550px;
  border-radius: 4px;
  display: block;
  padding: 0px;
  
}

.insta_box li blockquote,
.insta_box li iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  //height: 400px !important;
  //max-height: 400px !important;
  //min-height: 400px !important;
  box-shadow: none !important;
  border: 1px solid #ddd !important;
}

.slick-arrow {
  display: block;
  width: 60px;
  height: 70px;
  border: 0;
  text-indent: -999px;
  position: absolute;
  top: 245px !important;
  z-index: 100;
  cursor: pointer;
}
.slick-prev {
  background: transparent url(sp/arrow_prev.png) no-repeat center;
  background-size: 21px auto;
  left: -40px;
}
.slick-next {
  background: transparent url(sp/arrow_next.png) no-repeat center;
  background-size: 21px auto;
  right: -40px;
}


.btn_more {
  display: block;
  width: 100%;
  background: #333;
  color: #fff !important;
  text-align: center;
  padding: 0.6em 0;
  margin-top: 1vw;
}