/* common
**************/
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* <link
    href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap"
    rel="stylesheet"> */
:root {
    --primary-color: #AA783E;
    --secondary-color: #CBA373;
    --tertiary-color: #E2D2BF;
    --foreground-color: #212121;
    --foreground-inverted-color: #ffffff;
    --background-color: #fff;
    --background-secondary-color: #F5F0EB;
    --main-color-1: #ebebeb;
    --main-color-2: #ffffff;
    --main-color-3: #f8f8f8;
    --main-color-4: #e6e6e6;

    --logo-color: #000;

    --header-background-color: rgba(255, 255, 255, 0.3);
    --header-tel-color: #3B3B3B;

    --gnav-background-color: var(--primary-color);
    --gnav-en-color: var(--foreground-color);

    --slide-arrows-color: var(--foreground-inverted-color);
    --slide-arrows-bg-color: var(--secondary-color);

    --gradient-color-1: linear-gradient(90deg, #CBA373, #BB8443);
    --gradient-color-2: linear-gradient(180deg, #CBA373, #AA783E);
    --gradient-color-3: linear-gradient(180deg, #CBA373, #BB8443);
    --gradient-color-4: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 85%, rgba(255, 255, 255, 1) 100%);
    --gradient-color-5: linear-gradient(45deg, #ECE4D9, #E2D2BF);

    --base-kana-font: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --base-font-family: "Jost", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --base-alphabetic-font: "Jost", sans-serif;
}

.logo-text {
    fill: var(--logo-color);
}

.only-premium {
    display: none;
}


/* header
**************/
.header__class .class-btn[class*="--basic"] {
    border: 1px solid var(--secondary-color);
}

/* button
**************/

.view-more,
.view-more::before {
    background-color: rgba(170, 120, 62, 0.6);
}

#mv .view-more,
#mv .view-more::before {
    background-color: rgba(170, 120, 62, 0.1);
}

.view-more:hover,
#mv .view-more:hover {
    background-color: rgba(255, 255, 255, 0.6);

}

.view-more:hover::before,
#mv .view-more:hover::before {
    background-color: rgba(255, 255, 255, 0.6);
}


/*****************************
 * 背景画像
*****************************/
/* body
**************/
body {
    background: url(../img/bg/basic/bg-fix.jpg) fixed no-repeat center top;
    background-size: cover;
}

@media (max-width: 767px) {

    body::before {
        background-image: url(../img/bg/basic/bg-fix.jpg);
        background-repeat: no-repeat;
        background-position: 50% 100%;
        background-size: cover;
    }
}

/* header
**************/
@media (max-width: 767px) {
    .header__contents {
        background: url(../img/bg/basic/footer-bg.jpg) no-repeat;
        background-size: cover;
    }
}

#gnav .container {
    background: url(../img/bg/basic/nav-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#gnav.fixed .header__contents {
    background: url(../img/bg/basic/footer-bg.jpg) no-repeat;
    background-size: cover;

}

/* footer
**************/
footer {
    background: url(../img/bg/basic/footer-bg.jpg) no-repeat;
    background-size: cover;
}

#footer_btn {
    background: url(../img/bg/basic/nav-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* top
**************/
.cover,
.recommend {
    background-color: var(--background-secondary-color);
}

.freespace {
    position: relative;
    background-repeat: repeat-y;
    background-position: center, center;
    background-image: url(../img/bg/basic/free-space-text-bg.png), url(../img/bg/basic/free-space-bg.jpg);
}


#event {
    position: relative;
    background-position: center;
    background-size: cover;
    background-image: url(../img/bg/basic/event-texture-bg.png);
}

#event::after {
    content: "";
    position: absolute;
    background-image: url(../img/bg/basic/event-upper-parts.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

#event::before {
    content: "";
    position: absolute;
    background-image: url(../img/bg/basic/event-lower-parts.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

#event .contents h3 a::before {
    background-image: url(../img/bg/basic/event-mark.svg);
}

.marquee {
    background: url(../img/bg/basic/text-break-bg.jpg) no-repeat;
    background-size: cover;
}

#newface {
    position: relative;
    background-color: var(--background-color);
    overflow: hidden;
}

#newface::before,
#newface::after {
    content: "";
    position: absolute;
    background-image: url(../img/bg/basic/new-face-bg-parts.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;

}

#newface::after {
    transform: scale(-1, -1);
}

#ranking {
    background-image:
        url(../img/bg/basic/ranking-bg-parts01.png),
        url(../img/bg/basic/ranking-bg-parts02.png),
        url(../img/bg/basic/ranking-bg-parts03.png),
        linear-gradient(0deg, #E2D2BF, #F5F0EB 33%, #F5F0EB 66%, #E2D2BF);

    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

    background-position:
        top left,
        top right,
        bottom right,
        center;
}

/* systemページ */

.price li {
  background-image: url(../img/bg/basic/event-texture-bg.png);
}

.price li::after {
  content: "";
  position: absolute;
  background-image: url(../img/bg/basic/event-upper-parts.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.price li::before {
  content: "";
  position: absolute;
  background-image: url(../img/bg/basic/event-lower-parts.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 767px) {

    .freespace {
        background-size: 170%, cover;
    }

    #event::after {
        top: 0;
        left: 0;
        width: 35vw;
        height: 26vw;
    }

    #event::before {
        bottom: 0;
        right: 0;
        width: 35vw;
        height: 26vw;
    }

    #newface::before {
        top: 0;
        right: -50%;
        width: 960px;
        height: 373px;
    }

    #newface::after {
        bottom: 0;
        left: -50%;
        width: 960px;
        height: 373px;
    }

    #ranking {
        background-size:
            50vw 50vw,
            30vw 30vw,
            50vw 50vw,
            cover;
    }

    /* systemページ */
    .price li::after {
    top: 0;
    left: 0;
    width: 29vw;
    height: 21vw;
  }

  .price li::before {
    bottom: 0;
    right: 0;
    width: 29vw;
    height: 20vw;
  }
}

@media (min-width: 768px) {

    .freespace {
        background-size: 85%, cover;
    }

    #event::after {
        top: 0;
        left: 0;
        width: 28vw;
        height: 20.2vw;
    }

    #event::before {
        bottom: 0;
        right: 0;
        width: 28vw;
        height: 20.2vw;
    }


    #newface::before {
        top: 0;
        right: 0;
        width: 100%;
        height: 50%;
    }

    #newface::after {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
    }

    #ranking {
        background-size:
            30vw 30vw,
            15vw 15vw,
            20vw 20vw,
            cover;
    }

    /* systemページ */
    .price li::after {
    top: 0;
    left: 0;
    width: 16vw;
    height: 16vw;
  }

  .price li::before {
    bottom: 0;
    right: 0;
    width: 20vw;
    height: 15vw;
  }
}