@charset "UTF-8";
/*--------------------------------------------------
使用タックル&仕掛けページ
--------------------------------------------------*/
@media (min-width: 768px) {
  .section-lead--tackle-basics {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .rod-description__image {
    width: 39.6%;
  }
}

.rod-point {
  display: grid;
  gap: 2.7rem;
  margin-top: 2.4rem;
}
@media (min-width: 768px) {
  .rod-point {
    gap: 2rem;
    margin-top: 2rem;
  }
}

.rod-point__item {
  position: relative;
  background-color: #f2f2f2;
  padding-block: 2.2rem 1rem;
  padding-inline: 2.2rem;
}
@media (min-width: 768px) {
  .rod-point__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1rem;
    padding-inline: 0 1rem;
  }
}

.rod-point__title {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: 10.5rem;
  font-size: 1.4rem;
  line-height: 2.1428571429;
  letter-spacing: 0.05em;
  text-align: center;
  background-color: #fcee21;
}
@media (min-width: 768px) {
  .rod-point__title {
    position: static;
    -webkit-transform: none;
    transform: none;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-item-align: start;
    align-self: start;
  }
}

.rod-point__text {
  font-size: 1.4rem;
  line-height: 1.7142857143;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .rod-point__text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

.reel__item {
  max-width: 50rem;
  margin-inline: auto;
}

.reel__label {
  display: inline-block;
  min-width: 13rem;
  font-size: 1.4rem;
  line-height: 1.4285714286;
  padding-block: 0.4rem;
  padding-inline: 0.8rem;
  margin-top: 1.5rem;
  background-color: #fcee21;
  text-align: center;
}
@media (min-width: 768px) {
  .reel__label {
    min-width: 14rem;
    font-size: 1.6em;
    margin-top: 1.2rem;
  }
}

.reel__text {
  font-size: 1.4rem;
  line-height: 1.7142857143;
  margin-top: 0.2rem;
}
@media (min-width: 768px) {
  .reel__text {
    font-size: 1.6rem;
    line-height: 1.875;
    margin-top: 0.7rem;
  }
}

.section-title--jig-selection {
  position: relative;
}
.section-title--jig-selection::before {
  content: "";
  position: absolute;
  top: -7rem;
  right: -1rem;
  width: 14.3rem;
  aspect-ratio: 226/149;
  background-image: url(../images/tackle/tackle_decoration_01.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .section-title--jig-selection::before {
    top: -3.6rem;
    width: 15rem;
  }
}
@media (min-width: 1280px) {
  .section-title--jig-selection::before {
    right: -5.5rem;
    width: 22rem;
  }
}

@media (min-width: 768px) {
  .jig-weight__image {
    width: 42%;
  }
}
@media (min-width: 768px) {
  .jig-weight__image img {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .jig-weight__text {
    line-height: 1.4375;
  }
}

.jig-weight__list {
  margin-top: 2.8rem;
}

.jig-weight__list + .common-text {
  margin-top: 1.8rem;
}

.jig-shape {
  display: grid;
  gap: 1.6rem;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .jig-shape {
    gap: 3rem;
    margin-top: 2.2rem;
  }
}

.jig-shape__item {
  padding-block: 1.8rem;
  padding-inline: 2.2rem;
  background-color: #f2f2f2;
}
@media (min-width: 768px) {
  .jig-shape__item {
    min-height: 15.9rem;
    padding-inline: 3rem 1rem;
  }
}

.jig-shape__title {
  font-size: 1.6rem;
  line-height: 1.4375;
  letter-spacing: 0.1em;
  text-align: center;
}
@media (min-width: 768px) {
  .jig-shape__title {
    font-size: 1.8rem;
    text-align: left;
  }
}

.jig-shape__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .jig-shape__body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.6rem;
    margin-top: 0.2rem;
  }
}

.jig-shape__image {
  margin-inline: auto;
}

.jig-shape__text {
  font-size: 1.4rem;
  line-height: 1.7142857143;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .jig-shape__text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: 0;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

@media (min-width: 768px) {
  .jig-shape__item--long {
    padding-block: 3.6% 1.6rem;
  }
}
.jig-shape__item--long .jig-shape__image {
  max-width: 55rem;
}
@media (min-width: 768px) {
  .jig-shape__item--long .jig-shape__image {
    -ms-flex-item-align: start;
    align-self: start;
    width: 42%;
  }
}

@media (min-width: 768px) {
  .jig-shape__item--short {
    padding-block: 3% 1.6rem;
  }
}
.jig-shape__item--short .jig-shape__image {
  width: 56%;
  text-align: center;
}
@media (min-width: 768px) {
  .jig-shape__item--short .jig-shape__image {
    width: 28%;
  }
}
@media (min-width: 768px) {
  .jig-shape__item--short .jig-shape__image img {
    width: 82%;
  }
}
@media (min-width: 768px) {
  .jig-shape__item--short .jig-shape__text {
    margin-top: -1.5rem;
  }
}

@media (min-width: 768px) {
  .jig-color {
    margin-top: 2.2rem;
  }
}

.jig-color__item {
  padding-block: 0.8rem;
}
@media (min-width: 768px) {
  .jig-color__item {
    padding-block: 1.6rem;
  }
}

.jig-color__item--silver {
  background-color: #dae4ea;
}
.jig-color__item--silver .jig-color__label {
  background-color: #f5fafc;
}

.jig-color__item--blue {
  background-color: #00c3db;
}
.jig-color__item--blue .jig-color__label {
  background-color: #ccf3f8;
}
.jig-color__item--blue .jig-color__image img {
  width: 66%;
}

.jig-color__item--pink {
  background-color: #ef95b8;
}
.jig-color__item--pink .jig-color__label {
  background-color: #fff5f5;
}
.jig-color__item--pink .jig-color__image img {
  width: 92%;
}

.jig-color__item--glow {
  background-color: #000000;
}
.jig-color__item--glow .jig-color__label {
  background-color: #26f8d6;
}
.jig-color__item--glow .jig-color__text {
  color: #fff;
}
.jig-color__item--glow .jig-color__image img {
  width: 77%;
}

.jig-color__label {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .jig-color__label {
    font-size: 1.8rem;
    line-height: 1.6;
  }
}

.jig-color__text {
  font-size: 1.4rem;
  line-height: 1.2857142857;
  letter-spacing: 0.05em;
  padding-inline: 1rem;
  margin-top: 0.6rem;
}
@media (min-width: 768px) {
  .jig-color__text {
    line-height: 1.6428571429;
    padding-inline: 9%;
    margin-top: 1rem;
  }
}

.jig-color__image {
  text-align: center;
  padding-inline: 0.5rem;
  margin-top: 1.7rem;
}
@media (min-width: 768px) {
  .jig-color__image {
    margin-top: 1rem;
  }
}
.jig-color__image img {
  width: 100%;
}

@media (min-width: 768px) {
  .rig-basic__image {
    width: 41.5%;
  }
}

.recommended-tackle {
  padding-block: 3.3rem 3.3rem;
  margin-block: min(21.5%, 12rem) min(23.5%, 12rem);
  scroll-margin-top: 2.7rem;
}
@media (min-width: 768px) {
  .recommended-tackle {
    padding-block: 8rem 9rem;
    margin-block: 8.5rem 6.6rem;
    scroll-margin-top: 1rem;
  }
}

.section-title--recommended-tackle {
  position: relative;
}
.section-title--recommended-tackle::before {
  content: "";
  position: absolute;
  top: -12.6rem;
  left: 0.7rem;
  width: 9.2rem;
  aspect-ratio: 182/210;
  background-image: url(../images/tackle/tackle_decoration_02.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .section-title--recommended-tackle::before {
    top: -17.3rem;
    width: 12rem;
  }
}
@media (min-width: 1280px) {
  .section-title--recommended-tackle::before {
    left: -5.4rem;
    width: 17.6rem;
  }
}

.useful-items {
  overflow-x: clip;
}

.section-title--useful-items {
  position: relative;
}
.section-title--useful-items::before {
  content: "";
  position: absolute;
  top: -9rem;
  left: calc(50% + 9.9rem);
  width: 8.7rem;
  aspect-ratio: 133/125;
  background-image: url(../images/tackle/tackle_decoration_03.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .section-title--useful-items::before {
    width: 12.8rem;
    top: -11.8rem;
    left: calc(50% + 24.5rem);
  }
}

.fish-gripper__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .fish-gripper__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: 3rem;
  }
}

.fish-gripper__item {
  max-width: 50rem;
  margin-inline: auto;
}