@charset "utf-8";
/* CSS Document */

/* main visual
---------------------------------------------------------- */
.main-v { 
	position: relative;
	text-align:center;
}
.main-v .container{ 
	text-align:center;
	width:100%;
	}
@media screen and (min-width: 1100px) {
	.main-v .container{ 
		width:1100px;
	}
}
	.main-info01  {
		position: relative; 
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}
	.main-info02{ 
		position: relative; 
		color: #ffdf29; 
		padding:10px 10px; 
		text-shadow: 1px 1px 2px #000;
		text-align:center;
	}
@media screen and (min-width: 768px) {
	.main-v { 
		min-height:400px;
		margin-bottom:50px;
	}
	body#top{
     	background:url(../img/maining_top.png) center 0 no-repeat;
	}
	.main-info01  {
		margin-top: 100px;
	}
	.main-info-pc {
		display:inline-block;
	}
	.main-info-xs{
		display:none;
	}
	.main-info02{ 
		margin-top:40px;
	}
}
@media screen and (max-width: 767px) {
	.main-v { 
		min-height:565px;
		margin-bottom:50px;
	}
	#header-main{
     	background:url(../img/maining_top_sp.png) center 0 no-repeat;
		background-size:100%;
	}
	.main-info01  {
		margin-top: 230px;
	}
	.main-info-pc {
		display:none;
	}
	.main-info-xs{
		display:inline-block;
		width:80%;
	}
	.main-info02{ 
		margin-top:100px;
		margin-bottom:100px;
	}
}
@media screen and (max-width: 767px) and (min-width: 480px) {
	.main-info01  {
		margin-top: 115px;
	}
	.main-info-pc {
		display:none;
	}
	.main-info-xs{
		display:inline-block;
		width:70%;
	}
	.main-info02{ 
		margin-top:50px;
		margin-bottom:50px;
	}
}
@media screen and (max-width: 479px) and (min-width: 320px) {
	.main-info01  {
		margin-top: 115px;
	}
	.main-info-pc {
		display:none;
	}
	.main-info-xs{
		display:inline-block;
		width:80%;
	}
	.main-info02{ 
		margin-top:50px;
		margin-bottom:50px;
	}
}
@media screen and (max-width: 319px) {
	.main-v { 
		min-height:370px;
		margin-bottom:50px;
	}
	.main-info01  {
		margin-top: 65px;
	}
	.main-info-pc {
		display:none;
	}
	.main-info-xs{
		display:inline-block;
		width:80%;
	}
	.main-info02{ 
		margin-top:50px;
		margin-bottom:20px;
	}
}
/* contents width
---------------------------------------------------------- */

#top .wrap div{ 
	position:relative; 
	max-width: 900px; 
	text-align:center;
	margin-left:auto;
	margin-right:auto; 
}
/* company
---------------------------------------------------------- */
#top .company{
	margin-top:60px;
}
/* producer
---------------------------------------------------------- */

/* common
---------------------------------------------------------- */

@media screen and (min-width: 768px) {
	#top a:hover img{
		text-decoration:none;
		filter:alpha(opacity=80);
		opacity: 0.8;
	}
}
#top .company h2,
#top .producer h2,
#top .products h2{
	font-weight:900;
	font-size:24px;
	letter-spacing:0.2em;
	margin:35px auto 10px;
}
#top .company h2 a,
#top .producer h2 a,
#top .products h2 a{
	text-decoration:none;
	padding-bottom:5px;
	border-bottom:2px solid #808080;
}
#top .company h2 a:hover,
#top .producer h2 a:hover,
#top .products h2 a:hover{
	border-bottom:2px solid #29aaa3;
}
#top .about p.lead{
	font-size:24px;
	font-weight:400;
	line-height:2;
	letter-spacing:0.15em;
}
#top .company p,
#top .producer p,
#top .products p{
	padding-top:10px;
	font-size:18px;
	font-weight:300;
	line-height:1.6;
	letter-spacing:0.2em;
}

#top .col-sm-8,
#top .col-sm-4{
	padding-right: 5px;
    padding-left: 5px;
}

.company h2,
.company p,
.products h2,
.products p{
	text-align:right;
}
.producer h2,
.producer p{
	text-align:left;
}

@media screen and (max-width: 767px) {
#top .about h2{
	font-weight:900;
	font-size:18px;
	letter-spacing:0.2em;
	margin-bottom:33px;
}
#top .company h2,
#top .producer h2,
#top .products h2{
	font-weight:900;
	font-size:18px;
	letter-spacing:0.2em;
	margin:0 auto 20px;
	text-align:center;
}
#top .about p.lead{
   	font-size:18px;
	font-weight:400;
	line-height:1.8;
	letter-spacing:0.17em;
	margin-bottom:37px;
}
#top .about .link-btn{
   	margin:0 auto 6px;
	text-align:center;
}
#top .company p,
#top .producer p,
#top .products p{
	padding-top:0;
	font-size:14px;
	font-weight:400;
	line-height:1.7;
	letter-spacing:0.2em;
	text-align:center;
}
#top .col-sm-8,
#top .col-sm-4{
	padding:0;
}
#top .wrap .row img,
#top .producer p img{
	width:80%;
}
#top footer .row p#yaocity img{
		width:40%; !important
}
#top section{
    margin-bottom:44px;
}
#top section.news{
    margin-bottom:25px;
}
}
/* company
---------------------------------------------------------- */
#top .company{
	margin-top:60px;
}
/* news
---------------------------------------------------------- */

div#news-block dd{
	padding: 14px 0.5em 3px 150px;
	margin:0;
	vertical-align:middle;
	background:url(../img/dotline.gif) 0 bottom repeat-x; 
}
.news dl{
	margin: 10px 20px 1.5em 0;
	padding-top:0;
	border-top: 1px dotted #999;
	text-align:left;
}
.news dt{
	width:88px;
	height:66px;
	vertical-align:text-top;
	padding: 20px 20px 20px 20px;
	margin-right:10px;
  	clear: left;
 	float: left;
}
.news dt a{
	display:block;
	width:88px;
	height:66px;
	margin-top:-10px;
	vertical-align:middle;
	text-align:center;
}
.news dt img{
	vertical-align:middle;
	max-height:60px;
	overflow:hidden;
}
.news dd{
	padding: 20px 20px 20px 130px;
	margin: 0;
	vertical-align:middle;
	border-bottom: 1px dotted #999;
	font-size:14px;
	font-weight:700;
	letter-spacing:0.15em;
}
.news dd .news-date{
	font-size:12px;
	font-weight:400;
	letter-spacing:0.15em;
	margin-bottom:0;
}
.news dd p{
	margin-bottom:0;
}
.news-photo {
	margin:50px auto 40px;
}
@media screen and (max-width: 767px) {
	.news dt{
		width:50px;
		height:35px;
		padding: 10px 20px 10px 10px;
	}
	.news dt a{
		margin-top:0;
		width:50px;
		height:35px;
		text-align:center;
	}
	.news dt img{
	vertical-align:middle;
	max-height:35px;
	overflow:hidden;
	}
	.news dd{
		padding: 10px 10px 10px 70px;
		font-size:12px;
		font-weight:400;
		letter-spacing:0.15em;
		line-height:1.3;
	}
	.news dd .news-date{
		font-size:9px;
		font-weight:400;
		letter-spacing:0.15em;
		margin-bottom:0;
	}
	.news .link-btn{
		display:none;
	}
}

/* top info spe
-----------------------------------------------------------------*/
#top .wrap div.top_info_spe {
    width: 90%;
    background-color: #ffee83;
    text-align: left;
    margin:0 auto 60px;
    font-weight: bold;
    font-size: 120%;
    border: solid 3px #66beb4;
}
.top_info_spe p.info_label {display: inline;}
.top_info_spe p.info_label span{background-color: #66beb4; padding: 2px 6px 4px;color: #fff;}
.top_info_spe p.info_cont {margin: -10px 3% 15px 120px;}

@media screen and (max-width: 767px) {
.top_info_spe p.info_cont {margin: 10px 3% 15px 15px;}

}