@charset "utf-8";
/* CSS Document */



/*---------------------------------------------------------------------------------- 設定領域 */

/*------------------------------------------ 範囲・表示方法の設定 */

div#divSetting {
	margin: 0 0 8px 0;
	padding: 8px 0;
	text-align: center;
	border: 1px solid darkgray;
	border-radius: 4px;
}
div#divSetting p {
	line-height: 1.2;
}

div#divSetting > div {
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

div#divSetting select{
	margin: 0 4px;
}

div#divSetting input#tbSource {	/* 変換する値を指定するテキストボックス */
	width: calc(100% - 180px);
	max-width: 250px;
	text-align: right;
	font-size: 18px;
	line-height: 1;
	font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
}

div#divSetting input#btnClear {	/* クリアボタン */
	width: 80px;
	margin: 0 4px;
	border-radius: 6px;
	background-color: gainsboro;
}

/*------------------------------------------ デバッグ用 */

form div#forDebug {
	display: none;
}
div#DebugArea {
	margin: 0 0 8px 0;
	color: red;
	border: 1px solid coral;

}


/*---------------------------------------------------------------------------------- 結果・メッセージ表示領域 */

section#AnswerArea {
	padding-bottom: 0;

}
h1#InfoArea {
	margin-bottom: 0;
}

/*------------------------------------------ セクション */

div#ResultArea {
	display: none;
/*	display: block;*/
	margin: 8px 0;
}
div#ResultArea dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border: none;
	padding: 0;
}

div#ResultArea dl div {
	flex-grow: 1;
	flex-shrink: 1;

	margin: 4px;
	padding: 6px;

	text-align: left;
	background-color: gainsboro;
	border: 1px solid darkgray;
	border-radius: 4px;
}
div#ResultArea dl div.color1 {
	background-color: silver;
}
div#ResultArea dt {
	margin: 0;
	line-height: 1;
}
div#ResultArea dd {
	display: table;

	width: calc(100% - 4px);
	height: 24px;

	background-color: #eeeeee;
	border: 1px solid darkgray;
}
div#ResultArea dd span {
	display: table-cell;

	padding: 3px 0 0 0;
	font-size: 18px;
	line-height: 1;
	font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
}
div#ResultArea dd span.result_int {
	text-align: right;
}
div#ResultArea dd span.result_fra {
	text-align: left;
}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ スマートフォン：～666px   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

div#ResultArea dl div {
	width: 90%;
}
div#ResultArea dl div:nth-child(n+20) {
	width: 40%;
}

div#ResultArea dl div dd span.result_int {
	width: 60%;
}
div#ResultArea dl div:nth-child(n+20) dd span.result_int {
	width: 34%;
}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ スマートフォン：～666px   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (max-width: 350px){
/* このページ独自のブレイクポイント */

section#AnswerArea {
	padding: 0;
	border: none;
}
h1#InfoArea {
	margin: 0;
	border: 1px solid darkgray;
	border-radius: 4px;
}

div#ResultArea {
	padding-bottom: 8px;
	border-bottom: 1px solid darkgray;
}

div#ResultArea dl div {
	margin: 4px 0;
}
div#ResultArea dl div:nth-child(2n+20) {
	margin: 4px 4px 4px 0;
}

}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ タブレット：667px～884px ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 667px) {

div#ResultArea dl div {
	width: 40%;
}
div#ResultArea dl div:nth-child(n+9) {
	width: 25%;
}

div#ResultArea dl div dd span.result_int {
	width: 60%;
}
div#ResultArea dl div:nth-child(n+9) dd span.result_int {
	width: 43%;
}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ デスクトップ小：885px～1201px   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 885px) {


}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ デスクトップ中：1202px～1501px   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 1202px) {

div#ResultArea dl div {
	width: 25%;
}
div#ResultArea dl div:nth-child(n+16) {
	width: 22%;
}

div#ResultArea dl div dd span.result_int {
	width: 60%;
}
div#ResultArea dl div:nth-child(n+9) dd span.result_int {
	width: 60%;
}
div#ResultArea dl div:nth-child(n+16) dd span.result_int {
	width: 43%;
}

}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ デスクトップ大：1502px～ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 1502px) {


}

}