:root {
  --brown: #45170a;
  --gold: #f1bd1a;
  --text: #000000;
  --bg: #ffffff;
  --shadow-strong: rgba(0, 0, 0, 0.8);
  --shadow-medium: rgba(32, 10, 0, 0.4);
}

/* Base */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  color: var(--text);
  font-family: "Montserrat", "Noto Sans JP", "Inter", "Hiragino Kaku Gothic Pro",
    "Meiryo", sans-serif;
  background: var(--bg);
  line-height: 1.5; /* Chakra base */
  letter-spacing: 0; /* Normalize */
  font-size: 15px; /* Next実計測に合わせる */
  overflow-x: hidden; /* 横スクロールを防ぐ */
}
/* Chakra風にベースの余白をリセット */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0 0 0 1.25rem;
}

/* 画像のドラッグを無効化 */
img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}
a {
  text-decoration: none;
  color: inherit;
}

.script {
  font-family: "Petit Formal Script", cursive;
}
.subtitle {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
}
.num {
  font-family: "Comfortaa", cursive;
}
.button {
  display: inline-block;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
.button--primary {
  background: #fff;
  color: var(--brown);
  border: 1px solid #fff;
}
.button--primary:hover {
  background: var(--gold);
  color: var(--brown);
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Splash */
.splash {
  position: fixed;
  inset: 0;
  background: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.splash.hidden {
  display: none;
}
.splash.fadeout {
  opacity: 0;
}
.splash__logo {
  width: min(400px, 80vw);
  transform: scale(1);
  transition: all 1s ease-in-out;
}
.splash.fadeout .splash__logo {
  opacity: 0;
  transform: scale(1.1);
}
.splash__logo img {
  width: 100%;
  height: auto;
}

/* Hero */
.hero {
  width: 100%;
  background: var(--brown);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 80px;
  min-height: 100svh;
}
.hero__inner {
  position: relative;
  max-width: 600px;
  z-index: 1;
}
.hero__logo {
  position: absolute;
  top: -35px;
  left: 0;
  transform: translateX(-48%);
  width: 100%;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.hero__logo img {
  width: 53%;
  max-width: 320px;
  margin-inline: auto;
}
.fade-on-content.visible {
  opacity: 1;
}

.hero__window {
  width: 100%;
  max-height: min(700px, 60vh);
  max-width: min(600px, 40vw);
  border-radius: 50% 50% 0 0;
  overflow: hidden;
  aspect-ratio: 600/700;
  position: relative;
  clip-path: circle(0% at 50% 100%);
}
.hero__window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clip-arch-on.animated {
  animation: slideUpArch 0.8s ease-out forwards;
}
@keyframes slideUpArch {
  from {
    clip-path: circle(0% at 50% 100%);
  }
  to {
    clip-path: circle(150% at 50% 100%);
  }
}

.hero__copy {
  position: absolute;
  right: -40px;
  transform: translateX(100%);
  bottom: -17px;
  z-index: 3;
  color: #fff;
  letter-spacing: 0.1em;
  white-space: normal; /* HTMLのインデントをスペースとして表示しない */
  display: flex;
  align-items: flex-end;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out 0.2s;
  pointer-events: none; /* クリックイベントを無効化 */
  /* 子要素のline-heightを上書き */
  line-height: 56px; /* PC版のline-heightを親要素にも設定 */
}
/* 子要素すべてにwhite-space: normalを設定してインデントのスペースを無視 */
.hero__copy * {
  white-space: normal;
}
.hero__copy.visible {
  opacity: 1;
}
.copy {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  letter-spacing: inherit; /* 親要素のletter-spacingを継承 */
  white-space: normal; /* 親要素のwhite-space: pre-wrapを上書きしてインデントのスペースを無視 */
}
.copy--pc {
  font-size: max(0.9375vw, 22px);
  line-height: 56px; /* Next.js実装に合わせて56pxに固定 */
  text-align: left;
}
.copy--sp {
  display: none;
  line-height: 1.5;
  text-align: center;
  font-size: max(3.5vw, 16px);
}

@media (max-width: 767px) {
  .hero {
    padding-block: 80px;
  }
  .hero__inner {
    width: 100%;
    padding-inline: 16px;
  }
  .hero__logo {
    position: relative;
    transform: none;
    top: auto;
    margin-bottom: 24px;
  }
  .hero__logo img {
    width: 53%;
    max-width: 280px;
  }
  .hero__copy {
    position: relative;
    right: auto;
    bottom: auto;
    transform: none;
    text-align: center;
    justify-content: center;
    margin-top: 24px;
  }
  .copy--pc {
    display: none;
  }
  .copy--sp {
    display: block;
    font-size: max(3.5vw, 16px);
    line-height: 1.5;
  }
  .hero__window {
    max-width: 90vw;
    max-height: 80vh;
    margin-inline: auto;
  }
}

/* Message */
.message {
  width: 100%;
  background-image: url("./images/parlor-toitoi-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.2);
  padding: 80px 32px;
}
@media (min-width: 768px) {
  .message {
    padding: 200px 0;
  }
}
.message__backdrop {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.message .message-card {
  position: relative;
  margin: 0 auto;
  max-width: min(800px, 80vw);
  box-shadow: 12px 12px 0 rgba(32, 10, 0, 0.4); /* base: 12px */
  padding: 32px; /* base: 8 (32px) */
  background: #fff;
  transform: rotate(-3deg) scale(1.1);
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
@media (min-width: 768px) {
  .message .message-card {
    box-shadow: 20px 20px 0 rgba(32, 10, 0, 0.4); /* md: 20px */
    padding: 40px; /* md: 10 (40px) */
  }
}
.message .message-card.visible {
  transform: rotate(-3deg) scale(1);
  opacity: 1;
}
.message-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.message .message-card__text {
  font-size: clamp(16px, 2vw, 24px);
  line-height: 2;
  color: #000;
  text-align: left;
  font-family: "Inter", system-ui, sans-serif;
  margin: 0;
}
.message .message-card__sign {
  font-size: clamp(16px, 2vw, 24px);
  line-height: 2;
  color: #000;
  text-align: right;
  font-family: "Inter", system-ui, sans-serif;
  margin: 0;
}

/* Staff */
.staff {
  width: 100%;
  background-image: url("./images/bg_fruits_lightbrown.png");
  background-position: left top;
  background-repeat: repeat;
  /* Next.jsのBox: py={{ base: "80px", md: "160px" }} */
  padding: 80px 0; /* base: py={{ base: "80px", md: "160px" }} */
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .staff {
    padding: 160px 0; /* md: py={{ md: "160px" }} */
  }
}
.staff__inner {
  position: relative;
  max-width: 100%; /* base: maxW={{ base: "100%", md: "min(1000px, 80vw)" }} */
  margin-inline: auto;
  /* Next.jsのVStack: px={4}, spacing={{ base: 12, md: "unset" }} */
  padding-inline: 16px; /* px={4}(16px) */
  display: flex;
  flex-direction: column;
  gap: 48px; /* base: spacing={12}(48px) */
}
@media (min-width: 768px) {
  .staff__inner {
    max-width: min(1000px, 80vw); /* md: maxW={{ md: "min(1000px, 80vw)" }} */
    gap: 0; /* md: spacing={{ md: "unset" }} */
  }
}
.staff__title {
  position: relative; /* base: position={{ base: "relative", md: "absolute" }} */
  top: auto;
  right: auto;
  text-align: center; /* base: textAlign={{ base: "center", md: "right" }} */
  transform: none; /* base: transform={{ base: "unset", md: "translateX(20%)" }} */
  /* gapでスペースが制御されるため、marginを削除 */
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .staff__title {
    position: absolute; /* md: position={{ md: "absolute" }} */
    top: 0;
    right: 0;
    text-align: right; /* md: textAlign={{ md: "right" }} */
    transform: translateX(20%); /* md: transform={{ md: "translateX(20%)" }} */
    margin-bottom: 0;
  }
}
.staff__title {
  position: relative; /* base: position={{ base: "relative", md: "absolute" }} */
  top: auto;
  right: auto;
  text-align: center; /* base: textAlign={{ base: "center", md: "right" }} */
  transform: none; /* base: transform={{ base: "unset", md: "translateX(20%)" }} */
  /* gapでスペースが制御されるため、marginを削除 */
  margin-bottom: 0;
  /* Next.jsのVStack: gap="24px", align={{ base: "center", md: "flex-end" }} */
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center; /* base: align={{ base: "center", md: "flex-end" }} */
}
@media (min-width: 768px) {
  .staff__title {
    position: absolute; /* md: position={{ md: "absolute" }} */
    top: 0;
    right: 0;
    text-align: right; /* md: textAlign={{ md: "right" }} */
    transform: translateX(20%); /* md: transform={{ md: "translateX(20%)" }} */
    align-items: flex-end; /* md: align={{ md: "flex-end" }} */
  }
}
.staff__title .script {
  font-size: clamp(48px, 6vw, 64px);
  color: var(--brown);
  /* Next.jsのText: lineHeight={{ base: "1", md: "54px" }} */
  line-height: 1; /* base: lineHeight={{ base: "1", md: "54px" }} */
}
@media (min-width: 768px) {
  .staff__title .script {
    line-height: 54px; /* md: lineHeight={{ md: "54px" }} */
  }
}
.staff__title .subtitle {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--brown);
  line-height: 18px;
}

.staff__figure {
  width: auto;
  height: 100%;
  max-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(
    1.1
  ); /* base: transform={{ base: `scale(${isManagerImageVisible ? 1 : 1.1})` }} */
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.staff__figure.visible {
  transform: scale(
    1
  ); /* base: transform={{ base: `scale(${isManagerImageVisible ? 1 : 1.1})` }} */
  opacity: 1;
}
@media (min-width: 768px) {
  .staff__figure {
    transform: scale(
      1.2
    ); /* md: transform={{ md: `translateX(-20%) scale(${isManagerImageVisible ? 1 : 1.2})` }} */
  }
  .staff__figure.visible {
    transform: translateX(-20%) scale(1); /* md: transform={{ md: `translateX(-20%) scale(${isManagerImageVisible ? 1 : 1.2})` }} */
  }
}
.staff__figure img {
  max-height: 95svh;
  width: auto;
  height: min(95svh, auto);
  object-fit: contain;
  filter: drop-shadow(24px 0 0 rgba(200, 130, 70, 0.3));
}
.staff__profile {
  position: relative; /* base: position={{ base: "relative", md: "absolute" }} */
  bottom: auto;
  right: auto;
  max-width: 285px; /* base: maxW={{ base: "285px", md: "305px" }} */
  width: 100%;
  height: 340px; /* base: h={{ base: "340px", md: "360px" }} */
  background: #fff;
  border-radius: 50% 50% 0 0;
  padding-top: 12%;
  padding-bottom: 8%;
  padding-inline: 5%;
  transform: none; /* base: transform={{ base: "unset", md: "translateX(20%)" }} */
  display: flex;
  flex-direction: column;
  margin-inline: auto; /* base: 中央揃え */
  gap: 1rem;
}
@media (min-width: 768px) {
  .staff__profile {
    position: absolute; /* md: position={{ md: "absolute" }} */
    bottom: 0;
    right: 0;
    max-width: 305px; /* md: maxW={{ md: "305px" }} */
    height: 360px; /* md: h={{ md: "360px" }} */
    transform: translateX(20%); /* md: transform={{ md: "translateX(20%)" }} */
    margin-inline: 0;
  }
}
.profile__name .roman {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--brown);
  letter-spacing: 0.08em;
  line-height: 1.6;
  font-family: "Comfortaa", cursive;
  text-align: center;
}
.profile__name .jp {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  line-height: 1;
  color: #000;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
}
.profile__desc {
  font-size: clamp(12px, 2vw, 14px);
  line-height: 28px;
  color: #000;
  font-family: "Zen Maru Gothic", sans-serif;
  white-space: normal;
}
.profile__sns {
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: center;
}
.sns-btn {
  display: inline-flex;
  width: 36px;
  height: 32px;
  align-items: center;
  justify-content: center;
}
.sns-btn:hover {
  opacity: 0.7;
}

/* モバイル用のスタイルはデフォルトで定義されているため、削除 */

/* Slider */
.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}
.slide-track {
  display: flex;
  width: max-content;
  animation: infiniteSlide 40s linear infinite;
  will-change: transform; /* パフォーマンス最適化 */
}
@keyframes infiniteSlide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.slide-item {
  flex-shrink: 0;
  width: 400px;
  height: 400px;
}
@media (max-width: 767px) {
  .slide-item {
    width: 200px;
    height: 200px;
  }
}
.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Menu section */
.menu {
  width: 100%;
  /* Next.jsのBox: py={{ base: "80px", md: "160px" }} */
  padding: 80px 0;
  background-image: url("./images/bg_fruits_yellow.png");
  background-position: left top;
  background-repeat: repeat;
  /* セクション間のギャップを120px（base）/ 160px（md）に設定 */
  display: flex;
  flex-direction: column;
  gap: 120px;
}
@media (min-width: 768px) {
  .menu {
    padding: 160px 0; /* md: py={{ md: "160px" }} */
    gap: 160px; /* md: gap={{ md: "160px" }} */
  }
}
.menu-section {
  /* 各セクション内のギャップを3rem（base: 48px）/ 5rem（md: 80px）に設定 */
  display: flex;
  flex-direction: column;
  gap: 3rem; /* base: spacing={{ base: 12 }}(48px) */
  /* Next.jsの各VStackにpx={{ base: 4 }}が設定されているため、16pxのパディングを追加 */
  padding-inline: 16px;
  max-width: 100%; /* base: maxWidth={{ base: "100%" }} */
  margin-inline: auto;
}
@media (min-width: 768px) {
  .menu-section {
    gap: 5rem; /* md: spacing={{ md: 20 }}(80px) */
    max-width: min(
      1000px,
      80vw
    ); /* md: maxWidth={{ md: "min(1000px, 80vw)" }} */
  }
}
.section-heading {
  text-align: center;
  margin: 0 auto; /* gapでスペースが制御されるため、上下のマージンを0に */
  padding-inline: 0; /* section-headingはパディング不要 */
  /* Next.jsのVStack: spacing={{ base: 4, md: 6 }} */
  display: flex;
  flex-direction: column;
  gap: 16px; /* base: spacing={4}(16px) */
}
@media (min-width: 768px) {
  .section-heading {
    gap: 24px; /* md: spacing={6}(24px) */
  }
}
.section-heading:first-of-type {
  margin-top: 0; /* 最初のセクション見出しの上マージンを削除 */
}
.section-heading .script {
  font-size: clamp(48px, 8vw, 80px);
  color: var(--brown);
  line-height: 1;
  margin-bottom: 0; /* gapで制御するため0に */
}
.section-heading .subtitle {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--brown);
  font-weight: 500;
  line-height: 1;
}
.section-heading--light .script,
.section-heading--light .subtitle {
  color: #fff;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Next.jsのSimpleGrid: spacing={{ base: 6, md: 4 }}, p={{ base: 4, md: 8 }} */
  gap: 24px; /* base: spacing={6}(24px) */
  padding: 16px; /* base: p={4}(16px) */
  width: 100%;
  background: var(--brown);
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%; /* base: 100% */
  margin-inline: auto;
}
/* md spacing: gap=4(16px), p=8(32px) */
@media (min-width: 768px) {
  .card-grid {
    gap: 16px; /* md: spacing={4}(16px) */
    padding: 32px; /* md: p={8}(32px) */
  }
}
.card-grid--single {
  grid-template-columns: 1fr;
}
@media (max-width: 767px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px; /* base: space-4 */
  background: #fff;
  padding: 16px;
  box-shadow: 8px 8px 0 0 var(--shadow-strong);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 6px; /* var(--chakra-radii-md) */
}
@media (min-width: 768px) {
  .card {
    gap: 40px; /* md: space-10 */
  }
}
/* ホバー効果はPCのみ（タッチデバイスでは無効） */
@media (hover: hover) {
  .card:hover .card__image img {
    filter: saturate(1.2);
    transform: scale(1.05);
  }
  .card:hover .card__name,
  .card:hover .card__price {
    color: var(--gold);
  }
}

.card__image {
  width: 100%;
  max-width: 920px;
  background: #e0e0e0;
  border-radius: 12px; /* base: 12px */
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .card__image {
    border-radius: 20px; /* md: 20px */
  }
}
.card__image--wide {
  aspect-ratio: 3 / 2;
}
.card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
  will-change: filter, transform; /* パフォーマンス最適化 */
}
.card__name {
  font-weight: 500;
  font-size: clamp(18px, 3vw, 24px);
  text-align: left;
  white-space: pre-wrap;
  line-height: 24px; /* base: 24px */
  color: #000;
  transition: color 0.3s ease-in-out;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media (min-width: 768px) {
  .card__name {
    line-height: 32px; /* md: 32px */
  }
}
.card__price {
  align-self: flex-end;
  font-size: 18px; /* base: 18px */
  font-weight: 500;
  line-height: 24px; /* base: 24px */
  color: #000;
  transition: color 0.3s ease-in-out;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media (min-width: 768px) {
  .card__price {
    font-size: 24px; /* md: 24px */
    line-height: 32px; /* md: 32px */
  }
}
.card__price small {
  font-size: 14px;
  font-weight: 500;
  margin-left: 4px;
}

/* Special block */
.special {
  position: relative;
  display: grid;
  grid-template-columns: 1fr; /* base: 1カラム */
  gap: 16px; /* base: spacing={4}(16px) */
  align-items: center;
  /* Next.jsのStack: px={{ base: 4, md: 10 }}, pb={10}, pt={16}, direction={{ base: "column", md: "row" }} */
  padding: 64px 16px 40px 16px; /* base: pt={16}(64px), px={4}(16px), pb={10}(40px) */
  margin: 0 auto;
  max-width: 100%; /* base: maxWidth={{ base: "100%" }} */
  border-radius: 10px;
  background: var(--brown);
  width: 100%;
}
@media (min-width: 768px) {
  .special {
    grid-template-columns: 1fr 1fr; /* md: 2カラム（direction="row"） */
    max-width: min(
      1000px,
      80vw
    ); /* md: maxWidth={{ md: "min(1000px, 80vw)" }} */
    padding: 64px 40px 40px 40px; /* md: pt={16}(64px), px={10}(40px), pb={10}(40px) */
  }
}
.special__title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  border-radius: 10px;
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 400;
  color: #fff;
  font-family: "Petit Formal Script", cursive;
  text-align: center;
  line-height: 112px;
}
.special__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.special__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* Next.jsのspacing={6}に合わせて24pxに変更 */
  margin: auto;
}
.special__heading {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Next.jsのspacing={4}に合わせて16pxに変更 */
  text-align: center;
}
.title-ja {
  font-size: clamp(24px, 4vw, 32px);
  color: #fff;
  font-weight: 900;
  line-height: 1;
}
.title-sub {
  font-size: clamp(20px, 3vw, 24px);
  color: #fff;
  font-weight: 500;
  line-height: 1;
}
.desc {
  font-size: clamp(12px, 2vw, 14px);
  line-height: 24px;
  color: #fff;
}
.present {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Next.jsのspacing={2}に合わせて8pxに変更 */
}
.present__line {
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.present__line--gold {
  font-size: clamp(24px, 4vw, 32px);
  color: var(--gold);
}
.present__line--white {
  font-size: clamp(24px, 4vw, 32px);
  color: #fff;
}
.special__period {
  font-size: clamp(12px, 2vw, 14px);
  line-height: 24px;
  color: #fff;
  text-align: center;
}
.special__badge {
  position: absolute;
  transform: translate(-25%, 25%);
  bottom: 0;
}
.badge {
  display: block;
}
.badge__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
  font-weight: 900;
  font-size: clamp(16px, 3vw, 24px);
  line-height: 1.33;
  text-align: center;
  /* transform: translate(-25%, 25%); */
  pointer-events: none;
}
/* スマホサイズでは既にgrid-template-columns: 1frが設定されているため、削除 */
.special__badge {
  position: absolute;
  /* base: top={{ base: "0", md: "unset" }}, bottom={{ base: "unset", md: "0" }} */
  top: 0; /* base */
  right: 0; /* base: right={{ base: "0", md: "unset" }} */
  left: auto; /* base: left={{ base: "unset", md: "0" }} */
  bottom: auto; /* base */
  transform: translate(-25%, 25%);
  width: 80px;
  height: 80px;
}

.special__badge svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .special__badge {
    top: auto; /* md: top={{ md: "unset" }} */
    bottom: 0; /* md: bottom={{ md: "0" }} */
    left: 0; /* md: left={{ md: "0" }} */
    right: auto; /* md: right={{ md: "unset" }} */
    width: 153px;
    height: 160px;
  }
}

/* Notes */
.notes {
  max-width: 100%; /* base: maxWidth={{ base: "100%" }} */
  margin: 0 auto;
  /* Next.jsのVStack: p={{ base: 4, md: 10 }}, spacing={{ base: 4, md: 10 }} */
  padding: 16px; /* base: p={4}(16px) */
  background: #fff;
  border-radius: 8px; /* md */
  display: flex;
  flex-direction: column;
  gap: 16px; /* base: spacing={4}(16px) */
  width: 100%;
}
@media (min-width: 768px) {
  .notes {
    max-width: min(
      1000px,
      80vw
    ); /* md: maxWidth={{ md: "min(1000px, 80vw)" }} */
    padding: 40px; /* md: p={10}(40px) */
    gap: 40px; /* md: spacing={10}(40px) */
  }
}
.notes__item {
  /* Next.jsのVStack: spacing={{ base: 2, md: 4 }} */
  display: flex;
  flex-direction: column;
  gap: 8px; /* base: spacing={2}(8px) */
}
@media (min-width: 768px) {
  .notes__item {
    gap: 16px; /* md: spacing={4}(16px) */
  }
}
.notes__item .label {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 500;
  border-bottom: 1px solid #000;
}
.notes__item .value {
  /* base: 14px / md: 16px, 行間は32pxに固定 */
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  white-space: normal;
}
@media (min-width: 768px) {
  .notes__item .value {
    font-size: 16px;
  }
}

/* Access */
.access {
  width: 100%;
  /* Next.jsのBox: py={{ base: "80px", md: "160px" }} */
  padding: 80px 1rem;
  background: var(--brown);
  display: flex;
  flex-direction: column;
  /* Next.jsのVStack: spacing={{ base: "80px", md: "160px" }} */
  gap: 80px; /* base: spacing={{ base: "80px" }} */
  align-items: center;
}
@media (min-width: 768px) {
  .access {
    padding: 160px 0; /* md: py={{ md: "160px" }} */
    gap: 160px; /* md: spacing={{ md: "160px" }} */
  }
}
.access > * {
  /* Next.jsのVStackにpx={4}が設定されているため、16pxのパディングを追加 */
  padding-inline: 16px;
  max-width: 100%; /* base: maxWidth={{ base: "100%" }} */
  margin-inline: auto;
}
@media (min-width: 768px) {
  .access > * {
    max-width: min(
      1000px,
      80vw
    ); /* md: maxWidth={{ md: "min(1000px, 80vw)" }} */
  }
}
.access__inner {
  display: flex;
  flex-direction: column;
  /* Next.jsのVStack: spacing={{ base: 10, md: "80px" }} */
  gap: 40px; /* base: spacing={10}(40px) */
  align-items: center;
  padding-inline: 0; /* 親要素のパディングを上書き */
  width: 100%;
}
@media (min-width: 768px) {
  .access__inner {
    gap: 80px; /* md: spacing={{ md: "80px" }} */
  }
}
.access__media {
  width: 100%;
  /* Next.jsのBox: maxWidth={{ base: "100%" }} */
  max-width: 100%; /* base */
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px; /* md */
  overflow: hidden;
}
@media (min-width: 768px) {
  .access__media {
    max-width: min(1000px, 80vw); /* md */
  }
}

.access__text {
  display: flex;
  flex-direction: column;
  /* Next.jsのBox: gap={{ base: 4, md: "32px" }} */
  gap: 16px; /* base: gap={4}(16px) */
  text-align: center;
  /* Next.jsのBox: maxWidth={{ base: "100%" }} */
  max-width: 100%; /* base */
  margin: 0 auto;
  padding-inline: 0; /* 親要素の.access > *でパディングを設定しているため、ここでは0に */
}
@media (min-width: 768px) {
  .access__text {
    gap: 32px; /* md: gap={{ md: "32px" }} */
    max-width: min(1000px, 80vw); /* md */
  }
}
.access .headline {
  color: #fff;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0;
  line-height: normal; /* デフォルトのline-heightを使用 */
}
.access .date {
  color: #fff;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 500;
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0;
  line-height: normal; /* デフォルトのline-heightを使用 */
}

/* Floating Menu (simple) */
.float {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 1000;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}
.float.visible {
  opacity: 1;
  pointer-events: auto;
}
.float__btn {
  width: 48px;
  height: 48px;
  background: transparent;
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
}
.float__btn:hover {
  transform: scale(1.1);
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(85vw, 320px);
  display: none;
  z-index: 10000; /* スプラッシュより上に */
}
.drawer.open {
  display: block;
}
.drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.drawer__content {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(85vw, 320px);
  background: #fff;
  border-radius: 10px 0 0 10px;
  box-shadow: -8px 0 0 rgba(0, 0, 0, 0.6);
  padding: 20px 16px 24px 40px;
}
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.menu-links a {
  min-height: 28px;
  border-left: 2px solid transparent;
  transition: border-left-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  color: var(--brown);
  font-family: "Comfortaa", cursive;
  font-weight: 700;
  font-size: 20px;
  display: inline-block;
  line-height: 1.2;
  padding-left: 8px;
}
.menu-links a:hover {
  border-left-color: var(--brown);
  transform: translateX(8px);
}

/* Footer - Toitoi Style */
/* MOREセクション（パートナーロゴ） */
.footer-more {
  background-color: #45170a;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Next.jsのBox: py={{ base: 10, md: 20 }} */
  padding: 40px 0; /* base: py={10}(40px) */
}
@media (min-width: 768px) {
  .footer-more {
    padding: 80px 0; /* md: py={20}(80px) */
  }
}
.footer-more__inner {
  max-width: min(1000px, 80vw);
  margin: 0 auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px; /* base: spacing={8}(32px) */
}
@media (min-width: 768px) {
  .footer-more__inner {
    gap: 48px; /* md: spacing={12}(48px) */
  }
}
.footer-more__logos {
  display: flex;
  gap: 16px; /* base: spacing={4}(16px) */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .footer-more__logos {
    gap: 80px; /* md: spacing="80px" */
  }
}
.footer-more__logo {
  width: 120px; /* base: w="120px" */
  height: 60px; /* base: h="60px" */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .footer-more__logo {
    width: 245px; /* md: w="245px" */
    height: auto; /* md: h="auto" */
  }
}
.footer-more__logo:hover {
  opacity: 0.7;
}
.footer-more__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* フッター上部セクション（イラスト・呼び鈴エリア） */
.footer-top {
  width: 100%;
  /* Next.jsのBox: pt={{ base: "80px", md: "160px" }} */
  padding-top: 80px; /* base: pt="80px" */
  background: #45170a;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .footer-top {
    padding-top: 160px; /* md: pt="160px" */
  }
}
/* 左側のイラスト */
.footer-top__img {
  height: 80px; /* base: h="80px" */
  width: 172px; /* base: w="172px" */
  position: absolute;
  bottom: 0;
  left: 50%;
  /* base: transform="translate(-105%, 0)" */
  transform: translate(-105%, 0);
}
@media (min-width: 768px) {
  .footer-top__img {
    height: 160px; /* md: h="160px" */
    width: 344px; /* md: w="344px" */
    /* md: transform="translate(-110%, 0)" */
    transform: translate(-110%, 0);
  }
}
@media (min-width: 1024px) {
  .footer-top__img {
    /* lg: transform="translate(-135%, 0)" */
    transform: translate(-135%, 0);
  }
}
.footer-top__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 呼び鈴エリア */
.footer-top__bell-wrapper {
  height: 60px; /* base: h="60px" */
  width: 70px; /* base: w="70px" */
  position: absolute;
  bottom: 0;
  left: 50%;
  /* base: transform="translate(90%, 0)" */
  transform: translate(90%, 0);
  z-index: 2;
}
@media (min-width: 768px) {
  .footer-top__bell-wrapper {
    height: 120px; /* md: h="120px" */
    width: 140px; /* md: w="140px" */
    /* md: transform="translate(95%, 0)" */
    transform: translate(95%, 0);
  }
}
@media (min-width: 1024px) {
  .footer-top__bell-wrapper {
    /* lg: transform="translate(140%, 0)" */
    transform: translate(140%, 0);
  }
}
.footer-top__bell {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
}
/* 呼び鈴のクリック可能エリア（ポリゴン形状） */
.footer-top__bell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(25% 15%, 75% 15%, 85% 45%, 85% 80%, 15% 80%, 15% 45%);
  z-index: 1;
}
.footer-top__bell .bell-normal {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
.footer-top__bell .bell-hover {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
@media (hover: hover) {
  .footer-top__bell:hover .bell-normal {
    opacity: 0;
  }
  .footer-top__bell:hover .bell-hover {
    opacity: 1;
  }
}
.footer-top__bell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}
.footer-top__bell .bell-hover {
  position: absolute;
  top: 0;
  left: 0;
}

/* 右側のメッセージ */
.footer-top__message {
  height: 30px; /* base: h="30px" */
  width: 86px; /* base: w="86px" */
  position: absolute;
  bottom: 0;
  left: 50%;
  /* base: transform="translate(110%, 0)" */
  transform: translate(110%, 0);
  z-index: 3;
}
@media (min-width: 768px) {
  .footer-top__message {
    height: 60px; /* md: h="60px" */
    width: 172px; /* md: w="172px" */
    /* md: transform="translate(125%, 0)" */
    transform: translate(125%, 0);
  }
}
@media (min-width: 1024px) {
  .footer-top__message {
    /* lg: transform="translate(160%, 0)" */
    transform: translate(160%, 0);
  }
}
.footer-top__message img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* フッター本体（コピーライトエリア） */
.footer-main {
  background-color: #b6723e;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Next.jsのBox: py={{ base: 10, md: 10 }}, px={{ base: 4, md: 20 }} */
  padding: 40px 16px; /* base: py={10}(40px), px={4}(16px) */
}
@media (min-width: 768px) {
  .footer-main {
    padding: 40px 80px; /* md: py={10}(40px), px={20}(80px) */
  }
}
.footer-main__inner {
  display: flex;
  flex-direction: column;
  gap: 40px; /* base: spacing={10}(40px) */
}
@media (min-width: 768px) {
  .footer-main__inner {
    gap: 80px; /* md: spacing="80px" */
  }
}
.footer-main__content {
  display: flex;
  flex-direction: column; /* base: direction="column" */
  gap: 40px; /* base: spacing={10}(40px) */
  align-items: center; /* base: alignItems="center" */
}
@media (min-width: 768px) {
  .footer-main__content {
    flex-direction: row; /* md: direction="row" */
    gap: 80px; /* md: spacing="80px" */
    align-items: flex-end; /* md: alignItems="end" */
  }
}
.footer-main__logo {
  width: 154px;
  height: 240px;
}
.footer-main__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-main__nav {
  display: flex;
  flex-direction: column;
  gap: 32px; /* base: spacing={8}(32px) */
  text-align: center; /* base: textAlign="center" */
  position: relative;
  z-index: 2;
  align-items: center; /* base: alignItems="center" */
}
@media (min-width: 768px) {
  .footer-main__nav {
    gap: 24px; /* md: spacing="24px" */
    text-align: left; /* md: textAlign="left" */
    align-items: flex-start; /* md: alignItems="start" */
  }
}

/* シェアセクション */
.footer-share {
  display: flex;
  flex-direction: column; /* base: direction="column" */
  gap: 16px; /* base: spacing={4}(16px) */
  align-items: center;
}
@media (min-width: 768px) {
  .footer-share {
    flex-direction: row; /* md: direction="row" */
    gap: 40px; /* md: spacing="40px" */
  }
}
.footer-share__title {
  font-family: "Petit Formal Script", cursive;
  font-size: 20px; /* base: fontSize="20px" */
  color: #45170a;
  line-height: 1;
  font-weight: 400;
}
@media (min-width: 768px) {
  .footer-share__title {
    font-size: 24px; /* md: fontSize="24px" */
  }
}
.footer-share__buttons {
  display: flex;
  gap: 16px; /* spacing={4}(16px) */
}
.footer-share__btn {
  padding: 8px;
  border-radius: 9999px;
  background: transparent;
  border: 2px solid #45170a;
  width: 64px;
  height: 64px;
  color: #45170a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.footer-share__btn:hover {
  background: #45170a;
  color: white;
}

/* ナビゲーションリンク */
.footer-nav-links {
  display: flex;
  flex-direction: column; /* base: direction="column" */
  flex-wrap: wrap;
  justify-content: center; /* base: justifyContent="center" */
  gap: 16px; /* base: spacing={4}(16px) */
  align-items: center; /* base: alignItems="center" */
}
@media (min-width: 768px) {
  .footer-nav-links {
    flex-direction: row; /* md: direction="row" */
    justify-content: flex-start; /* md: justifyContent="start" */
    gap: 40px; /* md: spacing="40px" */
    align-items: flex-end; /* md: alignItems="end" */
  }
}
.footer-nav-link {
  border-bottom: 2px solid transparent;
  transition: border-bottom-color 0.3s ease-in-out;
  text-decoration: none;
}
.footer-nav-link:hover {
  border-bottom-color: #45170a;
}
.footer-nav-link:hover .footer-nav-link__text {
  transform: translateY(-4px);
}
.footer-nav-link__text {
  font-size: 20px;
  color: #45170a;
  line-height: 1;
  font-family: "Comfortaa", cursive;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

/* 小さいリンク（お問い合わせなど） */
.footer-small-links {
  display: flex;
  flex-direction: column; /* base: direction="column" */
  gap: 8px; /* base: spacing={2}(8px) */
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 640px) {
  .footer-small-links {
    flex-direction: row; /* sm: direction="row" */
    gap: 16px; /* sm: spacing={4}(16px) */
  }
}
.footer-small-link {
  font-size: 14px;
  color: #45170a;
  line-height: 1;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.footer-small-link:hover {
  color: #ffd700;
}

/* コピーライト */
.footer-copyright {
  font-size: 12px;
  line-height: 12px;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.08em;
  color: black;
  text-align: center;
}

/* 隠しエリアモーダル */
.hidden-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.hidden-modal.open {
  display: flex;
}
.hidden-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
.hidden-modal__content {
  position: relative;
  background: white;
  width: 90%; /* スマホでは画面幅の90% */
  max-width: 340px; /* base: 少し余裕を持たせる */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px solid #45170a;
  border-radius: 20px;
  padding: 20px;
  background-image: url("./images/bg_fruits_yellow.png");
  background-position: left top;
  background-repeat: repeat;
  box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.25);
  z-index: 10001;
  pointer-events: none;
  margin: 20px; /* 画面端からの余白 */
}
@media (min-width: 768px) {
  .hidden-modal__content {
    max-width: 800px; /* md: minW="800px" */
    width: 100%;
    margin: 0;
  }
}
.hidden-modal__close {
  position: absolute;
  top: 20px; /* base: top="20px" */
  right: 20px; /* base: right="20px" */
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 11;
  user-select: none;
  pointer-events: auto;
  padding: 0;
}
@media (min-width: 768px) {
  .hidden-modal__close {
    top: 40px; /* md: top="40px" */
    right: 40px; /* md: right="40px" */
  }
}
.hidden-modal__close .icon-normal {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.hidden-modal__close .icon-hover {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
}
@media (hover: hover) {
  .hidden-modal__close:hover .icon-normal {
    opacity: 0;
  }
  .hidden-modal__close:hover .icon-hover {
    opacity: 1;
  }
}
.hidden-modal__inner {
  pointer-events: none;
  width: 100%;
}
.hidden-modal__box {
  padding: 0; /* base: px=0, py=2 */
  border: none; /* base: border="unset" */
}
@media (min-width: 768px) {
  .hidden-modal__box {
    padding: 40px; /* md: px=10, py=10 */
    border: 8px solid #45170a; /* md: border="8px solid #45170A" */
  }
}
.hidden-modal__body {
  max-width: 1152px; /* maxW="6xl" */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px; /* base: spacing={6}(24px) */
  padding-inline: 16px; /* px={4}(16px) */
  z-index: 2;
}
@media (min-width: 768px) {
  .hidden-modal__body {
    gap: 32px; /* md: spacing={8}(32px) */
  }
}
.hidden-modal__content-wrapper {
  display: flex;
  flex-direction: column; /* base: direction="column" */
  gap: 48px; /* base: spacing={12}(48px) */
}
@media (min-width: 768px) {
  .hidden-modal__content-wrapper {
    flex-direction: row; /* md: direction="row" */
    gap: 0; /* md: spacing="unset" */
  }
}
.hidden-modal__image {
  width: 100%; /* スマホでは100% */
  max-width: 280px; /* スマホでの最大幅 */
  height: auto; /* 高さは自動調整 */
  aspect-ratio: 320 / 300; /* アスペクト比を維持 */
  z-index: 10;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hidden-modal__image {
    width: 320px;
    max-width: 320px;
    height: 300px;
  }
}
.hidden-modal__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hidden-modal__message {
  background-color: white;
  padding: 24px; /* スマホでは少し小さく */
  border-radius: 20px;
  transform: rotate(-4deg); /* base: transform="rotate(-4deg)" */
  position: relative;
  flex: 1;
  margin-left: 0; /* base: ml=0 */
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
  width: 100%; /* スマホでは幅いっぱい */
  max-width: 280px; /* スマホでの最大幅 */
  margin-inline: auto; /* 中央揃え */
}
@media (min-width: 768px) {
  .hidden-modal__message {
    transform: rotate(4deg); /* md: transform="rotate(4deg)" */
    margin-left: -28px; /* md: ml=-7 */
    padding: 32px;
    max-width: none;
    width: auto;
  }
}
.hidden-modal__message-text {
  font-size: 12px; /* スマホでは少し小さく */
  color: #45170a;
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 1.6; /* 相対値で調整 */
  white-space: normal;
  text-align: left;
  font-weight: 500;
}
@media (min-width: 768px) {
  .hidden-modal__message-text {
    font-size: 14px;
    line-height: 22.4px;
  }
}
.hidden-modal__balloon {
  position: absolute;
  bottom: auto; /* base: bottom="unset" */
  left: 20px;
  top: -19px; /* base: top="-19px" */
  height: 20px;
  width: 35px;
  transform: scaleX(-1) scaleY(-1); /* base: transform="scaleX(-1) scaleY(-1)" */
}
@media (min-width: 768px) {
  .hidden-modal__balloon {
    bottom: -19px; /* md: bottom="-19px" */
    top: auto; /* md: top="unset" */
    transform: rotate(0deg); /* md: transform="rotate(0deg)" */
  }
}
.hidden-modal__balloon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hidden-modal__share {
  display: flex;
  flex-direction: column;
  gap: 20px; /* spacing={5}(20px) */
  width: 100%;
  align-items: stretch;
  user-select: none;
}
.hidden-modal__share-title {
  border-bottom: 2px solid #45170a;
  width: fit-content;
  margin: 0 auto;
}
.hidden-modal__share-title-text {
  font-weight: 500;
  color: #000;
  text-align: center;
  font-size: 20px; /* base: fontSize="20px" */
  font-family: "Zen Maru Gothic", sans-serif;
}
@media (min-width: 768px) {
  .hidden-modal__share-title-text {
    font-size: 24px; /* md: fontSize="24px" */
  }
}
.hidden-modal__share-buttons {
  display: flex;
  gap: 16px; /* spacing={4}(16px) */
  justify-content: center;
  padding-inline: 16px;
}
.hidden-modal__share-btn {
  padding: 8px;
  border-radius: 9999px;
  background: transparent;
  border: 2px solid #45170a;
  width: 64px; /* スマホでは少し小さく */
  height: 64px; /* スマホでは少し小さく */
  color: #45170a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  z-index: 11;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .hidden-modal__share-btn {
    width: 100px; /* md: w="100px" */
    height: 100px; /* md: h="100px" */
  }
}
.hidden-modal__share-btn:hover {
  background: #45170a;
  color: white;
}