@charset "utf-8";

@import url("reset.css");

@import url("drawer.css");

/* =============================================================================
   基本設定
   ========================================================================== */
html {overflow-y: scroll;}
body {color: #555;line-height: 1.8;font-size: 14px;font-family:'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
#overWrap {/*overflow: hidden;*/position: relative;}
a {color: #555;text-decoration: underline;}
a:link {color: #555;}
a:visited {color: #555;}
a:hover {color: #c6000f;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
a:active {color: #555;}
a:hover img {opacity: 0.8;filter: alpha(opacity=80);-moz-opacity: 0.8;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
img {width: auto;max-width: 100%;height: auto;}

/* =============================================================================
    class
   ========================================================================== */
@media screen and (min-width: 768px) {
    body {min-width: 1120px;} /*width:100%;を指定した要素の背景が横スクロールのときに消えないようにする*/
    .sp {display: none;}
    .wrap {width: 1120px;margin:0 auto;}
    section {padding: 60px 0;}
}
@media screen and (max-width: 767px) {
    .pc {display: none;}
    .wrap {padding: 0 10px;}
    section {padding: 30px 0;}
}

/* =============================================================================
    Drawr
   ========================================================================== */
@media screen and (min-width: 768px) {
  .drawer-container {
    width: 1120px;
  }
  .drawer-nav {
    background-color: transparent;
  }
  .drawer-navbar {
    border-bottom: 5px solid #140104;
  }
  .drawer-navbar {
    height: 70px;
  }
  .drawer-navbar .drawer-brand {
    padding-top: 12px;
  }
  .drawer-navbar .drawer-nav {
    width: 820px;
    margin-top: 25px;
    padding: 0 0 0;
    float: right;
    display: inline-block;
    height: 50px;
  }
  .drawer-navbar .drawer-menu-item {
    line-height: 50px;
  }
  .drawer-menu {position: relative;}
  .pc_contact {
    width: 180px;
    height: 25px;
    position: absolute;
    top: -25px;
    right: 0;
  }
  .pc_contact a {
    width: 180px;
    height: 25px;
    padding: 0;
    display: block;
    }
  .pc_contact a img {
    vertical-align: top;
    }
  .drawer-menu-item {
    font-size: 14px;
    padding: 15px;
    color: #555;
  }
  .drawer-menu-item:link {
      color: #555;
  }
  .drawer-menu-item:visited {
      color: #555;
  }
  .drawer-menu-item:hover{
      color: #c6000f;
      text-decoration: none;
  }
  .drawer-menu-item:active　{
      color: #555;
  }
  .drawer-dropdown-menu {
    padding: 10px 0;
    background-color: rgba(20, 76, 134, 0.7);
  }
  .drawer-dropdown-menu-item {
    line-height: 3rem;
  }

/*　ドロップダウン　メニュー*/
  .drawer-dropdown-menu-item img {
    display: inline-block;
    vertical-align: middle;
  }
  .drawer-dropdown-menu-item:link {
      color: #fff;
  }
  .drawer-dropdown-menu-item:visited {
      color: #fff;
  }
  .drawer-dropdown-menu-item:hover {
      text-decoration: none;
      background-color: #144c86;
  }
  .drawer-dropdown-menu-item:active {
      color: #fff;
  }
}
@media screen and (max-width: 767px) {
    .drawer-navbar .drawer-navbar-header {
        border-bottom: 3px solid #140104;
    }
    .drawer-brand img {
        height: 40px;
    }
    .drawer-navbar-header {
        text-align: left;
    }
  .drawer-menu-item,
  .drawer-dropdown-menu-item {
      color: #fff;
  }
  .drawer-menu-item:link,
  .drawer-dropdown-menu-item:link {
      color: #555;
  }
  .drawer-menu-item:visited,
  .drawer-dropdown-menu-item:visited {
      color: #555;
  }
  .drawer-menu-item:hover,
  .drawer-dropdown-menu-item:hover {
      color: #c6000f;
      text-decoration: none;
  }
  .drawer-menu-item:active,
  .drawer-dropdown-menu-item:active {
      color: #555;
  }
  .drawer-overlay {
    background-color: rgba(0, 0, 0, .8);
  }
  .pc_contact {
    display: none;
    }
}

/* =============================================================================
    Footer
   ========================================================================== */
@media screen and (min-width: 768px) {
    #page-top {position: fixed;bottom: 20px;right: 20px;}
    #page-recruit {position: fixed;z-index: 999; top: 30%;right: 0;width: 39px;}
    #page-recruit img {margin-bottom: 10px;}
    footer {
        background: #366ea9;
        background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #366ea9 51%, #366ea9 100%);
        background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#366ea9 51%,#366ea9 100%);
        background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#366ea9 51%,#366ea9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#366ea9',GradientType=1 );
    }
    footer .contactSec ul {
        width: 100%;
        display: table;
        background-color: #fff;
    }
    footer .contactSec li {
        width: 33.3%;
        padding: 1px;
        display: table-cell;
    }
    footer .contactSec li img {
      width: 100%;
    }

    footer .wrap {overflow: hidden;}
    footer .address {width: 240px; float: left;}
    footer .address a {color: #555;text-decoration: none;}
    footer .address a:link {color: #555;}
    footer .address a:visited {color: #555;}
    footer .address a:hover {color: #c6000f;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
    footer .address a:active {color: #555;}
    footer .address h1 {padding: 20px 0 10px;}
    footer .address h2 {font-weight: bold;font-size: 18px;}
    footer nav {width: 800px;padding: 40px; float: left;background-color: #366ea9;color: #fff;}
    footer nav .box {display: inline-block;margin-right: 40px;vertical-align: top;}
    footer nav .box p {font-weight: bold;}
    footer nav .box p.mb {margin-bottom: 20px;}
    footer nav a {color: #fff;text-decoration: none;}
    footer nav a:link {color: #fff;}
    footer nav a:visited {color: #fff;}
    footer nav a:hover {color: #c6000f;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
    footer nav a:active {color: #fff;}
    footer .copy {padding: 20px 0;font-size:12px;background-color: #144c86;color: #9ca2a8;text-align: right;}
    footer .copy small {width: 1120px;margin: 0 auto;display: block;}
}
@media screen and (max-width: 767px) {
    #page-top {position: fixed;bottom: 10px;right: 10px;}
    #page-recruit {position: fixed;top: 20%;right: 0; width: 30px;}
    #page-recruit img {margin-bottom: 10px;}
    footer .contactSec ul {
        width: 100%;
        text-align: center;
        letter-spacing: -0.4em;
    }
    footer .contactSec li {
        display: inline-block;
    }
    footer .contactSec li:nth-child(1) {
        width: 100%;
    }
    footer .contactSec li:nth-child(2) {
        width: 100%;
        display: inline-block;
    }
    footer .contactSec li:nth-child(3) {
        width: 50%;
        display: inline-block;
    }
    footer .contactSec li img {
        width: 100%;
    }
    footer .address {padding-bottom: 20px;}
    footer .address a {color: #555;text-decoration: none;}
    footer .address a:link {color: #555;}
    footer .address a:visited {color: #555;}
    footer .address a:hover {color: #c6000f;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
    footer .address a:active {color: #555;}
    footer .address h1 {padding: 20px 0 10px;}
    footer .address h2 {font-weight: bold;font-size: 18px;}
    footer nav {display: none;}
    footer .copy {padding: 20px 20px 80px;font-size:12px;background-color: #144c86;color: #9ca2a8;text-align: left;}
}

/* =============================================================================
    TOP
   ========================================================================== */
@media screen and (min-width: 768px) {
/* slide */
    .bx-wrapper .bx-viewport {
        width: 100%;
        height: 700px !important;
        box-shadow: none;
        border: none;
        left: 0;
        text-align: center;
        overflow: hidden;
        box-sizing: border-box;
    }
    .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
      background: #c6000f;
    }
  .slide li {
    width: 100% !important;
  }
  .slide li  > div {
    height: 700px;
    position: relative;
  }
  .slide li.slide1 {
    background: url(../img/top/bgKeyimages1.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .slide li.slide2 {
    background: url(../img/top/bgKeyimages2.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .slide li.slide3 {
    background: url("../img/top/bgKeyimages3_202306.jpg") no-repeat 50% 50%;
    background-size: cover;
  }
  .slide li.slide1 span img {
    position: absolute;
    bottom: 10%;
    left: 0;
  }
  .slide li.slide2 span img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .slide li.slide3 span img {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0); /* Safari用 */
    transform: translate(-50%, 0);
  }
  .slide li span + img {
    width: 100%;
  }

/* #top */
    #top section h2 {
        text-align: center;
        margin-bottom: 60px;
    }

/* Shinoharaとは */
    #whatSec {
        text-align: center;
    }
    #whatSec h2 + img {
        padding: 0 0 40px;
    }
    #whatSec p {
        width: 800px;
        margin: 0 auto;
        text-align: left;
    }

/* Shinoharaのチャレンジ */
    #challengeSec {
        background: url(../img/top/bgChallenge.jpg) no-repeat 50% 50%;
        background-size: cover;
        color: #fff;
        text-align: center;
    }
    #challengeSec ul {
        width: 100%;
        margin-bottom: 60px;
        display: table;
    }
    #challengeSec ul li {
        width: 33.3%;
        display: table-cell;
    }
    #challengeSec ul + p {
        width: 680px;
        margin: 0 auto 60px;
        text-align: left;
        text-shadow: 5px 5px 5px rgba(000, 000, 000, 0.5), 4px 4px 4px rgba(000, 000, 000, 0.5), 3px 3px 3px rgba(000, 000, 000, 0.5), 2px 2px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(000, 000, 000, 1);
    }

/* Shinohara の加工技術 */
    #technologySec {
        background-color: #e4ecf0;
    }
    #technologySec .waterheater {
        padding: 100px 0;
        margin-bottom: 20px;
        background: url(../img/top/imgWaterheater.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    #technologySec .car{
        padding: 100px 0;
        background: url(../img/top/imgCar.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    #technologySec .wrap {
        width: 380px;
        margin: 0 auto;
        padding: 40px 90px 40px;
        background-color: rgba(255, 255, 255, 0.9);
    }
/*    #technologySec .wrap > div {
        min-height: 276px;
    }*/

    #technologySec .wrap h3 {
        margin-bottom: 20px;
        border-bottom: 4px solid #144c86;
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
    }
    #technologySec .wrap p {
        margin-bottom: 1em;
    }
    #technologySec .wrap p em {
        color: #962020;
    }

/* 新着情報 */
    #infoSec ul {
        margin-bottom: 30px;
        border-top: 1px solid #f4f4f4;
    }
    #infoSec li {
        border-bottom: 1px solid #f4f4f4;
        position: relative;
        background: url(../img/common/iconArrow.png) no-repeat 99% 50%;
    }
    #infoSec li:hover {
        background-color: #f4f4f4;
        -webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;
    }
    #infoSec li a {
        padding: 10px;
        display: block;
    }
    #infoSec li a {color: #555;text-decoration: none;}
    #infoSec li a:link {color: #555;}
    #infoSec li a:visited {color: #555;}
    #infoSec li a:hover {color: #962020;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
    #infoSec li a:active {color: #555;}

    #infoSec .date {
        width: 130px;
        position: absolute;
        top: 10px;
        left: 20px;
    }
    #infoSec .ttl {
        padding: 0 40px 0 150px;
    }
    #infoSec .btn {
        text-align: center;
    }
}
@media screen and (max-width: 767px) {
/* slide */
    .topKeyimages {
        width: 100%;
        position: relative;
    }
    .bx-wrapper .bx-viewport {
        height: 200px !important;
        width: 100%;
        box-shadow: none;
        border: none;
        left: 0;
        background: #fff;
        -webkit-transform: translatez(0);
        -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
    }
    .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
      background: #c6000f;
    }
  .slide li {
    width: 100% !important;
    position: relative;
  }
  .slide li  > div {
    height: 200px;
    position: relative;
  }
  .slide li.slide1 {
    background: url(../img/top/bgKeyimages1.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .slide li.slide2 {
    background: url(../img/top/bgKeyimages2.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .slide li.slide3 {
    background: url(../img/top/bgKeyimages3_202306.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .slide li.slide1 span img {
    position: absolute;
    bottom: 10%;
    left: 0;
  }


  .slide li.slide1 span img {
    width: 90%;
    position: absolute;
    bottom: 10%;
    left: 50%;
    -webkit-transform: translate(-50%, 0); /* Safari用 */
    transform: translate(-50%, 0);
  }
  .slide li.slide2 span img {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
  }
  .slide li.slide3 span img {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0); /* Safari用 */
    transform: translate(-50%, 0);
  }
  .slide li span + img {
    width: 100%;
  }

/* #top */
    #top section h2 {
        text-align: center;
        margin-bottom: 30px;
    }

/* Shinoharaとは */
    #whatSec {
        text-align: center;
    }
    #whatSec h2 + img {
        padding: 0 0 20px;
    }
    #whatSec p {
        text-align: left;
    }

/* Shinoharaのチャレンジ */
    #challengeSec {
        background: url(../img/top/bgChallenge.jpg) no-repeat 70% 50%;
        background-size: cover;
        color: #fff;
        text-align: center;
    }
    #top #challengeSec h2 {
        margin-bottom: 0;
    }
    #challengeSec ul {
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
    }
    #challengeSec ul li {
        padding: 10px;
        display: inline-block;
    }
    #challengeSec ul li img {
        height: 80px;
    }
    #challengeSec ul + p {
        margin: 0 auto 30px;
        text-align: left;
        text-shadow: 5px 5px 5px rgba(000, 000, 000, 0.5), 4px 4px 4px rgba(000, 000, 000, 0.5), 3px 3px 3px rgba(000, 000, 000, 0.5), 2px 2px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(000, 000, 000, 1);
    }

/* Shinohara の加工技術 */
    #technologySec {
        background-color: #e4ecf0;
    }
    #technologySec .waterheater {
        padding: 20px 0;
        margin-bottom: 20px;
        background: url(../img/top/imgWaterheater.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    #technologySec .car{
        padding: 20px 0;
        background: url(../img/top/imgCar.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    #technologySec .wrap {
      box-sizing: border-box;
        margin: 20px;
        padding: 20px;
        vertical-align: middle;
        background-color: rgba(255, 255, 255, 0.9);
    }
    #technologySec .wrap h3 {
        margin-bottom: 10px;
        border-bottom: 4px solid #144c86;
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
    }
    #technologySec .wrap p {
        margin-bottom: 1em;
    }
    #technologySec .wrap p em {
        color: #962020;
    }
    #technologySec .wrap .btn {
        text-align: center;
    }

    /* 新着情報 */
    #infoSec ul {
        margin-bottom: 30px;
        border-top: 1px solid #f4f4f4;
    }
    #infoSec li {
        border-bottom: 1px solid #f4f4f4;
        background: url(../img/common/iconArrow.png) no-repeat 99% 50%;
    }
    #infoSec li:hover {
        background-color: #f4f4f4;
        -webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;
    }
    #infoSec li a {
        padding: 10px;
        display: block;
    }
    #infoSec li a {color: #555;text-decoration: none;}
    #infoSec li a:link {color: #555;}
    #infoSec li a:visited {color: #555;}
    #infoSec li a:hover {color: #962020;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
    #infoSec li a:active {color: #555;}

    #infoSec .ttl {
        padding: 0;
    }
    #infoSec .btn {
        text-align: center;
    }
}

/* =============================================================================
    下層　共通
   ========================================================================== */
@media screen and (min-width: 768px) {
    #under h1 {
        width: 1120px;
        height: 300px;
        margin: 0 auto;
        position: relative;
    }
    #under h1 img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%); /* Safari用 */
        transform: translate(-50%, -50%);
    }
    #under h2 {
        text-align: center;
        margin-bottom: 60px;
    }
}
@media screen and (max-width: 767px) {
    #under h1 {
        width: 100%;
        height: 100px;
        margin: 0 auto;
        position: relative;
    }
    #under h1 img {
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%); /* Safari用 */
        transform: translate(-50%, -50%);
    }
    #under h2 {
        text-align: center;
        margin-bottom: 30px;
    }
}

/* =============================================================================
    会社情報
   ========================================================================== */
@media screen and (min-width: 768px) {
    .company .Keyimages {
        background: url(../img/company/bgCompany.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
/* ご挨拶 */
    .company #message {
        min-height: 700px;
    }
    .company #message .wrap {
        position: relative;
    }
    .company #message .photo {
        width: 407px;
        position: absolute;
        top: 120px;
        left: 0;
    }
    .company #message .right {
        background: url(../img/company/bgCompanyPlan.jpg) no-repeat 100% 0;
        padding-left: 500px;
    }
    .company #message h3 {
        text-align: center;
        padding: 60px 0;
    }
    .company #message .right p {
        font-size: 16px;
        margin-bottom: 1em;
    }
    .company #message .right .name {
        padding: 30px 0;
        text-align: right;
    }

/* 会社概要 */
    .company #profile {
        background-color: #f8f8f8;
        overflow: hidden;
    }
    .company #profile table {
        width: 540px;
        border-top: 1px solid #bebebe;
    }
    .company #profile table.left {
        float: left;
    }
    .company #profile table.right {
        float: right;
    }
    .company #profile tr {
        border-bottom: 1px solid #bebebe;
    }
    .company #profile th {
        width: 20%;
        padding: 10px;
        color: #144c86;
        font-weight: bold;
        vertical-align: top;
    }
    .company #profile td {
        width: 80%;
        padding: 10px;
    }

/* 沿革 */
    .company #history {
        background: url(../img/company/imgHistory.jpg) no-repeat 0 180px;
        background-size: 45% auto;
    }
    .company #history .wrap table {
        margin-left: 560px;
        width: 560px;
        border-top: 1px solid #bebebe;
    }
    .company #history tr {
        border-bottom: 1px solid #bebebe;
    }
    .company #history th {
        width: 30%;
        padding: 10px;
        color: #144c86;
        font-weight: bold;
        vertical-align: top;
        text-align: left;
    }
    .company #history td {
        width: 70%;
        padding: 10px;
    }

/* 工場紹介 */
    .company #factory {
        background-color: #f8f8f8;
    }
    .company #factory ul {
        width: 100%;
        text-align: center;
        letter-spacing: -0.4em;
    }
    .company #factory ul li {
        padding: 0 5px 20px;
        display: inline-block;
        letter-spacing: normal;
    }
/* 保有設備 */
    .company #facility table {
        width: 100%;
    }
    .company #facility .col1 {
        width: 30%;
    }
    .company #facility .col2 {
        width: 20%;
        text-align: center;
    }
    .company #facility .col3 {
        width: 50%;
    }
    .company #facility th {
        padding: 10px;
        background-color: #f1f1f1;
        font-weight: bold;
        border: 1px solid #ccc;
    }
    .company #facility td {
        padding: 10px;
        border: 1px solid #ccc;
    }
}
@media screen and (max-width: 767px) {
    .company .Keyimages {
        background: url(../img/company/bgCompany.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
/* ご挨拶 */
    .company #message {
    }
    .company #message .wrap {
    }
    .company #message .photo {
        display: block;
        margin: 0 auto;
        height: 300px;
    }
    .company #message .right {
        background: url(../img/company/bgCompanyPlan.jpg) no-repeat 50% 0;
    }
    .company #message h3 {
        text-align: center;
        padding: 30px 0;
    }
    .company #message .right p {
        margin-bottom: 1em;
    }
    .company #message .right .name {
        padding: 10px 0;
        text-align: right;
    }

/* 会社概要 */
    .company #profile {
        background-color: #f8f8f8;
    }
    .company #profile table {
        width: 100%;
    }
    .company #profile table.left {
        border-top: 1px solid #bebebe;
    }
    .company #profile table.right {
    }
    .company #profile tr {
        border-bottom: 1px solid #bebebe;
    }
    .company #profile th {
        width: 20%;
        padding: 10px 0;
        color: #144c86;
        font-weight: bold;
        vertical-align: top;
        text-align: left;
    }
    .company #profile td {
        width: 80%;
        padding: 10px;
    }

/* 沿革 */
    .company #history {
    }
    .company #history .wrap table {
        width: 100%;
        border-top: 1px solid #bebebe;
    }
    .company #history tr {
        border-bottom: 1px solid #bebebe;
    }
    .company #history th {
        width: 30%;
        padding: 10px 0;
        color: #144c86;
        font-weight: bold;
        vertical-align: top;
        text-align: left;
    }
    .company #history td {
        width: 70%;
        padding: 10px;
    }

/* 工場紹介 */
    .company #factory {
        background-color: #f8f8f8;
    }
    .company #factory ul {
        width: 100%;
        text-align: center;
        letter-spacing: -0.4em;
    }
    .company #factory ul li {
        padding: 0 5px 20px;
        display: inline-block;
        letter-spacing: normal;
    }
/* 保有設備 */
    .company #facility table {
        width: 100%;
    }
    .company #facility .col1 {
        width: 30%;
    }
    .company #facility .col2 {
        width: 20%;
        text-align: center;
    }
    .company #facility .col3 {
        width: 50%;
    }
    .company #facility th {
        padding: 10px;
        background-color: #f1f1f1;
        font-weight: bold;
        border: 1px solid #ccc;
    }
    .company #facility td {
        vertical-align: top;
        padding: 10px;
        border: 1px solid #ccc;
    }
}

/* =============================================================================
    Shinoharaのチャレンジ
   ========================================================================== */
@media screen and (min-width: 768px) {
    .challenge section{
        font-size: 16px;
    }
    .challenge .Keyimages {
        background: url(../img/challenge/bgChallenge.png) no-repeat 50% 50%;
        background-size: cover;
    }
    .challenge .intro {
        width: 800px;
        margin: 0 auto 60px;
    }
    .challenge .table {
        width: 100%;
        display: table;
    }
    .challenge .cell {
        width: 50%;
        display: table-cell;
        vertical-align: top;
    }
    .challenge .cell2 {
        padding: 0 0 0 20px;
    }
    .challenge .imgBox {
        width: 100%;
        margin-bottom: 20px;
        display: table;
    }
    .challenge .imgBox li {
        width: 50%;
        display: table-cell;
    }
    .challenge .imgBox li.right {
        text-align: right;
    }
    .challenge #challenge02 {background-color: #eeeeee;}
}
@media screen and (max-width: 767px) {
    .challenge .Keyimages {
        background: url(../img/challenge/bgChallenge.png) no-repeat 50% 50%;
        background-size: cover;
    }
    .challenge .intro {
        margin: 0 auto 30px;
    }
    .challenge .table {
        width: 100%;
    }
    .challenge .cell img {
        width: 100%;
    }
    .challenge .cell1 {
        margin-bottom: 10px;
    }
    .challenge .cell2 {
    }
    .challenge .imgBox {
        width: 100%;
        margin-bottom: 20px;
        display: table;
    }
    .challenge .imgBox li {
        width: 50%;
        text-align: left;
        display: table-cell;
    }
    .challenge .imgBox li img {
        box-sizing: border-box;
        padding-right: 5px;
    }
    .challenge .imgBox li.right img {
        padding: 0 0 0 5px;
    }
    .challenge #challenge02 {background-color: #eeeeee;}
}

/* =============================================================================
    Shinoharaの加工技術 -給湯器関連部品　製造・組立- waterheater
   ========================================================================== */
@media screen and (min-width: 768px) {
    .waterheater section {
        font-size: 16px;
    }
    .waterheater .Keyimages {
        background: url(../img/technology/waterheater/bgWaterheater.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .waterheater .intro {
        text-align: center;
    }
    .waterheater .intro p {
        display: inline-block;
        margin: 60px auto;
        text-align: left;
        font-size: 16px;
    }
    .waterheater #flow {
        background-color: #eeeeee;
    }
    .waterheater #flow .table {
        width: 100%;
        margin-bottom: 100px;
        display: table;
        background-color: #fff;
        position: relative;
    }
    .waterheater #flow .flow01:after,
    .waterheater #flow .flow02:after {
        content: "";
        width: 170px;
        height: 82px;
        background: url(../img/technology/waterheater/imgArrowUnder.png) no-repeat 0 0;
        display: block;
        position: absolute;
        bottom: -82px;
        left: 50%;
        -webkit-transform: translate(-50%, 0); /* Safari用 */
        transform: translate(-50%, 0);
    }
    .waterheater #flow .cell {
        width: 50%;
        padding: 20px;
        display: table-cell;
        vertical-align: top;
    }
    .waterheater #flow .cell h3 {
        border-bottom: 5px solid #144c86;
        display: inline-block;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .waterheater #flow .cell span.red {
        color: red;
    }
    .waterheater #product ul {
        width: 100%;
        display: table;
    }
    .waterheater #product ul li {
        width: 33.3%;
        display: table-cell;
        vertical-align: top;
    }
    .waterheater #product ul li > div {
        max-width: 350px;
    }
    .waterheater #product ul li img {
        margin-bottom: 10px;
    }
    .waterheater #product h3 {
        border-bottom: 5px solid #144c86;
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 767px) {
    .waterheater .Keyimages {
        background: url(../img/technology/waterheater/bgWaterheater.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .waterheater .intro p {
        margin: 30px auto;
    }
    .waterheater #flow {
        background-color: #eeeeee;
    }
    .waterheater #flow .table {
        width: 100%;
        margin-bottom: 50px;
        background-color: #fff;
        position: relative;
    }
    .waterheater #flow .flow01:after,
    .waterheater #flow .flow02:after {
        content: "";
        width: 85px;
        height: 41px;
        background: url(../img/technology/waterheater/imgArrowUnder.png) no-repeat 0 0;
        background-size: contain;
        display: block;
        position: absolute;
        bottom: -41px;
        left: 50%;
        -webkit-transform: translate(-50%, 0); /* Safari用 */
        transform: translate(-50%, 0);
    }
    .waterheater #flow .cell img {
        width: 100%;
    }
    .waterheater #flow .cell1 {
        padding: 10px;
    }
    .waterheater #flow .cell2 {
        padding: 10px 10px 30px;
    }
    .waterheater #flow .cell h3 {
        border-bottom: 5px solid #144c86;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .waterheater #product ul {
        width: 100%;
    }
    .waterheater #product ul li {
        margin-bottom: 30px;
    }
    .waterheater #product ul li img {
        width: 100%;
    }
    .waterheater #product h3 {
        border-bottom: 5px solid #144c86;
        font-size: 18px;
        font-weight: bold;
    }
}
/* =============================================================================
    Shinoharaの加工技術 -自動車・産業用部品　機械加工- car
   ========================================================================== */
@media screen and (min-width: 768px) {
    .car section {
        font-size: 16px;
    }
    .car .Keyimages {
        background: url(../img/technology/car/bgCar.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .car .intro {
        text-align: center;
    }
    .car .intro p {
        display: inline-block;
        margin: 60px auto;
        text-align: left;
        font-size: 16px;
    }
    .car #carSec01 {
        background-color: #eeeeee;
    }
    .car .table {
        width: 100%;
        margin-bottom: 60px;
        display: table;
        background-color: #fff;
        position: relative;
    }
    .car .cell {
        width: 50%;
        padding: 20px;
        display: table-cell;
        vertical-align: bottom;
    }
    .car .cell h3 {
        border-bottom: 5px solid #144c86;
        display: inline-block;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .car .cell p {
        margin-bottom: 1em;
    }
    .car .imgBox {
        width: 100%;
        display: table;
    }
    .car .imgBox li {
        width: 50%;
        display: table-cell;
        text-align: left;
        padding-right: 10px;
    }
    .car .imgBox li.right {
        text-align: right;
    }
}
@media screen and (max-width: 767px) {
    .car .Keyimages {
        background: url(../img/technology/car/bgCar.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .car .intro p {
        margin: 30px auto;
        text-align: left;
    }
    .car #carSec01 {
        background-color: #eeeeee;
    }
    .car .table {
        width: 100%;
        margin-bottom: 30px;
        background-color: #fff;
    }
    .car .cell {
        padding: 10px;
    }
    .car .cell img {
        width: 100%;
    }
    .car .cell h3 {
        border-bottom: 5px solid #144c86;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .car .cell p {
        margin-bottom: 1em;
    }
    .car .imgBox {
        width: 100%;
        display: table;
    }
    .car .imgBox li {
        width: 50%;
        display: table-cell;
        text-align: left;
        padding-right: 5px;
    }
    .car .imgBox li.right {
        padding: 0 0 0 5px;
    }
}

/* =============================================================================
    品質・環境への取組み activity
   ========================================================================== */
@media screen and (min-width: 768px) {
    .activity {
        padding-bottom: 80px;
    }
    .activity section {
        font-size: 16px;
    }
    .activity .Keyimages {
        background: url(../img/activity/bgActivity.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .activity .table {
        width: 100%;
        display: table;
        background-color: #fff;
        position: relative;
    }
    .activity .cell1 {
        width: 60%;
        display: table-cell;
        vertical-align: bottom;
    }
    .activity .cell2 {
        width: 40%;
        padding-left: 20px;
        display: table-cell;
        vertical-align: top;
        text-align: center;
    }
    .activity .cell h3 {
        padding: 20px 0;
        margin-bottom: 20px;
        background-color: #f8f8f8;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    }
    .activity .cell h3 em {
        font-size: 30px;
        font-weight: bold;
        color: #144c86;
    }
    .activity .cell1 ul {
        margin-left: 1em;
    }
    .activity .cell1 ul li {
        margin-bottom: 1em;
        list-style: square outside;
    }
    .activity .imgBox {
        width: 100%;
        letter-spacing: -0.4em;
    }
    .activity .imgBox li {
        /* width: 50%;*/
        display: inline-block;
    }
    .activity .imgBox li.img1,
    .activity .imgBox li.img2 {
        margin-bottom: 20px;
    }
    .activity .imgBox li.img3 {
        width: 100%;
    }

/* 適用範囲 */
    .activity #scope table {
        width: 800px;
        margin: 0 auto;
        border-top: 1px solid #bebebe;
    }
    .activity #scope tr {
        border-bottom: 1px solid #bebebe;
    }
    .activity #scope th {
        width: 40%;
        padding: 10px;
        font-weight: bold;
        color: #144c86;
        text-align: left;
        vertical-align: top;
    }
    .activity #scope td {
        width: 60%;
        padding: 10px;
        vertical-align: top;
    }
}
@media screen and (max-width: 767px) {
    .activity .Keyimages {
        background: url(../img/activity/bgActivity.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .activity .table {
        width: 100%;
    }
    .activity .cell1 {
    }
    .activity .cell2 {
        text-align: center;
    }
    .activity .cell h3 {
        padding: 20px 0;
        margin-bottom: 10px;
        background-color: #f8f8f8;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    }
    .activity .cell h3 em {
        font-size: 20px;
        font-weight: bold;
        color: #144c86;
        display: block;
    }
    .activity .cell1 ul {
        margin-left: 1em;
    }
    .activity .cell1 ul li {
        margin-bottom: 1em;
        list-style: square outside;
    }
    .activity .imgBox {
        width: 100%;
        letter-spacing: -0.4em;
    }
    .activity .imgBox li {
        /* width: 50%; */
        padding: 5px;
        box-sizing: border-box;
        display: inline-block;
    }
    .activity .imgBox li.img1,
    .activity .imgBox li.img2 {
        margin-bottom: 10px;
    }
    .activity .imgBox li.img3 {
        width: 100%;
    }

/* 適用範囲 */
    .activity #scope table {
        width: 100%;
        margin: 0 auto;
        border-top: 1px solid #bebebe;
    }
    .activity #scope tr {
        border-bottom: 1px solid #bebebe;
    }
    .activity #scope th {
        display: block;
        padding: 10px 10px 0 10px;
        font-weight: bold;
        color: #144c86;
        text-align: left;
        vertical-align: top;
    }
    .activity #scope td {
        display: block;
        padding: 0 10px 10px 10px;
        vertical-align: top;
    }
}
/* =============================================================================
  採用情報 .recruit
   ========================================================================== */
@media screen and (min-width: 768px) {
    .recruit .Keyimages {
        background: url(../img/recruit/bgRecruit.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
/*　Message　*/
    .recruit #message .photo {
      margin-bottom: 20px;
    }

    .recruit #message p {
      width: 900px;
      margin: 0 auto 1em;
    }
    .recruit #message p em {
      font-weight: bold;
      font-size: 20px;
    }
    .recruit #message .name {
      text-align: right;
    }
/*　仕事紹介　*/
    .recruit #works {
      background-color: #f5f5f5;
    }
    .recruit #works ul {
      width: 80%;
      letter-spacing: -0.4em;
      text-align: center;
	  margin: 0 auto;
    }
    .recruit #works li {
      width: 300px;
      margin: 0 30px 40px;
      display: inline-block;
      letter-spacing: normal;
    }
    .recruit #works li img {
      margin-bottom: 10px;
    }
    .recruit #works li h3 {
      color: #59850b;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
    .recruit #works li p {
      text-align: left;
    }

/*　エントリー　*/
    .recruit .entrySec {
      background: url(../img/recruit/bgEntrySec.jpg) no-repeat 50% 50%;
      background-size: cover;
      text-align: center;
    }
    #under.recruit .entrySec h2 {
      margin-bottom: 30px;
    }

    .recruit .entrySec .txt {
      margin-bottom: 30px;
      color: #fff;
      text-shadow: 5px 5px 5px rgba(9, 18, 71, 0.5), 4px 4px 4px rgba(9, 18, 71, 0.5), 3px 3px 3px rgba(9, 18, 71, 0.5), 2px 2px 2px rgba(9, 18, 71, 0.5), 1px 1px 1px rgba(9, 18, 71, 1);
    }
    .recruit .entrySec .btn {
    }
    .recruit .entrySec .btn p {
      display: inline-block;
    }
    .recruit .entrySec .btn p a {
      padding: 10px 40px;
      margin: 10px;
      color: #366ea9;
      text-decoration: none;
      display: block;
      font-size: 18px;
      font-weight: bold;
      background: #fff url(../img/recruit/iconArrowRecruit.png) no-repeat 96% 50%;
    }
    .recruit .entrySec .btn p a:hover {
      background-color: rgba(255, 255, 255, 0.8);
    }

/* 先輩社員の声 */
    .recruit #interview .voice {
      margin-bottom: 80px;
      overflow: hidden;
    }
    .recruit #interview .voice h3 {
      text-align: center;
      margin-bottom: 20px;
    }
    .recruit #interview .voice .imgMain {
      margin-bottom: 30px;
    }
    .recruit #interview .voice p {
      width: 500px;
    }
    .recruit #interview .voice span {
      margin-bottom: 1em;
      display: inline-block;
      font-weight: bold;
      background: linear-gradient(transparent 60%, #a1c4e4 0%);
    }
    .recruit #interview .voice .txt {
      margin-bottom: 2em;
    }
    .recruit #interview .voice .faq img {
      width: 500px;
    }

/* 小塚　由起子 */
    .recruit #interview .voice1 .faq1 {
      position: relative;
    }
    .recruit #interview .voice1 .faq1 img {
      position: absolute;
      top: 0;
      right: 0;
    }
    .recruit #interview .voice1 .faq2 {
      min-height: 250px;
    }
    .recruit #interview .voice1 .faq3 {
      padding: 0 0 100px 620px;
      position: relative;
    }
    .recruit #interview .voice1 .faq3 img {
      position: absolute;
      top: -80px;
      left: 0;
    }
    .recruit #interview .voice1 .faq5 {
      position: relative;
    }
    .recruit #interview .voice1 .faq5 img {
      position: absolute;
      top: -200px;
      right: 0;
    }

/* 吉井　駿太郎 */
    .recruit #interview .voice2 .faq1 {
      position: relative;
    }
    .recruit #interview .voice2 .faq1 img {
      position: absolute;
      top: 0;
      right: 0;
    }
    .recruit #interview .voice2 .faq2 {
      min-height: 250px;
    }
    .recruit #interview .voice2 .faq3 {
      margin-top: -120px;
      padding: 0 0 0 620px;
      position: relative;
    }
    .recruit #interview .voice2 .faq3 img {
      position: absolute;
      top: 130px;
      left: 0;
    }
    .recruit #interview .voice2 .faq4 {
      padding: 0 0 120px 620px;
      position: relative;
    }
    .recruit #interview .voice2 .faq5 {
      padding-bottom: 100px;
      position: relative;
    }
    .recruit #interview .voice2 .faq5 img {
      position: absolute;
      top: -100px;
      right: 0;
    }

/* 清野　耕平 */
    .recruit #interview .voice3 .faq1 {
      position: relative;
    }
    .recruit #interview .voice3 .faq1 img {
      position: absolute;
      top: 0;
      right: 0;
    }
    .recruit #interview .voice3 .faq2 {
      min-height: 250px;
    }
    .recruit #interview .voice3 .faq3 {
      margin-top: -360px;
      padding: 0 0 0 620px;
      position: relative;
    }
}
@media screen and (max-width: 767px) {
    .recruit .Keyimages {
        background: url(../img/recruit/bgRecruit.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
/*　Message　*/
    .recruit #message .photo {
      margin-bottom: 20px;
    }

    .recruit #message p {
      margin: 0 auto 1em;
    }
    .recruit #message p em {
      font-weight: bold;
      font-size: 18px;
    }
    .recruit #message .name {
      text-align: right;
    }
    .recruit #message .name img {
      height: 18px;
    }

/*　仕事紹介　*/
    .recruit #works {
      background-color: #f5f5f5;
    }
    .recruit #works ul {
      width: 100%;
      letter-spacing: -0.4em;
      text-align: center;
    }
    .recruit #works li {
      width: 50%;
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
    }
    .recruit #works li div {
      padding: 10px;
    }
    .recruit #works li img {
      margin-bottom: 10px;
    }
    .recruit #works li h3 {
      color: #59850b;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }
    .recruit #works li p {
      text-align: left;
    }

/*　エントリー　*/
    .recruit .entrySec {
      background: url(../img/recruit/bgEntrySec.jpg) no-repeat 50% 50%;
      background-size: cover;
      text-align: center;
    }
    #under.recruit .entrySec h2 {
      margin-bottom: 30px;
    }
    .recruit .entrySec .txt {
      margin-bottom: 30px;
      color: #fff;
      text-shadow: 5px 5px 5px rgba(9, 18, 71, 0.5), 4px 4px 4px rgba(9, 18, 71, 0.5), 3px 3px 3px rgba(9, 18, 71, 0.5), 2px 2px 2px rgba(9, 18, 71, 0.5), 1px 1px 1px rgba(9, 18, 71, 1);
    }
    .recruit .entrySec .btn p {
      display: inline-block;
    }
    .recruit .entrySec .btn p a {
      padding: 10px 40px;
      margin: 10px;
      color: #366ea9;
      text-decoration: none;
      display: block;
      font-size: 18px;
      font-weight: bold;
      background: #fff url(../img/recruit/iconArrowRecruit.png) no-repeat 96% 50%;
    }
    .recruit .entrySec .btn p a:hover {
      background-color: rgba(255, 255, 255, 0.8);
    }

/* 先輩社員の声 */
    .recruit #interview .voice {
      overflow: hidden;
    }
    .recruit #interview .voice h3 {
      text-align: center;
      margin-bottom: 20px;
    }
    .recruit #interview .voice h3 img {
      height: 50px;
    }
    .recruit #interview .voice .imgMain {
      margin-bottom: 30px;
    }
    .recruit #interview .voice p {
    }
    .recruit #interview .voice span {
      margin-bottom: 1em;
      display: inline-block;
      font-weight: bold;
      background: linear-gradient(transparent 60%, #a1c4e4 0%);
    }
    .recruit #interview .voice .txt {
      margin-bottom: 2em;
    }
    .recruit #interview .voice .faq img {
      width: 100%;
      margin-bottom: 1em;
    }

}

/* =============================================================================
    プライバシーポリシー
   ========================================================================== */
@media screen and (min-width: 768px) {
  .privacy .Keyimages {
        background: url(../img/contact/bgKeyimages.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .privacy p {
        margin: 0 0 3em;
    }
    .privacy dt {
        font-size: 16px;
        color: #144c86;
        margin-bottom: .1em;
    }
    .privacy dd {
        margin: 0 0 2em 1em;
    }
    .privacy strong {
        font-weight: bold;
    }
    .privacy dd ul {
        padding: 0 0 0 1em;
        margin: 1em 0 0;
    }
    .privacy dd ul li {
        list-style-type: disc;
    }
}
@media screen and (max-width: 767px) {
  .privacy .Keyimages {
        background: url(../img/contact/bgKeyimages.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .privacy section {
      padding-top: 0;
    }
    .privacy p {
        margin: 0 0 3em;
    }
    .privacy dt {
        font-size: 16px;
        color: #144c86;
        margin-bottom: .1em;
    }
    .privacy dd {
        margin: 0 0 2em 1em;
    }
    .privacy strong {
        font-weight: bold;
    }
    .privacy dd ul {
        padding: 0 0 0 1em;
        margin: 1em 0 0;
    }
    .privacy dd ul li {
        list-style-type: disc;
    }
}
/* =============================================================================
    .contact　お問い合わせ
   ========================================================================== */
@media screen and (min-width: 768px) {
    .contact .Keyimages {background: url(../img/contact/bgKeyimages.jpg) no-repeat 50% 50%;background-size: cover;}
    .contact .intro {text-align: center;margin: 60px auto;}
    .contact #tel {background: #f8f8f8;text-align: center;}
    .contact #tel .tel {margin-bottom: 2em;}
    .contact #tel .fax {margin-bottom: 2em;}
    .contact .form {width: 800px;}
    .contact .form p {margin-bottom: 1em;}
    .contact .form h4 {margin-bottom: 1em;font-size: 18px;color: #fe0030;font-weight: bold;}
    .contact .form table {width: 100%;margin-bottom: 50px; background: #fff;border-top: 1px dotted #c8c8c8;}
    .contact .form tr {border-bottom: 1px dotted #c8c8c8;}
    .contact .form th {width: 30%;padding: 20px;text-align: left;font-weight: bold;vertical-align: middle;background-color: #f8f8f8;}
    .contact .form .relative {position: relative;font-weight: bold;}
    .contact .form th span {position: absolute;top: 50%;right: 0;transform: translate3d(0,-50%,0); -webkit-transform: translate(0, -50%); /* Safari用 */ transform: translate(0, -50%);text-align: center; width: 40px; background-color: #ff0727;color: #fff;display: inline-block;padding: 0 5px;margin-left: 20px;}
    .contact .form td {width: 70%;padding: 20px;}
    .contact .form table input {width: 100%;padding: 10px;box-sizing: border-box;}
    .contact .form table textarea {width: 100%;padding: 10px;box-sizing: border-box;}
    .contact .submit {text-align: center;}
    .contact .submit input { -webkit-appearance: none;border-radius: 0;position: relative; color: #fff;cursor: pointer; border: none;font-size: 18px; display: inline-block;text-align: center;margin: 10px;  padding: 10px 80px;background-color: #0068b7;}
    .contact .submit input:hover {background-color: #ff0727;transition:all .5s ease;}
    .contact label.error {color: #fe0030;}
    .contact + footer {border-top: 1px solid #ccc;}
    .contact + footer .contactSec {display: none;}
}
@media screen and (max-width: 767px) {
    .contact .Keyimages {background: url(../img/contact/bgKeyimages.jpg) no-repeat 50% 50%;background-size: cover;}
    .contact .intro {margin: 30px 0;}
    .contact #tel {background: #f8f8f8;text-align: center;}
    .contact #tel .tel {margin-bottom: 2em;}
    .contact #tel .fax {margin-bottom: 2em;}
    .contact .form p {margin-bottom: 1em;}
    .contact .form h4 {margin-bottom: 1em;font-size: 16px;color: #fe0030;font-weight: bold;}
    .contact .form table {width: 100%;margin-bottom: 30px; background: #fff;border-top: 1px dotted #c8c8c8;}
    .contact .form tr {border-bottom: 1px dotted #c8c8c8;}
    .contact .form th {display:block;padding: 10px;text-align: left;font-weight: bold;vertical-align: top;background-color: #f8f8f8;}
    .contact .form th span {text-align: center; width: 40px; background-color: #ff0727;color: #fff;display: inline-block;padding: 0 5px;margin-left: 20px;}
    .contact .form td {display:block;padding: 10px;}
    .contact .form table input {width: 100%;padding: 10px;box-sizing: border-box;}
    .contact .form table textarea {width: 100%;padding: 10px;box-sizing: border-box;}
    .contact .submit {text-align: center;}
    .contact .submit input { -webkit-appearance: none;border-radius: 0;position: relative; color: #fff;cursor: pointer; border: none;font-size: 18px; display: inline-block;text-align: center;margin: 10px;  padding: 10px 80px;background-color: #0068b7;}
    .contact .submit input:hover {background-color: #ff0727;transition:all .5s ease;}
    .contact label.error {color: #fe0030;}
    .contact + footer {border-top: 1px solid #ccc;}
    .contact + footer .contactSec {display: none;}
}

/* =============================================================================
    WordPress　新着情報一覧
   ========================================================================== */
@media screen and (min-width: 768px) {
/* info List */
    .infolist .Keyimages,
    .infopage .Keyimages {background: url(../img/contact/bgKeyimages.jpg) no-repeat 50% 50%;background-size: cover;}
    .infolist ul {width: 100%;margin: 0 auto 30px;border-top: 1px solid #ccc;}
    .infolist ul li {border-bottom: 1px solid #ccc;}
    .infolist ul a {text-decoration: none;color: #333;padding: 10px;display: block;overflow: hidden;background: url(../img/common/iconArrow.png) no-repeat 99% 50%;}
    .infolist ul a:hover {background-color: #f7f7f7;}
    .infolist p {box-sizing: border-box;}
    .infolist .date {width: 140px;float: left;font-weight: bold;}
    .infolist .ttl {width: 940px;float: left;}

/* .pagenavi  */
    .pagenavi {text-align: center;margin-top: 20px;}
    .pagenavi .current {
        background: #0068b7;
        display: inline-block;
        padding: 2px 10px;
        text-align: center;
        border: 1px solid #0068b7;
        font-size: 88%;
        color: #fff;
    }
    .pagenavi a {
        background: #fff;
        display: inline-block;
        padding: 2px 10px;
        text-align: center;
        margin: 0 5px;
        border: 1px solid #0068b7;
        font-size: 88%;
        color:#0068b7;
        text-decoration: none;
    }
    .pagenavi a:hover {background-color: #0068b7;color: #fff;}

/* single.php  詳細ページ  */
    .infopage section .wrap {width: 900px;}
    .infopage .ttlSingle {width: 100%;overflow: hidden; margin: 0 auto 30px;padding: 20px 0; border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;font-size: 16px;}
    .infopage .ttlSingle p {box-sizing: border-box;padding-left: 10px;font-weight:bold;}
    .infopage .ttlSingle .date {width: 140px;float: left;}
    .infopage .ttlSingle .ttl {width: 660px;float: left;}

    .infopage .content {padding-bottom:20px;margin-bottom: 30px;border-bottom: 1px solid #ccc;}
    #under.infopage .content h1 {width: 100%;height: auto;font-weight: bold;font-size: 24px;margin: 0 0 0.5em 0;}
    #under.infopage .content h2 {font-weight: bold;font-size: 22px;text-align: left;margin: 0 0 0.5em 0;}
    #under.infopage .content h3 {font-weight: bold;font-size: 20px;margin: 0 0 0.5em 0;}
    #under.infopage .content h4 {font-weight: bold;font-size: 18px;margin: 0 0 0.5em 0;}
    #under.infopage .content h5 {font-weight: bold;font-size: 16px;margin: 0 0 0.5em 0;}
    #under.infopage .content h6 {font-weight: bold;font-size: 14px;margin: 0 0 0.5em 0;}
    #under.infopage .content pre {}
    .infopage .content p {margin-bottom: 1em;}
    .infopage .content p b {font-weight: bold;}
    .infopage .content p strong {font-weight: bold;}
    .infopage .content p em {font-style:italic;}
    .infopage .content ul {margin-left: 1em;margin-bottom: 1em;}
    .infopage .content ul li {list-style: disc outside;}
    .infopage .content ol {margin-left: 1.5em;margin-bottom: 1em;}
    .infopage .content ol li {list-style: decimal outside;}

    .infopage .content img {display: block;}
    .infopage .content img.aligncenter {margin: 0 auto;}
    .infopage .content img.alignleft {margin-right: auto;}
    .infopage .content img.alignright {margin-left: auto;}
    .infopage .btn {text-align: center;}

    .infopage .content blockquote {
      margin-bottom: 1em;
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}
    .infopage .content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    vertical-align: middle;
    content: "“";
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;
}
    .infopage .content blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

    .infopage .content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
}

@media screen and (max-width: 767px) {
/* info LIST */
    .infolist .Keyimages, .infopage .Keyimages {background: url(../img/contact/bgKeyimages.jpg) no-repeat 50% 50%;background-size: cover;}
    .infolist ul {margin: 0 auto 30px;border-top: 1px solid #ccc;}
    .infolist ul li {border-bottom: 1px solid #ccc;}
    .infolist ul a {text-decoration: none;color: #333;padding: 5px 10px;display: block;}
    .infolist ul a:hover {background-color: #f7f7f7;}
    .infolist p {box-sizing: border-box;}
    .infolist .date {font-weight: bold;}
    .infolist .ttl {}

/* .pagenavi  */
    .pagenavi {text-align: center;margin-top: 20px;}
    .pagenavi .current {
        background: #0068b7;
        display: inline-block;
        padding: 2px 10px;
        text-align: center;
        border: 1px solid #0068b7;
        font-size: 88%;
        color: #fff;
    }
    .pagenavi a {
        background: #fff;
        display: inline-block;
        padding: 2px 10px;
        text-align: center;
        margin: 0 5px;
        border: 1px solid #0068b7;
        font-size: 88%;
        color:#0068b7;
        text-decoration: none;
    }
    .pagenavi a:hover {background-color: #0068b7;color: #fff;}

/* single.php  詳細ページ  */
    .infopage .ttlSingle {margin: 0 auto 30px;padding: 10px 0; border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;font-size: 16px;}
    .infopage .ttlSingle p {font-weight: bold;}
    .infopage .ttlSingle .date {}
    .infopage .ttlSingle .ttl {}
    .infopage .content {padding-bottom:20px;margin-bottom: 30px;border-bottom: 1px solid #ccc;}
    #under.infopage .content h1 {width: 100%;height: auto;font-weight: bold;font-size: 24px;margin: 0 0 0.5em 0;}
    #under.infopage .content h2 {font-weight: bold;font-size: 22px;text-align: left;margin: 0 0 0.5em 0;}
    #under.infopage .content h3 {font-weight: bold;font-size: 20px;margin: 0 0 0.5em 0;}
    #under.infopage .content h4 {font-weight: bold;font-size: 18px;margin: 0 0 0.5em 0;}
    #under.infopage .content h5 {font-weight: bold;font-size: 16px;margin: 0 0 0.5em 0;}
    #under.infopage .content h6 {font-weight: bold;font-size: 14px;margin: 0 0 0.5em 0;}
    #under.infopage .content pre {}
    .infopage .content p {margin-bottom: 1em;}
    .infopage .content p b {font-weight: bold;}
    .infopage .content p strong {font-weight: bold;}
    .infopage .content p em {font-style:italic;}
    .infopage .content ul {list-style-type: disc outside;margin-left: 1em;margin-bottom: 1em;}
    .infopage .content ul li {list-style: disc outside;}
    .infopage .content ol {margin-left: 1.5em;margin-bottom: 1em;}
    .infopage .content ol li {list-style: decimal outside;}
    .infopage .content img {display: block;}
    .infopage .content img.aligncenter {margin: 0 auto;}
    .infopage .content img.alignleft {margin-right: auto;}
    .infopage .content img.alignright {margin-left: auto;}
    .infopage .btn {text-align: center;}
    .infopage .content blockquote {
      margin-bottom: 1em;
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;}
    .infopage .content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    vertical-align: middle;
    content: "“";
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;}
    .infopage .content blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;}
    .infopage .content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;}

  }

/* =============================================================================
  募集要項・エントリー .require
   ========================================================================== */
@media screen and (min-width: 768px) {
  .require .Keyimages {background: url(../img/recruit/bgRecruit.jpg) no-repeat 50% 50%;background-size: cover;}
  .require section .wrap {
        width: 800px;
        margin: 0 auto;
    }
    .require .recruitment {
      width: 100%;
    }
    .require .recruitment th {
      width: 30%;
      padding: 20px;
      background-color: #f1f1f1;
      font-weight: bold;
      border: 1px solid #ccc;
      text-align: left;
      vertical-align: middle;
    }
    .require .recruitment td {
      width: 70%;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .require h3 {
      font-weight: bold;
      color: #c6000f;
      font-size: 20px;
    }
    .require .form {width: 800px;}
    .require .form p {margin-bottom: 1em;}
    .require .form table {width: 100%;margin-bottom: 50px; background: #fff;border-top: 1px dotted #c8c8c8;}
    .require .form tr {border-bottom: 1px dotted #c8c8c8;}
    .require .form th {width: 30%;padding: 20px;text-align: left;font-weight: bold;vertical-align: middle;background-color: #f8f8f8;}
    .require .form .relative {position: relative;font-weight: bold;}
    .require .form th span {position: absolute;top: 50%;right: 0;transform: translate3d(0,-50%,0); -webkit-transform: translate(0, -50%); Safari用 transform: translate(0, -50%);text-align: center; width: 40px; background-color: #ff0727;color: #fff;display: inline-block;padding: 0 5px;margin-left: 20px;}
    .require .form td {width: 70%;padding: 20px;}
    .require .form table input[type=text] {width: 100%;padding: 10px;box-sizing: border-box;}
    .require .form table input[type=tel] {width: 100%;padding: 10px;box-sizing: border-box;}
    .require .form table input[type=radio] {margin: 0; padding: 10px;box-sizing: border-box;}
    .require .form table textarea {width: 100%;padding: 10px;box-sizing: border-box;}
    .require .submit {text-align: center;}
    .require .submit input { -webkit-appearance: none;border-radius: 0;position: relative; color: #fff;cursor: pointer; border: none;font-size: 18px; display: inline-block;text-align: center;margin: 10px;  padding: 10px 80px;background-color: #0068b7;}
    .require .submit input:hover {background-color: #ff0727;transition:all .5s ease;}
    .require label.error {color: #fe0030;}
}
@media screen and (max-width: 767px) {
  .require .Keyimages {background: url(../img/recruit/bgRecruit.jpg) no-repeat 50% 50%;background-size: cover;}
    .require .recruitment {
      width: 100%;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    .require .recruitment th {
      display: block;
      padding: 10px;
      background-color: #f1f1f1;
      font-weight: bold;
      border-top: 1px solid #ccc;
      text-align: left;
      vertical-align: middle;
    }
    .require .recruitment td {
      display: block;
      padding: 10px;
    }
    .require h3 {
      font-weight: bold;
      color: #c6000f;
      font-size: 18px;
    }
    .require .form p {margin-bottom: 1em;}
    .require .form table {width: 100%;margin-bottom: 30px; background: #fff;border-top: 1px dotted #c8c8c8;}
    .require .form tr {border-bottom: 1px dotted #c8c8c8;}
    .require .form th {display:block;padding: 10px;text-align: left;font-weight: bold;vertical-align: top;background-color: #f8f8f8;}
    .require .form th span {text-align: center; width: 40px; background-color: #ff0727;color: #fff;display: inline-block;padding: 0 5px;margin-left: 20px;}
    .require .form td {display:block;padding: 10px;}
    .require .form table input[type=text] {width: 100%;padding: 10px;box-sizing: border-box;}
    .require .form table input[type=tel] {width: 100%;padding: 10px;box-sizing: border-box;}
    .require .form table input[type=radio] {margin: 0; padding: 10px;box-sizing: border-box;}
    .require .form table textarea {width: 100%;padding: 10px;box-sizing: border-box;}
    .require .submit {text-align: center;}
    .require .submit input { -webkit-appearance: none;border-radius: 0;position: relative; color: #fff;cursor: pointer; border: none;font-size: 18px; display: inline-block;text-align: center;margin: 10px;  padding: 10px 80px;background-color: #0068b7;}
    .require .submit input:hover {background-color: #ff0727;transition:all .5s ease;}
    .require label.error {color: #fe0030;}
}

/* =============================================================================
    .entry　エントリーフォーム
   ========================================================================== */
 @media screen and (min-width: 768px) {
    .entry .Keyimages {background: url(../img/recruit/bgRecruit.jpg) no-repeat 50% 50%;background-size: cover;}
  }
@media screen and (max-width: 767px) {
    .entry .Keyimages {background: url(../img/recruit/bgRecruit.jpg) no-repeat 50% 50%;background-size: cover;}
  }


/* =============================================================================

   ========================================================================== */
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}