@charset "utf-8";


#top .top_bg { background-image: url(../images/magazine/fv_bg.jpg) ; }

#magazine { }
#magazine .ymd { font-size: 16px; color: #7d7d7d; font-family: 'Montserrat';}
#magazine .genre { width: 90px; padding: 4px 0; font-size: 12px; font-family: 'NotoSansJP-Regular'; color: #fff; background: linear-gradient( 90deg, rgb(7,74,160) 0%, rgb(21,101,183) 99%); border-radius: 3px; text-align: center;}
#magazine .genre2 { width: 130px;}

#magazine .flex { margin: 0 auto; display: flex; justify-content: space-between;}

#magazine .flex_l { width: 710px;}

#magazine .flex_l h3.head_dir_title { text-align: center; font-size: 30px; color: #1565b7; font-family: 'NotoSansJP-Bold'; padding-bottom: 40px; }

#magazine .flex_l ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#magazine .flex_l li{ width: 320px; height: auto; margin-bottom: 50px;}
#magazine .flex_l li img { margin-bottom: 34px;}
#magazine .flex_l li .ymd { margin-bottom: 23px;}
#magazine .flex_l li h3 { font-size: 20px; font-family: 'NotoSansJP-Medium'; line-height: 1.7; margin-bottom: 23px;}
#magazine .flex_l .pagination { display: none;}

#magazine .flex_r{ width: 335px;}
#magazine .flex_r h3 { font-size: 30px; letter-spacing: 0.04em;}
#magazine .flex_r .pick_up { margin-bottom: 60px;}
#magazine .flex_r .pick_up h3 { margin-bottom: 27px;}
#magazine .flex_r .pick_up h3 img { margin-right: 13px; vertical-align: -3px;}

#magazine .flex_r .pick_up .link li{ margin-bottom: 30px;}
#magazine .flex_r .pick_up .link li a { display: flex; justify-content: space-between; height: 100px; }
#magazine .flex_r .pick_up .link li a .img { width: 150px; height: 100px;}
#magazine .flex_r .pick_up .link li a div { width: 161px;}
#magazine .flex_r .pick_up .link li a .ymd { margin-bottom: 10px;}
#magazine .flex_r .pick_up .link li a h4 { line-height: 1.5; margin-bottom: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

#magazine .flex_r .pick_up .link ul li a .pic{ width: 90px;}
#magazine .flex_r .pick_up .link ul li a .pic_two{ width: 130px;}

#magazine .flex_r .category h3 { margin-bottom: 21px;}
#magazine .flex_r .category h3 img { margin-right: 11px; vertical-align: -3px;}
#magazine .flex_r .category li{border-bottom: 1px solid #898989; background-color: #fff;}
#magazine .flex_r .category li:nth-child(1){border-top: 1px solid #898989;}
#magazine .flex_r .category li a{ display: block; font-size: 16px; padding: 20px 0; color: #003597; font-family: 'NotoSansJP-Medium'; background: url(../images/magazine/icn_03.png) no-repeat right center; background-size: 15px auto;}
#magazine .flex_r .category li a .icon{ width: 19px; }





/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	#top .top_bg { background-image: url(../images/magazine/fv_bg_sp.jpg) ; }
	
	
	#magazine .ymd { font-size: 12px;}
	#magazine .genre { width: 60px; padding: 3px 0; font-size: 10px;}
	#magazine .genre1 { width: 80px;}
	#magazine .genre2 { width: 110px;}
	
	#magazine .flex_l h3.head_dir_title { font-size: 20px; padding-bottom: 20px; }
	
	#magazine .flex { width: 100%; margin: 0 auto; display: block;}
	
	#magazine .flex_l { width: 100%; margin-bottom: 50px;}
	#magazine .flex_l ul { margin-bottom: 10px;}
	#magazine .flex_l li { width: 48%; height: 0 auto 25px; margin-bottom: 30px;}
	#magazine .flex_l li img { margin-bottom: 15px;}
	#magazine .flex_l li .ymd { margin-bottom: 12.5px;}
	#magazine .flex_l li h3 { font-size: 13px; line-height: 1.385; margin-bottom: 12.5px;}
	#magazine .flex_l .pagination { display: flex;}
	
	#magazine .flex_r { width: 100%;}
	#magazine .flex_r h3 { font-size: 22px;}
	#magazine .flex_r .pick_up { margin-bottom: 40px;}
	#magazine .flex_r .pick_up h3 { margin-bottom: 20px;}
	#magazine .flex_r .pick_up h3 img { width: 17px; height: auto; margin-right: 6px; vertical-align: -1px;}
	
	#magazine .flex_r .pick_up .link li { margin-bottom: 20px;}
	#magazine .flex_r .pick_up .link li a { }
	#magazine .flex_r .pick_up .link li a img { width: 150px; padding-right: 10px;}
	#magazine .flex_r .pick_up .link li a div { width: calc(100% - 150px - 10px);}
	#magazine .flex_r .pick_up .link li a .ymd { margin-bottom: 5px;}
	#magazine .flex_r .pick_up .link li a h4 { font-size: 12px; line-height: 1.417; margin-bottom: 7px; }
	
	#magazine .flex_r .category { }
	#magazine .flex_r .category h3 img { width: 16px; height: auto; margin-right: 6px; vertical-align: 0px;}
	
	
	#magazine .flex_r .category li a { padding: 15px 0; font-size: 15px;}
	
	
		
	#magazine .pagination.PC { display: none;}

	
}