/* ------------------------------------- */
/* Font faces */
/* ------------------------------------- */
@font-face {
	font-family: "Plain";
	src: url("../fonts/Plain-Medium.woff2") format("Woff");
}
/* ------------------------------------- */
/* Native */
/* ------------------------------------- */
:focus-visible {
	outline: -webkit-focus-ring-color auto 0px !important;
	outline: none !important;
}
:root {
	--vh: 1vh;
	--color-light: 240, 240, 240;
	--color-dark: 0, 0, 0;
	--color-informations-light: 255, 100, 0;
	--color-informations-dark: 240, 240, 240;
}
* {
	box-sizing: border-box;
}
body {
	/* background: #e8e8e8 !important; */

	-webkit-animation: fadein 2s;
	/* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s;
	/* Firefox < 16 */
	-ms-animation: fadein 2s;
	/* Internet Explorer */
	-o-animation: fadein 2s;
	/* Opera < 12.1 */
	animation: fadein 2s;
}

html,
body {
	background-color: rgba(var(--color-light), 1);
	transition: background-color 0.3s, color 0.3s;
	margin: 0;
	font-size: 14px;
	transition: 0.5s;
}
body.dark-mode {
	background-color: rgba(var(--color-dark), 1);
}
body.preload {
	transition: none;
}
h1,
h2,
h3,
h4,
h5,
p,
a,
button {
	line-height: 1.2;
	color: rgba(var(--color-light), 1);
	text-decoration: none;
	padding: 0;
	margin: 0;
	font-weight: normal;
	font-family: Plain;
}
/* ********************************************************************** */
/* Header (Navigation) */
/* ********************************************************************** */
.container-kd {
	height: calc(var(--vh) * 100);
	width: 100vw;
}
.container-header {
	z-index: 10;
	position: fixed;
	width: 100vw;
	top: 0;
}
.container-header p {
	color: rgba(var(--color-dark), 1);
}
.container-header a {
	color: rgba(var(--color-dark), 1);
}
body.dark-mode .container-header p {
	color: rgba(var(--color-light), 1);
}
body.dark-mode .container-header a {
	color: rgba(var(--color-light), 1);
}
.container-header-2 {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}
#mode-toggle {
	text-align: right;
	cursor: pointer;
}
.header-introduction {
	width: 20%;
	
}
#home-link {
	white-space: nowrap;
}

.swiper-home {
	position: fixed;
}
.header-work a {
	display: block;
	opacity: 0;
	transition: opacity 0.3s ease;
	color: rgba(var(--color-dark), 1);
}
.header-work-home {
	position: fixed;
	z-index: 100;
	bottom: 0;
	overflow: hidden;
	height: 250px;
	width: 100%;
	padding: 0 7px;
	margin-bottom: -4rem;
}
.header-work-home-list {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	will-change: transform;

	gap: 5px;
	transition: transform 0.3s ease;
}
.header-work-home a {
	white-space: nowrap;
	user-select: none;
}
.work-link {
	display: flex;
	justify-content: space-between;
}
.work-link:hover {
	opacity: 1 !important;
}
.header-work-home a {
	color: rgba(var(--color-dark), 1);
}
body.dark-mode .header-work-home a {
	color: rgba(var(--color-light), 1);
}
.header-work a.active {
	display: block;
	opacity: 1;
	transition: opacity 0.3s ease;
}
.header-work:hover a {
	display: block;
	opacity: 0.4;
}
.header-work:hover a.active {
	opacity: 1;
}
#a4:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#a4-home:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#wisteria:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#wisteria-home:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#running:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#running-home:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#xfold:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#xfold-home:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#bis:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#bis-home:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#sadaka:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#sadaka-home:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#macguffin:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#macguffin-home:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
.header-description-title {
	cursor: pointer;
}
.header-description {
	width: 50%;
}
#description-content {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	display: none;
}
#description-content.visible {
	display: block;
	opacity: 1;
}
.header-description-plain {
	padding-bottom: 10px;
}
.description-backgroundcolor {
	background-color: rgba(var(--color-light), 1);
	height: calc(var(--vh) * 10000);
	width: 100vw;
	z-index: 5;
	position: absolute;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	display: none;
}
body.dark-mode .description-backgroundcolor {
	background-color: rgba(var(--color-dark), 1);
}
.description-backgroundcolor.visible {
	display: block;
	opacity: 0.4;
}
/* ********************************************************************** */
/* Swiper (Carousel) (Root) */
/* ********************************************************************** */
.slick-prev {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	height: calc(var(--vh) * 90);
	width: 50vw;
	cursor: w-resize;
}
.slick-next {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	height: calc(var(--vh) * 90);
	width: 50vw;
	cursor: e-resize;
}
/* ********************************************************************** */
/* Swiper (Carousel) (Home page) */
/* ********************************************************************** */
.swiper-home {
	position: fixed;
	background-color: rgba(var(--color-light) 1);
	z-index: 1;
	height: calc(var(--vh) * 100);
	width: 100vw;
	overflow-y: hidden;
	pointer-events: none;
}
.container-swiper-home {
	position: absolute;
	top: 0;
	left: 0;
	height: calc(var(--vh) * 100);
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

body.dark-mode .swiper-home {
	background-color: rgba(var(--color-dark), 1);
}

.swiper-home-a4 {
	background: url(../img/homepage/kd-a4.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.swiper-home-wisteria {
	background: url(../img/homepage/kd-wisteria.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.swiper-home-running {
	background: url(../img/homepage/kd-running.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.swiper-home-xfold {
	background: url(../img/homepage/kd-xfolding.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.swiper-home-bis {
	background: url(../img/homepage/kd-bis.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.swiper-home-sadaka {
	background: url(../img/homepage/kd-sadaka.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.swiper-home-macguffin {
	background: url(../img/homepage/kd-macguffin.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.container-swiper-home.active {
	opacity: 1 !important;

	/* transition: opacity 0.3s ease!important; */
}
/* ********************************************************************** */
/* Project (Mobile) */
/* **********************************************************************  */
.container-project-mobile {
	height: calc(var(--vh) * 100);
	width: auto;
}
.container-project-mobile img {
	width: 100vw;
	height: auto;
}
/* ********************************************************************** */
/* Swiper (Carousel) (Project) */
/* **********************************************************************  */
.swiper-project {
	z-index: 1;
	height: calc(var(--vh) * 90 - 0px);
}
.swiper-project img {
	height: calc(var(--vh) * 90 - 0px);
}
.container-project {
	display: flex !important;
	height: calc(var(--vh) * 100);
	width: 100vw;
	z-index: 100;
	justify-content: center;
	margin: auto;
	transition: height 0.5s;
}
.swiper-miniature {
	position: absolute;
	bottom: 0;
	z-index: 1;
	height: calc(var(--vh) * 10);
	display: none;
	cursor: pointer;
	margin-left: 0px;
	margin-bottom: 0px;
	width: 100vw;
	overflow: scroll;
}
/* .container-miniature {
} */
.swiper-miniature img {
	height: calc(var(--vh) * 10);
}
.swiper-miniature .container-miniature img {
	opacity: 0.4;
	transition: opacity 0.5s;
}
.swiper-miniature .container-miniature.active img {
	opacity: 1;
}
.swiper-miniature .container-miniature img:hover {
	opacity: 1;
	transition: opacity 0.5s;
}
/* ********************************************************************** */
/* Toggle informations */
/* ********************************************************************** */
.container-informations {
	background-color: rgba(var(--color-informations-light), 1);
	z-index: 10;
	top: 0;
	height: calc(var(--vh) * 100 + 0px);
	width: 100vw;
	position: absolute;
	transition: 0.5s;
}
body.dark-mode .container-informations {
	background-color: rgba(var(--color-informations-dark), 1);
	transition: 0.5s;
}
/*
.swiper-informations {
height: calc(var(--vh) * 40);
top: 0;
left: 0;
z-index: 1;
margin-top: 6px;
margin-left: 6px;
margin-bottom: 6px;
}
.swiper-informations img {
height: calc(var(--vh) * 40);
width: auto;
}
.slick-prev-informations {
position: absolute;
left: 0;
top: 0;
z-index: 10;
height: calc(var(--vh) * 50);
width: 50vw;
cursor: w-resize;
}
.slick-next-informations {
position: absolute;
right: 0;
top: 0;
z-index: 10;
height: calc(var(--vh) * 50);
width: 50vw;
cursor: e-resize;
}
*/
.container-informations p {
	color: rgba(var(--color-informations-dark), 1);
}
.container-informations a {
	color: rgba(var(--color-informations-dark), 1);
}
body.dark-mode .container-informations p {
	z-index: 4;
	color: rgba(var(--color-informations-light), 1);
}
body.dark-mode .container-informations a {
	z-index: 4;
	color: rgba(var(--color-informations-light), 1);
}
.footer-title {
	font-size: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	transition: width 1s, height 1s, transform 1s;
}
/* .footer-title:hover {
} */
.footer-title p {
	line-height: 1.05;
}
/* .footer-title a {
} */
/* .footer-title p:hover { */
/*transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);*/
/* } */
.informations {
	margin-right: 30px;
}
/* .footer-informations p:hover { */
/*transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);*/
/* } */
/* .footer-informations a:hover { */
/*transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);*/
/* } */
/*
.footer-services {
width: 100%;
display: flex;
}*/
.footer-copyright {
	position: absolute;
	bottom: 6px;
	left: 6px;
}
.spectrodrama {
	text-decoration: underline;
	text-underline-position: under;
}
/* ********************************************************************** */
/* (sm) Small devices (landscape phones, 576px and up) */
/* ********************************************************************** */
/* @media (min-width: 576px) {...} */
/* ********************************************************************** */
/* (md) Medium devices (tablets, 768px and up) */
/* ********************************************************************** */
@media (min-width: 768px) {
	.swiper-miniature {
		display: flex;
	}
	.footer-title {
		font-size: 20px;
	}
}
/* ********************************************************************** */
/* (lg) Large devices (desktops, 992px and up) */
/* ********************************************************************** */
@media (min-width: 992px) {
	.header-introduction {
		width: 45%;
	}
	.header-description {
		width: 35%;
	}
	/*
.footer-services {
width: 15%;
}*/
	.footer-press {
		width: 40%;
		display: flex;
	}
}
/* ********************************************************************** */
/* (xl) Extra large devices (large desktops, 1200px and up) */
/* ********************************************************************** */
/* @media (min-width: 1200px) {...} */
/* ********************************************************************** */
/* Unused media queries */
/* ********************************************************************** */
/*  Extra small devices (portrait phones, less than 576px) */
/* @media (max-width: 575.98px) {...} */
/*  Small devices (landscape phones, less than 768px) */
/* @media (max-width: 767.98px) {...} */
/*  Medium devices (tablets, less than 992px) */
/* @media (max-width: 991.98px) {...} */
/*  Large devices (desktops, less than 1200px) */
/* @media (max-width: 1199.98px) {...} */
/*  Extra small devices (portrait phones, less than 576px) */
/* @media (max-width: 575.98px) {...} */
/*  Small devices (landscape phones, 576px and up) */
/* @media (min-width: 576px) and (max-width: 767.98px) {...} */
/*  Medium devices (tablets, 768px and up) */
/* @media (min-width: 768px) and (max-width: 991.98px) {...} */
/*  Large devices (desktops, 992px and up) */
/* @media (min-width: 992px) and (max-width: 1199.98px) {...} */