/* ローディング画面 */
#loading_bg {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vw;
    top: 0px;
    left: 0px;
    background: #123364;
    z-index: 100001;
}

.index {
    /*opacity:0.95 !important;*/
}


#loading_disp {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: center;
    color: #fff;
    z-index: 100002;
}

.grandmesse_logo {
    animation-name: grandmesseAnime;
    animation-fill-mode: backwards;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 0.5s;
    animation-direction: normal;
}

/*1で解説*/
@keyframes grandmesseAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@media screen and (min-width:768px) {
    /* PC */
    #loading_disp {
        width: 300px;
        height: 200px;
        margin-top: -100px;
        margin-left: -150px;
    }
}

@media screen and (max-width:767px) {
    /* スマホ */
    #loading_disp {
        width: 180px;
        height: 100px;
        margin-top: -50px;
        margin-left: -75px;
    }
}

#loading_disp img {
    z-index: 100003;
    text-align: center;
}

@media screen and (min-width:768px) {
    /* PC */
    #loading_disp .grandmesse_logo img {
        width: 350px;
        text-align: center;
        padding: 0px 0px 20px 0px;
    }

    #loading_disp .grandmesse_logo02 img {
        width: 268px;
        text-align: center;
        padding: 0px 0px 20px 30px;
    }
}

@media screen and (max-width:767px) {
    /* スマホ */
    #loading_disp img {
        width: 180px !important;
        padding: 0px 0px 15px;
    }
}



/* スクロール&フェードイン */
.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1500ms;
}

    .fadein.scrollined_nowait {
        opacity: 1;
        transform: translate(0, 0);
        transition: all 1500ms 0s !important;
    }

    .fadein.scrollined {
        opacity: 1;
        transform: translate(0, 0);
        transition: all 1500ms 1s !important;
    }

    .fadein.scrollin {
        opacity: 1;
        transform: translate(0, 0);
    }

/* 左から中央へ伸びる三角 */
.triangle_left {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 470vw;
    height: 90vw;
    overflow: hidden;
    z-index:100;
}

    .triangle_left::before {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 50%;
        left: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/triangle_left01.svg);
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateX(-100%);
        transition: transform 0.4s ease 0.5s;
    }

.triangle_left_in::before {
    transform: translateX(0) !important;
}


/* 右から中央へ伸びる三角 */
.triangle_right {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    height: 67vw;
    overflow: hidden;
}

    .triangle_right::after {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        right: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/triangle_right01.svg);
        background-position: right bottom;
        background-size: 200% 140%;
        transform: translateX(100%);
        transition: transform 0.4s ease 0.5s;


        padding-top:600px;
    }

.triangle_right_in::after {
    transform: translateX(0) !important;
}


/* 左から中央へ回ってくる三角 */
.triangle_leftrotate {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    height: 50vw;
    overflow: hidden;
}

    .triangle_leftrotate::before {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 50%;
        left: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/triangle_leftrotate.svg);
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateX(-100%) rotate(-90deg);
        transition: transform 0.4s ease 0.5s;
    }
/* ※スマホサイズだと上の段で左上から中央への三角にする */
@media screen and (min-width:768px) {
    /* PC */
    .triangle_leftrotate_in::before {
        transform: translateX(0) rotate(0deg);
    }
}

@media screen and (max-width:767px) {
    /* スマホ */
    .triangle_leftrotate_in::before {
        transform: translateY(0%) translateX(0%) rotate(0deg) scale(1, -1);
    }
}

/* 右から中央へ回ってくる三角 */
.triangle_rightrotate {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    height: 50vw;
    overflow: hidden;
}

    .triangle_rightrotate::after {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 50%;
        right: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/triangle_right01.svg);
        background-position: right bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateX(100%) rotate(90deg);
        transition: transform 0.4s ease 0.5s;
    }

.triangle_rightrotate_in::after {
    transform: translateX(0) rotate(0deg) !important;
}

@media screen and (min-width:768px) {
    /* PC */
    .triangle_rightrotate {
    }
}

@media screen and (max-width:767px) {
    /* スマホ */
    .triangle_rightrotate {
    }
}

/* 左半分で下から上に伸びる四角 */
.l_square_upper {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    /*height: 50vw;*/
    overflow: hidden;
}

    .l_square_upper::before {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 50%;
        left: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/l_square.png);
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateY(100%);
        transition: transform 0.4s ease-out 0.3s;
    }

.l_square_upper_in::before {
    transform: translateY(0) !important;
}


/* 左半分で上から下に伸びる四角 */
.l_square_down {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    /*height: 50vw;*/
    overflow: hidden;
}

    .l_square_down::before {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 50%;
        left: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/l_square.png);
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateY(-100%);
        transition: transform 0.4s ease-out 0.3s;
    }

.l_square_down_in::before {
    transform: translateY(0) !important;
}


/* 右半分で下から上に伸びる四角 */
.r_square_upper {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    /*height: 50vw;*/
    overflow: hidden;
}

    .r_square_upper::after {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 50%;
        right: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/r_square.png);
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateY(100%);
        transition: transform 0.4s ease-out 0.3s;
    }

.r_square_upper_in::after {
    transform: translateY(0) !important;
}


/* 右半分で上から下に伸びる四角 */
.r_square_down {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    /*height: 50vw;*/
    overflow: hidden;
}

    .r_square_down::after {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 50%;
        right: 0;
        z-index: -1;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../images/visual_effects/r_square.png);
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateY(-100%);
        transition: transform 0.4s ease-out 0.3s;
    }

.r_square_down_in::after {
    transform: translateY(0) !important;
}


/* 背景画像が下から上にスライド */
.bg_upper {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
}

    .bg_upper::before {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        left: 0;
        z-index: 0;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        /*background-image: url(../images/bgimg.png); ※別途定義 */
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateY(100%);
        transition: transform 1.5s ease-out 0.1s;
    }

.bg_upper_in::before {
    transform: translateY(0) !important;
}

/* 背景画像が上から下にスライド */
.bg_down {
    box-sizing: inherit;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
}

    .bg_down::after {
        box-sizing: inherit;
        display: block;
        position: absolute;
        top: 0px;
        width: 100%;
        left: 0;
        z-index: 0;
        content: "";
        height: 100%;
        background-repeat: no-repeat;
        /*background-image: url(../images/bgimg.png); ※別途定義 */
        background-position: left bottom;
        background-size: 100% 100%;
        opacity: .9;
        transform: translateY(-100%);
        transition: transform 1.5s ease-out 0.1s;
    }

.bg_down_in::after {
    transform: translateY(0) !important;
}


/*==================================================
シャッ
===================================*/

/*背景色が伸びて出現 共通*/
.bgextend {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden; /*　はみ出た色要素を隠す　*/
    opacity: 0;
}

@keyframes bgextendAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*中の要素*/
.bgappear {
    animation-name: bgextendAnimeSecond;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes bgextendAnimeSecond {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*--------- 左から背景色が出てくるアニメ --------*/
.bgLRextend::before {
    animation-name: bgLRextendAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #125EC7;
    ; /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}