/*	Youtube Player
============================== */
/*img cover*/
.cover {width:100%; height:100%;}
/*link*/
.container a{text-decoration:underline; color:#666;}
.container a:hover{ text-decoration:underline; color:#666;}
.box:nth-child(odd) a{text-decoration:underline; color:#fff;}
.box:nth-child(odd) a:hover{ text-decoration:underline; color:#666;}

/*///////////////// style ////////////////*/

.container{
color:#666;
background-attachment:fixed;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

/*///////////////// header ////////////////*/
header{
  overflow:hidden;
  background: linear-gradient(#ff00c0, #ffc8f0);
}

header .main{
  background:url(../img/main202210.jpg?new) center center no-repeat ;
  background-size:contain;
}

.fade{
    animation: fadeIn 3s ease 0.3s 1 normal;
}
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
    0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
    100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}

@media all and (min-width: 768px) {
header .main{
  width:1200px;
  height:720px;
  margin:0 auto;
}
.second header .main{
  width:700px;
  height:140px;
  margin:30px auto;
}

}
@media all and (max-width: 767px) {
  header .main{
    position: relative;
    height: 0;
    padding-top:60%;
  }
  .second header .main{
    position: relative;
    height: 0;
    padding-top:16%;
    width:80%;
    margin:1em auto;
  }
}
/*///////////////// nav ////////////////*/
.container nav ul{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  align-self: center;
}
.container nav ul{
font-family: charlemagne-std, serif;
font-weight: 700;
font-style: normal;
text-align: center;
margin:0 auto;
}

.container nav li {
  display: flex;
  align-items: center;
  justify-content: center;
}


.container nav li a
{
  display: block;
  width: 100%;
  background: linear-gradient(to right, #ff00c0 0%, #ffa200 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ff00c0, endColorstr=#ffa200,GradientType=1 );
  -webkit-background-clip: text;
  color: transparent;
  margin: 0 auto;
}




.container nav li a:hover{
opacity: 0.6;
text-decoration: none;
}

.container nav li small{
  font-size: 50% !important;
  white-space: nowrap;
}

@media all and (min-width: 768px) {
.container nav ul{
  width:980px;
    justify-content: space-between;
  }
.container nav li{
  width:160px;
  font-size:160%;
  padding:20px 0;
  }
}
@media all and (max-width: 767px) {
.container nav ul{
  width:90%;
  padding:.5em 0;
  flex-wrap: wrap;
    justify-content: space-evenly;

  }
.container nav li{
  width:46%;
  padding:.5em 0;
  }
}
/*///////////////// container & box ////////////////*/
.container{
overflow:hidden;
}
.content{
margin:0 auto;
width:100%;
}
.box {
width:100%;
}
@media all and (min-width: 768px) {
.container{
  min-width: 980px;
}
.box {
  padding:120px 0;
}
.inbox{
  width: 940px;
  margin:100px auto 50px;
}
}
@media all and (max-width: 767px) {
  .box {
  padding:4em 0;
  }
  .inbox{
  width: 90%;
  margin:2em auto 0;
}
}

/*///////////////// h2 ////////////////*/
.box h2 {
font-family: charlemagne-std, serif;
font-weight: 700;
font-style: normal;
text-align: center;
}

.box h2 small{font-size: 50%;}
.box h2 span{
  display: inline-block;
  background: linear-gradient(to right, #ff00c0 0%, #ffa200 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ff00c0, endColorstr=#ffa200,GradientType=1 );
  -webkit-background-clip: text;
  color: transparent;
  margin: 0 auto;
}
.box h2 small::before{
  content: "\A" ;
  white-space: pre ;
}

.box:nth-child(odd) h2 span{
  color:#fff;
}

@media all and (min-width: 768px) {
.box h2 span{
  font-size: 300%;
}
}
@media all and (max-width: 767px) {
  .box h2 span{
    font-size: 180%;
  }
}
/*///////////////// h3.h4 & p ////////////////*/
.content h3,.content h4,
.content p{
font-feature-settings : "palt";
word-break:break-all;
letter-spacing:0.08em;
text-justify: inter-ideograph;
}
.content h3,.content h4{
  font-weight: 700;
  color: #ff00c0;
}
.box:nth-child(odd) h3,
.box:nth-child(odd) h4{
  color:#fff;
}
.content p{
font-weight: 400;
}
.content p.txt{
text-align: justify;
}
.container small{
font-size:70%;
}
@media all and (min-width: 768px) {


.content p{
  font-size:110%;
  line-height:180%;
}
}
@media all and (max-width: 767px) {
.content p{
  font-size:90%;
  line-height:160%;
}
}

/*///////////////// wall color ////////////////*/
.container nav div,
.container footer div,
.box{
  background:#fff;
  color: #666;
  background: #ff00c0,;
  background: -moz-linear-gradient(left, #ffc8f0 0%, #ffffff 10%, #ffffff 50%, #ffffff 90%, #ffc8f0 100%);
  background: -webkit-linear-gradient(left, #ffc8f0 0%, #ffffff 10%, #ffffff 50%, #ffffff 90%, #ffc8f0 100%);
  background: -o-linear-gradient(left, #ffc8f0 0%, #ffffff 10%, #ffffff 50%, #ffffff 90%, #ffc8f0 100%);
  background: -ms-linear-gradient(left, #ffc8f0 0%, #ffffff 10%, #ffffff 50%, #ffffff 90%, #ffc8f0 100%);
  background: linear-gradient(to right, #ffc8f0 0%, #ffffff 10%, #ffffff 50%, #ffffff 90%, #ffc8f0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ffc8f0, endColorstr=#ffc8f0,GradientType=1 );
}
.second header,
.box:nth-child(odd){
color: #fff;
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(124deg, #ff00c0, #ff4649, #ffa200, #ff00c0, #ff4649, #ff9d32);
background-size: 1800% 1800%;
-webkit-animation: rainbow 10s ease infinite;
-z-animation: rainbow 10s ease infinite;
-o-animation: rainbow 10s ease infinite;
animation: rainbow 10s ease infinite;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}


/*///////////////// mov ////////////////*/
.inbox .mov{width: 100%;}
.inbox .mov .trailer{
width: 100%;
position: relative;
padding-top: 56.25%;}

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

/*///////////////// comingsoon ////////////////*/
.comingsoon{
  text-align: center;
}

/*///////////////// lazy ////////////////*/
.lazy-done {
-webkit-animation: fadeIn 700ms;
animation: fadeIn 700ms;
}
.lazy {position:relative;display:block;background:center top no-repeat;background-size:cover;margin:0 auto;}
.lazy img{position:absolute;top:0;left:0;}

/*///////////////// aside ////////////////*/
aside{text-align:center;}
@media all and (min-width: 768px) {
aside .box{overflow:hidden;}
}
@media all and (max-width: 767px) {
aside {width: 96%;margin:0 auto;}
}

/* banner */
#bnBox{
  overflow:hidden;
  width:300px;
}
@media all and (min-width: 768px) {
#bnBox{
  margin:0 auto;
}
}
@media all and (max-width: 767px) {
#bnBox{
  overflow:hidden;
  margin:0 auto;
}
}

/*///////////////// footer ////////////////*/
#page-top{transition:0.5s ;}
#page-top:hover{cursor: pointer;}

footer {
  display:block;
  overflow:hidden;
}
footer .bottom{
  text-align:center;color:#666;
  margin:0 auto;
}
footer .bottom a{
  text-decoration:none;color:#666;
}

@media all and (min-width: 768px) {
#page-top {
  text-indent: -9999px;
  position:fixed;
  right:20px;
  width:80px;
  height:80px;
  margin-bottom: 20px;
}
#page-top a{
  background:url(../img/pagetop2022.png) center center no-repeat;
  background-size: contain;
  display:block;width:80px;height:80px;
}
footer .bottom{
  padding-bottom:120px;
}
footer .bottom small{
  font-size:80%;
}
}

@media all and (max-width: 767px)  {
#page-top {
  position:fixed;
  text-align: center;
  width:100%;
  height:60px;
  margin:0 auto;
  background:#ff4649;
  padding-bottom: 60px;
}
#page-top a{
  background-size:100% auto;
  display:block;line-height:60px;
}
#page-top a{
  text-decoration:none; color:#fff;
}
footer .bottom{
  max-width: 300px;
  padding-bottom:6em;
  margin-bottom:6em;
}
}

/*----btn----*/
.Additional{
  background:#fff;
  color: #666;
  background: #ffc8f0;
  background: -moz-linear-gradient(left, #ffc8f0 0%, #ffffff 20%, #ffffff 50%, #ffffff 80%, #ffc8f0 100%);
  background: -webkit-linear-gradient(left, #ffc8f0 0%, #ffffff 20%, #ffffff 50%, #ffffff 80%, #ffc8f0 100%);
  background: -o-linear-gradient(left, #ffc8f0 0%, #ffffff 20%, #ffffff 50%, #ffffff 80%, #ffc8f0 100%);
  background: -ms-linear-gradient(left, #ffc8f0 0%, #ffffff 20%, #ffffff 50%, #ffffff 80%, #ffc8f0 100%);
  background: linear-gradient(to right, #ffc8f0 0%, #ffffff 20%, #ffffff 50%, #ffffff 80%, #ffc8f0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ffc8f0, endColorstr=#ffc8f0,GradientType=1 );
padding:1em 0 1.5em;
}

#btn a{
display: block;
color: #ff00c0;
position: relative;
z-index:0;
text-align:center;
text-decoration:none;
margin:0 auto;
display:block;
border-radius: 5px;
cursor: pointer;
background: #fff;
}

#btn a:hover{
  opacity: .7;
  color: #ffa200;
  text-decoration: none;
}
@media all and (min-width: 768px) {
#btn a{
width:500px;
padding:20px;
font-size:160%;
border-top: solid 2px #ffa200;
border-right: solid 2px #ff00c0;
border-left: solid 2px #ffa200;
border-bottom: solid 2px #ff00c0;
}
#btn a:hover{
  padding:20px;
}
}
@media all and (max-width: 767px)  {
#btn a{
  width:90%;
  padding:15px 0;
  font-size:90%;
  border-top: solid 1px #ffa200;
  border-right: solid 1px #ff00c0;
  border-left: solid 1px #ffa200;
  border-bottom: solid 1px #ff00c0;
}
#btn a:hover{
  padding:15px 0;
  opacity: .7;
  text-decoration: none;
}
}




/*/新規バナー20221219/*/
#member.box{
padding: 60px 0 120px 0 !important;
}
#top .bn_season3{
width:50%;
max-width:700px;
margin:0 auto 2em;
display: block;
}
#top a.bn_season3:hover{
transition:0.5s ;
opacity: .8;
}
#top .bn_season3 span.lazy-done {
-webkit-animation: fadeIn 700ms;
animation: fadeIn 700ms;
}
#top .bn_season3 span {
position: relative;
height: 0;
background-repeat: no-repeat;
padding-top:27.5%;
background-size: cover;
border-radius: .5em;
}
#member p.notes{
  text-align:center;
 margin-bottom:4em;
}

@media all and (max-width: 767px)  {
#top .bn_season3{
width:80%;
}
}

/*/観覧バナー20221219/*/
#top .bn_kanran{
width:50%;
max-width:700px;
margin:0 auto 2em;
display: block;
}
#top a.bn_kanran3:hover{
transition:0.5s ;
opacity: .8;
}
#top .bn_kanran span.lazy-done {
-webkit-animation: fadeIn 700ms;
animation: fadeIn 700ms;
}
#top .bn_kanran span {
position: relative;
background-repeat: no-repeat;
background-size: cover;
aspect-ratio: 1600 / 361;
border-radius: .5em;
}

@media all and (max-width: 767px)  {
#top .bn_kanran{
width:80%;
}
}