@charset "utf-8";

body{	
	width:100%;
	margin:0;
	padding:0;
	background:url(/images/bg.png) no-repeat;
	background-position:center;
}
span.title{
		color:yellow;
	}
span.red{
	color:red;
}
#doganic .text{
	line-height: 24px;
	text-align:left;
}
@media screen and (min-width: 769px){

	div#con{
		position:relative;
		width:1000px;
		margin:160px auto 30px;
		opacity: 0.9;
		background-color:#33827E;
		//-moz-transform: rotate(-3deg);
		//-webkit-transform: rotate(-3deg);
		//-o-transform: rotate(-3deg);
		//-ms-transform: rotate(-3deg);
	}
	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);	
	}
	#con div#title{
		width:600px;
		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#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.organic,
	div#con div table{
		width:700px;
		margin:120px auto;
		color:#ffffff;
		//-moz-transform: rotate(-4deg);
		//-webkit-transform: rotate(-4deg);
		//-o-transform: rotate(-4deg);
		//-ms-transform: rotate(-4deg);
	}
	
	
	/* company */	
	div#con div .company th{
		font-size:20px;
		font-weight:bold;
		padding:20px 10px;
	}
	div#con div .company td{
		font-size:18px;
		padding:20px 10px;
	}


	/* table */	
	div#con div table.mp th{
		font-size:20px;
		font-weight:bold;
		padding:20px 10px;	
	}
	div#con div .mp td{
		font-size:18px;
		padding:20px 10px;
	}
	
	/* message */	
	div#con div.message{}
	div#con div.message p.yama{
		float:left;
	}
	div#con div.message p.yama img{
		width:280px;
	}
	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 p.organic_img img{
		width:500px;
		text-align:center;
	}	
	div#con div.organic p.organic_img2 img{
		width:600px;
		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:-30px;
		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:5px;
		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{
		margin-bottom:70px;
		padding-left:35px;	
	}
	div#title .title p.font_change{
		font-size:30px;
	}
}

/*===============================================
●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;	
	}
	div#title .title p.font_change{
		font-size:12px;
	}


}

#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;
}
#title p{
	padding:0;
}