/* ページ本文内にだけ配置。既存サイトの波・写真・文字・メニューには影響させない。 */
main.ybci-illustration-host { position: relative; }
/* 共通アクセス／周辺情報セクションだけを位置の基準にする。 */
.access-strip.ybci-access-illustration-host { position: relative; }
/* 従来の本文レイヤーと同じ描画スタイル。セクション外には出さない。 */
.ybci-access-layer { overflow: hidden; }
.ybci-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none !important;
  overflow: hidden; /* ページ幅からはみ出す飾りが横スクロールを作らない */
  background: transparent;
}
.ybci-layer[hidden] { display: none !important; }
.ybci-art {
  position: absolute;
  top: var(--ybci-pc-top);
  left: var(--ybci-pc-left);
  right: var(--ybci-pc-right);
  width: var(--ybci-pc-width);
  max-width: none;
  z-index: var(--ybci-level, 2);
  opacity: var(--ybci-opacity, 1);
  mix-blend-mode: var(--ybci-blend, normal);
  transform: translateX(var(--ybci-pc-shift, 0%));
  pointer-events: none !important;
}
.ybci-art-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  /* Independent rotate combines with the existing floating transform animation. */
  rotate: var(--ybci-pc-rotate, 0deg);
  scale: var(--ybci-pc-flip-x, 1) var(--ybci-pc-flip-y, 1);
  transform-origin: center center;
}
.ybci-float .ybci-art-image {
  animation: ybci-gentle-float 8.5s ease-in-out infinite;
  animation-delay: var(--ybci-delay, 0s);
  will-change: transform;
}
@keyframes ybci-gentle-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1deg); }
}
.ybci-hide-pc { display: none; }
@media (max-width: 767px) {
  .ybci-art {
    top: var(--ybci-sp-top);
    left: var(--ybci-sp-left);
    right: var(--ybci-sp-right);
    width: var(--ybci-sp-width);
    transform: translateX(var(--ybci-sp-shift, 0%));
  }
  .ybci-art-image {
    rotate: var(--ybci-sp-rotate, 0deg);
    scale: var(--ybci-sp-flip-x, 1) var(--ybci-sp-flip-y, 1);
  }
  .ybci-hide-pc { display: block; }
  .ybci-hide-sp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ybci-float .ybci-art-image { animation: none !important; will-change: auto; }
}

/* v1.3.3: ファーストビューよりアクセス欄が手前に来る積層関係を維持。
   本文全体の装飾レイヤーは z-index:15。アクセスセクションを16にすることで
   sticky のTOP写真（z-index:1）がアクセス欄を隠すのを防ぐ。
   アクセス専用の装飾はそのセクションの中で地図より前、文字より後ろに配置。 */
.access-strip.ybci-access-illustration-host {
  position: relative;
  z-index: 16;
  isolation: isolate;
}

/* セクション内: 地図・写真 = 0、装飾 = 1、文章・リンク = 2 */
.access-strip.ybci-access-illustration-host > .map-frame,
.access-strip.ybci-access-illustration-host > .map-placeholder {
  position: relative;
  z-index: 0;
}
.access-strip.ybci-access-illustration-host > .ybci-access-layer,
.access-strip.ybci-access-illustration-host > .ybci-access-overlap-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none !important;
  overflow: hidden;
}
.access-strip.ybci-access-illustration-host > .container {
  position: relative;
  z-index: 2;
}

/* 文字にだけ、アクセス欄のベージュ背景と同系色の柔らかい縁取り。 */
.access-strip.ybci-access-illustration-host > .container {
  text-shadow:
    0 0 1px var(--cream, #f5efea),
    0 0 3px var(--cream, #f5efea),
    0 0 6px var(--cream, #f5efea),
    0 0 9px var(--cream, #f5efea);
}

/* 共通の最下部フッターと上に戻るボタンは本文装飾より前面に。 */
body .site-footer { position: relative; z-index: 40; }
body .to-top { z-index: 80; }

/* v1.3.3: 本文配置のイラストがアクセス欄と重なる部分を表示。
   複製レイヤーはaccessセクションの中でのみ描画し、文字の前には出さない。 */
.access-strip.ybci-access-illustration-host > .ybci-access-overlap-layer {
  overflow: hidden;
}
/* 箇条書きの丸は擬似要素なので文字用text-shadowが効かない。
   本文と同じクリーム色の柔らかな縁を丸の周囲にだけ描く。 */
.access-strip.ybci-access-illustration-host .access-nearby li::before {
  box-shadow:
    0 0 0 2px var(--cream, #f5efea),
    0 0 5px 4px var(--cream, #f5efea),
    0 0 10px 6px rgba(245, 239, 234, .75);
}