@charset "UTF-8";

body,
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
form,
input,
button,
textarea,
p,
th,
td {
  margin: 0;
  padding: 0;
}

html {
  overflow: auto;
}

body {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
  font-weight: 400;
}

input {
  font-family: 'Noto Sans JP', sans-serif;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: none;
}

a img {
  border-style: none;
}

img {
  vertical-align: bottom;
}

button {
  font-size: 1em;
  background-color: transparent;
  border: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

*:focus {
  outline: none;
}

button:hover {
  cursor: pointer;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* body::-webkit-scrollbar {
  width: 15px;
}

body::-webkit-scrollbar-thumb {
  background: #ffff00;
}

body::-webkit-scrollbar-track {
  background: #F1F8FF;
} */

.noselect {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE/Edge */
}
/*--------------------------------------------------------
サイト毎に変化のある定数
--------------------------------------------------------*/

.contents800 {
  width: 800px;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.contents1600 {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.op0 {
  opacity: 0;
}

.img_center {
  margin-left: -400px;
}

/*--------------------------------------------------------
定数
--------------------------------------------------------*/

.c {
  text-align: center !important;
}

.cm {
  margin-left: auto;
  margin-right: auto;
}

.b {
  font-weight: bold;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt50 {
  margin-top: 50px;
}

.mt100 {
  margin-top: 100px;
}

.mt200 {
  margin-top: 200px;
}

.mt300 {
  margin-top: 300px;
}

.mt600 {
  margin-top: 600px;
}

.mb100 {
  margin-bottom: 100px;
}

.ml50 {
  margin-left: 50px;
}

.pt50 {
  padding-top: 50px;
}

.pt100 {
  padding-top: 100px;
}

.pb50 {
  padding-bottom: 50px;
}

.pb100 {
  padding-bottom: 100px;
}

.pb200 {
  padding-bottom: 200px;
}

.pb400 {
  padding-bottom: 400px;
}

.visible800 {
  display: none !important;
}

.relative {
  position: relative;
}

.z1 {
  z-index: +1;
}

.z2 {
  z-index: +2;
}

.z3 {
  z-index: +3;
}

.z99 {
  z-index: +9999;
}

/*横幅*/

.w100 {
  width: 100%;
}

.w95 {
  width: 95%;
}

.w90 {
  width: 90%;
}

.w80 {
  width: 80%;
}

.w75 {
  width: 75%;
}

.w70 {
  width: 70%;
}

.w60 {
  width: 60%;
}

.w50 {
  width: 50%;
}

.inline_b {
  display: inline-block;
}

.justify {
  text-align: justify;
  text-justify: inter-ideograph;
}

.pointer_evNone {
  pointer-events: none;
}

.pointer {
  cursor: pointer;
}

.span span {
  display: inline-block;
}

main,
article,
aside,
nav,
header,
footer,
img,
button,
picture,
picture source {
  display: block;
}

body {
  /*iphone用*/
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*--------------------------------------------------------
定数 ※個別設定
--------------------------------------------------------*/
.back_green {
  background-color: #00b48f;
}

.back_dark_green {
  background-color: #003a00;
}

/*--------------------------------------------------------
フッター
--------------------------------------------------------*/
footer {
  background-color: #003a00;
  color: #fff;
}

.copyright {
  font-size: 16px;
  padding: 10px 0;
  text-decoration: none;
}


/*--------------------------------------------------------
各種レイアウト
--------------------------------------------------------*/
.menu_box_wrapper {
  margin-top: -30%;
}

.menu_box_wrapper > div:not(:last-child) {
  margin-bottom: 2%;
} 

.menu_box {
  display: grid;
  position: relative;
  width: 95%;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.menu_box_close,
.menu_box_open {
  grid-area: 1 / 1;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu_box_close.is_show,
.menu_box_open.is_show {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.menu_box_open {
  position: relative;
}

.close_area {
  display: block;
  position:absolute;
  top: 0;
  width: 100%;
  height: 152px;
  z-index: 1;
  cursor: pointer;
}

.menu_class01,.menu_class02,.menu_class03,.menu_class04,.menu_class05,.menu_class06,.menu_class07,.menu_class08,.menu_class09,.menu_class10 {
  position: absolute;
  cursor: pointer;
}

.menu_class01 {
  top: 28.5%;
}

.menu_class02 {
  top: 59%;
}

.menu_class03 {
  top: 90%;
}

.menu_class04 {
  top: 29.5%;
}

.menu_class05 {
  top: 61%;
}

.menu_class06 {
  top: 92.5%;
}

.menu_class07 {
  top: 23%;
}

.menu_class08 {
  top: 47.2%;
}

.menu_class09 {
  top: 71.3%;
}

.menu_class10 {
  top: 95.3%;
}


.plan_area {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.list dl {
  position: relative;
  height: auto;
  overflow: hidden;
  /* 必須: 高さアニメーション時の視覚的な乱れを防ぐ */
}

.icon {
  position: absolute;
  top: 0;
  cursor: pointer;
  z-index: 999;
  width: 100%;
  height: 115px;
}

.list dl dd {
  position: absolute;
  display: none;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.as_b10,
.as_b14 {
  position: absolute;
  top: 30.7%;
  left: 50%;
  transform: translate(-50%);
}

.as_b11,
.as_b15 {
  position: absolute;
  top: 62.3%;
  left: 50%;
  transform: translate(-50%);
}

.as_b12,
.as_b16 {
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translate(-50%);
}


.as_b18 {
  position: absolute;
  top: 23.3%;
  left: 50%;
  transform: translate(-50%);
}

.as_b19 {
  position: absolute;
  top: 47.3%;
  left: 50%;
  transform: translate(-50%);
}

.as_b20 {
  position: absolute;
  top: 71.4%;
  left: 50%;
  transform: translate(-50%);
}

.as_b21 {
  position: absolute;
  bottom: 1.9%;
  left: 50%;
  transform: translate(-50%);
}

.flex {
  display: flex;
  align-items: center;
}

#plan_amount_view,
#plan_support_view {
  display: none;
}

/*--------------------------------------------------------
form
--------------------------------------------------------*/
.required {
  color: #ff6451;
  font-size: 16px !important;
  position: absolute;
  right: 0;
}

.form_area {
  width: 100%;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0 50px;
  background-color: #fff;
}

.midashi {
  font-size: 30px;
  color: #fff;
  background-color: #00415a;
  border-radius: 50px;
  display: inline-block;
  position: absolute;
  top: -2.5%;
  left: 50%;
  transform: translate(-50%);
  padding: 2% 0% 2.5%;
  width: 450px;
  text-align: center;
}

.err_msg {
  font-size: 1.3em;
  color: #ff6451;
  margin: 0.3em 0em 0 0em;
}

input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s !important;
}

/* input::placeholder {
  color: #333;
} */

/* IE11 & IE10 */
/* input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #b1b1b1;
} */

/* Edge */
/* input::-ms-input-placeholder {
  color: #b1b1b1;
} */

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select {
  width: 100%;
  border: 2px solid #727272;
  border-radius: 5px;
  font-size: 1.3em;
  padding: 1em 1.2em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #333!important;
  /* -webkit-text-fill-color: #333 !important; */
  text-align: left !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.form_fi {
  margin-bottom: 4%;
}

.form_in {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.form_in .title {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 30px;
  margin-bottom: 5px;
  padding-bottom: 0.2em;
  padding-left: 5px;
  font-size: 1.6em;
  color: #333;
  border-left: 4px solid #00b48f;
}

button {
  background-color: transparent;
  border: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
  font-size: 1em;
}

button:focus,
input:focus,
select:focus,
textarea:focus,
section:focus,
main:focus,
article:focus,
nav:focus,
header:focus,
footer:focus,
div:focus,
a:focus {
  outline: none;
}

button:hover {
  cursor: pointer;
}

input[type="radio"] {
  display: none;
}


/*--------------------------------------------------------
//check
--------------------------------------------------------*/
.check_item {
  display: flex;
  align-items: center;
  position: relative;
}

.check_item_title {
  flex: 1;
  font-size: 25px;
  font-weight: bold;
  color: #608460;
  padding-left: 5px;
}

.check_item_title.check_item_title__line {
  border-left: 4px solid #00b48f;
}

.check_item_text {
  flex: 1;
  font-size: 25px;
}

.count_box {
  flex: 1;
}

.count_box input {
  padding: 0.2em 0.2em;
  text-align: center !important;
}

.check_contents {
  max-width: 740px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 45px 20px 70px;
  background-color: #fafafa;
  border: 2px solid #333;
}

.flex_in {
  display: flex;
}

.check_area1_text {
  font-size: 23px;
  color: #000;
  width: 50%;
}

.check_area1_plan {
  font-size: 23px;
  width: 50%;
}

.check_item_couter {
  display: flex;
  justify-content: start;
  align-items: center;
  color: #000;
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translate(0, -50%);
  width: 120px;
}

.check_item_couter p {
  font-size: 23px;
  margin-right: 10px;
}

.check_contents_hr {
  display: block;
  width: 97%;
  border: solid 1px #333;
  margin-top: 20px;
  margin-bottom: 20px;
}

.information_area {
  max-width: 740px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: solid 2px #000;
  padding: 45px 40px 70px;
}

.information_area .ch_txt3 {
  font-size: 25px;
  display: flex;
  justify-content: start;
  color: #000;
  margin-top: 20px;
}

.information_area .ch_txt3 div {
  width: 50%;
}

.note_text {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  color: #fff;
}

.ch_txt5 {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
}

.word_b {
  word-break: break-all;
}

.ch_midashi {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 30px;
  background-color: #000;
  color: #fff;
  padding: 15px 20px 15px;
  border-radius: 15px 15px 0 0
}

.ch_midashi_txt {
  font-size: 25px;
}

.white_box {
  background-color: #fff;
  max-width: 740px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #333;
}

.white_box2 {
  padding: 70px 40px 95px;
  background-color: #fff;
  max-width: 740px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #333;
}

.white_box>div {
  height: 18em;
  overflow-y: scroll;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll::-webkit-scrollbar {
  width: 20px;
}

.scroll::-webkit-scrollbar-thumb {
  background: #ffff00;
}

/*チェックボックス*/
.checkbox {
  display: flex;
  justify-content: center;
  font-size: 22px;
}

.checkbox label {
  position: relative;
  display: block;
  cursor: pointer;
  width: auto;
  margin-right: 0.5em;
  margin-left: 0.5em;
  width: 100%;
}

.checkbox label span.txt {
  display: inline-block;
  line-height: 1.3;
  position: relative;
  color: #fff;
}

.checkbox label input {
  display: none;
}

.checkbox label input+span.txt::before {
  content: "";
  display: block;
  background: inherit;
  width: 1em;
  height: 1em;
  box-shadow: none;
  margin-right: 0.7em;
  position: absolute;
  left: -1.5em;
  border: 2px solid #fff;
  top: 55%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.checkbox label input:checked+span.txt::after {
  position: absolute;
  display: block;
  content: "";
  left: -0.9em;
  width: 0.4em;
  height: 1.3em;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(45deg);
  border-bottom: 4px solid #ffff00;
  border-right: 3px solid #ffff00;
  top: -30%;
}

.err_msg2 {
  font-size: 1.2em;
  color: #ff6451;
  border-radius: 0.3em;
  margin: 0.5em 0em 0 0em;
}

.support_day {
  position: absolute;
  left: 28%;
  top: 48%;
  transform: translate(0, -50%);
  font-size: 30px;
  color: #333;
}

/* --------------------------------------------------------
//law
-------------------------------------------------------- */
.law img {
  width: 100%;
}

.law .header {
  max-width: 720px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.law .contents {
  max-width: 720px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #333;
}

@media screen and (max-width: 800px) {
  .check_contents {
    padding: 6.5% 4% 9%;
    width: 95%;
  }

  .count_box input {
    padding: 0.2em;
  }

  .plan_img {
    width: 100%;
  }

  .check_contents_hr {
    margin-top: 4%;
    margin-bottom: 4%;
  }

  .information_area {
    padding: 6.5% 6% 10%;
    width: 95%;
  }

  .check_item_couter p {
    margin-right: 6%;
  }

  .support_day {
    font-size: 3.7vw;
  }

  .white_box2 {
    padding: 8.5% 6% 12%;
    width: 95%;
  }

  .ch_midashi {
    font-size: 25px;
  }

  .ch_midashi_txt {
    font-size: 22px;
  }

  .white_box {
    width: 95%;
  }

  .contents_header {
    max-width: 740px;
    width: 95%;
  }
}

@media screen and (max-width: 700px) {
  .check_item_title,.check_item_text {
    font-size: 22px;
  }

  .check_item_couter p {
    font-size: 20px;
  }

  .payment_area_text {
    font-size: 20px;
  }

  .check_item_couter {
    width: 90px;
  }

  .count_box input {
    padding: 0.2em;
  }

  .information_area .ch_txt3 {
    font-size: 20px;
  }

  .note_text {
    font-size: 17px;
  }

  .checkbox {
    font-size: 20px;
  }

  .err_msg2 {
    font-size: 1em;
  }

  .ch_txt5 {
    font-size: 17px;
  }
}

@media screen and (max-width: 600px) {
  .ch_txt {
    font-size: 25px;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .check_item_title,.check_item_text {
    font-size: 19px;
  }

  .count_box input {
    padding: 0.2em;
  }

  /* .check_item_couter {
    position: unset;
    transform: translate(0);
  } */

  .check_item_couter {
    width: 75px;
  }

  .check_item_couter p {
    font-size: 17px;
  }

  .payment_area_text {
    font-size: 18px;
  }

  .check_contents_hr {
    border: solid 1px #00415a;
  }

  .information_area .ch_txt3 {
    font-size: 18px;
    margin-top: 4%;
  }

  .note_text {
    font-size: 16px;
  }

  .checkbox {
    font-size: 18px;
  }

  .ch_txt5 {
    font-size: 15px;
  }

  .ch_midashi {
    font-size: 20px;
  }

  .ch_midashi_txt {
    font-size: 18px;
  }
}

@media screen and (max-width: 500px) {
  .ch_txt {
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .check_item_title,.check_item_text {
    font-size: 17px;
  }

  .check_area1_text,
  .check_area1_plan {
    font-size: 16px;
  }

  .check_item_couter p {
    font-size: 17px;
    margin-right: 5%;
    margin-top: 1%;
  }

  .count_box input {
    padding: 0.2em !important;
  }

  .payment_area_text {
    font-size: 16px;
  }

  .information_area .ch_txt3 {
    font-size: 16px;
  }

  .note_text {
    font-size: 15px;
  }

  .ch_txt5 {
    font-size: 14px;
  }

  .err_msg2 {
    font-size: 0.9em;
  }

  .white_box>div {
    height: 10em;
  }
}

@media screen and (max-width: 450px) {
  .ch_txt {
    font-size: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .check_item_title,.check_item_text {
    font-size: 16px;
  }

  .check_item_couter {
    width: 60px;
    right: 0%;
  }

  .check_item_couter p {
    font-size: 15px;
    margin-top: 2%;
  }

  .count_box input {
    padding: 0.2em;
  }

  .payment_area_text {
    font-size: 15px;
  }

  .information_area .ch_txt3 {
    font-size: 15px;
  }

  .note_text {
    font-size: 14px;
  }

  .ch_txt5 {
    font-size: 13px;
  }

  .checkbox {
    font-size: 16px;
  }

  .err_msg2 {
    font-size: 0.8em;
  }

  .ch_midashi {
    font-size: 17px;
  }

  .ch_midashi_txt {
    font-size: 14px;
  }
}

@media screen and (max-width: 400px) {
  .count_box input {
    padding: 0.2em !important;
  }
}

@media screen and (max-width: 390px) {
  .check_item_title,.check_item_text {
    font-size: 14px;
  }

  .payment_area_text {
    font-size: 12px;
  }

  .information_area .ch_txt3 {
    font-size: 12px;
  }

  .check_area1_text,
  .check_area1_plan {
    font-size: 12px;
  }

  .check_item_couter {
    right: 0%;
    width: 65px
  }

  .check_item_couter p {
    font-size: 12px;
  }

  .count_box {
    margin-top: -2%;
  }

  .count_box input {
    padding: 0.2em 0em;
  }

  .note_text {
    font-size: 12px;
  }

  .ch_txt5 {
    font-size: 12px;
  }

  .checkbox {
    font-size: 14px;
  }

  .err_msg2 {
    font-size: 0.7em;
  }

  .white_box>div {
    height: 8em;
  }
}

/*--------------------
ポップアップ
--------------------*/
.popup {
  opacity: 0;
  visibility: hidden;
  z-index: 99999;
  position: fixed;
  top: -10px;
  left: 0;
  right: 0;
  bottom: -10px;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.popup .in {
  width: 95%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 100px;
}

.popup .container {
  margin-left: auto;
  margin-right: auto;
}

.popup .more {
  width: 100%;
  max-width: 600px;
  -webkit-transition: margin 1s ease;
  -moz-transition: margin 1s ease;
  -ms-transition: margin 1s ease;
  -o-transition: margin 1s ease;
  transition: margin 1s ease;
  border: none;
}

.popup .more .tx>div {
  padding-bottom: 1em;
}

.popup .more .tx>div:last-child {
  padding-bottom: 0;
}

.popup.is-show {
  opacity: 1;
  visibility: visible;
}

.popup .scm_popup_btn {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
}

.popup_text {
  font-size: 16px;
  position: absolute;
  bottom: 7.5%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  width: 100%;
}

.close_btn {
  width: 100%;
  text-align: right;
}

.close_btn img {
  margin-left: auto;
  cursor: pointer;
}

.as_popup_01 {
  width: 100%;
}

.as_popup_01 img {
  width: 100%;
}