/* CSS Document */

/*============デバイス共通================================================*/


/*reset--------------------*/
a {
background-color: transparent;
text-decoration: none;
color: inherit;
transition: all .2s ease 0s!important;
-moz-transition: all .2s ease 0s!important;
-webkit-transition: all .2s ease 0s!important;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*変数設定--------------------*/
:root {
  --color01:#040B39;/*青*/
  --color02:#DDE9FF;/*水色*/
  --color03:#fff;/*白*/
  --color04:gray;/**/
  --color05:#667BCE;/*明るめの青*/
  --color06:#F6F8FF;/*淡い水色*/
  --color07:#F8F7FF;/*淡い紫色*/
  --color08:#4C29A0;/*紫*/
}

.bg01{
	background-color: var(--color01);
}
.bg02{
	background-color: var(--color02);
}
.bg03{
	background-color: var(--color03);
}
.bg04{
	background-color: var(--color04);
}
.bg05{
	background-color: var(--color05);
}
.bg06{
	background-color: var(--color06);
}
.bg07{
	background-color: var(--color07);
}
.bg08{
	background-color: var(--color08);
}




/*共通部分--------------------*/
/*font----------*/


.noto-serif-jp-extralight {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  font-style: normal;
}

.noto-serif-jp-light {
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  font-style: normal;
}

.noto-serif-jp-regular {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-style: normal;
}

.noto-serif-jp-medium {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-style: normal;
}

.noto-serif-jp-semibold {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-style: normal;
}

.noto-serif-jp-bold {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-style: normal;
}

.noto-serif-jp-black {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-style: normal;
}
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-maru-gothic-black {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-style: normal;
}

/*header----------*/
header{
position: fixed; 
z-index: 10;
}
.navbar-brand{
color: #fff;   
}
.headerNav__pc{
/*filter:drop-shadow(0px 0px 3px black);*/
}
.headerNav__pc li a{
color: #fff;
}
.headerNav__pc li{
position:relative;
display:inline-block; 
}
.headerNav__pc li a:hover{
color: var(--color02); 
}
/*
.headerNav__pc li::after{
content:"";
display:inline-block;
width:1px;
height:20px;
background-color:#fff;
position:absolute;
top:11px;
right:0px;
}
.headerNav__pc li:last-child::after{
display: none;
}
*/

.header__toggleBtn{
font-size: 1.5rem;
color: #fff;
position: absolute;
top: .5rem;
right: 2rem;

}
.toggleNav__list li a{
color: #fff!important;
}
.toggleNav__list li a:hover{
color: var(--color02)!important;
}
.toggleBtn_close{
font-size: 1.5rem;
color: #fff!important;
position: absolute;
top: .5rem;
right: 2rem;   
}
#toggleNav {
z-index: 10;
top: 0;
right: -120%;
height: 100vh; 
transition: all 0.6s;
background-color: #000;
opacity: .9;
}

#toggleNav.panelactive {
  right: 0;
}

/*common*/

.pageHeader{
background: transparent linear-gradient(180deg, #040B39 0%, #39254A 100%) 0% 0% no-repeat padding-box;
background-size: cover;
color: #fff;
height: 300px;
padding-top: 150px;
}

.commonBt{
background-color: gray;
border-radius: 0;
border: hidden;
color: #fff;
text-align: center;
padding: .5rem;
}
.commonBt:hover{
background-color:lightgray;
color: #000;
opacity: .8;
}
.sectionTtl{
color: var(--color01);  
display: flex;
justify-content: center;
align-items: center;
}
.sectionTtl::before,
.sectionTtl::after{
	content: '';
	width: 50px;
	height: 1px;
	background-color: var(--color01);

}
.sectionTtl::before{
margin-right: 20px;

}
.sectionTtl::after{
margin-left: 20px;

}
/*外部リンクの後ろにアイコン*/
.externalLink{
margin-left: .4em;
}
.externalLink:after{
font-family: "Font Awesome 5 Free";
content: '\f35d';
font-size: 0.7em;
font-weight: 900; 
display: inline;
margin-left:0;
margin-right: .4em;
vertical-align : 10%;  
}
/*テキストリンク*/
.textLink{
color: var(--color05)!important;
font-weight: 700;
text-decoration: underline;
    
}
.textLink:hover{
opacity: .5;
}
.pageWrap{
    max-width: 1200px;
    margin: auto;
	width: 90%;
}


footer{
/*background-color:  var(--color01);*/
background: transparent linear-gradient(180deg, #040B39 0%, #39254A 100%) 0% 0% no-repeat padding-box;
color: #fff;
}
.footerNav li a{
color: #fff;
}
.footerNav li a:hover{
color: #fff;
opacity: .5;
}
/*
.footerNav li a::after{
content:"";
display:inline-block;
width:2px;
height:20px;
background-color:red;
position:absolute;
top:11px;
right:0px;
}
*/

.footerLink__mail{
color: var(--color02);  
}
.footerLink__mail:hover{
opacity: .5;
}

/*============TOP共通============*/
.hero {
background: url("../images/top/topmain_pc.jpg") center top; 
background-size: cover;
background-repeat: no-repeat;    
} 
.heroLogo{
background: url("../images/top/herologo.png") center top; 
/*background-color: red;*/
background-size: contain;
background-repeat: no-repeat; 
}
/*
.heroLogo img{
height: 100%;
}
*/



/*topNews----------*/
.topAnnounce{
background-color:  var(--color01);
color: #fff;
margin: 0;
padding: 30px 0;
letter-spacing: 0.075em;
}
.topNews__box{
background-color:  var(--color02);   
}
.topNewsList01__box{
height: 500px;
}
.topNewsList01__box,.topNewsList02__box{
background-color:  var(--color03);
}

.facebook_wrap{
background-color: #fff;
position: relative;
overflow: hidden;
height: 500px;
width: 380px
}
.facebook_wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%!important;
height: 100%!important;
padding: 15px;
} 




.topNews__snsBanner{
background-color:  var(--color01);
color: #fff; 
height: 100px;   
align-items: center;
margin-top: 2rem;
transition: all .2s ease 0s!important;
-moz-transition: all .2s ease 0s!important;
-webkit-transition: all .2s ease 0s!important;
}
.topNews__snsBanner:hover{
opacity: .8;
}
.topNews__flexL{
    max-width: 500px;
}

/*topVolunteer----------*/
.topVolunteer{
max-width: 920px;
}

/*topyoutube----------*/
.youtube {
  width: 80%;
  aspect-ratio: 16 / 9;
  margin: auto
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


.aboutPreface__heading{
color: var(--color05);
}


/*FAQ----------*/
.faqHeading{
font-size: 1.25rem;
padding-left: 1rem;
margin-top: 50px;
}
/*
.accordion-button:focus{
border-color: red!important;
}
*/

.accordion__q::before{
content: 'Q.';
left: 0;
font-size: 21px;
color: var(--color05); 
width: 30px;
margin-right: 5px;
display: inline-block;
text-align: center;
line-height: 100%;
/*    background-color: red;*/
}
.accordion__a{
background-color: #F8F8F8;
text-indent: em;
padding-left: 3.5em;
position:relative;
}
.accordion__a p::before{
position:absolute; 
content: 'A.';
left:20px;
top:2;
font-size: 21px;
color: var(--color05); 
width: 30px;
margin-right: 5px;
display: inline-block;
text-align: center;
line-height: 100%;
/*background-color: red;*/
}
.accordion__a p{
margin-bottom: 0;
}
.accordion-button:not(.collapsed) {
background-color: #fff;
}
.accordion-collapse{
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

/*募金----------*/
.donationBox p{
line-height: 1.5rem;  
font-size: 1rem;
}
.sponsor__donation__btn{
letter-spacing: .1rem;
padding: 0.5rem 1.5rem;
}

/*観覧時のお願い----------*/
.notesIntro__txt{


}

.prohibited__heading{
background: transparent linear-gradient(180deg, #040B39 0%, #39254A 100%) 0% 0% no-repeat padding-box;
color: #fff;
font-size: 1.5rem;
margin-bottom: 0;

}
.prohibitedList{
background-color: var(--color06); 
margin-top: 0;
border: solid 2px var(--color01);
}
.notesHeading{
font-size: 1rem;
}

.prohibitedList li::after,
.notesList li::after{
content: '';
display: block;
background-color:#E7ECF6;
height: 2px;
width: 100%;
}
.prohibitedList li:last-child::after,
.notesList li:last-child::after{
content: none;
}
.notesHeading::before{
content: '■';
color: var(--color05); 
display:inline-block;
margin-right:10px;
position:relative;
top:0;
left:0;

}
.notesList li::after{

}

/*有料観覧席について----------*/
.ticketInfo__intro{
background-color: var(--color07);

}
.ticketInfo__period{

}
.ticketInfo__intro h3{
color: var(--color08);
letter-spacing: .1rem;
}
.ticketInfo__heading{
font-size: 1rem;

}
.ticketTable{
max-width: 1024px;
}
.ticketInfo__flowlist{
max-width: 700px;
margin: auto;
padding: 2rem;

}
.ticketInfo__flowlist__itm{
background-color: aliceblue;
position: relative;
}
.ticketInfo__flowlist__itm::after{
position: absolute;
bottom: -50px;
left: 100px;
content: '';
background-color: var(--color02);
width: 3px;
height: 50px;
z-index: 0;
}
.ticketInfo__flowlist__itm:last-child::after{
width: 0px;
height: 0px;
}
.ticketInfo__flowlist__num{
color: var(--color05);
margin-right: 30px;
}
.ticket__NotesHeading{
font-size: 1rem;
text-indent: -1em;
padding-left: 1em;
}
.ticket__NotesHeading::before{
content: '■';
color: var(--color05); 
display:inline-block;
margin-right:10px;
position:relative;
top:0;
left:0;

}

/*
ol.ticketInfo__list01 li h5{
display: inline;
color: var(--color05); 
}
ol.ticketInfo__list01 li{
position: relative;
counter-reset: cnt;
counter-increment: cnt01;
margin: 50px 0;

}
ol.ticketInfo__list01 li::before{
position: absolute;
display: inline-flex;
counter-increment: cnt;
content: counter(cnt01) ;
color: var(--color05); 
font-size: 2rem;
font-family: "Noto Sans JP", serif;
font-weight: 700;
font-style: normal;
top:-0.9rem;
left: -2rem;
}
ol.ticketInfo__list01 li p{
margin-left:1rem; 
}
*/


/*協賛一覧*/
.flex-pc{
justify-content: center;
}
.topSponsor_large{
display:block;
margin:0 auto;
}


/*============スマホ================================================*/
@media (max-width: 566px) {
#toggleNav{
position: fixed;
width: 100vw;
right: -120%;
height: 100vh; 
transition: all 0.6s;
background-color: #000;
opacity: .9;
} 
.navbar{
    position: relative;
}
.header__toggleBtn{
position: fixed;
font-size: 1.5rem;
color: #fff;
background-color: rgba(0,0,0,0.3);
top: .5rem;
right: .5rem;
padding: 3px 10px;
border-radius: 3px;
} 
.pageHeader{
height: 200px;
padding-top: 100px;
}

.hero{
height: 100vw;
background: url("../images/top/topmain_sp.jpg") center bottom;
background-size: cover;
overflow:hidden;
}
.heroLogo{
height: 70vw;
margin-top:5vh;
}
.heroLogo img{
width: 100%;
}
.navbar-brand{
display: none;
}
.topNews__snsBanner h4{
    font-size: 5vw;
}
	

}




/*============Large以下================================================*/
@media (max-width: 992px) {
.headerNav__pc{
display: none;
}    
.topAnnounce__link{
 font-size:  4vw;  
}

}

/*============スマホ以上================================================*/
@media (min-width: 566px) {
.toggleNav{
    width: 300px;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    }

.hero{
height: 70vh;
overflow:hidden;
}
.heroLogo{
height: 50vh;
margin-top:100px;
} 

/*協賛一覧*/
.flex-pc{
justify-content: flex-start !important;
position:relative;
left:30px;
}

/*協賛一覧テキスト*/
.sponsor__text ul{
width: calc(100%/3);
}


/*==== スクロール途中からヘッダー変化 ====*/
#header{
/*はじめの高さを設定*/
height: 170px;
width:100%;
}

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin{
position: fixed;
z-index: 999;/*最前面へ*/
height: 68px;
animation: DownAnime 0.5s forwards;
/*    background-color: #000;*/
background-color: rgba(255,255,255,0.95);
box-shadow:  0px 3px 6px rgba(50,50,50,0.1);
}
#header.HeightMin nav div a{
color: #000;
filter:drop-shadow(0px 0px 0px #fff); 
}
.headerNav__pc{

} 
#header.HeightMin nav div a:hover{
color: var(--color01);   
opacity: .8;
}    
    
#header.HeightMin nav div li::after{
 background-color:#000;

}

@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}    
#header.HeightMin .mainHeader__nav_list li{
        padding: 25px 20px;
}   
#header.HeightMin .mainHeader__contactBtn{
    max-height: 100%;
	padding: 25px 40px;
}  
#header.HeightMin .header__logo{
	width: 350px;
	height: auto;
	padding-top: 10px;
	padding-left: 40px;
} 
/*==== スクロール途中からヘッダー変化 ====*/

}