/* =====================================================================
   Night Bloom 2026 — Gunma Flower Park+  LP
   Figma: Night-Bloom-2026_修正版（1440px基準）2026-09-10 更新版に追従
   ===================================================================== */
:root{
  --nb-bg:#110701;
  --nb-cream:#f5e6d3;
  --nb-gold:#c8a82e;
  --nb-green:#2e483f;
  --nb-white:#ffffff;
  --nb-muted:#8a7a55;
  --nb-font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --nb-font-en:"EB Garamond",Georgia,"Times New Roman",serif;
  --nb-container:1200px;
}
html{scroll-behavior:smooth}
body.nightbloom{margin:0;background:var(--nb-bg);color:var(--nb-white);font-family:var(--nb-font-jp);font-feature-settings:"palt";-webkit-font-smoothing:antialiased;line-height:1.8;overflow-x:hidden}
.nightbloom :where(*,*::before,*::after){box-sizing:border-box}
.nightbloom :where(h1,h2,h3){margin:0;font-size:inherit;font-weight:inherit}
.nightbloom :where(img){max-width:100%;height:auto;display:block}
.nightbloom :where(a){color:inherit;text-decoration:none}
.nightbloom :where(p){margin:0}
.nightbloom :where(ul){margin:0;padding:0;list-style:none}
.nightbloom :where(figure){margin:0}
.nb-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 全体レイヤー ---------- */
.nb-page{position:relative;overflow:hidden}
.nb-container{width:min(var(--nb-container),calc(100% - 48px));margin-inline:auto}

/* ---------- 光のボケ（装飾） ---------- */
.nb-bokeh{position:absolute;inset:0;pointer-events:none;z-index:0}
.nb-bokeh span{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,217,128,.9) 0%,rgba(255,200,100,.5) 28%,rgba(255,190,80,.2) 52%,rgba(255,190,80,.06) 70%,rgba(255,190,80,0) 100%);transform:scale(1.25);opacity:.2;will-change:transform;animation:nb-drift 18s ease-in-out infinite alternate}
.nb-bokeh span:nth-child(2n){animation-duration:23s}
.nb-bokeh span:nth-child(3n){animation-duration:27s;animation-delay:-8s}
@keyframes nb-drift{from{transform:translate3d(0,0,0) scale(1.25)}to{transform:translate3d(24px,-32px,0) scale(1.25)}}
@media (prefers-reduced-motion:reduce){.nb-bokeh span{animation:none}}

/* ---------- ヘッダー ---------- */
.nb-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:26px 40px}
.nb-header__logo img{width:266px}
.nb-header__nav{display:flex;align-items:center;gap:26px}
.nb-header__lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--nb-font-en);font-weight:500;font-size:12px;line-height:1}
.nb-header__lang img:first-child{width:22px}
.nb-header__lang img:last-child{width:7px;transform:rotate(180deg)}
.nb-header__sns{display:flex;align-items:center;gap:18px}
.nb-header__sns a{display:block}
.nb-header__sns img{width:22px;height:22px;object-fit:contain}
.nb-btn-ticket{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border:2px solid var(--nb-white);border-radius:3px;font-size:14px;font-weight:700;line-height:1;transition:background .3s,color .3s}
.nb-btn-ticket img{width:21px}
.nb-btn-ticket:hover{background:var(--nb-white);color:var(--nb-bg)}
.nb-btn-ticket:hover img{filter:invert(1)}

/* ---------- ヒーロー ---------- */
.nb-hero{position:relative;z-index:1;height:clamp(620px,70vw,1009px)}
/* 写真の下端は「不透明な背景色を重ねる」のではなくマスクで透明にフェードさせる。
   重ねる方式だと、その領域で背後の .nb-bokeh が完全に遮られ、
   ヒーロー下端をまたぐ光の玉が半円に切れて見えるため。 */
.nb-hero__bg{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,0) 89%);
          mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,0) 89%)}
.nb-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center top}
.nb-hero__inner{position:absolute;inset:0;z-index:2}
.nb-hero__title{position:absolute;left:6.4%;top:37.8%;width:54.3%;filter:drop-shadow(0 4px 24px rgba(0,0,0,.45))}
.nb-hero__date{position:absolute;left:7.15%;top:50.7%;width:31.7%}
.nb-hero__lead{position:absolute;left:0;right:0;top:69.3%;z-index:2;text-align:center;font-size:24px;line-height:50px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.nb-sp-only{display:none}

/* ---------- 共通セクション ---------- */
.nb-section{position:relative;z-index:1}
.nb-section__title{display:block;margin-inline:auto}
.nb-title-en{text-align:center;margin:0;line-height:1}
.nb-title-jp{display:block;text-align:center;font-size:16px;line-height:1.5;color:var(--nb-cream);margin-top:6px}
/* Contact背景のみ、<picture>を箱として存在させずimgに高さ100%を効かせる。
   grid/flex内のpictureに display:contents を使うと、中のimgが一時的に非表示になった時に
   グリッド項目が消えて段組みが崩れるため、ここ以外には適用しない。 */
.nb-contact__bg picture{display:contents}
.nb-deco{position:absolute;pointer-events:none;opacity:.3;z-index:0}

/* ---------- Night Bloom 2026（紹介） ---------- */
.nb-about{padding-top:0;padding-bottom:60px}
.nb-about .nb-section__title{width:468px;margin-top:-34px;opacity:.2}
.nb-about__grid{display:grid;grid-template-columns:689fr 432fr;gap:77px;align-items:start;width:min(1200px,calc(100% - 48px));margin:132px auto 0;padding-left:0}
.nb-about__photo{width:100%;aspect-ratio:689/458;object-fit:cover;border-top-right-radius:100px}
.nb-about__text{padding-top:90px;font-size:18px;line-height:48px;color:var(--nb-cream)}
.nb-about__text p+p{margin-top:48px}
.nb-about .nb-deco--rose{right:-58px;top:300px;width:802px}

/* ---------- ライトアップエリア ---------- */
.nb-area{padding:55px 0 48px}
.nb-area__title{width:230px}
.nb-area__lead{margin:28px auto 0;text-align:center;font-size:16px;line-height:32px;color:var(--nb-cream)}
.nb-area__map{width:min(1275px,100%);margin:9px auto 0}
.nb-area__map img{width:100%}
.nb-area__cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:-47px}
.nb-card__photo{width:100%;aspect-ratio:373/240;object-fit:cover;border-radius:8px}
.nb-card__title{margin-top:24px;font-size:20px;font-weight:700;line-height:1.5}
.nb-card__text{margin-top:8px;font-size:14px;line-height:24px;color:var(--nb-cream)}

/* ---------- Event Information ---------- */
.nb-event{padding:60px 0 0;z-index:2}
.nb-event .nb-section__title{width:320px}
.nb-event__list{margin:68px 0 0;text-align:center;color:var(--nb-cream)}
.nb-event__item+.nb-event__item{margin-top:34px}
.nb-event__item dt{font-size:18px;line-height:36px;font-weight:400}
.nb-event__item dd{margin:0;font-size:18px;line-height:36px;font-weight:700}
.nb-event__note{display:block;margin-top:2px;font-size:14px;line-height:28px;font-weight:400}
.nb-event__btns{display:flex;justify-content:center;gap:40px;margin-top:74px}
.nb-event .nb-deco--keitou{left:-40px;top:10px;width:800px}
.nb-pc-only{display:inline}

/* ---------- 折り返し制御 ---------- */
.nb-nowrap{display:inline-block;white-space:nowrap}

/* ---------- ボタン ---------- */
.nb-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:280px;height:60px;padding:0 32px;border-radius:3px;background:var(--nb-white);color:var(--nb-green);font-size:15px;font-weight:700;transition:transform .3s,box-shadow .3s}
.nb-btn::after{content:"";position:absolute;right:20px;top:50%;width:6px;height:10px;transform:translateY(-50%);background:url("../svg/btn_arrow.svg") no-repeat center/contain;transition:transform .3s}
.nb-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nb-btn:hover::after{transform:translate(4px,-50%)}
.nb-btn--lg{width:366px;height:80px}

/* ---------- Contact ---------- */
.nb-contact{margin-top:-290px;padding:400px 0 172px;text-align:center}
.nb-contact__bg{position:absolute;left:0;right:0;top:0;height:calc(100% + 223px);z-index:-1;overflow:hidden;pointer-events:none}
.nb-contact__bg img{width:100%;height:100%;object-fit:cover;opacity:.8}
.nb-contact .nb-section__title{width:194px}
.nb-contact__lead{margin-top:30px;font-size:15px;font-weight:700}
.nb-contact .nb-btn{margin-top:50px}

/* ---------- フッター ---------- */
.nb-footer{position:relative;z-index:3;padding:133px 0 110px}
.nb-footer__inner{display:flex;justify-content:space-between;align-items:flex-start;width:min(1120px,calc(100% - 48px));margin-inline:auto}
.nb-footer__logo{width:332px}
.nb-footer__title{width:581px;margin:32px 0 0 -8px}
.nb-footer__right{display:flex;flex-direction:column;align-items:flex-end;gap:41px;padding-top:22px}
.nb-footer__links{display:flex;align-items:center;gap:32px}
.nb-footer__ig img{width:32px}
.nb-btn-official{display:inline-flex;align-items:center;gap:14px;height:60px;padding:0 30px;border:1px solid var(--nb-white);border-radius:30px;font-size:16px;font-weight:700;transition:background .3s,color .3s}
.nb-btn-official img{width:12px}
.nb-btn-official:hover{background:var(--nb-white);color:var(--nb-bg)}
.nb-btn-official:hover img{filter:invert(1)}
.nb-footer__copy{font-size:14px;font-weight:700}

/* ---------- スクロール表示 ---------- */
.nb-reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.nb-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.nb-reveal{opacity:1;transform:none;transition:none}}

/* =====================================================================
   タブレット（〜1100px）
   ===================================================================== */
@media (max-width:1100px){
  .nb-header{padding:20px 24px}
  .nb-header__logo img{width:200px}
  .nb-hero__lead{font-size:20px;line-height:40px}
  .nb-about__grid{grid-template-columns:1fr 1fr;gap:40px}
  .nb-about__text{padding-top:20px;font-size:16px;line-height:40px}
  .nb-about__text p+p{margin-top:40px}
  .nb-about .nb-deco--rose{width:560px;right:-100px;top:auto;bottom:-120px}
  .nb-area__cards{gap:24px;margin-top:0}
  .nb-pc-only{display:none}
  .nb-contact{margin-top:-160px;padding:260px 0 140px}
  .nb-contact__bg{height:calc(100% + 100px)}
  .nb-footer__inner{flex-direction:column;align-items:center;gap:60px;text-align:center}
  .nb-footer__title{margin:24px auto 0}
  .nb-footer__right{align-items:center;padding-top:0}
}

/* =====================================================================
   スマートフォン（〜767px）
   ===================================================================== */
@media (max-width:767px){
  .nb-header{padding:16px 20px}
  .nb-header__logo img{width:160px}
  .nb-header__nav{gap:14px}
  .nb-header__lang,.nb-header__sns{display:none}
  .nb-btn-ticket{height:32px;padding:0 10px;font-size:12px}
  .nb-btn-ticket img{width:18px}
  .nb-sp-only{display:inline}
  .nb-pc-only{display:none}
  .nb-hero{height:auto;padding-bottom:0}
  /* SPはフェード開始をやや上げる（PCの66%→60%相当） */
  .nb-hero__bg{position:relative;height:159vw;max-height:620px;
    -webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,0) 87%);
            mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,0) 87%)}
  /* 引き上げ量は 39/159。bg が max-height で頭打ちになる幅でも同じ比率を保つため 152px で止める */
  .nb-hero__inner{position:relative;inset:auto;margin:calc(-1 * min(39vw,152px)) 0 0;padding:0 12px}
  .nb-hero__title{position:static;width:91%;margin-left:1%}
  .nb-hero__date{position:static;width:67%;margin:10px 0 0 13%}
  .nb-hero__lead{position:relative;margin-top:56px;padding:0 24px;font-size:15px;line-height:32px}
  .nb-about__text br{display:none}
  .nb-contact__lead{padding:0 12px}
  .nb-footer__links{flex-direction:column;gap:20px}
  .nb-about .nb-section__title{width:64%;margin-top:40px}
  .nb-about{padding-bottom:60px}
  .nb-about__grid{grid-template-columns:1fr;gap:32px;margin-top:44px}
  .nb-about__photo{border-top-right-radius:60px}
  .nb-about__text{padding-top:0;font-size:15px;line-height:34px}
  .nb-about__text p+p{margin-top:28px}
  .nb-about .nb-deco--rose{width:420px;right:-120px;bottom:-80px}
  .nb-area{padding:50px 0 80px}
  .nb-area__title{width:195px}
  .nb-area__lead{font-size:14px;line-height:28px;text-align:center}
  .nb-area__map{width:100vw;margin:28px 0 0 calc(50% - 50vw);overflow:hidden}
  .nb-area__map img{width:200%;max-width:none;margin-left:-50%}
  .nb-area__cards{grid-template-columns:1fr;gap:36px;margin-top:12px}
  .nb-card__title{margin-top:16px;font-size:18px}
  .nb-event{padding:80px 0 70px}
  .nb-event .nb-deco--keitou{top:-40px}
  .nb-event .nb-section__title{width:240px}
  .nb-event__list{margin-top:48px}
  .nb-event__item dt{font-size:15px;line-height:30px}
  .nb-event__item dd{font-size:15px;line-height:30px;padding:0 12px}
  .nb-event__note{font-size:12px;line-height:22px;padding:0 12px}
  .nb-event__btns{flex-direction:column;align-items:center;gap:16px;margin-top:48px}
  .nb-event .nb-deco--keitou{width:420px;left:-80px}
  .nb-btn{width:min(280px,100%)}
  .nb-btn--lg{width:min(320px,100%);height:64px}
  .nb-contact{margin-top:0;padding:120px 0 120px}
  .nb-contact__bg{height:100%}
  .nb-contact .nb-section__title{width:150px}
  .nb-contact__lead{font-size:13px;padding:0 24px}
  .nb-footer{padding:80px 0 60px}
  .nb-footer__logo{width:240px;margin-inline:auto}
  .nb-footer__title{width:300px;margin:22px auto 0}
  .nb-footer__inner{gap:40px}
  .nb-btn-official{height:52px;padding:0 22px;font-size:14px}
  .nb-footer__copy{font-size:12px}
}