@charset "UTF-8";
@media (max-width: 1000px) {
	/* about */
	.top-about__imagebox {
		width: 50%;
		padding-top: 100%;
	}
	
	.top-about__movie ul.flex {		
		padding: 0 2%;
	}	
	
	/* works */
	.top-works__inner .left {	
		width: 58%;
	}
	
	.top-works__inner .bg-image {
		width: 100%;	
	}	
}

@media (max-width: 960px) {
	/* about */
	.top-about__inner .detail__text {
		max-width: 42%;
	}
	
	/* works */
	.top-works__inner .left {	
		width: 54%;
	}
	
	.top-works__inner .right {
		max-width: 28%;
		margin-right: 3%;
	}
	
	.top-works__inner .bg-color {
		width: 100%;
	}
	
	.top-event ul {
		width: calc(100% - 30px); 
		margin: 20px auto 0;
	}
	
	.top-recruit,
	.top-link-btn__item {
		width: calc(100% - 40px); 
		margin: 0 auto;
	}
}

@media (max-width: 880px) {
	/* news */
	.top-news__inner {
		display: block;
	}
	
	.top-news__inner h1.headline__title {
		display: inline-block; 
		line-height: 1; 
		margin-top: 20px; 
		vertical-align: bottom;}
	
	a.news__btn {
		display: inline-block;
		margin-top: -20px;
	}
	
	.top-news .left {
		width: calc(100% - 10%);
	}
	
	.top-news .right {
		width: calc(100% - 10%);
		margin: 20px auto 0;
	}
	
	/* about */
	.top-about__inner {
		margin: 30px 0 0; 
		padding: 2% 8%;
	}
		
	/* works */
	.top-works__inner .left {	
		width: 52%;
	}
}

/* 〜768px（スマホ＆タブレット用）
---------------------------*/
@media (max-width: 768px) {	
	/* news */
	.top-news {
		padding: 30px 0;
	}
	
	.top-news .left {
		text-align: left;
		margin-left: 5%;
	}
	
	.news_list_item {
		padding: 20px 0;
	}
	
	.news_list_item a {
		 display: block;
	}
	
	/* about */
	.top-about__copy {
		width: 80%;
	}
		
	/* works */
	.top-works__inner .left {	
		width: 46%;
	}

	.top-works__inner .bg-image {		
		width: 95%;
		background-size: cover;
		left: 5%;
	}
	
	.top-works__inner {
		display: flex;
		padding: 100px 0 70px 0;		
	}
}

/* 〜767px（スマホ用）
---------------------------*/
@media (max-width: 767px) {
	.pctb_only {
		display: none;
	}
	
	/* about */
	.top-about__movie ul.flex {
		display: flex; 
		flex-wrap: wrap; 
		width: 92%;
	}
	
	.top-about__movie ul.flex li {
		width: 48%;
		margin-bottom: 20px;
		background: #FFF;
	}
	
	.top-about__imagebox {
		width: 55%;
		background-size: 200%;
		top: 80px;
	}
	
	.top-about__copy__inner {
		max-width: 54%;
		padding: 30px 0 30px 10px;
		margin: 0;
	}
	
	.top-about__copy__inner img {
		width: 86%;
		padding: 0 0 20px;
		margin-left: 5%;
	}
	
	.top-about__inner .detail__text {
		max-width: 100%;
	}	

	#top-page .top-btn {margin: 10px auto;}	
	
	/* event */
	.top-event {
		margin: 40px auto;
	}
	
	.top-event ul {
		width: 90%; 
		margin: 20px auto;
	}
	
	.top-event ul li {
		width: 100%;
		margin: 0 auto;
		margin-top: 3%;
	}
	
	.top-event ul li a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background: #1D4293;
	}
	
	/* .top-event ul li a img {
		width: 38%;
		display: block;
	} */
	
	.top-event ul li a p {
		width: 100%;
		padding: 20px 0;
	}
	
	/* .top-event ul li a p:before {
		right: 10px;
	} */

	/* .top-event ul li a p.wide:before {
		right: 10px;
	} */
	
	/* works */
	.top-works__inner {
		display: block;
		padding: 100px 0 70px 0;		
	}
	
	.top-works__inner .right {
		max-width: 90%;
		margin: 3% 8%;
	}
	
	.top-works__inner .bg-color {
		height: 0;
		padding-top: 60%;
	}
		
	.top-works__inner .left {
		width: 100%;
	}
	
	/* interview */
	.top-interview__inner {
		display: block;
		width: 100%;
	}
	
	.top-interview__inner .left {
		width: 84%;
		margin: 40px 8% 0;
	}
	
	.top-interview__inner .right {
		width: 100%;
	}
	
	.top-interview__inner .right img {
		width: 97%;
		margin-left: 3%;
	}
	
	.top-interview__inner .right img.img02 {
		margin: 5% 0 0 3%;
	}
	
	/* recruit */
	.top-recruit {
		width: calc(100% - 60px);
	}
	
	.top-recruit__link__icon {			
		display: block;
		margin: 0 auto;
	}
	
	.top-recruit__link li a {
		text-align: center;
	}
	
	.top-link-btn__item {
		width: calc(100% - 60px);
		display: block;
	}

	.top-link-btn__item li {
		width: 100%;
		margin-bottom: 10px;
		padding: 40px 20px;
	}	
}

/* 1500px〜（PC用）
---------------------------*/
@media (min-width: 1500px) {
	.top-about__imagebox {
		background: #68C1E0 url("../images/top_img04.jpg") no-repeat top left;
		width: 46%;
		padding-top: 30%;
		background-size: contain;
	}
}