@charset "utf-8";


.intro{
    margin-top: 120px;
    padding: 0 0  168px;
    background: url('../images/intro_bg.webp') no-repeat center bottom/100% auto;
    h2{
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 30px;
        letter-spacing: 0.2em;
        line-height: calc(50/30);
        margin-left: auto;
        margin-right: auto;
        font-weight: normal;
        width: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    ul{
        margin-top: 90px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        align-items: flex-start;
    }
    li{
        width: calc(100%/3);
        position: relative;
    }
    h3{
        font-weight: normal;
        position: absolute;
        top: 26px;
        right: 0;
        font-size: 46px;
        z-index: 10;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        line-height: 100%;
        text-shadow:  0 0 10px #fff,
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff, 
            0 0 10px #fff;
        letter-spacing: 0.2em;
    }
    li:nth-child(2), li:nth-child(5), li:nth-child(8){
        margin-top: 36px;
    }
    li:nth-child(3), li:nth-child(6){
        margin-top: 72px;
    }
    .text{
        position: relative;
        z-index: 1;
        max-width: 270px;
        font-size: 16px;
        line-height: calc(26/16);
        padding: 10px 24px;
        background-color: #FFE6EE;
        transform: translateY(-50%);
        p{
            text-align: center;
        }
    }
}
@media (max-width: 750px) {
    .intro{
        margin-top: 16vw;
        padding: 0 0 24vw;
        background: url(../images/sp_intro_bg.webp) no-repeat center bottom/100% auto;
        h2{
            font-size: 4.5vw;
        }
        ul{
            margin-top: 12vw;
        }
        li{
            width: 100%;
            text-align: left;
            img{
                width: 96%;
            }
        }
        h3{
            font-size: 10vw;
           
        }
        li:nth-child(2), li:nth-child(5), li:nth-child(8){
            margin-top: 0;
        }
        li:nth-child(3), li:nth-child(6){
            margin-top: 0;
        }
        p{
            font-size: 3.7vw;
        }
    }
}
.charm{
    padding: 190px 0 168px;
    background: url('../images/charm_bg.webp') no-repeat center top/100% auto;
    h2{
        text-align: center;
        font-size: 40px;
        letter-spacing: 0.2em;
        font-weight: normal;
        span{
            display: block;
            font-size: 20px;
            letter-spacing: 0.05em;
            margin-top: 20px;
        }
    }
    ul{
        display: flex;
        justify-content: space-between;
        margin-top: 180px;
    }
    li{
        width: 30%;
    }
    .point{
        display: block;
        font-size: 9px;
        margin-top: 16px;
    }
    h3{
        font-size: 24px;
        letter-spacing: 0.1em;
        margin-top: 8px;
        line-height: 100%;
        font-weight: normal;
    }
    p{
        margin-top: 20px;
        font-size: 16px;
        line-height: calc(23/16);
        letter-spacing: 0.1em;
    }
}
@media (max-width: 750px) {
    .charm{
        background: url('../images/charm_bg.webp') no-repeat center top/ auto 30%;
        padding: 25vw 0;
        h2{
            font-size: 8vw;
            letter-spacing: 0.1em;
            span{
                font-size: 3.2vw;
                margin-top: 5.3vw;
            }
        }
        ul{
            flex-direction: column;
            margin-top: 24vw;
            gap: 12vw 0;
        }
        li{
            width: 100%;
        }
        .point{
            font-size: 2.5vw;
        }
        h3{
            font-size: 5vw;
        }
        p{
            font-size: 3.7vw;
        }
    }
}
.camp{
    padding: 90px 0;
    background: #FAFAF9;
    h2{
        font-weight: normal;
        text-align: center;
        font-size: 40px;
        letter-spacing: 0.2em;
        span{
            display: block;
            font-size: 20px;
            letter-spacing: 0.05em;
            margin-top: 20px;
        }
        padding-bottom: 124px;
    }
    .slick-dotted.slick-slider{
        margin-bottom: 100px;
    }
    .slick-slide img{
        margin-left: auto;
        margin-right: auto;
        padding-left: 22px;
        padding-right: 22px;
    }
    .slick-dots{
        bottom: -100px;
    }
    .slick-dots li button:before{
        font-size: 20px;
    }
}
@media (max-width: 750px) {
    .camp{
        padding: 20vw 0;
        h2{
            font-size: 8vw;
            letter-spacing: 0.1em;
            padding-bottom: 17vw;
            span{
                font-size: 3.2vw;
                margin-top: 5.3vw;
            }
        }
      li{
        width: 90vw;
        margin: 0 auto 2vw;
      }
    }
}