@charset "utf-8";

/* common
 -------------------------------------------------- */
body { overflow-x:hidden;}
#headWrap { background-color: #fff;}
#footer { width: 100%; padding: 0; border-top: 1px solid #666666; background-color: #fff;}
#footerNav { width: 880px; margin: 10px auto;}
#copyright small { display: block; width: 880px; margin: 0 auto;}

#sns { position: absolute; top: 20px; left: 50%; width: 440px; z-index: 5;}
#sns ul { zoom: 1; float: right;}
#sns ul:after { content: ""; display: block; clear: both;}
#sns li { float: left; margin-right: 0;}

/* content
 -------------------------------------------------- */
.content { width: auto; padding: 0; overflow: hidden;}
.content img { vertical-align: bottom;}

/* intro
 -------------------------------------------------- */
#intro { overflow: hidden; position: relative; text-align: center;}
#intro #videowrap { width: 880px; height: 561px; margin: 0 auto; position: relative;}
#intro #video, #intro #videoswf { z-index:-5; position: absolute; left:50%; text-align: left; width: 880px; margin-left: -440px; height: 561px;}
#introsliderArea { position: absolute; bottom:0; left:50%; z-index: 5; width: 880px; margin-left: -440px; height: 64px;}
#introsliderArea .linkpoint ul { margin-left: 0;}

/* contentsArea
 -------------------------------------------------- */
#contentsArea { position: relative; display: none;}
#contentsArea:after { content: ""; display: block; clear: both;}

/* title
 ================================================== */
#contentsAreaInner { width: 880px; margin: 0 auto; position: relative;}
.title { position: absolute; top: 0; left: 0; z-index:5;}
.title .logo { padding-top: 38px; height: 24px;}
.title .place { padding-top: 28px; height: 16px;}
.title .author { padding: 4px 1px; height: 12px;}

/* mainArea
 ================================================== */
#mainArea {top:0; overflow: hidden; min-height: 561px; background: url(../img/bg_day01.gif) no-repeat 50% 50%;}

/* day
 ================================================== */
#mainArea .day { position: absolute; top: 50%; left:50%; width: 300px; display: none;}
#mainArea .ballon { position: relative; width: 276px; height: 152px; padding: 48px 36px 0 30px; background: url(../img/ballon.png) no-repeat left top;}
#mainArea .ballon.down { height: 172px; padding: 30px 36px 0 30px; background: url(../img/ballon_02.png) no-repeat left top;}
#mainArea .ballon .date { font-size: 16px; font-weight: bold;}
#mainArea .ballon .date .place { padding-left: 5px; font-size: 11px;}
#mainArea .ballon .lat { font-size: 9px; position: absolute; top: 72px; left:30px; width: 170px;}
#mainArea .ballon.down .lat { top: 55px;}
#mainArea .ballon .text { margin-top: 30px; width: 155px; font-size: 12px; line-height: 1.6;}
#mainArea .ballon a.modalwin { position: absolute; top: 50px; right: 36px; width: 100px; text-align: center; display: block;text-decoration: none;}
#mainArea .ballon.down a.modalwin { top: 30px;}
#mainArea .ballon a:hover { color: #999999;}
#mainArea .ballon a.modalwin img { margin-bottom: 9px;}

#mainArea .ballon .update { zoom: 1; margin-top: 10px;}
#mainArea .ballon .update:after { content: ""; display: block; clear: both;}
#mainArea .ballon .update li { float: left; display: inline; margin-right: 5px;}

#mainArea .ballon .nav li { position: absolute; top: 93px;}
#mainArea .ballon.down .nav li { position: absolute; top: 78px;}
#mainArea .ballon .nav li.next { right: -13px;}
#mainArea .ballon .nav li.prev { left: -13px;}
#mainArea .ballon a:hover img {
	-webkit-transition: 0;
	moz-transition: 0;
	-o-transition: 0;
	transition: 0;
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}

.ballon#ballon01 { margin: -78px 0 0 -169px; }
.ballon#ballon02 { margin: -170px 0 0 -172px; }
.ballon#ballon03 { margin: -80px 0 0 -172px; }
.ballon#ballon04 { margin: -170px 0 0 -172px; }
.ballon#ballon05 { margin: -75px 0 0 -170px; }
.ballon#ballon06 { margin: -170px 0 0 -172px; }
.ballon#ballon07 { margin: -75px 0 0 -170px; }
.ballon#ballon08 { margin: -170px 0 0 -172px; }
.ballon#ballon09 { margin: -78px 0 0 -172px; }
/* sliderArea
 -------------------------------------------------- */
#sliderArea { width: 100%; background: url(../img/slider_bg_line.gif) repeat-x left top; position: absolute; bottom:0; left:0; z-index: 5;}
#sliderArea .wrap { width: 880px; margin: 0 auto; height: 64px; position: relative;}
.linkpoint ul { zoom: 1; padding: 0 1px; width: 880px; margin-left: -38px;}
.linkpoint ul:after { content: ""; display: block; clear: both;}
.linkpoint ul li { text-align: center; float: left; display: inline; width: 76px; margin-left: 24px;}
.linkpoint ul li.first { margin-left: 0;}
.linkpoint ul li a { height: 16px;}
.linkpoint ul li span { display: block; padding-top: 16px; background: url(../img/slider_bg_point.gif) no-repeat center 5px;}

#slider { width: 800px; margin: 0 auto; position: absolute; top:0; left:38px;}
#gentenDay02 #slider{ width: 100px;}
#gentenDay03 #slider{ width: 200px;}
#gentenDay04 #slider{ width: 300px;}
#gentenDay05 #slider{ width: 400px;}
#gentenDay06 #slider{ width: 500px;}
#gentenDay07 #slider{ width: 600px;}
#gentenDay08 #slider{ width: 700px;}
#gentenDay09 #slider{ width: 800px;}

/*
 * jQuery UI Slider 1.8.18
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 * http://docs.jquery.com/UI/Slider#theming
 */
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 76px; height: 17px; margin-top: 1px; margin-left: -38px;cursor: pointor; top: 0;}
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: 16px; z-index: 2;}
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* Interaction states */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; background: url(../img/slider_hand.gif) no-repeat 0 0; z-index: 3;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	color: #555555/*{fcDefault}*/; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	background: url(../img/slider_hand.gif) no-repeat 0 100%; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
.ui-state-hover a, .ui-state-hover a:hover {
	color: #212121/*{fcHover}*/; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	 font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: #212121/*{fcActive}*/; text-decoration: none; }
.ui-widget :active { outline: none; }

/* modal
 -------------------------------------------------- */
#MW_overlay { position: absolute; top: 33px; left: 0px; height:100%; width:100%; z-index:100; background-color:#fff; display:none;}
#MW_window {
	position: absolute; top:33px; left:0;
	width: 100%; overflow-x: hidden;
	color:#000; text-align:left;
	z-index: 102; display:none;
}
#modal { width: 880px; margin: 32px auto 0; padding-bottom: 60px; position: relative;}
#modal .column { overflow: hidden; padding-top: 60px;}
#modal .date { font-size: 21px; font-weight: bold;}
#modal .date .place { padding-left: 15px; font-size: 16px;}
#modal .date .lat { padding-left: 15px; font-size: 11px; font-weight: normal;}
#modal .photo { float: left; display: inline; width: 460px; margin-top: 25px;}
#modal .text { zoom: 1; overflow: hidden; margin-top: 20px; font-size: 12px; line-height: 2;}

#modalnav { position: absolute; top: 0; left: 0;}
#modalnav li { position: absolute; top: 0; width: 110px; vertical-align: middle; z-index:200;}
#modalnav li#mwnext { left: 792px;}
#modalnav li#mwprev { left: 629px; text-align: right;}
#modalnav li#mwclose { left: 748px; width: 29px;}
#modalnav li span { padding: 0 10px; font-size: 10px;}
#modalnav li img { vertical-align: middle;}
#modalnav li a { text-decoration: none; display: block;}
#modalnav li a:hover { color: #999999;}
#modalnav li a:hover img {
	-webkit-transition: 0;
	moz-transition: 0;
	-o-transition: 0;
	transition: 0;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}

/* .authorLink
 -------------------------------------------------- */
#lightBox {z-index: 5;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.authorLink {position: absolute;padding-top: 15px;}
.authorLink dt {float: left;margin: 2px 0;background: url(../img/profbutton_over.png) no-repeat 0 -20px;font-size: 1px;line-height: 1px;}
.authorLink dt:hover {background: url(../img/profbutton_over.png) no-repeat 0 0;}
.authorLink dt:hover img {visibility: hidden;}
.authorLink dd {z-index: 999;position: absolute;clear: both;top: 38px;left: 159px;width: 562px;height: 283px;padding: 5px;background: url(../img/profbg.png) no-repeat 0 0;}
.authorLink dd h3 {padding: 30px 0 0 40px;}
.authorLink dd p {padding: 18px 58px 0 44px;line-height: 20px;}
.authorLink dd p.close {position: absolute;top: 33px;left: 512px;padding: 0;cursor: pointer;}
.authorLink dd p.close:hover {filter: alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}