﻿@charset "UTF-8";


/*
 * 共通
 */


/*
 * MV
 */

.js-mvSlider .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: var(--color-bid3-primary);
}




/*
 * カテゴリから探す
 */

[data-section-name="category"] {
  --color-bg-category-grandchild: var(--color-bid3-bg-weak);
}




/*
 * パーツを探す
 */

[data-section-name="parts"] {
  background-color: var(--color-bg-primary);
}

[data-section-name="parts"] .p-top__section-inner {
  text-align: center;
}
@media (max-width: 767px) {
  [data-section-name="parts"] .p-top__section-inner {
    padding-inline: 0 !important;
  }
}

[data-section-name="parts"] .p-top__section-inner > div:not(:last-of-type) {
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  [data-section-name="parts"] .p-top__section-inner > div:not(:last-of-type) {
    margin-bottom: 3rem;
  }
}

.parts-lure__text--title {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  letter-spacing: .2em;
  line-height: 1;
}
@media (min-width: 768px) {
  .parts-lure__text--title {
    font-size: 3rem;
    line-height: 1.3;
    word-break: auto-phrase;
  }
}

.parts-lure__text--content-title {
  display: grid;
  place-items: center;

  padding-block: 1.6rem;
  background-color: var(--color-ishiguro-blue);
  border-radius: .4rem;

  color: var(--color-white);
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: .2em;
  line-height: 1;
}
@media (max-width: 767px) {
  .parts-lure__text--content-title {
    width: calc(100% - (var(--padding-horizontal-general) * 2));
    margin: auto;
  }
}
@media (min-width: 768px) {
  .parts-lure__text--content-title {
    font-size: 2.2rem;
  }
}

.parts-lure__text--description {
  font-size: 1.5rem;
  letter-spacing: .08em;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: left;
}
@media (min-width: 768px) {
  .parts-lure__text--description {
    font-size: 1.8rem;
  }
}

.parts-lure__text--description[data-with-icon] {
  display: grid;
  grid-template-columns: var(--icon-width, 1.8rem) 1fr;
  align-items: center;
}
@media (max-width: 767px) {
  .parts-lure__text--description[data-with-icon] {
    --icon-width: 3.3rem;

    column-gap: 1.5rem;
  }
}
@media (min-width: 768px) {
  .parts-lure__text--description[data-with-icon] {
    --icon-width: 1.8rem;

    column-gap: .7rem;
  }
}

.parts-lure__text--description[data-with-icon]::before {
  content: "";

  width: 100%;
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218.573%22%20viewBox%3D%220%200%2018%2018.573%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_25%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2025%22%20transform%3D%22translate(-960%20-1630.84)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_82%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2082%22%20width%3D%2218%22%20height%3D%2218%22%20transform%3D%22translate(960%201630.84)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%22%20d%3D%22M3.962%2C0A.4.4%2C0%2C0%2C1%2C4.1.026a.39.39%2C0%2C0%2C1%2C.215.206L6.559%2C5.421%2C9.352%2C2.8A.385.385%2C0%2C0%2C1%2C10%2C3.077V15.769a.385.385%2C0%2C0%2C1-.648.281L.122%2C7.435a.386.386%2C0%2C0%2C1%2C.23-.666l3.917-.337L1.92%2C1.313a.385.385%2C0%2C0%2C1-.011-.294A.38.38%2C0%2C0%2C1%2C2.11.8L3.8.035A.39.39%2C0%2C0%2C1%2C3.962%2C0Z%22%20transform%3D%22translate(977%201646.994)%20rotate(166)%22%20fill%3D%22%23143a60%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .parts-lure__text--description[data-with-icon]::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2233.086%22%20height%3D%2233.727%22%20viewBox%3D%220%200%2033.086%2033.727%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026%22%20transform%3D%22translate(80%20-449.5)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_83%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2083%22%20width%3D%2233%22%20height%3D%2233%22%20transform%3D%22translate(-80%20449.5)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%82%BF%E3%83%83%E3%83%81%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%20d%3D%22M3.214%2C10.781a32.886%2C32.886%2C0%2C0%2C0%2C2.515%2C2.612A1.261%2C1.261%2C0%2C0%2C0%2C7.86%2C12.48L7.89%2C1.6v.239a1.89%2C1.89%2C0%2C0%2C1%2C3.779.053L11.7%2C9.163l7.694%2C1.99a4.484%2C4.484%2C0%2C0%2C1%2C2.48%2C5.56L19.95%2C23.929v3.756H7.465V23.929S1.012%2C14.194.347%2C13.252C-.839%2C11.572%2C1.237%2C8.606%2C3.214%2C10.781Z%22%20transform%3D%22translate(-77.161%20457.212)%20rotate(-20)%22%20fill%3D%22%23767f88%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  }
}
@media (min-width: 768px) {
  .parts-lure__text--description[data-with-icon]::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218.573%22%20viewBox%3D%220%200%2018%2018.573%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_25%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2025%22%20transform%3D%22translate(-960%20-1630.84)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_82%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2082%22%20width%3D%2218%22%20height%3D%2218%22%20transform%3D%22translate(960%201630.84)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%22%20d%3D%22M3.962%2C0A.4.4%2C0%2C0%2C1%2C4.1.026a.39.39%2C0%2C0%2C1%2C.215.206L6.559%2C5.421%2C9.352%2C2.8A.385.385%2C0%2C0%2C1%2C10%2C3.077V15.769a.385.385%2C0%2C0%2C1-.648.281L.122%2C7.435a.386.386%2C0%2C0%2C1%2C.23-.666l3.917-.337L1.92%2C1.313a.385.385%2C0%2C0%2C1-.011-.294A.38.38%2C0%2C0%2C1%2C2.11.8L3.8.035A.39.39%2C0%2C0%2C1%2C3.962%2C0Z%22%20transform%3D%22translate(977%201646.994)%20rotate(166)%22%20fill%3D%22%23143a60%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  }
}

.parts-lure__container {
  display: grid;
  row-gap: 4rem;

  padding-block: 6rem;
  background-color: var(--color-white);
  border-radius: 1.5rem;
}
@media (min-width: 768px) {
  .parts-lure__container {
    padding-inline: 5rem;
    border-radius: 2.5rem;
  }
}

.parts-lure__title-container {
  display: grid;
  row-gap: 2rem;
}
@media (max-width: 767px) {
  .parts-lure__title-container {
    justify-content: center;

    padding-inline: var(--padding-horizontal-general);
  }
}
@media (min-width: 768px) {
  .parts-lure__title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.parts-lure__title-container--right {
  display: grid;
  row-gap: 2rem;
  justify-items: center;
}
@media (min-width: 768px) {
  .parts-lure__title-container--right {
    display: flex;
    align-items: center;
    column-gap: 5rem;
  }
}

.parts-lure__title-image-wrapper {
  width: 18rem;
}

.parts-lure__title-container--right .c-button {
  margin-top: 0;
}

.parts-lure__content-container {
  display: grid;
  row-gap: 7rem;
}

.parts-lure__content-wrapper {
  position: relative;

  width: 100%;
}
@media (max-width: 767px) {
  .parts-lure__content-wrapper {
    height: var(--element-height, 36rem);
    padding-inline: var(--padding-horizontal-general);

    overflow-x: auto;
    overflow-y: hidden;
  }
}
@media (min-width: 768px) {
  .parts-lure__content-wrapper {
    aspect-ratio: var(--aspect-ratio, 1300/420);
  }
}

.parts-lure__content-wrapper > * {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .parts-lure__content-wrapper > * {
    width: auto;
    aspect-ratio: var(--aspect-ratio, 1300/420);
  }
}

.parts-lure__content-wrapper > * img,
.parts-lure__content-wrapper > * svg {
  width: 100%;
  height: auto;
}

.parts-lure__content-wrapper > *:nth-child(1) {
  z-index: 1;
}

.parts-lure__content-wrapper > *:nth-child(2) {
  z-index: 2;
}

@media (hover: none) {
  .parts-lure__link-wrapper:active {
    --color-link-bg: var(--color-bid3-primary);
  }
}

@media (hover: hover) {
  .parts-lure__link-wrapper rect {
    transition: fill var(--transition-duration-short) ease;
  }

  .parts-lure__link-wrapper:hover {
    --color-link-bg: var(--color-bid3-primary);
  }
}

@media (max-width: 767px) {
  .parts-lure__scroll-suggest-wrapper {
    position: relative;
  }

  .parts-lure__scroll-suggest-window {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    display: grid;
    align-content: center;
    place-items: center;
    row-gap: .7rem;

    width: min(14rem, 80%);
    aspect-ratio: 140 / 90;
    margin: auto;
    padding: 1.8rem 1.2rem;
    border-radius: 1rem;
    background-color: rgba(85, 85, 85, 0.8);

    word-break: keep-all;

    transition: opacity var(--transition-default);

    pointer-events: none;
  }

  .parts-lure__modal[data-state=inactive] .parts-lure__scroll-suggest-window {
    transition-delay: 0ms;
    transition-duration: 0ms;
  }

  [data-state-scroll-suggest=inactive] .parts-lure__scroll-suggest-window {
    opacity: 0 !important;
    transition-delay: 0ms;
  }

  @keyframes suggestScroll {
    0% {
      translate: 0 0;
    }
    25% {
      translate: 40% 0;
    }
    50% {
      translate: 0 0;
    }
    75% {
      translate: -40% 0;
    }
    100% {
      translate: 0 0;
    }
  }

  [data-intersect="intersected"] .parts-lure__scroll-suggest-icon {
    animation: suggestScroll 3000ms ease-in-out forwards 500ms;
  }

  .parts-lure__scroll-suggest-text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: .08em;
    line-height: 1;
  }
}

@media (min-width: 768px) {
  .parts-lure__scroll-suggest-window {
    display: none !important;
  }
}




/*
 * スペシャルコンテンツ
 */

[data-section-name="special"] .c-button {
  margin-top: 0;
}

@media (min-width: 768px) {
  .p-top__special-content-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-top__special-content-wrapper {
  --zindex-text: 3;
  --zindex-bg-shadow: 2;
  --zindex-bg: 1;

  position: relative;

  padding: 4rem 3.5rem;
}
@media (min-width: 768px) {
  .p-top__special-content-wrapper {
    padding: 7.4rem 0;

    overflow: hidden;
  }
}

.p-top__special-content-wrapper::before,
.p-top__special-content-wrapper::after {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;
  margin: auto;

  pointer-events: none;
}


.p-top__special-content-wrapper::before {
  z-index: var(--zindex-bg-shadow);

  opacity: .75;
}

.p-top__special-content-wrapper::after {
  z-index: var(--zindex-bg);

  background-image: var(--bg-mobile);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .p-top__special-content-wrapper::after {
    background-image: var(--bg-desktop);

    transition: scale 1000ms ease;
  }

  @media (hover: hover) {
    .p-top__special-content-wrapper:has(.c-button:hover)::after {
      scale: 1.2;
    }
  }
}

.p-top__special-content-inner {
  display: grid;
  row-gap: 3rem;
}
@media (min-width: 768px) {
  .p-top__special-content-inner {
    width: min(calc(50rem + (var(--padding-horizontal-general) * 2)), calc(62.5% + (var(--padding-horizontal-general) * 2)));
    margin: auto;
    padding-inline: var(--padding-horizontal-general);
  }
}

.p-top__special-content-wrapper[data-special-content="custom-rod"]::before {
  background-color: #366588;
}

.p-top__special-content-wrapper[data-special-content="qa"]::before {
  background-color: #4E4E4E;
}

.p-top__special-text-container {
  position: relative;
  z-index: var(--zindex-text);

  display: grid;
  row-gap: 2rem;

  color: var(--color-white);
}

.p-top__special-text--subtitle {
  font-size: 1.2rem;
  letter-spacing: .2em;
  font-weight: var(--fw-bold);
}

.p-top__special-text--title {
  font-size: 2.2rem;
  letter-spacing: .2em;
  line-height: 1.8;
  font-weight: var(--fw-bold);
}

.p-top__special-text--description {
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  line-height: 2;
}

.p-top__special-content-wrapper .c-button {
  position: relative;
  z-index: var(--zindex-text);

  border: none;
}
@media (min-width: 768px) {
  .p-top__special-content-wrapper .c-button {
    margin-top: 0;
    margin-left: 0;
  }
}




/*
 * お知らせ
 */

[data-section-name="information"] .p-news__article-wrapper .p-news__article-link-wrapper {
  background-color: var(--color-bg-primary);
}




/*
 * レポート
 */

[data-section-name="report"] {
  .p-top__report-content-container {
    display: grid;
    row-gap: 1rem;
  }

  .p-top__report-content-wrapper {
    display: grid;

    @media (max-width: 767px) {
      position: relative;

      row-gap: 4rem;

      padding-block: 5rem;

      &::after {
        content: "";

        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1;

        width: calc(100% - (var(--padding-horizontal-general) * 2));
        height: 100%;
        margin: auto;
        background-color: var(--color-bg-primary);
      }

      & > * {
        position: relative;
        z-index: 2;
      }

      .c-button {
        margin-top: 0;
      }
    }

    @media (min-width: 768px) {
      grid-template-areas: "report-title report-article" "report-button report-article";
      align-items: flex-start;
      column-gap: calc((95 / 1400) * 100%);

      padding: 4rem calc((60 / 1400) * 100%);
      background-color: var(--color-bg-primary);

      .p-top__report-title-container {
        grid-area: report-title;
        align-self: flex-end;
      }

      .p-top__report-article-wrapper {
        grid-area: report-article;
      }

      .c-button {
        grid-area: report-button;

        margin-top: 5rem;
      }
    }
  }

  .p-top__report-title-container {
    --row-gap-title: 2.5rem;

    display: grid;
    grid-template-areas: "title-main" "title-decoration" "title-description";
    row-gap: var(--row-gap-title);
    justify-items: center;

    @media (max-width: 767px) {
      padding-inline: calc(var(--padding-horizontal-general) * 2);
    }

    @media (min-width: 768px) {
      --row-gap-title: 3rem;
    }

    &::before {
      grid-area: title-decoration;

      content: "";

      width: 12rem;
      aspect-ratio: 120 / 12.27;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22119.997%22%20height%3D%2212.272%22%20viewBox%3D%220%200%20119.997%2012.272%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_276%22%20data-name%3D%22%E3%83%91%E3%82%B9%20276%22%20d%3D%22M-15843.563-1715.628l-1.8%2C1.423a1.02%2C1.02%2C0%2C0%2C1-.685.253%2C1.134%2C1.134%2C0%2C0%2C1-.454-.094%2C1.08%2C1.08%2C0%2C0%2C1-.647-.992v-4.545a1.08%2C1.08%2C0%2C0%2C1%2C.647-.992%2C1.1%2C1.1%2C0%2C0%2C1%2C1.183.2l1.758%2C1.386a44.369%2C44.369%2C0%2C0%2C1%2C4.853-1.968.645.645%2C0%2C0%2C1%2C.028-.191l.747-2.127a1.052%2C1.052%2C0%2C0%2C1%2C.554-.613%2C1.057%2C1.057%2C0%2C0%2C1%2C.822-.034l3.761%2C1.383a.716.716%2C0%2C0%2C1%2C.294.213c.441-.037.879-.063%2C1.314-.063%2C4.514%2C0%2C6.811%2C2.115%2C7.776%2C3.382a2.8%2C2.8%2C0%2C0%2C1%2C0%2C3.4c-.97%2C1.261-3.267%2C3.382-7.78%2C3.382C-15835.927-1712.228-15841.352-1714.571-15843.563-1715.628Zm-47.84-.275-1.8%2C1.423a1.023%2C1.023%2C0%2C0%2C1-.686.253%2C1.131%2C1.131%2C0%2C0%2C1-.453-.094%2C1.09%2C1.09%2C0%2C0%2C1-.651-.992v-4.545a1.087%2C1.087%2C0%2C0%2C1%2C.651-.992%2C1.1%2C1.1%2C0%2C0%2C1%2C1.182.2l1.759%2C1.386a44.252%2C44.252%2C0%2C0%2C1%2C4.852-1.968.646.646%2C0%2C0%2C1%2C.028-.191l.744-2.127a1.081%2C1.081%2C0%2C0%2C1%2C.557-.616%2C1.073%2C1.073%2C0%2C0%2C1%2C.823-.031l3.761%2C1.383a.7.7%2C0%2C0%2C1%2C.294.213c.441-.038.878-.062%2C1.311-.062%2C4.518%2C0%2C6.813%2C2.115%2C7.78%2C3.382a2.793%2C2.793%2C0%2C0%2C1%2C0%2C3.4c-.967%2C1.264-3.263%2C3.385-7.777%2C3.385C-15883.768-1712.5-15889.191-1714.846-15891.4-1715.9Zm95.681-.231-1.8%2C1.42a.993.993%2C0%2C0%2C1-.686.253%2C1.139%2C1.139%2C0%2C0%2C1-.454-.094%2C1.079%2C1.079%2C0%2C0%2C1-.646-.992v-4.546a1.086%2C1.086%2C0%2C0%2C1%2C.646-.992%2C1.091%2C1.091%2C0%2C0%2C1%2C1.183.2l1.759%2C1.386a43.164%2C43.164%2C0%2C0%2C1%2C4.853-1.968.662.662%2C0%2C0%2C1%2C.027-.191l.748-2.13a1.063%2C1.063%2C0%2C0%2C1%2C.557-.613%2C1.064%2C1.064%2C0%2C0%2C1%2C.819-.034l3.761%2C1.386a.708.708%2C0%2C0%2C1%2C.294.209c.441-.034.882-.059%2C1.314-.059%2C4.514%2C0%2C6.809%2C2.112%2C7.775%2C3.382a2.8%2C2.8%2C0%2C0%2C1%2C0%2C3.4c-.97%2C1.261-3.265%2C3.382-7.778%2C3.382C-15788.087-1712.738-15793.511-1715.081-15795.723-1716.135Z%22%20transform%3D%22translate(15894.998%201724.5)%22%20fill%3D%22%23efdc00%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-size: contain;

      @media (min-width: 768px) {
        width: 15.302rem;
      }
    }

    .p-top__text--report-title {
      grid-area: title-main;

      font-size: 2rem;
      font-weight: var(--fw-bold);
      letter-spacing: .15em;
      line-height: 1;
      text-align: center;

      @media (min-width: 768px) {
        font-size: 2.5rem;
        line-height: 1.8;
      }
    }

    .p-top__text--report-description {
      grid-area: title-description;

      font-size: 1.5rem;
      font-weight: var(--fw-medium);
      letter-spacing: .2em;
      line-height: 1.5;
    }
  }
}




/*
 * ロッドビルディング動画
 */

[data-section-name="youtube"] {
  background-color: var(--color-bg-primary);
}

[data-section-name="youtube"] .c-button {
  margin-top: 3rem;
}

.p-top__youtube-container {
  display: grid;
  row-gap: 2rem;
}
@media (min-width: 768px) {
  .p-top__youtube-container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5rem;
  }
}

.p-top__youtube-wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 345 / 194;
}




/*
 * バナーエリア
 */

@media (min-width: 768px) {
  [data-section-name="banner"] .p-top__section-inner {
    padding-block: 8rem;
  }
}




/*
 * 最近見た商品
 */

[data-section-name="history"] {
  background-color: var(--color-bg-primary);
}




/*
 * オンラインショップ特典
 */

[data-section-name="membership"] .p-membership__detail-list__item-index {
  color: var(--color-brand-primary);
}
