@charset "UTF-8";

@font-face {
    font-family: 'Noto Serif JP';
    font-weight: 400;
    src: url("../../../../Contents/font/NotoSerifCJKjp-Regular.otf");
}

@font-face {
    font-family: 'Noto Serif JP';
    font-weight: 500;
    src: url("../../../../Contents/font/NotoSerifCJKjp-Medium.otf");
}

@font-face {
    font-family: 'Noto Serif JP';
    font-weight: 600;
    src: url("../../../../Contents/font/NotoSerifJP-SemiBold.otf");
}

@font-face {
    font-family: 'GT America Trial L';
    src: url("../font/GT-America-Standard-Light-Trial.otf");
}

@font-face {
    font-family: 'GT America Trial Rg';
    src: url("../font/GT-America-Standard-Regular-Trial.otf");
}

.body {
    overflow-x: hidden;
}

#breadcrumb {
    display: none;
}

.all_wrap .sp_only {
    display: none;
}

.all_wrap img,
.all_wrap video {
    width: 100%;
    height: auto;
}


#header,
#Header {
    display: none;
}

.main-area {
    overflow: visible;
}

.main-area.lp {
    padding-top: 0 !important;
}

.main-inner {
    padding-top: 0 !important;
}

/* アニメーション */

/* fade */
.all_wrap .credit_up {
    opacity: 0;
    transform: translateY(20px);
}

.all_wrap .credit_up.active {
    transition: transform 1.2s, opacity 1.2s;
    transform: translateY(0) !important;
    opacity: 1;
}

/* .all_wrap .fade_in {
    opacity: 0;
}

.all_wrap .fade_in.active {
    opacity: 1;
    transition-duration: 1.1s;
} */

.all_wrap .fade_up {
    opacity: 0;
    transform: translateY(50px);
}

.all_wrap .fade_up.active {
    opacity: 1;
    transition-duration: 1.1s;
    transform: translateY(0);
}

.all_wrap {
    color: #231815;
    font-family: garamond-premier-pro, serif;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                                                                sp
//////////////////////////////////////////////////////////////////////////////////////////////
*/

.sp-only {
    display: block;
}

.pc-only {
    display: none;
}

.all_wrap .credit span.pc-only {
    display: none;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                                                                top
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.all_wrap .top {
    position: sticky;
    top: 0;
}

.all_wrap .top__visual {
    position: relative;
}

.all_wrap .top__visual video {
    height: 100vh;
    height: 100svh;
    width: calc(750 * (100vw / 750));
    object-position: center;
    object-fit: cover;
}


.all_wrap .music {
    position: absolute;
    top: calc(38 * (100vw / 750));
    right: calc(27 * (100vw / 750));
    z-index: 99;
    font-size: calc(24 * (100vw / 750));
    color: #fff;
    font-family: "garamond-premier-pro-display", serif;
    font-weight: 300;
}

.all_wrap .music:hover {
    cursor: pointer;
}

.all_wrap .music span {
    display: none;
}

.all_wrap .music span.active {
    display: block;
}

.scrolldown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(110 * (100vw / 750));
    margin: 0 auto;
    color: #fff;
    font-size: calc(33 * (100vw / 750));
    transform: scale(1, 0.9);
    font-family: "garamond-premier-pro-display", serif;
    font-weight: 300;
    font-style: normal;
    display: inline-block;
    text-align: center;
    opacity: 0;
}

.scrolldown.active {
    opacity: 1;
    transition-duration: 1.1s;
}

.scrolldown::after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: calc(93 * (100vw / 750));
    background: #fff;
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
    left: 0;
    margin: calc(43 * (100vw / 750)) auto 0;
    right: 0;
}

@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }

    30% {
        height: calc(50 * (100vw / 750));
        opacity: 1;
    }

    100% {
        height: 0;
        top: calc(93 * (100vw / 750));
        opacity: 0;
    }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                                                                common
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.all_wrap .content__container {
    background: #fff;
    position: relative;
    z-index: 1;
}

.all_wrap .credit {
    font-family: "garamond-premier-pro", serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(20 * (100vw / 750));
    letter-spacing: 0.03em;
    line-height: 1.35;
    margin-top: calc(24 * (100vw / 750));
    text-align: left;
}

.all_wrap .credit .hql {
    font-size: calc(14 * (100vw / 750));
    letter-spacing: 0.03em;
    margin-left: calc(3 * (100vw / 750));
}

.all_wrap .credit span {
    display: inline-block;
}

/* box01 */
.all_wrap .box01 {
    width: calc(700 * (100vw / 750));
    margin: 0 auto;
    padding-top: calc(76 * (100vw / 750));
}

.all_wrap .box01 .ttl {
    font-size: calc(57.74 * (100vw / 750));
    text-align: left;
    font-family: "garamond-premier-pro-display", serif;
    font-weight: 300;
    font-style: normal;
    transform: scale(1, 0.9);
}

.all_wrap .box01 .sub-ttl {
    font-size: calc(15.42 * (100vw / 750));
    text-align: left;
    letter-spacing: 0.01em;
    font-family: 'GT America Trial L', sans-serif;
    transform: scale(1, 0.93);
    margin-top: calc(-2 * (100vw / 750));
}

.all_wrap .box01 .img1-1 {
    width: calc(700 * (100vw / 750));
    margin-top: calc(30 * (100vw / 750));
}

.all_wrap .box01 .desc {
    width: calc(415.45 * (100vw / 750));
    text-align: justify;
    margin: calc(13 * (100vw / 750)) 0 0 auto;
    font-size: calc(19 * (100vw / 750));
    font-family: "garamond-premier-pro-display", serif;
    font-weight: 300;
    font-style: normal;
    transform: scale(1, 0.9);
    line-height: 1.5631578948;
    letter-spacing: 0.015em;
}

/* box02 */
.all_wrap .box02 {
    margin-top: calc(70 * (100vw / 750));
    width: calc(750 * (100vw / 750));
}

.all_wrap .box02 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box03 */
.all_wrap .box03 {
    margin: calc(94 * (100vw / 750)) auto 0;
    width: calc(600 * (100vw / 750));
}

.all_wrap .box03 .img2-1,
.all_wrap .box03 .img2-2 {
    width: calc(600 * (100vw / 750));
}

/* box04 */
.all_wrap .box04 {
    margin-top: calc(139 * (100vw / 750));
    width: calc(750 * (100vw / 750));
}

.all_wrap .box04 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box05 */
.all_wrap .box05 {
    margin: calc(120 * (100vw / 750)) auto 0;
    width: calc(600 * (100vw / 750));
}

/* box06 */
.all_wrap .box06 {
    margin: calc(97 * (100vw / 750)) 0 0;
    width: calc(750 * (100vw / 750));
}

.all_wrap .box06 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box07 */
.all_wrap .box07 {
    margin: calc(90 * (100vw / 750)) auto 0;
    width: calc(544 * (100vw / 750));
}

/* box08 */
.all_wrap .box08 {
    margin: calc(94 * (100vw / 750)) auto 0;
    width: calc(700 * (100vw / 750));
}

/* box09 */
.all_wrap .box09 {
    margin: calc(54 * (100vw / 750)) auto 0;
    width: calc(700 * (100vw / 750));
}

/* box10 */
.all_wrap .box10 {
    margin-top: calc(120 * (100vw / 750));
}

.all_wrap .img9-1 {
    width: calc(750 * (100vw / 750));
}

.all_wrap .img9-1 .credit {
    margin-left: calc(25 * (100vw / 750));
}

.all_wrap .img10-1 {
    width: calc(476 * (100vw / 750));
    margin: calc(120 * (100vw / 750)) auto 0;
}

/* box13 */
.all_wrap .box13 {
    margin-top: calc(178 * (100vw / 750));
}

.all_wrap .box13 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box11 */
.all_wrap .box11 {
    margin: calc(80 * (100vw / 750)) auto 0;
    width: calc(650 * (100vw / 750));
}

/* box14 */
.all_wrap .box14 {
    margin: calc(166 * (100vw / 750)) auto 0;
}

.all_wrap .img13-1 {
    width: calc(750 * (100vw / 750));
}

.all_wrap .box14 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box15 */
.all_wrap .box15 {
    margin: calc(94 * (100vw / 750)) auto 0;
    width: calc(650 * (100vw / 750));
}

/* box16 */
.all_wrap .box16 {
    margin: calc(94 * (100vw / 750)) auto 0;
}

.all_wrap .box16 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box17 */
.all_wrap .box17 {
    margin: calc(94 * (100vw / 750)) auto 0;
    width: calc(650 * (100vw / 750));
}

/* box18 */
.all_wrap .box18 {
    margin: calc(100 * (100vw / 750)) auto 0;
}

.all_wrap .box18 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box19 */
.all_wrap .box19 {
    margin: calc(92 * (100vw / 750)) auto 0;
    width: calc(650 * (100vw / 750));
}

/* box20 */
.all_wrap .box20 {
    margin: calc(114 * (100vw / 750)) auto 0;
}

/* box21 */
.all_wrap .box21 {
    margin: calc(42 * (100vw / 750)) auto 0;
    width: calc(600 * (100vw / 750));
}

.all_wrap .box21 .credit {
    margin-top: calc(15 * (100vw / 750));
}

/* box22 */
.all_wrap .box22 {
    margin: calc(108 * (100vw / 750)) auto 0;
}

.all_wrap .box22 .credit {
    margin-left: calc(25 * (100vw / 750));
}

/* box23 */
.all_wrap .box23 {
    margin: calc(121 * (100vw / 750)) auto 0;
    width: calc(700 * (100vw / 750));
}

/* box24 */
.all_wrap .box24 {
    margin: calc(121 * (100vw / 750)) auto 0;
    width: calc(650 * (100vw / 750));
}

/* box25 */
.all_wrap .box25 {
    margin: calc(68 * (100vw / 750)) auto 0;
}

/* box26 */
.all_wrap .box26 {
    margin: calc(49 * (100vw / 750)) auto 0;
    width: calc(650 * (100vw / 750));
}

/* staff */
.staff__wrap {
    background-color: #000000;
    padding: calc(135 * (100vw / 750)) 0 calc(148 * (100vw / 750));
    color: #fff;
    text-align: center;
    margin-top: calc(90 * (100vw / 750));
}


.all_wrap .staff__wrap .ttl {
    font-size: calc(57.74 * (100vw / 750));
    font-family: "garamond-premier-pro-display", serif;
    font-weight: 300;
    font-style: normal;
    transform: scale(1, 0.9);
}

.all_wrap .staff__wrap .sub-ttl {
    font-size: calc(15.42 * (100vw / 750));
    letter-spacing: 0.01em;
    font-family: 'GT America Trial L', sans-serif;
    transform: scale(1, 0.93);
    margin-top: calc(2 * (100vw / 750));
}

.staff_credit {
    font-family: 'GT America Trial Rg';
    font-size: calc(16 * (100vw / 750));
    line-height: 1.625;
}

.line {
    width: calc(462 * (100vw / 750));
    height: 1px;
    background-color: #fff;
    margin: calc(37 * (100vw / 750)) auto calc(43 * (100vw / 750));
    display: block;
}

/* allbutton */
.allbutton a {
    border: solid 1px #fff;
    border-radius: calc(7 * (100vw / 750));
    margin: calc(52 * (100vw / 750)) auto 0;
    font-size: calc(26 * (100vw / 750));
    line-height: 1;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(235.74 * (100vw / 750));
    height: calc(58 * (100vw / 750));
    font-family: "garamond-premier-pro-display", serif;
    font-weight: 300;
    transform: scale(1, 0.9);
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                                                                pc
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media only screen and (min-width: 561px) {
    .sp-only {
        display: none;
    }

    .pc-only {
        display: block;
    }

    .all_wrap .credit span.sp-only {
        display: none;
    }

    .all_wrap .credit span.pc-only {
        display: inline-block;
    }

    .all_wrap .fade_up {
        transform: translateY(100px);
    }

    /*
    //////////////////////////////////////////////////////////////////////////////////////////////
                                                                                    top
    //////////////////////////////////////////////////////////////////////////////////////////////
    */
    .all_wrap .top__visual {
        width: 100%;
    }

    .all_wrap .top__visual video {
        height: 100vh;
        width: 100%;
    }

    /* .all_wrap .top__visual video {
        height: 100vh;
        width: auto;
    } */

    .all_wrap .music {
        top: 2.9rem;
        right: 3.3rem;
        font-size: 2.4rem;
    }

    .scrolldown {
        bottom: 9.5rem;
        font-size: 2.66119rem;
    }

    .scrolldown::after {
        top: 0;
        width: 1px;
        height: 7.5rem;
        margin: 3.5rem auto 0;
    }

    @keyframes pathmove {
        0% {
            height: 0;
            top: 0;
            opacity: 0;
        }

        30% {
            height: 4rem;
            opacity: 1;
        }

        100% {
            height: 0;
            top: 7.5rem;
            opacity: 0;
        }
    }

    /*
    //////////////////////////////////////////////////////////////////////////////////////////////
                                                                                    common
    //////////////////////////////////////////////////////////////////////////////////////////////
    */
    .all_wrap .content__inner {
        width: 192rem;
        margin: 0 auto;
    }

    .all_wrap .credit {
        font-size: 1.3rem;
        letter-spacing: 0.03em;
        line-height: 1.3076923077;
        margin-top: 1.4rem;
    }

    .all_wrap .credit .hql {
        font-size: 0.92rem;
        letter-spacing: 0.03em;
        margin-left: 0.2rem;
    }

    .all_wrap .fl,
    .all_wrap .fl.pc-only {
        display: flex;
        justify-content: center;
        width: auto;
    }

    .all_wrap .reverse {
        flex-direction: row-reverse;
    }

    /* box01 */
    .all_wrap .box01 {
        width: 70rem;
        margin: 0 auto;
        padding-top: 17rem;
    }

    .all_wrap .box01 .ttl {
        font-size: 5.774rem;
    }

    .all_wrap .box01 .sub-ttl {
        font-size: 1.542rem;
        margin-top: -0.2rem;
    }

    .all_wrap .box01 .img1-1 {
        width: 70rem;
        margin-top: 3.1rem;
    }

    .all_wrap .box01 .desc {
        width: 33.4rem;
        margin: 1.6rem 0 0 auto;
        font-size: 1.5rem;
        line-height: 1.32;
    }

    /* box02 */
    .all_wrap .box02.pc-only {
        margin: 18.5rem 6rem 0 0;
        display: flex;
        justify-content: center;
        width: auto;
    }

    .all_wrap .box02-1 {
        width: 47rem;
        margin: 0;
    }

    .all_wrap .box02-2 {
        width: 59.1rem;
        margin: 29.6rem 0 0 26rem;
    }

    .all_wrap .box02 .credit {
        margin-left: 0;
    }


    /* box03 */
    .all_wrap .box03 {
        margin-top: 23.5rem;
        width: 96rem;
    }

    .all_wrap .box03 .img2-1 {
        width: 48rem;
    }

    /* box04 */
    .all_wrap .box04 {
        margin: 20.1rem 14.3rem 0 0;
        width: auto;
    }

    .all_wrap .img3-1 {
        margin: 42.4rem 0 0 0;
        width: 61.7rem;
    }

    .all_wrap .img3-2 {
        margin: 0 0 0 25.3rem;
        width: 47.3rem;
    }

    .all_wrap .box04 .credit {
        margin-left: 0;
    }


    /* box05 */
    .all_wrap .box05 {
        margin: 21.2rem auto 0;
        width: 58.6rem;
    }

    /* box06 */
    .all_wrap .box06 {
        margin: 23rem 0 0 29.6rem;
        width: 51.9rem;
    }

    .all_wrap .box06 .credit {
        margin-left: 0;
    }

    /* box07 */
    .all_wrap .box07 {
        margin: 41.4rem 0 0 0.8rem;
        width: 45rem;
    }

    /* box09 */
    .all_wrap .box09 {
        margin: 17.5rem 53rem 0 auto;
        width: 51.7rem;
    }

    /* box10 */
    .all_wrap .box10 {
        margin-top: 23.7rem;
    }

    .all_wrap .img9-1 {
        width: 55.1rem;
    }

    .all_wrap .img9-1 .credit {
        margin-left: 0;
    }

    .all_wrap .img10-1 {
        width: 55.1rem;
        margin: 0;
    }

    /* box11 */
    .all_wrap .box11 {
        margin: 42.7rem 0 0 0;
        width: 51.3rem;
    }

    .all_wrap .box12 {
        margin: 22.4rem 0 0 29rem;
        width: 45.7rem;
    }

    /* box13 */
    .all_wrap .box13 {
        margin: 19.6rem auto 0;
        width: 83.4rem;
    }

    .all_wrap .box13 .credit {
        margin-left: 0;
    }

    /* box14 */
    .all_wrap .box14 {
        margin: 22rem auto 0;
        width: 59.2rem;
    }

    .all_wrap .img13-1 {
        width: 59.2rem;
        margin: 0 auto;
    }

    .all_wrap .box14 .credit {
        margin-left: 0.2rem;
    }

    /* box15 */
    .all_wrap .box15 {
        margin: 54rem 0 0 0;
        width: 46.4rem;
    }

    /* box16 */
    .all_wrap .box16 {
        margin: 22.6rem 1.8rem 0 26.4rem;
        width: 44.9rem;
    }

    .all_wrap .box16 .credit {
        margin-left: 0;
    }

    /* box17 */
    .all_wrap .box17 {
        margin: -18.5rem 48rem 0 auto;
        width: 45.2rem;
    }

    /* box18 */
    .all_wrap .box18 {
        margin: 21.1rem auto 0 44.9rem;
        width: 71rem;
    }

    .all_wrap .box18 .credit {
        margin-left: 0;
    }

    /* box19 */
    .all_wrap .box19 {
        margin: 18.3rem 55.4rem 0 auto;
        width: 51.3rem;
    }

    /* box20 */
    .all_wrap .box20 {
        margin: 23rem 0 0 0;
        width: 63.9rem;
    }

    /* box21 */
    .all_wrap .box21 {
        margin: 38.4rem 0 0 15.8rem;
        width: 47.3rem;
    }

    .all_wrap .box21 .credit {
        margin-top: 2.3rem;
    }

    /* box22 */
    .all_wrap .box22 {
        margin: 13.2rem auto 0 46.6rem;
        width: 62rem;
    }

    .all_wrap .box22 .credit {
        margin-left: 0;
    }

    /* box23 */
    .all_wrap .box23 {
        margin: 23rem auto 0;
        width: 55.2rem;
    }

    /* box24 */
    .all_wrap .box24 {
        margin: 19.2rem 0 0 1.8rem;
        width: 51.3rem;
    }

    /* box25 */
    .all_wrap .box25 {
        margin: 53.7rem 0 0 22.6rem;
        width: 50.2rem;
    }

    /* box26 */
    .all_wrap .box26 {
        margin: 13.6rem auto 0;
        width: 51.3rem;
    }

    /* box26 */
    .all_wrap .box26 .credit {
        margin-left: 0.2rem;
    }

    /* staff */
    .staff__wrap {
        padding: 17.5rem 0 17.7rem;
        margin-top: 15rem;
    }


    .all_wrap .staff__wrap .ttl {
        font-size: 4.4rem;
    }

    .all_wrap .staff__wrap .sub-ttl {
        font-size: 1.162rem;
        letter-spacing: 0.02em;
        margin-top: 0.2rem;
        transform: scale(1, 1);
    }

    .staff_credit {
        font-size: 1.156rem;
        line-height: 1.7733564014;
        letter-spacing: 0.015em;
    }

    .line {
        width: 65.9rem;
        height: 1.76px;
        margin: 3.45rem auto 2.7rem;
    }

    /* allbutton */
    .allbutton a {
        border: solid 1.92px #fff;
        border-radius: 0.6rem;
        margin: 3.7rem auto 0;
        font-size: 2.133rem;
        width: 20.6rem;
        height: 5rem;
    }
}

/* タブレット */
@media only screen and (max-width: 1920px) and (min-width: 561px) {
    html {
        font-size: calc(10* (100vw / 1920));
    }

    .content__container {
        width: 100%;
    }

    #breadcrumb .cateList {
        width: 120rem !important;
        max-width: unset !important;
        height: auto;
        line-height: 5rem;
        font-size: 1.2rem;
    }

}