@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 {
}
.g-header {
  display:flex;
  align-items: center;
  margin-inline:auto;
  height:var(--header-height);
  width:100%;
  line-height:1;
  z-index: 1000;
  position:fixed;
  top:0;
  left:0;
  transition-property: transform,background-color;
  transition-duration:var(--duration-hover-A);

  @media (width > 767px) {
    min-width:var(--pc-min-width);
    padding-inline:2.0rem;
    width:100%;
    background-color:#fff;
  }
  @media (width <= 767px) {
    padding-inline:2.0rem;
    background-color:rgb(from var(--cc-bg-A) r g b / 0.2);
    backdrop-filter: blur(5px);
    body.is-global_menu-open & {
      background-color:transparent;
    }
  }

  .logo {
    display:flex;
    align-items: center;
    gap:2.0rem;
    flex-shrink: 0;
    height:100%;
    @media (width <= 767px) {
      gap:1.2rem;
    }

    > a {
      font-size:4.8rem;
      letter-spacing: .04em;
      color:var(--cc-heading-A);
      line-height:1;
      @media (width <= 767px) {
        font-size:3.2rem;
      }
    }
    > span {
      font-size:1.4rem;
      line-height:1.4;
      letter-spacing: .1em;
      @media (width <= 767px) {
        font-size:1.0rem;
      }
    }
  }

  .header-nav {
    @media (width > 767px) {
      display:flex;
      margin-left:auto;
      gap:4.2rem;
    }
    @media (width <= 767px) {
      padding-top:10.0rem;
      width:100vw;
      height:100dvh;
      position:fixed;
      top:0;
      left:0;
      background-color:#fff;
      transition-property: opacity;
      transition-duration:var(--duration-hover-A);
      z-index: -2;
      overflow-y:auto;
      overscroll-behavior: none;

      body:not(.is-global_menu-open) & {
        pointer-events: none;
        opacity:0;
      }
    }
    .nav_inner {
      @media (width > 767px) {
        display:contents;
      }
      @media (width <= 767px) {
        min-height:calc(100% + 1px);
        padding-inline:4.4rem;
      }
    }

    .nav_list {
      @media (width > 767px) {
        display:flex;
        align-items: center;
        gap:4.2rem;
      }
      @media (width <= 767px) {
        font-size:1.9rem;
      }

      .nav_item {
        > a {
          display:flex;
          align-items: center;
          transition-property: opacity;
          transition-duration:var(--duration-hover-A);
          color:#000;
          @media (width > 767px) {
            justify-content: center;
            gap:.8rem;
          }
          @media (width <= 767px) {
            padding-block:1.9rem;
          }
        }
      }
    }
    .contact {
      display:flex;
      justify-content: center;
      align-items: center;
      border-radius:1.0rem;
      color:#fff;
      width:16.0rem;
      height:6.4rem;
      font-weight:700;
      @media (width <= 767px) {
        margin-top:3.2rem;
        width:100%;
      }
      .m-abs_bg {
        img {
          border-radius:1.0rem;
        }
      }
    }
  }

  .g-header_menu-btn {
    display:flex;
    justify-content:center;
    align-items: center;
    margin-inline:auto -2.0rem;
    width:var(--header-height);
    height:var(--header-height);

    .m-i-menu_open,
    .m-i-menu_close {
      position:absolute;
      transition-property: transform;
      transition-duration:var(--duration-hover-A);
      background-image:url(/assets/img/common/menu_button_bg.webp);
      background-size:cover;
    }

    body.is-global_menu-open & .m-i-menu_open {
      transform:scaleX(0);
    }
    body:not(.is-global_menu-open) & .m-i-menu_close {
      transform:scale(0);
    }
  }
}

/* BG
============================================================================= */
.g-bg {
  pointer-events: none;
  position:fixed;
  inset:0;
  z-index: -1;

  img {
    width:100%;
    height:100lvh;
    object-fit:cover;
  }
}


/* Pagetop
============================================================================= */
.g-pagetop_button {
  --size:9.4rem;
  --mb:2.8rem;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  margin-inline:auto var(--mb);
  margin-block:calc((var(--mb) + var(--size)) * -1) var(--mb);
  width:var(--size);
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--cc-blue-A);
  z-index:500;
  position:sticky;
  bottom:var(--mb);
  transform:translateY(calc(100% + var(--mb)));
  transition-property: transform,opacity;
  transition-duration: var(--duration-hover-A);
  transition-timing-function: var(--ttf-eo-cubic);
  @media (width <= 767px) {
    --size:5.6rem;
    --mb:1.0rem;
  }
  &::after {
    flex-shrink: 0;
    content:"";
    display:block;
    background-color:var(--cc-black-A);
    width:1.0rem;
    height:.8rem;
    clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  }
}
body.is-scrolled .g-pagetop_button {
  transform:translateY(0);
}


/* フッター
============================================================================= */
.g-footer {
  padding-block:12.0rem;
  color:#000;
  text-align: center;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    padding-block:6.0rem;
  }

  .logo {
    display:flex;
    justify-content:center;
    margin-bottom:4.0rem;
    font-size:8.0rem;
    line-height:1.2;
    letter-spacing: 0;
    color:var(--cc-heading-A);
  }

  .name {
    margin-bottom:3.6rem;
    font-size:1.4rem;
  }

  .bnrs {
    margin-bottom:3.6rem;
    display:flex;
    gap:1.5rem;
    @media (width > 767px) {
      justify-content: center;
    }
    @media (width <= 767px) {
      flex-direction: column;
      align-items: center;
    }
    > a {
      display:block;
      flex-shrink: 0;
    }
  }

  .hu_150th {
    display:flex;
    justify-content: center;
  }

  .copyright {
    margin-top:4.8rem;
    font-size:1.0rem;
  }
}

.g-contact {
  padding-block:8.0rem 8.8rem;
  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block:2.8rem 6.0rem;
  }

  .l-button-A {
    margin-top:4.0rem;
    @media (width <= 767px) {
      margin-top:2.8rem;
    }
  }

  .inner {
    padding-block:4.0rem;
    background-color:#fff;
    @media (width <= 767px) {
      padding-block:4.8rem;
    }
  }

}

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