@charset "utf-8";

*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0;}
ul,ol{list-style:none;padding:0;}
a{color:inherit;text-decoration:inherit;text-decoration-skip-ink:auto;}
img,svg,video,iframe{vertical-align:middle;}
img,video{max-width:100%;}
input,button,textarea,select{font:inherit;}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}
html {
	scroll-behavior: auto;
}
html.hasScrollbar {
	overflow-y: scroll;
}
body {
	color: black;
	font-size: 1em;
	line-height: 2;
	font-family: HelveticaNeue, Roboto, sans-serif;
	font-weight: 400;
	letter-spacing: .1em;
	font-feature-settings: "pkna";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
/* ui Break point */
@media screen and (max-width: 1024px) {
	.v-dt { display: none !important; }
}
@media screen and (min-width: 1025px) {
	.v-mb { display: none !important; }
}
/* font-size Break point */
@media screen and (max-width: 767px) {
	.f-dt { display: none !important; }
	figure img { width: 100%; }
}
@media screen and (min-width: 768px) {
	.f-mb { display: none !important; }
	figure img { max-width: 100%; }
}
.visually-hidden {
	z-index: -1;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}
:root {
	--scroll-bar-posi: 15px;
	--scroll-bar-nega: -15px;
}

/*
	prefix について
	c- コンポーネント（使いまわせる）
	l- レイアウト
	o- 限定的なコンポーネント（使いまわせないが汎用的）
	p- 固有のブロックスタイル
	a- 唯一のスタイル
	no prefix コンポーネント内の要素
 */

.l-header { z-index: 3; }
.l-nav    { z-index: 2; }
.l-main   { z-index: 1; }
.l-footer { z-index: 1; }

.l-space {
	margin: 56px 0;
	padding: 0;
	border: 0;
}
.l-separate {
	margin: 64px -30px 64px 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #000;
}

.is-hide {
	position: absolute !important;
	overflow: hidden !important;
	height: 0 !important;
	clip: rect(0,0,0,0);
}

/**
 * figure spacer & mask
 * ---------------------------------------- */
figure {
	position: relative;
}
figure .spacer {
	position: relative;
	overflow: hidden;
	height: 0;
	background: #eee;
}
figure .mask {
	display: block;
}
figure .mask,
figure .spacer img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
figure .mask {
	left: -1px;
	width: calc(100% + 2px);
	background: #fff;
	transform-origin: center top;
}
.c-bg_gray figure .mask {
	background: #f5f5f5;
}
figure .spacer img {
	object-fit: cover;
}
figure:not(.loaded) .spacer img[data-src] {
	opacity: 0;
}
figure .spacer img[data-src] {
	transform: scale(1.4);
}
figure.loaded .mask {
	transform: scaleY(0);
}
figure.is-anim .spacer img {
	transition: opacity .6s, transform 1.6s cubic-bezier(.04,.4,.1,1);
}
figure.is-anim .mask {
	transition: transform 1s cubic-bezier(.04,.4,.1,1);
}

/**
 * header
 * ---------------------------------------- */
.l-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
.l-header .bg {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 100%;
	background: #fff;
	transform-origin: center top;
}
.l-header svg {
	fill: currentcolor;
}
.l-header.is-menu {
	color: #fff;
}
.l-header.is-menu .bg {
	transform: scaleY(0);
}
.l-header.is-anim {
	transition: color .6s .3s;
}
.l-header.is-anim .bg {
	transition: transform .6s .3s cubic-bezier(.04,.4,.1,1);
}
.l-header.is-anim:not(.is-menu),
.l-header.is-anim:not(.is-menu) .bg {
	transition-delay: .6s;
}
@media screen and (max-width: 1024px) {
	.l-header {
		height: 68px;
		padding: 0 15px;
	}
	.l-header::before {
		border-bottom: 1px solid #eee;
	}
	.l-header.is-anim:not(.is-menu),
	.l-header.is-anim:not(.is-menu) .bg {
		transform-origin: center bottom;
		transition-delay: .6s;
	}
}
@media screen and (min-width: 1025px) {
	.l-header {
		right: 0;
		max-width: 1440px;
		height: 96px;
		padding: 0 40px;
		margin: 0 auto;
	}
	.l-header::before {
		right: calc(50% - 50vw);
		left: calc(50% - 50vw);
	}
	.l-header.is-anim:not(.is-menu) .bg {
		transition-delay: 1s;
	}
}

/* :::::: logo :::::: */
.c-logo {
	font-size: 10px;
	line-height: 1.6;
	text-align: center;
}
@media screen and (min-width: 1025px) {
	.c-logo svg:first-child {
		width: 130px;
	}
	.c-logo svg:last-child {
		width: 87px;
	}
}
@media screen and (min-width: 1200px) {
	.c-logo a {
		display: flex;
		align-items: center;
	}
	.c-logo svg:last-child {
		margin-left: 16px;
	}
}

/* :::::: entry :::::: */
.a-entry {
	flex-basis: 71px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 71px;
	height: 20px;
	border: .5px solid currentcolor;
}
@media screen and (min-width: 1025px) {
	.a-entry {
		flex-basis: 80px;
		width: 80px;
		height: 24px;
		margin-left: 20px;
	}
	.a-entry img {
		width: 40px;
	}
}
@media screen and (min-width: 1200px) {
	.a-entry {
		flex-basis: 96px;
		width: 96px;
	}
}
@media screen and (min-width: 1400px) {
	.a-entry {
		flex-basis: 125px;
		width: 125px;
	}
	.a-entry img {
		width: 48px;
	}
}

/* :::::: hamburger :::::: */
.a-hamburger {
	flex-basis: 71px;
	margin-right: -8px;
	font-size: 10px;
	line-height: 1;
}
.a-hamburger button {
	cursor: pointer;
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	color: inherit;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.a-hamburger button * {
	pointer-events: none;
}
.a-hamburger button:focus {
	outline: 0;
}
.a-hamburger .bar {
	position: absolute;
	top: calc(50% - 12px);
	left: 10px;
	display: inline-block;
	width: 28px;
	height: 9px;
	transition: top .2s cubic-bezier(.04,.4,.1,1), height .2s cubic-bezier(.04,.4,.1,1);
}
.a-hamburger .bar::before,
.a-hamburger .bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	border-top: 1px solid currentcolor;
}
.a-hamburger .bar::before {
	top: 0;
}
.a-hamburger .bar::after {
	bottom: 0;
}
.a-hamburger label {
	display: block;
	overflow: hidden;
	height: 1.2em;
	position: relative;
	margin-top: 16px;
	line-height: 1.2;
}
.a-hamburger label span {
	display: block;
	position: absolute;
	top: 1.2em;
	left: 0;
	width: 100%;
	text-align: center;
}
/* active */
.a-hamburger.is-active .bar {
	top: calc(50% - 7px);
	height: 1px;
}
.a-hamburger.is-active .bar::before {
	transform: rotate(-45deg);
}
.a-hamburger.is-active .bar::after {
	transform: rotate(45deg);
}
.a-hamburger.is-active label {
	transform: translateY(6px);
}
.a-hamburger.is-active label .close,
.a-hamburger:not(.is-active) label .menu {
	transform: translateY(-100%);
}
.a-hamburger.is-anim .bar::before,
.a-hamburger.is-anim .bar::after,
.a-hamburger.is-anim label,
.a-hamburger.is-anim label span {
	transition: transform .3s cubic-bezier(.04,.4,.1,1);
}
.a-hamburger.is-anim:not(.is-active) .bar,
.a-hamburger.is-anim.is-active .bar::before,
.a-hamburger.is-anim.is-active .bar::after,
.a-hamburger.is-anim.is-active label,
.a-hamburger.is-anim.is-active label span {
	transition-delay: .3s;
}
@media screen and (min-width: 1025px) {
	.a-hamburger {
		order: 1;
		flex-basis: 48px;
		margin-left: 16px;
	}
}
@media screen and (min-width: 1200px) {
	.a-hamburger {
		margin-left: 24px;
		font-size: 12px;
	}
	.a-hamburger button {
		width: 56px;
		height: 56px;
	}
	.a-hamburger .bar {
		top: calc(50% - 16px);
		width: 36px;
		height: 12px;
	}
	.a-hamburger label {
		margin-top: 24px;
	}
}

/* :::::: header menu :::::: */
@media screen and (max-width: 1024px) {
	.a-menu { display: none; }
}
@media screen and (min-width: 1025px) {
	.a-menu {
		display: flex;
		flex-wrap: wrap;
		margin-left: auto;
		font-size: 12px;
		font-weight: 700;
	}
	.a-menu a {
		padding: 8px;
		letter-spacing: .05em;
	}
}
@media screen and (min-width: 1200px) {
	.a-menu a {
		padding: 8px 12px;
	}
}
@media screen and (min-width: 1400px) {
	.a-menu {
		font-size: 13px;
	}
	.a-menu a {
		padding: 8px 16px;
		letter-spacing: .1em;
	}
}

/**
 * drawer menu
 * ---------------------------------------- */
.l-nav,
.l-nav .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.l-nav {
	display: flex;
	flex-direction: column;
}
.l-nav .overlay {
	z-index: -1;
	background: #000 url(../img/alpha_noise.png) 0 0 / 250px 250px;
	animation: sandstorm 1s steps(8) infinite;
}
.l-nav .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 68px;
}
.l-nav .list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 920px;
	margin: 120px auto 80px;
	line-height: 0;
	letter-spacing: 0;
}
.l-nav .item {
	font-size: 30px;
	font-weight: 700;
}
.l-nav .item_s {
	font-size: 14px;
}
.l-nav .item:nth-of-type(n+2) {
	margin-top: 16px;
}
.l-nav .item_s:nth-of-type(n+2) {
	margin-top: 8px;
}
.l-nav .item_s.-privacy {
	margin-top: 32px;
}
.l-nav .list a {
	display: block;
	color: #fff;
}
.l-nav .item a {
	padding: 11px 28px;
}
.l-nav .item_s a {
	padding: 8px 28px;
}
.l-nav .list svg {
	overflow: visible;
	width: auto;
	fill: currentcolor;
}
.l-nav .list a:not([href]) svg {
	fill: none;
	stroke: currentcolor;
}
.l-nav .list .ja {
	margin-left: 12px;
	font-size: 10px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: .1em;
	vertical-align: middle;
}
@media screen and (max-width: 767px) {
	.l-nav {
		align-items: flex-start;
	}
	.l-nav .list a:not([href]) svg {
		stroke-width: .5;
	}
	.l-nav .item svg {
		height: 23px;
	}
	.l-nav .item_s svg {
		height: 12px;
	}
}
@media screen and (min-width: 768px) {
	.l-nav {
		align-items: center;
	}
	.l-nav .list {
		margin: 200px 80px 120px 0;
	}
	.l-nav .item {
		font-size: 60px;
	}
	.l-nav .item_s {
		font-size: 24px;
	}
	.l-nav .item:nth-child(n+2) {
		margin-top: 32px;
	}
	.l-nav .item_s:nth-child(n+2) {
		margin-top: 16px;
	}
	.l-nav .item_s.-privacy {
		margin-top: 80px;
	}
	.l-nav .item svg {
		height: 46px;
	}
	.l-nav .item_s svg {
		height: 22px;
	}
	.l-nav .list .ja {
		margin-left: 16px;
		font-size: 12px;
	}
}
@keyframes sandstorm {
	from { background-position: 0 0; }
	to { background-position: 123px 456px; }
}

/* before */
.l-nav:not(.is-active) .overlay {
	transform: translateY(100vh);
}
.l-nav.is-anim:not(.is-active) .overlay {
	transform: translateY(-100%);
}
.l-nav:not(.is-active) li {
	opacity: 0;
	transform: translateY(40px);
}
.l-nav.is-anim:not(.is-active) li {
	transform: translateY(-40px);
}
/* transition */
.l-nav.is-anim .overlay {
	transition: transform .6s cubic-bezier(.04,.4,.1,1);
}
.l-nav.is-anim li {
	transition: opacity .6s, transform .6s cubic-bezier(.04,.4,.1,1);
}
.l-nav.is-anim.is-active li {
	transition-duration: 1s;
}
.l-nav.is-anim:not(.is-active) .overlay {
	transition-delay: .6s;
}
body.is-menu .l-nav.is-active {
	position: relative;
}
/* timing */
.l-nav.is-anim:not(.is-active) .overlay {
	transition-delay: .3s;
}
.l-nav.is-anim:not(.is-active) li {
	transition-duration: .3s, 0s;
	transition-delay: 0s, .3s;
}
.l-nav.is-anim.is-active li:nth-of-type(1)  { transition-delay: .25s; }
.l-nav.is-anim.is-active li:nth-of-type(2)  { transition-delay: .3s; }
.l-nav.is-anim.is-active li:nth-of-type(3)  { transition-delay: .35s; }
.l-nav.is-anim.is-active li:nth-of-type(4)  { transition-delay: .4s; }
.l-nav.is-anim.is-active li:nth-of-type(5)  { transition-delay: .45s; }
.l-nav.is-anim.is-active li:nth-of-type(6)  { transition-delay: .5s; }
.l-nav.is-anim.is-active li:nth-of-type(7)  { transition-delay: .55s; }
.l-nav.is-anim.is-active li:nth-of-type(8)  { transition-delay: .6s; }
.l-nav.is-anim.is-active li:nth-of-type(9)  { transition-delay: .65s; }
.l-nav.is-anim.is-active li:nth-of-type(10) { transition-delay: .7s; }
.l-nav.is-anim.is-active li:nth-of-type(11) { transition-delay: .75s; }
.l-nav.is-anim.is-active li:nth-of-type(12) { transition-delay: .8s; }
.l-nav.is-anim.is-active li:nth-of-type(13) { transition-delay: .85s; }

/**
 * main
 * ---------------------------------------- */
.l-main:not(.is-hide) {
	padding-top: 68px;
}
.l-main.p-home {
	padding-top: 0;
}
@media screen and (min-width: 768px) {
	.l-main:not(.is-hide) {
		padding-top: 240px;
	}
	.l-main.p-home {
		padding-top: 0;
	}
}

/**
 * crumb
 * ---------------------------------------- */
.a-crumb {
	display: flex;
	max-width: 1290px;
	margin: 24px auto 0;
	padding: 0 30px;
	font-size: 11px;
}
.a-crumb a:not([href]) {
	color: #aaa;
}
.a-crumb a:nth-child(n+2)::before {
	content: "";
	display: inline-block;
	width: 16px;
	margin: -.25em 6px 0;
	border-top: 1px solid #000;
	vertical-align: middle;
}

/**
 * NEXT PAGE
 * ---------------------------------------- */
.c-nextpage,
.c-nextpage a {
	display: flex;
	justify-content: center;
	align-items: center;
}
.c-nextpage {
	position: relative;
	height: 280px;
	margin-top: 120px;
	line-height: 1;
	text-align: center;
	background: center / cover no-repeat;
}
.c-nextpage a {
	flex-direction: column;
	width: 200px;
	height: 200px;
	background: #fff;
}
.c-nextpage span {
	display: inline-block;
}
.c-nextpage .h {
	font-size: 10px;
	font-weight: 300;
}
.c-nextpage .title {
	margin-top: 12px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
}
.c-nextpage .c-link {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 300;
}
html:not(.isTouch) .c-nextpage a:hover .c-link {
	background-position: right bottom;
	background-size: 0 1px;
}
.c-nextpage.-vision { background-image: url(../img/next_vision.jpg); }
.c-nextpage.-product { background-image: url(../img/next_product.jpg); }
.c-nextpage.-potential { background-image: url(../img/next_potential.jpg); }
.c-nextpage.-job { background-image: url(../img/next_job.jpg); }
.c-nextpage.-organization { background-image: url(../img/next_organization.jpg); }
.c-nextpage.-team { background-image: url(../img/next_team.jpg); }
.c-nextpage.-member { background-image: url(../img/next_member.jpg); }
.c-nextpage.-culture { background-image: url(../img/next_culture.jpg); }
.c-nextpage.-blog { background-image: url(../img/next_blog.jpg); }
@media screen and (min-width: 768px) {
	.c-nextpage {
		height: 540px;
		margin-top: 200px;
	}
	.c-nextpage a {
		width: 350px;
		height: 350px;
	}
	.c-nextpage .h {
		font-size: 14px;
	}
	.c-nextpage .title {
		margin-top: 16px;
		font-size: 48px;
	}
	.c-nextpage .c-link {
		margin-top: 40px;
		font-size: 18px;
	}
	.c-nextpage.-vision { background-image: url(../img/next_vision_dt.jpg); }
	.c-nextpage.-product { background-image: url(../img/next_product_dt.jpg); }
	.c-nextpage.-potential { background-image: url(../img/next_potential_dt.jpg); }
	.c-nextpage.-job { background-image: url(../img/next_job_dt.jpg); }
	.c-nextpage.-organization { background-image: url(../img/next_organization_dt.jpg); }
	.c-nextpage.-team { background-image: url(../img/next_team_dt.jpg); }
	.c-nextpage.-member { background-image: url(../img/next_member_dt.jpg); }
	.c-nextpage.-culture { background-image: url(../img/next_culture_dt.jpg); }
	.c-nextpage.-blog { background-image: url(../img/next_blog_dt.jpg); }
}

/**
 * footer
 * ---------------------------------------- */
.l-footer {
	position: relative;
	text-align: center;
}
.l-footer:not(.is-hide) {
	padding: 48px;
}
.l-footer .logo {
	line-height: 0;
}
.l-footer .logo img {
	width: 160px;
	height: auto;
}
@media screen and (max-width: 767px) {
	.l-footer {
		background: #fff;
	}
	.contentsinfo {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.l-footer {
		display: flex;
		justify-content: space-between;
		max-width: 1060px;
		margin: 0 auto;
	}
	.l-footer::before {
		content: "";
		z-index: -1;
		position: absolute;
		top: 0;
		right: calc(50% - 50vw);
		left: calc(50% - 50vw);
		height: 100%;
		background: #fff;
	}
	.l-footer:not(.is-hide) {
		padding: 160px 30px;
	}
	.l-footer .logo img {
		width: 200px;
	}
	.a-footer-list {
		margin-top: -8px;
		line-height: 1;
		text-align: left;
	}
	.a-footer-list li {
		background: #fff;
	}
	.a-footer-list.-primary {
		columns: 2;
		column-gap: 40px;
		font-size: 20px;
	}
	.a-footer-list.-secondary {
		margin-top: 24px;
		font-size: 14px;
	}
	.a-footer-list a {
		display: inline-block;
		position: relative;
		padding: .5em;
	}
	.a-footer-list a::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		mix-blend-mode: difference;
		background: linear-gradient(#fff, #fff) 100% 51% / 0 1.2em no-repeat;
		transition: background-size .4s cubic-bezier(0.215, 0.61, 0.355, 1);
		will-change: background;
	}
	.a-footer-list a:not([href])::before,
	html.isTouch .a-footer-list a:active::before,
	html:not(.isTouch) .a-footer-list a:hover::before {
		background-position: 0 51%;
		background-size: 100% 1.2em;
	}
}
@media screen and (min-width: 1024px) {
	.a-footer-list.-primary {
		font-size: 24px;
	}
}

/**
 * javascript
 * -------------------------------------------------- */
.js-scwrap {
	overflow: hidden;
}
.js-holder {
	display: none;
	position: absolute;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}
.js-fixed,
.js-fixed .js-sc-slip {
	backface-visibility: hidden;
	will-change: transform;
}
.js-fixed {
	position: fixed;
	width: 100%;
}