:root {
  --dvw: calc(100dvw / 1300);
  --fvw: calc(100dvw / 1300);
}
@media (min-width: 1300px) {
  :root {
    --dvw: 1px;
    --fvw: calc(100dvw / 1300);
  }
}
@media (max-width: 1024px) {
  :root {
    --dvw: calc(100dvw / 768);
    --fvw: calc(100dvw / 768);
  }
}
@media (max-width: 575px) {
  :root {
    --dvw: calc(100dvw / 375);
    --fvw: calc(100dvw / 375);
  }
}

.town {
  position: relative;
}

.town .back-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background-image: url("/assets/images/charm/back-pattern-2.webp");
  background-repeat: no-repeat;
  background-size: auto 120%;
  background-position: center top;
}

@media (max-width: 820px) {
  .town .back-pattern {
    height: 97%;
    background-size: auto 100%;
    background-position: left 30% top 0;
  }
}
.kv {
  position: relative;
  background-color: #d8f1fc;
}

.kv__img {
  width: 100%;
  position: relative;
  z-index: 2;
}

.kv__title-en {
  position: absolute;
  z-index: 2;
  top: calc(var(--fvw) * 57);
  left: calc(var(--fvw) * 718);
  font-family: "Saira", sans-serif;
  font-size: calc(var(--fvw) * 97);
  line-height: calc(var(--fvw) * 100);
  letter-spacing: calc(var(--fvw) * -3);
  color: #085cb9;
}
@media (max-width: 1024px) {
  .kv__title-en {
    top: calc(var(--fvw) * 34);
    left: calc(var(--fvw) * 424);
    font-size: calc(var(--fvw) * 57);
    line-height: calc(var(--fvw) * 59);
    letter-spacing: calc(var(--fvw) * -2);
  }
}
@media (max-width: 575px) {
  .kv__title-en {
    top: calc(var(--fvw) * 60);
    left: calc(var(--fvw) * 14);
    font-size: calc(var(--fvw) * 46);
    line-height: calc(var(--fvw) * 29);
    letter-spacing: calc(var(--fvw) * -1);
  }
}

@media screen and (max-width: 820px) {
  .kv__title-en {
    display: none;
  }
  .kv__title-ja {
    display: none;
  }
}
.kv__title-ja {
  position: absolute;
  z-index: 2;
  top: calc(var(--fvw) * 286);
  left: calc(var(--fvw) * 747);
  font-size: calc(var(--fvw) * 27);
  color: #ffffff;
  letter-spacing: calc(var(--fvw) * 4);
  line-height: 1;
}
@media (max-width: 1024px) {
  .kv__title-ja {
    top: calc(var(--fvw) * 168);
    left: calc(var(--fvw) * 441);
    font-size: calc(var(--fvw) * 16);
    letter-spacing: calc(var(--fvw) * 2);
  }
}
@media (max-width: 575px) {
  .kv__title-ja {
    top: calc(var(--fvw) * 105);
    left: calc(var(--fvw) * 16);
    font-size: calc(var(--fvw) * 14);
    letter-spacing: calc(var(--fvw) * 1);
  }
}

.town {
  position: relative;
  padding-top: calc(var(--dvw) * 87);
  padding-bottom: calc(var(--dvw) * 150);
}
@media (max-width: 1024px) {
  .town {
    padding-top: calc(var(--dvw) * 53);
    padding-bottom: calc(var(--dvw) * 89);
  }
}
@media (max-width: 575px) {
  .town {
    padding-top: calc(var(--dvw) * 29);
    padding-bottom: calc(var(--dvw) * 43);
  }
}

.town__title {
  font-size: clamp(1.375rem, 1.0456rem + 1.4054vw, 2.1875rem);
  font-weight: 400;
  color: #085cb9;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}

.town__description {
  font-size: clamp(0.875rem, 0.8243rem + 0.2162vw, 1rem);
  max-width: 751px;
  margin: clamp(1rem, 0.8733rem + 0.5405vw, 1.3125rem) auto clamp(1.25rem, 0.9713rem + 1.1892vw, 1.9375rem);
  line-height: 1.62;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}

.town__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc(var(--dvw) * 40) 1fr calc(var(--dvw) * 40) 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--dvw) * 40);
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .town__wrapper {
    -ms-grid-columns: 1fr calc(var(--dvw) * 15) 1fr calc(var(--dvw) * 15) 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--dvw) * 15);
  }
}
@media (max-width: 575px) {
  .town__wrapper {
    -ms-grid-columns: 1fr calc(var(--dvw) * 12) 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--dvw) * 24) calc(var(--dvw) * 12);
  }
}

.town__item {
  background-color: #fff;
  min-width: 0;
}

.town__item-img {
  width: 100%;
}

.town__item-content {
  padding: calc(var(--dvw) * 12) calc(var(--dvw) * 20) calc(var(--dvw) * 39);
}
@media (max-width: 1024px) {
  .town__item-content {
    padding: calc(var(--dvw) * 7) calc(var(--dvw) * 12) calc(var(--dvw) * 23);
  }
}
@media (max-width: 575px) {
  .town__item-content {
    padding: calc(var(--dvw) * 7) calc(var(--dvw) * 12) calc(var(--dvw) * 12);
  }
}

.town__item-title {
  font-size: clamp(1.125rem, 1.0236rem + 0.4324vw, 1.375rem);
  font-weight: 400;
  color: #085cb9;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  word-break: break-all;
}

.town__item-time {
  font-size: clamp(0.9375rem, 0.8615rem + 0.3243vw, 1.125rem);
  margin-top: calc(var(--dvw) * 8);
  letter-spacing: 0.03em;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .town__item-time {
    margin-top: calc(var(--dvw) * 6);
  }
}
@media (max-width: 575px) {
  .town__item-time {
    margin-top: calc(var(--dvw) * 6);
  }
}

.town__item-description {
  font-size: clamp(0.875rem, 0.8243rem + 0.2162vw, 1rem);
  margin-top: calc(var(--dvw) * 12);
  line-height: 1.62;
  letter-spacing: 0.02em;
}
@media (max-width: 1024px) {
  .town__item-description {
    margin-top: calc(var(--dvw) * 7);
  }
}
@media (max-width: 575px) {
  .town__item-description {
    margin-top: calc(var(--dvw) * 7);
  }
}

.decoration {
  position: absolute;
}

.decoration.--01 {
  width: calc(var(--dvw) * 354);
  top: calc(var(--dvw) * 498);
  left: calc(var(--dvw) * -271);
}
@media (max-width: 1024px) {
  .decoration.--01 {
    width: calc(var(--dvw) * 209);
    top: calc(var(--dvw) * 294);
    left: calc(var(--dvw) * -160);
  }
}
@media (max-width: 575px) {
  .decoration.--01 {
    width: calc(var(--dvw) * 102);
    top: calc(var(--dvw) * 143);
    left: calc(var(--dvw) * -78);
  }
}

.decoration.--02 {
  width: calc(var(--dvw) * 258);
  top: calc(var(--dvw) * 424);
  right: calc(var(--dvw) * -193);
}
@media (max-width: 1024px) {
  .decoration.--02 {
    width: calc(var(--dvw) * 152);
    top: calc(var(--dvw) * 250);
    right: calc(var(--dvw) * -114);
  }
}
@media (max-width: 575px) {
  .decoration.--02 {
    width: calc(var(--dvw) * 74);
    top: calc(var(--dvw) * 122);
    right: calc(var(--dvw) * -56);
  }
}

.decoration.--03 {
  width: calc(var(--dvw) * 463);
  top: 0;
  left: calc(var(--dvw) * -212);
}
@media (max-width: 1024px) {
  .decoration.--03 {
    width: calc(var(--dvw) * 274);
    left: calc(var(--dvw) * -125);
  }
}
@media (max-width: 575px) {
  .decoration.--03 {
    width: calc(var(--dvw) * 133);
    left: calc(var(--dvw) * -61);
  }
}

.decoration.--04 {
  width: calc(var(--dvw) * 668);
  top: calc(var(--dvw) * -110);
  right: calc(var(--dvw) * -150);
}
@media (max-width: 1024px) {
  .decoration.--04 {
    width: calc(var(--dvw) * 395);
    top: calc(var(--dvw) * -65);
    right: calc(var(--dvw) * -89);
  }
}
@media (max-width: 575px) {
  .decoration.--04 {
    width: calc(var(--dvw) * 192);
    top: calc(var(--dvw) * -32);
    right: calc(var(--dvw) * -43);
  }
}

.decoration.--05 {
  width: calc(var(--dvw) * 246);
  bottom: calc(var(--dvw) * -164);
  left: calc(var(--dvw) * -167);
}
@media (max-width: 1024px) {
  .decoration.--05 {
    width: calc(var(--dvw) * 145);
    bottom: calc(var(--dvw) * -97);
    left: calc(var(--dvw) * -99);
  }
}
@media (max-width: 575px) {
  .decoration.--05 {
    width: calc(var(--dvw) * 71);
    bottom: calc(var(--dvw) * -47);
    left: calc(var(--dvw) * -48);
  }
}

.decoration.--06 {
  width: calc(var(--dvw) * 576);
  bottom: calc(var(--dvw) * -483);
  left: calc(var(--dvw) * 276);
}
@media (max-width: 1024px) {
  .decoration.--06 {
    width: calc(var(--dvw) * 340);
    bottom: calc(var(--dvw) * -285);
    left: calc(var(--dvw) * 163);
  }
}
@media (max-width: 575px) {
  .decoration.--06 {
    width: calc(var(--dvw) * 166);
    bottom: calc(var(--dvw) * -139);
    left: calc(var(--dvw) * 79);
  }
}

.decoration.--07 {
  width: calc(var(--dvw) * 793);
  bottom: calc(var(--dvw) * -352);
  right: calc(var(--dvw) * -321);
}
@media (max-width: 1024px) {
  .decoration.--07 {
    width: calc(var(--dvw) * 468);
    bottom: calc(var(--dvw) * -208);
    right: calc(var(--dvw) * -190);
  }
}
@media (max-width: 575px) {
  .decoration.--07 {
    width: calc(var(--dvw) * 228);
    bottom: calc(var(--dvw) * -101);
    right: calc(var(--dvw) * -92);
  }
}
/*# sourceMappingURL=charm.css.map */