@charset "UTF-8";

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
/*height: 100%;*/
}
h1 {
margin: 0;
}
ol, ul {
list-style: none;
}
ul, ol {
padding: 0;
margin: 0 0 10px 20px;
}
ul {
list-style: disc;
}
li {
line-height: 20px;
}
a {
text-decoration: none;
}

/* clear fix */
.cf:before,
.cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}

@font-face {
	font-family: 'FontAwesome';
	src: url('../font/fontawesome-webfont.eot?v=4.1.0');
	src: url('../font/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

a[target="_blank"] {
	vertical-align: bottom;
	-webkit-transition: color .1s ease-in 0;
	transition: color .1s ease-in 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a[target="_blank"]:after {
	font-family: 'FontAwesome';
	vertical-align: middle;
	letter-spacing: 0;
	padding-left: 0.25em;
	font-size: 86%;
}
a[target="_blank"]:after { content: '\f08e'; }

.fa-arrow-circle-up, .fa-arrow-circle-down {
	font-family: 'FontAwesome';
	vertical-align: middle;
	width: 1em;
	padding-left: .1em;
	padding-right: .1em;
}
.fa-arrow-circle-up:before { content: "\f0aa"; }
.fa-arrow-circle-down:before { content: "\f0ab"; }

body {
	position: relative;
	color: #333333;
	margin: 0;
	background: url('../img/bg_body.png') left top repeat;
}

.mincho {
	font-family: 'source-han-serif-japanese','ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'MS Mincho', '小塚明朝 Pro', serif;
}
.gothic {
	font-family: 'Lucida Grande', 'Shin Go Medium', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

a {
	text-decoration: none;
	border-bottom: 1px dotted #666666;
}
a.pickup {
	border-bottom: none;
}

.large { font-size: 150%; }
.small { font-size: 92%; }
.tiny { font-size: 84%; }
.center { text-align: center; }
.right { text-align: right !important;; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mt10 { margin-top: 10px !important; }

.blue { color: #0000FF; }
.red { color: #FF0000; }
.orange { color: #FFAA22; }

#wrap {
	position: relative;
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}

.right-side {
	position:absolute;
	right: 0;
	top: 0;
	width: 160px;
}
.right-side .ads {
	margin-top: 20px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 3px 1px;
}
.right-side .ads:FIRST-CHILD {
	margin-top: 0;
}

.paper {
	position: relative;
	background-color:#fcfcfc;
	margin-bottom: 20px;
	padding: 10px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 3px 1px;
}
.content {
	position: relative;
	min-height: 620px;
}
.content .paper {
	width:844px;
}

.header h1 {
	display: block;
	width: 2.5em;
	float: left;
	font-size: 2.5em;
}
.header h1 span {
	display: inline-block;
	border: 1px solid #333333;
	line-height: 1em;
	padding: 2px;
}
.header h1 span.black {
	background-color: #333333;
	color: #FFFFFF;
}
.header p {
	margin: 0;
}

ul.footnote {
	margin: 0;
	list-style: none;
}

p.footnote,
ul.footnote li {
	padding-left: 1em;
	text-indent: -1em;
}

.sticky-note {
	position: relative;
	display: inline-block;
	background-color:#fcfcfc;
	min-width: 6em;
	margin-right: 10px;
	margin-bottom: 10px;
/*	padding: 10px 15px 10px 10px;*/
	padding: 10px 10px 10px 8px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px 1px;
}
.sticky-note:hover {
	background-color:#ffffff;
}
a.sticky-note {
	color: #333333;
	border-bottom: none;
}
a.sticky-note:hover {
	color: #111111;
}
.sticky-note:after {
	width:33%;
	height:95%;
	content: "";
	position: absolute;
	top: 0px;
	right: 3px;
	box-shadow: 0 5px 5px #666666;
	-webkit-transform: rotate(2.5deg);
	-moz-transform: rotate(2.5deg);
	-o-transform: rotate(2.5deg);
	-ms-transform: rotate(2.5deg);
	transform: rotate(2.5deg);
	z-index: -1;
}
.sticky-note span {
	padding: 0 .75em 0 .25em;
}

a.marker-thinblue {
	border-bottom: none;
}
.marker-thinblue,
.marker-blue,
.marker-lightblue {
	position: relative;
}
.marker-blue:after ,
.marker-lightblue:after {
	width:100%;
	height:100%;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	-webkit-transform: rotate(-1.25deg);
	-moz-transform: rotate(-1.25deg);
	-o-transform: rotate(-1.25deg);
	-ms-transform: rotate(-1.25deg);
	transform: rotate(-1.25deg);
}
.marker-thinblue:after {
	width:100%;
	height:100%;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
.marker-lightblue:hover:after,
.marker-blue:after {
	background: linear-gradient(transparent 50%, #80C0FA 96%, #70B0EA 88%);
}
.marker-lightblue:after {
	background: linear-gradient(transparent 50%, #C0E0FC 96%, #B0D0FA 88%);
}
.marker-thinblue:after {
	background: linear-gradient(transparent 80%, #80C0FA 96%, #70B0EA 88%);
}

.content h2 {
	margin: 0 0 .25em 0;
	font-weight: normal;
	font-size: 133%;
}
.content h2 span {
	padding: 0 .25em 0 .25em;
}
.content p {
	margin: 0;
	line-height: 133%;
}
.form-checker {
	width: 100%;
}
.form-checker tbody tr th {
	white-space: nowrap;
	text-align: left;
	font-weight: normal;
}
.form-checker tbody tr th,
.form-checker tbody tr td {
	vertical-align: top;
	border-top: 3px dotted #CCCCCC;
	padding: 10px 5px;
}
.form-checker tbody tr:FIRST-CHILD th,
.form-checker tbody tr:FIRST-CHILD td {
	border-top: none;
}
.form-checker tbody td.submit-area {
	vertical-align: middle;
	padding-left: 10px;
}
.checker-submit {
	padding: 1.25em .25em !important;
	font-size: 1.5em !important;
	white-space: nowrap;
}

/* tab_menu */
.tab_menu {
	height: 28px;
	box-shadow: rgb(153, 153, 153) 0px -1px inset;
}
.tab_menu ul {
	margin: 0;
}
.tab_menu ul li {
	display: inline-block;
	padding-left: 10px;
	list-style: none;
}
.tab_menu ul li a {
	text-decoration: none;
	border-bottom: none;
	color: #333333;
	font-size: 14px;
	line-height: 28px;
	padding: 0 6px;
}
.tab_menu ul li a:hover {
	text-decoration: underline;
}
.tab_line, .tab_label {
	height: 28px;
	background-color: #F0F0F0;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #999999;
	border-top: 1px solid #999999;
	border-right: 1px solid #999999;
}
.tab_line.selected, .tab_label.selected {
	background-color: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	border-top-left-radius: 8px;
}

.main-content {
	width: 844px;
}
.main-content .adjust-min {
	min-height: 600px;
}
.not-entry {
	padding: 1em;
}

.ijidoukun {
	border: 1px solid #999999;
	margin-top: 10px;
}
.ijidoukun h3 {
	margin: 0;
	border-bottom: 1px dashed #999999;
	padding: 0.25em;
	font-weight: normal;
	font-size: 100%;
	line-height: 150%;
	color: #111111;
}
.ijidoukun .words {
	padding: 0.25em 0 0.5em 0;
	margin: 0;
}
.ijidoukun ul.footnote {
	border-bottom: none;
	margin: 0;
	padding: 0.3em 0.25em 0.2em .25em;
	border-top: 1px solid #999999;
}
.ijidoukun ul.footnote li {
	float: none;
	padding-left: 1.75em;
	text-indent: -1.75em;
	font-size: 86%;
	line-height: 125%;
}
.ijidoukun ul.footnote li span:FIRST-CHILD {
	display: inline-block;
	width: 1.75em;
	padding-left:0;
	text-indent: 0;
	text-align: center;
}

/* */
.tab_content {
	padding: 10px 5px;
}
.tab_content > ul {
	margin-left: 0;
	margin-bottom: 6px;
	border-bottom: 3px double #999999;
	list-style: none;
	clear: both;
}
.tab_content ul li {
	float: left;
}
div.popup_info {
	display: inline-block;
	margin-right: 5px;
	font-size: 18px;
	line-height: 125%;
}
table.char_code {
	width: 94px;
	margin-right: 2px;
	margin-bottom: 5px;
}
.char_code td.char {
	font-size: 40px;
	line-height: 105%;
	width: 42px;
	vertical-align: top;
	text-align: left;
}
.char_code td.code {
	width: 50px;
	text-align: left;
	font-size: 10px;
	line-height: 12px;
}
.char_code td span.new {color: #0000FF; }
.char_code td span.old {color: #FF0000; }

/* */
#list_navi {
	z-index: 100;
	position: fixed;
	left: 50%;
	bottom: 0;
	max-width: 420px;
	margin-left: -200px;
	background-color: #FFFFFF;
	padding: 0 1em 0 1em;
	border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top: 4px double #CCCCCC;
	border-left: 4px double #CCCCCC;
	border-right: 4px double #CCCCCC;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px 2px;
}
#list_navi .fa-arrow-circle-up,
#list_navi .fa-arrow-circle-down {
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
}
#list_navi .fa-arrow-circle-up {
	left: .25em;
}
#list_navi .fa-arrow-circle-down {
	right: .25em;
}
#list_navi > ul {
	list-style: none;
	margin: 5px 10px;
}
#list_navi > ul li {
	display: inline-block;
	min-width: 18px;
}
#list_navi  a {
	color: #EC6800;
	text-decoration: none;
	border-bottom: none;
}

h3.bushu {
	border-bottom: 3px double #999999;
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 0 1em 0.1em 1em;
	color: #ec6800;
}

/* */
table.char_read {
	width: 385px;
	margin-right: 10px;
	margin-bottom: 5px;
}
table.char_read td {
	vertical-align: middle;
	font-size: 14px;
	line-height: 125%;
	text-align: left;
}
table.char_read td.read {
	width: 6.5em;
	padding: 4px 2px 2px 6px;
}
table.char_read td.char {
	font-size: 40px;
	line-height: 105%;
	width: 58px;
	vertical-align: top;
	text-align: center;
}
table.char_read td.rei {
	border-left: 1px dotted #999999;
	padding: 4px 6px 2px 6px;
}
table.char_read td.underline {
	border-bottom: 1px dotted #999999;
	padding-top: 3px;
	padding-bottom: 2px;
}
table.char_read td.remarks {
	background-color: #E0E0F0;
	padding: 4px 6px 2px 6px;
}
table.char_read tr.public td {
	background-color: #F0F0F0;
	padding: 4px 6px 2px 6px;
}
table.char_read td span.new {
	color: #0000FF;
}
table.char_read td span.old {
	color: #FF0000;
}
table.char_read td span.jinmei {
	color: #FFAA22;
}

/* */
#pickup_char {
	position: absolute;
	padding: 1px 2px 2px 2px;
	background-color: #9999CC;
	z-index: 99;
}
#pickup_char table.char_read {
	margin: 0px;
	border: 1px solid #FFFFFF;
	background-color: #FFFFFF;
	margin-top: 1px !important;
}

/* */
div.summary, div.data {
	border: 1px dotted #C0C0C0;
	padding: 5px;
	background-color: #F8F8F8;
	word-break: break-all;
	font-size: 86%;
	line-height: 133%;
}
div.summary a, div.data a {
	color: #333333; text-decoration: none; border-bottom: none;
}
span.c1 { background-color: #66FFFF; }
span.c2 { background-color: #AAFFFF; }
span.c3 { background-color: #DDFFFF; }
span.c4 { background-color: #66FF66; }
span.c5 { background-color: #AAFFAA; }
span.c6 { background-color: #DDFFDD; }
span.c7 { background-color: #FFFF88; }
span.c8 { background-color: #FFFFCC; }
span.c9 { background-color: #CCCCFF; }
span.cx { background-color: #FFAAAA; }
span.cy { background-color: #FFBB44; }
span.xx { background-color: #CC66FF; }

.disable_marker_c1 span.c1 { background-color: inherit; }
.disable_marker_c2 span.c2 { background-color: inherit; }
.disable_marker_c3 span.c3 { background-color: inherit; }
.disable_marker_c4 span.c4 { background-color: inherit; }
.disable_marker_c5 span.c5 { background-color: inherit; }
.disable_marker_c6 span.c6 { background-color: inherit; }
.disable_marker_c7 span.c7 { background-color: inherit; }
.disable_marker_c8 span.c8 { background-color: inherit; }
.disable_marker_c9 span.c9 { background-color: inherit; }

.check_summary {
	width: 100%;
}
.check_summary td {
	vertical-align: top;
	padding-right: 8px;
}

/* */
.button {
	display: inline-block;
	padding: .25em .75em;
	border: 1px solid #999;
	color: #333333;
	font-size: 84%;
	border-radius: .25em;
	background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));
	-moz-box-shadow: 1px 1px 2px #E7E7E7;
	-webkit-box-shadow: 1px 1px 2px #E7E7E7;
}
.button:hover {
	background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc));
}
.button:active {
	background: #ccc;
/*	padding: 6px 20px 4px;*/
}
p > .button {
	padding: .15em .5em .1em .5em;
	line-height: 120%;
}

/* */
.hidden {
	display: none;
}

/* */
.footer {
	position: relative;
}
.footer > a {
	position: absolute;
	right: 10px;
	top: 10px;
}

#plusone, .fb-share-button { display: inline-block; }

.selectable-form { display: none; }
.selected-form { display: block; }
.top_border {
	border-top: 3px double #999999;
	padding-top: 6px;
}

.code_list div.popup_info {
	margin-right: 0;
}
.code_list table.char_code {
	margin-right: 0;
	margin-bottom: 0;
}
.code_list > ul {
	border-bottom: none;
}
.code_list > ul > li {
	display: inline-block;
	border-bottom: 3px double #999999;
	float: none;
}

.tab_content > .tab-pane {
	display: none;
}
.tab_content > .active {
	display: block;
}

.fade {
	transition: opacity .15s linear;
}
.collapse {
	border-collapse: collapse;
	border-spacing: 0;
}
.collapse td {
	padding: .25rem .5rem;
	text-align: center;
}
tr.bb-double td {
	border-bottom: 3px double #999999;
}
tr.bb-dotted td {
	border-bottom: 1px dotted #999999;
}
.large {
	font-size: 2.5rem;
}

@media screen and ( max-width:1048px ) {
	#wrap {
	    width: 99%;
	}
	.main-content {
 	   width: 100%;
	}
	.content .paper {
	    max-width: 80%;
	}
	table.char_read {
    	width: 300px;
    	margin-right: 10px;
    	margin-bottom: 5px;
	}
	.tab_menu {
	    height: auto;
	}
	#checker-form input, #checker-form textarea {
		max-width: 28em;
	}
	.form-checker tbody label {
		white-space: nowrap;
	}
	table.char_code { width: 155px; }
}

@media screen and ( max-width:864px ) {
	.content .paper { max-width: 73.5%; }
	table.char_read { width: 100%; }
	.tab_menu ul li a {
	    font-size: 12px;
	    padding: 0 3px;
	}
	.tab_menu ul li { padding-left: 8px; }
	.tab_content > ul { border-bottom: none; }
	.tab_content > ul li {
		float: none;
		border-bottom: 3px double #999999;
	}
	#checker-form input, #checker-form textarea { max-width: 18em; }
	.checker-submit { font-size: 1.2em !important; }
	.form-checker tbody label { font-size: 0.9em; }
	#wrap { padding-top: 10px; }
	.paper { margin-bottom: 10px; }
	table.char_code { width: 120px; }
}

@media screen and ( max-width:750px ) {
	#checker-form input, #checker-form textarea { max-width: 17em; }
	.checker-submit { font-size: 1.1em !important; }
	.narrow-hide { display: none; }
	table.char_code { width: 100px; }
}

@media screen and ( max-width:640px ) {
	#checker-form input, #checker-form textarea { max-width: 12.5em; }
	.content .paper { max-width: 70%; }
	table.char_code { width: 170px; }
}

@media screen and ( max-width:560px ) {
	.content .paper { max-width: 100%; }
	.right-side { display: none; }
	#checker-form input, #checker-form textarea { max-width: 20em; }
	.header h1 {
    	width: 3em;
    	font-size: 1.5em;
	}
	table.char_code { width: 100px; }
}
@media screen and ( max-width:520px ) {
	#checker-form input, #checker-form textarea { max-width: 17em; }
}
@media screen and ( max-width:480px ) {
	#checker-form input, #checker-form textarea { max-width: 15em; }
	table.char_code { width: 140px; }
}
@media screen and ( max-width:440px ) {
	#checker-form input, #checker-form textarea { max-width: 12.5em; }
}
@media screen and ( max-width:400px ) {
	#checker-form input, #checker-form textarea { max-width: 12em; }
}