@import url('./layout.css');

/*========================================================================================================================

    Base

========================================================================================================================*/
:root{
    --global--color--white: #ffffff;
    --global--color--black: #000000;
    --global--color--place: #75bdff;
    --global--color--blue: #002c66;
    --global--color--link: #002c66;
    --global--color--gray: #d9d9d9;
    --global--color--bggray: #fafafa;
    --global--color--darkgray: #545454;
}

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

.roboto{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.didot {
    font-family: "GFS Didot", serif;
    font-weight: 400;
    font-style: normal;
}

.mt_20{
    margin-top: 20px;
}




/*========================================================================================================================

    Animations

========================================================================================================================*/
.js-fadeUpText01 span {
	opacity: 0;
}
.js-fadeUpText01.is-inview span {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both; /* アニメーション終了後も最終状態を保持 */
}
.js-fadeUpText01.is-inview span:nth-child(1) { animation-delay: 0.2s }
.js-fadeUpText01.is-inview span:nth-child(2) { animation-delay: 0.3s }
.js-fadeUpText01.is-inview span:nth-child(3) { animation-delay: 0.4s }
.js-fadeUpText01.is-inview span:nth-child(4) { animation-delay: 0.5s }
.js-fadeUpText01.is-inview span:nth-child(5) { animation-delay: 0.6s }
.js-fadeUpText01.is-inview span:nth-child(6) { animation-delay: 0.7s }
.js-fadeUpText01.is-inview span:nth-child(7) { animation-delay: 0.8s }
.js-fadeUpText01.is-inview span:nth-child(8) { animation-delay: 0.9s }
.js-fadeUpText01.is-inview span:nth-child(9) { animation-delay: 1.0s }
.js-fadeUpText01.is-inview span:nth-child(10) { animation-delay: 1.1s }
.js-fadeUpText01.is-inview span:nth-child(11) { animation-delay: 1.2s }
.js-fadeUpText01.is-inview span:nth-child(12) { animation-delay: 1.3s }
.js-fadeUpText01.is-inview span:nth-child(13) { animation-delay: 1.4s }
.js-fadeUpText01.is-inview span:nth-child(14) { animation-delay: 1.5s }
.js-fadeUpText01.is-inview span:nth-child(15) { animation-delay: 1.6s }
.js-fadeUpText01.is-inview span:nth-child(16) { animation-delay: 1.7s }
.js-fadeUpText01.is-inview span:nth-child(17) { animation-delay: 1.8s }
.js-fadeUpText01.is-inview span:nth-child(18) { animation-delay: 1.9s }
.js-fadeUpText01.is-inview span:nth-child(19) { animation-delay: 2.0s }
.js-fadeUpText01.is-inview span:nth-child(20) { animation-delay: 2.1s }

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}





/*========================================================================================================================

    Commons

========================================================================================================================*/
body{
    background-color: var(--global--color--black);
    
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--global--color--white);
    overflow-x: hidden;
}
.wrapper{
    max-width: 90rem;
    margin: 0 auto;
}
.inner{
    padding: 0 1.5rem;
}

.charm .inner,
.works .inner,
.artist .inner,
footer .inner {
    padding: 0 2rem;
}

.flex{
    display: flex;
    justify-content: space-between;
}
.read{
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin-top: 16vw;
    margin-top: 11rem;
    letter-spacing: -0.5rem;
}
img{
    max-width: 100%;
}
.midashi {
    display: flex;
    align-items: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.midashi:before, .midashi:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: var(--global--color--white)
}
.midashi:before {
    margin-right: 2rem;
}
.midashi:after {
    margin-left: 2rem;
}
.titles{
    padding-right: 1.5rem;
    position: relative;
    width: 100%;
    text-align: right;
    padding-right: 2rem;
}
.titles .t{
    color: var(--global--color--gray);
    font-size: 2rem;
}
.titles .t::before{
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: calc(100% - 30rem);
    height: 1px;
    background: linear-gradient(45deg, var(--global--color--gray), var(--global--color--bggray));
}
.movie iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}



/*----- main -----------------------------------------------------------------------------------------------------------*/
section.main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}
section.main .read{
    margin: 0;
    width: 15%;
}
section.main .read span{
    font-size: 5rem;
}



/*----- present --------------------------------------------------------------------------------------------------------*/
section.present{
    margin: 13rem 0 5rem 0;
}
section.present .present-box{
    background-image: url(../img/bg_present_box.png);
    background-size: cover;
    background-position: -30px center;
    background-repeat: no-repeat;
    padding: 2rem;
    position: relative;
}
section.present .present-box *{
    color: var(--global--color--blue);
    text-shadow: 0 0px 10px #FFF,0 0px 5px #FFF,0 0px 5px #FFF,0 0px 5px #FFF,0 0px 5px #FFF,0 0px 5px #FFF,0 0px 5px #FFF;
}
section.present .present-box h3{
    font-size: 5rem;
    font-weight: 700;
}
section.present .present-box p{
    padding-left: .8rem;
}
section.present .present-box .mark{
    position: absolute;
    top: -7.5rem;
    right: 0;
}



/*----- information ----------------------------------------------------------------------------------------------------*/
section.information .inner{
    display: flex;
    justify-content: space-between;
}
section.information .information-left{
    width: 65%;
}
section.information .information-left .title01{
    font-size: 11vw;
    font-size: 10rem;
    line-height: 1.2;

}
section.information .information-left .title01 span{
    display: block;
    font-size: 16vw;
    font-size: 15rem;
    line-height: 0.9;
}
section.information .information-right{
    width: calc(100% - 65%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
section.information .information-right .place{
    font-size: 11vw;
    line-height: 1.2;
    color: var(--global--color--place);
    text-align: center;
}
section.information .information-right .place.w2{
    font-size: 15.7vw;
    font-size: 15rem;
}
section.information .information-right .place.w3{
    font-size: 10vw;
    font-size: 10rem;
}
section.information .information-right .place.w4{
    font-size: 14vw;
    font-size: 12rem;
    margin-top: -0.2em;
}
section.information .information-right .dates{
    display: flex;
    justify-content: center;
    letter-spacing: 0;
}
section.information .information-right .dates p.m{
    font-size: 9vw;
    font-size: 8rem;
    margin-top: -3.5rem;
}
section.information .information-right .dates p.m2{
    font-size: 5rem;
    margin-top: -2.5rem;
}
section.information .information-right .dates dl dt{
    font-size: 8.8rem;
    line-height: 1.2;
}
section.information .information-right .dates dl dd{
    text-align: right;
    font-size: 3.5rem;
    line-height: 1;
}



/*----- charm ----------------------------------------------------------------------------------------------------------*/
section.charm{
    background-image: url(../img/bg_charm.png);
    background-size: cover;
    background-position:center center;
    border-top: var(--global--color--white) .1rem solid;
    padding: 5rem 0 0;
}
section.charm .catch{
    font-size: 9vw;
    font-size: 6rem;
    margin-bottom: 1.5rem;
    margin-top: 7.5em;
}
section.charm .charm-inbox{
    width: 87%;
    padding-left: 3%;
}
section.charm .movie{
    padding: 10rem 0 10rem 0;
}
video.vid_main {
width: 100%;
}
section.charm .charm-read{
    width: 10%;
}
section.charm .charm-read .read span{
    font-size: 3.2rem;
}



/*----- works ----------------------------------------------------------------------------------------------------------*/
section.works{
    padding: 5rem 0;
}
section.works .t::before{
    background: linear-gradient(45deg, var(--global--color--gray), var(--global--color--black));
}
section.works .title{
    font-size: 3rem;
}
section.works .works-inbox .title{
    display: flex;
    justify-content: space-between;
}
section.works .works-inbox{
    padding: 2rem 0;
    border-bottom: var(--global--color--darkgray) .1rem solid;
}
section.works .works-inbox .title .category{
    font-size: 3rem;
}
section.works .works-inbox .title .eng{
    color: var(--global--color--darkgray);
    font-size: 3rem;
}
section.works .movie{
    padding: 4rem 0;
}
section.works .works .catch{
    font-size: 2.2rem;
}
section.works .photobox{
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.works .photobox p{
    width: 49.5%;
}
section.works .photobox p.l{
    width: 50%;
    margin-bottom: 0 !important;
}
section.works .photobox div{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 49.5%;
}
section.works .photobox p:nth-child(1),
section.works .photobox p:nth-child(2){
    margin-bottom: 1%;
}
section.works .price{
    margin-top: 1.5rem;
}



/*----- artist ---------------------------------------------------------------------------------------------------------*/
section.artist{
    background-image: url(../img/bg_about.jpg);
    background-size: cover;
    background-position:center center;
    background-repeat: no-repeat;   
    padding-top: 5rem;
    padding-bottom: 5rem;
}
section.artist .name{
    font-size: 8.2vw;
    font-size: 6rem;
    color: var(--global--color--darkgray);
    margin-bottom: 2rem;
    padding-left: 1rem;
}
section.artist .face img{
    width: 100%;
}
section.artist .profile{
    background-color: var(--global--color--white);
    padding: 2.5rem 2.5rem;
    margin: 0.5rem;
    box-shadow: 0 0px 10px rgba(0,0,0,0.1);
}
section.artist .profile *{
    color: var(--global--color--darkgray);
}
section.artist .profile .text{
    margin-top: 1rem;
}
section.artist .profile .link{
    margin-top: 1.5rem;
}
section.artist .profile .link a{
    text-decoration: underline;
    color: var(--global--color--link);
}
section.artist .eng{
    font-size: 8.2vw;
    font-size: 4rem;
    line-height: 1.4;
    margin-top: -1em;
}
section.artist .about{
    color: var(--global--color--gray);
    margin-top: 2rem;
    font-size: 6.2vw;
    font-size: 5rem;
}
section.artist dl {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}
section.artist dt {
    width: 10%;
    margin: 0;
    vertical-align: middle;
}
section.artist dd {
    width: 90%;
    vertical-align: middle;
}



/*----- events ---------------------------------------------------------------------------------------------------------*/
footer .events{
    padding: 4rem 0 0 0;
}
footer .events .title{
    font-size: 3rem;
    margin-bottom: 2rem;
}
footer .events .place{
    display: flex;
}
footer .events .place dt{
    width: 9rem;
    font-size: 2rem;
}
footer .events .place dd{
    padding-top: .3rem;
    width: calc(100% - 11rem);
}
footer .map{
    margin: 1rem 0 3rem;
}
footer .map iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
footer .period{
    margin-top: 2.5rem;
}
footer .method dt,
footer .period dt,
footer .period dt{
    font-size: 2rem;
}
footer .image{
    margin-top: 4rem;
}
footer .onlineshop{
    padding: 1rem 0 3rem 0;
}
footer .onlineshop p{
    text-align: center;
}
footer .onlineshop .button{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
footer .onlineshop .button a{
    display: block;
    color: var(--global--color--white);
    background-color: var(--global--color--blue);
    border-radius: 5rem;
    padding: 2rem 0;
    line-height: 1;
    font-weight: 700;
    font-size: 2rem;
    width: 30rem;
}
footer .sns{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
    border-top: var(--global--color--white) .1rem solid;
}
footer .sns ul{
    display: flex;
    margin-left: 3rem;
}
footer .sns ul li:not(:last-child){
    margin-right: 1rem;
}
a.black{color: #75bdff;}

.pc-none{display: none;}
.sp-none{display: block;}


@media screen and (max-width: 910px){
    section.main .read{ margin-right: 2vw; }
    
    section.information .information-right .dates p.m{ font-size: 6rem; }
    section.information .information-left .title01{ font-size: 11vw; }
    section.information .information-left .title01 span{ font-size: 16vw; }
    section.information .information-right .place.w2{ font-size: 15.7vw; }
    section.information .information-right .place.w3{ font-size: 10vw; }
    section.information .information-right .place.w4{ font-size: 14vw; }
    .text_profile{ font-size: 1.2rem;letter-spacing: -0.05rem; }
}





@media screen and (max-width: 890px){
    section.information .information-right .dates p{ font-size: 9vw; }
    section.information .information-right .dates dl dt{ font-size: 9vw; }
    section.information .information-right .dates dl dd{ font-size: 4vw; }
    section.present{ margin-top: 15vw; }
    section.charm .charm-inbox{ padding-left: 1%;}
}






@media screen and (max-width: 710px){
    section.main .read span{ font-size: 6vw; }
    section.main .read span.c-long{ font-size: 5.5vw;　line-height: 1.5;　overflow: visible;}
    section.information .information-right .dates p.m{ font-size: 5vw; }
    section.information .information-right .dates p{ font-size: 8vw; }
    section.information .information-right .dates dl dt{ font-size: 8vw; }
    section.information .information-right .dates dl dd{ font-size: 3vw; }
    section.information .information-right .dates p.m{ font-size: 8vw; margin-top: -2.5rem; }
    section.information .information-right .dates p.m2{ font-size: 6vw; margin-top: -2.5rem; }
    section.artist .about{ font-size: 6.2vw; }
    .pc-none{display: block;}
    .sp-none{display: none;}
    section.charm .movie{padding: 30rem 0 10rem 0;}
}





@media screen and (max-width: 650px){
    section.artist .eng { font-size: 8.5vw; }
    section.present .present-box .mark{ width: 20vw; top: -10vw; }
    section.present .present-box h3{ font-size: 7vw; }
    section.present .present-box p{ font-size: 1.4rem; }
}





@media screen and (max-width: 610px){
    .titles .t{ font-size: 5.5vw; }
    section.charm { background-image: url(../img/bg_charm_sp.png);background-position:top left;background-position-y: -602px;padding-bottom: 2em;}
    /*
    section.charm { background-image: url(../img/bg_charm_sp.png);background-position:top left;background-position-y: -622px;padding-bottom: 2em;} 
    */ 
    section.charm .catch{ font-size: 9vw; }
    section.charm .charm-read .read span{ font-size: 6vw; }
    section.artist .name{ font-size: 8.2vw; }
    section.artist dt { width: 20%; }
    section.artist dd { width: 80%; }
}





@media screen and (max-width: 495px){
    section.information .information-right .place.w2{ font-size: 15.0vw; }
    section.artist .eng { font-size: 8.0vw; }
    /*
    section.present .present-box p{ font-size: 3vw; }
    section.charm .charm-inbox p{ font-size: 3vw; }
    section.works .catch{ font-size: 4vw; }
    section.works .text{ font-size: 3.2vw; }
    */
}