@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

/* ==========================================================================
	CONTENT
========================================================================== */
#staff-faq dl{
  margin-bottom:15px;
}
#staff-faq01 dt{ background-image: url(../images/style-images/staff-icon01.gif);}
#staff-faq02 dt{ background-image: url(../images/style-images/staff-icon02.gif);}
#staff-faq03 dt{ background-image: url(../images/style-images/staff-icon03.gif);}
#staff-faq04 dt{ background-image: url(../images/style-images/staff-icon04.gif);}
#staff-faq05 dt{ background-image: url(../images/style-images/staff-icon05.gif);}
#staff-faq06 dt{ background-image: url(../images/style-images/staff-icon06.gif);}
#staff-faq07 dt{ background-image: url(../images/style-images/staff-icon07.gif);}
#staff-faq08 dt{ background-image: url(../images/style-images/staff-icon08.gif);}

#staff-faq dt{
  background-position: 0 0;
  background-size:36px;
  background-repeat:no-repeat;
  font-size:1.2em;
  font-weight:bold;
  color:#ce8234;

  padding:10px 0 10px 45px;
}
#staff-faq dd{
  padding:0 0 0 45px;
}

.back-style a{
  font-size:1.2em;
  color:#09a3ea;
  text-decoration:underline;
}
.back-style a:hover{
  text-decoration:none;
}



/* ------------------------------------------------------------
	 PC   800px -
------------------------------------------------------------ */

@media screen and (min-width: 800px) {
#head{
  border-bottom:1px solid #c6c6c6;
}

#staff ul{
  overflow:hidden;
  width:1000px;
}
#staff li{
  float:left;
  width:310px;
  margin-right:15px;
  margin-bottom:20px;
}
#staff li img{
  width:100%;
  height:auto;
}

/*main*/

#main{
  background-color:#ce8234;
}
#main .float-l{
  width:360px;
  text-align:center;
  padding-top:110px;
}
#main .float-l img{
  width:300px;
  height:auto;
}
#main .float-r{
  width:600px;
}
#main .float-r img{
  width:100%;
  height:auto;
}

#staff-faq{
  float:left;
  width:610px;
}
#staff-recommend{
  float: right;
  width:225px;
  margin-left:20px;
  text-align:center;
}
#staff-recommend .item{
  max-width:170px;
  height:auto;
}

#staff-recommend h2{
  width:186px;
  margin:0 auto 10px auto;
}
#staff-recommend h3{
  font-size:1.1em;
  margin:0 auto 10px auto;
  text-align:left;
}
#staff-recommend p{
  line-height:1.5em;
  text-align:left;
}

/*staff-step*/

#staff-step{
  clear:both;
  width:610px;
}
.step-dot{
  padding-bottom:60px;
  background:url(../images/style-images/step-dot.gif) 0 100% no-repeat;
}
#staff-step h2{
  margin-bottom:10px;
}
#staff-step table{
  width:100%;
}
#staff-step th{
  width:86px;
  background:url(../images/style-images/step-line.gif) 0 0 repeat-y;
}

#staff-step li{
  padding:15px 0 15px 85px;
}
.event01{ background: url(../images/style-images/step-icon.gif) 5px 0 no-repeat;}
.event02{ background: url(../images/style-images/step-event01.gif) 5px 15px no-repeat;}
.event03{ background: url(../images/style-images/step-event02.gif) 5px 15px no-repeat;}
.event04{ background: url(../images/style-images/step-event03.gif) 5px 15px no-repeat;}
.event05{ background: url(../images/style-images/step-event04.gif) 5px 15px no-repeat;}
.event06{ background: url(../images/style-images/step-event05.gif) 5px 15px no-repeat;}
.event07{ background: url(../images/style-images/step-event06.gif) 5px 15px no-repeat;}
.event08{ background: url(../images/style-images/step-event07.gif) 5px 15px no-repeat;}
.event09{ background: url(../images/style-images/step-event08.gif) 5px 15px no-repeat;}

.line-last{
  background:url(../images/style-images/step-dot.gif) 0 100% repeat-y !important;
}

}

/* ------------------------------------------------------------
	 TABLET   for - 799px
------------------------------------------------------------ */

@media screen and (max-width:799px) {
#staff li{
  float:left;
  width:33%;
  text-align:center;
  margin-bottom:20px;
}
#staff li img{
  width:95%;
  height:auto;
}

/*main*/

#main{
  background-color:#ce8234;
}
#main .float-l{
  width:40%;
  text-align:center;
  padding-top:50px;
}
#main .float-l img{
  width:90%;
  height:auto;
}
#main .float-r{
  width:60%;
}
#main .float-r img{
  width:100%;
  height:auto;
}

#staff-faq{
  float:left;
  width:70%;
}
#staff-recommend{
  float: right;
  width:25%;
}
#staff-recommend .item{
  width:100%;
  height:auto;
}

#staff-recommend h2{
  margin:0 auto 10px auto;

}
#staff-recommend h3{
  margin:0 auto 10px auto;
  font-size:1.1em;
}
#staff-recommend p{
  line-height:1.5em;
}

#staff-step{
  clear:both;
  width:70%;
}
.step-dot{
  padding-bottom:55px;
  background:url(../images/style-images/step-dot.gif) 0 100% no-repeat;
  background-size:70px auto;
  -moz-background-size:70px auto;
}



#staff-step h2{
  margin-bottom:20px;
}
#staff-step table{
  width:100%;
}
#staff-step th{
  width:70px;
  background:url(../images/style-images/step-line.gif) 50% 0 repeat-y;
  background-size:70px auto;
}
.line-last{
  background:url(../images/style-images/step-dot.gif) 50% 100% repeat-y !important;
  background-size:70px auto;
}

#staff-step li{
  padding:10px 0 10px 60px;
}
.event01{ background: url(../images/style-images/step-icon.gif) 5px 0 no-repeat; background-size:45px auto;}
.event02{ background: url(../images/style-images/step-event01.gif) 5px 10px no-repeat; background-size:45px auto;}
.event03{ background: url(../images/style-images/step-event02.gif) 5px 10px no-repeat; background-size:45px auto;}
.event04{ background: url(../images/style-images/step-event03.gif) 5px 10px no-repeat; background-size:45px auto;}
.event05{ background: url(../images/style-images/step-event04.gif) 5px 10px no-repeat; background-size:45px auto;}
.event06{ background: url(../images/style-images/step-event05.gif) 5px 10px no-repeat; background-size:45px auto;}
.event07{ background: url(../images/style-images/step-event06.gif) 5px 10px no-repeat; background-size:45px auto;}
.event08{ background: url(../images/style-images/step-event07.gif) 5px 10px no-repeat; background-size:45px auto;}
.event09{ background: url(../images/style-images/step-event08.gif) 5px 10px no-repeat; background-size:45px auto;}

}
/* ------------------------------------------------------------
	 SP　599pxまで
------------------------------------------------------------ */

@media screen and (max-width: 599px) {
#staff li{
  float:left;
  width:50%;
  margin-bottom:20px;
}
#staff li img{
  width:95%;
  height:auto;
}

/*main*/

#main{
  background-color:#ce8234;
}
#main .float-l{
  width:100%;
  text-align:center;
  padding-top:20px;
  padding-bottom:20px;
}
#main .float-l img{
  width:90%;
  height:auto;
}
#main .float-r{
  width:100%;
}
#main .float-r img{
  width:100%;
  height:auto;
}

#staff-faq{
  float:none;
  width:100%;
}
#staff-recommend{
  float: none;
  width:100%;
}
#staff-recommend .item{
  float: left;
  width:40%;
  height:auto;
}
#staff-recommend h2{
  width:60%;
  margin:0 0 10px 0;
}
#staff-recommend h3{
  width:50%;
  margin:0 0 10px 45%;
}
#staff-recommend p{
  margin:0 0 0 45%;
}

#staff-step{
  width:100%;
}

}