@charset "UTF-8";



/* HTML5 CSS
------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

/*------------------
 == reset
--------------------*/
html, body {margin: 0;padding: 0;border: 0; height: 100%;}
body {font-size: 76%;line-height: 1.5;-webkit-text-size-adjust:none;}

a{cursor: pointer;}
img{border: 0;vertical-align: bottom;}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl {margin: 1em 0;padding: 0;font-size: 1em;}
em, address {font-style: normal;}
input,textarea{font-size: 100%;}
ul{list-style: none;}
ol li{padding: 2px 0;}

table {border-collapse: collapse;border-spacing: 0;}
th {text-align: left;font-style: normal;}

sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}

fieldset {border: 0;}

address,caption,cite,code,dfn,em,strong,th,var{font-style: normal;font-weight: normal;}

/* ----------------------------
 == Common
---------------------------- */

body{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 1.6;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	color: #333333;
	-webkit-text-size-adjust:none;
	min-width: 960px;
}
@media screen and (max-width:640px){
	body{
		min-width: 0px;
	}
}

a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #000000; text-decoration: none;}
a:active {color: #000000;}

.listTxt a:hover {color: #339933; text-decoration: none;}
.listTxt a:active {color: #339933;}


img{
	max-width: 100%;
	height: auto;
	width /***/: auto;
}

/* -- clearfix Style -------------------- */

.clearfix {zoom:1;}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}

/* -- text Style -------------------- */
sup{
	vertical-align: .3em;
}
sub{
	vertical-align: -.2em;
}

em{
	font-weight: bold;
}
strong{
	font-weight: bold;
	color: #ff0000;
}

.imgLeft{
	float: left;
	margin: 0 20px 10px 0;
}
.imgRight{
	float: right;
	margin: 0 0 10px 20px;
}
@media screen and (max-width:640px){
.imgLeft{
	display: block;
	float: none;
	margin: 1em 0;
}
.imgRight{
	display: block;
	float: none;
	margin: 1em 0;
}
}

.txtLeft{
	text-align: left;
}
.txtRight{
	text-align: right;
}
.txtCenter{
	text-align: center;
}

.txtS{
	font-size: .86em;
}
.txtL{
	font-size: 1.15em;
}

.attentionTxt{
	color: #ff0000;
}

.noBreak{
	white-space: nowrap;
}

.note{
	font-size: .86em;
	margin-left: 1.4em;
}
.note span{
	margin-left: -1.4em;
	margin-right: .4em;
}

.note02{
	font-size: .86em;
	margin-left: 2em;
}
.note02 span{
	margin-left: -2em;
	margin-right: .4em;
}


ul.note{
	margin-left: 0;
}
ul.note li{
	margin-left: 1.4em;
}
ul.note li span{
	margin-left: -1.4em;
}

ul.note02{
	margin-left: 0;
}
ul.note02 li{
	margin-left: 2em;
}
ul.note02 li span{
	display: inline-block;
	width: 2em;
	margin-left: -2em;
	margin-right: .4em;
}




/* ------------------------------------------------------------------------------------
 == Layout
------------------------------------------------------------------------------------ */

#container{
	overflow: hidden;

  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}
@media screen and (max-width:640px){
	#container{
		width: 100%;
	}
}
/* ----------------------------
 == bgObj
---------------------------- */
.bgObj {
	position: relative;
	width: 955px;
	min-width: 955px;
	margin:  0 auto;
	padding: 0;
}
.bgObj > div {
	position: absolute;
}

/* ----------------------------
 == headerArea
---------------------------- */
#headerArea{
	background: #ffffff;
	margin: 0;
	padding: 0;
	height: 260px;
	overflow: hidden;
	position: relative;
	z-index: 4;
}

#headerBlock{
	width: 960px;
	height: 96px;
	margin: 72px auto 0 auto;
	padding: 0;
	position: relative;
}
#siteID{
	margin: -8px 0 0 368px;
	padding: 0 0 0 0;
	float: left;
	zoom: 1;
}
.uNavBox{
	margin: 0;
	padding: 0;
}
.uNavBox ul{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.uNavBox ul li{
	width: 158px;
	margin: 0;
	padding: 0;
	border-left: 1px solid #eaeae8;
	border-right: 1px solid #eaeae8;
}

#uNavOpen{
	position: absolute;
	top: -16px;
	left: 0;
}
#uNavInformation{
	position: absolute;
	top: -16px;
	left: 159px;
}
#uNavCalendar{
	position: absolute;
	top: -16px;
	right: 159px;
}
#uNavAccess{
	position: absolute;
	top: -16px;
	right: 0;
}


#utilityBlock{
	background: #b4e17c;
	width: 100%;
	height: 36px;
	position: absolute;
	top: 0;
	left: 0;
}
#utilityBlockInner{
	background: url("/common/img/bg_flag.png") no-repeat left top;
	width: 960px;
	margin: 0 auto;
	padding: 4px 0 0 0;
	z-index: 5;
	position: relative;
}
#utilityBlockInner:after{
	content: "";
	display: block;
	clear: both;
}
#utilityBlockInner .tabLinkBox{
	margin: 0;
	padding: 0;
	float: right;
}
#utilityBlockInner .tabLinkBox li{
	margin: 0 0 0 3px;
	padding: 0;
	float: right;
}
#utilityBlockInner .languageBox{
	font-size: 12px;
	margin: 9px 30px 0 30px;
	padding: 0;
	float: right;
	overflow: hidden;
	position: relative;
	z-index: 100;
}
#utilityBlockInner .languageBox p{
	margin: 0;
	padding: 0;
}
#utilityBlockInner .languageBox a:before{
	content: url("/common/img/arrow_r02.png");
	margin: 0 .5em 0 0;
	padding: 0;
	vertical-align: -.1em;
}

#utilityBlockInner .musicBox{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	margin: 0;
	padding: 0;
	cursor: pointer;
	/*background-image: url("/common/img/_img_header.png");*/
	height: 140px;
	width: 310px;
	display: none;
}
.musicBg {
	position: absolute;
	top: 0;
	left: 31px;
}
.musicBox .play_P {
	position: absolute;
	top: 110px;
	left: 50px;
}
.musicBox .play_L {
	position: absolute;
	top: 110px;
	left: 70px;
}
.musicBox .play_A {
	position: absolute;
	top: 110px;
	left: 90px;
}
.musicBox .play_Y {
	position: absolute;
	top: 110px;
	left: 110px;
}
.musicBox .note_L {
	position: absolute;
	top: 20px;
	left: 0;
}
.musicBox .note_R1 {
	position: absolute;
	top: 0;
	left: 125px;
}
.musicBox .note_R2 {
	position: absolute;
	top: 70px;
	left: 115px;
}
.musicBox .kobito {
	position: absolute;
	top: 44px;
	left: 128px;
}
.musicBox .tori {
	position: absolute;
	top: 57px;
	left: 190px;
	width: 25px;
	height: 26px;
	margin-top: 220px;
	z-index: 10000;
}


#utilityBlockInner .searchBox{
	margin: 4px 20px 0 0;
	padding: 0;
	float: right;
	line-height: 1;
	width: 140px;
	text-align: right;
}
#utilityBlockInner .searchBox *{
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 12px;
	height: auto;
}

#utilityBlockInner .searchBox #gsc-iw-id1 {
	background: #ffffff;
	width: 120px;
	margin: 0;
	padding: 3px 3px;
	border-radius: 4px 0 0 4px;
	line-height: 1;
}

#utilityBlockInner .searchBox td.gsc-search-button {
	margin: 0;
	padding: 2px 0 0 0;
	border-radius: 0 4px 4px 0;
}
#utilityBlockInner .searchBox input.gsc-search-button {
	background: #39a428;
	margin: 0;
	padding: 3px 3px;
	border: 1px solid #39a428 !important;
	border-radius: 0 4px 4px 0;
}




#gNavBlock{
	background: #39a428;
	height: 92px;
}
#gNav{
	background: url("/common/img/gnav.png") no-repeat 0 0;
	width: 959px;
	margin: 0 auto;
	padding: 0 0 0 1px;
	overflow: hidden;
}
#gNav li{
	width: 127px;
	height: 92px;
	margin: 0;
	padding: 0 1px 0 0;
	float: left;
}
#gNav li a{
	background-image: url("/common/img/gnav.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	width: 127px;
	height: 92px;
	margin: 0;
	padding: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#gNav #navTop{
	width: 62px !important;
}
#gNav #navTop a{
	background-position: -1px 0;
	width: 62px !important;
}
#gNav #navTop a:hover{
	background-position: -1px -92px;
}
#gNav #navTop.current a{
	background-position: -1px -184px;
}

#gNav #navGuidemap a{
	background-position: -64px 0;
}
#gNav #navGuidemap a:hover{
	background-position: -64px -92px;
}
#gNav #navGuidemap.current a{
	background-position: -64px -184px;
}

#gNav #navYugu a{
	background-position: -192px 0;
}
#gNav #navYugu a:hover{
	background-position: -192px -92px;
}
#gNav #navYugu.current a{
	background-position: -192px -184px;
}

#gNav #navNorimono a{
	background-position: -320px 0;
}
#gNav #navNorimono a:hover{
	background-position: -320px -92px;
}
#gNav #navNorimono.current a{
	background-position: -320px -184px;
}

#gNav #navSports a{
	background-position: -448px 0;
}
#gNav #navSports a:hover{
	background-position: -448px -92px;
}
#gNav #navSports.current a{
	background-position: -448px -184px;
}

#gNav #navFood a{
	background-position: -576px 0;
}
#gNav #navFood a:hover{
	background-position: -576px -92px;
}
#gNav #navFood.current a{
	background-position: -576px -184px;
}

#gNav #navBokujyo a{
	background-position: -704px 0;
}
#gNav #navBokujyo a:hover{
	background-position: -704px -92px;
}
#gNav #navBokujyo.current a{
	background-position: -704px -184px;
}

#gNav #navNature a{
	background-position: -832px 0;
}
#gNav #navNature a:hover{
	background-position: -832px -92px;
}
#gNav #navNature.current a{
	background-position: -832px -184px;
}


/* ----------------------------
 == footerArea
---------------------------- */
#footerArea{
	background: url("/common/img/bg_footer.png");
	margin: 140px 0 0 0;
	padding: 0;
	position: relative;
	font-size: 12px;
	width: 100%;
	position: absolute;
	bottom: 0;
}
#footerArea:before{
	content: "";
	display: block;
	width: 100%;
	height: 140px;
	background: url("/common/img/bg_footerimg.png") center top;
	margin: 0 0 -140px 0;
	padding: 0;
	position: relative;
	top: -140px;
}
#footerArea:after{
	content: "";
	display: block;
	clear: both;
}
 @media screen and (max-width:640px){
	#footerArea{
		width: 100%;
	}
}

#footerimg2 {
	position: absolute;
	width: 100%;
	height: 100px;
}

#footerBlock{
	width: 960px;
	margin: 0 auto;
	padding: 20px 0 40px 0;
	overflow: hidden;
	position: relative;
}
@media screen and (max-width:640px){
	#footerBlock{
		width: auto;
	}
}

#footerBlock a:link {color: #333333;}
#footerBlock a:visited {color: #333333;}
#footerBlock a:hover {color: #339933;}
#footerBlock a:active {color: #339933;}

#footerBlock .fNavAbout > ul li a:hover {color: #333333;}
#footerBlock .fNavAbout > ul li a:active {color: #333333;}

#accessBox{
	width: 445px;
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}
@media screen and (max-width:640px){
	#accessBox{
		width: auto;
		padding: 0 10px;
		float: none;
		border-right: 0px solid #b9ef5b;
	}
}

#accessBox p{
	margin: 5px 0;
	padding: 0;
}
#accessBox address{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
	right: 16px;
}
#accessBox a:before{
	content: url("/common/img/arrow_r01.png");
	vertical-align: -.4em;
	margin-right: .3em;
}
#accessBox a{
	display: inline-block;
	text-decoration: none;
	margin: .3em 0 0 0;
}

#fNavBox{
	width: 480px;
	margin: 0;
	padding: 0;
	float: right;
}
@media screen and (max-width:640px){
	#fNavBox{
		width: 100%;
		padding: 0 10px;
		float: none;
	}
}

#fNav > li{
	width: 140px;
	display: inline-block;
	margin: .5em 1em .5em 0;
	padding: 0;
	vertical-align: top;
}
#fNav > li > ul li{
	margin: .5em 0;
	padding: 0;
}
#fNav > li  a{
	display: inline-block;
	text-decoration: none;
	margin: .3em 0 0 0;
}
#fNav > li  a:before{
	content: url("/common/img/arrow_r02.png");
	margin-right: .3em;
}



#copyrightBlock{
	background: #ffffff;
	margin: 0;
	padding: 0;
}
#copyrightBlock p{
	width: 960px;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	font-size: .8em;
}
@media screen and (max-width:640px){
	#copyrightBlock p{
		width: 100%;
	}
}


/* ----------------------------
 == topicPathArea
---------------------------- */
#topicPathArea{
	width: 960px;
	margin: 0 auto;
	padding: 5px 0;
	font-size: 12px;
}
@media screen and (max-width:640px){
	#topicPathArea{
		width: auto;
	}
}
.topicPathList{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}
@media screen and (max-width:640px){
	.topicPathList{
		text-align: left;
	}
}
.topicPathList li{
	display: inline;
	margin: 0;
	padding: 0;
}
.topicPathList li:before{
	content: "＞";
	margin: 0 .3em;
	padding: 0;
}
.topicPathList li img{
	vertical-align: -.1em;
}
.topicPathList li.homeLink:before{
	content: "";
}


/* ----------------------------
 == pageTopLinkArea
---------------------------- */
#pageTopAncer{
	/*position: absolute;*/
	position: fixed;
	right: 0;
	bottom: 0;
	margin-right: 40px;
	margin-bottom: 20px;
	z-index: 99;
	/*display: none;*/
}
.pageTop_com {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
@media screen and (max-width:640px){
	#pageTopAncer{
		display: none !important;
	}
}

/* ----------------------------
 == doBtnArea
---------------------------- */
#doBtnArea{
	position: relative;
	position: fixed;
	top: 420px;
	right: 0;
	z-index: 99;
}
@media screen and (max-width:640px){
	#doBtnArea{
		display: none;
	}
}

/* doSearchArea
------------------------------------- */

#doSearchArea{
	background: #ffffff;
	width: 512px;
	height: 548px;
	margin: -274px 0 0 -256px;
	/*margin: 0 0 0 -256px;*/
	padding: 35px;
	border: 4px solid #303030;
	border-radius: 10px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
	display: none;
}
#doSearchBg {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 999;
	display: none;
}
#doSearchArea h2{
	text-align: center;
	margin: 0 !important;
	padding: 0 0 30px 0 !important;
	border-bottom: 3px solid #e7e7e7;
}

#doSearchArea ul{
	margin: 30px -29px 0 0;
	padding: 0;
	overflow: hidden;
}
#doSearchArea ul li{
	margin: 0 29px 30px 0;
	padding: 0;
	float: left;
}
#doSearchArea ul li a:hover{
	opacity:0.6;
}

#doSearchArea .closeBtn{
	margin: 0;
	padding: 0;
	position: absolute;
	top: -25px;
	right: -25px;
}




/* ----------------------------
 == contentsArea
---------------------------- */
#contentsArea{
	width: 960px;
	margin: 0 auto;
	padding: 15px 0;
	padding-bottom: 430px!important;
	position: relative;
}
#contentsArea:after{
	content: "";
	display: block;
	clear: both;
}
@media screen and (max-width:640px){
	#contentsArea{
		width: 100%;
	}
}

#mainBlock{
	width: 715px;
	margin: 0;
	padding: 0;
	float: right;
}
@media screen and (max-width:640px){
	#mainBlock{
		width: auto;
		float: none;
	}
}


#subBlock{
	width: 220px;
	margin: 0;
	padding: 0 0 100px 0;
	float: left;
}
@media screen and (max-width:640px){
	#subBlock{
		width: auto;
		margin: 2em 0;
		padding: 0;
		float: none;
	}
}

#contentsArea > *:first-child,
#mainBlock > *:first-child,
#subBlock > *:first-child{
	margin-top: 0;
}

#readBlock{
	margin: -1.5em 0 2em 0;
	padding: 0 10px;
}



/* ----------------------------
 == contentsInner Style
---------------------------- */
.sectionBox{
	background: #ffffff;
	margin: 20px 0;
	padding: 15px 30px;
	border-radius: 10px;
	position: relative;
}

/* -- subnav Style -------------------- */
.subNavBox{
	background: #ffffff;
	margin: 0;
	padding: 0;
	border-radius: 10px;
	font-size: .86em;
}
.subNavBox a{
	text-decoration: none;
}

.subNavBox dt{
	background: #fccf20;
	display: block;
	margin: 0;
	padding: 15px 10px 10px 10px;
	text-align: center;
	border-radius: 10px 10px 0 0;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1;
}
.subNavBox dd{
	display: block;
	margin: 0;
	padding: 0;
}
.subNavList{
	margin: 0;
	padding: 0;
}
.subNavList li{
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #f6f6f6;
}
.subNavList li:last-child{
	border-bottom: 0px solid #f6f6f6;
}

.subNavList li a{
	display: block;
	margin: 0;
	padding: 10px;
}
.subNavList li a:before{
	content: url("/common/img/lm_arrow01.png");
	vertical-align: -.3em;
	margin-right: .3em;
}
.subNavList li.current a,
.subNavList li a:hover{
	background: #fffbeb;
}
.subNavList li:last-child.current a,
.subNavList li:last-child a:hover{
	background: #fffbeb;
	border-radius: 0 0 10px 10px;
}

/* -- guide link style -------------------- */
#guideBox{
	background: url("/common/img/bg_guide.png") no-repeat 0 0;
	width: 210px;
	height:240px;
	position: relative;
}
@media screen and (max-width:640px){
	#guideBox{
		display: none;
	}
}

#guideBox h2{
	display: none;
}
#guideBox ul{
	margin: 0;
	padding: 123px 0 0 27px;
}
#guideBox ul li{
	margin: 0 0 14px 0;
	padding: 0;
}

#guideBox ul li.babyBtn{
	margin: 0;
	position: absolute;
	top: 208px;
	left: 0;
}
#guideBox ul li.partyBtn{
	margin: 0;
	position: absolute;
	top: 222px;
	right: 0;
}


/* ----------------------------
 == Modal box
---------------------------- */

#modalOverlay{
	-webkit-transform: translate3d(0,0,1px);
	transform: translate3d(0,0,1px);
	z-index:100;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);
}

.modalBlock{
	width: 90%;
	max-width: 600px;
	/*max-height: 500px;*/
	overflow: auto;
	background: #ffffff;
	margin: 0 auto;
	margin-right: -100px;
	padding: 20px;
	position:absolute;
	top: 0;
	left: 50%;
	z-index:500;
	-webkit-transform: translate3d(0,0,1px);
	transform: translate3d(0,0,1px);
}
@media screen and (max-width:640px){
	.modalBlock{
		/*max-height: 400px;*/
		margin: 0 auto;
		top: 10px !important;
		left: 0;
	}
}

.modalBlock > *:first-child{
	margin-top: 0;
}

.modalBlock .closeBtn{
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
}

.modalClose{
	background-image: url("/common/img/sp_btn_close.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	width: 35px;
	height: 35px;
	margin: 0;
	padding: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-size: contain;
}