@charset 'utf-8';

#contents {padding-bottom: 0;}

html {height: 100%;}
body.intro {
	height: 100%;
	overflow-y: hidden;
}
.top_movetop_W {z-index: 999;}

/* mainWrapper
------------------------------------------------------ */
/*
.mainWrapper {
    position: relative;
    background: url(../images/bg.jpg);
    font-size: 1.063em;
}
*/

/* mainBg */
.mainWrapper .mainBg {
    overflow: hidden;
    max-width: 1020px;
    margin: 0 auto;
    padding: 25px 0 100px;
    background: rgba(255,255,255,.7);
}


/* pageH
------------------------------------------------------ */
.pageH {
    position: relative;
    padding-top: 34px;
    margin-bottom: 60px;
}
.pageH h1 {
    position: absolute;
    width: 27.2%;
    top: 0;
    left: 0;
    z-index: 5;
}

/* popupBtnPC */
.pageH .popupBtnPC {
    position: absolute;
    top: 208px;
    left: 0;
    cursor: pointer;
}
.pageH .popupBtnPC:hover {opacity: .5;}

.pageH .popupBtnPC.past {
  background: url(../../img/past-events-opening_pc_on.png);
  cursor: pointer;
  top: 295px;
  left: 0;
  position: absolute;
  z-index: 99;
}
.pageH .popupBtnPC.past.on img {
  opacity: 0;
}

.past-event-list {
  display: none;
  position: absolute;
  top: 375px;
  z-index: 66;
}

.past-event-list.open {
  display: block;
}

@media screen and (max-width: 768px) {
  .past-event-list,
  .past-event-list.open {
    display: none;
  }
}

.past-event-list li {
  margin: 5px 0px;
}

/* pcMovie */
/*
.pageH .main-visual-area {
    position: relative;
    width: 70.6%;
    max-width: 720px;
    margin: 0 auto;
}
*/

/* pcMovie */
.pageH .pcMovie {
  position: relative;
  width: 70.6%;
  max-width: 720px;
  margin: 0 auto;
}
.pageH .pcMovie .introVideo {
  position: relative;
  padding-top: 56.25%;
}
.pageH .pcMovie .introVideo:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: #fff;
}
.pageH .pcMovie .introVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.pageH .pcMovie img {
  position: absolute;
  z-index: 2;
}
.pageH .pcMovie .movieFrame {
  top: 0;
  left: 0;
  margin: 0 -3px;
  width: calc(100% + 6px);
  max-width: calc(100% + 6px);
  height: 100%;
  z-index: 1;
}
.pageH .pcMovie .pcParts1 {top: -5.416%; right: -5.833%; width: 15.138%; max-width: 109px;}
.pageH .pcMovie .pcParts2 {bottom: 107px; right: -138px;}
.pageH .pcMovie .pcParts3 {bottom: -25px; left: -106px;}

/* popupBtnSP */
.pageH .popupBtnSP {display: none;}

/* spSlide */
.spSlide .slideBox {
	display: block;
	position: relative;
	opacity: 0;
	z-index: 5;
}
.spSlide .slideBox.slick-initialized{opacity: 1;}
.pageH .mvSP {
	position: relative;
	max-width: 740px;
	margin: 0 auto;
	padding: 0 10px;
}
.pageH .mvSP .mvSPFl {
	position: absolute;
	top: 0;
	left: 10px;
	right: 10px;
	height: 100%;
	z-index: 10;
}
.pageH .mvSP .slideBox li img {width: 100%;}

/* intro */
.pageH p.intro {
  max-width: 955px;
    margin: 60px auto;
    background: url(../images/mv-illust.png) right center no-repeat;
    line-height: 1.875;
    text-align: center;
    letter-spacing: .095em;
    color: #1396b4;
}
@media screen and (max-width: 930px) {
  .pageH p.intro {
    padding: 0 130px 0 30px;
  }
}

/* content
------------------------------------------------------ */
.content {
  margin-bottom: 60px;
  position: relative;
}
.content h2 {
  margin-top: 80px;
  margin-bottom: 35px;
  width: 32%;
  position: relative;
}
.content p {
  width: 32%;
  line-height: 1.875;
  text-align: justify;
  letter-spacing: .095em;
  color: #1396b4;
  position: relative;
}
.content figure {
  width: 62%;
}

/* blue */
@media screen and (min-width: 769px){
  .blue.content h2,
  .blue.content p {float: right; right: 5%;}
  .blue.content figure {float: left; text-align: left;}
}

/* pink */
.pink.content p {color: #f04e87;}
@media screen and (min-width: 769px){
  .pink.content h2,
  .pink.content p {float: left; left: 5%;}
  .pink.content figure {float: right; text-align: right;}
}

/* foot */
@media screen and (min-width: 769px){
  .content::before {
    background: no-repeat center center / contain;
    content: "";
    position: absolute;
  }
  .content01 {margin-bottom: 105px;}
  .content01::before {
    background-image: url(../images/foot01.png);
    width: 49.3%;
    height: 0;
    padding-top: 12.06%;
    bottom: -35%;
    left: 25%;
  }
  .content02 {margin-bottom: 60px;}
  .content02::before {
    background-image: url(../images/foot02.png);
    width: 90%;
    height: 0;
    padding-top: 16.5%;
    bottom: -38%;
    left: 8.5%;
  }
  .content03 {margin-bottom: 40px;}
  .content03::before {
    background-image: url(../images/foot03.png);
    width: 56.1%;
    height: 0;
    padding-top: 8.04%;
    bottom: -19.5%;
    left: 6.4%;
  }
  .content04 {margin-bottom: 20px;}
  .content04::before {
    background-image: url(../images/foot04.png);
    width: 25.2%;
    height: 0;
    padding-top: 15.7%;
    bottom: -22%;
    right: 25%;
  }
  .content05 {margin-bottom: 45px;}
}


/* layout */
@media screen and (min-width: 769px){
  .content03 h2 {margin-top: 140px;}
  .content03 .img02 {display: block; margin: 45px 30px 0 auto;}
  .content05 h2 {margin-top: 130px;}
  .content05 .img02 {display: block; margin: 10px 20px 0 auto;}
}



/* voice
------------------------------------------------------ */
.voice {
  margin: 100px 0 0;
  text-align: center;
}
.voice h2 {
  margin-bottom: 38px;
  text-align: center;
}

.voice ul {padding: 0 3%;}
.voice ul li {
  float: left;
  width: 33.3333%;
  padding: 0 1.5%;
  line-height: 1.75;
  text-align: justify;
  font-size: 1.08em;
  letter-spacing: .01em;
  color: #1396b4;
}
.voice ul li p {
  margin-top: 20px;
}

.voice .finish {
  margin: 50px 0 20px -106px;
}


/* members
------------------------------------------------------ */
.members {
    padding: 40px 10px 70px;
    background: #a3d9e7;
}
.members .wrapper {
    max-width: 840px;
    margin: 0 auto;
}
.members h1 {
    float: left;
    width: 75.2%;
    margin-top: 6px;
}
.members p.btn {
    float: right;
    width: 22.619%;
}

/* link */
.members .link {
    clear: both;
    float: right;
    margin-top: 28px;
}
.members .link li {
    float: left;
    position: relative;
    margin-left: 60px;
    padding-left: 12px;
    font-size: .85em;
}
.members .link li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -2px 0 0 3px;
    width: 3px;
    height: 3px;
    background: #118eb1;
    box-shadow: #118eb1 -3px -3px, #118eb1 -3px 3px;
}


/* openingPopup
------------------------------------------------------ */
.openingPopup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 30px 0;
    background: #fff;
    z-index: 100;
}
.openingPopup h1 {text-align: center;}
.openingPopup p {
    margin: 38px 0;
    text-align: center;
}
.openingPopup p .openingClose {cursor: pointer;}
.openingPopup p .openingClose:hover {opacity: .5;}




@media screen and (max-width: 768px){

    /* mainWrapper
    ------------------------------------------------------ */
    .mainWrapper {background-size: 80px;}

    /* mainBg */
    .mainWrapper .mainBg {padding: 0 0 10px;}


    /* pageH
    ------------------------------------------------------ */
    .pageH {
        padding-top: 0;
        margin-bottom: 20px;
    }
    .pageH h1 {
        position: static;
        width: 100%;
        margin-bottom: 15px;
    }
    .pageH .main-visual-area {
      padding: 0 10px;
      width: 100%;
    }
    /* popupBtnPC */
    .pageH .popupBtnPC {display: none;}

    /* popupBtnSP */
    .pageH .popupBtnSP {
      color: #1396b4;
      font-weight: bold;
      font-size: 13px;
      display: block;
      padding: 15px 0;
      background: #fff;
      box-shadow: rgba(0,0,0,.2) 0 1px 1px inset;
      text-align: center;
      cursor: pointer;
    }
    .pageH .popupBtnSP:hover {opacity: .5;}


    #openingPopup2.openingPopup {
      padding: 0
    }
    #main .openingPopup ul {
      border-top: 1px solid rgba(0,0,0,.2);
    }
    #main .openingPopup li a {
      border-bottom: 1px solid rgba(0,0,0,.2);
      color: #1396b4;
      font-weight: bold;
      font-size: 13px;
      display: block;
      padding: 15px 30px;
      background: #fff;
      cursor: pointer;
    }
    #main .openingPopup li a.current {
      background-color: #b2e2ec;
      pointer-events: none;
    }

    /* intro */
    .pageH p.intro {
        background-position: center bottom;
        background-size: 90px auto;
        position: relative;
        margin: 15px 0 20px;
        padding: 0 0 60px;
    }


    /* content
    ------------------------------------------------------ */
    .content {
      margin-bottom: 35px;
    }
    .content h2,
    .content p,
    .content figure {
      width: 100%;
      padding: 0 15px;
    }
    .content h2 {
      margin: 20px 0 10px;
      max-width: 245px;
    }
    .content p {
      margin: 0;
    }
    .content figure {
      padding: 0 5px;
    }

    .content03 .img02,
    .content05 .img02 {display: block; margin: 10px auto 0;}
    .content03 .img02 {max-width: 150px;}
    .content05 .img02 {max-width: 35px;}

    /* voice
    ------------------------------------------------------ */
    .voice {margin: 45px 0 30px;}
    .voice h2 {margin-bottom: 20px;}
    .voice .finish {margin: 0 0 10px; padding: 0 15px;}

    .voice ul {padding: 0 3px;}
    .voice ul li {
        width: 50%;
        padding: 0 2.333%;
        font-size: .938em;
        margin-bottom: 35px;
    }
    .voice ul li:nth-child(odd) {clear: both;}
    .voice ul li p {margin-top: 10px;}

    .bye .movie {
      padding: 0 10px;
      text-align: center;
    }

    /* members
    ------------------------------------------------------ */
    .members {padding: 27px 20px;}
    .members h1 {
        float: none;
        width: 100%;
        margin: 0 0 24px;
        text-align: center;
    }
    .members p.btn {
        float: none;
        width: 100%;
        text-align: center;
    }

    /* link */
    .members .link {
        float: none;
        width: 100%;
    }
    .members .link li {
        float: none;
        margin: 0 0 1em 0;
    }

}

/* past-event-report
------------------------------------------------------ */

.past-event-report {
  margin: 80px auto 15px;
}
@media screen and (max-width: 768px) {
  .past-event-report {
    margin-top: 35px;
  }
}

.ttl-past-event {
  border: solid;
  border-width: 2px 0;
  color: #009EBF;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
}

.past-event-area {
  text-align: center;
}

.past-event-area:after {
  content: "";
  display: block;
  clear: both;
}

.past-event-area a {
  margin: 18px 0 0;
}

@media screen and (min-width: 769px) {
  .past-event-area a {
    display: block;
    float: left;
    max-width: 500px;
    width: 49.2%;
  }
  .past-event-area a:nth-child(odd) {
    clear: both;
  }
  .past-event-area a:nth-child(even) {
    float: right;
  }
}

@media screen and (max-width: 768px) {
  .past-event-area a {
    display: inline-block;
    float: none;
    width: auto;
    max-width: 100%;
  }
}