/* ── トップページ ヒーロー1枚目：オクトーバーフェスト2026 バナー ── */
/* 元データ: oktoberfest-2026-banner.html（ID セレクタ #oktoberfest-2026-banner を
   クラス .ob-banner に変換。Swiper の loop がスライドを複製するため ID は使えない） */


  .ob-banner, .ob-banner *{ box-sizing:border-box; margin:0; padding:0; border:0; }
  .ob-banner{
    position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
    container-type:inline-size;
    isolation:isolate;
    border-radius:0;
    font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
    font-weight:500; line-height:1.4; color:#FBF4E9; text-align:center;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    background:linear-gradient(180deg,#050C22 0%,#0B1B44 42%,#143062 74%,#1B3D7A 100%);
  }
  .ob-banner .ob-l{ position:absolute; inset:0; pointer-events:none; }

  /* ---------- atmosphere ---------- */
  .ob-banner .ob-glow{
    z-index:0;
    background:
      radial-gradient(ellipse 58% 30% at 50% 105%, rgba(214,154,52,.34), rgba(214,154,52,0) 70%),
      radial-gradient(ellipse 70% 46% at 50% -14%, rgba(126,168,255,.16), rgba(126,168,255,0) 70%);
    animation:ob-breathe 15s ease-in-out infinite;
  }
  .ob-banner .ob-stars{ z-index:1; }
  .ob-banner .ob-stars svg{ width:100%; height:100%; display:block; }
  .ob-banner .ob-stars circle{ animation-name:ob-twinkle; animation-iteration-count:infinite; animation-timing-function:ease-in-out; }
  .ob-banner .ob-far{ animation:ob-driftA 15s ease-in-out infinite; }
  .ob-banner .ob-near{ animation:ob-driftB 15s ease-in-out infinite; }

  /* ---------- fireworks ---------- */
  .ob-banner .ob-fwl{ z-index:2; }
  .ob-banner .ob-fw{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; }
  .ob-banner .ob-fw > i{ position:absolute; display:block; }
  .ob-banner .ob-trail{
    left:-.1cqw; top:0; width:.2cqw; height:5.2cqw; border-radius:99px;
    transform-origin:50% 0%; opacity:0;
    background:linear-gradient(180deg,#FFFBF0 0%,var(--c) 18%,var(--c2) 100%);
    animation:15s linear infinite both; animation-delay:var(--t);
  }
  .ob-banner .ob-flash{
    width:calc(var(--R)*1.4); height:calc(var(--R)*1.4);
    left:calc(var(--R)*-.7); top:calc(var(--R)*-.7);
    border-radius:50%; opacity:0;
    background:radial-gradient(circle at 50% 50%, #FFFDF6 0%, var(--c) 14%, var(--c2) 52%);
    animation:15s linear infinite both; animation-delay:var(--t);
  }
  .ob-banner .ob-p{ left:0; top:0; width:0; height:0; animation:15s linear infinite both; animation-delay:var(--t); }
  .ob-banner .ob-p > i{
    position:absolute; display:block;
    width:calc(var(--w) * var(--e)); height:var(--w);
    left:calc(var(--w) * var(--e) / -2); top:calc(var(--w) / -2);
    border-radius:50%; opacity:0;
    background:radial-gradient(ellipse at 78% 50%, #FFFDF6 0%, var(--pc) 30%, var(--pc0) 74%);
    animation:15s linear infinite both, 15s linear infinite both;
    animation-delay:var(--t), var(--t);
  }
  .ob-banner .ob-peony  .ob-trail{ animation-name:ob-tr-peony; }
  .ob-banner .ob-peony  .ob-flash{ animation-name:ob-fl-peony; }
  .ob-banner .ob-peony  .ob-p{ animation-name:ob-gv-peony; }
  .ob-banner .ob-peony  .ob-p > i{ animation-name:ob-fy-peony, ob-fd-peony; }
  .ob-banner .ob-willow .ob-trail{ animation-name:ob-tr-willow; }
  .ob-banner .ob-willow .ob-flash{ animation-name:ob-fl-willow; }
  .ob-banner .ob-willow .ob-p{ animation-name:ob-gv-willow; }
  .ob-banner .ob-willow .ob-p > i{ animation-name:ob-fy-willow, ob-fd-willow; }
  .ob-banner .ob-small  .ob-trail{ animation-name:ob-tr-small; }
  .ob-banner .ob-small  .ob-flash{ animation-name:ob-fl-small; }
  .ob-banner .ob-small  .ob-p{ animation-name:ob-gv-small; }
  .ob-banner .ob-small  .ob-p > i{ animation-name:ob-fy-small, ob-fd-small; }

  /* ---------- legibility scrim ---------- */
  .ob-banner .ob-scrim{
    z-index:3;
    background:
      radial-gradient(ellipse 40% 20% at 50% 25%, rgba(5,11,30,.52), rgba(5,11,30,0) 74%),
      radial-gradient(ellipse 44% 40% at 50% 48%, rgba(5,11,30,.58), rgba(5,11,30,.24) 58%, rgba(5,11,30,0) 78%),
      linear-gradient(180deg, rgba(5,12,34,.32) 0%, rgba(5,12,34,0) 24%);
  }

  /* ---------- scenery ---------- */
  .ob-banner .ob-motif{ z-index:3; }
  .ob-banner .ob-mug{ position:absolute; left:2.6cqw; top:52%; width:8.4cqw; opacity:.17;
    animation:ob-motif 15s ease-in-out infinite; }
  .ob-banner .ob-scene{ z-index:4; top:auto; bottom:-.2cqw; height:auto; }
  .ob-banner .ob-scene svg{ width:100%; height:auto; display:block; }
  .ob-banner .ob-lant{ z-index:5; top:0; height:auto; }
  .ob-banner .ob-lant svg{ width:100%; height:auto; display:block; }
  .ob-banner .ob-lant-l{ left:0; right:auto; width:26cqw; }
  .ob-banner .ob-lant-r{ right:0; left:auto; width:26cqw; }
  .ob-banner .ob-lantern{ transform-box:fill-box; transform-origin:50% 0%;
    animation:ob-sway 5s ease-in-out infinite; }
  .ob-banner .sw-a{ animation-duration:5s;   animation-delay:-1.2s; }
  .ob-banner .sw-b{ animation-duration:7.5s; animation-delay:-3.4s; }
  .ob-banner .sw-c{ animation-duration:3.75s;animation-delay:-.6s; }
  .ob-banner .sw-d{ animation-duration:5s;   animation-delay:-3.1s; }
  .ob-banner .sw-e{ animation-duration:7.5s; animation-delay:-5.8s; }

  /* ---------- content ---------- */
  .ob-banner .ob-content{
    position:absolute; inset:0; z-index:6;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:4.4cqw 6cqw 15.6cqw;
  }
  .ob-banner .ob-eyebrow{
    display:inline-block;
    font-size:max(8px,1.32cqw); font-weight:500; letter-spacing:.2em;
    color:rgba(251,244,233,.95);
    padding:.62em 1.5em .62em 1.7em; border-radius:999px;
    border:1px solid rgba(251,244,233,.34); background:rgba(251,244,233,.09);
    white-space:nowrap;
  }
  .ob-banner .ob-title{
    margin-top:2.6cqw;
    font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
    font-weight:800; font-size:5.5cqw; line-height:1.06; letter-spacing:.05em;
    text-indent:.05em; white-space:nowrap;
    color:#FBF4E9;
    text-shadow:0 .1cqw 1.9cqw rgba(5,12,34,.9), 0 0 .5cqw rgba(5,12,34,.55);
  }
  .ob-banner .ob-year{
    position:relative; margin-top:.4cqw;
    font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
    font-weight:800; font-size:6.6cqw; line-height:1.05; letter-spacing:.16em;
    text-indent:.16em; color:#F2C879;
  }
  .ob-banner .ob-year::before{
    content:""; position:absolute; left:-30%; right:-30%; top:-30%; bottom:-30%;
    z-index:-1; border-radius:50%;
    background:radial-gradient(ellipse at 50% 50%, rgba(242,200,121,.22), rgba(242,200,121,.07) 46%, rgba(242,200,121,0) 72%);
    animation:ob-glowpulse 15s ease-in-out infinite;
  }
  .ob-banner .ob-rule{
    margin-top:1.9cqw; width:26cqw; height:1.1cqw; position:relative;
  }
  .ob-banner .ob-rule svg{ width:100%; height:100%; display:block; overflow:visible; }
  .ob-banner .ob-tagline{
    margin-top:1.75cqw;
    font-size:max(9px,1.62cqw); font-weight:500; letter-spacing:.08em;
    color:rgba(251,244,233,.93);
    text-shadow:0 .1cqw 1cqw rgba(5,12,34,.7);
  }
  .ob-banner .ob-dates{
    margin-top:2.5cqw; display:inline-flex; align-items:center; justify-content:center;
    gap:1.5cqw; padding:.95cqw 2.6cqw; border-radius:1.35cqw;
    border:1px solid rgba(251,244,233,.28);
    background:linear-gradient(180deg, rgba(251,244,233,.10), rgba(251,244,233,.05));
    box-shadow:inset 0 0 2.6cqw rgba(5,12,34,.35);
  }
  .ob-banner .ob-date{
    font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
    font-weight:800; font-size:max(13px,2.85cqw); line-height:1; letter-spacing:.045em;
    color:#FBF4E9; white-space:nowrap;
  }
  .ob-banner .ob-dash{ display:block; width:2.2cqw; height:.13cqw; min-height:1px; background:#F2C879; border-radius:2px; }
  .ob-banner .ob-meta{
    margin-top:1.5cqw; display:inline-flex; align-items:center; gap:1.3cqw;
    font-size:max(8.5px,1.36cqw); font-weight:500; letter-spacing:.13em;
    color:rgba(251,244,233,.86); white-space:nowrap;
  }
  .ob-banner .ob-dot{ display:block; width:.42cqw; height:.42cqw; min-width:2px; min-height:2px;
    border-radius:50%; background:#D69A34; }

  /* ---------- entrance ---------- */
  .ob-banner .ob-in{ opacity:1; animation:ob-rise 1.05s cubic-bezier(.16,.86,.28,1) both; }
  .ob-banner .ob-d1{ animation-delay:.15s; }
  .ob-banner .ob-d2{ animation-delay:.34s; animation-name:ob-riseBig; }
  .ob-banner .ob-d3{ animation-delay:.54s; animation-name:ob-riseBig; }
  .ob-banner .ob-d4{ animation-delay:.76s; }
  .ob-banner .ob-d5{ animation-delay:.94s; }
  .ob-banner .ob-d6{ animation-delay:1.14s; }
  .ob-banner .ob-d7{ animation-delay:1.3s; }

  @keyframes ob-rise{
    from{ opacity:0; transform:translate3d(0,1.6cqw,0); }
    to{ opacity:1; transform:translate3d(0,0,0); }
  }
  @keyframes ob-riseBig{
    from{ opacity:0; transform:translate3d(0,2.6cqw,0) scale(.955); }
    to{ opacity:1; transform:translate3d(0,0,0) scale(1); }
  }
  @keyframes ob-twinkle{
    0%,100%{ opacity:.16; transform:scale(.8); }
    50%{ opacity:1; transform:scale(1.15); }
  }
  @keyframes ob-driftA{
    0%,100%{ transform:translate3d(-.35cqw,.18cqw,0); }
    50%{ transform:translate3d(.35cqw,-.18cqw,0); }
  }
  @keyframes ob-driftB{
    0%,100%{ transform:translate3d(1.05cqw,-.3cqw,0) scale(1.012); }
    50%{ transform:translate3d(-1.05cqw,.3cqw,0) scale(1); }
  }
  @keyframes ob-breathe{
    0%,100%{ opacity:.8; }
    46%{ opacity:1; }
  }
  @keyframes ob-glowpulse{
    0%,100%{ opacity:.55; transform:scale(.94); }
    12%{ opacity:1; transform:scale(1.04); }
    40%{ opacity:.6; transform:scale(.97); }
    68%{ opacity:.95; transform:scale(1.02); }
  }
  @keyframes ob-sway{
    0%{ transform:rotate(-3.2deg); animation-timing-function:cubic-bezier(.37,0,.63,1); }
    50%{ transform:rotate(3.2deg); animation-timing-function:cubic-bezier(.37,0,.63,1); }
    100%{ transform:rotate(-3.2deg); }
  }
  @keyframes ob-motif{
    0%,100%{ opacity:.13; transform:translate3d(0,.3cqw,0) rotate(-1.5deg); }
    50%{ opacity:.22; transform:translate3d(0,-.3cqw,0) rotate(1.5deg); }
  }

  /* ---------- narrow containers ---------- */
  @container (max-width: 700px){
    .ob-banner .ob-content{ padding:3.4cqw 4cqw 14.4cqw; }
    .ob-banner .ob-eyebrow{ letter-spacing:.12em; padding:.5em 1.1em; }
    .ob-banner .ob-title{ margin-top:2cqw; letter-spacing:.02em; }
    .ob-banner .ob-rule{ margin-top:1.4cqw; }
    .ob-banner .ob-tagline{ margin-top:1.3cqw; letter-spacing:.03em; }
    .ob-banner .ob-dates{ margin-top:1.7cqw; gap:1.1cqw; padding:.8cqw 1.8cqw; }
    .ob-banner .ob-meta{ margin-top:1.1cqw; gap:.9cqw; letter-spacing:.06em; }
  }

  /* ---------- reduced motion: a frozen, fully legible frame ---------- */
  @media (prefers-reduced-motion: reduce){
    .ob-banner *, .ob-banner *::before, .ob-banner *::after{ animation:none !important; transition:none !important; }
    .ob-banner .ob-in{ opacity:1 !important; transform:none !important; }
    .ob-banner .ob-stars circle{ opacity:.82; }
    .ob-banner .ob-glow{ opacity:.95; }
    .ob-banner .ob-mug{ opacity:.17; }
    .ob-banner .ob-year::before{ opacity:.85; }
    .ob-banner .ob-fw{ display:none; }
    .ob-banner .ob-fw.ob-keep{ display:block; }
    .ob-banner .ob-keep .ob-trail{ display:none; }
    .ob-banner .ob-keep .ob-flash{ opacity:.2; transform:scale(.9); }
    .ob-banner .ob-keep .ob-p{ transform:translate3d(0,calc(var(--g)*.34),0); }
    .ob-banner .ob-keep .ob-p > i{ opacity:.88; transform:rotate(var(--a)) translate3d(var(--r),0,0) scale(1); }
  }

@keyframes ob-tr-peony {
  0%   { opacity:0; transform:translate3d(0,var(--ly),0) scaleY(.45); animation-timing-function:linear; }
  0.38% { opacity:.85; transform:translate3d(0,calc(var(--ly)*.955),0) scaleY(1); animation-timing-function:cubic-bezier(.14,.62,.32,1); }
  5.193% { opacity:.8; transform:translate3d(0,calc(var(--ly)*.11),0) scaleY(1.25); animation-timing-function:cubic-bezier(.3,.2,.7,.9); }
  6.3333% { opacity:0; transform:translate3d(0,0,0) scaleY(.6); }
  100% { opacity:0; transform:translate3d(0,0,0) scaleY(.6); }
}
@keyframes ob-fl-peony {
  0%,6.3333% { opacity:0; transform:scale(.18); animation-timing-function:cubic-bezier(.08,.8,.3,1); }
  7.15% { opacity:.6; transform:scale(.85); animation-timing-function:cubic-bezier(.3,.05,.6,.4); }
  11.233% { opacity:0; transform:scale(1.6); }
  100% { opacity:0; transform:scale(1.6); }
}
@keyframes ob-gv-peony {
  0%,6.3333% { transform:translate3d(0,0,0); animation-timing-function:cubic-bezier(.48,0,.86,.52); }
  22.6667%,100% { transform:translate3d(0,var(--g),0); }
}
@keyframes ob-fy-peony {
  0%,6.3333% { transform:rotate(var(--a)) translate3d(0,0,0) scale(1.35); animation-timing-function:cubic-bezier(.06,.72,.24,1); }
  22.6667%,100% { transform:rotate(var(--a)) translate3d(var(--r),0,0) scale(.55); }
}
@keyframes ob-fd-peony {
  0%,6.3333% { opacity:0; animation-timing-function:linear; }
  6.987% { opacity:1; animation-timing-function:cubic-bezier(.35,.06,.72,.42); }
  16.46% { opacity:.82; animation-timing-function:cubic-bezier(.4,0,.85,.4); }
  22.6667%,100% { opacity:0; }
}
@keyframes ob-tr-willow {
  0%   { opacity:0; transform:translate3d(0,var(--ly),0) scaleY(.45); animation-timing-function:linear; }
  0.46% { opacity:.85; transform:translate3d(0,calc(var(--ly)*.955),0) scaleY(1); animation-timing-function:cubic-bezier(.14,.62,.32,1); }
  6.287% { opacity:.8; transform:translate3d(0,calc(var(--ly)*.11),0) scaleY(1.25); animation-timing-function:cubic-bezier(.3,.2,.7,.9); }
  7.6667% { opacity:0; transform:translate3d(0,0,0) scaleY(.6); }
  100% { opacity:0; transform:translate3d(0,0,0) scaleY(.6); }
}
@keyframes ob-fl-willow {
  0%,7.6667% { opacity:0; transform:scale(.18); animation-timing-function:cubic-bezier(.08,.8,.3,1); }
  8.867% { opacity:.6; transform:scale(.85); animation-timing-function:cubic-bezier(.3,.05,.6,.4); }
  14.867% { opacity:0; transform:scale(1.6); }
  100% { opacity:0; transform:scale(1.6); }
}
@keyframes ob-gv-willow {
  0%,7.6667% { transform:translate3d(0,0,0); animation-timing-function:cubic-bezier(.48,0,.86,.52); }
  31.6667%,100% { transform:translate3d(0,var(--g),0); }
}
@keyframes ob-fy-willow {
  0%,7.6667% { transform:rotate(var(--a)) translate3d(0,0,0) scale(1.35); animation-timing-function:cubic-bezier(.06,.72,.24,1); }
  31.6667%,100% { transform:rotate(var(--a)) translate3d(var(--r),0,0) scale(.55); }
}
@keyframes ob-fd-willow {
  0%,7.6667% { opacity:0; animation-timing-function:linear; }
  8.627% { opacity:1; animation-timing-function:cubic-bezier(.35,.06,.72,.42); }
  22.547% { opacity:.82; animation-timing-function:cubic-bezier(.4,0,.85,.4); }
  31.6667%,100% { opacity:0; }
}
@keyframes ob-tr-small {
  0%   { opacity:0; transform:translate3d(0,var(--ly),0) scaleY(.45); animation-timing-function:linear; }
  0.288% { opacity:.85; transform:translate3d(0,calc(var(--ly)*.955),0) scaleY(1); animation-timing-function:cubic-bezier(.14,.62,.32,1); }
  3.936% { opacity:.8; transform:translate3d(0,calc(var(--ly)*.11),0) scaleY(1.25); animation-timing-function:cubic-bezier(.3,.2,.7,.9); }
  4.8% { opacity:0; transform:translate3d(0,0,0) scaleY(.6); }
  100% { opacity:0; transform:translate3d(0,0,0) scaleY(.6); }
}
@keyframes ob-fl-small {
  0%,4.8% { opacity:0; transform:scale(.18); animation-timing-function:cubic-bezier(.08,.8,.3,1); }
  5.4% { opacity:.6; transform:scale(.85); animation-timing-function:cubic-bezier(.3,.05,.6,.4); }
  8.4% { opacity:0; transform:scale(1.6); }
  100% { opacity:0; transform:scale(1.6); }
}
@keyframes ob-gv-small {
  0%,4.8% { transform:translate3d(0,0,0); animation-timing-function:cubic-bezier(.48,0,.86,.52); }
  16.8%,100% { transform:translate3d(0,var(--g),0); }
}
@keyframes ob-fy-small {
  0%,4.8% { transform:rotate(var(--a)) translate3d(0,0,0) scale(1.35); animation-timing-function:cubic-bezier(.06,.72,.24,1); }
  16.8%,100% { transform:rotate(var(--a)) translate3d(var(--r),0,0) scale(.55); }
}
@keyframes ob-fd-small {
  0%,4.8% { opacity:0; animation-timing-function:linear; }
  5.28% { opacity:1; animation-timing-function:cubic-bezier(.35,.06,.72,.42); }
  12.24% { opacity:.82; animation-timing-function:cubic-bezier(.4,0,.85,.4); }
  16.8%,100% { opacity:0; }
}

  /* ---------- テーマCSSの漏れ込み防止 ---------- */
  /* style.css は h2 に背景色・枠線を、p に padding/line-height を素の要素セレクタで
     当てている。バナー内の要素にそれが乗ると帯状の矩形が出るので打ち消す。
     内側の背景（.ob-glow / .ob-dash 等）は詳細度 (0,2,0) なので影響を受けない。 */
  .ob-banner *{
    background:none;
    line-height:inherit;
    font-style:inherit;
    text-decoration:none;
  }

  /* ---------- ヒーロースライダーへの組み込み ---------- */
  /* .hero 側を 16:9 にしてあるので、バナーは自前の aspect-ratio を捨てて
     スライドいっぱいに広がる。万一スライドの比率がずれても letterbox せず埋める。 */
  .hero .swiper-slide .ob-banner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    aspect-ratio:auto;
  }

  /* バナー全体を /octoberfest へのリンクにする。
     .ob-banner が absolute なので、包む <a> 側も positioned にしておく。 */
  .hero .swiper-slide .ob-banner-link{
    position:absolute;
    inset:0;
    display:block;
    color:inherit;
    text-decoration:none;
    background:none;
    border:0;
    cursor:pointer;
  }
  .hero .swiper-slide .ob-banner-link:focus-visible{
    outline:3px solid #F2C879;
    outline-offset:-3px;
  }
  /* ホバー／フォーカスでほんのり明るく（クリックできることを示す程度）。
     バナー本体に filter を掛けると花火アニメごと再描画になるため、
     薄いベールを1枚重ねて opacity だけ動かす。 */
  .hero .swiper-slide .ob-banner-link::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(251,244,233,.08);
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
  }
  .hero .swiper-slide .ob-banner-link:hover::after,
  .hero .swiper-slide .ob-banner-link:focus-visible::after{
    opacity:1;
  }
  @media (prefers-reduced-motion: reduce){
    .hero .swiper-slide .ob-banner-link::after{ transition:none; }
  }