@charset "utf-8";

/* key visual */
#keyVisual {
    position: relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-content: flex-end;
    width: 100%;
    min-width: 1000px;
    height: 520px;
    background: url("../images/index/topview.jpg") no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
#kvLogo {
    position: relative;
    width: 1000px;
    height: 44px;
    text-align: center;
    margin: 0 auto 10px;
}
#kvLogo img {
    width: 273px;
    height: 49px;
}
#kvCatch {
    position: relative;
    width: 100%;
    padding: 10px 0;
	background-color: rgba(0,0,0,0.85);
}
#kvCatch p {
    width: 1000px;
	font-size: 15px;
	text-align: center;
    color: #fff;
    margin: 0 auto 16px;
}
#kvCatch p:last-child {margin-bottom: 0;}

#subCatch {
    position: relative;
    width: 100%;
    padding: 20px 0;
	background-color: #f5f5f5;
}
#subCatch p {
    width: 800px;
	font-size: 15px;
	color: #555;
    margin: 0 auto;
}



/* apps */
#apps {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}
#appsInner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    justify-content: center;
    width: 100%;
    margin: 30px 0;
}
#appsInner div:nth-child(2) {margin-left: 30px;}

/* youtube */
.iframe-wrap {
  text-align: center;
  width: 66.12%;
  padding-bottom: 37.19%;
  height: 0px;
  position: relative;
  margin: 30px auto;
}

.iframe-wrap iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Features */
.itemFeatures {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: space-evenly;
}
.eachFeatures {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width: 150px;
    margin: 30px 80px;
}
.eachFeatures .icon {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
}
.eachFeatures .txt {text-align: center;}
/* How to use */
.itemHowto {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding: 36px 0 50px
}
.itemHowto .attention {
    position: relative;
    width: 100%;
    color: #aaa;
    font-size: 14px;
    text-align: center;
    margin: 20px 0;
}
.eachHowto {
    position: relative;
    width: 390px;
    padding: 20px 30px;
}
.eachHowto:nth-child(odd) {
    border-right: dashed 1px #ccc;
    margin-left: 50px;
}
.eachHowto .ttl {
    font-size: 20px;
    margin-bottom: 16px;
}
.eachHowto .att {
	color: #aaa;
    margin-bottom: 10px;	
}
.eachHowto .txt {
    margin-bottom: 10px;	
}
/* News */
.itemNews {
    position: relative;
    padding: 36px 100px 50px;
}
.itemNews .more {
    width: 800px;
    text-align: right;
    margin: 0 auto;
}
.eachNews {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
}
.eachNews .date {
    position: relative;
    width: 150px;
    margin-bottom: 16px;
}
.eachNews .ttl {
    position: relative;
    width: 650px;
    margin-bottom: 16px;
}
/* Other Apps */
.itemOtherapps {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: space-evenly;
}
.eachOtherapps {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width: 200px;
    margin: 30px 60px;
}
.eachOtherapps .icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}
.eachOtherapps .txt {
    margin: 0 auto 20px;
	text-align: center;
}

.eachOtherapps .appstore {
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	width: 120px;
}

.eachOtherapps .googleplay {
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	width: 120px;
}

/* Banner */
.itemBanner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: space-evenly;
}
.eachBanner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width: 400px;
    margin: 10px 10px;
}
.eachBanner .img {
    position: relative;
    width: 400px;
    height: 150px;
    margin: 0 auto;
}


/* camera select */
#products_wrapper {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: space-around;
}

@media only screen and (min-width:641px) and (max-width:999px) {
    #keyVisual {min-width: inherit;}
    #kvLogo {
        position: relative;
        width: 100%;
        margin: 0 0 20px;
    }
    #kvCatch p {width: 90%;}
	#subCatch p {width: 85%;}
    #apps {
        width: 78%;
        margin: 0;
    }
    .itemFeatures {justify-content: center;}
    .itemHowto {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        justify-content: center;
    }
    .eachHowto {
        margin: 0 auto;
        border-bottom: dashed 1px #ccc;
    }
    .eachHowto:nth-child(odd) {
        border-right: none;
        margin: 0 auto;
    }
    .itemNews .more {
        width: 90%;
        text-align: right;
    }
    .eachNews .date {width: 20%;}
    .eachNews .ttl {
        width: 70%;
        padding-left: 12px;
    }
    .itemOtherapps {justify-content: center;}
}
@media only screen and (max-width: 640px) {
    #keyVisual {
        min-width: inherit;
        height: 120vw;
    }
    #kvLogo {
        position: relative;
        width: 100vw;
        height: 11.73vw;
        margin: 0 0 3vw;
    }
    #kvLogo img {
        width: 67.18vw;
        height: 11.73vw;
    }
    #kvCatch {padding: 3vw 0;}
    #kvCatch p {
        width: 90%;
        margin: 0 auto 3vw;
    }
    #subCatch {	padding: 3vw 0;	}
    #subCatch p {
        width: 85%;
        margin: 0 auto;
    }
    #apps {
        width: 100%;
        margin: 0;
    }
    #appsInner {margin: 6vw 0;}
    #appsInner div:nth-child(2) {margin-left: 3vw;}
    .appstore {
        width: 30vw;
        height: 10vw;
    }
    .googleplay {
        position: relative;
        width: 34vw;
        height: 10vw;
    }
	.iframe-wrap {
		width: 100%;
		padding-bottom: 56.25%;
	}
    .itemFeatures {justify-content: center;}
    .eachFeatures {
        width: 40vw;
        margin: 6vw 3vw;
    }
    .eachFeatures .icon {
        width: 30vw;
        height: 30vw;
        margin: 0 auto 2vw;
    }
    .itemHowto {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        justify-content: center;
        padding: 3vw 0;
    }
    .itemHowto .attention {
        position: relative;
        width: 90%;
        color: #aaa;
        font-size: 3vw;
        text-align: center;
        margin: 3vw auto;
    }
    .eachHowto {
        width: 90%;
        margin: 0 auto;
        padding: 3vw;
        border-bottom: dashed 1px #ccc;
    }
    .eachHowto:nth-child(odd) {
        border-right: none;
        margin: 0 auto;
    }
    .eachHowto .ttl {
        font-size: 5vw;
        margin-bottom: 2vw;
    }
    .itemNews {padding: 3vw;}
    .itemNews .more {
        width: 94%;
        margin: 0 auto;
    }
    .eachNews .date {
        width: 20%;
        margin-bottom: 2vw;
    }
    .eachNews .ttl {
        width: 70%;
        margin-bottom: 2vw;
        padding-left: 2vw;
    }
    .itemOtherapps {justify-content: center;}
    .eachOtherapps {
        width: 40vw;
        margin: 6vw 3vw;
    }
    .eachOtherapps .icon {
        position: relative;
        width: 30vw;
        height: 30vw;
        margin: 0 auto 2vw;
    }
}