/* ===========================================
   HERO SLIDER
=========================================== */

.slide{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:0;

    animation:heroSlide 18s infinite;
}

.slide1{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_01.webp");
    animation-delay:0s;
}

.slide2{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_02.webp");
    animation-delay:6s;
}

.slide3{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_03.webp");
    animation-delay:12s;
}

.slide4{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_04.webp");
    animation-delay:18s;
}

.slide5{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_05.webp");
    animation-delay:24s;
}

.slide6{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_06.webp");
    animation-delay:30s;
}

.slide7{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_07.webp");
    animation-delay:36s;
}

.slide8{
    background-image:url("https://ps-chelsea.com/wp-content/themes/chelsea/img/753/753_top_08.webp");
    animation-delay:42s;
}

@keyframes heroSlide{

    0%{
        opacity:0;
        transform:scale(1);
    }

    8%{
        opacity:1;
    }

    30%{
        opacity:1;
        transform:scale(1.08);
    }

    38%{
        opacity:0;
    }

    100%{
        opacity:0;
        transform:scale(1.1);
    }

}

.hero-text{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    z-index:10;

    color:#fff;

    text-align:center;

    width:90%;
    max-width:1200px;

}

.hero-text h1{

    font-size:30px;
    line-height:1.3;
    margin:0;

}

.hero-text p{

    margin-top:20px;
    font-size:20px;

}

/* ===========================================
   TOPIC
=========================================== */

.topic-area{
    background:#faf5d8;
    padding:70px 0;
    overflow:hidden;
}

.topic-title{
    text-align:center;
    margin-bottom:40px;
}

.topic-title span{
    font-size:12px;
}

.topic-title h2{
    font-size:32px;
    letter-spacing:2px;
    margin:10px 0;
}

.line{
    width:40px;
    height:1px;
    background:#333;
    margin:auto;
}

.topic-slider{
    display:flex;
    gap:15px;
    width:max-content;
    animation:slide 20s linear infinite;
}

.topic-card{
    width:320px;
    background:#fff;
}

.topic-card img{
    width:100%;
    height:190px;
    object-fit:cover;
}

.topic-card p{
    padding:15px;
    margin:0;
}

.topic-card a{
    color:#333;
    text-decoration:none;
}

@keyframes slide{

0%{
    transform:translateX(0);
}

100%{
    transform:translateX(-50%);
}

} 

/* 七五三ページだけ全画面表示 */
body.page-id-61146 #container,
body.page-id-61146 #container > section,
body.page-id-61146 #container .inner,
body.page-id-61146 .entryContent,
body.page-id-61146 .entryContent section{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

body.page-id-61146 .hero{
    position:relative;
    width:100vw;
    height:100vh;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
}

/* =========================
   スマホ専用
========================= */
@media screen and (max-width:768px){

    body.page-id-61146 .hero{
        width:100%;
        height:65vh;
        margin-left:0;
        transform:none;
    }

    body.page-id-61146 .slide{
        background-size:cover;
        background-position:center center;
    }

    body.page-id-61146 .hero-text{
        width:90%;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        padding:0 15px;
        box-sizing:border-box;
    }

    body.page-id-61146 .hero-text h1{
        font-size:28px;
        line-height:1.4;
        margin:0;
    }

    body.page-id-61146 .hero-text p{
        font-size:15px;
        margin-top:12px;
    }

    body.page-id-61146 .topic-card{
        width:260px;
    }

    body.page-id-61146 .topic-card img{
        height:160px;
    }

    body.page-id-61146 .topic-title h2{
        font-size:26px;
    }

}