@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/04/24
* Last update : 2017/04/28
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/
.wrap{ background: #fff; padding: 15px 0 0; position: relative; overflow: hidden; }

ul.step{ width: 100%; background: #be0716; border: 2px solid #be0716; overflow: hidden;}
ul.step li{ width: calc(100% / 3); height: 36px; padding: 0 0 0 10px; position: relative; float: left; background: #fff; font: bold 12px/34px "游ゴシック",YuGothic,sans-serif; color: #be0716; text-align: center;}
ul.step li:first-child{ padding: 0;}
ul.step li::after{ content: ""; background: url(../img/step.png) no-repeat; background-size: cover; width: 12px; height: 38px; position: absolute; top: 17px; right: -12px; z-index: 2; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
ul.step li:last-child::after{ background: none; }
ul.step li.on{ background: #be0716; color: #fff; }
ul.step li.on::after{ background: url(../img/step_on.png) no-repeat; background-size: cover; }
ul.step li.on:last-child::after{ background: none; }

.mynavi{ border: 1px solid #be0716; margin: 20px 0 0 0; padding: 20px 20px 30px 20px; text-align: center; color: #be0716;}
.mynavi > p > a{ color: #be0716; text-decoration: underline;}
.mynavi > a{ display: block; width: 195px; height: 60px; margin: 10px auto 0 auto;}

form{ padding: 15px 0 0; }

form > dl{ background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; margin: 15px 0 0; }
form > dl > dt{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px #f6f6f6; padding: 10px 15px; position: relative; font-weight: bold;}
form > dl > dt span{ background: #be0716; padding: 5px 8px; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-weight: normal; font-size: 10px; line-height: 1; color: #fff;}
form > dl > dd{ padding: 15px;}
form > dl > dd div{ position: relative; margin: 0 0 10px 0;}

form > dl > dd dl{ overflow: hidden;}
form > dl > dd dl dt{ width: 35px; padding: 0 10px 0 0; float: left; line-height: 40px; text-align: right;}
form > dl > dd dl dd{ width: calc(50% - 35px - 8px); position: relative; float: left;}
form > dl > dd dl dd:first-of-type{ margin: 0 16px 0 0;}

form input[type=text],
form input[type=email],
form input[type=tel],
form textarea{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 40px; border: 3px solid #e5e5e5; border-radius: 0; font: 12px/1.5 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";}
form input[type=text],
form input[type=email],
form input[type=tel]{ padding: 0 10px;}
form textarea{ display: block; height: 150px; padding: 10px;}

form input[name=b_year]{ width: 70px; margin: 0 5px 0 0;}
form input[name=b_month]{ width: 55px; margin: 0 5px 0 0;}
form input[name=b_day]{ width: 55px; margin: 0 5px 0 0;}
form input[name=zipcode]{ width: 150px; margin: 0 10px 0 0;}
form input[name=tel]{ width: 150px; margin: 0 10px 0 0;}
form input[name=academicYear]{ width: 80px; margin: 0 10px 0 0;}
form input[name=salary]{ width: 80px; margin: 0 10px 0 0;}
form input[name=whenYear]{ width: 80px; margin: 0 10px 0 0;}
form input[name=whenMonth]{ width: 60px; margin: 0 10px 0 0;}

form .birth ul{ overflow: hidden;}
form .birth ul li{ position: relative; margin: 0 0 0 10px; overflow: hidden; float: left;}
form .birth ul li:first-child{ margin: 0;}

form .academic > div{ overflow: hidden;}
form .academic > div div:nth-child(n+2){ margin: 10px 20px 0 0; float: left;}

form .when > div{ overflow: hidden;}
form .when > div div{ margin: 0 20px 0 0; float: left;}

/* select box */
form .select{ height: 40px; position: relative; z-index: 1; border: 3px solid #e5e5e5; overflow: hidden;}
form .select::after{ content: ""; width: 0; height: 0; margin: 2px 0 0; border: 5px solid transparent; border-top-width: 7px; border-top-color: #be0716; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
form select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; width: 130%; height: 34px; padding: 0 0 0 15px; border: none; border-radius: 0; font-size: 13px; cursor: pointer;}
form .type .select{ width: 300px;}
form .pref .select{ width: 180px;}
form .academic .select{ width: 100px;}

/* radio */
form .radio{ overflow: hidden;}
form .radio li{ float: left;}
form .radio input{ display: none;}
form .radio label{ display: inline-block; height: 22px; margin: 0 30px 0 0; padding: 0 0 0 30px; position: relative; line-height: 22px; cursor: pointer;}
form .radio label::before{ content: ""; width: 22px; height: 22px; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 3px solid #ccc; border-radius: 50%; box-sizing: border-box;}
form .radio input[type="radio"]:checked + label::after{ content: ""; background: #be0716; width: 8px; height: 8px; position: absolute; top: 50%; left: 7px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%;}


/* placeholder */
form .placeholder{ position: absolute; top: 50%; left: 13px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #ccc;}

/* error text */
form .err{ display: block; line-height: 1.5; color: #be0716;}


/* privacy policy */
form section{ border: 1px solid #ddd; margin: 20px 0 30px; padding: 15px;}
form section h4{ font: bold 14px/1 "游ゴシック",YuGothic,sans-serif; background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; margin: 0; padding: 0 0 15px; letter-spacing: 1px;}
form section p{ background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; margin: 10px 0; padding: 0 0 10px;}
form section dl{ height: 150px; margin: 10px 0 0 0; font-size: 11px; overflow-y: scroll;}
form section dl dt{ margin: 7px 0 0; font-weight: bold;}
form section dl dt:first-of-type{ margin-top: 0;}
form section dl dt::before{ content: "■";}
form section dl dd{ line-height: 1.5;}
form section dl dd ul li{ padding: 0 0 0 1em; text-indent: -1em; }
form section dl dd ul li:before{ content:"・" }
form section dl dd a{ margin: 0 3px; color: #333; text-decoration: underline; }
/* checkbox */
form .privacy{ max-width: 500px; margin: 30px auto 0; padding: 15px; border: solid 2px #ddd;}
form .privacy p{ background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; margin: 0 0 10px; padding: 0 0 10px; font-weight: bold; line-height: 1.8; text-align: center;}
form .privacy p a{ padding: 0 0 4px; position: relative; color: #333; transition: color .15s linear; overflow: hidden;}
form .privacy p a:hover{ color: #dd0716;}
form .privacy p a::before,
form .privacy p a::after{ content: ""; height: 1px; position: absolute; bottom: 0; left: 0;}
form .privacy p a::before{ background: #bbb; width: 100%;}
form .privacy p a::after{ background: #dd0716; width: 0; transition: width 0s ease-out;}
form .privacy p a:hover::after{ width: 100%; height: 2px; left: 0; transition: width .4s ease-out;}
form .privacy p br{ display: none;}
@media print, screen and (max-width:420px){
  form .privacy p br{ display: block;}
}

form .agree{ display: inline-block; margin: 8px 0 0 0;}
form .agree input{ display: none; }
form .agree label{ display: block; padding: 0 0 0 30px; position: relative; line-height: 2;}
form .agree input + label::before{ content: ""; display: block; width: 14px; height: 14px; position: absolute; top: 3px; left: 0; border: #e5e5e5 3px solid;}
form .agree input:checked + label::after{ content: ""; display: block; width: 7px; height: 13px; position: absolute; top: 1px; left: 5px; border-right: 3px solid #dd0716; border-bottom: 3px solid #dd0716; transform: rotate(45deg); cursor: pointer;}

form .g-recaptcha{ margin: 40px 0 0 0;}
form .g-recaptcha > div{ margin: 0 auto;}


/* submit */
form .btns{ margin: 40px 0 0; overflow: hidden;}
form .btns li input,
form .btns li a{ display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #be0716; width: 100%; height: 50px; padding: 0; border: none; font: bold 14px/50px "游ゴシック",YuGothic,sans-serif; color: #fff; text-align: center; cursor: pointer; transition: background .2s linear;}
form .btns li input[disabled]{ background: #ccc;}

.template form .btns li{ width: 100%; max-width: 200px; margin: 0 auto;}

.preview form .btns li{ width: 48%; float: left;}
.preview form .btns li:last-child{ float: right;}

/* thanks */
.thanks .main-block div{ padding: 15px 0 0;}
.thanks .main-block div > p{ padding: 0 0 30px 0; }
.thanks .main-block div > p > br{ display: none;}
.thanks .main-block div > ul{ width: 100%; margin: 0px auto; padding: 10px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;}
.thanks .main-block div > ul > li > a{ color: #333; text-decoration: underline;}
.thanks .main-block div > a{ display: block; background: #be0716; width: 200px; height: 50px; margin: 40px auto 0; font: bold 14px/50px "游ゴシック",YuGothic,sans-serif; color: #fff; text-align: center; transition: background .2s linear;}
.thanks .main-block div > a:hover{ background: #363480;}


/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  .wrap{ width: calc(100% + 40px); margin: 0 -20px; padding: 60px 20px 0;}
  
  ul.step li{ height: 64px; padding: 0 0 0 20px; font-size: 16px; line-height: 62px;}
  ul.step li::after{ width: 20px; height: 68px; top: 32px; right: -20px; }
  
  form{ padding-top: 40px;}
  form > p{ text-align: center;}
  
  form > dl{ margin-top: 40px; position: relative; overflow: hidden; z-index: 2;}
  form > dl::before{ content: ""; background: #f6f6f6; width: 280px; height: 100%; position: absolute; top: 0; left: 0; }
  
  form > dl > dt{ background-color: none; width: 280px; padding: 30px 40px; float: left; clear: both;}
  .template form > dl > dt{ padding-top: 35px;}
  
  form > dl > dt span{ margin: 0 0 0 15px; position: static; -webkit-transform: none; transform: none;}
  form > dl > dd{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px; width: calc(100% - 280px); padding: 30px 40px 20px 40px; float: left;}
  form > dl > dd a{ color: #dd0716; text-decoration: underline;}
  form > dl > dd dl dt{ width: 40px; text-align: right;}
  form > dl > dd dl dd{ width: 150px; position: relative; float: left;}
  form > dl > dd dl dd:first-of-type{ margin: 0 30px 0 0;}
  
  form input[type=text],
  form input[type=email],
  form input[type=tel],
  form textarea{ font-size: 14px;}
  form textarea{ height: 250px; padding: 16px;}
  form input[type=text],
  form input[type=email],
  form input[type=tel]{ padding: 0 16px;}
  
  form input[name=b_year]{ width: 100px; margin: 0 5px 0 0;}
  form input[name=b_month]{ width: 70px; margin: 0 5px 0 0;}
  form input[name=b_day]{ width: 70px; margin: 0 5px 0 0;}
  
  form input[name=academicSchool]{ width: 300px;}
  
  form .academic > div{ overflow: hidden;}
  form .academic > div div{ margin: 0 20px 0 0 !important; float: left;}
  
  /* placeholder */
  form .placeholder{ left: 18px;}
  
  /* privacy policy */
  form section{ margin: 50px 0; padding: 30px;}
  form section h4{ font-size: 18px; text-align: center; margin: 0; padding: 0 0 30px;}
  form section p{ margin: 10px 0 30px; padding-bottom: 20px; font-size: 12px; text-align: center;}
  form section dl{ height: 250px; margin: 20px 0 0 0;}
  form section dl dt{ margin-top: 20px;}
  
  form .privacy{ margin-top: 50px; padding: 25px 40px;}
  form .privacy p{ margin-bottom: 15px; padding-bottom: 15px;}
  
  form .g-recaptcha{ margin: 70px 0 0 0;}
  
  /* submit */
  form .btns{ margin: 60px auto 0; overflow: hidden;}
  form .btns li input,
  form .btns li a{ height: 70px; font-size: 18px; line-height: 70px;}
  
  .template form .btns li{ max-width: 300px;}
  .preview form .btns{ width: 600px;}
  .preview form .btns li{ width: 270px;}
  
  /* thanks */
  .thanks .main-block div{ padding-top: 60px;}
  .thanks .main-block div > p{ text-align: center;}
  .thanks .main-block div > p > br{ display: block;}
  .thanks .main-block div > a{ width: 260px; height: 60px; margin-top: 50px; font-size: 16px; line-height: 60px;}
  .thanks .main-block div > ul{ width: 500px; margin: 20px auto; padding: 20px 0;}

  
}



@media print, screen and (min-width:1020px){
  
  /* contents
  **********************************************************************/
  .wrap{ width: 100vw; margin: 0 calc(((100vw - 980px) / 2) * -1); padding: 60px calc((100vw - 980px) / 2) 0;}
  
}



@media print, screen and (min-width:1100px){
  
  /* contents
  **********************************************************************/
  .wrap{ width: 1100px; margin: 0 -60px; padding: 60px 60px 0;}
  
}