/* ==========================================
   Fantasy CMS
   Cast Luxury Accordion
========================================== */


/* ==========================
   Section
========================== */

#cast{

    padding-top:120px;

    padding-bottom:120px;

}



/* ==========================
   Layout
========================== */

.cast-grid{

    max-width:600px;

    margin:0 auto;

}



/* ==========================
   Item
========================== */

.cast-item{

    border-bottom:

        1px solid rgba(212,175,55,.25);

}



/* ==========================
   Name
========================== */

.cast-name{

    width:100%;

    position:relative;

    padding:30px 20px;

    background:none;

    border:none;

    text-align:center;

    cursor:pointer;

    color:var(--color-gold);

    font-size:1.35rem;

    letter-spacing:.35em;

    transition:

        color .35s ease,

        opacity .35s ease;

}



.cast-name:hover{

    opacity:.75;

}



/* 開いた時 */

.cast-item.open .cast-name{

    color:#f5e39a;

}



/* ==========================
   VIEW PROFILE
========================== */

.cast-name::after{

    content:"VIEW PROFILE";

    display:block;

    margin-top:12px;

    font-size:.65rem;

    letter-spacing:.35em;

    color:rgba(255,255,255,.55);

}



/* ==========================
   Plus / Minus
========================== */

.cast-name::before{

    content:"+";

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--color-gold);

    font-size:1.25rem;

    transition:.3s;

}



.cast-item.open .cast-name::before{

    content:"−";

}



/* ==========================
   Photo Area
========================== */

.cast-photo{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transform:translateY(-12px);

    padding:0;

    transition:

        max-height .8s ease,

        opacity .6s ease,

        transform .5s ease;

}



/* ==========================
   Open
========================== */

.cast-item.open .cast-photo{

    max-height:900px;

    opacity:1;

    transform:translateY(0);

    padding-bottom:35px;

}



/* ==========================
   PHOTO
========================== */

.cast-photo::before{

    content:"PHOTO";

    display:block;

    text-align:center;

    margin-bottom:20px;

    font-size:.7rem;

    letter-spacing:.5em;

    color:var(--color-gold);

}



/* ==========================
   Image
========================== */

.cast-photo img{

    display:block;

    width:100%;

    max-width:380px;

    aspect-ratio:3 / 4;

    object-fit:cover;

    margin:0 auto;

    border-radius:6px;

    box-shadow:

        0 30px 60px rgba(0,0,0,.55);

    transition:

        transform .35s ease,

        filter .35s ease;

}



/* Hover */

.cast-photo img:hover{

    transform:scale(1.01);

    filter:brightness(1.05);

}



/* ==========================
   Tablet
========================== */

@media(max-width:991px){

    .cast-grid{

        max-width:520px;

    }

}



/* ==========================
   Mobile
========================== */

@media(max-width:767px){

    #cast{

        padding-top:80px;

        padding-bottom:80px;

    }

    .cast-grid{

        max-width:100%;

    }

    .cast-name{

        font-size:1.15rem;

        padding:25px 15px;

        letter-spacing:.25em;

    }

    .cast-name::before{

        right:12px;

    }

    .cast-photo img{

        max-width:320px;

    }

}