@charset "UTF-8";

.mainVisual {
    width: 100vw;
    height: 56.25vw;
    position: relative;
    overflow: hidden;
}
.mainVisual .imgView.active {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1;
    transition: opacity 1s ease-out;
    z-index: 2;
}
.mainVisual .imgView.active .box.only600 {
    display: block;
    position: absolute;
    bottom: 2.857143vw;
    left: 3.571429vw;
    opacity: 1;
    transition: opacity 1s ease-out;
    opacity: 0;
    z-index: 3;
}
.mainVisual .imgView.active img {
    display: block;
    position: relative;
    opacity: 1;
    transition: opacity 1s ease-out;
    z-index: 2;
}
.mainVisual .imgView.active .box.only600 img {
    display: block;
    width: min(500px, 25.831289vw);
    opacity: 1;
    transition: opacity 1s ease-out;
    z-index: 2;
}
.mainVisual .imgView {
    opacity: 0;
    transition: all 1s ease-out;
    z-index: -100;
}
.mainVisual #movFrame {
    width: 100vw;
    height: 56.25vw;
    margin: auto;
    border: unset;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.arrow.arrowOther {
    /* width: 100%;
    height: 60px; */
    position: relative;
}
.arrow.arrowOther span {
    border-top: 2px solid var(--border_color );
    border-right: 2px solid var(--border_color );
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    position: relative;
}
.arrow.arrowOther span:nth-of-type(1) {
  bottom: -10px;
}
.arrow.arrowOther span:nth-of-type(2) {
  bottom: 0;
}

.cont.ch {
    background: #fff;
    position: relative;
    overflow: hidden;
}
.back {
    width: min(120px, 8.571429vw);
    display: block;
    z-index: 2;
}
.cont.ch .back {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}
.cont.ch + .back {
    margin: 0 1.5rem 50px auto;
}
.cont.ch .box img {
    margin: 0;
    display: flex;
}
.cont.ch .box h2 {
    width: 100%;
    padding: 0 0 0.5rem 0;
    text-align: left;
    font-family: var(--font_jp);
    color: #231815;
    position: relative;
}
.cont.ch .box h2::before {
    content: "";
    display: block;
    width: 100%;
    border-bottom: solid 1px var(--border_color);
    position: absolute;
    right: 0;
    bottom: 0;
}
.cont.ch .box .copy p {
    color: #231815;
    text-shadow: unset;
}

/* animation */
.box.only600 p.target.trigger,
.box.spOnly600 p.target.trigger,
.back.target.trigger {
    opacity: 0;
}
@media (max-width: 1024px) {
    .back {
        width: clamp(80px, 9.765625vw, 100px);
    }
}
@media (max-width: 600px) {
    .box.spOnly600 {
        padding: 30px 5% 50px 5%;
    }
    .box.spOnly600 img {
        width: 196px;
    }
    .mainVisual .imgView.active .box.only600,
    .mainVisual .imgView.active .box.only600 img {
        opacity: 0;
        visibility: hidden;
        z-index: -100;
    }
}

.mainVisual .imgView.active span.start {
    width: min(10.714286vw, 150px);
    height: min(10.714286vw, 150px);
    margin: auto;
    display: block;
    border: solid min(0.71428571vw, 10px) rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    cursor: pointer;
    transition: opacity 1s ease-out;
    z-index: 3;
}
.mainVisual .imgView.active span.start::before {
    content: "";
    width: 0;
    height: 0;
    margin: auto;
    display: block;
    border-top: min(1.571429vw, 22px) solid transparent;
    border-bottom: min(1.571429vw, 22px) solid transparent;
    border-left: min(2.5vw, 35px) solid rgba(255, 255, 255, 0.5);
    border-right: 0;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: min(8px, 0.57142857vw);
}
.mainVisual .imgView span.start {
    opacity: 0;
    z-index: -100;
}
@media (max-width: 600px) {
    .mainVisual .imgView.active span.start {
        width: 80px;
        height: 80px;
        border: solid 6px rgba(255, 255, 255, 0.5);
    }
    .mainVisual .imgView.active span.start::before {
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 24px solid rgba(255, 255, 255, 0.5);
        left: 5px;
    }
}
@media (max-width: 380px) {
    .mainVisual .imgView.active span.start {
        width: 60px;
        height: 60px;
        border: solid 4px rgba(255, 255, 255, 0.5);
    }
    .mainVisual .imgView.active span.start::before {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 20px solid rgba(255, 255, 255, 0.5);
        left: 5px;
    }
}

/* about01 */
.box.about01 {
    width: min(95%, 1400px);
    margin: 0 0 0 auto;
    padding: 30px 0 100px;
}
.box.about01 .copy {
    margin: 1.5625rem 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.box.about01 .copy p {
    width: 55.9774vw;
}
.box.about01 .copy .img {
    width: 36.2811vw;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}
.box.about01 .copy .img img {
    width: 100%;
}

/* animation */
.box.about01 h2.targetR.trigger,
.box.about01 .copy p.targetR.trigger,
.box.about01 .copy .img img.targetR.trigger {
    opacity: 0;
}
@media (max-width: 1024px) {
    .box.about01 {
        padding: 30px 0 30px 0;
    }
}
@media (max-width: 768px) {
    .box.about01 {
        padding: 30px 0 50px 0;
    }
    .box.about01 .copy {
        align-items: unset;
        flex-direction: column-reverse;
    }
    .box.about01 .copy .img {
        width: 60vw;
        margin: 0 0 0 auto;
    }
    .box.about01 .copy .img img {
        max-width: 100%;
    }
    .box.about01 .copy p {
        width: calc(100% - 5vw);
        padding: 1.25rem 5vw 0 0;
    }
}
@media (max-width: 480px) {
    .box.about01 .copy .img {
        width: 80vw;
    }
}


/* about02 */
.box.about02 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.box.about02 .img {
    width: 50.0747vw;
}
.box.about02 .copy {
    width: 45.9754vw;
    padding: 0 0 0 3.937727vw;
}
.cont.ch .box.about02 .copy h2::before {
    content: "";
    width: calc(((100vw - 1400px) / 2) + 100%);
    left: 0;
}
.box.about02 .copy p {
    padding: 1.5625rem 0 0 0;
}

/* animation */
.box.about02 .imgBox .img.targetL.trigger,
.box.about02 .copy.targetR.trigger {
    opacity: 0;
}
@media (max-width: 1400px) {
    .cont.ch .box.about02 .copy h2::before {
        width: 100%;
    }
    .box.about02 .copy p {
        padding: 1.5625rem 2.142857vw 0 0;
    }
}
@media (max-width: 768px) {
    .box.about02 {
        flex-direction: column-reverse;
    }
    .box.about02 .copy {
        width: 100%;
    }
    .box.about02 .copy h2 {
        width: calc(100% - 10vw);
        padding: 0 5vw 0.5rem 5vw;
    }
    .box.about02 .copy p {
        padding: 1.5625rem 5vw 1.25rem 5vw;
    }
    .box.about02 .imgBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .box.about02 .img {
        width: 70vw;
        margin: 0 auto 0 0;
    }
}
@media (max-width: 380px) {
    .box.about02 .imgBox {
        flex-direction: column;
    }
    .box.about02 .imgBox .img:nth-of-type(2) {
        margin: 1.195124vw 0 0 0;
    }
}


/* about03/about05 */
.box.about03,
.box.about05 {
    width: 80vw;
    max-width: 1400px;
    margin: 0 0 0 auto;
}
.box.about05 {
    margin: 0 0 100px auto;
}
.box.about03 .copy,
.box.about05 .copy {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.box.about03 .copy p,
.box.about05 .copy p {
    width: 42.3534vw;
    max-width: 690px;
    padding: 1.5625rem 2.95vw 0 0;
    /* padding: 1.5625rem 3.32972vw 0 0; */
    /* padding: 1.5625rem 0 0 0; */
}
.box.about03 .copy .imgBox,
.box.about05 .copy .imgBox {
    width: 34vw;
    display: flex;
    padding: 1.5625rem 0 0 0;
}
.box.about03 .copy .imgBox {
    flex-direction: column;
}
.box.about03 .copy .imgBox div.img:nth-child(1) {
    margin: 0 0 0.8505vw 0;
}
/* .box.about03 .copy .imgBox div.img img {
    width: 100%;
} */

/* animation */
.box.about03 .copy h2.targetR.trigger,
.box.about03 .copy p.targetR.trigger,
.box.about03 .imgBox.targetR.trigger {
    opacity: 0;
}
@media (max-width: 768px) {
    .box.about03 {
        width: 85vw;
    }
    .box.about03 .copy p,
    .box.about05 .copy p {
        width: 100%;
        max-width: 100%;
    }
    .box.about03 .copy .imgBox {
        width: 100%;
        flex-direction: row;
    }
    .box.about03 .copy .imgBox div.img:nth-child(1) {
        width: calc(45.65% - 0.8505vw);
        margin: 0 0.8505vw 0 0 ;
    }
    .box.about03 .copy .imgBox div.img:nth-child(2) {
        width: 54.5%;
    }
    .box.about05 .copy .imgBox {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .box.about03,
    .box.about05 {
        width: 90vw;
    }
    .box.about03 .copy .imgBox {
        flex-direction: column;
    }
    .box.about03 .copy .imgBox div.img:nth-child(1) {
        width: 100%;
        margin: 0 0 0.8505vw 0 ;
    }
    .box.about03 .copy .imgBox div.img:nth-child(2) {
        width: 100%;
    }
}
/* @media (max-width: 380px) {
    .box.about03 .copy .imgBox div.img {
        width: 100%;
    }
    .box.about03 .copy .imgBox div.img:nth-of-type(2) {
        margin: 1.195124vw 0;
    }
} */


/* about04 */
.box.about04 {
    width: 100%;
    margin: -3.32972vw auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.box.about04 .img {
    width: 36.8639vw;
}
.box.about04 .copy {
    width: 58.5837vw;
    padding: 0 0 0 4.390553vw;
}
.cont.ch .box.about04 .copy h2::before {
    content: "";
    width: 100%;
    left: 0;
}
.box.about04 .copy p {
    padding: 1.5625rem 0 0 0;
}

/* animation */
.box.about04 .img.targetL.trigger,
.box.about04 .copy.targetR.trigger {
    opacity: 0;
}
@media (max-width: 1400px) {
    .cont.ch .box.about04 .copy h2::before {
        width: 100%;
    }
    .box.about04 .copy p {
        padding: 1.5625rem 2.142857vw 0 0;
    }
}
@media (max-width: 1100px) {
    .box.about04 {
        margin: 50px auto 100px;
    }
}
@media (max-width: 768px) {
    .box.about04 {
        flex-direction: column-reverse;
    }
    .box.about04 {
        align-items: flex-start;
    }
    .box.about04 .copy {
        width: 95%;
        margin: 0 0 0 auto;
    }
    .box.about04 .copy h2 {
        width: calc(100% - 5vw);
        padding: 0 5vw 0.5rem 0;
    }
    .box.about04 .copy p {
        padding: 1.5625rem 5vw 1.25rem 0;
    }
    .box.about04 .img {
        width: 60vw;
    }
}
@media (max-width: 480px) {
    .box.about04 .img {
        width: 80vw;
    }
}

/* artist */
.artist {
    width: 100%;
    padding: 3% 0;
    background: #EAE5E3;
}
.artist .artistWrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.artist .artistWrap .profile {
    width: 53.2095vw;
    /* width: 44.1496vw; */
    margin: 0 2.972273vw 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.artist .artistWrap .profile div.img {
    width: 13.19175vw;
    width: auto;
    margin: 0 min(30px, 2.142857vw) 0 0;
    line-height: 0;
}
.artist .artistWrap .profile div.img img {
    width: min(197px, 14.071429vw);
    height: auto;
}
.artist .artistWrap .profile div.copy {
    width: fit-content;
}
.artist .artistWrap .profile div.copy i {
    font-family: var(--font_garamond);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 1;
}
.artist .artistWrap .profile div.copy h3 {
    margin: 1.25rem 0 1.5rem;
    padding: 0 0 0.5rem 0;
    display: block;
    font-family: var(--font_jp);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.5em;
    border-bottom: solid 1px #231815;
}
.artist .artistWrap .profile div.copy h3 i {
    padding: 0 0 0 0.5rem;
    display: inline-block;
    font-family: var(--font_cinzel);
    font-style: normal;
    font-weight: 500;
    font-size: 70%;
    line-height: 1;
    letter-spacing: 0.05em;
    vertical-align: inherit;
}
.artist .artistWrap .profile div.copy p {
    font-family: var(--font_jp);
    font-size: 14px;
    line-height: 1.6;
}

/* animation */
.artist .artistWrap.target.trigger {
    opacity: 0;
}
@media (max-width: 1200px) {
    .artist .artistWrap {
        width: 90%;
    }
    /* .artist .artistWrap .profile {
        width: 50vw;
    } */
    .artist .artistWrap .profile div.copy i {
        font-size: clamp(0.75rem, 1.333333vw, 1rem);
    }
    .artist .artistWrap .profile div.copy h3 {
        margin: 1rem 0 1.25rem;
        font-size: clamp(20px, 1.8333333vw, 22px);
    }
    .artist .artistWrap .profile div.copy p {
        font-size: clamp(12px, 1.166667vw, 14px);
    }
}
@media (max-width: 1024px) {
    .artist {
        padding: 50px 0;
    }
    .artist .artistWrap {
        flex-direction: column;
    }
    .artist .artistWrap .profile {
        width: 100%;
        margin: 0 0 1.25rem 0;
        align-items: flex-end;
    }
    .artist .artistWrap .profile div.img {
        width: 200px;
        margin: 0 1.25rem 0 0;
    }
    .artist .artistWrap .profile div.img img {
        width: 200px;
    }
    .artist .artistWrap .profile div.copy {
        width: auto;
        /* width: 67.382812vw; */
    }
}
@media (max-width: 600px) {
    .artist .artistWrap .profile div.img,
    .artist .artistWrap .profile div.img img {
        width: min(200px, 33.333333vw);
        margin: 0 1.25rem 0 0;
    }
    .artist .artistWrap .profile div.copy {
        /* width: min(320px, 53.333333vw); */
        width: auto;
    }
    .artist .artistWrap .profile div.copy h3 {
        margin: 0.5rem 0 1.25rem;
        display: flex;
        flex-direction: column;
        font-size: clamp(18px, 3.3333333vw, 20px);
    }
    .artist .artistWrap .profile div.copy h3 i {
        padding: 0.25rem 0 0 0;
    }
    .artist .artistWrap .profile div.copy p {
        font-size: clamp(11px, 2vw, 12px);
    }
}
@media (max-width: 480px) {
    .artist .artistWrap .profile {
        align-items: center;
        flex-direction: column;
    }
    .artist .artistWrap .profile div.img,
    .artist .artistWrap .profile div.img img {
        width: 160px;
        margin: 0 auto;
    }
    .artist .artistWrap .profile div.img {
        margin: 0 auto 1rem;
    }
    .artist .artistWrap .profile div.copy {
        width: 100%;
    }
}

.artist .artistWrap .imgBox {
    width: 33.6583vw;
    /* width: 43.0396vw; */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.artist .artistWrap .imgBox .img {
    line-height: 0;
    position: relative;
}
.artist .artistWrap .imgBox .img:nth-of-type(1) {
    width: auto;
}
.artist .artistWrap .imgBox .img:nth-of-type(2) {
    width: auto;
    margin: 0 0 0 0.75rem;
}
.artist .artistWrap .imgBox .img .art {
    margin: 0.5em auto 0;
    text-align: right;
    font-family: var(--font_cinzel);
    font-size: 0.75rem;
    line-height: 1;
    position: absolute;
    right: 0;
    /* bottom: -1.25rem; */
    left: 0;
}
/* @media (max-width: 1200px) {
    .artist .artistWrap .imgBox {
        width: 35vw;
    }
} */
@media (max-width: 1024px) {
    .artist .artistWrap .imgBox {
        width: calc(100% - 220px);
        margin: 0 0 0 auto;
        justify-content: flex-end;
    }
    .artist .artistWrap .imgBox .img:nth-of-type(2) {
        margin: 0 0 0 1.25rem;
    }
}
@media (max-width: 768px) {
    .artist .artistWrap .imgBox {
        width: 100%;
        margin: 0 auto;
    }
}
@media (max-width: 380px) {
    .artist .artistWrap .imgBox .img .art {
        position: relative;
        bottom: 0;
        left: 0;
        margin: 0.5rem 0 0 0;
    }
}