@charset "UTF-8;

/*
180wiki skin black(width1000) 0.1 2008/4/11 hrmz
http://180.style.coocan.jp/wiki/

*/

/* wrap
----------------------------------------------------------------------------- */
body { text-align: center; }

/* ここで幅の調整 おおむね77%,23%の配置 */

/* TODO:ここでmediaQueryを使って幅の細いデバイスなどに対応する */


#wrapper {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

#wrap_content{
	float:right;
	width: 77%;
	padding: 10px;
	box-sizing: border-box;
}

#wrap_sidebar{
	float:left;
	width: 23%;
	padding: 10px;
	box-sizing: border-box;
}

/*
320px-1220pxでヘッダ画像は対応させる。

*/


@media screen and (max-width: 625px) {/*スマートホンなどの幅の狭いデバイス:HDサイズ以下*/

	#wrap_content{
		float:none;
		width: auto;
	}
	
	#wrap_sidebar{
		float:none;
		width: auto;
	}

}

@media screen and (min-width: 1220px) {/*スマートホンなどの幅の狭いデバイス:HDサイズ以下*/

	#wrapper {
		width: 1200px;
		margin: 0 auto;
		text-align: left;
		box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px;
	}

}

#footer{
	clear:both;
}


/*幅が細くなると入力欄がはみ出してしまう問題の対処*/
textarea {
	max-width: 100%;
}
input {
	max-width: 100%;
}

table{
	max-width: 100%;
	overflow: scroll;
}

img, video, audio {
  max-width: 100%;
  height: auto;
}

iframe{
  max-width: 100%;
}


/* ■■ design ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* General
----------------------------------------------------------------------------- */
body{
	font-family:verdana, arial, helvetica, Sans-Serif;
	font-size:14px;
	margin: 0;
	padding: 0;
}

img{
	border:none;
	vertical-align:middle;
}

#wrapper {

}

/* ----- link ----- */
a:link {
	color: #003366;
	text-decoration: none;
}
a:visited {
	color: #003366;
	text-decoration: none;
}
a:active {
	color: #999999;
	text-decoration: underline;
}
a:hover {
	color: #FF33CC;
	text-decoration: underline;
}

div.ie5 { 
	text-align:center; 
	overflow-x: auto;
}

span.noexists {
	color:inherit;
	background-color:#FFFACC;
}

.super_index {
	color:#DD3333;
	background-color:inherit;
	font-weight:bold;
	font-size:60%;
	vertical-align:super;
}

a.note_super {
	color:#DD3333;
	background-color:inherit;
	font-weight:bold;
	font-size:60%;
	vertical-align:super;
}

div.jumpmenu {
	font-size:60%;
	text-align:right;
}

em { font-style:italic; }

strong { font-weight:bold; }

.small { font-size:80%; }

span.size1 {
	font-size:xx-small;
	line-height:130%;
	text-indent:0px;
	display:inline;
}
span.size2 {
	font-size:x-small;
	line-height:130%;
	text-indent:0px;
	display:inline;
}
span.size3 {
	font-size:small;
	line-height:130%;
	text-indent:0px;
	display:inline;
}
span.size4 {
	font-size:medium;
	line-height:130%;
	text-indent:0px;
	display:inline;
}
span.size5 {
	font-size:large;
	line-height:130%;
	text-indent:0px;
	display:inline;
}
span.size6 {
	font-size:x-large;
	line-height:130%;
	text-indent:0px;
	display:inline;
}
span.size7 {
	font-size:xx-large;
	line-height:130%;
	text-indent:0px;
	display:inline;
}

/* html.php/catbody() */
strong.word0 {
	background-color:#FFFF66;
	color:black;
}
strong.word1 {
	background-color:#A0FFFF;
	color:black;
}
strong.word2 {
	background-color:#99FF99;
	color:black;
}
strong.word3 {
	background-color:#FF9999;
	color:black;
}
strong.word4 {
	background-color:#FF66FF;
	color:black;
}
strong.word5 {
	background-color:#880000;
	color:white;
}
strong.word6 {
	background-color:#00AA00;
	color:white;
}
strong.word7 {
	background-color:#886800;
	color:white;
}
strong.word8 {
	background-color:#004699;
	color:white;
}
strong.word9 {
	background-color:#990099;
	color:white;
}

/* Header
----------------------------------------------------------------------------- */
#header{
	height: 150px;
	width: 100%;
	text-align: left;
	font-family: verdana, arial, 'trebuchet ms', sans-serif;
	font-size: 30px;
	font-weight: bold;
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
	/*background: url('Header29.jpg');*/
	/*   background-repeat: no-repeat; */
	/*  background-size: contain; */
	color: #FFFFFF;
}

#header a,
#header a:link,
#header a:visited,
#header a:active,
#header a:hover {
	font-family: verdana, arial, 'trebuchet ms', sans-serif;
	font-size: 30px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

#logo{
	padding: 50px 35px 0px 65px;
}


/* Content
----------------------------------------------------------------------------- */
#toolbar {
	margin-left: 15px;
}

#content {
	margin-left: 15px;
	margin-right: 15px;
}

#content h1.title{
	margin:  0;
	padding: 0;
	background-image: none;
}
#content h1.title a{
	font-size:25px;
	color: #333333;
	text-decoration:none;
}

#lastmodified{
	color:#666666;
	font-size:12px;
}

#body{
	margin-top:10px;
}

h1, h2 {
	font-size:16px;
	font-weight: bold;
	padding:4px 0px 4px 32px;
	color: #333333;
}
h3 {
	font-size:14px;
	border-bottom:  3px solid #CCCCCC;
	border-top:     1px solid #CCCCCC;
	border-left:   10px solid #CCCCCC;
	border-right:   3px solid #CCCCCC;
	margin:0px 20px 0px 15px;
	padding:2px 0px 2px 10px;
}
h4 {
	font-size:13px;
	border-left:   8px solid #CCCCCC;
	margin:0px 20px 0px 15px;
	padding:1px 0px 1px 10px;
}
h5, h6 {
	padding-left:10px;
}

p{
	margin:5px 20px;
}

.style_table {
	padding:0px;
	border:0px;
	margin:0px 20px;
	text-align:left;
	color:inherit;
	background-color:#DDDDDD;
}
.style_th {
	padding:5px;
	margin:1px;
	text-align:center;
	color:inherit;
	background-color:#EEEEEE;
}

.style_td {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#EEEEEE
}

thead td.style_td,
tfoot td.style_td {
	color:inherit;
	background-color:#D0D8E0;
}
thead th.style_th,
tfoot th.style_th {
	color:inherit;
	background-color:#E0E8F0;
}

pre{
	border-top:    1px solid #DDDDDD;
	border-right:  2px solid #DDDDDD;
	border-bottom: 2px solid #DDDDDD;
	border-left:   1px solid #DDDDDD;
	margin:5px 20px;
	padding:.5em;
	word-wrap:break-word;
	overflow:auto;
}

blockquote {
	margin:5px 20px;
	padding:5px;
	background-color:#EEEEEE;
	border:1px solid #DDDDDD;
}

ul {
	margin-top:5px;
	margin-bottom:5px;
}

ul.list1 { list-style-type:disc; }
ul.list2 { list-style-type:circle; }
ul.list3 { list-style-type:square; }
ol.list1 { list-style-type:decimal; }
ol.list2 { list-style-type:lower-roman; }
ol.list3 { list-style-type:lower-alpha; }

dt {
	font-weight:bold;
	margin-top:5px;
	margin-bottom:5px;
}
dd {
	margin: 5px 20px 5px 25px;
}

hr.full_hr {
	border-style:ridge;
	border-color:#999999;
	border-width:1px 0px;
}
hr.note_hr {
	width:90%;
	border-style:ridge;
	border-color:#999999;
	border-width:1px 0px;
}

/* SideBar
----------------------------------------------------------------------------- */
div#menubar {
	margin:15px 15px 15px 5px;
	padding:0px;
	font-size: 12px;
	word-break:break-all;
	overflow:hidden;
}

div#menubar h2{
	padding:5px 10px 8px 15px;
	font-size: 12px;
	font-weight: bold;
	/*color: #FFFFFF;*/
}
div#menubar h3,
div#menubar h4,
div#menubar h5,
div#menubar h6 {
	font-weight: bold;
	padding:0px;
}

div#menubar ul {
	padding-left: 15px;
	margin-left: 5px;
	list-style-image: url(180mt-arrow.gif);
}

/* Hooter
----------------------------------------------------------------------------- */
#footer{
	font-size:13px;
	/*text-align:center;*/
	color: #666666;
	padding-bottom: 10px;
}
/* -------------------------------------------------------------------------- */

/* html.php/edit_form() */
.edit_form { clear:both; }

/* pukiwiki.skin.php */
div#navigator {
	clear:both;
	padding:4px 0px 0px 0px;
	margin:0px;
}


div#note {
	clear:both;
	padding:0px;
	margin:0px;
}

div#attach {
	clear:both;
	padding:0px;
	margin:0px;
}

div#related {
	font-size:80%;
	padding:0px;
	margin:16px 0px 0px 0px;
}

div#banner {
	float:right;
	margin-top:24px;
}

div#preview {
	color:inherit;
	background-color:#F5F8FF;
}

/* aname.inc.php */
.anchor {}
.anchor_super {
	font-size:xx-small;
	vertical-align:super;
}

/* br.inc.php */
br.spacer {}

/* calendar*.inc.php */
.style_calendar {
	padding:0px;
	border:0px;
	margin:3px;
	color:inherit;
	background-color:#CCD5DD;
	text-align:center;
}
.style_td_caltop {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#EEF5FF;
	font-size:80%;
	text-align:center;
}
.style_td_today {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#FFFFDD;
	text-align:center;
}
.style_td_sat {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#DDE5FF;
	text-align:center;
}
.style_td_sun {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#FFEEEE;
	text-align:center;
}
.style_td_blank {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#EEF5FF;
	text-align:center;
}
.style_td_day {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#EEF5FF;
	text-align:center;
}
.style_td_week {
	padding:5px;
	margin:1px;
	color:inherit;
	background-color:#DDE5EE;
	font-size:80%;
	font-weight:bold;
	text-align:center;
}

/* calendar_viewer.inc.php */
div.calendar_viewer {
	color:inherit;
	background-color:inherit;
	margin-top:20px;
	margin-bottom:10px;
	padding-bottom:10px;
}
span.calendar_viewer_left {
	color:inherit;
	background-color:inherit;
	float:left;
}
span.calendar_viewer_right {
	color:inherit;
	background-color:inherit;
	float:right;
}

/* clear.inc.php */
.clear {
	margin:0px;
	clear:both;
}

/* counter.inc.php */
div.counter { font-size:70%; }

/* diff.inc.php */
span.diff_added {
	color:blue;
	background-color:inherit;
}

span.diff_removed {
	color:red;
	background-color:inherit;
}

/* hr.inc.php */
hr.short_line {
	text-align:center;
	width:80%;
	border-style:solid;
	border-color:#333333;
	border-width:1px 0px;
}

/* include.inc.php */
h5.side_label { text-align:center; }

/* navi.inc.php */
ul.navi {
	margin:0px;
	padding:0px;
	text-align:center;
}
li.navi_none {
	display:inline;
	float:none;
}
li.navi_left {
	display:inline;
	float:left;
	text-align:left;
}
li.navi_right {
	display:inline;
	float:right;
	text-align:right;
}

/* new.inc.php */
span.comment_date { font-size:x-small; }
span.new1 {
	color:red;
	background-color:transparent;
	font-size:x-small;
}
span.new5 {
	color:green;
	background-color:transparent;
	font-size:xx-small;
}

/* popular.inc.php */
span.counter { font-size:70%; }
ul.popular_list {
<?php
/*
	padding:0px;
	border:0px;
	margin:0px 0px 0px 1em;
	word-wrap:break-word;
	word-break:break-all;
*/
?>
}

/* recent.inc.php,showrss.inc.php */
ul.recent_list {
<?php
/*
	padding:0px;
	border:0px;
	margin:0px 0px 0px 1em;
	word-wrap:break-word;
	word-break:break-all;
*/
?>
}

/* ref.inc.php */
div.img_margin {
	margin-left:32px;
	margin-right:32px;
}

/* search.inc.php id付必要 */
div#searchbox {
	margin:0px 15px;
}

/* vote.inc.php */
td.vote_label {
	color:inherit;
	background-color:#FFCCCC;
}
td.vote_td1 {
	color:inherit;
	background-color:#DDE5FF;
}
td.vote_td2 {
	color:inherit;
	background-color:#EEF5FF;
}




/* 以下LoadingHTML用 */
@-webkit-keyframes fan1x {
	0%{
		opacity: 0;/*あり*/
	}
	30%{
		opacity: 1;/*移り変わり*/
	}
	100%{
		opacity: 0;/*移り変わり*/
	}
}/*これの動作は0%から10%は表示、10%から20%で非表示になり、90%までそのまま、90%から100%で表示になる*/
@-moz-keyframes fan1x {
	0%{
		opacity: 0;/*あり*/
	}
	30%{
		opacity: 1;/*移り変わり*/
	}
	100%{
		opacity: 0;/*移り変わり*/
	}
}/*これの動作は0%から10%は表示、10%から20%で非表示になり、90%までそのまま、90%から100%で表示になる*/
@-ms-keyframes fan1x {
	0%{
		opacity: 0;/*あり*/
	}
	30%{
		opacity: 1;/*移り変わり*/
	}
	100%{
		opacity: 0;/*移り変わり*/
	}
}/*これの動作は0%から10%は表示、10%から20%で非表示になり、90%までそのまま、90%から100%で表示になる*/
@-o-keyframes fan1x {
	0%{
		opacity: 0;/*あり*/
	}
	30%{
		opacity: 1;/*移り変わり*/
	}
	100%{
		opacity: 0;/*移り変わり*/
	}
}/*これの動作は0%から10%は表示、10%から20%で非表示になり、90%までそのまま、90%から100%で表示になる*/
@keyframes fan1x {
	0%{
		opacity: 0;/*あり*/
	}
	30%{
		opacity: 1;/*移り変わり*/
	}
	100%{
		opacity: 0;/*移り変わり*/
	}
}


.dotx{
	width:0.3em;
	height:0.3em;
	float:left;
	margin-top: 0.3em;
	margin-left: 0.4em;
	margin-bottom:0.3em;
	margin-right:0.4em;
	background: #777777;
}
.dotinx{
	background: #000000;
	width:0.7em;
	height:0.7em;
	float:left;
	margin-top: -0.2em;
	margin-left: -0.2em;
	margin-bottom: -0.2em;
	margin-right: -0.2em;
}
.dotxx{
	width:0.5em;
	height:0.5em;
	float:left;
	margin-top: 0.3em;
	margin-left: 0.7em;
	margin-bottom:0.3em;
	margin-right:0.7em;
	background: #777777;
}
.dotinxx{
	background: #000000;
	width:1em;
	height:1em;
	float:left;
	margin-top: -0.25em;
	margin-left: -0.25em;
	margin-bottom: -0.25em;
	margin-right: -0.25em;
}

.dotinanim{
	opacity: 0;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal; 
	-webkit-animation-timing-function: ease-out;/*linear,ease-in-out,ease-in,ease-outなどを指定*/
	-webkit-animation-play-state:running;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal; 
	-moz-animation-timing-function: ease-out;/*linear,ease-in-out,ease-in,ease-outなどを指定*/
	-moz-animation-play-state: running;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal; 
	-ms-animation-timing-function: ease-out;/*linear,ease-in-out,ease-in,ease-outなどを指定*/
	-ms-animation-play-state: running;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal; 
	-o-animation-timing-function: ease-out;/*linear,ease-in-out,ease-in,ease-outなどを指定*/
	-o-animation-play-state: running;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: normal; 
	animation-timing-function: ease-out;/*linear,ease-in-out,ease-in,ease-outなどを指定*/
	animation-play-state: running;
	-moz-animation-name: fan1x;
	-webkit-animation-name: fan1x;
	-o-animation-name: fan1x;
	-ms-animation-name: fan1x;
	animation-name: fan1x;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.w1x{
	-webkit-animation-delay:0.1s;
	-moz-animation-delay:0.1s;
	-ms-animation-delay:0.1s;
	-o-animation-delay:0.1s;
	animation-delay:0.1s;
}
.w2x{
	-webkit-animation-delay:0.3s;
	-moz-animation-delay:0.3s;
	-ms-animation-delay:0.3s;
	-o-animation-delay:0.3s;
	animation-delay:0.3s;

}
.w3x {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.clear{
	clear: both;
}