@charset "Shift_JIS";

html {
	font-family: 'Verdana','Arial','ヒラギノ角ゴシック','Hiragino Sans','Meiryo UI',YuGothic,'Yu Gothic',sans-serif;
	font-size: 62.5%;
	color: #252525;
	-webkit-overflow-scrolling: touch;
}

body {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1.8;
    position: relative;
}
@media (max-width: 1200px) {
	body {
		font-size: 1.4rem;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Verdana','Arial','ヒラギノ角ゴシック','Hiragino Sans','Meiryo UI',YuGothic,'Yu Gothic',sans-serif;
	font-weight: 600;
}

.gothic {
	font-family: 'Verdana','Arial','ヒラギノ角ゴシック','Hiragino Sans','Meiryo UI',YuGothic,'Yu Gothic',sans-serif;
}
.mincho {
	font-family: 'Times New Roman','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ＭＳ Ｐ明朝','MS PMincho',sans-serif;
}

a, a:link, a:visited {
	color: #33a1c4;
	text-decoration: none;
	transition: 0.5s;
	text-decoration: underline;
}
a:hover { opacity: 0.6; }
a:hover img { opacity: 0.6; }


.container {
	margin: 0 auto;
	width: 1400px;
	height: auto;
    border-left: 1px solid #a9a9a9;
    border-right: 1px solid #a9a9a9;
    position: relative;
    overflow: hidden;
}
@media (max-width: 1400px) {
	.container {
		margin: 0 auto;
		width: 100%;
		height: auto;
        border: none;
	}
}




/* back */
#back_to_top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	z-index: 999;
}
@media (max-width: 780px) {
	#back_to_top {
		width: 30px;
		height: 30px;
		right: 5px;
		bottom: 20px;
  }
}
#back_to_top button {
	height: 100%;
	width: 100%;
	line-height: 100%;
	text-align: center;
	background: transparent;
	display: block;
	border: none;
	padding: 0;
	outline: 0;
	opacity: 0.5;
}
#back_to_top button:hover {
	opacity: 1;
}
#back_to_top img {
	max-width: 100%;
}



/*---------------------------------
	header
---------------------------------*/
header {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

header h1.title {
    padding: 20px;
    color: #a9a9a9;
    font-size: 3.0rem;
    font-weight: 700;
    background: url(goblin.png) no-repeat bottom right 20px;
}
@media (max-width: 780px) {
	header {
		padding: 0;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
    header h1.title {
        padding: 10px 60px 10px 10px;
        font-size: 2.8rem;
        line-height: 1.2;
        background: url(goblin.png) no-repeat bottom right 80px;
    }
}
@media (max-width: 480px) {
    header h1.title {
        padding: 10px 60px 10px 10px;
        font-size: 2.2rem;
        line-height: 1.2;
        background: url(goblin.png) no-repeat bottom right 60px;
    }
}

header nav#hnavi {
	margin: 0;
    padding: 10px 0;
	color: #FFFFFF;
	width: 100%;
    background: #696969;
}

@media (max-width: 780px) {
    body header nav#hnavi.is-fixed {
        position: fixed;
        top: 0;
        z-index: 100;
    }
}


header nav#hnavi p {
    margin: 0 auto 0 20px;
    width: 6em;
    height: 30px;
}
header nav#hnavi p a {
    padding: 0px 0;
    width: 100%;
    height: 100%;
    line-height: 30px;
    text-align: center;
    background: #ffffff;
    border-radius: 3px;
    display: block;
}

header nav#hnavi ul.hnavi01 { margin-right: 40px;}
header nav#hnavi ul.hnavi02 { margin-right: 20px;}
header nav#hnavi ul li { height: 30px; }
header nav#hnavi ul li + li { margin-left: 10px; }
header nav#hnavi ul li a {
    padding: 0px 10px;
    height: 100%;
    line-height: 30px;
    text-align: center;
    background: #ffffff;
    border-radius: 3px;
    display: block;
}
@media (max-width: 780px) {
    header nav#hnavi ul.hnavi01,
    header nav#hnavi ul.hnavi02 { display: none; }
}


/*---------------------------------
	footer
---------------------------------*/
footer {
    margin: 0;
    padding: 20px 0;
}

footer #toolbar {
    padding: 10px 0;
    background: #696969;
}

footer #toolbar ul { padding: 7px 10px 5px; }

footer .copyright {
    padding: 20px;
    font-size: 1.3rem;
}



/*---------------------------------
	common
---------------------------------*/
#main {
    margin: 0;
    padding: 40px 0;
}
@media (max-width: 780px) {
    #main {
        width: 100%;
    }
}


/* menubar */
#menubar {
    margin: 0;
    padding: 0 20px;
    width: 160px;
    line-height: 1.2;
	display:none;
}

#menubar ul {
    margin: 0 0 10px;
    padding-left: 0.1em;
}
#menubar ul li { margin: 0 0 3px; }
#menubar ul li span { font-size: 1.2rem; }
#menubar ul li:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 2px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #808080;
    vertical-align: middle;
}
#menubar ul li > ul li {
    margin-top: 3px;
    margin-left: 5px;
}
#menubar ul li > ul li:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 2px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #a9a9a9;
    vertical-align: middle;
}

#menubar p, #menubar h5 {
    margin-bottom: 5px;
    font-weight: 600;
    text-align: center;
    background: #dcdcdc;
}


@media (max-width: 780px) {
    #menubar {
        margin: 0;
        padding: 0 20px 40px;
        width: 240px;
        height: 100vh;
    	position: fixed;
    	right: -400px;
        top: 0;
    	background: rgba(255,255,255,1.0);
    	transition: all 0.5s;
	    z-index: 100;
    	box-sizing: border-box;
        overflow-y: scroll;
    }
    #menubar.open { top: 0;right: 0; }
}

/* menu bttun */
.menuBtn {
    margin: auto;
	padding-bottom: 5px;
	font-size: 1.1rem;
	color: #696969;
	width: 5rem;
	height: 35px;
	position: fixed;
	z-index: 200;
	display: block;
	background-color: #ffffff;
	top: 8px;
    left: auto;
	right: 10px;
	outline: 0;
	border: 0;
    border-radius: 5px;
	-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.menuBtn:hover {
  cursor: pointer;
}

.menuBtn span.menu {
	padding-bottom: 0px;
	display: inline-block;
}
.menuBtn span.menu:after {
	content: "MENU"
}
.menuBtn.close-btn span.menu:after {
	content: "CLOSE";
}

.drawer-hamburger-icon {
	margin-top: 5px;
	position: relative;
	display: inline-block;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 2.5rem;
  height: 2px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #696969;
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  position: absolute;
  top: -6px;
  left: 0;
  content: ' ';
}

.drawer-hamburger-icon:after {
  top: 6px;
}

@media (min-width: 781px) {
	.menuBtn, .drawer-hamburger-icon { display: none; }
}

/* closeBtn */
.close-btn {
    top: 10px;
    right: 250px;
}
.close-btn .drawer-hamburger-icon {
  background-color: #FFFFFF;
}

.close-btn .drawer-hamburger-icon:before,
.close-btn .drawer-hamburger-icon:after {
  top: 0;
}

.close-btn .drawer-hamburger-icon:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.close-btn .drawer-hamburger-icon:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.close-btn .drawer-hamburger-icon:before,
.close-btn .drawer-hamburger-icon:after {
  background-color: #696969;
}

@media (min-width: 781px) {
	header nav#hnavi .smpHeaderBottom,
	header nav#hnavi .smpHeader { display: none; }
}




/* body */
#body {
    padding: 0 20px;
    width: calc(100% - 200px);
    box-sizing: border-box;
    line-height: 1.6;
}

#body .bodyInner {
    width: 100%;
    overflow: auto;
}
#body .bodyInner::-webkit-scrollbar {height: 5px;}
#body .bodyInner::-webkit-scrollbar-track {background: #F1F1F1;}
#body .bodyInner::-webkit-scrollbar-thumb {background: #BCBCBC;}

@media (max-width: 780px) {
    #body {
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .fixed {
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

#body #pagetitle {
    margin: 0 auto 3px;
    padding: 5px 0 5px 10px;
    font-size: 2.8rem;
    background: #cccccc;
    border-top: double 6px #ffffff;
    border-bottom: double 6px #ffffff;
}
#nomenu_body #pagetitle {
    margin: 0 auto 20px;
    padding: 5px 0 5px 10px;
    font-size: 2.8rem;
    background: #cccccc;
    border-top: double 6px #ffffff;
    border-bottom: double 6px #ffffff;
}

#body h2 {
    margin: 5px auto 10px;
    padding: 5px 0 5px 10px;
    font-size: 2.0rem;
    background: #cccccc;
}

#body h3 {
    margin: 10px auto;
    padding: 5px 0 5px 10px;
    font-size: 1.8rem;
    background: #dfdfdf;
}

#body h4 {
    margin: 10px auto;
    padding: 5px 0 5px 10px;
    border-left: 3px solid #666666;
    border-bottom: 1px solid #666666;
}


#body .modidate {
    font-size: 1.3rem;
    text-align: right;
    color: #a9a9a9;
}


#body ul {
    margin: 0 0 5px;
    padding-left: 0.4em;
}
#body ul li:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 2px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #808080;
    vertical-align: middle;
}

#body ul li > ul { margin: 0; }

#body ul li > ul li:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 2px;
    border: transparent solid 5px;
    border-left-color: #a9a9a9;
    vertical-align: middle;
}

hr {
    height: 0;
    border-top: 1px solid #999999;
}


#nomenu_body {
    margin: 0 auto;
    width: 95%;
}



/*---------------------------------
	調整用
---------------------------------*/
.fl, .fl-smp {
	display:-webkit-box;
	display:-moz-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
}

.fl-jst {
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	justify-content:space-between;
}

.fl-cen {
	-webkit-justify-content:center;
	-moz-justify-content:center;
	justify-content:center;
}

.fl-end {
	-webkit-justify-content:flex-end;
	-moz-justify-content:flex-end;
	justify-content:flex-end;
}

.fl-wrap {
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

.fl-col {
	-webkit-flex-direction:column;
	-moz-flex-direction:column;
	flex-direction:column;
}


@media only screen and (max-width: 780px) {
	.fl-smp {
		-webkit-flex-direction:column;
		-moz-flex-direction:column;
		flex-direction:column;
	}
}

.mt0 { margin-top: 0!important; }
.mt5 { margin-top: 5px!important; }
.mt10 { margin-top: 10px!important; }
.mt15 { margin-top: 15px!important; }
.mt20 { margin-top: 20px!important; }
.mt30 { margin-top: 30px!important; }
.mt35 { margin-top: 35px!important; }
.mt40 { margin-top: 40px!important; }
.mt50 { margin-top: 50px!important; }
.mt100 { margin-top: 100px!important; }
.mr0 { margin-right: 0!important; }
.mr5 { margin-right: 5px!important; }
.mr10 { margin-right: 10px!important; }
.mr15 { margin-right: 15px!important; }
.mr20 { margin-right: 20px!important; }
.mr25 { margin-right: 25px!important; }
.mb0 { margin-bottom: 0!important; }
.mb5 { margin-bottom: 5px!important; }
.mb10 { margin-bottom: 10px!important; }
.mb12 { margin-bottom: 12px!important; }
.mb15 { margin-bottom: 15px!important; }
.mb20 { margin-bottom: 20px!important; }
.mb25 { margin-bottom: 25px!important; }
.mb30 { margin-bottom: 30px!important; }
.mb35 { margin-bottom: 35px!important; }
.mb40 { margin-bottom: 40px!important; }
.mb50 { margin-bottom: 50px!important; }
.mb60 { margin-bottom: 60px!important; }
.mb80 { margin-bottom: 80px!important; }
.ml0 { margin-left: 0!important; }
.ml5 { margin-left: 5px!important; }
.ml10 { margin-left: 10px!important; }
.ml15 { margin-left: 15px!important; }
.ml20 { margin-left: 20px!important; }
.ml25 { margin-left: 25px!important; }
.ml30 { margin-left: 30px!important; }


.ls5 { letter-spacing: 5px; text-indent: 5px; }
.ls10 { letter-spacing: 10px; text-indent: 10px; }
.ls15 { letter-spacing: 15px; text-indent: 15px; }


.smp_hdn { display: block;}
.pc_hdn { display: none; }
@media only screen and (max-width: 780px) {
	.smp_hdn { display: none;}
	.pc_hdn { display: block; }
}

.ta_cnt { text-align: center; }

.clearfix:after {
	content:"";
	display:block;
	clear:both;
}


/*------ pukiwiki -----*/
pre, dl, ol, p, blockquote { line-height: 1.6; }

blockquote { margin-left:32px; }


dt {
	font-weight:bold;
	margin-top:1em;
	margin-left:1em;
}

pre {
	border-top:#DDDDEE 1px solid;
	border-bottom:#888899 1px solid;
	border-left:#DDDDEE 1px solid;
	border-right:#888899 1px solid;
	padding:.5em;
	margin-left:1em;
	margin-right:2em;
	white-space:pre;
	color:black;
	background-color:#F0F8FF;
}

em { font-style:italic; }

strong { font-weight:bold; }

thead td.style_td,
tfoot td.style_td {
	color:inherit;
	background-color:#fefefe;
}
thead th.style_th,
tfoot th.style_th {
	color:inherit;
	background-color:#E0E8F0;
}
.style_table {
	padding:0px;
	border: 1px solid #696969;
	margin: 10px 0;
	text-align:left;
	color:inherit;
	background-color:#ccd5dd;
	border-collapse: collapse;
}
.style_th {
	padding:5px;
	margin:1px;
	text-align:center;
	color:inherit;
	border: 1px solid #696969;
	background-color:#EEEEEE;
}
.style_td {
	padding:5px;
	margin:1px;
	color:inherit;
	border: 1px solid #696969;
	background-color:#fdfdfd;
}


div.ie5 { text-align:center; }
@media (max-width: 780px) {
    div.ie5 { overflow-x: scroll; }
}

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

.small { font-size:80%; }

.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;
}



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;
}

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



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

div#attach {
	display:none;
}

div#toolbar {
        display:none;
}


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

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

img#logo {
	display:none;
}

/* 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;
}



/* 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 {
}

/* recent.inc.php,showrss.inc.php */
ul.recent_list {
}

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

/* 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;
}