#product_oll {
  font-family: 'Montserrat', sans-serif,'Noto Sans JP', sans-serif;
}

a {
  text-decoration: none;
  color: #222426;
}

.contents_p1 {
  padding-top: 48px;
  width: 100%;
  height: auto;
}

#product_oll h3 {
  font-size: 28px;
  letter-spacing: .15em;
  padding: 0%;
  font-weight: 600;
  line-height:37px;
  margin-bottom: 0.5em;
}

#product_oll p {
  font-size: 14px;
  letter-spacing: .12em;
  line-height: 22px;
  padding-bottom: 1%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}


/*********** 商品プロデュース説明 ************/

.p1-leftbox img {
  width: 100%;
  height: 400px;
  object-fit: cover; 
}

.p1-leftbox {
  width: 100%;
  height: auto;
  margin-bottom: 2%;
  /* position: relative; */
}

 .p1-leftbox2 {
  width: 100%;
  height: auto;
  margin-bottom: 2%;
  /* position: relative; */
}

.p1-text {
  width: 100%;
  bottom: 1.8%;
  background: rgb(49 59 69 / 7%);
  padding: 4%;
  margin-bottom: 4%;
}


/*********** 商品プロデュース説明END ************/

/*********** contens_btnbox STERT ***********/


/*チェックは見えなくする*/
.buttons-coll_5 input {
  display: none;
}

/*中身を非表示にしておく*/
.buttons-coll_5 .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.buttons-coll_5 input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

/*********** BTN No. 5 アニメーション ***********/
.btn-5 {
  background-color: rgba(105, 98, 72, 10%);
  width: 100%;
  height: 72px;
  line-height: 72px;
  padding: 0;
  border: none;
  color: #686248;
  margin-bottom: 5%;
}
.btn-5 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-5:before,
.btn-5:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #686248;
  transition: all 0.3s ease;
}
.btn-5:before {
  height: 0%;
  width: 1px;
}
.btn-5:after {
  width: 0%;
  height: 1px;
}
.btn-5:hover:before {
  height: 100%;
  color: rgba(94, 94, 94, 0.5);
}
.btn-5:hover:after {
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
}
.btn-5 span:before,
.btn-5 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #686248;
  transition: all 0.3s ease;
}
.btn-5 span:before {
  width: 1px;
  height: 0%;
}
.btn-5 span:after {
  width: 0%;
  height: 1px;
}
.btn-5 span:hover:before {
  height: 100%;
}
.btn-5 span:hover:after {
  width: 100%;
}

/*********** BTN No. 5 アニメーションEND ***********/

/*********** contens_btnbox END ***********/


  /*----------------------------------------------
sp設定 1000px以下の表示
-----------------------------------------------*/
@media (max-width: 1000px) {
article {
  width: 100%;
  margin: 0%;
  padding: 0% 4% 0 4%;
}

article section {
  display: block;
}

/* #product_oll h3 {
  font-size: 18px;
  display: block;
  padding: 5% 0% 4% 0%;
  line-height: 1.5em;
  margin-top: 0%;
  }
}

#product_oll p {
  width: fit-content;
  height: auto;
  font-size: 12px;
  position: static;
  padding: 0%;
  line-height: 15px;
}

#product_oll .p1-text {
  padding: 2.5% 5% 4% 5%;
  width: 100%;
  margin-bottom: 8%;
}

.product-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
} */

.footer-inner {
  padding:8%;
}

.footer-inner .online-titel {
  justify-content: left;
}

.footer-nav {
  display: block;
  padding: 5% 10% 7% 8%;
  margin: 0;
}

.online__list {
  display: block;
  padding: 0;
}

.MH-link .Rakuten-link .NB-link .LIFEMONSTER-link{
  padding: 1% 0 0 10%;
}

.on-a {
  position: static;
  text-align: left;
  padding: 6% 0 6% 4;
}

.on-a::before {
display: none;
}

#product_oll h3{
  line-height: 1.5em;
  margin-bottom: 0.5em;
}

}
/* 1000px END*/


@media (max-width: 768px) {
.p1-leftbox img {
  height: 0%;
}

#product_oll h3{
  margin-top:0;
  font-size: 3.64vw;
}

#product_oll p {
  font-size: 1.82vw;
}

}

@media (max-width: 425px) {
  .p1-text {
    padding: 5% 5% 5% 5%;
  }

  #product_oll h3{
    font-size: 24px;
    margin-bottom: 4%;
  }

  #product_oll p {
    font-size: 13px;
    padding-bottom: 3%;
  }

  }