@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
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;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

body {
  line-height: 1;
}

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

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;
}

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

input, select {
  vertical-align: middle;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@font-face {
  font-family: "Noto Serif JP";
  src: url("../fonts/NotoSerifJP-Light.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Noto Serif JP";
  src: url("../fonts/NotoSerifJP-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  body {
    font-family: "Noto Serif JP";
    font-size: 4vw;
  }
  body.fixed {
    overflow: hidden;
    max-height: 100vh;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  header {
    width: 100%;
    color: #000;
    z-index: 10;
    display: flex;
    justify-content: space-between;
  }
  header .logo {
    width: 60vw;
    height: 100%;
    padding: 6vw;
    display: block;
    z-index: 100;
    
  }
  header .logo img {
    width: 100%;
  }
  header .logo span {
    font-size: 4vw;
    color: #000;
  }
  header .logo a:link, header .logo a:hover, header .logo a:visited, header .logo a:active {
    color: #000;
    text-decoration: none;
  }
  header .logo.active a {
    z-index: 100;
  }
  header .logo.active a:link, header .logo.active a:hover, header .logo.active a:visited, header .logo.active a:active {
    color: #fff;
    text-decoration: none;
  }
  header nav {
    display: none;
  }
  header nav.active {
    width: 100%;
    height: 100Vh;
    display: block;
    background: #222c91;
    padding: 0;
    z-index: 5;
    position: fixed;
  }
  header nav ul {
    text-align: center;
    padding-top: 10vw;
  }
  header nav ul li {
    padding: 6vw;
  }
  header nav ul li a:link, header nav ul li a:hover, header nav ul li a:visited, header nav ul li a:active {
    color: #fff;
    text-decoration: none;
  }
  header #mobile-menu {
    width: 10vw;
    background-image: url(../img/btn_menu_sp.png);
    background-size: cover;
  }
  header #mobile-menu.active {
    z-index: 100;
    background-image: url(../img/btn_close_sp.png);
  }
  .home header {
    color: #fff;
    position: absolute;
  }
  footer {
    font-size: 3vw;
    padding: 15vw 0 2vw 0;
  }
  footer .container {
    width: 90vw;
    margin: 0 auto;
  }
  footer .container .company {
    line-height: 180%;
  }
  footer .container .company .name {
    font-size: 5.5vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10vw;
  }
  footer .container .nav ul {
    display: flex;
    margin-top: 8vw;
    justify-content: center;
  }
  footer .container .nav ul li {
    margin-left: 5vw;
  }
  footer .container .nav .btn {
    font-size: 5vw;
    background: #222c91;
    position: relative;
    display: block;
    width: 80vw;
    height: 12vw;
    line-height: 12vw;
    margin: 10vw auto;
  }
  footer .container .nav .btn:link, footer .container .nav .btn:hover, footer .container .nav .btn:visited, footer .container .nav .btn:active {
    color: #fff;
    text-decoration: none;
  }
  footer .container .nav .btn::before {
    content: "";
    display: inline-block;
    background-image: url(../img/ico_mail.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    width: 6vw;
    height: 6vw;
    position: absolute;
    left: 20vw;
    top: 4vw;
  }
  footer .container .nav .btn span {
    display: block;
    padding-left: 28vw;
  }
  footer .container .link {
    margin-bottom: 10vw;
  }
  footer .container .link ul {
    display: flex;
    justify-content: space-between;
  }
  footer .container .copy {
    text-align: center;
    margin-bottom: 2vw;
  }
  footer .container a:link, footer .container a:hover, footer .container a:visited, footer .container a:active {
    color: #000;
    text-decoration: none;
  }
  footer hr {
    width: 90vw;
    margin: 5vw auto;
    border: solid 1px #f0f0f0;
  }
}
@media screen and (min-width: 769px) {
  body {
    font-family: "Noto Serif JP";
    font-size: 1.2vw;
  }
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
header{
    width:100%;display:flex;justify-content:space-between;align-items:center
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
header .logo{
  
    font-size:1.8vw;padding-left:2vw
}

header .logo a:link,header .logo a:hover,header .logo a:visited,header .logo a:active
{
    color:#000;
    text-decoration:none
}

header nav ul{
    display:flex
    
}
header nav ul li{
    padding:2vw;display:inline-block
}
header nav ul li:last-child{
    padding-left:4vw;background:#1927b9;position:relative
}
header nav ul li:last-child a:link,header nav ul li:last-child a:hover,header nav ul li:last-child a:visited,header nav ul li:last-child a:active{
    color:#fff;text-decoration:none
}
header nav ul li:last-child::before{
    content:"";display:inline-block;
    background-image:url(../img/ico_recruit.png);
    background-repeat:no-repeat;
    background-size:contain;
    vertical-align:middle;
    width:1.8vw;height:1.8vw;position:absolute;
    left:2vw;top:1.5vw
}
header nav ul li a:link,header nav ul li a:hover,header nav ul li a:visited,header nav ul li a:active{
    color:#000;text-decoration:none
}
header #mobile-menu{
    display:none
}
.home header{
    position:absolute;color:#fff;height:5.2vw;z-index:1
}
.home header nav ul li a:link,.home header nav ul li a:hover,.home header nav ul li a:visited,.home header nav ul li a:active{
    color:#fff
}
.home header nav ul li:last-child a:link,.home header nav ul li:last-child a:hover,.home header nav ul li:last-child a:visited,.home header nav ul li:last-child a:active{
    color:#fff
}

  footer {
    font-size: 0.8vw;
    padding: 5vw 0 2vw 0;
  }
  footer .container {
    width: 65vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  footer .container .company {
    line-height: 180%;
  }
  footer .container .company .name {
    font-size: 1.2vw;
    margin-bottom: 1vw;
  }
  footer .container .nav ul {
    display: flex;
    margin-top: 1vw;
  }
  footer .container .nav ul li {
    margin-left: 3vw;
  }
  footer .container .nav .btn {
    font-size: 1.2vw;
    padding-left: 5vw;
    background: #1927b9;
    position: relative;
    display: block;
    width: 10vw;
    line-height: 3.8vw;
    height: 3.8vw;
    margin-top: 3vw;
    float: right;
  }
  footer .container .nav .btn:link, footer .container .nav .btn:hover, footer .container .nav .btn:visited, footer .container .nav .btn:active {
    color: #fff;
    text-decoration: none;
  }
  footer .container .nav .btn::before {
    content: "";
    display: inline-block;
    background-image: url(../img/ico_mail.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    width: 1.8vw;
    height: 1.8vw;
    position: absolute;
    left: 2vw;
    top: 1.5vw;
  }
  footer .container .link ul {
    display: flex;
  }
  footer .container .link ul li {
    margin-right: 3vw;
  }
  footer .container a:link, footer .container a:hover, footer .container a:visited, footer .container a:active {
    color: #000;
    text-decoration: none;
  }
  footer hr {
    width: 65vw;
    margin: 2vw auto;
    border: solid 1px #f0f0f0;
  }
}
@media screen and (max-width: 768px) {
  @keyframes bgAnime {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    20% {
      opacity: 1;
    }
    33% {
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    66% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  .home .keyimg {
    position: relative;
    height: 186vw;
    background-image: url(../img/bg_keyimg_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .home .keyimg .catch {
    z-index: 1;
    text-align: center;
  }
  .home .keyimg .catch span {
    font-size: 6vw;
    font-weight: bold;
    display: block;
    padding: 3vw 2vw;
    border: solid 1px #000;
    margin-bottom: 3vw;
  }
  .home .keyimg .catch h1 {
    font-size: 5vw;
    line-height: 180%;
    margin-bottom: 3vw;
  }
  .home .keyimg .catch p {
    font-size: 3.3vw;
    line-height: 200%;
  }
  .home .keyimg .bgImg {
    position: absolute;
    top: 4vw;
    left: 50%;
    bottom: 0;
    right: 0;
    opacity: 0;
    width: 90vw;
    margin-left: -45vw;
    animation: bgAnime 21s infinite;
  }
  .home .keyimg .src1 {
    background-image: url(../img/keyimg_01_sp.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .home .keyimg .src2 {
    background-image: url(../img/keyimg_02_sp.webp);
    animation-delay: 7s;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .home .keyimg .src3 {
    background-image: url(../img/keyimg_03_sp.webp);
    animation-delay: 14s;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .home main {
    width: 100%;
    padding-top: 24vw;
    background-image: url(../img/bg_main_sp.webp);
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 200%;
    position: relative;
  }
  .home main::before {
    content: "";
    background-image: url(../img/img_main.webp);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 95vw;
    height: 4.8vw;
    top: -3vw;
    left: 50%;
    margin-left: -47.5vw;
  }
  .home main h2 {
    font-weight: normal;
    font-size: 8vw;
    margin-bottom: 10vw;
    text-align: center;
    line-height: 130%;
  }
  .home main #about .about_01 .container {
    max-width: 90vw;
    margin: 0 auto;
    position: relative;
  }
  .home main #about .about_01 .container img {
    width: 100%;
    margin-top: 10vw;
    border-radius: 3vw;
  }
  .home main #about .about_01 .img {
    max-width: 90vw;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
  }
  .home main #about .about_01 .img figure {
    width: 44vw;
  }
  .home main #about .about_01 .img figure img {
    width: 100%;
  }
  .home main #about .about_02 {
    padding: 30vw 0 10vw 0;
  }
  .home main #about .about_02 .container {
    max-width: 90vw;
    margin: 0 auto;
  }
  .home main #about .about_02 .container figure {
    margin-top: 5vw;
  }
  .home main #about .about_02 .container figure img {
    width: 100%;
  }
  .home main #about .about_03 {
    position: relative;
    height: 202vw;
    background-image: url(../img/bg_colabo_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 6vw;
  }
  .home main #about .about_03 .container {
    width: 90vw;
    margin: 0 auto;
    color: #fff;
    padding: 5vw 0;
  }
  .home main #about .about_03 .container h2 {
    font-size: 6vw;
  }
  .home main #about .about_03 .container p {
    line-height: 250%;
    margin-bottom: 4vw;
  }
  .home main #about .about_03 .container figure img {
    width: 100%;
  }
  .home main #company {
    margin-top: 20vw;
    background-color: #f0f0f0;
  }
  .home main #company .company {
    height: 270vw;
    position: relative;
  }
  .home main #company .company .container {
    max-width: 90vw;
    margin: 0 auto;
  }
  .home main #company .company .container table {
    margin: 0 auto;
  }
  .home main #company .company .container table th {
    width: 20vw;
    color: #222c91;
    font-weight: normal;
    border-top: solid 1px #222c91;
    border-right: transparent 10px solid;
    vertical-align: middle;
    line-height: 200%;
    padding: 2vw 0;
    vertical-align: middle;
  }
  .home main #company .company .container table th:last-of-type {
    border-bottom: solid 1px #222c91;
  }
  .home main #company .company .container table td {
    width: 60vw;
    border-top: solid 1px #b5b8d9;
    line-height: 200%;
    padding: 2vw 0;
    vertical-align: middle;
  }
  .home main #company .company .container table td:last-of-type {
    border-bottom: solid 1px #b5b8d9;
  }
  .home main #company .company .container .table_01 th:last-of-type {
    border-bottom: none;
  }
  .home main #company .company .container .table_01 td:last-of-type {
    border-bottom: none;
  }
  .home main #company .company .container .table_02 {
    margin-bottom: 10vw;
  }
  .home main #company .company .container figure {
    margin-bottom: 5vw;
  }
  .home main #company .company .container figure img {
    width: 100%;
  }
  .home main #company .company .container .btn_group {
    width: 80vw;
    margin: 5vw auto 0 auto;
    padding: 3vw 0;
    background: #222c91;
    position: relative;
    text-align: center;
    line-height: 120%;
  }
  .home main #company .company .container .btn_group a {
    width: 80vw;
    display: block;
  }
  .home main #company .company .container .btn_group a:link, .home main #company .company .container .btn_group a:hover, .home main #company .company .container .btn_group a:visited, .home main #company .company .container .btn_group a:active {
    color: #fff;
    text-decoration: none;
  }
  .home main #company .company .container .btn_group::after {
    font-size: 2.5vw;
    color: #fff;
    content: "▶";
    position: absolute;
    right: 3vw;
    top: 5vw;
  }
  .home main #company .company::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 61vw;
    background-image: url(../img/bg_company_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
  }
  .home main #company .workplace {
    background-color: #b6ddfa;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 20vw;
  }
  .home main #company .workplace .container {
    width: 90vw;
    margin: 0 auto;
    font-size: 3.5vw;
    line-height: 200%;
  }
  .home main #company .workplace .container p {
    margin-bottom: 6vw;
  }
  .home main #company .workplace .container h2 {
    font-size: 7vw;
    text-align: center;
    font-weight: bold;
  }
  .home main #company .workplace .container h3 {
    font-size: 6vw;
    text-align: center;
    margin: 20vw 0 5vw 0;
  }
  .home main #company .workplace .container figure img {
    width: 100%;
  }
  .home main #company .workplace .container div div {
    display: flex;
    justify-content: space-between;
  }
  .home main #company .workplace .container div div img {
    width: 43vw;
    margin-left: 1vw;
  }
  .home main #company .workplace .bg_workspace {
    line-height: 0;
  }
  .home main #company .workplace .bg_workspace img {
    width: 100%;
  }
  .policy .keyimg {
    position: relative;
    background-image: url(../img/keyimg_policy_sp.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 62vw;
  }
  .policy .keyimg h1 {
    color: #fff;
    position: absolute;
    bottom: 11vw;
    left: 2vw;
    font-weight: normal;
    font-size: 5vw;
  }
  .policy main {
    background-image: url(../img/bg_footer_sp.webp);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 70vw;
  }
  .policy main .container {
    width: 90vw;
    margin: 0 auto;
    padding-bottom: 10vw;
  }
  .policy main .container h2 {
    font-weight: normal;
    margin: 10vw 0 5vw 0;
  }
  .policy main .container p {
    line-height: 180%;
    margin-bottom: 1.5vw;
  }
  .policy main .container small {
    line-height: 180%;
  }
  .policy main .container table {
    border-collapse: collapse;
  }
  .policy main .container table th {
    border: solid 1px;
    padding: 1vw;
    font-weight: normal;
    background-color: #dfdfdf;
  }
  .policy main .container table td {
    width: 50vw;
    line-height: 150%;
    padding: 1vw;
    border: solid 1px;
  }
  .policy main .container table td ul {
    padding-left: 5vw;
  }
  .policy main .container table td ul li {
    list-style: disc;
  }
  .policy main .container a {
    word-wrap: break-word;
  }
  .termsofuse .keyimg {
    position: relative;
    background-image: url(../img/keyimg_termsofuse_sp.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 62vw;
  }
  .termsofuse .keyimg h1 {
    color: #fff;
    position: absolute;
    bottom: 8.6vw;
    left: 2vw;
    font-weight: normal;
  }
  .termsofuse main {
    background-image: url(../img/bg_footer_sp.webp);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 70vw;
    padding-top: 10vw;
  }
  .termsofuse main .container {
    width: 90vw;
    margin: 0 auto;
    padding-bottom: 10vw;
  }
  .termsofuse main .container h2 {
    font-weight: normal;
    margin: 10vw 0 5vw 0;
  }
  .termsofuse main .container p {
    line-height: 180%;
    margin-bottom: 5vw;
  }
  .termsofuse main .container small {
    line-height: 180%;
  }
  .termsofuse main .container ul {
    padding-left: 5vw;
  }
  .termsofuse main .container ul li {
    list-style: decimal;
    line-height: 180%;
  }
  .security .keyimg {
    position: relative;
    background-image: url(../img/keyimg_security_sp.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 62vw;
  }
  .security .keyimg h1 {
    color: #fff;
    position: absolute;
    bottom: 8.6vw;
    left: 2vw;
    font-weight: normal;
  }
  .security main {
    background-image: url(../img/bg_footer_sp.webp);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 70vw;
    padding-top: 10vw;
  }
  .security main .container {
    width: 90vw;
    margin: 0 auto;
    padding-bottom: 10vw;
  }
  .security main .container h2 {
    font-weight: normal;
    margin: 10vw 0 5vw 0;
    line-height: 130%;
  }
  .security main .container p {
    line-height: 180%;
    margin-bottom: 5vw;
  }
  .security main .container small {
    line-height: 180%;
  }
  .security main .container ul {
    padding-left: 5vw;
  }
  .security main .container ul li {
    list-style: decimal;
    line-height: 180%;
  }
  .recruit .keyimg {
    position: relative;
    background-image: url(../img/keyimg_recruit_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 62vw;
  }
  .recruit .keyimg h1 {
    font-size: 4vw;
    color: #fff;
    position: absolute;
    bottom: 8.6vw;
    left: 2vw;
    font-weight: normal;
  }
  .recruit main {
    padding-top: 8vw;
  }
  .recruit main .message {
    margin-bottom: 10vw;
  }
  .recruit main .message .container {
    width: 85vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .message .container h2 {
    font-size: 6vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 2vw;
    margin-bottom: 6vw;
  }
  .recruit main .message .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "MESSAGE";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .message .container p {
    line-height: 250%;
  }
  .recruit main .message .container .img,
.recruit main .message .container .content .img-f {
    width: 100%;
  }
  .recruit main .message .container .img figure img,
.recruit main .message .container .content .img-f figure img {
    width: 100%;
  }
  .recruit main .message .container .img p {
    font-size: 3vw;
    line-height: 150%;
    text-align: right;5
    margin-bottom: 1vw;
  }
  .recruit main .message .container .text {
    width: 100%;
    margin-top: 10vw;
  }
  .recruit main .message .container .text p {
    font-size: 3.8vw;
    line-height: 180%;
    margin-bottom: 5vw;
  }
  .recruit main .message .container .text p:last-of-type {
    margin-bottom: 0;
  }
  .recruit main .message .container .text p span {
    font-weight: bold;
    margin-right: 3vw;
    color: #222c91;
  }
  .recruit main .products {
    margin-bottom: 15vw;
  }
  .recruit main .products .container {
    width: 85vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .products .container .subtitle {
    font-size: 4vw;
    margin-bottom: 1vw;
  }
  .recruit main .products .container h2 {
    font-size: 6vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 3vw;
    margin-bottom: 6vw;
  }
  .recruit main .products .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "PRODUCTS";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .products .container h3 {
    font-size: 4vw;
    color: #222c91;
    margin-bottom: 5vw;
  }
  .recruit main .products .container p {
    line-height: 150%;
    margin-bottom: 5vw;
  }
  .recruit main .products .container p span {
    color: #222c91;
  }
  .recruit main .products .container figure {
    margin-bottom: 10vw;
  }
  .recruit main .products .container figure img {
    width: 100%;
  }
  .recruit main .products .container .content {
    width: 85vw;
    margin: 0 auto;
  }
  .recruit main .products .container .content .box div {
    margin-bottom: 10vw;
  }
  .recruit main .products .container .content .box div .title {
    font-size: 3.5vw;
    color: #222c91;
    margin-bottom: 1vw;
    font-weight: bold;
  }
  .recruit main .products .container .content .box div .text {
    background-color: #edeff7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 3vw;
  }
  .recruit main .products .container .content .box div .text p {
    font-size: 1.2vw;
    line-height: 150%;
  }
  .recruit main .products .container .content .box div img {
    width: 100%;
    height: 50vw;
    -o-object-fit: cover;
       object-fit: cover;
    line-height: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .recruit main .products .container .catch {
    font-size: 6vw;
    text-align: center;
    margin-top: 5vw;
    color: #222c91;
    font-weight: bold;
  }
  .recruit main .interview {
    margin-bottom: 10vw;
  }
  .recruit main .interview .container {
    width: 85vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .interview .container h2 {
    font-size: 6vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .interview .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "INTERVIEW";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .interview .container h3 {
    font-size: 3.6vw;
    color: #222c91;
    margin-top: 10vw;
    margin-bottom: 3vw;
    line-height: 130%;
    border-bottom: solid 1px #222c91;
    padding-bottom: 2vw;
  }
  .recruit main .interview .container .name {
    font-size: 2.8vw;
    text-align: right;
    margin-bottom: 10vw;
  }
  .recruit main .interview .container .content,
  .recruit main .interview .container .content_reverse {
    position: relative;
  }
  .recruit main .interview .container .content img,
  .recruit main .interview .container .content_reverse img {
    width: 100%;
    margin-bottom: 5vw;
  }
  .recruit main .interview .container .content .text,
  .recruit main .interview .container .content_reverse .text {
    width: 100%;
    line-height: 200%;
    padding: 1vw;
    font-size: 3vw;
    margin-bottom: 5vw;
  }
  .recruit main .effort {
    margin-bottom: 10vw;
  }
  .recruit main .effort .container {
    width: 85vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .effort .container h2 {
    font-size: 6vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 2vw;
    margin-bottom: 6vw;
  }
  .recruit main .effort .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "EFFORT";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .effort .container .content ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
  }
  .recruit main .effort .container .content ul li img {
    width: 100%;
  }
 .recruit main .effort .container .content {
    width: 100%;
    line-height: 200%;
    padding: 1vw;
    font-size: 3vw;
    margin-bottom: 5vw;
  }


  .recruit main .description {
    width: 100%;
    margin-top: 5vw;
    background-image: url(../img/bg_description.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .recruit main .description h2 {
    width: 85vw;
    margin: 0 auto;
    position: relative;
    font-size: 6vw;
    color: #222c91;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .description h2::after {
    font-size: 7vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "JOB DESCRIPTION";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .description .container {
    background-color: #edeff7;
    padding: 5vw 0;
  }
  .recruit main .description .container table {
    width: 85vw;
    margin: 0 auto;
    font-size: 3vw;
  }
  .recruit main .description .container table th {
    width: 30vw;
    color: #222c91;
    font-weight: normal;
    border-bottom: solid 1px #222c91;
    border-right: transparent 10px solid;
    vertical-align: middle;
    line-height: 160%;
    padding: 1.3vw 0;
    vertical-align: middle;
  }
  .recruit main .description .container table td {
    border-bottom: solid 1px #b5b8d9;
    line-height: 160%;
    padding: 1.3vw 0;
    vertical-align: middle;
  }
  .recruit main .footer_message .container {
    width: 85vw;

    margin: 10vw auto;
  }
    .recruit main .footer_message .container img {
    width: 100%;
    margin-bottom: 5vw;
  }
  .recruit main .footer_message .container h2 {
    font-size: 6vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .footer_message .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "MESSAGE";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .footer_message .container .content {
    position: relative;
  }
  .recruit main .footer_message .container .content img {
    width: 100%;
    margin-bottom: 5vw;
  }
  .recruit main .footer_message .container .content .text {
    width: 100%;
    line-height: 200%;
    font-size: 3vw;
  }
  .recruit main .footer_message .container .content .text p {
    margin-bottom: 1vw;
  }
  .recruit main .cta {
    width: 100%;
    height: 116vw;
    background-image: url(../img/bg_cta_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .recruit main .cta .container {
    width: 90vw;
    margin: 0 auto;
  }
  .recruit main .cta .container .title {
    font-size: 7vw;
    margin-bottom: 2vw;
  }
  .recruit main .cta .container span {
    line-height: 150%;
  }
  .recruit main .cta .container a:link, .recruit main .cta .container a:hover, .recruit main .cta .container a:visited, .recruit main .cta .container a:active {
    color: #fff;
    text-decoration: none;
  }
  .recruit main .cta .container .contact a {
    height: 58vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .recruit main .cta .container .contact a .title {
    position: relative;
    margin-bottom: 5vw;
  }
  .recruit main .cta .container .contact a .title::before {
    font-size: 3vw;
    position: absolute;
    content: "CONTACT";
    top: -7vw;
  }
  .recruit main .cta .container .entry a {
    height: 58vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .recruit main .cta .container .entry a .title {
    position: relative;
    margin-bottom: 5vw;
  }
  .recruit main .cta .container .entry a .title::before {
    font-size: 3vw;
    position: absolute;
    content: "ENTRY";
    top: -7vw;
  }
}
@media screen and (min-width: 769px) {
  @keyframes bgAnime {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    20% {
      opacity: 1;
    }
    33% {
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    66% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  .home .keyimg {
    position: relative;
    height: 64.4vw;
    background-image: url(../img/bg_keyimg.webp);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .home .keyimg .catch {
    z-index: 1;
    text-align: center;
  }
  .home .keyimg .catch span {
    font-size: 4vw;
    font-weight: bold;
    display: block;
    padding: 1.5vw 3vw;
    border: solid 1px #000;
    margin-bottom: 3vw;
  }
  .home .keyimg .catch h1 {
    font-size: 1.8vw;
    line-height: 180%;
    margin-bottom: 3vw;
  }
  .home .keyimg .catch p {
    line-height: 200%;
  }
  .home .keyimg .bgImg {
    position: absolute;
    top: 1.6vw;
    left: 50%;
    bottom: 0;
    right: 0;
    opacity: 0;
    width: 96vw;
    margin-left: -48vw;
    animation: bgAnime 21s infinite;
  }
  .home .keyimg .src1 {
    background-image: url(../img/keyimg_01.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .home .keyimg .src2 {
    background-image: url(../img/keyimg_02.webp);
    animation-delay: 7s;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .home .keyimg .src3 {
    background-image: url(../img/keyimg_03.webp);
    animation-delay: 14s;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .home main {
    width: 100%;
    padding-top: 6vw;
    background-image: url(../img/bg_main.webp);
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 300%;
    position: relative;
  }
  .home main::before {
    content: "";
    background-image: url(../img/img_main.webp);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 95vw;
    height: 4.8vw;
    top: -3vw;
    left: 50%;
    margin-left: -47.5vw;
  }
  .home main h2 {
    font-weight: normal;
    font-size: 3vw;
    margin-bottom: 3vw;
  }
  .home main #about .about_01 .container {
    max-width: 80vw;
    margin: 0 auto;
    position: relative;
  }
  .home main #about .about_01 .container p {
    width: 30vw;
    line-height: 240%;
  }
  .home main #about .about_01 .container::after {
    content: "";
    display: inline-block;
    width: 47vw;
    height: 32vw;
    background-image: url(../img/img_main_01.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
  }
  .home main #about .about_01 .img {
    width: 80vw;
    margin: 3vw auto;
    display: flex;
    justify-content: space-around;
  }
  .home main #about .about_01 .img img {
    width: 35vw;
  }
  .home main #about .about_02 {
    margin: 10vw 0;
  }
  .home main #about .about_02 .container {
    max-width: 80vw;
    margin: 0 auto;
    position: relative;
  }
  .home main #about .about_02 .container h2 {
    width: 40vw;
    margin-left: 40vw;
  }
  .home main #about .about_02 .container p {
    width: 40vw;
    line-height: 240%;
    margin-left: 40vw;
  }
  .home main #about .about_02 .container::before {
    content: "";
    display: inline-block;
    width: 36vw;
    height: 40.2vw;
    background-image: url(../img/img_main_04.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
  }
  .home main #about .about_03 {
    position: relative;
    height: 55vw;
    background-image: url(../img/bg_colabo.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .home main #about .about_03 .container {
    width: 57vw;
    margin: 0 auto;
    color: #fff;
    padding: 5vw 0;
  }
  .home main #about .about_03 .container h2 {
    font-size: 3vw;
  }
  .home main #about .about_03 .container p {
    line-height: 250%;
    margin-bottom: 4vw;
  }
  .home main #about .about_03 .container figure img {
    width: 100%;
  }
  .home main #company {
    background-color: #f0f0f0;
    margin-top: 10vw;
  }
  .home main #company .company {
    position: relative;
    padding-bottom: 22vw;
  }
  .home main #company .company .container {
    width: 65vw;
    margin: 0 auto;
    padding: 5vw 0;
  }
  .home main #company .company .container h2 {
    text-align: center;
  }
  .home main #company .company .container .table {
    display: flex;
    justify-content: space-between;
  }
  .home main #company .company .container .table table th {
    width: 8vw;
    color: #222c91;
    font-weight: normal;
    border-top: solid 1px #222c91;
    border-right: transparent 10px solid;
    vertical-align: middle;
    line-height: 160%;
    padding: 1.3vw 0;
    vertical-align: middle;
  }
  .home main #company .company .container .table table th:last-of-type {
    border-bottom: solid 1px #222c91;
  }
  .home main #company .company .container .table table td {
    width: 22vw;
    border-top: solid 1px #b5b8d9;
    line-height: 160%;
    padding: 1.3vw 0;
    vertical-align: middle;
  }
  .home main #company .company .container .table table td:last-of-type {
    border-bottom: solid 1px #b5b8d9;
  }
  .home main #company .company .container .btn_group {
    width: 38vw;
    margin: 5vw auto 0 auto;
    background: #222c91;
    position: relative;
    text-align: center;
  }
  .home main #company .company .container .btn_group a {
    width: 38vw;
    display: block;
  }
  .home main #company .company .container .btn_group a:link, .home main #company .company .container .btn_group a:hover, .home main #company .company .container .btn_group a:visited, .home main #company .company .container .btn_group a:active {
    color: #fff;
    text-decoration: none;
  }
  .home main #company .company .container .btn_group::after {
    font-size: 1vw;
    color: #fff;
    content: "▶";
    position: absolute;
    right: 1.5vw;
    top: 0;
  }
  .home main #company .company::before {
    content: "";
    display: inline-block;
    width: 40vw;
    height: 5vw;
    background-image: url(../img/title_company.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: -6vw;
    margin-left: -20vw;
  }
  .home main #company .company::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 23vw;
    background-image: url(../img/bg_company.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
  }
  .home main #company .workplace {
    background-image: url(../img/bg_footer.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-top: 5vw;
    height: 120vw;
  }
  .home main #company .workplace .container {
    width: 65vw;
    margin: 0 auto;
    font-size: 1vw;
    background-color: #fff;
    border-radius: 0.5vw;
    padding: 3vw;
    line-height: 200%;
  }
  .home main #company .workplace .container p {
    margin-bottom: 1vw;
  }
  .home main #company .workplace .container h2 {
    font-size: 2vw;
    text-align: center;
  }
  .home main #company .workplace .container h3 {
    margin: 3vw 0 1vw 0;
  }
  .home main #company .workplace .container figure img {
    width: 100%;
  }
  .home main #company .workplace .container div {
    display: flex;
  }
  .home main #company .workplace .container div p {
    width: 25vw;
  }
  .home main #company .workplace .container div div {
    display: flex;
    justify-content: space-between;
  }
  .home main #company .workplace .container div div img {
    width: 17vw;
    margin-left: 1vw;
  }
  .policy .keyimg {
    position: relative;
    background-image: url(../img/keyimg_policy.webp);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 24vw;
  }
  .policy .keyimg h1 {
    color: #000;
    position: absolute;
    bottom: 6.5vw;
    left: 3vw;
    font-weight: normal;
  }
  .policy main {
    background-image: url(../img/bg_footer.webp);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 30vw;
  }
  .policy main .container {
    width: 75vw;
    margin: 5vw auto 0 auto;
    padding-bottom: 10vw;
  }
  .policy main .container h2 {
    font-weight: normal;
    margin: 5vw 0 1.5vw 0;
  }
  .policy main .container p {
    line-height: 180%;
    margin-bottom: 1.5vw;
  }
  .policy main .container small {
    line-height: 180%;
  }
  .policy main .container table {
    border-collapse: collapse;
  }
  .policy main .container table th {
    border: solid 1px;
    padding: 1vw;
    font-weight: normal;
    background-color: #dfdfdf;
  }
  .policy main .container table td {
    width: 43vw;
    line-height: 150%;
    padding: 1vw;
    border: solid 1px;
  }
  .policy main .container table td ul {
    padding-left: 2vw;
  }
  .policy main .container table td ul li {
    list-style: disc;
  }
  .termsofuse .keyimg {
    position: relative;
    background-image: url(../img/keyimg_termsofuse.webp);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 24vw;
  }
  .termsofuse .keyimg h1 {
    color: #000;
    position: absolute;
    bottom: 6.5vw;
    left: 3vw;
    font-weight: normal;
  }
  .termsofuse main {
    background-image: url(../img/bg_footer.webp);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 30vw;
  }
  .termsofuse main .container {
    width: 75vw;
    margin: 5vw auto 0 auto;
    padding-bottom: 10vw;
  }
  .termsofuse main .container h2 {
    font-weight: normal;
    margin: 5vw 0 1.5vw 0;
  }
  .termsofuse main .container p {
    line-height: 180%;
    margin-bottom: 1.5vw;
  }
  .termsofuse main .container small {
    line-height: 180%;
  }
  .termsofuse main .container ul {
    padding-left: 2vw;
  }
  .termsofuse main .container ul li {
    list-style: decimal;
    line-height: 180%;
  }
  .security .keyimg {
    position: relative;
    background-image: url(../img/keyimg_security.webp);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 24vw;
  }
  .security .keyimg h1 {
    color: #000;
    position: absolute;
    bottom: 6.5vw;
    left: 3vw;
    font-weight: normal;
  }
  .security main {
    background-image: url(../img/bg_footer.webp);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 30vw;
  }
  .security main .container {
    width: 75vw;
    margin: 5vw auto 0 auto;
    padding-bottom: 10vw;
  }
  .security main .container h2 {
    font-weight: normal;
    margin: 5vw 0 1.5vw 0;
  }
  .security main .container p {
    line-height: 180%;
    margin-bottom: 1.5vw;
  }
  .security main .container small {
    line-height: 180%;
  }
  .security main .container ul {
    padding-left: 2vw;
  }
  .security main .container ul li {
    list-style: decimal;
    line-height: 180%;
  }
  .recruit .keyimg {
            position:relative;background-image:url(../img/keyimg_recruit.png);
        background-size:contain;
        background-repeat:no-repeat;
        width:100%;height:23vw
  }
  .recruit .keyimg h1 {
    color: #FFF;
    position: absolute;
    bottom: 5vw;
    left: 3vw;
    font-weight: normal;
  }
  .recruit main {
    padding-top: 8vw;
  }
  .recruit main .message {
    margin-bottom: 10vw;
  }
  .recruit main .message .container {
    width: 75vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .message .container h2 {
    font-size: 3.5vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .message .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "MESSAGE";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .message .container p {
    line-height: 250%;
  }
  .recruit main .message .container .content {
    display: flex;
    justify-content: space-between;
  }
  .recruit main .message .container .content .img {
    width: 50vw;
  }
    .recruit main .message .container .content .img-f {
    width: 50vw;    
  }
  .recruit main .message .container .content .img figure img {
    width: 100%;
  }
    .recruit main .message .container .content .img-f  figure img {
    width: 100%;    
  }

  .recruit main .message .container .content .img-f {
  order: 2;
}

.recruit main .message .container .content .img-f + .text {
  order: 1;
}

  .recruit main .message .container .content .text {
    width: 100%;
    padding: 0 1vw 0 1vw;
    margin-top: 0;
  }
  .recruit main .message .container .content .text p {
    font-size: 1.2vw;
    line-height: 180%;
    margin-bottom: 1vw;
  }
  .recruit main .message .container .content .text .name {
    font-size: 1.6vw;
    text-align: right;
  }
  .recruit main .message .container .content p {
    font-size: 1.2vw;
    line-height: 180%;
    margin-bottom: 1vw;
  }
  .recruit main .message .container .content p:last-of-type {
    margin-bottom: 0;
  }
  .recruit main .message .container .text {
    width: 100%;
    margin-top: 3vw;
  }
  .recruit main .message .container .text p {
    font-size: 1.2vw;
    line-height: 180%;
    margin-bottom: 1vw;
  }
  .recruit main .message .container .text .name {
    font-size: 1.6vw;
    text-align: right;
  }
  .recruit main .products {
    margin-bottom: 15vw;
  }
  .recruit main .products .container {
    width: 75vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .products .container .subtitle {
    font-size: 1.6vw;
    margin-bottom: 1vw;
  }
  .recruit main .products .container h2 {
    font-size: 3.5vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .products .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "PRODUCTS";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .products .container h3 {
    font-size: 2.5vw;
    color: #222c91;
    margin-bottom: 2vw;
  }
  .recruit main .products .container p {
    line-height: 150%;
    margin-bottom: 5vw;
  }
  .recruit main .products .container p span {
    color: #222c91;
  }
  .recruit main .products .container figure {
    margin-bottom: 5vw;
  }
  .recruit main .products .container figure img {
    width: 100%;
  }
  .recruit main .products .container .content {
    width: 95%;
    margin: 0 auto;
  }
  .recruit main .products .container .content p {
    margin-bottom: 3vw;
  }
  .recruit main .products .container .content .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 30px;
         column-gap: 30px;
    row-gap: 30px;
  }
  .recruit main .products .container .content .box div .title {
    font-size: 1.8vw;
    color: #222c91;
    margin-bottom: 1vw;
  }
  .recruit main .products .container .content .box div .text {
    background-color: #edeff7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 1vw;
    margin-bottom: 0;
  }
  .recruit main .products .container .content .box div .text p {
    font-size: 1.2vw;
    line-height: 150%;
  }
  .recruit main .products .container .content .box div img {
    width: 100%;
    height: 10vw;
    -o-object-fit: cover;
       object-fit: cover;
    line-height: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .recruit main .products .container .catch {
    font-size: 2.5vw;
    text-align: center;
    margin-top: 5vw;
    color: #222c91;
    font-weight: bold;
  }
  .recruit main .interview {
    margin-bottom: 10vw;
  }
  .recruit main .interview .container {
    width: 75vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .interview .container h2 {
    font-size: 3.5vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .interview .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "INTERVIEW";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .interview .container h3 {
    font-size: 2.5vw;
    color: #222c91;
    margin-top: 5vw;
    margin-bottom: 1vw;
    line-height: 130%;
    border-bottom: solid 1px #222c91;
    padding-bottom: 1vw;
  }
  .recruit main .interview .container .name {
    font-size: 1.2vw;
    text-align: right;
    margin-bottom: 3vw;
  }
  .recruit main .interview .container .content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vw;
  }
  .recruit main .interview .container .content img {
    width: 37.5vw;
  }
  .recruit main .interview .container .content .text {
    width: 100%;
    line-height: 180%;
    padding: 1vw;
    font-size: 1.2vw;
  }
  .recruit main .interview .container .content_reverse {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .recruit main .interview .container .content_reverse img {
    width: 37.5vw;
  }
  .recruit main .interview .container .content_reverse .text {
    width: 100%;
    line-height: 180%;
    padding: 1vw;
    font-size: 1.2vw;
  }
  .recruit main .effort {
    margin-bottom: 10vw;
  }
  .recruit main .effort .container {
    width: 75vw;
    margin: 0 auto;
    position: relative;
  }
  .recruit main .effort .container h2 {
    font-size: 3.5vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 4vw;
  }
  .recruit main .effort .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "EFFORT";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .effort .container .content ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
  }
  .recruit main .effort .container .content ul li img {
    width: 100%;
  }

 .recruit main .effort .container .content {
    width: 100%;
    line-height: 200%;
    padding: 1vw;
    font-size: 1.1vw;
    margin-bottom: 3vw;
  }



  .recruit main .description {
    width: 100%;
    margin-top: 5vw;
    background-image: url(../img/bg_description.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .recruit main .description h2 {
    width: 75vw;
    margin: 0 auto;
    position: relative;
    font-size: 3.5vw;
    color: #222c91;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .description h2::after {
    font-size: 7vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "JOB DESCRIPTION";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .description .container {
    background-color: #edeff7;
    padding: 5vw 0;
  }
  .recruit main .description .container table {
    width: 50vw;
    margin: 0 auto;
  }
  .recruit main .description .container table th {
    width: 15vw;
    color: #222c91;
    font-weight: normal;
    border-bottom: solid 1px #222c91;
    border-right: transparent 10px solid;
    vertical-align: middle;
    line-height: 160%;
    padding: 1.3vw 0;
    vertical-align: middle;
  }
  .recruit main .description .container table td {
    border-bottom: solid 1px #b5b8d9;
    line-height: 160%;
    padding: 1.3vw 0;
    vertical-align: middle;
  }
  .recruit main .footer_message .container {
    width: 75vw;
    height: 50vw; 
    margin: 5vw auto 0 auto;
  }
    .recruit main .footer_message .container  img {
    width: 100%;
  }
  .recruit main .footer_message .container h2 {
    font-size: 3.5vw;
    color: #222c91;
    position: relative;
    border-bottom: solid 2px #222c91;
    padding-bottom: 1vw;
    margin-bottom: 6vw;
  }
  .recruit main .footer_message .container h2::after {
    font-size: 8vw;
    position: absolute;
    bottom: -3.5vw;
    right: -10vw;
    content: "MESSAGE";
    color: #edeff7;
    z-index: -1;
    font-family: "Ubuntu", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5vw;
  }
  .recruit main .footer_message .container .content {
    display: flex;
    justify-content: space-between;
  }
  .recruit main .footer_message .container .content img {
    width: 25vw;
  }
  .recruit main .footer_message .container .content .text {
    width: 100%;
    line-height: 200%;
    padding-left: 2vw;
    font-size: 1.2vw;
  }
  .recruit main .footer_message .container .content .text p {
    margin-bottom: 1vw;
  }
  .recruit main .cta {
    width: 100%;
    height: 18vw;
    background-image: url(../img/bg_cta.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .recruit main .cta .container {
    width: 65vw;
    height: 18vw;
    margin: 0 auto;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 10vw;
  }
  .recruit main .cta .container .title {
    font-size: 2.3vw;
    margin-bottom: 2vw;
  }
  .recruit main .cta .container span {
    line-height: 150%;
  }
  .recruit main .cta .container a:link, .recruit main .cta .container a:hover, .recruit main .cta .container a:visited, .recruit main .cta .container a:active {
    color: #fff;
    text-decoration: none;
  }
  .recruit main .cta .container .contact {
    margin-top: 2vw;
  }
  .recruit main .cta .container .contact a {
    display: block;
  }
  .recruit main .cta .container .contact a .title {
    position: relative;
  }
  .recruit main .cta .container .contact a .title::before {
    font-size: 1.2vw;
    position: absolute;
    content: "CONTACT";
    top: -2vw;
  }
  .recruit main .cta .container .entry {
    margin-top: 2vw;
  }
  .recruit main .cta .container .entry a {
    display: block;
  }
  .recruit main .cta .container .entry a .title {
    position: relative;
  }
  .recruit main .cta .container .entry a .title::before {
    font-size: 1.2vw;
    position: absolute;
    content: "ENTRY";
    top: -2vw;
  }
}/*# sourceMappingURL=style.css.map */