@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap");
/* ---------- reset ---------- */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, time, dl, dt, dd, ol, ul, li, form, table, tbody, thead, tr, th, td, article, aside, figure, figcaption, footer, header, nav, section {
  border: 0;
  font-size: 100%;
  font-style: normal;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

article, aside, footer, header, nav, section, main {
  display: block; }

ol, ul {
  list-style: none; }

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

/* ---------- body ---------- */
body {
  box-sizing: border-box;
  color: #333;
  font-family: "Noto Sans JP";
  font-weight: 400;
  line-height: 1; }
  body a {
    color: #333; }

img {
  height: auto;
  max-width: 100%;
  vertical-align: top; }

p {
  font-size: 0.9375rem;
  letter-spacing: 0.1rem;
  line-height: 1.8;
  padding: 0 0 20px; }
  @media only screen and (max-width: 640px) {
    p {
      font-size: 0.875rem;
      letter-spacing: 0.05rem; } }
  p em.marker {
    background-color: rgba(255, 204, 0, 0.3);
    font-weight: 500; }

/* ---------- header ---------- */
.header {
  align-items: flex-end;
  box-sizing: border-box;
  display: flex;
  transition: top .5s, padding .5s, background-color .5s;
  width: 100%;
  z-index: 9999; }
  @media only screen and (min-width: 961px) {
    .header {
      padding: 50px 30px 0 40px;
      position: fixed;
      top: -100px; }
      .load .header {
        top: 0; }
      .scroll .header {
        background-color: #fff;
        padding: 25px 30px 25px 40px; } }
  @media only screen and (max-width: 960px) {
    .header {
      opacity: 0;
      padding: 30px 0 30px 25px;
      position: static;
      transition: opacity .5s; }
      .load .header {
        opacity: 1; } }
  @media only screen and (max-width: 640px) {
    .header {
      padding: 20px 0 20px 20px; } }
  .header p.logo {
    line-height: 1;
    padding: 0; }
    .header p.logo a {
      display: block;
      text-decoration: none; }
      .header p.logo a strong {
        display: block;
        font-size: 0.9375rem;
        font-weight: 400; }
        @media only screen and (max-width: 640px) {
          .header p.logo a strong {
            font-size: 0.875rem; } }
      .header p.logo a em {
        display: block;
        font-size: 0.8125rem;
        padding: 10px 0 0; }
        @media only screen and (max-width: 640px) {
          .header p.logo a em {
            font-size: 0.75rem; } }
        .header p.logo a em span {
          font-family: "Roboto";
          font-size: 1.75rem; }
          @media only screen and (max-width: 640px) {
            .header p.logo a em span {
              font-size: 1.5rem; } }
  .header p.menu {
    display: none; }
    @media only screen and (max-width: 960px) {
      .header p.menu {
        aspect-ratio: 1 / 1;
        background: linear-gradient(-45deg, #0059B2, #00D9D9);
        border-radius: 9999px;
        box-sizing: border-box;
        display: block;
        padding: 0;
        position: fixed;
        right: 20px;
        top: 20px;
        width: 64px;
        z-index: 9999; } }
  @media only screen and (max-width: 960px) and (max-width: 640px) {
    .header p.menu {
      width: 48px; } }
    @media only screen and (max-width: 960px) {
        .header p.menu > span {
          display: block;
          height: 22%;
          margin: 39% 0 0 20%;
          position: relative;
          width: 60%; }
          .header p.menu > span span {
            background: #fff;
            display: block;
            height: 1px;
            left: 0;
            position: absolute;
            transition: all .3s;
            width: 100%; }
            .header p.menu > span span:nth-of-type(1) {
              top: 0; }
              .nav-open .header p.menu > span span:nth-of-type(1) {
                transform: translateY(6px) rotate(-30deg); } }
          @media only screen and (max-width: 960px) and (max-width: 640px) {
            .nav-open .header p.menu > span span:nth-of-type(1) {
              transform: translateY(4.5px) rotate(-30deg); } }
    @media only screen and (max-width: 960px) {
            .header p.menu > span span:nth-of-type(2) {
              bottom: 0; }
              .nav-open .header p.menu > span span:nth-of-type(2) {
                transform: translateY(-6px) rotate(30deg); } }
          @media only screen and (max-width: 960px) and (max-width: 640px) {
            .nav-open .header p.menu > span span:nth-of-type(2) {
              transform: translateY(-4.5px) rotate(30deg); } }

  .header nav {
    align-items: center;
    display: flex;
    gap: 0 30px;
    margin: 0 0 0 auto; }
    @media only screen and (max-width: 960px) {
      .header nav {
        background-color: #fff;
        box-sizing: border-box;
        display: none;
        height: 100%;
        padding: 30px 25px 0;
        position: fixed;
        right: 0;
        top: 0;
        transition: all .3s;
        width: 100%;
        z-index: 999; } }
    @media only screen and (max-width: 640px) {
      .header nav {
        padding: 20px 20px 0; } }
    .header nav p.logo {
      display: none; }
      @media only screen and (max-width: 960px) {
        .header nav p.logo {
          display: block;
          padding: 0 0 30px; } }
      @media only screen and (max-width: 640px) {
        .header nav p.logo {
          padding: 0 0 20px; } }
    .header nav ul.global {
      align-items: center;
      display: flex;
      gap: 0 25px; }
      @media only screen and (max-width: 960px) {
        .header nav ul.global {
          border-top: 1px #ddd dotted;
          display: block;
          width: 100%; } }
      @media only screen and (max-width: 960px) {
        .header nav ul.global > li {
          border-bottom: 1px #ddd dotted;
          display: flex;
          font-size: 0.9375rem;
          gap: 0 15px;
          padding: 20px 0; } }
      .header nav ul.global > li.sp {
        display: none; }
        @media only screen and (max-width: 960px) {
          .header nav ul.global > li.sp {
            display: block; } }
      .header nav ul.global > li a {
        display: block;
        font-weight: 500;
        letter-spacing: 0.05rem;
        text-decoration: none; }
      .header nav ul.global > li ul {
        display: none; }
        @media only screen and (max-width: 960px) {
          .header nav ul.global > li ul {
            display: flex;
            flex-direction: column;
            gap: 15px 0; }
            .header nav ul.global > li ul li a {
              align-items: center;
              display: flex;
              font-weight: 400;
              gap: 0 15px; }
              .header nav ul.global > li ul li a::before {
                background-color: #333;
                content: "";
                display: block;
                height: 1px;
                width: 8px; } }
    .header nav p.contact {
      font-size: 1rem;
      padding: 0; }
      @media only screen and (max-width: 960px) {
        .header nav p.contact {
          box-sizing: border-box;
          margin: 0 auto 0 0;
          padding: 40px 0 0;
          text-align: center; } }
      .header nav p.contact a {
        background: linear-gradient(90deg, #00D9D9, #0059B2);
        border-radius: 9999px;
        color: #fff;
        display: block;
        letter-spacing: 0.1rem;
        padding: 8px 30px;
        text-decoration: none; }
        @media only screen and (max-width: 960px) {
          .header nav p.contact a {
            display: inline-block;
            text-align: center; } }

/* ---------- footer ---------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0 60px; }
  .footer .footer-contact {
    background-image: url("../img/base/contact.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    margin: 0 0 60px;
    padding: 50px 0 60px;
    position: relative;
    text-align: center;
    z-index: 0;
    width: 100%; }
    .footer .footer-contact::after {
      background: linear-gradient(-45deg, #0059B2, #00D9D9);
      content: "";
      left: 0;
      opacity: 0.8;
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: -1; }
    .footer .footer-contact p {
      padding: 0 20px 25px; }
      @media only screen and (max-width: 640px) {
        .footer .footer-contact p {
          text-align: left; } }
    .footer .footer-contact p.title {
      text-align: center; }
      .footer .footer-contact p.title::before {
        content: attr(data-en);
        font-size: 1.75rem;
        display: block; }
    .footer .footer-contact ul {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 20px 30px;
      justify-content: center;
      padding: 5px 0 0; }
      @media only screen and (max-width: 640px) {
        .footer .footer-contact ul {
          gap: 20px 15px; } }
      .footer .footer-contact ul li a {
        color: #fff;
        display: block;
        letter-spacing: 0.05rem;
        text-decoration: none; }
        @media only screen and (max-width: 640px) {
          .footer .footer-contact ul li a {
            letter-spacing: 0; } }
      .footer .footer-contact ul li:nth-child(1) a {
        background-image: url("../img/base/phone.svg");
        background-position: 0 4px;
        background-repeat: no-repeat;
        background-size: auto auto;
        font-size: 1.375rem;
        padding: 0 0 0 23px; }
        @media only screen and (max-width: 640px) {
          .footer .footer-contact ul li:nth-child(1) a {
            background-position: 0 3px;
            background-size: 14px auto;
            font-size: 1.25rem;
            padding: 0 0 0 18px; } }
      .footer .footer-contact ul li:nth-child(2) a {
        border: #fff 1px solid;
        border-radius: 9999px;
        font-weight: 500;
        padding: 10px 15px; }
        @media only screen and (max-width: 640px) {
          .footer .footer-contact ul li:nth-child(2) a {
            font-size: 0.875rem;
            padding: 8px 10px; } }
  .footer .footer-address {
    padding: 0 0 0 50px; }
    @media only screen and (max-width: 960px) {
      .footer .footer-address {
        padding: 0 0 0 25px; } }
    @media only screen and (max-width: 640px) {
      .footer .footer-address {
        padding: 0 0 0 20px; } }
    .footer .footer-address p.logo {
      border-bottom: #eee 1px solid;
      line-height: 1;
      margin: 0 0 20px;
      padding: 0 0 20px; }
      .footer .footer-address p.logo a {
        display: block;
        text-decoration: none; }
        .footer .footer-address p.logo a strong {
          display: block;
          font-size: 0.9375rem;
          font-weight: 400; }
          @media only screen and (max-width: 640px) {
            .footer .footer-address p.logo a strong {
              font-size: 0.875rem; } }
        .footer .footer-address p.logo a em {
          display: block;
          font-size: 0.8125rem;
          padding: 10px 0 0; }
          @media only screen and (max-width: 640px) {
            .footer .footer-address p.logo a em {
              font-size: 0.75rem; } }
          .footer .footer-address p.logo a em span {
            font-family: "Roboto";
            font-size: 1.75rem; }
            @media only screen and (max-width: 640px) {
              .footer .footer-address p.logo a em span {
                font-size: 1.5rem; } }
    .footer .footer-address p.copy {
      font-family: "Roboto";
      font-size: 0.8rem;
      padding: 40px 0 0;
      width: 100%; }
      @media only screen and (max-width: 640px) {
        .footer .footer-address p.copy {
          font-size: 0.75rem; } }
  .footer .footer-nav {
    display: flex;
    gap: 0 50px;
    padding: 0 50px 0 0; }
    @media only screen and (max-width: 960px) {
      .footer .footer-nav {
        padding: 0 25px 0 0; } }
    @media only screen and (max-width: 768px) {
      .footer .footer-nav {
        display: none; } }
    .footer .footer-nav ul li {
      margin: 0 0 20px; }
      .footer .footer-nav ul li a {
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.1rem;
        text-decoration: none; }
      .footer .footer-nav ul li ul {
        padding: 5px 0; }
        .footer .footer-nav ul li ul li {
          margin: 15px 0 0; }
          .footer .footer-nav ul li ul li a {
            align-items: center;
            display: flex;
            font-size: 0.8125rem;
            font-weight: 400;
            gap: 0 8px; }
            .footer .footer-nav ul li ul li a::before {
              background-color: #FFCC00;
              content: "";
              display: block;
              height: 2px;
              width: 8px; }

dl.address {
  font-weight: 500;
  letter-spacing: 0.05rem;
  padding: 0 0 20px;
  white-space: nowrap; }
  @media only screen and (max-width: 640px) {
    dl.address {
      white-space: normal; } }
  dl.address div {
    padding: 10px 0 0; }
    dl.address div:first-child {
      padding: 0; }
  dl.address div.jp dt {
    display: none; }
  dl.address div.jp dd {
    font-size: 0.875rem;
    line-height: 1.8; }
    @media only screen and (max-width: 640px) {
      dl.address div.jp dd {
        font-size: 0.8125rem; } }
  dl.address div.en {
    align-items: center;
    display: flex;
    font-family: "Roboto";
    gap: 0 10px;
    padding: 15px 0 0; }
    dl.address div.en dt {
      font-size: 0.75rem; }
    dl.address div.en dd {
      font-size: 0.9375rem; }
      dl.address div.en dd a {
        text-decoration: none; }

/* ---------- main ---------- */
.main {
  opacity: 0;
  transition: opacity .5s .5s; }
  .load .main {
    opacity: 1; }

.main-header {
  padding: 180px 0 100px; }
  @media only screen and (max-width: 1280px) {
    .main-header {
      padding: 170px 0 100px; } }
  @media only screen and (max-width: 960px) {
    .main-header {
      padding: 70px 0 100px; } }
  @media only screen and (max-width: 640px) {
    .main-header {
      overflow: hidden;
      padding: 30px 0 70px;
      position: relative; } }
  .main-header::after {
    animation: x-scroll ease;
    animation-timeline: scroll();
    content: attr(data-en);
    font-family: "Roboto";
    font-size: 12.5rem;
    opacity: 0.05;
    position: absolute;
    right: 20px;
    top: 180px;
    white-space: nowrap;
    z-index: -1; }
    @media only screen and (max-width: 1280px) {
      .main-header::after {
        font-size: 11rem; } }
    @media only screen and (max-width: 960px) {
      .main-header::after {
        font-size: 10rem; } }
    @media only screen and (max-width: 640px) {
      .main-header::after {
        left: 20px;
        font-size: 5rem;
        right: auto;
        top: 70px; } }
    #service .main-header::after {
      color: #FFCC00;
      opacity: 0.1; }
    #recruit .main-header::after {
      color: #0059B2; }
    #company .main-header::after {
      color: #EA5F46; }
  .main-header nav {
    padding: 0 0 80px; }
    @media only screen and (max-width: 1280px) {
      .main-header nav {
        padding: 0 0 70px; } }
    @media only screen and (max-width: 640px) {
      .main-header nav {
        padding: 0 0 35px; } }
    .main-header nav ul {
      display: flex;
      color: #999;
      padding: 0 0 0 5%; }
      @media only screen and (max-width: 640px) {
        .main-header nav ul {
          padding: 0 0 0 25px; } }
      @media only screen and (max-width: 640px) {
        .main-header nav ul li {
          font-size: 0.75rem; } }
      .main-header nav ul li a {
        color: #999;
        text-align: center;
        text-decoration: none; }
        .main-header nav ul li a::after {
          content: " ｜ "; }
  .main-header h1 {
    font-size: 2.125rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    padding: 0 0 0 5%;
    position: relative; }
    @media only screen and (max-width: 640px) {
      .main-header h1 {
        font-size: 1.625rem;
        padding: 0 0 0 25px; } }
    .main-header h1::before {
      content: attr(data-en);
      display: block;
      font-family: "Roboto";
      font-size: 1.5rem;
      padding: 0 0 30px 30px; }
      @media only screen and (max-width: 640px) {
        .main-header h1::before {
          font-size: 1.25rem;
          padding: 0 0 20px 25px; } }
      #service .main-header h1::before {
        color: #FFCC00; }
      #recruit .main-header h1::before {
        color: #0059B2; }
      #company .main-header h1::before {
        color: #EA5F46; }
    .main-header h1::after {
      background-color: #333;
      content: "";
      height: 2px;
      left: 0;
      position: absolute;
      top: 10px;
      width: calc(5% + 11px); }
      @media only screen and (max-width: 640px) {
        .main-header h1::after {
          top: 8px;
          width: 34px; } }
      #service .main-header h1::after {
        background-color: #FFCC00; }
      #recruit .main-header h1::after {
        background-color: #0059B2; }
      #company .main-header h1::after {
        background-color: #EA5F46; }
    .main-header h1 span {
      display: block; }
      .main-header h1 span::before, .main-header h1 span::after {
        aspect-ratio: 1 / 1;
        border-radius: 9999px;
        content: "";
        left: 5%;
        position: absolute;
        top: 0; }
        @media only screen and (max-width: 640px) {
          .main-header h1 span::before, .main-header h1 span::after {
            left: 25px; } }
      .main-header h1 span::before {
        background-color: #333;
        width: 22px; }
        @media only screen and (max-width: 640px) {
          .main-header h1 span::before {
            width: 18px; } }
        #service .main-header h1 span::before {
          background-color: #FFCC00; }
        #recruit .main-header h1 span::before {
          background-color: #0059B2; }
        #company .main-header h1 span::before {
          background-color: #EA5F46; }
      .main-header h1 span::after {
        border: #fff 3px solid;
        box-sizing: border-box;
        margin: 2px 0 0 2px;
        width: 18px; }
        @media only screen and (max-width: 640px) {
          .main-header h1 span::after {
            width: 14px; } }

@keyframes x-scroll {
  0% {
    transform: translateX(0); }
  70% {
    opacity: 0; }
  100% {
    opacity: 0;
    transform: translateX(-40vw); } }
.section {
  margin: 0 auto;
  max-width: 1120px;
  padding: 0 50px 80px; }
  @media only screen and (max-width: 640px) {
    .section {
      padding: 0 25px 50px; } }
  .section-inner {
    padding: 50px 0 0; }
    @media only screen and (max-width: 640px) {
      .section-inner {
        padding: 30px 0 0; } }

/* ---------- title ---------- */
.title_l {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.8;
  padding: 0 0 25px;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .title_l {
      font-size: 1.275rem;
      letter-spacing: 0.05rem;
      padding: 0 0 20px; } }
  .title_l::before {
    content: attr(data-en);
    display: block;
    font-family: "Roboto";
    font-size: 1.125rem;
    line-height: 1;
    padding: 1px 0 15px 30px; }
    @media only screen and (max-width: 640px) {
      .title_l::before {
        font-size: 0.9375rem;
        padding: 1px 0 10px 25px; } }
    #information .title_l::before {
      color: #1EC0B4; }
    #company .title_l::before {
      color: #EA5F46; }
    #recruit .title_l::before {
      color: #0059B2; }
    #service .title_l::before {
      color: #FFCC00; }
    #home #service .title_l::before {
      padding: 35px 0 20px; }
      @media only screen and (max-width: 640px) {
        #home #service .title_l::before {
          padding: 30px 0 15px; } }
  .title_l span {
    display: block; }
    .title_l span::before, .title_l span::after {
      aspect-ratio: 1 / 1;
      border-radius: 9999px;
      content: "";
      left: 0;
      position: absolute;
      top: 0; }
      #home #service .title_l span::before, #home #service .title_l span::after {
        left: calc(50% - 10px); }
    .title_l span::before, .title_l span::after {
      background-color: #333; }
      #information .title_l span::before, #information .title_l span::after {
        background-color: #1EC0B4; }
      #company .title_l span::before, #company .title_l span::after {
        background-color: #EA5F46; }
      #recruit .title_l span::before, #recruit .title_l span::after {
        background-color: #0059B2; }
      #service .title_l span::before, #service .title_l span::after {
        background-color: #FFCC00; }
    .title_l span::before {
      opacity: 0.4;
      width: 20px; }
      @media only screen and (max-width: 640px) {
        .title_l span::before {
          width: 16px; } }
    .title_l span::after {
      box-sizing: border-box;
      margin: 4px;
      width: 12px; }
      @media only screen and (max-width: 640px) {
        .title_l span::after {
          width: 8px; } }
    .title_l span em {
      display: block;
      font-size: 1.125rem; }

.title_m {
  font-size: 1.375rem;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  padding: 0 0 25px 30px;
  position: relative; }
  @media only screen and (max-width: 640px) {
    .title_m {
      font-size: 1.125rem;
      letter-spacing: 0.05rem;
      padding: 0 0 25px 25px; } }
  .title_m::before, .title_m::after {
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    box-sizing: border-box;
    content: "";
    left: 0;
    position: absolute;
    top: 8px; }
  .title_m::before {
    background-color: #333;
    width: 20px; }
    @media only screen and (max-width: 640px) {
      .title_m::before {
        width: 16px; } }
    #company .title_m::before {
      background-color: #EA5F46; }
    #recruit .title_m::before {
      background-color: #0059B2; }
    #service .title_m::before {
      background-color: #FFCC00; }
  .title_m::after {
    border: #fff 3px solid;
    margin: 1px 0 0 1px;
    width: 18px; }
    @media only screen and (max-width: 640px) {
      .title_m::after {
        width: 14px; } }
  .title_m span {
    display: inline-block;
    font-size: 1.125rem;
    padding: 10px 0 0; }

.title_s {
  border-bottom: #eee 1px solid;
  font-size: 1.125rem;
  letter-spacing: 0.1rem;
  line-height: 1.6;
  margin: 0 0 20px;
  padding: 0 0 20px; }
  @media only screen and (max-width: 640px) {
    .title_s {
      font-size: 1rem;
      letter-spacing: 0.05rem; } }

/* ---------- list ---------- */
.decimal {
  font-size: 0.9375rem;
  letter-spacing: 0.05rem;
  line-height: 1.8;
  list-style: decimal;
  margin: 0 0 0 20px;
  padding: 0 0 10px; }
  @media only screen and (max-width: 640px) {
    .decimal {
      font-size: 0.875rem;
      letter-spacing: 0.02rem; } }
  .decimal > li {
    padding: 0 0 10px; }
    .decimal > li ul {
      padding: 0; }
      .decimal > li ul li {
        margin: 10px 0 0;
        padding: 0 0 0 25px; }

.disc {
  font-size: 0.9375rem;
  letter-spacing: 0.05rem;
  line-height: 1.8;
  padding: 0 0 10px; }
  @media only screen and (max-width: 640px) {
    .disc {
      font-size: 0.875rem;
      letter-spacing: 0.02rem; } }
  .disc li {
    padding: 0 0 10px 25px;
    position: relative; }
    .disc li::before {
      background-color: #333;
      border-radius: 9999px;
      content: "";
      height: 6px;
      left: 8px;
      position: absolute;
      top: 11px;
      width: 6px; }
      #company .disc li::before {
        background-color: #EA5F46; }
      #recruit .disc li::before {
        background-color: #0059B2; }
      #service .disc li::before {
        background-color: #FFCC00; }

/* ---------- detail ---------- */
p.detail {
  padding: 20px 0; }
  @media only screen and (max-width: 640px) {
    p.detail {
      padding: 10px 0 20px; } }
  p.detail a {
    border: #333 1px solid;
    border-radius: 3px;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    padding: 5px 75px 5px 15px;
    position: relative;
    text-decoration: none; }
    @media only screen and (max-width: 640px) {
      p.detail a {
        font-size: 0.875rem;
        padding: 3px 75px 3px 15px; } }
    p.detail a::after {
      background-color: #333;
      content: "";
      height: 1px;
      position: absolute;
      right: 15px;
      top: 50%;
      width: 50px; }
    @media (hover) {
      p.detail a:hover::after {
        animation: detail ease 1s infinite; } }
    @media (hover: none) {
      p.detail a::after {
        animation: detail ease 1s infinite; } }
  p.detail._back a {
    padding: 5px 15px 5px 75px; }
    p.detail._back a::after {
      left: 15px;
      right: auto; }
    @media (hover) {
      p.detail._back a:hover::after {
        animation: detail-back ease 1s infinite; } }
    @media (hover: none) {
      p.detail._back a::after {
        animation: detail-back ease 1s infinite; } }

@keyframes detail {
  0% {
    right: 15px;
    width: 50px; }
  50% {
    right: 15px;
    width: 0; }
  51% {
    right: 65px;
    width: 0; }
  100% {
    right: 15px;
    width: 50px; } }
@keyframes detail-back {
  0% {
    left: 15px;
    width: 50px; }
  50% {
    left: 15px;
    width: 0; }
  51% {
    left: 65px;
    width: 0; }
  100% {
    left: 15px;
    width: 50px; } }
/* ---------- slider ---------- */
#slider {
  margin: 0 0 50px; }
  #slider li {
    background-repeat: repeat;
    background-size: cover;
    height: 100vh; }
    @media only screen and (max-width: 640px) {
      #slider li {
        height: 320px; } }
    #slider li:nth-child(1) {
      background-image: url("../img/home/about.jpg");
      background-position: center center; }
      @media only screen and (max-width: 1280px) {
        #slider li:nth-child(1) {
          background-position: 20% center; } }
      @media only screen and (max-width: 640px) {
        #slider li:nth-child(1) {
          background-position: 30% bottom; } }
      #slider li:nth-child(1) p.en {
        color: #EA5F46; }
      #slider li:nth-child(1) p.link svg circle {
        stroke: #EA5F46; }
      #slider li:nth-child(1) p.link a::after {
        background-color: #EA5F46; }
    #slider li:nth-child(2) {
      background-image: url("../img/home/service.jpg");
      background-position: center 0; }
      @media only screen and (max-width: 1280px) {
        #slider li:nth-child(2) {
          background-position: 40% center; } }
      @media only screen and (max-width: 640px) {
        #slider li:nth-child(2) {
          background-position: right 10% center; } }
      #slider li:nth-child(2) p.en {
        color: #FFCC00; }
      #slider li:nth-child(2) p.link svg circle {
        stroke: #FFCC00; }
      #slider li:nth-child(2) p.link a::after {
        background-color: #FFCC00; }
    #slider li div {
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      padding: 0 0 0 5%; }
      @media only screen and (max-width: 640px) {
        #slider li div {
          justify-content: flex-end; } }
      #slider li div p.en {
        font-family: "Roboto";
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 1; }
        @media only screen and (max-width: 640px) {
          #slider li div p.en {
            font-size: 1rem;
            padding: 0 0 10px; } }
        #slider li div p.en::before {
          content: attr(data-num);
          font-size: 3.125rem;
          font-weight: 500;
          padding: 0 10px 0 0; }
          @media only screen and (max-width: 640px) {
            #slider li div p.en::before {
              font-size: 1.5rem;
              padding: 0 5px 0 0; } }
      #slider li div p.jp {
        font-size: 3.125rem;
        font-weight: 400;
        line-height: 1.5; }
        @media only screen and (max-width: 640px) {
          #slider li div p.jp {
            font-size: 1.25rem;
            padding: 0 0 15px; } }
      #slider li div p.link {
        padding: 20px 0 0;
        position: relative;
        z-index: 0; }
        @media only screen and (max-width: 640px) {
          #slider li div p.link {
            padding: 0 0 30px; } }
        #slider li div p.link svg {
          display: block;
          left: 0;
          position: absolute;
          top: 0;
          width: 60px;
          z-index: -1; }
          #slider li div p.link svg circle {
            fill: none;
            stroke-width: 2px;
            stroke-dasharray: 314;
            opacity: 0; }
        @media (hover) {
          #slider li div p.link {
            padding: 0; }
            #slider li div p.link:hover svg circle {
              animation: circle ease 1s forwards; } }
        #slider li div p.link a {
          display: block;
          font-size: 1rem;
          font-weight: 700;
          position: relative;
          text-decoration: none; }
          @media only screen and (max-width: 640px) {
            #slider li div p.link a {
              font-size: 0.75rem; } }
          #slider li div p.link a::after {
            content: "";
            height: 1px;
            position: absolute;
            width: 0; }
          @media (hover) {
            #slider li div p.link a {
              line-height: 60px;
              transition: padding 1s; }
              #slider li div p.link a::after {
                margin: 0 0 0 10px;
                top: 50%;
                transition: width 1s; }
              #slider li div p.link a:hover {
                padding: 0 0 0 20px; }
                #slider li div p.link a:hover::after {
                  width: 50px; } }
          @media (hover: none) {
            #slider li div p.link a::after {
              animation: border ease 1s 1s forwards;
              bottom: 0;
              right: 100%; } }

@keyframes circle {
  from {
    opacity: 0;
    stroke-dashoffset: 314; }
  to {
    opacity: 1;
    stroke-dashoffset: 0; } }
@keyframes border {
  0% {
    right: 100%;
    width: 0; }
  100% {
    right: 0;
    width: 100%; } }
/* ---------- service ---------- */
#home #service {
  background-image: url("../img/home/service.svg");
  background-position: center 0;
  background-repeat: no-repeat;
  padding: 50px 50px 80px;
  text-align: center; }
  @media only screen and (max-width: 960px) {
    #home #service {
      padding: 50px; } }
  @media only screen and (max-width: 640px) {
    #home #service {
      padding: 50px 25px; } }
  @media only screen and (max-width: 768px) {
    #home #service > p {
      text-align: left; }
      #home #service > p br {
        display: none; } }
  #home #service ul.service-list {
    grid-template-columns: repeat(6, 1fr); }
    @media only screen and (max-width: 1280px) {
      #home #service ul.service-list {
        grid-template-columns: repeat(3, 1fr); } }
    @media only screen and (max-width: 960px) {
      #home #service ul.service-list {
        grid-template-columns: repeat(2, 1fr); }
        #home #service ul.service-list li {
          min-height: 200px; } }

ul.service-list {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  padding: 30px 0 20px; }
  @media only screen and (max-width: 960px) {
    ul.service-list {
      grid-template-columns: repeat(2, 1fr);
      padding: 15px 0 20px; } }
  ul.service-list li {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      ul.service-list li {
        min-height: 240px; } }
    ul.service-list li:nth-child(1) {
      background-image: url("../img/home/procedure.jpg"); }
    ul.service-list li:nth-child(2) {
      background-image: url("../img/home/salary.jpg"); }
    ul.service-list li:nth-child(3) {
      background-image: url("../img/home/consultation.jpg"); }
    ul.service-list li:nth-child(4) {
      background-image: url("../img/home/document.jpg"); }
    ul.service-list li:nth-child(5) {
      background-image: url("../img/home/system.jpg"); }
    ul.service-list li:nth-child(6) {
      background-image: url("../img/home/subsidy.jpg"); }
    ul.service-list li a {
      background-color: rgba(51, 51, 51, 0.65);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0 10px;
      text-decoration: none;
      transition: background-color .5s; }
      ul.service-list li a p.title {
        color: #fff;
        font-weight: 500;
        letter-spacing: 0.05rem;
        line-height: 1.4;
        font-size: 1.25rem;
        padding: 40px 0 0; }
        @media only screen and (max-width: 640px) {
          ul.service-list li a p.title {
            font-size: 0.875rem;
            padding: 30px 0 20px; } }
        ul.service-list li a p.title::before {
          content: attr(data-en);
          color: #FFCC00;
          display: block;
          font-family: "Roboto";
          font-size: 0.875rem;
          font-weight: 700;
          padding: 0 0 5px; }
      ul.service-list li a p.text {
        color: #fff;
        font-size: 0.75rem;
        line-height: 1.6;
        margin: auto auto 0;
        max-width: 200px;
        padding: 0 10px 20px;
        text-align: left; }
        @media only screen and (max-width: 768px) {
          ul.service-list li a p.text {
            font-size: 0.6875rem;
            padding: 0 5px 15px; } }
      ul.service-list li a p.more {
        color: #FFCC00;
        font-family: "Roboto";
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1;
        padding: 20px 0 25px;
        position: relative;
        transition: padding .5s .15s; }
        #home ul.service-list li a p.more {
          margin: auto 0 0; }
        ul.service-list li a p.more::before {
          background-color: #FFCC00;
          content: "";
          left: calc(50% - 0.5px);
          height: 0;
          position: absolute;
          top: 10px;
          transition: height .5s .15s;
          width: 1px; }
        ul.service-list li a p.more span {
          padding: 0 0 0; }
          ul.service-list li a p.more span::before, ul.service-list li a p.more span::after {
            aspect-ratio: 1 / 1;
            border-radius: 9999px;
            box-sizing: border-box;
            content: "";
            left: calc(50% - 7px);
            position: absolute;
            top: 0; }
          ul.service-list li a p.more span::before {
            border: #FFCC00 1px solid;
            width: 14px; }
          ul.service-list li a p.more span::after {
            background-color: #FFCC00;
            margin: 3px;
            opacity: 0;
            transition: opacity .5s;
            width: 8px; }
      @media (hover) {
        ul.service-list li a:hover {
          background-color: rgba(51, 51, 51, 0.9); }
          ul.service-list li a:hover p.more {
            padding: 30px 0 15px; }
            ul.service-list li a:hover p.more::before {
              height: 15px; }
            ul.service-list li a:hover p.more span::after {
              opacity: 1; } }
      @media (hover: none) {
        ul.service-list li a {
          background-color: rgba(51, 51, 51, 0.65); }
          ul.service-list li a p.more {
            padding: 30px 0 15px; }
            ul.service-list li a p.more::before {
              height: 15px; }
            ul.service-list li a p.more span::after {
              opacity: 1; } }

/* ---------- company ---------- */
#company-about {
  align-items: flex-start;
  display: flex;
  max-width: none;
  overflow: hidden; }
  @media only screen and (max-width: 960px) {
    #company-about {
      align-items: flex-start; } }
  #company-about > div {
    margin: 0 0 0 auto;
    max-width: 560px;
    flex: 1; }
    #company-about > div dl div {
      padding: 0 0 40px; }
      #company-about > div dl div:last-child {
        padding: 0 0 10px; }
      #company-about > div dl div dt {
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: 0.05rem;
        padding: 0 0 15px; }
        #company-about > div dl div dt em {
          color: #EA5F46;
          font-family: "Roboto";
          font-size: 0.9375rem;
          font-weight: 400;
          padding: 0 0 0 5px; }
        @media only screen and (max-width: 640px) {
          #company-about > div dl div dt {
            font-size: 0.9375rem; } }
      #company-about > div dl div dd p {
        padding: 0 0 10px; }
        #company-about > div dl div dd p.catch {
          font-weight: 700;
          padding: 0 0 13px; }
      #company-about > div dl div dd ul li {
        padding-bottom: 0; }
  #company-about figure {
    box-sizing: border-box;
    padding: 0 0 0 30px;
    width: 50%; }
    @media only screen and (max-width: 1280px) {
      #company-about figure {
        margin: 0 -100px 0 0;
        width: calc(50% + 100px); } }
    @media only screen and (max-width: 960px) {
      #company-about figure {
        margin: 0 -150px 0 0;
        width: calc(50% + 100px); } }
    @media only screen and (max-width: 640px) {
      #company-about figure {
        display: none; } }
    #company-about figure img {
      max-width: 840px;
      width: 100%; }
  #home #company #company-about {
    align-items: center; }
    #home #company #company-about figure img {
      max-width: 720px; }

/* ---------- information ---------- */
#information {
  display: flex;
  gap: 80px 8%; }
  @media only screen and (max-width: 960px) {
    #information {
      flex-direction: column; } }
  @media only screen and (max-width: 640px) {
    #information {
      gap: 50px 0; } }
  #information #news {
    width: 100%; }
    #information #news ul {
      border-top: #eee 1px solid;
      padding: 0 0 20px; }
      #information #news ul li {
        border-bottom: #eee 1px solid; }
        #information #news ul li a {
          display: block;
          font-size: 0.9375rem;
          line-height: 1.8;
          padding: 15px 0;
          text-decoration: none; }
          #information #news ul li a span {
            color: #1EC0B4;
            font-family: "Roboto";
            font-size: 1rem;
            font-weight: 700;
            display: block;
            padding: 0 0 3px; }
  #information #relation {
    width: 100%; }
    #information #relation p.link a {
      align-items: center;
      background-color: #fafafa;
      color: #1EC0B4;
      display: flex;
      font-family: "Roboto";
      font-size: 1.125rem;
      font-weight: 500;
      justify-content: center;
      line-height: 1;
      gap: 10px 20px;
      padding: 30px 0;
      text-decoration: none; }
      @media only screen and (max-width: 640px) {
        #information #relation p.link a {
          flex-direction: column; } }
      #information #relation p.link a em {
        color: #333;
        font-size: 1.5rem;
        font-weight: 700; }

/* ---------- service-detail ---------- */
#service-detail {
  background-image: url("../img/base/service.svg");
  background-position: right 0;
  background-repeat: no-repeat; }
  @media only screen and (max-width: 640px) {
    #service-detail {
      background-position: right -30px top 0;
      background-size: 280px auto; } }
  #service-detail .figure {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 50px; }
    #service-detail .figure h2.title_l {
      width: 100%; }
    #service-detail .figure div {
      flex: 1; }
    #service-detail .figure figure {
      max-width: 50%;
      padding: 5px 0 20px;
      text-align: center; }
      #service-detail .figure figure.illust {
        max-width: 60%; }
      @media only screen and (max-width: 960px) {
        #service-detail .figure figure {
          max-width: none !important; } }
  #service-detail ul.life-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 0 20px; }
    @media only screen and (max-width: 640px) {
      #service-detail ul.life-list {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr); } }
    #service-detail ul.life-list li a {
      border: #ddd 1px solid;
      display: block;
      padding: 10px;
      text-align: center; }
  #service-detail .service-detail_insurance {
    display: grid;
    gap: 0 60px;
    grid-template-columns: repeat(2, 1fr); }
    @media only screen and (max-width: 768px) {
      #service-detail .service-detail_insurance {
        grid-template-columns: repeat(1, 1fr); } }
  #service-detail .insurance-list {
    display: flex;
    gap: 20px;
    padding: 10px 0 20px; }
    @media only screen and (max-width: 768px) {
      #service-detail .insurance-list {
        flex-wrap: wrap; } }
    #service-detail .insurance-list li {
      width: 100%; }
      #service-detail .insurance-list li a,
      #service-detail .insurance-list li em {
        border: #ddd 1px solid;
        cursor: pointer;
        display: block;
        padding: 10px 0;
        text-align: center; }
      #service-detail .insurance-list li span {
        display: block;
        font-size: 0.875rem;
        line-height: 1.7;
        padding: 10px 0 0;
        text-align: center; }
        #service-detail .insurance-list li span.small {
          font-size: 0.75rem;
          padding: 5px 0 0;
          text-align: left; }

/* ---------- guidelines ---------- */
#recruit-guidelines table {
  border-top: #ccc 1px dotted;
  margin: 0 0 20px;
  width: 100%; }
  #recruit-guidelines table tbody tr {
    border-bottom: #ccc 1px dotted; }
    #recruit-guidelines table tbody tr th {
      color: #0059B2;
      font-size: 0.9375rem;
      line-height: 1.8;
      text-align: left;
      padding: 15px 0 0;
      vertical-align: top;
      white-space: nowrap;
      width: 10rem; }
      @media only screen and (max-width: 640px) {
        #recruit-guidelines table tbody tr th {
          display: block;
          font-size: 0.875rem; } }
    #recruit-guidelines table tbody tr td {
      padding: 15px 0 0; }
      @media only screen and (max-width: 640px) {
        #recruit-guidelines table tbody tr td {
          display: block;
          padding: 5px 0 0; } }
      #recruit-guidelines table tbody tr td p {
        padding: 0 0 15px; }

/* ---------- greeting ---------- */
#company-greeting p.policy {
  align-items: center;
  background-color: #fafafa;
  display: flex;
  font-family: "Roboto";
  font-size: 2rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  margin: 0 0 25px;
  gap: 10px 20px;
  padding: 30px 0;
  position: relative;
  z-index: -1; }
  @media only screen and (max-width: 640px) {
    #company-greeting p.policy {
      flex-direction: column;
      font-size: 1.75rem; } }
  #company-greeting p.policy span {
    color: #EA5F46;
    font-size: 1.25rem; }

/* ---------- outline ---------- */
#company-outline div {
  display: flex;
  gap: 20px 50px;
  padding: 15px 0 0; }
  @media only screen and (max-width: 960px) {
    #company-outline div {
      flex-direction: column; } }
  #company-outline div table {
    border-top: #ccc 1px dotted;
    flex: 1;
    margin: 0 0 20px; }
    #company-outline div table tbody tr {
      border-bottom: #ccc 1px dotted; }
      #company-outline div table tbody tr th {
        color: #EA5F46;
        font-size: 0.9375rem;
        line-height: 1.8;
        text-align: left;
        padding: 15px 0 0;
        vertical-align: top;
        white-space: nowrap;
        width: 6rem; }
        @media only screen and (max-width: 640px) {
          #company-outline div table tbody tr th {
            display: block;
            font-size: 0.875rem; } }
      #company-outline div table tbody tr td {
        padding: 15px 0 0; }
        @media only screen and (max-width: 640px) {
          #company-outline div table tbody tr td {
            display: block;
            padding: 5px 0 0; } }
        #company-outline div table tbody tr td p {
          padding: 0 0 15px; }
  #company-outline div figure {
    padding: 0 0 20px;
    max-width: 500px; }
    @media only screen and (max-width: 1280px) {
      #company-outline div figure {
        max-width: 400px; } }
    @media only screen and (max-width: 960px) {
      #company-outline div figure {
        max-width: none;
        text-align: center; } }

/* ---------- history ---------- */
#company-history dl {
  border-top: #ccc 1px dotted;
  flex: 1;
  margin: 0 0 20px; }
  #company-history dl div {
    border-bottom: #ccc 1px dotted;
    display: flex;
    font-size: 0.9375rem;
    line-height: 1.8;
    padding: 15px 0; }
    @media only screen and (max-width: 640px) {
      #company-history dl div {
        font-size: 0.875rem; } }
    #company-history dl div dt {
      color: #EA5F46;
      font-weight: 700;
      letter-spacing: 0.05rem;
      white-space: nowrap;
      width: 6rem; }
    #company-history dl div dd {
      flex: 1; }

/* ---------- office ---------- */
.company-office {
  display: flex;
  flex-wrap: wrap;
  gap: 0 50px; }
  .company-office > div {
    flex: 1; }
  .company-office img {
    padding: 0 0 40px;
    max-width: 500px; }
    @media only screen and (max-width: 768px) {
      .company-office img {
        padding: 10px 0 20px;
        width: 100%; } }
  .company-office iframe {
    margin: 0 0 20px;
    width: 100%; }

/* ---------- contact ---------- */
#contact table {
  border-top: #ccc 1px dotted;
  margin: 15px 0 20px;
  width: 100%; }
  @media only screen and (max-width: 640px) {
    #contact table {
      margin: 15px -25px 20px;
      width: calc(100% + 50px); } }
  #contact table tbody tr {
    border-bottom: #ccc 1px dotted; }
    #contact table tbody tr.error {
      background-color: #FFCC00; }
    #contact table tbody tr th {
      font-size: 0.9375rem;
      line-height: 1.8;
      padding: 20px 0;
      position: relative;
      text-align: left;
      vertical-align: middle;
      width: 250px; }
      @media only screen and (max-width: 640px) {
        #contact table tbody tr th {
          display: block;
          font-size: 0.875rem;
          padding: 20px 25px 0;
          width: auto; } }
      #contact table tbody tr th em {
        background-color: red;
        border-radius: 3px;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 22px;
        padding: 0 4px;
        position: absolute;
        right: 0;
        top: calc(50% - 11px); }
        @media only screen and (max-width: 640px) {
          #contact table tbody tr th em {
            right: 25px;
            top: 22px; } }
    #contact table tbody tr td {
      padding: 20px 0 0 40px; }
      @media only screen and (max-width: 640px) {
        #contact table tbody tr td {
          display: block;
          padding: 5px 25px 0; } }
      #contact table tbody tr td div.input {
        padding: 0 0 20px; }
        @media only screen and (max-width: 640px) {
          #contact table tbody tr td div.input {
            padding: 10px 0 20px; } }
        #contact table tbody tr td div.input input,
        #contact table tbody tr td div.input textarea {
          border: #aaa 1px solid;
          box-sizing: border-box;
          border-radius: 3px;
          font-size: 1.2rem;
          padding: 10px;
          width: 100%; }
        #contact table tbody tr td div.input textarea {
          height: 100px; }
#contact .button {
  display: flex;
  gap: 0 20px;
  justify-content: center;
  padding: 40px 0 20px; }
  #contact .button button {
    background-color: #333;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 1.1rem;
    font-family: "Noto Sans JP";
    letter-spacing: 0.1rem;
    padding: 7px 20px; }
    #contact .button button.back {
      background-color: #999; }

/* ---------- privacy ---------- */
#privacy dl.privacy > div {
  padding: 20px 0 0; }
  #privacy dl.privacy > div > dt {
    font-weight: 700;
    line-height: 1.8;
    padding: 0 0 20px; }