@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap");

:root {
  font-size: calc(100vw * 16 / 1280); /* 1rem */
  --font-sans-serif: "Noto Sans JP", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --font-serif: serif;
  --color-body: #000;
  --color-link: #0d6efd;
  --padding-container: 1rem;
  --max-width: 68.75rem;
  --max-width-container: calc(var(--max-width) + var(--padding-container) * 2);
  --img-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.16);
}

body {
  font-family: var(--font-sans-serif);
  font-size: max(11px, 0.875rem);
  line-height: 2;
  color: var(--color-body);
}

section {
  display: flow-root;
  position: relative;
}

a:where(:any-link, :hover) {
  color: inherit;
  text-decoration: none;
  transition: opacity ease-out 0.3;
}

a:hover {
  opacity: 0.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd {
  display: flow-root;
  font-family: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}

.my-ajax-loading {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.my-container {
  position: relative;
  max-width: var(--max-width-container);
  margin-inline: auto;
  padding: 0 var(--padding-container);
  &.-sm {
    --max-width: 62.5rem;
    --max-width-container: calc(
      var(--max-width) + var(--padding-container) * 2
    );
    max-width: var(--max-width-container);
  }
}

.my-cols,
.my-rows {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  &.my-rows {
  flex-direction: column;
  }
}

.my-breadcrumb {
  color: #fff;
  padding: 0.625rem 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  li {
    a {
      color: inherit;
    }
  }
  li + li::before {
    content: '＞';
    display: inline-block;
    margin-inline: .5em;
  }
}

.my-title01 {
  font-size: 4.0625rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: rgba(11, 100, 132, 0.3);
  margin-bottom: 5rem;
  strong {
    display: block;
    font-family: var(--font-montserrat);
    font-size: 4.8rem;
    font-style: italic;
    letter-spacing: 0;
    color: var(--color-body);
  }
  &.-c {
    text-align: center;
  }
  &.-r {
    text-align: right;
  }
  &.-w {
    color: rgba(255, 255, 255, 0.3);
  }
}

.my-link01 {
  position: relative;
  display: block;
  max-width: 31.25rem;
  margin-inline: auto;
  color: #fff;
  font-weight: bold;
  font-size: max(11px, 0.875rem);
  line-height: 2.14;
  color: #0b6484;
  margin-top: 3.125rem;
  border-bottom: 1px solid currentColor;
  &::after {
    content: "";
    position: absolute;
    inset: auto 0 0 auto;
    width: max(11px, 0.875rem);
    height: 0;
    border-bottom: 1px solid #0b6484;
    transform: rotate(30deg);
    transform-origin: right bottom;
  }
  &.-w {
    color: #fff;
    border-bottom-color: currentColor;
    &::after {
      border-bottom-color: #fff;
    }
  }
}

.my-link02 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 12.5rem;
  border-radius: 6.25rem;
  max-width: 31.25rem;
  margin-inline: auto;
  background: #00174F;
  color: #fff;
  font-size: max(11px, 1rem);
  font-weight: bold;
  &::before {
    content: '';
    position: absolute;
    inset: 0.3125rem;
    border-radius: 5.9375rem;
    border: 1px solid #fff;
  }
  &::after {
    content: '';
    background: #fff;
    width: 1.8125rem;
    height: 1rem;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin-top: 0.625rem;
  }
  strong {
    font-family: var(--font-montserrat);
    font-size: 3.25rem;
    line-height: 1;
  }
}

.my-table01 {
  width: 100%;
  font-size: 1.125rem;
  tr {
    border-bottom: 1px solid #707070;
  }
  th, td {
    padding: 1em;
  }
  th {
    vertical-align: top;
    font-size: 1.11em;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
  }
}

.my-table02 {
  font-size: max(11px, 1rem);
  color: #fff;
  text-align: left;
  background: rgba(0, 22, 79, 0.5);
  padding-block: 3.125rem;
  table {
    width: 100%;
  }
  th, td {
    font-weight: normal;
    padding: .8em 1.5em;
  }
  tr + tr {
    border-top: 1px solid #fff;
  }
}

.my-table03 {
  background: rgba(255, 255, 255, 0.9);
  padding-block: 3.125rem;
  table {
    width: 100%;
    tr + tr {
      border-top: 1px solid #707070;
    }
    th, td {
      font-size: 1.25rem;
      font-weight: 300;
      vertical-align: top;
      padding-block: .8em;
    }
    th {
      font-weight: 500;
      white-space: nowrap;
      padding-inline: 5em;
    }
    dt {
      font-weight: 500;
    }
  }
}

.my-intro {
  padding-block: 6.5rem 15rem;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  .-title {
    font-weight: 300;
    font-size: 3.125rem;
    margin-bottom: 1em;
  }
  .my-table02 {
    margin-top: 5rem;
  }
}

.my-pictures {
  overflow: hidden;
  figure {
    display: flex;
    align-items: center;
    margin-bottom: 3.125rem;
    img {
      width: 37.5rem;
      box-shadow: var(--img-shadow);
    }
    figcaption {
      position: relative;
      flex: 1;
      display: flex;
      justify-content: end;
      align-items: center;
      min-height: 6.25rem;
      text-align: right;
      background: #fff;
      &::after {
        content: '';
        position: absolute;
        inset: 0 -8.75rem 0 100%;
        background: #fff;
      }
    }
    &:nth-of-type(2n) {
      flex-direction: row-reverse;
      figcaption {
        justify-content: start;
        text-align: left;
        &::after {
          right: 100%;
          left: -8.75rem;
        }
      }
    }
  }
}

.my-scroll {
  display: block;
  overflow: auto;
}

.my-header {
  display: flow-root;
  position: fixed;
  inset: 0 0 auto;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(3px);
  z-index: 10;
  .my-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.46875rem;
    .my-header-logo {
      img {
        display: block;
        width: 14.76563rem;
      }
    }
    .my-header-nav {
      .my-cols {
        column-gap: 4.375rem;
        li {
          a {
            color: var(--color-body);
            font-weight: bold;
          }
        }
      }
    }
    #nav,
    label {
      display: none;
    }
  }
  body:has(#iframe_form) & {
    position: absolute;
  }
}

.my-main {
  display: flow-root;
  position: relative;
  &#home,
  &:has(section#entry) {
    + .my-footer {
      margin-top: -27rem;
    }
  }
}

.my-footer {
  display: flow-root;
  position: relative;
  background: rgba(11, 100, 132, 0.8);
  .my-container {
    padding-block: 3.125rem 6.25rem;
    .my-footer-nav {
      .my-cols {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 4.375rem;
        li {
          a {
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }
    .my-footer-info {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: rgba(255, 255, 255, 0.8);
      margin-top: 4.375rem;
      color: #0b6484;
      font-weight: bold;
      .my-footer-logo {
        img {
          display: block;
          width: 14.76563rem;
        }
      }
      dl {
        display: flex;
        align-items: center;
        column-gap: 3.125rem;
        padding-block: 2.8125rem;
      }
    }
  }
  small {
    display: block;
    background: #003d53;
    color: #fff;
    font-size: max(10px, 0.625rem);
    font-weight: bold;
    text-align: center;
    padding: 0.5rem;
  }
}

#home {
  #company_infomation {
    background: #3590B7 url(../img/home/company_infomation/bg01.jpg?v1) top / 100% no-repeat;
    padding-bottom: 6rem;
    overflow: hidden;
    .-txt01 {
      display: block;
      width: 49.23188rem;
      margin-block: 17.1875rem 16.5625rem;
    }
    dl {
      color: #fff;
      dt {
        font-weight: 500;
        font-size: 2.25rem;
        margin-bottom: 5rem;
      }
      dd {
        .my-cols {
          gap: 6.7rem;
          .-txt {
            width: 31.25rem;
          }
          .-img {
            position: relative;
            flex: 1;
            img {
              position: absolute;
              inset: auto auto 0 0;
              width: 32.9rem;
              box-shadow: var(--img-shadow);
            }
          }
        }
      }
    }
  }
  #our_business {
    padding-block: 12.5rem;
    background: #E1EEF4;
    overflow: hidden;
    > .my-container {
      .my-title01 {
        position: absolute;
        inset: 0 0 auto auto;
        z-index: 2;
      }
      > .my-container {
        > .my-cols {
          gap: 2.5rem;
          .-img {
            position: relative;
            flex: 1;
            height: 31.25rem;
            img {
              position: absolute;
              inset: 0 0 auto auto;
              width: auto;
              height: 100%;
              box-shadow: var(--img-shadow);
            }
          }
          .-txt {
            position: relative;
            width: 21.875rem;
            padding-top: 13.75rem;
            color: #0B6484;
            .my-link01 {
              position: absolute;
              inset: auto 0 0 0;
            }
          }
        }
      }
    }
    .my-scroll {
      margin-top: 6.25rem;
      > .my-cols {
        gap: 3.125rem;
        li {
          flex-shrink: 0;
          img {
            display: block;
            width: 18.75rem;
            box-shadow: var(--img-shadow);
          }
        }
      }
    }
  }
  #recruit {
    padding-block: 12.5rem;
    > .my-container {
      color: #0B6484;
      > .my-link01 {
        margin-top: 3.125rem;
      }
      > img {
        display: block;
        width: 100%;
        margin-top: 6.25rem;
        box-shadow: var(--img-shadow);
      }
    }
  }
  #office_guide {
    padding-block: 12.5rem 40.625rem;
    background: #3590B7 url(../img/home/office_guide/bg01.jpg) center bottom / 100% no-repeat;
    overflow: hidden;
    .my-container {
      .my-cols {
        gap: 4.375rem;
        color: #fff;
        .-txt {
          width: 26.25rem;
          p {
            font-weight: bold;
          }
          table {
            width: 100%;
            margin-top: 2em;
            th {
              font-weight: normal;
              vertical-align: top;
            }
            td {
              padding-bottom: 1em;
            }
          }
        }
        .-map {
          flex: 1;
          position: relative;
          iframe {
            position: absolute;
            inset: 0 0 auto auto;
            width: 40.4rem;
            height: auto;
            aspect-ratio: 65 / 54;
            box-shadow: var(--img-shadow);
          }
        }
      }
    }
  }
}

#recruit {
  #title {
    background: #46B7A9 url(../img/recruit/title/bg01.jpg) top / 100% no-repeat;
    padding-block: 17.5rem 6.25rem;
    > .my-title01 {
      margin-bottom: 13.125rem;
    }
  }
  #message {
    overflow: hidden;
    > .my-title01 {
      strong {
        color: #fff;
      }
    }
    .my-cols {
      gap: 3.75rem;
      .-img {
        flex: 1;
        img {
          width: 100%;
          box-shadow: var(--img-shadow);
        }
      }
      .-txt {
        position: relative;
        width: 27.5rem;
        color: #fff;
        .-sign {
          display: block;
          width: 9.375rem;
          margin: 2em 0 0 auto;
        }
        .my-link01 {
          position: absolute;
          inset: auto 0 0 0;
        }
      }
    }
  }
  #staff_interview {
    padding-block: 9.375rem 12.5rem;
    background: #E2F2EC;
    .my-container {
      .my-cols {
        flex-wrap: wrap;
        justify-content: space-between;
        color: #0B6484;
        row-gap: 2em;
        li {
          width: 22.5rem;
          img {
            display: block;
            width: 100%;
            margin-bottom: 1.5em;
            box-shadow: var(--img-shadow);
          }
        }
      }
      .my-link01 {
        width: 21.875rem;
        margin: 5.625rem auto 0;
      }
    }
  }
  #job_description {
    background: #46B7A9;
    padding-block: 9.375rem 12.5rem;
    overflow: hidden;
    > .my-container {
      > .my-container {
        .my-cols {
          gap: 2.5rem;
          + .my-cols {
            margin-top: 6.25rem;
          }
          .-img {
            flex: 1;
            position: relative;
            img {
              position: absolute;
              inset: 0 0 auto auto;
              width: 37.5rem;
              box-shadow: var(--img-shadow);
            }
          }
          .-txt {
            width: 31.25rem;
            min-height: 17.5rem;
            color: #fff;
            + .-img {
              img {
                right: auto;
                left: 0;
              }
            }
            h4 {
              position: relative;
              margin-bottom: 1.5em;
              strong {
                display: inline-block;
                font-size: 4.0625rem;
                font-weight: 900;
              }
              span {
                display: inline-block;
                vertical-align: baseline;
                font-family: var(--font-montserrat);
                font-size: 3.125rem;
                font-style: italic;
                font-weight: bold;
                margin-left: .5em;
                opacity: .2;
                &.-overlap {
                  position: absolute;
                  top: -0.1em;
                  right: 0;
                }
              }
              .my-link01 {
                margin: 6.25rem auto 0;
              }
            }
          }
        }
      }
    }
  }
  #application_guidelines {
    padding-block: 9.375rem 1.75rem;
    background: url(../img/recruit/application_guidelines/bg01.jpg) top / 100% no-repeat;
    .my-container {
      color: #fff;
      .my-rows {
        gap: 3.125rem;
        margin-top: 6.25rem;
        li {
          width: 100%;
          img {
            display: block;
            width: 100%;
            box-shadow: var(--img-shadow);
          }
        }
      }
    }
  }
}

#message {
  overflow: hidden;
  #title {
    background: url(../img/recruit/message/bg01.jpg) top / 100% no-repeat;
    padding-top: 17.5rem;
    height: 41.25rem;
    .my-title01 {
      margin: 0;
    }
    .-sign {
      display: block;
      width: 12.5rem;
      margin: 1.8125rem 0 0 11.25rem;
    }
  }
  #contents {
    background: url(../img/recruit/message/bg02.png) top / 100% no-repeat;
    padding-bottom: 6.25rem;
    h3 {
      font-weight: 300;
      font-size: 3.125rem;
      letter-spacing: 0.1em;
      color: #fff;
      text-align: center;
      margin-block: 7.5rem 5.625rem;
    }
    > .my-container {
      > section {
        h4 {
          display: flex;
          align-items: center;
          font-weight: 900;
          font-size: 2.25rem;
          strong {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-montserrat);
            font-style: italic;
            font-size: 5rem;
            width: 15.625rem;
            height: 15.625rem;
            background: url(../img/recruit/message/bg03.png) center / contain no-repeat;
            margin-left: -8rem;
          }
        }
        &:nth-child(2n) {
          h4 {
            flex-direction: row-reverse;
            strong {
              margin-right: -8rem;
              margin-left: 0;
            }
          }
        }
        &:nth-child(3) {
          h4 strong {
            background-image: url(../img/recruit/message/bg04.png);
          }
        }
        &:nth-child(4) {
          h4 strong {
            background-image: url(../img/recruit/message/bg05.png);
          }
        }
        &:nth-child(5) {
          h4 strong {
            background-image: url(../img/recruit/message/bg06.png);
          }
        }
        .my-cols {
          gap: 3.75rem;
          .-img {
            flex: 1;
            position: relative;
            min-height: 25rem;
            img {
              position: absolute;
              inset: 0 0 auto auto;
              width: 34.375rem;
              box-shadow: var(--img-shadow);
            }
          }
          .-txt {
            width: 33.125rem;
            + .-img {
              img {
                right: auto;
                left: 0;
              }
            }
          }
        }
      }
    }
  }
}

#staff_interview {
  overflow: hidden;
  #title {
    background: url(../img/recruit/staff_interview/bg01.jpg) top / 100% no-repeat;
    padding-top: 17.5rem;
    height: 41.25rem;
  }
  #contents {
    background: url(../img/recruit/staff_interview/bg02.png) top / 100% no-repeat;
    h3 {
      font-weight: 300;
      font-size: 3.125rem;
      letter-spacing: 0.1em;
      text-align: center;
      margin-block: 7.5rem 5.625rem;
    }
    section {
      background: top / 100% no-repeat;
      padding-bottom: 2rem;
      .my-cols {
        gap: 9.375rem;
        margin-bottom: 1.875rem;
        .-img {
          width: 21.875rem;
          h4 {
            font-size: 1.875rem;
            font-weight: 900;
            padding-block: 0.2em;
            small {
              display: block;
              font-size: 0.53em;
            }
          }
          img {
            display: block;
            width: 100%;
            box-shadow: var(--img-shadow);
          }
        }
        .-txt {
          flex: 1;
          padding-top: 4.5rem;
          dl {
            dt {
              position: relative;
              font-size: 1.25rem;
              font-weight: bold;
              color: #fff;
              height: 3.125rem;
              display: flex;
              align-items: center;
              margin-inline: -3.75rem -8.75rem;
              padding-left: 3.75rem;
              background: url(../img/recruit/staff_interview/bg03a.png) center / contain no-repeat;
              &::before {
                content: '';
                position: absolute;
                inset: 0 auto 0 -3rem;
                margin-block: auto;
                width: 6.25rem;
                height: 0;
                border: 1px solid #0b6484;
              }
            }
            dd {
              padding-block: 1.875rem;
            }
          }
        }
        &:nth-of-type(2) {
          .-txt {
            padding-top: 0;
            dl {
              dt {
                margin-inline: -8.75rem -3.75rem;
                padding-left: 8.75rem;
                background-image: url(../img/recruit/staff_interview/bg03b.png);
                &::before {
                  left: auto;
                  right: -3rem;
                }
              }
            }
          }
        }
      }
      &:nth-of-type(2n) {
        .my-cols {
          flex-direction: row-reverse;
          .-txt {
            dl {
              dt {
                margin-inline: -8.75rem -3.75rem;
                padding-left: 8.75rem;
                &::before {
                  left: auto;
                  right: -3rem;
                }
              }
            }
          }
          &:nth-of-type(2) {
            .-txt {
              dl {
                dt {
                  margin-inline: -3.75rem -8.75rem;
                  padding-left: 3.75rem;
                  &::before {
                    left: -3rem;
                    right: auto;
                  }
                }
              }
            }
          }
        }
      }
      &:nth-of-type(2) {
        background-image: url(../img/recruit/staff_interview/bg04.png);
        .my-cols .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg04a.png);
        }
        .my-cols:nth-of-type(2) .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg04b.png);
        }
      }
      &:nth-of-type(3) {
        background-image: url(../img/recruit/staff_interview/bg05.png);
        .my-cols .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg05a.png);
        }
        .my-cols:nth-of-type(2) .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg05b.png);
        }
      }
      &:nth-of-type(4) {
        background-image: url(../img/recruit/staff_interview/bg06.png);
        .my-cols .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg06a.png);
        }
        .my-cols:nth-of-type(2) .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg06b.png);
        }
      }
      &:nth-of-type(5) {
        background-image: url(../img/recruit/staff_interview/bg07.png);
        .my-cols .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg07a.png);
        }
        .my-cols:nth-of-type(2) .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg07b.png);
        }
      }
      &:nth-of-type(6) {
        background-image: url(../img/recruit/staff_interview/bg08.png);
        .my-cols .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg08a.png);
        }
        .my-cols:nth-of-type(2) .-txt dl dt {
          background-image: url(../img/recruit/staff_interview/bg08b.png);
        }
      }
    }
  }
}

#job_description {
  overflow: hidden;
  #title {
    background: url(../img/recruit/job_description/bg01.jpg) top / 100% no-repeat;
    padding-top: 17.5rem;
    height: 41.25rem;
  }
  #contents {
    background: #46B7A9;
    color: #fff;
    h3 {
      font-weight: 300;
      font-size: 3.125rem;
      color: var(--color-body);
      letter-spacing: 0.1em;
      text-align: center;
      margin-top: 7.5rem;
    }
    nav {
      margin-top: 6.25rem;
      .my-cols {
        justify-content: space-between;
        text-align: center;
        font-size: 1.375rem;
        font-weight: 900;
        color: #46B7A9;
        li {
          a {
            position: relative;
            display: block;
            width: 13.125rem;
            height: 10.625rem;
            background: rgba(255, 255, 255, 0.5);
            padding-top: 2.5rem;
            transition: all ease-out 0.3s;
            &::after {
              content: '';
              position: absolute;
              inset: 0.3125rem;
              border: 1px solid #fff;
              transition: all ease-out 0.3s;
            }
            &:hover {
              background: #fff;
              opacity: 1;
              &::after {
                border-color: #46b7a9;
              }
            }
            small {
              display: block;
              font-family: var(--font-montserrat);
              font-style: italic;
              font-size: 1.625rem;
              line-height: 1;
              padding-top: 0.3125rem;
              opacity: 0.4;
            }
          }
        }
      }
    }
    section {
      padding-block: 12.5rem;
      > .my-container {
        .my-cols {
          gap: 8.125rem;
          .-img {
            flex: 1;
            position: relative;
            img {
              position: absolute;
              inset: 0 0 auto auto;
              width: 37.5rem;
              box-shadow: var(--img-shadow);
            }
          }
          .-txt {
            width: 28.75rem;
            min-height: 17.5rem;
            h4 {
              position: relative;
              margin-bottom: 1.5em;
              strong {
                display: inline-block;
                font-size: 4.0625rem;
                font-weight: 900;
              }
              span {
                display: inline-block;
                vertical-align: baseline;
                font-family: var(--font-montserrat);
                font-size: 3.125rem;
                font-style: italic;
                font-weight: bold;
                margin-left: .5em;
                opacity: .2;
                &.-overlap {
                  position: absolute;
                  top: -0.1em;
                  right: 0;
                }
              }
            }
            + .-img {
              img {
                right: auto;
                left: 0;
              }
            }
          }
        }
        > .my-container {
          dl {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-block: 5rem;
            &:nth-of-type(2n) {
              flex-direction: row-reverse;
            }
            dt {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 10rem;
              height: 10rem;
              border-radius: 50%;
              background: #fff;
              color: #46B7A9;
              font-weight: bold;
              font-size: 1.375rem;
              line-height: 1.2;
              text-align: center;
              margin-inline: 6.25rem;
            }
            dd {
              font-size: max(11px, 1rem);
              width: 39.375rem;
            }
          }
        }
      }
      &:nth-of-type(2n) {
        background: #E2F2EC;
        color: #46B7A9;
        > .my-container {
          > .my-container {
            dl {
              dt {
                background: #46B7A9;
                color: #fff;
              }
            }
          }
        }
      }
      &:nth-last-of-type(1) {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          inset: auto 0 0 0;
          height: 10rem;
          background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
          );
        }
      }
    }
  }
}

#application_guidelines {
  overflow: hidden;
  #title {
    background: url(../img/recruit/application_guidelines/bg02.jpg) top / 100% no-repeat;
    padding-top: 17.5rem;
    height: 41.25rem;
  }
  #contents {
    background: url(../img/recruit/application_guidelines/bg03.png) top / 100% no-repeat;
    h3 {
      font-weight: 300;
      font-size: 3.125rem;
      letter-spacing: 0.1em;
      text-align: center;
      margin-top: 7.5rem;
    }
    .my-container.-sm {
      > .my-cols {
        justify-content: center;
        gap: 1.25rem;
        margin-top: 10rem;
        label {
          background: #46B7A9;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28.125rem;
          height: 4.3125rem;
          font-size: 1.875rem;
          font-weight: bold;
          color: #fff;
          cursor: pointer;
          transition: opacity ease-out 0.3s;
          &[for="tab2"] {
            background: #4686B7;
          }
        }
      }
      > div {
        background: #E2F2EC;
        padding: 6.25rem;
        .my-table01 {
          display: none;
        }
      }
      [type="radio"] {
        display: none;
        &#tab1:checked ~ div #table1,
        &#tab2:checked ~ div #table2 {
          display: table;
        }
      }
    }
  }
}

#entry {
  padding-block: 10.75rem 39.375rem;
  background: url(../img/recruit/entry/bg01.jpg) bottom center / 100% no-repeat;
}

#entry_form {
  #title {
    background: url(../img/recruit/entry_form/bg01.jpg) top center / cover no-repeat;
    padding-block: 17.5rem 12.5rem;
  }
  #form {
    background: url(../img/recruit/entry_form/bg02.jpg) top / 100% no-repeat;
    > .my-container {
      > .my-container {
        padding-block: 7.5rem 12.5rem;
        font-size: 1.5rem;
        text-align: center;
        a {
          text-decoration: underline;
        }
        iframe {
          margin-top: 6.25rem;
        }
      }
    }
  }
}

#business {
  background: #4F8BD3;
  #title {
    background: #4F8BD3 url(../img/business/title/bg01.jpg) top / 100% no-repeat;
    padding-top: 17.5rem;
    > .my-title01 {
      margin-bottom: 13.125rem;
    }
  }
  [id]:not(#title) {
    color: #fff;
    font-size: 1.125rem;
    padding-bottom: 6.25rem;
    &#water_works,
    &#repair_renovation,
    &#construction_and_awards {
      background: #69A6EC;
    }
    > .my-container {
      padding-top: 3.125rem;
    }
    .my-title01 {
      position: relative;
      margin-bottom: -2rem;
      z-index: 1;
      strong {
        color: #fff;
      }
    }
    .my-cols {
      gap: 3.75rem;
      .-txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 3.125rem;
        &::before {
          content: '';
          display: block;
          height: 0;
        }
        .my-link01 {
          width: 100%;
        }
      }
      .-img {
        width: 34.375rem;
        img {
          display: block;
          width: 100%;
          box-shadow: var(--img-shadow);
        }
      }
    }
  }
}

#public_works {
  #title {
    background: url(../img/business/public_works/bg01.jpg) center / cover no-repeat;
    padding-block: 17.5rem 11rem;
  }
  #contents {
    background: #E1EEF4 url(../img/business/public_works/bg02.png) top / 100% no-repeat;
    .my-pictures {
      figure {
        &:nth-of-type(3) {
          img {
            width: 28.125rem;
          }
          figcaption {
            margin-top: -15rem;
          }
        }
        &:nth-of-type(4) {
          margin-top: -17rem;
          img {
            width: 28.125rem;
          }
        }
        &:nth-of-type(5) {
          margin-top: -17rem;
          img {
            width: 28.125rem;
          }
          figcaption {
            margin-bottom: -15rem;
          }
        }
      }
    }
  }
}

#water_works {
  #title {
    background: url(../img/business/water_works/bg01.jpg) center / cover no-repeat;
    padding-block: 17.5rem 11rem;
  }
  #contents {
    background: #E1EEF4 url(../img/business/water_works/bg02.png) top / 100% no-repeat;
    .my-pictures {
      figure {
        &:nth-of-type(4) {
          margin-block: -5rem -2rem;
          img {
            width: 28.125rem;
          }
        }
        &:nth-of-type(8) {
          img {
            width: 28.125rem;
          }
        }
      }
    }
  }
}

#facilities {
  #title {
    background: url(../img/business/facilities/bg01.jpg) center / cover no-repeat;
    padding-block: 17.5rem 11rem;
  }
  #contents {
    background: #E1EEF4 url(../img/business/facilities/bg02.png) top / 100% no-repeat;
    .my-pictures {
      figure {
        &:nth-of-type(6) {
          margin-block: -5rem -2rem;
          img {
            width: 28.125rem;
          }
        }
      }
    }
  }
}

#repair_renovation {
  #title {
    background: url(../img/business/repair_renovation/bg01.jpg) center / cover no-repeat;
    padding-block: 17.5rem 11rem;
  }
  #contents {
    background: #E1EEF4 url(../img/business/repair_renovation/bg02.png) top / 100% no-repeat;
  }
}

#disaster_recovery {
  #title {
    background: url(../img/business/disaster_recovery/bg01.jpg) center / cover no-repeat;
    padding-block: 17.5rem 11rem;
  }
  #contents {
    background: #E1EEF4 url(../img/business/disaster_recovery/bg02.png) top / 100% no-repeat;
  }
}

#construction_and_awards {
  #title {
    background: url(../img/business/construction_and_awards/bg01.jpg) center / cover no-repeat;
    padding-block: 17.5rem 11rem;
  }
  #contents {
    background: #4F8BD3 url(../img/business/construction_and_awards/bg02.png) top / 100% no-repeat;
    .my-intro {
      .-title {
        margin-bottom: 9.375rem;
      }
      h4 {
        font-weight: 500;
        font-size: 1.875rem;
        margin-bottom: 4.8125rem;
      }
      table {
        width: stretch;
        margin-inline: 3.75rem;
        margin-bottom: 1.5625rem;
        text-align: left;
        font-size: 1.25rem;
        font-weight: 300;
        th, td {
          vertical-align: top;
          padding-block: 1em;
        }
        th {
          font-weight: normal;
        }
        tr + tr {
          border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
      }
      section + section {
        padding-top: 4.8125rem;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
      }
    }
  }
}

#business_menu {
  padding-block: 12.5rem;
  .my-cols {
    justify-content: space-between;
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 12.5rem;
      aspect-ratio: 1 / 1;
      font-weight: 500;
      font-size: 1.25rem;
      color: #fff;
      text-align: center;
      border-radius: 0.625rem;
      background: center / cover no-repeat;
      li:nth-of-type(1) & {
        background-image: url(../img/business/menu/bg01.jpg);
      }
      li:nth-of-type(2) & {
        background-image: url(../img/business/menu/bg02.jpg);
      }
      li:nth-of-type(3) & {
        background-image: url(../img/business/menu/bg03.jpg);
      }
      li:nth-of-type(4) & {
        background-image: url(../img/business/menu/bg04.jpg);
      }
      li:nth-of-type(5) & {
        background-image: url(../img/business/menu/bg05.jpg);
      }
      li:nth-of-type(6) & {
        background-image: url(../img/business/menu/bg06.jpg);
      }
    }
  }
}

#company {
  background: #11507F url(../img/company/bg01.jpg) top / 100% no-repeat;
  padding-top: 17.5rem;
  > .my-title01 {
    margin-bottom: 13.125rem;
  }
  > section {
    padding-block: 6.25rem;
    .my-title01 {
      color: rgba(255, 255, 255, 0.3);
    }
    &:nth-of-type(1) {
      padding-top: 1.25rem;
    }
    &:nth-of-type(2n + 1) {
      .my-title01 {
        strong {
          color: #fff;
        }
      }
    }
    &:nth-of-type(2n) {
      background: #92C9DD;
    }
  }
  #corporate_philosophy {
    p {
      text-align: center;
      &:nth-of-type(1) {
        margin-bottom: 5rem;
        img {
          width: 10.25rem;
        }
      }
      &:nth-of-type(2) {
        margin-bottom: 0;
        img {
          width: 44.69125rem;
        }
      }
    }
  }
  #quality_policy {
    p {
      text-align: center;
      &:nth-of-type(1) {
        margin-bottom: 5rem;
        img {
          width: 60.445rem;
        }
      }
      &:nth-of-type(2) {
        margin-bottom: 0;
        img {
          width: 27.75rem;
        }
      }
    }
  }
  #designation {
    .my-title01 {
      strong {
        font-size: 4rem;
      }
    }
  }
  #corporate_address {
    .my-table03 {
      td {
        text-align: right;
      }
    }
    .my-cols {
      display: inline-flex;
      gap: 3rem;
      text-align: left;
      .-txt {
        line-height: 2.5;
      }
      .-map {
        width: 18.75rem;
        iframe {
          display: block;
          width: 100%;
          height: auto;
          aspect-ratio: 30 / 22;
        }
      }
    }
  }
}

#contact {
  background: #44AA66 url(../img/contact/bg01.jpg) top / 100% no-repeat;
  padding-block: 17.5rem 12.5rem;
  .my-title01 {
    margin-bottom: 13.125rem;
  }
  .my-container.-sm {
    padding-top: 7.5rem;
    font-size: 1.5rem;
    text-align: center;
    color: #fff;
    a {
      text-decoration: underline;
    }
    iframe {
      margin-top: 6.25rem;
    }
  }
}

#privacy {
  background: #B3D680 url(../img/privacy/bg01.jpg) top / 100% no-repeat;
  padding-block: 17.5rem 12.5rem;
  .my-title01 {
    margin-bottom: 13.125rem;
  }
  dl {
    background: #fff;
    padding: 6.25rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 2.8;
    dt {
      font-size: 18px;
      text-align: center;
      margin-bottom: 3.125rem;
    }
    dd {
      padding-bottom: 3.125rem;
      + dt {
        padding-top: 3.125rem;
        border-top: 1px solid #707070;
      }
      a {
        color: #46B755;
        text-decoration: underline;
      }
    }
  }
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  :root {
    font-size: calc(100vw * 16 / 375);
  }

  .my-container {
    &.-sm {
      .my-container & {
        padding-inline: 0;
      }
    }
  }

  .my-title01 {
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 4.375rem;
    strong {
      font-size: 2.5rem;
    }
  }

  .my-link02 {
    height: 6.25rem;
    border-radius: 3.125rem;
    max-width: 18.75rem;
    &::after {
      position: absolute;
      inset: auto 1.2rem auto auto;
      margin: 0;
      transform: rotate(-90deg);
    }
  }

  .my-header {
    .my-container {
      .my-header-logo {
        img {
          width: 9.84375rem;
        }
      }
      .my-header-nav {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(3px);
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height ease-out .4s;
        :checked ~ & {
          max-height: 30rem;
        }
        .my-cols {
          flex-direction: column;
          row-gap: 1rem;
          padding-block: 1rem;
          li {
            a {
              display: block;
              width: 100%;
              text-align: center;
            }
          }
        }
      }
      label {
        display: block;
        width: 2.25rem;
        height: 2.25rem;
        cursor: pointer;
        background: url(../img/icon-menu.svg) center / contain no-repeat;
      }
    }
  }

  .my-main {
    &#home,
    &:has(section#entry) {
      + .my-footer {
        margin-top: -50rem;
      }
    }
  }

  .my-footer {
    .my-container {
      padding-block: 6.25rem;
      .my-footer-nav {
        .my-cols {
          flex-direction: column;
          align-items: center;
          row-gap: 1.875rem;
        }
      }
      .my-footer-info {
        flex-direction: column;
        justify-content: start;
        padding: 1.875rem;
        line-height: 1.4;
        dl {
          flex-direction: column;
          align-items: start;
          row-gap: 0.5rem;
          width: 100%;
          padding-block: 0;
          margin-top: 3.125rem;
        }
      }
    }
  }

  #home {
    #company_infomation {
      background-image: url(../img/home/company_infomation/bg01-sp.jpg);
      .-txt01 {
        width: 13.25rem;
        margin-block: 13.125rem 24.6875rem;
      }
      dl {
        dt {
          font-size: 1.25rem;
          text-align: center;
          margin-bottom: 4.375rem;
        }
        dd {
          .my-cols {
            flex-direction: column;
            gap: 4.375rem;
            .-txt {
              width: auto;
            }
            .-img {
              img {
                position: static;
                inset: 0;
                width: 100%;
              }
            }
          }
        }
      }
    }
    #our_business {
      padding-block: 5rem;
      > .my-container {
        .my-title01 {
          position: static;
          inset: 0 0 4.375rem 0;
        }
        > .my-container {
          > .my-cols {
            flex-direction: column;
            gap: 4.375rem;
            .-img {
              height: auto;
              img {
                position: static;
                inset: 0;
                width: 100%;
                height: auto;
              }
            }
            .-txt {
              width: auto;
              padding-top: 0;
              .my-link01 {
                position: static;
                inset: 4.375rem 0 0 0;
              }
            }
          }
        }
      }
      .my-scroll {
        margin-top: 4.375rem;
      }
    }
    #recruit {
      padding-block: 4.375rem;
      > .my-container {
        > .my-link01 {
          margin-top: 5rem;
        }
        > img {
          margin-top: 5rem;
        }
      }
    }
    #office_guide {
      padding-block: 4.375rem 55rem;
      background-image: url(../img/home/office_guide/bg01-sp.jpg);
      .my-container {
        .my-cols {
          flex-direction: column;
          .-txt {
            width: auto;
            table {
              display: block;
              margin-top: 3.125rem;
              tr, th, td {
                display: block;
              }
            }
          }
          .-map {
            iframe {
              position: static;
              inset: 0;
              width: 100%;
              aspect-ratio: 35 / 25;
            }
          }
        }
      }
    }
  }

  #recruit {
    #title {
      background-image: url(../img/recruit/title/bg01-sp.jpg);
      padding-top: 15.625rem;
      > .my-title01 {
        margin-bottom: 28.125rem;
      }
    }
    #message {
      .my-cols {
        flex-direction: column;
        gap: 3.125rem;
        .-img {
          img {
            aspect-ratio: 1 / 1;
            object-fit: cover;
          }
        }
        .-txt {
          width: 100%;
          .my-link01 {
            position: static;
          }
        }
      }
    }
    #staff_interview {
      padding-block: 5rem 10rem;
      .my-container {
        .my-cols {
          row-gap: 3.125rem;
          li {
            width: 100%;
            img {
              margin-bottom: 1.875rem;
            }
          }
        }
        .my-link01 {
          width: 100%;
        }
      }
    }
    #job_description {
      padding-block: 5rem 10rem;
      > .my-container {
        > .my-container {
          .my-cols {
            flex-direction: column;
            gap: 3.125rem;
            &:nth-of-type(2n) {
              flex-direction: column-reverse;
            }
            + .my-cols {
              margin-top: 3.125rem;
            }
            .-img {
              img {
                position: static;
                width: 100%;
              }
            }
            .-txt {
              width: 100%;
              min-height: 0;
              h4 {
                span {
                  &.-overlap,
                  &.-overlap-sp {
                    display: block;
                    width: fit-content;
                    position: relative;
                    top: auto;
                    right: auto;
                    margin: -1em 0 0 auto;
                  }
                }
              }
            }
          }
        }
      }
    }
    #application_guidelines {
      padding-block: 5rem 0;
      background-image: url(../img/recruit/application_guidelines/bg01-sp.jpg);
      .my-container {
        .my-rows {
          margin-top: 3.125rem;
        }
      }
    }
  }

  #message {
    #title {
      position: relative;
      background-image: url(../img/recruit/message/bg01-sp.jpg);
      padding-top: 17.5rem;
      height: 31.25rem;
      .my-title01 {
        strong {
          font-size: 4.2rem;
        }
      }
      .-sign {
        position: absolute;
        top: -10rem;
        left: 1.625rem;
        margin: 0;
        width: 9.375rem;
      }
    }
    #contents {
      background-size: 80rem;
      h3 {
        margin-block: 3.75rem 5rem;
      }
      > .my-container {
        > section {
          + section {
            margin-top: 5rem;
          }
          h4 {
            flex-direction: column;
            justify-content: center;
            gap: 1.875rem;
            line-height: 1.8;
            margin-bottom: 3.125rem;
            strong {
              margin-left: 0;
            }
          }
          &:nth-child(2n) {
            h4 {
              flex-direction: column;
              strong {
                margin-right: 0;
                margin-left: 0;
              }
            }
          }
          .my-cols {
            flex-direction: column;
            &:has(.-txt + .-img) {
              flex-direction: column-reverse;
            }
            .-img {
              flex: 1;
              min-height: 0;
              img {
                position: static;
                width: 100%;
              }
            }
            .-txt {
              width: auto;
            }
          }
        }
      }
    }
  }

  #staff_interview {
    #title {
      background-image: url(../img/recruit/staff_interview/bg01-sp.jpg);
      padding-top: 15.625rem;
      height: 31.25rem;
      .my-title01 {
        strong {
          font-size: 4.2rem;
        }
      }
    }
    #contents {
      background-image: url(../img/recruit/staff_interview/bg02-sp.png);
      h3 {
        font-size: 2.5rem;
        color: #fff;
        margin-block: 5rem;
      }
      section {
        + section {
          padding-top: 5rem;
        }
        .my-cols {
          flex-direction: column;
          gap: 2.5rem;
          &:has(.-txt + .-img) {
            flex-direction: column-reverse;
          }
          .-img {
            width: 100%;
            h4 {
              width: fit-content;
              margin-inline: auto;
            }
          }
          .-txt {
            padding-top: 0;
            dl {
              dt {
                height: auto;
                padding-block: .5em;
                line-height: 1.5;
                margin-inline: 0 calc(var(--padding-container) * -1);
                padding-left: 4.5rem;
                background-image: url(../img/recruit/staff_interview/bg03a-sp.png);
                background-position-x: right;
                background-size: 20.3125rem;
                &::before {
                  left: calc(var(--padding-container) * -1);
                  width: 5rem;
                }
              }
            }
          }
          &:nth-of-type(2) {
            .-txt {
              dl {
                dt {
                  margin-inline: calc(var(--padding-container) * -1) 0;
                  padding-left: var(--padding-container);
                  padding-right: 4.5rem;
                  background-image: url(../img/recruit/staff_interview/bg03b-sp.png);
                  background-position-x: left;
                  &::before {
                    left: auto;
                    right: calc(var(--padding-container) * -1);
                    width: 5rem;
                  }
                }
              }
            }
          }
        }
        &:nth-of-type(2n) {
          .my-cols {
            flex-direction: column;
            .-txt {
              padding-top: 0;
              dl {
                dt {
                  margin-inline: calc(var(--padding-container) * -1) 0;
                  padding-left: var(--padding-container);
                  padding-right: 4.5rem;
                  background-position-x: left;
                  &::before {
                    left: auto;
                    right: calc(var(--padding-container) * -1);
                  }
                }
              }
            }
            &:nth-of-type(2) {
              .-txt {
                dl {
                  dt {
                    margin-inline: 0 calc(var(--padding-container) * -1);
                    padding-inline: 4.5rem var(--padding-container);
                    &::before {
                      left: calc(var(--padding-container) * -1);
                      right: auto;
                    }
                  }
                }
              }
            }
          }
        }
        &:nth-of-type(2) {
          .my-cols .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg04a-sp.png);
          }
          .my-cols:nth-of-type(2) .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg04b-sp.png);
            background-position-x: right;
          }
        }
        &:nth-of-type(3) {
          .my-cols .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg05a-sp.png);
          }
          .my-cols:nth-of-type(2) .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg05b-sp.png);
          }
        }
        &:nth-of-type(4) {
          .my-cols .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg06a-sp.png);
          }
          .my-cols:nth-of-type(2) .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg06b-sp.png);
            background-position-x: right;
          }
        }
        &:nth-of-type(5) {
          .my-cols .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg07a-sp.png);
          }
          .my-cols:nth-of-type(2) .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg07b-sp.png);
          }
        }
        &:nth-of-type(6) {
          .my-cols .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg08a-sp.png);
          }
          .my-cols:nth-of-type(2) .-txt dl dt {
            background-image: url(../img/recruit/staff_interview/bg08b-sp.png);
            background-position-x: right;
          }
        }
      }
    }
  }

  #entry {
    padding-block: 18.75rem 56.875rem;
    background-image: url(../img/recruit/entry/bg01-sp.jpg);
  }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}