@charset "UTF-8";

/***********************************************************
home.css
***********************************************************/
/* =========================================================
Module
========================================================= */
img.hover:hover,
img.hover:active {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

/* Language
--------------------------------------------------*/
#unit-language {
	margin-bottom: 5px;
}

#unit-language ul {
	text-align: right;
	letter-spacing: -.55em;
}

#unit-language ul li {
	display: inline-block;
	display: inline;
	letter-spacing: normal;
}

/* =========================================================
Layout
========================================================= */
#container {
	width: 930px;
	margin: 0 auto;
	padding-top: 32px;
}

/* =========================================================
Main Visual
========================================================= */

#yakult-top {
	position: relative;
	z-index: 1;
	width: 930px;
	height: 370px;
	margin: 0 auto;
	padding: 0;
}

#yakult-top .main-title {
	position: absolute;
	top: 50%;
	margin-top: -40px;
	left: 0;
	z-index: 100;
	width: 930px;
	height: 80px;
}

#yakult-top .main-visual {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	width: 930px;
	height: 370px;
}

#yakult-top .btn-special {
	position: absolute;
	left: 10px;
	bottom: 20px;
	z-index: 200;
}

#yakult-top .btn-special a {
	transition: all 0.2s ease;
}

#yakult-top .btn-special a:hover {
	opacity: 0.8;
}

#yakult-top .btn-bacteria {
	position: absolute;
	right: 280px;
	bottom: 20px;
	z-index: 200;
}

#yakult-top .btn-bacteria a {
	transition: all 0.2s ease;
}

#yakult-top .btn-bacteria a:hover {
	opacity: 0.8;
}

#yakult-top .btn-researchj {
	position: absolute;
	right: 160px;
	bottom: 20px;
	z-index: 200;
}

#yakult-top .btn-researchj a {
	transition: all 0.2s ease;
}

#yakult-top .btn-researchj a:hover {
	opacity: 0.8;
}


#yakult-top .btn-research {
	position: absolute;
	right: 40px;
	bottom: 20px;
	z-index: 200;
}

#yakult-top .btn-research a {
	transition: all 0.2s ease;
}

#yakult-top .btn-research a:hover {
	opacity: 0.8;
}

/* =========================================================
Global Navi
========================================================= */
#gnav-container {
	background: url(../../img/home/bg_sub_menu_01.gif) repeat-x 0 100%;
}

#gnav {
	width: 928px;
	overflow: hidden;
	border: 1px solid #C5C5C5;
	background: url(../../img/home/bg_gnav_01.png) repeat-x 0 0;
}

#gnav:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* Japanese */

body#ja #gnav li span {
	display: block;
	height: 25px;
	background: url(../../img/home/ja_spr_gnav_01.png) no-repeat 0 0;
}

body#ja #gnav li.nav-01 span {
	width: 107px;
	background-position: 0 0;
	text-indent: -5000px;
}
body#ja #gnav li.nav-02 span {
	width: 81px;
	background-position: -107px 0;
	text-indent: -5000px;
}
body#ja #gnav li.nav-03 span {
	width: 81px;
	background-position: -188px 0;
	text-indent: -5000px;
}
body#ja #gnav li.nav-04 span {
	width: 130px;
	background-position: -269px 0;
	text-indent: -5000px;
}

body#ja #gnav li.nav-01 span:hover {
	background-position: 0 -25px;
}
body#ja #gnav li.nav-02 span:hover {
	background-position: -107px -25px;
}
body#ja #gnav li.nav-03 span:hover {
	background-position: -188px -25px;
}
body#ja #gnav li.nav-04 span:hover {
	background-position: -269px -25px;
}

/* English */

body#en #gnav li span {
	display: block;
	height: 25px;
	background: url(../../img/home/en_spr_gnav_01.png) no-repeat 0 0;
}

body#en #gnav li.nav-01 span {
	width: 107px;
	background-position: 0 0;
	text-indent: -5000px;
}
body#en #gnav li.nav-02 span {
	width: 121px;
	background-position: -107px 0;
	text-indent: -5000px;
}
body#en #gnav li.nav-03 span {
	width: 115px;
	background-position: -228px 0;
	text-indent: -5000px;
}

body#en #gnav li.nav-01 span:hover {
	background-position: 0 -25px;
}
body#en #gnav li.nav-02 span:hover {
	background-position: -107px -25px;
}
body#en #gnav li.nav-03 span:hover {
	background-position: -228px -25px;
}

/* Japanese & English */

#gnav li ul.dropp-list {
	width: 800px;
	height: 25px;
	border: none;
	line-height: 0;
}

#gnav li ul.dropp-list li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	padding: 0;
	letter-spacing: -1px;
}

#gnav li ul.dropp-list li a {
	display: block;
	height: 19px;
	background: url(../../img/home/ico_arrow_01.gif) no-repeat 10px 11px;
	color: #FFF;
	padding: 6px 0 0 20px;
	font-size: 83%;
}

#gnav li ul.dropp-list li a:hover {
	color: #D1D1D1;
}

/* Droppy
--------------------------------------------------*/
.droppy {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	height: 50px;
}
.droppy li {
	position: relative;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
.droppy ul {
	display: none;
	position: absolute;
	left: 0;
	margin: 0;
	padding: 0;
	line-height: 0; /* IE6 "fix" */
}

.droppy ul a { zoom: 1; } /* IE6/7 fix */
.droppy ul li { float: none;}
.droppy ul ul { top: 0; }

/* Essentials - configure this */
.droppy ul {}
.droppy ul ul {}

/* Everything else is theming */

.droppy {}
.droppy *:hover {}
.droppy a {}
.droppy li.hover a {}
.droppy ul {top: 25px;}
.droppy ul li a { *display: inline !important; zoom: 1;}
.droppy ul a.has-subnav {}
.droppy ul a.hover {}
.droppy ul a {}

/* =========================================================
Contents
========================================================= */
#content {
	margin: 10px auto;
}

#content:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

#content div.news {
	float: left;
	width: 450px;
	padding-right: 15px;
	border-right: 1px dotted #C5C5C5;
}

#content div.news dl {
	padding: 10px;
}

#content div.news dl dt {
	float: left;
	clear: both;
	margin-right: 10px;
	margin-bottom: .5em;
}

#content div.news dl dd {
	overflow: hidden;
	zoom: 1;
	margin-bottom: .5em;
	padding: 0 0 0 15px;
	background: url(../../img/home/ico_arrow_01.gif) no-repeat 0 .4em;
}

#content div.special {
	float: right;
	width: 450px;
}

#content div.special h2 {
	position: relative;
}

#content div.special h2 span {
	position:absolute;
	top: 2px;
	right: 2px;
}

#content div.special ul {
	width: 456px;
	margin: 0 -6px 0 0;
	padding: 10px 0;
}

#content div.special ul:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

#content div.special ul li {
	float: left;
	width: 146px;
	margin-right: 6px;
}

/* =========================================================
Footer
========================================================= */
div#footer {
	position: relative;
	width: 930px;
	margin-bottom: 10px;
	padding: 20px 0 0;
	background: url(../../img/common/bg_footer.gif) repeat-x 0 0;
}
div#footer dl {
	float: left;
}
div#footer dl dt {
	margin: 0 0 5px;
}
div#footer dl dd {
	width: 385px;
	height: 13px;
	background: url(../../img/common/footer_copyright.gif) no-repeat 0 0;
	text-indent: -9999px;
}
div#footer ul {
	float: right;
	margin: 20px 0 0;
}
div#footer ul li {
	float: left;
	padding-left: 18px;
	text-indent: -9999px;
}
div#footer ul li a {
	display: block;
	height: 13px;
	background-repeat: no-repeat;
	background-position: 0 0;
	outline: none;
}
div#footer ul li#navi-sitemap a {
	width: 51px;
	background-image: url(../../img/common/navi_f_sitemap.gif);
}
div#footer ul li#navi-terms a {
	width: 96px;
	background-image: url(../../img/common/navi_f_terms.gif);
}
div#footer ul li#navi-privacy a {
	width: 72px;
	background-image: url(../../img/common/navi_f_privacy.gif);
}

div#footer .unit-enquete {
	position: absolute;
	bottom: 0;
	right: 0;
}