@charset "UTF-8";
body { background-size: cover; background-position: center; background-attachment: fixed; }

body::before { position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; background-image: url("../../images/event/hyotoya2025/body-bg.jpg"); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-position: center; content: ""; }

img { max-width: 100% !important; height: auto; }

/*========= ボタンのためのCSS ===============*/
.openbtn { position: fixed; z-index: 9999; /*ボタンを最前面に*/ bottom: 10px; left: 10px; cursor: pointer; width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.5); }

.lp-header { position: relative; height: 100vh; overflow: hidden; }

.lp-header .container-fluid { height: 100vh; position: relative; overflow: hidden; }

.lp-header .card-attention { position: relative; }

.lp-header .main-catch { position: absolute; width: 100%; top: 50%; text-align: center; transform: translateY(-50%); }

.lp-header .main-catch .main-catch-bg { position: relative; display: inline-block; }

.lp-header .main-catch .main-catch-bg::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; padding-top: 120%; border-radius: 100%; border: #fff solid 5px; transform: translate(-50%, -50%); z-index: -1; }

.lp-header .main-catch .main-catch-bg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; padding-top: 100%; border-radius: 100%; border: #fff solid 2px; transform: translate(-50%, -50%); z-index: -1; }

.lp-header .main-catch img { object-fit: contain; width: 500px; max-width: 80% !important; margin: 0 auto 15px; }

.lp-header .main-catch .main-catch-date { display: inline-block; font-size: 1.25rem; color: #fff; border: solid 3px #fff; padding: 0.25em 1em; border-radius: 9999px; }

#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: #f095ab; }

#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); } }

.lp-header-sm { min-height: 240px; position: relative; }

.lp-header-sm .main-catch { position: absolute; left: 50%; top: 50%; max-width: 240px; transform: translate(-50%, -50%); }

.bl-date { background-color: rgba(0, 0, 0, 0.3); border-radius: 9999px; border: solid 1px #fff; padding: 0 20px; text-align: center; }

.section { padding-top: 3rem; padding-bottom: 3rem; padding-left: 1rem; padding-right: 1rem; }

.bg-main { background-color: #5e2a1d; }

.bg-sub { background-color: #f095ab; }

.bg-accent { background-color: #d60c27; }

.bg-w25 { background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.bg-b50 { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.bg-b75 { background-color: rgba(0, 0, 0, 0.75); }

.bg-main50 { background-color: rgba(94, 42, 29, 0.5); }

.bg-main80 { background-color: rgba(94, 42, 29, 0.8); color: #fff; }

.bg-sub75 { background-color: rgba(240, 149, 171, 0.75); color: #000; }

.bg-accent75 { background-color: rgba(214, 12, 39, 0.75); margin: 0; padding: 0; }

.bg-accent75 h3 { margin: 1.5rem 0 0; }

.bg-accent75 p { margin: 1.5rem; }

.badge-num { font-size: 1.2rem; background: #f095ab; margin-right: 10px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); padding: 0.2em 0.4em; }

.ttl-q { position: relative; padding-left: 1.5em; }

.ttl-q .lm-q { position: absolute; left: 0; top: 0; }

.fukidashi { position: relative; padding: 0.5em 0.75em; background-color: #fff; border: 1px solid #ccc; border-radius: 6px; }

.fukidashi.bl::before, .fukidashi.bl::after { position: absolute; top: 100%; left: 30px; content: ""; height: 0; width: 0; border: 10px solid transparent; }

.fukidashi.bl::before { border-top: 15px solid #ccc; }

.fukidashi.bl::after { margin-top: -2px; border-top: 15px solid #fff; }

.lp-footer { background-color: #5e2a1d; }

.lp-footer a { color: #fff; }

.table-schedule img { height: 90vh; width: auto !important; max-width: 1600px !important; }

.list-lm { list-style: none; padding-left: 0; }

.list-lm li { position: relative; padding-left: 2.5em; }

.list-lm li .lm { position: absolute; left: 0; top: 0; }

.btn-sub { color: #fff; background-color: #f095ab; border-color: #f095ab; }

.btn-sub:hover { background-color: #f3abbd; border-color: #f095ab; }

.btn-warning { color: #000; background-color: #ffc107; border-color: #ffc107; }

.btn-success { color: #fff; background-color: #28a745; border-color: #28a745; }

.btn-success:focus { color: #fff; background-color: #28a745; border-color: #28a745; box-shadow: none; }

.accordion img { width: 90%; }

.table-schedule a:hover img { filter: none; }

.sns_link:hover { background: #d60c27; color: white; }

.sns_link:hover .position-absolute { opacity: 0; }

.weblink-list { padding-left: 0; margin-bottom: 0; }

.weblink-list li { text-align: center; }

.weblink-list img { width: 30px !important; }

.card dt { margin-bottom: 5px; }

.ttl-h2 { position: relative; }

.ttl-h2::after { content: ""; display: block; border: solid 1px #fff; height: calc(100% - 10px); width: calc(100% - 10px); position: absolute; left: 5px; top: 5px; border-radius: 5px; }

@media screen and (min-width: 768px) { .openbtn { display: none; } .badge-num { font-size: 2rem; } .weblink-list img { width: 40px !important; } }

@media screen and (min-width: 992px) { #gnav { display: block; z-index: 9999999999; } .lg-lead { font-size: 1.25rem; font-weight: 300; } .section { padding-left: 2rem; padding-right: 2rem; } .table-schedule img { max-width: 100% !important; height: auto !important; } }