@charset "utf-8";
@import url("base.css");




/*-------------------------------------------- */
/* common
---------------------------------------------- */
html {
width: 100%; color: var(--black);
font-size: 62.5%;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
margin: 0;
position: relative;
}

body { font-size: 1.6rem; font-family: "M PLUS Rounded 1c", serif; font-weight: 400;}

.webfont { transform: rotate(0.05deg);}

* { box-sizing: border-box;}

/* link */
a { text-decoration: none; border: none; -webkit-transition: 0.25s; transition: 0.25s;}
a:visited { text-decoration: none;}
a:active {  text-decoration: none;}
a:hover { text-decoration: underline;}

/* other */
.sp_dis { display: none;}
.pc_dis { display: block;}


@media screen and (max-width: 767px) {
.sp_dis { display: block;}
.pc_dis { display: none;}
}

.snote { font-style:normal; font-size:0.8em; color:#d30c44}



/*-------------------------------------------- */
/* header
---------------------------------------------- */
header { width: 100%; background: var(--color_white); border-bottom: none; padding: 0 30px 30px; position: sticky; top: 0; z-index: 1;}
header h1 { width: 300px; margin: 0 auto;}
header h2 { font-weight: normal; text-align: center;}
.stepFlow {	display: flex; width: 800px; background: var(--color_white); margin: 0 auto 1em; padding: 0;}
.stepFlow > li { list-style: none; display: block; width: auto; color: var(--color_bluelightgray); flex: 1; text-overflow: ellipsis; margin: 0;	padding: 0; position: relative;}
.stepFlow > li > span { display: inline-block; width: 20px; height: 20px; color: var(--color_white); text-align: center; line-height: 1; background-color: var(--color_bluelightgray); border-radius: 1000px; margin: 0 0 0; padding-top: 2px;}
.stepFlow > li > span:after,
.stepFlow > li > span:before { content: ""; display: block; width: 80%; height: 3px; background-color: var(--color_bluelightgray); position: absolute; bottom: 10px; left: 25px; z-index: 1;}
.stepFlow > li.completed,
.stepFlow > li.completed > span { color: var(--color_white);}
.stepFlow > li.completed > span,
.stepFlow > li.completed > span:after,
.stepFlow > li.completed > span:before { background-color: var(--color_main_blue);}
.stepFlow > li:last-child { flex: 0;}
.stepFlow > li:last-child > span:after,
.stepFlow > li:last-child > span:before {	width: 0%; margin-right: 50%;}
.stepFlow > li.active,
.stepFlow > li.active > span{ font-weight: bold; color: var(--color_white);}
.stepFlow > li.active > span,
.stepFlow > li.active > span:after,
.stepFlow > li.active > span:before { background-color: var(--color_main_orange);}

@media screen and (max-width: 799px) {
.stepFlow { width: 100%;}
.stepFlow > li > span:after,
.stepFlow > li > span:before { width: 75%;}
}

@media screen and (max-width: 675px) {
.stepFlow > li > span:after,
.stepFlow > li > span:before { width: 73%;}
}

@media screen and (max-width: 550px) {
.stepFlow > li > span:after,
.stepFlow > li > span:before { width: 60%;}
}


/*-------------------------------------------- */
/* form
---------------------------------------------- */
form input,
form textarea,
form select { width: 100%;
-moz-appearance: none;
-webkit-appearance: none; appearance: none; background: var(--color_white); background-image: none; 
border: 1px solid #b4b4b4; color: inherit; font-size: 1.6rem; font-family: inherit; padding: 0.4em 0.8em; border-radius: 5px;}
select:-ms-expand { display: none;}
form input:focus,
form input textarea:focus,
form select:focus { border: 1px solid rgba(0, 0, 0, 0.32); box-shadow: none; outline: none;}

/* セレクトボックス */
form select { background: url(../images/icon-down-solid.svg) 95% center no-repeat; background-size: 16px 16px; background-color: transparent; padding-right: 30px;}
form select.disabled { color: #ccc;}

form .error_area { border: 1px solid #ff0000; border-radius: 3px; color: #ff0000; margin: 0 auto 15px auto;}
form .error { background-color: rgba(255, 0, 64, 0.1);}
form select.error { background: rgba(255, 0, 64, 0.1) url(../images/icon-down-solid.svg) 95% center no-repeat; background-size:  16px 16px;}

form input[type=file] { background: none; border: none;}

/* ラジオボタン */
form input[type=radio] { display: none;}
form input[type=radio] + label { display: inline-block; width: auto; padding: 5px 30px; position: relative; cursor: pointer;}
form input[type=radio] + label:before { display: block; content: ""; width: 16px; height: 16px; background: #e5e5e5; border: 1px solid #d2d2d2; border-radius: 50%; margin-top: -8px; position: absolute; top: 50%; left: 5px;}
form input[type=radio] + label:after { display: block; content: ""; width: 10px; height: 10px; background: var(--color_main_blue); border-radius: 50%; margin-top: -4px; position: absolute; top: 50%; left: 9px; opacity: 0; transform: scale3d(.3,.3,1); transition: transform .2s ease-in-out, opacity .2s ease-in-out;}
form input[type=radio]:checked + label:before { border-color: var(--color_lightgray);}
form input[type=radio]:checked + label:after { opacity: 1; transform: scale3d(1,1,1);}


/* チェックボックス */
form input[type=checkbox] { display: none;}
main form dd label input[type=checkbox] + span { display: inline-block; width: auto; cursor: pointer; padding: 5px 30px; position: relative; font-size: 1.8rem;}
form input[type=checkbox] + span:before { display: block; content: ""; width: 16px; height: 16px; background: #e5e5e5; border: 1px solid #d2d2d2;  margin-top: -8px; position: absolute; top: 50%; left: 5px;}
form input[type=checkbox] + span:after { display: block; content: ""; width: 9px; height: 20px; border-right: 6px solid var(--color_main_blue); border-bottom: 3px solid var(--color_main_blue); margin-top: -16px; position: absolute; top: 50%; left: 7px; opacity: 0; transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1); transition: transform .2s ease-in-out, opacity .2s ease-in-out;}
form input[type=checkbox]:checked + span:before { border-color: var(--color_lightgray);}
form input[type=checkbox]:checked + span:after { opacity: 1; transform: rotate(45deg) scale3d(1,1,1);}




/*-------------------------------------------- */
/* main
---------------------------------------------- */

main .inner { width: 600px; padding: 0 30px; margin: 0 auto 50px; font-size: 1.8rem;} 
.headLine { transform: rotate(0.05deg); margin-bottom: 2em;}
.required,
.optional  { padding: 2px 3px; border-radius: 2px; margin: 0 3px; transform: rotate(0.05deg);}
.required  { color: var(--color_white); background: var(--color_red);}
.optional { color: var(--color_white); background: var(--color_lightgray);}

.advice { color: var(--color_red); font-size: 80%;}

.errorArea { border: 1px solid var(--color_red); padding: 1em 1em 0;}
.errorArea p { color: var(--color_red); margin: 0 0 1em; transform: rotate(0.05deg);}

main .inner dl { display: flex; flex-wrap: wrap; margin: 0 0 60px;}
main .inner dt { width: 100%; font-size: 2rem; padding-bottom: 10px; margin-bottom: 10px; transform: rotate(0.05deg);}
main .inner dd { width: calc(50% - 40px); transform: rotate(0.05deg); margin-bottom: 15px;}
main .inner dd.confirmd { width: calc(100%); transform: rotate(0.05deg); margin-bottom: 15px;padding:3px 10px;border-bottom:1px dotted #666;}
main .inner dd.confirmd:last-of-type { width: calc(100%); transform: rotate(0.05deg); margin-bottom: 15px;padding:3px 10px;border-bottom:none;}
main .inner .tutoring_center dt { border-bottom: 1px solid var(--color_lightgray);}

main .inner .student dd { width: 32%; margin-left: 0;}

main .inner dl.name,
main .inner dl.gender { margin: 0 0 30px;}
main .inner dd span { font-size: 80%;}
main .inner dl.date_of_birth dd { display: flex; align-items: baseline; width: 25%;}
main .inner dl.date_of_birth dd input,
main .inner dl.date_of_birth dd select { margin-right: .5em;}

.addition { text-align: center; margin-bottom: 60px;}
.btPlus { box-sizing: content-box; display: inline-block; width: 2em; height: 2em; color: var(--color_gray); line-height: 1; vertical-align: middle; border: 2px solid currentColor; border-radius: 51000px; position: relative; cursor: pointer;}
.btPlus > span { width: 52%; height: 3px; background: currentColor; border-radius: 1000px; position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.btPlus > span::before { content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; position: absolute; top: 0; left: 0; transform: rotate(90deg);}
.addition p { font-size: 80%; transform: rotate(0.05deg);}

main .inner dl.address dt,
main .inner dl.question dt { font-size: 1.5rem; margin-left: 40px;}

main .inner dl.tell,
main .inner dl.mail { margin: 0 0 30px;}
main .inner dl.tell dd,
main .inner dl.mail dd,
main .inner dd.textarea { width: 100%;} 
main .inner dd.textarea textarea { height: 5em;}

main h3 { text-align: center; font-size: 2.4rem; font-weight: normal;}
main .inner.confirm dl { margin-bottom: 30px; border-bottom: 1px solid var(--color_lightgray);}
main .inner.confirm dt { font-weight: bold; margin-bottom: 0;}
main .inner.confirm dd { margin-left: 0;}

.confirmArea { text-align: center; padding: 1em 1em 0;}
.completion p,
.confirmArea p { transform: rotate(0.05deg);}
.confirmArea p span { color: var(--color_red);}
.completion p { line-height: 1.8em; margin-bottom: 2em;}

.btArea { display: flex; align-items: center; justify-content: center; margin: 60px 0;}
.btArea button { display: flex; align-items: center; justify-content: center; width: 150px; font-size: 1.8rem; color: var(--color_white); border-radius: 1000px; border: none; padding: 10px 15px; margin: 0 15px; cursor: pointer;}
.btArea button.next { background: var(--color_main_orange); border: 2px solid var(--color_main_orange);}
.btArea button.back { background: var(--color_main_blue); border: 2px solid var(--color_main_blue); }
.btArea button.formBack { width: 250px; color: var(--color_main_blue); border: 1px solid var(--color_main_blue);}
.btArea button:hover { opacity: .7; transition: .2s;}


@media screen and (max-width: 565px) {
main .inner dd { width: calc(100% - 40px);}
main .inner .student dd { width: 50%; margin-left: 0;}
main .inner dl.date_of_birth dd { width: calc(100% - 40px); margin-bottom: 20px;}
}


@media screen and (max-width: 600px) {
main .inner { width: 100%;} 
}



/*-------------------------------------------- */
/* footer
---------------------------------------------- */
.footerBg { background: var(--color_white); width: 100%;}
footer { width: 800px; margin: 20px auto; position: relative; border-top: 10px solid var(--color_main_blue);}
footer:before { content: ''; position: absolute; top: -10px; width: 30%; height:10px; background: var(--color_main_orange);}
footer a { width: 250px; color: var(--color_black); display: flex; align-items: center; justify-content: center; padding: 5px 15px; margin: 30px auto 10px; border: 2px solid var(--color_main_blue); border-radius: 1000px; transform: rotate(0.05deg);}
footer img { display: block; width: 295px; margin: 20px auto;}
footer p { font-size: 14px; color: var(--color_main_blue); font-weight: 700; text-align: center; transform: rotate(0.05deg);}

@media screen and (max-width: 799px) {
footer { width: 100%;}
}