.hero {
  background: url(../img/ttl1.jpg) center center / cover no-repeat;
}


.main-visual {
    text-align:left;
    position:relative;
    overflow:hidden;
    z-index:0;
}


.iologo img { 
    max-width: 140px;
}

.titlelogo {
    width:500px;
    height:450px;
    overflow: hidden;
}

.titlelogo img {
  position: absolute;
  top: -50px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}




@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1; background:#000;}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1; background:#000;}
}











.iocap {text-align:center; font-size:250%; line-height:150%; font-family: 'メイリオ','Arimo', sans-serif; font-weight:bold; color:#000;}

.features-list h1{font-size:200%;}
.features-list p{font-size:150%;}

.mimg{padding:0px 0px 0px 0px; text-align:right;}
.mimgg {padding:30px 0px;}
.mimg img,.mimgg img{width:80%;}
.mall{display:block; float:left;}
.mall img{height:60px; margin-left:10px; float:right;}

.jeform{padding-bottom:20px; font-family: 'メイリオ','Archivo Black', sans-serif;}
.jeform input{font-size:150%; color:#000;}

.mform{ text-align:center; font-size:150%; margin:-30px 0px 10px 0px; padding-bottom:20px; font-family: 'メイリオ','Archivo Black', sans-serif;}
.mform input{color:#000; font-size:90%;}


.lastform{font-size:200%; margin:20px 0px; padding-bottom:40px; font-family: 'メイリオ','Archivo Black', sans-serif;}
.lastform input{color:#000; font-size:90%;}

#iwidth{width:50%; padding:5px 10px; margin:2px 0px;}
input#submit{width:auto; padding:0px 15px;}




@media screen and (min-width: 768px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 768px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}

@media screen and (max-width: 400px){
.features-slider .flickity-page-dots {
    margin-top: 10px;
}
}





/*画面の横幅が768pxより小さい場合*/
@media screen and ( max-width:768px ){


.hero {
  background: url(../img/ttl2.jpg) center center / cover no-repeat;
}
.main-visual {
    max-height:100%;
    background-size: cover;
    text-align:left;
    position:relative;
    overflow:hidden;
    z-index:0;
}

.titlelogo {
    width:500px;
    height:350px;
    overflow: hidden;
}

.titlelogo img {
  width:80%;
}






.iocap {text-align:center; font-size:160%; line-height:150%;}

.features-list h1{font-size:200%;}
.features-list p{font-size:150%;}

.jeform{padding-bottom:20px; margin-top:0px;}
.jeform input{font-size:120%; color:#000;}






.lastform{font-size:120%; margin:20px 0px; padding-bottom:40px;}
.lastform input{color:#000; font-size:90%;}

#iwidth{width:auto; padding:0px 5px;}
input#submit{width:auto; padding:0px 5px;}



.hero h1 {
    margin:30px 0 0 0;
    font-size:220%;
}
.hero h2 {
    font-size:140%;
}

.heros p {
    font-size:120%;
}


.features-list {
    padding:40px 0
}





.flt2 {
    padding:20px 0;
}
.flt2 img{
    width:50%;
}
.flt2-flag img{
    width:15%;
}



.screenshots-intro {
    padding:50px 0 20px;
    text-align:center;
}
.screenshots-intro h1 {
    margin:20px 0 10px 0;
    font-size: 250%;
}
.screenshots-intro p {
    margin:20px;
}

.screenshots-intro strong {
    font-size:160%;
}
.screenshots-intro img{
    margin-bottom:50px;
    width:80%;
}

.download {
    padding:40px 0;
    background-color: #000060;
}
.download h1 {
    margin: 0 0 15px 0;
    color: #fff;
    font-weight: 400;
    font-size:200%;
}

footer {
    padding:40px 0
}

.screenshots-intro .container{border-bottom:none;}

.screenshots ul li {
    float: left;
    min-height: 100%;
    width:25%;
    background-color: #000;
    list-style: none;
}

.container img1{width:40%;}

.mimg {padding:0px; margin:15px 0px; text-align:center;}
.mimgg {padding:0px; margin:15px 0px; text-align:center; display:none;}
.mimg img,.mimgg img{width:80%;}
.mall{display:block; float:none;}
.mall img{height:40px; margin:5px 0px; float:none; display:block;}
.mallu{display:block; padding:5px 0px; margin:0px 0px -30px 0px;}
}