@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* リセットcss
========================================================================== */
p {
  margin: 0;
}

/* common css
========================================================================== */
.post .inner {
  max-width: 1080px;
  width: 100%;
  padding: 0 36px;
  margin: 0 auto;
}
@media only screen and (max-width: 849px) {
  .post .inner {
    max-width: 100vw;
    padding: 0 4.5333333333vw;
  }
}

:root {
  --theme-color: #825538;
  --bg-color-dark: #F5F3E0;
  --bg-color-light: #F9F1D7;
}

/* main
========================================================================== */
.main {
  background-color: #fffaf5;
}
@media only screen and (max-width: 849px) {
  .main {
    margin-top: 86px;
  }
}

.mv {
  margin-bottom: 74px;
}
@media only screen and (max-width: 849px) {
  .mv {
    margin-bottom: 12.2666666667vw;
  }
}
.mv .inner {
  max-width: 1200px;
  margin: auto;
}
@media only screen and (max-width: 849px) {
  .mv .inner {
    max-width: 100vw;
    padding: 0 4.6666666667vw;
  }
}
.mv .mv_img_wrap {
  position: relative;
  background-image: url(../../../../../assets/kurashito/img/lifestyle/hiroba/01/mv_img_pc.jpg);
  background-position: center center;
  background-size: cover;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  height: 472px;
}
@media only screen and (max-width: 849px) {
  .mv .mv_img_wrap {
    background-image: url(../../../../../assets/kurashito/img/lifestyle/hiroba/01/mv_img_sp.jpg);
    width: 100vw;
    height: 101.3333333333vw;
  }
}
.mv .mv_img_wrap h1 {
  position: absolute;
  max-width: 465px;
  width: 100%;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 849px) {
  .mv .mv_img_wrap h1 {
    max-width: 80vw;
    top: 17.6vw;
  }
}

#introduction .intro_txt_wrapper {
  position: relative;
}
#introduction .intro_txt {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 500;
  width: 587px;
  margin: 0 auto;
}
@media only screen and (max-width: 849px) {
  #introduction .intro_txt {
    font-size: 4vw;
    letter-spacing: -0.5px;
    width: 86.1333333333vw;
  }
}
#introduction .intro_txt_icon {
  position: absolute;
  width: 9%;
  right: 3%;
  top: -11%;
}
@media only screen and (max-width: 849px) {
  #introduction .intro_txt_icon {
    width: 16%;
    right: -2%;
    top: 39%;
  }
}
#introduction .pickupEpisode {
  padding-top: 80px;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  color: #000;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode {
    padding-top: 12.5333333333vw;
    max-width: 78.6666666667vw;
  }
}
#introduction .pickupEpisode li {
  padding-bottom: 45px;
  border-bottom: 2px solid #c9bc9c;
  position: relative;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li {
    padding-bottom: 10.6666666667vw;
  }
}
#introduction .pickupEpisode li + li {
  margin-top: 45px;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li + li {
    margin-top: 10.6666666667vw;
  }
}
#introduction .pickupEpisode li .episode_icon {
  position: absolute;
  z-index: -1;
}
#introduction .pickupEpisode li:first-child .episode_icon {
  width: 10.715%;
  top: 8%;
  left: -2%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:first-child .episode_icon {
    width: 17.063%;
    top: -11%;
    left: -7%;
  }
}
#introduction .pickupEpisode li:first-child .episode_icon + .episode_icon {
  width: 7.5%;
  left: 8%;
  bottom: 28%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:first-child .episode_icon + .episode_icon {
    width: 12.9%;
    left: auto;
    bottom: 45%;
    top: auto;
    right: -10%;
  }
}
#introduction .pickupEpisode li:nth-child(2) .episode_icon {
  width: 7.9767%;
  right: -1%;
  top: 15%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(2) .episode_icon {
    width: 12.9767%;
    right: -13%;
    top: 3%;
  }
}
#introduction .pickupEpisode li:nth-child(2) .episode_icon + .episode_icon {
  width: 12.262%;
  right: 5%;
  bottom: 5%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(2) .episode_icon + .episode_icon {
    width: 20.262%;
    right: auto;
    left: -11%;
    bottom: 5%;
    z-index: 1;
  }
}
#introduction .pickupEpisode li:nth-child(3) .episode_icon {
  width: 9.762%;
  left: 5%;
  top: 13%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(3) .episode_icon {
    width: 14.762%;
    left: auto;
    top: 9%;
    right: -13%;
  }
}
#introduction .pickupEpisode li:nth-child(3) .episode_icon + .episode_icon {
  width: 10.1199%;
  left: -3%;
  top: 41%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(3) .episode_icon + .episode_icon {
    width: 18.1199%;
    left: -11%;
    top: 39%;
  }
}
#introduction .pickupEpisode li:nth-child(3) .episode_icon + .episode_icon + .episode_icon {
  width: 7.143%;
  left: 12.4%;
  top: auto;
  bottom: 11%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(3) .episode_icon + .episode_icon + .episode_icon {
    width: 14.143%;
    left: auto;
    bottom: 18%;
    right: -13%;
  }
}
#introduction .pickupEpisode li:nth-child(4) .episode_icon {
  width: 9.524%;
  top: 1%;
  right: 8%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(4) .episode_icon {
    width: 17.1%;
    top: -9%;
    right: auto;
    left: -13%;
    z-index: 1;
  }
}
#introduction .pickupEpisode li:nth-child(4) .episode_icon + .episode_icon {
  width: 5.715%;
  right: 0%;
  bottom: 14%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(4) .episode_icon + .episode_icon {
    width: 8.715%;
    right: -11%;
    bottom: 24%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(5) .episode_icon {
  width: 7.6199%;
  top: 10%;
  left: 1%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(5) .episode_icon {
    width: 15.1%;
    left: -15%;
    top: 10%;
  }
}
#introduction .pickupEpisode li:nth-child(5) .episode_icon + .episode_icon {
  width: 16.786%;
  left: 0%;
  bottom: 6%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(5) .episode_icon + .episode_icon {
    width: 20.715%;
    right: -13%;
    bottom: 19%;
    left: auto;
    z-index: 1;
  }
}
#introduction .pickupEpisode li:nth-child(6) .episode_icon {
  width: 10%;
  top: 5%;
  right: 8%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(6) .episode_icon {
    width: 16.9%;
    right: auto;
    top: 5%;
    left: -16%;
  }
}
#introduction .pickupEpisode li:nth-child(6) .episode_icon + .episode_icon {
  width: 6.548%;
  right: 0%;
  top: 35%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(6) .episode_icon + .episode_icon {
    width: 8.715%;
    right: -11%;
    top: 38%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(6) .episode_icon + .episode_icon + .episode_icon {
  width: 8.453%;
  right: 8%;
  bottom: 15%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(6) .episode_icon + .episode_icon + .episode_icon {
    width: 14.715%;
    bottom: 19%;
    left: -14%;
  }
}
#introduction .pickupEpisode li:nth-child(7) .episode_icon {
  width: 8.572%;
  top: 7%;
  left: 8%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(7) .episode_icon {
    width: 17.07%;
    right: -13%;
    top: 0;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(7) .episode_icon + .episode_icon {
  width: 16.429%;
  left: 0%;
  bottom: 14%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(7) .episode_icon + .episode_icon {
    width: 25.78%;
    right: auto;
    bottom: 2%;
    left: -12%;
    z-index: 1;
  }
}
#introduction .pickupEpisode li:nth-child(8) .episode_icon {
  width: 10%;
  top: -2%;
  right: 0%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(8) .episode_icon {
    width: 17.1%;
    right: -12%;
    top: -12%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(8) .episode_icon + .episode_icon {
  width: 5.1198%;
  right: 11%;
  top: auto;
  bottom: 29%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(8) .episode_icon + .episode_icon {
    width: 8.715%;
    right: auto;
    bottom: 34%;
    left: -11%;
  }
}
#introduction .pickupEpisode li:nth-child(9) .episode_icon {
  width: 10.572%;
  top: 8%;
  left: 6%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(9) .episode_icon {
    width: 18.15%;
    right: -13%;
    top: 6%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(9) .episode_icon + .episode_icon {
  width: 14.524%;
  left: -10%;
  top: 34%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(9) .episode_icon + .episode_icon {
    width: 16.9%;
    right: auto;
    top: 25%;
    left: -13%;
  }
}
#introduction .pickupEpisode li:nth-child(9) .episode_icon + .episode_icon + .episode_icon {
  width: 11.191%;
  left: 3%;
  bottom: 14%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(9) .episode_icon + .episode_icon + .episode_icon {
    width: 9.715%;
    right: -11%;
    bottom: 36%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(10) .episode_icon {
  width: 13.215%;
  top: 13%;
  right: 0%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(10) .episode_icon {
    width: 16.92%;
    right: -12%;
    top: 11%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(10) .episode_icon + .episode_icon {
  width: 7.024%;
  right: 8%;
  top: auto;
  bottom: 29%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(10) .episode_icon + .episode_icon {
    width: 11.715%;
    right: auto;
    bottom: 31%;
    left: -13%;
  }
}
#introduction .pickupEpisode li:nth-child(11) .episode_icon {
  width: 4.572%;
  top: 8%;
  left: 12%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(11) .episode_icon {
    width: 8.715%;
    right: -11%;
    top: -4%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(11) .episode_icon + .episode_icon {
  width: 8.81%;
  left: 0;
  bottom: 18%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(11) .episode_icon + .episode_icon {
    width: 17.1%;
    right: auto;
    bottom: 4%;
    left: -14%;
  }
}
#introduction .pickupEpisode li:nth-child(12) .episode_icon {
  width: 10.1199%;
  top: -3%;
  right: -3%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(12) .episode_icon {
    width: 17.715%;
    right: -12%;
    z-index: 1;
  }
}
#introduction .pickupEpisode li:nth-child(12) .episode_icon + .episode_icon {
  width: 8.572%;
  right: 7%;
  top: auto;
  bottom: 19%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(12) .episode_icon + .episode_icon {
    width: 18.715%;
    bottom: 25%;
    right: auto;
    left: -13%;
    z-index: -1;
  }
}
#introduction .pickupEpisode li:nth-child(13) .episode_icon {
  width: 11.72%;
  top: 13%;
  left: 5%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(13) .episode_icon {
    width: 16.715%;
    right: -13%;
    top: 10%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(13) .episode_icon + .episode_icon {
  width: 10.1199%;
  left: 1%;
  bottom: 29%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(13) .episode_icon + .episode_icon {
    width: 17.8%;
    right: auto;
    bottom: 17%;
    left: -15%;
  }
}
#introduction .pickupEpisode li:nth-child(14) .episode_icon {
  width: 12.143%;
  top: 10%;
  right: 0;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(14) .episode_icon {
    width: 14.95%;
    right: -13%;
    top: 7%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(14) .episode_icon + .episode_icon {
  width: 5.477%;
  right: 9%;
  top: auto;
  bottom: 28%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(14) .episode_icon + .episode_icon {
    width: 8.715%;
    right: auto;
    bottom: 32%;
    left: -11%;
  }
}
#introduction .pickupEpisode li:nth-child(15) .episode_icon {
  width: 6.548%;
  top: 10%;
  left: 10%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(15) .episode_icon {
    width: 8.715%;
    right: -11%;
    bottom: 24%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(15) .episode_icon + .episode_icon {
  width: 15.358%;
  left: 0%;
  bottom: 15%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(15) .episode_icon + .episode_icon {
    width: 8.715%;
    right: -11%;
    bottom: 24%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(16) .episode_icon {
  width: 10.477%;
  top: 10%;
  right: -3%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(16) .episode_icon {
    width: 18.15%;
    right: -12%;
    top: 3%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(16) .episode_icon + .episode_icon {
  width: 9.524%;
  right: 4%;
  top: auto;
  bottom: 21%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(16) .episode_icon + .episode_icon {
    width: 18.15%;
    right: auto;
    bottom: 22%;
    left: -13%;
  }
}
#introduction .pickupEpisode li:nth-child(17) .episode_icon {
  width: 8.691%;
  top: -2%;
  left: 8%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(17) .episode_icon {
    width: 16.9%;
    right: -11%;
    top: -16%;
    left: auto;
  }
}
#introduction .pickupEpisode li:nth-child(17) .episode_icon + .episode_icon {
  width: 6.548%;
  left: 0%;
  bottom: 27%;
  top: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(17) .episode_icon + .episode_icon {
    width: 11.715%;
    right: auto;
    bottom: 18%;
    left: -14%;
  }
}
#introduction .pickupEpisode li:nth-child(18) .episode_icon {
  width: 11.786%;
  top: 4%;
  right: -3%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(18) .episode_icon {
    width: 16.715%;
    right: -13%;
    top: -9%;
    left: auto;
    z-index: 1;
  }
}
#introduction .pickupEpisode li:nth-child(18) .episode_icon + .episode_icon {
  width: 8.929%;
  right: 8%;
  top: auto;
  bottom: 3%;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode li:nth-child(18) .episode_icon + .episode_icon {
    width: 18.715%;
    right: auto;
    bottom: 0%;
    left: -12%;
    z-index: -1;
  }
}
#introduction .pickupEpisode li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
#introduction .pickupEpisode .episode_content {
  background-color: #f0ede4;
  border-radius: 6px;
  padding: 23px 30px;
  width: 80%;
  max-width: 670px;
  margin-left: auto;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode .episode_content {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    padding: 2.6666666667vw 4.2666666667vw;
  }
}
#introduction .pickupEpisode .episode_content p {
  font-size: 2.2rem;
  line-height: 1.454;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-align: justify;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode .episode_content p {
    font-size: 3.7333333333vw;
    line-height: 1.5;
    letter-spacing: 0.06em;
  }
}
#introduction .pickupEpisode .episode_content .episode_name {
  text-align: right;
  color: #006ba1;
  margin-top: 5px;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode .episode_content .episode_name {
    margin-top: 2.6666666667vw;
  }
}
#introduction .pickupEpisode .episode_content .episode_img {
  width: 100%;
  max-width: 313px;
  margin: 15px auto 0;
}
@media only screen and (max-width: 849px) {
  #introduction .pickupEpisode .episode_content .episode_img {
    margin-top: 4vw;
    width: 53.3333333333vw;
    max-width: 100%;
  }
}
@media only screen and (min-width: 850px) {
  #introduction .pickupEpisode .episode_content.reverse {
    margin-right: auto;
    margin-left: 0;
  }
}

#overview {
  padding: 80px 0 100px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 849px) {
  #overview {
    padding: 16vw 0 13.3333333333vw;
  }
}
#overview .thanksApply {
  max-width: 770px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 849px) {
  #overview .thanksApply {
    width: 93%;
    letter-spacing: 0;
  }
}
#overview h2 {
  font-size: 3.7rem;
  font-weight: 500;
  text-align: center;
  padding: 37px 0;
  border-top: 2px solid #459095;
  border-bottom: 2px solid #459095;
}
#overview h2 img {
  max-width: 637px;
}
@media only screen and (max-width: 849px) {
  #overview h2 img {
    width: 73.0666666667vw;
  }
}
@media only screen and (max-width: 849px) {
  #overview h2 {
    font-size: 4.2666666667vw;
    padding: 4.8vw 0;
  }
}
#overview .apply_img {
  margin: 65px auto 0;
  width: 59.524%;
}
@media only screen and (max-width: 849px) {
  #overview .apply_img {
    margin-top: 12vw;
    width: 100%;
  }
}

.sec_popular {
  margin-top: 0;
}

.l-footer {
  padding-top: 0;
}/*# sourceMappingURL=style.css.map */