@charset "UTF-8";

/* ==========================================================================
    Test style
============================================================================= */
@media (min-width: 768px) {
  .l-nav:not(.is-open),
  .l-nav:not(.is-open) .l-nav__list,
  .l-nav:not(.is-open) .l-nav__item {
    overflow: visible;
  }
  .l-nav:not(.is-open) .l-nav__item {
    padding-block-end: 10px;
    position: relative;
  }

  .l-nav:not(.is-open) .l-nav__item .sub-list {
    background-color: #fff;
    border: solid 3px var(--main-color);
    border-bottom: solid 6px var(--main-color);
    border-radius: 20px;
    display: block;
    font-size: clamp(1.2rem, 0.9722vw, 1.4rem);
    padding: 20px 30px;
    opacity: 0;
    position: absolute;
    text-align: left;
    width: 280px;
    top: 100%;
    left: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100;
  }

  .l-nav:not(.is-open) .l-nav__item .sub-list::after {
    background: url("../images/top/bg_info_list04.svg") no-repeat center bottom/100% auto;
    content: "";
    position: absolute;
    bottom: -33px;
    right: max(-2.34375vw, -30px);
    height: calc(100% + 33px);
    width: 5.468vw;
    max-width: 70px;
  }

  .l-nav:not(.is-open) .l-nav__item:hover > .sub-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .l-nav:not(.is-open) .l-nav__item .sub-list > li a {
    display: block;
    padding-block: 10px;
    padding-inline-start: 2em;
    position: relative;
  }

  .l-nav:not(.is-open) .l-nav__item .sub-list > li a::before {
    content: "";
    background-color: var(--main-color);
    display: inline-block;
    width: 10px;
    height: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 767.98px) {
  .c-button__txt {
    margin-inline-start: -20px;
  }
  .c-button::after {
    width: 30px;
  }
}