/*-------------------- pc --------------------*/
/*---------- base > width:1440px ----------*/
/*
 * /movie/ -- the 動画 一覧 (task121).
 *
 * The cards are TOP's, class for class: .about_concept_box for the three-up rows and
 * .anshin_container for the two-up ones, so a card here and a card on TOP are the same
 * card. Their rules are lifted out of top.css unchanged rather than reworded, because
 * 136KB of TOP is not worth loading for twelve thumbnails and a reworded copy drifts.
 * The only edit is the SP padding, which .first_wrap now carries so it is not applied
 * twice (ledger: /movie/ 신설).
 */
a:hover {
    opacity: 0.7;
}

.first_wrap {
    max-width: 1120px;
    margin: 0 auto;

    .text {
        margin-bottom: 57px;

        p {
            font-family: "IBM Plex Sans JP", sans-serif;
            font-weight: 600;
            font-size: 22px;
            line-height: 33px;
            text-align: center;
        }
    }
}

.about_concept{
    display:grid;
    gap:69px;
}
.about_concept_box{
    .title{
        max-width:960px;
        margin:0 auto 24px;
        text-align:center;

        h3{
            position:relative;
            margin-bottom:33px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:20px;
            line-height:30px;

            &:before{
                content:'';
                position:absolute;
                top:50%;
                left:0;
                transform:translateY(-50%);
                width:333px;
                height:1px;
                background-color:#cccfd1;
            }
            &:after{
                content:'';
                position:absolute;
                top:50%;
                right:0;
                transform:translateY(-50%);
                width:333px;
                height:1px;
                background-color:#cccfd1;
            }
        }
        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:16px;
            line-height:28px;

            .space{
                display:none;
            }
        }
    }
    .container{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:22px;
        margin-bottom:40px;

        .box{
            padding:29px 28px 21px;
            background-color:#ffffff;
            border:1px solid #cccfd1;
            border-radius:4px;
            transition:0.3s;

            &.red{
                background-color:#fbf1f2;
            }
            &:hover{
                border-color:#c50018;
                opacity:0.7;

                .img{
                    img{
                        transform:scale(1.1);
                    }
                }
            }
            h4{
                margin-bottom:14px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:18px;
                line-height:26px;
                text-align:center;
                color:#c50018;

                span{
                    display:block;
                    margin-bottom:5px;
                    font-size:14px;
                    line-height:18px;
                    color:#6b6f75;
                }
            }
            .img{
                margin-bottom:19px;
                overflow:hidden;

                img{
                    width:100%;
                    transition:0.3s;
                }
            }
            p{
                max-width:104px;
                margin:0 auto;
                padding-right:24px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:16px;
                line-height:24px;
                color:#32373e;
                background:url('../images/common/red_circle_white_arrow.png') center right 0 / 20px no-repeat;
                box-sizing:content-box;
            }
        }
    }
}
.anshin_container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-bottom:40px;

    .box{
        padding:29px 80px 21px;
        background-color:#ffffff;
        border:1px solid #cccfd1;
        border-radius:4px;

        h4{
            margin-bottom:17px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:20px;
            line-height:24px;
            text-align:center;
            color:#c50018;

            span{
                display:block;
                margin-bottom:5px;
                font-size:14px;
                line-height:18px;
                color:#6b6f75;
            }
        }
        img{
            width:100%;
            margin-bottom:19px;
        }
        p{
            max-width:104px;
            margin:0 auto;
            padding-right:24px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:16px;
            line-height:24px;
            color:#32373e;
            background:url('../images/common/red_circle_white_arrow.png') center right 0 / 20px no-repeat;
            box-sizing:content-box;
        }
    }
}

/*-------------------- tablet --------------------*/
@media(max-width:1439px) and (min-width:769px){
    .first_wrap {
        max-width: 77.778vw;
        margin: 0 auto;

        .text {
            margin-bottom: 3.958vw;

            p {
                font-family: "IBM Plex Sans JP", sans-serif;
                font-weight: 600;
                font-size: 1.528vw;
                line-height: 2.292vw;
                text-align: center;
            }
        }
    }

    .about_concept{
        display:grid;
        gap:4.792vw;
    }
    .about_concept_box{
        .title{
            /* max-width:66.667vw; */
            margin:0 auto 1.667vw;
            text-align:center;

            h3{
                position:relative;
                margin-bottom:2.292vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.389vw;
                line-height:2.083vw;

                &:before{
                    content:'';
                    position:absolute;
                    top:50%;
                    left:0;
                    transform:translateY(-50%);
                    width:23.125vw;
                    height:0.069vw;
                    background-color:#cccfd1;
                }
                &:after{
                    content:'';
                    position:absolute;
                    top:50%;
                    right:0;
                    transform:translateY(-50%);
                    width:23.125vw;
                    height:0.069vw;
                    background-color:#cccfd1;
                }
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.944vw;

                .space{
                    display:none;
                }
            }
        }
        .container{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:1.528vw;
            margin-bottom:2.778vw;

            .box{
                padding:2.014vw 1.944vw 1.458vw;
                background-color:#ffffff;
                border:0.069vw solid #cccfd1;
                border-radius:0.278vw;
                transition:0.3s;

                &.red{
                    background-color:#fbf1f2;
                }
                &:hover{
                    border-color:#c50018;
                    opacity:0.7;

                    .img{
                        img{
                            transform:scale(1.1);
                        }
                    }
                }
                h4{
                    margin-bottom:0.972vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.25vw;
                    line-height:1.806vw;
                    text-align:center;
                    color:#c50018;

                    span{
                        display:block;
                        margin-bottom:0.347vw;
                        font-size:0.972vw;
                        line-height:1.25vw;
                        color:#6b6f75;
                    }
                }
                .img{
                    margin-bottom:1.319vw;
                    overflow:hidden;

                    img{
                        width:100%;
                        transition:0.3s;
                    }
                }
                p{
                    /* max-width:7.222vw; */
                    margin:0 auto;
                    padding-right:1.667vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.111vw;
                    line-height:1.667vw;
                    color:#32373e;
                    background:url('../images/common/red_circle_white_arrow.png') center right 0 / 1.389vw no-repeat;
                    box-sizing:content-box;
                }
            }
        }
    }
    .anshin_container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:1.389vw;
        margin-bottom:2.778vw;

        .box{
            padding:2.014vw 5.556vw 1.458vw;
            background-color:#ffffff;
            border:0.069vw solid #cccfd1;
            border-radius:0.278vw;

            h4{
                margin-bottom:1.181vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.389vw;
                line-height:1.667vw;
                text-align:center;
                color:#c50018;

                span{
                    display:block;
                    margin-bottom:0.347vw;
                    font-size:0.972vw;
                    line-height:1.25vw;
                    color:#6b6f75;
                }
            }
            img{
                width:100%;
                margin-bottom:1.319vw;
                border:0.069vw solid #cccfd1;
            }
            p{
                /* max-width:7.222vw; */
                margin:0 auto;
                padding-right:1.667vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                color:#32373e;
                background:url('../images/common/red_circle_white_arrow.png') center right 0 / 1.389vw no-repeat;
                box-sizing:content-box;
            }
        }
    }
}

/*-------------------- sp --------------------*/
@media(max-width:768px){
    .first_wrap {
        padding: 0 4.267vw;

        .text {
            margin-top: 8.533vw;
            margin-bottom: 8.533vw;

            p {
                font-size: 4.8vw;
                line-height: 7.467vw;
                text-align: center;
            }
        }
    }

    .about_concept{
        gap:12vw;
    }
    .about_concept_box{
        .title{
            margin:0 auto 6.667vw;

            h3{
                margin-bottom:4.8vw;
                font-size:4.8vw;
                line-height:7.467vw;

                &:before{
                    width:100%;
                    z-index:1;
                }
                &:after{
                    content:none;
                }
                span{
                    display:inline-block;
                    position:relative;
                    padding:0 5.067vw;
                    background-color:#f0f1f4;
                    z-index:2;
                }
            }
            p{
                font-size:3.733vw;
                line-height:6.4vw;

                .space{
                    display:inline-block;
                }
            }
        }
        .container{
            grid-template-columns:repeat(2, 1fr);
            gap:4.267vw;
            margin-bottom:8.533vw;

            .box{
                padding:4.8vw 2.667vw;

                h4{
                    margin-bottom:1.6vw;
                    font-size:3.2vw;
                    line-height:4vw;

                    span{
                        margin-bottom:1.333vw;
                        font-size:2.667vw;
                        line-height:3.467vw;
                    }
                }
                .img{
                    margin-bottom:3.2vw;
                }
                p{
                    max-width:21.333vw;
                    padding-right:5.333vw;
                    font-size:3.2vw;
                    line-height:4.8vw;
                    background:url('../images/common/red_circle_white_arrow.png') center right 0 / 4.267vw no-repeat;
                }
            }
        }
    }
    .anshin_container{
        gap:4vw;
        margin-bottom:8.533vw;

        .box{
            padding:4.533vw 4.267vw 4.8vw;

            h4{
                margin-bottom:2.133vw;
                font-size:3.733vw;
                line-height:5.333vw;

                span{
                    margin-bottom:1.333vw;
                    font-size:2.667vw;
                    line-height:3.467vw;
                }
            }
            img{
                margin-bottom:3.2vw;
            }
            p{
                max-width:21.333vw;
                padding-right:5.333vw;
                font-size:3.2vw;
                line-height:4.8vw;
                background:url('../images/common/red_circle_white_arrow.png') center right 0 / 4.267vw no-repeat;
            }
        }
    }
}

/*
 * Card stills, framed.
 *
 * The drop's cards only ever set `width:100%` on the still and left the height alone,
 * which works because its own <img> carry no dimensions. Giving them width/height
 * attributes for CLS -- as this page first did -- turns the height attribute into a
 * fixed CSS height that `width:100%` does not override, and every still renders
 * stretched (52% off at 1440, 78% at 375). The attributes are gone; this keeps the
 * frame from depending on that.
 *
 * The three source sizes (632x356, 564x318, 940x528) are all within half a percent of
 * 16:9, so `cover` crops essentially nothing -- it is here so a future still of another
 * shape gets cropped rather than distorted. Same shape as ledger C3/C23.
 */
.about_concept_box .container .box .img img,
.anshin_container .box img{
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    display:block;
}