@charset "UTF-8";

/* global ============================== */

html { font-size: 62.5%; }

body {
  margin: 0; padding: 0;
  background-color: #fff;
  color: #333;
  font-family: sans-serif;
  font-size: 1.4rem;
  line-height: 1.7;
}

a {
  color: #333;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}
a:link { text-decoration: none; }
/*a:visited { color: #2E3E99; }*/
a:hover, a:active { text-decoration: underline; }

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

/* common parts ============================== */
img { max-width: 100%; }
a img { border: none; }
.absolute { position: absolute; }
.relative { position: relative; }

/* Font Awesome Icons ============================== */
.fa-xs { font-size: 0.6rem; vertical-align: 0.5em; }
.fa-sm { font-size: 0.8rem; }
.fa-md { font-size: 1.4rem; }
/*.fa-lg { font-size: 2.0rem; }*/

/* ClearFix ============================== */
.clearfix { zoom: 1; }
.clearfix:after {
  content: "";
  display: block;
  clear: both; }

/* responsive utilities ============================== */
.hidden-pc { display: none; }
@media ( min-width : 768px ), print {
  .hidden-sp { display: none; }
  .hidden-pc { display: block; }
  .hidden-pc.inline { display: inline; }
  .hidden-pc.inline-block { display: inline-block; }
}

/* responsive.gs 12cols ============================== */
/*  12 COLUMN : RESPONSIVE GRID SYSTEM
  DEVELOPER : DENIS LEBLANC
  URL : http://responsive.gs
  VERSION : 3.0
  LICENSE : GPL & MIT */

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

.container {
  position: relative;
  max-width: 960px;
  margin: 0 5px;
}
.container.full {
  margin: 0 auto;
}
@media ( min-width : 768px ), print {
  .container {
    margin: 0 auto;
  }
}

.container:after, .row:after, .col:after, .clr:after, .group:after { 
  content: "";
  display: table;
  clear: both;
}
.row { padding-bottom: 0em; }
.col {
  display: block;
  float: left;
  width: 100%;
}

@media ( min-width : 768px ), print {
  .gutters .col {
    margin-left: 2%;
  }
  .gutters .col:first-child {
    margin-left: 0;
  }
}

@media ( min-width : 768px ), print {
  .span_1 { width: 8.33333333333%; }
  .span_2 { width: 16.6666666667%; }
  .span_3 { width: 25%; }
  .span_4 { width: 33.3333333333%; }
  .span_5 { width: 41.6666666667%; }
  .span_6 { width: 50%; }
  .span_7 { width: 58.3333333333%; }
  .span_8 { width: 66.6666666667%; }
  .span_9 { width: 75%; }
  .span_10 { width: 83.3333333333%; }
  .span_11 { width: 91.6666666667%; }
  .span_12 { width: 100%; }
  
  .gutters .span_1 { width: 6.5%; }
  .gutters .span_2 { width: 15.0%; }
  .gutters .span_3 { width: 23.5%; }
  .gutters .span_4 { width: 32.0%; }
  .gutters .span_5 { width: 40.5%; }
  .gutters .span_6 { width: 49.0%; }
  .gutters .span_7 { width: 57.5%; }
  .gutters .span_8 { width: 66.0%; }
  .gutters .span_9 { width: 74.5%; }
  .gutters .span_10 { width: 83.0%; }
  .gutters .span_11 { width: 91.5%; }
  .gutters .span_12 { width: 100%; }
}

/* 基本レイアウト ============================== */

body {
  -webkit-text-size-adjust: 100%;
}

#con {
  margin: 0 auto; padding: 0;
  max-width: 970px;
}
@media ( min-width : 768px ), print {
  #con { padding: 0 5px; }
}

#site {}
#head {
  position: relative;
}

#con {}
#con:after {
  content: ""; 
  display: table; 
  clear: both; 
}

  #main,
  #side-banner {
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 20px;
  }

  @media ( min-width : 768px ), print {
    #main {
      width: 68.125%;
    }
    #side-banner {
      width: 29.875%;
      margin-left: 2%;
    }
  }

  #main2 {
    display: block;
    width: 100%;
  }

#con,
.waku-footer {
  clear: both;
}

#foot {}

#dummy {
  position: fixed; left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}

/* スマホメニュー＆ドロワー ============================== */


/* ヘッダ ============================== */
.header {
  position: relative;
  padding-bottom: 16px;
  background: #fcf1e2 url(images/header-bg.png) repeat-x left top;
  overflow: hidden;
}
.header .logo {
  position: relative;
  width: 100%;
  padding-top: 28px;
  padding-bottom: 16px;
}
.header .obane {
  position: absolute; right: 0; top: 10px;
  max-width: 94px;
  padding: 8px 8px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
@media ( min-width : 768px ), print {
  .header {
    min-height: 140px;
    padding-bottom: 0;
  }
  .header .obane {
    position: absolute; right: 0; top: 28px;
    min-width: 123px;
    padding: 8px 16px;
  }
}

/* フッタ ============================== */
.waku-footer {}

.footer {
  position: relative;
  background-color: #fcf1e2;
}
.footer__address {
  padding: 8px;
}
.footer__copyright {
  padding: 16px 0 24px 0;
  background-color: #e76650;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
}
@media ( min-width : 768px ), print {
  .footer__address {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 0;
  }
}

/* メニュー ============================== */

/* ホームメニュー */
.home-menu {
  clear: both;
  margin-top: 16px;
  margin-bottom: 16px;
}
.home-menu ul {
  margin: 0; padding: 0;
  list-style: none;
}
.home-menu ul li {
  display: block;
  float: left;
  width: 25.0%;
  margin-bottom: 8px;
  padding: 0 8px;
  text-align: center;
}
.home-menu ul li a {
}
@media ( min-width : 768px ), print {
  .home-menu {
    margin-top: -54px;
  }
}

/* 記事ページメニュー */
.sub-menu {
  margin-top: -20px;
}
.sub-menu ul {
  margin: 0; padding: 0;
  list-style: none;
}
.js_submenuToggle,
.sub-menu a {
  display: block;
  width: 100%;
  border: 2px solid #fff;
  border-bottom: none;
  background-color: #fad8c9;
  color: #d64429;
}
.js_submenuToggle {
  padding: 8px 8px 8px 16px;
  font-size: 1.6rem;
  font-weight: bold;
}
.sub-menu a {
  height: 64px;
}
.sub-menu-list { display: none; }
@media ( min-width : 768px ), print {
  .js_submenuToggle { display: none; }
  .sub-menu-list { display: block; }
  .sub-menu {
    margin-top: -36px;
  }
  .sub-menu ul li {
    display: block;
    float: left;
    width: 25.0%;
    margin-bottom: 8px;
  }
  .sub-menu a {
    border-left: none;
  }
  .sub-menu a span {
    display: table-cell; vertical-align: middle;
    height: 60px;
  }
  .sub-menu li:first-child a {
    border-left: 2px solid #fff;
  }
  .sub-menu a:hover {
    background-color: #fcf1e2;
    text-decoration: none;
  }
}

/* ホーム ============================== */

/* cover */
.cover {
  position: relative;
  max-width: 960px;
  margin: -16px auto 0 auto;
}
.group-photo {
  position: absolute; right: 0; top: 0;
  width: 60%;
}
@media ( min-width : 768px ), print {
  .cover {
    margin-top: -40px;
  }
  .group-photo {
    right: -62px; top: 16px;
    width: 509px;
  }
}

@media ( min-width : 768px ), print {
  .gutters .home-col__main {
    max-width: 613px;
  }
  .gutters .home-col__sub {
    max-width: 300px;
    margin-left: 47px;
  }
}

/* 新着情報 */
.whatsnew {
  position: relative;
  padding: 8px 0;
  margin-bottom: 24px;
  border-radius: 8px;
  background: #fff url('images/news-bg.png') repeat left top;
}
.whatsnew h2 {
  padding: 0 8px 0 38px;
  border-bottom: 3px solid #e34427;
  background: transparent url('images/whatsnew-title-icon.png') no-repeat 8px center;
  color: #555;
  font-size: 1.8rem;
}
.whatsnew__content {
  margin: 8px;
  padding: 0 8px;
  background-color: #fff;
}
.whatsnew__link {
  position: absolute; right: 8px; top: 12px;
}
.whatsnew__link a {
  color: #e34427;
  font-size: 1.2rem;
  font-weight: bold;
}

@media ( min-width : 768px ), print {
  .whatsnew {
    border-radius: 16px
  }
  .whatsnew h2 {
    padding: 4px 8px 4px 46px;
    background-position: 16px;
  }
  .whatsnew__content {
    margin: 16px 16px 8px 16px;
  }
  .whatsnew__link {
    right: 16px; top: 16px;
  }
}

.whatsnew ul {
  margin: 0; padding: 0; list-style: none;
}
.whatsnew li {
  border-bottom: 1px dashed #ccc;
}
.whatsnew li:last-child {
  border-bottom: none;
}
.whatsnew .date,
.whatsnew .title {
  display: table-cell;
}
.whatsnew .title a {
  display: block;
}
.whatsnew .date,
.whatsnew .title a {
  padding: 8px 0;
}
.whatsnew .date {
  color: #65a930;
  font-size: 1.3rem;
}
.whatsnew .title {
  padding-left: 8px;
}
.whatsnew .title .fa {
  color: #e34427;
}

.now-hiring {
  margin-bottom: 24px;
}

.buttons {
  max-width: 300px;
  margin: 0 auto 24px auto;
  padding: 0;
  list-style: none;
}
.buttons li {
  margin-bottom: 8px;
}

/* 記事ページ ============================== */

/* パンくず */
.pathlink {}
.pathlink ul {
  margin: 0; padding: 10px 5px;
  list-style: none;
}
.pathlink li {
  float: left;
  color: #666;
  font-size: 90%;
}
.pathlink .sep {
  margin: 0 0.2em 0 0;
}
.pathlink .fa {
  color: #D5D0BD;
  font-size: 140%;
  vertical-align: -0.1em;
}
.pathlink li.print {
  float: right;
}
.pathlink li a  {
  color: #3232FF;
}

/* submenu */
.box {
  margin-bottom: 20px;
}
.box-default .box-header {
  padding: 5px 10px;
  background-color: #74b441;
  color: #fff;
  font-weight: bold;
}
.box-default .box-header a {
  color: #fff;
}
.box-default .box-body {
  background-color: #fcf1e2;
}
.box-body__list {
  margin: 0; padding: 1px 0;
  list-style: none;
}
.box li a, .box li span {
  display: block;
  padding: 5px 10px;
  border-bottom: 1px dotted #fff;
  color: #1a1a1a;
}
.box li:last-child a, .box li:last-child span {
  border-bottom: none;
}
.box li .disabled { color: #999; }
.box-default li a:hover,
.box-default li a.active {
  background-color: #fad8c9;
}

.box-default li .fa { color: #e4614c; opacity: 0.6; }

.box-red, .box-green {
  border: 1px solid #ccc;
}
.box-red .box-header, .box-green .box-header {
  margin: 1px; padding: 4px 10px;
  color: #fff;
  font-weight: bold;
}
.box-red li a, .box-green li a {
  margin: 0 10px; padding: 5px 0;
}

/* ページトップへ ============================== */
#back-to-top {
  position: fixed; right: 2%; bottom: 4%;
  width: 60px; height: 60px;
  margin: 0; padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #87bd43;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1.2rem;
}
#back-to-top .fa {
  font-size: 2.0rem;
}
@media ( min-width : 768px ), print {
  #back-to-top {
    width: 80px; height: 80px;
  }
}

/* ドロワーメニュー ============================== */
.drawer {
}
.drawer a { color: #000; }

.drawer-switch {
  position: absolute; right: 10px; top: 16px;
}
.drawer-switch button {
  display: inline-block;
  padding: 6px 4px;
  border-radius: 4px;
  border: 2px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 1.4rem;
}

#drawer-overlay {
  display: block;
  position: fixed; left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  z-index: 10;
}

.drawer-canvas {
  display: none;
  position: absolute; left: 0; top: 0;
  width: 100%;
  background-color: #b6d150;
  z-index: 200;
}

.drawer-content {
  padding: 16px 10px 10px 10px;
  font-size: 1.2rem;
}

.drawer__top {
  margin-bottom: 24px;
}
.drawer__top a {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  font-size: 1.4rem;
  line-height: normal;
}

.drawer__main-menu {
  margin: 0 0 16px 0; padding: 0;
  list-style: none;
}
.drawer__main-menu li {
  float: left;
  width: 32.0%;
  margin-left: 2%;
  margin-bottom: 8px;
  font-size: 1.2rem;
  text-align: center;
}
.drawer__main-menu li:nth-of-type(3n+1) {
  margin-left: 0;
}
.drawer__main-menu li img {
  width: 60%;
}

.drawer .abesa a,
.drawer .obanazawa a {
  display: block;
  height: 42px; line-height: 42px;
  margin-bottom: 16px;
  border: 1px solid #fff;
  text-align: center;
}
.drawer .abesa a span {
  font-size: 1.8rem;
  font-weight: bold;
}
.drawer__sub-menu {
  margin: 0 0 16px 0;
  padding: 0;
  border-bottom: 1px dashed #fff;
  list-style: none;
}
.drawer__sub-menu li {
  float: left;
  width: 50%;
  border: 1px dashed #fff;
  border-bottom: none;
}
.drawer__sub-menu li:nth-of-type(even) {
  border-left: none;
}
.drawer__sub-menu li a,
.drawer__sub-menu li span {
  display: block;
  height: 42px; line-height: 42px;
  text-align: center;
}

.drawer-bottom {
  background-color: rgba(0, 0, 0, 0.2);
}
.drawer-bottom button {
  display: block;
  width: 100%; height: 48px; line-height: 48px;
  border: none;
  background: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
}
@media ( min-width : 768px ), print {
  .drawer { display: none; }
}

/* エラーページ ============================== */
.page-err {
  margin: 4em 0;
  }