@charset "UTF-8";
.innerBox {
	background: #FFF;
	border-radius: 20px;
	padding-top: 25px;
	padding-bottom: 5.8vw;
}
@media only screen and (min-width: 576px) {
	.innerBox {
		border-radius: 3.75vw;
	}
}
.page__title {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
}
.page__title .ttl_img img {
	height: 7.7vw;
}
.page__title .ttl_img img.out {
	height: 9.6vw;
}
@media only screen and (min-width: 576px) {
	.page__title .ttl_img img {
		height: 36px;
	}
	.page__title .ttl_img img.out {
		height: 45px;
	}
}
@media only screen and (min-width: 768px) {
	.page__title .title {
		display: flex;
		align-items: center;
	}
	.page__title .ttl_img {
		margin-right: 2em;
		margin-bottom: 0;
	}
}
@media only screen and (min-width: 992px) {
	.page__title .ttl_img img {
		height: 48px;
	}
	.page__title .ttl_img img.out {
		height: 60px;
	}
}
@media only screen and (min-width: 1200px) {
	.page__title .ttl_img img {
		height: 64px;
	}
	.page__title .ttl_img img.out {
		height: 80px;
	}
}
.obj {
	content: '';
	display: block;
	width: 100%;
	height: 4.246vw;
	margin-bottom: -4.246vw;
	position: relative;
	z-index: 2;
}
.obj.obj-l-blue {
	background: url(../common/img/obj-l-blue.svg) no-repeat center top / 100%;
}
.obj.obj-violet {
	background: url(../common/img/obj-violet.svg) no-repeat center top / 100%;
}
/* ==========================================================================
   MV
========================================================================== */
#MV {
	padding-bottom: 28vw;
	position: relative;
}
#mv-slider {
	height: 100vw;
	background: #FFF;
}
#mv-slider .slider, #mv-slider .slide, #mv-slider .slick-list, #mv-slider .slick-track {
	height: 100%;
}
#mv-slider .slide .imgBox {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#MV .ttlBox {
	position: absolute;
	left: 10.25%;
	bottom: 11%;
}
#MV .ttlBox .ttl_img img {
	width: 77.5vw;
}
#MV .ttlBox h1 {
	color: #FFF;
	font-size: 2.66vw;
	line-height: 1.3;
	transform: translate(-110%, 0);
}
#MV .ttlBox h2 {
	font-size: 3.7vw;
}
#MV .ttlBox h2 span {
	font-size: 4.8vw;
}
@media only screen and (max-width: 575px) {
	#MV .ttl_obj {
		display: none;
	}
	#mv-slider .slide .horizontal {
		display: none;
	}
}
@media only screen and (min-width: 576px) {
	#MV {
		padding-bottom: 19.25vw;
	}
	#MV .ttl_obj {
		width: 59vw;
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translate(-4vw, 49%);
	}
	#mv-slider {
		height: 44.36vw;
	}
	#mv-slider .slide .vertical {
		display: none;
	}
	#MV .ttlBox {
		left: 8%;
		bottom: 12%;
	}
	#MV .ttlBox .ttl_img img {
		width: 59vw;
	}
	#MV .ttlBox h1 {
		font-size: 2.4vw;
		transform: translate(-100%, 0);
	}
	#MV .ttlBox h2 {
		font-size: 2.6vw;
	}
	#MV .ttlBox h2 span {
		font-size: 4vw;
	}
}
@media only screen and (min-width: 768px) {
	#MV {
		padding-bottom: 17.25vw;
	}
	#mv-slider .slide .vertical {
		display: none;
	}
	#MV .ttlBox {
		bottom: 11.5%;
	}
	#MV .ttlBox .ttl_img img {
		width: 46vw;
	}
	#MV .ttlBox h1 {
		font-size: 2vw;
		transform: translate(-100%, -2.5%);
	}
	#MV .ttlBox h2 {
		font-size: 2.2vw;
	}
	#MV .ttlBox h2 span {
		font-size: 3.65vw;
	}
}
@media only screen and (min-width: 992px) {
	#MV {
		padding-bottom: 15.25vw;
	}
	#MV .ttlBox .ttl_img img {
		width: 44vw;
	}
	#MV .ttlBox h1 {
		font-size: 1.6vw;
		transform: translate(-130%, 0);
	}
	#MV .ttlBox h2 {
		font-size: 1.9vw;
	}
	#MV .ttlBox h2 span {
		font-size: 3.2vw;
	}
}
/* ==========================================================================
   Intro
========================================================================== */
#intro .grad-yellow-v {
	padding-top: 40px;
	padding-bottom: 6vw;
}
@media only screen and (min-width: 768px) {
	#intro .grad-yellow-v {
		padding-top: 6vw;
	}
	.innerBox {
		padding-top: 0;
	}
}
/* --------------------------
   Message
-------------------------- */
#message .i-sq_ttl {
	margin-top: 1em;
	margin-bottom: 1.25em;
	font-size: 1em;
}
#message .big {
	font-size: 1.231em;
}
@media only screen and (min-width: 768px) {
	#message .i-sq_ttl {
		margin-top: 7vw;
	}
}
@media only screen and (min-width: 1200px) {
	#message .i-sq_ttl {
		font-size: 1.313em;
	}
	#message p {
		font-size: 1.125em;
	}
	#message .big {
		font-size: 1.333em;
	}
}
/* --------------------------
   About us
-------------------------- */
#about {
	margin-top: 6vw;
}
#about .ttl_obj {
	width: 61vw;
	top: 50%;
	right: -47.5%;
	transform: translate(0, -50%);
}
#about .cards {
	margin-right: -10px;
	margin-left: -10px;
}
#about .cards li {
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
	#about .ttl_obj {
		width: 32vw;
		right: -12%;
	}
}
/* ==========================================================================
   People
========================================================================== */
#people {
	padding-top: 12vw;
}
#people .ttl_obj {
	width: 61vw;
	top: 50%;
	right: -36%;
	transform: translate(0, -50%);
}
#people .grad-d-blue-v {
	padding-bottom: 6vw;
	position: relative;
}
#people .grad-d-blue-v::before {
	content: '';
	display: block;
	width: 100%;
	height: 15vw;
	background: #FFF;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}
#people .innerBox {
	padding-top: 0;
}
@media only screen and (min-width: 576px) {
	#people .ttl_obj {
		width: 32vw;
		right: 0;
	}
}
/* --------------------------
   Project Story
-------------------------- */
#story .imgBox {
	margin-top: 2.5em;
	text-align: center;
}
#story .imgBox .btn {
	margin: 2.5em 0;
}
@media only screen and (min-width: 768px) {
	#story .imgBox {
		margin-top: 0;
	}
	#story .imgBox .btn {
		margin-bottom: 0;
	}
}
@media only screen and (min-width: 992px) {
	#story .imgBox {
		position: relative;
	}
	#story .imgBox .btn {
		margin: 0;
		position: absolute;
		right: 50px;
		bottom: 20px;
	}
}
/* --------------------------
   Interview
-------------------------- */
#interview {
	margin-top: 7vw;
}
#interview-slider {
	margin-top: 2.5em;
}
#interview-slider .panel {
	padding: 0 2vw;
	margin-bottom: 20px;
}
#interview-slider .panel a {
	display: block;
}
#interview-slider .panel .imgBox {
	margin-bottom: 20px;
}
#interview-slider .panel span {
	display: block;
}
#interview-slider .panel .name {
	font-size: 1.231em;
	font-weight: 500;
	line-height: 1.4;
}
#interview .buttons {
	margin-top: 2em;
	margin-bottom: 2.5em;
}
@media only screen and (max-width: 575px) {
	#interview-slider {
		margin-right: -25px;
		margin-left: -25px;
	}
}
@media only screen and (min-width: 576px) {
	#interview-slider {
		margin-top: 4vw;
		margin-right: -10px;
		margin-left: -10px;
	}
	#interview-slider .panel {
		padding: 0 10px;
	}
}
@media only screen and (min-width: 992px) {
	#interview-slider {
		margin-right: -20px;
		margin-left: -20px;
	}
	#interview-slider .panel {
		padding: 0 20px;
	}
	#interview-slider .panel .name {
		font-size: 1.125em;
	}
}
@media only screen and (min-width: 1200px) {
	#interview-slider {
		margin-right: -25px;
		margin-left: -25px;
	}
	#interview-slider .panel {
		padding: 0 25px;
	}
}
@media only screen and (min-width: 1366px) {
	#interview-slider {
		margin-right: -30px;
		margin-left: -30px;
	}
	#interview-slider .panel {
		padding: 0 30px;
	}
}
/* ==========================================================================
   Recruiting
========================================================================== */
#recruiting {
	padding-top: 12vw;
}
#recruiting .ttl_obj {
	width: 50vw;
	right: -28%;
	top: 50%;
	transform: translate(0, -50%);
}
#recruiting .grad-pink-v {
	padding-bottom: 6vw;
	position: relative;
}
#recruiting .grad-pink-v::before {
	content: '';
	display: block;
	width: 100%;
	height: 15vw;
	background: #FFF;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}
#recruiting .innerBox {
	padding-top: 0;
}
#recruiting .imgBox {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.5em;
}
#recruiting .imgBox .img01 {
	margin-bottom: 4%;
}
#recruiting .imgBox .img02 {
	flex: 0 0 38.85%;
	margin-right: 4%;
}
#recruiting .imgBox .img03 {
	flex: 0 0 57.15%;
}
#recruiting .buttons {
	margin-top: 2.5em;
}
@media only screen and (max-width: 991px) {
	#recruiting .txtBox .buttons {
		display: none;
	}
}
@media only screen and (min-width: 576px) {
	#recruiting .ttl_obj {
		width: 28vw;
		right: 2%;
	}
}
@media only screen and (min-width: 768px) {
	#recruiting .imgBox {
		margin-top: 0;
	}
}
#blog .sp {
	display: block;
	margin: 50px auto;
}
#blog .sp iframe {
	display: block;
	margin: 0 auto;
}
#blog .pc {
	display: none;
}
@media only screen and (min-width: 768px) {
	#blog .sp {
		display: none;
	}
	#blog .pc {
		display: block;
		margin: 70px auto;
	}
	#blog .pc iframe {
		display: block;
		margin: 0 auto;
	}
}