@charset "UTF-8";
/*========= スマホナビ ===============*/
#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); } }

.hakujahime { min-height: 300dvh; background-image: url(../../images/event/hakujahime/bg-gold.webp), url(../../images/event/hakujahime/bg-paper-white.webp); background-repeat: repeat; background-size: auto, 500px; }

.hakujahime .box-1 { background-image: url(../../images/event/hakujahime/bg-paper.webp); background-repeat: repeat; background-size: 500px; border-radius: 20px; position: relative; border: solid 1px #AC6A00; min-height: 500px; padding: 0 10px; padding-top: 50px; padding-bottom: 50px; }

.hakujahime .box-1 .subttl, .hakujahime .box-1 .subttl img { position: absolute; top: -30px; max-height: 120px; margin: auto; left: 0; right: 0; }

.hakujahime .box-1 .subttl2 { position: absolute; top: -50px; max-height: 100px; margin: auto; left: 0; right: 0; }

.hakujahime .about table { border-collapse: collapse; table-layout: fixed; width: 100%; }

.hakujahime .about .about-table span { font-weight: bold; text-align: center; color: white; background: black; border-radius: 50px; padding: .5rem; display: block; }

.hakujahime .about .about-table tr { border-bottom: 1px solid #9F4300; width: 100%; }

.hakujahime .about .about-table tr:first-child { border-top: 1px solid #9F4300; }

.hakujahime .about .schedule { background-color: white; padding: 16px; border-radius: 16px; }

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

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

.hakujahime .about .schedule th { width: 30%; }

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

.hakujahime .about .about-link { background: white; border-radius: 16px; padding: 15px; font-weight: bold; text-decoration: none; color: black; box-shadow: 3px 3px 3px #333; display: flex; justify-content: center; transition: .3s all; position: relative; align-items: center; top: 0; }

.hakujahime .about .about-link:hover { top: 2px; box-shadow: initial; cursor: pointer; }

.hakujahime .about .icn-link { width: 50px; margin-right: 10px; display: block; }

.hakujahime .maps { background: #ffffff3b; padding: 50px 10px; backdrop-filter: blur(3px); border: 1px solid white; border-radius: 18px; }

.hakujahime .maps .map1 { max-width: 450px; }

.hakujahime .round-ttl-border { position: relative; }

.hakujahime .round-ttl-border span { position: relative; border: 2px solid #9F7400; z-index: 3; text-align: center; border-radius: 80px; margin: auto; left: 0; right: 0; display: block; width: 200px; background: black; color: white; font-weight: bold; }

.hakujahime .round-ttl-border::after { content: ""; display: block; height: 1px; width: 100%; background: #9F7400; position: absolute; top: 0; z-index: 1; bottom: 0; margin: auto; }

.hakujahime .btn-blk { display: block; color: white; font-weight: bold; background-color: black; text-decoration: none; padding: 15px 25px; text-align: center; padding-right: 35px; width: fit-content; min-width: 200px; position: relative; margin: 24px auto; top: 0; border-radius: 8px; transition: all .2s; box-shadow: 3px 3px 3px #808080; }

.hakujahime .btn-blk:after { content: ""; width: 10px; height: 10px; border-right: 2px solid white; border-top: 2px solid white; transform: rotate(45deg); position: absolute; top: 0; bottom: 0; right: 25px; display: block; margin: auto; transition: all .2s; }

.hakujahime .btn-blk:hover { top: 2px; }

.hakujahime .btn-blk:hover:after { right: 20px; }

.hakujahime .spacing { margin-bottom: 80px; }

.hakujahime .archive .subttl { max-height: 130px; margin: auto; display: block; position: initial; }

.hakujahime .archive .subttl img { max-height: 130px; margin: auto; display: block; }

.hakujahime .yt iframe { width: 100%; max-width: 560px; margin: auto; display: block; }

.site-footer { background: black !important; color: white !important; }

@media screen and (min-width: 768px) { #g-nav { display: none; } }

@media screen and (min-width: 992px) { #gnav { display: block; z-index: 9999999999; } }

@media (min-width: 992px) { .hakujahime { background-size: contain, 500px; } .hakujahime .box-1 { /* Large devices (desktops, 992px and up)*/ }
  .hakujahime .box-1 .subttl, .hakujahime .box-1 .subttl img { position: absolute; top: -50px; max-height: 120px; margin: auto; left: 0; right: 0; } .hakujahime .spacing { margin-bottom: 150px; } .hakujahime .archive { /* Large devices (desktops, 992px and up)*/ }
  .hakujahime .archive .subttl, .hakujahime .archive .subttl img { position: initial; max-height: 120px; margin: auto; } }

@media (min-width: 768px) { .hakujahime .box-1 { padding-top: 100px; /* Medium devices (tablets, 768px and up)*/ }
  .hakujahime .box-1 .subttl { top: -40px; } }

@media (max-width: 1200px) { .hakujahime .about .about-table tr, .hakujahime .about .about-table th, .hakujahime .about .about-table td { display: inline-block; width: 100%; border: none; }
  .hakujahime .about .about-table tr:first-child { border-top: none; } }