@charset "utf-8";

/* シチズン・オブ・ザ・イヤーとは
========================================================= */

.main { width: 100%; color: #824c38; max-width: 856px; margin: 50px auto 0; }
.main div { position: relative; }
.main dl {
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-60%);
}
.main dt {
	display: table;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 3.0rem;
	line-height: 1.5;
	text-align: center;
	margin: 0 auto;
	transition: all 0.3s;
}
.main dt span { display: inline-block; }
.main dd {
	width: 84%;
	display: table;
	max-width: 460px;
	font-size: 1.8rem;
	line-height: 2.0;
	margin: 25px auto 0;
	transition: all 0.3s;
}
.main p { display: none; }


.president { width: 100%; max-width: 800px; margin: 90px auto 0; }
.president p:first-child { font-size: 2.6rem; line-height: 1.5; font-weight: bold; text-align: center; }
.president p + p {
	color: #7b0000;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 2.5rem;
	line-height: 3.5rem;
	font-weight: bold;
	text-align: center;
	margin: 30px 0 0 0;
}
.president p + p span { display: block; }
.president p + p span br { display: none; }
.president ul { width: 100%; display: table; font-size: 1.8rem; line-height: 2; margin: 40px 0 0 0; }
.president li { display: table-cell; vertical-align: top; }
.president li:first-child { padding: 0 40px 0 0; }
.president li + li { width: calc(230/800 * 100%); max-width: 230px; padding: 0.5em 0 0 0; }
.president dl {
	display: table;
	font-size: 1.3rem;
	line-height: 1.5;
	text-align: center;
	margin: 10px auto 0;
}
.president dd { font-size: 2.1rem; font-weight: bold; }

.process { width: 100%; max-width: 800px; margin: 100px auto 0; }
.process p:first-child { font-size: 2.6rem; line-height: 1.5; font-weight: bold; text-align: center; }
.process p:first-child span { display: inline-block; }
.process figure { max-width: 530px; margin: 50px auto 0; }
.process figure + p { font-size: 1.8rem; line-height: 2; margin: 50px 0 0 0; }

.committee { width: 100%; max-width: 900px; margin: 110px auto 0; }
.committee p:first-child { font-size: 2.6rem; line-height: 1.5; font-weight: bold; text-align: center; }
.committee table {
	width: 100%;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	font-size: 1.8rem; line-height: 1.5;
	margin: 40px 0 0 0;
}
.committee table th, .committee table td { box-sizing: border-box; padding: 25px 1em; }
.committee table th { width: 7em; white-space: nowrap; }
.committee table tr + tr th,
.committee table tr + tr td { border-top: solid 1px #d4d4d4; }
.committee table + p {
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: right;
	margin: 10px 0 0 0;
}



@media screen and (max-width: 870px) {
	.main dt { font-size: 2.6rem; }
	.main dd { line-height: 1.5; }
}

@media screen and (max-width: 767px) {
	.main { margin: 25px auto 0; }
	.main dt { font-size: 1.9rem; font-weight: bold; letter-spacing: -0.05em; }
	.main dt span { display: block; }
	.main dt br { display: none; }
	.main dd { display: none; }
	.main p { display: block; font-size: 1.6rem; line-height: 1.6; margin: 10px auto 0; }
	
	.president { width: 100%; max-width: 800px; margin: 60px auto 0; }
	.president p:first-child { font-size: 2.0rem; }
	.president p + p { font-size: 1.8rem; line-height: 2.6rem; margin: 15px 0 0 0; }
	.president p + p span br { display: block; }
	.president ul { display: flex; flex-direction: column; margin: 20px 0 0 0; }
	.president li { display: block; }
	.president li:first-child { font-size: 1.6rem; line-height: 1.6; padding: 20px 0 0 0; }
	.president li + li { width: 100%;  padding: 0; margin: 0 auto; order: -1; }
	
	.process { width: 100%; max-width: 800px; margin: 60px auto 0; }
	.process p:first-child { font-size: 2.0rem; }
	.process figure { margin: 30px auto 0; }
	.process figure + p { font-size: 1.6rem; line-height: 1.6; margin: 20px 0 0 0; }
	
	.committee { margin: 60px auto 0; }
	.committee p:first-child { font-size: 2.0rem; }
	.committee table { border-width: 2px; font-size: 1.6rem; margin: 20px 0 0 0; }
	.committee table th { width: 100%; padding: 12px 0.5em 0 0.5em; }
	.committee table td { padding: 12px 0.5em 12px 0.5em; }
	.committee table th, .committee table td { display: block; }
	.committee table tr + tr th + td { border-top: none; }
	.committee table span { display: block; text-indent: -0.5em; }
}