@charset "utf-8";
/* ------------------------------------------------------------ common */
/* ------------------------------------------------------------ fv */
#fv { background: url(../images/common/fv.jpg) no-repeat center center; background-size: cover; }
/* ------------------------------------------------------------ category_nav */
.category_nav { width: 1120px; margin: 50px auto 70px; }
.category_nav li { float: left; width: 160px; border-left: solid 1px #e5e5e5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; text-align: center; }
.category_nav li:first-child { border-left: none; }
.category_nav li a { display: block; font-size: 13px; padding: 5px 5%; }
.category_nav li span { display: block; font-family: 'Alte DIN 1451 Mittelschrift'; font-size: 20px; line-height: 100%; letter-spacing: 1px; } 
/* ------------------------------------------------------------ maagzine */
#magazine .article { width: 1400px; margin: 0 auto; }
#magazine .article li { background: #f6f6f6; float: left; width: 450px; margin: 0 0 60px 25px; }
#magazine .article li:nth-child(3n+1) { clear: both; margin: 0; }
#magazine .article li .photo { position: relative; }
#magazine .article li .photo img { width: 100%; height: auto; }
#magazine .article li .photo .magazine_category { position: absolute; left: 0; bottom: 0;}
#magazine .article li .textbox { background: #f6f6f6; padding: 25px 20px; }
#magazine .article li .textbox h3 { font-size: 22px; line-height: 34px; }
#magazine .article li .textbox .view_more { text-align: right; padding: 25px 0 0; text-decoration: underline; font-size: 16px; color: #063c5d; font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; }
/* ------------------------------------------------------------ pager */
#pager { text-align: center; font-size: 14px; padding: 30px 0 110px; }
#pager ul span,
#pager ul .number a { display: inline-block; *display: inline; *zoom: 1; font-family: 'Noto-Sans-JP-Light'; }
#pager ul span { background: #353535; color: #fff; line-height: 30px; width: 40px; padding: 5px 0;}
#pager ul .number a { background: #fff; color: #353535; border: 1px solid #353535; width: 38px; padding: 4px 0;}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
/* ------------------------------------------------------------ fv */
h2 { font-size: 12px; text-align: center; padding: 50px 0 0; letter-spacing: 2px; }
h2 span { font-size: 27px; line-height: 100%; letter-spacing: 2px; }
/* ------------------------------------------------------------ category_nav */
.category_nav { width: 90%; margin: 50px auto 70px; border-left: solid 1px #e5e5e5; border-top: solid 1px #e5e5e5; }
.category_nav li { width: 50%; border: none; border-right: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.category_nav li:first-child { }
.category_nav li:last-child { }
.category_nav li a { display: block; font-size: 12px; padding: 15px 5% 10px; }
.category_nav li span { font-size: 16px; line-height: 100%; letter-spacing: 1px; } 
/* ------------------------------------------------------------ maagzine */
#magazine .article { width: 90%; margin: 0 auto; }
#magazine .article li { float: none; width: 100%; margin: 0 auto 30px; }
#magazine .article li:nth-child(3n+1) { clear: both; margin: 0 auto 30px; }
#magazine .article li .photo { position: relative; }
#magazine .article li .photo img { width: 100%; height: auto; }
#magazine .article li .photo .magazine_category { position: absolute; left: 0; bottom: 0;}
#magazine .article li .textbox { background: #f6f6f6; padding: 25px 20px; }
#magazine .article li .textbox h3 { font-size: 16px; line-height: 27px; }
#magazine .article li .textbox .view_more { padding: 15px 0 0; font-size: 14px; }
/* ------------------------------------------------------------ pager */
#pager { padding: 30px 0 70px; }
}