@charset "utf-8";
/* ************************************************************************

************************************************************************ */
/*------- 共通 ------*/
:root{
  --color-area01:#7AB408;
  --color-area02:#CCB515;
  --color-area03:#FF5E74;
  --color-area04:#34B5B0;
}
html{

}
body{
  word-break:break-all;
  margin: auto;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", YuGothic, "游ゴシック", Meiryo, "メイリオ", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  letter-spacing: 0.05em;
  position: relative;
}
#main{
  overflow-x:hidden;
}

img{
  width: 100%;
  height: auto;
}
section{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
ul{list-style: none;}
a{
  display: block;
  text-decoration: none;
}
a:hover{opacity: 0.7;}


/*-- テキストアンダーライン --*/
.txt_undrLine{
  background: linear-gradient(transparent 80%, #FFE62C 0%);
  display: inline;
  padding: 0 1px 0px;
}

/*-- 透明背景 --*/
.bgBox{
  background-color: rgba(255, 252, 252, 0.6);
  border-radius: 3.43vw;
}

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

/*-- ボタン --*/
.btnBox a{
  width: 74%;
  margin: 0 auto;
  font-size: 1.59vw;
  font-weight: bold;
  line-height: 1;
  padding:1.6vw 0;
  border-radius: 2.64vw;
  text-align: center;
  border: 0.2vw solid #000;
  background-color:#F78D41;
  color:#fff;
  box-shadow: 6px 8px 8px 0px rgba(0, 0, 0, 0.25);
}
.btnBox a:hover{
  box-shadow: none;
}

/*-- アコーディオン --*/
.accordion {
  margin-inline: auto;
  position: relative;
  width: 100%;
}
.capter02 .accordion {
  margin-top:2.4vw;
}
.accordion-title {
  color: #fff;
  cursor: pointer;
  font-size: 6.4vw;
  letter-spacing: 0.05em;
}
.accordion-content {
  display: none;
  padding:3.2vw 0.8vw 1.5vw 0.8vw;
}
.accordion-item .accordion-title{
  font-size: 1.59vw;
  font-weight: bold;
  line-height: 1;
  padding:1.6vw 0;
  border-radius: 2.64vw;
  text-align: center;
  border:0.2vw solid #000;
  width: 97%;
  margin: 0 auto;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.accordion-item .accordion-title:hover{
  box-shadow:none;
}
/* タイトルの背景色 */
.capter02 .accordion-item .accordion-title {
  background-color: var(--color-area01);
}
/* 矢印 */
.accordion-title {
  position: relative;
}
/* 縦線 */
.accordion-title::before {
  background: #fff;
  content: "";
  height: 3%;
  position: absolute;
  right: 7%;
  top: 50%;
  transform: rotate(90deg);
  transition: transform .3sease-in-out;
  width: 3%;
}
/* 横線 */
.accordion-title::after {
  background: #fff;
  content: "";
  height: 3%;
  position: absolute;
  right: 7%;
  top: 50%;
  transition: opacity .3sease-in-out;
  width: 3%;
}
/* 縦線(クリック後) */
.accordion-title.open::before {
  transform: rotate(180deg);
}
/* 横線(クリック後) */
.accordion-title.open::after {
  opacity: 0;
}


/*-- アニメーション --*/
/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-delay: 0.5s;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

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


/* 左から */

.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime{
  from {
  opacity: 0;
  transform: translateX(-100px);
  }

  to {
  opacity: 1;
  transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeLeftTrigger{
  opacity: 0;
}
  
  /* 右から */
.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
  
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

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

/*========= 流れるテキスト ===============*/

/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
}

/* ************************************************************************
  
@media screen and (min-width: 768px)
  
 ************************************************************************ */
@media screen and (min-width: 768px) {

  .capt::before {
    content:'';
    display: block;
    padding-top: 7.5vw;
    margin-top: -7.5vw;
  }


}

.switch_pc{
  display:block;
}
.switch_sp{
  display:none;
}

/*-- headerArea --*/
.headerArea{
  display: flex;
  justify-content: space-between;
  padding: 15px 2vw 12px 2vw;
}
.headerArea .logoArea{
  width:3.96vw;
  max-width: 60px;
}
.headerArea .linkArea{
  width:10.4vw;
  max-width:160px;
}

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

/*-- mainArea --*/
.mainArea{
position: relative;
background-image: url(../img/main_visual_pc.png);
background-repeat: no-repeat;
background-size: cover;
padding-top: 57vw;
overflow: hidden;
}
.mainArea .box{

}

.mainArea .fukiBox01{
  width: 32.4vw;
  position: absolute;
  top: 0.9vw;
  left: 21.15vw;
  animation-delay:0s;
  z-index: 1;
}
.mainArea .fukiBox02{
  width: 33.4vw;
  position: absolute;
  top: 35.5vw;
  left: 5.15vw;
  animation-delay: .5s;
  z-index: 2;
}
.mainArea .fukiBox03{
  width: 52.8vw;
  position: absolute;
  top: 6.4vw;
  left: 0;
  animation-delay: 1s;
}

.mainArea .txtBox{
  width:15em;
  position: absolute;
  top: 40.2vw;
  left: 39vw;
  color: #fff;
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.3;
  transform: rotate(355deg);
}
.mainArea .txtBox .txt01{
  margin-left:13vw;
}
.mainArea .txtBox .txt01 .box02{
  padding-left: 1vw;
  margin-right: -2vw;
  background-color: #000;
}
.mainArea .txtBox .txt02 .box02{
  padding-left: 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:2s;
  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:2s;
  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;
  }
  }




/*-- naviArea --*/
.naviArea{
  width: 100%;
  z-index: 100;
}
.naviArea.navi_fixed {
	left: 0;
	position: fixed;
	top: 0;
}

.naviArea .navilist{
  display: flex;
}
.naviArea .navilist .box{
  width: 25%;
  border-right: 2px solid #fff;
}
.naviArea .navilist .box:last-child{
  border-right: none;
}
.naviArea .navilist a{
  color: #fff;
  text-align: center;
  position: relative;
  padding:0.8vw 0 2.5vw 0;
}
.naviArea .navilist a::after{
  content: "";
  margin: auto;
  position: absolute;
  top: 3.3vw;
  bottom: 0;
  right: 0;
  left: 0;
  width: 1vw;
  height: 1vw;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(135deg);
  border-radius: 1px;
}
.naviArea .navilist .numBox{
  font-size:1.325vw;
  font-weight: bold;
  display: block;
  margin-bottom: 0.2vw;
}
.naviArea .navilist .ttlBox{
  font-size:1.2vw;
  font-weight: 900;
  display: block;
}
.naviArea .navilist .navi01{
background-color:var(--color-area01);  
}
.naviArea .navilist .navi02{
  background-color:var(--color-area02);  
}
.naviArea .navilist .navi03{
  background-color:var(--color-area03);  
}
.naviArea .navilist .navi04{
  background-color:var(--color-area04);  
}

/*-- capter01 --*/
.capter01 .topArea{
  position: relative;
  background-image: url(../img/prologue_bg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 27.9vw;
}
.capter01 .topArea .captCall{
  position: absolute;
  top: 4.3vw;
  left: 22.8vw;
  width:5.6vw;
}
.capter01 .topArea .captTtl{
  position: absolute;
  top: 4.5vw;
  left: 29.8vw;
  width: 25vw;
}
.capter01 .topArea .imgBox{
  position: absolute;
  top: 0;
  right: 0;
  width: 43.8vw;
  animation-delay:1s;  
}
.capter01 .area01{
  background-image: url(../img/prologue_bg02_pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 4.5vw;
  padding-bottom: 0.6vw;
}
.capter01 .area01 .box{
  position: relative;
}
.capter01 .area01 .box01{
  height: 28vw;
}
.capter01 .area01 .box01 .imgBox{
  position: absolute;
  width: 36.8vw;
  top: 2vw;
  left: 46vw;
}
.capter01 .area01 .box01 .fukiBox{
  position:absolute;
  width: 35.5vw;
  top: 0;
  left: 15vw;
}
.capter01 .area01 .box02{
  height: 41vw;
}
.capter01 .area01 .box02 .imgBox{
  position: absolute;
  width: 34.4vw;
  top: 7vw;
  left: 10.6vw;
}
.capter01 .area01 .box02 .fukiBox{
  position: absolute;
  width: 49vw;
  top: 0.8vw;
  left: 36.7vw;
  animation-delay: .8s;
}
.capter01 .area01 .box02 .txtBox{
  position: absolute;
  width: 14vw;
  top: 7.5vw;
  left: 31.6vw;
}


/*-- capter02 --*/
.capter02 .topArea{
  position: relative;
  background-image: url(../img/episode1_bg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  height:28.9vw;
}
.capter02 .topArea .captCall{
  position: absolute;
  top: 5vw;
  left: 39.7vw;
  width: 6vw;
}
.capter02 .topArea .captTtl{
  position: absolute;
  top: 1vw;
  left: 46.4vw;
  width: 42.5vw;
}
.capter02 .topArea .imgBox{
  position: absolute;
  top: 0;
  left: 0;
  width: 51.6vw;
}

.capter02 .areaBox{
  background-image: url(../img/episode1_areabg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 0vw;
  padding-bottom:8.6vw;
}
.capter02 .area01 .box01{
  position: relative;
  height: 59.8vw;
  background-image: url(../img/episode1_area01bg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: 3.3vw;
}
.capter02 .area01 .box01 .imgBox01{
  position: absolute;
  width: 23vw;
  top: 8vw;
  left:17.4vw;
}
.capter02 .area01 .box01 .fukiBox01{
  position: absolute;
  width: 31vw;
  top: 3.5vw;
  left: 31vw;
}
.capter02 .area01 .box01 .imgBox02{
  position: absolute;
  width: 29.8vw;
  top: 15.2vw;
  right: 14.8vw;
}
.capter02 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 43.2vw;
  top: 33vw;
  left: 27vw;
  animation-delay: .5s;
}
.capter02 .area02 .box01{
  width:74.2vw;
  margin:0 auto;
  box-sizing: border-box;
  padding:3.3vw 8.79vw;
/* padding:3.3vw 8.79vw 2vw 8.79vw;*/
}
.capter02 .area02 .box01 .txtBox{
  text-align: center;  
}
.capter02 .area02 .box01 .txtBox .txt{
  font-size: 2.38vw;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.capter02 .area02 .box01 .txtBox .note{
  font-size:0.93vw;
  margin-top: 2vw;
}
.capter02 .area02 .box01 .talkBox{
  position: relative;
  height: 22vw;
}
.capter02 .area02 .box01 .talkBox .imgBox{
  position: absolute;
  width: 22.8vw;
  top: 3.3vw;
  right: 4.2vw;
}
.capter02 .area02 .box01 .talkBox .fukiBox{
  position: absolute;
  width: 30.3vw;
  top: 3.5vw;
  left: 2.6vw;
  z-index: 1;
}
/*-- アコーディオン内コンテンツ --*/
.capter02 .accArea .fukitxtBox01{
  width:62%;
}
.capter02 .accArea .timeBox01{
  display: flex;
  justify-content: space-between;
}
.capter02 .accArea .timeBox01 .wrapBox{
  width: 30%;
}
.capter02 .accArea .timeBox01 .wrapBox .ttl{
  font-size: 1.19vw;
  font-weight: bold;
  background-color: var(--color-area01);
  color: #fff;
  text-align: center;
  padding:1vw 0 0.5vw 0;
  margin-bottom: 1.8vw;
}
.capter02 .accArea .timeBox01 .wrapBox.wrap01 .ttl{
  background-color:#F58080;
}
.capter02 .accArea .fukitxtBox02{
  width: 46%;
  margin: 0.6vw auto 0 auto;
}
.capter02 .accArea .timeBox02{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.capter02 .accArea .timeBox02 .wrapBox{
  width:32%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#F58080;
  font-size: 1.325vw;
  font-weight: bold;
  padding:0.33vw;
  text-align: center;
  border-radius: 0.33vw;
  margin-bottom: 0.8vw;
}
.capter02 .accArea .timeBox02 .wrapBox .placeBox{
  width:36%;
  color:#fff;
}
.capter02 .accArea .timeBox02 .wrapBox .timeBox{
  width:63%;
  background-color:#Fff;
  line-height: 1.65;
}
.capter02 .accArea .noteBox{
  margin-top: 0.5vw;
}
.capter02 .accArea .btnBox{
  margin-top:2vw;
}

.capter02 .area03 .box01{
  position: relative;
  height: 63.8vw;
  background-image: url(../img/episode1_area03bg_pc.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: 3.3vw;
  margin-bottom: 2vw;
}
.capter02 .area03 .box01 .imgBox01{
  position: absolute;
  width: 26vw;
  top: 9vw;
  right: 21.2vw;
}
.capter02 .area03 .box01 .fukiBox01{
  position: absolute;
  width: 40.2vw;
  top: 2.5vw;
  left: 17vw;
}
.capter02 .area03 .box01 .imgBox02{
  position: absolute;
  width: 34.4vw;
  top: 27.5vw;
  left: 16.8vw;
}
.capter02 .area03 .box01 .fukiBox02{
  position: absolute;
  width: 23.2vw;
  top: 31vw;
  left: 44.2vw;
  animation-delay: .5s;
}
.capter02 .area04 .bgBox {
  width: 74.2vw;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 3.3vw 8.79vw;
}
.capter02 .area04 .box01{
  text-align: center;  
}
.capter02 .area04 .box01 .txt{
  font-size: 2.38vw;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.capter02 .area04 .box02{
  margin-bottom: 1.8vw;
}
.capter02 .area04 .box02 .ttl{
  font-size: 1.325vw;
  border: 0.1vw solid #000;
  background-color: #fff;
  text-align: center;
  padding: 0.33vw 0;
  width: 12.56vw;
  margin:3vw auto 1.4vw auto;
}
.capter02 .area04 .box02 .imgBox{
  position: relative;
  height: 53vw;
}
.capter02 .area04 .box02 .box{
  width: 33.6vw;
  position: absolute;
}
.capter02 .area04 .box02 .imgBox01{
  top: 0;
  left: 6.2vw;
}
.capter02 .area04 .box02 .imgBox02{
  top: 17.3vw;
  left: 22.4vw;
}
.capter02 .area04 .box02 .imgBox03{
  top: 35vw;
  left: 11.4vw;
}
.capter02 .area04 .box02 .noteBox{
  width: 75%;
  margin: 3.4vw auto 1.5vw auto;
}

.capter02 .area05 .box01{
  width: 34vw;
  margin: 0 auto;
  padding-top: 5vw;
  line-height: 0;
}
.capter02 .area05 .box02 .box{
  position: relative;
  height:21.8vw;
}
.capter02 .area05 .box02 .imgBox{
  position: absolute;
  width: 18.6vw;
  top: 1.4vw;
  left: 57vw;
}
.capter02 .area05 .box02 .fukiBox{
  position: absolute;
  width: 36vw;
  top: 4vw;
  left: 24vw;
}
.capter02 .area05 .box02 .btnBox a{
  width: 40%;
}

/*-- capter03 --*/
.capter03 .topArea{
  position: relative;
  background-image: url(../img/episode2_bg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  height:28.8vw;
}
.capter03 .topArea .captCall{
  position: absolute;
  top: 8vw;
  left: 14.7vw;
  width: 6vw;
}
.capter03 .topArea .captTtl{
  position: absolute;
  top: 5vw;
  left: 21.6vw;
  width: 35.3vw;
}
.capter03 .topArea .imgBox{
  position: absolute;
  top: 0;
  right: 0;
  width: 41.4vw;
}

.capter03 .areaBox{
  background-image: url(../img/episode2_areabg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 0vw;
  padding-bottom:8.6vw;
}
.capter03 .area01 .box01{
  position: relative;
  height:59.8vw;
  background-image: url(../img/episode2_area01bg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: 3.3vw;
}
.capter03 .area01 .box01 .imgBox01{
  position: absolute;
  width: 21vw;
  top: 3vw;
  left: 16vw;
}
.capter03 .area01 .box01 .fukiBox01{
  position: absolute;
  width: 25.5vw;
  top: 5.5vw;
  left: 30vw;
  z-index: 1;
}
.capter03 .area01 .box01 .imgBox02{
  position: absolute;
  width: 46.5vw;
  top: 12.4vw;
  right:13.8vw;
}
.capter03 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 38.2vw;
  top: 41vw;
  left: 25.8vw;
  animation-delay: .8s;
}
.capter03 .area02 .box01{
  width:74.2vw;
  margin:0 auto;
  box-sizing: border-box;
  padding:3.3vw 8.79vw 5.4vw 8.79vw;
}
.capter03 .area02 .box01 .txtBox{
  text-align: center;  
}
.capter03 .area02 .box01 .txtBox .txt{
  font-size: 2.51vw;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.capter03 .area02 .box01 .txtBox .note{
  font-size:1.19vw;
  line-height: 1.6;
  margin-top: 2.5vw;
}
.capter03 .area02 .box01 .txtBox .note .ft{
  color: #f00;
}
.capter03 .area02 .box01 .talkBox{
  position: relative;
  height: 42.2vw;
}
.capter03 .area02 .box01 .talkBox .imgBox01{
  position: absolute;
  width: 16.8vw;
  top: 3.5vw;
  left: 7vw;
}
.capter03 .area02 .box01 .talkBox .fukiBox01{
  position: absolute;
  width: 31.3vw;
  top: 1.9vw;
  left:21.8vw;
}
.capter03 .area02 .box01 .talkBox .imgBox02{
  position: absolute;
  width: 15.8vw;
  top: 23vw;
  right: 5.1vw;
}
.capter03 .area02 .box01 .talkBox .fukiBox02{
  position: absolute;
  width: 32.6vw;
  top: 21vw;
  left: 5.9vw;
  animation-delay: .5S;
}
.capter03 .accordion-item .accordion-title{
background-color: var(--color-area02);
}
/*-- 03 アコーディオン内コンテンツ --*/
.capter03 .accArea .wrap01 .fukitxtBox{
  width: 47%;
  margin: 0 auto;
}
.capter03 .accArea .wrap01 .imgBox{
  width: 73%;
  margin: 0 auto;  
}
.capter03 .accArea .wrap01 .noteBox{
  width: 82%;
  margin: 1vw auto 2vw auto;
}
.capter03 .accArea .wrap02{
  margin-top: 4.2vw;
}
.capter03 .accArea .wrap02 .fukitxtBox{
  width: 47%;
  margin: 0 auto;
}
.capter03 .accArea .wrap02 .imgBox{
  width: 95%;
  margin: 0 auto; 
}
.capter03 .area03 .box01{
  position: relative;
  height:67vw;
  background-image: url(../img/episode2_area03bg_pc.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: -5.9vw;
}
.capter03 .area03 .box01 .imgBox01{
  position: absolute;
  width: 34vw;
  top: 0;
  left:18.2vw;
  z-index: 1;
}
.capter03 .area03 .box01 .fukiBox01{
  position: absolute;
  width: 50.6vw;
  top: -4.6vw;
  left: 34.5vw;
}
.capter03 .area03 .box01 .imgBox02{
  position: absolute;
  width: 31.4vw;
  top: 32.8vw;
  right: 12.8vw;
}
.capter03 .area03 .box01 .fukiBox02{
  position: absolute;
  width: 45.4vw;
  top: 41.5vw;
  left: 17vw;
  animation-delay: .5s;
}
.capter03 .area04 .bgBox {
  width: 74.2vw;
  margin: 0 auto;
  box-sizing: border-box;
  padding:3.3vw 8.79vw 5vw 8.79vw;
}
.capter03 .area04 .box01{
  text-align: center;  
}
.capter03 .area04 .box01 .txt{
  font-size: 2.38vw;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.capter03 .area04 .box02{
  margin-bottom: 1.8vw;
}
.capter03 .area04 .box02 .ttl{
  font-size: 1.325vw;
  border: 0.1vw solid #000;
  background-color: #fff;
  text-align: center;
  padding: 0.33vw 0;
  width: 15.56vw;
  margin:2.4vw auto 1.2vw auto;
}
.capter03 .area04 .box02 .imgBox{
  width:54.4vw;
  margin: 0 auto;
}
.capter03 .area04 .box02 .noteBox{
  width: 85%;
  margin: 1.2vw auto 1.5vw auto;
  line-height: 1.7;
}
.capter03 .area04 .box03 .box{
  position: relative;
  height: 25.2vw;
}
.capter03 .area04 .box03 .imgBox{
  position: absolute;
  width: 22.8vw;
  top: 1.8vw;
  right: 4.5vw;
}
.capter03 .area04 .box03 .fukiBox{
  position: absolute;
  width: 32.8vw;
  top: 2.4vw;
  left: 2vw;
}
.capter03 .area04 .box03 .noteBox{
  width: 85%;
  margin: 0 auto 1.8vw auto;
  line-height: 1.7;
}
.capter03 .area04 .box03 .btnBox a{
  width: 71%;
}
.capter03 .area05 .box01{
  width: 34vw;
  margin: 0 auto;
  padding-top: 5vw;
  padding-bottom: 1.2vw;
  line-height: 0;
}
.capter03 .area05 .box02 .box{
  position: relative;
  height:20.4vw;
}
.capter03 .area05 .box02 .imgBox{
  position: absolute;
  width: 18.6vw;
  top: 0;
  left: 55vw;
}
.capter03 .area05 .box02 .fukiBox{
  position: absolute;
  width: 31.5vw;
  top: 1.2vw;
  left: 27vw;
}
.capter03 .area05 .box02 .btnBox a{
  width: 40%;
}

/*-- capter04 --*/
.capter04 .topArea{
  position: relative;
  background-image: url(../img/episode3_bg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  height:29.3vw;
}
.capter04 .topArea .captCall{
  position: absolute;
  top: 8.6vw;
  left: 45.5vw;
  width: 6vw;
}
.capter04 .topArea .captTtl{
  position: absolute;
  top: 4.6vw;
  left: 52.5vw;
  width: 42.5vw;
  z-index: 1;
}
.capter04 .topArea .imgBox{
  position: absolute;
  top: 0;
  left: 0.7vw;
  width: 54.8vw;
}
.capter04 .areaBox{
  background-image: url(../img/episode3_areabg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 0;
  padding-bottom:7.2vw;
}
.capter04 .area01 .box01{
  position: relative;
  height:60.8vw;
  background-image: url(../img/episode3_area01bg_pc.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: 5.3vw;
}
.capter04 .area01 .box01 .imgBox01{
  position: absolute;
  width: 25vw;
  top: 8.5vw;
  left: 17vw;
}
.capter04 .area01 .box01 .fukiBox01{
  position: absolute;
  width: 45vw;
  top: 0.5vw;
  left: 33.5vw;
  z-index: 1;
}
.capter04 .area01 .box01 .imgBox02{
  position: absolute;
  width: 19.7vw;
  top: 26.8vw;
  right: 21.3vw;
}
.capter04 .area01 .box01 .txtBox{
  position: absolute;
  width: 10.5vw;
  top: 18.8vw;
  left: 54.7vw;
  z-index: 1;
  animation-delay: .8s;
}
.capter04 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 36.8vw;
  top: 19.5vw;
  left: 26.9vw;
  z-index: 1;
  animation-delay: 1s;
}

.capter04 .area02 .box01{
  width:74.2vw;
  margin:0 auto;
  box-sizing: border-box;
  padding:3.3vw 8.79vw;
}
.capter04 .area02 .box01 .txtBox{
  text-align: center;  
}
.capter04 .area02 .box01 .txtBox .txt{
  font-size: 2.38vw;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.capter04 .area02 .box01 .txtBox .note{
  font-size:1.19vw;
  margin-top: 2.8vw;
}
.capter04 .area02 .box01 .txtBox .note .ft{
  display: block;
  font-size:0.93vw;
  margin-top: 0.9vw;
}
.capter04 .area02 .box01 .talkBox{
  position: relative;
  height:21.8vw;
}
.capter04 .area02 .box01 .talkBox .imgBox{
  position: absolute;
  width: 22.8vw;
  top: 2.3vw;
  right: 8vw;
}
.capter04 .area02 .box01 .talkBox .fukiBox{
  position: absolute;
  width: 26.8vw;
  top: 5.2vw;
  left: 4.8vw;
  z-index: 1;
}
/* タイトルの背景色 */
.capter04 .accordion-item .accordion-title {
  background-color: var(--color-area03);
}

/*-- アコーディオン内コンテンツ --*/
.capter04 .accArea .fukitxtBox01{
  width: 78%;
  margin: 0 auto;
}
.capter04 .accArea .wrap01 .imgBox{
  width: 100%;
  margin: 0 auto;
  position: relative; 
}
.capter04 .accArea .wrap01 .imgBox .linkBox01 a{
  position: absolute;
  width: 29%;
  height: 13%;
  top: 13.5%;
  left: 14.5%;
}
.capter04 .accArea .wrap01 .imgBox .linkBox02 a{
  position: absolute;
  width: 29%;
  height: 13%;
  top: 77%;
  right: 3%;
}
.capter04 .accArea .wrap01 .noteBox{
  width: 82%;
  margin: 1vw auto 2vw auto;
}
.capter04 .accArea .wrap02{
  margin-top: 4.2vw;
}
.capter04 .accArea .wrap02 .fukitxtBox{
  width: 56%;
  margin: 0 auto -0.4vw auto;
}
.capter04 .accArea .wrap02 .imgBox{
  width: 100%;
  margin: 0 auto; 
}
.capter04 .accArea .noteBox{
  margin-top: 1.2vw;
}
.capter04 .accArea .btnBox{
  margin-top:2.2vw;
}
.capter04 .area03 .box01{
  width: 34vw;
  margin: 0 auto;
  padding-top: 5vw;
  padding-bottom: 1.2vw;
  line-height: 0;
}
.capter04 .area03 .box02 .box{
  position: relative;
  height:20.4vw;
}
.capter04 .area03 .box02 .imgBox{
  position: absolute;
  width: 18.6vw;
  top: 0.2vw;
  left: 51.6vw;
}
.capter04 .area03 .box02 .fukiBox{
  position: absolute;
  width: 30.5vw;
  top: 4vw;
  left: 24vw;
}
.capter04 .area03 .box02 .btnBox a{
  width: 40%;
}

/*-- capter05 --*/
.capter05 .topArea{
  position: relative;
  background-image: url(../img/episode4_bg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  height:28.8vw;
}
.capter05 .topArea .captCall{
  position: absolute;
  top: 7.8vw;
  left: 15.5vw;
  width: 6vw;
}
.capter05 .topArea .captTtl{
  position: absolute;
  top: 4.1vw;
  left: 22.4vw;
  width: 37.5vw;
}
.capter05 .topArea .imgBox{
  position: absolute;
  top: 0;
  right: 0;
  width: 42.4vw;
}

.capter05 .areaBox{
  background-image: url(../img/episode4_areabg_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 0vw;
  padding-bottom:8.6vw;
}
.capter05 .area01 .box01{
  position: relative;
  height: 59.2vw;
  background-image: url(../img/episode4_area01bg_pc.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y:7.1vw;
}
.capter05 .area01 .box01 .imgBox01{
  position: absolute;
  width: 19vw;
  top: 4.3vw;
  right: 22.4vw;
  z-index: 1;
}
.capter05 .area01 .box01 .fukiBox01{
  position: absolute;
  width: 36vw;
  top: 0.2vw;
  left: 29.5vw;
}
.capter05 .area01 .box01 .imgBox02{
  position: absolute;
  width: 33.1vw;
  top: 21vw;
  left: 19.4vw;
}
.capter05 .area01 .box01 .fukiBox02{
  position: absolute;
  width: 35.2vw;
  top: 24.3vw;
  left: 47.4vw;
  animation-delay: .8s;
}
.capter05 .area02 .box01{
  width:74.2vw;
  margin:0 auto;
  box-sizing: border-box;
  padding:3.3vw 8.79vw;
}
.capter05 .area02 .box01 .txtBox{
  text-align: center;  
}
.capter05 .area02 .box01 .txtBox .txt{
  font-size: 2.38vw;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.capter05 .area02 .box01 .txtBox .note{
  font-size:1.19vw;
  margin-top:2.2vw;
}
.capter05 .area02 .box01 .talkBox{
  position: relative;
  height:26vw;
}
.capter05 .area02 .box01 .talkBox .imgBox{
  position: absolute;
  width: 28.2vw;
  top: 2.3vw;
  right: 1.6vw;
}
.capter05 .area02 .box01 .talkBox .fukiBox{
  position: absolute;
  width: 30.9vw;
  top: 3.9vw;
  left: 1vw;
  z-index: 1;
}
.capter05 .accordion-item .accordion-title {
  background-color: var(--color-area04);
}

/*-- アコーディオン内コンテンツ --*/
.capter05 .accArea .fukitxtBox01{
  width: 30%;
  margin: 0 auto;
}
.capter05 .accArea .accordion-content{
  padding:3vw 0 1.5vw 0;
}
.capter05 .accArea .wrap01 .imgBox{
  width: 97%;
  margin: 0 auto;
}
.capter05 .accArea .wrap01 .noteBox{
  width: 82%;
  margin: 1vw auto 4vw auto;
}
.capter05 .accArea .noteBox{
  margin-top: 0.5vw;
}
.capter05 .accArea .btnBox{
  margin-top:2vw;
}

.capter05 .area03 .box01{
  position: relative;
  height:60.7vw;
  background-image: url(../img/episode4_area03bg_pc.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: 3.3vw;
}
.capter05 .area03 .box01 .imgBox01{
  position: absolute;
  width: 36.5vw;
  top: 6.5vw;
  left: 16.6vw;
  z-index: 1;
}
.capter05 .area03 .box01 .fukiBox01{
  position: absolute;
  width: 35.2vw;
  top: -1.5vw;
  left: 44.2vw;
}
.capter05 .area03 .box01 .imgBox02{
  position: absolute;
  width: 39.2vw;
  top: 24.5vw;
  right: 15vw;
}
.capter05 .area03 .box01 .fukiBox02{
  position: absolute;
  width: 37.2vw;
  top: 27.2vw;
  left: 17.2vw;
  z-index: 1;
  animation-delay: 1s;
}
.capter05 .area03 .box02 .btnBox a{
  width: 40%;
}

/*-- 動画エリア --*/
.mvArea{
  background: url(../img/moviearea_bg_pc.png) no-repeat;
  background-size: cover;
background-color:rgba(213, 147, 157, 0.60);
mix-blend-mode: screen;
  padding: 6.9vw 0 9vw 0;
}

.mvArea .ttlArea{
    width: 38vw;
    margin: 0 auto;
}
.mvArea .mvBox{
  display: flex;
  justify-content: space-between;
  width: 74vw;
  margin: 2.6vw auto 4vw auto;
}
.mvArea .mvBox .box{
  width: 47%;
}
.mvArea .btnBox a{ 
  width: 40%;
}







body #main footer {
  display: inline-block;
  position: relative;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 320px;
  bottom: 0;
  vertical-align: bottom;
  background-color: #fff;
}

body #main footer .service_detail {
  background-color: #fff;
  margin-bottom: 80px;
}

body #main footer .service_detail .detail_title {
  margin: 0 auto;
  display: block;
  width: 580px;
  margin-bottom: 46px;
}

body #main footer .service_detail .detail_button {
  width: 680px;
  position: relative;
  margin-left: 135px;
  background: #28aa3c;
  transition: .3s ease-out;
  margin: 0 auto;
  display: 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 {
  width: 5.29412%;
  position: absolute;
  bottom: 20px;
  right: 30px;
  transition: .3s ease-out;
}

body #main footer .service_detail .detail_button a p {
  font-size: 24px;
  padding: 3.57895% 0;
  padding-left: 264px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-style: italic;
  background: #333;
}

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 {
  position: absolute;
  width: 100%;
  top: auto;
  left: 0;
  height: 400px;
  background-color: #fff;
}

body #main footer .link_area .share_ttl {
  display: block;
  width: 358px;
  margin: 0 auto;
  padding-top: 90px;
  margin-bottom: 20px;
}

body #main footer .link_area .share_ttl h2 {
  width: auto;
  text-align: center;
  display: block;
  margin: 0 auto;
  white-space: nowrap;
  margin-bottom: 5%;
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
}

body #main footer .link_area .share_ttl img {
  display: block;
  margin: 0 auto;
  padding-top: 0;
  width: 50px;
}

body #main footer .link_area .share {
  width: 170px;
  display: block;
  margin: 0 auto;
}

body #main footer .link_area .share li {
  display: inline-block;
  width: 38px;
  margin-right: 22px;
}

body #main footer .link_area .share li a {
  transition: .2s ease-out;
}

body #main footer .link_area .share li a:hover {
  opacity: .7;
}

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

body #main footer .link_area .footer_notice {
  display: block;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
}

body #main footer .link_area .footer_notice small {
  font-size: 12px;
}

body #main footer .link_area .bnr {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: 680px;
  top: 34%;
  left: 50%;
  transform: translate(-50%,-50%);
}

body #main footer .link_area .bnr li {
  display: inline-block;
  width: 47.79412%;
  margin-right: 2.94118%;
  opacity: 1;
  transition: opacity .3s ease-out;
}

body #main footer .link_area .bnr li .copy {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 3.58209%;
}

body #main footer .link_area .bnr li a {
  opacity: 1;
  transition: opacity .3s ease-out;
  display: inline-block;
  border: 1px solid #c2c2c2;
}

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

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

body #main footer .copyright {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0;
  height: 40px;
  background: #00823e;
}

body #main footer .copyright small {
  text-align: center;
  margin: 0 auto;
  display: inline-block;
  margin-top: 10px;
  color: #fff;
}