@charset "utf-8";

/* ------------------------------------------------------------  */

#fv { background: url(../images/contact/fv.jpg) center top no-repeat; background-size: cover;}
p.cat { font-size: 16px; color: #969696; font-family: 'Lora-Regular'; }
p.cat span { color: #fff; background: #00245e; display: inline-block; *display: inline; *zoom: 1; padding: 0 10px; margin: 0 20px 0 0; font-size: 14px;} 
p.cat small { font-size: 16px;}

/* ------------------------------------------------------------  */

#main { float: left; width: 720px; padding: 25px 0 40px; }
ul.article { margin: 0 0 0 -40px; }
ul.article li { width: 340px; margin: 0 0 50px 40px; float: left; height: 320px;}
ul.article li img { width: 100%; height: auto; }
ul.article li p.cat span { float: right; text-transform: uppercase; }
#main ul.article li:first-child { width: 720px; height: auto; position: relative; text-align: left; margin: 0 0 70px 40px; float: none;}
#main ul.article li:first-child .bot { background: url(../images/blog/bg_01.png) repeat; color: #fff; position: absolute; bottom: 0; width: 720px; padding: 30px 15px 30px; box-sizing: border-box; }
#main ul.article li:first-child .bot p.cat { color: #fff;}
#main ul.article li:first-child .bot p.cat span { float: none;}
ul.article li h4 { font-size: 18px; color: #000; font-weight: bold; padding: 5px 0 0; height: 68px; }
#main ul.article li:first-child .bot h4 { font-size: 18px; padding: 5px 0 0; font-weight: bold; color: #fff; height: auto;}
ul.article li div { padding: 20px 0;}

/* ------------------------------------------------------------  */

#aside { width: 315px; float: right; padding: 15px 0 0; }
#aside h4 { margin: 0 0 20px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; border-left: 4px solid #fff100; padding: 0 0 0 20px;}
#aside h4 span { display: block; font-size: 40px; font-family: 'Lora-Regular'; line-height: 100%;}
#aside .pickup { padding: 10px 0 0; }
#aside ul li { padding: 30px 0; border-top: 1px solid #d1d1d1; }
#aside ul li .left { width: 123px; overflow: hidden; float: left; }
#aside ul li .right { width: 160px; float: right; padding: 10px 0 0;}
#aside ul li:first-child { border-top: none; }
#aside ul li h5 { font-weight: bold;}
#aside ul li p.cat span { margin: 0; display: inline-block; *display: inline; *zoom: 1; text-transform: uppercase;  }
#aside .ranking { padding: 60px 0 0; }
#aside .ranking ul li .left { position: relative; }
#aside .ranking ul li .left span { position: absolute; display: block; background: #00245e; font-size: 20px; color: #fff; bottom: 0; left: 0; width: 25px; line-height: 25px; text-align: center; font-family: 'Lora-Regular'; } 

#aside .category { padding: 60px 0 0; }
#aside .category h5 { font-size: 16px; font-weight: bold; float: left; width: 200px;}
#aside .category ul li { padding: 15px 0;}
#aside .category ul li span { float: right; font-size: 14px; color: #959595; border: 1px solid #eeeeee; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; width: 80px; text-align: center;}
#aside .category ul li { border-top: none; border-bottom: 1px solid #e5e5e5;}
#aside .category ul li a { text-transform: uppercase; }
#aside .category ul li:first-child { border-top: 1px solid #e5e5e5;}


/* ------------------------------------------------------------ pager */

#main #pager 				{ text-align: center; padding: 40px 0; font-size: 14px; }
#main #pager ul li:first-child { text-align: center;}
#main #pager ul span,
#main #pager ul .number a { display: inline-block; *display: inline; *zoom: 1; width: 33px; padding: 5px 0; margin: 3px; }
#main #pager ul span 		{ background: #000; color: #fff; }
#main #pager ul .number a { background: #fff; color: #000; border: 1px solid #000; }

/* ------------------------------------------------------------ detail */

#bread.detail { padding: 20px 0 20px; background: #f1f6f9;}
#main.detail,
#aside.detail { padding: 55px 0 130px;}
#main.detail p.cat span { margin: 0 10px 0 0;}
#main.detail #title_block h3 { font-size: 28px; font-weight: bold; padding: 10px 0 15px; letter-spacing: 2px;}
#main.detail img.photo { padding: 0 0 70px;}
#main.detail #blogbody p { line-height: 29px; padding: 0 0 70px;}
#main.detail #blogbody figure { margin: auto; }
#main.detail #blogbody img.photo { width: 100%; height: auto; padding: 0; margin: 10px 0; }
#main.detail #blogbody h4 { font-size: 24px; font-weight: bold; padding: 10px 0 20px; }
#main.detail #blogbody a.button02 { text-decoration: underline; color: #0000EE; }
#main.detail #blogbody .photo_box { padding: 0 0 20px;}
#main.detail #blogbody .photo_box p { background: url(../images/blog/detail/dot.gif) left center no-repeat; padding: 0 0 0 20px; font-weight: bold; margin: 20px 0 0;}
#main.detail #blogbody #recommend { padding: 140px 0 40px;}
#main.detail #blogbody #recommend h5 { font-size: 16px; font-weight: bold; padding: 0 0 10px; border-bottom: 1px solid #e5e5e5; margin: 0 0 20px;}
#main.detail #blogbody #recommend ul li { margin: 0 0 10px;}
#main.detail #blogbody #recommend ul li a { font-weight: bold;}
#main.detail #blogbody #iine { border: 1px solid #cccccc; margin: 0 0 40px;}
#main.detail #blogbody #iine img.photo_mini { float: left;}
#main.detail #blogbody #iine div { float: left; width: 405px; text-align: center; padding: 75px 0 0;}
#main.detail #blogbody #iine div p { padding: 0 0 30px;}
#main.detail #blogbody #sns img { width: 239px; height: auto;}
#main.detail #blogbody #sns a.facebook { margin: 0 1px;}

#magazine-detail { padding: 100px 0 0 0 ; }

#related { text-align: center; padding: 85px 0 130px; border-top: 1px solid #e5e5e5;}
#related h3.h3 { font-size: 14px;}
#related h3.h3 span { font-size: 30px;}
#related ul.article li { text-align: left;}
#related ul.article li:first-child { width: 340px;}
#related ul.article li:first-child img { width: 340px; height: auto;}
#related a.btn { color: #000; border: 1px solid #000; width: 250px; height: 60px; line-height: 60px;}


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

#fv { background: url(../images/contact/fv.jpg) center top no-repeat; background-size: cover;}
p.cat { font-size: 14px; }
p.cat span { display: inline-block; *display: inline; *zoom: 1; padding: 0 5px; margin: 0; font-size: 12px;} 
p.cat small { font-size: 14px; display: block;}

/* ------------------------------------------------------------  */

#main { float: none; width: 100%; padding: 25px 0 20px; }
ul.article { margin: 0; }
ul.article li { width: 100%; margin: 0 0 15px; float: none; height: inherit;}
ul.article li p.cat span { float: none;}
ul.article li img { float: left; width: 45%; height: auto;}
ul.article li div { float: left; width: 52%; margin: 0 0 0 3%; padding: 5px 0;}
#main ul.article li:first-child { width: 100%; height: auto; position: relative; text-align: left; margin: 0 0 30px;}
#main ul.article li:first-child img { float: none; width: 100%;}
#main ul.article li:first-child .bot { background: url(../images/blog/bg_01.png) repeat; color: #fff; position: absolute; bottom: 0; width: 100%; padding: 10px 3%; box-sizing: border-box; -webkit-box-sizing: border-box; float: none; left: 0; right: 0; margin: 0 auto;}
#main ul.article li:first-child .bot h4 { font-size: 14px; padding: 5px 0 0; font-weight: bold; color: #fff; line-height: 130%;}
#main ul.article li:first-child .bot p.cat span { margin: 0 10px 0 0;}
#main ul.article li:first-child .bot p.cat small { display: inline;}
ul.article li h4 { font-size: 14px; color: #000; font-weight: bold; padding: 10px 0 0; line-height: 130%;}

#pager				{ padding: 30px 0 0; }
#pager ul			{ width: auto; margin: 0; }
#pager ul li		{ width: auto; margin: 0; float: none; padding: 0; }
#pager ul li:first-child { width: auto; position: static; text-align: center; }

/* ------------------------------------------------------------  */

#aside { width: 100%; float: none; padding: 20px 0 40px; }
#aside h4 { margin: 0 0 10px; border-left: 4px solid #fff100; padding: 0 0 0 20px;}
#aside h4 span { display: block; font-size: 30px; line-height: 100%;}
#aside .pickup { padding: 10px 0 0; }
#aside ul li { padding: 15px 0; border-top: 1px solid #d1d1d1; }
#aside ul li .left { width: 45%; overflow: hidden; float: left; }
#aside ul li .left img { width: 100%; height: auto;}
#aside ul li .right { width: 52%; float: left; padding: 0; margin: 0 0 0 3%;}
#aside ul li:first-child { border-top: none; }
#aside ul li h5 { font-weight: bold; font-size: 14px; padding: 10px 0 0;}
#aside ul li p.cat span { margin: 0; display: inline-block; *display: inline; *zoom: 1;}
#aside .ranking { padding: 60px 0 0; }
#aside .ranking ul li .left { position: relative; }
#aside .ranking ul li .left span { position: absolute; display: block; background: #00245e; font-size: 20px; color: #fff; bottom: 0; left: 0; width: 25px; line-height: 25px; text-align: center; font-family: 'Lora-Regular'; } 

#aside .category { padding: 60px 0 0; }
#aside .category h5 { font-size: 16px; font-weight: bold; float: left; width: 200px;}
#aside .category ul { margin: 30px 0 0;}
#aside .category ul li { padding: 15px 0;}
#aside .category ul li span { float: right; font-size: 14px; color: #959595; border: 1px solid #eeeeee; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; width: 80px; text-align: center;}
#aside .category ul li { border-top: none; border-bottom: 1px solid #e5e5e5;}
#aside .category ul li:first-child { border-top: 1px solid #e5e5e5;}


/* ------------------------------------------------------------ detail */

#bread.detail { padding: 75px 0 20px;}
#main.detail,
#aside.detail { padding: 35px 0 60px;}
#main.detail p.cat span { margin: 0 10px 0 0;}
#main.detail #title_block h3 { font-size: 20px; font-weight: bold; padding: 20px 0; letter-spacing: 2px; line-height: 130%;}
#main.detail img.photo { padding: 0 0 30px; width: 100%; height: auto;}
#main.detail #blogbody p { padding: 0 0 30px;}
#main.detail #blogbody .photo_box { padding: 0 0 10px;}
#main.detail #blogbody .photo_box img { width: 100%; height: auto;}
#main.detail #blogbody .photo_box p { background: url(../images/blog/detail/dot.gif) left center no-repeat; padding: 0 0 0 20px; font-weight: bold; margin: 20px 0 0;}
#main.detail #blogbody #recommend { padding: 70px 0 20px;}
#main.detail #blogbody #recommend h5 { font-size: 14px; font-weight: bold; padding: 0 0 10px; border-bottom: 1px solid #e5e5e5; margin: 0 0 20px;}
#main.detail #blogbody #recommend ul li { margin: 0 0 10px;}
#main.detail #blogbody #recommend ul li a { font-weight: bold;}
#main.detail #blogbody #iine { border: 1px solid #cccccc; margin: 0 0 20px;}
#main.detail #blogbody #iine img.photo_mini { float: none; width: 100%; height: auto;}
#main.detail #blogbody #iine div { float: none; width: 92%; text-align: center; padding: 35px 4%;}
#main.detail #blogbody #iine div p { padding: 0 0 15px;}
#main.detail #blogbody #sns img.SP { width: 33%; height: auto; display: inline;}
#magazine-detail { padding: 10px 0 0 0 ; }


#related { text-align: center; padding: 85px 0 130px; border-top: 1px solid #e5e5e5;}
#related h3.h3 { font-size: 14px;}
#related h3.h3 span { font-size: 30px;}
#related ul.article li { text-align: left; width: 270px; margin: 0 17px; float: left;}
#related ul.article li:first-child { width: 270px; float: left;}
#related ul.article li:first-child img { width: 100%; height: auto;}
#related ul.article li img { float: none; width: 100%;}
#related ul.article li div { float: none; width: 100%;}
#related a.btn { color: #000; border: 1px solid #000; width: 250px; height: 60px; line-height: 60px;}
#related .slick-prev { content:''; background:url(../images/index/arw_left.png) center center no-repeat; left : -8px; z-index: 2; background-size: 12px auto; top: 120px;} 
#related .slick-next { content:''; background:url(../images/index/arw_right.png) center center no-repeat; right: -8px; z-index: 2; background-size: 12px auto; top: 120px;}



}