@charset "utf-8";

/*
**  Volvic
**
**  COMMON.CSS | 2010.04.14 updated.
**
**  INDEX
**
**  01 : @_FONT
**  02 : @_BASE LAYOUT
**  03 : @_HEADER
**  04 : @_PAGEBODY
**  05 : @_COMMON STYLE
**  06 : @_FOOTER
**
*/

/*------------------------------------------------------------
  @_Font
------------------------------------------------------------*/

/* font initial setting */

body {
  font-family:sans-serif;
  font-size: 12px;
  line-height:1;
  color: #333;
}

/* for ie6 hack */
* html body {
  font-family: "ＭＳ Ｐゴシック", "メイリオ", Meiryo, sans-serif;
  font-size: 75%; /* 12px */
}

/* for ie7 hack */
*:first-child+html body {
  font-family: "ＭＳ Ｐゴシック", "メイリオ", Meiryo, sans-serif;
  font-size: 75%; /* 12px */
}

/* for ie8 hack */
.ie8 body {
  font-family: "ＭＳ Ｐゴシック", "メイリオ", Meiryo, sans-serif;
  font-size: 75%; /* 12px */
}

/*
**  FONT SIZE CHEAT
**  
**  16px : 133.4%
**  15px : 125%%
**  14px : 116.7%
**  13px : 108.4%
**  12px : 100%
**  11px : 91.7%
**  10px : 83.4%
**
*/

/* link */

a:link    { color: #4dbed7; text-decoration: none; outline:none; }
a:visited { color: #4dbed7; text-decoration: none; outline:none; }
a:hover   { color: #009fd8; text-decoration: underline; outline:none; }
a:active  { color: #009fd8; text-decoration: underline; outline:none; }

/* external link */

span.externalIcon {
	padding: 1px 0 0 13px;
	margin-right:2px;
	background:url(../images/icon-external.gif) no-repeat right 0;
}

span.pdfIcon {
	padding: 1px 0 0 18px;
	margin-left:2px;
	background:url(../images/icon-pdf.gif) no-repeat left 0;
}

/* sup,sub */

sup,sub { font-size: 50%; }
.msie sup { font-size: 75%; }

/*------------------------------------------------------------
  @_BASE LAYOUT
------------------------------------------------------------*/

html {
  background-color:#1b7fbf;
  margin-bottom:1px;
  height:100%;
}

body {
  background-color:#fff;
}

/* clearfix 
----------------------------------------*/
.clearBoth{
clear:both;
}

#pagebody:after,
#subnav:after,
#foot-cnav:after,
.frame-a-body:after,
.article:after,
#article01:after,
#article02:after,
#article03:after,
.section:after,
.section-end:after,
.section01:after,
.section02:after,
.section03:after,
.section04:after,
.section05:after,
.section06:after,
#section01:after,
#section02:after,
#section03:after,
#section04:after,
#section05:after,
#section06:after,
#section07:after,
#section08:after,
#section09:after,
#section10:after,
#section11:after,
#section12:after,
#section13:after,
#section14:after,
#section15:after,
.innerbox:after,
.innerbox01:after,
.innerbox02:after,
.innerbox03:after,
.innerbox04:after,
.innerbox05:after,
.innerbox06:after,
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
/* IE6 */
* html #pagebody,
* html #subnav,
* html #foot-cnav,
* html .frame-a-body,
* html .article,
* html #article01,
* html #article02,
* html #article03,
* html .section,
* html .section-end,
* html .section01,
* html .section02,
* html .section03,
* html .section04,
* html .section05,
* html .section06,
* html #section01,
* html #section02,
* html #section03,
* html #section04,
* html #section05,
* html #section06,
* html #section07,
* html #section08,
* html #section09,
* html #section10,
* html #section11,
* html #section12,
* html #section13,
* html #section14,
* html #section15,
* html .innerbox,
* html .innerbox01,
* html .innerbox02,
* html .innerbox03,
* html .innerbox04,
* html .innerbox05,
* html .innerbox06,
* html .clearfix
{ zoom: 1; }
/* IE7 */
*:first-child+html #pagebody,
*:first-child+html #subnav,
*:first-child+html #foot-cnav,
*:first-child+html .frame-a-body,
*:first-child+html .article,
*:first-child+html #article01,
*:first-child+html #article02,
*:first-child+html #article03,
*:first-child+html .section,
*:first-child+html .sectio-end,
*:first-child+html .section01,
*:first-child+html .section02,
*:first-child+html .section03,
*:first-child+html .section04,
*:first-child+html .section05,
*:first-child+html .section06,
*:first-child+html #section01,
*:first-child+html #section02,
*:first-child+html #section03,
*:first-child+html #section04,
*:first-child+html #section05,
*:first-child+html #section06,
*:first-child+html #section07,
*:first-child+html #section08,
*:first-child+html #section09,
*:first-child+html #section10,
*:first-child+html #section11,
*:first-child+html #section12,
*:first-child+html #section13,
*:first-child+html #section14,
*:first-child+html #section15,
*:first-child+html .innerbox,
*:first-child+html .innerbox01,
*:first-child+html .innerbox02,
*:first-child+html .innerbox03,
*:first-child+html .innerbox04,
*:first-child+html .innerbox05,
*:first-child+html .innerbox06,
*:first-child+html .clearfix
{ zoom: 1; }

/*
-----------------------------------------------
  @_HEADER
----------------------------------------------- */

#header {
  width:100%;
  min-width:880px;
  background:#009fd8 url(../images/bg-header.png) repeat-x center bottom;
}

#header-inner {
  position:relative;
  width:880px;
  height:96px;
  margin:0 auto;
  background:transparent url(../images/bg-gnav.jpg) no-repeat 0 bottom;
}

/* volvic logo */

#logo {
  position:absolute;
  top:32px;
  left:8px;
}

/* global nav */

#gnav {
  position:absolute;
  left:123px;
  bottom:0;
}

#gnav li {
  float:left;
  margin-right:3px;
}

/* header courtesy nav */

#head-cnav {
  position:absolute;
  left:547px;
  top:17px;
}

#head-cnav li {
  float:left;
  margin-right:14px;
}

#head-cnav li a:hover img {
  opacity:0.8;
  filter:alpha(opacity=80);
}

/* online shop */

#head-shop {
  position:absolute;
  left:788px;
  top:17px;
}

#head-shop li a:hover img {
  opacity:0.8;
  filter:alpha(opacity=80);
}


/* topic path */

#topic-path {
  padding-top:10px;
  font-size: 91.7%; /* 11px */
  line-height:1.1;
}

#pagebody #topic-path {
  position:absolute;
  top:-103px;
  left:0;
}

.mac #topic-path {
  font-size:10px;
}

#topic-path li {
  float:left;
}

#topic-path li {
  margin-right:5px;
  padding-right:8px;
  background:transparent url(../images/topic-path.gif) no-repeat right 3px;
}

#topic-path li a {
  color:#fff;
}

#topic-path li.current {
  background:none;
  color:#99d9ef;
}

/*
-----------------------------------------------
  @_PAGEBODY
----------------------------------------------- */

#pagebody {
  position:relative;
  width:880px;
  margin:0 auto;
  padding-top:30px;
  font-size:100%;
  line-height:2;
}

#contents {
  float:left;
  width:610px;
  min-height:300px;
  height:auto !important;
  height:300px;
}

#about-volvic #contents {
  float:none;
  width:880px;
  min-height:300px;
  height:auto !important;
  height:300px;
}

/* pagetop nav
----------------------------------------------- */

#pagetop {
  clear:both;
  width:880px;
  margin:0 auto;
  padding:30px 0;
  text-align:right;
}

.pagetop {
  clear:both;
  width:610px;
  margin:0 auto;
  padding:0 0 30px 0;
  text-align:right;
}

/*
-----------------------------------------------
  @_SIDEBAR
----------------------------------------------- */

#sidebar {
  float:right;
  width:240px;
}

#sidebar ul li a:hover img {
  opacity:0.7;
  filter:alpha(opacity=70);
}

/* primary | products & campaign */

#asidenav-primary {
  width:240px;
  margin-bottom:10px;
  padding-top:21px;
  background: #dbf2f7 url(../images/bg-asidenav-primary-head.gif) no-repeat 0 0;
}

#asidenav-primary ul {
  width:220px;
  padding:0 10px 5px 10px;
  background:url(../images/bg-asidenav-primary-foot.gif) no-repeat 0 bottom;
}

#asidenav-primary ul li {
  margin-bottom:5px;
  background-color:#fff;
}

/* secondary | mailmagazine & onlineshop */

#asidenav-secondary ul li {
  margin-bottom:10px;
}

/* youtube */
#asidenav-youtube dt {
  margin: 0 0 5px 0;
}

#asidenav-youtube {
  margin: 0 0 10px 0;
}

.youtubeContents {
  width: 240px;
  height: 134px;
  overflow: hidden;
  margin: 0 0 5px 0;
  background: url(../images/ajax-loader.gif) no-repeat 50% 50%;
}

/* movie */

#asidenav-movie {
  height:164px;
  margin-bottom:10px;
}

/* sub | other */
#asidenav-sub {
width: 240px;
padding-top:10px;
background: url(../images/bg-asidenav-sub-head.gif) no-repeat 0 0;
margin-bottom: 10px;
}

#asidenav-sub ul {

width: 240px;
padding-bottom:1px;
background: url(../images/bg-asidenav-sub-foot.gif) no-repeat bottom;
}

#asidenav-sub ul li {
  margin-left:10px;
  margin-bottom:10px;
}

/* corp | other */
#asidenav-corp {
  width: 240px;
  background: url(../images/bg-asidenav-corp-body.gif) repeat-y 0 0;
}

.asidenav-corp-body {
  background: url(../images/bg-asidenav-corp-head.gif) no-repeat 0 0;
  padding-top:8px;
}

.asidenav-corp-body dl {
  background: url(../images/bg-asidenav-corp-foot.gif) no-repeat bottom;
  padding:7px 15px 15px 15px;
}

.asidenav-corp-body dt {
  margin-bottom:10px
}

.asidenav-corp-body dd {
  font-size:100%;
}

.asidenav-corp-body ul li {
  padding-left:8px;
  background:url("../images/arrow-xsmall-01.gif") no-repeat 0 0.25em;
  line-height:100%;
}

/* cpn | other */
#asidenav-cpn {
  padding:10px 0 0 0;
}


/* third | oekaki concours */

#asidenav-third {
  width:240px;
  padding-top:10px;
  background:#eee url(../images/bg-asidenav-third-head.gif) no-repeat 0 0;
}

#asidenav-third ul {
  width:220px;
  padding:0 10px 5px 10px;
  background:url(../images/bg-asidenav-third-foot.gif) no-repeat 0 bottom;
}

#asidenav-third ul li {
  margin-bottom:5px;
  background-color:#fff;
}

#asidenav-facebook {
  padding:20px 0 0 0;
}


/* local nav
----------------------------------------------- */

#localnav {
  width:240px;
  margin-bottom:12px;
  padding-bottom:9px;
  background:#fff url(../images/lnav-foot.gif) no-repeat 0 bottom;
}

/* if "dd:last-of-type" contains "class='current'" or "class='current-child'" , you should change the background-color! */
#localnav.fix1 {
  background:#4dbed7 url(../images/lnav-foot-fix1.gif) no-repeat 0 bottom!important;
}
#localnav.fix2 {
  background:#eefafc url(../images/lnav-foot-fix2.gif) no-repeat 0 bottom!important;
}

* html .fix1 {
  background:#4dbed7 url(../images/lnav-foot-fix1.gif) no-repeat 0 bottom!important;
}
* html .fix2 {
  background:#eefafc url(../images/lnav-foot-fix2.gif) no-repeat 0 bottom!important;
}

#localnav dl {
  background: url(../images/lnav-body.gif) repeat-y 0 0;
}

#localnav dd {
  width:230px;
  margin:0 5px;
  background-color:#fff;
}

#localnav ul {
  padding:9px 10px;
  background:transparent url(../images/lnav-brokenline-01.gif) repeat-x 3px top;
}

#localnav li {
  padding-left:15px;
  line-height:1.5;
  background:url(../images/lnav-arrow.gif) no-repeat 0 0.35em;
}

#localnav dd:first-of-type ul {
  padding-top:10px;
  border-top:2px solid #4dbed7;
}

#localnav dd:last-of-type ul {
  padding-bottom:5px;
}

#localnav dd ul.end {
  padding-bottom:5px;
}
#localnav dd.current ul.end {
  padding-bottom:5px;
}
#localnav dd.current-child ul.end {
  padding-bottom:5px;
}

/* current parent */

#localnav dd.current {
  background-color:#4dbed7;
}

#localnav dd.current ul {
  background:#4dbed7 url(../images/lnav-brokenline-01.gif) repeat-x 3px 0;
}

#localnav dd.current ul li {
  background:transparent url(../images/lnav-arrow-current.gif) no-repeat 0 0.35em;
}

#localnav dd.current ul li a {
  color:#fff;
}

#localnav dd:first-of-type ul {
  background:#fff;
}

#localnav dd:first-of-type.current ul {
  background:#4dbed7;
  border-top:2px solid #eefafc;
}

/* current child */

#localnav dd.current-child ul {
  padding-right:10px;
  background:#eefafc;
}

#localnav dd.current-child li {
  margin-left:4px;
  margin-bottom:5px;
  padding-left:10px;
  padding-top:4px;
  padding-bottom:4px;
  line-height:1.5;
  background:url(../images/lnav-arrow-small.gif) no-repeat 0 0.8em;
}

#localnav dd.current-child ul li.current a {
  color:#333;
}

#localnav dd.current-child li:last-of-type {
  margin-bottom:0;
}

/* active page */

#localnav dd.current-child ul li.active {
  margin-left:-10px;
  margin-right:-10px;
  padding-top:4px;
  padding-bottom:4px;
  color:#666;
  background-color:#fff;
  background-position:14px 10px;
}

#localnav dd.current-child ul li.active em {
  display:block;
  padding-left:14px;
  padding-right:14px;
  color:#666;
  font-weight:bold;
}

/* current grandchild */

#localnav dd.current-child ul.current-grandchild {
  padding:5px 10px 5px 22px !important;
  margin:-10px 0 0 0;
  background:#ffffff;
}

#localnav dd.current-child ul.current-grandchild em {
  padding:0;
}

#localnav dd.current-child ul.current-grandchild li {
  padding-top:0;
  background:url(../images/lnav-arrow-small.gif) no-repeat 0 0.5em;
}

#localnav dd.current-child ul.current-grandchild li.active {
  margin:0 0 0 4px;
}

#localnav dd.current-child ul.current-grandchild li.active em {
  padding:0;
}



/*
-----------------------------------------------
  @_COMMON STYLE 
----------------------------------------------- */

.numberList01A {
list-style-type:decimal;
margin:0 0 0 25px;
}




/*
-----------------------------------------------
  @_FOOTER 
----------------------------------------------- */

#footer {
  clear:both;
  width:100%;
  min-width:880px;
  padding-bottom:36px;
  background:#1b7fbf url(../images/bg-footer.png) repeat-x center 0;
}

/* BG bubbles */

.bubble1 {
  width:100%;
  background:transparent url(../images/bg-bubble-small.png) repeat-x 20% 60px;
}

.bubble2 {
  width:100%;
  background:transparent url(../images/bg-bubble-middle.png) repeat-x 35% 60px;
}

.bubble3 {
  width:100%;
  background:transparent url(../images/bg-bubble-big.png) repeat-x 65% 55px;
}

    /* for ie6 */
    * html .bubble1 { background:transparent url(../images/bg-bubble-all.png) repeat-x center 61px; }
    * html .bubble2 { background:none; }
    * html .bubble3 { background:none; }

/* subnav
----------------------------------------------- */

#subnav {
  width:880px;
  margin:0 auto;
  padding-bottom:36px;
}

#subnav h4 {
  margin-bottom:10px;
  padding-left:15px;
  font-size:100%; /* 12px */
  font-weight:bold;
  background:url(../images/arrow-subnav-01.png) no-repeat 0 center;
}

* html #subnav h4 { line-height:1.1; } /* for ie6 */

#subnav ul {
  padding-left:3px;
  font-size:91.7%; /* 11px */
}

#subnav li {
  padding-left:10px;
  line-height:17px;
  background:transparent url(../images/arrow-subnav-02.png) no-repeat 0 center;
}

#subnav li.nobg {
  background:none;
}

/* link settings */

#subnav a:link    { color: #fff; text-decoration: none; outline:none; }
#subnav a:visited { color: #fff; text-decoration: none; outline:none; }
#subnav a:hover {
  text-decoration:none;
  outline:none;
  background:url(../images/foot-cnav-link-underline.gif) repeat-x 0 bottom;
}
#subnav a:active  { color: #fff; text-decoration: none; outline:none; }

#subnav01,
#subnav02,
#subnav03 {
  padding-top:72px;
  float:left;
}

#subnav01              { width:260px; padding-right:20px;}
#subnav01 div.volvic   { padding-bottom:22px; }
#subnav01 div.product  { padding-bottom:0; }

#subnav02              { width:305px; padding-right:20px;}
#subnav02 div.water    { padding-bottom:22px; }


#subnav03              { width:220px; }
#subnav03 div.special      { padding-bottom:22px;}
#subnav03 div.csr { padding-bottom:15px; }
#subnav03 div.product { padding-bottom:15px; }
#subnav03 div.others { padding-bottom:0;   }

#subnav03 div.others {
  padding-top:1em;
  padding-bottom:0;
  border-top: 1px solid #74bfdc;
}

/* footer courtesy nav
----------------------------------------------- */

#foot-cnav {
  clear:both;
  width:850px;
  height:20px;
  margin:0 auto;
  padding:7px 15px;
  background:#fff url(../images/bg-foot-cnav.gif) no-repeat 0 0;
}

#foot-cnav ul li {
  float:left;
  margin-right:15px;
}

#foot-cnav ul li a:hover img {
  opacity:0.7;
  filter:alpha(opacity=70);
}

/* copyright */

#foot-cnav p {
  float:right;
}