@charset "utf-8";

/* ------------------------------------------------------------ common */
.small_title { background: #134b98; padding: 15px 0; font-size: 30px; text-align: center; color: #fff; line-height: 100%; font-family: helvetica, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, sans-serif; letter-spacing: 3px; }
.small_title span { display: inline-block; *display: inline; *zoom: 1; padding: 0 0 0 12px; font-size: 14px; line-height: 100%; vertical-align: middle; }
.cat { background: #7d7d7d; padding: 3px 5px 5px; font-size: 12px; color: #fff; font-weight: bold; }

/* ------------------------------------------------------------ fv */
#fv { background: url(../images/blog/fv.jpg) no-repeat center center; background-size: cover; }

/* ------------------------------------------------------------ blog */
#blog { }
#blog #main { width: 700px; float: left; }
#blog #main .blog_list { width: 720px; float: left; margin: 0 0 0 -20px; }
#blog #main .blog_list li { width: 340px; margin: 0 0 0 20px; padding: 0 0 45px; float: left; }
#blog #main .blog_list li:first-child { width: 700px; float: none; }
#blog #main .blog_list li:first-child .about { margin: 0 0 10px; line-height: 1.8; font-size: 14px; height: 46px; overflow: hidden; }
#blog #main .blog_list li .date { display: inline-block; *display: inline; *zoom: 1; padding: 30px 0 15px; font-size: 12px; color: #191919; }
#blog #main .blog_list li .cat { display: inline-block; *display: inline; *zoom: 1; margin: 0 0 0 10px; padding: 7px; line-height: 100%; }
#blog #main .blog_list li h4 { line-height: 1.5; font-size: 16px; color: #191919; font-weight: bold; height: 55px; overflow: hidden; }
#blog #main .blog_list li a .more { font-size: 12px; color: #134b98; border-bottom: 1px solid #134b98; }

#blog #aside { width: 340px; float: right; }
#blog #aside #pick_up .list {}
#blog #aside #pick_up .list li { border-top: 1px solid #e5e5e5; padding: 20px 0; }
#blog #aside #pick_up .list li:first-child { border: none; }
#blog #aside #pick_up .list li a { display: table; width: 100%; }
#blog #aside #pick_up .list .img { padding: 0 25px 0 0; }
#blog #aside #pick_up .list .textbox { width: 180px; display: table-cell; vertical-align: middle; }
#blog #aside #pick_up .list .textbox .cat { display: inline-block; *display: inline; *zoom: 1; padding: 8px 9px 9px; overflow: hidden; }
#blog #aside #pick_up .list .textbox h4 { font-size: 14px; font-weight: bold; height: 53px; overflow: hidden; padding: 12px 0 0; line-height: 1.5; }

#blog #aside #ranking .list {}
#blog #aside #ranking .list li { border-top: 1px solid #e5e5e5; padding: 20px 0; position: relative; }
#blog #aside #ranking .list li:first-child { border: none; }
#blog #aside #ranking .list li a { display: table; width: 100%; }
#blog #aside #ranking .list li a .rank { position: absolute; z-index: 99; top: 20px; left: 0; }
#blog #aside #ranking .list .img { padding: 0 25px 0 0; }
#blog #aside #ranking .list .textbox { width: 180px; display: table-cell; vertical-align: middle; }
#blog #aside #ranking .list .textbox .cat { display: inline-block; *display: inline; *zoom: 1; padding: 8px 9px 9px; overflow: hidden; }
#blog #aside #ranking .list .textbox h4 { font-size: 14px; font-weight: bold; height: 52px; overflow: hidden; padding: 12px 0 0; line-height: 1.5; }

#blog #aside #category li { border-bottom: 1px solid #e5e5e5; padding: 20px 0; }
#blog #aside #category a h4 { float: left; font-size: 16px; }
#blog #aside #category a span { float: right; background: #f4f7fc; border-radius: 20px; padding: 8px 15px; font-size: 16px; line-height: 100%; }




/* ------------------------------------------------------------ mobile  ------------------------------------------------------------ */

@media only screen and (max-width:767px){

/* ------------------------------------------------------------ common */
.small_title { background: #134b98; padding: 15px 0; font-size: 24px; }
.small_title span { display: inline-block; *display: inline; *zoom: 1; padding: 0 0 0 12px; font-size: 14px; line-height: 100%; vertical-align: middle; }
.cat { background: #7d7d7d; font-size: 12px; color: #fff; font-weight: bold; }

/* ------------------------------------------------------------ fv */
#fv { background: url(../images/blog/fv.jpg) no-repeat center center; background-size: cover; margin: 0; }

/* ------------------------------------------------------------ blog */
#blog #main { width: 100%; float: none; }
#blog #main .blog_list { width: 100%; float: none; margin: 0; }
#blog #main .blog_list li { width: 48%; margin: 0; padding: 0 1% 7%; }
#blog #main .blog_list li:first-child { width: 100%; float: none; padding: 0 0 10%; }
#blog #main .blog_list li:first-child .about { font-size: 14px; height: 46px; }
#blog #main .blog_list li img { width: 100%; height: auto; }
#blog #main .blog_list li .date { display: block; padding: 5% 0 2%; font-size: 12px; color: #191919; }
#blog #main .blog_list li .cat { margin: 0; padding: 3px 7px 7px; height: 26px; overflow: hidden; line-height: 150%; }
#blog #main .blog_list li h4 { padding: 10px 0; font-size: 14px; height: 56px; line-height: 150%; }
#blog #main .blog_list li:first-child h4 { font-size: 16px; height: initial; padding: 10px 0; line-height: 150%; }
#blog #main .blog_list li a .more { font-size: 12px; }

#blog #aside { width: 100%; float: none; }
#blog #aside #pick_up .list li { width: 100%; padding: 6% 0; }
#blog #aside #pick_up .list li:first-child { border: none; }
#blog #aside #pick_up .list li a { width: 100%;  }
#blog #aside #pick_up .list .img { padding: 0 15px 0 0; }
#blog #aside #pick_up .list .textbox { width: 50%; }
#blog #aside #pick_up .list .textbox h4 { font-size: 14px; font-weight: bold; padding: 12px 0 0; }

#blog #aside #ranking .list li { padding: 20px 0; }
#blog #aside #ranking .list li:first-child { border: none; }
#blog #aside #ranking .list li a { width: 100%; }
#blog #aside #ranking .list li a .rank { top: 20px; left: 0; }
#blog #aside #ranking .list .img { padding: 0 25px 0 0; }
#blog #aside #ranking .list .textbox { width: 50%; }
#blog #aside #ranking .list .textbox h4 { font-size: 14px; padding: 12px 0 0; }


#blog #aside #category li { padding: 6% 0; }
#blog #aside #category a h4 { font-size: 16px; padding: 0 3%; }
#blog #aside #category a span { padding: 8px 15px; font-size: 16px; }


}