@charset "UTF-8";
/* ========================================
  header
======================================== */
body {
	background-color: #fff;
}
.l-main {
	margin-top: var(--header-height);
}
/* ============================================================================================ l-header */
.l-header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	height: var(--header-height);
	z-index: var(--zindex-header);
	mix-blend-mode: difference;
}
.l-header__logo {
	margin-left: 3rem;
}
.l-header__logo img {
  filter: brightness(0) invert(1);
}
.l-header__inner {
	display: flex;
	justify-content: space-between;
	height: inherit;
	align-items: center;
}
.l-header__nav {
	position: relative;
	display: flex;
	padding-right: 22rem;
	height: inherit;
	align-items: center;
}
.l-header__contact {
	position: fixed;
	top: 0;
	right: 0;
	height: var(--header-height);
	width: 18rem;
	z-index: var(--zindex-header);
}

/* ================================================================== global-nav */
.global-nav {
	display: flex;
}
.global-nav__link {
	color: transparent;
	font-size: clamp(12px, 1.2rem, 1.2rem);
	line-height: 1;
	font-weight: var(--fw-medium);
	mix-blend-mode: difference;
}
.global-nav__list {
	padding-inline: 1.5rem;
	overflow: hidden;
	line-height: 1;
}
.global-nav__list .c-text-slide {
	--ts-color-base: var(--color-white);
	--ts-color-hover: var(--color-white);
}
/* ================================================================== global-contact */
.global-contact {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	text-decoration: none;
	height: inherit;
	z-index: 1;
	overflow: hidden;
	transition: color var(--anim-speed);
}
.global-contact::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--anim-speed) cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1;
}
.global-contact__inner {
	position: relative;
	padding-right: 2.8rem;
}
.global-contact__text {
	font-size: 1.6rem;
	text-decoration: none;
	font-weight: var(--fw-medium);
}
.global-contact__text--wrapper {
	overflow: hidden;
	height: 1lh;
	line-height: 1lh;
}
.global-contact__icon {
	position: absolute;
	width: 1.4rem;
	height: auto;
	aspect-ratio: 11 / 9;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
}
.c-arrow-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: geometricPrecision; 
  text-rendering: geometricPrecision;
}
@media (max-width: 767px) {
	.global-contact__icon {
		position: static;
		width: 1.2rem;
		align-self:center;
		transform: translateY(0%);
	}
}
/* ============================================================================================ header max-width: 767px */
@media (max-width: 767px) {
	.l-header,
	.hamburger,
  .l-main {
		--header-height:7.2rem;
	}
	.l-header__logo {
		margin-left: 4.1025%;
	}
  body.is-opened {
    overflow: hidden;
    height: 100vh;
  }
	.hamburger {
		position: fixed;
		top: 0.8rem;
		right: 2.0512%;
		display: block;
		width: 5.6rem;
		aspect-ratio: 1/1;
		z-index: var(--zindex-hamburgermenu-button);
		mix-blend-mode: difference;
    touch-action: manipulation;
	}
	.hamburger__line {
		position: absolute;
		width: 3.6rem;
		top: 50%;
		left: 50%;
		height: 1px;
		background-color: var(--color-white);
		transform: translate(-50%, -50%);
		transition: transform 0.2s, top 0.2s 0.2s;
	}
	.hamburger__line:first-child {
		top: calc(50% - 3px);
	}
	.hamburger__line:last-child {
		top: calc(50% + 3px);
	}
	/* ================================================ hamburger.is-active */
	.hamburger.is-active .hamburger__line {
    transition: top 0.2s, transform 0.2s 0.2s;
		background-color: var(--color-white);
  }
  .hamburger.is-active .hamburger__line:first-child {
    top: 50%;
    transform: translate(-50%, -50%) rotate(12deg);
  }
  .hamburger.is-active .hamburger__line:last-child {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
  }
	/* ================================================ hamburger-contents */
	.hamburger-contents {
		position: fixed;
		width: 100%;
		height: 100vh;
		height: 100dvh;	
		top: 0;
		left: 0;
		background-color: var(--color-black);
		color: var(--color-white);
		z-index: var(--zindex-hamburgermenu-contents);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility .35s ease;
	}
	.hamburger-contents.is-active {
		opacity: 1;
		visibility: visible;
	}
	.hamburger-contents__obj {
		width: 100%;
		position: absolute;
		top: 15rem;
		left: 0;
		z-index: -1;
	}
	.hamburger-contents__layer {
		padding: 7.2rem 4.0rem 5.0rem 4.0rem;
		padding-bottom: calc(5.0rem + env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow-y: auto;
	}
	.hamburger-contents__nav-link {
		text-decoration: none;
		font-size: 2.8rem;
		font-weight: var(--fw-semibold);
		padding-block: .8rem;
	}
	.hamburger-contents__contact {
		margin-top: auto;
		margin-inline: auto;
		width: 24rem;
		height: 5.6rem;
		background-color: var(--color-primary);
		flex-shrink: 0;
	}
	.contact-btn__link {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.0rem;
		height: 100%;
	}
	.hamburger-contents__contact .contact-btn__text {
		margin-left: 1.2rem;
		font-size: 1.6rem;
		color: var(--color-black);
		font-weight: var(--fw-medium);
	}
	.hamburger-contents__contact .c-arrow-icon {
		width: 1.2rem;
	}
	.hamburger-contents__nav-item,
	.hamburger-contents__contact {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-20px);
	}
}
/* ========================================
  footer
======================================== */
.footer-nav__link {
	padding-top: 1.2rem;
	position: relative;
	display: block;
	will-change: transform;
	text-decoration: none;
}
.footer-nav__link::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	padding-bottom: 5px;
	border-top: 1px solid var(--color-black);
	bottom: .1rem;
	left: 0;
	height: 0.1rem;
	background-color: var(--color-white);
}
.footer-nav__title-en {
	padding-left: 2.8rem;
	font-size: 6rem;
	font-weight: var(--fw-bold);
	line-height: 1;
}
.footer-nav__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-nav__num {
	position: absolute;
	top: 1.4rem;
	left: 0;
	font-size: 1.4rem;
	font-weight: var(--fw-semibold);
}
.footer-nav__title-jp {
	position: relative;
	top: -0.2rem;
	font-size: 1.4rem;
}
/* ================================================================== footer-bottom */
.footer-bottom {
	padding-block: 12.5rem 2.0rem;
}
.footer-bottom__inner {
	display: flex;
	justify-content: space-between;
}
.footer-bottom__logo {
	width: 60rem;
}
.footer-bottom__address-list {
	margin-top: 2.7rem;
	display: flex;
	gap: 6.2rem;
}
.footer-bottom__address-title {
	font-size: 1.3rem;
	font-weight: var(--fw-semibold);
}
.footer-bottom__address-post {
	margin-top: 1.2rem;
	font-size: 1.1rem;
}
.footer-bottom__address-detail {
	font-size: 1.1rem;
}
.footer-bottom__address-tel {
	margin-top: 2.0rem;
	font-size: 1.1rem;
}
.footer-privacy {
	margin-top: 4.7rem;
	display: flex;
	justify-content: space-between;
}
.footer-privacy__copy {
	font-size: 1.1rem;
}
.footer-privacy__nav {
  display: flex;
}
.footer-privacy__nav a {
	font-size: 1.2rem;
  position: relative;
}
.footer-privacy__nav a + a{
	margin-left: 1.0rem;
}
.footer-privacy__nav a + a::before {
	position: absolute;
	top: 0;
	left: -0.6rem;
  content: "/";
  margin-right: .2rem;
  color: currentColor;
  opacity: 0.6; 
}
/* ============================================================================================ footer max-width: 767px */
@media (max-width: 767px) {
	.footer-bottom {
		padding-block: 8.4rem 1.6rem;
	}
	.footer-nav__title-jp {
		display: none;
	}
	.footer-nav__num {
		top: 1.0rem;
		font-size: 1.1rem;
	}
	.footer-nav__title-en {
		font-size: 3.8rem;
	}
	.footer-nav__link {
		padding-top: 1.5rem;
	}
	.footer-nav__link::after {
		bottom: 0rem;
	}
	.footer-bottom__inner {
		flex-direction: column-reverse;
	}
	.footer-bottom__logo {
		margin-top: 4.0rem;
		width: 22rem;
	}
	.footer-bottom__address-list {
		display: grid;
		gap: 3.0rem;
		grid-template-columns: repeat(2, 1fr);
	}
	.footer-bottom__address-title {
		font-size: 1.2rem;
	}
	.footer-bottom__address-post {
		margin-top: .8rem;
	}
	.footer-bottom__address-tel {
		margin-top: .4rem;
	}
	.footer-privacy {
		margin-top: 4.0rem;
	}
}
@media (min-width: 768px) {

}

/* ============================================================================================ hover pc */
@media (hover: hover) and (pointer: fine) {
	.hover-arrow-animation .global-contact__text {
		--ts-color-base: var(--color-black);
		--ts-color-base: var(--color-black);
		text-shadow: 0 0 0 var(--ts-color-base), 0 1.2em 0 var(--ts-color-base);
		transition: text-shadow 0.5s cubic-bezier(0.2, 1, 0.3, 1);
		color: transparent;
	}
	.hover-arrow-animation:hover .global-contact__text {
		--ts-color-hover: var(--color-black);
		--ts-color-hover: var(--color-black);
		text-shadow: 0 -1.2em 0 var(--ts-color-hover), 0 0 0 var(--ts-color-hover);
	}
	.c-text-slide {
		text-shadow: 0 0 0 var(--ts-color-base), 0 1.2em 0 var(--ts-color-base);
		transition: text-shadow 0.5s cubic-bezier(0.2, 1, 0.3, 1);
	}
  .c-text-slide:hover {
		cursor: pointer;
		text-shadow: 0 -1.2em 0 var(--ts-color-hover), 0 0 0 var(--ts-color-hover);
	}
}