@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================
  1. Common
  2. Header
  3. Button
  4. Footer
  5. Page
     5-1.トップページ
     5-2.お部屋
     5-3.お食事
   ========================================= */

/* =========================================
   1.Common
   ========================================= */

/* 共通変数 */
:root{
  --color-white: #FFFFFF;
  --color-orange:#ed5d1d;
  --color-orange-hover:#f07843;
  --color-light-gray:#c4d3db;
  --color-black:#333333;
  --color-dark-gray:#484848;
  --color-moderate-gray:#949494;
  
  --color-wood-brown: #2b2321;
  --color-light-brown: #4A3A2A;
  --color-dark-navy: #1A1E24;
  --color-off-white: #f8f8f8;
  --color-accent-green: #1d6464;
  --color-deep-green: #0f3a3a;
  --color-gold: #c5a56f;
  --color-light-gold: #d8c9a7;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-shadow: rgba(0, 0, 0, 0.15);

  /* フォント変数（使い回しやすい） */
  --font-ja: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Montserrat", var(--font-ja);
}

/* 全体の基本フォント */
body{
  font-family: var(--font-ja);
  color: var(--color-white);
}

/* 英字を見出し等で使いたいなら（例） */
.is-en{
  font-family: var(--font-en);
  letter-spacing: 0.06em;
}

/* コンテンツヘッダータイトル */
.c-pageTitle {
  font-size: 2em;
  letter-spacing: 0.1rem;
  text-shadow: 2px 2px 3px rgba(31, 31, 37, 1);
}

.l-topTitleArea__body{
  text-align: center;
}

.post_content h2{
  font-size: 2.2em;
}

.c-categoryList__link{
  background-color: var(--color-light-gray);
  color: var(--color-main);
}

.sp-only{
  display: none;
}

@media (max-width: 780px) {
  .sp-only{
    display: block;
  }
}

/* =========================================
   2.Header
   ========================================= */

/* =========================
   ヘッダー　CTA
   PC: right end / SP: drawer top
========================= */
.l-header__gnav, .l-fixHeader__inner .l-fixHeader__gnav{
  width: 100%;
}
/* CTA見た目 */
/* li（親）を縦中央に */
.c-gnav .menu-cta{
  display: flex;
  align-items: center;  /* ← 縦中央 */
}

/* a（子）は高さ100%にしない */
.c-gnav .menu-cta > a{
  height: auto !important;
  top: auto;
  line-height: 1.2;
  padding: 16px 40px;   /* ボタンの高さはpaddingで作る */
  border-radius: 20px;  /* 角丸 */
  background: #ed5d1d;
  color: #fff !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.c-gnav .menu-cta > a::after{
  display: none !important;
}
.menu-cta > a:hover{
  opacity: .85;
}
.c-gnav{
  display: flex;        /* もし既にflexならOK */
  align-items: center;
}
/* 1) 横並びを ul に任せる（SWELLが既にflexでも上書きOK） */
#gnav .c-gnav, .l-fixHeader__inner .l-fixHeader__gnav .c-gnav{
  display: flex;
  align-items: center;
  width: 100%;
  gap: 28px; /* お好みで */
}
/* 2) CTAだけ右に飛ばす */
#gnav .c-gnav .menu-cta, .l-fixHeader__inner .l-fixHeader__gnav .c-gnav .menu-cta{
  margin-left: auto;
}

/* 3) 左側にも同じだけ“余白枠”を作って、メニュー群を中央に寄せる */
#gnav .c-gnav::before{
  content: "";
  display: block;
  width: var(--gnav-cta-space, 160px); /* CTAの横幅に合わせて微調整 */
  flex: 0 0 auto;
}

.l-fixHeader__gnav .c-gnav::before{
  content: "";
  display: block;
  width: var(--gnav-cta-space, 160px); /* CTAの横幅に合わせて微調整 */
  flex: 0 0 auto;
}

.l-fixHeader__logo{
  padding: 6px 0;
}

/* --- PC：右端に寄せる（横並びメニュー想定） --- */
@media (min-width: 960px){
  /* メニュー全体がflexのとき、CTAだけ最後尾＋右寄せを強める */
  .l-header__menu .menu-cta{
    margin-left: auto;
  }
  .-series .l-header__logo {
    padding: 6px 0;
  }
}

/* --- SP：ドロワー最上部へ --- */
@media (max-width: 959px){
  /* ドロワー内のメニューリストがflex/columnのとき */
  .l-drawer .menu-cta{
    order: -1;
    margin: 10px 0 14px;
  }
  /* ドロワー内はボタンを横幅いっぱいにする（好みで） */
  .l-drawer .menu-cta > a{
    width: 100%;
    justify-content: center;
  }
}


/* =========================================
   3.Button
   ========================================= */

/* アイコンを消す */
.icon-chevron-small-up:before, .icon-chevron-up:before {
  content: none;
}

/* ボーダー、影を消す */
.c-fixBtn {
  border: none;
  box-shadow: none;
  overflow: visible; /* ラベル表示対応 */
  height: 90px;
  width: 90px;
}

/* ラベルの位置 */
.c-fixBtn__label {
  position: absolute;
  bottom: -1em;
}

/* hoverの背景を消す */
.c-fixBtn:hover {
  background-color: transparent !important;
}

/* 画像を配置 */
#pagetop.c-fixBtn .c-fixBtn__icon {
  display: block;
  background-image: url(/wp-content/uploads/2026/02/top.png); /* 画像のパス */
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.icon-chevron-up:before {
  visibility: collapse;
}

/* ボタン */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 4px 35px;
  border: 1px solid var(--color-white);
  border-radius: 25px;
  background: transparent;
  color: var(--color-white);
  line-height: 40px;
  transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.button-primary:hover {
/*  transform: translateY(-2px);*/
  opacity: 0.92;
  background: var(--color-white);
  color: var(--color-black) !important;
}

/* 追従バナー・初期は隠す */
.follow-banner{
  position: fixed;
  right: 0;
  bottom: 140px;
  z-index: 20;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* SWELLのスクロール状態と同期して表示（html/bodyどっちでも拾う） */
html[data-scrolled="true"] .follow-banner,
body[data-scrolled="true"] .follow-banner{
  opacity: 0.9;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.follow-banner a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff;
  background-color: var(--color-orange);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1.5em 1em;
  border-radius: 10px 0 0 10px;
  transition: opacity 0.25s;
  writing-mode: vertical-rl;
  text-orientation: upright; 
}

.follow-banner a:hover {
  background-color: var(--color-orange-hover);
}

.follow-banner .swl-inline-icon::after {
  left: 50%;
  transform: translateX(-50%);
}

.c-widget__title.-footer{
  visibility: collapse;
}

#before_footer_widget {
  margin: 0;
}

#before_footer_widget > .l-container,
#before_footer_widget .c-widget {
  margin: 0;
  padding: 0;
}

/* 追従バナー・スマホは非表示 */
@media screen and (max-width: 599px) {
  .follow-banner {
    display: none;
  }
}

/* =========================================
   4.Footer
   ========================================= */

.footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2.5rem;
  box-sizing: border-box;
  color: #fff;
}

.footer-main__col {
  flex: 1 1 200px;
  min-width: 200px;
}

/* 左の紹介カラムは少し広めに */
.footer-main__col--brand {
  flex: 1.3 1 240px;
}

/* 見出し */
.footer-main__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

/* テキスト */
.footer-main__text {
  font-size: 0.9rem;
  line-height: 1.9;
  margin: 0 0 0;
}
.footer-sub__text {
  font-size: 0.8rem;
  line-height: 1.9;
  margin: 1rem 0 0;
}

/* メニューリスト */
.footer-main__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.footer-main__list li + li {
  margin-top: 0.5rem;
}

.footer-main__list a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, opacity .2s;
}

.footer-main__list a:hover {
  border-color: rgba(255,255,255,.8);
  opacity: .9;
}

/* お問い合わせ用：アイコン＋テキスト横並び */
.footer-main__list--contact li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-main__icon {
  width: 1.2rem;
  display: inline-block;
}

/* SNSアイコン */
.footer-main__sns {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.footer-main__sns a {
  font-size: 1.3rem;
  color: #fff;
  transition: opacity .2s, transform .2s;
}

.footer-main__sns a:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* スマホ対応 ───────── */

@media (max-width: 768px) {
  .footer-main {
    padding: 2.5rem 1.5rem 2rem;
    gap: 2rem;
  }

  .footer-main__col,
  .footer-main__col--brand {
    flex: 1 1 100%;
    min-width: 100%;
  }
  
  .footer-main__title {
    font-size: 1.3rem;
  }
}

/* スマホ固定フッターメニュー */
/* SWELLが自動出力する空のi要素を消す */
.menu_list li a > i {
  display: none !important;
}

/* スマホ固定フッターメニュー全体 */
.menu_list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

/* SWELLが自動出力する空のi要素を消す */
.menu_list li a > i:empty {
  display: none;
}

/* Font Awesome アイコン共通 */
.menu-reserve a::before,
.menu-access a::before,
.menu-faq a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  font-size: 20px;
  line-height: 1;
}

/* 個別アイコン */
.menu-reserve a::before {
  content: "\f073"; /* calendar */
}

.menu-access a::before {
  content: "\f3c5"; /* map-marker */
}

.menu-faq a::before {
  content: "\f059"; /* circle-question */
}


/* =========================================
   5.Page
   ========================================= */
/* =========================================
   5-3.食事
   ========================================= */
.meal-anchor-buttons .swell-block-columns__inner {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.meal-anchor-buttons .swell-block-column {
  width: auto !important;
  flex: 0 0 auto;
  margin: 0 !important;
}

.meal-anchor-buttons .swell-block-button {
  margin: 0;
}

.meal-anchor-buttons .swell-block-button__link {
  min-width: 220px;
  justify-content: center;
}

.is-style-btn_line a{
  color: var(--color-white, var(--color_main)) !important;
  transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.is-style-btn_line a:hover{
  background-color: var(--color-white) !important;
  color: #666 !important;
}


@media (max-width: 767px) {
  .meal-anchor-buttons .swell-block-columns__inner {
    gap: 16px;
  }

  .meal-anchor-buttons .swell-block-column {
    flex: 0 1 calc(50% - 8px);
    width: auto !important;
  }

  .meal-anchor-buttons .swell-block-button__link {
    width: 100%;
    justify-content: center;
  }
}