/* ==================================================
   基本設定
================================================== */ :root {
  --site-bg-image: url("../img/bg02.png");
}
html {
  font-size: 16px;
}
body {
  color: #290B0A;
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f7f6f3;
  background-image: var(--site-bg-image);
  background-position: center top;
  background-repeat: repeat-y;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.25rem;
}
p {
  font-size: 1rem;
  line-height: 2; /* 行間：200% */
  letter-spacing: 0.05em /* 文字間隔：10% */
}
@media screen and (max-width: 767px) {
  p {
    line-height: 1.8;
    letter-spacing: 0;
  }
}
.en {
  font-family: "Roboto Slab", serif;
  font-weight: 500;
}
/* 共通見出し：日本語と英語 */
.heading-unit {
  margin: 0 0 40px;
  text-align: center;
}
.heading-unit .jp {
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.heading-unit .en {
  display: block;
  margin-top: 4px;
  color: #003B3A;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
/* 共通見出し：丸アイコンと下線 */
.heading-dot {
  position: relative;
  margin: 0;
  padding: 0 0 16px 36px;
/*  border-bottom: 1px solid #b8aaa3;
*/  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
}
/* 装飾用の丸アイコン */
.heading-dot::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 13px;
  height: 13px;
  background: url("../img/dot_icon.png") center / contain no-repeat;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .heading-dot {
    margin-bottom: 24px;
    padding: 0 0 12px 25px;
    font-size: 1.1875rem; /* 19px：TOPの紹介見出しと統一 */
  }
}
/* ==================================================
   共通：mist-white
================================================== */
.mist-white {
  height: 170px;
  background: url("../img/wave_w.png") center bottom / auto repeat-x;
}
@media screen and (max-width: 767px) {
  .mist-white {
    height: auto;
    aspect-ratio: 750 / 300;
    background: url("../img/wave_w_sp.png") center top / 100% auto no-repeat;
  }
}
address, i {
  font-style: normal;
}
/* ==================================================
   PC・スマホの表示切り替え
================================================== */
.pc_view {
  display: block !important;
}
.sp_view {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .pc_view {
    display: none !important;
  }
  .sp_view {
    display: block !important;
  }
  /* 改行タグはブロック化しない */
  br.sp_view {
    display: inline !important;
  }
}
/* ==================================================
   電話リンク
================================================== */
/* 768px以上：クリック・タップによる電話リンクの操作を無効化 */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/* ==================================================
   共通リンク
================================================== */
a {
  text-decoration: none;
  color: #000000;
}
a:hover {
  color: #000000;
  text-decoration: underline;
}
/* ==================================================
   共通ボタン
================================================== */
/* --------------------------------------------------
   下線ボタン（.btn-line）
-------------------------------------------------- */
.btn-line {
  display: inline-block;
  text-decoration: none;
  color: #290B0A;
  font-weight: bold;
  position: relative;
  padding-right: 30px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s, border-color 0.3s;
}
/* 右向きの矢印 */
.btn-line::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #290B0A;
  border-right: 2px solid #290B0A;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s;
}
/* ホバー時：ボタンの表示を変更 */
.btn-line:hover {
  color: #290B0A;
  text-decoration: none;
  border-bottom-color: #290B0A;
  opacity: 0.7;
}
/* ホバー時：矢印を右へ移動 */
.btn-line:hover::after {
  right: 2px;
}
/* --------------------------------------------------
   丸みのある塗りつぶしボタン（.btn-round）
-------------------------------------------------- */
.btn-round {
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  background-color: #290B0A;
  font-weight: bold;
  padding: 14px 45px 14px 25px;
  border-radius: 30px;
  position: relative;
  transition: opacity 0.3s;
}
/* 右向きの矢印 */
.btn-round::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s;
}
/* ホバー時：ボタンの表示を変更 */
.btn-round:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.8;
}
/* ホバー時：矢印を右へ移動 */
.btn-round:hover::after {
  right: 15px;
}
/* ==================================================
   共通ヘッダー：基本設定
================================================== */
/* 色・高さ・ロゴ幅・余白は以下の変数で調整 */
.site-header {
  --header-text: #290b0a;
  --header-background: #f7f6f3;
  --header-height: 120px;
  --header-logo-width: clamp(150px, 10.5vw, 202px);
  --header-side-space: 5.2%;
  --header-nav-gap: clamp(20px, 2.6vw, 50px);
  --header-admin-offset: 0px;
  position: relative;
  z-index: 1000;
  width: 100%;
  color: var(--header-text);
  background: var(--header-background) var(--site-bg-image) center;
}
.site-header .site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--header-height);
  padding: 24px var(--header-side-space);
}
.site-header .site-header__logo {
  display: block;
  flex: 0 0 auto;
  width: var(--header-logo-width);
}
.site-header .site-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.site-header .site-header__nav {
  min-width: 0;
  margin-left: auto;
}
.site-header .site-header__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px var(--header-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .site-header__nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .site-header__nav a {
  display: block;
  padding: 10px 0;
  color: var(--header-text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.site-header .site-header__nav a:hover {
  opacity: 0.65;
}
.site-header a:focus-visible, .site-header button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
/* トップページ：写真の上に重ねる */
.site-header[data-front-page="true"] {
  position: absolute;
  top: auto;
  right: 0;
  left: 0;
  background: transparent;
}
/* トップページ：768px以上でヘッダーを固定 */
@media screen and (min-width: 768px) {
  .site-header[data-front-page="true"][data-fixed="true"] {
    position: fixed;
    top: var(--header-admin-offset);
    background: transparent;
    box-shadow: none;
    animation: site-header-enter 0.3s ease-out both;
  }
}
/* 固定ヘッダーの表示：上からスライドしながら表示 */
@keyframes site-header-enter {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ==================================================
   共通ヘッダー：メニュー開閉ボタン
================================================== */
.site-header .site-header__toggle {
  position: relative;
  z-index: 3;
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  color: var(--header-text);
  background: transparent;
  cursor: pointer;
}
.site-header .site-header__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform 0.3s ease, opacity 0.2s ease;
}
.site-header .site-header__toggle[hidden] {
  display: none;
}
/* 1本目を右下がりに回転 */
.site-header .site-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
/* 中央の線を消す */
.site-header .site-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
/* 3本目を右上がりに回転 */
.site-header .site-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* ==================================================
   共通ヘッダー：メニュー画面（仮デザイン）
================================================== */
/* 仮デザインの色・幅・余白は以下の変数で調整 */
.site-header .site-menu {
--menu-background: #290b0a;
  --menu-text: #fff;
  --menu-content-width: 560px;
  --menu-top-space: 96px;
  --menu-side-space: 24px;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--menu-text);
  background: var(--menu-background);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-header .site-menu:not([open]) {
  display: none;
}
.site-header .site-menu::backdrop {
  background: rgb(0 0 0 / 25%);
}
.site-header .site-menu__inner {
  position: relative;
  width: 100%;
  max-width: var(--menu-content-width);
  min-height: 100%;
  margin: 0 auto;
  padding:
    calc(var(--menu-top-space) + env(safe-area-inset-top, 0px)) var(--menu-side-space) calc(48px + env(safe-area-inset-bottom, 0px));
}
.site-header .site-menu__logo {
  display: block;
  width: 180px;
  margin: 0 auto 40px;
}
.site-header .site-menu__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.site-header .site-menu__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .site-menu__nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .site-menu__nav a {
  display: block;
  padding: 0 0 24px;
  color: var(--menu-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}

/* メニュー下部のショップリンクとSNS */
.site-header .site-menu__info {
  margin-top: 48px;
  color: var(--menu-text);
  font-size: 0.875rem;
  line-height: 1.8;
  text-align: left;
}

.site-header .site-menu__info .site-menu__name {
  margin: 0 0 12px;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}

.site-header .site-menu__shop-links,
.site-header .site-menu__sns {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .site-menu__shop-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-header .site-menu__sns {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 20px;
}

.site-header .site-menu__sns img {
  display: block;
  width: 36px;
  height: auto;
}
/* メニュー表示中は背景のスクロールを止める */
html[data-site-menu-open="true"], html[data-site-menu-open="true"] body {
  overflow: hidden;
}
/* ==================================================
   スマホ・タブレット（1024px以下）
================================================== */
@media screen and (max-width: 1024px) {
  .site-header {
    --header-height: 76px;
    --header-logo-width: 150px;
    --header-side-space: 5%;
  }
  .site-header .site-header__bar {
    gap: 16px;
    padding: 14px var(--header-side-space);
  }
  /* トップページ：高さと背景を設定（メニュー準備完了後は後続ルールで上書き） */
  .site-header[data-front-page="true"] {
    min-height: var(--header-height);
    background: var(--header-background) var(--site-bg-image) center;
  }
  .site-header[data-menu-ready="true"] .site-header__nav {
    display: none;
  }
  .site-header[data-menu-ready="true"] .site-header__toggle {
    display: flex;
  }
  /* メニューの準備が完了していない場合：ナビゲーションを表示 */
  .site-header:not([data-menu-ready="true"]) .site-header__bar {
    flex-wrap: wrap;
  }
  .site-header:not([data-menu-ready="true"]) .site-header__nav {
    width: 100%;
    margin-left: 0;
  }
  .site-header:not([data-menu-ready="true"]) .site-header__nav ul {
    justify-content: flex-start;
    gap: 8px 20px;
  }
  .site-header[data-front-page="true"]:not([data-menu-ready="true"]) {
    position: relative;
  }
}
/* 動きを減らす設定時：固定ヘッダーの登場アニメーションとナビの変化を停止 */
@media (prefers-reduced-motion: reduce) {
  .site-header[data-front-page="true"][data-fixed="true"] {
    animation: none;
  }
  .site-header .site-header__nav a {
    transition: none;
  }
}
/* ==================================================
   共通ヘッダー：トップページの重ね表示・追従表示
================================================== */
@media screen and (max-width: 1024px) {
  .site-header[data-front-page="true"][data-menu-ready="true"] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 76px;
    margin: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-header[data-front-page="true"] .site-header__bar {
    min-height: 76px;
    margin: 0;
    padding: 14px 5%;
  }
}

/* タブレット：メインビジュアルを過ぎた後 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .site-header[data-front-page="true"][data-menu-ready="true"][data-fixed="true"] {
    position: fixed;
    top: var(--header-admin-offset, 0px);
  }
}
/* ==================================================
   共通ヘッダー：開閉ボタンとメニューの重なり順
================================================== */
.site-header .site-header__bar {
  position: relative;
  z-index: 2;
}
.site-header .site-menu {
  z-index: 1;
}
/* メニューを開いている間はヘッダーのロゴを隠す */
.site-header:has(.site-menu[open]) .site-header__logo {
  visibility: hidden;
}
/* ==================================================
   共通ヘッダー：メニューの開閉アニメーション
================================================== */
/* メニューを開くとき */
.site-header .site-menu[open] {
  animation: site-menu-background-in 0.4s ease-out both;
}
.site-header .site-menu[open] .site-menu__inner {
  animation: site-menu-content-in 0.4s ease-out both;
}
/* メニューを閉じるとき */
.site-header .site-menu[open].is-closing {
  pointer-events: none;
  animation: site-menu-background-out 0.3s ease-in both;
}
.site-header .site-menu[open].is-closing .site-menu__inner {
  animation: site-menu-content-out 0.3s ease-in both;
}
/* 背景の表示：透明から不透明へ */
@keyframes site-menu-background-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 内容の表示：透明度と拡大率を変更 */
@keyframes site-menu-content-in {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 背景の非表示：不透明から透明へ */
@keyframes site-menu-background-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* 内容の非表示：透明度と拡大率を変更 */
@keyframes site-menu-content-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.02);
  }
}
/* 動きを減らす設定時：メニューのアニメーション時間を短縮 */
@media (prefers-reduced-motion: reduce) {
  .site-header .site-menu[open], .site-header .site-menu[open] .site-menu__inner, .site-header .site-menu[open].is-closing, .site-header .site-menu[open].is-closing .site-menu__inner {
    animation-duration: 0.01ms;
  }
}
/* ==================================================
   共通ヘッダー：下層ページの追従表示（1025px以上）
================================================== */
@media screen and (min-width: 1025px) {
  .site-header[data-front-page="false"][data-fixed="true"] .site-header__bar {
    position: fixed;
    z-index: 1001;
    top: var(--header-admin-offset, 0px);
    right: 0;
    left: 0;
    width: 100%;
    background: transparent;
box-shadow: none;
    animation: site-header-enter 0.3s ease-out both;
  }
}
/* ==================================================
   共通ヘッダー：ロゴサイズの調整（1025px以上）
================================================== */
@media screen and (min-width: 1025px) {
  /* 下層ページ：通常時・追従時の両方に適用 */
  .site-header[data-front-page="false"] .site-header__logo, /* トップページをスクロールした後 */ .site-header[data-front-page="true"][data-fixed="true"] .site-header__logo {
    width: 170px;
  }
}
/* ==================================================
   共通ヘッダー：下層ページのタブレット追従表示
================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .site-header[data-front-page="false"] {
    position: sticky;
    z-index: 1000;
    top: var(--header-admin-offset, 0px);
    width: 100%;
  }
}

/* スマホ：ハンバーガーボタンだけ追従 */
@media screen and (max-width: 767px) {
  .site-header[data-menu-ready="true"] .site-header__toggle {
    position: fixed;
    top: calc(var(--header-admin-offset, 0px) + 14px);
    right: var(--header-side-space);
  }
}
/* ==================================================
   共通ヘッダー：スライドに合わせた色の切り替え
================================================== */
/* ロゴを滑らかに切り替える */
.site-header[data-front-page="true"]:not([data-fixed="true"]) .site-header__logo img {
  transition: filter 0.5s ease;
}
/* 白色指定時（固定前）：ロゴを白色に変更 */
.site-header[data-front-page="true"][data-header-color="white"]:not([data-fixed="true"]) .site-header__logo img {
  filter: brightness(0) invert(1);
}
/* 茶色指定時（固定前）：ロゴを元の色に戻す */
.site-header[data-front-page="true"][data-header-color="brown"]:not([data-fixed="true"]) .site-header__logo img {
  filter: none;
}
/* --------------------------------------------------
   PC（1025px以上）
-------------------------------------------------- */
@media screen and (min-width: 1025px) {
  .site-header .site-header__nav a {
    transition:
      color 0.5s ease, opacity 0.2s ease;
  }
  /* 白色指定時（固定前）：ナビ文字を白色に変更 */
  .site-header[data-front-page="true"][data-header-color="white"]:not([data-fixed="true"]) .site-header__nav a {
    color: #ffffff;
    text-shadow: none;
  }
  /* 茶色指定時（固定前）：ナビ文字を茶色に変更 */
  .site-header[data-front-page="true"][data-header-color="brown"]:not([data-fixed="true"]) .site-header__nav a {
    color: #290b0a;
    text-shadow: none;
  }
}
/* --------------------------------------------------
   スマホ・タブレット（1024px以下）
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .site-header .site-header__toggle {
    transition: color 0.5s ease;
  }
  /* 白色指定時（固定前・メニューを閉じている間）：三本線を白色に変更 */
  .site-header[data-front-page="true"][data-header-color="white"]:not([data-fixed="true"]) .site-header__toggle[aria-expanded="false"] {
    color: #ffffff;
  }
  /* 茶色指定時（固定前・メニューを閉じている間）：三本線を茶色に変更 */
  .site-header[data-front-page="true"][data-header-color="brown"]:not([data-fixed="true"]) .site-header__toggle[aria-expanded="false"] {
    color: #290b0a;
  }
   /* メニューを開いたときの閉じるボタン */
  .site-header .site-header__toggle[aria-expanded="true"] {
    color: #fff;
  }
}

/* ==================================================
   お問い合わせ
================================================== */
#footer_contact {
  position: relative;
  padding: 72px 28px 36px;
  color: #290b0a;
  background-color: #e8e4df;
  background-image: url("../img/footer_contact_bg.png");
  background-position: center top;
  background-repeat: repeat;
}
/* 上端のギザギザ */
#footer_contact::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 16px;
  background-image: url("../img/contact_edge.png");
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 32px 16px;
}
#footer_contact .container {
  max-width: 1000px;
  padding: 0;
}
#footer_contact .container h2 {
  margin: 0 0 24px;
  color: #290b0a;
  text-align: center;
}
#footer_contact .common_title .jp {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
}
#footer_contact .common_title .en {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #003B3A;
}
#footer_contact .footer_contact_unit {
  text-align: center;
}
/* ご注文についての白い帯 */
#footer_contact .footer_contact_message {
  box-sizing: border-box;
  width: 100%;
  max-width: 540px;
  margin: 0 auto 8px;
  padding: 5px 16px;
  border-radius: 30px;
  background-color: #f7f6f3;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#footer_contact .footer_contact_box {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
#footer_contact .footer_contact_box li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer_contact .footer_contact_box a {
  color: inherit;
  text-decoration: none;
}
#footer_contact .footer_contact_box a:hover {
  text-decoration: none;
}
/* 固定電話 */
#footer_contact .footer_contact_box li .contact_tel {
  margin: 0 0 8px;
  font-family: "Roboto Slab", serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
#footer_contact .contact_tel span {
  display: inline-block;
  margin-right: 20px;
  font-size: 1.625rem;
  vertical-align: middle;
}
/* 携帯番号の帯 */
#footer_contact .contact_mobile {
  margin: 0;
  background-color: #8b7d78;
  color: #ffffff;
  font-family: "Roboto Slab", serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}
#footer_contact .contact_mobile a {
  display: block;
  padding: 8px 12px;
}
/* 営業時間 */
#footer_contact .open_hours {
  margin: 12px 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
/* 注意書き */
#footer_contact .footer_contact_note {
  max-width: 820px;
  margin: 24px auto 0;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: left;
}
/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #footer_contact {
    padding: 60px 28px 36px;
  }
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #footer_contact {
    padding: 48px 20px 32px;
  }
  #footer_contact .container h2 {
    margin-bottom: 20px;
  }
  #footer_contact .common_title .jp {
    font-size: 1.25rem;
  }
  #footer_contact .footer_contact_message {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
  #footer_contact .footer_contact_box li .contact_tel {
    font-size: 2rem;
  }
  #footer_contact .contact_tel span {
    margin-right: 8px;
    font-size: 1rem;
  }
  #footer_contact .contact_mobile {
    font-size: 0.875rem;
  }
  #footer_contact .open_hours {
    font-size: 0.875rem;
    line-height: 1.8;
  }
  #footer_contact .footer_contact_note {
    margin-top: 20px;
    font-size: 0.75rem;
  }
}
/* ==================================================
   フッター
================================================== */
#footer {
  padding: 64px 28px 40px;
  color: #ffffff;
  background-color: #290b0a;
  background-image: url("../img/footer_bg.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #footer {
    padding: 40px 20px 28px;
  }
}
/* 左側の店舗情報 */
#footer .footer_info_boxL {
  width: 100%;
  max-width: 500px;
}
/* ロゴ */
#footer .footer_info_boxL img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin-bottom: 32px;
}
/* 店舗情報：基本は14px */
#footer .footer_shop_info p {
  margin: 0 0 20px;
  font-size: 0.875rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
#footer .footer_shop_info p:first-child {
  font-size: 1.25rem;
}
#footer .footer_shop_info p:first-child > span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25;
  margin-bottom: 8px;
}
/* トップページ：スマホ・タブレットの住所と電話番号 */
@media screen and (max-width: 1024px) {
  body.home #footer .footer_shop_info p:first-child {
    font-size: 1.125rem;
    letter-spacing: normal;
  }
}
/* 店舗情報の注意文だけ幅を制限 */
#footer .footer_shop_info p:nth-of-type(3) {
  max-width: 400px;
}
/* 著作権表記 */
#footer .footer_shop_info p:last-child {
  margin-bottom: 0;
}
#footer .footer_shop_info small {
  font-size: 1rem;
}
/* フッターの内容幅 */
#footer .container {
  max-width: 1200px;
  margin: 0 auto;
}
/* 店舗情報とメニューを横並びにする */
#footer .footer_info_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}
/* 右側のメニュー */
#footer .footer_info_boxR {
  flex: 1;
  min-width: 0;
  margin-top: 59px;
}
#footer .footer_info_boxR ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .footer_info_boxR li {
  margin: 0 0 12px;
  padding: 0;
}
/* フッターの文字リンク共通 */
#footer .footer_info_boxR a, #footer .footer_shop_links a {
  color: #ffffff;
  font-size: 1.375rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.3s ease;font-weight: 700;
}
/* 右端のリンク */
#footer .footer_links {
  flex: 1;
  min-width: 0;
  margin-top: 59px;
}
#footer .footer_shop_links {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .footer_shop_links li {
  margin: 0 0 12px;
  padding: 0;
}
/* マウスオーバー時 */
#footer .footer_info_boxR a:hover, #footer .footer_shop_links a:hover {
  color: #8b7d78;
  text-decoration: none;
}
/* SNSボタン */
#footer .footer_sns {
  display: flex;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
#footer .footer_sns li {
  margin: 0;
  padding: 0;
}
#footer .footer_sns a {
  display: block;
}
#footer .footer_sns img {
  display: block;
  width: 44px;
  height: auto;
}
#footer .footer_sns a:hover {
  opacity: 0.7;
}
/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  #footer .footer_info_box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    gap: 24px;
  }
  #footer .footer_info_boxR a, #footer .footer_shop_links a {
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #footer .footer_info_box {
    flex-direction: column;
    gap: 32px;
  }
  /* 中央メニューとショップリンクを非表示 */
  #footer .footer_info_boxR, #footer .footer_shop_links {
    display: none;
  }
  /* SNSの上の余白をなくす */
  #footer .footer_sns {
    margin-top: 0;
  }
  /* スマホのSNS位置は維持 */
  #footer .footer_links {
    margin-top: 0;
  }
}
/* ==================================================
   共通：スクロールでふわっと表示
================================================== */
.scroll-fade.is-waiting {
  opacity: 0;
}
/* ゆっくり浮かび上がる */
.scroll-fade.is-revealed {
  animation: scrollFadeUp 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes scrollFadeUp {
  from {
    opacity: 0;
    translate: 0 var(--scroll-fade-distance, 40px);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* 動きを減らす設定では通常表示 */
@media (prefers-reduced-motion: reduce) {
  .scroll-fade.is-waiting, .scroll-fade.is-revealed {
    opacity: 1;
    animation: none;
    translate: none;
  }
}
/* ==================================================
   はじめての方へ：コーヒー豆の保存方法
================================================== */
#beginners_storage_section {
  padding: 40px 24px 80px;
}
#beginners_storage_section > .container {
  max-width: 1200px;
  padding: 0;
}
/* PC：2列 */
.beginners-storage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}
.beginners-storage__item {
  min-width: 0;
}
/* 左に説明文、右にイラスト */
.beginners-storage__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: start;
  gap: 24px;
}
.beginners-storage__text {
  min-width: 0;
}
.beginners-storage__text p + p {
  margin-top: 16px;
}
.beginners-storage__body img {
  display: block;
  width: 100%;
  height: auto;
}
.beginners-storage__note {
  font-size: 0.857rem;
}
/* タブレット：1列 */
@media screen and (max-width: 1024px) {
  .beginners-storage {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #beginners_storage_section {
    padding: 0 24px 64px;
  }
  /* 白いミストの余白に見出しを重ねる */
  #beginners_storage_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }
  .beginners-storage__body {
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 16px;
  }
}