@charset "UTF-8";
/* 1. Reset
---------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  color: #303030;
  font-size: 13px;
  line-height: 1em;
  font-family: Arial, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* clear margin : suntory_gn.css */
#suntoryCommonFooter {
  margin-top: 0;
}

/* 2. Common Layout
---------------------------------------------------------*/
#suntory_contents {
  background-image: url(../imgs/common/bg_pattern.jpg);
  background-position: left top;
  background-repeat: repeat;
  height: auto;
}

#wrapper {
  background-image: url(../imgs/common/bg_clouds.png);
  background-position: center top;
  background-repeat: no-repeat;
  height: 100%;
}
  #top #wrapper {
    background-image: url(../imgs/common/bg_clouds_01.png);
  }

#container {
  background-image: url(../imgs/common/bg_acerola_left.png);
  background-position: left top;
  background-repeat: no-repeat;
  height: 100%;
}

#content-background {
  background-image: url(../imgs/common/bg_acerola_right.png);
  background-position: right top;
  background-repeat: no-repeat;
  height: 100%;
}

#content-wrapper {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#content-wrapper:after {
  content: '';
  display: block;
  clear: both;
}

#side-area {
  float: left;
  width: 230px;
  height: auto;
  min-height: 568px;
  position: relative;
  z-index: 1000;
}

#side-area nav {
  width: 230px;
  height: 100%;
  position: absolute;
  z-index: 10000;
  background-image: url(../imgs/common/bg_side.png);
  background-position: center top;
  background-repeat: no-repeat;
}
#side-area nav ul {
  margin-top: 15px;
}
#side-area nav li {
  width: 230px;
  height: 51px;
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
}
#side-area nav li a {
  display: block;
  width: 100%;
  height: 100%;
  background-position: left center;
}
#side-area nav li.current a {
  background-position: right center;
}

.acerola-logo {
  width: 172px;
  height: 137px;
  margin-top: 7px;
  margin-left: 18px;
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../imgs/common/logo_nichireiacerola.png);
}
.acerola-logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.acerola-image {
  width: 178px;
  height: 122px;
  position: absolute;
  top: 480px;
  left: -30px;
  background-image: url(../imgs/common/bg_side_acerola.png);
}

.nav-prodcut {
  background-image: url(../imgs/common/nav_product.png);
}

.nav-about {
  background-image: url(../imgs/common/nav_about.png);
}

.nav-history {
  background-image: url(../imgs/common/nav_about_history.png);
}

.nav-refresh {
  background-image: url(../imgs/common/nav_refresh.png);
}

.nav-quality {
  background-image: url(../imgs/common/nav_quality.png);
}

.nav-gallery {
  background-image: url(../imgs/common/nav_gallery.png);
}

.nav-special {
  background-image: url(../imgs/common/nav_special.png);
}

.nav-recipe {
  background-image: url(../imgs/common/nav_recipe.png);
}

#main-area {
  float: right;
  width: 725px;
  height: auto;
}

#foot-content {
  width: 960px;
  height: 112px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}
#foot-content:after {
  content: '';
  display: block;
  clear: both;
}

#sns {
  float: left;
  margin-top: 60px;
}

#pagetop {
  float: right;
  width: 185px;
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
}
#pagetop a {
  display: block;
  width: 185px;
  height: 90px;
  background-image: url(../imgs/common/btn_page_top.png);
}
#pagetop a:hover {
  background-position: -185px top;
}

section:after {
  content: '';
  display: block;
  clear: both;
}

.link-item {
  float: left;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
}
.link-item a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}
.link-item h2, .link-item h3, .link-item h4, .link-item p {
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
}

.content-item {
  float: left;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
}
.content-item h2, .content-item h3, .content-item h4, .content-item p {
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
}

.asset {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
}