/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Version: 1.7
Description: 縦ナビ（Safari安定）— 全項目表示 & ホバーでズレない最終版
*/

body {
  font-family: "Shimanami JIS2004", serif;
}

:root :where(.is-layout-flex) {
    gap: 2rem;
}

/* --- フォーカス枠を非表示 --- */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* --- スマホSafari用：タップ時のハイライトも非表示 --- */
* {
  -webkit-tap-highlight-color: transparent;
}
.right{text-align: right;}
.center{text-align: center;}
.w100p{width: 100%;}

@media (max-width: 781px) {.header_logo{height: 103px;}}
@media (max-width: 781px) {.header_logo img{width: auto; height: 120px !important;}}


/* =========================================================
   footer
========================================================= */
footer.wp-block-template-part{
	margin-block-start: 0;
}

/* =========================================================
   共通：下部固定ナビ
========================================================= */
.fixed-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: transparent; color: #fff;
  z-index: 10000; border-top: 1px solid #84724c; isolation: isolate;
}
.fixed-bottom-nav::before {
  content: ""; position: absolute; inset: 0; background: #766644; z-index: -1;
}
.fixed-bottom-nav__list {
  display: flex; justify-content: space-around; align-items: center;
  margin: 0 auto; padding: 0.8rem 0; list-style: none; max-width: 1000px;
}
.fixed-bottom-nav__list a,
.fixed-bottom-nav__list button {
  color: #fff; background: none; border: none; text-decoration: none;
  font-size: 0.8rem; display: flex; flex-direction: column; align-items: center;
  transition: opacity .2s; cursor: pointer;
}
.fixed-bottom-nav__list a:hover,
.fixed-bottom-nav__list button:hover { opacity: .8; }
.fixed-bottom-nav__list svg { width: 24px; height: 24px; margin-bottom: .2rem; stroke-width: 1.8; }
.icon-plate { stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
body { padding-bottom: 70px; }

/* =========================================================
   スライド式オーバーレイメニュー
========================================================= */
.overlay-menu {
  position: fixed; inset: 0; background: rgba(0,0,0,.9); color: #fff;
  transform: translateY(100%); transition: transform .4s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10001;
}
.overlay-menu.active { transform: translateY(0); }
.overlay-menu__list { list-style: none; padding: 0; text-align: center; }
.overlay-menu__list li { margin: 1.2rem 0; }
.overlay-menu__list a {
  color: #fff; text-decoration: none; font-size: 1.3rem; font-weight: 600; transition: color .2s;
}
.overlay-menu__list a:hover { color: #ddd; }
.overlay-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; cursor: pointer; }
.overlay-close svg { width: 28px; height: 28px; }

@media (min-width: 1024px) {
  .fixed-bottom-nav__list { max-width: 1000px; margin: 0 auto; }
}

/* =========================================================
   KV
========================================================= */
.wp-block-group { position: relative; }
.logo-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; z-index: 10; pointer-events: none; }
.waragamo-carousel { position: relative; overflow: hidden; max-height: 500px; }
.waragamo-carousel img { width: 100%; height: 100%; max-height: 500px; object-fit: cover; object-position: center; display: block; position: relative; z-index: 1; }
.waragamo-carousel::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); z-index: 2; pointer-events: none; }
.waragamo-carousel { margin-top: 0 !important; padding-top: 0 !important; }


/* =========================================================
   おしらせ
========================================================= */
@media (max-width: 781px) {
.oshirase_gap{gap:0;}
}
@media (max-width: 781px) {
.oshirase_date time{font-size: 0.6rem;}
}


/* =========================================================
   右側：縦書きページ内リンク（全項目表示 & ホバーでズレない）
========================================================= */

/* 横スクロール防止（クリック時のXズレ対策） */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- コンテナ --- */
.page-side-index{
  position: fixed;
  right: 12px; left: auto;
  top: 50%; transform: translateY(-50%); /* JSでも補正しますがCSSのみでも中央に来る */
  z-index: 2147483647;
  writing-mode: horizontal-tb;  /* 親は横書きのまま */
  contain: none;                /* Safariでのクリップ回避 */
  overflow: visible;
  pointer-events: auto;         /* Safariの省略描画を避ける */
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}

/* --- 縦に積む（右端揃え） --- */
.page-side-index ul{
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 12px; margin: 0; padding: 0; list-style: none;
  position: relative; overflow: visible;
}
/* WebKit系だけ（Safari含む） */  /* SafariやiOSのChrome/Firefox(中身はWebKit)にも効く */
@supports (-webkit-touch-callout: none) {
	.page-side-index ul{top:100px;}
}

/* --- 各項目：ここで“列幅”を固定する（ズレ防止のキモ） --- */
.page-side-index li{
  margin: 0; padding: 0; position: relative; overflow: visible;
  width: 2.6em;                /* ← 列の“横幅”を固定（1.8〜3.0emで微調整可） */
  /* レイヤー安定化（Safariのサブピクセルブレ抑制） */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* --- 縦書きリンク --- */
.page-side-index a{
  display: block; width: 100%;          /* ← liの固定幅いっぱいにする */
  writing-mode: vertical-rl; text-orientation: mixed;
  text-align: center; text-decoration: none;
  color: #111;                          /* 通常色 */
  font-family: "Shimanami JIS2004", serif;
  font-size: 16px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; letter-spacing: 0; box-sizing: border-box;

  /* hoverで変えるのは“見た目のみ”。レイアウト関連は一切変更しない */
  transition: opacity .2s ease, color .2s ease;

  /* Safariの再ラスタライズ対策（合成レイヤー化） */
  will-change: opacity;
  transform: translateZ(0); -webkit-transform: translateZ(0);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}

/* hover：不透明度/色のみ（寸法に影響なし） */
.page-side-index a:hover { opacity: .85; color: #111; }
.page-side-index a.active { color: #111; }

/* --- 区切り「／」 --- */
.page-side-index li:not(:last-child)::after{
  content: "／";
  display: block;
  writing-mode: vertical-rl;
  text-align: center;
  opacity: .6;
  margin: 1em 0 1em 1.3em; line-height: 1;
}

/* --- 見出しアンカー位置補正 --- */
#set, #course, #ippin, #drink { scroll-margin-top: 90px; }

/* --- モバイル微調整 --- */
@media (max-width: 480px){
  .page-side-index{ right: 8px; }
}


/* =========================================================
　　逸品セクション
========================================================= */
/* スマホ縦積み時の余白もゼロ */
@media (max-width: 781px) {
.is-layout-flex.ippin-cols{
    gap: 0;
  }
}




/* =========================================================
　　装飾
========================================================= */

.hr-gld{size:1px;color:#a29069;}
.hr-gld-double{size:1px;color:#a29069;border-bottom: double;}


/*　見出し　ゴールドのアンダーライン　*/
.title_underline {
  padding-bottom: 10px;
  border-bottom: 1px solid #a29069;
  display: inline-block;
  text-align: center; /* ←これはinline-blockでは効かない */
}
.title_wrap-center {
  text-align: center;
}


/*　見出し　【　】　*/

.instagram-link {
  display: inline-flex;      /* 横並び */
  align-items: center;       /* ベースラインのズレ防止 */
  gap: .4em;                 /* アイコンと文字の間隔 */
}
.instagram-link .icon-instagram {
  display: block;            /* 余計な隙間を消す */
}