@charset "utf-8";

/* MENU
-------------------------------------------------------------------------------- */
#menu > nav {
	max-width: 100%;
}
/* 
@media screen and (min-width: 769px) {
	#menu > nav {
		max-width: 100%;
	}
}
 */
@media screen and (min-width: 1181px) {
	#menu > nav > ul {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* English Top Page
-------------------------------------------------------------------------------- */
#en_title {
	background: #f1dce3;
	padding: 10px 0;
	position: relative;
	z-index: 0;
}
#en_title::before {
	content: "";
	display: block;
	width: calc(calc(100% - 1280px) /2);
	height: 100%;
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
#en_title::after {
	content: "";
	display: block;
	width: calc(calc(100% - 1280px) /2);
	height: 100%;
	background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

#en_title > p {
	max-width: 940px;
	padding: 10px;
	margin: 0 auto;
	font-size: clamp(20px, 3vw, 30px);
	text-align: center;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 1), -1px -1px 0 #c97792;
}

/* Introduction
-------------------------------------------------------------------------------- */
.variable {
	display: flex;
	gap: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.variable p {
	width: 100%;
}
.variable img {
	width: auto;
	height: 200px;
}

@media screen and (min-width: 481px) {
	.variable {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.variable p {
		width: calc(70% - 10px);
	}
	.variable a {
		max-width: 160px;
	}
	.variable img {
		max-width: 160px;
		height: auto;
	}
}


/* Introduction
-------------------------------------------------------------------------------- */
#introduction dl.inline {
	padding: 10px;
}
#introduction dl.inline.colon > dt::after {
	content: ":";
}

#introduction.history dl.inline.em9 > dd {
	padding-bottom: 10px;
	border-bottom: 1px dotted #ccc;
	margin-bottom: 5px;
}


/* Journal (Backnumber)
-------------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	#journal #main article ul.inline {
		flex-direction: column;
	}
}

#journal #main article ul.inline {
	padding-right: 110px;
}

#journal section section ul.inline + p,
#journal section section p + p {
	width: 120px;
}

/* Committee
-------------------------------------------------------------------------------- */
.committee #main dl > dd {
	padding-bottom: 10px;
	border-bottom: 1px dashed #ccc;
	margin-bottom: 10px;
}
.committee #main dd  dl > dt {
	display: inline-block;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}