/*----- [ Initial Settings ] -----*/
:root {
	--any-border-radius: 10px;

    --font-ryumin-medium : 'Ryumin Medium KL';
    --font-ryumin-regular : 'Ryumin Regular KL';
	--font-midashi-go: 'Midashi Go MB31';
	--font-hiragino-marugo: 'Hiragino Maru Gothic W4 JIS2004';
	--font-ud-digital: 'UDDigiKyokasho R JIS2004';

	--color-refer: #b0c4de;
	--color-background-source: #f0f8ff;
	--color-background-source-shadow: #D6D6D6;

	--ratio-fontsize-refer: 0.8;
	--ratio-fontsize-source: 0.8;
	--ratio-fontsize-source-uri: 0.6;
}


/*----- [ Scripts Number ] -----*/
.scripts-number {
	text-align: center;
	font-family: serif;
}
@container (width > 600px) and (width <= 1000px) {
	.scripts-number {
		font-family: serif;
	}
}
@container (width > 1000px) {
	.scripts-number {
		font-family: var(--font-ryumin-medium), serif;
	}
}


/*----- [ Section Title ] -----*/
h2 {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}


/*----- [ Container ] -----*/
.container-main {
	margin: 3rem auto 0;
	padding: 0;
    width: 90%;

	text-align: justify;
	letter-spacing: 0;
}
@container (width > 600px) and (width <= 1000px) {
   	.container-main {
		max-width: 34rem;
	}
}
@container (width > 1000px) {
   	.container-main {
		max-width: 34rem;
	}
}


/*----- [ Spacing ] -----*/
/* Span */
.spacer-0x5 {
	margin-right: 0.5rem;
}
.spacer-1 {
    margin-right: 1rem;
}
.spacer-2 {
	margin-right: 2rem;
}
blockquote.refer .spacer-0x5 {
	margin-right: calc(0.5rem * var(--ratio-fontsize-refer));
}
blockquote.refer .spacer-1 {
    margin-right: calc(1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .spacer-2 {
	margin-right: calc(2rem * var(--ratio-fontsize-refer));
}

/* Paragraph */
.blank-line-1 {
	padding-top: 1rem; 
}
.blank-line-2 {
	padding-top: 2rem;
}
blockquote.refer .blank-line-1 {
	padding-top: calc(1rem * var(--ratio-fontsize-refer)); 
}
blockquote.refer .blank-line-2 {
	padding-top: calc(2rem * var(--ratio-fontsize-refer));
}


/*----- [ Decoration ] -----*/
.paren-half {
	font-family: monospace;
}
.add-underline {
	text-decoration: underline;
}
.add-ellipses::before {
	content: "・・・";
	font-size: 1rem;
}


/*----- [ Kanji to Kana ] -----*/
.scale-height {
	transform: scaleY(2.5);
	-webkit-transform: scaleY(2.5);
}
.kanji-kana {
	margin: 0 0 0 5rem;
	display: flex;
}
.kanji-kana :nth-child(1) {
	flex: 0 0 9rem;
}
.kanji-kana :nth-child(2) {
	flex: 0 0 2rem;
}
.kanji-kana :nth-child(3) {
	flex: 1;
}
.kanji-kana.align {	
	align-items: center;
}
.kanji-kana.align p {
	margin: 0;
}
.kanji-kana.align :nth-child(1) {
	flex: 0 0 2.5rem;
}
.kanji-kana.align :nth-child(2) {
	flex: 0 0 6.5rem;
}
.kanji-kana.align :nth-child(3) {
	flex: 0 0 2rem;
}
.kanji-kana.align :nth-child(4) {
	flex: 1;
}


/*----- [ Not Kanji ] -----*/
ul.not-kanji{
	list-style-type: none;
	font-size: 1rem;
	font-family: serif;
	margin: 0;
	padding: 0;
}
@container (width > 600px) and (width <= 1000px) {
	ul.not-kanji {
		font-family: serif;
	}
}
@container (width > 1000px) {
	ul.not-kanji {
		font-family: var(--font-ryumin-regular), serif;
	}
}
ul.not-kanji li{
	margin: 0;
	padding-left: 8rem;
	text-indent: -3rem;
}


/*----- [ Format ] -----*/
.container-main :is(h3, p) {
	font-size: 1rem;
	font-family: serif;
}
@container (width > 600px) and (width <= 1000px) {
    .container-main :is(h3, p) {
        font-size: 1rem;
        font-family: serif;
    }
}
@container (width > 1000px) {
    .container-main :is(h3, p) {
        font-size: 1rem;
        font-family: var(--font-ryumin-regular), serif;
		font-weight: normal;
    }
}
.container-main :is(h3, h4, h5, p) {
   	line-height: 1.5;
}
.f0 {
	margin: 0;
	padding-left: 0;
	text-indent: 0;
}
.f0-i1 {
	margin: 0;
    padding-left: 0;
	text-indent: 1rem; 
}
.f0-center {
	margin: 0;
	text-align: center;
    text-indent: 0;
}
.f1 {
	margin: 0;
	padding-left: 1rem;
    text-indent: 0;
}
.f1-i1 {
	margin: 0;
	padding-left: 1rem;
	text-indent: 1rem;
}
.f1-i-1 {
	margin: 0; 
	padding-left: 1rem;
	text-indent: -1rem;
}
.f2-i1 {
	margin: 0;
	padding-left: 2rem;
	text-indent: 1rem;
}
.f2-i-1 {
	margin: 0;
	padding-left: 2rem;
	text-indent: -1rem;
}
.f2-i-1x05 {
	margin: 0;
	padding-left: 2rem;
	text-indent: -1.5rem;
}
.f2-i-2 {
	margin: 0;
	padding-left: 2rem;
	text-indent: -2rem;
}
.f3 {
	margin: 0;
	padding-left: 3rem;
    text-indent: 0;
}
.f3-i1 {
	margin: 0;
	padding-left: 3rem;
	text-indent: 1rem;
}
.f4 {
	margin: 0;
	padding-left: 4rem;
    text-indent: 0;
}
.f4-i1 {
	margin: 0;
	padding-left: 4rem;
	text-indent: 1rem;
}
.f4-i-1 {
	margin: 0;
	padding-left: 4rem;
	text-indent: -1rem;
}
.f5 {
	margin: 0;
	padding-left: 5rem;
    text-indent: 0;
}
.f6-i-2 {
	margin: 0;
	padding-left: 6rem;
	text-indent: -2rem;
}
.f7 {
	margin: 0;
	padding-left: 7rem;
    text-indent: 0;
}
.f7-i1 {
	margin: 0;
	padding-left: 7rem;
	text-indent: 1rem;
}
.f7-i-3 {
	margin: 0;
	padding-left: 7rem;
	text-indent: -3rem;	
}
.f7-i-4 {
	margin: 0;
	padding-left: 7rem;
	text-indent: -4rem;
}
.f8-i-5{
	margin: 0;
	padding-left: 8rem;
	text-indent: -5rem;
}


/*----- [ Reference } -----*/
blockquote.refer {
	border: dotted 3px var(--color-refer);
	border-radius: var(--any-border-radius);
	max-width: 100%;
	margin: 1rem 0 1rem 2rem;
	padding: 1rem;
}
blockquote.refer p {
	font-size: 0.8rem;
}

blockquote.refer h3 {
	font-size: 0.9rem;
	margin: 0 0 0.8rem;
	font-family: sans-serif;
	font-weight: bold;
}
@container (width > 600px) and (width <= 1000px) {
	blockquote.refer h3 {
		font-family: sans-serif;
		font-weight: bold;
	}
}
@container (width > 1000px) {
	blockquote.refer h3 {
		font-family: var(--font-midashi-go), sans-serif;
	}
}
blockquote.refer h3.option {
	font-size: 0.8rem;
	margin: 0;
	font-family: serif;
	font-weight: normal;
}
@container (width > 600px) and (width <= 1000px) {
	blockquote.refer h3.option {
		font-family: serif;
	}
}
@container (width > 1000px) {
	blockquote.refer h3.option {
		font-family: var(--font-ryumin-regular), serif;
	}
}
blockquote.refer :is(h4, h5) {
	font-size: 0.8rem;
	margin: 0.8rem 0;
	font-family: sans-serif;
	font-weight: bold;
}
@container (width > 600px) and (width <= 1000px) {
	blockquote.refer :is(h4, h5) {
		font-family: sans-serif;
		font-weight: bold;
	}
}
@container (width > 1000px) {
	blockquote.refer :is(h4, h5) {
		font-family: var(--font-midashi-go), sans-serif;
	}
}
.container-main :is(h3, h4, h5, p) {
   	line-height: 1.5;
}
blockquote.refer .f0-i1 {
	margin: 0;
    padding-left: 0;
	text-indent: calc(1rem * var(--ratio-fontsize-refer)); 
}
blockquote.refer .f0-center {
	margin: 0;
	text-align: center;
    text-indent: 0;
}
blockquote.refer .f1 {
	margin: 0;
	padding-left: calc(1rem * var(--ratio-fontsize-refer));
    text-indent: 0;
}
blockquote.refer .f1-i1 {
	margin: 0;
	padding-left: calc(1rem * var(--ratio-fontsize-refer));
	text-indent: calc(1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f1-i-1 {
	margin: 0; 
	padding-left: calc(1rem * var(--ratio-fontsize-refer));
	text-indent: calc(-1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f2-i1 {
	margin: 0;
	padding-left: calc(2rem * var(--ratio-fontsize-refer));
	text-indent: calc(1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f2-i-1 {
	margin: 0;
	padding-left: calc(2rem * var(--ratio-fontsize-refer));
	text-indent: calc(-1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f2-i-1x05 {
	margin: 0;
	padding-left: calc(2rem * var(--ratio-fontsize-refer));
	text-indent: calc(-1.5rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f2-i-2 {
	margin: 0;
	padding-left: calc(2rem * var(--ratio-fontsize-refer));
	text-indent: calc(-2rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f3 {
	margin: 0;
	padding-left: calc(3rem * var(--ratio-fontsize-refer));
    text-indent: 0;
}
blockquote.refer .f3-i1 {
	margin: 0;
	padding-left: calc(3rem * var(--ratio-fontsize-refer));
	text-indent: calc(1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f4 {
	margin: 0;
	padding-left: calc(4rem * var(--ratio-fontsize-refer));
    text-indent: 0;
}
blockquote.refer .f4-i1 {
	margin: 0;
	padding-left: calc(4rem * var(--ratio-fontsize-refer));
	text-indent: calc(1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f4-i-1 {
	margin: 0;
	padding-left: calc(4rem * var(--ratio-fontsize-refer));
	text-indent: calc(-1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f4-i-4 {
	margin: 0;
	padding-left: calc(4rem * var(--ratio-fontsize-refer));
	text-indent: calc(-4rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f5 {
	margin: 0;
	padding-left: calc(5rem * var(--ratio-fontsize-refer));
    text-indent: 0;
}
blockquote.refer .f6-i-2 {
	margin: 0;
	padding-left: calc(6rem * var(--ratio-fontsize-refer));
	text-indent: calc(-2rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f7 {
	margin: 0;
	padding-left: calc(7rem * var(--ratio-fontsize-refer));
    text-indent: 0;
}
blockquote.refer .f7-i1 {
	margin: 0;
	padding-left: calc(7rem * var(--ratio-fontsize-refer));
	text-indent: calc(1rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f7-i-3 {
	margin: 0;
	padding-left: calc(7rem * var(--ratio-fontsize-refer));
	text-indent: calc(-3rem * var(--ratio-fontsize-refer));	
}
blockquote.refer .f7-i-4 {
	margin: 0;
	padding-left: calc(7rem * var(--ratio-fontsize-refer));
	text-indent: calc(-4rem * var(--ratio-fontsize-refer));
}
blockquote.refer .f8-i-5{
	margin: 0;
	padding-left: calc(8rem * var(--ratio-fontsize-refer));
	text-indent: calc(-5rem * var(--ratio-fontsize-refer));
}


/*----- [ Source ] -----*/
.source {
	margin: 2rem auto 1rem;
	width: 90%;

	background-color: var(--color-background-source);
	border: none;
	border-radius: var(--any-border-radius);
	padding: 1rem;
	box-shadow: 5px 5px 10px 0px var(--color-background-source-shadow);
}
@container (width > 600px) and (width <= 1000px) {
	.source {
		max-width: 38rem;
	}
}
@container (width > 1000px) {
	.source {
		margin: 3rem auto 1rem;
		max-width: 38rem;
	}
}
:is(
	.source-text,
	.source-list
 ) {
	font-size: calc(1rem * var(--ratio-fontsize-source));
	font-family: sans-serif;
}
@container (width > 600px) and (width <= 1000px) {
	:is(
		.source-text,
		.source-list
	 ) {
		font-family: sans-serif;
	}
}
@container (width > 1000px) {
	:is(
		.source-text,
		.source-list
	 ) {
		font-family: var(--font-hiragino-marugo), sans-serif;
	}
}
.source-list {
	margin: calc(1rem * var(--ratio-fontsize-source)) 0 0 calc(1rem * var(--ratio-fontsize-source));
	padding: 0;
	list-style-type: '○ ';
}
@container (width > 600px) and (width <= 1000px) {
	.source-list {
		margin: calc(1rem * var(--ratio-fontsize-source)) 0 0 calc(1rem * var(--ratio-fontsize-source));
	}
}
@container (width > 1000px) {
	.source-list {
		margin: calc(1rem * var(--ratio-fontsize-source)) 0 0 calc(3rem * var(--ratio-fontsize-source));
	}
}
.source-list li {
	margin-bottom: calc(1rem * var(--ratio-fontsize-source));
}
.source-list a {
	display: inline-block;
	vertical-align: top;

	width: 100%;
}
.source-list-uri {
	font-size: calc(1rem * var(--ratio-fontsize-source-uri));
	font-family: sans-serif;
}