@charset "UTF-8";
/*--------------------------------------------------------
定数
--------------------------------------------------------*/
@media screen and (max-width: 1800px) {
  .area1800 {
    width: 100%;
    margin-left: 0px;
  }
}

@media screen and (max-width: 1600px) {
  .area1600 {
    width: 100%;
    margin-left: 0px;
  }
}

@media screen and (max-width: 900px) {
  .visible900 {
    display: block !important;
  }

  .hidden900 {
    display: none;
  }

  .area900 {
    width: 100%;
  }

  .center_img2 {
    margin-left: 0px;
  }

  .break_900:after {
    content: "\A";
    white-space: pre;
  }
  .start {
  position: absolute;
  top: 0;
  left: 0%;
    transform: translateX(-0%);
    -webkit-transform: translateX(-0%);
    -ms-transform: translateX(-0%);
  }
}

@media screen and (max-width: 800px) {
  .visible800 {
    display: block !important;
  }

  .hidden800 {
    display: none;
  }

  .area800 {
    width: 100%;
  }

  .center_img {
    margin-left: 0px;
  }

  .break_800:after {
    content: "\A";
    white-space: pre;
  }

  /*--------------------------------------------------------
  margin・padding系の部分は設定するwidthで変わる。テンプレートの場合は800pxで設定しているのでここに記載。
  900pxの場合は上の @media screen and (max-width: 900px) の中に記載する。
  --------------------------------------------------------*/
  .ml20p {
    margin-left: 4%;
  }

  .mt10p {
    margin-top: 3%;
  }

  .mt20p {
    margin-top: 4%;
  }

  .mt30p {
    margin-top: 5%;
  }

  .mt40p {
    margin-top: 6%;
  }

  .mt50p {
    margin-top: 7%;
  }

  .mt60p {
    margin-top: 8%;
  }

  .mt70p {
    margin-top: 9%;
  }

  .mt80p {
    margin-top: 10%;
  }

  .mt90p {
    margin-top: 11%;
  }

  .mt100p {
    margin-top: 12%;
  }

  .mt200p {
    margin-top: 22%;
  }

  .mt500p {
    margin-top: 52%;
  }

  .mt1000p {
    margin-top: 120%;
  }
  .mt2000p {
  margin-top: 250%;
  }

  .pt10p {
    padding-top: 3%;
  }

  .pt20p {
    padding-top: 4%;
  }

  .pt30p {
    padding-top: 5%;
  }

  .pt40p {
    padding-top: 6%;
  }

  .pt50p {
    padding-top: 7%;
  }

  .pt60p {
    padding-top: 8%;
  }

  .pt70p {
    padding-top: 9%;
  }

  .pt80p {
    padding-top: 10%;
  }

  .pt90p {
    padding-top: 11%;
  }

  .pt100p {
    padding-top: 12%;
  }

  .pb100p {
    padding-bottom: 12%;
  }

  .pb200p {
    padding-bottom: 22%;
  }

  .pb300p {
    padding-bottom: 32%;
  }
  .checkbox label span.txt  {
    font-size: 30px;
  }
  .confi-name {
    font-size: 30px;
  }
  .pp-notice, .pay-notice, .ginfuri {
    font-size: 20px;
  }
}

@media screen and (max-width: 600px) {
  .hidden600 {
    display: none;
  }

  .visible600 {
    display: block;
  }

  .break_600:after {
    content: "\A";
    white-space: pre;
  }
  .checkbox label span.txt  {
    font-size: 25px;
  }
  .confi-name {
    font-size: 25px;
  }
    .pp-notice, .pay-notice, .ginfuri {
    font-size: 15px;
  }
}


/*--------------------------------------------------------
各種設定
--------------------------------------------------------*/

@media screen and (max-width: 900px) {
  .popup_text {
    font-size: 1.8vw;
  }
  video {
    width: 100%;
  }
  .video {
    width: 100%;
  }
.drfs_hidari, .drfs_migi {
width: 12.8vw;
}
.animate-slide-right {
  transform: translateX(50%);
}

  body {
    min-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .inner .title {
    font-size: 1.4em;
    padding-bottom: 0.2em;
  }

  .field {
    font-size: 1.2em;
  }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select {
    border: 2px solid #64e2be;
  }

  .info_txt {
    font-size: 23px;
  }

  .kiyaku {
    font-size: 30px;
  }

  .white_box.lawtext>div {
    height: 13em;
  }

  .modoru {
    font-size: 23px;
  }

  .pay_btn {
    width: 100%;
  }
  .close_btn {
  width: 14.1%;
  right: 0;
  }
}

@media screen and (max-width: 600px) {
  .info_txt {
    font-size: 20px;
  }

  .kiyaku {
    font-size: 25px;
  }

  .checkbox {
    font-size: 18px;
    margin-left: 8%;
  }
  .slick-dots li button:before {
    font-size: 13px !important;
  }
  .slick-dotted.slick-slider {
    margin-bottom: 15px !important;
}
}

@media screen and (max-width: 500px) {
  .inner .title {
    font-size: 1.2em;
  }

  .field {
    font-size: 1em;
  }

  .info_txt {
    font-size: 18px;
  }

  .kiyaku {
    font-size: 22px;
  }

  .checkbox {
    font-size: 17px;
  }

  .modoru {
    font-size: 18px;
  }

  .err_msg2 {
    font-size: 0.9em;
  }

  .white_box.lawtext>div {
    height: 11em;
  }

  .white_box p {
    font-size: 14px;
  }

  .checkbox label input:checked+span.txt::after {
    left: -1em;
    border-bottom: 2px solid #3cbf97;
    border-right: 3px solid #3cbf97;
    top: 4%;
  }


  .checkbox label span.txt  {
    font-size: 21px;
  }
  .confi-name {
    font-size: 22px;
  }
  .pp-notice, .pay-notice, .ginfuri {
    font-size: 13px;
  }
}
@media screen and (max-width: 400px) {
  .checkbox label span.txt  {
    font-size: 20px;
  }
}
@media screen and (max-width: 380px) {
  .info_txt {
    font-size: 17px;
  }

  .kiyaku {
    font-size: 20px;
  }

  .checkbox {
    font-size: 14px;
  }

  .err_msg2 {
    font-size: 0.8em;
  }
  .white_box.lawtext>div {
    height: 9em;
  }
  .slick-dots li button:before {
    font-size: 10px !important;
  }
    .checkbox label span.txt  {
    font-size: 19px;
  }
}

@media screen and (min-width: 1130px) {
    .video {
        top: 16.1%;
    }
}