@charset "utf-8";
/* CSS Document */

    
.menu_contents .boxArea, body, .ec-layoutRole{
  background: #fff;
}

.ec-layoutRole .ec-layoutRole__contents {
  padding-top: 0;
}


  .mv a{
    width: 30%;
    left:40%;
    height: 60px;
    position: absolute;
    top:90%;

  }

.vinegar > section {
  max-width: 1600px;
  margin: 0 auto;
}

.visual-block {
  display: grid;
}

.visual-block__bg,
.visual-block__content {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.visual-block__bg {
  display: block;
  width: 100%;
  height: auto;
}

.visual-block__content {
  position: relative;
  z-index: 1;
}

.visual-block__content.w1200{
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}
.mv .visual-block {
  position: relative;
}

.mv .visual-block__content {
  position: static;
}

.mv .c-btnArea{
  position: absolute;
  left: clamp(8%, calc(28.33vw - 133.33px), 15%);
  bottom: 4%;
  z-index: 2;
  margin: 0;
  width: auto;
}


.sec03 {
  position: relative;
}

.sec03 > .visual-block__content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.sec03 .inner ul{
  display: grid;
  grid-template-columns: 0.36fr 0.3fr 0.3fr;
  gap: 0px;
  padding: 22% 0px 0 0px;
}

@media screen and (max-width: 1300px) {
  .sec03 .inner ul{
    padding: 14% 0px 0 0px;
  }
}

.sec03 .inner ul li .c-btn{
  min-width: 200px;
  margin: 0;
}
.sec03 .inner ul li:nth-child(1) .c-btn{
  color: #fff493;
}
.sec03 .inner ul li:nth-child(2) .c-btn{
  color: #ba7496;
}
.sec03 .inner ul li:nth-child(3) .c-btn{
  color: #ea635a;
}


.sec08 {
  position: relative;
}

.sec08 .visual-block__content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.sec08 .inner .c-btnArea{
  position: absolute;
  bottom: 2%;
  left: 300px;
  margin: 0;
}



.sec10 .visual-block {
  position: relative;
}

.sec10 .visual-block__content {
  position: static;
}

.sec10 .c-btnArea {
  position: absolute;
  right: clamp(15%, calc(28.33vw - 133.33px), 20%);
  bottom: 4%;
  z-index: 2;

  margin: 0;
  width: auto;
}


@media screen and (max-width: 767px) {
  .vinegar{
    margin-top: 50px;
  }
  .mv a{
    width: 50%;
    height: 60px;
    position: absolute;
    top:44%;
    left: 0;
  }

.sec03 .inner ul{
  display: block;
  padding: 40% 0px 0 0px;
}
  .sec08 a{
    width: 50%;
    height: 60px;
    position: absolute;
    bottom:0%;
    right: 0;
  }
  .sec10 a{
    width: 80%;
    margin: 0 auto 0;
    position: absolute;
    top:40%;
    left: 10%;
    height: 60px;
  }


}