.keySection {
  position: relative;
  z-index: 0;
}
@media print, screen and (min-width: 768px) {
  .keySection {
    padding-top: 5.5555555556vw;
  }
}
@media screen and (max-width: 768px) {
  .keySection {
    padding-top: 4rem;
  }
}
.keySection::before {
  background: linear-gradient(90deg, #f0f0f0 10%, #fff 50%, #f0f0f0 90%) fixed;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
@media print, screen and (min-width: 768px) {
  .keySection::before {
    height: 5.5555555556vw;
  }
}
@media screen and (max-width: 768px) {
  .keySection::before {
    height: 4rem;
  }
}
.keySection__box {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  .keySection__box {
    min-height: 8.6111111111vw;
  }
}
@media screen and (max-width: 768px) {
  .keySection__box {
    min-height: 20rem;
  }
}
.keySection__en {
  color: #fff;
  font-family: "Lato", "Noto Sans JP", sans-serif;
  font-weight: 300;
  left: 50%;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 0;
}
@media print, screen and (min-width: 768px) {
  .keySection__en {
    font-size: 12.1527777778vw;
  }
}
@media screen and (max-width: 768px) {
  .keySection__en {
    font-size: 13.9rem;
  }
}
.keySection__ttl {
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
  line-height: 1;
  opacity: 0;
  position: relative;
  transition: opacity 2s 0.6s ease;
  z-index: 1;
}
.is-load .keySection__ttl {
  opacity: 1;
}
@media print, screen and (min-width: 768px) {
  .keySection__ttl {
    font-size: 1.8055555556vw;
  }
}
@media screen and (max-width: 768px) {
  .keySection__ttl {
    font-size: 2rem;
  }
}
.keySection--value .keySection__en {
  letter-spacing: 0.1em;
}
@media print, screen and (min-width: 768px) {
  .keySection--value .keySection__en {
    margin-top: -0.3472222222vw;
  }
}
@media screen and (max-width: 768px) {
  .keySection--value .keySection__en {
    font-size: 9.7rem;
    transform: translate(-50%, calc(-50% - 0.034em));
  }
}
@media screen and (max-width: 768px) {
  .keySection--value .keySection__box {
    min-height: 16.7rem;
  }
}
.keySection--merit:before {
  background: #fff;
}
@media print, screen and (min-width: 768px) {
  .keySection--merit .keySection__en {
    font-size: 10.2569444444vw;
    letter-spacing: 0;
    transform: translate(-50%, calc(-50% - 0.031em));
  }
}
@media screen and (max-width: 768px) {
  .keySection--merit .keySection__en {
    font-size: 6rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
}
@media print, screen and (min-width: 768px) {
  .keySection--merit .keySection__box {
    min-height: 8.6111111111vw;
  }
}
@media screen and (max-width: 768px) {
  .keySection--merit .keySection__box {
    min-height: 15.7rem;
  }
}
.rankingSect__head {
  text-align: center;
}
.rankingSect__head .heading {
  color: #231815;
  letter-spacing: 0.12em;
}
@media print, screen and (min-width: 768px) {
  .rankingSect__head .heading {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingSect__head .heading {
    font-size: 2rem;
  }
}
.rankingSect__head .txt {
  color: #555;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.08em;
}
@media print, screen and (min-width: 768px) {
  .rankingSect__head .txt {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingSect__head .txt {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-top: 2.4rem;
    text-align: left;
  }
}
@media print, screen and (min-width: 768px) {
  .rankingSect__cont {
    align-items: flex-start;
    display: flex;
    gap: 6.4rem;
    margin-top: 12rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingSect__cont {
    margin-top: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .rankingSect__chart {
    flex-shrink: 0;
    width: 60.2150537634%;
  }
}
@media screen and (max-width: 768px) {
  .rankingSect__chart {
    margin-bottom: 2.4rem;
  }
}
.rankingSect__note {
  color: #8a8a8a;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  line-height: 2;
  margin-top: 1rem;
  text-align: right;
}
.rankingSect__ranking {
  display: flex;
  flex-direction: column;
}
@media print, screen and (min-width: 768px) {
  .rankingSect__ranking {
    flex: 1;
    gap: 5.6rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingSect__ranking {
    gap: 2.4rem;
    margin-top: 4rem;
  }
}
.rankingSect .usableList--ranking {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media print, screen and (min-width: 768px) {
  .rankingSect .usableList--ranking {
    gap: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingSect .usableList--ranking {
    gap: 2rem;
  }
}
.resaleSect__head {
  text-align: center;
}
.resaleSect__head .heading {
  color: #231815;
  letter-spacing: 0.12em;
}
@media print, screen and (min-width: 768px) {
  .resaleSect__head .heading {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .resaleSect__head .heading {
    font-size: 2rem;
  }
}
.resaleSect__head .txt {
  color: #555;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.08em;
}
@media print, screen and (min-width: 768px) {
  .resaleSect__head .txt {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .resaleSect__head .txt {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-top: 2.4rem;
    text-align: left;
  }
}
@media print, screen and (min-width: 768px) {
  .resaleSect__cont {
    margin-top: 12rem;
  }
}
@media screen and (max-width: 768px) {
  .resaleSect__cont {
    margin-top: 6rem;
  }
}
.resaleSect__chart {
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .resaleSect__chart {
    max-width: 72.8rem;
  }
}
.resaleSect__notes {
  margin: 1rem auto 0;
}
@media print, screen and (min-width: 768px) {
  .resaleSect__notes {
    max-width: 72.8rem;
  }
}
.resaleSect__note {
  color: #8a8a8a;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  line-height: 2;
  text-align: left;
}
.lifeSect__head {
  text-align: center;
}
.lifeSect__head .heading {
  color: #231815;
  letter-spacing: 0.12em;
}
@media print, screen and (min-width: 768px) {
  .lifeSect__head .heading {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .lifeSect__head .heading {
    font-size: 2rem;
  }
}
.lifeSect__head .txt {
  color: #555;
  letter-spacing: 0.08em;
}
@media print, screen and (min-width: 768px) {
  .lifeSect__head .txt {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .lifeSect__head .txt {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-top: 2.4rem;
    text-align: left;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeSect__cont {
    margin-top: 12rem;
  }
}
@media screen and (max-width: 768px) {
  .lifeSect__cont {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .lifeMosaic__pc {
    display: none;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__pc {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__sp {
    display: none;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__band {
    align-items: flex-start;
    display: flex;
    gap: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__band--bottomSync {
    align-items: stretch;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__band--bottomSync .lifeMosaic__row--end {
    margin-top: auto;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__cell {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4rem;
  }
}
.lifeMosaic__row {
  display: flex;
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__row {
    gap: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .lifeMosaic__row {
    gap: 2rem;
  }
}
.lifeMosaic__row > .spotCard {
  flex: 1;
}
.lifeMosaic__row--end {
  justify-content: flex-end;
}
.lifeMosaic__row--end > .spotCard {
  flex: 0 0 calc((100% - 4rem) / 2);
  margin-left: auto;
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__cell--pull {
    margin-top: -2.4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .lifeMosaic__foot {
    display: flex;
    gap: 4rem;
    justify-content: center;
  }
  .lifeMosaic__foot > .spotCard {
    flex: 0 0 37.6rem;
  }
}
@media screen and (max-width: 768px) {
  .lifeMosaic__sp {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}
.rankingCard__thumb {
  position: relative;
}
@media screen and (max-width: 768px) {
  .rankingCard__thumb {
    padding: 0 1.2rem;
  }
}
.rankingCard .photo {
  overflow: hidden;
}
.rankingCard .photo__image {
  display: block;
  width: 100%;
}
.rankingCard__badge {
  align-items: center;
  aspect-ratio: 1;
  background: #00aec4;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: -1.6rem;
}
@media print, screen and (min-width: 768px) {
  .rankingCard__badge {
    right: -2.4rem;
    width: 8rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingCard__badge {
    right: -1.6rem;
    width: 6.4rem;
  }
}
.rankingCard__badgeLabel {
  font-family: "Lato", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
  line-height: 1;
}
@media print, screen and (min-width: 768px) {
  .rankingCard__badgeLabel {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingCard__badgeLabel {
    font-size: 1.1rem;
  }
}
.rankingCard__badgeNo {
  font-family: "Lato", "Noto Sans JP", sans-serif;
  line-height: 1;
  margin-top: 0.4rem;
}
@media print, screen and (min-width: 768px) {
  .rankingCard__badgeNo {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingCard__badgeNo {
    font-size: 1.2rem;
  }
}
.rankingCard__badgeNum {
  font-size: 1.6em;
}
.rankingCard__label {
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  .rankingCard__label {
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingCard__label {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 1.4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .rankingCard__labelSub {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingCard__labelSub {
    font-size: 1.3rem;
  }
}
@media print, screen and (min-width: 768px) {
  .rankingCard--no1 .rankingCard__badge {
    width: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingCard--no1 .rankingCard__badge {
    top: -2.4rem;
    width: 8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .rankingCard--no1 .rankingCard__badgeLabel {
    font-size: 1.3rem;
  }
}
@media print, screen and (min-width: 768px) {
  .rankingCard--no1 .rankingCard__badgeNo {
    font-size: 1.8rem;
  }
}
.spotCard__thumb {
  position: relative;
}
.spotCard__thumb .photo {
  aspect-ratio: 272/181;
  overflow: hidden;
}
.spotCard__thumb .photo__image {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.spotCard__badge {
  align-items: baseline;
  bottom: 1rem;
  color: #fff;
  display: flex;
  position: absolute;
  right: 1rem;
  text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 1rem, rgba(0, 0, 0, 0.7) 1px 1px 1rem, rgba(0, 0, 0, 0.7) 1px 1px 1rem, rgba(0, 0, 0, 0.7) 1px 1px 1rem, rgba(0, 0, 0, 0.7) 1px 1px 1rem, rgba(0, 0, 0, 0.7) 1px 1px 1rem;
}
.spotCard__badgeNum {
  font-family: "Lato", "Noto Sans JP", sans-serif;
  line-height: 1;
}
@media print, screen and (min-width: 768px) {
  .spotCard__badgeNum {
    font-size: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .spotCard__badgeNum {
    font-size: 4.4rem;
  }
}
.spotCard__badgeUnit {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
}
@media print, screen and (min-width: 768px) {
  .spotCard__badgeUnit {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .spotCard__badgeUnit {
    font-size: 2rem;
  }
}
.spotCard__label {
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.08em;
  text-align: left;
}
@media print, screen and (min-width: 768px) {
  .spotCard__label {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .spotCard__label {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-top: 1.2rem;
  }
}
@media print, screen and (min-width: 768px) {
  .spotCard--gym .spotCard__label {
    letter-spacing: 0;
  }
}
.currentPage--value {
  background: transparent;
}
.value-panel {
  position: relative;
  z-index: 0;
}
@media print, screen and (min-width: 768px) {
  .value-panel {
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .value-panel {
    margin-bottom: 2rem;
  }
}
.value-panel::before, .value-panel::after {
  background: linear-gradient(90deg, #f0f0f0 10%, #fff 50%, #f0f0f0 90%) fixed;
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
}
@media print, screen and (min-width: 768px) {
  .value-panel::before, .value-panel::after {
    width: calc(50% - 120rem / 2);
  }
}
@media screen and (max-width: 768px) {
  .value-panel::before, .value-panel::after {
    width: 2.1rem;
  }
}
.value-panel::before {
  left: 0;
}
.value-panel::after {
  right: 0;
}
.value-ranking,
.value-resale,
.value-life {
  position: relative;
  z-index: 0;
}
.value-ranking::before,
.value-resale::before,
.value-life::before {
  background: linear-gradient(90deg, #f0f0f0 10%, #fff 50%, #f0f0f0 90%) fixed;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-mask-composite: xor;
          mask-composite: xor;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
          mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  position: absolute;
  z-index: -1;
}
@media print, screen and (min-width: 768px) {
  .value-ranking {
    padding-top: 14rem;
  }
}
@media screen and (max-width: 768px) {
  .value-ranking {
    padding-top: 8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .value-ranking::before {
    -webkit-mask-position: 0 0, 0 19rem;
            mask-position: 0 0, 0 19rem;
    -webkit-mask-size: 100% 100%, 100% 0.8rem;
            mask-size: 100% 100%, 100% 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .value-ranking::before {
    -webkit-mask-position: 0 0, 0 18rem;
            mask-position: 0 0, 0 18rem;
    -webkit-mask-size: 100% 100%, 100% 0.8rem;
            mask-size: 100% 100%, 100% 0.8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .value-resale {
    padding-bottom: 0;
    padding-top: 20rem;
  }
}
@media screen and (max-width: 768px) {
  .value-resale {
    padding-bottom: 0;
    padding-top: 8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .value-resale::before {
    -webkit-mask-position: 0 0, 0 25rem;
            mask-position: 0 0, 0 25rem;
    -webkit-mask-size: 100% 100%, 100% 0.8rem;
            mask-size: 100% 100%, 100% 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .value-resale::before {
    -webkit-mask-position: 0 0, 0 14.8rem;
            mask-position: 0 0, 0 14.8rem;
    -webkit-mask-size: 100% 100%, 100% 0.8rem;
            mask-size: 100% 100%, 100% 0.8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .value-life {
    padding-bottom: 16rem;
    padding-top: 20rem;
  }
}
@media screen and (max-width: 768px) {
  .value-life {
    padding-bottom: 8.3rem;
    padding-top: 8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .value-life::before {
    -webkit-mask-position: 0 0, 0 24.3rem;
            mask-position: 0 0, 0 24.3rem;
    -webkit-mask-size: 100% 100%, 100% 0.8rem;
            mask-size: 100% 100%, 100% 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .value-life::before {
    -webkit-mask-position: 0 0, 0 14.8rem;
            mask-position: 0 0, 0 14.8rem;
    -webkit-mask-size: 100% 100%, 100% 0.8rem;
            mask-size: 100% 100%, 100% 0.8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .rankingSect__head .heading,
  .resaleSect__head .heading,
  .lifeSect__head .heading {
    padding-bottom: 3.2rem;
  }
}
@media screen and (max-width: 768px) {
  .rankingSect__head .heading,
  .resaleSect__head .heading,
  .lifeSect__head .heading {
    padding-bottom: 2.4rem;
  }
}
/*# sourceMappingURL=style.css.map */