/*phone*/
@media screen and (max-width: 767px) {
  html, body {
    height: 100%;
  }
  body {
    overflow: hidden;
    overflow-y: auto;
    margin: 0!important;
    min-width: 320px;
  }

  .nav__pad {
    display: none!important;
  }
}

@media screen and (max-width: 480px) {
  .top-slick__img {
    width: 100%;
    height: 55.55556vw;
  }
  .top-slide-box {
    padding-top: 0!important;
    margin-bottom: -30px;
  }

  .search-result-box__sp .searchText {
    display: none;
  }

  .wrapper__index {
    top: 96px;
  }

  .season-groups__sp .first span {
    font-size: 2.4em!important;
  }
  .stay-list__sp .chunk-box {
    margin-top: 6px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .stay-list__sp .other-box {
    margin-top: 7px;
  }
}

@media screen and (min-width: 481px) {
  .top-slick__img {
    width: 100%;
    height: calc(27.77778vw - 11.11111px);
  }
}

@media screen and (max-width: 1199px) {
  /*.top-slick__img {
    width: 100%;
    height: 300px;
  }*/
  .wrapper__index .search-box__sp {
    margin-top: 0;
  }

  .header-box, 
  .wrapper-box,
  .nav-box,
  footer { 
    display: none !important; 
  }
  .header-box__sp { display: block; }
  .stay-list__sp .chunk-box {
    padding: 0!important;
  }
}


@media screen and (min-width: 481px) and (max-width: 1199px) {
  :root {
    --pad-box-padding: 3vw;
    --pad-base-2-chunk: calc((100% - var(--pad-box-padding)) / 2);
    --sp-block-margin-top: 6vw
  }
  body {
    margin-top: 0!important;
  }

  .header-box, 
  .wrapper-box,
  .nav-box,
  .nav-box__sp,
  footer { 
    display: none !important; 
  }

  .nav__pad,
  .header-box__sp { 
    display: block!important; 
  }

  .top-slide-box {
    margin-bottom: -110px;
  }

  .top-slide {
    padding-top: 148px!important;
  }

  .wrapper__sp {
    top: 136px
  }

  .wrapper__sp.wrapper__index {
    top: 176px;
  }

  .slider-arrow__sp {
    top: calc(50% + 53.5px)!important;
  }

  /*lastest videos*/
  .videos-box__sp .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .videos-box__sp .list li {
    width: var(--pad-base-2-chunk);
    margin-right: var(--pad-box-padding);
    margin-bottom: 3vw;
  }
  .videos-box__sp .list li:nth-child(even) {
    margin-right: 0;
  }
  .videos-box__sp .list li:last-child,
        .videos-box__sp .list li:nth-last-child(2) {
    margin-bottom: 0;
  }
  .videos-box__sp .list li .sp__row-1-img {
    width: 100%;
    height: calc((100vw - 3 * var(--pad-box-padding)) / 2 / 1.8);
  }

  .spots-group__sp .spots-title {
    margin-top: var(--sp-block-margin-top);
  }

  .spots-group__sp .spots-title .title-icon {
    background-size: 46px;
  }

  .spots-group__sp .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
  }

  .spots-group__sp .list li {
    width: calc((100% - var(--pad-box-padding)) / 2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5vw;
    margin-right: 3vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .spots-group__sp .list li:nth-child(even) {
    margin-right: 0;
  }

  .spots-group__sp .list li .img-parent-bg {
    width: 100%;
  }

  .spots-group__sp .list li .img-parent-bg .img-bg {
    width: 100%;
  }

  .spots-group__sp .list li>a {
    position: relative;
    margin-right: 0;
  }

  .spots-group__sp .list li>a .rank-icon {
    top: 0;
  }

  .spots-group__sp .list li .text-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 10px;
    /*justify-content: space-between;*/
  }

  .spots-group__sp .list li .text-box .date {
    font-size: 12px;
    color: #aaa;
  }

  .spots-group__sp .list li .text-box .link-title {
    display: block;
    width: 100%;
    min-height: 40px;
    font-weight: bold;
    margin-bottom: 1vw;
    /*flex: 1;*/
  }

  .spots-group__sp .list li .text-box .overview {
    margin-bottom: 0;
    font-size: 13px;
  }

  .spots-group__sp .list-more__sp {
    margin-top: 0vw!important;
  }

  .spot-list__sp .spots-title {
    margin-top: var(--sp-block-margin-top);
  }

  .spot-list__sp .spots-title .title-icon {
    background-size: 46px;
  }

  .spot-list__sp .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
  }

  .spot-list__sp .list li {
    width: calc((100% - var(--pad-box-padding)) / 2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5vw;
    margin-right: 3vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .spot-list__sp .list li:nth-child(even) {
    margin-right: 0;
  }

  .spot-list__sp .list li .img-parent-bg {
    width: 100%;
  }

  .spot-list__sp .list li .img-parent-bg .img-bg {
    width: 100%;
  }

  .spot-list__sp .list li>a {
    position: relative;
    margin-right: 0;
  }

  .spot-list__sp .list li>a .rank-icon {
    top: 0;
  }

  .spot-list__sp .list li .text-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 10px;
    /*justify-content: space-between;*/
  }

  .spot-list__sp .list li .text-box .date {
    font-size: 12px;
    color: #aaa;
  }

  .spot-list__sp .list li .text-box .link-title {
    display: block;
    width: 100%;
    min-height: 40px;
    font-weight: bold;
    margin-bottom: 1vw;
    /*flex: 1;*/
  }

  .spot-list__sp .list li .text-box .overview {
    margin-bottom: 0;
    font-size: 13px;
  }

  .spot-list__sp .list-more__sp {
    margin-top: 0vw!important;
  }

  .stay-list__sp .title-box {
    margin-top: 3px 10px;
  }
}

@media screen and (min-width: 1200px) {
  .top-header__sp,
  .header-box__sp,
  .wrapper__sp { 
    display: none; 
  }
  .wrapper-box, 
  .right-side { 
    display: block 
  }

  .top-slick__img {
    width: 100%;
    height: 320px;
  }
}

@media screen and (max-width: 320px) {
  .sp__logo-img {
    width: 201px;
    height: 25px;
  }
  .area-box__sp .area-title__sp h3 {
    font-size: 6vw;
  }
}


/*for pad*/
@media only screen and (device-width: 768px) {
  
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}