/* code.html の @apply 部分を “普通のCSS” に置き換えて外出し */
/* TailwindはCDNで読み込み済みなので、ここは「補助」だけ */
:root {
  --accent: #d72e69;
  --beige-light: #faf5f0;
  --beige-dark: #f0e6dd;
  --text-main: #4a4440;
  --text-muted: #8c8279;
  --kinari: #fefaf6;

  --font-serif-jp: "Noto Serif JP", serif;
  --font-sans-jp: "Noto Sans JP", sans-serif;
  --font-serif-en: "Cormorant Garamond", serif;
}

.bg-accent {
  background-color: var(--accent);
}
.text-accent {
  color: var(--accent);
}
.border-accent {
  border-color: var(--accent);
}

.bg-beige-light {
  background-color: var(--beige-light);
}
.bg-beige-dark {
  background-color: var(--beige-dark);
}
.border-beige-dark {
  border-color: var(--beige-dark);
}
.font-serif-jp {
  font-family: var(--font-serif-jp);
}
.font-sans-jp {
  font-family: var(--font-sans-jp);
}
.font-serif-en {
  font-family: var(--font-serif-en);
}
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-main); /* text-main */
  background: var(--kinari); /* kinari */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 見出し系は明朝に寄せる（元の意図） */
h1,
h2,
h3,
h4,
.font-serif {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 24;
}

/* セクション見出しの下線（元の section-title） */
.section-title {
  position: relative;
  padding-bottom: 1rem; /* pb-4相当 */
  margin-bottom: 3rem; /* mb-12相当 */
  display: inline-block;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 3rem; /* w-12 */
  height: 2px; /* h-0.5相当 */
  background: #d72e69; /* accent */
}
.mapCol {
  width: 100%;
  min-height: 420px; /* 好きに増やせる */
}

.mapFrame {
  width: 100%;
  height: 420px; /* ここが効く */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.mapFrame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* PCだけ大きく */
@media (min-width: 1024px) {
  .mapCol {
    min-height: 520px;
  }
  .mapFrame {
    height: 520px;
  }
}

/* =========================
   Special Menu（おすすめ）
   ========================= */

#special-menu {
  background-color: #ffffff;
}

/* セクション見出し（既存があれば不要） */
#special-menu .section-title {
  letter-spacing: 0.15em;
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
}

#special-menu .section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 1px;
  background-color: var(--accent-color, #c85b7c);
  transform: translateX(-50%);
}

/* カード全体 */
#special-menu article {
  background: #fff;
}

/* 上部ビジュアル（ダミー背景） */
#special-menu article .aspect-\[3\/4\] {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.35) 100%
    ),
    #f4efe9;
}

/* タグ */
#special-menu article span.bg-accent {
  border-radius: 9999px;
  font-weight: 500;
}

/* タイトル */
#special-menu h4 {
  line-height: 1.4;
}

/* 説明文 */
#special-menu p {
  line-height: 1.9;
}

/* Read more */
#special-menu a {
  text-decoration: none;
}

#special-menu a:hover {
  opacity: 0.85;
}

/* hover時のカード影（やりすぎない） */
#special-menu article:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.menu {
  font-feature-settings: "palt";
  margin-top: 0;
}
.concept-text {
  line-height: 1.6 !important;
}
.text-text-muted {
  --tw-text-opacity: 1;
  color: rgb(140 130 121 / var(--tw-text-opacity, 1));
}
.border-beige-dark\/30 {
  border-color: rgb(240 230 221 / 0.3);
}
.border-beige-dark {
  --tw-border-opacity: 1;
  border-color: rgb(240 230 221 / var(--tw-border-opacity, 1));
}

.border-b {
  border-bottom-width: 1px;
}