@charset "utf-8";

/**
 * #wrapper-inner
 */
#wrapper-inner {
	background-image: url(../images/bg-content.png);
}

/**
 * #header
 */
#header {
	width: 217px;
	float: left;
}
#header h1 {
	padding: 30px 0 109px 30px;
}
#topics {
	width: 177px;
	padding: 0 0 0 20px;
}
#topics h2 {
	padding: 0 0 10px 10px;
}
#topics ul {
	padding: 0;
}
#topics li {
	padding: 13px 10px 17px 10px;
	background: url(../images/bg-border.gif) repeat-x left bottom;
}
#topics li .topics-image {
	width: 157px;
	height: 50px;
	overflow: hidden;
	position: relative;
	margin: 7px 0 0 0;
}
#topics li .topics-image span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
#topics li .topics-image .image {
	top: -40px;
}

#topics li .date {
	padding: 13px 0 0 0;
	color: #999;
	font-size: 90%;
}
#topics li .text {
	font-size: 90%;
	line-height: 1.6;
}
#topics li .text a {
	color: #666;
}
#topics .list {
	padding: 17px 0 0 10px;
}

#news {
	width: 177px;
	margin: 46px 0 0 20px;
	border-top: 1px solid #d5d5d5;
}
#news ul {
}
#news li {
	padding: 33px 0 32px 0;
	background: url(../images/bg-border.gif) repeat-x left top;
}
#news li:first-child {
	background: none;
}
#news li .article-image {
	width: 176px;
	height: 132px;
	position: relative;
}
#news li .article-image span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
#news li .date {
	margin: 0 0 0 10px;
	padding: 20px 0 0 0;
	color: #999;
	font-size: 90%;
}
#news li h3 {
	margin: 0 0 0 10px;
	padding: 5px 0 0 0;
	font-size: 150%;
}
#news li h3 a {
	color: #666;
}
#news li .text {
	margin: 0 0 0 10px;
	padding: 15px 0 0 0;
	color: #999;
	font-size: 90%;
	line-height: 1.7;
}


/**
 * #content
 */
#content {
	width: 713px;
}
#mainvisual {
	position: relative;
	margin: 0 0 0 -30px;
}
#mainvisual .images {
	width: 773px;
	height: 526px;
	position: relative;
	overflow: hidden;
}
#mainvisual .images li {
	position: absolute;
	left: 0;
	top: 0;
}
#mainvisual .pointer {
	display: none;
}
#spots {
	width: 713px;
	height: 2344px;
	position: relative;
}
#spots .leading {
	position: absolute;
	left: 556px;
	top: 21px;
}
#spots .onomatopee {
	position: absolute;
}
#spots .onomatopee li {
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transform: rotate(0deg);
}
#spots .onomatopee li:hover,
#social-buttons .swing:hover {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation-name: swing;
	-moz-animation-name: swing;
	-ms-animation-name: swing;
	animation-name: swing;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-duration: 2.0s;
	-moz-animation-duration: 2.0s;
	-ms-animation-duration: 2.0s;
	animation-duration: 2.0s;
}
@-webkit-keyframes swing {
	0% {	-webkit-transform: rotate(2deg);	}
	8% {	-webkit-transform: rotate(2deg);	}
	9% {	-webkit-transform: rotate(-1deg);	}
	19% {	-webkit-transform: rotate(-1deg);	}
	20% {	-webkit-transform: rotate(2deg);	}
	30% {	-webkit-transform: rotate(2deg);	}
	31% {	-webkit-transform: rotate(-1deg);	}
	41% {	-webkit-transform: rotate(-1deg);	}
	42% {	-webkit-transform: rotate(0deg);	}
	100% {	-webkit-transform: rotate(0deg);	}
}
@-moz-keyframes swing {
	0% {	-moz-transform: rotate(2deg);	}
	8% {	-moz-transform: rotate(2deg);	}
	9% {	-moz-transform: rotate(-1deg);	}
	19% {	-moz-transform: rotate(-1deg);	}
	20% {	-moz-transform: rotate(2deg);	}
	30% {	-moz-transform: rotate(2deg);	}
	31% {	-moz-transform: rotate(-1deg);	}
	41% {	-moz-transform: rotate(-1deg);	}
	42% {	-moz-transform: rotate(0deg);	}
	100% {	-moz-transform: rotate(0deg);	}
}
@-ms-keyframes swing {
	0% {	-ms-transform: rotate(2deg);	}
	8% {	-ms-transform: rotate(2deg);	}
	9% {	-ms-transform: rotate(-1deg);	}
	19% {	-ms-transform: rotate(-1deg);	}
	20% {	-ms-transform: rotate(2deg);	}
	30% {	-ms-transform: rotate(2deg);	}
	31% {	-ms-transform: rotate(-1deg);	}
	41% {	-ms-transform: rotate(-1deg);	}
	42% {	-ms-transform: rotate(0deg);	}
	100% {	-ms-transform: rotate(0deg);	}
}
@keyframes swing {
	0% {	transform: rotate(2deg);	}
	8% {	transform: rotate(2deg);	}
	9% {	transform: rotate(-1deg);	}
	19% {	transform: rotate(-1deg);	}
	20% {	transform: rotate(2deg);	}
	30% {	transform: rotate(2deg);	}
	31% {	transform: rotate(-1deg);	}
	41% {	transform: rotate(-1deg);	}
	42% {	transform: rotate(0deg);	}
	100% {	transform: rotate(0deg);	}
}
#spots .onomatopee li .optional-link {
	display: none;
}
#spots #onomatopee-a {
	width: 328px;
	height: 232px;
	position: absolute;
	left: 70px;
	top: 106px;
}
#spots #onomatopee-b {
	width: 325px;
	height: 241px;
	position: absolute;
	left: 356px;
	top: 404px;
}
#spots #onomatopee-c {
	width: 224px;
	height: 232px;
	position: absolute;
	left: 78px;
	top: 635px;
}
#spots #onomatopee-d {
	width: 452px;
	height: 374px;
	position: absolute;
	left: 291px;
	top: 909px;
}
#spots #onomatopee-e {
	width: 236px;
	height: 214px;
	position: absolute;
	left: 78px;
	top: 1282px;
}
#spots #onomatopee-f {
	width: 325px;
	height: 240px;
	position: absolute;
	left: 308px;
	top: 1645px;
}
#spots #onomatopee-g {
	width: 446px;
	height: 376px;
	position: absolute;
	left: 46px;
	top: 1966px;
}
#social-buttons {
	width: 130px;
	height: 121px;
	margin: 0 0 0 548px;
	position: relative;
	overflow: hidden;
}
#social-buttons .buttons {
	width: 130px;
	height: 121px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	visibility: hidden;
	background: url(../images/social-buttons-active.png) no-repeat left top;
}
#social-buttons .buttons .twitter-tweet {
	padding: 40px 0 0 17px;
}
#social-buttons .buttons .facebook-like {
	padding: 8px 0 0 17px;
}
#social-buttons .cover {
	width: 130px;
	height: 121px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}
#content .pagetop {
	margin-left: 603px;
}

/**
 * #social-area
 */
#social-area {
	width: 683px;
	margin-left: 217px;
}

/**
 * .modalwindow
 */
.modalwindow-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	z-index: 20;
	background-color: #000;
}
.modalwindow {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	z-index: 21;
	overflow: hidden;
}
.modalwindow .modalwindow-inner {
	margin: auto;
	padding: 30px;
}
.modalwindow .photogallery {
	padding-bottom: 39px;
	background-color: #fff;
}
.modalwindow .photogallery img {
	width: auto;
	max-width: 100%;
	display: block;
}
.modalwindow .information {
	height: 40px;
	margin-top: -40px;
}
.modalwindow .information .optional-link {
	float: left;
	margin: 13px 0 0 13px;
	padding: 0 0 0 18px;
	background: url(/village/common/images/icon-link.gif) no-repeat left top;
	color: #666;
}
.modalwindow .information .close {
	width: 69px;
	float: right;
	display: block;
	padding: 10px;
}
.modalwindow .information .facebook-like {
	width: 100px;
	float: right;
	overflow: hidden;
	padding: 10px 0 0 0;
	text-align: left;
}
.modalwindow .information .twitter-tweet {
	width: 100px;
	float: right;
	overflow: hidden;
	padding: 10px 0 0 0;
	text-align: left;
}

/**
 * #nav
 */
#nav .logo {
	height: 135px;
}