/***************************************
  min-width:769 PCレイアウト
  max-width:768 SPレイアウト
***************************************/
body {
  font-size: 1.3rem;
}

#str-main img {
  width: 100%;
  height: auto;
  background-image: none;
  backface-visibility: hidden;

}

#str-main {
  margin-bottom: 7.8%;
  overflow: hidden;
}

#str-main figure {
  margin: 0;
}

#str-main .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

@media screen and (min-width: 769px) {
  #str-main #subNav img {
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  #str-main {
    margin-bottom: 15.62%;
  }
}


/***************************
fade animation
***************************/
#str-main .fadeItem,
#str-main .fade_right,
#str-main .fade_left,
#str-main .fade_top,
#str-main .fade_bottom {
  opacity: 0;
  transition: opacity .5s ease 0s, transform .5s ease 0s;
}

#str-main .fade_left {
  transform: translateX(-20px);
}

#str-main .fade_right {
  transform: translateX(20px);
}

#str-main .fade_top {
  transform: translateY(-20px);
}

#str-main .fade_bottom {
  transform: translateY(20px);
}

/* fadeLag */
#str-main .fadeLag_0_5s {
  transition: opacity .5s ease .5s, transform .5s ease .5s;
}

#str-main .fadeLag_1s {
  transition: opacity .5s ease 1s, transform .5s ease 1s;
}

#str-main .fadeLag_1_5s {
  transition: opacity .5s ease 1.5s, transform .5s ease 1.5s;
}

#str-main .fadeLag_2s {
  transition: opacity .5s ease 2s, transform .5s ease 2s;
}

#str-main .fadeLag_2_5s {
  transition: opacity .5s ease 2.5s, transform .5s ease 2.5s;
}

#str-main .fadeLag_3s {
  transition: opacity .5s ease 3s, transform .5s ease 3s;
}

/* fadeAct */
#str-main .fadeItem.fadeAct,
#str-main .fadeInit.fadeAct,
#str-main .fade_left.fadeAct,
#str-main .fade_right.fadeAct,
#str-main .fade_top.fadeAct,
#str-main .fade_bottom.fadeAct {
  opacity: 1;
}

#str-main .fade_left.fadeAct,
#str-main .fade_right.fadeAct {
  transform: translateX(0);
}

#str-main .fade_top.fadeAct,
#str-main .fade_bottom.fadeAct {
  transform: translateY(0);
}


/***************************
frame
***************************/
section .inner {
  margin: 0 auto;
  max-width: 960px;
  width: 96.87%;
}

@media screen and (max-width: 768px) {
  section {
    overflow: hidden;
  }

  section .inner {
    margin: 0 auto;
    width: 100%;
  }
}


/***************************
mainVisual
***************************/
#mainVisual {
  position: relative;
  z-index: 0;
}

@media screen and (min-width: 769px) {

  /* visualWrap */
  #mainVisual .visualWrap {
    /*background: #B99038 no-repeat center center;*/
    /*background-size: cover;*/
    position: relative;
    background: url(../images/kv_logo_bg.png), url(../images/is_bg.jpg) !important;
    background-size: 956px auto, cover !important;
    background-position: top -32px left calc(50% + 36px), center !important;
    background-repeat: no-repeat, no-repeat !important;
    /*max-height:580px;*/
  }

  #mainVisual .visualWrap .inner {
    position: relative;
  }

  #mainVisual .visualWrap .logo {
    width: 87.5%;
    margin: 0 auto;
    padding: 96px 0 6px;
  }

  #mainVisual.fadeTrigger .visualWrap .beer {
    width: 87.5%;
    margin: 0 auto;
    transition: opacity 1s ease 1.5s;
    opacity: 0;
  }

  #mainVisual.fadeTrigger.fadeAct .visualWrap .beer {
    opacity: 1;
  }

  /*  #mainVisual .visualWrap .logo {
    position: relative;
    width: 38%;
    left: 58%;
    top: 0;
    padding-top: 18.95%;
    padding-bottom: 6%;
    z-index: 100;
  }
  #mainVisual .visualWrap .logo::before {
    content: "";
    display: block;
    background: url(../images/mainvisual_01_limited.png) no-repeat center center;
    position: absolute;
    width: 33.75%;
    padding-top: 33.75%;
    background-size: 100% 100%;
    top: 6.15%;
    left: 30.886%;
    z-index: 1;
  }*/
  #mainVisual .visualWrap .release {
    position: absolute;
    top: 31%;
    width: 100%;
  }

  #mainVisual .visualWrap .text {
    position: absolute;
    right: 0.2%;
    top: 5%;
    width: 100%;
    z-index: 1;
  }

  #mainVisual .visualWrap .face {
    padding-top: 21.95%;
    margin-left: -5.730%;
    padding-bottom: 1.043%;
    width: 63.75%;
  }

  #mainVisual .visualWrap .hop {
    position: absolute;
    width: 166.667%;
    top: 0;
    left: -33.4%;
  }

  /* textBoxWrap */
  #mainVisual .textBoxWrap {
    background: -moz-linear-gradient(left, #6fba2c 0%, #81c744 50%, #6fba2c 100%);
    background: -webkit-linear-gradient(left, #6fba2c 0%, #81c744 50%, #6fba2c 100%);
    background: linear-gradient(to right, #6fba2c 0%, #81c744 50%, #6fba2c 100%);
    position: relative;
    /*margin-top: -2%;*/
  }

  #mainVisual .textBoxWrap .inner {
    position: relative;
  }

  /*#mainVisual .textBoxWrap .beer {
    position: absolute;
    width: 54.459%;
    left: 1.3%;
    top: -119.35%;
  }*/
  #mainVisual.fadeTrigger .textBoxWrap .beer {
    transition: opacity 1s ease 2.5s;
    opacity: 0;
  }

  #mainVisual.fadeTrigger.fadeAct .textBoxWrap .beer {
    opacity: 1;
  }

  #mainVisual .textBoxWrap .textBox {
    padding: 4.16666666666667% 0 4.16666666666667% 0;
  }

  #mainVisual .textBoxWrap .text01 {
    width: 62.08333333333333%;
    margin: 0 auto;
  }

  #mainVisual .textBoxWrap .text02 {
    width: 95.625%;
    margin: 2.917% auto 0;
  }

  #mainVisual .textBoxWrap .hop {
    position: absolute;
    width: 166.667%;
    top: 0;
    left: -33.4%;
  }
}

@media screen and (max-width: 768px) {

  /* visualWrap */
  #mainVisual .visualWrap {
    /*ackground: #B99038 no-repeat center center;
    background-size: cover;*/
    background: url(../images/kv_logo_bg.png), url(../images/is_bg.jpg) !important;
    background-size: 130% auto, cover !important;
    background-position: top -20% left calc(50% - 2px), center !important;
    background-repeat: no-repeat, no-repeat !important;
    position: relative;
  }

  #mainVisual .visualWrap .inner {
    position: relative;
  }

  /*#mainVisual .visualWrap .logo {
    position: relative;
    width: 50.204%;
    left: 24.004%;
    top: 0;
    padding-bottom: 46%;
    padding-top: 5%;
    margin: 0;
  }*/
  #mainVisual .visualWrap .logo {
    width: 90%;
    margin: 0 auto;
    padding: 12% 0 0;
  }

  #mainVisual.fadeTrigger .visualWrap .beer {
    width: 100%;
    transition: opacity 1s ease 1.5s;
    opacity: 0;
  }

  #mainVisual.fadeTrigger.fadeAct .visualWrap .beer {
    opacity: 1;
  }

  /*  #mainVisual .visualWrap .logo::before {
    content: "";
    display: block;
    background: url(../images/mainvisual_01_limited.png) no-repeat center center;
    position: absolute;
    width: 33.753%;
    padding-top: 33.753%;
    background-size: 100% 100%;
    top: 3.06%;
    left: -39.201%;
    z-index: 1;
  }*/
  #mainVisual .visualWrap .release {
    position: absolute;
    top: 31.095%;
    width: 102.73%;
  }

  #mainVisual .visualWrap .text {
    position: absolute;
    right: 5.297%;
    top: 45.784%;
    width: 13.00%;
  }

  #mainVisual .visualWrap .face {
    padding-top: 38.043%;
    padding-bottom: 0.964%;
    width: 38.524%;
  }

  #mainVisual .visualWrap .hop {
    position: absolute;
    width: 102.73%;
    top: 0;
    left: 0;
  }

  /* textBoxWrap */
  #mainVisual .textBoxWrap {
    background: -moz-linear-gradient(left, #6fba2c 0%, #81c744 50%, #6fba2c 100%);
    background: -webkit-linear-gradient(left, #6fba2c 0%, #81c744 50%, #6fba2c 100%);
    background: linear-gradient(to right, #6fba2c 0%, #81c744 50%, #6fba2c 100%);
    position: relative;
    /*margin-top: -2%;*/
  }

  #mainVisual .textBoxWrap .inner {
    position: relative;
  }

  /*  #mainVisual .textBoxWrap .beer {
    position: absolute;
    width: 70.723%;
    left: 5.19%;
    top: -84.71%;
  }*/

  /*#mainVisual .visualWrap .beer {
    position: absolute;
    width: 77.723%;
    left: 2.19%;
    bottom: 1.8%;
  }*/
  #mainVisual.fadeTrigger .textBoxWrap .beer {
    transition: opacity 1s ease 2.5s;
    opacity: 0;
  }

  #mainVisual.fadeTrigger.fadeAct .textBoxWrap .beer {
    opacity: 1;
  }

  #mainVisual .textBoxWrap .textBox {
    padding: 6.666667vw 0 6.666667vw;
    transition: opacity 1s ease 3s;
  }

  #mainVisual.fadeTrigger.fadeAct .textBoxWrap .textBox {
    opacity: 1;
  }

  #mainVisual .textBoxWrap .text01 {
    width: 89.86666666666667vw;
    margin: 0 auto;
  }

  #mainVisual .textBoxWrap .text02 {
    width: 87.03%;
    margin: 4.013% auto 0;
  }

  #mainVisual .textBoxWrap .hop {
    position: absolute;
    width: 166.667%;
    top: 0;
    left: -33.4%;
  }
}


/* MV */

/* h1 */
.mv .mv__img {
  margin: 0;
}

/***************************
sec01
***************************/
#sec01 {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  #sec01 .sec01_pb {
    padding-bottom: 11.45833333333333%;
    position: relative;
  }

  #sec01 .sec01Wrap .title {
    width: 49.6875%;
    margin: 0 auto;
    padding: 11.45833333333333% 0 6.25%;
  }

  #sec01 .sec01Wrap .processWrap {
    background-color: #ffffff;
    padding: 5% 6.1458333333332% 5%;
    position: relative;
  }

  #sec01 .hop {
    position: absolute;
    top: 7%;
    left: 7.3%;
    width: 85.938%;
  }

  #sec01 .sec01Wrap .subTitle {
    width: 66.984%;
    margin: 0 auto;
  }

  #sec01 .sec01Wrap .textBox {
    padding-bottom: 5.107%;
  }

  #sec01 .sec01Wrap .text01 {
    width: 59.144893111638955%;
    margin: 4.751% auto 0;
  }

  #sec01 .sec01Wrap .text02 {
    width: 61.282660332541568%;
    margin: 3.326% auto 0;
  }

  #sec01 .processTitle {}

  #sec01 .process {
    font-size: 0;
    display: flex;
    padding-top: 2.257%;
  }

  #sec01 .process-content {
    font-size: 1rem;
    display: inline-block;
    position: relative;
    vertical-align: top;
    box-sizing: content-box;
  }

  #sec01 .process-content+.process-content::before {
    content: "";
    display: block;
    background: url(../images/sec01_process_tri.png) no-repeat left top;
    background-size: 100% auto;
    width: 7.84%;
    padding-top: 13%;
    position: absolute;
    left: -15px;
    top: 28%;
  }

  #sec01 .processListWrap.fadeTrigger .process-content {
    opacity: 0;
    transition: opacity 0.5s ease 0s;
  }

  #sec01 .process-content:nth-child(1) {
    width: 26.30952380952381%;
  }

  #sec01 .process-content:nth-child(2) {
    width: 27.61904761904762%;
  }

  #sec01 .process-content:nth-child(3) {
    width: 24.76190476190476%;
  }

  #sec01 .process-content:nth-child(4) {
    width: 21.30952380952381%;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(1) {
    transition: opacity 0.5s ease 0.5s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(2) {
    transition: opacity 0.5s ease 0.75s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(3) {
    transition: opacity 0.5s ease 1s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(4) {
    transition: opacity 0.5s ease 1.25s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  #sec01 .sec01_pb {
    padding-bottom: 13.33333333333333vw;
    position: relative;
  }

  #sec01 .sec01Wrap .title {
    width: 59.2%;
    margin: 0 auto;
    padding: 13.33333333333333vw 0 8vw;
  }

  #sec01 .sec01Wrap .processWrap {
    background-color: #ffffff;
    padding: 8vw 2.66666666666667% 8vw;
    position: relative;
    margin: 0 3.33333333333333%;
  }

  #sec01 .hop {
    position: absolute;
    top: 1.785%;
    left: 2%;
    width: 95.1978%;
  }

  #sec01 .sec01Wrap .subTitle {
    width: 77.061%;
    margin: 0 auto;
    left: -2.151%;
    position: relative;
  }

  #sec01 .sec01Wrap .textBox {
    padding-bottom: 5.107%;
  }

  #sec01 .sec01Wrap .text01 {
    width: 76%;
    margin: 7.527% auto 0;
  }

  #sec01 .sec01Wrap .text02 {
    width: 93.3%;
    margin: 6.631% auto 0;
  }

  #sec01 .processTitle {
    margin-top: 3.764%;
  }

  #sec01 .process {
    padding-top: 5.198%;
  }

  #sec01 .process-content {
    position: relative;
    width: 100%;
  }

  #sec01 .process-content+.process-content {
    padding-top: 5.33333333333333vw;
  }

  #sec01 .process-content+.process-content::before {
    content: "";
    display: block;
    background: url(../images/sec01_process_tri_sp.png) no-repeat left top;
    background-size: 100% auto;
    width: 5.055%;
    padding-top: 3.07%;
    position: absolute;
    left: 19.2%;
    top: 2vw;
  }

  #sec01 .processListWrap.fadeTrigger .process-content {
    opacity: 0;
    transition: opacity 0.5s ease 0s;

  }

  #sec01 .process-content:nth-child(4) {
    padding-top: 8vw;
  }

  #sec01 .process-content:nth-child(4)::before {
    top: 2.66666666666667vw;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(1) {
    transition: opacity 0.5s ease 0.5s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(2) {
    transition: opacity 0.5s ease 0.75s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(3) {
    transition: opacity 0.5s ease 1s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content:nth-child(4) {
    transition: opacity 0.5s ease 1.25s;
  }

  #sec01 .processListWrap.fadeTrigger.fadeAct .process-content {
    opacity: 1;
  }
}



/***************************
sec02
***************************/
#sec02 {
  position: relative;
  z-index: 1;
}

#sec02 .sec02Wrap {
  background-color: #8ed154;
}

#sec02 .sec02Wrap .inner {
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 769px) {
  #sec02 .sec02_pb {
    padding-bottom: 11.45833333333333%;
    position: relative;
  }

  #sec02 .sec02Wrap .title {
    width: 64.89583333333333%;
    margin: 0 auto;
    padding: 11.45833333333333% 0 6.25%;
  }

  #sec02 .sec02Wrap .methodWrap {
    background-color: #ffffff;
    padding: 5% 6.146% 4.063%;
    position: relative;
    font-size: 0;
  }

  #sec02 .sec02Wrap .textBox {
    font-size: 1rem;
    display: inline-block;
    vertical-align: top;
    width: 44.182%;
    padding-bottom: 2.495%;
  }

  #sec02 .sec02Wrap .text01 {
    width: 87.90322580645161%;
    margin-top: 3.23%;
  }

  #sec02 .sec02Wrap .text02 {
    width: 100%;
    margin-top: 6.183%;
  }

  #sec02 .sec02Wrap .text03 {
    width: 91.4%;
    margin-top: 6.183%;
  }

  #sec02 .methodListWrap {
    font-size: 1rem;
    display: inline-block;
    vertical-align: top;
    width: 55.42%;
  }

  #sec02 .method {
    font-size: 0;
    display: block;
    padding-top: 2.257%;
  }

  #sec02 .method-content {
    font-size: 1rem;
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: 4.715%;
  }

  #sec02 .method-content:nth-child(1) {
    width: 56.577%;
  }

  #sec02 .method-content:nth-child(2) {
    width: 33.432%;
  }

  #sec02 .fadeTrigger .method-content {
    opacity: 0;
    transition: opacity 0.5s ease 0s;
  }

  #sec02 .fadeTrigger.fadeAct .method-content:nth-child(1) {
    transition: opacity 0.5s ease 0.5s;
  }

  #sec02 .fadeTrigger.fadeAct .method-content:nth-child(2) {
    transition: opacity 0.5s ease 1s;
  }

  #sec02 .fadeTrigger.fadeAct .method-content {
    opacity: 1;
  }

}

@media screen and (max-width: 768px) {
  #sec02 .sec02_pb {
    padding-bottom: 13.33333333333333vw;
    position: relative;
  }

  #sec02 .sec02Wrap .title {
    width: 80.8vw;
    margin: 0 auto;
    padding: 13.33333333333333vw 0 8vw;
  }

  #sec02 .sec02Wrap .methodWrap {
    background-color: #ffffff;
    padding: 8.026% 2.008% 7.705%;
    position: relative;
    margin: 0 3.211%;
  }

  #sec02 .sec02Wrap .textBox {}

  #sec02 .sec02Wrap .text01 {
    width: 84vw;
    margin: 0 0 0 4.482%;
  }

  #sec02 .sec02Wrap .text02 {
    width: 90.861%;
    margin: 5.02% 0 0 4.482%;
  }

  #sec02 .sec02Wrap .text03 {
    width: 85.484%;
    margin: 5.02% 0 0 4.482%;
  }

  #sec02 .methodListWrap {
    margin: 5.02% auto 0;
  }

  #sec02 .method {
    font-size: 0;
    display: block;
    padding-top: 2.257%;
  }

  #sec02 .method-content {
    font-size: 1rem;
    display: inline-block;
    position: relative;
    vertical-align: top;

  }

  #sec02 .method-content:nth-child(1) {
    width: 60.574%;
    margin-left: 0.897%;
  }

  #sec02 .method-content:nth-child(2) {
    width: 34.768%;
    margin-left: 2.87%;
  }

  #sec02 .fadeTrigger .method-content {
    opacity: 0;
    transition: opacity 0.5s ease 0s;
  }

  #sec02 .fadeTrigger.fadeAct .method-content:nth-child(1) {
    transition: opacity 1s ease 0.5s;
  }

  #sec02 .fadeTrigger.fadeAct .method-content:nth-child(2) {
    transition: opacity 1s ease 0.5s;
  }

  #sec02 .fadeTrigger.fadeAct .method-content {
    opacity: 1;
  }
}



/***************************
sec03
***************************/

@media screen and (min-width: 769px) {
  #sec03 .sec03_pb {
    padding-top: 11.45833333333333%;
    padding-bottom: 11.45833333333333%;
    position: relative;
    display: flex;
  }

  #sec03 .hop {
    position: absolute;
    width: 166.667%;
    top: 1%;
    left: -33.4%;
  }

  #sec03 .textBox {
    max-width: 468px;
    width: 48.75%;
  }

  #sec03 .title {
    width: 93.37606837606838%;
    box-sizing: content-box;
    margin-bottom: 8.547008547008547%;
  }

  #sec03 .text {
    width: 81.837606837606838%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12.820512820512821%;
  }

  #sec03 .historyWrap {
    max-width: 492px;
    width: 51.25%;
  }

  #sec03 .history_new {
    font-size: 1rem;
    vertical-align: top;
    width: 51.068376068376068%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
  }

  #sec03 .history {
    display: flex;
    justify-content: center;
    position: relative;
    vertical-align: top;
    margin-bottom: 3.658536585365854%;
  }

  #sec03 .historylistbox05 {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  #sec03 .history-content {
    width: 16.869918699186992%;
  }

  #sec03 .history-content:nth-child(1) {
    width: 16.463414634146341%;
  }

  #sec03 .history-content:nth-child(2) {
    width: 16.463414634146341%;
  }

  #sec03 .history-content:nth-child(3) {
    width: 16.463414634146341%;
  }

  #sec03 .history-content:nth-child(4) {
    width: 16.260162601626016%;
  }

  #sec03 .history-content:nth-child(5) {
    width: 16.733870967741935%;
  }

  #sec03 .history-content img {
    width: auto;
    height: 100%;
  }

  #sec03 .history-content:not(:last-child) {
    margin-right: 4.065040650406504%;
  }

  #sec03 .fadeTrigger .history_new {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .5s ease 0s, transform .1s ease .5s;
    /* padding-left: 100px */
  }

  #sec03 .fadeTrigger.fadeAct .history_new {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .5s ease 1.8s, transform .5s ease 1.8s;
    /* padding-left: 100px */
  }

  #sec03 .fadeTrigger .history-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease 0s, transform .1s ease .5s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(1) {
    transition: opacity .5s ease .1s, transform .5s ease .1s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(2) {
    transition: opacity .5s ease .2s, transform .5s ease .2s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(3) {
    transition: opacity .5s ease .3s, transform .5s ease .3s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(4) {
    transition: opacity .5s ease .4s, transform .5s ease .4s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(5) {
    transition: opacity .5s ease .5s, transform .5s ease .5s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(6) {
    transition: opacity .5s ease .6s, transform .5s ease .6s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(7) {
    transition: opacity .5s ease .7s, transform .5s ease .7s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(8) {
    transition: opacity .5s ease .8s, transform .5s ease .8s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(9) {
    transition: opacity .5s ease .9s, transform .5s ease .9s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(10) {
    transition: opacity .5s ease 1s, transform .5s ease 1s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(11) {
    transition: opacity .5s ease 1.1s, transform .5s ease 1.1s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(12) {
    transition: opacity .5s ease 1.2s, transform .5s ease 1.2s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(13) {
    transition: opacity .5s ease 1.3s, transform .5s ease 1.3s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content:nth-child(14) {
    transition: opacity .5s ease 1.4s, transform .5s ease 1.4s;
  }

  #sec03 .fadeTrigger.fadeAct .history-content {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  #sec03 .sec03_pb {
    padding-bottom: 0;
    position: relative;
  }

  #sec03 .hop {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  #sec03 .textBox {}

  #sec03 .title {
    width: 55.06666666666666%;
    margin: 0 auto;
    padding-top: 13.33333333333333vw;
  }

  #sec03 .text {
    width: 80.53333333333333%;
    margin: 0 auto;
    padding-top: 5.62%;
  }

  #sec03 .historyWrap {
    position: relative;
    margin-top: 8vw;
  }

  #sec03 .history_new {
    width: 33.87%;
    margin: 7.333333333333vw auto 0;

  }

  #sec03 .history {
    position: relative;
  }

  #sec03 .history-content {
    width: 60%;
    margin: 4.816% auto 0;
  }

  #sec03 .history-content:first-child {
    margin-top: 0;
  }

  #sec03 .fadeTrigger .history_new {
    opacity: 0;
    transition: opacity .5s ease 0s;


  }

  #sec03 .fadeTrigger.fadeAct .history_new {
    opacity: 1;

  }
}




/***************************
sec04
***************************/
#sec04 {
  position: relative;
  z-index: 1;
}

#sec04 .sec04Wrap {
  background-color: #8ed154;
}

#sec04 .sec04Wrap .sec04Inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  width: 96.87%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  #sec04 .sec04Wrap .sec04Inner {
    margin: 0 auto;
    width: 100%;
  }
}


/***************************
sec04 oishisa
***************************/
.oishisa_container {
  padding-top: 11.45833333333333%;
  padding-bottom: 11.45833333333333%;
}

.oishisa_inner {
  margin-bottom: 8.333333333333%;
}

.oishisa_title {
  width: 84.0625%;
  margin-left: auto;
  margin-right: auto;
}

.oishisa_wrap {
  background-color: #ffffff;
  margin-top: 6.25%;
  padding: 4.16666666667% 6.25% 4.16666666667%;
}

.oishisa_subtitle {
  width: 100%;
  margin-bottom: 3.571428571428571%;
}

/* 画像2枚横並び */
.oishisa_images {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4.761904761904762%;
}

.oishisa_image {
  width: 48.5714285%;
}

.oishisa_image:nth-child(2) {
  margin-left: 2.6041666666667%;
}

.oishisa_interview {
  width: 95.238095238095238%;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 4.761904761904762%;
}

.oishisa_interview-02 {
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 2.023809523809524%;
}

.oishisa_lead {
  width: 62.5%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .oishisa_container {
    padding-top: 13.33333333333vw;
    padding-bottom: 13.33333333333vw;
  }

  .oishisa_inner {
    margin-bottom: 10.666666666667vw;
  }

  .oishisa_title {
    width: 71.86666666666667vw;
    margin-left: auto;
    margin-right: auto;
  }

  .oishisa_wrap {
    background-color: #ffffff;
    margin-top: 8vw;
    margin-left: auto;
    margin-right: auto;
    padding: 5.3333333333vw 2.6666666666667vw;
    width: 93.6vw;
  }

  .oishisa_subtitle {
    width: 88.2666666667vw;
    margin-bottom: 5.3333333333vw;
  }

  /* 画像2枚横並び */
  .oishisa_images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 5.3333333333vw;
  }

  /* 画像1枚用 下余白が他と違うため別途設定 */
  .oishisa_images-single {
    margin-bottom: 8vw;
  }

  .oishisa_image {
    width: 88.2666666667vw;
  }

  .oishisa_image:nth-child(2) {
    margin-left: auto;
    margin-top: 5.3333333333vw;
  }

  .oishisa_interview {
    width: 88.2666666667vw;
    margin-left: auto;
    margin-bottom: 7.46666666667vw;
  }

  .oishisa_interview-02 {
    width: 88.2666666667vw;
    margin-left: auto;
    margin-bottom: 4.666666667vw;
  }

  .oishisa_lead {
    width: 76.8vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/***************************
sec04 movie
***************************/
.movie {
  margin-top: 8.3333333333%;
}

.movie_container {
  padding-bottom: 11.45833333333333%;
}

.movie_title {
  width: 21.77083333333332%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6.25%;
}

.movie_content {
  width: 87.708333333332%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}

.movie_text {
  font-size: 22px;
  color: #ffffff;
  text-align: center;
  margin-top: -5px;
  margin-bottom: -5px;
}

@media screen and (max-width: 768px) {
  .movie {
    margin-top: 10.666666667vw;
  }

  .movie_container {
    padding-bottom: 10.666666667vw;
  }

  .movie_title {
    width: 26.533333333vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8vw;
  }

  .movie_content {
    width: 86.1333333333vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.2vw;
  }

  .movie_text {
    font-size: 4.533333333333vw;
    color: #ffffff;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/************************
  sec05
*************************/

@media screen and (min-width: 769px) {
  #sec05 .bnrArea {
    padding: 7.292% 0 0;
  }

  #sec05 .bnrArea .bnrJapanhop {
    margin: 0 auto;
    width: 62.5%;
  }
}

@media screen and (max-width: 768px) {
  #sec05 .bnrArea {
    padding: 8% 0 0;
  }

  #sec05 .bnrArea .bnrJapanhop {
    margin: 0 auto;
    width: 93.75%;
  }
}



/***************************
sec00
***************************/


#sec00 {
  background: url(../images/sec00_bg.png) repeat-x center top;
  margin-top: -1%;
  padding-top: 1%;
  position: relative;
  z-index: 1;
}

#sec00::before {
  content: "";
  display: block;
  background: url(../images/sec00_inner_bg.png) repeat-y center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.8;
}

#sec00 .sec00Wrap {
  background-color: #6fba2c;
}

@media screen and (min-width: 769px) {
  #sec00 .sec00_pb {
    padding-bottom: 8%;
    position: relative;
  }

  #sec00 .sec00Wrap .title {
    width: 86.7%;
    margin: 0 auto;
    padding: 4.8% 0 4.48%;
  }

  #sec00 .movie {
    margin-bottom: 80px;
  }

  #sec00 .item-block_movie {
    width: 38.3%;
    margin: 0 auto 25px;
  }

  #sec00 .item-block_movie_text {
    width: 21.2%;
    margin: 0 auto;
  }

  #sec00 .sec00Wrap .subTitle {
    width: 81.7%;
    padding-top: 30px;
    margin: 0 auto 30px;
  }

  #sec00 .sec00Wrap .publish_img {
    width: 72.1%;
    margin: 0 auto 80px;
  }

  #sec00 .sec00Wrap .noteTitle {
    width: 80.2%;
    margin: 0 auto 30px;
  }

  #sec00 .sec00Wrap .note_bnr_img {
    width: 38.3%;
    margin: 0 auto 20px;
  }

  #sec00 .sec00Wrap .note_bnr_text {
    width: 18.4%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  #sec00 .sec00_pb {
    padding-bottom: 8.347%;
    position: relative;
  }

  #sec00 .sec00Wrap .title {
    width: 76.577%;
    margin: 0 auto;
    padding: 8.508% 0 6.421%;
  }

  #sec00 .item-block_movie {
    width: 59%;
    margin: 0 auto 5%;
  }

  #sec00 .item-block_movie_text {
    width: 40.4%;
    margin: 0 auto 10%;
  }

  #sec00 .sec00Wrap .subTitle {
    width: 92.7%;
    padding: 8.508% 0 0 0;
    margin: 0 auto 6.421%;
  }

  #sec00 .sec00Wrap .publish_img {
    width: 94%;
    margin: 0 auto 10%;
  }

  #sec00 .sec00Wrap .noteTitle {
    width: 72%;
    margin: 0 auto 6.421%;
  }

  #sec00 .sec00Wrap .note_bnr_img {
    width: 49.1%;
    margin: 0 auto 5%;
  }

  #sec00 .sec00Wrap .note_bnr_text {
    width: 27.3%;
    margin: 0 auto;
  }
}

.cover_pic {
  position: relative;
  z-index: 5;
}

.cover_pic .cover-bg {
  width: 100%;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}


/**************************
floating
**************************/
#floatingBnr.fixed {
  opacity: 1;
  transform: translateY(0%);
  transition: transform .4s ease-out 0s, opacity .6s ease-out;
}

#floatingBnr {
  transform: translateY(100%);
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 3;
  transition: transform .1s ease-out .2s, opacity .2s ease-out;
  z-index: 3;
}

#floatingBnr .inner {
  margin: 0 auto;
  padding: 10px 0;
  max-width: 960px;
  width: 96.87%;
}

#floatingBnr .bnr {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 62.5%;
}

#floatingBnr .bnr_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  padding-top: 40px;
  background: url(../images/close_bt.png) no-repeat;
  background-size: contain;
  z-index: 2;
  cursor: pointer;
}

#floatingBnr .bnr_close:hover {
  transition: opacity .5s ease;
  opacity: .75;
}


@media screen and (max-width: 768px) {
  #floatingBnr .bnr {
    margin: 0 auto;
    width: 78.12%;
  }

  #floatingBnr .bnr_close {
    width: 8%;
    padding-top: 8%;
    z-index: 3;
  }
}

@media screen and (max-width: 480px) {
  #floatingBnr .bnr {
    margin: 0 0 0 7%;
  }
}



/*popup*/
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}

.popup.is-show {
  opacity: 1;
  visibility: visible;
}

.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1145px;
  z-index: 2;

}

@media screen and (max-width: 768px) {
  .popup-inner {
    width: 90%;
  }
}

.popup-inner .display {
  height: 0;
  padding-top: 56.25%;
  width: 100%;
  position: relative;
}


.popup-inner iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  z-index: 1;
  cursor: pointer;
}



/* 背景 */
.content__bg {
  background: -moz-linear-gradient(to bottom, #c2e56a, #fff);
  background: -webkit-linear-gradient(to bottom, #c2e56a, #fff);
  background: linear-gradient(to bottom, #c2e56a, #fff);
}

/* 缶のサイズをauto */
#str-main img.history-content-img {
  width: auto;
}

/* Campaign */
.campaign {
  background-color: #8ed154;
}

/* campaign コンテンツ幅 */
.campaign__area {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .campaign__area {
    max-width: 100%;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

/* campaign タイトル */
.campaign__ttl {
  display: flex;
  justify-content: center;
  padding-top: 11.45833333333333%;
  margin-bottom: 4.6875%;
}

@media screen and (max-width: 768px) {
  .campaign__ttl {
    padding-top: 13.33333333333333vw;
    margin-bottom: 8vw;
  }
}

/* campaign バナーを囲んでいるコンテンツ */
.campaign__items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 11.45833333333333%;
}

@media screen and (max-width: 768px) {
  .campaign__items {
    padding-bottom: 13.33333333333333vw;
  }
}

/* campaign バナーを囲んでいるコンテンツ 単発 */
@media screen and (max-width: 768px) {
  .campaign__item {
    max-width: 560px;
    width: 74.66666666666667vw;
  }
}

/* Syouhin */
.syouhin {
  background-image: url(../images/syouhin-bg-pc.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .syouhin {
    background-image: url(../images/syouhin-bg-sp.jpg);
    padding-top: 13.33333333vw;
    padding-bottom: 13.33333333vw;
  }
}

/* Syouhin コンテンツ幅 */
.syouhin__area {
  position: relative;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 960px) {
  .syouhin__area {
    max-width: 100%;
    margin-right: 30px;
    margin-left: 30px;
  }
}

@media screen and (max-width: 768px) {
  .syouhin__area {
    margin: 0;
    padding-bottom: 0;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

/* 余白用 */
.syouhin__inner {
  padding-top: 11.45833333333333%;
  padding-bottom: 11.45833333333333%;
}

@media screen and (max-width: 768px) {
  .syouhin__inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Syouhin タイトル */
.syouhin__ttl {
  margin-bottom: 6.25%;
}

@media screen and (max-width: 960px) {
  .syouhin__ttl {
    max-width: 22.08333333vw;
  }
}

@media screen and (max-width: 768px) {
  .syouhin__ttl {
    max-width: 33.6vw;
    margin-bottom: 10vw;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Syouhin タイトル 画像 */
#str-main .syouhin__ttl img {
  width: auto;
}

/* Syouhin テキスト */

/* Syouhin タイトル 画像 */
#str-main .syouhin__text img {
  width: auto;
}

@media screen and (max-width: 768px) {
  .syouhin__text {
    margin-bottom: 6.66666667vw;
  }
}

/* Syouhin ビール */
.syouhin__img {
  position: absolute;
  bottom: 19.50354609929078%;
  right: 0;
}

@media screen and (max-width: 768px) {
  .syouhin__img {
    position: static;
  }
}


/* cm */
.cm {
  padding-top: 110px;
  padding-bottom: 110px;
  background-color: #8ed154;
}

@media screen and (max-width: 768px) {
  .cm {
    padding-top: 13.33333333333333vw;
    padding-bottom: 13.33333333333333vw;
  }
}

/* コンテンツ幅 */
.cm__area {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  .cm__area {
    max-width: 100%;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

/* タイトル */
.cm__ttl {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .cm__ttl {
    margin-bottom: 8vw;
  }
}

.cm__inner {
  padding-left: 10px;
  padding-right: 10px;
}

@media screen and (max-width: 768px) {
  .cm__inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.cm__items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .cm__items {
    display: block;
    margin-bottom: 14vw;
  }
}

.cm__items:last-child {
  margin-bottom: 0;
}

.cm__item {
  width: 48.93617021276596%;
}

@media screen and (max-width: 768px) {
  .cm__item {
    max-width: 630px;
    width: 84vw;
    margin-right: auto;
    margin-left: auto;
  }

  .cm__item+.cm__item {
    margin-top: 10.66666666666667vw;
  }
}

.cm__item a {
  position: relative;
}

#str-main .cm__item .imgcover01 {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.cm__text {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: 20px;
}

@media screen and (max-width: 768px) {

  .cm__text {
    margin-right: auto;
    margin-left: auto;
    padding-top: 4vw;
  }
}


/***************************
2025/10/14 更新
***************************/
.awards {
  background: linear-gradient(to bottom, #c2e56a, #fff);
}

@media screen and (max-width: 768px) {

  .awards__container {
    padding-left: 3.2vw;
    padding-right: 3.2vw;
  }
}

.awards__area {
  padding-top: 10.416666666666667%;
  padding-bottom: 11.45833333%;
}

@media screen and (max-width: 768px) {

  .awards__area {
    padding-top: 13.33333vw;
    padding-bottom: 13.33333vw;
  }
}

.awards__img {
  display: block;
  margin-top: 4.16667%;
}

@media screen and (max-width: 768px) {

  .awards__img {
    margin-top: 8vw;
  }
}

.awards__content {
  position: relative;
  margin-top: 4.16667%;
  padding-top: .625%;
  padding-bottom: .625%;
  padding-left: .625%;
  padding-right: .625%;
  border: 4px solid #014c19;
  background-color: #faffe3;
}

@media screen and (max-width: 768px) {

  .awards__content {
    margin-top: 8vw;
    padding-top: 1.0666666666666666vw;
    padding-bottom: 1.0666666666666666vw;
    padding-left: 1.0666666666666666vw;
    padding-right: 1.0666666666666666vw;
    border-width: .8vw;
  }
}

.awards__inner {
  position: relative;
  padding-top: 2.9787234042553193%;
  padding-bottom: 2.9787234042553193%;
  border: 2px solid #014c19;
  z-index: 1;
}

@media screen and (max-width: 768px) {

  .awards__inner {
    padding-top: 4.8vw;
    padding-bottom: 4.8vw;
    border-width: .5333333333333333vw;
  }
}

.awards__subtitle {
  width: 89.74358974358975%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {

  .awards__subtitle {
    width: 82.66666666666667vw;
  }
}

.awards__text {
  width: 89.74358974358975%;
  margin-top: 2.6709401709401708%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {

  .awards__text {
    width: 82.66666666666667vw;
    margin-top: 6.666666666666667vw;
  }
}

.awards__button {
  display: block;
  width: 32.052%;
  margin-top: 3.205128205128205%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {

  .awards__button {
    width: 69.33333333333334vw;
    margin-top: 8vw;
  }
}

.awards__item {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24.579831932773108%;
}

@media screen and (max-width: 768px) {

  .awards__item {
    width: 39.466666666666667vw;
  }
}

/* 缶画像 */
@media screen and (min-width: 769px) {
  #sec03 .history-list .history-content {
    width: 16.869918699186992%;
  }
}

/* SP時 アコーディオン 大枠 */
@media screen and (max-width: 768px) {

  #historyContent.sec03_pb.is-active {
    padding-bottom: 26.666666666666666vw;
  }
}

/* SP時 アコーディオン */
@media screen and (max-width: 768px) {
  .historyWrap {
    max-height: 124vw;
    overflow: hidden;
    transition: max-height .4s;
  }
}

/* SP時 アコーディオンボタン */
.history__more {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 21.333333333333335vw;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(194, 229, 106, 0.9));
  box-shadow: 0 0 2.1333333333333333vw rgba(0, 125, 40, 0.14);
}

@media screen and (min-width: 769px) {
  .history__more {
    display: none;
  }
}

/* 閉じる 画像 */
.history__more-close {
  display: none;
}

/* 開閉時 */
.history__more.is-active .history__more-img {
  display: none;
}

.history__more.is-active .history__more-close {
  display: block;
}