@charset "UTF-8";
/* ==============================================
   SOYSAUCE (マルト醤油の製法と歴史)
   ============================================== */

/* ================= 3つのこだわり ================= */
.p-soysauce__commitment {
  position: relative;
  z-index: 1; /* 直後の.p-soysauce__bleed(sticky, z-index:0)より手前に */
  background-color: #f7f3e5;
  padding: 10.9rem 0 11.7rem;
}
.p-soysauce__commitment-title {
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: 0.05em;
  color: var(--c-dark, #2c2c2e);
}
.p-soysauce__commitment-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem 4.7%;
  margin-top: 4rem;
}
.p-soysauce__commitment-img img {
  width: 100%;
  height: auto;
  display: block;
}
.p-soysauce__commitment-item-title {
  margin-top: 2.6rem;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.05em;
  color: var(--c-dark, #2c2c2e);
}
.p-soysauce__commitment-text {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--c-dark, #2c2c2e);
}

/* ================= フルブリード写真（紙芝居的スクロール） =================
   position:stickyで画面上部に貼り付き、直後の不透明背景セクションが
   上からスクロールして覆っていく（page-food.cssの.p-food__bleedと同じ仕組み） */
.p-soysauce__bleed {
  position: sticky;
  top: 0;
  z-index: 0;
}
.p-soysauce__bleed img {
  width: 100%;
  height: auto;
  display: block;
}
/* Safari(WebKit)対策: stickyの.p-soysauce__bleedは合成レイヤーに昇格するため、
   後続セクションがposition:relative; z-index:1だけだとスクロール中に
   sticky画像の下に潜り込んで描画されることがある。覆う側のセクションにも
   自前の合成レイヤー(translateZ(0))と独立したスタッキングコンテキスト(isolation)を
   持たせ、描画順をz-index通りに確定させる */
.p-soysauce__commitment,
.p-soysauce__history,
.p-soysauce__revival,
.p-soysauce__kiage,
.p-soysauce__products {
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ================= 歴史・再興（ダーク背景の2カラムテキストセクション共通） ================= */
.p-soysauce__history,
.p-soysauce__revival {
  position: relative;
  z-index: 1; /* .p-soysauce__bleed(sticky, z-index:0)を確実に覆うため */
  background-color: #1f3134;
  padding: 10.8rem 0 11.6rem;
}
.p-soysauce__columns {
  display: flex;
  gap: 5.6%;
  margin-top: 3rem;
}
.p-soysauce__column {
  flex: 1;
  min-width: 0;
}
.p-soysauce__column .u-text {
  color: #fff;
}

/* ================= 「生揚げ（きあげ）醤油」について ================= */
.p-soysauce__kiage {
  position: relative;
  z-index: 1;
  background-color: #f7f3e5;
  padding: 10.8rem 0 12rem;
}
.p-soysauce__kiage-inner {
  display: flex;
  align-items: flex-start;
  gap: 5.6%;
  margin-top: 3.4rem;
}
.p-soysauce__kiage-info {
  flex: 1;
  min-width: 0;
}
.p-soysauce__kiage-title {
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: 0.05em;
  color: var(--c-dark, #2c2c2e);
}
.p-soysauce__kiage-info .u-text {
  color: var(--c-dark, #2c2c2e);
}
.p-soysauce__kiage-figure {
  flex: 1;
  min-width: 0;
  margin-top: 0.6rem;
}
.p-soysauce__kiage-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================= 商品一覧 ================= */
.p-soysauce__products {
  position: relative;
  z-index: 1;
  background-color: #1f3134;
  padding: 10.4rem 0 12rem;
}
.p-soysauce__products-lead {
  margin-top: 3.3rem;
  color: #fff;
}
.p-soysauce__store-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 4.7rem;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;
}
.p-soysauce__store-link:hover {
  opacity: 0.7;
}
.p-soysauce__store-link-text {
  text-decoration: underline;
  text-underline-offset: 0.8rem;
}

.p-soysauce__product-list {
  list-style: none;
  padding: 0;
  margin: 8rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8rem 4.7%;
}
.p-soysauce__product-img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
}
.p-soysauce__product-head {
  display: flex;
  align-items: flex-start; /* baseline揃えはSafariで開閉時にボタンの基準線が再計算され行高が変わり、下の価格がずれるためflex-startに */
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.p-soysauce__product-name {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.05em;
  color: #fff;
}
.p-soysauce__product-price {
  margin-top: 0.5rem;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  color: #fff;
}
.p-soysauce__product-price-tax {
  font-size: 1.4rem;
}
.p-soysauce__product-text {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #fff;
}
.p-soysauce__product-detail-inner .p-soysauce__product-text {
  padding-top: 3.1rem;
}

/* おすすめのご利用方法 / 割下解説 */
.p-soysauce__product-usage {
  margin-top: 4.2rem;
  padding-top: 3.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.p-soysauce__product-usage-title {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--c-gold, #a98f54);
}
.p-soysauce__product-usage-lead {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--c-gold, #a98f54);
}
.p-soysauce__product-usage-lead + .p-soysauce__product-usage-title {
  margin-top: 3.4rem;
}
.p-soysauce__product-usage-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.p-soysauce__product-usage-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--c-gold, #a98f54);
}
.p-soysauce__product-usage-list li::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--c-gold, #a98f54);
  border-radius: 50%;
}

/* 購入ボタン */
.p-soysauce__product-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 3.6rem;
}
.p-soysauce__product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 5rem;
  width: 24rem;
  padding: 0.5rem 2rem;
  border-radius: 9999px;
  font-size: 1.8rem;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  background: var(--c-gold, #a98f54);
  color: #fff;
}
.p-soysauce__product-btn:hover {
  background: #fff;
  color: var(--c-gold, #a98f54);
}
/* 購入ボタン内の外部リンクアイコンは、ホバー時に文字色（ゴールド）へ追従させるため
   background-image方式からマスク方式に切り替える（currentColorで塗る） */
.p-soysauce__product-btn .c-icon-external {
  background: currentColor;
  -webkit-mask: url('/assets/img/icon-external.webp') no-repeat center / contain;
  mask: url('/assets/img/icon-external.webp') no-repeat center / contain;
}

/* ================= 商品詳細の開閉（アコーディオン） =================
   PCでは常時展開・トグル非表示。SP（〜1000px）ではFAQと同じ
   grid-template-rows(0fr→1fr)方式で「詳細を開く」開閉を行う */
.p-soysauce__product-toggle {
  display: none;
}
.p-soysauce__product-detail {
  display: grid;
  grid-template-rows: 1fr;
}
.p-soysauce__product-detail-inner {
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 1000px) {
  .p-soysauce .c-page-title {
      line-height: 1.4;
  }

  .p-soysauce__product-toggle {
    display: inline-grid; /* 「詳細を開く」「閉じる」を同じセルに重ねて配置し、開閉でボタンの箱構造・高さが変わらないようにする */
    grid-template-columns: auto 1.4rem;
    column-gap: 1rem;
    align-items: center;
    height: calc(1.9rem * 1.68); /* 商品名（1.9rem/1.68）の1行分に合わせて縦中央に置く */
    flex-shrink: 0;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
  }
  .p-soysauce__product-toggle-label {
    grid-area: 1 / 1;
    justify-self: end;
    white-space: nowrap;
  }
  .p-soysauce__product-toggle-label--close {
    visibility: hidden;
  }
  .js-soysauce-product.is-active .p-soysauce__product-toggle-label--open {
    visibility: hidden;
  }
  .js-soysauce-product.is-active .p-soysauce__product-toggle-label--close {
    visibility: visible;
  }
  /* +/− アイコン（FAQのc-faq__toggle-iconと同じ作り） */
  .p-soysauce__product-toggle-icon {
    grid-area: 1 / 2;
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
  }
  .p-soysauce__product-toggle-icon::before,
  .p-soysauce__product-toggle-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  }
  .p-soysauce__product-toggle-icon::after {
    transform: rotate(90deg); /* 縦棒。アクティブ時に横棒に重なって−になる */
  }
  .js-soysauce-product.is-active .p-soysauce__product-toggle-icon::after {
    transform: rotate(0deg);
  }

  .p-soysauce__product-detail {
    grid-template-rows: 0fr;
    visibility: hidden; /* 閉時はパネル内へフォーカスが入らないように */
    transition: grid-template-rows 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.6s;
  }
  .js-soysauce-product.is-active .p-soysauce__product-detail {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
  }
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 1000px) {
  .p-soysauce__commitment {
    padding: 5.8rem 0 7.2rem;
  }
  .p-soysauce__commitment-title {
    font-size: 2.3rem;
  }
  .p-soysauce__commitment-list {
    grid-template-columns: 1fr;
    gap: 4.8rem;
    margin-top: 3.2rem;
  }
  .p-soysauce__commitment-item-title {
    margin-top: 2.5rem;
    font-size: 1.9rem;
  }
  .p-soysauce__commitment-text {
    font-size: 1.4rem;
  }

  .p-soysauce__history,
  .p-soysauce__revival {
    padding: 6.3rem 0 7.2rem;
  }
  .p-soysauce__columns {
    flex-direction: column;
    gap: 0;
  }
  .p-soysauce__column .u-text + .u-text {
    margin-top: 2.7rem;
  }
  .p-soysauce__column + .p-soysauce__column {
    margin-top: 2.7rem;
  }

  .p-soysauce__kiage {
    padding: 5.8rem 0 7.2rem;
  }
  .p-soysauce__kiage-inner {
    flex-direction: column;
    gap: 4.4rem;
    margin-top: 3rem;
  }
  .p-soysauce__kiage-title {
    font-size: 2.3rem;
    line-height: 1.65;
  }

  .p-soysauce__products {
    padding: 6.3rem 0 7rem;
  }
  .p-soysauce__products-lead {
    margin-top: 2.6rem;
  }
  .p-soysauce__store-link {
    margin-top: 2.8rem;
    font-size: 1.5rem;
  }
  .p-soysauce__product-list {
    grid-template-columns: 1fr;
    gap: 5rem;
    margin-top: 4.6rem;
  }
  .p-soysauce__product-head {
    margin-top: 2.6rem;
  }
  .p-soysauce__product-name {
    font-size: 1.9rem;
    position: relative;
    top: 1px;
  }
  .p-soysauce__product-price {
    font-size: 1.5rem;
    margin-top: 0.7rem;
  }
  .p-soysauce__product-price-tax {
    font-size: 1.2rem;
  }
  .p-soysauce__product-text,
  .p-soysauce__product-usage-lead,
  .p-soysauce__product-usage-list li {
    font-size: 1.4rem;
  }
  .p-soysauce__product-usage {
    margin-top: 3.4rem;
    padding-top: 3.4rem;
  }
  .p-soysauce__product-usage-title {
    font-size: 1.6rem;
  }
  .p-soysauce__product-actions {
    margin-top: 3rem;
    gap: 1rem;
  }
  .p-soysauce__product-btn {
    height: 4rem;
    width: 16rem;
    padding: 0.5rem 1rem 0.5rem 1.8rem;
    font-size: 1.5rem;
    gap: 0.6rem;
  }
}