h1{
	margin:0;
}
table {
	border-collapse: collapse;
	border: 1px solid black;
}
ol > li{
	list-style-type: decimal;
}
ol,ul {
	text-align:left
}

@media screen and (min-width: 160px) {
	th,td{
		padding:0.3em 0;
	}
}
@media screen and (min-width: 340px) {
	th,td{
		padding:0.3em 0.1em;
	}
}
@media screen and (min-width: 380px) {
	th,td{
		padding:0.3em 0.5em;
	}
}

a {
	color:blue;
	text-decoration:underline;
}

.iso_box{
	font-size:120%;
	font-weight:bold;
	margin-top:1em;
	margin-bottom:1em;
}

.marker{
	background:linear-gradient(transparent 65%, #f00 100%);
	padding-left:0.2em;
	padding-right:0.2em;
	margin-left:0.1em;
	margin-right:0.1em;
}
.marker_box{
	margin-bottom:0.3em;
}

.baloon{
	font-size:0.9em;
	background-color:#e0f0ff;
	padding:0.5em;
	border-radius:1em;
	border:1px solid #008;
}

h2{
	width:20em;
	color:white; background-color:#00a;
	border-radius:1em;
	font-weight:bold; font-size:0.9em;
	padding:0.2em;
	margin-left:auto; margin-right:auto;
	margin-top:1.8em; margin-bottom:0.8em;
}

.feature{
	color:red;
	font-weight:bold;
}
.feature-back{
	background-color:#fcd;
}
.note{
	font-size:85%;
	font-weight:bold;
}
.note-plus{
	font-weight:bold;
	color:red;
}

:not(.feature)>.note::before,
:not(.feature)>.note-plus::before{
	margin-left:-0.5em;
	margin-right:-0.2em;
	content:"※ ";
}

strong{
	font-weight:bold;
	font-size:110%;
	color:#00a;
}


.main {
	margin: 0.1em auto;
	width:90%;
	max-width: 35em;
}
.toggle {
	display: none;
}
.accordion {
	position: relative;
	margin:1.5em 0;
}
.title,
.content {
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.2s;
}
.title {
	font-weight:bold;
	color:#008; background-color:#e0f0ff;
	display:block;
	margin:0 auto; padding:0.2em 0.5em 0.2em 0;
	border: inset 0.15em #06c; border-radius:1em;
}

@media screen and (min-width: 160px) {
	.title{
		font-size:0.98em;
		width:19em;
	}
}
@media screen and (min-width: 320px) {
	.title{
		font-size:0.98em;
		width:19em;
	}
}
@media screen and (min-width: 440px) {
	.title{
		font-size:1.2em;
		width:21em;
	}
}

.title::after,
.title::before {
	content: "";
	position: absolute;
	right: 1.25em;
	top: 0.5em;
	width: 2px;
	height: 0.75em;
	background-color: #06c;
	transition: all 0.2s;
}
.title::after {
	transform: rotate(90deg);
}
.content {
	text-align:left;
	max-height: 0;
	overflow: hidden;
	padding:0 1em;
}
.toggle:checked + .title + .content {
	padding:1em;
	max-height:500px;
	transition:all 0.2s;
}
.toggle:checked + .title::before {
	transform: rotate(90deg) !important;
}




.popup {
  display: none;
}

.popup-open {
	cursor: pointer;
	color:blue;
	text-decoration:underline;
}

.popup-overlay {
  display: none;
}

.popup:checked ~ .popup-overlay {
	display: block;
	z-index: 99999;
	background-color:rgba(0,0,0,0.6);
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.popup-window{
	width: 90%;
	max-height:90%;
	max-width: 35em;
	box-sizing:border-box;
	padding: 1.5em;
	overflow-y:scroll;
	background-color: white;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}

.ten::before{
	content:"、";
	margin-right:-0.2em;
}
.maru::before{
	content:"。";
	margin-right:-0.2em;
}


.wrap-youtube{
	text-align:center;
}

@media screen and (min-width: 160px) {
	.youtube{
		width: 160px;
		height: 90px;
	}
	.youtube-in{
		width: 160px;
		height: 90px;
	}

}
@media screen and (min-width: 240x) {
	.youtube{
		width:240px;
		height:135px;
	}
	.youtube-in{
		width:160px;
		height:90px;
	}

}
@media screen and (min-width: 320px) {
	.youtube{
		width:320px;
		height:180px;
	}
	.youtube-in{
		width:256px;
		height:144px;
	}
}
@media screen and (min-width: 400px) {
	.youtube{
		width:400px;
		height:225px;
	}
	.youtube-in{
		width:336px;
		height:189px;
	}
}
@media screen and (min-width: 520px) {
	.youtube{
		width:480px;
		height:270px;
	}
	.youtube-in{
		width:432px;
		height:243px;
	}
}

#fee-table th{
	font-weight:normal;
}
#fee-table td{
	font-weight:bold;
	font-size:normal;
}
#fee-table td .note{
	font-size:70%;
}