@charset "utf-8";

[v-cloak] {
  display: none;
}

/* リード文
   ========================================================================== */

.layout-mainArea {
  padding-bottom: 0!important;
}

.layout-mainArea .section-lead .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.layout-mainArea .section-lead .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* .layout-mainArea .section-lead {
  font-size: 1.375rem;
  line-height: 1.454545454545455;
  text-align: center;
}

.layout-mainArea .section-lead .section-m + .section-m {
  margin-top: 4.25rem;
}

@media screen and (max-width: 736px) {
  .layout-mainArea .section-lead {
    font-size: 1rem;
    line-height: 1.625;
    text-align: inherit;
  }

  .layout-mainArea .section-lead .section-m + .section-m {
    margin-top: 1.5rem;
  }
} */

/* おすすめ紅葉スポットと見ごろ
   ========================================================================== */

.layout-mainArea .section-osusume .h2 {
  margin-top: 2.75rem;
}

.layout-mainArea .section-osusume .heading-map {
  padding: 1.0625rem;
  background: no-repeat #f9dbe1;
  background-image: url(../img/bg_map01_pc.png), url(../img/bg_map02_pc.png);
  background-position: 0 50%, 100% 50%;
  background-size: auto 100%;
  color: #f54166;
  font-size: 1.375rem;
  line-height: 1.2;
  text-align: center;
}

.layout-mainArea .section-osusume .google-maps {
  position: relative;
  width: 100%;
  padding-top: 49.40711462450593%;
}

.layout-mainArea .section-osusume .pic-desc {
  text-align: center;
}

.layout-mainArea .section-osusume .pic-desc img {
  max-width: 54.5rem;
}

.layout-mainArea .section-osusume .heading-spot {
  margin-top: 2.5rem;
  margin-left: -.375rem;
  margin-right: -.375rem;
  color: #f54166;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: .075em;
  text-align: center;
}

.layout-mainArea .section-osusume .heading-spot::before,
.layout-mainArea .section-osusume .heading-spot::after {
  content: "";
  display: inline-block;
  width: 3.53125rem;
  height: 2.1875rem;
  margin-left: .375rem;
  margin-right: .375rem;
  background: 50% no-repeat;
  background-size: 100% auto;
  vertical-align: -.5rem;
}

.layout-mainArea .section-osusume .heading-spot::before {
  background-image: url(../img/bg_map03.png);
}

.layout-mainArea .section-osusume .heading-spot::after {
  background-image: url(../img/bg_map04.png);
}

.layout-mainArea .section-osusume .grid--gutter {
  margin-left: -.3125rem;
  margin-right: -.3125rem;
  margin-top: -.625rem;
  -webkit-transform: translateY(0.625rem);
  transform: translateY(0.625rem);
}

.layout-mainArea .section-osusume .grid--gutter > [class*="grid-col"] {
  margin-bottom: .625rem;
  padding-left: .3125rem;
  padding-right: .3125rem;
}

.layout-mainArea .section-osusume .card {
  min-height: 100%;
  text-align: inherit;
}

.layout-mainArea .section-osusume .card-img {
  overflow: hidden;
  position: relative;
  padding-top: 66.666%;
}

.layout-mainArea .section-osusume .card-img img {
  position: absolute;
  top: -100%;
  bottom: -100%;
  left: 0;
  right: 0;
  margin: auto 0;
}

.layout-mainArea .section-osusume .card .grid-spot {
  margin-left: -.625rem;
  margin-right: -.625rem;
}

.layout-mainArea .section-osusume .card .grid-spot > [class*="grid-col"] {
  padding-left: .625rem;
  padding-right: .625rem;
}

.layout-mainArea .section-osusume .card .grid-col img {
  max-width: 2.625rem;
}

.layout-mainArea .section-osusume .card-txt {
  line-height: 1.375;
}

.layout-mainArea .section-osusume .card-disc {
  margin-top: .5rem;
}

@media screen and (max-width: 736px) {
  .layout-mainArea .section-osusume .h2 {
    margin-top: 1.625rem;
  }

  .layout-mainArea .section-osusume .tab-lv1-item > button,
  .layout-mainArea .section-osusume .tab-lv1-item > a {
    min-height: 2.875rem;
    font-size: .75rem;
  }

  .layout-mainArea .section-osusume .tab-inner {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    border: none;
  }

  .layout-mainArea .section-osusume .heading-map {
    padding: .875rem;
    background-image: url(../img/bg_map01_sp.png), url(../img/bg_map02_sp.png);
    font-size: 1.125rem;
  }

  .layout-mainArea .section-osusume .google-maps {
    padding-top: 102.7397260273973%;
  }

  .layout-mainArea .section-osusume .heading-spot {
    font-size: 1.125rem;
    letter-spacing: 0;
  }

  .layout-mainArea .section-osusume .heading-spot::before,
  .layout-mainArea .section-osusume .heading-spot::after {
    width: 2.25rem;
    height: 1.375rem;
  }

  .layout-mainArea .section-osusume .grid--gutter {
    margin-left: -.375rem;
    margin-right: -.375rem;
    margin-top: -.75rem;
    -webkit-transform: translateY(0.75rem);
    transform: translateY(0.75rem);
  }

  .layout-mainArea .section-osusume .grid--gutter > [class*="grid-col"] {
    margin-bottom: .75rem;
    padding-left: .375rem;
    padding-right: .375rem;
  }

  .layout-mainArea .section-osusume .card {
    text-align: center;
  }

  .layout-mainArea .section-osusume .card .grid-col img {
    max-width: 2rem;
  }

  .layout-mainArea .section-osusume .card .grid-spot > .grid-col {
    align-self: flex-end;
  }

  .layout-mainArea .section-osusume .card-txt {
    line-height: 1.538461538461538;
  }

  .layout-mainArea .section-osusume .card-disc {
    margin-top: .25rem;
  }
}

/* 大山+箱根+鎌倉+ロマンスカー
   ========================================================================== */

.layout-mainArea .section-area.colored {
  overflow: hidden;
  margin-top: 4rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.layout-mainArea .section-area.colored.walk {
  background-color: #faf7f2;
}

.layout-mainArea .section-area.colored.roma {
  background-color: #fff3f4;
}

.layout-mainArea .section-area.colored .container > *:first-child {
  margin-top: 0;
}

.layout-mainArea .section-area.colored.walk .h2 h2 {
  display: flex;
  align-items: flex-end;
}

.layout-mainArea .section-area.colored.walk .h2 .text {
  margin-right: auto;
}

.layout-mainArea .section-area.colored.walk .h2 .icon {
  order: 1;
  width: 8.3125rem;
  padding-bottom: .625rem;
}

.layout-mainArea .section-area.colored.walk .txt-s {
  line-height: 1.428571428571429;
}

.layout-mainArea .section-areaBanner.colored {
  overflow: hidden;
  margin-top: 2.375rem;
  padding: 1.25rem 1.875rem;
  background-color: #fff;
}

.layout-mainArea .section-areaBanner + .section-areaBanner {
  margin-top: 3rem;
}

.layout-mainArea .section-areaBanner.colored > *:first-child {
  margin-top: 0;
}

.layout-mainArea .section-areaBanner .grid-col img {
  max-width: 20.625rem;
}

@media screen and (max-width: 736px) {
  .layout-mainArea .section-area.colored {
    margin-top: 1.625rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .layout-mainArea .section-area .h2 {
    margin-top: 1.5rem;
  }

  .layout-mainArea .section-area.colored.walk .h2 h2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .layout-mainArea .section-area.colored.walk .h2 .icon {
    order: 0;
    width: 6rem;
    padding-bottom: 1rem;
  }

  .layout-mainArea .section-area.colored.walk .txt-s {
    font-size: .8125rem;
    line-height: 1.538461538461538;
  }

  .layout-mainArea .section-areaBanner + .section-areaBanner {
    margin-top: 0;
  }

  .layout-mainArea .section-areaBanner.colored {
    margin-top: 1.125rem;
    padding: .75rem .875rem;
  }

  .layout-mainArea .section-areaBanner .grid-col img {
    max-width: none;
  }
}

/* 小田急沿線の紅葉名所と見頃
   ========================================================================== */

.layout-mainArea .section-ensen .grid {
  font-size: .875rem;
  line-height: 1.714285714285714;
}

.layout-mainArea .section-ensen .grid-spot {
  margin-left: -.625rem;
  margin-right: -.625rem;
}

.layout-mainArea .section-ensen .grid-spot > [class*="grid-col"] {
  padding-left: .625rem;
  padding-right: .625rem;
}

.layout-mainArea .section-ensen .grid-col img {
  max-width: 10rem;
}

.layout-mainArea .section-ensen .list-desc {
  overflow: hidden;
}

.layout-mainArea .section-ensen .list-desc dt {
  float: left;
  width: 7em;
  font-weight: bold;
}

.layout-mainArea .section-ensen .list-desc dt::before {
  content: "【";
}

.layout-mainArea .section-ensen .list-desc dt::after {
  content: "】";
}

.layout-mainArea .section-ensen .list-desc dd {
  overflow: hidden;
}

@media screen and (max-width: 736px) {
  .layout-mainArea .section-ensen .grid {
    font-size: inherit;
    line-height: inherit;
  }

  .layout-mainArea .section-ensen .grid-col img {
    max-width: none;
  }
}

/* おすすめ紅葉スポットと見ごろ モーダル
   ========================================================================== */

.layout-mainArea .modal-content {
  border-color: #f54166;
}

.layout-mainArea .modal-heading,
.layout-mainArea .modal-close:before {
  color: #f54166;
}

.layout-mainArea .modal-heading {
  letter-spacing: .075em;
}

.layout-mainArea .modal-body {
  line-height: 1.625;
}

.layout-mainArea .modal-body .section-s {
  margin-top: .625rem;
}

.layout-mainArea .modal-body .section-s:first-child {
  margin-top: 0;
}

.layout-mainArea .modal-body .slick-slider {
  max-width: 644px;
  margin-bottom: -.9375rem;
}

.layout-mainArea .modal-body .sliderTile-overlay {
  min-height: 0;
}

.layout-mainArea .modal-body h2 {
  width: 7.25rem;
  margin-top: .9375rem;
  padding: .25rem;
  border-radius: .1875rem;
  background-color: #f54166;
  color: #fff;
  font-size: 1rem;
  font-weight: inherit;
  line-height: 1.2;
  text-align: center;
}

.layout-mainArea .modal-body .grid--gutter {
  margin-left: -.5rem;
  margin-right: -.5rem;
}

.layout-mainArea .modal-body .grid--gutter > [class*="grid-col"] {
  padding-left: .5rem;
  padding-right: .5rem;
}

.layout-mainArea .modal-body .grid-col img {
  max-width: 4.25rem;
}

.layout-mainArea .modal-body .grid-col-auto {
  align-self: center;
  font-size: 1.125rem;
  line-height: 1.444444444444444;
}

.layout-mainArea .modal-body strong {
  color: #f54166;
}

@media screen and (max-width: 736px) {
  .layout-mainArea .modal-body {
    font-size: .8125rem;
    line-height: 1.769230769230769;
  }

  .layout-mainArea .modal-body .slick-slider {
    max-width: 100%;
    margin-bottom: -.625rem;
  }

  .layout-mainArea .modal-body h2 {
    width: 6.125rem;
    margin-top: .625rem;
    font-size: inherit;
  }

  .layout-mainArea .modal-body .grid--gutter {
    margin-left: -.25rem;
    margin-right: -.25rem;
  }

  .layout-mainArea .modal-body .grid--gutter > [class*="grid-col"] {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .layout-mainArea .modal-body .grid-col img {
    max-width: 2.75rem;
  }

  .layout-mainArea .modal-body .grid-col-auto {
    font-size: .6875rem;
  }
}