@charset "UTF-8";

:root {
    --color_okasan: #c40019;
    --color_otosan: #0068b3;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family:"游ゴシック",YuGothic,"Helvetica","ヒラギノ角ゴ ProN W3", 
                "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, 
                "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(0.938rem, 0.915rem + 0.11vw, 1rem);
    line-height: 1.6;
    color:#000;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: 100svh;
}
img, video, svg, figure {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
img {
    vertical-align: middle;
}
svg {
    fill: currentColor;
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
button {
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    line-height: 1.3;
}
a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}
a:focus-visible {
    outline: 2px solid #575757;
    outline-offset: 2px;
    border-radius: 6px;
}
@media (hover: hover) {
    a:hover {
        opacity: .7;
    }
}

ul, ol {
    list-style: none;
}

::selection { background-color:#cdcdcd; }
::-moz-selection { background-color:#cdcdcd; }
/* ---------- */

.margin05 { margin-top: min(2vw, .5em) !important; }
.margin1  { margin-top: min(4vw, 1em) !important; }
.margin2  { margin-top: min(6vw, 2em) !important; }
.margin3  { margin-top: min(8vw, 3em) !important; }

.font-JP {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.minitxt {
    line-height: 1.4;
    font-size: 80%;
}

*:has(> .visually-hidden) {
    position: relative;
}
*:has(> .visually-hidden) > .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.color_okasan { color: var(--color_okasan); }
.color_otosan { color: var(--color_otosan); }

.txtline {
    text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

.fadeinitem {
    opacity: 0;
    transform: translateY(1.5em);
}
.fadeinitem.visible {
    animation: fadeinitem .4s linear 0s both;
}
@keyframes fadeinitem {
	0%   { opacity: 0; transform: translateY(1.5em); }
	100% { opacity: 1; transform: translateY(0); }
}

.backitem {
    z-index: -1;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#Loading {
	z-index: 200;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	p {
        width: min(60vw, 400px);
        aspect-ratio: 500 / 261;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        animation: loadmotion 1.2s linear 0s infinite;
	}
}
@keyframes loadmotion {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(.5em); }
	100% { transform: translateY(0); }
}

.wrap {
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
}

.sns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: min(4vw, 1em);
    > div p { width: 3em; }
    > * {
        display: flex;
        flex-wrap: wrap;
        gap: .6em;
        
    }
    > * p {
        transition: all .3s ease-out;
    }
    > * p:hover, .sns > * p:active {
        transform: scale(.9);
    }
}

/* ---------- */

header {
    position: relative;
    h1 img {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

main {
    .content {
        opacity: 0;
        transform: translateY(1.5em);
        width: min(94vw, 1000px);
        margin-top: min(8vw, 4em);
        margin-inline: auto;
    }
    .content.visible {
        animation: fadeinitem .4s linear 0s both;
    }
}
main .intro {
    > * {
        text-align: center;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 900;
        font-optical-sizing: auto;
        font-style: normal;
    }
    h2 {
        line-height: 1.7;
    }
}

main .pvarea {
    .pvarea-item {
        overflow: hidden;
        box-sizing: border-box;
        margin-inline: auto;
        border-width: 5px;
        border-style: solid;
        border-radius: 1em;
    }
    .pvarea-item > div {
        position: relative;
        aspect-ratio: 16 / 9;
        background-color: #fff;
        iframe {
            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            width: 100% !important;
            height: 100% !important;
        }
    }
    .pvarea-item .coming::before {
        content: 'Coming soon';
        left: 0; top: 0;
        width: 100%; height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        line-height: 1;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 700;
        font-optical-sizing: auto;
        font-style: normal;
    }
}

main .photoarea {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    figure img {
        box-sizing: border-box;
        aspect-ratio: 6 / 4;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #cdcdcd;
        border-radius: min(10px, .7em);
    }
}

main .parts1 {
    --number: .6em;
    h2 {
        position: relative;
        margin-bottom: var(--number);
        padding: .3em 0;
        text-align: center;
        letter-spacing: .06em;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 900;
        font-optical-sizing: auto;
        font-style: normal;
        font-size: min(10vw, 2em);
        border-radius: 9999px;
    }
    h2::after {
        content: '';
        position: absolute;
        left: 50%; bottom: calc( calc(var(--number) * -1) + 2px );
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-right: .5em solid transparent;
        border-left: .5em solid transparent;
        border-top-width: var(--number);
        border-top-style: solid;
        border-bottom: 0;
    }
    .parts1-cont {
        padding: min(6vw, 2em) min(4vw, 2em);
        background-color: #fff;
        border-radius: 1em;
    }
}

main .cast {
    h3 {
        text-align: center;
        line-height: 1.7;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 900;
        font-optical-sizing: auto;
        font-style: normal;
        font-size: 130%;
    }
}

main .product-cont {
    figure {
        width: 80%;
        margin-inline: auto;
    }
    figure img {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .price {
        margin-top: .5em;
        font-size: 90%;
        text-align: center;
    }
    .cart {
        h3 {
            position: relative;
            font-family: "Noto Sans JP", sans-serif;
            font-weight: 900;
            font-optical-sizing: auto;
            font-style: normal;
            font-size: 120%;
        }
        .cart-btn {
            display: block;
            box-sizing: border-box;
            width: min(80%, 300px);
            padding: 1em 0;
            text-align: center;
            text-decoration: none;
            line-height: 1;
            font-family: "Noto Sans JP", sans-serif;
            font-weight: 700;
            font-optical-sizing: auto;
            font-style: normal;
            border-radius: .6em;
            transition: all .3s ease-out;
        }
    }
    .copy {
        line-height: 1.4;
        font-size: 80%;
    }
}
main .product-cont2 {
    margin-top: min(6vw, 2em);
    h3 {
        margin-bottom: .3em;
        padding: .5em;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 700;
        font-optical-sizing: auto;
        font-style: normal;
        border-width: 2px;
        border-style: solid;
        border-radius: .5em;
    }
    .musiclist-list {
        counter-reset: num calc(var(--start) - 1);
        line-height: 1.6;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 700;
        font-optical-sizing: auto;
        font-style: normal;
        li {
            position: relative;
            counter-increment: num;
            padding: .3em 0 .3em 1.8em;
            border-bottom-width: 1px;
            border-bottom-style: dashed;
        }
        li::before {
            content: counter(num) ". ";
            position: absolute;
            left: 0;
            width: 1.5em;
            text-align: right;
        }
    }
    .musiclist2, .musiclist3 {
        * {
            line-height: 1.6;
            font-family: "Noto Sans JP", sans-serif;
            font-weight: 700;
            font-optical-sizing: auto;
            font-style: normal;
        }
        figure {
            width: 80%;
            margin-top: .5em;
        }
        figure img {
            box-sizing: border-box;
            aspect-ratio: 6 / 4;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #cdcdcd;
            border-radius: min(10px, .7em);
        }
    }
    .musiclist-list2 > li {
        position: relative;
        padding-left: .8em;
    }
    .musiclist-list2 > li::before {
        content: '';
        position: absolute;
        left: 0;
        top: .5em;
        width: .5em;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }
    .tokutitle {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 900;
        font-optical-sizing: auto;
        font-style: normal;
        font-size: 120%;
    }
    .tokuimg {
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        width: min(100%, 600px);
        margin-inline: auto;
        img {
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
    .tokuimg.coming {
        background-color: #ededed;
    }
    .tokuimg.coming::before {
        content: 'Coming soon';
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        line-height: 1;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 700;
        font-optical-sizing: auto;
        font-style: normal;
    }
}
/* ---------- */

footer {
    position: relative;
    margin-top: min(12vw, 5em);
    padding: min(6vw, 2em) 0;
    background-color: #fff;
    .btn {
        display: block;
        box-sizing: border-box;
        width: min(80vw, 360px);
        margin-inline: auto;
        padding: .6em 0;
        text-align: center;
        text-decoration: none;
        line-height: 1.4;

        font-family: "Noto Sans JP", sans-serif;
        font-weight: 700;
        font-optical-sizing: auto;
        font-style: normal;
        color: var(--color_okasan);
        background-color: #fff;
        border: 3px solid var(--color_okasan);
        border-radius: .6em;
        transition: all .3s ease-out;
    }
    small {
        display: block;
        margin-top: min(4vw, 1em);
        text-align: center;
        line-height: 1.4;
        font-size: 80%;
    }
}
/* ---------- */


/* PC */
@media screen and (min-width: 769px) {
	.pcNone { display: none; }
    .sns { column-gap: 1em; }

    main .intro {
        h2 { font-size: 200%; }
        div { font-size: 140%; }
    }

    main .photoarea {
        gap: 1em;
        figure {
            width: calc( calc(100% / 4) - calc(3em / 4) );
        }
    }

    main .product {
        .product-cont {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 3%;
        }
        .detail .cart {
            h3::before { content: '◆'; }
        }
        .musiclist {
            display: flex;
            column-gap: 2em;
            > ul {
                width: calc(50% - 1em);
            }
        }
        .musiclist3 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1em;
            > div > *:not(.tokutitle) { padding-left: 1em; }
        }
    }
}
/* ---------- */


/* スマホ */
@media screen and (max-width: 768px) {
	.spNone { display: none; }
    .sns { row-gap: 2vw; }

    main .intro {
        > * { text-align: left; }
        h2 { font-size: 130%; }
        div { font-size: 105%; }
    }

    main .photoarea {
        gap: 2vw;
        figure {
            width: calc( calc(100% / 2) - 1vw );
        }
    }

    main .cast {
        h3 { font-size: 120%; }
    }
    main .product-cont .detail {
        margin-top: 2vw;
        * {
            margin-inline: auto;
            text-align: center;
        }
        .cart h3 { font-size: 150%; }
    }

    .musiclist3 {
        > div:not(:first-of-type) { margin-top: 4vw; }
        .musiclist-list2 {
            li:not(:first-child) { margin-top: 2vw; }
        }
    }
}
/* ---------- */