@charset "utf-8";
/*============================================================
common
============================================================*/
#mainContent {width: 1062px;background: white;}
main.ocform * {box-sizing: border-box;}
#ocFormFotter {display: flex;justify-content: space-between;align-items: flex-end;}
#ocFormFotter p {font-size: 12px;color: #818181;}
#ocFormFotter .flexLeft p {margin-top: 5px;}
#ocFormFotter .flexRight {display: flex;align-items: flex-end;}
#ocFormFotter .flexRight p {width: 205px;height: 50px;margin-bottom: 5px;}
#ocFormFotter .flexRight img {width: 80px;}
/*============================================================
オープンキャンパス予約Top
============================================================*/
#modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(43,43,43,.5);
}
#modalWrap {
  overflow-y: scroll;
  width: 846px;
  position: absolute;
  top: 120px;
  left: 50%;
  transform:translateX(-50%);
  background: white;
}
#modalInner {position: relative;}
#modal .introduction {width: 100%;}
.ocApplytop {font-size: 20px;font-weight: bold;padding: 25px 20px 20px;}
.introduction .close {
  background: #C7C7C7;
  width: 85px;
  height: 30px;
  text-align: center;
  color: white;
  font-size: 15px;
  padding-top: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.selectDateBox {background: #F5F5F5;padding: 23px 18px;}
.fieldWrap {
  display: flex;
  background: white;
  border: 1px solid #C7C7C7;
  padding: 18px;
  align-items: normal;
}
.fieldWrap fieldset {display: flex;flex-wrap: wrap;border-right: 1px solid #C7C7C7;}
.fieldWrap fieldset.month {width: 38%;}
.fieldWrap fieldset.day {padding-left: 20px;flex: 1;}
.fieldWrap a.sortBtn {
  background: #3C58A2;
  text-align: center;
  color: white;
  width: 90px;
  height: 50px;
  font-size: 15px;
  padding-top: 12px;
  margin: auto;
  margin-left: 20px;
}
.fieldWrap fieldset > p {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
  width: 100%;
}
main input, select {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}
.chkbox label {
  overflow: hidden;
  position: relative;
  padding-left: 15px;
  display: inline-block;
  margin-bottom: 5px;
}
.chkbox label span {display: inline-block;padding-left: 12px;}
.fieldWrap fieldset.month label span {width: 80px;}
.fieldWrap fieldset.day label span {width: 52px;}
.chkbox label input[type="checkbox"],
label.chkbox2 input[type="checkbox"] {
　-webkit-appearance: none;
　-moz-appearance: none;
  appearance: none;
  display: none;
}
.chkbox label span::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 0;
  top: 0;
  z-index: 1;
  border: 1px solid #C7C7C7;
}
.chkbox label input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  display: block;
  width: 6px;
  height: 12px;
  border-right: 4px solid #3279B8;
  border-bottom: 4px solid #3279B8;
  transform: rotate(45deg);
  z-index: 3;
}
section.eventList {padding: 20px;}
/*----- tab contents -----*/
.introduction ul.tab2 li.on {border-bottom-width: 4px;}
.introduction ul.tab2 li:not(.on) > span {font-weight: normal;}
.introduction .ocList .list > div {padding-top: 10px;}
.introduction .ocList .date {font-size: 30px;font-weight: bold;margin-bottom: 10px;}
.introduction .date > span {margin-left: 10px;}
.introduction p.time {font-size: 16px;}
.introduction .mark {margin-bottom: 15px;}
.introduction .mark span {font-size: 12px;width: auto;padding: 2px 10px;}
.introduction .ocList .list a.btn {font-weight: bold;padding: 0 20px;box-shadow: 2px 3px 2px #0000003D;}
/*============================================================
入力画面
============================================================*/
.ocLogo {margin: 25px 0 167px;}
.ocLogo img {width: 190px;}
.oc_apply_ttl {font-size: 28px;font-family: "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN","游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-weight: bold;}
.introduction .input_pg {width: 770px;margin: 50px auto;float: none;}
.selectedEvent {
  display: table;
  width: 100%;
  justify-content: space-between;
  border: 1px solid #C7C7C7;
  padding: 15px 10px;
  margin-bottom: 32px;
}
.selectedEvent > div {display: table-cell;vertical-align: middle;}
.dateBox {width: 160px;padding: 0 10px;border-right: 1px solid #C7C7C7;font-family: "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN","游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-weight: bold;}
.dateBox p.date {font-size: 25px;text-align: center;}
.dateBox p.date span {font-size: 16px;margin-left: 0;}
.dateBox p.time {margin-bottom: 0;}
.sclNameBox {padding: 0 25px;font-size: 18px;}
.sclNameBox .sclNm {font-weight: bold;}
.fig {width: 80px;display: flex;align-items: center;}
.fig img {width: 100%;}
ul.flowArrow {
  display: flex;
  margin-right: 12px;
  justify-content:flex-end;
  margin-bottom:30px;
}
ul.flowArrow li {
  margin: 0 0 0 14px;
  background: #C0E0FB;
  padding: 5px;
  color: white;
  position: relative;
  text-align: center;
  height: 30px;
  width: 60px;
  font-size: 14px;
  font-weight: bold;
}
ul.flowArrow li.on {background: #0A14FF;color: white;}
ul.flowArrow li::before,
ul.flowArrow li::after {content: "";position: absolute;top: 0;}
ul.flowArrow li::before {
  border-width: 15px 0 15px 12px;
  border-style: solid;
  border-color: #C0E0FB #C0E0FB #C0E0FB transparent;
  left: -12px;
}
ul.flowArrow li.on::before {border-color: #0A14FF #0A14FF #0A14FF transparent;}
ul.flowArrow li::after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 12px solid #C0E0FB;
  right: -12px;
}
ul.flowArrow li:first-child.on::before {border-color: #0A14FF;}
ul.flowArrow li:first-child::before {border-color: #C0E0FB;border-width: 15px 5px;left: -5px;}
ul.flowArrow li.on::after {border-left: 12px solid #0A14FF;}
ul.flowArrow li:last-child.on::after {border-color: transparent transparent transparent #0A14FF;}
table.formInputTbl {width: 100%;margin-bottom: 30px;}
table.formInputTbl * {color: #464646;font-size: 14px;}
table.formInputTbl th,table.formInputTbl td {border: 1px solid #E1E1E1;padding: 25px 20px;}
table.formInputTbl th {background: #fff;font-weight: normal;width: 170px;vertical-align: middle;}
table.formInputTbl th p {position: relative;}
table.formInputTbl th.reqd p::after {
  content: "必須";
  position: absolute;
  top: calc(50% - 6px);
  right: -10px;
  color: #FF4C53;
  font-size: 10px;
  border: 1px solid #FF4C53;
  padding: 0 5px;
}
table.formInputTbl td {position: relative;}
table.formInputTbl td::after {
  position: absolute;
  top: calc(50% - 11px);
  right: 20px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  font-size: 7pt;
  text-align: center;
  box-sizing: border-box;
  padding-top: 3px;
}
table.formInputTbl td.ok::after {content: "OK";background: #3279B8;}
table.formInputTbl td.ng::after {content: "NG";background: #D71010;}
/* form parts */
.inputFlex {display: flex;align-items: center;}
.inputFlex input {width: 200px;}
.inputFlex span {width: 3em;}
.inputFlex input + span {margin-left: 22px;}
main.ocform input[type="text"],
main.ocform input[type="number"],
main.ocform input[type="email"],
main.ocform input[type="tel"],
main.ocform input[type="password"] {border: 1px solid #E1E1E1;padding: 12px 18px;border-radius: 3px;}
main.ocform input[type="text"]::placeholder,
main.ocform input[type="number"]::placeholder,
main.ocform input[type="email"]::placeholder,
main.ocform input[type="tel"]::placeholder {color: #C1C1C1;}
table.formInputTbl td.ng input {background: #FFE9E9;}
p.err {
  position: absolute;
  left: 20px;
  bottom: 2px;
  color: #FF4C53;
  font-size: 12px;
}
table.formInputTbl label.radio + label.radio {margin-left: 55px;}
table.formInputTbl label.radio span {position: relative;padding-left: 10px;}
table.formInputTbl label.radio span::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 2px;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #707070;
  border-radius: 50%;
}
table.formInputTbl input[type="radio"] {appearance: none;visibility: hidden;width: 1px;/* 0だとエラーになるため1に設定 */}
table.formInputTbl input[type="radio"]:checked + span::before {border: 1px solid #707070;}
table.formInputTbl input[type="radio"]:checked + span::after {
  content: "";
  position: absolute;
  left: -17px;
  top: 5px;
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #0A14FF;
  border-radius: 50%;
}
.selectWrap {position: relative;}
.selectWrap:before {
  content: "";
  position: absolute;
  right: 15px;
  top: calc(20px - 2px);
  display: block;
  width: 6px;
  height: 6px;
  border-left: 1px solid #707070;
  border-bottom: 1px solid #707070;
  transform: rotate(-45deg);
}
.selectWrap select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #C1C1C1;
  outline: none;
  vertical-align: middle;
  padding: 12px 18px;
  border: 1px solid #E1E1E1;
  width: 100%;
  position: relative;
  z-index: 10;
  cursor: pointer;
}
select::-ms-expand {display: none;}
.selectWrap option {cursor: pointer;color: #C1C1C1;}
table.formInputTbl .midW {width: 165px;}
table.formInputTbl .maxW {width: 495px;}
table.formInputTbl .minW {width: 70px;}
.birth span {padding-left: 10px;}
.hsName {margin: 12px 0;}
label.chkbox2 {position: relative;display: block;}
table.formInputTbl label.chkbox2 {margin-bottom: -10px;}
label.chkbox2 span {padding-left: 30px;}
label.chkbox2 span::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 0;
  top: 0;
  z-index: 1;
  border: 1px solid #707070;
}
label.chkbox2 input[type="checkbox"]:checked + span::before{
 background:#0A14FF;
 border:1px solid #0A14FF;
}
label.chkbox2 input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 5px;
  display: block;
  width: 7px;
  height: 14px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  z-index: 3;
}
table.formInputTbl tr.ocNotice td {
  border: none;
  font-size: 12px;
  line-height: 20px;
  padding: 10px 0;
}
.broch_note {font-size: 16px;line-height: 20px;margin-bottom: 50px;}
.broch_note p {font-size: 16px;line-height: 20px;margin-bottom: 10px;}
.broch_note label.chkbox2 {display: inline-block;}
.broch_note label.chkbox2 span {
  font-size: 18px;
  font-weight: bold;
  margin-right: 50px;
  color: #464646;
}
span.bro_free {font-size: 12px;color: #464646;}
a.cmnBtn {
  display: block;
  margin: 0 auto;
  color: white;
  font-size: 20px;
  text-align: center;
  padding-top: 20px;
  border-radius: 3px;
}
a.cmnBtn:hover {text-decoration: none;}
a.submitBtn {background: #0A14FF;width: 370px;height: 70px;}
.ocform a.memberBtn {
  display: block;
  width: 320px;
  height: 40px;
  margin: 0 0 50px auto;
  text-align: center;
  border: 2px solid #0A14FF;
  border-radius: 5px;
  color: #0A14FF;
  text-decoration: none;
  font-size: 17px;
  padding-top: 5px;
  font-weight: bold;
}
.ocform a.loginButton {
  padding: 10px;
  text-align: center;
  color: white;
  border-radius: 4px;
  background: #0A14FF;
  width: 260px;
  display: block;
  margin: 0 auto;
}
.ocform .pass-miss {margin-top:14px;}
.ocform .pass-miss a {color: #333;}
/*============================================================
確認画面
============================================================*/
article.confirm_pg .sclNameBox {padding: 10px 25px;}
.heldPlace {font-size: 14px;margin-top: 10px;}
.introduction .confirm_pg {width: 770px;margin: 50px auto;float: none;}
article.confirm_pg table.formInputTbl {margin-bottom: 126px;}
article.confirm_pg table.formInputTbl th,
article.confirm_pg table.formInputTbl td {padding: 14px 20px;}
article.confirm_pg table.formInputTbl td {padding-left: 36px;}
.confBtnArea {text-align: center;margin-bottom: 100px;}
.p-policy-note {margin-bottom: 20px;}
.p-policy-note a {color: #3C58A2;}
a.reviseBtn {
  background: #C1C1C1;
  width: 253px;
  height: 60px;
  padding-top: 15px;
  margin-top: 20px;
}