@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	105

//////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	image replacement

------------------------------------------------------------------------------*/

main .detail #sec01 .text,
main .detail #sec02 .rule {
	display: block;
	overflow: hidden;
	outline: none;
	clear: both;
	text-indent: -9999px;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-size: contain;
}

/*------------------------------------------------------------------------------

	header

------------------------------------------------------------------------------*/

body.contents.topics .post header .image {
	max-width: 900px;
}


/*	#sec01
------------------------------------------------------------------------------*/

main .detail #sec01 h3 {
	margin-top: 0;
}

main .detail #sec01 .text {
	aspect-ratio: 800/874;
	background-repeat: no-repeat;
}

main .detail #sec01 .good .text { background-image: url(/datsutan/topics_contents/105/img/img_1.jpg);}
main .detail #sec01 .bad .text { background-image: url(/datsutan/topics_contents/105/img/img_2.jpg);}

main .detail #sec01 .group,
main .detail #sec01 .comment {
	display: flex;
	justify-content: space-between;
}

main .detail #sec01 .group section {
	width: 48%;
}

main .detail #sec01 .comment {
	display: flex;
	justify-content: space-between;
	margin-top: 2em;
}

main .detail #sec01 .comment dl {
	width: 48.5%;
	padding: 1.5em 2em;
	background-color: rgba(223,238,250,1);
	border-radius: 8px;
}

main .detail #sec01 .comment dl dt {
	color: rgba(0,90,160,1);
}

main .detail #sec01 .comment dl .name {
	text-align: right;
	font-size: .875em;
}


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

main .detail #sec01 .comment dl .name span {
	display: block;
}

}

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

main .detail #sec01 .group,
main .detail #sec01 .comment {
	display: block;
}

main .detail #sec01 .group section,
main .detail #sec01 .comment dl {
	width: 100%;
}

main .detail #sec01 .group section:first-of-type {
	margin-bottom: 10vw;
}

main .detail #sec01 .comment dl dt {
	font-size: 4vw;
}
	
}


/*	#sec02
------------------------------------------------------------------------------*/

main .detail #sec02 .rule {
	max-width: 800px;
	aspect-ratio: 800/366;
	margin: 0 auto;
	background-image: url(/datsutan/topics_contents/105/img/img_3.jpg);
	background-repeat: no-repeat;
}

main .detail #sec02 .group {
	display: flex;
	justify-content: space-between;
}

main .detail #sec02 .group .text {
	flex: 1;
	margin-right: 1em;
}

main .detail #sec02 .group figure {
	width: 20%;
	margin-top: 1.75em;
}

main .detail #sec02 .group ul {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-bottom: .5em;
}

main .detail #sec02 .group ul::after {
	content: "（敬称略）";
	line-height: 2;
	font-size: .75em;
}

main .detail #sec02 .group ul li {
	margin-right: 2em;
	margin-bottom: 0;
	line-height: 1.8;
}

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

main .detail #sec02 .group {
	display: block;
}

main .detail #sec02 .group .text {
	margin-right: 0;
}

main .detail #sec02 .group .text li {
	font-size: 3vw;
}

main .detail #sec02 .group figure {
	width: 40%;
	margin: 5vw auto 0;
}

}


/*	#sec03
------------------------------------------------------------------------------*/

main .detail #sec03 .sec03_catch {
	text-align: center;
	font-weight: bold;
	font-size: 1.125em;
	color: rgba(24,152,207,1);
}

main .detail #sec03 .group {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
}

main .detail #sec03 .group .text {
	flex: 1;
}

main .detail #sec03 .group figure {
	width: 30%;
	margin-top: .25em;
	margin-right: 2em;
	border: 1px solid rgba(0,0,0,.1);
}

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

main .detail #sec03 .sec03_catch {
	font-size: 3.1vw;
}

main .detail #sec03 .group {
	flex-direction: column-reverse;
}

main .detail #sec03 .group figure {
	width: 60%;
	margin: 0 auto 4vw;
}

}



