@charset "UTF-8";


/* <<<<<<<<<<<<<<<<<<<< site set >>>>>>>>>>>>>>>>>>>> */

/* ----------基本設定---------- */
.blog-wrap-wide {
	width: 90%;
	max-width: 1200px;   
    margin: 0 auto;
	padding: 4rem 0;
    box-sizing: border-box;  
}
.blog-wrap {
	width: 90%;
	max-width: 1000px;   
    margin: 0 auto;
	padding: 4rem 0 ;
	box-sizing: border-box;
}
.blog-wrap img {
    width: 100%;
    margin-bottom: 3rem;
}
.blog-contents {
}
/*装飾部分（左ボーダー）を含めた左揃えの調整のため小数点の数値になっている*/ 
.blog-contents h2 {
    margin: 6rem 0 3rem 0;
    padding: 1.5rem 3rem 1.5rem 2.6875rem;    
    border-left: 0.3125rem solid #004bc8;
    font-size: 1.5rem;
    background-color: #f4f5f6;
}
.blog-contents h3 {
    margin: 3rem 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px dotted #004bc8;
    font-size: 1.25rem;
}
.blog-contents p,
.blog-contents li {
    line-height: 2;
    margin: 0 3rem;
}
.blog-contents ul li {
	list-style: disc inside;
	padding-left:1em;
	text-indent:-1em;
}
/* ----------メニュー---------- */
#blog-menu-wrap {
    padding: 1rem 0;           
    background-color: #f4f5f6;
    box-sizing: border-box;    
}
#blog-menu {
	width: 90%;
	max-width: 1000px;
    margin: 0 auto;
    background-color: #f4f5f6;
}
#blog-menu ul li {
    display: inline-block;
    margin-right: 2rem;
    padding: 0.5rem 0;        
    font-size: 0.875rem;
}
#blog-menu ul li a {
    padding: 0.5rem;        
    color: #000;
}
#blog-menu ul li a:hover {
    text-decoration: none;
	color: #004bc8;
}
.current {
    border-bottom: 2px solid #004bc8;
}
/* ----------記事一覧の設定---------- */
.blog-thumb {
	float: left; 
	width: 31%;
	margin-right: 3.5%;
	margin-bottom: 8%;
}
/* WordPressでブログを運営する場合は「blog-thumb:nth-child(3n)」の設定を消す */
.blog-thumb:nth-child(3n) {
	margin-right: 0;
}
.blog-thumb a {
	color: #333;
    text-decoration: none;
}
.blog-thumb a:hover {
	color: #004bc8;
}
.thumb-img {
}
.thumb-img img {
	width: 100%;
	height: 100%;
    margin-bottom: 1rem;
}
/* ----------人気記事一覧の設定---------- */
.blog-thumb-popular {
	float: left;
	width: 22%;
	margin-right: 4%;
	margin-bottom: 6%;
}
.blog-thumb-popular a {
	color: #333;
    text-decoration: none;
}
.blog-thumb-popular a:hover {
	color: #004bc8;
}
/* ----------目次---------- */
.blog-topics {
	padding: 3rem 0;
    border: 1px solid #e3e3e3; 
}
.blog-topics li {
    font-weight: bold;
}
/* ----------日付・カテゴリ---------- */
.blog-info {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    font-size: 0.75rem;
}
/* ----------前後ページリンク---------- */
.blog-turn {
    padding: 1rem;
	margin: 1rem 0 3rem 0;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    font-size: 0.875rem;
}
.blog-turn a:hover {
	text-decoration: none;
}
/* ----------SNSリンク---------- */
.blog-contents .share p {
    margin: 0 0 0.5rem 0;
}
.fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
}
.share {
    width: 100%;
    margin: 1rem 0;
}
.share ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.share ul:after {
    display: block;
    clear: both;
    content: '';
}
.blog-contents .share li {
    float: left;
    width: 19.2%;
    padding-left: 0;
    margin: 0 1% 0 0;
    list-style: none;
    line-height: 1.5;
	text-indent: 0;
}
.share li:last-child {
    margin-right: 0;
}
.share li a {
    font-size: 14px;
    display: block;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 3px;
}
.share li a:hover {
    opacity: .8;
}
.share li a:visited {
    color: #fff;
}
.tweet a {
    background-color: #55acee;
}
.facebooklink a {
    background-color: #315096;
}
.line a {
    background-color: #00b900;
}
.hatena a {
    background-color: #008fde;
}
.pocket a{
    background-color: #EF4156;
}
.linkedin a{
    background-color: #3072ac;
}


/* #################### レスポンシブデザイン設定 #################### */

/* <<<<<<<<<<<<<<<<<<<< 560px未満 >>>>>>>>>>>>>>>>>>>> */

@media screen and (max-width: 559px) {    
    
.blog-contents h3 {
    margin: 3rem 0 1.5rem 0;
}    
.blog-contents p {
    margin: 0;
}
.blog-contents li {
    margin: 0 2rem;
}
.blog-topics p {
    margin: 0 2rem;
} 
.blog-thumb {
	width: 100%;
	margin-right: 0;
    margin-bottom: 16%;
}	
.blog-thumb-popular {
	width: 46%;
	margin-right: 0;
	margin-bottom: 8%;	
}	
.blog-thumb-popular:nth-child(2n) {
	margin-right: 8%;	
}
    
/* ----------SNSリンク---------- */   
.share li i {
    font-size: 1.3em;    
    padding-top: 3px;   
}
.facebooklink span, .tweet span, .hatena span, .pocket span, .linkedin span {
    display: none;
}
    
}