@charset "utf-8";
/* ============================
intro
===============================*/
.section__intro {
  margin:  150px var(--contentPadding-sp) 0;
}

.section__intro__wrap {
  padding: 0 2.33%;
  align-self: stretch;
  text-align: center;
}

.section__intro-catch {
  font-size: 2.0rem;
}

.section__intro-text {
  margin-top: 56px;
  line-height: 2;
}

/* intro pc */
@media screen and (min-width: 769px) {
  .section__intro {
    margin:  150px auto 0;
  }
}
@media screen and (min-width: 1025px) {
  .section__intro {
    margin: 250px 29.1% 0;
  }

  .section__intro__wrap {
    padding: 0;
  }
}/* pc 1025px */

/* ============================
footprints--first
===============================*/
.footprints--first {
  position: absolute;
  right: 0;
}

.footprints--first .footprints--squirrel {
  width: 300px;
  height: 400px;
}

.squirrelFoot--first {
  opacity: 0;
}

/* footprints--first pc */
@media screen and (min-width: 1025px) {
  .footprints--first .footprints--squirrel {
    width: 600px;
    height: 800px;
  }
}/* pc 1025px */

/* ============================
sampleSchedule
===============================*/
.section__sampleSchedule {
  margin: 150px var(--contentPadding-sp) 0;
}

.sectionTitle__note {
  margin: 16px 4.66% 0;
  font-size: 1.4rem;
  text-align: left;
  color: #000;
}

.sampleShedule--day1 {
  margin: 48px 0;
}

.day__tag {
  margin-left: 6.99%;
  padding: 33px 17px 31px 15px;
  border: 1px solid var(--primary-black, #1C1C1C);
  border-radius: 50px;
  display: inline-block;
}

.day__tag p {
  line-height: 1;
}

.sampleSchedule__desc__wrap.side-by-side {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8.13%;
}

.side-by-side .sampleSchedule__desc__title {
  margin-top: 0;
}

.time__tag,
.sampleSchedule__desc__title {
  font-size: 1.8rem;
}

.sampleSchedule__desc__wrap {
  margin: 48px 2.33% 0 7%;
}

.sampleSchedule__desc__title {
  margin-top: 32px;
  font-size: 1.8rem;
}

.sampleSchedule__desc__text {
  margin-top: 24px;
}

.sampleSchedule__img-wrap {
  margin-top: 24px;
}

/* sampleSchedule pc */
@media screen and (min-width: 1025px) {
  .section__sampleSchedule {
    margin: 250px 0;
  }

  .sectionTitle__note {
    margin: 16px 30.5% 0;
  }

  .sampleShedule--day1 {
    margin: 96px 0;
  }

  .side-by-side--pc {
    display: flex;
  }

  .day__tag {
    margin-left: var(--contentPadding-pc);
    padding: 45px 30px;
    border-radius: 60px;
  }

  .day__tag p {
    font-size: 2.0rem;
    line-height: 1.5;
  }

  .sampleSchedule__desc__wrap.side-by-side {
    margin: 0 0 0 2.8%;
    gap: 6.99%;
  }

  .time__tag,
  .sampleSchedule__desc__title {
    font-size: 2.0rem;
    white-space: nowrap;
  }

  .sampleSchedule__wrap {
    margin: 72px 7.9% 0 17.4%;
    display: grid;
    grid-template-columns: 1fr 1.89fr;
    align-items: center;
    gap: 12.8%;
  }

  .sampleSchedule__wrap.reverse-order {
    margin: 72px 17.4% 0 7.9%;
    grid-template-columns: 1fr 0.52fr;
  }

  .reverse-order .sampleSchedule__desc__wrap {
    order: 2;
  }

  .reverse-order .sampleSchedule__img-wrap {
    order: 1;
  }

  .sampleSchedule__desc__wrap {
    margin: 0;
  }

  .sampleSchedule__desc__title {
    margin-top: 48px;
    font-size: 2.0rem;
  }

  .sampleSchedule__desc__text {
    margin-top: 32px;
  }

  .sampleSchedule__img-wrap {
    width: 100%;
    height: auto;
    margin: 0;
  }
}/* pc 1025px */

/* ============================
footprints--second
===============================*/
.footprints--second {
  position: absolute;
  right: 0;
}

.footprints--second .footprints--squirrel {
  width: 300px;
  height: 400px;
}

.squirrelFoot--second {
  opacity: 0;
}

/* footprints--second pc */
@media screen and (min-width: 1025px) {
  .footprints--second {
    position: absolute;
    right: 8%;
    transform: translateY(-30%);
  }

  .footprints--second .footprints--squirrel {
    width: 600px;
    height: 800px;
  }
}/* pc 1025px */

/* ============================
neighborhood
===============================*/
.neighborhood__img__wrap {
  margin-top: 48px; 
}

.neighborhood__list-wrap {
  margin: 48px var(--contentPadding-sp);
}

.neighborhood__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.num__tag {
  width: 25px;
  height: 25px;
  text-align: center;
  color: var(--primary-whiteLow, #F1F1F1);
  border-radius: 0 50px 50px 50px;
  background-color: var(--primary-black, #1C1C1C);
  display:inline-block;
}

.neighborhood__item-name {
  margin-left: 16px;
}

.siteLink {
  margin-left: 16px;
  font-size: 1.2rem;
  color: var(--primary-gray, #7F7F7F);
}

.siteLink__icon {
  margin-left: 4px;
  vertical-align: middle;
}

/* neighborhood pc */

@media screen and (min-width: 1025px) {
  .section__neighborhood {
    position: relative;
  }

  .neighborhood__img__wrap {
    margin: 96px var(--contentPadding-pc) 0 0; 
    z-index: 1;
  }

  .neighborhood__img{
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  .neighborhood__list-wrap {
    margin: 32px auto 0;
    z-index: 100;
  }
  
  .neighborhood__list {
    width: auto;
    height: 223px;
    gap: 8px 32px;
    flex-wrap: wrap;
  }

  .neighborhood__item {
    width: auto;
    height: auto;
  }
}/* pc 1025px */

@media screen and (min-width: 1300px) {
  .neighborhood__list-wrap {
    position: absolute;
    bottom: 0;
    left: 43.5%;
  }
}

/* ============================
plan
===============================*/
.section__plan {
  margin-bottom: 150px;
}

.plan__wrap {
  margin: 0 var(--contentPadding-sp);
}

.plan__group {
  margin-top: 48px;
}

.fee__group,
.capacity__group,
.checkInOut__group {
  margin-top: 56px;
}

.info__title {
  font-size: 2.0rem;
}

.info__item {
  margin: 32px 2.3% 0;
}

.plan__list {
  margin: 24px 0 0 2.3%;
  list-style: decimal;
  list-style-position: inside;
}

.plan__item {
  margin-top: 16px;
  font-size: 1.8rem;
}

.accommodationFee__wrap {
  margin: 24px 0 0 2.3%;
}

.accommodationFee__group {
  margin: 8px 0 0 2.3%;
  display: flex;
  gap: 10%;
}

.accommodationFee__title,
.accommodationFee__category {
  font-size: 1.8rem;
}

.accommodationFee__price {
  font-size: 1.8rem;
}

.mealCharges__table-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mealCharges__table {
  margin-top: 8px;
  border-collapse: collapse;
  min-width: 480px;
}

.mealCharges__table th,
.mealCharges__table td {
  height: 50px;
  white-space: nowrap;
  vertical-align: middle;
}

.table__header {
  text-align: center;
  border: 1px solid #B4B1A8;
  color: var(--primary-whiteLow, #F1F1F1);
  background-color: #2C3E50;
}

.table__planName {
  width: 280px;
  padding-left: 16px;
  background-color: #FFF;
}

.table__data {
  width: 100px;
  font-size: 1.4rem;
  text-align: center;
  background-color: #FFF;
}

.info__item.example__wrap {
  margin: 72px 0 0 2.3%;
}

.info__desc-text {
  margin-top: 8px;
}

.example-detail__wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.example-detail {
  margin-left: 2.4%;
}

.example-detail:first-of-type {
  margin-top: 32px;
}

.example-detail__text-wrap {
  margin: 24px 0 0 2.4%;
}

.example-detail__text {
  margin-top: 8px;
}

.capacity__wrap {
  font-size: 1.8rem;
  display: flex;
  gap: 16px;
}

.capacity__note-wrap {
  margin: 24px 0 0 2.4%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkIn__wrap,
.checkOut__wrap {
  font-size: 1.8rem;
  display: flex;
  gap: 16px;
}

.font--large {
  font-size: 1.8rem;
}

.checkOut__wrap {
  margin-top: 24px;
}

.checkIn__note-wrap {
  margin: 24px 0 0 2.4%;
}

/* plan pc */
@media screen and (min-width: 769px) {
  .plan__wrap {
    margin: 0 var(--contentPadding-pc);
  }

  .mealCharges__table {
    min-width: 712px;
  }

}
@media screen and (min-width: 1025px) {
  .section__plan {
    margin-bottom: 200px;
  }

  .plan__wrap {
    margin: 0 var(--contentPadding-pc);
  }

  .plan__group {
    margin: 96px 4.14% 0;
  }

  .fee__group,
  .capacity__group,
  .checkInOut__group {
    margin: 72px 4.14% 0;
  }

  .info__title {
    font-size: 2.4rem;
  }

  .info__item {
    margin: 40px 0 0 3%;
  }

  .plan__list {
    margin: 40px 0 0 3.1%;
  }

  .plan__item {
    font-size: 2.0rem;
  }

  .accommodationFee__wrap {
    margin: 40px 0 0 3.1%;
    display: flex;
    align-items: flex-end;
    gap: 5.4%;
  }

  .accommodationFee__group {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    align-items: flex-end;
    gap: 15.3%;
  }

  .accommodationFee__title,
  .accommodationFee__category {
    font-size: 2.0rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .accommodationFee__price {
    font-size: 2.0rem;
  }

  .mealCharges__table__title {
    margin-left: 3.1%;
    font-size: 2.0rem;
  }

  .mealCharges__table-box {
    margin-left: 3.1%;
  }

  .mealCharges__table {
    min-width: 712px;
  }

  .mealCharges__table th,
  .mealCharges__table td {
    height: 68px;
  }

  .table__header {
    font-size: 2.0rem;
  }

  .table__planName {
    width: 352px;
    font-size: 1.8rem;
  }

  .table__data {
    width: 180px;
    font-size: 1.8rem;
  }

  .info__item.example__wrap {
    margin: 80px 0 0 3%;
  }

  .info__dess-title {
    display: inline;
  }
  
  .info__desc-text {
    display: inline;
    margin-top: 0;
  }

  .example-detail {
    margin-left: 6.2%;
    font-size: 2.0rem;
  }

  .example-detail__text-wrap {
    margin: 24px 0 0 7.44%;
  }

  .example-detail__text {
    margin-top: 24px;
  }

  .capacity__wrap {
    font-size: 2.0rem;
    gap: 40px;
  }

  .capacity__note-wrap {
    margin: 32px 0 0 3.1%;
    gap: 16px;
  }

  .checkIn__wrap,
  .checkOut__wrap {
    font-size: 2.0rem;
    gap: 40px;
  }

  .font--large {
    font-size: 2.0rem;
  }

  .checkOut__wrap {
    margin-top: 40px;
  }

  .checkIn__note-wrap {
    margin: 24px 0 0 3.1%;
  }
}/* pc 1025px */