/* 容量の大きい画像の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: #1690cb;
    --color2: #04348c;
    --color3: #88498d;
    --color4: #e6d932;
}
.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(--color2);
    }
}

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

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

/* 出演 */
/* main .cast {
} */

/* 商品情報 */
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 {
    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: 3 / 2;
            background-image: url(../img/tokuimg.jpg);
        }
    }
    .tokuimg.coming::before {
        color: var(--color1);
    }
    .tokutitle {
        color: var(--color1);
    }
}
/* ---------- */


/* PC */
@media screen and (min-width: 769px) {
    header h1 img {
        aspect-ratio: 1800 / 1143;
        background-image: url(../img/mainimg-pc.jpg);
    }
}


/* スマホ */
@media screen and (max-width: 768px) {
    header h1 img {
        aspect-ratio: 1000 / 1663;
        background-image: url(../img/mainimg-sp.jpg);
    }
}