/* =============================
   共通CSS（全ページ） 
   フォント・タイポグラフィ
============================= */

/* -----------------------------
   最小リセットCSS
----------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* -----------------------------
   基本フォント設定
----------------------------- */
@font-face {
    font-family: 'Cormorant';
    src: url('../../fonts/Cormorant-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 700;
    /* 可変フォントの範囲 */
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('../../fonts/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}


html {
    font-size: 62.5%;
    /* 1rem = 10px換算 */
    line-height: 1.6;
}


/* 中型デバイス（タブレットなど幅～1024px） */
@media screen and (max-width: 1024px) {
    html {
        font-size: 56.25%;
        /* 約9px換算 */
    }
}

/* 小型デバイス（スマホ幅～768px） */
@media screen and (max-width: 768px) {
    html {
        font-size: 50%;
        /* 約8px換算 */
    }
}

/* 超小型デバイス（スマホ縦幅～480px） */
@media screen and (max-width: 480px) {
    html {
        font-size: 45%;
        /* 約7px換算 */
    }
}


body {
    font-family:
        'Outfit',
        'Noto Sans JP',
        /* Android / Web用 */
        'ヒラギノ角ゴ ProN W3',
        /* macOS */
        'Hiragino Kaku Gothic ProN',
        /* macOS (別名) */
        'メイリオ', 'Meiryo',
        /* Windows */
        'Yu Gothic UI', 'YuGothic',
        /* Windows 10+ */
        sans-serif;
    font-size: 1.8rem;
    /* 18px */
    color: #1e1c1c;
    background-color: #f5f5f5;
}


/* -----------------------------
   横スクロールを禁止
----------------------------- */
html,
body {
    overflow-x: hidden;
}


/* -----------------------------
   親テーマのCSSを打ち消し ※下部に余白が生まれるため
----------------------------- */
.post,
.page {
    margin: 0;
}

.img-round img,
.img-round iframe{
    border-radius: 0.75rem;
}

/* -----------------------------
   見出し h1～h6 サイズと行間
----------------------------- */
h1 {
    font-size: 3.2rem;
    line-height: 1.3;
    font-weight: 600;
}

h2 {
    font-size: 2.8rem;
    line-height: 1.35;
    font-weight: 600;
}

h3 {
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 600;
}

h4 {
    font-size: 2.0rem;
    line-height: 1.4;
    font-weight: 500;
}

h5 {
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 500;
}

h6 {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 500;
}

/* -----------------------------
   段落
----------------------------- */
p {
    margin-bottom: 2.7rem;
    /* 文字サイズ16pxなら24px */
}

/* -----------------------------
   リンク
----------------------------- */
a {
    text-decoration: none;
    color: inherit;
}

/* -----------------------------
   リンク 共通マウスホバー効果
----------------------------- */

/* マウスホバー */
a:hover {
    color: #1e1c1c;
    opacity: 0.5;
    /* 半調にする */
}

/* リンクデフォルト色 */
a:link,
a:visited {
    color: #1e1c1c;
}

/* スムーズに変化 */
a {
    transition: opacity 0.3s ease;
}

/* リンク全般のフォーカスアウトライン除去 */
a:focus {
    outline: none !important;
}

/* ロゴ画像リンクのフォーカスアウトライン除去 */
a img,
a img:focus {
    outline: none !important;
    border: none !important;
}



/* -----------------------------
   英語サブタイトル用クラス .en
----------------------------- */
.en {
    font-family: 'Cormorant', 'Times New Roman', '游明朝体', 'Yu Mincho', serif;
}

/* -----------------------------
   リスト
----------------------------- */
ul,
ol {
    list-style: none;
}

/* -----------------------------
   画像
----------------------------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------
   テーブル
----------------------------- */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -----------------------------
   ボックス調整
----------------------------- */
section,
article,
aside,
nav,
header,
footer,
main {
    display: block;
}

/* -----------------------------
   CSS出現演出
----------------------------- */
/* ページフェードイン・フェードアウト */
/* ページロード時　初期状態：透明 */
.page-fade {
    opacity: 0;
    transition: opacity var(--fade-duration) ease;
    /* 定数で速度を管理 */
}

/* ページロード時　フェードイン後 */
.page-fade.visible {
    opacity: 1;
}


/* 共通：初期非表示状態 */
.effect {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}


/* 各アニメーション初期状態 */
.effect-up {
    /* 下から上 */
    transform: translateY(15rem);
}

.effect-down {
    /* 上から下 */
    transform: translateY(-15rem);
}

.effect-left {
    /* 右から左 */
    transform: translateX(15rem);
}

.effect-right {
    /* 左から右 */
    transform: translateX(-15rem);
}

.effect-boke {
    opacity: 0;
    filter: blur(0.8rem);
    transform: translateY(15rem) scale(0.98);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.effect-boke.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

/* 表示状態 */
.effect.show {
    opacity: 1;
    transform: translateX(0) translateY(0) scaleX(1) scaleY(1);
    filter: blur(0);
}

/* -----------------------------
   ヘッダー全体 ※共通
----------------------------- */
/* 固定ヘッダー高さを変数で管理 */
:root {
    --header-height: 9rem;
    /* 固定ヘッダー高さ */
}

.zen-header {
    width: 100%;
    height: var(--header-height);
    /* 固定ヘッダー高さ */
    position: fixed;
    /* 固定ヘッダー */
    top: 0;
    right: 0;
    background-color: rgba(245, 245, 245, 0.9);
    /* 透過白 */
    z-index: 99;
    /* 他要素より前面 */
}

/* ヘッダー内の横幅調整・左右余白 */
.zen-header-inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(1rem, 5vw, 5rem);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    /* 左右配置 */
    align-items: center;
    /* 縦中央揃え */
}

/* 左側ロゴセット */
.zen-logo-set {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* ホバー時にクリック感 */
    text-decoration: none;
    /* 下線消し */
}

/* アイコンサイズ */
.zen-icon {
    width: 2.5rem;
    /* 25px相当 */
    height: 5rem;
    /* 50px相当 */
    object-fit: contain;
}

.logo-gap {
    width: 1.5rem;
    /* 15px相当 */
}

/* ロゴ画像は高さに合わせて自動調整 */
.zen-logo {
    height: 5rem;
    /* 50px相当 */
    width: auto;
    display: block;
}

/* 右側メニュー */
.zen-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    /* 少し広め */
}

.zen-nav li {
    display: flex;
    align-items: center;
    margin: 0 1rem;
    /* 左右スペース */
}

/* 区切り線 */
.zen-nav .divider {
    width: 1px;
    /* ~1px */
    height: 2rem;
    /* 20px */
    background-color: #1e1c1c;
    margin: 0 1rem;
}

/* スマホ向け調整 */
@media screen and (max-width: 480px) {
.zen-icon {
    width: auto;
    height: 4.25rem;
}

.logo-gap {
    width: 1.25rem;
}

/* ロゴ画像は高さに合わせて自動調整 */
.zen-logo {
    height: 4.25rem;
    width: auto;
}
}


/* -----------------------------
   ハンバーガーボタンとモバイルメニュー用
----------------------------- */

/* ハンバーガーボタン */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 3rem;
  height: 2.4rem;
  position: relative;
  outline: none;
  z-index: 1001;
}

.hamburger-btn:focus,
.hamburger-btn:active {
  outline: none;
}

.hamburger-btn span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #1e1c1c;
  position: absolute;
  left: 0;
  transition: all 0.2s ease;
}

.hamburger-btn span:nth-child(1) {
  top: 0;
}

.hamburger-btn span:nth-child(2) {
  top: 1rem;
}

.hamburger-btn span:nth-child(3) {
  top: 2rem;
}

.hamburger-btn.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 1rem;
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 1rem;
}

/* デスクトップ用メニュー */
.desktop-nav {
  display: block;
}

/* モバイル用メニュー */
.mobile-nav {
  display: none;
}

/* メディアクエリ：768px以下 */
@media screen and (max-width: 768px) {
  .hamburger-btn {
    display: block;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1.0);
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 1000;
  }

  .mobile-nav.active {
    transform: translateX(0);
    opacity: 1;
    box-shadow: -6px 0 12px rgba(0, 0, 0, 0.2);
  }

  .mobile-nav ul {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 0 5rem;
    margin: 0; /* 右ずれ防止 */
  }

  .mobile-nav li {
    width: 100%;
    text-align: left;
    margin: 0; /* 右ずれ防止 */
    padding: 0; /* 右ずれ防止 */
  }

  .mobile-nav .mobile-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 6.5rem;
    margin-bottom: 5rem;
    margin-left: 0;
  }

  .mobile-nav .mobile-logo img {
    height: 6.5rem;
    width: auto;
  }

  .mobile-nav .logo-gap {
    width: 1.7rem;
  }

  .mobile-nav .menu-item:not(.tel-btn-sp) {
    display: block;
    width: 100%;
    font-size: 2.1rem;
    letter-spacing: 0.1em;
    color: #1e1c1c;
    text-decoration: none;
    padding: 1rem 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
  }

  .mobile-nav .mobile-divider {
    width: 100%;
    height: 1px;
    background-color: #1e1c1c;
    margin: 0 0 1.5rem 0;
  }

  .mobile-nav .mobile-divider:nth-of-type(1),
  .mobile-nav .mobile-divider:nth-of-type(2) {
    display: none;
  }

  .mobile-nav .menu-message {
    font-size: 1.8rem;
    line-height: 1.5;
    color: #1e1c1c;
    margin: 2.0rem 0 4.0rem 0;
    text-align: left;
    padding-left: 0;
  }

  .mobile-nav .menu-message_2{
    font-size: 2.1rem;
    line-height: 1.5;
    color: #1e1c1c;
    margin: 2.0rem 0;
    text-align: left;
    padding-left: 0;
  }

  .mobile-nav .tel-btn-sp {
    display: flex;
    align-items: center;
    justify-content: center; /* ボタン内部は中央揃え */
    width: 100%;
    height: 5rem;
    background-color: #1d2088;
    border-radius: 999rem;
    text-decoration: none;
    font-weight: 400;
    gap: 1rem;
    padding: 0;
    margin: 0 0 2.0rem 0;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .mobile-nav .tel-btn-sp:hover {
    opacity: 0.5;
    transform: translateY(-2px);
  }

  .mobile-nav .tel-btn-sp:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
  }

  .mobile-nav .tel-btn-sp:active {
    transform: translateY(0);
  }

  .mobile-nav .phone-icon-sp {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav .reserve-tel-number-sp {
    color: #fff;
    font-size: 2.4rem;
  }

  .mobile-nav .menu-footer {
    font-size: 1.5rem;
    line-height: 1.5;
    color: #1e1c1c;
    margin: 2.5rem 0 0 0;
    text-align: left;
    padding-left: 0;
  }

}

/* モバイル: 480px以下 */
@media (max-width: 480px) {
  .hamburger-btn {
    display: block;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 75%;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1.0);
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 1000;
  }

  .mobile-nav.active {
    transform: translateX(0);
    opacity: 1;
    box-shadow: -6px 0 12px rgba(0, 0, 0, 0.2);
  }

  .mobile-nav ul {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 0 3rem;
    margin: 0; /* 右ずれ防止 */
  }

  .mobile-nav li {
    width: 100%;
    text-align: left;
    margin: 0; /* 右ずれ防止 */
    padding: 0; /* 右ずれ防止 */
  }

  .mobile-nav .mobile-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 5.0rem;
    margin-bottom: 3rem;
    margin-left: 0;
  }

  .mobile-nav .mobile-logo img {
    height: 5.0rem;
    width: auto;
  }

  .mobile-nav .logo-gap {
    width: 1.5rem;
  }

  .mobile-nav .menu-item:not(.tel-btn-sp) {
    display: block;
    width: 100%;
    font-size: 2.1rem;
    letter-spacing: 0.1em;
    color: #1e1c1c;
    text-decoration: none;
    padding: 0.5rem 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
  }

  .mobile-nav .mobile-divider {
    width: 100%;
    height: 1px;
    background-color: #1e1c1c;
    margin: 0 0 1.5rem 0;
  }

  .mobile-nav .mobile-divider:nth-of-type(1),
  .mobile-nav .mobile-divider:nth-of-type(2) {
    display: none;
  }

  .mobile-nav .menu-message {
    font-size: 1.8rem;
    line-height: 1.5;
    color: #1e1c1c;
    margin: 2.0rem 0 3.0rem 0;
    text-align: left;
    padding-left: 0;
  }

  .mobile-nav .menu-message_2{
    font-size: 2.1rem;
    line-height: 1.5;
    color: #1e1c1c;
    margin: 2.0rem 0;
    text-align: left;
    padding-left: 0;
  }

  .mobile-nav .tel-btn-sp {
    display: flex;
    align-items: center;
    justify-content: center; /* ボタン内部は中央揃え */
    width: 100%;
    height: 5rem;
    background-color: #1d2088;
    border-radius: 999rem;
    text-decoration: none;
    font-weight: 400;
    gap: 1rem;
    padding: 0;
    margin: 0 0 1.5rem 0;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .mobile-nav .tel-btn-sp:hover {
    opacity: 0.5;
    transform: translateY(-2px);
  }

  .mobile-nav .tel-btn-sp:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
  }

  .mobile-nav .tel-btn-sp:active {
    transform: translateY(0);
  }

  .mobile-nav .phone-icon-sp {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav .reserve-tel-number-sp {
    color: #fff;
    font-size: 2.4rem;
  }

  .mobile-nav .menu-footer {
    font-size: 1.5rem;
    line-height: 1.5;
    color: #1e1c1c;
    margin: 2.0rem 0 0 0;
    text-align: left;
    padding-left: 0;
  }
}

/* -----------------------------
   右下に置く電話番号オブジェ
----------------------------- */
/* 電話番号オブジェクト 初期状態（右下画面外） */
.tel-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: inherit;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 5rem;
    height: auto;
    background-color: #1e1c1c;
    padding: 2rem 0;
    z-index: 70;

    opacity: 0;
    /* 初期非表示 */
    transform: translateX(100%);
    /* 右外からスタート */
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    /* スッと滑る */
}

/* 表示状態 */
.tel-box.show {
    transform: translateX(0);
    /* 元の位置にスライド */
    opacity: 1;
    /* 表示 */
}

.tel-label {
    font-size: 1.5rem;
    font-weight: 400;
    color: white;
    text-align: center;
    writing-mode: vertical-rl;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.divider {
    width: 2.1rem;
    height: 1px;
    background-color: white;
    margin: 1rem 0;
}

.tel-number {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: white;
    text-align: center;
    writing-mode: vertical-rl;
    white-space: nowrap;
    letter-spacing: 0.25rem;
}

.tel-box:hover {
    filter: brightness(1.8);
}

.tel-box_sp {
    display: none;
}

/* スマホ用非表示 */
@media screen and (max-width: 768px) {
    .tel-box {
        display: none;
    }
}


/* -----------------------------
   ご予約・お問い合わせ（Reserve）※共通
----------------------------- */
.zen-reserve {
    position: relative;
    width: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* 背景画像は HTML 内で img を置いている想定 */
.reserve-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* 青の乗算オーバーレイ */
.reserve-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1d2088;
    opacity: 0.7;
    mix-blend-mode: multiply;
    z-index: 2;
}

/* コンテンツ */
.reserve-inner {
    position: relative;
    z-index: 3;
    max-width: 128rem;
    padding: 7.5rem clamp(5rem, 10vw, 15rem);
    /* 上下 100px / 左右 150px */
    margin: 0 auto;
}

.zen-reserve-title h2 {
    font-size: 3.0rem;
    /* 28px */
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.5;
    margin: 0 auto 4rem auto;
}

.reserve-subtitle {
    font-size: 1.8rem;
    /* 16px */
    font-family: 'Cormorant', serif;
    letter-spacing: 0.3em;
    display: inline-block;
    position: relative;
    bottom: 1rem;
    padding-bottom: 0.5rem;
}

.reserve-subtitle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.reserve-message_1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.reserve-phone {
    font-family: 'Outfit', sans-serif;
    font-size: 4.2rem;
    font-weight: 400;
    color: white;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.phone-icon {
    width: 3.6rem;
    height: 3.6rem;
    object-fit: contain;
}

.reserve-tel-link {
    display: inline-flex;
    /* インライン扱いのままフレックス */
    align-items: center;
    /* アイコンと文字を縦方向中央揃え */
    gap: 1rem;
    /* アイコンと番号の間隔 */
    color: inherit;
    /* 親の色を継承 */
    text-decoration: none;
    /* 下線消す */
}

.reserve-phone a,
.reserve-phone a:link,
.reserve-phone a:visited {
    color: white;
}

.reserve-message_2 {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}


/* -----------------------------
   フッター ※共通
   共通CSSのリセットが入っても崩れないように明示的に指定
----------------------------- */
.zen-footer {
    background-color: rgba(245, 245, 245, 1.0);
    /* セクション単位で背景色 */
    width: 100%;
    padding: 10rem 0 4rem 0;
    /* 上100px 下40px */
    box-sizing: border-box;
    letter-spacing: 0.05em;
}

.zen-footer-inner {
    max-width: 128rem;
    /* 1280px */
    margin: 0 auto;
    padding: 0 clamp(5rem, 10vw, 15rem);
    /* 左右150px */
    text-align: center;
    /* 内部要素を中央揃え */
}

.zen-footer-logo {
    display: block;
    margin: 0 auto 4rem auto;
    /* 左右自動、下マージン40px */
    height: auto;
    width: 23.0rem;
    cursor: pointer;
    /* クリックできる感を出す */
}

.zen-footer p {
    font-size: 1.8rem;
    /* 16px */
    margin: 0 0 5rem 0;
    /* 屋号・住所のアキ 50px */
    line-height: 1.8;
}

.zen-footer p:last-child {
    font-size: 1.2rem;
    /* コピーライト 12px */
    margin-bottom: 0;
}