@charset "utf-8";

@media screen and (min-width: 1300px) {
	#about_section:before {
		top: -180px;
	}

	#about_section:after {
		top: -120px;
	}
}


@media screen and (min-width: 1400px) {

	#about_section {
		padding-bottom: 42%;
	}

	#about_section:after {
		content: "";
		width: 100%;
		background: url("../images/top_bg02-1480.png") no-repeat;
		background-size: cover;
		position: absolute;
		top: -75px;
		left: 0;
		z-index: 2;
	}

}

@media screen and (min-width: 1600px) {
	#about_section {
		padding-bottom: 35%;
	}

	#about_section:after {
		content: "";
		width: 100%;
		background: url("../images/top_bg02-1600.png") no-repeat;
		background-size: cover;
		position: absolute;
		top: -75px;
		left: 0;
		z-index: 2;
	}
}


@media screen and (min-width: 780px) and (max-width: 1000px) {
	#about_section {
		padding-bottom: 55%;
	}
}

@media screen and (max-width: 1000px) {

	section h1 img {
		display: block;
		margin: 0 auto;
		max-width: 380px;
	}

	#about_section {
		padding-top: 40px;
	}

	#about_section:before {
		top: -180px;
	}

	#about_section:after {
		content: "";
		width: 100%;
		background: url("../images/top_bg02-1000.png") no-repeat;
		background-size: cover;
		position: absolute;
		top: -75px;
		left: 0;
		z-index: 2;
	}

	#about_section h1 {
		margin-bottom: 30px;
	}

	p.about_copy {
		font-size: 21px;
	}

	.about_title2 {
		font-size: 28px;
	}

	#work_section {
		margin-top: -50px;
	}

	.work_box_col .work_title {
		font-size: 19px;
	}

	.work_box_col .work_title2 {
		font-size: 19px;
	}

	#movie_section {
		background-position: center 245px;
	}

	#movie_section:before {
		content: "";
		display: block;
		width: 100%;
		height: 440px;
		background: url("../images/movie_bg02-1000.png") no-repeat;
		background-size: cover;
		background-position: top left;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	#movie_section:after {
		content: "";
		display: block;
		width: 100%;
		height: 425px;
		background: url("../images/movie_bg03-1000.png") no-repeat;
		background-size: cover;
		background-position: top right;
		position: absolute;
		right: 0;
		top: -50px;
		z-index: -2;
	}

	#business_section:after {
		content: "";
		display: block;
		width: 100%;
		height: 166px;
		background: url("../images/sp/business_bottom_sp.png") no-repeat;
		background-size: cover;
		position: absolute;
		bottom: 0;
	}

	.business_col a {
		padding: 50px 15px 0 15px;
	}

	.business_col p.title {
		font-size: 21px;
	}

	p.business_detail {
		padding: 70px 20px 210px 20px;
	}

	#recruit_section {
		width: 100%;
		height: 100%;
		padding-bottom: 320px;
		padding-top: 100px;
		background: url("../images/sp/recruit_bg_sp.png") no-repeat;
		background-position: top center;
		background-size: cover;
		position: relative;
		margin-top: -175px;
	}

	#recruit_section .container {
		padding: 0 20px;
	}

	#group_title:before {
		content: url("../images/sp/group_illust_sp.png");
		position: absolute;
		bottom: 90%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 0;
	}

	ul.group_list {
		padding: 0 20px;
	}

	ul.group_list li {
		width: 100%;
		margin-right: 0;
	}

	#group_section:after {
		height: 76px;
		background: url("../images/sp/footer_bottom_sp.png") no-repeat;
		background-size: cover;
	}

}


@media screen and (max-width: 780px) {
	#about_section {
		padding-bottom: 65%;
	}
}


/* スマホ */
@media screen and (max-width: 680px) {
	.pc {
		display: none !important;
	}

	.sp {
		display: block;
	}

	#logo {
		width: 90%;
		margin-right: 10%;
	}

	#movie_section h1#movie_title {
		position: static;
		margin-top: 0;
	}

	#movie_section {
		padding: 33px 20px 0 20px;
		box-sizing: border-box;
	}

	#about_section:before {
		content: "";
		width: 100%;
		height: 250px;
		background: url("../images/sp/top_bg01_sp.png") no-repeat;
		background-size: cover;
		position: absolute;
		top: -90px;
		left: 0;
		z-index: 1;
	}

	#about_section:after {
		content: "";
		width: 100%;
		height: 380px;
		background: url("../images/sp/top_bg02_sp.png") no-repeat;
		background-size: cover;
		position: absolute;
		top: -20px;
		left: 0;
		z-index: 2;
	}

	#about_section {
		padding-bottom: 75%;
	}

	section h1 img {
		max-width: 70%;
	}

	p.about_copy {
		font-size: 14px;
	}

	.about_title2 {
		font-size: 18px;
	}

	#work_section .container2 {
		padding: 0 20px;
	}

	.work_box {
		flex-wrap: wrap;
	}

	.work_box_col {
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}



	#movie_section {
		background: url("../images/sp/movie_bg01_sp.png") no-repeat;
		background-size: cover;
	}

	#movie_section:before {
		content: "";
		display: block;
		width: 100%;
		height: 272px;
		background: url("../images/sp/movie_bg02_sp.png") no-repeat;
		background-size: cover;
		background-position: top left;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	#movie_section:after {
		content: "";
		display: block;
		width: 100%;
		height: 282px;
		background: url("../images/sp/movie_bg03_sp.png") no-repeat;
		background-size: cover;
		background-position: top right;
		position: absolute;
		right: 0;
		top: -50px;
		z-index: -2;
	}

	#movie_section {
		background-position: center 138px;
	}

	#movie_bottom {
		margin-top: -60px;
	}

	.work_arch {
		position: static;
		margin-top: 25px;
		transform: none;
	}

	.work_arch2 {
		margin-top: 25px;
	}

	#staff_interview {
		margin-top: 0 !important;
	}

	.splide {
		margin-top: 0;
	}

	.splide-controller {
		margin-top: 0;
	}

	#business_img {
		display: none;
	}

	.business_col {
		width: calc(100% / 2);
	}


	.business_col:nth-child(even) {
		border-right: none;
	}

	.business_col:last-child {
		border-left: 1px solid #fff;
	}




}





/* スマホ以外 */
@media screen and (min-width: 680px) {
	.sp {
		display: none !important;
	}


	.pc {
		display: block;
	}

	.business_col:nth-child(4) {
		border-left: 1px solid #fff;
	}

	.splide__slide.is-active img {
		opacity: 1;
		/* 中央のスライドは薄くしない */
		transform: scale(1);
		/* 中央のスライドは小さくしない */
		z-index: 1;
		/* 中央のスライドを一番上にする */
	}

	.splide__slide.is-active iframe {
		transform: scale(1);
		/* 中央のスライドは小さくしない */
		z-index: 1;
		/* 中央のスライドを一番上にする */
	}

}

@media screen and (max-width: 390px) {
	#movie_section h1#movie_title {
		margin-top: 3%;
	}

}