/*===========================================================================
   サッポロ ドラフトワン CSS
===========================================================================*/

.pc-mode .sp-menu {
    display: none!important;
}

.scroll-lock {
    overflow: hidden;
}
.scroll-lock main {
    position: relative;
    width: 100%;
    overflow: hidden;
}

body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_return-top a {
  z-index: 10;
}
/*コンテンツカラム*/
.inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-width: 1000px;
    height: 100%;
    margin: 0 auto;
}
main {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
}
#contentsWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    top: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
}
#contentsWrapper img {
    width: 100%;
}

#sapporo-topicpath-area {
    position: relative;
    z-index: 10;
}


/*スクロールアクションオブジェ*/

/*基本*/
.scroll-action-obj,
.scroll-action-obj-bottom,
.scroll-action-obj-top {
    transition: transform 2s ease, opacity 2s ease;
    transform: translateY(10vw);
    opacity: 0;
}
.scroll-action-obj.is-show,
.scroll-action-obj-bottom.is-show,
.scroll-action-obj-top.is-show  {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scroll-action-new {
    opacity: 0;
    transition: opacity .3s ease;
}
.scroll-action-new.is-show {
    opacity: 1;
}



/*======================================
    TOP
======================================*/

#contentsWrapper {
  width: 100vw;
  overflow: hidden;
  margin: 0;
}
/*
  背景ブロック
--------------------*/
#bgWrap {
  width: 100%;
  height: 221.987179vw;
  position: relative;
  width: 100%;
  z-index: 1
}
#beerBg {
  position: relative;
  width: 100%;
  background-color: #f0e438;
  z-index: 1;
}
#beerBg img {
  z-index: 1;
}



#contentWrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
}
#contentWrap img {
  width: 100%;
}
#contentArea {
  position: relative;
  width: 100%;
  height: 100%;
}
#contentArea .item {
  position: absolute;
}

/*#contentA*/
#contentA .item-1 {
  width: 38.0128205%;
  left: 23.525641%;
  top: -9.6153846vw;
}
#contentA .item-2 {
  width: 41.1538462%;
  left: 15.3205128%;
  top: 18.974359vw;
}
#contentA .item-3 {
  width: 25%;
  left: 58.2051282%;
  top: 2.30769231vw;
}
#contentA .item-4 {
  width: 1.85897436%;
  left: 84.1025641%;
  top: 32.0512821vw;
}

/*#contentB*/
#contentB .item-1 {
  width: 47.9487179%;
  left: 37.4358974%;
  top: 53.2051282vw
}
#contentB .item-2 {
  width: 58.9102564%;
  left: 14.4871795%;
  top: 108.205128vw;
}

#contentB .item-3 {
  width: 100%;
  top: 78.8461538vw;
}

#draftOneListPc {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 10;
}
#draftOneListPc li {
    position: relative;
    display: inline-block;
    width: 9.8717949%;
    transition: transform .2s ease,margin .2s ease;
    z-index: 1;
    cursor: pointer;
}
#draftOneListPc li:not(:first-child) {
    margin: 0 1.28205128%;
}
#draftOneListPc li figcaption {
    display: inline-block;
    margin-top: .5974359vw;
}
#draftOneListPc li.main-target {
    transform: scale(1.48);
    margin: 0 1.6%!important;
    z-index: 7;
}
#draftOneListPc li.sub-target {
    transform: scale(1.13);
}

/*#contentC*/
#contentC .item-1 {
  width: 53.974359%;
  left: 30.8333333%;
  top: 110.576923vw;
  z-index: 3;
}
#contentC .item-2 {
  width: 87.9487179%;
  left: 12.0512821%;
  top: 116.025641vw;
}
#contentC .item-2 img {
  position: absolute;
  top: 0;
  left: 0;
}
#contentC .item-2 .img-1 {
  position: relative;
}
#contentC .item-3 {
  width: 66.6025641%;
  left: 16.3461538%;
  top: 211.448718vw;
}

/*コンテンツC アニメ用*/
#contentC .item-2 .img-1 {
    transform: translateX(-10%);
    opacity: 0;
    transition: transform .3s cubic-bezier(0.710, 0.005, 0.285, 1.570), opacity .4s ease;
}
#contentC .item-2 .img-2 {
    transform: translateX(10%);
    opacity: 0;
    transition: transform .3s cubic-bezier(0.710, 0.005, 0.285, 1.570), opacity .4s ease;
}
#contentC .item-2 .img-3 {
    transform: translateX(-10%);
    opacity: 0;
    transition: transform .3s cubic-bezier(0.710, 0.005, 0.285, 1.570), opacity .4s ease;
}
#contentC .item-2 .img-1.is-show,
#contentC .item-2 .img-2.is-show,
#contentC .item-2 .img-3.is-show {
    transform: translateX(0);
    opacity: 1;
}

#contentC .item-1 {
    transform: translate(30%, -30%);
    opacity: 0;
    transition: transform .3s cubic-bezier(0.710, 0.005, 0.575, 1.250), opacity .3s ease;
}
#contentC .item-1.is-show {
    transform: translate( 0,0);
    opacity: 1;
}


/*アニメーション用*/
#beerBg .bg-layer-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#beerBg .bg-layer-wrap .bg-layer-box {
  position: relative;
  width: 100%;
  height: 100%;
}
#beerBg .bglayer {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
}
#beerBg .bglayer.layer-0 {
  display: block;
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0px;
  left: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f3e6+0,f5f3e6+13,f5f3e6+100&1+0,1+13,0+100 */
  background: -moz-linear-gradient(top,  rgba(245,243,230,1) 0%, rgba(245,243,230,1) 13%, rgba(245,243,230,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(245,243,230,1) 0%,rgba(245,243,230,1) 13%,rgba(245,243,230,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(245,243,230,1) 0%,rgba(245,243,230,1) 13%,rgba(245,243,230,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f3e6', endColorstr='#00f5f3e6',GradientType=0 ); /* IE6-9 */

  z-index: 5;
  opacity: 1;
  transition: transform 3s ease, opacity 3s ease;
}
#beerBg .bglayer.layer-1{background: url(/draftone/asset/img/top/beer_bg_a.png) repeat; background-size: 30%}
#beerBg .bglayer.layer-2{background: url(/draftone/asset/img/top/beer_bg_b.png) repeat; background-size: 40%}
#beerBg .bglayer.layer-3{background: url(/draftone/asset/img/top/beer_bg_c.png) repeat; background-size: 50%}

#blueGradBg {
  position: absolute;
  width: 100%;
  top: 13.974359vw;
  z-index: 2;
  /*
  background: rgb(0,140,206);
  background: -moz-linear-gradient(34.5deg,  rgba(0,140,206,1) 12%, rgba(11,48,142,1) 49%, rgba(11,48,142,1) 51%, rgba(16,139,206,1) 88%);
  background: -webkit-linear-gradient(34.5deg,  rgba(0,140,206,1) 12%,rgba(11,48,142,1) 49%,rgba(11,48,142,1) 51%,rgba(16,139,206,1) 88%);
  background: linear-gradient(34.5deg,  rgba(0,140,206,1) 12%,rgba(11,48,142,1) 49%,rgba(11,48,142,1) 51%,rgba(16,139,206,1) 88%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008cce', endColorstr='#108bce',GradientType=1 );
  transform: rotateZ(-34.5deg);
  */
}
#beerBg img {
  transform: translateY(10vw);
  opacity: 0;
  transition: transform 3s ease, opacity 3s ease;
}
#beerBg img.is-show {
  transform: translateY(0);
  opacity: 1;
}
#beerBg .bglayer.layer-0.is-show {
  opacity: 0;
}


#contentA .item-1 {
  transform: translate(30%,-30%);
  opacity: 0;
  transition: transform .45s cubic-bezier(0.710, 0.005, 0.575, 1.250), opacity .45s ease;
}
#contentA .item-1.is-show {
  transform: translate(0,0);
  opacity: 1;
}
#contentA .item-2 {
  transform: translate(30%,0);
  opacity: 0;
  z-index: 2;
  transition: transform 1.2s ease, opacity 1.2s ease;
}
#contentA .item-2.is-show {
  transform: translate(0,0);
  opacity: 1;
}
#contentA .item-3,#contentA .item-4 {
  transform: translateY(5vw);
  opacity: 0;
  z-index: 3;
  transition: transform 1.2s ease, opacity 1.2s ease;
}
#contentA .item-3.is-show,#contentA .item-4.is-show {
  transform: translateY(0);
  opacity: 1;
}





/*-----------------------------
    1200px以下
-----------------------------*/
@media screen and (max-width: 1200px) {
    .inner {
        max-width: 1200px;
        /*width: 100%;*/
    }

    /*
        コンテンツ
    --------------------*/





}

/*-----------------------------
    768px以下(for SP)
-----------------------------*/
@media screen and (max-width: 768px) {
    .inner {
        max-width: 100%;
        min-width: 100%;
        width: 100%;
    }
    #sapporo-navigation-area {
        width: 100%;
        min-width: 100%;
    }
    #sapporo-topicpath-area div.topicpath {
        width: 100%;
        padding-left: 1em;
    }
    #sapporo-topicpath-area {
        min-width: 100%;
        overflow: hidden;
    }

    #contentsWrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        top: 0;
        right: 0;
        z-index: 1;
        overflow: hidden;
    }

    .inner {
        overflow: visible;
    }


    /*======================================
        TOP
    ======================================*/

    /*
      背景ブロック
    --------------------*/
    #bgWrap {
      height: 341.40625vw;
    }
    #blueGradBg {
      top: 58.3333333vw;
    }

    /*
        コンテンツ
    --------------------*/

    /*#contentA*/
    #contentA .item-1 {
      width: 53.4739583%;
      left: 1.953125%;
      top: -13.0208333vw;
    }
    #contentA .item-2 {
      width: 56.7708333%;
      left: 23.3072917%;
      top: 17.4479167vw;
    }
    #contentA .item-3 {
      width: 30.9895833%;
      left: 34.2447917%;
      top: 55.078125vw;
    }
    #contentA .item-4 {
      width: 3.77604167%;
      left: 67.3177083%;
      top: 84.6354167vw;
    }


    /*#contentB*/
    #contentB .item-1 {
      width: 80.46875%;
      left: 11.4583333%;
      top: 118.098958vw
    }
    #contentB .item-2 {
      width: 76.953125%;
      left: 11.0677083%;
      top: 188.541667vw;
    }
    .win #contentB .item-2 {
      top: 183.984375vw;
    }

    #contentB .item-3 {
      width: 74%;
      left: 50%;
      margin-left: -37%;
      top: 144.628571vw;
      overflow-x: hidden;
      overflow-y: hidden;
      padding: 1.5vw 0;
    }
    #draftOneListSp .slick-list {
        overflow: visible;
    }
    #draftOneListSp li {
        overflow: visible;
    }
    #draftOneListSp li {
        display: block;
        width: 100%;
        margin: 0!important;
        transform: scale(.6);
        transition: transform .2s ease;
    }
    #draftOneListSp li.slick-active {
        transform: scale(.85);
    }
    #draftOneListSp li.slick-current {
        transform: scale(1.1);
    }
    #draftOneListSp li.slick-current.slick-active figure {
        transform: translateX(0);
    }
    #draftOneListSp li.slick-active figure {
        transform: translateX(-8%);
    }
    #draftOneListSp li.slick-current+.slick-active figure {
        transform: translateX(8%);
    }
    #draftOneListSp li figcaption {
        display: inline-block;
        margin-top: .5974359vw;
    }

    /*#contentC*/
    #contentC .item-1 {
      width: 68.359375%;
      left: 27.6041667%;
      top: 200.651042vw;
    }
    #contentC .item-2 {
      width: 103%;
      left: 8.203125%;
      top: 207.03125vw;
    }
    #contentC .item-3 {
      width: 77.4739583%;
      left: 11.0677083%;
      top: 320.3125vw;
    }


}

/*-----------------------------
	580px以下(for SP)
-----------------------------*/
@media screen and (max-width: 580px) {

}

/*-----------------------------
	580px以下(for SP) & 横向き
-----------------------------*/
@media screen and (orientation: landscape) and (max-width: 580px) {

}
/*-----------------------------
	360px以下(for SP)
-----------------------------*/
@media screen and (max-width: 360px) {

}