@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;}
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{
	background: #ffffff url("../img/bg_body.png") repeat left top;
	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: #666666;
	-webkit-text-size-adjust:none;
	border-left: 10px solid #78DCD9;
	border-right: 10px solid #78DCD9;
	min-width: 1000px;
}

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


/* -- 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;
}

.txtS{
	font-size: .8em;
}
.txtL{
	font-size: 1.2em;
}

.imgLeft{
	float: left;
	margin: 0 20px 10px 0;
}
.imgRight{
	float: right;
	margin: 0 0 10px 20px;
}

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

.noBreak{
	white-space: nowrap;
}

.note{
	font-size: .8em;
	margin-left: 1.2em;
}
.note span{
	margin-left: -1em;
}
ul.note{
	margin-left: 0;
}
ul.note li{
	margin-left: 1.2em;
}
ul.note li span{
	margin-left: -1em;
}

ol{
	margin-left: 2em;
}

.disc{
	list-style: disc;
	margin-left: 1.2em;
}

a.alpha:hover{
	opacity:0.7;
}


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

/* ----------------------------
 == headerArea
---------------------------- */
#headerArea{
	border-top: 2px solid #ffe700;
	background: #ffffff;
	margin: 0 -10px;
	padding: 0;
	position: relative;
	z-index: 100;
}
#headerArea:after{
	display: block;
	content: "";
	background: transparent url("../img/bg_shadow.png") repeat-x left top;
	height: 4px;
	position: relative;
	bottom: -4px;
}

#headerBlock{
	width: 1000px;
	margin: 0 auto;
	padding: 23px 0 0 0;
	position: relative;
}
#headerBlock:after{
	content: ""; 
	display: block; 
	clear: both;
}
.index #headerBlock{
	padding-bottom: 10px;
}


#pageID{
	position: absolute;
	top: -5px;
	left: 0;
	color: #cccccc;
	font-size: .6em;
	font-weight: normal;
}

#siteID{
	width: 410px;
	margin: 0 0 10px 0;
	padding: 0;
	float: left;
}

#utilityBlock{
	width: 550px;
	margin: 25px 0 10px 0;
	padding: 0;
	float: right;
}
.jfscpLogo{
	margin: 5px 0 0 10px;
	padding: 0;
	float: right;
}

.searchBox{
	background: url("../img/bg_search.png") no-repeat left top;
	width: 124px;
	height: 16px;
	margin: 0 25px 0 20px;
	padding: 5px;
	font-size: 12px;
	float: right;
	
	display: none;
}
.searchBox input{
	width: 100px;
	height: 14px;
	margin: 0 8px 0 0;
	padding: 0;
	font-size: 12px;
	vertical-align: top;
	border: 0px solid #ffffff;
}
.searchBox img{
	margin: 0;
	padding: 0;
	vertical-align: top;
}

.fontsizeBox{
	width: 120px;
	margin: 6px 0 0 0;
	padding: 0;
	float: right;
	height: 20px;
	overflow: hidden;
}
.fontsizeBox dt{
	float: left;
	margin: 0;
	padding: 0;
	vertical-align: top;
}
.fontsizeBox dt img{
	margin: 6px 0 0 0;
	padding: 0;
	vertical-align: top;
}
.fontsizeBox dd{
	float: left;
	width: 65px;
	margin: 0;
	padding: 0;
	vertical-align: top;
	overflow: hidden;
}
.fontsizeBox dd span{
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	margin: 0 0 0 5px;
	padding: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	float: left;
	cursor: pointer;
}
.fontsizeBox dd span.fontS{
	background-image: url("../img/font_s.png");
	background-position: 0 0;
	width: 14px;
	height: 14px;
	margin-top: 6px;
}
.fontsizeBox dd span.fontM{
	background-image: url("../img/font_m.png");
	background-position: 0 0;
	width: 16px;
	height: 16px;
	margin-top: 4px;
}
.fontsizeBox dd span.fontL{
	background-image: url("../img/font_l.png");
	background-position: 0 0;
	width: 20px;
	height: 20px;
}
.fontsizeBox dd span.fontS:hover,
.fontsizeBox dd span.fontS.textresizer-active{
	background-position: 0 -14px;
}
.fontsizeBox dd span.fontM:hover,
.fontsizeBox dd span.fontM.textresizer-active{
	background-position: 0 -16px;
}
.fontsizeBox dd span.fontL:hover,
.fontsizeBox dd span.fontL.textresizer-active{
	background-position: 0 -20px;
}



#gnavBlock{
	margin: 0;
	padding: 0;
	clear: both;
}

#gnavBlock > ul{
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
#gnavBlock > ul:after{
	content: ""; 
	display: block; 
	clear: both;
}
#gnavBlock > ul > li{
	margin: 0;
	padding: 0;
	float: left;
	height: 91px;
	position: relative;
}
#gnavBlock > ul > li > img{
	margin: 0;
	padding: 0;
}
#gnavBlock > ul > li > a{
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	width: 200px;
	height: 95px;
	margin: 0;
	padding: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	z-index: 200;
}
#gnavBlock > ul > li > a:hover{
	background-position: 0 -95px;
}

#gnavBlock > ul > li#navAdult > a{
	background-image: url("../img/gnav_adult.png");
}
#gnavBlock > ul > li#navPremama > a{
	background-image: url("../img/gnav_premama.png");
}
#gnavBlock > ul > li#navChild > a{
	background-image: url("../img/gnav_child.png");
}
#gnavBlock > ul > li#navXylitol > a{
	background-image: url("../img/gnav_xylitol.png");
}
#gnavBlock > ul > li#navList > a{
	background-image: url("../img/gnav_list.png");
}

#gnavBlock > ul > li#navAdult > ul{
	background-color: #ff8658;
	width: 305px;
}
#gnavBlock > ul > li#navAdult > ul > li > a:hover{
	background-color: #f7956e;
}
#gnavBlock > ul > li#navChild > ul{
	background-color: #6dd4de;
	width: 200px;
}
#gnavBlock > ul > li#navChild > ul > li > a:hover{
	background-color: #7dd5e1;
}
#gnavBlock > ul > li#navXylitol > ul{
	background-color: #56d299;
	width: 295px;
}
#gnavBlock > ul > li#navXylitol > ul > li > a:hover{
	background-color: #6ad4a4;
}


#gnavBlock ul.sNav{
	margin: -1px 0 0 0;
	padding: 0;
	position: absolute;
	top: 95px;
	left: 0;
	display: none;
	z-index: 100;
}
#gnavBlock ul.sNav li{
	margin: 0;
	padding: 0;
	border-top: 1px solid #ffffff;
}
#gnavBlock ul.sNav li a{
	background-image: url("../img/snav.png");
	background-repeat: no-repeat;
	display: block;
	height: 40px;
	margin: 0;
	padding: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	color: #ffffff;
	text-decoration: none;
}

#gnavBlock li#navAdult ul.sNav li a{
	width: 305px;
}
#gnavBlock ul.sNav li.sNavAdult01 a{
	background-position: 0 0;
}
#gnavBlock ul.sNav li.sNavAdult02 a{
	background-position: 0 -40px;
}
#gnavBlock ul.sNav li.sNavAdult03 a{
	background-position: 0 -80px;
}
#gnavBlock ul.sNav li.sNavAdult04 a{
	background-position: 0 -120px;
}
#gnavBlock ul.sNav li.sNavAdult05 a{
	background-position: 0 -160px;
}

#gnavBlock li#navChild ul.sNav li a{
	width: 200px;
}
#gnavBlock ul.sNav li.sNavChild01 a{
	background-position: -305px 0;
}
#gnavBlock ul.sNav li.sNavChild02 a{
	background-position: -305px -40px;
}
#gnavBlock ul.sNav li.sNavChild03 a{
	background-position: -305px -80px;
}
#gnavBlock ul.sNav li.sNavChild04 a{
	background-position: -305px -120px;
}

#gnavBlock li#navXylitol ul.sNav li a{
	width: 295px;
}
#gnavBlock ul.sNav li.sNavXylitol01 a{
	background-position: -505px 0;
}
#gnavBlock ul.sNav li.sNavXylitol02 a{
	background-position: -505px -40px;
}
#gnavBlock ul.sNav li.sNavXylitol03 a{
	background-position: -505px -80px;
}



/* ----------------------------
 == bnArea
---------------------------- */

#bnArea{
	background: #ffffff url("../img/bg_bnarea.png") repeat left top;
	margin: 0;
	padding: 30px 0;
}

#bnArea ul{
	margin: 0 auto;
	padding: 0;
	text-align: center;
	letter-spacing: -.4em;
}
#bnArea ul li{
	display: inline;
	margin: 0 2px;
	padding: 0;
	letter-spacing: normal;
}




/* ----------------------------
 == footerArea
---------------------------- */
#footerArea{
	background: #ffffff;
	margin: 0 -10px;
	padding: 0;
	position: relative;
	z-index: 100;
	border-top: 2px solid #FFE700;
	color: #606b6f;
	font-size: .8em;
}
#footerArea a,
#footerArea a:link,
#footerArea a:visited,
#footerArea a:hover,
#footerArea a:active{
	color: #606b6f;
	text-decoration: none;
}
#footerArea a:hover,
#footerArea a:active{
	text-decoration: underline;
}

#footerBlock{
	width: 1000px;
	margin: 0 auto;
	padding: 10px 0;
	position: relative;
}
#footerBlock:after{
	content: ""; 
	display: block; 
	clear: both;
}
#fnavBlock{
	width: 600px;
	margin: 0;
	padding: 0;
	float: left;
}
#fnavBlock ul{
	margin: 0 -20px 0 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}
#fnavBlock ul li{
	margin: 0 20px 0 0;
	padding: 0;
	float: left;
}
#fnavBlock ul li a:before{
	content: ">";
	margin: 0 5px 0 0;
	padding: 0;
}
#copyrightBlock{
	width: 300px;
	margin: 0;
	padding: 0;
	float: right;
	text-align: right;
}
#copyrightBlock p{
	margin: 0;
	padding: 0;
}


/* ----------------------------
 == contentsArea
---------------------------- */
#contentsArea{
	background: #ffffff;
	width: 920px;
	margin: 0 auto;
	padding: 20px 40px;
}
#topicPathBlock{
	margin: -20px -40px 0 -40px;
	padding: 15px 40px 20px 40px;
	font-size: .8em;
	color: #ffffff;
}
#topicPathBlock p{
	margin: 0;
	padding: 0;
}
#topicPathBlock a,
#topicPathBlock a:link,
#topicPathBlock a:visited,
#topicPathBlock a:hover,
#topicPathBlock a:active{
	color: #ffffff;
}

#contentsArea .mainTitle{
	margin: -20px -40px 0 -40px;
	padding: 20px 40px 20px 40px;
}
#contentsArea .sMainTitle{
	font-size: 2.57em;
	line-height: 1.2;
	margin: 0 0 20px 0;
	padding: 50px 190px 0 0;
	min-height: 140px;
}

#contentsArea h2{
	font-size: 1.86em;
	line-height: 1.2;
}
#contentsArea h3{
	padding-left: 15px;
	font-size: 1.86em;
	line-height: 1.2;
}
#contentsArea h4{
	margin: 1em 0 .5em 0;
	font-size: 1.86em;
	content: "◎";
}
#contentsArea h4:before{
	content: "◎";
}



/* ----------------------------
 == pageTopLinkArea
---------------------------- */
.pageTopAncher{
	margin: 20px 0;
	padding: 0;
	text-align: right;
}
.pageTopAncher *{
	margin: 0;
	padding: 0;
}


/* ----------------------------
 == contentsInner Style
---------------------------- */

.sectionBlock{
	margin: 30px 0;
	padding: 0;
}
.sectionBlock:after{
	content: "";
	display: block;
	clear: both;
}


.sectionBox{
	margin: 10px 0;
	padding: 0;
}
.sectionBox:after{
	content: "";
	display: block;
	clear: both;
}

.balloonBox{
	margin: 35px 0 50px 0;
	padding: 10px 40px;
	border: 1px solid #78dcd9;
	position: relative;
}
.balloonBox:after{
	content: url("../img/img_dent.png");
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -31px;
	right: -1px;
	line-height: 1;
	display: block;
}


.boxBase01{
	margin: 30px 0;
	padding: 5px 20px;
	border: 2px solid #78dcd9;
	position: relative;
}
#contentsArea .boxBase01 *{
	margin: .5em 0;
	padding: 0;
}



.imgRightBox .txtBox{
	float: left;
}
.imgRightBox .imgBox{
	float: right;
}
.imgLeftBox .txtBox{
	float: right;
}
.imgLeftBox .imgBox{
	float: left;
}


.imgBox .caption{
	display: block;
	text-align: center;
	margin-top: 5px;
}


.wBase01 .txtBox{
	width: 670px;
}
.wBase01 .imgBox{
	width: 180px;
	padding-top: 20px;
}
.wBase02 .txtBox{
	width: 660px;
}
.wBase02 .imgBox{
	width: 210px;
	padding-top: 20px;
}
.wBase03 .txtBox{
	width: 570px;
}
.wBase03 .imgBox{
	width: 300px;
	padding-top: 20px;
}
.wBase04 .txtBox{
	width: 490px;
}
.wBase04 .imgBox{
	width: 380px;
	padding-top: 20px;
}

/* local nav */

.lnav{
	margin: 30px -20px 30px 0;
	padding: 0;
}
.lnav:after{
	content: ""; 
	display: block;
	clear: both;
}
.lnav li{
	width: 215px;
	margin: 0 20px 0 0;
	padding: 0;
	float: left;
}
.lnav li a{
	display: block;
	padding: 15px;
	color: #666666;
	text-decoration: none;
}
.lnav li a:hover{
	opacity: 0.7;
}
.lnav li img{
	margin: -15px -15px 0 -15px;
	padding: 0;
}
.lnav li span{
	display: block;
	margin: 10px 0;
	padding: 0;
	font-weight: bold;
	font-size: 1.71em;
	line-height: 1.2;
}