@charset "UTF-8";
/*------------------------------------------------------------
●ブラウザ固有のCSSをリセット
-------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,p,blockquote,table,th,td
	{
	margin: 0;
	padding: 0;
	}

table
	{
	border-collapse: collapse;
	border-spacing: 0;
	}

address,caption,cite,code,dfn,h1,h2,h3,h4,th,var
	{
	font-style: normal;
	font-weight: normal;
	}

fieldset,img,abbr{ border: 0; }
caption,th{ text-align: left; }
q:before,q:after{ content: ''; }
a{ text-decoration: none; }

img	{ border: none; }

/* ========== 段落 ========== */
.dnrk {
	overflow: hidden;
	line-height:2em;
	padding: 5px 20px 10px 10px;
}

.side-freetext a {
	border:initial!important;
	padding:3px 10px 0 10px!important;
}

/* ========== パンくずリスト ========== */

.breadcrumb
	{
	text-align:left;
	margin:10px 10px 0px;
	}

.breadcrumb div
	{
	display:inline-block;
	}

/* ========== 前の記事へ・次の記事へ ========== */

.preview_page_link
	{
	float:left;
	text-align:left;
	}

.next_page_link
	{
	float:right;
	text-align:right;
	}

/* ========== 画像の回り込み ========== */

img.fr
	{
	float: right;
	margin: 0px 0px 15px 10px;
	}

img.fl
	{
	float: left;
	margin: 0px 10px 15px 0px;
	}

@media screen and (max-width: 700px)
{
	img.fr,img.fl
	{
	float:none;
	margin:0 auto;
	display:block;
	}
}

/*-------------------------------------------------
	フッター
--------------------------------------------------*/

footer
	{
	border-top:1px dotted #F99;
	background-color: #666;
	color:#fff;
	text-align:center;
	}

footer a
	{
	text-decoration:none;
	color:#fff!important;
	}

footer
	{ text-align:center; }

footer ul
	{
	display:inline;
	padding-left:5px;
	border-left:1px solid #333;
	}

footer li
	{
	display:inline;
	padding-left:5px;
	padding-right:10px;
	border-right:1px solid #333;
	color:#f36;
	font-size:small;
	}

fnavi2 a
	{
	color:#fff;
	text-decoration:none;
	}


/*-------------------------------------------------
	運営
--------------------------------------------------*/

#mail table.mailform
	{
	width:100%;
	table-layout:fixed;
	}

#mail table.mailform th
	{
	width:20%;
	background:#fafafa;
	text-align:right;
	padding:5px 10px;
	}

#mail table.mailform td
	{
	width:60%;
	padding:5px 10px;
	}

#mail table.mailform td input,
#mail table.mailform td textarea
	{
	width:100%;
	height:20px;
	}

#mail table.mailform td textarea
	{ height:200px; }

#mail table.mailform td input.sm
	{
	width:50%;
	padding:5px;
	height:auto;
	}



/*-------------------------------------------------
	共通
--------------------------------------------------*/

.c_both
	{ clear:both; }

.pan	{ margin:0 0 5px 15px; }

.pan a	{ margin-right:7px; }

.multi
	{
	margin:0px 10px 20px 20px;
	text-align:left;
	line-height:1.7
	}

.multi p
	{
	font-size:12px;
	color: #999999;
	}

.multi img
	{
	border:1px solid #ccc;
	width:150px;
	height:150px;
	margin:0 20px;
	}

.multi a
	{ display:block; }

#info
	{
	font-size:12px;
	line-height:1.4;
	padding:20px;
	text-align:left;
	}


/*-----------------------------------------------------------
文字背景装飾
-------------------------------------------------------------*/

p .uliner { background:url(img/uliner.gif) bottom repeat-x; }
p .ulineb { background:url(img/ulineb.gif) bottom repeat-x; }
p .uliney { background:url(img/uliney.gif) bottom repeat-x; }


#table
	{
	margin:0 auto;
	width:480px;
	border-right:1px solid #B5B5B6;
	border-bottom:1px solid #B5B5B6;
	font-size:13px;
	}

.td
	{
	border-top:1px solid #B5B5B6;
	border-left:1px solid #B5B5B6;
	background-color:#FFFFCC;
	padding:8px;
	}

.td-midashi
	{
	border-top:1px solid #B5B5B6;
	border-left:1px solid #B5B5B6;
	text-align:center;
	font-weight:bold;
	background-color:#CCFFCC;
	padding:8px;
	}

.td1
	{
	border-top:1px solid #B5B5B6;
	border-left:1px solid #B5B5B6;
	text-align:center;
	padding:8px;
	}

/*------------------------------------------------------------
●１、box・・・カラーボックスの設定
-------------------------------------------------------------*/

.box-yellow{ background-color: #ffff00!important; }/*黄色のボックス*/
.box-aqua{ background-color: #00ffff!important; }/*水色のボックス*/
.box-gray{ background-color: #eee!important; }/*灰色のボックス*/
.box-red{ background-color: #fc9b8b!important; }/*赤色のボックス*/
.box-yellow{ background-color: #ffff00!important; }/*黄色のボックス*/

/*------------------------------------------------------------
●２、color・・・フォントカラーの設定
-------------------------------------------------------------*/

.black{ color: #000!important; }/*黒色*/
.red{ color: #cc0000!important; }/*赤色*/
.blue{ color: #003399!important; }/*青色*/
.green{ color: #008000!important; }/*緑色*/
.yellow{ color: #ffff00!important; }/*黄色*/
.navy{ color: #1F26A9!important; }/*紺色*/
.gray{ color: #ccc!important; }/*灰色*/
.orange{ color: #ff6600!important; }/*橙色*/
.pink{ color: #cc6699!important; }/*ピンク色*/
.purple{ color: #660099!important; }/*紫色*/
.olive{ color: #808000!important; }/*黄土色*/
.lime{ color: #00ff00!important; }/*黄緑*/
.aqua{ color: #167FA6!important; }/*水色*/

.impact
	{
	padding: 0px;
	color: #000000;
	background-color: #ffff99;
	}

/*-------------------------------------------------
	テキスト装飾
--------------------------------------------------*/
.wave01	{ background:url(../img/uliner.gif) bottom repeat-x; }
.wave02	{ background:url(../img/ulineb.gif) bottom repeat-x; }
.wave03	{ background:url(../img/uliney.gif) bottom repeat-x; }

.marginmarker
	{
	background-color: #ffff00;
	margin-left: 0.3em;
	margin-right: 0.3em;
	}
.largemarker
	{
	background-color: #ffff00;
	padding: 0.3em;
	margin-left: 0.3em;
	margin-right: 0.3em;
	}
.markerline
	{
	background-color: #ffff00;
	color:#FF0000;
	margin-left: 0.3em;
	margin-right: 0.3em;
	text-decoration: underline;
	}
.underline
	{
	margin-left: 0.3em;
	margin-right: 0.3em;
	text-decoration: underline;
	}

p .uline { background:url(img/uline.gif) bottom repeat-x; }
p .uliner { background:url(img/uliner.gif) bottom repeat-x; }
p .ulineb { background:url(img/ulineb.gif) bottom repeat-x; }
p .uliney { background:url(img/uliney.gif) bottom repeat-x; }

/********** アイキャッチ **********/

.eyecatch_area
	{
	width:80%;
	margin:0 0 10px 50px;
	padding:5px 6px 5px 5px;
	border:solid 1px #cccccc;
	background-color: #f6f6f6;
	}

/*.eyecatch_img*/
.eyecatch_area img
	{
	width:100%;
	border:solid 1px #cccccc;
	}

.eyecatch_text
	{
	width:100%;
	height:100px;
    background: rgba(45,45,45, 0.7);
	/*background-color: #333333;*/
	position: relative;
	margin-top: -100px;
	}

.eyecatch_text p
	{
	padding:10px 20px;
	line-height:40px;
	font-size:30px;
	color:#ffffff;
	}

.eyecath_end
	{
	position: absolute;
	}

/* ========== トップページ　アイキャッチ画像 ========== */

.t_eyecatch
	{
	text-align:center;
	margin:15px 0;
	position: relative;
	}

.t_eyecatch img
	{
	border:1px solid #ccc;
	padding:1%;
	max-width:400px;
	}

/********** 目次BOX **********/
.mokuji
{
	background-color: #e0f0f3;
	border:1px solid #999999;
	width:90%;
	margin:10px 0 30px 10px;
	padding:10px 10px 30px 30px ;
	border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mokuji_top {
	margin:10px 10px 0;
}
/*#main section article .mokuji h3*/
.mokuji_title
{
	border:none;
	background-color: #e0f0f3;
	font-size:18px;
	margin:10px;
}

.mokuji ul
{
	margin-top:10px;
	list-style:none;
}

.mokuji ul li
{
	line-height:2em;
}

/********** ハッシュタグBOX **********/
.hashtag_box {
	margin:5px 5px 30px;
}
.hashtag_box span {
	margin: 2px 5px 4px;
}

/********** 関連記事BOX **********/
.kanren_box {
	margin:5px 5px 30px;
}
.hashtag_box a {
	margin: 2px 5px 4px;
}

/********** まとめサイト風BOX **********/
.matome
{
	background-color: #fefefe;
	margin:10px;
	padding:10px;
	color: #666666;
	font-size:15px;
}

.matome:hover
{
	background-color: #efefef;
}

.matome:before
	{
	font-family: FontAwesome;
	color: #dddddd;
	content: "\f10d";
	font-size:20px;
	margin-right:5px;
	}

.img-left
	{
	float:left;
	margin:5px;
	padding-right:10px;
	}

.img-right
	{
	float:right;
	margin:5px;
	padding-left:10px;
	}

/* ========== コメント ========== */

#comment_wrap
	{
	padding-top:10px;
	margin:25px 15px 20px 0;
	background:#efefef;
	}

#comment_page
	{
	padding:20px 0 20px 0;
	background:#efefef;
	}

#comment
	{
	text-align:left;
	}

#comment article
	{
	border:1px solid #a2a2a2;
	margin:20px 10px;
	background:#fff;
	padding:10px;
	border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
	}

#comment article span {
	color:#a2a2a2;
	}
#comment article header
	{
	color:#333;
	height:auto;
	overflow:hidden;
	margin-bottom:10px;
	border-bottom:1px solid #a2a2a2;
	}

#comment article header p,
#comment article time,
#comment article .id
	{
	display:inline-block;
	margin:0 20px 0 0;
	}

#comment article time
	{
	text-align:right;
	margin-right:10px;
	color:#a2a2a2;
	}

#comment article .id
	{
	margin-top:5px;
	font-size:9px;
	}

#comment article p
	{
	margin:0 20px;
	}
#comment .comment_page_link
	{
	margin:0 0 10px 20px;
	}

#comment_area
	{
		text-align:center;
	}

#comment_area a.button
	{
		display:inline-block;
		width: 40%;
		height:30px;
	    font:normal normal 300 1.8em 'Open Sans';
	    text-decoration:none;

	    color:rgba(28, 190, 131, 1);
	    brackground-color:transparent;
	    border:1px solid rgba(28, 190, 131, 1);
	    border-radius:100px;

	    padding: .4em 1.2em;
	    margin:5px 5px 15px 5px;

	    background-size: 200% 100%;
	    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
	    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
	}

#comment_area a.button:hover{
    color:rgba(255, 255, 255, 1);
    background-color:rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}

/* ========== 日時、カテゴリ ========== */

.blog_box .blog_post
	{
	text-align:right;
	margin-bottom:0;
	}

#main section article .blog_box .blog_post p
	{
	margin:0;
	padding:1px 0;;
	font-size:0.8em;
	display:inline-block;
	}

.blog_post p.date:before
	{
	font-family: FontAwesome;
	color: #%POINT_02%; /* POINT_02 */
	content: "\f274";
	font-size:1.2em;
	margin-right:5px;
	}

/* ==========================================================================
	 Media Queries -- 910px
============================================================================= */
@media screen and (max-width: 910px)
{

.eyecatch_text
	{
	height:80px;
	margin-top: -80px;
	}

.eyecatch_text p
	{
	padding:10px 10px;
	line-height:35px;
	font-size:25px;
	color:#ffffff;
	}

.preview_page_link
	{
	float:none;
	text-align:center;
	margin-bottom:20px;
	}

.next_page_link
	{
	float:none;
	text-align:center;
	margin-bottom:20px;
	}

}

/* ==========================================================================
	 Media Queries -- 570px
============================================================================= */
@media screen and (max-width: 570px)
{
.breadcrumb
	{
	display:none;
	}

.eyecatch_area
	{
	width:90%;
	margin:0 0 10px 10px;
	padding:4px 5px 4px 4px;
	}

.eyecatch_text
	{
	height:60px;
	margin-top: -60px;
	}

.eyecatch_text p
	{
	padding:10px 10px;
	line-height:30px;
	font-size:15px;
	color:#ffffff;
	}

#comment_area a.button
	{
	width:50%;
	height:24px;
	font-size: 20px;
	}

.t_eyecatch img
	{
	max-width:320px;
	}

}

/* ====================
 データテーブル
======================= */
.data-table table{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

.data-table table th:first-child{
  border-radius: 5px 0 0 0;
}

.data-table table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

.data-table table th{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0;
}

.data-table table td{
  text-align: center;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0;
}

.data-table table td:last-child{
  border-right: 1px solid #a8b7c5;
}

.data-table table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

.data-table table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}