/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

 html,
 body,
 div,
 span,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 abbr,
 address,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 samp,
 small,
 strong,
 sub,
 sup,
 var,
 b,
 i,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section,
 summary,
 time,
 mark,
 audio,
 video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
 }

 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
   display: block;
 }

 nav ul {
   list-style: none;
 }

 blockquote,
 q {
   quotes: none;
 }

 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
   content: "";
   content: none;
 }

 a {
   margin: 0;
   padding: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
 }

 /* change colours to suit your needs */
 ins {
   background-color: #ff9;
   color: #000;
   text-decoration: none;
 }

 /* change colours to suit your needs */
 mark {
   background-color: #ff9;
   color: #000;
   font-style: italic;
   font-weight: bold;
 }

 del {
   text-decoration: line-through;
 }

 abbr[title],
 dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
 }

 table {
   border-collapse: collapse;
   border-spacing: 0;
 }

 /* change border colour to suit your needs */
 hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #cccccc;
   margin: 1em 0;
   padding: 0;
 }

 input,
 select {
   vertical-align: middle;
 }

 /******************* リセットcssここまで **********************/

 /*********************** 共通 ******************************/
 html {
   margin: 0;
   padding: 0;
 }

 body {
   margin: 0;
   padding: 0;
   font-weight: 500;
   color: #333;
   line-height: 2;
   letter-spacing: 0.1em;
   font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
 }

 *,
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

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

 p {
   margin: 0;
   padding: 0;
 }

 img {
   width: 100%;
   vertical-align: bottom;
 }

 figure {
   margin: 0;
 }

 table {
   border-collapse: collapse;
   border-spacing: 0;
 }

 ul,
 li,
 dl,
 dt,
 dd {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 a {
   text-decoration: none;
   transition: all 0.6s ease;
 }

 a:hover {
   transition: all 0.6s ease;
 }

 .content-wrapper {
   width: 90%;
   margin: 0 auto;
   max-width: 1280px;
 }

 /* ボタンパーツ */
 .btn-parts {
   margin-top: 80px;
 }

 .btn-parts p {
   text-align: center;
   margin-bottom: 20px;
 }

 /* ボタンパーツ共通 */
 .button {
   display: inline-block;
   width: 180px;
   height: 50px;
   text-align: center;
   text-decoration: none;
   line-height: 50px;
   outline: none;
   font-size: 14px;
   color: #fff;
   background: #5277C9;
 }

 .button::before,
 .button::after {
   position: absolute;
   z-index: -1;
   display: block;
   content: "";
 }

 .button,
 .button::before,
 .button::after {
   -webkit-transition: ease-in 0.6s;
   transition: ease-in 0.6s;
 }

 .btn {
   display: flex;
   justify-content: center;
 }

 .btn .button {
   background: #5277C9;
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .btn .button:hover {
   border: 1px solid #5277C9;
   background-color: #ffffff;
   color: #5277c9;

 }

 img {
   width: 100%;
   vertical-align: bottom;
 }

 * {
   list-style: none;
 }

 a {
   text-decoration: none;
   color: #fff;
 }

 /*********************** 共通 ここまで******************************/
 main {
   position: relative;
   z-index: 0;
   overflow: hidden;
 }

 header {
   position: fixed;
   width: 100%;
   z-index: 100;
 }

 .mail-form {
   text-align: center;
 }

 .mail-form iframe {
   width: 100%;
   height: 460px;
 }

 .site-logo {
   color: #24557c;
   font-size: 24px;
   font-weight: 600;
 }

 @media screen and (max-width:768px) {
   .site-logo {
     justify-content: center;
     font-size: 18px;
   }
 }

 .site-logo img {
   width: 48px;
   height: 48px;
   margin-right: 5px;
 }

 .site-logo-txt {
   padding-left: 10px;
 }

 .sp-nav-btn,
 .sp-nav {
   display: none;
 }

 .header-wrapper {
   display: flex;
   align-items: center;
   padding: 1% 3vw;
   transition: ease-in 0.3s;
   background: #fff;
 }

 .button {
   padding: 0 20px;
   border-radius: 50px;
   position: relative;
 }


 .fa-chevron-right {
   position: absolute;
   right: 25px;
   top: 50%;
   transform: translateY(-50%);
 }

 .btn-wrapper {
   transition: ease-in 0.3s;
   border-radius: 50px;
 }

 .button:hover {
   background-color: #fff;
   color: #000858;
 }

 .pc-nav ul li,
 .button {
   display: inline-block;
   vertical-align: middle;
   padding: 0 10px;
 }

 .pc-nav {
   margin-left: auto;
   display: flex;
   align-items: center;
 }


 .contact-btn {
   position: fixed;
   text-align: center;
   padding: 0 80px;

   right: 0;
   top: 0;
   z-index: 10;
   background-color: blue;
 }

 .hover-under-line a {
   position: relative;
   display: inline-block;
   margin: 10px 0;
   font-size: 14px;
   font-weight: bold;
   color: #00557C;
 }

 .sp-nav .hover-under-line a {
   position: relative;
   display: inline-block;
   margin: 10px 0;
   font-size: 14px;
   color: #00557C;
 }

 .footer-under-line a {
   color: #ffffff;
   margin: 0 16px;
 }

 @media screen and (max-width:768px) {
   .footer-under-line a {
     color: #ffffff;
     margin: 12px 0;
   }
 }

 .hover-under-line a:after {
   position: absolute;
   bottom: -4px;
   left: 0;
   content: "";
   width: 100%;
   height: 2px;
   background: #00557C;
   opacity: 0;
   visibility: hidden;
   transition: 0.3s;
 }

 .footer-under-line a:after {
   background: #fff;
 }

 .footer-under-line a:after {
   bottom: -8px;
 }

 .hover-under-line a:hover:after {
   bottom: 0;
   opacity: 1;
   visibility: visible;
 }

 .footer-under-line a:hover:after {
   bottom: -4px;
 }

 /* メインビジュアル */

 .mv {
   position: relative;
   z-index: 1;
 }

 #slider {
   margin-left: auto;
   width: 100%;
   height: 100vh;
   /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
 }

 .vegas-overlay {
   opacity: 1;
   background: rgb(3, 160, 232);
   background: -moz-linear-gradient(90deg, rgba(3, 160, 232, 0.5046393557422969) 0%, rgba(3, 160, 232, 0.20211834733893552) 100%);
   background: -webkit-linear-gradient(90deg, rgba(3, 160, 232, 0.5046393557422969) 0%, rgba(3, 160, 232, 0.20211834733893552) 100%);
   background: linear-gradient(90deg, rgba(3, 160, 232, 0.5046393557422969) 0%, rgba(3, 160, 232, 0.20211834733893552) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#03a0e8", endColorstr="#03a0e8", GradientType=1);
 }

 .main__title {
   color: #fff;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 10%;
   font-size: 96px;
   z-index: 2;
   line-height: 1;
   font-weight: 900;
 }

 .main__title__sub {
   color: #fff;
   position: absolute;
   font-size: 40px;
   top: 62%;
   left: 10%;
   width: 90%;
   line-height: 1.5;
 }

 .main__title__sub span {
   display: inline-block;
 }

 .mv_other img {
   display: block;
   height: 600px;
   object-fit: cover;
 }


 .mv_other h2 {
   letter-spacing: 0.15em;
   position: absolute;
   top: 50%;
   left: 50%;
   font-size: 72px;
   transform: translate(-50%, -50%);
   color: #fff;
   text-shadow: 4px 4px 0 #24557c;
 }

 .mv_other:before {
   content: '';
   height: 80%;
 }

 .mv_other span {
   font-size: 17px;
   display: block;
   font-weight: normal;
   letter-spacing: .1em;
   padding: 10px;
 }

 @media screen and (max-width: 768px) {

   .main__title {
     color: #fff;
     font-size: 48px;
     left: 5%;
   }

   .main__title__sub {
     font-size: 16px;
     width: 80%;
     left: 5%;
     color: #fff;
   }

   .mv_other h2 {
     font-size: 36px;
   }

 }

 /* メインビジュアル */

 /* スクロール後ヘッダー背景色 */
 /* .header-wrapper.addColor {
  background: none;
  transition: ease-in 0.3s;
  background: #062244;
} */

 /* スクロール後ヘッダー背景色 */

 /******************** index.html headerここまで *************************/

 .content-wrapper {
   width: 90%;
   margin: 0 auto;
   max-width: 1400px;
 }

 .section-title {
   font-size: 96px;
   position: relative;
   padding: 20px;
   margin-bottom: 16px;
   font-weight: 400;
   font-style: normal;
   color: #009fe91c;
   font-weight: 700;
   line-height: 1.5;
   display: inline-block;
   position: relative;
   text-transform: uppercase;
 }

 .sub-text {
   position: absolute;
   left: 10px;
   bottom: 40px;
   font-size: 40px;
   color: #009fe9;
   display: block;
   letter-spacing: .2em;
   font-weight: bold;
 }

 @media screen and (max-width: 768px) {
   .section-title {
     font-size: 32px;
   }

   .sub-text {
     font-size: 18px;
     bottom: 20px;
   }
 }

 .about {
   text-align: left;
   padding: 120px 0;
   overflow: hidden;
 }

 .about__list {
   margin: 80px 0;
 }

 .about__item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 160px 0;
 }

 .about__item:nth-child(2n) {
   flex-direction: row-reverse;
 }

 .about__image-wrapper {
   width: 48%;
   position: relative;
   top: -100px;
   z-index: 1;
   box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
 }

 .about__image-wrapper img{
   object-fit: cover;
   min-height: 450px;
 }

 .about__text-inner {
   width: 48%;
   text-align: justify;
   position: relative;
   z-index: 1;
   padding: 80px 0;
   color: #ffffff;
 }

 .about__text-inner:before {
   content: '';
   background-color: #00A0E9;
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100%;
   margin: 0 calc(50% - 50vw);
   z-index: -1;
 }

 .about__text-inner h3 {
   font-size: 32px;
 }

 .about__text-inner p {
   margin-top: 40px;
 }


 @media screen and (max-width: 768px) {
   .about {
     padding: 40px 0;
   }

   .about__list {
     margin: 20px 0;
   }


   .about__item {
     flex-direction: column-reverse;
     margin: 40px 0;
   }

   .about__item:nth-child(2n) {
     flex-direction: column-reverse;
   }

   .about__image-wrapper {
     width: 100%;
     position: static;
   }
   .about__image-wrapper img {
     height: auto;
     min-height: unset;
   }

   .about__text-inner {
     width: 100%;
     padding: 40px 0;
   }

   .about__text-inner h3 {
     font-size: 18px;
   }

   .about__text-inner p {
     margin-top: 20px;
   }

 }



 .service {
   padding: 120px 0;
   background: #00557C;
   background-size: cover;
   position: relative;
 }

 .service .btn-wrapper {
   text-align: center;
   padding-top: 80px;
 }

 .service .btn {
   color: #ffffff;
   border: 1px solid #fff;
 }

 .service .section-title {
   color: #ffffff36;
 }

 .service .section-title .sub-text {
   color: #ffffff;
 }

 .service__text-inner {
   padding: 20px;
   text-align: left;
   background: #00A0E9;
   color: #ffffff;
   width: 80%;
   margin-left: auto;
   position: relative;
   top: -40px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }

 .service__text-inner h3 {
   font-size: 18px;
 }

 .service__text-inner p {
   width: 80%;
 }

 .service__list {
   display: flex;
   justify-content: space-between;
   margin-top: 40px;
   margin-bottom: 80px;
   z-index: 1;
   position: relative;
 }

 .service__item {
   width: 32%;
 }

 .service__item:nth-child(2) {
   position: relative;
   top: 40px;
 }

 .service__item:nth-child(3) {
   position: relative;
   top: 80px;
 }

 .service__item img {
   min-height: 330px;
   object-fit: cover;
 }



 @media screen and (max-width:768px) {
   .service {
     padding: 40px 0;
   }

   .service__list {
     display: block;
     margin-bottom: 20px;

   }

   .service__item {
     width: 100%;
   }

   .service__item:last-of-type {
     margin-bottom: 40px;
   }


   .service__item img {
     height: auto;
     min-height: unset;
   }


   .service .btn-wrapper {
     padding-top: 40px;
   }

   .service__text-inner {
     padding: 10px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   }

   .service__text-inner h3 {
    font-size: 16px;
  }

 }

 .company {
   padding: 120px 0 200px;
 }

 .company-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }

 .company .section-title {
   color: #ffffff36;
 }

 .company .section-title .sub-text {
   color: #ffffff;
 }

 .address-wrapper {
   margin: 0 auto;
   display: flex;
   align-items: center;
   flex-direction: column;
   background-color: #00A0E9;
   padding: 100px;
   position: relative;
   left: 50px;
   top: 80px;
   box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
 }

 .company__image-wrapper {
   width: 48%;
 }

 .company__image-wrapper img {
   object-fit: cover;
   min-height: 350px;
   min-width: 500px;
 }

 .company .btn-wrapper {
   margin-left: auto;
 }

 .company .btn {
   color: #fff;
   border: 1px solid #fff;

 }

 @media screen and (max-width: 1024px) {
  .address-wrapper {
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #00A0E9;
    padding: 40px;
    position: relative;
    left: 50px;
    top: 80px;
    box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
  }
 }
 

 @media screen and (max-width: 768px) {

   .company {
     padding: 40px 0;
   }
   .company__image-wrapper img {
    min-height: unset;
    min-width: unset;
    
  }

 }


 .address {
   text-align: center;
   margin-bottom: 24px;
   padding: 0 24px;
 }

 .recruit {
   padding: 120px 0;
   text-align: center;
   background-color: #071850;
   background: url(img/recruit_bg.jpg) no-repeat;
   background-size: cover;
   background-position: center;
   position: relative;
 }

 .recruit .section-title {
   color: #ffffff36;
 }

 .recruit:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 160, 233, .5);
 }

 .recruit .sub-text {
   left: 50%;
   bottom: 30px;
   width: 100%;
   transform: translateX(-50%);
 }

 .recruit__inner {
   background-color: #00557c82;
   padding: 80px 0;
   box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
 }

 .recruit .section-title {
   color: #ffffff36;
 }

 .recruit .sub-text {
   color: #ffffff;
 }

 .recruit .btn {
   color: #ffffff;
   border: 1px solid #fff;
 }

 @media screen and (max-width: 768px) {
   .recruit {
     padding: 40px 0;
   }

   .recruit__inner {
     padding: 20px 0;
   }
 }


 .works {
   position: relative;
 }

 .works:before {
   position: absolute;
   content: '';
   background: #009fe9;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50%;
   display: block;
 }

 .works__text-wrapper {
   left: -100px;
   background: #fff;
 }

 .works .section-title {
   color: #009fe91c;
 }

 .works .section-title .sub-text {
   color: #009fe9;
 }

 .works .btn {
   color: #009fe9;
   border: 1px solid #009fe9;
 }

 .works .btn:hover {
   background: #009fe9;
   color: #fff;
   border: 1px solid #fff;
 }

 .works-wrapper {
   left: 80px;
 }




 @media screen and (max-width:768px) {
   .company-wrapper {
     flex-direction: column-reverse;
   }

   .company__image-wrapper {
     width: 100%;
     max-height: unset;
   }

   .works-wrapper {
     flex-direction: column;
     left: 0;
   }

   .map {
     width: 100%;
     padding-top: 56.25%;
     /* = height ÷ width × 100 */
   }

   .map iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }

   .address-wrapper {
     display: block;
     padding: 20px 0;
     position: static;
     width: 100%;
     text-align: center;
   }

 }



 .btn {
   margin: 5px 0;
   position: relative;
   padding: 10px 60px 10px 30px;
   color: #333;
   display: inline-block;
   text-align: center;
   border: 1px solid #00557C;
   text-decoration: none;
   transition: all 0.3s;
   border-radius: 4px;
 }

 .btn:after {
   content: "";
   position: absolute;
   top: 50%;
   bottom: 0;
   right: 2rem;
   font-size: 90%;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: right 0.3s;
   width: 6px;
   height: 6px;
   border-top: solid 2px currentColor;
   border-right: solid 2px currentColor;
   transform: translateY(-50%) rotate(45deg);
 }

 .btn:hover {
   background: #fff;
   color: #00557C;
 }

 .btn:hover:after {
   right: 1.4rem;
 }

.u-fz-sm {
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .u-fz-sm {
    font-size: 12px;
  }  
}


 /********************************* index.htmlここまで *********************************/

 .service-content {
   padding: 120px 0;
   text-align: left;
 }

 .service-content__box {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .service-content__box:nth-child(2n) {
   flex-flow: row-reverse;
   margin: 80px 0;
 }

 .service-content__image-wrapper {
   width: 100%;
 }

 .service-content__image-wrapper img {
   min-height: 450px;
   object-fit: cover;
 }

 .service-content__text-wrapper {
   position: relative;
   left: -150px;
   color: #ffffff;
   max-width: 500px;
   width: 100%;
   background: #2FA8DE;
   padding: 60px 40px;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
 }

 .service-content__text-wrapper h2 {
   font-size: 32px;
   font-weight: 400;
 }


 .service-content__box:nth-child(2n) .service-content__text-wrapper {
   left: 150px;
 }

 @media screen and (max-width:1024px) {
  .service-content__text-wrapper {
    padding: 80px 40px;
    max-width: 100%;
  }
 }
 


 @media screen and (max-width: 768px) {

   .service-content {
     padding: 40px 0;
   }

   .service-content__image-wrapper img {
     min-height: unset;
   }

   .service-content__box {
     flex-flow: column;
   }

   .service-content__image-wrapper {
     width: 100%;
   }

   .service-content__text-wrapper {
     position: static;
     width: 100%;
     padding: 20px;
   }

   .service-content__text-wrapper h2 {
     font-size: 24px;
   }

   .service-content__box:nth-child(2n) {
     flex-flow: column;
     margin: 40px 0;
   }
 }

 /*********************** .service.htmlここまで ************************/

 .message {
   padding: 120px 0;
 }

 .message__inner-title {
   font-size: 36px;
   margin-bottom: 20px;
   color: #009fe9;
   font-weight: normal;
 }

 .message__inner-text {
   background: url(img/logo.png) no-repeat;
   background-color: rgba(255, 255, 255, 0.9);
   background-blend-mode: lighten;
   background-size: contain;
   background-position: center;
   width: 100%;
   height: 100%;
   font-size: 24px;
   text-align: justify;
 }

 .president-name {
   text-align: right;
   font-size: 24px;
 }

 .comapny__table {
   padding: 160px 0 0;
 }

 .comapny__table .section-title {
   margin: 0 auto;
   display: block;
 }

 .comapny__table table {
   width: 100%;
 }

 .comapny__table table tr {
   border-bottom: 1px solid #dcdcdc;
 }

 .comapny__table table tr th {
   padding: 30px 20px;
   font-size: 1rem;
   font-weight: bold;
   color: #333;
   text-align: left;
   width: 300px;
 }

 .comapny__table table tr td {
   padding-left: 20px;
   padding-bottom: 20px;
 }


 .comapny__table .map {
   width: 100%;
   padding-top: 56.25%;
   /* = height ÷ width × 100 */
   margin-top: 80px;
 }

 .comapny__table .map iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 .map {
   position: relative;
   padding-top: 25%;
   /* = height ÷ width × 100 */
   background-color: rgb(160, 160, 160);
 }

 .map iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 @media screen and (max-width: 768px) {
   .comapny__table {
     padding: 40px 0 0;
   }

   .comapny__table table tr th {
     display: block;
     width: 100%;
     text-align: left;
     padding-bottom: 0;
     padding: 15px 20px 0 20px;
   }

   .comapny__table table tr td {
     display: block;
     width: 100%;
     padding: 15px 0 15px 20px;
   }

   .message {
     padding: 40px 0;
   }

   .message__inner-title {
     font-size: 22px;
     color: #009fe9;
     font-weight: normal;
   }

   .message__inner-text {
     font-size: 16px;
   }

   .president-name {
     margin-top: 20px;
     font-size: 18px;
   }
 }

 /*********************** company.htmlはここまで ***********************/


 .application {
   padding: 120px 0;
 }

 .application__inner {
   background-color: #00b2ed19;
   padding: 80px 0;
   margin: 40px 0;
 }

 .application__desc-title {
   font-size: 32px;
   color: #00557C;
 }

 .application__desc-title .caution {
   display: inline-block;
   color: rgb(191, 28, 28);
 }

 .application__inner table.vl-2col {
   width: 100%;
   margin: 0 auto 2em auto;
   border-spacing: 0 10px;
   border-collapse: separate;
 }

 .application__inner table.vl-2col th {
   background-color: #00557C;
   color: #fff;
   padding: 20px;
   width: 300px;
   line-height: 1.5em;
   font-weight: 500;
   text-align: left;
 }

 .application__inner table.vl-2col td {
   padding: 20px;
   background-color: #fff;
   line-height: 1.5em;
 }

 .contact .btn-wrapper {
   position: relative;
 }

 .contact .btn {
   font-size: 24px;
   margin: 0 10px;
 }

 .contact .btn i {
   margin-right: 8px;
 }

 @media screen and (max-width: 768px) {

  .application {
    padding: 40px 0;
  }

   .application__inner table.vl-2col th {
     display: block;
     width: 100%;
   }

   .application__inner table.vl-2col td {
     display: block;
     width: 100%;
   }

   .application__inner {
     padding: 20px 0;
     margin: 20px 0;
   }

   .application__desc-title {
     font-size: 20px;
   }

   .contact .btn {
     font-size: 14px;
     width: 250px;
     display: block;
     margin: 20px auto;
   }

   .contact .btn span {
     display: inline-block;
   }
 }

 /*************************** recruit.htmlここまで **************************/


 .history {
   padding: 120px 0;
 }

 .list8 {
   margin: 3em 0 1em 0;
 }

 .list8-title {
   display: inline-block;
   padding: 1px 10px 0 10px;
   background: #00557C;
   color: #fff;
   letter-spacing: 0.1em;
   font-weight: bold;
 }

 .list8 ul,
 .list8 ol {
   position: relative;
   border: solid 2px #00557C;
   margin: 0;
   padding: 0;
 }


 .list8 ul li,
 .list8 ol li {
   color: #00557C;
   line-height: 1.5;
   padding: 0.5em 0.9em 0.5em 1.8em;
   border-bottom: dashed 1px #00557C;
   list-style-type: none;
   font-weight: bold;
 }

 .list8 ul li:before {
   position: absolute;
   font-family: "Font Awesome 5 Free";
   content: "\f807";
   left: 0.5em;
   color: #00557C;
 }

 .list8 ol li:before {
   display: inline-block;
   position: absolute;
   font-family: "Quicksand", sans-serif;
   content: counter(number);
   counter-increment: number;
   left: 0.5em;
   width: 22px;
   height: 22px;
   border-radius: 20%;
   background: #00557C;
   color: white;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
   vertical-align: middle;
   line-height: 22px;
 }

 .list8 ul li:last-of-type,
 .list8 ol li:last-of-type {
   border-bottom: none;
 }

 .list8-wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }

 .list8 {
   width: 45%;
 }

 @media screen and (max-width: 1024px) {

   .list8 {
     width: 100%;
   }
 }

 @media screen and (max-width: 768px) {
  .history {
    padding: 40px 0;
  }
   .list8 ul li {
     letter-spacing: 0;
     font-size: 14px;
   }
 }


 /*************************** works.htmlここまで **************************/

 footer {
   background: #00557C;
   color: #fff;
   padding: 40px 0;
 }

 .footer-left {
   width: 50%;
 }

 .footer-left h1 {
   margin-bottom: 20px;
 }

 .footer-right {
   width: 100%;
   height: auto;
 }

 .footer-right ul {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   height: 100%;
 }

 .footer__last {
   font-size: 12px;
 }

 .footer-logo {
   color: #ffffff;
 }

 .flex {
   display: flex;
 }

 .tap {
   text-decoration: underline;
 }

 /***** ハンバーガー *****/
 @media screen and (max-width: 768px) {

   .sp-nav .hover-under-line img {
     width: 72px;
     position: relative;
     margin-bottom: 20px;
   }

   .sp-nav-btn,
   .sp-nav {
     display: block;
   }

   .pc-nav {
     display: none;
   }

   /* ハンバーガーボタンの中身 */
   .sp-nav-btn {
     position: relative;
     width: 25px;
     height: 16px;
     margin: 5% 0 7% 0;
     z-index: 20;
     margin-left: auto;
     cursor: pointer;
   }

   /* ハンバーガーボタンの中身 */

   /* ハンバーガーボタンの背景色 */
   .sp-nav-btn:before {
     content: "menu";
     position: absolute;
     color: #00A0E9;
     width: 45px;
     height: 40px;
     font-size: 10px;
     top: -10px;
     right: -8px;
     /* background: #333333; */
     display: flex;
     justify-content: center;
     align-items: flex-end;
     padding-bottom: 0px;
     padding-top: 45px;
   }

   /* ハンバーガーボタンの背景色 */

   .pc-nav ul {
     display: none;
   }

   /* ハンバーガーの３本線 */

   .sp-nav-btn span {
     display: block;
     width: 100%;
     height: 2px;
     background-color: #00A0E9;
     position: absolute;
   }

   .sp-nav-btn span:nth-of-type(1) {
     top: 0;
     right: 3px;
     transition: ease-in 0.3s;
   }

   .sp-nav-btn span:nth-of-type(2) {
     top: 0;
     bottom: 0;
     margin: auto;
     right: 3px;
     transition: ease-in 0.3s;
   }

   .sp-nav-btn span:nth-of-type(3) {
     bottom: 0;
     right: 3px;
     transition: ease-in 0.3s;
   }

   /* ハンバーガーの３本線 */

   /* ハンバーガークリック後の線の動き */
   .sp-nav-btn.active span:nth-of-type(1) {
     transform: translateY(10px) rotate(-45deg);
     transition: ease-in .3s;
     background-color: #00557C;
   }

   .sp-nav-btn.active span:nth-of-type(2) {
     opacity: 0;
     transition: ease-in .3s;
   }

   .sp-nav-btn.active span:nth-of-type(3) {
     transform: translateY(-4px) rotate(45deg);
     background-color: #00557C;
   }

   .sp-nav-btn.active:before {
     opacity: 0;
     transition: ease-in .3s;
   }

   /* ハンバーガークリック後の線の動き */

   /* ハンバーガークリック後のメニュー */
   .sp-nav {
     display: block;
     position: fixed;
     z-index: 10;
     top: 0;
     right: 0;
     width: 100vw;
     height: 100vh;
     transform: translateX(100vw);
     transition: ease-in 0.3s;
     background: #fff;
   }

   /* ハンバーガークリック後のメニュー */

   .sp-nav.active {
     transform: translateX(0);
   }

   /* ハンバーガークリック後メニュー中身 */
   .sp-nav ul {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100vw;
     height: 100vh;
   }

   .sp-nav ul li {
     font-size: 16px;
     text-align: center;
     padding-top: 12px;
   }

   .sp-btn-wrapper {
     height: 50px;
     line-height: 50px;
   }

   /* ハンバーガークリック後メニュー中身 */

   /***** ハンバーガーここまで *****/
   footer {
     padding: 35px 0;
   }

   .footer-left {
     width: 100%;
     text-align: center;
   }

   .footer-left h1 {
     font-weight: 400;
     font-style: normal;
   }

   footer .logo {
     justify-content: center;
   }

   .flex {
     flex-direction: column-reverse;
   }

   .footer-right {
     margin-bottom: 30px;
   }

   .footer-right ul {
     flex-direction: column;
   }
 }

 @media(min-width: 768px) {
   a[href^="tel:"] {
     pointer-events: none;
   }
 }

 .copyright {
   font-family: Verdana, “Droid Sans”;
 }

 /*スクロールダウン全体の場所*/
.scrolldown2{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:10px;
left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
  /*描画位置*/
position: absolute;
left:10px;
bottom:10px;
  /*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
width:10px;
height:10px;
border-radius: 50%;
background:#eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
    0%{bottom:45px;}
   100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
    0%{opacity:0}
   50%{opacity:1;}
  80%{opacity:0.9;}
100%{opacity:0;}
}

/* 線の描写 */
.scrolldown2:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
left:0;
  /*線の形状*/
width:2px;
height: 50px;
background:#eee;
}

/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUpTrigger,
.fadeInRightTrigger,
.fadeInLeftTrigger {
  opacity: 0;
}

.delay-time {
  animation-delay: .3s;
}

.delay-time_02 {
  animation-delay: .5s;
}

.delay-time_03 {
  animation-delay: .7s;
}

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration: .8s;
	animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
  animation-duration: .8s;
	animation-fill-mode:forwards;
  opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}