/* プロジェクト紹介INDEX
=========================================================================
=========================================================================*/
#index {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	padding: 0 25px;
	width: 100%;
	background: #000;
}

#index h1 {
	margin: 80px auto 40px;
	width: 233px;
	height: 73px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_title.svg) center center no-repeat;
	background-size: contain;
}

#index h2 {
	position: relative;
	margin: 0 auto 80px;
	font-size: 1.4rem;
	color: #FFF;
	text-align: center;
}

#list ul {
	position: relative;
	margin: 0;
	width: 100%;
}

#list ul li {
	display: block;
	overflow: hidden;
	position: relative;
	height: 590px;
}

#list .inner {
	overflow: hidden;
	margin: 110px auto 0;
	width: 1060px;
}

@media (max-width:1110px) {
	#list .inner {
		padding: 0 25px;
		width: 100%;
	}
}

#list .conainer {
	overflow: hidden;
	padding: 40px 50px;
	width: calc(522 / 1060 * 100%);
	background-color: rgba(255, 255, 255, 0.8);
}

/* 01 明野 公信 */
#list li.episode01 {
	background: url(../images/job/project_index_01.jpg) center top no-repeat;
	background-size: cover;
}

#list li.episode01 p.episode01 {
	margin: 0 0 10px;
	width: 123px;
	height: 42px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_episode01.svg) center center no-repeat;
	background-size: contain;
}

/* 02 伊藤 英樹 */
#list li.episode02 {
	background: url(../images/job/project_index_02.jpg) center top no-repeat;
	background-size: cover;
}

#list li.episode02 .conainer {
	margin-left: auto;
}

#list li.episode02 p.episode02 {
	margin: 0 0 10px;
	width: 129px;
	height: 42px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_episode02.svg) center center no-repeat;
	background-size: contain;
}

/* 03 五島 嘉国*/
#list li.episode03 {
	background: url(../images/job/project_index_03.jpg) center top no-repeat;
	background-size: cover;
}

#list li.episode03 p.episode03 {
	margin: 0 0 10px;
	width: 129px;
	height: 42px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_episode03.svg) center center no-repeat;
	background-size: contain;
}

#list h2 {
	margin: 0 0 30px;
	font-weight: bold;
	font-size: 2.6rem;
	text-align: left;
}

#list h3 {
	position: relative;
	margin-bottom: 30px;
	text-align: left;
	font-size: 1.4rem;
	font-weight: normal;
}

#list li.episode02 h3 {
	margin-bottom: 60px;
}

#list h3 span {
	display: block;
	margin: 10px 0 0;
	font-size: 2.0rem;
	font-weight: bold;
}

#list .conainer a.bottun_detail {
	display: block;
	margin: 0 auto;
	width: calc(362 / 422 * 100%);
	height: 70px;
	text-decoration: none;
	text-align: center;
	font-size: 1.6rem;
	line-height: 70px;
	color: #FFF;
	background-color: #000;
	border-radius: 4px;
}


/* 各ページ
TITLEエリア
=========================================================================
=========================================================================*/
#title {
	overflow: hidden;
	position: relative;
	padding: 0;
	width: 100%;
	height: 580px;
}

#title.project_01 {
	/* 01 明野 公信 */
	background: url(../images/job/project_01_title_bg.jpg) center top no-repeat;
	background-size: cover;
}

#title.project_02 {
	/* 02 伊藤 英樹 */
	background: url(../images/job/project_02_title_bg.jpg) center top no-repeat;
	background-size: cover;
}

#title.project_03 {
	/* 03 五島 嘉国 */
	background: url(../images/job/project_03_title_bg.jpg) center top no-repeat;
	background-size: cover;
}

#title h1 {
	margin: 205px auto 5px;
	width: 233px;
	height: 79px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_title.svg) center center no-repeat;
	background-size: contain;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.16));
}

/* NAME
=========================================================================
=========================================================================*/
#name {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 960px;
	z-index: 2;
}

@media (max-width:1010px) {
	#name {
		padding: 0 25px;
		width: 100%;
	}
}

#name .conainer {
	position: absolute;
	top: -255px;
	left: 0;
	margin: 0 auto;
	padding: 40px 50px 45px;
	width: calc(522 / 960 * 100%);
	background: #FFF;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
}

@media (max-width:1010px) {
	#name .conainer {
		left: 25px;
	}
}

#name .conainer.episode02,
#name .conainer.episode03 {
	left: auto;
	right: 0;
}

@media (max-width:1010px) {

	#name .conainer.episode02,
	#name .conainer.episode03 {
		right: 25px;
	}
}

#name p.episode01 {
	/* 01 明野 公信 */
	margin-bottom: 22px;
	width: 123px;
	height: 42px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_episode01.svg) left center no-repeat;
	background-size: contain;
}

#name p.episode02 {
	/* 02 伊藤 英樹 */
	margin: 0 0 10px;
	width: 127px;
	height: 42px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_episode02.svg) left center no-repeat;
	background-size: contain;
}

#name p.episode03 {
	/* 03 五島 嘉国 */
	margin: 0 0 10px;
	width: 129px;
	height: 42px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_episode03.svg) left center no-repeat;
	background-size: contain;
}

#name h2 {
	margin-bottom: 1em;
	font-weight: bold;
	font-size: 2.6rem;
}

#name h3 {
	font-size: 1.6rem;
}

#name h3 span {
	display: block;
	margin-top: 18px;
	font-weight: bold;
	font-size: 2.3rem;
}

/* INTERVIEW SECTION
=========================================================================
=========================================================================*/
#interview {
	overflow: hidden;
	position: relative;
	padding: 125px 0 0;
}

#interview.project_01 {
	/* 明野 公信 */
	background: #E6E6DC;
}

#interview.project_02 {
	/* 伊藤 英樹 */
	background: #F0E3DE;
}

#interview.project_03 {
	/* 五島 嘉国 */
	background: #DCE0E5;
}

#interview .conainer {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 960px;
}

@media (max-width:1010px) {
	#interview .conainer {
		padding: 0 25px;
		width: 100%;
	}
}

#interview h3 {
	position: relative;
	margin: 0 auto 60px;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
}

#interview h3.first {
	margin: 60px auto 50px;
}

#interview p {
	position: relative;
	margin: 0 auto 60px;
	font-size: 1.4rem;
	text-align: left;
}

#interview p.last {
	margin: 0 auto 80px;
}

#interview .photo {
	position: relative;
	margin: 0 auto 60px;
	width: calc(760 / 960 * 100%);
}

#interview p.annotation {
	margin: 0 0 80px;
	font-size: 1.2rem;
	text-align: right;
}

#interview a.button_other {
	display: block;
	text-decoration: none;
	margin: 0 auto 120px;
	width: 406px;
	height: 80px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/job/project_button_other.svg) center center no-repeat;
	background-color: #000;
	background-size: 123px auto;
	transition: all 1s;
}

#interview a.button_other:hover {
	background-color: #999;
}

/*  スマホ（740px以下）
=========================================================================
=========================================================================*/
@media (max-width:740px) {

	/* プロジェクト紹介INDEX
	=========================================================================
	=========================================================================*/
	#index h2 {
		text-align: left;
	}

	#list .inner {
		position: absolute;
		bottom: 30px;
		margin: 0;
	}

	#list .conainer {
		overflow: hidden;
		padding: 20px 25px;
		width: 66%;
	}

	/* 01 明野 公信 */
	#list li.episode01 {
		background: url(../images/job/project_index_01@2x.jpg) center top no-repeat;
		background-size: cover;
	}

	/* 02 伊藤 英樹 */
	#list li.episode02 {
		background: url(../images/job/project_index_02@2x.jpg) center top no-repeat;
		background-size: cover;
	}

	#list li.episode02 .conainer {
		margin-left: 0;
	}

	/* 03 五島 嘉国*/
	#list li.episode03 {
		background: url(../images/job/project_index_03@2x.jpg) center top no-repeat;
		background-size: cover;
	}

	#list li.episode03 .conainer {
		margin-left: auto;
	}

	#list h2 {
		margin: 0 0 30px;
		font-size: 2.3rem;
		font-size: 3.8vw;
	}

	#list h3 {
		margin-bottom: 15px;
		font-size: 1.3rem;
	}

	#list li.episode02 h3 {
		margin-bottom: 15px;
	}

	#list h3 span {
		font-size: 1.8rem;
	}

	#list .conainer a.bottun_detail {
		height: 50px;
		font-size: 1.6rem;
		line-height: 50px;
	}

	/* 各ページ
	TITLEエリア
	=========================================================================
	=========================================================================*/
	#title {
		margin-top: 0;
	}

	#title.project_01 {
		/* 01 明野 公信 */
		background: url(../images/job/project_01_title_bg@2x.jpg) center center no-repeat;
		background-size: cover;
	}

	#title.project_02 {
		/* 02 伊藤 英樹 */
		background: url(../images/job/project_02_title_bg@2x.jpg) center center no-repeat;
		background-size: cover;
	}

	#title.project_03 {
		/* 03 五島 嘉国 */
		background: url(../images/job/project_03_title_bg@2x.jpg) left center no-repeat;
		background-size: cover;
	}

	/* NAME
	=========================================================================
	=========================================================================*/
	#name .conainer {
		top: -155px;
		padding: 20px 25px 22px;
		width: 70%;
	}

	#name .conainer.episode02,
	#name .conainer.episode03 {
		left: 25px;
		right: auto;
	}

	#name p.episode01 {
		/* 01 明野 公信 */
		margin-bottom: 10px;
		height: 30px;
	}

	#name p.episode02 {
		/* 02 伊藤 英樹 */
		margin-bottom: 10px;
		height: 30px;
	}

	#name p.episode03 {
		/* 03 五島 嘉国 */
		margin-bottom: 10px;
		height: 30px;
	}

	#name h2 {
		font-size: 2.3rem;
	}

	#name h3 {
		font-size: 1.4rem;
	}

	#name h3 span {
		margin-top: 10px;
		font-size: 2.0rem;
	}

	/* INTERVIEW SECTION
	=========================================================================
	=========================================================================*/
	#interview .photo {
		width: 100%;
	}

}

/*  スマホ（480px以下）
=========================================================================
=========================================================================*/
@media (max-width:480px) {

	/* プロジェクト紹介INDEX
	=========================================================================
	=========================================================================*/
	#index h1 {
		margin: 135px auto 40px;
		width: 188px;
		height: 59px;
	}

	#index h2 {
		margin: 0 auto 60px;
		font-size: 13px;
		font-size: 1.3rem;
	}

	#list ul li {
		height: 410px;
	}

	#list .inner {
		bottom: 15px;
	}

	#list .conainer {
		padding: 15px 20px;
		width: 100%;
	}

	#list h2 {
		margin: 0 0 10px;
		font-size: 5.0vw;
	}

	#list h3 {
		font-size: 2.5vw;
	}

	#list h3 span {
		margin: 10px 0 0;
		font-size: 4.5vw;
	}

	/* 01 明野 公信 */
	#list li.episode01 p.episode01 {
		margin: 0 0 5px;
		width: 77px;
		height: 26px;
	}

	/* 02 伊藤 英樹 */
	#list li.episode02 p.episode02 {
		margin: 0 0 5px;
		width: 77px;
		height: 26px;
	}

	/* 03 */
	#list li.episode03 p.episode03 {
		margin: 0 0 5px;
		width: 88px;
		height: 26px;
	}

	#list .conainer a.bottun_detail {
		height: 40px;
		font-size: 1.2rem;
		line-height: 40px;
		width: 100%;
	}

	/* 各ページ
	TITLEエリア
	=========================================================================
	=========================================================================*/
	#title {
		height: 600px;
	}

	#title h1 {
		margin: 288px auto 40px;
		width: 181px;
		height: 61px;
		background: url(../images/job/project_title@2x.png) center center no-repeat;
		background-size: cover;
	}

	#title h2 {
		font-size: 5.6vw;
	}

	/* NAME
	=========================================================================
	=========================================================================*/
	#name .conainer {
		top: -215px;
		padding: 15px 20px 20px;
		width: 87%;
	}

	#name .conainer.episode02,
	#name .conainer.episode03 {
		left: 25px;
		right: auto;
	}

	#name p.episode01 {
		/* 01 明野 公信 */
		margin-bottom: 10px;
		height: 30px;
	}

	#name p.episode02 {
		/* 02 伊藤 英樹 */
		margin-bottom: 10px;
		height: 30px;
	}

	#name p.episode03 {
		/* 03 五島 嘉国 */
		margin-bottom: 10px;
		height: 30px;
	}

	#name h2 {
		font-size: 5.3vw;
	}

	#name h3 {
		font-size: 1.3rem;
	}

	#name h3 span {
		font-size: 5.0vw;
	}

	/* INTERVIEW SECTION
	=========================================================================
	=========================================================================*/
	#interview {
		margin: -25px 0 0;
		padding: 35px 0 0;
	}

	#interview h3 {
		margin: 0 auto 30px;
		font-size: 5.0vw;
		text-align: left;
	}

	#interview h3.first {
		margin: 40px auto 30px;
	}

	#interview p {
		margin: 0 auto 60px;
		font-size: 1.3rem;
	}

	#interview p.last {
		margin: 0 auto 100px;
	}

	#interview .photo {
		margin: 0 auto 60px;
	}

	#interview p.annotation {
		margin: 0 0 60px;
	}

	#interview a.button_other {
		margin: 0 auto 60px;
		width: 80%;
		height: 54px;
		background: url(../images/job/project_button_other.svg) center center no-repeat;
		background-size: 100px auto;
		background-color: #000;
	}

	#interview a.button_other:hover {
		background-color: #999;
	}

}