@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?hn5vqe");
  src: url("../fonts/icomoon.eot?hn5vqe#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?hn5vqe") format("truetype"), url("../fonts/icomoon.woff?hn5vqe") format("woff"), url("../fonts/icomoon.svg?hn5vqe#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon {
  font-family: 'icomoon';
}

.icon-logo:before {
  content: "\e900";
}

.icon-pack:before {
  content: "\e901";
}

.icon-hand:before {
  content: "\e902";
}

.icon-recruit:before {
  content: "\e903";
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd, td, th {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans Japanese', serif;
  list-style: none;
  color: #555;
}

body {
  margin: 0;
  padding: 0;
}

.wrap {
  width: 960px;
  margin: 0 auto;
  zoom: 1;
}

.wrap:after {
  content: "";
  display: block;
  clear: both;
}

header {
  color: #fff;
  background: #7098cf;
}

h1 {
  width: 320px;
  height: 100px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  display: table-cell;
  font-size: 36px;
  vertical-align: middle;
}
h1 a {
  color: #fff;
  text-decoration: none;
  transition: 0.25s;
}
h1 a:hover {
  color: #315ba8;
}
h1 a span {
  font-size: 42px;
  vertical-align: middle;
}

nav {
  display: table-cell;
  text-align: right;
}
nav ul {
  width: 640px;
}
nav li {
  display: table-cell;
  list-style: none;
}
nav a {
  display: table-cell;
  width: 160px;
  height: 100px;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  text-decoration: none;
  transition: 0.75s;
}
nav a:hover {
  background: #315ba8;
}
nav a span {
  font-size: 24px;
  vertical-align: middle;
}

#pack nav a[href="pack.html"] {
  background: #315ba8;
}

#sanitation nav a[href="sanitation.html"] {
  background: #315ba8;
}

#recruit nav a[href="recruit.html"] {
  background: #315ba8;
}

#about nav a[href="about.html"] {
  background: #315ba8;
}

.contents {
  padding: 60px 0;
}

footer {
  padding: 30px 0 10px;
  background: #e2eaf5;
}
footer h3 {
  margin: 0 0 0 10px;
  display: inline-block;
  font-size: 24px;
  font-weight: normal;
}
footer h3 span {
  font-size: 30px;
  vertical-align: middle;
}
footer a {
  color: #555;
  text-decoration: none;
}
footer a:hover {
  color: #315ba8;
}
footer ul {
  margin: 0 0 0 20px;
  display: inline-block;
}
footer li {
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0 0 0 20px;
  line-height: 1.2;
  border-left: 1px solid #666;
}
footer li:first-child {
  border: none;
}
footer li a:hover {
  text-decoration: underline;
}
footer .copyright {
  margin: 40px 0 0 0;
  font-size: 12px;
  text-align: center;
}

.sub .main_img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.sub .main_img h2 {
  height: 240px;
  width: 100%;
  text-indent: -101%;
  overflow: hidden;
  line-height: 0;
  background: url(../images/pattern.png);
}
.sub .contents h2 {
  color: #7098cf;
  text-align: center;
  font-size: 40px;
  font-weight: normal;
}
.sub .contents h2 span {
  font-size: 44px;
  vertical-align: middle;
}
.sub .contents .lead {
  margin: 30px 0 40px 0;
  font-size: 18px;
  line-height: 2;
  text-align: center;
}
.sub .contents table {
  margin: 40px auto 0;
}
.sub .contents td {
  padding: 15px 25px;
}

.chart {
  width: 680px;
  margin: 0 auto;
}
.chart li {
  float: left;
  width: 298px;
}
.chart li:nth-child(even) {
  margin: 0 0 80px 80px;
}
.chart li:nth-child(even):before {
  position: absolute;
  display: block;
  content: "";
  width: 45px;
  height: 45px;
  margin: 90px 0 0 -62px;
  background: url(../images/arrow_r.png) no-repeat;
}
.chart li:nth-child(odd):before {
  position: absolute;
  display: block;
  content: "";
  width: 45px;
  height: 45px;
  margin: -60px 0 0 312px;
  background: url(../images/arrow_l.png) no-repeat;
}
.chart li:first-child:before {
  display: none;
}
.chart li span {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}
.chart li.non:before {
  background: none;
}

#index .main_img {
  height: 480px;
  text-align: center;
  background: url(../images/main.jpg) no-repeat center center;
  background-size: cover;
}
#index .main_img h2 {
  line-height: 0;
  background: url(../images/pattern.png);
}
#index .contents_list {
  margin: 0 auto;
}
#index .contents_list li {
  display: table-cell;
  width: 320px;
  padding: 0 30px;
  text-align: center;
}
#index .contents_list li p {
  margin: 20px 0 0 0;
}
#index .contents_list li a {
  display: block;
  width: 260px;
  margin: 30px 0 0 0;
  padding: 13px 0;
  color: #fff;
  background: #7098cf;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 3px solid #7098cf;
  transition: 0.5s;
}
#index .contents_list li a:hover {
  color: #7098cf;
  background: #fff;
}
#index .contents_list li a span {
  font-size: 22px;
  vertical-align: middle;
}

#sanitation .main_img {
  background-image: url(../images/main_san.jpg);
}
#sanitation .kanri {
  margin-bottom: 50px;
}
#sanitation .camera {
  margin-bottom: 40px;
}

#pack .main_img {
  background-image: url(../images/main.jpg);
}

#recruit .main_img {
  background-image: url(../images/main.jpg);
  background-position: center top;
}

#about .main_img {
  background-image: url(../images/main_about.jpg);
  background-position: center bottom;
}

@media screen and (max-width: 768px) {
  * {
    float: none;
  }

  h1, nav, nav li, nav a {
    display: block;
    width: auto;
    height: auto;
  }

  img {
    max-width: 100%;
  }

  .wrap {
    max-width: 100%;
  }

  nav ul {
    max-width: 100%;
  }

  footer h3 {
    display: block;
    text-align: center;
  }

  #index .main_img {
    height: auto;
  }
  #index .contents_list li {
    width: auto;
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }
  #index .contents_list li a {
    width: auto;
  }

  #recruit table,
  #recruit iframe,
  #about table,
  #about iframe {
    max-width: 100%;
  }
  #recruit td,
  #about td {
    display: block;
  }
  #recruit td:first-child,
  #about td:first-child {
    font-weight: bold;
    padding-bottom: 0;
  }
}