@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
/* 変数 */
:root {
  --fbase: min(max(12px, calc(0.8125rem + ((1vw - 3.2px) * 0.6696))), 16px);
  --flead: min(max(15px, calc(0.8125rem + ((1vw - 3.2px) * 0.6696))), 18px);
  --flg: min(max(17px, calc(1.0625rem + ((1vw - 3.75px) * 0.7634))), 20px);
  --flarger: min(max(18px, calc(1.125rem + ((1vw - 3.75px) * 0.9724))), 24px);
  --f2: min(max(18px, calc(1.125rem + ((1vw - 3.75px) * 2.5932))), 34px);
  --fsm: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.6061))), 16px);
  --ffoot: min(max(11px, calc(0.6875rem + ((1vw - 3.2px) * 0.6696))), 14px);
  --fbreadcrumb: min(max(8px, calc(0.5rem + ((1vw - 3.75px) * 0.3241))), 10px);
  --section_margin: min(max(56px, calc(3.5rem + ((1vw - 3.75px) * 9.0762))), 112px); }

/* reset */
ul, ol, li {
  list-style: none;
  margin: 0;
  padding: 0; }

dl, dt, dd {
  margin: 0;
  padding: 0; }

img {
  vertical-align: bottom; }

body {
  background: #fff;
  color: #181615;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fbase);
  letter-spacing: .075rem; }

a {
  color: #67bdd7;
  transition: all 0.5s ease-in; }

a:hover, a:active, a:focus {
  color: #2f95b2;
  outline: none;
  text-decoration: none; }

p {
  padding: 0;
  margin: 0 0 0 0;
  line-height: 1.75; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1.75; }

h2, .head2 {
  font-size: var(--f2); }

.fbase {
  font-size: var(--fbase); }

.flead {
  font-size: var(--flead); }

.flg {
  font-size: var(--flg); }

.flarger {
  font-size: var(--flarger); }

/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  background: #67bdd7;
  color: #fff;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  border-radius: 50%;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
  z-index: 11; }
  .back-to-top i {
    display: inline-block;
    padding-top: 11px;
    color: #fff; }
  @media (max-width: 768px) {
    .back-to-top {
      bottom: 15px; } }

/* Prelaoder */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff; }

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #84c9b6;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite; }

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/* nav active */
body.home nav.main-nav ul li.tab-home a,
body.page-about nav.main-nav ul li.tab-about a,
body.page-services nav.main-nav ul li.tab-services a,
body.page-recruit nav.main-nav ul li.tab-recruit a,
body.page-recruit-entry nav.main-nav ul li.tab-recruit a {
  color: #84c9b6; }

/* background-color */
.section-bg {
  background-color: #f8f8fa;
  padding-top: var(--section_margin);
  padding-bottom: var(--section_margin); }
  .section-bg.section-bg-gradation {
    background: #f0f8fb;
    background: linear-gradient(90deg, #f0f8fb 0%, #f2f9f8 100%); }

h2.ctn-title span {
  display: block;
  color: #84c9b6;
  font-size: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.5128))), 14px); }
h2.ctn-title.ctn-title-white {
  color: #fff; }
  h2.ctn-title.ctn-title-white span {
    color: #fff; }

/* dl */
dl.dl-inline {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--ffoot); }
  dl.dl-inline dt {
    color: #747373;
    font-weight: normal;
    width: 21.88%;
    min-width: 130px;
    height: 6em;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center; }
    dl.dl-inline dt:first-of-type {
      border-top: 0; }
  dl.dl-inline dd {
    width: 78.12%;
    height: 6em;
    border-top: 1px solid #e8e8e8;
    display: flex;
    flex-direction: row;
    align-items: center; }
    dl.dl-inline dd:first-of-type {
      display: flex;
      border-top: 0; }
  @media (max-width: 767px) {
    dl.dl-inline {
      display: block; }
      dl.dl-inline dt {
        width: 100%;
        height: auto;
        padding-top: 1em;
        margin-bottom: .5em; }
        dl.dl-inline dt:first-of-type {
          height: auto; }
      dl.dl-inline dd {
        border-top: none;
        width: 100%;
        height: auto;
        margin-bottom: 1em; }
        dl.dl-inline dd:first-of-type {
          height: auto; } }

/* utility */
.mb1 {
  margin-bottom: min(max(8px, calc(0.5rem + ((1vw - 3.75px) * 1.2966))), 16px); }

.mb2 {
  margin-bottom: min(max(16px, calc(1rem + ((1vw - 3.75px) * 2.5932))), 32px); }

.mb3 {
  margin-bottom: min(max(24px, calc(1.5rem + ((1vw - 3.75px) * 3.8898))), 48px); }

.mb4 {
  margin-bottom: min(max(32px, calc(2rem + ((1vw - 3.75px) * 5.1864))), 64px); }

.mb5 {
  margin-bottom: min(max(40px, calc(2.5rem + ((1vw - 3.75px) * 6.483))), 80px); }

.mb6 {
  margin-bottom: min(max(48px, calc(3rem + ((1vw - 3.75px) * 7.7796))), 96px); }

.mb7 {
  margin-bottom: min(max(56px, calc(3.5rem + ((1vw - 3.75px) * 9.0762))), 112px); }

.section-mb {
  margin-bottom: var(--section_margin); }

.section-mt {
  margin-top: var(--section_margin); }

.section-my {
  margin-top: var(--section_margin);
  margin-bottom: var(--section_margin); }

.pc-br {
  display: block; }

.sp-br {
  display: none; }

@media (max-width: 767px) {
  .pc-br {
    display: none; }

  .sp-br {
    display: block; } }
.rotate-90 {
  transform: rotate(90deg); }

/* button */
.button,
a.button,
button.button {
  font-size: 1rem;
  /* line-height: 1.5; */
  position: relative;
  display: inline-block;
  padding: .8em 2.5em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  border-radius: 100vh; }
  .button.btn-back,
  a.button.btn-back,
  button.button.btn-back {
    background-color: #808080;
    color: #fff;
    font-size: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.5128))), 14px); }
    .button.btn-back:hover,
    a.button.btn-back:hover,
    button.button.btn-back:hover {
      background-color: #4d4d4d; }
  .button.btn-second-color,
  a.button.btn-second-color,
  button.button.btn-second-color {
    background-color: #67bdd7;
    color: #fff;
    font-size: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.5128))), 14px); }
    .button.btn-second-color:hover,
    a.button.btn-second-color:hover,
    button.button.btn-second-color:hover {
      background-color: #2f95b2; }
  .button.btn-white-color,
  a.button.btn-white-color,
  button.button.btn-white-color {
    background-color: #fff;
    color: #67bdd7;
    font-size: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.5128))), 14px); }
    .button.btn-white-color:hover,
    a.button.btn-white-color:hover,
    button.button.btn-white-color:hover {
      background-color: #cccccc; }
  .button.btn-gradiation,
  a.button.btn-gradiation,
  button.button.btn-gradiation {
    background: #67bdd7;
    background: linear-gradient(90deg, #67bdd7 0%, #84c9b7 100%);
    color: #fff;
    font-size: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.5128))), 14px); }
    .button.btn-gradiation:hover,
    a.button.btn-gradiation:hover,
    button.button.btn-gradiation:hover {
      opacity: .6; }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 80px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  padding: 20px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
  background: #fff; }
  @media (max-width: 991px) {
    #header {
      height: 70px;
      padding: 15px 0; } }
  @media (max-width: 575px) {
    #header {
      height: 50px;
      padding: 15px 0; } }
  #header .container {
    position: relative; }
    #header .container .logo {
      position: absolute;
      top: -15px;
      left: 0; }
      @media (max-width: 575px) {
        #header .container .logo {
          top: -30px; } }
      #header .container .logo h1 img {
        padding: 0;
        max-height: 212px;
        transition: all .3s ease; }
        @media (max-width: 991px) {
          #header .container .logo h1 img {
            max-height: 60px; } }
        @media (max-width: 575px) {
          #header .container .logo h1 img {
            max-height: 40px; } }
  #header.header-scrolled, #header.header-pages {
    height: 70px;
    padding: 15px 0;
    background-color: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3); }
    #header.header-scrolled #topbar, #header.header-pages #topbar {
      display: none; }
    #header.header-scrolled .logo h1 img, #header.header-pages .logo h1 img {
      max-height: 60px; }

.main-pages {
  margin-top: 60px; }

#mainvisual {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 898px;
  overflow: hidden; }
  #mainvisual::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../img/top/hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-animation: zoom 10s 1;
    animation: zoom 10s 1;
    animation-fill-mode: forwards; }
  @media (max-width: 767px) {
    #mainvisual {
      height: 66.62vw; }
      #mainvisual::before {
        background-image: url("../img/top/hero_s.jpg");
        background-size: cover; } }

@keyframes zoom {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.05); } }
.site-copy {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: auto;
  height: 1em;
  text-align: center; }
  .site-copy h2 {
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: .2em;
    color: #000;
    font-size: min(max(14px, calc(0.875rem + ((1vw - 3.2px) * 2.0455))), 32px);
    font-weight: 700; }

body.lower-page #mainvisual {
  height: 380px;
  max-height: initial; }
  body.lower-page #mainvisual::before {
    background-image: url("../img/services/hero.jpg");
    animation: none; }
  @media (max-width: 767px) {
    body.lower-page #mainvisual {
      height: 40vw; }
      body.lower-page #mainvisual::before {
        background-image: url("../img/services/hero.jpg");
        background-size: cover; } }
body.lower-page .site-copy {
  padding-top: 1em; }
body.lower-page.page-services #mainvisual::before {
  background-image: url("../img/services/hero.jpg"); }
@media (max-width: 767px) {
  body.lower-page.page-services #mainvisual::before {
    background-image: url("../img/services/hero.jpg"); } }
body.lower-page.page-about #mainvisual::before {
  background-image: url("../img/about/hero.jpg"); }
@media (max-width: 767px) {
  body.lower-page.page-about #mainvisual::before {
    background-image: url("../img/about/hero.jpg"); } }
body.lower-page.page-recruit #mainvisual::before, body.lower-page.page-recruit-entry #mainvisual::before {
  background-image: url("../img/recruit/hero.jpg"); }
@media (max-width: 767px) {
  body.lower-page.page-recruit #mainvisual::before, body.lower-page.page-recruit-entry #mainvisual::before {
    background-image: url("../img/recruit/hero.jpg"); } }
body.lower-page.page-contact #mainvisual::before {
  background-image: url("../img/contact/hero.jpg"); }
@media (max-width: 767px) {
  body.lower-page.page-contact #mainvisual::before {
    background-image: url("../img/contact/hero.jpg"); } }
body.lower-page.page-policy #mainvisual::before {
  background-image: url("../img/policy/hero.jpg"); }
@media (max-width: 767px) {
  body.lower-page.page-policy #mainvisual::before {
    background-image: url("../img/policy/hero.jpg"); } }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.main-nav {
  /* Drop Down */
  /* Deep Drop Down */ }
  .main-nav, .main-nav * {
    margin: 0;
    padding: 0;
    list-style: none; }
  .main-nav > ul > li {
    position: relative;
    white-space: nowrap;
    float: left; }
  .main-nav a {
    display: block;
    position: relative;
    color: #000;
    padding: 10px 15px;
    transition: 0.3s;
    font-size: var(--ffoot);
    font-family: "Noto Sans JP", sans-serif;
    text-transform: uppercase;
    font-weight: 400; }
    .main-nav a.button.btn-head {
      font-size: var(--ffoot);
      color: #fff;
      padding: .5em 2.5em;
      margin-left: 20px;
      border: 1px solid #84c9b6;
      background-color: #84c9b6; }
      .main-nav a.button.btn-head:hover {
        background-color: #48a289; }
  .main-nav a:hover, .main-nav .active > a, .main-nav li:hover > a {
    color: #84c9b6;
    text-decoration: none; }
  .main-nav .drop-down ul {
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% - 30px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: ease all 0.3s; }
  .main-nav .drop-down:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible; }
  .main-nav .drop-down li {
    min-width: 180px;
    position: relative; }
  .main-nav .drop-down ul a {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: #306d5c; }
  .main-nav .drop-down ul a:hover, .main-nav .drop-down ul .active > a, .main-nav .drop-down ul li:hover > a {
    color: #84c9b6; }
  .main-nav .drop-down > a:after {
    content: "\f107";
    font-family: FontAwesome;
    padding-left: 10px; }
  .main-nav .drop-down .drop-down ul {
    top: 0;
    left: calc(100% - 30px); }
  .main-nav .drop-down .drop-down:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%; }
  .main-nav .drop-down .drop-down > a {
    padding-right: 35px; }
  .main-nav .drop-down .drop-down > a:after {
    content: "\f105";
    position: absolute;
    right: 15px; }

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  left: -260px;
  width: 260px;
  padding-top: 18px;
  background: rgba(47, 149, 178, 0.8);
  transition: 0.4s; }
  .mobile-nav * {
    margin: 0;
    padding: 0;
    list-style: none; }
  .mobile-nav a, .mobile-nav a.button.btn-head {
    display: block;
    position: relative;
    color: #fff;
    padding: 10px 20px;
    font-weight: 400;
    font-size: var(--ffoot);
    border: none;
    background-color: transparent;
    border-radius: none;
    text-align: left; }
  .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
    color: #f2f9f8;
    text-decoration: none; }
  .mobile-nav .drop-down > a:after {
    content: "\f078";
    font-family: FontAwesome;
    padding-left: 10px;
    position: absolute;
    right: 15px; }
  .mobile-nav .active.drop-down > a:after {
    content: "\f077"; }
  .mobile-nav .drop-down > a {
    padding-right: 35px; }
  .mobile-nav .drop-down ul {
    display: none;
    overflow: hidden; }
  .mobile-nav .drop-down li {
    padding-left: 20px; }

.mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 13px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 36px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right; }
  .mobile-nav-toggle i {
    margin: 18px 18px 0 0;
    color: #84c9b6; }
  @media (max-width: 575px) {
    .mobile-nav-toggle {
      top: 6px; }
      .mobile-nav-toggle i {
        margin: 9px 9px 0 0; } }

.mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(47, 149, 178, 0.8);
  overflow: hidden;
  display: none; }

.mobile-nav-active {
  overflow: hidden; }
  .mobile-nav-active .mobile-nav {
    left: 0; }
  .mobile-nav-active .mobile-nav-toggle i {
    color: #fff; }

/* breadcrumb 
--------------------------------*/
.breadcrumb {
  background-color: transparent; }
  .breadcrumb ul {
    display: flex;
    font-size: var(--fbreadcrumb); }
    .breadcrumb ul li {
      margin-right: .8em; }
      .breadcrumb ul li::before {
        content: "\f105";
        font-family: fontawesome;
        display: inline-block;
        margin-right: .8em; }
      .breadcrumb ul li:first-child::before {
        content: ""; }
  .breadcrumb.container {
    max-width: 960px; }

body.home .breadcrumb {
  display: none; }

/* map 
--------------------------------*/
#map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 32.25%;
  padding-top: 32.25%; }
  #map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* #section-contact
--------------------------------*/
#section-contact {
  background: #84c9b6;
  padding: min(max(40px, calc(2.5rem + ((1vw - 3.75px) * 7.2727))), 100px) 0;
  color: #fff; }
  #section-contact .container {
    max-width: 960px; }
  #section-contact a.button.btn-white-color {
    width: 100%; }
    @media (max-width: 991px) {
      #section-contact a.button.btn-white-color {
        width: 80%; } }

#footer {
  padding: 0 0 30px 0;
  background: #8b8a8a;
  color: #fff;
  font-size: var(--ffoot); }
  #footer .footer-top {
    padding: 60px 0 30px 0;
    background: #8b8a8a; }
    #footer .footer-top .container {
      display: flex;
      justify-content: space-between; }
    #footer .footer-top .site-footer-logo {
      width: 29%;
      max-width: 295px; }
    #footer .footer-top .footer-logo {
      width: 100%;
      max-width: 295px; }
    #footer .footer-top .copyright {
      padding-top: 30px;
      font-size: 0.875em; }
    #footer .footer-top .site-footer-nav {
      width: 68%;
      max-width: 550px; }
    #footer .footer-top #f-nav {
      margin-bottom: 1em;
      padding-bottom: 1.5em;
      border-bottom: 1px solid #fff; }
      #footer .footer-top #f-nav ul {
        display: flex;
        justify-content: space-between;
        align-items: center; }
        #footer .footer-top #f-nav ul a {
          color: #fff; }
          #footer .footer-top #f-nav ul a.button.btn-footer {
            font-size: var(--ffoot);
            padding: .5em 2.5em;
            border: 1px solid #fff;
            background-color: transparent; }
    #footer .footer-top .f-addr {
      display: flex;
      justify-content: space-between;
      align-items: center; }
    #footer .footer-top .phone {
      font-size: 1.2rem; }
  @media (max-width: 767px) {
    #footer .footer-top .container {
      display: block;
      text-align: center; }
    #footer .footer-top #f-nav {
      display: none; }
    #footer .footer-top .f-addr {
      display: block; }
    #footer .footer-top .site-footer-logo {
      width: 100%;
      max-width: 100%;
      position: relative; }
      #footer .footer-top .site-footer-logo .footer-logo {
        margin: 0 auto 1rem; }
      #footer .footer-top .site-footer-logo .copyright {
        padding-top: 0;
        position: absolute;
        top: 8rem;
        left: 50%;
        transform: translateX(-50%); }
    #footer .footer-top .site-footer-nav {
      width: 100%;
      max-width: 100%; } }

/*    .form {

      .form-group {
        margin-bottom: 15px;
      }

      #sendmessage {
        color: #fff;
        background: $primary;
        display:none;
        text-align:center;
        padding:15px;
        font-weight:600;
        margin-bottom:15px;
      }
  
      #errormessage {
        color:#fff;
        display:none;
        background: red;
        text-align:center;
        padding:15px;
        font-weight:600;
        margin-bottom:15px;
      }
  
      #sendmessage.show, #errormessage.show, .show {
        display:block;
      }
  
      .validation {
        color: red;
        display:none;
        margin: 0 0 20px;
        font-weight:400;
        font-size:13px;
      }
      
      label {
        color:$secondary;
        font-weight: 500;
      }
  
      input, textarea {
        border-radius: 0;
        box-shadow: none;
        border: 1px solid #dce1ec;
        font-size: 14px;
      }

      input::placeholder, textarea::placeholder {
        color: lighten($secondary-light, 30%);
      }
  
      button[type="submit"] {
        background: $primary;
        border: 0;
        border-radius: 3px;
        padding: 8px 30px;
        color: #fff;
        transition: 0.3s;
        &:hover {
          background: $primary-dark;
          cursor: pointer;
        }
      }
    }*/
#top-main {
  background: #f1f8f9;
  background: linear-gradient(90deg, #f1f8f9 0%, #f1f8f9 31%, white 31%, white 100%); }
  #top-main .container {
    position: relative; }
    #top-main .container #water {
      position: absolute;
      top: -48px;
      right: 0;
      width: 35.78%;
      max-width: 408px; }
    #top-main .container .top-main-copy {
      width: 60%;
      padding-top: min(max(24px, calc(1.5rem + ((1vw - 3.2px) * 11.0938))), 95px);
      padding-bottom: min(max(30px, calc(1.875rem + ((1vw - 3.2px) * 17.1875))), 140px); }
      #top-main .container .top-main-copy h2 {
        font-size: min(max(14px, calc(0.875rem + ((1vw - 3.75px) * 1.3675))), 22px);
        font-weight: bold; }
      #top-main .container .top-main-copy p {
        min-height: 8em; }
    @media (max-width: 767px) {
      #top-main .container #water {
        width: 30%; }
      #top-main .container .top-main-copy {
        width: 100%; }
        #top-main .container .top-main-copy h2 {
          width: 68%; } }
    @media (max-width: 575px) {
      #top-main .container #water {
        right: 20px;
        width: 25%; } }

.bg-gradation {
  background: #67bdd7;
  background: url("../img/top/white_mix.gif") top center no-repeat, url("../img/top/white.gif") bottom center no-repeat, linear-gradient(90deg, #67bdd7 0%, #84c9b7 100%); }

.top-columns-section .container-fluid {
  max-width: 1200px;
  display: flex; }
  .top-columns-section .container-fluid .columns-image {
    width: 50%;
    height: 334px;
    overflow: hidden; }
    .top-columns-section .container-fluid .columns-image img {
      display: block;
      height: auto;
      max-width: 100%;
      object-fit: cover; }
  .top-columns-section .container-fluid div {
    width: 50%;
    display: flex; }
    .top-columns-section .container-fluid div .columns-summary {
      width: 100%;
      /* 69.17% */
      max-width: 415px;
      background: #f8f8fa;
      border-radius: 56px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 1em 2em; }
      .top-columns-section .container-fluid div .columns-summary h2 {
        margin-bottom: 1rem;
        line-height: 1.2; }
        .top-columns-section .container-fluid div .columns-summary h2 span {
          display: block;
          color: #84c9b6;
          font-size: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.5128))), 14px); }

#top-about .columns-summary {
  border-radius: 0 56px 56px 0; }

@media (max-width: 1200px) {
  #top-about .container-fluid, #top-services .container-fluid {
    padding-left: 0;
    padding-right: 0; } }
#top-services .container-fluid .columns-image {
  order: 0; }
#top-services .container-fluid div {
  order: -1; }
  #top-services .container-fluid div .columns-summary {
    border-radius: 56px 0 0 56px;
    margin-right: 0;
    margin-left: auto; }

@media (max-width: 767px) {
  .top-columns-section .container-fluid {
    display: block; }
    .top-columns-section .container-fluid .columns-image {
      width: 100%; }
      .top-columns-section .container-fluid .columns-image img {
        max-width: initial;
        width: 100%; }
    .top-columns-section .container-fluid div {
      width: 100%; }
      .top-columns-section .container-fluid div .columns-summary {
        max-width: 100%;
        border-radius: 0 0 0 0 !important; }

  a.button.btn-second-color {
    margin: 0 auto; } }
#top-recruit .container {
  max-width: 960px;
  background: url(../img/top/bg-recruit.png) center top no-repeat;
  height: 226px; }
  #top-recruit .container .top-recruit-section {
    margin: 0 2em;
    height: 226px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    #top-recruit .container .top-recruit-section a.button.btn-white-color {
      padding: .8em 6em; }
#top-recruit h2 {
  margin-bottom: 0;
  line-height: 1.2;
  color: #fff; }
  #top-recruit h2 span {
    display: block;
    font-size: min(max(11px, calc(0.6875rem + ((1vw - 3.75px) * 0.5128))), 14px); }
@media (max-width: 575px) {
  #top-recruit .container .top-recruit-section {
    flex-direction: column;
    justify-content: space-evenly; }
    #top-recruit .container .top-recruit-section a.button.btn-white-color {
      padding: .8em 6em;
      width: 80%; } }

.bg-gradation-right {
  background: white;
  background: url("../img/top/white.gif") top center no-repeat, linear-gradient(90deg, white 0%, white 69%, #f2f9f8 69%, #f0f8fb 100%);
  background-size: 100% 96px;
  padding-bottom: var(--section_margin); }

#top-group .container {
  max-width: 960px; }
  #top-group .container a.card {
    border: none;
    background-color: #000;
    display: inline-block;
    position: relative;
    border-radius: 10px; }
    #top-group .container a.card img.card-img {
      border-radius: 10px;
      display: block;
      opacity: 0.7;
      transition: all .3s; }
      #top-group .container a.card img.card-img:hover {
        opacity: 1; }
    #top-group .container a.card h3 {
      font-size: var(--flead);
      position: absolute;
      color: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap; }

#section-iso .iso {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
  #section-iso .iso img {
    width: 30%;
    max-width: 140px;
    height: auto;
    margin-right: 5px; }

#section-business {
  margin-top: -58px;
  background: url(../img/services/bg-water.png) center top no-repeat;
  height: 516px; }
  #section-business .container-fluid {
    max-width: 1200px; }
  #section-business .section-business-text {
    margin-top: 134px; }
  #section-business h2 {
    letter-spacing: .2em; }
    #section-business h2 span {
      background-color: #fff; }
  @media (max-width: 767px) {
    #section-business {
      background: url(../img/services/bg-water_s.png) 20% top no-repeat;
      background-size: cover;
      height: 69vw; }
      #section-business .section-business-text {
        margin-top: 10vw; } }

#section-feature .container-fluid {
  max-width: 1200px; }
  #section-feature .container-fluid .feature-columns {
    display: flex; }
    #section-feature .container-fluid .feature-columns .feature-image {
      width: 44.417%;
      overflow: hidden; }
      #section-feature .container-fluid .feature-columns .feature-image img {
        max-width: 100%;
        display: block;
        height: 100%;
        object-fit: cover; }
    #section-feature .container-fluid .feature-columns .feature-summary {
      width: 50%; }
      #section-feature .container-fluid .feature-columns .feature-summary .label {
        display: inline-block;
        background-color: #fff;
        font-size: var(--ffoot); }
        #section-feature .container-fluid .feature-columns .feature-summary .label span {
          display: block;
          background-color: #000;
          color: #84c9b6;
          text-align: center;
          font-size: var(--fsm); }
    #section-feature .container-fluid .feature-columns#feature01 .feature-image {
      margin-right: 5.583%; }
      #section-feature .container-fluid .feature-columns#feature01 .feature-image img {
        border-radius: 0 14px 14px 0;
        object-position: 100% top; }
    #section-feature .container-fluid .feature-columns#feature02 .feature-image {
      margin-left: 5.583%;
      order: 1; }
      #section-feature .container-fluid .feature-columns#feature02 .feature-image img {
        border-radius: 14px 0 0 14px;
        object-position: left 0; }
    #section-feature .container-fluid .feature-columns#feature02 .feature-summary {
      order: -1; }
#section-feature dl dt {
  font-size: var(--flead); }
@media (max-width: 1045px) {
  #section-feature .container-fluid .feature-columns#feature01 .feature-image img {
    height: auto;
    object-fit: cover; } }
@media (max-width: 767px) {
  #section-feature .container-fluid .feature-columns {
    display: block; }
    #section-feature .container-fluid .feature-columns .feature-image {
      width: 100%;
      margin-bottom: 1em; }
      #section-feature .container-fluid .feature-columns .feature-image img {
        width: 100%;
        height: 35vw;
        border-radius: 0 !important;
        object-position: 0 top !important; }
    #section-feature .container-fluid .feature-columns .feature-summary {
      width: 100%; }
    #section-feature .container-fluid .feature-columns#feature01 .feature-image {
      margin-right: 0; }
      #section-feature .container-fluid .feature-columns#feature01 .feature-image img {
        height: auto;
        object-position: center center !important; }
    #section-feature .container-fluid .feature-columns#feature02 .feature-image {
      margin-left: 0; } }

.page-about #main > * > .container {
  max-width: 960px; }

#section-message .message {
  display: flex;
  justify-content: space-between; }
  #section-message .message figure.ph-ceo {
    width: 43%; }
    #section-message .message figure.ph-ceo img {
      width: 100%;
      height: 430px;
      object-fit: cover;
      border-radius: 14px; }
    #section-message .message figure.ph-ceo figcaption {
      font-size: var(--flead); }
  #section-message .message .message-summary {
    width: 50%; }
    #section-message .message .message-summary h3 {
      margin-top: -15px;
      margin-bottom: 0; }
  @media (max-width: 767px) {
    #section-message .message {
      display: block; }
      #section-message .message figure.ph-ceo {
        width: 100%; }
        #section-message .message figure.ph-ceo img {
          height: 43 vw; }
      #section-message .message .message-summary {
        width: 100%; }
        #section-message .message .message-summary h3 {
          margin-top: 0; } }

dl.management-policy dt {
  padding-top: min(max(32px, calc(2rem + ((1vw - 3.75px) * 5.1864))), 64px);
  font-size: min(max(15px, calc(0.8125rem + ((1vw - 3.2px) * 0.6696))), 18px);
  margin-bottom: min(max(8px, calc(0.5rem + ((1vw - 3.75px) * 1.2966))), 16px); }
  dl.management-policy dt:first-child {
    padding-top: 1em; }
dl.management-policy dd {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: min(max(32px, calc(2rem + ((1vw - 3.75px) * 5.1864))), 64px); }

#section-vehicle .vehicle-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  #section-vehicle .vehicle-list li {
    width: 22.7%;
    height: 73.39%; }
    #section-vehicle .vehicle-list li figure {
      overflow: hidden; }
      #section-vehicle .vehicle-list li figure img.ph_vehicle {
        object-fit: cover;
        width: 100%;
        border-radius: 8px;
        margin-bottom: .5em; }
      #section-vehicle .vehicle-list li figure figcaption {
        font-size: var(--ffoot); }
  @media (max-width: 767px) {
    #section-vehicle .vehicle-list li {
      width: 48%;
      height: 36%; }
      #section-vehicle .vehicle-list li figure {
        margin-bottom: 1em; } }

.page-recruit .container {
  max-width: 960px; }

.bg-gradation-interview {
  background: #67bdd7;
  background: linear-gradient(90deg, #67bdd7 0%, #84c9b7 100%);
  padding-top: var(--section_margin);
  padding-bottom: min(max(18px, calc(1.125rem + ((1vw - 3.75px) * 2.5932))), 34px); }

#recruit-message {
  background: #f2f9f8;
  background: linear-gradient(90deg, white 0%, white 66.4%, #f2f9f8 66.4%, #f0f8fb 100%);
  padding-top: var(--section_margin);
  padding-bottom: var(--section_margin); }

#section-interview {
  color: #fff; }

.interview-summary {
  margin-bottom: 1em; }
  .interview-summary h3, .interview-summary h4 {
    font-size: var(--flg);
    margin-bottom: 1em; }
  .interview-summary .ph_profile {
    width: 100%;
    height: 40vw;
    /* 87.17% */
    overflow: hidden;
    margin-bottom: 1em; }
    .interview-summary .ph_profile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      object-position: center 25%; }

@media (max-width: 991px) {
  .interview01 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 1em; } }
@media (min-width: 992px) {
  .interview-summary {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 5em 26em; }
    .interview-summary h3 {
      border-bottom: 1px solid #fff; }
    .interview-summary .ph_profile {
      width: 90%;
      height: 78.45%; }
    .interview-summary .interview-comment {
      margin-top: .6em; }
    .interview-summary.interview01 h3 {
      grid-column: 2 / 3;
      grid-row: 1 / 2; }
    .interview-summary.interview01 .ph_profile {
      grid-column: 1 / 2;
      grid-row: 1 / 3; }
    .interview-summary.interview01 .interview-comment {
      grid-column: 2 / 3;
      grid-row: 2 / 3; }
    .interview-summary.interview02 h3 {
      grid-column: 1 / 2;
      grid-row: 1 / 2; }
    .interview-summary.interview02 .ph_profile {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
      margin-left: auto;
      margin-right: 0; }
    .interview-summary.interview02 .interview-comment {
      grid-column: 1 / 2;
      grid-row: 2 / 3; } }
#section-company-information #company-summary {
  background: url(../img/recruit/company-photos.jpg) top center no-repeat;
  background-size: 100%; }
  #section-company-information #company-summary .company-text {
    background-color: #fff;
    margin-top: 26.667vw;
    padding: 2em; }
    @media (min-width: 992px) {
      #section-company-information #company-summary .company-text {
        margin-top: 272px; } }
    #section-company-information #company-summary .company-text h3 {
      font-size: var(--flg); }

#section-socialize figure img {
  object-fit: cover;
  border-radius: 5px; }

body.page-recruit .dl-inline dt:first-of-type {
  align-items: top !important; }

.entry-guidance {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  padding: 4em 1em;
  width: 100%;
  background: linear-gradient(to right, #67bdd7 0%, #84c9b7 100%); }
  @media (max-width: 767px) {
    .entry-guidance {
      padding: 1.5em 1em; } }
  .entry-guidance::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 10px;
    padding: 6px;
    width: 100%;
    height: 100%;
    background: #fff;
    background-clip: content-box;
    content: ''; }

.page-recruit-entry .container, .page-contact .container {
  max-width: 960px; }

/* input reset -------------------------- */
input[type=text], input[type=email], button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.form-group input[type=text],
.form-group input[type=email],
.form-group select,
.form-group textarea {
  outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: inherit;
  line-height: 1.4;
  color: #000;
  border: 1px solid #dbdcdc;
  padding: 8px;
  background-color: #f8f8fa;
  box-sizing: border-box;
  width: 100%; }

.form-group select {
  cursor: pointer; }

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 7px #4169e1;
  border: 1px solid #4169e1;
  box-shadow: 0 0 7px #3498db;
  border: 1px solid #3498db;
  background-color: #fff; }

.form-group.has-error input[type=text],
.form-group.has-error input[type=email],
.form-group.has-error select,
.form-group.has-error textarea {
  box-shadow: 0 0 7px #dc143c;
  border: 1px solid #dc143c;
  background-color: #fff; }

.form-group.has-error p {
  font-size: .9em;
  color: #dc143c; }

/* checkbox */
.form-group input[type="checkbox"] {
  display: none; }

.form-group label {
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 22px;
  cursor: pointer;
  -webkit-transition: all .2s;
  transition: all .2s; }

.form-group.has-error label {
  color: #dc143c; }

.form-group label::before,
.form-group label::after {
  position: absolute;
  content: '';
  -webkit-transition: all .2s;
  transition: all .2s; }

.form-group label::before {
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: #f8f8fa;
  border: 1px solid #ccc;
  border-radius: 3px; }

.form-group label::after {
  opacity: 0;
  top: 50%;
  left: 3px;
  width: 8px;
  height: 4px;
  margin-top: -4px;
  border-left: 2px solid #3498db;
  border-bottom: 2px solid #3498db;
  -webkit-transform: rotate(-45deg) scale(0.5);
  transform: rotate(-45deg) scale(0.5); }

.form-group.has-error label::before {
  background-color: #fff;
  box-shadow: 0 0 7px #dc143c;
  border: 1px solid #dc143c; }

.form-group label:hover::before {
  background: #fff; }

.form-group input[type="checkbox"]:checked + label::before {
  background: #fff;
  border: 1px solid #3498db; }

.form-group input[type="checkbox"]:checked + label::after {
  opacity: 1;
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1); }

/* Validation */
.required {
  line-height: 1.4; }
  .required::after {
    float: right;
    color: #fff;
    display: block;
    font-size: 11px;
    font-weight: 400;
    padding: 2px 1em;
    text-align: center;
    margin-left: auto;
    margin-top: 3px;
    content: '必須';
    background-color: #E65D5D; }

.optional {
  line-height: 1.4; }
  .optional::after {
    float: right;
    color: #fff;
    display: block;
    font-size: 11px;
    font-weight: 400;
    padding: 2px 1em;
    text-align: center;
    margin-left: auto;
    margin-top: 3px;
    content: '任意';
    background-color: #aaa; }

@media (max-width: 767px) {
  .required::after, .optional::after {
    float: none;
    display: inline-block;
    margin-left: 1em; } }
dl.form-group dt {
  font-weight: normal; }
  dl.form-group dt span {
    color: #808080; }
    @media (max-width: 767px) {
      dl.form-group dt span {
        display: inline-block;
        margin-left: 1em; } }

dl.contact-confirm {
  border-bottom: 1px solid #dbdcdc;
  line-height: 1.6;
  padding: 13px 0; }
  dl.contact-confirm dt {
    font-weight: normal;
    color: #888; }

@media (min-width: 768px) {
  dl.form-group, dl.contact-confirm {
    display: flex; }
    dl.form-group dt, dl.contact-confirm dt {
      width: 15em; }
    dl.form-group dd, dl.contact-confirm dd {
      flex: 1;
      margin-left: 1em; }

  dl.form-group-privacy {
    display: block; }
    dl.form-group-privacy dt {
      width: 100%; } }
@media (max-width: 767px) {
  dl.form-group dt, dl.form-group-privacy dt {
    margin-bottom: 6px; } }
body.page-policy .container {
  max-width: 960px; }