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


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

.mainVisual {
    margin-top: 85px;
}

.main__sp {
    margin: 0 auto;
}

.main__lp {
    display: none;
}

/* .part__present {
    content: '';
    position: absolute;
    width: 202px;
    top: -33px;
    top: -65px;
    left: 25%;
} */

.part__present {
    content: '';
    position: absolute;
    width: 250px;
    top: -84px;
    /* top: -65px; */
    left: 18.8%;
}

.part__santa {
    content: '';
    position: absolute;
    width: 47px;
    top: 92px;
    /* top: 58px; */
    left: 5.6%;
}

.part__house {
    content: '';
    position: absolute;
    width: 48px;
    top: 156px;
    /* top: 124px; */
    left: 238px;
}

/* .part__cookie {
    content: '';
    position: absolute;
    width: 150px;
    top: 102px;
    top: 58px;
    left: 330px;
} */

.part__cookie {
    content: '';
    position: absolute;
    width: 150px;
    top: 106px;
    /* top: 58px; */
    left: 323px;
}

/* .part__lease {
    content: '';
    position: absolute;
    width: 154px;
    top: 232px;
    top: 188px;
    left: -49px;
} */

.part__lease {
    content: '';
    position: absolute;
    width: 172px;
    top: 227px;
    /* top: 188px; */
    left: -67px;
}

.part__dome {
    content: '';
    position: absolute;
    width: 48px;
    top: 253px;
    /* top: 208px; */
    left: 277px;
}

/* article header */
@media screen and (min-width: 769px) {
    .article__header {
        width: 100%;
        height: 18%;
        margin: 0 auto;
    }
    
    .mainVisual {
        padding-top: 100px;
        margin-top: 0;
    }
    
    .main__sp {
        display: none;
    }
    
    .main__lp {
        display: block;
        width: 100vw;
        margin: 0 auto;
    }
    
    /* .part__present {
        width: 48.6%;
        top: -18%;
        left: 25%;
    } */

    .part__present {
        width: 70.2%;
        top: -44%;
        left: 19%;
    }
    
    .part__santa {
        width: 12.2%;
        top: 21.5%;
        left: 9%;
    }
    
    .part__house {
        width: 11.1%;
        top: 43%;
        left: 64%;
    }
    
    /* .part__cookie {
        width: 40.6%;
        top: 20%;
        left: 86%;
    } */

    .part__cookie {
        width: 36.5%;
        top: 26%;
        left: 84%;
    }
    
    .part__lease {
        width: 46.8%;
        top: 63.5%;
        left: -12.5%;
    }

    .part__lease {
        width: 54.3%;
        top: 65.0%;
        left: -19.5%;
    }
    
    .part__dome {
        width: 12.5%;
        top: 68.5%;
        left: 68%;
    }
}/* pc 769px */


/* ======================
Christmas Market is?
=======================*/
.section--ChristmasMarketIs {
    height: 1220px;
    background-image: url(../image/backgroundSp01.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 340px 1160px;
    margin-top: 30px;
}

.introduction {
    width: 375px;
    position: relative;
    margin: 0 auto;
}

.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.713deg);
    width: 152px;
    height: 12px;
    top: 52%;
    right: 30px;
}

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

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

.tag {
    content: '';
    position: absolute;
    width: 210px;
    transform: rotate(4.59deg);
    top: 49%;
    right: 17px;
}

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

.topicPart {
    width: 340px;
    height: 100px;
    margin: 15px auto 0;
    position: relative;
}

.frame {
    content: '';
    position: absolute;
    width: 51px;
    top: -17px;
    left: 21%;
}

.santa {
    content: '';
    position: absolute;
    width: 49px;
    top: 22px;
    left: 12.7%;
}

.topicImg__sub {
    content: '';
    position: absolute;
    width: 70px;
    top: 22px;
    left: 41%;
}

.topicImg__sub2 {
    content: '';
    position: absolute;
    width: 70px;
    top: 22px;
    right: 14.5%;
}

.pointTxt {
    width: 270px;
    background-color: rgba(221, 189, 135, 0.5);
    padding: 22px;
    position: relative;
}

.pointTxt::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 10px;
    width: 250px;
    border-top: 1px dashed var(--primary-white);
}

.pointTxt::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 10px;
    width: 250px;
    border-top: 1px dashed var(--primary-white);
}

.point__txt {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.2rem;
    line-height: 2.0;
    font-weight: 500;
    
}

.brLp {
    display: none;
}

.point__topic01, .point__topic02 {
    color: var(--primary-gold);
    font-size: 3.0rem;
    line-height: 1.0;
    opacity: 0.5;
}

.point01 {
    width: 270px;
    margin: 54px auto 0;
    position: relative;
}

.point__topic01 {
    content: '';
    position: absolute;
    top: -23px;
    left: 10px;
}

.pointImg01__sp {
    content: '';
    position: absolute;
    top: 131px;
    left: 50%;
}

.pointImg01__lp, .pointImg02__lp {
    display: none;
}

.point02 {
    width: 270px;
    margin: 132px auto 0;
    position: relative;
}

.point__topic02 {
    content: '';
    position: absolute;
    top: -23px;
    right: 10px;
}

.pointImg02__sp {
    content: '';
    position: absolute;
    top: -115px;
    left: -5px;
}

/* Christmas Market is? pc */
@media screen and (min-width: 769px) {
    .section--ChristmasMarketIs {
        height: auto;
        background-image: url(../image/backgroundLp01.png);
        background-position: 50% 50%;
        background-size: 86.8% 100%;
        padding-bottom: 150px;
        margin-top: 50px;
    }

    .introduction {
        width: 86.8%;
    }
    
    .introduction::after {
        font-size: 2.8vw;
        letter-spacing: 1.05px;
        width: 42%;
        height: 34px;
        top: 59.5%;
        right: 10.5%;
    }
    
    .topicCM {
        font-size: 10vw;
        margin-bottom: -25px;
    }
    
    .topicImg {
        width: 59%;
    }
    
    .tag {
        width: 56.5%;
        top: 55%;
        right: 7.7%;
    }
    
    .topicTxt {
        font-size: 1.7vw;
        font-weight: 700;
        line-height: 2.0;
        letter-spacing: 1.25px;
        margin-top: 52px;
    }

    .brSp {
        display: none;
    }
    
    .topicPart {
        width: 59%;
        height: 250px;
    }
    
    .frame {
        width: 20.7%;
        top: -10%;
        left: 7.3%;
    }

    .santa {
        width: 20.3%;
        top: 25%;
        left: 1.5%;
    }
    
    .topicImg__sub {
        width: 29%;
        top: 20%;
        left: 38%;
    }
    
    .topicImg__sub2 {
        width: 29%;
        top: 20%;
        right: 0.5%;
    }
    
    .pointTxt {
        width: 100%;
        padding: 52px 0;
    }
    
    .pointTxt:last-of-type {
        padding-right: 35px;
    }

    .pointTxt::before {
        top: 17px;
        left: 4.8%;
        width: 90%;
        border-top: 4px dashed var(--primary-white);
    }
    
    .pointTxt::after {
        bottom: 17px;
        left: 4.8%;
        width: 90%;
        border-top: 4px dashed var(--primary-white);
    }
    
    .point__txt {
        font-size: 1.0vw;
        line-height: 2.5;
        letter-spacing: 0.75px;
        width: 74%;
        margin-left: 35px;
    }

    .point__txt--right {
        text-align: right;
        margin-left: 0;
        margin: 0 0 0 auto;
    }
    
    .brLp {
        display: block;
    }
    
    .brSp {
        display: none;
    }

    .point__topic01, .point__topic02 {
        font-size: 7.0rem;
    }
    
    .point01 {
        width: 48%;
        margin: 130px auto 0;
    }
    
    .point__topic01 {
        top: -57.8px;
        left: 29px;
    }
    
    .pointImg01__lp {
        display: block;
        content: '';
        position: absolute;
        width: 48%;
        top: 27px;
        left: 65%;
    }
    
    .pointImg01__sp, .pointImg02__sp {
        display: none;
    }
    
    .point02 {
        width: 48%;
        margin: 130px auto 0;
    }
    
    .point__topic02 {
        top: -57.8px;
        right: 29px;
    }
    
    .pointImg02__lp {
        display: block;
        content: '';
        position: absolute;
        width: 29%;
        top: 20px;
        left: 0
    }
}/* pc 769px */


/* ======================
MainTopics
=======================*/
.section--MainTopics {
    background-image: url(../image/background_maintopicsSp.png);
    background-repeat: no-repeat;
    background-size: 340px 1295px;
    background-position: 50% 2px;
    margin: 100px auto;
    padding: 60px 0;
    position: relative;
    width: 375px;
}

.topicMT {
    width: 85%;
    content: '';
    position: absolute;
    top: -30px;
    left: 30px;
}


.topicMT img {
    width: 100%;
}

.content {
    margin-top: 30px;
    position: relative;
}

.content::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    background-image: url(../image/part04Sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: -18px;
    right: 103px;
}

.content:first-of-type {
    margin-top: 10px;
}

.content__title {
    width: 225px;
    height: 140px;
    margin: 0 0 -10px 11.7%;
    position: relative;
    z-index: 2;
}

.title__number {
    color: var(--primary-white);
    font-size: 6.5rem;
    line-height: 1.3;
    letter-spacing: 2.6px;
    opacity: 0.3;
    margin-bottom: -40px;
}

.title {
    color: var(--primary-white);
    font-size: 5.2rem;
    line-height: 0.9;
    margin-left: 20px;
}

.contet__txt {
    background-color: var(--primary-white);
    width: 300px;
    height: 245px;
    border-radius: 15px;
    margin: 0 auto;
    position: relative;
}

.contet__txt::after {
    content: 'Merry Christmas';
    position: absolute;
    color: var(--primary-gold);
    text-align: center;
    font-size: 3.6rem;
    line-height: 1.0;
    letter-spacing: -0.72px;
    opacity: 0.25;
    left: 17%;
    bottom: 24px;
}

.txt__title {
    color: var(--primary-red);
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.72px;
    margin-left: 20px;
    padding-top: 20px;
}

.leaf {
    width: 256px;
    margin: 13px 0 0 20px;
}

.txt {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8;
    width: 86%;
    margin: 15px auto 0;
}

.contentImg {
    content: '';
    position: absolute;
    top: 2px;
    right: -25px;
}

.contentImg img {
    width: 188px;
}

.pointBtn {
    width: 116px;
    margin-top: 16px;
    margin-left: 20px;
    position: relative;
    z-index: 4;

    .off {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        transition: .4s ease;
      }
      .on {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }
      .on, .off {
        display: block;
      }
}

.pointBtn:hover {
    .off {
        opacity: 0;
      }
}

.pointBtn::before {
    content: 'More';
    position: absolute;
    color: var(--primary-white);
    font-size: 1.4rem;
    line-height: 1.0;
    letter-spacing: 1.4px;
    top: 3px;
    left: 10px;
    z-index: 2;
}

.pointBtn::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 7px;
    background-image: url(../image/vector.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: 7px;
    right: 10px;
    z-index: 3;
}

.partLp01, .partLp02, .partLp03 {
    display: none;
}

/* MainTopics pc */
@media screen and (min-width: 769px) {
    .section--MainTopics {
        background-image: url(../image/background_maintopicsLp.png);
        background-size: 86.8% 100%;
        background-position: 50% 50%;
        margin: 220px auto 0;
        padding-bottom: 200px;
        width: 100%;
    }
    
    .topicMT {
        width: 78%;
        top: -40px;
        left: 11.5%;
    }
    
    
    .topicMT img {
        width: 100%;
    }
    
    .content {
        margin-top: 150px;
        position: relative;
    }
    
    .content::after {
        display: none;
    }
    
    .content:first-of-type {
        margin-top: 165px;
    }
    
    .content__title {
        width: 64.3%;
        height: auto;
        margin: 0 0 -2.5% 10%;
        position: relative;
        z-index: 2;
    }
    
    .title__number {
        font-size: 15.0vw;
        letter-spacing: 6.8px;
        margin-bottom: -16%;
    }
    
    .title {
        font-size: 9.5vw;
        line-height: 1.0;
        margin-left: 4.3%;
    }
    
    .contet__txt {
        width: 65%;
        height: auto;
        padding: 4.5%;
        border-radius: 20px;
        margin: 0 0 0 10%;
    }
    
    .contet__txt::after {
        font-size: 6.5rem;
        letter-spacing: -1.3px;
        width: 40%;
        left: 23%;
        bottom: 40px;
    }
    
    .txt__title {
        font-size: 2.6vw;
        letter-spacing: 1.4px;
        padding-top: 6.5%;
    }
    
    .leaf {
        width: 50%;
        margin-top: 18px;
    }
    
    .txt {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 2.2;
        width: 50%;
        margin: 22px 0 0 15px;
    }
    
    .contentImg {
        width: 42%;
        top: 17%;
        right: 10%;
    }
    
    .contentImg img {
        width: 100%;
    }

    .pointBtn {
        width: 30%;
        margin-top: 39px;
        position: relative;
        z-index: 2;

        .off {
            position: relative;
            top: 0;
            left: 0;
            z-index: 1;
            transition: .4s ease;
          }
          .on {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
          }
          .on, .off {
            display: block;
          }
    }

    .pointBtn:hover {
        .off {
          opacity: 0;
        }
    }
    
    .pointBtn::before {
        font-size: 1.8vw;
        letter-spacing: 2.4px;
        top: 20%;
        left: 8.5%;
    }
    
    .pointBtn::after {
        width: 30%;
        height: 35%;
        top: 30%;
        right: -16.5%;
    }

    .partLp01 {
        display: block;
        content: '';
        position: absolute;
        width: 17%;
        top: 10%;
        left: 43%;
    }

    .partLp02 {
        display: block;
        content: '';
        position: absolute;
        width: 11%;
        top: 58px;
        left: 46.0%;
    }

    .partLp03 {
        display: block;
        content: '';
        position: absolute;
        width: 18%;
        top: 20%;
        left: 37%;
    }
}/* pc 769px */


/* ======================
Access
=======================*/
.section--Access {
    width: 375px;
    margin: 0 auto;
    position: relative;
}

.topicAC {
    color: var(--primary-white);
    font-size: 4.3rem;
    line-height: 1.0;
    text-align: center;
    margin-bottom: -9px;
}

.access__santa {
    content: '';
    position: absolute;
    width: 50px;
    top: -15px;
    right: 30px;
}

.accessContainer {
    background-color: var(--primary-white);
    border-radius: 25px;
    width: 86.5%;
    height: 370px;
    margin: 0 auto;
    background-image: url(../image/tag_red.png), url(../image/part01.png), url(../image/part02.png), url(../image/background_snowAccess.png);
    background-repeat: no-repeat;
    background-size: 239px, 56px, 120px, cover;
    background-position: 46% 194px, right 28px bottom 26px, left 27px bottom 27px, 50% 50%;
}

.map {
    width: 100%;
    height: 50%;
    display: block;
    padding: 20px;
}

.access__title {
    color: var(--primary-white);
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.3;
    margin-top: 20px;
}

.access__address, .access__tel {
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.7px;
    margin-top: 24px;
    text-align: center;
}

.address {
    margin-left: 15px;
}

.access__tel {
    margin-top: 8px;
}

.access__tel img {
    width: 19px;
    margin-right: 15px;
}

/* Access pc */
@media screen and (min-width: 769px) {
    .section--Access {
        width: 100%;
        margin: 150px auto;
    }
    
    .topicAC {
        font-size: 10vw;
        margin-bottom: -2.1vw;
    }
    
    .access__santa {
        width: 145px;
        top: -15px;
        right: 5.5%;
    }
    
    .accessContainer {
        background-color: var(--primary-white);
        border-radius: 25px;
        height: auto;
        margin: 0 auto;
        background-image: url(../image/part01.png), url(../image/part02.png), url(../image/background_snowAccess.png);
        background-repeat: no-repeat;
        background-size: 9.8%, 17.7%, cover;
        background-position: right 118px bottom 54px, left 118px bottom 54px, 50% 50%;
    }
    
    .map {
        width: 100%;
        height: 560px;
        display: block;
        padding: 52px 9.5% 0;
    }
    
    .access_content {
        padding-bottom: 60px;
    }

    .access__title {
        background-image: url(../image/tag_red.png);
        background-repeat: no-repeat;
        background-size: 46%;
        background-position: 47% 50%;
        font-size: 2.5vw;
        font-weight: 900;
        line-height: 2.5; 
        letter-spacing: 3.6px;
        margin-top: 3%;
    }
    
    .access__address, .access__tel {
        font-size: 2.0rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 1.8px;
        margin-top: 40px;
    }

    .access__tel {
        margin-top: 9px;
    }
    
    .access__tel img {
        width: 24px;
    }
}/* pc 769px */


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

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