@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:8.0rem;
  border-radius:100px;
  line-height:1;
  z-index: 1000;
  position:fixed;
  top:2.5rem;
  inset-inline:0;
  background-color:rgb(from var(--cc-white-A) r g b / .8);

  @media (width > 767px) {
    min-width:var(--pc-min-width);
    max-width:140.0rem;
    width:100%;
  }
  @media (width <= 767px) {
    margin-inline:3.5rem;
    width:calc(100% - 7.0rem);
    height:12.0rem;
    &::before {
      content:"";
      display:block;
      border-radius:100px;
      background-color:rgb(from var(--cc-white-A) r g b / .8);
      position:absolute;
      inset:0;
      pointer-events: none;
      z-index: -1;
    }
  }

  .logo {
    flex-shrink: 0;
    height:100%;
    @media (width <= 767px) {
    }

    > a {
      display:flex;
      align-items: center;
      padding-inline:5.0rem;
      height:100%;
      position:relative;

      img {
        transition-property: opacity;
        transition-duration:var(--duration-hover-A);
      }
    }
  }

  .header-nav {
    @media (width > 767px) {
      display:flex;
      margin-left:auto;
      gap:6.0rem;
      padding-right:1.5rem;
    }
    @media (width <= 767px) {
      padding-top:16.0rem;
      width:100vw;
      height:100dvh;
      background-color:var(--cc-gray-C);
      position:fixed;
      top:0;
      left:0;
      transition-property: transform;
      transition-duration:var(--duration-hover-A);
      z-index: -2;
      overflow-y:auto;
      overscroll-behavior: contain;

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

    .nav_list {
      @media (width > 767px) {
        display:flex;
        align-items: center;
        gap:3.2rem;
        font-size:1.5rem;
        font-weight:700;
        color:#666;
      }
      @media (width <= 767px) {
      }

      .nav_item {
        @media (width <= 767px) {
          border-bottom:1px solid #E1E1E1;
        }
        > :is(a,button) {
          display:flex;
          align-items: center;
          transition-property: color;
          transition-duration:var(--duration-hover-A);
          @media (hover:hover) {
            &:hover {
              color:var(--cc-blue-A);
            }
          }
          @media (width > 767px) {
            justify-content: center;
            gap:.8rem;
          }
          @media (width <= 767px) {
            justify-content: space-between;
            width:100%;
            height:10.0rem;
            font-size:3.0rem;
            letter-spacing: .05em;
            padding-inline:7.5rem;
          }
          &:not(.js-header-secondmenu-button) {
            &::after {
              background-color:var(--cc-blue-A);
              @media (width > 767px) {
                -webkit-mask-image:url(../svg/select_arrow.svg);
                mask-image:url(../svg/select_arrow.svg);
                aspect-ratio: 2/1;
                width:1.4rem;
              }
              @media (width <= 767px) {
              }
            }
          }
          &:is(.js-header-secondmenu-button) {
            @media (width <= 767px) {
              padding-right:7.2rem;
            }
            &::after {
              background-color:var(--cc-blue-A);
              transition-property: transform;
              transition-duration:var(--duration-hover-A);
              @media (width > 767px) {
                width:1.4rem;
              }
            }
            &[aria-expanded="true"]::after {
              transform:scaleY(-1);
            }
            &[aria-expanded="false"]::after {
              transform:scaleY(1);
            }
            &.is-accordion-target-active {
              color:var(--cc-blue-A);
            }
          }
        }
      }
    }
    .second-nav {
      @media (width > 767px) {
        margin-top:-1px;
        padding-top:3.2rem;
        position:absolute;
        transition-property: opacity;
        transition-duration:var(--duration-hover-A);
        &:not(.is-accordion-active) {
          pointer-events: none;
          opacity:0;
        }
      }
      @media (width <= 767px) {
        background-color:#fff;
        overflow: hidden;
        position: relative;
        &[aria-hidden="true"] {
          height: 0;
        }
        &[aria-hidden="false"] {
          z-index: 1;
        }
      }
    }
    .second-nav_list {
      font-size:1.5rem;
      line-height:1;
      border-radius:1.2rem;
      @media (width > 767px) {
        width:23.5rem;
        background-color:#f3fafa;
        overflow:hidden;
      }
      @media (width <= 767px) {
        font-size:3.0rem;
        letter-spacing: .05em;
      }
    }
    .second-nav_item {
      @media (width <= 767px) {
        border-top:1px solid #E1E1E1;
      }

      > a {
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding:1.6rem;
        transition-property: background-color,color;
        transition-duration:var(--duration-hover-A);
        @media (width <= 767px) {
          height:10.0rem;
          padding-inline:13.5rem 7.5rem;
        }

        &::after {
          transition-property: background-color;
          transition-duration:var(--duration-hover-A);
          background-color:var(--cc-blue-A);
        }

        @media (hover:hover) {
          &:hover {
            background-color:var(--cc-blue-A);
            color:#fff;
            &::after {
              background-color:#fff;
            }
          }
        }
      }

      &.-third {
        > a {
          @media (width > 767px) {
            padding-left:3.2rem;
          }
          @media (width <= 767px) {
            padding-left:16.5rem;
          }
        }
      }

    }
    .l-button-A {
      @media (width > 767px) {
        width:19.4rem;
        height:5.0rem;
      }
      @media (width <= 767px) {
        margin-block:5.0rem 10.0rem;
        width:calc(100% - 7.5rem);
        height:10.0rem;
      }
    }
  }

  .g-header_menu-btn {
    display:flex;
    justify-content:center;
    align-items: center;
    border-radius:50%;
    margin-inline:auto 2.4rem;
    width:8.0rem;
    height:8.0rem;
    background-color:var(--cc-blue-A);

    &::before,
    &::after {
      background-color:#fff;
      position:absolute;
      transition-property: transform;
      transition-duration:var(--duration-hover-A);
    }

    body.is-global_menu-open &::before {
      transform:scaleX(0);
    }
    body:not(.is-global_menu-open) &::after {
      transform:scale(0);
    }
  }
}

/* TopicPath
----------------------------------------------------------------------------- */
.g-topicpath {
  --topicpath-pd:2.0rem;
  padding-inline-start:var(--topicpath-pd);
  font-family:var(--ff-serif);
  font-size:1.1rem;
  line-height:1;
  letter-spacing: .20em;
  overflow-x:auto;
  z-index:10;

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

  > .inner {
    display:flex;
    align-items: center;
    height:6.0rem;
    @media (width > 767px) {
      margin-inline:auto;
      width:136.0rem;
    }
    @media (width <= 767px) {
      width:100%;
      font-size:1.1rem;
    }
  }

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

    a {
    }

    &:first-child {
      a {
        display:flex;
        align-items: center;
        gap:.3em;
        padding-bottom:.05em;
      }
    }
    &:not(:first-child) {
      &::before {
        flex-shrink: 0;
        content:"";
        margin-inline:0.8rem;
        border-bottom:1px solid var(--base-color);
        width:1.0rem;
        height:0;
      }
      > :is(a,span) {
        position:relative;
        top:-.125em;
      }
    }
    &:last-child {
      padding-inline-end:var(--topicpath-pd);
      color:#909090;
    }
    &:not(:last-child) {
      > :is(a) {
        text-underline-offset: 0;
      }
    }
  }
}


/* 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:6.0rem;
  position:relative;
  @media (width <= 767px) {
    padding-block:7.2rem 10.0rem;
  }

  .inner {
    position:relative;
    @media (width > 767px) {
      display:flex;
      align-items: center;
      column-gap:6.8rem;
    }
  }

  .pagetop {
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:1.2rem;
    height:fit-content;
    font-size:1.3rem;
    line-height:1;
    letter-spacing: 0;
    position:absolute;
    right:0;

    @media (width > 767px) {
      margin-block:auto;
      inset-block:0;
    }
    @media (width <= 767px) {
      gap:1.6rem;
      font-size:2.0rem;
      top:-3.2rem;
    }
  }
  .logo {
    @media (width <= 767px) {
      margin-bottom:6.4rem;
    }
  }
  .text {
    font-size:1.4rem;
    line-height:calc(30/14);

    @media (width <= 767px) {
      font-size:2.4rem;
    }

    .text-tel {
      font-size:2.5rem;
      line-height:calc(40/25);
      letter-spacing: -.03em;
      @media (width <= 767px) {
        margin-block:3.2rem;
        font-size:4.8rem;
      }
    }

    a:not([href^="tel:"]) {
      text-decoration: underline;
      @media (hover:hover) {
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}


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