@charset "utf-8";
/* スマホ
----------------------- */
@media(min-width:481px){
}
/* PC
----------------------- */
@media screen and (max-width: 1748px) {
  .inner{
    min-width: 75%;
  }
}
/* タブレット
----------------------- */
@media all and (max-width: 769px) {
  .inner{
    min-width: 75%;
  }
}
/* スマホ
----------------------- */
@media all and (max-width: 480px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .inner{
    max-width: 90%;
  }
}
/* -----------------------
=========================
【特徴・料金】
========================
----------------------- */

/* 
mainvisual
----------------------- */
#mainV{
  background-image: url(../images/bg.png);
  background-size: contain;
  padding: 80px 0;
}

/* タブレット
----------------------- */
@media screen and (max-width: 768px) {

}

/* スマホ
----------------------- */
@media all and (max-width: 480px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  
}

/* 
料金設定
----------------------- */
#mainV .topPrc{
  font-size: 2.0rem;
}
#mainV .topPrc .flatrateBox{
  text-align: center;
}
#mainV .topPrc .flatrateBox h2{
  width: 100%;
  font-weight: bolder;
  font-size: 4.0rem;
  padding: 0;
}
#mainV .topPrc .flatrateBox h2 span{
  background-image: linear-gradient(transparent 50%, #d4edea 50%);
}
#mainV .topPrc .flatrateBox p:nth-child(2){
  font-size: 3.6rem;
  font-weight: bold;
  color: #8BC9C0;
}
#mainV .topPrc .flatrateBox .flatrate{
  font-size: 10rem;
  font-weight: bold;
  color: #EB5E55;
}
#mainV .topPrc .flatrateBox .flatrate span.comma{
  font-size: 7.0rem;
}
#mainV .topPrc .flatrateBox .flatrate span:nth-child(1){
  color: #333;
  font-size: 4.0rem;
}
#mainV .topPrc .flatrateBox .flatrate span:nth-child(3){
  color: #333;
  font-size: 2.4rem;
}
#mainV .topPrc .flatrateBox p:nth-child(2){
  margin-top: 60px;
}
#mainV .topPrc .flatrateBox div:last-child{
  margin-top: 50px;
}
#mainV .topPrc .PrcDtl{
  margin-top: 65px;
}
#mainV .topPrc .PrcDtl ul{
  margin-top: 30px;
}
/* スマホ
----------------------- */
@media all and (max-width: 480px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  /* 
  mainvisual
  ----------------------- */
    #mainV{
      padding: 80px 0 40px;
    }
    #mainV .topPrc{
      font-size: 1.6rem;
    }
  /* 
  料金設定
  ----------------------- */
  #mainV .topPrc .flatrateBox h2{
    font-size: 2.0rem;
    padding: 0;
    }
  #mainV .topPrc .flatrateBox p:nth-child(2){
    margin-top: 40px;
    font-size: 2.4rem;
  }
  #mainV .topPrc .flatrateBox .flatrate{
    font-size: 3.2rem;
  }
  #mainV .topPrc .flatrateBox .flatrate span:nth-child(1),#mainV .topPrc .flatrateBox .flatrate span:nth-child(3),#mainV .topPrc .flatrateBox .flatrate span.comma{
    font-size: 1.6rem;
  }
  #mainV .topPrc .flatrateBox div:last-child{
    margin-top: 20px;
    text-align: left;
  }
   
  }

/* 
詳細
----------------------- */
.dtlBox .dtllistBox{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}
.dtlBox .dtllistBox > div{
  width: 30%;
  background-color: #FFFBD8;
  padding: 20px 1em;
  min-height: 400px;
}
/*.dtlBox .dtllistBox .plus{
  background:none;
}*/
.dtllist01{
  position: relative;
}
.dtllist01::after{
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url(../images/prod/plus.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  left: calc(100% - -13px);
  top: 175px;
}
.dtllist02{
  position: relative;
}
.dtllist02::after{
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url(../images/prod/plus.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  left: calc(100% - -13px);
  top: 175px;
}
.dtllist01 div:nth-child(1),.dtllist02 div:nth-child(1),.dtllist03 div:nth-child(1){
  /*background: url(../images/prod/dtl01.png) no-repeat center 0 / contain;*/
    width: 40%;
    margin: auto;
}
.dtllist01 div:nth-child(2),.dtllist02 div:nth-child(2),.dtllist03 div:nth-child(2){
  margin-top: 50px;
}
.dtllistBox .dtllistTxt p:first-child{
  font-weight: bold;
  text-align: center;
}
.dtllistBox .dtllistTxt p:last-child{
  margin-top: 20px;
}
.dtlpoint{
  margin-top: 80px;
  background-color: #fffbd8;
  padding: 30px 2em;
  position: relative;
}
.dtlpoint::before{
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  display: inline-block;
  background-image: url(../images/prod/dtl04.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  left: calc(100% - 56%);
  top: -80px;  
}
.dtlpoint .dtlpointCth{
  text-align: center;
  font-size:2.4rem ;
  font-weight: bold;
  letter-spacing: 2px;
}
.dtlpoint .dtlpointCth span{
  color: #EB5E55;
}
.dtlpoint .dtlpointCth span span{
  font-size: 4.0rem;
}
.dtlpoint div{
  width: 80%;
  margin: 20px auto 0
}
/* スマホ
----------------------- */
@media all and (max-width: 480px){
  .dtlBox .dtllistBox{
    display: block;
  }
  .dtlBox .dtllistBox > div{
    width: 100%;
    margin-top: 40px;
    min-height: auto;
  }
  .dtllist01::after{
    left: calc(100% - 55%);
    top: 103%;
  }
  .dtllist02::after{
    left: calc(100% - 55%);
    top: 103%;
  }
  .dtllist01 div:nth-child(2), .dtllist02 div:nth-child(2), .dtllist03 div:nth-child(2) {
    margin-top: 30px;
  }
  .dtlpoint{
    padding: 30px 1em;
  }
  .dtlpoint::before{
    width: 100px;
    height: 100px;
    left: calc(100% - 50% - 50px);
    top: -50px;
  }
  .dtlpoint .dtlpointCth{
    font-size: 1.6rem;
    letter-spacing: 0;
  }
  .dtlpoint .dtlpointCth span span {
    font-size: 2.8rem;
  }
  .dtlpoint div{
    width: 100%;
  }
}
/* 
概要と特徴
----------------------- */
#prod .inner{
  padding: 80px 0;
}
#prod{
  background-color: #8BC9C0;
}
#prod h2{
  width: 100%;
  color: #fff;
  font-size: 4.0rem;
  font-weight: bold;
  padding: 30px 0;
  text-align: center;
  position: relative;
}
#prod h2::before{
  content: '';
  width: 400px;
  height: 4px;
  display: inline-block;
  background-color: #fff;
  position: absolute;
  top: 10px;
  left: calc(50% - 200px);
}
#prod h2::after{
  content: '';
  width: 400px;
  height: 4px;
  display: inline-block;
  background-color: #fff;
  position: absolute;
  bottom:  10px;
  left: calc(50% - 200px);
}
#prod .prodWrap{
  background-color: #fff;
  border-radius: 50px 50px 0 50px;
  padding: 0 0 100px;
  margin-top: 50px;
}
#prod .prodWrap .prodBoxWrap{
  padding: 50px 3em 0;
  text-align: center;
  font-size: 2.0rem;
}
#prod .prodWrap .prodBoxWrap > div{
  margin-top: 50px;
}
#prod .prodWrap h3{
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
}
#prod .prodWrap h3 span{
  background-image: linear-gradient(transparent 50%, #d4edea 50%);
}
#prod .prodWrap .prodBoxWrap .prodBox01 div:nth-child(2){
    width: 70%;
    margin: 30px auto;
}
#prod .prodWrap .prodBoxWrap .prodBox02 p:nth-child(2){
  margin-top: 20px;
}
#prod .prodWrap .prodBoxWrap .prodBox02 .prc{
  margin-top: 50px;
}
#prod .prodWrap .prodBoxWrap .prodBox02 .prc h4{
  font-weight: bold;
  font-size: 2.4rem;
}
#prod .prodWrap .prodBoxWrap .prodBox02 .prc h4 span{
  background-image: linear-gradient(transparent 50%, #FFFE78 50%);
}
#prod .prodWrap .prodBoxWrap .prodBox02 .prc h4 span.h4memo{
  font-size: 2.0rem;
}
#prod .prodWrap .prodBoxWrap .prodBox02 .prc p:last-child span{
  font-size: 1.6rem;
}
#prod .prodWrap .prodBoxWrap .prodBox02 .prc ul{
  width: 40%;
  margin: auto;
  font-size: 1.6rem;
  text-align: left;
}
#prod .prodWrap .prodBoxWrap .prodBox02 .prc ul li{
  text-indent: -1em;
  padding-left: 1em;
}
#prod .prodWrap .prodBoxWrap .prodBox03 p{
  margin-top: 20px;
}
#prod .prodWrap .prodBoxWrap .prodBox04 p{
  margin: 20px auto 25px; 
}
#prod .prodWrap .prodBoxWrap .prodBox05 div:nth-child(2){
  margin: 30px auto 20px;
}
/* PC
----------------------- */
@media screen and (max-width: 1748px) {
 }
/* タブレット
----------------------- */
@media screen and (max-width: 769px) {
  #prod .prodWrap .prodBoxWrap .prodBox02 .prc ul{
    width: 100%;
  }
}
/* スマホ
----------------------- */
@media all and (max-width: 480px){
  #prod .inner{
    padding: 50px 0;
  }
  #prod h2{
    font-size: 2.8rem;
  }
  #prod h2::before{
    width: 200px;
    left: calc(50% - 100px);
  }
  #prod h2::after{
    width: 200px;
    left: calc(50% - 100px);
  }
  #prod .prodWrap{
    padding: 0 0 50px;
  }
  #prod .prodWrap .prodBoxWrap{
    padding: 0 .5em;
    font-size: 1.6rem;
  }
  #prod .prodWrap h3,#prod .prodWrap .prodBoxWrap .prodBox02 .prc h4 {
    font-size: 2.0rem;
  }
  
  #prod .prodWrap .prodBoxWrap > div {
    margin-top: 30px;
  }
  #prod .prodWrap .prodBoxWrap .prodBox01 div:nth-child(2){
    width: 95%;
  }
  #prod .prodWrap .prodBoxWrap .prodBox02 .prc ul{
    width: 100%;
  }
}







/* 

----------------------- */


/* PC
----------------------- */
@media screen and (max-width: 1748px) {

 }

/* タブレット
----------------------- */
@media screen and (max-width: 769px){

}
/* スマホ
----------------------- */
@media all and (max-width: 480px){

}








/* -----------------------
=========================
【】
========================
----------------------- */



/* -----------------------
=========================

========================
----------------------- */

/* タブレット
----------------------- */
@media all and (max-width: 768px) {
  
}
/* スマホ
----------------------- */
@media all and (max-width: 480px){
  
}
/* -----------------------
=========================
BOTTOM申し込み
========================
----------------------- */
#secApp{
  background:url(../images/bg.png) no-repeat center 0 / cover ;
}
/* タブレット
----------------------- */
@media all and (max-width: 768px) {
  
}
/* スマホ
----------------------- */
@media all and (max-width: 480px){
  #secApp{
    padding: 40px 0;
  }
}