@charset 'utf-8';

/* interview
------------------------------------------------ */
#interview {}

/* header */
.interview__header { position: relative; height: 220px; }
.interview__header .title--2 { padding-top: 68px; color: #fff; }
.interview__header .title--2 .en { width: 224px; }
.interview__serial { display: flex; position: absolute; top: 62px; right: 0; }
.interview__serial--item { margin-left: 14px; width: 74px; height: 74px; text-align: center; font-size: 2.6rem; line-height: 74px; }
.interview__serial--item:first-child { margin-left: 0; }
.interview__serial--item a { display: block; width: 100%; height: 100%; background: rgba(255,255,255,.4); border-radius: 50%; color: #fff; }
.interview__serial--item .active { background: #c3996d; }

/* block */
.inter__block { position: relative; background: #231815; color: #fff; }
.inter__block .wrap { height: 100%; }

/* faq */
.inter__faq { position: relative; padding: 34px 34px 0; background: #c3996d; color: #fff; }
.inter__faq--q { position: relative; padding-left: 1.6em; font-size: 2.4rem; font-weight: bold; }
.inter__faq--q:before { content: 'Ｑ.'; position: absolute; top: 0; left: 0; }
.inter__faq--a { position: relative; font-size: 1.6rem; }
.inter__faq--a strong { display: block; font-size: 3rem; font-weight: bold; letter-spacing: 0; }

/* 1 */
.inter--1 {}
.inter--1 .info { position: relative; }
.inter--1 .prize {}
.inter--1 .prize--jp,
.inter--1 .name { font-size: 2rem; font-weight: bold; }
.inter--1 .date { font-size: 1.8rem; }
.inter--1 .inter__faq {}
.inter--1 .photo {}

/* 2 */
.inter--2 {}
.inter--2 .inter__faq {}
.inter--2 .photo {}

/* 3 */
.inter--3 {}
.inter--3 .inter__faq:nth-of-type(1) {}
.inter--3 .inter__faq:nth-of-type(2) {}
.inter--3 .photo {}

/* last */
.inter--last { background: #fff; }
.inter--last .photo {}
.inter--last .en {}
.inter--last .inter__faq {}
.inter--last .inter__faq--q {}
.inter--last .inter__faq--a { text-align: center; }
.inter--last .name {}

/* interview__finalist */
.interview__finalist { background: #fff; }

@media screen and (min-width: 769px) {
	#interview { background: url(../../img/interview/bg1.jpg) no-repeat fixed; background-size: cover; }

	/* block */
	.inter__block { height: 436px; }

	/* 1 */
	.inter--1 {}
	.inter--1 .wrap { z-index: 2; }
	.inter--1 .info { padding: 50px 0 20px; width: 554px; }
	.inter--1 .prize { position: absolute; bottom: 0; right: 0; width: 192px; }
	.inter--1 .prize--jp { display: none; }
	.inter--1 .inter__faq { position: absolute; bottom: 0; width: 532px; height: 206px; }
	.inter--1 .inter__faq--a { margin-top: 24px; }
	.inter--1 .photo { position: absolute; top: 0; right: 0; width: 542px; z-index: 1; }

	/* 2 */
	.inter--2 { margin-top: 280px; }
	.inter--2 .inter__faq { position: absolute; top: -170px; right: 120px; padding: 34px 0 0 20px; width: 386px; height: 436px; }
	.inter--2 .inter__faq:before,
	.inter--2 .inter__faq:after { content: ''; position: absolute; top: 0; z-index: 1; }
	.inter--2 .inter__faq:before { left: -190px; border-top: solid transparent 436px; border-right: solid #c3996d 190px; }
	.inter--2 .inter__faq:after { right: -190px; border-bottom: solid transparent 436px; border-left: solid #c3996d 190px; }
	.inter--2 .inter__faq--q,
	.inter--2 .inter__faq--a { width: calc(100% + 100px); z-index: 2; }
	.inter--2 .inter__faq--a { margin: 52px 0 0 -60px; }
	.inter--2 .photo { position: absolute; top: 266px; left: 18px; width: 344px; }

	/* 3 */
	.inter--3 { margin-top: 500px; }
	.inter--3 .inter__faq { position: absolute; right: 90px; width: 606px; z-index: 1; }
	.inter--3 .inter__faq:nth-of-type(1) { top: -326px; height: 452px; }
	.inter--3 .inter__faq:nth-of-type(2) { top: 260px; padding-top: 120px; height: 534px; }
	.inter--3 .inter__faq--a { margin: 38px 28px 0; }
	.inter--3 .photo { position: absolute; top: 80px; left: -50px; width: 570px; z-index: 2; }

	/* last */
	.inter--last { margin-top: 506px; height: 366px; }
	.inter--last .wrap { top: -70px; }
	.inter--last .photo { position: absolute; top: 0; left: 20px; width: 282px; }
	.inter--last .en { position: absolute; bottom: -32px; right: -54px; width: 172px; z-index: 2; }
	.inter--last .info { margin-left: auto; width: calc(100% - 282px); height: 100%; background: #c3996d; color: #fff; }
	.inter--last .inter__faq--a { margin-top: 64px; }
	.inter--last .name { position: absolute; bottom: 30px; right: 100px; font-size: 1.6rem; font-weight: bold; z-index: 3; }
	.inter--last .prize--jp { display: none; }

	/* bg */
	.interview--bg { display: none; }

	/* interview__finalist */
	.interview__finalist__lists { justify-content: center; }

	.interview--2 .inter--1 .inter__faq { bottom: -110px; height: 313px; }
}

@media screen and (max-width: 1240px) and (min-width: 769px) {
	.inter--2 .inter__faq { right: 200px; }
	.inter--last .en { right: 0; }
}

@media screen and (max-width: 1060px) and (min-width: 769px) {
	.inter--3 .inter__faq:nth-of-type(2) { padding-top: 240px; }
}

@media screen and (max-width: 768px) {
	#interview { margin-bottom: -108px; }

	/* header */
	.interview__header { height: 146px; }
	.interview__header .title--2 { padding-top: 52px; }
	.interview__header .title--2 .en { width: 205px; }
	.interview__serial { display: none; }

	/* block */
	.inter__block { margin: 0 12px; background: #000; }

	/* faq */
	.inter__faq { padding: 16px 16px 0; width: 90.1360544218%; background: #c59b6d; }
	.inter__faq--q { font-size: 1.15rem; }
	.inter__faq--a { margin-top: 12px; font-size: 1rem; }
	.inter__faq--a strong { font-size: 1.25rem; }

	/* 1 */
	.inter--1 { padding-bottom: 70px; }
	.inter--1 .wrap { position: static; }
	.inter--1 .info { padding: 18px 0 18px 125px; min-height: 48px; }
	.inter--1 .prize { position: absolute; top: 18px; left: 20px; width: 96px; }
	.inter--1 .prize--jp,
	.inter--1 .name,
	.inter--1 .date { font-size: .9rem; }
	.inter--1 .inter__faq { position: absolute; bottom: -134px; right: 0; height: 156px; }
	.inter--1 .photo { margin-top: 16px; }

	/* 2 */
	.inter--2 { margin-top: 134px; padding-bottom: 55px; }
	.inter--2:after { content: ''; position: absolute; top: 22px; right: -12px; width: 152px; height: 54px; background: url(../../img/interview/deco1-sp.png) no-repeat center center; background-size: 100%; }
	.inter--2 .inter__faq { position: absolute; bottom: -195px; left: 0; height: 195px; }
	.inter--2 .photo { position: relative; width: 41.156462585%; }

	/* 3 */
	.inter--3 { margin: 486px 0 0; padding-bottom: 228px; }
	.inter--3:before { content: ''; position: absolute; top: -58px; right: 24px; transform: rotate(15deg); width: 110%; height: 100%; background: #000; }
	.inter--3:after { content: ''; position: absolute; top: -160px; right: 0; width: 52px; height: 52px; background: url(../../img/interview/deco2-sp.png) no-repeat center center; background-size: 100%; }
	.inter--3 .inter__faq { position: absolute; width: 82.8125%; }
	.inter--3 .inter__faq:nth-of-type(1) { top: -335px; right: 12px; height: 172px; }
	.inter--3 .inter__faq:nth-of-type(2) { top: -108px; left: 12px; width: 81.8027210884%; height: 208px; }
	.inter--3 .photo { display: none; }


	/* last */
	.inter--last { margin: 0; background: #fff; }
	.inter--last .wrap { top: -108px; }
	.inter--last .photo {}
	.inter--last .en { display: none; }
	.inter--last .info { display: flex; flex-flow: column-reverse; background: #c59b6d; color: #fff; }
	.inter--last .inter__faq { padding-bottom: 85px; width: auto; }
	.inter--last .inter__faq--a { margin-top: 32px; }
	.inter--last .name,
	.inter--last .prize--jp { padding: 0 16px; font-size: 1rem; font-weight: bold; }
	.inter--last .prize--jp { padding-top: 20px; }

	/* bg */
	.interview--bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/interview/bg1.jpg) repeat-y center top; background-size: 100%; z-index: -1; }
	
}