@charset "utf-8";
#fv { background: url(../images2/magazine/fv_bg.jpg) center center no-repeat; background-size: 1496px; color: #fff;}
#fv h2 span { line-height: 130%; }
#fv p { padding: 10px 0 0;}

.flex{display: flex;}
#magazine{padding: 57px 0 157px;}
#magazine .select_box{ display: flex; justify-content: space-between; width: 810px; margin: 0 auto;}
#magazine .select_box .slider_box{display: inline-block; width: 630px; overflow-x: scroll;}
#magazine .select_box .slider_box .select{ }
#magazine .select_box .choice{font-size: 16px; color: #fff; text-align: center; padding: 16px 0; line-height: 160%; background: linear-gradient( 35deg, #00A7E0 , #4461B1, #00AE7C); clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%); width: 173px; font-family: 'Noto Sans Japanese medium';display: inline-block;}
#magazine .select_box .select_btn{display: inline-block; height: auto; text-align: center; margin: 0 0 0 74px; font-family: 'Noto Sans Japanese medium'; line-height: 150%;position: relative; padding: 7px 0;}
#magazine .select_box .thumb-hover.select_btn:before{content: ""; display: block; width: 100%; height: 1px; border-bottom: 1px solid #000; bottom: 0px; left: 0px; position: absolute;}
#magazine .select_box .select_btn input { display: none;}
#magazine .select_box .select_btn span { position: relative;}
#magazine .select_box .select_btn input[name="cats[]"]:checked + span:before { position: absolute; bottom: -9px; left: 0px; content: ""; display: block; width: 100%; height: 1px; border-bottom: 1px solid #000; }

#magazine ul.content_box{padding: 59px 0 0; flex-wrap: wrap;}
#magazine ul.content_box li{width: 333px; height: auto; margin-bottom: 62px;}
#magazine ul.content_box li:not(:nth-child(3n)){margin-right: 50px;}
#magazine ul.content_box li.empty { margin: 0 auto; text-align: center;}
#magazine ul.content_box li a{display: block;}
#magazine ul.content_box li .text_box{padding: 21px 0 0; justify-content: space-between; align-items: center;}
#magazine ul.content_box li .text_box p.text{font-size: 17px; font-family: 'Noto Sans Japanese medium'; padding: 0 0 28px; border-bottom: 1px solid #DEDEDE;}
#magazine ul.content_box li .text_box p.tag{padding: 14px 0 0;}
#magazine ul.content_box li .text_box p.tag .tag_2{border-radius: 100px; border: 2px solid #707070; font-family: 'Noto Sans Japanese medium'; font-size: 14px; text-align: center; padding: 6px 23px 7px; margin: 0px 20px 0px 0; line-height: 143%;}
#magazine ul.content_box li .text_box p.tag .deta{font-size: 14px; line-height: 143%; float: right;padding: 6px 0 0;font-family: 'Noto Sans Japanese medium';}

#magazine .list_btn_box{justify-content: center; padding: 67px 0 0;}
#magazine .list_btn_box .list_btn{width: 51px; height: auto; border: 1px solid #000; text-align: center; padding: 12px 0; line-height: 150%; color: #000; background: #fff;font-family: 'Noto Sans Japanese medium'; font-size: 18px;}
#magazine .list_btn_box .list_btn.active{background: #000; color: #fff;}
#magazine .list_btn_box .list_btn:not(:last-child){margin: 0 16px 0 0;}
@media only screen and (max-width:640px){
	#magazine img{width: 100%; height: auto;}
	#fv {background: url(../images2/magazine/fv_bg_sp.jpg) center center no-repeat;  background-size: 100%; }
	#fv h2 span { line-height: 130%; }
	#fv p { padding: 10px 0 0;}
	
	.flex{display: flex;}
	#magazine{padding: 30px 0 70px;}
	#magazine .select_box{width: 100%; }
	#magazine .select_box .slider_box {width: calc(100% - 120px); overflow-x: scroll; position: relative; top: 7px;}
	#magazine .select_box .slider_box .select{ width: 370px;}
	#magazine .select_box .choice{padding: 10px 0; font-size: 14px; width: 99px; margin: 0 15px 0 0;}
	#magazine .select_box .select_btn{ margin:0px; padding: 0; font-size: 14px; width: auto;}
	#magazine .select_box .select_btn:not(:last-child){ margin-right: 10px;}
	#magazine .select_box .select_btn input[name="cats[]"]:checked + span:before { bottom: -2px; left: 0px; }

	#magazine ul.content_box{padding: 26px 0 0;}
	#magazine ul.content_box li{width: 48%; height: auto; margin-bottom: 27px;}
	#magazine ul.content_box li:not(:nth-child(3n)){margin-right: 0;}
	#magazine ul.content_box li:not(:nth-child(2n)){margin-right: 4%;}
	#magazine ul.content_box li .text_box{padding: 15px 0 0; justify-content: space-between; align-items: center;}
	#magazine ul.content_box li .text_box p.text{font-size: 14px; padding: 0 0 15px;line-height: 150%; }
	#magazine ul.content_box li .text_box p.tag{padding: 15px 0 0; align-items: center; justify-content: space-between;}
	#magazine ul.content_box li .text_box p.tag .deta{font-size: 12px; padding: 3px 0 0;}
	#magazine ul.content_box li .text_box p.tag .tag_2{margin: 0 10px 0 0; font-size: 12px;padding: 3px 14px 4px;}
	
	
	#magazine .list_btn_box{justify-content: center; padding: 7px 0 0;}
	#magazine .list_btn_box .list_btn{width: 36px; padding: 7px 0 8px; font-size: 14px;}
	#magazine .list_btn_box .list_btn:not(:last-child){margin: 0 13px 0 0;}

}