@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
/*----------------------------------------
 * Initialize */
/*---------------------------------------- */
html {
  font-size: 14px;
}
@media print, screen and (max-width: 768px) {
  html {
    font-size: 12px !important;
  }
}
@media print, screen and (min-width: 1920px) {
  html {
    background: url("/images/common/extra-bg.png") #222;
  }
}

body {
  display: block;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
  color: #222222;
}
@media print, screen and (min-width: 769px) {
  body {
    min-width: 1200px;
  }
}
@media print, screen and (max-width: 768px) {
  body {
    font-size: 12px !important;
  }
}
@media print, screen and (min-width: 1920px) {
  body {
    background-color: #FFF;
    max-width: 1920px;
    width: 1920px;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

p {
  margin: 0;
}

ul, li {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
}

strong {
  font-weight: bold;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

a {
  color: #222222;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
@media print, screen and (max-width: 768px) {
  a {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
  }
}
a:hover {
  color: #929497;
  text-decoration: none;
}
a:focus {
  color: #929497;
}

sup,
sub { font-size: 70%;}


/*----------------------------------------
 *        Common
 *---------------------------------------- */
.for_sp { display: block;}
.for_pc { display: none;}
@media print, screen and (min-width: 769px) {
  .for_sp { display: none;}
  .for_pc { display: block;}
}

.left { text-align: left;}
.right { text-align: right;}
.center { text-align: center;}

.ft_left { float: left;}
.ft_right { float: right;}
.ft_none { float: none;}
.ft_clear { clear: both;}

.pt10 { padding-top: 10px;}
.pt20 { padding-top: 20px;}
.pt30 { padding-top: 30px;}
.pt40 { padding-top: 40px;}
.pr10 { padding-right: 10px;}
.pr20 { padding-right: 20px;}
.pr30 { padding-right: 30px;}
.pr40 { padding-right: 40px;}
.pb10 { padding-bottom: 10px;}
.pb20 { padding-bottom: 20px;}
.pb30 { padding-bottom: 30px;}
.pb40 { padding-bottom: 40px;}
.pl10 { padding-left: 10px;}
.pl20 { padding-left: 20px;}
.pl30 { padding-left: 30px;}
.pl40 { padding-left: 40px;}

.mt10 { margin-top: 10px;}
.mt20 { margin-top: 20px;}
.mt30 { margin-top: 30px;}
.mt40 { margin-top: 40px;}
.mt70 { margin-top: 70px;}
.mr10 { margin-right: 10px;}
.mr20 { margin-right: 20px;}
.mr30 { margin-right: 30px;}
.mr40 { margin-right: 40px;}
.mb10 { margin-bottom: 10px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 40px;}
.mb40 { margin-bottom: 40px;}
.ml10 { margin-left: 10px;}
.ml20 { margin-left: 20px;}
.ml30 { margin-left: 30px;}
.ml40 { margin-left: 40px;}


.half_pl20 { padding-left: 10px;}
.half_pl40 { padding-left: 20px;}
@media print, screen and (min-width: 769px) {
  .half_pl20 { padding-left: 20px;}
  .half_pl40 { padding-left: 40px;}
}

@media print, screen and (min-width: 769px) {
  .pc_pl20 { padding-left: 20px;}
  .pc_pl40 { padding-left: 40px;}
  .pc_pr20 { padding-right: 20px;}
  .pc_pr40 { padding-right: 40px;}
}

@media print, screen and (max-width: 768px) {
  .sp_mb10 { margin-bottom: 10px;}
  .sp_mb20 { margin-bottom: 20px;}
  .sp_mb30 { margin-bottom: 30px;}
}

.small { font-size: 98% !important;}
.normal { font-size: 100% !important;}
.lerge { font-size: 102% !important;}


/*----------*/
.boxWrap {
  width: 100%;
  box-sizing: border-box;
}
@media print, screen and (min-width: 769px) {
  .boxWrap {
    overflow: hidden;
  }
}

.boxWrap .leftBox,
.boxWrap .rightBox,
.boxWrap .columnBox {
  width: 100%;
  box-sizing:
  border-box;
}
@media print, screen and (min-width: 769px) {
  .boxWrap .leftBox { float:left; width: 50%;}
  .boxWrap .rightBox { float:right; width: 50%;}

  .boxWrap.column2 .columnBox { float:left; width: 50%;}
  .boxWrap.column3 .columnBox { float:left; width: 33.33333%;}
  .boxWrap.column4 .columnBox { float:left; width: 25%;}
  .boxWrap.column5 .columnBox { float:left; width: 20%;}

  .boxWrap.column2 .columnBox:nth-child(2n+1),
  .boxWrap.column3 .columnBox:nth-child(3n+1),
  .boxWrap.column4 .columnBox:nth-child(4n+1),
  .boxWrap.column5 .columnBox:nth-child(5n+1) { clear: both;}

  .boxWrap.column1_2 .columnBox:nth-child(odd) { float:left; width: 33.33333%;}
  .boxWrap.column1_2 .columnBox:nth-child(even) { float:left; width: 66.66666%;}
  .boxWrap.column2_1 .columnBox:nth-child(odd) { float:left; width: 66.66666%;}
  .boxWrap.column2_1 .columnBox:nth-child(even) { float:left; width: 33.33333%;}
}

@media print, screen and (max-width: 768px) {
  .boxWrap.sp_column2::after {
    content: "";
    display: block;
    clear: both;
  }

  .boxWrap.sp_column2 .columnBox { float:left; width: 50%;}
  .boxWrap.sp_column2 .columnBox:nth-child(odd) { clear: both;}
}

.oneList li {
  position: relative;
  padding-left: 1.3em;
}
.oneList li > span {
  position: absolute;
  left: 0;
}

.twoList li {
  position: relative;
  padding-left: 2.5em;
}
.twoList li > span {
  position: absolute;
  left: 0;
}

.boxList dt {
  font-weight: bold;
}
.boxList dd + dt {
  margin-top: 20px;
}


/*----------*/
.hataraku-top {
  padding-bottom: 50px;
}

.topMenu {
  width: 90%;
  margin: 0 auto;
}
.topMenu > li {
  margin-top: 5%;
}
@media print, screen and (min-width: 769px) {
  .topMenu {
    width: 100%;
    overflow: hidden;
  }
  .topMenu > li {
    float: left;
    @width: 31.33333%;
    width: 21.33333%;
    margin: 0 1%;
  }

  .topMenu > li a {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
  }
  .topMenu > li a:hover {
    opacity: 0.7;
  }
}

.topBack {
  margin-top: 40px;
  text-align: center;
}
.topBack .btn-regular {
  width: 280px;
}


/*----------*/
.navigation-wrap {
  width: 100%;
  margin: 0 auto -40px;
}
@media print, screen and (min-width: 769px) {
  .navigation-wrap {
    max-width: 2000px;
    min-width: 1200px;
  }
}

.navigation {
  padding-top: 50px;
}
@media print, screen and (min-width: 769px) {
  .navigation {
    padding-top: 100px;
  }
}

.navigation h3 {
  background: #CACACA;
  padding: 15px 15px 12px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
}
@media print, screen and (min-width: 769px) {
  .navigation h3 {
    margin-bottom: 30px;
    font-size: 18px;
  }
}

.lineup-item-wrap {
  padding: 4%;
  overflow: hidden;
}
@media print, screen and (min-width: 769px) {
  .lineup-item-wrap {
    padding: 0;
  }
}

.lineup-item-nav {
  float: left;
}

.lineup-item-nav.item1,
.lineup-item-nav.item2 { width: 100%;}
.lineup-item-nav.item3 { width: 33.33333%;}
.lineup-item-nav.item4 { width: 66.66666%;}
@media print, screen and (min-width: 769px) {
  .lineup-item-nav.item1,
  .lineup-item-nav.item2 { width: 33.33333%;}
  .lineup-item-nav.item3 { width: 11.11111%;}
  .lineup-item-nav.item4 { width: 22.22222%;}
}

.lineup-item-nav > dt {
  display: none;
}
@media print, screen and (min-width: 769px) {
  .lineup-item-nav > dt {
    display: block;
    padding: 10px 10px 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
  }

  .lineup-item-nav.item1 > dt { background: #FFEFB5;}
  .lineup-item-nav.item1 > dd { background: #FFC80A;}
  .lineup-item-nav.item2 > dt { background: #CDEBFD;}
  .lineup-item-nav.item2 > dd { background: #5ABEFA;}
  .lineup-item-nav.item3 > dt { background: #FCDFE9;}
  .lineup-item-nav.item3 > dd { background: #F596B4;}
  .lineup-item-nav.item4 > dt { background: #DDEFCD;}
  .lineup-item-nav.item4 > dd { background: #8CC85A;}
}

.lineup-item {
  overflow: hidden;
}
.lineup-item > li {
  float: left;
  padding: 5px;
  box-sizing: border-box;
}
.item1 .lineup-item > li,
.item2 .lineup-item > li { width: 33.33333%;}
.item3 .lineup-item > li { width: 100%;}
.item4 .lineup-item > li { width: 50%;}

@media print, screen and (min-width: 769px) {
  .lineup-item > li {
    padding: 0;
    border-right: #FFF 1px dotted;
  }

  .lineup-item > li a {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
  }
  .lineup-item > li a:hover {
    opacity: 0.5;
  }
}


/*----------*/
.layout-wrap {
  display: block;
  width: 100%;
  overflow: hidden;
}

.layout-wrap .layout__main {
  width: 100%;
  overflow: visible;
}
@media print, screen and (min-width: 769px) {
  .layout-wrap .layout__main {
    max-width: 1200px;
    margin: 0 auto;
  }
}