@charset "utf-8";
/* ------------------------------------------------------------ index */

* {
    box-sizing: content-box;
}

header *,
footer * {
    box-sizing: border-box;
}

#main {
	padding: 0;
}

#bread { background: #f7f7f7;}
#fv h2 { background: url(../images/magazine/bg_01.png) center bottom no-repeat; }
#body { padding: 45px 0 0;}


p.top span { padding: 1px 10px; display: inline-block; *display: inline; *zoom: 1; margin: 0 10px 0 0; background: #b183e9; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
p.top span a { color: #fff; }
#magazine { padding: 50px 0 0;}
#magazine ul { width: 750px; padding: 30px 0 0;}
#magazine ul li { padding: 0 15px 20px 0;}

#studios { background: #fff; padding: 80px 0 55px;}
#studios h3.title { color: #20b1d5; background: url(../images/magazine/h_02.png) left 5px no-repeat; padding: 10px 0 5px 210px;}
#studios .studio-detail { padding: 30px 0 40px; width: 754px;}
#studios .studio-detail li div { background: #f9f6e9;}

#pager { text-align: center; font-size: 14px; margin: 0 auto; padding: 30px 0 70px;}
#pager ul { width: 90%; margin: 0 auto;}
#pager ul li { padding: 0; float: left; width: 50%; height: 25px;}
#pager ul li.first { width: 16%; min-width: 16%; text-align: right;}
#pager ul li.last { width: 24%; min-width: 24%; text-align: left; color: #b183e9;}
#pager ul li span,
#pager ul li a { margin: 0 5px; width: 40px; height: 40px; line-height: 40px; color: #b183e9; display: inline-block; *display: inline; *zoom: 1; background: #f1f1f1;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}
#pager ul li.first a,
#pager ul li.last a { margin: 0 25px; text-align: center; }
#pager ul li span,
#pager ul li a:hover,
#pager ul li.last a { background: #b183e9; color: #fff;}


#aside form { padding: 0 0 30px;}
#aside form input[type="text"] { background: #f7f7f7; width: 225px; height: 25px; padding: 3px 10px; font-size: 14px;}
#aside form input[type="submit"] { background: url(../images/magazine/icn_02.gif) no-repeat 10px center #6c6c75; color: #fff; width: 70px; padding: 7px 3px 7px 20px; font-size: 14px; box-sizing: border-box;}
#aside h3 { font-size: 16px; color: #fff; background: #6c6c75; text-align: center; padding: 5px 0;}
#aside ol li { list-style-type: none;}
#aside ol,
#aside ul { padding: 20px 0 0;}
#aside ol li,
#aside ul li { padding: 10px 0; border-bottom: 1px solid #d1d1d1;}
#aside ol li p.first { padding: 30px 5px 0 0; float: left; width: 40px;}
#aside ol li p.number { float: left; width: 40px; font-size: 14px; color:#909090; text-align: center; padding: 30px 5px 0 0;}
#aside ol li img,
#aside ul li img { float: left; padding: 0 10px 0 0;}
#aside ol li div,
#aside ul li div { float: left; }
#aside ol li div { width: 185px;}
#aside ul li div { width: 200px; }
#aside ol li div span,
#aside ul li div span { font-size: 10px; color: #979797; font-weight: bold;}
#aside ol li div p a,
#aside ul li div p a { font-size: 12px; font-weight: bold;}
#aside p.more { text-align: center; padding: 20px 0;}
#aside p.more a { font-size: 16px; font-weight: bold; }
#aside #ranking,
#aside #pickup,
#aside #category { padding: 0 0 45px;}
#aside #category ul li { padding: 20px 0;}
#aside #category ul li a { font-size: 16px;}

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

#article p.top { color: #000;}
#article p.top span { color: #fff;}
#article #blogbody h4 { font-size: 22px; border-top: 1px solid #111; border-bottom: 1px solid #111; padding: 10px 0; /* margin: 90px 0 35px; */}
/* #article #blogbody img { padding: 0 0 50px;} */
#article #blogbody p { font-size: 16px; color: #696969; line-height: 200%;}

#recommend { padding: 75px 0;}
#recommend h3 { font-size: 20px; padding: 0 0 10px;}
#recommend ul { border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; padding: 20px 0;}
#recommend ul li a { font-size: 14px; line-height: 200%;}

#sns-btn { padding: 0 0 50px;}
#sns-btn li { display: inline-block; *display: inline; *zoom: 1; }
#sns-btn li.fb { padding: 0 25px 0 0;}
#sns-btn li p.s-btn a { font-size: 14px; height: 55px; line-height: 55px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;}
#sns-btn li.fb p.s-btn a { background: url(../images/magazine/f-icn.gif) 80px center no-repeat #3a5a98;}
#sns-btn li.twitter p.s-btn a { background: url(../images/magazine/t-icn.gif) 70px center no-repeat #04b1ee;}
#sns-btn li p.info { font-size: 14px; padding: 5px 0 0;}
#sns-btn li p.info a { color: #0488ee;}
#sns { text-align: center; padding: 0 0 50px;}
#sns li { display: inline-block; *display: inline; *zoom: 1; }

p.s-btn a { background: url(../images/index/arw_02.gif) 280px center no-repeat #b183e9;}

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


#fv h2 { background: url(../images/magazine/bg_01_.png) center bottom no-repeat; background-size: 223px 36px;}
#fv h2 img { width: 280px; height: auto;}
#main { float: none; width: 100%;}
#aside { float: none; width: 100%;}

#magazine ul { width: 100%;}
#magazine ul li { padding: 0 0 10px; width: 48%; float: left; margin: 0 1%;}
#magazine ul li #contents { width: 94%; padding: 20px 3% 30px;}
#magazine ul li img { width: 100%; height: auto;}
#magazine ul li #contents { height: 250px;}
#magazine ul li #contents div p { float: none; margin: 0 0 8px;}
#magazine ul li #contents div span { float: none; font-size: 12px;}
#magazine ul li #contents h4 { padding: 10px 0;}

p.s-btn a { background: url(../images/index/arw_02_.gif) 95% center no-repeat #b183e9; background-size: 10px auto;}

#studios { padding: 40px 0 55px;}
#studios .studio-detail { width: 100%;}

#aside { padding: 0 0 50px;}
#aside ol li div { width: 55%;}
#aside ul li div { width: 65%;}
#aside ol li img.first { width: 11%; height: auto;}
#aside ul li img { width: 30%; height: auto;}
#aside form { text-align: center;}
#aside form input[type="text"] { width: 207px;}
#aside form input[type="submit"] { background: url(../images/magazine/icn_02_.gif) no-repeat 10px center #6c6c75; background-size: 11px 14px;}
#aside h3 { font-size: 16px; color: #fff; background: #6c6c75; text-align: center; padding: 5px 0;}
#aside ol,
#aside ul { padding: 0;}
#aside #category { padding: 0 0 45px;}

#pager ul li { width: 60%; margin: 0 auto;}
#pager ul li.first { width: 10%; min-width: 10%;}
#pager ul li.last { width: 20%; min-width: 20%;}
#pager ul li span,
#pager ul li a { margin: 0 1%; width: 30px; height: 30px; line-height: 30px;}
#pager ul li.first a,
#pager ul li.last a { margin: 0 10%; }
#pager ul li span,
#pager ul li a:hover,
#pager ul li.last a { background: #b183e9; color: #fff;}

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

#studios h3.title { background: url(../images/index/h_03.gif) center top no-repeat; background-size: 193px 26px; font-size: 16px; text-align: center; padding: 30px 0px 5px 0px;}

#sns-btn li { display: block; }
#sns-btn li.fb { padding: 0 0 10px;}
#sns-btn li.fb p.s-btn a { background: url(../images/magazine/f-icn_.gif) 80px center no-repeat #3a5a98; background-size: 25px 25px;}
#sns-btn li.twitter p.s-btn a { background: url(../images/magazine/t-icn_.gif) 70px center no-repeat #04b1ee; background-size: 30px 26px;}
#sns-btn li p.info { text-align: center;}

#sns img { width: 100%; height: auto;}



}