@charset "UTF-8";
/*----------------------------------------------------
	コンテナ
----------------------------------------------------*/
.l-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
}
@media screen and (max-width: 640px) {
  .l-container {
    padding-left: 5.1282051282vw;
    padding-right: 5.1282051282vw;
  }
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .l-container {
    padding-left: 5.1282051282vw;
    padding-right: 5.1282051282vw;
  }
}
@media screen and (min-width: 1024px) {
  .l-container {
    padding-left: 4.1666666667vw;
    padding-right: 4.1666666667vw;
  }
}
@media screen and (min-width: 1441px) {
  .l-container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

/*----------------------------------------------------
	body
----------------------------------------------------*/
body {
  position: relative;
}
.l-body-wrap {
  width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 1023px) {
  .l-body-wrap {
    overflow: hidden;
  }
}

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
.l-header {
  display: flex;
  position: fixed;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 500;
  background: #fff;
  padding: 0 1.25rem;
}
.l-header:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 100%;
  pointer-events: none;
  border-bottom: var(--border-gray);
  transition: var(--lineTransition);
}
.windowLoaded .l-header:after {
  width: 100%;
}
.is-nav-open .l-header {
  background: #000;
}
.is-page-dark:not(.is-nav-open) .l-header {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(5px);
  color: #fff;
  --color: #fff;
}
@media screen and (min-width: 1280px) {
  .l-header {
    padding: 0 3.75rem;
    display: grid;
    grid-template-areas: "logo action" "logo nav";
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
  }
}

@media screen and (min-width: 1280px) {
  .l-header--sm {
    height: var(--header-height-sm);
    grid-template-areas: "logo nav action";
    grid-template-columns: 1fr auto auto;
    padding: 0 0 0 1.25rem;
  }
  .l-header--sm .l-header-logo {
    width: 9.75rem;
  }
  .l-header--sm .l-header-action__other {
    display: none;
  }
  .l-header--sm .l-header-action__cta {
    gap: 0;
    margin-top: 0;
    margin-left: 2rem;
  }
}

.l-header-logo {
  width: 9.75rem;
  line-height: 0;
  position: relative;
  transition: var(--duration) var(--easeTheme);
}
.l-header-logo img {
  display: block;
}
.l-header-logo img:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.is-page-dark:not(.is-nav-open) .l-header-logo img:nth-child(1), .is-nav-open .l-header-logo img:nth-child(1) {
  opacity: 0;
}
.is-page-dark:not(.is-nav-open) .l-header-logo img:nth-child(2), .is-nav-open .l-header-logo img:nth-child(2) {
  opacity: 1;
}
@media screen and (min-width: 1280px) {
  .l-header-logo {
    grid-area: logo;
    width: 13.65rem;
  }
}

@media screen and (max-width: 1279px) {
  .l-header-action {
    display: none;
  }
}
@media screen and (min-width: 1280px) {
  .l-header-action {
    grid-area: action;
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
  }
}

.l-header-action__other {
  display: flex;
  gap: 1.25rem;
}
@media screen and (min-width: 1280px) {
  .l-header-action__other {
    margin-top: 0.8125rem;
  }
}

.l-header-action__search {
  position: relative;
}

.l-header-action__lang {
  position: relative;
}

.l-header-action__cta {
  display: flex;
  gap: 0.3125rem;
}
@media screen and (min-width: 1280px) {
  .l-header-action__cta {
    margin-top: 0.625rem;
  }
}

@media screen and (max-width: 1279px) {
  .l-header-nav {
    display: none;
  }
}
@media screen and (min-width: 1280px) {
  .l-header-nav {
    grid-area: nav;
    display: flex;
    justify-content: flex-end;
    gap: 4rem;
    align-self: flex-end;
  }
  .l-header--sm .l-header-nav {
    gap: 1.5rem;
  }
}

.l-header-menu {
  position: absolute;
  right: 0;
  top: 0;
}
@media screen and (min-width: 1280px) {
  .l-header-menu {
    display: none;
  }
}

.l-header-megamenu {
  position: absolute;
  width: 100%;
  left: 0;
  top: var(--header-height);
}
.l-header--sm .l-header-megamenu {
  top: var(--header-height-sm);
}

.l-header-megamenu__nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: var(--duration) var(--easeTheme);
}
.l-header-megamenu__nav.is-active {
  pointer-events: auto;
  opacity: 1;
}

/*----------------------------------------------------
	l-header-drawer
----------------------------------------------------*/
.l-header-drawer {
  width: 100%;
  position: fixed;
  inset: var(--header-height) 0 0;
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  background: #000;
}
.is-nav-open .l-header-drawer {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (min-width: 1280px) {
  .l-header-drawer {
    display: none;
  }
}

.l-header-drawer__wrap {
  height: 100%;
  overscroll-behavior: none;
  padding: 0.625rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--padding-block);
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__wrap {
    height: 100%;
    justify-content: center;
    padding: var(--padding-section) 3.75rem;
  }
}

.l-header-drawer__other {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.l-header-drawer__cta {
  display: flex;
  margin-inline: -1.25rem;
}
.l-header-drawer__cta li {
  flex: 1;
}

/*----------------------------------------------------
	main
----------------------------------------------------*/
/*----------------------------------------------------
	...
----------------------------------------------------*/
.l-aside-pagetop {
  position: fixed;
  right: 0.9375rem;
  bottom: 0.625rem;
  z-index: 50;
}
.l-aside-pagetop .c-btn-pagetop {
  transform: rotate(90deg);
  transform-origin: right top;
}
.l-aside-pagetop {
  opacity: 0;
  pointer-events: none;
  transition: var(--duration) var(--easeTheme);
}
.is-scrolled .l-aside-pagetop {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width: 1023px) {
  .l-aside-pagetop {
    display: none;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.l-footer {
  position: relative;
  padding: 1.875rem 0 0;
  background: #1E1E1E;
}
.l-footer:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  border-top: var(--border-gray);
  z-index: 5;
  transition: var(--lineTransition);
}
.windowLoaded .l-footer:before.is-visible, .windowLoaded .is-visible .l-footer:before {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .l-footer {
    padding: 5rem 0 0;
  }
}

.l-footer__wrap {
  display: grid;
  gap: 1.5rem 0;
}
@media screen and (min-width: 1024px) {
  .l-footer__wrap {
    grid-template-areas: "nav nav" "copyright nav2";
    gap: 2.25rem 0;
  }
}

.l-footer-nav {
  border-bottom: var(--border-gray);
}
@media screen and (min-width: 1024px) {
  .l-footer-nav {
    grid-area: nav;
    padding: 0 0 4.625rem;
  }
}

.l-footer-nav2 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 1rem;
}
.l-footer-nav2 a {
  position: relative;
}
.l-footer-nav2 a:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  top: 100%;
  pointer-events: none;
  border-top: var(--border);
  transition: var(--duration) var(--easeTheme);
}
.is-section-dark .l-footer-nav2 a:after {
  border-color: #fff;
}
a:hover .l-footer-nav2 a:after, .l-footer-nav2 a:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}
.l-footer-nav2 a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.l-footer-nav2 a svg {
  fill: #fff;
  stroke: #fff;
}
@media screen and (min-width: 1024px) {
  .l-footer-nav2 {
    grid-area: nav2;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 0.75rem;
  }
}

.l-footer-copyright {
  color: #AFAFAF;
  font-family: var(--Zalando);
  font-size: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .l-footer-copyright {
    grid-area: copyright;
  }
}

.l-footer__type {
  margin-top: 3.75rem;
}
.l-footer__type svg {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .l-footer__type {
    margin-top: 4.0625rem;
  }
}