@charset "utf-8";

/* 受賞者対談
========================================================= */



/* インデックス
--------------------------------------------------------- */

.index .lead { display: table; font-size: 1.8rem; line-height: 1.5; text-align: center; margin: 60px auto 0; }

.index .yamane ul { width: 100%; max-width: 550px; display: table; margin: 60px auto 0; }
.index .yamane li { display: table-cell; vertical-align: middle; }
.index .yamane li:first-child { width: calc(380/550 * 100%); box-sizing: border-box; padding: 0 20px 0 0; }
.index .yamane li + li { width: calc(168/550 * 100%); }
.index .yamane dl { font-weight: bold; }
.index .yamane dt { font-size: 1.6rem; }
.index .yamane dd { font-size: 2.2rem; padding: 10px 0 0 0; }
.index .yamane p { font-size: 1.4rem; line-height: 1.5; padding: 15px 0 0 0; }

.index .main { width: 100%; max-width: 900px; background: #000000; margin: 80px auto 0; position: relative; }
.index .main figure + p {
	width: 65px;
	height: 76px;
	background: url(../../images/talk_year_gold.png) no-repeat;
	background-size: 100%;
	color: #ffffff;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	padding: 24px 0 0 0;
	position: absolute;
	top: -22px;
	left: 15px;
}
.index .main div { background: #ffffff; color: #000000; padding: 30px 0 0 0; }
.index .main div p:first-child {
	display: table;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 2.8rem; line-height: 1.4;
	font-weight: bold;
	margin: 0 auto;
}
.index .main div p + p { display: table; font-size: 2.2rem; font-weight: bold; margin: 15px auto 0; }
.index .main a { display: block; }

.index .list ul { width: 100%; max-width: 900px; overflow: hidden; margin: 0 auto; }
.index .list.new ul { display: none; }
.index .list li {
	width: calc(430/900 * 100%);
	background: #000000;
	float: left;
	position: relative;
	margin: 80px 0 0 0;
}
.index .list li:nth-child(2n) { float: right; }
.index .list figure + p {
	width: 58px;
	height: 64px;
	background: url(../../images/talk_year_red.png) no-repeat;
	background-size: 100%;
	color: #ffffff;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	padding: 18px 0 0 0;
	position: absolute;
	top: -15px;
	left: 15px;
}
.index .list div { background: #ffffff; color: #000000; padding: 20px 0 0 0; }
.index .list div p { font-size: 2.0rem; line-height: 1.4; }
.index .list div p + p { font-size: 1.8rem; font-weight: bold; padding: 15px 0 0 0; }
.index .list a { display: block; }

.index .linkyamane { display: table; 
	background: #f5f1e6;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 2.4rem;
	line-height: 3.4rem;
	padding: 10px 1em;
text-align: center; margin: 60px auto 0; }

.index .linkyamane a:visited { color: #000; }


@media screen and (min-width: 769px) {
	.index .main a:hover figure { opacity: 0.5; transition: all 0.3s; }
	.index .list a:hover figure { opacity: 0.5; transition: all 0.3s; }
}

@media screen and (max-width: 767px) {
	.index .lead { font-size: 1.6rem; text-align: left; margin: 30px auto 0; }
	.index .lead br { display: none; }
	
	.index .yamane ul { display: flex; flex-direction: column; margin: 30px auto 0; }
	.index .yamane li { display: block; }
	.index .yamane li:first-child { width: 100%; padding: 15px 0 0 0; order: 2; }
	.index .yamane li + li { width: 120px; margin: 0 auto; }
	.index .yamane dl { display: table; text-align: center; margin: 0 auto; }
	.index .yamane dt { font-size: 1.4rem; }
	.index .yamane dd { font-size: 1.8rem; }
	
	.index .main { display: none; }
	.index .list.new ul { display: block; margin: 20px auto 0; }
	.index .list li { width: 100%; max-width: 430px; float: none; margin: 50px auto 0; }
	.index .list li:nth-child(2n) { float: none; margin: 50px auto 0; }
	.index .list figure + p { width: 40px; font-size: 1.4rem; padding: 12px 0 0 0; top: -10px; left: 0; }
	.index .list.new figure + p { background: url(../../images/talk_year_gold.png) no-repeat; background-size: 100%; }
	.index .list div { color: #000000; padding: 15px 0 0 0; }
	.index .list div p { font-size: 1.6rem; }
	.index .list div p + p { font-size: 1.5rem; padding: 5px 0 0 0; }

	.index .linkyamane { font-size: 2.1rem; padding: 10px 1.4em; line-height: 3rem; }
	.index .linkyamane span { display: block; }
}



/* 対談ページ
--------------------------------------------------------- */

.talk .main { width: 100%; max-width: 850px; margin: 90px auto 0; }
.talk .main.mtNone { width: 100%; max-width: 850px; margin: 0 auto; }
.talk .main figure { width: 100%; max-width: 670px; margin: 0 auto; }
.talk .main figure + p {
	display: table;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 3.3rem;
	line-height: 1.5;
	font-weight: bold;
	margin: 50px auto 0;
}
.talk .main figure + p span { display: table; margin: 0 auto; }
.talk .main ul { display: table; margin: 40px auto 0; }
.talk .main li { display: table-cell; vertical-align: middle; font-weight: bold; text-align: center; }
.talk .main li p:first-child { font-size: 1.4rem; line-height: 1.5; }
.talk .main li p + p { font-size: 2.4rem; line-height: 1.5; }
.talk .main li p + p span { font-size: 1.6rem; }
.talk .main li:nth-child(2) img { width: 32px; margin: 0 40px; }
.talk .main ul + p { font-size: 1.8rem; line-height: 1.8; font-weight: bold; padding: 50px 0 0 0; }

.talkMain { width: 100%; max-width: 1200px; margin: 0 auto; }

.talk .link { width: 100%; max-width: 850px; margin: 70px auto 0; }
.talk section + .link { margin: 110px auto 0; }
.talk .link ul {
	width: 100%;
	display: table;
	border-right: solid 1px #000000;
	table-layout: fixed;
}
.talk .link li { display: table-cell; border-left: solid 1px #000000; vertical-align: middle; }
.talk .link li a {
	height: 60px;
	display: block;
	color: #000000;
	font-size: 2.2rem;
	line-height: 1.2;
	text-align: center;
	margin: 0 2px;
	position: relative;
}
.talk .link li a:after {
	content: "";
	width: 0;
	height: 2px;
	display: block;
	border-radius: 50%;
	background: linear-gradient(90deg, #ffffff, #d4bc97 30%, #d4bc97 70%, #ffffff);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	opacity: 0;
	transition: all 0.3s;
}
.talk .link li.over a:after { width: 100%; opacity: 1; }
.talk .link li a p { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.talk .link li a p br { display: none; }

.talk section { width: 100%; max-width: 850px; margin: 80px auto 0; }
.talk section + section { margin: 80px auto 0; }

.talk section h2 {
	background: #f5f1e6;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 2.4rem;
	line-height: 3.4rem;
	padding: 10px 0.5em;
}

.talk section h2 span { display: table; margin: 0 auto; }

.talk section .conversation { margin: 30px 0 0 0; }
.talk section .photo + .conversation { margin: 60px 0 0 0; }
.talk section .conversation ul { font-size: 1.8rem; line-height: 3.0rem; }
.talk section .conversation ul + ul { margin: 0.5em 0 0 0; }
.talk section .conversation li { display: table-cell; }
.talk section .conversation li:first-child { width: 3.0em; font-weight: bold; }

.talk section .photo { display: table; margin: 60px auto 0; }
.talk section .photo figure,
.talk section .photo dl { display: table-cell; vertical-align: middle; }
.talk section .photo figure { max-width: 320px; }
.talk section .photo dl { font-family: "Yu Mincho", "YuMincho"; padding: 0 90px 0 36px; }
.talk section .photo figure + dl { padding: 0 16px 0 90px; }
.talk section .photo dt { font-size: 2.6rem; line-height: 1.5; position: relative; }
.talk section .photo dt:before { 
	content: "";
	width: 36px;
	height: 36px;
	display: block;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	position: absolute;
	top: -36px;
	left: -36px;
}
.talk section .photo dd { font-size: 2.0rem; line-height: 1.5; padding: 20px 0 0 0; position: relative; }
.talk section .photo dd span { font-size: 1.6rem; }
.talk section .photo dd:before { 
	content: "";
	width: 36px;
	height: 36px;
	display: block;
	border-right: solid 1px #000000;
	border-bottom: solid 1px #000000;
	position: absolute;
	right: -16px;
	bottom: -16px;
}
.talk section .photo figure.w840 { width: 100%; max-width: 840px; }
.talk section .photo figure.w480 { width: 100%; max-width: 480px; }
.talk section .photo figure.w300 { width: 100%; max-width: 300px; padding: 0 3.0em; }

.talk .btmPhoto { width: 100%; max-width: 980px; margin: 80px auto 0; overflow: hidden; }
.talk .btmPhoto figure { width: calc(480/980 * 100%); max-width: 480px; float: left; }
.talk .btmPhoto figure + figure { float: right; }

.talk .btmPhoto_2 { width: 100%; max-width: 980px; margin: 80px auto 0; overflow: hidden; }
.talk .btmPhoto_2 { width: 100%; overflow: hidden; }

.talk .comment { width: 100%; max-width: 800px; margin: 80px auto 0; }
.talk .comment > p { display: table; font-size: 1.8rem; line-height: 1.5; font-weight: bold; margin: 0 auto; }
.talk .comment .movie { max-width: 650px; margin: 40px auto 0; }
.talk .comment .movie + .movie { margin: 60px auto 0; }
.talk .comment .movie p { width: 100%; position: relative; padding-bottom: 56.25%; }
.talk .comment .message {
	border: solid 7px #dfd9c9;
	box-sizing: border-box;
	padding: 25px 90px 40px;
	margin: 110px auto 0;
}
.talk .comment .message p { font-size: 1.6rem; font-weight: bold; text-align: center; }
.talk .comment .message dl { margin: 40px 0 0 0; }
.talk .comment .message dt {
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 2.3rem;
	text-align: center;
	padding: 25px 1em;
}
.talk .comment .message dd { font-size: 1.8rem; line-height: 2; margin: 20px 0 0 0; }



@media screen and (min-width: 769px) {
	.talk .link li:hover a:after { width: 100%; opacity: 1; }
}

@media screen and (max-width: 767px) {
	.talk .main { margin: 30px auto 0; }
	.talk .main figure + p { font-size: 2.4rem; margin: 20px auto 0; }
	.talk .main figure + p span { display: inline; transition: all 0.3s; }
	.talk .main ul {
		border-top: solid 1px #cecece;
		border-bottom: solid 1px #cecece;
		padding: 10px 0;
		margin: 25px auto 0;
	}
	.talk .main li { display: block; }
	.talk .main li p:first-child { font-size: 1.3rem; }
	.talk .main li p + p { font-size: 1.8rem; }
	.talk .main li p + p span { font-size: 1.4rem; }
	.talk .main li:nth-child(2) img { width: 20px; margin: 5px auto; }
	.talk .main ul + p { font-size: 1.5rem; line-height: 1.5; padding: 30px 0 0 0; }
	
	.talk .link { margin: 40px auto 0; }
	.talk section + .link { margin: 60px auto 0; }
	.talk .link li a { height: 50px; font-size: 1.6rem; }
	.talk .link li a p br { display: block; }
	
	.talk section { margin: 40px auto 0; }
	.talk section + section { margin: 50px auto 0; }
	
	.talk section h2 { font-size: 1.8rem; line-height: 2.4rem; padding: 10px 1em; }
	.talk section h2 br { display: none; }
	
	.talk section .conversation { margin: 20px 0 0 0; }
	.talk section .photo + .conversation { margin: 40px 0 0 0; }
	.talk section .conversation ul { font-size: 1.5rem; line-height: 2.5rem; }
	.talk section .conversation ul + ul { margin: 1em 0 0 0; }
	
	.talk section .photo { margin: 40px auto 0; }
	.talk section .photo figure { width: calc(140/320 * 100%); }
	.talk section .photo dl { padding: 0 10px 0 10px; }
	.talk section .photo figure + dl { padding: 0 0 0 20px; }
	.talk section .photo dt { font-size: 1.5rem; }
	.talk section .photo dt:before { width: 20px; height: 20px; top: -10px; left: -10px; }
	.talk section .photo dt br { display: none; }
	.talk section .photo dd { font-size: 1.3rem; padding: 10px 0 0 0; }
	.talk section .photo dd span { font-size: 1.1rem; }
	.talk section .photo dd:before { width: 20px; height: 20px; right: 0; bottom: 0; }
	
	.talk .btmPhoto { margin: 50px auto 0; }
	.talk .btmPhoto figure { width: 100%; float: none; margin: 0 auto; }
	.talk .btmPhoto figure + figure { float: none; margin: 30px auto 0; }
	
	.talk .btmPhoto_2 { margin: 50px auto 0; }
	.talk .btmPhoto_2 figure { width: 100%; margin: 0 auto; }
	
	.talk .comment { margin: 50px auto 0; }
	.talk .comment p { font-size: 1.5rem; }
	.talk .comment .movie { margin: 20px auto 0; }
	.talk .comment .movie + .movie { margin: 20px auto 0; }
	.talk .comment .message { border: solid 5px #dfd9c9; padding: 20px; margin: 40px auto 0; }
	.talk .comment .message p { font-size: 1.5rem; }
	.talk .comment .message dl { margin: 20px 0 0 0; }
	.talk .comment .message dt { font-size: 1.8rem; padding: 15px 0; }
	.talk .comment .message dd { font-size: 1.5rem; line-height: 1.6; margin: 15px 0 0 0; }
}

@media screen and (max-width: 480px) {
	.talk .main { margin: 15px auto 0; }
	.talk .main ul { width: 100%; }
}