@charset "utf-8";


@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@charset "UTF-8";
html{-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,address,ul,ol,li,dl,dt,dd,header,footer,hgroup,section,section,table,th,td,img,form,map,fieldset,body,ul,li{padding:0;margin:0;color:#333;font-weight:400;font-style:normal;border:none;-webkit-text-size-adjust:100%}table{border-collapse:collapse;margin:0;padding:0}:not(input):not(textarea):not(select),input[type=image],input[type=file],input[type=submit],input[type=button],input[type=reset]{-moz-user-select:none;-webkit-user-select:none;}html,body{margin:0;padding:0;}body{font-family:"メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Verdana,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;width:100%;color:#555;background:#fff;-webkit-text-size-adjust:none;-webkit-user-select:none;-webkit-overflow-scrolling:touch;background-image:url()}#wrapper{position:relative;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s;}
#contents { margin:0px; padding:0px; position:relative; background:#fff; z-index:1;}
.clr {clear:both;}
a:link,a:active,a:visited { color:#000080; transition:color .2s; transition: background-color .2s; }
a:hover { color:red; }

/* ▼サンプルコード用 */
pre,code{ text-align:left; background:#000; color:#fff; display:block; line-height:2;   }

pre { overflow-x:scroll; padding:10px; }
pre::-webkit-scrollbar{height:5px;}/*バーの太さ*/
pre::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
pre::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/

/* ▼noscript▼ */
.warning{padding:7px;margin:0;font-size:15px;font-weight:700;background:#eee;border:2px solid red;color:red}
#wrapper{
	z-index: 0;
}
/* ▼ header ▼ */
header{
	color: #fff;
    background: #fff;
    margin: 0 auto;
    padding: 5px;
    text-align: center;
	border-top: #0574BD 4px solid;
	border-bottom: #ccc 1px solid;
    -moz-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
	position:relative;
	display: block;
}
header p{
	text-align: center;
	margin: 0;
}
header .logo{
	width: 75%;
}
header .logo img{
	width: 100%;
	height: auto;
}
.containar h1{
	color: #555;
	font-size:22px;
	line-height:29px;
	font-weight: bold;
	margin:0px 0px;
	padding:10px;
	display:inline-block;
}
.containar .update{
	display: block;
	vertical-align: top;
	font-weight: bold;
	font-size: 13px;
	line-height: 17px;
	margin:7px;
}
.containar .update::before{
	content:"\f017";
	color: #ff0000;
	font-family:FontAwesome;
	margin-right:10px;
}

/* ▼サイドメニューボタン .simple-menu ▼ */
.slidebtn{
	position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    /* height: 0; */
    margin: auto;
    text-align: center;
    background: #fff;
    color: #555;
	border: 1px solid #0574bd;
	border-radius: 5px;
    font-size: 20px;
    line-height: 1;
    font-family: Verdana;
    display: block;
    padding: 7px;
    margin: 7px;
}
.slidebtn::before{
	content:"≡";
	color: #0574bd;
	font-size: 45px;
	line-height: 25px;
}
.slidebtn::after{
	content:"開く";
	font-size: 13px;
	line-height: 33px;
	display: block;
}
.menu_name { display:block; font-size:10px; line-height:12px; }

/* スライドメニュー */
.containar aside{
	position:fixed;
	width:75%;
	height:100%;
	right:-100%;
	bottom:0px;
	margin:auto;
	background:#fff;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	z-index:3;
	border-left:1px solid #ccc;
	transition: .5s;
}
/* サイド部分・メニューボックス */
.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: 25px;
	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;
}
/* スライドに必要なもの */
#close-btn{
	position:fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color:rgba(0, 0, 0, 0.8);
	z-index:2;
	display: none;
}
.fixed{ position:fixed; width:100%; }

/* ▼メインコンテンツ section ▼ */
section{
	margin: 0;
	padding: 0px 10px 10px;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 28px;
}
section img{
	display: block;
	margin: 0px auto;
	max-width: 80%;
	height: auto !important;
}
section h2{
	margin:10px -10px;
	font-size:20px;
	font-weight: bold;
	line-height:25px;
	padding:8px 15px;
	background: #0574BD;
	color:#fff;
	position: relative;
}
section h3{
	color :#36a6ef;
	border-bottom:3px solid #36a6ef;
    font-size: 19px;
    font-weight: bold;
    padding: 10px 0px;
	margin: 30px 0px;
}
section h4{
	color :#36a6ef;
	font-size:18px;
	line-height:24px;
	font-weight:bold;
	margin:20px -10px;
	padding:10px 10px 10px 32px;
	background:transparent;
	position:relative;
	text-indent:-22px;
}

section > h4:before{
	content:"■";
	font-size:17px;
	margin-right:6px;
	color:#2d3861;
	line-height:1;
}

section > h5{
	font-size:16px;
	font-weight:bold;
	margin:10px 0px;
	padding:10px 15px;
	border-bottom:1px solid #000;
}

section blockquote{
	width:80%;
	padding:25px;
	font-size:14px;
	margin:15px auto;
	border:1px dotted #999;
	background:#ccc;
	position:relative;
}

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

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

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

/* ▼まとめボックス： .mtm▼ */
/*	目次：.mkj	*/
.mkj{
	background:#fff;
	border:#777 3px solid;
	margin:25px 0px;
	box-sizing:border-box;
	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;
}

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:5px;
}
.mkj li{
	padding:7px 0;
	padding-right:16px;
	line-height:22px;
	text-indent:-14px;
	padding-left:18px;
}
.mkj li:last-child{ border-bottom:0px; }

.mkj li a:before {
	color:#888;
	content:"\f0da";
	font-family:FontAwesome;
	padding-right:8px;
}
.mkj li a {
	font-weight: bold;
	color: #666;
    text-decoration: none;
	display: block;
}

/*	▼内部リンク / .link▼	*/
.link{ text-align:right; }
.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{
	border-color:#f7811d;
	text-decoration:none;
}
/*	▼外部リンク / .outlink▼	*/
.outlink{
	text-align:right;
}
.outlink a{
	color: #666;
	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;
}

/*	▼リンクボタン： .linkbtn▼ */
.linkbtn {
	text-align:center;
	margin:50px auto;
	overflow:hidden;
	display:block;
}
.linkbtn a{
	color:#fff;
	text-decoration:none;
	font-size:18px;
	line-height:18px;
	text-align:center;
	padding:15px 40px;
	border-radius:5px;
	position:relative;
	display:inline-block;
	background:#2d3861;
}
.linkbtn a:after{
	content:"\f105";
	font-size:18px;
	line-height:19px;
	font-family:FontAwesome;
	position:absolute;
	margin:auto;
	display:inline-block;
	text-align:center;
	padding:0px;
	right:20px;
	width:0px;
	height:0px;
	text-shadow:none;
}

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

/*	強調タグ：span */
span.marker{ color:#ff0000; font-weight:normal; background: linear-gradient(transparent 60%, #ffff60 60%); }
span.black{ color:#000; font-weight:bold; }
span.red{ color:#ed5050; font-weight:bold; }
span.blue{ color:#3964db; font-weight:bold; }
span.big{ font-size:17px; font-weight:bold; }

/*	パンくず ： #pankuzu	*/
#pankuzu{
	padding:3px 7px;
	margin:0px 0px 5px;
	font-size:12px;
	background:#ececec;
	display:block;
	overflow:hidden;
}
#pankuzu ul{ list-style:none; padding:7px 0px; }
#pankuzu li{ display:inline-block; }
#pankuzu li a{ color:#333; }
#pankuzu li.top { font-size:11px; }
#pankuzu li.top:after{ content:">"; padding-left:5px; }


/*	▼表タグ  /  table ▼ */
section > table{
	padding:10px;
	margin:10px auto 20px;
	border-collapse:collapse;
	border:1px solid #3866a0;
	font-size:15px;
}
section > table > tbody > tr,
section > table > tbody > tr > th,
section > table > tbody > tr > td { border:1px solid #3866a0; padding:5px; }
section > table > tbody > tr > th{ 	color:#fff;	font-weight:bold; background:#79A1D4; }

/*	▼段落タグ > dl,dt,dd ▼ */
section > dl{ margin:10px; line-height:1.5em; }
section > dl > dt{
	padding:5px 0px;
	font-weight:bold;
	font-size:16px;
	color:#333;
}
section > dl > dd{ padding:10px 15px 25px; }

/*	▼リストタグ > ul,ol ▼ */
section > ul, section > ol{ list-style-position:inside; margin:10px 10px 10px 10px; line-height:1.5em; }
section > ul > li, section > ol > li{ padding:0px 5px 0px 30px; text-indent:-30px;}
section > ul > li > a, section > ol > li > a{ color:#000; }

/*	▼折りたたみ部分 > #item ▼ */
#item{
	overflow:hidden;
	border:1px solid #29568F;
	margin:0 auto 10px auto;
	background:#cbdaed;
	border-radius:7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
#item .btn_title{
	color:#29568F;
	margin:0;
	padding:10px;
	font-weight:bold;
	font-size:16px;
	position:relative;
	display:block;
	height:13px;
	line-height:17px;
	background:#cbdaed;
	text-align:center;
}
#item .btn_title:after{
	position:absolute;
	content:"\f0c9";
	font-family:FontAwesome;
	top:8px;
	right:5px;
}
#item > table{ font-size:13px; margin:5px; border:0px !important; line-height:1.4em; background:transparent;}
#item > table > tbody > tr{ border:0px; }
#item > table > tbody > tr > th{
	border:0px; padding-left:-25px; text-align:left; font-weight:bold; color:#fff; background: #29568F;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#item > table > tbody > tr >{ border:0px !important; padding-left:25px;  }


/*		口コミ：kkomi	*/

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


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

/*	▼ライターコメント：.fuki▼	*/
.fuki{
	width:100%;
	margin:15px auto;
}

.fuki > p {
	text-align:center;
	font-size:14px;
	line-height:17px;
	width:90px;
	display:inline-block;
	vertical-align:middle;
}


.fuki > p > span.writer_img{
	width:90px;
	height:90px;
	display:block;
	margin-right:15px;
	text-align:center;
	vertical-align:middle;
	background-size:cover;
	margin-bottom:10px;
}

span.writer_img.yuria{background-image:url("http://ssbros.sakura.ne.jp/wp/wp-content/uploads/2018/08/556413fafb109f5039dcd2d9aefcb345.jpg");}
span.writer_img.kasumin{background-image:url("http://ssbros.sakura.ne.jp/wp/wp-content/uploads/2018/08/556413fafb109f5039dcd2d9aefcb345-1.jpg");}
span.writer_img.maki{background-image:url("");}

.fuki > .fuki_text{
	width:calc(100% - 120px);
	display:inline-block;
	text-align:left;
	font-size:15px;
	line-height:26px;
	vertical-align:middle;
	border:2px solid #999;
	border-radius:10px;
	padding:15px;
	margin-left:20px;
	box-sizing:border-box;
	position:relative;
	box-shadow:5px 5px 0px #ddd;
}

.fuki > p::before{
	content:"";
	border-width:10px;
	border-color:transparent;
	border-style:solid;
	border-right:20px solid #999;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	left:-30px;
	width:0px;
	height:0px;
}

.fuki > p::after{
	content:"";
	border-width:10px;
	border-color:transparent;
	border-style:solid;
	border-right:20px solid #fff;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	left:-25px;
	width:0px;
	height:0px;
}

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

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

.footer_box > dl.sitemap{ margin:0px auto; text-align:center; }
.footer_box > ul{
	list-style-position:inside;
	border-spacing:10px;
	list-style-type:none;
	width:100%;
}

.footer_box > ul.menu > li{

	color:#777;
	font-size:15px;
	line-height:17px;
	padding:5px 0;
	text-align:left;
	vertical-align:top;
}
.footer_box > ul.menu > li:last-child{ border-right:1px solid #fff; }

.footer_box > ul.menu > li > a{ color:#777; text-decoration:none; line-height:17px; padding:0px 0px; }
.footer_box > ul.menu > li > a:before{ content:"\f105"; font-family:FontAwesome; padding-right:10px; }
.footer_box > ul.menu > li > a:hover{ text-decoration:underline; }

/*		▼子ページ / ul.menu > li > .children▼	*/
.footer_box > ul.menu > li > .children{ display:inline-block; margin:10px 0px; }
.footer_box > ul.menu > li > .children > li { width:calc(50% - 35px); display:inline-block; line-height:25px; margin:0px 15px; }
.footer_box > ul.menu > li > .children > li > a{ text-decoration:none; }
.footer_box > ul.menu > li > .children > li > a:before{ content:"\f105"; font-family:FontAwesome; padding-right:5px; }

.copyright{
	font-size:13px;
	text-align:center;
	padding:7px 0px;
	margin:0px auto;
	color:#fff;
	background:#333;
}

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

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

#pageTop > a > i.fa , #mkjTop a > i.fa {
	font-size:43px;
	line-height:0.8;
	display:block;
}


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


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