@charset "utf-8";

.clearfix:after{
	 content: "."; 
	 display: block; 
	 height: 0; 
	 font-size:0;	
	 clear: both; 
	 visibility:hidden;
}
span.title{
	color:yellow;
	}
.organic{
	text-align:center;
}
.organic p{
	padding:10px 0;
}
.case_ba{
	font-size:18px;
	font-weight:bold;
	width:100%;
	color:#000000;
	margin:20px auto 40px;
	text-align:center;
	padding:20px 0;
	background:yellow;
	
}

h2{
	font-size:28px;
	text-align:left;
	margin-bottom:30px;
	
}
h3{
	font-size:20px;
	color:yellow;
	text-align:left;
	
}
h4{
	font-size:20px;
	text-align:left;
	padding-left:10px;
	border-left:4px solid yellow;
	margin:50px 0 10px 0

}
.text_area{
	width:90%;
	margin:0 auto;
	padding:20px;
	line-height:30px;
	border:1px solid rgba(255,255,255,0.2);
}

.left_img img{
	    width:100%;
}
div#banner .left{
	display:inline;
	float:left;
	width:47%;
}
div#banner .right{
	display:inline;
	float:right;
	width:47%;
}
div.banner{
	width:47%;
	background-color:#fff;
	text-align:center;
}
div.banner p{
	padding:0;
}
div.banner p img{
	width:100%;
}
div.banner p.text{
	padding:10px 0;
}

.organic p.eventia_img{
	padding:0;
	margin:0 auto;
	width:100%;
}
.eventia2{
	width:100%;
	margin:0 auto;
	padding:10px 0;
	background:url("/images/eventia_b2_m.png");
	background-size:contain;
}
.eventia2 p{
	padding-left:20px;
	margin:20px 50px;
	font-size:16px;
	line-height:25px;
	border-bottom: 1px solid #3bc6ff;
	border-left: 10px solid #3bc6ff;
	text-align:left;
}
span.y_b{	  
	color:#fcd806;
	font-size:20px;
}
.eventia3{
	margin:30px 0;
	background-color:#000;
}
.eventia3 .left{
	height:350px;
	float:left;
	width:10%;
	margin-left:10%;
	border-right: 20px solid #fff;

}
.eventia3 .right{
	float:right;
	width:70%;
}

.eventia3 p.e_title{
	font-size:25px;
	text-align:right;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  }
.eventia3 dl{
	text-align:left;
	font-size:16px;
	line-height:20px;
}
.eventia3 dl dt{
	font-size:18px;
	margin-top:20px;
}

div.eventia_img{
	width:100%;
	margin:30px auto;
}



@media screen and (min-width: 769px){
    .left_img{
	    display:inline;
	    float:left;
	    width:60%;
    }
    .right_text{
	    display:inline;
	    float:right;
	    width:35%;
	    text-align:left;
    }

.organic_img2{
	width:100%;
}
div#con div.organic p.organic_img2 img{
	width:100%;
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/

@media screen and (max-width: 768px){
.text_area{
    .left_img{
	    width:100%;
    }


.organic_img2{
	width:100%;
}
}
/*===============================================
画面の横幅が640pxまで
===============================================*/

@media screen and (max-width:640px){
	.left_img{
	    width:100%;
    }
	
}