section#mainVisual {
    color: #FFF;
    padding:4rem 0;
}
section#mainVisual > div.container {
    display: flex; flex-direction:column; flex-wrap:wrap; gap: 2rem;
}
section#mainVisual > div.container > h3 {
    font-size: 4rem;
    font-weight: 400;
    padding:0 0 0 0;
    margin:0 0 0 0;
    line-height: 4rem;
}
section#mainVisual > div.container > h4 {
    font-size: 4rem;
    padding:0 0 0 0;
    margin:0 0 0 0;
    line-height: 4rem;
    word-break: keep-all;
}


section#sailboatRegion {
    display: flex; flex-wrap:wrap; align-items:center; gap: 2rem;
}
section#sailboatRegion > span {
    min-width: 5rem;
    font-size:1.0526rem;
    color:#fff;
    font-weight: 600;
}
section#sailboatRegion > div.list {
    display: flex; flex: 1; gap: 1rem; justify-content:space-between; flex-wrap:wrap;
}
section#sailboatRegion > div.list > a {
    font-size:1.0526rem;
    text-decoration: none;
    color:#FFF;
    font-weight: 400;
    background-color : rgb(255,255,255,0.2);
    padding:.2rem 1rem;
    border-radius: 2rem 2rem;
}
section#sailboatRegion > div.list > a.on {
    color:#3f70f3;
    background: #FFF;
}
@media (max-width: 992px) {
    section#sailboatRegion {
        flex-direction: column;
    }
    section#sailboatRegion > div.list {
        justify-content: flex-start;
    }
}

section#sailboatList {
    display: grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: 1rem;
    padding:2rem 2rem;
}
section#sailboatList > div.sailboatList {
    color:#FFF; cursor: pointer;
}
section#sailboatList > div.sailboatList > div.img {
    aspect-ratio: 4/3;
    padding-bottom:1rem;
}
section#sailboatList > div.sailboatList > div.img > figure {
    width:100%; height:100%;
}
section#sailboatList > div.sailboatList > div.img > figure > img {
    width:100%; height:100%; object-fit: cover; border-radius: 20px 20px;
}
section#sailboatList > div.sailboatList > div.title {
    display: flex; flex-direction:column; font-size:.8889rem;
}
section#sailboatList > div.sailboatList > div.title > div.list1 {
    width:100%; display: flex; justify-content: space-between;
}
section#sailboatList > div.sailboatList > div.title > div.list1 > span.boat {
    background: #1bb3ff; padding:.25rem .5rem; border-radius: 10px 10px; font-size:.6667rem;
}
section#sailboatList > div.sailboatList > div.title > p {
    font-size:1.2222rem; font-weight: 600;
}
section#sailboatList > div.sailboatList > div.title > div.list2 {
    font-size: .8889rem;overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
@media (max-width: 992px) {
    section#sailboatList {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media (max-width: 768px) {
    section#sailboatList {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 420px) {
    section#sailboatList {
        grid-template-columns:repeat(1,minmax(0,1fr));
    }
}


section#stnMainBanner {
    background: #FFF;
    padding:2rem 0;
}
section#stnMainBanner > div.container > h3 {
    color:#242424; font-size: 1.6667rem; font-weight: 700;
}
section#stnMainBanner > div.container > h3 > strong {
    color:#3d87e3; font-weight: 700;
}
section#stnMainBanner > div.container > div.list {
    min-height: 500px;
}