@charset "UTF-8";
/*-------------------------
 * 
 * 
 * 
 * Loading Logo
 * 
 * 
 * 
-------------------------*/

.loadingLogo.isPassive {
	opacity: 0 !important;
}

/*-------------------------
 * 
 * 
 * 
 * Key Visual
 * 
 * 
 * 
-------------------------*/

#kv {
    position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	opacity: 0;
	visibility: hidden;
	overflow: clip;
	z-index: -2;
}

#kv.isActive {
	animation: kvFadeIn ease 2s forwards;
}

@keyframes kvFadeIn {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: .56;
		visibility: visible;
	}
}

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

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

.kvParallaxObjectContainer {
	width: 104%;
	height: 104%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.kvParallaxObjectImg {
	display: block;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(../images/front/bamboo.webp) no-repeat right center / auto 180%;
}

@media (max-width: 1024px) {

	.kvParallaxObjectImg {
		background-size: auto 100%;
	}

}

@media (max-width: 640px) {

	.kvParallaxObjectImg {
		background-size: auto 100%;
	}

}

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

#kv.isLightMode #kvParallaxArea {
	opacity: .16;
}

/*-------------------------
 * 
 * 
 * Dark mode
 * 
 * 
-------------------------*/

#kv.isDarkMode #kvParallaxArea {
	opacity: 0;
}

/*-------------------------
 * 
 * 
 * 
 * Wrapper
 * 
 * 
 * 
-------------------------*/

/* #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;
	}
} */

/*-------------------------
 * 
 * 
 * 
 * Hero
 * 
 * 
 * 
-------------------------*/

#hero {
	width: 100%;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 1;
	transition: .5s ease;
}

#hero > .inner {
	height: 100%;
	position: relative;
}

#hero .catchContainer {
	position: absolute;
	top: calc(50% + 32px + 32px); /* 上下中央配置 + キャッチコピーの高さ/2 + マージン */
}

#hero .catchSub {
	gap: 16px;
	opacity: 0;
	will-change: transform;
}

#hero .catchSub * {
	will-change: transform;
}

#hero .catchSub .catchSubContainerMain {
	/* font-size: 32px; */
	font-size: 36px;
	line-height: 1.25;
	gap: 4px;
}

#hero .catchSub .catchSubContainerSub {
	font-size: 16px;
	line-height: 1.5;
}

#hero.isPassive {
	opacity: 0;
}

@media (max-width: 1024px) {

	#hero .catchContainer {
		position: absolute;
		top: calc(50% + 25px + 28px); /* 上下中央配置 + キャッチコピーの高さ/2 + マージン */
	}

	#hero .catchSub {
		gap: 12px;
	}

	#hero .catchSub .catchSubContainerMain {
		font-size: 28px;
		gap: 3px;
	}

	#hero .catchSub .catchSubContainerSub {
		font-size: 15px;
	}

}

@media (max-width: 640px) {

	#hero .catchContainer {
		position: absolute;
		top: calc(50% + 20px + 24px); /* 上下中央配置 + キャッチコピーの高さ/2 + マージン */
	}

	#hero .catchSub {
		gap: 8px;
	}

	#hero .catchSub .catchSubContainerMain {
		/* font-size: 24px; */
		font-size: 21px;
		gap: 2px;
	}

	#hero .catchSub .catchSubContainerSub {
		/* font-size: 14px; */
		font-size: 12px;
	}

}

/*-------------------------
 * 
 * 
 * 
 * Front Contents
 * 
 * 
 * 
-------------------------*/

#frontContentsWrapper {
	position: relative;
	z-index: 1;
}

#frontContentsWrapper > .inner {
	width: 100%;
	margin-top: 100dvh;
}


#frontContentsWrapper .frontContentsSection > .inner {
	/* width: 80%;
	margin: 0 4% 0 16%; */
	width: 74%;
	margin: 0 10% 0 16%;
}

/* @media (max-width: 640px) {

	#frontContentsWrapper .frontContentsSection > .inner {
		width: 92%;
		margin: 0 4%;
	}

} */

/*-------------------------
 * 
 * 
 * 
 * Front Contents Headings
 * 
 * 
 * 
-------------------------*/

#frontContentsHeadingsWrapper {
	position: fixed;
	top: 0;
	left: 4%;
	width: 32px;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

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

#frontContentsHeadingsWrapper .frontContentsHeadings {
	width: 94px;
	height: 32px;
    transform: rotate(90deg);
    transform-origin: left top;
    position: relative;
	top: -40px;
    right: -32px;
}

#frontContentsHeadingsWrapper .frontContentsHeadings::before {
	flex-shrink: 0;
	display: block;
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #DC0032;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}

#frontContentsHeadingsWrapper .frontContentsHeading {
	display: block;
	height: 32px;
	line-height: 32px;
	position: absolute;
	top: 0;
	left: 18px;
	opacity: 0;
	visibility: hidden;
	transition: 1s cubic-bezier(.51,.07,.26,1);
}

#frontContentsHeadingsWrapper .frontContentsHeading.isActive {
	opacity: 1;
	visibility: visible;
}

#frontContentsHeadingsWrapper .frontContentsHeading.isLightMode {
	color: #1A1A1A;
}

#frontContentsHeadingsWrapper .frontContentsHeading.isDarkMode {
	color: #efefef;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

	#frontContentsHeadingsWrapper .frontContentsHeadings {
		font-size: 12px;
		width: 45px;
		top: -23px;
	}

}

/*-------------------------
 * 
 * 
 * 
 * About
 * 
 * 
 * 
-------------------------*/

#about {
	color: var(--white);
	position: relative;
	overflow: clip;
	transition: .5s ease;
}

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

#about > .inner {
	display: flex;
	align-items: flex-start;
	gap: 5%;
	/* padding: 200px 0 320px; */
	padding: 200px 0 640px;
}

#about .aboutHeader {
	width: 40%;
	position: sticky;
	top: 200px;
}

#about .aboutCatch {
	font-size: 36px;
	line-height: 1.5;
	gap: 4px;
}

#about .aboutContent {
	width: 55%;
}

#about .aboutContentDesc {
	gap: 32px;
}

#about .aboutContentDescParagraphLine {
	position: relative;
	line-height: 2;
	width: max-content;
}

#about .aboutContentDescParagraphLinePassive {
	color: var(--black);
	transition: .5s ease;
}

#about.isLightMode .aboutContentDescParagraphLinePassive {
	color: var(--white);
}

#about .aboutContentDescParagraphLineActive {
	position: absolute;
	inset: 0;
	z-index: 1;
	color: var(--white);
	transition: .5s ease;
}

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

#about .aboutContentDescParagraphLineActiveText {
	display: block;
	white-space: nowrap;
	width: 0%;
	overflow: hidden;
	will-change: width;
}

#about .aboutBtn {
	margin-top: 80px;
}


#about .aboutBtn a {
	color: var(--white);
	transition: .5s ease;
}

#about.isLightMode .aboutBtn a {
	color: var(--black);
}

#about .aboutBtn a::before {
	background: var(--white);
	transition: .5s ease;
}

#about.isLightMode .aboutBtn a::before {
	background: var(--black);
}

#about .aboutBtn a .btnArrow svg path {
	fill: var(--white);
	transition: .5s ease;
}

#about.isLightMode .aboutBtn a .btnArrow svg path {
	fill: var(--black);
}

@media (max-width: 1024px) {

	#about > .inner {
		flex-direction: column;
		gap: 56px;
		padding: 64px 0 160px;
	}

	#about .aboutHeader {
		width: 100%;
		position: relative;
		top: auto;
	}

	#about .aboutCatch {
		font-size: 28px;
		gap: 3px;
	}

	#about .aboutContent {
		width: 100%;
	}

	#about .aboutBtn {
		margin-top: 64px;
	}

}

@media (max-width: 640px) {

	#about > .inner {
		gap: 40px;
		/* padding: 40px 0 120px; */
		padding: 40px 0 80px;
	}

	#about .aboutCatch {
		font-size: 24px;
		gap: 2px;
	}

	#about .aboutContentDesc {
		gap: 24px;
	}

	#about .aboutBtn {
		/* margin-top: 48px; */
		margin-top: 40px;
	}

}

/*-------------------------
 * 
 * 
 * 
 * Project
 * 
 * 
 * 
-------------------------*/

#frontContentsWrapper #project {
	position: relative;
}

#projectItemsWrapper {
	position: relative;
}

#projectItemsWrapper > .inner {
	width: 100%;
	height: 100dvh;
	margin: 0;
}

#projectItemsWrapper .projectItems {
	/* width: 75%; */
	width: 67%;
	height: 100%;
	display: flex;
	/* margin-left: 25%; */
	margin-left: 33%;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

#projectItemsWrapper.isActive .projectItems {
	opacity: 1;
	visibility: visible;
} 

#projectItemsWrapper .projectItem {
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	padding-left: 10%;
	box-sizing: content-box;
	/* color: var(--black);
	transition: 1s ease; */
}

/* #projectItemsWrapper.isActive .projectItem {
	color: var(--white);
} */

#projectItemsWrapper .projectItem > .inner {
	width: 80%;
	height: 100%;
	margin: 0 4% 0 16%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}

#projectItemsWrapper .projectItemContent {
	position: relative;
}

#projectItemsWrapper .projectItemContentInner {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 48px;
	position: absolute;
	top: -64px;
	left: -140px;
	z-index: 2;
	color: var(--black);
	transition: .5s ease;
}

#projectItemsWrapper.isActive .projectItemContentInner {
	color: var(--white);
}

#projectItemsWrapper .projectItemHeading {
	font-size: 104px;
	line-height: 1;
}

#projectItemsWrapper .projectItemDesc {
	margin: 0 0 0 32px;
	opacity: 0;
	visibility: hidden;
}

#projectItemsWrapper .projectItemDesc.isActive {
	animation: projectItemDesc 1s cubic-bezier(.48,.19,.57,.9) .5s forwards;
}

@keyframes projectItemDesc {
	0% {
		transform: translateY(24px);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
}

#projectItemsWrapper .projectItemText {
	font-size: 14px;
	line-height: 2;
}

#projectItemsWrapper .projectItemBtn {
	margin-top: 40px;
}

#projectItemsWrapper .projectItemBtn a {
	color: var(--black);
	transition: .5s ease;
}

#projectItemsWrapper.isActive .projectItemBtn a {
	color: var(--white);
}

#projectItemsWrapper .projectItemBtn a::before {
	background: var(--black);
	transition: .5s ease;
}

#projectItemsWrapper.isActive .projectItemBtn a::before {
	background: var(--white);
}

#projectItemsWrapper .projectItemBtn a .btnArrow svg path {
	fill: var(--black);
	transition: .5s ease;
}

#projectItemsWrapper.isActive .projectItemBtn a .btnArrow svg path {
	fill: var(--white);
}

#projectItemsWrapper .projectItem .projectItemImgWrapper {
	position: relative;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
}

#projectItemsWrapper .projectItem .projectItemImgWrapper::before {
	display: block;
	content: '';
	width: calc(100% + 2px);
	height: 100%;
	background: #ccc;
	pointer-events: none;
	position: absolute;
	inset: 0 -1px;
	z-index: 1;
	transition: .5s ease;
}

#projectItemsWrapper.isActive .projectItem .projectItemImgWrapper::before {
	background: #1f1f1f;
}

#projectItemsWrapper .projectItem.isActive .projectItemImgWrapper::before {
  animation: projectItemImgWrapper .7s cubic-bezier(1,-0.08,.27,.97) forwards;
  
}

@keyframes projectItemImgWrapper {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100%);
	}
}

#projectItemsWrapper .projectItem .projectItemImg {
	position: relative;
	z-index: 0;
	overflow: hidden;
	opacity: 0;
	filter: blur(8px);
	transform: scale(1.2);
	transition: 1s ease;
}

#projectItemsWrapper .projectItem.isActive  .projectItemImg {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}

#projectItemsWrapper .projectItemImg::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(136deg,rgba(26,26,26,.64) 8%,rgba(26,26,26,0) 72%,rgba(26,26,26,0));
	z-index: 1;
	pointer-events: none;
}

#allProjects {
	width: 100%;
	height: 125dvh;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

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

#allProjects > .inner {
	width: 100%;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#allProjects .allProjectsBtn {
	position: relative;
	overflow: hidden;
}

#allProjects .allProjectsBtn a {
	display: flex;
    justify-content: center;
	align-items: flex-end;
	gap: 32px;
	font-size: 104px;
    position: relative;
    overflow: hidden;
	transform: translate(0, 100%);
	transition: 1s transform cubic-bezier(.46,.26,.43,1.19);
}

#allProjects.isActive .allProjectsBtn a {
	transform: translate(0, 0);
}

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

#allProjects .allProjectsBtn a:hover::before {
	animation: allProjectsBtnUnderline 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

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

#allProjects .allProjectsBtn a .allProjectsBtnArrow {
	position: relative;
	bottom: 54px;
	width: 24px;
	height: 24px;
	overflow: hidden;
}

#allProjects .allProjectsBtn a .allProjectsBtnArrowBefore,
#allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
	transform: translateX(-100%);
}

#allProjects .allProjectsBtn a:hover .allProjectsBtnArrowBefore {
  animation-name: allProjectsBtnArrowFromRightToLeft;
  animation-delay: 0s;
}

#allProjects .allProjectsBtn a:hover .allProjectsBtnArrowAfter {
  animation-name: allProjectsBtnArrowFromLeftToRight;
  animation-delay: 0.2s;
}

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

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

#allProjects .allProjectsBtn a .allProjectsBtnArrow svg path {
	fill: #efefef;
	transition: .5 ease;
}

@media (max-width: 1024px) {

	#projectItemsWrapper > .inner {
		height: auto;
		/* padding: 25dvh 0 0; */
		padding: 0;
	}

	#projectItemsWrapper .projectItems {
		width: 84%;
		height: auto;
		flex-direction: column;
		gap: 104px;
		margin-left: 16%;
	}

	#projectItemsWrapper .projectItem {
		padding-left: 0;
		box-sizing: border-box;
	}

	#projectItemsWrapper .projectItem > .inner {
		/* width: 92%; */
		width: 100%;
		height: auto;
		/* margin: 0 0 0 8%; */
		margin: 0;
		display: block;
	}

	#projectItemsWrapper .projectItemContent > .inner {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 32px;
		position: absolute;
		top: -40px;
		/* left: -32px; */
		left: 0;
		z-index: 2;
	}

	#projectItemsWrapper .projectItemHeading {
		font-size: 64px;
	}

	#projectItemsWrapper .projectItemDesc {
		margin: 0;
	}

	#projectItemsWrapper .projectItemDesc.isActive {
		animation: projectItemDesc 1s cubic-bezier(.48,.19,.57,.9) 0s forwards;
	}

	#projectItemsWrapper .projectItemBtn {
		margin-top: 16px;
	}

	#projectItemsWrapper .projectItem .projectItemImg {
		width: 96%;
		margin: 0 0 0 auto;
	}

	#projectItemsWrapper .projectItemImg::before {
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(136deg,rgba(26,26,26,.64) 8%,rgba(26,26,26,0) 72%,rgba(26,26,26,0));
		z-index: 1;
		pointer-events: none;
	}

	#allProjects {
		height: auto;
	}

	#allProjects > .inner {
		width: calc(100% - calc(8% + 32px));
		height: auto;
		margin: 0 0 0 auto;
		position: relative;
		top: auto;
		left: auto;
		/* padding: 200px 0; */
		padding: 120px 0;
	}

	#allProjects .allProjectsBtn a {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 16px;
		font-size: 56px;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		transform: translate(0, 100%);
		transition: 1s transform cubic-bezier(.46,.26,.43,1.19);
	}

	#allProjects .allProjectsBtn a .allProjectsBtnArrow {
		bottom: 29px;
		width: 20px;
		height: 20px;
	}

	#allProjects .allProjectsBtn a .allProjectsBtnArrowBefore,
	#allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
		width: 20px;
		height: 20px;
	}

}

@media (max-width: 640px) {

	#projectItemsWrapper .projectItemContent {
		display: flex;
		flex-direction: column-reverse;
	}

	#projectItemsWrapper .projectItemContent > .inner {
		gap: 24px;
		position: relative;
		top: unset;
		left: unset;
		/* margin: -96px 0 0 -4%; */
		margin: -96px 0 0 0;
		padding: 0 4% 0 0;
	}

	#projectItemsWrapper .projectItems {
		/* gap: 64px; */
		gap: 56px;
	}

	#projectItemsWrapper .projectItemHeading {
		font-size: 36px;
	}

	#projectItemsWrapper .projectItemText {
		font-size: 12px;
	}

	#projectItemsWrapper .projectItemText br {
		display: none;
	}

	#projectItemsWrapper .projectItemBtn {
		margin-top: 4px;
	}

	#projectItemsWrapper .projectItemImg::before {
		background: linear-gradient(45deg,rgba(26,26,26,.64) 8%,rgba(26,26,26,0) 72%,rgba(26,26,26,0));
	}

	#allProjects > .inner {
		/* padding: 120px 0 40px; */
		padding: 96px 0 40px;
		width: 80%;
		margin: 0 4% 0 16%;
		align-items: flex-start;
	}

	#allProjects .allProjectsBtn a {
		gap: 8px;
		font-size: 30px;
	}

	#allProjects .allProjectsBtn a .allProjectsBtnArrow {
		bottom: 17px;
		width: 12px;
		height: 12px;
	}

	#allProjects .allProjectsBtn a .allProjectsBtnArrowBefore, #allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
		width: 12px;
		height: 12px;
	}

}

/*-------------------------
 * 
 * 
 * 
 * Service
 * 
 * 
 * 
-------------------------*/

#service {
	position: relative;
	overflow: clip;
	z-index: 1;
}

#frontContentsWrapper #service > .inner {
	padding: 100dvh 0 160px;
	color: var(--white);
	transition: 1s ease;
}

#frontContentsWrapper #service > .inner.isLightMode {
	color: var(--black);
}

#service > .inner a {
	color: var(--white);
	transition: 1s ease;
}

#service > .inner.isLightMode a {
	color: var(--black);
}

#service .serviceHeader {
	position: relative;
}

#service .serviceHeader > .inner {
	width: 95%;
	margin: 0 5% 0 0;
	/* width: 96%;
	margin: 0 4% 0 0; */
	padding: 0 0 120px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 5%;
}

#service .serviceMovieWrapper {
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
	width: 36%;
	position: absolute;
	top: 0;
	right: 5%;
}

#service #serviceMovie {
	width: 100%;
	overflow: hidden;
	position: relative;
	transform: scale(1);
	transform-origin: center top;
	flex-shrink: 0;
	border-radius: 2px;
}

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

#service .serviceMovieFrameInner {
	display: block;
	position: relative;
	inset: 0;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	background: none;
}

#service .serviceMovieVideo {
	display: block;
	width: auto;
	height: auto;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#service .serviceHeaderContents {
	position: relative;
	z-index: 1;
	flex-grow: 1;
}

#service .serviceHeaderContents > .inner {
	width: 100%;
	gap: 48px;
	padding: 200px 0 0;
}

#service .serviceCatch {
	font-size: 36px;
	line-height: 1.5;
	gap: 4px;
}

#service .serviceCatch .br_sp {
	display: none;
}

#service .serviceHeaderDesc {
	opacity: 0;
	visibility: hidden;
}

#service .serviceHeaderDesc.isActive {
	animation: serviceHeaderDesc 1s cubic-bezier(.48,.19,.57,.9) .5s forwards;
}

@keyframes serviceHeaderDesc {
	0% {
		transform: translateY(40px);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
}

#service .serviceHeaderDescText {
	max-width: 800px;
	line-height: 2;
}

#service > .inner .serviceBtn {
	margin-top: 32px;
}

#service > .inner .serviceBtn a {
	color: var(--white);
	transition: .5s ease;
}

#service > .inner.isLightMode .serviceBtn a {
	color: var(--black);
}

#service > .inner .serviceBtn a::before {
	background: var(--white);
	transition: .5s ease;
}

#service > .inner.isLightMode .serviceBtn a::before {
	background: var(--black);
}

#service > .inner .serviceBtn a .btnArrow svg path {
	fill: var(--white);
	transition: .5s ease;
}

#service > .inner.isLightMode .serviceBtn a .btnArrow svg path {
	fill: var(--black);
}

#service #serviceBody {
	/* width: 96%;
	margin: 0 4% 0 0; */
	position: relative;
	z-index: 1;
}

#service .serviceItem {
	overflow: hidden;
	position: relative;
}

#service > .inner .serviceItem:first-of-type::before,
#service > .inner .serviceItem::after {
	display: block;
	content: '';
	width: 100%;
	height: 1px;
	background: var(--white);
	position: absolute;
	left: 0;
	z-index: 1;
	transition: 1s ease;
}

#service > .inner.isLightMode .serviceItem:first-of-type::before,
#service > .inner.isLightMode .serviceItem::after {
	background: var(--black);
}

#service .serviceItem:first-of-type::before {
	top: 0;
}

#service .serviceItem::after {
	bottom: 0;
}

#service .serviceItem .serviceItemHeading {
	height: 80px;
	position: relative;
	cursor: pointer;
	transition: .5s ease;
}

#service .serviceItem.isActive .serviceItemHeading {
	height: auto;
}

#service .serviceItem .serviceItemHeading > .inner {
	width: 100%;
}

#service > .inner .serviceItem .serviceItemHeadingTextEn {
	font-size: 72px;
	line-height: 1;
	position: relative;
	padding: 24px 0 0;
	overflow-x: clip;
	transition: .75s cubic-bezier(.12,.94,.52,1);
	/* transition: 1s cubic-bezier(.12,.94,.52,1); */
	/* transition: 1s ease; */
	/* background: linear-gradient(90deg,rgba(239,239,239,1) 0,rgba(239,239,239,0));
	background-clip: text;
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent; */
}

#service > .inner.isLightMode .serviceItem .serviceItemHeadingTextEn {
	/* background: linear-gradient(90deg,rgba(26,26,26,1) 0,rgba(26,26,26,0));
	background-clip: text;
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent; */
}

#service > .inner .serviceItem.isActive .serviceItemHeadingTextEn {
	font-size: 14px;
	/* color: var(--white); */
	padding: 48px 0 20px;
	/* background: none;
	background-clip: unset;
	-webkit-background-clip: unset;
	-webkit-text-fill-color: unset; */
}

#service > .inner.isLightMode .serviceItem.isActive .serviceItemHeadingTextEn {
	/* color: var(--black);
	padding: 48px 0 20px; */
	/* background: none;
	background-clip: unset;
	-webkit-background-clip: unset;
	-webkit-text-fill-color: unset; */
}

#service .serviceItem .serviceItemHeadingTextJa {
	font-size: 40px;
	line-height: 1;
	white-space: nowrap;
}

/* #service .serviceItem .serviceItemHeadingTextJa .dot {
	margin: 0 -.25em;
} */

#service .serviceItem .serviceItemHeading .serviceItemHeadingPlus {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
    width: 28px;
    height: 28px;
    position: relative;
	background: var(--white);
	border-radius: 4px;
	transition: .5s ease;
}

#service > .inner.isLightMode .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
	background: var(--darkGray01);
}

#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span {
	display: block;
	width: 11px;
	height: 1.5px;
	background: var(--black);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .5s ease;
}

#service > .inner.isLightMode .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span {
	background: var(--white);
	transition: .5s ease;
}

#service .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span:nth-of-type(2) {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: .5s ease;
}

#service .serviceItem.isActive .serviceItemHeading .serviceItemHeadingPlusBtn > span:nth-of-type(2) {
	transform: translate(-50%, -50%) rotate(0);
}

#service .serviceItemContent {
	display: none;
	padding: 40px 0 56px;
}

#service .serviceItemContentInner {
	width: 100%;
	opacity: 0;
	visibility: hidden;
}

#service .serviceItemContentInner.isActive {
	animation: serviceItemContentInner .7s cubic-bezier(.48,.19,.57,.9) .5s forwards;
}

@keyframes serviceItemContentInner {
	0% {
		transform: translateY(24px);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
}

#service .serviceItemContentLead {
	/* max-width: 75%; */
	/* max-width: 800px; */
	max-width: 90%;
}

#service .serviceItemContentList {
	margin-top: 32px;
}

#service .serviceItemContentList ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

#service .serviceItemContentListItem {
	position: relative;
	padding: 0 0 0 18px;
	line-height: 1.5;
}

#service > .inner .serviceItemContentListItem::before {
	display: block;
	content: '';
	width: 8px;
	height: 1px;
	background: var(--white);
	position: absolute;
	top: 11px;
	left: 0;
	transition: 1s ease;
}

#service > .inner.isLightMode .serviceItemContentListItem::before {
	background: var(--black);
}

#service .serviceItemContentListItem a .serviceItemContentListItemArrow {
	position: absolute;
	bottom: 0;
	right: -19px;
	transform: translate(0, -50%);
	width: 11px;
	height: 11px;
	overflow: hidden;
}

#service .serviceItemContentListItem a .serviceItemContentListItemArrowBefore,
#service .serviceItemContentListItem a .serviceItemContentListItemArrowAfter {
	display: block;
	width: 11px;
	height: 11px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#service .serviceItemContentListItem a .serviceItemContentListItemArrowAfter {
	transform: translateX(-100%);
}

#service .serviceItemContentListItem a:hover .serviceItemContentListItemArrowBefore {
  animation-name: serviceItemContentListItemArrowFromRightToLeft;
  animation-delay: 0s;
}

#service .serviceItemContentListItem a:hover .serviceItemContentListItemArrowAfter {
  animation-name: serviceItemContentListItemArrowFromLeftToRight;
  animation-delay: 0.2s;
}
@keyframes serviceItemContentListItemArrowFromLeftToRight {
	0% {
		transform: translate(-100%, 100%);
	}
	100% {
		transform: translate(0);
	}
}

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

#service > .inner .serviceItemContentListItem a .serviceItemContentListItemArrow svg path {
	fill: var(--white);
	transition: 1s ease;
}

#service > .inner.isLightMode .serviceItemContentListItem a .serviceItemContentListItemArrow svg path {
	fill: var(--black);
}

@media (max-width: 1024px) {

	#frontContentsWrapper #service > .inner {
		width: 80%;
		margin: 0 4% 0 16%;
		padding: 0 0 120px;
	}

	#service .serviceHeader > .inner {
		width: 100%;
		margin: 0;
		padding-bottom: 80px;
		gap: 5%;
	}

	#service .serviceHeaderContents > .inner {
		gap: 32px;
		padding-top: 120px;
	}

	#service .serviceCatch {
		font-size: 28px;
		gap: 3px;
	}

	#service .serviceBtn {
		margin-top: 24px;
	}

	#service .serviceItem .serviceItemHeading {
		height: 56px;
	}

	#service > .inner .serviceItem .serviceItemHeadingTextEn {
		font-size: 44px;
		white-space: nowrap;
		padding: 20px 0 0;
		/* transition: .5s cubic-bezier(.12,.94,.52,1); */
		transition: 1s ease;
	}

	#service > .inner .serviceItem.isActive .serviceItemHeadingTextEn {
		font-size: 12px;
		padding: 44px 0 16px;
	}

	#service .serviceItem .serviceItemHeadingTextJa {
		font-size: 32px;
	}

	#service .serviceItem .serviceItemHeading .serviceItemHeadingPlus {
		width: 56px;
		height: 56px;
	}

	#service .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
		width: 24px;
		height: 24px;
	}

	#service .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span {
		width: 9px;
	}

	#service .serviceItemContent {
		padding: 32px 0 48px;
	}

}

@media (max-width: 640px) {

	#frontContentsWrapper #service > .inner {
		padding-bottom: 72px;
	}

	#service .serviceHeader > .inner {
		padding-bottom: 64px;
	}

	#service .serviceHeaderContents > .inner {
		gap: 16px;
		padding-top: 80px;
	}

	#service > .inner .serviceCatch {
		font-size: 24px;
		gap: 2px;
	}

	#service > .inner .serviceCatch .br_sp {
		display: inline;
	}

	#service > .inner .serviceBtn {
		margin-top: 8px;
	}

	#service > .inner .serviceItem .serviceItemHeading {
		/* height: 48px; */
		height: 40px;
	}

	#service > .inner .serviceItem .serviceItemHeadingTextEn {
		/* font-size: 36px; */
		font-size: 28px;
		padding: 16px 0 0;
	}

	#service > .inner .serviceItem.isActive .serviceItemHeadingTextEn {
		padding-bottom: 14px;
	}

	#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlus {
		/* width: 48px;
		height: 48px; */
		width: 36px;
		height: 44px;
	}

	#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
		width: 20px;
		height: 20px;
	}

	#service .serviceItemContentLead {
		max-width: initial;
	}

	#service .serviceItem .serviceItemHeadingTextJa {
		font-size: 21px;
	}

	#service .serviceItemContent {
		padding: 24px 0 40px;
	}

	#service .serviceItemContentList {
		margin-top: 24px;
	}

}

/*-------------------------
 * 
 * 
 * 
 * Journal
 * 
 * 
 * 
-------------------------*/

#journal > .inner {
	width: 74%;
	margin: 0 10% 0 16%;
	display: flex;
	gap: 5%;
	/* padding: 25dvh 0 120px; */
	padding: 25dvh 0 0;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

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

#journal .journalHeader {
	width: 15%;
}

#journal .journalHeader > .inner {
	width: 100%;
	position: relative;
}

#journal .journalHeading {
	width: 265px;
	height: 76px;
	white-space: nowrap;
	color: var(--lightGray01);
	display: flex;
	flex-direction: column-reverse;
	gap: 16px;
	position: absolute;
	top: -76px;
	/* left: 50%;
	margin-left: -38px; */
	transform: rotate(90deg);
	transform-origin: left bottom;
}

#journal .journalHeadingTitle {
	font-size: 24px;
	line-height: 1;
}

#journal .journalHeadingLead {
	font-size: 12px;
	line-height: 1.5;
}

#journal .journalBody {
	width: 80%;
}

#journal .journalPostsWrapper {
	display: flex;
	gap: 4%;
}

#journal .journalPosts {
	width: 54%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#journal .journalPost {
	min-height: calc(calc(100% - 40px) / 3);
}

#journal .journalLatestPost {
	width: 42%;
	min-height: initial;
}

#journal > .inner .journalPost a {
	width: 100%;
	height: 100%;
	/* border-radius: 8px; */
	overflow: hidden;
	/* background: var(--black); */
	color: var(--white);
	text-decoration: none;
	display: flex;
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalPost a {
	/* background: var(--white); */
	color: var(--black);
}

#journal .journalLatestPost a {
	flex-direction: column;
}

#journal .journalPost .journalPostThumb {
	width: 40%;
	flex-shrink: 0;
	/* border-radius: 8px; */
	border-radius: 4px;
}

#journal .journalLatestPost .journalPostThumb {
	width: 100%;
}

#journal .journalPost .journalPostThumbImg {
	height: 100%;
	padding-top: 0;
}

#journal .journalLatestPost .journalPostThumbImg {
	height: 0;
	padding-top: 66.66%;
}

#journal .journalPost .journalPostDesc > .inner {
	width: 100%;
	height: 100%;
	position: relative;
	padding: 20px 0 24px 20px;
	/* padding: 20px 40px 24px 20px; */
	/* padding: 20px 72px 24px 20px; */
	/* padding: 20px 72px 24px 0; */
	display: flex;
	flex-direction: column;
	/* gap: 12px; */
	gap: 16px;
}

#journal .journalLatestPost .journalPostDesc > .inner {
	/* padding: 24px 96px 40px 24px; */
	/* padding: 24px 96px 40px 0; */
	/* padding: 24px 64px 40px 0; */
	/* padding: 28px 48px 40px 0; */
	padding: 24px 48px 24px 0;
	/* gap: 16px; */
	gap: 20px;
}

#journal .journalPost .journalPostTitle {
	/* font-size: 14px; */
	font-size: 16px;
	line-height: 1.75;
}

#journal .journalLatestPost .journalPostTitle {
	/* font-size: 18px; */
	font-size: 21px;
}

#journal > .inner .journalPost .journalPostMeta {
	/* font-size: 12px; */
	/* line-height: 1; */
	/* color: #999; */
	color: var(--white);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* flex-direction: row-reverse; */
	gap: 12px;
	opacity: .5;
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalPost .journalPostMeta {
	color: var(--black);
}

#journal .journalPost .journalPostDate {
	font-size: 14px;
	flex-shrink: 0;
}

#journal .journalPost .journalPostCats {
	/* flex-grow: 1; */
	/* overflow: hidden; */
	display: flex;
	/* flex-wrap: wrap; */
	align-items: center;
	gap: 8px;
	/* height: 12px; */
}

#journal > .inner .journalPost .journalPostCat {
	/* display: flex;
	align-items: center;
	gap: .1em; */

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	line-height: 24px;
	padding: 1px 12px 0;
	border: 1px solid var(--white);
	border-radius: 4px;
	/* opacity: .4; */
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalPost .journalPostCat {
	border: 1px solid var(--black);
}




/* #projectItems .projectItemCategoryItem a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 24px;
    padding: 0 12px;
    border: 1px solid var(--white);
    border-radius: 4px;
    opacity: .4;
} */







#journal .journalPost .journalPostCat::before {
	/* display: block;
	content: '#'; */
	display: none;
}

#journal > .inner .journalPost a .journalPostArrow {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 28px;
	height: 28px;
	background: var(--black);
	border: 1px solid #3c3c3c;
	border-radius: 4px;
	overflow: hidden;
	display: none;
	/* display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; */
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalPost a .journalPostArrow {
	background: var(--white);
	border-color: #dedede;
}

#journal > .inner .journalPost a:hover .journalPostArrow {
	background: #3c3c3c;
	border-color: #3c3c3c;
}

#journal > .inner.isLightMode .journalPost a:hover .journalPostArrow {
	background: #dedede;
	border-color: #dedede;
}

#journal .journalPost a .journalPostArrowInner {
	width: 11px;
	height: 11px;
	position: relative;
	overflow: hidden;
}

#journal .journalPost a .journalPostArrowBefore,
#journal .journalPost a .journalPostArrowAfter {
	display: block;
	width: 11px;
	height: 11px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#journal .journalPost a .journalPostArrowAfter {
	transform: translateX(-100%);
}

#journal .journalPost a:hover .journalPostArrowBefore {
  animation-name: journalPostArrowFromRightToLeft;
  animation-delay: 0s;
}

#journal .journalPost a:hover .journalPostArrowAfter {
  animation-name: journalPostArrowFromLeftToRight;
  animation-delay: 0.2s;
}

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

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

#journal > .inner .journalPost a .journalPostArrow svg path {
	fill: var(--white);
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalPost a .journalPostArrow svg path {
	fill: var(--black);
}

#journal > .inner .journalPost a:hover .journalPostArrow svg path {
	fill: var(--white);
}

#journal > .inner.isLightMode .journalPost a:hover .journalPostArrow svg path {
	fill: var(--black);
}

#journal .journalBtn {
	/* margin: 48px 0 0 24px; */
	margin: 48px 0 0;
}

#journal > .inner .journalBtn a {
	color: var(--white);
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalBtn a {
	color: var(--black);
}



#journal > .inner .journalBtn a::before {
	background: var(--white);
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalBtn a::before {
	background: var(--black);
}

#journal > .inner .journalBtn a .btnArrow svg path {
	fill: var(--white);
	transition: .5s ease;
}

#journal > .inner.isLightMode .journalBtn a .btnArrow svg path {
	fill: var(--black);
}

@media (max-width: 1024px) {

	#journal > .inner {
		width: 80%;
		margin: 0 4% 0 16%;
		/* padding-top: 40px; */
		padding-top: 0;
		flex-direction: column;
		gap: 32px;
		padding-bottom: 80px;
	}

	#journal .journalHeader {
		width: 100%;
	}

	#journal .journalHeading {
		width: auto;
		height: auto;
		white-space: normal;
		flex-direction: column;
		gap: 12px;
		position: relative;
		top: unset;
		left: unset;
		margin-left: 0;
		transform: rotate(0);
		transform-origin: unset;
	}

	#journal .journalHeadingTitle {
		font-size: 56px;
	}

	#journal .journalHeadingLead {
		font-size: 16px;
	}

	#journal .journalBody {
		width: 100%;
	}

	#journal .journalPostsWrapper {
		flex-direction: column;
		gap: 20px;
	}

	#journal .journalPosts {
		width: 100%;
		gap: 20px;
	}

	#journal .journalPost {
		min-height: initial;
		height: 150px;
	}

	#journal .journalLatestPost {
		width: 100%;
	}

	/* #journal .journalPost a {
		border-radius: 12px;
	} */

	#journal .journalLatestPost a {
		flex-direction: row;
	}

	#journal .journalLatestPost .journalPostThumb {
		width: 40%;
	}

	#journal .journalLatestPost .journalPostThumbImg {
		height: 100%;
		padding-top: 0;
	}

	#journal .journalPost .journalPostDesc > .inner,
	#journal .journalLatestPost .journalPostDesc > .inner {
		/* padding: 24px 72px 28px 24px; */
		padding: 24px 0 24px 24px;
		gap: 14px;
	}

	#journal .journalPost .journalPostTitle,
	#journal .journalLatestPost .journalPostTitle {
		font-size: 16px;
	}

	#journal .journalBtn {
		margin-left: 0;
	}


}

@media (max-width: 640px) {

	#journal > .inner {
		/* flex-direction: column; */
		/* gap: 32px; */
		gap: 24px;
		/* padding-bottom: 80px; */
		padding-bottom: 0;
	}

	/* #journal .journalHeader {
		width: 100%;
	} */

	#journal .journalHeading {
		/* width: auto;
		height: auto;
		white-space: normal;
		flex-direction: column; */
		/* gap: 12px; */
		gap: 8px;
		/* position: relative;
		top: unset;
		left: unset;
		margin-left: 0;
		transform: rotate(0);
		transform-origin: unset; */
	}

	#journal .journalHeadingTitle {
		/* font-size: 44px; */
		font-size: 32px;
	}

	#journal .journalHeadingLead {
		/* font-size: 14px; */
		font-size: 12px;
	}

	#journal .journalHeadingLead br {
		display: none;
	}

	/* #journal .journalBody {
		width: 100%;
	} */

	#journal .journalPostsWrapper {
		gap: 14px;
	}

	#journal .journalPosts {
		gap: 14px;
	}

	#journal .journalPost {
		/* height: 128px; */
		height: auto;
	}

	#journal > .inner .journalPost a {
		flex-direction: column;
	}

	#journal .journalPost .journalPostThumb,
	#journal .journalLatestPost .journalPostThumb {
		/* width: 30%; */
		width: 100%;
	}

	#journal .journalPost .journalPostThumbImg,
	#journal .journalLatestPost .journalPostThumbImg {
		height: 0;
		padding-top: 66.66%;
	}

	#journal .journalPost .journalPostDesc > .inner,
	#journal .journalLatestPost .journalPostDesc > .inner {
		/* padding: 16px 40px 16px 16px; */
		padding: 16px 24px 16px 0;
		gap: 10px;
	}

	#journal .journalPost .journalPostTitle,
	#journal .journalLatestPost .journalPostTitle {
		font-size: 14px;
	}

	#journal .journalPost a .journalPostArrow {
		top: 16px;
		right: 16px;
		width: 22px;
		height: 22px;
	}

	#journal .journalPost a .journalPostArrowInner {
		width: 8px;
		height: 8px;
	}

	#journal .journalPost a .journalPostArrowBefore,
	#journal .journalPost a .journalPostArrowAfter {
		width: 8px;
		height: 8px;
	}

	#journal .journalBtn {
		margin-top: 32px;
	}

}

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

#footer {
	color: var(--black);
	transition: .5s ease;
}

/* #footer.isActive {
	color: var(--white);
} */

#footer.isDarkMode {
	color: var(--white);
}

#footer .footerContactBtn a::before {
	background: var(--black);
	transition: .5s ease;
}

/* #footer.isActive .footerContactBtn a::before {
	background: var(--white);
} */

#footer.isDarkMode .footerContactBtn a::before {
	background: var(--white);
}

#footer .footerContactBtn a .footerContactBtnText {
	color: var(--black);
	transition: .5s ease;
}

/* #footer.isActive .footerContactBtn a .footerContactBtnText {
	color: var(--white);
} */

#footer.isDarkMode .footerContactBtn a .footerContactBtnText {
	color: var(--white);
}

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

/* #footer.isActive .footerContactBtn a .footerContactBtnArrow svg path {
	fill: var(--white);
} */

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

/* #footer .footerContactLead a {
	color: var(--black);
	transition: .7s ease;
} */

#footer .footerContactLead a:link,
#footer .footerContactLead a:visited {
	color: var(--black);
	transition: .7s ease;
}

/* #footer.isActive .footerContactLead a {
	color: var(--white);
} */

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

@media (any-hover: hover) {

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

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

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

}

#footer .footerNavItem a .footerNavItemSplit {
	color: var(--black);
	transition: .5s ease;
}

/* #footer.isActive .footerNavItem a .footerNavItemSplit {
	color: var(--white);
} */

#footer.isDarkMode .footerNavItem a .footerNavItemSplit {
	color: var(--white);
}

#footer .footerSocialItem a svg path {
	fill: var(--black);
	transition: .5s ease;
}

/* #footer.isActive .footerSocialItem a svg path {
	fill: var(--white);
} */

#footer.isDarkMode .footerSocialItem a svg path {
	fill: var(--white);
}

#footer #footerLogo svg path {
	fill: var(--lightGray02);
	transition: .5s ease;
}

/* #footer.isActive #footerLogo svg path {
	fill: var(--black);
} */

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