@charset "utf-8";
/*--------------------------------------------------------------------------------

  wrapper

--------------------------------------------------------------------------------*/
.l-wrapper {
  position: relative;
  min-height: 100%;
}

/*--------------------------------------------------------------------------------

  header

--------------------------------------------------------------------------------*/
header {
  width: 100%;
  z-index: 100;
  position: sticky;
  top: 0;
  left: 0;
}
.l-hd {
  background-color: #FFF;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  transition: background 0.2s ease-in-out;
}
body:has(.l-main-container) header:not(.is-over) .l-hd {
  background-color: var(--bg-quaternary);
}
@media not (max-width: 1000px) {
  .l-hd {
    grid-template-areas: 
      "hd-logo gnav";
  }
}
@media (max-width: 1000px) {
  .l-hd {
    grid-template-areas: 
      "hd-logo hd-lang gnav-btn";
  }
}
.l-hd_logo { grid-area: hd-logo; }
.l-hd-lang { grid-area: hd-lang; align-self: center; }
.l-gnav { grid-area: gnav; }
.l-gnav-btn { grid-area: gnav-btn; }

/* scroll down
----------------------------------------*/
header.is-up { animation: hd-up 0.4s forwards; }
header.is-down { animation: hd-down 0.4s forwards; }
@keyframes hd-up { from { transform: translateY(0); } to { transform: translateY(-110%); } }
@keyframes hd-down { from { transform: translateY(-110%); } to { transform: translateY(0); } }

/* gnav open
----------------------------------------*/
body:has(.l-gnav.is-open, .l-gnav.is-close) .l-hd { transition: none; }
header.is-stay .l-hd { background-color: transparent; }
header.is-stay { height: 100dvh; }
header.is-stay { transform: translateY(0); }

@media not (max-width: 1000px) { header .sp-only { display: none !important; } }
@media (max-width: 1000px) { header .pc-only { display: none !important; } }

/* gnav second open
----------------------------------------*/
body:has(.l-pg-area-ttl):has(.l-gnav.is-second-open) .l-hd { background-color: #FFF; }

/*--------------------------------------------------------------------------------
  .l-hd_logo
--------------------------------------------------------------------------------*/
.l-hd_logo { 
  justify-self: start;
  align-self: center;
}
@media not (max-width: 760px) {
  .l-hd_logo { padding: 1rem 1.5rem; }
  .l-hd_logo img { width: 190px; }
}
@media (max-width: 760px) {
  .l-hd_logo { padding: 1rem; min-width: 130px; }
  .l-hd_logo img { width: clamp(130px, (190 / 500 * 100vw), 160px); }
}

/*--------------------------------------------------------------------------------
  .l-lang
--------------------------------------------------------------------------------*/
.l-hd-lang {
  position: relative;
  z-index: 999;
  font-size: var(--fs-s);
  padding: 0 0.5rem;
}
.l-lang {
  position: relative;
}
.l-lang_btn {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 0.35rem;
  cursor: pointer;
  transition: var(--hover-trans);
}
.l-lang_btn:before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background: var(--color-gray);
  color: currentColor;
  mask: url("../icon/lang.svg") no-repeat center center;
  mask-size: contain;
  transition: var(--hover-trans);
}
@media (hover: hover) {
  .l-lang_btn:hover { color: var(--color-primary); }
  .l-lang_btn:hover:before { background: var(--link-color-hover); }
}

/* .l-lang_list
----------------------------------------*/
.l-lang_list {
  --link-color: #FFF;
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  opacity: 0;
  pointer-events: none;
  min-width: 120%;
  position: absolute;
  left: 50%;
  z-index: 1000;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  color: #FFF;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  text-align: center;
  border-radius: var(--rd-h);
  padding: 0.75rem;
  font-size: var(--fs-s-rem);
}
.l-lang_list a {
  display: block;
  padding: 0.25rem;
  line-height: 1;
  position: relative;
}
.l-lang_list a:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background-color: transparent;
  transform: scale(0);
  transition: background 0.2s ease-in-out, transform 0.6s var(--cubic-bezier);
}
@media (hover: hover) {
  .l-lang_list a:hover:before {
    background-color: #FFF;
    transform: scale(1);
  }
}
.l-lang:has(.is-active) .l-lang_list { animation: lang-open 0.3s forwards; pointer-events: auto; }
.l-lang:has(.is-close) .l-lang_list { animation: lang-close 0.2s forwards; }
@keyframes lang-open { from { opacity: 0; top: 90%; } to { opacity: 1; top: calc(100% + 0.5rem); } }
@keyframes lang-close { from { opacity: 1; top: calc(100% + 0.5rem); } to { opacity: 0; top: 90%; } }

/*--------------------------------------------------------------------------------

  global navigation

--------------------------------------------------------------------------------*/
@media not (max-width: 1000px) {
  .l-gnav { padding-bottom: 0 !important; } /* Google翻訳バーの高さ分のpadding無効 */
}
@media (max-width: 1000px) {
  .l-gnav {
    display: none;
    pointer-events: none;
    width: 100%;
    height: calc(100dvh - 100%);
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* gnav open
----------------------------------------*/
@keyframes gnav-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes gnav-close { from { opacity: 1; } to { opacity: 0; } }
:root { --gnav-close-duration: 400; }
@media (max-width: 1000px) {
  body:has(.l-gnav.is-open) { overflow: hidden; }
  .l-gnav.is-open,
  .l-gnav.is-close {
    display: block;
    pointer-events: auto;
  }
  .l-gnav:before {
    content: "";
    width: 100%;
    height: 100dvh;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: var(--bg-quaternary);
  }
  .l-gnav.is-open:before { animation: 0s gnav-open var(--cubic-bezier) forwards; }
  .l-gnav.is-close:before { animation: calc(var(--gnav-close-duration) * 0.001s) gnav-close var(--cubic-bezier) forwards; }
}

/* second open
----------------------------------------*/
@keyframes gnav-second-open-bg { from { background-color: transparent; } to { background-color: rgba(0,0,0,0.1); } }
@keyframes gnav-second-close-bg { from { background-color: rgba(0,0,0,0.1); opacity: 1; } to { background-color: transparent; opacity: 0; } }
:root { --gnav-second-close-duration: 800; }
@media not (max-width: 1000px) {
  .l-gnav:before {
    content: "";
    display: none;
    width: 100%;
    height: 100dvh;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  body:has(.l-gnav.is-second-open) { pointer-events: none; }
  body:has(.l-gnav.is-second-open) header { pointer-events: auto; }
  .l-gnav.is-second-open:before {
    display: block;
    animation: 1.2s gnav-second-open-bg var(--cubic-bezier) forwards;
  }
  .l-gnav.is-second-close:before {
    display: block;
    animation: calc(var(--gnav-second-close-duration) * 0.001s) gnav-second-close-bg var(--cubic-bezier) forwards;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav_inner
--------------------------------------------------------------------------------*/
@media (max-width: 1000px) {
  .l-gnav_inner {
    opacity: 0;
    height: 100%;
    display: grid;
    align-content: start;
    padding: var(--space-3s) var(--space-s) var(--space-s) var(--space-s);
  }
  .l-gnav.is-open .l-gnav_inner { animation: 0.6s gnav-open var(--cubic-bezier) forwards; }
}

/*--------------------------------------------------------------------------------
  .l-gnav_content
--------------------------------------------------------------------------------*/
.l-gnav-list { grid-area: gnav-list; }
.l-gnav-sublist { grid-area: gnav-sublist; }
.l-gnav-btnlist { grid-area: gnav-btnlist; }
@keyframes gnav-content-open { from { transform: scale(0.7); } to { transform: scale(1); } }
@media not (max-width: 1000px) {
  .l-gnav_content {
    display: grid;
    grid-template-areas: 
      "gnav-sublist gnav-btnlist"
      "gnav-list gnav-btnlist";
    grid-template-rows: auto 1fr;
  }
  .l-gnav-list {
    justify-content: end;
    padding-right: calc(2rem - var(--side-pd));
  }
  .l-gnav-sublist {
    align-self: end;
    justify-content: end;
    padding-top: 1rem;
    padding-right: 2rem;
  }
}
@media (max-width: 1000px) {
  .l-gnav_content-wrap {
    display: grid;
    height: 100%;
    position: relative;
    overflow-y: hidden;
    padding: var(--space-m) 0 var(--space-m) var(--space-s);
  }
  .l-gnav_content-wrap:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #FFF;
    border-radius: var(--rd-1h);
    transform-origin: center top;
    z-index: -1;
  }
  .l-gnav_content {
    opacity: 0;
    display: grid;
    grid-template-areas: 
      "gnav-list"
      "gnav-sublist"
      "gnav-btnlist";
    row-gap: var(--space-s);
    padding: var(--space-m) calc(var(--space-m) + var(--space-s)) var(--space-m) var(--space-m);
    overflow-y: scroll;
    /* values(min:1.05em, max:1.15em) viewport(min:760px, max:1000px) */
    font-size: clamp(1.05em, 0.733em + 0.67vw, 1.15em);
  }
  .l-gnav.is-open .l-gnav_content-wrap:before { animation: 0.6s gnav-content-open var(--cubic-bezier) forwards; }
  .l-gnav.is-open .l-gnav_content { animation: 1.2s gnav-open var(--cubic-bezier) forwards; animation-delay: 0.2s; }
}
@media (max-width: 760px) {
  .l-gnav_content {
    padding: var(--space-2s) calc(var(--space-2s) + var(--space-s)) var(--space-2s) var(--space-2s);
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-list
--------------------------------------------------------------------------------*/
.l-gnav-list {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
}
.l-gnav-list_txt {
  display: block;
  font-family: var(--ff-go);
  font-weight: 500;
  transition: var(--hover-trans);
  line-height: var(--line-height-s);
}
@media not (max-width: 1000px) {
  .l-gnav-list {
    /* values(min:0.65rem, max:1rem) viewport(min:1000px, max:1200px) */
    --side-pd: clamp(0.65rem, -1.1rem + 2.8vw, 1rem);
    display: flex;
  }
  .l-gnav-list_txt {
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0.25rem var(--side-pd) 0.5rem var(--side-pd);
  }
  /* Google翻訳 英語 */
  html.translated-ltr[lang="en"] .l-gnav-list_txt {
    width: min-content;
    line-height: var(--line-height-2s);
  }
}
@media (max-width: 1000px) {
  .l-gnav-list {
    --pd: 1.25rem;
    display: flex;
    flex-direction: column;
  }
  .l-gnav-list > li {
    border-bottom: 1px solid var(--border-color);
  }
  .l-gnav-list_txt {
    font-size: var(--fs-2m);
    padding: var(--pd) 0;
  }
  .l-gnav-list > li:first-child { margin-top: calc(-1 * var(--pd)); }
}
@media (hover: hover) {
  .l-gnav-list_txt:hover { color: var(--color-primary); }
}

/* .l-gnav-list_parent
----------------------------------------*/
@media not (max-width: 1000px) {
  .l-gnav-list_parent-txt { cursor: pointer; }
  .l-gnav-list_parent:has(.is-active) .l-gnav-list_parent-txt { color: var(--color-primary); }
}
@media (max-width: 1000px) {
  .l-gnav-list_parent-txt {
    cursor: pointer;
    display: flex;
  }
  .l-gnav-list_parent-txt .txt {
    flex-grow: 1;
    padding-right: 1rem;
    position: relative;
  }
  .l-gnav-list_parent-txt .icon {
    flex-shrink: 0;
    cursor: pointer;
    margin-left: auto;
    position: relative;
    width: 3rem;
  }
  .l-gnav-list_parent-txt .icon:before,
  .l-gnav-list_parent-txt .icon:after {
    content: "";
    display: inline-block;
    --width: 1rem;
    --height: 2px;
    width: var(--width);
    height: var(--height);
    background: var(--color-primary);
    position: absolute;
    right: 1rem;
    top: 50%;
    margin-top: calc(-1 * var(--height) / 2);
  }
  .l-gnav-list_parent-txt .icon:after {
    transition: transform 0.5s var(--cubic-bezier);
    transform-origin: center center;
    transform: rotate(90deg) scale(1,1);
  }
  .l-gnav-list_parent:has(.is-active) .l-gnav-list_parent-txt .icon:after {
    transform: rotate(90deg) scale(0,1);
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-second
--------------------------------------------------------------------------------*/
@media not (max-width: 1000px) {
  .l-gnav-second-wrap {
    display: none;
    pointer-events: none;
    width: 100%;
    height: calc(100dvh - 100%);
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 999;
    transform: translateX(-50%);
  }
  .l-gnav-second {
    height: 100%;
    overflow-y: scroll;
  }
  .l-gnav-second_inner {
    position: relative;
    padding: var(--space-s);
  }
  .l-gnav-second_inner:before {
    content: "";
    width: calc(100% - (var(--space-s) * 2));
    height: calc(100% - (var(--space-s) * 2));
    position: absolute;
    left: 50%;
    top: var(--space-s);
    transform: translateX(-50%);
    z-index: -1;
    transform-origin: center left;
    background-color: #FFF;
    border-radius: var(--rd-1h);
  }
  .l-gnav-second_container {
    opacity: 0;
    width: calc(var(--container-width, var(--base-width)) * 1px);
    max-width: calc(100% - (var(--side-space) * 2));
    margin-inline: auto;
    padding: var(--space-l) 0;
    display: grid;
    grid-template-areas:
      "second-ttl second-content";
    grid-template-columns: minmax(260px,25%) 1fr;
    column-gap: var(--space-l);
  }
  /* close button */
  .l-gnav-second-btn {
    --size: 2.6rem;
    width: var(--size);
    height: var(--size);
    line-height: 1;
    position: absolute;
    right: calc( var(--space-s) - (var(--size) / 3));
    top: calc( var(--space-s) - (var(--size) / 3));
    cursor: pointer;
  }
  .l-gnav-second-btn:before {
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 100%;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    transition: var(--hover-trans);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .l-gnav-second-btn_icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .l-gnav-second-btn_icon:before,
  .l-gnav-second-btn_icon:after {
    content: "";
    display: inline-block;
    width: 44%;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: var(--hover-trans);
  }
  .l-gnav-second-btn_icon:before { transform: translate(-50%,-50%) rotate(45deg); }
  .l-gnav-second-btn_icon:after { transform: translate(-50%,-50%) rotate(-45deg); }
}
@media (hover: hover) and (not (max-width: 1000px)) {
  .l-gnav-second-btn { display: none; }
}
@media (max-width: 1000px) {
  .l-gnav-second-wrap { display: none; }
  .l-gnav-second-btn { display: none; }
}

/* second open
----------------------------------------*/
@keyframes gnav-second-inner-open { from { transform: scale(0.7) translateX(-50%); } to { transform: scale(1) translateX(-50%); } }
@media not (max-width: 1000px) {
  .l-gnav.is-second-open .l-gnav-second-wrap.is-active,
  .l-gnav.is-second-close .l-gnav-second-wrap.is-active { display: block; }
  .l-gnav.is-second-open .l-gnav-second-wrap.is-active { pointer-events: auto; }
  .l-gnav.is-second-open.-first-animation .l-gnav-second-wrap.is-active .l-gnav-second_inner:before {
    animation: 0.6s gnav-second-inner-open var(--cubic-bezier) forwards;
  }
  .l-gnav.is-second-open .l-gnav-second-wrap.is-active .l-gnav-second_container {
    animation: 1.2s gnav-open var(--cubic-bezier) forwards;
    animation-delay: 0.2s;
  }
  .l-gnav.is-second-close .l-gnav-second {
    animation: calc(var(--gnav-second-close-duration) * 0.001s) gnav-close var(--cubic-bezier) forwards;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-second_content
  .l-gnav-second_ttl
--------------------------------------------------------------------------------*/
@media not (max-width: 1000px) {
  .l-gnav-second_content {
    grid-area: second-content;
  }
  .l-gnav-second_ttl {
    grid-area: second-ttl;
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
    line-height: var(--line-height-s);
  }
  .l-gnav-second_ttl .jp {
    font-family: var(--ff-go);
    font-weight: 600;
    font-size: var(--fs-2l);
  }
  .l-gnav-second_ttl .en {
    color: var(--color-primary);
    font-size: var(--fs-2s);
    margin-bottom: 0.25rem;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-second-list
--------------------------------------------------------------------------------*/
.l-gnav-second-list {
  line-height: var(--line-height-s);
}
.l-gnav-second-list > li:has(.l-gnav-third-list):not(:last-child) {
  padding-bottom: 1.5rem;
}
@media not (max-width: 1200px) {
  .l-gnav-second-list.-col3 { --col: 3; }
}
@media not (max-width: 1000px) {
  .l-gnav-second-list { --col: 2; }
  .l-gnav-second-list {
    display: grid;
    grid-template-columns: repeat(var(--col), 1fr);
    column-gap: var(--space-m);
  }
  .l-gnav-second-list > li {
    display: grid;
  }
  .l-gnav-second-list > li:has(.l-gnav-third-list) {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  .l-gnav-second-list > li > a,
  .l-gnav-second-list > li > .txt {
    height: 100%;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1rem;
  }
}
@media (max-width: 1000px) {
  .l-gnav-second_ttl { display: none; }
  .l-gnav-second-list {
    padding-left: var(--fs-2m);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 1.5rem;
  }
  .l-gnav-second-list > li > a,
  .l-gnav-second-list > li > .txt {
    display: block;
    padding: 0.5rem 0;
  }
  .l-gnav-second-list > li > a .c-arrow02,
  .l-gnav-second-list > li > .txt .c-arrow02 {
    display: none;
  }
}
@media (max-width: 760px) {
  .l-gnav-second-list:not([class*="-sp-col"]) {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-second-group
--------------------------------------------------------------------------------*/
.l-gnav-second-group {
  line-height: var(--line-height-s);
}
.l-gnav-second-group_txt {
  font-size: var(--fs-s);
  color: var(--color-gray);
}
.l-gnav-second-group:last-of-type .l-gnav-second-list > li:has(.l-gnav-third-list) {
  padding-bottom: 0;
}
@media not (max-width: 1000px) {
  .l-gnav-second-group {
    padding-top: 3rem;
  }
  .l-gnav-second-group_txt {
    padding-bottom: 0.25rem;
  }
}
@media (max-width: 1000px) {
  .l-gnav-second-group_txt {
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-top: 1px solid var(--border-color-light);
    margin-left: var(--fs-2m);
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-third-list
--------------------------------------------------------------------------------*/
.l-gnav-third-list {
  line-height: var(--line-height-s);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-s);
}
.l-gnav-third-list > li > a,
.l-gnav-third-list > li > .txt {
  display: block;
  padding: 0.35rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}
.l-gnav-third-list > li > a:before,
.l-gnav-third-list > li > .txt:before {
  content: "・";
  width: 1em;
  height: 1em;
  color: var(--txt-color);
}
@media not (max-width: 1000px) {
  .l-gnav-third-list {
    padding-top: 1rem;
  }
}
@media (max-width: 1000px) {
  .l-gnav-third-list {
    padding-left: 1rem;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-sublist
--------------------------------------------------------------------------------*/
.l-gnav-sublist {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  font-size: var(--fs-2s);
  display: flex;
  column-gap: 1.5rem;
}
@media (max-width: 1000px) {
  .l-gnav-sublist {
    font-size: var(--fs-s);
    flex-direction: column;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }
  .l-gnav-sublist a {
    display: block;
    padding: 0.25rem 0;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-btnlist
--------------------------------------------------------------------------------*/
.l-gnav-btnlist {
  --link-color: #FFF;
  --link-color-hover: #FFF;
  --link-deco: none;
  --link-deco-hover: none;
  font-family: var(--ff-go);
  font-size: var(--fs-2s);
  display: flex;
}
.l-gnav-btnlist li {
  line-height: var(--line-height-2s);
}
.l-gnav-btnlist_item {
  /* values(min:0.5rem, max:1rem) viewport(min:1000px, max:1200px) */
  --side-pd: clamp(1rem, -0.25rem + 2vw, 1.25rem);
  padding: 1rem var(--side-pd);
  height: 100%;
  text-align: center;
  display: grid;
  row-gap: 0.5rem;
  place-content: center;
  place-items: center;
}
.l-gnav-btnlist_item:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}
.l-gnav-btnlist_item.-shop:before { mask-image: url("../icon/shop_thick.svg"); }
.l-gnav-btnlist_item.-recruit:before { mask-image: url("../icon/recruit_thick.svg"); }
.l-gnav-btnlist_item.-shop { background-color: var(--color-secondary); }
.l-gnav-btnlist_item.-recruit { background-color: var(--color-primary); }
@media (hover: hover) {
  .l-gnav-btnlist_item.-shop:hover { background-color: var(--color-secondary-light); }
  .l-gnav-btnlist_item.-recruit:hover { background-color: var(--color-primary-light); }
}
@media not (max-width: 1000px) {
  .l-gnav-btnlist li { width: 100%; }
  .l-gnav-btnlist_item.-shop { font-size: var(--fs-3s-rem); }
  .l-gnav-btnlist_item.-shop span:first-of-type { white-space: nowrap; }
  .l-gnav-btnlist_item .pc-block { display: block; }
  .l-gnav-btnlist_item .txt {
    overflow-wrap: break-word;
    max-width: 8em;
    min-height: 2em;
    display: grid;
    place-content: center;
    place-items: center;
  }
}
@media (max-width: 1000px) {
  .l-gnav-btnlist {
    font-size: var(--fs-n);
    font-weight: 500;
    gap: var(--space-2s);
  }
  .l-gnav-btnlist li { width: 100%; }
  .l-gnav-btnlist_item {
    border-radius: var(--rd-q);
    padding: 1.25rem;
  }
  .l-gnav-btnlist_item:before { display: none; }
}
@media (max-width: 760px) {
  .l-gnav-btnlist {
    flex-direction: column;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-btn
--------------------------------------------------------------------------------*/
:root {
  --gnav-width: fit-content;
  --gnav-btn-icon-height: 18px;
  --gnav-btn-bg: transparent;
  --gnav-btn-bg-hover: transparent;
  --gnav-btn-pd: 0.5rem 1.25rem;
  
  --gnav-btn-icon-width: 28px;
  --gnav-btn-line-bg: var(--color-primary);
  --gnav-btn-line-bg-hover: var(--color-primary);
  --gnav-btn-line-height: 2px;
  
  --gnav-btn-close-bg: transparent;
  --gnav-btn-close-bg-hover: transparent;
  --gnav-btn-close-line-bg: var(--color-primary);
  --gnav-btn-close-line-bg-hover: var(--color-primary);
}
.l-gnav-btn {
  width: var(--gnav-width);
  padding: var(--gnav-btn-pd);
  background-color: var(--gnav-btn-bg);
  cursor: pointer;
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: var(--hover-trans);
  transform: translate3d(0,0,0);
}
.l-gnav-btn.is-close { background-color: var(--gnav-btn-close-bg); }
.l-gnav-btn_icon {
  position: relative;
  width: var(--gnav-btn-icon-width);
  height: var(--gnav-btn-icon-height);
  transition: all 0.2s ease-out;
}
.l-gnav-btn_line {
  position: absolute;
  right: 0;
  left: 0;
  height: var(--gnav-btn-line-height);
  background-color: var(--gnav-btn-line-bg);
}
.l-gnav-btn.is-active .l-gnav-btn_line,
.l-gnav-btn.is-close .l-gnav-btn_line { transition: all 0.2s ease-out; }
.l-gnav-btn.is-close .l-gnav-btn_line { background-color: var(--gnav-btn-close-line-bg); }
.l-gnav-btn_line:nth-of-type(1) { width: 100%; top: 0; }
.l-gnav-btn_line:nth-of-type(2) { width: 100%; top: calc(50% - (var(--gnav-btn-line-height) / 2)); }
.l-gnav-btn_line:nth-of-type(3) { width: 100%; bottom: 0; }
.l-gnav-btn.is-active .l-gnav-btn_line:nth-of-type(1) { animation: gnav-btn_line1 0.4s forwards; }
.l-gnav-btn.is-active .l-gnav-btn_line:nth-of-type(3) { animation: gnav-btn_line3 0.4s forwards; }
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(1) { animation: gnav-btn-close_line1 0.4s forwards; }
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(2) { opacity: 0; }
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(3) { animation: gnav-btn-close_line3 0.4s forwards; }
@media (hover: hover) {
  .l-gnav-btn:not(.is-close):hover { background-color: var(--gnav-btn-bg-hover); }
  .l-gnav-btn:not(.is-close):hover .l-gnav-btn_line { background-color: var(--gnav-btn-line-bg-hover); }
  .l-gnav-btn.is-close:hover { background-color: var(--gnav-btn-close-bg-hover); }
  .l-gnav-btn.is-close:hover .l-gnav-btn_line { background-color: var(--gnav-btn-close-line-bg-hover); }
}
@keyframes gnav-btn_line1 {
  0% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(45deg); }
  50% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes gnav-btn_line3 {
  0% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(-45deg); }
  50% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes gnav-btn-close_line1 {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(45deg); }
}
@keyframes gnav-btn-close_line3 {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(-45deg); }
}
@media not (max-width: 1000px) { .l-gnav-btn { display: none; } }

/*--------------------------------------------------------------------------------

  footer

--------------------------------------------------------------------------------*/
footer {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  border-top: 1px solid var(--color-primary);
  padding: var(--space-2l) var(--side-space) var(--space-l) var(--side-space);
  display: grid;
  gap: var(--space-l);
  position: relative;
}
@media not (max-width: 1000px) {
  footer { grid-template-columns: auto 1fr auto; }
}

/*--------------------------------------------------------------------------------
  .l-ft_logo
--------------------------------------------------------------------------------*/
.l-ft_logo { align-self: center; }
.l-ft_logo img { width: clamp(130px, (220 / 500 * 100vw), 220px); }

/*--------------------------------------------------------------------------------
  .l-ft-menu
--------------------------------------------------------------------------------*/
.l-ft-menu {
  align-self: end;
  display: flex;
  flex-direction: column;
}
.l-ft-menu_list {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  font-size: var(--fs-s);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.l-ft-menu_list a:not(.c-newwin) {
  display: flex;
  column-gap: 0.5rem;
}
@media not (max-width: 1000px) {
  .l-ft-menu { row-gap: 1rem; }
}
@media (max-width: 1000px) {
  .l-ft-menu { row-gap: var(--space-m); }
}

/*--------------------------------------------------------------------------------
  .l-ft_cr
--------------------------------------------------------------------------------*/
.l-ft_cr {
  align-self: end;
  font-size: var(--fs-3s);
  color: var(--color-gray);
}

/*--------------------------------------------------------------------------------

  breadcrumb

--------------------------------------------------------------------------------*/
.l-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
  line-height: var(--line-height-2s);
  font-size: var(--fs-2s);
}
.l-breadcrumb li { position: relative; }
.l-breadcrumb li:not(:first-child):before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid rgba(var(--rgb-border-color));
  margin-top: 0.4rem;
  margin-right: 0.5rem;
}
.l-breadcrumb li:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media not (max-width: 1000px) {
  .l-breadcrumb li:last-child { max-width: clamp(20em, 25vw, 40em); }
}
@media (max-width: 1000px) {
  .l-breadcrumb li:last-child {
    max-width: calc(100vw - (var(--side-space) * 2) - 1rem);
  }
}

/*--------------------------------------------------------------------------------

  page title

--------------------------------------------------------------------------------*/
.l-pg-area-ttl {
  background-color: var(--bg-quaternary);
  width: 100%;
  display: grid;
  gap: var(--space-2l) var(--space-l);
  padding-left: var(--PC-side-space-l);
  padding-right: var(--PC-side-space-l);
  padding-bottom: var(--space-2l);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}
.l-pg-ttl {
  font-family: var(--ff-go);
}
.l-pg-ttl_en {
  color: var(--color-primary);
  line-height: 1;
}
.l-pg-ttl_jp {
  font-weight: 700;
  /* values(min:2.25em, max:3em) viewport(min:500px, max:760px) */
  font-size: clamp(2em, 0.808em + 4.62vw, 3em);
  line-height: var(--line-height-s);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.l-pg-ttl_jp small {
  font-size: 0.5em;
}
.l-pg-ttl_jp small.-han {
  margin-left: -0.5em;
}
@media not (max-width: 1000px) {
  .l-pg-area-ttl {
    grid-template-columns: auto minmax(30%, 1fr);
    padding-top: var(--space-2l);
  }
  .l-pg-area-ttl .l-pg-ttl { order: 1; }
  .l-pg-area-ttl .l-breadcrumb {
    order: 2;
    justify-self: end;
    align-self: end;
    justify-content: end;
    padding-bottom: 1rem;
  }
}
@media (max-width: 1000px) {
  .l-pg-area-ttl {
    padding-top: var(--space-m);
  }
}

/*--------------------------------------------------------------------------------

  main visual

--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .l-mv_img { --rd: var(--rd-4); } }
@media (max-width: 760px) { .l-mv_img { --rd: var(--rd-3); } }
.l-mv {
  position: relative;
}
.l-mv_img {
  overflow: hidden;
  clip-path: inset(0 var(--side-space) 0 var(--side-space) round var(--rd));
  transition: clip-path 1.4s var(--cubic-bezier);
  position: relative;
  z-index: 2;
}
.l-mv.is-active .l-mv_img {
  clip-path: inset(0 0 0 0);
}
.l-mv_img > img {
  max-height: min(calc(var(--mv-max-height, 640) / 1000 * 100vw), (var(--mv-max-height, 640) * 1px));
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-mv-img-cols {
  display: grid;
  grid-template-columns: repeat(var(--mv-col, 2), 1fr);
}
.l-mv-img-cols_item img {
  max-height: min(calc(var(--mv-max-height, 560) / 1000 * 100vw), (var(--mv-max-height, 560) * 1px));
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media not (max-width: 760px) {
  .l-mv_img > img {
    aspect-ratio: 2 / 1;
  }
  .l-mv-img-cols_item img {
    aspect-ratio: var(--mv-aspect, 1 / 1);
  }
}
@media (max-width: 760px) {
  .l-mv_img > img {
    aspect-ratio: 3 / 2;
  }
  .l-mv-img-cols_item img {
    aspect-ratio: var(--mv-aspect, 1 / 1.5);
  }
}
.l-main-container > .l-mv:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--bg-quaternary);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -15;
}
.l-main-container > .l-mv:after {
  content: "";
  width: 100%;
  height: var(--space-4l);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: #FFF;
}

/* caption */
.l-mv_img .c-cap_txt { opacity: 0; transition: var(--hover-trans); }
.l-mv.is-active .c-cap_txt { opacity: 1; }

/*--------------------------------------------------------------------------------
  .l-mv_logo
--------------------------------------------------------------------------------*/
.l-mv_logo {
  width: calc(var(--base-width) * 1px);
  max-width: calc(100% - (var(--side-space) * 2));
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  column-gap: var(--space-s);
  padding-bottom: var(--space-2l);
}
.l-mv_logo { opacity: 0; transition: opacity 0.2s ease-in-out, top 1s var(--cubic-bezier); }
.l-mv.is-active .l-mv_logo { opacity: 1; top: 0; }

/*--------------------------------------------------------------------------------
  .mv-slider
--------------------------------------------------------------------------------*/
.l-mv-slider {
  opacity: 0;
  overflow: hidden;
  background-color: #FFF;
}
.l-mv-slider.slick-initialized {
  opacity: 1;
}
.l-mv-slider,
.l-mv-slider_item {
  width: 100%;
  height: 100%;
}
.l-mv-slider_item img {
  max-height: min(calc(var(--mv-max-height, 640) / 1000 * 100vw), (var(--mv-max-height, 640) * 1px));
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media not (max-width: 760px) {
  .l-mv-slider_item img {
    aspect-ratio: 2 / 1;
  }
}
@media (max-width: 760px) {
  .l-mv-slider_item img {
    aspect-ratio: 3 / 2;
  }
}

/*--------------------------------------------------------------------------------

  main

--------------------------------------------------------------------------------*/
.l-main-container {
  --rd: var(--rd-4);
  position: relative;
}
.l-main,
.l-main-container .l-main_inner {
  padding-bottom: var(--space-2l);
}
.l-main-container .l-main {
  padding-bottom: 0;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 5;
}
.l-main-container .l-main_inner {
  background-color: #FFF;
  padding-top: var(--space-2l);
}
.l-main-container .l-main_inner {
  clip-path: inset(0 round var(--rd) var(--rd) 0 0);
  transition: clip-path 1.4s var(--cubic-bezier);
}
.l-main-container.is-active .l-main_inner {
  clip-path: inset(0);
}
.l-main-container:not(:has(> .l-mv)) .l-main:before {
  content: "";
  width: 100%;
  height: var(--rd);
  position: absolute;
  left: 0;
  top: -1px;
  z-index: -1;
  background-color: var(--bg-quaternary);
}

/*--------------------------------------------------------------------------------

  container

--------------------------------------------------------------------------------*/
.l-container {
  width: calc(var(--container-width, var(--base-width)) * 1px);
  max-width: calc(100% - (var(--container-side-space, var(--side-space)) * 2));
  margin-inline: auto;
}

/*--------------------------------------------------------------------------------

  page nav

--------------------------------------------------------------------------------*/
.l-pg-nav {
  width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-2l);
  border-radius: var(--rd-2);
  background-color: var(--bg-quaternary);
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}
.l-pg-nav_ttl {
  font-family: var(--ff-go);
  font-size: var(--fs-2l);
  font-weight: 600;
  line-height: var(--line-height-s);
  margin-bottom: var(--space-m);
}
@media not (max-width: 760px) {
  .l-pg-nav {
    max-width: calc(100% - (var(--side-space) * 2));
  }
  .l-pg-nav_inner {
    padding-left: max(calc(var(--PC-side-space-l) - var(--side-space)), var(--side-space));
    padding-right: max(calc(var(--PC-side-space-l) - var(--side-space)), var(--side-space));
  }
}
@media (max-width: 760px) {
  .l-pg-nav {
    max-width: calc(100% - (var(--SP-side-space-s) * 2));
  }
  .l-pg-nav_inner {
    padding-left: var(--side-space);
    padding-right: var(--side-space);
  }
}

/*--------------------------------------------------------------------------------
  .l-pg-nav_list
--------------------------------------------------------------------------------*/
@media not (max-width: 1200px) { .l-pg-nav_list { --col: 3; } .l-pg-nav_list.-col2 { --col: 2; } }
@media (max-width: 1200px) { .l-pg-nav_list { --col: 2; } .l-pg-nav_list.-col2 { --col: 1; } }
@media (max-width: 760px) { .l-pg-nav_list.-sp-col1 { --col: 1; } }
@media not (max-width: 500px) { .l-pg-nav_list { --pd: 1rem 0.75rem 1rem 1.25rem; } }
@media (max-width: 500px) { .l-pg-nav_list { --pd: 0.75rem 0.5rem 0.75rem 1rem; --col: 1; } }
.l-pg-nav_list + .l-pg-nav_list-ttl {
  padding-top: var(--space-m);
}
.l-pg-nav_list-ttl {
  font-size: var(--fs-s);
  color: var(--color-gray);
  padding-bottom: 1rem;
}
.l-pg-nav_list {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: var(--space-3s);
}
.l-pg-nav_list li:not(:has(a)),
.l-pg-nav_list li a {
  height: 100%;
  line-height: var(--line-height-s);
  border-radius: var(--rd-h);
  background-color: #FFF;
  padding: var(--pd);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
}
.l-pg-nav_list li.-span2 {
  grid-column: span 2;
}

/*--------------------------------------------------------------------------------

  404

--------------------------------------------------------------------------------*/
.l-not-found {
  padding: var(--space-m) 0;
}
.l-not-found .ttl {
  line-height: var(--line-height-s);
  font-family: var(--ff-go);
  font-size: var(--fs-2l);
  font-weight: 700;
  margin-bottom: var(--inner-space-s);
}