/*===========================================================================
header
headerで使用するCSS
接頭辞【.l-】

--font-color-base: #333;
--font-family-base: "Sigma Serif" ,"Noto Sans JP", sans-serif;
--back-color-Off-white: #FEFEFD;
--back-color-Sand: #FAF8F2;
--back-color-Pale: #E6E2DC;
--design-size-pc: 1456;
--design-size-sp: 390;
--header-height: 48rem;
--header-height-sp: 48rem;
--spacing-02: 2rem;
--spacing-04: 4rem;
--spacing-08: 8rem;
--spacing-12: 12rem;
--spacing-16: 16rem;
--spacing-20: 20rem;
--spacing-24: 24rem;
--spacing-32: 32rem;
--spacing-40: 40rem;
--spacing-48: 48rem;
--spacing-56: 56rem;
--spacing-64: 64rem;
--spacing-72: 72rem;
--spacing-80: 80rem;
--spacing-88: 88rem;
--spacing-96: 96rem;
--spacing-120: 120rem;
--spacing-160: 160rem;
--spacing-200: 200rem;
===========================================================================*/
@media screen and (min-width: 1201px) {
	.l-header .sp {
		display: none !important;
	}
}
@media screen and (max-width: 1200px) {
  .l-header .sp {
		display: block !important;
	}
	.l-header .pc {
		display: none !important;
	}
}



.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.l-header__inr {
  position: relative;
  padding-bottom: 0;
  z-index: 1;
}
.l-header__inr > * {
  z-index: 10;
}
.l-header__logo {
  padding-bottom: var(--idt-num);
}
.l-header__logo a {
  width: 85rem;
  display: block;
  margin: -2rem;
}
.l-header__ttl .--type-active {
  border-bottom: 1px solid ;
  pointer-events: none;
}

/* PC
----------------------------------*/
/* @media screen and (min-width: 1201px) { */
@media screen and (min-width: 1201px) {
  .l-header__menu::after {
    content: " ";
    width: 100%;
    height: 100%;
    background-color: var(--back-color-Off-white);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .l-header__nav {
    cursor: pointer;
    margin: 0 -8rem;
  }
  .l-header__ttl {
    position: relative;
    z-index: 1;
    padding: 0 var(--spacing-08) var(--idt-num);
  }
  .l-header__nav:hover .l-header__ttl {
    opacity: 0.7;
  }
  .l-header__nav:hover .l-header__ttl.--type-lang {
    opacity: 1;
  }
  .l-header__nav .l-header__ttl.--type-lang a:hover {
    opacity: 0.7;
  }
  .l-header__ttl a:hover {
    text-decoration: none;
  }
  .l-header__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--back-color-Off-white);
    transform: translateY(-100%);
    z-index: -10;
    overflow: hidden;
    transition: all 0.1s 0.1s linear;
  }
  .l-header__nav:hover .l-header__box {
    transform: translateY(var(--header-height));
    transition: all 0s 0s linear;
    z-index: -1;
  }
  .l-header__boxMenu {
    gap: var(--spacing-02);
    padding-bottom: var(--spacing-32);
  }
  .l-header__boxMenu a {
  }
  .l-header__boxMenu a:hover {
    opacity: 0.7;
  }

  .l-support .l-header__menu::after,
  .l-support .l-header__box {
    background-color: var(--back-color-Sand);
  }
}
/* SP
----------------------------------*/
/* @media screen and (max-width: 1200px) { */
@media screen and (max-width: 1200px) {
  .l-header {
    background-color: var(--back-color-Off-white);
  }
  .l-header__inr {
    padding-bottom: var(--idt-num);
  }
  .l-header__logo {
    padding-bottom: 0;
  }
  .l-header__logo a {
    width: 85rem;
    display: block;
    margin: -2rem;
  }
  .l-header__boxMenu {
    gap: var(--spacing-04);
    padding-bottom: var(--spacing-16);
  }
  .l-support .l-header__inr {
    background-color: var(--back-color-Sand);
  }
}

.l-header__ol {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  z-index: 999;
  display: none;
  opacity: 0;
}



/*====================================
横開閉要素（SPヘッダー）
====================================*/
.c-toggleMenu__cts {
  padding-top: var(--spacing-48);
  padding-bottom: var(--spacing-64);
}
/* SP
----------------------------------*/
/* @media screen and (max-width: 1200px) { */
@media screen and (max-width: 1200px) {
  .c-toggleMenu {
    height: 100%;
    position: relative;
    z-index: 1001;
    /* padding-bottom: var(--spacing-80); */
  }
  .c-toggleMenu__cts {
    max-height: calc(100% - 50rem);
    overflow-y: scroll;
    width: 100%;
  }
  .l-header__ttl {
    cursor: pointer;
    display: flex;
    padding: var(--spacing-08) 12rem var(--spacing-08) 0;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  [data-js-toggle-wrap] .l-header__ttl::before,
  [data-js-toggle-wrap] .l-header__ttl::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 3rem;
    width: 6rem;
    height: 1px;
    background-color: var(--font-color-base);
    transform-origin: center;
    transition: all 0.3s linear;
  }
  [data-js-toggle-wrap] .l-header__ttl::before {
    transform: translateY(-50%) rotate(90deg);
  }
  [data-js-toggle-wrap].js-open .l-header__ttl::before {
    transform: translateY(-50%) rotate(0);
  }
  [data-js-toggle-wrap] .l-header__ttl::after {
    transform: translateY(-50%)
  }
  .l-header__box {
    height: 0px;
    display: none;
  }
  .l-header__boxMenu {
    padding-right: 0;
    padding-left: 0;
  }
  .l-header__menu {
    padding-bottom: 60rem;
  }
  .l-header__nav:last-of-type {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 var(--idt-num) 70rem var(--idt-num);
    width: 100%;
    background-color: var(--back-color-Off-white);
  }
}