@charset "utf-8";

/*
* {
    box-sizing: border-box;
}

a:hover {
    opacity: .8;
}

*/

#contents_4th {
  width: 100%;
  overflow: hidden;
}





.section_4th_mv {
  width: 100%; height: 57.2916vw;
  overflow: hidden;
  position: relative;
  background: url('../img/4thanniv/mv_bg.png') center top / cover no-repeat;
}

.mv_heading_title {
  width: 73.125%;
  position: absolute;
  top: 1.6666vw; left: 50%;
  transform: translate(-50%,0);
}

.mv_heading_title img {
  width: 100%; height: auto;
}

.mv_talent {
  width: 40.7291%;
  position: absolute;
  bottom: 0; left: 50%;
  line-height: 0;
  transform: translate(-50%,0);
}

.mv_talent img {
  width: 100%; height: auto;
}

.mv_left {
  width: 33.177%; height: 66.3636%;
  position: absolute;
  top: 18.2812vw; left: 50%;
  transform: translate(-41.4062vw,0);
  background: url('../img/4thanniv/mv_left.png') left top / contain no-repeat;
}

.mv_left .appstore {
    width: 16.6405%;
    position: absolute;
    top: 46.0273%; left: 37.8335%;
    line-height: 0;
}

.mv_left .appstore img{
    width: 100%; height: auto;
}

.mv_left .googleplay {
    width: 20.5651%;
    position: absolute;
    top: 46.0273%; left: 56.5149%;
    line-height: 0;
}

.mv_left .googleplay img{
    width: 100%; height: auto;
}

.mv_right {
  width: 31.3020%;
  position: absolute;
  top: 17.8125vw; left: 50%;
  transform: translate(14.6354vw,0);
}

.mv_right img {
    width: 100%; height: auto;
}

.mv_character  {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.mv_character img {
    width: 90vw;
    margin: 10px;
}

.mv_close{
    width: 38.4895%;
    position: absolute;
    top: 60.6005%;
    left: 50%;
    transform: translate(-50%, 0);
}
.mv_close img{ width:100%; height:auto; }


.sp_section_4th_mv,
.sp_mv_heading_title,
.sp_mv_talent {
    display: none;
}

@media (max-width:768px) {
    .section_4th_mv,
    .mv_heading_title,
    .mv_talent,
    .mv_left,
    .mv_right,
    .mv_character {
        display: none;
    }

    .sp_section_4th_mv {
      display: block;
      width: 100%;
      position:relative;
      padding: 97.3333% 0 0;
      background: url('../img/4thanniv/sp_image_4thanniv/sp_mv_bg_talent.png') center top / cover no-repeat;
    }

    .sp_mv_heading_title {
      display: block;
      width: 91.3333%;
      position: absolute;
      top: 62.4657%; left: 50%;
      transform: translate(-50%, 0%);
      z-index: 10;
    }

    .sp_mv_heading_title img {
        width: 100%;
        height: auto;
        margin:  0 auto;
    }

    .sp_mv_close{
        width: 56.1333%;
        position: absolute;
        top: 52.4657%;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .sp_mv_close img{ width:100%; height:auto; }
}

/* section01 */

.section01 {
  display: flex;
  justify-content: center;
  gap: 2.2395vw;
  width:100%;
  padding: 0.9895vw 0 0.8333vw;
  background: url('../img/4thanniv/section01_bg.png') top center / cover no-repeat;
}

.section01_wrap {
  width: 35.4166%;
  text-align: center;
}

.section01_wrap .section01_title01,
.section01_wrap .section01_title02{
  line-height: 0;
}

.section01_wrap .section01_title01 img,
.section01_wrap .section01_title02 img {
  width: 100%; height: auto;
}

.section01_wrap .section01_title01 + a img,
.section01_wrap .section01_title02 + a img{
  width: 86.7647%; height: auto;
  margin: 0.625vw auto 0;
}

.section01_wrap a img {
    width: 100%;
    height: auto;
}

.section01_wrap a img {
    width: 100%;
    height: auto;
}

.section01_sp,
.sp_section01_bnr,
.sp_character,
.sp_section01_link_wrap {
    display: none;
}

@media (max-width: 768px) {
    .section01 {
      display: none;
    }

    .section01_sp {
      display: block;
      margin: -16% 0 0;
    }

    .section01_sp .wrap {
      position: relative;
      line-height: 0;
    }

    .section01_sp .wrap img {
      width: 100%; height: auto;
    }

    .section01_sp .wrap .appstore{
      width: 21.2%;
      position: absolute;
      top: 48%; left: 35.0666%;
      line-height: 0;
    }

    .section01_sp .wrap .googleplay{
      width: 26.4%;
      position: absolute;
      top: 48%; left: 58.9333%;
      line-height: 0;
    }

    .section01_sp .wrap .reuniverse{
      width: 81.0666%;
      position: absolute;
      top: 85%; left: 8.3402%;
      line-height: 0;
    }
}

.section02_sp,
.sp_section02_bnr,
.sp_character_bottom,
.sp_section02_link_wrap {
    display: none;
}

@media (max-width: 768px) {
    .section02 {
        display: none;
    }

    .section02_sp {
      display: block;
      margin: -1px 0 0;
    }

    .section02_sp .wrap {
      position: relative;
      line-height: 0;
    }

    .section02_sp .wrap img {
      width: 100%; height: auto;
    }

    .section02_sp .wrap .minstrelsong{
      width: 81.0666%;
      position: absolute;
      top: 85%; left: 8.3402%;
      line-height: 0;
    }
}

/* 本コンテンツ */

.section_body {
  padding: 1.875vw 0 3.2812vw;
  background: url('../img/4thanniv/bg_4th.jpg') center top / cover no-repeat;
}

/* section02 */

.section02_romasagars_wrap {
  width: 75vw;
  margin: 0 auto;
}

.section02_romasagars_wrap img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .section02_romasagars_wrap {
        display: none;
    }
}

/* section03 */

#cmpc {
    width: 75.625%;
    position: relative;
    margin: 1.40625% auto 0; padding: 55vw 0 0;
    background: url('../img/4thanniv/section03_bg.png') center top / contain no-repeat;
}

.cmpc_title {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.cmpc_title img {
    width: 100%;
    height: auto;
}

.cmpc_top_text {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.cmpc_top_text img {
    width: 100%;
}

.cmpc_bottom_text {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.cmpc_bottom_text img {
    width: 100%;
}

#cmpc .movie_modal_pc {
  display: flex;
  justify-content: space-between;
  width: 68.8705%;
  position: absolute;
  top: 36.5%; left: 50%;
  transform: translate(-50%,0);
}

#cmpc .movie_modal_pc li {
  width: 46.3%;
}

#cmpc .movie_modal_pc li img{
    width: 100%; height: auto;
}

#cmpc .gallery_modal_pc {
  display: flex;
  justify-content: space-between;
  width: 68.8705%;
  position: absolute;
  top: 64.7196%; left: 50%;
  transform: translate(-50%,0);
}

#cmpc .gallery_modal_pc li{
  width: 28.6%;
}

#cmpc .gallery_modal_pc li img{
  width: 100%; height: auto;
}


#cmpc .movie_modal_sp,
#cmpc .gallery_modal_sp {
    display: none;
}

@media (max-width: 768px) {
  #cmpc{
    display:none;
  }
}

/* section04 */

.section04 {
  width: 70.5208%;
  margin: 2.5vw auto 0;
}

.section04 p:nth-of-type(2){
  margin: 3.7857% 0 0;
}

.section04 p img {
  width: 100%; height: auto;
}

/* movie */

#cm{
  position: absolute;
  top: 36.2628%; left: 50%;
  transform: translate(-50%,0);
}

#cm .movie_modal_sp {
  width: 61.7333vw; height: 36.9333vw;
  margin: 0 auto;
}

#cm .movie_modal_sp li img {
  width: 100%; height: auto;
}

#cm .gallery_modal_sp {
  width: 61.7333vw; height: 36.9333vw;
  margin: 2.4666vw auto 0;
}

#cm .gallery_modal_sp li img {
  width: 100%; height: auto;
}

#cm .movie_modal_sp .slick-next,
#cm .movie_modal_sp .slick-prev,
#cm .gallery_modal_sp .slick-next,
#cm .gallery_modal_sp .slick-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0;
}

#cm .movie_modal_sp .slick-next,
#cm .gallery_modal_sp .slick-next {
  width: 7.3333vw; height: 10.5333vw;
  right: -9.3333vw;
  background: url("../img/4thanniv/sp_image_4thanniv/arrow_next.png") center / contain no-repeat;
}

#cm .movie_modal_sp .slick-prev,
#cm .gallery_modal_sp .slick-prev {
  width: 7.3333vw; height: 10.5333vw;
  left: -9.3333vw;
  background: url("../img/4thanniv/sp_image_4thanniv/arrow_prev.png") center / contain no-repeat;
}
  

#cm .movie_modal_sp .slick-prev.slick-disabled,
#cm .movie_modal_sp .slick-next.slick-disabled,
#cm .gallery_modal_sp .slick-prev.slick-disabled,
#cm .gallery_modal_sp .slick-next.slick-disabled {
  opacity: 0;
}

#cm .movie_modal_pc,
#cm .gallery_modal_pc {
  display: none;
}

.modaal-video-wrap {
    margin: 0 auto;
}

@media screen and (max-height: 768px) {
    .modaal-inner-wrapper {
      padding-top: 2%;
      padding-bottom: 2%;
    }
  }
  .sp_section03_title,
  .sp_section03_cm_text,
  .sp_section03_cm_bottom_text,
  .sp_section03_text,
  .sp_section_body_inner{
    display: none;
  }

@media (max-width: 768px) {

    .section03 {
        display: none;
    }

    .section_body {
        display: none;
    }

    .sp_section_body {
      display: block;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      padding: 2.6666% 0 0;
      background: url('../img/4thanniv/sp_image_4thanniv/sp_bg_4th_03.jpg');
      background-repeat: no-repeat;
      background-size: contain;
    }

    .sp_section_body_inner {
        display: block;
        width: 93.7333%;
        position: relative;
        margin: 4% auto 0; padding: 168.4% 0 0;
        background: url('../img/4thanniv/sp_image_4thanniv/sp_section03_bg.png');
        background-repeat: no-repeat;
        background-size: contain;
    }

    .sp_section03_title {
      display: block;
      margin: 0 auto 0; padding: 0;
    }

    .sp_section03_title img {
        width: 100%;
    }

    .sp_section03_cm_text {
        display: block;
        text-align: center;
    }

    .sp_section03_cm_text img {
        width: 80%;
        padding: 30px 30px 10px;
    }

    .sp_section03_text {
      display: block;
      width: 92%;
      margin: 0 auto;
      text-align: center;
    }

    .sp_section03_text img {
        width: 100%;
    }

    .sp_section03_cm_bottom_text {
        display: block;
        text-align: center;
    }

    .sp_section03_cm_bottom_text img {
        width: 80%;
    }

    .sp_character_bottom img {
        width: 100%;
    }
}

.sp_section04_check,
.sp_section04_bnr {
    display: none;
}

@media (max-width: 768px) {
    .section04 {
        display: none;
    }
    .sp_section04_bnr {
      display: block;
      width: 100%;
      margin: 5.6% auto 0;
      line-height: 0;
    }
    .sp_section04_bnr img {
        width: 100%;
    }

    .sp_section04_check {
      width: 92%;
      margin: 5.3333% auto 0;
    }

    .sp_section04_check img {
        width: 100%;
    }
}

.section05 {
  width: 100%;
  position: relative;
  padding: 24.6875vw 0 0;
  background: url('../img/4thanniv/section05_bg.png') center top / cover no-repeat;
}

.section_inner_bg {
  width: 72.0833%; height: 18.8541vw;
  position: absolute;
  top: 3.802vw; left: 50%;
  transform: translate(-50%,0);
  background: url('../img/4thanniv/section05_inner_bg.png') center top / contain no-repeat;
}

.section_inner_bg h2 {
  width: 44.4364%;
  position: absolute;
  top: 38.9502%; left: 50%;
  transform: translate(-50%,0);
}

.section_inner_bg a h2 img {
  width: 100%; height: auto;
}

.store_wrap{
  width: 75%;
  position: absolute;
  top: 18.0208vw; left: 50%;
  transform: translate(-50%,0);
}
.store_wrap .apple_btn{
  display: block;
  width: 12.7083vw;
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-15.3125vw,0);
}

.store_wrap .apple_btn img {
  width: 100%; height: auto;
}

.store_wrap .google_btn{
  display: block;
  width: 16.0416vw;
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-0.677vw,0);
}

.store_wrap .google_btn img {
  width: 100%; height: auto;
}


.sp_section05_wrap,
.sp_section05_inner,
.sp_link_wrap,
.sp_section06_wrap,
.sp_section07_wrap {
    display: none;
}

@media (max-width: 768px) {
    .section05 {
        display: none;
    }
    .sp_section05_wrap {
      display: block;
      width: 100%;
      position: relative;
      margin: -1px 0 0; padding: 45.3333% 0 0;
      background: url('../img/4thanniv/sp_image_4thanniv/sp_section05_bnr.png') center top / contain no-repeat;
    }

    .sp_section05_inner {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .sp_section05_inner img {
        width: 100%;
    }

    .sp_section05_link {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .sp_section05_link img {
        width: 100%;
    }
}


.section06 {
  width: 100%;
  padding: 2.0833vw 0 2.1354vw;
  background: url('../img/4thanniv/section07_bg.jpg') center top / cover no-repeat;
}

.section06 h2 {
  width: 70.5208%;
  margin: 0 auto;
}

.section06 h2 img {
    width: 100%;
}

@media (max-width: 768px) {
    .section06 {
        display: none;
    }

    .sp_section06_wrap {
        display: block;
        width: 100%;
        position: relative;
        margin: -1px 0 0;
        padding-top: 193.6666%;
        background: url('../img/4thanniv/sp_image_4thanniv/sp_section06_bg_02.png') center top /cover no-repeat;
    }
    .sp_section06_wrap > img {
        width: 92%;
        position: absolute;
        top: 2.6231%; left: 4%;
    }

    .sp_section07_wrap {
        display: block;
        width: 57.7333%;
        position: absolute;
        bottom: 0; left: 50%;
        transform: translate(-50%,-50%);
    }

    .sp_section07_wrap a img {
        width: 100%;
        transform: scale(1.12);
    }
}


.section07_inner {
    width: 65.4687%;
    position: relative;
    margin: 2.2395vw auto 0; padding: 36.7708vw 0 0;
    background: url('../img/4thanniv/section07_inner_bg.png') center top / contain no-repeat;
}


.section07_inner_btn {
  display: block;
  width: 42.9594%;
  position: absolute;
  top: 79.745%; left: 50%;
  line-height: 0;
  transform: translate(-50%,0);
}

.section07_inner_btn img {
    width: 100%;
}

@media (max-width: 768px) {
    .section07 {
        display: none;
    }
}

.copy {
  width: 100%;
  position: relative;
  padding: 10.9375vw 0 0;
}

.copy p{
  width: 57.8125%;
  position: absolute;
  top: 1.25vw; left: 50%;
  line-height: 0;
  transform: translate(-50%,0);
}

.copy p img {
    width: 100%;
}

.sp_copy {
    display: none;
}

@media (max-width: 768px) {
    .copy {
        display: none;
    }
    .sp_copy {
      display: block;
      padding: 3.7333% 0;
      text-align: center;
    }

    .sp_copy img {
      width: 92%;
    }
}