@charset "UTF-8";

/* ------------------------------
FV
 ------------------------------ */
.fv-wrap{
  background: #f8f8f8;
}
.fv-wrap section{
  max-width: 80rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  position: relative;
}
.fv-wrap section h2{  
  padding: 0 1.5rem 2rem;
}
/* キャッチ SP ------------------- */
.fv-wrap section h2 + p{
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}
.fv-wrap section h2 + p span{
  display: block;
}
.fv-wrap section h2 + p span:last-child{
  padding: 0;
  text-align: right;
  font-size: 1.2rem;
  color: #444;
}
/* 吹き出し SP ------------------- */
.fv-ttl{
  max-width: 75rem;
  margin: 0 1.5rem;
  text-align: center;
  color: var(--gn);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  position: relative;  
}
.fv-ttl::before{
  display: block;
  content: "";
  height: 3rem;
  border-left: 3px solid var(--gn);
  transform: rotate(-30deg);
  position: absolute;
  left:3%;
  bottom: 0;
}
.fv-ttl::after{
  display: block;
  content: "";
  height: 3rem;
  border-right: 3px solid var(--gn);
  transform: rotate(30deg);
  position: absolute;
  right: 3%;
  bottom: 0;
}

.fv-ttl p:first-child {
  display: block;
}
.fv-ttl p:first-child br{
  display: block;
}
.fv-ttl p:last-child {
  display: none;
}
@media screen and (min-width:480px) {
  .fv-ttl{
    margin: 0 1.5rem;
    padding: 0 1rem;
  }
  .fv-ttl p:first-child br{
    display: none;
  }

}

/* ガチャピン・ムック SP ------------------- */
.fv-ph{
  padding: 0 0.5rem;
  position: relative;
}
.fv-ph-pc{
  display: none;
}
.fv-ph-sp{
  display: block;
}
.fv-ph p{
  font-size: 1.1rem;
  font-weight: 400;
}
.fv-ph p:first-of-type{
  writing-mode: vertical-rl;
  color: #333;
  position: absolute;
  left: 0;
  bottom: 5px;
}
.fv-ph p:last-of-type{
  color: #fff;
  position: absolute;
  right: 8%;
  bottom: 10px;
}

/*----------------------------------------------------
タブレット用 750- 
----------------------------------------------------*/
@media screen and (min-width:750px) {

  .fv-wrap section{
    padding: 0 5rem;
  }  
  /* ガチャピン・ムック 750 ------------------- */
  .fv-ph p:first-of-type{
    left: -30px;
    bottom: 5px;
  }
  .fv-ph p:last-of-type{
    color: #fff;
    position: absolute;
    right: 10%;
    bottom: 10px;
  }
  /* 吹き出し 750 ------------------- */
  .fv-ttl{
    margin: 0 auto;
    font-size: 2.1rem;
  }
  .fv-ttl::before{
    left:0;
  }
  .fv-ttl::after{
    right: 0;
  }

}

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

  .fv-wrap section{
    max-width: 158rem;
    padding: 0;
  }
  .fv-wrap section h2{
    padding: 1rem 3rem;
  }
  /* キャッチ 1000 ------------------- */
  .fv-wrap section h2 + p{
    max-width: 120rem;
    margin: 0 auto;
    padding: 1rem 4rem 0;
  }
  .fv-wrap section h2 + p span:last-child{
    padding: 0 10% 0 0;
    font-size: 1.4rem;
  }

  /* 吹き出し 1000 ------------------- */
  .fv-ttl{
    max-width: 56rem;
  }
  .fv-ttl::before{
    height:6rem;
    border-left: 5px solid var(--gn);
    left:3%;
    top: 30%;
  }
  .fv-ttl::after{
    height: 6rem;
    border-right: 5px solid var(--gn);
    right:3%;
    top: 30%;
  }
  .fv-ttl p:first-child {
    display: none;
  }
  .fv-ttl p:last-child {
    display: block;
  }

  /* ガチャピン・ムック 1000 ------------------- */
  .fv-ph{
    padding: 10rem 0 0;
  }
  .fv-ph-sp{display: none;}
  .fv-ph-pc{display: block;}

  .fv-ph-pc figure:first-child{
    width: 30%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .fv-ph-pc figure:last-child{
    width: 30%;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .fv-ph p{
    font-size: 1.2rem;
  }
  .fv-ph p:first-of-type{
    writing-mode: horizontal-tb;
    color: #666;
    position: absolute;
    left: 25%;
    bottom: 10px;
  }
  .fv-ph p:last-of-type{
    color: #666;
    position: absolute;
    right: 32%;
    bottom: 10px;
  }

}


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

  /* ガチャピン・ムック 1200 ------------------- */
  .fv-ph{
    padding: 14rem 0 0;
  }


}

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

  .fv-wrap section h2{
    padding: 1rem 3rem 0;
  }
  /* キャッチ 1400 ------------------- */
  .fv-wrap section h2 + p{
    padding: 1rem 0 0;
  }
  .fv-wrap section h2 + p span:last-child{
    padding: 0 10% 0 0;
    font-size: 1.4rem;
  }

 /* 吹き出し 1400 ------------------- */
  .fv-ttl{
    max-width: 75rem;
    padding: 4rem 0 0;
    font-size: 2.8rem;
  }
  .fv-ttl::before{
    height: 12rem;
    transform: rotate(-15deg);
    left: 1%;
    top: 15%;
  }
  .fv-ttl::after{
    height: 12rem;
    transform: rotate(15deg);
    right:3%;
    top: 15%;
  }
  .fv-ttl p:first-child {
    display: none;
  }
  .fv-ttl p:last-child {
    display: block;
  }

  /* ガチャピン・ムック 1400 ------------------- */
  .fv-ph{
    padding: 8rem 0 0;
  }


}


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

  .fv-wrap section h2{
    padding: 1rem 0 0;
  }

  /* 吹き出し 1600 ------------------- */
  .fv-ttl{
    padding: 4rem 0 0;
  }  

  /* ガチャピン・ムック 1600 ------------------- */
  .fv-ph{
    padding: 14rem 0 0;
  }
  .fv-ph p:first-of-type{
    left: 22%;
  }
  .fv-ph p:last-of-type{
    right: 30%;
  }



}