@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 .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: 875px;
    margin: 60px auto;
    padding: 0 108px;
    background: url(../images/mv-acure.png) left center no-repeat;
    line-height: 1.875;
    text-align: center;
    letter-spacing: .095em;
    color: #1396b4;
}


/* content
------------------------------------------------------ */
.content {
    margin-bottom: 60px;
}
.content h1 {
    margin-bottom: 35px;
    width: 37.2549%;
}
.content p {
    width: 31.9%;
    margin-right: 5.6549%;
    line-height: 1.875;
    text-align: justify;
    letter-spacing: .095em;
    color: #1396b4;
}
.content figure {
    width: 58.9%;
}

/* blue */
.blue.content h1,
.blue.content p {float: right;}
.blue.content figure {float: left;}

/* pink */
.pink.content h1,
.pink.content p {float: left; color: #f04e87;}
.pink.content figure {float: right;}

.kanpai h1 {margin-top: 54px;}
.ryouri h1 {margin-top: 38px;}
.kikirin h1 {margin-top: 63px;}
.cake h1 {margin-top: 52px;}
.climax h1 {margin-top: 56px;}
.omiyage h1 {text-align: center;}

.cake figure {position: relative;}
.cake figure .moviePopup {
    position: absolute;
    right: 75%;
    bottom: -5%;
    width: 42%;
    max-width: 249px;
}

.climax figure .climaxPic2 {
    width: 85.666%;
    margin: -9.16% 0 0 14.333%;
}


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

.voice ul {padding: 0 8px;}
.voice ul li {
    float: left;
    width: 25%;
    padding: 0 1.5936%;
    line-height: 2;
    text-align: justify;
    font-size: .938em;
    letter-spacing: .035em;
    color: #1396b4;
}


/* 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;
      margin: 0 auto 35px;
    }


    /* pageH
    ------------------------------------------------------ */
    .pageH {
        padding-top: 0;
        margin-bottom: 20px;
    }
    .pageH h1 {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        margin-bottom: 15px;
    }

    /* 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 {
        position: relative;
        margin: 15px 0 20px;
        padding: 0;
        background: none;
    }
    .pageH p.intro .spParts1 {
        position: absolute;
        bottom: 15%;
        right: 5%;
    }
    
    .pageH .spParts2 {
        width: 80%;
        margin: 0 auto;
    }


    /* content
    ------------------------------------------------------ */
    .content {
        margin-bottom: 35px;
    }
    .content h1 {
        margin-bottom: 20px;
        width: 100%;
    }
    .content p {
        width: 100%;
        margin-right: 0;
        padding: 0 20px;
    }

    .blue.content h1,
    .blue.content p,
    .pink.content h1,
    .pink.content p {float: none;}

    .kanpai h1,
    .ryouri h1,
    .kikirin h1,
    .cake h1,
    .climax h1 {margin-top: 0;}

    .cake h1 {position: relative;}
    .cake h1 .moviePopup {
        position: absolute;
        width: 35.866%;
        left: auto;
        right: 1.5%;
        bottom: 24%;
    }
    
    .climax .climaxSP {
        float: none;
        width: 100%;
        margin-bottom: -1em;
    }


    /* voice
    ------------------------------------------------------ */
    .voice {margin: 45px 0 0;}
    .voice h1 {margin-bottom: 20px;}

    .voice ul {padding: 0 3px;}
    .voice ul li {
        width: 50%;
        padding: 0 2.333%;
        margin-bottom: 35px;
    }
    .voice ul li:nth-child(odd) {clear: both;}


    /* bye
    ------------------------------------------------------ */
    .bye h1 {margin-bottom: 18px;}


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