._Footer_15ppp_1 {
  background-color: #000;
  color: var(--TEXT-WHITE);
  display: grid;
  gap: 0 var(--OUTSIDE-GUTTER);
  grid-area: footer;
  grid-template-columns:
    1fr minmax(var(--CONTENT-WIDTH-SP), var(--CONTENT-WIDTH-WIDE-PC))
    1fr;
  grid-template-rows: auto;
}

._contentTop_15ppp_13,
._contentBottom_15ppp_14 {
  display: grid;
  gap: 0 var(--OUTSIDE-GUTTER);
  grid-column: 1 / 4;
  grid-template-columns:
    1fr minmax(var(--CONTENT-WIDTH-SP), var(--CONTENT-WIDTH-WIDE-PC))
    1fr;
}

._contentTop_15ppp_13 {
  /* https://min-max-calculator.9elements.com/?320,496,768,1024 */
  height: clamp(20rem, -13rem + 68.75vw, 31rem);
  background-image: url(/assets/images/common/structures/bg-footer.avif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: clip;

  @media (width >= 1024px) {
    height: 496px;
  }
}

._contentTopInner_15ppp_37 {
  grid-column: 1 / 4;
  position: relative;
}

._contentBottomInner_15ppp_42 {
  grid-column: 2 / 3;
  padding: var(--SPACE-BLOCK-SPACING-24) 0;

  @media (width >= 1024px) {
    padding: var(--SPACE-BLOCK-SPACING-48) 0 var(--SPACE-BLOCK-SPACING-40);
  }
}

._logo_15ppp_51 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* https://min-max-calculator.9elements.com/?240,500,768,1024 */
  max-width: clamp(15rem, -33.75rem + 101.56vw, 31.25rem);
}

._navigation_15ppp_60 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-40);

  @media (width >= 1024px) {
    justify-content: initial;
    /* https://min-max-calculator.9elements.com/?24,56,1024,1920 */
    column-gap: clamp(1.5rem, -0.786rem + 3.57vw, 3.5rem);
  }
}

._navigationLink_15ppp_73 {
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-SEMI-BOLD);
  line-height: 1.5;
  transition: opacity var(--TRANSITION);

  @media (width >= 1024px) {
    font-size: var(--FONT-SIZE-BASE);
  }

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }
}

._utility_15ppp_94 {
  display: grid;
  gap: var(--SPACE-BLOCK-SPACING-32) 0;
  margin-top: var(--SPACE-BLOCK-SPACING-32);

  @media (width >= 1024px) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-32);
    margin-top: var(--SPACE-BLOCK-SPACING-96);
  }
}

._legal_15ppp_107 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-24);

  @media (width >= 1024px) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    justify-content: initial;
    /* https://min-max-calculator.9elements.com/?24,40,1024,1920 */
    column-gap: clamp(1.5rem, 0.357rem + 1.79vw, 2.5rem);
  }
}

._legalLink_15ppp_122 {
  font-size: var(--FONT-SIZE-XS);
  line-height: 1.5;
  transition: opacity var(--TRANSITION);

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }
}

._social_15ppp_138 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 var(--SPACE-BLOCK-SPACING-32);

  @media (width >= 1024px) {
    grid-column: 2 / 3;
    grid-row: 1 / -1;
    justify-content: initial;
    height: max-content;
  }
}

._socialLink_15ppp_152 {
  display: block;
  width: 32px;
  transition: opacity var(--TRANSITION);

  @media (width >= 1024px) {
    width: 40px;
  }

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }
}

._socialIcon_15ppp_172 {
  display: block;
  width: 100%;
}

._copyright_15ppp_177 {
  text-align: center;

  @media (width >= 1024px) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: initial;
  }

  > small {
    font-size: var(--FONT-SIZE-XS);
    line-height: 1.5;
  }
}
._NavigationTop_1nyk4_1 {
  /* https://min-max-calculator.9elements.com/?56,64,768,1024 */
  --local-link-size: clamp(3.5rem, 2rem + 3.13vw, 4rem);
  /* https://min-max-calculator.9elements.com/?24,32,768,1024 */
  --local-arrow-icon-size: clamp(1.5rem, 3.13vw, 2rem);
  --local-foreground: var(--TEXT-BLACK);
  --local-background: var(--BG-WHITE);

  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  z-index: var(--Z-INDEX-FLOATING);
  transition:
    opacity var(--TRANSITION),
    visibility var(--TRANSITION);

  @media (scripting: none) {
    opacity: 1;
    visibility: visible;
    position: fixed;
  }

  &.is-fixed {
    position: fixed;
  }

  &.is-shown {
    opacity: 1;
    visibility: visible;
  }
}

._inner_1nyk4_38 {
  display: flex;
  justify-content: flex-end;
  max-width: calc(1920px - ((72px - var(--OUTSIDE-GUTTER)) * 2));
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--OUTSIDE-GUTTER);
  position: relative;
}

._link_1nyk4_48 {
  background-color: var(--local-background);
  border: 1px solid var(--BORDER-BLACK);
  border-radius: var(--RADIUS-ROUND);
  display: block;
  height: var(--local-link-size);
  overflow: hidden;
  padding: var(--local-link-size) 0 0 var(--local-link-size);
  pointer-events: auto;
  position: relative;
  width: var(--local-link-size);
  transition: background-color var(--TRANSITION);

  /* arrow, icon */
  &::before {
    background-color: var(--local-foreground);
    content: '';
    display: block;
    height: var(--local-arrow-icon-size);
    left: 50%;
    mask-image: url('/assets/images/common/structures/icon-arrow-upward.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--local-arrow-icon-size);
    transition: background-color var(--TRANSITION);
  }

  &:focus-visible {
    --local-foreground: var(--TEXT-WHITE);
    --local-background: var(--BG-BLACK);
  }

  @media (any-hover: hover) {
    &:hover {
      --local-foreground: var(--TEXT-WHITE);
      --local-background: var(--BG-BLACK);
    }
  }
}
._Header_s4j72_1 {
  --ANIMATION-SPEED: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

  padding: 0 var(--OUTSIDE-GUTTER);
  display: grid;
  grid-area: header;
  grid-template-columns:
    1fr minmax(var(--CONTENT-WIDTH-SP), var(--CONTENT-WIDTH-WIDE-PC))
    1fr;
  background-color: var(--BG-WHITE);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--Z-INDEX-HEADER);

  @media (scripting: none) {
    position: static;
  }
}

._outer_s4j72_22 {
  display: grid;
  gap: 0;
  grid-column: 1 / 4;
  grid-template-columns:
    1fr minmax(var(--CONTENT-WIDTH-SP), var(--CONTENT-WIDTH-WIDE-PC))
    1fr;
  padding: 0;

  @media (width >= 1920px) {
    padding-bottom: 0;
    gap: 0 var(--OUTSIDE-GUTTER);
  }
}

._inner_s4j72_37 {
  grid-column: 2 / 3;

  > :is(:first-child) {
    margin-top: 0;
  }

  > :is(:last-child) {
    margin-bottom: 0;
  }
}

._bar_s4j72_49 {
  @media (width >= 1024px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

._logoWrap_s4j72_57 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--SPACE-BLOCK-SPACING-24) 0;

  @media (width >= 1024px) {
    padding: 0;
  }
}

._logo_s4j72_57 {
  width: 144px;
  height: 24px;

  &:where(h1) {
    margin: 0;
  }

  @media (width >= 1024px) {
    width: 192px;
    height: 32px;
  }

  @media (width >= 1920px) {
    width: 240px;
    height: 40px;
  }
}

._logoLink_s4j72_87 {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity var(--TRANSITION);

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }
}

._logoImage_s4j72_104 {
  display: block;
  height: 100%;
}

._menuToggle_s4j72_109 {
  border: none;
  padding: 0;
  display: block;
  width: 32px;
  height: 18px;
  position: relative;

  /* ハンバーガーメニューアイコン */
  &::before,
  &::after,
  ._menuToggleCenter_s4j72_120 {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--BG-BLACK);
    position: absolute;
  }

  &::before {
    top: 0;
  }

  &::after {
    bottom: 0;
  }

  ._menuToggleCenter_s4j72_120 {
    top: 50%;
    transform: translateY(-50%);
    font-size: 0;

    /* ハンバーガーメニューアイコン 閉じる用 */
    &::before,
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--BG-BLACK);
      position: absolute;
      left: 0;
      top: 0;
      transition: transform var(--TRANSITION);
    }
  }

  &.is-open {
    &::before,
    &::after {
      display: none;
    }

    ._menuToggleCenter_s4j72_120 {
      background-color: transparent;

      &::before {
        transform: rotate(45deg);
      }

      &::after {
        transform: rotate(-45deg);
      }
    }
  }

  @media (width >= 1024px) {
    display: none;
  }
}

._navigation_s4j72_181 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--BG-WHITE);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ANIMATION-SPEED);
  max-height: calc(100vh - var(--HEADER-HEIGHT));
  overflow: auto;

  @media (width >= 1024px) {
    padding-top: var(--SPACE-BLOCK-SPACING-16);
  }

  @media (width >= 1024px) {
    position: static;
    transform: none;
    grid-template-rows: 1fr;
  }

  &.is-open {
    grid-template-rows: 1fr;
  }

  @media (scripting: none) {
    position: static;
    max-height: none;
    grid-template-rows: 1fr;
  }
}

._navigationOuter_s4j72_214 {
  min-height: 0;

  @media (width >= 1024px) {
    overflow: hidden;
  }
}

._navigationInner_s4j72_222 {
  display: flex;
  flex-direction: column-reverse;

  @media (width >= 1024px) {
    display: flex;
    flex-direction: column;
    gap: var(--SPACE-BLOCK-SPACING-16);
  }
}

._utility_s4j72_233 {
  padding: var(--SPACE-BLOCK-SPACING-24) var(--SPACE-BLOCK-SPACING-16)
    var(--SPACE-BLOCK-SPACING-40);

  @media (width >= 1024px) {
    padding: 0;
  }
}

._utilityList_s4j72_242 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--SPACE-BLOCK-SPACING-24);

  @media (width >= 1024px) {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  @media (width >= 1920px) {
    gap: var(--SPACE-BLOCK-SPACING-32);
  }
}

._utilityItemLink_s4j72_258 {
  font-size: var(--FONT-SIZE-XS);
  display: inline-flex;
  align-items: center;
  gap: var(--SPACE-BLOCK-SPACING-8);
  line-height: 1.5;
  transition: opacity var(--TRANSITION);

  /* 矢印アイコン */
  &::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('/assets/images/common/icon-arrow-right-bold.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width >= 1024px) {
      display: none;
    }
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }
}

._utilityItemSearch_s4j72_293 {
  display: none;
  border-left: 1px solid var(--BORDER-BLACK);

  @media (width >= 1024px) {
    display: block;
  }
}

._utilityItemSearchLink_s4j72_302 {
  border: none;

  @media (width >= 1024px) {
    height: 100%;
    padding-left: var(--SPACE-BLOCK-SPACING-16);
    padding-right: 20px;
    display: flex;
    align-items: center;
    gap: var(--SPACE-BLOCK-SPACING-8);
    font-size: var(--FONT-SIZE-XS);
    transition: opacity var(--TRANSITION);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }

  /* 検索アイコン */
  &::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/assets/images/common/structures/icon-search.svg');
  }
}

._siteSearch_s4j72_336 {
  width: 100%;
  max-width: 355px;
  margin: var(--SPACE-BLOCK-SPACING-56) auto 0;

  @media (width >= 1024px) {
    margin-top: 0;
    max-width: 100%;
    background-color: var(--BG-WHITE);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ANIMATION-SPEED);

    &.is-open {
      grid-template-rows: 1fr;
      border-top: 1px solid var(--BORDER-LIGHT);
    }
  }
}

._siteSearchInner_s4j72_360 {
  @media (width >= 1024px) {
    overflow: hidden;
    min-height: 0;
  }
}

._siteSearchContent_s4j72_367 {
  display: flex;
  justify-content: space-between;
  gap: var(--SPACE-BLOCK-SPACING-64);

  @media (width >= 1024px) {
    padding: var(--SPACE-BLOCK-SPACING-56) 0;
    justify-content: center;
  }
}

._siteSearchHead_s4j72_378 {
  display: none;

  @media (width >= 1024px) {
    display: block;
    font-size: var(--FONT-SIZE-2XL);
    font-weight: var(--FONT-WEIGHT-BOLD);
    line-height: 1.5;
  }
}

._siteSearchInputWrap_s4j72_389 {
  flex-grow: 1;
  position: relative;
  border-bottom: 1px solid var(--BORDER-BLACK);

  @media (width >= 1024px) {
    width: 100%;
    max-width: 720px;
  }
}

._siteSearchInput_s4j72_389 {
  width: 100%;
  padding-bottom: 12px;
  border: none;
  font-size: var(--FONT-SIZE-XS);
}

._siteSearchSubmit_s4j72_407 {
  --local-btn-size: 32px;

  position: absolute;
  right: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background-image: url('/assets/images/common/structures/icon-search.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  padding: var(--local-btn-size) var(--local-btn-size) 0 0;
  overflow: hidden;
}

._mainList_s4j72_424 {
  display: block;

  @media (width >= 1024px) {
    display: flex;
  }

  ._mainListItem_s4j72_431 {
    border-bottom: 1px solid var(--BORDER-BLACK);

    &:first-child {
      border-top: 1px solid var(--BORDER-BLACK);

      @media (width >= 1024px) {
        border-top: none;
      }
    }

    @media (width >= 1024px) {
      border-bottom: none;
    }

    @media (scripting: none) {
      width: 100%;

      @media (width >= 1024px) {
        width: calc(100% / 6);
      }
    }
  }
}

._trigger_s4j72_456 {
  border: none;
  width: 100%;
  padding: var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-40)
    var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-16);
  position: relative;
  font-weight: var(--FONT-WEIGHT-BOLD);

  @media (width >= 1024px) {
    padding: 0 var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-24);
    font-size: var(--FONT-SIZE-BASE);
    line-height: 1.5;
    position: relative;

    /* ホバー,フォーカス,カレント用の下線 */
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background-color: var(--BORDER-BLACK);
      transform: translateX(-50%);
      transition:
        width var(--TRANSITION),
        height var(--TRANSITION);
    }

    @media (any-hover: hover) {
      &:hover {
        &::after {
          height: 2px;
          width: 100%;
        }
      }
    }

    &:focus-visible {
      &::after {
        height: 2px;
        width: 100%;
      }
    }

    &.is-open {
      &::after {
        height: 2px;
        width: 100%;
      }
    }

    &.is-current {
      &::after {
        height: 4px;
        width: 100%;
      }
    }
  }

  @media (width >= 1920px) {
    padding: 0 20px var(--SPACE-BLOCK-SPACING-24);
  }
}

._triggerIcon_s4j72_521 {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 0;

  /* + アイコン */
  &::before,
  &::after {
    content: '';
    width: 14px;
    height: 2px;
    background-color: var(--BG-BLACK);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform var(--TRANSITION);
  }

  @media (width >= 1024px) {
    display: none;
  }

  @media (scripting: none) {
    display: none;
  }
}

._trigger_s4j72_456.is-open {
  ._triggerIcon_s4j72_521::after {
    transform: translate(-50%, -50%) rotate(0);
  }
}

._panel_s4j72_564 {
  --BOTTOM-SPACE: 80px;

  width: 100%;
  display: grid;
  gap: 0 var(--OUTSIDE-GUTTER);
  grid-template-columns: 1fr minmax(
      var(--CONTENT-WIDTH-SP),
      var(--CONTENT-WIDTH-WIDE-PC)
    ) 1fr;
  background-color: var(--BG-WHITE);

  @media (width >= 1024px) {
    max-height: calc(100vh - var(--HEADER-HEIGHT) - var(--BOTTOM-SPACE));
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    overflow: hidden;
  }

  &.is-open {
    border-top: 1px solid var(--BORDER-BLACK);
    overflow: auto;

    @media (width >= 1024px) {
      border-top: 1px solid var(--BORDER-LIGHT);
    }

    ._panelOuter_s4j72_593 {
      grid-template-rows: 1fr;
    }
  }

  @media (scripting: none) {
    display: block;
    position: static;
    overflow: auto;
    max-height: none;
  }
}

._panelOuter_s4j72_593 {
  display: grid;
  gap: 0 var(--OUTSIDE-GUTTER);
  grid-column: 1 / 4;
  grid-template-columns: 1fr minmax(
      var(--CONTENT-WIDTH-SP),
      var(--CONTENT-WIDTH-WIDE-PC)
    ) 1fr;

  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ANIMATION-SPEED);

  @media (scripting: none) {
    grid-template-rows: 1fr;
    gap: 0 var(--SPACE-BLOCK-SPACING-8);

    @media (width >= 1024px) {
      grid-template-columns: 1fr;
    }
  }
}

._panelInner_s4j72_628 {
  grid-column: 2 / 3;
  overflow: hidden;
  min-height: 0;

  @media (scripting: none) {
    overflow: auto;
  }
}

._panelContent_s4j72_638 {
  padding: var(--SPACE-BLOCK-SPACING-24) 0;

  @media (width >= 1024px) {
    padding: var(--SPACE-BLOCK-SPACING-56) 0 var(--SPACE-BLOCK-SPACING-40);
  }

  @media (width >= 1920px) {
    padding: var(--SPACE-BLOCK-SPACING-56) 0;
  }
}

._panelHead_s4j72_650 {
  margin-bottom: var(--SPACE-BLOCK-SPACING-24);

  @media (width >= 1024px) {
    margin-bottom: var(--SPACE-BLOCK-SPACING-56);
  }
}

._panelHeadLink_s4j72_658 {
  display: inline-flex;
  align-items: center;
  gap: var(--SPACE-BLOCK-SPACING-8);
  font-size: var(--FONT-SIZE-BASE);
  font-weight: var(--FONT-WEIGHT-BOLD);
  line-height: 1.5;
  transition: opacity var(--TRANSITION);

  @media (width >= 1024px) {
    font-size: var(--FONT-SIZE-2XL);
    font-weight: var(--FONT-WEIGHT-BOLD);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &:focus {
    opacity: var(--OPACITY-HOVER);
  }

  /* 矢印アイコン */
  &::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('/assets/images/common/icon-arrow-right-bold.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width >= 1024px) {
      width: 24px;
      height: 24px;
    }
  }
}

._subList_s4j72_700 {
  display: flex;
  flex-direction: column;
  margin-left: var(--SPACE-BLOCK-SPACING-16);
  gap: var(--SPACE-BLOCK-SPACING-24);

  @media (width >= 1024px) {
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--SPACE-BLOCK-SPACING-16);
  }

  @media (width >= 1281px) {
    grid-template-columns: repeat(5, 1fr);
  }

  @media (scripting: none) {
    display: block;
  }
}

._subLink_s4j72_722 {
  display: inline-flex;
  align-items: start;
  gap: var(--SPACE-BLOCK-SPACING-8);
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-BOLD);
  line-height: 1.5;
  transition: opacity var(--TRANSITION);

  /* 矢印アイコン */
  &::before {
    content: '';
    display: none;
    width: 16px;
    height: 24px;
    background-image: url('/assets/images/common/icon-arrow-right-bold.svg');
    background-repeat: no-repeat;
    background-position: center;

    @media (width >= 1024px) {
      display: block;
    }
  }

  &[target='_blank'] {
    svg {
      transform: translateY(3px);
    }
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &:focus {
    opacity: var(--OPACITY-HOVER);
  }

  @media (width >= 1024px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}

._relatedLinkList_s4j72_767 {
  margin-top: var(--SPACE-BLOCK-SPACING-24);
  padding-top: var(--SPACE-BLOCK-SPACING-24);
  border-top: 1px solid var(--BORDER-LIGHT);

  @media (width >= 1024px) {
    margin-top: var(--SPACE-BLOCK-SPACING-40);
    padding-top: var(--SPACE-BLOCK-SPACING-32);
  }
}

._relatedLink_s4j72_767 {
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-NORMAL);

  @media (width >= 1024px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}

._productList_s4j72_787 {
  display: flex;
  flex-direction: column;
  gap: var(--SPACE-BLOCK-SPACING-24);
  margin-left: var(--SPACE-BLOCK-SPACING-16);

  @media (width >= 1024px) {
    margin-left: 0;
    flex-direction: row;
    gap: var(--SPACE-BLOCK-SPACING-8);
  }
  @media (scripting: none) {
    display: block;
  }
}

._productsImage_s4j72_803 {
  display: none;

  @media (width >= 1024px) {
    display: flex;
    margin-bottom: var(--SPACE-BLOCK-SPACING-16);
  }
}

._productsItemHeadLink_s4j72_812 {
  display: block;
  transition: opacity var(--TRANSITION);

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &:focus {
    opacity: var(--OPACITY-HOVER);
  }

  @media (width >= 1024px) {
    margin-bottom: var(--SPACE-BLOCK-SPACING-16);
  }
}

._productsRowHeadInner_s4j72_831 {
  display: flex;
  align-items: start;
  gap: 4px;
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-BOLD);
  line-height: 1.5;

  /* 矢印アイコン */
  &::before {
    content: '';
    display: none;
    width: 16px;
    height: 21px;
    background-image: url('/assets/images/common/icon-arrow-right-bold.svg');
    background-repeat: no-repeat;
    background-position: center;

    @media (width >= 1024px) {
      display: block;
    }
  }
}

._productsRowList_s4j72_855 {
  --gap: var(--SPACE-BLOCK-SPACING-8);
  display: none;

  @media (width >= 1024px) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--SPACE-BLOCK-SPACING-16) var(--gap);
    border-left: 1px solid var(--BORDER-LIGHT);
    padding-left: var(--SPACE-BLOCK-SPACING-16);
  }

  @media (width >= 1920px) {
    padding-right: var(--SPACE-BLOCK-SPACING-8);
  }

  &._productsRowColmun2_s4j72_871 {
    ._productsRowItem_s4j72_872 {
      @media (width >= 1024px) {
        width: 100%;
      }

      @media (width >= 1281px) {
        width: calc((100% - var(--gap)) / 2);
      }
    }
  }
}

._productsRowItem_s4j72_872 {
  width: 100%;
}

._productsItem_s4j72_812 {
  @media (width >= 1024px) {
    width: calc(100% / 8);
  }

  @media (scripting: none) {
    width: 100%;
  }
}

._productsRowLink_s4j72_898 {
  display: block;
  line-height: 1.5;
  transition: opacity var(--TRANSITION);

  @media (width >= 1024px) {
    font-size: var(--FONT-SIZE-XS);

    @media (any-hover: hover) {
      &:hover {
        opacity: var(--OPACITY-HOVER);
      }
    }

    &:focus-visible {
      opacity: var(--OPACITY-HOVER);
    }
  }
}

._overlay_s4j72_918 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: calc(var(--Z-INDEX-HEADER) - 1);

  &.is-active {
    display: block;
  }
}
@layer base {

/*! kiso.css v1.2.4 | MIT License | https://github.com/tak-dcxi/kiso.css */

/* ======================================================
//  MARK: Universal
// ====================================================== */
*,
::before,
::after {
  /*
  * Includes `padding` and `border` in the element's specified dimensions.
  * It is highly recommended to set `box-sizing: border-box;` by default, as it makes styling much easier, especially when specifying `width: 100%;`.
  */
  box-sizing: border-box;
}

/* ======================================================
//  MARK: Document and Body Elements
// ====================================================== */
:where(:root) {
  /* In Safari, if `font-family` is not specified, a serif font is applied by default, so `sans-serif` is set as the default here. */
  font-family: sans-serif;

  /*
  * For accessibility, it is recommended to set the `line-height` to at least 1.5 times the text size within paragraphs.
  * @see https://waic.jp/translations/WCAG21/#visual-presentation
  */
  line-height: 1.5;

  /* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */
  text-spacing-trim: trim-start;

  /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
  text-autospace: normal;

  /* Prevents misreading by applying strict line-breaking rules. */
  line-break: strict;

  /* Wraps English words mid-word. Specifying `anywhere` also prevents content from overflowing in layouts like `flex` or `grid`. */
  overflow-wrap: anywhere;

  /*
  * Mobile browsers have an algorithm that automatically adjusts font sizes to prevent text from becoming too small.
  * This controls the auto-adjustment feature to prevent unwanted resizing.
  */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /*
  * Prevents layout shift caused by the appearance or disappearance of the scrollbar.
  * Starting with Chrome 145, specifying `scrollbar-gutter: stable` will cause vw to be calculated without considering the scrollbar, which will also prevent horizontal scrolling.
  */
  scrollbar-gutter: stable;

  /* Suppresses the tap highlight on iOS. */
  -webkit-tap-highlight-color: transparent;
}

:where(body) {
  /*
  * When creating a sticky footer, a minimum height is often required.
  * Setting the `min-block-size` to the dynamic viewport height ensures enough space for the footer.
  */
  min-block-size: 100dvb;

  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

/* ======================================================
// MARK: Sections
// ------------------------------------------------------ */
:where(:is(h1, h2, h3, h4, h5, h6):lang(en)) {
  /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
  text-wrap: pretty;
}

:where(h1) {
  /*
  * Adjusts user agent (UA) styles for `h1` elements within sectioning content.
  * This addresses DevTools warnings that appear when `h1` elements nested within sectioning content lack `font-size` and `margin` properties.
  * @see https://html.spec.whatwg.org/#sections-and-headings
  */
  margin-block: 0.67em;
  font-size: 2em;
}

:where(h2, h3, h4, h5, h6) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(search) {
  /*
  * The `<search>` element is supported from Safari 17.
  * This prevents it from being displayed as an inline element in unsupported environments.
  */
  display: block flow;
}

/* ======================================================
//  MARK: Grouping content
// ====================================================== */
:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(blockquote, figure) {
  /* The `margin-inline` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-inline: unset;
}

:where(p:lang(en)) {
  /*
  * In English, a single word on the last line is called a "widow" or "orphan" and is considered something to avoid as it makes the text harder to read.
  * Therefore, when lang="en", this prevents the last line from ending with a single word.
  */
  text-wrap: pretty;
}

:where(address:lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(ul, ol, menu) {
  /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  padding-inline-start: unset;

  /*
  * In Safari, using `list-style: none` prevents screen readers from announcing lists.
  * `list-style-type: ""` is used to hide markers without affecting accessibility.
  * @see https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
  */
  list-style-type: "";
}

:where(dt) {
  /* It is common to display `<dt>` elements in bold, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}

:where(dd) {
  /* The `margin-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-inline-start: unset;
}

:where(pre) {
  /*
  * Since `text-spacing-trim` can affect spacing in `<pre>` elements even with its initial value, the final rendering may depend on the user's font settings.
  * To ensure consistent alignment, `space-all` is explicitly specified and inheritance is prevented.
  */
  text-spacing-trim: space-all;

  /* Set to `no-autospace` as it can cause misalignment with monospaced fonts. */
  text-autospace: no-autospace;
}

@media print {
  :where(pre) {
    /* Prevent text wrapping in print media. */
    text-wrap-mode: unset;
  }
}

/* ======================================================
//  MARK: Text-level semantics
// ====================================================== */
:where(em:lang(ja)) {
  /* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}

:where(:is(i, cite, em, dfn):lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(u, s, del, ins) {
  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

:where(code, kbd, samp) {
  /*
  * Set a monospace font family referencing Tailwind.
  * @see https://tailwindcss.com/docs/font-family
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to `initial` to prevent inheritance. */
  font-feature-settings: initial;
  font-variation-settings: initial;

  /* Resets the `font-size` specified in the UA stylesheet to allow inheritance. */
  font-size: unset;

  /*
  * Disables font ligatures for programming fonts (like Fira Code)
  * to prevent character combinations like `=>` from being rendered as a single symbol (e.g., `⇒`).
  */
  font-variant-ligatures: none;
}

:where(abbr[title]) {
  /*
  * The `<abbr>` element with the `title` attribute isn't helpful regarding accessibility because support is inconsistent, and it's only accessible to some users.
  * This rule shows a dotted underline on abbreviations in all browsers (there's a bug in Safari) and changes the cursor.
  * @see https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
  */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-inset: auto;
  cursor: help;
}

:where(time) {
  /* Set to `no-autospace` because date notations in typography do not include spaces. */
  text-autospace: no-autospace;
}

@media (forced-colors: active) {
  :where(mark) {
    /*
    * In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
    */
    background-color: Highlight;
    color: HighlightText;
  }
}

@media print {
  :where(mark) {
    /*
    * Not all printers support color, and users might print in grayscale.
    * It's worth adding a non-disruptive style that scales with the text, as an alternative to relying only on background color.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkPrint
    */
    border-width: 1px;
    border-style: dotted;
  }
}

/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a) {
  /*
  * The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance.
  * In Firefox on iOS, the user agent stylesheet’s text color is applied even when the text is not a link.
  * @see https://github.com/darkreader/darkreader/issues/9836
  */
  color: unset;
}

:where(a:any-link) {
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  text-decoration-line: unset;

  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;

  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

/* ======================================================
//  MARK: Embedded content
// ====================================================== */
:where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) {
  /* Prevents overflow by setting the maximum width to `100%`. */
  max-inline-size: 100%;

  /* Prevents extra space from appearing at the bottom of the element. */
  vertical-align: bottom;
}

:where(img, svg, picture, video, canvas, model, iframe, embed, object) {
  /*
  * Automatically adjust block size based on content.
  * Exclude the <audio> element as it disappears when block-size is auto.
  * @see https://github.com/tak-dcxi/kiso.css/issues/5
  */
  block-size: auto;
}

:where(iframe) {
  /* The `border` specified in the UA stylesheet is often unnecessary, so it is reset. */
  border: unset;
}

/* ======================================================
//  MARK: Tabular data
// ====================================================== */
:where(table) {
  /* Collapse borders for a more refined table design. */
  border-collapse: collapse;
}

:where(caption, th) {
  /* The `text-align` specified in the UA stylesheet is often unnecessary, so it is reset. */
  text-align: unset;
}

:where(caption:lang(en)) {
  /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
  text-wrap: pretty;
}

/* ======================================================
//  MARK: Forms
// ====================================================== */
:where(button, input, select, textarea),
::file-selector-button {
  /*
  * These elements are often styled with a border, so a `1px` border is applied by default for consistency.
  * This ensures readability even for unstyled elements.
  * When resetting, it's recommended to use `border-color: transparent` instead of `border: none` to account for forced color modes.
  */
  border-width: 1px;
  border-style: solid;

  /* These styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
  border-color: unset;
  border-radius: unset;
  color: unset;
  font: unset;
  letter-spacing: unset;
  text-align: unset;
}

:where(input:is([type="radio" i], [type="checkbox" i])) {
  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

:where(input[type="file" i]) {
  /* The `border` is often unnecessary, so it is reset here. */
  border: unset;
}

:where(input[type="search" i]) {
  /* Remove the rounded corners of search inputs on macOS and normalize the background color. */
  -webkit-appearance: textfield;
}

@supports (-webkit-touch-callout: none) {
  :where(input[type="search" i]) {
    /* normalize the background color on iOS. */
    background-color: Canvas;
  }
}

:where(
    input:is(
        [type="tel" i],
        [type="url" i],
        [type="email" i],
        [type="number" i]
      ):not(:placeholder-shown)
  ) {
  /*
  * Certain input types need to maintain left alignment even in right-to-left (RTL) languages.
  * However, this only applies when the value is not empty, as the placeholder should be right-aligned.
  * @see https://rtlstyling.com/posts/rtl-styling#form-inputs
  */
  direction: ltr;
}

:where(textarea) {
  /* The `margin-block` specified in Firefox's UA stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;

  /* Allows vertical resizing for `<textarea>` elements. */
  resize: block;
}

:where(
    input:not([type="button" i], [type="submit" i], [type="reset" i]),
    textarea,
    [contenteditable]
  ) {
  /* Set to `no-autospace` because `text-autospace` can insert spaces during input, potentially causing erratic behavior. */
  text-autospace: no-autospace;
}

:where(
    button,
    input:is([type="button" i], [type="submit" i], [type="reset" i])
  ),
::file-selector-button {
  /* The `background-color` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  background-color: unset;
}

:where(
    button,
    input:is([type="button" i], [type="submit" i], [type="reset" i]),
    [role="tab" i],
    [role="button" i],
    [role="option" i]
  ),
::file-selector-button {
  /*
  * On iOS, double-tapping a button can cause zooming, which harms usability.
  * `touch-action: manipulation` is specified to disable zooming on double-tap.
  * Third-party plugins such as Swiper sometimes use div elements with these roles as buttons, since double-tapping a div can still trigger zooming, it's advisable to specify this property.
  */
  touch-action: manipulation;
}

:where(
    button:enabled,
    label[for],
    select:enabled,
    input:is(
        [type="button" i],
        [type="submit" i],
        [type="reset" i],
        [type="radio" i],
        [type="checkbox" i]
      ):enabled,
    [role="tab" i],
    [role="button" i],
    [role="option" i]
  ),
:where(:enabled)::file-selector-button {
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

:where(fieldset) {
  /*
  * Prevent fieldset from causing overflow.
  * Reset the default `min-inline-size: min-content` to prevent children from stretching fieldset.
  * @see https://github.com/twbs/bootstrap/issues/12359
  */
  min-inline-size: 0;

  /* The following default styles are often unnecessary, so they are reset. */
  margin-inline: unset;
  padding: unset;
  border: unset;
}

:where(legend) {
  /* The default `padding-inline` is often unnecessary, so it is reset. */
  padding-inline: unset;
}

:where(progress) {
  /* Resets the vertical alignment of the `<progress>` element to its initial value. */
  vertical-align: unset;
}

::placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

/* ======================================================
//  MARK: Interactive elements
// ====================================================== */
:where(summary) {
  /* The default triangle marker is often unnecessary, so it is disabled. */
  list-style-type: "";

  /* Changing the cursor to a pointer clarifies the clickability of the element. */
  cursor: pointer;
}

:where(summary)::-webkit-details-marker {
  /* In Safari versions earlier than 18.4 (released in April 2025), a triangle icon is displayed using the -webkit-details-marker CSS pseudo-element, so it should be removed. */
  display: none;
}

:where(dialog, [popover]) {
  /*
  * When these fixed-position elements are scrolled, preventing scroll chaining on the underlying page and bounce effects on mobile improves usability.
  * Disabling block-direction scroll chaining is recommended.
  */
  overscroll-behavior-block: contain;

  /* The following default styles are often unnecessary, so they are reset. */
  padding: unset;
  border: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  /*
  * These elements can be easily displayed by explicitly setting their `display` property.
  * To prevent them from appearing when not in an open state, they are forcibly hidden.
  */
  display: none !important;
}

:where(dialog) {
  /*
  * The max width and height of a `<dialog>` element are typically determined by the design.
  * These UA stylesheet properties are reset as they can be obstructive, especially when trying to make the dialog full-screen.
  */
  max-inline-size: unset;
  max-block-size: unset;
}

:where(dialog)::backdrop {
  /* Normalize the background color of the `::backdrop` element. */
  background-color: oklch(0% 0 0deg / 30%);
}

:where([popover]) {
  /*
  * While the UA stylesheet's `margin` for `<dialog>` elements is useful for centering with `inset: 0`,
  * but `margin` for `popover` elements is often obstructive as they frequently use Anchor Positioning.
  */
  margin: unset;
}

/* ======================================================
//  MARK: Focus Styles
// ====================================================== */
:where(:focus-visible) {
  /* Add space between the content and the focus outline. */
  outline-offset: 3px;
}

[tabindex="-1"]:focus {
  /* Prevent programmatically focused elements from displaying an outline unless they are naturally focusable. */
  outline: none !important;
}

/* ======================================================
//  MARK: Misc
// ====================================================== */
:where(:disabled, [aria-disabled="true" i]) {
  /* Display the default cursor on disabled elements to reflect their non-interactive state. */
  cursor: default;
}

[hidden]:not([hidden="until-found" i]) {
  /* Ensure that elements intended to be hidden are not displayed, improving clarity and layout control. */
  display: none !important;
}
}
/*
 * Custom properties
 */
:root {
  /*
   * Color Palette
   */
  --COLOR-RIDGE-BLUE-50: #f1f7fa;
  --COLOR-RIDGE-BLUE-100: #cce2ec;
  --COLOR-RIDGE-BLUE-200: #a8ccdd;
  --COLOR-RIDGE-BLUE-300: #83b7cf;
  --COLOR-RIDGE-BLUE-400: #5fa1c0;
  --COLOR-RIDGE-BLUE-500: #3a8cb2;
  --COLOR-RIDGE-BLUE-600: #2e708e;
  --COLOR-RIDGE-BLUE-700: #23546b;
  --COLOR-RIDGE-BLUE-800: #173847;
  --COLOR-RIDGE-BLUE-900: #112a35;

  --COLOR-PLUM-50: #faf1f3;
  --COLOR-PLUM-100: #f4e4e7;
  --COLOR-PLUM-200: #e9c8cf;
  --COLOR-PLUM-300: #deadb8;
  --COLOR-PLUM-400: #d391a0;
  --COLOR-PLUM-500: #c87688;
  --COLOR-PLUM-600: #a3606e;
  --COLOR-PLUM-700: #7e4955;
  --COLOR-PLUM-800: #5a333b;
  --COLOR-PLUM-900: #47282e;

  --COLOR-IGNITION-50: #fdfaeb;
  --COLOR-IGNITION-100: #fcf5d8;
  --COLOR-IGNITION-200: #f8ebb0;
  --COLOR-IGNITION-300: #f5e089;
  --COLOR-IGNITION-400: #f1d661;
  --COLOR-IGNITION-500: #eecc3a;
  --COLOR-IGNITION-600: #c6a92f;
  --COLOR-IGNITION-700: #9e8724;
  --COLOR-IGNITION-800: #766419;
  --COLOR-IGNITION-900: #625314;

  --COLOR-GRAY-50: #fafafa;
  --COLOR-GRAY-100: #f2f2f2;
  --COLOR-GRAY-200: #e5e5e5;
  --COLOR-GRAY-300: #ccc;
  --COLOR-GRAY-400: #b2b2b2;
  --COLOR-GRAY-500: #999;
  --COLOR-GRAY-600: #7f7f7f;
  --COLOR-GRAY-700: #666;
  --COLOR-GRAY-800: #4c4c4c;
  --COLOR-GRAY-900: #333;

  --COLOR-BLACK-1000: #1e1e1e;

  --COLOR-WHITE-1000: #fff;

  --COLOR-RED-1000: #c0002a;

  --COLOR-OPACITY-20: 0.2;
  --COLOR-OPACITY-40: 0.4;
  --COLOR-OPACITY-60: 0.6;

  /*
   * Color Scheme
   */
  --TEXT-BLACK: var(--COLOR-BLACK-1000);
  --TEXT-WHITE: var(--COLOR-WHITE-1000);
  --TEXT-GRAY: var(--COLOR-GRAY-700);
  --TEXT-RED: var(--COLOR-RED-1000);

  --BORDER-BLACK: var(--COLOR-BLACK-1000);
  --BORDER-WHITE: var(--COLOR-WHITE-1000);
  --BORDER-LIGHT: var(--COLOR-GRAY-200);
  --BORDER-DEFAULT: var(--COLOR-GRAY-300);
  --BORDER-DARK: var(--COLOR-GRAY-700);

  --BG-BLACK: var(--COLOR-BLACK-1000);
  --BG-WHITE: var(--COLOR-WHITE-1000);
  --BG-GRAY: #f5f7f7;

  --COLOR-BLAND-RIDGE-BLUE: var(--COLOR-RIDGE-BLUE-500);
  --COLOR-BLAND-RIDGE-BLUE-LIGHT: #acc4d7;
  --COLOR-BLAND-PLUM: var(--COLOR-PLUM-500);
  --COLOR-BLAND-PLUM-LIGHT: #e2bbc2;
  --COLOR-BLAND-IGNITION: var(--COLOR-IGNITION-500);
  --COLOR-BLAND-IGNITION-LIGHT: #f8e5a4;

  /*
   * Size
   */

  /* 余白や高さの基準になるサイズ */
  --SPACING: 4px;

  /* コンポーネント内・コンポーネント間マージンとして使用するサイズ */
  --SPACE-BLOCK-SPACING-0: 0;
  --SPACE-BLOCK-SPACING-2: calc(var(--SPACING) / 2);
  --SPACE-BLOCK-SPACING-4: var(--SPACING);
  --SPACE-BLOCK-SPACING-8: calc(var(--SPACING) * 2);
  --SPACE-BLOCK-SPACING-16: calc(var(--SPACING) * 4);
  --SPACE-BLOCK-SPACING-24: calc(var(--SPACING) * 6);
  --SPACE-BLOCK-SPACING-32: calc(var(--SPACING) * 8);
  --SPACE-BLOCK-SPACING-40: calc(var(--SPACING) * 10);
  --SPACE-BLOCK-SPACING-48: calc(var(--SPACING) * 12);
  --SPACE-BLOCK-SPACING-56: calc(var(--SPACING) * 14);
  --SPACE-BLOCK-SPACING-64: calc(var(--SPACING) * 16);
  --SPACE-BLOCK-SPACING-72: calc(var(--SPACING) * 18);
  --SPACE-BLOCK-SPACING-80: calc(var(--SPACING) * 20);
  --SPACE-BLOCK-SPACING-96: calc(var(--SPACING) * 24);
  --SPACE-BLOCK-SPACING-120: calc(var(--SPACING) * 30);
  --SPACE-BLOCK-SPACING-144: calc(var(--SPACING) * 36);
  --SPACE-BLOCK-SPACING-160: calc(var(--SPACING) * 40);

  /* コンポーネント間マージンとして汎用的に使用するサイズ */
  --SPACING-MODULE-DEFAULT: var(--SPACE-BLOCK-SPACING-40);

  /* セクションの上下パディングとして使用するサイズ */
  --SPACE-SECTION-S: calc(var(--SPACING) * 16);
  --SPACE-SECTION-M: calc(var(--SPACING) * 30);
  --SPACE-SECTION-L: calc(var(--SPACING) * 40);

  /* ブレークポイント */
  --BREAKPOINT-SM: 640px;
  --BREAKPOINT-MD: 768px;
  --BREAKPOINT-LG: 1024px;
  --BREAKPOINT-XL: 1200px;

  /* ウィンドウ幅がコンテンツ幅以下時の左右の余白 */
  /* https://min-max-calculator.9elements.com/?16,40,768,1200 */
  --OUTSIDE-GUTTER: clamp(1rem, -1.667rem + 5.56vw, 2.5rem);

  /* コンテンツ幅 */
  --CONTENT-WIDTH-SP: calc(320px - (var(--OUTSIDE-GUTTER) * 2));
  --CONTENT-WIDTH-PC: var(--BREAKPOINT-XL);
  --CONTENT-WIDTH-WIDE-PC: 1600px;

  /* ヘッダーの高さ */
  --HEADER-HEIGHT: 73px;

  /*
   * Property
   */

  /* font-family */
  --FONT-JA:
    'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体',
    'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN',
    'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;

  /* font-size */
  --FONT-SIZE-ROOT: 16;

  --FONT-SIZE-XXS: calc(12 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-XS: calc(14 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-BASE: calc(16 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-L: calc(18 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-XL: calc(20 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-2XL: calc(24 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-3XL: calc(28 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-4XL: calc(32 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-5XL: calc(40 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-6XL: calc(48 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-7XL: calc(56 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-8XL: calc(64 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-9XL: calc(72 / var(--FONT-SIZE-ROOT) * 1rem);
  --FONT-SIZE-10XL: calc(80 / var(--FONT-SIZE-ROOT) * 1rem);

  /* font-weight */
  --FONT-WEIGHT-NORMAL: 400;
  --FONT-WEIGHT-SEMI-BOLD: 600;
  --FONT-WEIGHT-BOLD: 700;

  /* line-height */
  --LINE-HEIGHT: 1.75;

  /* half-leading */
  --HALF-LEADING: calc((1em - 1lh) / 2);

  /* opacity */
  --OPACITY-HOVER: var(--COLOR-OPACITY-60);

  /* radius */
  --RADIUS-NONE: 0;
  --RADIUS-XS: 4px;
  --RADIUS-S: 8px;
  --RADIUS-M: 16px;
  --RADIUS-L: 40px;
  --RADIUS-ROUND: 100vmax;

  /* transition */
  --TRANSITION: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* z-index */
  --Z-INDEX-BACKGROUND: -1;
  --Z-INDEX-DEFAULT: 1;
  --Z-INDEX-FLOATING: 90;
  --Z-INDEX-HEADER: 100;
  --Z-INDEX-DRAWER-OVERLAY: 290;
  --Z-INDEX-DRAWER: 300;
  --Z-INDEX-MODAL-OVERLAY: 390;
  --Z-INDEX-MODAL: 400;
  --Z-INDEX-ALERT: 500;
}

/* PC Viewport */
@media (width > 768px) {
  :root {
    --SPACING-MODULE-DEFAULT: var(--SPACE-BLOCK-SPACING-48);
  }
}

@media (width >= 1024px) {
  :root {
    --HEADER-HEIGHT: 110px;
  }
}
@font-face {
  font-family: 'Noto Sans Japanese';
  src: url('/assets/fonts/NotoSansJP-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 700; /* 400 = normal 〜 700 = bold（600 も含む） */
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(
    var(--HEADER-HEIGHT) +
    var(--SPACE-BLOCK-SPACING-32)
  ); /* iOS Safariアドレスバー対策 */

  &:has(dialog[open]) {
    scrollbar-gutter: stable;
  }
}

head {
  :where(noscript) {
    display: none;
  }
}

body {
  color: var(--TEXT-BLACK);
  font-family: var(--FONT-JA);
  font-size: var(--FONT-SIZE-BASE);
  font-weight: var(--FONT-WEIGHT-NORMAL);
  line-height: var(--LINE-HEIGHT);

  &.is-scrollLock {
    width: 100%; /* .outerが端に寄ってしまうのを阻止 */
    position: fixed;
  }

  > :is(:first-child) {
    margin-top: 0;
  }

  > :is(:last-child) {
    margin-bottom: 0;
  }
}

em {
  font-style: normal;
  font-weight: var(--FONT-WEIGHT-BOLD);
}

strong {
  color: var(--TEXT-RED);
}

::placeholder {
  opacity: 1;
}

label {
  cursor: pointer;
}

[type='text'],
[type='date'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='time'],
[type='url'],
[type='week'],
select {
  line-height: 1;
}

[type='text'],
[type='date'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='time'],
[type='url'],
[type='week'],
select,
textarea {
  border-radius: 0;
}

[type='date']::-webkit-inner-spin-button,
[type='date']::-webkit-clear-button {
  appearance: none;
}

[type='date']::-webkit-calendar-picker-indicator {
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

[hidden] {
  display: none;
}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --spacing: .25rem;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer base, components;

@layer utilities {
  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .not-sr-only {
    clip-path: none;
    white-space: normal;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    overflow: visible;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48.0625rem) {
    .container {
      max-width: 48.0625rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-auto {
    margin-inline: auto;
  }

  .\!mt-0 {
    margin-top: calc(var(--spacing) * 0) !important;
  }

  .\!mt-6 {
    margin-top: calc(var(--spacing) * 6) !important;
  }

  .\!mt-16 {
    margin-top: calc(var(--spacing) * 16) !important;
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }

  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }

  .mt-\[number\] {
    margin-top: number;
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .\!w-15 {
    width: calc(var(--spacing) * 15) !important;
  }

  .\!w-16 {
    width: calc(var(--spacing) * 16) !important;
  }

  .w-\[20\%\] {
    width: 20%;
  }

  .w-\[30\%\] {
    width: 30%;
  }

  .w-\[50\%\] {
    width: 50%;
  }

  .w-fit {
    width: fit-content;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .\!justify-center {
    justify-content: center !important;
  }

  .\!justify-end {
    justify-content: flex-end !important;
  }

  .\!gap-0 {
    gap: calc(var(--spacing) * 0) !important;
  }

  .\!gap-4 {
    gap: calc(var(--spacing) * 4) !important;
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-\[number\] {
    padding-top: number;
  }

  .\!text-right {
    text-align: right !important;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  @media (min-width: 48.0625rem) {
    .md\:\!mt-12 {
      margin-top: calc(var(--spacing) * 12) !important;
    }

    .md\:\!mt-16 {
      margin-top: calc(var(--spacing) * 16) !important;
    }

    .md\:\!mt-30 {
      margin-top: calc(var(--spacing) * 30) !important;
    }

    .md\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }

    .md\:\!flex {
      display: flex !important;
    }

    .md\:\!justify-center {
      justify-content: center !important;
    }

    .md\:\!gap-12 {
      gap: calc(var(--spacing) * 12) !important;
    }

    .md\:text-center {
      text-align: center;
    }

    .md\:text-left {
      text-align: left;
    }
  }

  @media (scripting: none) {
    .\[\@media\(scripting\:none\)\]\:\!hidden {
      display: none !important;
    }
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}