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

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

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

.wbr { white-space: pre-wrap; overflow-wrap: break-word; word-break: keep-all; }

/*========= スマホナビ ===============*/
#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; }

/*========= ボタンのための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); }

/*×に変化*/
.openbtn span { display: inline-block; transition: all 0.4s; position: absolute; left: 14px; height: 3px; border-radius: 2px; background-color: #fff; width: 45%; }

.openbtn span:nth-of-type(1) { top: 15px; }

.openbtn span:nth-of-type(2) { top: 23px; }

.openbtn span:nth-of-type(3) { top: 31px; }

.openbtn.active span:nth-of-type(1) { top: 18px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 30%; }

.openbtn.active span:nth-of-type(2) { opacity: 0; }

.openbtn.active span:nth-of-type(3) { top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; }

.lp-header { position: relative; height: max(100vw, 100vh - 30px - 50px); max-height: calc((100vh - 30px - 50px) * 2); }

.lp-header .container-fluid { min-height: calc(100vh - 30px - 2lh); position: relative; }

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

.lp-header .main-catch { position: absolute; }

.lp-header .main-catch img { object-fit: contain; height: max(100vw / 2, (100vh - 30px - 50px) / 2); max-height: calc((100vh - 30px - 50px)); }

.lp-header .main-catch img.img-date { padding: 0 0 5%; }

#mokuji { position: fixed; z-index: 10000; top: 5px; right: 5px; padding: 1rem; border: none; border-radius: 0.5rem; background-color: orange; display: flex; justify-content: center; align-items: center; }

:has(#mokuji.active) #gnav { translate: -100%; }

#gnav { background-color: #fff; position: fixed; display: block; z-index: 9999; top: 0; height: 100lvmax; padding-top: 80px; left: 100%; width: 100%; transition: translate 0.5s ease; }

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

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

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

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

.bg-sub { background-color: #73b2ee; }

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

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

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

.bg-main50 { background-color: rgba(70, 80, 91, 0.5); }

.bg-main80 { background-color: rgba(70, 80, 91, 0.8); color: #fff; }

.bg-sub75 { background-color: rgba(115, 178, 238, 0.75); color: #000; }

.bg-accent75 { background-color: rgba(206, 0, 9, 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: #73b2ee; 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: #46505b; }

.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 { border-radius: 5px; padding: 1em 1.5em; border: none; }

.btn::after { display: none; }

.btn[href$=".pdf"] { padding-right: calc(1.5em + 1em); }

.btn[href$=".pdf"]::after { right: auto; transition: all 0.5s; }

.btn[href$=".pdf"]:hover::after { margin-left: 0.5em; }

.btn.btn-accordion span { display: inline-flex; justify-content: center; }

.btn .accordion_is_close, .btn .accordion_is_open { width: 4em; }

.btn[aria-expanded="true"] .accordion_is_close { display: none; }

.btn[aria-expanded="false"] .accordion_is_open { display: none; }

.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: #ce0009; color: white; }

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

@media screen and (min-width: 768px) { #g-nav { display: none; } .openbtn { display: none; } .badge-num { font-size: 2rem; } }

@media screen and (min-width: 992px) { .lp-header { height: min(50vw, 100vh - 30px - 2lh); } .lp-header .main-catch img { padding: 5vmin 0; width: 50vw; height: min(50vw, 100vh - 30px - 2lh); object-position: right; }
  .lp-header .main-catch img.img-date { padding: 10vmin 0; object-position: left; } .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; } }

@media (min-width: 992px) { #mokuji { display: none; } #gnav { left: 0; padding-top: 0; top: auto; bottom: 0; height: auto; translate: 0 !important; } #gnav ul.nav { flex-direction: row; } }