/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

.site-footer-copyright p:nth-child(2){display:none!important;}

/* ==================================================
   ページビルダー・テーマ側の横幅制限を解除
================================================== */

:where(html, body):has(.gelato-hero-root) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-x: clip !important;
}

:where(div, main, article, section):has(.gelato-hero-root) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;

  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;

  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
}

/* ==================================================
   共通設定
================================================== */

.gelato-hero-root,
.gelato-hero-root * {
  box-sizing: border-box;
}

.gelato-hero-root {
  position: relative;

  width: 100vw !important;
  max-width: none !important;

  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 0 !important;

  overflow: hidden;
}

/* ==================================================
   ヒーロー本体：PC
================================================== */

.gelato-hero {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-width: 100%;
  max-width: none;

  height: 852px;
  min-height: 760px;

  margin: 0;
  padding: 0;

  overflow: hidden;
  background-color: #d8d8d2;
}

/* ==================================================
   背景フェードスライダー
================================================== */

.gelato-hero__slider {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  min-width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  /* 画像読み込み前・フェードの隙間に表示する1枚目 */
  background-image:
    url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe01.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.gelato-hero__slide {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  min-width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  opacity: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  animation-name: mbcGelatoHeroFade !important;
  animation-duration: 18s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;

  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.gelato-hero__slide--01 {
  background-image:
    url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe01.webp");

  animation-delay: 0s !important;
}

.gelato-hero__slide--02 {
  background-image:
    url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe02.webp");

  animation-delay: -12s !important;
}

.gelato-hero__slide--03 {
  background-image:
    url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe03.webp");

  animation-delay: -6s !important;
}

/* ==================================================
   PC：コンテンツ
================================================== */

.gelato-hero__content {
  position: absolute;
  top: 330px;
  left: 24px;
  z-index: 5;

  width: 720px;
  max-width: calc(100% - 48px);
}

/* ==================================================
   サブテキスト
================================================== */

.gelato-hero__eyebrow {
  position: relative;
  z-index: 3;

  margin: 0 0 14px;

  color: #71918e;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14em;
}

/* ==================================================
   見出し
================================================== */

.gelato-hero__title {
  position: relative;
  z-index: 2;

  margin: 0;

  color: #351500;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 55px;
  font-weight: 900;
  line-height: 1.37;
  letter-spacing: 0.035em;
}

.gelato-hero__title-line {
  position: relative;
  isolation: isolate;

  display: block;
  width: max-content;
  max-width: 100%;

  white-space: nowrap;
}

/*
 * 文字の形を縁取る外側のグラデーション
 */
.gelato-hero__title-line::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;

  content: attr(data-text);

  color: transparent;

  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;

  -webkit-text-stroke: 18px rgba(248, 246, 238, 0.9);

  text-shadow:
    0 0 8px rgba(248, 246, 238, 1),
    0 0 18px rgba(248, 246, 238, 0.96),
    0 0 32px rgba(248, 246, 238, 0.82),
    0 0 48px rgba(248, 246, 238, 0.52);

  filter: blur(5px);
  pointer-events: none;
}

/*
 * 文字のすぐ外側に入れる内側の縁取り
 */
.gelato-hero__title-line::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  content: attr(data-text);

  color: transparent;

  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;

  -webkit-text-stroke: 8px rgba(248, 246, 238, 0.94);

  text-shadow:
    0 0 4px rgba(248, 246, 238, 1),
    0 0 10px rgba(248, 246, 238, 0.9),
    0 0 18px rgba(248, 246, 238, 0.58);

  filter: blur(1.5px);
  pointer-events: none;
}

.gelato-hero__title-text {
  position: relative;
  z-index: 2;
}

.gelato-hero__title-line--accent {
  color: #173f3e;
}

.gelato-hero__trademark {
  display: inline-block;

  margin-left: 3px;

  font-size: 0.48em;
  line-height: 1;
  vertical-align: 0.55em;
}

/* ==================================================
   説明文
================================================== */

.gelato-hero__description {
  position: relative;
  z-index: 3;

  margin: 12px 0 0;

  color: #875032;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.025em;
}

/* ==================================================
   ボタンエリア
================================================== */

.gelato-hero__actions {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 16px;

  margin-top: 30px;
}

.gelato-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 56px;
  padding: 0 20px;

  border: 0;
  border-radius: 999px;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.gelato-hero__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(42, 29, 16, 0.14);
}

.gelato-hero__button:focus-visible {
  outline: 3px solid rgba(23, 63, 62, 0.32);
  outline-offset: 4px;
}

.gelato-hero__button--document {
  width: 201px;

  color: #ffffff;
  background-color: #e5a900;
}

.gelato-hero__button--contact {
  width: 364px;

  color: #ffffff;
  background-color: #174543;
}

.gelato-hero__button-icon {
  flex: 0 0 auto;

  width: 20px;

  font-size: 19px;
  line-height: 1;
  text-align: center;
}

/* ==================================================
   特徴ラベル
================================================== */

.gelato-hero__features {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;

  margin: 39px 0 0;
  padding: 0;

  list-style: none;
}

.gelato-hero__feature {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 35px;
  padding: 7px 17px;

  border: 1px solid #ebe5d9;
  border-radius: 999px;

  color: #76553f;
  background-color: rgba(255, 255, 255, 0.68);

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ==================================================
   スライド位置表示
================================================== */

.gelato-hero__pagination {
  position: absolute;
  right: 22px;
  bottom: 32px;
  z-index: 7;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;

  height: 12px;
}

.gelato-hero__pagination-dot {
  display: block;

  width: 10px;
  height: 10px;

  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.38);

  animation-name: mbcGelatoHeroDot !important;
  animation-duration: 18s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;
}

.gelato-hero__pagination-dot:nth-child(1) {
  animation-delay: 0s !important;
}

.gelato-hero__pagination-dot:nth-child(2) {
  animation-delay: -12s !important;
}

.gelato-hero__pagination-dot:nth-child(3) {
  animation-delay: -6s !important;
}

/* ==================================================
   フェードアニメーション
================================================== */

@keyframes mbcGelatoHeroFade {
  0% {
    opacity: 1;
  }

  27.777% {
    opacity: 1;
  }

  33.333% {
    opacity: 0;
  }

  94.444% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mbcGelatoHeroDot {
  0% {
    width: 32px;
    background-color: #1e5553;
  }

  27.777% {
    width: 32px;
    background-color: #1e5553;
  }

  33.333% {
    width: 10px;
    background-color: rgba(255, 255, 255, 0.38);
  }

  94.444% {
    width: 10px;
    background-color: rgba(255, 255, 255, 0.38);
  }

  100% {
    width: 32px;
    background-color: #1e5553;
  }
}

/* ==================================================
   タブレット表示
   768px～1024px
================================================== */

@media screen and (max-width: 1024px) {
  .gelato-hero {
    --gelato-visual-height: clamp(540px, 68vw, 660px);

    height: auto;
    min-height: 0;

    /*
     * ベージュ部分はモバイル画像内に含まれているため、
     * CSS側では背景色を付けない
     */
    background-color: transparent !important;
    background-image: none !important;
  }

  .gelato-hero__slider {
    inset: 0 !important;

    width: 100%;
    height: 100%;
    min-height: 100%;

    background-color: transparent !important;
    background-image:
      url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe_mobile01.webp") !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }

  .gelato-hero__slide {
    width: 100%;
    min-width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    animation-name: mbcGelatoHeroFade !important;
    animation-duration: 18s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
  }

  .gelato-hero__slide--01 {
    background-image:
      url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe_mobile01.webp") !important;

    animation-delay: 0s !important;
  }

  .gelato-hero__slide--02 {
    background-image:
      url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe_mobile02.webp") !important;

    animation-delay: -12s !important;
  }

  .gelato-hero__slide--03 {
    background-image:
      url("https://www.merrybaycafe.com/wp-content/uploads/2026/07/top-MerryBayCafe_mobile03.webp") !important;

    animation-delay: -6s !important;
  }

  .gelato-hero__content {
    position: relative;
    top: auto;
    left: auto;

    width: calc(100% - 48px);
    max-width: 760px;

    margin: 0 auto;
    padding-top: calc(var(--gelato-visual-height) - 52px);
    padding-bottom: 72px;
  }

  .gelato-hero__title {
    font-size: clamp(38px, 5.2vw, 48px);
    line-height: 1.42;
  }

  .gelato-hero__description {
    max-width: 680px;

    font-size: 14px;
    line-height: 1.75;
  }

  .gelato-hero__description br {
    display: none;
  }

  .gelato-hero__actions {
    width: 100%;
  }

  .gelato-hero__button--document {
    flex: 0 0 210px;
    width: auto;
  }

  .gelato-hero__button--contact {
    flex: 1 1 auto;
    width: auto;
  }

  .gelato-hero__features {
    margin-top: 32px;
  }

  .gelato-hero__pagination {
    top: calc(var(--gelato-visual-height) - 28px);
    right: 24px;
    bottom: auto;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .gelato-hero {
    --gelato-visual-height: clamp(460px, 128vw, 520px);

    height: auto;
    min-height: 0;

    background-color: transparent !important;
    background-image: none !important;
  }

  .gelato-hero__slider {
    inset: 0 !important;

    width: 100%;
    height: 100%;
    min-height: 100%;

    background-color: transparent !important;
    background-position: center top;
    background-size: cover;
  }

  .gelato-hero__slide {
    width: 100%;
    min-width: 100%;
    height: 100%;

    background-position: center top;
    background-size: cover;
  }

  .gelato-hero__content {
    position: relative;
    top: auto;
    left: auto;

    width: calc(100% - 30px);
    max-width: none;

    margin: 0 auto;
    padding-top: calc(var(--gelato-visual-height) - 38px);
    padding-bottom: 72px;
  }

  .gelato-hero__eyebrow {
    margin: 0 0 12px;

    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.12em;
  }

  .gelato-hero__title {
    font-size: clamp(24px, 6.9vw, 28px);
    line-height: 1.55;
    letter-spacing: 0.02em;
  }

  .gelato-hero__title-line::before {
    -webkit-text-stroke: 10px rgba(248, 246, 238, 0.92);

    text-shadow:
      0 0 5px rgba(248, 246, 238, 1),
      0 0 10px rgba(248, 246, 238, 0.96),
      0 0 18px rgba(248, 246, 238, 0.76),
      0 0 28px rgba(248, 246, 238, 0.45);

    filter: blur(3px);
  }

  .gelato-hero__title-line::after {
    -webkit-text-stroke: 4px rgba(248, 246, 238, 0.95);

    text-shadow:
      0 0 3px rgba(248, 246, 238, 1),
      0 0 7px rgba(248, 246, 238, 0.86),
      0 0 12px rgba(248, 246, 238, 0.48);

    filter: blur(1px);
  }

  .gelato-hero__trademark {
    margin-left: 1px;
    font-size: 0.5em;
  }

  .gelato-hero__description {
    margin-top: 18px;

    font-size: 11.5px;
    line-height: 1.72;
    letter-spacing: 0.01em;
  }

  .gelato-hero__description br {
    display: none;
  }

  .gelato-hero__actions {
    flex-direction: column;
    gap: 14px;

    width: 100%;
    margin-top: 24px;
  }

  .gelato-hero__button {
    flex: none;

    width: 100%;
    height: 51px;
    padding-right: 16px;
    padding-left: 16px;

    font-size: 13px;
  }

  .gelato-hero__button--document,
  .gelato-hero__button--contact {
    width: 100%;
  }

  .gelato-hero__button-icon {
    width: 17px;
    font-size: 15px;
  }

  .gelato-hero__features {
    justify-content: flex-start;
    gap: 8px;

    margin-top: 24px;
  }

  .gelato-hero__feature {
    min-height: 27px;
    padding: 6px 10px;

    font-size: 10px;
    line-height: 1;
  }

  .gelato-hero__pagination {
    display: none;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .gelato-hero {
    --gelato-visual-height: 460px;
  }

  .gelato-hero__content {
    width: calc(100% - 24px);
  }

  .gelato-hero__title {
    font-size: 23px;
  }

  .gelato-hero__description {
    font-size: 11px;
  }

  .gelato-hero__button {
    font-size: 12px;
  }

  .gelato-hero__feature {
    padding-right: 8px;
    padding-left: 8px;

    font-size: 9.5px;
  }
}

/* ==================================================
   今月の出店情報セクション
================================================== */

.mbc-event-popup,
.mbc-event-popup * {
  box-sizing: border-box;
}

.mbc-event-popup {
  width: 100%;
  margin: 0;
  padding: 96px 32px 94px;

  background-color: #ffffff;

  scroll-margin-top: 100px;
}

.mbc-event-popup__inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.mbc-event-popup__header {
  margin: 0 0 52px;

  text-align: center;
}

.mbc-event-popup__eyebrow {
  margin: 0 0 10px;

  color: #d79b00;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.17em;
}

.mbc-event-popup__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.05em;
}

/* ==================================================
   投稿一覧ボックス
================================================== */

.mbc-event-popup__list {
  width: 100%;
  margin: 0;
  padding: 34px 40px;

  overflow: hidden;

  border-left: 4px solid #dca400;
  border-radius: 24px;

  background-color: #fff9ea;
}

/* ==================================================
   投稿1件
================================================== */

.mbc-event-popup__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;

  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 21px 0;
}

.mbc-event-popup__item + .mbc-event-popup__item {
  border-top: 1px dashed #e9d7ab;
}

/* ==================================================
   投稿タイトル
================================================== */

.mbc-event-popup__post-title {
  min-width: 0;
  margin: 0;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.75;
  letter-spacing: 0.015em;
}

.mbc-event-popup__post-link {
  display: inline;

  color: #351d10;

  text-decoration: none;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.mbc-event-popup__post-link:hover {
  color: #a96f00;
}

.mbc-event-popup__post-link:focus-visible {
  outline: 3px solid rgba(220, 164, 0, 0.28);
  outline-offset: 4px;

  border-radius: 3px;
}

/* ==================================================
   投稿タグ
================================================== */

.mbc-event-popup__tags {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;

  max-width: 310px;
}

.mbc-event-popup__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 33px;
  padding: 6px 16px;

  border-radius: 999px;

  color: #b97700;
  background-color: #ffebae;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

/* ==================================================
   注意書き
================================================== */

.mbc-event-popup__notice {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;

  margin: 31px 0 0;

  color: #a46a45;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
  text-align: center;
}

.mbc-event-popup__notice-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 17px;
  height: 17px;
  margin-top: 1px;

  color: #b2754a;

  font-size: 12px;
  line-height: 1;
}

/* ==================================================
   投稿がない場合
================================================== */

.mbc-event-popup__empty {
  width: 100%;
  padding: 42px 25px;

  border-left: 4px solid #dca400;
  border-radius: 20px;

  background-color: #fff9ea;

  text-align: center;
}

.mbc-event-popup__empty p {
  margin: 0;

  color: #8d593b;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  line-height: 1.7;
}

/* ==================================================
   タブレット表示
================================================== */

@media screen and (max-width: 1024px) {
  .mbc-event-popup {
    padding: 78px 32px 82px;

    scroll-margin-top: 90px;
  }

  .mbc-event-popup__inner {
    max-width: 860px;
  }

  .mbc-event-popup__header {
    margin-bottom: 45px;
  }

  .mbc-event-popup__title {
    font-size: 32px;
  }

  .mbc-event-popup__list {
    padding: 29px 34px;
  }

  .mbc-event-popup__item {
    gap: 22px;
  }

  .mbc-event-popup__tags {
    max-width: 250px;
  }
}

/* ==================================================
   スマートフォン表示
================================================== */

@media screen and (max-width: 767px) {
  .mbc-event-popup {
    padding: 62px 15px 69px;

    scroll-margin-top: 75px;
  }

  .mbc-event-popup__inner {
    max-width: 540px;
  }

  .mbc-event-popup__header {
    margin-bottom: 35px;
  }

  .mbc-event-popup__eyebrow {
    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .mbc-event-popup__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .mbc-event-popup__list {
    padding: 18px 20px;

    border-left-width: 3px;
    border-radius: 18px;
  }

  .mbc-event-popup__item {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 11px;

    min-height: 0;
    padding: 20px 0;
  }

  .mbc-event-popup__post-title {
    font-size: 14px;
    line-height: 1.7;
  }

  .mbc-event-popup__tags {
    justify-content: flex-start;

    max-width: none;
  }

  .mbc-event-popup__tag {
    min-height: 30px;
    padding: 5px 13px;

    font-size: 11px;
  }

  .mbc-event-popup__notice {
    justify-content: flex-start;

    margin-top: 24px;

    font-size: 10.5px;
    text-align: left;
  }

  .mbc-event-popup__empty {
    padding: 34px 20px;

    border-left-width: 3px;
    border-radius: 17px;
  }
}

/* ==================================================
   小型スマートフォン
================================================== */

@media screen and (max-width: 360px) {
  .mbc-event-popup {
    padding-right: 12px;
    padding-left: 12px;
  }

  .mbc-event-popup__title {
    font-size: 25px;
  }

  .mbc-event-popup__list {
    padding-right: 17px;
    padding-left: 17px;
  }

  .mbc-event-popup__post-title {
    font-size: 13px;
  }

  .mbc-event-popup__tag {
    font-size: 10.5px;
  }
}

/* ==================================================
   こんなお悩みはありませんか？ セクション
================================================== */

.pain-points,
.pain-points * {
  box-sizing: border-box;
}

.pain-points {
  width: 100%;
  margin: 0;
  padding: 96px 24px 128px;
  background-color: #f8f6ef;
}

.pain-points__inner {
  width: 100%;
  max-width: 1110px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.pain-points__header {
  margin: 0 0 58px;
  text-align: center;
}

.pain-points__eyebrow {
  margin: 0 0 12px;
  color: #739695;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14em;
}

.pain-points__title {
  margin: 0;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

/* ==================================================
   カード一覧
================================================== */

.pain-points__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

/* ==================================================
   カード
================================================== */

.pain-points__card {
  min-width: 0;
  min-height: 289px;
  margin: 0;
  padding: 28px 28px 26px;

  border: 1px solid #eee8da;
  border-radius: 24px;

  background-color: rgba(255, 255, 255, 0.72);
  text-align: left;
}

/* ==================================================
   アイコン
================================================== */

.pain-points__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 49px;
  height: 49px;
  margin: 0 0 23px;

  border-radius: 15px;

  color: #234f4d;
  background-color: #e5f0e9;

  font-size: 20px;
  line-height: 1;
  text-align: center;
}

/*
 * Font Awesomeのアイコン形状による視覚的な左寄りを補正
 * 薄緑の背景ボックス自体の位置は変更しない
 */
.pain-points__icon i {
  display: inline-block;
  width: auto;
  height: auto;

  line-height: 1;

  transform: translateX(1.5px);
  transform-origin: center;
}

/* ==================================================
   カード見出し
================================================== */

.pain-points__card-title {
  margin: 0 0 11px;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.65;
  letter-spacing: 0.035em;
}

/* ==================================================
   カード説明文
================================================== */

.pain-points__card-text {
  margin: 0;
  color: #9a5833;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.015em;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .pain-points {
    padding: 80px 32px 96px;
  }

  .pain-points__inner {
    max-width: 760px;
  }

  .pain-points__header {
    margin-bottom: 46px;
  }

  .pain-points__title {
    font-size: 32px;
  }

  .pain-points__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .pain-points__card {
    min-height: 270px;
  }

  .pain-points__card-title br,
  .pain-points__card-text br {
    display: none;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .pain-points {
    padding: 64px 15px 72px;
  }

  .pain-points__inner {
    max-width: 520px;
  }

  .pain-points__header {
    margin-bottom: 36px;
  }

  .pain-points__eyebrow {
    margin-bottom: 9px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .pain-points__title {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.035em;
  }

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

  .pain-points__card {
    min-height: 0;
    padding: 24px 22px 25px;
    border-radius: 20px;
  }

  .pain-points__icon {
    width: 46px;
    height: 46px;
    margin: 0 0 17px;

    border-radius: 14px;
    font-size: 18px;
  }

  .pain-points__icon i {
    transform: translateX(1.5px);
  }

  .pain-points__card-title {
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.6;
  }

  .pain-points__card-title br,
  .pain-points__card-text br {
    display: none;
  }

  .pain-points__card-text {
    font-size: 13px;
    line-height: 1.75;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .pain-points {
    padding-right: 12px;
    padding-left: 12px;
  }

  .pain-points__title {
    font-size: 24px;
  }

  .pain-points__card {
    padding-right: 20px;
    padding-left: 20px;
  }

  .pain-points__card-title {
    font-size: 16px;
  }

  .pain-points__card-text {
    font-size: 12.5px;
  }
}

/* ==================================================
   くるくるジェラートとは？ セクション
================================================== */

.about-gelato,
.about-gelato * {
  box-sizing: border-box;
}

.about-gelato {
  width: 100%;
  margin: 0;
  padding: 84px 32px 104px;
  background-color: transparent;
  background-image: none;
}

.about-gelato__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.about-gelato__header {
  margin: 0 0 55px;
  text-align: center;
}

.about-gelato__eyebrow {
  margin: 0 0 10px;
  color: #759795;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14em;
}

.about-gelato__title {
  margin: 0;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.07em;
}

.about-gelato__trademark {
  display: inline-block;
  margin-left: 2px;

  font-size: 0.55em;
  line-height: 1;
  vertical-align: 0.55em;
}

/* ==================================================
   上段：説明文と商品画像
================================================== */

.about-gelato__introduction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: 70px;
}

.about-gelato__introduction-text {
  min-width: 0;
}

.about-gelato__lead {
  margin: 0 0 23px;
  color: #754429;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.025em;
}

.about-gelato__description {
  margin: 0;
  color: #895236;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ==================================================
   画像
================================================== */

.about-gelato__figure {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #ebe7dc;
}

.about-gelato__figure--product {
  aspect-ratio: 1.36 / 1;
  border-radius: 20px;
}

.about-gelato__figure--installation {
  aspect-ratio: 1.34 / 1;
  border-radius: 20px;
}

.about-gelato__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================================================
   中段：導入イメージ
================================================== */

.about-gelato__installation {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 54px;
  margin-top: 58px;
}

.about-gelato__installation-text {
  min-width: 0;
}

.about-gelato__installation-description {
  margin: 0;
  color: #754429;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* ==================================================
   導入手順カード
================================================== */

.about-gelato__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;

  margin: 58px 0 0;
  padding: 0;

  list-style: none;
}

.about-gelato__step {
  min-width: 0;
  min-height: 184px;
  padding: 27px 25px 24px;

  border: 1px solid #ebe4d5;
  border-radius: 22px;

  background-color: rgba(255, 255, 255, 0.5);
}

.about-gelato__step-header {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 15px;
}

/* 01・02・03 */

.about-gelato__step-number {
  flex: 0 0 auto;
  color: #85a8a4;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 37px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ==================================================
   手順アイコン
================================================== */

.about-gelato__step-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 38px;
  height: 38px;
  margin-left: 14px;

  border-radius: 50%;

  color: #234f4d;
  background-color: #e5f0e9;

  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.about-gelato__step-icon--yellow {
  background-color: #fae8b9;
}

.about-gelato__step-icon--blue {
  background-color: #e4f1f0;
}

/*
 * Font Awesomeアイコンを背景円の中で
 * 視覚的に中央配置
 */

.about-gelato__icon-glyph {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;

  font-size: 1em;
  line-height: 1;
  text-align: center;

  transform: translate(0.4px, 0.4px);
  transform-origin: center;
}

.about-gelato__icon-glyph::before {
  display: block;
  margin: 0;
  line-height: 1;
}

/* アイコン横の線を非表示 */

.about-gelato__step-line {
  display: none;
}

/* ==================================================
   手順カード内の文章
================================================== */

.about-gelato__step-title {
  margin: 0 0 9px;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.035em;
}

.about-gelato__step-text {
  margin: 0;
  color: #905637;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .about-gelato {
    padding: 76px 32px 88px;
    background-color: transparent;
    background-image: none;
  }

  .about-gelato__inner {
    max-width: 820px;
  }

  .about-gelato__header {
    margin-bottom: 46px;
  }

  .about-gelato__title {
    font-size: 31px;
  }

  .about-gelato__introduction {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    gap: 38px;
  }

  .about-gelato__lead {
    font-size: 14px;
  }

  .about-gelato__description {
    font-size: 11.5px;
  }

  .about-gelato__installation {
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
    gap: 38px;
    margin-top: 48px;
  }

  .about-gelato__installation-description {
    font-size: 13.5px;
  }

  .about-gelato__steps {
    gap: 16px;
    margin-top: 48px;
  }

  .about-gelato__step {
    padding: 24px 20px 22px;
  }

  .about-gelato__step-number {
    font-size: 33px;
  }

  .about-gelato__step-title {
    font-size: 14px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .about-gelato {
    padding: 62px 15px 72px;
    background-color: transparent;
    background-image: none;
  }

  .about-gelato__inner {
    max-width: 560px;
  }

  .about-gelato__header {
    margin-bottom: 35px;
  }

  .about-gelato__eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .about-gelato__title {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.045em;
  }

  .about-gelato__introduction {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-gelato__lead {
    margin-bottom: 19px;
    font-size: 14px;
    line-height: 1.8;
  }

  .about-gelato__description {
    font-size: 11.5px;
    line-height: 1.75;
  }

  .about-gelato__figure--product,
  .about-gelato__figure--installation {
    border-radius: 16px;
  }

  /*
   * スマートフォンのみ順番を変更
   * 文章 → エプロン姿の女性画像
   */
  .about-gelato__installation {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 38px;
  }

  .about-gelato__installation-text {
    order: 1;
  }

  .about-gelato__figure--installation {
    order: 2;
  }

  .about-gelato__installation-description {
    font-size: 13px;
    line-height: 1.8;
  }

  .about-gelato__steps {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 42px;
  }

  .about-gelato__step {
    min-height: 0;
    padding: 23px 21px 22px;
    border-radius: 18px;
  }

  .about-gelato__step-header {
    margin-bottom: 13px;
  }

  .about-gelato__step-number {
    font-size: 32px;
  }

  .about-gelato__step-icon {
    width: 36px;
    height: 36px;
    margin-left: 12px;
    font-size: 13px;
  }

  .about-gelato__step-title {
    margin-bottom: 7px;
    font-size: 15px;
  }

  .about-gelato__step-text {
    font-size: 12px;
    line-height: 1.7;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .about-gelato {
    padding-right: 12px;
    padding-left: 12px;
  }

  .about-gelato__title {
    font-size: 24px;
  }

  .about-gelato__lead {
    font-size: 13px;
  }

  .about-gelato__step {
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* ==================================================
   選ばれる理由セクション
================================================== */

.features-reasons,
.features-reasons * {
  box-sizing: border-box;
}

.features-reasons {
  width: 100%;
  margin: 0;
  padding: 78px 32px 98px;

  background-color: transparent;
  background-image: none;
}

.features-reasons__inner {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.features-reasons__header {
  margin: 0 0 61px;
  text-align: center;
}

.features-reasons__eyebrow {
  margin: 0 0 10px;
  color: #769897;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.features-reasons__title {
  margin: 0;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

/* ==================================================
   カード一覧
================================================== */

.features-reasons__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;
}

/* ==================================================
   カード
================================================== */

.features-reasons__card {
  min-width: 0;
  min-height: 234px;
  margin: 0;
  padding: 28px 28px 26px;

  border: 1px solid #eee8dc;
  border-radius: 23px;

  background-color: rgba(255, 255, 255, 0.5);
}

/* ==================================================
   アイコン背景
================================================== */

.features-reasons__icon {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;
  margin: 0 0 23px;
  padding: 0;

  border-radius: 15px;

  color: #214e4c;

  font-size: 19px;
  line-height: 1;
  text-align: center;
}

.features-reasons__icon--green {
  background-color: #e5f0e9;
}

.features-reasons__icon--yellow {
  color: #d99700;
  background-color: #ffedbd;
}

.features-reasons__icon--blue {
  background-color: #eaf5f5;
}

/* ==================================================
   Font Awesomeアイコン共通設定
================================================== */

.features-reasons__icon-glyph {
  display: block;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0;

  font-size: 1em;
  line-height: 1;
  text-align: center;

  transform-origin: center center;
}

.features-reasons__icon-glyph::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}

/* ==================================================
   アイコンごとの視覚的中央補正
================================================== */

.features-reasons__icon-glyph--user {
  transform: translate(0.6px, 0.4px);
}

.features-reasons__icon-glyph--box {
  transform: translate(0.4px, 0.2px);
}

.features-reasons__icon-glyph--plus {
  transform: translate(0.2px, 0.1px);
}

.features-reasons__icon-glyph--camera {
  transform: translate(0.3px, 0.1px);
}

/*
 * fa-solid fa-dropletは字形の重心が左寄りに見えるため、
 * アイコン本体だけを右へ移動
 */
.features-reasons__icon-glyph--droplet,
.features-reasons__icon .fa-droplet {
  transform: translate(1.6px, 0.2px);
}

.features-reasons__icon-glyph--truck {
  transform: translate(0.5px, 0.3px);
}

/* ==================================================
   カード見出し
================================================== */

.features-reasons__card-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;

  width: 100%;
  margin: 0 0 12px;
}

.features-reasons__number {
  flex: 0 0 auto;
  color: #638d8a;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.features-reasons__card-title {
  min-width: 0;
  margin: 0;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

/* ==================================================
   カード本文
================================================== */

.features-reasons__card-text {
  margin: 0;
  color: #925638;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .features-reasons {
    padding: 74px 32px 88px;
  }

  .features-reasons__inner {
    max-width: 780px;
  }

  .features-reasons__header {
    margin-bottom: 48px;
  }

  .features-reasons__title {
    font-size: 32px;
  }

  .features-reasons__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .features-reasons__card {
    min-height: 220px;
    padding: 26px 25px 24px;
  }

  .features-reasons__card-title {
    font-size: 16px;
  }

  .features-reasons__card-text {
    font-size: 13px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .features-reasons {
    padding: 62px 15px 72px;
  }

  .features-reasons__inner {
    max-width: 540px;
  }

  .features-reasons__header {
    margin-bottom: 36px;
  }

  .features-reasons__eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .features-reasons__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.045em;
  }

  .features-reasons__list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .features-reasons__card {
    min-height: 0;
    padding: 23px 21px 24px;
    border-radius: 19px;
  }

  .features-reasons__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;

    border-radius: 14px;

    font-size: 18px;
  }

  /*
   * スマートフォンでも雫アイコンの中央補正を維持
   */
  .features-reasons__icon-glyph--droplet,
  .features-reasons__icon .fa-droplet {
    transform: translate(1.5px, 0.2px);
  }

  .features-reasons__card-heading {
    gap: 7px;
    margin-bottom: 9px;
  }

  .features-reasons__number {
    font-size: 12px;
  }

  .features-reasons__card-title {
    font-size: 16px;
    line-height: 1.55;
  }

  .features-reasons__card-text {
    font-size: 13px;
    line-height: 1.75;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .features-reasons {
    padding-right: 12px;
    padding-left: 12px;
  }

  .features-reasons__title {
    font-size: 25px;
  }

  .features-reasons__card {
    padding-right: 19px;
    padding-left: 19px;
  }

  .features-reasons__card-title {
    font-size: 15px;
  }

  .features-reasons__card-text {
    font-size: 12.5px;
  }
}

/* ==================================================
   品質紹介セクション
   希少な「ガンジー牛乳」を贅沢に使用
================================================== */

.quality-section,
.quality-section * {
  box-sizing: border-box;
}

/* ==================================================
   セクション全体
   Lightningのコンテンツ幅制限から画面全幅へ展開
================================================== */

.quality-section {
  position: relative;

  width: 100vw !important;
  max-width: 100vw !important;

  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;

  padding: 0 !important;

  overflow: hidden;

  background-color: #f8f6ef;
  background-image: none;

  scroll-margin-top: 100px;
}

/* 右上の淡い円形装飾 */

.quality-section::before {
  position: absolute;
  top: -210px;
  right: -85px;
  z-index: 0;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  content: "";

  background-color: rgba(224, 236, 226, 0.55);

  pointer-events: none;
}

/* ==================================================
   2カラムレイアウト
================================================== */

.quality-section__inner {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: stretch;

  /*
   * 画像と右側コンテンツの間隔
   */
  column-gap: clamp(48px, 5vw, 78px);
  row-gap: 0;

  width: 100%;
  max-width: 100%;

  margin: 0;
  padding: 0;
}

/* ==================================================
   左カラム：加勢牧場画像
================================================== */

.quality-section__inner > .quality-section__media {
  position: relative !important;
  inset: auto !important;

  display: block !important;

  align-self: stretch !important;
  justify-self: stretch !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  border: 0 !important;
  border-radius: 0 !important;

  background-color: #ffffff !important;
  background-image: none !important;

  box-shadow: none !important;
  transform: none !important;
}

/*
 * 画像を左カラム全体へ拡大
 *
 * object-fit: cover によって、
 * 右カラムの高さに合わせて画像を全面表示
 */
.quality-section__media > .quality-section__main-image {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  float: none !important;

  width: 100% !important;
  inline-size: 100% !important;

  min-width: 100% !important;
  max-width: none !important;

  height: 100% !important;
  block-size: 100% !important;

  min-height: 100% !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  aspect-ratio: auto !important;

  object-fit: cover !important;
  object-position: center center !important;

  vertical-align: top;

  background-color: #ffffff !important;

  box-shadow: none !important;
  transform: none !important;
}

/* ==================================================
   右カラム：コンテンツ
================================================== */

.quality-section__content {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;

  /*
   * 指定されたPC表示の余白
   * 上・右・下・左
   */
  padding: 100px 70px 100px 0;
}

/* ==================================================
   テーマ由来の余白を初期化
================================================== */

.quality-section p,
.quality-section ul,
.quality-section li,
.quality-section figure {
  margin-top: 0;
}

.quality-section img {
  box-shadow: none;
}

/* ==================================================
   セクション見出し
================================================== */

.quality-section__header {
  margin: 0 0 19px;
  padding: 0;

  text-align: left;
}

.quality-section__eyebrow {
  margin: 0 0 11px;
  padding: 0;

  color: #759795;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.quality-section__title {
  margin: 0;
  padding: 0;

  border: 0;

  color: #351700;
  background: none;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: clamp(30px, 2.35vw, 38px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.045em;
}

.quality-section__title::before,
.quality-section__title::after {
  display: none;

  content: none;
}

/* ==================================================
   導入文
================================================== */

.quality-section__introduction {
  margin: 0 0 20px;
  padding: 0;

  color: #754429;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.015em;
}

.quality-section__introduction p {
  margin: 0;
  padding: 0;

  color: inherit;
}

.quality-section__introduction p + p {
  margin-top: 10px;
}

/* ==================================================
   アイス画像・販売店舗
================================================== */

.quality-section__product-row {
  display: grid;
  grid-template-columns:
    minmax(210px, 0.92fr)
    minmax(0, 1.08fr);

  align-items: start;
  gap: 21px;

  width: 100%;

  margin: 18px 0 0;
  padding: 0;
}

/* 商品画像 */

.quality-section__product-figure {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 8px;

  background-color: #ece8de;
}

.quality-section__product-image {
  display: block;

  width: 100%;
  max-width: none;
  height: auto;

  margin: 0;
  padding: 0;

  aspect-ratio: 1.48 / 1;

  object-fit: cover;
  object-position: center;

  border: 0;

  vertical-align: top;
}

/* ==================================================
   販売店舗
================================================== */

.quality-section__shops {
  min-width: 0;

  margin: 0;
  padding: 2px 0 0;
}

.quality-section__shops-title {
  margin: 0 0 8px;
  padding: 0;

  color: #4a2b1a;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.015em;
}

.quality-section__shop-list {
  margin: 0;
  padding: 0;

  color: #895236;

  list-style: none;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.8;
}

.quality-section__shop-list li {
  position: relative;

  margin: 0;
  padding: 0 0 0 13px;
}

.quality-section__shop-list li::before {
  position: absolute;
  top: 0;
  left: 0;

  content: "・";

  color: #b88b64;
}

/* 販売中ラベル */

.quality-section__sale-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 29px;

  margin: 10px 0 0;
  padding: 5px 15px;

  border: 0;
  border-radius: 999px;

  color: #ffffff;
  background-color: #315b59;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ==================================================
   商品補足文
================================================== */

.quality-section__product-lead {
  margin: 25px 0 0;
  padding: 0;

  color: #9a5a37;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ==================================================
   フレーバー説明
================================================== */

.quality-section__flavors {
  display: grid;
  gap: 19px;

  width: 100%;

  margin: 22px 0 0;
  padding: 0;
}

.quality-section__flavor {
  margin: 0;
  padding: 0;
}

.quality-section__flavor-title {
  position: relative;

  margin: 0 0 4px;
  padding: 0 0 0 15px;

  color: #8c5334;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.015em;
}

.quality-section__flavor-title::before {
  position: absolute;
  top: 0;
  left: 0;

  content: "・";

  color: #b88b64;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
}

.quality-section__flavor-text {
  margin: 0;
  padding: 0;

  color: #895236;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
}

/* ==================================================
   ブランド表示
================================================== */

.quality-section__brand {
  display: flex;
  align-items: center;
  gap: 14px;

  width: 100%;

  margin: 34px 0 0;
  padding: 0;
}

.quality-section__brand-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 51px;
  height: 51px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 2px solid #e7ad28;
  border-radius: 50%;

  background-color: #ffffff;
}

.quality-section__brand-image {
  display: block;

  width: 84%;
  max-width: none;
  height: 84%;

  margin: 0;
  padding: 0;

  object-fit: contain;
  object-position: center;

  border: 0;
}

.quality-section__brand-text {
  min-width: 0;

  margin: 0;
  padding: 0;
}

/* 金色ライン */

.quality-section__brand-line {
  display: block;

  width: 57px;
  height: 2px;

  margin: 0 0 7px;
  padding: 0;

  background-color: #dfa61e;
}

.quality-section__brand-name {
  margin: 0 0 1px;
  padding: 0;

  color: #3d2518;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.quality-section__brand-copy {
  margin: 0;
  padding: 0;

  color: #a16a44;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}

/* ==================================================
   中型PC
   1025px〜1280px
================================================== */

@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .quality-section__inner {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1.05fr);

    column-gap: 48px;
  }

  .quality-section__content {
    padding: 86px 42px 86px 0;
  }

  .quality-section__title {
    font-size: 32px;
  }

  .quality-section__introduction {
    font-size: 13px;
  }

  .quality-section__product-row {
    grid-template-columns:
      minmax(190px, 0.9fr)
      minmax(0, 1.1fr);

    gap: 18px;
  }
}

/* ==================================================
   タブレット表示
   768px〜1024px
================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .quality-section {
    scroll-margin-top: 90px;
  }

  .quality-section::before {
    top: -170px;
    right: -110px;

    width: 300px;
    height: 300px;
  }

  .quality-section__inner {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);

    column-gap: 36px;

    width: 100%;
    max-width: 100%;
  }

  .quality-section__inner > .quality-section__media {
    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;
  }

  .quality-section__media > .quality-section__main-image {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
  }

  .quality-section__content {
    padding: 72px 32px 72px 0;
  }

  .quality-section__title {
    font-size: clamp(27px, 3.4vw, 30px);
    line-height: 1.4;
  }

  .quality-section__introduction {
    font-size: 12.5px;
  }

  .quality-section__product-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .quality-section__product-figure {
    max-width: 420px;
  }

  .quality-section__shops-title {
    font-size: 12.5px;
  }

  .quality-section__shop-list {
    font-size: 11px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .quality-section {
    padding: 0 !important;

    scroll-margin-top: 75px;
  }

  .quality-section::before {
    top: -100px;
    right: -85px;

    width: 210px;
    height: 210px;
  }

  /*
   * 見出し → 加勢牧場画像 → 本文の順に並べる
   */
  .quality-section__inner {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    gap: 0;
  }

  /*
   * contentの各要素をinnerの子要素として扱い、
   * 画像を見出しと本文の間へ配置
   */
  .quality-section__content {
    display: contents;

    margin: 0;
    padding: 0;
  }

  /* 見出し */

  .quality-section__header {
    order: 1;

    width: 100%;
    max-width: 590px;

    margin: 0 auto;
    padding: 62px 15px 35px;

    text-align: center;
  }

  .quality-section__eyebrow {
    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .quality-section__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.45;
    letter-spacing: 0.04em;
  }

  /* 加勢牧場画像 */

  .quality-section__inner > .quality-section__media {
    position: relative !important;

    order: 2;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #ffffff !important;
  }

  .quality-section__media > .quality-section__main-image {
    position: static !important;
    inset: auto !important;

    width: 100% !important;
    inline-size: 100% !important;

    min-width: 100% !important;
    max-width: none !important;

    height: auto !important;
    block-size: auto !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: auto !important;

    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 導入文 */

  .quality-section__introduction {
    order: 3;

    width: 100%;
    max-width: 590px;

    margin: 0 auto;
    padding: 32px 15px 0;

    font-size: 13px;
    line-height: 1.8;
  }

  /* 商品画像・販売店舗 */

  .quality-section__product-row {
    order: 4;

    grid-template-columns: 1fr;
    gap: 20px;

    width: 100%;
    max-width: 590px;

    margin: 28px auto 0;
    padding: 0 15px;
  }

  .quality-section__product-figure {
    width: 100%;
    max-width: none;

    border-radius: 10px;
  }

  .quality-section__product-image {
    width: 100%;
    height: auto;

    aspect-ratio: auto;
  }

  .quality-section__shops-title {
    font-size: 13px;
  }

  .quality-section__shop-list {
    font-size: 11.5px;
  }

  /* 商品補足文 */

  .quality-section__product-lead {
    order: 5;

    width: 100%;
    max-width: 590px;

    margin: 25px auto 0;
    padding: 0 15px;

    font-size: 11.5px;
  }

  /* フレーバー */

  .quality-section__flavors {
    order: 6;

    width: 100%;
    max-width: 590px;

    margin: 22px auto 0;
    padding: 0 15px;
  }

  .quality-section__flavor-title {
    font-size: 12.5px;
  }

  .quality-section__flavor-text {
    font-size: 11.5px;
  }

  /* ブランド表示 */

  .quality-section__brand {
    order: 7;

    width: calc(100% - 30px);
    max-width: 560px;

    margin: 32px auto 0;
    padding: 0 0 72px;
  }

  .quality-section__brand-line {
    width: 48px;
    margin-bottom: 6px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .quality-section__header {
    padding-top: 56px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .quality-section__title {
    font-size: 25px;
  }

  .quality-section__introduction,
  .quality-section__product-row,
  .quality-section__product-lead,
  .quality-section__flavors {
    padding-right: 12px;
    padding-left: 12px;
  }

  .quality-section__introduction {
    font-size: 12.5px;
  }

  .quality-section__brand {
    width: calc(100% - 24px);

    gap: 11px;
  }

  .quality-section__brand-line {
    width: 38px;
  }
}

/* ==================================================
   さまざまな場所で活躍します セクション
================================================== */

.scenes-section,
.scenes-section * {
  box-sizing: border-box;
}

.scenes-section {
  width: 100%;
  margin: 0;
  padding: 96px 32px 90px;
  background-color: #fbfaf5;
}

.scenes-section__inner {
  width: 100%;
  max-width: 1105px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.scenes-section__header {
  margin: 0 0 54px;
}

.scenes-section__eyebrow {
  margin: 0 0 10px;
  color: #739492;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.scenes-section__title {
  margin: 0;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.045em;
}

/* ==================================================
   カード一覧
================================================== */

.scenes-section__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
}

/* ==================================================
   カード
================================================== */

.scenes-section__card {
  min-width: 0;
  min-height: 236px;
  margin: 0;
  padding: 25px 25px 24px;

  border: 1px solid #ece6d9;
  border-radius: 23px;

  background-color: rgba(255, 255, 255, 0.54);
}

/* ==================================================
   アイコン背景
================================================== */

.scenes-section__icon {
  display: grid;
  place-items: center;

  width: 45px;
  height: 45px;
  margin: 0 0 21px;
  padding: 0;

  border-radius: 14px;

  color: #214d4b;

  font-size: 17px;
  line-height: 1;
  text-align: center;
}

.scenes-section__icon--green {
  background-color: #e5f0e9;
}

.scenes-section__icon--yellow {
  color: #b77d00;
  background-color: #ffecb9;
}

.scenes-section__icon--blue {
  background-color: #eaf4f4;
}

/* ==================================================
   Font Awesomeアイコン
================================================== */

.scenes-section__icon-glyph {
  display: block;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0;

  font-size: 1em;
  line-height: 1;
  text-align: center;

  transform-origin: center center;
}

.scenes-section__icon-glyph::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}

/*
 * Font Awesomeの字形ごとの重心を微調整し、
 * アイコン背景内で視覚的に中央配置
 */

.scenes-section__icon-glyph--mug {
  transform: translate(0.4px, -0.2px);
}

.scenes-section__icon-glyph--map {
  transform: translate(0.5px, 0.2px);
}

.scenes-section__icon-glyph--building {
  transform: translate(0.3px, 0.1px);
}

.scenes-section__icon-glyph--store {
  transform: translate(0.4px, 0);
}

.scenes-section__icon-glyph--calendar {
  transform: translate(0.3px, 0.2px);
}

.scenes-section__icon-glyph--truck {
  transform: translate(0.7px, 0.3px);
}

.scenes-section__icon-glyph--leaf {
  transform: translate(0.5px, 0.2px);
}

.scenes-section__icon-glyph--box {
  transform: translate(0.3px, 0.2px);
}

/* ==================================================
   カード見出し
================================================== */

.scenes-section__card-title {
  margin: 0 0 9px;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

/* ==================================================
   カード本文
================================================== */

.scenes-section__card-text {
  margin: 0;
  color: #925638;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* ==================================================
   and more
================================================== */

.scenes-section__more {
  margin: 27px 0 0;
  color: #739492;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-align: right;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .scenes-section {
    padding: 78px 32px 82px;
  }

  .scenes-section__inner {
    max-width: 780px;
  }

  .scenes-section__header {
    margin-bottom: 45px;
  }

  .scenes-section__title {
    font-size: 32px;
  }

  .scenes-section__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .scenes-section__card {
    min-height: 218px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .scenes-section {
    padding: 62px 15px 70px;
  }

  .scenes-section__inner {
    max-width: 540px;
  }

  .scenes-section__header {
    margin-bottom: 35px;
  }

  .scenes-section__eyebrow {
    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .scenes-section__title {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.035em;
  }

  .scenes-section__cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .scenes-section__card {
    min-height: 0;
    padding: 23px 21px 24px;

    border-radius: 19px;
  }

  .scenes-section__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 17px;

    border-radius: 13px;

    font-size: 17px;
  }

  .scenes-section__card-title {
    margin-bottom: 7px;

    font-size: 16px;
    line-height: 1.55;
  }

  .scenes-section__card-text {
    font-size: 13px;
    line-height: 1.75;
  }

  .scenes-section__more {
    margin-top: 22px;

    font-size: 11px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .scenes-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  .scenes-section__title {
    font-size: 24px;
  }

  .scenes-section__card {
    padding-right: 19px;
    padding-left: 19px;
  }

  .scenes-section__card-title {
    font-size: 15px;
  }

  .scenes-section__card-text {
    font-size: 12.5px;
  }
}

/* ==================================================
   導入するメリット セクション
================================================== */

.benefits-section,
.benefits-section * {
  box-sizing: border-box;
}

.benefits-section {
  width: 100%;
  margin: 0;
  padding: 96px 32px 94px;
  background-color: #f8f6ef;
}

.benefits-section__inner {
  width: 100%;
  max-width: 1105px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.benefits-section__header {
  margin: 0 0 62px;
  text-align: center;
}

.benefits-section__eyebrow {
  margin: 0 0 10px;
  color: #739694;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.benefits-section__title {
  margin: 0;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

/* ==================================================
   メリット一覧
================================================== */

.benefits-section__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 21px;

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;
}

/* ==================================================
   メリットカード
================================================== */

.benefits-section__card {
  min-width: 0;
  min-height: 291px;
  margin: 0;
  padding: 34px 27px 28px;

  border: 1px solid #eee8dc;
  border-radius: 24px;

  background-color: rgba(255, 255, 255, 0.74);
  text-align: center;
}

/* ==================================================
   01〜04
================================================== */

.benefits-section__number {
  display: block;
  margin: 0 0 18px;

  color: #bed3d2;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
}

/* ==================================================
   カード見出し
================================================== */

.benefits-section__card-title {
  margin: 0 0 14px;
  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.035em;
}

/* ==================================================
   カード本文
================================================== */

.benefits-section__card-text {
  margin: 0;
  color: #925638;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* ==================================================
   PDFボタン
================================================== */

.benefits-section__action {
  display: flex;
  justify-content: center;
  margin-top: 47px;
}

.benefits-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-width: 298px;
  min-height: 57px;
  padding: 14px 30px;

  border: 0;
  border-radius: 999px;

  color: #ffffff;
  background-color: #e6a900;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.benefits-section__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(92, 65, 0, 0.15);
}

.benefits-section__button:focus-visible {
  outline: 3px solid rgba(230, 169, 0, 0.32);
  outline-offset: 4px;
}

.benefits-section__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;

  font-size: 17px;
  line-height: 1;
  text-align: center;

  transform: translate(0.4px, 0.2px);
}

.benefits-section__button-icon::before {
  display: block;
  margin: 0;
  line-height: 1;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .benefits-section {
    padding: 78px 32px 84px;
  }

  .benefits-section__inner {
    max-width: 780px;
  }

  .benefits-section__header {
    margin-bottom: 48px;
  }

  .benefits-section__title {
    font-size: 32px;
  }

  .benefits-section__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .benefits-section__card {
    min-height: 250px;
    padding: 30px 27px 27px;
  }

  .benefits-section__number {
    margin-bottom: 16px;
    font-size: 50px;
  }

  .benefits-section__action {
    margin-top: 40px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .benefits-section {
    padding: 62px 15px 70px;
  }

  .benefits-section__inner {
    max-width: 540px;
  }

  .benefits-section__header {
    margin-bottom: 36px;
  }

  .benefits-section__eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .benefits-section__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.045em;
  }

  .benefits-section__list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .benefits-section__card {
    min-height: 0;
    padding: 27px 22px 25px;
    border-radius: 19px;
  }

  .benefits-section__number {
    margin-bottom: 13px;
    font-size: 46px;
  }

  .benefits-section__card-title {
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 1.55;
  }

  .benefits-section__card-text {
    font-size: 13px;
    line-height: 1.75;
  }

  .benefits-section__action {
    margin-top: 32px;
  }

  .benefits-section__button {
    width: 100%;
    min-width: 0;
    min-height: 53px;
    padding: 13px 18px;

    font-size: 13px;
  }

  .benefits-section__button-icon {
    width: 17px;
    height: 17px;
    font-size: 16px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .benefits-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  .benefits-section__title {
    font-size: 25px;
  }

  .benefits-section__card {
    padding-right: 19px;
    padding-left: 19px;
  }

  .benefits-section__card-title {
    font-size: 15px;
  }

  .benefits-section__card-text {
    font-size: 12.5px;
  }

  .benefits-section__button {
    font-size: 12px;
  }
}

/* ==================================================
   導入までの流れ セクション
================================================== */

.flow-section,
.flow-section * {
  box-sizing: border-box;
}

.flow-section {
  width: 100%;
  margin: 0;
  padding: 94px 32px 92px;

  background-color: #fbfaf6;
}

.flow-section__inner {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.flow-section__header {
  margin: 0 0 63px;
  text-align: center;
}

.flow-section__eyebrow {
  margin: 0 0 10px;

  color: #719391;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.17em;
}

.flow-section__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.055em;
}

.flow-section__lead {
  margin: 10px 0 0;

  color: #995a36;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.025em;
}

/* ==================================================
   フロー一覧
================================================== */

.flow-section__list {
  display: grid;
  gap: 39px;

  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;

  list-style: none;
}

/* ==================================================
   フロー項目
================================================== */

.flow-section__item {
  position: relative;

  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  align-items: center;
  column-gap: 25px;

  min-height: 66px;
  margin: 0;
}

/*
 * 番号間をつなぐ縦線
 */
.flow-section__item:not(.flow-section__item--last)::after {
  position: absolute;
  top: 64px;
  bottom: -41px;
  left: 32px;
  z-index: 0;

  width: 1px;

  content: "";

  background-color: #e5ddcc;
}

/* ==================================================
   ステップ番号
================================================== */

.flow-section__number {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 65px;
  height: 65px;

  border-radius: 50%;

  color: #ffffff;
  background-color: #194b49;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.flow-section__number--accent {
  background-color: #e6a900;
}

/* ==================================================
   フロー文章
================================================== */

.flow-section__content {
  min-width: 0;
}

.flow-section__item-title {
  margin: 0 0 6px;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

.flow-section__item-text {
  margin: 0;

  color: #985936;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.015em;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .flow-section {
    padding: 78px 32px 84px;
  }

  .flow-section__inner {
    max-width: 720px;
  }

  .flow-section__header {
    margin-bottom: 52px;
  }

  .flow-section__title {
    font-size: 32px;
  }

  .flow-section__list {
    max-width: 680px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .flow-section {
    padding: 62px 15px 70px;
  }

  .flow-section__inner {
    max-width: 540px;
  }

  .flow-section__header {
    margin-bottom: 42px;
  }

  .flow-section__eyebrow {
    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .flow-section__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .flow-section__lead {
    margin-top: 8px;

    font-size: 12.5px;
    line-height: 1.75;
  }

  .flow-section__list {
    gap: 31px;
  }

  .flow-section__item {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    column-gap: 17px;

    min-height: 54px;
  }

  .flow-section__item:not(.flow-section__item--last)::after {
    top: 52px;
    bottom: -33px;
    left: 25.5px;
  }

  .flow-section__number {
    width: 52px;
    height: 52px;

    font-size: 16px;
  }

  .flow-section__content {
    padding-top: 2px;
  }

  .flow-section__item-title {
    margin-bottom: 5px;

    font-size: 16px;
    line-height: 1.5;
  }

  .flow-section__item-text {
    font-size: 12px;
    line-height: 1.75;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .flow-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  .flow-section__title {
    font-size: 25px;
  }

  .flow-section__lead {
    font-size: 12px;
  }

  .flow-section__item {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
  }

  .flow-section__number {
    width: 48px;
    height: 48px;

    font-size: 15px;
  }

  .flow-section__item:not(.flow-section__item--last)::after {
    top: 48px;
    left: 23.5px;
  }

  .flow-section__item-title {
    font-size: 15px;
  }

  .flow-section__item-text {
    font-size: 11.5px;
  }
}

/* ==================================================
   資料PDF CTAセクション
================================================== */

.document-cta,
.document-cta * {
  box-sizing: border-box;
}

.document-cta {
  position: relative;
  isolation: isolate;

  width: 100%;
  margin: 0;
  padding: 94px 32px 91px;

  overflow: hidden;

  background-color: #f8f6ef;
}

/* ==================================================
   背景装飾
================================================== */

.document-cta__decoration {
  position: absolute;
  z-index: 0;

  display: block;

  border-radius: 50%;

  pointer-events: none;
}

.document-cta__decoration--left {
  top: 39px;
  left: 39px;

  width: 160px;
  height: 160px;

  background-color: rgba(229, 238, 228, 0.58);
}

.document-cta__decoration--right {
  right: 40px;
  bottom: 36px;

  width: 224px;
  height: 224px;

  background-color: rgba(252, 241, 211, 0.52);
}

/* ==================================================
   コンテンツ
================================================== */

.document-cta__inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 760px;
  margin: 0 auto;

  text-align: center;
}

/* ==================================================
   キャラクターアイコン
================================================== */

.document-cta__character {
  display: block;

  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background-color: transparent;
}

/*
 * 画像要素そのものに金色のフチを付けることで、
 * 画像とフチの間の余白をなくす
 */
.document-cta__character-image {
  display: block;

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  border: 4px solid #e6a900;
  border-radius: 50%;

  background-color: #ffffff;

  object-fit: cover;
  object-position: center;

  transform: none;
}

/* ==================================================
   見出し
================================================== */

.document-cta__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.055em;
}

/* ==================================================
   説明文
================================================== */

.document-cta__description {
  margin: 11px 0 0;

  color: #935634;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* ==================================================
   PDFボタン
================================================== */

.document-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-width: 238px;
  min-height: 61px;
  margin-top: 31px;
  padding: 15px 31px;

  border: 0;
  border-radius: 999px;

  color: #ffffff;
  background-color: #e6a900;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 7px 15px rgba(119, 84, 0, 0.11);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.document-cta__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(119, 84, 0, 0.18);
}

.document-cta__button:focus-visible {
  outline: 3px solid rgba(230, 169, 0, 0.34);
  outline-offset: 4px;
}

/* ==================================================
   Font Awesomeアイコン
================================================== */

.document-cta__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;
  margin: 0;
  padding: 0;

  font-size: 18px;
  line-height: 1;
  text-align: center;

  transform: translate(0.5px, 0.2px);
  transform-origin: center;
}

.document-cta__button-icon::before {
  display: block;
  margin: 0;
  line-height: 1;
}

/* ==================================================
   注釈
================================================== */

.document-cta__note {
  margin: 19px 0 0;

  color: #a87354;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.015em;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .document-cta {
    padding: 82px 32px 84px;
  }

  .document-cta__decoration--left {
    top: 34px;
    left: 28px;

    width: 135px;
    height: 135px;
  }

  .document-cta__decoration--right {
    right: 25px;
    bottom: 30px;

    width: 185px;
    height: 185px;
  }

  .document-cta__title {
    font-size: 32px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .document-cta {
    padding: 64px 15px 69px;
  }

  .document-cta__inner {
    max-width: 540px;
  }

  .document-cta__decoration--left {
    top: 24px;
    left: -36px;

    width: 120px;
    height: 120px;
  }

  .document-cta__decoration--right {
    right: -55px;
    bottom: 25px;

    width: 155px;
    height: 155px;
  }

  .document-cta__character {
    width: 70px;
    height: 70px;
    margin-bottom: 21px;
  }

  .document-cta__character-image {
    border-width: 4px;
  }

  .document-cta__title {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .document-cta__description {
    margin-top: 10px;

    font-size: 12.5px;
    line-height: 1.8;
  }

  .document-cta__description br {
    display: none;
  }

  .document-cta__button {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    margin-top: 26px;
    padding: 13px 20px;

    font-size: 14px;
  }

  .document-cta__button-icon {
    width: 18px;
    height: 18px;

    font-size: 17px;
  }

  .document-cta__note {
    margin-top: 15px;

    font-size: 10.5px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .document-cta {
    padding-right: 12px;
    padding-left: 12px;
  }

  .document-cta__character {
    width: 66px;
    height: 66px;
  }

  .document-cta__character-image {
    border-width: 4px;
  }

  .document-cta__title {
    font-size: 24px;
  }

  .document-cta__description {
    font-size: 12px;
  }

  .document-cta__button {
    font-size: 13px;
  }
}

/* ==================================================
   取り扱い店舗一覧セクション
================================================== */

.store-list,
.store-list * {
  box-sizing: border-box;
}

.store-list {
  position: relative;
  isolation: isolate;

  width: 100%;
  margin: 0;
  padding: 96px 32px 92px;

  overflow: hidden;

  background-color: #fbfaf5;
}

/* ==================================================
   背景装飾
================================================== */

.store-list__decoration {
  position: absolute;
  z-index: 0;

  border-radius: 50%;

  pointer-events: none;
}

.store-list__decoration--upper {
  top: 65px;
  right: 34px;

  width: 143px;
  height: 143px;

  background-color: rgba(252, 241, 211, 0.52);
}

.store-list__decoration--lower {
  bottom: 45px;
  left: 39px;

  width: 192px;
  height: 192px;

  background-color: rgba(229, 238, 228, 0.58);
}

/* ==================================================
   セクション内側
================================================== */

.store-list__inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1105px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.store-list__header {
  margin: 0 0 57px;
  text-align: center;
}

.store-list__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.05em;
}

.store-list__lead {
  margin: 8px 0 0;

  color: #945734;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.025em;
}

/* ==================================================
   テーブル外枠
================================================== */

.store-list__table-wrapper {
  width: 100%;

  overflow: hidden;

  border: 1px solid #e9e2d4;
  border-radius: 8px;

  background-color: rgba(255, 255, 255, 0.56);
}

.store-list__table {
  width: 100%;
  margin: 0;

  border: 0;
  border-collapse: collapse;
  border-spacing: 0;

  table-layout: fixed;
}

/* ==================================================
   テーブル項目名
   店舗名・取扱製品・HP・Instagram
================================================== */

.store-list__table-head {
  background-color: #f6f3eb;
}

.store-list__heading {
  height: 49px;
  padding: 12px 16px;

  border: 0;

  color: #351d0e;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.025em;
  text-align: left;
  vertical-align: middle;
}

.store-list__heading--shop {
  width: 25%;
}

.store-list__heading--product {
  width: 57%;
}

.store-list__heading--link {
  width: 9%;
  text-align: center;
}

/* ==================================================
   テーブル行
================================================== */

.store-list__row {
  border-top: 1px solid #eee8dc;
}

.store-list__cell {
  height: 67px;
  padding: 12px 16px;

  border: 0;

  color: #70422a;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  vertical-align: middle;
}

.store-list__cell--shop {
  padding-right: 24px;
}

.store-list__cell--link {
  padding-right: 8px;
  padding-left: 8px;

  text-align: center;
}

/* ==================================================
   店舗情報
================================================== */

.store-list__shop-name {
  margin: 0 0 2px;

  color: #351d0e;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.store-list__location {
  margin: 0;

  color: #a0613e;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

/* ==================================================
   リンクアイコン
================================================== */

.store-list__icon-link {
  display: inline-grid;
  place-items: center;

  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;

  border-radius: 50%;

  color: #754426;
  background-color: #f6f3eb;

  line-height: 1;
  text-decoration: none;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.store-list__icon-link:hover {
  color: #ffffff;
  background-color: #194b49;

  transform: translateY(-2px);

  box-shadow: 0 6px 14px rgba(25, 75, 73, 0.18);
}

.store-list__icon-link:focus-visible {
  outline: 3px solid rgba(25, 75, 73, 0.28);
  outline-offset: 3px;
}

/* ==================================================
   Font Awesomeアイコン中央補正
================================================== */

.store-list__icon {
  display: block;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0;

  font-size: 15px;
  line-height: 1;
  text-align: center;

  transform-origin: center;
}

.store-list__icon::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}

.store-list__icon--globe {
  transform: translate(0.3px, 0.1px);
}

.store-list__icon--instagram {
  transform: translate(0.4px, 0.2px);
}

/* ==================================================
   リンクがない場合
================================================== */

.store-list__empty {
  display: inline-block;

  color: #b67b59;

  font-size: 14px;
  line-height: 1;
  text-align: center;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .store-list {
    padding: 78px 32px 82px;
  }

  .store-list__inner {
    max-width: 900px;
  }

  .store-list__header {
    margin-bottom: 47px;
  }

  .store-list__title {
    font-size: 32px;
  }

  .store-list__decoration--upper {
    top: 45px;
    right: -25px;

    width: 130px;
    height: 130px;
  }

  .store-list__decoration--lower {
    bottom: 30px;
    left: -38px;

    width: 165px;
    height: 165px;
  }

  .store-list__heading--shop {
    width: 27%;
  }

  .store-list__heading--product {
    width: 51%;
  }

  .store-list__heading--link {
    width: 11%;
  }

  .store-list__heading {
    font-size: 13px;
  }

  .store-list__cell {
    font-size: 12px;
  }

  .store-list__shop-name {
    font-size: 13px;
  }

  .store-list__icon-link {
    width: 39px;
    height: 39px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .store-list {
    padding: 62px 15px 70px;
  }

  .store-list__inner {
    max-width: 540px;
  }

  .store-list__header {
    margin-bottom: 35px;
  }

  .store-list__title {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.035em;
  }

  .store-list__lead {
    margin-top: 7px;
    font-size: 12.5px;
  }

  .store-list__decoration--upper {
    top: 20px;
    right: -55px;

    width: 120px;
    height: 120px;
  }

  .store-list__decoration--lower {
    bottom: 10px;
    left: -55px;

    width: 135px;
    height: 135px;
  }

  .store-list__table-wrapper {
    overflow: visible;

    border: 0;
    border-radius: 0;

    background-color: transparent;
  }

  .store-list__table,
  .store-list__table-body,
  .store-list__row,
  .store-list__cell {
    display: block;
    width: 100%;
  }

  .store-list__table-head {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
  }

  .store-list__table-body {
    display: grid;
    gap: 15px;
  }

  .store-list__row {
    position: relative;

    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 10px;
    row-gap: 13px;

    padding: 22px 20px 20px;

    border: 1px solid #e9e2d4;
    border-radius: 18px;

    background-color: rgba(255, 255, 255, 0.7);
  }

  .store-list__cell {
    height: auto;
    padding: 0;

    font-size: 12.5px;
  }

  .store-list__cell--shop {
    grid-column: 1 / 2;
    grid-row: 1;

    padding: 0;
  }

  .store-list__cell--product {
    grid-column: 1 / -1;
    grid-row: 2;

    padding-top: 12px;

    border-top: 1px solid #eee8dc;
  }

  .store-list__cell--link {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: auto;

    text-align: center;
  }

  .store-list__cell--link:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  .store-list__cell--link:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
  }

  .store-list__shop-name {
    font-size: 15px;
  }

  .store-list__location {
    font-size: 11px;
  }

  .store-list__icon-link {
    width: 40px;
    height: 40px;
  }

  .store-list__empty {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .store-list {
    padding-right: 12px;
    padding-left: 12px;
  }

  .store-list__title {
    font-size: 24px;
  }

  .store-list__row {
    padding-right: 17px;
    padding-left: 17px;
  }

  .store-list__shop-name {
    font-size: 14px;
  }

  .store-list__cell--product {
    font-size: 12px;
  }

  .store-list__icon-link,
  .store-list__empty {
    width: 38px;
    height: 38px;
  }
}

/* ==================================================
   オリジナルソフトクリームミックス販売セクション
================================================== */

.softcream-sales,
.softcream-sales * {
  box-sizing: border-box;
}

.softcream-sales {
  position: relative;
  isolation: isolate;

  width: 100%;
  margin: 0;
  padding: 76px 32px 74px;

  overflow: hidden;

  background-color: #f8f6ef;
}

/* ==================================================
   背景装飾
================================================== */

.softcream-sales__decoration {
  position: absolute;
  z-index: 0;

  border-radius: 50%;

  pointer-events: none;
}

.softcream-sales__decoration--lower {
  right: 7%;
  bottom: 20px;

  width: 140px;
  height: 140px;

  background-color: rgba(226, 237, 226, 0.52);
}

/* ==================================================
   セクション内側
================================================== */

.softcream-sales__inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.softcream-sales__header {
  margin: 0 0 48px;
  text-align: center;
}

.softcream-sales__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 27px;
  margin: 0 0 16px;
  padding: 5px 16px;

  border-radius: 999px;

  color: #ffffff;
  background-color: #dfa92f;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}

.softcream-sales__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.045em;
}

.softcream-sales__lead {
  margin: 8px 0 0;

  color: #9a5c3a;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.015em;
}

/* ==================================================
   製品一覧
================================================== */

.softcream-sales__products {
  width: 100%;
  margin: 0;
}

.softcream-sales__brand-title {
  margin: 0 0 12px;

  color: #351d10;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

.softcream-sales__table-wrapper {
  width: 100%;

  overflow: hidden;

  border: 1px solid #e9e3d7;
  border-radius: 8px;

  background-color: rgba(255, 255, 255, 0.68);
}

.softcream-sales__table {
  width: 100%;
  margin: 0;

  border: 0;
  border-collapse: collapse;
  border-spacing: 0;

  table-layout: fixed;
}

.softcream-sales__table-head {
  background-color: #f4f1e9;
}

.softcream-sales__table-heading {
  height: 48px;
  padding: 12px 18px;

  border: 0;

  color: #351d10;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}

.softcream-sales__table-heading--product {
  width: 85%;
}

.softcream-sales__table-heading--origin {
  width: 15%;
  text-align: center;
}

.softcream-sales__table-row {
  border-top: 1px solid #ece6db;
}

.softcream-sales__table-cell {
  height: 48px;
  padding: 12px 18px;

  border: 0;

  color: #69412d;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  vertical-align: middle;
}

.softcream-sales__table-cell--origin {
  color: #8e5738;
  text-align: center;
  white-space: nowrap;
}

/* ==================================================
   メッセージ
================================================== */

.softcream-sales__message {
  width: 100%;
  margin-top: 36px;
  padding: 34px 36px 33px;

  border: 1px solid #ebe5da;
  border-radius: 8px;

  background-color: rgba(255, 255, 255, 0.76);
}

.softcream-sales__message-title {
  margin: 0 0 12px;

  color: #235452;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

.softcream-sales__message-text {
  margin: 0;

  color: #8e5537;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* ==================================================
   黒内ファーム紹介
================================================== */

.softcream-sales__story {
  display: grid;
  grid-template-columns: minmax(0, 620px) 220px;
  align-items: center;
  justify-content: center;
  gap: 30px;

  width: 100%;
  margin-top: 36px;
}

.softcream-sales__story-figure {
  width: 100%;
  margin: 0;

  overflow: hidden;

  border: 1px solid #e9e3d8;
  border-radius: 6px;

  background-color: #ffffff;
}

.softcream-sales__story-image {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}

/* ==================================================
   黒内社長画像
   透過画像のため背景・枠線・角丸を付けない
================================================== */

.softcream-sales__profile {
  align-self: center;

  display: block;

  width: 100%;
  max-width: 220px;
  margin: 0;
  padding: 0;

  overflow: visible;

  border: 0;
  border-radius: 0;

  background-color: transparent;
  background-image: none;

  box-shadow: none;
}

.softcream-sales__profile-image {
  display: block;

  width: 100%;
  max-width: none;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  object-fit: contain;
  object-position: center;

  background-color: transparent;

  box-shadow: none;
}

/* ==================================================
   お問い合わせボタン
================================================== */

.softcream-sales__action {
  display: flex;
  justify-content: center;

  margin-top: 48px;
}

.softcream-sales__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 220px;
  min-height: 43px;
  padding: 10px 26px;

  border-radius: 999px;

  color: #ffffff;
  background-color: #174d4b;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.softcream-sales__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(23, 77, 75, 0.18);
}

.softcream-sales__button:focus-visible {
  outline: 3px solid rgba(23, 77, 75, 0.3);
  outline-offset: 4px;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .softcream-sales {
    padding: 72px 32px 78px;
  }

  .softcream-sales__inner {
    max-width: 820px;
  }

  .softcream-sales__header {
    margin-bottom: 42px;
  }

  .softcream-sales__title {
    font-size: 28px;
  }

  .softcream-sales__story {
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 24px;
  }

  .softcream-sales__profile {
    max-width: 200px;

    border: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .softcream-sales__profile-image {
    border: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .softcream-sales__decoration--lower {
    right: -25px;
    bottom: 15px;

    width: 125px;
    height: 125px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .softcream-sales {
    padding: 60px 15px 68px;
  }

  .softcream-sales__inner {
    max-width: 540px;
  }

  .softcream-sales__header {
    margin-bottom: 34px;
  }

  .softcream-sales__badge {
    margin-bottom: 13px;
    font-size: 10px;
  }

  .softcream-sales__title {
    font-size: clamp(24px, 6.8vw, 29px);
    line-height: 1.5;
    letter-spacing: 0.035em;
  }

  .softcream-sales__lead {
    margin-top: 7px;
    font-size: 12px;
  }

  .softcream-sales__brand-title {
    font-size: 15px;
  }

  .softcream-sales__table-heading {
    height: 44px;
    padding: 11px 13px;

    font-size: 12.5px;
  }

  .softcream-sales__table-heading--product {
    width: 76%;
  }

  .softcream-sales__table-heading--origin {
    width: 24%;
  }

  .softcream-sales__table-cell {
    height: auto;
    padding: 12px 13px;

    font-size: 11.5px;
    line-height: 1.65;
  }

  .softcream-sales__message {
    margin-top: 28px;
    padding: 27px 22px 26px;
  }

  .softcream-sales__message-title {
    margin-bottom: 10px;

    font-size: 18px;
    line-height: 1.55;
  }

  .softcream-sales__message-text {
    font-size: 12px;
    line-height: 1.8;
  }

  .softcream-sales__story {
    grid-template-columns: 1fr;
    gap: 22px;

    margin-top: 29px;
  }

  .softcream-sales__profile {
    width: 100%;
    max-width: 230px;
    margin: 0 auto;

    border: 0;
    border-radius: 0;

    background-color: transparent;

    box-shadow: none;
  }

  .softcream-sales__profile-image {
    border: 0;
    border-radius: 0;

    background-color: transparent;

    box-shadow: none;
  }

  .softcream-sales__action {
    margin-top: 34px;
  }

  .softcream-sales__button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }

  .softcream-sales__decoration--lower {
    right: -50px;
    bottom: 15px;

    width: 115px;
    height: 115px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .softcream-sales {
    padding-right: 12px;
    padding-left: 12px;
  }

  .softcream-sales__title {
    font-size: 23px;
  }

  .softcream-sales__table-cell {
    padding-right: 10px;
    padding-left: 10px;

    font-size: 11px;
  }

  .softcream-sales__message {
    padding-right: 18px;
    padding-left: 18px;
  }

  .softcream-sales__message-title {
    font-size: 17px;
  }

  .softcream-sales__profile {
    max-width: 210px;

    border: 0;
    background-color: transparent;
  }
}

/* ==================================================
   Instagram紹介セクション
================================================== */

.instagram-showcase,
.instagram-showcase * {
  box-sizing: border-box;
}

.instagram-showcase {
  width: 100%;
  margin: 0;
  padding: 94px 32px 96px;

  background-color: #fbfaf6;
}

.instagram-showcase__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 0.93fr)
    minmax(0, 1.07fr);
  align-items: center;
  gap: clamp(50px, 5.5vw, 76px);

  width: 100%;
  max-width: 1105px;
  margin: 0 auto;
}

/* ==================================================
   左側メイン画像
================================================== */

.instagram-showcase__visual {
  width: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 20px;

  background-color: #e7e4dc;
}

.instagram-showcase__main-image {
  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 1.24 / 1;

  object-fit: cover;
  object-position: center;

  transition: transform 0.5s ease;
}

.instagram-showcase__visual:hover
.instagram-showcase__main-image {
  transform: scale(1.02);
}

/* ==================================================
   右側コンテンツ
================================================== */

.instagram-showcase__content {
  min-width: 0;
}

.instagram-showcase__header {
  margin: 0 0 20px;
}

.instagram-showcase__eyebrow {
  margin: 0 0 11px;

  color: #759795;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.instagram-showcase__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: 0.05em;
}

/* ==================================================
   説明文
================================================== */

.instagram-showcase__description {
  color: #8d5334;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.015em;
}

.instagram-showcase__description p {
  margin: 0;
}

.instagram-showcase__description p + p {
  margin-top: 14px;
}

/* ==================================================
   アカウント・ボタンエリア
================================================== */

.instagram-showcase__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  margin-top: 26px;
}

.instagram-showcase__account {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 15px;

  min-width: 0;
}

/* ==================================================
   アカウントアイコン
================================================== */

.instagram-showcase__avatar {
  position: relative;

  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 3px solid #e6a900;
  border-radius: 50%;

  background-color: #ffffff;
}

.instagram-showcase__avatar-image {
  display: block;

  width: 112%;
  height: 112%;
  max-width: none;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: center;

  transform: scale(1.03);
  transform-origin: center;
}

.instagram-showcase__account-text {
  min-width: 0;
}

/* @merrybaycafe */
.instagram-showcase__account-name {
  margin: 0 0 2px;

  color: #351d10;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.instagram-showcase__account-description {
  margin: 0;

  color: #9a5b38;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}

/* ==================================================
   Instagramボタン
================================================== */

.instagram-showcase__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-width: 187px;
  min-height: 54px;
  padding: 13px 25px;

  border-radius: 999px;

  color: #ffffff;
  background-color: #194d4b;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.instagram-showcase__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(25, 77, 75, 0.2);
}

.instagram-showcase__button:focus-visible {
  outline: 3px solid rgba(25, 77, 75, 0.3);
  outline-offset: 4px;
}

/* ==================================================
   Font Awesomeアイコン
================================================== */

.instagram-showcase__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;

  font-size: 17px;
  line-height: 1;
  text-align: center;

  transform: translate(0.4px, 0.2px);
  transform-origin: center;
}

.instagram-showcase__button-icon::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .instagram-showcase {
    padding: 78px 32px 84px;
  }

  .instagram-showcase__inner {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);
    gap: 42px;

    max-width: 900px;
  }

  .instagram-showcase__title {
    font-size: 31px;
  }

  .instagram-showcase__description {
    font-size: 12.5px;
    line-height: 1.8;
  }

  .instagram-showcase__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 19px;
  }

  .instagram-showcase__button {
    min-width: 190px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .instagram-showcase {
    padding: 62px 15px 70px;
  }

  .instagram-showcase__inner {
    grid-template-columns: 1fr;
    gap: 34px;

    max-width: 540px;
  }

  .instagram-showcase__visual {
    border-radius: 16px;
  }

  .instagram-showcase__main-image {
    aspect-ratio: auto;
  }

  .instagram-showcase__header {
    margin-bottom: 17px;
  }

  .instagram-showcase__eyebrow {
    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .instagram-showcase__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  .instagram-showcase__title br {
    display: none;
  }

  .instagram-showcase__description {
    font-size: 12.5px;
    line-height: 1.8;
  }

  .instagram-showcase__footer {
    align-items: stretch;
    flex-direction: column;
    gap: 22px;

    margin-top: 24px;
  }

  .instagram-showcase__account {
    gap: 13px;
  }

  .instagram-showcase__avatar {
    width: 59px;
    height: 59px;

    border-width: 3px;
  }

  .instagram-showcase__account-name {
    font-size: 14px;
  }

  .instagram-showcase__account-description {
    font-size: 11px;
    white-space: normal;
  }

  .instagram-showcase__button {
    width: 100%;
    min-width: 0;
    min-height: 52px;

    padding: 13px 18px;

    font-size: 13px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .instagram-showcase {
    padding-right: 12px;
    padding-left: 12px;
  }

  .instagram-showcase__title {
    font-size: 25px;
  }

  .instagram-showcase__description {
    font-size: 12px;
  }

  .instagram-showcase__avatar {
    width: 55px;
    height: 55px;
  }

  .instagram-showcase__account-name {
    font-size: 13px;
  }

  .instagram-showcase__button {
    font-size: 12.5px;
  }
}

/* ==================================================
   Merry Bay Caféについて セクション
================================================== */

.about-company,
.about-company * {
  box-sizing: border-box;
}

.about-company {
  width: 100%;
  margin: 0;
  padding: 86px 32px 78px;

  background-color: #eaf3ec;
}

.about-company__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ==================================================
   上段：キャラクター・紹介文
================================================== */

.about-company__introduction {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 58px;

  width: 100%;
}

/* ==================================================
   キャラクターアイコン
================================================== */

.about-company__character {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 172px;
  height: 172px;
  margin: 0;
  padding: 0;

  overflow: hidden;

  /* 緑色のフチを4pxから6pxへ変更 */
  border: 6px solid #234f4d;
  border-radius: 50%;

  background-color: #ffffff;
}

/*
 * 画像内の丸い外周と緑色のフチが
 * 密着して見えるように拡大
 */
.about-company__character-image {
  display: block;

  width: 114%;
  height: 114%;
  max-width: none;
  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: center;

  transform: scale(1.03);
  transform-origin: center;
}

/* ==================================================
   紹介見出し
================================================== */

.about-company__introduction-content {
  min-width: 0;
}

.about-company__header {
  margin: 0 0 14px;
}

.about-company__eyebrow {
  margin: 0 0 9px;

  color: #739593;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.about-company__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.05em;
}

/* ==================================================
   紹介文章
================================================== */

.about-company__catch {
  margin: 0 0 21px;

  color: #8b502f;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 0.025em;
}

.about-company__description {
  color: #74452e;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.about-company__description p {
  margin: 0;
}

.about-company__description p + p {
  margin-top: 13px;
}

/*
 * 説明文内の
 * Merry Bay Café・岡山・くるくるジェラート™
 */
.about-company__emphasis {
  color: #50301f;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-weight: 900;
  letter-spacing: 0.015em;
}

/* 既存HTMLにstrongが残っている場合の設定 */
.about-company__description strong {
  color: #50301f;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-weight: 900;
}

/* ==================================================
   下段：会社情報・画像
================================================== */

.about-company__body {
  display: grid;
  grid-template-columns: minmax(0, 1.07fr) minmax(360px, 0.73fr);
  align-items: start;
  gap: 60px;

  width: 100%;
  margin-top: 64px;
}

/* ==================================================
   会社情報カラム
================================================== */

.about-company__information-column {
  min-width: 0;
}

.about-company__information {
  width: 100%;
  padding: 32px 31px 28px;

  border: 1px solid rgba(224, 230, 220, 0.7);
  border-radius: 22px;

  background-color: rgba(255, 255, 255, 0.88);

  box-shadow: 0 6px 20px rgba(59, 91, 75, 0.04);
}

/* ==================================================
   会社情報見出し
================================================== */

.about-company__information-title {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 22px;
  padding: 0 0 18px;

  border-bottom: 1px solid #e4ebe4;

  color: #351d10;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
}

.about-company__information-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;

  width: 19px;
  height: 19px;

  color: #24504e;

  font-size: 16px;
  line-height: 1;
}

.about-company__information-icon i {
  display: block;
  margin: 0;
  padding: 0;

  line-height: 1;

  transform: translate(0.5px, 0.3px);
  transform-origin: center;
}

.about-company__information-icon i::before {
  display: block;
  margin: 0;

  line-height: 1;
}

/* ==================================================
   会社情報一覧
================================================== */

.about-company__information-list {
  margin: 0;
}

.about-company__information-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: start;
  gap: 18px;

  margin: 0;
}

.about-company__information-row + .about-company__information-row {
  margin-top: 16px;
}

.about-company__information-label {
  margin: 0;

  color: #9b5c3b;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.65;
}

.about-company__information-value {
  min-width: 0;
  margin: 0;

  color: #513424;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

/* ==================================================
   Instagramテキストリンク
================================================== */

.about-company__instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: #d49300;

  font-size: 12.5px;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  transition: opacity 0.25s ease;
}

.about-company__instagram-link:hover {
  opacity: 0.72;
}

.about-company__instagram-link:focus-visible {
  outline: 3px solid rgba(212, 147, 0, 0.25);
  outline-offset: 4px;
}

.about-company__instagram-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 16px;
  height: 16px;

  font-size: 15px;
  line-height: 1;

  transform: translate(0.4px, 0.2px);
  transform-origin: center;
}

.about-company__instagram-icon::before {
  display: block;
  line-height: 1;
}

.about-company__external-icon {
  font-size: 9px;
  line-height: 1;

  transform: translateY(-0.5px);
}

/* ==================================================
   確認事項カード
================================================== */

.about-company__notice {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: start;
  gap: 13px;

  width: 100%;
  margin-top: 22px;
  padding: 20px 24px;

  border: 1px solid rgba(234, 229, 213, 0.65);
  border-radius: 16px;

  background-color: rgba(255, 253, 245, 0.67);
}

.about-company__notice-icon {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;

  border-radius: 50%;

  color: #d89a00;
  background-color: #fff0bd;

  font-size: 13px;
  line-height: 1;
  text-align: center;
}

/*
 * Font Awesomeのinfoアイコンは字形が左寄りに
 * 見えるため、アイコン本体だけ右へ補正
 */
.about-company__notice-icon i {
  display: block;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0;

  line-height: 1;

  transform: translate(1.6px, 0.2px);
  transform-origin: center;
}

.about-company__notice-icon i::before {
  display: block;
  margin: 0;
  padding: 0;

  line-height: 1;
}

.about-company__notice-content {
  min-width: 0;
}

.about-company__notice-title {
  margin: 0 0 3px;

  color: #47301f;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.55;
}

.about-company__notice-text {
  margin: 0;

  color: #8d593b;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
}

/* ==================================================
   右側画像
================================================== */

.about-company__gallery {
  display: grid;
  gap: 22px;

  width: 100%;
}

.about-company__gallery-figure {
  width: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 20px;

  background-color: #dce5de;
}

.about-company__gallery-image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 1.34 / 1;

  object-fit: cover;
  object-position: center;

  transition: transform 0.45s ease;
}

.about-company__gallery-figure:hover
.about-company__gallery-image {
  transform: scale(1.02);
}

/* ==================================================
   下部ボタン
================================================== */

.about-company__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  margin-top: 67px;
}

.about-company__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 184px;
  min-height: 51px;
  padding: 12px 24px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.about-company__button--instagram {
  color: #351d10;
  background-color: #ffffff;
}

.about-company__button--contact {
  color: #ffffff;
  background-color: #194d4b;
}

.about-company__button:hover {
  opacity: 0.88;
  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(35, 79, 77, 0.14);
}

.about-company__button:focus-visible {
  outline: 3px solid rgba(35, 79, 77, 0.28);
  outline-offset: 4px;
}

.about-company__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;

  font-size: 16px;
  line-height: 1;

  transform: translate(0.4px, 0.2px);
  transform-origin: center;
}

.about-company__button-icon::before {
  display: block;
  line-height: 1;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .about-company {
    padding: 76px 32px 78px;
  }

  .about-company__inner {
    max-width: 880px;
  }

  .about-company__introduction {
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 42px;
  }

  .about-company__character {
    width: 150px;
    height: 150px;

    border-width: 6px;
  }

  .about-company__title {
    font-size: 31px;
  }

  .about-company__description {
    font-size: 12.5px;
  }

  .about-company__body {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 38px;

    margin-top: 54px;
  }

  .about-company__information {
    padding: 28px 26px 26px;
  }

  .about-company__information-row {
    grid-template-columns: 85px minmax(0, 1fr);
    gap: 14px;
  }

  .about-company__gallery {
    gap: 18px;
  }

  .about-company__actions {
    margin-top: 55px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .about-company {
    padding: 62px 15px 68px;
  }

  .about-company__inner {
    max-width: 540px;
  }

  .about-company__introduction {
    grid-template-columns: 1fr;
    gap: 28px;

    text-align: center;
  }

  .about-company__character {
    width: 134px;
    height: 134px;
    margin: 0 auto;

    border-width: 6px;
  }

  .about-company__eyebrow {
    margin-bottom: 7px;

    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .about-company__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.035em;
  }

  .about-company__catch {
    margin-bottom: 17px;

    font-size: 13px;
    line-height: 1.75;
  }

  .about-company__description {
    font-size: 12.5px;
    line-height: 1.8;
    text-align: left;
  }

  .about-company__body {
    grid-template-columns: 1fr;
    gap: 30px;

    margin-top: 42px;
  }

  .about-company__information {
    padding: 25px 21px 24px;

    border-radius: 18px;
  }

  .about-company__information-title {
    margin-bottom: 19px;
    padding-bottom: 15px;

    font-size: 16px;
  }

  .about-company__information-row {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
  }

  .about-company__information-row + .about-company__information-row {
    margin-top: 14px;
  }

  .about-company__information-label {
    font-size: 11px;
  }

  .about-company__information-value {
    font-size: 12px;
  }

  .about-company__instagram-link {
    align-items: flex-start;

    font-size: 11.5px;
  }

  .about-company__notice {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;

    margin-top: 17px;
    padding: 18px 17px;

    border-radius: 15px;
  }

  .about-company__notice-icon {
    width: 34px;
    height: 34px;
  }

  .about-company__notice-icon i {
    transform: translate(1.5px, 0.2px);
  }

  .about-company__notice-title {
    font-size: 12px;
  }

  .about-company__notice-text {
    font-size: 10.5px;
  }

  .about-company__gallery {
    gap: 16px;
  }

  .about-company__gallery-figure {
    border-radius: 16px;
  }

  .about-company__gallery-image {
    aspect-ratio: auto;
  }

  .about-company__actions {
    flex-direction: column;
    gap: 13px;

    width: 100%;
    margin-top: 40px;
  }

  .about-company__button {
    width: 100%;
    min-width: 0;
    min-height: 51px;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .about-company {
    padding-right: 12px;
    padding-left: 12px;
  }

  .about-company__title {
    font-size: 25px;
  }

  .about-company__character {
    width: 125px;
    height: 125px;

    border-width: 6px;
  }

  .about-company__information {
    padding-right: 18px;
    padding-left: 18px;
  }

  .about-company__information-row {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
  }

  .about-company__information-value {
    font-size: 11.5px;
  }

  .about-company__button {
    font-size: 12.5px;
  }
}

/* ==================================================
   よくある質問セクション
================================================== */

.faq-section,
.faq-section * {
  box-sizing: border-box;
}

.faq-section {
  width: 100%;
  margin: 0;
  padding: 94px 32px 96px;

  background-color: #f8f6ef;
}

.faq-section__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* ==================================================
   セクション見出し
================================================== */

.faq-section__header {
  margin: 0 0 61px;
  text-align: center;
}

.faq-section__eyebrow {
  margin: 0 0 10px;

  color: #759795;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.17em;
}

.faq-section__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.055em;
}

/* ==================================================
   FAQ一覧
================================================== */

.faq-section__list {
  display: grid;
  gap: 13px;

  width: 100%;
}

/* ==================================================
   FAQ項目
================================================== */

.faq-section__item {
  width: 100%;
  margin: 0;

  overflow: hidden;

  border: 1px solid #eee8dc;
  border-radius: 16px;

  background-color: rgba(255, 255, 255, 0.78);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.faq-section__item[open] {
  border-color: #e9e2d5;

  box-shadow: 0 6px 18px rgba(73, 51, 28, 0.035);
}

/* ==================================================
   質問部分
================================================== */

.faq-section__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  width: 100%;
  min-height: 79px;
  margin: 0;
  padding: 20px 24px;

  color: #351d10;

  cursor: pointer;

  list-style: none;
}

/* 標準のdetailsマーカーを非表示 */
.faq-section__question::-webkit-details-marker {
  display: none;
}

.faq-section__question::marker {
  content: "";
}

.faq-section__question-content {
  display: flex;
  align-items: baseline;
  gap: 11px;

  min-width: 0;
}

.faq-section__question-label {
  flex: 0 0 auto;

  color: #dda200;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
}

.faq-section__question-text {
  min-width: 0;

  color: #351d10;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

/* ==================================================
   展開ボタン
================================================== */

.faq-section__toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;

  border-radius: 50%;

  color: #9b603d;
  background-color: #f7f4ed;

  font-size: 11px;
  line-height: 1;
  text-align: center;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.faq-section__toggle-icon {
  display: block;

  width: auto;
  height: auto;
  margin: 0;
  padding: 0;

  line-height: 1;

  transform: translate(0.3px, 0.2px);
  transform-origin: center;

  transition: transform 0.25s ease;
}

.faq-section__toggle-icon::before {
  display: block;
  margin: 0;
  padding: 0;

  line-height: 1;
}

/* 展開時 */
.faq-section__item[open] .faq-section__toggle {
  color: #ffffff;
  background-color: #194d4b;
}

.faq-section__item[open] .faq-section__toggle-icon {
  transform: translate(0.3px, 0.2px) rotate(180deg);
}

/* ==================================================
   回答部分
================================================== */

.faq-section__answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;

  padding: 0 50px 25px;
}

.faq-section__answer-label {
  color: #285654;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.75;
}

.faq-section__answer-text {
  margin: 0;

  color: #8e5536;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

/* ==================================================
   ホバー・フォーカス
================================================== */

.faq-section__question:hover .faq-section__toggle {
  color: #ffffff;
  background-color: #194d4b;
}

.faq-section__question:focus-visible {
  outline: 3px solid rgba(25, 77, 75, 0.25);
  outline-offset: -3px;
  border-radius: 15px;
}

/* ==================================================
   タブレット表示
   1024px以下
================================================== */

@media screen and (max-width: 1024px) {
  .faq-section {
    padding: 78px 32px 84px;
  }

  .faq-section__inner {
    max-width: 700px;
  }

  .faq-section__header {
    margin-bottom: 49px;
  }

  .faq-section__title {
    font-size: 32px;
  }
}

/* ==================================================
   スマートフォン表示
   767px以下
================================================== */

@media screen and (max-width: 767px) {
  .faq-section {
    padding: 62px 15px 70px;
  }

  .faq-section__inner {
    max-width: 540px;
  }

  .faq-section__header {
    margin-bottom: 36px;
  }

  .faq-section__eyebrow {
    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .faq-section__title {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .faq-section__list {
    gap: 11px;
  }

  .faq-section__item {
    border-radius: 14px;
  }

  .faq-section__question {
    gap: 14px;

    min-height: 72px;
    padding: 17px 17px 17px 18px;
  }

  .faq-section__question-content {
    align-items: flex-start;
    gap: 8px;
  }

  .faq-section__question-label {
    font-size: 13px;
    line-height: 1.65;
  }

  .faq-section__question-text {
    font-size: 14px;
    line-height: 1.65;
  }

  .faq-section__toggle {
    width: 32px;
    height: 32px;

    font-size: 10px;
  }

  .faq-section__answer {
    gap: 8px;

    padding: 0 19px 21px;
  }

  .faq-section__answer-label {
    font-size: 13px;
    line-height: 1.75;
  }

  .faq-section__answer-text {
    font-size: 12.5px;
    line-height: 1.8;
  }
}

/* ==================================================
   小型スマートフォン
   360px以下
================================================== */

@media screen and (max-width: 360px) {
  .faq-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  .faq-section__title {
    font-size: 25px;
  }

  .faq-section__question {
    gap: 11px;

    padding-right: 14px;
    padding-left: 15px;
  }

  .faq-section__question-text {
    font-size: 13px;
  }

  .faq-section__toggle {
    width: 30px;
    height: 30px;
  }

  .faq-section__answer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .faq-section__answer-text {
    font-size: 12px;
  }
}

/* ==================================================
   お問い合わせ見出しセクション
================================================== */

.contact-heading,
.contact-heading * {
  box-sizing: border-box;
}

.contact-heading {
  width: 100%;
  margin: 0;
  padding: 96px 32px 18px;

  background-color: #ffffff;

  /*
   * 固定ヘッダーからページ内リンクした際に、
   * 見出しがヘッダーの下へ隠れるのを防ぐ
   */
  scroll-margin-top: 100px;
}

.contact-heading__inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;

  text-align: center;
}

/* ==================================================
   英字見出し
================================================== */

.contact-heading__eyebrow {
  margin: 0 0 12px;

  color: #759795;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.17em;
}

/* ==================================================
   メイン見出し
================================================== */

.contact-heading__title {
  margin: 0;

  color: #351700;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0.045em;
}

/* ==================================================
   説明文
================================================== */

.contact-heading__description {
  margin: 19px 0 0;

  color: #955938;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* ==================================================
   タブレット表示
================================================== */

@media screen and (max-width: 1024px) {
  .contact-heading {
    padding: 82px 32px 18px;

    scroll-margin-top: 90px;
  }

  .contact-heading__title {
    font-size: 33px;
  }

  .contact-heading__description {
    font-size: 14px;
  }
}

/* ==================================================
   スマートフォン表示
================================================== */

@media screen and (max-width: 767px) {
  .contact-heading {
    padding: 62px 15px 16px;

    scroll-margin-top: 75px;
  }

  .contact-heading__inner {
    max-width: 540px;
  }

  .contact-heading__eyebrow {
    margin-bottom: 9px;

    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .contact-heading__title {
    font-size: clamp(27px, 7.6vw, 32px);
    line-height: 1.28;
    letter-spacing: 0.035em;
  }

  .contact-heading__description {
    margin-top: 15px;

    font-size: 12.5px;
    line-height: 1.8;
  }
}

/* ==================================================
   小型スマートフォン
================================================== */

@media screen and (max-width: 360px) {
  .contact-heading {
    padding-right: 12px;
    padding-left: 12px;
  }

  .contact-heading__title {
    font-size: 26px;
  }

  .contact-heading__description {
    font-size: 12px;
  }
}

/* ==================================================
   Contact Form 7
   お問い合わせフォーム
================================================== */

.contact-form,
.contact-form * {
  box-sizing: border-box;
}

.contact-form {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;

  border: 1px solid #eee6d8;
  border-radius: 24px;

  background-color: rgba(255, 255, 255, 0.72);
}

/* ==================================================
   Contact Form 7・テーマ由来の余白を初期化
================================================== */

.contact-form p {
  margin-top: 0;
}

.contact-form br {
  display: none;
}

.contact-form .wpcf7-form-control-wrap {
  display: block;

  width: 100%;
  margin: 0;
  padding: 0;
}

/* ==================================================
   各フィールド
================================================== */

.contact-form__field {
  display: flex;
  flex-direction: column;
  align-self: start;

  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* 通常フィールド間の縦余白 */

.contact-form__field + .contact-form__field,
.contact-form__columns + .contact-form__field,
.contact-form__field + .contact-form__columns {
  margin-top: 22px;
}

/* ==================================================
   お名前・電話番号の2カラム
================================================== */

.contact-form__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start !important;
  align-content: start;
  gap: 20px;

  width: 100%;
  margin: 0;
  padding: 0;
}

/*
 * 両フィールドを同じ開始位置へ固定
 */
.contact-form__columns > .contact-form__field {
  align-self: start !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* ==================================================
   ラベル
================================================== */

.contact-form__label {
  display: block;

  width: 100%;
  margin: 0 0 4px;
  padding: 0;

  color: #4d2b18;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.015em;
}

/*
 * 項目名と必須記号を横並びに固定
 */
.contact-form__label-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;

  margin: 0;
  padding: 0;

  white-space: nowrap;
}

.contact-form__required {
  display: inline-block;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  color: #dfa000;

  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
}

/* ==================================================
   入力欄共通
================================================== */

.contact-form__control {
  display: block;

  width: 100% !important;
  min-width: 0;
  max-width: none;
  height: 47px;

  margin: 0 !important;
  padding: 11px 15px;

  border: 1px solid #e4e0da;
  border-radius: 13px;
  outline: none;

  color: #593725;
  background-color: #ffffff;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;

  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-form__control::placeholder {
  color: #cc9474;
  opacity: 1;
}

.contact-form__control:hover {
  border-color: #d8cdbd;
}

.contact-form__control:focus {
  border-color: #7eaaa4;
  background-color: #ffffff;

  box-shadow: 0 0 0 3px rgba(88, 137, 131, 0.12);
}

/*
 * お名前・電話番号の入力欄を
 * 同じ高さ・同じ開始位置へ強制的に揃える
 */
.contact-form__columns .contact-form__control {
  width: 100% !important;
  height: 47px !important;
  margin: 0 !important;
}

/* ==================================================
   テキストエリア
================================================== */

.contact-form__textarea {
  display: block;

  width: 100% !important;
  min-height: 126px;
  height: 126px;

  padding-top: 12px;

  line-height: 1.75;

  resize: vertical;
}

.contact-form__count {
  margin: 8px 0 0;
  padding: 0;

  color: #a16d4e;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
}

/* ==================================================
   送信ボタン
================================================== */

.contact-form__action {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin-top: 25px;
}

.contact-form input[type="submit"].contact-form__submit,
.contact-form .wpcf7-submit.contact-form__submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: auto !important;
  min-width: 145px;
  max-width: 100%;
  min-height: 51px;
  height: auto !important;

  margin: 0 !important;
  padding: 12px 31px !important;

  border: 0 !important;
  border-radius: 999px !important;
  outline: none;

  color: #ffffff !important;
  background-color: #194d4b !important;
  background-image: none !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;

  box-shadow: none !important;

  cursor: pointer;

  appearance: none !important;
  -webkit-appearance: none !important;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-form input[type="submit"].contact-form__submit:hover,
.contact-form .wpcf7-submit.contact-form__submit:hover {
  opacity: 0.9;
  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(25, 77, 75, 0.2) !important;
}

.contact-form input[type="submit"].contact-form__submit:focus-visible,
.contact-form .wpcf7-submit.contact-form__submit:focus-visible {
  outline: 3px solid rgba(25, 77, 75, 0.25);
  outline-offset: 4px;
}

.contact-form input[type="submit"].contact-form__submit:disabled,
.contact-form .wpcf7-submit.contact-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;

  transform: none;

  box-shadow: none !important;
}

/* ==================================================
   Contact Form 7スピナー
================================================== */

.contact-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(50% + 80px);

  width: 20px;
  height: 20px;
  margin: 0;

  transform: translateY(-50%);
}

/* ==================================================
   入力エラー
================================================== */

.contact-form .wpcf7-not-valid {
  border-color: #c96d63;
  background-color: #fffafa;
}

.contact-form .wpcf7-not-valid-tip {
  display: block;

  margin: 5px 0 0;
  padding: 0;

  color: #b84e45;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

/* ==================================================
   自動入力時の背景色
================================================== */

.contact-form__control:-webkit-autofill,
.contact-form__control:-webkit-autofill:hover,
.contact-form__control:-webkit-autofill:focus {
  -webkit-text-fill-color: #593725;

  box-shadow: 0 0 0 1000px #ffffff inset;

  transition: background-color 9999s ease-out;
}

/* ==================================================
   送信結果メッセージ
================================================== */

.wpcf7 form .wpcf7-response-output {
  max-width: 720px;
  margin: 20px auto 0;
  padding: 13px 16px;

  border: 1px solid #d9caa9;
  border-radius: 10px;

  color: #69442d;
  background-color: #fffdf7;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 12px;
  line-height: 1.7;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #a9ccc6;

  color: #285754;
  background-color: #f4fbf9;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #dfb6ae;

  color: #9b453d;
  background-color: #fff8f7;
}

/* ==================================================
   タブレット表示
================================================== */

@media screen and (max-width: 1024px) {
  .contact-form {
    max-width: 700px;
    padding: 36px;
  }
}

/* ==================================================
   スマートフォン表示
================================================== */

@media screen and (max-width: 767px) {
  .contact-form {
    max-width: 540px;
    padding: 27px 19px 29px;

    border-radius: 19px;
  }

  .contact-form__columns {
    grid-template-columns: 1fr;
    gap: 19px;
  }

  .contact-form__field + .contact-form__field,
  .contact-form__columns + .contact-form__field,
  .contact-form__field + .contact-form__columns {
    margin-top: 19px;
  }

  .contact-form__label {
    margin-bottom: 4px;

    font-size: 13px;
  }

  .contact-form__control,
  .contact-form__columns .contact-form__control {
    height: 46px !important;
    padding: 10px 13px;

    border-radius: 11px;

    font-size: 13px;
  }

  .contact-form__textarea {
    min-height: 135px;
    height: 135px !important;
  }

  .contact-form__action {
    margin-top: 23px;
  }

  .contact-form input[type="submit"].contact-form__submit,
  .contact-form .wpcf7-submit.contact-form__submit {
    width: 100% !important;
    min-width: 0;
    min-height: 50px;

    border-radius: 999px !important;
  }

  .contact-form .wpcf7-spinner {
    right: 14px;
    left: auto;
  }
}

/* ==================================================
   小型スマートフォン
================================================== */

@media screen and (max-width: 360px) {
  .contact-form {
    padding-right: 15px;
    padding-left: 15px;
  }

  .contact-form__label {
    font-size: 12.5px;
  }

  .contact-form__control {
    font-size: 12.5px;
  }
}

/* ==================================================
   電話お問い合わせセクション
================================================== */

.telephone-contact,
.telephone-contact * {
  box-sizing: border-box;
}

.telephone-contact {
  width: 100%;
  margin: 0;
  padding: 8px 32px 88px;

  /* セクション背景色なし */
  background-color: transparent;
  background-image: none;
}

.telephone-contact__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* ==================================================
   電話番号カード
================================================== */

.telephone-contact__card {
  width: 100%;
  margin: 0;
  padding: 26px 30px 24px;

  border: 0;
  border-radius: 24px;

  background-color: #f6f3ec;

  text-align: center;
}

/* ==================================================
   小見出し
================================================== */

.telephone-contact__title {
  margin: 0 0 8px;

  color: #945b3a;

  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

/* ==================================================
   電話番号
================================================== */

.telephone-contact__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;

  margin: 0;

  color: #351d10;

  /* 電話番号の1文にZen Maru Gothicを適用 */
  font-family:
    "Zen Maru Gothic",
    sans-serif;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.015em;
}

.telephone-contact__number-label {
  display: inline-block;
}

.telephone-contact__number-link {
  display: inline-block;

  color: inherit;

  font: inherit;
  text-decoration: none;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.telephone-contact__number-link:hover {
  color: #194d4b;
}

.telephone-contact__number-link:focus-visible {
  outline: 3px solid rgba(25, 77, 75, 0.25);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ==================================================
   受付時間
================================================== */

.telephone-contact__hours {
  margin: 4px 0 0;

  color: #a56f4f;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.015em;
}

/* ==================================================
   注意書き
================================================== */

.telephone-contact__notice {
  margin: 34px 0 0;

  color: #9a6242;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
  text-align: center;
}

/* ==================================================
   タブレット表示
================================================== */

@media screen and (max-width: 1024px) {
  .telephone-contact {
    padding: 8px 32px 76px;
  }

  .telephone-contact__inner {
    max-width: 680px;
  }

  .telephone-contact__card {
    padding: 24px 28px 22px;
  }
}

/* ==================================================
   スマートフォン表示
================================================== */

@media screen and (max-width: 767px) {
  .telephone-contact {
    padding: 6px 15px 64px;
  }

  .telephone-contact__inner {
    max-width: 540px;
  }

  .telephone-contact__card {
    padding: 23px 18px 21px;

    border-radius: 19px;
  }

  .telephone-contact__title {
    margin-bottom: 7px;

    font-size: 13px;
  }

  .telephone-contact__number {
    flex-wrap: wrap;
    gap: 2px 4px;

    font-size: clamp(19px, 5.8vw, 22px);
    line-height: 1.5;
  }

  .telephone-contact__hours {
    margin-top: 5px;

    font-size: 10.5px;
  }

  .telephone-contact__notice {
    margin-top: 27px;

    font-size: 10.5px;
    line-height: 1.75;
    text-align: left;
  }
}

/* ==================================================
   小型スマートフォン
================================================== */

@media screen and (max-width: 360px) {
  .telephone-contact {
    padding-right: 12px;
    padding-left: 12px;
  }

  .telephone-contact__card {
    padding-right: 14px;
    padding-left: 14px;
  }

  .telephone-contact__number {
    font-size: 18px;
  }

  .telephone-contact__notice {
    font-size: 10px;
  }
}

h2, h3, h4{border:none;}
h3::after{border:none;}
h4{background:none;}

/* Cloudflare Turnstileのみ中央配置 */
.cf-turnstile {
  display: flex !important;
  justify-content: center !important;

  width: 100% !important;
  margin: 24px auto !important;
  padding: 0 !important;

  float: none !important;
  clear: both !important;
}

/* Cloudflareが生成する表示部分 */
.cf-turnstile > div,
.cf-turnstile iframe {
  display: block !important;

  margin-right: auto !important;
  margin-left: auto !important;
}