@charset "utf-8";

/*=============================================================
CD = 20150710
LD = 20150713
===============================================================
Editor:
1.
2.
3.
===============================================================
Content:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
============================================================ */

/*1. html ===================================================*/
body {
	line-height: 1.8em;
}

body a{ color:#ab4c3d; text-decoration:none ;}

body a:hover { text-decoration: underline;}

/*2. box ===================================================*/
.ui_container2 {
	padding: 0% 10%;
}

/**#footer {
	background-color: rgba(73,134,94,0.39);
}
**/

/*image_size ===================================================*/
.ui_width100 {
	height: auto;
	width: 100%;
}
.ui_width100_chart {
	height: auto;
	width: 100%;
}

.ui_width90 {
	display: block;
	height: auto;
	margin: auto auto;
	text-align: center;
	width: 90%;
}

.ui_width_cv {
	height: auto;
	width: 300px;
	border: 8px solid #fff;
}

#thumbnail_about li { 
position:relative;
float: left; 
margin: 1% 2% 1% 0px;
list-style-type: none;
display: inline;
width:31%; 
z-index:1000; }

#thumbnail_about01 li { 
position:relative;
float: left; 
margin: 1% 2% 1% 0px;
list-style-type: none;
display: inline;
width:48%; 
z-index:1000; }

#thumbnail_report li { 
position:relative;
float: left; 
margin: 1% 12% 1% 0px;
list-style-type: none;
display: inline;
width:20%; 
z-index:1000;
min-height:350px;
 }
 
#thumbnail_report li img:hover{ opacity: 0.80;
    filter: alpha(opacity=80);}


#thumbnail_about:after, #thumbnail_about01:after, #thumbnail_report:after {
	content: "";
	clear: both;
	display: block;
}

#thumbnail_about li img, #thumbnail_about01 li img , #thumbnail_report li img{ 
width:100%;}

#thumbnail_report li img {
border: 1px solid #C7C7C7;}

#thumbnail_about, #thumbnail_about01, #thumbnail_report{
		padding-left: 0px;
	}
	
.ui_width50 {
	height: auto;
	width: 55%;
}
.ui_width40 {
	height: auto;
	width: 30%;
	border:1px solid #D1CECE;
}

#album_area { width:55% }

/*5. content =============================================*/
#content .ui_container {
	width: 95%;
	padding: 20px 0px;
}
.ui_heading_root {
	border-top: 8px #ED6955 solid;
	font-weight: 100;
	font-size: 2.3em;
}
.ui_heading_root:after {
	background-color: #ED6955;
	background-image: url(../images/icon_home_about.png);
}

h3 {
	
	font-size: 1.2em;
	border-bottom: 1px #999 solid;
	margin-bottom: -15px;

}
.ui_background {
	background-color: #F8E7E6;
	position: relative;
}
.ui_background2 {
	background-color: #FAEEED;
	position: relative;
}
.ui_background3 {
	background-color: #EEF3F7;
	background-image:url(../images/bkgd_pattern02.png);
	position: relative;
}

.ui_background4 {
	background-color: #F8E7E6;
	background-image:url(../images/bkgd_pattern01.png);
	position: relative;
}

.ui_background5 {
	background-color: #fff;
	background-image:url(../images/bkgd_pattern_a.png);
	position: relative;
}
.ui_boardlist li {
	float: left;
	/*max-width: 400px;
	width: 60%;*/
	/*max-width: 430px;*/
	width: 50%;
	position: relative;
	
}
.ui_boardlist li:last-child {
	float: right;
	/*max-width: 400px;
	width: 40%;*/
	/*max-width: 430px;*/
	width: 50%;
	
}
.ui_under_arrow:after {
	content: url(../images/bg_arrow.png);
	position: absolute;
	top: 99%;
	left: 50%;
	margin-left: -41px;
}

.pdf img {
	border: 1px #ccc solid;
}


/*@media only screen and (max-width:960px) {
	.ui_boardlist li {
		width: 55%;
	}
	.ui_boardlist li:last-child {
		width: 45%;
	}
}*/
@media only screen and (max-width:880px) {
	.ui_boardlist li {
		display: block;
		float: inherit;
		margin: 30px auto 30px auto;
		/*width: 70%;*/
		width: 100%;
	}
	.ui_boardlist li:last-child {
		display: block;
		float: inherit;
		/*width: 70%;*/
		width: 100%;
	}
	
	.list > li { width: 40%; margin-top:4%;}
	.ui_width50 {
		height: auto;	width: 100%;}
	.ui_width40 {
		height: auto;	width: 55%;}
	

	
	#thumbnail_about  li { width:48%; }
	#thumbnail_report  li { width:39%; margin: 1% 11% 1% 0px; min-height:430px;}
	

	
	#album_area { width:70% }
	
	.ui_width100_chart { display:none;}
}
	
}

@media only screen and (max-width:760px) {
	#album_area { width:85% }

}
@media only screen and (max-width:600px) {
	.list > li { width: 87%; margin-top:4%;}
	#thumbnail_about li, #thumbnail_about01 {
		margin: 2% 0%;
		width: 100%;}
		
	#thumbnail_report li {
		margin: 3% 15%;
		width: 70%;		}
	#album_area { width:100% }
	


}

@media only screen and (max-width:400px) {
.ui_width_cv {
	height: auto;
	width: 240px;
}
.ui_width40 {
		height: auto;	width: 80%;}

#thumbnail_report li {
		margin: 4% 15%; width: 70%;	
		min-height:inherit;	}
}


/*6. footer =============================================*/

/*#footer {
	background-color: inherit;
}*/
#footerNAV1 li a {
	background-image: url(../images/icon_about_footer_eshop.png);
	color: rgba(171, 76, 61, 1.00);
}
#footerNAV1 li:nth-child(2) a {
	background-image: url(../images/icon_about_footer_joineco.png);
}
#footerNAV1 li:nth-child(3) a {
	background-image: url(../images/icon_about_footer_joincou.png);
}
#footerNAV1 li:nth-child(4) a {
	background-image: url(../images/icon_about_footer_support.png);
}
#footerNAV1 li:nth-child(5) a {
	background-image: url(../images/icon_about_footer_contact.png);
}

/* . share ==============================================*/
.ui_boardlist:after {
	content: "";
	clear: both;
	display: block;
}

/* list

=================== ken news list ====================*/

.list > li {

	border: 1px #C5C0C0 solid;
	display: inline-block;
	position: relative;
	/*width: 230px;
	padding: 20px;
	margin-bottom: 40px;*/
	width: 24%;
	padding: 2%;
	margin-bottom: 5%;
	margin-left:4%;
	vertical-align: top;
	z-index: 10;
	min-height:345px;
	
}

.list > li a { color:#333;}
.list > li a:hover { color:#D20000;}
.list img {width:100%; height:auto;}


 
 

 

	