@charset "utf-8";
/* ======================
common
=======================*/
html {
    background-color: var(--primary-green, #A4B89F);
}


/* ======================
article header
=======================*/
.article__header {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 375px;
    position: relative;
}

.mainVisual {
    margin-top: 50px;
}

.mainTxt {
    color: var(--primary-white);
    font-size: 6.0rem;
    line-height: 1.0;
}

.mainYear {
    content: '';
    position: absolute;
    color: var(--primary-white);
    font-size: 3.0rem;
    line-height: 0.9;
    top: 111px;
    right: 8px;
}

.part__lease {
    content: '';
    position: absolute;
    width: 51px;
    top: 83px;
    left: 63px;
}

.part__dome {
    content: '';
    position: absolute;
    width: 58px;
    top: 105px;
    right: 55px;
}

/* article header pc */
@media screen and (min-width: 769px) {
    .article__header {
        width: 100%;
        margin: 0 auto;
    }
    
    .mainVisual {
        margin: 155px 10% 0;
    }
    
    .mainTxt {
        font-size: 15vw;
    }
    
    .mainYear {
        font-size: 6.9vw;
        top: 66%;
        right: 3%;
    }
    
    .mainPart {
        width: 100%;
    }

    /* .part__lease {
        content: '';
        position: absolute;
        width: 13.7%;
        top: 46%;
        left: 16%;
    } */

    .part__lease {
        content: '';
        position: absolute;
        width: 15.1%;
        top: 47%;
        left: 17.5%;
    }
    
    .part__dome {
        content: '';
        position: absolute;
        width: 16.5%;
        top: 54%;
        right: 16%;
    }
}/* pc 769px */


/* ======================
specialEvent
=======================*/
.specialEvent {
    height: 2850px;
    background-image: url(../image/backgroundSp02.png);
    background-repeat: no-repeat;
    background-position: 50% 20px;
    background-size: 366px 2811px;
    margin-top: 40px;
}

.introduction {
    width: 366px;
    position: relative;
    margin: 0 auto;
    background-image: url(../image/part18.png), url(../image/part19.png);
    background-repeat: no-repeat;
    background-size: 150px, 160px;
    background-position: right -5px top 28px, left 5px bottom 100px;
}

.introduction::after {
    content: 'スペシャルイベント';
    position: absolute;
    color: var(--primary-white);
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: 0.36px;
    text-align: center;
    transform: rotate(-4.199deg);
    width: 152px;
    height: 12px;
    top: 51.5%;
    left: 23px;
}


.topic {
    color: var(--primary-red);
    text-align: center;
    font-size: 4.3rem;
    line-height: 1.0;
    padding-top: 70px;
    margin-bottom: -8px;
}

.topicImg {
    width: 256px;
    display: block;
    margin: 0 auto;
}

.tag {
    content: '';
    position: absolute;
    width: 210px;
    top: 47%;
    left: 10px;
}

.topicTxt {
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    margin-top: 17px;
}

.topicPart {
    width: 366px;
    height: 75px;
    margin: 0 auto;
    position: relative;
}

.frame {
    content: '';
    position: absolute;
    width: 46px;
    top: -5px;
    left: 38%;
}

.santa {
    content: '';
    position: absolute;
    width: 54px;
    transform: rotate(18.053deg);
    top: 6px;
    left: 49%;
}

.eventContent01, .eventContent02, .eventContent03 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 45px auto 0;
    width: 366px;
}

.eventContent01 {
    background-image: url(../image/part07.png), url(../image/part08.png);
    background-repeat: no-repeat;
    background-size: 208px, 198px;
    background-position: left 37px bottom 20px, right 22px top 275px;
}

.eventContent02 {
    background-image: url(../image/part09.png), url(../image/part10.png);
    background-repeat: no-repeat;
    background-size: 268px, 192px;
    background-position: left 18px bottom 13px, right 22px top 250px;
}

.eventContent03 {
    background-image: url(../image/part11.png), url(../image/part12.png);
    background-repeat: no-repeat;
    background-size: 245px, 135px;
    background-position: left 5px bottom 13px, right 50px top 250px;
}

.eventImg {
    width: 258px;
    margin: 0 auto;
    position: relative;
}

.eventContent01 .eventImg::before {
    content: '';
    position: absolute;
    background-image: url(../image/eventSp01.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 380px;
    height: 165px;
    top: -40px;
    left: -45px;
}

.eventContent01 .eventImg::after {
    content: 'Christmas Concert';
    position: absolute;
    width: 270px;
    height: 80px;
    color: var(--primary-gold);
    text-align: center;
    font-size: 4.5rem;
    line-height: 0.9;
    bottom: 5px;
    left: -8px;
}

.eventContent02 .eventImg::before {
    content: '';
    position: absolute;
    background-image: url(../image/eventSp02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 380px;
    height: 165px;
    top: -40px;
    left: -45px;
    z-index: 2;
}

.eventContent02 .eventImg::after {
    content: 'Merry GoRound';
    position: absolute;
    width: 270px;
    height: 80px;
    color: var(--primary-gold);
    text-align: center;
    font-size: 4.5rem;
    line-height: 0.9;
    bottom: 5px;
    left: -8px;
}

.eventContent03 .eventImg::before {
    content: '';
    position: absolute;
    background-image: url(../image/eventSp03.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 380px;
    height: 165px;
    top: -40px;
    left: -45px;
    z-index: 2;
}

.eventContent03 .eventImg::after {
    content: 'Make Wreath';
    position: absolute;
    width: 270px;
    height: 80px;
    color: var(--primary-gold);
    text-align: center;
    font-size: 4.5rem;
    line-height: 0.9;
    bottom: 5px;
    left: -8px;
}

.content__title {
    color: var(--primary-red);
    font-family: "Train One";
    text-align: center;
    font-size: 4.0rem;
    line-height: 1.3;
    letter-spacing: 2.8px;
    margin: 23px auto 0;
}

.content__date {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 13px auto 0;
}

.ribbon {
    width: 35px;
    margin-right: 6px;
}

.date {
    text-align: center;
    font-size: 2.0rem;
    line-height: 1.0;
}

.content__txt {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.4rem;
    line-height: 2.1;
    width: 250px;
    margin: 15px auto 0;
}

/* specialEvent pc */
@media screen and (min-width: 769px) {
    .specialEvent {
        height: auto;
        background-image: url(../image/backgroundLp02.png);
        background-repeat: no-repeat;
        background-position: 50% 20px;
        background-size: 95% 99%;
        margin-top: 110px;
        padding-bottom: 150px;
    }
    
    .introduction {
        width: 88%;
        background-size: 26.8%, 28%;
        background-position: right 65px top 155px, left 60px bottom 145px;
    }
    
    .introduction::after {
        font-size: 2.8vw;
        letter-spacing: 1.05px;
        letter-spacing: 0.36px;
        width: 42%;
        height: 34px;
        top: 62.5%;
        left: 7.5%;
    }
    
    .topic {
        font-size: 10.0vw;
        padding-top: 140px;
        margin-bottom: -2.1vw;
    }
    
    .topicImg {
        width: 63%;
    }
    
    .tag {
        width: 59.6%;
        top: 56%;
        left: 10px;
    }
    
    .brSp {
        display: none;
    }

    .topicTxt {
        font-size: 1.9vw;
        font-weight: 700;
        line-height: 2.0;
        letter-spacing: 1.25px;
        margin-top: 55px;
    }
    
    .topicPart {
        width: 63%;
        height: 165px;
    }
    
    .frame {
        width: 15.5%;
        top: -27px;
        left: 38%;
    }
    
    .santa {
        width: 17.8%;
        top: 6px;
        left: 49%;
    }
    
    .eventContent01, .eventContent02, .eventContent03 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin: 100px auto 80px;
        width: 100%;
    }
    
    .eventContent01 {
        background-image: url(../image/part07.png), url(../image/part08.png);
        background-repeat: no-repeat;
        background-size: 37.6%, 20.0%;
        background-position: right 38% bottom -25%, right 5% top 3%;
    }
    
    .eventContent02 {
        background-image: url(../image/part09.png), url(../image/part10.png);
        background-repeat: no-repeat;
        background-size: 37.6%, 21.1%;
        background-position: right 38% bottom -35%, right 5% top 3%;
    }
    
    .eventContent03 {
        background-image: url(../image/part11.png), url(../image/part12.png);
        background-repeat: no-repeat;
        background-size: 37.6%, 20.5%;
        background-position: right 35% bottom -25%, right 7% top 5%;
    }
    
    .eventImg {
        width: 40.1%;
        margin: 0 35px 0 7.5%;
    }
    
    .eventContent01 .eventImg::before {
        background-image: url(../image/eventLp01.png);
        width: 100%;
        height: 100%;
        top: -15%;
        left: -20%;
    }
    
    .eventContent01 .eventImg::after {
        width: 38.5%;
        height: 28%;
        text-align: left;
        font-size: 6.4vw;
        line-height: 1.0;
        bottom: 17%;
        left: -10%;
    }
    
    .eventContent02 .eventImg::before {
        background-image: url(../image/eventLp02.png);
        width: 100%;
        height: 100%;
        top: -15%;
        left: -20%;
        z-index: 2;
    }
    
    .eventContent02 .eventImg::after {
        width: 38.5%;
        height: 28%;
        text-align: left;
        font-size: 6.4vw;
        line-height: 1.0;
        bottom: 17%;
        left: -10%;
    }
    
    .eventContent03 .eventImg::before {
        background-image: url(../image/eventLp03.png);
        width: 100%;
        height: 100%;
        top: -15%;
        left: -20%;
        z-index: 2;
    }
    
    .eventContent03 .eventImg::after {
        width: 38.5%;
        height: 28%;
        text-align: left;
        font-size: 6.4vw;
        line-height: 1.0;
        bottom: 17%;
        left: -10%;
    }

    .content {
        width: 35%;
    }
    
    .content__title {
        text-align: left;
        font-size: 6.0vw;
        letter-spacing: 5.25px;
        margin: 0;
    }
    
    .content__date {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 30px 0 0 0;
    }
    
    .ribbon {
        width: 15%;
        margin-right: 14px;
    }
    
    .date {
        font-size: 2.7vw;
    }
    
    .content__txt {
        font-size: 1.4vw;
        line-height: 2.3;
        width: 88%;
        margin: 21px 0 0 0;
    }
}


/*==========================
fadeIn
==========================*/
.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}