/*------------------------------------------------*/
/* FAQ用 CSS */
/*------------------------------------------------*/
/*ボックス全体*/
.accordion-box {
 margin: 10px 0;
 padding: 0;
}
/*ラベル*/
.accordion-box label {
 display: block;
 /*font-weight: bold;*/
 cursor :pointer;
 margin-top: 10px;
 padding:5px;
}
/*ラベル*/
.accordion-box label.com{
	background-color:#0099cc;
	color:#ffffff;
}
/*チェックボックスを非表示にする*/
.accordion-box input {
 display: none; 
}
/* デフォルト:表示================== */
/*中身を表示にしておく*/
.accordion-box div.act_display {
 height: auto;
 opacity: 1;
}
.accordion-box input:checked + label + div.act_display {
 height: 0;
 overflow-y: hidden;
 transition: 0.5s;/*表示するスピード*/
 opacity: 0;
}
/*アイコン*/
.accordion-box>label.display::before {
 content: "-";
 padding-right: 8px;
}
/*クリックでアイコン入れ替え*/
.accordion-box>input:checked + label.display::before {
 content: "+";
}
/* デフォルト:非表示================== */
/*中身を非表示にしておく*/
.accordion-box div.act {
 height: 0;
 overflow-y: hidden;
 transition: 0.5s;/*表示するスピード*/
 opacity: 0;
}
/*クリックで中身を表示*/
.accordion-box>input:checked + label + div.act {
 height: auto;
 opacity: 1;
}
/*アイコン*/
.accordion-box>label::before {
 content: "+";
 padding-right: 8px;
}
/*クリックでアイコン入れ替え*/
.accordion-box>input:checked + label::before {
 content: "-";
}
/* =============================================== */
div.faq_detail{
	vertical-align:top;
	float:right;
	width:300px;
	border:solid 1px;
	border-color:#ccc;
	border-radius: 8px;
	padding:8px;
	margin-bottom:10px;
	margin-left:8px;
}
img.faq_detail_img{
	width:290px;
}
div.clear{
	clear:both;
}
span.flow_title{
	font-weight:bold;
	border-bottom:solid 1px;
}
div.flow_text{
	/*説明文*/
}
/* =============================================== */
.popup_wrap input {
	display: none;
}
.popup_overlay {
	display: flex;
	justify-content: center;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
}
.popup_trigger {
	position: absolute;
	width: 100%;
	height: 100%;
}
.popup_content {
	position: relative;
	align-self: center;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	/*width: 90%;
	max-width: 800px;*/
	padding: 30px 40px;
	box-sizing: border-box;
	background: #fff;
	line-height: 1.4em;
	transition: 0.5s;
	text-align: justify;
}
.close_btn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 14px;
	cursor: pointer;
	padding:8px;
	/*background: #f29c9f;*/
	background:#0099cc;
	color: #fff;
	border-radius:15px;
	line-height:14px;
	/*font-weight:bold;*/
}
.close_btn:hover{
	background:#fff;
	border:solid 1px #0099cc;
	color:#555;
	transition: .3s ease;
}
.popup_wrap input:checked ~ .popup_overlay {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
}
.popup_wrap input:checked ~ .popup_overlay .popup_content{
	transform: translateY(50px);
}
.open_btn {
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	/*width: 200px;*/
	width:160px;
	height: 30px;
	margin:10px auto;
	/*
	color: #555;
	background:fff;
	*/
	padding: 20px 16px;
	/*
	border:solid 1px #ccc;
	border:solid 1px #0099cc;
	*/
	color: #fff;
	background:#0099cc;
	border:solid 1px #0099cc;
	/*font-weight: bold;*/
	border-radius: 21px;
	cursor: pointer;
	transition: .3s ease;
}
.open_btn:hover{
	
	/*
	background:#0099cc;
	border:solid 1px #0099cc;
	background:#f29c9f;
	border:solid 1px #f29c9f;
	color:#fff;
	*/
	background:#fff;
	border:solid 1px #0099cc;
	color:#555;
	transition: .3s ease;
}
label.open_btn{
	padding-left:30px;
}
label.open_btn::before{
	content:"> ";
}
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="http://maotv.jp/faq/faq">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="http://maotv.jp/faq/faq" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>