@charset "utf-8";
html{
  font-size: 14px;
}

h1,h2,h3,h4,h5,h6{
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

ul, li{
  width: fit-content;
}

p{
    font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
}

.show_pc{
  display: block;
}

.show_sp{
  display: none;
}



@media only screen and (max-width: 767px) {
.show_pc{
  display: none;
}

.show_sp{
  display: block;
}
}



.fadeUp{
animation-name:fadeUpAnime;
animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(50px);
  filter: blur(5px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}



#gakuten_movie {
  width: 100%;
  margin: 0 auto;
  background-color: #1a1a1a;
  transition: all .8s ease;}

 .mv_area {
  position: relative;
}

 .mv_area img{
  width: 100%;
  display: block;
}

 .mv_area img.show_pc{
  display: block
 }

 .mv_area img.show_sp{
  display: none
 }



 .mv_area .wrapper img{
  position: absolute;
}


 .mv_area .wrapper img.enttl{
  top: calc(55/1280*100%);
  left: calc(55/1280*100%);
  width: calc(434/1280*100%);
}


 .mv_area .wrapper h3 img{
  top: calc(55/1280*100%);
  right: calc(55/1280*100%);
  width: calc(44/1280*100%);  
}

 .mv_area .wrapper h1 img{
  width: calc(852/1280*100%);
  right: calc(55/1280*100%);
  bottom: calc(360/1280*100%);
}

 .mv_area .wrapper h2 img{
  width: calc(426/1280*100%);
  right: calc(55/1280*100%);
  bottom: calc(290/1280*100%);
}

 .mv_area  ul.anchor_list{
  position: absolute;
  bottom: calc(55/1280*100%);
  left: calc(55/1280*100%);
  width: calc(442/1280*100%);
}

 .mv_area  ul.anchor_list img{
  position: relative;
  display: inline-block;}

 .mv_area  ul.anchor_list img.num{
  width: calc(74/442*100%);
  margin-right: calc(16/442*100%);
}


 .mv_area  ul.anchor_list li{
  margin-bottom: calc(16/442*100%);
  display: flex;
  align-items: center;
}

.mv_area  ul.anchor_list li:before{
  content: url(/user_data/packages/default/img/gakuten_movie/01/mv_anchor_icon.svg);
  width: 1.3rem;
  height: 1.3rem;
  display: block;
  margin-right: 0.75rem;
}

.mv_area  ul.anchor_list li a:hover{
background-color: rgba(255,255,255,0.3);  
}


 .mv_area  ul.anchor_list li:nth-child(4){
  margin-bottom: 0;
}


 .mv_area  u.anchor_listl li:nth-child(1) img.num{
  width: calc(72/442*100%);
  margin-right: calc(18/442*100%);
}

 .mv_area  ul.anchor_list li:nth-child(1) img.ttl{
  width: calc(61/442*100%);
}

 .mv_area  ul.anchor_list li:nth-child(2) img.ttl{
  width: calc(137/442*100%);
}

 .mv_area  ul.anchor_list li:nth-child(3) img.ttl{
  width: calc(169/442*100%);
}

 .mv_area  ul.anchor_list li:nth-child(4) img.ttl{
  width: calc(327/442*100%);
}


 .mv_area .wrapper img.cast_name{
  position: absolute;
  bottom: calc(200/1280*100%);
  right: calc(55/1280*100%);  
  width: calc(331/1280*100%);
}

 .mv_area .wrapper img.staff_name{
  position: absolute;
  bottom: calc(100/1280*100%);
  right: calc(55/1280*100%);  
  width: calc(336/1280*100%);
}

@media only screen and (max-width: 767px) {
 .mv_area img.show_pc{
  display: none
 }

 .mv_area img.show_sp{
  display: block
 }



  .mv_area .wrapper img.enttl{
    width: calc(530/750*100%);
  }

  .mv_area .wrapper h3 img{
    width: calc(75/750*100%);
  }

 .mv_area .wrapper h1 img{
    width: calc(650 / 750 * 100%);
    bottom: calc(120 / 750 * 100%);
 }

 .mv_area .wrapper h2 img{
    width: calc(530 / 750 * 100%);
    bottom: calc(90 / 750 * 100%);
 }

 .mv_area .wrapper ul.anchor_list{
  display: none;
 }


 .mv_area .wrapper img.cast_name{
    width: calc(460 / 750 * 100%);
    bottom: calc(40 / 750 * 100%);
 }

 .mv_area .wrapper img.staff_name{
    width: calc(460 / 750 * 100%);
    bottom: calc(-30 / 750 * 100%);
 }


 ul.anchor_list.show_sp{
    display: block;
        width: calc(675 / 750 * 100%);
    margin: calc(200 / 750 * 100%) auto 3rem;
  }

   ul.anchor_list.show_sp li{
    width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
   }

ul.anchor_list.show_sp li:before{
  content: url(/user_data/packages/default/img/gakuten_movie/01/mv_anchor_icon.svg);
  width: 1.3rem;
  height: 1.3rem;
  display: block;
  margin-right: 0.75rem;
}

.mv_area  ul.anchor_list li a:hover{
background-color: rgba(255,255,255,0.3);  
}



    ul.anchor_list.show_sp li img{
        height: 0.83rem;
        display: block;
        margin-bottom: 0.5rem;
  
    }

}


.sec01{
  width: calc(1170/1280*100%);
  margin: 0 auto;
  border-top: 0.5px solid #333;
  padding-top: calc(92/1280*100%);
  padding-bottom: calc(82/1280*100%);
}

.sec01 .inner{
  width: calc(920/1170*100%);
  margin: 0 auto;
}

.sec01 .inner p{
  text-align: center;
  color: #8c8c8c;
  font-weight: 300;
  font-size: 1.07rem;
  letter-spacing: 0.05rem;
  margin-top: 1rem;

}


.sec01 .inner h5 img.num{
  width: calc(71/920*100%);
  margin-right: calc(20/920*100%);
}

.sec01 .inner h5 img.ttl{
  width: calc(57/920*100%);
  padding-block: 0.1rem;
}



.sec01 .inner h4 img{
  width: calc(159/920*100%);
  margin-top: calc(20/920*100%);
  margin-bottom: calc(40/920*100%);
}

@media only screen and (max-width: 767px) {
  .sec01{
    width: calc(675/750*100%);
    padding-top: calc(120 / 750 * 100%);
    padding-bottom: calc(120 / 750 * 100%);
  }

  .sec01 .inner{
    width: 100%;
  }

  .sec01 .inner p{
    font-size: 0.83rem;
  }


  .sec01 .inner h5 img.num, .sec01 .inner h5 img.ttl{
            position: relative;
        rotate: unset;
        width: unset;
        display: block;
        left: unset;
        top: unset;
        height: 0.83rem;
        margin-bottom: 0.75rem;
  }

  .sec01 .inner h4 img{
    width: auto;
    height: 1.83rem;
  }

}

.sec02{
  background-image: url(/user_data/packages/default/img/gakuten_movie/01/sec02_bg_pc.jpg);
  padding-top: calc(92/1280*100%);
  padding-bottom: calc(82/1280*100%);
  background-size: cover;

}


.sec02 h5, .sec02 h4{
  margin-left: calc(162/1280*100%);
}

.sec02 h5 img.num{
  width: calc(74/1280*100%);
  margin-right: calc(20/1280*100%);
}

.sec02 h5 img.ttl{
  width: calc(128/1280*100%);
  padding-bottom: 0.1rem;
}

.sec02 h4 img{
  width: calc(184/1280*100%);
  margin-top: calc(20/1280*100%);
  margin-bottom: calc(40/1280*100%);
}

.sec02 p{
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  line-height: 1.7rem;

}

.sec02 .subsec01{
  margin-top: 11rem;
  display: flex;
  justify-content: space-between;
}

.sec02 .subsec01 .upper{
  width: calc(504/1280*100%);
}

.sec02 .subsec01 .upper .txt_area{
  width: calc(342/504*100%);
  margin: 0 0 calc(120/504*100%) auto;
}

.sec02 .subsec01 .upper h6 img{
  width: calc(173/342*100%);
  min-width: 173px;
  margin-bottom: calc(26/342*100%);
}

.sec02 .img_area{
  width: 100%
}

.sec02 .img_area img{
  width: 100%
}


.sec02 .subsec01 .lower{
  width: calc(530/1280*100%);
  margin-right: calc(150/1280*100%) ;
  position: relative;
}

.sec02 .subsec01 .lower img.deco01{
  position: absolute;
  width: calc(281/530*100%);
  top: calc(-95 / 530 * 100%);
  right: calc(80 / 530 * 100%);
}

.sec02 .subsec01 .lower img.deco02{
  position: absolute;  
  width: calc(459/530*100%);
  top: calc(-70/530*100%);
  right: calc(-90 / 530 * 100%);
}

.sec02 .subsec01 .lower .img_area{
  margin-bottom: calc(90/530*100%);
}

.sec02 .subsec01 .lower p{
  width: 100%;
}

.sec02 .deco_area{
  position: relative;
  width: 100%;
}

.sec02 .deco_area img.deco03{
  width: calc(1176/1280*100%);
  margin: 0 auto;
}

.sec02 .deco_area img.deco04{
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.sec02 .subsec02{
  position: relative;
}

.sec02 .subsec02 img.deco05{
  width: calc(153/1280*100%);
  position: absolute;
  right: calc(23/1280*100%);
  top: calc(105/1280*100%);
  z-index: 2;
}

.sec02 .subsec02 .img_area,
.sec02 .subsec02 .txt_area{
  width: calc(900/1280*100%);
  margin: 0 auto;
}

.sec02 .subsec02 .img_area{
  margin-bottom: calc(60/1280*100%);
}

.sec02 .subsec02 .txt_area h6 img.show_pc{
  display: block;
  width: calc(322/900*100%);
  min-width: 322px;
  margin-bottom: calc(26/900*100%);
}

.sec02 .subsec02 .txt_area h6 img.show_sp{
  display: none;
}

.sec02 .subsec02 .txt_area p{
  columns: 2;
  column-gap: 5rem;
}

.deco_area_2{
  margin-top: calc(120/1280*100%);
}

.deco_area_2 .img_work{
      width: calc(364 / 1280 * 100%);
    margin-left: calc(105 / 1280 * 100%);
}


.deco_area_2 .img_area.img04{
  width: calc(750 / 1280 * 100%);
  margin: calc(-200/1280*100%) 0 0 auto;
}

.deco_area_2 .wrapper{
  display: flex;
  justify-content: space-between;
  margin-top: calc(-200/1280*100%);
}

.deco_area_2 .wrapper .upper{
  width: calc(466/1280*100%);
}

.deco_area_2 .wrapper .upper img.deco06{
  width: calc(428/466*100%);
  margin: 0 0 0 auto;
  display: block;
}

.deco_area_2 .wrapper .lower{
  width: calc(750/1280*100%);
  margin-top: calc(275/1280*100%);
}

.deco_area_2 .wrapper .lower .deco_area{
  width: calc(700/750*100%);
  margin: 0 auto 0 0;
}

.deco_area_2 .wrapper .lower .deco_area img.deco07{
  width: calc(527/700*100%);
}

.deco_area_2 .wrapper .lower .deco_area img.deco08{
  width: calc(504/700*100%);
  margin: calc(-52/700*100%) 0 0 auto;
  display:block;
}

.sec02 .subsec03{
  width: calc(1120/1280*100%);
  margin: calc(-25/1280*100%) 0 0 auto;
  display: flex;
  justify-content: space-between;
}

.sec02 .subsec03 .upper{
  width: calc(606/1120*100%);
}

.sec02 .subsec03 .upper .txt_area{
  width: calc(390/606*100%);
}

.sec02 .subsec03 .upper h6 img{
  width: calc(174/390*100%);
  min-width: 174px;
  margin-bottom: calc(26/390*100%);
}

.sec02 .subsec03 .upper .img_area.img06{
  margin-top: calc(125/606*100%);
}


.sec02 .subsec03 .lower{
  width: calc(440/1120*100%);
    margin-top: calc(115 / 1120 * 100%);
}

.sec02 .subsec03 .lower .img_area.img08{
  margin: calc(150/440*100%) 0 0 auto;
  width: calc(353/440*100%);
}


.sec02 .deco_area_3 img.img09{
    width: calc(390 / 1280 * 100%);
    margin: 0
}


.sec02 .deco_area_3 img.img10{
    width: calc(800 / 1280 * 100%);
    display: block;
    margin: calc(-200/1280*100%) 0 0 auto
}



@media only screen and (max-width: 767px) {
  .sec02{
    padding-top: calc(120/750*100%);
    padding-bottom: calc(120/750*100%);
  }

  .sec02 h5, .sec02 h4{
    margin-left: calc(38/750*100%);
  }

  .sec02 h5 img.num, .sec02 h5 img.ttl{
            position: relative;
        rotate: unset;
        width: unset;
        display: block;
        left: unset;
        top: unset;
        height: 0.83rem;
        margin-bottom: 0.75rem;
  }

  .sec02 h4 img{
    width: auto;
    height: 1.83rem;
  }

  .sec02 .subsec01{
    display: block;
    width: calc(675 / 750 * 100%);
    margin-top: 4rem;
  }

  .sec02 .subsec01 .upper{
    width: 100%;
  }

  .sec02 .subsec01 .upper .txt_area{
    margin-bottom: 4rem;
  }

  .sec02 .subsec01 .lower{
    width: calc(675/750*100%);
    margin-top: 11rem;
  }

  .sec02 .subsec01 p.lower{
        width: calc(600 / 675 * 100%);
    margin: 0 0 4rem auto;
  }

  .sec02 .subsec02{
    margin-top: 4rem;
  }

  .sec02 .subsec02 .img_area{
    width: calc(625 / 750 * 100%);
    margin: 0 auto 4rem 0;
  }

  .sec02 .subsec02 .txt_area{
    width: calc(600 / 750 * 100%);
    margin: 0 auto 2rem calc(38 / 750 * 100%);
  }

  .sec02 .subsec02 .txt_area p{
    columns: unset;
  }

  .sec02 .subsec02 .txt_area h6 img.show_pc{
    display: none;
  }

  .sec02 .subsec02 .txt_area h6 img.show_sp{
    display: block;
        width: calc(360 / 600 * 100%);
        margin-bottom: 2rem;
  }

  .sec02 .subsec02 img.deco05{
    top: 0;
  }

  .deco_area_2{
    margin-top: 4rem;
  }

  .deco_area_2 .img_work{
    margin-left: calc(38 / 750 * 100%);
    width: calc(400 / 750 * 100%);
  }

  .deco_area_2 .img_area.img04{
    margin-top: 3rem;
    width: calc(600 / 750 * 100%);
  }

  .deco_area_2 .wrapper{
        display: block;
    margin-top: 3rem;
  }

  .deco_area_2 .wrapper .upper{
    width: calc(550/750*100%);
  }

  .deco_area_2 .wrapper .lower{
    width: calc(600 / 750 * 100%);
    margin: 4rem;
  }

  .sec02 .subsec03{
        display: block;
    width: calc(675 / 750 * 100%);
    margin: 0 auto 0 calc(38 / 750 * 100%);
  }

  .sec02 .subsec03 .upper{
    width: calc(600/675*100%);
  }

  .sec02 .subsec03 .upper .txt_area{
    width: 100%;
  }

  .sec02 .subsec03 .upper .img_area.img06{
    margin-top: 3rem;
  }

  .sec02 .subsec03 .lower{
        margin: 3rem 0 0 auto;
    width: calc(500 / 750 * 100%);
  }

  .sec02 .subsec03 .lower .img_area.img08{
    margin: 3rem auto 0 -8rem;
  }


  .sec02 .deco_area_3 img.img09{
    margin: calc(-130 / 750 * 100%) 0 0 auto;
    display: block;
    width: calc(300 / 750 * 100%);
  }

  .sec02 .deco_area_3 img.img10{
        margin: calc(100 / 750 * 100%) auto 0;
    width: calc(600 / 750 * 100%);
  }


}

.sec03 .subsec01{
  background-color: #fff;
  padding-top: calc(92/1280*100%);
  padding-bottom: calc(90/1280*100%);
  position: relative;
}

.sec03 .subsec01 h5 {
  width: calc(13 / 1280 * 100%);
  position: absolute;
  top: calc(65 / 1280 * 100%);
  left: calc(100/1280*100%);  
}


.sec03 .subsec01 h5 img.num.show_pc{
  display: block;
}

.sec03 .subsec01 h5 img.num.show_sp{
  display: none;
}

.sec03 .subsec01 h5 img.ttl.show_pc{
  display: block;
  width: calc(12/13*100%);
  margin-top: 1rem;
}

.sec03 .subsec01 h5 img.ttl.show_sp{
  display: none;
}

.sec03 .subsec01 h4{
  width: calc(32/1280*100%);
  left: calc(50/1280*100%);
  top: calc(65/1280*100%);
  position: absolute;
}

.sec03 .subsec01 h4 img.show_sp{
  display: none;
}

.sec03 .subsec01 .wrapper{
  width: calc(1100/1280*100%);
  margin: calc(175/1280*100%) 0 0 auto;
  display: flex;
  justify-content: space-between;
}

.sec03 .subsec01 .wrapper .upper{
  width: calc(516/1100*100%);
}

.sec03 .subsec01 .wrapper .upper .ttl_area{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sec03 .subsec01 .wrapper .upper .ttl_area h6 img{
  width: calc(118/516*100%);
  min-width: 118px;
}

.sec03 .subsec01 .wrapper .upper .ttl_area img.img01{
  width: calc(305/516*100%); 
}

.sec03 .subsec01 .wrapper .upper p{
  width: calc(422/516*100%);
  margin: calc(75/516*100%) auto 0 0;  
  color: #808080;
  letter-spacing: 0.05rem;
  line-height: 1.7rem ;
}

.sec03 .subsec01 .wrapper .lower{
  width: calc(552/1100*100%);
}

.sec03 .subsec01 .wrapper .lower img.img02{
  width: 100%;
  margin-bottom: calc(40/552*100%);
}

.sec03 .subsec01 .wrapper .lower .name_area h6 img{
  width: calc(210/552*100%);
  margin-bottom: 1rem;
}

.sec03 .subsec01 .wrapper .lower .name_area p{
  color: #808080;
  letter-spacing: 0.05rem;
  line-height: 1;
  z-index: 2;
  position: relative;
}

.sec03 .subsec01 .wrapper .lower .name_area img.deco{
  width: calc(431/552*100%);
  margin-top: -1rem;

}


.sec03 .subsec02 {
  padding-top: calc(92/1280*100%);
  padding-bottom: calc(90/1280*100%);  
  position: relative;
}

.sec03 .subsec02 h6 img{
  width: calc(215/1280*100%);
  min-width: 215px;
  position: absolute;
  right: calc(50/1280*100%);
}

.sec03 .subsec02 .wrapper{
  width: calc(594/1280*100%);
  margin: calc(75/1280*100%) auto 0;
}

.sec03 .subsec02 .wrapper p.comment_txt{
  color: #808080;
  letter-spacing: 0.05rem;
  line-height: 1.7rem;
  columns: 2;
  margin-bottom: calc(40/594*100%);
}

.sec03 .subsec02 .wrapper .name_area h6 img{
  width: calc(158/594*100%);
  min-width: unset;
    margin-bottom: 1rem;
    position: relative;
    right: unset;
}

.sec03 .subsec02 .wrapper .name_area p{
  color: #808080;
  letter-spacing: 0.05rem;
  line-height: 1;
  z-index: 2;
  position: relative;
}

.sec03 .subsec02 .wrapper .name_area img.deco{
  width: calc(417/594*100%);
  margin-top: -1rem;

}

.sec03 .subsec03{
  background-color: #fff;
  padding-top: calc(114/1280*100%);
  padding-bottom: calc(114/1280*100%);
}

.sec03 .subsec03 .wrapper{
  width: calc(1100/1280*100%);
  margin: 0 0 0 auto;
  display: flex;
  justify-content: space-between;
}

.sec03 .subsec03 .wrapper .upper{
  width: calc(597/1100*100%);
}

.sec03 .subsec03 .wrapper .upper .ttl_area{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sec03 .subsec03 .wrapper .upper .ttl_area h6 img{
  width: calc(177/597*100%);
  min-width: 177px;
}

.sec03 .subsec03 .wrapper .upper .ttl_area img.img01{
  width: calc(340/597*100%); 
}

.sec03 .subsec03 .wrapper .upper p{
  width: 95%;
  margin: calc(50/597*100%) auto 0 0;  
  color: #808080;
  letter-spacing: 0.05rem;
  line-height: 1.7rem ;
  columns: 2;
  column-gap: calc(25/597*100%);
}

.sec03 .subsec03 .wrapper .lower{
  width: calc(470/1100*100%);
}

.sec03 .subsec03 .wrapper .lower img.img02{
  width: 100%;
  margin-bottom: calc(40/470*100%);
}

.sec03 .subsec03 .wrapper .lower .name_area h6 img{
  width: calc(163/470*100%);
  margin-bottom: 1rem;
}

.sec03 .subsec03 .wrapper .lower .name_area p{
  color: #808080;
  letter-spacing: 0.05rem;
  line-height: 1;
  z-index: 2;
  position: relative;
}

.sec03 .subsec03 .wrapper .lower .name_area img.deco{
  width: calc(322/470*100%);
  margin-top: -1rem;

}




@media only screen and (max-width: 767px) {
  .sec03{
  }

  .sec03 .subsec01 h5 img.num.show_pc,
  .sec03 .subsec01 h5 img.ttl.show_pc{
    display: none;
}

  .sec03 .subsec01 h5{
    position: relative;
    rotate: unset;
    width: unset;
     left: unset;
    top: unset;
    height: 0.83rem;
    margin-bottom: 0.75rem;
    margin-left: calc(38/750*100%);
    display: flex;
  }


  .sec03 .subsec01 h5 img.num.show_sp,
  .sec03 .subsec01 h5 img.ttl.show_sp{
    display: block;
    height: 100%;
    margin-right: 1rem;
  }

  .sec03 .subsec01 h5 img.ttl.show_sp{
    height: 90%;
  }

  .sec03 .subsec01,  .sec03 .subsec02{
    padding-top: calc(120/750*100%);
    padding-bottom: calc(120/750*100%);
  }

  .sec03 .subsec01 .wrapper{
    width: calc(675/750*100%);
    display: block;
    margin: calc(120/750*100%) auto 0;
  }

  .sec03 .subsec01 .wrapper .upper{
    width: 100%;
  }

  .sec03 .subsec01 .wrapper .upper .ttl_area{
        display: block;
    position: relative;
    padding-bottom: 5rem;
  }

  .sec03 .subsec01 .wrapper .upper .ttl_area h6 img{
     margin: 0 auto 0 0;
    display: block;
    z-index: 2;
    position: relative;
    width: calc(145 / 675 * 100%);
    min-width: unset;   
  }

  .sec03 .subsec01 .wrapper .upper .ttl_area img.img01{
    position: absolute;
    bottom: 0;
    width: calc(500 / 675 * 100%);
    right: 0;
  }

  .sec03 .subsec01 h4{
    width: calc(211/675*100%);
    left: unset;
    top: unset;
    position: relative;
    margin-left: calc(38/750*100%);
    line-height: 1;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 0;
    line-height: 1;
    margin-top: 1rem;
  }


  .sec03 .subsec01 h4 img.show_pc{
    display: none;
  }

  .sec03 .subsec01 h4 img.show_sp{
    display: block;
  }



  .sec03 .subsec01 .wrapper .upper p{
    width: 100%;
    columns: unset;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .sec03 .subsec01 .wrapper .lower{
    width: 100%;
  }


  .sec03 .subsec02 h6 img{
        margin: 0 auto 0 0;
        display: block;
        z-index: 2;
        position: relative;
        width: calc(225 / 675 * 100%);
        min-width: unset;
        right: 0;
        margin-left: calc(58 / 750 * 100%);
  }

  .sec03 .subsec02 .wrapper{
        width: calc(480 / 750 * 100%);
    margin: -3rem  calc(75 / 750 * 100%)  0 auto
  }


  .sec03 .subsec02 .wrapper p.comment_txt{
    columns: unset;
    margin-bottom: 3rem;
  }

  .sec03 .subsec02 .wrapper .name_area h6 img{
    width:calc(206 / 550 * 100%);
    margin-left: 0;
  }

  .sec03 .subsec02 .wrapper .name_area img.deco{
    width: calc(445/550*100%);
  }




  .sec03 .subsec03{
    padding-top: calc(120/750*100%);
    padding-bottom: calc(120/750*100%);
  }

  .sec03 .subsec03 .wrapper{
    width: calc(675/750*100%);
    display: block;
    margin: 0 auto;
  }

  .sec03 .subsec03 .wrapper .upper{
    width: 100%;
  }

  .sec03 .subsec03 .wrapper .upper .ttl_area{
        display: block;
    position: relative;
    padding-bottom: 4rem;
  }

  .sec03 .subsec03 .wrapper .upper .ttl_area h6 img{
     margin: 0 auto 0 0;
    display: block;
    z-index: 2;
    position: relative;
    width: calc(225 / 675 * 100%);
    min-width: unset;   
  }

  .sec03 .subsec03 .wrapper .upper .ttl_area img.img01{
    position: absolute;
    bottom: 0;
    width: calc(500 / 675 * 100%);
    right: 0;
  }

  .sec03 .subsec03 .wrapper .upper p{
    width: 100%;
    columns: unset;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .sec03 .subsec03 .wrapper .lower{
    width: 100%;
  }


}



.sec04 {
  position: relative;
  width: 100%;
  overflow: hidden;

}

.sec04 p{
  color: #fff;
}

.sec04 .background {
  position: absolute;
  inset: 0;
}
.sec04 .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  filter: brightness(0.4);
}
.sec04 .bg.active {
  opacity: 1;
}

.sec04 .wrapper{
  width: calc(1000/1280*100%);
  position: relative;
  margin: calc(72/1280*100%) auto 0;
  padding-bottom: calc(72/1280*100%) ;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sec04 .ttl_area.show_sp{
  display: none;
}

.sec04 .wrapper .ttl_area.show_pc{
  width: calc(402/1000*100%);
}

.sec04 .wrapper h5.cptttl img.num{
  width: calc(74/402*100%);
  margin-right: calc(20/402*100%);
}

.sec04 .wrapper h5.cptttl img.ttl{
  width: calc(308/402*100%);
  padding-block: 0.1rem;
}

.sec04 .wrapper h4.mainttl img{
  width: calc(274/402*100%);
  margin-top: calc(20/402*100%);
}

.sec04 .wrapper .inner{
  width: calc(447/1000*100%);
  min-width: 447px;
  margin-top: calc(126/1000*100%);
}

/* ナビ */
.sec04 .wrapper .inner .nav {
  list-style: none;
  cursor: pointer;
  margin-bottom: calc(45/447*100%);
}
.sec04 .wrapper .inner .nav li {
  margin-bottom: 0.8rem;
  line-height: 1.8rem;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
  color: #fff;
  display: flex;
  font-size: 1.43rem;
  letter-spacing: 0.05rem;
}

.sec04 .wrapper .inner .nav li span{
  font-size: 1rem;
}

.sec04 .wrapper .inner .nav li:before{
  content: url(/user_data/packages/default/img/gakuten_movie/01/sec04_nav_icon.svg);
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  margin-right: 0.75rem;
}

.sec04 .wrapper .inner .nav li.active {
  opacity: 1;
  background-color: rgba(255,255,255,0.3);
}

.sec04 .wrapper .inner .nav li:hover{
  background-color: rgba(255,255,255,0.3);  
  transition: 0.3s;
  pointer-events: auto;
  cursor: pointer;
}


/* コンテンツ フェード */
.sec04 .wrapper .inner .content {
  width: 100%;
  padding-top: calc(45 / 447 * 100%);
  border-top: 0.5px solid #fff;
}
.panel {
  display: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.panel.active {
  display: block;
  opacity: 1;
}

.panel p{
  letter-spacing: 0.05rem;
  line-height: 1.7rem;
}

.panel h6 img{
  margin-bottom: 1.75rem;
}

.panel h6 img.ttl1{
  width: calc(270/447*100%);
  min-width: 270px;
}

.panel h6 img.ttl2{
  width: calc(269/447*100%);
  min-width: 269px;
}

.panel h6 img.ttl3,
.panel h6 img.ttl4{
  width: calc(326/447*100%);
  min-width: 326px;
}

.panel h6 img.ttl5{
  width: calc(324/447*100%);
  min-width: 324px;
}

.panel h6 img.ttl6{
  width: calc(267/447*100%);
  min-width: 267px;
}








/* プロフィール */
.profile {
  display: flex;
  align-items: flex-end;
  margin-top: 1.5rem;
}
.profile img {
  width: calc(110/447*100%);
  margin-right: 2rem;
}

.profile p.name{
  font-size: 1.43rem;
  letter-spacing: 0.05rem;
  line-height: 2.43rem;
}

@media only screen and (max-width: 767px) {
.sec04{
  padding: calc(75/750*100%) 0;

}

.sec04 .ttl_area.show_sp{
  display: block;
  position: relative;

}

.sec04 .ttl_area.show_sp h5{
  width: calc(675/750*100%);
  margin: 0 auto;
}

.sec04 .ttl_area.show_sp h5 img{
  width: auto;
  height: 0.83rem;
  margin-bottom: 0.75rem; 
  display: block;
}



.sec04 .ttl_area.show_sp h4{
  width: calc(675 / 750 * 100%);
  margin: 0 auto calc(140 / 750 * 100%);
}

.sec04 .ttl_area.show_sp h4 img{
  width: calc(360 / 675 * 100%);
  padding-top: 0.75rem;
  border: unset;  
}


.sec04 .wrapper .ttl_area.show_pc{
  display: none;
}

.sec04 .wrapper{
    width: calc(675 / 750 * 100%);
    margin: 0 auto;
    display: block;
}

.sec04 .wrapper .inner{
  width: 100%;
  margin-top: 0;
  min-width: unset;
}

.sec04 .wrapper .inner .nav li{
  font-size: 1.15rem;
}

.sec04 .wrapper .inner .nav li:before{
  margin-top: 0.15rem;
}

.sec04 .wrapper .inner .nav li span{
  font-size: 0.75rem;
}

.panel h6 img.ttl1,.panel h6 img.ttl2,
.panel h6 img.ttl3,.panel h6 img.ttl4,
.panel h6 img.ttl5,.panel h6 img.ttl6{
  min-width: unset;
}

.panel p{
  line-height: 1.5rem;
  font-size: 0.93rem;
}

.profile img{
  margin-right: 1rem;
}

.profile p.name{
  font-size: 1.15rem;
}

.profile p.position{
  font-size: 0.86rem;
}


}





.sec05{
  padding-top: calc(160/1280*100%);
  position: relative;
  padding-bottom: calc(170/1280*100%);
}

.sec05 .wrapper{
  width: calc(1120/1280*100%); 
  margin: 0 0 0 auto;
}

.sec05 .wrapper .gallery_list.show_pc{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sec05 .wrapper .gallery_list.show_pc img{
  width: 25%;
}


.sec05 .wrapper .gallery_list.show_sp{
  display: none;
}


.sec05 .wrapper .info_area{
  margin-top: calc(116/1120*100%);
}

.sec05 .wrapper .info_area img.logo{
  width: calc(238/1120*100%);
  min-width: 238px;
  margin-bottom: calc(40/1120*100%);
}

.sec05 .wrapper .info_area p{
  width: calc(556/1120*100%);
  max-width: 556px;
  margin: 0 auto   calc(38/1120*100%) 0;
  display: block;
  color: #808080;
  font-size: 0.9285rem;
  letter-spacing: 0.05rem;
  line-height: 1.7rem;
}

.sec05 .wrapper .info_area a img{
  width: calc(208/1120*100%);
  min-width: 208px;
  display: block;
  margin: 0 auto 0 0;
}

.sec05 p.rights{
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.05rem;
  position: absolute;
  left: 50%;
  bottom: 1.7rem;
  transform: translateX(-50%);  
}

@media only screen and (max-width: 767px) {
  .sec05 {
    padding-bottom: 10rem;
  }

  .sec05 .wrapper{
    width: 100%;
  }


  .sec05 .wrapper .gallery_list.show_pc{
    display: none;
  }

  .sec05 .wrapper .gallery_list.show_sp{
    display: block;
  }

  .slider {
  width: 100%;
  margin: 0 auto;
  overflow: visible !important;
}

.slider img {
  display: block;
  width: 85vw; 
  height: auto;
}



  .sec05 .wrapper .info_area{
    width: calc(600 / 750 * 100%);
    margin: calc(90 / 750 * 100%) auto 0;
  }

  .sec05 .wrapper .info_area img.logo{
    min-width: unset;
    width: calc(360 / 600 * 100%);
    margin-bottom: 2rem;  
  }

  .sec05 .wrapper .info_area p{
    width: calc(540 / 600 * 100%);
    max-width: unset;
    font-size: 0.86rem;
    line-height: 1.6rem;
    margin-bottom: 2rem;
  }

  .sec05 p.rights{
        width: 100%;
    font-size: 0.6rem;
    text-align: center;
  }


}