/* ==========================
   Hero
========================== */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 54rem;
  overflow: hidden;
  background: var(--color-panel);
}

/* ==========================
   Animation
========================== */

/* FV・下層ページトップ以外：要素ごとに下からフェードイン */
.reveal-item {
  opacity: 0;
  transform: translateY(5.6rem);
  transition:
    opacity 1.4s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* 下層ページトップ：FVに近いゆっくりした出現 */
.page-hero__image,
.page-hero__body,
.page-hero::before {
  opacity: 0;
}

.page-hero.is-page-hero-ready .page-hero__image {
  animation: page-hero-image 2s ease 0.15s both;
}

.page-hero.is-page-hero-ready::before {
  animation: page-hero-gradient 2.2s ease 0.7s both;
}

.page-hero.is-page-hero-ready .page-hero__body {
  animation: page-hero-text 2.2s ease 1.05s both;
}

@keyframes page-hero-image {
  from {
    opacity: 0;
    transform: scale(1.035);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes page-hero-gradient {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes page-hero-text {
  from {
    opacity: 0;
    transform: translateY(2.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FV：左画像 → 右画像 → ボカシ → ロゴ */
.hero.is-fv-ready .hero__media--dog {
  animation: fv-image-left 2s ease 0.2s both;
}
/* animation: 名前 動く時間 動き方 待ち時間; */

.hero.is-fv-ready .hero__media--human {
  animation: fv-image-right 2s ease 0.8s both;
}

.hero.is-fv-ready::after {
  animation: fv-blur 2.5s ease 1.5s both;
}

.hero.is-fv-ready .hero__logo {
  animation: fv-logo 2.5s ease 2.1s both;
}

@keyframes fv-image-left {
  from {
    opacity: 0;
    transform: translateX(-3rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fv-image-right {
  from {
    opacity: 0;
    transform: translateX(3rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fv-blur {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fv-logo {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* MENUページ：セクション表示後にNEWタグを弾ませる */

.treatment-card__badge {
  opacity: 0;
}

.treatment-card__badge.is-badge-visible {
  animation: new-badge-pop 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes new-badge-pop {
  0% {
    opacity: 0;
    transform: translateY(1.6rem) scale(0.35) rotate(-10deg);
  }
  55% {
    opacity: 1;
    transform: translateY(-0.7rem) scale(1.18) rotate(4deg);
  }
  75% {
    transform: translateY(0.25rem) scale(0.94) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .reveal-item,
  .reveal-item.is-visible,
  .page-hero__image,
  .page-hero__body,
  .page-hero::before {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero.is-fv-ready .hero__media--dog,
  .hero.is-fv-ready .hero__media--human,
  .hero.is-fv-ready::after,
  .hero.is-fv-ready .hero__logo,
  .page-hero.is-page-hero-ready .page-hero__image,
  .page-hero.is-page-hero-ready::before,
  .page-hero.is-page-hero-ready .page-hero__body,
  .reveal-item .treatment-card__badge,
  .reveal-item.is-visible .treatment-card__badge {
    opacity: 1;
    animation: none;
  }
}

.hero::after {
  content: ""; /* ←疑似要素を生成 */
  position: absolute;
  inset: 0;
  /* 中央の白いぼかし↓ */
  background: linear-gradient(
    90deg,
    rgba(239, 234, 226, 0) 28%,
    rgba(239, 234, 226, 0.963) 45%,
    rgba(239, 234, 226, 0.963) 55%,
    rgba(239, 234, 226, 0) 72%
      /* ( , , ,透明度)左から全体の何％の位置までこの色 */
  );
}
.hero__media {
  min-height: 54rem;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media--dog img {
  object-position: 0% center;
}

.hero__media--human img {
  object-position: 0% center;
}

.hero__logo {
  position: absolute; /* ロゴを.hero画像の上に重ねてる */
  z-index: 2; /* .hero画像より前に表示 */
  top: 50%; /* 上からの位置 */
  left: 50%; /* 左からの位置 */
  width: min(800px, 80vw);
  transform: translate(-50%, -50%); /* ロゴの中心を基準にする */
  text-align: center;
}

/* ==========================
   Concept
========================== */

.concept {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.concept__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 47rem;
  padding: 6rem clamp(3.2rem, 6vw, 11rem);
}

.concept__title {
  margin-top: 6rem;
  font-weight: 500;
}

.concept__text {
  margin-top: 3.8rem;
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: var(--leading-body);
}

.concept .button-link {
  margin-top: 4rem;
  width: 60%;
}

.concept__image img {
  width: 100%;
  height: 100%;
  min-height: 47rem;
  object-position: 80% 70%;
  object-fit: cover;
}

/* ==========================
   Menu
========================== */

.menu-section {
  padding: 4.8rem 3.6rem 7.2rem;
  border-bottom: 1px solid var(--color-border);
}

.menu-section__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2rem;
  width: min(100%, 1320px);
  margin: 5.2rem auto 0;
  height: 500px;
}

.menu-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--color-white) 0%,
    rgba(255, 253, 250, 0.95) 42%,
    rgba(255, 253, 250, 0.72) 50%,
    rgba(207, 213, 198, 0.55) 60%
  );
  pointer-events: none;
}
.menu-card__content {
  position: static;
  z-index: 2;
  padding: 3.6rem 0 2.8rem 3.2rem;
}
.menu-card__content > *:not(.button-link) {
  position: relative;
  z-index: 2;
}

.menu-card__title {
  font-size: 3.4rem;
}

.menu-card__lead {
  margin-top: 0.4rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.menu-card__list {
  display: grid;
  gap: 1.6rem;
  margin-top: 4rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.75;
}

.menu-card .button-link {
  position: absolute;
  right: 3.2rem;
  bottom: 2.8rem;
  z-index: 3;
  margin-top: 0;
}

.menu-card img {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;

  width: 60%;
  height: 30rem;
  margin: 0;

  /* 画像全体を見せる */
  object-fit: cover;
  object-position: center;

  /* 座布団 */
  /* padding: 1rem; */
  /* background: #eef0e8; */

  transform: translateY(-50%);
}

.menu-section__note {
  width: min(100% - 4rem, 90rem);
  margin: 6.4rem auto 0;
  color: var(--color-muted);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
}

/* ==========================
   Product
========================== */

.product-section {
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: 5.2rem;
  width: min(100% - 8rem, var(--container-width));
  margin: 0 auto;
  padding: 7rem 0 10rem;
}

.product-section__intro {
  padding-left: 4rem;
}

.product-section__intro h2 {
  margin-top: 6rem;
  font-weight: 600;
  font-size: 2.5rem;
}

.product-section__intro p:not(.section-kana):not(.section-label) {
  margin-top: 3.2rem;
  color: var(--color-muted);
  font-weight: 600;
  line-height: 2.1;
}

.product-section__intro .button-link {
  margin-top: 4.4rem;
}

.product-section__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.2rem;
  align-self: end;
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-card p {
  margin-top: 2.4rem;
  font-weight: 700;
  text-align: center;
}

/* ==========================
   Contact links
========================== */

.contact-links {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  width: min(100% - 12rem, 1080px);
  margin: 0 auto;
  padding: 7.2rem 0 11rem;
}

.contact-card {
  position: relative;
  z-index: 1;
  min-height: 31rem;
  padding: 5.2rem 6rem 4.4rem;
  border-radius: 4rem;
  background: var(--color-panel);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.contact-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
}

.contact-card__head [data-lucide] {
  width: 8rem;
  height: 8rem;
  stroke-width: 1.8;
}

.contact-card__avatar {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  object-fit: cover;
}

/* @rinto_health と ご予約はこちら */
.contact-card__account,
.contact-card__title {
  margin: 0;
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
}
.contact-card__account {
  font-size: 5rem;
}

/* 24時間受付中 */
.contact-card__sub {
  margin-top: 0.8rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
}

/* サロン近状・予約フォーム文 */
.contact-card__text {
  min-height: 2.4rem;
  margin-top: 3.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ボタン */
.contact-card .button-link,
.contact-card .outline-button {
  min-height: 5.2rem;
  margin: 1.6rem auto 0;
  width: 40rem;
}

.contact-card__insta-button {
  gap: 1.4rem;
}

.contact-card__insta-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

/* 装飾 */
.contact-links__deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.contact-links__deco--left {
  left: -4.4rem;
  top: 1rem;
  width: 40rem;
  transform: rotate(170deg);
}

.contact-links__deco--right {
  right: -3rem;
  bottom: 6rem;
  width: 30rem;
  transform: rotate(350deg);
}

/* ==========================
   Access
========================== */

.access-section {
  background: var(--color-panel);
}

.access-section__inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 7rem;
  width: min(100% - 14rem, 1030px);
  margin: 0 auto;
  padding: 8rem 0 11rem;
}

.access-section__info h2 {
  margin-top: 8rem;
  font-size: 3.4rem;
}

.access-list {
  display: grid;
  gap: 1.8rem;
  margin-top: 2.4rem;
}
/* テキスト */
.access-list__item {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.8rem;
  align-items: start;
  font-weight: 600;
}
/* アイコン */
.access-list__item dt {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  /* background: #e6e8e5; */
}

.access-list__item [data-lucide] {
  width: 4rem;
  height: 4rem;
  color: var(--color-main);
  stroke-width: 1.8;
}

.access-section__map {
  align-self: end;
}

.access-section__map img {
  width: 100%;
  aspect-ratio: 1.78 / 1;
  object-fit: cover;
}

.access-section__map .button-link {
  display: flex;
  width: 31rem;
  margin: 3.2rem auto 0;
}
.access-section__map {
  width: 40rem;
}

.access-section__deco {
  position: absolute;
  right: -3rem;
  bottom: 3rem;
  width: 20rem;
  transform: rotate(20deg);
  pointer-events: none;
}
/* ==========================
   Lower page placeholder
========================== */

.lower-page {
  width: min(100% - 4rem, 860px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 10rem 0;
}

.lower-page h1 {
  margin-top: 2.4rem;
}

.lower-page p:not(.section-label) {
  margin-top: 2.4rem;
  color: var(--color-muted);
}

.lower-page .button-link {
  margin-top: 4rem;
}

/* ==========================
   Menu page
========================== */

.menu-page {
  background: var(--color-bg);
}

.menu-detail {
  width: min(100% - 12rem, 1040px);
  margin: 0 auto;
  padding: 6.4rem 0 8rem;
}

.menu-detail + .menu-detail {
  border-top: 1px solid var(--color-border);
}

.menu-detail__heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2.4rem;
  margin-bottom: 4.8rem;
}

.menu-detail__heading h2 {
  font-size: 3.2rem;
  font-weight: 700;
}

.menu-detail__heading p {
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 600;
}

.treatment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.6rem 5rem;
}

.treatment-grid__featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5rem;
  padding: 2.4rem;
  background: #cfc6b8;
}

.treatment-card {
  position: relative;
  min-height: 37rem;
  padding: 2rem 5rem 3.2rem;
  border: 1px solid #bfb7ad;
  background: var(--color-white);
}

.treatment-card--featured,
.treatment-card--new {
  background: var(--color-white);
}

.treatment-card__image {
  width: 24rem;
  height: 15rem;
  margin: 0 auto 2.4rem;
  object-fit: cover;
}

.treatment-card__badge {
  position: absolute;
  left: 2.4rem;
  top: 2.4rem;
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  border: 2px solid #756d66;
  border-radius: 50%;
  background: #d9d2c3;
  color: #756d66;
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 700;
}

.treatment-card__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
}

.treatment-card__labels span {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.2rem 1.2rem;
  border-radius: 10rem;
  background: #b98263;
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

.treatment-card__labels span:nth-child(2) {
  background: #a8b694;
}

.treatment-card__labels span:nth-child(3) {
  background: #756d66;
}
.treatment-card__labels span:empty {
  display: none;
}

.treatment-card h3,
.option-card h3,
.dog-menu-card h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

.treatment-card__price {
  margin-top: 0;
  font-size: 2rem;
  font-weight: 700;
  text-align: left;
}

/* .treatment-card__sinki-group {
  margin: 1rem;
} */
.treatment-card p:not(.treatment-card__price),
.option-card p:not(.treatment-card__price),
.dog-menu-card p:not(.treatment-card__price) {
  margin-top: 1.4rem;
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.9;
}
.treatment-card h3 {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.8rem 8rem;
}

.option-card {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2.2rem;
  align-items: start;
  min-height: 27rem;
  padding: 2.4rem 3rem;
  border: 1px solid #bfb7ad;
  background: var(--color-white);
}

.option-card img {
  width: 15rem;
  height: 12rem;
  object-fit: cover;
}

.option-card > p {
  grid-column: 1 / -1;
}
.option-card .treatment-card__labels {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}

.option-card img {
  margin-top: 2rem;
}

.menu-detail--dogs {
  width: min(100% - 12rem, 1020px);
}

.dog-menu-list {
  display: grid;
  gap: 5rem;
}

.dog-menu-card {
  display: grid;
  grid-template-columns: 36rem 1fr;
  gap: 4.8rem;
  align-items: center;
  padding: 4.2rem 5.2rem;
  border: 1px solid #bfb7ad;
  background: var(--color-white);
}

.dog-menu-card > img {
  width: 100%;
  aspect-ratio: 1.42 / 1;
  object-fit: cover;
}

/* タグ + 横テキスト */
.dog-menu-card__tagline {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.dog-menu-card .treatment-card__labels {
  justify-content: flex-start;
  margin: 0;
}

.dog-menu-card .treatment-card__labels span {
  background: var(--color-main);
}

.dog-menu-card .dog-menu-card__tag-text {
  margin: 0;
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.6;
}

/* 本文 */
.dog-menu-card h3 {
  font-size: 2rem;
  font-weight: 700;
  text-align: left;
}

.dog-menu-card .treatment-card__price {
  margin-top: 1rem;
  font-weight: 700;
  text-align: left;
}

.dog-menu-card
  p:not(.treatment-card__price):not(.dog-menu-card__tag-text):not(
    .dog-care-note__title
  ):not(.dog-care-note__text) {
  margin-top: 1.4rem;
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.9;
}

/* おすすめ枠 */
.dog-care-note {
  margin-top: 2.4rem;
}

.dog-care-note__box {
  width: min(100%, 40rem);
  padding: 2rem;
  border: 1px solid var(--color-muted);
  background: var(--color-white);
}

.dog-menu-card .dog-care-note__title {
  margin: 0 0 1.4rem;
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
}
.dog-care-note__title p {
  font-size: 1.8rem;
  font-weight: 700;
}
.dog-care-note__list {
  display: grid;
  gap: 1rem;
}

.dog-care-note__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.7;
}

.dog-care-note__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.dog-menu-card .dog-care-note__text {
  margin-top: 1.8rem;
  color: var(--color-muted);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9;
}
.dog-gallery {
  width: min(100%, 100rem);
  margin: 7.6rem auto 0;
}

.dog-gallery__title {
  display: grid;
  place-items: center;
  margin-bottom: 3.6rem;
  color: var(--color-text);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
}

.dog-gallery__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.8rem 8.4rem;
}

.dog-gallery__images img {
  width: 100%;
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
}
.treatment-card p.treatment-card__sinki {
  color: var(--color-muted);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1.6rem;
}
/* ==========================
  Product page
========================== */

.product-page {
  background: var(--color-bg);
}

.product-detail,
.flavor-section,
.enjoy-section {
  width: min(100% - 14rem, 1020px);
  margin-inline: auto;
  background: var(--color-white);
}

.product-detail {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7.6rem;
  align-items: center;
  margin-top: 7.2rem;
  padding: 5.6rem 6.4rem;
}

.product-detail--amazake {
  grid-template-columns: 1.08fr 0.92fr;
  margin-top: 9rem;
}

.product-detail--care {
  grid-template-columns: 0.9fr 1.1fr;
  margin-top: 7rem;
}

.product-detail__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-detail--amazake .product-detail__media img {
  aspect-ratio: 1.26 / 1;
}

.product-detail__lead {
  font-weight: 500;
  font-size: 1.8rem;
}

.product-detail h2 {
  margin-top: 0.8rem;
  font-size: 2.4rem;
  font-weight: 700;
}

.product-detail__price {
  margin-top: 3.2rem;
  font-size: 2.4rem;
  font-weight: 700;
}

.product-detail p:not(.product-detail__lead):not(.product-detail__price),
.product-detail li {
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
}
.product-detail li {
  font-size: 1.7rem;
  font-weight: 500;
}
.product-detail p:not(.product-detail__lead):not(.product-detail__price) {
  margin-top: 2.8rem;
}

.product-detail h3 {
  margin-top: 4rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.product-detail ul {
  margin-top: 2.2rem;
}

.flavor-section {
  padding: 1.6rem 2.4rem 4.6rem;
}

.flavor-section h2,
.enjoy-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

.flavor-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3.6rem;
}

.flavor-card {
  padding: 2.4rem 2rem 2.8rem;
  background: #fbfaf7;
}

.flavor-card h3 {
  font-size: 2rem;
  font-weight: 700;
}

.flavor-card img {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  margin-top: 1.6rem;
  object-fit: cover;
}

.flavor-card p {
  margin-top: 2rem;
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.9;
}

.enjoy-section {
  padding: 0 5rem 5.8rem;
}

.enjoy-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.8rem;
  margin-top: 4rem;
}

.enjoy-card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.enjoy-card__icon {
  width: 7rem;
  height: 7rem;
  object-fit: contain;
}

.enjoy-card__body {
  min-width: 0;
}

.enjoy-card__body h3 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

.enjoy-card__body p {
  margin-top: 0.6rem;
  color: var(--color-muted);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.7;
}

.product-price-list {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
  font-size: 2.1rem;
  font-weight: 700;
}
.product-price-list p {
  font-size: 2.4rem;
  font-weight: 600;
}

.product-price-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}

.product-price-list dt::before {
  content: "・";
}

.sp-only {
  display: none;
}

/* ==========================
   About page
========================== */

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

.about-story,
.owner-section,
.about-rinto {
  width: min(100% - 12rem, 1140px);
  margin-inline: auto;
}

.about-story {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 7.2rem;
  align-items: center;
  padding: 18rem 0 8rem;
}

.about-story__image img {
  width: 100%;
  aspect-ratio: 1.48 / 1;
  object-fit: cover;
}

.about-heading {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  margin-bottom: 4rem;
}

.about-heading h2 {
  font-size: 3.6rem;
  font-weight: 700;
}

.about-heading p {
  color: var(--color-muted);
  font-size: 1.4rem;
  font-weight: 700;
}

.about-story__body > p,
.owner-section__body > p,
.about-rinto-card p {
  color: var(--color-text);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 2;
}

.owner-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6.8rem;
  align-items: center;
  margin-top: 2rem;
  padding: 8.8rem 5rem;
  background: var(--color-bg);
}

.owner-section__image img {
  width: 100%;
  aspect-ratio: 0.95 / 1;
  object-fit: cover;
  object-position: center 22%;
}

.owner-section__body > p + p {
  margin-top: 2rem;
}

.about-rinto {
  padding: 7.6rem 0 12rem;
}

.about-rinto__heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4.8rem;
  margin-bottom: 5.6rem;
}

.about-rinto__heading h2 {
  font-size: 3.4rem;
  font-weight: 700;
}

.about-rinto__heading p {
  color: var(--color-muted);
  font-size: 1.4rem;
  font-weight: 700;
}

.about-rinto__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.6rem;
}

.about-rinto-card {
  background: var(--color-bg);
}

.about-rinto-card img {
  width: 100%;
  aspect-ratio: 1.38 / 1;
  object-fit: cover;
}

.about-rinto-card p {
  padding: 2.4rem 2.6rem 3rem;
}

/* ==========================
   Access page
========================== */

.access-page {
  background: var(--color-bg);
}

.access-guide {
  position: relative;
  width: min(100% - 12rem, 1140px);
  margin: 8rem auto 0;
  padding: 9rem 14rem 8rem;
  background: var(--color-white);
}

.access-guide__body h2 {
  font-size: 4rem;
  font-weight: 700;
  padding: 2rem 0;
}
.access-guide__body h3 {
  font-size: 3rem;
  font-weight: 600;
}
.access-guide__body p {
  margin-top: 3.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
}

.access-guide__items {
  display: grid;
  gap: 5.2rem;
  width: min(100%, 68rem);
  margin-top: 6rem;
}

.access-guide-item {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 4rem;
  align-items: center;
}

.access-guide-item__icon {
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #fff;
}

.access-guide-item__icon [data-lucide] {
  width: 4.2rem;
  height: 4.2rem;
  color: #c4b88e;
  stroke-width: 1.5;
}

.access-guide-item h3 {
  font-size: 2rem;
  font-weight: 700;
}

.access-guide-item p {
  margin-top: 2rem;
  color: var(--color-text);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.9;
}

.access-guide__deco {
  position: absolute;
  right: 5rem;
  bottom: 8rem;
  width: 25rem;
  opacity: 0.65;
}

.access-content {
  display: grid;
  grid-template-columns: 48rem minmax(0, 1fr);
  gap: 6rem;
  width: min(100% - 8rem, 1200px);
  margin: 7rem auto 12rem;
}
.access-content__side {
  display: grid;
  gap: 3.2rem;
}

.access-info-card {
  padding: 3.6rem 3.2rem;
  background: var(--color-white);
}

.access-info-card h2 {
  font-size: 2rem;
  font-weight: 700;
}

.access-info-card dl {
  display: grid;
  gap: 2.6rem;
  margin-top: 3rem;
}

.access-info-card dl div {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.6rem;
  align-items: start;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.55;
}

.access-info-card dt {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.access-info-card [data-lucide] {
  width: 4rem;
  height: 4rem;
  padding: 0.7rem;
  flex: 0 0 auto;
  /* background: #e1e3e1; */
  color: var(--color-main);
  stroke-width: 1.8;
}

.access-map__heading {
  display: flex;
  align-items: baseline;
  gap: 2.6rem;
  margin-bottom: 4.2rem;
}

.access-map__heading h2 {
  font-size: 3.4rem;
  font-weight: 700;
}

.access-map__heading p {
  color: var(--color-muted);
  font-size: 1.4rem;
  font-weight: 700;
}
.access-location-list {
  display: grid;
  gap: 2.4rem;
  margin-top: 3rem;
}

.access-location-list li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1.8rem;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.6;
}

.access-location-list [data-lucide] {
  width: 4rem;
  height: 4rem;
  padding: 0.7rem;
  /* background: #e1e3e1; */
  color: var(--color-main);
  stroke-width: 1.8;
}
.access-map iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 16px;
}

.map-button {
  display: inline-flex;
  margin-top: 24px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
}
/* ==========================
   Responsive
========================== */
/* タブレット用 */

/* タブレット：PCレイアウトを維持 */
@media (min-width: 768px) and (max-width: 1200px) {
  html {
    font-size: 56.25%; /* 1rem = 9px */
  }

  .menu-section__cards,
  .treatment-grid,
  .product-section,
  .concept {
    /* PCのgrid構成を維持 */
  }
  .hero__media img {
    width: 100%; /* 幅 */
    height: 100%; /* 高さ */
    object-fit: cover; /* 画像を枠いっぱいに敷き詰める。その代わり切れる */
    /* contain;なら全部見える。ただ余白が出る。 */
    object-position: center center; /* coverで切る位置を指定 */
    display: block; /* 幅 */
  }
}
/* スマホ */
@media (max-width: 767px) {
  .section-label {
    font-size: 3.2rem;
  }

  /* ーーーーーーーーーー
   topページ
ーーーーーーーーーーー */
  /* top */

  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .hero__media {
    width: 100%;
    min-height: 0;
  }

  .hero__media--human {
    order: 1;
    height: 300px;
  }

  .hero__media--dog {
    order: 2;
    height: 300px;
  }

  /* ロゴはabsoluteなのでorder不要 */
  .hero__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(400px, 95vw);
    /* 400px：最大サイズ,95vw：画面幅の95%まで */
    margin: 0;
    transform: translate(-50%, -50%);
  }

  /* 写真の境目に横方向のボカシ */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(239, 234, 226, 0) 38%,
      rgba(239, 234, 226, 0.9) 46%,
      rgba(239, 234, 226, 0.98) 50%,
      rgba(239, 234, 226, 0.9) 54%,
      rgba(239, 234, 226, 0) 62%
    );
  }

  .hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__media--human img {
    object-position: 0% 80%;
  }

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

  .hero__media--dog img {
    object-position: 0% 30%;
  }

  /* コンセプト */
  .concept {
    display: block;
    border-top: 1px solid var(--color-border);
  }

  .concept__body {
    min-height: 0;
    padding: 3.6rem 2.4rem 4.8rem;
  }

  .concept__title {
    margin-top: 3.6rem;
  }

  .concept__text {
    margin-top: 2.8rem;
    font-size: 1.6rem;
    line-height: 2;
  }

  .concept__image {
    display: block;
    width: 100%;
    height: 280px;
  }
  .concept__image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 10% 10%;
    transform: scaleX(-1);
  }

  /* メニュー */
  .menu-section {
    padding: 4rem 2rem 4.8rem;
  }

  .menu-section__cards {
    grid-template-columns: 1fr;
    height: auto;
  }
  .menu-section .section-heading--center {
    text-align: left;
    margin: 0 0 0 1rem;
  }

  .menu-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 2.4rem 2rem 2.8rem;
    background: linear-gradient(
      90deg,
      var(--color-white) 0%,
      var(--color-white) 48%,
      var(--color-main-soft) 100%
    );
  }
  /* 中の要素をorder対象にする */
  .menu-card__content {
    display: contents;
    padding: 0;
  }

  /* 1. タイトル */
  /* 1. h2 */
  .menu-card__title {
    order: 1;
    font-size: 2.6rem;
  }
  /* 2. 人向け・犬向けメニュー */
  .menu-card__lead {
    order: 2;
    margin-top: 1rem;
  }
  /* 3. 画像 */
  /* ３. h2の直下に画像 */
  .menu-card > img {
    position: static;
    order: 3;
    width: 100%;
    height: auto;
    margin-top: 2rem;
    aspect-ratio: 1.48 / 1;
    object-fit: cover;
    transform: none;
  }

  /* 4. メニュー一覧 */
  .menu-card__list {
    order: 4;
    gap: 1.4rem;
    margin-top: 2.6rem;
    font-size: 1.6rem;
    line-height: 1.8;
  }

  /* 5. ボタン */
  .menu-card .button-link {
    position: static;
    order: 5;
    align-self: flex-start;
    width: min(100%, 220px);
    margin: 2.8rem 0 0;
  }

  /* PC用の画像グラデーションを解除 */
  .menu-card::before {
    display: none;
  }

  .menu-section__note {
    width: auto;
    margin-top: 3.6rem;
    font-size: 1.1rem;
  }

  /* プロダクト */
  .product-section {
    display: block;
    width: min(100% - 4rem, 48rem);
    padding: 4.4rem 0 5.6rem;
  }

  .product-section__intro {
    padding-left: 0;
  }

  .product-section__intro h2 {
    margin-top: 3.6rem;
    font-size: 2rem;
    font-weight: 700;
  }

  .product-section__intro p:not(.section-kana):not(.section-label) {
    margin-top: 2.4rem;
    font-size: 1.4rem;
  }

  .product-section__items {
    grid-template-columns: 1fr;
    gap: 3.2rem;
    width: min(100%, 22rem);
    margin: 4.4rem auto 0;
  }

  .product-card p {
    margin-top: 1.2rem;
    font-size: 1.6rem;
  }
  .product-section__button {
    margin-top: 3.2rem;
  }

  .product-section__button .button-link {
    margin: 0;
  }

  /* コンタクト */
  .contact-links {
    display: block;
    width: min(100% - 4rem, 48rem);
    padding: 4rem 0 4.8rem;
  }

  .contact-card {
    min-height: 0;
    padding: 3rem 2.4rem 3.6rem;
    border-radius: 3rem;
  }

  .contact-card + .contact-card {
    margin-top: 2rem;
  }

  .contact-card__head [data-lucide] {
    width: 3.2rem;
    height: 3.2rem;
  }

  .contact-card__head > img:not(.contact-card__avatar) {
    width: 13rem;
  }

  .contact-card__avatar {
    width: 7.6rem;
    height: 7.6rem;
  }

  /* 一番大きい見出し */
  .contact-card__account {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .contact-card__title {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.3;
  }

  /* 見出しより二回り小さい */
  .contact-card__sub {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
  }

  /* 説明文 */
  .contact-card__text {
    min-height: 0;
    margin-top: 2rem;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7;
  }

  /* ボタン文字 */

  .contact-card .button-link,
  .contact-card .outline-button {
    width: min(100%, 26rem);
    min-width: 0;
    min-height: 4.8rem;
    margin: 1rem auto 0;
    padding: 1rem 1.6rem;
    gap: 1.2rem;
    font-size: 1.6rem;
  }

  .contact-links__deco--left {
    left: -1rem;
    top: 2.8rem;
    width: 16rem;
  }

  .contact-links__deco--right {
    right: -1rem;
    bottom: 2.8rem;
    width: 15rem;
  }

  /* アクセス */
  .access-section__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(100% - 4rem, 48rem);
    padding: 0 0 6rem 2rem;
  }
  /* 中の要素をorderで並べられるようにする */
  .access-section__info,
  .access-section__map {
    display: contents;
  }

  /* 1. Access */
  .access-section__info .section-label {
    order: 1;
    margin-top: 2rem;
  }

  /* 2. アクセス（かな） */
  .access-section__info .section-kana {
    order: 2;
    margin-top: 0.2rem;
  }

  /* 3. マップ */
  .access-section__map > img {
    display: block;
    order: 3;
    width: 90%;
    height: auto;
    margin: 4rem 0 0;
  }

  /* 4. Google Mapボタン */
  .access-section__map .button-link {
    position: static;
    order: 4;
    align-self: flex-start;
    width: min(80%, 24rem);
    margin: 2rem 0 0 0;
  }

  /* 5. Rinto（リント） */
  .access-section__info h2 {
    order: 5;
    margin: 5rem 0 2rem 0;
    font-size: 2.4rem;
  }

  /* 6. アクセスリスト */
  .access-list {
    order: 6;
    margin-top: 1rem;
    gap: 2rem;
  }

  .access-list__item {
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    font-size: 1.6rem;
  }

  .access-list__item dt {
    width: 3rem;
    height: 3rem;
  }

  .access-list__item [data-lucide] {
    width: 3rem;
    height: 3rem;
    color: var(--color-main);
    stroke-width: 1.8;
  }

  .access-section__deco {
    right: 5px;
    bottom: 2rem;
    width: 10rem;
  }
}

/* ーーーーーーーーーー
   メニューページ
ーーーーーーーーーーー */
@media (max-width: 767px) {
  /* =====================
     MENU共通
  ===================== */

  .menu-detail,
  .menu-detail--dogs {
    width: min(100% - 6.4rem, 40rem);
    padding: 3.6rem 0 4.8rem;
  }

  .menu-detail__heading {
    gap: 1.2rem;
    margin-bottom: 2.4rem;
  }

  .menu-detail__heading h2 {
    font-size: 3rem;
  }

  .menu-detail__heading p {
    font-size: 1.4rem;
  }

  .treatment-grid,
  .option-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  /* =====================
     施術カード
  ===================== */
  .treatment-grid__featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding: 1.6rem;
  }

  .treatment-grid__featured .treatment-card {
    width: 100%;
  }

  .treatment-card {
    min-height: 0;
    padding: 1.4rem 2.2rem 2.4rem;
  }

  .treatment-card__image {
    width: min(100%, 20rem);
    height: 11.8rem;
    margin-bottom: 1.8rem;
  }

  .treatment-card__badge {
    left: 0.3rem;
    top: 1.4rem;
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
  }

  .treatment-card__badge--2 {
    left: 1rem;
  }

  .treatment-card__labels {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .treatment-card__labels span {
    min-height: 1.5rem;
    padding: 0.2rem 0.8rem;
    font-size: 1.4rem;
  }

  .treatment-card h3,
  .dog-menu-card h3 {
    font-size: 1.8rem;
  }

  .option-card h3 {
    font-size: 1.6rem;
  }

  .treatment-card__price {
    margin-top: 0.6rem;
    font-size: 1.6rem;
  }

  /* 通常の本文 */
  .treatment-card p:not(.treatment-card__price),
  .option-card p:not(.treatment-card__price) {
    margin-top: 1rem;
    font-size: 1.6rem;
    line-height: 1.85;
  }
  /* 新規メニュー部分だけ */
  #people .treatment-card p.treatment-card__sinki {
    margin: 0;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.7;
  }
  #people .treatment-card p.treatment-card__sinki2 {
    margin: 0;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
  }

  /* ¥15000割引チケット */
  /* #people .treatment-card .treatment-card__sinki--title {
    margin-top: 1.4rem;
    font-size: 1.8rem;
  } */

  /* 料金グループ */
  #people .treatment-card__sinki-group {
    margin: 2rem;
  }

  /* グループ内の行間 */
  #people
    .treatment-card__sinki-group
    .treatment-card__sinki
    + .treatment-card__sinki {
    margin-top: 0.3rem;
  }

  /* 最後の通常説明 */
  #people .treatment-card__description {
    margin-top: 2rem;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.85;
  }
  /* =====================
     オプション
  ===================== */

  .option-card {
    grid-template-columns: 10rem 1fr;
    gap: 1.4rem;
    min-height: 0;
    padding: 1.4rem;
  }

  .option-card img {
    width: 10rem;
    height: 12rem;
  }

  /* =====================
     ドッグメニュー
  ===================== */

  .dog-menu-list {
    gap: 2.4rem;
  }

  .dog-menu-card {
    display: block;
    padding: 1.8rem 2rem 2.4rem;
  }

  .dog-menu-card > img {
    margin-bottom: 1.8rem;
  }

  /* タグ＋タグ説明文 */
  .dog-menu-card__tagline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 3rem;
  }

  /* タグ自体の余白を解除 */
  .dog-menu-card__tagline .treatment-card__labels {
    margin: 0;
  }

  /* タグ直下の文章 */
  .dog-menu-card p.dog-menu-card__tag-text {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.5;
  }

  /* メニュー名 */
  .dog-menu-card__tagline + h3 {
    margin: 0 0 1rem;
    font-size: 1.8rem;
  }

  /* ドッグメニューの通常本文だけ */
  .dog-menu-card
    p:not(.treatment-card__price):not(.dog-menu-card__tag-text):not(
      .dog-care-note__title
    ):not(.dog-care-note__text) {
    margin-top: 1.6rem;
    font-size: 1.6rem;
    line-height: 1.85;
  }

  /* おすすめ枠 */
  .dog-care-note__title {
    margin: 0 0 1.4rem;
    font-size: 1.2rem;
  }
  .dog-menu-card p.dog-care-note__title {
    margin: 0 0 1.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
  }
  .dog-care-note__list li {
    font-size: 1.8rem;
  }

  .dog-menu-card p.dog-care-note__text {
    margin-top: 1.8rem;
    font-size: 1.6rem;
  }

  /* =====================
     犬ギャラリー
  ===================== */

  .dog-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
    width: min(100%, 30rem);
    margin-top: 4rem;
  }

  .dog-gallery__title {
    font-size: 1.8rem;
    margin-top: 50px;
  }
  .dog-gallery__images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .dog-gallery__images img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* =====================
    リンクボタン
  ===================== */
@media (max-width: 767px) {
  .menu-bottom-links {
    grid-template-columns: 1fr;
    gap: 1rem;
    width: min(100% - 8rem, 28rem);
    padding: 4.8rem 0 5.6rem;
    position: relative;
    isolation: isolate;
  }

  .menu-bottom-link {
    display: grid;
    grid-template-columns: 4rem 1fr;
    align-items: center;
    column-gap: 2.4rem;

    min-height: 7.2rem;
    padding: 1rem 5rem;
    font-size: 1.6rem;
    text-align: left;
    position: relative;
    z-index: 2;
  }

  .menu-bottom-link [data-lucide],
  .menu-bottom-link-insta {
    width: 4rem;
    height: 4rem;
    justify-self: center;
  }

  .menu-bottom-link small {
    display: block;
    margin-top: 0.4rem;
    font-size: 1rem;
  }

  /* デコを再表示 */
  .menu-bottom-links__deco {
    display: block;
    top: 3rem;
    width: 5rem;
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }

  .menu-bottom-links__deco--left {
    width: 10rem; /* 左だけの大きさ */

    top: 2rem; /* 上下位置 */
    left: -4rem; /* 左右位置 */

    right: auto;
    bottom: auto;
  }

  .menu-bottom-links__deco--right {
    width: 12rem; /* 右だけの大きさ */

    right: -4rem; /* 左右位置 */
    bottom: 1rem; /* 上下位置 */

    top: auto;
    left: auto;
  }

  /* ーーーーーーーーーー
   プロダクトページ
ーーーーーーーーーーー */
  .product-detail,
  .flavor-section,
  .enjoy-section {
    width: min(100% - 5.6rem, 34rem);
  }

  .product-detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 3.2rem;
    padding: 3rem 2.4rem;
  }

  .product-detail__media img,
  .product-detail--amazake .product-detail__media img {
    width: min(100%, 21rem);
    margin-inline: auto;
    aspect-ratio: 1 / 1;
  }

  .product-detail--amazake .product-detail__media img {
    aspect-ratio: 1.25 / 1;
  }

  .product-detail p:not(.product-detail__lead):not(.product-detail__price),
  .product-detail li {
    font-size: 1.6rem;
    line-height: 1.9;
  }

  .product-detail p:not(.product-detail__lead):not(.product-detail__price) {
    margin-top: 2rem;
  }

  .product-detail h3 {
    margin-top: 2.8rem;
    font-size: 1.6rem;
  }
  .flavor-section {
    margin-top: 0;
    padding: 2.4rem 2.4rem 3.2rem;
  }

  .flavor-section h2,
  .enjoy-section h2 {
    font-size: 2rem;
  }

  .flavor-section__grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    margin-top: 2.8rem;
  }

  .flavor-card {
    padding: 0;
    background: transparent;
  }

  .flavor-card h3 {
    margin: 1.8rem 0 0 4rem;
    font-size: 1.8rem;
  }

  .flavor-card img {
    width: min(100%, 20rem);
    margin: 1.4rem auto 0;
  }

  .flavor-card p {
    margin-top: 1.8rem;
    font-size: 1.6rem;
  }

  .enjoy-card__icon {
    width: 4.8rem;
    height: 4.8rem;
  }

  .enjoy-section {
    padding: 2.2rem 2.4rem 3.2rem;
  }

  .enjoy-section__grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    margin-top: 2.8rem;
  }

  .enjoy-card {
    grid-template-columns: 6rem 1fr;
    gap: 1.4rem;
  }

  .enjoy-card [data-lucide] {
    width: 4.8rem;
    height: 4.8rem;
  }

  .enjoy-card h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 1.8rem;
  }

  .enjoy-card p {
    font-size: 1.4rem;
  }

  .product-price-list div {
    gap: 1rem;
  }

  .sp-only {
    display: block;
  }

  .product-detail__body {
    display: contents;
  }

  /* すべての文字要素を左寄せ */
  .product-detail__body > * {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  .product-detail__lead {
    order: 1;
    font-size: 1.5rem;
    font-weight: 500;
  }

  .product-detail__body > h2 {
    order: 2;
    margin-top: 1rem;
    font-size: 1.8rem;
  }

  .product-detail__price,
  .product-price-list {
    order: 3;
    margin-top: 1.4rem;
    font-size: 1.8rem;
    text-align: left;
  }

  .product-price-list {
    gap: 1rem;
  }

  /* 写真だけ中央寄せ */
  .product-detail > .product-detail__media {
    order: 4;
    width: 100%;
    margin-top: 1rem;
    text-align: center;
  }

  .product-detail__media img {
    margin-right: auto;
    margin-left: auto;
  }

  /* 説明文 */
  .product-detail__body
    > p:not(.product-detail__lead):not(.product-detail__price),
  .product-detail__body > h3,
  .product-detail__body > ul {
    order: 5;
    text-align: left;
  }

  /* =====================
     ABOUTページ
  ===================== */

  .about-story,
  .owner-section,
  .about-rinto {
    width: min(100% - 4rem, 44rem);
  }

  .about-story {
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
    align-items: stretch;
    margin-top: 3.2rem;
    padding: 2.8rem 2.4rem 3.4rem;
    background: var(--color-white);
  }

  .about-story__image {
    order: 2;
  }

  .about-story__body {
    display: contents;
  }

  .about-story__body .about-heading {
    order: 1;
  }

  .about-story__body > p {
    order: 3;
  }

  .about-story__image img {
    aspect-ratio: 1.32 / 1;
  }

  .about-heading {
    display: block;
    margin-bottom: 0;
  }

  .about-heading h2,
  .about-rinto__heading h2 {
    font-size: 3rem;
    line-height: 1.2;
  }

  .about-heading p,
  .about-rinto__heading p {
    margin-top: 0.7rem;
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .about-rinto__heading h2,
  .about-rinto__heading p {
    margin: 0 3rem;
  }

  .about-story__body > p,
  .owner-section__body > p,
  .about-rinto-card p {
    font-size: 1.6rem;
    line-height: 2;
  }

  .owner-section {
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
    align-items: stretch;
    margin-top: 2.4rem;
    padding: 2.8rem 2.4rem 3.6rem;
  }

  .owner-section__image {
    order: 2;
  }

  .owner-section__body {
    display: contents;
  }

  .owner-section__body .about-heading {
    order: 1;
  }

  .owner-section__body > p {
    order: 3;
  }

  .owner-section__image img {
    width: min(100%, 30rem);
    margin-inline: auto;
    aspect-ratio: 0.76 / 1;
  }

  .owner-section__body > p + p {
    margin-top: 2rem;
  }

  .about-rinto {
    padding: 4.4rem 0 5rem;
  }

  .about-rinto__heading {
    display: block;
    margin-bottom: 2.4rem;
  }

  .about-rinto__grid {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }

  .about-rinto-card {
    width: min(100%, 30rem);
    margin-inline: auto;
  }

  .about-rinto-card img {
    aspect-ratio: 1.2 / 1;
  }

  .about-rinto-card p {
    padding: 1.8rem 1.8rem 2.4rem;
  }
  /* ーーーーーーーーーーー
アクセスページ
ーーーーーーーーーーーーーーー*/
  .access-guide {
    width: min(100% - 4rem, 34rem);
    margin-top: 4.8rem;
    padding: 4rem 2.4rem 4.4rem;
  }

  .access-guide__body h2 {
    font-size: 2.4rem;
    font-weight: 700;
    padding: 0 0 2rem 0;
    line-height: 1.65;
  }
  .access-guide__body h3 {
    font-size: 2rem;
    font-weight: 600;
    padding: 0 0 2rem 0;
  }

  .access-guide__body p {
    margin-top: 2.8rem;
    font-size: 1.6rem;
    line-height: 2;
  }

  .access-guide__items {
    gap: 4.2rem;
    margin-top: 5rem;
  }

  .access-guide-item {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "text text";
    gap: 1.6rem 1.4rem;
    align-items: center;
  }
  /* h3とpを外側のgridに参加させる */
  .access-guide-item > div {
    display: contents;
  }

  .access-guide-item__icon [data-lucide] {
    width: 3rem;
    height: 3rem;
  }
  .access-guide-item__icon {
    grid-area: icon;
    width: 7.2rem;
    height: 7.2rem;
    margin-bottom: 0;
  }
  .access-guide-item h3 {
    grid-area: title;
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
  }

  .access-guide-item p {
    grid-area: text;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2;
  }

  .access-guide__deco {
    top: 4rem;
    right: 2.4rem;
    bottom: auto;
    width: 10rem;
  }

  .access-content {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    width: min(100% - 3.2rem, 36rem);
    margin: 4.8rem auto 6.4rem;
  }

  .access-map {
    order: 1;
  }

  .access-content__side {
    order: 2;
    gap: 2.4rem;
  }

  .access-map__heading {
    display: block;
    margin-bottom: 2.4rem;
    text-align: center;
  }

  .access-map__heading h2 {
    font-size: 3rem;
  }

  .access-map__heading p {
    margin-top: 1rem;
    font-size: 1.4rem;
  }

  .access-map__image {
    aspect-ratio: 1.42 / 1;
  }

  .access-info-card {
    padding: 3.2rem 2.4rem;
  }

  .access-info-card h2 {
    font-size: 1.5rem;
  }

  .access-info-card dl {
    width: min(100%, 40rem);
    margin: 2.4rem auto 0;
    gap: 2rem;
    margin-top: 2.4rem;
  }

  .access-info-card dl div {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0rem;
    font-size: 1.6rem;
  }
  .access-info-card dt {
    gap: 0.8rem; /*アイコンと文字の間*/
    white-space: nowrap;
  }
  .access-info-card [data-lucide] {
    width: 3rem;
    height: 3rem;
    padding: 0.6rem;
  }

  .access-location-list {
    gap: 2rem;
    margin-top: 2.4rem;
  }

  .access-location-list li {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 1.4rem;
    font-size: 1.6rem;
    margin: 0 0 0 2rem;
  }

  .access-location-list [data-lucide] {
    width: 3rem;
    height: 3rem;
    padding: 0.6rem;
  }
}