@charset "UTF-8";
/*-------------------------
 * 
 * 
 * 
 * リセット
 * 
 * 
 * 
-------------------------*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/*-------------------------
 * 
 * 
 * 
 * 基本設定
 * 
 * 
 * 
-------------------------*/

:root {
	--black: #1A1A1A;
	--white: #efefef;
	--darkGray01: #282828;
	--darkGray02: #343434;
	--gray01: #4c4c4c;
	--gray02: #646464;
	--lightGray01: #959595;
	--lightGray02: #bcbcbc;
	--accent: #DC0032;
	--font-size-default: 16px;
}

html {
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

html::-webkit-scrollbar {
	display:none;
}

body {
	font: 400 16px/1.75 Inter, Noto Sans JP, system-ui;
	color: var(--white);
	background: var(--black);
	width: 100%;
	position: fixed;
	inset: 0;
	overflow-x: clip;
}

body.isActive {
	position: relative;
	inset: auto;
}

body.isFixed {
	width: 100%;
	position: fixed;
	inset: 0;
}

a:link,
a:visited {
	color: var(--white);
	text-decoration: none;
	transition: .5s ease;
}

@media (any-hover: hover) {

	a:hover,
	a:active {
		color: var(--white);
		text-decoration: none;
	}
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	backface-visibility: hidden;
	image-rendering: -webkit-optimize-contrast;
}

@view-transition {
	navigation: auto;
}

/*::selection {
	background: rgba(27, 221, 193, .9);
	color: #fefefe;
}

::-moz-selection {
	background: rgba(27, 221, 193, .9);
	color: #fefefe;
}*/

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

	body {
		font-size: 14px;
	}

}

/*-------------------------
 * 
 * 
 * Light mode
 * 
 * 
-------------------------*/

#body {
	transition: .5s ease;
}

#body.isLightMode {
	background: #fefefe;
}

/*-------------------------
 * 
 * 
 * 
 * ノイズ
 * 
 * 
 * 
-------------------------*/

#noise {
	width: 100%;
	height: 100%;
	position: fixed;
	inset: 0;
	overflow: hidden;
	opacity: .4;
	z-index: -1;
}

#noise::before {
	display: block;
	content: '';
	background: url(../images/common/noise.webp);
	width: 400%;
	height: 400%;
	position: fixed;
	top: -200%;
	left: -200%;
	animation: noise 8s steps(10) infinite;
}

@keyframes noise {
	
	to {
		background-position: 0 0;
	}
	
	10% {
		background-position: -5% -10%;
	}
	
	20% {
		background-position: -15% 5%;
	}
	
	30% {
		background-position: 7% -25%;
	}
	
	40% {
		background-position: 20% 25%;
	}
	
	50% {
		background-position: -25% 10%;
	}
	
	60% {
		background-position: 15% 5%;
	}
	
	70% {
		background-position: 0 15%;
	}
	
	80% {
		background-position: 25% 35%;
	}
	
	90% {
		background-position: -10% 10%;
	}

}

/*-------------------------
 * 
 * 
 * 
 * フォント
 * 
 * 
 * 
-------------------------*/

.ttCommonPro {
	/* font-family: "tt-commons-pro", sans-serif; */
	font-family: "tt-commons-pro", Noto Sans JP, system-ui;
	font-style: normal;
}

.fw100 { font-weight: 100; }
.fw200 { font-weight: 200; }
.fw300 { font-weight: 300; }
.fw400 { font-weight: 400; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }
.fw800 { font-weight: 800; }
.fw900 { font-weight: 900; }

/*-------------------------
 * 
 * 
 * 
 * テキスト
 * 
 * 
 * 
-------------------------*/

.textBox > * {
	width: 100%;
	margin-bottom: 1.75em;
}

.textBox > *:first-child {
	margin-top: 0;
}

.textBox > *:last-child {
	margin-bottom: 0;
}

.ls-200 { letter-spacing: -.2em; }
.ls-175 { letter-spacing: -.175em; }
.ls-150 { letter-spacing: -.15em; }
.ls-125 { letter-spacing: -.125em; }
.ls-100 { letter-spacing: -.1em; }
.ls-75 { letter-spacing: -.075em; }
.ls-50 { letter-spacing: -.05em; }
.ls-25 { letter-spacing: -.025em; }
.ls25 { letter-spacing: .025em; }
.ls50 { letter-spacing: .05em; }
.ls75 { letter-spacing: .075em; }
.ls100 { letter-spacing: .1em; }
.ls125 { letter-spacing: .125em; }
.ls150 { letter-spacing: .15em; }
.ls175 { letter-spacing: .175em; }
.ls200 { letter-spacing: .2em; }

.symbol {
	margin: 0 .1em;
}

.punctuation {
	margin: 0 0 0 .1em;
}

.bracketOpen {
	margin: 0 .15em 0 -.6em;
}

.bracketClose {
	margin: 0 -.35em 0 .15em;
}

.etc {
	font-size: .75em;
	margin-left: .5em;
}

/*-------------------------
 * 
 * 
 * 
 * ユーティリティ
 * 
 * 
 * 
-------------------------*/
/*-------------------------
 * 
 * 
 * インナー
 * 
 * 
-------------------------*/

* > .inner {
	width: 92%;
	margin: 0 auto;
}

/*-------------------------
 * 
 * 
 * レイアウト
 * 
 * 
-------------------------*/

.flexDirectionColumn {
	display: flex;
	flex-direction: column;
}

/*-------------------------
 * 
 * 
 * 
 * コンポーネント
 * 
 * 
 * 
-------------------------*/
/*-------------------------
 * 
 * 
 * 画像
 * 
 * 
-------------------------*/

.pic {
	display: block;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}

.pic > .img {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.thumb {
	display: block;
	overflow: hidden;
}

.thumb .img {
	display: block;
	transition: .3s ease;
}

@media (any-hover: hover) {

	a:hover .thumb .img {
		transform: scale(1.1);
	}
	
}

/*-------------------------
 * 
 * 
 * ロールアップ
 * 
 * 
-------------------------*/

.rollUp a,
.rollUp button {
	display: block;
	position: relative;
	transition: .5s ease;
}

.rollUp a .rollUpText,
.rollUp button .rollUpText {
	line-height: 1;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rollUp a .rollUpText > span,
.rollUp button .rollUpText > span {
	display: block;
}

.rollUp a .rollUpText > span:nth-of-type(1),
.rollUp button .rollUpText > span:nth-of-type(1) {
	position: relative;
	transition: 0.5s transform cubic-bezier(.275,0,0,1);
	transform: translateY(0);
}

.rollUp a .rollUpText > span:nth-of-type(2),
.rollUp button .rollUpText > span:nth-of-type(2) {
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	transform: translateY(0%);
	transition: 0.5s all cubic-bezier(.275,0,0,1);
}

@media (any-hover: hover) {

	.rollUp a:hover .rollUpText > span:nth-of-type(1),
	.rollUp button:hover .rollUpText > span:nth-of-type(1) {
		transform: translateY(-100%);
	}

	.rollUp a:hover .rollUpText > span:nth-of-type(2),
	.rollUp button:hover .rollUpText > span:nth-of-type(2) {
		top: 0;
	}

}

.rollUp a .rollUpText > span:nth-of-type(2) > span,
.rollUp button .rollUpText > span:nth-of-type(2) > span {
	position: absolute;
	top: 1px;
	left: 50%;
	transform: translate(-50%, 0);
}

@media (max-width: 1280px) {

}

@media (max-width: 960px) {

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * スプリット
 * 
 * 
-------------------------*/

.split {
	opacity: 0;
	will-change: transform;
}

.split * {
	will-change: transform;
}

/*-------------------------
 * 
 * 
 * ボタン
 * 
 * 
-------------------------*/

.btn a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 14px;
	position: relative;
	width: 136px;
	height: 64px;
	overflow: hidden;
}

.btn a::before {
	display: block;
	content: '';
	width: 100%;
	height: 1px;
	background: #efefef;
	position: absolute;
	bottom: 0;
	left: 0;
}

.btn a:hover::before {
	animation: btnUnderline 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@keyframes btnUnderline {
	0%, 20% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(105%);
	}
	51%, 70% {
		transform: translateX(-105%);
	}
	100% {
		transform: translateX(0);
	}
}

.btn a .btnArrow {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	width: 11px;
	height: 11px;
	overflow: hidden;
}

.btn a .btnArrowBefore,
.btn a .btnArrowAfter {
	display: block;
	width: 11px;
	height: 11px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

.btn a .btnArrowAfter {
	transform: translateX(-100%);
}

.btn a:hover .btnArrowBefore {
  animation-name: btnArrowFromRightToLeft;
  animation-delay: 0s;
}

.btn a:hover .btnArrowAfter {
  animation-name: btnArrowFromLeftToRight;
  animation-delay: 0.2s;
}

@keyframes btnArrowFromLeftToRight {
	0% {
		transform: translate(-100%, 100%);
	}
	100% {
		transform: translate(0);
	}
}

@keyframes btnArrowFromRightToLeft {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(100%, -100%);
	}
}

.btn a .btnArrow svg path {
	fill: #efefef;
}

/*-------------------------
 * 
 * 
 * Light mode
 * 
 * 
-------------------------*/

.btn.isLightMode a {
	color: #1a1a1a;
}

.btn.isLightMode a::before {
	background: #1a1a1a;
}

.btn.isLightMode a .btnArrow svg path {
	fill: #1a1a1a;
}

/*-------------------------
 * 
 * 
 * Blur Fade In
 * 
 * 
-------------------------*/

.blurFadeIn {
	opacity: 0;
	visibility: hidden;
	filter: blur(8px);
	transform: scale(1.05);
	transition: 1s ease;
}

.blurFadeIn.isActive {
	opacity: 1;
	visibility: visible;
	filter: blur(0);
	transform: scale(1);
}

/*-------------------------
 * 
 * 
 * 
 * ローディング
 * 
 * 
 * 
-------------------------*/

.loadingLogo {
	width: 100%;
	height: 100dvh;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	animation: loadingLogo ease 2s forwards;
}
@keyframes loadingLogo {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	72% {
		opacity: 1;
		visibility: visible;
	}
}

.loadingCatch {
	width: 100%;
	height: 100dvh;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	opacity: 1;
	transition: .5s ease;
}

/*-------------------------
 * 
 * 
 * Light mode
 * 
 * 
-------------------------*/

.loadingCatch.isPassive {
	opacity: 0;
}

/*-------------------------
 * 
 * 
 * 
 * ラッパー
 * 
 * 
 * 
-------------------------*/

#wrapper {
	width: 100%;
	opacity: 0;
	visibility: hidden;
	position: relative;
	z-index: 2;
}

#wrapper.isActive {
	animation: wrapperFadeIn ease 2s forwards;
}

@keyframes wrapperFadeIn {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 1;
		visibility: visible;
	}
}

/*-------------------------
 * 
 * 
 * 
 * ヘッダー
 * 
 * 
 * 
-------------------------*/

#header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	overflow: hidden;
	transition: .5s ease;
}

#header > .inner {
	height: 88px;
	padding: 24px 0 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#header .logo {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transition: .5s ease;
}

#header .logo a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, 100%);
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

#header.isActive .logo a {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}

#header .logo svg path {
	fill: #efefef;
	transition: .3s ease;
}

#header #globalNav {
	position: absolute;
	top: auto;
	left: 50%;
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible;
	transition: .5s ease;
}

#header.isPassive #globalNav {
	opacity: 0;
	visibility: hidden;
}

#globalNav > .inner {
	width: 100%;
}

#globalNav .globalNavItems ul {
	display: flex;
	align-items: center;
	column-gap: 48px;
}

#globalNav .globalNavItem {
	margin: 0 -8px;
}

#globalNav .globalNavItem01 {
	margin: 0 -16px;
}

#globalNav .globalNavItem a {
    font-size: 14px;
	height: 40px;
	line-height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


#header #globalNav .globalNavItem a .globalNavItemSplit {
	padding: 0 8px;
	line-height: 1;
	overflow: hidden;
}

#header #globalNav .globalNavItem01 a .globalNavItemSplit {
	padding: 0 16px;
}

#header #globalNav .globalNavItem a .globalNavItemText {
	padding: 0 8px;
	align-items: center;
	position: relative;
	transform: translate(0, 100%);
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

#header.isActive #globalNav .globalNavItem a .globalNavItemText {
	transform: translate(0, 0);
	opacity: 1;
	visibility: visible;
}

#header #globalNav .globalNavItem01 a .globalNavItemText {
	padding: 0 16px;
}

#globalNav .globalNavItem a .globalNavItemText > span {
	display: block;
	text-align: center;
}

#globalNav .globalNavItem a .globalNavItemText > span:nth-of-type(1) {
	font-size: 14px;
}

#globalNav .globalNavItem a .globalNavItemText > span:nth-of-type(2) {
	font-size: 12px;
}

#header .headerContents {
	opacity: 0;
	visibility: hidden;
}

#header.isActive .headerContents {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 1024px) {

	#header > .inner {
		height: 72px;
		padding-top: 8px;
	}

	#header .logo {
		top: 8px;
		left: 0px;
	}

	#globalNav {
		display: none;
	}

}

@media (max-width: 640px) {

	#header > .inner {
		height: 64px;
		padding-top: 0;
	}

	#header .logo {
		top: 8px;
		left: 6px;
	}

}

/*-------------------------
 * 
 * 
 * Light Mode
 * 
 * 
-------------------------*/

#header.isLightMode .logo svg path {
	fill: #1a1a1a;
}

#header.isLightMode.isPassive .logo svg path {
	fill: #efefef;
}

#header.isLightMode #globalNav .globalNavItem a {
	color: #1a1a1a;
}

/*-------------------------
 * 
 *
 * 
 * Navicon
 * 
 * 
 *
-------------------------*/

#navicon {
	display: block;
	width: 64px;
	height: 64px;
	position: relative;
	right: -23px;
	overflow: hidden;
}

#header #navicon button {
	all: unset;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
}

#navicon button::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s ease;
}

#navicon:hover button::before {
	background: #2e2e2e;
	transform: translate(-50%, -50%) scale(.7);
	transition: .3s ease;
}

#navicon .naviconDots {
	width: 17px;
	height: 17px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

#header #navicon .naviconDots > .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, 100%);
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

#header.isActive #navicon .naviconDots > .inner {
	transform: translate(0, 0);
	opacity: 1;
	visibility: visible;
}

#navicon .naviconDots > .inner > span {
	display: block;
	width: 3px;
	height: 3px;
	background: #efefef;
	border-radius: 50%;
	position: absolute;
	transition: .3s ease;
}

#navicon .naviconDots > .inner > span:nth-of-type(1) {
	top: 0;
	left: 0;
}

#navicon .naviconDots > .inner > span:nth-of-type(2) {
	top: 0;
	left: 7px;
}

#navicon .naviconDots > .inner > span:nth-of-type(3) {
	top: 0;
	left: 14px;
}

#navicon .naviconDots > .inner > span:nth-of-type(4) {
	top: 7px;
	left: 0;
}

#navicon .naviconDots > .inner > span:nth-of-type(5) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#navicon .naviconDots > .inner > span:nth-of-type(6) {
	top: 7px;
	left: 14px;
}

#navicon .naviconDots > .inner > span:nth-of-type(7) {
	top: 14px;
	left: 0;
}

#navicon .naviconDots > .inner > span:nth-of-type(8) {
	top: 14px;
	left: 7px;
}

#navicon .naviconDots > .inner > span:nth-of-type(9) {
	top: 14px;
	left: 14px;
}

#navicon:hover .naviconDots > .inner > span:nth-of-type(1),
#navicon:hover .naviconDots > .inner > span:nth-of-type(2),
#navicon:hover .naviconDots > .inner > span:nth-of-type(3),
#navicon:hover .naviconDots > .inner > span:nth-of-type(4),
#navicon:hover .naviconDots > .inner > span:nth-of-type(6),
#navicon:hover .naviconDots > .inner > span:nth-of-type(7),
#navicon:hover .naviconDots > .inner > span:nth-of-type(8),
#navicon:hover .naviconDots > .inner > span:nth-of-type(9) {
	top: 7px;
	left: 7px;
}

#navicon:hover .naviconDots > .inner > span:nth-of-type(5) {
	width: 9px;
	height: 9px;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

	#navicon {
		right: -16px;
	}

}

/*-------------------------
 * 
 *
 * ハンバーガーメニュー展開時
 * 
 *
-------------------------*/

#navicon.isActive button::before,
#navicon.isActive:hover button::before {
	background: #efefef;
	transform: translate(-50%, -50%) scale(.7);
}

#navicon.isActive .naviconDots > .inner > span,
#navicon.isActive:hover .naviconDots > .inner > span {
	background: #1A1A1A;
}

#navicon.isActive .naviconDots > .inner > span:nth-of-type(1) {
	top: 0;
	left: 0;
}

#navicon.isActive .naviconDots > .inner > span:nth-of-type(3) {
	top: 0;
	left: 14px;
}

#navicon.isActive .naviconDots > .inner > span:nth-of-type(7) {
	top: 14px;
	left: 0;
}

#navicon.isActive .naviconDots > .inner > span:nth-of-type(9) {
	top: 14px;
	left: 14px;
}

#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(1),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(2),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(2),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(3),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(4),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(4),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(6),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(6),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(7),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(8),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(8),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(9) {
	top: 7px;
	left: 7px;
}

#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(5) {
	width: 9px;
	height: 9px;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * Light mode
 * 
 * 
-------------------------*/

#header.isLightMode #navicon:hover button::before {
	background: #efefef;
}

#header.isLightMode #navicon .naviconDots > .inner > span {
	background: #1a1a1a;
}

/*-------------------------
 * 
 * 
 * 
 * ハンバーガーメニュー
 * 
 * 
 * 
-------------------------*/

#hamburgerMenu {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: .3s ease;
}

#hamburgerMenu.isActive {
	opacity: 1;
	visibility: visible;
}

#hamburgerMenu > .hamburgerMenuBg {
	background: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}

#hamburgerMenu.isActive > .hamburgerMenuBg {
	opacity: 1;
	visibility: visible;
}

#hamburgerMenu .hamburgerMenuBgCircle {
	background: var(--black);
	width: 0;
	height: 0;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	transition: 2s cubic-bezier(.075,.82,.165,1);
	pointer-events: none;
}

#hamburgerMenu.isActive .hamburgerMenuBgCircle {
	width: 5120px;
	height: 5120px;
	transform: translate(50%, -50%);
	overflow: hidden;
}

#hamburgerMenu > .inner {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	overflow-y: visible;
	overflow-x: hidden;
	-ms-overflow-style: none;
	display: block;
	transition: .5s ease;
}

#hamburgerMenu.isActive > .inner {
	opacity: 1;
	visibility: visible;
}

#hamburgerMenu > .inner .hamburgerMenuNoise {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: .4;
	z-index: 0;
}

#hamburgerMenu > .inner .hamburgerMenuNoise::before {
	display: block;
	content: '';
	background: url(../images/common/noise.webp);
	width: 400%;
	height: 400%;
	position: absolute;
	top: -200%;
	left: -200%;
	animation: noise 8s steps(10) infinite;
} 

#hamburgerMenuImg {
    position: fixed;
	top: 0;
	left: 0;
	width: 33.33%;
	height: 100%;
	min-height: 844px;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(-4%, 0, 0);
	overflow: clip;
	z-index: 0;
	background: #0f0f0f;
	will-change: animation;
	backface-visibility: hidden;
	overflow: hidden;
}

#hamburgerMenuImg.isActive {
	animation: hamburgerMenuImgFadeIn 2s ease .5s forwards;
}

@keyframes hamburgerMenuImgFadeIn {
	0% {
		opacity: 0;
		visibility: hidden;
		transform: translate3d(-4%, 0, 0);
	}
	100% {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}
}

#hamburgerMenuImg::before {
	display: block;
	content: '';
	width: 48px;
	height: 100%;
	background: linear-gradient(270deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 100%);
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

#hamburgerMenuImgParallaxArea {
	width: 100%;
	height: 100%;
	transition: .5s ease;
}

#hamburgerMenuImgParallaxObject {
    width: 100%;
    height: 100%;
    position: absolute;
}

#hamburgerMenuImgParallaxObject .hamburgerMenuImgParallaxObjectTerget {
	width: 104%;
	height: 104%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	background: url(../images/common/bamboo_w.webp) no-repeat right center / cover;
	opacity: .04;
	will-change: transform;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

#hamburgerMenu .hamburgerMenuContent {
	position: absolute;
	width: 66.66%;
	height: 100%;
	top: 0;
	right: 0;
}

#hamburgerMenu .hamburgerMenuContent > .inner {
	width: 100%;
	height: 100%;
	padding: 64px 80px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#hamburgerMenu .hamburgerMenuNav {
	display: flex;
	flex-wrap: wrap;
	gap: 88px;
}

#hamburgerMenu .hamburgerMenuNavUnits {
	display: flex;
	gap: 64px;
}

#hamburgerMenu .hamburgerMenuNavUnit ul {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#hamburgerMenu .hamburgerMenuItem {
	overflow: hidden;
}

#hamburgerMenu .hamburgerMenuItem a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

@keyframes hamburgerMenuItemRollUp {
	0% {
		transform: translate(0, 100%);
	}
	100% {
		transform: translate(0, 0);
	}
}

#hamburgerMenu a .hamburgerMenuItemTextEnWrapper {
	overflow: hidden;
}

#hamburgerMenu a .hamburgerMenuItemTextEn {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	font-size: 44px;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transform: translate(0, 100%);
}

#hamburgerMenu.isActive a .hamburgerMenuItemTextEn {
	animation: hamburgerMenuItemRollUp 1s ease .5s forwards;
}

#hamburgerMenu a .hamburgerMenuItemTextEnArrow {
	display: block;
	position: relative;
	bottom: 6px;
	width: 13px;
	height: 13px;
	overflow: hidden;
}

#hamburgerMenu a .hamburgerMenuItemTextEnArrowBefore,
#hamburgerMenu a .hamburgerMenuItemTextEnArrowAfter {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#hamburgerMenu a .hamburgerMenuItemTextEnArrowAfter {
	transform: translateX(-100%);
}

#hamburgerMenu a:hover .hamburgerMenuItemTextEnArrowBefore {
  animation-name: hamburgerMenuItemTextEnArrowFromRightToLeft;
  animation-delay: 0s;
}

#hamburgerMenu a:hover .hamburgerMenuItemTextEnArrowAfter {
  animation-name: hamburgerMenuItemTextEnArrowFromLeftToRight;
  animation-delay: 0.2s;
}

@keyframes hamburgerMenuItemTextEnArrowFromLeftToRight {
	0% {
		transform: translate(-100%, 100%);
	}
	100% {
		transform: translate(0);
	}
}

@keyframes hamburgerMenuItemTextEnArrowFromRightToLeft {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(100%, -100%);
	}
}

#hamburgerMenu a .hamburgerMenuItemTextEnArrow svg path {
	fill: #efefef;
}

#hamburgerMenu .hamburgerMenuItemTextJaWrapper {
	display: block;
	overflow: hidden;
}

#hamburgerMenu .hamburgerMenuItemTextJa {
	display: block;
	font-size: 14px;
	color: #777;
	transform: translate(0, 100%);
}

#hamburgerMenu.isActive .hamburgerMenuItemTextJa {
	animation: hamburgerMenuItemRollUp 1s ease 1s forwards;
}

#hamburgerMenu .hamburgerMenuNavSubUnits {
	padding: 4px 0 0;
}

#hamburgerMenu .hamburgerMenuNavSubUnit ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#hamburgerMenu .hamburgerMenuItemSub {
	font-size: 16px;
}

#hamburgerMenu .hamburgerMenuItemSub .hamburgerMenuItemSplit {
	overflow: hidden;
}

#hamburgerMenu .hamburgerMenuItemSub .hamburgerMenuItemSubText {
	transform: translate(0, 100%);
}

#hamburgerMenu.isActive .hamburgerMenuItemSub .hamburgerMenuItemSubText {
	animation: hamburgerMenuItemRollUp 1s ease 1s forwards;
}

#hamburgerMenu .hamburgerMenuFooter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 48px;
	margin-top: 88px;
}

#hamburgerMenu .hamburgerMenuSocialItems ul {
	display: flex;
	align-items: center;
	gap: 24px;
}

#hamburgerMenu .hamburgerMenuSocialItem {
	overflow: hidden;
}

#hamburgerMenu .hamburgerMenuSocialItem a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 28px;
	transform: translate(0, 100%);
}

#hamburgerMenu.isActive .hamburgerMenuSocialItem a {
	animation: hamburgerMenuItemRollUp 1.5s ease 1s forwards;
}

#hamburgerMenu .hamburgerMenuSocialItem a .hamburgerMenuItemIcon > span:nth-of-type(1),
#hamburgerMenu .hamburgerMenuSocialItem a .hamburgerMenuItemIcon > span:nth-of-type(2) {
	height: 28px;
}

#hamburgerMenu  .hamburgerMenuSocialItem a svg path {
	fill: #efefef;
}

@media (max-width: 1024px) {

	#hamburgerMenu .hamburgerMenuContent > .inner {
		padding: 64px 64px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	#hamburgerMenu .hamburgerMenuNav {
		flex-direction: column;
		gap: 56px;
	}

	#hamburgerMenu .hamburgerMenuNavUnits {
		flex-direction: column;
		gap: 16px;
	}

	#hamburgerMenu .hamburgerMenuNavUnit ul {
		gap: 16px;
	}

	#hamburgerMenu .hamburgerMenuItem a {
		gap: 4px;
	}

	#hamburgerMenu a .hamburgerMenuItemTextEn {
		gap: 8px;
		font-size: 32px;
	}

	#hamburgerMenu .hamburgerMenuFooter {
		margin-top: 80px;
	}

}

@media (max-width: 640px) {

	#hamburgerMenuImg {
		width: 20%;
	}

	#hamburgerMenu .hamburgerMenuContent {
		width: 80%;
	}

	#hamburgerMenu .hamburgerMenuContent > .inner {
		padding: 64px 40px 40px;
	}

	#hamburgerMenu .hamburgerMenuNav {
		gap: 48px;
	}

	#hamburgerMenu a .hamburgerMenuItemTextEn {
		gap: 6px;
		font-size: 28px;
	}

	#hamburgerMenu a .hamburgerMenuItemTextEnArrow {
		bottom: 4px;
		width: 12px;
		height: 12px;
	}

	#hamburgerMenu a .hamburgerMenuItemTextEnArrowBefore,
	#hamburgerMenu a .hamburgerMenuItemTextEnArrowAfter {
		width: 12px;
		height: 12px;
	}

	#hamburgerMenu .hamburgerMenuItemTextJa {
		font-size: 12px;
	}

	#hamburgerMenu .hamburgerMenuNavSubUnit ul {
		gap: 16px;
	}

	#hamburgerMenu .hamburgerMenuItemSub {
		font-size: 14px;
	}

	#hamburgerMenu .hamburgerMenuFooter {
		margin-top: 64px;
	}

}

/*-------------------------
 * 
 * 
 * 
 * Get in touch
 * 
 * 
 * 
-------------------------*/

#getInTouch {
	position: fixed;
	right: 48px;
	bottom: 64px;
	z-index: 10000;
	transform: scale(0);
	opacity: 0;
	visibility: hidden;
}

#getInTouch.isActive {
	animation: getInTouchFadeIn 1s cubic-bezier(.05,.89,.16,1.59) 1s forwards;
}

@keyframes getInTouchFadeIn {
	0% {
		transform: translate(0, 100%) rotateZ(0) scale(0);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translate(0, 0) rotateZ(360deg) scale(1);
		opacity: 1;
		visibility: visible;
	}
}

#getInTouchLink {
	display: block;
	width: 168px;
	height: 168px;
	position: relative;
}

#getInTouchLink .getInTouchTextContainer {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	transition: 0.5s transform cubic-bezier(.275,0,0,1);
}

#getInTouchLink:hover .getInTouchTextContainer {
	transform: translate(-50%, -50%) scale(1.25);
}

#getInTouchLink .getInTouchText {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: getInTouchRotate 16s linear infinite;
}

@keyframes getInTouchRotate {
	0% {
		transform: translate(-50%, -50%) rotateZ(0);
	}
	100% {
		transform: translate(-50%, -50%) rotateZ(360deg);
	}
}

#getInTouchLink .getInTouchText svg {
	width: 100%;
}

#getInTouchLink .getInTouchText svg path {
	fill: #efefef;
	transition: .5s ease;
}

#getInTouchLink .getInTouchPlaneContainer {
	display: block;
	width: 72px;
	height: 72px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#getInTouchLink .getInTouchPlaneContainer::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #efefef;
	transition: .5s ease;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.2);
	transition: 0.5s transform cubic-bezier(.275,0,0,1);
}

#getInTouchLink:hover .getInTouchPlaneContainer::before {
	transform: translate(-50%, -50%) scale(1);
}

#getInTouchLink .getInTouchPlaneBg {
	display: block;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	visibility: hidden;
	transition: 0.5s transform cubic-bezier(.275,0,0,1);
}

#getInTouchLink:hover .getInTouchPlaneBg {
	opacity: 1;
	visibility: visible;
}

#getInTouchLink #getInTouchPlane {
	display: block;
	width: 28px;
	height: 28px;
	position: absolute;
	top: calc(50% + 2px);
	left: calc(50% - 3px);
	transform: translate(-50%, -50%);
	overflow: hidden;
	transition: .3s ease;
}

#getInTouchLink #getInTouchPlane .getInTouchPlaneBefore,
#getInTouchLink #getInTouchPlane .getInTouchPlaneAfter {
	display: block;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: both;
    animation-duration: 0.6s;
}

#getInTouchLink #getInTouchPlane .getInTouchPlaneAfter {
	transform: translateX(-100%);
}

#getInTouchLink.isActive #getInTouchPlane .getInTouchPlaneBefore {
  animation-name: planeFromLeftToRight;
  animation-delay: 0.2s;
}

#getInTouchLink.isActive #getInTouchPlane .getInTouchPlaneAfter {
  animation-name: planeFromRightToLeft;
}

#getInTouchLink.isActive:hover #getInTouchPlane .getInTouchPlaneBefore {
	animation-name: planeFromRightToLeft;
	animation-delay: 0s;
}

#getInTouchLink.isActive:hover #getInTouchPlane .getInTouchPlaneAfter {
	animation-name: planeFromLeftToRight;
	animation-delay: 0.2s;
}

@keyframes planeFromLeftToRight {
	0% {
		transform: translate(-100%, 100%);
		opacity: 0;
	}
	100% {
		transform: translate(0);
		opacity: 1;
	}
}

@keyframes planeFromRightToLeft {
	0% {
		transform: translate(0);
		opacity: 1;
	}
	100% {
		transform: translate(100%, -100%);
		opacity: 0;
	}
}

#getInTouchLink #getInTouchPlane svg path {
	fill: #1a1a1a;
	transition: .5 ease;
}

@media (max-width: 1024px) {

	#getInTouch {
		right: 40px;
		bottom: 40px;
	}

	#getInTouchLink {
		width: 152px;
		height: 152px;
	}

	#getInTouchLink .getInTouchPlaneContainer {
		width: 64px;
		height: 64px;
	}

}

@media (max-width: 640px) {

	#getInTouch {
		right: 32px;
		bottom: 32px;
	}

	#getInTouchLink {
		width: 128px;
		height: 128px;
	}

}

/*-------------------------
 * 
 * 
 * Light mode
 * 
 * 
-------------------------*/

#getInTouch.isLightMode #getInTouchLink .getInTouchText svg path {
	fill: #1a1a1a;
	transition: .5s ease;
}

#getInTouch.isLightMode #getInTouchLink .getInTouchPlaneContainer::before {
	background: #1a1a1a;
}

#getInTouch.isLightMode #getInTouchLink #getInTouchPlane svg path {
	fill: #efefef;
}

/*-------------------------
 * 
 * 
 * 
 * Footer
 * 
 * 
 * 
-------------------------*/

#footer {
	width: 100%;
	height: calc(100dvh + 40px);
	position: relative;
	color: var(--white);
}

#footer.isLightMode {
	color: var(--black);
}

#footer > .inner {
	height: 100%;
	position: relative;
	padding: 224px 8% 120px 0;
	display: flex;
	justify-content: space-between;
	gap: 12%;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

#footer.isActive > .inner {
	opacity: 1;
	visibility: visible;
}

#footer .footerContactWrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 120px 0 0;
}

#footer .footerContactWrapper > .inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#footer .footerContactRollUp {
	overflow: hidden;
}

#footer .footerContactRollUp > .inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

#footer .footerContactBtn {
	position: relative;
	overflow: hidden;
}

#footer .footerContactRollUp .footerContactBtn a {
	display: flex;
    justify-content: center;
	align-items: flex-end;
	gap: 32px;
	font-size: 104px;
	color: var(--white);
    position: relative;
    overflow: hidden;
	transform: translate(0, 100%);
	transition: 1.5s ease;
}

#footer.isLightMode .footerContactRollUp .footerContactBtn a {
	color: var(--black);
}

#footer .footerContactRollUp.isActive .footerContactBtn a {
	transform: translate(0, 0);
}

#footer .footerContactBtn a::before {
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	background: var(--white);
	position: absolute;
	bottom: 0;
	left: 0;
}

#footer.isLightMode .footerContactBtn a::before {
	background: var(--black);
}

#footer .footerContactBtn a:hover::before {
	animation: footerContactBtnUnderline 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@keyframes footerContactBtnUnderline {
	0%, 20% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(105%);
	}
	51%, 70% {
		transform: translateX(-105%);
	}
	100% {
		transform: translateX(0);
	}
}

#footer .footerContactBtn a .footerContactBtnArrow {
	position: relative;
	bottom: 54px;
	width: 24px;
	height: 24px;
	overflow: hidden;
}

#footer .footerContactBtn a .footerContactBtnArrowBefore,
#footer .footerContactBtn a .footerContactBtnArrowAfter {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#footer .footerContactBtn a .footerContactBtnArrowAfter {
	transform: translateX(-100%);
}

#footer .footerContactBtn a:hover .footerContactBtnArrowBefore {
  animation-name: footerContactBtnArrowFromRightToLeft;
  animation-delay: 0s;
}

#footer .footerContactBtn a:hover .footerContactBtnArrowAfter {
  animation-name: footerContactBtnArrowFromLeftToRight;
  animation-delay: 0.2s;
}

@keyframes footerContactBtnArrowFromLeftToRight {
	0% {
		transform: translate(-100%, 100%);
	}
	100% {
		transform: translate(0);
	}
}

@keyframes footerContactBtnArrowFromRightToLeft {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(100%, -100%);
	}
}

#footer .footerContactBtn a .footerContactBtnArrow svg path {
	fill: var(--white);
	transition: .5s ease;
}

#footer.isLightMode .footerContactBtn a .footerContactBtnArrow svg path {
	fill: var(--black);
}

#footer .footerContactLead {
	overflow: hidden;
}

#footer .footerContactLead a:link,
#footer .footerContactLead a:visited {
	color: var(--white);
	text-decoration: underline;
}

#footer.isLightMode .footerContactLead a:link,
#footer.isLightMode .footerContactLead a:visited {
	color: var(--black);
}

@media (any-hover: hover) {

	#footer .footerContactLead a:hover,
	#footer .footerContactLead a:active {
		text-decoration: none;
		color: var(--lightGray01);
	}

	#footer.isActive .footerContactLead a:hover,
	#footer.isActive .footerContactLead a:active {
		color: var(--lightGray01);
	}

}

#footer .footerContactRollUp .footerContactLeadText {
	line-height: 2;
	transform: translate(0, 100%);
	transition: 1s ease;
}

#footer .footerContactRollUp.isActive .footerContactLeadText {
	transform: translate(0, 0);
}

#footer .footerNav {
	display: flex;
	gap: 40px;
	margin-bottom: 48px;
}

#footer .footerNavItems ul {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#footer .footerNavItem {
	overflow: hidden;
}

#footer .footerNavItem a {
	font-size: 24px;
	color: var(--white);
	transform: translate(0, 100%);
	transition: transform 1s ease;
}

#footer.isLightMode .footerNavItem a {
	color: var(--black);
}

#footer .footerNavItem.isActive a {
	transform: translate(0, 0);
}

#footer .footerNavItem a .footerNavItemText > span:nth-of-type(2) > span {
    left: 0;
    transform: translate(0, 0);
}

#footer .footerSocialItems ul {
	display: flex;
	align-items: center;
	gap: 24px;
}

#footer .footerSocialItem {
	overflow: hidden;
}

#footer .footerSocialItem a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 28px;
	transform: translate(0, 100%);
	transition: transform 1s ease;
}

#footer .footerSocialItem.isActive a {
	transform: translate(0, 0);
}

.footerSocialItem a .footerNavItemIcon > span:nth-of-type(1),
.footerSocialItem a .footerNavItemIcon > span:nth-of-type(2) {
	height: 28px;
}

#footer .copyright {
	width: 78px;
	height: 12px;
	font-size: 12px;
	line-height: 12px;
	white-space: nowrap;
	color: #555;
	position: absolute;
	top: 224px;
	right: -78px;
	transform: rotate(90deg);
	transform-origin: left top;
}

#footer .copyright > small {
	line-height: 1;
}

#footerLogo {
    position: absolute;
    top: 0;
    right: 8%;
    width: 50%;
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
    overflow: clip;
    z-index: -2;
	opacity: 0;
	visibility: hidden;
	/* transform: translate(0, 80px); */
	transition: 1s ease;
}

#footer #footerLogo.isActive {
	opacity: .8;
	visibility: visible;
	/* transform: translate(0, 0); */
}

#footer.isLightMode #footerLogo.isActive {
	opacity: .08;
}

#footerLogoParallaxArea {
    width: 495px;
    height: 495px;
    transition: .5s ease;
}

#footerLogoParallaxObject {
    width: 100%;
    height: 100%;
}

.footerLogoParallaxObjectImg {
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#footer #footerLogo svg path {
	fill: var(--black);
}

@media (max-width: 1024px) {

	#footer > .inner {
		padding: 120px 0 40px;
		flex-direction: column;
		justify-content: unset;
		gap: 56px;
	}

	#footer .footerContactWrapper {
		height: auto;
	}

	#footer .footerContactRollUp .footerContactBtn a {
		gap: 8px;
		font-size: 80px;
	}

	#footer .footerContactBtn a .footerContactBtnArrow {
		bottom: 40px;
		width: 20px;
		height: 20px;
	}

	#footer .footerContactBtn a .footerContactBtnArrowBefore,
	#footer .footerContactBtn a .footerContactBtnArrowAfter {
		width: 20px;
		height: 20px;
	}

	#footer .copyright {
		inset: auto;
		bottom: 40px;
		transform: rotate(0);
	}

}

@media (max-width: 640px) {

	#footer > .inner {
		padding: 120px 0 24px;
		gap: 48px;
	}

	#footer .footerContactWrapper {
		padding-top: 48px;
	}

	#footer .footerContactRollUp > .inner {
		gap: 32px;
	}

	#footer .footerContactRollUp .footerContactBtn a {
		font-size: 48px;
	}

	#footer .footerContactBtn a .footerContactBtnArrow {
		bottom: 25px;
		width: 14px;
		height: 14px;
	}

	#footer .footerContactBtn a .footerContactBtnArrowBefore,
	#footer .footerContactBtn a .footerContactBtnArrowAfter {
		width: 14px;
		height: 14px;
	}

	#footer .footerContactRollUp .footerContactLeadText {
		font-size: 14px;
	}

	#footer .footerContactRollUp .footerContactLeadText br {
		display: none;
	}

	#footer .footerNav {
		gap: 32px;
		margin-bottom: 40px;
	}

	#footer .footerNavItem a {
		font-size: 22px;
	}

	#footer .copyright {
		bottom: 24px;
	}

	#footerLogo {
		width: 72%;
	}

}