@charset "utf-8";


/* ---------------------------------------------
　container
------------------------------------------------ */

.container{
	width:100%;
	margin:60px auto 0;
}

/* about01 */

.about01{
	min-height:496px;
	background:url(../images/img_001.jpg) no-repeat center 26px;
}

.about01 h2{
	margin:0 0 56px 48%;
	color:#353536;
	font-family: "Yu Gothic", YuGothic;
	font-size:55px;
	font-weight:bold;
	line-height:1.3;
}

.about01 .inner-box p{
	float:right;
	width:47%;
	margin:0;
}

/*　title　*/

.content h3{
	line-height:1;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:44px;
	font-weight:700;
}

/* weather */

.weather{
	width:100%;
	margin:85px 0 80px;
	background:url(../images/bg_lineblue.png) repeat-x 0 0;
}

.weather .inner-box{
	background:url(../images/icon_weather.png) no-repeat 0 0;
}

.weather h3{
	color:#4788e1;
	margin:0 0 0 95px;
	padding:0;
}

.weather p{
	margin:0 0 50px 95px;
}

.weather p span{
	display:inline-block;
	font-size:18px;
	margin-right:2em;
}

.graph-box{
	position:relative;
	margin-bottom:90px;
}

.point6{
	position:absolute;
	top:421px;
	left:524px;
}

.point8{
	position:absolute;
	top:421px;
	left:698px;
}

.point6 label,
.point8 label {
	display:block;
	color:#da2647;
	font-family:'Roboto Condensed', sans-serif;
	font-size:14px;
	font-weight:700;
	border:2px solid #db2d4d;
	width:66px;
	height:32px;
	line-height:29px;
	text-align:center;
	position:relative;
	cursor :pointer;
	z-index:2;
}

.point6 label img,
.point8 label img{
	position:absolute;
	top:22px;
	left:0;
	right:0;
	margin:auto;
	z-index:10;
}


#mot6:checked ~ label,
#mot8:checked ~ label{
	color:#fff;
	background:#4788e1;
	border:2px solid #4788e1;
	cursor:pointer;
}

@media screen and ( min-width:750px ){

	.point6 label:hover,
	.point8 label:hover{
		color:#fff;
		background:#4788e1;
		border:2px solid #4788e1;
		cursor:pointer;
	}

}

#mot6:checked ~ label img,
#mot8:checked ~ label img{
	display:none;
}

@media screen and ( min-width:750px ){

	.point6 label:hover img,
	.point8 label:hover img{
		display:none;
	}

}

.point6 label:after,
.point8 label:after{
	content:'';
	position: absolute;
	top:-7px;
	left:0;
	right:0;
	margin:auto;
	width:0;
	height:0;
	border-right:7px solid transparent;
	border-bottom:7px solid #da2647;
	border-left:7px solid transparent;
} 

#mot6:checked ~ label:after,
#mot8:checked ~ label:after{
	content:'';
	position: absolute;
	top:-7px;
	left:0;
	right:0;
	margin:auto;
	width:0;
	height:0;
	border-right:7px solid transparent;
	border-bottom:7px solid #4788e1;
	border-left:7px solid transparent;
} 

@media screen and ( min-width:750px ){

	.point6 label:hover:after,
	.point8 label:hover:after{
		content:'';
		position: absolute;
		top:-7px;
		left:0;
		right:0;
		margin:auto;
		width:0;
		height:0;
		border-right:7px solid transparent;
		border-bottom:7px solid #4788e1;
		border-left:7px solid transparent;
	} 

}

.point6 input,
.point8 input {
    display: none;
}

.point6 ul,
.point8 ul{
	margin:0 0 0 -50%;
	padding: 0;
	background:#4788e1;
	color:#fff;
	font-size:14px;
	width:460px;
	z-index:999999;
	position: relative;
}

.point6 li,
.point8 li{
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
	z-index: 99999;
	position: relative;
}

#mot6:checked ~ #po01 li,
#mot8:checked ~ #po02 li {
    max-height:14em;
    opacity: 1;
}

.point6 li p,
.point8 li p{
	margin:0 auto;
	padding:20px 25px;
}

/* nature-area */

.nature-area{
	clear:both;
	width:100%;
	min-height:360px;
	margin-bottom:130px;
	background-image:url(../images/img_002.jpg), url(../images/bg_linegreen.png);
	background-repeat:no-repeat, repeat-x;
	background-position:center 0, 0 0;
}

.nature-area .inner-box{
	padding-top:132px;
	position:relative;
}

.nature-area h3{
	color:#699a00;
	margin:0 0 0 47%;
	padding:0 0 30px 90px;
	background:url(../images/icon_nature.png) no-repeat 0 0;
}

.nature-area h3 span{
	font-size:18px;
	color:#353536;
	font-weight:normal;
	padding-left:20px;
	font-family: "メイリオ","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", Osaka ;
	transform: rotate(0.001deg);
}

.nature-area .inner-box p{
	float:right;
	width:45%;
	margin:0;
	padding-bottom:30px;
}

.nature-area .btn-more{
	margin:0 0 0 65%;
}

.nature-area .bg-area{
	width:100%;
	height:360px;
	margin-top:70px;
	background:url(../images/img_003.jpg) no-repeat center 0;
}

.nature-area .bg-area p{
	width:1200px;
	margin:0 auto;
	padding-top:326px;
	text-align:right;
	color:#fff;
	font-size:14px;
}

.photo-c{
	position:absolute;
	top:326px;
	left:0;
	color:#fff;
	font-size:14px;
}

/* culture-area */

.culture-area{
	width:100%;
	min-height:540px;
	margin-bottom:160px;
	background-image:url(../images/bg_brown.png),url(../images/img_004.jpg);
	background-repeat:repeat-x,no-repeat;
	background-position:0 0, center 76px;
}

.culture-area h3{
	padding:0 0 45px 90px;
	color:#61553e;
	background:url(../images/icon_culture.png) no-repeat 0 0;
}

.culture-area h3 span{
	display:block;
	font-size:18px;
	color:#353536;
	font-weight:normal;
	padding:10px 0 10px 5px;
}

.culture-area .inner-box p{
	float:left;
	width:47%;
	margin:0 0 40px;
}

.culture-area .btn-more{
	margin:0 0 0 13%;
}

/* art-area */

.art-area{
	width:100%;
	margin-bottom:98px;
}

.art-area ul{
	width:100%;
	max-width: 1400px;
	margin:0 auto;
	color:#fff;
	overflow:hidden;
}

.art-area ul li{
	float:left;
	width:33.33%;/*33%*/
	min-height:283px;
	padding:10px 20px;
	font-size:14px;
}

.art-area ul li:first-child{
	background:url(../images/img_005.jpg) no-repeat center 0;
}

.art-area ul li:nth-child(2){
	background:url(../images/img_006.jpg) no-repeat center 0;
	color: #666;
}

.art-area ul li:last-child{
	background:url(../images/img_007.jpg) no-repeat center 0;
}

.art-area .inner-box{
	position:relative;
}

.art-area h3{
	width:350px;
	margin:-35px auto 20px;/*200px auto 20px*/
	padding:50px 0 0 60px;
	color:#da2647;
	background:url(../images/icon_art.png) no-repeat center 0;
}

.art-area h3 span{
	float:right;
	font-size:18px;
	color:#353536;
	font-weight:normal;
	padding:20px 0 0;
}

.art-area .inner-box p{
	text-align:center;
	margin:0 0 40px;
}


/* pamphlet-area */
.pamphlet-area{
	background:#e8e3d9 url(../images/bg_pamphlet.png) repeat-x 0 0;
	padding-bottom:40px;
}

.pamphlet-area .inner-box{
	width:1000px;
}

.pamain{
	float:left;
	width:700px;
	margin:0 0 0 32px;
	padding-top:50px;
}

.pamain p{
	margin:0;
	font-family:"あおぞら明朝 Regular";
	font-size:20px;
	letter-spacing:1px;
	transform: rotate(0.001deg);
}

.pamain ul{
	float:left;
	width:33%;
	margin-bottom:10px;
	overflow:hidden;
}

.pamain ul li a{
	color:#333;
	padding:0 0 0 15px;
	margin-bottom:10px;
	display:block;
	position: relative;
	text-decoration:underline;
}

.pamain ul li a::after {
	display: block;
	content: '';
	position: absolute;
	top: 40%;
	left:0;
	width: 6px;
	height: 6px;
	border-right:2px solid #333;
	border-bottom:2px solid #333;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}