@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*
薄い黄色	FFFFCC

/*================================================
 * reset
================================================*/
*{
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	word-break:break-all;
}
html{
	height:100%;
}
body{
	background:#fff;
	color:#222;
	height:100%;
	margin:0; padding:0;
/*	min-width:320px;*/
	height:100%;
}
audio,
canvas,
img,
video{
    vertical-align:middle;
}
article,
aside,
blockquote,
dd,
div,
dl,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
noscript,
ol,
output,
p,
pre,
section,
table,
tfoot,
ul,
video{
	position:relative;
}
blockquote{
	font-style:normal;
}
img{
	border:0;
	max-width:100%;
	height:auto;
}
a{
	border:none;
}
a:focus{
	outline:none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
hr{
	position:relative;
	font-size:inherit;
	line-height:inherit;
}
button,
input,
select,
textarea{
	font-size:100%;
}
input[type="text"]{
	margin:0;
	padding:5px 10px;
}
button,
input[type="submit"]{
	border:none;
}
button:hover,
input[type="submit"]:hover{
	opacity:0.5;
}
textarea{
	padding:10px;
	resize:vertical;
}
#container table{
	border-collapse:collapse;
	border-spacing:0;
	font-size:100%;
}
th,
td{
	font-weight:inherit;
}

/*================================================
 * Typography
================================================*/
/*
.thin		{ font-weight:100; }
.light		{ font-weight:200; }
.demi-light	{ font-weight:300; }
.regular	{ font-weight:400; }
.medium		{ font-weight:500; }
.bold		{ font-weight:700; }
.black		{ font-weight:900; }
*/
html,
body,
button,
input,
select,
textarea{
	font-family:'open-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.subTparent,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6{
	font-family:'Noto Sans Japanese', 'open-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight:700;
	line-height:1.1;
}

hr{
	margin:32px auto; padding:0;
}

/*================================================
 * Selector
================================================*/
body{
	font-size:14px;
	line-height:1.5;
}
footer{
	border-top:1px #000 solid;
	margin:0; padding:32px 0;
}

ul{
	margin:0;
	padding:0;
	list-style:none;
}
li{
	list-style:none;
}
/*================================================
 * Title
================================================*/
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span{
/*	display:block;*/
}
#page h1,
#page .h1{
 	margin:64px 0;
	font-size:28px;
}
#page h2,
#page .h2{
 	margin:32px 0;
	font-size:24px;
}
#page h3,
#page .h3{
 	margin:32px 0;
 	font-size:20px;
}
#page h4,
#page .h4{
 	margin:16px 0;
 	font-size:18px;
}
#page h5,
#page .h5{
	font-size:16px;
 	margin:16px 0;
}
#page h6,
#page .h6{
 	margin:16px 0;
	font-size:100%;
}
/*================================================
 * link
================================================*/
a{
	text-decoration:underline;
	opacity:1;
	color:#4472B9;
}
a:hover{
	opacity:0.5;
	-moz-transition:all ease-in-out 0.1s;
	-webkit-transition:all ease-in-out 0.1s;
	-o-transition:all ease-in-out 0.1s;
	transition:all ease-in-out 0.1s;
}
a.sortheader{
	color:#222;
	text-decoration:none;
}

/*================================================
 * Class
================================================*/
/*
.cf:before,
.cf:after{
    content:" "; 
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    *zoom:1;
}
*/

.cf:after{
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0;	
	clear: both; 
	visibility:hidden;
}
.cf{display: inline-block;} 
/* Hides from IE Mac \*/
.cf{display:block;}
/* End Hack */ 

.section{
	margin:64px auto; padding:0;
}
/*===== Position */
.left	{ text-align:left; }
.right	{ text-align:right; }
.center	{ text-align:center!important; margin-left:auto!important;; margin-right:auto!important;; }
.cleft	{ float:left; margin-bottom:32px; }
.cright	{ float:right; margin-bottom:32px; }
.nowrap	{ white-space:nowrap; }

/* 後で消す */
.middle { vertical-align:middle; }



.icon_banner { margin-left:2px; margin-right:2px; vertical-align:middle; }
.img_left	{ float:left; margin:0 20px 32px 0; padding:0; background:#fff; }
.img_right	{ float:right; margin:0 0 32px 20px; padding:0; background:#fff; }

.img_left p,
.img_right p{
	margin-top:0!important;
}
.mtop0{
	margin-top:0!important;
}
.mbtm0{
	margin-bottom:0!important;
}

/*===== List */
dl.dlist,
ol.olist,
ul.ulist{
	margin:32px auto; padding:0;
}
ul.olist ol,
ol.olist ul,
ol.olist ol,
ul.ulist ul{
	margin:0 auto; padding:0;
}
dl.dlist dt{
	margin:32px 0; padding:0;
	font-weight:bold;
}
dl.dlist dd {
	margin:32px 0 32px 2rem; padding:0;
}
ul.ulist li{
	list-style-position:outside;
	list-style:disc;
	margin-left:2rem;
	margin-top:32px;
	margin-bottom:32px;
}
ol.olist ul.ulist li{
	list-style:disc;
}
ul.ulist ol.olist li{
	list-style:decimal;
}
ol.olist ul.ulist li li,
ul.ulist li li{
	list-style:circle;
}
ol.olist li{
	list-style-position:outside;
	list-style:decimal;
	margin-left:2rem;
	margin-top:32px;
	margin-bottom:32px;
}
dl.dlist.compact dt,
dl.dlist.compact dd,
ul.ulist.compact li,
ol.olist.compact li{
	margin-top:8px;
	margin-bottom:8px;
}
.tbl pre,
.tbl table p{
	margin-top:8px!important;
	margin-bottom:0!important;
}
.compact .thumbnail,
.compact .thumbnail_l,
.compact .thumbnail_r,
dl.dlist.compact p,
dl.dlist.compact ul,
ul.ulist.compact pre,
ol.olist.compact pre,
ul.ulist.compact p,
ol.olist.compact p{
	margin-top:8px!important;
	margin-bottom:8px!important;
}


.center .thumbnail{
	text-align:center;
}
.center .thumbnail img{
	margin-left:auto;
	margin-right:auto;
}
/*===== List - Step */
ol.step{
    margin:40px auto; padding:0;
    list-style-type:none;
}
ol.step > li{
	list-style-position:outside;
    counter-increment:step-counter;
    padding-left:2.5rem;
    margin-bottom:40px;
}
ol.step > li:before{
    content:counter(step-counter);
    background:#222;
    color:#fff;
    font-weight:bold;
    padding:.1em .5em;
    margin-left:-2.5rem;
    text-align:center;
    display:inline-block;
    float:left;
}
/*===== iframe video for vimeo, youtube */
.iframe-video{
	margin:32px auto; padding:0;
}
.iframe-video iframe{
	max-width:100%;
	width:560px;
	height:315px;
	display:block;
	overflow:hidden;
}
@media (max-width:991px){
	body{
	}
	.iframe-video iframe{
		width:100%!important;
	}
}

/*===== Last Updated */
.lastupd{
	text-align:right;
}
.lastupd:before{
	content:"Last Updated on:";
}

/*===== Button */
input[type="file"]{
	background:#fff;
	padding:.5rem 1em;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn{
	color:#fff;
	display:inline-block;
	text-align:center;
	text-decoration:none;
	background:#4472B9;
	padding:7px 20px;
	outline:none;
	border:0;
}
.btn.mr{
	margin-right:10px;
}
.btn::before,
.btn::after{
	position:absolute;
	z-index:-1;
	display:block;
	content:'';
}
.btn,
.btn::before,
.btn::after{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition:all .3s;
	transition:all .3s;
}


/*===== Box - info, caution */
.ok{
	margin:32px auto; padding:20px 32px;
	border:1px solid #c1ffc1;
	background:#eeffee url(/content/img/skin/bg_ok.gif) no-repeat right bottom;
}
.ng{
	margin:32px auto; padding:20px 32px;
	border:1px solid #ddd;
	background:#f7f7f7 url(/content/img/skin/bg_ng.gif) no-repeat right bottom;
}
.pre{
	white-space:pre;
	font-family:monospace;
}



div.info,
p.info{
	margin:32px auto; padding:0 32px;
	border:1px solid #eee;
	background:#f7f7f7 url(/content/img/skin/bg_info.gif) no-repeat 99% bottom;
}
div.caution,
p.caution{
	margin:32px auto; padding:0 32px;
	border:1px solid #ffec67;
	background:#ffffcc url(/content/img/skin/bg_cau.gif) no-repeat 99% bottom;
}
p.caution,
p.info{
	padding-top:32px;
	padding-bottom:32px;
}

div.caution dl{
	margin:0; padding:32px 0;
}
div.caution dt{
	margin:0; padding:0;
	font-weight:bold;
}
div.caution dd{
	margin:32px 0 0 0; padding:0;
}
div#wrapper.caution,
div#container.caution{
	background:#fff;
	border:0;
}
/*===== Program */
span.arg{
	font-style:italic;
}
span.function,
span.methodname{
	padding:0 2px;
	background-color:transparent;
	font-weight:bold;
}
span.param{
	padding:0 2px;
	background-color:transparent;
	font-weight:bold;
	color:#5b95eb;
}
span.dfn{
	padding:0 2px;
	font-style:italic;
}
span.bool{
/*	padding:0 2px;*/
	text-transform:lowercase;
	font-style:italic;
}
.fs{
	font-size:.8rem;
}
.em{
	font-weight:bold;
}
.normal{
	font-weight:normal;
}
/*===== Grammer */
.koubun	{
	margin:32px 0; padding:20px;
	width:auto;
	border:1px dotted #ccc;
	background-color:#f7f7f7;
	overflow:auto;
}
.koubun *{
	font-size:100%;
}
.koubun p{
	margin-top:0;
}
.koubun.css3{
	background-image:url(/content/img/skin/css3.jpg);
	background-repeat:no-repeat;
	background-position:0 0;
}
.koubun.vendorprefix{
	background-image:url(/content/img/skin/vendorprefix.gif);
	background-repeat:no-repeat;
	background-position:top right;
}
.koubun.webkit{
	background-image:url(/content/img/skin/webkit.gif);
	background-repeat:no-repeat;
	background-position:top right;
}
.koubun.mozilla{
	background-image:url(/content/img/skin/mozilla.gif);
	background-repeat:no-repeat;
	background-position:top right;
}


/* 引用 */
blockquote.quote{
	margin:20px auto; padding:10px 20px;
	border-left:5px solid #eee;
	overflow:hidden;
}
#page-body blockquote.quote p{
	margin:10px auto; padding:0;
}

blockquote.quote footer,
blockquote.quote p.cite{
	display:block;
	font-size:80%;
	line-height:1.42857143;
	color:#777;
}
blockquote.quote footer:before,
blockquote.quote p.cite:before{
	content:'\2014 \00A0';
}

/*================================================
 * Layout
================================================*/
/*===== 全体枠 */
#wrapper{
	overflow:hidden;
	margin:0 auto; padding:50px 0 0 0;
	position:relative;
}
/*===== 記事幅 */
#container{
	margin:0 auto;
	padding:0 40px;
}
/*===== 左メニュー */
#sidebar{
	padding-top:51px;
}
/*===== ページの先頭へ */
#page-top{
	position:fixed;
	bottom:0; right:0;
	width:50px; height:50px;
	display:block;
	background:#222 url(/common/images/icon/up.png) no-repeat top left;
	background-size:100%;
	border-bottom:0;
}
/*================================================
 * sidebar
================================================*/
#sidebar{
	position:fixed;
	left:0; top:0;
	width:50%; height:100%;
	overflow:hidden;
	cursor:default;
	color:#c8c8c8;
	background:#222;

	overflow-x:hidden;
	overflow-y:auto;

	-moz-transition:width ease-in-out 0.28s, background linear 0.1s;
	-webkit-transition:width ease-in-out 0.28s, background linear 0.1s;
	-o-transition:width ease-in-out 0.28s, background linear 0.1s;
	transition:width ease-in-out 0.28s, background linear 0.1s;

	-ms-transform:translate(0px, 0);
	-moz-transform:translate(0px, 0);
	-webkit-transform:translate3d(0px, 0, 0);
	transform:translate(0px, 0);

	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;

	-webkit-font-smoothing:subpixel-antialiased;
}
/*===== site logo */
#site-logo{
	position:relative;
	width:auto; height:70px;
	margin:10px 0; padding:0;
	background-color:transparent;
	background-image:url(/common/images/icon/icon.png);
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:auto 100%;
}
	#site-logo a{
		display:inline-block;
		padding-left:70px;
		height:70px;
		line-height:70px;
		font-size:100%;
		font-weight:bold;
		color:#fff;

		-moz-transition:right ease-in-out 0.28s;
		-webkit-transition:right ease-in-out 0.28s;
		-o-transition:right ease-in-out 0.28s;
		transition:right ease-in-out 0.28s;
	}
	#site-logo a span{
		display:block;
	}

#sidebar h3{
	margin:20px 10px;
	opacity:1;
	-moz-transition:opacity ease-in-out 0.28s;
	-webkit-transition:opacity ease-in-out 0.28s;
	-o-transition:opacity ease-in-out 0.28s;
	transition:opacity ease-in-out 0.28s;
}
#sidebar ul{
	margin:0; padding:0;
}
#sidebar ul li a{
	display:block;
	position:relative;
	color:inherit;
	height:70px;
	overflow:hidden;
	line-height:70px;
	padding-left:75px;
	border-top:1px #2d2d2d solid;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
#sidebar li a.selected{
	color:#e3bc28;
}
#sidebar li:last-child a{
	border-bottom:1px #2d2d2d solid;
}
#sidebar li span{
	opacity:1;
	-moz-transition:opacity ease-in-out 0.28s;
	-webkit-transition:opacity ease-in-out 0.28s;
	-o-transition:opacity ease-in-out 0.28s;
	transition:opacity ease-in-out 0.28s;
}
#sidebar .icon{
	display:block;
	position:absolute;
	top:10px; left:10px;
	width:50px; height:50px;
	overflow:hidden;
	opacity:0.4;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100%;
}
#sidebar li a.selected .icon{ opacity:1.0; }
#sidebar li a:hover{
	background:#111;
}

#sidebar .icon.php{ background-image:url(/common/images/icon/icon_php.png); }
#sidebar .icon.js{ background-image:url(/common/images/icon/icon_js.png); }
#sidebar .icon.ajax{ background-image:url(/common/images/icon/icon_ajax.png); }
#sidebar .icon.html5{ background-image:url(/common/images/icon/icon_html5.png); }
#sidebar .icon.xhtml{ background-image:url(/common/images/icon/icon_xhtml.png); }
#sidebar .icon.css{ background-image:url(/common/images/icon/icon_css.png); }

#sidebar .icon.mobile{ background-image:url(/common/images/icon/icon_mobile.png); }
#sidebar .icon.strm{ background-image:url(/common/images/icon/icon_strm.png); }
#sidebar .icon.mysql{ background-image:url(/common/images/icon/icon_mysql.png); }
#sidebar .icon.topic{ background-image:url(/common/images/icon/icon_topic.png); }
#sidebar .icon.mail{ background-image:url(/common/images/icon/icon_email.png); }

/*================================================
 * nav-closed
================================================*/
.nav-closed #site-logo a span{
	display:none;
}

.nav-closed #sidenavi{
	display:none;
}

.nav-closed #sidebar{
	width:75px;
}
.nav-closed #sidebar li span{
  opacity:0;
}
.nav-closed #sidebar ul ul{
	display:none;
}
.nav-closed #sidebar #site-logo a{
	right:6px;
}
.nav-closed #sidebar #site-logo .logotype{
	opacity:0;
}
.nav-closed #sidebar.scrollbar{
	width:85px;
}
/*================================================
 * onepage
================================================*/
.onepage .current a{
	background:#666;
	color:#ededed;
}
/*================================================
 * topbar
================================================*/
#topbar{
	z-index:30;
	position:fixed;
	left:0; top:0;
	margin:0; padding:0;
	width:100%; height:50px;
	background:#fff;
	border-bottom:1px solid #eee;
	line-height:50px;
}
#topbar #menu{
	position:absolute;
	left:0; top:0;
	z-index:5;
	height:50px;
}
	#topbar #btn-menu{
		display:inline-block;
		height:50px;
		border:none;
		color:inherit;
		padding:0 15px 0 35px;
		border-right:1px #eee solid;
		text-decoration:none;
	}
	#topbar #btn-menu .icon{
		display:block;
		position:absolute;
		top:0; left:5px;
		width:30px; height:50px;
		background:url(/common/images/icon/menu.png) no-repeat 0 center;
		background-size:100%;
	}
	#topbar #btn-menu .label{
		padding-left:5px;
	}
#topbar #site-name{
	height:50px;
	margin:0 70px; padding:0;
	position:relative;
	text-align:center;
}
#topbar #site-name h1{
	height:100%;
	margin:0; padding:0;
}
#topbar #site-name h1 a{
	height:100%;
	display:inline-block;
	text-decoration:none;
	line-height:50px;
	color:#222;
}
#topbar #sitesearch{
	position:absolute;
	top:0;right:0;
	width:50px; height:49px;
	overflow:hidden;
	cursor:pointer;
	transition:width 0.3s, border 0.3s, margin 0.3s;
	z-index:40;
}
#topbar #sitesearch-inner{
	position:relative;
	width:100%; height:100%;
}
#topbar #btn_sitesearch{
	opacity:1;
	position:absolute;
	top:9px; right:9px;
	width:32px; height:32px;
/*	transition:width 0.3s, border 0.3s, margin 0.3s;*/
	background:url(/common/images/icon/search.png) no-repeat top left;
	background-size:auto 100%;
	display:block;
}
#topbar #sitesearch-frm{
	display:none;
	background:#fff;
	padding:0 10px;
}
#topbar #sitesearch.open{
	transition:width 0.3s, border 0.3s, margin 0.3s;
}
#topbar #sitesearch.open #sitesearch-frm{
	display:block;
}
#topbar #sitesearch.open #btn_sitesearch{
	opacity:0;
	transition:opacity 0.3s;
}

/* over-write */
.cse form.gsc-search-box,
form.gsc-search-box{
	padding:0!important;
	margin:0!important;
}

/*================================================
 * content
================================================*/
#container{
}
#content{
	max-width:980px;
	margin:0 auto; padding:0;
 	position:relative;
 	
 	
 	-ms-transform:translate(50%, 0);
	-moz-transform:translate(50%, 0);
	-webkit-transform:translate3d(50%, 0, 0);
	transform:translate(50%, 0);

	-ms-transition:-ms-transform 0.28s ease-in-out;
	-moz-transition:-moz-transform 0.28s ease-in-out;
	-webkit-transition:-webkit-transform 0.28s ease-in-out;
	transition:transform 0.28s ease-in-out;
}
.nav-closed #content{
	-ms-transform:translate(0px, 0);
	-moz-transform:translate(0px, 0);
	-webkit-transform:translate3d(0px, 0, 0);
	transform:translate(0px, 0);
}

/*================================================
 * page
================================================*/
#page{
	position:relative;
}

/*================================================
 * topicpath
================================================*/
#topicpath{
	margin:32px auto 32px auto;
}
#breadcrumbs a{
	display:inline-block;
	margin:0; padding:0;
}
#breadcrumbs a:after{
	content:" › ";
	display:inline-block;
	margin:0 10px;
}
/*================================================
 * sitemap
================================================*/
#sitemap{

}
#sitemap_t{
	margin:32px auto; padding:0;
}
#sitemap_t ul{
	margin:20px 0 10px 0;
} 
#sitemap_t .subTparent{
	margin:0;
}
#sitemap_t div.h2{
	margin:0;
	margin-top:32px;
}
#sitemap_t .subTparent{
	margin-top:32px;
}
#sitemap_t li li:before,
#sitemap_t div.h2:before,
#sitemap_t .subTparent:before{
	width:28px; height:28px;
	content:" ";
	float:left;
	margin-right:10px;
}
#sitemap_t div.h2:before{
	background:#fff url(/common/images/icon/folder.png) no-repeat 0 0;
	background-size:100%;
}
#sitemap_t li li:before,
#sitemap_t .subTparent:before{
	background:#fff url(/common/images/icon/file.png) no-repeat 0 0;
	background-size:100%;
}

#sitemap_t li ul{
	margin-left:38px;

}
#sitemap_t li li{
	padding:5px 0;
}
#sitemap_t li li a{
/*font-size:20px;*/
}
#sitemap_dummy a,
#sitemap_p a{
/*font-size:20px;*/
}
/*================================================
 * aside
================================================*/
aside{
	overflow-x:hidden;
	overflow-y:auto;
	margin:0; padding:0;
	background:#fff;
	display:none;
}
aside iframe{
	display:block!important;
	margin-left:auto!important;
	margin-right:auto!important;
}
#aside-inner{
	margin:0;
}
aside .section{
	margin:0 auto; padding:0;
	overflow:hidden;
}
aside .inner{
	margin:0 auto; padding:0;
	text-align:center;
}
.bg_white{
	background:#fff;
}
aside h2{
	margin:32px auto;
	border-top:3px solid #fff;
	border-bottom:3px solid #fff;
	padding:.8em 0;
	background:#ccc;
	text-align:left;
}
aside h2:before{
	content:"♥";
	padding-left:15px;
	padding-right:10px;
	color:#ff6699;
}
#share-buttons ul{
	display:table;
	width:306px;
	margin:0 auto; padding:0;
}
#share-buttons li{
	width:33.333%;
	text-align:center;
	vertical-align:top;
	display:table-cell;
}

/* one */
.one aside{
	position:relative;
	top:0!important; right:0!important;
	width:100%; height:auto!important;
	margin:0 auto 64px auto; padding:0;
	background:#fff;
	display:block;
}
.one aside h2{
	width:100%!important;
}
.one aside .inner{
	width:100%!important;
}
.one aside #plugin_google	iframe,
.one aside #plugin_twitter	iframe,
.one aside #plugin_facebook	iframe{
	max-width:100%;
}
.one #sitemap_dummy{
	display:none!important;
}
/* two */
.two aside{
    margin:0 30px 0 0; padding:0;
	display:block;
	width:340px;
	min-height:340px;
	position:absolute;
    top:0; right:-400px;
}
.two #sitemap_p.fix{
	display:block;
}
.t.two aside{
	width:340px;
 	position:absolute;
    top:0; right:-400px;
	min-height:340px;
}
.two aside h2{
	margin-bottom:0;
}
.two #share-buttons h2{
	margin-bottom:32px;
}
aside p{
	margin:16px auto;
}

/*================================================
 * aside  for HOME
================================================*/
/*
#fbtwtabs{
	margin:0 auto -1px auto; padding:0;
	z-index:11;
}
#fbtwtabs a{
	display:block;
	margin:0 2% -1px 0;
	padding:0;
	font-weight:bold;
	border:1px solid #ccc;
	border-bottom:0;
	line-height:2em;
	float:left;
	width:30%; text-align:center;
	background:#eee;
}
#fbtwtabs a.cur{
	color:#666;
	background:#fff;
}
#frm_facebook_activity,
#frm_twitter_timeline{
	display:none;
}

#fbtwfrms{
	position:absolute;
	width:336px; height:602px;
	margin:0 auto;
}
*/
/*================================================
 * aside > sitemap_p
================================================*/
#sitemap_p{
	margin:32px 0;
	background:#eee;
}
#sitemap_dummy li span,
#sitemap_p li span{
	padding-left:10px;
	font-size:.8rem;
	color:#666;
}
#sitemap_p li span.phpver{
	padding-left:0;
}
#sitemap_dummy li span{
	display:block;
	padding-left:0;
}
#sitemap_dummy{
	width:340px; height:auto;
	position:relative;
	top:0;
	display:none;
    margin:0 30px 0 0; padding:0;
}
#sitemap_dummy ol{
	margin:0; padding:20px;
}
#sitemap_p ol{
	margin:0; padding:1em 0;
}
#sitemap_dummy li,
#sitemap_p li{
	list-style-type:decimal;
	margin:16px 32px 16px 3em;
	padding:0;
}
#sitemap_dummy.fix{
	display:block;
	position:fixed;
	position:absolute;
	/*right:-380px;*/
	right:-32px;
	top:0;
}
#sitemap_dummy.fix .current{
	background:yellow;
}

/*================================================
 * page-header
================================================*/
article{
	background:#fff;
	position:relative;
}
/*================================================
 * page-header
================================================*/
#page-header{
	border-top:5px solid #666;
	border-bottom:5px solid #666;
	padding:0;
}
#page-header h1{
	margin:0; padding:20px 0 20px 0;
	line-height:1.2;
}
#page-header h1 span.h{
	font-size:1rem;
	color:#666;
	display:block;
	margin:0 0 5px 0; padding:0;
}
/*================================================
 * page-body
================================================*/
#page-body{
}
#page-body h1,
#page-body h2,
#page-body h3,
#page-body h4,
#page-body h5,
#page-body h6{
	margin:64px auto 32px auto;
	line-height:1.2;
}

#page-body .h2,
#page-body h2{
	padding-top:32px;
	border-bottom:solid 3px #666;
	padding-bottom:10px;
}

#page-body .h3,
#page-body h3{
	border-bottom:solid 1px #666;
	padding-bottom:10px;
}
#page-body h2 span{
  font-weight:normal;
  font-size:1rem;
  padding-left:5px;
}

#page-body .h5,
#page-body h5{
}

#page-body .h6,
#page-body h6{
	margin-bottom:8px;
}

#page-body .blu{
	background:#eee;
	margin:32px auto; padding:5px;
}
p{
	margin:32px auto;
}
#page-body img.border2{
	border:1px solid #ccc;
	padding:10px;
	background:#fff;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
}
#page-body img.border{
	padding:10px;
}

/* sp */
#page-body p.shot img{
	max-width:100%;
	height:auto;
}


#google_translate_element{
	margin:20px auto; padding:0;
	text-align:center;
}


.msp{
	padding:10px 15px;
	border:1px dotted #ccc;
}
.blu{
}
.brw,
.license,
.useimg,
.uselib,
.usefile{
	padding-left:80px;
	background-repeat:no-repeat;
	background-position:0 .25rem;
	margin:5px 0;
}
.brw{
	background-image:url(/content/img/skin/str_brw.gif);
}
.license{
	background-image:url(/content/img/skin/str_license.gif);
}
.uselib{
	background-image:url(/content/img/skin/str_uselib.gif);
}
.usefile{
	background-image:url(/content/img/skin/str_usefile.gif);
}
.useimg{
	background-image:url(/content/img/skin/str_useimg.gif);
}

.relatedlink,
.reference{
	margin:32px auto; padding:20px;
	border:1px dotted #ccc;
}
.relatedlink ul,
.reference ul{
	margin-top:0;
	margin-bottom:0;
}
.relatedlink:before{
	content:"関連リンク:　";
}
.reference:before{
	content:"参照:　";
}

#page-body em{
	font-style:normal;
    padding:.1em 0.25em;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAJCAYAAADzRkbkAAAAEElEQVQIW2P8/TvkDCORBAB3fRvQcHDghQAAAABJRU5ErkJggg==);
    background-position:center bottom;
    background-repeat:repeat-x;
}
#page-body strong,
#page-body b{
	font-weight:bold;
}

#page-body kbd{
	margin:0 5px; padding:.1em .25em;
	border-width:1px 2px 2px 1px;
	border-style:solid;
	border-color:#cfcfcf #999 #999 #cfcfcf;
	text-align:center;
	background-color:#eee;
	font-weight:bold;
	font-family:sans-serif;
}

/*
#page-body kbd:before{
	content:" [";
}
#page-body kbd:after{
	content:"] ";
}
*/

/*
var{
	font-size:.9em;
	font-weight:normal;
}
*/
.green{
	color:#4CA454;/*#5FCF80;*/
}
.red{
	color:#ff6699;
}

.sourcecode{ /* filenameのみ*/
	margin:0 auto; padding:0;
	width:100%;
}
pre,code,var{
	font-family:monospace;
}
pre{
	margin:0 0 32px 0; padding:20px;
	background:#eee;
	overflow:auto;
}

ol.olist.compact .sourcecode pre,
ul.ulist.compact .sourcecode pre,
.sourcecode pre{
	margin-top:0!important;
	margin-bottom:0!important;
}

.sourcecode_wrapper{
	margin:32px auto; padding:0;
}
.sourcecode_wrapper .sourcecode{	/* filename + btn */
	margin:0 auto; padding:0;
}

code{
	margin:0;
	padding:.1em .25em;
	background:#eee;
}
span.pretitle{
	margin:0 10px 0 0; padding:0 16px;
	height:40px;
	line-height:40px;
	font-weight:bold;
	display:inline-block;
	background:#eee;
}

/* Output */
.output{
	margin:32px auto; padding:20px;
	border:1px solid #ccc;
	background:#fff url(/content/img/skin/part_output.gif) no-repeat right top;
	overflow:hidden;
}
.sourcecode_wrapper .output{
	margin-bottom:0;
}
.output p{
	margin:1em 0;
}
.output em{
	font-style:italic;
	background-color:transparent;
}
.output button,
.output input[type="button"],
/*.output input[type="file"],*/
.output input[type="reset"],
.output input[type="submit"]{
	padding:7px 10px;
	background:#999;
}


/*================================================
 * pagenation
================================================*/
#pagenation{
	margin:64px auto 32px auto; padding:20px;
	border-top:1px dashed #ccc;
	border-bottom:1px dashed #ccc;
}
#pagenation em{
	font-style:normal;
	background:transparent;
}
#pagenation em:before{
	content:"〔";
}
#pagenation em:after{
	content:"〕";
}
#pagenation .prev{
	text-align:left;
	margin:10px 0;
}
#pagenation .next{
	margin:10px 0;
	text-align:right;
}
#pagenation .prev a:before{
	content:"«";
	float:left;
	padding-right:10px;
}
#pagenation .next a:after{
	content:"»";
	float:right;
	text-align:left;
	padding-left:10px;
}

/*================================================
 * addthis-shareing-toolbox
================================================*/
.addthis-toolbox{
	text-align:right;
	background:#fff;
/*	padding:15px 10px 8px 10px;*/
	vertical-align:middle;
	margin:32px auto;
	min-height:32px;
}
#addthis-toolbox-top{
}
#addthis-toolbox-home{
}
/*================================================
 * mypoll
================================================*/
#mypoll{
	margin:64px auto 32px auto;
	padding:0;
	border:1px solid #ccc;
}
#mypoll dl{
	margin:0; padding:0;
/*	background:transparent url(/content/img/skin/bg_anq.gif) no-repeat 99% 90%;*/
}
#mypoll dt{
	margin:20px 20px 0 20px;
	font-weight:bold;
}
#mypoll dd{
	margin:0; padding:0;
}
#mypoll label{
	padding-right:1em;
}
.poll .clapping,
#mypoll .clapping{
	margin-left:10px;
}
#mypoll p{
	margin:0; padding:10px 20px 0 20px;
}
#mypoll p .btn{
	margin-right:10px;
}
#mypoll p.vote{
	padding:10px 20px 20px 20px;
}
#mypoll p.patipati{
	padding:20px 20px 20px 20px;
	border-top:1px dashed #ccc;
}


/*================================================
 * page-footer
================================================*/
#page-footer{
	clear:both;
	width:100%;
	text-align:center;

	margin:64px auto; padding:20px 0;
	color:#666;
}

#page-footer span{
	margin:0 0.5em;
}
#page-footer p{
	padding:.5rem 0; margin:0;
}
#page-footer .link{
}
#page-footer .social{
}
#page-footer .copyright{
}

/*================================================
 * page - home
================================================*/
#site-desc{
	margin:32px auto 32px auto;
}

#pickup h2,
#hatebu h2,
#rssfeed h2{
	margin:0 0 10px 0;
}

/*===== rssfeed */
#rssfeed.section{
	margin-top:0;
}
#mynav{
	background:#eee;
	margin-bottom:20px;
	padding:10px;
}
#mynext,
#myprev{
}
#mynav a{
	padding:0 10px;

}
#mynav a.highlight{
	text-decoration:none;
	font-weight:bold;
}

#rssfeed_body{
	margin:0 auto 32px auto;
	border:1px solid #ccc;
	padding:20px;
}
#rssfeed_body .pubdate{
	margin-right:10px;
}
#rssfeed_body .title{
}
#rssfeed_body .desc{
	
}
#rssfeed_body ul{
	margin:0; padding:0;
	display:none;
}
#rssfeed_body li{
	margin:10px 0; padding:0;
}


/*===== hatebu */
#hatebu .hatena-bookmark-widget-body{
	margin:8px auto;
	border:1px solid #ccc;
	padding:20px;
}

#hatebu .hatena-bookmark-widget-body li{
	margin:10px 0;
}
/*===== pickup */
#pickup .guide{
	margin:32px auto 0 auto;
	border:1px solid #ccc;
	padding:20px;
}
#pickup .guide:first-child{
	margin-top:0;
}

#pickup ul.guide li h3{
	margin:0 0 10px 0; padding:0;
}
#pickup ul.guide li p{
	margin:0; padding:0;
}
span.ns{
	display:none;
}



.nosp{
}

.cleft.nosp{
	width:2em;
}



/*================================================
 * sidenavi
================================================*/
#sidenavi{
	margin:0; padding:10px;
	line-height:1;
	background:#fff;
}
#sidebar #sidenavi ul{
	margin:0 0 0 40px; padding:0;
}
#sidebar #sidenavi li span{
	color:#222;
}
#sidebar #sidenavi a{
	display:inline-block;
	margin:5px 0; padding:0;
	height:30px;
	line-height:30px;
	overflow:hidden;
	border:0;
}
#sidebar #sidenavi ul a.btn_sw{
	display:block;
	color:#222;
}
#sidebar #sidenavi ul li{
	display:block;
	margin:0;padding:0;
	overflow:hidden;
	height:auto;
}
#sidebar #sidenavi ul li.opt a{
	background:yellow;
}
#sidebar #sidenavi ul li ul{
	margin:0 0 0 40px; padding:0;
	background:#fff;
}
#sidebar #sidenavi ul li ul li a{
	height:1em;
	line-height:1em;
	color:#222;
	padding-left:20px;
	display:block;
}
#sidebar #sidenavi ul li ul li a:before{
    display:block;
    content:"";
    position:absolute;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:50%;
    left:0;
    width:8px; height:8px;
    margin-top:-4px;
    background:#222;
}
#sidebar #sidenavi ul li ul li a:after{
    display:block;
    content:"";
    position:absolute;
    top:50%; left:-5px;
    width:8px; height:8px;
    margin-top:-4px;
    background:#fff;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}


#sidenavi .subpaernt div{
	display:none;
}
#sidenavi .subpaernt.open div{
	display:block;
}

#sidenavi a:before,
#sidenavi a:after{
	content:" ";
	display:table;
}
#sidenavi a:after{
	clear:both;
}
#sidenavi a{
	*zoom:1;
}

.arrow{
    position:relative;
    margin:0; padding:0 0 0 40px;
    height:30px;
    text-align:center;
    overflow:hidden;
    display:block;
    float:left;
}
.arrow:before{
	content:"+";
	position:absolute;
	left:0px; top:0px;
	width:30px; height:30px;
	padding:0;
	color:#eee;
	background:#222;
	font-size:30px;
	line-height:30px;
	overflow:hidden;
	/*-moz-transition:0.25s all;
	-webkit-transition:0.25s all;*/
}
.arrow.minus:before{
    content:'-';
	font-size:40px;
	line-height:23px;
    /*-moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);*/
}


/*================================================
 * table
================================================*/


img.nomax{
	max-width:none!important;
}
.w1p{
	width:1%;
}
.w5p{
	width:5%;
}
.w30p{
	width:30%;
}
.w49p{
	width:49%;
}
.w100p{
	width:100%;
}




.tbl{
	overflow-y:hidden;
/*	border:1px solid #ddd;*/
	margin:32px auto; padding:0;
	min-height:0.1%;
	overflow-x:auto;
	background-color:transparent;
	width:auto;
	max-width:100%;
}

.tbl.w100p {
	border:1px solid #999;
}
.tbl.w100p table{
	width:100%;
}
.tbl th,
.tbl td{
	border:1px solid #ddd;
	padding:8px 10px;
}

.tbl caption{
	text-align:left;
	margin:0; padding:5px 10px;
	text-align:left;
	white-space:nowrap;
	background:#666;
	color:#fff;
}
.tbl caption:before{
	content:"《 ";
}
.tbl caption:after{
	content:" 》";
}



.tbl th{
	background:#eee;
	text-align:left;
}
.tbl thead th{
	background:#ddd;
	text-align:center;
}
.tbl thead td{
	background:#eee;
	text-align:center;
}
.tbl tbody th{
	background-color:#f7f7f7;
}
.caution .tbl table{
	background-color:#fff;
}
.tbl .t_on{
	background-color:#fff!important;
}
.tbl .t_off{
	background-color:#eff8ff!important;
}
.hi{
	background:#ffffcc;
}

/*================================================
 * thumbnail
================================================*/
/*
枠
http://new.phpjavascriptroom.com:8080/?t=topic&p=analize_tool
 */

.thumbnail,
.thumbnail_l,
.thumbnail_r{
	margin:0; padding:0;
	text-align:left;
	overflow:hidden;
}
.thumbnail,
.thumbnail_r,
.thumbnail_l{
	float:left;
	max-width:100%;
	margin:0; padding:0;
	margin-right:32px;
	margin-bottom:32px;
}
.thumbnail{
	float:none;
	margin-right:0;
/*	margin-bottom:0;*/
}

.thumbnail img,
.thumbnail_r img,
.thumbnail_l img{
	border:1px dotted #eee;
	overflow:hidden;
	background-color:#f7f7f7;
	width:auto;
	display:block;
}
#page-body p.shot span,
.thumbnail span.caption,
.thumbnail_l span.caption,
.thumbnail_r span.caption{
	text-align:left;
	display:block;
	margin:5px 0; padding:0;
	color:#666;
	font-size:.8rem;
}
#page-body p.shot span:before,
.thumbnail span.caption:before,
.thumbnail_l span.caption:before,
.thumbnail_r span.caption:before{
	content:"▲";
	font-size:.8rem;
	padding-right:.4rem;
}

.caption_view{
	white-space:nowrap;
	margin:10px 0 0 0;
	background:#4472B9;
	color:#fff;
	display:inline-block;
	text-align:center;
	text-decoration:none;
	padding:0 16px;
	line-height:40px;
	outline:none;
}
.caption_view::before,
.caption_view::after{
	position:absolute;
	z-index:-1;
	display:block;
	content:'';
}
.caption_view,
.caption_view::before,
.caption_view::after{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition:all .3s;
	transition:all .3s;
}


/*================================================
 * aboutlink
================================================*/
#mylink{
	margin:32px auto;
	
}
#mylink textarea,
#mylink input[type="text"]{
	width:100%!important;
	padding:10px;
}
#mylink dl{
	margin:0; padding:0;
}
#mylink dt{
	width:8em;
	float:left;
	clear:both;
	margin:0 0 32px 0;
	text-align:right;
}
#mylink dd{
	margin:0 0 32px 0;
	margin-left:9em;
}

/*================================================
 * mail
================================================*/
#container.caution #page-body,
#container.mail #page-body{
	margin-bottom:96px;
}
#frm-contact{
	margin:32px auto; padding:0;
}
#frm-contact span.hissu{
	font-size:1.5em;
	padding:0 5px;
}
#frm-contact .ex{
	color:#999;
	font-size:90%;
	margin:5px 0 0 0; padding:0;
}
#frm-contact .errmsg{
	color:#ff6699;
	padding:5px 0;
	display:none;
}
#frm-contact input[type="text"]:focus,
#frm-contact textarea:focus{
	background:#f7f7f7;
	color:#000;
}
#frm-contact .txt,
#frm-contact .tarea,
#frm-contact .noerr{
	background:#fff;
	border:1px solid #999;
	width:100%;
	padding:10px;
}
#frm-contact .err{
	background:#ffcccc;
	border:1px solid #ff9999;
}
#frm-contact dl{
}
#frm-contact dt{
	padding:5px;
	margin:0;
	background:#eee;
}
#frm-contact dd{
	margin:0 0 20px 0; padding:0;
}
#frm-contact dd p{
	margin:0; padding:10px 0;
}

/*================================================
 * nofile
================================================*/
#nofile{

}
/*================================================
 * exp
================================================*/
#example{
	margin:0 auto; padding:32px 0;
	text-align:center;
}
#example_wrapper{
	margin:0 auto; padding:10px 20px;
	text-align:left;
}
#example table caption{
	text-align:left;
}
.output button,
.output input[type="button"],
.output input[type="reset"],
.output input[type="submit"],
.output .btn,
#example button,
#example input[type="button"],
#example input[type="reset"],
#example input[type="submit"],
#example .btn{
	margin:5px 0;
}
#example p{
	margin:1rem 0;
}
#example .section{
	margin:1rem 0;
}
#example pre{
/*	margin:1rem 0;
	font-size:.8rem;
	line-height:1;
*/}

#example div.tbl table{
	border-collapse:collapse;
	border-spacing:0;
}

#example table.tbl {
	margin:32px 0;
	border-spacing:0;
	border-collapse:collapse;
}
.output .tbl caption:after,
.output .tbl caption:before,
#example table.tbl caption:after,
#example table.tbl caption:before {
	content:"";
}
#example table.tbl th{
	font-weight:bold;
}
#example table.tbl th,
#example table.tbl td{
	padding:8px 10px;
}


/*================================================
 * [plugins] Magnific Popup CSS
================================================*/
.image-link{
	overflow:hidden;
	text-decoration:none;
}
.image-link{
	cursor: pointer;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}



/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  filter: alpha(opacity=65);
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  filter: alpha(opacity=65);
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; }
 }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; }
 }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }

/*================================================
 * print
================================================*/
#print{
	padding:0;
	font-size:75%;
}
#print #wrapper{
	padding:0;
}
#print #content{
	-ms-transform:translate(0px, 0);
	-moz-transform:translate(0px, 0);
	-webkit-transform:translate3d(0px, 0, 0);
	transform:translate(0px, 0);
	max-width:100%;
}
#print .addthis-toolbox,
#print #mypoll,
#print #page-footer .valid,
#print #page-footer .link,
#print #page-footer .thanks,
#print #page-footer .social{
	display:none;
}
#print #page-footer{
	margin:0;
}
#print a{
	color:#222;
}

/*================================================
 * PR
================================================*/
.prbox{
	margin:64px auto; padding:32px 0;
	text-align:center;
	border-top:1px dashed #ccc;
	border-bottom:1px dashed #ccc;
}
.prbox p{
	margin:5px auto;
	text-align:center;
}
/*================================================
 * Ads
================================================*/
.gads{
	margin:0 auto; padding:0;
	text-align:center;
	background:#fff;
}
#gads_aside{
	margin-top:1px;
	width:336px; min-height:280px;
}
.adslot_1{
	margin:32px auto; padding:0;
}
.adslot_1 > ins{
	display:block;
	position:relative;
	left:-10px;
}
.adslot_1								{ width:320px; min-height:50px; }
@media (min-width:468px)	{ .adslot_1	{ width:468px; min-height:60px; } }
@media (min-width:868px)	{ .adslot_1	{ width:728px; min-height:90px; } }

#gads_header,
#gads_footer{
	margin:32px auto;
}

/*================================================
 * media
================================================*/
@media (min-width:1815px){
	#content{
		max-width:1080px;
	}
}

@media (min-width:1640px) and (max-width:1814px){
}
/*@media (min-width:1200px){*/
@media (min-width:1200px) and (max-width:1639px){
	/* デスクトップ大 */
	/* Large desktops and laptops */
	/* Large devices:Desktops (≥1200px) */
}
@media (min-width:992px) and (max-width:1199px){
	/* デスクトップ中、タブレット */
	/* Portrait tablets and medium desktops */
	/* Medium devices:Desktops (≥992px) */
}
@media (min-width:768px) and (max-width:991px){
/* デスクトップ小、タブレット */
	/* Portrait tablets and small desktops */
	/* Small devices:Tablets (≥768px) */
	#pagenation .prev,
	#pagenation .next{
		float:none;
		width:100%;
	}
}

@media (max-width:991px){
	.nosp{
		display:none;
	}
	.cright,
	.cleft{
		float:none;
	}
}


@media (max-width:767px){
	.thumbnail_r,
	.thumbnail,
	.thumbnail_l{
		float:none;
		margin-right:0;
	}
	/* スマホ */
	/* Extra small devices:Phones (<768px) */
	body{
		padding-left:0;
	}
	#sidebar{
		width:100%;
	}
	.nav-closed #sidebar{
		width:0;
	}
	#container{
		padding:0;
	}
	#content{
		-ms-transform:translate(50%, 0);
		-moz-transform:translate(50%, 0);
		-webkit-transform:translate3d(50%, 0, 0);
		transform:translate(50%, 0);
		-ms-transition:-ms-transform 0.28s ease-in-out;
		-moz-transition:-moz-transform 0.28s ease-in-out;
		-webkit-transition:-webkit-transform 0.28s ease-in-out;
		transition:transform 0.28s ease-in-out;
	}
	.nav-closed #content{
		-ms-transform:translate(0px, 0);
		-moz-transform:translate(0px, 0);
		-webkit-transform:translate3d(0px, 0, 0);
		transform:translate(0px, 0);
	}
	#page{
		padding:0 10px;
		margin-left:0;
	}
	aside .inner{
		padding:0 10px;
	}
	#pickup .cleft,
	#pickup .cright{
		float:none;
	}
	#pagenation .prev,
	#pagenation .next{
		float:none;
		width:100%;
	}
	#menu .label{
		display:none;
	}
	#topicpath{
		margin-top:16px;
		margin-bottom:32px;
	}
	#mypoll p label{
		display:block;
		margin:0; padding:5px 0;
	}
	#mypoll .foot li:before{
		content:"";
		padding:0;
	}
	#mypoll .foot li{
		display:block;
		padding:10px 0;
	}
	#mypoll .foot{
		margin:0; padding:0;
	}
	#mypoll .clapping{
		display:block;
		margin:10px 0 -10px 0;
	}
	#mylink dt{
		float:none;
		text-align:left;
		margin:0;
		width:auto;
	}
	#mylink dd{
		margin:16px 0 32px 0;
	}
}
@media (max-width:480px){
	/* Landscape phones and smaller */
	#topbar .btn{
		padding:0px 15px;
		/*background:blue;*/
		overflow:hidden;
	}
	#topbar .left .label{
		display:none;
	}
	#topbar #site-name{
		margin:0;
	}
	#topbar #sitesearch{
		transition:width 0.3s;
	}
	/*
	#topbar input::-webkit-input-placeholder{ color:transparent; }
	#topbar input::-moz-placeholder{ color:transparent; }
	#topbar input::-moz-placeholder{ color:transparent; }
	#topbar input:focus::-webkit-input-placeholder{ color:transparent; }
	#topbar input:focus:-moz-placeholder{ color:transparent; }
	#topbar input:focus::-moz-placeholder{ color:transparent; }
	*/
}


#patipati{
	margin:0 auto; padding:0;
	text-align:center;
	max-width:600px;
}
#patipati-inner{
	margin:0 auto; padding:0 20px;
}
#patipati h1{
 	margin:64px 0 32px 0;
	font-size:32px;
}
#patipati h1 a{
	line-height:85px;
	height:85px;
	font-size:24px;
	color:#666;
	text-decoration:none;
	display:inline-block;
}
#patipati h1 a span{
	background:url(/common/images/icon/icon.png) no-repeat 0 0;
	width:85px;
	height:85px;
	float:left;
	display:inline-block;
}
#patipati input[type='text']{
	width:100%;
	text-align:center;
	background:#fff;
}

#patipati-message{
	margin:32px auto; padding:16px;
	border:1px solid #ccc;
}
#patipat-note{
	margin:32px auto; padding:0;
}
#patipat-note span{
	display:block;
	color:#666;
	font-size:.8rem;
	margin:0 0 5px 0
}

#patipati-system{
	margin:64px auto; padding:0;
}
#patipat-form{
	margin:32px auto; padding:16px 32px;
	border:1px solid #ccc;
	background:#f7f7f7;
}

/*================================================
 * test
================================================*/
/*
body											{     background:purple;}
@media (min-width:1815px)						{body{background:lime;}}
@media (min-width:1640px) and (max-width:1814px){body{background:hotpink;}}
@media (min-width:1200px) and (max-width:1639px){body{background:pink;}}
@media (min-width:992px) and (max-width:1199px){body{background:yellow;}}
@media (min-width:768px) and (max-width:991px)	{body{background:orange;}}
@media (max-width:767px)						{body{background:red;}}
@media (max-width:480px)						{body{background:cyan;}}
*/

.sourcecode_wrapper{
/*	border:1px solid orange;*/
}
.sourcecode_wrapper .sourcecode{	/* filename + btn */
/*	border:1px solid yellow;*/
}
.sourcecode{ /* filenameのみ*/
/*	border:1px solid pink;}*/
}