:root {
  --base-font: 0.9375vw;
  --base-font-fixed: 18px;
  --base-font-sp: 3.738317757vw;
}

.header-text h1 img {
  max-width: 50%;
}
.main-catch h1.small a img {
  max-width: 80%;
}
@media screen and (max-width: 780px) {
  .main-catch h1.small a img {
    max-width: 100%;
  }
}

.catch-text .main-picture {
  margin-top: 0.4rem;
}

.catch-text .main-picture img {
  width:100%;
}

.catch-text .flex {
  /* margin-left: -1.3888888889rem;
  margin-right: -1.3888888889rem; */
  flex-wrap: wrap;
  justify-content:space-between;
  margin-top:0.4rem;
}
@media screen and (max-width: 780px) {
  .catch-text .flex {
    margin-left: 0;
    margin-right: 0;
    /* overflow-x: scroll;
    flex-wrap: nowrap;
    width:100%;
    height:auto; */
    }
}

.catch-text .grid-table--item {
  margin:0px;
  flex-basis:calc((100% - 40px) / 4);
  max-width:calc((100% - 40px) / 4);
  color: #333333;
}
.catch-text .grid-table--item:nth-child(4n) {
}
.catch-text .grid-table--item:nth-child(n+5) {
  margin-top: 1.3888888889rem;
}
@media screen and (max-width: 780px) {
  .catch-text .grid-table--item {
    margin: 0;
    flex-basis:100%;
    flex-basis:calc((100% - 0.5rem) / 2);
    max-width:calc((100% -  0.5rem) / 2);
    /* flex-shrink: 0;
    width:100%;
    max-width:100%;
    flex-basis: auto; */
  }
  .catch-text .grid-table--item ~ .grid-table--item {
    /* margin-left:1rem; */
  }
}

.catch-text .grid-table--item3 {
  margin:0px;
  flex-basis:calc((100% - 30px) / 3);
  max-width:calc((100% - 30px) / 3);
  color: #333333;
}
.catch-text .grid-table--item3:nth-child(n+4) {
  margin-top: 0.4rem;
}
@media screen and (max-width: 780px) {
  .catch-text .grid-table--item3 {
    margin: 0;
    flex-basis:100%;
    flex-basis:100%;
    max-width:100%;
  }
  .catch-text .grid-table--item3 ~ .grid-table--item3 {
    margin-top: 0;
    /* margin-left:1rem; */
  }
}

.catch-text .grid-table--item2 {
  margin:0px;
  flex-basis:calc((100% - 15px) / 2);
  max-width:calc((100% - 15px) / 2);
  color: #333333;
}
.catch-text .grid-table--item2:nth-child(n+3) {
  margin-top: 0.4rem;
}
@media screen and (max-width: 780px) {
  .catch-text .grid-table--item2 {
    margin: 0;
    flex-basis:100%;
    flex-basis:100%;
    max-width:100%;
  }
  .catch-text .grid-table--item2 ~ .grid-table--item2 {
    margin-top: 0;
  /* margin-left:1rem; */
  }
}

.catch-text .grid-table--wrap2.left {
  margin:0px;
  flex-basis:70%;
  max-width:70%;
  color: #333333;
}
.catch-text .grid-table--wrap2.right {
  margin:0px;
  flex-basis:28%;
  max-width:28%;
  color: #333333;
}
.catch-text .grid-table--wrap2:nth-child(n+3) {
  margin-top: 0.4rem;
}
@media screen and (max-width: 780px) {
  .catch-text .grid-table--wrap2.left {
    flex-basis:100%;
    max-width:100%;
    }
  .catch-text .grid-table--wrap2.right {
    flex-basis:100%;
    max-width:100%;
    }
}

#banner-list-area {
  text-align:center;
  margin-top:2rem;
}
@media screen and (max-width: 780px) {
  #banner-list-area .container {
    width:100%;
    margin:0;
  }
}