@charset "utf-8";

/* top.css
-------------------------------------- */

.topcontent{
    background-color: #37A8E1;
    overflow: hidden;
    width: 100%;
}
.top_back{
    background-image:url("../../img/top/top_back2.png") ;
    background-position: 50% 18%;
    /* padding-top: 120rem; */
}
.topview{
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#top{
    display: none;
}
.topcontent_ex .topview{
    overflow: hidden;
}

.topcontent_ex{
    overflow: hidden;
    width: 100%;
    display: none;
}

.topcontent_ex.act .topview{
    display: inherit;
}
.topcontent .top_back.backs_ex{
    background-color: #f00;
    background-image:url("../../img/top/top_exb.jpg");
    background-position: 50% 9rem;
    background-size: 115%;
}

.noact{
    display: none !important;
}
.act{
    display: inherit !important;
}
.noact_ex{
    display: inherit !important;
    display: none !important;
    /* animation-name: act_fide;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 1;
    display: inherit; */
}
.act_ex{
    display: inherit !important;
    /* animation-name: act_fideex;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: none; */
}
.backs{
    padding-top: 0;
}
.noact_p{
    display: none !important;
}
.act_p{
    display: inherit !important;
    opacity: 1 !important;
}

@keyframes act_fide {
	0%{
        opacity: 1;
        display: inherit;
    }

	100% {
        opacity: 0;
        display: none;
    }

}

@keyframes act_fideex {
	0%{
        opacity: 0;
        display: none;
    }

	100% {
        opacity: 1;
        display: inherit;
    }

}

@media all and (min-width: 800px) {
    .act{
        display: flex !important;
    }
    .topcontent_ex.act .topview{
        display: flex;
    }
    .topcontent .top_back.backs_ex{
        background-color: #f00;
        background-image:url("../../img/top/top_exb.jpg");
        background-position: 50% 9rem;
        background-size: 120%;
    }
}
.topview h2{
    max-width: 70%;
    margin: 0 auto;
    animation-name: top1;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    filter: drop-shadow(0 0 1rem #fff);
    padding: 1.5rem 0;
}
.topview h1{
    max-width: 80%;
    margin: -2rem auto 87vw;
    animation-name: top1;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
.topview_cara>img{
    position: absolute;
    top: 98%;
    left: 50%;
    width: 70%;
    transform: translateY(0%) translateX(-50%);
    animation-name: top4;
    animation-duration: 3.5s;
    animation-iteration-count: 1;
}
.topview div#data2{
    position: absolute;
    width: 128%;
    top: 176%;
    left: 42%;
    transform: translateY(-50%) translateX(-50%);
    animation-name: top3;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
}


.topcontent_ex .top_backtxt{
    position: absolute;
    top: 18%;
    right: 9%;
    width: 203%;
    transform: translateY(-50%) translateX(50%);
    will-change: animation;
    opacity: 0;
}
.topcontent_ex.act_ex .top_backtxt{
    animation: topback_ex 1.5s forwards;
    animation-delay: 3s;
}
@keyframes topback_ex {
	0%{
        opacity: 0;
        width: 0%;
    }
	5%{
        opacity: 1;
        width: 0%;
    }
	85%{
        width: 303%;
    }
	100% {
        opacity: 203%;
    }
}
.topcontent_ex.act_ex .top_backtxt img{
    animation: topback_ex_img 12s normal infinite;
    animation-delay: 4.5s;
    padding-left: 0;
}
@keyframes topback_ex_img {
	0%{
        transform: scale(1, 1);
        padding-left: 0;
    }
	50%{
        transform: scale(1.2, 1.2);
        padding-left: 5rem;
    }
	100% {
        transform: scale(1, 1);
        padding-left: 0;
    }
}




.topcontent_ex .topview div#data3{
    position: absolute;
    width: 160%;
    top: 58%;
    left: 56%;
    transform: translateY(-50%) translateX(-50%);
    will-change: animation;
    opacity: 0;
}
.topcontent_ex.act_ex .topview div#data3{
    animation: top1ex 15s forwards;
    animation-delay: 1.5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform,animation,position;
}
@keyframes top1ex {
	0%{
        opacity: 0;
        width: 0;
    }
	3%{
        opacity: 0;
       width: 0;
    }
	18%{
        opacity: 1;
        width: 200%;
    }
	23% {
        opacity: 1;
        width: 150%;
    }
	/* 50% {
        opacity: 1;
        width: 159%;
    }
	75% {
        opacity: 1;
        width: 168%;
    } */
	100% {
        opacity: 1;
        width: 175%;
    }
}
.topcontent_ex.act_ex .topview div#data3 img{
    animation: top1eximg 4.5s normal infinite;
    animation-delay: 6.5s;
}
@keyframes top1eximg {
	0%{
        transform: scale(1, 1);
        padding-top: 0rem;
    }
	1%{
        transform: scale(1, 1);
    }
	2%{
        transform: scale(1.02, 1.02);
    }
	3% {
        transform: scale(1, 1);
    }
	/* 5%{
        transform: scale(1, 1);
    }
	5.5%{
        transform: scale(1.02, 1.02);
    }
	6% {
        transform: scale(1, 1);
    } */
}


.topcontent_ex .top_fire1{
    position: absolute;
    top: 20rem;
    right: 61%;
    width: 132%;
    transform: translateY(0%) translateX(50%);
    will-change: animation;
    opacity: 0;
}
.topcontent_ex.act_ex .top_fire1{
    animation: topf_ex 1.5s forwards;
    animation-delay: 2.5s;
}
@keyframes topf_ex {
	0%{
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
.topcontent_ex.act_ex .top_fire1 img{
    animation: topf_ex_img 14s normal infinite;
    animation-delay: 4s;
}
@keyframes topf_ex_img {
	0%{
        transform: scale(1, 1);
        opacity: 1;
    }
	20%{
        opacity: 0.7;
    }
	35%{
        transform: scale(1, 0.9);
        opacity: 1;
    }
	50%{
        transform: scale(1, 1);
        opacity: 0.7;
    }
	58%{
        opacity: 1;
    }
	85%{
        transform: scale(1, 0.9);
        opacity: 0.7;
    }
	100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.topcontent_ex .top_fire2{
    position: absolute;
    bottom: 0;
    right: 58%;
    width: 145%;
    transform: translateY(0%) translateX(50%);
    will-change: animation;
    opacity: 0;
}
.topcontent_ex.act_ex .top_fire2{
    animation: topf_ex 1.5s forwards;
    animation-delay: 1.8s;
}
@keyframes topf_ex {
	0%{
        opacity: 0;
        bottom: -10rem;
    }
	100% {
        opacity: 1;
        bottom: 0rem;
    }
}
.topcontent_ex.act_ex .top_fire2 img{
    animation: topf_ex_img 6s normal infinite;
    animation-delay: 1s;
}
@keyframes topf_ex_img {
	0%{
        transform: scale(1, 1);
        opacity: 1;
    }
	20%{
        opacity: 0.7;
    }
	35%{
        transform: scale(1, 0.9);
        opacity: 1;
    }
	50%{
        transform: scale(1, 1);
        opacity: 0.7;
    }
	58%{
        opacity: 1;
    }
	85%{
        transform: scale(1, 0.9);
        opacity: 0.7;
    }
	100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}


.topcontent_ex .topview h3{
    max-width: 96%;
    margin: 0 auto;
    padding: 105vw 0 3rem;
    opacity: 0.99;
    will-change: animation;
    opacity: 0;
}
.topcontent_ex.act_ex .topview h3{
    animation: topttlex 10s forwards;
    animation-delay: 1.5s;
}
/* .topcontent_ex.act_ex .topview h3 img{
    animation: topttlex_img 3.5s normal infinite;
    animation-delay: 4s;
} */
@keyframes topttlex {
	0%{
        opacity: 0;
        transform: scale(0, 0);
    }
	29%{
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
	33% {
        opacity: 1;
        transform: scale(0.8, 0.8);
    }
	100% {
        opacity: 1;
        transform: scale(0.95, 0.95);
    }
}
@keyframes topttlex_img {
	0%{
        transform: scale(1, 1);
    }
	98%{
        transform: scale(1, 1);
    }
	99%{
        opacity: 1;
        transform: scale(1.02, 1.02);
    }
	100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}


@keyframes aura {
	0%{
        filter: drop-shadow(0 -4mm 4mm #f00);
    }
	20%{
        filter: drop-shadow(0 -8mm 4mm rgb(255, 238, 0));
    }
	40% {
        filter: drop-shadow(0 -4mm 4mm rgb(13, 255, 0));
    }
	60% {
        filter: drop-shadow(0 -8mm 4mm rgb(0, 229, 255));
    }
	80% {
        filter: drop-shadow(0 -4mm 4mm rgb(43, 0, 255));
    }
	95% {
        filter: drop-shadow(0 -8mm 4mm rgb(255, 0, 234));
    }
	100% {
        filter: drop-shadow(0 -4mm 4mm #f00);
    }
}

.topview_ttl_black{
    background-color: #fff;
    padding-top: 2rem;
}
.topview_ttl_black h2{
    max-width: 65%;
    margin: 0 auto;
    animation-name: top1;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    padding: 0.5rem 0 0.5rem;
}

@media all and (min-width: 600px) {
    .topcontent{
        background-size: 200%;
    }
    .top_back{
        background-size: 150%;
    }
    .topview h2{
        max-width: 50%;
        margin: 0 auto;
    }
    .topview h1{
        max-width: 60%;
        margin: -2rem auto 70vw;
    }

    .topview div#data2{
        position: absolute;
        /* width: 10%; */
        top: 208%;
        left: 43%;
        animation-name: top3tab;
        animation-duration: 2.5s;
        animation-iteration-count: 1;
    }


    .topview_ttl_black h2{
        max-width: 45%;
    }
    .topcontent_ex .topview h3{
        max-width: 96%;
        margin: 0 auto;
        padding: 74vw 0 3rem;
        /* animation-name: top1;
        animation-duration: 2s;
        animation-iteration-count: 1; */
        opacity: 0;
    }
    .topcontent_ex .topview div#data3{
        position: absolute;
        width: 130%;
        top: 52%;
        left: 56%;
        transform: translateY(-50%) translateX(-50%);
        will-change: animation;
        opacity: 0;
    }
    .topcontent_ex.act_ex .topview div#data3{
        animation: top1ex_tab 15s forwards;
        animation-delay: 1.5s;
    }
    @keyframes top1ex_tab {
        0%{
            opacity: 0;
            width: 0;
        }
        3%{
            opacity: 0;
        width: 0;
        }
        18%{
            opacity: 1;
            width: 160%;
        }
        23% {
            opacity: 1;
            width: 115%;
        }
        100% {
            opacity: 1;
            width: 130%;
        }
    }

    .topcontent_ex .top_backtxt{
        position: absolute;
        top: 19%;
        right: 21%;
        width: 176%;
        transform: translateY(-50%) translateX(50%);
        will-change: animation;
        opacity: 0;
    }
    .topcontent_ex.act_ex .top_backtxt{
        animation: topback_ex 1.5s forwards;
        animation-delay: 3s;
    }
    @keyframes topback_ex {
        0%{
            opacity: 0;
            width: 0%;
        }
        5%{
            opacity: 1;
            width: 0%;
        }
        85%{
            width: 303%;
        }
        100% {
            opacity: 1;
            width: 176%;
        }
    }
    .topcontent_ex .top_fire1{
        right: 55%;
        width: 115%;
    }
}
@media all and (min-width: 800px) {
    .topcontent{
        background-size: 130%;
    }
    /* .topcontent .top_back.backs_ex{
        padding-top: 60rem;
    } */
    .top_back{
        background-size: 120%;
        background-position: 20% -8rem;
        padding-bottom: 12rem;
    }
    .top_back.backs_ex{
        padding-bottom: 0rem;
    }

    .topview{
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 150rem;
    }
    .topview_ttl{
        width: 40%;
        margin-left: 4%;
        z-index: 20;
        padding-bottom: 50rem;
    }
    .topview.act_ex .topview_ttl{
        width: 40%;
        margin-left: 4%;
        z-index: 20;
        padding-bottom: 0;
    }
    .topview_cara{
        width: 70%;
        margin-left: -20%;
        z-index: 10;
    }
    .topview h2{
        max-width: 90%;
        margin: 0 auto;
    }
    .topview h1{
        max-width: 100%;
        margin: 2rem auto 14rem;
    }
    .topview div#data2 {
        width: 80%;
        top: 5%;
        left: 26%;
        animation-name: top5;
        animation-duration: 2.5s;
        animation-iteration-count: 1;
        transform: translateY(0%) translateX(0%);
    }
    .topview_cara>img{
        position: absolute;
        top: 1%;
        left: 70%;
        width: 40%;
        animation-name: top6;
        animation-duration: 3s;
    }
    .topcontent .top_back.backs_ex{
        background-image:url("../../img/top/top_exbpc.jpg");
        background-position: 50% 0;
        background-size: 100%;
    }
    .topcontent_ex{
        overflow: hidden;
        width: 100%;
        display: none;
    }
    .topcontent_ex .topview{
        max-width: inherit;
        flex-direction: row-reverse;
    }
    .topcontent_ex .topview h2{
        width: 35%;
    }
    .topcontent_ex .topview_ttl_black{
        padding-top: 1rem;
    }
    .topcontent_ex .topview_ttl_black h2{
        max-width: 32rem;
    }
    .topcontent_ex .topview h3{
        max-width: 96%;
        margin: 0 auto;
        padding: 18vw 0 0;
        opacity: 0;
    }
    .topcontent_ex .topview_ttl {
        width: 55%;
        padding-bottom: 0rem;
    }
    .topcontent_ex .topview div#data3 {
        width: 75%;
        top: 0;
        left: initial;
        right:26%;
        transform: translateY(0%) translateX(50%);
        will-change: animation;
        opacity: 0;
    }
    .topcontent_ex.act_ex .topview div#data3{
        animation: top1ex_pc 15s forwards;
        animation-delay: 1.5s;
    }

    @keyframes top1ex_pc {
        0%{
            opacity: 0;
            width: 0;
        }
        3%{
            opacity: 0;
        width: 0;
        }
        18%{
            opacity: 1;
            width: 100%;
        }
        23% {
            opacity: 1;
            width: 72%;
        }
        100% {
            opacity: 1;
            width: 80%;
        }
    }
    .topcontent_ex .top_fire1{
        right: 40%;
        width: 84%;
        top: 10rem;
    }
    .topcontent_ex.act_ex .top_fire2{
        animation: topf_ex 1.5s forwards;
        animation-delay: 1.8s;
    }
    @keyframes topf_ex {
        0%{
            opacity: 0;
            bottom: -60rem;
        }
        100% {
            opacity: 1;
            bottom: -28rem;
        }
    }
    .topcontent_ex .top_backtxt{
        position: absolute;
        top: 33%;
        right: 49%;
        width: 106%;
    }
    .topcontent_ex.act_ex .top_backtxt{
        animation: topback_ex_pc 1.5s forwards;
        animation-delay: 3s;
    }
    @keyframes topback_ex_pc {
        0%{
            opacity: 0;
            width: 0%;
        }
        5%{
            opacity: 1;
            width: 0%;
        }
        85%{
            width: 203%;
        }
        100% {
            opacity: 1;
            width: 106%;
        }
    }
}
@media all and (min-width: 1300px) {
    /* .topcontent_ex .topview_ttl{
        padding-bottom: 40rem;
    } */
}
@media all and (min-width: 1500px) {
    .top_back{
        background-size: 201rem;
        background-position: 30% -13rem;
        padding-bottom: 12rem;
    }
    .topview{
        width: 100%;
    }
    .topview_ttl{
        width: 45%;
        margin-left: 0%;
        z-index: 20;
        padding-bottom: 50rem;
    }
    .topview div#data2 {
        width: 83%;
        left: 29%;
    }
    .topview_cara img{
        left: 74%;
    }
    .topcontent_ex .topview_ttl {
        margin-left: 5%;
    }

}
@keyframes top1 {
	0%{
        transform: translateY(0);
        opacity: 0;
    }
	30% {
        transform: translateY(20px);
        opacity: 0;
    }
	60% {
        transform: translateY(-20px);
        opacity: 1;
    }
	90% {
        transform: translateY(0);
    }

}
@keyframes top2 {
	0%{
        transform: translateY(0);
        opacity: 0;
    }
	30% {
        transform: translateY(0);
        opacity: 0;
    }
	50% {
        transform: translateY(20px);
        opacity: 0;
    }
	70% {
        transform: translateY(-20px);
        opacity: 1;
    }
	90% {
        transform: translateY(0);
    }

}
@keyframes top3 {
	0%{
        top: 200%;
        opacity: 0;
    }
	35% {
        top: 400%;
        opacity: 0;
    }
	40% {
        top: 400%;
        opacity: 1;
    }
	100% {
        top: 176%;
        opacity: 1;
    }

}
@keyframes top3ex {
	0%{
        top: 180vw;
        opacity: 0;
    }
	35% {
        top: 180vw;
        opacity: 0;
    }
	40% {
        top: 180vw;
        opacity: 1;
    }
	95% {
        top: 86vw;
        opacity: 1;
    }
	100% {
        top: 88vw;
        opacity: 1;
    }

}
@keyframes top3tab {
	0%{
        top: 400%;
        opacity: 0;
    }
	35% {
        top: 400%;
        opacity: 0;
    }
	40% {
        top: 400%;
        opacity: 1;
    }
	100% {
        top: 208%;
        opacity: 1;
    }
}
@keyframes top3tabex {
	0%{
        top: 120vw;
        opacity: 0;
    }
	35% {
        top: 120vw;
        opacity: 0;
    }
	40% {
        top: 120vw;
        opacity: 1;
    }
	95% {
        top: 53vw;
        opacity: 1;
    }
	100% {
        top: 55vw;
        opacity: 1;
    }

}
@keyframes top4 {
	0%{
        top: 200%;
        opacity: 0;
    }
	35% {
        top: 300%;
        opacity: 0;
    }
	40% {
        top: 300%;
        opacity: 0;
        width: 1%;
    }
	80% {
        top: 98%;
        opacity: 1;
        width: 70%;
    }

}
@keyframes top5 {
	0%{
        top: 200%;
        opacity: 0;
    }
	35% {
        top: 300%;
        opacity: 0;
    }
	40% {
        top: 200%;
        opacity: 1;
    }
	80% {
        top: 0%;
        opacity: 1;
    }
	100% {
        top: 5%;
        opacity: 1;
    }
}
@keyframes top6 {
	0%{
        top: 200%;
        opacity: 0;
    }
	35% {
        top: 300%;
        opacity: 0;
    }
	70% {
        top: 50%;
        opacity: 0;
    }
	90% {
        top: 1%;
        opacity: 1;
    }

}

/* ttl */

.ttl{
    background: #FFFFA2;
    width: 92%;
    height: auto;
    position: relative;
    border-right: solid 2px #333333;

}
.ttl:after{
    width: 100%;
    height: 0;
    display: block;
    position: absolute;
    left: 0;
    content: "";
}
.ttl:after{
    border-top: solid 30px transparent;
    border-right: solid 30px #333333;
    top: calc(100% - 30px);
}
.ttl h2{
    font-family: 'Baloo Paaji 2', cursive;
    font-weight: 700;
    font-size: 5.7rem;
    margin-left: 9%;
    letter-spacing: 0;
    color: #37A8E1;
}
.ttl p{
    position: absolute;
    top: 100%;
    left: 10%;
    transform: translateY(-50%);
	color: #333333;
	font-size: 1.4rem;
    font-weight: 700;
    width: 90%;
	display: flex;
}
.ttl p:after {
	content: "";
	flex-grow: 1;
	height: 2px;
	background: #444;
	display: block;
	margin-left: 1.2em;
    margin-top: 0.9rem;
}

/* ex */
.ttl.ttlex{
    background: none;
    border-right: none;
    padding-top: 8rem;
}
.ttl.ttlex:after{
	display: none;
}
.ttl.ttlex:after{
	display: none;
}
.ttl.ttlex h2{
    font-family: 'DINBEK-Bold';
    font-weight: 700;
    font-size: 4.6rem;
    margin-left: 9%;
    letter-spacing: 2px;
    color: #ffffff;
}
.ttl.ttlex p{
    position: absolute;
    top: 100%;
    left: 10%;
    transform: translateY(-50%);
	color: #ffffff;
	font-size: 1.6rem;
    font-weight: 700;
    width: 90%;
	display: flex;
    letter-spacing: 0.1em;
}
.ttl.ttlex p:after {
	display: none;
}

@media all and (min-width: 800px) {
    .ttl{
        margin: 0 auto;
        width: 100%;
        border-left: solid 2px #333333;
        max-width: 150rem;
    }
    .ttl::before{
        width: 100%;
        height: 0;
        display: block;
        position: absolute;
        left: 0;
        content: "";
        border-top: solid 30px transparent;
        border-left: solid 30px #333333;
        top: calc(100% - 30px);
    }
    .ttl h2{
        font-family: 'Baloo Paaji 2', cursive;
        font-weight: 700;
        font-size: 7rem;
        margin-left: 0%;
        text-align: center;
    }
    .ttl p{
        position: absolute;
        top: 100%;
        left: 0;
        color: #333333;
        font-size: 1.8rem;
        font-weight: 700;
        width: 100%;
        display: flex;
    }
    .ttl p::before{
        content: "";
        flex-grow: 1;
        height: 2px;
        background: #444;
        display: block;
        margin-right: 1.2em;
        margin-top: 1.25rem;
    }
    .ttl p:after {
        margin-top: 1.25rem;
    }
    .ttl.ttlex{
        border-left: none;
    }
    .ttl.ttlex::before{
        border-top: solid 30px transparent;
        border-left: none;
    }
    .ttl.ttlex h2{
        margin-left: 0%;
        font-size: 6rem;
    }
    .ttl.ttlex p{
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        justify-content: center;
        font-size: 1.8rem;
    }
    .ttl.ttlex p::before{
        display: none;
    }
    .ttl.ttlex{
        background: none;
        border-right: none;
        padding-top: 0rem;
    }
}
@media all and (min-width: 1200px) {
    .ttl{
        width: 100%;

    }
}
/* profile Preface----------------------------------------------------------------------------------------------*/
.profile.act_p{
    opacity: 0.99 !important;
}
.profile_in{
    width: 85%;
    margin: 4rem auto 0;
}
.profile_in_img{
    width: 90%;
    margin: 0 auto 4rem;
}
.profile_in_text p{
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4rem;
    line-height: 2.2;
}
.profile_in_text {
    border-bottom:1px solid #CBCBCB;
}
#pro_ex.profile .profile_in_text {
    border-bottom:1px solid #fff;
}
#pro_ex.profile .profile_in_text p,#pro_ex.profile .profile_in_text th,#pro_ex.profile .profile_in_text td{
    color: #fff;
}
.profile_in_text table{
    border-collapse:collapse;
    width: 100%;

}
.profile_in_text table tr{
    border-top:1px solid #CBCBCB;
}
#pro_ex.profile .profile_in_text table tr{
    border-top:1px solid #fff;
}
.profile_in_text table th{
    font-size: 1.5rem;
    color: #37A8E1;
    width: 20%;
    padding: 1.5rem 0;
    letter-spacing: 0.1em;
}
.profile.act_p .profile_in_text table th{
    padding: 2rem 0;
}
.profile_in_text table td{
    font-size: 1.4rem;
    width: 80%;
    padding: 1.5rem 0;
    letter-spacing: 0.1em;
}
.profile.act_p .profile_in_text table td{
    padding: 2rem 0;
}
.profile .ttl {
    border-top: solid 2px #333333;
    z-index: -1;
}
#pro_ex{
    background-image: url("../../img/top/pro_exb.jpg");
    background-size: 350%;
    background-position: 50% 0;
    padding-bottom: 8rem;
}
#pre_ex{
    background-color:rgb(211, 0, 0);
    background-image: url("../../img/top/pre_exb.jpg");
    background-size: 260%;
    background-position: 50% 0;
    margin-top:-3rem;
}

.Preface.act_p{
    padding: 8rem 0;
    opacity: 0.99 !important;
}

.Preface p{
    font-size: 2rem;
    text-align: center;
    color: #fff;
    margin-bottom: 6rem;
}
.Preface p:last-child{
    margin-bottom: 0rem;
}
.profile.act_p .profile_in_img{
    width: 100%;
}
.profile.act_p .profile_in{
    width: 100%;
}
.profile.act_p .profile_in_text{
    width: 90%;
    margin: 0 auto;
}
@media all and (min-width: 600px) {
    /* .profile{
        background-size: 70%;
        background-position: 70% 0;
    } */

    .profile_in{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 7rem auto 0;
    }
    .profile_in li{
        width: 49%;
    }
    .profile_in li img{
        width: 80%;
    }

    #pro_ex{
        background-image: url("../../img/top/pro_exb.jpg");
        background-size: 180%;
        background-position: 50% 67%;
        padding-bottom: 8rem;
    }
    .profile.act_p .profile_in{
        width: 80%;
    }
    .profile.act_p .profile_in li img{
        width: 95%;
    }
}
@media all and (min-width: 800px) {  
    .profile.mt{
        /* background-size: 60rem; */
        padding-top: 12rem;
        /* background-position: 70% -6rem; */
    }
    .profile .ttl{
        border-top: solid 2px #333333;
    }
    .profile_in{
        width: 90%;
        max-width: 120rem;
    }
    .profile_in_text p{
        font-size: 2rem;
    }
    .profile_in_text table th{
        font-size: 1.8rem;
    }
    .profile_in_text table td{
        font-size: 1.6rem;
    }
    #pro_ex.profile .ttl{
        border-top: none;
    }
    #pro_ex{
        padding-bottom: 12rem;
    }
    .profile.act_p{
        position: relative;
        z-index: 10;
    }
    .Preface{
        padding: 15rem 0;
    }
    .Preface p{
        font-size: 3rem;
    }
    .Preface.act_p{
        position: relative;
        z-index: 10;
    }
    #pre_ex{
        background-position: 60% 0;
    }
}
@media all and (min-width: 1200px) {  
    .profile_in{
        width: 100%;
    }
}
/* movie -------------------------------------------------------------------------------------------------------*/
.movie{
    padding: 9rem 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    /* background-image: url("../../img/top/movie_back.png");
    background-repeat: repeat;
    background-size: 110%;
    background-position: 71% -1rem; */
    z-index: 1;
}
.movie .ttl{
    border-top: solid 2px #333333;
    z-index: -1;
}
.movie .ttl img{
    position: absolute;
    top:0px;
    right: -7%;
    transform: rotate(355deg);
    width: 48%;
    z-index: 1;
}
.movie_in{
    width: 85%;
    margin: 4rem auto 0;
    z-index: 100;
}
.movie_in video{
    width: 100%;
    z-index: 1;
    box-shadow: 0px 3px 10px 10px rgb(100, 100, 100,0.3);
}
.movie.mov_ex{
    background-color: #fff;
    background-image: url("../../img/top/move_exb.png");
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: 56% -6rem;
    padding: 8rem 0 6rem;
}
.movie.mov_ex .ttl{
    border-top: none;
    z-index: -1;
    padding-top: 0%;
}
.movie .ttl img.movec,.movie video.movec{
    display: inherit;
}
.movie .ttl img.moveex,.movie video.moveex{
    display: none;
}
.movie.mov_ex .ttl img.movec,.movie.mov_ex video.movec{
    display: none;
}
.movie.mov_ex .ttl img.moveex{
    display: inherit;
    top:-7rem;
    right: -33%;
    transform: rotate(335deg);
    width: 93%;
    /* transform: translateY(-50%) translateX(-50%); */
    animation: top3ex 3s 1,aura 6s normal infinite;
}
.movie.mov_ex video.moveex{
    display: inherit;
}
.movie.mov_ex .movie_in{
    margin: 6rem auto 0;
}
@media all and (min-width: 400px) {
.movie.mov_ex .ttl img.moveex{
    width: 80%;
}
}
@media all and (min-width: 600px) {
    /* .movie{
        background-size: 70%;
    } */
    .movie .ttl img{
        right: -7%;
        width: 24%;
    }

    .movie.mov_ex{
        background-image: url("../../img/top/move_exb.png");
        background-repeat: no-repeat,repeat;
        background-size: 130%;
        background-position: 56% -6rem;
        padding: 6rem 0;
    }

    .movie.mov_ex .ttl img.moveex{
        top:-14rem;
        right: -70%;
        transform: rotate(325deg);
        width: 105%;
    }

}
@media all and (min-width: 800px) {
    .movie{
        background-size: 50rem;
    }
    .movie_in{
        max-width: 110rem;
        margin: 0 auto 0;
        width: 90%;
    }
    .movie_in video{
        width: 100%;
        margin: 10rem auto 0;
        z-index: 1;
        height: auto;
    }
    .movie .ttl img{
        right: -2%;
        width: 24%;
        top: -34px;
    }
    .movie.mov_ex{
        background-size: 130%;
        background-position: 14% 35%;
        padding: 6rem 0;
        position: relative;
        z-index: 10;
    }
    .movie.mov_ex .ttl img.moveex{
        display: inherit;
        top:-17rem;
        right: -62%;
        transform: rotate(334deg);
        width: 100%;
    }
}

@media all and (min-width: 1200px) {
    .movie_in{
        width: 100%;
    }
    .movie.mov_ex{
        background-size: 167rem;
        background-position: center -28rem;
    }
}
@media all and (min-width: 1500px) {
    .movie.mov_ex .ttl img.moveex{
        display: inherit;
        top:-13rem;
        right: -70%;
        transform: rotate(335deg);
        width: 110%;
    }
}

/* SONG  ---------------------------------------------------------------------------------------------------*/
.song .modaal-btn{
    max-width: 960px;
    margin: 6rem auto 0;
    width: 85%;
    display: block;
}
.song .modaal-btn img{
    width: 100%;
    height: auto;
    filter: drop-shadow(5px 10px 10px rgba(0,0,0,0.3));
}
.remodal.song_in {
    width: 100%;
    margin: 0 auto;
    max-width: 1100px;
    background-color: #37a8e1;
    border-radius: 3rem;
    padding: 6rem;
    position: relative;
}
.remodal.song_in .remodal-close{
    top: 30px;
    left: auto;
    right: 30px;
    width: 50px;
    height: 50px;
}
.remodal.song_in .remodal-close:before{
    background-color: #fff;
    border-radius: 50%;
    line-height: 50px;
    width: 50px;
    font-size: 40px;
}
.song_in h3{
    color: #fff;
    font-family: "mamelon";
    font-weight: 700;
    font-size: 4rem;
    text-align: center;
    margin-bottom: 4rem;

}
.song_in .song_in_txt{
    max-width: 75rem;
    margin: 0 auto;
    background-color: #fff;
    margin-bottom: 4rem;
    position: relative;
    padding: 0 2px 0 5%;
}
.song_in .song_in_txt::after{
    content: "";
    position: absolute;
    width: calc(100% - 30px);
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, #FFF 80%);
    height: 8rem;
    z-index: 1;
}
.song_in .song_in_txt p{
    font-size: 2rem;
    font-weight: 400;
    line-height: 2;
    height: 47rem;
    overflow-y: scroll;
    padding: 4rem 0 8rem;
}
.song_in .song_in_txt p span {
    color: #E00909;
}
.song_in .song_in_txt p::-webkit-scrollbar {
    z-index: 100;
}

.song_in .song_in_txt p::-webkit-scrollbar-track {
    background: #CBCBCB;
    border-radius: 30px;
}

.song_in .song_in_txt p::-webkit-scrollbar-thumb {
    background: #37a8e1;
    border-radius: 30px;
}
.song_in .song_in_btn{
    margin: 0 auto;
    text-align: center;
    width: 100%;

}

.song_in ::-webkit-scrollbar {
    width: 16px;
    z-index: 10;
}

.song_in ::-webkit-scrollbar-track {
    background: #CBCBCB;
    border-radius: 5px;
}

.song_in ::-webkit-scrollbar-thumb {
    background: #37a8e1;
    border-radius: 5px;
    border: solid 1px #CBCBCB;
}

@media all and (max-width: 800px) {
    .song_in .song_in_txt p {
        font-size: 14px;
    }
    .remodal.song_in .remodal-close {
        top: 20px;
        left: auto;
        right: 20px;
        width: 35px;
        height: 35px;
    }
    .remodal.song_in .remodal-close:before {
        line-height: 35px;
        width: 35px;
        font-size: 25px;
    }
}
@media all and (max-width: 600px) {
    .song .modaal-btn{
        margin: 4rem auto 0;
    }
    .remodal.song_in {
        margin: 0 auto;
        border-radius: 1.5rem;
        padding: 4rem 5%;
    }
    .song_in h3 {
        font-size: 2.2rem;
        margin-bottom: 2rem;

    }
    .song_in .song_in_txt {
        margin-bottom: 3rem;
        padding: 0 0 0 5%;
    }

    .song_in .song_in_txt p{
        font-size: 12px;
        height: 40rem;
        padding: 2rem 0 6rem;
    }
    .song_in .song_in_txt::after {
        height: 4rem;
    }
    .song_in .song_in_btn audio{
        width: 100%;

    }
}
.song_in ::-webkit-scrollbar {
    width: 18px;
    z-index: 10;
}

.song_in ::-webkit-scrollbar-track {
    background: #CBCBCB;
    border-radius: 5px;
}

.song_in ::-webkit-scrollbar-thumb {
    background: #37a8e1;
    border-radius: 5px;
}


/* store ---------------------------------------------------------------------------------------------------*/
.store{
    width: 100%;
    background-image:url("../../img/top/s_back.png") ;
    background-repeat: repeat;
    background-size: 44rem;
    border-top: solid 2rem #FFFF00;
    border-bottom: solid 2rem #FFFF00;
    background-position: 0 0;
    /* -webkit-animation: bgroop 25s linear infinite;
    animation: bgroop 25s linear infinite; */
}
.store_back{
    padding: 0 0 8rem;
}
.store_nira{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
}

.store_nira li{
    width: 100%;
    background-color: #015ea0;
    padding: 3rem 0;
}

.store_nira li p{
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
}


.store_link{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 85%;
    margin: 6rem auto 0;
}

.store_link li{
    width: 46%;
    margin-bottom: 3rem;
    margin-right: 8%;
}
.store_link li:nth-child(2n){
    margin-right: 0%;
}

.store_link a{
    font-family: "mamelon";
    font-size: 2.2rem;
    padding: 1.2rem 0;
    font-weight: 500;
    color: #fff;
    background-color: #1370e3;
    background: linear-gradient(120deg, #37A8E1 , 70%, #1370e3);
    border: solid 4px #fff;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.store_link a span{
    font-size: 1.8rem;
}

.store.store_ex{
    background-color: #fff;
    opacity: 0.99;
    border-top: none;
    border-bottom: none;
}
/* .store.store_ex .store_nira li{
    background-color: rgba(255, 255, 255, 0);
    padding: 8rem 0 0;
}
.store.store_ex .store_link{
    margin: 4rem auto 0;

} */
@media all and (min-width: 400px) {
    .store{

    }   
}
@media all and (min-width: 600px) {
    .store_link{
        max-width: 120rem;
    }
    .store_nira{
        justify-content: center;
    }
}
@media all and (min-width: 800px) {
    .store{
        background-size: 50rem;
    }  
    .store_nira li{
    width: 100%;
    background-color: #015ea0;
    padding: 5rem 0;
    }

    .store_link li{
        width: 22%;
        margin-right: 4%;
        margin-bottom: 4rem;
    }
    .store_link li:nth-child(2n){
        margin-right: 4%;
    }
    .store_link li:nth-child(4n){
        margin-right: 0%;
    }
    .store_link a{
        font-size: 3.2rem;
    }

    .store_link a:hover{
        background-color: #FF0000;
        background: linear-gradient(120deg, #fe8686 , 70%, #FF0000);
        opacity: 1;
        color: #fff;
    }
    .store_nira li p{
        font-size: 5rem;
    }
    .store.store_ex{
        position: relative;
        z-index: 10;
    }
}

/* footer ----------------------------------------------------------------------------------------------------------*/
footer{
    padding: 3.5rem 0 5rem;
    background-image:url("../../img/top/f_back.png") ;
    background-position: 20% 7rem;
    position: relative;
}
.footer_in{
    width: 85%;
    margin: 0 auto;
    position: relative;
    /* display: none; */

}
footer p{
    font-size: 1.1rem;
    font-weight: 700;
    width: 85%;
    margin: 0 auto;
}
.footer_in_txt{
    width: 21rem;
}
.footer_in_nira{
    width: 100%;
    margin-bottom: 2.5rem;
}
.footer_in_logo{
    position: absolute;
    width: 12rem;
    top: 78%;
    left: -4%;
}

#footer.footer_exb{
    background-color: #000D58;
    background-image:url("../../img/top/foot_exb.jpg") ;
    background-position: 50% -7rem;
    background-size: 310%;
    opacity: 0.99;

}
#footer.footer_exb .footer_in{
    margin: 0 auto 3rem;
}
#footer.footer_exb .footer_in_nira{
    width: 86%;
    margin-bottom: 2.5rem;
    margin: 0rem auto 2rem;
}
#footer.footer_exb p{
    color: #fff;
    text-align: center;
}
#footer.footer_exb .footer_in_txt{
    width: 100%;
}
#footer.footer_exb .footer_in_txt h2{
    font-size: 5.7rem;
    font-family: 'DINBEK-Bold';
    font-weight: 700;
    color: #fff;
    line-height: 1.1em;
    letter-spacing: 0.1em;
} 
#footer.footer_exb .footer_in_txt h2 span{
    color: #FFFF00;
    line-height: 1.1em;
}
#footer.footer_exb .footer_in_logo{
    position: absolute;
    width: 12rem;
    top: 66%;
    left: 61%;
    filter: drop-shadow(1px 0px 2px #fff);
}
#footer .icon_area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    max-width: 150rem;
    width: 100%;
    height: 100%;
    margin: 0 auto;

}
#footer .icon_area_in{
    position: absolute;
    bottom: 13%;
    left: 14.5rem;
    display: flex;
    align-items: center;
    height: 55px;
}

#footer .icon_area .icon_area_in a{
    display: block;
    background-color: #333333;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    position: relative;
    margin-left: 10px;
}
#footer .icon_area .icon_area_in a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 25px;
    height: auto;
}
#footer .icon_area .icon_area_in a:last-child img {
    width: 29px;
}


@media all and (min-width: 600px) {
    footer {
        background-position: 43% 5rem;
    }
    .footer_in{
        max-width: 120rem;
        width: 85%;
        margin: 0 auto;
        position: relative;
        display: flex;
        justify-content: center;
    }
    #f_item_ex.act{
        display: flex !important;
    }
    .footer_in_nira{
        width: 40%;
        margin-left: 4%;
    }
    .footer_in_logo{
        top: 60%;
        left: 13%;
    }
    footer p{
        text-align: center;
    }
    #footer.footer_exb{
        background-color: #000D58;
        background-position: 50% -3rem;
        background-size: 180%;
    }
    #footer.footer_exb .footer_in{
        align-items: center;
        flex-direction: row-reverse;
    }
    #footer.footer_exb .footer_in_nira{
        width: 60%;
        margin-bottom: 2.5rem;
        margin: 6rem auto 2rem;
    }
    #footer.footer_exb .footer_in_txt{
        width: 48%;
        filter: drop-shadow(2px 4px 4px #000D58);
        margin-right: -8%;
    }
    #footer.footer_exb .footer_in_logo{
        width: 11rem;
        top: 35%;
        left: 27%;
    }
    #footer .icon_area .icon_area_in {
        bottom: 20%;
        left: 34vw;
    }
}

@media all and (min-width: 800px) {
    footer{
        padding: 5rem 0 6rem;
        background-size: 100%;
        background-position: 57% -33rem;
    }
    .footer_in{
        max-width: 150rem;
        width: 92%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .footer_in_nira{
        width: 57%;
        margin-left: -4%;
        margin-bottom: 0;
    }
    .footer_in_txt {
        width: 43%;
        margin-top: 0rem;
    }
    .footer_in_logo{
        width: 13%;
    }
    .footer_in_logo{
        top: 62%;
        left: 0%;
    }
    footer p{
        text-align: left;
        max-width: 150rem;
        margin: -5vw auto 0;
        font-size: 1.6rem;
        width: 92%;
    }
    #footer.footer_exb .footer_in_nira{
        width: 55%;
    }
    #footer.footer_exb{
        background-size: 175%;
        position: relative;
        z-index: 10;
    }
    #footer.footer_exb .footer_in_logo{
        top: 32%;
        left: 30%;
        width: 13vw;
        filter: drop-shadow(2px 4px 6px #fff);
    }
    #footer.footer_exb .footer_in_txt h2{
        font-size: 7.5vw;
    } 
    #footer.footer_exb p{
        margin: 2rem auto 0;
    }
    #footer .icon_area .icon_area_in {
        bottom: 20%;
        left: 19vw;
    }
}
@media all and (min-width: 1000px) {
    #footer .icon_area .icon_area_in{
        bottom: 18%;
        left: 17vw;
        height: 70px;
    }
    #footer .icon_area .icon_area_in a{
        width: 70px;
        height: 70px;
        margin-left: 20px;
        transition: all 0.3s;
    }
    #footer .icon_area .icon_area_in a:hover{
        background-color: #015ea0;
        opacity: 1;
    }

    #footer .icon_area .icon_area_in a img {
        width: 35px;
    }
    #footer .icon_area .icon_area_in a:last-child img {
        width: 36px;
    }
}
@media all and (min-width: 1500px) {
    footer{
        padding: 0rem 0 10rem;
        background-size: 177rem;
        background-position: 57% -33rem;
    }
    .footer_in{
        max-width: 150rem;
        width: 100%;
        margin: 0 auto;
        padding-top: 10rem;
    }
    footer p{
        width: 100%;
        margin: -9rem auto 0;
    }
    #footer.footer_exb{
        background-size: 250rem;
    }
    #footer.footer_exb .footer_in_txt h2{
        font-size: 12.2rem;
    }
    #footer.footer_exb .footer_in_logo{
        top: 37%;
        left: 31%;
        width: 21rem;
        filter: drop-shadow(2px 4px 6px #fff);
    }
    #footer .icon_area .icon_area_in{
        bottom: 20%;
        left: 12vw;
    }

}

/*▼▼ ここから追加する ▼▼*/
#loader-wrap {
	position: fixed;
	display: flex;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #37A8E1;
}
/*▲▲ ここまで追加する ▲▲*/
.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.lord{
    animation-name: lord;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes lord {
	0%{
        opacity: 1;
    }
	100% {
        top: 166%;
        opacity: 0;
    }

}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}


/* banner -------------------------------------------------------------------------*/
.banner_sp{
    width: 100%;
    border-bottom: solid 2rem #FFFF00;
    background-color: #37a8e1;
    z-index: 100;
}
.banner_pc{
    width: 100%;
    display: none;
}
.banner_in{
    max-width: 150rem;
    width: 92%;
    margin: 4rem auto 6rem;
}
.banner_ex{
    max-width: 150rem;
    width: 100%;
    margin: 0 auto 5rem;
}
.banner_ex img,.banner_in img{
    filter: drop-shadow(2px 5px 5px rgb(100 100 100 / 80%));
}
.top_back.backs_ex .banner_pc{
   display: none;
}
@media all and (min-width: 600px) {
    .banner_in{
        margin: 0 auto 9rem;
    } 
}
@media all and (min-width: 800px) {
    .banner_pc{
        display: block;
    }
    .banner_sp{
        display: none;
    }
    .banner_in{
        margin: 10rem auto 0;
    }
    .banner_ex{
        margin: 0 auto 5rem;
    }
}
@media all and (min-width: 1500px) {
    .banner_in{
        width: 100%;
    }
    .banner_ex{
        width: 100%;
    }
    .banner_ex{
        margin: 0 auto 10rem;
    }
}




/* line stamp ---------------------------------------- */
.line{
    max-width: 120rem;
    width: 85%;
    margin: 5rem auto 9rem;
}
.line ul{
}
.line ul li{
    width: 100%;
}
.line ul li:first-child {
    margin-bottom: 50px;
}
.line ul li:last-child {
    width: 100%;
}
.line ul li:last-child img {
    margin-bottom: 2rem;
    display: none;
}
.line ul li h3{
    font-size: clamp(2.6rem, 4.3vw, 3.2rem);
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-align: center;
    letter-spacing: 0.05em;
}
.line ul li h3 span{
    color: #00D018;
}
.line ul li p {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 5rem;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}
.line table {
    border-collapse: collapse;
    width: 100%;
    border-bottom: 1px solid #CBCBCB;
    margin-bottom: 2rem;

}

.line table tr {
    border-top: 1px solid #CBCBCB;
}

.line table th {
    font-size: 1.5rem;
    color: #37A8E1;
    width: 29%;
    padding: 1.5rem 0;
    display: flex;
    width: 100%;
}

.line table td {
    font-size: 1.4rem;
    width: 70%;
    padding: 1.5rem 0;
}

.line .button_line {
    font-family: "mamelon";
    font-size: clamp(2.2rem, 2.2vw, 3rem);
    padding: 1rem 0;
    font-weight: 300;
    color: #fff;
    background-color: #07c47c;
    background: linear-gradient(120deg, #3ee6b0, 70%, #07c47c);
    border: solid 1px #fff;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    /* max-width: 200px; */
    filter: drop-shadow(0 0.4rem 0.5rem #b8b8b8);
    margin: 0 auto;
}
.line .button_line.v2 {
    background-color: #d34646;
    background: linear-gradient(120deg, #ff556c, 70%, #ed2f2f);
    border: solid 1px #fff;
    margin: 0 auto 2rem;
}
@media all and (min-width: 600px) {
    .line {
        margin: 11rem auto 9rem;
    }

    .line ul {
        display: flex;
        justify-content: space-between;
    }

    .line ul li {
        width: 44%;
    }

    .line ul li:last-child {
        width: 50%;
    }

    .line ul li:last-child img {
        display: block;
    }

    .line ul li h3 {
        text-align: left;
    }
    /* .line .button_line {
        max-width: 260px;
        margin: 0;
    } */

}
@media all and (min-width: 800px) {
    .line {
        width: 80%;
        margin: 5rem auto 11rem;
    }
    .line ul li:first-child {
        margin-bottom: 0rem;
    }
}
@media all and (min-width: 1000px) {
    .line {
        width: 80%;
        margin: 11rem auto 11rem;
    }
    .line ul {
        display: flex;
        justify-content: space-between;
    }

    .line ul li {
        width: 41%;
    }

    .line ul li:last-child {
        width: 52%;
    }
    .line ul li h3 {
        margin-bottom: 4.5rem;
    }
    .line table {
        margin-bottom: 4rem;
    }
    .line table th {
        width: 100%;
    }

    .line table td {
        width: 80%;
    }
}
@media all and (min-width: 1200px) {
    .line ul li {
        position: relative;
    }
    .line ul li h3 {
        letter-spacing: 0;
    }
    .line ul li h3 span {
        margin-right: 2rem;
    }
    .line ul li h3 br {
        display: none;
    }
    /* .line table {
        margin-bottom: 0;
    } */

    .line table th {
        padding: 2rem 0;
    }
    .line table td br.n1200{
        display: none;
    }
    .line .button_line {
        /* position: absolute;
        bottom: 4px;
        left: 0; */
        padding: 1.5rem 3rem;
        /* max-width: 600px; */
    }
}
/* line stamp ---------------------------------------- */


/* insta ---------------------------------------- */
.insta_btn2 {
    color: #FFF;
    border-radius: 7px;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 22px;
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    overflow: hidden;
    text-decoration: none;
    padding: 10px 30px;
    margin: 50px 0 0;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
    transition: all 0.3s;
}
.insta_btn2:hover {
    opacity: 1;
    filter: drop-shadow(0 0px 0px rgba(0, 0, 0, 0.3));
}
.insta_btn2:before {
    /*グラデーション②*/
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*全体を覆う*/
    height: 100%;
    /*全体を覆う*/
    background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
    background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .instagram {
    width: 30px;
    height: auto;
    position: relative;
    margin-right: 20px;
}

.insta_btn2 .st0 {
    fill: #fff;
}

.insta_btn2 span {
    /*テキスト*/
    display: inline-block;
    position: relative;
    transition: .5s
}

.insta_btn2 .triangle {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid #fff;
    border-right: 0;
    transition: all 0.3s;
}
@media all and (min-width: 600px) {
    .insta_btn2 .triangle {
        right: 30px;
    }

    .insta_btn2:hover .triangle {
        right: 20px;
    }
}
/* insta end ---------------------------------------- */