@charset "utf-8";

:root {
    /* トップ固有表示 */
    --main-visual: url(/img/c/theme/rando2027/common/back2027.jpg);
    --top-offcanvas: #ffffff;
}

nav {
    height: 65px;
}

.offcanvas {
    background: var(--top-offcanvas);
}

/* Subvisual Area*/

#qnorq {
    background: var(--main-visual);
    margin-bottom: 10%;
}

#qnorq .mainvisual {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}

#qnorq .mainvisual img {
    display: block;
}

#qnorq .ih-logo {
    left: 5%;
    top: 5%;
    position: absolute;
    display: flex;
    gap: 2.0rem;
    align-items: flex-start;
}

#qnorq .ih-logo img {
    max-width: 130px;
}

#qnorq .ih-logo p {
    padding: 2.0rem;
}

#qnorq .logo {
    left: 5%;
    bottom: 5%;
    position: absolute;
}

#qnorq .logo img {
    max-width: 350px;
    margin-bottom: 20px;
}

#qnorq p.catch {
    color: #ffffff;
}

.subvisual {
    position: relative;
    height: 100%;
    max-width: 1300px;
    margin: 0 auto 50px;
}

.subvisual img {}

.subvisual .dispricrtion {
    position: absolute;
    top: 2%;
    left: 2%;
    color: var(--basic-color);
}

.subvisual .dispricrtion p {
    line-height: 1.7em;
}

/* bootstrap xl*/
@media screen and (min-width: 1200px) {
    #qnorq p.catch {
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 991px) {
    .subvisual .dispricrtion {
        position: relative;
        color: var(--basic-color);
        margin: 20px 0 30px;
    }

    .subvisual .dispricrtion p {
        line-height: 2em;
        margin-bottom: 10px;
    }
}

/* bootstrap xxl*/
@media screen and (min-width: 1400px) {
    #qnorq p.catch {
        font-size: 2.8rem;
    }
}

@media screen and (min-width: 992px) {}


@media screen and (max-width: 600px) {
    #lineup section {
        margin: 30px auto 50px;
    }
}

@media screen and (min-width: 992px) {
    #lineup section {
        margin: 0 auto 50px;
    }
}


@media screen and (max-width: 600px) {

    #qnorq .logo {
        bottom: 1%;
    }

    #qnorq .logo img {
        max-width: 235px;
    }


    #qnorq .ih-logo {
        left: 5%;
        top: 3%;
        /*gap: 1.0rem;*/
    }

    #qnorq .ih-logo img {
        max-width: 100px;
    }

    #qnorq .ih-logo p {
        padding: 0;
    }





    #lineup h3 {
        margin-top: 10px;
    }
}

@media screen and (min-width: 992px) {
    #lineup h3 {
        margin-top: 75px;
    }
}

#lineup .visual,
#lineup section {
    position: relative;
    z-index: 0;
}

#lineup section::before {
    content: " ";
    position: absolute;
    width: 30%;
    height: 60%;
    top: 0;
    left: 0;
    /*background: #fbaeff;*/
    z-index: -10;
}

#lineup .visual::after {
    content: " ";
    position: absolute;
    width: 20%;
    height: -20%;
    bottom: -10%;
    right: 10%;
    /*background: #fbaeff;*/
    z-index: -10;
}

#lineup h3 {
    height: 40px;
}

#lineup h3 img {
    display: block;
    margin: 10px auto;
    width: 100%;
    max-width: 200px;
    max-height: 40px;
    object-fit: contain;
}




/*#lineup h3.bw-logo {
	margin: 0 20%;
}

#lineup div.prd-img {
	margin: 50px 0 30px;
}*/


#lineup .seriesname {
    text-align: center;
    position: relative;
}


/*
#lineup .seriesname::before,
#lineup .seriesname::after {
	content: "";
	position: absolute;
	display: block;
	background: #000000;
	width: 10px;
	height: 3px;

}*/


a.pro-link {
    display: block;
    color: var(--basic-color);
    text-decoration: none;
}

a.pro-link div {
    text-align: center;
    margin: 20px auto;
    padding: 10px 30px;
    border: 1px dashed var(--basic-color);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    position: relative;
}

a.pro-link div:hover {
    background: var(--basic-color);
    color: #ffffff;
}

.pro-link div::after {
    content: url(/img/c/theme/rando2026/common/arrow.png);
    position: absolute;
    top: 35%;
    right: 5%;
}


/* bootstrap xxl*/
@media screen and (min-width: 1400px) {}

/* bootstrap xl*/
@media screen and (min-width: 1200px) and (max-width: 1399px) {}

/* bootstrap lg*/
@media screen and (min-width: 992px) and (max-width: 1199px) {}

/* bootstrap md*/
@media screen and (min-width: 768px) and (max-width: 991px) {}

/* bootstrap sm*/
@media screen and (min-width: 576px) and (max-width: 767px) {}

/* bootstrap sm以下 */
@media screen and (max-width: 575px) {}