@charset "UTF-8";
/*--------------------------------------------------
遊漁船紹介ページ
--------------------------------------------------*/
@media (min-width: 768px) {
  .boat-about {
    padding-block: 4.7rem 9.2rem;
  }
}

.section-title--boat-about {
  font-size: 2.7rem;
}
@media (min-width: 768px) {
  .section-title--boat-about {
    font-size: 4rem;
  }
}

.section-lead--boat-about {
  width: 90%;
  max-width: 1100px;
  font-size: 1.5rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .section-lead--boat-about {
    font-size: 1.8rem;
    letter-spacing: 0.05em;
  }
}

.boat-about__image {
  margin-top: 3rem;
}

.section-lead--boat-info + .sub-title {
  margin-top: 4rem;
}
@media (min-width: 768px) {
  .section-lead--boat-info + .sub-title {
    margin-top: 6.5rem;
  }
}

.boat-info {
  padding-bottom: 6.5rem;
}
@media (min-width: 768px) {
  .boat-info {
    padding-bottom: 11.2rem;
  }
}

.boat-info__main-image {
  overflow: hidden;
  aspect-ratio: 1000/500;
}
.boat-info__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boat-info__sub-image-wrapper {
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .boat-info__sub-image-wrapper {
    width: 93%;
    margin-top: 3rem;
    margin-inline: auto;
  }
}

.boat-info__sub-image {
  overflow: hidden;
  aspect-ratio: 211/160;
}
.boat-info__sub-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boat-info__text {
  margin-top: 1.4rem;
}
@media (min-width: 768px) {
  .boat-info__text {
    margin-top: 2.2rem;
  }
}

.boat-captain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .boat-captain {
    -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: 3.6rem;
    max-width: 68rem;
    margin-top: 3.7rem;
    margin-inline: auto;
  }
}

.boat-captain__bubble {
  position: relative;
  width: min(96%, 40rem);
  padding-block: 1rem;
  padding-inline: 1rem;
  background-color: #d9e000;
}
@media (min-width: 768px) {
  .boat-captain__bubble {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-height: 20rem;
    padding-block: 1.5rem;
    padding-inline: 1.7rem;
  }
}
.boat-captain__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.2rem;
  height: 1rem;
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%);
  background-color: #d9e000;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (min-width: 768px) {
  .boat-captain__bubble::after {
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    width: 1.5rem;
    height: 1.7rem;
    -webkit-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}

.boat-captain__text {
  font-size: 1.4rem;
  line-height: 1.7142857143;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .boat-captain__text {
    font-size: 1.5rem;
    line-height: 1.8666666667;
  }
}

.boat-captain__image {
  width: min(54.1%, 25rem);
}
@media (min-width: 768px) {
  .boat-captain__image {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 20rem;
    max-width: none;
  }
}

.boat-info__button-wrapper {
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .boat-info__button-wrapper {
    margin-top: 4.5rem;
  }
}

.boat-info__button-wrapper + .sub-title {
  margin-top: 4rem;
}
@media (min-width: 768px) {
  .boat-info__button-wrapper + .sub-title {
    margin-top: 6.5rem;
  }
}