@charset "utf-8";

/* CSS Document */

.dsp_off{
  display: none;
}

.dsp_on{
  display: block;
}

.sp_only{
  display: none;
}

.sp_only_w{
  display: none;
}

.pc_only{
  display: block;
}

body {
    width: 100%;
  text-align: center;
}

#header {
  position: relative;
  width: 100%;
  height: 84px;
  background: url(../img/entry/title_bg.png) repeat-x left top;
  text-align: center;
}

#header h1{
  padding: 20px 0 0 150px;
  margin-left: -556px;
}

#content{
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 100px;
}

.place_ttl{
  text-align: center;
  font-size: 20px;
  color: #330000;
  padding: 42px 0 24px;
}

#content .ttl span{
  border-bottom: #000 3px solid;
  display: inline-block;
  margin-bottom: 20px;
  clear: both;
  line-height: 1.8;
  color: #231815;
}

#content .radio_list {
  display: inline-block;
  text-align: left;
  margin-bottom: 10px;
  margin-top: 25px;
  color: #336699;
}

#content .radio_list li {
  text-align: left;
}

#content .radio_list label {
  position: relative;
  padding-left:70px;
  line-height: 60px;
  display: block;
}

#content .radio_list label span {
  display: inline-block;
}

#content .radio_list label input[type="radio"] ,
#content .radio_list label input[type="checkbox"]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#content .radio_list label input[type="radio"] + span::before {
  position: absolute;
  display: inline-block;
  content: '';
  box-sizing: border-box;
  border-radius: 42px;
  z-index: 0;
  top: 9px;
  left: 0;
  background-color: transparent;
  width: 45px;
  height: 45px;
  border: 3px #336699 solid;
}
#content .radio_list label input[disabled="disabled"] + span {
  opacity: 0.1;
}

#content .radio_list label input[type="radio"]:checked + span::after {
  width: 22px;
  height: 22px;
  content: "";
  background: #336699;
  border-radius: 10px;
  z-index: 0;
  position: absolute;
  top: 21px;
  left: 11px;
  bottom: 0;
  display: block;
}

#content .radio_list label input[type="checkbox"] + span::before {
  position: absolute;
  display: inline-block;
  content: '';
  box-sizing: border-box;
  border-radius: 10px;
  z-index: 0;
  top: 9px;
  left: 0;
  background-color: transparent;
  width: 42px;
  height: 42px;
  border: 3px #336699 solid;
}

#content .radio_list label input[type="checkbox"]:checked + span::after {
  content: "";
  display: block;
  position: absolute;
  top: 11px;
  left: 11px;
  width: 15px;
  height: 25px;
  transform: rotate(40deg);
  border-bottom: 4px solid #336699;
  border-right: 4px solid #336699;
}

#content .check_input{
  padding-left: 70px;
  margin-top: -10px;
}

#content .check_input p{
  padding-top: 25px;
}

#content .fld_l{
  width: 533px;
  border: #336699 3px solid;
  display: block;
  padding: 8px 5px;;
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#content .fld_m{
  width: 220px;
  border: #336699 3px solid;
  padding: 8px 10px;
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#content .fld_s{
  width: 160px;
  border: #336699 3px solid;
  padding: 8px 5px;;
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#content textarea{
  width: 533px;
  height: 193px;
  border: #336699 3px solid;
  padding: 5px;;
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#content .personal_info{
  text-align: left;
  color: #666666;
  display: inline-block;
  margin-top: 50px;
}

#content .personal_info .aten{
  font-weight: 100;
  text-indent: -1em;
  margin-left: 1em;
}

#content .personal_info dt{
  line-height: 1.5;
  padding-bottom: 5px;
}

#content .personal_info dd{
  margin-bottom: 30px;
}

#content .personal_info .fld_l{
  width: 100%;  
}

#content .personal_info textarea{
  width: 100%;  
}

#content .personal_info dd.add_fld{
  font-size: 20px;
}

#content .personal_info dd.add_fld input{
  font-size: 26px;
}

#content .personal_info dd.add_fld input{
  margin-top: 5px;
}

#content .personal_info .btn_zip{
  background: #fff;
  border: #336699 3px solid;
  color: #336699;
  border-radius: 30px;
  display: inline-block;
  padding: 1px 35px;  
  cursor: pointer;
  line-height: 40px;
  margin-left: 20px;
  font-size: 26px;
}

#content .aten{
  color: #666666;
  font-size: 20px;
  display: block;
  margin-bottom: 5px;
}

#content .next span{
  background: #336699;
  border: #336699 3px solid;
  color: #fff;
  border-radius: 25px;
  display: inline-block;
  padding: 0 60px; 
  cursor: pointer;
  margin-bottom: 42px;
  line-height: 1.7;
}

#content .back span{
  background: #fff;
  border: #336699 3px solid;
  color: #336699;
  border-radius: 30px;
  display: inline-block;
  padding: 3px 60px;  
  cursor: pointer;
}

#content .error{
  color: rgba(255,0,4,1.00);
  position: absolute;
  text-align: center;
  display: block;
  left: 0;
  right: 0;
  margin: auto;
}

#content ul.btn{
  margin-top: 50px;  
}
#content  .error_ttl{
  padding-top: 102px;
    
  }
#q7 .error{
  font-size: 20px;
  color: #ff3300;
  margin: 50px 0 0;
  position: relative;
}

#q7 .personal_info .error{
  margin: 0;
  padding-bottom: 20px;
  text-align: left;
}


#content #q7 .next span{
  padding: 0 38px;
}

#content .input_error{
  border-color: #d9271c;
  background: #fdebe9;
}

/*comfirm
----------------------------*/
#comfirm{
  margin: 100px 0 0;
  color: #666666;
}

#comfirm .read{
  font-size: 20px;
  margin: 52px 0 90px;
  line-height: 1.4;
}
#comfirm .comfirm_warp{
  width: 545px;
  text-align: left;
  font-size: 26px;
  margin: 0 auto;
}

#comfirm h4{
  border-bottom: #666666 2px solid;
  text-align: left;
  padding:0 0 7px 3px;
  margin-bottom: 5px;
}
#comfirm dl{
  margin-bottom: 100px;
}

#comfirm dt{
  padding-top: 42px;
}

#comfirm dd{
  font-weight: 100;
  line-height: 1.6;
}

#comfirm dd span{
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-top: 20px;
}

/*thanks
----------------------------*/
#thanks{
  margin: 100px 0 0;
  color: #666666;
}

#thanks .read{
  font-size: 20px;
  padding: 52px 0 150px;
  line-height: 1.4;
}

#thanks .btn a {
    background: #fff;
    border: #336699 3px solid;
    color: #336699;
    border-radius: 30px;
    display: inline-block;
    padding: 2px 35px;
  line-height: 1.6;
}

#thanks .btn a:first-child {
  margin-bottom: 30px;
}

#thanks .btn .close a{
    background: #336699;
    border: #336699 3px solid;
    color: #fff;
    padding: 2px 70px;
  margin-top: 20px;
}

/*start
----------------------------*/
#start{
  margin: 65px 0 0;
  color: #666666;
}

#start .read{
  font-size: 20px;
  padding: 23px 0 44px;
  line-height: 1.4;
  font-weight: bold;
}
#start form{
  overflow: hidden;
}

#start .start_form{
  width: 560px;
  margin: 30px auto 0 auto;
  text-align: left;
  padding: 0 0 45px;
  line-height: 1.4;
  color: #3c6d93;
}
#start .start_form dt{
  padding-bottom: 5px;
}

#start .start_form dd{
  padding-bottom: 35px;
}

#start .start_form .student_num{
  content: "";
  width: 47px;
  height: 3px;
  margin: 0 23px;
  display: inline;
  background: #3c6d93;
  text-indent: 47px;
  overflow: hidden;  
  float: left;
  margin-top: 25px;
}

#start .start_form #student_num1,
#start .start_form #student_num2{
  float: left;
}

#start .start_form .aten{
  text-indent: -1em;
  padding-left: 1em;
  font-size: 20px;
  clear: both;
  padding-top: 18px;
  font-weight: 100;
}

#start_thanks #mailerror dt{
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;  
}

#start #privacy,
#start_thanks #mailerror dd{
  font-size: 20px;
  max-width: 948px;
  width: 95%;
  border: #ece9e0 1px solid;
  background: #f9f8f6;
  margin: 0 auto 100px auto;
  padding: 25px 26px 25px 26px;
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
  color: #666666;
  font-weight: 100;
}

#start_thanks #mailerror dd{
  margin-bottom: 70px;
}


#start #privacy li,
#start_thanks #mailerror li{
  text-indent: -1em;
  padding-left: 1em;
  text-align: left;
  line-height: 1.4;
}

#start .btn a {
    background: #336699;
    border: #336699 3px solid;
    color: #fff;
    border-radius: 30px;
    display: inline-block;
    padding: 2px 35px;
  line-height: 1.6;
}

#start .info,
#start_thanks .info{
  text-align: center;
  padding-top: 80px;
  font-size: 19px;
  line-height: 1.5;
}

#start .info a,
#start_thanks .info a{
  color: #666666;
}

#start .info .aten,
#start_thanks .info .aten{
  padding-left: 1em;
  font-size: 17px;
  clear: both;
  padding-top: 14px;
  font-weight: 100;
}

#start_thanks .info{
  padding-top: 0;
}

#start .error {
  font-size: 20px;
  position: relative;
  padding-top: 20px;
}

#start dl.start_form .error {
  position: relative;
  line-height: 1.4;
  text-indent: -1em;
  padding-left: 1em;
  clear: both;
  text-align: left;
  padding-top: 30px;
}

/*start_thanks
----------------------------*/
#start_thanks{
  margin: 65px 0 0;
  color: #666666;
}

#start_thanks .read{
  font-size: 20px;
  padding: 20px 0 120px;
  line-height: 1.4;
}


#start_thanks .close a{
    background: #336699;
    border: #336699 3px solid;
    color: #fff;
    padding: 2px 70px;
    border-radius: 30px;
    display: inline-block;
  line-height: 1.6;
}

@media screen and (max-width: 890px) {
  #header h1 {
    padding-left: 20px;
    margin-left: 0;
    text-align: left;
  }
}

@media screen and (max-width: 720px) {  
  .sp_only_w{
    display: block;
  }
  
  .sp_only{
    display: none;
  }
  
  .pc_only{
    display: none;
  }
  #content .personal_info {
    margin: 0 2.5%;
    display: block;
  }
  
  #content ul.btn {
    margin-top: 3.5em;
  }
  
  #thanks .read {
    margin: 0 3%;
  }
}

@media screen and (max-width: 600px) {
  .sp_only{
    display: block;
  }
  
  .sp_only_w{
    display: none;
  }
  
  .pc_only{
    display: none;
  }
  #content .fld_l {
    width: 100%;
    border: #336699 3px solid;
    display: block;
    padding: 8px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 480px) {
  
  body {
    font-size: 18px;
}
  #header {
    position: relative;
    width: 90%;
    height: auto;
    background: #f9f8f6;
    border-bottom: #ece9e0 1px solid;
    text-align: left;
    padding: 0 5%
  }

  #header h1{
    padding: 20px 0 20px 0;
    margin-left: 0;
    text-align: center;
  }
  
  #header h1 img{
    width: 100%;
    height: auto;
  }

  #content{
    width: 95%;
    margin: 0 auto;
    padding-bottom: 50px;
  }
  
  #content .place_ttl{
    font-size: 15px;
  }

  #content .ttl span{
    font-size: 20px;
    margin-bottom: 0;
    display: block;
    text-align: center;
    line-height: 1.5;
  }

  #content .radio_list {
    width: 100%;
    margin-top: 10px;
  }
  
  #content .radio_list label {
    position: relative;
    padding-left:40px;
    line-height: 45px;
  }

  #content .radio_list label input[type="radio"] + span::before {
    border-radius: 30px;
    top: 7.5px;
    width: 30px;
    height: 30px;
  }

  #content .radio_list label input[type="radio"]:checked + span::after {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    top: 17px;
    left: 9px;
  }

  #content .radio_list label input[type="checkbox"] + span::before {
    border-radius: 7px;
    top: 7.5px;
    width: 30px;
    height: 30px;
  }

  #content .radio_list label input[type="checkbox"]:checked + span::after {
    top: 10px;
    left: 8px;
    width: 11px;
    height: 15px;
  }

  #content .check_input{
    padding-left: 30px;
    padding-top: 10px;
  }
  
  #content .check_input p{
    padding-top: 10px;
  }

  #content .fld_l{
    width: 100%;
  }

  #content textarea{
    width: 100%;
    height: 193px;
  }
  
  #content .personal_info {
    margin: 30px 0 0 0;
  }
  
  #content .personal_info dd.add_fld input {
    font-size: 18px;
  }

  #content .personal_info .btn_zip{
    padding: 1px 15px;  
    font-size: 18px;
  }
    
  #content .aten{
    font-size: 16px;
    margin-bottom: 0;
    text-align: left;
    text-indent: -1em;
    margin-left: 1em;
  }

  #content ul.btn{
    margin-top: 3.3em;  
  }
  
  #content #q7 ul.btn{
    margin-top: 1em;  
  }
  
  #content .next span {
    margin-bottom: 30px;
  }
  
  #content .error {
    width: 95%;
    margin: 0 2.5%;
    line-height: 1.5;
  }
  
  #q7 .error {
    margin: 20px 0 0;
    font-size: 16px;
  }
  
  #q7 .personal_info .error {
    margin-top: 10px;
    font-size: 16px;
    padding-bottom: 0;
    position: relative;
  }
  
  #content .error_ttl {
    padding-top: 50px;
  }
  
    /*comfirm
-  ---------------------------*/
  #comfirm {
    margin: 50px 0 0;
  }
  #comfirm .read{
    font-size: 14px;
    margin: 20px 0;
    text-align: left;
  }
  #comfirm .comfirm_warp{
    width: 100%;
    font-size: 16px;
  }

  #comfirm h4{
    border-bottom: #666666 2px solid;
    text-align: left;
    padding:0 0 3px 0;
    margin-bottom: 5px;
  }
  #comfirm dl{
    margin-bottom: 50px;
  }
  #comfirm dt{
    padding-top: 20px;
  }

  #comfirm dd span{
    font-size: 16px;
    margin-top: 5px;
  }
  
  /*thanks
----------------------------*/
  #thanks{
    margin: 50px 0 0;
  }

  #thanks .read{
    font-size: 16px;
    padding: 30px 0 0 0;
    text-align: left;
  }

  #thanks .btn a {
    padding: 2px 10px;
    font-size: 16px;
  }


  /*start
  ----------------------------*/
  #start{
    margin: 50px 0 0;
  }

  #start .read{
    font-size: 15px;
    padding: 23px 0 10px;
    text-align: left;
  }
  
  #start .start_form{
    width: 100%;
    margin-top: 2em;
    padding-bottom: 0;
  }

  #start .start_form .student_num{
    width: 23px;
    margin: 0 10px;
    margin-top: 25px;
  }
  
  #start .start_form .fld_m{
    width: 5em;
  }

  #start .start_form .aten{
    font-size: 16px;
    margin-left: 0;
  }

  #start #privacy,
  #start_thanks #mailerror dd{
    font-size: 16px;
    width: 100%;
    margin: 0 auto 60px auto;
    padding: 15px 10px;
  }
  
  #start_thanks #mailerror dt{
    font-size: 16px;
    margin-bottom: 10px;
  }



  #start .btn a {
      padding: 2px 20px;
  }

  #start dl.start_form .error {
    padding-top: 15px;
    font-size: 16px;
    margin-left: 0;
  }

  /*start_thanks
  ----------------------------*/
  #start_thanks{
    margin: 50px 0 0;
  }

  #start_thanks .read{
    font-size: 16px;
    padding-bottom: 60px;
    text-align: left;
  }
}


body#end{
    height: 100%;
}
body#end article{
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#content p.caution{
	font-size: 0.9em;
	color: #ff0000;
}