@charset "UTF-8";

/* =========================================================
  #grow_curve_iframe
========================================================= */
#grow_curve_iframe img { width: 100%; }
#grow_curve_iframe { position: relative; margin: 0px auto 0; }
#grow_curve_iframe .inner { max-width: 1200px; margin: 0 auto; border-radius: 10px; padding: 20px; background-color: #edfaff; }
.top_content { margin: 5px 0 25px 10px; display: flex; align-items: flex-start; justify-content: space-between; }
.top_content .left_content p { margin: 15px 0 0 0; font-size: 1.6rem; }
.top_content .right_content { display: flex; align-items: center; justify-content: left; width: 321px; margin-top: 10px;}
.top_content .right_content .btn { margin: 0 0 0 30px; color: #0bb0ed; }
.w140 { max-width: 140px; width: 100%; }
.content_title { width: 102px; font-size: 1.6rem; padding: 0 0 0 10px; background-color: #FFF; border: none; }
.content_box_main { margin: 30px auto 0; width: 86%; }
.content_box_main p { font-size: 1.4rem; }
.inner_box { background-color: #FFFF; border-radius: 10px; padding: 30px; }
form fieldset { display: flex; align-items: center; justify-content: left; }
dl { padding: 14px 0; display: flex; align-items: flex-start; justify-content: left; align-items: center; border-bottom: 1px solid #E5E5E5; }
dl:first-of-type { padding: 0 0 14px 0; }
dt { width: 94px; font-weight: normal; }
dd ul { display: flex; align-items: flex-start; justify-content: left; }
dd li { display: flex; align-items: center; justify-content: left; width: 150px; height: 40px; margin: 0; border-radius: 5px; border: solid 1px #e4e4e4; background-color: #f9f9f9; }
dd li:last-of-type { margin: 0 0 0 10px; }
table { width: 100%; table-layout: fixed; margin: 20px auto 0; }
thead th p { width: 92%; height: 30px; border-radius: 5px; background-color: #ecf9fe; text-align: center; margin: 0 auto; font-weight: normal; display: flex; align-items: center; justify-content: center; }
thead tr th { padding: 0 0 10px 0; }
tbody tr { border-bottom: 1px solid #E5E5E5; border-top: 1px solid #E5E5E5; }
tbody tr:last-child { border-bottom: none; }
tbody tr td { padding: 10px 0; }
td { text-align: center; }
.formtext_alpha { text-align: left; width: 92%; height: 40px; border-radius: 5px; border: solid 1px #e4e4e4; background-color: #FFF; font-size: 1.6rem; padding: 5px; }
.form-control { text-align: left; margin: 0; font-size: 1.6rem; padding: 5px; width: 92%; height: 40px; border-radius: 5px; border: solid 1px #e4e4e4; background-color: #f9f9f9; background-image: url('../images/form_select_yazirushi.svg'); background-size: auto; background-position: 90% 55%; background-repeat: no-repeat; }
.form-control-input { text-align: left; font-size: 1.6rem; padding: 5px; width: 92%; height: 40px; border-radius: 5px; border: solid 1px #e4e4e4; background-color: #f9f9f9; }
.flex_content { display: flex; justify-content: space-between; align-items: end; }
.flex_content_inner { display: flex; justify-content: space-between; align-items: end; }
.flex_content_inner.birth_month { margin: 0 20px; }
span { font-size: 1.4rem; display: block; margin-left: 10px; }
.dl_dob .form-control { width: 150px; }
.fr { margin-left: 66px; }
.fr span { margin-left: 0; }

/*radio*/
input[type=radio] { display: none; }
label:focus:before, label:hover:before, label:active:before, input:checked + label:before { border-color: #1F87F9; }
label[for] { width: 100%; height: 100%; padding: 11px 0 0 33px; }
label { font-size: 1em; font-weight: normal; line-height: 1; position: relative; display: block; overflow: hidden; padding: 0 0 0 20px; cursor: pointer; -webkit-transition: all 0.15s ease; transition: all 0.15s ease; white-space: nowrap; }
label:before { position: absolute; top: 12px; left: 13px; width: 14px; height: 14px; content: ''; background: #ffffff; border: 1px solid #BBBBBB; border-radius: 50%; }
input:checked + label:before { border: 4px solid #1F87F9; background: #ffffff; }
input:disabled + label { cursor: not-allowed; color:#000;}
select:disabled, input:disabled {color:#000;opacity: 1; }
/*input:disabled + label { cursor: not-allowed; color: rgba(0, 0, 0, 0.5); }*/
/*input:disabled + label:hover { border-color: rgba(0, 0, 0, 0.1); }*/
/*input:disabled + label:before { border-color: #ffffff; background: #ffffff; }*/

/*submit*/
button, input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background: transparent; }
/* .buttons { display: flex; justify-content: left; align-items: center; } */
.buttons { display: flex; justify-content: center; align-items: center; }
.btn { height: 35px; display: block; text-align: center; margin: 30px 0 0; border-radius: 18px; cursor: pointer; font-size: 1.4rem; }
.more_button , .prev_button { border: solid 1px #d1d1d1; background-color: #f5f5f5; color: #000; }
.sbm_button { margin-left: calc(40% - 170px); }
.w170 { max-width: 170px; width: 100%; }
.w200 { max-width: 200px; width: 100%; }

@media only screen and (max-width:1170px) {
    .content_box_main{width: 100%;}
}

@media only screen and (max-width:1000px) {
    .flex_content{ display: block;}
    .flex_content_inner.birth_month{margin: 10px 0;}
}

@media only screen and (max-width:1280px) {
    #grow_curve_iframe .inner { max-width: inherit;}
}

@media only screen and (max-width:768px){
    #grow_curve_iframe .inner{  width: 100%; margin-top: 0; padding:0 0 1vw 0;border-radius:0;}
    #grow_curve_iframe img{width:89.0666vw; margin: 0 auto; display: block;}
    .top_content { margin: 0; display: block;padding: 10vw 0 0 0;}
    .top_content .left_content p{ margin: 4vw 0 0 0;font-size: 3.733vw; text-align: center;}
    .top_content .right_content{justify-content: space-between; width: 92vw; margin: 10.66vw auto 0;}
    .top_content .right_content .btn{ color: #edfaff; margin:0; order: 1; background-color:inherit; height: auto; padding: 0;font-size: 3.733vw; text-decoration: underline !important;}
    .top_content .right_content .transition{order: 2;font-size: 3.2vw;}
    .w140{max-width: inherit; width: auto;}
    .content_title { width: 100%; font-size: 3.733vw; padding: 0 0 2.66vw 0;}
    .content_box_main{margin: 4.5vw auto 0; width: 100%; }
    .content_box_main p{font-size: 3.2vw; text-align: center;line-height: 1.83;}
    .inner_box{width: 92vw; margin: 4vw auto; padding: 5.33vw 4vw 8vw 4vw;}
    dl { padding: 5.33vw 0; display: block; border-bottom:none;}
    dl.dl_dob{border-bottom: 1px solid #E5E5E5;}
    dl:first-of-type{padding:0;}
    dt { width: 100%; font-weight:normal; }
    dd ul {  justify-content: space-between; }
    dd li {width: 40vw; height: 10.66vw; padding-left: 0;}
    table{ width: 100%; table-layout: fixed; margin: 0 auto;}
    thead{display: none;}
    tbody tr { border-top:none; padding: 5.333vw 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 4vw;}
    tbody tr:first-child{border-top:none;  }
    tbody tr td .sp{font-size: 3.73vw; text-align:left; margin-bottom:2.666vw;padding: 0 0 0 1.5vw;}
    tbody tr td{ padding: 0; width: 100%;}
    tbody tr td:nth-of-type(1){ grid-area: 1 / 1 / 2 / 3; }
    tbody tr td:nth-of-type(1) .form-control{ margin-right: auto;}
    tbody tr td:nth-of-type(2){ grid-area: 1 / 3 / 2 / 5; }
    tbody tr td:nth-of-type(2) .form-control{ margin:0 auto;}
    tbody tr td:nth-of-type(3){ grid-area: 1 / 5 / 2 / 7; }
    tbody tr td:nth-of-type(3) .form-control{ margin-left: auto;}
    tbody tr td:nth-of-type(4){ grid-area: 2 / 1 / 3 / 4; }
    tbody tr td:nth-of-type(4) .form-control-input{ margin-right: auto;}
    tbody tr td:nth-of-type(5){ grid-area: 2 / 4 / 3 / 7; }
    tbody tr td:nth-of-type(5) .form-control-input{margin-left: auto;}
    tbody tr td:nth-of-type(6){ grid-area: 3 / 1 / 4 / 4; }
    tbody tr td:nth-of-type(6) .formtext_alpha{ margin-right: auto;}
    tbody tr td:nth-of-type(7){ grid-area: 3 / 4 / 4 / 7; }
    tbody tr td:nth-of-type(7) .formtext_alpha{margin-left: auto;}
    .formtext_alpha { font-size: 3.733vw; padding: 1.333vw; width: 95%; height: 10.66vw; border-radius:  1.333vw; display: block;}
    .form-control{ font-size: 3.7333vw; padding:  1.333vw; width: 95%; height: 10.66vw;  border-radius: 1.333vw; display: block;}
    .form-control-input {font-size: 3.733vw ; padding: 1.333vw; width: 95%; height: 10.66vw; border-radius: 1.333vw; display: block;}
    .flex_content{ display: flex;}
    .flex_content_inner.birth_month{ margin: 0; }
    span { display: none;}
    .dl_dob .form-control{ width: 26.6666vw;}
    .fr{ margin:2.66vw 0 0 0; text-align: right; justify-content: end; font-size: 3.2vw;}
    .fr span{ margin-left: 0; display: block; }
    /*radio*/
    label[for]{ padding: 3.2vw 0 0 9.866vw;}
    label { font-size: 3.733vw;  padding:0 0 0 20px;}
    label:before { width: 3.733vw; height: 3.733vw; top: 3.2vw; left: 3.73vw;}
    /*submit*/
    .buttons{display: block;}
    .btn {height: 9.33vw; margin: 0 auto; border-radius: 4.8vw;font-size:3.73vw;  }
    .sbm_button{margin:5.333vw auto 0;}
    .w170{max-width: inherit; width: 53.333vw;}
    .w200{max-width: inherit; width: 53.333vw;}
}


/* =========================================================
  #confirm
========================================================= */
.confirm .content_box_main{width: 100%;}
.confirm .dl_dob .form-control{ text-align: left;}
.confirm .formtext_alpha{ text-align: center;}
.confirm select:disabled{ text-align: center;}
/* .confirm tbody tr td:nth-of-type(1) .formtext_alpha{background-color: #f9f9f9;} */
.confirm .form-control-input{ text-align: center;}
.confirm small{ text-align: right; display: block; margin-top:20px; font-size: 1.2rem;}
.confirm .btn{margin-top:0 ;}
.confirm .sbm_button{margin-left: calc(40% - 170px);}
.confirm .form-control{background-image:none;}

@media only screen and (max-width:768px){
    .confirm .formtext_alpha{ text-align: left;}
    .confirm select:disabled{ text-align: left;}
    .confirm .form-control-input{ text-align: left;}
    .confirm tbody tr { display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(4, 1fr);  grid-row-gap: 4vw;}
    .confirm tbody tr:first-child{border-top:none;  }
    .confirm tbody tr td .sp{font-size: 3.73vw; text-align:left; margin-bottom:2.666vw; padding: 0 0 0 1.5vw;}
    .confirm tbody tr td{ padding: 0; width: 100%;}
    .confirm tbody tr td:nth-of-type(1){ grid-area: 1 / 1 / 2 / 7;}
    .confirm tbody tr td:nth-of-type(1) .formtext_alpha{width: 100%;}
    .confirm tbody tr td:nth-of-type(2){ grid-area: 2 / 1 / 3 / 3; }
    .confirm tbody tr td:nth-of-type(2) .form-control{ margin-left:0;}
    .confirm tbody tr td:nth-of-type(3){ grid-area: 2 / 3 / 3 / 5; }
    .confirm tbody tr td:nth-of-type(3) .form-control{ margin:0 auto;}
    .confirm tbody tr td:nth-of-type(4){ grid-area: 2 / 5 / 3 / 7; }
    .confirm tbody tr td:nth-of-type(4) .form-control{ margin-left: auto;}
    .confirm tbody tr td:nth-of-type(5){ grid-area: 3 / 1 / 4 / 4; }
    .confirm tbody tr td:nth-of-type(5) .form-control-input{margin-left:0;}
    .confirm tbody tr td:nth-of-type(6){ grid-area: 3 / 4 / 4 / 7; }
    .confirm tbody tr td:nth-of-type(6) .form-control-input{ margin-left: auto;}
    .confirm tbody tr td:nth-of-type(7){ grid-area: 4 / 1 / 5 / 4; }
    .confirm tbody tr td:nth-of-type(7) .formtext_alpha{ margin-left:0;}
    .confirm tbody tr td:nth-of-type(8){ grid-area: 4 / 4 / 5 / 7; }
    .confirm tbody tr td:nth-of-type(8) .formtext_alpha{ margin-left: auto;}
    .confirm small{ text-align: center; margin-top:0; display: block; font-size: 3.2vw;}
    .confirm .buttons{display: grid; justify-content: center;}
    .confirm .btn{margin:0  auto;}
    .confirm .prev_button{order:2; margin:5.33vw auto 0;}
    .confirm .sbm_button{order: 1; margin:5.33vw auto 0;}
}


/* =========================================================
  #complete
========================================================= */
.complete #grow_curve_iframe .inner_box img{width: auto; margin: 0 auto; display: block;}
.complete .inner_box{padding: 10px 30px 30px 30px;}
.w340 { max-width: 340px; width: 100%; }
.complete .pdf_button{margin: 30px 10px 0 25px;}

@media only screen and (max-width:1000px) {
    .complete .buttons{display: block;}
    .complete .pdf_button{margin: 10px 0 0 0;}
    .complete .btn{ margin: 10px auto 0;}
}

@media only screen and (max-width:768px){
    .complete #grow_curve_iframe .inner_box img{width: 100%;}
    .complete .inner_box{padding: 4vw 4vw 8vw 4vw;}
    .complete .buttons{display: grid; justify-content: center;}
    .complete .btn{ margin: 10px auto 0;}
    .w340 { max-width: inherit; width: 100%; }
    .complete .pdf_button{margin: 5.333vw auto 0; width: 84vw;}
    .complete .pdf_button_dbox{margin: 5.333vw auto 0; width: 84vw;}
    .complete .prev_button{margin: 5.333vw auto 0; order:3;}
}