@charset "utf-8";

*{box-sizing:border-box;}

html{scroll-behavior: smooth; scroll-padding-top:20px;}

/*スクロールバーをコンパクトに*/
*{scrollbar-color: #f92d7e rgba(60,60,60,0.5); scrollbar-width: thin;}
/*firefox*/
html::-webkit-scrollbar {width: 8px; height: 8px;}
html::-webkit-scrollbar-thumb {background: #f92d7e;}
html::-webkit-scrollbar-track {background: rgba(60,60,60,0.5);}

/*スクロールバーの色変更*/
*.scrollbar{scrollbar-color: #f92d7ef rgba(60,60,60,0.5);}/*firefox*/
*.scrollbar::-webkit-scrollbar {width: 8px; height: 8px;}
*.scrollbar::-webkit-scrollbar-thumb {background: #f92d7e;}
*.scrollbar::-webkit-scrollbar-track {background: rgba(60,60,60,0.5);}

*.scrollbar.blue{scrollbar-color: #0099ff rgba(60,60,60,0.5);}/*firefox*/
*.scrollbar.blue::-webkit-scrollbar-thumb {background: #0099ff;}

body { font-size:min(1.3vw,18px); font-weight: 450; font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; line-height:1.8; background: #000; color:rgba(255,255,255,0.8); min-width:1000px; position:relative; word-break: normal; -webkit-text-size-adjust: none; }
body.mobile-image { background: url(img/mobileBg.jpg) no-repeat center top #000; background-size: contain; }

/*画像*/
img{max-width:100%; position:relative; line-height:1; vertical-align:middle; backface-visibility: hidden; -webkit-transform: translateZ(0);}

/*アンカー*/
a {color: #33CCFF;}

/*ボタン*/
a.button, input.button, button.button{display: inline-block; background: #fff; padding: 0.7em 2em; font-size: 100%; line-height: 1.4; border: 1px solid #000; color: #000; box-shadow: none;}

/*応援ボタン*/
.ouen_button{background: #0099FF; color: #fff; display: inline-block; padding: 1em 2em; border-radius: 99em; font-weight: bold; line-height: 1.2; text-align: center; text-decoration: none;}
.ouen_button:hover{opacity: 0.8; text-decoration: none;}

/*夏祭り特集のアイキャッチ*/
.sum_catch{position:relative; padding: 1.5em 20px; width: 100%; max-width: 1400px; margin: auto;}
.sum_catch h1{width: 50%; max-width:600px; height:auto; margin:auto; text-align:center; position:relative; line-height:1; font-family:serif;}
.sum_catch span.year{position:absolute; bottom:0; left:0; width: 100%; color:#fff; font-size:200%; text-shadow:0 0 5px #FF55FF,0 0 10px #FF55FF,0 0 20px #FF55FF;}
.sum_catch_text1{font-size:130%; line-height: 1.4; font-weight:bold; position:absolute; top:50%; left:20px; transform: rotate(-8deg) translateY(-50%); margin: 0; color: #fff; text-shadow: 0 0 0.3em #0099ff,0 0 0.4em #0099ff,0 0 0.5em #0099ff;}
.sum_catch .buttons{position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
/*アニメーション*/
@keyframes fv_fade{100%{opacity: 1; transform: translateY(0%);}}
@keyframes fv_left{100%{opacity: 1; left:20px;}}
@keyframes fv_right{100%{opacity: 1; right: 20px;}}
@media screen{
.sum_catch{opacity: 0; transform: translateY(100px); animation: fv_fade 0.5s 0.2s ease-out both;}
.sum_catch_text1{opacity: 0; left: 200px; animation: fv_left 0.5s 0.7s ease-out both;}
.sum_catch .buttons{opacity: 0; right: 200px; animation: fv_right 0.5s 0.7s ease-out both;}
}

/*ページ全体を囲う枠*/
.wrapper{width: 100%; max-width: 1400px; padding: 0 20px;}

/*見出し*/
h2, div.footer1 h2, .footer1 ul li:first-child { background: rgba(30,30,30,0.8); color: #fff; }
.container h2 a { color: #fff; }

/*マップの地域タブボタン*/
ul.group_tab { display: flex; align-items: center; justify-content: center; height: auto; background: rgba(0, 0, 0, 0.6); border-bottom: none; margin:0 auto 1em; border-radius: 5px; -webkit-transition: 0.2s; transition: 0.2s; }
ul.group_tab:hover{background: rgba(0,0,0,0.9);}
ul.group_tab>li{float: none;}
ul.group_tab li a, ul.group_tab li.all a.parentsLink { color: #fff; background: none; border: none; height: auto; line-height: 1.2; margin: 0; padding: 0.5em 1.5em; text-shadow: 0 1px #000; }
ul.group_tab li a:hover, ul.group_tab li.all a.parentsLink:hover { background: rgba(255, 255, 255, 0.1); border: none; border-radius: 0; }
/*アニメーション*/
@media screen{
ul.group_tab{opacity: 0; transform: translateY(100px); animation: fv_fade 0.5s 0.4s ease-out both;}
}

/*企業と花火大会を切り替えるスイッチ*/
ul.group_tab>li:last-child{margin-left: 2em;}
.ui-buttonset{margin: 0;}
#jquery-ui-button-checkbox label {width: auto; font-size: 90%;}

/*花火マップの親要素*/
.eventMap{display: flex; align-items: stretch; justify-content: space-between; margin: 0 auto 1em;}

/*アニメーション*/
@media screen{
.eventMap{opacity: 0; transform: translateY(100px); animation: fv_fade 0.5s 0.6s ease-out both;}
}

/*左側の花火マップ*/
#map_canvas{width: 70%; height: 640px;}

/*吹き出しのスタイル*/
.fukidasi_wrap{color: #000; max-width: 300px; height: auto; font-size: 14px; line-height: 1.4; padding: 5px;}
.fukidasi_wrap a.heading{display: block; font-size: 120%; margin: 0 0 0.3em; font-weight: bold;}
.fukidasi_wrap span.tel{display: block;}

/*協賛店の右側リスト*/
#side_bar { background: rgba(0, 0, 0, 0.6); width: 30%; height: 640px; text-shadow: 0 1px #000; }
#side_bar .hanabi{height: 320px;}
#side_bar .shop{height: 320px;}
#side_bar h2{border-radius: 0; font-size: 110%; line-height: 40px; height: 40px; padding: 0 15px; margin: 0; background: rgba(30,30,30,0.8); border-top:rgba(255,255,255,0.2) 1px solid;}
#side_bar h2 .num{display: inline-block; margin: 0 0.2em 0 0.8em;}
#side_bar ul{ height: 280px; overflow-y: scroll; padding: 15px; font-size: 90%; line-height: 1.4; -webkit-transition: 0.2s; transition: 0.2s; }
#side_bar ul:hover{background: rgba(0,0,0,0.75);}
#side_bar ul>li{margin: 0; padding: 0;}
#side_bar ul>li+li{margin-top: 0.3em;}
#side_bar ul>li>a{color: #FFF; position: relative; display: block; padding: 0.3em 0 0.3em 30px;}
#side_bar ul>li>a>img{position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width: 24px; max-height: 24px;}
#clear_button{margin: 2em auto; text-align: center;}
#map_switch { padding: 5px 0 0 10px; display: inline-block; }
 
/*協賛店の閲覧リスト*/
.eventResult{width: 100%; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap:1em 2%;}
.eventResult li {float: none; margin: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)); color: #FFF; border-radius: 5px; padding: 15px; text-shadow: 0 1px #000; width: 23.5%; font-size: 100%; line-height: 1.4; }
.eventResult li h3 { font-size: 100%; line-height: 1.4; background: none; margin: 0 0 0.3em; padding: 0 0 0 30px; position: relative; }
.eventResult li h3>img { position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width: 24px; max-height: 24px; }
.eventResult li h3 a { color: #FFFFFF; }
.eventResult li h3+p { margin: 0; padding: 0 0 0 30px; font-size: 80%; }
.eventResult li h3+p span.tel{display: block;}
  
/*イベント*/
section.container { background: none; box-shadow: none; }
div.container { background: rgba(0, 0, 0, 0.6); padding: 20px; box-shadow: none; color: #ddd; -webkit-transition: 0.2s; transition: 0.2s; }
div.container:hover { background: rgba(0, 0, 0, 0.9); }
.container.event { padding: 0; }
.socialContainer { position: relative; z-index: 200; top: 30px; }
.container .tools { margin: -1em auto 2em; }
.container .tools .sorter { margin: auto; text-align: center; float: none; }
textarea, .dropdown, input[type="text"]{font-size: 16px;}

/*イベントカードリスト*/
section.seasonEvent{border: none !important;}
section.seasonEvent h2{display: none;}
section.seasonEvent .card+*{display: none;}
.eventMap .text li.odd { background-color: transparent; }

.container.event ul.member_list { width: 100%; box-sizing: border-box; margin:2em auto 4em; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap:3em 3%; }
.container.event ul.member_list li { box-sizing: border-box; float: none; width: 22.7%; background: none; color: #ddd; padding: 0; margin: 0; text-shadow: 0 1px #000; transition: 0.2s ease-out transform;}
.container.event ul.member_list li:hover{transform: scale(1.08);}
.container.event ul.member_list li h2 { padding :0.5em; margin: 0 0 0.5em; line-height: 1.2; font-size: 100%; }
.container.event ul.member_list li div.image { margin: 0 auto 0; position: relative; width: auto !important; height: auto !important; overflow: visible; }
.container.event ul.member_list li div.image img { background: none; position: relative; border: none; padding: 0; }
.container.event ul.member_list li div.image>a{display: block;}
 
/*イベントカードのスタイル */
.container.event ul.member_list li .card {width: 100%; height: 100%; aspect-ratio:66/40; background-size: cover !important; background-position: center center !important; font-size: min(0.5vw,7px); color: #fff !important; text-shadow: 0 0 0.1em #000,0 0 0.2em #000,0 0 0.3em #000,0 0 0.4em #000,0 0 0.5em #000; position: relative;}
/*メッセージ*/
.seasonEvent .message{ position:absolute; top: 2em; left: 1em;}
.seasonEvent .message p{font-size: 100% !important; line-height: 1.6 !important; font-weight: bold;}
.seasonEvent .message p:first-line{ font-size:140% !important;}
/*会社名と住所*/
.seasonEvent .text{display: none; padding: 0 !important; position:absolute; left: 1em; bottom: 1em;  width: 100%;}
.seasonEvent .text h1{color: #fff !important; font-weight:bold; border:none; background:none; margin:0 0 0.5em; padding:0; height: auto; line-height:1.2; width: auto; }
.seasonEvent .text p{font-size: 100% !important; margin:0; line-height:1.4; }

/*右下（or 左下）のカード*/
.container.event ul.member_list li div.image>.inner{position: absolute; font-size: min(0.5vw,7px); left: 1em; bottom: -1em; text-align: left; pointer-events: none;}
.container.event ul.member_list li div.image img.card { width: 38%; height: auto; aspect-ratio:4/3; max-width: inherit; max-height: inherit; object-fit: contain; object-position: left bottom; position: relative; top: auto; left: auto;}

/*終了した花火大会*/
.syuuryo{display: flex; align-items: flex-start; justify-content: space-between; gap:0 4%; margin: auto;}
.syuuryo>*{width: 48%;}
table.fes { margin: 0 0 1em; }
table.fes td { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 0.5em 0; font-size: 80%; }
table.fes td a { color: #fff; font-weight: bold; }
table.fes tr.ylw td, table.fes tr.ylw td a, span.ylw { color: #FFFF66; }
table.fes tr.red td, table.fes tr.red td a, span.red { color: #FF99C1; }
table.fes td:nth-child(1) { width: 6em; text-align: right; padding-right: 1em; }
table.fes td:nth-child(2) { width: auto; font-weight: bold; }
table.fes td:nth-child(3) { width: 8em; }
table.fes td:nth-child(4) { width: 10em; }
  
/*背景動画*/
.bg_video{background: #666; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none;}
.bg_video video{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); vertical-align: bottom;}
@media(max-aspect-ratio: 16/9) {.bg_video video{width: auto; height: 100%;}}

/*見出し*/
.fes_heading1 { font-size: 200%; font-weight: bold; margin: 0 0 0.7em; line-height: 1.4; color: #fff; }
.fes_heading1.large{font-size: 240%;}
.fes_heading1.shine{text-shadow: 0 0 0.3em #f92d7e,0 0 0.4em #f92d7e,0 0 0.5em #f92d7e;}
.fes_heading1.shine.blue{text-shadow: 0 0 0.3em #0099ff,0 0 0.4em #0099ff,0 0 0.5em #0099ff;}

/*主要花火大会スケジュールのヘッダー*/
.fes_header {width: 100%; height: 120px; padding: 0px 20px 0px 160px; margin: 0 auto 20px; position: sticky; top: 0px; z-index: 20; background: url(img/illust2.png) no-repeat left 20px bottom -20px; background-size: 120px auto; overflow: hidden; background-color: rgba(30,30,30,0.8); display: flex; align-items: center; justify-content: space-between; }
.fes_header .fes_heading1 { margin: 0; }
.fes_header .setumei { font-size: 90%; }
.fes_header .kigou { position: relative; display: inline-block; margin-right: 0.5em; transform: scale(1.8); }
.fes_header .red { color: #FF99C1; font-weight: bold; }
.fes_header .ylw { color: #FFFF66; font-weight: bold; }

/*主要花火大会スケジュールの左にあるSNSなど*/
.fes_schedule_wrap { padding: 20px 0; }
.fes_mousugu { width: 30%; height: 70px; float: left; position: relative; margin: 0 0 40px 0; text-align: right; }
.fes_mousugu img { position: absolute; top: 0; right: -20px; width: 240px; }
.fes_sns { width: 30%; position: sticky; top: 140px; z-index: 10; float: left; clear: left; }

/*主要花火大会スケジュールのテーブル*/
.fes_schedule_table { overflow: hidden; padding-left: 30px; }
table.fes_schedule { width: 100%; }
table.fes_schedule tr {border-bottom: 1px solid rgba(255,255,255,0.2);}
table.fes_schedule tr:first-child{border-top: 1px solid rgba(255,255,255,0.2); background: linear-gradient(to right,rgba(249,45,126,0.25) 30%,rgba(255,255,255,0.075) 70% ) !important;}
table.fes_schedule tr:nth-child(odd){background: rgba(255,255,255,0.075);}
table.fes_schedule tr.red { color: #FF99C1; font-weight: bold; }
table.fes_schedule tr.ylw { color: #FFFF66; font-weight: bold; }
table.fes_schedule td { line-height: 1.4; vertical-align: middle; padding: 0.5em 0; font-size: 90%; }
table.fes_schedule td:nth-child(1) { width: 6em; text-align: right; padding-right: 1em; }
table.fes_schedule td:nth-child(2) { width: auto; font-size: 110%; font-weight: bold; }
table.fes_schedule td:nth-child(3) { width: 8em; }
table.fes_schedule td:nth-child(4) { width: 10em; }
table.fes_schedule td a { color: inherit; }

/*震える*/
.furueru{animation: furueru 3s  infinite;}
@keyframes furueru{
0% {transform: translate(0px, 0px) rotateZ(0deg)}
86% {transform: translate(0px, 0px) rotateZ(0deg)}
87% {transform: translate(0.2em, 0.2em) rotateZ(2deg)}
88% {transform: translate(0px, 0.2em) rotateZ(0deg)}
90% {transform: translate(0.2em, 0px) rotateZ(-2deg)}
92% {transform: translate(0px, 0px) rotateZ(0deg)}
94% {transform: translate(0.1em, 0.1em) rotateZ(1deg)}
96% {transform: translate(0px, 0.1em) rotateZ(0deg)}
98% {transform: translate(0.1em, 0px) rotateZ(-1deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

/*アテンドパークのコンパクトなグロナビ*/
#globalHeader_small, #globalHeader_no { background: url(../../img/button_gloss_30.png) repeat-x center center #000; font-size: 12px; box-shadow: none; }
#globalHeader_small ul li a:hover { background-color: #000; color: #61C1DF; }

/*アテンドパークのメガメニュー*/
#globalHeader_small ul.menu ul { background: url(../../shops_data/pay/img/night/megamenubg.png) no-repeat left bottom #000; width: 1001px; }
#globalHeader_small ul.menu ul li a { color: #61C1DF; background-image: url(../../shops_data/pay/img/night/li2.png); }
#globalHeader_small ul.menu ul li a:hover { background-color: #111D1F; }
#globalHeader_small ul li a.menuhover { background-color: #000; color: #61C1DF; }

/*アテンドパークのフッター*/
footer#globalFooter { box-shadow: none; }
.footer1 { background: rgba(0, 0, 0, 0.6); font-size: 12px; color: #ddd; border: none; -webkit-transition: 0.2s; transition: 0.2s; }
.footer1 img.fl { box-shadow: none; border-radius: 5px; margin-top: 1.3em; }
.footer1 a, .footer1 h2 span.right a { color: #FFF; }
.footer2 { background: rgba(0, 0, 0, 0.8); border: none; -webkit-transition: 0.2s; transition: 0.2s; }
.footer2 .inner { background: none; }
.footer2 img.fl { box-shadow: none; border-radius: 3px; }
.footer1:hover,.footer2:hover{background: rgba(0, 0, 0, 0.9);}
address.copyright { background: rgba(0, 0, 0, 1); color: #fff; border: none; line-height: 1.2; padding: 1em 0; }

/*お申込みはこちら*/
a.exlpbn { position: fixed; top: 50%; right: 0; width: 50px; height: auto; transform: translateY(-50%); display: block; z-index: 300; -webkit-transition: 0.6s ease-out; transition: 0.6s ease-out; }
a.exlpbn img { width: 100%; height: 100%; }
a.exlpbn:hover img { opacity: 0.7; }