@charset "utf-8";

::selection { background-color: #777; }	/* テキスト選択時の色 */
::placeholder{	color: #fff; }					/* input または textarea 要素のプレイスホルダー文字列 */

	




/* ----- ヘッダー */

#wp{
	float: left;
	padding: 0; margin: 0; width: 100%;
}


#menu_box{
	clear: both; float: left;
	padding: 10px 0; margin: 0; width: 100%;
	background-color: #333;

	display: flex;
	justify-content: right;		/* 水平方向		右揃え */
}
/* 検索・登録・削除のボタン */
.Ib_y, .Ib_n{
	float: left;
	padding: 0; margin-left: 10px; width: 65px; height: 40px;
	background-color: #555;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 40px;
}
#menu_box div:nth-child(1){ margin-left: 0; }
@media screen and (max-width: 720px){	/* 以下の場合 */
	#menu_box div{	width: calc( ( 100% - 30px ) / 4 ); }
}
.Ib_n{ opacity:0.5;  border: 1px #999 dashed; background-color: #333; }
.Ib_n:hover{
	border: 1px #777 solid;
	opacity:0.7; cursor: pointer;
}





/* 「あ・Ａ」の選択ボタン */
#memu_hitomoji{
	display: none;
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
#m_hitomoji0{
	clear: both; float: left;
	padding: 0; margin: 35px 0 0 0;; width: 100%;
}
#m_hitomoji0 div{
	float: left;
	padding: 0; margin: 0 10px 0 0; width: 240px; height: 35px;
	background-color: #555;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 35px;
}
#m_hitomoji0 div:last-child{ margin: 0 0 5px 0; }	/* 最後のdivに適用 */
@media screen and (max-width: 720px){			/* 以下の場合 */
	#m_hitomoji0 div{	width: calc( ( 100% - 10px ) / 2 ); }
}
.M_h0_y{ opacity:1; }
.M_h0_n{	opacity:0.5; }
.M_h0_n:hover{
	border: 1px #777 solid;
	opacity:0.7; cursor: pointer;
}


/* あ が～ぼ、ぱ～ぽ */
#m_hitomoji1, #m_hitomoji2{
	clear: both; float: left;
	padding: 0; margin: 10px 0 0 0;; width: 100%;
}
#m_hitomoji2{ display: none; }
.M_h, .M1h, .M2h{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
.M2h{ margin-top: 40px; }
.M_h div, .M1h div, .M2h div{
	float: left;
	padding: 0; margin: 0 5px 5px 0; width: 50px; height: 35px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 138%; line-height: 35px;
	cursor: pointer;
}
/*.M1h div:nth-child(1), .M1h div:nth-child(2){ margin: 0 60px 5px 0; }					/* 「や」「ゆ」「わ」「を」に適用 */
.M_h div:last-child, .M1h div:last-child,.M2h div:last-child{ margin: 0 0 5px 0; }	/* 最後のdivに適用 */
.M_h div:hover, .M1h div:hover, .M2h div:hover{ background-color: #555; }
.touka_box{	visibility: hidden; }
@media screen and (max-width: 720px){	/* 以下の場合 */
	.M_h div, .M1h div, .M2h div{ width: calc( ( 100% - 20px ) / 5 ); }
}

/* よみがなリストの選択された頭文字を表示するBOX */
#Mh_yomigana_list_box, #Mh_yomigana_list_box2{
	display: none;
	clear: both; float: left;
	padding: 0; margin-top: 0; width: 100%;
	border-top: 1px #777 dashed;
}
.Mh_yomigana_r{
	clear: both; float: left;
	padding: 0; margin-top: 20px; width: 100%; height: 35px;
}
/* よみがな */
.Mh_yomigana_r_1{
	clear: both; float: left;
	padding: 0; margin: 0; width: 220px; height: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 35px;
	overflow: hidden;
}
@media screen and (max-width: 720px){	/* 以下の場合 */
	.Mh_yomigana_r_1{ width: 33vw; font-size: 82%; }
}
/* 登録文の文頭16文字 BOX */
.Mh_yomigana_r_2{
	float: left;
	padding: 0; margin-right: 5px; width: 300px; height: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 35px;
}
@media screen and (max-width: 720px){	/* 以下の場合 */
	.Mh_yomigana_r_2{ margin-right: min(1.5vw, 5px); width: 50vw; font-size: 82%; }
}
/* コピーボタン */
.Mh_yomigana_r_3{
	display: none;
	float: left;
	padding: 0; margin: 0; width: 45px; height: 100%;
	background-color: #555;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 82%; line-height: 35px;
	cursor: pointer;
}
.Mh_yomigana_r_3:hover{ background-color: #777; border: 1px #999 solid; }

/* コピー用のテキストエリア */
.Mh_yomigana_r_4{
	display: none;
	float: left;
	padding: 0 2px; margin: 0; width: 45px; height: 100%;
	background-color: #000;
	border: 1px #000 solid;0
	text-align: center; color: #000; font-size: 82%; line-height: 35px;
	cursor: pointer;
}


/* 登録文 INPUT */
.Mh_input_n, .Mh_input_y{
	float: left;
	padding: 0 5px; margin: 0; width: 100%; height: 100%;
	background-color: #222;
	border: 1px #555 solid; border-radius: 4px;
	text-align: left; color: #fff; font-size: 100%; line-height: 35px;
	cursor: pointer;
}
.Mh_input_y{ background-color: #035; border: 1px #777 solid; cursor: default; }
/* 一件も該当するレコードがない場合 */
#Mh_yomigana_er, #Mh_kensaku_er{
	clear: both; float: left;
	padding: 0; margin-top: 20px; width: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
/* 登録件数 */
#Mh_yomigana_list_tourokusuu, #Mh_yomigana_list_tourokusuu2, #Mh_yomigana_list_tourokusuu3{
	clear: both; float: left;
	padding: 5px; margin-top: 20px; width: 100%;
	border-top: 1px #777 solid;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
#Mh_yomigana_list_anchor, #Mh_kensaku_list_anchor{
	clear: both; float: left;
	padding: 5px 10px; margin-top: 30px; width: 80px;
	border: 1px #aaa dashed; border-radius: 4px;
	background-color: #555;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
#Mh_yomigana_list_anchor:hover{ background-color: #555; cursor: pointer; }


/* 修正 */
#memu_hitomoji_syuusei{
	display: none;/**/
	clear: both; float: left;
	padding: 0; margin-top: 15px; width: 100%;
}
.I_box{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
/* INPUT 説明テキスト用 */
.Mt1{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 30px;
}
/* よみがな BOX */
.Mt2{
	clear: both; float: left;
	padding: 0; margin: 0; width: 400px; height: 35px;
}
@media screen and (max-width: 720px){	/* 以下の場合 */
	.Mt2{ width: 100%;}
}
/* よみがな INPUT TYPE TEXT */
.I_i{
	padding: 0 5px; margin: 0; width: 100%; height: 100%;
	border: 1px #777 solid;
	background-color: #333; border-radius: 4px;
	text-align: left; color: #fff; font-size: 88%; line-height: 20px;
}
.I_i:focus{ border: 1px #aaa solid; }
/* INPUT 説明テキスト用 */
.Mta{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
.Mta_t{
	clear: both; float: left;
	padding: 0; margin-right: 10px; width: auto; height: 25px;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
.Mta_button{
	float: left;
	padding: 0; margin-left: 7px; width: 30px; height: 25px;
	background-color: #555;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 82%; line-height: 24px;
}
.Mta_button:hover{ background-color: #777; cursor: pointer; }
/* 短縮文 BOX */
.Mt3{
	clear: both; float: left;
	padding: 0; margin-top: 7px; width: 100%;
}
/* INPUT TYPE TEXTAREA */
.I_tx{
	padding: 5px; margin: 0; width: 100%; height: 160px;
	border: 1px #777 solid;
	background-color: #333; border-radius: 4px;
	text-align: left; color: #fff; font-size: 113%; line-height: 26px;
}
.I_tx:focus{ border: 1px #aaa solid; }
/* エラー用	※上下にマージン設定 */
.Mte{
	clear: both; float: left;
	padding: 0 5px; margin: 3px 0 15px 0; width: 100%; min-height: 40px; height:auto;
	text-align: left; color: #f30; font-size: 100%; line-height: 26px;
}
/* 短縮文 BOX */
.Mt4{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
/* 登録ボタン */
.I_send{
	padding: 5px 15px; margin: 0;
	background-color: #222;
	border: 1px #ddd dashed; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 30px;
	cursor: pointer;
}
.I_send:hover{ border: 1px #aaa solid; background-color: #777; color: #fff; }
/* 短縮登録の結果 */
#Mt_syuusei_kekka_er{
	display: none;
	clear: both; float: left;
	padding: 10px 5px; margin-top: 30px; width: 100%;
	background-color: #222;
	border: 1px #777 solid;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
/* 結果表示 */
#kekka_text{
	display: none;
	clear: both; float: left;
	padding: 10px 5px; margin-top: 30px; width: 100%;
	background-color: #222;
	border: 1px #777 solid;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}



/* 削除 */
#menu_skujo_sw_box{
	display: none;
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
#menu_skujo_sw_box_c{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%; height: 100%;
	display: flex;
	align-items: center;				/* 縦方向		中央寄せ		※中央に1つだけBOXを中央寄せにするときぐらいしか使い道がないかも */
	justify-content: center;		/* 水平方向		中央揃え */
}
.m_sakujo_button_b{
	clear: both; float: left;
	padding: 10px; margin-top: 200px; width: 300px;
	background-color: #777;
	border: 2px #ccc solid; border-radius: 4px;
}
.m_sakujo_button_t{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%; height: 45px;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px; letter-spacing: 0px; text-indent: 0px;
}
/* 全削除する・キャンセル */
#m_sakujo_button_id_1, #m_sakujo_button_id_2{
	float: left;
	padding: 0; margin: 0; width: 133px; height: 45px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 94%; line-height: 45px;
}
#m_sakujo_button_id_1{ margin-right: 10px; }
#m_sakujo_button_id_1:hover, #m_sakujo_button_id_2:hover{ background-color: #222; cursor: pointer; }







/* MENU 検索 */
#memu_kensaku{
	display: none;
	clear: both; float: left;
	padding: 0; margin-top: 35px; width: 100%;
}
#m_kennsaku{
	float: left;
	padding: 0; margin-left: 10px; width: 500px; height: 35px;
	background-color: #333;
}
@media screen and (max-width: 720px){	/* 以下の場合 */
	#m_kennsaku{ margin-left: 0; width: 70%;}
}
/* INPUT TYPE TEXT */
#m_kennsaku input{
	padding: 0 5px; margin: 0; width: 100%; height: 100%;
	border: 1px #777 solid;
	background-color: #333;
	text-align: left; color: #fff; font-size: 88%; line-height: 35px;
}
#m_kennsaku input:focus{ border: 1px #999 solid; }
/* 検索のボタン */
.memu_kensaku_c{
	float: left;
	padding: 0; margin-left: 10px; width: 50px; height: 35px;
	background-color: #555;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 35px;
}
.memu_kensaku_c:hover{ background-color: #777; cursor: pointer; }







/* 短縮登録の選択ボタン */
#memu_touroku{
	display: none;
	clear: both; float: left;
	padding: 0; margin-top: 15px; width: 100%;
}
/* 短縮登録の結果 */
#Mt_kekka, #Mt_kekka_er{
	display: none;
	clear: both; float: left;
	padding: 10px 5px; margin-top: 30px; width: 100%;
	background-color: #222;
	border: 1px #777 solid;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
/* INPUT TYPE 用の親BOX */
#input1_b{ display: none; }





/* チェックボックス */
.I_ck_b{
	display: block;
	position: relative;
	user-select: none;
	margin-bottom: 5px;
}
/* デフォルトチェックボックス非表示 */
.I_ck_b input{ display: none; }
/* チェックボックスのスタイル */
.I_ck_b .checkmark {
	position: absolute; top: 0; left: 0;
	width: 25px; height: 25px;
	border: 2px solid #999999;	border-radius: 4px;
	cursor: pointer;
}
/* チェックマーク作成 */
.I_ck_b .checkmark:after {
	content: "";
	display: none;
	position: absolute; left: 7px; top: 2px;
	width: 7px; height: 15px;
	border: 2px solid #FFF;	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* チェック時のスタイル */
.I_ck_b input:checked + .checkmark{ border: 2px solid #09f; background-color: #09f; }
/* チェック時 チェックマーク表示 */
.I_ck_b input:checked + .checkmark:after{ display: block; }
/* チェックボックスのテキスト */
#I_ck_t{
	display: block;
	padding-left: 35px; margin: 0; width: auto; height: 100%;				/* テキストの左右位置 */
	text-align: left; color: #fff; font-size: 100%; line-height: 25px;	/* テキストの上下位置と色 */
	cursor: pointer;
}

/* 開く・閉じるボタン */
.I_open_close{
	clear: both; float: left;
	padding: 0px 7px; margin: 0;
	background-color: #222;
	border-top: 1px #777 dashed; border-bottom: 1px #777 dashed;
	text-align: center; color: #f60; font-size: 94%; line-height: 26px;
}
.I_open_close:hover{ background-color: #333; cursor: pointer; }
















/* ----- フッター */
footer{
	clear: both; float: left;
	margin-top: 500px; width: 100%;
	background-color: #222;
	border-top: 1px #777 dashed;
}
footer div{
	clear: both; float: left;
	padding: 30px 0; margin: 0; width: 100%;
	background-color: #222;
	text-align: center; color: #fff; font-size: 88%;
}
footer div a:link{ color: #f90; }