@charset "UTF-8";
/*==================================================================================================
    サイト基礎
==================================================================================================*/
/*==================================================================================================
    .sec00
==================================================================================================*/
.sec00 {
  background: #ffffe6;
  padding: 3em 6em;
  font-size: 1vw;
  border: 2em solid #ed7935;
  margin: 1.5em;
}
@media screen and (max-width: 768px) {
  .sec00 {
    font-size: 2.5vw;
    padding: 2em;
    position: relative;
  }
}
.sec00__inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .sec00__inner {
    display: block;
  }
}
.sec00__ttl {
  width: 28%;
}
@media screen and (max-width: 768px) {
  .sec00__ttl {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
  }
}
.sec00__cont01 {
  width: 44%;
}
@media screen and (max-width: 768px) {
  .sec00__cont01 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
  }
}
.sec00__cont01__txt01 {
  margin-bottom: 2em;
  width: 100%;
}
.sec00__cont01__txt02 {
  margin-bottom: 2em;
}
.sec00__cont02 {
  width: 18%;
}
@media screen and (max-width: 768px) {
  .sec00__cont02 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
.sec00__cont02__txt01 {
  margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
  .sec00__cont02__txt01 {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 25%;
  }
}

/*==================================================================================================
    .sec01
==================================================================================================*/
.sec01 {
  background-image: url(../img/top/sec01_bg02.png), url(../img/top/sec01_bg01.png);
  background-repeat: no-repeat, no-repeat;
  background-size: 102% auto, 100% auto;
  background-position: top 27em center, top center;
  padding: 10em 20px 4em;
  font-size: 1vw;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec01 {
    background-size: 102% auto, 250% auto;
    background-position: top 42em center, top center;
    padding-top: 14em;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .btn {
    font-size: 1.1rem;
  }
}
.sec01__abs01 {
  position: absolute;
  top: 2em;
  left: 1.5em;
  width: 22.5em;
}
@media screen and (max-width: 768px) {
  .sec01__abs01 {
    width: 26.25em;
  }
}
.sec01__abs02 {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 13.75em;
}
.sec01__ttl {
  width: 58.5106382979%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 27em;
}
@media screen and (max-width: 768px) {
  .sec01__ttl {
    width: 90%;
    margin-bottom: 25em;
  }
}
.sec01__scr {
  width: 3.1914893617%;
  position: absolute;
  top: 52em;
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (max-width: 768px) {
  .sec01__scr {
    display: none;
  }
}
.sec01__txt01 {
  width: 53.1914893617%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10em;
}
@media screen and (max-width: 768px) {
  .sec01__txt01 {
    width: 100%;
    margin-bottom: 0;
  }
}
.sec01__img02 {
  width: 76.5957446809%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  display: block;
}
@media screen and (max-width: 768px) {
  .sec01__img02 {
    width: 100%;
  }
}
.sec01__grid {
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.sec01__grid li {
  width: 48% !important;
  border-radius: 3em;
  padding-left: 3.125em;
  padding-right: 3.125em;
  padding-bottom: 3.125em;
}
@media screen and (max-width: 768px) {
  .sec01__grid li {
    width: 100% !important;
    padding-bottom: 6.25em;
  }
}
.sec01__grid__gre {
  background-color: #56c097;
}
.sec01__grid__gre2 {
  background-color: #80b261;
}
.sec01__grid__ore {
  background-color: #ff8746;
}
.sec01__grid__ble {
  background-color: #7eb6ff;
}
.sec01__grid__ttl {
  margin-top: -5em;
}
.sec01 .save-cont {
  position: relative;
  padding: 12em 20px;
  margin-top: 10em;
  margin-left: -20px;
  margin-right: -20px;
  background-image: url(../img/top/sec01_bg03.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
}
@media screen and (max-width: 768px) {
  .sec01 .save-cont {
    background-size: auto 100%;
    margin-top: 4em;
  }
}
.sec01 .save-cont__ttl {
  width: 61.7021276596%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .sec01 .save-cont__ttl {
    width: 100%;
  }
}
.sec01 .camp-area {
  border-radius: 2em;
  background: url(../img/top/sec01_bg01.png) repeat-y;
  background-size: 100% auto;
  background-position: top center;
  width: 81.7021276596%;
  padding: 4.375em 6.25em 6.25em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  .sec01 .camp-area {
    width: 100%;
  }
}
.sec01 .camp-area__ttl {
  width: 48.4281437126%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  .sec01 .camp-area__ttl {
    width: 80%;
    margin-bottom: 5em;
  }
}
.sec01 .camp-area .camp-grid {
  margin-top: 6em;
}
@media screen and (min-width: 769px) {
  .sec01 .camp-area .camp-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    -moz-column-gap: 2em;
         column-gap: 2em;
    row-gap: 2em;
  }
}
.sec01 .camp-area .camp-grid li {
  padding: 0 2.5em 2.5em;
  border-radius: 3em;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec01 .camp-area .camp-grid li {
    margin-top: 2em;
    display: flow-root;
  }
}
.sec01 .camp-area .camp-grid li.camp-grid__end::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(86, 192, 151, 0.8);
  border-radius: 3em;
  position: absolute;
  top: 0;
  left: 0;
}
.sec01 .camp-area .camp-grid li.camp-grid__end.end02::after {
  background: rgba(255, 135, 70, 0.8);
}
.sec01 .camp-area .camp-grid li.camp-grid__end.end_bousai::after {
  background: rgba(255, 172, 0, 0.8);
}
@media screen and (max-width: 768px) {
  .sec01 .camp-area .camp-grid li.camp-grid__end.end_bousai .camp-grid__ttl__end {
    padding: 0 15em;
  }
}
@media screen and (max-width: 768px) {
  .sec01 .camp-area .camp-grid li.camp-grid__end.end_bousai .camp-grid__txt__end {
    width: 46%;
  }
}
.sec01 .camp-area .camp-grid li:nth-of-type(1) {
  grid-column: 1/6;
  grid-row: 1;
  background: #56c097;
}
.sec01 .camp-area .camp-grid li:nth-of-type(2) {
  grid-column: 1/6;
  grid-row: 2;
  background: #ff8746;
}
.sec01 .camp-area .camp-grid li:nth-of-type(3) {
  grid-column: 6/9;
  grid-row: 1/3;
  background: #ffac00;
}
.sec01 .camp-area .camp-grid__ttl {
  margin-top: -4em;
}
@media screen and (max-width: 768px) {
  .sec01 .camp-area .camp-grid__ttl.camp-ttl {
    padding: 0 15em;
  }
}
.sec01 .camp-area .camp-grid__ttl__end {
  width: calc(100% - 5em);
  position: absolute;
  top: -4em;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
}
.sec01 .camp-area .camp-grid__img01 {
  margin-top: 2em;
}
@media screen and (min-width: 769px) {
  .sec01 .camp-area .camp-grid__img01 {
    position: absolute;
    width: 120%;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.sec01 .camp-area .camp-grid__txt__end {
  width: 65%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 20;
}
@media screen and (max-width: 768px) {
  .sec01 .camp-area .camp-grid__txt__end {
    width: 80%;
  }
}
.sec01 .recommend-cont {
  position: relative;
  margin-top: 10em;
}
.sec01 .recommend-cont__ttl {
  width: 60.6382978723%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec01 .recommend-cont__ttl {
    width: 100%;
  }
}
.sec01 .recommend-cont__ttl:after {
  content: "";
  position: absolute;
  bottom: 15%;
  left: 95%;
  background: url(../img/top/heart02.png) no-repeat;
  background-size: 100% auto;
  width: 22.25em;
  height: 25.0625em;
}
@media screen and (max-width: 768px) {
  .sec01 .recommend-cont__ttl:after {
    bottom: 40%;
    left: 82%;
    width: 19em;
    height: 22em;
  }
}
.sec01 .recommend-cont__ttl2 {
  width: 26.329787234%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  .sec01 .recommend-cont__ttl2 {
    width: 40%;
  }
}
.sec01 .recommend-cont__grid {
  width: 76.5957446809%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .sec01 .recommend-cont__grid {
    width: 100%;
  }
}
.sec01 .recommend-cont__grid:after {
  content: "";
  position: absolute;
  bottom: 0%;
  transform: translate(0, 50%);
  left: 0%;
  background: url(../img/top/heart03.png) no-repeat;
  background-size: 100% auto;
  width: 20.875em;
  height: 40.0625em;
}
@media screen and (max-width: 768px) {
  .sec01 .recommend-cont__grid:after {
    content: none;
  }
}
.sec01 .recommend-cont__grid li {
  margin-top: 2em;
  display: flex;
}
@media screen and (max-width: 768px) {
  .sec01 .recommend-cont__grid li {
    width: 49%;
  }
}
.sec01 .recommend-cont__grid li img {
  margin-top: auto;
}
.sec01 .recommend-cont__img {
  display: block;
  width: 76.5957446809%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .sec01 .recommend-cont__img {
    width: 100%;
  }
}

.sec02 {
  font-size: 1vw;
  padding: 9.375em 20px;
  margin-bottom: 4em;
  background: #c30d23;
}
.sec02__inner {
  width: 76.5957446809%;
  background: #FFF;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .sec02__inner {
    width: 100%;
  }
}

.sec03 {
  font-size: 1vw;
  padding: 1.875em 20px 0;
  background: #ffe0e5;
}
.sec03__inner {
  width: 76.5957446809%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .sec03__inner {
    width: 100%;
  }
}