/* 容量の大きい画像のwebpを指定 */
@media screen and (min-width: 769px) {
    .webp-support header h1 img { background-image: url(../img/mainimg-pc.webp); }
}
@media screen and (max-width: 768px) {
    .webp-support header h1 img { background-image: url(../img/mainimg-sp.webp); }
}

/* 色指定等の変数設定 */
:root {
    --color1: #3b7fdd;
    --color2: #126cab;
    --color3: #f95890;
    --color4: #e47e10;
}
.color1 { color: var(--color1); }
.color2 { color: var(--color2); }
.color3 { color: var(--color3); }
.color4 { color: var(--color4); }

/* ローディング */
#Loading {
    background-color: #fff;
	p {
        width: min(60vw, 400px);
        aspect-ratio: 600 / 186;
        background-image: url(../img/logo.png);
    }
}

/* 固定の背景画像 */
.backitem {
    background-image: url(../img/backimg.jpg);
}

/* イントロダクション */
main .intro {
    h2 {
        color: var(--color3);
    }
    div {
        color: var(--color4);
    }
    /* div:nth-of-type(1) {
        color: var(--color3);
    }
    div:nth-of-type(2) {
        color: var(--color4);
    }
    div:nth-of-type(3) {
        color: #1eac10;
    } */
}

/* 動画 */
main .pvarea {
    .pvarea-item {
        border-color: var(--color3);
    }
    .pvarea-item .coming::before {
        color: var(--color3);
    }
}

/* 出演・商品情報 */
main .parts1 {
    h2 {
        color: #fff;
        background-color: var(--color1);
    }
    h2::after {
        border-top-color: var(--color1);
    }
}

/* 出演 */
main .cast {
    h3 { color: var(--color2); }
}

/* 商品情報 */
main .product-cont {
    figure img {
        aspect-ratio: 600 / 837;
        background-image: url(../img/jk.jpg);
    }
    .bd { /* Blu-ray */
        --bdcolor : #3bc7dd;
        h3 { color: var(--bdcolor); }
        a {
            color: #fff;
            background-color: var(--bdcolor);
        }
    }
    .dvd { /* DVD */
        --dvdcolor: #ff7e29;
        h3 { color: var(--dvdcolor); }
        a {
            color: #fff;
            background-color: var(--dvdcolor);
        }
    }
    .cd { /* CD */
        --cdcolor : #7cd825;
        h3 { color: var(--cdcolor); }
        a {
            color: #fff;
            background-color: var(--cdcolor);
        }
    }
}
main .product-cont2 {
    position: relative;
    h3 {
        color: var(--color1);
        border-color: var(--color1);
    }
    .musiclist-list {
        li {
            color: var(--color1);
            border-bottom-color: var(--color1);
        }
    }
    .musiclist2, .musiclist3 {
        * { color: var(--color1); }
        .musiclist-list2 li::before {
            background-color: var(--color1);
        }
    }
    .tokuimg {
        border-color: var(--color1);
        img {
            aspect-ratio: 1 / 1;
            background-image: url(../img/tokuimg.jpg);
        }
    }
    .tokuimg.coming::before {
        color: var(--color1);
    }
    .tokutitle {
        color: var(--color1);
    }

    .fukidashi {
        z-index: 5;
        position: absolute;
        right: -.5em;
        top: -.5em;
        width: min(45%, 200px);
        img {
            aspect-ratio: 1 / 1;
            background-image: url(../img/fukidashi.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
}
/* ---------- */


/* PC・タブレット */
@media screen and (min-width: 769px) {
    header h1 img {
        aspect-ratio: 1800 / 1143;
        background-image: url(../img/mainimg-pc.jpg);
    }
    main .product-cont2 {
        .tokuphoto figure {
            width: calc( calc(100% / 3) - calc(3em / 3) );
        }
    }
}


/* スマホ */
@media screen and (max-width: 768px) {
    header h1 img {
        aspect-ratio: 1000 / 1663;
        background-image: url(../img/mainimg-sp.jpg);
    }
    main .product-cont2 {
        .tokuphoto {
            display: block;
            figure {
                width: 100%;
                margin-top: 2vw;
            }
        }
        .fukidashi {
            right: 0;
            top: 4vw;
        }
        .fukidashi + .tokutitle {
            width: 50%;
            margin-top: 3vw;
            text-align: center;
            line-height: 1.4;
        }
    }
}