@charset "UTF-8";

/*
	太宰府天満宮 - sanpai.css
	Copyright c Since 2011Dazaifu-Tenmangu. All rights reserved.

	[Module]
		1. Common Module
	[Page]
*/


/* //////////////////////////////////////////////////
[Module] 
////////////////////////////////////////////////// */

/* --------------------------------------------------
	1. Common Module
-------------------------------------------------- */

/* background image
-------------------------------------------------- */
body { background:#333; }

/* //////////////////////////////////////////////////
[Page] 
////////////////////////////////////////////////// */

#content {
}
#siteFooter {
margin-top: 0px;
}


#contentInner {
	width:auto;
	margin:0 auto;
	
}

#main {
	height:562px;
	overflow:hidden;
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
	
	
	-webkit-transition-duration:3s;
	-moz-transition-duration:3s;
	-o-transition-duration:3s;
	transition-duration:3s;
	
	background:#f0f0f0 url(/img/homepage/bg.png);
}

#main.init {
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	
	-webkit-transition-duration:0s;
	-moz-transition-duration:0s;
	-o-transition-duration:0s;
	transition-duration:0s;
}

#naviView,
#photoView {
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	
	-webkit-transition-property:opacity,top;
	-moz-transition-property:opacity,top;
	-o-transition-property:opacity,top;
	transition-property:opacity,top;
	
	-webkit-transition-duration:3s,1.2s;
	-moz-transition-duration:3s,1.2s;
	-o-transition-duration:3s,1.2s;
	transition-duration:3s,1.2s;
	
	-webkit-transition-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	transition-timing-function:ease-in-out;
}


/* navi View modes
-------------------------------------------------- */
#naviView {
	position:relative;
	max-width:1280px;
	min-width:960px;
	height:562px;
	margin:0 auto;
}
#naviView .nav {
	position:relative;
	float:left;
	height:562px;
	overflow:hidden;
}
#naviView .nav .column{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:562px;
}
#naviView .nav .column h2{
	text-align:center;
	padding:42px 0 0;
}
#naviView .nav .column.hover ul{
	margin:0 auto;
}
#naviView .nav .column.hover ul li{
}
#naviView .nav .column.hover ul li .nolink{
	display:block;
	text-align:center;
	padding:3px 0;
}
#naviView .nav .column.hover ul li a{
	display:block;
	text-align:center;
	padding:3px 0;
	
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	transition-duration:1s;
}
#naviView .nav .column.hover ul li a:hover {
    display: block;
    position: relative;
    z-index: 5;
    background: #fff;
	background: rgba(255,255,255,0.5);
}
#naviView .nav .column.hover ul ul{
	padding-top:-10px;
	width:auto;
}

#naviView .nav .column.normal{
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
}
#naviView .nav.hover .column.normal{
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	
	-webkit-transition-duration:0.6s;
	-moz-transition-duration:0.6s;
	-o-transition-duration:0.6s;
	transition-duration:0.6s;
}
#naviView .nav .column.hover {
	opacity: 0;
	filter: Alpha(opacity=0);
	/*background: url(/img/common/bg_white.png);*/
    background-color: rgba(255, 255, 255, 0.5);
}
#naviView .nav.hover .column.hover{
	opacity:1;
    filter: alpha(opacity=100);
	
	-webkit-transition-duration:0.6s;
	-moz-transition-duration:0.6s;
	-o-transition-duration:0.6s;
	transition-duration:0.6s;
}

#naviView .nav.hover .column.hover .innerColumn {
    height: 100%;
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fffffff, endcolorstr=#7fffffff, gradienttype=0));
}
#naviView #nav1 {
	background-image:url(/img/homepage/naviview_nav1_bg.jpg);
	background-position:center top;
	width:33%;
}
#naviView #nav2 {
	background-image:url(/img/homepage/naviview_nav2_bg.jpg);
	background-position:right top;
	width:33%;
}
#naviView #nav3 {
	background-image:url(/img/homepage/naviview_nav3_bg.jpg);
	background-position:right top;
	width:34%;
}
#naviView #nav1 .column.hover ul{
	margin-top:-28px;
}
#naviView #nav2 .column.hover ul{
	margin-top:-28px;
}
#naviView #nav3 .column.hover ul{
	margin-top:-6px;
}

/* Photo view mode
-------------------------------------------------- */
#photoView {
	position:relative;
	
	max-width:1390px;
	height:562px;
	margin:0 auto;
}
#photoView #screen {
	position:relative;
	
	max-width:1280px;
	min-width:960px;
	height:562px;
	overflow:hidden;
	margin:0 auto;
}

#photoView .cover{
	height:562px;
	overflow:hidden;
	text-align:center;
	position:absolute;
	top:0;
	
	-webkit-transition-property:left, opacity;
	-moz-transition-property:left, opacity;
	-o-transition-property:left, opacity;
	-ms-transition-property:left, opacity;
	transition-property:left, opacity;
	
	-webkit-transition-duration:0s;
	-moz-transition-duration:0s;
	-o-transition-duration:0s;
	transition-duration:0s;
}
#photoView .cover.withAnimate {
	-webkit-transition-duration:2s;
	-moz-transition-duration:2s;
	-o-transition-duration:2s;
	transition-duration:2s;
}
#photoView .cover img{
	position:relative;
}

#initial_txt {
	position: absolute;
	text-align: center;
	top: 0px;
	left: 50%;
	z-index: 1;
	width: 30px;
    margin-left: -29px;
    margin-top: 26px;
	
	opacity:0;
	
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image, src='/img/homepage/leadtext.png');

	display:none;
}
    #initial_txt > img {
        visibility: hidden/9;
    }

#initial_txt.show{
	opacity:1;
	display:block;
	/*/*filter:Alpha(opacity=100)*/;*/
}

#btnPrev{
	position:absolute;
	top:50%;
	left:0%;
	z-index:2;
}
#btnNext{
	position:absolute;
	top:50%;
	right:0%;
	z-index:2;
}
#btnNext a,
#btnPrev a {
	display:block;
	position:relative;
	top:-27px;
}


/* Change mode
-------------------------------------------------- */
#btnPhoto {
	position:absolute;
	width:100%;
	text-align:right;
	z-index:3;
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	top:-10px;
	right:15px;
}
#btnNavi {
	position:absolute;
	width:100%;
	text-align:right;
	z-index:3;
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	top:-10px;
}
#btnNavi a{
	position:relative;
	right:15px;
}
#main.naviView #btnPhoto {
	display:block;
	top:0px;
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
	
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	transition-duration:1s;
	-webkit-transition-delay:1s;
	-moz-transition-delay:1s;
	-o-transition-delay:1s;
	transition-delay:1s;
}
#main.photoView #btnNavi {
	display:block;
	top:0px;
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
	
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	transition-duration:1s;
	-webkit-transition-delay:1s;
	-moz-transition-delay:1s;
	-o-transition-delay:1s;
	transition-delay:1s;
}

#main.photoView #btnPhoto {
	/*display:none;*/
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	top:-10px;
	
	-webkit-transition-duration:0.8s;
	-moz-transition-duration:0.8s;
	-o-transition-duration:0.8s;
	transition-duration:0.8s;
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;
}
#main.naviView #btnNavi {
	/*display:none;*/
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	top:-10px;
	
	-webkit-transition-duration:0.8s;
	-moz-transition-duration:0.8s;
	-o-transition-duration:0.8s;
	transition-duration:0.8s;
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;
}

#main.naviView #naviView,
#main.naviView #photoView{
	top:0px;
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
}

#main.photoView #naviView,
#main.photoView #photoView{
	top:-562px;
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
}

.disableUI .cover,
.disableUI #navSeason,
.disableUI #btnPhoto,
.disableUI #btnNavi,
.disableUI #btnPrev,
.disableUI #btnNext{
	display:none !important;
}
.disableUI .cover:first-child {
	display:block !important;
}

/* season navi
-------------------------------------------------- */
#navSeason{
	overflow:visible;
	z-index: 1;
	position: absolute;
	bottom: 0px;
	
	height:12px;
	
	-webkit-transition-duration:0.6s;
	-moz-transition-duration:0.6s;
	-o-transition-duration:0.6s;
	transition-duration:0.6s;
	
	-webkit-transition-property:height;
	-moz-transition-property:height;
	-o-transition-property:height;
	transition-property:height;
	
	background:#FFF;
	
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 5x rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 5x rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 5x rgba(0,0,0,0.3);
}

#navSeason .arrow {
	position:absolute;
	top:-8px;
	font-size:116%;
	height:6px;
	width:100px;
	background:#FFF;
	overflow:hidden;
	text-indent:-9999px;
	
	text-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-text-shadow: 0 0 5px rgba(0,0,0,0.3);
	-moz-text-shadow: 0 0 5x rgba(0,0,0,0.3);
	-ms-text-shadow: 0 0 5x rgba(0,0,0,0.3);
	-o-text-shadow: 0 0 5x rgba(0,0,0,0.3);
	
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 5x rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 5x rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 5x rgba(0,0,0,0.3);
	
	color:#fff;
}
#navSeason .arrow.withAnimate {
	-webkit-transition-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	transition-timing-function:ease-in-out;
	
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	transition-duration:1s;
}

#navSeason.show {
	height:40px;
}

#navSeason li{
	float:left;
	/* width:98px; */
	width:7.69%;
	background:transparent 0% 0% repeat;
	
	-webkit-transition-property:opacity;
	-moz-transition-property:opacity;
	-o-transition-property:opacity;
	transition-property:opacity;
	
	-webkit-transition-duration:2s;
	-moz-transition-duration:2s;
	-o-transition-duration:2s;
	transition-duration:2s;
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
	
}
#navSeason li:first-child{
	/* width:104px; */
	width:7.72%;
}

#navSeason li.current{
	opacity:0.65;
	/*filter:Alpha(opacity=65)*/;
	
}
#navSeason li a{
/*	text-indent:-9999px; 8*/
	display:block;
	text-align:center;
	color:#000;
	font-weight:700;
	font-family:serif;
	text-decoration:none;
	padding:4px 0 3px;
	
	opacity:0;
	/*filter:Alpha(opacity=0)*/;
	
	-webkit-transition-duration:0.6s;
	-moz-transition-duration:0.6s;
	-o-transition-duration:0.6s;
	transition-duration:0.6s;
}
#navSeason.show li a{
	opacity:1;
	/*filter:Alpha(opacity=100)*/;
}

#navSeason li.patternA{
	background-image: url(/img/homepage/photoview_seasonA.png);
}
#navSeason li.patternB{
	background-image: url(/img/homepage/photoview_seasonB.png);
}
#navSeason li.patternC{
	background-image: url(/img/homepage/photoview_seasonC.png);
}
#navSeason li.patternD{
	background-image: url(/img/homepage/photoview_seasonD.png);
}
#navSeason li.patternE{
	background-image: url(/img/homepage/photoview_seasonE.png);
}
#navSeason li.patternF{
	background-image: url(/img/homepage/photoview_seasonF.png);
}
#navSeason li.patternG{
	background-image: url(/img/homepage/photoview_seasonG.png);
}

/* Information Area
-------------------------------------------------- */
#information{
	position: relative;
	width:100%;
	margin:0 0 0;
	
	box-shadow: 0 -2px 3px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0 -2px 3px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 -2px 3px rgba(0,0,0,0.15);
	-ms-box-shadow: 0 -2px 3px rgba(0,0,0,0.15);
	-o-box-shadow: 0 -2px 3px rgba(0,0,0,0.15);
}
#informationInner {
	overflow:hidden;
	width:960px;
	margin:auto;
	position:relative;
}
#information  h2{
	padding:20px 10px 15px;
}
#information dl {
	padding: 9px 0 0;
	float:left;
	width:465px;
	margin:0 0 0 10px;
	background: url(/img/common/line_dot_01.png) repeat-x 0 0;
}

#information #btn_more{
	position:absolute;
	top:12px;
	right:10px;
}
#information dt {
	float:left;
	width:80px;
	color: #919596;
	font-weight: bold;
	font-size: 83%;
}
#information dd {
	position: relative;
	margin: 0 0 10px;
	padding: 0 80px 8px 10px;
	background: url(/img/common/line_dot_01.png) repeat-x 0 100%;
}
#information dd a{
	font-size: 116%;
}
#information dd a.cat {
	position: absolute;
	top: 0;
	/* left: 10px; */
	right: 10px;
	
	display: inline-block;
	
	padding: 3px 4px;
	color: #FFF;
	border-radius: 2px;
	font-size: 83%;
	font-weight: normal;
	line-height: 1;
	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	text-decoration: none;
	*zoom: 1; /* for IE6-7 */
	*display: inline; /* for IE6-7 */
}
#information .info     { background: #3c5d94; }
#information .event    { background: #f1c015; }
#information .treasure { background: #24a6c1; }
#information .history  { background: #b6690e; }
#information .nature   { background: #5f8c3e; }
#information .art      { background: #d35048; }
#information .other    { background: #666666; }




/* Banner Area
-------------------------------------------------- */
#bannerArea {
	position: relative;
	margin:0 0 10px;
}
#bannerAreaInner {
	width: 940px;
	overflow:hidden;
	margin: 0 auto;
}
#bannerArea .unitColumn4 {
	width: 984px;
	margin: 0 auto;
}
#bannerArea .unitColumn4 .column {
	float: left;
	margin-right: 14px;
	width: 226px;
}
#bannerArea .unitColumn4 .column .photo {
	margin-bottom: 5px;
}

#bannerArea .unitColumn5 {
	width: 984px;
	margin: 0 auto;
}
#bannerArea .unitColumn5 .column {
	float: left;
	margin-right: 7px;
	width: 183px;
}
#bannerArea .unitColumn5 .column .photo {
	margin-bottom: 5px;
}