@charset "UTF-8";

/* page.css — 下層ページ用スタイル */

/* 下層共通レイアウト */
.l-singleColumn {
  margin-top: 72px;
}

@media (max-width: 767px) {
  .l-singleColumn {
    margin-top: 44px;
  }
}

.l-pageBody__title {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-28), 3.4vw, var(--fs-42));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.l-pageBody__content {
  margin-top: 28px;
  font-size: var(--fs-14);
  line-height: 1.8;
}

/* エディタ本文内の基本要素（最低限の整え） */
.l-pageBody__content > * + * {
  margin-top: 1.2em;
}

/* 見出し（h2〜h5）。見出しの前は余白を広めに取る */
.l-pageBody__content h2,
.l-pageBody__content h3,
.l-pageBody__content h4,
.l-pageBody__content h5 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.l-pageBody__content h2 {
  margin-top: 2.4em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-rose-dark, #ad8586);
  font-size: clamp(var(--fs-22), 2.4vw, var(--fs-30));
  color: var(--color-red-deep);
}

.l-pageBody__content h3 {
  margin-top: 2.2em;
  font-size: var(--fs-20);
  color: var(--color-red-deep);
}

.l-pageBody__content h4 {
  margin-top: 2em;
  font-size: var(--fs-18);
}

.l-pageBody__content h5 {
  margin-top: 1.8em;
  font-size: var(--fs-16);
}

.l-pageBody__content ul,
.l-pageBody__content ol {
  padding-left: 1.4em;
}

.l-pageBody__content ul {
  list-style: disc;
}

.l-pageBody__content ol {
  list-style: decimal;
}

.l-pageBody__content li + li {
  margin-top: 0.4em;
}

.l-pageBody__content li::marker {
  color: var(--color-red);
}

.l-pageBody__content blockquote {
  padding: 16px 20px;
  border-left: 3px solid var(--color-rose-dark, #ad8586);
  background-color: var(--color-rose-pale, #f7f3f2);
}

.l-pageBody__content table {
  width: 100%;
  border-collapse: collapse;
}

.l-pageBody__content caption {
  margin-bottom: 0.6em;
  font-weight: 700;
  text-align: left;
}

.l-pageBody__content th,
.l-pageBody__content td {
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.l-pageBody__content th {
  background-color: var(--color-rose-pale, #f7f3f2);
  font-weight: 700;
}

/* 画像とキャプション */
.l-pageBody__content figcaption {
  margin-top: 0.6em;
  font-size: var(--fs-13);
}

.l-pageBody__content a {
  color: var(--color-red);
  text-decoration: underline;
}

.l-pageBody__content img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .l-pageBody__content {
    margin-top: 20px;
  }

  .l-pageBody__content h2 {
    margin-top: 2em;
  }

  .l-pageBody__content blockquote {
    padding: 14px 16px;
  }

  .l-pageBody__content th,
  .l-pageBody__content td {
    padding: 8px 10px;
  }

  /* 表は横スクロールさせず、セル幅を詰めて収める */
  .l-pageBody__content table {
    font-size: var(--fs-13);
  }
}

/* page-strong — フタバの強みページの右カラム地色 */
.page-strong .contentWithSidebar__main {
  background-color: var(--color-cream);
}

@media (max-width: 767px) {
  .page-strong .contentWithSidebar__main {
    background-color: var(--color-bg);
  }
}

/* 共通：装飾スラッシュ付きサブ見出し（〵 テキスト 〴） */
.strengthLead__sub {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-red-deep);
}

.strengthLead__sub::before,
.strengthLead__sub::after {
  content: "";
  width: 1.5px;
  height: 1.16em;
  background-color: var(--color-red-deep);
}

/* デザインでは ＼／ がテキストより下に下がる（0.6em ぶん） */
.strengthLead__sub::before { transform: translateY(0.6em) rotate(-45deg); }
.strengthLead__sub::after { transform: translateY(0.6em) rotate(45deg); }

/* strengthLead — リード（「だし」を科学する フタバの強み） */
.strengthLead {
  padding: 40px 56px 0;
  border-radius: 8px;
  text-align: center;
}

.strengthLead__sub {
  font-size: clamp(var(--fs-15), 2vw, var(--fs-25));
}

/* フォントサイズの変更で崩れないように調整　*/
.strengthLead__title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

.strengthLead__img {
  display: block;
  width: min(100%, 450px);
  height: auto;
  margin: 22px auto 0;
}

.strengthLead__text {
  width: min(100%, 450px);
  margin-top: 45px;
  margin-inline: auto;
  font-size: var(--fs-14);
  line-height: 1.7;
  text-align: left;
}

/* strengthMerit — 業務用だし・鰹節を使うメリット（白ボックス） */
.strengthMerit {
  padding: 60px 54px 0;
  background-color: var(--color-cream);
}

.strengthMerit__inner {
  padding: 62px 48px;
  background-color: var(--color-white);
  border-radius: 8px;
}

/* フォントサイズの変更で崩れないように調整　*/
.strengthMerit__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 54px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-red-deep);
}

.strengthMerit__mark {
  background: linear-gradient(
    transparent 14%,
    #fff100 14%,
    #fff100 84%,
    transparent 84%
  );
  color: var(--color-red-deep);
  padding-inline: 4px;
}

.strengthMerit__list {
  width: 88%;
  margin-top: var(--space-section-md);
  margin-inline: auto;
}

.strengthMerit__item + .strengthMerit__item {
  margin-top: 30px;
}

.strengthMerit__head {
  --merit-num-size: 34px;
  --merit-title-fs: clamp(var(--fs-20), 2.2vw, var(--fs-30));
  --merit-title-lh: 1.7;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: calc(18px + var(--merit-num-size) + 1px);
  padding-top: 18px;
  border-top: 1px solid var(--color-red-deep);
}

.strengthMerit__num {
  margin-top: calc(
    (var(--merit-title-fs) * var(--merit-title-lh) - var(--merit-num-size)) / 2
  );
}

.strengthMerit__num,
.strengthFeat__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 1;
}

.strengthMerit__title {
  font-family: var(--font-serif);
  font-size: var(--merit-title-fs);
  line-height: var(--merit-title-lh);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-red-deep);
}

.strengthMerit__text {
  margin-top: 14px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

/* strengthFeat — フタバ7つの特徴（cream ボックス・全幅1列） */
.strengthFeat {
  padding: 142px 54px 82px;
}

.strengthFeat__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.strengthFeat__lead,
.strengthFeat__sub {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-26);
  font-weight: 700;
  color: var(--color-red-deep);
}

/* 左右の ＼ ／（行全体を挟む） */
.strengthFeat__lead::before,
.strengthFeat__sub::after {
  content: "";
  width: 2px;
  height: 24px;
  background-color: var(--color-red-deep);
}

.strengthFeat__lead::before { transform: rotate(-44deg); }
.strengthFeat__sub::after { transform: rotate(44deg); }

.strengthFeat__bigtitle {
  width: 100%;
  margin-top: 0;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-38), 3.65vw, var(--fs-54));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

.strengthFeat__bigtitle em {
  font-style: normal;
}

.strengthFeat__list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.strengthFeat__item {
  background-color: var(--color-white);
  border: 1px solid var(--color-red-deep);
}

.strengthFeat__head {
  display: flex;
  align-items: stretch;
  background-color: var(--color-rose);
  border-bottom: 1px solid var(--color-red-deep);
}

.strengthFeat__head .strengthFeat__num {
  width: 68px;
  height: auto;
  font-size: var(--fs-38);
}

.strengthFeat__title {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-28), 2.03vw, var(--fs-30));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--title-ls, normal);
  color: var(--color-red-deep);
}

.strengthFeat__body {
  padding: 32px;
}

.strengthFeat__text {
  font-size: var(--fs-13);
  line-height: 1.9;
}

/* 段落が続くときは 1 行ぶん空ける（＜検品＞＜微生物検査＞など） */
.strengthFeat__text + .strengthFeat__text {
  margin-top: 1.9em;
}

.strengthFeat__tableWrap {
  margin-top: 18px;
}

.strengthFeat__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  font-size: var(--fs-13);
}

.strengthFeat__table caption {
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-bottom: 0;
  text-align: left;
}

.strengthFeat__table th,
.strengthFeat__table td {
  padding: 5px 12px;
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

/* 品目名の列。地色なし・太字なしがデザイン */
.strengthFeat__table th {
  width: 17%;
  white-space: nowrap;
  font-weight: 400;
}

.strengthFeat__note {
  margin-top: 8px;
  font-size: var(--fs-12);
  color: #6b6258;
  text-align: left;
}

/* TAB（〜1024px）：ボックスの余白を縮小 */
@media (max-width: 1024px) {
  /* セクション間の余白は下側（merit / feat の padding-top）で持つ */
  .strengthLead { padding: 40px 40px 0; }
  .strengthMerit { padding: 40px 40px 0; }
  .strengthMerit__inner { padding: 40px 40px; }
  .strengthFeat { padding: 72px 32px 48px; }
}

/* SP（最小 375px）：ボックスを全幅に＋余白を縮小 */
@media (max-width: 767px) {
  .strengthLead,
  .strengthMerit__inner,
  .strengthFeat {
    border-radius: 0;
  }

  .strengthLead { padding: 28px 20px 0; }
  .strengthLead__img { margin: 24px auto 0; }
  .strengthLead__text {
    width: 100%;
    margin-top: 24px;
  }

  /* SP：白ボックスを全幅に（クリームの左右余白は無し） */
  .strengthMerit { padding: 32px 0 0; }
  .strengthMerit__inner { padding: 28px 20px; }
  .strengthMerit__list { margin-top: 28px; }
  .strengthMerit__item + .strengthMerit__item { margin-top: 28px; }

  .strengthFeat { padding: 52px 20px 32px; }
  .strengthFeat__list { margin-top: 24px; }

  .strengthFeat__item:nth-child(2) { --title-ls: -0.06em; }
  .strengthFeat__item:nth-child(3) { --title-ls: -0.04em; }
  .strengthFeat__item:nth-child(4) { --title-ls: -0.2em; }
  .strengthFeat__item:nth-child(6) { --title-ls: -0.14em; }
  .strengthFeat__item:nth-child(7) { --title-ls: -0.1em; }

  .strengthFeat__body { padding: 20px; }

}

/* page-asari — 商品詳細：素材調味だし あさり */

/* asariIntro — リード（2種の煮出し手法 × あさり写真） */
.asariIntro {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr minmax(0, 376px);
  gap: 24px 48px;
  align-items: center;
}

.asariIntro__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.06em;
}

.asariIntro__text {
  margin-top: 8px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

.asariIntro__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .asariIntro {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }
}

/* asariFeature — 旨味＋風味の図解 */
.asariFeature {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 52px;
}

/* asariRecipe — あさりを使ったレシピ紹介 */
.asariRecipe {
  margin-top: 92px;
}

.asariRecipe__list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.asariRecipe__link {
  display: block;
  transition: opacity 0.2s ease;
}

.asariRecipe__link:hover {
  opacity: 0.85;
}

.asariRecipe__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 89 / 100;
  object-fit: cover;
}

.asariRecipe__caption {
  margin-top: 8px;
  font-size: var(--fs-13);
  text-align: center;
}

@media (max-width: 1024px) {
  .asariRecipe__list {
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .asariRecipe {
    padding-inline: 20px;
  }

  .asariRecipe__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

/* page-katsuo — 商品詳細：本がつを */

/* katsuoMerit — だしパックを使うメリット（cream 角丸パネル） */
.katsuoMerit {
  margin-top: 56px;
  padding: 48px 44px;
  border-radius: 20px;
}

.katsuoMerit__head {
  text-align: center;
}

.katsuoMerit__sub {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-15), 1.35vw, var(--fs-20));
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.katsuoMerit__title {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-22), 2.6vw, var(--fs-38));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.katsuoMerit__list {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

.katsuoMerit__item {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
}

.katsuoMerit__itemHead {
  display: flex;
  align-items: stretch;
  background-color: var(--color-red-deep);
  color: var(--color-white);
}

.katsuoMerit__label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 6px 14px;
  border-right: 2px solid var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.katsuoMerit__itemTitle {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-17), 1.5vw, var(--fs-22));
  font-weight: 700;
  letter-spacing: 0.04em;
}

.katsuoMerit__text {
  flex: 1;
  padding: 16px 18px;
  background-color: var(--color-white);
  font-size: var(--fs-15);
  line-height: 1.4;
}

.katsuoMerit__em {
  color: var(--color-red-deep);
}

@media (max-width: 1024px) {
  .katsuoMerit {
    padding: 36px 28px;
  }

  .katsuoMerit__list {
    gap: 20px 16px;
  }
}

@media (max-width: 767px) {
  .katsuoMerit {
    padding: 28px 20px;
    border-radius: 0;
  }

  /* 375px でタイトルが語中改行しないよう字詰め */
  .katsuoMerit__title {
    letter-spacing: 0.02em;
    font-size: var(--fs-20);
  }

  .katsuoMerit__list {
    margin-top: 24px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* katsuoAbout — 一番売れている「本がつを」紹介 */
.katsuoAbout {
  margin-top: var(--space-section-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.katsuoAbout__img {
  flex-shrink: 0;
  width: min(100%, 195px);
  height: auto;
}

.katsuoAbout__lead {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 1.8vw, var(--fs-26));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

.katsuoAbout__name {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-30), 4.7vw, var(--fs-70));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

@media (max-width: 767px) {
  .katsuoAbout {
    flex-direction: column;
    gap: 24px;
    padding-inline: 20px;
    text-align: center;
  }
}

/* katsuoFeature — 和風かつおだしパック 5つの特徴 */
.katsuoFeature {
  margin-top: var(--space-section-md);
  padding-bottom: var(--space-section-sm);
  border-bottom: 1px solid var(--color-red-deep);
}

.katsuoFeature__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 40px;
  padding-block: 20px;
  border-top: 1px solid var(--color-red-deep);
  border-bottom: 1px solid var(--color-red-deep);
  font-family: var(--font-serif);
  color: var(--color-red-deep);
}

.katsuoFeature__lead {
  font-size: clamp(var(--fs-15), 1.5vw, var(--fs-22));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* 2行目「和風かつおだしパック」は1行目より大きい */
.katsuoFeature__leadStrong {
  font-size: clamp(var(--fs-18), 2.2vw, var(--fs-32));
}

.katsuoFeature__title {
  font-size: clamp(var(--fs-30), 3.7vw, var(--fs-54));
  font-weight: 700;
  letter-spacing: 0.1em;
}

.katsuoFeature__title em {
  font-style: normal;
  font-size: 1.25em;
}

.katsuoFeature__list {
  margin-top: 40px;
  padding-left: 10%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.katsuoFeature__item {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 1.8vw, var(--fs-26));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.katsuoFeature__label {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 999px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: var(--fs-15);
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .katsuoFeature {
    padding-inline: 20px;
  }

  .katsuoFeature__head {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .katsuoFeature__list {
    margin-top: 28px;
    padding-left: 0;
    gap: 18px;
  }

  .katsuoFeature__item {
    gap: 12px;
  }

  .katsuoFeature__label {
    font-size: var(--fs-13);
    padding: 4px 12px;
  }
}

/* katsuoProcess — フタバのだしパックができるまで（製造工程） */
.katsuoProcess {
  margin-top: var(--space-section-md);
}

.katsuoProcess__title {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-38));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-red-deep);
}

/* 帯＋工程はコンテンツ幅より狭い中央寄せ */
.katsuoProcess__block {
  max-width: 628px;
  margin-top: 48px;
  margin-inline: auto;
}

.katsuoProcess__steps {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.katsuoProcess__step {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px 24px;
  align-items: start;
}

/* ステップ間の区切り */
.katsuoProcess__step + .katsuoProcess__step::before {
  content: "";
  grid-column: 1 / -1;
  height: 15px;
  background-color: var(--color-red-deep);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2015'%3E%3Cpath%20d='M0%200h15L7.5%2015z'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2015'%3E%3Cpath%20d='M0%200h15L7.5%2015z'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top, left top 3px, right top 3px;
  mask-position: center top, left top 3px, right top 3px;
  -webkit-mask-size: 15px 15px, calc(50% - 25px) 1px, calc(50% - 25px) 1px;
  mask-size: 15px 15px, calc(50% - 25px) 1px, calc(50% - 25px) 1px;
}

.katsuoProcess__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-17), 1.8vw, var(--fs-20));
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-red-deep);
}

.katsuoProcess__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: var(--fs-18);
  line-height: 1;
}

.katsuoProcess__text {
  font-size: var(--fs-15);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .katsuoProcess__step {
    grid-template-columns: 170px 1fr;
  }
}

@media (max-width: 767px) {
  .katsuoProcess {
    padding-inline: 20px;
  }

  .katsuoProcess__block {
    margin-top: 36px;
  }

  .katsuoProcess__steps {
    margin-top: 24px;
  }

  .katsuoProcess__step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* katsuoSafety — ご安心ください！（パック材質｜角丸枠パネル） */
.katsuoSafety {
  margin-top: var(--space-section-md);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr minmax(0, 260px);
  gap: 32px 0;
  align-items: center;
  border: 2px solid var(--color-red-deep);
  border-radius: 24px;
  background-color: var(--color-white);
}

.katsuoSafety__title {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-26), 2.9vw, var(--fs-42));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

.katsuoSafety__sub {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 1.7vw, var(--fs-24));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

.katsuoSafety__body {
  position: relative;
  z-index: 1;
}

.katsuoSafety__text {
  margin-top: 20px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

.katsuoSafety__img {
  display: block;
  width: 380px;
  max-width: none;
  height: auto;
  margin-left: -92px;
  margin-right: -28px;
}

@media (max-width: 1024px) {
  .katsuoSafety {
    padding: 32px;
    gap: 24px 0;
    grid-template-columns: 1fr minmax(0, 260px);
  }

  .katsuoSafety__img {
    width: 300px;
    margin-left: -40px;
    margin-right: -16px;
  }
}

@media (max-width: 767px) {
  .katsuoSafety {
    grid-template-columns: 1fr;
    margin-inline: 20px;
    padding: 28px 20px;
  }

  .katsuoSafety__img {
    width: min(100%, 320px);
    margin-inline: auto;
  }
}

/* katsuoVoice — お客様の声（USER VOICE） */
.katsuoVoice {
  margin-top: var(--space-section-md);
}

.katsuoVoice__head {
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding: 16px 20px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-serif);
}

.katsuoVoice__title {
  font-size: clamp(var(--fs-22), 2.3vw, var(--fs-34));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.katsuoVoice__en {
  font-size: var(--fs-15);
  line-height: 1;
  letter-spacing: 0.3em;
}

.katsuoVoice__list {
  padding: 38px 48px 64px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  background-color: var(--color-cream);
}

.katsuoVoice__item {
  display: flex;
  align-items: center;
  gap: 46px;
}

/* 人物アイコン */
.katsuoVoice__item::before {
  content: "";
  flex-shrink: 0;
  width: 71px;
  height: 120px;
  background: url(../img/items/katsuo/voice.webp) no-repeat center / contain;
}

.katsuoVoice__body {
  position: relative;
  padding-left: 34px;
}

.katsuoVoice__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 100%;
  background-color: var(--color-red-deep);
  clip-path: polygon(
    11px 0, 13px 0,
    13px calc(50% - 13px),
    3px 50%,
    13px calc(50% + 13px),
    13px 100%, 11px 100%,
    11px calc(50% + 14px),
    0 50%,
    11px calc(50% - 14px)
  );
}

.katsuoVoice__name {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-16), 1.4vw, var(--fs-20));
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-red-deep);
}

.katsuoVoice__text {
  margin-top: 12px;
  font-size: var(--fs-15);
  line-height: 1.7;
}

@media (max-width: 767px) {
  .katsuoVoice__list {
    padding: 28px 20px 40px;
    gap: 48px;
  }

  .katsuoVoice__item {
    gap: 20px;
  }

  .katsuoVoice__item::before {
    width: 48px;
    height: 81px;
  }

  .katsuoVoice__body {
    padding-left: 28px;
  }
}

/* page-vegan — 商品詳細：ヴィーガン認証取得の野菜だし */

/* ヴィーガン関連のブランドカラー */
:root {
  --color-green: #004f08;
}

/* veganAbout — 「ヴィーガン認証取得の野菜だし」とは？ */
.veganAbout {
  margin-top: 40px;
}

/* 帯見出し（緑）はヴィーガンページのみ */
.veganAbout .c-barHead,
.veganRecipe .c-barHead {
  padding-block: 8px;
  font-size: clamp(var(--fs-20), 2.25vw, var(--fs-34));
  line-height: 1.2;
}

.veganAbout__text {
  margin-top: 16px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

@media (max-width: 767px) {
  .veganAbout__text {
    margin-top: 20px;
    padding-inline: 20px;
  }
}

/* veganCert — 世界初！液体調味だしでヴィーガン認証を取得 */
.veganCert {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 40px;
  align-items: center;
}

.veganCert__title {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 1.8vw, var(--fs-22));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-green);
}

.veganCert__text {
  margin-top: 12px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

.veganCert__badge {
  display: block;
  width: 227px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .veganCert {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }

  .veganCert__badge {
    margin-inline: auto;
  }
}

/* veganProject — ベジプロジェクトジャパン バナー */
.veganProject {
  display: block;
  margin-top: 24px;
  transition: opacity 0.2s ease;
}

.veganProject:hover {
  opacity: 0.85;
}

.veganProject img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .veganProject {
    margin-inline: 20px;
  }
}

/* veganRecipe — ヴィーガン野菜だしを使用したレシピ */
.veganRecipe {
  margin-top: 108px;
}

/* 見出しの帯は文字幅ぶんのピル */
.veganRecipe .c-barHead--round {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 36px;
}

.veganRecipe__group {
  margin-top: 32px;
}

.veganRecipe__group:first-of-type {
  margin-top: 28px;
}

.veganRecipe__category {
  max-width: 672px;
  margin-inline: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-red-deep);
}

.veganRecipe__list {
  max-width: 672px;
  margin-top: 20px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 21px;
}

.veganRecipe__link {
  display: block;
  transition: opacity 0.2s ease;
}

.veganRecipe__link:hover {
  opacity: 0.85;
}

.veganRecipe__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.veganRecipe__caption {
  margin-top: 8px;
  font-size: var(--fs-13);
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 1024px) {
  .veganRecipe__list {
    gap: 20px 14px;
  }
}

@media (max-width: 767px) {
  .veganRecipe {
    padding-inline: 20px;
  }

  .veganRecipe__group {
    margin-top: 32px;
  }

  .veganRecipe__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

/* veganMarket — 拡大するインバウンド市場（cream パネル + グラフ） */
.veganMarket {
  margin-top: 136px;
  padding: 44px 40px;
  text-align: center;
}

.veganMarket__title {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2.2vw, var(--fs-24));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

@media (max-width: 767px) {
  .veganMarket__title {
    font-size: var(--fs-19);
  }
}

.veganMarket__text {
  margin-top: 12px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

.veganMarket__graph {
  display: block;
  width: 100%;
  max-width: 670px;
  height: auto;
  margin: 48px auto 0;
}

@media (max-width: 767px) {
  .veganMarket__graph {
    max-width: 528px;
    margin-top: 24px;
  }
}

@media (max-width: 1024px) {
  .veganMarket {
    padding: 36px 28px;
  }
}

@media (max-width: 767px) {
  .veganMarket {
    padding: 28px 20px;
  }

  .veganMarket__graph {
    margin-top: 24px;
  }
}

/* veganLinks — 一般向けだしパックのブランドバナー */
.veganLinks {
  margin-top: 132px;
}

.veganLinks__lead {
  font-size: var(--fs-14);
}

.veganLinks__item {
  margin-top: 36px;
}

.veganLinks__item:first-of-type {
  margin-top: 28px;
}

.veganLinks__label {
  font-size: var(--fs-14);
}

.veganLinks__bnr {
  display: block;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}

.veganLinks__bnr:hover {
  opacity: 0.85;
}

.veganLinks__bnr img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
}

.veganLinks__note {
  margin-top: 4px;
  font-size: var(--fs-12);
  color: #6b6258;
}

@media (max-width: 767px) {
  .veganLinks {
    padding-inline: 20px;
  }

  .veganLinks__item {
    margin-top: 24px;
  }
}

/* セクション間（TAB / SP は共通トークンに戻す） */
.page-vegan .c-itemInfo {
  margin-top: 136px;
}

@media (max-width: 1024px) {
  .page-vegan .c-itemInfo,
  .veganRecipe,
  .veganMarket,
  .veganLinks {
    margin-top: var(--space-section-md);
  }
}

/* page-oem — PB・OEMのご案内 */

/* oemTags — 取り扱い製品カテゴリ（だしパック製品 ほか） */
.oemTags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.oemTags__item {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 21px;
  background-color: var(--color-rose);
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.45vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-red-deep);
}

/* 5 列では収まらなくなる幅から 3 列 → 2 列と段階的に落とす */
@media (max-width: 1100px) {
  .oemTags__item {
    flex: 0 1 calc((100% - 26px) / 3);
  }
}

@media (max-width: 1024px) {
  .oemTags {
    gap: 8px;
  }

  .oemTags__item {
    flex-basis: calc((100% - 16px) / 3);
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .oemTags {
    padding-inline: 20px;
  }

  .oemTags__item {
    flex-basis: calc((100% - 8px) / 2);
    font-size: 14px;
  }
}

/* oemStop — 新規案件の受付停止のお知らせ */
.oemStop {
  margin-top: 24px;
  padding: 10px 20px;
  background-color: var(--color-alert);
  font-size: var(--fs-17);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .oemStop {
    margin-inline: 20px;
  }
}

.oemNote {
  margin-top: 24px;
  font-size: var(--fs-15);
  line-height: 1.6;
}

.oemNote__title {
  font-weight: 400;
}

@media (max-width: 767px) {
  .oemNote {
    padding-inline: 20px;
  }
}

.oemTarget {
  margin-top: var(--space-section-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 34px;
  align-items: start;
}

.oemTarget__title {
  padding-block: 7px;
  border-block: 2px solid var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-17), 1.8vw, var(--fs-22));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--color-red-deep);
}

.oemTarget__list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.oemTarget__item {
  position: relative;
  padding-left: 25px;
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.oemTarget__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.28em;
  width: 17px;
  height: 17px;
  border: 1px solid var(--color-red-deep);
}

.oemTarget__img {
  display: block;
  width: 304px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 960px) {
  .oemTarget {
    grid-template-columns: 1fr;
  }

  .oemTarget__img {
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .oemTarget {
    padding-inline: 20px;
  }
}

.oemCase {
  margin-top: 88px;
}

.oemCase__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-red-deep);
  border-top: 0;
}

.oemCase__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px 26px;
}

.oemCase__item:nth-child(odd) {
  border-right: 1px solid var(--color-red-deep);
}

.oemCase__item:nth-child(n + 3) {
  border-top: 1px solid var(--color-red-deep);
}

.oemCase__title {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-16), 1.7vw, var(--fs-19));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.oemCase__text {
  font-size: var(--fs-13);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .oemCase {
    padding-inline: 20px;
  }

  .oemCase__list {
    grid-template-columns: 1fr;
  }

  .oemCase__item {
    padding: 16px 18px;
  }

  .oemCase__item:nth-child(odd) {
    border-right: 0;
  }

  .oemCase__item:nth-child(n + 2) {
    border-top: 1px solid var(--color-red-deep);
  }
}

.oemService {
  margin-top: 88px;
}

.oemService__cards {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 21px;
}

.oemService__card {
  padding: 24px 38px 30px;
  border-radius: 10px;
  background-color: var(--color-cream);
}

.oemService__cardTitle {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2vw, var(--fs-25));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

.oemService__cardSub {
  margin-top: 0;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-15), 1.5vw, var(--fs-17));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

.oemService__cardText {
  margin-top: 7px;
  font-size: var(--fs-13);
  line-height: 1.6;
}

/* 容量・容器 / ロット の 2 カラム詳細 */
.oemService__detail {
  margin-top: var(--space-section-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 72px;
  align-items: start;
}

.oemService__subTitle {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-16), 1.7vw, var(--fs-21));
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-red-deep);
}

.oemService__specs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 0;
  font-size: var(--fs-14);
  line-height: 1.7;
}

.oemService__specs dt {
  font-weight: 400;
}

.oemService__note {
  font-size: var(--fs-12);
  line-height: 1.8;
}

.oemService__containerLabel {
  margin-top: 12px;
  font-size: var(--fs-14);
}

.oemService__containers {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.oemService__container {
  text-align: center;
}

.oemService__container img {
  display: block;
  margin-inline: auto;
}

.oemService__containerName {
  margin-top: 8px;
  font-size: var(--fs-11);
}

@media (max-width: 767px) {
  .oemService {
    padding-inline: 20px;
  }

  .oemService__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .oemService__card {
    padding: 24px 20px;
  }

  .oemService__detail {
    grid-template-columns: 1fr;
  }

  .oemService__containers {
    gap: 20px;
  }
}

/* oemContact — まずはお問い合わせください（試作お申込みボタン） */
.oemContact {
  margin-top: var(--space-section-md);
}

/* ＼ テキスト ／ の装飾スラッシュ付きリード */
.oemContact__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-17), 1.9vw, var(--fs-22));
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-red-deep);
}

.oemContact__lead::before,
.oemContact__lead::after {
  content: "";
  width: 1.5px;
  height: 26px;
  background-color: var(--color-red-deep);
}

.oemContact__lead::before { transform: rotate(-45deg); }
.oemContact__lead::after { transform: rotate(45deg); }

.oemContact__btn {
  position: relative;
  display: block;
  margin-top: 12px;
  padding: 32px 40px;
  border-radius: 12px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: clamp(var(--fs-20), 2.2vw, var(--fs-28));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  transition: opacity 0.2s ease;
}

.oemContact__btn::after {
  content: "＞";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  line-height: 1;
}

.oemContact__btn:hover {
  opacity: 0.85;
}

@media (max-width: 767px) {
  .oemContact {
    padding-inline: 20px;
  }

  .oemContact__btn {
    padding: 22px 34px;
  }
}

/* 会員登録ページ */

/* 会員登録ページのカラー変数 */
:root {
  --color-yellow: #f3b139;      /* CTA ボタンのホバー背景 */
  --color-yellow-pale: #f5d67b; /* 6%OFF バッジ */
  --color-pink-pale: #fde5e1;   /* 価格比較「お得」帯 */
}

/* heroNav を出さない分（余白 40px ＋ 帯 40px）を上余白に足す */
.page-member .l-singleColumn {
  margin-top: 152px;
}

@media (max-width: 767px) {
  .page-member .l-singleColumn {
    margin-top: 44px;
  }
}

/* memberHero — ページタイトルバンド */
.memberHero img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .memberHero {
    margin-inline: -40px;
  }
}

/* memberMerit — だし.com会員特典（リボン＋3 特典） */
.memberMerit {
  margin-top: 52px;
}

.memberMerit__ribbon {
  display: flex;
  justify-content: center;
}

.memberMerit__ribbon img {
  width: min(78%, 906px);
  height: auto;
}

.memberMerit__list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.memberMerit__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-inline: 16px;
  border-left: 2px solid var(--color-red-deep);
}

.memberMerit__item:last-child {
  border-right: 2px solid var(--color-red-deep);
}

/* タイトルは 3 段階（小: 基本 / 中: 1000円分の・5％以上の / 大: 割引価格・送料無料） */
.memberMerit__title {
  font-size: clamp(16px, 1.8vw, 28px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-red-deep);
}

/* 「以上の」など、数字に添える中サイズ */
.memberMerit__mid {
  font-size: clamp(18px, 2.16vw, 34px);
}

.memberMerit__figure {
  font-size: clamp(24px, 3.04vw, 48px);
}

.memberMerit__large {
  font-size: clamp(26px, 3.4vw, 54px);
}

/* 1 つ目の特典「1000円分の」だけ一回り小さい */
.memberMerit__item:first-child .memberMerit__large {
  font-size: clamp(24px, 3.1vw, 48px);
}

.memberMerit__img {
  width: clamp(140px, 19vw, 224px);
  height: auto;
  margin-top: auto;
}

.memberMerit__img--off {
  width: clamp(180px, 25vw, 291px);
  margin-top: 32px;
}

@media (max-width: 767px) {
  .memberMerit__list {
    margin-top: 28px;
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .memberMerit__item {
    gap: 16px;
    padding-inline: 0;
    padding-bottom: 32px;
    border-left: 0;
    border-bottom: 2px solid var(--color-red-deep);
  }

  .memberMerit__item:last-child {
    border-right: 0;
  }
}

/* memberCta — 会員登録ボタン＋ログイン導線 */
.memberCta {
  margin-top: clamp(60px, 10.4vw, 150px);
}

.memberCta__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(84%, 980px);
  margin-inline: auto;
  padding: clamp(32px, 4.2vw, 60px) 20px;
  border-radius: clamp(22px, 2.8vw, 40px);
  background-color: var(--color-red-deep);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  color: var(--color-white);
  font-size: clamp(20px, 3.4vw, 54px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 内側の白フチ（擬似要素｜ホバー時も白のまま） */
.memberCta__btn::before,
.memberCta__btn::after {
  content: "";
  position: absolute;
  left: clamp(16px, 2.8vw, 44px);
  right: clamp(16px, 2.8vw, 44px);
  height: clamp(12px, 1.8vw, 26px);
  pointer-events: none;
}

.memberCta__btn::before {
  top: clamp(14px, 2.1vw, 32px);
  border: 1px solid var(--color-white);
  border-bottom: none;
  border-radius: clamp(12px, 1.8vw, 26px) clamp(12px, 1.8vw, 26px) 0 0;
}

.memberCta__btn::after {
  bottom: clamp(14px, 2.1vw, 32px);
  border: 1px solid var(--color-white);
  border-top: none;
  border-radius: 0 0 clamp(12px, 1.8vw, 26px) clamp(12px, 1.8vw, 26px);
}

.memberCta__btn:hover {
  background-color: var(--color-yellow);
  color: var(--color-red-deep);
}

.memberCta__click {
  font-size: clamp(11px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.memberCta__login {
  margin-top: clamp(24px, 3.5vw, 50px);
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-red-deep);
}

.memberCta__login a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.memberCta__login a:hover {
  text-decoration: none;
}

@media (max-width: 767px) {
  .memberCta__btn {
    width: 100%;
    font-size: 17px;
  }

  .memberCta__login {
    margin-top: 20px;
  }
}

/* c-waveBand — 波形エッジのクリーム帯（memberPoint / memberPrice） */
.c-waveBand {
  position: relative;
  z-index: 1; /* memberDots のドット地より上に波を描画する */
  margin-top: var(--space-section-md);
}

.c-waveBand::before,
.c-waveBand::after {
  content: "";
  display: block;
  aspect-ratio: 2320 / 200;
  background-size: cover;
  background-position: center;
}

.c-waveBand::before {
  background-image: url(../img/member/wave_top.webp);
}

.c-waveBand::after {
  background-image: url(../img/member/wave_bottom.webp);
}

.c-waveBand__inner {
  padding: clamp(24px, 4vw, 56px) clamp(20px, 6vw, 80px);
  background-color: var(--color-cream);
}

@media (max-width: 767px) {
  .c-waveBand {
    margin-inline: -40px;
  }
}

/* memberPoint — ちょうどいい！だしドットコム！（3 カード） */
/* CTA（ログイン行）→ 波帯の間隔を狭める */
.memberPoint {
  margin-top: clamp(32px, 4.5vw, 65px);
}

/* 波帯の内側余白はこのセクションのみ個別指定 */
.memberPoint__inner {
  padding: clamp(24px, 2.8vw, 40px) clamp(20px, 4vw, 56px) clamp(12px, 1.4vw, 16px);
}

.memberPoint__head {
  width: fit-content;
  margin-inline: auto;
  padding: 8px clamp(40px, 6vw, 88px);
  border-radius: 999px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: clamp(18px, 2.42vw, 36px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
}

.memberPoint__list {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0 clamp(16px, 2.6vw, 31px);
}

.memberPoint__card {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  padding: clamp(28px, 4vw, 57px) 22px clamp(20px, 2.2vw, 30px);
  border: 2px solid var(--color-red-deep);
  border-radius: 24px;
  background-color: var(--color-white);
  color: var(--color-red-deep);
}

/* タイトル＋アイコン。アイコンは残余スペースの上下中央に置く */
.memberPoint__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.memberPoint__title {
  margin-bottom: 20px;
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
}

.memberPoint__img {
  margin-block: auto;
  max-width: 100%;
  height: auto;
}

.memberPoint__text {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 1024px) {
  .memberPoint__card {
    padding-inline: 10px;
  }
}

@media (max-width: 767px) {
  .memberPoint__head {
    padding-inline: 20px;
    font-size: 15px;
  }

  .memberPoint__list {
    margin-top: 28px;
    grid-template-columns: 1fr;
  }

  /* 1 カラム時は subgrid の行間ではなくカード間マージンで間隔を取る */
  .memberPoint__card + .memberPoint__card {
    margin-top: 20px;
  }
}

/* memberDots — ドット柄背景（memberOtoku＋memberFree を包む） */
.memberDots {
  --wave-h: 8.6207%;
  margin-top: calc(-1 * var(--wave-h));
  padding-top: calc(var(--wave-h) + var(--space-section-md));
  padding-bottom: var(--space-section-md);
  /* ローズの小さなドットを千鳥配置（横30px・縦45px周期、半周期オフセット） */
  background-image:
    radial-gradient(circle, var(--color-rose) 2.5px, transparent 3px),
    radial-gradient(circle, var(--color-rose) 2.5px, transparent 3px);
  background-size: 30px 45px;
  background-position: 0 0, 15px 22.5px;
}

@media (max-width: 767px) {
  .memberDots {
    margin-inline: -40px;
    margin-top: calc(-1 * (var(--wave-h) + 6.9px));
    padding: calc(var(--wave-h) + 6.9px + var(--space-section-md)) 20px var(--space-section-md);
  }
}

/* memberOtoku — 新規会員登録で 7 つのお得（カードグリッド） */

.memberOtoku__head {
  /* 見出し幅にシュリンクさせて中央寄せ。吹き出しはタイトルの左端に揃える */
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(24px, 3.5vw, 54px);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-red-deep);
}

/* 「さらに！」吹き出し（しっぽは擬似要素） */
.memberOtoku__balloon {
  position: relative;
  padding: 17px 43px;
  border-radius: 999px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: clamp(16px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.1em;
}

/* しっぽは右下に向ける（左辺が斜め・右辺が垂直） */
.memberOtoku__balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  border-top: 18px solid var(--color-red-deep);
  border-left: 22px solid transparent;
}

.memberOtoku__list {
  max-width: 960px; /* カードグリッドはコンテンツ幅より狭い */
  margin-top: 36px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 25px;
}

.memberOtoku__card {
  position: relative;
  /* 左列＝テキスト / 右列＝アイコン。タイトルは既定で全幅 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 14px 8px;
  padding: clamp(28px, 3.5vw, 50px) clamp(24px, 2vw, 28px) clamp(28px, 3.5vw, 50px) clamp(24px, 3.4vw, 48px);
  /* 枠線は左上 4px・右下 7px の非対称。差分の 3px を box-shadow で表現 */
  border: 4px solid var(--color-red-deep);
  border-radius: 20px;
  box-shadow: 3px 3px 0 var(--color-red-deep);
  background-color: var(--color-cream);
  color: var(--color-red-deep);
  /* 四隅のビス（⌀16px・フチから中心まで 26px｜radial-gradient で描画） */
  background-image:
    radial-gradient(circle, var(--color-red-deep) 7.5px, transparent 8px),
    radial-gradient(circle, var(--color-red-deep) 7.5px, transparent 8px),
    radial-gradient(circle, var(--color-red-deep) 7.5px, transparent 8px),
    radial-gradient(circle, var(--color-red-deep) 7.5px, transparent 8px);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position:
    top 14px left 14px,
    top 14px right 14px,
    bottom 14px left 14px,
    bottom 14px right 14px;
}

/* 横長カード（ポイントが貯まる）：本文左・図版右 */
.memberOtoku__card--wide {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* フォントサイズの変更で崩れないように調整　*/
.memberOtoku__title {
  grid-column: 1 / -1;
  font-size: clamp(26px, 3.8vw, 54px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
}

.memberOtoku__title em {
  font-style: normal;
}

.memberOtoku__titleSub {
  display: block;
  font-size: clamp(14px, 1.6vw, 22px);
}

.memberOtoku__titleMid {
  display: block;
  margin-top: 0.5em;
  line-height: 1.2;
  font-size: clamp(18px, 2.1vw, 30px);
}

.memberOtoku__titleMid--large {
  margin-top: 0;
  line-height: inherit;
  font-size: 0.75em;
}

.memberOtoku__text {
  grid-column: 1;
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.9;
}

.memberOtoku__text--note {
  font-size: 13px;
}

.memberOtoku__icon {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  max-width: clamp(96px, 13vw, 185px);
  height: auto;
}

/* アイコンがタイトル横に付くカード（GMO 掛け払い・お得情報のお届け） */
.memberOtoku__card--iconTop .memberOtoku__title {
  grid-column: 1;
}

.memberOtoku__card--iconTop .memberOtoku__icon {
  grid-row: 1;
}

.memberOtoku__card--iconTop .memberOtoku__text {
  grid-column: 1 / -1;
}

/* 1000pt カード：コインはカード右下 */
.memberOtoku__card.memberOtoku__card--point {
  display: block;
  padding-right: clamp(100px, 26%, 130px);
}

.memberOtoku__card--point .memberOtoku__icon--coins {
  position: absolute;
  right: clamp(14px, 1.6vw, 20px);
  bottom: 18px;
  max-width: min(42%, 190px);
}

/* 図版（コイン ▶ がま口） */
.memberOtoku__fig {
  width: clamp(240px, 38%, 350px);
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .memberOtoku__list {
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .memberOtoku__head {
    font-size: 22px;
  }

  /* SP はカード幅を 300px に抑えて中央寄せ */
  .memberOtoku__list {
    max-width: 300px;
    margin-top: 28px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .memberOtoku__title {
    font-size: 22px; 
  }

  .memberOtoku__card--point .memberOtoku__icon--coins {
    max-width: min(36%, 120px);
    max-height: calc(100% - 30px);
  }

  .memberOtoku__card--wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .memberOtoku__fig {
    align-self: center;
    width: min(100%, 300px);
  }
}

/* memberFree — 今なら！新規会員登録で送料無料 */
.memberFree {
  margin-top: var(--space-section-md);
}

.memberFree__card {
  max-width: 960px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px clamp(20px, 2.4vw, 35px);
  padding: clamp(24px, 3vw, 42px) clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 34px) clamp(24px, 3.3vw, 47px);
  border: 4px solid var(--color-red-deep);
  border-radius: 28px;
  background-color: var(--color-cream);
  color: var(--color-red-deep);
}

.memberFree__cond {
  font-size: clamp(20px, 2.7vw, 38px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
}

.memberFree__now {
  display: block;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 12px;
  padding: 6px 34px;
  border-radius: 999px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: clamp(15px, 2.1vw, 30px);
  letter-spacing: 0.1em;
}

.memberFree__main {
  font-size: clamp(28px, 4.8vw, 70px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.memberFree__note {
  grid-column: 1 / -1;
  font-size: clamp(12px, 1.4vw, 19px);
  font-weight: 700;
  text-align: right;
}

@media (max-width: 767px) {
  .memberFree__card {
    max-width: 300px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }

  .memberFree__main {
    text-align: center;
  }

  .memberFree__note {
    text-align: center;
  }
}

.memberPrice__head {
  font-size: clamp(24px, 4.46vw, 70px);
  font-weight: 900;
  line-height: 1.53;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-red-deep);
}

.memberPrice__lead {
  margin-top: 12px;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  text-align: center;
  color: var(--color-red-deep);
}

.memberPrice__table {
  margin-top: 36px;
  background-color: var(--color-white);
  color: var(--color-red-deep);
}

.memberPrice__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.memberPrice__cell {
  --dot-left: none;
  --dot-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(16px, 2.4vw, 32px) clamp(8px, 1.6vw, 20px);
  background-image: var(--dot-left), var(--dot-top);
  background-repeat: no-repeat, no-repeat;
  background-size: 2px 100%, 100% 2px;
  background-position: left top, left top;
}

.memberPrice__cell + .memberPrice__cell {
  --dot-left: repeating-linear-gradient(to bottom, var(--color-red-deep) 0 2px, transparent 2px 17px);
}

.memberPrice__img {
  width: clamp(120px, 16vw, 222px);
  height: auto;
}

.memberPrice__name {
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}

.memberPrice__spec {
  display: block;
  font-size: clamp(12px, 1.3vw, 16px);
}

.memberPrice__label {
  margin-top: auto;
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: 900;
}

.memberPrice__price {
  font-size: clamp(22px, 2.7vw, 34px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.memberPrice__price span {
  font-size: 0.65em;
}

.memberPrice__price--member {
  font-size: clamp(26px, 3.4vw, 46px);
}

/* 「会員登録すると、こんなにお得！」ピル（左右に罫線） */
.memberPrice__pill {
  display: flex;
  align-items: center;
  padding-block: 8px;
}

.memberPrice__pill::before,
.memberPrice__pill::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: var(--color-red-deep);
}

.memberPrice__pill span {
  padding: 9px clamp(40px, 7.6vw, 120px);
  border-radius: 999px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: clamp(15px, 2.1vw, 32px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
}

.memberPrice__off {
  width: fit-content;
  padding: 4px clamp(18px, 3vw, 40px);
  border-radius: 999px;
  background-color: var(--color-yellow-pale);
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.memberPrice__row--gain .memberPrice__cell {
  --dot-top: repeating-linear-gradient(to right, var(--color-red-deep) 0 2px, transparent 2px 17px);
  gap: 4px;
  background-color: var(--color-pink-pale);
}

.memberPrice__unit {
  font-size: clamp(13px, 1.5vw, 19px);
  font-weight: 900;
}

.memberPrice__gain {
  font-size: clamp(16px, 2vw, 25px);
  font-weight: 900;
  line-height: 1.3;
}

.memberPrice__gain em {
  font-size: clamp(24px, 3.2vw, 42px);
  font-style: normal;
}

.memberPrice__caption {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--color-red-deep);
}

@media (max-width: 767px) {
  .memberPrice__table {
    margin-top: 24px;
  }

  .memberPrice__cell {
    padding: 14px 6px;
  }

  .memberPrice__name {
    font-size: 13px;
  }

  .memberPrice__spec {
    font-size: 10px;
  }

  .memberPrice__label {
    font-size: 13px;
  }

  .memberPrice__price {
    font-size: 16px;
  }

  .memberPrice__price--member {
    font-size: 18px;
  }

  .memberPrice__pill span {
    padding-inline: 16px;
    font-size: 13px;
  }

  .memberPrice__off {
    padding-inline: 12px;
    font-size: 12px;
  }

  .memberPrice__unit {
    font-size: 12px;
  }

  .memberPrice__gain {
    font-size: 14px;
  }

  .memberPrice__gain em {
    font-size: 20px;
  }

  .memberPrice__caption {
    margin-top: 16px;
  }
}

/* page-ramendashi — ラーメンスープにおすすめのだし特集 */

/* ramenLead — ヒーロー下のリード文 */
.ramenLead {
  margin-top: 16px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

@media (max-width: 767px) {
  .ramenLead {
    padding-inline: 20px;
  }
}

/* ramenNav — 素材別アンカーナビ（ローズ地・6 分割の帯） */
.ramenNav {
  margin-top: 28px;
}

.ramenNav__question {
  font-size: var(--fs-14);
}

.ramenNav__list {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--color-red-deep);
}

.ramenNav__list li + li {
  border-left: 1px solid var(--color-red-deep);
}

.ramenNav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 9px 4px;
  background-color: var(--color-rose);
  color: var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-15), 1.5vw, var(--fs-20));
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: opacity 0.2s ease;
}

.ramenNav__link:hover {
  opacity: 0.7;
}

.ramenNav__note {
  margin-top: 8px;
  font-size: var(--fs-14);
  font-weight: 700;
}

@media (max-width: 767px) {
  .ramenNav {
    padding-inline: 20px;
  }

  .ramenNav__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .ramenNav__list li:nth-child(n + 4) {
    border-top: 1px solid var(--color-red-deep);
  }

  .ramenNav__list li:nth-child(4) {
    border-left: none;
  }
}

/* ramenCat — 素材別カテゴリ（見出し／売れ筋／説明／商品一覧） */
.ramenCat {
  margin-top: 88px;
  scroll-margin-top: 24px;
}

.ramenCat__title {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-22), 2.6vw, var(--fs-28));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: var(--color-red-deep);
}

.ramenCat__lead {
  margin-top: 14px;
  font-size: var(--fs-14);
}

.ramenCat__text {
  margin-top: 24px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

.ramenCat__note {
  margin-top: 16px;
  font-size: var(--fs-12);
  text-align: right;
}

@media (max-width: 767px) {
  .ramenCat {
    padding-inline: 20px;
  }
}

/* ramenRank — 売れ筋ランキング（クリーム地の 3 ボックス） */
.ramenRank {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
}

.ramenRank__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
  background-color: var(--color-cream);
  font-family: var(--font-serif);
  font-weight: 700;
  text-align: center;
  color: var(--color-red-deep);
}

.ramenRank__label {
  font-size: var(--fs-13);
  letter-spacing: 0.1em;
}

/* 人気 No.1 のみ王冠アイコン（mask で描画） */
.ramenRank__label--first::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url(../img/common/icon_crown.svg) no-repeat center / contain;
  mask: url(../img/common/icon_crown.svg) no-repeat center / contain;
}

.ramenRank__name {
  font-size: clamp(var(--fs-16), 1.7vw, var(--fs-18));
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* 「天然だしの粉シリーズ 鰹(粉末)」など、枠内に 1 行で収まらない長い商品名 */
.ramenRank__name--small {
  font-size: clamp(var(--fs-11), 1.1vw, var(--fs-15));
  letter-spacing: -0.05em;
}

@media (max-width: 1024px) {
  .ramenRank {
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .ramenRank {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ramenRank__item {
    padding: 12px 10px;
  }

  .ramenRank__name--small {
    font-size: clamp(var(--fs-16), 1.7vw, var(--fs-20));
    letter-spacing: 0.06em;
  }
}

/* ramenItems — 商品一覧（3 列。--col2 は 2 列の横長タイプ） */
.ramenItems {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 20px;
}

.ramenItems--col2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 72px;
}

.ramenItems__media {
  display: block;
  background-color: var(--color-white);
  transition: opacity 0.2s ease;
}

.ramenItems__media img {
  width: 100%;
  height: auto;
}

.ramenItems__media:hover {
  opacity: 0.7;
}

.ramenItems--col2 .ramenItems__media {
  max-width: 240px;
}

.ramenItems__name {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-16), 1.7vw, var(--fs-20));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.ramenItems__text {
  margin-top: 12px;
  font-size: var(--fs-14);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .ramenItems {
    gap: 36px 16px;
  }

  .ramenItems--col2 {
    gap: 36px 28px;
  }
}

@media (max-width: 767px) {
  .ramenItems,
  .ramenItems--col2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ramenItems__media,
  .ramenItems--col2 .ramenItems__media {
    width: min(100%, 280px);
    max-width: none;
    margin-inline: auto;
  }
}

/* ramenTopping — トッピング（海藻）商品への誘導 */
.ramenTopping {
  margin-top: 28px;
}

.ramenTopping__text {
  font-size: var(--fs-14);
  font-weight: 700;
}

.ramenTopping__link {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  padding-left: 20px;
  font-size: var(--fs-14);
  font-weight: 700;
}

/* ▶ マーカー（擬似要素） */
.ramenTopping__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.ramenTopping__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 767px) {
  .ramenTopping {
    padding-inline: 20px;
  }
}

/* ramenCta — サンプル・お見積 CTA（ボタン本体は common.css の c-ctaBtn） */
.ramenCta {
  margin-top: 64px;
}

@media (max-width: 767px) {
  .ramenCta {
    padding-inline: 20px;
  }
}

/* page-sample — おすすめサンプルお申し込みフォーム */
:root {
  --color-red-bright: #c81010; /* サンプル申し込みの赤文字（注意書き） */
  --color-marker: #f8ec00;     /* 蛍光マーカー（強調テキストの下線） */
}

/* sampleHead — ページタイトル（メインカラム先頭の見出し） */
.sampleHead {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2.4vw, var(--fs-28));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .sampleHead {
    padding-inline: 20px;
  }
}

/* sampleMain — 「おすすめサンプルを無料配送致します！」ビジュアル */
.sampleMain {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 18px;
}

.sampleItems {
  margin-top: 28px;
}

.sampleItems__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 157px;
  min-height: 210px;
  border: 4px solid var(--color-red-deep);
  border-bottom-width: 0;
  background-color: var(--color-white);
}

.sampleItems__item:last-child {
  border-bottom-width: 4px;
}

.sampleItems__body {
  align-self: center;
  padding: 28px 8px 28px 44px;
}

.sampleItems__name {
  font-family: var(--font-serif);
  /* ブラウザのフォントサイズ設定には追従させるが、手動改行（u-br-pc）が崩れすぎない
     よう設計値の 1.25 倍で頭打ちにする（本文 .sampleItems__text も同じ考え方） */
  font-size: min(clamp(var(--fs-22), 2.9vw, var(--fs-34)), 42px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

.sampleItems__text {
  margin-top: 16px;
  /* 右に重ねている丸バッジ・人気 No.1 ラベルの張り出し分（実寸 104px）を空けておく。
     rem なので、ブラウザのフォントサイズ設定を大きくしても文字が下に潜り込まない */
  padding-right: 6rem;
  font-family: var(--font-serif);
  font-size: min(var(--fs-16), 20px);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

/* 蛍光マーカー（文字の下 4 割に重ねる） */
.sampleItems__marker {
  background: linear-gradient(transparent 62%, var(--color-marker) 62%);
  color: inherit;
}

/* 人気 No.1（あさりのみ） */
.sampleItems__rank {
  position: absolute;
  z-index: 1; /* 丸バッジより手前 */
  top: 25px;
  right: 184px;
  width: 77px;
  height: auto;
}

/* 丸バッジ（液体濃縮だし／旨味強化だしパック）。カード下端から 16px の下寄せ */
.sampleItems__badge {
  position: absolute;
  bottom: 16px;
  right: 163px;
  display: grid;
  place-content: center;
  /* ブラウザのフォントサイズ設定が大きいときは、円ごと広がって文字を収める（98px が下限） */
  box-sizing: border-box;
  width: max-content;
  min-width: 98px;
  height: auto;
  min-height: 98px;
  aspect-ratio: 1;
  padding: 0.4em;
  border-radius: 50%;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
}

.sampleItems__photo {
  display: block;
  align-self: center;
  width: 100%;
  /* 縦横比のまま表示する。カードが縦に伸びても写真は切り取らない
     （ブラウザのフォントサイズ設定が大きいときに上下が切れるため object-fit は使わない） */
  height: auto;
}

@media (max-width: 1240px) {
  .sampleItems__item {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sampleItems__body {
    align-self: start;
    padding: 24px 20px 0;
  }

  /* 1 カラムになり、バッジは写真の上に乗るので張り出し分の余白は不要 */
  .sampleItems__text {
    padding-right: 0;
  }

  /* 写真は中央よりやや右に置き、その左に丸バッジを並べる */
  .sampleItems__photo {
    grid-column: 1;
    justify-self: center;
    width: 157px;
    margin-top: 12px;
    translate: 40px 0;
  }

  /* 写真の左端（カード中央 -38.5px）より手前で止める。right 基準なので、
     フォントサイズ設定で円が大きくなっても左へ伸びるだけで写真に重ならない */
  .sampleItems__badge {
    right: calc(50% + 42px);
    bottom: 60px;
    min-width: 86px;
    min-height: 86px;
    font-size: var(--fs-14);
  }

  .sampleItems__rank {
    top: auto;
    right: auto;
    bottom: 160px;
    left: calc(50% - 143px);
    width: 65px;
  }
}

@media (max-width: 767px) {
  .sampleItems {
    padding-inline: 20px;
  }

  .sampleItems__text {
    margin-top: 12px;
    font-size: min(var(--fs-15), 19px);
  }
}

.sampleNote {
  margin-top: 35px;
  text-align: center;
  color: var(--color-red-bright);
}

.sampleNote__title {
  font-size: clamp(var(--fs-20), 2.6vw, var(--fs-30));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* 注意書きはブロックごと中央寄せしつつ、行は左揃え */
.sampleNote__list {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.75;
  text-align: left;
  max-width: 585px;
}

/* ※ のぶら下げインデント */
.sampleNote__list li {
  padding-left: 1em;
  text-indent: -1em;
}

@media (max-width: 767px) {
  .sampleNote {
    padding-inline: 20px;
  }

  .sampleNote__list {
    font-size: var(--fs-14);
  }
}

/* sampleCta — お申し込み CTA（ボタン本体は common.css の c-ctaBtn） */
.sampleCta {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .sampleCta {
    padding-inline: 20px;
  }
}

/* ブログ／お客様の声で共通のカラー変数 */
:root {
  --color-rose-dark: #ad8586;  /* 細罫（見出し下・絞り込み枠・戻るボタン）／現在ページ番号 */
  --color-rose-pale: #f7f3f2;  /* 一覧カード・ケースカードの地色 */
}

/* c-post* — 記事一覧／記事詳細の共通パーツ */

/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-blog .contentWithSidebar__main,
  .page-blogDetail .contentWithSidebar__main,
  .page-news .contentWithSidebar__main,
  .page-newsDetail .contentWithSidebar__main,
  .search .contentWithSidebar__main,
  .page-template-template-search .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

/* c-postHead — ページ見出し（「フタバの「だし」ブログ」／「新着情報」） */
.c-postHead {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-26), 3.3vw, var(--fs-48));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

/* c-postDate / c-postTag — 投稿日・カテゴリー（一覧・カード・詳細で共通） */
.c-postDate {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--color-red-deep);
}

.c-postTag {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-red);
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.3;
  letter-spacing: 0.24em;
  text-indent: 0.24em; /* letter-spacing 分の右余りを打ち消す */
  color: var(--color-red-deep);
}

@media (max-width: 767px) {
  .c-postDate {
    font-size: var(--fs-16);
  }

  .c-postTag {
    font-size: var(--fs-13);
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }
}

/* c-postFilter — カテゴリー絞り込み（上下に細罫） */
.c-postFilter {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 14px;
  padding-block: 30px;
  border-block: 1px solid var(--color-rose-dark);
}

.c-postFilter__label {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

.c-postFilter__select {
  position: relative;
}

.c-postFilter__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 0;
  height: 0;
  border-top: 12px solid var(--color-red-deep);
  border-inline: 8px solid transparent;
  transform: translateY(-50%);
  pointer-events: none;
}

.c-postFilter__select select {
  width: 198px;
  padding: 4px 40px 4px 12px;
  border: 1px solid var(--color-rose-dark);
  background-color: var(--color-white);
  color: var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  cursor: pointer;
}

.c-postFilter__submit {
  width: 132px;
  min-height: 36px;
  /* 右端いっぱいではなく 44px 内側に寄せる */
  margin-left: auto;
  margin-right: 44px;
  border-radius: 999px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.c-postFilter__submit:hover {
  background-color: var(--color-yellow, #f3b139);
  color: var(--color-red-deep);
}

@media (max-width: 767px) {
  .c-postFilter {
    padding-block: 20px;
  }

  .c-postFilter__label {
    font-size: var(--fs-16);
  }

  .c-postFilter__select {
    flex: 1;
  }

  .c-postFilter__select select {
    width: 100%;
  }

  .c-postFilter__submit {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* c-postFeature — 新着記事カード（NEW バッジ＋サムネイル） */
.c-postFeature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 281px;
  column-gap: 65px;
  margin-top: 36px;
  padding: 72px 39px 38px 51px;
  border-radius: 16px;
  background-color: var(--color-rose-pale);
}

/* テキスト側（日付＋カテゴリー／タイトル／リード／ボタン） */
.c-postFeature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-postFeature__badge {
  position: absolute;
  top: 0;
  left: 51px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  min-height: 35px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
}

.c-postFeature__meta {
  display: flex;
  align-items: center;
  gap: 25px;
}

.c-postFeature__thumb {
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 281 / 160;
  object-fit: cover;
}

.c-postFeature__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2.2vw, var(--fs-26));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.c-postFeature__excerpt {
  margin-top: 6px;
  font-size: var(--fs-15);
  line-height: 1.6;
}

.c-postFeature .c-moreBtn {
  margin-top: 20px;
}

/* TAB */
@media (max-width: 1024px) {
  .c-postFeature {
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: 32px;
    padding: 64px 24px 28px 32px;
  }

  .c-postFeature__badge {
    left: 32px;
  }
}

/* SP */
@media (max-width: 767px) {
  .c-postFeature {
    grid-template-columns: minmax(0, 1fr);
    padding: 52px 20px 24px;
  }

  .c-postFeature__badge {
    left: 20px;
    width: 110px;
    min-height: 30px;
    font-size: var(--fs-16);
  }

  .c-postFeature__meta {
    gap: 14px;
  }

  /* SP は画像を先頭（バッジのすぐ下）へ */
  .c-postFeature__thumb {
    order: -1;
    margin-bottom: 18px;
  }

  .c-postFeature .c-moreBtn {
    margin-top: 18px;
  }
}

/* c-postList — 記事一覧（WP: メインループ｜行全体がリンク） */
.c-postList {
  margin-top: 54px;
  border-bottom: 1px solid var(--color-red-dark);
}

.c-postList__item {
  border-top: 1px solid var(--color-red-dark);
}

.c-postList__link {
  display: grid;
  /* 1 行目：日付／2 行目：カテゴリー／3 行目：タイトル */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  padding: 28px 24px 30px 50px;
  transition: background-color 0.2s ease;
}

.c-postList__link > * {
  grid-column: 1;
}

.c-postList__link:hover {
  background-color: var(--color-rose-pale);
}

.c-postList__link .c-postTag {
  justify-self: start;
  margin-top: 6px;
}

.c-postList__title {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 1.9vw, var(--fs-22));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--color-red-deep);
}

.c-postList__link .c-moreBtn {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  margin-left: 24px;
}

/* TAB */
@media (max-width: 1024px) {
  .c-postList__link {
    padding: 24px 16px 26px 32px;
  }
}

/* SP */
@media (max-width: 767px) {
  .c-postList {
    margin-top: 32px;
  }

  .c-postList__link {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 0 22px;
  }

  .c-postList__link .c-moreBtn {
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
    margin: 14px 0 0;
  }
}

/* c-gcseResults — 検索結果（WP: search.php） */
.c-gcseResults {
  margin-top: 40px;
}

.c-gcseResults .gsc-control-cse {
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
}

/* 検索エンジン側が「オーバーレイ」設定の場合でも、モーダルではなく */
.c-gcseResults .gsc-results-wrapper-overlay {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.c-gcseResults .gsc-results-close-btn {
  display: none;
}

.gsc-modal-background-image {
  display: none !important;
}

.c-gcseResults .gsc-above-wrapper-area {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--color-red-dark);
}

.c-gcseResults .gsc-result-info {
  padding: 0;
  font-size: var(--fs-14);
  color: var(--color-text);
}

.c-gcseResults .gsc-webResult.gsc-result {
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--color-red-dark);
}

.c-gcseResults .gsc-webResult.gsc-result:hover {
  background-color: var(--color-rose-pale);
  border-color: var(--color-red-dark);
}

.c-gcseResults .gs-title,
.c-gcseResults .gs-title b {
  height: auto;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 1.9vw, var(--fs-22));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--color-red-deep);
  text-decoration: none;
}

.c-gcseResults .gs-snippet {
  margin-top: 8px;
  font-size: var(--fs-15);
  line-height: 1.8;
  color: var(--color-text);
}

/* URL 表示と画像サムネイルは使わない */
.c-gcseResults .gsc-url-top,
.c-gcseResults .gsc-url-bottom,
.c-gcseResults .gs-image-box {
  display: none;
}

.c-gcseResults .gsc-cursor-box {
  margin-top: 32px;
  text-align: center;
}

.c-gcseResults .gsc-cursor-page {
  padding: 4px 10px;
  font-size: var(--fs-15);
  color: var(--color-text);
  text-decoration: none;
}

.c-gcseResults .gsc-cursor-current-page {
  color: var(--color-rose-dark);
  font-weight: 700;
}

/* SP */
@media (max-width: 767px) {
  .c-gcseResults {
    margin-top: 32px;
  }

  .c-gcseResults .gsc-webResult.gsc-result {
    padding: 18px 0 20px;
  }

  .c-gcseResults .gs-snippet {
    font-size: var(--fs-14);
  }
}

/* c-postArticle — 記事詳細（WP: single.php） */
.c-postArticle {
  margin-top: 40px;
}

.c-postArticle__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 440;
  object-fit: cover;
}

.c-postArticle__date {
  margin-top: 26px;
}

.c-postArticle__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2.1vw, var(--fs-30));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-red-deep);
}

/* the_content() の出力先 */
.c-postArticle__body {
  max-width: 550px;
  margin-top: 48px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .c-postArticle__title {
    margin-top: 18px;
  }

  .c-postArticle__body {
    max-width: none;
    margin-top: 28px;
  }
}

/* c-postBack — 一覧へ戻る（ボタン本体は common.css の c-backBtn） */
.c-postBack {
  margin-top: var(--space-section-md);
  text-align: center;
}

/* お客様の声 */

/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-voice .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

.page-voice .c-pager {
  margin-top: 64px;
}

/* voiceList — ケースカードの並び */
.voiceList {
  margin-top: 84px;
}

.voiceCase + .voiceCase {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .voiceList {
    margin-top: var(--space-section-md);
  }

  .voiceCase + .voiceCase {
    margin-top: 20px;
  }
}

/* voiceCase — ケースカード（details） */
.voiceCase {
  position: relative;
  padding-bottom: 78px;
  border-radius: 28px;
  background-color: var(--color-rose-pale);
}

.voiceCase[open] {
  padding-bottom: 60px;
}

.voiceCase__summary {
  display: grid;
  /* 1 行目：キャッチ／2 行目：店名／3 行目：使用だし（写真は 2 列目で全行） */
  grid-template-columns: minmax(0, 1fr) 346px;
  grid-template-rows: repeat(3, auto);
  column-gap: 24px;
  padding: 27px 26px 0 46px;
  list-style: none;
  cursor: pointer;
}

.voiceCase__catch,
.voiceCase__name,
.voiceCase__dashi {
  grid-column: 1;
}

/* Safari のマーカー（▶）を消す */
.voiceCase__summary::-webkit-details-marker {
  display: none;
}

/* CASE 番号（カード左上・下側だけ角丸） */
.voiceCase__num {
  position: absolute;
  top: 0;
  left: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ブラウザのフォントサイズ設定が大きいとき、133px では「CASE 01」が折り返して
     帯が縦に伸び、キャッチコピーに重なるので、内容に応じて横へ広げる */
  width: max-content;
  min-width: 133px;
  min-height: 36px;
  border-radius: 0 0 10px 10px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-indent: 0.15em; /* letter-spacing 分の右余りを打ち消す */
}

/* 公開前の投稿に付く目印（編集権限のある人にだけ出る｜inc/voice.php） */
.voiceCase__status {
  position: absolute;
  top: 0;
  left: 180px;
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  min-height: 36px;
  border-radius: 0 0 10px 10px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.voiceCase__catch {
  display: block;
  margin-top: 20px; /* CASE 番号ぶんの空き */
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

.voiceCase__name {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

/* 業種（店名の上の小さい行｜無い店舗ではタグごと出力しない） */
.voiceCase__genre {
  display: block;
  font-size: 20px;
  line-height: 1.4;
}

/* 業種行があるときはキャッチとの間を詰める */
.voiceCase__name:has(.voiceCase__genre) {
  margin-top: 8px;
}

.voiceCase__sama {
  margin-left: 4px;
  font-size: 18px;
}

.voiceCase__dashi {
  display: block;
  margin-top: 30px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

.voiceCase__photo {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 346 / 191;
  border-radius: 20px;
  object-fit: cover;
}

.voiceCase__toggle {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-red-deep);
  transition: color 0.2s ease;
}

/* ⊕ / ⊖ アイコン（円＋横線＋縦線を背景グラデーションで描画） */
.voiceCase__toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 1.5px, 1.5px 10px;
}

/* 開いている時は横線のみ */
/* 開いているときは店舗情報の罫線からの間隔を詰める */
.voiceCase[open] .voiceCase__toggle {
  bottom: 13px;
}

.voiceCase[open] .voiceCase__toggle::before {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 10px 1.5px;
}

.voiceCase__summary:hover .voiceCase__toggle {
  color: var(--color-red);
}

.voiceCase__toggleText--close {
  display: none;
}

.voiceCase[open] .voiceCase__toggleText {
  display: none;
}

.voiceCase[open] .voiceCase__toggleText--close {
  display: inline;
}

/* TAB */
@media (max-width: 1024px) {
  .voiceCase__summary {
    grid-template-columns: minmax(0, 1fr) 42%;
    column-gap: 20px;
    padding: 24px 20px 0 36px;
  }

  .voiceCase__num {
    left: 32px;
  }

  .voiceCase__status {
    left: 173px;
  }
}

/* SP */
@media (max-width: 767px) {
  .voiceCase {
    padding-bottom: 66px;
    border-radius: 20px;
  }

  .voiceCase[open] {
    padding-bottom: 52px;
  }

  .voiceCase__summary {
    grid-template-columns: minmax(0, 1fr);
    padding: 52px 20px 0;
  }

  .voiceCase__num {
    left: 20px;
    min-width: 112px;
    min-height: 30px;
    font-size: 14px;
  }

  .voiceCase__status {
    left: 140px;
    min-height: 30px;
    font-size: 12px;
  }

  /* SP は写真を先頭（CASE 番号のすぐ下）へ */
  .voiceCase__photo {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    margin-bottom: 16px;
  }

  .voiceCase__catch {
    margin-top: 0;
    font-size: 16px;
  }

  .voiceCase__name {
    margin-top: 14px;
  }

  .voiceCase__genre {
    font-size: 16px;
  }

  .voiceCase__sama {
    font-size: 15px;
  }

  .voiceCase__dashi {
    margin-top: 14px;
    font-size: 14px;
  }

  .voiceCase__toggle {
    bottom: 20px;
    font-size: 18px;
  }
}

/* voiceCase__body — 開いた時に出る本文エリア */
.voiceCase__body {
  padding: 40px 69px 0 67px;
}

@media (max-width: 1024px) {
  .voiceCase__body {
    padding: 40px 36px 0;
  }
}

@media (max-width: 767px) {
  .voiceCase__body {
    padding: 28px 20px 0;
  }
}

/* voiceStory — 本文セクション（見出し＋本文＋写真） */
.voiceStory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  column-gap: 21px;
  row-gap: 8px;
}

.voiceStory + .voiceStory {
  margin-top: 48px;
}

/* 写真が無いセクションは、本文を写真の列ぶんまで広げる */
.voiceStory:not(:has(.voiceStory__photo)) {
  grid-template-columns: minmax(0, 1fr);
}

.voiceStory__title {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

.voiceStory__text {
  font-size: var(--fs-14);
  line-height: 1.7;
}

/* 写真キャプション（本文と同じ行送りで続ける） */
.voiceStory__note {
  grid-column: 1;
  margin-top: -8px;
  font-size: 14px;
  line-height: 1.7;
}

.voiceStory__photo {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
  height: auto;
}

/* TAB */
@media (max-width: 1024px) {
  .voiceStory {
    grid-template-columns: minmax(0, 1fr) 32%;
  }
}

/* SP */
@media (max-width: 767px) {
  .voiceStory {
    grid-template-columns: minmax(0, 1fr);
  }

  .voiceStory + .voiceStory {
    margin-top: 36px;
  }

  .voiceStory__title {
    font-size: 16px;
  }

  .voiceStory__photo {
    grid-column: 1;
    grid-row: auto;
  }
}

/* voiceShop — 店舗情報（上下に罫線） */
.voiceShop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 291px;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  column-gap: 20px;
  margin-top: 56px;
  padding-block: 34px 12px;
  border-block: 2px solid var(--color-red-deep);
}

.voiceShop__name {
  font-size: 18px;
}

.voiceShop__address {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.55;
}

.voiceShop__data {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  font-size: 15px;
  line-height: 1.55;
}

.voiceShop__data dt {
  font-weight: 400;
}

.voiceShop__photo {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  width: 100%;
  height: auto;
}

.voiceShop__photo--noimage {
  aspect-ratio: 291 / 164;
  object-fit: cover;
}

/* TAB */
@media (max-width: 1024px) {
  .voiceShop {
    grid-template-columns: minmax(0, 1fr) 40%;
  }
}

/* SP */
@media (max-width: 767px) {
  .voiceShop {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    margin-top: 40px;
    padding-block: 24px 20px;
  }

  .voiceShop__name {
    font-size: 16px;
  }

  .voiceShop__address {
    margin-top: 14px;
  }

  .voiceShop__photo {
    grid-column: 1;
    grid-row: auto;
    margin-top: 16px;
  }
}

/* voiceMore — ページ送り下の「その他のお客様の声」ボタン */
.voiceMore {
  margin-top: 40px;
}

.voiceMore__btn {
  width: 480px;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .voiceMore {
    margin-top: 28px;
  }
}

/* その他のお客様の声 */

/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-voiceOther .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

.voiceOtherLead {
  margin-top: 36px;
  font-size: var(--fs-15);
  line-height: 2;
}

@media (max-width: 767px) {
  .voiceOtherLead {
    margin-top: 24px;
    font-size: var(--fs-14);
  }
}

/* voiceOther — カテゴリーごとのセクション */
.voiceOther {
  margin-top: var(--space-section-md);
}

.voiceOther__list {
  margin-top: 32px;
}

@media (max-width: 767px) {
  .voiceOther__list {
    margin-top: 22px;
  }
}

/* voiceOtherItem — お声 1 件（ケースカードと同じローズの地色） */
.voiceOtherItem {
  padding: 30px 34px;
  border-radius: 20px;
  background-color: var(--color-rose-pale);
}

.voiceOtherItem + .voiceOtherItem {
  margin-top: 20px;
}

.voiceOtherItem__title {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-16), 1.7vw, var(--fs-20));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-red-deep);
}

/* 使用しただし商品名（出典に続けて出す。無い件はタグごと出力しない） */
.voiceOtherItem__product {
  display: inline-block;
  margin-left: 10px;
  font-size: var(--fs-15);
  letter-spacing: 0.02em;
  color: var(--color-red);
}

.voiceOtherItem__text {
  margin-top: 16px;
  font-size: var(--fs-15);
  line-height: 2;
}

.voiceOtherItem__text + .voiceOtherItem__text {
  margin-top: 1em;
}

/* SP */
@media (max-width: 767px) {
  .voiceOtherItem {
    padding: 22px 20px;
    border-radius: 14px;
  }

  .voiceOtherItem + .voiceOtherItem {
    margin-top: 14px;
  }

  .voiceOtherItem__product {
    margin-left: 0;
    font-size: var(--fs-14);
  }

  .voiceOtherItem__text {
    margin-top: 12px;
    font-size: var(--fs-14);
  }
}

/* voiceOtherBack — 一覧へ戻る（ボタン本体は common.css の c-backBtn） */
.voiceOtherBack {
  margin-top: var(--space-section-md);
  text-align: center;
}

/* page-faq — よくあるご質問（Q&A） */

/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-faq .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

/* faqHead — ページ見出し「よくあるご質問」 */
.faqHead {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-26), 3.3vw, var(--fs-48));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

/* faqList / faqItem — Q&A 本体 */
.faqList {
  margin-top: 40px;
}

.faqItem + .faqItem {
  margin-top: 44px;
}

/* 質問（えんじ枠 × ローズ地の帯｜先頭の Q マークは擬似要素） */
.faqItem__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border: 1px solid var(--color-red-deep);
  background-color: var(--color-rose);
  color: var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 1.7vw, var(--fs-24));
  font-weight: 700;
  line-height: 1.5;
}

.faqItem__q::before {
  content: "Q";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: var(--fs-22);
  line-height: 1;
}

/* 回答（A マークを左に置き、本文はぶら下げ） */
.faqItem__a {
  position: relative;
  padding-top: 20px;
  padding-left: 52px;
  font-size: var(--fs-16);
  line-height: 1.9;
}

.faqItem__a::before {
  content: "A";
  position: absolute;
  top: 20px;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-red-deep);
  color: var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 1;
}

.faqItem__a p + p {
  margin-top: 1em;
}

/* 本文中のリンクのみ下線つき（枠内の電話番号リンクは対象外） */
.faqItem__a > p a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.2s ease;
}

.faqItem__a > p a:hover {
  opacity: 0.7;
}

.faqItem__a strong {
  font-weight: 700;
}

/* TAB */
@media (max-width: 1024px) {
  .faqItem__q {
    padding: 12px 20px;
  }
}

/* SP */
@media (max-width: 767px) {
  .faqList {
    margin-top: 28px;
  }

  .faqItem + .faqItem {
    margin-top: 32px;
  }

  .faqItem__q {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
  }

  .faqItem__q::before {
    width: 28px;
    height: 28px;
    font-size: var(--fs-18);
  }

  .faqItem__a {
    padding-top: 16px;
    padding-left: 38px;
    font-size: var(--fs-15);
    line-height: 1.85;
  }

  .faqItem__a::before {
    top: 16px;
    width: 28px;
    height: 28px;
    font-size: var(--fs-18);
  }
}

/* faqTel — 「お気軽にご相談ください。」電話枠（回答内に差し込む） */
.faqTel {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid var(--color-red-deep);
  border-radius: 10px;
  background-color: var(--color-cream);
  text-align: center;
}

.faqTel__lead {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2.2vw, var(--fs-28));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.faqTel__num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-28), 3.6vw, var(--fs-42));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.faqTel__num:hover {
  opacity: 0.7;
}

.faqTel__mark {
  flex-shrink: 0;
  width: 46px;
  height: auto;
}

.faqTel__hours {
  margin-top: 6px;
  font-size: var(--fs-16);
}

.faqTel__hours span + span {
  margin-left: 16px;
}

/* SP */
@media (max-width: 767px) {
  .faqTel {
    padding: 18px 14px;
  }

  .faqTel__num {
    gap: 8px;
  }

  .faqTel__mark {
    width: 36px;
  }

  .faqTel__hours {
    font-size: var(--fs-14);
  }

  .faqTel__hours span + span {
    display: block;
    margin-left: 0;
  }
}

/* faqOrder — 「WEB以外のご注文は」電話・FAX 枠（回答内に差し込む） */
.faqOrder {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid var(--color-red-deep);
  border-radius: 10px;
  background-color: var(--color-cream);
}

.faqOrder__lead {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2.2vw, var(--fs-28));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-red-deep);
}

.faqOrder__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  margin-top: 14px;
}

.faqOrder__label {
  padding: 3px 12px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

/* FAX 側は白地・えんじ枠で電話と描き分ける */
.faqOrder__label--fax {
  border: 1px solid var(--color-red-deep);
  background-color: var(--color-white);
  color: var(--color-red-deep);
}

.faqOrder__num {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-32));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-text);
}

.faqOrder__num a {
  color: inherit;
  transition: opacity 0.2s ease;
}

.faqOrder__num a:hover {
  opacity: 0.7;
}

.faqOrder__free {
  display: block;
  font-family: var(--font-base);
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: 0;
}

.faqOrder__hours {
  margin-top: 14px;
  font-size: var(--fs-15);
  line-height: 1.8;
  text-align: center;
}

/* SP */
@media (max-width: 767px) {
  .faqOrder {
    padding: 18px 14px;
  }

  .faqOrder__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .faqOrder__hours {
    font-size: var(--fs-13);
    text-align: left;
  }
}

/* page-sitemap — サイトマップ */

/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-sitemap .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

/* sitemap — 2 カラムのリンク一覧 */
.sitemap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 40px;
  margin-top: 48px;
}

.sitemap__col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 親リンク（右向き三角付き・下線） */
.sitemap__parent {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-red-deep);
}

.sitemap__parent .sitemap__link,
.sitemap__list--parent .sitemap__link {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.sitemap__parent .sitemap__link::before,
.sitemap__parent--noLink::before,
.sitemap__list--parent .sitemap__link::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.3em;
  border-left: 0.4em solid currentColor;
  border-block: 0.28em solid transparent;
  vertical-align: 0.05em;
}

/* 子リンク（インデント） */
.sitemap__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding-left: 32px;
  font-size: var(--fs-16);
}

/* 親レベルのみで構成されるリスト（会社概要〜Facebook） */
.sitemap__list--parent {
  gap: 18px;
  margin-top: 0;
  padding-left: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--color-red-deep);
}

.sitemap__link {
  transition: color 0.3s ease, opacity 0.3s ease;
}

.sitemap__link:hover {
  color: var(--color-red);
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .sitemap {
    gap: 40px 28px;
  }

  .sitemap__parent,
  .sitemap__list--parent {
    font-size: var(--fs-18);
  }

  .sitemap__list {
    padding-left: 24px;
    font-size: var(--fs-15);
  }
}

@media (max-width: 767px) {
  .sitemap {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }

  .sitemap__col {
    gap: 32px;
  }

  .sitemap__parent,
  .sitemap__list--parent {
    font-size: var(--fs-17);
  }

  .sitemap__list {
    gap: 12px;
    margin-top: 14px;
    padding-left: 18px;
    font-size: var(--fs-14);
  }

  .sitemap__list--parent {
    gap: 14px;
  }
}

/* page-recipe — レシピ一覧 */

/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-recipe .contentWithSidebar__main,
  .page-recipeCategory .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

/* recipeSearchHead — 「▼ジャンルから探す」などの絞り込み見出し */
.recipeSearchHead {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}

.recipeSearchHead::before {
  content: "";
  width: 0;
  height: 0;
  border-inline: 6px solid transparent;
  border-top: 9px solid currentColor;
}

@media (max-width: 767px) {
  .recipeSearchHead {
    font-size: var(--fs-14);
  }

  .recipeSearchHead::before {
    border-inline-width: 5px;
    border-top-width: 8px;
  }
}

/* recipeGenre — ジャンルから探す（和食・中華・洋食） */
.recipeGenre {
  margin-top: 40px;
}

.recipeGenre__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin-top: 8px;
}

.recipeGenre__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 61px;
  padding: 10px 16px;
  border-radius: 4px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-17), 1.8vw, var(--fs-23));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-align: center;
  transition: opacity 0.3s ease;
}

.recipeGenre__btn:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .recipeGenre__list {
    gap: 10px;
    margin-top: 12px;
  }

  .recipeGenre__btn {
    min-height: 46px;
    padding: 8px 6px;
    letter-spacing: 0.06em;
  }
}

/* recipeItem — 品目から探す（ごはん・めん類…） */
.recipeItem {
  margin-top: 40px;
}

.recipeItem__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* 「スープ・汁物」など長いラベルが折り返しても全行を同じ高さに揃える */
  grid-auto-rows: 1fr;
  margin-top: 8px;
}

.recipeItem__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 -1px -1px 0;
  padding: 6px 3px;
  border: 1px solid var(--color-red-deep);
  background-color: var(--color-rose);
  color: var(--color-red-deep);
  font-family: var(--font-serif);
  /* 最長ラベル「スープ・汁物」（6 文字）が 1 行に収まる字送りを列幅から逆算した式 */
  font-size: clamp(var(--fs-12), calc(2.25vw - 11.5px), var(--fs-16));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.recipeItem__btn:hover {
  background-color: var(--color-red-deep);
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .recipeItem__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* TAB は 5 列。サイドバー 220px ＋ gap 28px を引いた列幅で計算し直す */
  .recipeItem__btn {
    font-size: clamp(var(--fs-12), 1.75vw, var(--fs-16));
  }
}

@media (max-width: 767px) {
  .recipeItem__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
  }

  .recipeItem__btn {
    min-height: 40px;
    font-size: var(--fs-14);
    letter-spacing: 0.04em;
  }
}

/* recipeProducts — 商品から探す */
.recipeProducts {
  margin-top: 44px;
}

.recipeProducts__group {
  margin-top: 92px;
}

/* 1 つ目のグループは「商品から探す」見出しのすぐ下 */
.recipeProducts__group:first-of-type {
  margin-top: 4px;
}

/* 大分類（だしパック／削り節…） */
.recipeProducts__groupTitle {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 1.62vw, var(--fs-26));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

/* 小分類（旨味強化／無添加パック） */
.recipeProducts__subTitle {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-16), 1.22vw, var(--fs-20));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-red-deep);
}

.recipeProducts__groupTitle + .c-recipeGrid,
.recipeProducts__subTitle + .c-recipeGrid {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .recipeProducts__group {
    margin-top: var(--space-section-sm);
  }

  .recipeProducts__groupTitle {
    padding-bottom: 8px;
  }

  .recipeProducts__subTitle {
    margin-top: 32px;
  }

  .recipeProducts__groupTitle + .c-recipeGrid,
  .recipeProducts__subTitle + .c-recipeGrid {
    margin-top: 20px;
  }
}

/* page-recipeCategory — レシピ カテゴリー一覧 */
.page-recipeCategory .c-barHead + .c-recipeGrid {
  margin-top: 36px;
}

@media (max-width: 767px) {
  .page-recipeCategory .c-barHead + .c-recipeGrid {
    margin-top: 24px;
  }
}

/* page-company — 会社概要 */

/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-company .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

/* companyTable — 会社情報テーブル */
.companyTable {
  width: 100%;
  margin-top: 48px;
  border-collapse: collapse;
  font-size: var(--fs-16);
  line-height: 1.8;
}

.companyTable th,
.companyTable td {
  padding: 12px 20px;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: middle;
}

.companyTable th {
  width: 32%;
  font-weight: 400;
}

.companyTable__link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.3s ease;
}

.companyTable__link:hover {
  color: var(--color-red);
}

@media (max-width: 1024px) {
  .companyTable {
    font-size: var(--fs-15);
  }

  .companyTable th,
  .companyTable td {
    padding: 10px 16px;
  }
}

/* SP は項目名／内容を縦積みにする */
@media (max-width: 767px) {
  .companyTable {
    margin-top: 32px;
    font-size: var(--fs-14);
  }

  .companyTable th,
  .companyTable td {
    display: block;
    padding: 10px 14px;
  }

  .companyTable th {
    width: auto;
    border-bottom: none;
    background-color: var(--color-cream);
    font-weight: 700;
  }
}

/* companyNetwork — ネットワーク（営業所一覧） */
.companyNetwork {
  margin-top: var(--space-section-sm);
}

.companyNetwork__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.6;
}

.companyNetwork__title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: currentColor;
}

.companyNetwork__text {
  margin-top: 4px;
  font-size: var(--fs-16);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .companyNetwork__title,
  .companyNetwork__text {
    font-size: var(--fs-14);
  }
}

/* companyPhotos — 拠点写真（1 枚目のみ全幅・2 枚目以降は 2 カラム） */
.companyPhotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 32px 24px;
  margin-top: var(--space-section-sm);
}

.companyPhotos__item--wide {
  grid-column: 1 / -1;
}

.companyPhotos__item img {
  display: block;
  width: 100%;
  height: auto;
}

.companyPhotos__caption {
  margin-top: 10px;
  font-size: var(--fs-15);
  line-height: 1.6;
  text-align: right;
}

@media (max-width: 767px) {
  .companyPhotos {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .companyPhotos__caption {
    margin-top: 8px;
    font-size: var(--fs-13);
  }
}

/* shipping / shippingTable — 送料について */
/* SP はメインカラム側で左右余白を持つ（contentWithSidebar は SP で padding 0） */
@media (max-width: 767px) {
  .page-shipping .contentWithSidebar__main,
  .page-about .contentWithSidebar__main,
  .page-guide .contentWithSidebar__main,
  .page-contact .contentWithSidebar__main {
    padding-inline: 20px;
  }
}

.shipping {
  margin-top: var(--space-section-md);
}

.shipping__lead {
  margin-top: 28px;
  font-size: var(--fs-16);
  line-height: 1.9;
}

.shipping__strong {
  font-weight: 700;
  color: var(--color-red-deep);
}

.shipping__note {
  margin-top: 16px;
  font-size: var(--fs-15);
  line-height: 1.9;
}

.shippingTable {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  margin-top: 28px;
}

/* 隣のグループと罫線を共有する（両方が描くと 2px に見える） */
.shippingTable__col + .shippingTable__col tr > *:first-child {
  border-left: 0;
}

/* 下のブロックは上のブロックと地続きにする（余白も境界線も入れない） */
.shippingTable + .shippingTable {
  margin-top: 0;
}

.shippingTable + .shippingTable tr:first-child > * {
  border-top: 0;
}

/* table-layout: fixed ＋ 50/50 で、6 グループすべての列幅を揃える */
.shippingTable__col {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-15);
  line-height: 1.6;
}

.shippingTable th,
.shippingTable td {
  width: 50%;
  padding: 9px 12px;
  border: 1px solid var(--color-rose-dark);
  text-align: center;
  white-space: nowrap;
}

/* 都道府県セル */
.shippingTable__area {
  background-color: var(--color-cream);
  font-weight: 500;
  color: var(--color-red-deep);
}

.shippingTable__area--high {
  background-color: var(--color-rose);
}

.shippingTable__area--highest {
  background-color: var(--color-red-deep);
  color: var(--color-white);
}

.shippingTable__fee {
  background-color: var(--color-white);
}

@media (max-width: 1024px) {
  .shippingTable th,
  .shippingTable td {
    padding: 8px 10px;
  }
}

@media (max-width: 767px) {
  .shipping__lead {
    font-size: var(--fs-15);
  }

  .shipping__note {
    font-size: var(--fs-14);
  }

  .shippingTable {
    grid-template-columns: minmax(0, 1fr);
  }

  .shippingTable__col {
    font-size: var(--fs-12);
  }

  .shippingTable__col + .shippingTable__col tr > *:first-child {
    border-left: 1px solid var(--color-rose-dark);
  }

  .shippingTable__col + .shippingTable__col tr:first-child > * {
    border-top: 0;
  }

  .shippingTable th,
  .shippingTable td {
    padding: 6px 5px;
  }
}

/* overseas — 海外出店サポート */

/* CTA（お問い合わせ／無料サンプルの 2 ボタン） */
.overseasCta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.overseasCta--bottom {
  margin-top: var(--space-section-md);
}

/* 飲食店の海外出店をサポートします！ */
.overseasMarket {
  margin-top: var(--space-section-md);
}

.overseasMarket__img {
  display: block;
  width: 100%;
  margin-top: 28px;
  aspect-ratio: 1000 / 425;
  object-fit: cover;
  object-position: center bottom;
}

.overseasMarket__text {
  margin-top: 24px;
  font-size: var(--fs-16);
  line-height: 1.9;
}

/* 商品セクション（濃縮だし・海鮮だし／花削り・糸削り） */
.overseasSec {
  margin-top: var(--space-section-md);
}

.overseasSec__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 18px;
  border-radius: 999px;
  background-color: var(--color-rose);
  color: var(--color-red-deep);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-14), 1.5vw, var(--fs-18));
  font-weight: 700;
  letter-spacing: 0.08em;
}

.overseasSec__img {
  display: block;
  width: 100%;
  margin-top: 28px;
  object-fit: cover;
  object-position: center bottom;
}

.overseasSec__img--liquid {
  aspect-ratio: 1000 / 400;
}

.overseasSec__img--kezuri {
  aspect-ratio: 1000 / 305;
}

.overseasSec__text {
  margin-top: 24px;
  font-size: var(--fs-16);
  line-height: 1.9;
}

.overseasSec__lineup {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

.overseasSec__btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.overseasSec__btns--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
  margin-inline: auto;
}

/* 取扱事例のご紹介 */
.overseasCase {
  margin-top: var(--space-section-md);
}

.overseasCase__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 32px;
}

.overseasCase__item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.overseasCase__photo {
  display: block;
  width: 100%;
  height: auto;
}

.overseasCase__title {
  font-size: clamp(var(--fs-16), 1.8vw, var(--fs-20));
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-red);
}

.overseasCase__text {
  margin-top: 12px;
  font-size: var(--fs-15);
  line-height: 1.9;
}

.overseasCase__text strong {
  font-weight: 700;
}

.overseasCase__menu {
  margin-top: 20px;
}

.overseasCase__menuLabel {
  display: inline-block;
  padding: 3px 18px;
  background-color: var(--color-red-deep);
  color: var(--color-white);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.overseasCase__menuList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.overseasCase__menuList img {
  display: block;
  width: 100%;
  aspect-ratio: 477 / 289;
  object-fit: cover;
}

.overseasCase__menuNote {
  margin-top: 6px;
  font-size: var(--fs-12);
  line-height: 1.6;
  text-align: right;
  color: var(--color-text);
}

/* だし.comが海外で選ばれる理由 */
.overseasReason {
  margin-top: var(--space-section-md);
}

.overseasReason__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}

.overseasReason__item {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.overseasReason__img {
  display: block;
  width: 100%;
  height: auto;
}

.overseasReason__title {
  font-size: clamp(var(--fs-16), 1.8vw, var(--fs-20));
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-red-deep);
}

.overseasReason__text {
  margin-top: 10px;
  font-size: var(--fs-15);
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .overseasCase__item {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 20px;
  }

  .overseasReason__item {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .overseasCta,
  .overseasSec__btns {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .overseasMarket,
  .overseasSec,
  .overseasCase,
  .overseasReason,
  .overseasCta {
    padding-inline: 20px;
  }

  .overseasMarket__text,
  .overseasSec__text {
    font-size: var(--fs-15);
  }

  .overseasCase__item,
  .overseasReason__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .overseasCase__photo {
    width: 160px;
    margin-inline: auto;
  }
}