img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
body {
    /* background-image: url('../images/bg.jpg'); */
    background-color: #DED9C8;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; 
    animation: img_bg 16s ease forwards;
}
body::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-image:url('../images/bg.jpg');
    background-size: cover;
}

@keyframes img_bg {
  0% {
      background-image: url(../images/bg_a9894a.jpg);
  }
  15% {
      background-image: url(../images/bg_a9894a.jpg);
  }
  20% {
      background-image: url('../images/bg.jpg');
  }
  100% {
      background-image: url('../images/bg.jpg');
  }
}

#xmas-live {
    position: relative;
    overflow: hidden;
    margin: 0;
}
.xmas-live_kv {
    border-bottom: 1px solid #e5dbc8;
    background: #fff;
}
@media (width <= 768px) {
    .xmas-live_kv {
        padding-top: 30px;
    }
}
.xmas-live_contents {
    background: #DED9C8;
    padding-bottom: 10rem;
}
.xmas-live_description {
    background: #fff;
    padding: 6rem 2rem;
}
.fff {
    background: #fff;
    padding-bottom: 6rem;
}
.fff .xmas-live_artist-img {
    border: 1px solid #c8c8c8;
}
.fff .xmas-live_artist-w {
    display: flex;
    gap: 2rem;
    width: 960px;
    margin: 0 auto;
}
@media (width <= 768px) {
    .fff .xmas-live_artist-w {
        display: block;
        width: 90%;
        margin: 0 auto;
    }
}

.xmas-live_description h3 {
    color: #A9894A;
    font-size: 2.6rem;
    margin-bottom: 1rem;
}
@media (width <= 768px) {
    .xmas-live_description h3 {
        font-size: 2.2rem;
    }
  }
.xmas-live_description p {
    margin-top: 1.4rem;
    font-size: 1.4rem;
    line-height: 2;
}

img.xmas-live_logo-img {
    width: 95%;
}
.xmas-live_ttl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}
.xmas-live_ttl p {
    color: #fff;
}
p.xmas-live_date {
    font-family: 'Jost', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.1em;
    margin-top: 24px;
}
p.xmas-live_date span {
    display: block;
    font-size: 1.5rem;
    margin-top: 8px;
}
p.xmas-live_subttl {
    font-family: 'Jost', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    margin-top: 32px;
}
p.xmas-live_txt {
    margin-top: 12px;
}
p.xmas-live_artist-subttl {
    color: #fff;
    font-size: 3rem;
    font-family: 'Jost', sans-serif;
    margin-bottom: 1rem;
}
@media (width <= 768px) {
    p.xmas-live_artist-subttl {
        font-size: 2.4rem;
    }
}
h3.xmas-live_contents-ttl {
    font-family: 'Jost', sans-serif;
    color: #a9894a;
    font-size: 3rem;
    letter-spacing: 0.1em;
    padding: 6rem 0 2rem;
}
/* artist */
.xmas-live_artist-w {
    display: flex;
    gap: 2rem;
    width: 1000px;
    margin: 0 auto;
}
@media (width <= 768px) {
    .xmas-live_artist-w {
        display: block;
        width: 100%;
    }
}
img.xmas-live_artist-img {
    width: 100%;
    height: auto;
}
img.xmas-live_artist-img.tate {
    width: auto;
    height: 490px;
}
@media (width <= 768px) {
    img.xmas-live_artist-img {
        height: auto;
        width: 100%;
    }
    img.xmas-live_artist-img.tate {
        height: 375px;
        width: auto;
    }
    .fff img.xmas-live_artist-img {
        width: 100%;
        height: auto;
    }
}
.xmas-live_artist-txt {
    width: 90%;
    margin: 2rem auto 4rem;
}
p.xmas-live_artist-name {
    font-family: 'Jost', sans-serif;
    color: #a9894a;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    text-align: left;
    margin-top: 10px;
}
.xmas-live_artist-info {
    display: block;
    font-size: 1.4rem;
    text-align: left;
    margin: 5px auto 1rem;
}
.xmas-live_artist-info span {
    display: block;
    font-size: 1.5rem;
}
p.xmas-live_artist-txt-more {
    font-size: 1.3rem;
    text-align: left;
    margin: 10px auto 0;
    word-break: break-all;
    font-family: "中ゴシックBBB";
}
p.xmas-live_artist-txt-more a {
    text-decoration: underline;
    transition: .3s;
}

strong {
    display: block;
}


/*  */
.xmas-live-venue {
    background: #fff;
    padding: 0 0 6rem;
}
.xmas-live-venue-img {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}
p.xmas-live-caption {
    margin-top: 0.6rem;
    display: block;
    text-align: right;
}
/* information */
.xmas-live_information {
    background: #fff;
    width: 90%;
    margin: 0 auto;
    padding: 2rem;
}
span.xmas-live_information-ttl {
    font-size: 1.5rem;
    display: block;
    color: #a9894a;
    margin-bottom: 2px;
}
p.xmas-live_information-txt {
    text-align: left;
    margin-bottom: 10px;
    font-size: 1.3rem;
}
.xmas-live_information-txt.center {
    text-align: center;
    margin-top: 20px;
    display: inline-block; 
}
.xmas-live_information-txt.center a {
    display: block;
    color: #fff;
    background: #a9894a;
    padding: 1rem 4rem;
}
/* comingsoon */
p.comingsoon {
    font-family: 'Jost', sans-serif;
    color: #fff;
    font-size: 2rem;
    letter-spacing: 0.08em;
}
/* more */
.xmas-live_artist-txt-more {
  display: none;
}
a.dsc_more {
    color: #555555;
    font-size: 1.2rem;
    transition: .3s;
}
a.dsc_more {
    display: block;
    margin: 1rem 2px;
    text-align: center;
}
@media (width <= 768px) {
    a.dsc_more {
        text-align: left;
    }
}
a.dsc_more:hover {
    opacity: 0.7;
}
img.arrow {
    width: 9px;
    margin-bottom: 7px;
    margin-right: 5px;
}
.dsc_more img {
    transition: .3s;
}
.dsc_more.is-active img {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}


/* contact */
.contact {
    width: 90%;
    margin: 10rem auto 3rem;
    text-align: left;
}
.contact h3 {
    font-size: 1.6rem;
    color: #a9894a;
    margin-bottom: 4px;
}
.contact p {
    color: #fff;
}
.contact a {
    color: #fff;
    text-decoration: underline;
}

/* pc */
@media screen and (min-width: 788px) {
    .xmas-live_logo {
        width: 48%;
        max-width: 640px;
        margin: 0 auto;
    }
    p.xmas-live_date {
        font-size: 3rem;
    }
    p.xmas-live_date span {
        font-size: 2rem;
    }
    p.xmas-live_subttl {
        font-size: 2.4rem;
    }
    p.xmas-live_txt {
        font-size: 1.6rem;
    }
    h3.xmas-live_contents-ttl {
        font-size: 4.8rem;
    }
    .xmas-live_description p {
        font-size: 1.5rem;
    }
    /* artist pc */
    
    .xmas-live_artist-img {
        width: 100%;
        height: auto;
        /* position: absolute;
        top: -72px;
        right: 0;
        box-shadow: 0 10px 16px 0 rgba(0, 0, 0, .2); */
    }
    .xmas-live_artist-txt {
        max-width: 1000px;
    }
    .xmas-live_artist {
        width: 100%;
    }
    .xmas-live_artist-detail {
        margin: 0 auto;
        padding: 0 0 3rem;
    }
    .xmas-live_artist-txt {
        margin: 3rem auto;
    }
    .xmas-live_artist-detail.reverse {
        flex-direction: row-reverse;
    }
    .xmas-live_artist-detail.reverse .xmas-live_artist-img {
        left: 0;
    }
    p.xmas-live_artist-name {
        font-size: 2.4rem;
        text-align: center;
    }
    .xmas-live_artist-info {
        font-size: 1.4rem;
    }
    .xmas-live_artist-info span {
        font-size: 1.6rem;
    }
    


    /* information pc */
    .xmas-live_information {
        width: 85%;
        max-width: 960px;
        margin: 0 auto;
        padding: 6rem;
    }
    span.xmas-live_information-ttl {
        font-size: 1.6rem;
    }
    p.xmas-live_information-txt {
        font-size: 1.4rem;
    }



    /* contact pc */
    .contact {
        width: 85%;
        max-width: 960px;
    }
}
/*  */
.js-inView {
    opacity: 0;
}
.js-inViewAct {
    -webkit-animation: inViewActKey 1.8s;
    animation: inViewActKey 1.8s;
    -webkit-animation-timing-function: cubic-bezier(0.19, 0.155, 0, 0.885);
    animation-timing-function: cubic-bezier(0.19, 0.155, 0, 0.885);
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes inViewActKey {
    0% {
        opacity: 0;
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@keyframes inViewActKey {
    0% {
        opacity: 0;
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
/*  */
.funfLoader {
    position: fixed;
    z-index: 9999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #A9894A;
}
.funfLoader .funfLoaderLogo {
    width: 80vw;
    opacity: 0;
    -webkit-transition: 1s all cubic-bezier(0.19, 0.155, 0, 0.885);
    transition: 1s all cubic-bezier(0.19, 0.155, 0, 0.885);
    -webkit-transform: translateY(3%);
    transform: translateY(3%);
}
.funfLoader .funfLoaderLogo.In {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}
@media screen and (max-width: 787px) {
    .funfLoader .funfLoaderLogo.In {
       transform: translateY(-8%);
   }
}
.funfLoader.Hide {
    opacity: 0;
    -webkit-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.funfLoader.Hide .funfLoaderLogo {
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%);
}
.funfLoader.Null {
    display: none;
}
/*  */
@media screen and (max-width: 787px) {
    .funfLoader .funfLoaderLogo {
        width: 90vw;
    }
}
/*  */
@media screen and (min-width: 788px) {
    .pc_hide {
        display: none !important;
    }
}
@media screen and (max-width: 787px) {
    .sp_hide {
        display: none !important;
    }
}