html,body,div,p,h1,h2,h3,h4,h5,ul{margin:0;padding:0}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
img{max-width:100%;height:auto;vertical-align:middle}
html{font-size:75%;}
*::before, *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{position:relative;font-family:"Microsoft YaHei","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Microsoft YaHei",sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
a{text-decoration:none;cursor:pointer;}
html,body{width:100%;height:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}
.dis_ipd{display:none!important}
.dis_res{display:none!important}
.dis_se{display:none!important;}
.share_div{width:0px;height:0px;overflow:hidden;}
.loding{width:100%;height:100%;position:fixed;z-index:99999;background:#fff;display:none}
#loding{display:none; background-image:url(../img/loding.svg);background-size:254px 353px;width:254px;height:353px;top:50%;position:absolute;left:50%;transform: translate(-50%, -50%);}

.logo{position:fixed;top:40px;left:60px;z-index: 3}
.logo path,.logo rect{fill: #fff;transition:0.1s;}
.logo line{stroke: #fff;}
.logo.smaller path,.logo.smaller rect{fill: #000;}
.smaller line{stroke: #000;}
.lung{position:fixed;right:60px;top:20px;z-index:1;font-size:16px;}
.lung a{color:#fff;}
.lung span{color:#fff;padding:0 10px;}
h2{font-size:30px;margin-bottom:30px;line-height:1.2em;font-weight:200;letter-spacing: 0.08em;}
h3{font-size:11px;line-height: 1.4em;margin-bottom:25px;}
p{font-size:10px;line-height:1.67em;font-weight: 400;}

.menu_icon{display:none; position:absolute;right:160px;top:0;}
.menu_icon img{width:74px;height: 54px;}
.smaller .menu_icon{display: block;}
.menu-contact{top: 5px;position: relative; color: #000;background: #fff;padding: 10px 28px;font-weight: 400;float: right;font-size: 16px;letter-spacing: 1px;-webkit-transition: opacity 300ms cubic-bezier(.694,0,.335,1),background-color 100ms cubic-bezier(.694,0,.335,1),color 100ms cubic-bezier(.694,0,.335,1);
-o-transition: opacity 300ms cubic-bezier(.694,0,.335,1),background-color 100ms cubic-bezier(.694,0,.335,1),color 100ms cubic-bezier(.694,0,.335,1);
transition: opacity 300ms cubic-bezier(.694,0,.335,1),background-color 100ms cubic-bezier(.694,0,.335,1),color 100ms cubic-bezier(.694,0,.335,1);}
.menu-contact:hover{opacity:0.7;}
.smaller .menu-contact{background:#000;color:#fff;}
.hero{position:absolute;width:100%;top:160px;left:0;color:#fff;text-align: center;}
.top{position:relative; background-size:cover;background-position:center;position:relative;height:100%;min-height:500px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.top h1{font-size:50px;color:#fff;font-weight:400;letter-spacing:0.02em}
.top h2{font-size:24px; color:#fff;font-weight:200;line-height:1.4em;letter-spacing: 0.15em;}
.top button{font-size:9px;color:#eaff00;font-weight:200;border:solid 2px #eaff00;padding:10px 50px;line-height:1.3em;background:none;border-radius:50px;}
.top_box{width:100%;max-width:908px;margin:0 auto;padding:0px 0 70px;}
.top_box p{color:#fff;font-size:18px;line-height:1.67em;padding-bottom: 60px;}
.top_bn{position:absolute;bottom:0;left:0;width:100%;background:#eaff00;padding:10px 0;display:block;}
.top_bn a{margin-bottom:0;color:#000;font-size:18px;}
.scrollme{overflow: hidden;}
.videos{position:relative;width:100%;background-color: rgba(0, 0, 0, 0.5);display:block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#bg_v{
    position:absolute;
    width:100%;
    height:100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index:-1; 
    position: -webkit-sticky; 
    position: sticky;    
    top: 0; 
    left: 0; 
    height: 100vh; 
    overflow: hidden;
}
.videos_text{text-align: center;margin-bottom:250px;color:#fff;overflow:hidden;}
.videos_text h2{ line-height: 1.5em;font-weight: 200;font-size:23px;margin-bottom:1.2em;letter-spacing: 0.1em;}
#v{
    position:fixed;
    right:0;
    bottom:0;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background-color:black;
    background-size:contain;
    object-fit:cover;
    display:none;
    z-index:4;
    border:solid 12px #4d4d4d;
}
.on #v{}
#playOrPauseButton{width: 92px;height: 92px;background-size: 92px;margin: 0 auto;cursor:pointer;margin-bottom:50px;}
#playOrPauseButton circle{stroke:#EAFF00;fill-opacity:0;stroke-opacity:1;transition:0.3s;}
#playOrPauseButton polygon{fill:#EAFF00;transition:0.3s;}


#playOrPauseButton:hover circle{stroke-opacity:0;fill:#EAFF00;fill-opacity:1;}
#playOrPauseButton:hover polygon{fill:#2f2f2f;}

#stopButton{display:none;}
.on #stopButton{position:fixed;z-index:2;z-index:2;top:10px;left:10px;transition:0.3s;cursor:pointer;z-index:5}
.on #stopButton:hover{opacity:1;}
.on .top_bn{display: none;}
#playback{ width: 100%;position:fixed;bottom:0;left:0;background:#4d4d4d;cursor:pointer;display:none;}
.on #playback{display:block;z-index:5;}
#reload{display:none;position:fixed;z-index:2;z-index:2;right:100px;bottom:20px;opacity:0.3;transition:0.3s;cursor:pointer;z-index: 5;}
#reload:hover{opacity:1;}
input[type=range] {-webkit-appearance:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#eaff00;height:10px;width:10px;border-radius:50%;}
input[type=range]::-ms-tooltip{display:none;}
input[type=range]::-moz-range-track{height:0;}
input[type=range]::-moz-range-thumb{background:#eaff00;height:10px;width:10px;border:none;border-radius:50%;}

.concept{background: #ffffff;position:relative; position:relative;width:100%;position:relative;text-align: center;padding:40px 0 50px;overflow:hidden;}
.concept h2{font-size:34px;font-weight:400;}
.concept p{font-size:19px;text-align: justify;max-width:445px;letter-spacing:0.06em;}
.concept .animateme{height:820px;}
.inner{width:100%;max-width:1080px;margin:0 auto;display:table;}
.concept_img{width:50%;display:inline-block;vertical-align:top;background-image: url(../img/concept_bg3.jpg); background-size:auto 100%;background-position:center;position:absolute;top:0;left:45%;height: 100%;background-repeat: no-repeat;}
.concept_logo{ width: 100%;vertical-align: top; background-image: url(../img/concept_logo.png); background-size: auto 100%; background-position: center; position: absolute; top: 0; left: 0; height: 100%; background-repeat: no-repeat;/* z-index: 3; */}
.concept_text{width:50%;display:inline-block;padding-right:40px;}
.product_01{position:absolute;left:50%;bottom:80px;margin-left:-460px;z-index:0;}
.product_02{position:absolute;left:45%;bottom:95px;margin-left:-400px;z-index:1;}
.product_03{position:absolute;left:55%;bottom:95px;z-index:2;}

iframe{width:100%;height:100%;}
.iphone_movie{display:none;z-index:-1;}
.iphone_movie.on{display:block;}

.works{width:100%;position:relative;padding:130px 0;}
.works_img{width:50%;display:inline-block;padding-right:40px;vertical-align:top;}
.works_text{width:50%;display:inline-block;padding-left:40px;}
.works_text h2{font-size:34px;font-weight:400;padding-top:15px;}
.works_text p{font-size:19px;text-align: justify;max-width:445px;letter-spacing:0.06em;}

.plan{width:100%;text-align:center;background:#efefef;padding:90px 0;}
.plan .inner{max-width:980px;margin-top:2em;display:table;}
.plan .inner .plan_box{width:33.333%;display: inline-block;margin-bottom: 3em;position:relative;}
.plan .inner .plan_box h3{font-size:21px;font-weight:600;color: #121212;}
.plan h2{margin-bottom:0.5em;}
.plan p{font-size:19px;}
.plan .icons img{position:absolute; top: 0; left: 50%; margin-left: -52px; width: 104px;}
.icon_bg{width: 105px; height: 105px; margin: 0 auto; background: #fff; border-radius: 60px;margin-bottom: 1.2em;}

.ani_icon{-webkit-transform: scale(0);transform: scale(0);transition:0.3s;}
.ani_icon.on{-webkit-animation: scaleBounceOut .5s normal forwards;animation: scaleBounceOut .5s normal forwards;-webkit-animation: scaleBounceOut .5s normal forwards;
animation: scaleBounceOut .5s normal forwards;-webkit-transform: scale(1);transform: scale(1);}

.flow{width:100%;position:relative;padding:90px 0 120px;text-align: center;}
.flow .box{width:25%;padding:13px;display:inline-block;}
.flow h2{margin-top: 0em; margin-bottom: 0.25em;}
.flow h3{ font-size:21px; margin-bottom:8px; margin-top:1em;font-weight:400;}
.flow p{font-size:18px;line-height:1.6em;margin-bottom: 1.5em;letter-spacing: 0.12em;}

.fee{width:100%;position:relative;padding:90px 0 120px;text-align: center;background:#efefef;}
.fee h2{margin-bottom:1.5em;}
.fee .inner{max-width:900px;}
.fee table{border-collapse: collapse;border-spacing: 0;width: 100%;border: solid 2px #efefef;background: #fff;}
.fee table th{border: solid 2px #efefef;font-size: 22px;font-weight: 600;padding: 15px;}
.fee table th span{ display: block;font-weight: 400;font-size: 15px;}
.fee table td{text-align: center;padding: 20px 10px;width:25%; border-left: solid 2px #efefef; border-right: solid 2px #efefef;font-size: 16px;}

.about{background-color:#010a00;position: relative;}
.about_bg{background-image: url(../img/group_bg.jpg); background-size: cover; width: 100%; position: absolute; top: 0px; left: 0px; height: 100%; z-index: 0;}
.about_main{width:100%;padding:300px 0 270px 200px;background-size:cover;text-align:left;z-index:1;position: relative;}
.about h2{font-size:80px;color:#fff;font-weight:200;margin-bottom: 1em;letter-spacing: 0.12em;}
.about p{width:80%;font-size:26px;color:#fff;font-weight:200;margin-bottom: 1.6em;letter-spacing: 0.12em;}
.about span img{vertical-align:top;}
.about a{color: #fff;font-size: 28px;font-weight: 600;}

.ani1{opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: opacity 100ms cubic-bezier(.694,0,.335,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
transition: opacity 300ms cubic-bezier(.694,0,.335,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
-o-transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1);
transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1);
transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
-webkit-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;}
.ani1.on{opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);}

.ani2{opacity: 0;
-webkit-transform: translateX(-10vw);
transform: translateX(-10vw);
-webkit-transition: opacity 100ms cubic-bezier(.694,0,.335,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
transition: opacity 300ms cubic-bezier(.694,0,.335,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
-o-transition: transform 0.8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1);
transition: transform 0.8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1);
transition: transform 0.8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1),-webkit-transform 0.8s cubic-bezier(.215,.61,.355,1);
-webkit-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
.ani2.on{opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);}

.ani3{opacity: 0;
overflow: visible;
position: relative;
box-sizing: border-box;
transform: scale(.8);}
.ani3.on{opacity: 1;
transform: scale(1);
transition: opacity 1.6s cubic-bezier(.165,.84,.44,1),transform 1.6s cubic-bezier(.165,.84,.44,1);}

.ani4 .icon_bg{-webkit-transform: scale(0);transform: scale(0);}

.ani4 .icon_img{-webkit-transform: scale(0);transform: scale(0);}

.ani4.on .icon_bg{
-webkit-animation: scaleBounceOut .5s normal forwards;
animation: scaleBounceOut .5s normal forwards;}

.ani4.on .icon_img{-webkit-animation: scaleBounceOut .5s normal forwards;animation: scaleBounceOut .5s normal forwards;}

@-webkit-keyframes scaleBounceOut {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}

@keyframes scaleBounceOut {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}

.ani4 .icon_bg.ani_icon1{-webkit-animation-delay:0s;animation-delay:0s;}
.ani4 .icon_bg.ani_icon2{-webkit-animation-delay:.4s;animation-delay:.4s}
.ani4 .icon_bg.ani_icon3{-webkit-animation-delay:.8s;animation-delay:.8s}
.ani4 .icon_bg.ani_icon4{-webkit-animation-delay:1.2s;animation-delay:1.2s}
.ani4 .icon_bg.ani_icon5{-webkit-animation-delay:1.6s;animation-delay:1.6s}
.ani4 .icon_bg.ani_icon6{-webkit-animation-delay:2.0s;animation-delay:2.0s}

.ani4 .icon_img.ani_img1{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.ani4 .icon_img.ani_img2{-webkit-animation-delay:.7s;animation-delay:.7s}
.ani4 .icon_img.ani_img3{-webkit-animation-delay:1.1s;animation-delay:1.1s}
.ani4 .icon_img.ani_img4{-webkit-animation-delay:1.5s;animation-delay:1.5s}
.ani4 .icon_img.ani_img5{-webkit-animation-delay:1.9s;animation-delay:1.9s}
.ani4 .icon_img.ani_img6{-webkit-animation-delay:2.3s;animation-delay:2.3s}


.ani4 h3{-webkit-transition: opacity .4s .4s ease-out, -webkit-transform .4s .4s ease-out;
transition: opacity .4s .4s ease-out, -webkit-transform .4s .4s ease-out;
transition: transform .4s .4s ease-out, opacity .4s .4s ease-out;
transition: transform .4s .4s ease-out, opacity .4s .4s ease-out, -webkit-transform .4s .4s ease-out;
-webkit-transform: translateY(25px);
transform: translateY(25px);
opacity: 0;}

.ani4 h3.ani_text1{transition-delay: 0.3s;}
.ani4 h3.ani_text2{transition-delay: 0.7s;}
.ani4 h3.ani_text3{transition-delay: 1.1s;}
.ani4 h3.ani_text4{transition-delay: 1.5s;}
.ani4 h3.ani_text5{transition-delay: 1.9s;}
.ani4 h3.ani_text6{transition-delay: 2.3s;}

.ani4.on h3{-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;}

.ani5{opacity: 0;
-webkit-transform: translateX(10vw);
transform: translateX(10vw);
-webkit-transition: opacity 100ms cubic-bezier(.694,0,.335,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
transition: opacity 300ms cubic-bezier(.694,0,.335,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
-o-transition: transform 0.8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1);
transition: transform 0.8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1);
transition: transform 0.8s cubic-bezier(.215,.61,.355,1),opacity 300ms cubic-bezier(.694,0,.335,1),-webkit-transform 0.8s cubic-bezier(.215,.61,.355,1);
-webkit-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;}
.ani5.on{opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);}

.ani6{opacity: 0;transform-origin: 50% 50%;
transform: scale(2);
transition: none;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-transform: scale(2);
transform: scale(2);}

.ani6.on{opacity: 1;
transform: scale(1);
transition-property: transform;
transition-duration: 1s;
transition-timing-function: cubic-bezier(.19,1,.22,1);
}

footer{transition:1s;position:relative; width:100%;text-align:center;background:#222; background-size: cover;background-position: center;background-repeat: no-repeat;padding:150px 15px;}
footer h2{color:#fff;margin-bottom:1.3em;font-size:70px;font-weight:200;margin-bottom:0.1em;padding-left: 0.2em;}
footer p{color:#ffffff;font-size:26px;font-weight:200;margin-bottom:1.5em;letter-spacing: 0.1em;}
footer button{font-size:20px;font-weight:400;padding:12px 30px;color:#000;background: #3CF737;border-radius:50px;border:none;cursor:pointer;transition:0.3s;}
footer button:hover{opacity:0.6;}
footer .select_menu{margin:0 auto;padding-left:16px;background-color:#fff;overflow:hidden;width:315px;overflow: hidden; border: 1px solid #d6d6d6; border-radius: 4px;}
footer select{-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:0;padding:13px 45px 13px 10px;border:none;width:100%;font-size:16px;border-radius:4px;box-sizing:border-box;max-width:330px;background-image: url(../img/contact_menu.svg); background-repeat:no-repeat; background-position:right center;background-size:40px;cursor: pointer;}

.concept_res{display:none;}
#contact{background:#000;}
#contact h1{text-align: center;}
#contact .contact_logo svg{width:70px;height:90px;}
#contact .contact_logo path, .logo rect{fill: #fff;}
.thanks{height:100%;padding-top: 10%;text-align:center;}
.thanks img{width:280px;}
.thanks p{color:#fff;margin-bottom:40px;}
.thanks a{color:#fff;text-decoration: underline;}
.postal{color:#fff; font-weight: 600; line-height: 48px; text-decoration: underline;}
.name_box{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
.name_box .name_boxs{width: 48%;}
.name_box .opno{opacity:0}
#postals{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
#postals small{color:#fff;line-height: 48px;font-size: 22px;padding: 0 4px;}
.postals_1{width:22%!important;}
.postals_2{width:35%!important;}

@media (max-width:1280px){

}
@media (max-width:1200px){

}

@media (max-width:1160px){
.top_box{max-width:820px;}
.top h1 img{width: 600px;}
.top_box p{font-size:16px;}


.concept p,.works p,.plan p{font-size:18px;}
.concept_img{left:initial;right:0;}
.works_img{padding-right: 30px;}
.works_text{padding-left: 30px;}
}
@media (max-width:1060px){

.logo{top: 30px;left:35px;}
.videos_text h2{font-size:42px;}
.about_main{padding: 160px 150px 140px 150px;}
.about h2{font-size: 70px;}
.about p{font-size:32px;width:100%;}
.plan{padding:70px 80px 50px;}
.icon_bg{width: 95px;height: 95px;}
.plan .icons img{margin-left: -47px;width: 94px;}
.plan .inner .plan_box h3{font-size: 19px;}
.flow{padding:90px;}
.flow .box img{width:120px;}
.flow h2{font-size: 58px;}
.flow h3{font-size:22px;}
.flow p{font-size:14px;}
footer h2{font-size:80px;}
}

@media only screen and (max-width: 813px) and (min-width: 568px){
header{}
.header_content{}

}





@media (max-width:770px){
.dis_ipd{display:block!important}
.dis_pipd{display:none!important}
.concept_res{display: block;}
.logo{ left:50%;margin-left:-30px;top:60px;position: absolute;}
.top{height:700px;}
.top_box{ padding: 30px 20px 40px;width:95%;margin-top: -80px;}
.top h2{font-size:36px;}
.on #v{background-size: 100% auto;object-fit:revert;}
.about_main{padding: 150px 90px 130px 90px;}
.about h2{font-size:62px;}
.about p{font-size: 30px;}
.fee{padding: 90px 35px 120px;}
}