@charset "utf-8";

/* ===================================================================
岩手日報社 × 川徳 特別対談
=================================================================== */

/* COMMON
--------------------*/

.s-h2.before-none,
.s-h4.before-none {
	padding: 0;
	color: #384688;
}

.s-h4.before-none { margin: 0 }

.s-h2.before-none:before,
.s-h4.before-none:before { content: none }

.s-h4.color { color: #384688 }

/* FRAME
--------------------*/

.a-main-frame {
	position: relative;
	margin: 0 0 30px;
	padding: 30px 0;
}

.a-main-frame:before,
.a-main-frame:after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	width: 80%;
	height: 4px;
	border-top: 1px solid #384688;
	border-bottom: 1px solid #384688;
}

.a-main-frame:before { top: 0 }
.a-main-frame:after { bottom: 0 }

.a-main-frame-inner {
	margin: 0 0 20px;
}

/* SUB HEADING
--------------------*/

.a-sub-heading {
	margin: 0 0 20px;
	font-size: 1.1em;
	padding: 10px 20px;
	background: rgba(255, 255, 255, .7);
}

/* COMMENT
--------------------*/

.a-comment {
	display: flex;
	justify-content: center;
	gap: 10px 20px;
	margin: 0 0 30px;
	padding: 0 0 0 10px;
	border-left: 2px solid #384688;
}

.a-comment-start {
	flex: none;
	font-weight: 700;
}

.a-comment-end {
	flex: auto;
}

/* HR
--------------------*/

.a-hr {
	margin: 30px 0;
	border: none;
	height: 1px;
	background-color: #384688;
}

/* INTRODUCTION
--------------------*/

.a-introduction {
	display: flex;
	align-items: center;
	column-gap: 20px;
	margin: 0 0 30px;
}

.a-introduction-start {
	flex: none;
	width: 25%;
}

.a-introduction-end {
	flex: auto;
}

.a-introduction-title {
	font-size: 1.05em;
}

.a-introduction-name {
	font-size: 1.1em;
	font-weight: 700;
}

.a-introduction-name span {
	font-size: .9em;
}

@media screen and (max-width: 1100px) {

	/* ===================================================================
	岩手日報社 × 川徳 特別対談
	=================================================================== */

	/* COMMENT
	--------------------*/

	.a-comment {
		flex-direction: column;
	}


	/* INTRODUCTION
	--------------------*/

	.a-introduction {
		flex-direction: column;
		row-gap: 10px;
	}

	.a-introduction-start {
		width: 100%;
		max-width: 250px;
		margin: o auto;
	}

}