/* トップビュー
====================================================*/
.home-top {
    width: 100%;
}
.home-line {
    width: 90%;
}
.topimg-wrap {
    position: relative;
}
.toplogoimg {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
}
@keyframes poyoyon {
    0% {
        transform: translateX(-800px) translateY(200px);
        opacity: 0;
    }
    50% {
        transform: translateX(0) translateY(0);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
    20%,
    100% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.top1img {
    width: 90%;
    position: absolute;
    top: 7%;
    left: 10%;
    z-index: 6;
    animation: poyoyon 0.8s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
.top2img {
    width: 130%;
    position: absolute;
    top: -50%;
    left: -15%;
    z-index: 5;
    animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
.toplineimg {
    width: 90%;
    position: absolute;
    top: 70%;
    z-index: 7;
    left: 50%;
    transform: translateX(-50%);
}

.home-slider-card1 {
    margin-bottom: -3rem;
    transform: perspective(500px) rotateY(10deg) translateX(30px) rotate(5deg)
        skewX(5deg);
}
.home-slider-card2 {
    margin-bottom: -3rem;
    transform: perspective(500px) rotateY(-10deg) translateX(-30px)
        rotate(-5deg) skewX(-5deg);
}

.home-slider-card .swiper-wrapper {
    transition-timing-function: linear;
}

.home-slider-card li {
    background: rgba(0, 0, 0, 0.8);
    background-image: url(./img/slider.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 0 0.3rem #fff, 0 0 0.5rem #fff;
    border: solid 1px #fff;
}

.home-slider-card li::before {
    content: "的中実績";
    background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
    color: #fff;
    font-weight: bold;
    position: absolute;
    font-size: clamp(0.75rem, 0.6rem + 0.8vw, 1rem);
    left: 1rem;
    top: 0.5rem;
    line-height: 1.1;
    padding: 0.4rem 0.8rem;
    outline: solid 1px #fff;
    outline-offset: -3px;
}

.home-slider-card h3 {
    font-weight: bold;
    font-size: clamp(0.75rem, 0.6rem + 0.8vw, 1rem);
    padding: 0.9rem 1rem 0.3rem 60%;
    color: #fff;
    white-space: nowrap;
}

.home-slider-card .home-slider-card-sutadium {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    color: #fff;
    align-items: flex-start;
    padding: 0.5rem 1rem;
    font-size: clamp(0.75rem, 0.6rem + 0.8vw, 1rem);
}

.home-slider-card .home-slider-card-sutadium p {
    font-weight: 500;
    position: relative;
}

.home-slider-card .home-slider-card-result {
    font-weight: bold;
    text-align: left;
    font-size: clamp(1.5rem, 0.7941rem + 3.5294vw, 3rem);
    line-height: 1.7;
    padding-right: 1rem;
    text-align: right;
    white-space: nowrap;
    background-image: linear-gradient(
        238.24deg,
        #efbc3b 13.97%,
        #ffeaad 39.49%,
        #c79700 53.59%,
        #fff7b7 68.37%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
}

.home-slider-card .home-slider-card-result em {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 2px;
    display: inline-block;
    transform: scaleY(1.5) translateY(0.15em);
    transform-origin: bottom;
    background-image: linear-gradient(
        238.24deg,
        #efbc3b 13.97%,
        #ffeaad 39.49%,
        #c79700 53.59%,
        #fff7b7 68.37%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
}

/* 船
====================================================*/