@charset "UTF-8";

[data-ruby] {
	position: relative;
	display: inline-block;
}

ruby[data-ruby]::before {
	display: none;
}

.dis-no,
rt,
ruby[data-ruby] rt {
	display: none;
}

.ruby_flag {
	ruby[data-ruby]::before {
		content: attr(data-ruby);
		position: absolute;
		text-align: center;
		left: -3em;
		right: -3em;
		transform-origin: bottom center;
		bottom: 75%;
		display: block;
		transform: scale(0.5);
		letter-spacing: 0;
	}

	#title ruby[data-ruby]::before {
		bottom: 85%;
	}
	
	h2 ruby[data-ruby]::before,
	h4 ruby[data-ruby]::before {
		bottom: 100%;
	}

	#title h2 ruby[data-ruby]::before {
		bottom: 110%;
	}

	ruby.ml {
		margin-left: 0.25em;
	}

	ruby.ml2 {
		margin-left: 0.5em;
	}

	ruby.ls {
		letter-spacing: 0.25em;
	}

	h3 {
		padding-top: 0.75em;
		line-height: 1.6;
	}

	.table th,
	.table td {
		line-height: 1.8;
		padding-top: 0.75em;
		padding-bottom: 0;
	}

	ul li,
	ol li {
		line-height: 1.8;
	}

	#bottom h4 {
		line-height: 1.2;
	}

	#bottom li {
		margin-top: 0;
		line-height: 1.4;
	}

	#bottom h2,
	#bottom p {
		margin-top: 0;
	}
}

button.open {
	color: #000;
	border-color: #ff9c33;
	border-style: solid;
	background-color: #fff;
	border-radius: 5%;
	appearance: none;
}

button.close {
	color: #000;
	background-color: #ff9c33;
	border: 2px solid #fce3ba;
	border-radius: 5%;
	appearance: none;
}

.close:hover,
.close:focus {
	color: #000;
	background-color: #ff9c33;
	border: 2px solid #fce3ba;
	border-radius: 5%;
	text-decoration: none;
	opacity: .5;
}

/*  pc  */
@media (min-width: 1200px) {
	.ruby_flag section {
		h2,
		h3 {
			padding-top: 0.75em;
		}
	}

	button.open {
		padding: 5px;
		cursor: pointer;
		font-size: 1.2em;
		line-height: 1.2;
	}

	button.close {
		padding: 5px 0.75em;
		cursor: pointer;
		font-size: 1.2em;
		line-height: 1.2;
	}
}

/*  TB	*/
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.ruby_flag section {
		h2,
		h3 {
			padding-top: 0.75em;
			margin-right: 0.5em;
		}

		p,
		ul li,
		ol li,
		.table th,
		.table td,
		dt,
		dd {
			margin-top: 0.5em;
			margin-right: 0.5em;
		}
	}

	button.open {
		padding: 5px;
		cursor: pointer;
		font-size: 1.2em;
		line-height: 1.2;
	}

	button.close {
		padding: 5px 0.75em;
		cursor: pointer;
		font-size: 1.2em;
		line-height: 1.2;
	}
}


/*  SP	*/
@media screen and (max-width: 767px) {
	.ruby_flag section {

		h2,
		h3 {
			padding-top: 0.75em;
			margin-right: 0.5em;
		}

		p,
		ul li,
		ol li {
			margin-top: 0.5em;
			margin-right: 0.5em;
		}
	}

	button.open {
		padding: 5px;
		cursor: pointer;
		font-size: 1em;
		line-height: 1.2;
	}

	button.close {
		padding: 5px 0.75em;
		cursor: pointer;
		font-size: 1em;
		line-height: 1.2;
	}
}

.close {
	float: none;
}

[dataruby],
rt {
	position: relative;
}

[dataruby]::before,
rt::before {
	visibility: visible;
	content: attr(dataruby);
	position: absolute;
	line-height: 100%;
	text-align: center;
	left: -3em;
	right: -3em;
	transform-origin: bottom center;
	transform: scale(0.5);
	bottom: 100%;
}

[dataruby]::before {
	content: none;
}

.ruby_flag [dataruby]::before {
	content: attr(dataruby);
	/*   content: none; */
}

ruby[dataruby] rt {
	display: none;
}