@charset "utf-8";

/*---------------------------------------------
  header
----------------------------------------------*/
#member_all_header {border-bottom: #00AC97 3px solid;}
.logoArea {width: 980px;margin: 0 auto;padding: 20px 0;display: flex;align-items: flex-end;}
.logoArea h1 {margin-left: 10px;}
/*---------------------------------------------
  /member_all/top
----------------------------------------------*/
main * {padding: 0;margin: 0;box-sizing: border-box;color: #000;}
.mb50 {margin-bottom: 50px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb100 {margin-bottom: 100px !important;}
.m_auto {margin: 0 auto;}
.ctr {text-align: center!important;}
main a:hover {color: #0030b2;text-decoration: underline;}
.member_inner {width: 800px;margin: 70px auto;}
.quit .cmn_btn {width: 280px;}
.bdr_box {border: 1px solid #c7c7c7;}
.top_box {padding: 60px 110px;}
.member_table,.member_table2 {width: 100%;}
.member_table2 tr {border-bottom: 1px solid #c7c7c7;}
.member_table tr,.member_table2 tr {background-clip: padding-box;}
.member_table th, .member_table td {padding: 26px 0 24px 15px;font-size: 16px;}
.member_table th {width: 150px;font-weight: normal;}
main input[type="text"], main input[type="tel"], main input[type="email"], main input[type="password"] {
  border: 1px solid #c7c7c7;
  height: 40px;
  padding-left: 15px;
  border-radius: 2px;
}
table.member_table input {width: 320px;}
input:focus {outline: none;}
.cmn_btn {
  display: inline-block;
  width: 392px;
  height: 58px;
  text-align: center;
  color: white;
  border-radius: 3px;
  background: #00B9EF;
  font-size: 20px;
  border: none !important;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 2px 2px 3px #ccc;
}
.cmn_btn.back {background: white;width: 200px;color: #0030b2;border: 1px solid #0030b2 !important;}
.inner_box {width: 350px;margin: 0 auto;}
.tx_ctr {text-align: center;}
.member_attention, .memberinput_attention {font-size: 22px;}
.font_blue {color: #0030EF !important;}
.font_blue2 {color: #00B8EE;}
.font_red {color: #FF0000;}
.policy a {color: #0030b2;}
a.cmn_btn {display: flex;justify-content: center;align-items: center;margin-right: auto;margin-left: auto;}
.cmn_btn:hover {color: white;text-decoration: none;opacity: .7;}
.cmn_btn.back:hover {color: #0030b2;}
input[type="button"]:hover {opacity: .7;}
.cmn_btn.red_btn {background: #FF0000;}
.cmn_btn.navy_btn {background: #0030b2;}
/*---------------------------------------------
  /member_all/member
----------------------------------------------*/
.member_menu p + p {margin-top: 50px;}
.member_menu a {color: #1E3FB3;font-size: 16px;}
.member_ttl {
  background: #47C3B4;
  padding: 9px 12px 8px;
  font-size: 21px;
  line-height: 21px;
  font-weight: bold;
}
p.seimei span {width: 130px;display: inline-block;}
p.seimei + p.seimei {margin-top: 40px;}
/*---------------------------------------------
  /member_all/index
----------------------------------------------*/
.mv_area img {width: 100%;}
.member_inner2 {width: 840px;margin: 40px auto;}
.top_l_ttl {font-size: 24px;font-weight: bold;margin-bottom: 30px;}
.bdr_box.input {padding: 50px 30px;}
ul.flow {
  display: flex;
  width: 300px;
  margin: 0 auto 30px;
  position: relative;
}
ul.flow::before {
  content: "＼簡単1分！／";
  position: absolute;
  left: 4px;
  top: -25px;
  color: #0030b2;
  font-size: 13px;
  font-weight: bold;
}
ul.flow li {
  margin-left: 18px;
  background: #b5b8ff;
  padding: 5px;
  position: relative;
  text-align: center;
  height: 28px;
  width: 33.333%;
  font-weight: bold;
  color: white;
}
ul.flow li:first-child {width: 40%;margin-left: 0;}
ul.flow li.on {background: #0030b2;}
ul.flow li::before,
ul.flow li::after {content: "";position: absolute;top: 0;}
ul.flow li::before {
  border-width: 14px 0 14px 14px;
  border-style: solid;
  border-color: #b5b8ff #b5b8ff #b5b8ff transparent;
  left: -14px;
}
ul.flow li::after {
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid #b5b8ff;
  right: -13px;
}
ul.flow li.on::before {border-color: #0030b2 #0030b2 #0030b2 transparent;}
ul.flow li.on::after {border-left: 14px solid #0030b2;}
ul.flow li:first-child::before {border-color: transparent;}
h2.form_ttl {font-size: 24px;font-weight: bold;margin-bottom: 30px;}
h3.sub {margin-bottom: 30px;font-size: 14px;}
.member_table2 th,.member_table2 td {padding: 15px 0;font-size: 22px;}
tr.narrow_pd th,tr.narrow_pd td {padding: 0;}
.member_table2 th {
  width: 192px;
  background-clip: padding-box;
  font-weight: normal;
  position: relative;
  border-right: 1px solid #c7c7c7;
  padding: 30px 0 30px 25px;
  vertical-align: top;
}
.required::after {
  content: "必須";
  position: absolute;
  right: 30px;
  font-size: 10px;
  color: #ff0000;
  border: 1px solid #ff0000;
  border-radius: 10px;
  padding: 0 5px;
}
.member_table2 td {position: relative;padding: 30px 0 30px 15px;}
.member_table2 td.ok::after,
.member_table2 td.ng::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 24px;
  height: 24px;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member_table2 td.ok::after {content: "OK";background: #0030b2;}
.member_table2 td.ng::after {content: "NG";background: #ff0000;}
td.name label {display: inline-block;width: 38px;}
td.name input {width: 190px;}
td.name input + label {margin-left: 20px;}
td.sex label + label {margin-left: 40px;}
.sshort_w {width: 110px;}
.short_w {width: 165px;}
.midium_w2 {width: 280px;}
.midium_w {width: 420px;}
.wide_w {width: 490px;}
.selectWrap {position: relative;}
.selectWrap::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 16px;
  border-left: 2px solid #7c7c7c;
  border-bottom: 2px solid #7c7c7c;
  transform: rotate(-45deg);
  width: 5px;
  height: 5px;
}
.selectWrap select {
  outline: none;
  appearance: none;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #C1C1C1;
  width: 100%;
  cursor: pointer;
  border-radius: 2px;
}
.flex {display: flex;align-items: center;}
.flex.btm_btn {width: 640px;margin: 0 auto;justify-content: center;}
.selectWrap.month, .selectWrap.date {width: 90px;}
td.birth .selectWrap.year {width: 170px;}
.flex span.ymd {margin: 0 20px 0 10px;}
td.tel input {width: 140px;margin-right: 30px;}
table + h2.form_ttl {margin-top: 50px;}
ul.form_tab {display: flex;}
ul.form_tab li {
  width: 170px;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  font-size: 14px;
}
ul.form_tab li.on {border-bottom: 3px solid #0030b2;}
ul.form_tab li.on::after {
  content: "";
  border: 10px solid transparent;
  border-left-width: 8px;
  border-right-width: 8px;
  border-top-color: #0030b2;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.tab_contents .cell {display: none;padding-top: 20px;}
.tab_contents .cell.show {display: block;}
/* checkbox */
label.chkbox {
  display: block;
  overflow: hidden;
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
}
label.chkbox span::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: 0;
  top: 2px;
  z-index: 1;
  border: 1px solid #333;
}
label.chkbox input[type="checkbox"],
label.radio input[type="radio"] {appearance: none;display: none;}
label.chkbox input[type="checkbox"] + span::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	display: block;
	width: 6px;
	height: 10px;
	border-right: 2px solid transparent;
	border-bottom: 2px solid transparent;
	transform: rotate(-45deg);
	z-index: 3;
	transition: .1s;
}
label.chkbox input[type="checkbox"]:checked + span::before {background: #0075ff;border: 1px solid #0075ff;}
label.chkbox input[type="checkbox"]:checked + span::after {border-right-color: white;border-bottom-color: white;transform: rotate(45deg);}
/* radio */
label.radio {position: relative;padding-left: 30px;}
label.radio span::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top: 1px;
  z-index: 1;
  border: 1px solid #333;
  border-radius: 50%;
}
label.radio input[type="radio"]:checked + span::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  left: 4px;
  top: 5px;
  z-index: 3;
  background: #0030b2;
  border-radius: 50%;
}
td.scl_type label {margin-right: 16px;}
td.graduate .selectWrap.year {width: 110px;}
td.educ_bk p {margin-top: 18px;}
.attention-block {
  border: #FF0000 1px solid;
  background: #FEE;
  padding: 10px 15px;
  line-height: 1.8;
  margin: 0 0 20px;
}
.attention-block p {margin: 0;}
.attention-block ul li {padding: 0 0 0 20px;zoom: 1;color: #FF0000;}
.attention,
.attention label {color: #ff0000;width: auto !important;}
#highSchoolSearchList,
#juniorHighSchoolSearchList {
  display: block;
  background: #fff none repeat scroll 0 0;
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 300px;
  z-index: 5;
}
#highSchoolSearchList #highSchool,
#juniorHighSchoolSearchList #juniorHighSchool {
  border: 1px solid #aaa;
  list-style-type: none;
  margin: 0px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  width: 100%;
  margin-top: -10px;
}
/*会員限定プレゼント*/
.present_area {
  background: #E5F3FF;
  margin: 0 calc(50% - 50vw) 50px;
  padding: 30px calc(50vw - 50%);
  width: 100vw;
}
.present_area .member_table2 {background: #FFFFFF;}
.present_area p {font-size: 16px;}
.present_area label.chkbox input[type="checkbox"] + span::before,
.present_area label.chkbox input[type="checkbox"]:checked + span::before {
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  top: 0;
}
.present_area label.chkbox input[type="checkbox"]:checked + span::after {
  border-right-color: #00B9EF;
  border-bottom-color: #00B9EF;
  top: 2px;
  left: 7px;
  height: 12px;
}
.present_area label.chkbox {
  display: inline;
  float: left;
  margin-top: 0;
  font-size: 15px;
  line-height: 23px;
}
.present_area label.chkbox span {margin-left: 15px;font-weight: bold;}
.present_area .present_detail a {color: #5FD3F5;text-decoration: underline;padding-left: 35px;}
.present_area .present_cmt {margin: 20px 0 10px;}
.present_area .selectWrap + .selectWrap {margin-top: 4px;}
/*---------------------------------------------
  /member_all/reject
----------------------------------------------*/
.merumaga_area {width: 770px;margin: 70px auto 0;}
.fs30 {font-size: 30px;}
.fs16 {font-size: 16px;}
.mb200 {margin-bottom: 200px;}
.font_blue3 {color: #00B9EF;}
.inner_hatching {background: #f1f1f1;margin: 0 auto;}
.hatch_reject {padding: 23px 0 32px;}
/*---------------------------------------------
  /member_all/question
----------------------------------------------*/
.fs18 {font-size: 18px;  }
.fs24 {font-size: 24px;  }
.mt35 {margin-top: 35px;}
.mt70 {margin-top: 70px;}
.hatch_question {padding: 48px 0 37px;line-height: 30px;}
.question_area {background: #E3F2FF;padding: 37px 76px 35px 37px; }
.q_ttl {font-size: 18px;font-weight: bold;color: #333333;}
.answer_wrap_radio {text-indent: 5rem;counter-reset: ansnum;padding-top: 40px;margin-bottom: 40px;}
.answer_wrap_radio label {position :relative;}
.answer_wrap_radio label + label {margin-left: 70px;}
.answer_wrap_radio label:before {counter-increment: ansnum;content: counter(ansnum);position: absolute;top: -20px;right: 2px;}
.answer_wrap_radio .agree {margin-right: 33px;}
.answer_wrap_radio .disagree {margin-left: 44px;}
.answer_wrap_text {text-indent: 5rem;margin-top: 15px;margin-bottom: 10px;}
.answer_wrap_text textarea {width: calc(100% - 5em);height: 76px;padding: 12px 15px;box-sizing: border-box;}
.premium_link {color: #0A14FF;}
/*---------------------------------------------
/member_all/question_complete
----------------------------------------------*/
.hatch_complete {padding: 48px 0 51px;line-height: 30px;}