@charset "UTF-8";

/* CSS Document */
body {
	-webkit-text-size-adjust: 100%;
}

/*=========================================== 
スマホ向けのレイアウトの指定：～960px 
===========================================*/
@media only screen and (min-width: 0px) {
	#container {
		margin: 0 auto;
		width: 100%;
		color: rgb(75, 75, 75);
	}

	/* メインビジュアル */
	.mv_sp img {
		width: 100%;
		height: auto;
		display: block;
	}

	.mv {
		display: none;
	}

	#wrapper {
		margin: 0 auto;
		width: 100%;
	}

	/* タイトル周り */
	.head {
		margin: 45px auto 36px;
		width: 90%;
	}

	h2 {
		font-size: 24px;
		text-align: center;
	}

	h2 p {
		letter-spacing: 3px;
		line-height: 1.5;
	}

	p.title_text {
		font-size: 14px;
		text-align: center;
		margin-top: 36px;
		line-height: 1.5;
	}

	span.br {
		display: inline-block;
	}

	/* 各インタビューのリンク */
	ul li img {
		width: 100px;
		margin: 0 auto 10px;
		height: auto;
	}

	ul {
		text-align: center;
	}

	ul.list_2 {
		margin-bottom: 45px;
	}

	ul li.list {
		margin: 0 9px 0 0;
		display: inline-block;
	}

	ul li.list:last-child {
		margin: 0;
		display: inline-block;
	}

	/* インタビュー */
	#interview_1 {
		margin: 0 auto;
		width: 100%;
	}

	#interview_1 .visual {
		width: 100%;
		height: 327px;
		background: url(../images/intaview_img1-1_sp.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_2,
	#interview_3,
	#interview_4,
	#interview_5,
	#interview_6,
	#interview_7 {
		margin: 36px auto 0;
		width: 100%;
	}

	#interview_2 .visual {
		width: 100%;
		height: 327px;
		background: url(../images/intaview_img2-1_sp.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_3 .visual {
		width: 100%;
		height: 327px;
		background: url(../images/intaview_img3-1_sp.jpg) no-repeat center top;
		background-size: cover;
		position: relative;
	}

	#interview_4 .visual {
		width: 100%;
		height: 327px;
		background: url(../images/intaview_img4-1_sp.jpg) no-repeat center top;
		background-size: cover;
		position: relative;
	}

	#interview_5 .visual {
		width: 100%;
		height: 327px;
		background: url(../images/intaview_img5-1_sp.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_6 .visual {
		width: 100%;
		height: 327px;
		background: url(../images/intaview_img6-1_sp.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_7 .visual {
		width: 100%;
		height: 327px;
		background: url(../images/intaview_img7-1_sp.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	/* インタビュー  共通部分*/
	.box_1 {
		width: 95%;
		background: rgba(75, 75, 75, 0.6);
		color: rgb(255, 255, 255);
		padding: 10px 0 10px 5%;
	}

	h3 {
		font-size: 20px;
		letter-spacing: 3px;
	}

	h3 p {
		line-height: 1.5;
	}

	.box_2 {
		background: rgb(35, 24, 21);
		padding: 10px;
		width: 160px;
		position: absolute;
		bottom: 5%;
		left: 5%;
	}

	p.small {
		color: rgb(255, 255, 255);
		font-size: 14px;
		padding-top: 5px;
	}

	p.name {
		color: rgb(255, 255, 255);
		font-size: 24px;
	}

	dl.contents_1,
	dl.contents_2 {
		margin: 0 auto;
		width: 90%;
	}

	dl dt {
		font-size: 20px;
		color: rgb(0, 161, 255);
		margin: 36px 0 20px 0;
		line-height: 1.5;
	}

	p.text {
		font-size: 14px;
		line-height: 2;
		text-align: justify;
		text-justify: inter-ideograph;
		margin: 20px 0 20px 0;
		word-break: break-all;
	}

	dd img {
		width: 100%;
		height: auto;
	}

	/*インタビュー > 一言メッセージ*/
	.message img {
		width: 45%;
		min-width: 150px;
		height: auto;
		margin: 10px 0 0 20px;
	}

	.message {
		margin: 30px auto 0;
		border: 1px solid rgb(144, 144, 144);
		border-radius: 10px;
		box-shadow: 1px 1px 3px rgb(144, 144, 144);
		width: 90%;
	}

	.message_text {
		margin: 10px auto;
		width: 80%;
		text-align: justify;
		font-size: 12px;
		line-height: 2;
	}

	#interview_7 .message {
		margin: 10px auto 45px;
	}

	/*ページトップ ボタン*/
	#page_top {
		color: rgb(220, 220, 220);
		position: fixed;
		bottom: 15px;
		right: 15px;
		font-size: 1.4rem;
		z-index: 9999;
	}

	#page_top a {
		background: rgb(100, 100, 100);
		color: rgb(255, 255, 255);
		width: 50px;
		padding: 15px 5px;
		text-align: center;
		display: block;
		border-radius: 5px;
	}

	#page_top a:hover {
		background: rgba(100, 100, 100, 0.7);
	}
}

/*=========================================== 
PC向けのレイアウトの指定：961px〜
===========================================*/
@media only screen and (min-width: 960px) {

	html,
	body {
		overflow-x: hidden;
	}

	#container {
		margin: 0 auto;
		max-width: 100vw;
	}

	/* メインビジュアル */
	.mv {
		width: 100vw;
		height: 294px;
		background: url(../images/intaview_mv.jpg) no-repeat center top;
		background-size: cover;
		display: block;
	}

	.mv_sp {
		display: none;
	}

	/* タイトル周り */
	.head {
		margin: 90px auto 50px;
		width: 960px;
	}

	h2 {
		font-size: 45px;
	}

	h2 p {
		letter-spacing: 5px;
	}

	p.title_text {
		margin-top: 50px;
		font-size: 16px;
	}

	/* 各インタビューのリンク */
	ul li img {
		width: 155px;
		height: auto;
		margin: 0 auto;
	}

	ul.list_2 {
		margin-bottom: 90px;
	}

	ul li.list {
		margin: 0 14px 0 0;
		display: inline-block;
	}

	ul li.list a:hover {
		opacity: 0.85;
		filter: alpha(opacity=85);
		/* IE 6,7*/
		-ms-filter: "alpha(opacity=85)";
		/* IE 8,9 */
		-moz-opacity: 0.85;
		/* FF , Netscape */
		-khtml-opacity: 0.85;
		/* Safari 1.x */
		zoom: 1;
		/*IE*/
	}

	/* インタビュー */
	#interview_1 {
		margin: 0 auto;
		width: 100%;
	}

	#interview_1 .visual {
		width: 100vw;
		height: 327px;
		background: url(../images/intaview_img1-1.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_2,
	#interview_3,
	#interview_4,
	#interview_5,
	#interview_6,
	#interview_7 {
		margin: 72px auto 0;
		width: 100%;
	}

	#interview_2 .visual {
		width: 100vw;
		height: 327px;
		background: url(../images/intaview_img2-1.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_3 .visual {
		width: 100vw;
		height: 327px;
		background: url(../images/intaview_img3-1.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_4 .visual {
		width: 100vw;
		height: 327px;
		background: url(../images/intaview_img4-1.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_5 .visual {
		width: 100vw;
		height: 327px;
		background: url(../images/intaview_img5-1.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_6 .visual {
		width: 100vw;
		height: 327px;
		background: url(../images/intaview_img6-1.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	#interview_7 .visual {
		width: 100vw;
		height: 327px;
		background: url(../images/intaview_img7-1.jpg) no-repeat center;
		background-size: cover;
		position: relative;
	}

	/* インタビュー  共通部分*/
	.box_1 {
		width: 100%;
		padding: 10px 0;
	}

	h3 {
		font-size: 28px;
		letter-spacing: 5px;
	}

	h3 p {
		max-width: 1200px;
		margin: 0 auto;
		padding-left: 5%;
	}

	.box_2 {
		margin: 160px auto 0;
		background: transparent;
		padding: 0;
		max-width: 1200px;
		width: 95%;
		position: static;
		bottom: 0;
		left: 0;
		padding-left: 5%;
	}

	.box_pc {
		width: 220px;
		background: rgb(35, 24, 21);
		padding: 15px;
	}

	p.small {
		font-size: 18px;
		padding-top: 8px;
	}

	p.name {
		font-size: 28px;
	}

	dl.contents_1,
	dl.contents_2 {
		margin: 0 auto;
		width: 960px;
	}

	dl dt {
		font-size: 30px;
		margin: 72px 0 40px 0;
	}

	.contents_1 p.text {
		width: 570px;
		font-size: 15px;
		margin: 0;
		float: right;
	}

	.contents_1 dd img {
		max-width: 372px;
		padding-top: 7px;
		height: auto;
		float: left;
	}

	.contents_2 dt {
		font-size: 30px;
		margin: 50px 0 40px 0;
	}

	.contents_2 p.text {
		font-size: 15px;
		margin: 0;
	}

	.contents_2 dd img {
		max-width: 580px;
		height: auto;
		margin: 0 0 3px 18px;
		padding-top: 7px;
		float: right;
	}

	.contents_1:after {
		content: "";
		clear: both;
		display: block;
	}

	/*インタビュー > 一言メッセージ*/
	.message img {
		width: 250px;
		height: auto;
		margin: 20px 0 0 40px;
	}

	.message {
		margin: 50px auto 0;
		border: 1px solid rgb(144, 144, 144);
		border-radius: 10px;
		box-shadow: 1px 1px 3px rgb(144, 144, 144);
		max-width: 960px;
		clear: both;
	}

	.message_text {
		margin: 20px auto;
		width: 90%;
		font-size: 18px;
	}

	#interview_7 .message {
		margin: 50px auto 90px;
	}

	/*ページトップ ボタン*/
	#page_top {
		color: rgb(220, 220, 220);
		position: fixed;
		bottom: 30px;
		right: 30px;
		font-size: 1.8rem;
	}

	#page_top a {
		background: rgb(100, 100, 100);
		color: rgb(255, 255, 255);
		width: 120px;
		padding: 30px 0;
		text-align: center;
		display: block;
		border-radius: 5px;
	}

	#page_top a:hover {
		background: rgba(100, 100, 100, 0.7);
	}
}