@charset "shift_jis";
/* レスポンシブ・デザイン対応ＣＳＳ     2014/09〜    */
/* 文化的景観 */


/* ****************** メイン・コンテンツの設定  */

#contents {
	width:100%;
	overflow: hidden;
	margin:0 auto;
	text-align:center;     /* マージンにautoを指定する方法が有効にならないブラウザ（IE6など）対策 */
}

#contents p {
	margin-bottom: 1em;
	text-align: left;
}

#contents img {
	margin-bottom:3px;
}

#contents .ysicn {
	display:inline;
	margin:0 0.3em;
}


/* 中土佐町の文化的景観ＴＯＰイメージ */
#topimage-nakatosa {
	clear:both;
	position:relative;
	width: 100%;
}

#topimage-nakatosa h1 {
	position:absolute;
	top:70px;
	left:260px;
	font-size:220%;
	text-align: center;
	color:#066;
}

#topimage-nakatosa h2 {
	position:absolute;
	top:10px;
	left:10px;
	font-size: 100%;
	line-height: 1.2;
	text-align:center;
	color:#066;
}



@media screen and (max-width : 767px){ /* ----スマホ */

	#topimage-nakatosa h1 {
		position:absolute;
		top:20px;
		left:80px;
		font-size:100%;
		text-align: center;
		color:#066;
	}
	
	#topimage-nakatosa h2 {
		position:absolute;
		top:1px;
		left:1px;
		font-size: 70%;
		line-height: 1;
		text-align:left;
		color:#066;
	}

}


@media screen and (min-width : 768px) and (max-width : 959px){ /* ----タブレット */

	#topimage-nakatosa h1 {
		position:absolute;
		top:52px;
		left:180px;
		font-size:190%;
		text-align: center;
		color:#066;
	}
	
	#topimage-nakatosa h2 {
		position:absolute;
		top:5px;
		left:5px;
		font-size: 90%;
		line-height: 1.2;
		text-align:center;
		color:#066;
	}

}






/* 久礼の港と漁師町の景観ＴＯＰイメージ */
#topimage-kure {
	clear:both;
	position:relative;
	width: 100%;
}

#topimage-kure h1 {
	position:absolute;
	top:70px;
	left:260px;
	font-size:220%;
	text-align: center;
	color:#036;
}

#topimage-kure h2 {
	position:absolute;
	top:10px;
	left:10px;
	font-size: 100%;
	line-height: 1.2;
	text-align:center;
	color:#036;
}



@media screen and (max-width : 767px){ /* ----スマホ */

	#topimage-kure h1 {
		position:absolute;
		top:20px;
		left:80px;
		font-size:100%;
		text-align: center;
		color:#036;
	}
	
	#topimage-kure h2 {
		position:absolute;
		top:1px;
		left:1px;
		font-size: 70%;
		line-height: 1;
		text-align:left;
		color:#036;
	}

}


@media screen and (min-width : 768px) and (max-width : 959px){ /* ----タブレット */

	#topimage-kure h1 {
		position:absolute;
		top:52px;
		left:180px;
		font-size:190%;
		text-align: center;
		color:#036;
	}
	
	#topimage-kure h2 {
		position:absolute;
		top:5px;
		left:5px;
		font-size: 90%;
		line-height: 1.2;
		text-align:center;
		color:#036;
	}

}



/* 四万十川流域の文化的景観ＴＯＰイメージ */
#topimage-oon {
	clear:both;
	position:relative;
	width: 100%;
}

#topimage-oon h1 {
	position:absolute;
	top:70px;
	left:280px;
	font-size:220%;
	text-align: center;
	background-color:#C9FACE;
	color:#096;
}

#topimage-oon h2 {
	position:absolute;
	top:10px;
	left:10px;
	font-size: 100%;
	line-height: 1.2;
	text-align:center;
	background-color:#C9FACE;
	color:#096;
}



@media screen and (max-width : 767px){ /* ----スマホ */

	#topimage-oon h1 {
		position:absolute;
		top:20px;
		left:80px;
		font-size:100%;
		text-align: center;
		background-color:#C9FACE;
		color:#096;
	}
	
	#topimage-oon h2 {
		position:absolute;
		top:1px;
		left:1px;
		font-size: 70%;
		line-height: 1;
		text-align:left;
		background-color:#C9FACE;
		color:#096;
	}

}


@media screen and (min-width : 768px) and (max-width : 959px){ /* ----タブレット */

	#topimage-oon h1 {
		position:absolute;
		top:50px;
		left:200px;
		font-size:190%;
		text-align: center;
		background-color:#C9FACE;
		color:#096;
	}
	
	#topimage-oon h2 {
		position:absolute;
		top:5px;
		left:5px;
		font-size: 90%;
		line-height: 1.2;
		text-align:center;
		background-color:#C9FACE;
		color:#096;
	}

}


/* 広告エリア */
.koukoku-area {
	width: 336px;
	height: 280px;
	margin:0 auto;
}

.koukoku-area300 {
	width: 300px;
	height: 250px;
	margin:0 auto;
}

.koukoku-area300h0 {
	width: 300px;
	margin:0 auto;
}

.koukoku-area120 {
	width: 120px;
	margin:0 auto;
}

/* 終了・広告エリア */


.mainlf-txt p {
	font-size:100%;
	margin:5px;
	line-height:1.3em;
	text-indent:1em;
}

.mainlf-txt img {
	float:left;
	margin:0 0.5em 0 0;
}

@media screen and (max-width : 767px){ /* ----スマホ */

	.mainlf-txt p {
		font-size:95%;
		line-height:1.3em;
		margin:0 10px 0 10px;
		text-indent:1em;
	}

	.mainrf-txt {
		font-size:95%;
		text-align:left;
		text-indent:1em;
		margin:0 10px 0 10px;
		line-height:1.4em;
		padding:1px;
	}


}



.ashn-linettl {
	background-color:#BCF5C6;
	width:96%;
	text-align:left;
	font-size:130%;
	font-weight:bold;
	color:#006;
	padding-left:1em;
}


.ashn-linettl2 {
	background-color:#003E00;
	width:96%;
	text-align:left;
	font-size:120%;
	color:#FFF;
	padding-left:1em;
}


	
	
/* 左右通しテキスト */
.txt-lfrg {
	width:98%;
	text-align:left;
	line-height:1.4;
	font-size:100%;
	text-indent:1em;
}

@media screen and (max-width : 767px){ /* ----スマホ */

	.txt-lfrg {
		width:98%;
		margin-left:8px;
		text-align:left;
		line-height:1.4;
		font-size:90%;
		text-indent:1em;
	}
}



.area-lnk ul {
}

.area-lnk li {
	text-align:left;
	margin:0 0 0 -20px;
}




.clr-all { /* コンテンツ内各データの区切り処理 */
	clear:both;
	
}

.clr-all hr {
	width:98%;
	border-width:0 0 1px 0;
	border-color:#EAEAEA;
	border-style:solid;
	margin:3px 0 3px 0;
}

.dtdv hr {
	display:none;
}


.image-under-txt {
	width:320px;
	text-align:center;
	font-size:88%;
	line-height:1;
	margin:0 0 1em 3em;
}

.image-under-txt p {
	text-align:left;
	text-indent:1em;
}





.right-img {
	margin:0 auto;
	text-align:center;     /* マージンにautoを指定する方法が有効にならないブラウザ（IE6など）対策 */
}

.right-img-name {
	width:320px;
	text-align:center;
	font-size:88%;
	line-height:1;
	margin:0 0 0 3.5em;
}


.sub-title {
	width:320px;
	text-align:center;
	color:#600;
}


.clr-kugiri-ex { /* コンテンツ内各データの区切り処理 */
	clear:both;
	
}

.clr-kugiri-ex hr {
	width:90%;
	border-width:0 0 2px 0;
	border-color:#066;
	border-style:dotted;
}







@media screen and (max-width : 767px){ /* ----スマホ */

	#contents .main-left {
		width:100%;
		text-align:center;
	}
	
	#contents .main-right {
		width:100%;
		text-align:left;
	}
	
	#contents .main-right p {
		font-size:78%;
		line-height:1.3;
		margin:0 10px 0 10px;
		text-indent:1em;
	}

	#contents #ad-main {
		display:none; /* 右サイド広告欄を非表示 */
	}

	.clr-all { /* コンテンツ内各データの区切り処理 */
		clear:both;
		
	}
	
	.clr-all hr {
		width:80%;
		border-width:0 0 1px 0;
		border-color:#EAEAEA;
		border-style:solid;
		margin:3px 0 3px 0;
	}
	
	.clr-kugiri-ex hr {
		width:90%;
		border-width:0 0 1px 0;
		border-color:#066;
		border-style:dotted;
	}
	
	.dtdv hr {
		display:block;
		width:80%;
		border-width:0 0 1px 0;
		border-color:#CCC;
		border-style:solid;
	}
	
	.iso-txt {
		font-size:78%;
		text-align:left;
		margin-top:-15px;
		padding-top:0;
	}
	
	
}



@media screen and (min-width : 768px) and (max-width : 959px){ /* ----タブレット */

	#contents {
		overflow:hidden;
		width:768px;
	}
	
	#contents #wrap-main {
		float:left;
		width:100%
	}
	
	
	#contents .main-left {
		float:left;
		text-align:center;
		margin:0 auto;
		width:50%;
	}
	
	#contents .main-right {
		float:left;
		margin:0 auto;
		width:50%;
	}
	
	#contents .main-right p {
		margin:10px;
		line-height:1.3;
		text-indent:1em;
	}
	
	
	#contents #ad-main { 
		display:none; /* 右サイド広告欄を非表示 */
	}
		
}


/* ---------------------------------------------------パソコン */


@media print,screen and (min-width : 960px){

	#contents {
		overflow:hidden;
		width:960px;
	}
	
	#contents #wrap-main {
		float:left;
		width:83.334%; /* 800/960=83.334% */
		margin-right:-160px;
	}
	
	
	#contents .main-left {
		float:left;
		text-align:center;
		margin:0 auto;
		width:50%;
	}
	
	#contents .main-right {
		float:left;
		text-align:left;
		margin:0 auto;
		width:50%;
	}
	
	#contents .main-right p {
		margin:10px;
		line-height:1.3;
		text-indent:1em;
	}
	
	
	#contents #ad-main {
		display:block; 
		float:right;
		margin:0;
		width:160px;
	}
	
	#contents #ad-main .adpos {
		text-align:center;
		margin-top:30px;
		margin-left:2px;
	}

}





.right-img-ctrl {
	margin:0 auto;
	text-align:center;     /* マージンにautoを指定する方法が有効にならないブラウザ（IE6など）対策 */
}



.left-txt {
	margin:0 auto;
	margin-bottom:1.5em;
	width:320px;
	font-size:100%;
	text-align:left;
	text-indent:1em;
	line-height:1.3em;
	padding:1px;
}

.right-list {
	width:320px;
	font-size: 90%;
	line-height: 1.3;
	margin:1em auto;
}

.right-list ul {
	padding:0;
}


/* 広告（リスト型）*/
.adpos-list{
	background-color:#E4E4E4;
	text-align:left;
	margin:0 0 20px 0;
	padding-bottom:10px;
	font-size:90%;
	
}

.adpos-list li{
	margin:0 0 0 -30px;
}

.adpos-list-item-01 {
	background-color:#036;
	color:#FFF;
	text-align:center;

}


.halfcnt-txt {
	margin:0 auto;
	width:360px;
	font-size:100%;
	text-align:left;
	text-indent:0;
	line-height:1.3em;
	padding:1px;
}

.halfcnt-txt img {
	float:left;
	margin-right:0.5em;
	margin-bottom: 0.1em;
	box-shadow: 0 0 0.3125em #2f1f1f; /* 0.3125em=5px */
}





.imgunder-txt {
	width:150px;
	text-align:center;
	font-size:88%;
	line-height:1;
	margin:0 0 1em 0;
}

.imgunder-txt-300 {
	width:300px;
	text-align:center;
	font-size:88%;
	line-height:1;
	margin:0 0 1em 0;
}


.ttl-line hr {
	width:70%;
	border-width:0 0 1px 0;
	border-color:#069;
	border-style:solid;
	margin:0 auto;
}

.cooking-ttl {
	text-align:center;
	background-color:#BFC7F9;
	color:#003;
	font-size:120%;
	margin:0.3em 2em;
	padding:0.1em 0;
}


/* ページＴＯＰに戻る */
.ret-top {
	font-size:90%;
	text-align:right;
}




/* 自然（花・昆虫など）用リスト ページＴＯＰ以外に適用 */
/* 花のCSSにも存在し重複するが、将来　統一予定 2015/02/14 By.Yuki */
.eco-list2 {
	line-height: 1.2;
}
.eco-list2 ul {
	margin:3px 20px 7px -15px;
}

.eco-list2 li {
	display: inline;
	font-size: 95%;
	background-color:#666;
	color:#FFF;
	padding:1px 3px;
}
	

@media screen and (max-width : 767px){ /* ----スマホ */

	.eco-list2 ul {
		text-align:center;
	}
	
	.eco-list2 li {
		font-size: 90%;
		margin-bottom:0;
	}

}

@media screen and (min-width : 768px) and (max-width : 959px){ /* ----タブレット */

	.eco-list2 li {
		font-size: 90%;
	}

}


.eco-list2 a {
	text-decoration: none;
	color:#FFF;
}

.eco-list2 a:focus {
	color:#CF6;
	outline: 0;
}

.eco-list2 a:active,a:hover {
	color:#903;
	outline: 0;
}	

.keikan-navi {
	font-size:100%;
	text-align:left;
}

.keikan-navi img {
	float:left;
	margin-left:1em;
}

/* 新着情報 */
.flo-newinf-rap {
	width:90%;
	margin:0 auto;
	text-align:center;     /* マージンにautoを指定する方法が有効にならないブラウザ（IE6など）対策 */
}

.flo-newinf-ttl {
	background-color:#FF0;
	color:#300;
	text-align:left;
	font-size:90%;
	margin-top:1em;
}

.flo-newinf {
	font-size:95%;
	text-align:left;
	line-height: 1.2;
	margin-bottom:1em;
}

.flo-newinf-small {
	font-size:85%;
	text-align:left;
	line-height: 1.2;
	margin:1em;
}

.kk-linettl {
	background-color:#DDF8D6;
	width:96%;
	font-size:120%;
	text-align:center;
	color:#030;
}




/* 各景観の写真・説明 */
#contents .main-left .sub-lf-1 { /* main-leftの左側 */
	float:left;
	margin:0 auto;
	width:50%;
}

#contents .main-left .sub-lf-2 { /* main-leftの右側 */
	float:right;
	margin:0 auto;
	width:50%;
}

#contents .main-right .sub-rg-1 { /* main-rightの左側 */
	float:left;
	margin:0 auto;
	width:50%;
}

#contents .main-right .sub-rg-2 { /* main-rightの右側 */
	float:right;
	margin:0 auto;
	width:50%;
}

@media screen and (max-width : 767px){ /* ----スマホ */

	#contents .main-right .sub-rg-1 { /* main-rightの左側 */
		clear:both;
		float:left;
		margin:0 auto;
		width:50%;
	}
	
	#contents .main-right .sub-rg-2 { /* main-rightの右側 */
		float:right;
		margin:0 auto;
		width:50%;
	}

}


/* 詳細情報アイコンの制御 */
.flw-bsimg {
	clear: both;
	position:relative;
	width:94%;
	margin:0 auto;
	text-align:center;     /* マージンにautoを指定する方法が有効にならないブラウザ（IE6など）対策 */
}

.flw-zoom a {
	position:absolute;
	top:117px;
	left:10px;
	width:34px;
	height:17px;
}

.flw-ttl {
	position:absolute;
	top:117px;
	left:48px;
	color:#004891;
	font-size:75%;
}

.sub-lrc-txt {
	clear: both;
	position:relative;
	margin:1.5em auto;
	width:94%;
	font-size:80%;
	text-align:left;
	line-height:1.3em;
	padding:1px;
}



.dtdv hr {
	display:none;
}



@media screen and (max-width : 767px){ /* ----スマホ */

	.flw-ttl {
		position:absolute;
		top:118px;
		left:48px;
		color:#004891;
		font-size:76%;
		font-weight:bold;
	}

	.flw-sx {
		position:absolute;
		top:1px;
		left:20px;
		color:#FFF;
		font-size:80%;
		line-height:1.2em;
	}

	
	.dtdv hr {
		display:block;
		width:80%;
		border-width:0 0 1px 0;
		border-color:#CCC;
		border-style:solid;
	}

}