.event-page{--theme-color:#0f2db3;--accent-color:#9598bc;--input-background:#fff}
.event-page #app{padding-bottom:0}
.event-page .inner{max-width:968px;margin:0 auto}
.event-page #reservation{display:none;background:url(../img/bg-reservation.png) no-repeat top center/cover}
.event-page #reservation.show{display:block;margin-top:-100px;position:relative}
.event-page #reservation .form-wrapper{text-align:left;align-items:flex-start}
.event-page #reservation .form-wrapper .form{width:40%;padding-right:40px;box-sizing:border-box}
.event-page #reservation .form-wrapper .image{width:60%;padding-left:40px;box-sizing:border-box}
.event-page #reservation .form-wrapper h3{font-weight:400}
.event-page #reservation .form-wrapper h3 #shop-name{font-weight:600;font-size:1.75rem;line-height:2.3rem;display:block}
.event-page #reservation .form-wrapper .ugc-address{color:var(--theme-color);padding-top:2px;padding-bottom:30px}
.event-page #reservation .form-wrapper .row{color:#515151;margin-bottom:16px}
.event-page #reservation .form-wrapper .row input,
.event-page #reservation .form-wrapper .row select{background:var(--input-background);border:1px solid #fff;width:100%;display:block;box-sizing:border-box;padding:10px 20px;margin:0}
.event-page #reservation .form-wrapper .row input.err,
.event-page #reservation .form-wrapper .row select.err{border:1px solid red}
.event-page #reservation .form-wrapper .row input::placeholder{color:var(--accent-color)}
.event-page #reservation .form-wrapper .row input:focus{background:#d9e3fa}
.event-page #reservation .form-wrapper .row select{cursor:pointer}
.event-page #reservation .form-wrapper .row.shops{display:none}
.event-page #reservation .form-wrapper .row.shops.show{display:block}
.event-page #reservation .form-wrapper .row.checking{font-size:.88rem;color:red;display:none}
.event-page #reservation .form-wrapper .row.checking .p2{display:none}
.event-page #reservation .form-wrapper .row.checking.show{display:block}
.event-page #reservation .form-wrapper .row.checking.show2 .p2{display:block}
.event-page #reservation .form-wrapper .row.checking.show2b p{display:none}
.event-page #reservation .form-wrapper .row.checking.show2b .p2{display:block}
.event-page #reservation .form-wrapper .row.checkbox{font-size:.88rem;position:relative;padding-left:34px;box-sizing:border-box;line-height:27px}
.event-page #reservation .form-wrapper .row.checkbox+.checkbox{margin-bottom:30px}
.event-page #reservation .form-wrapper .row.checkbox input{opacity:0;z-index:1;position:absolute;top:0;left:0;width:24px;height:24px;cursor:pointer;padding:0}
.event-page #reservation .form-wrapper .row.checkbox input:checked~.check{background:url(../img/tick.png) no-repeat center center/50%}
.event-page #reservation .form-wrapper .row.checkbox .check{position:absolute;top:0;left:0;width:24px;height:24px;background:var(--input-background);border:1px solid #fff}
.event-page #reservation .form-wrapper .row.checkbox .check.err{border:1px solid red}
.event-page #reservation .form-wrapper .row.checkbox label{cursor:pointer}
.event-page #reservation .form-wrapper .row.checkbox .popup-terms{cursor:pointer;text-decoration:underline}
.event-page #reservation .form-wrapper .row:last-child{margin-bottom:0}
.event-page #reservation .form-wrapper .row #btn-reservation{display:block;background:#fff;transition:all .4s ease;color:#000;line-height:50px;text-align:center;margin-top:20px}
.event-page #reservation .form-wrapper .row #btn-reservation:hover{background:var(--theme-color);color:#fff}
.event-page #reservation .form-wrapper .row #btn-reservation.disabled{cursor:default;opacity:.5}
.event-page #reservation .form-wrapper .row #btn-reservation.disabled:hover{color:#000;background:#fff}

.event-page #kv, 
.event-page #kv *, 
.event-page main,
.event-page main *{box-sizing:border-box}
.event-page #kv{position:relative;display:flex;flex-direction:row;align-items:stretch;background:url(../img/bg-vision.jpg) no-repeat center center;background-size:cover}
.event-page #kv:before{content:"";width:100%;height:0;padding-top:calc(100% / 2863*1455);display:block}
.event-page #kv .slogan{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80%;text-align:center;line-height:1!important;display:flex;flex-direction:column;gap:8px;z-index:1;text-shadow:none}
.event-page #kv .qr{position:absolute;bottom:20px;right:20px;z-index:3;color:#fff}
.event-page #kv .slogan h1,
.event-page #kv .slogan span{white-space:nowrap;color:#fff!important;font-size:3.6vw!important;letter-spacing:0!important;text-shadow:none}
.event-page #kv .slogan h1 span{font-weight:300;font-size:3.6vw!important}
.event-page #kv .slogan span{font-size:1.4vw!important}
.event-page .background{display:flex;position:absolute;top:0;left:0;right:0;bottom:0}
.event-page .background > div{flex:1;display:flex;flex-direction:column;justify-content:end;align-items:start;padding:12px;font-size:.8vw!important;color:#fff;line-height:1.6}
.event-page .background > div::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0}
.event-page .background > div span{z-index:2}

.event-page main{padding:100px 50px;display:flex;flex-direction:column;gap:16px;background:linear-gradient(127deg, #edf0ff, #8d99c8)}
.event-page main h3{font-size:20px!important;background:var(--theme-color);color:#fff!important;border-radius:999px;padding:10px 40px;line-height:1!important;margin:0 auto}
.event-page .owl-nav{display:none}

.event-page #core{padding:0}
.event-page .banners .owl-dots{position:absolute;left:0;right:0;padding:0;bottom:0}
.event-page .owl-dot span{background:var(--theme-color)!important}
.event-page .owl-dot.active span{background:#fff!important}

.event-page #core .owl-item{opacity:0;transition:all .4s ease}
.event-page #core .owl-item.active{opacity:1}
.event-page #core .item{display:block;position:relative;width:100%;padding-top:calc(60px + 5%)}
.event-page #core .item > h3{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap}
.event-page #core .item > img{position:absolute;top:60px;left:0;width:51%;z-index:1;height:calc(100% / 10 * 7);object-fit:cover;object-position:center center}

#btn_cta{position:fixed;right:50px;bottom:20px;z-index:999}
#btn_cta a{border-radius:999px;position:relative;padding:3px;background:linear-gradient(#fff, #617db6 66%, var(--theme-color));margin:0;margin-left:auto;display:block;width:auto;float:right;box-shadow:1px 3px 8px -2px #fff}
#btn_cta a::after{content:"";border:8px solid transparent;border-left:10px solid var(--theme-color);border-right:0;position:absolute;top:50%;right:18px;transform:translateY(-50%)}
#btn_cta a span{border-radius:999px;padding:10px 40px 10px 20px;height:100%;background:linear-gradient(
307deg, #8d99c8 20%, #edf0ff);display:block;color:var(--theme-color);font-weight:600;font-size:20px}

.event-page div:has(>[name="event[card]"]){position:relative;width:100%}
.event-page div input[name="event[card]"]{padding-left:38px}
.event-page div:has(>[name="event[card]"])::before{content:"HSO";position:absolute;top:50%;left:8px;transform:translateY(-50%);color:#000;font-size:14px;letter-spacing:0}

.event-page main details.terms{text-align:left;font-size:14px;color:var(--theme-color);line-height:1.2;letter-spacing:0}
.event-page main details.terms ol,
.event-page main details.terms ul{margin-top:0;padding-left:14px}
.event-page main details.terms ul{list-style-type:'- '}
.event-page main details.terms summary{cursor:pointer}
.event-page main details.terms summary,
.event-page main details.terms > span{text-decoration:underline}

.event-page main form{display:flex;gap:20px}
.event-page main form > div{flex:1;display:flex;flex-direction:column;gap:12px;text-align:start}
.event-page main form > div fieldset{border:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0}
.event-page main form > div fieldset label{color:var(--theme-color);letter-spacing:0;font-weight:600;font-size:18px}
.event-page main form > div fieldset input{height:40px;width:100%;padding:8px 12px;background:#fff;font-size:14px}
.event-page main form > div fieldset input::placeholder{color:var(--accent-color);font-size:16px}
.event-page main form > div fieldset div:has(input[name="campaign[card]"]){padding-left:0;position:relative;background:#fff;width:100%}
.event-page main form > div fieldset div:has(input[name="campaign[card]"]:not(:placeholder-shown)){padding-left:2.1em}
.event-page main form > div fieldset div:has(input[name="campaign[card]"]:not(:placeholder-shown))::before{content:"HSO";position:absolute;left:1em;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none;letter-spacing:normal;font-weight:bold}
.event-page main form > div fieldset #receipt_preview{width:100%;height:auto;max-height:500px;object-fit:contain;object-position:center center;image-rendering:pixelated}
.event-page main form > div fieldset input[type="file"]{display:none}
.event-page main form > div fieldset small{color:var(--theme-color);font-size:12px;letter-spacing:0;line-height:1.2}
.event-page main form > div button{height:40px;color:var(--theme-color);background:#fff;cursor:pointer;border:0;outline:0;padding:0;display:flex;justify-content:center;align-items:center;margin:0}
.event-page main form > div button[type="submit"]{background:var(--theme-color);color:#fff;margin-left:auto;line-height:1}

.event-page main article{max-width:80%;padding:0;display:block;margin:0 auto 60px;text-align:start}
.event-page main article h1{display:block;margin-bottom:.4em}
.event-page main article p,
.event-page main article small{display:block;margin-bottom:1.2em}

@media only screen and (max-width:767px){
	.event-page #kv video{object-fit:cover;height:calc(100dvh - 64px)}
	.event-page #reservation.show{margin-top:-50px}
	.event-page #reservation .form-wrapper{flex-direction:column-reverse}
	.event-page #reservation .form-wrapper .form{width:100%;padding-right:0}
	.event-page #reservation .form-wrapper .image{width:100%;padding-left:0}
	.event-page #reservation .form-wrapper h3{padding-top:20px}
	.event-page main form > div button{width:100%}
	.event-page main ul.features li:hover{transform:scale(.96)}
	.event-page main ul.features li > a > div span{font-size:6vw}
	.event-page main ul.features li > a > div span:nth-child(2){font-size:3.4vw}
	.event-page main ul.features li:hover > a > div div{font-size:3.2vw}

	.event-page main{padding:20px}
	.event-page h2{letter-spacing:0!important}
	.event-page #core .owl-item{height:0}
	.event-page #core .owl-item.active{height:auto}
	.event-page #core .item > h3{border-radius:12px;text-align:center;white-space:wrap;padding:12px;line-height:1.2!important;width:100%;letter-spacing:0;font-size:12px}
	.event-page #core .item > img{position:initial;width:80%;height:240px}
	ul.features li > a > div span{font-size:7vw}
	ul.features li > a > div span:nth-child(2){font-size:4.4vw}
	ul.features li:hover > a > div div{font-size:16px}
	ul.features li:hover{transform:scale(.9)}
	ul.features{flex-direction:column;margin:0}
	.event-page main form{flex-direction:column}
	
	#btn_cta{right:20px}

	.event-page #reservation{padding-bottom:64px}
	#btn_cta{bottom:46px}
}
.event-page.is-mobile .owl-carousel.owl-loaded{margin-top:64px}
.is-mobile #landscape{display:none!important}
.is-mobile #app{display:initial!important}


@media only screen and (max-width:980px){
	.event-page main .shop-list ul li{--border-size:1vw;}
}

@media only screen and (max-width:900px){
	.event-page main .shop-list ul{--columns:3;background:#fff;display:grid;padding:var(--border-size);gap:var(--border-size);grid-template-columns:repeat(var(--columns),1fr);width:100%}
	.event-page main .shop-list ul li{top:unset;left:unset;border:0;transform:none!important;width:100%!important;margin:0;margin-bottom:0!important;height:unset!important;min-height:unset!important;aspect-ratio:4/3;--height:unset!important}
}

@media only screen and (max-width:767px){
	.event-page main .shop-list ul{--columns:2}
}

@media only screen and (max-width:480px){
	.event-page main .shop-list ul{--columns:1}
}