@charset "utf-8";

/*========================

form.css

========================*/

/*---------------------------------------------
form
---------------------------------------------*/

/*---------------------------------------------
reset
---------------------------------------------*/
input,
button,
textarea,
select {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 margin: 0;
 margin-right: 0;
 padding: 0;
 background-color: var(--white);
 border: none;
 border-radius: 0;
 font-size: 1em;
 letter-spacing: normal;
 line-height: 1;
 outline: none;
 position: relative;
 max-width: 100%;
 vertical-align: middle;
}

select::-ms-expand {
 display: none;
}

input[type="text"],
input[type="checkbox"],
textarea,
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="submit"] {
 -webkit-appearance: none;
}

select {
 position: relative;
 max-width: 100%;
 outline: none;
 text-overflow: '';
 background: none transparent;
 vertical-align: middle;
 font-size: inherit;
 color: inherit;
 margin: 0 !important;
 padding: 0;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
 border: none;
 border-radius: 0;
 font-size: 1.6rem;
 outline: none;
 background: none;
 border: 1px solid var(--gray_cc);
 border-radius: 3px;
 box-shadow: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 padding: 10px 20px;
 width: 100%;
}

select:hover {
 cursor: pointer;
 /*background-color: var(--white) !important;*/
}

/*---------------------------------------------
select
---------------------------------------------*/
select {
 position: relative;
 max-width: 100%;
 outline: none;
 text-overflow: '';
 background: none transparent;
 vertical-align: middle;
 font-size: inherit;
 color: inherit;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 margin: 0 !important;
 padding: 0;
 background-color:var(--white);
 border: 1px solid var(--gray_cc);
 border-radius: 6px;
 font-size: 1.5rem;
 line-height: 1.6;
 padding: 11px 31px 11px 16px;
 width: 100%;
 position: relative;
 z-index:2;
}

.select:after {
 position: absolute;
 top: 50%;
 right: 10px;
 margin-top: -7px;
 content: '\f107';
 color: var(--gray_dd);
 font-size: 1.3rem;
 font-family: var(--icon);
}

.select_group {
 align-items:center;
 display:flex;
 position: relative;
 z-index: 1;
 width:auto;
}

/*
.select_group:before {
 background-color: var(--gray_51);
 border-radius: 0 6px 6px 0;
 content: " ";
 height: 100%;
 right: 0;
 top: 0;
 position: absolute;
 z-index: 2;
 width: 45px;
}
*/

.select_group:hover:before {
 cursor:pointer;
}

.select_group:after {
 content: "\f078";
 color: var(--gray_cc);
 font-family: var(--icon);
 right: 18px;
 top: 50%;
 margin-top: -6px;
 position: absolute;
 font-size: 1.0rem;
 z-index: 3;
 font-weight: 900;
}

.select_box {
 font-size: 1.6rem;
 padding: 20px 25px 20px 20px;
 border: 1px solid var(--gray_cc);
 border-radius: 4px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 text-overflow: "";
 background-color: transparent;
 margin: 0;
 overflow-x: hidden;
 position: relative;
 width: 100%;
 z-index: 4;
}

option:hover {
 background-color: var(--selectHoverCol);
 color: var(--white);
}

option:checked {
 box-shadow: 0 0 1em 100px var(--selectedCol) inset;
}

.select_group:hover:before {
  background-color: var(--gray_51);
}

.select_group select {
 font-size:1.5rem;
 width:200px;
 z-index:2;
}

/*---------------------------------------------
checkbox
---------------------------------------------*/
.checkbox-input {
 display: none;
}

.checkbox-parts {
 padding-left: 18px;
 position: relative;
 font-size: 1rem;
 display: inline-block;
 text-align: left;
}

.checkbox-parts::before {
 background-color: var(--white);
 border-radius: 2px;
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 15px;
 margin-top: -6px;
 width: 16px;
 height: 16px;
 border: 1px solid var(--gray_cc);
}

.checkbox-parts.left::before {
 left: 0;
}

.checkbox-input:checked+.checkbox-parts {
 background-color: var(--light_blue);
}

.checkbox-input:checked+.checkbox-parts::after {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 20px;
 margin-top: -7px;
 margin-left: 0;
 width: 8px;
 height: 14px;
 transform: rotate(40deg);
 -webkit-transform: rotate(40deg);
 -moz-transform: rotate(40deg);
 border-bottom: 4px solid var(--blue_green);
 border-right: 4px solid var(--blue_green);
}

.checkbox-input:checked+.checkbox-parts.left::after {
 left: 0;
}

/*---------------------------------------------
textarea
---------------------------------------------*/
textarea {
 background-color: var(--white);
 border: 1px solid var(--gray_cc);
 font-size:1.6rem;
 min-height:200px;
 line-height:1.6;
 padding: 5px;
 width: 100%;
}

textarea:disabled {
 background-color: var(--gray_f2);
 border: 1px solid var(--gray_9f);
}

/*---------------------------------------------
text
---------------------------------------------*/
input[type="text"][disabled] {
 background-color: var(--gray_f2);
 border: 1px solid var(--gray_9f);
}

/*---------------------------------------------
radio
---------------------------------------------*/
.radio-input {
 display: none;
}

.radio-parts {
 background-color: var(--white);
 padding-left: 24px;
 position: relative;
 margin-right: 0;
 vertical-align: middle;
 line-height: 1;
 display: inline-block;
}

.radio-parts::before {
 background-color: var(--white);
 content: " ";
 display: block;
 position: absolute;
 top: 50%;
 left: 12px;
 width: 18px;
 height: 18px;
 border: 1px solid var(--gray_cc);
 border-radius: 50%;
 margin-top: -9px;
}

.radio-input:checked + .radio-parts {
 background-color: var(--light_yellow);
 background-color:rgb(254,229,6,0.5);
 font-weight: 600;
}

.radio-input:checked + .radio-parts::after {
 content: " ";
 display: block;
 position: absolute;
 top: 50%;
 left: 16px;
 width: 10px;
 height: 10px;
 background: var(--green);
 border-radius: 50%;
 margin-top: -5px;
}

/*---------------------------------------------
checkbox
---------------------------------------------*/
input[type="checkbox"] + label {
 padding:20px 30px 20px 60px;
 position:relative;
}

input[type="checkbox"] + label:before {
 border: 1px solid var(--gray_cc);
 border-radius: 3px;
 background-color: var(--white);
 content:" ";
 width:18px;
 position:absolute;
 left:20px;
 top:50%;
 margin-top:-9px;
 height:18px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li > input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked + label {
 /*background-color: var(--blue);*/
 background-color:rgb(254,229,6,0.5);
 border-radius: 6px 6px 0 0;
 font-weight:600;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:last-child > input[type="checkbox"]:checked + label {
 border-radius: 0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child > input[type="checkbox"]:checked + label {
 border-radius: 6px 6px 0 0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li > input[type="checkbox"]:checked + label span,
input[type="checkbox"]:checked + label span {
 /*color:var(--white);*/
}

input[type="checkbox"]:checked + label:after {
 content: "\f00c";
 font-size:1.6rem;
 font-weight:600;
 font-family: var(--icon);
 position: absolute;
 left: 22px;
 top: 50%;
 margin-top:-8px;
 color: var(--green);
 font-style: solid;
}

/*---------------------------------------------
form_table
---------------------------------------------*/
#form_table {
 display:flex;
 flex:0 0 100%;
 justify-content:center;
 padding:0;
}

#form_table #form_table_cont {
 border-radius:6px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:0;
}

#form_table #form_table_cont form {
 width:100%;
}

#form_table #form_table_cont > ul {
 border-bottom:1px solid var(--gray_cc);
 display:flex;
 flex-direction:column;
}

#form_table #form_table_cont > ul > li {
 border-top:1px solid var(--gray_cc);
 display:flex;
 flex:0 1 100%;
 flex-direction:column;
 padding:20px 0;
 row-gap:15px;
}

#form_table #form_table_cont > ul > li > dl {
 align-items:start;
 display:flex;
 flex:0 1 100%;
 flex-wrap:wrap;
 justify-content:start;
 row-gap:20px;
 }

#form_table #form_table_cont > ul > li > dl > dt {
 align-items:center;
 display:flex;
 flex:0 0 200px;
 padding-top:15px;
 justify-content:start;
 min-width:180px;
}

#form_table #form_table_cont > ul > li > dl > dt > span:first-child {
 background-color:var(--gray_99);
 border-radius:3px;
 color:var(--white);
 font-size:1.3rem;
 margin-right:10px;
 padding:5px;
}

#form_table #form_table_cont > ul > li > dl > dt > span.nessesary {
 background-color:var(--red);
 flex:0 0 40px;
 text-align:center;
}

#form_table #form_table_cont > ul > li > dl > dt > span.any {
 background-color:var(--green);
}

#form_table #form_table_cont > ul > li > dl > dt > label {
 flex:1;
 font-size:1.5rem;
 font-weight:600;
 line-height:1.6;
 justify-content:start;
}

#form_table #form_table_cont > ul > li > dl > dd {
 align-items:start;
 display:flex;
 flex:1;
 flex-direction:column;
 justify-content:start;
 row-gap:20px;
 padding:0;
 min-width:500px;
 width:100%;
}

#form_table #form_table_cont > ul > li > dl > dd .inline_group {
 align-items:center;
 column-gap:10px;
 display:flex;
 position:relative;
 width:100%;
}

#form_table #form_table_cont > ul > li > dl > dd .inline_group > span {
 font-size:1.5rem;
 z-index:2;
}

#form_table #form_table_cont > ul > li > dl > dd > ol {
 border-top:1px solid var(--gray_cc);
 border-radius: 6px;
 display:flex;
 flex-direction:column;
 width:100%;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li {
 display:flex;
 flex-direction:column;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li > label {
 align-items:center;

 border-right:1px solid var(--gray_cc); 
 border-bottom:1px solid var(--gray_cc);
 border-left:1px solid var(--gray_cc);
 display:flex;
 min-height:58px;
 justify-content:space-between;
 padding:15px 20px 15px 50px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child:not(:first-child),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child > label {
 border-radius: 6px 6px 0 0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:last-child,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:last-child > label {
 border-top:none;
 border-radius: 0 0 6px 6px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child:last-child,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child:last-child > label {
 border-radius: 6px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li > label > span:first-child {
 font-size:1.6rem;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li > label > span:nth-child(2) {
 align-items:flex-end;
 display:flex;
 flex-direction:column;
 font-size:1.1rem;
 row-gap:5px;
 justify-content:center;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li > label span:nth-child(2) span {
 font-size:1.1rem;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail {
 /*background-color:var(--light_blue);*/
 /*background-color:rgb(254,229,6,0.2);*/
 background-color:var(--white);
 border-right:1px solid var(--gray_cc);
 border-bottom:1px solid var(--gray_cc);
 border-left:1px solid var(--gray_cc);
 border-radius:0 0 6px 6px;
 display:flex;
 flex-direction:column;
 padding:15px 20px;
 row-gap:15px;
}

#form_table #form_table_cont > ul > li > dl > dd ol li:first-child .course_detail {
 border-radius:0;
}

#form_table #form_table_cont > ul > li > dl > dd ol li:last-child .course_detail {
 border-radius:0 0 6px 6px;
}

#form_table #form_table_cont > ul > li > dl > dd ol li:first-child:last-child .course_detail {
 border-radius:0 0 6px 6px;
}

#form_table #form_table_cont > ul > li > dl > dd ol li .course_detail dl {
 align-items:center;
 border-bottom:1px dotted var(--gray_cc);
 column-gap:15px;
 display:flex;
 flex-wrap:wrap;
 row-gap:10px;
 padding-bottom:15px;
}

#form_table #form_table_cont > ul > li > dl > dd ol li .course_detail dl:last-child {
 border-bottom:none;
 padding-bottom:0; 
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dt {
 font-size:1.5rem;
 font-weight:600;
 /*width:140px;*/
 width:100%;
 text-align:left;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd {
 display:flex; 
 flex-direction:column;
 flex-grow:1;
 row-gap:10px;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list {
 border:1px solid var(--gray_cc);
 border-radius:6px;
 display:flex;
 justify-content:space-between;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li {
 align-items:center;
 border-left:1px solid var(--gray_cc);
 display:flex;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li label {
 align-items:center;
 font-size:1.5rem;
 display:flex;
 height:100%;
 line-height:1.4;
 padding:10px 15px 10px 50px;
 width:100%;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li:first-child {
 border-left:none;
 border-radius:6px 0 0 6px;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li:first-child,
#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li:first-child label {
 border-radius:6px 0 0 6px;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li:last-child {
 border-radius:0 6px 6px 0;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li:last-child,
#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list li:last-child label {
 border-radius:0 6px 6px 0;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail dl dd .select_list.three li {
 width:calc(100% / 3);
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail .note {
 display:flex;
 flex-direction:column;
 row-gap:5px;
}

#form_table #form_table_cont > ul > li > dl > dd .course_detail .note span {
 display:block;
 font-size:1.2rem;
}


#form_table #form_table_cont > ul > li > dl > dd .pref_auto_input_button a {
 background-color:var(--blue);
 border-radius:6px;
 color:var(--white);
 display:block;
 font-size:1.1rem;
 font-weight:600;
 padding:10px 15px;
}

#form_table #form_table_cont > ul > li > dl > dd .pref_auto_input_button a:hover {
 opacity:0.7;
}


#form_table #form_table_cont ul > li > dl dd input.w15 { width:15%; }
#form_table #form_table_cont ul > li > dl dd input.w20 { width:20%; }
#form_table #form_table_cont ul > li > dl dd input.w30 { width:30%; }
#form_table #form_table_cont ul > li > dl dd input.short { width:60%; }
#form_table #form_table_cont ul > li > dl dd input.middle { width:80%; }
#form_table #form_table_cont ul > li > dl dd input.long { width:100%; }

/*---------------------------------------------
termscheck
---------------------------------------------*/
.termscheck {
 align-items:center;
 display:flex;
 flex-direction:column;
 justify-content: center;
 row-gap:20px;
 margin-top:20px;
 margin-bottom:0;
 overflow:hidden;
 padding:0;
 width:100%;
}

.termscheck dl {
 background-color:var(--gray_f2);
 border-radius:6px;
 display:flex;
 flex-direction:column;
 padding:35px 20px 20px;
 row-gap:20px;
 width:100%;
}

.termscheck dl dt {
 font-size:1.5rem;
 font-weight:600;
 padding:0;
 text-align:center;
}

.termscheck dl dd {
 align-items:center;
 display:flex;
 justify-content: center;
 flex-direction:column;
 padding:0;
 row-gap:15px;
 text-align:center;
}

.termscheck dl dd p {
 text-align:center;
}

.termscheck dl dd label {
 display:inline-block;
 padding:15px 30px 15px 60px;
 width:100%;
}

.termscheck dl dd input[type="checkbox"]:checked + label {
 background-color: var(--green); 
 border-radius:6px;
 color:var(--white);
}

.termscheck .alert {
 width:100%;
}

.agree_btn {
 align-items:center;
 background-color:var(--white);
 border:1px solid var(--gray-dd);
 border-radius:3px;
 display:flex;
 justify-content: center;
 margin:0;
 padding:0;
 text-align:center;
 min-width:200px;
 width:100%;
}

.agree_btn label {
 display:inline-block;
 font-size:1.6rem;
 padding:15px 30px;
 line-height:1.4;
 vertical-align:middle;
}

.agree_btn input[type="checkbox"] + label:after {
 margin-top:-11px;
}

.termscheck dl dd span {
 display:block;
 font-size:1.3rem;
 margin-bottom:10px;
}

.termscheck dl dd span a {
 color:var(--link);
}

#form_table #form_table_cont > .btn_link_area {
 align-items: center;
 border:none;
 column-gap:30px;
 display:flex;
 flex-direction:unset;
 justify-content:center;
}

#form_table #form_table_cont > .btn_link_area li {
 border:none;
 max-width: 250px;
 width:100%;
}

.btn_link_area .send_btn button {
 background-color: var(--blue);
 border: 1px solid var(--blue);
 border-radius: 30px;
 color: var(--white);
 display: inline-block;
 text-align: center;
 font-size: 1.6rem;
 min-width: 250px;
 padding: 20px 45px;
 position: relative;
}

.btn_link_area .send_btn button:after {
 content: "\f054";
 color: var(--white);
 font-family: var(--icon);
 right: 13px;
 top: 50%;
 margin-top: -6px;
 position: absolute;
 font-size: 1.0rem;
 z-index: 3;
 font-weight: 400;
}


.btn_link_area li.back_btn button {
 background-color:var(--white);
 border:1px solid var(--blue);
 color:var(--blue);
 border-radius: 30px;
 display: inline-block;
 text-align: center;
 font-size: 1.6rem;
 min-width: 250px;
 padding: 20px 45px;
 position: relative;
}

.btn_link_area li.back_btn button:after {
 content: "\f053";
 color: var(--blue);
 font-family: var(--icon);
 left:13px;
 top: 50%;
 margin-top: -6px;
 position: absolute;
 font-size: 1.0rem;
 z-index: 3;
 font-weight: 400;
}

.btn_link_area li a:hover,
.btn_link_area li button:hover {
 opacity:0.7;
}

.recaptcha {
 align-items:center;
 display:flex; 
 justify-content:center;
 flex-direction:column;
 row-gap:15px;
 margin-top:15px;
}

.recaptcha .alert {
 width:100%;
}