@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');

:root {
  font-size: 16px; /* 1rem */
  --font-sans-serif: "Zen Kaku Gothic Antique", sans-serif;
  --font-serif: serif;
  --color-body: #0E0E0E;
  --color-link: #0d6efd;
  --border-radius-pill: 50rem;
  --padding-container: 12px;
  --max-width: 1200px;
  --max-width-container: calc(var(--max-width) + var(--padding-container) * 2);
}

body {
  font-family: var(--font-sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-body);
  scrollbar-gutter: stable;
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: opacity .3s ease-out;
  &:hover {
    color: var(--color-link);
    opacity: .7;
  }
}

img {
  max-width: 100%;
}

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, .5);
  z-index: 2000;
  > .spinner-grow {
    position: absolute;
    inset: 0;
    place-self: center;
  }
}

.my-container {
  position: relative;
  max-width: var(--max-width-container);
  margin-inline: auto;
  padding: 0 var(--padding-container);
}

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

.my-breadcrumb {
  > ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    li + li::before {
      content: '>';
      margin-inline: .5em;
    }
  }
}

.my-title01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  font-weight: bold;
  margin-bottom: 3.125rem;
  &::after {
    content: '';
    background: #074195;
    width: 4.375rem;
    height: 5px;
  }
  [lang="en"] {
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
  }
  [lang="ja"] {
    font-size: 1.875rem;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
  }
}

.my-btn01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1.875rem;
  font-size: 1rem;
  padding: 1.125rem 1.875rem;
  background: #112B5A;
  color: #fff;
  &:hover {
    color: #fff;
  }
  &::after {
    content: '';
    width: 1em;
    height: 1em;
    background: url(../img/icon-arrow-right-w.svg) center / contain no-repeat;
  }
}

.my-header {
  display: flow-root;
  position: fixed;
  inset: 0 0 auto;
  z-index: 11;
  > .my-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: none;
    height: 6.25rem;
    padding: 0;
    background: #fff;
  }
  .my-header-logo {
    padding-inline: 3.125rem;
    .-logo {
      color: #112B5A;
      white-space: nowrap;
      > img {
        display: inline-block;
        width: 4.75875rem;
      }
      > div {
        display: inline-block;
        vertical-align: middle;
        font-size: 1.25rem;
        font-weight: bold;
        margin-left: .5em;
        > strong {
          font-size: 1.875rem;
          margin-left: .2em;
        }
        > small {
          display: block;
          font-size: 1rem;
          font-weight: 500;
        }
      }
    }
  }
  .my-header-menu {
    display: none;
    cursor: pointer;
    &::before {
      content: '☰';
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.5em;
      height: 1.5em;
      font-size: 2.5em;
    }
    #menu-toggle:checked ~ &::before {
      content: '✕';
    }
  }
  .my-header-nav {
    color: #112B5A;
    height: 100%;
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      height: 100%;
      > li {
        height: 100%;
        > a {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          color: inherit;
          font-weight: bold;
          padding-inline: 1.5em;
          &.-contact {
            gap: 0.625rem;
            background: #112B5A;
            color: #fff;
            &::before {
              content: '';
              width: 1.5rem;
              height: 1.5rem;
              background: url(../img/icon-mail-w.svg) center / contain no-repeat;
            }
          }
        }
      }
    }
  }
}

.my-main {
  display: flow-root;
  position: relative;
  padding-top: 6.25rem;
  background: #EBEBEC;
}

.my-footer {
  display: flow-root;
  position: relative;
  background: #072762;
  color: #fff;
  overflow: hidden;
  padding-bottom: 1.25rem;
  > .my-container {
    .my-footer-title {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1rem 3.125rem;
      margin-block: 3.75rem 3.125rem;
      .-logo {
        color: inherit;
        > img {
          display: inline-block;
          width: 4.75875rem;
        }
        > div {
          display: inline-block;
          vertical-align: middle;
          white-space: nowrap;
          font-size: 1.25rem;
          font-weight: bold;
          margin-left: .5em;
          > strong {
            font-size: 1.875rem;
            margin-left: .2em;
          }
          > small {
            display: block;
            font-size: 1rem;
            font-weight: 500;
          }
        }
      }
      .-address {
        font-size: 1rem;
      }
    }
    .my-footer-nav {
      a {
        color: inherit;
      }
      > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1em;
        list-style: none;
        margin: 0;
        padding: 0;
        > li {
          position: relative;
          padding: 0.625rem 1.875rem;
          border-right: 1px solid #fff;
          &::before {
            content: '';
            position: absolute;
            inset: 0 auto 0 -1px;
            width: 0;
            border-left: 1px solid #fff;
          }
          > a {
            display: inline-block;
            font-weight: bold;
            margin-bottom: 1.5em;
          }
          > ul {
            list-style-type: disc;
            margin: 0;
            > li + li {
              margin-top: 1em;
            }
          }
        }
      }
      .-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        background: #fff;
        width: 13rem;
        height: 5.625rem;
        font-size: 1rem;
        font-weight: bold;
        color: #112B5A;
        margin: 3.125rem auto 0;
        &::before {
          content: '';
          width: 1.5rem;
          height: 1.5rem;
          background: url(../img/icon-mail.svg) center / contain no-repeat;
        }
      }
    }
    > small {
      display: flow-root;
      text-align: center;
      font-size: 0.875rem;
      margin-top: 5rem;
    }
  }
}

#home-hero {
  position: relative;
  padding-bottom: 1.25rem;
  > img {
    width: 100%;
  }
  > .my-cols {
    position: absolute;
    inset: 4.58vw 5.56vw auto auto;
    gap: 0.625rem;
    > li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.5em;
      text-align: center;
      font-weight: bold;
      width: 10.625rem;
      height: 12.5rem;
      background: rgba(255, 255, 255, .9);
    }
  }
}

#home-our_biz {
  padding-bottom: 5rem;
  .my-cols {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    > li {
      position: relative;
      width: 100%;
      max-width: 36.25rem;
      height: 34.5625rem;
      background: #fff;
      overflow: hidden;
      dl {
        width: 19rem;
        padding: 2.5rem;
        dt {
          font-size: 1.75rem;
          font-weight: 900;
          margin-bottom: 1.875rem;
          strong {
            display: block;
            color: #074195;
            font-size: 3.75rem;
            margin-bottom: 0.625rem;
          }
        }
        dd {
          line-height: 1.8;
        }
      }
      .my-btn01 {
        position: absolute;
        inset: auto auto 2.5rem 2.5rem;
        width: 14rem;
      }
      .-img {
        position: absolute;
        inset: 0 auto auto 19rem;
        width: 17.25rem;
        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
}

/* `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) {
  body:has(#menu-toggle:checked) {
    overflow: hidden;
  }
  .my-header {
    > .my-container {
      height: 4.5rem;
    }
    .my-header-logo {
      padding-inline: var(--padding-container);
      .-logo {
        > img {
          width: 3.5rem;
        }
      }
    }
    .my-header-menu {
      display: block;
    }
    .my-header-nav {
      display: none;
    }
    &:has(#menu-toggle:checked) {
      .my-header-logo,
      .my-header-menu {
        z-index: 11;
      }
      .my-header-nav {
        position: fixed;
        inset: 0;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        ul {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: auto;
          > li > a {
            padding: 1em;
          }
        }
      }
    }
  }

  .my-main {
    padding-top: 4.5rem;
  }
}

/* `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) {
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  /* :root {
    font-size: calc(100vw * 16 / 576);
  } */
}