@charset "utf-8";

/*共通設定*/
#contents{
	background:#fff;
	font-family: Times New Roman,"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}
h1 img{
	float:left;
	margin:-10px 0 0 20px;
}
a{text-decoration:none;}
sub{line-height:1em;margin-right:1px;}
.clearfix{
	clear:both;
	overflow:hidden;
}
.mb60{margin-bottom:60px;}

.imgCaption{
	margin-top:5px;
	font-size:70%;
	text-align:center;
}

.pagetop{margin-bottom:20px;}
.pagetop a:hover{text-decoration:none;}
/*拡大縮小時にパンくずリストの表示が崩れる問題に対応*/
#topicpath ul.steadfast li span, #topicpath ul.steadfast li a {
	overflow:visible;
}

/**********************************
トップページ　body class="yuiTop"
***********************************/
.yuiTop #contents{
	background:#e5e5e5;
}
.yuiTop .bg-alt{
	background:#fff;
	overflow:hidden;
}
#navi{
	float:right;
	margin-bottom:40px;
}
#navi a.btns{
	width:150px;
	text-align:center;
	background-color: #f3f3f3;
	font-size: 13px;
	line-height: 40px;
	display:block;
	color: #0c754e;
	text-decoration: none;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
#navi ul.child a.btns{
	border:none;
	background:rgba(243,243,243,0.85);
	width:149px;
}
#navi a.btns.narrow{font-size:12px;}
#navi a.btns.exnarrow{line-height:20px;}
#navi a.btns:hover{background-color: #f5d5a1;}
#navi ul.child a.btns:hover{background-color: rgba(245,213,161,0.85);}
#navi a.btns.current{background-color: #f5d5a1;}
ul#navi li{
	float: left;
	position: relative;
	margin: 0;
	display: block;
}
ul.child{
	display: none;
	position: absolute;
	z-index:100;
}

/*flexsliderカスタマイズ*/
.flexslider{
	visibility: hidden;
	border:none;
	background:none;
	width:950px;
	height:243px;
	margin-bottom:40px;
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}


.flex-direction-nav a{color:#fff;}

.yuiTop h2{
	font-size:17px;
	text-align:center;
	line-height:1.6em;
	margin-bottom:40px;
}
#contentsMap{
	width:950px;
	height:685px;
	position:relative;
	background:url(/csr/yui/img/contentsmap.jpg);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	margin-bottom:40px;
}
#contentsMap h3 img{
	position:relative;
	top:30px;
	left:40px;
}

#contentsMap .icons{
	position:absolute;
	text-align:center;
	width:160px;
	height: 115px;
	transition:-webkit-transform,-moz-transform,-o-transform, -ms-transform,transform ease 0.4s;
	background:url(/csr/yui/img/circle-bg.png) no-repeat;
}
#contentsMap #office,
#contentsMap #kaunet{
	height: 135px;
}

#contentsMap .icons:hover{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	background-position:-160px 0;
}
#contentsMap .icons a{text-decoration:none;}
#contentsMap .icons p{color:#fff;}
#contentsMap .circle{
	width:85px;
	height:85px;
	padding-top:5px;
	margin:0 auto 5px;
}
#contentsMap .icons a p.invert-color{
	color:#626262;
	text-shadow:0 0 25px #edf8ff,
		0 0 20px #edf8ff,
		0 0 0.40px #edf8ff;
}
#contentsMap #project{top:140px;left:110px;}
#contentsMap #profile{top:250px;left:280px;}
#contentsMap #thinning{top:140px;left:440px;}
#contentsMap #flora{top:335px;left:5px;}
#contentsMap #water{top:450px;left:280px;}
#contentsMap #lumber{top:140px;left:760px;}
#contentsMap #kaunet{top:530px;left:760px;}
#contentsMap #office{top:250px;left:600px;}
#contentsMap #case{top:450px;left:600px;}
#contentsMap #join{top:530px;left:440px;}
#contentsMap #shimanto{top:530px;left:110px;}

/*tooltipの設定*/

.tooltip-east,.tooltip-west{
	display:none;
	background:url(/csr/yui/img/tip-east.png) no-repeat;
	padding:15px;
	width:150px;
	height:30px;
	position:relative;
	top: -100px;
	left: 80%;
	text-align: left;
}
.tooltip-west{
	background:url(/csr/yui/img/tip-west.png) no-repeat;
	left: -92%;
	top: -94px;
}
.tooltip-west.two-lines{
	top: -117px;
}

#contentsMap div.icons .tooltip-east p{
	margin-left:15px;
	color:#000;
	font-size:80%;
}
#contentsMap div.icons .tooltip-west p{
	margin-right:15px;
	color:#000;
	font-size:80%;
}


#info{
	padding-top:20px;
	margin-top:-20px;
	padding-bottom: 30px;
	overflow: hidden;
}
#info h3{
	margin:0 0 30px 30px;
}
#left-part{
	float:left;
	width:50%;
}
.fb-like-box{
	float:right;
	background:#fff;
}

#info #left-part .news{
	background:#fefef7;
	height:290px;
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	padding:0 20px 0 30px;
	margin-bottom:20px;
}
#info #left-part .news h4{
	font-size:20px;
	padding:20px 0 15px 0;
	float:left;
}
#info #left-part .news h3 a{text-decoration:underline;}
#info #left-part .news .seeAll span{
	display: inline-block;
	padding: 3px 8px 4px 20px;
	background-image: url(/cmn/img/arrow_01.png);
	background-repeat: no-repeat;
	background-position: 8px 0.8em;
	text-decoration: none;
	border: 1px solid #ffffff;
}
#info #left-part .news .seeAll a{
	display: inline-block;
	border: 1px solid #cccccc;
	float:right;
	margin-top:20px;
}
#info #left-part .news .seeAll a:link{
	color: #333333;
	background-color: #ffffff;
	text-decoration: none;
}
#info #left-part .news .seeAll a:hover{
	color: #333333;
	background-color: #cccccc;
}
#info #left-part .news .text h3{
	margin:0 0 15px 0;
}
#info #left-part .news .text p{
	width:260px;
	font-size:90%;
	float:left;
}
#info #left-part .news .text .read-report{
	position: relative;
	top: 136px;
	left: 8px;
}
#info #left-part .news .image{
	position: relative;
	top: -29px;
	left: 10px;
}
#info #left-part .news .image a img{
	width:155px;
}
#info #left-part .news .text{
	clear:both;
}

#info #left-part .channel{
	background:#fefef7;
	height:290px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	padding:0 20px;
}
#info #left-part .channel h4{
	font-size:16px;
	padding:25px 0 15px 0;
	float:left;
}
#info #left-part .channel a img{
	float:right;
	padding-top:20px;
}
#info #left-part .channel #movie1,
#info #left-part .channel #movie2{
	float:left;
	width:200px;
	margin:10px 0 0 12px;
}
#info #left-part .channel dl dt{
	text-align:center;
	margin:10px 0 5px 0;
	font-weight:bold;
}
#info #left-part .channel dl dd{
	font-size:70%;
}


/**********************************
中ページ共通　div class="insidePages"
***********************************/
.insidePages h2{margin-bottom:20px;}
.insidePages ul.links{
	margin-bottom: 30px;
	overflow: hidden;
}
.insidePages ul.links li{
	border-bottom:solid 2px #e4f152;
	display:block;
	float:left;
	margin-right:15px;
}
.insidePages .links a:before{
	content:url(/csr/yui/img/cmn/leaf.png);
	margin-right: 3px;
}
.insidePages h3{
	margin-bottom: 60px;
}
.insidePages h4{
	width:800px;
	margin:0 auto 60px;
}
.insidePages h5{
	font-size: 18px;
	background: url(/csr/yui/img/cmn/green.gif) 0px 0px no-repeat;
	padding: 3px 0px 30px 40px;
	margin-left: 40px;
	margin-bottom:60px;
	display: block;
	width: 236px;
	float: left;
}
.insidePages p.txt,
.insidePages .col1of1.txt p,
.insidePages .col1of2.txt p,
.insidePages .col1of3.txt p,
.insidePages .col2of3.txt p{text-align:left;}
.insidePages .img{text-align:center;}
.insidePages .col1of1{
	text-align:center;
	margin-bottom:60px;
}
.insidePages .col1of3{
	width:316px;
	float:left;
	margin-bottom:60px;
	text-align:center;
}
.insidePages .col1of3.img{float:right;}
.insidePages .col2of3{
	width:572px;
	float:left;
	margin-bottom:60px;
	padding:0 30px;
}
.insidePages .col1of2{
	width: 440px;
	float: left;
	margin-bottom: 60px;
	padding-left: 35px;
}
.insidePages .col1of2 p,
.insidePages .col2of3 p{
	margin-bottom:20px;
}

.insidePages p.heading1{
	font-size:18px;
	background:#f5f0e8;
	padding:3px 0 3px 40px;
	margin-bottom:60px;
}
.insidePages p.heading2{
	color: #444;
	font-size:16px;
	margin-bottom:25px;
}
.insidePages p.centering{
	margin:20px 0;
	text-align:center;
}
.insidePages p.caption{
	margin-top:10px;
	font-size:85%;
}

/**********************************
プロジェクト　body class="yuiProject"
***********************************/
.yuiProject #circulation p{
	font-size:20px;
	color:#c4925f;
	margin-top:20px;
	margin-bottom:25px;
}
.yuiProject #circulation dl dt{
	font-size:16px;
	line-height:20px;
	margin-bottom:5px;
}
.yuiProject #circulation dl dd{
	margin-bottom:20px;
	margin-left:28px;
}

/**********************************
生物多様性の保全　body class="biodiversity"
***********************************/

.biodiversity dl dt{
	display: block;
	float: left;
	width:110px;
}
.biodiversity dl dd{
	display: block;
	float: left;
	width: 320px;
	margin-bottom: 10px;
}
.biodiversity .results{
	float:left;
	margin-bottom: 60px;
}
.biodiversity .results a{
	display: inline-block;
	width: 160px;
	background: #e8f4dd;
	border-radius: 8px;
	text-align: center;
	height: 45px;
	line-height: 18px;
	padding-top: 10px;
	margin:0 15px 13px 0;
	font-size: 15px;
}
.biodiversity .results a:hover{
	background: #badf97;
}
.biodiversity .results img{
	margin-left:20px;
}

/**********************************
間伐材の有効利用　body class="utilization"
***********************************/
.utilization div.col2of3 a{text-decoration: underline;}
.utilization div.col2of3 a.external{margin:0 10px 0 5px;}
.utilization div.col2of3 a.external:after{content:url(/cmn/img/icon_exterior.png);position:relative;left:5px;}

/**********************************
地域との関わり　body class="communication"
***********************************/
.communication .col2of3 a{text-decoration: underline;}
.communication ul.shimanto-list li a{
	display:block;
	border:solid 1px #c6c7c8;
	width:440px;
	height:57px;
	margin-bottom:5px;
	background:#fff;
}
.communication ul.shimanto-list li a span.vol{
	position:relative;
	top:5px;
	left:40px;
}
.communication ul.shimanto-list li a span.title{
	position:relative;
	top:27px;
	left:6px;
	font-size:16px;
}
.communication ul.shimanto-list li:before{
	content:url("/csr/yui/communication/img/go.png");
	position:relative;
	top:38px;
	left:13px;
}
.communication ul.shimanto-list li a:hover{
	box-shadow:inset 1px 1px 0 #fff,
		inset -1px -1px 0 #fff;
	background:#e5e5e5;
}
.communication ul.shimanto-list li a img{
	float:right;
	margin:1px;
}



/**********************************
四万十の魅力紹介　body class="shimanto"
***********************************/
.shimanto h3.title{
	font-size:30px;
	margin-left:30px;
}
.shimanto h3.title span{
	font-size:16px;
}
.shimanto p{
	line-height:1.8em;
}

.shimanto #article-link{
	clear:both;
	overflow:hidden;
	margin-bottom:30px;
}
.shimanto #article-link a{
	display:block;
	border:solid 1px #c6c7c8;
	width:440px;
	height:57px;
	margin-bottom:20px;
	background:#fff;
}
.shimanto #article-link a span.vol{
	position:relative;
	top:5px;
	left:40px;
}
.shimanto #article-link a span.title{
	position:relative;
	top:27px;
	left:6px;
	font-size:16px;
}
.shimanto #article-link div.prev-contents{float:left;}
.shimanto #article-link div.prev-contents:before{
	content:url("/csr/yui/communication/img/back.png");
	position:relative;
	top:38px;
	left:13px;
}
.shimanto #article-link div.next-contents{float:right;}
.shimanto #article-link div.next-contents:before{
	content:url("/csr/yui/communication/img/go.png");
	position:relative;
	top:38px;
	left:13px;
}
.shimanto #article-link a:hover{
	box-shadow:inset 1px 1px 0 #fff,
		inset -1px -1px 0 #fff;
	background:#e5e5e5;
}
.shimanto #article-link a img{
	float:right;
	margin:1px;
}
.shimanto .seeall{
	text-align:right;
}

/*IE7対応*/
*+html #left-part{margin-right: 50px;}
*+html #info #left-part .channel #movie1{clear:both;float:left;}
*+html #info #left-part .channel #movie2{float:left;margin-top: 20px;}
*+html .communication ul.shimanto-list li a img,
*+html .shimanto #article-link a img,{
	position: relative;
	top: -24px;
	}