@charset "UTF-8";
/*
Theme Name: みけつくに淡路島 湯導-yudo-
Description: みけつくに淡路島 湯導-yudo- オリジナルテーマ。角丸なし。
Author: BookingResort
Version: 1.0.0
*/

/* -------------------------------------------------
   デザイン設定（色・フォント・幅）
   サイト全体の色を変えたいときは、この :root の中だけを
   書き換えてください。ここ以外は触らなくて大丈夫です。

   ■ ご指定のパレット（原色）
     base   #B5A881  くすみカーキ
     main   #5C4E22  ダークオリーブ
     accent #22525C  ダークティール
     accent #36225C  ダークパープル

   ご指定のままだと全体が濃くなりすぎるため、
   ・背景色はご指定の #EDECE2（地色）／#E5E4D5（帯・面）の2色に
   ・文字をのせる箇所だけ main / accent を明るくした色に
   調整しています。原色は --palette-* に残してあるので、
   濃くしたい箇所はそちらの値に差し替えてください。
------------------------------------------------- */
:root {
  /* ご指定のパレット（原色そのまま） */
  --palette-base: #B5A881;
  --palette-main: #5C4E22;
  --palette-accent-teal: #22525C;
  --palette-accent-purple: #36225C;

  /* 実際に使っている色（原色を薄め・明るめに調整したもの） */
  --primary: #212227;          /* 差し色（ボタン・見出し帯・アイコン）＝ 黒系 */
  --primary-light: #A8975C;    /* 明るい差し色（線・ホバー） */
  --secondary: #5C4E22;        /* 濃い色（フッター背景・帯）＝ main そのまま */
  --accent-teal: #366670;      /* アクセント1 ＝ ダークティールを明るく */
  --accent-purple: #5A4A80;    /* アクセント2 ＝ ダークパープルを明るく */
  --accent-base: #B5A881;      /* サブの差し色（英字ラベル・区切り線）＝ base そのまま */
  --base-bg: #EDECE2;          /* ページ全体の背景（ご指定の背景色1） */
  --bg-soft: #E5E4D5;          /* セクション背景（ご指定の背景色2） */
  --bg-tint: #E5E4D5;          /* コンセプト帯・チップ（ご指定の背景色2） */
  --base-link-color: #212227;  /* リンクの文字色 */
  --base-link-decoration: underline;
  --tb-size: 896px;
  --sp-size: 480px;
  --base-font-color: #3A342A;
  --base-font-size: 1.5rem;
  --base-font-size-tb: 1.5rem;
  --base-font-weight: 400;
  --base-font-family: 'Noto Sans JP', 'Yu Gothic UI', "游ゴシック", YuGothic, "ヒラギノゴシック Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --base-line-height: 1.7;
  --base-letter-spacing: 0.06em;
  --f-min: 'Noto Sans JP', 'Yu Gothic UI', "游ゴシック", YuGothic, sans-serif;
  --f-umincho: 'Noto Sans JP', 'Yu Gothic UI', "游ゴシック", YuGothic, sans-serif;
  --f-yugothic: 'Yu Gothic UI', "游ゴシック", YuGothic, "ヒラギノゴシック Pro W3", "Hiragino Gothic Pro", "HGゴシックE", "MS Pゴシック", "MS ゴシック", sans-serif;
  --f-fa: "Font Awesome 6 Free";
  --f-fab: "Font Awesome 6 Brands";
  --container-width: 1200px;
  --container-pd: 20px;
}

/* --------------------------------------------- */
/* ↓コア */
/* --------------------------------------------- */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: var(--base-letter-spacing);
}

::before,
::after {
  display: inline-block;
  text-decoration: inherit;
  vertical-align: inherit;
}

html {
  font-family: sans-serif;
  font-size: 62.5%;
}

body {
  background: var(--base-bg);
  margin: 0;
  padding: 0;
  color: var(--base-font-color);
  font-size: var(--base-font-size);
  font-family: var(--base-font-family);
  font-weight: var(--base-font-weight);
}

@media only screen and (max-width: 896px) {
  body {
    font-size: var(--base-font-size-tb);
  }
}

ol,
ul {
  list-style: none;
}

p,
dt,
dd,
li,
th,
td {
  line-height: var(--base-line-height);
}

a {
  background-color: transparent;
  color: var(--base-link-color);
  text-decoration: var(--base-link-decoration);
  transition: all 0.3s;
}

a:active,
a:hover {
  outline: 0;
}

a:hover {
  text-decoration: none;
}

a[href^="tel:"] {
  color: var(--base-font-color);
  text-decoration: none;
  pointer-events: none;
}

@media only screen and (max-width: 896px) {
  a[href^="tel:"] {
    pointer-events: fill;
  }
}

img {
  display: inline-block;
  border: 0;
  vertical-align: bottom;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.wrapper {
  overflow: hidden;
}

/* --------------------------------------------- */
/* ↑コア */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓headerパーツ */
/* --------------------------------------------- */

header {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
  border-bottom: 3px solid #212227;
}

/* ===== サイトロゴ（header.phpから統合） ===== */
.site-logo-text {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #212227;
  text-decoration: none;
}

.site-logo-text .logo-en {
  display: block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #212227;
}

.logo_image a {
  text-decoration: none;
}

.logo_image {
  display: flex;
  align-items: center;
  gap: 14px;
}

header>.check,
header>.menu-btn,
header>.close-menu {
  display: none;
}

header>.drawer-menu ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 50px;
}

header>.drawer-menu ul *+* {
  margin-left: 24px;
}

header>.drawer-menu ul>li>a {
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: 0em;
  color: var(--primary);
  display: block;
  min-width: 110px;
  padding: 5px 0;
}

header>.drawer-menu ul>li#menu-item-2030>a,
header>.drawer-menu ul>li:last-child>a {
  min-width: 110px;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--primary);
  color: #fff !important;
  padding: 8px 16px;
}

header>.drawer-menu ul>li#menu-item-2030>a:hover,
header>.drawer-menu ul>li:last-child>a:hover {
  color: #fff !important;
  opacity: 1;
  background: var(--secondary);
  border-color: var(--secondary);
}

header>.drawer-menu ul>li>a:hover {
  opacity: 0.8;
}

@media only screen and (max-width:1500px) {
  header>.drawer-menu ul {
    margin: 0 30px;
  }

  header>.drawer-menu ul>li>a {
    min-width: 105px;
  }
}

@media only screen and (max-width:1350px) {
  header>.drawer-menu ul {
    margin: 0 20px;
  }

  header>.drawer-menu ul *+* {
    margin-left: 30px;
  }

  header>.drawer-menu ul>li>a {
    min-width: unset;
  }
}

@media only screen and (max-width:1050px) {
  header>.drawer-menu ul {
    margin: 0 15px;
  }

  header>.drawer-menu ul *+* {
    margin-left: 15px;
  }

  header>.drawer-menu ul>li#menu-item-2030>a,
  header>.drawer-menu ul>li:last-child>a {
    min-width: 90px;
  }
}

@media only screen and (max-width:896px) {
  header {
    height: 60px;
  }

  header>.site-brand {
    position: absolute;
    left: 20px;
    top: 7px;
  }

  header>.menu-btn {
    display: block;
    width: 40px;
    height: 22px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 101;
    cursor: pointer;
  }

  header>.menu-btn>span {
    width: 100%;
    height: 2px;
    display: block;
    background: #212227;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    transform-origin: center;
    transition: 0.3s;
  }

  header>.menu-btn>span:nth-of-type(1) {
    transform: translateY(-10px);
  }

  header>.menu-btn>span:nth-of-type(3) {
    transform: translateY(10px);
  }

  header>.close-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
  }

  header>.drawer-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 300px;
    background: #e2e2e2;
    padding-top: 80px;
    transform: perspective(500px) rotateY(-90deg);
    transform-origin: right center;
    transition: 0.3s;
    z-index: 100;
  }

  header>.drawer-menu ul,
  header>.drawer-menu ul *+* {
    margin: 0;
  }

  header>.drawer-menu ul>li {
    width: 100%;
  }

  header>.drawer-menu ul>li>a {
    line-height: 1.7;
    padding: 13px 20px;
  }

  header>.drawer-menu ul>li#menu-item-2030>a,
  header>.drawer-menu ul>li:last-child>a {
    color: #fff !important;
    border-radius: 0;
    background: var(--primary);
  }

  header>.check:checked+.menu-btn>span:nth-of-type(1) {
    transform: rotate(35deg);
  }

  header>.check:checked+.menu-btn>span:nth-of-type(2) {
    opacity: 0;
  }

  header>.check:checked+.menu-btn>span:nth-of-type(3) {
    transform: rotate(-35deg);
  }

  header>.check:checked+.menu-btn+.close-menu {
    opacity: 1;
    visibility: visible;
  }

  header>.check:checked+.menu-btn+.close-menu+.drawer-menu {
    transition-delay: 0.3s;
    transform: none;
  }
}

@media screen and (min-width: 897px) {
  #menu-item-891 {
    display: none;
  }
}

/* --------------------------------------------- */
/* ↑headerパーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓footerパーツ */
/* --------------------------------------------- */

/* フッターの地色：ページの背景色（ご指定の背景色2）に合わせる */
footer {
  background: var(--bg-soft);
  padding: 80px 0 20px;
}

footer p {
  letter-spacing: 0;
}

.footer-address {
  font-style: normal;
  color: var(--base-font-color);
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

footer .f_menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}

footer .f_menu .info {
  width: 405px;
}

footer .f_menu .info .footer-brand {
  max-width: 380px;
  margin: 0 auto 30px;
  text-align: left;
}

footer .f_menu .info .tel {
  font-size: 2.8rem;
}

footer .f_menu .info .tel>a {
  letter-spacing: 0;
}

footer .f_menu #footer-menu {
  width: 660px;
}

footer .f_menu #footer-menu .menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px 28px;
}

footer .f_menu #footer-menu .menu>li>a {
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  color: #212227;
  min-width: 110px;
  display: block;
  transition: 0.3s;
  padding: 6px 0;
}

footer .f_menu #footer-menu .menu>li>a:hover {
  opacity: 0.7;
}

/* フッターの「ご予約・料金」ボタン：ヘッダーのボタンと同じ配色 */
footer .f_menu #footer-menu .menu>li.reserve-btn>a {
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--primary);
  color: #fff !important;
  padding: 8px 16px;
}

footer .f_menu #footer-menu .menu>li.reserve-btn>a:hover {
  opacity: 1;
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff !important;
}

footer #footer_sp {
  display: none;
}

footer>.company {
  font-size: 1.5rem;
  text-align: center;
  color: var(--base-font-color);
}

@media only screen and (max-width:896px) {
  footer {
    position: relative;
    z-index: 100;
    /* 下は、画面下の固定ボタン（お知らせ／アクセス）と「よくある質問」に隠れない余白 */
    padding: 48px 0 130px;
  }

  footer p {
    text-align: center;
  }

  footer .f_menu {
    flex-direction: column;
    margin-bottom: 32px;
  }

  /* ロゴと住所は中央揃え */
  footer .f_menu .info {
    width: 100%;
    margin-bottom: 28px;
    text-align: center;
  }

  footer .f_menu .info .footer-brand {
    max-width: unset;
    width: 100%;
    margin-bottom: 12px;
    text-align: center;
  }

  footer .f_menu .info .logo_image {
    justify-content: center;
    margin-bottom: 0;
  }

  footer .f_menu #footer-menu {
    width: 100%;
  }

  /* メニューは2列に整列し、区切り線で区切る */
  footer .f_menu #footer-menu .menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid #CCC9B3;
  }

  footer .f_menu #footer-menu .menu>li {
    border-bottom: 1px solid #CCC9B3;
  }

  footer .f_menu #footer-menu .menu>li:nth-child(odd) {
    border-right: 1px solid #CCC9B3;
  }

  footer .f_menu #footer-menu .menu>li>a {
    min-width: unset;
    padding: 14px 8px;
  }

  /* 「ご予約・料金」は2列ぶち抜きのボタン */
  footer .f_menu #footer-menu .menu>li.reserve-btn {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: none;
    padding-top: 20px;
  }

  footer .f_menu #footer-menu .menu>li.reserve-btn>a {
    width: 100%;
    padding: 14px 16px;
  }

  footer #footer_sp {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  footer #footer_sp .reserve_sp {
    display: flex;
    gap: 1px;
    background: #fff;
  }

  footer #footer_sp .reserve_sp>div {
    width: 50%;
  }

  footer #footer_sp .reserve_sp>div.reserve_web>p>a {
    color: #fff;
    background: #212227;
    font-weight: 700;
  }

  footer #footer_sp .reserve_sp>div>p>a {
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: #1d1d1e;
    display: block;
    padding: 4.5px 0;
    background: #e6ebec;
  }
}

/* --------------------------------------------- */
/* ↑footerパーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓ボタンパーツ */
/* --------------------------------------------- */
.btn_link_color>p {
  text-align: center;
}

.btn_link_color>p>a {
  width: 100%;
  max-width: 240px;
  padding: 10px 30px;
  display: inline-block;
  transition: 0.2s;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
}

.btn_link_color>p>a:hover {
  background: #212227;
  color: #fff;
}

.btn_link_color p a {
  background: #212227;
  color: #fff;
}

.btn_link_color p a:hover {
  background: #3A3B42;
  color: #fff;
}

.btn_link>p {
  text-align: center;
}

.btn_link>p>a {
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #212227;
  width: 100%;
  max-width: 250px;
  background: #fff;
  border-radius: 0;
  padding: 12px 30px;
  display: inline-block;
  transition: 0.2s;
  border: #ececec 1px solid;
}

.btn_link>p>a:hover {
  opacity: 0.7;
}

/* --------------------------------------------- */
/* ↑ボタンパーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓共通パーツ */
/* --------------------------------------------- */
h1 {
  font-size: 3.2rem;
}

h2 {
  font-size: 3.6rem;
  color: #222;
  text-align: center;
}

.mincho.top {
  font-size: 2.6rem;
  margin: 0 0 40px;
  padding-top: 70px;
  line-height: 1.4;
  text-align: center;
  position: relative;
}

.mincho.top .en {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(181, 168, 129, 0.45);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}

@media screen and (max-width: 896px) {
  .mincho.top {
    padding-top: 50px;
  }

  .mincho.top .en {
    font-size: 4rem;
    -webkit-text-stroke: 1px rgba(181, 168, 129, 0.45);
  }
}

@media screen and (max-width: 480px) {
  .mincho.top .en {
    font-size: 2rem;
    width: 100%;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.06em;
  }
}

.mincho.color {
  font-size: 2.6rem;
  margin: 0 0 40px;
  padding-top: 70px;
  line-height: 1.4;
  color: #333;
  text-align: center;
  position: relative;
}

.mincho.color .en {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(181, 168, 129, 0.45);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}

@media screen and (max-width: 896px) {
  .mincho.color {
    padding-top: 50px;
  }

  .mincho.color .en {
    font-size: 4rem;
  }
}

@media screen and (max-width: 480px) {
  .mincho.color .en {
    font-size: 2.4rem;
    width: 100%;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.06em;
  }
}

h2>a {
  text-decoration: none;
  transition: 0.3s;
}

h2>a:hover {
  opacity: 0.7;
}

.mincho.btm_border {
  position: relative;
}

.mincho.btm_border:before,
.mincho.btm_border:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 51px;
  height: 4px;
  display: none;
  /* 下層ページ見出しのアンダーバーを全ページ非表示 */
}

.mincho.btm_border:before {
  left: 50%;
  margin-left: -51px;
  background: #212227;
}

.mincho.btm_border:after {
  right: 50%;
  margin-right: -51px;
  background: #E0E6E9;
}

@media screen and (max-width:896px) {
  h2 {
    font-size: 2.6rem;
  }

  .mincho.top {
    font-size: 2.4rem;
    margin: 0 0 25px;
  }
}

h3 {
  font-size: 1.8rem;
  color: #222;
}

h3.border {
  color: #212227;
  position: relative;
  text-align: center;
  font-size: 2.6rem;
  margin-bottom: 20px;
}

h3.border:before {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  width: 100%;
  border-top: 1px solid #ccc;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
}

h3.border>span {
  background: #f1f4f4;
  padding: 0 25px;
  position: relative;
  z-index: 20;
}

@media screen and (max-width:896px) {
  h3.border {
    font-size: 2rem;
  }
}

h4 {
  font-size: 2rem;
  color: #222;
  text-align: center;
  margin-bottom: 20px;
}

.container {
  width: 100%;
  max-width: calc(var(--container-width) + (var(--container-pd)*2));
  margin: 0 auto;
}

@media only screen and (max-width:896px) {
  .container {
    width: 96%;
  }
}

/* ===== 固定予約ウィジェット（PC） ===== */
.reserve_pc {
  position: fixed;
  right: 20px;
  bottom: 52px;
  z-index: 100;
  width: 180px;
}

.reserve-card {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reserve-card__label {
  background: #212227;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 10px 8px;
  margin: 0;
  letter-spacing: 0.05em;
}

.reserve-card__label i {
  margin-right: 4px;
}

.reserve-card__tel {
  display: block;
  text-align: center;
  color: #5C4E22;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 8px;
  background: #fff;
  border-bottom: 1px solid #E5E4D5;
  transition: background 0.2s;
  letter-spacing: 0.02em;
}

.reserve-card__tel:hover {
  background: #EDECE2;
}

.reserve-card__tel i {
  color: #212227;
  margin-right: 4px;
}

.reserve-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: #212227;
  font-size: 1.5rem;
  font-weight: 900;
  text-decoration: none;
  padding: 14px 8px;
  text-align: center;
  letter-spacing: 0.03em;
  border-top: 2px solid #E5E4D5;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.reserve-card__btn:hover {
  background: #212227;
  color: #fff;
  transform: scale(1.03);
}

.reserve-card__btn i {
  font-size: 1.5rem;
  transition: transform 0.2s;
}

.reserve-card__btn:hover i {
  transform: translateX(3px);
}

@media only screen and (max-width:896px) {
  .reserve_pc {
    display: none;
  }
}

.textarea_p {
  padding: 3rem;
}

.textarea_p h3 {
  padding-bottom: 10px;
  font-size: 2.2rem;
  line-height: 1.3;
  position: relative;
  margin-bottom: 20px;
}

.textarea_p h3 span.sub_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
  background: #E5E4D5;
  padding: 4px 14px;
  border-radius: 0;
  display: inline-block;
  margin-bottom: 8px;
}

.textarea_p h3 span.point_n {
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 900;
  color: #212227;
  line-height: 1;
}

@media screen and (max-width:1024px) {
  .textarea_p h3 {
    padding-bottom: 20px;
  }
}

.scroll_point {
  height: 0;
  overflow: hidden;
  margin-top: -80px;
  padding-top: 80px;
  display: block;
  text-decoration: none;
}

@media screen and (max-width: 896px) {
  .scroll_point {
    display: block;
    margin-top: 0;
    padding-top: 0;
  }
}

.mincho {
  font-family: 'Noto Sans JP', 'Yu Gothic UI', "游ゴシック", YuGothic, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* TOPへ戻るボタン */
#fixedTop {
  right: 10px;
  bottom: 222px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  text-decoration: none;
  vertical-align: middle;
  display: none;
  width: 60px;
  height: 60px;
  border-radius: 0;
  background: #3F3517; /* フッターの緑に合わせた濃いオリーブ */
  position: fixed;
  z-index: 98;
  font-size: 20px;
  cursor: pointer;
}

#fixedTop:hover {
  background: #2C2510;
}

@media screen and (max-width:896px) {
  #fixedTop {
    display: none !important;
  }
}

span.en {
  letter-spacing: 0.1em;
  font-family: 'Noto Sans JP', 'Yu Gothic UI', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #212227;
  display: block;
}

.ta_c {
  text-align: center;
}

@media screen and (max-width:896px) {
  .sp_mb_40 {
    margin-bottom: 40px;
  }
}

/* パンくずリスト（TOP以外の全ページ上部） */
.pankuzu {
  background: var(--base-bg);
  padding: 10px 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--base-font-color);
  margin-top: 80px;
}

.pankuzu a {
  color: var(--base-link-color);
  text-decoration: underline;
}

.pankuzu a:hover {
  text-decoration: none;
}

.breadcrumbs__sep {
  margin: 0 0.6em;
  color: #6B665E;
}

@media screen and (max-width:896px) {
  .pankuzu {
    margin-top: 60px;
  }
}

/* ===== 下層ページ ヒーロー ===== */
.page_top_view {
  text-align: center;
  margin-bottom: 0;
}

.page_top_view img.page_top {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

/* 客室ページの帯画像：右寄せで拡大し、左側（壁のコンセント）を枠の外に出す */
.page_top_crop {
  overflow: hidden;
}

.page_top_view img.page_top.page_top--room {
  transform: scale(1.35);
  transform-origin: 100% 50%;
}

/* タイトルエリア */
.page_top_view .ttl_area {
  overflow: hidden;
  background: #fff;
  padding: 20px 0 32px;
}

/* 見出し：英字を背後に大きく */
.page_top_view .ttl_area .mincho.btm_border {
  position: relative;
  padding-top: 68px;
  font-size: 2.8rem;
  font-weight: 900;
  color: #5C4E22;
}

/* 英字デコレーション（h2の中で top:0 に配置） */
.page_top_view .ttl_area .en {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(181, 168, 129, 0.45);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* 見出し左右の線 */
.page_top_view .ttl_area .mincho.btm_border::before,
.page_top_view .ttl_area .mincho.btm_border::after {
  background: #212227;
}

@media screen and (max-width: 896px) {
  .page_top_view img.page_top {
    height: 220px;
  }

  .page_top_view .ttl_area {
    padding: 12px 0 24px;
  }

  .page_top_view .ttl_area .mincho.btm_border {
    padding-top: 34px;
    font-size: 2.2rem;
  }

  .page_top_view .ttl_area .en {
    font-size: 4rem;
    -webkit-text-stroke: 1px rgba(181, 168, 129, 0.45);
  }
}

@media screen and (max-width: 480px) {
  .page_top_view .ttl_area .en {
    font-size: 2.4rem;
    width: 100%;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.06em;
  }
}

/*END*/
/*Smartphone*/

/* --------------------------------------------- */
/* ↑共通パーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓トップページ（front-page.php）パーツ */
/* --------------------------------------------- */
.top_slid {
  position: relative;
  margin-top: 80px;
}

.top_slid .mincho {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  letter-spacing: 0.2em;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  text-align: center;
  width: 100%;
}

/* mv-slider-wrap がtop_slidを包む */
.top_slid .mv-slider-wrap {
  position: relative;
}

.top_slid .mv-slider-main .mv-slide-item img {
  width: 100%;
  height: calc(100svh - 80px);
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 896px) {
  .top_slid {
    margin-top: 60px;
  }

  .top_slid .mincho {
    font-size: 1.5rem;
    bottom: 16px;
  }

  /* スマホのメイン画像は4:3の比率で表示します */
  .top_slid .mv-slider-main .mv-slide-item img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

.top_news {
  padding: 30px 0;
  background: #EDECE2;
}

.top_news .container {
  display: flex;
}

.top_news .container h2 {
  border-right: 1px solid #01080C;
  width: 165px;
  display: flex;
  align-items: center;
}

.top_news .container>ul>li {
  padding: 15px 0;
}

.top_news .container>ul>li .date {
  display: inline-block;
  width: 130px;
  padding: 0 10px 0 30px;
}

.top_news .container>ul>li .cate {
  text-align: center;
  display: inline-block;
  color: #fff;
  background: #01080C;
  padding: 2px 5px;
  margin-right: 30px;
  font-size: 1.5rem;
  min-width: 75px;
}

.top_news .container>ul>li .cate a {
  color: #fff;
}

@media screen and (max-width:896px) {
  .top_news .container {
    flex-direction: column;
  }

  .top_news .container>ul>li .date {
    width: auto;
  }

  .top_news .container h2 {
    border-right: none;
    padding-bottom: 3%;
    margin-bottom: 10px;
    width: 100%;
    justify-content: center;
  }

  .top_news .container>ul>li {
    padding: 2% 0;
    line-height: 1.8;
  }

  .top_news .container>ul>li .date {
    padding: 0;
  }

  .top_news .container>ul>li .cate {
    font-size: 1.5rem;
  }
}

.chiba_glamping_top_bk {
  background: var(--bg-tint);
}

.top_feature_bk {
  background: var(--base-bg);
}

.top_msg {
  padding: 100px 0;
}

.top_msg h2 {
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.5;
  padding-bottom: 15px;
  margin-bottom: 34px;
  color: var(--base-font-color);
}

.top_msg h2 span {
  font-size: 1.6rem;
  color: var(--secondary);
  letter-spacing: 0.1em;
}

.top_msg>p {
  text-align: center;
  line-height: 2;
  font-size: 16px;
  color: #fff;
}

@media screen and (max-width:896px) {
  .top_msg {
    height: auto;
    padding: 8% 15px;
  }

  .top_msg h2 {
    font-size: 2rem;
    line-height: 1.4;
    padding: 10% 5% 5%;
  }

  .top_msg h2 span {
    font-size: 1.5rem;
  }
}

.top_feature {
  background: var(--base-bg);
  padding: 85px 0;
}

@media screen and (max-width:896px) {
  .top_feature {
    padding: 10% 0;
  }
}

.top_box {
  display: flex;
  width: 100%;
  margin: 0 auto 60px;
  flex-direction: row;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.top_box.top_box_re {
  flex-direction: row-reverse;
}

.top_box .feature_mainimg {
  width: 50%;
}

.top_box .feature_mainimg>img {
  height: 480px;
  object-fit: cover;
}

.top_box .feature_txtarea {
  background: #fff;
  width: 50%;
}

@media screen and (max-width:1024px) {
  .top_box {
    flex-direction: column;
    margin-bottom: 40px;
    border-radius: 0;
  }

  .top_box.top_box_re {
    flex-direction: column;
  }

  .top_box .feature_mainimg {
    text-align: center;
    width: 100%;
  }

  .top_box .feature_mainimg>img {
    width: 100%;
    max-width: 600px;
    height: auto;
  }

  .top_box .feature_txtarea {
    margin: 0 auto;
    height: auto;
    width: 100%;
    max-width: 600px;
  }
}

@media screen and (max-width:896px) {
  .top_box {
    border-radius: 0;
    margin-bottom: 32px;
  }

  .textarea_p {
    padding: 2rem 1.6rem;
  }

  .textarea_p h3 {
    font-size: 1.8rem;
  }

  .textarea_p h3 span.point_n {
    font-size: 3.5rem;
  }

  .textarea_p h3 span.sub_title {
    font-size: 1.5rem;
    padding: 3px 12px;
  }
}

.top_room {
  padding: 80px 0;
  background-color: var(--bg-soft);
  /* 薄いドット模様：濃さ＝rgba の最後の数字（0.12）／間隔＝background-size（16px） */
  background-image: radial-gradient(rgba(33, 34, 39, 0.12) 1px, transparent 1.6px);
  background-size: 16px 16px;
}

.top_room h2 {
  margin-bottom: 40px;
  color: var(--base-font-color);
}

.top_room p {
  color: var(--base-font-color);
}

.top_room h3 span {
  font-size: 1.5rem;
}

.top_room h4 {
  text-align: center;
  margin-bottom: 20px;
}

@media screen and (max-width:896px) {
  .top_room {
    padding: 10% 0;
  }
}

.top_gf,
.top_faq,
.top_access {
  padding: 80px 0;
}

.top_gf h2 {
  margin-bottom: 30px;
}

.top_access {
  background: var(--base-bg);
}

@media screen and (max-width:896px) {

  .top_gf,
.top_faq,
.top_access {
    padding: 10% 0;
  }
}

.top_faq_box {
  display: flex;
}

.top_faq_box .top_faq_img {
  width: 57.2%;
}

.top_faq .top_faq_box .top_faq_img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.top_faq_box .top_textarea_p {
  width: 42.8%;
  background: #F1F4F5;
  padding: 1%;
}

.top_faq_box .top_textarea_p .inner {
  border: 1px solid #fff;
  padding: 80px 32px 20px;
  height: 100%;
}

.top_faq .top_faq_box .top_textarea_p .inner h2 {
  margin-bottom: 30px;
  font-size: 4rem;
  color: #212227;
}

@media screen and (max-width:896px) {
  .top_faq_box {
    flex-direction: column;
  }

  .top_faq_box .top_faq_img {
    width: 100%;
  }

  .top_faq .top_faq_box .top_faq_img img {
    height: 300px;
  }

  .top_faq_box .top_textarea_p {
    width: 100%;
  }

  .top_faq_box .top_textarea_p .inner {
    padding: 28px 20px; /* 文章が枠に貼り付かないよう左右にも余白 */
    height: auto;
  }

  .top_faq .top_faq_box .top_textarea_p .inner h2 {
    font-size: 2rem;
  }
}

.top_access .g_map {
  height: 360px;
  margin-bottom: 40px;
}

.top_access .g_map iframe {
  width: 100%;
  height: 100%;
}

.top_access .checkin_box {
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top_access .checkin_box .checkin_ttl {
  position: relative;
  text-align: center;
  font-size: 2.0rem;
  margin-bottom: 25px;
  padding: 0 30px;
}

.top_access .checkin_box .checkin_ttl span {
  background: var(--base-bg); /* アクセスの背景色と同じ色にして、左右の線だけを見せる */
  padding: 0 30px;
  z-index: 2;
  position: relative;
}

.top_access .checkin_box .checkin_ttl:before {
  content: "";
  height: 1px;
  background: #ccc;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.top_access ul>li {
  display: flex;
  border-bottom: 1px solid #ccc;
  color: #333;
  padding: 14px 0;
}

.top_access ul>li>h3 {
  background: #F1F4F5;
  font-size: 1.8rem;
  font-weight: 500;
  width: 26%;
  padding: 25px 15px;
}

.top_access ul>li>p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.4;
  width: 74%;
  padding: 16px 14px;
}

@media screen and (max-width:896px) {
  .top_access .g_map {
    height: 240px;
  }

  .top_access .g_map iframe {
    height: 100%;
  }

  .top_access ul>li {
    flex-direction: column;
  }

  .top_access ul>li>h3 {
    width: 100%;
    text-align: center;
  }

  .top_access ul>li>p {
    width: 100%;
  }
}

.gallery {
  background-color: #e5e5e5;
  padding-top: 90px;
  padding-bottom: 90px;
  text-align: center;
}

.gallery h2 {
  padding-bottom: 20px;
  color: #271b00;
}

@media screen and (max-width: 767px) {

  .gallery {
    padding-top: 40px;
  }
}

.top_access address {
  font-size: 1.5rem;
  margin-top: 1em;
}

/* --------------------------------------------- */
/* ↑トップページ（front-page.php）パーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓周辺観光スライダー（TOPページ）パーツ */
/* --------------------------------------------- */

.post-slider {
  margin-bottom: 60px;
}

.post-slider li {
  margin: 8px 12px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.post-slider li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.13);
}

.post-slider li a {
  text-decoration: none;
  transition: 0.3s;
}

.post-slider li a:hover {
  opacity: 0.85;
}

.post-slider li img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.post-slider li h3.spot {
  border-bottom: none;
  width: 100%;
  margin: 0;
  padding: 14px 16px 8px;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  color: #5C4E22;
}

.post-slider li p {
  margin: 0 0 14px;
  padding: 0 16px;
  font-size: 1.5rem;
  line-height: 1.7;
  color: #555;
}

/* 周辺観光セクション */
.top_gf {
  position: relative;
  background: var(--base-bg);
}

/* スライダーの外枠 */
.top_gf .gf-slider-wrap {
  overflow: hidden;
  position: relative;
}

/* スライダー左右の白いぼかしは、背景色が白ではないため使わない */
.top_gf .gf-slider-wrap::before,
.top_gf .gf-slider-wrap::after {
  display: none;
}

.ps-prev,
.ps-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: none;
  background: #212227;
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(168, 151, 92, 0.30);
  transition: background 0.2s, transform 0.2s;
}

.ps-prev:hover,
.ps-next:hover {
  background: #3A3B42;
  transform: translateY(-50%) scale(1.1);
}

.ps-prev {
  left: 10px;
}

.ps-next {
  right: 10px;
}

@media screen and (max-width: 896px) {
  .ps-prev {
    left: 6px;
  }

  .ps-next {
    right: 6px;
  }
}

/* --------------------------------------------- */
/* ↑周辺観光スライダー（TOPページ）パーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓お部屋ページ（page-room.php）パーツ */
/* --------------------------------------------- */
#room {
  padding: 0 0 80px;
}

#room h4 {
  font-size: 2.0rem;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 500;
}

#room p.msg,
.container>p.msg {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 28px;
}

#room .inner {
  display: flex;
  justify-content: space-between;
}

#room ul.label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#room ul.label li {
  width: 48%;
  display: flex;
  margin-bottom: 14px;
}

#room ul.label li p {
  padding: 20px 0;
  font-size: 1.6rem;
}

@media screen and (max-width:896px) {
  #room .map {
    padding: 0;
  }

  #room .inner {
    flex-direction: column;
  }

}

/* --------------------------------------------- */
/* ↑お部屋ページ（page-room.php）パーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓注釈テキストパーツ */
/* --------------------------------------------- */

/* 「※画像はイメージです」などの注釈 */
.p_menu {
  padding: 10px 0;
  font-size: 1.5rem;
  color: #6B665E;
}

/* --------------------------------------------- */
/* ↑注釈テキストパーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓404ページ（404.php）パーツ */
/* --------------------------------------------- */
#content h2 {
  font-size: 4rem;
  text-align: center;
  padding: 10rem 0 6rem;
  margin: 0 auto;
}

#content p {
  text-align: center;
  padding: 3rem 0;
}

/* --------------------------------------------- */
/* ↑404ページ（404.php）パーツ */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* ↓グローバルパーツ */
/* --------------------------------------------- */
/* マージン */
.mt_5 {
  margin-top: 5px !important;
}

.mt_10 {
  margin-top: 10px !important;
}

.mt_15 {
  margin-top: 15px !important;
}

.mt_20 {
  margin-top: 20px !important;
}

.mt_25 {
  margin-top: 25px !important;
}

.mt_30 {
  margin-top: 30px !important;
}

.mt_35 {
  margin-top: 35px !important;
}

.mt_40 {
  margin-top: 40px !important;
}

.mt_45 {
  margin-top: 45px !important;
}

.mt_50 {
  margin-top: 50px !important;
}

.mt_55 {
  margin-top: 55px !important;
}

.mt_60 {
  margin-top: 60px !important;
}

.mt_65 {
  margin-top: 65px !important;
}

.mt_70 {
  margin-top: 70px !important;
}

.mt_75 {
  margin-top: 75px !important;
}

.mt_80 {
  margin-top: 80px !important;
}

.mt_85 {
  margin-top: 85px !important;
}

.mt_90 {
  margin-top: 90px !important;
}

.mt_95 {
  margin-top: 95px !important;
}

.mt_100 {
  margin-top: 100px !important;
}

.mr_5 {
  margin-right: 5px !important;
}

.mr_10 {
  margin-right: 10px !important;
}

.mr_15 {
  margin-right: 15px !important;
}

.mr_20 {
  margin-right: 20px !important;
}

.mr_25 {
  margin-right: 25px !important;
}

.mr_30 {
  margin-right: 30px !important;
}

.mr_35 {
  margin-right: 35px !important;
}

.mr_40 {
  margin-right: 40px !important;
}

.mr_45 {
  margin-right: 45px !important;
}

.mr_50 {
  margin-right: 50px !important;
}

.mr_55 {
  margin-right: 55px !important;
}

.mr_60 {
  margin-right: 60px !important;
}

.mr_65 {
  margin-right: 65px !important;
}

.mr_70 {
  margin-right: 70px !important;
}

.mr_75 {
  margin-right: 75px !important;
}

.mr_80 {
  margin-right: 80px !important;
}

.mr_85 {
  margin-right: 85px !important;
}

.mr_90 {
  margin-right: 90px !important;
}

.mr_95 {
  margin-right: 95px !important;
}

.mr_100 {
  margin-right: 100px !important;
}

.mb_5 {
  margin-bottom: 5px !important;
}

.mb_10 {
  margin-bottom: 10px !important;
}

.mb_15 {
  margin-bottom: 15px !important;
}

.mb_20 {
  margin-bottom: 20px !important;
}

.mb_25 {
  margin-bottom: 25px !important;
}

.mb_30 {
  margin-bottom: 30px !important;
}

.mb_35 {
  margin-bottom: 35px !important;
}

.mb_40 {
  margin-bottom: 40px !important;
}

.mb_45 {
  margin-bottom: 45px !important;
}

.mb_50 {
  margin-bottom: 50px !important;
}

.mb_55 {
  margin-bottom: 55px !important;
}

.mb_60 {
  margin-bottom: 60px !important;
}

.mb_65 {
  margin-bottom: 65px !important;
}

.mb_70 {
  margin-bottom: 70px !important;
}

.mb_75 {
  margin-bottom: 75px !important;
}

.mb_80 {
  margin-bottom: 80px !important;
}

.mb_85 {
  margin-bottom: 85px !important;
}

.mb_90 {
  margin-bottom: 90px !important;
}

.mb_95 {
  margin-bottom: 95px !important;
}

.mb_100 {
  margin-bottom: 100px !important;
}

.ml_5 {
  margin-left: 5px !important;
}

.ml_10 {
  margin-left: 10px !important;
}

.ml_15 {
  margin-left: 15px !important;
}

.ml_20 {
  margin-left: 20px !important;
}

.ml_25 {
  margin-left: 25px !important;
}

.ml_30 {
  margin-left: 30px !important;
}

.ml_35 {
  margin-left: 35px !important;
}

.ml_40 {
  margin-left: 40px !important;
}

.ml_45 {
  margin-left: 45px !important;
}

.ml_50 {
  margin-left: 50px !important;
}

.ml_55 {
  margin-left: 55px !important;
}

.ml_60 {
  margin-left: 60px !important;
}

.ml_65 {
  margin-left: 65px !important;
}

.ml_70 {
  margin-left: 70px !important;
}

.ml_75 {
  margin-left: 75px !important;
}

.ml_80 {
  margin-left: 80px !important;
}

.ml_85 {
  margin-left: 85px !important;
}

.ml_90 {
  margin-left: 90px !important;
}

.ml_95 {
  margin-left: 95px !important;
}

.ml_100 {
  margin-left: 100px !important;
}

@media only screen and (max-width: 896px) {
  .tb_mt_5 {
    margin-top: 5px !important;
  }

  .tb_mt_10 {
    margin-top: 10px !important;
  }

  .tb_mt_15 {
    margin-top: 15px !important;
  }

  .tb_mt_20 {
    margin-top: 20px !important;
  }

  .tb_mt_25 {
    margin-top: 25px !important;
  }

  .tb_mt_30 {
    margin-top: 30px !important;
  }

  .tb_mt_35 {
    margin-top: 35px !important;
  }

  .tb_mt_40 {
    margin-top: 40px !important;
  }

  .tb_mt_45 {
    margin-top: 45px !important;
  }

  .tb_mt_50 {
    margin-top: 50px !important;
  }

  .tb_mt_55 {
    margin-top: 55px !important;
  }

  .tb_mt_60 {
    margin-top: 60px !important;
  }

  .tb_mt_65 {
    margin-top: 65px !important;
  }

  .tb_mt_70 {
    margin-top: 70px !important;
  }

  .tb_mt_75 {
    margin-top: 75px !important;
  }

  .tb_mt_80 {
    margin-top: 80px !important;
  }

  .tb_mt_85 {
    margin-top: 85px !important;
  }

  .tb_mt_90 {
    margin-top: 90px !important;
  }

  .tb_mt_95 {
    margin-top: 95px !important;
  }

  .tb_mt_100 {
    margin-top: 100px !important;
  }

  .tb_mr_5 {
    margin-right: 5px !important;
  }

  .tb_mr_10 {
    margin-right: 10px !important;
  }

  .tb_mr_15 {
    margin-right: 15px !important;
  }

  .tb_mr_20 {
    margin-right: 20px !important;
  }

  .tb_mr_25 {
    margin-right: 25px !important;
  }

  .tb_mr_30 {
    margin-right: 30px !important;
  }

  .tb_mr_35 {
    margin-right: 35px !important;
  }

  .tb_mr_40 {
    margin-right: 40px !important;
  }

  .tb_mr_45 {
    margin-right: 45px !important;
  }

  .tb_mr_50 {
    margin-right: 50px !important;
  }

  .tb_mr_55 {
    margin-right: 55px !important;
  }

  .tb_mr_60 {
    margin-right: 60px !important;
  }

  .tb_mr_65 {
    margin-right: 65px !important;
  }

  .tb_mr_70 {
    margin-right: 70px !important;
  }

  .tb_mr_75 {
    margin-right: 75px !important;
  }

  .tb_mr_80 {
    margin-right: 80px !important;
  }

  .tb_mr_85 {
    margin-right: 85px !important;
  }

  .tb_mr_90 {
    margin-right: 90px !important;
  }

  .tb_mr_95 {
    margin-right: 95px !important;
  }

  .tb_mr_100 {
    margin-right: 100px !important;
  }

  .tb_mb_5 {
    margin-bottom: 5px !important;
  }

  .tb_mb_10 {
    margin-bottom: 10px !important;
  }

  .tb_mb_15 {
    margin-bottom: 15px !important;
  }

  .tb_mb_20 {
    margin-bottom: 20px !important;
  }

  .tb_mb_25 {
    margin-bottom: 25px !important;
  }

  .tb_mb_30 {
    margin-bottom: 30px !important;
  }

  .tb_mb_35 {
    margin-bottom: 35px !important;
  }

  .tb_mb_40 {
    margin-bottom: 40px !important;
  }

  .tb_mb_45 {
    margin-bottom: 45px !important;
  }

  .tb_mb_50 {
    margin-bottom: 50px !important;
  }

  .tb_mb_55 {
    margin-bottom: 55px !important;
  }

  .tb_mb_60 {
    margin-bottom: 60px !important;
  }

  .tb_mb_65 {
    margin-bottom: 65px !important;
  }

  .tb_mb_70 {
    margin-bottom: 70px !important;
  }

  .tb_mb_75 {
    margin-bottom: 75px !important;
  }

  .tb_mb_80 {
    margin-bottom: 80px !important;
  }

  .tb_mb_85 {
    margin-bottom: 85px !important;
  }

  .tb_mb_90 {
    margin-bottom: 90px !important;
  }

  .tb_mb_95 {
    margin-bottom: 95px !important;
  }

  .tb_mb_100 {
    margin-bottom: 100px !important;
  }

  .tb_ml_5 {
    margin-left: 5px !important;
  }

  .tb_ml_10 {
    margin-left: 10px !important;
  }

  .tb_ml_15 {
    margin-left: 15px !important;
  }

  .tb_ml_20 {
    margin-left: 20px !important;
  }

  .tb_ml_25 {
    margin-left: 25px !important;
  }

  .tb_ml_30 {
    margin-left: 30px !important;
  }

  .tb_ml_35 {
    margin-left: 35px !important;
  }

  .tb_ml_40 {
    margin-left: 40px !important;
  }

  .tb_ml_45 {
    margin-left: 45px !important;
  }

  .tb_ml_50 {
    margin-left: 50px !important;
  }

  .tb_ml_55 {
    margin-left: 55px !important;
  }

  .tb_ml_60 {
    margin-left: 60px !important;
  }

  .tb_ml_65 {
    margin-left: 65px !important;
  }

  .tb_ml_70 {
    margin-left: 70px !important;
  }

  .tb_ml_75 {
    margin-left: 75px !important;
  }

  .tb_ml_80 {
    margin-left: 80px !important;
  }

  .tb_ml_85 {
    margin-left: 85px !important;
  }

  .tb_ml_90 {
    margin-left: 90px !important;
  }

  .tb_ml_95 {
    margin-left: 95px !important;
  }

  .tb_ml_100 {
    margin-left: 100px !important;
  }
}

/* パディング */
.pt_5 {
  padding-top: 5px !important;
}

.pt_10 {
  padding-top: 10px !important;
}

.pt_15 {
  padding-top: 15px !important;
}

.pt_20 {
  padding-top: 20px !important;
}

.pt_25 {
  padding-top: 25px !important;
}

.pt_30 {
  padding-top: 30px !important;
}

.pt_35 {
  padding-top: 35px !important;
}

.pt_40 {
  padding-top: 40px !important;
}

.pt_45 {
  padding-top: 45px !important;
}

.pt_50 {
  padding-top: 50px !important;
}

.pt_55 {
  padding-top: 55px !important;
}

.pt_60 {
  padding-top: 60px !important;
}

.pt_65 {
  padding-top: 65px !important;
}

.pt_70 {
  padding-top: 70px !important;
}

.pt_75 {
  padding-top: 75px !important;
}

.pt_80 {
  padding-top: 80px !important;
}

.pt_85 {
  padding-top: 85px !important;
}

.pt_90 {
  padding-top: 90px !important;
}

.pt_95 {
  padding-top: 95px !important;
}

.pt_100 {
  padding-top: 100px !important;
}

.pr_5 {
  padding-right: 5px !important;
}

.pr_10 {
  padding-right: 10px !important;
}

.pr_15 {
  padding-right: 15px !important;
}

.pr_20 {
  padding-right: 20px !important;
}

.pr_25 {
  padding-right: 25px !important;
}

.pr_30 {
  padding-right: 30px !important;
}

.pr_35 {
  padding-right: 35px !important;
}

.pr_40 {
  padding-right: 40px !important;
}

.pr_45 {
  padding-right: 45px !important;
}

.pr_50 {
  padding-right: 50px !important;
}

.pr_55 {
  padding-right: 55px !important;
}

.pr_60 {
  padding-right: 60px !important;
}

.pr_65 {
  padding-right: 65px !important;
}

.pr_70 {
  padding-right: 70px !important;
}

.pr_75 {
  padding-right: 75px !important;
}

.pr_80 {
  padding-right: 80px !important;
}

.pr_85 {
  padding-right: 85px !important;
}

.pr_90 {
  padding-right: 90px !important;
}

.pr_95 {
  padding-right: 95px !important;
}

.pr_100 {
  padding-right: 100px !important;
}

.pb_5 {
  padding-bottom: 5px !important;
}

.pb_10 {
  padding-bottom: 10px !important;
}

.pb_15 {
  padding-bottom: 15px !important;
}

.pb_20 {
  padding-bottom: 20px !important;
}

.pb_25 {
  padding-bottom: 25px !important;
}

.pb_30 {
  padding-bottom: 30px !important;
}

.pb_35 {
  padding-bottom: 35px !important;
}

.pb_40 {
  padding-bottom: 40px !important;
}

.pb_45 {
  padding-bottom: 45px !important;
}

.pb_50 {
  padding-bottom: 50px !important;
}

.pb_55 {
  padding-bottom: 55px !important;
}

.pb_60 {
  padding-bottom: 60px !important;
}

.pb_65 {
  padding-bottom: 65px !important;
}

.pb_70 {
  padding-bottom: 70px !important;
}

.pb_75 {
  padding-bottom: 75px !important;
}

.pb_80 {
  padding-bottom: 80px !important;
}

.pb_85 {
  padding-bottom: 85px !important;
}

.pb_90 {
  padding-bottom: 90px !important;
}

.pb_95 {
  padding-bottom: 95px !important;
}

.pb_100 {
  padding-bottom: 100px !important;
}

.pl_5 {
  padding-left: 5px !important;
}

.pl_10 {
  padding-left: 10px !important;
}

.pl_15 {
  padding-left: 15px !important;
}

.pl_20 {
  padding-left: 20px !important;
}

.pl_25 {
  padding-left: 25px !important;
}

.pl_30 {
  padding-left: 30px !important;
}

.pl_35 {
  padding-left: 35px !important;
}

.pl_40 {
  padding-left: 40px !important;
}

.pl_45 {
  padding-left: 45px !important;
}

.pl_50 {
  padding-left: 50px !important;
}

.pl_55 {
  padding-left: 55px !important;
}

.pl_60 {
  padding-left: 60px !important;
}

.pl_65 {
  padding-left: 65px !important;
}

.pl_70 {
  padding-left: 70px !important;
}

.pl_75 {
  padding-left: 75px !important;
}

.pl_80 {
  padding-left: 80px !important;
}

.pl_85 {
  padding-left: 85px !important;
}

.pl_90 {
  padding-left: 90px !important;
}

.pl_95 {
  padding-left: 95px !important;
}

.pl_100 {
  padding-left: 100px !important;
}

@media only screen and (max-width: 896px) {
  .tb_pt_5 {
    padding-top: 5px !important;
  }

  .tb_pt_10 {
    padding-top: 10px !important;
  }

  .tb_pt_15 {
    padding-top: 15px !important;
  }

  .tb_pt_20 {
    padding-top: 20px !important;
  }

  .tb_pt_25 {
    padding-top: 25px !important;
  }

  .tb_pt_30 {
    padding-top: 30px !important;
  }

  .tb_pt_35 {
    padding-top: 35px !important;
  }

  .tb_pt_40 {
    padding-top: 40px !important;
  }

  .tb_pt_45 {
    padding-top: 45px !important;
  }

  .tb_pt_50 {
    padding-top: 50px !important;
  }

  .tb_pt_55 {
    padding-top: 55px !important;
  }

  .tb_pt_60 {
    padding-top: 60px !important;
  }

  .tb_pt_65 {
    padding-top: 65px !important;
  }

  .tb_pt_70 {
    padding-top: 70px !important;
  }

  .tb_pt_75 {
    padding-top: 75px !important;
  }

  .tb_pt_80 {
    padding-top: 80px !important;
  }

  .tb_pt_85 {
    padding-top: 85px !important;
  }

  .tb_pt_90 {
    padding-top: 90px !important;
  }

  .tb_pt_95 {
    padding-top: 95px !important;
  }

  .tb_pt_100 {
    padding-top: 100px !important;
  }

  .tb_pr_5 {
    padding-right: 5px !important;
  }

  .tb_pr_10 {
    padding-right: 10px !important;
  }

  .tb_pr_15 {
    padding-right: 15px !important;
  }

  .tb_pr_20 {
    padding-right: 20px !important;
  }

  .tb_pr_25 {
    padding-right: 25px !important;
  }

  .tb_pr_30 {
    padding-right: 30px !important;
  }

  .tb_pr_35 {
    padding-right: 35px !important;
  }

  .tb_pr_40 {
    padding-right: 40px !important;
  }

  .tb_pr_45 {
    padding-right: 45px !important;
  }

  .tb_pr_50 {
    padding-right: 50px !important;
  }

  .tb_pr_55 {
    padding-right: 55px !important;
  }

  .tb_pr_60 {
    padding-right: 60px !important;
  }

  .tb_pr_65 {
    padding-right: 65px !important;
  }

  .tb_pr_70 {
    padding-right: 70px !important;
  }

  .tb_pr_75 {
    padding-right: 75px !important;
  }

  .tb_pr_80 {
    padding-right: 80px !important;
  }

  .tb_pr_85 {
    padding-right: 85px !important;
  }

  .tb_pr_90 {
    padding-right: 90px !important;
  }

  .tb_pr_95 {
    padding-right: 95px !important;
  }

  .tb_pr_100 {
    padding-right: 100px !important;
  }

  .tb_pb_5 {
    padding-bottom: 5px !important;
  }

  .tb_pb_10 {
    padding-bottom: 10px !important;
  }

  .tb_pb_15 {
    padding-bottom: 15px !important;
  }

  .tb_pb_20 {
    padding-bottom: 20px !important;
  }

  .tb_pb_25 {
    padding-bottom: 25px !important;
  }

  .tb_pb_30 {
    padding-bottom: 30px !important;
  }

  .tb_pb_35 {
    padding-bottom: 35px !important;
  }

  .tb_pb_40 {
    padding-bottom: 40px !important;
  }

  .tb_pb_45 {
    padding-bottom: 45px !important;
  }

  .tb_pb_50 {
    padding-bottom: 50px !important;
  }

  .tb_pb_55 {
    padding-bottom: 55px !important;
  }

  .tb_pb_60 {
    padding-bottom: 60px !important;
  }

  .tb_pb_65 {
    padding-bottom: 65px !important;
  }

  .tb_pb_70 {
    padding-bottom: 70px !important;
  }

  .tb_pb_75 {
    padding-bottom: 75px !important;
  }

  .tb_pb_80 {
    padding-bottom: 80px !important;
  }

  .tb_pb_85 {
    padding-bottom: 85px !important;
  }

  .tb_pb_90 {
    padding-bottom: 90px !important;
  }

  .tb_pb_95 {
    padding-bottom: 95px !important;
  }

  .tb_pb_100 {
    padding-bottom: 100px !important;
  }

  .tb_pl_5 {
    padding-left: 5px !important;
  }

  .tb_pl_10 {
    padding-left: 10px !important;
  }

  .tb_pl_15 {
    padding-left: 15px !important;
  }

  .tb_pl_20 {
    padding-left: 20px !important;
  }

  .tb_pl_25 {
    padding-left: 25px !important;
  }

  .tb_pl_30 {
    padding-left: 30px !important;
  }

  .tb_pl_35 {
    padding-left: 35px !important;
  }

  .tb_pl_40 {
    padding-left: 40px !important;
  }

  .tb_pl_45 {
    padding-left: 45px !important;
  }

  .tb_pl_50 {
    padding-left: 50px !important;
  }

  .tb_pl_55 {
    padding-left: 55px !important;
  }

  .tb_pl_60 {
    padding-left: 60px !important;
  }

  .tb_pl_65 {
    padding-left: 65px !important;
  }

  .tb_pl_70 {
    padding-left: 70px !important;
  }

  .tb_pl_75 {
    padding-left: 75px !important;
  }

  .tb_pl_80 {
    padding-left: 80px !important;
  }

  .tb_pl_85 {
    padding-left: 85px !important;
  }

  .tb_pl_90 {
    padding-left: 90px !important;
  }

  .tb_pl_95 {
    padding-left: 95px !important;
  }

  .tb_pl_100 {
    padding-left: 100px !important;
  }
}

.float:before,
.float:after {
  content: " ";
  display: table;
}

.float:after {
  clear: both;
}

.left-box {
  float: left !important;
}

.right-box {
  float: right !important;
}

@media only screen and (max-width: 896px) {
  .float>.left-box {
    float: none !important;
    width: 100% !important;
  }

  .float>.right-box {
    float: none !important;
    width: 100% !important;
  }
}

.hover-all {
  position: relative;
}

.hover-all>a {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  font-size: 0;
}

.fade a,
a.fade {
  text-decoration: none !important;
}

.fade {
  transition: 0.3s;
}

.fade:hover {
  opacity: 0.7;
}

.text_c {
  text-align: center !important;
}

.text_l {
  text-align: left !important;
}

.text_r {
  text-align: right !important;
}

@media only screen and (max-width: 896px) {
  .text_c_tb {
    text-align: center !important;
  }

  .text_l_tb {
    text-align: left !important;
  }

  .text_r_tb {
    text-align: right !important;
  }
}

.br_sp,
.sp {
  display: none !important;
}

.br_pc,
.pc {
  display: block !important;
}

@media screen and (max-width:896px) {

  .br_sp,
  .sp {
    display: block !important;
  }

  .br_pc,
  .pc {
    display: none !important;
  }
}

.w100 {
  width: 100% !important;
}

/* --------------------------------------------- */
/* ↑グローバルパーツ */
/* --------------------------------------------- */

/* SP表示 */

/* ===== トップ お部屋 横並びカード ===== */
.room-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.room-card-item {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  background: #fff;
}

.room-card-img {
  overflow: hidden;
}

.room-card-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.room-card-img img:hover {
  transform: scale(1.03);
}

.room-card-info {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.room-card-en {
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: #212227;
  margin: 0 0 4px;
  font-family: 'Georgia', serif;
}

.room-card-name {
  font-size: 2.2rem;
  color: #5C4E22;
  margin: 0 0 10px;
  line-height: 1.3;
}

.room-card-divider {
  width: 40px;
  height: 2px;
  background: var(--accent-base);
  margin-bottom: 14px;
}

.room-card-dl {
  margin: 0 0 14px;
}

.room-card-dl>div {
  display: flex;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid #E5E4D5;
  font-size: 1.5rem;
}

.room-card-dl>div:first-child {
  border-top: 1px solid #E5E4D5;
}

.room-card-dl dt {
  width: 92px;
  flex-shrink: 0;
  color: #212227;
  font-weight: bold;
  font-size: 1.5rem;
}

.room-card-dl dd {
  color: #333;
  line-height: 1.6;
}

.room-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.room-card-tags span {
  display: inline-block;
  padding: 5px 14px;
  background: #E5E4D5;
  color: #3A3B42;
  font-size: 1.5rem;
  border-radius: 0;
  border: 1px solid #CCC9B3;
  letter-spacing: 0.05em;
}

.room-card-btn {
  margin: auto 0 0;
}

.room-card-btn p {
  margin: 0;
}

@media screen and (max-width: 896px) {
  .room-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .room-card-img img {
    height: 240px;
  }

  .room-card-info {
    padding: 28px 20px;
  }

  .room-card-name {
    font-size: 2.2rem;
  }
}

/* ===== お部屋 スペックテーブル（小） ===== */

/* ===== お部屋 設備テーブル ===== */
.room-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
  margin: 0 0 40px;
  border-top: 1px solid #D6D4C2;
}

.room-table tr {
  border-bottom: 1px solid #D6D4C2;
}

.room-table tr:last-child th,
.room-table tr:last-child td {
  border-bottom: none;
}

.room-table th {
  width: 220px;
  padding: 16px 20px;
  background: #E5E4D5;
  color: #3A3B42;
  font-weight: bold;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}

.room-table th i {
  color: #212227;
  margin-right: 8px;
  font-size: 1.5rem;
}

.room-table td {
  padding: 16px 24px;
  vertical-align: middle;
  line-height: 1.8;
  color: #333;
}

/* ===== お部屋ページ テーブル レスポンシブ ===== */
@media screen and (max-width: 896px) {

  /* 共通設備テーブル（room-table） */
  .room-table thead,
  .room-table tbody,
  .room-table tr,
  .room-table th,
  .room-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .room-table th {
    padding: 10px 14px;
    white-space: normal;
    border-bottom: none;
    font-size: 1.5rem;
    word-break: keep-all;
    min-width: unset;
    width: 100% !important;
  }

  .room-table th i {
    vertical-align: middle;
    margin-right: 6px;
  }

  .room-table td {
    padding: 10px 14px 16px;
    border-bottom: 1px solid #D6D4C2;
    font-size: 1.5rem;
  }

  .room-table tr:last-child td {
    border-bottom: 2px solid #212227;
  }

  /* 部屋スペックテーブル（クラスなし） */

  .room-table tr:first-child td {
    border-top: none;
  }

  .room-table tr:last-child th {
    border-bottom: none;
  }
}

/* ===== MV シンプルスライダー ===== */
.mv-slider-wrap {
  position: relative;
}

.mv-slider-main .mv-slide-item img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

.mv-prev,
.mv-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: opacity 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-prev {
  left: 20px;
}

.mv-next {
  right: 20px;
}

.mv-prev:hover,
.mv-next:hover {
  opacity: 0.7;
}

@media screen and (max-width: 896px) {
  .mv-slider-main .mv-slide-item img {
    height: 260px;
  }

  .mv-prev,
  .mv-next {
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .mv-prev {
    left: 10px;
  }

  .mv-next {
    right: 10px;
  }
}

/* ===== 各魅力項目 サムネイル付きスライダー ===== */
.feature-slider-main .feature-slide-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.feature-slider-main .feature-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-slider-thumb {
  position: relative;
  padding: 0 28px;
  margin-top: 6px;
}

.feature-slider-thumb .feature-thumb-item {
  padding: 0 3px;
  cursor: pointer;
  outline: none;
}

/* サムネイルが3枚以下（矢印なし）の場合：矢印ありと同じ大きさ（幅1/3）で均等表示 */
.feature-slider-thumb:not(.has-arrows) .slick-track {
  display: flex !important;
  transform: none !important;
  width: auto !important;
  float: none;
}

.feature-slider-thumb:not(.has-arrows) .slick-slide {
  width: 33.3333% !important;
  flex: 1 1 0;
}

/* サムネイル画像：横3：縦2で表示（はみ出た部分はトリミング）
   ※スライダーは .feature-thumb-item 自体に .slick-slide / .slick-current が付きます */
.feature-slider-thumb .feature-thumb-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover !important;
  display: block;
  border: 2px solid transparent;
  opacity: 0.55;
  transition: border-color 0.2s, opacity 0.2s;
}

.feature-slider-main {
  overflow: hidden;
}

.feature-slider-thumb .feature-thumb-item.slick-current img {
  border-color: #212227 !important;
  opacity: 1 !important;
}

.feature-slider-thumb .feature-thumb-item:hover img {
  opacity: 0.85;
}

@media screen and (max-width: 896px) {

  /* サムネイルは枠いっぱいに3等分し、間隔を6pxにそろえる（比率は上の 3:2 のまま） */
  .feature-slider-thumb {
    padding: 0 24px;
  }

  /* 矢印が出ない（3枚以下）ときは左右の矢印用の余白をなくし、メイン画像と端を揃える */
  .feature-slider-thumb:not(.has-arrows) {
    padding: 0;
  }

  .feature-slider-thumb:not(.has-arrows) .slick-list {
    margin: 0 -3px;
  }

  .feature-slider-thumb .feature-thumb-item {
    padding: 0 3px;
  }
}

/* ===== 魅力項目 サムネイル矢印 ===== */
.ft-thumb-prev,
.ft-thumb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 24px;
  height: 24px;
  background: rgba(181, 168, 129, 0.40);
  border: 1px solid #212227;
  border-radius: 0;
  color: #212227;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}

.ft-thumb-prev {
  left: 0;
}

.ft-thumb-next {
  right: 0;
}

.ft-thumb-prev:hover,
.ft-thumb-next:hover {
  background: #212227;
  color: #fff;
}

/* ===== FAQ アコーディオン ===== */
.faq-wrap {
  max-width: 800px;
  margin: 40px auto 0;
}

.faq-group {
  margin-bottom: 48px;
}

.faq-category {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  background: #212227;
  border-radius: 0;
  padding: 8px 24px;
  margin-bottom: 16px;
  display: inline-block;
}

.faq-item {
  border-bottom: 1px solid #D6D4C2;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 4px;
}

.faq-item:first-of-type {
  border-top: 1px solid #D6D4C2;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.5rem;
  color: #5C4E22;
  line-height: 1.6;
}

.faq-q:hover {
  background: #E5E4D5;
}

.faq-q-label {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: transparent; /* Q は文字だけ */
  color: #212227;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: 'Georgia', serif;
}

.faq-q-text {
  flex: 1;
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #212227;
  border-radius: 0;
  position: relative;
  transition: background 0.2s;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #212227;
  transform: translate(-50%, -50%);
}

.faq-icon::before {
  width: 10px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 10px;
  transition: transform 0.25s, opacity 0.25s;
}

.faq-q[aria-expanded="true"] .faq-icon {
  background: #212227;
}

.faq-q[aria-expanded="true"] .faq-icon::before,
.faq-q[aria-expanded="true"] .faq-icon::after {
  background: #fff;
}

.faq-q[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 16px;
  background: #EDECE2;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333;
}

.faq-a-label {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #212227; /* A は黒地に白抜き文字 */
  color: #fff;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: 'Georgia', serif;
}

.faq-a-text {
  flex: 1;
  padding-top: 6px;
}

@media screen and (max-width: 896px) {
  .faq-q {
    padding: 16px 12px;
    font-size: 1.5rem;
  }

  .faq-a {
    padding: 0 12px 16px;
    font-size: 1.5rem;
  }
}

/* FAQ 初期状態：Aを非表示 */
.faq-a {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-q[aria-expanded="true"]+.faq-a {
  display: flex;
  max-height: 500px;
}

/* ========================================
   お部屋ページ
======================================== */

/* 部屋カード */
.room-card {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 40px;
  margin-bottom: 60px;
}

/* 部屋名 */
.room-name {
  font-size: 2.6rem;
  font-weight: 900;
  color: #5C4E22;
  margin: 8px 0 28px;
  padding-bottom: 16px;
}


/* レイアウト：スライダー左・情報右 */
.room-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* スライダーエリア */
.room-slider-area {
  flex: 0 0 48%;
  min-width: 0;
}

/* メインスライダー：4:3比率（::beforeで高さ確保、slick-listを上書き） */
.room-slider-main {
  position: relative;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}

.room-slider-main::before {
  content: '';
  display: block;
  padding-top: 66.6667%; /* 2/3 = 3:2 */
}

.room-slider-main .slick-list {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.room-slider-main .slick-track,
.room-slider-main .slick-slide {
  height: 100%;
}

.room-slider-main .room-slide-item {
  height: 100%;
}

.room-slider-main .room-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サムネイル */
.room-slider-thumb {
  margin-top: 10px;
  position: relative;
  padding: 0;
}

/* 矢印あり（4枚以上）のときだけ左右パディング */
.room-slider-thumb.has-arrows {
  padding: 0 32px;
}

.room-slider-thumb .room-thumb-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2; /* 3:2 */
  object-fit: cover !important;
  display: block;
  border: 2px solid transparent;
  border-radius: 0;
  opacity: 0.55;
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
}

.room-slider-thumb .slick-slide.slick-current .room-thumb-item img,
.room-slider-thumb .slick-current .room-thumb-item img {
  border-color: #212227 !important;
  opacity: 1 !important;
}

/* サムネイル矢印 */
.room-thumb-prev,
.room-thumb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: #212227;
  color: #fff;
  border: none;
  border-radius: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
}

.room-thumb-prev:hover,
.room-thumb-next:hover {
  background: #3A3B42;
}

.room-thumb-prev {
  left: 0;
}

.room-thumb-next {
  right: 0;
}

/* 部屋情報エリア */
.room-info {
  flex: 1;
  min-width: 0;
}

/* スペックリスト */
.room-spec-list {
  margin: 0 0 20px;
  padding: 0;
}

.room-spec-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #D6D4C2;
}

.room-spec-item:first-child {
  border-top: 1px dashed #D6D4C2;
}

.room-spec-item dt {
  font-size: 1.5rem;
  font-weight: 700;
  color: #212227;
  white-space: nowrap;
  min-width: 110px;
}

.room-spec-item dd {
  font-size: 1.5rem;
  color: #444;
  margin: 0;
}

.msg span,
.room-desc span {
  display: inline-block;
}

.room-desc {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #555;
  margin-top: 16px;
}

/* セクション見出し */
.room-section {
  margin-bottom: 60px;
}

.room-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 3px solid #212227;
}

.room-section-en {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  background: #212227;
  padding: 4px 14px;
  border-radius: 0;
  white-space: nowrap;
}

.room-section-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #5C4E22;
  margin: 0;
}

.room-section-title a {
  color: inherit;
  text-decoration: none;
}

/* 設備グリッド */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.facility-card {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.facility-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.13);
}

.facility-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* 3:2 */
  object-fit: cover;
  display: block;
}

.facility-body {
  padding: 16px;
}

.facility-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: #5C4E22;
  margin: 0 0 4px;
}

.facility-name i {
  color: #212227;
  margin-right: 6px;
}

.facility-note {
  display: inline-block;
  font-size: 1.5rem;
  color: #fff;
  background: #212227;
  border-radius: 0;
  padding: 2px 10px;
  margin-bottom: 10px;
}

.facility-body p:last-child {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

/* スマホ対応 */
@media screen and (max-width: 1024px) {
  .room-card {
    padding: 28px 24px;
  }

  .room-layout {
    flex-direction: column;
    gap: 24px;
  }

  .room-slider-area {
    flex: none;
    width: 100%;
  }

  .facility-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 896px) {
  .room-card {
    padding: 20px 16px;
    border-radius: 0;
    margin-bottom: 40px;
  }

  .room-name {
    font-size: 2rem;
  }

  .room-slider-thumb .room-thumb-item img {
    height: auto !important;
  }

  .room-section-title {
    font-size: 1.8rem;
  }

  .facility-grid {
    gap: 16px;
  }
}

/* ========================================
   アーカイブ一覧（withdog・周辺観光等）
======================================== */
.archive_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0;
  margin: 40px 0 60px;
  list-style: none;
}

.archive_list li a {
  display: block;
  height: 100%; /* カードの高さを揃える */
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.archive_list li a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.archive_list li img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* 3:2 */
  object-fit: cover;
  display: block;
}

/* カード内の文字エリア（画像の下） */
.archive_list li .pickup-body {
  padding: 14px 16px 18px;
}

.archive_list li .pickup-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #5C4E22;
  margin: 0;
  line-height: 1.5;
}

.archive_list li .pickup-desc {
  margin: 8px 0 0;
  font-size: 1.5rem;
  line-height: 1.7;
  color: #555;
}

@media screen and (max-width: 896px) {
  .archive_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .archive_list li img {
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .archive_list {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   NEWS 一覧（日付＋タイトルリンク）
======================================== */
.news_archive_list {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

.news_archive_item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 20px 4px;
  border-bottom: 1px solid #E5E4D5;
}

.news_archive_item:first-child {
  border-top: 1px solid #E5E4D5;
}

.news_archive_date {
  flex-shrink: 0;
  color: #212227;
  font-weight: 700;
  font-size: 1.5rem;
  white-space: nowrap;
}

.news_archive_cate {
  flex-shrink: 0;
  font-size: 1.5rem;
  background: var(--bg-tint);
  color: #5C4E22; /* カテゴリーの文字：茶色 */
  border: 1px solid #CCC9B3;
  border-radius: 0;
  padding: 2px 12px;
}

.news_archive_title {
  flex: 1 1 auto;
  min-width: 0;
  color: #212227;
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1.6;
  transition: color 0.2s;
}

.news_archive_title:hover {
  color: #212227;
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  .news_archive_title {
    flex-basis: 100%;
  }
}

/* ========================================
   NEWS 単一記事
======================================== */
.container article.type-news {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 0 48px;
}

.single_ttl {
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E4D5;
}

.single_ttl .date {
  color: #212227;
  font-weight: 700;
  font-size: 1.5rem;
  margin-right: 12px;
}

.single_ttl .cate {
  display: inline-block;
  font-size: 1.5rem;
  background: var(--bg-tint);
  color: #5C4E22; /* カテゴリーの文字：茶色 */
  border: 1px solid #CCC9B3;
  border-radius: 0;
  padding: 2px 12px;
}

.single_ttl h1 {
  margin-top: 16px;
  font-size: 2.4rem;
  line-height: 1.5;
  color: #212227;
}

.single_content {
  font-size: 1.5rem;
  line-height: 1.9;
  color: #333;
}

.single_content p {
  margin: 0 0 1.5em;
}

.single_content h2 {
  font-size: 2rem;
  line-height: 1.4;
  margin: 2em 0 0.8em;
  padding-left: 12px;
  border-left: 4px solid #212227;
}

.single_content h3 {
  font-size: 1.7rem;
  margin: 1.6em 0 0.6em;
  color: #3A3B42;
}

.single_content img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: 0;
}

.single_content ul,
.single_content ol {
  margin: 0 0 1.5em;
  padding-left: 1.5em;
}

.single_content ul li {
  list-style: disc;
  margin-bottom: 0.4em;
}

.single_content ol li {
  list-style: decimal;
  margin-bottom: 0.4em;
}

.single_content a {
  color: #212227;
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  .single_ttl h1 {
    font-size: 2rem;
  }

  .single_content {
    font-size: 1.5rem;
  }
}
/* -------------------------------------------------
   湯導-yudo- 用の追加スタイル
------------------------------------------------- */

/* 客室が1タイプのときのカード配置（TOPページ Room セクション）
   PC：画像を左・表を右に横並び／スマホ（896px以下）：縦並び */
.room-cards--single {
  grid-template-columns: minmax(0, 1000px);
  justify-content: center;
}

.room-cards--single .room-card-item {
  flex-direction: row;
}

.room-cards--single .room-card-img {
  flex: 0 0 48%;       /* 画像の幅（カード全体に対する割合） */
}

.room-cards--single .room-card-img img {
  height: 100%;
  min-height: 380px;
  object-position: right;
}

.room-cards--single .room-card-info {
  flex: 1 1 auto;
  padding: 36px 40px;
}

@media screen and (max-width: 896px) {
  .room-cards--single .room-card-item {
    flex-direction: column;
  }

  .room-cards--single .room-card-img {
    flex: none;
  }

  .room-cards--single .room-card-img img {
    height: 240px;
    min-height: 0;
  }

  .room-cards--single .room-card-info {
    padding: 28px 20px;
  }
}

/* 見出し左右の線（コンセプト帯） */
.top_msg h2.btm_border::after,
.top_msg h2.btm_border::before {
  background: var(--accent-base);
}

/* コンセプト帯の本文 */
.top_msg p {
  color: var(--base-font-color);
}

/* メインビジュアルの見出しは写真の上にのるため、影で可読性を確保 */
.top_slid h1 {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Roomセクション内の白いカード：英字ラベル・表の文字色 */
.top_room .room-card-en {
  color: var(--accent-base);
}

.top_room .room-card-info p,
.top_room .room-card-info dd {
  color: var(--base-font-color);
}

/* 元の定義が見つからなかったため、ここで指定 */
.top_faq {
  background: var(--bg-soft);
}

/* -------------------------------------------------
   周辺観光の詳細ページ（single-s-around.php）
------------------------------------------------- */
.spot-single {
  padding-top: 40px;
  padding-bottom: 80px;
}

.spot-body {
  max-width: 800px;
  margin: 0 auto;
}

/* メイン画像：3:2 */
.spot-hero {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  margin-bottom: 32px;
}

.spot-label {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--primary);
  padding: 4px 16px;
  margin-bottom: 12px;
}

.spot-title {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.5;
  color: #5C4E22;
  margin: 0 0 24px;
}

.spot-content {
  font-size: 1.6rem;
  line-height: 2;
  color: var(--base-font-color);
}

.spot-content p {
  margin: 0 0 1.5em;
}

.spot-content h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: #5C4E22;
  margin: 40px 0 16px;
}

.spot-content ul {
  list-style: disc;
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}

.spot-content a {
  color: var(--base-link-color);
  text-decoration: underline;
  word-break: break-all;
}

.spot-content .room-table {
  margin-top: 32px;
}

/* 「※掲載内容は〜」の注記 */
.spot-content .spot-note {
  margin-top: 16px;
  font-size: 1.5rem;
  color: #6B665E;
}

.spot-map iframe {
  width: 100%;
  height: 450px;
  border: 0;
  display: block;
}

@media screen and (max-width: 896px) {
  .spot-title {
    font-size: 2.2rem;
  }

  .spot-map iframe {
    height: 300px;
  }
}

/* ========================================
   ループギャラリー（サウナページ下部）
   写真が横に流れ続け、クリックで拡大表示します。
   流れる速さは animation の秒数（大きいほどゆっくり）で調整できます。
   ======================================== */
.loop-gallery {
  overflow: hidden;
  width: 100%;
  margin-top: 60px;
}

.loop-gallery-track {
  display: flex;
  width: max-content;
  animation: loopGallery 40s linear infinite;
}

.loop-gallery-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loop-gallery-list li {
  width: 360px;
  flex-shrink: 0;
}

.loop-gallery-list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.3s;
}

.loop-gallery-list img:hover {
  opacity: 0.8;
}

@keyframes loopGallery {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .loop-gallery-track {
    animation-duration: 120s;
  }
}

/* 拡大表示（モーダル） */
.gallery-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #fff;
}

.gallery-modal.is-open {
  display: flex;
}

body.gallery-modal-open {
  overflow: hidden;
}

.gallery-modal-main {
  position: relative;
  flex: 1 1 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #EDECE2;
}

.gallery-modal-main img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 100px);
  width: auto;
  height: auto;
}

.gallery-modal-prev,
.gallery-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 3.2rem;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.gallery-modal-prev { left: 50px; }
.gallery-modal-next { right: 50px; }

.gallery-modal-side {
  flex: 1 1 35%;
  padding: 62px 60px 40px;
  overflow-y: auto;
}

.gallery-modal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery-modal-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s;
}

.gallery-modal-thumbs img:hover,
.gallery-modal-thumbs img.is-current {
  opacity: 1;
}

.gallery-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #212227;
  font-size: 3.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

@media screen and (max-width: 896px) {
  .loop-gallery {
    margin-top: 40px;
  }

  .loop-gallery-list li {
    width: 240px;
  }

  .gallery-modal.is-open {
    flex-direction: column;
  }

  .gallery-modal-main {
    flex: 0 0 auto;
    padding: 64px 16px 16px;
  }

  .gallery-modal-main img {
    max-height: 55vh;
  }

  .gallery-modal-prev { left: 16px; }
  .gallery-modal-next { right: 16px; }

  .gallery-modal-side {
    flex: 1 1 auto;
    padding: 16px;
  }
}

/* サウナページ冒頭のリード文（大きめの1行目） */
.msg .msg-lead {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--secondary);
}

@media screen and (max-width: 896px) {
  .msg .msg-lead {
    font-size: 1.9rem;
  }
}

/* ========================================
   サウナページ：サウナ／水風呂のカード
   PCは2列、スマホ（896px以下）は縦1列に並びます。
   ======================================== */
.sauna-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.sauna-cards .room-card {
  margin-bottom: 0;
  padding: 32px;
}

.sauna-cards .room-name {
  font-size: 2.2rem;
  text-align: center;
  margin: 0 0 24px;
  padding-bottom: 0;
}

/* 見出しが1行と2行でも写真の位置がそろうように高さを確保 */
@media screen and (min-width: 897px) {
  .sauna-cards .room-name {
    min-height: 3.4em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.sauna-cards .room-slider-area {
  flex: none;
  width: 100%;
}

@media screen and (max-width: 896px) {
  .sauna-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sauna-cards .room-card {
    padding: 24px 20px;
  }

  .sauna-cards .room-name {
    font-size: 1.9rem;
  }
}

/* ========================================
   サウナページ：サウナの過ごし方（4ステップ）
   PCは4列、タブレットは2列、スマホは1列に並びます。
   ======================================== */
.sauna-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0;
  padding: 60px 0;
}

.sauna-step {
  text-align: center;
}

/* 丸い見出し：正円（幅＝高さ）。線の太さは border-width で調整します */
.sauna-step-circle {
  width: 168px;
  height: 168px;
  margin: 0 auto 18px;
  padding: 12px;
  box-sizing: border-box;
  border: 0.5px solid var(--secondary);
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sauna-step-circle .en {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--accent-base);
}

.sauna-step-circle .ja {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--secondary);
}


.sauna-step-title {
  margin: 0 0 12px;
  padding-bottom: 12px;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--primary);
  border-bottom: 1px solid var(--accent-base);
  /* 文章の途中で不自然に折り返さないように */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.sauna-step-text {
  margin: 0;
  font-size: 1.5rem;
  text-align: left;
}

@media screen and (max-width: 1024px) {
  .sauna-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media screen and (max-width: 560px) {
  .sauna-steps {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0;
  }

  .sauna-step-circle {
    width: 150px;
    height: 150px;
  }

  .sauna-step-circle .ja {
    font-size: 1.8rem;
  }

  .sauna-step-title {
    font-size: 1.7rem;
  }
}

/* ========================================
   お食事ページ
   ======================================== */
.meal-label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 16px;
  background: var(--primary);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.meal-catch {
  margin: 0 0 20px;
  padding-bottom: 14px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--secondary);
  border-bottom: 1px solid var(--accent-base);
}

.meal-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.meal-list li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 1.6rem;
  border-bottom: 1px dashed #D6D4C2;
}

.meal-list li::before {
  content: "";
  position: absolute;
  top: 1.1em;
  left: 4px;
  width: 6px;
  height: 6px;
  background: var(--accent-base);
}

@media screen and (max-width: 896px) {
  .meal-catch {
    font-size: 1.7rem;
  }

  .meal-list li {
    font-size: 1.5rem;
    padding: 8px 0 8px 20px;
  }
}