@charset "utf-8";
.left{
	display:inline;
	float:left;
}
.text_img2{
	padding-right:20px;
}
h2{
	text-align:center;
	font-size:24px;
	margin:40px auto 20px;
	padding-top:40px;
	border-top:1px dotted yellow;
}
.flow_t{
	text-align:center;
}
	.message{
	    line-height:  24px;
	}
	h3{
		color:yellow;
		font-size:16px;
		text-align:center;
		width:100%;
	}
	h4{
		font-size:15px;
		font-weight:bold;
		padding:20px 0;
	}
	.text_img{
		width:100%;
		text-align:center;
		padding:10px 0;
	}
	.text_img img{
		width:100%;
		text-align:center;
		padding:10px 0;
	}
	div.ex_text div.banner{
		display:inline;
		float:left;
		background-color:#fff;
		text-align:center;
		margin:15px;
	}
	div.ex_text div.banner p img{
		width:300px;
	}	
	div.ex_text div.banner p.text{
		padding:10px 0;
	}
	div#con div.message table.writing_table{
		margin:40px auto;
		border-left:1px solid #fff;
		border-top:1px solid #fff;
	}
	div#con div.message table.writing_table th,
	div#con div.message table.writing_table td{
		border-right:1px solid #fff;
		border-bottom:1px solid #fff;
		padding:10px 5px;
	}

	div.other_text{
		padding-bottom:60px;
	}
	div.other_text div.banner{
		display:inline;
		float:left;
		width:30%;
		background-color:#fff;
		text-align:center;
		margin:10px 1.5%;
	}
	div.other_text div.banner p img{
		width:100%;
	}	
	div.other_text div.banner p.text{
		padding:10px 0;
	}

@media screen and (min-width: 769px){	}

/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/

@media screen and (max-width: 768px){
	div#con{
		position:relative;
		width:600px;
		margin:100px auto 200px;
		opacity: 0.9;
		background-color:#33827E;
		//-moz-transform: rotate(-3deg);
		//-webkit-transform: rotate(-3deg);
		//-o-transform: rotate(-3deg);
		//-ms-transform: rotate(-3deg);
	}
	body.organic div#con{
		border:1px solid #33827E;
		background-color:#fff;
		transform:none;
	}
	div#con div.wrap{
		position:relative;
		top:-10px;
		border:1px solid #33827E;
		//-moz-transform: rotate(4deg);
		//-webkit-transform: rotate(4deg);
		//-o-transform: rotate(4deg);
		//-ms-transform: rotate(4deg);	
	}
	div#con div.organic_wrap{
		opacity: 0.9;
		background-color:#33827E;
		transform:none;
	}
	div#title{
		width:400px;
		padding:40px 0;
		position:absolute;
		top:-70px;
		left:20px;
		//-moz-transform: rotate(-4deg);
		//-webkit-transform: rotate(-4deg);
		//-o-transform: rotate(-4deg);
		//-ms-transform: rotate(-4deg);
	}
	div#con div.organic_wrap div#title{
		//-moz-transform: rotate(-0deg);
		//-webkit-transform: rotate(-0deg);
		//-o-transform: rotate(-0deg);
		//-ms-transform: rotate(-0deg);
	}
	div#title .logo{
		float:left;
		margin-right:5px;
	}
	div#title .title{
		float:left;
		width:240px;
		padding:16px 20px;
		color:#ffffff;
		background-color:#4D4D4D;
	}
	div#title .title p.bf{
		font-size:33px;
		margin-bottom:15px;
	}
	div#title .title p.sf{
		font-size:20px;
	}
	div#con div.message,
	div#con div.works,
	div#con div table{
		width:400px;
		margin:100px auto;
		color:#ffffff;
		//-moz-transform: rotate(-3deg);
		//-webkit-transform: rotate(-3deg);
		//-o-transform: rotate(-3deg);
		//-ms-transform: rotate(-3deg);
	}
	div#con div table{
		width:400px;
		margin:100px auto;
		color:#ffffff;
	}
	div#con div .company th{
		font-size:20px;
		width:120px;
		font-weight:bold;
		padding:20px 10px;
	}
	div#con div .company td{
		font-size:18px;
		padding:20px 10px;
	}


	div#con div .mp th{
		font-size:20px;
		width:30px;
		font-weight:bold;
		padding:10px 5px;
	}
	div#con div .mp td{
		font-size:18px;
		padding:10px 5px;
	}
	
		
	
	div#con div.message{
	}
	div#con div.message p.yama{
		width:300px;
		margin:0 auto 20px;;
	}
	div#con div.message p.yama img{
		width:300px;
	}
	div#con div.message p.message{
		float:left;
		font-size:14px;
		width:400px;
		margin:10px 0 0 10px;
	}
	div#con div.message p.message span.name{
		font-size:16px;
		font-weight:bold;
		padding:20px 0 0 300px;
	}

	/* organic */
	div#con div.organic{
		width:400px;
		margin:100px auto;
		color:#ffffff;	
	}
	div#con div.organic p.organic_img img{
		width:400px;
		text-align:center;
	}	
	div#con div.organic p.organic_img2 img{
		width:400px;
		margin:0 auto;
		text-align:center;
	}
	div#con div.organic p.s_title{
		margin:40px auto 10px;
		text-align:center;
		font-size:16px;
		font-weight:bold;
		color:#FF0;
	}
	div#con div.organic p.text{
		margin-top:10px;
	}
	div#con div.organic p.end{
		margin-bottom:50px;
	}	
	
	
	
	div.home{
		position:absolute;
		bottom:-130px;
		right:20px;
		width:220px;
		height:220px;
		-webkit-border-radius:50%;/* width,heightの半分 */
		-moz-border-radius:50%;
		border-radius:50%;
		background-color: #1C3E3D;
	}
	div.home p{
		position:relative;
		bottom:10px;
		right:10px;
		padding:60px;
		width:100px;
		height:100px;
		display:block;
		text-align:center;
		-webkit-border-radius:50%;/* width,heightの半分 */
		-moz-border-radius:50%;
		border-radius:50%;
		background-color: #fff;
	}
	div.home p span.big{
		font-size:40px;
	}
	div.home p:hover{
		background-color:#53BCB9;
		color:yellow;
	}
		div.history{
		margin:70px;
		border-left:1px dotted #fff;
	}
	div.history p{
		font-size:16px;
	}
	div.history p.date{
		position:relative;
		left:-7px;
		font-weight:bold;
		margin-bottom:10px;
		color: #FF0;
	}
	div.history p.text{
		padding-left:35px;
		margin-bottom:70px;	
	}
}
/*===============================================
画面の横幅が640pxまで
===============================================*/

@media screen and (max-width:640px){
	div#con{
		position:relative;
		width:95%;
		margin:60px auto 20px;
		padding:20px 0;
		opacity:0.9;
		background-color:#fff;
		border:1px solid #33827E;
		transform:none;

	}
	div#con div.wrap{
		width:95%;
		margin:10px auto;
		position:relative;
		background-color:#33827E;
		transform:none;
	
	}
	div#title{
		width:80%;
		height:86px;
		position:absolute;
		top:-100px;
		left:0px;
		transform:none;

	}
	div#title .logo{
		float:left;
		margin-right:5px;
	}
	div#title .logo img{
		width:90px;
	}
	div#title .title{
		float:left;
		width:50%;
		height:86px;
		padding:0 5px;
		color:#ffffff;
		background-color:#4D4D4D;
	}
	div#title .title p.bf{
		font-size:20px;
		padding-top:10px;
		margin-bottom:5px;
	}
	div#title .title p.sf{
		font-size:14px;
	}

	div#con div.message,
	div#con div.works,
	div#con div.organic,
	div#con div.wrap table{
		width:95%;
		margin:80px auto;
		color:#ffffff;
		transform:none;
	}
	div#con div .company th{
		font-size:14px;
		width:32%;
		font-weight:bold;
		padding:10px 5px;
	}
	div#con div .company td{
		font-size:14px;
		padding:10px 5px;
	}
	

	div#con div .mp th{
		font-size:14px;
		width:7%;
		font-weight:bold;
		padding:10px 5px;
	}
	div#con div .mp td{
		font-size:14px;
		padding:10px 5px;
	}
	
	
		
	div#con div.message{
		width:80%;
	}
	div#con div.message p.yama{
		width:100%;
		text-align:center;
	}
	div#con div.message p.yama img{
		width:90%;
	}
	div#con div.message p.message{
		float:left;
		font-size:14px;
		width:100%;
		margin:10px 0 0 10px;
	}
	div#con div.message p.message span.name{
		font-size:16px;
		font-weight:bold;
		padding:20px 0 0 30px;
	}	
	
	
	/* organic */
	div#con div.organic{
		width:90%;
	}
	div#con div.organic p.organic_img img{
		width:100%;
	}	
	div#con div.organic p.organic_img2 img{
		width:100%;
	}
	div#con div.organic p.s_title{
		margin:20px auto 10px;
		text-align:center;
		font-size:16px;
		font-weight:bold;
		color:#FF0;
	}
	div#con div.organic p.text{
		margin-top:10px;
	}


	div.home{
		position:absolute;
		bottom:-60px;
		right:0px;
		width:120px;
		height:120px;
		-webkit-border-radius:50%;/* width,heightの半分 */
		-moz-border-radius:50%;
		border-radius:50%;
		background-color: #1C3E3D;
	}
	div.home p{
		position:relative;
		bottom:5px;
		right:5px;
		padding:15px;
		width:90px;
		height:90px;
		display:block;
		text-align:center;
		-webkit-border-radius:50%;/* width,heightの半分 */
		-moz-border-radius:50%;
		border-radius:50%;
		background-color: #fff;
	}
	div.home p span.big{
		font-size:30px;
	}
	div.home p:hover{
		background-color:#53BCB9;
		color:yellow;
	}
		div.history{
		margin:70px;
		border-left:1px dotted #fff;
	}
	div.history p{
		font-size:14px;
	}
	div.history p.date{
		position:relative;
		left:-7px;
		font-weight:bold;
		margin-bottom:10px;
		color: #FF0;
	}
	div.history p.text{
		padding-left:35px;
		margin-bottom:40px;	
	}

}

#footer{
	text-align:center;
	color:#fff;
	padding:20px 0;
	background-color:#33827E;
}

a:link,
a:visited,
a:active{
	text-decoration:none;
	color:#000;
}

.clearfix:after{
	 content: "."; 
	 display: block; 
	 height: 0; 
	 font-size:0;	
	 clear: both; 
	 visibility:hidden;
}