/*-------------
key-visual
-------------*/
.recruit-root .key-visual.special {
  background-image: url("/english/images/recruit/special/special_kv.jpg");
}

.no-tab .key-visual, .visual-header.no-tab.special {
  height: 515px;
}
.key-visual span {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(61,74,78,0.3);
}


.visual-header h1 span.special {
  margin: 0 auto 5px;
  font-weight: 700;
}

/*-------------
contents
-------------*/
.specialcontents-inner span {
  font-family: "游ゴシック体","YuGothic","Yu Gothic";
}
.specialcontents-inner .box01{
  position:relative;
  width:1200px;
  margin:40px auto 0;
  display: flex;
  justify-content:space-between;
}
.specialcontents-inner .box02{
  position:relative;
  width:580px;
  margin:0 auto;
}
.specialcontents-inner .box03{
  position:relative;
  width:374px;
  margin:0 35px 0 0;
}
.col-03 .box03,
.col-03 section{
  position:relative;
  display:inline-block;
}
.col-03 #special-box-09.box03{
  margin-right:0;
}

/*-------------
searchbtn
-------------*/
a:hover img.searchbtn {
  opacity:1;
}

img.searchbtn.btn01,
img.searchbtn.btn03,
img.searchbtn.btn05,
img.searchbtn.btn06,
img.searchbtn.btn10,
img.searchbtn.btn11,
img.searchbtn.btn12,
img.searchbtn.btn13,
img.searchbtn.btn14{
  /*display: none;*/
  position:absolute;
  top:-30px;
  left:260px;
  z-index:2;
}
img.searchbtn.btn04,
img.searchbtn.btn15{
  /*display: none;*/
  position:absolute;
  top:-30px;
  right:260px;
  z-index:2;
}
img.searchbtn.btn02{
  /*display: none;*/
  position:absolute;
  top:-30px;
  left:259px;
  z-index:2;
}
img.searchbtn.btn07{
  /*display: none;*/
  position:absolute;
  top:-30px;
  right: 158px;
  z-index:2;
}

img.searchbtn.btn08,
img.searchbtn.btn09{
  /*display: none;*/
  position:absolute;
  top:-30px;
  right: 157px;
  z-index:2;
}


.modal-inner{
  text-align: center;
}
.modal-inner h3{
  font-size:30px;
  padding:70px 0 50px 0;

}
.modal-inner span{
  font-size:15px;
}
.modal-inner p.text{
  width:500px;
  margin:50px auto;
  font-size:15px;
}
.modal-inner p.text span{
  margin:30px 0 0;
  font-size:12px;
}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: calc(100% - 50px);
  min-width: 565px;
  height: 100%;
  margin: 20px auto;
}
@media screen and (max-width: 635px)  {
  .mfp-content {
    overflow-x: scroll;
  }
}



/*-------------
css-sprites
-------------*/
#special-box-01,
#special-box-02,
#special-box-03,
#special-box-04,
#special-box-05,
#special-box-06,
#special-box-07,
#special-box-08,
#special-box-09,
#special-box-10,
#special-box-11,
#special-box-12,
#special-box-13,
#special-box-14,
#special-box-15{
  z-index:1;
  font-family:"MS PゴシックＭＳ Ｐゴシック",sans-serif;
}
#special-box-01{
  background-image: url("/english/images/recruit/special/bg_01.png");
  height:400px;
}
#special-box-02{
  background-image: url("/english/images/recruit/special/bg_02.png");
  height:480px;
}
#special-box-03{
  background-image: url("/english/images/recruit/special/bg_03.png");
  height:480px;
}
#special-box-04{
  background-image: url("/english/images/recruit/special/bg_04.png");
  height:400px;
}
#special-box-05{
  background-image: url("/english/images/recruit/special/bg_05.png");
  height:480px;
}
#special-box-06{
  background-image: url("/english/images/recruit/special/bg_06.png");
  height:480px;
}
#special-box-07{
  background-image: url("/english/images/recruit/special/bg_07.png");
  height:480px;
}
#special-box-08{
  background-image: url("/english/images/recruit/special/bg_08.png");
  height:480px;
}
#special-box-09{
  background-image: url("/english/images/recruit/special/bg_09.png");
  height:480px;
}
#special-box-10{
  background-image: url("/english/images/recruit/special/bg_10.png");
  height:480px;
}
#special-box-11{
  background-image: url("/english/images/recruit/special/bg_11.png");
  height:480px;
}
#special-box-12{
  background-image: url("/english/images/recruit/special/bg_12.png");
  height:400px;
}
#special-box-13{
  background-image: url("/english/images/recruit/special/bg_13.png");
  height:480px;
}
#special-box-14{
  background-image: url("/english/images/recruit/special/bg_14.png");
  height:480px;
}
#special-box-15{
  background-image: url("/english/images/recruit/special/bg_15.png");
  height:400px;
}

/*---special-box-01---*/
#special-box-01 span.box01-female-q {
  position:absolute;
  right: 444px;
  top: 100px;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
}
#special-box-01 span.box01-male-q {
  position:absolute;
  right: 70px;
  top: 100px;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
}
#special-box-01 span.per {
  position:absolute;
  bottom: 12px;
  color: #ff0000;
  font-size: 45px;
  font-weight: bold;
}

#special-box-01 .female{
  position: absolute;
  width:150px;
  right:290px;
  bottom:52px;
}
#special-box-01 .male{
  position: absolute;
  width:150px;
  right:130px;
  bottom:52px;
}

/*---special-box-02---*/
#prefectures-01{
  position:absolute;
  top: 178px;
  left: 163px;
}
#prefectures-02{
  position: absolute;
  bottom: 130px;
  right: 154px;
}
#prefectures-03{
  position:absolute;
  bottom: 52px;
  left: 133px;
}
#prefectures-04{
  position:absolute;
  bottom: 135px;
  left: 134px;
}
#prefectures-05{
  position:absolute;
  bottom: 130px;
  left: 37px;
}
#prefectures-06{
  position:absolute;
  bottom: 217px;
  right: 44px;
}
#prefectures-07{
  position:absolute;
  bottom: 87px;
  right: 42px;
}
/*---special-box-03---*/
#special-box-03 span.box03-q {
  position:absolute;
  right: 230px;
  top: 138px;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
}

/*---special-box-05---*/
#special-box-05 span.box05-q {
  position:absolute;
  /*right: 233px;*/
  bottom: 0;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
#special-box-05 span.about{
  position:absolute;
  bottom: 18px;
  left:169px;
  color: #ff0000;
  font-size: 45px;
  font-weight: bold;
}
#special-box-05  span.ken{
  position:absolute;
  bottom: 18px;
  right:169px;
  color: #ff0000;
  font-size: 45px;
  font-weight: bold;
}
/*---special-box-04---*/
#minute-hand{
  position: absolute;
  left: 289px;
  top: 78px;
}
#clock-hover{
  position: absolute;
  left: 179px;
  top: 52px;
 }
#overtime-01{
  position:absolute;
  left:47px;
  bottom:65px;
}
#overtime-02{
  position:absolute;
  left: 207px;
  bottom:65px;
}

#overtime-03{
  position:absolute;
  left: 423px;
  bottom:65px;
}

#overtime-04{
  position:absolute;
  left:37px;
  bottom:150px;
}

/*---special-box-05---*/
#baloon-01,
#baloon-02,
#baloon-03,
#baloon-04,
#baloon-05,
#baloon-06{
  position:absolute;
  left:37px;
  bottom:75px;
}
/*---special-box-06---*/
#special-box-06 span.box06-female-q {
  position:absolute;
  right: 444px;
  top: 180px;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
}
#special-box-06 span.box06-male-q {
  position:absolute;
  right: 70px;
  top: 180px;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
}
#special-box-06 span.per {
  position:absolute;
  bottom: 12px;
  color: #ff0000;
  font-size: 45px;
  font-weight: bold;
}

#special-box-06 .female{
  position: absolute;
  width:150px;
  right:290px;
  bottom:52px;
}
#special-box-06 .male{
  position: absolute;
  width:150px;
  right:130px;
  bottom:52px;
}

/*---special-box-07---*/
#character-01{
  position:absolute;
  bottom: 117px;
  left: 41px;
}
#character-02{
  position:absolute;
  bottom: 131px;
  left: 41px;
}
#character-03{
  position:absolute;
  bottom: 113px;
  left: 120px;
}
#character-04{
  position:absolute;
  bottom: 110px;
  left: 199px;
}
#character-05{
  position:absolute;
  bottom: 125px;
  left: 226px;
}
#character-06{
  position:absolute;
  bottom: 109px;
  left: 291px;
}
/*---special-box-08---*/
#special-box-08 span.box08-q {
  position:absolute;
  right: 164px;
  bottom: 135px;
  color:#ff0000;
  font-size:90px;
  font-weight: bold;
}
#special-box-08 span.per {
  position:absolute;
  bottom: 0;
  color: #ff0000;
  font-size: 80px;
  font-weight: bold;
}
#special-box-08 div#heart-color-on{
  position: absolute;
  bottom: 54px;
  left: 55px;
  background: rgba(0, 0, 0, 0) url("/english/images/recruit/special/heart_bg.png") no-repeat scroll 100% 100%;
  height: 230px;
  width: 280px;
}

/*---special-box-09---*/
#special-box-09 span.box09-q {
  position:absolute;
  right: 155px;
  bottom: 135px;
  color:#ff0000;
  font-size:90px;
  font-weight: bold;
}
#special-box-09 span.per {
  position:absolute;
  bottom: 0;
  color: #ff0000;
  font-size: 80px;
  font-weight: bold;
}
/*---special-box-10---*/
div#howmany{
  position: absolute;
  bottom: 46px;
  left: 41px;
  background: url("/english/images/recruit/special/data.png") no-repeat 100% 100%;
  height: 296px;
  width:500px;
  z-index:1;
}
div#graph{
  position: absolute;
  bottom: 46px;
  left: 41px;
  background: url("/english/images/recruit/special/graph.png") no-repeat 100% 100%;
  height: 296px;
  width:500px;
  z-index:0;
}
/*---special-box-11---*/
#special-box-11 span.box11-q {
  position:absolute;
  right: 270px;
  bottom: 200px;
  color:#ff0000;
  font-size:100px;
  font-weight: bold;
}
#cal-01{
  position: absolute;
  bottom: 134px;
  left:41px;
}
#cal-02{
  position: absolute;
  bottom: 134px;
  left:128px;
}
#cal-03{
  position: absolute;
  bottom: 134px;
  left:215px;
}
#cal-04{
  position: absolute;
  bottom: 134px;
  left:303px;
}
#cal-05{
  position: absolute;
  bottom: 134px;
  left:390px;
}
#cal-06{
  position: absolute;
  bottom: 134px;
  left:477px;
}
#cal-07{
  position: absolute;
  bottom: 50px;
  left:41px;
}
#cal-08{
  position: absolute;
  bottom: 50px;
  left:128px;
}
#cal-09{
  position: absolute;
  bottom: 50px;
  left:215px;
}
#cal-10{
  position: absolute;
  bottom: 50px;
  left:303px;
}
#cal-11{
  position: absolute;
  bottom: 50px;
  left:390px;
}
#cal-12{
  position: absolute;
  bottom: 50px;
  left:477px;
}
/*---special-box-12---*/
#special-box-12 span.box12-female-q {
  position:absolute;
  right: 444px;
  top: 100px;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
}
#special-box-12 span.box12-male-q {
  position:absolute;
  right: 70px;
  top: 100px;
  color:#ff0000;
  font-size:80px;
  font-weight: bold;
}
#special-box-12 span.per {
  position:absolute;
  bottom: 12px;
  color: #ff0000;
  font-size: 45px;
  font-weight: bold;
}

#special-box-12 .female{
  position: absolute;
  width:150px;
  right:290px;
  bottom:52px;
}
#special-box-12 .male{
  position: absolute;
  width:150px;
  right:130px;
  bottom:52px;
}
/*---special-box-13---*/
#special-box-13 span.box13-q {
  position:absolute;
  right: 273px;
  bottom: 200px;
  color:#ff0000;
  font-size:100px;
  font-weight: bold;
}
#special-box-13 span.per {
  position:absolute;
  bottom: 7px;
  color: #ff0000;
  font-size: 80px;
  font-weight: bold;
}
/*---special-box-14---*/
#special-box-14 span.box14-q {
  position:absolute;
  background:#fff;
  padding:0 10px;
  right: 90px;
  bottom: 28px;
  color:#ff0000;
  font-size:67px;
  font-weight: bold;
}
#special-box-14 div#progress{
  position: absolute;
  background: url("/english/images/recruit/special/bg_peogress.gif");
  width:40px;
  height:30px;
  bottom: 128px;
  left: 40px;
  text-align: right;
}
#special-box-14 span#circle{
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 15px;/* width,heightの半分 */
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-color: #ff0000;/* 円の色 */
  z-index: 2;
}

/*---special-box-15---*/
#cart-01,
#cart-02,
#cart-03,
#cart-04,
#cart-05,
#cart-06{
  position: absolute;
  bottom: 57px;
  left:141px;
}
#cart-07{
  position: absolute;
  bottom: 240px;
  left:130px;
}
/*-------------
relate_contents
-------------*/

.specialcontents-inner #relate_contents{
  width:100%;
  height:350px;
  background:#fafafa;
  margin: 40px  0;
}
#relate_contents .relate_contents_box{
  width:1200px;
  margin:0 auto;
}
#relate_contents .relate_contents_box .flexwrap{
  display: flex;
  justify-content: space-between;
}

#relate_contents h2{
font-size:20px;
padding:30px 0;
text-align:center;
}
.specialcontents-inner #relate_contents a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  margin: 0 35px 0 0;
  padding: 0;
  width: 374px;
  height:194px;
  display: inline-block;
}
.specialcontents-inner #relate_contents a img {
  margin-bottom: 18px;
  width: 374px;
}
.specialcontents-inner #relate_contents a > span {
  background: rgba(0, 0, 0, 0) url("/english/images/common/r_right_arrow_m.png") no-repeat scroll right center;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  padding-right: 16px;
}
.specialcontents-inner #relate_contents a#relate3{
margin:0;
}