@charset "UTF-8";

/* =============================================================================

Global CSS

・ヘッダー、フッター等のページ共通で使用される要素「.g-×××」

上記はここに記述する

============================================================================= */

/* Global CSS .g-
============================================================================= */

/* Header
----------------------------------------------------------------------------- */
body.is-global_menu-open .g-header {
}
body.is-scrolled:not(.is-global_menu-open) .g-header {
}
@media (width > 767px) {
}
@media (width > 767px) {
}

.g-header {
  @media (width > 767px) {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:2.0rem;
    height:var(--header-height);
    border-bottom:1px solid var(--cc-gray-A);
    position:fixed;
    top:0;
    inset-inline:0;
    z-index: 1000;
    transition-property: background-color;
    transition-duration: var(--duration-hover-A);
    backdrop-filter:blur(5px);
    body.is-header_inversion & {
      background-color:rgb(from var(--cc-white-B) r g b / .6);
    }
  }
  .l-header-logos {
    @media (width <= 767px) {
      border-bottom:1px solid var(--cc-gray-A);
      padding-inline:1.0rem;
      position:fixed;
      top:0;
      inset-inline:0;
      transition-property: background-color;
      transition-duration: var(--duration-hover-A);
      backdrop-filter:blur(5px);
      z-index: 1000;
      body.is-header_inversion & {
        background-color:rgb(from var(--cc-white-B) r g b / .6);
      }
    }
  }
}

.g-floating_conversion {
  display:flex;
  gap:.6rem;

  @media (width <= 767px) {
    display:grid;
    grid-template-columns: 1fr 1fr auto;
    gap:.4rem;
    flex-wrap:wrap;
    padding-top:1.0rem;
    padding-inline:1.0rem;
    height:calc(7.0rem + env(safe-area-inset-bottom));
    width:100%;
    position:fixed;
    bottom:0;
    z-index: 1000;

    body:has(&) .g-footer {
      padding-bottom:calc(7.0rem + var(--pb) + env(safe-area-inset-bottom));
    }
  }

  > a {
    display:flex;
    justify-content: center;
    align-items: center;
    @media (width > 767px) {
      width:8.0rem;
      height:auto;
      aspect-ratio: 1/1;
    }
    @media (width <= 767px) {
      height:5.0rem;
    }
    &:not(.p-ff-of-A) {
      font-size:1.4rem;
      letter-spacing: 0;
    }
    &:is(.p-ff-of-A) {
      font-size:1.6rem;
      letter-spacing: .05em;
    }
  }
}

/* Global Menu */
.g-global_menu {
  justify-content: flex-end;
  @media (width > 767px) {
    padding-right:0;
  }
  @media (width <= 767px) {
  }

  > .inner {
    background-color:var(--cc-white-B);
    min-height:calc(100% + 1px);
    @media (width > 767px) {
      width:calc(96.0rem + var(--scrollbar-w));
      box-shadow:0 0 2.0rem rgb(0 0 0 / .15);
      transition-property:clip-path;
      transition-duration: var(--duration-hover-A);
    }
    @media (width <= 767px) {
      width:100%;
    }
  }

  .h {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:12.0rem;
    padding-inline:2.0rem;
    @media (width > 767px) {
      padding-top:2.0rem;
    }
    @media (width <= 767px) {
      margin-bottom:6.0rem;
      padding-inline:1.0rem;
    }

    .l-global_menu-button {
      position:fixed;
      top:2.0rem;
      right:calc(2.0rem + var(--scrollbar-w));
      z-index: 10;
      @media (width <= 767px) {
        top:1.0rem;
        right:1.0rem;
      }
    }
  }

  .m {
    padding-inline:4.0rem;
    @media (width <= 767px) {
      padding-inline:2.0rem;
    }
  }

  .m_c {
  }
  .m_c_b {
    --ul-row-gap:3.2rem;
    --dl-row-gap:4.0rem;
    --dl-i-row-gap:2.4rem;
    --pl:2.0rem;
    display:grid;
    align-items: flex-start;
    @media (width > 767px) {
      justify-content: space-between;
      grid-template-columns: repeat(4,auto);
      grid-template-rows:auto 1fr;
      grid-template-areas:
        "first second third fourth"
        "last second third fourth";
      ;
      row-gap:var(--ul-row-gap);
      padding-right:2.0rem;
    }
    @media (width <= 767px) {
      --ul-row-gap:2.4rem;
      --dl-row-gap:2.4rem;
      --dl-i-row-gap:1.6rem;
      --pl:1.6rem;
      grid-template-columns: repeat(1fr,1fr);
      row-gap:3.2rem;
      grid-template-areas:
        "first first"
        "second second"
        "third fourth"
        "last last"
      ;
      column-gap:1.0rem;
    }
    .-first {
      grid-area:first;
    }
    .-second {
      grid-area:second;
      @media (width <= 767px) {
        display:grid;
        grid-template-columns:subgrid;
      }
    }
    .-third {
      grid-area:third;
    }
    .-fourth {
      grid-area:fourth;
    }
    .-last {
      grid-area:last;
    }
  }

  .m_c_b_ul > li,
  .m_c_b_dl > div > dt {
    position:relative;
    padding-left:var(--pl);
    font-size:1.4rem;
    line-height:1.5;
    letter-spacing: .05em;

    &::before {
      content:"";
      background-color:var(--cc-green-D);
      width:calc(var(--pl) * .5);
      height:2px;
      position:absolute;
      left:0;
      top:calc(.5lh - 1px);
    }
  }
  .m_c_b_ul {
    display:grid;
    gap:var(--ul-row-gap);
  }
  .m_c_b_dl {
    display:grid;
    gap:var(--dl-row-gap);

    > div {
      display:grid;
      gap:var(--dl-i-row-gap);

      > dt {
        @media (width <= 767px) {
          margin-bottom:.6rem;
        }
      }
      > dd {
        padding-left:var(--pl);
        font-size:1.2rem;
        line-height:1.5;
        letter-spacing: .05em;
        @media (width <= 767px) {
          font-size:1.1rem;
        }
      }
    }
  }
  .m_e {
    margin-top:12.0rem;
    padding-bottom:6.0rem;
    @media (width <= 767px) {
      margin-top:8.0rem;
      padding-bottom:calc(6.0rem + env(safe-area-inset-bottom));
    }
  }
  .m_e_ul {
    display:grid;
    gap:2.0rem;
    @media (width > 767px) {
      grid-template-columns: repeat(3,1fr);
    }
    @media (width <= 767px) {
      grid-template-columns: repeat(2,1fr);
      grid-template-rows:10.0rem 8.0rem;
      grid-template-areas:
        "first second"
        "third third"
      ;
      gap:1.0rem;
    }
    > li {
      @media (width <= 767px) {
        &:nth-child(1) {
          grid-area:first;
        }
        &:nth-child(2) {
          grid-area:second;
        }
        &:nth-child(3) {
          grid-area:third;
        }
        &:nth-child(1),
        &:nth-child(2) {
          > a {
            flex-direction: column;
            > span {
              margin-block:auto;
              padding-top:.5rem;
            }
            .m-arrow-A {
              margin-bottom:1.0rem;
              position:static;
            }
          }
        }
      }
      > a {
        display:flex;
        justify-content: center;
        align-items: center;
        position:relative;
        @media (width > 767px) {
          height:12.0rem;
        }
        @media (width <= 767px) {
          height:100%;
        }
        &:not(.p-ff-of) {
          font-size:2.0rem;
          letter-spacing: 0;
          font-weight:700;
          @media (width <= 767px) {
            font-size:1.6rem;
          }
        }
        &:is(.p-ff-of) {
          font-size:2.4rem;
          letter-spacing: .05em;
          @media (width <= 767px) {
            font-size:2.6rem;
          }
        }

        .m-arrow-A {
          position:absolute;
          right:2.0rem;
          @media (width <= 767px) {
            right:1.0rem;
          }
        }
      }
    }
  }

}



/* TopicPath
----------------------------------------------------------------------------- */
.g-topicpath {
  --topicpath-pd:2.0rem;
  padding-inline-start:var(--topicpath-pd);
  font-family:var(--ff-serif);
  font-size:1.2rem;
  line-height:1;
  letter-spacing: 0;
  overflow-x:auto;
  z-index:10;
  position:absolute;
  width:100%;
  top:var(--header-height);

  @media (width > 767px) {
    border-top:1px solid var(--cc-gray_line-A);
  }
  @media (width <= 767px) {
    display:flex;
    --topicpath-pd:3.0rem;
  }

  > .inner {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    height:var(--topicpath-height);
    @media (width > 767px) {
      margin-inline:auto;
      width:132.0rem;
    }
    @media (width <= 767px) {
      flex-shrink: 0;
      min-width:100%;
      font-size:1.0rem;
    }
  }

  .item {
    flex-shrink: 0;
    display:flex;
    align-items: center;

    &:not(:last-child) {
      &::after {
        flex-shrink: 0;
        content:"-";
        margin-inline:1em;
        @media (width <= 767px) {
          margin-inline:.5em;
        }
      }
    }
    &:is(:last-child) {
      @media (width <= 767px) {
        &::after {
          content:"";
          flex-shrink: 0;
          width:var(--topicpath-pd);
        }
      }
    }

    > a {
      text-decoration: underline;
      @media (hover:hover) {
        &:hover {
          text-decoration: none;
        }
      }
    }
    > span {
      color:#848484;
    }
  }

}

/* Pagetop
============================================================================= */
.g-pagetop_button {
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius:var(--radius-B);
  width:5.0rem;
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--cc-black-A);
  z-index:500;
  position:fixed;
  bottom:2.0rem;
  right:2.0rem;
  transform:translateY(calc(100% + 2.2rem));
  transition-property: transform,opacity;
  transition-duration: var(--duration-hover-A);
  transition-timing-function: var(--ttf-eo-cubic);
  @media (width <= 767px) {
    bottom: 1px;
    transform:translateY(calc(100% + 7.2rem));
    bottom:7.0rem;
    right:1.0rem;
  }
  &::after {
    background-color:#fff;
    width:1.6rem;
  }
}
body.is-scrolled .g-pagetop_button {
  transform:translateY(0);
}


/* Sample
============================================================================= */
.g-entry {
  background-color:#26375B;
  padding-block:14.0rem;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    padding-block:8.0rem;
  }

  > .inner {
    @media (width > 767px) {
      display:grid;
      grid-template-columns: 1fr 53.0rem;
      grid-template-areas:
        "heading buttons"
        "desc buttons"
      ;
    }
    @media (width <= 767px) {
    }
  }
  .l-heading-B {
    @media (width > 767px) {
      grid-area:heading;
    }
  }
  .desc {
    @media (width > 767px) {
      grid-area:desc;
    }
  }
  .desc {
    @media (width > 767px) {
      grid-area:desc;
    }
  }
  .b {
    display:grid;
    grid-template-rows:12.0rem 12.0rem;
    grid-template-columns: 1fr 1fr;
    gap:1.0rem;
    @media (width > 767px) {
      grid-area:buttons;
    }
    @media (width <= 767px) {
      grid-template-rows:10.0rem 8.0rem;
      margin-top:5.2rem;
    }
  }
  .b_i {
    &:last-child {
      grid-column:1/-1;
    }
  }
  .b_i_link {
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%;
    position:relative;

    &:not(.p-ff-of) {
      font-size:2.0rem;
      font-weight: 700;
      letter-spacing: 0;
      @media (width <= 767px) {
        flex-direction: column;
        font-size:1.6rem;
        > span {
          padding-top:1.0rem;
          margin-block:auto;
        }
        .m-arrow-A {
          position:static;
          margin-bottom:1.0rem;
        }
      }
    }
    &:is(.p-ff-of) {
      font-size:3.0rem;
      letter-spacing: .05em;
      @media (width <= 767px) {
        font-size:2.6rem;
        .m-arrow-A {
          right:1.0rem;
        }
      }
    }

    .m-arrow-A {
      position:absolute;
      right:2.0rem;
    }
  }

  .m-abs_bg {
    margin-inline:auto;
    inset-inline:0;
    @media (width > 767px) {
      width:140.0rem;
    }
    @media (width <= 767px) {
      width:calc(100% - 4.0rem);
    }
  }
}


/* フッター
============================================================================= */
.g-footer {
  --pb:2.5rem;
  background-color:var(--cc-white-B);
  padding-block:10.0rem var(--pb);

  @media (width > 767px) {
  }
  @media (width <= 767px) {
    --pb:1.6rem;
    padding-block:8.0rem var(--pb);
    position:relative;
  }

  > .inner {
    @media (width > 767px) {
      display:grid;
      grid-template-columns: auto auto;
      grid-template-areas:
        "jsd menu"
        "corporate menu"
        "copyright copyright"
      ;
      align-items: flex-start;
      justify-content: space-between;
      position:relative;
    }
  }
  .jr {
    position:absolute;
    right:0;
    @media (width <= 767px) {
      top:2.0rem;
      right:2.0rem;
    }
  }
  .jsd {
    display:grid;
    justify-content: center;
    text-align: center;
    line-height:1;
    @media (width > 767px) {
      grid-area:jsd;
    }
    @media (width <= 767px) {
      margin-bottom:6.0rem;
    }
    > img {
      margin-inline:auto;
    }
  }
  .jsd_sub {
    margin-block:2.4rem 1.2rem;
    font-size:1.2rem;
    letter-spacing: .05em;
    @media (width <= 767px) {
      margin-bottom:.8rem;
    }
  }
  .jsd_main {
    margin-bottom:2.0rem;
    font-size:1.5rem;
    font-weight: 700;
    letter-spacing: .02em;
    @media (width <= 767px) {
      margin-bottom:1.6rem;
      font-size:1.4rem;
    }
  }
  .jsd_recruit {
    font-size:1.4rem;
    letter-spacing: .4em;
    @media (width <= 767px) {
      font-size:1.3rem;
    }
  }
  .m {
    --ul-row-gap:3.2rem;
    --dl-row-gap:2.8rem;
    --pl:2.0rem;
    font-weight: 700;
    @media (width > 767px) {
      grid-area:menu;
      display:flex;
      align-items: flex-start;
      gap:5.2rem;
      padding-top:9.6rem;
    }
    @media (width <= 767px) {
      --ul-row-gap:1.6rem;
      --dl-row-gap:1.4rem;
      --pl:1.6rem;
      display:grid;
      align-items: flex-start;
      grid-template-columns: repeat(1fr,1fr);
      row-gap:4.4rem;
      grid-template-areas:
        "first second"
        "third fourth"
        "fifth fifth"
      ;
      column-gap:1.0rem;
      .-first {
        grid-area:first;
      }
      .-second {
        grid-area:second;
      }
      .-third {
        grid-area:third;
      }
      .-fourth {
        grid-area:fourth;
      }
      .-fifth {
        grid-area:fifth;
      }
    }
  }

  .m_ul > li,
  .m_dl > dt {
    position:relative;
    padding-left:var(--pl);
    font-size:1.4rem;
    line-height:1.5;
    letter-spacing: .05em;

    &::before {
      content:"";
      background-color:var(--cc-green-D);
      width:calc(var(--pl) * .5);
      height:2px;
      position:absolute;
      left:0;
      top:calc(.5lh - 1px);
    }
  }
  .m_ul {
    display:grid;
    gap:var(--ul-row-gap);
  }
  .m_dl {
    display:grid;
    gap:var(--dl-row-gap);

    > dt {
      @media (width <= 767px) {
        margin-bottom:.8rem;
      }
    }
    > dd {
      padding-left:var(--pl);
      font-size:1.2rem;
      line-height:1.5;
      letter-spacing: .05em;
      @media (width <= 767px) {
        font-size:1.1rem;
      }
    }
  }
  .corporate {
    display:flex;
    align-items: center;
    width:fit-content;
    margin-top:16.5rem;
    gap:1.2rem;
    font-size:1.2rem;
    font-weight: 700;
    line-height:1.5;
    @media (width > 767px) {
      grid-area:corporate;
    }
    @media (width <= 767px) {
      margin-top:5.6rem;
      font-size:1.1rem;
    }
  }
  .copyright {
    margin-top:4.8rem;
    font-size:1.2rem;
    line-height:1;
    letter-spacing: .05em;
    @media (width > 767px) {
      grid-area:copyright;
    }
    @media (width <= 767px) {
      margin-top:3.6rem;
      font-size:1.05rem;
    }
  }
}


/* Sample
============================================================================= */
.g-selectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}