@charset "utf-8";

.p-page-home {
	margin-top: 0;
}

/**
 * しなやかに熱狂する。
 * ---------------------------------------- */
.a-keyvisual {
	position: relative;
	text-align: center;
}
.a-keyvisual .image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100vh;
	padding-top: 120px;
}
.a-keyvisual .image::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #f7f5f5 63%, #fff);
}
.a-keyvisual .copy {
	padding: 0 40px;
}
.a-keyvisual .bg {
	height: 210px;
	margin-top: 15vh;
	backface-visibility: hidden;
}
.a-keyvisual .bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.c-preface {
	position: relative;
	margin-top: 16px;
	padding-bottom: 20vh;
	font-size: 1.6rem;
	line-height: 2.5;
	font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", serif;
	letter-spacing: .1em;
}
html.isAndroid .c-preface {
	font-family: "Noto Serif JP", serif;
}
.c-preface p + p {
	margin-top: 2.4em;
}
.c-preface strong {
	font-size: 2.6rem;
	font-weight: inherit;
	letter-spacing: .15em;
}
/* :::::: button :::::: */
.c-preface .c-button {
	z-index: 2;
	position: relative;
	margin-top: 56px;
}
@media (min-width: 721px) {
	.a-keyvisual .copy {
		padding-left: 70px;
	}
}
@media (min-width: 1366px) {
	.a-keyvisual .bg {
		height: calc(210vw / 13.66);
	}
}
@media (max-width: 720px) {
	.a-keyvisual .image {
		padding-top: 64px;
	}
	.a-keyvisual .copy {
		top: 160px;
	}
	.a-keyvisual .bg {
		height: 150px;
		margin-top: 17vh;
	}
	.a-keyvisual .bg img {
		object-position: 48% 50%;
	}
	.c-preface {
		font-size: 1.4rem;
	}
	.c-preface strong {
		font-size: 2.2rem;
		line-height: 2.2;
	}
	.c-preface strong span:nth-of-type(2) {
		display: inline-block;
		text-indent: .8em;
	}
}
/* inview */
.a-keyvisual .bg.js-inview:not(.is-inview),
.a-keyvisual .copy.js-inview:not(.is-inview) {
	opacity: 0;
	filter: blur(16px);
	transform: scale(1.06);
}
.a-keyvisual .copy.js-inview:not(.is-inview) {
	transform: scale(1.2);
}
.a-keyvisual .bg.js-inview.is-anim,
.a-keyvisual .copy.js-inview.is-anim {
	transition: opacity 2s, filter 2s, transform 2s cubic-bezier(.3,1,.7,1);
}
.a-keyvisual .copy.js-inview.is-anim {
	transition-delay: .2s;
}
.c-preface .js-inview:not(.is-inview) {
	opacity: 0;
	transform: translateY(24px);
}
.c-preface .js-inview.is-anim {
	display: inline-block;
	backface-visibility: hidden;
	transition: opacity 2s, transform 2s cubic-bezier(.3,1,.7,1);
}

/**
 * VISION
 * ---------------------------------------- */
.a-vision {
	position: relative;
	margin-top: 0;
}
.a-vision .text {
	z-index: 1;
	position: relative;
}
.a-vision .photo {
	margin: 0 calc(50% - 50vw);
}
@media (min-width: 721px) {
	.a-vision .text {
		position: absolute;
	}
	.a-vision .photo img {
		min-height: 800px;
		object-fit: cover;
	}
}
@media (min-width: 1025px) {
	.a-vision .text {
		width: calc(100% - 80px);
		padding-top: 144px;
	}
	.a-vision .c-text {
		max-width: 472px;
		font-size: 1.5rem;
	}
	.a-vision .photo {
		padding-top: 350px;
	}
}
@media (max-width: 720px) {
	.a-vision .text {
		padding-top: 72px;
	}
	.a-vision .c-lead {
		font-size: 1.8rem;
	}
}
@media (max-width: 720px) {
	.a-vision .c-text br {
		display: none;
	}
	.a-vision .photo {
		margin-top: -120px;
	}
}

/**
 * VALUE
 * ---------------------------------------- */
 .value_image {
 	margin-top: 20px;
 }

/**
 * INTERVIEW
 * ---------------------------------------- */
.p-page-home .p-interview {
	max-width: calc(1222px + 144px);
}
.p-page-home .p-interview::after {
	content: "";
	display: block;
	clear: right;
}
.p-page-home .p-interview .c-title {
	max-width: 1080px;
	margin: 0 auto;
}
.p-page-home .p-interview > .c-link {
	float: right;
	margin-top: 80px;
}
.p-page-home .c-interviewlist .title {
	font-size: 1.8rem;
}
@media (min-width: 721px) {
	.p-page-home .p-interview {
		padding: 0 calc(72vw / 13.66);
	}
	.p-page-home .c-interviewlist {
		justify-content: space-between;
	}
	.p-page-home .c-interviewlist li {
		margin: calc(80vw / 13.66) 0 0 0;
	}
	.p-page-home .c-interviewlist li:nth-child(2n) {
		padding-top: calc(80vw / 13.66);
	}
	.p-page-home .c-interviewlist li:nth-child(1) { flex-basis: calc(572vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(2) { flex-basis: calc(320vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(3) { flex-basis: calc(320vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(4) { flex-basis: calc(716vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(5) { flex-basis: calc(500vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(6) { flex-basis: calc(356vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(7) { flex-basis: calc(356vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(8) { flex-basis: calc(680vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(9) { flex-basis: calc(428vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(10) { flex-basis: calc(500vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(1) { margin-left: calc(72vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(2) { margin-right: calc(120vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(4) { margin-left: calc(40vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(5) { margin-left: calc(104vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(6) { margin-right: calc(72vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(7) { margin-left: calc(40vw / 13.66); }
	.p-page-home .c-interviewlist li:nth-child(10) { margin-right: calc(144vw / 13.66); }
	.p-page-home .c-interviewlist li .photo {
		margin-top: calc(-112vw / 13.66);
		margin-left: calc(32vw / 13.66);
	}
}
@media (min-width: 1366px) {
	.p-page-home .p-interview {
		padding: 0 72px;
	}
	.p-page-home .c-interviewlist li {
		margin-top: 80px;
	}
	.p-page-home .c-interviewlist li:nth-child(2n) {
		padding-top: 80px;
	}
	.p-page-home .c-interviewlist li:nth-child(1) { flex-basis: 572px; }
	.p-page-home .c-interviewlist li:nth-child(2) { flex-basis: 320px; }
	.p-page-home .c-interviewlist li:nth-child(3) { flex-basis: 320px; }
	.p-page-home .c-interviewlist li:nth-child(4) { flex-basis: 716px; }
	.p-page-home .c-interviewlist li:nth-child(5) { flex-basis: 500px; }
	.p-page-home .c-interviewlist li:nth-child(6) { flex-basis: 356px; }
	.p-page-home .c-interviewlist li:nth-child(7) { flex-basis: 356px; }
	.p-page-home .c-interviewlist li:nth-child(8) { flex-basis: 680px; }
	.p-page-home .c-interviewlist li:nth-child(9) { flex-basis: 428px; }
	.p-page-home .c-interviewlist li:nth-child(10) { flex-basis: 500px; }
	.p-page-home .c-interviewlist li:nth-child(1) { margin-left: 72px; }
	.p-page-home .c-interviewlist li:nth-child(2) { margin-right: 120px;  }
	.p-page-home .c-interviewlist li:nth-child(4) { margin-left: 40px; }
	.p-page-home .c-interviewlist li:nth-child(5) { margin-left: 104px; }
	.p-page-home .c-interviewlist li:nth-child(6) { margin-right: 72px; }
	.p-page-home .c-interviewlist li:nth-child(7) { margin-left: 40px; }
	.p-page-home .c-interviewlist li:nth-child(10) { margin-right: 144px; }
	.p-page-home .c-interviewlist li .photo {
		margin-top: -112px;
		margin-left: 32px;
	}
}
@media (max-width: 720px) {
	.p-page-home .c-interviewlist {
		max-width: 600px;
		margin-right: auto;
		margin-left: auto;
	}
	.p-page-home .c-interviewlist li {
		flex-basis: 100%;
		margin: 0;
	}
	.p-page-home .c-interviewlist li:nth-child(n+2) {
		margin-top: 32px;
	}
	html.isTouch .p-page-home .c-interviewlist li:nth-child(n+4) {
		display: none;
	}
	.p-page-home .c-interviewlist .text {
		z-index: 1;
		margin-top: 0;
	}
	.p-page-home .c-interviewlist .job {
		font-size: 1.2rem;
	}
	.p-page-home .c-interviewlist .name {
		font-size: 1.5rem;
	}
	.p-page-home .c-interviewlist .title {
		position: relative;
		margin-top: .8em;
		font-size: 1.8rem;
	}
	.p-page-home .c-interviewlist .c-link {
		display: inline-block;
		position: relative;
	}
	.p-page-home .c-interviewlist .photo {
		margin: -6em 0 0 24px;
		font-size: 1.8rem;
	}
	.p-page-home .p-interview > .c-link {
		margin-top: 40px;
	}
}

/**
 * glims
 * -------------------------------------------------- */
.js-kvglims {
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	pointer-events: none;
}
.js-kvglims .o-glim:not(.is-active) {
	transform: scale(.8);
}
.js-kvglims .o-glim.is-anim {
	transition: opacity 1s, transform 1s;
}
/*.js-kvglims .o-glim {
	display: block !important;
	opacity: 1 !important;
}*/
.o-glim.v1 {
	width: 160px;
	height: 160px;
}
.o-glim.v1::after {
	background: radial-gradient(50% 50%, rgba(221,184,128,.6), rgba(230,204,140,.05));
	animation-name: swing_s;
	animation-duration: 8s;
}
.o-glim.v2 {
	width: 432px;
	height: 432px;
}
.o-glim.v2::after {
	background: radial-gradient(50% 50%, rgba(255,159,159,.6), rgba(255,205,131,.05));
	animation-delay: -8s;
}
.o-glim.v3 {
	width: 416px;
	height: 416px;
}
.o-glim.v3::after {
	background: radial-gradient(50% 50%, rgba(128,151,221,.6), rgba(140,230,170,.05));
	animation-delay: -2s;
}
.o-glim.v4 {
	width: 456px;
	height: 456px;
}
.o-glim.v4::after {
	background: radial-gradient(50% 50%, rgba(128,199,221,.6), rgba(140,230,170,.05));
	animation-delay: -6s;
}
.o-glim.v5 {
	width: 712px;
	height: 712px;
}
.o-glim.v5::after {
	background: radial-gradient(50% 50%, rgba(253,117,117,.6), rgba(255,163,26,.05));
	animation-name: swing_l;
	animation-duration: 30s;
}
html:not(.isTouch) .o-glim.v1 { top: -10%; right: calc(50% - 300px); }
html:not(.isTouch) .o-glim.v2 { top: -3%; left: calc(50% - 700px); }
html:not(.isTouch) .o-glim.v3 { top: -1%; right: calc(50% - 800px); }
html:not(.isTouch) .o-glim.v4 { bottom: 15%; left: calc(50% - 600px); }
html:not(.isTouch) .o-glim.v5 { bottom: -23%; left: 50%; }

html.isTouch .o-glim.v1 { top: -8%; left: 50%; width: calc(120vw / 3.75); height: calc(120vw / 3.75); }
html.isTouch .o-glim.v2 { top: 0; right: 70%; width: calc(272vw / 3.75); height: calc(272vw / 3.75); }
html.isTouch .o-glim.v3 { top: 5%; left: 70%; width: calc(424vw / 3.75); height: calc(424vw / 3.75); }
html.isTouch .o-glim.v4 { bottom: -5%; right: 50%; width: calc(456vw / 3.75); height: calc(456vw / 3.75); }
html.isTouch .o-glim.v5 { bottom: -30%; left: 50%; width: calc(480vw / 3.75); height: calc(480vw / 3.75); }

.o-glim.interview-1  { top: 0;   left: 15%; }
.o-glim.interview-2  { top: 5%;  left: 0; }
.o-glim.interview-3  { top: 0;   left: 0; }
.o-glim.interview-4  { top: 10%; left: -5%; }
.o-glim.interview-5  { top: 0;   left: -5%; }
.o-glim.interview-6  { top: 0;   left: 5%; }
.o-glim.interview-7  { top: 15%; left: -5%; }
.o-glim.interview-8  { top: 15%; left: 0; }
.o-glim.interview-9  { top: 10%; left: -5%; }
.o-glim.interview-10 { top: 0;   left: 5%; }

html.isTouch .o-glim.interview-1  { top: 0; left: 0; }
html.isTouch .o-glim.interview-2  { top: 60vw; left: 0; }
html.isTouch .o-glim.interview-3  { top: 160px; left: 0; }

/**
 * splash
 * -------------------------------------------------- */
.o-splash {
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}
.o-splash span {
	display: inline-block;
	line-height: 0;
}
.o-splash .she {
	margin-right: 16px;
	fill: none;
	stroke: #3f4b4f;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.o-splash .she svg {
	width: 80px;
	height: 42px;
}
body .o-splash .a,
body .o-splash .b {
	stroke-dasharray: 37px 37px;
}
body .o-splash .c {
	stroke-dasharray: 249px 249px;
}
.o-splash .recruit {
	overflow: hidden;
	fill: #3f4b4f;
}
.o-splash .recruit,
.o-splash .recruit svg {
	width: 160px;
	height: 12px;
}
/* splash motion */
body:not(.is-splashlogo) .o-splash .a,
body:not(.is-splashlogo) .o-splash .b {
	stroke-dashoffset: -37px;
}
body:not(.is-splashlogo) .o-splash .c {
	stroke-dashoffset: -249px;
}
body:not(.is-splash) .o-splash .recruit {
	opacity: 0;
	width: 0;
}
body.is-splashlogo .o-splash .she path {
	transition: stroke-dashoffset .45s cubic-bezier(.3,1,.7,1);
}
body.is-splashlogo .o-splash .she .c {
	transition-duration: 1s;
	transition-delay: .5s;
	transition-timing-function: cubic-bezier(.3,1,.7,1);
}
body.is-splashlogo .o-splash .recruit {
	transition: width .8s cubic-bezier(.7,0,.2,1), opacity .8s;
	transition-delay: 1.4s;
}
body.is-splashfade .o-splash {
	transition: opacity 1s;
	opacity: 0;
}
body.is-splashfade:not(.is-splash) .o-splash {
	transition-duration: 2s;
}
body.is-splashfade .o-splash .logo {
	transition: transform 1.4s cubic-bezier(.7,0,.2,1), filter 1.4s;
	transform: translateY(-16px);
	filter: blur(8px);
}
/* header/keyvisual motion */
body.is-splash {
	position: fixed;
	width: 100%;
}
body.is-splash .l-header {
	opacity: 0;
	transform: translateY(-24px);
}
body.is-splash .a-keyvisual .copy {
	opacity: 0;
	filter: blur(4px);
	transform: translateY(-16px);
}
body.is-splash .a-keyvisual .bg {
	opacity: 0;
	filter: blur(8px);
	transform: scale(1.08);
}
body.is-anim .l-header {
	transition: opacity 1s, transform 1s cubic-bezier(.3,1,.7,1);
	transition-delay: .1s;
}
body.is-anim .a-keyvisual .copy {
	transition: opacity 1.2s, filter 1.2s, transform 1.2s;
	transition-delay: .3s;
}
body.is-anim .a-keyvisual .bg {
	transition: opacity 1.6s, filter 2s, transform 2s cubic-bezier(.3,1,.7,1);
	transition-delay: .6s, .2s, .2s;
}
.a-keyvisual .cover {
	position: absolute;
	bottom: -10%;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(to top, #fff 50%, rgba(255,255,255,0));
	mix-blend-mode: overlay;
}
body.is-splashfade .a-keyvisual .cover {
	transform: translateY(100%);
	transition: transform 1.6s cubic-bezier(.7,0,.2,1);
}
body.is-splashfade.is-anim .a-keyvisual .cover {
	transition-delay: .4s;
}
/* glims */
.js-splashflare,
.js-splashglims {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: hard-light;
}
.js-splashflare {
	width: 200%;
	background: linear-gradient(to right, rgba(248, 248, 193, 0), #f19b9b, #a6e6e6, #f7f7c1, #f19b9b, rgba(166, 230, 230, 0));
	transform: translateX(50%);
}
.js-splashglims .o-glim {
	display: block !important;
	opacity: 1 !important;
}
.js-splashglims.is-fadeout {
	opacity: 0;
	transform: scale(.8);
}
.js-splashflare.is-fadeout {
	opacity: .4;
	transform: translateX(-100%) skewX(30deg);
}
.js-splashglims.is-anim,
.js-splashflare.is-anim {
	transition: opacity 2.4s, transform 2.4s cubic-bezier(.3,1,.7,1);
}

.o-glim.g1 { top: 50%; left: 50%; }
.o-glim.g2 { top: 50%; left: 20%; }
.o-glim.g3 { top: 30%; right: -10%; }
.o-glim.g4 { top: 50%; left: 60%; }
.o-glim.g5 { top: 30%; left: -20%; }
.o-glim.g1 {
	width: 160px;
	height: 160px;
}
.o-glim.g1::after {
	background: radial-gradient(50% 50%, rgba(221,184,128,.6), rgba(230,204,140,.05));
	animation-name: swing_s;
	animation-duration: 8s;
}
.o-glim.g2 {
	width: 432px;
	height: 432px;
}
.o-glim.g2::after {
	background: radial-gradient(50% 50%, rgba(255,159,159,.6), rgba(255,205,131,.05));
	animation-delay: -8s;
}
.o-glim.g3 {
	width: 416px;
	height: 416px;
}
.o-glim.g3::after {
	background: radial-gradient(50% 50%, rgba(128,151,221,.6), rgba(140,230,170,.05));
	animation-delay: -2s;
}
.o-glim.g4 {
	width: 456px;
	height: 456px;
}
.o-glim.g4::after {
	background: radial-gradient(50% 50%, rgba(128,199,221,.6), rgba(140,230,170,.05));
	animation-delay: -6s;
}
.o-glim.g5 {
	width: 712px;
	height: 712px;
}
.o-glim.g5::after {
	background: radial-gradient(50% 50%, rgba(253,117,117,.6), rgba(255,163,26,.05));
	animation-name: swing_l;
	animation-duration: 30s;
}