@charset "UTF-8";
/* [ ヤマハボート免許教室 ] agent.css */
#point .point-wrap {
  padding: min(122px, 6.35vw) 0 80px;
}
#point .point-wrap .point-txt {
  gap: min(110px, 5.73vw);
  padding: 0 min(60px, 3.13vw);
}
#point .point-wrap .point-txt > img {
  width: 30%;
}
#point .point-wrap .point-txt > div p {
  font-size: clamp(1.8rem, 1.15vw, 2.2rem);
}
#point .point-wrap .point-txt > div h2 {
  font-size: clamp(3rem, 1.88vw, 3.6rem);
}
#point .point-wrap .boxlist-yl {
  margin-top: -20px;
}
#point .point-wrap .boxlist-yl .box-item {
  width: calc((100% - 40px) / 3);
  padding: clamp(26px, 1.56vw, 30px) clamp(22px, 1.35vw, 26px);
}
@media only screen and (max-width: 768px) {
  #point .point-wrap {
    padding: max(57px, 14.5vw) 0 46px;
  }
  #point .point-wrap .point-txt.flex {
    flex-direction: column-reverse;
  }
  #point .point-wrap .point-txt.flex > img {
    width: 38%;
  }
  #point .point-wrap .point-txt.flex > div p {
    text-align: center;
    font-size: clamp(1.4rem, 3.56vw, 1.8rem);
  }
  #point .point-wrap .point-txt.flex > div h2 {
    font-size: clamp(2rem, 5.09vw, 3rem);
  }
}

.scroll-bg {
  aspect-ratio: 192/55;
  background-image: url("/jp/ec/agent/img/bg_scroll.jpg");
  background-size: auto 114% !important;
}
.scroll-bg > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(450px, 23.44vw);
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 960px) {
  .scroll-bg {
    width: 100vw;
    aspect-ratio: 393/375;
  }
  .scroll-bg.content-wrap-full {
    margin: 0 calc(50% - 50vw);
  }
  .scroll-bg > img {
    width: max(308px, 78.37vw);
  }
}

#boat-class .boatclass-wrap {
  padding: 76px 0 78px;
}
#boat-class .boatclass-wrap .bc-txtarea > img {
  width: clamp(49px, 4.22vw, 81px);
  height: auto;
  aspect-ratio: 10/7;
}
#boat-class .boatclass-wrap .bc-txtarea > h2 {
  font-size: clamp(2.2rem, 1.88vw, 3.6rem);
}
#boat-class .boatclass-wrap .bc-txtarea > h2 span {
  font-size: clamp(1.4rem, 1.25vw, 2.4rem);
}
#boat-class .boatclass-wrap .bc-txtarea > p {
  font-size: clamp(1.4rem, 0.94vw, 1.8rem);
  line-height: 1.667;
}
#boat-class .boatclass-wrap .bc-txtarea > p b {
  font-size: clamp(1.8rem, 1.04vw, 2rem);
}
#boat-class .boatclass-wrap .bc-list {
  list-style: none;
  gap: 6px;
}
#boat-class .boatclass-wrap .bc-list li {
  min-width: 200px;
  width: calc((100% - 18px) / 4);
  border-radius: 15px 15px 0 0;
}
#boat-class .boatclass-wrap .bc-list li:nth-of-type(1) {
  background: #8CD8EB;
}
#boat-class .boatclass-wrap .bc-list li:nth-of-type(2), #boat-class .boatclass-wrap .bc-list li:nth-of-type(3) {
  background: #ADEC9D;
}
#boat-class .boatclass-wrap .bc-list li:nth-of-type(4) {
  background: #FFD19A;
}
#boat-class .boatclass-wrap .bc-list li a {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
}
#boat-class .boatclass-wrap .bc-list li a .bc-list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
#boat-class .boatclass-wrap .bc-list li a .bc-list-item > img {
  width: 100%;
  height: auto;
  aspect-ratio: 300/181;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}
#boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name {
  flex: 1;
  padding: 12px 5px 20px;
}
#boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name > h3 {
  font-size: clamp(1.8rem, 1.15vw, 2.2rem);
}
#boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name > h3.hd-ul {
  margin-bottom: 1em;
}
#boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name > h3.hd-ul::after {
  bottom: -0.5em;
  width: clamp(68px, 4.84vw, 93px);
  background: #000;
  mask-size: cover !important;
  -webkit-mask-size: cover !important;
}
#boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name > p {
  font-size: clamp(1.2rem, 0.73vw, 1.4rem);
}
@media (hover: hover) {
  #boat-class .boatclass-wrap .bc-list li a:hover {
    opacity: 0.8;
  }
}
#boat-class .boatclass-wrap .note-numlist {
  font-size: clamp(1.2rem, 0.73vw, 1.4rem);
}
#boat-class .boatclass-wrap .note-numlist li {
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 960px) {
  #boat-class .boatclass-wrap {
    padding: 48px 0 70px;
  }
  #boat-class .boatclass-wrap .bc-txtarea > img {
    width: clamp(49px, 12.47vw, 81px);
  }
  #boat-class .boatclass-wrap .bc-txtarea > h2 {
    font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  }
  #boat-class .boatclass-wrap .bc-txtarea > h2 span {
    font-size: clamp(1.4rem, 3.56vw, 2.4rem);
  }
  #boat-class .boatclass-wrap .bc-txtarea > p {
    font-size: clamp(1.4rem, 3.56vw, 1.8rem);
  }
  #boat-class .boatclass-wrap .bc-txtarea > p b {
    font-size: clamp(1.8rem, 4.58vw, 2rem);
  }
  #boat-class .boatclass-wrap .bc-list {
    flex-direction: column;
  }
  #boat-class .boatclass-wrap .bc-list li {
    width: 100%;
    border-radius: 15px;
  }
  #boat-class .boatclass-wrap .bc-list li a .bc-list-item {
    flex-direction: row;
  }
  #boat-class .boatclass-wrap .bc-list li a .bc-list-item > img {
    width: 50%;
    border-radius: 15px 0 0 15px;
  }
  #boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name {
    padding: 16px 16px 14px;
  }
  #boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name > h3 {
    font-size: clamp(1.4rem, 4.07vw, 2.2rem);
  }
  #boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name > h3.hd-ul::after {
    width: clamp(68px, 17.3vw, 93px);
  }
  #boat-class .boatclass-wrap .bc-list li a .bc-list-item .bc-name > p {
    font-size: clamp(1.2rem, 3.05vw, 1.6rem);
  }
}

#course .course-wrap {
  padding: 70px 0 112px;
}
#course .course-wrap .course-ttl.flex {
  gap: 26px;
}
#course .course-wrap .course-ttl > img {
  width: 136px;
  height: auto;
  aspect-ratio: 272/217;
}
#course .course-wrap .course-ttl > h2 {
  font-size: clamp(2rem, 1.56vw, 3rem);
}
#course .course-wrap .course-ttl + p {
  font-size: clamp(1.4rem, 1.04vw, 2rem);
}
#course .course-wrap .flow-wrap > h3 {
  font-size: clamp(1.8rem, 1.35vw, 2.6rem);
  padding-top: 0.385em;
  padding-bottom: 0.385em;
}
@media only screen and (max-width: 960px) {
  #course .course-wrap {
    padding: 50px 0 66px;
  }
  #course .course-wrap .course-ttl.flex {
    gap: 12px;
  }
  #course .course-wrap .course-ttl > img {
    width: 78px;
  }
  #course .course-wrap .course-ttl > h2 {
    font-size: clamp(2rem, 5.36vw, 3rem);
  }
  #course .course-wrap .course-ttl + p {
    font-size: clamp(1.4rem, 3.75vw, 2rem);
  }
  #course .course-wrap .flow-wrap > h3 {
    font-size: clamp(1.8rem, 4.58vw, 2.6rem);
    padding-top: 0.385em;
    padding-bottom: 0.385em;
  }
  #course .course-wrap .flow-wrap > img {
    width: calc(100% - 32px);
    margin: 0 auto;
  }
}

#price #class-price {
  position: relative;
  background: #111273;
  padding: 80px 0 90px;
}
#price #class-price::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 24%;
  background: #fff;
  transform: translateX(-50%);
}
#price #class-price > h2 {
  font-size: clamp(2.4rem, 1.88vw, 3.6rem);
}
#price #class-price > ul {
  list-style: none;
  gap: 1em;
}
#price #class-1 {
  background: #29AECF;
}
#price #class-1.wave::after {
  background: #29AECF;
}
#price #class-2 {
  background: #7FC86C;
}
#price #class-2.wave::after {
  background: #7FC86C;
}
#price #class-lake {
  background: #62AE4E;
}
#price #class-lake.wave::after {
  background: #62AE4E;
}
#price #class-mj {
  background: #E89C41;
}
#price #class-mj.wave::after {
  background: #E89C41;
}
#price [id^=class-] {
  padding: 54px 0 140px;
}
#price .price-head {
  gap: 27px;
}
#price .price-head > div {
  flex: 1;
}
#price .price-head > div p {
  font-size: clamp(1.6rem, 1.04vw, 2rem);
  line-height: 1.8;
}
#price .price-head > img {
  width: 35.25%;
}
#price .boxlist-wh {
  gap: 22px 18px;
}
#price .boxlist-wh .box-item {
  width: calc(50% - 9px);
  padding: 24px 36px 30px;
}
#price .boxlist-wh .box-item-ttl {
  gap: 4px;
}
@media only screen and (max-width: 768px) {
  #price #class-price {
    padding: max(46px, 11.7vw) 0 max(84px, 21.37vw);
  }
  #price #class-price::before {
    height: 14%;
  }
  #price #class-price > h2 {
    font-size: clamp(2.4rem, 6.43vw, 3.6rem);
  }
  #price #class-price ul {
    flex-direction: column;
    gap: 0;
  }
  #price #class-price ul li {
    font-size: clamp(1.2rem, 3.22vw, 1.8rem);
  }
  #price [id^=class-] {
    padding: max(30px, 7.63vw) 0 max(130px, 33.08vw);
  }
  #price [id^=class-]:nth-of-type(2) .price-head > div h3 img {
    width: 55%;
  }
  #price [id^=class-]:nth-of-type(3) .price-head > div h3 img {
    width: 55%;
  }
  #price [id^=class-]:nth-of-type(4) .price-head > div h3 img {
    width: 80%;
  }
  #price [id^=class-]:nth-of-type(5) .price-head > div h3 img {
    width: 75%;
  }
  #price .price-head {
    flex-direction: column;
    gap: 0;
  }
  #price .price-head > div {
    flex: 1;
  }
  #price .price-head > div p {
    font-size: clamp(1.6rem, 4.29vw, 2rem);
  }
  #price .price-head > img {
    width: 72%;
  }
  #price .boxlist-wh {
    gap: 2.54vw;
  }
}/*# sourceMappingURL=agent.css.map */