@charset "utf-8";

/* ------------------------------
MAIN
------------------------------ */
.topic_inner {
	padding: 0 0;
}

@media all and (max-width: 768px) {
	.topic_inner {
		padding: 0 4.6%;
	}
}

/* --------- subNav ---------- */
.subNav_ttl {
	width: 4.7%;
	margin: 45px 0 10px 0;
}

.subNav_containerWrap {
	display: block;
}

.subNav_container {
	width: 100%;
	background: #fff url("/topic/images/border.gif");
	display: table;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 4px 4px;
}

.subNav_container:nth-child(2) {
	margin-top: -4px;
}

.subNav_cont {
	display: table-cell;
	background: #fff;
}

.subNav_item {
	text-align: center;
	display: block;
	transition: all 200ms;
}

.subNav_item:hover {
	opacity: .5;
}

@media all and (max-width: 768px) {
	.subNav_btn {
		font-size: 1.25rem;
		font-weight: bold;
		padding: 15px 0;
		background: url("/topic/images/subNav_open.svg") no-repeat right 3% center/19px;
	}

	.subNav_btn.open {
		background: url("/topic/images/subNav_close.svg") no-repeat right 3% center/19px;
	}

	.subNav {
		border-bottom: none;
		position: relative;
		margin: 7px 0 7px 0;
	}

	.subNav:before {
		content: '';
		width: 100%;
		height: 7px;
		background: url("/topic/images/border.gif");
		position: absolute;
		top: -7px;
		left: 0;
	}

	.subNav:after {
		content: '';
		width: 100%;
		height: 7px;
		background: url("/topic/images/border.gif");
		position: absolute;
		bottom: -7px;
		left: 0;
	}

	.subNav_containerWrap {
		display: none;
	}

	.subNav_container {
		display: block;
	}

	.subNav_container:nth-child(2) {
		margin-top: 0;
	}

	.subNav_cont {
		display: block;
		background: transparent;
	}

	.subNav_item {
		border-top: 1px solid #949494;
		background: url("/topic/images/subNav_arrow.svg") no-repeat right 5% center/6px;
		transition: none;
		position: relative;
	}

	.subNav_item.noBorder {
		border-top: none;
	}

	.subNav_item_txt {
		font-size: 1.25rem;
		color: #fff;
		display: block;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -0.5em;
	}

	.subNav_item:hover {
		opacity: 1;
	}

}

/* --------- ttl/lead ---------- */
.sec_ttl {
	font-size: 2.8rem;
	color: #fff;
	padding: 18px 0;
	margin: 80px auto 0 auto;
	background: #c4c4c4 url("/topic/images/border.gif");
}

@media all and (max-width: 768px) {
	.sec_ttl {
		font-size: 1.6rem;
		padding: 8px 0;
		margin: 25px auto 0 auto;
	}
}

/* --------- contents ---------- */
.container {
	padding: 50px 5%;
	margin: 25px auto 15px auto;
	border: 4px solid #c4c4c4;
	border-image: url("/topic/images/border.gif") 4 4 4 4 round;
}

.cont {
	text-align: left;
	overflow: hidden;
}

.cont_head {
	font-size: 1.2rem;
	line-height: 1.75;
	vertical-align: middle;
	width: 90px;
	float: left;
}

.cont_body {
	font-size: 1.2rem;
	line-height: 1.75;
	padding: 0 0 0 110px;
	margin: 0 0 12px 0;
}

.topics_detail {
	text-align: left;
	font-size: 1.2rem;
	line-height: 1.75;
}

.topics_detail .date {}

.topics_detail .date:after {
	#1be2bc;
	■;
}

.topics_detail h3 {
	font-size: 2rem;
	padding: 18px 0;
}

.topics_detail_cont {}

.topics_detail_cont p {
	margin: 0 0 20px 0;
}

.topics_detail_cont p a {}

.topics_detail_cont img {
	max-width: 100%;
	height: auto;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.youtube iframe {
	width: 100%;
	height: 100%;
}



@media all and (max-width: 768px) {
	.container {
		padding: 20px 0;
		margin: 10px auto 15px auto;
		border: none;
		border-image: none;
	}

	.cont_head {
		font-size: 1.25rem;
		width: 6.5em;
		border-right: 1px solid #969696;
	}

	.cont_head:after {
		display: none;
	}

	.cont_body {
		font-size: 1.25rem;
		padding: 0 0 16px 8em;
		margin: 0 0 16px 0;
		border-bottom: 1px solid #969696;
	}
}