@charset "UTF-8";

/* --------------------------- 
FV SP
------------------------------ */
.fv-img{
  width: 110%;
  position: static;
}

/* ロゴ SP --- */
.fv-logo{
  padding: 1rem 0;
}
.fv-logo img{
  display: block;
  width: 16rem;
  margin: 0 auto;
}

/* 兵庫 SP --- */
.fv-hy{
  display: block;
  margin: 0 0 1.5rem;
}
.fv-hy img{
  display: block;
  width: 20rem;
  margin: 0 auto;
}

/* FV 内容 SP 
-------------------- */
.fv-content{
  max-width: 182rem;
  margin: 0 1.5rem;
  padding: 2.5rem 0 1.5rem;
  border-radius: 2rem;
  background: #fff url(../img/fv-bg.png) no-repeat center top;
  background-size: cover;
  position: relative;
}

.fv-content-in{
  max-width: 54rem;
  margin: 0 auto;
}

.fv-c-flex{
  display: flex;
  flex-direction: column;
}

/* タイトル SP  */
.fv-title{
  padding: 0 1.5rem;
  position: relative;
}
.fv-title h1{
  width: auto;
  margin: 0 0 1.2rem;
  background: url(../img/fv-line.svg) no-repeat left 1.8rem;
}
.fv-title h1 span{
  display: block;
  width: 12rem;
  margin: 0 auto 1.5rem;
  padding: 0.2rem 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 3.6rem;
  color: var(--bgreen);
  background: #f5f5d0;
}

/* 新登場のみ SP ----- */
.fv-newimg-pc{
  display: none;
}
.fv-newimg-sp{
  display: block;
  width: 6.8rem;
  position: absolute;
  top: -22%;
  left: 5%;
}
@media screen and (min-width:414px) {

  .fv-newimg-sp{
    left: 6%;
  }

}

/* 新登場 SP --- */
.fv-newplan{
  width: auto;
  padding: 0 2rem 2rem;
  position: relative;
}

.fv-newplan p.fv-newplan-hy{
  display: none;
}

.fv-newplan ol{
  max-width: 67.2rem;
  padding: 0;
}
.fv-newplan ol li{
  margin: 0 0 0.5rem;
  padding: 0.8rem 0 0.8rem 2rem;
  border-radius: 1rem;
  line-height: 1.2;
  text-align: center;
  background: #f5f5d0;
  font-size: 1.4rem;
  font-weight: 700;
}
.fv-newplan ol li strong{
  padding: 0 0.2rem;
  font-family: "Outfit", sans-serif;  
  font-size: 1.8rem;
}
.fv-newplan ol li br{
  display: block;
}
.fv-newplan ol li .gr{
  color: var(--green);
}
.fv-newplan ol li .red{
  color: var(--bred);
}
.fv-newplan ol li small{
  font-size: 1rem;
}

/* ポイント SP --- */
.fv-point-wrap{
  width: 100%;
  padding: 0;
  position: static;
}
.fv-point{
  display: flex;
  flex-direction: column;
  max-width: 160rem;
  margin: 0 1rem;
  padding: 0;
  box-shadow: 0 0 5px rgba(102, 102, 102, 0.2);
  border-radius: 0.5rem;
  background: #fff;
}
.fv-point article{
  width: auto;
  padding: 2rem;
  border-right: none;
  border-bottom: 1px solid #bfc7c5;
  font-weight: bold;
  position: relative;
}
.fv-point article:last-child{
  border-right: none;  
}
.fv-point article h3{
  width: 6.4rem;
  position: absolute;
  top: 0;
  left: 2rem;
}
.fv-point article h3 + p{
  margin: 0 0 1.5rem;
  padding: 0 0 0 8rem;
  line-height: 1.2;
  font-size: 1.8rem;
}
.fv-point article h3 + p span{
  display: block;
  padding: 0.2rem 0;
  text-align: center;
  border-radius: 15rem;
  font-size: 1.6rem;
  color: #fff;
  background: var(--bgreen);
}
.fv-point article:first-child h3 + p span{
  width: 7rem;
}
.fv-point article:nth-child(2) h3 + p span{
  width: 9rem;
}
.fv-point article:last-child h3 + p span{
  width: 10rem;
}

.fv-point article h3 + p strong{
  padding: 0 0.2rem;
  font-family: "Outfit", sans-serif;
  font-size: 3.6rem;
  color: var(--bgreen);
}
.fv-point article h3 + p small{
  font-size: 1.2rem;
}

.fv-point article dl{
  display: flex;
  align-items: center;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--lgreen);
}
.fv-point article dl dt{
  width: 4.5rem;
  padding: 0 1rem 0 0;
}
.fv-point article dl dd{
  width: calc(100% - 4.5rem);
  padding: 0 0 0 1rem;
  line-height: 1.5;
  border-left: 1px solid #bfc7c5;
  font-size: 1.6rem;
}
@media screen and (min-width:414px) {

  .fv-point article dl dt{
    width: 5rem;
    padding: 0 1.5rem 0 0;
  }
  .fv-point article dl dd{
    width: calc(100% - 5rem);
    padding: 0 0 0 1.5rem;
  }

}

.fv-point article dl dd small{
  font-size: 1.2rem;  
}
.fv-point article dl dd br{
  display: block;
}

/* 03 赤SP --- */
.fv-point article.fv-pred h3 + p{
  line-height: 1.4;
  color: var(--bred);
  font-size: 2.4rem;
}
.fv-point article.fv-pred h3 + p span{
  background: var(--bred);
}
.fv-point article.fv-pred dl{
  background: var(--lred);
}
.fv-point article.fv-pred dl dd strong {
  color: var(--bred);
}
.fv-point article.fv-pred dl dd strong span {
  font-family: "Outfit", sans-serif;
  font-size: 1.8rem;
}
.fv-point article.fv-pred dl dd span.fv-red-span{
  display: block;
  font-size: 1.4rem;  
}


.fv-point + p{
  padding:1rem 1rem 0 0;
  text-align: right;
  font-size: 1.2rem;
}

/* --------------------------- 
FV内 CTA SP
------------------------------ */

/* プラン下にあるCTA用の背景色 */
.plan-bg-cta{
  background: var(--lgreen);
}

.fv-cta{
  max-width: 47rem;
  margin: 0 auto;
  padding: 3rem 2rem;  
}
.fv-cta ul{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fv-cta ul li{
  width: auto;
  padding: 0 0 1.5rem;
}
.fv-cta ul li:last-child{
  border-radius: 0.5rem;
  background: #fff;
}
.fv-cta ul li:last-child a{
  display: block;
  max-width: 38rem;
  margin: 0 auto;
  padding: 1.5rem 5rem;
  text-align: center;
  color: var(--green);
}

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

  /* --------------------------- 
  FV SP 480-
  ------------------------------ */

  .fv-newplan ol li{
    padding: 0.8rem 0 0.8rem 3.6rem;
  }

  .fv-point article h3 + p{
    padding: 0 0 0 9rem;
  }
  .fv-point article dl dd br{
    display: none;
  }
  .fv-point article.fv-pred dl dd br {
    display: inline;
  }


}


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

  /* タイトル SP  */
  .fv-title h1{
    margin: 0 1.5rem 1.5rem; 
  }
  .fv-title h1 span{
    width: 14rem;
    padding: 0.4rem 0;
    font-size: 2.1rem;
  }

  /* 新登場のみ SP 560 ----- */
  .fv-newimg-sp{
    width: 9rem;
  }

  .fv-newplan{
    padding: 0 2rem 3rem 4rem;
  }

  .fv-newplan ol li br{
    display: none;
  }


}

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

  .fv-content-in{
    max-width: 64rem;
  }

  .fv-title h1{
    background: url(../img/fv-line.svg) no-repeat left 2.8rem;
  }  
  .fv-title h1 span{
    display: block;
    width: 16rem;
    margin: 0 auto 1.5rem;
    padding: 0.4rem 0;
    font-size: 2.8rem;
  }
  .fv-newimg-sp{
    width: 10rem;
    left: 6%;
  }

  /* 新登場 TB --- */
  .fv-newplan ol li{
    font-size: 1.6rem;
  }
  .fv-newplan ol li strong{
    font-size: 2.1rem;
  }

  .fv-point article:last-child dl dd br{
  display: block;
  }

  .fv-point article.fv-pred dl dd span.fv-red-span{
    display: inline;
  }


  /* --------------------------- 
  FV内 CTA 750
  ------------------------------ */
  .fv-cta{
    max-width: 140rem;
    padding: 3rem 1.5rem;  
  }
  .fv-cta ul{
    flex-direction: row;
  }
  .fv-cta ul li{
    width: 32%;
    padding: 0;
  }
  .fv-cta ul li:last-child a{
    max-width: 43.8rem;
    margin: 0;
    padding: 1rem 4rem;
  }


}


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

  /* --------------------------- 
  FV 1000
  ------------------------------ */
  .fv-img{
    width: 54%;
    text-align: left;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
  }

  /* FV ヘッダー 1000 
  --------------------------- */
  .fv-logo{
    padding: 2rem 0 2rem 5%;
  }
  .fv-logo img{
    width: 20rem;
    margin: 0;
  }
  /* 兵庫 SP */
  .fv-hy{
    display: none;
  }

  /* FV 内容 1000 
  --------------------------- */
  .fv-content{
    max-width: 182rem;
    margin: 0 auto;
    padding: 0 3rem 20rem;
    border-radius: 5rem;
  }
  .fv-content-in{
    max-width: 160rem;
    margin: 0 auto;
  }

  .fv-c-flex{
    flex-direction: column-reverse;
  }
  /* タイトル 1000  */
  .fv-title h1{
    width: 45%;
    margin: 0 1.5rem 2rem;
  }

  /* 枠内兵庫 1000 */  
  .fv-newplan p.fv-newplan-hy{
    display: block;
    width: 20rem;
    margin: 0 auto;
    padding: 1rem 0;
  }

  /* 新登場 1000 */
  .fv-newplan{
    width: 53%;
    padding: 0 2rem 0 5rem;
  }

  .fv-newimg-sp{
    display: none;
  }

  .fv-newimg-pc{
    display: block;
    width: 8rem;
    position: absolute;
    top: 30px;
    left: 5px;
  }
  .fv-newplan ol{
    width: 95%;
    padding: 0 0 1rem;
  }
  .fv-newplan ol li{
    padding: 0.5rem 0 0.5rem 4rem;
    border-radius: 0;
    text-align: left;
    font-size: 1.2rem;
  }
  .fv-newplan ol li strong{
    font-size: 1.6rem;
  }


  /* ポイント 1000  */
  .fv-point-wrap{
    width: 100%;
    padding: 0 3rem;
    position: absolute;
    bottom: -6rem;
    left: 0;
  }
  .fv-point{
    flex-direction: row;
    margin: 0 auto; 
    padding: 0;
    border-radius: 2rem;
  }
  .fv-point article{
    width: 30%;
    padding: 2rem;
    border-right: 1px solid #bfc7c5;
    border-bottom: none;
  }
  .fv-point article:last-child{
    width: 40%; 
  }
  .fv-point article h3{
    width: 5.6rem;
    left: 2rem;
  }
  .fv-point article h3 + p{
    padding: 0 0 0 8rem;
    font-size: 1.8rem;
  }
  .fv-point article h3 + p strong{
    font-size: 3rem;
  }

  .fv-point article h3 + p span{
    display: block;
    width: 50%;
    padding: 0.4rem 0;
    font-size: 1.6rem;
  }

  .fv-point article dl dt{
    width: 6rem;
    padding: 0 1.5rem 0 0.5rem;
  }
  .fv-point article dl dd{
    width: calc(100% - 6rem);
    padding: 0 1rem;
    line-height: 1.5;
    font-size: 1.4rem;
  }

  /* 03 赤 1000 --- */
  .fv-point article.fv-pred h3 + p{
    font-size: 2.4rem;
  }
  .fv-point article.fv-pred dl dd strong span {
    font-size: 1.6rem;
  }

  .fv-point article.fv-pred dl dd span.fv-red-span{
    display: block;
  }

  .fv-point + p{
    font-size: 1.2rem;
  }

  /* --------------------------- 
  FV内 CTA 1000
  ------------------------------ */
  .fv-cta{
    padding: 8rem 1.5rem;  
  }
  .fv-cta ul li:last-child a{
    padding: 1.5rem 5rem;
  }


}


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

  /* FV 内容 1200 
  --------------------------- */
  .fv-content{
    padding: 0 3rem 15rem;
  }

  .fv-point article.fv-pred dl dd span.fv-red-span{
    display: inline;
  }


}

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

  .fv-title h1 span{
    width: 26rem;
    margin: 0 auto;
    font-size: 2.4rem;
  }

  /* 新登場 1400 */
  .fv-newimg-pc{
    width: 10rem;
    position: absolute;
    top: 30px;
    left: 5px;
  }

  .fv-newplan ol{
     width: 85%;
  }
  .fv-newplan ol li{
    padding: 1rem 0 1rem 6rem;
    font-size: 1.4rem;
  }
  .fv-newplan ol li strong{
    font-size: 1.8rem;
  }

  /* --------------------------- 
  FV内 CTA 1000
  ------------------------------ */
  .fv-cta ul li:last-child a{
    padding: 2rem 6rem;
  }


}


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

  /* FV 内容 1600 
  --------------------------- */
  .fv-content{
    padding: 0 0 23rem;
  }

  /* タイトル 1000  */
  .fv-title h1{
    margin: 0 0 3rem;
  }

  .fv-newimg-pc{
    width: 15rem;
    top: 0;
    left: 10px;
  }

  /* 枠内兵庫 1000 */  
  .fv-newplan p.fv-newplan-hy{
    width: 28rem;
    padding: 1.5rem 0;
  } 

  .fv-newplan ol{
    padding: 0 0 2rem 8rem;
  }
  .fv-newplan ol li{
    padding: 1rem 0 1rem 4rem;
    font-size: 1.8rem;
  }
  .fv-newplan ol li strong{
    font-size: 2.4rem;
  }

  /* タイトル 1600  */
  .fv-content-in h1{
    width: 45%;
    background: url(../img/fv-line.svg) no-repeat left 3.6rem;
  }
  .fv-content-in h1 span{
    width: 26rem;
    font-size: 4rem;
  }

  /* ポイント 1600  */
  .fv-point article h3{
    width: 9rem;
    left: 4rem;
  }
  .fv-point article h3 + p{
    padding: 0 0 0 13rem;    
    font-size: 2.1rem;
  }
  .fv-point article h3 + p strong{
    font-size: 5.6rem;
  }
  .fv-point article h3 + p span{
    display: block;
    width: 50%;
    padding: 0.4rem 0;
    font-size: 2.1rem;
  }
  .fv-point article:first-child h3 + p span{
    width: 10rem;
  }
  .fv-point article:nth-child(2) h3 + p span{
    width: 13rem;
  }
  .fv-point article:last-child h3 + p span{
    width: 13rem;
  }

  .fv-point article dl dt{
    width: 8rem;
    padding: 0 2rem;
  }
  .fv-point article dl dd{
    width: calc(100% - 8rem);
    padding: 1rem;
    line-height: 1.5;
    font-size: 2.1rem;
  }

  .fv-point article dl dd br{
    display: block;
  }

  /* 03 赤 1600 --- */
  .fv-point article.fv-pred h3 + p{
    font-size: 4.2rem;
  }
  .fv-point article.fv-pred dl dd strong span {
    font-size: 2.4rem;
  }

  .fv-point article.fv-pred dl dd span.fv-red-span{
    font-size: 1.8rem;
  }


  .fv-point + p{
    font-size: 1.4rem;
  }


  .fv-newplan ol{
     width: 100%;
  }

  /* --------------------------- 
  FV内 CTA 1600
  ------------------------------ */
  .fv-cta{
    padding: 6rem 0;  
  }

}

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

  /* ポイント 1800  */
  .fv-point-wrap{
    padding: 0;
  }

}