@charset "utf-8";

#header .content {
    margin: 0 auto;
    max-width: 1000px;
    width: 96%;
    padding:0 0 0px 0;
}
#jobTopImg {
	margin: 0 0 30px 0;
}
#jobTopImg img {
	height: auto;
	width: 100%;
}
.contentsInner {
	margin-left: 2%;
    margin-right: 2%;
    overflow: hidden;
}
.jobContent h2 {
	color: #004ea2;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
h2.title1 {
	border-bottom: 1px solid #c5c7c8;
    margin-bottom: 10px;
	padding-bottom: 6px;
}
p.job_expo {
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	margin: 30px 0 30px 0;
}

.jobInBox {
	border-bottom: 1px dotted #c5c7c8;
	margin-bottom: 30px;
	padding-bottom: 30px;
}
.jobInBox .imgCen {
	text-align: center;
}
.txtCenBol {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	padding: 0 0 20px 0;
}
.txtCenBol2 {
	padding: 20px 0 20px 0;
}

.jobTxt {
  text-align: center;
}

img.ttl_01  {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}

img.ttl_02  {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 280px;
}

img.ttl_03  {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}

img.ttl_04  {
  padding-top: 30px;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}



.jobTxt h3{
	color: #004ea2;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    margin: 0 0 20px;
}
.jobTxt p {
	margin: 0;
}

.jobInWrap {
	overflow: hidden;
    display:table;
    width: 100%;
}
.jobInWrap .JIW-L{
	width: 40%;
	background-color: #f9f9f9;
	padding: 16px 0;
    display:table-cell;
    border-right: 3px solid #fff;
}
.jobInWrap .JIW-R{
	width: 40%;
	background-color: #f9f9f9;
	padding: 16px 0;
    display:table-cell;
    border-left: 3px solid #fff;
}
.jobInWrap p{
	font-size: 13px;
	text-align: center;
}
.JIW-txt {
	font-size: 15px;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    padding: 0 0 10px;
}
.JIW-tb {
	color: #fc5074;
	font-size: 15px;
}
.JIW-txtS {
	font-size: 13px;
}
.JIB-Cen {
	width: 49%;
	background-color: #f9f9f9;
	padding: 16px 0;
	text-align: center;
	margin: 0 auto;
}
.BtnWrap {
	overflow: hidden;
	width: 70%;
	margin: 30px auto;
}
.BtnWrap p {
	width: 48%;
	float: left;
	text-align: center;
	margin: 10px 5px;
}
.BtnWrap a {
  background: url(../images/job06/arrow_icon.png) 97% center no-repeat;
  background-position: -webkit-calc(100% - 8px) center;
  background-position: calc(100% - 8px) center;
  background-color: #fc5074;
  box-sizing: border-box;
  color: #fff!important;
  display: block;
  padding: 20px 20px 20px 10px;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
}
.BtnWrap a:hover {
  filter: alpha(opacity=80);  /* ie lt 8 */
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  opacity: .8;
  zoom: 1;
}
.BtnWrap .link-inner {
  margin-right: -10px;
}
.jobInBox2 {
	border: none;
	margin-bottom: 30px;
	padding-bottom: 30px;
}
.voice h3 {
	font-size: 20px;
	font-weight: bold;
	color: #fc5074;
	padding: 20px 0;
}
.voice p {
	font-size: 15px;
	font-weight: bold;
	padding: 0 0 10px;
}
.voice dl {
	padding: 0 0 10px;
}
.voice dt {
	font-weight: bold;
}
.voiceWrap {
	overflow: hidden;
	padding: 20px 0 0;
}

.voiceWrap .picImg {
    width: 100%;
    float: none;
    text-align: center;
}

.voice img {
  margin: 0 auto!important;
  width: 64%;
}

.itvImg {
  max-width: 600px;
  margin: 0 auto!important;
}


.voiceWrap dl {
	width: 77%;
	float: right;
	padding: 8px 0 0;
}
.voice .voiceBtn {
  width: 64%;
  text-align: center;
  margin: 20px auto;
  padding: 0;
}
.voice .voiceBtn a {
  background: url(../images/job06/arrow_icon2.png) 97% center no-repeat ;
  background-position: -webkit-calc(100% - 15px) center;
  background-position: calc(100% - 15px) center;
  background-color: #fc5074;
  color: #fff!important;
  display: block;
  padding: 20px 0;
  font-weight: bold;
  font-size: 18px;
  width: 100%;
}
.voice .voiceBtn a:hover {
  filter: alpha(opacity=80);  /* ie lt 8 */
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  opacity: .8;
  zoom: 1;
}

.btnC1 a {
    background: #fc5074 url(../images/arw02.png) no-repeat scroll 96% center;
    color: #fff !important;
    display: block;
    font-weight: bold;
    font-size: 18px;
    padding: 20px 15px 20px 2%;
    text-align: center;
}

.btnC1 a:hover {
    background: #fc5074 url(../images/arw02.png) no-repeat scroll 96% center;
    color: #fff !important;
    display: block;
    font-weight: bold;
    font-size: 18px;
    padding: 20px 15px 20px 2%;
    text-align: center;
    opacity: 0.8;
}

h2.title3 {
	border-bottom: 1px solid #c5c7c8;
    margin-bottom: 10px;
	padding-bottom: 6px;
	padding-top: 30px;
}
.fukuriBox {
	overflow: hidden;
}
.fukuriTxt {
	width: 540px;
	float: left;
}
.fukuriBox p img{
	display: block;
	float: right;
}

.refreshBox {
  overflow: hidden;
  padding-bottom: 20px;
}
.refreshTxt {
  width: 540px;
  float: left;
}
.refreshBox p img{
  display: block;
  float: right;
}

.trainingBox {
  overflow: hidden;
}
.trainingTxt {
  width: 540px;
  float: left;
}
.trainingBox p img{
  display: block;
  float: right;
}

.jtbService {
    border: 2px solid #c5c7c8;
    margin: 0 8% 50px;
    overflow: hidden;
    padding: 30px 2%;
}
.wakulast {
    margin-bottom: 50px;
}
.waku {
    margin: 10px 6% 50px;
    overflow: hidden;
}
.welfareBox {
    float: left;
    margin: 0 2%;
    padding-top: 30px;
    width: 46%;
}
.welfareBox h3, .jtbService h3 {
    color: #fc5074;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 20px;
    text-align: center;
}
.welfareBox p {
    margin: 0;
}
.welfareBox h3, .jtbService h3 {
    color: #fc5074;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 20px;
    text-align: center;
}
.welfareBox h3 span, .jtbService h3 span {
    display: inline-block;
}
.jtbService p {
    margin: 0 0 30px 0;
}
.jtb {
    float: left;
    margin: 0 4% 0 0;
    width: 30.666%;
}
.jtbLife h4 {
    color: #5db528;
}
.jtb h4 {
    margin: 0;
    text-align: center;
}
.jtb h4 p.jtbImg {
    margin: 0 0 20px 0;
}
.jtb h4 p.jtbTtl {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}
.jtb h4 p.jtbTtl span {
    display: block;
}
.linedPaper {
    background-size: 100% 100%, 100% 100%, 100% 31px;
    font-size: 16px;
    line-height: 31px;
    padding: 31px 2% 0;
}
.linedPaper ul {
    display: block !important;
    text-align: center;
}
ol, ul {
    list-style: none;
}
.jtbLife .linedPaper ul li:nth-of-type(1) {
    border-top: 1px solid #5ab423;
}
.jtbLife .linedPaper ul li {
    border-bottom: 1px solid #5ab423;
}
.linedPaper ul li {
    list-style: none;
}
.jtbLeisure h4 {
    color: #eb3a77;
}
.jtb h4 {
    margin: 0;
    text-align: center;
}
.jtb h4 p.jtbImg {
    margin: 0 0 20px 0;
}
.jtb h4 p.jtbImg img {
    height: auto;
    max-width: 220px;
    width: 100%;
}
.jtb h4 p.jtbTtl {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}
.jtb h4 p.jtbTtl span {
    display: block;
}
.jtbTravel {
    margin-right: 0;
}
.jtb {
    float: left;
    margin: 0 4% 0 0;
    width: 30.666%;
}
.jtbTravel {
    margin-right: 0;
}
.jtbTravel h4 {
    color: #f69d23;
}
.jtb h4 {
    margin: 0;
    text-align: center;
}
.jtb h4 p.jtbImg {
    margin: 0 0 20px 0;
}
.jtb h4 p.jtbImg img {
    height: auto;
    max-width: 220px;
    width: 100%;
}
.jtb h4 p.jtbTtl {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}
.jtb h4 p.jtbTtl span {
    display: block;
}
.jtbLeisure .linedPaper ul li:nth-of-type(1) {
    border-top: 1px solid #f53778;
}
.jtbLeisure .linedPaper ul li {
    border-bottom: 1px solid #f53778;
}
.linedPaper ul li {
    list-style: none;
}
.jtbTravel .linedPaper ul li:nth-of-type(1) {
    border-top: 1px solid #ff9b14;
}
.jtbTravel .linedPaper ul li {
    border-bottom: 1px solid #ff9b14;
}
.linedPaper ul li {
    list-style: none;
}

h1 > span {
    display: inline-block;
    line-height: 1.3;
    vertical-align: middle;
}
h1 > span > span {
    color: #222222;
    display: inline-block;
}
.sp-on {
	display: none;
}
.voice .fontL {
    font-size: 17px;
}

.voice .balloon {
    width: 72%;
    background-color: #fef5f5;
    padding: 20px;
    position: relative;
    border-radius: 20px;
}

dl.balloon:after {
    border-right: 12px solid #fef5f5;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    content: '';
    margin-top: -10px;
    position: absolute;
    left: -12px;
    top: 50%;
}

.btnVoice {
    clear: both;
    display: block !important;
    margin: 0 auto 50px;
    padding-top: 30px;
    width: 670px;
}

.btnVoice li {
    margin: 0 1% 10px;
    width: 98%;
}

.btnVoice a {
    background: #fc5074 url(../images/arw02.png) no-repeat scroll 96% center;
    color: #fff !important;
    display: block;
    font-weight: bold;
    font-size: 18px;
    padding: 20px 15px 20px 2%;
    text-align: center;
}








@media screen and (max-width: 768px) {
  .otherStyle {
  		width: 100%;
  }
  .sp-on {
  	display: inherit;
  }
  .jobContent h2 {
      line-height: 1;
      padding-bottom: 10px;
  }
  .JIW-txt {
  	line-height: 1;
  	padding-top: 6px;
  }
  .pc-on {
  	display: none;
  }
  .imgCenSp img {
  	width: 100%;
  	height: auto;
  }
  .JIB-Cen {
      width: 100%;
  }
  .BtnWrap {
      width: 100%;
      margin: 30px auto;
  }
  .BtnWrap p {
    float: none;
    width: 96%;
    margin: 0 auto 10px;
  }
  .BtnWrap p:last-of-type {
    margin-bottom: 0;
  }
  .BtnWrap a {
    background-position: 97% center;
    background-position: -webkit-calc(100% - 15px) center;
    background-position: calc(100% - 15px) center;
    padding: 20px 20px 20px 10px;
  }
  .voice p {
      font-size: 15px;
      font-weight: bold;
      padding: 0 0 10px;
  }
  .voiceWrap {
      padding: 30px 0 0;
  }
  .voiceWrap .picImg {
      width: 100%;
      float: none;
      text-align: center;
  }
  .voiceWrap .picImg img{
      width: 100%;
      height: auto;
      text-align: center;
  }
  .voiceWrap dl {
      width: 100%;
      float: none;
      padding: 8px 0 0;
  }
  .voice .voiceBtn {
      width: 100%;
      line-height: 1;
  }
  .fukuriTxt {
      width: 100%;
      float: none;
  }
  .welfareBox {
      float: none;
      margin: 0;
      padding-top: 30px;
      width: 100%;
  }
  .welfareBox2 {
      border-bottom: 1px solid #e5e8e9;
      padding-bottom: 10px;
  }
  .jtb {
      float: none;
      margin: 0 auto 30px;
      width: 100%;
  }

  .jtbService {
      border: 2px solid #c5c7c8;
      margin: 0 0 50px;
      overflow: hidden;
      padding: 30px 2%;
  }
  .waku {
      margin: 10px 0 20px;
      overflow: hidden;
  }
  /*#header .content {
      padding: 0;
  }*/
  .voice .voiceBtn2 {
      line-height: 0.8;
  }
  .txtCenBol3 {
      line-height: 0.8;
      padding: 8px 0 20px 0;
  }
  .txtCenBol4 {
      line-height: 0.8;
      padding: 30px 0 20px 0;
  }
  .fukuriBox p img {
      display: block;
      float: none;
      padding-top: 8px;
      margin: 0 auto;
  }
  .voice .balloon {
    width: 90%;
    background-color: #fef5f5;
    padding: 20px 5% 20px 5%;
    position: relative;
    border-radius: 20px;
    float: none;
　　}
  img.ttl_01  {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
  }

  img.ttl_02  {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
  }

  img.ttl_03  {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
  }

  img.ttl_04  {
    padding-top: 30px;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    padding-bottom: 20px;
  }
}

@media screen and (max-width: 670px) {
  #header .content {
      padding: 0;
  }
  .jobContent h2 {
  	font-size: 30px;
  }
  ul.jobImg {
  	float: none;
  	margin: 0 0 20px;
  	overflow: hidden;
  	width: 100%;
  }
  ul.jobImg li {
  	float: left;
  	margin: 0 0 0 2%;
  	width: 49%;
  }
  ul.jobImg li:first-child {
  	margin-left: 0;
  }
  .jobTxt {
  	float: none;
  	width: 100%;
  }
  .otherStyle {
  	margin-bottom: 10px;
  }
  h2.title2 {
  	padding-top: 0;
  }
  .styleBox {
  	margin: 0 0 20px;
  	width: 100%;
  }
  .styleBox a p.styleTxt {
  	min-height: auto;
  }

  img.ttl_01  {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
  }

  img.ttl_02  {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 200px;
  }

  img.ttl_03  {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
  }

  img.ttl_04  {
    padding-top: 30px;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
    padding-bottom: 20px;
  }
}

@media screen and (max-width: 480px) {
  .jobContent h2 {
  	font-size: 25px;
  }
  p.job_name {
  	margin: 0 0 15px 0;
  }
  .jobTxt h3 span {
  	display: inline;
  	font-size: 18px;
  }
  h2.title2 {
  	margin: 0 0 15px 0;
  }
  .jobInWrap p {
      font-size: 10px;
      text-align: center;
  }
  .jobInBox2 {
      border: none;
      margin-bottom: 0;
      padding-bottom: 30px;
  }
  /* “コールセンター・事務の魅力とは”下のテキスト */
  p.job_expo {
  	text-align: left;
  }
  p.job_expo BR {
    display: none;
  }
  /* お客様からかかってくるお電話への対応と～両方を行っていただきます！ */
  .jobInBox.jobInBox2 .txtCenBol.txtCenBol2 BR {
    display: none;
  }
  /* 「えらべる倶楽部」が利用できます！ */
  .jtbService H3 BR {
    display: none;
  }
}

@media screen and (max-width: 360px) {
	.jobContent h2 {
		font-size: 22px;
	}
  .JIW-txt2 {
    padding-bottom: 16px;
  }
  .JIW-tb {
    color: #fc5074;
    font-size: 13px;
  }
}
