@charset "UTF-8";
/*-------------------------------
TOP　共通
---------------------------------*/
.l-containerTop {
  --categoryText: clamp(0.9rem, 1.2vw, 1.1rem);
  --captionText: clamp(0.8rem, 1.2vw, 1rem);
  --captionLetter: clamp(0.05rem, 0.05vw, 0.1rem);
  padding: clamp(70px, 6vw, 100px) 0 clamp(80px, 10vw, 200px);
  display: grid;
  gap: min(140px, 20vw);
  position: relative;
}

/*-------------------------------
マップイラスト　PC版
---------------------------------*/
@media screen and (min-width: 1001px) {
  /*---MV背景画像---*/
  .p-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2/1.1;
    background: #94c8e0;
  }
  .p-hero__bg--pc img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom;
       object-position: bottom;
    display: block;
    width: 120%;
    aspect-ratio: 2/1.1;
  }
  .p-hero__bg--sp {
    display: none;
  }
  /*---MVマップ用マーカー---*/
  .p-hero__marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    aspect-ratio: 2/1.1;
  }
  .p-hero__markerItem {
    position: absolute;
    pointer-events: auto;
  }
  .p-hero__markerButton {
    width: calc(15px + 1vw);
    cursor: pointer;
  }
  .p-hero__markerImage {
    -o-object-fit: contain;
       object-fit: contain;
    animation: pulse 3s ease-in-out infinite;
    transition: transform 0.3s ease;
  }
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
      filter: brightness(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  .p-hero__markerContent {
    display: none;
  }
  .p-hero__markerContent.active {
    z-index: 1000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    display: block;
  }
  .p-hero__markerContentItem {
    max-width: 200px;
    width: calc(100px + 5vw);
    display: grid;
    place-items: center;
    gap: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 3px #333;
  }
  .p-hero__markerPhoto {
    border-radius: 5px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    aspect-ratio: 2/1.4;
  }
  .p-hero__markerCaption {
    font-size: var(--subText);
    letter-spacing: var(--captionLetter);
  }
}
/*------------------------------
マップイラスト　PC版マーカー位置
----------------------------------*/
.p-hero__markerItem#cate-sea-mooring {
  top: 65%;
  right: 25%;
}
.p-hero__markerItem#cate-sea-marine-civil {
  top: 50%;
  right: 40%;
}
.p-hero__markerItem#cate-sea-fishery {
  top: 63%;
  right: 14%;
}
.p-hero__markerItem#cate-sea-yacht {
  top: 71%;
  right: 37%;
}
.p-hero__markerItem#cate-sea-other {
  bottom: 28%;
  left: 40%;
}
.p-hero__markerItem#cate-ground-forestry {
  top: 20%;
  right: 35%;
}
.p-hero__markerItem#cate-ground-climbing {
  top: 35%;
  left: 8%;
  transform: translateX(-50%);
}
.p-hero__markerItem#cate-ground-slope {
  top: 10%;
  right: 8%;
}
.p-hero__markerItem#cate-ground-park {
  top: 43%;
  left: 42%;
}
.p-hero__markerItem#cate-ground-utility {
  top: 29%;
  right: 35%;
}
.p-hero__markerItem#cate-ground-stage {
  top: 20%;
  left: 35%;
}
.p-hero__markerItem#cate-ground-railway {
  top: 12%;
  left: 55%;
}
.p-hero__markerItem#cate-ground-other {
  top: 15%;
  right: 25%;
}

/*------------------------------
マップイラスト　スマホ版
----------------------------------*/
@media screen and (max-width: 1000px) {
  .p-hero {
    display: block;
    width: 100%;
    height: 100vh;
    max-height: none;
    position: relative;
    overflow: hidden;
    aspect-ratio: 2/1.1;
    background: #94c8e0;
  }
  .p-hero__bg--pc, .p-hero__marker {
    display: none !important;
  }
  .p-hero__bg--sp, .p-hero__bg--sp img {
    display: block;
    width: 100%;
    height: 100vh;
    max-height: none;
  }
  .p-hero__bg--sp {
    position: relative;
    overflow: visible;
  }
  .p-hero__bg--sp img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1400px;
    aspect-ratio: 1.8;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    animation: mapimage_slide 65s linear infinite;
  }
  @keyframes mapimage_slide {
    0% {
      left: 0;
    }
    50% {
      left: calc(-1400px + 100vw);
    }
    100% {
      left: 0;
    }
  }
}
/*-------------------------------
注目のロープのカテゴリー
---------------------------------*/
.p-category {
  margin: auto;
  width: var(--wideBoxWidth);
  display: grid;
  gap: var(--sectionGap);
}
.p-category__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 19%, 185px), 1fr));
  justify-content: center;
  gap: min(30px, 2vw) min(20px, 1.5vw);
}
.p-category__item {
  display: grid;
  justify-content: center;
  align-items: start;
}
.p-category__item--blue {
  background: url(../img/common/bg_circle_blue.svg) left top no-repeat;
  background-size: 45%;
}
.p-category__item--green {
  background: url(../img/common/bg_circle_green.svg) left top no-repeat;
  background-size: 45%;
}
.p-category__item--orange {
  background: url(../img/common/bg_circle_orange.svg) left top no-repeat;
  background-size: 45%;
}
.p-category__image {
  width: 100%;
  padding: clamp(12px, 1.4vw, 20px);
  aspect-ratio: 1/1;
  text-align: center;
}
.p-category__image img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  margin: 0 auto 20px;
  border-radius: 50%;
}
.p-category__image figcaption {
  font-size: var(--categoryText);
  letter-spacing: var(--captionLetter);
  font-weight: bold;
}

/*-------------------------------
ABOUT ROPE
---------------------------------*/
.p-rope {
  display: grid;
  gap: var(--sectionGap);
  place-items: center;
}
.p-rope__heading {
  display: grid;
  width: var(--wideBoxWidth);
  margin: auto;
  gap: 1rem;
}
.p-rope__catch {
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.8;
  letter-spacing: min(0.4rem, 0.5vw);
  text-align: center;
}
.p-rope__lead {
  font-size: var(--bodyText);
  text-align: center;
  font-weight: normal;
  line-height: 1.8;
  letter-spacing: min(0.4rem, 0.5vw);
}

/*---------海山陸の詳細---------*/
.p-rope__detail {
  display: grid;
  gap: var(--sectionGap);
  width: 100%;
}
.p-rope__section {
  width: 100%;
  display: grid;
  gap: min(10vw, 60px);
  place-items: center;
}
.p-rope__photo {
  width: 100%;
  height: min(450px, 50vw);
  -o-object-fit: cover;
     object-fit: cover;
}
.p-rope__subtitle {
  font-size: clamp(1.2rem, 4vw, 2.1rem);
  letter-spacing: min(0.3rem, 0.5vw);
  font-weight: bold;
}
.p-rope__subtitle strong {
  font-weight: 900;
  font-size: 150%;
}

/*---------カテゴリーアイコンリスト---------*/
.p-rope .p-category__list {
  width: min(84%, 1100px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 20%, 170px), 1fr));
}
.p-rope .p-category__image {
  padding: clamp(12px, 1.1vw, 20px);
}

/*-------------------------------
素材別ロープ
---------------------------------*/
.p-material {
  display: grid;
  gap: var(--sectionGap);
}
.p-material__list {
  width: var(--wideBoxWidth);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 23%, 250px), 1fr));
  gap: min(40px, 10vw) min(40px, 4vw);
  margin: auto;
}
.p-material__image {
  display: grid;
  gap: 1rem;
  place-items: center;
}
.p-material__image img {
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.p-material__image figcaption {
  font-size: var(--categoryText);
  font-weight: bold;
  letter-spacing: var(--captionLetter);
}

/*-------------------------------
打ち方ロープ
---------------------------------*/
.p-knot {
  display: grid;
  gap: var(--sectionGap);
}
.p-knot__list {
  width: var(--wideBoxWidth);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 13%, 160px), 1fr));
  gap: min(40px, 5vw) min(30px, 3vw);
  margin: auto;
}
.p-knot__image {
  display: grid;
  gap: 1rem;
  place-items: center;
}
.p-knot__image img {
  border-radius: 999px;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.p-knot__image figcaption {
  font-size: var(--categoryText);
  letter-spacing: 0;
  text-align: center;
  font-weight: bold;
  display: grid;
  gap: 0.3rem;
  place-items: center;
}