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

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


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

.wrap h3 a{ display: block; width: calc((100% - 16px) / 2); height: 45px; position: absolute; top: 14px; border: 2px solid #be0716; font: bold 12px/41px "游ゴシック",YuGothic,sans-serif; color: #be0716; text-align: center;}
.wrap h3:nth-of-type(1) a{ left: 0;}
.wrap h3:nth-of-type(2) a{ right: 0;}
.wrap h3:nth-of-type(3) a{ right: 0;}
.wrap h3 a.on{ background: #be0716; color: #fff;}

.wrap > div.mid-career,
.wrap > div.part-time{ display: none;}
.wrap > div section{ margin: 15px 0 0; border: 1px solid #be0716;}
.wrap > div section:first-child{ margin-top: 0;}
.wrap > div section h4 a,
.wrap > div section h4 span{ display: block; background: url(../img/btn_open.svg) no-repeat right 10px top 8px / 27px 27px #be0716; height: 44px; padding: 0 15px; font: bold 13px/46px "游ゴシック",YuGothic,sans-serif; color: #fff;}
.wrap > div section h4 a.on{ background-image: url(../img/btn_close.svg);}
.wrap > div section > div{ position: absolute; z-index: -1; visibility: hidden;}
.wrap > div section > div.on{ height: 0; position: static; z-index: auto; overflow: hidden; visibility: visible; transition: height .5s ease-out;}
.wrap > div section table{ width: 100%;}
.wrap > div section table th{ display: block; background: #f6f6f6; width: 100%; padding: 10px 15px; font-weight: bold;}
.wrap > div section table td{ display: block; background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; width: 100%; padding: 10px 15px;}
.wrap > div section table td a{ color: #333; text-decoration: underline;}
.wrap > div section .submit{ padding: 15px;}
.wrap > div section .submit input[type=submit]{ display: none;}
.wrap > div section .submit label,
.wrap > div section .submit a{ display: block; background: #be0716; width: 100%; padding: 18px; font: 600 17px/1 "futura-pt",sans-serif; color: #fff; text-align: center; letter-spacing: 2px; transition: background .2s linear; cursor: pointer;}
.wrap > div section .submit label:hover,
.wrap > div section .submit a:hover{ background: #363480;}
.wrap > div section .submit label span,
.wrap > div section .submit a span{ display: block; margin: 3px 0 0; font: 500 12px/1 "游ゴシック",YuGothic,sans-serif;}
.wrap > div section .mynavi{ padding: 20px;}
.wrap > div section .mynavi > p{ text-align: center;}
.wrap > div section .mynavi > p > a{ color: #333; text-decoration: underline;}
.wrap > div section .mynavi > a{ display: block; width: 195px; height: 60px; margin: 10px auto 0 auto;}


/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  .wrap{ width: calc(100% + 40px); margin: 0 -20px; padding: 185px 20px 0;}
  
  .wrap h3 a{ width: 480px; height: 64px; top: 60px; font-size: 16px; line-height: 60px;}
  .wrap h3:nth-of-type(1) a{ left: 20px;}
  .wrap h3:nth-of-type(2) a{ right: 20px;}
  
  .wrap > div section{ margin-top: 30px;}
  .wrap > div section h4 a,
  .wrap > div section h4 span{ background-position: right 20px top 15px; background-size: 33px 33px; height: 64px; padding: 0 40px; font-size: 16px; line-height: 64px;}
  .wrap > div section table th{ display: table-cell; background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px #f6f6f6; width: 216px; padding: 25px 40px; font-weight: normal; vertical-align: middle;}
  .wrap > div section table td{ display: table-cell; width: auto; padding: 10px 15px;}
  .wrap > div section .submit{ padding: 39px;}
  .wrap > div section .submit label,
  .wrap > div section .submit a{ width: 360px; margin: 0 auto; padding: 20px; font-size: 25px;}
  .wrap > div section .submit label span,
  .wrap > div section .submit a span{ margin: 8px 0 0; font-size: 14px;}
  .wrap > div section .mynavi{ padding: 39px;}
  
}




@media print, screen and (min-width:1020px){
  
  /* contents
  **********************************************************************/
  .wrap{ width: 100vw; margin: 0 calc(((100vw - 980px) / 2) * -1); padding: 185px calc((100vw - 980px) / 2) 0;}
  
  /*
  .wrap h3:nth-of-type(1) a{ left: calc((100vw - 980px) / 2);}
  .wrap h3:nth-of-type(3) a{ right: calc((100vw - 980px) / 2);}
  
  
}



@media print, screen and (min-width:1100px){
  
  /* contents
  **********************************************************************/
  .wrap{ width: 1100px; margin: 0 -60px; padding: 185px 60px 0;}
  
  .wrap h3:nth-of-type(1) a{ left: 60px;}
  .wrap h3:nth-of-type(2) a{ right: 60px;}
  
}