﻿/* カスタム CSS をここに入力してください */
/* 05.アメリカンな(?)吹き出し */
	.fukidashi{
	    position:relative;
	    padding:5px 20px;
	    font:bold 28px/1.6 Arial, Helvetica, sans-serif;
	    color:#333;
	    background:#fff;
	    text-shadow:
	        1px 1px 0 #fff,
	        2px 2px 0 #999;
	    border-top:#333 solid 3px;
	    border-bottom:#333 solid 3px;
	    background-image: -webkit-gradient(linear, left top, right bottom,
	            from(           rgba(255, 255, 255, 0.0)),
	            color-stop(0.4, rgba(255, 255, 255, 0.0)),
	            color-stop(0.4, rgba(0, 0, 0, 0.1)),
	            color-stop(0.6, rgba(0, 0, 0, 0.1)),
	            color-stop(0.6, rgba(255, 255, 255, 0.0)),
	            to(             rgba(255, 255, 255, 0.0))
	            );
	    background-image: -webkit-linear-gradient(top -45deg,
	            transparent 40%,
	            rgba(0, 0, 0, 0.1) 40%,
	            rgba(0, 0, 0, 0.1) 60%,
	            transparent 60%
	            );
	    background-image: -moz-linear-gradient(top -45deg,
	            transparent 40%,
	            rgba(0, 0, 0, 0.1) 40%,
	            rgba(0, 0, 0, 0.1) 60%,
	            transparent 60%
	            );
	    background-image: -o-linear-gradient(top -45deg,
	            transparent 40%,
	            rgba(0, 0, 0, 0.1) 40%,
	            rgba(0, 0, 0, 0.1) 60%,
	            transparent 60%
	            );
	    background-image: linear-gradient(to bottom -45deg,
	            transparent 40%,
	            rgba(0, 0, 0, 0.1) 40%,
	            rgba(0, 0, 0, 0.1) 60%,
	            transparent 60%
	            );
	    background-size:4px 4px;
	}
	.fukidashi:before{
	    content:" ";
	    position:absolute;
	    top:100%;
	    left:24px;
	    width:0;
	    height:0;
	    border-width:12px;
	    border-style:solid;
	    border-color:transparent;
	    border-top-color:#333;
	}
	.fukidashi:after{
	    content:" ";
	    position:absolute;
	    top:100%;
	    left:28px;
	    width:0;
	    height:0;
	    border-width:8px;
	    border-style:solid;
	    border-color:transparent;
	    border-top-color:#f0f0f0;
	    z-index:1;
	}

/*メタルプレート*/
.metalplate{
	position:relative;
	margin:0 10px;
	padding:10px 10px 10px 30px;
	font:bold 22px/1.2 Arial, Helvetica, sans-serif;
	color:#666;
	background:#ccc;
	border-top:#ccc solid 1px;
	border-right:#999 solid 1px;
	border-bottom:#999 solid 1px;
	border-left:#ccc solid 1px;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.5) inset;
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			 rgba(220, 220, 220, 1.0)), 
			color-stop(0.25, rgba(240, 240, 240, 1.0)),
			color-stop(0.30, rgba(235, 235, 235, 1.0)),
			color-stop(0.36, rgba(240, 240, 240, 1.0)),
			color-stop(0.50, rgba(235, 235, 235, 1.0)),
			color-stop(0.80, rgba(215, 215, 215, 1.0)),
			to(				 rgba(210, 210, 210, 1.0))
			);
	background-image: -webkit-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -moz-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -o-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: linear-gradient(to bottom,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
}
.metalplate:before{
	content:" ";
	position:absolute;
	top:0;
	left:15px;
	width:0;
	height:100%;
	border-left:#ccc solid 1px;
}
.metalplate:after{
	content:" ";
	position:absolute;
	top:0;
	left:16px;
	width:0;
	height:100%;
	border-right:#eee solid 1px;
}
/*モザイク見出し*/
.mozaiku{
	position:relative;
	margin:0 10px;
	padding:0 10px 0 55px;
	font:bold 22px/40px Arial, Helvetica, sans-serif;
	color:#666;
	background:#f3f3f3;
	z-index:1;
}
.mozaiku:before{
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
	border-right:#fff solid 2px;
	background:#f60;
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to bottom,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}
.mozaiku:after{
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
    background-image: -webkit-gradient(linear, left top, right top,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to right,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}

	br {
		display: none;
	}


img { 
	max-width: 100%; 
	height:auto;
}

/* YARPP standard*/

.yarpp-standard h5{
	font-weight: 700;
	font-size: 14px;
	color: inherit;
	padding: 5px;
	border: solid 1px #ff9900;
	border-radius: 3px;
	margin: 10px 0;
}

.yarpp-standard dl{
	clear:both;
}

.yarpp-standard img{
	float:left;
	margin: 0px 10px 5px 0;
}

.yarpp-standard a.title {
	font-weight: 700;
	text-decoration:none;
	color: #483D8B;
}

.yarpp-standard a.title:hover {
	color: #3366ff;
}

.yarpp-standard small {
	color: #A9A9A9;
}

.yarpp-standard .date {
	font-size: 0.8em;
	color: #66cc99;
}

.kokuban {
    font-family: HuiFontP109;
    color: #fff;
    background-color: #114400;
    margin: 10px 0 10px 0;
    padding: 15px;
    border: 9px solid #a60;
    border-radius: 3px;
    box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
    text-shadow: 0px 0px 2px #000;
    line-height: 1.9;
}
.point {
    color: #ffb1b3;
    font-weight: bold;
    border: 3px solid #ffb1b3;
}
/*関連記事*/
/* 関連記事メニュー */
.related {
	margin: 40px 0 0;
}
.related h2 {
	padding: 0 0 0 7px;
	border-left: solid 8px #bac6cb;
	border-bottom: none;
	font-size: 20px;
}
.related h2:before {
	content: none;
}
.related ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.related li a {
    padding: 5px 0;
	border: none;
	color: #000000;
	flex: 1;
	font-size: 14px;
	text-decoration: none;
	display: block;
}
.related li a:hover {
	background-color: #eeeeee;
}
 @media (max-width: 599px) {
.related {
	padding: 10px 0;
}
.related li .thumb {
	width: 80px;
	height: 50px;
    float: left;
}
.related li .text {
	margin-left: 95px;
}
.related li a:after {
	content: "";
	display: block;
	clear: both;
}
}
 @media (min-width: 600px) {
.related ul {
	display: flex;
	flex-wrap:wrap;
}
.related li {
	display: flex;
	flex: 0 0 25%;
	padding: 0 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.related li .thumb {
	width: 100%;
	height: 80px;
	margin-bottom: 5px;
}
.related li .text {
	margin-left: 0;
}
}
/*twitterフォローボタン*/
.follow-btn	{
width:100%;
display:block;
background:#55acee;
padding:10px;
text-align:center;
color:#fff;
text-decoration:none;
}
/*--------------------------------------
Feedly Button
--------------------------------------*/
.feedly-button {
text-align: center;
max-width: 100%;
}
.feedly-button a {
padding: 10px;
color: #fff;
background: #6CC655;
border: 1px solid #54803A;
text-decoration: none;
display: block;
}
.feedly-button a:hover {
color: #6CC655;
background: #fff;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}