﻿@charset "UTF-8";

* {
  box-sizing: border-box;
}

.out-page {
  font-family: 'Noto Sans JP', sans-serif;
}

.visually-hidden {
  display: none;
}

h1 {
  /* 48px */
  font-size: clamp(0px, calc(48 / 1920 * 100vw), 48px);
  margin: 0 auto clamp(0px, calc(30 / 1920 * 100vw), 30px);
  text-align: center;
  font-weight: 500;
}

.wrapper_ .block-breadcrumb-wrap {
  padding-top: clamp(0px, calc(10 / 1920 * 100vw), 10px) !important;
}

/* --- スライダー全体 --- */
.mv-slider,
.mv-slider.noSlider {
  display: flex;
  justify-content: center;
}

.out-page__mv {
  position: relative;
  width: 100%;
  overflow: hidden;

  .slick-list {
    padding: 0 !important;
  }

  /* --- スライド単体 --- */
  .mv-slider__slide {
    width: calc(290 / 1920 * 100vw);
    margin: 0 calc(10 / 1920 * 100vw);
    box-sizing: border-box;

    /* --- スライド内要素 --- */
    img {
      width: calc(290 / 1920 * 100vw);
      height: calc(387 / 1920 * 100vw);
      object-fit: cover;
      display: block;
      transition: all ease .5s;

      &:hover {
        transform: scale(1.05);
      }
    }

    .mv-slider__brand-name {
      margin: calc(14 / 1920 * 100vw) 0 0 0;
      padding: 0;
      font-size: clamp(0px, calc(14 / 1920 * 100vw), 14px);
      color: #363636;
      text-align: left;
    }

    .mv-slider__title {
      margin: calc(2 / 1920 * 100vw) 0 0 0;
      padding: 0;
      font-size: clamp(0px, calc(17 / 1920 * 100vw), 17px);
      color: #000;
      font-weight: bold;
      text-align: left;
    }
  }

  .slick-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 10;
    width: calc(50 / 1920 * 100vw);
    height: calc(50 / 1920 * 100vw);
    border: none;
    cursor: pointer;
    font-size: 0;
    transition: all ease .5s;

    &:hover {
      opacity: 0.8;
    }
  }

  .slick-prev {
    left: calc(459 / 1920 * 100vw);
    background-image: url(/cms/outdoor/top/img/prev.png);
    background-position: center;
    background-size: contain;
  }

  .slick-next {
    right: calc(459 / 1920 * 100vw);
    background-image: url(/cms/outdoor/top/img/next.png);
    background-position: center;
    background-size: contain;
  }
}

/* --- もっと見るボタン --- */
.out-page__more-button-wrapper {
  margin-top: clamp(0px, calc(50 / 1920 * 100vw), 50px);
  text-align: center;
}

.out-page__more-button-wrapper .more-button {
  display: inline-block;
  width: clamp(0px, calc(360 / 1920 * 100vw), 360px);
  padding: clamp(0px, calc(20 / 1920 * 100vw), 20px) 0;
  background-color: #E84C18;
  color: #fff;
  font-size: clamp(0px, calc(16 / 1920 * 100vw), 16px);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s;
  border: none;
  cursor: pointer;
}

.out-page__more-button-wrapper .more-button:hover {
  opacity: 0.8;
}

/* FIND YOUR OUTDOOR STYLE */
.out-page__find {
  position: relative;
  margin-top: clamp(0px, calc(120 / 1920 * 100vw), 120px);
  padding: clamp(0px, calc(68 / 1920 * 100vw), 68px) 0 clamp(0px, calc(80 / 1920 * 100vw), 80px);
  background-image: linear-gradient(rgba(36, 36, 36, 0.8), rgba(36, 36, 36, 0.8)),
    url(/cms/outdoor/top/img/find_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.out-page__find h2 {
  max-width: 968px;
  width: 100%;
  font-family: "roboto", sans-serif;
  font-size: clamp(0px, calc(75 / 1920 * 100vw), 75px);
  font-style: italic;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin: auto;
  padding: 0;
  line-height: clamp(0px, calc(69 / 1920 * 100vw), 69px);
}

.out-page__find p {
  width: 100%;
  max-width: 968px;
  font-size: clamp(0px, calc(24 / 1920 * 100vw), 24px);
  line-height: clamp(0px, calc(30 / 1920 * 100vw), 30px);
  text-align: center;
  color: #fff;
  padding: 0;
  margin: clamp(0px, calc(16 / 1920 * 100vw), 16px) auto 0;
}

.out-page__find .search-nav {
  display: flex;
  width: 100%;
  max-width: 1208px;
  margin: clamp(0px, calc(35 / 1920 * 100vw), 35px) auto 0;
  gap: clamp(0px, calc(2 / 1920 * 100vw), 2px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.out-page__find .search-nav .search-nav__item {
  position: relative;
  width: clamp(0px, calc(240 / 1920 * 100vw), 240px);
  height: clamp(0px, calc(240 / 1920 * 100vw), 240px);
  background-color: rgba(255, 255, 255, 0.1);
}

.out-page__find .search-nav .search-nav__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0px, calc(29 / 1920 * 100vw), 29px);
  margin: auto;
  display: block;
  width: clamp(0px, calc(31 / 1920 * 100vw), 31px);
  height: clamp(0px, calc(31 / 1920 * 100vw), 31px);
  background-image: url(/cms/outdoor/top/img/arrow.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.out-page__find .search-nav .search-nav__item a {
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
  line-height: clamp(0px, calc(28 / 1920 * 100vw), 28px);
  font-size: clamp(0px, calc(18 / 1920 * 100vw), 18px);
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* カテゴリーから探す  */
.out-page__search-category {
  background-color: #F7F7F7;
  padding: clamp(0px, calc(76 / 1920 * 100vw), 76px) 0;
  width: 100%;
}

.out-page__search-category .out-page__search-category-inner {
  width: calc(1200 / 1920 * 100vw);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.out-page__search-category h2 {
  font-size: clamp(0px, calc(24 / 1920 * 100vw), 24px);
  width: 100%;
  max-width: 1760px;
  margin: auto;
}

.out-page__search-category .category-list {
  width: 100%;
  max-width: 1760px;
  margin: clamp(0px, calc(17 / 1920 * 100vw), 17px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, clamp(0px, calc(157 / 1920 * 100vw), 157.7px));
  gap: clamp(0px, calc(30 / 1920 * 100vw), 30px) clamp(0px, calc(16 / 1920 * 100vw), 16px);
}

.out-page__search-category .category-list .category-list__item {
  width: clamp(0px, calc(157 / 1920 * 100vw), 157.7px);
}

.out-page__search-category .category-list .category-list__item a {
  width: 100%;
  height: 100%;
  display: block;
}

.out-page__search-category .category-list .category-list__item a .category-list__name {
  color: #40683C;
  display: block;
  text-align: center;
  margin-top: clamp(0px, calc(8 / 1920 * 100vw), 8px);
  font-size: clamp(0px, calc(16 / 1920 * 100vw), 16px);
}

.out-page__search-category .category-list .category-list__item .category-list__image-wrap {
  display: flex;
  width: clamp(0px, calc(157 / 1920 * 100vw), 157.7px);
  height: clamp(0px, calc(157 / 1920 * 100vw), 157.7px);
  background-color: #fff;
  align-items: center;
  justify-content: center;
}

.out-page__search-category .category-list .category-list__item .category-list__image-wrap>img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* ブランドから探す */
.out-page__search-brand {
  background-color: #fff;
  padding: clamp(0px, calc(80 / 1920 * 100vw), 80px) 0;
  width: 100%;
}

.out-page__search-brand .out-page__search-brand-inner {
  width: calc(1200 / 1920 * 100vw);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.out-page__search-brand h2 {
  font-size: clamp(0px, calc(24 / 1920 * 100vw), 24px);
  width: 100%;
  max-width: 1760px;
  margin: auto;
}

.out-page__search-brand .brand-list {
  width: 100%;
  max-width: 1760px;
  margin: clamp(0px, calc(17 / 1920 * 100vw), 17px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, clamp(0px, calc(157.7 / 1920 * 100vw), 157.7px));
  gap: clamp(0px, calc(30 / 1920 * 100vw), 30px) clamp(0px, calc(16 / 1920 * 100vw), 16px);
}

.out-page__search-brand .brand-list .brand-list__item {
  width: clamp(0px, calc(157.7 / 1920 * 100vw), 157.7px);
  height: clamp(0px, calc(157.7 / 1920 * 100vw), 157.7px);
}

.out-page__search-brand .brand-list .brand-list__item a {
  width: 100%;
  height: 100%;
  display: block;
}

.out-page__search-brand .brand-list .brand-list__image-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
  align-items: center;
  justify-content: center;
}

.out-page__search-brand .brand-list .brand-list__image-wrap>img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* 商品から探す */
.out-page__search-item {
  padding: clamp(0px, calc(120 / 1920 * 100vw), 120px) 0;
  background-color: #F7F7F7;

  .out-page__search-item-inner {
    width: calc(1200 / 1920 * 100vw);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  h2 {
    font-size: clamp(0px, calc(24 / 1920 * 100vw), 24px);
    width: 100%;
    max-width: 1280px;
    margin: auto;
  }

  .slick-arrow.slick-disabled {
    display: none !important;
  }

  .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(-50%);
    z-index: 10;
    width: clamp(0px, calc(40 / 1920 * 100vw), 40px);
    height: clamp(0px, calc(40 / 1920 * 100vw), 40px);
    border: none;
    cursor: pointer;
    font-size: 0;
    transition: all ease 0.5s;

    &:hover {
      opacity: 0.8;
    }
  }

  .slick-prev {
    left: clamp(-50px, calc(-50 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/prev.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .slick-next {
    right: clamp(-50px, calc(-50 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/next.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .product-list {
    display: flex;
    position: relative;
    width: calc(1200 / 1920 * 100vw);
    max-width: 1200px;
    margin: clamp(0px, calc(20 / 1920 * 100vw), 20px) auto 0;

    box-sizing: border-box;

    .slick-track {
      display: flex;
    }

    .slick-slide {
      height: auto;
      display: flex;
      margin: 0 clamp(0px, calc(5 / 1920 * 100vw), 5px);
    }

    .slick-list {
      overflow: hidden;
    }

    .slick-slide>div {
      display: flex;
      height: 100%;
      width: 100%;
    }

    .product-list__item {
      width: clamp(0px, calc(232 / 1920 * 100vw), 232px);
      display: flex;
      flex-direction: column;
      align-items: stretch;

      /* 高さ揃えのため */
      height: 100%;

      a {

        .product-list__brand,
        .genre_filter_field83 li {
          margin-top: clamp(0px, calc(16 / 1920 * 100vw), 16px);
          font-size: clamp(0px, calc(12 / 1920 * 100vw), 12px);
          color: #707070;
        }

        .img-block {
          width: clamp(0px, calc(232 / 1920 * 100vw), 232px);
          height: clamp(0px, calc(232 / 1920 * 100vw), 232px);
          background-color: #eee;

          img {
            width: clamp(0px, calc(232 / 1920 * 100vw), 232px);
            height: clamp(0px, calc(232 / 1920 * 100vw), 232px);
            object-fit: cover;
          }
        }

        .product-list__name {
          font-family: "noto-sans-cjk-jp", sans-serif;
        }
      }

    }
  }
}

/* OM SYSTEM TOUR */
.out-page__tour {
  position: relative;
  padding: clamp(0px, calc(55 / 1920 * 100vw), 55px) 0 clamp(0px, calc(78 / 1920 * 100vw), 78px);
  background-image: url(/cms/outdoor/top/img/tour_bg.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  font-family: "noto-sans-cjk-jp", sans-serif;
  overflow-x: hidden;
  .out-page__tour-inner {
    position: relative;
  }
  &::before {
    content: "";
    display: block;
    background-image: url(/cms/outdoor/top/img/tour_titile.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: clamp(0px, calc(0 / 1920 * 100vw), 30px);
    width: 100vw;
    height: clamp(0px, calc(250 / 1920 * 100vw), 300px);
  }

  .out-page__tour-logo {
    text-align: center;

    img {
      width: clamp(0px, calc(100 / 1920 * 100vw), 100px);
      height: clamp(0px, calc(100 / 1920 * 100vw), 100px);
    }

    p {
      margin-top: clamp(0px, calc(30 / 1920 * 100vw), 20px);
      color: #fff;
      font-size: clamp(0px, calc(21 / 1920 * 100vw), 21px);
      letter-spacing: 0.1em;
      line-height: clamp(0px, calc(30 / 1920 * 100vw), 30px);
    }
  }

  h2 {
    text-align: center;
    color: #fff;
    font-size: clamp(0px, calc(40 / 1920 * 100vw), 40px);
    font-weight: bold;
    margin-top: clamp(0px, calc(40 / 1920 * 100vw), 40px);
  }

  .out-page__tour-text {
    text-align: center;
    color: #fff;
    font-size: clamp(0px, calc(18 / 1920 * 100vw), 18px);
    font-weight: bold;
    line-height: clamp(0px, calc(53 / 1920 * 100vw), 63px);
    margin-top: clamp(0px, calc(28 / 1920 * 100vw), 28px);
  }

  /* slick arrows */
  .tour-slider {
    .slick-arrow.slick-disabled {
      display: none !important;
    }
  }

  .slick-arrow {
    position: absolute;
    top: clamp(0px, calc(320 / 1920 * 100vw), 320px);
    ;
    margin: auto;
    transform: translateY(-50%);
    z-index: 10;
    width: clamp(0px, calc(50 / 1920 * 100vw), 50px);
    height: clamp(0px, calc(50 / 1920 * 100vw), 50px);
    border: none;
    cursor: pointer;
    font-size: 0;
    transition: all ease 0.5s;

    &:hover {
      opacity: 0.8;
    }
  }

  .slick-prev {
    left: clamp(-60px, calc(-60 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/prev.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .slick-next {
    right: clamp(-60px, calc(-60 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/next.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .zoom.tour-card-list {
    max-width: 860px;
  }

  .tour-card {
    position: relative;
  }

  .tour-card-list {
    position: relative;
    width: calc(1326 / 1920 * 100vw);
    margin: clamp(0px, calc(55 / 1920 * 100vw), 90px) auto 0;
    max-width: 1326px;

    .tour-card-list__item {
      width: clamp(0px, calc(434 / 1920 * 100vw), 434px);
      min-height: clamp(0px, calc(668 / 1920 * 100vw), 668px);
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: clamp(0px, calc(32 / 1920 * 100vw), 32px);

      /* 高さ揃えのため */
      /* height: 100%; */
    }
  }

  .tour-card__text {
    transition: all ease .5s;
    overflow: hidden;
    max-height: none;
    transition: max-height 0.35s ease;
    min-height: clamp(0px, calc(156 / 1920 * 100vw), 156px);
  }

  .tour-card__text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
  }

  .tour-card__text.is-expanded {
    display: block;
    -webkit-line-clamp: initial;
    overflow: visible;
  }

  .tour-card__more {
    display: block;
    margin-top: -10px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    padding: clamp(0px, calc(10 / 1920 * 100vw), 20px) 0 clamp(0px, calc(20 / 1920 * 100vw), 20px);
    position: absolute;
    bottom: clamp(0px, calc(42 / 1920 * 100vw), 42px);
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0px, calc(13 / 1920 * 100vw), 13px);
    text-decoration: none;
    font-weight: bold;
    color: #000;
  }

  .tour-card__more[aria-expanded="true"] {
    position: relative;
    bottom: auto;
    margin-bottom: clamp(0px, calc(8 / 1920 * 100vw), 8px);
  }

  .tour-card__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0px, calc(6 / 1920 * 100vw), 6px);
    ;
  }

  /* 閉じている時は「＋」 */
  .tour-card__more[aria-expanded="false"]::before {
    content: "+";
    display: inline-block;
    border: 1px solid #000;
    line-height: clamp(0px, calc(14 / 1920 * 100vw), 14px);
    font-size: clamp(0px, calc(13 / 1920 * 100vw), 13px);
    width: clamp(0px, calc(15 / 1920 * 100vw), 15px);
    height: clamp(0px, calc(15 / 1920 * 100vw), 15px);
    border-radius: 50px;
  }

  /* 開いている時は「−」 */
  .tour-card__more[aria-expanded="true"]::before {
    content: "−";
    display: inline-block;
    border: 1px solid #000;
    line-height: clamp(0px, calc(14 / 1920 * 100vw), 14px);
    font-size: clamp(0px, calc(13 / 1920 * 100vw), 13px);
    width: clamp(0px, calc(15 / 1920 * 100vw), 15px);
    height: clamp(0px, calc(15 / 1920 * 100vw), 15px);
    border-radius: 50px;
  }



  /* ---------------------------
     ▼ 高さを揃える（重要）
     slickはtrackをflexにする
  --------------------------- */
  .tour-slider {
    .slick-track {
      display: flex;
    }

    .slick-slide {
      /* height: auto; */
      display: flex;
    }

    /* slickが内側にdivを挟むケース対策 */
    .slick-slide>div {
      display: flex;
      height: 100%;
      width: 100%;
    }
  }

  /* カードの中身（ボタン下揃え含む） */
  .tour-card {
    display: flex;
    flex-direction: column;
    height: 100%;

    .tour-card__tags {
      display: flex;
      gap: clamp(0px, calc(4 / 1920 * 100vw), 4px);

      .tour-card__tag {
        padding: clamp(0px, calc(3.5 / 1920 * 100vw), 3.5px) clamp(0px, calc(12 / 1920 * 100vw), 12px);
        color: #fff;
        font-size: 12px;

        &.tour-card__tag--recruiting {
          background-color: #0c88bf;
        }

        &.tour-card__tag--location {
          background-color: #40683c;
        }

        li {
          font-size: 12px;
        }
      }
    }

    .tour-card__image-wrapper {
      margin-top: clamp(0px, calc(10 / 1920 * 100vw), 10px);
      width: clamp(0px, calc(370 / 1920 * 100vw), 370px);
      height: clamp(0px, calc(194 / 1920 * 100vw), 194px);
      object-fit: cover;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .tour-card__title {
      /* margin-top: clamp(0px, calc(12 / 1920 * 100vw), 12px);
      font-size: clamp(0px, calc(18 / 1920 * 100vw), 18px);
      font-weight: bold;
      line-height: clamp(0px, calc(28 / 1920 * 100vw), 28px); */
      margin-top: clamp(0px, calc(12 / 1920 * 100vw), 12px);
      font-size: clamp(0px, calc(18 / 1920 * 100vw), 18px);
      font-weight: bold;
      line-height: clamp(0px, calc(28 / 1920 * 100vw), 28px);
      min-height: clamp(0px, calc(84 / 1920 * 100vw), 84px);      
    }

    .tour-card__info {
      margin-top: clamp(0px, calc(17 / 1920 * 100vw), 17px);
      font-size: clamp(0px, calc(14 / 1920 * 100vw), 14px);
      line-height: clamp(0px, calc(20 / 1920 * 100vw), 20px);
      letter-spacing: 0.03em;
      text-align: center;
      color: #40683c;

      &::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: clamp(0px, calc(20 / 1920 * 100vw), 20px);
        height: clamp(0px, calc(20 / 1920 * 100vw), 20px);
        background-image: url(/cms/outdoor/top/img/calendar.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: clamp(0px, calc(10 / 1920 * 100vw), 10px);
      }
    }

    .tour-card__text {
      margin: clamp(0px, calc(20 / 1920 * 100vw), 20px) 0;
      font-size: clamp(0px, calc(14 / 1920 * 100vw), 14px);
      line-height: clamp(0px, calc(26 / 1920 * 100vw), 26px);
      letter-spacing: 0.03em;
    }

    /* ボタンを下揃え */
    .tour-card__button {
      display: block;
      width: 100%;
      background-color: #000;
      color: #fff;

      margin-top: auto;

      font-size: clamp(0px, calc(13 / 1920 * 100vw), 13px);
      font-weight: bold;
      line-height: clamp(0px, calc(19 / 1920 * 100vw), 19px);
      letter-spacing: 0.05em;
      text-align: center;
      padding: clamp(0px, calc(12 / 1920 * 100vw), 12px) 0;
    }
  }

  /* スライド間の余白 */
  .slick-slide {
    margin: 0 clamp(0px, calc(6 / 1920 * 100vw), 6px);
  }

  .slick-list {
    margin: 0 clamp(0px, calc(-12 / 1920 * 100vw), -12px);
  }
}


/* やまどうぐレンタル屋 */
.out-page__rental {
  padding: clamp(0px, calc(100 / 1920 * 100vw), 128px) 0 clamp(0px, calc(112 / 1920 * 100vw), 112px);
  background-color: #F5F5F5;

  h2 {
    text-align: center;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-size: clamp(0px, calc(70 / 1920 * 100vw), 70px);
    font-weight: bold;
    margin-top: clamp(0px, calc(30 / 1920 * 100vw), 30px);
    color: #40683C;
  }

  .out-page__rental-text {
    text-align: center;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-size: clamp(0px, calc(20 / 1920 * 100vw), 20px);
    font-weight: bold;
    margin-top: clamp(0px, calc(23 / 1920 * 100vw), 23px);
    line-height: clamp(0px, calc(41 / 1920 * 100vw), 41px);
    color: #202020;
  }

  .rental-guide {
    margin-top: clamp(0px, calc(70 / 1920 * 100vw), 70px);
  }

  .rental-guide__header {
    text-align: center;
    width: 100%;
    background-image: url(/cms/outdoor/top/img/rental_top.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding: clamp(0px, calc(20 / 1920 * 100vw), 70px) 0 clamp(0px, calc(20 / 1920 * 100vw), 40px);
    font-family: "noto-sans-cjk-jp", sans-serif;
    color: #fff;

    .rental-guide__icon {
      display: block;
      width: clamp(0px, calc(76 / 1920 * 100vw), 76px);
      height: clamp(0px, calc(76 / 1920 * 100vw), 76px);
      margin: auto;
      object-fit: contain;
    }

    &>h3 {
      margin-top: clamp(0px, calc(15 / 1920 * 100vw), 20px);
      font-size: clamp(0px, calc(24 / 1920 * 100vw), 24px);
    }

    &>p {
      margin-top: clamp(0px, calc(15 / 1920 * 100vw), 20px);
      font-size: clamp(0px, calc(16 / 1920 * 100vw), 16px);
      line-height: clamp(0px, calc(26 / 1920 * 100vw), 26px);
    }
  }

  .out-page__rental-inner {
    width: calc(1200 / 1920 * 100vw);
    max-width: 1200px;
    margin: auto;
  }

  .out-page__rental-logo-wrapper {
    margin: auto;
    width: clamp(0px, calc(169 / 1920 * 100vw), 254px);
    height: clamp(0px, calc(45 / 1920 * 100vw), 69px);
  }

  .rental-coupon {
    background-image: url(/cms/outdoor/top/img/rental_bg.jpg);
    background-size: cover;
    background-position: center;
    padding: clamp(0px, calc(60 / 1920 * 100vw), 60px) 0 clamp(0px, calc(67 / 1920 * 100vw), 67px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, calc(106 / 1920 * 100vw), 106px);
    color: #fff;

    .rental-coupon__promo {
      width: clamp(0px, calc(420 / 1920 * 100vw), 420px);

      .rental-coupon__discount {
        font-family: "roboto", sans-serif;
        font-weight: bold;
        font-size: clamp(0px, calc(101 / 1920 * 100vw), 101px);
        line-height: clamp(0px, calc(120 / 1920 * 100vw), 120px);

        &>span {
          font-size: clamp(0px, calc(137 / 1920 * 100vw), 137px);
        }

      }

      .rental-coupon__subheading {
        font-family: "noto-sans-cjk-jp", sans-serif;
        margin-top: clamp(0px, calc(9 / 1920 * 100vw), 9px);
        font-weight: bold;
        font-size: clamp(0px, calc(30 / 1920 * 100vw), 30px);
        line-height: clamp(0px, calc(26 / 1920 * 100vw), 26px);
        text-align: center;
      }

      .rental-coupon__description {
        font-family: "noto-sans-cjk-jp", sans-serif;
        margin-top: clamp(0px, calc(20 / 1920 * 100vw), 20px);
        font-weight: 400;
        font-size: clamp(0px, calc(15 / 1920 * 100vw), 15px);
        line-height: clamp(0px, calc(26 / 1920 * 100vw), 26px);
        text-align: left;
      }

      &>img {
        margin-top: clamp(0px, calc(70 / 1920 * 100vw), 70px);
        width: clamp(0px, calc(410 / 1920 * 100vw), 410px);
        height: clamp(0px, calc(136.67 / 1920 * 100vw), 136.67px);
        object-fit: contain;
      }

      .rental-coupon__notice {
        font-family: "noto-sans-cjk-jp", sans-serif;
        margin-top: clamp(0px, calc(10 / 1920 * 100vw), 10px);
        font-weight: 400;
        font-size: clamp(0px, calc(13 / 1920 * 100vw), 13px);
        line-height: clamp(0px, calc(26 / 1920 * 100vw), 26px);
        text-align: center;
      }

      .copy-button {
        display: block;
        background-color: #000;
        border: none;
        color: #fff;
        font-family: "noto-sans-cjk-jp", sans-serif;
        font-size: clamp(0px, calc(16 / 1920 * 100vw), 16px);
        text-align: center;
        margin: clamp(0px, calc(24 / 1920 * 100vw), 24px) auto 0;
        padding: clamp(0px, calc(15 / 1920 * 100vw), 15px) clamp(0px, calc(32 / 1920 * 100vw), 32px);
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }

      #copy-notification {
        text-align: center;
        font-size: clamp(0px, calc(20 / 1920 * 100vw), 20px);
        width: 100%;
        height: clamp(0px, calc(60 / 1920 * 100vw), 60px);
        line-height: clamp(0px, calc(60 / 1920 * 100vw), 60px);
        background-color: #455D33;
        position: fixed;
        bottom: clamp(-100px, calc(-100 / 1920 * 100vw), -100px);
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
        z-index: 1000;

        &.show {
          bottom: 0;
          opacity: 1;
        }
      }

    }

    .rental-coupon__steps {
      font-family: "noto-sans-cjk-jp", sans-serif;
      width: clamp(0px, calc(490 / 1920 * 100vw), 490px);
      background-color: rgba(255, 255, 255, 0.1);
      text-align: center;
      padding: clamp(0px, calc(18 / 1920 * 100vw), 18px) clamp(0px, calc(35 / 1920 * 100vw), 35px);

      h3 {
        font-size: clamp(0px, calc(20 / 1920 * 100vw), 20px);
        font-weight: bold;
        text-align: center;
      }

      &>ol li {
        display: block;
        font-size: clamp(0px, calc(15 / 1920 * 100vw), 15px);
        margin: 0;
        text-align: left;
        list-style: none;
        padding: clamp(0px, calc(30 / 1920 * 100vw), 30px);
        margin-left: clamp(0px, calc(15 / 1920 * 100vw), 15px);
        text-indent: clamp(0px, calc(-15 / 1920 * 100vw), -15px);

        &>span {
          font-size: clamp(0px, calc(20 / 1920 * 100vw), 20px);
        }

        &:first-child {
          border-bottom: clamp(0px, calc(1 / 1920 * 100vw), 1px) solid #C9C9C9;
          padding: clamp(0px, calc(20 / 1920 * 100vw), 20px) clamp(0px, calc(30 / 1920 * 100vw), 30px) clamp(0px, calc(30 / 1920 * 100vw), 30px);
        }

        img {
          margin-top: clamp(0px, calc(10 / 1920 * 100vw), 10px);
        }
      }
    }

  }


  /* スライダー */
  .slick-arrow.slick-disabled {
    display: none !important;
  }

  .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(-50%);
    z-index: 10;
    width: clamp(0px, calc(40 / 1920 * 100vw), 40px);
    height: clamp(0px, calc(40 / 1920 * 100vw), 40px);
    border: none;
    cursor: pointer;
    font-size: 0;
    transition: all ease 0.5s;

    &:hover {
      opacity: 0.8;
    }
  }

  .slick-prev {
    left: clamp(-50px, calc(-50 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/prev.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .slick-next {
    right: clamp(-50px, calc(-50 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/next.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .rental-item-list {
    position: relative;
    width: calc(1200 / 1920 * 100vw);
    max-width: 1200px;
    margin: clamp(0px, calc(20 / 1920 * 100vw), 20px) auto 0;

    box-sizing: border-box;

    .slick-track {
      display: flex;
    }

    .slick-slide {
      height: auto;
      display: flex;
      margin: 0 clamp(0px, calc(6 / 1920 * 100vw), 6px);
    }

    .slick-list {
      overflow: hidden;
    }

    .slick-slide>div {
      display: flex;
      height: 100%;
      width: 100%;
    }

    .rental-item-list__item {
      width: clamp(0px, calc(232 / 1920 * 100vw), 232px);
      display: flex;
      flex-direction: column;
      align-items: stretch;

      /* 高さ揃えのため */
      height: 100%;

      a {
        display: block;
        width: 100%;
        height: 100%;

        img {
          width: clamp(0px, calc(232 / 1920 * 100vw), 232px);
          height: clamp(0px, calc(232 / 1920 * 100vw), 232px);
          object-fit: contain;
        }

        p {
          margin-top: clamp(0px, calc(10 / 1920 * 100vw), 10px);
          font-size: clamp(0px, calc(14 / 1920 * 100vw), 14px);
          line-height: clamp(0px, calc(22 / 1920 * 100vw), 22px);
          letter-spacing: 0.06em;
        }
      }

    }
  }
}

/* OM×OUTDOOR ストーリー */
.out-page__story {
  padding: clamp(0px, calc(46 / 1920 * 100vw), 46px) 0 clamp(0px, calc(120 / 1920 * 100vw), 120px);

  .out-page__story-inner {
    width: calc(1200 / 1920 * 100vw);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  h2 {
    font-size: clamp(0px, calc(24 / 1920 * 100vw), 24px);
    text-align: center;
  }

  .slick-arrow.slick-disabled {
    display: none !important;
  }

  .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(-50%);
    z-index: 10;
    width: clamp(0px, calc(40 / 1920 * 100vw), 40px);
    height: clamp(0px, calc(40 / 1920 * 100vw), 40px);
    border: none;
    cursor: pointer;
    font-size: 0;
    transition: all ease 0.5s;

    &:hover {
      opacity: 0.8;
    }
  }

  .slick-prev {
    left: clamp(-50px, calc(-50 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/prev.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .slick-next {
    right: clamp(-50px, calc(-50 / 1920 * 100vw), 0px);
    background-image: url(/cms/outdoor/top/img/next.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .story-list {
    position: relative;
    width: calc(1216 / 1920 * 100vw);
    max-width: 1216px;
    margin: clamp(0px, calc(53 / 1920 * 100vw), 53px) auto 0;

    box-sizing: border-box;

    .slick-track {
      display: flex;
    }

    .slick-slide {
      height: auto;
      display: flex;
      margin: 0 clamp(0px, calc(3 / 1920 * 100vw), 3px);
    }

    .slick-list {
      overflow: hidden;
    }

    .slick-slide>div {
      display: flex;
      height: 100%;
      width: 100%;
    }

    .story-list__item {
      width: clamp(0px, calc(300 / 1920 * 100vw), 300px);
      display: flex;
      flex-direction: column;
      align-items: stretch;

      /* 高さ揃えのため */
      height: 100%;

      a {
        width: clamp(0px, calc(300 / 1920 * 100vw), 300px);
        display: block;

        .story-list__tag {
          display: block;
          font-family: "noto-sans-cjk-jp", sans-serif;
          margin-top: clamp(0px, calc(10 / 1920 * 100vw), 10px);
          font-size: clamp(0px, calc(15 / 1920 * 100vw), 15px);
          background-color: #40683C;
          color: #fff;
          width: fit-content;
          padding: clamp(0px, calc(2 / 1920 * 100vw), 2px) clamp(0px, calc(18 / 1920 * 100vw), 18px);
        }

        .story-list__title {
          font-family: "noto-sans-cjk-jp", sans-serif;
          margin-top: clamp(0px, calc(10 / 1920 * 100vw), 10px);
          color: #292929;
          font-size: clamp(0px, calc(16 / 1920 * 100vw), 16px);
        }

        img {
          width: clamp(0px, calc(300 / 1920 * 100vw), 300px);
          height: clamp(0px, calc(140 / 1920 * 100vw), 140px);
          object-fit: cover;
        }

      }

    }

  }
}

/* .out-page__story .story-list a,
.out-page__story .story-list img {
  -webkit-user-drag: none;
  user-drag: none;
} */

/* モーダル */
.out-page__modal {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
}

.out-page__modal.active {
  display: block;
}

.out-page__modal .modal-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
}

.out-page__modal .modal-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: clamp(0px, calc(1760 / 1920 * 100vw), 1760px);
  height: 80%;
  background-color: #fff;
  max-width: 1920px;
}

.out-page__modal .modal-inner .close {
  width: clamp(0px, calc(50 / 1920 * 100vw), 50px);
  height: clamp(0px, calc(50 / 1920 * 100vw), 50px);
  position: absolute;
  top: clamp(0px, calc(24 / 1920 * 100vw), 24px);
  right: clamp(0px, calc(24 / 1920 * 100vw), 24px);
  background-image: url(/cms/outdoor/top/img/close.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
}

.out-page__modal .modal-inner .modal-contents {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: clamp(0px, calc(42 / 1920 * 100vw), 42px) clamp(0px, calc(110 / 1920 * 100vw), 110px);
  overflow-y: scroll;
  scrollbar-width: none;
}

.out-page__modal .modal-inner .modal-contents::-webkit-scrollbar {
  display: none;
}

.out-page__modal .modal-inner .modal-contents h3 {
  color: #40683C;
  font-size: clamp(0px, calc(28 / 1920 * 100vw), 28px);
  text-align: center;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: bold;
}

.out-page__modal .modal-inner .modal-contents ul {
  width: clamp(0px, calc(1540 / 1920 * 100vw), 1540px);
  display: flex;
  justify-content: start;
  gap: clamp(0px, calc(60 / 1920 * 100vw), 60px) clamp(0px, calc(12 / 1920 * 100vw), 12px);
  margin-top: clamp(0px, calc(38 / 1920 * 100vw), 38px);
  flex-wrap: wrap;
}

.out-page__modal .modal-inner .modal-contents ul li {
  width: clamp(0px, calc(376 / 1920 * 100vw), 376px);
  max-width: clamp(0px, calc(376 / 1920 * 100vw), 376px);
}

.out-page__modal .modal-inner .modal-contents ul li img {
  width: 100%;
  height: fit-content;
  object-fit: contain;
  display: block;
}

.out-page__modal .modal-inner .modal-contents ul li p {
  font-family: "noto-sans-cjk-jp", sans-serif;
}

.out-page__modal .modal-inner .modal-contents ul li .modal-list__brand-name {
  margin-top: clamp(0px, calc(12 / 1920 * 100vw), 12px);
  font-size: clamp(0px, calc(12 / 1920 * 100vw), 12px);
}

.out-page__modal .modal-inner .modal-contents ul li .modal-list__title {
  font-size: clamp(0px, calc(15 / 1920 * 100vw), 15px);
}


/* ==========================================================================
   レスポンシブ対応 (SP: 767px以下)
   ========================================================================== */
@media (max-width: 767px) {
  h1 {
    font-size: 18px;
    margin: 0 auto 18px;
    text-align: center;
    font-weight: 500;
  }

  .wrapper_ .block-breadcrumb-wrap {
    padding-top: 10px !important;
  }

  .out-page__mv {

    .mv-slider__slide {
      width: calc(250 / 430 * 100vw) !important;
      height: auto;
      margin: 0 5px;

      img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      .mv-slider__brand-name {
        font-size: 12px;
      }

      .mv-slider__title {
        font-size: 14px;
        font-weight: normal;
      }
    }

    .slick-arrow {
      width: calc(35 / 430 * 100vw);
      height: calc(35 / 430 * 100vw);
      max-width: none;
      z-index: 10;
    }

    .slick-prev {
      left: calc(67 / 430 * 100vw);
    }

    .slick-next {
      right: calc(67 / 430 * 100vw);
    }
  }

  /* --- もっと見るボタン --- */
  .out-page__more-button-wrapper {
    margin-top: 30px;
    text-align: center;

    .more-button {
      width: 260px;
      padding: 15px 0;
      font-size: 16px;
    }
  }

  /* FIND YOUR OUTDOOR STYLE */
  .out-page__find {
    position: relative;
    margin-top: calc(80 / 430 * 100vw);
    padding: calc(62 / 430 * 100vw) calc(20 / 430 * 100vw);
    background-image:
      linear-gradient(rgba(36, 36, 36, 0.8), rgba(36, 36, 36, 0.8)),
      url(/cms/outdoor/top/img/find_bg_sp.png);

    h2 {
      width: 100%;
      max-width: none;
      font-size: calc(30 / 430 * 100vw);
      margin: auto;
      line-height: 1;

    }

    p {
      width: 100%;
      max-width: none;
      font-size: calc(12 / 430 * 100vw);
      line-height: calc(15 / 430 * 100vw);
      margin: calc(6 / 430 * 100vw) auto 0;
    }

    .search-nav {
      display: flex;
      width: 100%;
      max-width: none;
      margin: calc(40 / 430 * 100vw) auto 0;
      gap: calc(2 / 430 * 100vw);

      .search-nav__item {
        position: relative;
        width: calc(125 / 430 * 100vw);
        height: calc(150 / 430 * 100vw);

        &::before {
          bottom: calc(20 / 430 * 100vw);
          width: calc(30 / 430 * 100vw);
          ;
          height: calc(30 / 430 * 100vw);
          ;
        }

        a {
          display: block;
          color: #fff;
          line-height: 1.5;
          font-size: calc(15 / 430 * 100vw);
          padding-top: calc(30 / 430 * 100vw);
        }
      }
    }
  }

  /* カテゴリーから探す  */
  .out-page__search-category {
    background-color: #F7F7F7;
    padding: calc(60 / 430 * 100vw) 0;

    .out-page__search-category-inner {
      padding: 0 calc(15 / 430 * 100vw);
      width: 100%;
    }

    h2 {
      font-size: calc(18 / 430 * 100vw);
      width: 100%;
      text-align: center;
      max-width: none;
      margin: auto;
    }

    .category-list {
      width: 100%;
      max-width: none;
      margin: calc(20 / 430 * 100vw) auto 0;

      display: grid;
      grid-template-columns: repeat(auto-fit, calc(126 / 430 * 100vw));
      justify-content: center;
      /* gap: calc(20 / 430 * 100vw) calc(2 / 430 * 100vw); */
      gap: calc(10 / 430 * 100vw);

      .category-list__item {
        width: calc(126 / 430 * 100vw);

        a {
          width: 100%;
          height: 100%;
          display: block;

          .category-list__name {
            margin-top: calc(6 / 430 * 100vw);
            font-size: calc(12 / 430 * 100vw);
          }
        }

        .category-list__image-wrap {
          display: flex;
          width: calc(126 / 430 * 100vw);
          height: calc(126 / 430 * 100vw);

          >img {
            display: block;
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
          }
        }
      }
    }
  }

  /* ブランドから探す */
  .out-page__search-brand {
    background-color: #fff;
    padding: calc(60 / 430 * 100vw) 0;
    width: 100%;

    .out-page__search-brand-inner {
      padding: 0 calc(15 / 430 * 100vw);
      width: 100%;
    }

    h2 {
      font-size: calc(18 / 430 * 100vw);
      width: 100%;
      text-align: center;
      max-width: none;
      margin: auto;
    }

    .brand-list {
      width: 100%;
      max-width: none;
      margin: calc(20 / 430 * 100vw) auto 0;

      display: grid;
      grid-template-columns: repeat(auto-fit, calc(126 / 430 * 100vw));
      justify-content: center;
      gap: calc(10 / 430 * 100vw);

      .brand-list__item {
        overflow: hidden;
        width: calc(126 / 430 * 100vw);
        height: calc(126 / 430 * 100vw);
        border-radius: 0;

        a {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .brand-list__image-wrap {
        display: flex;
        width: calc(126 / 430 * 100vw);
        height: calc(126 / 430 * 100vw);


        >img {
          display: block;
          object-fit: contain;
          width: auto;
          height: auto;
        }
      }
    }
  }

  /* 商品から探す */
  .out-page__search-item {
    background-color: #F7F7F7;
    padding: calc(60 / 430 * 100vw) 0;
    overflow-x: hidden;

    .out-page__search-item-inner {
      padding: 0;
      width: 100%;
    }

    h2 {
      font-size: calc(18 / 430 * 100vw);
      width: 100%;
      text-align: center;
      max-width: none;
      margin: auto;
    }

    .slick-arrow.slick-disabled {
      display: none !important;
    }

    .slick-arrow {
      display: none !important;
    }

    .slick-prev {
      display: none !important;
    }

    .slick-next {
      display: none !important;
    }

    .product-list {
      position: relative;
      width: 100%;
      max-width: auto;
      margin-top: calc(20 / 430 * 100vw);
      margin-left: calc(14 / 430 * 100vw);

      box-sizing: border-box;

      .slick-track {
        display: flex;
      }

      .slick-slide {
        height: auto;
        display: flex;
        margin: 0 calc(5 / 430 * 100vw);
      }

      .slick-list {
        overflow: hidden;
      }

      .slick-slide>div {
        display: flex;
        height: 100%;
        width: 100%;
      }

      .product-list__item {
        width: calc(150 / 430 * 100vw);
        display: flex;
        flex-direction: column;
        align-items: stretch;

        /* 高さ揃えのため */
        height: 100%;

        a {

          .product-list__brand,
          .genre_filter_field83 li {
            margin-top: calc(4 / 430 * 100vw);
            font-size: calc(14 / 430 * 100vw);
            color: #707070;
          }

          .product-list__brand {
            font-size: calc(12 / 1920 * 100vw);
          }

          .img-block {
            width: calc(150 / 430 * 100vw);
            height: calc(150 / 430 * 100vw);
            background-color: #eee;

            img {
              width: calc(150 / 430 * 100vw);
              height: calc(150 / 430 * 100vw);
              object-fit: cover;
            }
          }

          .product-list__name {
            font-family: "noto-sans-cjk-jp", sans-serif;
          }
        }

      }
    }

  }

  /* OM SYSTEM TOUR */
  .out-page__tour {
    overflow-x: hidden;
    position: relative;
    padding: calc(70 / 430 * 100vw) calc(20 / 430 * 100vw);
    background-image: url(/cms/outdoor/top/img/tour_bg_sp.png);
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;

    &::before {
      content: "";
      display: block;
      background-image: url(/cms/outdoor/top/img/tour_titile_sp.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: calc(26 / 430 * 100vw);
      left: 0;
      width: 100vw;
      height: calc(66 / 430 * 100vw);
    }

    .out-page__tour-logo {
      text-align: center;

      img {
        width: calc(82 / 430 * 100vw);
        height: calc(82 / 430 * 100vw);
      }

      p {
        margin-top: calc(6 / 430 * 100vw);
        color: #fff;
        font-size: calc(14 / 430 * 100vw);
        line-height: calc(20 / 430 * 100vw);
      }
    }

    h2 {
      text-align: center;
      color: #fff;
      font-size: calc(29 / 430 * 100vw);
      font-weight: bold;
      margin-top: calc(23 / 430 * 100vw);
      letter-spacing: 0;
      white-space: nowrap;
    }

    .out-page__tour-text {
      text-align: center;
      color: #fff;
      font-size: calc(13 / 430 * 100vw);
      font-weight: bold;
      line-height: calc(27 / 430 * 100vw);
      margin-top: calc(20 / 430 * 100vw);
    }

    .tour-slider .slick-arrow.slick-disabled {
      display: none !important;
    }

    .slick-arrow {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      transform: translateY(-50%);
      z-index: 10;
      width: calc(50 / 430 * 100vw);
      height: calc(50 / 430 * 100vw);

      border: none;
      cursor: pointer;
      font-size: 0;
      transition: all ease .5s;

      &:hover {
        opacity: 0.8;
      }
    }

    .slick-prev {
      display: none !important;
      left: calc(-20 / 430 * 100vw);
      background-image: url(/cms/outdoor/top/img/prev.png);
      background-position: center;
      background-size: contain;
    }

    .slick-next {
      display: none !important;
      right: calc(-20 / 430 * 100vw);
      ;
      background-image: url(/cms/outdoor/top/img/next.png);
      background-position: center;
      background-size: contain;
    }

    .tour-card {
      position: relative;
    }

    .tour-slider {
      box-sizing: border-box;

      .slick-track {
        display: flex;
      }

      .slick-slide {
        /* height: auto; */
        display: flex;
      }

      .slick-list {
        overflow: visible;
      }

      .slick-slide>div {
        display: flex;
        height: 100%;
        width: 100%;
      }

      .tour-card__button {
        margin-top: auto;
      }
    }

    .tour-card-list {
      position: relative;
      /* max-width: none; */
      width: 100%;
      margin: calc(37 / 430 * 100vw) 10px 0;

      .tour-card-list__item {
        width: calc(310 / 430 * 100vw);
        min-height: calc(515 / 430 * 100vw);
        flex-direction: column;
        align-items: stretch;
        padding: calc(10 / 430 * 100vw) calc(15 / 430 * 100vw);
      }

      .tour-card {
        display: flex;
        flex-direction: column;
        /* height: 100%; */

        .tour-card__tags {
          display: flex;
          gap: calc(4 / 430 * 100vw);

          .tour-card__tag {
            padding: calc(3.5 / 430 * 100vw) calc(12 / 430 * 100vw);
            font-size: calc(12 / 430 * 100vw);
          }
        }

        .tour-card__image-wrapper {
          margin-top: calc(10 / 430 * 100vw);
          width: 100%;
          height: fit-content;
          /* width: calc(280 / 430 * 100vw);
          height: calc(147 / 430 * 100vw); */

          img {
            /* width: calc(280 / 430 * 100vw);
            height: calc(147 / 430 * 100vw); */
            object-fit: cover;
          }
        }

        .tour-card__title {
          margin-top: calc(12 / 430 * 100vw);
          font-size: calc(16 / 430 * 100vw);
          font-weight: bold;
          line-height: calc(22 / 430 * 100vw);
          min-height: calc(88 / 430 * 100vw);
        }

        .tour-card__info {
          margin-top: calc(12 / 430 * 100vw);
          font-size: calc(12 / 430 * 100vw);
          line-height: calc(17 / 430 * 100vw);

          &::before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: calc(15 / 430 * 100vw);
            height: calc(15 / 430 * 100vw);
            margin-right: calc(10 / 430 * 100vw);
          }
        }

        .tour-card__text {
          margin: calc(12 / 430 * 100vw) 0 calc(20 / 430 * 100vw);
          font-size: calc(12 / 430 * 100vw);
          line-height: calc(19 / 430 * 100vw);
          min-height: calc(115 / 430 * 100vw);

        }

        .tour-card__button {
          /* margin-top: calc(12 / 430 * 100vw); */
          font-size: calc(12 / 430 * 100vw);
          line-height: calc(19 / 430 * 100vw);
          padding: calc(12 / 430 * 100vw) 0;
        }

      }

    }

    .slick-slide {
      margin: 0 calc(12 / 430 * 100vw);
    }

    .slick-list {
      margin: 0 calc(-12 / 430 * 100vw);
    }

    .tour-card__text.is-clamped {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
      overflow: hidden;
    }

    .tour-card__text.is-expanded {
      display: block;
      -webkit-line-clamp: initial;
      overflow: visible;
    }

    .tour-card__more {
      display: block;
      margin-top: -10px;
      border: 0;
      background: transparent;
      padding: 0;
      text-decoration: underline;
      cursor: pointer;
      padding-top: clamp(0px, calc(5 / 430 * 100vw), 5px);
      padding-bottom: clamp(0px, calc(15 / 430 * 100vw), 15px);
      position: absolute;
      bottom: clamp(0px, calc(42 / 430 * 100vw), 42px);
      width: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      font-size: calc(12 / 430 * 100vw);
      text-decoration: none;
    }

    .tour-card__more[aria-expanded="true"] {
      position: relative;
      bottom: auto;
      margin-bottom: clamp(0px, calc(8 / 430 * 100vw), 8px);
    }

    .tour-card__more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: clamp(0px, calc(6 / 430 * 100vw), 6px);
    }

    /* 閉じている時は「＋」 */
    .tour-card__more[aria-expanded="false"]::before {
      content: "+";
      display: inline-block;
      border: 1px solid #000;
      line-height: clamp(0px, calc(14 / 430 * 100vw), 14px);
      font-size: clamp(0px, calc(13 / 430 * 100vw), 13px);
      width: clamp(0px, calc(15 / 430 * 100vw), 15px);
      height: clamp(0px, calc(15 / 430 * 100vw), 15px);
      border-radius: 50px;
    }

    /* 開いている時は「−」 */
    .tour-card__more[aria-expanded="true"]::before {
      content: "−";
      display: inline-block;
      border: 1px solid #000;
      line-height: clamp(0px, calc(14 / 430 * 100vw), 14px);
      font-size: clamp(0px, calc(13 / 430 * 100vw), 13px);
      width: clamp(0px, calc(15 / 430 * 100vw), 15px);
      height: clamp(0px, calc(15 / 430 * 100vw), 15px);
      border-radius: 50px;
    }

  }



  /* やまどうぐレンタル屋 */
  .out-page__rental {
    padding: calc(80 / 430 * 100vw) 0 calc(80 / 430 * 100vw);
    background-color: #F5F5F5;

    .out-page__rental-inner {
      width: auto;
      margin: auto;
    }

    .out-page__rental-logo-wrapper {
      margin: auto;
      width: calc(132 / 430 * 100vw);
      height: calc(37 / 430 * 100vw);
    }

    h2 {
      font-size: calc(27 / 430 * 100vw);
      margin-top: calc(24 / 430 * 100vw);
    }

    .out-page__rental-text {
      font-size: calc(13 / 430 * 100vw);
      margin-top: calc(16 / 430 * 100vw);
      line-height: calc(27 / 430 * 100vw);
    }

    .rental-guide {
      margin-top: calc(30 / 430 * 100vw);
      padding: 0 calc(15 / 430 * 100vw);
    }

    .rental-guide__header {
      text-align: center;
      width: 100%;
      background-image: url(/cms/outdoor/top/img/rental_top.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      padding: calc(36 / 430 * 100vw) 0 calc(32 / 430 * 100vw);

      .rental-guide__icon {
        width: calc(56.02 / 430 * 100vw);
        height: calc(56.02 / 430 * 100vw);
        ;
      }

      >h3 {
        margin-top: calc(18 / 430 * 100vw);
        font-size: calc(16 / 430 * 100vw);
        font-weight: bold;
      }

      >p {
        padding: 0 calc(21 / 430 * 100vw);
        margin-top: calc(12 / 430 * 100vw);
        font-size: calc(13 / 430 * 100vw);
        line-height: calc(23 / 430 * 100vw);
      }
    }

    .rental-coupon {
      background-image: url(/cms/outdoor/top/img/rental_bg_sp.png);
      padding: calc(16 / 430 * 100vw) calc(15 / 430 * 100vw);
      flex-direction: column;
      gap: calc(38 / 430 * 100vw);

      .rental-coupon__promo {
        width: 100%;
        text-align: center;

        .rental-coupon__discount {
          font-size: calc(55 / 430 * 100vw);
          line-height: calc(66 / 430 * 100vw);
          text-align: center;

          >span {
            font-size: calc(75 / 430 * 100vw);
          }
        }

        .rental-coupon__subheading {
          margin-top: 0;
          font-size: calc(21 / 430 * 100vw);
          line-height: calc(18 / 430 * 100vw);
        }

        .rental-coupon__description {
          margin-top: calc(16.9 / 430 * 100vw);
          font-size: calc(13 / 430 * 100vw);
          line-height: calc(22 / 430 * 100vw);
          text-align: left;
        }

        >img {
          width: calc(372.73 / 430 *100vw);
          height: calc(124.24 / 430 *100vw);
          margin: calc(21 / 430 * 100vw) auto 0;
          object-fit: contain;
        }

        .rental-coupon__btns {
          display: flex;
          flex-direction: column-reverse;
        }

        .rental-coupon__notice {
          margin-top: calc(7 / 430 * 100vw);
          font-size: calc(11 / 430 * 100vw);
          line-height: calc(26 / 430 * 100vw);
        }

        .copy-button {
          font-size: calc(16 / 430 * 100vw);
          text-align: center;
          margin: calc(12 / 430 * 100vw) auto 0;
          padding: calc(16 / 430 * 100vw) calc(32 / 430 * 100vw);
        }

        #copy-notification {
          text-align: center;
          font-size: 20px;
          width: 100%;
          height: 60px;
          line-height: 60px;
          background-color: #455D33;
          position: fixed;
          bottom: -100px;
          left: 50%;
          transform: translateX(-50%);
          opacity: 0;
          transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
          z-index: 1000;
        }

        #copy-notification.show {
          bottom: 0;
          opacity: 1;
        }
      }

      .rental-coupon__steps {
        width: 100%;
        padding: calc(25 / 430 * 100vw) calc(20 / 430 * 100vw);

        h3 {
          font-size: calc(14 / 430 * 100vw);
          font-weight: bold;
        }

        >ol {
          li {
            font-size: calc(13 / 430 * 100vw);
            padding: calc(20 / 430 * 100vw) 0;
            margin-left: 0;
            text-indent: 0;

            >span {
              font-size: calc(15 / 430 * 100vw);
            }

            &:first-child {
              padding: calc(20 / 430 * 100vw) 0 calc(30 / 430 * 100vw);
            }

            img {
              margin-top: calc(13 / 430 * 100vw);
            }
          }
        }
      }
    }


    /* スライダー */
    .slick-arrow.slick-disabled {
      display: none !important;
    }

    .slick-arrow {
      display: none !important;
    }

    .slick-prev,
    .slick-next {
      display: none !important;
    }

    .rental-item-list {
      position: relative;
      width: 100%;
      max-width: auto;
      margin-top: calc(40 / 430 * 100vw);

      box-sizing: border-box;

      .slick-track {
        display: flex;
      }

      .slick-slide {
        height: auto;
        display: flex;
        margin: 0 calc(5 / 430 * 100vw);

      }

      .slick-list {
        overflow: hidden;
      }

      .slick-slide>div {
        display: flex;
        height: 100%;
        width: 100%;
      }

      .rental-item-list__item {
        width: calc(150 / 430 * 100vw);
        display: flex;
        flex-direction: column;
        align-items: stretch;

        /* 高さ揃えのため */
        height: 100%;

        a {
          display: block;
          width: 100%;
          height: 100%;

          img {
            width: calc(150 / 430 * 100vw);
            height: calc(150 / 430 * 100vw);
            object-fit: cover;
          }

          p {
            margin-top: calc(6 /430 * 100vw);
            font-size: calc(12 /430 * 100vw);
            line-height: calc(16 /430 * 100vw);
            letter-spacing: 0.06em;
          }
        }

      }
    }


  }

  /* OM×OUTDOOR ストーリー */
  .out-page__story {
    padding: calc(40 / 430 * 100vw) 0 calc(40 / 430 * 100vw);

    .out-page__story-inner {
      padding-left: calc(15 / 430 * 100vw);
      width: 100%;
      max-width: auto;
    }

    h2 {
      font-size: calc(18 / 430 * 100vw);
    }

    /* スライダー */
    .slick-arrow.slick-disabled {
      display: none !important;
    }

    .slick-arrow {
      display: none !important;
    }

    .slick-prev,
    .slick-next {
      display: none !important;
    }

    .story-list {
      position: relative;
      width: 100%;
      max-width: auto;
      margin-top: calc(15 / 430 * 100vw);
      box-sizing: border-box;

      .slick-track {
        display: flex;
      }

      .slick-slide {
        height: auto;
        display: flex;
        margin: 0 calc(5 / 430 * 100vw);

      }

      .slick-list {
        overflow: hidden;
      }

      .slick-slide>div {
        display: flex;
        height: 100%;
        width: 100%;
      }

      .story-list__item {
        width: calc(300 / 430 * 100vw);
        max-width: 300px;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        /* 高さ揃えのため */
        height: 100%;
      }

      .story-list__item a {
        width: calc(300 / 430 * 100vw);
        height: fit-content;
        max-width: 300px;
        display: block;

        img {
          display: block;
          width: calc(300 / 430 * 100vw);
          height: calc(140 / 430 * 100vw);
          object-fit: cover;
        }

        .story-list__title {
          margin-top: calc(10 / 430 * 100vw);
          color: #292929;
          font-size: 12px;
        }
      }

      .story-list__tag {
        margin-top: calc(10 / 430 * 100vw);
        font-size: 12px !important;
        padding: calc(2 / 430 * 100vw) calc(15 / 430 * 100vw);
      }

      .story-list__title {
        margin-top: calc(10 / 430 * 100vw);
        color: #292929;
        font-size: calc(15 / 430 * 100vw);
      }


    }
  }

  .out-page__modal {

    .modal-wrapper {
      width: 100%;
      height: 100%;
    }

    .modal-inner {
      width: 100%;
      height: 85%;

      .close {
        width: calc(38 / 430 * 100vw);
        height: calc(38 / 430 * 100vw);
        top: calc(12 / 430 * 100vw);
        right: calc(15 / 430 * 100vw);
      }

      .modal-contents {
        width: 100%;
        height: 100%;
        padding: calc(20 / 430 * 100vw);

        h3 {
          font-size: calc(21 / 430 * 100vw);
        }

        ul {
          width: 100%;
          gap: calc(21 / 430 * 100vw) calc(12 / 430 * 100vw);
          margin-top: calc(15 / 430 * 100vw);

          li {
            width: calc(189 / 430 * 100vw);
            max-width: 189px;

            a{display: block;}
            img {
              width: 100%;
              height: fit-content;
              object-fit: contain;
              display: block;
            }

            p {
              font-family: "noto-sans-cjk-jp", sans-serif;
            }

            .modal-list__brand-name {
              margin-top: calc(4 / 430 * 100vw);
              font-size: calc(11 / 430 * 100vw);
            }

            .modal-list__title {
              margin-top: calc(2 / 430 * 100vw);
              font-size: calc(13 / 430 * 100vw);
            }
          }

        }
      }
    }
  }
}

/* body.zoom {
  .category-list {
    grid-template-columns: repeat(auto-fit, 122.5px);

    .category-list__item {
      width: 122.5px;

      .category-list__image-wrap {
        width: 122.5px;
        height: 122.5px;

        >img {
          width: 100px;
          height: 100px;
        }
      }

      .category-list__name {
        font-size: 9px;
      }
    }
  }

  .brand-list {
    grid-template-columns: repeat(auto-fit, 122.5px);

    .brand-list__item {
      width: 122.5px;
      height: 122.5px;
    }

    .brand-list__image-wrap {
      width: 100%;
      height: 100%;

      >img {
        max-width: 104px;
        max-height: 104px;
      }
    }
  }

} */

.tour-card-list .tour-card__tag--location span.store-pref > span:first-child:not(:only-child) {display: none;}

/* 検証 */
@media (max-width: 767px) {
  .out-page__modal .modal-inner .modal-contents ul li{min-height: calc(322 / 430 * 100vw);}
  .out-page__modal .modal-inner .modal-contents ul li img{
    height: auto;
    /* object-fit: initial; */
    /* border: transparent; */
  }
  /* .out-page__modal .modal-inner .modal-contents ul li p{border: transparent;} */
  .out-page__modal{height: 100%;}

}
