@charset "UTF-8";

/*header*/
.h-main {
  height: 100px;
  border-bottom: 1px solid #a79e7f;
}

.h-inner {
  height: 100px;
}

.l-inner {
  width: 1000px;
  margin: 0 auto;
}

.l-sideWrp--both {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.l-linkBlock {
  display: block;
  margin-top: 8px
}

.h-logoBox_logo {
  width: 166px;
}

.h-btnBox {
  position: relative;
  width: 190px;
  height: 35px;
  text-align: center;
  border-radius: 5px;
  background-color: #5a3c00;
}

.h-btnBox:hover {
  opacity: .7;
}

.h-btnBox::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 9px;
  height: 10px;
  margin: auto 0;
  content: '';
  background-image: url(../img/icon_triangle.svg);
}

.h-btnBox::before:hover {
  opacity: .7
}

.h-btnBox_btn {
  font-family: "Hiragino Kaku Gothic ProN", メイリオ, meiryo, 游ゴシック, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 35px;
  display: block;
  padding-left: 20px;
  letter-spacing: .06em;
  color: #fff;
}

@media screen and (max-width: 991px) {
  .l-inner {
    width: 93%;
  }
}

@media screen and (max-width: 380px) {
  .h-logoBox_logo {
    width: 105px;
  }
}


/*footer*/
.f-main {
  height: 50px;
  color: #5a3c00;
  border-top: 1px solid;
  font-family: sans-serif;
}

.f-inner {
  height: 50px;
}

.f-copy {
  font-size: 12px;
  font-weight: 400;
  line-height: 3.6;
  text-align: center;
  letter-spacing: .04em;
  color: #000;
}


/*common*/
* {
  box-sizing: border-box;
}

img {
  max-width: 100%
}

.text-center {
  text-align: center;
}

.text-bold {
  font-weight: 700;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media screen and (max-width: 576px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
}


/*button*/
.btn {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  border-radius: 100px;
  background-color: #cc0c09;
  color: #fff;
  display: inline-block;
  padding-top: 16px;
  padding-bottom: 12px;
  width: 400px;
}

@media screen and (max-width: 767px) {
  .btn {
    width: 320px;
    margin-bottom: 30px;
  }
}


/*mv*/
.mv {
  width: 100vw;
  height: 53.3333vw;
  position: relative;
}

.logo {
  position: absolute;
  top: 29%;
  left: 27.5vw;
  width: 44vw;
  animation: bounce;
  animation-duration: 2s;
}

.mv-chara {
  position: absolute;
  top: 60%;
  left: 64.5vw;
  width: 26.58vw;
  opacity: 0;
  animation: appear, bounce;
  animation-duration: 0.5s, 2s;
  animation-delay: 0.3s, 0.3s;
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/*main*/
.sec {
  padding: 70px 0;
  position: relative;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.sec-text {
  font-size: 24px;
}

.sec-text p {
  border-radius: 100px;
  line-height: 2;
  font-weight: 500;
}

.sec1 {
  background-color: #ffd800;
}

.sec1-inner {
  width: 750px;
  margin: auto;
  position: relative;
}

.sec1-title img {
  height: 75px;
  aspect-ratio: 648/150;
}

.video-wrapper {
  border-radius: 20px;
  border: 2px solid #f8bd00;
  background-color: #fff;
  text-align: center;
  padding: 50px;
  position: relative;
}

.video-wrapper iframe {
  width: 640px;
  height: 360px;
}

.sec1-chara {
  width: 140px;
  height: 139px;
  position: absolute;
  top: -128px;
  right: calc(50% - 400px);
}

.sec1-chocobaby {
  position: absolute;
  top: -120px;
  left: calc(50% - 400px);
  width: 130px;
}

.sec1-okashi-l {
  position: absolute;
  top: 45px;
  left: calc(50% - 480px);
  width: 43px;
}

.sec1-okashi-r {
  position: absolute;
  top: 45px;
  right: calc(50% - 480px);
  width: 43px;
}

.sec1-okashi-l1,
.sec1-okashi-r1 {
  margin-top: 0%;
  animation: sec1-pc ease-in-out 2s infinite;
}

@keyframes sec1-pc {
  50% {
    margin-top: 20%;
  }
}

.sec1-okashi-l3,
.sec1-okashi-l5,
.sec1-okashi-r3,
.sec1-okashi-r5 {
  margin-top: 150%;
}

.sec1-okashi-l2,
.sec1-okashi-l4,
.sec1-okashi-l6,
.sec1-okashi-r2,
.sec1-okashi-r4,
.sec1-okashi-r6 {
  margin-top: 150%;
  transform: scale(-1, 1)
}

.sec2 {
  background-color: #fff;
}

.sec2-inner {
  width: 750px;
  margin: auto;
  position: relative;
}

.sec2-title img {
  height: 77px;
  aspect-ratio: 1430/154;
}

.sec2-text {
  margin-bottom: 40px;
  text-align: center;
}

.sec2-text p {
  display: inline-block;
  color: #fff;
  background-color: #e04f8a;
  padding: 10px 16px 0;
}

.sec2-okashi-l {
  position: absolute;
  top: 20px;
  left: calc(50% - 480px);
  width: 37px;
}

.sec2-okashi-r {
  position: absolute;
  top: 20px;
  right: calc(50% - 480px);
  width: 37px;
}

.sec2-okashi-l img,
.sec2-okashi-r img {
  margin-top: 42%;
}

.sec2-okashi-la {
  margin-left: 20%;
  animation: sec2-l linear 3s infinite;
}

.sec2-okashi-lb {
  margin-left: -20%;
  animation: sec2-r linear 3s infinite;
}

.sec2-okashi-ra {
  margin-left: -20%;
  animation: sec2-r linear 3s infinite;
}

.sec2-okashi-rb {
  margin-left: 20%;
  animation: sec2-l linear 3s infinite;
}

@keyframes sec2-l {
  50% {
    margin-left: -20%;
  }
}

@keyframes sec2-r {
  50% {
    margin-left: 20%;
  }
}

.sec2-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sec2-flex .sec2-img {
  width: 240px;
  margin-right: 50px;
}

.sec2-flex .sec2-chara {
  width: 243px;
}

.sec3 {
  background: url(../img/sec3_bg.png) no-repeat, linear-gradient(to bottom, #51a443 0%, #c2d500 20%, #cdd900 30%);
  background-size: 550px, 100%;
  background-position: right bottom;
  padding-bottom: 120px;
}

.sec3-inner {
  width: 780px;
  margin: auto;
  position: relative;
}

.sec3-title img {
  height: 91px;
  aspect-ratio: 1392/182;
}

.sec3-text {
  margin-bottom: 40px;
  text-align: center;
}

.sec3-text p {
  display: inline-block;
  background-color: #fff;
  padding: 10px 12px 0;
}

.sec3-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sec3-flex .sec3-img {
  width: 500px;
}

.sec3-flex .sec3-chara {
  width: 308px;
  margin-right: 40px;
}

.sec4 {
  background: url(../img/sec4_bgl.png) no-repeat, url(../img/sec4_bgr.png) no-repeat, #fff000;
  background-size: 333px, 428px, 100%;
  background-position: left bottom, right bottom;
  padding-bottom: 80px;
}

.sec4-inner {
  width: 750px;
  margin: auto;
  position: relative;
}

.sec4-title img {
  height: 100px;
  aspect-ratio: 1474/200;
}

.sec4-text {
  margin-bottom: 40px;
  text-align: center;
}

.sec4-text p {
  display: inline-block;
  background-color: #fff;
  padding: 10px 12px 0;
}

.sec4-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sec4-flex .sec4-img {
  width: 240px;
}

.sec4-flex .sec4-chara {
  width: 190px;
  margin-left: 40px;
}

.sec5 {
  background-color: #fff;
}

.sec5-inner {
  width: 750px;
  margin: auto;
  position: relative;
  z-index: 1;
}

.sec5-title img {
  height: 50px;
  aspect-ratio: 612/100;
}

.sec5-text {
  text-align: center;
}

.sec5-text p {
  display: inline-block;
  color: #fff;
  background-color: #b94a16;
  padding: 10px 16px 0;
}

.sec5-okashi-l {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 20px;
  left: calc(50% - 480px);
}

.sec5-okashi-r {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 20px;
  right: calc(50% - 500px);
}

.sec5-okashi-l img,
.sec5-okashi-r img {
  margin-top: 60%;
}

.sec5-okashi-l1 {
  width: 36px;
  animation: sec5-rotate 1s ease-in-out infinite alternate;
}

.sec5-okashi-l2 {
  width: 27px;
  margin-left: -10px;
  animation: sec5-rotate 1s ease-in-out infinite alternate;
}

.sec5-okashi-l3 {
  width: 46px;
  animation: sec5-rotate 1s ease-in-out infinite alternate-reverse;
}

.sec5-okashi-r1 {
  width: 36px;
  animation: sec5-rotate 1s ease-in-out infinite alternate;
}

.sec5-okashi-r2 {
  width: 27px;
  margin-left: 10px;
  animation: sec5-rotate 1s ease-in-out infinite alternate;
}

.sec5-okashi-r3 {
  width: 46px;
  animation: sec5-rotate 1s ease-in-out infinite alternate-reverse;
}

@keyframes sec5-rotate {
  0% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

.sec5-flex {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.sec5-flex .sec5-img {
  width: 500px;
  margin-left: 50px;
}

.sec5-flex .sec5-chara {
  width: 207px;
  margin-bottom: 20px;
}

.sec6 {
  background: url(../img/sec6_bg.png);
}

.sec6-inner {
  width: 750px;
  margin: auto;
  position: relative;
}

.sec6-title img {
  height: 80px;
  aspect-ratio: 1300/160;
}

.sec6-text {
  text-align: center;
  margin-bottom: 40px;
}

.sec6-text p {
  display: inline-block;
  background-color: #fff;
  padding: 4px 20px;
}

.sec6-okashi-l {
  position: absolute;
  top: 0;
  left: calc(50% - 480px);
  width: 70px;
}

.sec6-okashi-r {
  position: absolute;
  top: 0;
  right: calc(50% - 480px);
  width: 70px;
}

.sec6-okashi-l img,
.sec6-okashi-r img {
  margin-top: 42%;
}

.sec6-okashi-la {
  margin-left: 5%;
  animation: sec6-l linear 1.5s infinite;
}

.sec6-okashi-lb {
  margin-left: -5%;
  animation: sec6-r linear 1.5s infinite;
}

.sec6-okashi-ra {
  margin-left: -5%;
  animation: sec6-r linear 1.5s infinite;
}

.sec6-okashi-rb {
  margin-left: 5%;
  animation: sec6-l linear 1.5s infinite;
}

@keyframes sec6-l {
  50% {
    margin-left: -5%;
  }
}

@keyframes sec6-r {
  50% {
    margin-left: 5%;
  }
}

.sec6-flex {
  display: flex;
  justify-content: center;
}

.sec6-flex .sec6-img {
  width: 584px;
  margin-left: 40px;
}

.lineup {
  text-align: center;
  padding: 60px 0;
  margin-left: auto;
  margin-right: auto;
}

.lineup-title img {
  height: 50px;
  aspect-ratio: 460/100;
}

.lineup-okashi-l {
  position: absolute;
  top: 50px;
  left: calc(50% - 500px);
  width: 82px;
}

.lineup-okashi-r {
  position: absolute;
  top: 50px;
  right: calc(50% - 500px);
  width: 82px;
}

.lineup-okashi-l1 {
  margin-top: 0%;
  animation: lineup-pc ease-in-out 2s infinite;
}

.lineup-okashi-r1 {
  margin-top: 0%;
  animation: lineup-pc ease-in-out 2s infinite;
  transform: scale(-1, 1);
}

@keyframes lineup-pc {
  50% {
    margin-top: 10%;
  }
}

.lineup-okashi-l2 {
  margin-top: 45%;
  transform: scale(-1, 1);
}

.lineup-okashi-l3 {
  margin-top: 45%;
  transform: rotate(-20deg);
}

.lineup-okashi-l4 {
  margin-top: 45%;
  transform: scale(-1, 1);
}

.lineup-okashi-l5 {
  margin-top: 45%;
  transform: rotate(30deg);
}

.lineup-okashi-l6 {
  margin-top: 45%;
  transform: scale(-1, 1) rotate(-30deg);
}

.lineup-okashi-l7 {
  margin-top: 45%;
  transform: rotate(-10deg);
}

.lineup-okashi-r2 {
  margin-top: 45%;
}

.lineup-okashi-r3 {
  margin-top: 45%;
  transform: rotate(20deg) scale(-1, 1);
}

.lineup-okashi-r4 {
  margin-top: 45%;
}

.lineup-okashi-r5 {
  margin-top: 45%;
  transform: rotate(-30deg) scale(-1, 1);
}

.lineup-okashi-r6 {
  margin-top: 45%;
  transform: rotate(-40deg);
}

.lineup-okashi-r7 {
  margin-top: 45%;
  transform: rotate(10deg) scale(-1, 1);
}

.lineup-content {
  margin: 60px auto 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 750px;
  position: relative;
}

.lineup-item {
  margin-bottom: 20px;
}

.lineup-item img {
  width: 152px;
  border: 1px solid #bdbdbd;
}

.lineup-subject {
  font-size: 16px;
  font-weight: 500;
  margin: 8px 0 2px;
  line-height: 1;
}

.lineup-memo {
  font-size: 16px;
  font-weight: 500;
}

.lineup-memo-nrb {
  margin-top: 10px;
}


@media screen and (max-width: 991px) {
  .sec1-inner {
    width: 80%;
  }

  .sec1-title {
    width: calc(100% - 340px);
    margin-left: auto;
    margin-right: auto;
  }

  .video-wrapper {
    padding: 30px;
  }

  .video-wrapper iframe {
    width: 100%;
    height: calc((100vw - 90px) * 0.5625);
  }

  .sec1-chara {
    right: -4%;
  }

  .sec1-chocobaby {
    left: -4%;
  }

  .sec1-okashi-l {
    left: 1%;
    right: auto;
  }

  .sec1-okashi-r {
    left: auto;
    right: 2%;
  }

  .sec2-okashi-l {
    left: 3%;
    right: auto;
  }

  .sec2-okashi-r {
    left: auto;
    right: 3%;
  }

  .sec3-inner {
    width: calc(100% - 24px);
  }

  .sec3-flex .sec3-img {
    width: 48%;
  }

  .sec3-flex .sec3-chara {
    width: calc(48% - 40px);
    max-width: 308px;
  }

  .sec5-okashi-l {
    left: 3%;
    right: auto;
  }

  .sec5-okashi-r {
    left: auto;
    right: 3%;
  }

  .sec6-okashi-l {
    left: 3%;
    right: auto;
  }

  .sec6-okashi-r {
    left: auto;
    right: 3%;
  }

  .lineup-okashi-l {
    left: 0;
    right: auto;
  }

  .lineup-okashi-r {
    left: auto;
    right: 0;
  }

  .lineup-content {
    width: 680px;
  }
}


@media screen and (max-width: 767px) {
  .mv {
    height: 143.59vw;
  }

  .logo {
    top: 25%;
    left: calc(50% - 39.32vw);
    width: 78.64vw;
  }

  .mv-chara {
    top: 48%;
    left: calc(50% - 40.895vw);
    width: 81.79vw;
  }

  .sec {
    width: 100%;
    padding: 40px 0;
  }

  .sec-text p {
    border-radius: 24px;
    line-height: 1.5;
  }

  .sec-inner {
    width: calc(100% - 24px);
  }

  .sec1-title {
    width: calc(100% - 24px);
    margin-bottom: 50px;
  }

  .sec1-title img {
    height: auto;
    max-height: 75px;
  }

  .sec1-chara {
    width: 56px;
    height: 55.6px;
    top: -50px;
    right: 10px;
  }

  .sec1-chocobaby {
    top: -140px;
    left: 0;
  }

  .sec1-okashi-l {
    display: flex;
    justify-content: space-around;
    width: calc(100% - 24px);
    height: 70px;
    position: static;
    padding-top: 30px;
    margin: auto;
  }

  .sec1-okashi-r {
    display: none
  }

  .sec1-okashi-l img {
    width: 43px;
    height: 47px;
  }

  .sec1-okashi-l1,
  .sec1-okashi-l3,
  .sec1-okashi-l5 {
    margin-top: -1%;
    animation: sec1-sp ease-in-out 2s infinite;
  }

  .sec1-okashi-l2,
  .sec1-okashi-l4,
  .sec1-okashi-l6 {
    margin-top: 1%;
    animation: sec1-sp ease-in-out 2s infinite;
    transform: scale(-1, 1)
  }

  @keyframes sec1-sp {
    50% {
      margin-top: 0;
    }
  }

  .sec2-title {
    width: calc(100% - 24px);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .sec2-title img {
    height: auto;
    max-height: 122px;
    aspect-ratio: 676/244;
  }

  .sec2-text p {
    padding: 16px 16px 6px;
    text-align: left;
  }

  .sec2-flex {
    flex-direction: column;
    margin-left: 20vw;
  }

  .sec2-flex .sec2-img {
    margin-right: 0;
  }

  .sec2-flex .sec2-chara {
    margin-top: 20px;
  }

  .sec2-okashi-l {
    margin-top: 300px;
    left: 8%;
  }

  .sec2-okashi-r {
    display: none;
  }

  .sec3 {
    background-size: 90%, 100%;
    padding-bottom: 100px;
  }

  .sec3-title {
    width: calc(100% - 24px);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .sec3-title img {
    height: auto;
    max-height: 126px;
    aspect-ratio: 672/252;
  }

  .sec3-flex {
    flex-direction: column-reverse;
  }

  .sec3-text p {
    padding: 16px 16px 6px;
    text-align: left;
  }

  .sec3-flex .sec3-img {
    width: 100%;
  }

  .sec3-flex .sec3-chara {
    width: 100%;
    margin-right: 0;
    margin-top: 20px;
  }

  .sec4 {
    background: url(../img/sec4_bgr.png) no-repeat, #fff000;
    background-size: 92%, 100%;
    background-position: right bottom;
    padding-bottom: 120px;
  }

  .sec4-title {
    width: calc(100% - 24px);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .sec4-title img {
    height: auto;
    max-height: 134px;
    aspect-ratio: 676/268;
  }

  .sec4-flex {
    flex-direction: column;
  }

  .sec4-text p {
    padding: 16px 16px 6px;

    text-align: left;
  }

  .sec4-flex .sec4-chara {
    margin-right: 0;
    margin-top: 20px;
    margin-left: 0;
  }

  .sec5 {
    background-size: 90%, 100%;
    padding-bottom: 40px;
  }

  .sec5-title {
    width: calc(100% - 24px);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .sec5-title img {
    max-height: 150px;
    aspect-ratio: 612/100;
  }

  .sec5-flex {
    flex-direction: column-reverse;
    align-items: center;
  }

  .sec5-text p {
    padding: 16px 16px 6px;
  }

  .sec5-flex .sec5-img {
    width: 100%;
    margin-left: 0;
  }

  .sec5-flex .sec5-chara {
    margin-right: 0;
    margin-top: 20px;
  }

  .sec5-okashi-l {
    margin-top: 160px;
    left: 4%;
  }

  .sec5-okashi-l2 {
    margin-left: 0;
  }

  .sec5-okashi-r {
    display: none;
  }

  .sec6-title {
    width: calc(100% - 24px);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .sec6-title img {
    height: auto;
    max-height: 111px;
    aspect-ratio: 612/222;
  }

  .sec6-okashi-l {
    display: flex;
    justify-content: space-around;
    width: calc(100% - 24px);
    position: static;
    padding-top: 30px;
    margin: auto;
  }

  .sec6-okashi-l img {
    position: relative;
    top: 0;
    width: 15%;
    margin-top: 0;
    margin-left: 0;
    animation: sec6-sp ease-in-out 1s infinite alternate;
  }

  .sec6-okashi-l img.sec6-okashi-lb {
    animation-direction: alternate-reverse;
  }

  @keyframes sec6-sp {
    100% {
      top: -10px;
    }
  }

  .sec6-okashi-r {
    display: none;
  }

  .sec6-flex {
    flex-direction: column-reverse;
  }

  .sec6-text {
    margin-bottom: 20px;
  }

  .sec6-text p {
    padding: 16px 16px 6px;
  }

  .sec6-flex .sec6-img {
    width: 100%;
    margin-left: 0;
  }

  .lineup {
    width: calc(100vw - 24px);
    padding: 60px 0;
  }

  .lineup-content {
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .lineup-item {
    width: 48%;
    margin-bottom: 36px;
  }

  .lineup-item:nth-of-type(odd) {
    margin-right: 4%;
  }

  .lineup-okashi-l {
    display: none;
  }

  .lineup-okashi-r {
    display: none;
  }

  .lineup-okashi-sp {
    display: block;
    width: calc(100% - 24px);
    height: calc((100vw - 24px) * 0.189);
    background: url(../img/lineup_okashi_sp.png);
    background-size: contain;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
  }

  .lineup-okashi-l {
    display: flex;
    justify-content: space-around;
    width: calc(100% - 24px);
    position: static;
    padding-top: 30px;
    margin: auto;
  }

  .lineup-okashi-l img {
    position: relative;
    top: 0;
    width: 15%;
    margin-top: 0;
    margin-left: 0;
    animation: lineup-sp ease-in-out 1s infinite alternate;
  }

  .lineup-okashi-l img:nth-child(even) {
    animation-direction: alternate-reverse;
  }

  @keyframes lineup-sp {
    100% {
      top: -10px;
    }
  }

  .lineup-okashi-r {
    display: none;
  }
}
/*header 変更*/
.header {
	font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
	  background-color: #fff;
	  border-bottom: 1px solid #333;
	  left: 0;
	  padding: 11px 0 10px;
	  /*position: fixed;*/
	  right: 0;
	  top: 0;
	  z-index: 900;
  }
  
  .header__inner {
	  align-items: center;
	  display: flex;
	  padding: 0 0.5rem;
  }
  
  .header__logo {
	  display: flex;
  }
  
  .header__logo a {
    display: inline-block;
	  height: inherit;
	  width: 162px;
  }
  
  .header__logo img {
	  -o-object-fit: contain;
	  aspect-ratio: 120/51;
	  height: 100%;
	  object-fit: contain;
	  width: 100%;
  }
  
  .header__buttons {
	  display: flex;
	  flex-direction: column;
	  gap: 0.5rem;
	  margin-left: auto;
  }
  .button,
  .button--green {
	  background-color: #5a2800;
	  border-radius: 0.4rem;
	  color: #fff;
	  display: inline-block;
	  font-size: 1.4rem;
	  font-weight: 600;
	  line-height: 1;
	  padding: 11px 0 12px;
	  text-align: center;
	  width: 164px;
  }
  
  .button--green {
	  background-color: #00b900;
	  text-transform: uppercase;
  }
  .lineup h3 {
	  width: fit-content;
	  padding: 0 20px;
	  text-align: center;
	  margin: 0 auto 40px;
	  line-height: 3rem;
	  border-bottom: 5px solid #5a3c00;
	  font-size: 2rem;
	  color: #5a3c00;
  }
  .lineup h3 span {
	  color: #5a3c00;
	  vertical-align: top;
  }
  .lineup {
	  width: 100%;
	  margin: 0 auto;
	  padding: 80px 0;
  }
  .lineup-box {
	  width: 80%;
	  margin: 0 auto;
  
  }
  .lineup__cta-buttons {
	  width: 100%;
	  margin: 0 auto;
  }
  .lineup__cta-button {
	  flex:1;
  }
  .cta-button span, .cta-button--line span {
	  padding-left: 1.25rem;
	  position: relative;
  }
  .cta-button span::before, .cta-button--line span::before {
	  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
	  background-color: #fff;
	  clip-path: polygon(0 0, 0 100%, 100% 50%);
	  content: "";
	  height: 18px;
	  left: -4px;
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  width: 13px;
  }
  .cta-button, .cta-button--line {
	  background-color: #358f2b;
	  box-shadow: 0 6px 0 #25641e;
	  color: #fff;
	  display: inline-block;
	  font-size: 18px;
	  font-weight: 600;
	  letter-spacing: 0.024em;
	  line-height: 1.3;
	  /* max-width: 15.375rem; */
	  padding: 12px 0;
	  text-align: center;
	  transition: 0.2s;
	  width: 100%;
	  margin-bottom: 24px;
  }
  @media screen and (min-width: 768px) {
  .header {
	  padding: 15px 0 14px;
  }
  
  .header__inner {
	  margin-left: auto;
	  margin-right: auto;
	  max-width: 1020px;
  }
  
  .header__logo a {
	  width: 162px;
  }
  
  .header__buttons {
	  flex-direction: initial;
	  gap: 24px;
  }
  
  .cta-button,
  .cta-button--line {
	  background-color: #358f2b;
	  box-shadow: 0 0.3125rem 0 #25641e;
	  color: #fff;
	  display: inline-block;
	  font-size: 18px;
	  font-weight: 600;
	  letter-spacing: 0.024em;
	  line-height: 1;
	  padding: 0.75rem 0;
	  text-align: center;
	  transition: 0.2s;
	  width: 100%;
  }
  
  .cta-button span,
  .cta-button--line span {
	  padding-left: 1.25rem;
	  position: relative;
  }
  
  .cta-button span::before,
  .cta-button--line span::before {
	  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
	  background-color: #fff;
	  clip-path: polygon(0 0, 0 100%, 100% 50%);
	  content: "";
	  height: 1rem;
	  left: 0;
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  width: 0.6875rem;
  }
  
  .cta-button--line {
	  text-transform: uppercase;
  }
  .button,
  .button--green {
	  font-size: 16px;
	  padding: 15px 20px;
	  width: 198px;
  }
  .lineup__cta-buttons {
	  display: flex;
	  gap: 24px;
	  justify-content: center;
	  margin-top: 0.875rem;
  }
  
  .lineup__cta-button:not(:first-child) {
	  margin-top: 0;
	  margin-top: initial;
  }
  .cta-button,
  .cta-button--line {
	  box-shadow: 0 0.4375rem 0 #25641e;
	  padding: 1.3125rem 0;
	  width: 100%;
  }
  .lineup-box {
	  width: 60%;
  }
  
  }
  @media (hover: hover) {
  
	  .cta-button:hover,
	  .cta-button--line:hover {
		  box-shadow: none;
		  opacity: 1;
		  transform: translateY(0.3125rem);
	  }
  }
  
  @media screen and (min-width: 768px) {
  
	  .pc {
		  display: block;
	  }
	  
	  .sp {
		  display: none;
	  }
  }