:root {
    --blue: #00b9ff;
    --red: #ff4e00;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body {
    font-family: "Noto Sans JP", serif !important;
    width: 100%;
    max-width: 768px;
    margin: 0 auto !important;
    padding: 0;
    overflow-x: hidden;
}

.floating {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .floating {
        display: none;
    }

    body {
        background: url(./img/bg_pc.webp) no-repeat;
        background-position: top;
        background-attachment: fixed;
        background-size: cover;
    }

    .sp {
        display: none;
    }
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

header .logo,
header .banner {
    width: 30vw;
    max-width: 200px;
}

.secFv .img .present {
    bottom: min(29vw, 96px);
    color: #fff;
    font-size: min(3.5vw, 17px);
    letter-spacing: 1px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    line-height: min(6vw, 30px);
}

.secFv .img .scroll {
    width: 10vw;
    bottom: 11vw;
    z-index: 100;
    left: 45vw;
}

.scroll-line {
    width: 2px;
    height: 15vw;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.scroll-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollDown 1.6s ease-in-out infinite;
    opacity: 0;
}

@keyframes scrollDown {
    0% {
        top: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        top: 42px;
        opacity: 1;
    }

    100% {
        top: 48px;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-dot {
        animation: none;
        display: none;
    }
}


.secLead .img .ttl {
    background-color: #ffc000;
    color: #fff;
    top: min(5vw, 35px);
    left: min(5vw, 58px);
    font-size: min(3.1vw, 17px);
    font-weight: 600;
    padding: min(1vw, 5px) min(3vw, 10px);
}

.secLead .img .lead {
    bottom: min(65vw, 300px);
    left: min(6vw, 58px);
    color: #000000;
    font-size: min(3.2vw, 15px);
    letter-spacing: .5px;
    font-weight: 600;
    width: 100%;
    line-height: min(8vw, 40px);
}

.secFeature .img .ttl {
    background-color: #ffffff;
    color: #000000;
    bottom: 88vw;
    left: 5vw;
    font-size: min(4.4vw, 23px);
    font-weight: 600;
    padding: min(1vw, 5px) min(3vw, 10px);
}

.secFeature .img .ttl.bt {
    bottom: 76vw;
}

.secFeature .img .lead {
    bottom: 42vw;
    left: 6vw;
    font-size: min(3.2vw, 15px);
    letter-spacing: .5px;
    font-weight: 600;
    width: 100%;
    line-height: min(8vw, 55px);
}

.secFeature .img .tag {
    bottom: min(23.5vw, 100px);
    width: 80%;
    left: min(7vw, 95px);
    font-size: min(3vw, 14px);
    letter-spacing: .5px;
    font-weight: 600;
    line-height: min(5vw, 20px);
}

@media screen and (min-width: 768px) {
    .secFeature .img .ttl {
        bottom: 300px;
        left: 500px;
    }

    .secFeature .img .ttl.bt {
        bottom: 240px;
    }

    .secFeature .img .lead {
        bottom: 200px;
        left: 100px;
        letter-spacing: .5px;
        font-weight: 600;
        width: fit-content;
        writing-mode: vertical-rl;
        background: #00000059;
        border-radius: 4px;
        padding: min(3vw, 10px);
    }

    .secFeature .img .lead.zerotwo {
        background: #ffffff7e;
    }

    .secFeature .img .tag {
        width: 73%;
    }

    .secFv .img .scroll {
        display: none;
    }

}

.secTtl .img .ttl {
    bottom: min(10vw, 70px);
    width: 100%;
    text-align: center;
    font-size: min(4vw, 20px);
    font-weight: 600;
    letter-spacing: 1px;
}

.secCategory .img .ttl {
    color: #fff;
    font-size: min(6vw, 22px);
    bottom: 70vw;
    font-weight: 700;
    letter-spacing: 3px;
    left: min(5vw, 50px);
}

.secCategory .img .lead {
    color: #fff;
    font-size: min(3.4vw, 14px);
    bottom: min(18vw, 100px);
    font-weight: 500;
    letter-spacing: 1px;
    width: 90%;
    max-width: 668px;
    left: min(5vw, 50px);
    line-height: min(8vw, 38px);
    text-align: justify;
}

.secCategory .img .ttl.zerotwo {
    bottom: 61vw;
    font-weight: 700;
    letter-spacing: 3px;
    left: min(5vw, 50px);
}

.secCategory .img .lead.zerotwo {
    bottom: 15vw;
}

.secExample .img .lead {
    font-size: min(3.4vw, 14px);
    bottom: min(15vw, 60px);
    font-weight: 500;
    letter-spacing: 1px;
    width: 90%;
    left: 5vw;
    line-height: min(8vw, 38px);
    text-align: justify;
}

@media screen and (min-width: 768px) {
    .secCategory .img .ttl {
        bottom: 270px;
    }

    .secCategory .img .ttl.zerotwo {
        bottom: 250px;

    }

    .secCategory .img .lead.zerotwo {
        bottom: 100px;
    }

    .secExample .img .lead {
        left: 260px;
        width: 440px;
    }
}

.secQuestion .img .ttl {
    top: min(10vw, 50px);
    width: 100%;
    text-align: center;
    font-size: min(6vw, 20px);
    font-weight: 700;
}

.secQuestion .img .question {
    font-size: min(3.3vw, 15.5px);
    font-weight: 600;
    width: 70%;
    left: 20%;
}

.secQuestion .img .question.tp {
    top: 27vw;
}

.secQuestion .img .question.md {
    top: 128vw;
}

.secQuestion .img .question.bt {
    top: 217vw;
}

.secQuestion .img .answer {
    font-size: min(3.3vw, 13px);
    font-weight: 500;
    width: 80%;
    left: 10%;
    letter-spacing: 1px;
    text-align: justify;
}

.secQuestion .img .answer.tp {
    top: 52vw;
}


.secQuestion .img .answer.md {
    top: 153vw;
}

.secQuestion .img .answer.bt {
    top: 243vw;
}

@media screen and (min-width: 768px) {
    .secQuestion .img .question {
        width: 90%;
        left: 16%;
    }


    .secQuestion .img .question.tp {
        top: 125px;
    }

    .secQuestion .img .question.md {
        top: 340px;
    }

    .secQuestion .img .question.bt {
        top: 536px;
    }

    .secQuestion .img .answer {
        width: 550px;
        left: 140px;
    }

    .secQuestion .img .answer.tp {
        top: 170px;
    }


    .secQuestion .img .answer.md {
        top: 385px;
    }

    .secQuestion .img .answer.bt {
        top: 580px;
    }
}

.secInfo {
    background-color: #fff;
}


.secInfo .ttl {
    color: #00803e;
    font-weight: 500;
    text-align: center;
    font-size: min(4vw, 13px);
}

.secInfo .logo {
    width: 40%;
    margin: 0 auto;
}

.secInfo .tel {
    color: #00803e;
    font-weight: 500;
    text-align: center;
    font-size: min(4.4vw, 14px);
}

.secInfo .map {
    width: 80%;
    margin: 0 auto;
    height: 80vw;
}

@media screen and (min-width: 768px) {

    .secInfo .logo {
        width: 50%;
        margin: 0 auto;
    }

    .secInfo .txt {
        width: 50%;
    }

    .secInfo .map {
        width: 44%;
        margin: 0 auto;
        height: 300px;
    }
}