@charset "utf-8";

/*
body,td,th { font-family:"メイリオ",Verdana,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif; }
*/

body,td,th { font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; }

body, p, img, ol, ul, li, blockquote {
	margin: 0px;
	border: 0px;
	padding: 0px;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-align: left;
}

a {color: #060;}
a:hover {color: #0a0; text-decoration: none; }
a.img {color: #060;}
a:hover.img {color: #0a0;}
a.noborder {border:0;}
a:hover.noborder {border:0;}

div.indent {margin: 0px 0px 20px 60px;}

fieldset {
	margin: 0px 60px 10px 60px;
}
fieldset p {margin: 10px;}
fieldset table {width: 100%;}

hr {
	border: 0px;
	border-top: 1px solid #ccc;
	color:#fff;
	text-align: center;
	margin: 2em 0em;
	width: 100%;
}

iframe {
  display: block;
  margin: auto;
  max-width: 100%;
}

img {
	background-color: transparent;
	max-width: 100% ;
	height: auto ;
}

input[type="text"] {font-size:12px; max-width: 96%; width:140px;}
input[type="submit"] {font-size:12px;}

table, tr, td, th, h1, h2, h3, h4, h5, a {
	margin: 0px;
	border: 0px;
	padding: 0px;
}

/***　通常ファイルのスタイル設定　***/
#body, #header, #footer {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	border: 0;
	padding: 0;
	line-height: 1.5em;
	background-color: #fff;
	text-align: left;
}
#body {
	border-bottom: 1px solid #cdc;
	padding-top: 0px;
	padding-bottom: 20px;
}
#body:after{
	content: "";
	clear: both;
	display: block;
}

#header {
	font-size: 24px;
	font-weight: bold;
	padding: 4px 16px;
	border-bottom: 1px solid #bbb;
}
#header a {border: 0; margin: 10px; text-decoration: none;}
#header a:hover {border: 0;}


table {
    border-top: 1px solid #555;
    border-left: 1px solid #555;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.5em auto;
}

th, td {
    padding: 2px 4px;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    font-size: 12px;
}
th {
    background-color: #7EE;
    border-top: 1px solid #EEE;
	line-height: 100%;
    padding: 4px;
	text-align: center;
}

ul, ol, dl {margin:0.4em 10px 0.4em 50px;}
li {margin:0px 0px 0.4em 30px;}

dl {border: 1px solid #ccc;border-top: none;}
dt,dd {border-top: 1px solid #ccc;padding:3px;}
dt {background: #eee;float: left;margin-right:4px;}
dd {border-left: 1px solid #ccc;}
dd:after{clear: left;}

ul li {    list-style: square outside url(./img/square.png); }
ul ul, td ul {margin-left: 5px;}
ul ul li {
    margin-left: 5px;
    list-style: square outside url(./img/square-m.png);
}

ol {
    counter-reset: li;
    list-style: none;
}
ol li {position: relative;}
ol > li::before {
    position: absolute;
    font-weight: bold;
    counter-increment: li;
    content: counters(li, '-') ;
    background: lightskyblue;
    color: white;
    padding: 0em .4em;
    left: -20px;
}

td ul li {
	list-style:square outside url(./img/square-m.png);
	margin-left: 20px;
}




/*****　見出し　*****/
h1, h2, h3, h4, h5 {
	letter-spacing: 2px;
	line-height: 120%;
	text-align: left;
	clear: both;
}

h1 a img, h2 a img, h3 a img, h4 a img, h5 a img {margin-right:30px;margin-left:10px;border:0px;}
h1 a:hover img, h2 a:hover img, h3 a:hover img, h4 a:hover img, h5 a:hover img {border:0px;}
h1 a, h2 a, h3 a, h4 a, h5 a {border:0px;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {border:0px;}


h1 {
	background-color:#7ee;
	border: 1px solid #777;
	margin: 4px 4px 16px 4px;
	padding: 10px 10px;
	text-shadow:0px 0px 2px #FFF, 4px 4px 2px rgba(0,0,0,0.3); 
}
.sub {
    font-weight: bold;
	margin: 16px 0px 8px 0px; 
	padding: 10px 10px;
	border-top: 1px solid #164;
	border-bottom: 1px solid #164;
	border-left: 16px solid #164;
	font-size: 22px;
}

h2 {
	margin: 1em 10px 1em 10px; 
	padding: 3px 8px 3px;
	border: 1px solid #394;
	border-left: 8px solid #394;
	background: linear-gradient(white, white, gainsboro);
	box-shadow: 5px 5px 8px -2px;
}

h3 {
	margin: 1em 25px 1em 30px; 
	padding: 3px 6px 3px;
	border: 1px solid #5a7;
	border-left: 8px solid #5a7;
	background: linear-gradient(white, white, gainsboro);
	box-shadow: 5px 5px 8px -2px;
}

h4 {
	margin: 1em 25px 1em 40px; 
	padding: 3px 6px 3px;
	border: 1px solid #7a0;
	border-left: 8px solid #7a0;
	background: linear-gradient(white, white, gainsboro);
	box-shadow: 5px 5px 8px -2px;
}

h5 {
	margin: 1em 25px 1em 50px; 
	padding: 3px 6px 3px;
	border: 1px solid #333;
	border-left: 8px solid #333;
	background: linear-gradient(white, white, gainsboro);
	box-shadow: 4px 4px 6px -2px;
}

P { margin: 10px 0px 16px 60px; }
rt {font-size:1em; margin-top:4px;}

details { transition: 1s; }
details[open] { background: #c3f6ff; }
summary {
	cursor: pointer;
	border: 1px solid #394;
	border-left: 8px solid #394;
    font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
	background: linear-gradient(white, white, gainsboro);
	line-height: 120%;
	margin: 10px;
	padding: 3px 8px;
}

/********************　共通クラス　********************/
.border {
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 10px 20px 16px 44px;
	padding: 5px 16px;
}
.center {text-align: center; margin: 0 auto;}
.current {
    color: #000 !important;
    background-color: #ccc !important;
}
.gray {
	border-radius: 4px;
	background-color: #ccc;
	margin: 10px 20px 16px 44px;
	padding: 5px 16px;
}
.emp{
    border: solid 2px #aaa;
	border-radius: 4px;
    box-shadow: 0 3px 5px #aaa;
 	margin-right: 44px;
    padding: 0.8em 1em;
}
.history {
	border: 1px solid #777;
	height: 100px;
	overflow: auto;
}

.icon-menu {
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  display: none;
  position: fixed;
  height: 26px;
  top: 2px;
  right: 8px;
  width: 26px;
  opacity: 0.7;
  z-index: 1000;
}

.icon-menu span {
  background: #cccccc;
  display: block;
  height: 16%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 84%;
}

.icon-menu span::before,
.icon-menu span::after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  width: 100%;
}

.icon-menu span::before { margin-top: -38%; }
.icon-menu span::after { margin-top: 19%; }

.mtop {margin-top: 10px;}
.ml_10 {margin-left: 10px;}
.ml_24 {margin-left: 24px;}
.ml_40 {margin-left: 40px;}


.mbox {
	border: 1px solid #bbb;
	margin: 4px;
}
.mbox ul,.mbox ol {margin: 8px;}
.mbox li {margin-left: 14px;}
.mbox li li {margin-left: 2px;}
.mbox ol li {margin-left: 2px;}
.mbox hr {
	margin-top: 0px;
	margin-bottom: 0px;
}

.st {
	position: relative;
	background-color:#7ee;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
}

.st::after {
    position: absolute;
	content: '▼';
    font-size: 6pt;
	right: 4px;
}
.st2 {
	background-color:#fee;
	font-weight: bold;
	text-align: center;
}

.right {
	text-align: right;
	font-size: 80%;
}

.noborder {
	border:0;
}

table.noborder td {
	border:0;
}
	
table.fixed {
	table-layout: fixed;
	width: 90%;
}
table.fixed td {padding: 0px;}

table.fixed a {
	display: block;
	padding: 2px 5px;
}
table.fixed a:hover {
	color: #060;
	background-color:#33FFFF;
}


.red {
	color:#f00;
	font-weight: bolder;
}

.fmenu ul { list-style-type: none; }
.fmenu li {
	border-left: 1px solid #999;
	display: block;
	float:left;
	margin: 0px;
	padding: 0px 5px;
	line-height: 200%;
	min-width: 80px;
	text-align: center;
}
.fmenu li:last-child { border-right: 1px solid #999; }
.fmenu a {
	display: block;
	background-color: #eee;
}
.fmenu a:hover { background-color: #ddd; }
.fmenu:after,.in:after {
	content: "";
	display: block;
	clear: both;
}

.filter a {
	padding: 2px 10px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #777 no-repeat center center;
	line-height: 200%;
}

.rating {padding:0px 60px;}
.star-rating {
  position: relative;
  width: 5em;
  height: 1em;
  font-size: 24px;
}
.star1,.star1-5,.star2,.star2-5,.star3,.star3-5,.star4,.star4-5,.star5 {
  position: absolute;
  top: 0;
  left:0;
  overflow: hidden;
  color: #ffa500;
}
.star-back{color: #ddd;}
.star1{width: 20%;}
.star1-5{width: 30%;}
.star2{width: 40%;}
.star2-5{width: 50%;}
.star3{width: 60%;}
.star3-5{width: 70%;}
.star4{width: 80%;}
.star4-5{width: 90%;}
.twitter-tweet {margin: 0 auto;}

/********************　tablesorter　********************/
.tablesorter .header {
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
.headerSortDown, .headerSortUp { background-color: #8dbdd8; position: relative; }
tr.odd { background-color:#F0F0F0; }

.headerSortUp:after {
	position: absolute;
	content: '▼';
    font-size: 4pt;
    bottom: -4px;
    right: 0px;
}
.headerSortDown:after {
	position: absolute;
	content: '▲';
    font-size: 4pt;
    top: -3px;
    right: 0px;
}

/********************　ID　********************/

#navi {
	position: fixed;
	bottom: 2px;
	left: 100%;
	width: 128px;
	margin-left: -128px;
	filter: alpha(opacity=80);
    opacity: 0.5;
	list-style: none;
	background: #777 no-repeat center center;
	border-radius: 10px;
	transition: 1s;
}
#navi:hover {
	opacity: 0.9;
}
#navi a:hover {
	color: #000;
	background: #ccc;
}
#navi ul { margin: 8px 4px; }
#navi li {
	border-top: 1px dotted #ccc;
	font-size:0;
	list-style: none;
	margin: 0;
	padding: 1px 0px;
}
#navi li:first-child { border: none; }
#navi a {
	color: #fff;
	display: inline-block;
	font: 11px/100% Arial, Helvetica, sans-serif;
	padding: 2px 7px;
	text-decoration: none;
	width: 88%;
	min-width:0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#navi ul ul { margin: 0px 4px; }
#navi ul ul li {
	margin-left: 4px;
	padding-left: 2px;
	background: url(./img/arrow.png) no-repeat 0px 5px;
}
#navi ul ul a {
	margin-left: 8px;
	padding-left: 2px;
}

#navi hr {
	margin: auto;
	padding: 0px;
	width: 94%;
}

#left {
	float: left;
	width: 20%;
	display: block;
}

#main {
	float: left;
	width: 80%;
}

#footer {
	text-align:center;
	padding: 10px 0px 10px 0px;
	background: #7ee;
	border-bottom: 1px solid #cdc;
	clear: both;
}

#footer address {
	font-style: normal;
	padding-bottom: 1px;
	margin-left: 30px;
	margin-right: 30px;
}

.box {
	display: inline-block;
	margin-left: 60px;
	vertical-align: top;
}
.box p {margin-left: 0px;}

.boxleft {
	float:left;
	min-width: 384px;
}
.boxboth:after {content:""; clear:both; display:block;}

.box2 ul {
	float:left;
	min-width: 320px;
}
.box2 {overflow: hidden;}
.box2:after {clear: both;}

#breadcrumb {
	background-color: #7ee;
	border-top: 1px solid #fff;
 	border-bottom: 1px solid #bbb;
}
#breadcrumb ol { 
	margin: 0px; 
	padding: 4px 16px;
}
#breadcrumb ol li {
	display: inline;
	font-size: 12px;
	list-style-type: none;
	margin: 0px;
}
#breadcrumb ol li:before {
	position: static;
	padding: 0px 0px 0px 2px;
    background: transparent;
    color: black;
    content: " > ";
}
#breadcrumb ol li:first-child:before {content: "";}

#toc {
border: 1px solid #bbb;
margin: 10px 40px;
}
#toc:before {
background-color: #7ee;
border-bottom: 1px dashed #bbb;
content: "目次";
display: block;
font-weight: bold;
padding: 2px 40px;
}

/********************　メディアクエリ　********************/

@media screen and (max-width: 640px) {
	html {font-size: 62.5%;}
	body, p, a, img, ol, ul, li, blockquote,td,th,div {font-size: 100%;}
	h3 {margin-left: 15px;}
	h4 {margin-left: 20px;}
	input[type="text"] {width: 80px;}
	P, ul, div.indent { margin-left: 20px; }
	ul li { line-height: 180%; }
	fieldset {margin: 0px 20px 10px 20px;}

	#body, #header, #footer, div.smenu {
		width: 100%;
		line-height: 1.5em;
	}
	#left {
		z-index: 990;
    	background: #fff;
		display: none;
    	overflow: auto;
    	position: fixed;
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	width: 100%;
	}

	#header {
		font-size: 18px;
		padding: 2px;
	}
	#main {width: 100%;}
	#navi {
		position: static;
		bottom: 2px;
		left: 0px;
		margin-left: 0px;
	}
	#navi a {display: inline-block;}

	.box { margin-left: 20px; }
	.boxleft { 
		float: none; 
		min-width: 80%;
	}
	.box2 ul {
		float:left;
		min-width: 40%;
	}
	.icon-menu { display: inline-block; }
}