@charset "utf-8";
/* ================================================================
  商品説明文 ブロックCSS
  ※ このスタイルは .p-contents 内のブロック専用
================================================================ */

/* ================================================================
共通
================================================================ */
.p-contents {
  padding-block: var(--sec-spc);
  display: grid;
  gap: var(--sec-spc);
}
.p-contents__heading {
  text-align: center;
  font-family: var(--ff-serif);
}
.p-contents__txt {
  line-height: 2;
}
@media screen and (min-width: 768px){
  .p-contents__heading{
    font-size: var(--fz-28);
    margin-bottom: var(--spc-30);
  }
  .p-contents__ttl{
    font-size: var(--fz-20);
    margin-bottom: var(--spc-20);
  }
  .p-contents__txt{
    font-size: var(--fz-16);
  }
  .p-contents__txt+.p-contents__txt,
  .p-contents__txt+*{
    margin-top: var(--spc-20);
  }
  .p-contents__txt+.p-contents__ttl{
    margin-top: var(--spc-50);
  }
}
@media screen and (max-width: 767px){
  .p-contents__heading{
    font-size: 20px;
    margin-bottom: 20px;
  }
  .p-contents__ttl{
    font-size: 16px;
    margin-bottom: 15px;
  }
  .p-contents__txt{
    font-size: 14px;
  }
  .p-contents__txt+.p-contents__txt,
  .p-contents__txt+*{
    margin-top: 15px;
  }
  .p-contents__txt+.p-contents__ttl{
    margin-top: 30px;
  }
}
/* ================================================================
セクション: 商品の特徴 | .p-contentsFeature
================================================================ */
.p-contentsFeature{
  max-width: 1200px;
  margin-inline: auto;
  background-color: var(--c-yellow-400);
}
@media screen and (min-width: 768px){
  .p-contentsFeature{
    width: var(--inner-w);
    padding: var(--spc-60) var(--spc-50);
  }
  .p-contentsFeature >*:not(.p-contentsAcc){
    padding-inline: var(--spc-30) !important;
  }
  .p-contentsFeature .p-contentsImgText{
    margin-block: var(--spc-40);
  }
}
@media screen and (max-width: 767px){
  .p-contentsFeature{
    padding: 30px 20px;
  }
  .p-contentsFeature .p-contentsImgText{
    margin-block: 30px;
  }
}

/* ================================================================
セクション: アコーディオン | .p-contentsAcc
================================================================ */
.p-contentsAcc__item {
  border-top: 1px solid var(--bd-c-gray);
  background: var(--c-white);
}

.p-contentsAcc__item:last-child {
  border-bottom: 1px solid var(--bd-c-gray);
}

.p-contentsAcc__trigger {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-serif);
  color: var(--txt-c-base);
  letter-spacing: var(--ls-default);
}

.p-contentsAcc__icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.p-contentsAcc__icon::before,
.p-contentsAcc__icon::after {
  content: "";
  display: block;
  background-color: var(--txt-c-base);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-contentsAcc__icon::before {
  width: 14px;
  height: 1px;
}

.p-contentsAcc__icon::after {
  width: 1px;
  height: 14px;
  transition: transform .3s;
}

.p-contentsAcc__trigger.is-open .p-contentsAcc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.p-contentsAcc__body {
  display: none;
  overflow: hidden;
}

.p-contentsAcc__inner {
  line-height: 2;
}

.p-contentsAcc__note {
  background-color: var(--c-yellow-400);
  line-height: 1.8;
}

.p-contentsAcc__step__ttl {
  font-weight: bold;
  margin-bottom: var(--spc-10);
}


@media screen and (min-width: 768px){
  .p-contentsAcc{
    margin-top: var(--spc-60);
  }
  .p-contentsAcc__trigger{
    font-size: var(--fz-20);
    padding: var(--spc-30) var(--spc-50);
  }
  .p-contentsAcc__inner{
    padding: var(--spc-30) var(--spc-50);
    padding-top: 0;
  }
  .p-contentsAcc__note{
    padding: var(--spc-30);
    margin-block: var(--spc-20);
  }
  .p-contentsAcc__step__item+.p-contentsAcc__step__item{
    margin-top: var(--spc-20);
  }
}
@media screen and (max-width: 767px){
  .p-contentsAcc{
    margin-top: 30px;
  }
  .p-contentsAcc__trigger{
    font-size: 16px;
    padding: 20px 15px;
  }
  .p-contentsAcc__inner{
    padding: 20px 15px;
    padding-top: 0;
  }
  .p-contentsAcc__note{
    padding: 15px;
    margin-block: 15px;
  }
  .p-contentsAcc__step__item+.p-contentsAcc__step__item{
    margin-top: 15px;
  }
}

/* ================================================================
ブロック A: 画像左+テキスト右 | .p-contentsImgText
================================================================ */
.p-contentsImgText{
  display: grid;
  max-width: 1200px;
  margin-inline: auto;
  background-color: var(--c-yellow-400);
}
.p-contentsImgText__img {
  display: grid;
}
.p-contentsImgText__img img{
  object-fit: cover;
}
@media screen and (min-width: 768px){
  .p-contentsImgText{
    width: var(--inner-w);
    grid-template-columns: repeat(2,1fr);
    align-items: flex-start;
    gap: var(--spc-50);
    padding: var(--spc-60) var(--spc-50);
  }
  .p-contentsImgText__img{
    gap: var(--spc-40);
  }
  .p-contentsImgText__button{
    grid-column: span 2;
  }
}
@media screen and (max-width: 767px){
  .p-contentsImgText{
    gap: 20px;
    padding: 30px 20px;
  }
  .p-contentsImgText__img{
    gap: 15px;
  }
}

.p-contentsFeature .p-contentsImgText{
  width: 100%;
  padding: 0;
}
.p-contentsImgText--noBackground{
  background-color: transparent;
  padding: 0;
}
@media screen and (max-width: 767px){
  .p-contentsImgText--noBackground{
    width: var(--inner-w);
  }
}
/* ================================================================
成分・内容量 テーブル | .p-contentsAcc__ingredients
================================================================ */
.p-contentsAcc__ingredients__item {
  display: grid;
  grid-template-columns: auto 1fr;
}

.p-contentsAcc__ingredients__item dt {
  color: var(--txt-c-base);
}

@media screen and (min-width: 768px) {
  .p-contentsAcc__ingredients {
    margin-block: var(--spc-20);
  }
  .p-contentsAcc__ingredients__item {
    gap: var(--spc-20);
  }
  .p-contentsAcc__ingredients__item+.p-contentsAcc__ingredients__item {
    margin-top: var(--spc-20);
  }
}
@media screen and (max-width: 767px) {
  .p-contentsAcc__ingredients {
    margin-block: 15px;
  }
  .p-contentsAcc__ingredients__item {
    gap: 10px;
    font-size: 14px;
  }
}

/* ================================================================
ブロック B: 3カラム画像 / 3カラム画像+共通テキスト | .p-contents3col
================================================================ */
.p-contents3col{
  width: var(--inner-w);
  max-width: 1200px;
  margin-inline: auto;
}
.p-contents3col__ttl {
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--spc-30);
}

.p-contents3col__list {
  --grid-cols-pc: 3;
  --grid-gap-pc: 20px;
  --grid-cols-sp: 1;
  --grid-gap-sp: 10px;
}

.p-contents3col__caption {
  line-height: 1.8;
  margin-top: var(--spc-15);
}

.p-contents3col__txt {
  line-height: 2;
  margin-top: var(--spc-30);
}
@media screen and (min-width: 768px){
  .p-contents3col .p-contents__txt{
    margin-top: var(--spc-20);
  }
}
@media screen and (max-width: 767px){
  .p-contents3col .p-contents__txt{
    margin-top: 20px;
  }
}

.p-contentsFeature .p-contents3col{
  width: 100%;
  margin-block: var(--spc-50);
}

/* ================================================================
ブロック C: 4カラム画像+個別テキスト | .p-contents4col
================================================================ */
.p-contents4col{
  width: var(--inner-w);
  max-width: 1200px;
  margin-inline: auto;
}
.p-contents4col__list {
  --grid-cols-pc: 4;
  --grid-gap-pc: 50px 20px;
  --grid-cols-sp: 2;
  --grid-gap-sp: 20px 10px;
}
@media screen and (min-width: 768px){
  .p-contentsImgCaption{
    font-size: var(--fz-14);
    margin-top: var(--spc-15);
  }
  .p-contentsImgDesc{
    font-size: var(--fz-12);
    margin-top: var(--spc-10);
  }
}
@media screen and (max-width: 767px){
  .p-contentsImgCaption{
    font-size: 12px;
    margin-top: 7px;
  }
  .p-contentsImgDesc{
    font-size: 10px;
    margin-top: 5px;
  }
}

.p-contentsFeature .p-contents4col{
  width: 100%;
  margin-block: var(--spc-60);
}
/* ================================================================
ブロック D: 2カラム画像 | .p-contents2col
================================================================ */
.p-contents2col{
  width: var(--inner-w);
  max-width: 1200px;
  margin-inline: auto;
}
.p-contents2col__list {
  --grid-cols-pc: 2;
  --grid-gap-pc: 20px;
  --grid-cols-sp: 1;
  --grid-gap-sp: 15px;
}

.p-contentsFeature .p-contents2col{
  width: 100%;
  margin-block: var(--spc-60);
}

/* ================================================================
ブロック D: 3カラム画像 | .p-contents3col
================================================================ */
.p-contents3col{
  width: var(--inner-w);
  max-width: 1200px;
  margin-inline: auto;
}
.p-contents3col__list {
  --grid-cols-pc: 3;
  --grid-gap-pc: 20px;
  --grid-cols-sp: 1;
  --grid-gap-sp: 10px;
}


/* ================================================================
ブロック E: 白背景テキストボックス | .p-contentsBgWhite
================================================================ */
.p-contentsBgWhite{
  background-color: var(--c-yellow-400);
  max-width: 1200px;
  margin-inline: auto;
}
@media screen and (min-width: 768px){
  .p-contentsBgWhite{
    width: var(--inner-w);
    padding: var(--spc-60) var(--spc-50);
  }
}
@media screen and (max-width: 767px){
  .p-contentsBgWhite{
    padding: 30px 20px;
  }
}