@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%;}
img[height]{height:auto;}
input,button,textarea,select{font:inherit;}
button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;}
small{font-size:inherit;}
sub{vertical-align:baseline;}
/*@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;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}
body {
	overscroll-behavior: auto;
	position: relative;
	color: black;
	font-size: 1.6em;
	line-height: 2;
	font-family: "Roboto", "游ゴシック体 Pr6N B", "Yu Gothic", "YuGothic", sans-serif;
	font-weight: 700;
	letter-spacing: .09em;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body.is-fixed {
	position: fixed;
	width: 100%;
}
@media screen and (min-width: 640px) {
	.v-mb { display: none; }
}
@media screen and (max-width: 639px) {
	.v-dt { display: none; }
}

/**
 * mediaquery について
 * common style (desktop/mobile 共通の style)
 * @media (min-width: 480px) {} mobile には適用したくない style
 * @media (min-width: 640px) {} desktop だけの style
 * @media (max-width: 639px) {} desktop には適用したくない style
 * @media (max-width: 479px) {} mobile だけの style
 * MEMO: 
 * -------------------------------------------------- */
.l-main { z-index: 1; }
.l-footer { z-index: 2; }
.l-menu { z-index: 4; }
.l-fixed { z-index: 5; }

.ico {
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
}
.arr {
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-nejoin: round;
	vertical-align: middle;
}
@media (hover: hover) {
	a .arr {
		stroke-dasharray: 42px 42px;
		transition: stroke-dashoffset .4s cubic-bezier(.3,1,.7,1);)
	}
	a:hover .arr {
		stroke-dashoffset: 84px;
	}
}
.noto {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}

/**
 * header
 * ---------------------------------------- */
.l-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 100%;
	height: 72px;
	padding: 0 20px;
	background: white
}
.l-header .logo {
	z-index: 3;
	position: relative;
	line-height: 0;
}
.l-header .logo img + img {
	margin-left: 12px;
}

.l-fixed {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	box-shadow: 2px 4px 8px rgba(0,0,0,.1);
}
.l-fixed .c-button,
.l-fixed .menu {
	height: 48px;
}
.l-fixed .c-button {
	display: flex;
	/* display: none; Entry (非表示) */
	justify-content: center;
	align-items: center;
	position: relative;
	width: 176px;
	padding: 0 16px;
	color: #c60000;
	background: white;
}
.l-fixed .menu {
	cursor: pointer;
	color: white;
	background: #c60000;
}
@media (hover: hover) {
	.l-fixed .c-button {
		transition: color .4s, background .4s;
	}
	.l-fixed .c-button:hover {
		color: white;
		background: #c60000;
	}
	.l-fixed .c-button:hover .arr {
		transition-delay: .2s;
	}
}
@media screen and (min-width: 640px) {
	.l-fixed .c-button .arr {
		position: absolute;
		top: calc(50% - 4px);
		right: 24px;
	}
	.l-fixed .c-button {
		padding-right: 24px;
	}
}
@media screen and (max-width: 639px) {
	.l-header {
		height: 56px;
	}
	.l-header .logo img {
		width: 200px;
	}
	.l-header .logo img + img {
		display: none;
	}
	.l-fixed .c-button {
		width: 144px;
		padding-right: 8px;
	}
	.l-fixed .c-button .arr {
		margin-left: .5em;
	}
}
@media screen and (max-width: 479px) {
	.l-header .logo img {
		width: 168px;
	}
	.l-fixed .c-button {
		width: 120px;
	}
}
@media screen and (max-width: 374px) {
	.l-header.-home {
		padding: 0 calc(20vw / 3.75);
	}
	.l-header .logo img {
		width: calc(168vw / 3.75);
	}
	.l-fixed .c-button {
		width: calc(120vw / 3.75);
	}
	.l-fixed .menu .ico {
		width: calc(52vw / 3.75);
	}
}
/* motion */
.l-fixed .menu .ico.-close {
	position: absolute;
}
.l-fixed .menu .ico.-close path {
	stroke-dashoffset: 40px;
}
.l-fixed .menu .ico path {
	stroke-dasharray: 40px 40px;
}
.l-fixed .menu.is-anim .ico path {
	transition: stroke-dashoffset .3s cubic-bezier(.3,1,.7,1);
	will-change: stroke-dashoffset;
}
.l-fixed .menu.is-anim.is-active .ico.-close path {
	transition-duration: .45s;
}
.l-fixed .menu.is-anim .ico .l1 { transition-delay: .15s; }
.l-fixed .menu.is-anim .ico .l2 { transition-delay: .2s; }
.l-fixed .menu.is-anim .ico .l3 { transition-delay: .25s; }
.l-fixed .menu.is-anim .ico .l4 { transition-delay: 0s; }
.l-fixed .menu.is-anim .ico .l5 { transition-delay: .05s; }

.l-fixed .menu.is-anim.is-active .ico .l1 { transition-delay: 0s; }
.l-fixed .menu.is-anim.is-active .ico .l2 { transition-delay: .05s; }
.l-fixed .menu.is-anim.is-active .ico .l3 { transition-delay: .1s; }
.l-fixed .menu.is-anim.is-active .ico .l4 { transition-delay: .2s; }
.l-fixed .menu.is-anim.is-active .ico .l5 { transition-delay: .25s; }

.l-fixed .menu:not(.is-anim).is-hov .ico.-open path {
	animation: menuHov .6s cubic-bezier(.3,1,.7,1);
}
.l-fixed .menu.is-active .ico.-open path {
	stroke-dashoffset: -40px;
}
.l-fixed .menu.is-active .ico.-close path {
	stroke-dashoffset: 0;
}
@keyframes menuHov {
	from { stroke-dashoffset: -80px; }
	to { stroke-dashoffset: 0; }
}


/**
 * main
 * ---------------------------------------- */
.l-main {
	overflow: hidden;
}

/* menu */
.menu_list {
	line-height: 1.4;
}
.menu_list a,
.menu_list span {
	display: inline-block;
}
.menu_item {
	text-align: left;
}
.menu_links {
	letter-spacing: .03em;
}
.menu_links .num {
	position: relative;
	margin-right: .3em;
	font-weight: 500;
	letter-spacing: 0;
}
@media screen and (min-width: 480px) {
	.menu_list a,
	.menu_list span {
		white-space: nowrap;
	}
}


/**
 * footer
 * ---------------------------------------- */
.l-footer {
	position: relative;
	padding: 88px 20px 24px;
	color: #646464;
	text-align: center;
	background: #f0f0f0;
}
@media screen and (max-width: 639px) {
	.l-footer {
		padding-top: 48px;
	}
	.l-footer .logo {
		width: 224px;
		margin: 0 auto;
	}
}
/* menu */
.l-footer .menu_list {
	margin-top: 40px;
	color: #787878;
	font-size: 14px;
}
.l-footer .menu_links {
	font-size: 12px;
}
.l-footer .menu_links .num {
	font-size: 10px;
}
.l-footer .menu_list a[aria-current="page"] {
	color: #c00;
	pointer-events: none;
}
@media (hover: hover) {
	.l-footer .menu_list a {
		transition: color .2s;
	}
	.l-footer .menu_list a:hover {
		color: #c00;
	}
}
@media screen and (min-width: 640px) {
	.l-footer .menu_list {
		display: flex;
		justify-content: center;
	}
	.l-footer .menu_item {
		flex-basis: 12em;
	}
	.l-footer .menu_item.-top {
		flex-basis: 10em;
	}
	.l-footer .menu_item.-works,
	.l-footer .menu_item.-career {
		flex-basis: 11em;
	}
	.l-footer .menu_item.-recruit {
		flex-basis: 5em;
	}
	.l-footer .menu_item > * {
		padding: .5em 0;
	}
	.l-footer .menu_links li {
		margin-top: .6em;
	}
	.l-footer .menu_links li:nth-child(n+2) {
		margin-top: 1em;
	}
}
@media screen and (max-width: 639px) {
	.l-footer .menu_list {
		display: inline-block;
	}
	.l-footer .menu_item {
		page-break-inside: avoid;
		flex-basis: auto;
		margin-top: 1em;
	}
	.l-footer .menu_item br {
		display: none;
	}
	.l-footer .menu_links {
		margin-top: .3em;
		padding-left: 1em;
	}
	.l-footer .menu_links a {
		padding: .3em 0;
	}
}
/* pagetop */
.l-footer .pagetop {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 32px;
	right: 40px;
	font-size: 14px;
}
@media (hover: hover) {
	.l-footer .pagetop {
		transition: color .2s;
	}
	.l-footer .pagetop .arr {
		stroke-dasharray: 84px 84px;
		transition: stroke-dashoffset .6s cubic-bezier(.3,1,.7,1);
	}
	.l-footer .pagetop:hover {
		color: #c00;
	}
	.l-footer .pagetop:hover .arr {
		stroke-dashoffset: -168px;
	}
}
@media screen and (max-width: 639px) {
	.l-footer .pagetop {
		top: 20px;
		right: 20px;
		font-size: 12px;
	}
}
/* copyright */
.l-footer .copyright {
	margin-top: 80px;
	color: #5f5755;
	font-size: 10px;
	line-height: 1.2;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
}
@media screen and (max-width: 639px) {
	.l-footer .copyright {
		margin-top: 48px;
	}
}


/**
 * nav
 * ---------------------------------------- */
.l-menu,
.l-menu .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.l-menu {
	display: flex;
	justify-content: center;
	overflow: auto;
}
.l-menu .overlay {
	background: #c00;
}
.l-menu .close {
	position: absolute;
	top: 24px;
	right: 24px;
}
.l-menu .container {
	position: relative;
	padding-left: 20px;
}
.l-menu .menu_list {
	padding: 40px 0 64px;
	color: white;
	font-size: 30px;
}
.l-menu .menu_item {
	margin-top: .7em;
}
.l-menu .menu_item br {
	display: none;
}
.l-menu .menu_item .p {
	display: inline-block;
}
.l-menu .menu_item > a,
.l-menu .menu_item > span {
	font-weight: 500;
}
.l-menu .menu_links {
	padding-left: 1.8em;
	font-size: 16px;
}
.l-menu .menu_links li {
	margin-top: .8em;
}
.l-menu .menu_links li {
	position: relative;
}
.l-menu .menu_links > li::before {
	content: "";
	position: absolute;
	top: .7em;
	left: -1.8em;
	width: 1.2em;
	margin-right: .3em;
	vertical-align: middle;
	border-top: 1px solid currentcolor;
}
.l-menu .menu_links .num {
	top: -.1em;
	font-size: 14px;
	vertical-align: middle;
}
@media screen and (min-width: 640px) {
	.l-menu .menu_list {
		columns: 2;
		font-size: 35px;
	}
	.l-menu .menu_item {
		page-break-inside: avoid;
		max-width: 8em;
	}
	.l-menu .menu_item.-top,
	.l-menu .menu_item.-interview {
		margin-top: 0;
	}
	.l-menu .menu_item.-interview,
	.l-menu .menu_item.-career,
	.l-menu .menu_item.-recruit {
		padding-left: 1em;
	}
	.l-menu .-project .menu_links {
		min-width: 22em;
	}
}
@media screen and (min-width: 640px) and (min-height: 601px) {
	.l-menu {
		align-items: center;
	}
}
@media screen and (max-width: 639px) {
	.l-menu .menu_list {
		padding: 64px 0 40px;
	}
	.l-menu .menu_item.-interview {
		margin-top: .7em;
	}
	.l-menu .menu_links {
		padding-left: 2.4em;
	}
	.l-menu .menu_links > li::before {
		left: -1.5em;
		width: 1em;
	}
}
@media screen and (max-width: 479px) {
	.l-menu .menu_links a {
		padding-left: 1.8em;
		text-indent: -1.8em;
	}
	.l-menu .menu_links a * {
		text-indent: 0;
	}
}
@media screen and (max-width: 360px) {
	.l-menu .menu_list {
		font-size: 24px;
	}
	.l-menu .menu_links {
		font-size: 14px;
	}
	.l-menu .menu_links .num {
		font-size: 12px;
	}
}
/* effect */
.l-menu:not(.is-active) {
	overflow: hidden;
	pointer-events: none;
}
.l-menu:not(.is-active) .overlay,
.l-menu:not(.is-active) .close,
.l-menu:not(.is-active) .container {
	opacity: 0;
}
.l-menu:not(.is-active) .close {
	transform: scale(.5);
}
.l-menu:not(.is-active) .container {
	transform: translateY(-24px);
}
.l-menu.is-anim:not(.is-active) .container {
	transform: translateY(24px);
}
.l-menu.is-anim .overlay,
.l-menu.is-anim .close,
.l-menu.is-anim .container {
	transition: opacity .6s, transform .6s cubic-bezier(.3,1,.7,1);
}
.l-menu.is-anim.is-active .close { transition-delay: .2s; }
.l-menu.is-anim.is-active .container { transition-delay: .1s; }
.l-menu.is-anim:not(.is-active) .close,
.l-menu.is-anim:not(.is-active) .container { transition-duration: .3s; }


/**
 * component
 * -------------------------------------------------- */
.c-symboloop {
	position: absolute;
	right: calc(50% - 50vw);
	bottom: 96px;
	left: calc(50% - 50vw);
	text-align: center;
}
.c-symboloop .icon {
	display: flex;
	animation: symboloop 60s linear infinite;
}
.c-symboloop .icon > * {
	flex-basis: calc(100% / 8);
	min-width: 128px;
	height: 64px;
	fill: #ad0000;
}
.c-symboloop .icon svg {
	width: 64px;
}
@media screen and (max-width: 639px) {
	.c-symboloop .icon > * {
		min-width: 64px;
		height: 48px;
	}
	.c-symboloop .icon svg {
		width: 48px;
	}
}
@keyframes symboloop {
	to { transform: translate(-50%); }
}

/* linejapan */
.c-linejapan {
	position: relative;
	width: 234px;
	height: 256px;
}
.c-linejapan svg {
	overflow: visible;
	position: absolute;
	height: auto;
	fill: none;
	stroke: #c00;
}
.c-linejapan svg {
	height: auto;
	fill: none;
	stroke: #c00;
}
.c-linejapan .line_j {
	width: 100%;
}
.c-linejapan .line_v {
	top: 25%;
	left: 130%;
	width: 5px;
	height: 148%;
}
.c-linejapan .line_h {
	top: 140%;
	left: -82%;
	width: 222%;
	height: 5px;
}
.c-linejapan .-c1 {
	top: calc(75% - 5%);
	left: calc(68% - 5%);
	width: 9.8%;
}
.c-linejapan .-c2 {
	top: calc(75% - 26%);
	left: calc(68% - 26%);
	width: 53.8%;
}
.c-linejapan .-c3 {
	top: calc(75% - 3.9%);
	left: calc(68% - 3.9%);
	width: 7.7%;
}
.c-linejapan .-c4 {
	top: calc(75% - 17%);
	left: calc(68% - 17%);
	width: 33.8%;
}
.c-linejapan .-c5 {
	top: calc(75% - 15%);
	left: calc(68% - 15%);
	width: 30%;
}
.c-linejapan .-c6  {
	top: calc(75% - 36%);
	left: calc(68% - 36%);
	width: 72%;
}
.c-linejapan .-c1 {
	transform: scale(1) translate(-330%, -348%);
}
.c-linejapan .-c2 {
	transform: scale(1) translate(-114%, -133%);
}
.c-linejapan .-c3 {
	transform: scale(1) translate(460%, -22%);
}
.c-linejapan .-c4 {
	transform: scale(1) translate(200%, -40%);
}
.c-linejapan .-c5 {
	transform: scale(1) translate(-186%, 130%);
}
.c-linejapan .-c6  {
	transform: scale(1) translate(-126%, 86%);
}
/* inview */
.c-linejapan polyline,
.c-linejapan polygon,
.c-linejapan line,
.c-linejapan path{stroke-dashoffset:0}
.c-linejapan .h{stroke-dasharray:520px 520px}
.c-linejapan .v{stroke-dasharray:380px 380px}
.c-linejapan .j1{stroke-dasharray:157px 157px}
.c-linejapan .j2{stroke-dasharray:124px 124px}
.c-linejapan .j3{stroke-dasharray:302px 302px}
.c-linejapan .j4{stroke-dasharray:272px 272px}
.c-linejapan .j5{stroke-dasharray:65px 65px}
.c-linejapan .j6{stroke-dasharray:104px 104px}
.c-linejapan .j7{stroke-dasharray:70px 70px}
.c-linejapan .j8{stroke-dasharray:190px 190px}

.c-linejapan.js-inview:not(.is-inview) .h{stroke-dashoffset:-520px}
.c-linejapan.js-inview:not(.is-inview) .v{stroke-dashoffset:380px}
.c-linejapan.js-inview:not(.is-inview) .j1{stroke-dashoffset:-157px}
.c-linejapan.js-inview:not(.is-inview) .j2{stroke-dashoffset:-124px}
.c-linejapan.js-inview:not(.is-inview) .j3{stroke-dashoffset:-302px}
.c-linejapan.js-inview:not(.is-inview) .j4{stroke-dashoffset:-272px}
.c-linejapan.js-inview:not(.is-inview) .j5{stroke-dashoffset:65px}
.c-linejapan.js-inview:not(.is-inview) .j6{stroke-dashoffset:-104px}
.c-linejapan.js-inview:not(.is-inview) .j7{stroke-dashoffset:-70px}
.c-linejapan.js-inview:not(.is-inview) .j8{stroke-dashoffset:-190px}
.c-linejapan.js-inview:not(.is-inview) .line_c {
	opacity: 0;
}
.c-linejapan.js-inview:not(.is-inview) .-c1 { transform: scale(.6) translate(-330%, -348%); }
.c-linejapan.js-inview:not(.is-inview) .-c2 { transform: scale(.6) translate(-114%, -133%); }
.c-linejapan.js-inview:not(.is-inview) .-c3 { transform: scale(.6) translate(460%, -22%); }
.c-linejapan.js-inview:not(.is-inview) .-c4 { transform: scale(.6) translate(200%, -40%); }
.c-linejapan.js-inview:not(.is-inview) .-c5 { transform: scale(.6) translate(-186%, 130%); }
.c-linejapan.js-inview:not(.is-inview) .-c6  { transform: scale(.6) translate(-126%, 86%); }

.c-linejapan.is-anim .line_c {
	transition: opacity .6s, transform .6s cubic-bezier(.3,1.2,.7,1);
	backface-visibility: hidden;
	will-change: transform;
}
.c-linejapan.is-anim polyline,
.c-linejapan.is-anim polygon,
.c-linejapan.is-anim line,
.c-linejapan.is-anim path {
	transition: stroke-dashoffset 1s cubic-bezier(.7,0,.3,1);
}
.c-linejapan.is-anim .h{transition-delay:.2s}
.c-linejapan.is-anim .v{transition-delay:.4s}
.c-linejapan.is-anim .j3{transition-delay:.6s}
.c-linejapan.is-anim .j4{transition-delay:.7s}
.c-linejapan.is-anim .j5{transition-delay:.8s}
.c-linejapan.is-anim .j6{transition-delay:.9s}
.c-linejapan.is-anim .j8{transition-delay:1s}
.c-linejapan.is-anim .j2{transition-delay:1.1s}
.c-linejapan.is-anim .j1{transition-delay:1.2s}
.c-linejapan.is-anim .j7{transition-delay:1.3s}
.c-linejapan.is-anim .-c6{transition-delay:1.1s}
.c-linejapan.is-anim .-c2{transition-delay:1.2s}
.c-linejapan.is-anim .-c4{transition-delay:1.3s}
.c-linejapan.is-anim .-c5{transition-delay:1.3s}
.c-linejapan.is-anim .-c3{transition-delay:1.4s}
.c-linejapan.is-anim .-c1{transition-delay:1.5s}


/**
 * svg
 * -------------------------------------------------- */
.visuallyhidden {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}

.l-deco {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.l-deco > *,
.deco_circle,
.deco_dots,
.deco_rect {
	position: absolute;
}
.deco_circle,
.deco_dots,
.deco_rect {
	z-index: -1;
}
.deco_circle,
.deco_dots {
	height: auto;
	fill: #c00;
}
.deco_rect {
	background: #c00;
}


/*.l-loading {
	z-index: 10;
	position: fixed;
	inset: 0;
	background: white;
}
.l-loading.is-fade {
	opacity: 0;
	transition: opacity .1s cubic-bezier(.3,1,.7,1);
	pointer-events: none;
}*/


/**
 * javascript
 * -------------------------------------------------- */
.js-sc-slip {
	backface-visibility: hidden;
	will-change: transform;
}

.js-timer {
	z-index: 1;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #c00;
	transform-origin: left center;
}
.js-timer.is-progress {
	animation: progress 6s linear;
	transform: scaleX(1);
}
.js-timer.is-ready {
	transition: transform .5s cubic-bezier(.3,1,.7,1);
	transform: scaleX(0);
}
@keyframes progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* inview
.js-inview:not(.is-inview) {
	opacity: 0;
	transform: translateY(24px);
}
.js-inview.is-anim {
	transition: opacity .6s, transform .6s cubic-bezier(.3,1,.7,1);
} */

/* lazy */
img[data-src]:not(.is-loaded) {
	opacity: 0;
}
img.is-anim {
	transition: opacity .2s;
}