@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; }

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

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

/*----------------------------------------------------------------*/
/* page-title */
.page-title {
  position: relative;
  width: 300px;
  height: 300px; }
  .page-title:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #d11519;
    opacity: 0.8; }
  .page-title img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -50%); }

@media all and (max-width: 767px) {
  .page-title {
    width: 150px;
    height: 150px; }
    .page-title img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      transform: translate(-50%, -50%); } }

/*----------------------------------------------------------------*/
/* section-title */
.section-title {
  margin-bottom: 0.4em;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.4;
  color: #d11519; }
  .section-title > * {
    font-weight: bold; }

/*----------------------------------------------------------------*/
/* block-title */
.block-title {
  margin-top: 1em;
  margin-bottom: 0.4em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid black;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6; }
  .block-title:before {
    content: "●";
    display: inline-block;
    margin-right: 0.5em;
    color: #d11519; }

/*----------------------------------------------------------------*/
/* read */
.read {
  font-size: 1.4rem;
  line-height: 1.8; }

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

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

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

/*----------------------------------------------------------------*/
/* thumbnail */
.thumbnail {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  background-color: white; }
  .thumbnail img {
    width: 100%; }

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

/*----------------------------------------------------------------*/
/* pattern */
.pattern {
  width: 252px;
  height: 252px; }
  .pattern img {
    width: 100%; }

@media all and (max-width: 767px) {
  .pattern {
    width: 126px;
    height: 126px; } }

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

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

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

/*----------------------------------------------------------------*/
/* anchor */
main a {
  text-decoration: underline;
  color: #d11519; }

.isnt-touch main a:hover {
  text-decoration: none; }

/*----------------------------------------------------------------*/
/* link-icon */
main .link-icon:before {
  content: "";
  display: inline-block;
  width: 12px;
  margin-right: 0.5em; }

main .link-icon.self:before {
  height: 12px;
  background: url(../images/common/ico_link-self_01.png) no-repeat left top;
  background-size: contain; }

main .link-icon.blank:before {
  height: 12px;
  background: url(../images/common/ico_link-blank_01.png) no-repeat left top;
  background-size: contain; }

/*----------------------------------------------------------------*/
/* horizontal rule */
hr {
  display: block;
  width: 960px;
  height: 1px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2); }

@media all and (max-width: 767px) {
  hr {
    width: 80; } }

/*----------------------------------------------------------------*/
/* paragraph */
p {
  font-size: 1.4rem;
  line-height: 1.6; }
  p + p {
    margin-top: 1em; }

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

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

/*----------------------------------------------------------------*/
/* section */
section {
  position: relative;
  width: 100%;
  overflow: hidden; }

/*----------------------------------------------------------------*/
/* texture-bg */
.bg-texture {
  position: relative;
  background: url(../images/common/bgi_texture-middle_01.jpg) repeat-y left top;
  background-size: 100%; }
  .bg-texture:before, .bg-texture:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 240px; }
  .bg-texture.texture-top {
    min-height: 240px; }
    .bg-texture.texture-top:before {
      top: 0;
      background: url(../images/common/bgi_texture-top_01.jpg) no-repeat left top;
      background-size: 100%; }

/*----------------------------------------------------------------*/
/* shadow-bg */
.shadow-top:after {
  top: 0;
  bottom: auto;
  height: 30px;
  background-image: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); }

/*----------------------------------------------------------------*/
/* intro */
.intro .content {
  min-height: 252px; }

@media all and (max-width: 767px) {
  .intro .content {
    min-height: 126px;
    margin-bottom: 20px;
    padding: 0; } }

.intro .page-title {
  position: absolute;
  top: -200px;
  left: -180px;
  width: 420px;
  height: 420px;
  transform: rotate(-30deg);
  transition: all 0.8s ease-in; }
  .intro .page-title img {
    top: 72%; }

@media all and (max-width: 767px) {
  .intro .page-title {
    top: -80px;
    left: -80px;
    width: 210px;
    height: 210px; } }

.intro .onScreen .page-title {
  left: -80px;
  opacity: 1;
  transform: rotate(0); }

@media all and (max-width: 767px) {
  .intro .onScreen .page-title {
    left: -30px; } }

.intro .pattern {
  position: absolute;
  top: 0;
  right: -102px; }

@media all and (max-width: 767px) {
  .intro .pattern {
    position: relative;
    top: auto;
    right: auto;
    float: right; } }

.intro .read {
  position: absolute;
  top: 80px;
  left: 360px;
  opacity: 0;
  transition: all 0.8s ease-in; }
  .intro .read p {
    font-size: 1.8rem;
    line-height: 1.8; }

@media all and (max-width: 767px) {
  .intro .read {
    clear: both;
    position: relative;
    top: auto;
    left: auto;
    padding: 20px; }
    .intro .read p {
      font-size: 1.8rem;
      line-height: 1.8; }
      .intro .read p br {
        display: none; } }

.intro .onScreen .read {
  top: 100px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .intro .onScreen .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* content */
.content {
  position: relative;
  width: 960px;
  margin: 0 auto;
  zoom: 1; }
  .content:after {
    display: block;
    clear: both;
    content: ""; }

@media all and (max-width: 767px) {
  .content {
    width: 100%;
    padding: 0 20px; } }

/*----------------------------------------------------------------*/
/* text-list */
.text-list {
  font-size: 1.4rem;
  line-height: 1.6; }
  .text-list > * {
    display: list-item;
    margin-left: 2em; }
  .text-list.disc > * {
    list-style: disc; }
  .text-list.decimal > * {
    list-style: decimal; }
  .text-list dt {
    margin-left: 0;
    display: block;
    list-style: none;
    font-weight: bold; }

/*----------------------------------------------------------------*/
/* contens-list */
.contens-list {
  zoom: 1; }
  .contens-list:after {
    display: block;
    clear: both;
    content: ""; }
  .contens-list .list-item {
    width: 50%;
    float: left;
    margin: 0 0 60px 0;
    transition: all 0.8s ease-in;
    opacity: 0; }

@media all and (max-width: 767px) {
  .contens-list .list-item {
    width: 100%;
    float: none;
    margin: 0 0 40px 0; } }

.contens-list .list-item .title {
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.6;
  color: #d11519; }

.contens-list .list-item .image {
  position: relative;
  overflow: hidden; }
  .contens-list .list-item .image img {
    width: 100%;
    vertical-align: bottom; }
  .contens-list .list-item .image:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(209, 21, 25, 0.2) url(../images/common/ico_link-self_01.png) no-repeat center;
    background-size: 24px;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease-in;
    opacity: 0; }

.contens-list .list-item .date {
  margin-top: 1em;
  text-align: right;
  font-size: 1.4rem;
  color: black; }

.contens-list .list-item.onScreen {
  opacity: 1; }

.isnt-touch .contens-list .list-item a:hover .image:after {
  width: 150%;
  height: 150%;
  opacity: 1; }

.akadamapunch-glass-banner {
  position: relative;
  width: 90%;
  max-width: 690px;
  margin: 0 auto; }
  .akadamapunch-glass-banner img {
    width: 100%;
    height: auto; }

/*----------------------------------------------------------------*/
/* home: content */
.home .content {
  height: 300px; }

@media all and (max-width: 767px) {
  .home .content {
    height: auto;
    padding: 270px 20px 40px 20px; } }

/*----------------------------------------------------------------*/
/* home: page-title */
.home .page-title {
  position: absolute;
  transition: all 0.8s ease-in; }

@media all and (max-width: 767px) {
  .home .page-title img {
    width: 50%; } }

/*----------------------------------------------------------------*/
/* home: thumbnail */
.home .thumbnail {
  position: absolute;
  opacity: 0;
  transition: all 0.8s ease-in; }

/*----------------------------------------------------------------*/
/* home: pattern */
.home .pattern {
  position: absolute;
  opacity: 0;
  transition: all 0.8s ease-in; }

@media all and (max-width: 767px) {
  .home .pattern {
    width: 63px;
    height: 63px; } }

/*----------------------------------------------------------------*/
/* home: read */
.home .read {
  position: absolute;
  top: 50px;
  left: 400px;
  width: 360px;
  opacity: 0;
  transition: all 0.8s ease-in; }
  .home .read p {
    white-space: nowrap; }

@media all and (max-width: 767px) {
  .home .read {
    position: relative;
    width: auto; }
    .home .read p {
      white-space: normal; }
      .home .read p br {
        display: none; } }

/*----------------------------------------------------------------*/
/* home: intro */
.home .intro .content {
  height: 500px; }

.home .intro img {
  width: 100%; }

.home .intro .contents-title {
  position: absolute;
  bottom: 20px;
  left: 210px;
  width: 180px; }

.home .intro .main-copy {
  position: absolute;
  top: 40px;
  left: 0;
  width: 600px; }

.home .intro .bottle {
  position: absolute;
  bottom: 20px;
  left: 620px;
  width: 110px; }

.home .intro .ec-button {
  position: absolute;
  right: 0;
  bottom: 20px;
  width: 210px; }

@media all and (max-width: 767px) {
  .home .intro .content {
    width: 280px;
    height: 320px; }
  .home .intro img {
    width: 100%; }
  .home .intro .contents-title {
    bottom: 80px;
    left: 0;
    width: 120px; }
  .home .intro .main-copy {
    top: auto;
    left: 0;
    bottom: 160px;
    width: 210px; }
  .home .intro .bottle {
    right: 0;
    bottom: 20px;
    left: auto;
    width: 60px; }
  .home .intro .ec-button {
    position: absolute;
    right: auto;
    left: 0; } }

/*----------------------------------------------------------------*/
/* home: news */
.home .news-content .page-title {
  top: -80px;
  left: -120px;
  width: 260px;
  height: 260px;
  transform: rotate(-30deg); }
  .home .news-content .page-title img {
    top: 66%; }

@media all and (max-width: 767px) {
  .home .news-content .page-title {
    top: -120px;
    left: -40%;
    width: 320px;
    height: 320px; } }

.home .news-content .onScreen .page-title {
  left: -40px;
  opacity: 1;
  transform: rotate(0); }

@media all and (max-width: 767px) {
  .home .news-content .onScreen .page-title {
    left: -20%; } }

.home .news-content .thumbnail {
  top: 80px;
  left: 250px; }

@media all and (max-width: 767px) {
  .home .news-content .thumbnail {
    top: 40px;
    left: 60%; } }

.home .news-content .onScreen .thumbnail {
  left: 200px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .news-content .onScreen .thumbnail {
    left: 50%; } }

.home .news-content .pattern {
  top: 0;
  right: -102px; }

@media all and (max-width: 767px) {
  .home .news-content .pattern {
    top: auto;
    right: 0;
    bottom: 0; } }

.home .news-content .onScreen .pattern {
  opacity: 0.5; }

.home .news-content .read {
  top: 80px;
  left: 440px; }

@media all and (max-width: 767px) {
  .home .news-content .read {
    top: auto;
    left: auto; } }

.home .news-content .onScreen .read {
  top: 120px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .news-content .onScreen .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* home: history */
.home .history-content .page-title {
  top: -160px;
  left: 780px;
  width: 360px;
  height: 360px;
  transform: rotate(30deg); }
  .home .history-content .page-title img {
    top: 66%; }

@media all and (max-width: 767px) {
  .home .history-content .page-title {
    top: -120px;
    right: -40%;
    left: auto;
    width: 320px;
    height: 320px; }
    .home .history-content .page-title img {
      top: 66%; } }

.home .history-content .onScreen .page-title {
  left: 680px;
  opacity: 1;
  transform: rotate(0); }

@media all and (max-width: 767px) {
  .home .history-content .onScreen .page-title {
    right: -20%;
    left: auto; } }

.home .history-content .thumbnail {
  top: 60px;
  left: 530px; }

@media all and (max-width: 767px) {
  .home .history-content .thumbnail {
    top: 40px;
    right: 60%;
    left: auto; } }

.home .history-content .onScreen .thumbnail {
  left: 580px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .history-content .onScreen .thumbnail {
    right: 50%;
    left: auto; } }

.home .history-content .pattern {
  top: 0;
  left: -102px; }

@media all and (max-width: 767px) {
  .home .history-content .pattern {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto; } }

.home .history-content .onScreen .pattern {
  opacity: 1; }

.home .history-content .read {
  top: 60px;
  left: 200px; }

@media all and (max-width: 767px) {
  .home .history-content .read {
    top: auto;
    left: auto; } }

.home .history-content .onScreen .read {
  top: 100px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .history-content .onScreen .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* home: drink */
.home .drink-content .page-title {
  top: -140px;
  left: -220px;
  width: 410px;
  height: 410px;
  transform: rotate(-30deg); }
  .home .drink-content .page-title img {
    top: 66%;
    left: 55%; }

@media all and (max-width: 767px) {
  .home .drink-content .page-title {
    top: -120px;
    left: -40%;
    width: 320px;
    height: 320px; }
    .home .drink-content .page-title img {
      top: 66%; } }

.home .drink-content .onScreen .page-title {
  left: -120px;
  opacity: 1;
  transform: rotate(0); }

@media all and (max-width: 767px) {
  .home .drink-content .onScreen .page-title {
    left: -20%; } }

.home .drink-content .thumbnail {
  top: 70px;
  left: 250px; }

@media all and (max-width: 767px) {
  .home .drink-content .thumbnail {
    top: 40px;
    left: 60%; } }

.home .drink-content .onScreen .thumbnail {
  left: 200px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .drink-content .onScreen .thumbnail {
    left: 50%; } }

.home .drink-content .pattern {
  bottom: 0;
  right: -102px; }

@media all and (max-width: 767px) {
  .home .drink-content .pattern {
    top: auto;
    right: 0;
    bottom: 0; } }

.home .drink-content .onScreen .pattern {
  opacity: 0.5; }

.home .drink-content .read {
  top: 60px;
  left: 420px; }

@media all and (max-width: 767px) {
  .home .drink-content .read {
    top: auto;
    left: auto; } }

.home .drink-content .onScreen .read {
  top: 100px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .drink-content .onScreen .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* home: recipe */
.home .recipe-content .page-title {
  top: 20px;
  left: 740px;
  width: 410px;
  height: 410px;
  transform: rotate(30deg); }
  .home .recipe-content .page-title img {
    top: 36%; }

@media all and (max-width: 767px) {
  .home .recipe-content .page-title {
    top: -120px;
    right: -40%;
    left: auto;
    width: 320px;
    height: 320px; }
    .home .recipe-content .page-title img {
      top: 66%; } }

.home .recipe-content .onScreen .page-title {
  left: 640px;
  opacity: 1;
  transform: rotate(0); }

@media all and (max-width: 767px) {
  .home .recipe-content .onScreen .page-title {
    right: -20%;
    left: auto; } }

.home .recipe-content .thumbnail {
  top: 80px;
  left: 490px; }

@media all and (max-width: 767px) {
  .home .recipe-content .thumbnail {
    top: 40px;
    right: 60%;
    left: auto; } }

.home .recipe-content .onScreen .thumbnail {
  left: 540px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .recipe-content .onScreen .thumbnail {
    right: 50%;
    left: auto; } }

.home .recipe-content .pattern {
  bottom: 0;
  left: -102px; }

@media all and (max-width: 767px) {
  .home .recipe-content .pattern {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto; } }

.home .recipe-content .onScreen .pattern {
  opacity: 0.5; }

.home .recipe-content .read {
  top: 60px;
  left: 200px; }

@media all and (max-width: 767px) {
  .home .recipe-content .read {
    top: auto;
    left: auto; } }

.home .recipe-content .onScreen .read {
  top: 100px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .recipe-content .onScreen .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* home: lineup */
.home .lineup-content .page-title {
  top: -80px;
  left: -180px;
  width: 350px;
  height: 350px;
  transform: rotate(-30deg); }
  .home .lineup-content .page-title img {
    top: 60%; }

@media all and (max-width: 767px) {
  .home .lineup-content .page-title {
    top: -120px;
    left: -40%;
    width: 320px;
    height: 320px; }
    .home .lineup-content .page-title img {
      top: 66%; } }

.home .lineup-content .onScreen .page-title {
  left: -80px;
  opacity: 1;
  transform: rotate(0); }

@media all and (max-width: 767px) {
  .home .lineup-content .onScreen .page-title {
    left: -20%; } }

.home .lineup-content .thumbnail {
  top: 70px;
  left: 260px;
  border-radius: 0;
  background-color: transparent; }

@media all and (max-width: 767px) {
  .home .lineup-content .thumbnail {
    top: 40px;
    left: 60%; } }

.home .lineup-content .onScreen .thumbnail {
  left: 210px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .lineup-content .onScreen .thumbnail {
    left: 50%; } }

.home .lineup-content .pattern {
  top: 0;
  right: -102px; }

@media all and (max-width: 767px) {
  .home .lineup-content .pattern {
    top: auto;
    right: 0;
    bottom: 0; } }

.home .lineup-content .onScreen .pattern {
  opacity: 1; }

.home .lineup-content .read {
  top: 60px;
  left: 420px; }

@media all and (max-width: 767px) {
  .home .lineup-content .read {
    top: auto;
    left: auto; } }

.home .lineup-content .onScreen .read {
  top: 100px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .lineup-content .onScreen .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* home: location */
.home .location-content .page-title {
  top: -55px;
  left: 740px;
  width: 410px;
  height: 410px;
  transform: rotate(30deg); }

@media all and (max-width: 767px) {
  .home .location-content .page-title {
    top: -120px;
    right: -40%;
    left: auto;
    width: 320px;
    height: 320px; }
    .home .location-content .page-title img {
      top: 66%; } }

.home .location-content .onScreen .page-title {
  left: 640px;
  opacity: 1;
  transform: rotate(0); }

@media all and (max-width: 767px) {
  .home .location-content .onScreen .page-title {
    right: -20%;
    left: auto; } }

.home .location-content .thumbnail {
  top: 80px;
  left: 400px; }

@media all and (max-width: 767px) {
  .home .location-content .thumbnail {
    top: 40px;
    right: 60%;
    left: auto; } }

.home .location-content .onScreen .thumbnail {
  left: 500px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .location-content .onScreen .thumbnail {
    right: 50%;
    left: auto; } }

.home .location-content .pattern {
  top: 0;
  left: -102px; }

@media all and (max-width: 767px) {
  .home .location-content .pattern {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto; } }

.home .location-content .onScreen .pattern {
  opacity: 0.5; }

.home .location-content .read {
  top: 60px;
  left: 220px; }

@media all and (max-width: 767px) {
  .home .location-content .read {
    top: auto;
    left: auto; } }

.home .location-content .onScreen .read {
  top: 100px;
  opacity: 1; }

@media all and (max-width: 767px) {
  .home .location-content .onScreen .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* home: banner */
.banner-content .content {
  height: auto;
  padding: 32px 0;
  text-align: center; }

.banner-content .banner {
  display: inline-block;
  margin: 0 auto; }
  .banner-content .banner img.pc {
    max-width: 860px;
    height: auto;
    transform: scale(1);
    opacity: 1;
    transition-property: transform, opacity;
    transition-duration: .2s;
    transition-timing-function: ease-out; }
  .banner-content .banner img.sp {
    max-width: 320px;
    height: auto; }
  .banner-content .banner .caption {
    display: inline-block;
    margin-top: 1em;
    font-size: 20px; }
  .banner-content .banner:hover img.pc {
    opacity: .75;
    transform: scale(1.025); }

@media all and (min-width: 768px) {
  .banner-content .banner img.sp {
    display: none; } }

@media all and (max-width: 767px) {
  .banner-content .banner img.pc {
    display: none; }
  .banner-content .banner .caption {
    font-size: 14px; } }

/*----------------------------------------------------------------*/
/* can-banner */
.can-banner img {
  width: 100%;
  height: auto; }

.can-banner .content {
  display: block;
  width: 100%;
  height: 440px;
  background-image: url(../images/can/img_bg_01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  .can-banner .content:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); }
  .can-banner .content:hover {
    opacity: .8; }

.can-banner .image {
  position: absolute;
  top: -5px;
  left: 102px;
  width: 505px; }

.can-banner .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(40px, -50%);
  width: 320px; }

.can-banner.compact .content {
  height: 64px; }
  .can-banner.compact .content:before {
    content: none; }

.can-banner.compact .title {
  transform: translate(-50%, -50%);
  width: 880px; }

@media all and (max-width: 767px) {
  .can-banner .content {
    height: 320px;
    padding: 0; }
  .can-banner .image {
    top: 50%;
    left: -8%;
    transform: translateY(-50%);
    width: 60%; }
  .can-banner .title {
    top: 10%;
    left: 48%;
    transform: translate(0, 0);
    width: 50%; }
  .can-banner.compact .title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; }
  .home .can-banner.compact {
    display: none; } }

@media all and (min-width: 768px) {
  .home .page-navi {
    top: 84px; } }

/*----------------------------------------------------------------*/
/* news: intro */
.news .intro .pattern {
  opacity: 0.5; }

/*----------------------------------------------------------------*/
/* news: news-list */
.news-list {
  width: 800px;
  margin: 0 auto; }
  .news-list .list-item {
    width: 40%;
    margin: 0 5% 60px; }
    .news-list .list-item a {
      text-decoration: none; }
    .news-list .list-item .title {
      font-size: 2rem; }
    .news-list .list-item .image {
      box-shadow: -4px 6px 12px 0px rgba(0, 0, 0, 0.3); }

@media all and (max-width: 767px) {
  .news-list {
    width: 100%; }
    .news-list .list-item {
      width: 100%;
      margin: 0 0 40px; } }

.isnt-touch .news-list .list-item a:hover .image:after {
  width: 400px;
  height: 400px; }

.news article {
  display: block;
  padding-bottom: 60px; }
  .news article .content + .content {
    margin-top: 40px; }
  .news article .read {
    width: 48%; }
    .news article .read h3 {
      margin-top: 1em;
      font-weight: bold; }
    .news article .read p {
      margin-top: 1em; }
    .news article .read em {
      color: #d11519; }
  .news article .image {
    width: 48%;
    text-align: center; }
    .news article .image img {
      width: 100%; }
      .news article .image img.vertical {
        width: 66.666666%; }
  .news article .left {
    float: left; }
  .news article .right {
    float: right; }

@media all and (max-width: 767px) {
  .news article {
    padding-bottom: 60px; }
    .news article .read {
      width: 100%;
      margin-top: 20px; }
    .news article .image {
      width: 100%; }
    .news article .left {
      float: none; }
    .news article .right {
      float: none; } }

.news .link {
  margin-bottom: 60px;
  text-align: center; }
  .news .link p {
    font-size: 1.8rem; }

@media all and (max-width: 767px) {
  .news .link {
    margin-bottom: 40px; }
    .news .link p {
      font-size: 1.4rem; } }

/*----------------------------------------------------------------*/
/* drink: intro */
.drink .intro .read {
  top: 60px; }

.drink .intro .pattern {
  opacity: 0.5; }

.drink .content.os-anim .detail {
  margin-left: 11em;
  list-style: none; }

@media all and (max-width: 767px) {
  .drink .intro .read {
    top: auto; }
  .drink .content.os-anim .detail {
    margin-left: 2em;
    list-style: none; } }

/*----------------------------------------------------------------*/
/* drink: section */
.drink section:nth-child(n+3) {
  margin-top: 40px; }

/*----------------------------------------------------------------*/
/* drink: content */
.drink .content.os-anim {
  opacity: 0;
  transition: all 0.8s ease-in; }
  .drink .content.os-anim.onScreen {
    opacity: 1; }

/*----------------------------------------------------------------*/
/* akadama-punch */
/*
#akadama-punch {
	.section-title {
		font-size: 3.6rem;
	}
}

.akadama-punch-container {
	position: relative;
	width: 960px;
	height: 580px;
	margin-top: 2em;
	margin-bottom: 4em;
	border-radius: 2em;
	background-color: #ba1920;
}
@media all and (max-width: 767px) {
	.akadama-punch-container {
		width: auto;
		height: auto;
		margin-top: 2em;
		margin-bottom: 4em;
		padding: 4em 2em;
		border-radius: 1.5em;
	}
}

.akadama-punch-container .title {
	position: absolute;
	top: 36px;
	left: 40px;
	img {
		width: 417px;
		height: 32px;
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .title {
		position: relative;
		top: auto;
		left: auto;
		text-align: center;
		img {
			width: 100%;
			max-width: 417px;
			height: auto;
		}
	}
}

.akadama-punch-container .process {
	position: absolute;
	.text {
		position: absolute;
	}
	.image {
		position: absolute;
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .process {
		position: relative;
		margin-top: 4em;
		text-align: center;
		.text {
			position: relative;
			margin-bottom: 1em;
		}
		.image {
			position: relative;
		}
	}
}

.akadama-punch-container .step-01 {
	top: 98px;
	left: 36px;
	width: 162px;
	height: 336px;
	.text {
		top: 0;
		left: 0;
		img {
			width: 162px;
			height: 52px;
		}
	}
	.image {
		bottom: 0;
		left: 44px;
		img {
			width: 80px;
			height: 266px;
		}
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .step-01 {
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		.text {
			top: auto;
			left: auto;
		}
		.image {
			bottom: auto;
			left: auto;
		}
	}
}

.akadama-punch-container .step-02 {
	top: 138px;
	left: 200px;
	width: 332px;
	height: 380px;
	.text {
		bottom: 0;
		left: 0;
		img {
			width: 174px;
			height: 51px;
		}
	}
	.image {
		top: 0;
		left: 8px;
		img {
			width: 322px;
			height: 317px;
		}
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .step-02 {
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		.text {
			bottom: auto;
			left: auto;
		}
		.image {
			top: auto;
			left: auto;
			img {
				width: 100%;
				max-width: 322px;
				height: auto;
			}
		}
	}
}

.akadama-punch-container .step-03 {
	top: 298px;
	left: 408px;
	width: 234px;
	height: 248px;
	.text {
		top: 0;
		left: 0;
		img {
			width: 185px;
			height: 49px;
		}
	}
	.image {
		bottom: 0;
		left: 26px;
		img {
			width: 206px;
			height: 192px;
		}
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .step-03 {
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		.text {
			top: auto;
			left: auto;
		}
		.image {
			bottom: auto;
			left: auto;
		}
	}
}

.akadama-punch-container .step-04 {
	top: 42px;
	left: 540px;
	width: 246px;
	height: 272px;
	.text {
		top: 0;
		left: 0;
		img {
			width: 246px;
			height: 51px;
		}
	}
	.image {
		bottom: 0;
		left: 78px;
		img {
			width: 101px;
			height: 219px;
		}
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .step-04 {
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		.text {
			top: auto;
			left: auto;
		}
		.image {
			bottom: auto;
			left: auto;
		}
	}
}

.akadama-punch-container .step-05 {
	top: 54px;
	left: 735px;
	width: 190px;
	height: 286px;
	.text {
		bottom: 0;
		left: 0;
		img {
			width: 189px;
			height: 47px;
		}
	}
	.image {
		top: 0;
		left: 58px;
		img {
			width: 100px;
			height: 228px;
		}
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .step-05 {
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		.text {
			bottom: auto;
			left: auto;
		}
		.image {
			top: auto;
			left: auto;
		}
	}
}

.akadama-punch-container .step-06 {
	top: 344px;
	left: 690px;
	width: 224px;
	height: 274px;
	.text {
		top: 138px;
		left: 0;
		img {
			width: 98px;
			height: 64px;
		}
	}
	.image {
		top: 0;
		right: 0;
		img {
			width: 110px;
			height: 274px;
		}
	}
}
@media all and (max-width: 767px) {
	.akadama-punch-container .step-06 {
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		margin-bottom: -8em;
		.text {
			top: auto;
			left: auto;
		}
		.image {
			top: auto;
			right: auto;
		}
	}
}
*/
/*----------------------------------------------------------------*/
/* border-box */
.border-box {
  position: relative;
  margin-top: 20px;
  padding: 20px 10%;
  border: 2px solid #d11519;
  border-radius: 12px; }
  .border-box .read {
    width: 64%;
    float: left;
    margin: 20px 0; }
  .border-box .image {
    width: 36%;
    float: left;
    text-align: center; }
    .border-box .image img {
      width: 120px; }
  .border-box .box-title {
    position: absolute;
    top: -20px;
    left: 20px;
    min-height: 40px;
    padding: 0.4em 1em;
    border-radius: 6px;
    background-color: #d11519;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.4;
    color: white; }
  .border-box h3 {
    font-weight: bold;
    font-size: 3.6rem;
    line-height: 1.6;
    color: #d11519; }

@media all and (max-width: 767px) {
  .border-box {
    width: calc(100% - 40px);
    margin: 20px auto; }
    .border-box .read {
      width: 100%;
      float: none;
      margin: 20px 0; }
    .border-box .image {
      width: 100%;
      float: none; } }

/*----------------------------------------------------------------*/
/* drink: recipe-index */
.recipe-list .list-item {
  width: 46%;
  zoom: 1; }
  .recipe-list .list-item:after {
    display: block;
    clear: both;
    content: ""; }
  .recipe-list .list-item:nth-child(even) {
    margin-left: 8%; }
  .recipe-list .list-item .read {
    width: 58%;
    float: left;
    padding-bottom: 1em; }
    .recipe-list .list-item .read .section-title {
      white-space: nowrap; }
  .recipe-list .list-item .image {
    width: 180px;
    float: right;
    border-radius: 50%; }
  .recipe-list .list-item .block-title {
    clear: both; }

@media all and (max-width: 767px) {
  .recipe-list .list-item {
    width: 100%; }
    .recipe-list .list-item:nth-child(even) {
      margin-left: 0; }
    .recipe-list .list-item .read {
      width: 100%;
      float: none; }
    .recipe-list .list-item .image {
      width: 80%;
      float: none;
      margin: 0 auto; } }

.isnt-touch .recipe-list .list-item a:hover .image:after {
  width: 400px;
  height: 400px; }

.drink .akadamapunch-glass-banner {
  padding: 20px 0 80px; }

/*----------------------------------------------------------------*/
/* recipe: intro */
.recipe .intro .read {
  top: 60px; }

.recipe .intro .pattern {
  opacity: 0.5; }

@media all and (max-width: 767px) {
  .recipe .intro .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* recipe: horizontal rule */
hr {
  margin-bottom: 40px; }

/*----------------------------------------------------------------*/
/* recipe: season-title */
.recipe .season-title {
  width: 15%;
  float: left; }
  .recipe .season-title img {
    width: 100px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.8s ease-in; }
  .recipe .season-title.onScreen img {
    opacity: 1;
    transform: scale(1); }

@media all and (max-width: 767px) {
  .recipe .season-title {
    width: 100%;
    float: none;
    text-align: center; }
    .recipe .season-title img {
      width: 100px; } }

/*----------------------------------------------------------------*/
/* recipe: recipe-index */
.recipe .recipe-list {
  width: 85%;
  float: right;
  padding-top: 20px; }
  .recipe .recipe-list .list-item {
    width: 46%;
    margin: 0 0 40px 0; }
    .recipe .recipe-list .list-item:nth-child(even) {
      margin-left: 8%; }
    .recipe .recipe-list .list-item .section-title {
      white-space: nowrap; }
    .recipe .recipe-list .list-item .read {
      width: 60%; }
    .recipe .recipe-list .list-item .image {
      width: 140px; }
    .recipe .recipe-list .list-item p + p {
      margin-top: 0.5em; }

@media all and (max-width: 767px) {
  .recipe .recipe-list {
    width: 100%;
    float: none;
    padding-top: 20px; }
    .recipe .recipe-list .list-item {
      width: 100%;
      text-align: center; }
      .recipe .recipe-list .list-item:nth-child(even) {
        margin-left: 0; }
      .recipe .recipe-list .list-item .section-title {
        white-space: nowrap; }
      .recipe .recipe-list .list-item .read {
        width: 100%; }
      .recipe .recipe-list .list-item .image {
        width: 60%; } }

.isnt-touch .recipe-list .list-item a:hover .image:after {
  width: 400px;
  height: 400px; }

/*----------------------------------------------------------------*/
/* recipe: detail */
.recipe .detail .content {
  position: relative;
  padding-left: 80px; }

@media all and (max-width: 767px) {
  .recipe .detail .content {
    padding-left: 20px; } }

.recipe .detail .season-title {
  position: absolute;
  top: 0;
  left: 0; }
  .recipe .detail .season-title img {
    width: 60px; }

@media all and (max-width: 767px) {
  .recipe .detail .season-title {
    position: relative;
    top: auto;
    left: auto; } }

.recipe .detail .section-title {
  padding: 0.6em 0;
  opacity: 0;
  transition: all 0.8s ease-in; }
  .recipe .detail .section-title.onScreen {
    opacity: 1; }

.recipe .detail .recipe-section {
  zoom: 1;
  opacity: 0;
  transition: all 0.8s ease-in; }
  .recipe .detail .recipe-section:after {
    display: block;
    clear: both;
    content: ""; }
  .recipe .detail .recipe-section + .recipe-section {
    margin-top: 30px; }
  .recipe .detail .recipe-section.onScreen {
    opacity: 1; }
  .recipe .detail .recipe-section .block-title {
    margin-top: 0; }
  .recipe .detail .recipe-section .image {
    width: 320px;
    float: left; }
    .recipe .detail .recipe-section .image img {
      width: 300px; }
  .recipe .detail .recipe-section .read {
    width: 560px;
    float: right; }
  .recipe .detail .recipe-section .text-list.column2 {
    zoom: 1; }
    .recipe .detail .recipe-section .text-list.column2:after {
      display: block;
      clear: both;
      content: ""; }
    .recipe .detail .recipe-section .text-list.column2 > * {
      width: calc(50% - 2em);
      float: left; }
    .recipe .detail .recipe-section .text-list.column2 dt {
      width: auto;
      float: none; }
  .recipe .detail .recipe-section p, .recipe .detail .recipe-section ul, .recipe .detail .recipe-section dl {
    margin-top: 1em; }
  .recipe .detail .recipe-section em {
    color: #d11519; }

@media all and (max-width: 767px) {
  .recipe .detail .recipe-section .block-title {
    margin-top: 1em; }
  .recipe .detail .recipe-section .image {
    width: 100%;
    float: none; }
    .recipe .detail .recipe-section .image img {
      width: 100%; }
  .recipe .detail .recipe-section .read {
    width: 100%;
    float: nene; }
  .recipe .detail .recipe-section .text-list.column2 {
    zoom: 1; }
    .recipe .detail .recipe-section .text-list.column2:after {
      display: block;
      clear: both;
      content: ""; }
    .recipe .detail .recipe-section .text-list.column2 > * {
      width: calc(100% - 2em);
      float: none; } }

.recipe .detail .link {
  margin: 60px 0;
  text-align: center; }
  .recipe .detail .link p {
    font-size: 1.8rem; }

@media all and (max-width: 767px) {
  .recipe .detail .link p {
    font-size: 1.4rem; } }

/*----------------------------------------------------------------*/
/* history: intro */
.history .intro .read {
  top: 60px; }

@media all and (max-width: 767px) {
  .history .intro .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* history: section */
.history section:nth-child(n+2) {
  margin-bottom: 80px; }

@media all and (max-width: 767px) {
  .history section:nth-child(n+2) {
    margin-bottom: 60px; } }

/*----------------------------------------------------------------*/
/* history: history-section */
.history .history-section .read {
  width: 48%;
  float: left;
  opacity: 0;
  transition: all 0.8s ease-in; }

.history .history-section .image {
  width: 48%;
  float: right;
  opacity: 0;
  transition: all 0.8s ease-in; }

.history .history-section .onScreen .read {
  opacity: 1; }

.history .history-section .onScreen .image {
  opacity: 1; }

@media all and (max-width: 767px) {
  .history .history-section .read {
    width: 100%;
    float: none; }
  .history .history-section .image {
    width: 100%;
    float: none;
    margin-top: 40px; } }

/*----------------------------------------------------------------*/
/* history: image */
.history .image {
  text-align: center;
  font-size: 1.2rem;
  zoom: 1; }
  .history .image:after {
    display: block;
    clear: both;
    content: ""; }
  .history .image img {
    width: 100%;
    margin-bottom: 1em; }
  .history .image .float {
    float: left; }
    .history .image .float + .float {
      margin-left: 20px; }
  .history .image .non-cap {
    text-align: left; }
  .history .image .img01 {
    width: 150px;
    margin-top: 40px; }
  .history .image .img02 {
    width: 290px;
    margin-top: 40px; }
  .history .image .img03 {
    width: 160px; }
  .history .image .img04 {
    width: 160px; }
  .history .image .img05 {
    width: 180px;
    margin-top: 65px; }
  .history .image .img06 {
    width: 180px;
    margin: 0 20px 1em; }
  .history .image .img07 {
    width: 180px;
    margin: 20px 20px 1em; }
  .history .image .img08 {
    width: 150px; }
  .history .image .img09 {
    width: 290px; }
  .history .image .img10 {
    width: 270px; }
  .history .image .img11 {
    width: 460px; }

@media all and (max-width: 767px) {
  .history .image .float {
    float: none; }
    .history .image .float + .float {
      margin-left: 0; }
  .history .image .img01 {
    width: 150px;
    margin-top: 0; }
  .history .image .img02 {
    width: 280px;
    margin-top: 40px; }
  .history .image .img03 {
    width: 160px; }
  .history .image .img04 {
    width: 160px;
    margin-top: 40px; }
  .history .image .img05 {
    width: 180px;
    margin-top: 0; }
  .history .image .img06 {
    width: 180px;
    margin: 40px 0 0; }
  .history .image .img07 {
    width: 180px;
    margin: 40px 0 0; }
  .history .image .img08 {
    width: 150px; }
  .history .image .img09 {
    width: 280px;
    margin-top: 40px; }
  .history .image .img10 {
    width: 270px; }
  .history .image .img11 {
    width: 280px;
    margin-top: 40px; } }

/*----------------------------------------------------------------*/
/* lineup: intro */
.lineup .intro .read {
  top: 60px; }

@media all and (max-width: 767px) {
  .lineup .intro .read {
    top: auto; } }

/*----------------------------------------------------------------*/
/* lineup: section */
.lineup section {
  overflow: visible; }
  .lineup section:nth-child(n+2) {
    margin-bottom: 60px; }

/*----------------------------------------------------------------*/
/* lineup: feature */
.lineup .feature .read {
  width: 72%;
  float: left;
  opacity: 0;
  transition: all 0.8s ease-in; }
  .lineup .feature .read p {
    font-size: 1.8rem;
    line-height: 1.8; }

.lineup .feature .image {
  width: 220px;
  overflow: hidden;
  float: right;
  margin-top: 30px;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s ease-in; }
  .lineup .feature .image img {
    width: 100%; }

.lineup .feature .onScreen .read {
  opacity: 1; }

.lineup .feature .onScreen .image {
  opacity: 1; }

@media all and (max-width: 767px) {
  .lineup .feature .read {
    width: 100%;
    float: none; }
    .lineup .feature .read p {
      font-size: 1.4rem;
      line-height: 1.6; }
  .lineup .feature .image {
    width: 220px;
    float: none;
    margin: 40px auto 0; }
    .lineup .feature .image img {
      width: 100%; } }

/*----------------------------------------------------------------*/
/* lineup: products */
.lineup .products .read {
  width: 72%;
  opacity: 0;
  transition: all 0.8s ease-in; }
  .lineup .products .read.onScreen {
    opacity: 1; }

.lineup .products .product-list {
  margin-top: 30px;
  zoom: 1; }
  .lineup .products .product-list:after {
    display: block;
    clear: both;
    content: ""; }
  .lineup .products .product-list .list-item {
    float: left;
    text-align: center;
    opacity: 0;
    transition: all 0.8s ease-in; }
    .lineup .products .product-list .list-item.onScreen {
      opacity: 1; }
  .lineup .products .product-list.akadama .list-item {
    width: 33.333333%; }
    .lineup .products .product-list.akadama .list-item .image img {
      width: 240px; }
  .lineup .products .product-list.sparkling {
    width: 100%;
    margin: 30px auto 0; }
    .lineup .products .product-list.sparkling .read {
      width: 100%;
      margin: 0 auto;
      text-align: left; }
    .lineup .products .product-list.sparkling .list-item {
      width: 48%; }
      .lineup .products .product-list.sparkling .list-item .image {
        margin-top: 30px; }
        .lineup .products .product-list.sparkling .list-item .image img {
          width: auto;
          height: 260px; }
      .lineup .products .product-list.sparkling .list-item + .list-item {
        margin-left: 4%; }
      .lineup .products .product-list.sparkling .list-item .online {
        margin-top: 1em;
        margin-right: 3vw; }
    .lineup .products .product-list.sparkling .btl_akadama_child {
      width: 50%; }
    .lineup .products .product-list.sparkling .btl_akadama {
      display: flex;
      justify-content: center; }
  .lineup .products .product-list .title {
    margin: 1em 0;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.6;
    color: #d11519;
    white-space: nowrap; }

.lineup .products .link {
  margin-top: 30px;
  text-align: center; }

@media all and (max-width: 767px) {
  .lineup .products {
    margin-top: 0; }
    .lineup .products .product-list.sparkling {
      margin-top: 30px; }
      .lineup .products .product-list.sparkling .list-item + .list-item {
        margin-left: 0; }
    .lineup .products .read {
      width: 100%; }
    .lineup .products .product-list .list-item {
      float: none; }
      .lineup .products .product-list .list-item:nth-child(2) {
        margin-top: 40px; }
    .lineup .products .product-list.akadama .list-item {
      width: 100%; }
    .lineup .products .product-list.sparkling {
      width: 100%; }
      .lineup .products .product-list.sparkling .list-item {
        width: 100%; }
      .lineup .products .product-list.sparkling .btl_akadama_child {
        display: block;
        margin: 0; }
      .lineup .products .product-list.sparkling .btl_akadama_child {
        width: auto; }
      .lineup .products .product-list.sparkling .btl_akadama {
        flex-direction: column;
        align-items: center; }
    .lineup .products .product-list .title {
      margin: 1em 0;
      font-weight: bold;
      font-size: 1.8rem;
      line-height: 1.6;
      color: #d11519; }
    .lineup .products .link {
      margin-top: 30px;
      text-align: center; } }

/*----------------------------------------------------------------*/
/* ----------------------------------------------------------------
can-content: common
---------------------------------------------------------------- */
.can-content main {
  position: relative;
  padding-bottom: 60px;
  background: url(../images/can/img_bg_03.png), linear-gradient(#e61e2a, #ff0000, #e61e2a);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%;
  color: #fff; }
  .can-content main img {
    width: 100%;
    height: auto;
    vertical-align: bottom; }

.can-content section .content {
  position: relative; }
  .can-content section .content .read {
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 1.8; }

.can-content a {
  color: #fff; }

.can-content .pc-brake {
  display: inline; }

.can-content .sp-brake {
  display: none; }

/* common: responsive */
@media all and (max-width: 767px) {
  .can-content section {
    padding: 0 5%; }
    .can-content section .content {
      padding: 0; }
      .can-content section .content .read {
        font-size: 4.5vw; }
  .can-content .pc-brake {
    display: none; }
  .can-content .sp-brake {
    display: inline; } }

/* common: animation */
.can-content section .content .read.os-anim {
  opacity: 0;
  transform: translateX(-40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content section .content .read.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

/* ----------------------------------------------------------------
can-content: section-title
---------------------------------------------------------------- */
@media all and (min-width: 768px) {
  .can-content .section-title {
    margin-bottom: 40px;
    text-align: center; }
    .can-content .section-title .pc {
      display: inline; }
    .can-content .section-title .sp {
      display: none; } }

/* section-title: responsive */
@media all and (max-width: 767px) {
  .can-content .section-title {
    margin-bottom: 20px; }
    .can-content .section-title .pc {
      display: none; }
    .can-content .section-title .sp {
      display: inline;
      max-width: 390px; } }

/* section-title: animation */
.can-content .section-title.os-anim {
  opacity: 0;
  transform: translateY(40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .section-title.os-anim.onScreen {
    opacity: 1;
    transform: translateY(0); }

/* ----------------------------------------------------------------
can-content: banner
---------------------------------------------------------------- */
.can-content .banner img {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); }

/* ----------------------------------------------------------------
can-content: intro
---------------------------------------------------------------- */
.can-content .intro {
  padding-top: 250px; }
  .can-content .intro .content {
    width: 840px;
    margin: 0 auto;
    zoom: 1; }
    .can-content .intro .content:after {
      display: block;
      clear: both;
      content: ""; }

/* intro: responsive */
@media all and (max-width: 767px) {
  .can-content .intro {
    padding: 0;
    padding-top: 25vw; }
    .can-content .intro .content {
      width: 96%; }
    .can-content .intro .can-title {
      width: 60%;
      margin-top: 1vw; }
    .can-content .intro .can-image {
      width: 36%;
      margin-left: 4%; } }

/* intro: animation */
.can-content .intro .can-title.os-anim {
  opacity: 0;
  transform: translateX(40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .intro .can-title.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

.can-content .intro .can-image.os-anim {
  opacity: 0;
  transform: translateX(-40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .intro .can-image.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

/* ----------------------------------------------------------------
can-content: about
---------------------------------------------------------------- */
.can-content .about {
  margin-top: 80px; }
  .can-content .about .read .sp {
    display: none; }
  .can-content .about .section-title .pc {
    width: 920px; }
  .can-content .about .balloon-space {
    display: flex;
    justify-content: space-between;
    margin: 10rem 10rem 0; }
  .can-content .about .img-01 {
    position: relative; }
    .can-content .about .img-01:after {
      content: '';
      position: absolute;
      top: 38px;
      left: -43px;
      width: 130px;
      height: 660px;
      transform: scale(0.5);
      background: url(../images/can/img_balloonproduct_03.png) no-repeat; }
  .can-content .about .img-02 {
    position: relative; }
    .can-content .about .img-02:after {
      content: '';
      position: absolute;
      top: -142px;
      right: -43px;
      width: 130px;
      height: 900px;
      transform: scale(0.5);
      background: url(../images/can/img_balloonproduct_04.png) no-repeat; }
  .can-content .about .balloon-space .ttl {
    font-size: 28px;
    font-weight: bold;
    margin-top: 3rem;
    line-height: 1.4; }
  .can-content .about .balloon-space .unit {
    font-size: 22.5px;
    line-height: 1.4; }
  .can-content .about .balloon-space .spl {
    font-size: 20px; }
  .can-content .about .balloon-space .spl-sml {
    font-size: 13px; }
  .can-content .about .balloon-space .online.fst {
    width: 212.5px;
    height: 42.5px;
    margin: 2.5rem auto; }
  .can-content .about .balloon-space .online.scd {
    width: 212.5px;
    height: 42.5px;
    margin: 5rem auto; }
  .can-content .about .balloon-space .balloon-product {
    display: block;
    width: 50%;
    text-align: center;
    margin: 0 auto; }
    .can-content .about .balloon-space .balloon-product .img-outlet-01,
    .can-content .about .balloon-space .balloon-product .img-ballon-pc,
    .can-content .about .balloon-space .balloon-product .img-ballon-sp,
    .can-content .about .balloon-space .balloon-product .img-outlet-02,
    .can-content .about .balloon-space .balloon-product .img-ballon-pc,
    .can-content .about .balloon-space .balloon-product .img-ballon-sp {
      width: 50%;
      height: auto; }
    .can-content .about .balloon-space .balloon-product .img-outlet-01 {
      display: none; }
    .can-content .about .balloon-space .balloon-product .img-ballon-sp {
      display: none; }
    .can-content .about .balloon-space .balloon-product .img-outlet-02 {
      display: none; }
  .can-content .about .read {
    text-align: center; }

/* about: responsive */
@media all and (min-width: 768px) {
  .can-content .about .balloon-space .ttl {
    white-space: nowrap; }
    .can-content .about .balloon-space .ttl br {
      display: none; }
  .can-content .about .img-02 .pc {
    display: inline; }
  .can-content .about .img-02 .sp {
    display: none; } }

@media all and (max-width: 767px) {
  .can-content .about {
    margin-top: 60px; }
    .can-content .about .content {
      min-height: 160vw; }
    .can-content .about .balloon-space {
      display: block;
      margin: 5rem 0 0; }
      .can-content .about .balloon-space .img-01:before {
        display: none; }
      .can-content .about .balloon-space .img-01:after {
        display: none; }
      .can-content .about .balloon-space .img-02:before {
        display: none; }
      .can-content .about .balloon-space .img-02:after {
        display: none; }
      .can-content .about .balloon-space .online.fst {
        margin: 3rem auto 0; }
      .can-content .about .balloon-space .online.scd {
        margin: 3rem auto 0; }
      .can-content .about .balloon-space .balloon-product {
        width: 100%; }
        .can-content .about .balloon-space .balloon-product .img-outlet-01,
        .can-content .about .balloon-space .balloon-product .img-ballon-pc,
        .can-content .about .balloon-space .balloon-product .img-ballon-sp,
        .can-content .about .balloon-space .balloon-product .img-outlet-02,
        .can-content .about .balloon-space .balloon-product .img-ballon-pc,
        .can-content .about .balloon-space .balloon-product .img-ballon-sp {
          width: 60vw;
          margin: 10px auto;
          min-width: 120px; }
        .can-content .about .balloon-space .balloon-product .img-outlet-01 {
          display: inline; }
        .can-content .about .balloon-space .balloon-product .img-ballon-sp {
          display: inline; }
        .can-content .about .balloon-space .balloon-product .img-outlet-02 {
          display: inline; }
        .can-content .about .balloon-space .balloon-product .ec-button > img {
          width: 100% !important; }
        .can-content .about .balloon-space .balloon-product:nth-child(1) {
          margin: 0 auto 7rem; }
      .can-content .about .balloon-space .image {
        height: auto; }
    .can-content .about .read {
      margin-left: 0; }
      .can-content .about .read .pc {
        display: none; }
      .can-content .about .read .sp {
        display: block; }
    .can-content .about .image {
      margin: auto;
      display: block; }
      .can-content .about .image .img-outlet-01 {
        display: block; }
      .can-content .about .image .img-ballon-pc {
        display: none; }
      .can-content .about .image .img-ballon-sp {
        display: block;
        width: 100% !important; }
      .can-content .about .image .img-outlet-02 {
        display: block; } }

@media all and (max-width: 400px) {
  .can-content .about .image {
    width: 285px; }
  .can-content .about .balloon-space .img-01:before {
    top: -213px;
    left: -91px; }
  .can-content .about .balloon-space .img-02:before {
    top: -345px;
    right: -97px; } }

/* about: animation */
.can-content .about .img-01.os-anim {
  opacity: 0;
  transform: translateX(40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .about .img-01.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

.can-content .about .img-02.os-anim {
  opacity: 0;
  transform: translateX(-40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .about .img-02.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

.can-content .about .bl-01.os-anim {
  opacity: 0;
  transform: translateX(40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .about .bl-01.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

.can-content .about .bl-02.os-anim {
  opacity: 0;
  transform: translateX(-40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .about .bl-02.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

/* ----------------------------------------------------------------
can-content: make-drink
---------------------------------------------------------------- */
.can-content .make-drink {
  margin-top: 60px; }
  .can-content .make-drink .section-title .pc {
    width: 687.5px; }
  .can-content .make-drink .make-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 12.5rem; }
    .can-content .make-drink .make-container .make-item {
      width: 297px;
      margin: 2rem 0; }
    .can-content .make-drink .make-container .make-item.item-01 {
      position: relative; }
    .can-content .make-drink .make-container .make-item.item-02 {
      position: relative; }
    .can-content .make-drink .make-container .make-item.item-03 {
      position: relative; }
    .can-content .make-drink .make-container .make-item.item-05 {
      position: relative;
      margin: 5rem 0 0; }
  .can-content .make-drink .make-item.item-01:after {
    content: '';
    position: absolute;
    bottom: 124px;
    right: -75px;
    width: 37px;
    height: 23px;
    background: url(../images/can/arrow.svg) no-repeat; }
  .can-content .make-drink .make-item.item-02:before {
    content: '';
    position: absolute;
    top: 350px;
    left: -78px;
    width: 37px;
    height: 23px;
    transform: rotate(135deg);
    background: url(../images/can/arrow.svg) no-repeat; }
  .can-content .make-drink .make-item.item-03:after {
    content: '';
    position: absolute;
    bottom: -29px;
    right: 126px;
    width: 37px;
    height: 23px;
    transform: rotate(90deg);
    background: url(../images/can/arrow.svg) no-repeat; }
  .can-content .make-drink .make-item.item-05:before {
    content: '';
    position: absolute;
    top: 123px;
    right: -75px;
    width: 37px;
    height: 23px;
    background: url(../images/can/arrow.svg) no-repeat; }
  .can-content .make-drink .bottle-container {
    display: block;
    margin-bottom: 6rem; }
    .can-content .make-drink .bottle-container ul {
      display: flex;
      list-style: none;
      margin: 0 21rem; }
      .can-content .make-drink .bottle-container ul li {
        width: 7.5rem;
        margin: 5px; }
        .can-content .make-drink .bottle-container ul li:first-child {
          position: relative;
          width: 8rem;
          margin-right: auto; }
  .can-content .make-drink .bottle-container li:first-child:before {
    content: '';
    position: absolute;
    top: 121px;
    right: -75px;
    width: 29px;
    height: 29px;
    background: url(../images/can/plus.svg) no-repeat; }
  .can-content .make-drink p {
    text-align: center; }
  .can-content .make-drink .read .sp {
    display: none; }

/* make-drink:: responsive */
@media all and (max-width: 767px) {
  .can-content .make-drink {
    margin-top: 30px; }
    .can-content .make-drink .section-title {
      text-align: center; }
    .can-content .make-drink .make-container {
      display: block;
      margin: 0; }
      .can-content .make-drink .make-container .make-item {
        margin: auto; }
        .can-content .make-drink .make-container .make-item.item-01 {
          margin: 0 auto 5rem; }
        .can-content .make-drink .make-container .make-item.item-02 {
          margin: 0 auto 6rem; }
        .can-content .make-drink .make-container .make-item.item-03 {
          margin: 0 auto -6rem; }
        .can-content .make-drink .make-container .make-item.item-04 {
          margin: 0 auto; }
        .can-content .make-drink .make-container .make-item.item-05 {
          margin: 6rem auto 0; }
        .can-content .make-drink .make-container .make-item.item-06 {
          margin: 1rem auto 0; }
        .can-content .make-drink .make-container .make-item.item-01:after {
          bottom: -57px;
          right: 126px;
          transform: rotate(90deg); }
        .can-content .make-drink .make-container .make-item.item-02:before {
          top: 328px;
          left: 134px;
          transform: rotate(90deg); }
        .can-content .make-drink .make-container .make-item.item-03:after {
          bottom: -268px;
          right: 130px;
          transform: rotate(90deg); }
        .can-content .make-drink .make-container .make-item.item-05:before {
          top: 270px;
          right: 130px;
          transform: rotate(90deg); }
    .can-content .make-drink .bottle-container {
      margin-top: 4rem;
      margin-bottom: 3rem; }
      .can-content .make-drink .bottle-container ul {
        margin: 0;
        justify-content: center; }
        .can-content .make-drink .bottle-container ul li:first-child {
          margin-right: 14vw; }
    .can-content .make-drink .bottle-container li:first-child:before {
      top: 17vw;
      right: -12.5vw; }
    .can-content .make-drink .read .sp {
      display: block; } }

/* make-drink: animation */
.can-content .make-drink .item-01.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  transition-delay: .4s; }
  .can-content .make-drink .item-01.os-anim.onScreen {
    opacity: 1; }

.can-content .make-drink .item-02.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  transition-delay: .55s; }
  .can-content .make-drink .item-02.os-anim.onScreen {
    opacity: 1; }

.can-content .make-drink .item-03.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  transition-delay: .7s; }
  .can-content .make-drink .item-03.os-anim.onScreen {
    opacity: 1; }

.can-content .make-drink .item-04.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  transition-delay: .85s; }
  .can-content .make-drink .item-04.os-anim.onScreen {
    opacity: 1; }

.can-content .make-drink .item-05.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  transition-delay: 1s; }
  .can-content .make-drink .item-05.os-anim.onScreen {
    opacity: 1; }

.can-content .make-drink .item-06.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  transition-delay: 1.15s; }
  .can-content .make-drink .item-06.os-anim.onScreen {
    opacity: 1; }

/* ----------------------------------------------------------------
can-content: history
---------------------------------------------------------------- */
.can-content .history {
  margin-top: 50px; }
  .can-content .history .section-title .pc {
    width: 790px; }
  .can-content .history .content {
    min-height: 440px; }
  .can-content .history .read {
    margin-left: 320px; }
  .can-content .history .image {
    position: absolute; }
  .can-content .history .img-01 {
    top: 80px;
    left: 60px;
    width: 220px; }
  .can-content .history .img-02 {
    bottom: 20px;
    left: 380px;
    width: 210px; }
  .can-content .history .img-03 {
    bottom: 0;
    left: 640px;
    width: 210px; }

/* history: responsive */
@media all and (max-width: 767px) {
  .can-content .history {
    margin-top: 0; }
    .can-content .history .sp-bg {
      background-color: #e61e2a;
      padding: 2rem 1rem 0rem;
      margin-top: 40px; }
      .can-content .history .sp-bg .content {
        min-height: 180vw; }
      .can-content .history .sp-bg .read {
        margin-left: 0; }
        .can-content .history .sp-bg .read br {
          display: none; }
          .can-content .history .sp-bg .read br.important {
            display: inline; }
      .can-content .history .sp-bg .img-01 {
        top: auto;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 50%; }
      .can-content .history .sp-bg .img-02 {
        bottom: 2.5%;
        left: 0;
        width: 45%; }
      .can-content .history .sp-bg .img-03 {
        bottom: 0;
        left: 55%;
        width: 45%; } }

/* history: animation */
.can-content .history .img-01.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .history .img-01.os-anim.onScreen {
    opacity: 1; }

.can-content .history .img-02.os-anim {
  opacity: 0;
  transform: translateX(-40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .history .img-02.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

.can-content .history .img-03.os-anim {
  opacity: 0;
  transform: translateX(40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out; }
  .can-content .history .img-03.os-anim.onScreen {
    opacity: 1;
    transform: translateX(0); }

/* ----------------------------------------------------------------
can-content: food
---------------------------------------------------------------- */
.can-content .food {
  margin-top: 60px; }
  .can-content .food .section-title .pc {
    width: 570px; }
  .can-content .food .read {
    margin-left: 250px; }
  .can-content .food .foods-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10rem; }
    .can-content .food .foods-container .food-item {
      width: 240px;
      text-align: center;
      font-size: 20px; }
      .can-content .food .foods-container .food-item.item-01, .can-content .food .foods-container .food-item.item-03 {
        margin-top: 60px; }
    .can-content .food .foods-container .image {
      display: inline-block;
      overflow: hidden;
      border-radius: 50%;
      margin-bottom: 10px; }

/* food: responsive */
@media all and (max-width: 767px) {
  .can-content .food {
    margin-top: 0; }
    .can-content .food .sp-bg {
      background-color: #e61e2a;
      padding: 2rem 1rem; }
    .can-content .food .read {
      margin-left: 0; }
      .can-content .food .read br {
        display: none; }
    .can-content .food .foods-container {
      flex-wrap: nowrap;
      margin-bottom: 0;
      margin-top: 10rem; }
      .can-content .food .foods-container .food-item {
        text-align: center;
        font-size: 3.8vw; }
        .can-content .food .foods-container .food-item.item-01 {
          margin-top: 0; }
        .can-content .food .foods-container .food-item.item-02 {
          margin-top: -10rem; }
        .can-content .food .foods-container .food-item.item-03 {
          margin-top: 0; }
      .can-content .food .foods-container .image {
        display: inline-block;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        margin-bottom: 10px; }
    .can-content .food .image.warmth {
      margin-top: 10rem; } }

/* food: animation */
.can-content .food .item-01.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .8s;
  transition-timing-function: ease-out;
  transition-delay: .4s; }
  .can-content .food .item-01.os-anim.onScreen {
    opacity: 1; }

.can-content .food .item-02.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .8s;
  transition-timing-function: ease-out;
  transition-delay: .6s; }
  .can-content .food .item-02.os-anim.onScreen {
    opacity: 1; }

.can-content .food .item-03.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .8s;
  transition-timing-function: ease-out;
  transition-delay: .8s; }
  .can-content .food .item-03.os-anim.onScreen {
    opacity: 1; }

/* ----------------------------------------------------------------
can-content: shop
---------------------------------------------------------------- */
.can-content .shop {
  margin-top: 60px; }
  .can-content .shop .section-title .pc {
    width: 750px; }
  .can-content .shop .content .read {
    margin-bottom: 10px;
    text-align: center; }
    .can-content .shop .content .read.notice {
      margin: 0;
      font-size: 14px;
      line-height: 1.8; }
  .can-content .shop .image {
    position: relative;
    width: 100px;
    margin: 30px auto; }
  .can-content .shop .shop-title {
    margin-bottom: 20px;
    text-align: center;
    font-size: 40px; }
  .can-content .shop .select-container {
    margin: 30px auto;
    text-align: center; }
    .can-content .shop .select-container .pref {
      display: inline-block;
      width: 100%;
      max-width: 320px;
      padding: 10px 40px 10px 20px;
      font-size: 24px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-color: #fff;
      border-radius: 6px;
      background-color: #fff;
      background-image: url(../images/can/ico_pulldown_02.png);
      background-repeat: no-repeat;
      background-position: right 50%;
      background-size: 28px 22px;
      color: #000; }
  .can-content .shop .list-container .prefs {
    display: none; }
  .can-content .shop .list-container dl {
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 16px;
    line-height: 1.8;
    zoom: 1; }
    .can-content .shop .list-container dl:after {
      display: block;
      clear: both;
      content: ""; }
    .can-content .shop .list-container dl:nth-child(odd) {
      background-color: rgba(255, 255, 255, 0.2); }
    .can-content .shop .list-container dl dt, .can-content .shop .list-container dl dd {
      padding: 1em; }
    .can-content .shop .list-container dl dt {
      width: 36%;
      float: left;
      font-weight: bold; }
    .can-content .shop .list-container dl dd {
      width: 64%;
      float: left; }

@media all and (-ms-high-contrast: none) {
  .can-content .shop .select-container select::-ms-expand {
    display: none; } }

/* shop: responsive */
@media all and (max-width: 767px) {
  .can-content .shop {
    margin-top: 40px; }
    .can-content .shop .content .read.notice {
      font-size: 3.6vw; }
    .can-content .shop .image {
      width: 25%;
      max-width: 100px; }
    .can-content .shop .shop-title {
      font-size: 9.6vw; }
    .can-content .shop .select-container .pref {
      font-size: 6.4vw; }
    .can-content .shop .list-container dl {
      font-size: 4vw; }
      .can-content .shop .list-container dl dt {
        width: auto;
        float: none;
        padding-bottom: 0; }
      .can-content .shop .list-container dl dd {
        width: auto;
        float: none; } }

/* shop: animation */
.can-content .shop .select-container.os-anim {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .8s;
  transition-timing-function: ease-out;
  transition-delay: .8s; }
  .can-content .shop .select-container.os-anim.onScreen {
    opacity: 1; }

.can-content .shop .image.os-anim {
  opacity: 0;
  transform: translateY(40px);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease-out;
  transition-delay: .8s; }
  .can-content .shop .image.os-anim.onScreen {
    opacity: 1;
    transform: translateY(0); }

.can-content .akadamapunch-glass-banner {
  padding: 20px 0; }

@-webkit-keyframes shake {
  0% {
    transform: translateX(10px); }
  50% {
    transform: translateX(-10px); }
  100% {
    transform: translateX(10px); } }

@keyframes shake {
  0% {
    transform: translateX(10px); }
  50% {
    transform: translateX(-10px); }
  100% {
    transform: translateX(10px); } }

@-webkit-keyframes move {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-11000px);
    opacity: .8; } }

@keyframes move {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-11000px);
    opacity: .8; } }

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.bubble {
  position: absolute;
  bottom: -20%;
  left: 50%; }
  .bubble .item {
    display: block;
    border-radius: 100%; }

.bubble-container.disc .bubble .item {
  width: 20px;
  height: 20px;
  background-color: #fff; }

.bubble-container.circle .bubble .item {
  width: 30px;
  height: 30px;
  border: 5px solid #fff;
  border-radius: 100%; }

.bubble-container.star .bubble .item {
  width: 40px;
  height: 40px;
  background-color: #fff;
  background-image: url(../images/can/img_star_01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.can-banner.compact .bubble {
  bottom: -100%; }

.shake0 {
  -webkit-animation: shake 2s ease 0s infinite normal;
          animation: shake 2s ease 0s infinite normal; }

.move0 {
  -webkit-animation: move 15s linear 0s infinite normal;
          animation: move 15s linear 0s infinite normal; }

.rotate0 {
  -webkit-animation: rotate 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
          animation: rotate 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }

.pos0 {
  left: 0%; }

.scale0 {
  transform: scale(0); }

.shake1 {
  -webkit-animation: shake 2.2s ease 0s infinite normal;
          animation: shake 2.2s ease 0s infinite normal; }

.move1 {
  -webkit-animation: move 15.2s linear 0.2s infinite normal;
          animation: move 15.2s linear 0.2s infinite normal; }

.rotate1 {
  -webkit-animation: rotate 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal;
          animation: rotate 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal; }

.pos1 {
  left: 2%; }

.scale1 {
  transform: scale(0.1); }

.shake2 {
  -webkit-animation: shake 2.4s ease 0s infinite normal;
          animation: shake 2.4s ease 0s infinite normal; }

.move2 {
  -webkit-animation: move 15.4s linear 0.4s infinite normal;
          animation: move 15.4s linear 0.4s infinite normal; }

.rotate2 {
  -webkit-animation: rotate 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal;
          animation: rotate 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal; }

.pos2 {
  left: 4%; }

.scale2 {
  transform: scale(0.2); }

.shake3 {
  -webkit-animation: shake 2.6s ease 0s infinite normal;
          animation: shake 2.6s ease 0s infinite normal; }

.move3 {
  -webkit-animation: move 15.6s linear 0.6s infinite normal;
          animation: move 15.6s linear 0.6s infinite normal; }

.rotate3 {
  -webkit-animation: rotate 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal;
          animation: rotate 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal; }

.pos3 {
  left: 6%; }

.scale3 {
  transform: scale(0.3); }

.shake4 {
  -webkit-animation: shake 2.8s ease 0s infinite normal;
          animation: shake 2.8s ease 0s infinite normal; }

.move4 {
  -webkit-animation: move 15.8s linear 0.8s infinite normal;
          animation: move 15.8s linear 0.8s infinite normal; }

.rotate4 {
  -webkit-animation: rotate 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal;
          animation: rotate 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal; }

.pos4 {
  left: 8%; }

.scale4 {
  transform: scale(0.4); }

.shake5 {
  -webkit-animation: shake 3s ease 0s infinite normal;
          animation: shake 3s ease 0s infinite normal; }

.move5 {
  -webkit-animation: move 16s linear 1s infinite normal;
          animation: move 16s linear 1s infinite normal; }

.rotate5 {
  -webkit-animation: rotate 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal;
          animation: rotate 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal; }

.pos5 {
  left: 10%; }

.scale5 {
  transform: scale(0.5); }

.shake6 {
  -webkit-animation: shake 3.2s ease 0s infinite normal;
          animation: shake 3.2s ease 0s infinite normal; }

.move6 {
  -webkit-animation: move 16.2s linear 1.2s infinite normal;
          animation: move 16.2s linear 1.2s infinite normal; }

.rotate6 {
  -webkit-animation: rotate 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal;
          animation: rotate 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal; }

.pos6 {
  left: 12%; }

.scale6 {
  transform: scale(0.6); }

.shake7 {
  -webkit-animation: shake 3.4s ease 0s infinite normal;
          animation: shake 3.4s ease 0s infinite normal; }

.move7 {
  -webkit-animation: move 16.4s linear 1.4s infinite normal;
          animation: move 16.4s linear 1.4s infinite normal; }

.rotate7 {
  -webkit-animation: rotate 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal;
          animation: rotate 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal; }

.pos7 {
  left: 14%; }

.scale7 {
  transform: scale(0.7); }

.shake8 {
  -webkit-animation: shake 3.6s ease 0s infinite normal;
          animation: shake 3.6s ease 0s infinite normal; }

.move8 {
  -webkit-animation: move 16.6s linear 1.6s infinite normal;
          animation: move 16.6s linear 1.6s infinite normal; }

.rotate8 {
  -webkit-animation: rotate 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal;
          animation: rotate 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal; }

.pos8 {
  left: 16%; }

.scale8 {
  transform: scale(0.8); }

.shake9 {
  -webkit-animation: shake 3.8s ease 0s infinite normal;
          animation: shake 3.8s ease 0s infinite normal; }

.move9 {
  -webkit-animation: move 16.8s linear 1.8s infinite normal;
          animation: move 16.8s linear 1.8s infinite normal; }

.rotate9 {
  -webkit-animation: rotate 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal;
          animation: rotate 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal; }

.pos9 {
  left: 18%; }

.scale9 {
  transform: scale(0.9); }

.shake10 {
  -webkit-animation: shake 4s ease 0s infinite normal;
          animation: shake 4s ease 0s infinite normal; }

.move10 {
  -webkit-animation: move 17s linear 2s infinite normal;
          animation: move 17s linear 2s infinite normal; }

.rotate10 {
  -webkit-animation: rotate 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal;
          animation: rotate 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal; }

.pos10 {
  left: 20%; }

.scale10 {
  transform: scale(1); }

.shake11 {
  -webkit-animation: shake 4.2s ease 0s infinite normal;
          animation: shake 4.2s ease 0s infinite normal; }

.move11 {
  -webkit-animation: move 17.2s linear 2.2s infinite normal;
          animation: move 17.2s linear 2.2s infinite normal; }

.rotate11 {
  -webkit-animation: rotate 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal;
          animation: rotate 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal; }

.pos11 {
  left: 22%; }

.scale11 {
  transform: scale(1.1); }

.shake12 {
  -webkit-animation: shake 4.4s ease 0s infinite normal;
          animation: shake 4.4s ease 0s infinite normal; }

.move12 {
  -webkit-animation: move 17.4s linear 2.4s infinite normal;
          animation: move 17.4s linear 2.4s infinite normal; }

.rotate12 {
  -webkit-animation: rotate 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal;
          animation: rotate 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal; }

.pos12 {
  left: 24%; }

.scale12 {
  transform: scale(1.2); }

.shake13 {
  -webkit-animation: shake 4.6s ease 0s infinite normal;
          animation: shake 4.6s ease 0s infinite normal; }

.move13 {
  -webkit-animation: move 17.6s linear 2.6s infinite normal;
          animation: move 17.6s linear 2.6s infinite normal; }

.rotate13 {
  -webkit-animation: rotate 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal;
          animation: rotate 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal; }

.pos13 {
  left: 26%; }

.scale13 {
  transform: scale(1.3); }

.shake14 {
  -webkit-animation: shake 4.8s ease 0s infinite normal;
          animation: shake 4.8s ease 0s infinite normal; }

.move14 {
  -webkit-animation: move 17.8s linear 2.8s infinite normal;
          animation: move 17.8s linear 2.8s infinite normal; }

.rotate14 {
  -webkit-animation: rotate 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal;
          animation: rotate 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal; }

.pos14 {
  left: 28%; }

.scale14 {
  transform: scale(1.4); }

.shake15 {
  -webkit-animation: shake 5s ease 0s infinite normal;
          animation: shake 5s ease 0s infinite normal; }

.move15 {
  -webkit-animation: move 18s linear 3s infinite normal;
          animation: move 18s linear 3s infinite normal; }

.rotate15 {
  -webkit-animation: rotate 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal;
          animation: rotate 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal; }

.pos15 {
  left: 30%; }

.scale15 {
  transform: scale(1.5); }

.shake16 {
  -webkit-animation: shake 5.2s ease 0s infinite normal;
          animation: shake 5.2s ease 0s infinite normal; }

.move16 {
  -webkit-animation: move 18.2s linear 3.2s infinite normal;
          animation: move 18.2s linear 3.2s infinite normal; }

.rotate16 {
  -webkit-animation: rotate 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal;
          animation: rotate 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal; }

.pos16 {
  left: 32%; }

.scale16 {
  transform: scale(1.6); }

.shake17 {
  -webkit-animation: shake 5.4s ease 0s infinite normal;
          animation: shake 5.4s ease 0s infinite normal; }

.move17 {
  -webkit-animation: move 18.4s linear 3.4s infinite normal;
          animation: move 18.4s linear 3.4s infinite normal; }

.rotate17 {
  -webkit-animation: rotate 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal;
          animation: rotate 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal; }

.pos17 {
  left: 34%; }

.scale17 {
  transform: scale(1.7); }

.shake18 {
  -webkit-animation: shake 5.6s ease 0s infinite normal;
          animation: shake 5.6s ease 0s infinite normal; }

.move18 {
  -webkit-animation: move 18.6s linear 3.6s infinite normal;
          animation: move 18.6s linear 3.6s infinite normal; }

.rotate18 {
  -webkit-animation: rotate 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal;
          animation: rotate 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal; }

.pos18 {
  left: 36%; }

.scale18 {
  transform: scale(1.8); }

.shake19 {
  -webkit-animation: shake 5.8s ease 0s infinite normal;
          animation: shake 5.8s ease 0s infinite normal; }

.move19 {
  -webkit-animation: move 18.8s linear 3.8s infinite normal;
          animation: move 18.8s linear 3.8s infinite normal; }

.rotate19 {
  -webkit-animation: rotate 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal;
          animation: rotate 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal; }

.pos19 {
  left: 38%; }

.scale19 {
  transform: scale(1.9); }

.shake20 {
  -webkit-animation: shake 6s ease 0s infinite normal;
          animation: shake 6s ease 0s infinite normal; }

.move20 {
  -webkit-animation: move 19s linear 4s infinite normal;
          animation: move 19s linear 4s infinite normal; }

.rotate20 {
  -webkit-animation: rotate 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal;
          animation: rotate 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal; }

.pos20 {
  left: 40%; }

.scale20 {
  transform: scale(2); }

.shake21 {
  -webkit-animation: shake 6.2s ease 0s infinite normal;
          animation: shake 6.2s ease 0s infinite normal; }

.move21 {
  -webkit-animation: move 19.2s linear 4.2s infinite normal;
          animation: move 19.2s linear 4.2s infinite normal; }

.rotate21 {
  -webkit-animation: rotate 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal;
          animation: rotate 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal; }

.pos21 {
  left: 42%; }

.scale21 {
  transform: scale(2.1); }

.shake22 {
  -webkit-animation: shake 6.4s ease 0s infinite normal;
          animation: shake 6.4s ease 0s infinite normal; }

.move22 {
  -webkit-animation: move 19.4s linear 4.4s infinite normal;
          animation: move 19.4s linear 4.4s infinite normal; }

.rotate22 {
  -webkit-animation: rotate 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal;
          animation: rotate 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal; }

.pos22 {
  left: 44%; }

.scale22 {
  transform: scale(2.2); }

.shake23 {
  -webkit-animation: shake 6.6s ease 0s infinite normal;
          animation: shake 6.6s ease 0s infinite normal; }

.move23 {
  -webkit-animation: move 19.6s linear 4.6s infinite normal;
          animation: move 19.6s linear 4.6s infinite normal; }

.rotate23 {
  -webkit-animation: rotate 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal;
          animation: rotate 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal; }

.pos23 {
  left: 46%; }

.scale23 {
  transform: scale(2.3); }

.shake24 {
  -webkit-animation: shake 6.8s ease 0s infinite normal;
          animation: shake 6.8s ease 0s infinite normal; }

.move24 {
  -webkit-animation: move 19.8s linear 4.8s infinite normal;
          animation: move 19.8s linear 4.8s infinite normal; }

.rotate24 {
  -webkit-animation: rotate 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal;
          animation: rotate 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal; }

.pos24 {
  left: 48%; }

.scale24 {
  transform: scale(2.4); }

.shake25 {
  -webkit-animation: shake 7s ease 0s infinite normal;
          animation: shake 7s ease 0s infinite normal; }

.move25 {
  -webkit-animation: move 20s linear 5s infinite normal;
          animation: move 20s linear 5s infinite normal; }

.rotate25 {
  -webkit-animation: rotate 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal;
          animation: rotate 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal; }

.pos25 {
  left: 50%; }

.scale25 {
  transform: scale(2.5); }

.shake26 {
  -webkit-animation: shake 7.2s ease 0s infinite normal;
          animation: shake 7.2s ease 0s infinite normal; }

.move26 {
  -webkit-animation: move 20.2s linear 5.2s infinite normal;
          animation: move 20.2s linear 5.2s infinite normal; }

.rotate26 {
  -webkit-animation: rotate 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal;
          animation: rotate 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal; }

.pos26 {
  left: 52%; }

.scale26 {
  transform: scale(2.6); }

.shake27 {
  -webkit-animation: shake 7.4s ease 0s infinite normal;
          animation: shake 7.4s ease 0s infinite normal; }

.move27 {
  -webkit-animation: move 20.4s linear 5.4s infinite normal;
          animation: move 20.4s linear 5.4s infinite normal; }

.rotate27 {
  -webkit-animation: rotate 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal;
          animation: rotate 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal; }

.pos27 {
  left: 54%; }

.scale27 {
  transform: scale(2.7); }

.shake28 {
  -webkit-animation: shake 7.6s ease 0s infinite normal;
          animation: shake 7.6s ease 0s infinite normal; }

.move28 {
  -webkit-animation: move 20.6s linear 5.6s infinite normal;
          animation: move 20.6s linear 5.6s infinite normal; }

.rotate28 {
  -webkit-animation: rotate 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal;
          animation: rotate 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal; }

.pos28 {
  left: 56%; }

.scale28 {
  transform: scale(2.8); }

.shake29 {
  -webkit-animation: shake 7.8s ease 0s infinite normal;
          animation: shake 7.8s ease 0s infinite normal; }

.move29 {
  -webkit-animation: move 20.8s linear 5.8s infinite normal;
          animation: move 20.8s linear 5.8s infinite normal; }

.rotate29 {
  -webkit-animation: rotate 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal;
          animation: rotate 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal; }

.pos29 {
  left: 58%; }

.scale29 {
  transform: scale(2.9); }

.shake30 {
  -webkit-animation: shake 8s ease 0s infinite normal;
          animation: shake 8s ease 0s infinite normal; }

.move30 {
  -webkit-animation: move 21s linear 6s infinite normal;
          animation: move 21s linear 6s infinite normal; }

.rotate30 {
  -webkit-animation: rotate 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal;
          animation: rotate 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal; }

.pos30 {
  left: 60%; }

.scale30 {
  transform: scale(3); }

.shake31 {
  -webkit-animation: shake 8.2s ease 0s infinite normal;
          animation: shake 8.2s ease 0s infinite normal; }

.move31 {
  -webkit-animation: move 21.2s linear 6.2s infinite normal;
          animation: move 21.2s linear 6.2s infinite normal; }

.rotate31 {
  -webkit-animation: rotate 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal;
          animation: rotate 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal; }

.pos31 {
  left: 62%; }

.scale31 {
  transform: scale(3.1); }

.shake32 {
  -webkit-animation: shake 8.4s ease 0s infinite normal;
          animation: shake 8.4s ease 0s infinite normal; }

.move32 {
  -webkit-animation: move 21.4s linear 6.4s infinite normal;
          animation: move 21.4s linear 6.4s infinite normal; }

.rotate32 {
  -webkit-animation: rotate 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal;
          animation: rotate 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal; }

.pos32 {
  left: 64%; }

.scale32 {
  transform: scale(3.2); }

.shake33 {
  -webkit-animation: shake 8.6s ease 0s infinite normal;
          animation: shake 8.6s ease 0s infinite normal; }

.move33 {
  -webkit-animation: move 21.6s linear 6.6s infinite normal;
          animation: move 21.6s linear 6.6s infinite normal; }

.rotate33 {
  -webkit-animation: rotate 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal;
          animation: rotate 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal; }

.pos33 {
  left: 66%; }

.scale33 {
  transform: scale(3.3); }

.shake34 {
  -webkit-animation: shake 8.8s ease 0s infinite normal;
          animation: shake 8.8s ease 0s infinite normal; }

.move34 {
  -webkit-animation: move 21.8s linear 6.8s infinite normal;
          animation: move 21.8s linear 6.8s infinite normal; }

.rotate34 {
  -webkit-animation: rotate 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal;
          animation: rotate 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal; }

.pos34 {
  left: 68%; }

.scale34 {
  transform: scale(3.4); }

.shake35 {
  -webkit-animation: shake 9s ease 0s infinite normal;
          animation: shake 9s ease 0s infinite normal; }

.move35 {
  -webkit-animation: move 22s linear 7s infinite normal;
          animation: move 22s linear 7s infinite normal; }

.rotate35 {
  -webkit-animation: rotate 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal;
          animation: rotate 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal; }

.pos35 {
  left: 70%; }

.scale35 {
  transform: scale(3.5); }

.shake36 {
  -webkit-animation: shake 9.2s ease 0s infinite normal;
          animation: shake 9.2s ease 0s infinite normal; }

.move36 {
  -webkit-animation: move 22.2s linear 7.2s infinite normal;
          animation: move 22.2s linear 7.2s infinite normal; }

.rotate36 {
  -webkit-animation: rotate 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal;
          animation: rotate 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal; }

.pos36 {
  left: 72%; }

.scale36 {
  transform: scale(3.6); }

.shake37 {
  -webkit-animation: shake 9.4s ease 0s infinite normal;
          animation: shake 9.4s ease 0s infinite normal; }

.move37 {
  -webkit-animation: move 22.4s linear 7.4s infinite normal;
          animation: move 22.4s linear 7.4s infinite normal; }

.rotate37 {
  -webkit-animation: rotate 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal;
          animation: rotate 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal; }

.pos37 {
  left: 74%; }

.scale37 {
  transform: scale(3.7); }

.shake38 {
  -webkit-animation: shake 9.6s ease 0s infinite normal;
          animation: shake 9.6s ease 0s infinite normal; }

.move38 {
  -webkit-animation: move 22.6s linear 7.6s infinite normal;
          animation: move 22.6s linear 7.6s infinite normal; }

.rotate38 {
  -webkit-animation: rotate 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal;
          animation: rotate 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal; }

.pos38 {
  left: 76%; }

.scale38 {
  transform: scale(3.8); }

.shake39 {
  -webkit-animation: shake 9.8s ease 0s infinite normal;
          animation: shake 9.8s ease 0s infinite normal; }

.move39 {
  -webkit-animation: move 22.8s linear 7.8s infinite normal;
          animation: move 22.8s linear 7.8s infinite normal; }

.rotate39 {
  -webkit-animation: rotate 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal;
          animation: rotate 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal; }

.pos39 {
  left: 78%; }

.scale39 {
  transform: scale(3.9); }

.shake40 {
  -webkit-animation: shake 10s ease 0s infinite normal;
          animation: shake 10s ease 0s infinite normal; }

.move40 {
  -webkit-animation: move 23s linear 8s infinite normal;
          animation: move 23s linear 8s infinite normal; }

.rotate40 {
  -webkit-animation: rotate 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal;
          animation: rotate 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal; }

.pos40 {
  left: 80%; }

.scale40 {
  transform: scale(4); }

.shake41 {
  -webkit-animation: shake 10.2s ease 0s infinite normal;
          animation: shake 10.2s ease 0s infinite normal; }

.move41 {
  -webkit-animation: move 23.2s linear 8.2s infinite normal;
          animation: move 23.2s linear 8.2s infinite normal; }

.rotate41 {
  -webkit-animation: rotate 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal;
          animation: rotate 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal; }

.pos41 {
  left: 82%; }

.scale41 {
  transform: scale(4.1); }

.shake42 {
  -webkit-animation: shake 10.4s ease 0s infinite normal;
          animation: shake 10.4s ease 0s infinite normal; }

.move42 {
  -webkit-animation: move 23.4s linear 8.4s infinite normal;
          animation: move 23.4s linear 8.4s infinite normal; }

.rotate42 {
  -webkit-animation: rotate 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal;
          animation: rotate 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal; }

.pos42 {
  left: 84%; }

.scale42 {
  transform: scale(4.2); }

.shake43 {
  -webkit-animation: shake 10.6s ease 0s infinite normal;
          animation: shake 10.6s ease 0s infinite normal; }

.move43 {
  -webkit-animation: move 23.6s linear 8.6s infinite normal;
          animation: move 23.6s linear 8.6s infinite normal; }

.rotate43 {
  -webkit-animation: rotate 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal;
          animation: rotate 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal; }

.pos43 {
  left: 86%; }

.scale43 {
  transform: scale(4.3); }

.shake44 {
  -webkit-animation: shake 10.8s ease 0s infinite normal;
          animation: shake 10.8s ease 0s infinite normal; }

.move44 {
  -webkit-animation: move 23.8s linear 8.8s infinite normal;
          animation: move 23.8s linear 8.8s infinite normal; }

.rotate44 {
  -webkit-animation: rotate 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal;
          animation: rotate 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal; }

.pos44 {
  left: 88%; }

.scale44 {
  transform: scale(4.4); }

.shake45 {
  -webkit-animation: shake 11s ease 0s infinite normal;
          animation: shake 11s ease 0s infinite normal; }

.move45 {
  -webkit-animation: move 24s linear 9s infinite normal;
          animation: move 24s linear 9s infinite normal; }

.rotate45 {
  -webkit-animation: rotate 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal;
          animation: rotate 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal; }

.pos45 {
  left: 90%; }

.scale45 {
  transform: scale(4.5); }

.shake46 {
  -webkit-animation: shake 11.2s ease 0s infinite normal;
          animation: shake 11.2s ease 0s infinite normal; }

.move46 {
  -webkit-animation: move 24.2s linear 9.2s infinite normal;
          animation: move 24.2s linear 9.2s infinite normal; }

.rotate46 {
  -webkit-animation: rotate 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal;
          animation: rotate 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal; }

.pos46 {
  left: 92%; }

.scale46 {
  transform: scale(4.6); }

.shake47 {
  -webkit-animation: shake 11.4s ease 0s infinite normal;
          animation: shake 11.4s ease 0s infinite normal; }

.move47 {
  -webkit-animation: move 24.4s linear 9.4s infinite normal;
          animation: move 24.4s linear 9.4s infinite normal; }

.rotate47 {
  -webkit-animation: rotate 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal;
          animation: rotate 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal; }

.pos47 {
  left: 94%; }

.scale47 {
  transform: scale(4.7); }

.shake48 {
  -webkit-animation: shake 11.6s ease 0s infinite normal;
          animation: shake 11.6s ease 0s infinite normal; }

.move48 {
  -webkit-animation: move 24.6s linear 9.6s infinite normal;
          animation: move 24.6s linear 9.6s infinite normal; }

.rotate48 {
  -webkit-animation: rotate 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal;
          animation: rotate 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal; }

.pos48 {
  left: 96%; }

.scale48 {
  transform: scale(4.8); }

.shake49 {
  -webkit-animation: shake 11.8s ease 0s infinite normal;
          animation: shake 11.8s ease 0s infinite normal; }

.move49 {
  -webkit-animation: move 24.8s linear 9.8s infinite normal;
          animation: move 24.8s linear 9.8s infinite normal; }

.rotate49 {
  -webkit-animation: rotate 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal;
          animation: rotate 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal; }

.pos49 {
  left: 98%; }

.scale49 {
  transform: scale(4.9); }

.shake50 {
  -webkit-animation: shake 12s ease 0s infinite normal;
          animation: shake 12s ease 0s infinite normal; }

.move50 {
  -webkit-animation: move 25s linear 10s infinite normal;
          animation: move 25s linear 10s infinite normal; }

.rotate50 {
  -webkit-animation: rotate 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal;
          animation: rotate 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal; }

.pos50 {
  left: 100%; }

.scale50 {
  transform: scale(5); }

/*----------------------------------------------------------------*/
/* page-navi: wrapper */
.page-navi {
  position: absolute;
  top: 20px;
  right: 50%;
  z-index: 10;
  width: 210px;
  opacity: 0;
  transform: translateX(480px); }
  .page-navi.fixed {
    position: fixed;
    top: 0; }

@media all and (max-width: 960px) {
  .page-navi {
    top: 0;
    right: 0;
    width: 100%;
    transform: none; } }

/*----------------------------------------------------------------*/
/* page-navi: menu */
.page-navi .menu {
  display: none;
  padding: 64px 0 30px;
  background-color: #ffcb04; }

.home .page-navi .menu {
  padding: 50px 0 50px; }

.home .page-navi.fixed .menu {
  padding: 64px 0 30px; }

@media all and (max-width: 960px) {
  .page-navi .menu {
    padding: 64px 0; } }

/*----------------------------------------------------------------*/
/* page-navi: menu-item */
.page-navi .menu-item {
  position: relative;
  width: 180px;
  margin: 0 auto;
  padding: 8px 0 8px 20px;
  border-top: 1px solid white; }
  .page-navi .menu-item:last-child {
    border-bottom: 1px solid white; }
  .page-navi .menu-item a {
    display: inline-block;
    width: 160px;
    height: 20px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 160px;
    text-indent: 100%;
    white-space: nowrap; }
  .page-navi .menu-item.home {
    margin-bottom: 1px;
    border-bottom: 1px solid white;
  }
  .page-navi .menu-item.home.second {
    border-bottom: none;
  }
  .page-navi .menu-item.home a {
      background-image: url(../images/common/mnu_home_01.png); }
  .page-navi .menu-item.news a {
    background-image: url(../images/common/mnu_news_01.png); }
  .page-navi .menu-item.history a {
    background-image: url(../images/common/mnu_history_01.png); }
  .page-navi .menu-item.drink a {
    background-image: url(../images/common/mnu_drink_01.png); }
  .page-navi .menu-item.recipe a {
    background-image: url(../images/common/mnu_recipe_01.png); }
  .page-navi .menu-item.lineup a {
    background-image: url(../images/common/mnu_lineup_01.png); }
  .page-navi .menu-item.can a {
    background-image: url(../images/common/mnu_can_01.png); }
  .page-navi .menu-item.cr:before {
    content: "";
    position: absolute;
    top: 14px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #d11519; }

.home .page-navi .menu-item {
  padding: 12px 0 12px 20px; }
  .home .page-navi .menu-item.home {
    display: none; }

.isnt-touch .menu-item a:hover {
  background-position: left bottom; }

/*----------------------------------------------------------------*/
/* page-navi: menu-trigger */
.page-navi.fixed .menu-trigger {
  display: block; }

.home .menu-trigger {
  display: none; }

@media all and (max-width: 767px) {
  .home .menu-trigger {
    display: block; } }

.page-navi .menu-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.8em;
  height: 4.8em;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  line-height: 0.8rem;
  color: #808080; }
  .page-navi .menu-trigger:after {
    content: "menu";
    display: inline-block;
    margin-top: 0.4em; }
  .page-navi .menu-trigger .menu-lines {
    margin-top: 0.6em; }
    .page-navi .menu-trigger .menu-lines > * {
      display: inline-block;
      width: 3.2rem;
      height: 0.4rem;
      background-color: #808080;
      transition: all .4s ease; }

.page-navi.opened .menu-trigger:after {
  content: "close"; }

.page-navi.opened .menu-trigger .menu-lines > *:nth-of-type(1) {
  transform: translateY(0.8rem) rotate(-45deg); }

.page-navi.opened .menu-trigger .menu-lines > *:nth-of-type(2) {
  opacity: 0; }

.page-navi.opened .menu-trigger .menu-lines > *:nth-of-type(3) {
  transform: translateY(-0.8rem) rotate(45deg); }