@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: #f8f8f1;
    font-size: 1.063em;
}

/* mainBg */
.mainWrapper .mainBg {
    overflow: hidden;
    max-width: 1020px;
    margin: 0 auto;
    padding: 25px 0 100px;
}


/* pageH
------------------------------------------------------ */
.pageH {
    position: relative;
    padding-top: 34px;
    margin-bottom: 20px;
}
.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;
    z-index: 99;
}
.pageH .popupBtnPC:hover {opacity: .5;}

.pageH .popupBtnPC.past {
  top: 295px;
}

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

.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 .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;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.pageH .main-visual-area {
  text-align: center;
}

/* 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 {
  margin: -40px auto 0;
  padding-bottom: 40px;
  background: url(../../members_day/images/mv-illust.png) left top no-repeat;
  line-height: 1.875;
  text-align: center;
  letter-spacing: .095em;
  color: #804f37;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 930px) {
  .pageH p.intro {
    padding: 0 140px 40px 120px;
    background-size: contain;
  }
}

/* content
------------------------------------------------------ */
.content {
  margin-bottom: 60px;
  position: relative;
}
.content h2 {
  margin-top: 40px;
  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%;
}

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

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


/* layout */
@media screen and (min-width: 769px){
  .content03 figure {width: 60%;}
  .content03 h2,
  .content03 p {width: 34%; right: 6%;}
  .content03 h2 {margin-top: 0px;}
  .content03 .img02 {display: block; margin: 5px 0 0;}

  .content05 h2 {margin-top: 110px;}
}



/* voice
------------------------------------------------------ */
.voice {
  margin: 60px 0 0;
  text-align: center;
}
.voice h2 {
  margin-bottom: 38px;
  padding-left: 140px;
  text-align: center;
}

.voice ul {padding: 0 3%;}
.voice ul li {
  float: left;
  width: 33.3333%;
  padding: 0 3.2%;
  line-height: 1.75;
  text-align: justify;
  font-size: 0.9em;
  letter-spacing: .01em;
  color: #804f21;
}
.voice ul li p {
  margin-top: 15px;
}

.voice .finish {
  margin-top: 50px;
}
.voice .finish p {
  margin-left: -106px;
}


/* bye
------------------------------------------------------ */
.bye h1 {
    margin-bottom: 22px;
    text-align: center;
}

/****** byePC ******/
.bye .byePC {
	position: relative;
	max-width: 1010px;
	margin: 0 auto;
	padding: 0 50px;
}
.bye .byePC:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 50px;
	bottom: 0;
	height: 100%;
	background: #fff;
	width: 1px;
}
.bye .byePC .byeFl {
	position: absolute;
	top: 0;
	left: 50px;
	right: 50px;
	height: 100%;
	z-index: 90;
}
.bye .byePC .bye_com {
	display: none;
	position: absolute;
	top: 0;
	left: 4.94559%;
	width: 19.090009%;
	max-width: 193px;
	z-index: 100;
		-moz-animation: animation: animScale 3s ease-out;
		-webkit-animation: animation: animScale 3s ease-out;
	animation: animScale 3s ease-out;
		-moz-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
		-moz-animation-play-state: running;
		-webkit-animation-play-state: running;
		-ms-animation-play-state: running;
	animation-play-state: running;
}
.bye .byePC .bye_com.show {display: block;}
@-moz-keyframes animScale {
	0% { transform: scale(0.8, 0.8); }
	5% { transform: scale(1.2, 1.2); }
	10% { transform: scale(1, 1); }
	15% { transform: scale(1.1, 1.1); }
	20% { transform: scale(1, 1); }
	100% { transform: scale(1, 1); }
}
@-webkit-keyframes animScale {
	0% { transform: scale(0.8, 0.8); }
	5% { transform: scale(1.2, 1.2); }
	10% { transform: scale(1, 1); }
	15% { transform: scale(1.1, 1.1); }
	20% { transform: scale(1, 1); }
	100% { transform: scale(1, 1); }
}
@keyframes animScale {
	0% { transform: scale(0.8, 0.8); }
	5% { transform: scale(1.2, 1.2); }
	10% { transform: scale(1, 1); }
	15% { transform: scale(1.1, 1.1); }
	20% { transform: scale(1, 1); }
	100% { transform: scale(1, 1); }
}

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


/* 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: 930px){
    .cake figure .moviePopup {right: 70%;}
    .climax figure .climaxPic2 {margin-top: -3%;}
}

@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: none;
        position: relative;
        margin: -5% 20px 20px;
        padding: 0;
    }
    .pageH p.intro span {
        display: block;
    }
    .pageH p.intro span + br {
        display: none;
    }


    /* 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 h2 {
    margin-right: auto;
    margin-left: auto;
  }
  .content03 p {
    text-align: center;
  }

    /* voice
    ------------------------------------------------------ */
    .voice {margin: 45px 0 35px;}
    .voice h2 {
      margin-bottom: 20px;
      padding: 0 10px 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;}

  .voice .finish {
    margin-top: 0;
    padding: 0 5px;
  }
  .voice .finish p {
    margin: 0 5px;
  }

    /* 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%;
  }
}