@charset "utf-8";

/*============================================================================*\
   $Interview
\*============================================================================*/

/*------------------------------------*\
   Tajimi story
\*------------------------------------*/

/* List
   ---------------------------------- */
.interview-list {
	list-style: none;
	margin-bottom: -3.8%;
	padding: 0;
	color: #fff;
	text-align: center;
	font-size: 1.3rem;
}
.interview-list li { margin-bottom: 3.8%; }

/* Thumbnail */
.interview-thum {
	overflow: hidden; /* 画像はみ出し対策 */
	position: relative;
	display: block;
	padding-top: 100%;
	background-color: #3d3e50;
	text-decoration: none;
	color: #fff;
}
.interview-thum--wide {
	padding-top: 45.9375%;
	padding-top: calc(229.32 / 499.2 * 100%);
}
.interview-thum--minamihime:before,
.interview-thum--koizumi:before,
.interview-thum--ikeda:before,
.interview-thum--nemoto:before,
.interview-thum--hokuei:before,
.interview-thum--wakinoshima:before,
.interview-thum--ichinokura:before,
.interview-thum--showa:before,
.interview-thum--seika:before,
.interview-thum--kyoei:before,
.interview-thum--yosei:before,
.interview-thum--takiro:before,
.interview-thum--kasahara:before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 5%;
	bottom: 3%;
	width: 75px;
	height: 82.5px;
	opacity: .4;
	background: url(../story/img/story_icon_district.png) no-repeat;
	background-size: 975px 82.5px;
}
.interview-thum--minamihime:before { background-position: 0 0; }
.interview-thum--koizumi:before { background-position: -75px 0; }
.interview-thum--ikeda:before { background-position: -150px 0; }
.interview-thum--nemoto:before { background-position: -225px 0; }
.interview-thum--hokuei:before { background-position: -300px 0; }
.interview-thum--wakinoshima:before { background-position: -375px 0; }
.interview-thum--ichinokura:before { background-position: -450px 0; }
.interview-thum--showa:before { background-position: -525px 0; }
.interview-thum--seika:before { background-position: -600px 0; }
.interview-thum--kyoei:before { background-position: -675px 0; }
.interview-thum--yosei:before { background-position: -750px 0; }
.interview-thum--takiro:before { background-position: -825px 0; }
.interview-thum--kasahara:before { background-position: -900px 0; }
.interview-thum:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60%;
	/* Permalink - use to edit and share this gradient: https://www.colorzilla.com/gradient-editor/#3d3e50+0,3d3e50+100&0+0,0.65+100 */
	background: -moz-linear-gradient(top, rgba(61, 62, 80, 0) 0%, rgba(61, 62, 80, .65) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(61, 62, 80, 0) 0%,rgba(61, 62, 80, .65) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(61, 62, 80, 0) 0%,rgba(61, 62, 80, .65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.interview-thum__txt {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	font-weight: bold;
	text-shadow: 0 0 3px #3d3e50, 0 0 7px rgba(61, 62, 80, .6), 0 0 30px #3d3e50;
}
.interview-thum__img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	max-width: none;
	transition: .2s;
}
.interview-list a:focus img,
.interview-list a:hover img {
	transform: scale(1.1);
	opacity: 1;
}

@media (max-width: 30em) {
	/* Thumbnail */
	.interview-thum--minamihime:before,
	.interview-thum--koizumi:before,
	.interview-thum--ikeda:before,
	.interview-thum--nemoto:before,
	.interview-thum--hokuei:before,
	.interview-thum--wakinoshima:before,
	.interview-thum--ichinokura:before,
	.interview-thum--showa:before,
	.interview-thum--seika:before,
	.interview-thum--kyoei:before,
	.interview-thum--yosei:before,
	.interview-thum--takiro:before,
	.interview-thum--kasahara:before {
		left: 3%;
		bottom: 3%;
	}
}

@media (min-width: 48em) {
	.interview-list {
		list-style: none;
		padding: 0;
		color: #fff;
		text-align: center;
		font-size: 1.6rem;
	}

	/* Thumbnail */
	.interview-thum__txt { padding: 15px; }
}
@media (min-width: 66.875em) {
	/* Thumbnail */
	.interview-thum--minamihime:before,
	.interview-thum--koizumi:before,
	.interview-thum--ikeda:before,
	.interview-thum--nemoto:before,
	.interview-thum--hokuei:before,
	.interview-thum--wakinoshima:before,
	.interview-thum--ichinokura:before,
	.interview-thum--showa:before,
	.interview-thum--seika:before,
	.interview-thum--kyoei:before,
	.interview-thum--yosei:before,
	.interview-thum--takiro:before,
	.interview-thum--kasahara:before {
		bottom: -10%;
		left: -10%;
		width: 150px;
		height: 165px;
		background-size: 1950px 165px;
	}
	.interview-thum--koizumi:before { background-position: -150px 0; }
	.interview-thum--ikeda:before { background-position: -300px 0; }
	.interview-thum--nemoto:before { background-position: -450px 0; }
	.interview-thum--hokuei:before { background-position: -600px 0; }
	.interview-thum--wakinoshima:before { background-position: -750px 0; }
	.interview-thum--ichinokura:before { background-position: -900px 0; }
	.interview-thum--showa:before { background-position: -1050px 0; }
	.interview-thum--seika:before { background-position: -1200px 0; }
	.interview-thum--kyoei:before { background-position: -1350px 0; }
	.interview-thum--yosei:before { background-position: -1500px 0; }
	.interview-thum--takiro:before { background-position: -1650px 0; }
	.interview-thum--kasahara:before { background-position: -1800px 0; }
}


/*------------------------------------*\
   Header
\*------------------------------------*/
.interview-header {
	overflow: hidden;
	position: relative;
}
.interview-header-img {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 50%;
}
.interview-header-img img {
	position: absolute;
	top: 0;
	left: -9%;
	height: 100%;
	max-width: inherit;
	margin: auto;
}
.interview-header-img__lede,
.interview-header-img__hash {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	margin: auto;
	padding-top: 15px;
	padding-bottom: 15px;
}
.interview-header-img__lede {
	padding-right: 15px;
	padding-left: 15px;
	padding: 15px;
	color: #fff;
	line-height: 1.75;
	-moz-font-feature-settings: "pkna";
	-webkit-font-feature-settings: "pkna";
	font-feature-settings: "pkna";
	letter-spacing: .1em;
	font-size: 1.3rem;
	font-weight: bold;
	text-shadow: 0 0 3px #3d3e50, 0 0 7px rgba(61, 62, 80, .6), 0 0 30px #3d3e50;
	background: -moz-linear-gradient(top, rgba(61, 62, 80, .3) 0%, rgba(61, 62, 80, 0) 50%);
	background: -webkit-linear-gradient(top, rgba(61, 62, 80, .3) 0%,rgba(61, 62, 80, 0) 50%);
	background: linear-gradient(to bottom, rgba(61, 62, 80, .3) 0%,rgba(61, 62, 80, 0) 50%);
}
.interview-header-img__lede--more-bottom,
.interview-header-img__lede--bottom {
	top: auto;
	bottom: 0;
	background: -moz-linear-gradient(top, rgba(61, 62, 80, 0) 0%, rgba(61, 62, 80, .3) 50%);
	background: -webkit-linear-gradient(top, rgba(61, 62, 80, 0) 0%,rgba(61, 62, 80, .3) 50%);
	background: linear-gradient(to bottom, rgba(61, 62, 80, 0) 0%,rgba(61, 62, 80, .3) 50%);
}
.interview-header-img__lede--more-bottom { padding-bottom: 25px; }
.interview-header-img__lede--reversal {
	background: -moz-linear-gradient(top, rgba(61, 62, 80, .2) 0%, rgba(61, 62, 80, 0) 50%);
	background: -webkit-linear-gradient(top, rgba(61, 62, 80, .2) 0%,rgba(61, 62, 80, 0) 50%);
	background: linear-gradient(to bottom, rgba(61, 62, 80, .2) 0%,rgba(61, 62, 80, 0) 50%);
	text-shadow: 0 0 3px #fff, 0 0 7px #fff, 0 0 30px #fff;
	color: #646573;
}
.interview-header__profile,
.interview-header__comment { padding: 0 15px; }
.interview-header__profile {
	position: relative;
	margin-top: -15px;
}
.interview-header__comment { margin-top: 15px; }
.interview-header-hash {
	display: inline-block;
	margin-bottom: .5em;
	padding: .3em 1em;
	background-color: #f9be40;
	letter-spacing: .05em;
	font-size: 1.6rem;
	font-weight: bold;
}
.interview-header-hash:before { content: "#"; }
.interview-header-profile-list dd { margin-left: 0; }
.interview-header-profile-heading {
	width: 100%;
	margin: .25em 0;
	background-color: #f9be40;
	color: inherit;
}
.interview-header-profile-heading:first-child { margin-top: 0; }
.interview-header-comment {
	position: relative;
	padding: 15px;
	border: 2px solid #f9be40;
	border-radius: 10px;
	background-color: #fff;
}
.interview-header-comment-heading {
	margin-bottom: .3em;
	line-height: 1.4;
	text-align: center;
}
.interview-header-comment-heading:after {
	content: "";
	display: block;
	width: 100%;
	max-width: 120px;
	height: 10px;
	margin: .3em auto 0;
	background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2211%22%20viewBox%3D%220%200%20120%2011%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23f9be40%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M39.41%2C2.323c-.754-.178-1.511-.126-2.258-.107-3.92.1-7.806.562-11.674%2C1.182-6.296%2C1.01-12.475%2C2.491-18.466%2C4.693-1.638.602-3.236%2C1.315-4.854%2C1.972-.149.06-.254.16-.358.271-.3.32-.657.426-1.074.27-.398-.149-.683-.406-.721-.853-.039-.456.156-.823.562-1.009.786-.361%2C1.596-.669%2C2.389-1.014%2C5.682-2.47%2C11.613-4.126%2C17.673-5.34%2C5.066-1.015%2C10.173-1.758%2C15.34-1.994%2C1.482-.068%2C2.976-.172%2C4.446.189.282.069.559.147.81.294.805.473.986%2C1.344.427%2C2.1-.409.553-1.004.873-1.583%2C1.206-.35.202-.711.387-1.163.631.452.05.769-.051%2C1.086-.114%2C4.155-.837%2C8.327-1.566%2C12.555-1.912%2C2.347-.192%2C4.701-.25%2C7.045.063.711.095%2C1.362.358%2C1.696%2C1.072.117.251.307.148.469.124%2C1.367-.196%2C2.732-.413%2C4.1-.601%2C2.124-.292%2C4.26-.393%2C6.403-.429%2C2.431-.041%2C4.856.053%2C7.282.164.548.025%2C1.093.092%2C1.618.247.573.17%2C1.028.493%2C1.046%2C1.161.008.291.162.257.356.257%2C2.036%2C0%2C4.066-.125%2C6.097-.237%2C3.804-.209%2C7.609-.419%2C11.413-.628%2C2.668-.146%2C5.338-.219%2C8.01-.217%2C1.411%2C0%2C2.824.039%2C4.233.113%2C2.138.112%2C4.273.267%2C6.41.412.225.015.456.054.667.13.434.155.661.534.599.961-.065.448-.344.695-.777.777-.103.019-.212.023-.317.016-1.03-.064-2.06-.122-3.09-.2-3.087-.234-6.177-.36-9.275-.331-3.627.033-7.245.258-10.866.435-2.819.138-5.632.365-8.451.481-2.362.097-4.727.318-7.091.014-.194-.025-.392-.059-.577-.121-.562-.188-.779-.521-.708-1.104.026-.213.045-.3-.242-.322-3.031-.239-6.066-.192-9.096-.061-2.351.102-4.678.478-7%2C.858-.794.13-1.583.288-2.376.42-1.005.166-1.533-.451-1.176-1.392.116-.305-.08-.269-.23-.274-.986-.028-1.972-.074-2.957-.063-5.201.059-10.284%2C1.034-15.369%2C2.001-1.549.294-3.083.69-4.665.795-.292.019-.575.002-.854-.091-1.035-.347-1.237-1.28-.401-1.985.711-.599%2C1.51-1.072%2C2.344-1.484.763-.376%2C1.518-.767%2C2.274-1.159.112-.058.26-.085.32-.266h-.001Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center; /* url../img/icon_rough_line.svg */
	background-size: contain;
}

@media (max-width: 30em) {
	.interview-header-img { padding-top: 71.875%; }
	.interview-header-img img { left: -35%; }
}

@media (min-width: 48em) {
	.interview-header {
		margin-right: auto;
		margin-left: auto;
		max-width: 66.875em; /* 1070px(66.875em) - 15px - 15px = 1040px */
		padding-left: 15px;
		padding-right: 15px;
	}
	.interview-header-img { padding-top: 0; }
	.interview-header-img img {
		position: static;
		height: auto;
		width: 100%;
	}
	.interview-header-img__lede,
	.interview-header-img__hash {
		padding-top: 8.3%;
		padding-bottom: 8.3%;
	}
	.interview-header-img__lede {
		padding-right: 8.3%;
		padding-left: 8.3%;
		font-size: 1.8rem;
	}
	.interview-header__profile,
	.interview-header__comment {
		padding-right: 0;
		padding-left: 0;
	}
	.interview-header__profile { margin-top: -40px; }
	.interview-header__comment { margin-top: 40px; }
	.interview-header-hash { font-size: 2rem; }
	.interview-header-comment:before,
	.interview-header-comment:after {
		content: "";
		position: absolute;
		right: 0;
		left: 0;
		width: 0;
		height: 0;
		margin: 0 auto;
		border-style: solid;
		border-top: 0;
		transform: translateY(-100%);
	}
	.interview-header-comment:before {
		top: -1px;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		border-bottom: 17px solid #f9be40;
	}
	.interview-header-comment:after {
		top: 0;
		border-right: 8px solid transparent;
		border-bottom: 14px solid #fff;
		border-left: 8px solid transparent;
	}
	.interview-header-comment-heading { font-size: 1.8rem; }
}

@media (min-width: 66.875em) {
	.interview-header-img__lede { font-size: 2rem; }
	.interview-header-hash { font-size: 2.2rem; }
	.interview-header-comment { padding: 20px; }
}

/*------------------------------------*\
   Image
\*------------------------------------*/
.interview-img-overlap { overflow: hidden; } /* はみ出し対策 */
.interview-img-overlap__img {
	position: relative;
	margin-top: -15px;
	margin-right: -19px;
	border: 4px solid #fff;
}
.interview-img-overlap__caption { margin-top: 15px; }

@media (min-width: 48em) {
	.interview-img-overlap__img {
		margin-top: -40px;
		margin-right: -44px;
	}
}