/*----- [ Initial Settings ] -----*/
:root {
	--font-h2-mobile: sans-serif;
	--font-h2-desktop: 'UD Shin Go Medium', sans-serif;

	--font-h3-mobile: sans-serif;
	--font-h3-desktop: 'UD Shin Go Medium', sans-serif;

	--any-border-radius: 10px;

	--color-background-attention: #f0f8ff;
	--color-background-attention-shadow: #D6D6D6;

	--font-hiragino-marugo: 'Hiragino Maru Gothic W4 JIS2004';
}


/*----- [ Singular : History ] -----*/
.main-content {
	padding: 1rem 0;
}
@container (width > 600px) and (width <= 1000px) {
	.main-content {
		padding: 1rem 0;
	}
}
@container (width > 1000px) {
	.main-content {
		padding: 2.5rem 0;
	}
}

.h2--history-title {
	font-size: 1.25rem;
	font-family: var(--font-h2-mobile);
	text-align: center;
	vertical-align: top;
	height: 2rem;
	letter-spacing: 0.125em;

	margin: 0 auto;
	width: 100%;
	border-bottom: solid 1px var(--color-main);
}
@container (width > 600px) and (width <= 1000px) {
	.h2--history-title {
		font-family: var(--font-h2-mobile);
		max-width: 40rem;
	}
}
@container (width > 1000px) {
	.h2--history-title {
		font-size: 2rem;
		height: 2.5rem;
		font-family: var(--font-h2-desktop);
		max-width: 40rem;
	}
}

.container-main {
	margin: 2rem auto 0;
	width: 100%;
}
@container (width > 600px) and (width <= 1000px) {
	.container-main {
		max-width: 35rem;
	}
}
@container (width > 1000px) {
	.container-main {
		max-width: 35rem;
	}
}

.h3--law-number {
	font-size: 1.5rem;
	font-family: var(--font-h3-mobile);
}
@container (width > 600px) and (width <= 1000px) {
	.h3--law-number {
		font-family: var(--font-h3-mobile);
	}
}
@container (width > 1000px) {
	.h3--law-number {
		font-family: var(--font-h3-desktop);
	}
}
.h3--law-number::before {
	content: '■';
	font-size: 2.05rem;
	vertical-align: text-top;
	color: var(--color-main);
}
.h3--law-number a {
	text-decoration: underline; 
}

.main-description {
	margin: 1rem 0 0 1.75rem;

	font-size: 1rem;
	text-align: justify;
	list-style-type: '◎　';
}
.main-description-details {
	margin: 0 0 0 1rem;
	padding: 0;

	font-size: 1rem;
	text-align: justify;
	list-style-type: '○　';
}

.container-aside {
	margin: 2rem auto 0;
	width: 100%;
	height: 80px;

	display: none;
/*	display: flex;*/

	border: solid 3px #000;
}
@container (width > 600px) and (width <= 1000px) {
	.container-aside {
		max-width: 40rem;
	}
}
@container (width > 1000px) {
	.container-aside {
		max-width: 40rem;
	}
}
.container-aside p {
	flex-direction: row;
	align-self: center;
	margin: auto;

	width: 468px;
	height: 60px;

	background-color: rgba(204, 204, 204, 0.451); 
}

.attention {
	width: 100%;
	margin: 3rem auto;
	padding: 1rem calc(0.8rem * 1.5);

	background-color: var(--color-background-attention);
	border: none;
	border-radius: var(--any-border-radius);
	box-shadow: 5px 5px 10px 0px var(--color-background-attention-shadow);
}
.attention-text {
	font-size: 0.8rem;
	font-family: sans-serif;
	width: 100%;
	margin: 0 auto;
	text-indent: calc(0.8rem * 1);
	text-align: justify;
}
@container (width > 600px) and (width <= 1000px) {
	.attention {
		max-width: calc(0.8rem * 45);
		padding-left: calc(0.8rem * 1.5);
		padding-right: calc(0.8rem * 1.5);
	}
	.attention-text	{
		font-family: sans-serif;
	}
}
@container (width > 1000px) {
	.attention {
		max-width: calc(0.8rem * 45);
		padding-left: calc(0.8rem * 1.5);
		padding-right: calc(0.8rem * 1.5);
	}
	.attention-text {
		font-family: var(--font-hiragino-marugo), sans-serif;
	}
}




.guide {
	margin: 2rem auto 0;
	width: 100%;
	text-align: justify;
	text-indent: -1rem;
}
@container (width > 600px) and (width <= 1000px) {
	.guide {
		max-width: 35rem;
	}
}
@container (width > 1000px) {
	.guide {
		max-width: 35rem;
	}
}
.guide::before {
	content: "※　";
}