@import url('https://fonts.googleapis.com/css2?family=Pushster&display=swap');
/*////////////////////////////////////////////////////////////////////////
reset
////////////////////////////////////////////////////////////////////////*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: top;
	word-break: break-all;
}

html {
	image-rendering: -webkit-optimize-contrast;
}

body{
	overflow-y: scroll; /* スクロールバー常に表示 */
}

a {
 word-break: break-all;
}

html,body {
	font-size-adjust:100%;
	-webkit-font-size-adjust: 100%;
}

body,h1,h2,h3,h4,h5,h6,p,img,
hr,li,ul,dl,dt,dd
{
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

table th{font-weight:normal;}

img{border:0px;}

.clear{clear:both;}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}


/*////////////////////////////////////////////////////////////////////////
基本カラー
////////////////////////////////////////////////////////////////////////*/
:root{
--orange:#ff7415;
--blue:#2a719a;
--yellow:#efdec1;
--white:#f2eee7;
--green:#57773d;


--white10: rgba(255,255,255,0.1);
--white30: rgba(255,255,255,0.3);
--white50: rgba(255,255,255,0.5);
--white70: rgba(255,255,255,0.7);
}


/*////////////////////////////////////////////////////////////////////////
基本
////////////////////////////////////////////////////////////////////////*/
.non{
	opacity:0.3;
	cursor:default;
	pointer-events: none;
}

.non2{
	opacity:0;
	cursor:default;
	pointer-events: none;
}

ruby {
        display: inline-table;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: none;
        white-space: nowrap;
        text-indent: 0;
        vertical-align: bottom;
        text-decoration: inherit;
        text-align: center;
        }
ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    line-height: 1.1em;
	text-align: center;
	font-size: 50%;
	position: relative;
	top: 0.5em;
	transform: translateY(0.5em);
    }

br.txtCutNone{display:none;}

a{
	color: var(--green);
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration: none;
}

::selection {
	color: #fff;
	background-color:#00b4c8;
}
::-moz-selection {
	color: #fff;
	background-color:#00b4c8;
}

.txtCutNone{
	display: none;
}

.solidLine{
	border-bottom: 1px dashed var(--green);
}



@keyframes rotationR{
	0% { transform: rotate(-360deg);}
	100% {transform: rotate(0deg);}
}

@keyframes rotationL{
	0% { transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}


.fadeUp{
	opacity: 0;
	position: relative;
	bottom: -20px;
}

.fadeUp2{
	opacity: 0;
	position: relative;
	bottom: -20px;
}

h2{
	text-align: center;
	margin-bottom: 5%;
	opacity: 0;
}


@keyframes img-wrap2 {
  0% {
    clip-path:  inset(0% 100%);
    -webkit-clip-path: inset(0% 100%);
  }

  100% {
    clip-path: inset(0% 0%);
    -webkit-clip-path: inset(0% 0%);
  }
}

.set2{
	opacity: 1;
	animation: img-wrap2 2s;
}

h2 img{
	width: 65%;
	max-width: 600px;
}

.txtLink{
	border-bottom: 1px dashed var(--orange);
	padding: 0 0.5em;
	font-weight: bold;
	color: var(--orange);
}

.txtLink:hover{
	background-color: var(--white);
}

/*////////////////////////////////////////////////////////////////////////
全体ボックス
////////////////////////////////////////////////////////////////////////*/
html{
}

body{
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: min(1.8vw, 20px);
	color: var(--green);
	background-color: var(--yellow);
	overflow-x: hidden;
}

#loading{
	width:100%;
	height: 100%;
	position:fixed;
	z-index:999;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	pointer-events: none;
}

#loading p{
	display: block;
	width: 100%;
	padding: 5px;
}

#backTop{
	position: fixed;
	z-index: 9;
	right: 1%;
	bottom: 1%;
	padding: 2%;
	transform: rotate(270deg);
	border-radius: calc(1px / 0);
	background-color: var(--blue);
	max-width:  150px;/* 円のサイズ（高さにもなる） */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	background-image: url("../img/yajirusi.jpg");
	background-position: center center;
	background-size: 100%;
}


#backTop:hover{
	filter: brightness(1.5);
}

#mainBox{
	width: 100%;
	padding: 10% 0 0;
	margin: auto;
	opacity: 0;
	position: relative;
}

.inBox{
	width: 100%;
	max-width: 1300px;
	padding:0 3%;
	margin: auto;
}

.inBox2{
	padding:8% 3% 10%;
}

.indent{
	padding-left: 1em;
	font-size: 75%;
}

.indent li{
	text-indent: -1em;
	margin-bottom: 5px;
}

.nami{
	background-image: url("../img/nami_1.png");
	padding: 2% 0;
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 16vw;
	margin-bottom: -1px;
	animation: bgscroll1 5s linear infinite;
	margin-top: -5%;
	position: relative;
}

.nami2{
	background-image: url("../img/nami_2.jpg");
	padding: 2% 0;
	background-repeat: repeat-x;
	background-position: center top;
	background-size: 16vw;
	margin-top: -1px;
	animation: bgscroll2 10s linear infinite;
}

 @keyframes bgscroll1 {
  0% {background-position: 0 bottom;}
  100% {background-position: 16vw bottom;}
 }

 @keyframes bgscroll2 {
  0% {background-position: 0 top;}
  100% {background-position: -16vw top;}
 }


.line{
	background-image: url("../img/border.jpg");
	padding: 2% 0;
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 5%;
	margin-top: -1px;
}

.yellow{background-color: var(--yellow);position: relative;}
.orange{background-color: var(--orange);position: relative;}


.txtAria{
	border-radius: 50px;
	padding: 3.5em;
	position: relative;
	z-index: 1;
}

#contact .txtAria,
#gContact .txtAria,
#outLine .txtAria,
#bonus .txtAria,
#ticketInfo .txtAria,
#goods .txtAria,
#goodsInfo .txtAria{
	background-color: var(--yellow);
}

#ticket .txtAria,
#goodsInfo .txtAria,
#schedule .txtAria,
#guideline .txtAria{
	padding: 0 0 5%;
}

.txtAria .txtBox{
	border: solid 2px var(--green);
	outline: solid 5px var(--green);
	outline-offset: 3px; 
	padding: 5%;
	background-color: var(--yellow);
	position: relative;
}

.txtAria .txtBox .end{
	display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(239,222,193,0.6);
	color: #fff;
}

.txtAria .txtBox .end p{
	color: var(--white);
	background-color:  var(--green);
	padding: 0.5em;
}


/*////////////////////////////////////////////////////////////////////////
ヘッダー
////////////////////////////////////////////////////////////////////////*/
#tent, header{
	width: 100%;
	position: fixed;
	z-index: 9;
	background-image: url("../img/header_bg.png");
	background-position: center 99%;
	background-size: 13%;
	background-repeat: repeat-x;
	text-align: center;
	padding: 1.5% 0 2%;
}

nav{
}

nav li{
	width: 13.5%;
	max-width: 180px;
	display: inline-block;
	color: var(--gold);
	padding:0.5% 1%;
	margin: 0.3%;
	position: relative;
	background-color: var(--blue);
	border-radius: calc(1px / 0);
	border: solid 2px var(--yellow);
}

nav li:after{
	content: "";
	position: absolute;
	top: -6px;
	left: -6px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: calc(1px / 0);
	border: solid 4px var(--orange);
}


nav.topNavi{
	text-align: center;
	padding:6% 0 0;
}

nav.topNavi li{
	width: 23%;
	max-width: inherit;
	padding:1% 3%;
	margin: 0.6%;
}

nav li img{
	width: 100%;
	vertical-align:middle;
}

nav li .new{
	position: absolute;
	right: 0;
	left: 0;
	top: -2.2em;
	font-size: 70%;
	font-weight: bold;
	background-color: var(--gold);
	color: var(--blue);
	border-radius: 0 0 calc(1px / 0) calc(1px / 0);
	border: double 3px var(--purple);
}

nav li:hover, .select{
	filter: brightness(1.5);
}


/*////////////////////////////////////////////////////////////////////////
トップ
////////////////////////////////////////////////////////////////////////*/
#logoBox{
	text-align: center;
	pointer-events: none;
	position: relative;
}

#logoBox .logo img{
	width: 70%;
	max-width: 800px;
	/*animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1);*/
}

.hanaLine{
	padding: 2% 0;
	background-image: url("../img/hana.jpg");
	background-repeat: repeat-x;
	background-position: center center;
	background-size: 28%;
}

/*バナー-------------------------------------------------*/
.bannerAria{
	margin: 3em auto;
	text-align: center;
}

.bannerAria img{
	width: 48%;
	margin: 1%;
	max-width: 500px;
	border: solid 2px var(--blue);
}

.bannerAria img:hover{
	filter: brightness(1.1);
}

/*ニュース-------------------------------------------------*/
#news{
	padding: 1em 1em 1em 2em;
	position: relative;
	border-radius: calc(1px / 0);
	border: solid 3px var(--green);
	background-color: var(--white);
	margin-bottom: 5em;
}

#news .txtBox{
	width: 95%;
	display: flex;
	padding: 0.8em 1em 0.8em 0.5em;
}

#news .txtBox .day{
	width: 8em;
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
}

#news .txtBox .txt{
	display: inline-block;
	vertical-align: middle;
	flex: 1;
}

#news .more{
	position: absolute;
	right: 2%;
	top: 50%;
	transform: translate(0,-50%);
	padding: 2.5%;
	border-radius: calc(1px / 0);
	background-color: var(--blue);
	max-width:  240px;/* 円のサイズ（高さにもなる） */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	background-image: url("../img/yajirusi.jpg");
	background-position: center center;
	background-size: 100%;
}

#news .more:hover{
	filter: brightness(1.5);
}

/*動画-------------------------------------------------*/
.movie{
	display: block;
	border: solid 5px var(--orange);
	margin-bottom: 30px;
	border-radius: 30px;
	padding: 5%;
	background-color: var(--orange);
	position: relative;
}

.youtube{
	margin: auto;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border: solid 5px var(--white);
}

.youtube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}



/*概要-------------------------------------------------*/
#outLine{
	text-align: center;
	position: relative;
}

#outLine h3{
	margin-bottom: 1em;
}

#outLine h3 img{
	width: 25%;
	max-width: 200px;
}

#outLine .txtBox strong{
	font-size: 120%;
	display: block;
	margin-bottom: 0.2em;
}

#outLine .pudding{
	position: absolute;
	right: -4%;
	bottom: -5%;
	width: 20%;
	opacity: 0;
}

#outLine .pudding img{
	width: 100%;
}


.puddingSet{
	animation: puddingSet 0.5s linear forwards;
}


@keyframes puddingSet {
  0% {
	transform:scale(1.5);
	opacity: 0;
  }
  100% {
	transform:scale(1);
	opacity: 1;
  }
}


/*タイトル-------------------------------------------------*/
#titleList{
	text-align: center;
}

.titleListBg,
.hanaBg{
	background-image: url("../img/bg_hana.jpg");
	background-size: 100%;
}


#titleList h3{
	margin: 4em auto 0.8em;
}

#titleList h3 img{
	width: 96.5%;
}

#titleList .titleSet{
	width: 30%;
	display: inline-block;
	margin: 1.5%;
}

#titleList .titleSet .titleKey img{
	width: 100%;
	border: solid 3px var(--yellow);
	outline: solid 2px var(--orange);
}

#titleList .titleSet .titleLogo{
	margin-top: -20%;
	margin-bottom: 10%;
}

#titleList .titleSet .titleLogo img{
	width: 100%;
}

#titleList .titleSet dl{
	font-weight: bold;
}

#titleList .titleSet dl dt{
	background-color: var(--orange);
	border-radius: calc(1px / 0);
	padding: 0.8em;
	color: var(--yellow);
	margin-bottom: 0.5em;
	font-size: 85%;
}

#titleList .titleSet dl dd{
	font-size: 110%;
	margin-bottom: 0.8em;
}

#titleList .titleSet dl dt small{
	vertical-align: bottom;
}

#titleList .titleSet .siteLink{
	background-color: var(--blue);
	border: double 6px var(--yellow);
	color: var(--yellow);
	margin-top: 2em;
	padding: 1em 0.5em;
}

#titleList .titleSet .siteLink:hover{
	filter: brightness(1.5);
}


#titleList .pudding{
	margin: 3em auto 6em;
}

#titleList .pudding img{
	width: 29%;
	max-width: 500px;
}


/*お問い合わせ-------------------------------------------------*/
#contact,
#gContact{
	text-align: center;
	position: relative;
	font-size: 90%;
	line-height: 1.8em;
	margin-bottom: 3em;
}

#contact h3,
#gContact h3{
	background-color: var(--green);
	color: var(--yellow);
	width: 20em;
	font-weight: normal;
	margin: 0 auto 1em;
	padding: 0.5em;
}

#contact .txtBox strong,
#gContact .txtBox strong{
	display: block;
	margin-bottom: 0.2em;
}

.contactTxt{
	text-align: center;
	color: var(--yellow);
	line-height: 1.8em;
	font-size: 90%;
}


/*////////////////////////////////////////////////////////////////////////
会場チケット
////////////////////////////////////////////////////////////////////////*/

#ticket .txtAria h3,
#schedule .txtAria h3,
#bonus .txtAria h3,
#guideline .txtAria h3,
#kikaku .txtAria h3,
#ticketInfo .txtAria h3,
#goodsInfo .txtAria h3{
	background-color: var(--green);
	color: var(--yellow);
	width: 22em;
	font-weight: normal;
	margin: 0 auto 1em;
	padding: 0.5em;
	text-align: center;
}

#ticket .txtAria .sMds,
#schedule .txtAria .sMds,
#bonus .txtAria .sMds,
#ticketInfo .txtAria .sMds,
#guideline .txtAria .sMds,
#goodsInfo .txtAria .sMds{
	font-weight: bold;
	margin-bottom: 0.5em;
	border-bottom:  double 3px var(--green);
}

.about{
	display: none;
}



#ticket .txtAria dl,
#goodsInfo .txtAria dl{
	display: flex;
	margin-bottom: 0.1em;
}

#ticket .txtAria dt, #ticket .txtAria dd,
#goodsInfo .txtAria dt, #goodsInfo .txtAria dd{
	padding: 0.5em 1em;
}

#ticket .txtAria dt,
#goodsInfo .txtAria dt{
	background-color: var(--blue);
	color: var(--yellow);
	text-align: left;
	width: 20em;
	display: flex;
}

 #ticket .txtAria dd,
#goodsInfo .txtAria dd{
	background-color: var(--white);
	flex: 1;
}

#bonus .txtAria .txt,
#ticketInfo .txtAria .txt,
#goodsInfo .txtAria .txt{
	background-color: var(--white);
	padding: 3%;
	margin-bottom: 1em;
}

#bonus .txtAria .mds,
#ticketInfo .txtAria .mds,
#goodsInfo .txtAria .mds{
	background-color: var(--blue);
	border-radius: 10px;
	padding: 0.5em 1em;
	display: block;
	color: var(--white);
	font-size: 80%;
}

#bonus .txtAria .mds:hover,
#ticketInfo .txtAria .mds{
	cursor: pointer;
	filter: brightness(1.5);
}

#schedule .txtAria dl{
	display: flex;
	margin-bottom: 0.1em;
}

#schedule .txtAria dt, #schedule .txtAria dd{
	padding: 0.5em 1em;
}

#schedule .txtAria dt{
	background-color: var(--blue);
	color: var(--yellow);
	text-align: left;
	width: 10em;
	display: flex;
}

#schedule .txtAria dd{
	background-color: var(--white);
	flex: 1;
}


/*////////////////////////////////////////////////////////////////////////
配信チケット
////////////////////////////////////////////////////////////////////////*/
#ticket .txtAria .link{
	background-color: var(--green);
	border-radius: calc(1px / 0);
	color: var(--white);
	padding: 0.3em 1em;
	margin: 0.5em auto 2em;
	border: solid 2px var(--green);
}

#ticket .txtAria .link:hover{
	border: solid 2px var(--orange);
}


.dlBox dl{
	display: flex;
	margin-bottom: 0.1em;
	font-size: 80%;
}

.dlBox dt, .dlBox dd{
	padding: 0.5em 1em;
}

.dlBox dt{
	background-color: var(--blue);
	color: var(--yellow);
	text-align: left;
	width: 13em;
	display: flex;
}

.dlBox dd{
	background-color: var(--white);
	flex: 1;
}

.aboutBox dl{
	display: flex;
	margin-bottom: 2em;
	margin-bottom: 0.1em;
	font-size: 70%;
}

.aboutBox dt, .aboutBox dd{
	padding: 1.5em 1em;
}

.aboutBox dt{
	background-color: var(--blue);
	color: var(--yellow);
	text-align: left;
	width: 12em;
	display: flex;
}

.aboutBox dd{
	background-color: var(--white);
	flex: 1;
}

.aboutBox .miniBox{
	border: solid 1px #999;
	padding: 1em;
	margin-bottom: 1em;
}


.area{
	margin: 1em auto;
}

.area dl{
	display: flex;
	margin-bottom: 2em;
	margin-bottom: 0.1em;
	font-size: 100%;
}

.area dt, .area dd{
	padding: 0.5em 1em;
}

.area dt{
	background-color: #999;
	color: var(--white);
	text-align: left;
	width: 9em;
	display: flex;
}

.area dd{
	background-color: var(--white);
	flex: 1;
	border-bottom: 1px solid #999;
}




/*////////////////////////////////////////////////////////////////////////
グッズ
////////////////////////////////////////////////////////////////////////*/
#goodsInfo .sMds{
	margin-top: 3em;
}

#goodsInfo .point{
	font-weight: bold;
	font-size: 80%;
	margin-bottom: 1em;
}

#goodsInfo .point .underLine{
	text-decoration: underline;
	text-decoration-thickness: 1em;
	text-decoration-color: rgba(255, 116, 21, 0.4);
	text-underline-offset: -0.5em;
	text-decoration-skip-ink: none;
}




#goodsInfo .txtAria dl{
	display: flex;
	margin-bottom: 0.1em;
}

#goodsInfo .txtAria dt, #goodsInfo .txtAria dd{
	padding: 0.5em 1em;
}

#goodsInfo .txtAria dt{
	background-color: var(--blue);
	color: var(--yellow);
	text-align: left;
	width: 11em;
	display: flex;
}

#goodsInfo .txtAria dd{
	background-color: var(--white);
	flex: 1;
}



.goodsAria{
	text-align: center;
	margin: auto;
}

.goodsAria .itemBox{
	width: 31%;
	margin: 1.5% 0.5%;
	display: inline-block;
	background-color: var(--white);
	text-align: left;
	font-size: 80%;
	border: solid 2px var(--green);
}

.goodsAria .itemBox img{
	width: 100%;
}

.goodsAria .itemBox a:hover{
	background-color:transparent;
}

.goodsAria .itemBox a{
	position: relative;
	display: block;
}

.goodsAria .itemBox a:before{
	content: "";
	width: 0;
	height: 100%;
	display: block;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	transition: all 0.2s 0s ease-out;
	background: var(--blue);
	opacity: 0.7;
}

.goodsAria .itemBox a:hover:before{
	width: 100%;
}

.goodsAria .itemBox a:after{
	content: "more";
	position: absolute;
	margin-top: -0.75em;
	margin-left: -2.5em;
	line-height: 1.5em;
	height: 1.5em;
	letter-spacing: 1px;
	width: 5em;
	border: #fff 1px solid;
	text-align: center;
	top:50%;
	left:50%;
	color: #fff;
	z-index: 2;
	display: block;
	opacity: 0;
	transition: all 0.2s 0s ease-out;
}

.goodsAria .itemBox a:hover:after{
	opacity: 1;
}

.goodsAria .itemBox .goodsTxt{
	padding: 5%;
	font-weight: bold;
}

#goods .itemBox .goodsTxt .itemName{
	color: var(--grenn);
	padding: 0 0 1em;
}

#goods .itemBox .goodsTxt .itemName .memo{
	border-radius: calc(1px / 0);
	background-color:var(--blue);
	color: var(--white);
	padding:0 1em;
	margin-bottom: 0.5em;
	font-size: 90%;
	display: block;
	line-height: 2em;
}

#goods .itemBox .goodsTxt .itemName .memo2{
	background-color: var(--orange);
}

.goodsAria .itemBox .title{
	padding: 1em;
	line-height: 1.3em;
	font-weight: bold;
}

.goodsAria .itemBox .limit{
	padding: 0.2em 1em;
	text-align: right;
	border-top: dashed 1px var(--green);
}

.goodsAria .itemBox .price{
	padding: 0.5em;
	text-align: right;
	background-color: var(--green);
	color: var(--white);
	vertical-align: baseline;
}

.goodsAria .itemBox .price small{
	vertical-align: baseline;
}


/*////////////////////////////////////////////////////////////////////////
注意事項
////////////////////////////////////////////////////////////////////////*/
.coution{
	font-size: 80%;
	padding-bottom: 5%;
}

.coution .mds{
	background-color: var(--gold);
	padding: 0.5em 1em;
	border-radius: calc(1px / 0);
	color: var(--blue);
	font-weight: bold;
	margin-bottom: 1em;
	vertical-align: middle;
	position: relative;
}

.coution .mds .ster{
	position: absolute;
	right: 0;
	top: -15%;
	width: 5%;
}

.coution .mds .ster img{
	width: 100%;
}


/*######################################################################
メディアクエリ
######################################################################*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1300px) {
/*//////////////////////////////////////////////////////////////////////*/
	
	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 1000px) {
/*//////////////////////////////////////////////////////////////////////*/

	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 800px) {
/*//////////////////////////////////////////////////////////////////////*/
br.txtCut{display:none;}
br.txtCutNone{display:block;}
	
body{
	font-size: min(3vw, 14px);
	line-height: 1.5em;
}
	
#backTop{
	padding: 6%;
}

.inBox{
	padding:0 5%;
}

.inBox2{
	padding:15% 5% 20%;
}
	
.txtAria{
	padding: 2em;
	border-radius: 20px;
}

/*
#ticket .txtAria,
#schedule .txtAria,
#guideline .txtAria{
	padding: 0 0 5%;
}
*/

.txtAria .txtBox{
	border: solid 1px var(--green);
	outline: solid 3px var(--green);
	outline-offset: 2px; 
	padding: 8% 5%;
}
	
/*ナビ-------------------------------------------------*/
#tent, header{
	padding: 3% 0 5%;
}
	
header{
	display: none;
}
	
header nav{
	position: fixed;
	z-index: 9;
	padding: 10%  5% 5%;
	height: 100%;
	width: 100%;
	top:0;
	background-color: var(--orange);
}
	
nav li{
	width: 100%;
	max-width: 250px;
	display: block;
	padding:3% 5%;
	margin: 3% auto;
	border: solid 2px var(--yellow);
}
	
nav li img{
	width: 80%;
}
	
.navBtn {
    position: fixed;
	background-color: var(--blue);
	border: solid 2px var(--yellow);
	border-radius: calc(1px / 0);
    cursor: pointer;
    width: 12vw; /* ビューポートの幅の15% */
    height: 12vw; /* ビューポートの幅に基づいた高さ */
    z-index: 1000;
    right: 2%;
    top: 1%;
    padding: 1vw; /* ビューポートの幅に基づいたパディング */
    box-sizing: border-box; /* paddingとborderを含める */
}

.navBtn:hover {
    background-color: var(--orange);
}
	
.navBtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    background: #fff;
    border-radius: 2px;
    width: 50%; /* アイコンの幅を調整 */
    height: 5%;  /* アイコンの高さを調整 */
}

.navBtn span:nth-of-type(1) {
    top: 34%; /* アイコンの位置調整 */
    left: 25%; /* アイコンの位置調整 */
    transform: rotate(0deg);
}

.navBtn span:nth-of-type(2) {
    top: 49%; /* アイコンの位置調整 */
    left: 25%; /* アイコンの位置調整 */
    transform: rotate(0deg);
}

.navBtn span:nth-of-type(3) {
    top: 64%; /* アイコンの位置調整 */
    left: 25%; /* アイコンの位置調整 */
    transform: rotate(0deg);
}

.navBtn.active span:nth-of-type(1) {
    top: 50%;
    left: 50%;
    width: 50%;
    height: 5%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

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

.navBtn.active span:nth-of-type(3) {
    top: 50%;
    left: 50%;
    width: 50%;
    height: 5%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.non2{
	opacity:1;
	cursor:inherit;
	pointer-events: inherit;
}
	
nav.topNavi{
	display: none;
}


/*////////////////////////////////////////////////////////////////////////
トップ
////////////////////////////////////////////////////////////////////////*/
#logoBox{
	padding: 10% 0 0;
}

.hanaLine{
	padding: 3% 0;
	background-size: 50%;
}
	
/*バナー-------------------------------------------------*/
.bannerAria img{
	width: 98%;
}
	
.bannerAria img.miniB{
	width: 48%;
}

/*ニュース-------------------------------------------------*/
#news{
	padding: 0.5em 1em 0.5em 1.5em;
}

#news .txtBox,
#news .txtBox .day,
#news .txtBox .txt{
	display: block;
}

#news .more{
	padding: 5%;
	max-width: 30px;
}


/*概要-------------------------------------------------*/
#outLine h3 img{
	width: 35%;
}

#outLine .pudding img{
	width: 100%;
}


/*タイトル-------------------------------------------------*/
#titleList h3{
	margin: 0em auto 0.8em;
}

#titleList h3 img{
	width: 100%;
}

#titleList .titleSet{
	width: 80%;
	display: block;
	margin: 1.5% auto;
}

#titleList .titleSet .titleLogo{
	margin-bottom: 3%;
}

#titleList .titleSet .siteLink{
	margin: 2em auto 5em;
}

#titleList .pudding img{
	width: 50%;
}

/*////////////////////////////////////////////////////////////////////////
会場チケット
////////////////////////////////////////////////////////////////////////*/
#ticket .txtAria h3,
#schedule .txtAria h3,
#bonus .txtAria h3,
#guideline .txtAria h3,
#kikaku .txtAria h3{
	width: 100%;
	padding: 1.5em 0.5em;
}
	
	
#ticket .txtAria dt{
	width: 14em;
}

#schedule .txtAria dt{
	width: 8em;
}

	
/*////////////////////////////////////////////////////////////////////////
配信チケット
////////////////////////////////////////////////////////////////////////*/
#ticket .txtAria .link{
	padding: 0.5em 1.5em;
}

#ticket .txtAria .link:hover{
	border: solid 2px var(--orange);
}
	
.aboutBox dl{
	display: block;
	width: 100%;
	font-size: 80%;
}

.aboutBox dt, .aboutBox dd{
	padding: 1em;
	display: block;
}

.aboutBox dt{
	width: 100%;
	display: block;
}

.aboutBox dd{
	display: block;
}
	
/*////////////////////////////////////////////////////////////////////////
グッズ
////////////////////////////////////////////////////////////////////////*/
.goodsAria .itemBox{
	width: 48%;
}
	
#goods .itemBox .goodsTxt .itemName{
	line-height: 1.3em;
}
	

/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 480px) {
/*//////////////////////////////////////////////////////////////////////*/

	
/*//////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////*/
}