@charset "utf-8";

a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{height:100%}
body{
	color:#555;
	background:#f5f5f5;
	background-attachment:fixed;
	height: 100%;
	letter-spacing:0.5px;
	font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a:link,a:active,a:visited { color:#000080; transition:color .2s; transition: background-color .2s; }
a:hover { color:red; }
.clr, .clearfix { clear:both; min-height:1px; }

/* ▼サンプルコード用 */
pre,code{ text-align:left; background:#000; color:#fff; padding:0px;  }

pre { overflow-x:scroll; padding:10px; font-size:14px;line-height:25px; margin-bottom:35px;  }
pre::-webkit-scrollbar{height:10px;}/*バーの太さ*/
pre::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
pre::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/

/*  SETTING COLUMNS  */
#wrapper{ width:100%; min-width:1260px; position:relative; overflow:hidden; }
header{
	width:100%;
	color: #fff;
	margin:0 auto;
	padding:20px 0px;
	text-align:center;
	border-top: 5px solid #0574BD;
    border-bottom: 1px solid #c1c1c1;
	-moz-transition: .3s;
	  -o-transition: .3s;
	  -webkit-transition:.3s;
	  transition: .3s;
}
header .logo{
	width: 400px;
    margin: 0 auto;
}
header .logo p{
	margin: 0;
}
header .logo p a{
	display: block;
}
header .logo p a img{
	width: 100%;
	height: auto;
}
/*	ナビメニュー： nav */
nav {
	width:100%;
	background:#568de0;
	margin:0 auto;
	display:block;
	vertical-align:top;
	color:#333;
	z-index:2;
	position:relative;
}
nav > ul{ width:1100px; padding:15px 0; margin:0 auto; display:table; font-size:0; }
nav > ul > li{
	margin:0px 0px;
	padding:0px 10px;
	transition: background-color .3s;
	list-style:none;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	font-size:0 !important;
	line-height:0;
	position:relative;
	border-left:1px dotted #fff;
}
nav > ul > li:last-child { border-right:1px dotted #fff; }
nav > ul > li > a{
	font-size:14px;
	line-height:20px;
	padding:0px 0px;
	display:block;
	color:#fff !important;
	text-decoration:none;
}
nav > ul > li > a:before{
	content:"";
	font-size:17px;
	color:#fff;
}

/* メイン ＋ サイド部分 */
.containar{
	width:1130px;
	margin:30px auto;
}
.containar::before,
.containar::after{
	content:"";
	clear: both;
	display: block;
}
/* メイン部分 */
.containar main{
	width:750px;
	float:left;
	margin-right:50px;
}
/* サイド部分 */
.containar aside{
	width:310px;
	float:left;
	background:#fff;
}
/* サイド部分・メニューボックス */
.containar aside .menubox{
	background:#fff;
}
.containar aside .menubox .menubox_label{
	background: #0574BD;
	color:#fff;
	padding:10px 20px;
	font-size:18px;
	font-weight:bold;
}
.containar aside .menubox ul{
	margin: 0px;
	list-style: none;
}
.containar aside .menubox ul li{
	margin:0px auto;
	border-bottom: 1px solid #ddd;
}
.containar aside .menubox ul li a{
	display: block;
	padding: 10px 20px;
	color: #555;
	font-size: 15px;
	line-height: 22px;
	font-weight: bold;
	text-decoration: none;
}
.containar aside .menubox ul li a:hover{
	background: rgb(252,164,142);
	background: -moz-linear-gradient(0deg, rgba(252,164,142,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(252,164,142,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	background: linear-gradient(0deg, rgba(252,164,142,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fca48e",endColorstr="#ffffff",GradientType=1);
}
.containar aside .menubox ul li a::before{
	content: "\f0da";
	font-family: FontAwesome;
	margin-right: 10px;
}
.containar aside .menubox ul li a:hover::before{
	color: #ff0000;
}
/*	ぱんくず：#pankuzu		*/
#pankuzu{
	padding:0px;
	color:#777; 
	margin:0px auto 30px;
}
#pankuzu ul{
	margin:0px auto;
	padding:0px 0px 10px;
	list-style:none;
	font-size:15px;
	font-weight:bold;
}
#pankuzu li{ display:inline-block; }
#pankuzu li a{ color:#777; }
#pankuzu li:after{ content:""; font-family:FontAwesome; margin:0px 3px; }
#pankuzu li:first-child::before{ content:""; padding-right: 0px; }
#pankuzu li::before{ content:">"; padding-right: 10px; }

/* 更新日 */
.update{
	display:block;
	text-align:right;
	vertical-align:top;
	font-weight:bold;
	font-size:14px;
	line-height:24px;
	padding:0px 0px 10px;
	margin:7px 0px !important;
}
.update::before{
	content:"\f017";
	color: #ff0000;
	font-family:FontAwesome;
	margin-right:10px;
}

/* メインコンテンツ部分 */
/* 画像寄せ */
.left  { text-align:left; }
.center{ text-align:center; }
.right { text-align:right; }

/*	強調タグ：span */
span.marker{ color:#ff0000; font-weight:normal; background:#ffff60; }
span.black{ color:#000; font-weight:bold; }
span.red{ color:#ff0000; font-weight:bold; }

/*	▼内部リンク .link▼	*/
.link{
	text-align:right;
	margin: 30px 0;
}
.link a{
	color: #007aca;
	text-decoration:none;
	font-size:20px;
	font-weight:bold;
	padding:5px;
}
.link a::after{
	content:"\f138";
	font-family:FontAwesome;
	padding-left:7px;
}
.link a:hover{
	color: #f7811d;
	text-decoration: underline;
}

/*	▼外部リンク / .outlink▼	*/
.outlink{ text-align:right; }
.outlink a{
	color:#000;
	padding:5px;
	text-decoration:none;
	font-size:20px;
	font-weight:bold;
}
.outlink a::after{
	content:"\f08e";
	font-family:FontAwesome;
	padding-left:7px;
}
.outlink a:hover{
	border-color:#f7811d;
	text-decoration:none;
}

/* メインコンテンツ */
section{
	margin: 0px auto 40px; 
}
/* メイン見出し */
main h1{
	vertical-align:top;
	text-align:left;
	font-size:25px;
	line-height:1.5;
	font-weight:bold;
	padding:0;
	margin:0px 0px 30px;
	position:relative;
	vertical-align:top;
}
section h2{
	color:#fff;
	background: #0574BD;
	font-size:22px;
	font-weight:bold;
	padding:15px;
	margin:20px -20px;
	margin-bottom:20px;
}
section h3{
	color :#36a6ef;
	border-bottom:3px solid #36a6ef;
	font-size:22px;
	font-weight:bold;
	padding:10px 20px;
	margin:20px -20px 50px;
}
section h4{
	color :#36a6ef;
	font-size:20px;
	font-weight:bold;
}
/* メイン画像 */
section img{
	margin:30px auto;
	display: block;
	max-width: 500px;
}
/* メインテキスト */
section p{
	font-size: 16px;
	line-height: 30px;
}

/* 口コミ枠 */
.review{
	margin:20px 10px 30px;
	display:block;
}
.review img{
	width:80px;
	height:auto;
	display: inline-block;
    vertical-align: middle;
}
.review .r_name{
	font-weight:bold;
	font-size:87%;
}
.review .r_comment{
	background:#fff;
	border:3px solid #000;
	border-radius:7px;
	margin-top:-30px;
	padding:25px;
	font-size:16px;
	line-height:25px;
	position:relative;
}

.review .r_comment p{
	margin:0;
}
.review .inyou{
	text-align:right;
	font-size:70%;
}

/* フッター・コピーライト */
.copyright{
	font-size:13px;
	text-align:center;
	padding:10px 0px 10px 0px;
	margin:0px;
	color:#fff;
	background:#333;
}

/* ▼関連記事：related */
.relatedbox{
	margin: 10px 0;
}
.relatedbox .related_title{
	background: #333;
	color: #fff;
	display: block;
	padding: 15px;
}
.related{
	margin:10px 0px ;
}
.related img{
	max-width:100%;
}
.related li{
	width:calc(25% - 15px);
	margin:5px;
	display:inline-block;
	font-size:13px;
	line-height:20px;
}
.related li a{
	color:#555;
	text-decoration:none;
}
.related li a:hover{
	opacity:0.75;
}
.related .pickup_title{
	font-size:16px;
	font-weight:bold;
	margin:10px 0;

}

/*	▼フッター全体：footer▼ */
footer { width:100%; color:#fff; position:relative; background:#333 ; margin-top:30px; }
footer a { color:#fff; }

footer > #return_box{ width:1050px; margin:0 auto; position:relative; }
footer > #return_box > a{
	font-weight:bold;
	font-size:15px;
	position:absolute;
	margin:auto;
	top:-20px;
	background:#568de0;
	color:#fff;
	padding:10px;
	text-decoration:none;
	text-align:center;
	border-radius:10px;
}

footer > #return_box > a:before,
footer > #return_box > a:after{ content:"\f139"; font-family:FontAwesome; padding:0px 7px; }
footer > #return_box > a:hover{ color:#ccc; }

/* ▼フッターメニュー：.footer_box▼ */
.footer_box { width:1000px; margin:0 auto; padding:20px 5px 10px; text-align:center; }

.footer_box > dl.sitemap{ margin:0px auto; text-align:center; }
.footer_box > ul{
	width:1000px;
	list-style-position:inside;
	border-spacing:10px;
	display:table;
	text-align:center;
}

.footer_box >  ul > li{
	color:#444;
	font-size:15px;
	line-height:17px;
	list-style-type:none;
	display:table-cell;
	border-left:1px solid #fff;
	text-align:center;
}
.footer_box > ul > li:last-child{ border-right:1px solid #fff; }

.footer_box > ul > li > a{
	color:#fff;
	text-decoration:none;
	line-height:17px;
	padding:0px 20px;
}

.footer_box > ul > li > a:hover{ text-decoration:underline; }

/*		▼まとめボックス / .mtm▼	*/
.mtm{
	width:550px;
	border:3px solid #000;
	margin:60px auto 30px;
	padding:10px;
	text-align:center;
	position:relative;
	background:#fff;
}
.mtm p{
	width:200px;
	line-height:1;
	color:#fff;
	font-weight:bold;
	line-height:25px;
	margin:auto !important;
	padding:6px;
	border-radius:5px 5px 0 0;
	text-align:center;
	position:absolute;
	bottom:100%;
	left:-3px;
	background:#000;
}
.mtm ul{ margin:10px 15px; }
.mtm li{
	text-align:left;
	list-style:none;
	color:#444;
	font-size:16px;
	line-height:25px;
	text-indent:-15px;
	font-weight:bold;
	padding:7px 7px 7px 15px;
}
.mtm li:before{
	content:"●";
	margin-right:10px;
}
/*	目次：.mkj	*/
.mkj{
	width:85%;
	background:#eee;
	border:#777 3px solid;
	margin:25px auto;
	position:relative;
}
.mkj p{
	color:#fff;
	background:#777;
	margin:0px;
	padding:8px 0;
	font-size:19px;
	line-height:1;
	font-weight:bold;
	text-align:center;
}

/* 目次の開閉ボタン */
.mkj span.mkjbtn{
	margin:0px 10px;
	font-size:12px;
	font-weight:normal;
	cursor:pointer;
}
span.mkjbtn:first-of-type,
.mkjOpen > span.mkjbtn:last-of-type{
	display:inline-block;
}
span.mkjbtn:last-of-type,
.mkjOpen > span.mkjbtn:first-of-type{
	display:none;
}
/* 目次の中 */
.mkj ol{
	margin:5px;
	list-style:none;
	list-style-position:inside;
	padding:15px;
}
.mkj li{
	font-size:95%;
	padding:7px 0;
	padding-right:16px;
	line-height:25px;
	text-indent:-14px;
	padding-left:18px;
}
.mkj li:last-child{
	border-bottom:0px;
}
.mkj li a:before {
	content:"\f0da";
	font-family:FontAwesome;
	padding-right:8px;
}
.mkj li a { 
	color:#666;
	font-weight:bold;
	text-decoration:none;
	display:block;
}
.mkj li a:hover { color:#ce5b04; }
.mkj li.sub { margin-left:20px; list-style-type:circle; }

/*	引用タグ > blockquote	*/
.textbox > blockquote{
	width:80%;
	padding:25px;
	font-size:14px;
	margin:15px auto;
	border:1px dotted #999;
	background:#ddd;
	position:relative;
}

.textbox >  blockquote .site{
	font-size:13px;
	color:#777;
	text-align:right;
}

.textbox >  blockquote:before{
	content: "\f10d";
	color:#a1a1a1;
	font-size:20px;
	font-family:FontAwesome;
	position:absolute;
	top:15px;
	left:15px;
}

.textbox >  blockquote:after{
	content: "\f10d";
	color:#a1a1a1;
	font-size:20px;
	font-family:FontAwesome;
	position:absolute;
	bottom:15px;
	right:15px;
}

/*	▼表タグ  /  table ▼ */
.textbox > table { margin:25px auto; border:1px solid #3866a0; }
.textbox > table > tbody > tr,
.textbox > table > tbody > tr > th,
.textbox > table > tbody > tr > td { border:1px solid #3866a0; padding:10px 12px; }
.textbox > table > tbody > tr > th {
	color:#fff; background:#79A1D4; font-weight:bold;
}

/*	▼段落タグ > dl,dt,dd ▼ */
.textbox > dl{ line-height:1.6em; margin:10px auto;}
.textbox > dl > dt{ color:#333; font-size:17px; font-weight:bold; padding:10px 0;}
.textbox > dl > dd{ padding:0px 0px 10px 30px; }
.textbox > dl > dd > table { margin:0 auto; width:100%; }


/*	枠線をつける場合は、  class="border" を入れる
	背景色をつける場合は、class="back" を入れる */
.border{ border:3px solid #79A1D4; padding:10px 20px; }
.bg{ background:#a4c6f1; padding:10px 20px; }

/*	 ▼リンクボタン > .linkbtn▼	*/
.linkbtn {
	text-align:center;
	margin:50px auto 100px;
	display:block;
	overflow:hidden;
}

.linkbtn a{
	width:400px;
	color:#fff;
	text-decoration:none;
	font-size:20px;
	line-height:18px;
	text-align:center;
	padding:20px 25px;
	margin:10px;
	border-radius:5px;
	position:relative;
	display:inline-block;
	background:#2d3861;
}

.linkbtn a:after{
	content:"\f0da";
	font-size:18px;
	line-height:19px;
	font-family:FontAwesome;
	color:#2d3861;
	background:#fff;
	border-radius:20px;
	position:absolute;
	margin:auto;
	display:inline-block;
	text-align:center;
	padding:0px;
	top:0px;
	bottom:0px;
	right:10px;
	width:17px;
	height:17px;
	text-shadow:none;
}


.linkbtn a:hover{
	opacity:0.6;
	color:#fff;
}

/*		口コミ：kkomi	*/
.kkomi{
	width:95%;
	word-break: break-all;
	list-style:none;
	margin:25px auto;
}

.kkomi > li{
	border:1px solid #fff;
	position:relative;
	margin:10px;
	padding:10px 25px;
	background:#ddd;
}

.kkomi > li > p > b{
	font-size:30px;
	color:#029979;
	line-height:35px;
	margin:0px 0 10px;
	display:block;
}

.kkomi > li > small {
	font-size:11px;
	line-height:17px;
	margin:0px -15px 0;
	padding:5px 15px;
	text-align:right;
	display:block;
	word-break:break-all;
}

/*	▼TOP・目次に戻るボタン▼	*/
#pageTop { z-index:1; margin:0; display:none; position: fixed; }
#pageTop { bottom: 40px;  right: 30px; }

#pageTop > a {
	display: block;
	padding: 10px;
    background:#000;
    text-decoration: none;
    color: #fff;
	width:50px;
	line-height: 52px;
    font-size:45px;
    padding-bottom:5px;
    text-align: center;
  	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	border-radius: 50%;
	position:relative;
	transition:.5s;
}
#pageTop > a > i.fa , #mkjTop a > i.fa {
	font-size:43px;
	display:block;
}

#pageTop a:hover, #mkjTop a:hover{
  	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}