@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,tr,td,th,select,input{ margin:0; padding:0; list-style:none; }
a{ text-decoration:none; }
img{ border:0; }
button{ border:0; background:none; cursor:pointer; }

body{ font-family: 'Open Sans', sans-serif; }

.header_wrap{ position:absolute; top:0; left:0; width:100%; }
h1{ float:left; margin:30px; }

.gnb{ float:left; margin-top:40px; }
.gnb::before{ content:"|"; float:left; color:#fff; margin:13px 50px 0 20px; }
.gnb>li{ float:left; }
.gnb>li:nth-child(2), .gnb>li:nth-child(4), .gnb>li:nth-child(6){ margin:0 50px; }

.gnb>li>a{ display:block; color:#fff; height:50px; line-height:50px; font-weight:600; text-align:center; }
.gnb>li>a:hover{ opacity:0.5; }


.gnb li ul{ display:none; position:absolute; width:200px; background:#fff; padding:20px 0; margin:10px 0 0 -70px; }
.gnb li:first-child ul{ margin:10px 0 0 -83px; }
.gnb li ul::after{  border-top:0px solid transparent;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-bottom: 10px solid white;
                    content:"";
                    position:absolute;
                    top:-10px;
                    left:95px; }
.gnb li li{ width:150px; margin:0 auto; }
.gnb li li a{ display:block; color:#2d2d2d; width:150px; height:40px; line-height:40px; font-weight:600; text-align:center; border-bottom:1px solid #d7d7d7; background:#fff; }
.gnb li li a:hover{ color:#4277ff; }
.gnb li li:last-child a{ border-bottom:0; }



.utill_menu, .utill_menu2{ float:right; }

.utill_menu{ display:none; margin:60px 50px 0 0; }
.utill_menu li{ float:left; }
.utill_menu li:last-child{ margin-left:30px; }
.utill_menu li a{ color:#fff; font-weight:600; }


.utill_menu2{ margin:60px 50px 0 0; }

.utill_menu2 p{ float:left; color:#fff;}

.utill_menu2 p a{ color:#fff; }
.utill_menu2 p:nth-of-type(1) img{ width:16px; vertical-align:middle; margin-right:50px; }
.utill_menu2 p:nth-of-type(2) img:nth-child(1){ vertical-align:middle; width:20px; margin-right:10px; }
.utill_menu2 p:nth-of-type(2) img:nth-child(2){ margin-left:10px; }

.utill_menu2 ul{ display:none; position:absolute; width:250px; background:#fff; padding:20px 0; margin:50px 0 0 -50px; }
.utill_menu2 ul:after{ border-top:0px solid transparent;
                                           border-left: 5px solid transparent;
                                           border-right: 5px solid transparent;
                                           border-bottom: 10px solid white;
                                           content:"";
                                           position:absolute;
                                           top:-10px;
                                           left:220px; }
.utill_menu2 li{ width:220px; height:40px; line-height:40px; color:#2d2d2d; font-weight:600; border-bottom:1px solid #d7d7d7; margin-left:15px; }
.utill_menu2 li:last-child{ border:0; }
.utill_menu2 li img{ vertical-align:middle; margin-right:10px; }
.utill_menu2 li a, .utill_menu2 li button{ color:#2d2d2d; font-size:16px; font-weight:600; }
.utill_menu2 li button{ margin-left:-5px; }




.container{ clear:both; }

/* button style */

.visual_btn1, .about_btn, .howto_btn, .notice_btn, .faq_btn, .paper_btn{ clear:both; text-align:center; }
.visual_btn1 a, .about_btn a, .howto_btn a, .notice_btn a, .faq_btn a, .paper_btn a{ overflow: hidden; display: inline-block;
                vertical-align: top; width: 200px;
                height: 60px; line-height: 60px; color:#fff;
                border: 1px solid #7a7f84; transition: all 0.5s; }
.visual_btn1 a:hover, .about_btn a:hover, .howto_btn a:hover, .notice_btn a:hover, .faq_btn a:hover, .paper_btn a:hover{ color:#2d2d2d; background:#fff; }





.visual{ width:100%; height:1107px; background:url(../images/index1.jpg) no-repeat center top; background-color:#000; }
.visual_wrap{ width:1200px; margin:0 auto; }
.visual_wrap h2{ display:none; }
.visual_wrap p{ text-align:center; }
.visual_wrap p:nth-of-type(1){ color:#c4c4c4; padding-top:400px; font-size:25px; text-shadow:1px 1px 1px #2d2d2d; }
.visual_wrap p:nth-of-type(2){ color:#fff; font-size:80px; font-weight:600; text-shadow: 2px 2px 6px #565656; }

.visual_btn1{ float:right; margin-top:40px; }


.visual_arrow{ width:20px; padding-top:320px; margin:0 auto; }
.visual_arrow span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.visual_arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.visual_arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}


.visual_number{ clear:both; width:1200px; height:120px; margin:0 auto; padding-top:110px; }
.visual_number ul{ border-top:1px solid #fff; }
.visual_number li{ float:left; width:50%; height:120px; color:#fff; text-align:center; }
.visual_number li:nth-child(1){ border-right:1px solid #fff; box-sizing:border-box; }
.visual_number p:nth-child(1){ font-weight:600; font-size:40px; margin-top:20px; }
.visual_number p:nth-child(2){ font-weight:300; font-size:20px; }



.about{ clear:both; width:100%; height:1000px; background:#000; }
.about h2{ display:none; }
.about_wrap{ width:1200px; height:1000px; background:url(../images/index2.gif) no-repeat center; background-size:150%; margin:0 auto; }
.about_wrap p{ color:#fff; font-size:40px; font-weight:600; padding:500px 0 0 50px; }

.about_btn{ float:left; margin:20px 0 0 50px; }

.about_sns{ clear:both; width:1200px; margin:0 auto; padding-top:100px; }
.about_sns ul{ border-top:1px solid #fff; }
.about_sns li{ float:left; width:33.3%; height:120px; text-align:center; padding-top:30px; }
.about_sns li:nth-child(2){ border-left:1px solid #fff; border-right:1px solid #fff; box-sizing:border-box; }





.howto{ clear:both; width:100%; height:1130px; background:url(../images/index3.png) no-repeat center; }
.howto h2{ display:none; }
.howto_wrap{ width:1200px; height:1130px; margin:0 auto; }
.howto_wrap p{ color:#fff; font-size:40px; font-weight:600; padding:500px 0 0 50px; }

.howto_btn{ float:left; margin:30px 0 0 50px; }



.info{ width:100%; height:1130px; background:url(../images/index4.png) no-repeat center; }
.info h2{ display:none; }
.info_wrap{ width:1200px; margin:0 auto; padding-top:800px; }
.notice, .faq{ width:25%; color:#fff; }
.notice{ float:left; }
.faq{ float:right; }
.notice p:nth-of-type(1), .faq p:nth-of-type(1){ font-size:40px; font-weight:600; }
.notice p:nth-of-type(2), .faq p:nth-of-type(2){ font-size:20px; font-weight:600; margin-top:10px; }

.notice p:nth-of-type(2){ margin-bottom:40px; }

.notice_btn{ display:flex; }
.faq_btn{ float:left; margin-top:40px; }



.paper{ width:100%; height:730px; background:url(../images/index5.gif) no-repeat center; }
.paper p:nth-child(1){ color:#636363; text-align:center; padding-top:470px; }
.paper p:nth-child(1) span{ color:#fff; }
.paper p:nth-child(2) a{ display:block; width:30%; height:70px; line-height:70px; color:#fff; text-align:center; border:1px solid #7a7f84; margin:20px auto 0 auto; }
.paper_btn{ margin-top:40px; }
.paper_btn a{ width: 600px; }


#footer{ clear:both; width:100%; height:60px; background:#000; }
.footer_wrap{ width:1200px; height:50px; line-height:50px; margin:0 auto; }
.footer_wrap p, .footer_wrap a{ color:#7a7f84; }
.footer_wrap a:hover{ opacity:0.5; }
.footer_wrap p:nth-of-type(1), .footer_wrap p:nth-of-type(2), .footer_wrap li{ float:left; }
.footer_wrap p:nth-of-type(2)::before{ content:"|"; float:left; color:#7a7f84; margin:0 30px; }

.footer_wrap ul{ float:right; }
.footer_wrap li{ padding-top:8px; }
.footer_wrap li:nth-child(2){ margin:0 50px; }