@charset "utf-8";
/* ==============================================================================
 RBFM | 2015 
============================================================================== */

/* --------------------------------------------------------------------- */
/* webfont import */
/* --------------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); 

/* --------------------------------------------------------------------- */
/* Base Reset HTML5 */
/* --------------------------------------------------------------------- */
/* Base */
html,body { width:100%; height:100%; -webkit-text-size-adjust:100%; }
html { height:100%; overflow-y:scroll; }
/* Reset */
* { margin:0; padding:0; font-weight:normal; }
a { text-decoration:none; }
img { border:none; vertical-align:middle; }
ul,ol,li { list-style:none; }
.mt0{ margin-top:0 !important; }
/* HTML5 */
article,aside,details,footer,header,main,menu,nav,section,summary { display:block; }


/* --------------------------------------------------------------------- */
/* Base Common Setting */
/* --------------------------------------------------------------------- */
html{ background:#FFF; }
body{ font-size:12px; line-height:1.6; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif; color:#363636; }
/* for Layout common class */
.mt10{ margin-top:10px !important; }
.mt20{ margin-top:20px !important; }
.mt30{ margin-top:30px !important; }
.mt40{ margin-top:40px !important; }
.fl{ width:470px; float:left; }
.fr{ width:470px; float:right; }
.r5{ border-radius:5px; }


/* --------------------------------------------------------------------- */
/* Base Layout */
/* --------------------------------------------------------------------- */
/* header */
header{ width:100%; height:300px; padding:0; position:relative; }
header h1{ width:960px; margin:0 auto; }
header h1 img{ margin:87px 0 0 0; opacity:0.8; }
/* navigation */
nav{ background:#363636; font-family:montserrat; }
nav ul{ width:960px; margin:0 auto; padding:0 10px; color:#FFF; font-weight:bold; overflow:auto; }
nav li{ float:left; margin:20px 0; line-height:1; }
nav li:last-child{ border-right:2px solid #FFF; }
nav li a{ margin:0; padding:0 20px; color:#FFF; line-height:1; text-decoration:none; display:inline-block; border-left:2px solid #FFF; }
/* contants */
section{ width:960px; margin:100px auto 0; padding:0 10px; display:block; position:relative; clear:both; overflow:auto; }
section h1{ margin:0 0 30px 0; font-size:20px; font-weight:normal; }
section h1 span{ font-size:30px; font-family:montserrat; font-weight:bold; }
section h2{ font-size:20px; font-family:montserrat; }
section article{ display:block; clear:both; overflow:auto; }
section .fl .uLevel{ position:relative; z-index:1; }
section .fl .articleimg{ border-radius:5px; }
section .fl .sns{ margin:-30px auto 0; overflow:auto; padding:0 0 0 10px; display:block; position:relative; z-index:2; }
section .fl .c3{ width:210px; }
section .fl .c4{ width:280px; }
section .fl .c5{ width:350px; }
section .fl .sns li{ float:left; width:60px; height:60px; display:block; margin:0 10px 0 0; padding:0; }
section .fl .sns li a{ width:60px; height:60px; overflow:hidden; }
section .fl .sns li img{ width:60px; height:60px; }
section .fr h2{ margin:0; font-size:20px; font-family:montserrat; font-weight:bold; }
section .fr h2 span{ font-size:12px; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-weight:bold; }
section .fr .read{ margin:10px 0 0 0; font-weight:bold; }
section .fr dl{ margin:10px 0 0 0; overflow:auto; }
section .fr dt{ padding:5px 0; font-weight:bold; float:left; }
section .fr dd{ padding:5px 0 5px 5em; border-bottom:1px dotted #999; }
section .fr #instafeed{ margin:10px 0 0 0; overflow:auto; }
section .fr #instafeed li{ width:86px; margin:10px 10px 0 0; padding:0; font-weight:bold; float:left; }
section .fr #instafeed li:nth-child(5n){ margin:10px 0 0 0; }
section .fr #instafeed li img{ width:86px; border-radius:5px; }
section .fr .btn{ width:200px; margin:20px 0 0; text-align:center; line-height:36px; border-radius:5px; border:2px solid #363636; color:#363636; display:inline-block; font-weight:bold; }
section .fr .btn:hover{ background:#363636; color:#FFF; }
section .fr .list{ margin:0; }
section .fr .list li{ margin:5px 5px 0 0; float:left; }
section .fr .list li a{ background:#CCC; padding:0 10px; border-radius:5px; color:#FFF; text-decoration:none; line-height:30px; display:inline-block; }
section .fr .list li a:hover{ background:#363636; }
/* copyright */
address{ background:#363636; margin:100px 0 0 0; text-align:center; font-style:normal; font-size:12px; font-weight:bold; font-family:montserrat; line-height:50px; color:#FFF; }


/* --------------------------------------------------------------------- */
/* Blog */
/* --------------------------------------------------------------------- */
.recentlyPost{ width:960px; margin:20px 0 0 0; overflow:auto; }
.recentlyPost .article{ width:225px; margin:0 0 20px; float:left; }
.recentlyPost .article:nth-child(2n){ margin:0 20px 20px; }
.recentlyPost .article:nth-child(4n){ margin:0 0 20px 20px; }
.recentlyPost .article a{ color:#363636; }
.recentlyPost .article a:hover{ opacity:0.7; color:#777; }
.recentlyPost .article a p{ font-size:12px; font-weight:bold; }
.recentlyPost .article a p.date{ margin:10px 0 0 0; }
.archive{ width:715px; margin:50px 0 0 0; float:left; display:block; }
.archive ul{ width:100%; margin:20px 0 0 0; overflow:auto; }
.archive li{ margin:0 20px 10px 0; width:225px; float:left; }
.archive li:nth-child(3n){ margin:0 0 10px; }
.archive li a{ background:#819BBD; line-height:30px; color:#FFF; text-align:center; display:block; font-weight:bold; border-radius:5px; }
.archive li a:hover{ opacity:0.5; }
.category{ width:225px; margin:50px 0 0 0; float:right; display:block; }
.category ul{ width:100%; margin:20px 0 0 0; overflow:auto; }
.category li{ margin:0 0 10px 0; width:225px; }
.category li a{ background:#D2D0BA; line-height:30px; color:#FFF; text-align:center; display:block; font-weight:bold; border-radius:5px; }
.category li a:hover{ opacity:0.5; }





@media screen and (max-width:768px){
header{ padding:0; }
header h1{ width:100%; }
header h1 img{ margin:87px 0 0 10px; }
nav ul{ width:auto; margin:0 auto 0 10px; padding:0; }
nav li a{ padding:0 10px; }
section{ width:100%; margin:100px auto 0; padding:0; }
section h1{ margin:0 0 30px 0; font-size:20px; font-weight:normal; text-align:center; }
section h1 span{ font-size:30px; font-family:montserrat; font-weight:bold; }
section h2{ text-align:center; }
.fl{ float:none; margin:0 auto; }
.fr{ float:none; margin:20px auto; }
section .fr .btn{ width:98%; margin:20px auto 0; }
/* blog */
.recentlyPost{ width:715px; margin:20px 0 auto 0; }	
.archive{ width:715px; margin:50px 0 auto 0; }
.category{ width:715px; margin:50px 0 auto 0; }
.recentlyPost .article,
.recentlyPost .article:nth-child(2n),
.recentlyPost .article:nth-child(4n){ margin:0 20px 20px 0; }
.recentlyPost .article:nth-child(3n){ margin:0 0 20px 0; }
.archive{ float:none; }
.category{ float:none; }
.category li{ margin:0 20px 10px 0; float:left; }
.category li:nth-child(3n){ margin:0 0 10px; }
}

@media screen and (max-width:480px){
nav ul{ padding:20px 0 10px; color:#FFF; font-weight:bold; overflow:auto; }
nav li{ float:left; margin:0 0 10px 0; line-height:1; }
nav li:last-child{ border-right:2px solid #FFF; }
nav li a{ margin:0; padding:0 20px; color:#FFF; line-height:1; text-decoration:none; display:inline-block; border-left:2px solid #FFF; }
header{ height:200px; text-align:center; }
header h1 img{ width:300px; margin:62px 0 0 0; }
section{ margin:50px auto 0; }
section h1 span{ display:block; line-height:1.4; }
.fl{ width:100%; overflow:hidden; }
.fr{ width:auto; margin:20px 10px 0; }
section .fl .articleimg{ width:100%; border-radius:0; }
section .fl .sns{ width:auto; margin:-20px auto 0; }
section .fl .c3{ width:150px; }
section .fl .c4{ width:200px; }
section .fl .c5{ width:250px; }
section .fl .sns li{ float:left; width:40px; height:40px; }
section .fl .sns li a{ width:40px; height:40px; }
section .fl .sns li img{ width:40px; height:40px; }
section .fr #instafeed li{ width:18.4%; margin:10px 2% 0 0; }
section .fr #instafeed li:nth-child(5n){ margin:10px 0 0 0; }
section .fr #instafeed li img{ width:100%; border-radius:3px; }
address{ margin:50px 0 0 0; }
/* blog */
.recentlyPost{ width:470px; margin:20px 0 auto 0; }	
.archive{ width:470px; margin:50px 0 auto 0; }
.category{ width:470px; margin:50px 0 auto 0; }
.recentlyPost .article,
.recentlyPost .article:nth-child(3n),
.recentlyPost .article:nth-child(4n){ margin:0 20px 20px 0; }
.recentlyPost .article:nth-child(2n){ margin:0 0 20px 0; }
.archive li,
.archive li:nth-child(3n){ margin:0 20px 10px 0; width:225px; }
.archive li:nth-child(2n){ margin:0 0 10px; }
.category li,.category li:nth-child(3n){ margin:0 20px 10px 0; }
.category li:nth-child(2n){ margin:0 0 10px; }
}

@media screen and (max-width:460px){
header h1 img{ width:280px; margin:62px 0 0 0; }
.recentlyPost{ width:225px; margin:20px auto 0; }	
.recentlyPost .article,
.recentlyPost .article:nth-child(3n),
.recentlyPost .article:nth-child(4n){ margin:0 0 20px 0; }
.recentlyPost .article:nth-child(2n){ margin:0 0 20px 0; }
.archive{ width:225px; margin:50px auto 0; }
.archive li,
.archive li:nth-child(3n){ margin:0 0 10px 0; }
.archive li:nth-child(2n){ margin:0 0 10px 0; }
.category{ width:225px; margin:50px auto 0; }
.category li,.category li:nth-child(3n){ margin:0 0 10px 0; }
.category li:nth-child(2n){ margin:0 0 10px; }
}