@charset "utf-8";
/*//////////////////////////////////*SP*//*//////////////////////////////////*/
/*------- 共通 ------*/
:root{
}
@media screen and (max-width: 767px) {
.switch_pc{
  display:none;
}
.switch_sp{
  display:block;
}

#main{
  overflow-x:hidden;
}

/*-- 透明背景 --*/
.bgBox{
  border-radius: 8vw;
}

/*-- 注釈ボックス --*/
.noteBox{
font-size:4.8vw;
line-height: 1.8;
text-align: left;
}

/*-- ボタン --*/
.btnBox a{
  width: 80%;
  margin: 0 auto;
  font-size:5.33vw;
  line-height: 1.4;
  padding:2.6vw;
  border-radius: 12vw;
  border: 0.6vw solid #000;
  box-shadow: 6px 8px 4px 0px rgba(0, 0, 0, 0.25);
}


/*-- アコーディオン --*/
.accordion-item .accordion-title{
  font-size: 5.33vw;
  line-height: 1.4;
  padding:2.7vw 0;
  border-radius: 12vw;
  text-align: center;
  border:0.6vw solid #000;
  width: 90%;
  margin: 0 auto;
}
/* 縦線 */
.accordion-title::before {
  width: 6%;
}
/* 横線 */
.accordion-title::after {
  width: 6%;
}


/*-- PageTop ---*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size:1.06vw;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  display: block;
  width: 16vw;
  height: 16vw;
  background-image: url(../img/totop.png);
  background-repeat: no-repeat;
  background-size:cover;
  text-decoration: none;
  padding:0;
  transition: all .3s ease;
}

/*-- headerArea --*/
.headerArea{
  display: flex;
  justify-content: space-between;
  padding:3.2vw 5vw 2vw 5vw;
}
.headerArea .logoArea{
  width:16vw;
}
.headerArea .linkArea{
  width: 37.6vw;
}

/*-- container --*/
.container{

}

/*-- mainArea --*/
.mainArea{
  position: relative;
  background-image: url(../img/main_visual_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top:136vw;
  }
  .mainArea .fukiBox01{
    width: 60vw;
    position: absolute;
    top: -1px;
    right: 0.15vw;
    animation-delay:0s;
    z-index: 1;
  }
  .mainArea .fukiBox02{
    width: 73.4vw;
    position: absolute;
    top: 45.3vw;
    left: 0;
    animation-delay:.5s;
    z-index: 2;
  }
  .mainArea .fukiBox03{
    width: 92vw;
    position: absolute;
    top: -8vw;
    left: 0;
    animation-delay:1s;
  }
  .mainArea .txtBox{
    width:15em;
    position: absolute;
    top: 110.3vw;
    left: -0.5vw;
    color: #fff;
    font-size: 6.66vw;
    font-weight: bold;
    line-height: 1.3;
    transform: rotate(355deg);
  }
  .mainArea .txtBox .txt01{
    margin-left:19vw;
  }
  .mainArea .txtBox .txt01 .box02{
    padding-left: 1vw;
    padding-bottom: 1vw;
    margin-right: -2vw;
    background-color: #000;
  }
  .mainArea .txtBox .txt02 .box02{
    padding-left: 1vw;
    padding-bottom: 1vw;
    margin-right: -2vw;
    background-color: #000;
    white-space: nowrap;
  }

  /*全共通*/
  .slide-in {
    overflow: hidden;
    display: inline-block;
  }
  .slide-in_inner {
    display: inline-block;
  }
  
  /*左右のアニメーション*/
  .leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
  }
  .slideAnimeLeftRight01 {
  animation-name:slideTextX100;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-delay:1s;
  opacity: 0;
  }
  @keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }
  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
  }
  .slideAnimeRightLeft01 {
  animation-name:slideTextX-100;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-delay: 1s;
  opacity: 0;
  }
  @keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
  }
  
  .slideAnimeLeftRight02 {
    animation-name:slideTextX200;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    animation-delay: 1.5s;
    opacity: 0;
    }
    @keyframes slideTextX200 {
    from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
          opacity: 0;
    }
    to {
    transform: translateX(0);/*要素を元の位置に移動*/
      opacity: 1;
    }
    }
    .slideAnimeRightLeft02 {
    animation-name:slideTextX-200;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    animation-delay: 1.5s;
    opacity: 0;
    background-color: #000;
    }
    @keyframes slideTextX-200 {
    from {
    transform: translateX(100%);/*要素を右の枠外に移動*/
      opacity: 0;
    }
    to {
    transform: translateX(0);/*要素を元の位置に移動*/
      opacity: 1;
    }
    }
    
  


  /*
  .mainArea .txtBox{
    width:15em;
    position: absolute;
    top: 110.3vw;
    left: -0.5vw;
    color: #fff;
    font-size: 6.66vw;
    font-weight: bold;
    line-height: 1.3;
    transform: rotate(355deg);
  }

  .mainArea .txtBox span{
    background-color: #000;
  }
 
    #s1,#s2{
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;

  }
  #s1{
    animation:s1 2s linear;
    margin-left:19vw;
    width: 10em;
  }
  #s1 .area{

  }
  @keyframes s1 {
    from { width:0em; }
    33% { width: 10em; }
    to { width:10em;}
  }
  #s2{
    animation:s2 3s linear;
    width:15em;
  }
  #s2 .area{
    padding-left: 2vw;
  }
  @keyframes s2 {
    0% { width:0em; }
    33% { width:0em; }
    66% { width:15em; }
    to { width:15em; }
  }

*/
/*-- naviArea --*/



/*
.naviArea{
  width: 100%;
}
  */
.naviArea .navilist{
  display: flex;
  flex-wrap: wrap;
}

.naviArea .navilist .box{
  width: 50%;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.naviArea .navilist .box:nth-of-type(2n){
  border-right: none;
}
.naviArea .navilist a{
  padding:1vw 0 6.3vw 0;
}
.naviArea .navilist a::after{
  top: 18vw;
  width: 3vw;
  height: 3vw;
  border-top: 0.6vw solid #fff;
  border-right: 0.6vw solid #fff;
}
.naviArea .navilist .numBox{
  font-size:3.7vw;
  margin-bottom: 0.2vw;
}
.naviArea .navilist .ttlBox{
  font-size:4.26vw;
}

/*-- capter01 --*/
.capter01 .topArea{
  background-image: url(../img/prologue_bg_sp.png);
  padding-top:122vw;
}
.capter01 .topArea .captCall{
  position: absolute;
  top: 9.3vw;
  left: 3.8vw;
  width: 17.6vw;
}
.capter01 .topArea .captTtl{
  position: absolute;
  top: 5.5vw;
  left: 22.8vw;
  width: 75vw;
}
.capter01 .topArea .imgBox{
  position: absolute;
  top: auto;
  bottom: 0;
  right: 6vw;
  width: 79.4vw;
  animation-delay: 0s;
}

.capter01 .area01{
  background-image: url(../img/prologue_bg02_sp.png);
  padding-top: 15.5vw;
  padding-bottom:11.2vw;
}
.capter01 .area01 .box{
  position: relative;
}
.capter01 .area01 .box01{
  height:101vw;
}
.capter01 .area01 .box01 .imgBox{
  position: absolute;
  width: 91.8vw;
  top: 0;
  left: 3vw;
}
.capter01 .area01 .box01 .fukiBox{
  position: absolute;
  width: 96vw;
  top: 46.5vw;
  left: 4vw;
}
.capter01 .area01 .box02{
  height:220vw;
}
.capter01 .area01 .box02 .imgBox{
  position: absolute;
  width: 95.6vw;
  top: 0;
  left: 0;
}
.capter01 .area01 .box02 .fukiBox{
  position: absolute;
  width: 93vw;
  top: 69.8vw;
  left: 6vw;
}
.capter01 .area01 .box02 .txtBox{
  position: absolute;
  width: 33vw;
  top: 27.5vw;
  left: 67vw;
}

/*-- capter02 --*/
.capter02 .topArea{
  position: relative;
  background-image: url(../img/episode1_bg_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  height:93.7vw;
}
.capter02 .topArea .captCall{
  position: absolute;
  top: 7vw;
  left: 2.7vw;
  width: 14.8vw;
}
.capter02 .topArea .captTtl{
  position: absolute;
  top: 2vw;
  left: 16.4vw;
  width: 80.7vw;
  z-index: 1;
}
.capter02 .topArea .imgBox{
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0vw;
  width: 99.8vw;
}
.capter02 .areaBox{
  background-image: url(../img/episode1_areabg_sp.png);
  padding-top: 13.5vw;
  padding-bottom:24.2vw;
}
.capter02 .area01 .box01{
  background-image: none;
  height:202vw;
}
.capter02 .area01 .box01 .imgBox01{
  position: absolute;
  width: 56vw;
  top: 0;
  left: 0;
}
.capter02 .area01 .box01 .fukiBox01{
  position: absolute;
  width: 70vw;
  top: -1.8vw;
  right: 0;
  left: auto;
}
.capter02 .area01 .box01 .imgBox02{
  position: absolute;
  width: 80.8vw;
  top: 77.2vw;
  right: 0vw;
}
.capter02 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 86vw;
  top: 134vw;
  left: 0vw;
}
.capter02 .area02 .box01{
  width:90vw;
  padding:10.2vw 0 13.2vw 0;
}

.capter02 .area02 .box01 .txtBox .txt{
  font-size: 6.4vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.capter02 .area02 .box01 .txtBox .note{
  font-size:3.2vw;
  margin-top: 3vw;
}
.capter02 .area02 .box01 .talkBox{
  height: 110vw;
}
.capter02 .area02 .box01 .talkBox .imgBox{
  width: 71.8vw;
  top: 49.3vw;
  left: 10.2vw;
}
.capter02 .area02 .box01 .talkBox .fukiBox{
  width: 82.67vw;
  top: 10.5vw;
  left: 4.6vw;
}

/*-- アコーディオン内コンテンツ --*/
.capter02 .accArea .fukitxtBox01{
  width: 90%;
  margin:0 auto 2vw auto;
}
.capter02 .accArea .timeBox01{
  display: block;
  width: 72%;
  margin: 0 auto;
}
.capter02 .accordion-content{
  padding: 12.2vw 0 0;
}
.capter02 .accArea .timeBox01 .wrapBox{
  width: 100%;
  margin-bottom: 11vw;
}
.capter02 .accArea .timeBox01 .wrapBox.wrap01{
  margin-bottom: 1vw;
}
.capter02 .accArea .timeBox01 .wrapBox:last-child{
  margin-bottom: 0;
}
.capter02 .accArea .timeBox01 .wrapBox .ttl{
  font-size: 4.8vw;
  padding:2vw 0 1.5vw 0;
  margin-bottom: 5.8vw;
}
.capter02 .accArea .timeBox01 .wrapBox .imgBox{
  width:83%;
  margin: 0 auto;
}
.capter02 .accArea .fukitxtBox02{
  width: 96%;
  margin: 12.8vw auto 0 auto;
}
.capter02 .accArea .timeBox02{
  display: block;
}
.capter02 .accArea .timeBox02 .wrapBox{
  width: 70%;
  font-size: 5.33vw;
  padding: 1.33vw;
  margin:0 auto 2.5vw auto;
  border-radius: 1.33vw;
}
.capter02 .accArea .timeBox02 .wrapBox .placeBox{
  width:27%;
  color:#fff;
}
.capter02 .accArea .timeBox02 .wrapBox .timeBox{
  width:73%;
  background-color:#Fff;
  line-height: 1.65;
}
.capter02 .accArea .noteBox{
  width: 80%;
  margin:5.5vw auto 0 auto;
}
.capter02 .accArea .btnBox{
  margin-top:9vw;
}

.capter02 .area03 .box01{
  position: relative;
  height:226.8vw;
  background-image: none;
}
.capter02 .area03 .box01 .imgBox01{
  position: absolute;
  width: 78vw;
  top: 8.5vw;
  right: 5.2vw;
}
.capter02 .area03 .box01 .fukiBox01{
  position: absolute;
  width: 97.6vw;
  top: 58.5vw;
  left: 0;
}
.capter02 .area03 .box01 .imgBox02{
  position: absolute;
  width: 61.4vw;
  top: 104.5vw;
  left: 0;
}
.capter02 .area03 .box01 .fukiBox02{
  position: absolute;
  width: 63.2vw;
  top: 134.5vw;
  left: 36.2vw;
}
.capter02 .area04 .bgBox {
  width: 90vw;
  padding:10.3vw 4vw;
}

.capter02 .area04 .box02{
  margin-bottom:4.8vw;
}
.capter02 .area04 .box02 .imgBox{
  position: static;
  height: auto;
}
.capter02 .area04 .box01 .txt{
  font-size:6.4vw;
}
.capter02 .area04 .box02 .ttl{
  font-size: 4.26vw;
  padding: 1.33vw 0;
  width: 42.56vw;
  margin: 7vw auto 4.4vw auto;
}
.capter02 .area04 .box02 .box{
  width: 100%;
  position: static;
  line-height: 0;
  margin-bottom:3%;
}
.capter02 .area04 .box02 .noteBox{
  width: 100%;
  margin: 9.4vw auto 8vw auto;
  line-height: 1.6;
}
.capter02 .area04 .box02 .btnBox a{
  width: 86%;
}

.capter02 .area05 .box01{
  width: 90vw;
  margin: 0 auto;
  font-size:5.33vw;
  letter-spacing: 0.18em;
  padding-top: 18vw;
}
.capter02 .area05 .box02 .box{
  height:89.8vw;
}
.capter02 .area05 .box02 .imgBox{
  width: 45.6vw;
  top: 37.4vw;
  left: 30vw;
}
.capter02 .area05 .box02 .fukiBox{
  width: 95.5vw;
  top: 2.2vw;
  left: 1vw;
}
.capter02 .area05 .box02 .btnBox a{
  width: 75%;
}

/*-- capter03 --*/
.capter03 .topArea{
  background-image: url(../img/episode2_bg_sp.png);
  height:92.7vw;
}
.capter03 .topArea .captCall{
  top: 8.6vw;
  left: 5.7vw;
  width: 15vw;
}
.capter03 .topArea .captTtl{
  top: 4.6vw;
  left: 19.9vw;
  width: 67.2vw;
  z-index: 1;
}
.capter03 .topArea .imgBox{
  top: auto;
  bottom: 0;
  right: 0;
  width: 82vw;
}
.capter03 .areaBox{
  background-image: url(../img/episode2_areabg_sp.png);
  padding-top: 5.4vw;
  padding-bottom:24.2vw;
}
.capter03 .area01 .box01{
  background-image: none;
  height: 207vw;
}
.capter03 .area01 .box01 .imgBox01{
  position: absolute;
  width: 65vw;
  top: 0;
  left: 3vw;
}
.capter03 .area01 .box01 .fukiBox01{
  position: absolute;
  width: 75vw;
  top: 12vw;
  right: 0;
  left: auto;
}
.capter03 .area01 .box01 .imgBox02{
  position: absolute;
  width: 75.8vw;
  top: 101.2vw;
  right: 6vw;
}
.capter03 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 90vw;
  top: 154vw;
  left: 5vw;
}
.capter03 .area02 .box01{
  width:90vw;
  padding:10.5vw 0 13.2vw 0;
}
.capter03 .area02 .box01 .txtBox{
  padding: 0 5.333vw;
}

.capter03 .area02 .box01 .txtBox .txt{
  font-size: 6.4vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.capter03 .area02 .box01 .txtBox .note{
  font-size:4.8vw;
  font-weight: bold;
  margin-top: 8vw;
}
.capter03 .area02 .box01 .talkBox{
  height: 201vw;
}
.capter03 .area02 .box01 .talkBox .imgBox01{
  position: absolute;
  width: 48.8vw;
  top: 39.5vw;
  left: 15vw;
}
.capter03 .area02 .box01 .talkBox .fukiBox01{
  position: absolute;
  width: 76.3vw;
  top: 10.9vw;
  left: 6.8vw;
}
.capter03 .area02 .box01 .talkBox .imgBox02{
  position: absolute;
  width: 47.8vw;
  top: 136vw;
  left: 26.1vw;
}
.capter03 .area02 .box01 .talkBox .fukiBox02{
  position: absolute;
  width: 84.9vw;
  top: 91vw;
  left: 2.5vw;
}
/*-- 03 アコーディオン内コンテンツ --*/
.capter03 .accordion-content {
  padding: 12.4vw 0 0;
}
.capter03 .accArea .wrap01 .fukitxtBox{
  width: 92%;
  margin: 0 auto;
}
.capter03 .accArea .wrap01 .imgBox{
  width: 91%;
  margin: 0 auto;  
}
.capter03 .accArea .wrap01 .noteBox{
  width: 89%;
  margin: 4vw auto 13.6vw auto;
  line-height: 1.6;
}
.capter03 .accArea .wrap02 .fukitxtBox{
  width: 92%;
  margin: 0 auto;
}
.capter03 .accArea .wrap02 .imgBox{
  width: 89%;
  margin: 0 auto; 
}
.capter03 .accArea .wrap02 .note{
  font-size: 3.2vw;
  margin-top: 2vw;
}
.capter03 .area03 .box01{
  position: relative;
  height:226.8vw;
  background-image: none;
}
.capter03 .area03 .box01 .imgBox01{
  position: absolute;
  width: 59vw;
  top: 0;
  left: 0;
}
.capter03 .area03 .box01 .fukiBox01{
  position: absolute;
  width: 86.6vw;
  top: 0.4vw;
  left: auto;
  right: 0;
}
.capter03 .area03 .box01 .imgBox02{
  position: absolute;
  width: 94.4vw;
  top: 94.8vw;
  right: 5.8vw;
}
.capter03 .area03 .box01 .fukiBox02{
  position: absolute;
  width: 91.4vw;
  top: 152.5vw;
  left: 4vw;
}

.capter03 .area04 .bgBox {
  width: 90vw;
  padding:7.3vw 0 13.2vw 0;
}
.capter03 .area04 .box01{
  width:90%;
  margin: 0 auto;
}
.capter03 .area04 .box01 .txt{
  font-size:6.4vw;
  line-height: 1.6;
}
.capter03 .area04 .box02{
  margin-bottom:4.8vw;
}
.capter03 .area04 .box02 .ttl{
  font-size: 4.26vw;
  padding: 1.33vw 0;
  width: 51.3vw;
  margin: 10vw auto 4.4vw auto;
}
.capter03 .area04 .box02 .imgBox{
  width:80.4vw;
  margin: 0 auto;
}
.capter03 .area04 .box02 .noteBox{
  width: 90%;
  margin: 4.7vw auto 1.5vw auto;
  line-height: 1.6;
}
.capter03 .area04 .box03 .box{
  position: relative;
  height:97.6vw;
}
.capter03 .area04 .box03 .imgBox{
  position: absolute;
  width: 70.6vw;
  top: 40vw;
  left: 9.5vw;
}
.capter03 .area04 .box03 .fukiBox{
  position: absolute;
  width: 82.8vw;
  top: 0.4vw;
  left: 3.2vw;
}
.capter03 .area04 .box03 .noteBox{
  width: 88%;
  margin: 0 auto 1.8vw auto;
  line-height: 1.6;
}
.capter03 .area04 .box03 .btnBox a{
  width: 78%;
  margin-top: 8vw;
}
.capter03 .area05 .box01{
  width: 87vw;
  margin: 0 auto;
  padding-top: 12vw;
  padding-left: 1.8vw;
  line-height: 0;
}
.capter03 .area05 .box02 .box{
  position: relative;
  height:86.4vw;
}
.capter03 .area05 .box02 .imgBox{
  position: absolute;
  width: 46.0vw;
  top: 33vw;
  left: 35vw;
}
.capter03 .area05 .box02 .fukiBox{
  position: absolute;
  width: 95.5vw;
  top: -2.8vw;
  left: 2vw;
}
.capter03 .area05 .box02 .btnBox a{
  width: 70%;
}

/*-- capter04 --*/
.capter04 .topArea{
  position: relative;
  background-image: url(../img/episode3_bg_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  height:93.7vw;
}
.capter04 .topArea .captCall{
  position: absolute;
  top: 8vw;
  left: 3.9vw;
  width: 14.8vw;
}
.capter04 .topArea .captTtl{
  position: absolute;
  top: 2.2vw;
  left: 17.6vw;
  width: 80.7vw;
}
.capter04 .topArea .imgBox{
  position: absolute;
  top: auto;
  bottom: 0;
  left: 4vw;
  width: 96vw;
}
.capter04 .areaBox{
  background-image: url(../img/episode3_areabg_sp.png);
  padding-top: 13.5vw;
  padding-bottom:14.2vw;
}
.capter04 .area01 .box01{
  background-image: none;
  height:211vw;
}
.capter04 .area01 .box01 .imgBox01{
  position: absolute;
  width: 61vw;
  top: 0;
  left: 5vw;
  z-index: 3;
}
.capter04 .area01 .box01 .fukiBox01{
  position: absolute;
  width: 100vw;
  top: 21.2vw;
  left: 0;
}
.capter04 .area01 .box01 .imgBox02{
  position: absolute;
  width: 47.8vw;
  top: 82.2vw;
  right: 5vw;
  z-index: 1 ;
}
.capter04 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 79vw;
  top: 104.2vw;
  left: 0;
}
.capter04 .area01 .box01 .txtBox{
  position: absolute;
  width: 23.5vw;
  top: 81vw;
  left: 23vw;
}
.capter04 .area02 .box01{
  width:90vw;
  padding:10.2vw 0 13.2vw 0;
}
.capter04 .area02 .box01 .txtBox .txt{
  font-size: 6.4vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.capter04 .area02 .box01 .txtBox .note{
  font-size:4.8vw;
  margin-top: 8vw;
  padding: 0 7vw;
}
.capter04 .area02 .box01 .txtBox .note .ft {
  font-size: 3.2vw;
  margin-top:3.9vw;
}
.capter04 .area02 .box01 .talkBox{
  height: 101vw;
}
.capter04 .area02 .box01 .talkBox .imgBox{
  width: 71.8vw;
  top: 36.3vw;
  left: 9.2vw;
}
.capter04 .area02 .box01 .talkBox .fukiBox{
  width: 82.67vw;
  top: 8.5vw;
  left: 3.6vw;
}

/*-- アコーディオン内コンテンツ --*/
.capter04 .accArea .accordion-content{
padding:12.2vw 0vw 1.5vw 0vw;
}
.capter04 .accArea .fukitxtBox01{
  width: 93%;
  margin:0 auto -1vw auto;
}
.capter04 .accArea .wrap01 .fukitxtBox{
  width: 92%;
  margin: 0 auto;
}
.capter04 .accArea .wrap01 .imgBox{
  width: 89%;
  margin: 0 auto;  
}
.capter04 .accArea .wrap01 .imgBox .linkBox01 a{
  position: absolute;
  width: 86%;
  height: 4%;
  top: 19%;
  left: 50%;
  transform: translateX(-50%);
}
.capter04 .accArea .wrap01 .imgBox .linkBox02 a{
  position: absolute;
  width: 86%;
  height: 4%;
  top:72.5%;
  left: 50%;
  transform: translateX(-50%);
}
.capter04 .accArea .wrap01 .noteBox{
  position: relative;
  width: 84%;
  margin: 4.5vw auto 0 auto;
  line-height: 1.8;
  text-align: center;
}
.capter04 .accArea .wrap02{
  margin-top: 13vw;
}
.capter04 .accArea .wrap02 .fukitxtBox{
  width: 92%;
  margin: 0 auto;
}
.capter04 .accArea .wrap02 .imgBox{
  width: 89%;
  margin:-1.4vw auto 0 auto; 
}
.capter04 .accArea .wrap02 .note{
  font-size: 3.2vw;
  margin-top: 2vw;
}
.capter04 .accArea .noteBox{
  width: 85%;
  margin: 5.5vw auto 0 auto;
  text-align: center;
}
.capter04 .accArea .btnBox{
  margin-top:9vw;
}
.capter04 .area03 .box01{
  width: 87vw;
  margin: 0 auto;
  padding-top: 12vw;
  padding-left: 1.8vw;
  line-height: 0;
}
.capter04 .area03 .box02 .box{
  position: relative;
  height: 79.4vw;
}
.capter04 .area03 .box02 .imgBox{
  position: absolute;
  width: 45.5vw;
  top: 34vw;
  left: 30vw;
}
.capter04 .area03 .box02 .fukiBox{
  position: absolute;
  width: 95.5vw;
  top: 3.2vw;
  left: 2vw;
}
.capter04 .area03 .box02 .btnBox a{
  width: 70%;
  margin-top: 12vw;
}

/*-- capter05 --*/
.capter05 .topArea{
  position: relative;
  background-image: url(../img/episode4_bg_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  height:93.7vw;
}
.capter05 .topArea .captCall{
  position: absolute;
  top: 7.9vw;
  left: 6.7vw;
  width: 14.8vw;
}
.capter05 .topArea .captTtl{
  position: absolute;
  top: 4.5vw;
  left: 21.6vw;
  width: 73vw;
  z-index: 1;
}
.capter05 .topArea .imgBox{
  position: absolute;
  top: auto;
  bottom: 0;
  left: 13vw;
  width: 88vw;
}
.capter05 .areaBox{
  background-image: url(../img/episode4_areabg_sp.png);
  padding-top: 10.9vw;
  padding-bottom:24.2vw;
}
.capter05 .area01 .box01{
  background-image: none;
  height:188vw;
}
.capter05 .area01 .box01 .imgBox01{
  position: absolute;
  width: 58vw;
  top: 0;
  right: 0;
  z-index: 0;
}
.capter05 .area01 .box01 .fukiBox01{
  width: 83vw;
  top: 9.2vw;
  left: 0;
}
.capter05 .area01 .box01 .imgBox02{
  position: absolute;
  width: 77.8vw;
  top: 76.4vw;
  left: 0;
}
.capter05 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 78vw;
  top: 113vw;
  left: auto;
  right: 0;
}
.capter05 .area02 .box01{
  width:90vw;
  padding:10.2vw 0 13.2vw 0;
}
.capter05 .area02 .box01 .txtBox .txt{
  font-size: 6.4vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.capter05 .area02 .box01 .txtBox .note{
  font-size: 4.8vw;
  font-weight: bold;
  margin-top: 8vw;
  padding: 0 6vw;
  line-height: 1.6;
}
.capter05 .area02 .box01 .talkBox{
  height:99vw;
  margin-top: 12.5vw;
}
.capter05 .area02 .box01 .talkBox .imgBox{
  width: 69.8vw;
  top: 35.3vw;
  left: 10.2vw;
}
.capter05 .area02 .box01 .talkBox .fukiBox{
  width: 82.67vw;
  top: 0;
  left: 3.6vw;
  z-index: 1;
}
.capter05 .accArea .accordion-content {
  padding:11vw 0 1.5vw 0;
}

/*-- アコーディオン内コンテンツ --*/
.capter05 .accArea .fukitxtBox01{
  width:89%;
  margin:0 auto 1vw auto;
}

.capter05 .accArea .wrap01 .imgBox{
  width: 90%;
  margin: 0 auto;
  position: relative; 
}
.capter05 .accArea .wrap01 .noteBox{
  width: 90%;
  margin: 5vw auto 2vw auto;
  text-align: center;
}
.capter05 .accArea .btnBox {
  margin-top: 10vw;
}

.capter05 .area03 .box01{
  position: relative;
  height: 203.8vw;
  background-image: none;
  margin-bottom: 0;
}
.capter05 .area03 .box01 .imgBox01{
  position: absolute;
  width: 72vw;
  top: 0;
  left: 5.5vw;
}
.capter05 .area03 .box01 .fukiBox01{
  position: absolute;
  width: 80.6vw;
  top: 37.5vw;
  right: 0;
  left: auto;
  z-index: 1;
}
.capter05 .area03 .box01 .imgBox02{
  position: absolute;
  width: 77.4vw;
  top: 94.5vw;
  right: 2vw;
}
.capter05 .area03 .box01 .fukiBox02{
  position: absolute;
  width: 86.8vw;
  top: 124.5vw;
  left: 0;
}
.capter05 .area03 .box02 .btnBox a {
  width: 70%;
}

/*-- 動画エリア --*/
.mvArea{
  background-image: url(../img/moviearea_bg_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding:20.5vw 0 23vw 0;
}
.mvArea .ttlArea{
    width: 87vw;
    margin: 0 auto;
}
.mvArea .mvBox{
  display: block;
  width: 88vw;
  margin: 10.6vw auto 18vw auto;
}
.mvArea .mvBox .box{
  width: 100%;
  margin-bottom: 10vw;
  line-height: 0;
}
.mvArea .btnBox a{ 
  width: 70%;
}

















/*-- Footer --*/
body #main footer {
  height: 52vw;
}

body #main footer .service_detail {
  background-color: #f5f5f5;
  margin-bottom: 8vw;
}

body #main footer .service_detail .detail_title {
  width: 58vw;
  margin-bottom: 5vw;
}

body #main footer .service_detail .detail_button {
  position: relative;
  transition: .3s ease-out;
  width: 84vw;
  margin-left: 8.5vw;
  display: inline-block;
}

body #main footer .service_detail .detail_button a {
  display: inline-block;
  width: 100%;
  transition: .3s ease-out;
}

body #main footer .service_detail .detail_button a img {
  position: absolute;
  transition: .3s ease-out;
  width: 5vw;
  right: 4vw;
  bottom: 2.7vw;
}

body #main footer .service_detail .detail_button a p {
  font-size: 4vw;
  padding: 3vw 0;
  padding-left: 30vw;
  font-style: normal;
}

body #main footer .service_detail .detail_button:hover {
  opacity: .8;
}

body #main footer .service_detail .detail_button:hover a img {
  right: 20px;
}

body #main footer .link_area {
  height: 84.8vw;
  padding-top: 0;
}

body #main footer .link_area .share_ttl {
  width: 40vw;
  padding-top: 8vw;
  margin-bottom: 5vw;
}

body #main footer .link_area .share_ttl h2 {
  font-size: 5.33333vw;
}

body #main footer .link_area .share_ttl img {
  width: 10vw;
}

body #main footer .link_area .share {
  width: 51vw;
  margin: 0 auto;
}

body #main footer .link_area .share li {
  width: 12vw;
  margin-right: 6vw;
}

body #main footer .link_area .share li:nth-child(3) {
  margin-right: 0;
}

body #main footer .link_area .footer_notice {
  margin-top: 13vw;
}

body #main footer .link_area .footer_notice small {
  font-size: 3.2vw;
}

body #main footer .link_area .bnr {
  width: 89.33333%;
  top: 28%;
}

body #main footer .link_area .bnr li {
  width: 46.26866%;
  margin-right: 3.8806%;
  opacity: 1;
}

body #main footer .link_area .bnr li .copy {
  font-size: 3.46667vw;
  margin-bottom: 4.47761%;
  line-height: 1.4;
  white-space: nowrap;
}

body #main footer .link_area .bnr li a {
  border: .5vw solid #c2c2c2
}

body #main footer .link_area .bnr li:hover a {
  opacity: 1;
}

body #main footer .link_area .bnr li:nth-child(2) {
  margin-right: 0;
}

body #main footer .copyright {
  width: 100%;
  height: 8vw;
}

body #main footer .copyright small {
  margin-top: 1.6vw;
  font-size: 2.93333vw;
}




}