@charset "utf-8";
/* CSS Document */


@keyframes tabAnim{
	
  0%{opacity:0;}
  100%{opacity:1;}

}


.tab_wrap{
	
	width:100%; 
	margin:30px auto;
	background:#fff;
	
	
	}

input[type="radio"]{
	
	display:none;
	
	}

.tab_area{
	
	font-size:0; 
	margin:0 auto;
	width:100%;
	text-align:center;
	
	
	}

.tab_area label{
	
	width:10%; 
	margin:0 auto; 
	display:inline-block; 
	padding:12px 0; 
	color:#999;
	background:#fff; 
	text-align:center; 
	font-size:13px; 
	cursor:pointer; 
	transition:ease 0.2s opacity;
		 
	 }
	 
.tab_area label:hover{
	
	opacity:0.5;
	
	}

.tab_panel{
	
	width:100%; 
	opacity:0; 
	padding:80px 0; 
	display:none;
	
	}
	
.tab_panel p{
	
	font-size:14px; 
	letter-spacing:1px; 
	text-align:center;
	
	}

.panel_area{　/*コンテンツ*/
	
	background:#ccc;
	width:100%;
	
	}

#tab1:checked ~ .tab_area .tab1_label{
	
	background:#fff;
	color:#000;
	border-bottom:#369 2px solid; 
	
	 }
	 
#tab1:checked ~ .panel_area #panel1{
	
	display:block; 
	animation:tabAnim ease 0.6s forwards; 
	-ms-animation:tabAnim ease 0.6s forwards;
	
	}


#tab2:checked ~ .tab_area .tab2_label{
	
	background:#fff; 
	color:#000;
	border-bottom:#369 2px solid;
	
	}
	
#tab2:checked ~ .panel_area #panel2{
	
	display:block; 
	animation:tabAnim ease 0.6s forwards; 
	-ms-animation:tabAnim ease 0.6s forwards;
	
	}


#tab3:checked ~ .tab_area .tab3_label{
	
	background:#fff; 
	color:#000;
	border-bottom:#369 2px solid;
	
	}
	
#tab3:checked ~ .panel_area #panel3{
	
	display:block; 
	animation:tabAnim ease 0.6s forwards; 
	-ms-animation:tabAnim ease 0.6s forwards;
	
	}
	
	
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

@media screen and (min-width:320px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
.lf-snap {
width:46%;
margin:5px;
float:left;
text-align:center;
}

#topics_article{

 color:#333;
 letter-spacing:2px;
 font-family:'Century Gothic','Futura','Optima','Yu Gothic UI','Impact',sans-serif;
 font-weight:450;
 font-size:0.9em; 
}


}

@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/


/*.allmight { width:24%; margin:0;}
*/}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/

.lf-snap { 
width:25%;
margin:0 auto;
float:left;
text-align:center;


}


#topics_article{

 color:#333;
 letter-spacing:2px;
 font-family:'Century Gothic','Futura','Optima','Yu Gothic UI','Impact',sans-serif;
 font-weight:450;
 font-size:12px; 
}

}

.conts_wrap {
margin:10px auto;
width:90%;
margin-bottom:1%;
padding:0 0 0 2%;
list-style:none;
}
