@charset "UTF-8";
/*========= スマホナビ ===============*/
.btn { display: block; width: fit-content; min-width: 280px; }

#g-nav { /*position:fixed;にし、z-indexの数値を大きくして前面へ*/ position: fixed; z-index: 999; /*ナビのスタート位置と形状*/ top: 0; left: -120%; width: 100%; height: 100vh; /*ナビの高さ*/ background: #999; /*動き*/ transition: all 0.6s; }

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive { left: 0; }

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list { /*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 999; width: 100%; height: 100vh; /*表示する高さ*/ overflow: auto; -webkit-overflow-scrolling: touch; }

/*ナビゲーション*/
#g-nav ul { /*ナビゲーション天地中央揃え*/ position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/*リストのレイアウト設定*/
#g-nav li { list-style: none; text-align: center; white-space: nowrap; }

#g-nav li a { color: #333; text-decoration: none; padding: 10px; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; }

#gnav { background-color: #fff; position: fixed; left: 0; right: 0; bottom: 0; display: none; }

#gnav ul.nav { display: none; display: flex; margin: 0; font-size: 1em; }

#gnav li.nav-item { flex-grow: 1; margin: 0; transition: 0.25s; }

#gnav li.nav-item:has(a.nav-link:hover) { background-color: #73b2ee; }

#gnav li.nav-item:has(a.nav-link:hover) a.nav-link { color: #fff; }

#gnav a.nav-link { color: #000; height: 2lh; display: flex; justify-content: center; align-items: center; padding: 0; }

.scrolled #gnav { left: 0; right: 0; top: 0; bottom: auto; z-index: 100; opacity: 0; }

/*　上に上がる動き　*/
#gnav.UpMove { position: fixed; width: 100%; animation: UpAnime 0.5s forwards; }

@keyframes UpAnime { from { opacity: 1;
    transform: translateY(0); }
  to { opacity: 0;
    transform: translateY(-100px); } }

/*　下に下がる動き　*/
#gnav.DownMove { position: fixed; width: 100%; animation: DownAnime 0.5s forwards; }

@keyframes DownAnime { from { opacity: 0;
    transform: translateY(-100px); }
  to { opacity: 1;
    transform: translateY(0); } }

body::before { position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; background-image: linear-gradient(180deg, #327eff75 0%, #ffeafa73 50%, #dcd1ff2b 83%, black 100%), url(../../images/event/hanaoto2025/bg.webp); background-repeat: no-repeat; background-blend-mode: normal; content: ""; background-position: center; background-size: auto 100%; -webkit-background-size: cover; background-size: cover; }

.hanaoto2025 * { text-decoration: none; }

.hanaoto2025 .mttl img { width: auto; max-height: 80dvh; display: block; margin: 100px auto; position: relative; bottom: 60px; }

.hanaoto2025 .bg-hw { background-color: #ffffffe3; max-width: 1600px; margin: 50px auto; backdrop-filter: brightness(1); border-radius: 16px; }

.hanaoto2025 .bg-ylw { background-color: #ffda73e3; max-width: 1600px; margin: 50px auto; backdrop-filter: brightness(1); border-radius: 16px; }

.hanaoto2025 .events .ttl-img { margin: auto; max-height: 200px; display: block; width: auto; height: auto; }

.hanaoto2025 .events h3 { background-color: #F6C20E; border-radius: 0 50px 50px 0; color: white; font-weight: bold; position: relative; left: -20px; width: 100%; max-width: 500px; padding: 10px 5px; padding-left: 20px; display: inline-block; }

.hanaoto2025 .events .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }

.hanaoto2025 .events .grid .inner { background: #FFF8E3; padding-bottom: 10px; width: 100%; border: solid 1px #FF9D00; display: grid; grid-row: span 5; grid-template-rows: subgrid; height: 100%; box-sizing: border-box; }

.hanaoto2025 .events .grid .inner p { font-size: 14px; }

.hanaoto2025 .events .grid .inner a { color: black; font-weight: bold; text-align: center; position: relative; display: block; margin: auto; width: fit-content; font-size: 13px; }

.hanaoto2025 .events .grid .inner a::after { content: ""; width: 10px; height: 10px; display: block; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); right: -15px; position: absolute; top: 0; bottom: 0; margin: auto; width: 7px; height: 7px; transition: all .2s; }

.hanaoto2025 .events .grid .inner a:hover::after { right: -20px; }

.hanaoto2025 .events .grid h4 { background-color: #FF9D00; color: white; padding: 0 10px; font-weight: bold; font-size: 14px; min-height: 38px; display: flex; align-items: center; }

.hanaoto2025 .events #foods { background: white; border: solid 2px #F6C20E; }

.hanaoto2025 .events #foods .grid p { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }

.hanaoto2025 .events #stage { background: white; border: solid 2px #ACCF50; }

.hanaoto2025 .events #stage h3 { background: #ACCF50; }

.hanaoto2025 .events #stage .inner { border: solid 1px #ACCF50; }

.hanaoto2025 .events #stage .inner h4 { background-color: #ACCF50; }

.hanaoto2025 .events #attraction { background: white; border: solid 2px #6FCBF1; }

.hanaoto2025 .events #attraction h3 { background: #6FCBF1; }

.hanaoto2025 .events #attraction .inner { display: block; justify-content: flex-start; border: solid 1px #6FCBF1; }

.hanaoto2025 .events #attraction .inner h4 { background-color: #6FCBF1; }

.hanaoto2025 .events #attraction .inner ul, .hanaoto2025 .events #attraction .inner li { margin: 0; font-size: 14px; }

.hanaoto2025 .events #attraction .inner ul { padding-left: 1rem; }

.hanaoto2025 .events .anc-menu .flex { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

.hanaoto2025 .events .anc-menu .anc-btn { color: white; text-align: center; font-weight: bold; border: white solid 3px; border-radius: 500px; width: 100%; max-width: initial; padding: 20px 10px; font-size: 20px; position: relative; box-shadow: 3px 3px 3px #353535; transition: all .2s; top: 0; }

.hanaoto2025 .events .anc-menu .anc-btn:hover { top: 5px; box-shadow: none; }

.hanaoto2025 .events .anc-menu .anc-btn.yellow { background-color: #F6C20E; }

.hanaoto2025 .events .anc-menu .anc-btn.green { background-color: #ACCF50; }

.hanaoto2025 .events .anc-menu .anc-btn.blue { background-color: #6FCBF1; }

.hanaoto2025 .events .anc-menu .anc-btn::after { content: ""; width: 14px; height: 14px; position: absolute; border-right: 3px solid white; border-bottom: 3px solid white; transform: rotate(45deg); bottom: 10px; left: 0; right: 0; margin: auto; transition: all .2s; }

.hanaoto2025 .events .anc-menu .anc-btn:hover::after { bottom: 5px; }

.hanaoto2025 .ttl-blk { text-align: center; color: white; background: black; border-radius: 50px; padding: 10px 5px; }

.hanaoto2025 .w-800 { max-width: 800px; display: block; margin: auto; }

.hanaoto2025 .schedule { background-color: white; padding: 16px; border-radius: 16px; margin: auto; max-width: 1000px; }

.hanaoto2025 .schedule table { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: 14px; }

.hanaoto2025 .schedule tr { border-bottom: 1px dashed #4b4b4b; }

.hanaoto2025 .schedule th { width: 30%; }

.hanaoto2025 .schedule th span { font-weight: bold; }

.hanaoto2025 .schedule h3 { background: black; color: white; padding: .5rem; font-size: 1rem; text-align: center; border-radius: 50px; }

.hanaoto2025 .card-1 { background-color: white; border: solid 1px black; padding: 0; }

.hanaoto2025 .card-1 .ttl { background: black; color: white; text-align: center; }

.hanaoto2025 .links img { max-width: 60px; height: auto; }

.hanaoto2025 .links a { color: black; border-bottom: dashed 1px; position: relative; }

.hanaoto2025 .links a::after { content: ""; width: 10px; height: 10px; transform: rotate(-45deg); border-right: 3px solid; border-bottom: 3px solid; position: absolute; right: 20px; transition: all .2s; }

.hanaoto2025 .links a:hover::after { right: 15px; }

.hanaoto2025 .links :last-child { border-bottom: none; }

.hanaoto2025 .gallery { background-color: #ffffffe3; max-width: 1600px; margin: 50px auto; backdrop-filter: brightness(1); border-radius: 16px; }

.hanaoto2025 .modal-content { max-width: 1000px; margin: auto; text-align: center; display: inline-block; }

.hanaoto2025 .thumbnail-img { cursor: pointer; }

footer { background: black !important; color: white !important; }

@media screen and (min-width: 768px) { #g-nav { display: none; } .hanaoto2025 .schedule table { font-size: 16px; } }

@media screen and (min-width: 992px) { #gnav { display: block; z-index: 9999999999; } body::before { background-image: linear-gradient(180deg, #327eff75 0%, #ffeafa73 50%, #dcd1ff2b 83%, black 100%), url(../../images/event/hanaoto2025/bg.webp); } .hanaoto2025 .events .grid .inner p { font-size: 16px; } .hanaoto2025 .events .grid .inner a { font-size: 16px; } .hanaoto2025 .events .grid .inner a::after { width: 10px; height: 10px; } .hanaoto2025 .events .grid h4 { font-size: 21px; } .hanaoto2025 .events #attraction .inner ul, .hanaoto2025 .events #attraction .inner li { font-size: 16px; } .hanaoto2025 .events .anc-menu .anc-btn { max-width: 380px; font-size: 32px; } }