@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: 38vw;
    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%;
    }
    .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: 58.2461368vw;
}
.box.about01 .copy .img {
    width: 41.7538632vw;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}
.box.about01 .copy .img img {
    width: 100%;
    max-width: 36.280963vw;
    margin: 0;
}

/* animation */
.box.about01 h2.targetR.trigger,
.box.about01 .copy p.targetR.trigger,
.box.about01 .copy .img img.targetR.trigger {
    opacity: 0;
}
@media (max-width: 768px) {
    .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/about04 */
.box.about02,
.box.about04 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.box.about04 {
    max-width: 100%;
    align-items: flex-end;
}
.box.about02 .imgBox,
.box.about04 .img {
    width: 50.075407%;
}
.box.about02 .imgBox .img img,
.box.about04 .img img {
    width: 100%;
}
.box.about02 .imgBox .img:nth-of-type(2) {
    margin: min(1.071429vw, 15px) 0 0 0;
}
.box.about02 .copy,
.box.about04 .copy {
    width: 45.97546%;
}
.cont.ch .box.about02 .copy h2::before {
    content: "";
    width: calc(((100vw - 1400px) / 2) + 100%);
    left: 0;
}
.cont.ch .box.about04 .copy h2::before {
    content: "";
    width: 100%;
    left: 0;
}
.box.about02 .copy p,
.box.about04 .copy p {
    padding: 1.5625rem 4.2154vw 0 0;
}

/* animation */
.box.about02 .imgBox .img.targetL.trigger,
.box.about04 .img.targetL.trigger,
.box.about02 .copy.targetR.trigger,
.box.about04 .copy.targetR.trigger {
    opacity: 0;
}
@media (max-width: 1400px) {
    .cont.ch .box.about02 .copy h2::before,
    .cont.ch .box.about04 .copy h2::before {
        width: 100%;
    }
    .box.about02 .copy p,
    .box.about04 .copy p {
        padding: 1.5625rem 2.142857vw 0 0;
    }
}
@media (max-width: 768px) {
    .box.about02,
    .box.about04 {
        flex-direction: column-reverse;
    }
    .box.about04 {
        align-items: flex-start;
    }
    .box.about02 .copy {
        width: 100%;
    }
    .box.about04 .copy {
        width: 95%;
        margin: 0 0 0 auto;
    }
    .box.about02 .copy h2 {
        width: calc(100% - 10vw);
        padding: 0 5vw 0.5rem 5vw;
    }
    .box.about04 .copy h2 {
        width: calc(100% - 5vw);
        padding: 0 5vw 0.5rem 0;
    }
    .box.about02 .copy p {
        padding: 1.5625rem 5vw 1.25rem 5vw;
    }
    .box.about04 .copy p {
        padding: 1.5625rem 5vw 1.25rem 0;
    }
    .box.about02 .imgBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .box.about02 .imgBox .img:nth-of-type(2) {
        margin: 0 0 0 1.195124vw;
    }
    .box.about04 .img {
        width: 80vw;
    }
}
@media (max-width: 480px) {
    .box.about04 .img {
        width: 80vw;
    }
}
@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 */
.box.about03 {
    width: 80vw;
    max-width: 1400px;
    margin: 0 0 100px auto;
}
.box.about03 .copy p {
    padding: 1.5625rem 4.2154vw 1.5625rem 0;
}
.box.about03 .copy .imgBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box.about03 .copy .imgBox div.img {
    width: calc((100% / 3) - 0.33vw);
}
.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 {
        max-width: 85vw;
    }
}
@media (max-width: 480px) {
    .box.about03 {
        max-width: 88vw;
    }
}
@media (max-width: 380px) {
    .box.about03 .copy .imgBox {
        flex-direction: column;
    }
    .box.about03 .copy .imgBox div.img {
        width: 100%;
    }
    .box.about03 .copy .imgBox div.img:nth-of-type(2) {
        margin: 1.195124vw 0;
    }
}


/* 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: 54.45vw; */
    width: 60.5361vw;
    margin: 0 3.228467vw 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: 67.382812vw; */
        width: auto;
    }
}
@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: 26.112vw;
    /* width: 32.48vw; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.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;
    }
}