@charset "UTF-8";

@font-face {
    font-family: "anzufont";
    src: url("http://pontasien.com/wp-content/themes/swell_child/wf/APJapanesefont.ttf") format("truetype"),
        url("http://pontasien.com/wp-content/themes/swell_child/wf/APJapanesefontK.ttf") format("truetype"),
        url("http://pontasien.com/wp-content/themes/swell_child/wf/APJapanesefontT.ttf") format("truetype"),
        url("../wf/APJapanesefont.ttf") format("truetype"),
        url("../wf/APJapanesefontK.ttf") format("truetype"),
        url("../wf/APJapanesefontT.ttf") format("truetype");
}

@font-face {
    font-family: "lemonfont";
    src: url("http://pontasien.com/wp-content/themes/swell_child/wf/ArmedLemon.TTF") format("truetype"),
        url("../wf/ArmedLemon.TTF") format("truetype");
}


p {
    font-family: "anzufont";
    line-height: 2rem;
}

html {
    font-size: 110%;
    margin: 0;
    padding: 0;
}

body {
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

p.voice_p {
    width: 90%;
    max-width: 750px;
    margin: auto;
    color: #fff;
    margin: 59px auto;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

.w1080 {
    width: 95%;
    max-width: 1080px;
    margin: auto;
}

#head_parts {
    background: url(../images/top_bg.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: -250px;
    padding-bottom: 250px;
    overflow: hidden;
    z-index: 10;
}

div#head_bottom {
    position: relative;
}

div#head_bottom {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: auto;
}

img.hparts_8 {
    width: 210px;
    position: absolute;
    left: 7%;
    top: -185px;
    filter: drop-shadow(10px 10px 10px #00000030);
}

img.hparts_9 {
    width: 210px;
    position: absolute;
    right: 7%;
    top: -275px;
    filter: drop-shadow(10px 10px 10px #00000030);
}


img.hparts_7 {
    max-width: 1000px;
    margin: 18vw auto 5vw;
    width: 100%;
    display: block;
}

div#head_top {
    max-width: 1080px;
    width: 100%;
    margin: auto;
    position: relative;
}

div#head_top h1 {
    max-width: 500px;
    width: 100%;
    margin: auto;
    position: absolute;
    top: 230px;
    right: 0;
    left: 0;
    filter: drop-shadow(5px 5px 15px black);
}

div#head_top h1 img {
    width: 100%;
}

.hparts_0 {
    width: 450px;
    position: absolute;
    left: -20%;
    top: 215px;
    filter: drop-shadow(15px 15px 15px #00000050);
}


.hparts_1 {
    width: 210px;
    position: absolute;
    left: 0%;
    top: 85px;
    filter: drop-shadow(10px 10px 10px #00000030);
}

img.hparts_2 {
    width: 210px;
    position: absolute;
    left: 15%;
    top: 5px;
    filter: drop-shadow(10px 10px 10px #00000030);
}

img.hparts_4 {
    width: 190px;
    position: absolute;
    right: 23%;
    top: 545px;
    filter: drop-shadow(10px 10px 10px #00000030);
}

img.hparts_6 {
    width: 175px;
    position: absolute;
    right: 8%;
    top: 275px;
    filter: drop-shadow(10px 10px 10px #00000030);
}

img.hparts_3 {
    width: 160px;
    position: absolute;
    right: -6%;
    top: 335px;
    filter: drop-shadow(10px 10px 10px #00000030);
}

div#head_middle {
    text-align: center;
    padding-top: 950px;
}

div#head_middle p {
    font-size: 25px;
    color: #fff;
    letter-spacing: .15rem;
    line-height: 2rem;
    text-shadow: 5px 5px 25px #00000050, 5px 5px 25px #00000050;
}

.concept_left p {
    color: #fff;
    font-size: 23px;
}

.concept_left h2 {
    font-family: 'lemonfont';
    color: #fff;
    font-size: 47px;
    margin-top: 0;
}

.w1080.navmenu {
    display: flex;
    width: 100%;
    max-width: 1080px;
    margin: 10px auto 0;
    text-align: center;
    justify-content: space-between;
}

.w1080.navmenu a {
    color: #000;
    /* font-family: 'anzufont'; */
    font-size: 20px;
    font-weight: bold;
    display: block;
    padding: 15px 25px;
}

#head_parts nav {
    background-color: rgba(255, 255, 255, 65%);
    position: relative;
}

#head_parts nav ::before {
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    width: 100%;
    content: "";
    height: 10px;
    background-image: url(../images/nav_top.png);
    background-position: bottom;
    background-size: auto;
    background-repeat: repeat-x;
    opacity: 9%;
}

#head_parts nav ::after {
    position: absolute;
    bottom: -10px;
    right: 0;
    left: 0;
    width: 100%;
    content: "";
    height: 10px;
    background-image: url(../images/nav_bottom.png);
    background-position: top;
    background-size: auto;
    background-repeat: repeat-x;
    opacity: 9%;
}

#concept {
    padding: 100px 0;
    background-image: url(../images/concept_bg_1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 7;
}

.concept_left img {
    margin-top: 30px;
    width: 85%;
    max-width: 430px;
}

.concept_left h2 {
    font-family: 'lemonfont';
    color: #fff;
    font-size: 47px;
}

.concept_w {
    margin: 290px auto 60px;
}

.concept_left {
    float: left;
    width: 60%;
}

.concept_right {
    float: right;
    width: 35%;
}

.concept_right img {
    width: 100%;
}

#contact_bit {
    padding: 0;
    margin: 0 0 -10px;
}

div#contact_bit img {
    width: 100%;
    margin: -2px auto;
    padding: 0;
}

#point h2 {
    width: 100%;
    max-width: 530px;
    margin: -150px auto -110px;
}

#point h2 img {
    width: 100%;
}

.pointmain {
    width: 100%;
    max-width: 550px;
    margin: auto;
    position: relative;
    padding-bottom: 200px;
}

.pointmain>img {
    width: 100%;
    transform: translateX(-30px);
}

.pointmain p {
    color: #fff;
    font-size: 20px;
}

.point1 {
    position: absolute;
    top: 0;
    left: -250px;
    width: 320px;
}

.point1:before {
    content: "";
    width: 70px;
    height: 70px;
    background-image: url(../images/point1_dot.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 150px;
    right: 40px;
    background-size: contain;
    z-index: 10;
}

.point2:before {
    content: "";
    width: 70px;
    height: 70px;
    background-image: url(../images/point2_dot.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 110px;
    left: 40px;
    background-size: contain;
    z-index: 10;
}

.point3:before {
    content: "";
    width: 70px;
    height: 70px;
    background-image: url(../images/point3_dot.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 120px;
    right: 40px;
    background-size: contain;
    z-index: 10;
}

.point4:before {
    content: "";
    width: 70px;
    height: 70px;
    background-image: url(../images/point4_dot.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 150px;
    left: -30px;
    background-size: contain;
    z-index: 10;
}

.pointtit {
    width: 100%;
    max-width: 530px;
    margin: -150px auto -110px;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -220px;
}

.p-searchModal__inner {
    display: none;
}

.p-spMenu__closeBtn {
    display: none;
}

.point1 img {
    width: 240px;
    position: relative;
}

.point3 {
    position: absolute;
    bottom: -50px;
    left: -250px;
    width: 320px;
}

.point3 img {
    width: 240px;
}

.point2 {
    position: absolute;
    top: 150px;
    right: -250px;
    width: 300px;
    text-align: right;
}

.point2 img {
    width: 240px;
}

.point2 p {
    text-align: left;
}

.point4 {
    position: absolute;
    bottom: 0;
    right: -250px;
    width: 300px;
    text-align: right;
}

.point4 img {
    width: 240px;
}

.point4 p {
    text-align: left;
}

#point {
    padding: 50px 0;
    background-image: url(../images/concept_bg_3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: -200px;
    overflow: hidden;
}

.moviearea {
    /* background-color: #fff; */
    width: 95%;
    margin: 150px auto 200px;
    max-width: 850px;
    height: auto;
    position: relative;
    padding: 0;
}

.movieimage1 {
    width: 310px;
    position: absolute;
    top: -135px;
    left: -140px;
    filter: drop-shadow(2px 4px 15px #00000050);
}

.movieimage2 {
    width: 230px;
    position: absolute;
    bottom: -105px;
    right: -130px;
    filter: drop-shadow(2px 4px 15px #00000050);
}

.moviearea video {
    width: 100%;
    height: auto;
}

.con_title {
    width: 100%;
    text-align: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

#voice .con_title h2 {
    padding: 310px 0 40px;
}


.con_title h2 {
    padding: 285px 0 40px;
    font-size: 50px;
    color: #fff;
    font-family: "lemonfont" !important;
    margin: 0;
}

#menu {
    padding: 0px 0 200px;
    background-image: url(../images/menu_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: -200px;
}

.cont_bnr {
    max-width: 750px;
    margin: 0 auto 50px;
    width: 90%;
}


#messe {
    padding: 0px 0 50px;
    background-image: url(../images/menu_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}


#message_top {
    padding: 0px 0 50px;
    background-image: url(../images/messe_bg_1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    position: relative;
}

/*div#message_top h3 {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 42px;
    font-weight: 100;
    padding: 110px 0 50px 0;
    margin: 0px 00 0 40%;
    width: 60%;
}*/

div#message_top h3 img {
    width: 48%;
    max-width: 750px;
    margin-left: 43%;
    padding-top: 0;
}

.post_content h3 {
    padding: 0 !important;
    margin: 0 !important;
}

#message_bottom {
    padding: 100px 0 150px;
    background-image: url(../images/messe_bg_2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: -200px;
    margin-top: -10px;
}

.messe_right {
    float: right;
    width: 25%;
}

.messe_right img {
    width: 100%;
}

.messe_left p {
    margin: 0;
    font-size: 20px;
}


div#message_top>img {
    position: absolute;
    width: 58%;
    left: -17%;
    bottom: -40%;
}

.messe_left {
    float: left;
    width: 70%;
}

.messe_photoarea img {
    width: 100%;
}

#menu .con_title {
    background-image: url(../images/menu_tit_bg.jpg);
}

#message .con_title {
    background-image: url(../images/messe_tit_bg.jpg);
    background-position: top right;
}

.customenu img {
    width: 100%;
    height: auto;
}

.customenu {
    margin: 150px auto;
}


.cont_bnr img {
    width: 100%;
    filter: drop-shadow(10px 10px 15px #00000050);
}

#voice {
    padding: 0px 0 50px;
    background-image: url(../images/voice_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: -200px;
}

.instatag_area {
    width: 90%;
    max-width: 800px;
    margin: 150px auto 200px;
}

#voice .con_title {
    background-image: url(../images/voice_tit_bg.jpg);
}

#sche .con_title {
    background-image: url(../images/sche_tit_bg.jpg);
}

#sche {
    padding: 0px 0 50px;
    background-image: url(../images/sche_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: -200px;
}

.sche_w {
    margin-top: 150px;
    margin-bottom: 200px;
}

.sche_left {
    float: left;
    width: 35%;
    margin-top: 150px;
}

.sche_left img {
    width: 100%;
    height: auto;
}

.contact_right {
    width: 65%;
    float: right;
}

.contact {
    margin: 0px auto 100px;
    padding-top: 150px;
}

.sche_right {
    float: right;
    width: 60%;
    font-size: 20px;
}

.contact_left {
    width: 30%;
    float: left;
}

.contact_left img {
    width: 100%;
}

#contact {
    padding: 0px 0 50px;
    background-image: url(../images/contact_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

#contact h2 {
    font-family: 'lemonfont';
    font-size: 39px;
    margin-top: 170px;
}

#footer {
    padding: 0px 0 50px;
    background-image: url(../images/footer_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

footer nav a {
    color: #fff !important;
}


div#footer h2 {
    width: 300px;
    margin: auto;
    padding-top: 250px;
}

div#footer p {
    margin: 50px auto;
    text-align: center;
    color: #fff;
    font-size: 18px;
}

.footcar {
    width: 700px;
    margin: 10px auto 50px;
}

img.copyr_mark {
    width: 200px;
    margin: 50px auto 7px;
    display: block;
}

.footinsta_area {
    width: 100%;
    max-width: 800px;
    margin: 150px auto 200px;
}

.footcar img {
    width: 100%;
}

footer {
    z-index: 0;
}

footer {
    z-index: 0;
}

#point {
    z-index: 6;
    position: relative;
}

#message {
    z-index: 5;
    position: relative;
}

#menu {
    z-index: 4;
    position: relative;
}

#voice {
    z-index: 3;
    position: relative;
}

#sche {
    z-index: 2;
    position: relative;
}

#contact {
    z-index: 1;
    position: relative;
}

footer {
    z-index: 0;
    position: relative;
}

#contact h2 {
    color: #000;
    letter-spacing: -.15rem;
}

@media screen and (min-width:1800px) {
    .footcar {
        width: 700px;
        margin: 10px auto 12.5%;
    }
}


@media screen and (max-width:1080px) {
    div#message_top h3 img {
        margin-top: 6%;
    }

    div#message_top h3 img {}

    .concept_left h2 {
        font-family: 'lemonfont';
        color: #fff;
        font-size: 36px;
    }

    .pointmain {
        width: 100%;
        max-width: 370px;
        margin: 160px auto;
        padding-bottom: 320px;
        padding-top: 145px;
    }

    div#head_top h1 {
        max-width: 400px;
    }

    .hparts_0 {
        width: 340px;
        position: absolute;
        left: -9%;
        top: 375px;
        filter: drop-shadow(15px 15px 15px #00000050);
    }

    .instatag_area {
        width: 75%;
        margin: 150px auto 200px;
    }

    .footinsta_area {
        width: 75%;
        margin: 150px auto 200px;
    }

    p.voice_p {
        max-width: 750px;
        width: 90%;
        margin: 50px auto;
    }

    img.hparts_9 {
        top: -175px;
    }

    img.hparts_8 {
        width: 210px;
        position: absolute;
        left: 7%;
        top: -115px;
    }

    .footcar {
        max-width: 700px;
        margin: 10px auto 50px;
        width: 80%;
    }

    img.hparts_7 {
        width: 90%;
    }

    .w1080.navmenu a {
        color: #000;
        font-size: 17px;
    }

    .point1 {
        position: absolute;
        top: 0;
        left: -170px;
        width: 250px;
    }

    .point3 {
        position: absolute;
        bottom: -60px;
        left: -170px;
        width: 290px;
    }

    .point2 {
        position: absolute;
        top: 120px;
        right: -170px;
        width: 230px;
        text-align: right;
    }

    .point4 {
        position: absolute;
        bottom: 20px;
        right: -170px;
        width: 310px;
        text-align: right;
    }

    .point1:before {
        right: 10px;
    }

    .point2:before {
        left: 20px;
    }

    .point4:before {
        top: 80px;
        left: 11px;
    }

    div#message_top>img {
        position: absolute;
        width: 68%;
    }

    div#contact_bit img {
        width: 100%;
        margin: 0px auto 0px;
        padding: 0;
        height: 40px;
        object-fit: cover;
    }

    #contact h2 {
        font-family: 'lemonfont';
        font-size: 30px;
    }


}

.instatag_area {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
}

.instatag_area iframe {
    width: 30% !important;
    height: 600px;
    overflow: scroll !important;
    min-width: inherit !important;
}

@media screen and (min-width:1080px) {}

@media screen and (max-width:750px) {
    .post_content h3 {
        text-align: center;
    }

    div#message_top h3 img {
        width: 85%;
        max-width: 750px;
        margin: auto;
        padding-top: 0;
        margin-top: 0%;

    }

    #contact h2 {
        font-family: 'lemonfont';
        font-size: 30px;
    }

    .hparts_0 {
        width: 340px;
        position: absolute;
        left: -9%;
        top: 426px;
    }

    div#head_top h1 {
        max-width: 400px;
        width: 90%;
        top: 200px;
    }

    img.hparts_3 {
        top: 25px;
    }

    img.hparts_4 {
        top: 625px;
    }

    img.hparts_6 {
        top: 325px;
    }

    div#message_top>img {
        position: inherit;
        width: 68%;
        margin: auto;
        right: inherit;
        left: inherit;
        display: block;
    }

    .messe_left {
        float: inherit;
        width: 70%;
        margin: auto;
    }

    .messe_right {
        float: right;
        width: 34%;
        margin-right: 15%;
        margin-top: 10%;
    }

    .sche_left {
        float: inherit;
        width: 70%;
        margin: 100px auto 50px;
    }

    .sche_right {
        float: inherit;
        width: 90%;
        font-size: 20px;
        margin: auto;
    }

    .contact_left {
        width: 30%;
        float: inherit;
        margin: auto;
        padding-top: 60px;
    }

    .contact_right {
        width: 90%;
        margin: auto;
        float: inherit;
    }

    #contact h2 {
        font-family: 'lemonfont';
        font-size: 25px;
        margin-top: 10px;
    }

    .contact {
        margin: 0px auto 50px;
    }

    .hparts_1 {
        width: 170px;
        position: absolute;
        left: 0%;
        top: 175px;
    }

    .hparts_0 {
        width: 250px;
        position: absolute;
        left: -9%;
        top: 476px;
    }

    img.hparts_6 {
        top: 395px;
        width: 125px;
    }

    #head_parts nav {
        display: none;
    }

    .concept_left {
        float: inherit;
        width: 90%;
        margin: 0 auto 50px;
    }

    .concept_right {
        float: inherit;
        width: 90%;
        display: block;
        margin: auto;
    }

    .concept_left h2 {
        font-family: 'lemonfont';
        color: #fff;
        font-size: 27px;
    }

    #concept {
        padding: 50px 0;
    }

    div#contact_bit img {
        width: 100%;
        margin: 0px auto -00px;
        padding: 0;
        height: 40px;
        object-fit: cover;
    }














    .pointtit {
        width: 90%;
        max-width: 530px;
        margin: -150px auto -110px;
        position: absolute;
        right: 0;
        left: 0;
        bottom: -185px;
    }

    .point1 {
        position: inherit;
        top: 0;
        left: inherit;
        width: 50%;
        float: left;
    }

    .pointmain {
        width: 70%;
        max-width: 100%;
        margin: 70px auto;
        padding-bottom: 320px;
        padding-top: 0;
    }

    .point2 {
        position: inherit;
        top: inherit;
        right: inherit;
        width: 50%;
        text-align: right;
        float: right;
        margin-top: 70px;
    }

    .point3 {
        position: inherit;
        bottom: -60px;
        left: inherit;
        width: 50%;
        float: left;
    }

    .clear {
        clear: both;
    }

    .point1 img {
        width: 95%;
        position: relative;
        height: 220px;
    }

    .point2 img {
        width: 95%;
        height: 220px;
    }

    .point1 p,
    .point3 p {
        color: #fff;
        font-size: 15px;
        width: 90%;
        line-height: 1.5rem;

    }

    .point2 p,
    .point4 p {
        color: #fff;
        font-size: 15px;
        width: 90%;
        line-height: 1.5rem;
        margin-left: 10%;

    }

    .point3 img {
        width: 95%;
        position: relative;
        height: 180px;
    }

    .point4 img {
        width: 95%;
        position: relative;
        height: 180px;
    }

    .point4 {
        position: inherit;
        bottom: inherit;
        right: inherit;
        width: 50%;
        text-align: right;
        float: right;
        margin-top: 80px;
    }

    .point1:before {
        content: inherit;
    }

    .point2:before {
        content: inherit;
    }

    .point3:before {
        content: inherit;
    }

    .point4:before {
        content: inherit;
    }

    .pointmain>img {
        width: 100%;
        transform: translateX(-30px);
        margin-bottom: 50px;
    }



}



@media screen and (max-width:600px) {

    .instatag_area {
        display: flex;
        gap: 5%;
    }

    .instatag_area iframe {
        width: 47.5% !important;
        height: 400px;
        overflow: scroll !important;
        min-width: inherit !important;
    }

    .js body {
        height: 400px;
        overflow: scroll !important;
    }

    #concept .wp-block-group__inner-container,
    #sche,
    #point {
        overflow: hidden;
    }

}




@media screen and (max-width:480px) {
	#message .con_title{
    background-image: url(../images/messe_tit_bg_sp.jpg);
		background-size:contain!important;
    background-position: bottom!important;
}
#menu .con_title {
    background-image: url(../images/menu_tit_bg_sp.jpg);
	 background-position: bottom!important;
	background-size:contain!important;
}
	#voice .con_title {
    background-image: url(../images/voice_tit_bg_sp.jpg);
		 background-position: bottom!important;
		background-size:contain!important;
}
	#sche .con_title {
    background-image: url(../images/sche_tit_bg_sp.jpg);
		 background-position: bottom!important;
		background-size:contain!important;
}
    .movieimage1 {
        width: 150px;
        top: -105px;
        left: -60px;
    }

    #head_parts {
        background: url(../images/top_bg_sp.png);
        padding-bottom: 150px;
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .concept_left p {
        line-height: 1.85rem;
        color: #fff;
        font-size: 18px;
    }

    p {
        font-family: "anzufont";
        line-height: 1.5rem;
        font-size: 17px;
    }

    .sp {
        display: block !important;
    }

    .pc {
        display: none;
    }

    div#head_top h1 {
        max-width: 310px;
        width: 90%;
        top: 260px;
    }

    img.hparts_4 {
        top: 668px;
        width: 110px;
        position: absolute;
        right: 19%;
    }

    div#head_middle {
        text-align: center;
        padding-top: 900px;
    }

    div#head_middle p {
        font-size: 18px;
        color: #fff;
        letter-spacing: .1rem;
    }

    img.hparts_7 {
        margin: 71vw auto 5vw;
    }

    img.hparts_8 {
        width: 150px;
        position: absolute;
        left: 7%;
        top: -205px;
    }

    img.hparts_9 {
        top: -195px;
        width: 190px;
    }

    #head_parts nav {
        display: none;
    }

    div#contact_bit img {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .pointtit {
        width: 90%;
        max-width: 530px;
        margin: -150px auto -110px;
        position: absolute;
        right: 0;
        left: 0;
        bottom: -115px;
    }

    .point1 {
        position: inherit;
        top: 0;
        left: inherit;
        width: 50%;
        float: left;
    }

    .pointmain {
        width: 90%;
        max-width: 100%;
        margin: 70px auto;
        padding-bottom: 320px;
        padding-top: 0;
    }

    .point2 {
        position: inherit;
        top: inherit;
        right: inherit;
        width: 50%;
        text-align: right;
        float: right;
        margin-top: 70px;
    }

    .point3 {
        position: inherit;
        bottom: -60pxpx;
        left: inherit;
        width: 50%;
        float: left;
    }

    .clear {
        clear: both;
    }

    .point1 img {
        width: 95%;
        position: relative;
        height: 220px;
    }

    .point2 img {
        width: 95%;
        height: 220px;
    }

    .point1 p,
    .point3 p {
        color: #fff;
        font-size: 15px;
        width: 90%;
        line-height: 1.5rem;

    }

    .point2 p,
    .point4 p {
        color: #fff;
        font-size: 15px;
        width: 90%;
        line-height: 1.5rem;
        margin-left: 10%;

    }

    .point3 img {
        width: 95%;
        position: relative;
        height: 180px;
    }

    .point4 img {
        width: 95%;
        position: relative;
        height: 180px;
    }

    .point4 {
        position: inherit;
        bottom: inherit;
        right: inherit;
        width: 50%;
        text-align: right;
        float: right;
        margin-top: 80px;
    }

    .point1:before {
        content: inherit;
    }

    .point2:before {
        content: inherit;
    }

    .point3:before {
        content: inherit;
    }

    .point4:before {
        content: inherit;
    }

    .pointmain>img {
        width: 100%;
        transform: translateX(-30px);
        margin-bottom: 50px;
    }

    #message_bottom {
        padding: 70px 0 130px;
    }

    .messe_left p {
        margin: 0;
        font-size: 17px;
    }

    .messe_left {
        float: inherit;
        width: 85%;
        margin: auto;
    }

    .messe_right {
        float: inherit;
        width: 50%;
        margin-right: inherit;
        margin: 50px auto;
        margin-top: 50px;
    }

    #voice .con_title h2 {
        padding: 270px 0 30px;
    }

    .con_title h2 {
        padding: 250px 0 30px;
        font-size: 35px;
        color: #fff;
        font-family: "lemonfont" !important;
        margin: 0;
    }

    #contact h2 {
        font-family: 'lemonfont';
        font-size: 19px;
    }

    #footer nav {
        display: none;
    }

    #menu {
        padding: 0px 0 100px;
    }

    .instatag_area {
        margin: 150px auto 150px;
    }

    .sche_w {
        margin-bottom: 120px;
    }

    div#footer h2 {
        padding-top: 160px;
    }

    .moviearea {
        margin: 180px auto 130px;
    }

    .customenu {
        margin: 110px auto;
    }
}





@media screen and (min-width:480px) {}





/*----------------------------------フワット----------------------------------------------*/


/*==================================================
    ふわっ
    ===================================*/

/* その場で */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から */

.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}

/*==================================================
    パタッ
    ===================================*/


/* 下へ */
.flipDown {
    animation-name: flipDownAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipDownAnime {
    from {
        transform: perspective(2500px) rotateX(100deg);
        opacity: 0;
    }

    to {
        transform: perspective(2500px) rotateX(0);
        opacity: 1;
    }
}


/* 左へ */
.flipLeft {
    animation-name: flipLeftAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    perspective-origin: left center;
    opacity: 0;
}

@keyframes flipLeftAnime {
    from {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
        opacity: 0;
    }

    to {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1;
    }
}


/* 左上へ */
.flipLeftTop {
    animation-name: flipLeftTopAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipLeftTopAnime {
    from {
        transform: translate(-20px, 80px) rotate(-15deg);
        opacity: 0;
    }

    to {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

/* 右へ */
.flipRight {
    animation-name: flipRightAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    perspective-origin: right center;
    opacity: 0;
}

@keyframes flipRightAnime {
    from {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
        opacity: 0;
    }

    to {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1;
    }
}

/* 右上へ */
.flipRightTop {
    animation-name: flipRightTopAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipRightTopAnime {
    from {
        transform: translate(-20px, 80px) rotate(25deg);
        opacity: 0;
    }

    to {
        transform: translate(0, 1) rotate(0deg);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
    opacity: 0;
}

/*==================================================
    くるっ
    ===================================*/


/* X 軸（縦へ） */
.rotateX {
    animation-name: rotateXAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
    from {
        transform: rotateX(0);
        opacity: 0;
    }

    to {
        transform: rotateX(-360deg);
        opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY {
    animation-name: rotateYAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
    from {
        transform: rotateY(0);
        opacity: 0;
    }

    to {
        transform: rotateY(-360deg);
        opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ {
    animation-name: rotateLeftZAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
    from {
        transform: rotateZ(0);
        opacity: 0;
    }

    to {
        transform: rotateZ(-360deg);
        opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ {
    animation-name: rotateRightZAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
    from {
        transform: rotateZ(0);
        opacity: 0;
    }

    to {
        transform: rotateZ(360deg);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
    opacity: 0;
}

/*==================================================
    ボンッ、ヒュッ
    ===================================*/

/* 拡大 */
.zoomIn {
    animation-name: zoomInAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 縮小 */
.zoomOut {
    animation-name: zoomOutAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
    from {
        transform: scale(1.2);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomInTrigger,
.zoomOutTrigger {
    opacity: 0;
}

/*==================================================
    じわっ
    ===================================*/

/* ぼかしから出現 */
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
    }

    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
    opacity: 0;
}

/*==================================================
    にゅーん
    ===================================*/

/* 滑らかに変形して出現 */
.smooth {
    animation-name: smoothAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transform-origin: left;
    opacity: 0;
}

@keyframes smoothAnime {
    from {
        transform: translate3d(0, 100%, 0) skewY(12deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0) skewY(0);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.smoothTrigger {
    opacity: 0;
}

/*==================================================
    スーッ（枠線が伸びて出現）
    ===================================*/

/*枠線が伸びて出現*/

.lineTrigger {
    position: relative;
    /* 枠線が書かれる基点*/
    opacity: 0;
}

.lineTrigger.lineanime {
    animation-name: lineAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes lineAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: #333;
    /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 0;
    background: #333;
    /* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
    top: 0;
    left: 0;
}

.lineTrigger.lineanime::before {
    animation: lineAnime .5s linear 0s forwards;
    /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
    top: 0;
    right: 0;
}

.lineTrigger.lineanime .line2::before {
    animation: lineAnime2 .5s linear .5s forwards;
    /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
    bottom: 0;
    right: 0;
}

.lineTrigger.lineanime::after {
    animation: lineAnime .5s linear 1s forwards;
    /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
    bottom: 0;
    left: 0;
}

.lineTrigger.lineanime .line2::after {
    animation: lineAnime2 .5s linear 1.5s forwards;
    /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes lineAnime2 {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear {
    animation: lineInnerAnime .5s linear 1.5s forwards;
    /*1.5秒後に中央のエリアが0.5秒かけて表示*/
    opacity: 0;
    /*初期値を透過0にする*/
}

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

    100% {
        opacity: 1;
    }
}


/*==================================================
    シャッ（背景色が伸びて出現）
    ===================================*/

/*背景色が伸びて出現（共通）*/
.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: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
    /*伸びる背景色の設定*/
}

@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);
    }
}

/*右から*/
.bgRLextend::before {
    animation-name: bgRLextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
    /*伸びる背景色の設定*/
}

@keyframes bgRLextendAnime {
    0% {
        transform-origin: right;
        transform: scaleX(0);
    }

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

    50.001% {
        transform-origin: left;
    }

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

/*下から*/
.bgDUextend::before {
    animation-name: bgDUextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
    /*伸びる背景色の設定*/
}

@keyframes bgDUextendAnime {
    0% {
        transform-origin: bottom;
        transform: scaleY(0);
    }

    50% {
        transform-origin: bottom;
        transform: scaleY(1);
    }

    50.001% {
        transform-origin: top;
    }

    100% {
        transform-origin: top;
        transform: scaleY(0);
    }
}

/*上から*/
.bgUDextend::before {
    animation-name: bgUDextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
    /*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime {
    0% {
        transform-origin: top;
        transform: scaleY(0);
    }

    50% {
        transform-origin: top;
        transform: scaleY(1);
    }

    50.001% {
        transform-origin: bottom;
    }

    100% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
    opacity: 0;
}





/*==================================================
    アニメーション設定
    ===================================*/

/* アニメーションの回数を決めるCSS*/

.count2 {
    animation-iteration-count: 2;
    /*この数字を必要回数分に変更*/
}

.countinfinite {
    animation-iteration-count: infinite;
    /*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05 {
    animation-delay: 0.5s;
}

.delay-time1 {
    animation-delay: 1s;
}

.delay-time15 {
    animation-delay: 1.5s;
}

.delay-time2 {
    animation-delay: 2s;
}

.delay-time25 {
    animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05 {
    animation-duration: 0.5s;
}

.change-time1 {
    animation-duration: 1s;
}

.change-time15 {
    animation-duration: 1.5s;
}

.change-time2 {
    animation-duration: 2s;
}

.change-time25 {
    animation-duration: 2.5s;
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から */

.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}