@charset "UTF-8";
/* CSS Document */

/*mv [
----------------------------------------------------------- */
.mv{}

/* for PC*/
@media print, screen and (min-width:768px) {
  .mv{}
}

/*intro [
----------------------------------------------------------- */
.intro{}

/* for PC*/
@media print, screen and (min-width:768px) {
  .intro{}
}

/*about [
----------------------------------------------------------- */
.about{}

.about ol{}
.about ol li{
  position: relative;
  padding: 0 25px 30px 25px;
}
.about ol li + li{
  margin: 30px 0 0 0;
}
.about ol li *{
  position: relative;
}
.about ol li::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: 100%;
  height: calc(100% - 60px);
  background: rgba(84,173,241,0.2);
  border: 1px solid #54adf1;
  border-radius: 8px;
  transform: translate(-50%,0);
}
.about ol li figure{
  max-width: 100px;
  margin: 0 auto;
}
.about ol li h3{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5em 0 1.0em 0;
  font-size: clamp(calc(20px * 0.7), calc(20vw / 3.75), 20px);/*20 / 24*/
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.about ol li h3 span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  background: #0e69a0;
  color: #fff;
  border-radius: 50%;
  font-size: clamp(calc(18px * 0.7), calc(18vw / 3.75), 18px);/*18 / 20*/
  line-height: 1.0;
}
.about ol li p{
  margin-bottom: 0;
}

/* for PC*/
@media print, screen and (min-width:768px) {
  .about{}

  .about ol{
    display: flex;
    justify-content: space-between;
  }
  .about ol li{
    width: calc((340 / 1080) * 100%);
    padding: 0 3% 40px 3%;
  }
  .about ol li + li{
    margin-top: 0;
  }
  .about ol li *{}
  .about ol li::before{
    height: calc(100% - 60px);
  }
  .about ol li figure{
    max-width: 100px;
  }
  .about ol li h3{
    font-size: clamp(calc(24px * 0.7), calc(24vw / 11.00), 24px);/*20 / 24*/
  }
  .about ol li h3 span{
    width: 36px;
    height: 36px;
    font-size: clamp(calc(20px * 0.7), calc(20vw / 11.00), 20px);/*18 / 20*/
  }
}


/*detail [
----------------------------------------------------------- */
.detail{
  background: #f4f3ef;
}
.detail dl{}
.detail dl dt,
.detail dl dd{
  text-align: left;
}
.detail dl dt{
  position: relative;
  margin: 20px 0 0 0;
  padding: 0 0 0 35px;
  font-size: clamp(calc(18px * 0.7), calc(18vw / 3.75), 18px);/*18 / 20*/
  line-height: 1.6;
}
.detail dl dt span{
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  background: #0e69a0;
  color: #fff;
  border-radius: 50%;
  font-size: clamp(calc(18px * 0.7), calc(18vw / 3.75), 18px);/*18 / 20*/
  line-height: 1.0;
}
.detail dl dd{
  margin: 10px 0 0 0;
  padding: 0 0 20px 0;
  border-bottom: 1px dotted #bbb;
}
/* for PC*/
@media print, screen and (min-width:768px) {
  .detail{}
  .detail dl{}
  .detail dl dt,
  .detail dl dd{}
  .detail dl dt{
    margin-top: 30px;
    padding-left: 50px;
    font-size: clamp(calc(20px * 0.7), calc(20vw / 11.00), 20px);/*18 / 20*/
  }
  .detail dl dt span{
    top: -2px;
    width: 40px;
    height: 40px;
    font-size: clamp(calc(20px * 0.7), calc(20vw / 11.00), 20px);/*18 / 20*/
  }
  .detail dl dd{
    margin-top: 20px;
    padding-bottom: 30px;
  }
}


/*flow [
----------------------------------------------------------- */
.flow{}
.flow .scroll{
  overflow-x: auto;
  padding-bottom: 20px;
  
}
.flow .scroll figure{
  width: 200vw;
}
/* for PC*/
@media print, screen and (min-width:768px) {
  .flow{}
  .flow .scroll{
    overflow-x: hidden;
    padding-bottom: 0;

  }
  .flow .scroll figure{
    width: 100%;
  }
}

/*price [
----------------------------------------------------------- */
.price{
  background: #f4f3ef;
}
.price .scroll{
  overflow-x: auto;
  margin: 5px 0 0 0;
  padding-bottom: 20px;
}
.price table{
  width: 200vw;
  border: 1px solid #777;
  border-collapse: collapse;
}
.price table tr:nth-of-type(2n+1){
  background: #d9ecf4;
}
.price table tr:nth-of-type(2n){
  background: #fff;
}
.price table th,
.price table td{
  padding: 0.3em;
  border: 1px solid #777;
  font-size: clamp(calc(16px * 0.7), calc(16vw / 3.75), 16px);/*16 / 20*/
  text-align: center;
}
.price table th{
  background: #0e69a0;
  color: #fff;
}
.price table td{}

.price table th .br,
.price table td .br{
  display: block;
}

.price .pd{
  display: flex;
  justify-content: center;
  align-items: center;
}
.price .pd p,
.price .pd p strong{
  line-height: 0;
  font-weight: 700;
}
.price .pd .pd01{
  position: relative;
  font-size: clamp(calc(20px * 0.7), calc(20vw / 3.75), 20px);/*20 / 30*/
}
.price .pd .pd01::before,
.price .pd .pd01::after{
  content: "";
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  height: 4px;
  background: #c00;
}

.price .pd .pd01::before{
  transform: rotate(20deg) translate(-50%,0);
  transform-origin: 0 0;
}
.price .pd .pd01::after{
  transform: rotate(-20deg) translate(-50%,0);
  transform-origin: 0 0;
}

.price .pd .pd02{
  color: #c00;
  font-size: clamp(calc(30px * 0.7), calc(30vw / 3.75), 30px);/*30 / 50*/
}
.price .pd p strong{
  font-size: 200%;
}

.price .pd .arrow{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 46px;
  margin: 0 5px 0 10px;
  color: #fff;
  text-align: center;
  font-size: clamp(calc(14px * 0.7), calc(14vw / 3.75), 14px);/*14 / 30*/
  line-height: 1.4;
}
.price .pd .arrow > span{
  position: relative;
  margin-left: -0.5em;
  text-align: left;
  line-height: 1.2;
  z-index: 2;
}
.price .pd .arrow::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: calc(100% - 20px);
  height: 100%;
  background: #c00;
  transform: translate(0,-50%);
  z-index: 1;
}
.price .pd .arrow::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 22px solid #c00;
  border-right: none;
  transform: translate(0,-50%);
  z-index: 1;
}


/* for PC*/
@media print, screen and (min-width:768px) {
  .price{}
  .price .scroll{
    overflow-x: hidden;
    margin-top: 0;
    padding-bottom: 0;
  }
  .price table{
    width: 100%;
  }
  .price table th,
  .price table td{
    padding: 0.5em;
    font-size: clamp(calc(20px * 0.7), calc(20vw / 11.00), 20px);/*16 / 20*/
  }
  .price table th{}
  
  .price table th .br,
  .price table td .br{
    display: inline-block;
  }
  
  .price .pd{}
  .price .pd p,
  .price .pd p strong{}
  .price .pd .pd01{
    font-size: clamp(calc(30px * 0.7), calc(30vw / 11.00), 30px);/*20 / 30*/
  }
  .price .pd .pd01::before,
  .price .pd .pd01::after{
    height: 6px;
  }

  .price .pd .pd01::before{}
  .price .pd .pd01::after{}

  .price .pd .pd02{
    font-size: clamp(calc(50px * 0.7), calc(50vw / 11.00), 50px);/*30 / 50*/
  }
  .price .pd p a{
    font-size: 200%;
    font-weight: 700;
  }

  .price .pd .arrow{
    width: 180px;
    height: 60px;
    margin: 0 10px 0 20px;
    font-size: clamp(calc(20px * 0.7), calc(20vw / 11.00), 20px);/*14 / 20*/
    text-align: center;
    line-height: 1.0;
  }
  .price .pd .arrow > span{}
  .price .pd .arrow::before{
    width: calc(100% - 36px);
  }
  .price .pd .arrow::after{
    border-top-width: 46px;
    border-bottom-width: 46px;
    border-left-width: 36px;
  }
}