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

#fv { background: url(../images/magazine/fv.jpg) center top no-repeat; background-size: cover; padding: 126px 0 0;}

#magazine_wrap { background: url(../images/magazine/bg_01.gif); color: #fff;}
#magazine_wrap #bread ol li a { color: #fff;}
#main { float: left; width: 740px;}
#aside { float: right; width: 300px;}

#magazine_wrap ul#main_magazine { margin: 70px 0 0 -60px; overflow: hidden;}
#magazine_wrap ul#main_magazine li a { display: block; color: #fff; font-family: 'Lato', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, sans-serif;}
#magazine_wrap ul#main_magazine li { float: left; width: 340px !important; margin: 0 0 0 60px; padding: 30px 0 0;}
#magazine_wrap ul#main_magazine li:nth-child(odd) { clear: both; }
#magazine_wrap ul#main_magazine li .photo { position: relative;}
#magazine_wrap ul#main_magazine li .photo span { font-size: 14px; border: 1px solid #fff; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 10px  5px; font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; position: absolute; top: -30px; left: 20px;}
#magazine_wrap ul#main_magazine li .text { padding: 25px 0; font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; font-size: 20px;}
#magazine_wrap ul#main_magazine li .text span { font-size: 15px; letter-spacing: .1em; color: #434343; text-align: right; margin: 30px 0 0; float: right; background: url(../images/index/line.svg) left center no-repeat; padding: 0 0 0 30px;} 
.no-svg #magazine_wrap ul#main_magazine li .text span { background: url(../images/index/line.png) left center no-repeat; } 

#aside .box { padding: 25px 0 110px; border-top: 1px solid #a0a0a0; font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}
#aside .box h3 { letter-spacing: 2px; font-size: 14px; padding: 0 0 35px;}
#aside .box h3 span { font-size: 30px; margin: 0 15px 0 0; letter-spacing: 4px;}
#aside .box > a { display: block; color: #fff;}
#aside .box dl { margin: 0 0 15px;}
#aside .box dl dt { float: left; width: 245px;}
#aside .box dl dt span { padding: 0 10px 0 0;}
#aside .box dl dd span { font-size: 14px; border: 1px solid #fff; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; display: inline-block; *display: inline; *zoom: 1; padding: 0 10px;}
#aside .box ul li { border-bottom: 1px solid #313131; padding: 25px 0;}
#aside .box ul li a { color: #fff;}
#aside .box h4 { font-size: 14px; padding: 10px 0 0;}
#aside .box p.cat_date { font-size: 14px;}
#aside .box p.cat_date span { color: #434343; font-size: 13px; border-left: 1px solid #fff; padding: 3px 0 3px 15px; margin: 0 0 0 15px;}
#aside .box table { width: 100%;}
#aside .box table tr th,
#aside .box table tr td { border-bottom: 1px solid #313131; padding: 15px 0 0;}
#aside .box table tr th { width: 25px; font-size: 26px; text-align: left; vertical-align: top; padding: 15px 10px 0 0;}
#aside .box table tr td { padding: 25px 0 25px;}
#aside .box table tr td a { color: #fff;}


/* ------------------------------------------------------------ pager */
#pagenav { position: relative; text-align: center; max-width: 380px; margin: 0 auto;}
#pagenav a:hover { 
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
-moz-opacity:0.7;
-khtml-opacity: 0.7; }

#pagenav .arrow_back a,
#pagenav .arrow_next a { display: inline-block; *display: inline; *zoom: 1; width: 35px; line-height: 23px; position: absolute; top: 60px; color: #fff; font-size: 23px;}
#pagenav .arrow_back a { left: 0; }
#pagenav .arrow_next a { right: 0; }

#pager 		{ padding: 50px 0; font-size: 16px; }
#pager a,
#pager span { display: inline-block; *display: inline; *zoom: 1; width: 27px; border: 1px solid #fff; margin: 3px 8px; padding: 2px; }
#pager a 	{ color: #fff;}

/* ------------------------------------------------------------ mobile */
@media screen and (max-width:640px){
	
#fv { background: url(../images/magazine/fv.jpg) center top no-repeat; background-size: cover; padding: 38px 0 0;}

#magazine_wrap { background: url(../images/magazine/bg_01.gif); color: #fff;}
#magazine_wrap #bread ol li a { color: #fff;}
#main { float: none; width: 100%;}
#aside { float: none; width: 100%;}

#magazine_wrap ul#main_magazine { margin: 30px 0; overflow: hidden;}
#magazine_wrap ul#main_magazine li { float: none; width: 100% !important; margin: 0 0 15px; padding: 30px 0 0;}
#magazine_wrap ul#main_magazine li .photo { position: relative;}
#magazine_wrap ul#main_magazine li .photo img { width: 100%; height: auto;}
#magazine_wrap ul#main_magazine li .photo span { font-size: 12px; padding: 10px  5px; top: -30px; left: 20px;}
#magazine_wrap ul#main_magazine li .text { padding: 15px 0; font-size: 14px;}
#magazine_wrap ul#main_magazine li .text span { font-size: 13px; margin: 15px 0 0; background: url(../images/index/line.svg) left center no-repeat; padding: 0 0 0 30px;} 
.no-svg #magazine_wrap ul#main_magazine li .text span { background: url(../images/index/line.png) left center no-repeat;} 

#aside .box { padding: 15px 0 40px; border-top: 1px solid #a0a0a0;}
#aside .box h3 { letter-spacing: 1px; font-size: 12px; padding: 0 0 15px;}
#aside .box h3 span { font-size: 22px; margin: 0 10px 0 0; letter-spacing: 2px;}
#aside .box dl { margin: 0 0 15px;}
#aside .box dl dt { float: left; width: 80%;}
#aside .box dl dt span { padding: 0 3% 0 0;}
#aside .box dl dd { text-align: right;}
#aside .box dl dd span { font-size: 12px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 0 10px;}
#aside .box ul li { border-bottom: 1px solid #313131; padding: 15px 0;}
#aside .box h4 { font-size: 12px; padding: 10px 0 0;}
#aside .box p.cat_date { font-size: 12px;}
#aside .box p.cat_date span { color: #434343; font-size: 11px; border-left: 1px solid #fff; padding: 3px 0 3px 15px; margin: 0 0 0 15px;}
#aside .box table { width: 100%;}
#aside .box table tr th,
#aside .box table tr td { border-bottom: 1px solid #313131; padding: 15px 0 0;}
#aside .box table tr th { width: 25px; font-size: 20px; text-align: left; vertical-align: top; padding: 15px 10px 0 0;}
#aside .box table tr td { padding: 25px 0 25px;}


}