@charset "UTF-8";
@import url("animate.css");
@import url("modaal.css");

/* 本番時削除 
html,body{ margin: 0; padding: 0; background-color: #ffd500;}
/* //本番時削除 */

.forPC{ display: inline-block;}
.forSP{ display: none !important;}

.clearfix { *zoom: 1;}
.clearfix:before,
.clearfix:after { display: table; line-height: 0; content: "";}
.clearfix:after { clear: both;}

#contents.bousai div,
#contents.bousai span,
#contents.bousai object,
#contents.bousai iframe,
#contents.bousai h1,
#contents.bousai h2,
#contents.bousai h3,
#contents.bousai h4,
#contents.bousai h5,
#contents.bousai h6,
#contents.bousai p,
#contents.bousai blockquote,
#contents.bousai pre,
#contents.bousai abbr,
#contents.bousai address,
#contents.bousai cite,
#contents.bousai code,
#contents.bousai del,
#contents.bousai dfn,
#contents.bousai em,
#contents.bousai img,
#contents.bousai ins,
#contents.bousai kbd,
#contents.bousai q,
#contents.bousai samp,
#contents.bousai small,
#contents.bousai strong,
#contents.bousai sub,
#contents.bousai sup,
#contents.bousai var,
#contents.bousai b,
#contents.bousai i,
#contents.bousai dl,
#contents.bousai dt,
#contents.bousai dd,
#contents.bousai ol,
#contents.bousai ul,
#contents.bousai li,
#contents.bousai fieldset,
#contents.bousai form,
#contents.bousai label,
#contents.bousai legend,
#contents.bousai table,
#contents.bousai caption,
#contents.bousai tbody,
#contents.bousai tfoot,
#contents.bousai thead,
#contents.bousai tr,
#contents.bousai th,
#contents.bousai td,
#contents.bousai article,
#contents.bousai aside,
#contents.bousai canvas,
#contents.bousai details,
#contents.bousai figcaption,
#contents.bousai figure, 
#contents.bousai footer,
#contents.bousai header,
#contents.bousai hgroup,
#contents.bousai menu,
#contents.bousai nav,
#contents.bousai section,
#contents.bousai summary,
#contents.bousai time,
#contents.bousai mark,
#contents.bousai audio,
#contents.bousai video{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}


#suntoryCommonWrapper,
#suntory_contents,
#contents{ height: 100%; background-color: #ffd500;}
#contents.bousai{ width: 100%; overflow: hidden; background-color: #ffd500; background-image: url(../images/title-obi.png), url(../images/bg.jpg); background-position: center bottom, center top; background-size: 63px, cover; background-repeat: repeat-x, repeat;}


#contents.bousai a{ margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; outline: none; color: #000;}
#contents.bousai a > img:hover,
#contents.bousai a span > img:hover{ -webkit-transform-origin: top center; transform-origin: top center; animation: swing-a 1s;}
@-webkit-keyframes swing-a {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing-a {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}


#contents.bousai .title{ display: block; width: 100%; padding-top: 66px; position: relative;}
#contents.bousai .title .left{ width: 24%; height: 100px; background-image: url(../images/title-obi.png); position: absolute; margin: auto auto; top: -40px; left: 0; bottom: 0;}
#contents.bousai .title .right{ width: 24%; height: 100px; background-image: url(../images/title-obi.png); position: absolute; margin: auto auto; top: -40px; right: 0; bottom: 0;}
#contents.bousai .title h1{ max-width: 800px; margin: auto auto; position: relative; z-index: 1;}

#contents.bousai #bg{ width: 100%; height: 100%; position: relative;}
#contents.bousai #bg .left{ width: 8%; max-width: 145px; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; margin-top: -100px; margin-left: 20px; background-image: url(../images/left.png); background-size: 100%; background-position: center top; z-index: 1;}
#contents.bousai #bg .right{ width: 8%; max-width: 145px; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; margin-top: -100px; margin-right: 20px; background-image: url(../images/right.png); background-size: 100%; background-position: center top; z-index: 1;}
#contents.bousai #bg .center{ width: calc(84% - 40px); top: 0; left: 0; right: 0; margin: auto auto;}

#contents.bousai #bg .center #con-01{ display: block; width: 100%; max-width: 1250px; margin: auto auto; overflow: hidden; text-align: center;}
#contents.bousai #bg .center #con-02{ display: block; width: 100%; max-width: 980px; margin: 40px auto auto; text-align: center;}
#contents.bousai #bg .center #con-02 a{ display: block; margin-top: 20px;}
#contents.bousai #bg .center #con-03{ display: block; width: 100%; max-width: 980px; margin: 40px auto auto; text-align: center;}
#contents.bousai #bg .center #con-03 span{ display: block;}
#contents.bousai #bg .center #con-04{ display: block; width: 100%; max-width: 1150px; height: auto; margin: 80px auto auto; padding: 80px; box-sizing: border-box; text-align: center; background-image: url(../images/bb-01.png) ,url(../images/bb-03.png), url(../images/bb-02.png); background-position: center top, center bottom, center center; background-repeat: no-repeat, no-repeat, repeat; background-size: 100%, 100%, 100%;}
#contents.bousai #bg .center #con-04 #second{ margin: 100px 0;}
#contents.bousai #bg .center #con-05{ display: block; width: 100%; max-width: 1120px; margin: 160px auto auto; text-align: center;}
#contents.bousai #bg .center #con-06{ display: block; width: 100%; max-width: 394px; margin: 160px auto auto; text-align: center;}
  #contents.bousai #bg .center #con-06{ padding-bottom: 80px;}
  #contents.bousai #bg .center #con-06{ position: relative; z-index: 1;}
#contents.bousai #bg .center #con-06 a span{ display: block;}

#contents.bousai #bg #con-07{ display: block; width: 100%; max-width: 100%; margin: 300px auto auto; padding: 120px 100px 100px; box-sizing: border-box; text-align: center; background-image: url(../images/con-07-bg.jpg); position: relative; z-index: 0;}
#contents.bousai #bg #con-07 img#t{ max-width: 779px; margin: auto; position: absolute; top: -200px; left: 0; right: 0;}
#contents.bousai #bg #con-07 a{ display: block; width: 100%; max-width: 934px; margin: auto auto;}
#contents.bousai #bg #con-07 a span{ display: block;}
#contents.bousai #bg .center #con-08{ display: block; width: 100%; max-width: 1380px; margin: auto auto; padding: 200px 0 0; overflow: hidden; text-align: center; vertical-align: bottom;}
#contents.bousai #bg .center #con-08 img{ vertical-align: bottom;}
#contents.bousai #bg .bnr-box{ position: fixed; bottom: 5px; right: 5px; cursor: pointer; z-index: 10; }
#contents.bousai #bg .bnr-box a{ max-width: 340px; min-width: 240px; display: block; float: right;}

.tag{ max-width: 394px; width: 100%;}
.tag img{ width: 100%;}


.modaal-container{ width: 100%; max-width: 440px; padding: 0;}
.modaal-container .modaal-content-container{ padding: 0;}
.modaal-container #shop-title{ background-color: #5ac2db; padding: 20px; box-sizing: border-box;}
.modaal-container #shop-links{ padding: 20px 30px; box-sizing: border-box;}
.modaal-container #shop-links a{ display: block;}
.modaal-container #shop-links a:hover{ opacity: .6;}
.modaal-container #shop-links a:nth-child(2){ margin-top: 10px;}

#suntorySubCommonFooter,
#suntoryCommonFooter{ z-index: 11 !important; position: relative !important;}