@charset "utf-8";

/**
 * キービジュアル
 * -------------------------------------------------- */
.c-home-visual {
	position: relative;
	overflow: hidden;
	background: #fff;
}
.visual-title {
	position: absolute;
}
.visual-title img,
.visual-title svg {
	width: 100%;
}
.visual-title svg {
	fill: none;
	stroke: #f26161;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.visual-title span {
	display: block;
	position: absolute;
}
.visual-scroll {
	z-index: 20;
	position: absolute;
	bottom: 0;
	left: 50%;
}
.visual-scroll img {
	max-width: 100%;
}
@media screen and (max-width: 767px) {
	.c-home-visual,
	.visual-persons {
		height: calc(700vw / 3.75);
	}
	.c-home-visual .bg-text {
		bottom: calc(460vw / 3.75);
		padding-right: calc(40vw / 3.75);
		padding-left: calc(40vw / 3.75);
	}
	.visual-title {
		top: calc(94vw / 3.75);
		left: 50%;
		width: calc(354vw / 3.75);
		height: calc(60vw / 3.75);
		margin-left: calc(-177vw / 3.75);
	}
	.visual-title .text {
		width: calc(354vw / 3.75);
	}
	.visual-title .sub {
		top: calc(46vw / 3.75);
		left: 50%;
		width: calc(110vw / 3.75);
		margin-left: calc(-55vw / 3.75);
	}
	.visual-title .shadow {
		width: calc(354vw / 3.75);
		margin-top: calc(2vw / 3.75);
		margin-left: calc(2vw / 3.75);
	}
	.visual-scroll {
		display: none;
		width: calc(52vw / 3.75);
		margin-left: calc(-26vw / 3.75);
	}
}
@media print, screen and (min-width: 768px) {
	.c-home-visual,
	.visual-persons {
		height: calc(800vw / 13.66);
	}
	.visual-title {
		top: calc(120vw / 13.66);
		left: 50%;
		width: calc(912vw / 13.66);
		height: calc(147vw / 13.66);
		margin-left: calc(-456vw / 13.66);
	}
	.visual-title .text {
		width: calc(912vw / 13.66);
	}
	.visual-title .sub {
		top: calc(116vw / 13.66);
		left: 50%;
		width: calc(194vw / 13.66);
		margin-left: calc(-97vw / 13.66);
	}
	.visual-title .sub .wrap {
		position: relative;
		height: 0;
		padding-bottom: calc(118% / 2.35);
	}
	.visual-title .sub svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.visual-title .shadow {
		width: calc(911vw / 13.66);
		margin-top: calc(5vw / 13.66);
		margin-left: calc(5vw / 13.66);
	}
	.visual-scroll {
		width: 90px;
		margin-left: -45px;
	}
}

/**
 * タイトル
 * -------------------------------------------------- */
.c-home-visual.js-inview .visual-title > span {
	transition: opacity 1s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: 1.5s;
}
.c-home-visual.js-inview .visual-title .main {
	transition-delay: 1.6s;
}
.c-home-visual.js-inview .visual-title .sub {
	transition-delay: 1.7s;
}
.c-home-visual.js-inview .visual-title .shadow {
	transition: transform .5s 1.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-home-visual.js-inview .visual-title .sub path {
	transition: stroke-dashoffset .5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-home-visual.js-inview .visual-scroll {
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: 2s;
}

.c-home-visual.js-inview:not(.in-view) .visual-title > span {
	opacity: 0;
	transform: translateY(-24px);
}
.c-home-visual.js-inview:not(.in-view) .visual-title .shadow {
	transform: translateY(calc(-5vw / 13.66)) translateX(calc(-5vw / 13.66));
}
.c-home-visual.js-inview:not(.in-view) .visual-scroll {
	opacity: 0;
	transform: translateY(-24px);
}

@media print, screen and (min-width: 768px) {
	.c-home-visual.js-inview .visual-title .sub .t1 {
		stroke-dasharray: 456;
		stroke-dashoffset: -456;
	}
	.c-home-visual.js-inview .visual-title .sub .t2 {
		stroke-dasharray: 60;
		stroke-dashoffset: -60;
	}
	.c-home-visual.js-inview .visual-title .sub .t3 {
		stroke-dasharray: 49;
		stroke-dashoffset: -49;
	}
	.c-home-visual.js-inview .visual-title .sub .t4 {
		stroke-dasharray: 122;
		stroke-dashoffset: -122;
	}
	.c-home-visual.js-inview .visual-title .sub .t5 {
		stroke-dasharray: 65;
		stroke-dashoffset: -65;
	}
	.c-home-visual.js-inview .visual-title .sub .t6 {
		stroke-dasharray: 60;
		stroke-dashoffset: -60;
	}
	.c-home-visual.js-inview .visual-title .sub .t7 {
		stroke-dasharray: 54;
		stroke-dashoffset: -54;
	}
	.c-home-visual.js-inview.in-view .visual-title .sub path {
		stroke-dashoffset: 0;
	}
	.c-home-visual.js-inview .visual-title .sub .t1 { transition-delay: 2.1s; transition-duration: .6s; }
	.c-home-visual.js-inview .visual-title .sub .t2 { transition-delay: 2.4s; transition-duration: .5s; }
	.c-home-visual.js-inview .visual-title .sub .t3 { transition-delay: 2.5s; transition-duration: .4s; }
	.c-home-visual.js-inview .visual-title .sub .t4 { transition-delay: 2.6s; transition-duration: .4s; }
	.c-home-visual.js-inview .visual-title .sub .t5 { transition-delay: 2.7s; transition-duration: .3s; }
	.c-home-visual.js-inview .visual-title .sub .t6 { transition-delay: 2.8s; transition-duration: .5s; }
	.c-home-visual.js-inview .visual-title .sub .t7 { transition-delay: 2.9s; transition-duration: .5s; }
	.c-home-visual.js-inview .visual-scroll {
		transition-delay: 3.2s;
	}
}

/**
 * ステッカーズ
 * -------------------------------------------------- */
.visual-objects {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.object {
	user-select: none;
	position: absolute;
}
.visual-objects img {
	pointer-events: none;
	transform-origin: center bottom;
}

.visual-objects:not(.loaded) .object {
	opacity: 0;
	transform: translateY(-20vw);
}
.visual-objects.loaded .object {
	--delay: .06s;
	transition: opacity .6s, transform .8s cubic-bezier(.29,1.32,.65,.99);
}
.visual-objects.loaded .object[data-num="1"]  { transition-delay: calc(var(--delay) * 1); }
.visual-objects.loaded .object[data-num="2"]  { transition-delay: calc(var(--delay) * 2); }
.visual-objects.loaded .object[data-num="3"]  { transition-delay: calc(var(--delay) * 3); }
.visual-objects.loaded .object[data-num="4"]  { transition-delay: calc(var(--delay) * 4); }
.visual-objects.loaded .object[data-num="5"]  { transition-delay: calc(var(--delay) * 5); }
.visual-objects.loaded .object[data-num="6"]  { transition-delay: calc(var(--delay) * 6); }
.visual-objects.loaded .object[data-num="7"]  { transition-delay: calc(var(--delay) * 7); }
.visual-objects.loaded .object[data-num="8"]  { transition-delay: calc(var(--delay) * 8); }
.visual-objects.loaded .object[data-num="9"]  { transition-delay: calc(var(--delay) * 9); }
.visual-objects.loaded .object[data-num="10"] { transition-delay: calc(var(--delay) * 10); }
.visual-objects.loaded .object[data-num="11"] { transition-delay: calc(var(--delay) * 11); }
.visual-objects.loaded .object[data-num="12"] { transition-delay: calc(var(--delay) * 12); }
.visual-objects.loaded .object[data-num="13"] { transition-delay: calc(var(--delay) * 13); }
.visual-objects.loaded .object[data-num="14"] { transition-delay: calc(var(--delay) * 14); }
.visual-objects.loaded .object[data-num="15"] { transition-delay: calc(var(--delay) * 15); }
.visual-objects.loaded .object[data-num="16"] { transition-delay: calc(var(--delay) * 16); }
.visual-objects.loaded .object[data-num="17"] { transition-delay: calc(var(--delay) * 17); }
.visual-objects.loaded .object[data-num="18"] { transition-delay: calc(var(--delay) * 18); }
.visual-objects.loaded .object[data-num="19"] { transition-delay: calc(var(--delay) * 19); }
.visual-objects.loaded .object[data-num="20"] { transition-delay: calc(var(--delay) * 20); }

.visual-objects.shake img {
	--delay: .03s;
	animation: shake .6s;
}
.visual-objects.shake .object[data-num="1"] img  { animation-delay: calc(var(--delay) * 1); }
.visual-objects.shake .object[data-num="2"] img  { animation-delay: calc(var(--delay) * 2); }
.visual-objects.shake .object[data-num="3"] img  { animation-delay: calc(var(--delay) * 3); }
.visual-objects.shake .object[data-num="4"] img  { animation-delay: calc(var(--delay) * 4); }
.visual-objects.shake .object[data-num="5"] img  { animation-delay: calc(var(--delay) * 5); }
.visual-objects.shake .object[data-num="6"] img  { animation-delay: calc(var(--delay) * 6); }
.visual-objects.shake .object[data-num="7"] img  { animation-delay: calc(var(--delay) * 7); }
.visual-objects.shake .object[data-num="8"] img  { animation-delay: calc(var(--delay) * 8); }
.visual-objects.shake .object[data-num="9"] img  { animation-delay: calc(var(--delay) * 9); }
.visual-objects.shake .object[data-num="10"] img { animation-delay: calc(var(--delay) * 10); }
.visual-objects.shake .object[data-num="11"] img { animation-delay: calc(var(--delay) * 11); }
.visual-objects.shake .object[data-num="12"] img { animation-delay: calc(var(--delay) * 12); }
.visual-objects.shake .object[data-num="13"] img { animation-delay: calc(var(--delay) * 13); }
.visual-objects.shake .object[data-num="14"] img { animation-delay: calc(var(--delay) * 14); }
.visual-objects.shake .object[data-num="15"] img { animation-delay: calc(var(--delay) * 15); }
.visual-objects.shake .object[data-num="16"] img { animation-delay: calc(var(--delay) * 16); }
.visual-objects.shake .object[data-num="17"] img { animation-delay: calc(var(--delay) * 17); }
.visual-objects.shake .object[data-num="18"] img { animation-delay: calc(var(--delay) * 18); }
.visual-objects.shake .object[data-num="19"] img { animation-delay: calc(var(--delay) * 19); }
.visual-objects.shake .object[data-num="20"] img { animation-delay: calc(var(--delay) * 20); }
@keyframes shake {
	0% { transform: none; }
	20% { transform: translate(-4px, 4px); }
	40% { transform: translate(2px, -3px); }
	60% { transform: translate(-3px, 1px); }
	80% { transform: translate(1px, -1px); }
	100% { transform: none; }
}

@media screen and (max-width: 767px) {
	.object.-pm         { z-index: 20;  transform: rotate(-30deg); }
	.object.-marketing  { z-index: 19; transform: rotate(-4deg); }
	.object.-corporate  { z-index: 18; transform: rotate(4deg); }
	.object.-business   { z-index: 17; transform: rotate(-15deg); }
	
	.object.-qa         { z-index: 0;  transform: rotate(10deg); }
	.object.-uxd        { z-index: 2;  transform: rotate(34deg); }
	.object.-uid        { z-index: 3;  transform: rotate(20deg); }
	.object.-ae         { z-index: 4; transform: rotate(16deg); }
	.object.-tse        { z-index: 5;  transform: rotate(-18deg); }
	.object.-ie         { z-index: 6;  transform: rotate(-40deg); }
	.object.-analyst    { z-index: 7;  transform: rotate(30deg); }
	.object.-we         { z-index: 8;  transform: rotate(-70deg); }
	.object.-designer   { z-index: 9;  transform: rotate(25deg); }
	.object.-compliance { z-index: 10;  transform: rotate(30deg); }
	.object.-engineer   { z-index: 11; transform: rotate(-45deg); }
	.object.-pe         { z-index: 12; transform: rotate(20deg); }
	.object.-gd         { z-index: 13; transform: rotate(10deg); }
	.object.-dae        { z-index: 14;  transform: rotate(-40deg); }
	
	.object.-ae         { bottom: calc(-4vw / 3.75); left: 21%; width: calc(153vw / 3.75); }
	.object.-analyst    { bottom: calc(70vw / 3.75); left: 20%; width: calc(109vw / 3.75); }
	.object.-business   { bottom: calc(182vw / 3.75); left: 14%;    width: calc(120vw / 3.75); }
	.object.-compliance { bottom: calc(4vw / 3.75); right: -10%; width: calc(127vw / 3.75); }
	.object.-corporate  { bottom: calc(305vw / 3.75); left: 0%; width: calc(168vw / 3.75); }
	.object.-dae        { bottom: calc(134vw / 3.75); right: 26%; width: calc(93vw / 3.75); }
	.object.-designer   { bottom: calc(240vw / 3.75); right: -8%; width: calc(100vw / 3.75); }
	.object.-engineer   { bottom: calc(400vw / 3.75); right: 4%; width: calc(260vw / 3.75); }
	.object.-gd         { bottom: calc(248vw / 3.75); left: 8%; width: calc(170vw / 3.75); }
	.object.-ie         { bottom: calc(-6vw / 3.75); left: -3%; width: calc(101vw / 3.75); }
	.object.-marketing  { bottom: calc(95vw / 3.75); right: 12%; width: calc(150vw / 3.75); }
	.object.-pe         { bottom: calc(315vw / 3.75); right: 20%; width: calc(120vw / 3.75); }
	.object.-pm         { bottom: calc(240vw / 3.75); right: 17%; width: calc(100vw / 3.75); }
	.object.-qa         { bottom: calc(349vw / 3.75); right: -4%; width: calc(120vw / 3.75); }
	.object.-tse        { bottom: calc(-5vw / 3.75); right: 5%; width: calc(148vw / 3.75); }
	.object.-uid        { bottom: calc(135vw / 3.75); right: -3%; width: calc(113vw / 3.75); }
	.object.-uxd        { bottom: calc(378vw / 3.75); left: 5%; width: calc(143vw / 3.75); }
	.object.-we         { bottom: calc(125vw / 3.75); left: -7%; width: calc(147vw / 3.75); }
}
@media print, screen and (min-width: 768px) {
	.object.-pm         { z-index: 20; transform: rotate(-32deg); }
	.object.-marketing  { z-index: 19;  transform: rotate(-20deg); }
	.object.-corporate  { z-index: 18;  transform: rotate(-8deg); }
	.object.-business   { z-index: 17; transform: rotate(12deg); }
	
	.object.-qa         { z-index: 0;  transform: rotate(10deg); }
	.object.-uxd        { z-index: 2;  transform: rotate(30deg); }
	.object.-uid        { z-index: 3;  transform: rotate(18deg); }
	.object.-tse        { z-index: 4;  transform: rotate(-22deg); }
	.object.-ae         { z-index: 5;  transform: rotate(4deg); }
	.object.-we         { z-index: 6; transform: rotate(30deg); }
	.object.-analyst    { z-index: 7;  transform: rotate(45deg); }
	.object.-designer   { z-index: 8;  transform: rotate(26deg); }
	.object.-compliance { z-index: 9; transform: rotate(30deg); }
	.object.-engineer   { z-index: 10; transform: rotate(-15deg); }
	.object.-ie         { z-index: 11; transform: rotate(-45deg); }
	.object.-pe         { z-index: 12; transform: rotate(16deg); }
	.object.-gd         { z-index: 13;  transform: rotate(25deg); }
	.object.-dae        { z-index: 14; transform: rotate(-40deg); }
	
	.object.-ae         { bottom: calc(170vw / 13.66); right: -3%;   width: calc(275vw / 13.66); }
	.object.-analyst    { bottom: calc(265vw / 13.66); right: 21%;   width: calc(200vw / 13.66); }
	.object.-business   { bottom: calc(250vw / 13.66); right: 6%;    width: calc(210vw / 13.66); }
	.object.-compliance { bottom: calc(-6vw / 13.66);  left: 34%;    width: calc(216vw / 13.66); }
	.object.-corporate  { bottom: calc(140vw / 13.66); left: -1.5%;  width: calc(280vw / 13.66); }
	.object.-dae        { bottom: calc(344vw / 13.66); right: 4%;    width: calc(170vw / 13.66); }
	.object.-designer   { bottom: calc(335vw / 13.66); left: 4.5%;   width: calc(180vw / 13.66); }
	.object.-engineer   { bottom: calc(405vw / 13.66); left: 44%;    width: calc(417vw / 13.66); }
	.object.-gd         { bottom: calc(220vw / 13.66); left: -2%;    width: calc(300vw / 13.66); }
	.object.-ie         { bottom: calc(-25vw / 13.66); left: 19%;    width: calc(180vw / 13.66); }
	.object.-marketing  { bottom: calc(174vw / 13.66); right: 23.5%; width: calc(260vw / 13.66); }
	.object.-pe         { bottom: calc(140vw / 13.66); left: 21.5%;  width: calc(210vw / 13.66); }
	.object.-pm         { bottom: calc(240vw / 13.66); left: 40%;    width: calc(160vw / 13.66); }
	.object.-qa         { bottom: calc(-10vw / 13.66); right: -2%;   width: calc(214vw / 13.66); }
	.object.-tse        { bottom: 0;                   right: 12%;   width: calc(260vw / 13.66); }
	.object.-uid        { bottom: calc(-13vw / 13.66); right: 30%;   width: calc(230vw / 13.66); }
	.object.-uxd        { bottom: calc(350vw / 13.66); left: 20%;    width: calc(250vw / 13.66); }
	.object.-we         { bottom: calc(-36vw / 13.66); left: 0;      width: calc(230vw / 13.66); }
}

/**
 * メンバーズ
 * -------------------------------------------------- */
.visual-persons {
	pointer-events: none;
	z-index: 15;
	position: relative;
	margin: 0 auto;
}
.person:not(.active),
.person.remove {
	opacity: 0;
}
.person.anima {
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.person img {
	max-width: 100%;
}
@media screen and (max-width: 767px) {
	.person {
		position: absolute;
		bottom: calc(32vw / 3.75);
		left: 50%;
	}
	.person:not(.active) {
		transform: translateY(-40px);
	}
	.person.remove {
		transform: translateY(40px);
	}
	.person.-p1 {
		width: calc(185vw / 3.75);
		margin-left: calc(-92vw / 3.75);
	}
	.person.-p2 {
		width: calc(128vw / 3.75);
		margin-left: calc(-64vw / 3.75);
	}
	.person.-p3 {
		bottom: calc(38vw / 3.75);
		width: calc(215vw / 3.75);
		margin-left: calc(-140vw / 3.75);
	}
	.person.-p4 {
		width: calc(148vw / 3.75);
		margin-left: calc(-74vw / 3.75);
	}
	.person.-p5 {
		width: calc(125vw / 3.75);
		margin-left: calc(-77vw / 3.75);
	}
	.person.-p6 {
		width: calc(201vw / 3.75);
		margin-left: calc(-80vw / 3.75);
	}
	.person.-p7 {
		width: calc(188vw / 3.75);
		margin-left: calc(-120vw / 3.75);
	}
	.person.-p8 {
		width: calc(130vw / 3.75);
		margin-left: calc(-65vw / 3.75);
	}
}
@media print, screen and (min-width: 768px) {
	.visual-persons {
		max-width: calc(960vw / 13.66);
	}
	.person {
		position: absolute;
		bottom: calc(48vw / 13.66)
	}
	.person:not(.active) {
		transform: translateY(-80px);
	}
	.person.remove {
		transform: translateY(80px);
	}
	.person:nth-child(4n+2).anima { transition-delay: .2s; }
	.person:nth-child(4n+3).anima { transition-delay: .4s; }
	.person:nth-child(4n+4).anima { transition-delay: .6s; }
	.person.-p1 {
		left: 10%;
		width: calc(205vw / 13.66);
		margin-left: calc(-130vw / 13.66);
	}
	.person.-p2 {
		left: 35%;
		width: calc(139vw / 13.66);
		margin-left: calc(-70vw / 13.66);
	}
	.person.-p3 {
		left: 65%;
		width: calc(237vw / 13.66);
		margin-left: calc(-160vw / 13.66);
	}
	.person.-p4 {
		left: 90%;
		width: calc(163vw / 13.66);
		margin-left: calc(-60vw / 13.66);
	}
	.person.-p5 {
		left: 10%;
		width: calc(136vw / 13.66);
		margin-left: calc(-120vw / 13.66);
	}
	.person.-p6 {
		left: 35%;
		width: calc(221vw / 13.66);
		margin-left: calc(-90vw / 13.66);
	}
	.person.-p7 {
		left: 65%;
		width: calc(207vw / 13.66);
		margin-left: calc(-120vw / 13.66);
	}
	.person.-p8 {
		left: 90%;
		width: calc(142vw / 13.66);
		margin-left: calc(-40vw / 13.66);
	}
}

/**
 * folioの強みと使命
 * -------------------------------------------------- */
.c-mission-section {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: #f26161;
}

.mission-title {
	font-size: 24px;
	line-height: 1.4;
	text-align: center;
}
.mission-title span {
	display: inline-block;
	position: relative;
}
.mission-lead p {
	font-size: 15px;
	line-height: 2;
	text-align: left;
}
.mission-lead p + p {
	margin-top: 2em;
}
.mission-object img {
	width: 100%;
}
.mission-object.js-inview:not(.in-view) {
	opacity: 0;
	transform: translateY(40px);
}
.mission-object.js-inview.in-view {
	transition: opacity .4s, transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media screen and (max-width: 767px) {
	.mission-container {
		padding-bottom: 40px;
	}
	.mission-lead p {
		margin-top: 2em;
	}
	.mission-object {
		padding: 0 20px 64px;
	}
}
@media print, screen and (min-width: 768px) {
	.mission-container {
		display: flex;
		padding-top: 160px;
	}
	.mission-container > * {
		flex-basis: 50%;
	}
	.mission-title {
		padding-right: 56px;
		text-align: right;
	}
	.mission-object {
		position: absolute;
		right: calc(50% + 56px);
		bottom: 0;
		width: 600px;
	}
}
.mission-title.js-inview span,
.mission-lead.js-inview p {
	position: relative;
	transform-origin: 0 50%;
}
.mission-title.js-inview span::before,
.mission-lead.js-inview p::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}
.mission-title.js-inview.in-view span,
.mission-lead.js-inview.in-view p,
.mission-title.js-inview.in-view span::before,
.mission-lead.js-inview.in-view p::before {
	transition: transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mission-lead.js-inview.in-view p:nth-child(1) { transition-delay: .1s; }
.mission-lead.js-inview.in-view p:nth-child(2) { transition-delay: .2s; }
.mission-lead.js-inview.in-view p:nth-child(3) { transition-delay: .3s; }
.mission-lead.js-inview.in-view p:nth-child(4) { transition-delay: .4s; }
.mission-lead.js-inview.in-view p:nth-child(5) { transition-delay: .5s; }
.mission-title.js-inview.in-view span::before { transition-delay: .3s; }
.mission-lead.js-inview.in-view p:nth-child(1)::before { transition-delay: .4s; }
.mission-lead.js-inview.in-view p:nth-child(2)::before { transition-delay: .5s; }
.mission-lead.js-inview.in-view p:nth-child(3)::before { transition-delay: .6s; }
.mission-lead.js-inview.in-view p:nth-child(4)::before { transition-delay: .7s; }
.mission-lead.js-inview.in-view p:nth-child(5)::before { transition-delay: .8s; }
.mission-title:not(.in-view) span,
.mission-lead:not(.in-view) p {
	transform: scaleX(0);
}
.mission-title.js-inview.in-view span::before,
.mission-lead.js-inview.in-view p::before {
	transform-origin: 100% 50%;
	transform: scaleX(0);
	transition-duration: .6s;
}

/**
 * 会社紹介資料
 * -------------------------------------------------- */
.c-company-introduction-section {
	background-color: #fff;
}

.company-introduction-iframe {
	margin-top: 64px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	position: relative;
	padding-top: 61.0416666667%;
}

.company-introduction-iframe iframe {
	border: none;
	width: 100%;
	height: 100%;
	position: absolute;
  top: 0;
  left: 0;
}

.c-company-introduction-section .c-button {
	margin-top: 32px;
}

.c-company-introduction-section .c-button .hov {
	border: 1px solid #f2f2f2;
}

@media print, screen and (min-width: 768px) {
	.c-company-introduction-section .c-button {
		margin-top: 60px;
	}
}

/**
 * バックステージ
 * -------------------------------------------------- */
.c-backstage-section {
	position: relative;
	overflow: hidden;
}

.backsstage-list {
	margin-top: 32px;
}
.c-backstage-section .c-button {
	margin-top: 32px;
}
@media print, screen and (min-width: 768px) {
	.backstage-container {
		padding-top: 160px;
	}
	.backsstage-list {
		margin-top: 64px;
	}
	.c-backstage-section .c-button {
		margin-top: 60px;
	}
}
@media screen and (max-width: 767px) {
	.backstage-container {
		padding: 80px 20px 120px;
	}
}

/**
 * リンク
 * -------------------------------------------------- */
.links-item a {
	display: block;
	position: relative;
	overflow: hidden;
	height: 44.5095vw;
}

.links-item .img,
.links-item .obj {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: center / cover no-repeat;
}
.links-item .obj {
	z-index: 1;
}
.links-item.-jobs .img {
	background-image: url(../img/home_thumb1.jpg);
}
.links-item.-environment .img {
	background-image: url(../img/home_thumb2.jpg);
}
.links-item.-culture .img {
	background-image: url(../img/home_thumb3.jpg);
}
.links-item.-backstage .img {
	background-image: url(../img/home_thumb4.jpg);
}
.links-item.-jobs .obj {
	background-image: url(../img/home_thumb1_obj.png);
}
.links-item.-environment .obj {
	background-image: url(../img/home_thumb2_obj.png);
}
.links-item.-culture .obj {
	background-image: url(../img/home_thumb3_obj.png);
}
.links-item.-backstage .obj {
	background-image: url(../img/home_thumb4_obj.png);
}

.links-item a::before,
.links-item a::after {
	content: "";
	z-index: 1;
	position: absolute;
}
.links-item a::before {
	top: 50%;
	left: 50%;
	background: center / cover no-repeat;
}
.links-item.-jobs a::before {
	background-image: url(../img/sticker_jobs.png);
}
.links-item.-environment a::before {
	background-image: url(../img/sticker_environment.png);
}
.links-item.-culture a::before {
	background-image: url(../img/sticker_culture.png);
}
.links-item.-backstage a::before {
	background-image: url(../img/sticker_backstage.png);
}
.links-item a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
}
.links-text {
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #fff;
	text-align: center;
	font-size: 18px;
	line-height: 1.8;
	transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
	.links-item.-jobs a::before {
		width: calc(383vw / 7.67);
		height: calc(184vw / 7.67);
		margin-top: calc(-92vw / 7.67);
		margin-left: calc(-191vw / 7.67);
	}
	.links-item.-environment a::before {
		width: calc(448vw / 7.67);
		height: calc(190vw / 7.67);
		margin-top: calc(-95vw / 7.67);
		margin-left: calc(-224vw / 7.67);
	}
	.links-item.-culture a::before {
		width: calc(437vw / 7.67);
		height: calc(240vw / 7.67);
		margin-top: calc(-120vw / 7.67);
		margin-left: calc(-219vw / 7.67);
	}
	.links-item.-backstage a::before {
		width: calc(260vw / 7.67);
		height: calc(260vw / 7.67);
		margin-top: calc(-130vw / 7.67);
		margin-left: calc(-130vw / 7.67);
	}
}
@media print, screen and (min-width: 768px) {
	.links-list {
		display: flex;
		flex-wrap: wrap;
	}
	.links-item {
		flex-basis: 50%;
	}
	.links-item a {
		height: calc(44.5095vw / 2);
	}
	html.isTouch .links-item:not(.active) a::before,
	html:not(.isTouch) .links-item a:not(:hover)::before {
		transform: translateY(-24vw);
	}
	.links-item.-jobs a::before {
		width: calc(383vw / 13.66);
		height: calc(184vw / 13.66);
		margin-top: calc(-92vw / 13.66);
		margin-left: calc(-191vw / 13.66);
	}
	.links-item.-environment a::before {
		width: calc(448vw / 13.66);
		height: calc(190vw / 13.66);
		margin-top: calc(-95vw / 13.66);
		margin-left: calc(-224vw / 13.66);
	}
	.links-item.-culture a::before {
		width: calc(437vw / 13.66);
		height: calc(240vw / 13.66);
		margin-top: calc(-120vw / 13.66);
		margin-left: calc(-219vw / 13.66);
	}
	.links-item.-backstage a::before {
		width: calc(260vw / 13.66);
		height: calc(260vw / 13.66);
		margin-top: calc(-130vw / 13.66);
		margin-left: calc(-130vw / 13.66);
	}
}
@media print, screen and (min-width: 1366px) {
	.links-item a {
		max-height: 304px;
	}
	.links-item.-jobs a::before {
		width: 383px;
		height: 184px;
		margin-top: -92px;
		margin-left: -191px;
	}
	.links-item.-environment a::before {
		width: 448px;
		height: 190px;
		margin-top: -95px;
		margin-left: -224px;
	}
	.links-item.-culture a::before {
		width: 437px;
		height: 240px;
		margin-top: -120px;
		margin-left: -219px;
	}
	.links-item.-backstage a::before {
		width: 260px;
		height: 260px;
		margin-top: -130px;
		margin-left: -130px;
	}
}

.links-item a::before {
	transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.links-item a:hover::before,
.links-item.active a::before {
	transition-duration: .6s;
	transition-timing-function: cubic-bezier(.29,1.32,.65,.99);
}
html.isTouch .links-item:not(.active) a::before,
html:not(.isTouch) .links-item a:not(:hover)::before {
	transform: translateY(-44vw);
}
html.isTouch .links-item.-jobs.active a::before,
html:not(.isTouch) .links-item.-jobs a:hover::before {
	transform: rotate(-10deg);
}
html.isTouch .links-item.-environment.active a::before,
html:not(.isTouch) .links-item.-environment a:hover::before {
	transform: rotate(10deg);
}
html.isTouch .links-item.-culture.active a::before,
html:not(.isTouch) .links-item.-culture a:hover::before {
	transform: rotate(4deg);
}
html.isTouch .links-item.-backstage.active a::before,
html:not(.isTouch) .links-item.-backstage a:hover::before {
	transform: rotate(12deg);
}
.links-item a::after {
	transform-origin: 100% 50%;
	transition: transform .6s cubic-bezier(.29,1.32,.65,.99);
}
html.isTouch .links-item:not(.active) a::after
html:not(.isTouch) .links-item a:not(:hover)::after {
	transform-origin: 0 50%;
}
html.isTouch .links-item.active a::after,
html:not(.isTouch) .links-item a:hover::after {
	transform: scaleX(0);
}