@charset "UTF-8";
/* reset default styles */
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*----------------------------------------------------------------*/
/* font-size initialization */
html {
  font-size: 62.5%; }

/*----------------------------------------------------------------*/
/* print */
@media print {
  body {
    width: 1024px;
    -webkit-print-color-adjust: exact; } }

/*----------------------------------------------------------------*/
/* wineCommonHeader */
@media all and (max-width: 767px) {
  #wineCommonHeader {
    display: none; } }

/*----------------------------------------------------------------*/
/* suntory_contents */
#suntory_contents {
  position: relative;
  width: 100%;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
  opacity: 0; }

/*----------------------------------------------------------------*/
/* main */
#suntory_contents main {
  display: block;
  position: relative;
  max-width: 1164px;
  min-width: 960px;
  margin: 0 auto; }

@media all and (max-width: 767px) {
  #suntory_contents main {
    width: 320px;
    max-width: 320px;
    min-width: 320px; } }

/*----------------------------------------------------------------*/
/* section */
#suntory_contents section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1200px; }

@media all and (max-width: 767px) {
  #suntory_contents section {
    background-size: 320px; } }

/*----------------------------------------------------------------*/
/* content */
main .content {
  position: relative;
  width: 640px;
  margin: 0 auto; }

@media all and (max-width: 767px) {
  main .content {
    width: 180px; } }

/*----------------------------------------------------------------*/
/* title */
main .title {
  margin-bottom: 0.2em;
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.4; }

@media all and (max-width: 767px) {
  main .title {
    margin-bottom: 1em;
    font-size: 1.8rem;
    line-height: 1.6; } }

/*----------------------------------------------------------------*/
/* read */
main .read {
  font-size: 1.6rem;
  line-height: 1.6; }
  main .read sup {
    vertical-align: super;
    font-size: 0.8rem; }

@media all and (max-width: 767px) {
  main .read {
    font-size: 1.4rem;
    line-height: 1.8; } }

/*----------------------------------------------------------------*/
/* notice */
main .notice {
  font-size: 1.4rem;
  line-height: 1.6; }

@media all and (max-width: 767px) {
  main .notice {
    font-size: 1.2rem; } }

/*----------------------------------------------------------------*/
/* ec-button */
.ec-button .parent-iframe-relative a {
  display: inline-block; }
  .ec-button .parent-iframe-relative a object, .ec-button .parent-iframe-relative a img {
    width: 255px;
    height: 40px; }

@media all and (max-width: 767px) {
  .ec-button .parent-iframe-relative {
    text-align: center; }
    .ec-button .parent-iframe-relative a {
      display: inline-block; }
      .ec-button .parent-iframe-relative a object, .ec-button .parent-iframe-relative a img {
        width: 140px;
        height: 50px; } }

.isnt-touch .ec-button a:hover {
  opacity: 0.64; }

.isnt-touch .ec-button .parent-iframe-relative a:hover {
  opacity: 0.64; }

/*----------------------------------------------------------------*/
/* contiguous elements */
main p + p {
  margin-top: 1em; }

/*----------------------------------------------------------------*/
/* Line break on smartphone */
main br.sp {
  display: none; }

@media all and (max-width: 767px) {
  main br.sp {
    display: inline; } }

/*----------------------------------------------------------------*/
/* top: section */
#mia-top {
  height: 720px;
  background-image: url(../images/bgi_section_pc_01.jpg); }

@media all and (max-width: 767px) {
  #mia-top {
    height: 600px;
    background-image: url(../images/bgi_section_sp_01.jpg); } }

/*----------------------------------------------------------------*/
/* top: elements */
#mia-top .logo {
  position: absolute;
  top: 72px;
  left: 120px;
  width: 240px; }
  #mia-top .logo img {
    width: 100%; }

#mia-top .title {
  position: absolute;
  top: 530px;
  left: 80px;
  font-size: 4.4rem; }

#mia-top .read {
  position: absolute;
  top: 400px;
  left: 80px;
  font-weight: bold;
  font-size: 2.6rem; }

#mia-top .image {
  position: absolute;
  top: 180px;
  left: 420px;
  width: 200px; }
  #mia-top .image img {
    width: 80px;
    margin: 0 10px; }

@media all and (max-width: 767px) {
  #mia-top {
    padding-left: 8px;
    text-align: center; }
    #mia-top .logo, #mia-top .title, #mia-top .read, #mia-top .image {
      position: relative;
      top: auto;
      left: auto; }
    #mia-top .logo {
      width: 100%;
      margin-top: 80px; }
      #mia-top .logo img {
        width: 144px; }
    #mia-top .title {
      margin-top: 8px;
      font-size: 2.1rem;
      line-height: 1.4; }
    #mia-top .read {
      font-weight: normal;
      margin-top: 8px;
      font-size: 1.4rem;
      line-height: 1.4; }
    #mia-top .image {
      width: auto;
      margin-top: 10px; }
      #mia-top .image img {
        width: 36px;
        margin: 0 6px; } }

/*----------------------------------------------------------------*/
/* intro: section */
#mia-intro {
  height: 400px;
  background-image: url(../images/bgi_section_pc_02.jpg); }

@media all and (max-width: 767px) {
  #mia-intro {
    height: 680px;
    background-image: url(../images/bgi_section_sp_02.jpg); } }

/*----------------------------------------------------------------*/
/* intro: content */
#mia-intro .content {
  margin-top: 80px; }

@media all and (max-width: 767px) {
  #mia-intro .content {
    margin-top: 100px; } }

/*----------------------------------------------------------------*/
/* winemaker: section */
#mia-winemaker {
  height: 480px;
  background-image: url(../images/bgi_section_pc_03.jpg); }

@media all and (max-width: 767px) {
  #mia-winemaker {
    height: 760px;
    background-image: url(../images/bgi_section_sp_03.jpg); } }

/*----------------------------------------------------------------*/
/* winemaker: content */
#mia-winemaker .content {
  margin-top: 120px;
  padding-left: 40px; }

@media all and (max-width: 767px) {
  #mia-winemaker .content {
    margin-top: 100px;
    padding-left: 0; } }

/*----------------------------------------------------------------*/
/* brand: section */
#mia-brand {
  height: 480px;
  background-image: url(../images/bgi_section_pc_04.jpg); }

@media all and (max-width: 767px) {
  #mia-brand {
    height: 760px;
    background-image: url(../images/bgi_section_sp_04.jpg); } }

/*----------------------------------------------------------------*/
/* brand: content */
#mia-brand .content {
  margin-top: 120px;
  left: -80px; }
  #mia-brand .content p {
    padding-right: 40px; }

@media all and (max-width: 767px) {
  #mia-brand .content {
    margin-top: 80px;
    left: 0; }
    #mia-brand .content p {
      padding-right: 0; } }

/*----------------------------------------------------------------*/
/* freixenet: section */
#mia-freixenet {
  height: 480px;
  background-image: url(../images/bgi_section_pc_05.jpg); }

@media all and (max-width: 767px) {
  #mia-freixenet {
    height: 640px;
    background-image: url(../images/bgi_section_sp_05.jpg); } }

/*----------------------------------------------------------------*/
/* freixenet: content */
#mia-freixenet .content {
  margin-top: 140px;
  padding-left: 40px;
  left: 80px; }

@media all and (max-width: 767px) {
  #mia-freixenet .content {
    margin-top: 20px;
    padding-left: 0;
    left: 0; } }

/*----------------------------------------------------------------*/
/* lineup: section */
#mia-lineup {
  height: 640px;
  background-image: url(../images/bgi_section_pc_06.jpg); }

@media all and (max-width: 767px) {
  #mia-lineup {
    height: 1600px;
    background-image: url(../images/bgi_section_sp_06.jpg); } }

/*----------------------------------------------------------------*/
/* lineup: content */
#mia-lineup .content {
  width: 880px;
  margin-top: 120px;
  left: 20px;
  zoom: 1; }
  #mia-lineup .content:after {
    display: block;
    clear: both;
    content: ""; }

@media all and (max-width: 767px) {
  #mia-lineup .content {
    width: 180px;
    margin-top: 80px;
    left: 0; } }

/*----------------------------------------------------------------*/
/* lineup: elements */
#mia-lineup .detail {
  width: 400px;
  float: left; }
  #mia-lineup .detail + .detail {
    margin-left: 80px; }

#mia-lineup .image {
  width: 80px;
  float: right; }
  #mia-lineup .image img {
    width: 100%; }

#mia-lineup .wrapper {
  width: 300px;
  float: left; }

#mia-lineup .title {
  font-size: 2.7rem;
  line-height: 0.8; }
  #mia-lineup .title small {
    font-size: 1.2rem; }

#mia-lineup .taste {
  margin-top: 1em; }

#mia-lineup .read {
  margin-top: 1em;
  font-size: 1.4rem; }

#mia-lineup .data {
  margin-top: 1em;
  font-size: 1.2rem;
  line-height: 1.6; }

#mia-lineup .ec-button {
  margin-top: 1em; }

@media all and (max-width: 767px) {
  #mia-lineup .detail {
    width: auto;
    float: none; }
    #mia-lineup .detail + .detail {
      margin: 60px 0 0 0; }
  #mia-lineup .image {
    width: auto;
    float: none;
    margin-bottom: 30px;
    text-align: center; }
    #mia-lineup .image img {
      width: 64px; }
  #mia-lineup .wrapper {
    width: auto;
    float: none; }
  #mia-lineup .title {
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.2; }
  #mia-lineup .read {
    font-size: 1.2rem;
    line-height: 1.8; }
  #mia-lineup .data {
    font-size: 1rem;
    line-height: 1.8; }
  #mia-lineup .ec-button > * {
    min-width: 100% !important; }
  #mia-lineup .ec-button .parent-iframe-relative {
    margin: 0 auto; } }

/*----------------------------------------------------------------*/
/* lineup: taste indicator */
#mia-lineup .taste {
  zoom: 1; }
  #mia-lineup .taste:after {
    display: block;
    clear: both;
    content: ""; }
  #mia-lineup .taste > * {
    float: left;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    line-height: 2; }
    #mia-lineup .taste > *.indicator {
      padding: 0.6em 0 0.4em 0;
      border-left: 1px solid white;
      border-right: 1px solid white;
      background-color: #bcbcbc;
      line-height: 1;
      color: white; }
      #mia-lineup .taste > *.indicator + .indicator {
        border-left: none; }
    #mia-lineup .taste > *.current {
      background-color: #b1272d; }
  #mia-lineup .taste.red-wine .indicator {
    width: 33.333333%; }
  #mia-lineup .taste.white-wine .label {
    width: 12.5%; }
  #mia-lineup .taste.white-wine .indicator {
    width: 15%; }

/*----------------------------------------------------------------*/
/* page-navi: wrapper */
#suntory_contents .page-navi {
  display: none; }

@media all and (max-width: 960px) {
  #suntory_contents .page-navi {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 280px;
    background-color: white; }
    #suntory_contents .page-navi .wrapper {
      width: 100%; }
    #suntory_contents .page-navi.fixed {
      position: fixed; } }

/* page-navi: menu */
#suntory_contents .page-navi .menu {
  display: none;
  padding: 40px 0; }
  #suntory_contents .page-navi .menu .logo {
    width: 128px;
    margin: 0 auto 20px; }
    #suntory_contents .page-navi .menu .logo img {
      width: 100%; }
  #suntory_contents .page-navi .menu .menu-item {
    width: 8em;
    margin: 0 auto;
    padding-left: 1em;
    background: url(../images/ico_link_01.png) no-repeat left center;
    background-size: 1rem;
    font-size: 1.8rem;
    line-height: 2; }
    #suntory_contents .page-navi .menu .menu-item a {
      text-decoration: none;
      color: #8d734a; }

/* page-navi: menu-trigger */
#suntory_contents .page-navi .menu-trigger {
  display: none; }

@media all and (max-width: 960px) {
  #suntory_contents .page-navi .menu-trigger {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 4.8em;
    height: 4.8em;
    background-color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    line-height: 0.8rem;
    color: #8d734a; }
    #suntory_contents .page-navi .menu-trigger:after {
      content: "menu";
      display: inline-block;
      margin-top: 0.4em; }
    #suntory_contents .page-navi .menu-trigger .menu-lines {
      margin-top: 0.6em; }
      #suntory_contents .page-navi .menu-trigger .menu-lines > * {
        display: inline-block;
        width: 3.2rem;
        height: 0.4rem;
        background-color: #8d734a;
        -webkit-transition: all .4s ease;
        transition: all .4s ease; }
    #suntory_contents .page-navi .menu-trigger.active:after {
      content: "close"; }
    #suntory_contents .page-navi .menu-trigger.active .menu-lines > *:nth-of-type(1) {
      -webkit-transform: translateY(0.8rem) rotate(-45deg);
      transform: translateY(0.8rem) rotate(-45deg); }
    #suntory_contents .page-navi .menu-trigger.active .menu-lines > *:nth-of-type(2) {
      opacity: 0; }
    #suntory_contents .page-navi .menu-trigger.active .menu-lines > *:nth-of-type(3) {
      -webkit-transform: translateY(-0.8rem) rotate(45deg);
      transform: translateY(-0.8rem) rotate(45deg); } }