@charset "UTF-8";
/* CSS Document */

/*
	00 Fonts
	01 Layout
	02 Trigger
*/

/*

VDL-V7Gothic M
font-family: vdl-v7gothic, sans-serif;
font-weight: 500;
font-style: normal;

VDL-V7Gothic B
font-family: vdl-v7gothic, sans-serif;
font-weight: 700;
font-style: normal;

VDL-V7Gothic EB
font-family: vdl-v7gothic, sans-serif;
font-weight: 800;
font-style: normal;

Frank New Medium
font-family: frank-new, sans-serif;
font-weight: 500;
font-style: normal;

Frank New Bold
font-family: frank-new, sans-serif;
font-weight: 700;
font-style: normal;

Frank New ExtraBold
font-family: frank-new, sans-serif;
font-weight: 800;
font-style: normal;

/*

/*
01 Layout
========================================================================== */
:root{

	/* color */
	--black:rgba(50,50,50,1);
  --white:rgba(255,255,255,1);
  --gray:rgba(190,195,195,.98);

  /* font size */
  --20pt:1.15rem;
  --19pt:1.10rem;
  --18pt:1.05rem;
  --17pt:1.00rem;
  --16pt:0.95rem;
  --15pt:0.90rem;
  --14pt:0.85rem;
  --13pt:0.80rem;
  --12pt:0.75rem;
  --11pt:0.70rem;
  --10pt:0.65rem;
  --9pt:0.60rem;
  --8pt:0.55rem;
}

* {
	color: var(--black);
	font-family: 'frank-new','vdl-v7gothic', 'Yu Gothic', 'YuGothic', '游ゴシック', '游ゴシック体', sans-serif;
	font-style: normal;
	font-weight: 500;
	box-sizing: border-box;
	text-decoration: none;
}

html { height: 100%; }
body {
	height: 100%;
	font-size: 12px;
	text-align: justify;
	line-height: 2;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,div,dl,dt,dd,ul,li,img,a,p,span,iframe,small,strong,figure,address,select,input,button,textarea,i,b,hr,sub,time {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	list-style: none;
	text-align: justify;
	outline: none;
	background: none;
	border: none;
}
select,input {
	cursor: pointer;
	background: transparent;
	background-image: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}
button { cursor: pointer; }
p { line-height: 2; }
br { line-height: 1; }
sub { bottom: initial; }
picture { display: block; }
svg { display: block; }
small { font-size: 93%; }
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
mark {}
hr {}

main { position: relative; }
section { position: relative; }

/* Indention */
.verWid { display: block !important; }
.verNar { display: none !important; }

/* underconstruction */
.underconstruction {
	padding: 300px;
}
.underconstruction p {
	margin: auto;
	text-align: center;
}

/* Prevent swing */
.preventSwing {
	overflow: hidden;
}

.scrollableInner {
	overflow-x: auto;
}

/* Header ===================== */
header {
	position: fixed;
	top: 0;
	left: 0;
}
header.verGeneral h2 {
  position: fixed;
  top: 0;
  right: 0;
  overflow: hidden;
}
header.verGeneral h2 i {
  font-size: 85px;
  font-weight: 400;
  letter-spacing: -.15rem;
  color: var(--white);
  opacity: .85;
  position: fixed;
  top: 5px;
  right: 5px;
  white-space: nowrap;
}

/* Nav --- */
nav.navBento {
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: fixed;
	top: 65px;
	left: 85px;
	z-index: 100;
  transition: opacity .3s ease, visibility .3s ease;
  visibility: visible;
  opacity: 1;
}
nav.navBento button {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: .8s ease;
}
nav.navBento hr {
	display: block;
	width: 5px;
	height: 5px;
	background-color: var(--black);
	position: absolute;
	transition: .2s ease;
}
nav.navBento hr:nth-child(1) { top: 0; left: 0; transform: translate(0,0); }
nav.navBento hr:nth-child(2) { top: 0; left: 50%; transform: translate(-50%,0); }
nav.navBento hr:nth-child(3) { top: 0; right: 0; transform: translate(0,0); }
nav.navBento hr:nth-child(4) { top: 50%; left: 0; transform: translate(0,-50%); }
nav.navBento hr:nth-child(5) { top: 50%; left: 50%; transform: translate(-50%,-50%); }
nav.navBento hr:nth-child(6) { top: 50%; right: 0; transform: translate(0,-50%); }
nav.navBento hr:nth-child(7) { bottom: 0; left: 0; transform: translate(0,0); }
nav.navBento hr:nth-child(8) { bottom: 0; left: 50%; transform: translate(-50%,0); }
nav.navBento hr:nth-child(9) { bottom: 0; right: 0; transform: translate(0,0); }
nav.navBento:hover button {
	width: 30px;
	height: 30px;
	transform: translate(-50%,-50%) rotate(-225deg);
}


[data-screen-active="1"] nav.navBento {
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s, .3s;
}

nav.navOverlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--white);
	visibility: hidden;
	opacity: 0;
	transition: visibility .3s ease .3s, opacity .3s ease;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	z-index: 1000;
}
[data-nav-active='1'] .navOverlay {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s
}

nav .frame {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100%;
	padding: 50px 0 40px;
	position: relative;
}
nav .frame h2 {
	width: 90vw;
	position: fixed;
	bottom: -25px;
	left: -35px;
	opacity: .04;
	z-index: -1;
}
nav .line {
	margin: 0 0 30px 0;
	border-bottom: 1px solid var(--gray);
	position: relative;
}
nav .line h3 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	margin: 0 0 22px 0;
	white-space: nowrap;
	overflow: hidden;
}
nav .line h3 i {
	font-size: 75px;
	font-weight: 400;
	letter-spacing: -.2rem;
	line-height: 1;
	text-align: right;
	cursor: pointer;
	position: relative;
	right: -7px;
}
nav .line .paradeWrap {
	overflow-y: hidden;
	max-height: 0;
	transition: max-height .3s ease;
}

nav .line .paradeWrap[data-open="1"] {
	max-height: var(--max-height);
}
nav .line .parade {
	display: flex;
	padding: 10px 0 45px 0;
	overflow-x: scroll;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
nav .line .parade {
	scrollbar-width: none;
	scrollbar-color: var(--gray) var(--white);
}
/* Chrome, Edge, and Safari */
nav .line .parade::-webkit-scrollbar {
	height: 4px;
	appearance: none;  /* Safari and Chrome */
}
nav .line .parade::-webkit-scrollbar-thumb {
	background-color: var(--gray);
	border-radius: 0px;
	border: none;
}

nav .line .parade li {}
nav .line .parade li > * {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 145px;
}
nav .line .parade li picture {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0 0 15px 0;
}
nav .line .parade li picture img {
	width: auto;
	height: 110px;
	object-fit: initial;
}
nav .line .parade li p {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: var(--11pt);
	line-height: 1.6;
}
nav .line .parade li p i { letter-spacing: .03rem; }
nav .line .parade li p b { letter-spacing: .08rem; }
nav .subPages {
	display: flex;
	justify-content: flex-end;
}
nav .subPages i {
	display: block;
	padding: 0 15px;
	position: relative;
}
nav .subPages > i + i {}
nav .subPages > i + i:before {
	content: '';
	width: 1px;
	height: 15px;
	background-color: var(--black);
	position: absolute;
	top: 5px;
	left: 0;
	transform: rotate(35deg);
}
nav .subPages b {}
nav .subPages b + b {}
.subPages + .subPages { margin: 8px 0 0 0; }

nav .navClose {
	width: 55px;
	height: 55px;
	position: fixed;
	top: 50px;
	left: 50px;
}
nav .navClose hr {
	width: 55px;
	height: 2px;
	background-color: var(--black);
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s ease;
}
nav .navClose hr:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
nav .navClose hr:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
nav .navClose:hover hr:nth-child(1) { transform: translate(-50%,-50%) rotate(0); }
nav .navClose:hover hr:nth-child(2) { opacity: 0; }

/* Main ===================== */
main {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
	position: relative;
	z-index: 10;
}
main .parade {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  height: 100%;
}
main .parade.verIndex {
	display: block;
}
main .parade .block {
	display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}
main .parade.verIndex .block {
	display: flex;
	width: 25vw;
	cursor: pointer;
}
main .parade .block picture { width: auto; }
main .parade .block img {
  width: auto;
  object-fit: initial;
}
main .parade .block h2 {
  padding: 30px 0 0 0;
  position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	font-size: 11px;
	line-height: 1.9;
}
main .parade .block h2 i { letter-spacing: .08rem; }
main .parade .block h2 b { letter-spacing: .03rem; }
main .parade .block h2 hr {
  width: 1px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 50%;
}

main .parade .block .text-hider {
	max-height: 0;
	overflow: hidden;
	transition-property: max-height;
	transition-duration: .3s;
	transition-timing-function: ease-out;
}

main .parade .block .text-hider {
	transition-delay: 0s;
}
main .parade .block.slick-active .text-hider {
	transition-delay: calc(var(--animation-delay) + .5s);
}

main .parade .block.animatable.slick-active .text-hider {
	max-height: var(--max-height, 0);
	transition-duration: .2s;
}

main .parade .block.animatable.slick-active[data-animation-type="a"] picture {
	animation-name: animation-type-a;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

main .parade {
	--base-jump-delay: 2.3s;
}

main .parade .block.animatable.slick-active {
	--animation-delay: var(--base-jump-delay);
}

main .parade .block.animatable.slick-active + * {
	--animation-delay: calc(var(--base-jump-delay) + .1s);
}

main .parade .block.animatable.slick-active + * + * {
	--animation-delay: calc(var(--base-jump-delay) + .2s);
}

main .parade .block.animatable.slick-active picture {
	animation-delay: var(--animation-delay);
}

@keyframes animation-type-a {
	0% {
		transform: translateY(0%);
	}

	48%, 50% {
		transform: translateY(-4%);
	}

	65% {
		transform: translateY(0);
	}

	84%, 85% {
		transform: translateY(-2.5%);
	}

	90% {
		transform: translateY(0%);
	}

	94%, 95% {
		transform: translateY(-1%);
	}

	100% {
		transform: translateY(0);
	}
}

main.verGeneral h1 {
  width: 90px;
  position: fixed;
  top: 75px;
  left: 140px;
  opacity: .92;
  z-index: 10;
}
main.verGeneral h1 a { display: block; }

.parade.modeGeneral .block h2 sub { display: none }
.parade.modeScreen .block h2 sub { display: inline-block }

.parade.modeScreen .block,
.parade.modeGeneral .block { transition: width .2s ease; }
main .parade.modeScreen .block { width: 50vw; }
.parade.modeScreen .block picture {
	height: 85%;
	margin: 2.5vh 0 0 0;
}
.parade.modeScreen .block h2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	width: auto;
	padding: 0;
	line-height: 1.8;
	position: absolute;
	top: 12.5vh;
	left: -30px;
	z-index: -1;
	opacity: .7;
	white-space: nowrap;
}
.parade.modeScreen .block h2 > * {
	display: inline-flex;
	font-size: 11px;
	letter-spacing: 0;
	white-space: nowrap;
	position: relative;
}
.parade.modeScreen .block h2 i {
	width: 100%;
	margin: 0 0 2px 0;
	font-size: 14px;
	letter-spacing: .05rem;
}
.parade.modeScreen .block h2 b { margin: 0 0 0 1px;  }
.parade.modeScreen .block h2 sub {}
.parade.modeScreen .block h2 sub:before {
	content: '|';
	margin: 0 7px 0 6px;
	font-size: 10px;
	letter-spacing: 0;
	line-height: 1;
	color: inherit;
	position: relative;
	top: -1px;
	transform: scaleY(.92);
}
.parade.modeScreen .block h2 hr {
  width: 25px;
  height: 1px;
  top: initial;
  bottom: -35px;
  left: 12px;
  transform: rotate(40deg);
}

.navCloseScreen {
	width: 40px;
	height: 40px;
	position: fixed;
	top: 45px;
	right: 50px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease .3s;
	z-index: 1000;
}
[data-screen="1"] .navCloseScreen {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.navCloseScreen hr {
	width: 100%;
	height: 2px;
	background-color: var(--black);
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s ease-out;
}
.navCloseScreen hr:nth-child(1) { transform: translate(-50%,-50%) rotate(0); }
.navCloseScreen hr:nth-child(2) { transform: translate(-50%,-50%) rotate(0); opacity: 0; }
.navCloseScreen:hover hr:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.navCloseScreen:hover hr:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); opacity: 1; }

.workCategoryPage {
	--fade-out-duration: .25s;
	--fade-in-wait: calc(var(--fade-out-duration) + .5s);
	--img-scale: 1;
}

.parade.verZoom {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition:
			opacity .3s ease,
			visibility .3s ease .3s;
}

main .verWorkCategory {
	--base-jump-delay: 1s;
}

.parade.verWorkCategory .slick-slide picture img {
	transform-origin: center bottom;
	transform: scale3d(var(--img-scale), var(--img-scale), var(--img-scale));
}

.parade.verWorkCategory {
	opacity: 1;
	visibility: visible;
	transition:
			opacity .1s linear var(--fade-out-duration),
			visibility .1s linear var(--fade-out-duration);
}

[data-screen="1"] .parade.verWorkCategory .block.animatable.slick-active .text-hider {
	transition-delay: 0s!important;
	--max-height: 0!important;
}


[data-screen="1"] .parade.verWorkCategory .slick-slide picture img {
	--img-scale: 0;
	transition: transform var(--fade-out-duration) linear;
}

[data-screen="1"] .parade.verZoom {
	--zoom-effect-delay: calc(var(--fade-in-wait) + .5s);
	opacity: 1;
	visibility: visible;
	transition:
			opacity .3s ease var(--zoom-effect-delay),
			visibility .3s ease var(--zoom-effect-delay);

	animation-name: zoom-bounce;
	animation-delay: var(--zoom-effect-delay);
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

[data-screen="1"] .parade.verWorkCategory {
	opacity: 0;
	visibility: hidden;
	transition-delay: var(--fade-out-duration);
}

header.verWorkCategory h2 i {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility .3s ease;
}

.parade.verZoom .block.animatable .text-hider {
	opacity: 0;
	transition: opacity .1s ease;
}

.parade.verZoom .block.animatable.slick-current .text-hider {
	opacity: 1;
}

[data-screen="1"] header.verWorkCategory h2 i,
[data-screen="1"] main.verGeneral h1,
[data-screen="1"] nav.navBento {
	opacity: 0;
	visibility: hidden;
	transition:
			opacity .3s ease var(--fade-out-duration),
			visibility .3s ease calc(var(--fade-out-duration) + .3s);
}


@keyframes zoom-bounce {
	0% {
		transform: translateY(-100%);
	}

	50% {
		transform: translateY(0);
	}

	63%, 65% {
		transform: translateY(-4%);
	}

	80% {
		transform: translateY(0%);
	}

	84%, 85% {
		transform: translateY(-2.5%);
	}

	90% {
		transform: translateY(0%);
	}

	94%, 95% {
		transform: translateY(-1%);
	}

	100% {
		transform: translateY(0);
	}
}

/* Footer ===================== */
footer {
	width: calc(100vw - 30px);
	height: calc(100vh - 30px);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}



@media screen and (max-width:720px) {
.verWid { display: none !important; }
.verNar { display: block !important; }

nav.navBento {
	top: 25px;
	left: 22px;
}
nav .frame { padding: 75px 0 40px; }
nav .frame h2 {
  width: calc(100% + 15px);
  left: 50%;
  bottom: -5px;
  transform: translate(-50%,0);
}
nav .line { margin: 0 0 15px 0; }
nav .line h3 { margin: 0 0 20px 0; }
nav .line h3 i { font-size: 65px; }
nav .subPages i {
	padding: 0 12px;
	font-size: 11px;
}
nav .subPages > i + i:before { top: 3px; }
nav .navClose {
	width: 45px;
	height: 45px;
	top: 25px;
	left: 20px;
}
nav .navClose hr { width: 40px; }
nav .navClose hr:nth-child(1),
nav .navClose:hover hr:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); opacity: 1; }
nav .navClose hr:nth-child(2),
nav .navClose:hover hr:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); opacity: 1; }
.navCloseScreen {
	width: 30px;
	height: 30px;
	top: 25px;
	right: 25px;
}
.navCloseScreen hr:nth-child(1),
.navCloseScreen:hover hr:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.navCloseScreen hr:nth-child(2),
.navCloseScreen:hover hr:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); opacity: 1; }
main .parade.verIndex.modeScreen .block { width: 100vw }
.parade.modeScreen .block picture {
	height: 70%;
	max-height: initial;
	margin: 0;
	position: relative;
	top: -20px;
}
.parade.modeScreen .block h2 {
	line-height: 1.7;
	top: initial;
	bottom: 40px;
	left: 35px;
}
.parade.modeScreen .block h2 > * { font-size: 10px; }
.parade.modeScreen .block h2 i {
	margin: 0 0 1px 0;
	font-size: 11px;
}
.parade.modeScreen .block h2 hr { display: none; }
header.verGeneral h2 i {
	font-size: 35px; 
	top: initial;
	bottom: -20px;
	right: 0;
	opacity: .85;
}
main.verGeneral h1 {
	width: 85px;
	top: 35px;
	left: 70px;
	z-index: 100;
}
main .parade .block { height: calc(100vh - 70px); }
main .parade.verIndex .block { width: 100vw; }
main .parade .block h2 {
	padding: 30px 0 0 0;
	font-size: 10px;
	line-height: 1.7;
}
main .parade .block h2 i { letter-spacing: .05rem; }
main .parade .block h2 hr { height: 15px; }
nav .line .parade { padding: 5px 0 35px; }
nav .line .parade li > * { width: 110px; }
nav .line .parade li picture { margin: 0 0 5px 0; }
nav .line .parade li p { font-size: 9px; }
nav .line .parade li p i { letter-spacing: 0; }
nav .line .parade li p b { letter-spacing: .03rem; }
footer {
	width: 100%;
	height: 100%;
}
}