@charset "UTF-8";
/* CSS Document */
html {
  color: #000;
  font-size: 62.5%;
  overflow-y: scroll;
}

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo', sans-serif,'Helvetica Neue',Arial;
  font-size: 140%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; }
.container {
    overflow: hidden;
}
a {
  color: #171C61;
}
.header__inner {
    width: 70vw;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 20px 0;
}
.logo {
    width: 18vw;
}

nav ul{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    color: #171C61;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 1vw 0;
}
nav ul li {
    margin-right: 50px;
    text-align: left;
}
nav ul li:last-child {
    margin-right: 0;
}
@media screen and (max-width: 767px) {
    .header__inner {
        width: 100vw;
        padding: 4vw;
    }
    .logo {
        width: 50vw;
    }
}
/*ハンバーガーメニュー*/
@media screen and (max-width: 767px) {
    #nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 50px;
  height: 35px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 10vw;/*長さ*/
  border-radius: 3px;
  background: #171C61;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -12px;
}
#nav-open span:after {
  bottom: -24px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 100%;/*最大幅（調整してください）*/
  height: 100%;
  background: #171C61;
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
    padding: 1.33vw 5.33vw;
}
#nav-content ul {
        background-color: #fff;
         width: 90%;
        margin: 10vw auto;
    }
    #nav-content ul li {
        border-bottom: 1px solid #000;
        padding: 5vw;
        position: relative;
    }
    #nav-content ul li a {
      display: block;
    }
#nav-content ul li:after {
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

}
/*--------------------------------------------
メインビジュアル　　　
--------------------------------------------*/
.hero {
    background: url("img/main.jpg") center center / cover no-repeat;
    width: 100%;
    height: 0;
    padding-top: calc(365.5 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */ }
.hero__inner {
    width: 70vw;
    margin: 0 auto;
    position: relative;
}
.hero__catch {
    position: absolute;
    left: 0;
    bottom: 1vw;
    color: #fff;
    max-width: 100%;
}
.hero_header {
    font-size: 6vw;
    font-weight: 900;
    line-height: 1.2;
}
.tagline {
    font-size: 3vw;
    font-weight: 900;
    animation-delay: 1s;
}
.fade-in{
　opacity:0;
  animation-name:fade-in;
  animation-duration:3s;
  animation-fill-mode: backwards;
}
@keyframes fade-in {
0% {
 opacity: 0;
 transform: translateX(-50px);
}
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

@media screen and (max-width: 767px) {
   .hero {
    background: url("img/main_sp.jpg") center center / cover no-repeat;
    padding-top: calc(1114 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
       height:0;
   position: relative;
    }
    .hero__inner {
         position: absolute;
        left: 8vw;
        top: 43vw;
        width: 100vw;

        height: auto;
    }
    .hero_header {
        font-size: 12vw;
    }
    .tagline {
        font-size: 6vw;
    }
}
/*--------------------------------------------
3つの責任　
--------------------------------------------*/
.responsibility {
    background-color: #171C61;
    text-align: center;
    padding-top: 80px;
}
.responsibility__inner {
    width: 70vw;
    margin: 0 auto;
    padding-bottom: 180px;
}
.responsibility__inner .bg_txt {
    color: #2F3371;
    font-size: 7vw;
    font-weight: 900;

}
.responsibility__inner h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    margin-top: -68px;
}
.col_3 {
     width: 70vw;
    margin: -100px auto 0;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.thumbnail {
    width: 31%;
}
.thumbnail_catch {
    text-align: center;
    color: #171C61;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
　　display: inline-block;
    margin-top: 20px;
}
.thumbnail_catch::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  width: 2px;
  height: 17px;
  margin: auto;
  background-color: #171C61;
}
.thumbnail_txt {
    margin-top: 50px;
    font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
    .responsibility {
        padding: 10vw 5vw 0;
        overflow: hidden;
    }
    .responsibility__inner {
        width: 90vw;
        padding-bottom: 15vw;
    }
    .responsibility__inner .bg_txt {
        font-size: 3.5rem;
        width: 100%;
    }
    .responsibility__inner h2 {
        margin-top: -3vw;
        font-size: 5vw;
    }
    .col_3 {
     width: 90vw;
    margin: -10vw auto 0;
    display: block;
    }
    .thumbnail {
        width: 100%;
        margin-bottom: 10vw;
    }
    .thumbnail_catch {
       font-size: 4.5vw;
    }
    .thumbnail_catch::after {
        bottom: -20px;
        height: 10px;
    }
    .thumbnail_txt {
        margin-top: 10vw;
    }
}
/*--------------------------------------------
会社案内・採用情報
--------------------------------------------*/
.banner {
     display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    margin-top: 130px;
}
.banner div {
    position: relative;
    width:100%;
 margin:0 auto;
 overflow:hidden;
}
.banner div img {
     transition:1s all;
}
.banner div img:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
}
.banner h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #fff;
     font-size: 2.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
}
.banner h2 span {
    display: block;
    font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
    .banner {
        margin-top: 10vw;
        display: block;
    }
    .banner h2 {
        font-size: 6vw;
    }
}

/*--------------------------------------------
お問い合わせ
--------------------------------------------*/
.contact {
    text-align: center;
    padding-top: 80px;
}
.contact__inner {
    width: 70vw;
    margin: 0 auto;
    padding-bottom: 180px;
}
.contact__inner .bg_txt {
    color: #EFEFEF;
    font-size: 7vw;
    font-weight: 900;

}
.contact__inner h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: -64px 0 60px 0;
}
.btn {
    margin-top: 100px;
}
.btn a{
    background-color: #171C61;
    color: #fff;
    padding: 50px;
    font-size: 2.2rem;
}
.btn a:hover{
    opacity: .8;
}
.txt {
    font-size: 1.6rem;
    margin-bottom: 30px;
}
.contact-text {
  margin-top: 5vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
    .contact {
        padding: 10vw 0;
    }
    .contact__inner {
    width: 90vw;
    padding-bottom: 10px;
}
    .contact__inner h2  {
        font-size: 5vw;
        margin-top: -4vw;
        margin-bottom: 5vw;
    }
    .contact__inner .bg_txt {
        font-size: 10vw;
    }
    .txt {
        margin-bottom: 1rem;
    }
    .btn {
    margin-top: 10vw;
}
    .btn a{
    padding: 5vw 10vw;
    font-size: 5vw;
}
}

/*--------------------------------------------
footer
--------------------------------------------*/
footer {
    background-color: #7F061E;
    color: #fff;
}
.footer__inner {
    width: 70vw;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 20px;
}
.copyright {
    font-size: .8rem;
    margin: 30px 0;
}
@media screen and (max-width: 767px) {
    .footer__inner {
    width: 90vw;
    margin: 0 auto;
    display: block;
    padding: 10vw;
        text-align: center;
}
    .footer__inner p {
        width: 60vw;
        margin: auto;
    }
}
/*--------------------------------------------
form
--------------------------------------------*/
input,textarea {
    padding: 7px 10px;
    border: 1px solid #ccc;
    width: 100%;
}

.form__btn {
    width: 100%;
    text-align: center;
    margin: auto;
}
.form__btn .submit {
     background-color: #2B6117;
    color: #fff;
    padding: 10px 20px;
    font-size: 2.2rem;
    margin: 20px;
    width: 20vw;
}
.form__btn .reset {
     background-color: #C7C7C7;
    color: #000;
    padding: 10px 20px;
    font-size: 2.2rem;
    margin: 10px;
    width: 20vw;

}
@media screen and (max-width: 767px) {
    .form__btn .submit, .form__btn .reset {
        display: block;
        width: 70vw;
        margin: 0 auto 20px;
    }
    textarea {
        width: 100%;
    }
}
.privacy_ttl {
  font-weight: bold;
  margin-top: 10px;
    font-size: 1.6rem;
}
.slider-section {
  margin: 0 0 100px;
  text-align: center;
}
.slider {
  max-width: 700px;
  margin: 50px auto 0;
}
.slider img {
    width: 100%;
}
.gaiyou__inne.mt50 {
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  .slider-section {
    margin: 50px auto;
    min-width: 100%;
  }
  .slider {
    max-width: 100%;
    margin: 0 auto ;
  }
}