@charset "UTF-8";
/* CSS Document */

#top { background: #FFFBD3; overflow: hidden; margin-bottom: 0px; font-size: 1.6rem;  }

#top section { margin-bottom: 0px; }


/*------------------------------------------------------

    mainVisual

------------------------------------------------------*/

#top .mainVisual { background: #fff; position: relative; }
#top .mainVisual::before { content: ''; display: block; height: 100px; background: linear-gradient(to bottom,  #ffffff 0%,#fffbd3 100%); position: absolute; bottom: 0px; width: 100%; z-index: 1; }

#top .mainVisualInner { background-image: url(../top/bg_mainVisual.jpg); width: 100%; max-width: 1400px; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; margin: 0px auto; }

#top .yellowLine::before { content: ''; left: 0px; height: 80px; display: block; position: absolute; left: 0px; background-color: #FFF33F; z-index: 1; }
#top .yellowLine::after { content: ''; height: 8px; display: block; position: absolute; right: 0px; background-color: #FFF33F; z-index: 3; }

#top .yellowText { background: #000; padding: 20px; border-radius: 12px; position: absolute; bottom: 160px; z-index: 5; }

#top .linkText { position: absolute; bottom: 0px; padding-bottom: 10px; z-index: 2; }
#top .linkText::after { border-bottom: 8px solid #FFF33F; bottom: 0px;  }
#top .linkText h1 { margin-bottom: 10px; }

#top .mainVsiualLink { font-weight: bold; padding-bottom: 10px;  }
#top .mainVsiualLink img { position: absolute; right: -33px; bottom: 2px; }
#top .mainVsiualLink a { color: #000; text-decoration: none; font-size: 2.0rem; position: relative; }

#top .mainVisual .yellowLine { position: relative; width: 100%; height: 100%; }

#top h1 {  }

@media (min-width: 768px) {

    #top .mainVisual::before { height: 100px; bottom: 0px; }

    #top h1 img { width: 550px;  }
    #top .mainVisualInner { height: 600px;  }
    #top .yellowLine::before { width: 480px; bottom: 130px; }
    #top .yellowLine::after { bottom: 0px; width: 490px; }

    #top .mainVsiualLink { padding-left: 150px; }
    #top .mainVsiualLink a { font-size: 2.0rem; }
    #top .mainVsiualLink img { right: -33px; bottom: 2px; }

    #top .yellowText { left: 50px; }
    #top .linkText { right: 20px; }

}

@media (min-width: 1400px) {
    #top h1 img { width: 640px;  }
    #top .yellowLine::before { width: 595px; }
    #top .yellowLine::after {  width: 680px; }
    #top .yellowText {  left: 150px;  }
    #top .linkText { right: 80px; }

}

@media (max-width: 767px) {

    #top .mainVisual { padding-bottom: 150px; }
    #top .mainVisual::before { height: 100px; bottom: -50px; }

    #top .mainVisualInner { height: 410px; }
    #top .yellowLine::before { width: 230px; bottom: 35px; }
    #top .yellowLine::after { bottom: -100px; width: 330px; }

    #top .mainVsiualLink { font-size: 1.4rem; width: 90%; margin-left: auto; margin-right: 0; }
    #top .mainVsiualLink a { font-size: 1.8rem; padding-right: 30px; }
    #top .mainVsiualLink img {  right: 0px; bottom: 4px; width: 19px; }

    #top .yellowText {  width: 250px; border-radius: 0px 10px 10px 0px; bottom: 50px;  }
    #top .linkText { right: 15px; bottom: -100px; }

}


/*------------------------------------------------------

    schedule

------------------------------------------------------*/

#top h2 { text-align: center; font-size: 4.0rem; }
#top h2 span { display: block; margin: 0px auto; font-size: 1.2rem; }



#top .schedule .l_col-2 .inner { border: 10px solid #FFF33F; box-sizing: border-box; background: #fff; position: relative; padding: 20px;}
#top .schedule .l_col-2 .inner::after { content:''; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; display: block; position: absolute; top: 0px; left: 0px; }
#top .schedule .l_col-2 .inner > * { z-index: 10; position: relative; }

#top .schedule .date { margin-bottom: 10px; }
#top .schedule .date img  { display: inline-block; width: auto; margin-right: 20px; }

#top .schedule .date p { font-weight: bold; display: inline-block;}
#top .schedule .date p span {  }

#top .schedule h3 { border-bottom: 1px solid #000; border-top: 1px solid #000; padding: 10px 0px; font-size: 2.0rem; }

/* h3 color */

#top .schedule .day1 h3 { border-bottom: 1px solid #00AFEC; border-top: 1px solid #00AFEC; color: #00AFEC; }
#top .schedule .day1 .btn a { background: #00AFEC; }

#top .schedule .day2 h3 { border-bottom: 1px solid #E95383; border-top: 1px solid #E95383; color: #E95383; }
#top .schedule .day2 .btn a { background: #E95383; }

#top .schedule .day3 h3 { border-bottom: 1px solid #F39800; border-top: 1px solid #F39800; color: #F39800; }
#top .schedule .day3 .btn a { background: #F39800; }

#top .schedule .day4 h3 { border-bottom: 1px solid #53B44A; border-top: 1px solid #53B44A; color: #53B44A; }
#top .schedule .day4 .btn a { background: #53B44A; }


#top .schedule .l_col-schedule  { margin-bottom: 30px; }
#top .schedule .l_col-schedule p { line-height: 160%;  }
#top .schedule .l_col-schedule img {  }

#top .schedule .day3 .l_col-schedule {  }


@media (min-width: 768px) {

    /* schedule */
    #top h2 { font-size: 4.0rem; margin-top: 65px; margin-bottom: 30px; }
    #top .schedule .l_col-2 .inner { border: 10px solid #FFF33F; padding-bottom: 80px; }
    #top .schedule .l_col-2 .inner::after {  background-image: url(../top/bg_schedule.png);  }

    #top .schedule .date p { max-width: 250px; font-size: 2.0rem; }
    #top .schedule .date p span { font-size: 2.8rem; }
    #top .schedule .date img  { height: 60px;  }

    #top .schedule h3 {  font-size: 2.0rem; margin-bottom: 15px; }

    #top .schedule .l_col-schedule  {  }
    #top .schedule .l_col-schedule p { width: calc( 100% - 148px );  }
    #top .schedule .l_col-schedule img { width: 128px; }

    /* #top .schedule .day3 .l_col-schedule { margin-bottom: 56px; }
    #top .schedule .day4 .l_col-schedule { margin-bottom: 73px; } */
    #top .schedule .l_col-2 .inner .btn { position: absolute; left: 0; right: 0; top: auto; bottom: 20px;}

}

@media (max-width: 767px) {

    #top h2 { font-size: 3.2rem; margin-top: 30px; margin-bottom: 20px; position: relative; z-index: 2; }

    #top .schedule .l_col-2 .inner { border: 5px solid #FFF33F; }
    #top .schedule .l_col-2 .inner::after { background-image: url(../top/bg_schedule_sp.png);  }

    #top .schedule .date p { max-width: 250px; font-size: 1.7rem; }
    #top .schedule .date p span { font-size: 2.5rem; }
    #top .schedule .date img  { height: 44px; margin-right: 3px;  }

    #top .schedule h3 {  font-size: 1.8rem; text-align: center; margin-bottom: 20px;  }

    #top .schedule .l_col-schedule  { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 20px;}
    #top .schedule .l_col-schedule p { width: 100%; font-size: 1.4rem;  }
    #top .schedule .l_col-schedule img { width: 150px; margin: 0px auto 20px auto; }

    #top .schedule .date { width: 300px; margin: 10px auto 10px auto; }

}   

/*------------------------------------------------------

    btn

------------------------------------------------------*/

#top .btn {  margin: 0px auto; }
#top .btn a { text-align: center; color: #fff; font-weight: bold; display: block; padding: 8px 10px; background: #000; text-decoration: none; }
#top .btn a span { position: relative; padding-right: 20px; }
#top .btn a span::before { content: ''; position: absolute; top: 2px; right: 0; border-top: 5px solid rgba(255,255,255,1); border-right: 6px solid rgba(255,255,255,1); border-left: 5px solid rgba(255,255,255,0); border-bottom: 6px solid rgba(255,255,255,0); width: 10px; height: 10px; transform: rotate(45deg); }

.btn:hover { opacity: 0.8; }

/*------------------------------------------------------

    link

------------------------------------------------------*/


#top .link { margin-bottom: 100px; text-align: center; }
#top .link .l_col-2  {  margin: 0px auto; width: 100%; -webkit-align-items: center; align-items: center; }


#top .link .l_col-2 > * {  }

#top .link .l_col-2 .ring { width: 100%; }
#top .link .l_col-2 .ring a { width: 100%; max-width: 540px; margin: 0px auto; background: #fff; border: 1px solid #CCCCCC; display: block; padding: 15px 0px; }
#top .link .l_col-2 img {   }

#top .link .l_col-2 .apu,#top .link .l_col-2 .mext {   }
#top .link .l_col-2 div:nth-child(n+2)  { background: #fff; border: 1px solid #CCCCCC; display: block; padding: 15px 0px; }

#top .link .l_col-2 div.tongali { background: transparent; border: 0px solid #ccc; padding: 0px; }

@media (min-width: 768px) {

    #top .link .l_col-2 { max-width: 540px; }
    #top .link .l_col-2 > * { margin-top: 0px; }

    #top .link .l_col-2 div:nth-child(n+2) { width: 260px; margin-top: 20px; }
    #top .link .l_col-2 img { height: 54px; }

    #top .link .l_col-2 div.tongali img { height: auto; width: 260px; }

    
    
}


@media (max-width: 767px) {

    #top .link .l_col-2 { max-width: 345px; text-align: center; }
    #top .link .l_col-2 > * { margin: 0px; }

    #top .link .l_col-2 div:nth-child(n+2) { margin-top: 15px; }

    #top .link .l_col-2 img { height: 40px; }
    #top .link .l_col-2 div.tongali img { height: auto; width: 100%; max-width: 280px; }


}

/*------------------------------------------------------

    movie

------------------------------------------------------*/
#top .movie { padding-top: 65px; }

@media (max-width: 767px) {
    #top .movie { padding-top: 10px; }

}