@charset "utf-8";
@import url("https://use.typekit.net/qat2ozk.css");

/* body
-------------------------- */
::selection {
	color: inherit;
	background: #ccc;
}
/* 12px @ 768px increasing to 16px @ 1920px */
@media (min-width: 768px) {
	:root {
		font-size: calc(0.75rem + ((1vw - 7.68px) * 0.3472));
		min-height: 0vw;
	}
}
@media (min-width: 1920px) {
	:root {
		font-size: 16px;
	}
}
/*:root {
	font-size: 16px;
}*/

body {
	width: 100%;
	height: 100%;
	color: #fff;
	background: #000;
	font-family: "athelas", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 2;
	letter-spacing: 1px;
	text-align: center;
	position: relative;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}
body.fixed {
	position: fixed;
}
a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	opacity: .5;
}
a,
a img,
.easing {
	transition: .5s ease-in-out;
	border: none;
	outline: none;
	position: relative;
}
hr {
	border: 0;
	margin: 0;
	width: 0;
	height: 1px;
	background: rgba(255, 255, 255, .5);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}
p {
	margin: .75rem auto;
	/*font-size: 1.125rem;*/
	font-size: 1.25rem;
	text-align: left;
}
main {
	position: relative;
}
section {
	margin: auto;
	position: relative;
	background: #000;
	/*padding: 4.5rem 0;*/
	/*border-top: 1px solid #222;*/
}
/* common
--------------------------------- */
.spSet {
	display: none !important;
}
.pcSet {
	display: block !important;
}
.brNav {
	display: block !important;
}
.inner {
	width: 100%;
	height: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 10rem 10%;
	position: relative;
	/*border: 1px dotted #222;*/
}
/* #intro_screen
--------------------------------- */
#intro_screen {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #111;
	transform: translateY(0);
	transition: opacity .75s ease-in-out 1s, transform .75s ease-in-out;
}
#intro_screen.hide {
	transform: translateY(-100%);
}
.image_gray, .image_red {
	aspect-ratio: 120 / 83;
	width: 17.5%;
	max-width: 280px;
	min-width: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -45%);
}
/*.image_gray {
	background: url('/assets/img/logo_gray.svg') no-repeat;
	background-size: cover;
	opacity: 0;
	animation: fadeInOut 3s ease-in-out 1s forwards;
}*/
.image_red {
	background: url('/assets/img/logo_red.svg') no-repeat;
	background-size: cover;
	opacity: 0;
	/*animation: fadeIn 3s ease-in-out 3.75s forwards;*/
	animation: fadeInOut 3s ease-in-out 1s forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeInOut {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
#intro_screen .eachTextAnime {
	color: #111;
	font-size: 1.625rem;
	text-align: center;
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	letter-spacing: 5px;
	text-indent: 5px;
	padding: .75rem 10rem;
	/*padding-bottom: 20rem;*/
}
.eachTextAnime span {
	opacity: 0;
	color: #fff;
}
.eachTextAnime.text_in span {
	animation: fadeIn 1s ease-in-out forwards;
}
#intro_screen button.skip {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	cursor: pointer;
	background: transparent;
	color: inherit;
	font-size: 1rem;
	letter-spacing: 2px;
}
#intro_screen button.skip:hover {
	opacity: .5;
}
/* #main_wrapper
--------------------------------- */
#main_wrapper.hide {
	opacity: 0;
	height: 100vh;
	overflow: hidden;
}
#main_wrapper {
	height: auto;
	transition: opacity .25s ease-out 1s, transform .5s ease-out;
}
/* header
--------------------------------- */
header {
	width: 100%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%);
	/*background: #000;
	box-shadow: 0 10px 10px 0 #000;*/
	position: fixed;
	top: 0;
	left: 0;
	padding: 1.25rem 3rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	/*border-bottom: 1px solid #222;*/
	/*transition-delay: 1s;*/
}
header h1 {
	width: 12rem;
}
.language {
	font-size: .75rem;
}
.language li {
	display: inline-block;
	padding: 0 5px;
}
.language li.line {
	padding: 0;
}
/* footer
--------------------------------- */
footer {
	width: 100%;
	background: #000;
	font-size: .75rem;
	padding: 2.75rem 4.5rem;
	border-top: 1px solid #8e8e8e;
}
footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
footer li:nth-of-type(1) {
	order: 1;
}
footer li:nth-of-type(2) {
	order: 3;
}
footer li:nth-of-type(3) {
	order: 2;
}
footer li a img {
	width: 10rem;
}
#pageTop {
	width: 1.5rem;
	height: 1.5rem;
	position: fixed;
	right: 1.5rem;
	bottom: .75rem;
	cursor: pointer;
	display: none;
	z-index: 999;
	opacity: 1;
	transform: rotate(135deg);
}
#pageTop:before {
	content: '';
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}
#pageTop:hover {
	opacity: .5;
}
/* #sec00
--------------------------------- */
#sec00 {
	/*padding: 0 0 3rem;*/
	padding: 0;
	margin-top: -100px;
	height: 100vh;
}
#sec00 img.blur {
	transition-duration: 3s;
	transition-delay: 10s;
	width: 10rem;
	opacity: .35;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#sec00 img.skipblur {
	filter: blur(30px);
	animation: blur 3s ease-in-out forwards;
}
@keyframes blur {
	0% {
		filter: blur(30px);
	}
	100% {
		filter: blur(0);
	}
}
#scrollGuide {
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5rem;
	margin: auto;
}
#scrollGuide:before {
	content: '';
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: scrollDown 2s infinite;
}
@keyframes scrollDown {
	0% {
		opacity: 0;
		transform: rotate(-45deg) translate(0, 0);
	}
	40% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		transform: rotate(-45deg) translate(-20px, 20px);
	}
	100% {
		opacity: 0;
	}
}
/* sectionCommon
--------------------------------- */
section h2 {
	width: 100%;
	font-size: 3.75rem;
	text-align: left;
	line-height: 1.2;
	padding: 0 0 3rem;
}
section h3 {
	width: 100%;
	font-size: 3.5rem;
	text-align: left;
	line-height: 1.2;
	margin-bottom: 3rem;
	border-bottom: 1px dotted #fff;
}
section p {
	color: #8e8e8e;
	line-height: 1.5;
	padding: .5rem 0;
	margin: .75rem 0;
}
/* #sec01
--------------------------------- */
#sec01 .box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
#sec01 .block_text {
	width: 65%;
}
#sec01 .block_img {
	width: 30%;
	overflow: hidden;
}
#sec01 .block_img img {
	width: 100%;
	height: 30rem;
	object-fit: cover;
	object-position: center top;
	border-radius: 1rem;
}
/* #sec02
--------------------------------- */
#sec02 {
	background-color: rgba(0, 0, 0, .65);
	background-blend-mode: darken;
}
#sec02:before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background-image: url('/assets/img/bg_sec02.jpg');
	background-size: cover;
	background-position: center;
}
#sec02.hide:before {
	content: none;
}
#sec02 .inner {
	padding: 15rem 10% 10rem !important;
	max-width: 1920px !important;
	margin: 0 auto !important;
}
.scrollSet {
	height: 100vh;
	width: 100%;
}
.scrollSet_outer {
	display: flex;
	align-items: center;
	width: 125%;
	height: auto;
	/*height: 50vh;*/
	/*margin-inline: auto;*/
	margin-left: -12.5%;
	overflow: hidden;
}
ul.scrollList {
	display: flex;
	margin: 0 10%;
	gap: 3vw;
}
ul.scrollList li {
	width: 65vw;
	border: 1px solid #222;
	padding: 3rem;
}
/* #sec03
--------------------------------- */
#sec03 .order {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 3rem;
}
#sec03 .order_ch {
	width: calc(100% / 3);
	padding: 1.5rem 2.5rem;
}
#sec03 .order_ch:nth-of-type(3n-1) {
	margin-top: -2.5rem;
}
#sec03 .order_ch img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 1rem;
}
#sec03 .order_ch:nth-of-type(2) img {
	object-position: 40% 50%;
}
#sec03 .order_ch:nth-of-type(5) img {
	object-position: 60% 50%;
}
#sec03 .order_ch span {
	display: block;
	/*font-size: 1.125rem;*/
	font-size: 1.25rem;
	line-height: 1.2;
	margin: .5rem auto;
	color: #8e8e8e;
}
/* #sec04
--------------------------------- */
#sec04 .box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	/*position: relative;*/
}
#sec04 .block_text {
	width: 48%;
}
#sec04 .block_text ul {
	margin: 1.5rem 0;
	font-size: 1.125rem;
}
#sec04 .block_text li {
	width: 100%;
	display: block;
	line-height: 1.5;
	padding: .25rem 0 .25rem 1.5rem;
	text-align: left;
	position: relative;
	color: #8e8e8e;
}
#sec04 .block_text li:before {
	content: '';
	width: .5rem;
	height: .5rem;
	background: #8e8e8e;
	border-radius: 50%;
	position: absolute;
	left: .25rem;
	top: .75rem;
}
#sec04 .block_img {
	width: 50%;
	border-radius: 1rem;
	overflow: hidden;
}
#sec04 .block_img img {
	width: 145%;
	height: 25rem;
	object-fit: cover;
	transform: translate(-5%, 0%);
	/*object-position: 20% 15%;*/
}
/* #sec05
--------------------------------- */
#sec05 dl {
	display: flex;
	flex-wrap: wrap;
	margin: 3rem 0;
	font-size: 1.25rem;
	text-align: left;
}
#sec05 dt {
	width: 30%;
	padding: .75rem 1rem;
	border-bottom: 1px solid #8e8e8e;
}
#sec05 dd {
	width: 70%;
	padding: .75rem 1rem;
	border-bottom: 1px solid #8e8e8e;
}
/* #sec06
--------------------------------- */
#sec06 .box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 3rem 0;
}
#sec06 a.btn {
	cursor: pointer;
	padding: .5rem 1rem;
	margin: 1.5rem 3rem;
	margin: 1.5rem 0 1.5rem auto;
	border: 1px solid #fff;
	border-radius: .5rem;
	font-size: 1.125rem;
}
#sec06 a.btn:hover {
	background: #8e8e8e;
	opacity: 1;
}
/* modal
--------------------------------- */
.trigger_mdl {
	cursor: pointer;
}
.mdl_box {
	position: fixed;
	display: none;
	z-index: 7777;
	width: 85vw;
	max-width: 1800px;
	height: auto;
	max-height: 75vh;
	margin: 0;
	padding: 0 4.5rem;
	border: 1px solid #8e8e8e;
	text-align: left;
	background: #111;
	overflow: scroll;
}
.mdl_box section {
	padding: 3rem 0;
	background: #111;
}
.mdl_box section h3 {
	font-size: 1.5rem;
	padding: .5rem 0 0;
	margin: 1.5rem 0 0;
	border-bottom: none;
}
span.sign {
	display: inline-block;
	width: .75em;
	height: .75em;
	margin: 0 1px -.125rem;
	background: url('/assets/img/@.svg') no-repeat;
}
.mdl_close {
	cursor: pointer;
	background: #8e8e8e;
	color: #000;
	width: 3rem;
	height: 3rem;
	line-height: 2.5rem;
	font-size: 3rem;
	display: block;
	position: absolute !important;
	top: 0;
	right: 0;
	text-align: center;
	letter-spacing: 0;
}
.mdl_close:hover {
	background: #ccc;
	color: #333;
}
.mdl_bg {
	z-index: 6666;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background: rgba(0, 0, 0, .75);
}
/* #sec_contact
--------------------------------- */
#sec_contact {
	padding: 0;
	min-height: 80vh;
}
#sec_contact .inner {
	padding: 5rem 10%;
}
#sec_contact .formWrap {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.formWrap .w48per {
	width: 48%;
	margin: 0 0 2rem;
}
.formWrap .w100per {
	width: 100%;
}
.formWrap input[type="text"],
.formWrap textarea {
	transition: all .25s ease-in-out;
	display: block;
	width: 100%;
	/*font-size: 1.125rem;*/
	font-size: 1.25rem;
	line-height: 2rem;
	padding: .5rem 1rem;
	/*box-shadow: inset 0 0 0 1px #b0b0b0;*/
	border-bottom: 1px solid #8e8e8e;
	color: #fff;
	background: #000;
	resize: none;
	letter-spacing: 1px;
}
.formWrap input[type="text"]:focus,
.formWrap textarea:focus {
	outline: 0;
	/*box-shadow: inset 0 0 0 1px #5e6062;*/
	border-bottom: 1px solid #fff;
}
.formWrap ::placeholder {
	color: #7e7e7e;
	font-size: 1.125rem;
}
.formWrap input[type="submit"],
.formWrap input[type="reset"],
.formWrap input[type="button"],
.formWrap a.btn {
	transition: all .25s ease-in-out;
	background: #000;
	padding: .5rem 3rem;
	border-radius: .5rem;
	cursor: pointer;
	text-decoration: none;
	color: #fffbf7;
	box-shadow: inset 0 0 0 1px #b0b0b0;
	letter-spacing: 1px;
	font-size: 1.125rem;
}
.formWrap input[type="submit"]:hover,
.formWrap input[type="reset"]:hover,
.formWrap input[type="button"]:hover,
.formWrap a.btn:hover {
	background: #8e8e8e;
}
.formWrap .actions {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2rem 0 0;
}
.formWrap .actions li {
	margin: 0 2%;
}
p.error_messe {
	color: #fff;
	background: #de0c0c;
	margin: 0;
	padding: .5rem 1rem;
	/*font-size: 1.125rem;*/
	font-size: 1.25rem;
}
.formTable {
	width: 100%;
	margin: 3rem auto;
	border-top: 1px solid #8e8e8e;
	/*font-size: 1.125rem;*/
	font-size: 1.25rem;
}
.formTable th,
.formTable td {
	border-bottom: 1px solid #8e8e8e;
	padding: 1rem;
	text-align: left;
	word-break: break-all;
}
.formTable th {
	color: #8e8e8e;
	width: 30%;
	font-weight: bold;
}
#sec_contactFlow .inner,
#sec_contactFlow .formWrap {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	padding: 3rem 6rem;
}

/* style
--------------------------------- */
.f_l {
	font-size: 115% !important;
}
.f_s {
	font-size: 90% !important;
}
.f_bold {
	font-weight: bold !important;
}
.f_italic {
	font-style: italic !important;
}
.t_center {
	text-align: center !important;
}
.t_right {
	text-align: right !important;
}
.ind_1 {
	padding-left: 1em;
	text-indent: -1em;
}
.ind_1q {
	padding-left: 1.25em;
	text-indent: -1.25em;
}
.ind_1h {
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.ind_3 {
	padding-left: 3em;
	text-indent: -3em;
}