/* ============================================================== top */

/* ============================================================== topKv */
.topKv {
  height: 100vh;
  padding-bottom: 2.196193265vw;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .topKv {
    height: 100svh;
    padding-bottom: 2.6666666667vw;
  }
}

/* --------------------------------------- topKv video */
.topKv__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;

  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
  }

  & video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* --------------------------------------- kvContents */
.kvContents {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* --------------------------------------- topKv copy */
.topKv__copy {
  margin-bottom: 25px;
  padding-left: 20px;
  height: 1.5em;
}

.topKv__copy--text {
  font-size: 25px;
  color: #fff;
  line-height: 1.5;
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .topKv__copy {
    margin-bottom: 15px;
    padding-left: 15px;
  }

  .topKv__copy--text {
    font-size: 14px;
  }
}

/* --------------------------------------- topKv news */
.topKv__news {
  position: absolute;
  right: auto;
  left: 20px;
  top: 5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: 30px;
  mask-image: linear-gradient(to right, #000, #000 80%, transparent 95%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: left top;
  -webkit-mask-image: linear-gradient(to right, #000, #000 80%, transparent 95%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: left top;
}

/* ------------------- topKv news title */
.topKv__news--title {
  align-self: flex-start;
  position: relative;
  font-size: 15px;
  color: #fff;
  line-height: 1;
  padding-right: 13px;
  height: 30px;
  padding-top: 7px;

  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

/* ------------------- topKv news inner */
.topKv__news--inner {
  position: relative;
  max-width: 345px;
  padding-left: 15px;
  overflow: hidden;
}

/* ------------------- topKv news inner list */
.topKv__news--inner--list {
  font-size: 0;
  white-space: nowrap;
}

/* ------------------- topKv news inner target */
.topKv__news--inner--target {
  display: block;
}

/* ------------------- topKv news date text */
.topKv__news--date,
.topKv__news--text {
  display: inline-block;
  font-size: 15px;
  color: #fff;
  text-align: left;
}

.topKv__news--date {
  margin-right: 0.5em;
}

@media only screen and (max-width: 767px) {
  .topKv__news {
    position: absolute;
    right: auto;
    left: 15px;
    top: 10px;
    display: block;
    height: auto;
  }

  .topKv__news--title {
    font-size: 12px;
    padding-right: 0;
    margin-bottom: 5px;
    height: auto;
    padding-top: 0;
  }

  .topKv__news--inner {
    max-width: 235px;
    padding-left: 0;
    height: 20px;
  }

  .topKv__news--date,
  .topKv__news--text {
    font-size: 11px;
  }

  .topKv__news--date {
    margin-right: 1em;
  }
}

/* ============================================================== kv dateBlock weatherBlock */
.kv__dateBlock, .kv__weatherBlock {
  position: absolute;
  top: 75px;
  z-index: 2;
  opacity: 0;
}

/* --------------------------------------- kv dateBlock */
.kv__dateBlock {
  left: calc(20px + 1.4641288433vw);
}

.kv__dateBlock--date, .kv__dateBlock--time {
  line-height: 1;
  color: #fff;
}

.kv__dateBlock--date {
  font-size: 17px;
  margin-bottom: 8px;
}

.kv__dateBlock--time {
  font-size: 24px;
}

/* --------------------------------------- kv weatherBlock */
.kv__weatherBlock {
  right: calc(20px + 1.4641288433vw);
}

.kv__weatherBlock--temp {
  display: flex;
}

/* ------------------- weatherIcon */
.weatherIcon {
  align-self: center;
  position: relative;
  width: 20px;

  & > span {
    display: block;
    padding-top: 100%;
  }

  &.sun > span {
    background-image: url(/_assets/img/weather__icon--sun.svg);
  }

  &.cloud > span {
    background-image: url(/_assets/img/weather__icon--cloud.svg);
  }

  &.rain > span {
    background-image: url(/_assets/img/weather__icon--rain.svg);
  }

  &.snow > span {
    background-image: url(/_assets/img/weather__icon--snow.svg);
  }

  &.suncloud > span {
    background-image: url(/_assets/img/weather__icon--suncloud.svg);
  }
}

/* ------------------- kv weatherBlock temp */
.kv__weatherBlock--temp--text {
  position: relative;
  padding-left: 10px;
  padding-right: 15px;
  margin-left: 8px;

  &::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    width: 1px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.3);
  }

  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    width: 13px;
    left: auto;
    right: 0;
    background-image: url(/_assets/img/weatherBlock--temp.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: right bottom;
  }

  & > p {
    font-size: 26px;
    line-height: 1;
    color: #fff;
  }
}

/* ------------------- kv weatherBlock place */
.kv__weatherBlock--place {
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #fff;
  margin-top: 8px;
}

@media only screen and (max-width: 767px) {
  .kv__dateBlock, .kv__weatherBlock {
    top: 60px;
    left: auto;
    right: calc(15px + 2.6666666667vw);
  }

  .kv__dateBlock--date {
    font-size: 13px;
    font-size: 3.4666666667vw;
    margin-bottom: 1.3333333333vw;
  }

  .kv__dateBlock--time {
    font-size: 17px;
    font-size: 4.5333333333vw;
  }

  .kv__weatherBlock {
    top: auto;
    bottom: calc(23vw + 12px);
  }

  .pages .kv__weatherBlock {
    bottom: auto;
    top: calc(45px + 56vw);
  }

  .weatherIcon {
    width: 4.8vw;
  }

  .kv__weatherBlock--temp--text {
    padding-left: 2.1333333333vw;
    padding-right: 3.2vw;
    margin-left: 2.1333333333vw;

    &::before {
      height: 4vw;
    }

    &::after {
      width: 2.4vw;
      top: 0;
    }

    & > p {
      font-size: 19px;
      font-size: 5.0666666667vw;
    }
  }

  .kv__weatherBlock--place {
    font-size: 10px;
    font-size: 2.6666666667vw;
    margin-top: 2.1333333333vw;
  }
}

/* ============================================================== topContents */
.topContents {
  position: relative;
  color: #fff;
}

.topContents__inner {
  position: relative;
  z-index: 2;
  padding-top: 4.0263543192vw;

  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00a19a;
    z-index: 1;
    pointer-events: none;
  }
}

.topArticle {
  position: relative;
  z-index: 2;
}

@media only screen and (max-width: 767px) {
  .topContents__inner {
    padding-top: 9.3333333333vw;
  }
}

/* ============================================================== topArticle__title */
.topArticle__title {
  text-align: center;
  margin-bottom: 2.5622254758vw;

  & img {
    height: 6.5153733529vw;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.4641288433vw;
  }

  & .fontW--b {
    display: block;
    font-size: 19px;
    font-size: 1.3909224012vw;
    color: #f2f1e7;
    text-align: center;
    line-height: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    white-space: nowrap;
  }
}

.topArticle__title--inner {
  position: relative;
  display: inline-block;
  padding-bottom: 1.4641288433vw;
}

.topArticle__title--btn {
  position: absolute;
  width: 3.2942898975vw;
  height: 3.2942898975vw;
  left: calc(100% + 1.5vw);
  top: 1.4641288433vw;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: #f2f1e7;
  transition: background-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), border-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  background-color: #f2f1e7;

  & .arrowIcon {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (max-width: 767px) {
  .topArticle__title {
    text-align: center;
    margin-bottom: 8vw;

    & img {
      height: 10.6666666667vw;
      margin-bottom: 4vw;
    }

    & .fontW--b {
      font-size: 13px;
      font-size: 3.4666666667vw;
    }
  }

  .topArticle__title--inner {
    padding-bottom: 4vw;
  }

  .topArticle__title--btn {
    width: 6.1333333333vw;
    height: 6.1333333333vw;
    left: calc(100% + 1.4vw);
    top: 2.1333333333vw;
    border-width: 1px;

    & .arrowIcon__default {
      width: 2.1333333333vw;
      height: 2.1333333333vw;
    }
  }
}

/* ============================================================== topAbout */
.topAbout {
  position: relative;
  padding-top: 58.7115666179%;
  margin-bottom: 1.8301610542vw;
  overflow: hidden;
}

/* --------------------------------------- topAbout inner */
.topAbout__inner {
  position: absolute;
  width: 24.8901903367%;
  left: 5.1244509517%;
  top: 4.9875311721%;
  white-space: nowrap;
  z-index: 2;
}

/* ------------------- topAbout title */
.topAbout__title {
  font-size: 39px;
  font-size: 2.8550512445vw;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  margin-bottom: 1.317715959vw;
}

/* ------------------- topAbout text */
.topAbout__text {
  font-size: 15px;
  font-size: 1.0980966325vw;
  margin-bottom: 1.8301610542vw;
}

/* --------------------------------------- topAbout img */
.topAbout__img {
  & > li {
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;

    & > img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}

@media only screen and (max-width: 767px) {
  .topAbout {
    position: relative;
    padding-top: 2.6666666667vw;
    padding-left: 2.6666666667vw;
    padding-right: 2.6666666667vw;
    margin-bottom: 10.6666666667vw;
    overflow: hidden;
  }

  .topAbout__inner {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    margin-top: 4vw;
  }

  .topAbout__title {
    font-size: 22px;
    font-size: 5.8666666667vw;
    letter-spacing: 0;
    white-space: nowrap;
    margin-bottom: 3.2vw;

    & br {
      display: none;
    }
  }

  .topAbout__text {
    font-size: 13px;
    font-size: 3.4666666667vw;
    margin-bottom: 5.3333333333vw;
    white-space: normal;

    & br {
      display: none;
    }
  }

  .topAbout__img {
    white-space: nowrap;

    & > li {
      display: inline-block;
      position: relative;
      width: 66.6666666667vw;
      border-radius: 3px;
      margin-right: 2.1333333333vw;
    }
  }
}

/* ============================================================== topContents leaderBlock */
.topContents__leaderBlock {
  position: relative;
  overflow: hidden;
}

.topContents__leaderBlock--titleJp {
  text-align: center;
  font-size: 27px;
  font-size: 1.9765739385vw;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #00a19a;
  margin-bottom: 2.9282576867vw;
}

.topContents__leaderBlock--titleEn {
  position: relative;
  bottom: -5px;
}

@media only screen and (max-width: 767px) {
  .topContents__leaderBlock--titleJp {
    font-size: 18px;
    font-size: 4.8vw;
    letter-spacing: 0.05em;
    margin-bottom: 8vw;
  }

  .topContents__leaderBlock--titleEn {
    bottom: -5px;
  }
}

/* ============================================================== topStayActivity */
.topStayActivity {
  padding-bottom: 5.1244509517vw;
}

.topStayActivity__keenWrapper {
  margin-bottom: 2.196193265vw;
}

/* --------------------------------------- StayActivity keenBlock */
#keenSlider-topStayActivity {
  & .sliderArrow {
    display: none;
  }
}

/* --------------------------------------- StayActivity keenBlock desc */
.StayActivity__keenBlock--desc {
  margin-top: 1.4641288433vw;
  margin-bottom: 1.4641288433vw;
}

.StayActivity__keenBlock--desc--title {
  font-size: 21px;
  font-size: 1.5373352855vw;
  line-height: 1;
  margin-bottom: 0.878477306vw;
}

.StayActivity__keenBlock--desc--text {
  font-size: 14px;
  font-size: 1.0248901903vw;
  min-height: 6.2225475842vw;
}

@media only screen and (max-width: 767px) {
  .topStayActivity {
    padding-bottom: 14.6666666667vw;
  }

  .topStayActivity__keenWrapper {
    margin-bottom: 6.6666666667vw;
  }

  .StayActivity__keenBlock--desc {
    margin-top: 4vw;
    margin-bottom: 4vw;
  }

  .StayActivity__keenBlock--desc--title {
    font-size: 15px;
    font-size: 4vw;
    margin-bottom: 2.6666666667vw;
  }

  .StayActivity__keenBlock--desc--text {
    font-size: 12px;
    font-size: 3.2vw;
    min-height: 23.2vw;
  }
}

/* ============================================================== StayActivity__banner */
.StayActivity__banner {
  position: relative;
  padding-top: 152.6806526807%;
  border-radius: 4px;
  overflow: hidden;
}

/* --------------------------------------- StayActivity__banner img */
.StayActivity__banner--img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;

  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    opacity: 0;
  }
}

/* --------------------------------------- StayActivity__banner icon */
.StayActivity__banner--icon {
  position: absolute;
  width: 28.5046728972%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;

  & > span {
    display: block;
    padding-top: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  &.asobi > span {
    background-image: url(/_assets/img/StayActivity__banner--asobi--icon.svg);
  }

  &.asobiGreen > span {
    background-image: url(/_assets/img/StayActivity__banner--asobi--iconGreen.svg);
  }

  &.cottage > span {
    background-image: url(/_assets/img/StayActivity__banner--cottage--icon.svg);
  }

  &.cottageGreen > span {
    background-image: url(/_assets/img/StayActivity__banner--cottage--iconGreen.svg);
  }

  &.pyramidhouse > span {
    background-image: url(/_assets/img/StayActivity__banner--pyramidhouse--icon.svg);
  }

  &.pyramidhouseGreen > span {
    background-image: url(/_assets/img/StayActivity__banner--pyramidhouse--iconGreen.svg);
  }
}

/* --------------------------------------- StayActivity__banner title */
.StayActivity__banner--title {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 1.4641288433vw 1.0980966325vw;
  z-index: 2;
}

.StayActivity__banner--title--subText {
  display: block;
  color: #fff;
  line-height: 1;
  align-self: flex-end;
  font-size: 12px;
  font-size: 0.878477306vw;
}

.StayActivity__banner--title--strong {
  height: 6.2225475842vw;

  & > img {
    height: 100%;
    width: auto;
  }
}

/* --------------------------------------- StayActivity__banner cottage */
.StayActivity__banner--cottage {
  & .StayActivity__banner--img {
    background-image: url(/_assets/img/StayActivity__banner--cottage--bg.webp);
  }

  & .StayActivity__banner--icon > span {
    background-image: url(/_assets/img/StayActivity__banner--cottage--icon.svg);
  }
}

/* --------------------------------------- StayActivity__banner pyramidhouse */
.StayActivity__banner--pyramidhouse {
  & .StayActivity__banner--img {
    background-image: url(/_assets/img/StayActivity__banner--pyramidhouse--bg.webp);
  }

  & .StayActivity__banner--icon > span {
    background-image: url(/_assets/img/StayActivity__banner--pyramidhouse--icon.svg);
  }
}

/* --------------------------------------- StayActivity__banner asobi */
.StayActivity__banner--asobi {
  & .StayActivity__banner--img {
    background-image: url(/_assets/img/StayActivity__banner--asobi--bg.webp);
  }

  & .StayActivity__banner--icon > span {
    background-image: url(/_assets/img/StayActivity__banner--asobi--icon.svg);
  }
}

@media only screen and (max-width: 767px) {
  .StayActivity__banner {
    padding-top: 152.6806526807%;
    border-radius: 4px;
  }

  .StayActivity__banner--icon {
    width: 28.5046728972%;
  }

  .StayActivity__banner--title {
    display: flex;
    justify-content: space-between;
    padding: 4vw 5.3333333333vw;
  }

  .StayActivity__banner--title--strong {
    height: 13.3333333333vw;
  }

  .StayActivity__banner--title--subText {
    font-size: 10px;
    font-size: 2.6666666667vw;
  }
}

/* ============================================================== hover pc */
@media (hover: hover) and (pointer: fine) {
  .StayActivity__banner:hover .StayActivity__banner--img::after,
  .StayActivity__banner:active .StayActivity__banner--img::after {
    opacity: 1;
  }
}

/* ============================================================== cafeLampBlock */
@keyframes loopAnime {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-150vw, 0, 0);
  }
}

.cafeLampBlock__img--list {
  font-size: 0;
  white-space: nowrap;
  animation: loopAnime 45s linear 0s infinite;

  & > li {
    display: inline-block;
    width: 50vw;
  }
}

@media only screen and (max-width: 767px) {
  @keyframes loopAnime {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-270vw, 0, 0);
    }
  }

  .cafeLampBlock__img--list {
    animation: loopAnime 25s linear 0s infinite;

    & > li {
      width: 90vw;
    }
  }
}

/* ============================================================== topCommunity */
.topCommunity {
  padding-bottom: 2.196193265vw;
}

/* --------------------------------------- topCommunity list */
.topCommunity__section--list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 1.4641288433vw;

  & .Community__banner {
    width: calc((100% - 5.8565153734vw) / 5);
    margin-right: 1.4641288433vw;

    &.is--mostRecent {
      width: calc((100% - 5.8565153734vw) / 5 * 2 + 1.4641288433vw);
    }

    &:last-child,
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}

.topCommunity__section--list.mostRecent--null {
  & .Community__banner {
    width: calc((100% - 4.3923865299vw) / 4);
  }
}

/* --------------------------------------- Community banner */
.Community__banner {
  & a {
    color: #fff;
  }
}

@media only screen and (max-width: 767px) {
  .topCommunity {
    padding-bottom: 8vw;
  }

  .topCommunity__section--list {
    flex-wrap: wrap;

    & .Community__banner {
      width: 100%;
      margin-right: 0;

      &.is--mostRecent {
        width: 100%;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .topCommunity__section--list.mostRecent--null {
    & .Community__banner {
      width: 100%;
    }
  }

  .Community__banner {
    margin-bottom: 4vw;
  }

  .Community__banner--link {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  .Community__banner--thum {
    width: 20vw;
    padding-top: 0;

    & > span {
      position: relative;
      padding-top: 100%;
    }
  }

  .Community__banner--info {
    width: calc(100% - 25vw);
  }

  .Community__banner.is--mostRecent {
    margin-bottom: 6.6666666667vw;

    & .Community__banner--link {
      display: block;
    }

    & .Community__banner--thum {
      width: 100%;
      padding-top: 38.8461538462%;

      & > span {
        position: absolute;
        padding-top: 0;
      }
    }

    & .Community__banner--info {
      width: 100%;
    }
  }

  /* --------------------------------------- Community__banner ending */
  .Community__banner.is--ending {
    & .Community__banner--title,
    & .Community__banner--date {
      opacity: 0.3;
    }

    & .Community__banner--info::after {
      opacity: 1;
    }
  }

  .Community__banner--thum::after {
    display: none;
  }
}

/* ============================================================== topBanner */
.topBanner {
  padding-top: 2.9282576867vw;
  padding-bottom: 2.9282576867vw;
  background-color: #008d8f;
}

.topBannerBlock__img {
  & > span {
    display: block;
    position: relative;
    padding-top: 45.1428571429%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url("/_assets/img/banner__img.webp");
  }
}

.topBannerBlock__detail {
  align-self: center;
}

.topBannerBlock__detail--info {
  margin-bottom: 1.8301610542vw;

  & > dt {
    width: 16.1054172767vw;
    margin-bottom: 1.0980966325vw;
  }
}

@media only screen and (max-width: 767px) {
  .topBanner {
    padding-top: 4vw;
    padding-bottom: 5.3333333333vw;
  }

  .topBannerBlock__detail--info {
    margin-bottom: 5.3333333333vw;

    & > dt {
      width: 40vw;
      margin-bottom: 3.4666666667vw;
    }

    & > dd {
      font-size: 12px;
      font-size: 3.2vw;
    }
  }
}


/* ============================================================== topFaq */
.topFaq {
  padding-top: 4.7vw;
  padding-bottom: 4.7vw;
}

.topFaq .fontW--b {
  line-height: 1.6;
  bottom: -3vw;
}
.topFaq .topArticle__title {
  margin-bottom: 5.062225vw;
}

.topFaq .arrowIcon__hoverWrapper.btn {
  width: 27.6vw;
  margin: auto;
}

@media only screen and (max-width: 767px) {
  .topFaq {
    padding-top: 7.1vw;
    padding-bottom: 7.1vw;
  }

  .topFaq .fontW--b {
    line-height: 1.6;
    bottom: -6vw;
    font-size: 3vw;
  }
  .topFaq .topArticle__title {
    margin-bottom: 11.062225vw
  }

  .topFaq .arrowIcon__hoverWrapper.btn {
    width: auto;
  }
}