/* ── custom 01 ── */
/* =========================================
   WP Carousel：表示枠を16:9固定 + 中心トリミング
   目的：
   - 表示は常に 1200×675 相当（16:9）に統一
   - 画像は比率維持したまま cover で中央基準にトリミング
   - 歪み（縦横比崩れ）を絶対に起こさない
========================================= */

/* 画像の見える「窓」を16:9に固定 */
.wpcp-slide-image{
  width: 100%;
  aspect-ratio: 16 / 9;   /* ←表示は常に16:9 */
  overflow: hidden;
}

/* 画像は中央基準でトリミング（比率は維持） */
.wpcp-slide-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;        /* ←切り抜く */
  object-position: 50% 50%; /* ←常に中心 */
  display: block;
  margin: 0;
}

/* ── custom 02 ── */
/* =============================
   総閲覧数カウンター（高級・修正版）
============================= */
.footer-counter{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;

  margin:60px 0 30px;
  text-align:center;

  font-family:"Helvetica Neue","Noto Sans JP",sans-serif;
  font-weight:300;

  /* ←文字間少し詰め */
  letter-spacing:0.18em;

  color:#d8c8a8;
  font-size:16px;
}

/* 数字ボックス */
.footer-counter span{
  background:#111;
  padding:14px 26px;

  font-family:monospace;
  font-size:32px;
  letter-spacing:0.22em;

  color:#e6d3a3;

  border:1px solid rgba(230,211,163,0.4);
  border-radius:4px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 8px 24px rgba(0,0,0,0.45);
}

/* =============================
   スマホ表示
============================= */
@media (max-width: 768px){

  .footer-counter{
    flex-direction:column;
    gap:10px;
    margin:40px 0 20px;

    /* 中央配置 */
    align-items:center;
    text-align:center;

    /* スマホはさらに少し詰め */
    letter-spacing:0.12em;
    font-size:14px;
  }

  .footer-counter span{
    font-size:26px;
    padding:12px 20px;
  }

}

/* ── custom 03 ── */
.insta-link-block {
  display: flex;
  flex-direction: column;
  align-items: center; /* 全体を中央寄せ */
  gap: 12px; /* 各ブロック間の余白 */
}

.icon-with-caption {
  text-align: center;
}

.icon-with-caption img {
  max-width: 60px; /* アイコンサイズ調整 */
  height: auto;
}

.insta-caption {
  margin-top: 4px; /* アイコンと文字の間隔 */
  font-size: 14px;
  color: #fff; /* 必要に応じて変更 */
  line-height: 1.4;
}

/* ── custom 04 ── */
/* 投稿ナビゲーションのPREV/NEXTボタンを非表示 */
.post-navigation,
.wp-block-post-navigation-link {
  display: none !important;
}

/* ── custom 05 ── */
.wp-post-image {
  object-fit: contain !important;
  max-height: 100%;
}

/* 投稿ページの記事内のアイキャッチ画像を非表示にする */
.single-post .wp-post-image {
  display: none !important;
}

.single-post figure.wp-block-post-featured-image {
  display: none !important;     /* 表示を消す */
  height: 0 !important;         /* 高さをゼロに */
  margin: 0 !important;         /* マージンもゼロにして余白除去 */
  padding: 0 !important;        /* パディングも一応除去 */
}

/* ── custom 06 ── */
.zeku-background-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── custom 07 ── */
@media screen and (max-width: 768px) { /*店舗紹介文言の画像設定*/
  /* ----------------------------------------------------
     store-introduction-sp：スマホ版で画像サイズを調整
  ---------------------------------------------------- */
  .store-introduction-sp {
    width: 40% !important;       /* ← 横幅を画面幅の80%に設定 */
    height: auto !important;     /* ← 高さは自動調整で比率を保持 */
    max-width: 300px;            /* ← 最大幅は300pxまで（必要に応じて調整） */
    margin: 0 auto;              /* ← 中央寄せ（左右の自動余白） */
    display: block;              /* ← 画像をブロック要素にすることで中央寄せが有効に */
  }
}


@media screen and (max-width: 768px) { /*ZEKUの特徴の画像設定*/
  /* ----------------------------------------------------
     store-introduction-sp：スマホ版で画像サイズを調整
  ---------------------------------------------------- */
  .features-pic-sp {
    width: 70% !important;       /* ← 横幅を画面幅の80%に設定 */
    height: auto !important;     /* ← 高さは自動調整で比率を保持 */
    max-width: 300px;            /* ← 最大幅は300pxまで（必要に応じて調整） */
    margin: 0 auto;              /* ← 中央寄せ（左右の自動余白） */
    display: block;              /* ← 画像をブロック要素にすることで中央寄せが有効に */
  }
}

@media screen and (max-width: 768px) { /*ZEKUの特徴の画像設定*/
  /* ----------------------------------------------------
     store-introduction-sp：スマホ版で画像サイズを調整
  ---------------------------------------------------- */
  .access-pic-sp {
    width: 95% !important;       /* ← 横幅を画面幅の80%に設定 */
    height: auto !important;     /* ← 高さは自動調整で比率を保持 */
    max-width: 350px;            /* ← 最大幅は300pxまで（必要に応じて調整） */
    margin: 0 auto ;              /* ← 中央寄せ（左右の自動余白） */
    display: block;              /* ← 画像をブロック要素にすることで中央寄せが有効に */
  }
}


/* --------------------------------------------------------
   ラッパー：画像とテキストを重ねるための枠(アクセスページの店舗名の部分の設定)
-------------------------------------------------------- */
.overlay-wrapper-new {
  position: relative;       /* ← 子要素の絶対位置の基準 */
  display: inline-block;    /* ← 中身の幅に合わせる */
  width: 100%;              /* ← 横幅いっぱいにする場合 */
  max-width: 100%;
}

/* --------------------------------------------------------
   画像：サイズ調整しやすく、中央寄せ
-------------------------------------------------------- */
.overlay-image-new { /*アクセスページの店舗名画像*/
  width: 100%;              /* ← 親要素に合わせて拡縮 */
  height: auto;             /* ← 縦横比を保持 */
  display: block;
  max-width: 400px;         /* ← PCでの最大サイズ */
  margin: 0 auto;           /* ← 中央寄せ */
}

/* --------------------------------------------------------
   テキスト：画像に重ねて表示、明朝体 + 背景付き
-------------------------------------------------------- */
.overlay-text-new { /*アクセスページの店舗電話番号*/
  position: absolute;
  bottom: 3%;                          /* ← 画像下からの位置 */
  left: 50%;                           /* ← 水平方向中央 */
  transform: translateX(-50%);         /* ← 水平中央に調整 */
  color: #fff;                         /* ← 白文字 */
  font-family: "Hiragino Mincho Pro", "游明朝", "Yu Mincho", serif;
  font-size: 1.2rem;                   /* ← PCのフォントサイズ */
  background: rgba(0, 0, 0, 0.1);      /* ← 半透明黒背景 */
  padding: 8px 12px;                   /* ← 内側の余白 */
  border-radius: 8px;                  /* ← 角丸 */
  z-index: 2;
  text-align: center;
}

/* --------------------------------------------------------
   スマホ用の画像サイズ・テキスト調整
-------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .overlay-image-new {
    max-width: 280px;        /* ← スマホで画像を小さく */
  }

  .overlay-text-new {
    font-size: 1rem;         /* ← スマホ用フォントサイズ */
    bottom: -3%;              /* ← 下からの距離を調整 */
    padding: 6px 10px;       /* ← パディングを縮小 */
  }
}

/* ── custom 08 ── */
@media screen and (max-width: 768px) {
  /* ----------------------------------------------------
     MetaSlider プラグインの左右ナビ矢印をスマホで非表示
     .flex-direction-nav は左右の「＜」「＞」を含むラッパー
  ---------------------------------------------------- */
  .metaslider .flex-direction-nav {
    display: none !important;  /* ← スマホではナビ矢印を非表示 */
  }
}

/* ── custom 09 ── */
/* ------------------------------------------------
   スマホ版だけ spacer-sp-only2 のスペーサーを縮める
------------------------------------------------ */
@media screen and (max-width: 768px) { /*FOOD,Guest Room下のスペーサー 共通*/
  .spacer-sp-only2 {
    height: 24px !important;   /* ← 高さを24pxに縮小（必要に応じて調整） */
    margin: 0 !important;      /* ← 上下余白をゼロに（必要に応じて変更） */
    padding: 0 !important;     /* ← 内側余白もゼロに（デフォルトがある場合） */
    display: block !important; /* ← 念のため表示を確保（必要なければ省略可） */
  }
}

/* ------------------------------------------------
   スマホ版だけ spacer-sp-only3 のスペーサーをやや大きめに保つ
------------------------------------------------ */
@media screen and (max-width: 768px) { /*amenity下のスペーサー*/
  .spacer-sp-only3 {
    height: 328px !important;    /* ← 高さを48pxに設定（24pxより大きく） */
    margin: 0 !important;       /* ← 上下余白をリセット（必要なら調整可） */
    padding: 0 !important;      /* ← 内側余白もリセット（必要なら調整可） */
    display: block !important;  /* ← スマホ表示を強制（安全のため） */
  }
}

/* ------------------------------------------------
   スマホ版だけ spacer-sp-only4 のスペーサーをさらに大きくする
------------------------------------------------ */
@media screen and (max-width: 768px) { /*店舗紹介下のスペーサー*/
  .spacer-sp-only4 {
    height: 42px !important;    /* ← 高さを72pxに設定（sp-only2/3より大きい） */
    margin: 0 !important;       /* ← 上下の余白をリセット（必要なら変更可） */
    padding: 0 !important;      /* ← 内側余白もリセット */
    display: block !important;  /* ← スマホで表示強制 */
  }
}

/* ------------------------------------------------
   スマホ版だけ spacer-sp-only5 のスペーサーをさらに大きくする
------------------------------------------------ */
@media screen and (max-width: 768px) { /*菱形直後のスペーサー*/
  div.wp-block-spacer.spacer-sp-only5 {
    height: 42px !important;    /* ← 高さを72pxに設定（sp-only2/3より大きい） */
    margin: 0 !important;       /* ← 上下の余白をリセット（必要なら変更可） */
    padding: 0 !important;      /* ← 内側余白もリセット */
    display: block !important;  /* ← スマホで表示強制 */
  }
}

/* ------------------------------------------------
   スマホ版だけ spacer-sp-only5 のスペーサーをさらに大きくする
------------------------------------------------ */
@media screen and (max-width: 768px) { /*菱形直後のスペーサー*/
  div.wp-block-spacer.spacer-sp-only6 {
    height: 250px !important;    /* ← 高さを72pxに設定（sp-only2/3より大きい） */
    margin: 0 !important;       /* ← 上下の余白をリセット（必要なら変更可） */
    padding: 0 !important;      /* ← 内側余白もリセット */
    display: block !important;  /* ← スマホで表示強制 */
  }
}

/* ── custom 10 ── */
/* ------------------------------------------------
   .map-pic-sp：スマホ版のみ画像サイズを小さくする
------------------------------------------------ */
@media screen and (max-width: 768px) {
  .map-pic-sp {
    width: 80% !important;       /* ← 横幅を80%に（必要に応じて調整可） */
    height: auto !important;     /* ← 高さは自動で比率維持 */
    max-width: 300px;            /* ← 最大幅を制限（任意） */
    display: block;              /* ← インライン要素なら block に変更 */
    margin: 0 auto;              /* ← 中央寄せ */
  }
}

/* ── custom 11 ── */
/* ------------------------------------------------
   .small-text-sp：スマホ版だけ文字サイズを小さくする
------------------------------------------------ */
@media screen and (max-width: 768px) {
  .small-text-sp {
    font-size: 32px !important;  /* ← スマホ時のみフォントを小さくする（調整可） */
  }
}

/* ── custom 12 ── */
/* ------------------------------------------------
   PCのカラムをスマホでは非表示
------------------------------------------------ */
@media screen and (max-width: 768px) {
  div.wp-block-columns.hide-on-mobile {
    display: none !important; /* ← スマホではカラム全体を非表示にする */
  }
}


/* ------------------------------------------------
   スマホ専用ラッパー：SVGとボタンの配置ベース
   ※このラッパーに position: relative を指定することで、
   中の SVG やボタンの絶対位置指定が可能になる
------------------------------------------------ */
@media screen and (max-width: 768px) {
  .svg-relative-wrapper {
    position: relative;        /* ← 子要素の絶対配置の基準にする */
    padding-top: 120px;        /* ← 上部にSVGがくるスペースを確保 */
    margin-bottom: 40px;       /* ← ラッパーの下に余白 */
    text-align: center;        /* ← 中央揃え */
  }
}


/* ------------------------------------------------
   SVGアイコン：スマホのみ表示・中央に配置
   PCでは非表示にし、スマホ時のみ absolute で重ね表示
------------------------------------------------ */
.svg-explainer {
  display: none; /* ← PCでは非表示 */
}

@media screen and (max-width: 768px) {
  .svg-explainer {
    display: block !important;         /* ← スマホで表示 */
    position: absolute;                /* ← ラッパー内で絶対配置 */
    top: 0;                            /* ← ラッパーの上から配置開始 */
    left: 50%;                         /* ← 横中央 */
    transform: translateX(-50%);       /* ← 水平中央に揃える */
    width: 400px;                      /* ← SVGの横幅（必要に応じて調整） */
    opacity: 0.8;                      /* ← 少し透過させる */
    z-index: 1;                        /* ← ボタンより背面に配置 */
    pointer-events: none;             /* ← クリックなどのイベント無効化 */
  }

  /* ▼ SVGごとの個別位置調整（左右位置や回転） */
  .svg-food-only-sp {
    transform: translateX(-50%) rotate(0deg); /* ← 食事説明用アイコン */
  }
  .svg-room-only-sp {
    transform: translateX(-50%) rotate(0deg); /* ← 客室説明用アイコン */
  }
  .svg-amenity-only-sp {
    transform: translateX(-50%) rotate(0deg); /* ← アメニティ説明用アイコン */
  }
}


/* ------------------------------------------------
   スマホ専用ボタン（2つ想定）
   PCでは非表示。スマホ時はflexで中央に配置
------------------------------------------------ */
.sp-button-wrapper {
  display: none; /* ← PCでは非表示 */
}

@media screen and (max-width: 768px) {
  .sp-button-wrapper {
    display: flex;              /* ← ボタンを横並びにする場合にも対応 */
    justify-content: center;    /* ← 中央揃え */
    margin-top: 210px;          /* ← SVGとの距離（調整可） */
  }

  .sp-button {
    display: inline-block;         /* ← インライン要素風に配置 */
    padding: 10px 24px;            /* ← 内側の余白 */
    background-color: #427885;     /* ← 背景色 */
    color: white;                  /* ← 文字色 */
    border: 2px solid white;       /* ← 枠線の色 */
    border-radius: 9999px;         /* ← 角を丸めて pill 型に */
    font-size: 14px;               /* ← フォントサイズ */
    font-weight: bold;            /* ← 太字 */
    text-decoration: none;        /* ← 下線を消す */
    text-align: center;           /* ← 中央揃え */
    transition: background-color 0.3s ease; /* ← ホバー時の色変化にアニメ */
  }

  .sp-button:hover {
    background-color: #365e6b; /* ← ホバー時の背景色（暗めに） */
  }
}

/* ── custom 13 ── */
/* -----------------------------------------------
   PCでは非表示、スマホ版でのみ表示される画像
------------------------------------------------ */
.top-image-sp-only {
  display: none; /* ← 初期状態（PCでは非表示） */
}

@media screen and (max-width: 768px) {
  .top-image-sp-only {
    display: block !important;      /* ← スマホでのみ表示 */
    width: 60vw;                    /* ← 横幅を画面の60%に調整（必要に応じて変更） */
    height: auto;                   /* ← 縦横比を維持 */
    margin: 0 auto;                 /* ← 左右のマージン自動で中央寄せ */
    padding: 0 10px;                /* ← スマホ画面端に少し余白 */
  }
}

/* -----------------------------------------------
   .top-image-wrapper：画像を包む外枠（レイアウト調整用）
------------------------------------------------ */
.top-image-wrapper {
  width: 100%;                     /* ← 横幅いっぱいに広げる */
  text-align: center;             /* ← 子要素（画像）を中央寄せ */
  overflow: hidden;               /* ← はみ出し対策（必要に応じて） */
}


@media screen and (max-width: 768px) {
  img.base-image {
    display: none !important; /* ← スマホで非表示にすることで下の画像が見えるようになる */
  }
}

/* ── custom 14 ── */
/* スマホのみ改行用の br クラス */
.only-sp {
  display: none; /* PCでは非表示にしておく */
}

@media screen and (max-width: 768px) {
  /* スマホで改行を有効に */
  .only-sp {
    display: inline; /* スマホでは表示（<br class="only-sp"> などに対応） */
  }

  /* 上のstyle="margin-top:3rem" を打ち消す */
  div.diamond-layout[style] {
    margin-top: 60px !important; /* インラインスタイルに上書きして余白調整 */
  }

  /* .diamond-layout スマホレイアウト最適化 */
  .diamond-layout {
    height: auto !important;           /* 高さを自動調整（PC版は固定値） */
    padding: 40px 16px;                /* 上下に40px、左右に16pxの余白をつける */
    display: flex;                     /* 子要素をflexで並べる（縦方向） */
    flex-direction: column;           /* 子要素を縦並びにする */
    align-items: center;              /* 子要素を中央寄せにする */
    gap: 70px;                        /* 子要素の間に120pxの間隔を空ける */
    position: relative;               /* SVGなどのabsolute配置に備える */
  }
	
@media screen and (max-width: 768px) {
  /* No.1（.top）と No.3（.right）を左寄せに */
  .diamond-layout .corner-item.top,
  .diamond-layout .corner-item.top p,
  .diamond-layout .corner-item.right,
  .diamond-layout .corner-item.right p {
    align-self: flex-start !important;
    text-align: left !important;
  }

  /* No.2（.left）と No.4（.bottom）を右寄せに */
  .diamond-layout .corner-item.left,
  .diamond-layout .corner-item.left p,
  .diamond-layout .corner-item.bottom,
  .diamond-layout .corner-item.bottom p {
    align-self: flex-end !important;
    text-align: right !important;
  }
}
	
  /* 各項目を中央寄せ・全幅 */
  .corner-item {
    position: static !important;      /* PCのabsoluteを打ち消し、通常のフローに戻す */
    width: 100% !important;           /* 横幅を親いっぱいに広げる */
    max-width: 100%;                  /* 最大幅も100%に制限 */
    text-align: center;    /* テキストを中央寄せ */
    padding: 0 10px;                  /* 左右に10pxの余白（文字の余白調整） */
    transform: none !important;       /* PC版のtransform位置指定を解除 */
  }

  /* 1番上の項目だけ少し下げる */
  .diamond-layout .corner-item:first-of-type {
    margin-top: 120px !important;     /* 最初のcorner-itemだけ下に余白を追加 */
  }

  .bottom-spacer {
    height: 100px; /* ← 最下部にスペースを確保してSVGなどと干渉しないように */
  }

  /* p要素全体を中央寄せに強制 */
  .corner-item p {
    margin: 0 0 8px 0 !important;      /* 下に8pxのマージンをつける */
    line-height: 1.5 !important;      /* 行間を少し広くして読みやすくする */
    word-break: break-word !important;/* 単語の途中でも改行を許可（長単語対応） */
  }

  .line1 {
    font-size: 14px !important;       /* 上段の文（No.X〜）のフォントサイズ調整 */
    font-weight: bold;                /* 太字にする */
  }

  .line1 .rest {
    font-size: 13px !important;       /* 番号以降の文だけ少し小さめに調整 */
  }

  .diamond-layout .corner-item .line2 {
    font-size: 18px !important;       /* 下段の文のフォントサイズ */
  }

  .corner-item .rest,
  .corner-item .first-three {
    width: auto !important;           /* 幅制限を解除して自然な幅で表示 */
  }

  /* SVGはスマホでは非表示（PC用） */
  .background-vector {
    display: none !important;         /* PCで使っていた背景SVGを非表示にする */
  }
}

/* スマホ用SVGは初期状態では非表示 */
.only-sp-svg {
  display: none; /* PCでは非表示 */
}




@media screen and (max-width: 768px) {
  .only-sp-svg {
    display: block !important;        /* スマホでは表示 */
    position: absolute;               /* 位置指定ができるようにする */
    height: auto;                     /* 高さを自動で調整（縦横比維持） */
    opacity: 0.5 !important;                     /* 半透明で背景として使えるようにする */
    animation: float 4s ease-in-out infinite; /* 浮遊アニメーション適用 */
    pointer-events: none;            /* ユーザー操作に反応させない */
    fill: currentColor;              /* currentColor（親要素の色）を適用 */
    color: #C7B299;                  /* currentColorをこの色に設定 */
    z-index: 0;                      /* 背面に配置する（テキストやメニューより奥） */
  }

  /* 各SVGに対して top / left / width / transform を個別設定 */
  .sp-bg1 { /*ticket*/ 
    top: 250px;                      /* 上から290pxの位置に表示 */
    left: 45vw;                      /* 左から20%（ビューポート幅基準）の位置に表示 */
    width: 150px !important;         /* 幅を190pxに固定 */
    transform: rotate(-5deg);        /* 少し左に傾ける */
  }

  .sp-bg2 { /*humberger*/
    top: 70px;                       /* 上から50pxに表示 */
    left: 10vw;                      /* 左から20vwに配置 */
    width: 150px !important;         /* 幅を200pxに固定 */
    transform: rotate(10deg);        /* 少し右に傾ける */
  }

  .sp-bg3 { /*member*/
    top: 415px;
    left: 0vw;
    width: 150px !important;
    transform: rotate(-8deg);
  }

  .sp-bg4 { /*kankou*/
    top: 540px;
    left: 45vw;
    width: 150px !important;
    transform: rotate(6deg);
  }

  /* PC用の背景SVGを非表示（スマホでは表示させない） */
  .background-vector.bg1,
  .background-vector.bg2,
  .background-vector.bg3,
  .background-vector.bg4 {
    display: none !important;        /* PC版レイアウトで使用したSVGをすべて非表示にする */
  }
}

/* PCでは矢印を非表示 */
.arrow-svg {
  display: none;
}

@media screen and (max-width: 768px) { /*矢印SVGのサイズ位置調整*/
  .arrow-svg {
    display: block;                      /* スマホでのみ表示 */
    position: absolute;                 /* 画面内の位置指定に対応 */
    width: 60px;                       /* 矢印の幅を拡大 */
    height: auto;                       /* 高さは自動 */
    opacity: 0.8;                       /* やや濃く表示 */
    pointer-events: none;              /* タップなどの操作対象外 */
    z-index: 0;                         /* テキスト等より下に配置 */
    color: #C7B299;                    /* currentColorに対応していればこの色 */
  }

  .arrow-1 {
    top: 300px;                         /* SVG1の下に配置 */
    left: 15vw;                         /* 左から22vwの位置 */
    transform: rotate(270deg);          /* 右向きに回転 */
	opacity: 0.5; 
  }

  .arrow-2 {
    top: 435px;                         /* SVG2の下に配置 */
    left: 55vw;                         /* 右寄せ位置に調整 */
    transform: scaleX(-1) rotate(270deg);             /* 左右反転（上下ではなく左右） */
	opacity: 0.5; 
  }

  .arrow-3 {
    top: 580px;                         /* SVG3の下に配置 */
    left: 15vw;                         /* 同じく左寄せ */
    transform: rotate(270deg);          /* 右向きに回転 */
	opacity: 0.5; 
  }
}

/* ------------------------------------------------
   スマホだけ .highlight-box を表示して装飾
------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* line2 を太字に */
  .corner-item .line2 {
    font-weight: bold !important; /* ← スマホ限定の太字 */
  }
}

/* ── custom 15 ── */
@media screen and (max-width: 480px) {
  /* ========== テキスト ========== */

  /* テキスト1：住所 → スマホでは非表示 */
  .zeku-address-text-mobile {
    display: none !important;
  }

  /* テキスト2：店舗名（吉田） */
  .zeku-store-name-yoshida {
    font-size: 30px !important;
    margin-top: 10px !important; /* ← 画像より下にずらすために多めの余白 */
    margin-bottom: 10px !important;
    text-align: center !important;
  }

  /* テキスト2：店舗名（用宗） */
  .zeku-store-name-mochimune {
    font-size: 30px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }

  /* テキスト3：電話番号（吉田） */
  .zeku-phone-number-yoshida {
    font-size: 25px !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  /* テキスト3：電話番号（用宗） */
  .zeku-phone-number-mochimune {
    font-size: 25px !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  /* ========== スペーサー ========== */

  /* スペーサー：スマホでは非表示 */
  .zeku-spacer-hide-on-mobile {
    display: none !important;
  }
}

/* ── custom 16 ── */
/* 共通の背景ラッパー */
.zeku-background-wrapper {
  position: relative;
  overflow: hidden;
}

/* 背景画像として扱う共通スタイル */
.zeku-background-img {
  position: fixed; /* ← 固定背景として振る舞わせる */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ← 引き伸ばしを防ぎつつ全体を覆う */
  z-index: -1;
  pointer-events: none;      /* ← 背景のクリックを無効化 */
}

/* PC版：デフォルトで表示 */
.zeku-background-img.sp-background {
  display: none;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .zeku-background-img.pc-background {
    display: none;
  }
  .zeku-background-img.sp-background {
    display: block;
    object-fit: cover; /* ← containにすると切れる可能性が高いのでcover推奨 */
  }
}

/* 表示中のコンテンツ全体をラップ */
.zeku-page-content {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) { /*ルームギャラリータイトルとギャラリー本体のスペーサー調整*/
  .spacer-sp-only5 {
    height: 250px !important;    /* ← 高さを48pxに設定（24pxより大きく） */
    margin: 0 !important;       /* ← 上下余白をリセット（必要なら調整可） */
    padding: 0 !important;      /* ← 内側余白もリセット（必要なら調整可） */
    display: block !important;  /* ← スマホ表示を強制（安全のため） */
  }
}

/* ── custom 17 ── */
.page-id-491 .site,
.page-id-491 .site-content,
.page-id-491 .entry-content {
  background-color: transparent !important; /* ← 背景画像を透過して見せる */
}
.page-id-491 .wp-site-blocks {
  background-color: transparent !important;
}
.page-id-491 .entry-content,
.page-id-491 .site {
  background-color: transparent !important;
}
body.page-id-491 {
  background-color: #000000 !important; /* ← 背景の一番奥を黒に上書き */
}

/* ── custom 18 ── */
.wp-block-heading {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── custom 19 ── */
.dm-serif-display-regular {
  font-family: "DM Serif Display", serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.dm-serif-display-regular-italic { 
  font-family: "DM Serif Display", serif !important; 
  font-weight: 400 !important; 
  font-style: italic !important; 
}

/* ── custom 20 ── */
nav.custom-menu {
  all: unset;
  position: fixed !important;
  left: 0;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background: transparent !important;
  z-index: 9999;
  transition: top 0.3s ease-in-out;
  font-family: 'Noto Serif JP', serif !important;
}

nav.custom-menu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 30px;
}

nav.custom-menu a {
  color: white !important;
  text-decoration: none;
  font-size: 1.2em !important;
  font-weight: normal !important;
}

nav.custom-menu ul:hover li:not(:hover) {
  opacity: 0.3;
  transition: opacity 0.3s;
}

nav.custom-menu ul li:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  nav.custom-menu ul {
    flex-wrap: nowrap; /* 折り返し禁止 */
    justify-content: center;
    gap: 16px; /* 少し詰める */
    overflow-x: auto; /* 横スクロール許可（保険） */
    padding: 10px 10px;
  }

  nav.custom-menu li {
    flex: 0 0 auto;
  }

  nav.custom-menu a {
    font-size: 0.9em !important; /* スマホ向けに縮小 */
    padding: 6px 8px;
    white-space: nowrap;
  }

  /* ホバー時透明化を無効化（スマホはhoverしない） */
  nav.custom-menu ul:hover li:not(:hover) {
    opacity: 1 !important;
  }
}

/* ── custom 21 ── */
/* Googleフォント読み込み（まだ読み込んでない場合） */
.news-yellow-text { /*news.updateのフォント設定*/
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #eeeeee;
  letter-spacing: 0px;
}

/* ── custom 22 ── */
@keyframes wink-once {
  0% {
    transform: scaleY(0.05);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* テキストに適用：ROOM GALLERYなど */
.custom-headline {
  font-family: "Dela Gothic One", sans-serif;
  font-size: 80px;
  font-weight: 400;
  font-style: normal;
  color: #ffbb00;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -2px;

  /* アニメーション */
  transform: scaleY(0.05);
  opacity: 0;
  transform-origin: center;
  animation: wink-once 0.4s ease-out forwards;
  animation-delay: 0.3s;
  will-change: transform, opacity;
}

/* 2行目以降に余白 */
.custom-headline + .custom-headline {
  margin-top: 20px;
}

/* ウィンク対象画像（.wink-image をグループブロックに指定している場合） */
.wink-image img {
  width: 100%;
  height: auto;
  object-fit: cover;

  display: block;
  transform: scaleY(0.05);
  opacity: 0;
  transform-origin: center;
  animation: wink-once 0.3s ease-out forwards;
  animation-delay: 0.3s;

  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
}

/* ── custom 23 ── */
/* 該当の黒背景ブロックの上下スペースをほぼゼロにする */
.wp-block-group.alignfull.has-contrast-color.has-text-color.is-vertical.is-content-justification-center {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  min-height: 0px !important;
  line-height: 1.2 !important;
}

/* ── custom 24 ── */
/* ラッパー：ページ中央に配置 */
.insta-link-block-wrapper {
  width: 100%;
  display: flex;
  justify-content: center; /* 横中央に */
  margin-top: 24px;        /* 上に余白（必要に応じて調整） */
}

/* 中のブロック：縦並びに変更 */
.insta-link-block {
  display: flex;
  flex-direction: column;  /* ← 上下に並べる */
  align-items: center;     /* 中央揃え */
  gap: 8px;                /* 上下の間隔 */
}

/* テキスト付きアイコン（上） */
.insta-icon-text {
  height: 120px;
  width: auto;
}

/* Instagramロゴアイコン（下） */
.insta-icon {
  height: 50px;
  width: auto;
  transition: transform 0.3s ease;
}

.insta-icon:hover {
  transform: scale(1.1);
}

/* ── custom 25 ── */
h2.wp-block-post-title.has-text-align-center.has-link-color.has-text-color.has-base-2-color.has-background.has-palette-main-background-color {
  display: none !important;
}

/* ── custom 26 ── */
.text-on-box {
  background-color: #000;
  color: #ffbb00;
  font-family: "Dela Gothic One", sans-serif;
  padding: 50px 40px;
  border-radius: 12px;
  max-width: 1000px;
  margin: 60px auto;
  box-sizing: border-box;
  text-align: center;
}

.text-on-box p {
  font-size: 35px;
  margin-bottom: 30px;
  line-height: 1.6;
}

.text-on-box .translation {
  display: block;
  font-size: 15px;
  color: #ffffff;
  margin-top: 5px;
}

.text-on-box-with-svg {
  position: relative;
  background-color: #222222; /* ← 薄くした黒 */
  color: #ffbb00;
  font-family: "Dela Gothic One", sans-serif;
  padding: 50px 40px;
  border-radius: 12px;
  max-width: 1000px;
  margin: 60px auto;
  box-sizing: border-box;
  text-align: center;
}

.text-on-box-with-svg p {
  font-size: 25px;
  margin-bottom: 30px;
  line-height: 1.6;
  letter-spacing: 0;
}

.text-on-box-with-svg .translation {
  display: block;
  font-size: 15px;
  color: #ffffff;
  margin-top: 5px;
  font-family: "Hiragino Mincho ProN", serif;
  letter-spacing: 0;
}

.svg-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  /* ==== 黄色文字ボックス（黒背景）のスマホ版 ==== */
  .text-on-box {
    padding: 30px 20px !important; /* 上下左右の余白を縮小 */
    margin: 40px auto !important; /* 上下マージンもやや縮小 */
  }

  .text-on-box p {
    font-size: 23px !important;     /* メインテキストを小さめに */
    line-height: 1.4 !important;    /* 行間を少し詰める */
    margin-bottom: 20px !important;
  }

  .text-on-box .translation {
    font-size: 13px !important;     /* 翻訳テキストも小さく */
    margin-top: 3px !important;
  }

  /* ==== SVG付きボックスのスマホ版 ==== */
  .text-on-box-with-svg {
    padding: 30px 20px !important;
    margin: 40px auto !important;
  }

  .text-on-box-with-svg p {
    font-size: 17px !important;     /* 少し小さくして読みやすさ維持 */
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
  }

  .text-on-box-with-svg .translation {
    font-size: 13px !important;
    margin-top: 3px !important;
  }

  .svg-bottom-right {
    width: 80px !important;        /* SVGサイズもやや小さめに調整 */
    opacity: 0.85 !important;       /* 視認性を保ったままやや控えめに */
  }
}

/* ── custom 27 ── */
/* Googleフォント読み込み（まだ読み込んでない場合） */
.dela-yellow-text { /*各プライスリストとサービスリストのフォント設定*/
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffbb00;
  letter-spacing: -2px;
}

img.wp-image-541 { /*プライスリストとその画像の距離調整（画像側の上マージン削除設定）*/
  margin-top: -110px; /* ← 数値は調整可能。-20〜-80pxくらいで試してみてください */
}
img.wp-image-543 { /*プライスリストとその画像の距離調整（画像側の上マージン削除設定）*/
  margin-top: -110px; /* ← 数値は調整可能。-20〜-80pxくらいで試してみてください */
}
img.wp-image-535 { /*プライスリストとその画像の距離調整（画像側の上マージン削除設定）*/
  margin-top: -110px; /* ← 数値は調整可能。-20〜-80pxくらいで試してみてください */
}
img.wp-image-1542 { /*プライスリストとその画像の距離調整（画像側の上マージン削除設定）*/
  margin-top: -110px; /* ← 数値は調整可能。-20〜-80pxくらいで試してみてください */
}

img.no-bottom-margin { /*プライスリストの画像の下マージン削除設定*/
  margin-bottom: -20px; /* ← ここで空き具合を調整：-10〜-40pxくらいで調整してみてOK */
  display: block;
}

.custom-reserve-button { /*ご予約はこちらボタンの設定*/
  display: block;
  width: fit-content;
  margin: 0 auto;

  position: relative;
  top: -140px;
  z-index: 10;

  background-color: #000000 !important;
  color: #ffbb00;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -1px;
  padding: 14px 32px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  opacity:1 !important;
  filter:none !important;

  transition: transform 0.3s ease; /* ← 拡大のためのアニメ */
}

.custom-reserve-button:hover {
  transform: scale(1.05); /* ← 全体を5%拡大（背景含む） */
  background-color: #000000 !important; /* ← 明示的に真っ黒を固定 */
}

.dela-yellow-text { /*Price Listとかのボックス設定*/
  display: block;
  width: fit-content;
  margin: 0 auto; /* 中央に配置 */
  background-color: #000000; /* 黒背景 */
  color: #ffbb00;            /* 黄色テキスト */
  font-family: "Dela Gothic One", sans-serif;
  font-size: 80px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -2px;      /* 文字間隔詰める */
  padding: 8px 20px;         /* 上下・左右の余白を控えめに */
  border-radius: 8px;        /* 角を少し丸める（任意） */
  text-align: center;
}

/* ========== スマホ専用調整 ========== */
@media screen and (max-width: 480px) {
  .dela-yellow-text {
    font-size: 28px !important; /* ← スマホでは小さめに（通常80pxから縮小） */
    padding: 6px 16px !important; /* ← 上下左右の余白もややコンパクトに */
    letter-spacing: -1px !important; /* ← 文字間隔もスマホ向けにやや緩和 */
  }

  .custom-reserve-button {
    font-size: 25px !important; /* ← ご予約ボタンの文字サイズも縮小 */
    padding: 10px 24px !important; /* ← 余白も調整してバランスを取る */
  }

  img.wp-image-541,
  img.wp-image-543,
  img.wp-image-535,
  img.wp-image-1542 {
    margin-top: -60px !important; /* ← スマホでは画像間の詰め具合を少し緩和 */
  }

  img.no-bottom-margin {
    margin-bottom: -10px !important; /* ← スマホでは余白をやや増やすと自然に見える */
  }
}

/* ── custom 28 ── */
/* ========== Googleフォント読み込み ========== */
/* ========== スライダー＋テキストの外枠 ========== */
/* スライダーとテキストを重ねるためのラッパー（吉田用） */
.slider-with-text {
  position: relative; /* テキストをabsoluteで配置するための基準 */
}

/* スライダーとテキストを重ねるためのラッパー（用宗用） */
.slider-with-text-zeku {
  position: relative;
}

/* ========== 重ねるテキスト（吉田用） ========== */
.slider-overlay-text { /* ← 表示テキスト「ZEKU 吉田」 */
  position: absolute;   /* スライダー上に重ねる */
  top: 20px;            /* 上から20px */
  left: 20px;           /* 左から20px */
  font-family: "Dela Gothic One", sans-serif; /* 使用フォント */
  font-size: 60px;      /* 通常サイズ */
  font-weight: 400;     /* 太さ標準 */
  color: #ffbb00;       /* 黄色（ZEKUブランドカラー） */
  letter-spacing: -2px; /* 字間を詰める */
  z-index: 10;          /* スライダーより前面に表示 */
  pointer-events: none; /* クリック操作を無効化（背景に届く） */
}

/* ========== 重ねるテキスト（用宗用） ========== */
.slider-overlay-text-zeku { /* ← 表示テキスト「ZEKU 用宗」 */
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 60px;
  font-weight: 400;
  color: #ffbb00;
  letter-spacing: -2px;
  z-index: 10;
  pointer-events: none;
}

/* ========== スライダー画像の角丸 ========== */
/* カルーセルやスライダー画像の共通スタイル */
.wp-carousel-section .wpcp-single-item img,
.metaslider img {
  border-radius: 12px; /* 角を丸くする（数値で調整可） */
}

/* スライダー画像に対して個別に角丸設定 */
.metaslider img.ms-slide {
  border-radius: 12px;
}

/* スライダー枠全体にも角丸＋画像がはみ出ないように */
.metaslider .flexslider,
.metaslider .slides,
.metaslider .slides li {
  border-radius: 12px;      /* 全体の角丸 */
  overflow: hidden;         /* 丸からはみ出さないようにする */
  background: transparent !important; /* 背景の白などを無効化 */
}

/* ========== 重ねるテキスト(縁取り設定)（吉田用） ========== */
.slider-overlay-text { /* ← 表示テキスト「ZEKU 吉田」 */
  position: absolute;   /* スライダー上に重ねる */
  top: 20px;            /* 上から20px */
  left: 20px;           /* 左から20px */
  font-family: "Dela Gothic One", sans-serif; /* 使用フォント */
  font-size: 60px;      /* 通常サイズ */
  font-weight: 400;     /* 太さ標準 */
  color: #ffbb00;       /* 文字色：黄色（ZEKUブランドカラー） */
  letter-spacing: -2px; /* 字間を詰める */
  z-index: 10;          /* スライダーより前面に表示 */
  pointer-events: none; /* クリック操作を無効化（背景に届く） */

  /* ↓↓↓ 文字の縁取り（黒色）を追加 ↓↓↓ */
  text-shadow:
    -2px -2px 0 #000,   /* 左上 */
     2px -2px 0 #000,   /* 右上 */
    -2px  2px 0 #000,   /* 左下 */
     2px  2px 0 #000;   /* 右下 */
}

/* ========== 重ねるテキスト（用宗用） ========== */
.slider-overlay-text-zeku { /* ← 表示テキスト「ZEKU 用宗」 */
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 60px;
  font-weight: 400;
  color: #ffbb00;
  letter-spacing: -2px;
  z-index: 10;
  pointer-events: none;

  /* 縁取り（黒色） */
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}


/* ========== スマホ（横幅480px以下）用の調整 ========== */
@media screen and (max-width: 480px) {
  /* テキストサイズと位置を縮小（吉田用） */
  .slider-overlay-text {
    font-size: 32px !important; /* 小さめのテキストに変更 */
    top: 15px;                  /* 上の余白を詰める */
    left: 5px;                 /* 左の余白も詰める */
    letter-spacing: -1px;      /* 字間を少し広げる（調整） */
  }
}

/* ========== スマホ（横幅480px以下）用の調整 ========== */
@media screen and (max-width: 480px) {
  /* テキストサイズと位置を縮小（用宗用） */
  .slider-overlay-text-zeku {
    font-size: 32px !important; /* 小さめのテキストに変更 */
    top: -5px;                  /* 上の余白を詰める */
    left: 5px;                 /* 左の余白も詰める */
    letter-spacing: -1px;      /* 字間を少し広げる（調整） */
  }
}

/* ── custom 29 ── */
.custom-headline-group {
  text-align: left;
  padding-left: 1vw;       /* ← さらに左に寄せたいときに調整可能 */
  margin-top: 100px;        /* セクション上部との余白 */
  margin-bottom: 100px;     /* セクション下部との余白 */
}

.custom-headline {
  font-family: "Dela Gothic One", sans-serif;
  font-size: 80px;
  font-weight: 400;
  font-style: normal;
  color: #ffbb00;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -2px; /* ← 数値をマイナスにすると文字が詰まる */
}

/* ROOM GALLERYとSERVICE RISTの間隔調整 */
.custom-headline + .custom-headline {
  margin-top: 20px; /* ← この値を調整すれば縦の空きが増減できる！ */
}

/* ========== スマホ専用：カスタム見出し調整 ========== */
@media screen and (max-width: 480px) {
  .custom-headline-group {
    padding-top: 120px !important;   /* ← テキスト全体を少し下に押し下げる */
    padding-left: 3vw !important;   /* ← 左寄せバランス調整 */
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }

  .custom-headline {
    font-size: 48px !important;      /* ← スマホ用に少し小さめ */
    letter-spacing: -1px !important;
    line-height: 1.3 !important;
    margin-top: 10px !important;     /* ← テキスト単体の位置を下げる */
  }

  .custom-headline + .custom-headline {
    margin-top: 12px !important;     /* ← 連続した見出しの間隔も調整 */
  }
}

/* ── custom 30 ── */
/* ========== アニメーション ========== */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  animation: fadeInUp 1.2s ease-out forwards;
}

.fade-in-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 3s ease, transform 3s ease;
}
.fade-in-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========== FOODページレイアウト ========== */
.food-page .quote-with-icons {
  position: relative;
  text-align: center;
  margin: 120px auto;
  max-width: 800px;
  padding-top: 50px !important;
}

.food-page .quote-with-icons h1 {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  padding-top: 40px !important;
}

.food-page .quote-with-icons p {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  padding-top: 20px !important;
}

.food-page .icon {
  position: absolute;
  display: block;
  width: 550px;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.food-page .icon1 { top: -160px; left: -35%; transform: rotate(-15deg); } /*salad*/
.food-page .icon2 { top: -160px; right: -35%; transform: rotate(10deg); } /*pasta*/
.food-page .icon3 { top: -205px; left: 17%; transform: rotate(8deg); } /*ahijo*/
.food-page .icon4 { top: 90px; right: -15%; transform: rotate(-12deg); } /*potato*/
.food-page .icon5 { top: 50%; left: -60px; transform: rotate(0deg); } /*curry*/

.food-page .grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

.food-page .grid-gallery .item {
  margin: 0;
  padding: 0;
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.food-page .grid-gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.food-page .grid-gallery .item.wide {
  grid-column: span 2;
}
.food-page .grid-gallery .item.tall {
  grid-row: span 2;
}



/* ========== alignfull制御 ========== */
.food-page .wp-block-group.alignfull,
.food-page footer.site-footer,
.food-page footer.site-footer *,
.food-page .site-footer .wp-block-group.alignfull,
.food-page .site-footer .wp-block-group.alignfull > * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

/* ========== スマホ専用 ========== */
@media screen and (max-width: 480px) {
  .food-page .quote-with-icons {
    margin: 40px auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .food-page .quote-with-icons h1 {
    font-size: 22px !important;
    margin: 0 0 -10px 0 !important;
    max-width: 90% !important;
  }

  .food-page .quote-with-icons p {
    font-size: 14px !important;
    margin: 0 0 20px 0 !important;
    max-width: 90% !important;
  }

  .food-page .icon {
    width: 220px !important;
  }

  .food-page .icon1 { top: -65px; left: -15%; transform: rotate(-5deg); }
  .food-page .icon2 { top: -65px; right: -15%; transform: rotate(5deg); }
  .food-page .icon3 { top: -70px; left: 23%; transform: rotate(3deg); }
  .food-page .icon4 { top: 70px; right: 0%; transform: rotate(-4deg); }
  .food-page .icon5 { top: 70px; left: 0%; transform: rotate(2deg); }

  .food-page .grid-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 180px !important;
    padding: 0 10px !important;
    box-sizing: border-box;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .food-page .grid-gallery .item {
    height: auto !important;
  }

  /* 通常tallをリセット */
  .food-page .grid-gallery .item.tall {
    grid-row: auto !important;
  }

  /* sp-tall を有効に */
  .food-page .grid-gallery .item.sp-tall {
    grid-row: span 2 !important;
  }

  /* sp-wide を有効に */
  .food-page .grid-gallery .item.sp-wide {
    grid-column: span 2 !important;
  }

  /* wideだけを無効に（sp-wideでないもの） */
  .food-page .grid-gallery .item.wide:not(.sp-wide) {
    grid-column: auto !important;
  }
  .food-page .bottom-spacer {
    height: 40px !important;
  }
}

.food-page {
  overflow-x: hidden;
}

.food-page .grid-gallery {
  box-sizing: border-box;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* ── custom 31 ── */
.page-id-78 {
  background-color: #000 !important;
}

/* ── custom 32 ── */
.svg-bg-text,
.svg-bg-text2,
.svg-bg-text3 {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  overflow: visible;
}

.svg-bg-text::before { /* food */
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%; /* 中央揃え */
  transform: translate(-50%, -50%);
  background-image: url("/images/2025/05/food-1-svgrepo-com.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(78%) sepia(20%) saturate(193%) hue-rotate(3deg) brightness(90%) contrast(85%);
}

.svg-bg-text2::before { /* bedroom */
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%; /* 中央揃えに変更 */
  transform: translate(-50%, -50%);
  background-image: url("/images/2025/05/bed-single-svgrepo-com.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(78%) sepia(20%) saturate(193%) hue-rotate(3deg) brightness(90%) contrast(85%);
}

.svg-bg-text3::before { /* amenity */
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%; /* 中央揃えに変更 */
  transform: translate(-50%, -50%);
  background-image: url("/images/2025/05/perfume-3-svgrepo-com.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(78%) sepia(20%) saturate(193%) hue-rotate(3deg) brightness(90%) contrast(85%);
}

/* ── custom 33 ── */
.rounded-corner img {
  border-radius: 12px;
}

/* ── custom 34 ── */
.wp-carousel-post {
  margin: 0 !important;
  padding: 0 !important;
}

.wp-carousel-wrapper {
  padding: 0 !important;
  margin: 0 auto !important;
}

.wp-carousel-post {
  height: 100% !important;
  box-sizing: border-box;
}

.wpcp-single-item h2 a {
  color: white !important;
}

/* 投稿タイトルの文字色・折り返しを完全に制御 */
div.wpcp-all-captions h2.wpcp-post-title a {
  white-space: normal !important;    /* 折り返しを許可 */
  overflow: visible !important;      /* はみ出しを防止 */
  text-overflow: unset !important;   /* ...の省略を無効化 */
  display: block !important;         /* インラインブロック解除 */
  max-height: none !important;       /* 高さ制限を解除 */
  color: white !important;           /* 文字色を白に固定 */
  line-height: 1.4 !important;       /* 行間の調整 */
  word-break: break-word !important; /* 長い単語の折返し */
}

/* ── custom 35 ── */
/* ダイアモンドレイアウトの余白最小に */
.diamond-layout {
  margin: 0 !important;
  padding: 20px 0; /* 少しは余白残す */
  height: 800px !important; /* 1000px → 少し下げてみてもOK */
}

/* 前後にある余計なスペーサーを殺す */
/*.wp-block-spacer {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}*/


.wp-block-group.is-layout-constrained,
.wp-block-post-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.corner-item {
  position: absolute;
  width: 500px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* ← これで上下中央もいける */
  width: 500px;
  text-align: center;
  color: white;
  position: absolute;
}

.corner-item.top {
  top: 10% !important;
  left: 50%;
  transform: translateX(-50%);
}

.corner-item.left {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.corner-item.right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.corner-item.bottom {
  position: absolute;	
  bottom: 10% !important;
  left: 50%;
  transform: translateX(-50%) translateY(0); /* ← translateY を追加して補正をゼロに */
}

.line1 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 30px;
  margin: 0;
}

.line1 .first-three {
  font-family: 'Dela Gothic One', serif !important ;
  font-weight: bold;
  margin-right: 19px;
  display: inline-block;
}

.line1 .rest {
  font-size: 15px !important; /* 小さめ */
}

.line2 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 25px !important;
  margin: 8px 0 0 0;
  white-space: nowrap;
}
.corner-item .rest {
  word-break: keep-all;
  width: 320px;
}
.corner-item .first-three {
  word-break: keep-all;
  width: 320px;
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1s ease;
}

.reveal-on-scroll.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-gradient {
  background: linear-gradient(to right, white 50%, transparent 50%); /* 横向きグラデーションの設定 */
  background-size: 200% 100%; /* 背景幅のサイズ */
  background-position: 100% 0; /* 背景のスタート位置 */
  -webkit-background-clip: text; /* 背景を文字の形に切り抜いて表示 */
  -webkit-text-fill-color: transparent; /* 文字の色（透明） */
  /*animation: revealGradient 1.2s ease-out forwards; /* 表示されるまでの秒数 */
  /*opacity: 0; /* 最初は完全に見えない状態 */
  /*animation-delay: 0.3s; /* エフェクト開始までの秒数 */
  /*animation-fill-mode: forwards; /* 終了後そのままキープ */
}
/* 🔥 アクティブ時にだけアニメーションを動かす */
.reveal-gradient.active {
  animation: revealGradient 1.2s ease-out forwards;
  animation-delay: 0.3s;
  animation-fill-mode: forwards; /* ← ここは残す！ */
}

@keyframes revealGradient {
  0% {
    background-position: 100% 0; /* 背景グラデは右端 テキストは透明 */
    /*opacity: 0;*/
  }
  100% {
    background-position: 0 0; /* 背景グラデが左端に移動 テキスト可視化 */
    /*opacity: 1;*/
  }
}

@keyframes float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(2px, -4px) rotate(1deg); }
  50%  { transform: translate(0px, 0px) rotate(0deg); }
  75%  { transform: translate(-2px, 3px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.background-vector {
  position: absolute;
  width: 15%;  height: auto;
  z-index: 0; /* 背面にする */
  pointer-events: none; /* ベクターをクリックできないようにする */
  opacity: 0.5; /* 👈 透過率 0〜1で指定！ */
  fill: currentColor;
  color: #C7B299; /* 好きな色 */ 
  animation: float 4s ease-in-out infinite;
}

svg.background-vector.bg1 { /*coupen*/
  top: 45% !important;
  left: 80% !important;
}

svg.background-vector.bg2 { /*food*/
  top: 7% !important; 
  left: 40% !important;
  width: 200px;
  transform: rotate(-100deg);
}

svg.background-vector.bg3 { /*kaiinn*/
  top:  45% !important;
  left: 0% !important;
  width: 200px;
}

svg.background-vector.bg4 { /*kankou*/
  top: 70% !important;
  left: 41% !important;
  width: 200px;
}

.svg-reveal-on-scroll {
  opacity: 0;
  transition: opacity 1s ease;
}

.svg-reveal-on-scroll.active {
  opacity: 0.5 !important;
}
.svg-reveal-on-scroll.active.background-vector {
  transform: none !important;
}

/* ── custom 36 ── */
/* 強制的にタイトルリンクの色を黒に */
.wpcp-carousel-wrapper .wp-carousel-post-title a {
  color: #ffffff !important;
}

/* 日付の文字色（グレー） */
ul.wpcp-post-meta li {
  color: #ffffff !important;
}