@charset "utf-8";
/* popup window unique style */

.appWrap{
    position: relative;
}
.zoomiconWrap{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6%;
}
@media screen and (max-width: 768px) {
    .zoomiconWrap{
        width: 10%;
    }
}
#zoomout{
    display: none;
}
#zoomin{
    display: none;
    margin-bottom: 10px;
}
.zoomicon img{
    fill:#eb5505;
    width: 38px;
    height: 38px;
}
.zoomiconWrap .zoomicon:hover img{
    opacity: 0.8;
    cursor: pointer;
}

#deviceImage, .deviceImageChange{
    position: relative;
    max-width: 200%;
    height: auto;
    left: -50%;
    width: auto;
}
.deviceImageLoad.change{
    display: none;
}
.displayWrap{
    display: table;
    table-layout: fixed;
    position: absolute;
    width: 100%;
    top: 17.5%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}
.zoom .displayWrap .deviceImage{
    display: none;
}
.zoom .displayWrap{
    top: 0;
    position: relative;
    padding: 0;
}

.zoom .displayWrap .changeButton{
    width: 10%;
}
#popupContentWrap .zoomicon{
    width: 10%;
    height: 10%;
    display: inline-block;
    vertical-align: middle;
}
#popupContentWrap .switchBox{
    padding: 0 2%;
    font-size: 12px;
}
@media screen and (max-width: 768px) {
    #popupContentWrap .zoomicon img{
        width: 28px;
        height: 28px;
    }
}
@media screen and (max-width: 380px) {
    #popupContentWrap .zoomicon img{
        width: 25px;
        height: 25px;
    }
}

#popupContentWrap label{
    margin: 0 5px;
}
#app_help_next,
#app_help{
    -webkit-appearance: none;
    background-color: #E6E6E6;
    border-radius: 6px;
    padding: 1% 3%;
    border: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #333;
    margin: 0 5px;
}
#app_help_next:hover,
#app_help:hover{
    background-color: #eb5505;
    color: #fff;
}
#app_help{
    margin-left: 1.5em;
}
.displayWrap img{
    vertical-align: top;
    display: block;
}
.display{
    display: table-cell;
    width: 51.5%;
    height: 100%;
    border: solid 1px #000;
}
.zoom .display{
    width: 30%;
}
.changeButton{
    display: table-cell;
    width: 36.5%;
    height: 100%;
}
.changeButton img{
    width: 50px;
    cursor: pointer;
}
.changeButton.prev img{
    position: absolute;
    left: 5%;
}
.changeButton.next img{
    position: absolute;
    right: 5%;
}
.changeButton img:hover{
    opacity: 0.8;
}
@media screen and (max-width: 768px) {
    .changeButton img{
        width: 30px;
    }
}
#prevpage{
    display: none;
}
.tapArea{
    position: relative;
}
.tapHover{
    background-color: #000000;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.bodyWrap, .footerWrap{
    position: relative;
}
.appIconWrap{
    position: absolute;
    margin: auto;
    width: 95%;
    height: 40%;
    letter-spacing: -.4em;
    left: 0;
    right: 0;
    bottom: 0;
}
.appIconArea,.appFolderArea{
    background-color: #000;
    opacity: 0;
    width: 25%;
    height: 50%;
    display: block;
    letter-spacing: normal;
    float: left;
    cursor: pointer;
}
.appSpacer{
    width: 25%;
    height: 50%;
    display: inline-block;
    float: left;
}
.appIconWrap{
    display: none;
}
.appIcon1{
    display: block;
}
.apptitle{
    text-align: center;
    padding-bottom: 15px;
}
.appIcon{
    width: 20%;
}
.appName{
    display: inline-block;
    padding: 0 20px;
}
.appText{
    width: 80%;
    margin: 0 auto;
    font-size: 14px;
}
.appText p{
    padding-bottom: 0.5em;
}
.appText a{
    padding-bottom: 5%;
}
.displayWrap .subFolder{
    display: none;
    width: 80%;
    position: absolute;
    top: 20%;
    right: 5%;
    z-index: 9998;
}
.appSubIconWrap{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 95%;
    letter-spacing: -.4em;
}
.appSubIconWrap .appIconArea{
    background-color: #000;
    opacity: 0;
    width: 33%;
    height: 100%;
    display: inline-block;
}
.appSubIconWrap.fourRow{
    height: 95%;
}
.appSubIconWrap.threeRow{
    height: 92%;
}
.appSubIconWrap.twoRow{
    height: 90%;
}

.fourRow .appIconArea{
    height: 25%;
}
.threeRow .appIconArea{
    height: 33%;
}
.twoRow .appIconArea{
    height: 50%;
}
.oneRow .appIconArea{
    height: 100%;
}
.appFooterIconWrap{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 94%;
    height: 95%;
    letter-spacing: -.4em;
    z-index: 9996;
    margin: 0 auto;
}

#unique1{
    top: 8%;
    margin: 0 auto;
    height: 12%;
}
#unique1 .appIconArea{
    width: 100%;
    height: 100%;
}
#unique2{
    top: 6%;
    margin: 0 auto;
    height: 15%;
    text-align: right;
    width: 84%;
}
#unique2 .appIconArea{
    width: 44%;
    height: 100%;
    float: right;
}

#Folder321{
    width: 50%;
    bottom: 2%;
    top: auto;
    right: auto;
    left: 6.5%;
}
#Folder322{
    right: auto;
    left: 6.5%;
    top: 21%;
}
#Folder323{
    top: 45%;
}
#Folder321 .appSubIconWrap{
    height: 80%;
}
#Folder321 .appSubIconWrap .appIconArea{
    width: 50%;
}
#popupBackground,#popupSubBackground{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9997;
}
#popupHelpWrap,
#popupWrap{
    display: none;
    border: solid 6px #eae9e9;
    background-color: #ffffff;
    width: 70%;
    height: 65%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 2px 2px 10px;
    z-index: 9999;
}
#popupHelpWrap{
    max-width: 500px;
    max-height: 725px;
    width: 85%;
    height: 90%;
    font-size: 14px;
}

#popupWrap.half{
    height: 40%;
}
@media screen and (max-width: 768px) {
    #popupWrap{
        height:95%;
        width: 80%;
    }
    .zoom #popupWrap{
        height:95%;
        width: 80%;
    }
    #popupWrap.half{
        height: 50%;
    }
    .zoom #popupWrap.half{
        height: 50%;
    }
}
#popupWrap .popupCloseWrap,
#popupHelpWrap .popupCloseWrap{
    text-align: right;
}

#popupWrap .popupCloseWrap #popupClose,
#popupHelpWrap .popupCloseWrap #popupHelpClose{
    width: auto;
    padding: 10px 10px 10px 10px;
    cursor: pointer;
}
#popupWrap .popupCloseWrap div,
#popupHelpWrap .popupCloseWrap div {
    position: relative;
    display: inline-block;
}
#popupWrap .popupCloseWrap div:hover,
#popupHelpWrap .popupCloseWrap div:hover{
    background-color: #d1d1d1;
}
#popupContentWrap,
#popupHelpContentWrap{
    overflow-y: auto;
    height: 90%;
}

	#popupHelpContentWrap .popup-help {
		padding:0 5%;
		text-align:center;
	}

.applist-warp{
    letter-spacing: -.4em;
    max-width: 980px;
	width:100%;
}
.applist-warp ul{
    width: 96%;
    margin: 0 auto;
}
.applist{
    display: inline-block;
    width: 50%;
    letter-spacing: normal;
    vertical-align: top;
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid #ddd;
    letter-spacing: -.4em;
}
.applist:nth-child(odd){
    border-right: 1px solid #ddd;
    margin-right: -1px;
}
.applist:nth-child(even){
    border-left: 1px solid #ddd;
}
.applist:nth-child(1), .applist:nth-child(2){
    border-top: none;
}
.applist .apptitle{
    text-align: center;
    padding-bottom: 15px;
    display: inline-block;
    width: 30%;
    vertical-align: top; 
}
.applist .appText{
    letter-spacing: normal;
    width: 65%;
    margin: 0 auto;
    font-size: 14px;
    display: inline-block;
}
.applist .appName{
    padding: 0 0 0.25em 0;
    font-size: 1.25em;
    font-weight: bold;
}
.applist .appIcon{
    width: auto;
    max-width: 100%;
    padding: 0 20%;
}
.applist .appText a{
    padding-bottom: 1em;
    display: inline-block;
}
@media screen and (max-width: 768px) {
    .applist{
        display: block;
        width: 100%;
        padding-top: 1em;
        padding-bottom: 1em;
        letter-spacing: -.4em;
    }
    .applist:nth-child(2){
        border-top: 1px solid #ddd;
    }
    .applist:nth-child(odd){
        border-right: none;
    }
    .applist:nth-child(even){
        border-left: none;
    }
    .applist .appName{
        padding: 0 0 0.25em 0;
    }
    .applist .appIcon{
        padding: 0 10%;
    }
    .applist .appText{
        letter-spacing: normal;
        width: 69%;
    }
    .appText p{
        padding-bottom: 0.5em;
    }
    .applist.appEmpty{
        display:none;
    }
}
#gotop img{
    margin: 0;
    max-width: 100%;
    vertical-align: -7%;
}

.popup-help .popup-title{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0.5em;
}
.popup-help .item-title{
    color: #eb5505;
    font-weight: bold;
    font-size: 14px;
}

	.popup-help .item-title + p,
	.popup-help img {
		margin-bottom:1em;
	}

.popup-help p{
	font-size: 13px;
	text-align: left;
}
.popup-help dt{text-align: left; background-color: #fdeee6; padding: 0.25em 1em;}
.popup-help dt span{display:inline;}
.popup-help dt span + img{
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
    margin-left: 0.5em;
}
.popup-help dd{text-align: left; padding: 0.5em 1em 0.5em 1em;}
.popup-help .cell-wrap{
    letter-spacing: -.4em;
}
.popup-help .cell{
    vertical-align: top;
    display: inline-block;
    letter-spacing: normal;
    margin-bottom: 1.5em;
}
.popup-help .cell.left{
    width: 45%;
    margin-left: 5%;
    margin-right: 10%;
}
.popup-help .cell.right{
    width: 35%;
}
@media screen and (max-width: 768px) {
    .popup-help .cell.right{
        width: 35%;
    }
}
.popup-help .cell.right img{
    max-width: 100%;
    width: auto;
    height: auto;
}
.popup-help .switch_icon{
    width: 20px;
    height: 20px;
}

/* CDS Uniq↓ */
p.app-bul:before {
	content: "\30FB";
	font-size: 100%;
}
p.app-bul {
	margin-left: 1em;
	text-indent: -1em;
}
/* CDS Uniq↑ */