@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: 5px; font-size: 12px; color: #fff; font-weight: bold; }
#blog .topbtn { padding: 0 0 70px; }
/* ------------------------------------------------------------ fv  */
#fv { background: url(../images/blog/fv.jpg) no-repeat center center; background-size: cover; margin: 100px auto 0; }

/* ------------------------------------------------------------ blog 始まり------------------------------------------------------------ */

/* ------------------------------------------------------------ main */

#blog #main { width: 700px; float: left; }

#blog #main .main_article { border-bottom: 1px solid #e5e5e5; padding: 0 0 20px; }
#blog #main .main_article .top_detail img { padding: 0 0 20px; }
#blog #main .main_article .top_detail .date { padding: 10px 0 30px; font-size: 12px; color: #191919; }
#blog #main .main_article .top_detail .date .cat { margin: 0 0 0 15px; }
#blog #main .main_article .top_detail h1 { font-size: 24px; color: #191919; font-weight: bold; }
#blog #main .main_article .blog_body h2 { font-size: 20px; color: #191919; font-weight: bold; line-height: 100%; margin: 30px 0; border-bottom: 4px solid #e5e5e5; padding: 0 0 10px; }
#blog #main .main_article .blog_body h3 { font-size: 18px; color: #191919; font-weight: bold; line-height: 100%; margin: 30px 0; border-left: 4px solid #e5e5e5; padding: 0 0 0 10px; }
#blog #main .main_article .blog_body h4 { font-size: 16px; color: #191919; font-weight: bold; line-height: 100%; margin: 30px 0; border-left: 2px dotted #ccc; padding: 0 0 0 10px; }
#blog #main .main_article .blog_body .btn { text-align: center; margin: 30px 0; }
#blog #main .main_article .blog_body .btn a { color: #fff; line-height: 60px; border-radius: 10px; background: #134b98; display: inline-block; *display: inline; *zoom: 1;padding: 0 40px; min-width: 320px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; margin: 0 30px; text-decoration: none; }
#blog #main .main_article .blog_body .image_box { margin: 30px 0; }
#blog #main .main_article .blog_body .image_box img { height: auto; max-width: 700px; margin: 0 auto; display: block; }
#blog #main .main_article .blog_body p { font-size: 16px; margin: 30px 0; }
#blog #main .main_article .blog_body p a { color: #134b98; text-decoration: underline; }
#blog #main .main_article .blog_body p iframe { width: 100%; height: 450px; }


#blog #main .main_article .sns { padding: 60px 0 0; }
#blog #main .main_article .sns .line { margin: 0; float: left; }
#blog #main .main_article .sns .facebook,
#blog #main .main_article .sns .twitter { float: left; margin: 0 0 0 10px; }



#blog #main .related_article { padding: 50px 0; }
#blog #main .related_article h4 { font-size: 20px; font-weight: bold; }
#blog #main .related_article .blog_list { float: left; margin: 0 0 0 -20px; padding: 25px 0; }
#blog #main .related_article .blog_list li { width: 340px; margin: 0 0 0 20px; padding: 0 0 45px; float: left; }
#blog #main .related_article .blog_list li .date { padding: 15px 0 10px; font-size: 12px; color: #191919; display: inline-block; *display: inline; *zoom: 1; margin: 0 0 0 10px; }
#blog #main .related_article .blog_list li .cat { display: inline-block; *display: inline; *zoom: 1; padding: 7px; line-height: 100%; }
#blog #main .related_article .blog_list li h5 { font-size: 16px; color: #191919; font-weight: bold; height: 55px; overflow: hidden; }
#blog #main .related_article .blog_list li a .more { font-size: 12px; color: #134b98; border-bottom: 1px solid #134b98; }

/* ------------------------------------------------------------ aside */
#blog #aside { width: 340px; float: right; }
#blog #aside #pick_up .list { padding: 0 0 50px; }
#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; }
#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; height: 17px; overflow: hidden; }
#blog #aside #pick_up .list .textbox h4 { font-size: 14px; font-weight: bold; height: 48px; overflow: hidden; padding: 12px 0 0; }

#blog #aside #ranking .list { padding: 0 0 50px; }
#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; }
#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; height: 17px; overflow: hidden; }
#blog #aside #ranking .list .textbox h4 { font-size: 14px; font-weight: bold; height: 48px; padding: 12px 0 0; }

#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%; }

/* ------------------------------------------------------------ blog 終わり------------------------------------------------------------ */







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

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

/* ------------------------------------------------------------ common */
.small_title { 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; padding: 3px 5px 5px; font-size: 12px; color: #fff; font-weight: bold; }
#blog .topbtn { padding: 9% 0; }
/* ------------------------------------------------------------ fv  */
#fv { background: url(../images/blog/fv.jpg) no-repeat center center; background-size: cover; margin: 47px auto 0; }

/* ------------------------------------------------------------ blog 始まり------------------------------------------------------------ */

/* ------------------------------------------------------------ main */

#blog #main { width: 100%; margin: 0 auto; float: none; }

#blog #main .top_detail img { width: 100%; height: auto; }
#blog #main .main_article .top_detail h1 { font-size: 18px; }
#blog #main .main_article .blog_body { margin: 30px 0; }
#blog #main .main_article .blog_body .btn a { line-height: 50px; min-width: auto; max-width: 100%; }
#blog #main .main_article .blog_body .image_box img { max-width: 100%; }
#blog #main .main_article .blog_body h2 { font-size: 18px; }
#blog #main .main_article .blog_body h3 { font-size: 16px; }
#blog #main .main_article .blog_body h4 { font-size: 14px; }
#blog #main .main_article .blog_body p { font-size: 14px; }
#blog #main .main_article .blog_body p iframe { width: 100%; height: 300px; }

#blog #main .main_article .line,
#blog #main .main_article .facebook,
#blog #main .main_article .twitter { margin: 0 0 0 10px; }
#blog #main .main_article .line { margin: 0; }
#blog #main .main_article .line img,
#blog #main .main_article .facebook img,
#blog #main .main_article .twitter img { width: 87px; height: auto; }
#blog #main .main_article .sns { float: none; width: 285px; margin: 0 auto; padding: 9% 0 0; }

 
#blog #main .related_article { padding: 6% 0 21%; }
#blog #main .related_article h4 { font-size: 18px; }
#blog #main .related_article .blog_list { float: none; margin: 0; padding: 3% 0; }
#blog #main .related_article .blog_list li { width: 48%; padding: 0; margin: 0 0 0 4%; }
#blog #main .related_article .blog_list li:first-child { margin: 0; }
#blog #main .related_article .blog_list li img { width: 100%; height: auto; }
#blog #main .related_article .blog_list li .date { padding: 6% 0; font-size: 12px; }
#blog #main .related_article .blog_list li .cat { display: inline-block; *display: inline; *zoom: 1; margin: 0; padding: 3px 7px 7px; height: 12px; overflow: hidden; line-height: 150%; }
#blog #main .related_article .blog_list li h5 { font-size: 16px; height: 48px; line-height: 150%; }
#blog #main .related_article .blog_list li a .more { font-size: 12px; color: #134b98; border-bottom: 1px solid #134b98; }

/* ------------------------------------------------------------ aside */
#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; height: 48px; 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; height: 48px; 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; }

/* ------------------------------------------------------------ blog 終わり------------------------------------------------------------ */

}