@charset "utf-8";
.function{
    width: 6%;
    position: absolute;
    display: block;
    cursor: pointer;
}
.switch_icon{
    width: 4%;
    height: 4%;
}

.funcIcon{
    padding-top: 2.5%;
    padding-bottom: 2em;
}

.apptitle > .funcIcon{
    padding-bottom: 2em;
}

.markIcon{
    width: auto;
    height: 1.5em;
}

.switch_icon .point0{fill:#DF5411;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
.switch_icon .point1{fill:#FFFFFF;stroke:#DF5411;stroke-width:2;stroke-miterlimit:10;}

.function .point0{fill:#DF5411;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
.function .point1{fill:#FFFFFF;stroke:#DF5411;stroke-width:2;stroke-miterlimit:10;}
.function:hover .point0{fill:#FFFFFF;stroke:#DF5411;}
.function:hover .point1{fill:#DF5411;stroke:#FFFFFF;}


@-webkit-keyframes loaderSprite {
    from { background-position: 0px; }
    to { background-position: -2000px; }
}

@-moz-keyframes loaderSprite {
    from { background-position: 0px; }
    to { background-position: -2000px; }
}

@keyframes loaderSprite {
    from { background-position: 0px; }
    to { background-position: -2000px; }
}

.ieloader {
    display: none;
    width: 100px;
    height: 100px;
    background-image: url("../images/common/icon/loader.png");
    -webkit-animation: loaderSprite 1s steps(20, end) infinite;
    -moz-animation: loaderSprite 1s steps(20, end) infinite;
    animation: loaderSprite 1s steps(20, end) infinite;
    background-color: #000;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@media screen\0 {
    #Loader{
        display: none;
    }
    .ieloader {
        display: block;
    }
}
@media screen and (min-width:0\0) { 
    #Loader{
        display: none;
    }
    .ieloader {
        display: block;
    }
}

@supports (-ms-accelerator:true) {
    #Loader{
        display: none;
    }
    .ieloader {
        display: block;
    }
}

/*ディスプレイ*/
#function01{ display: block; top: 27%; left: 47%;}
.plus #function01{ top: 27%; left: 47%;}
.ultra #function01{ top: 27%; left: 47%;}

/*フロントカメラ、近接・照度センサー、受話口／スピーカー*/
#function02{ display: block; top: 11%; left: 47%;}
.plus #function02{ top: 11%; left: 47%;}
.ultra #function02{ top: 11%; left: 47%;}

/*指紋センサー*/
#function03{ display: block; top: 38%; left: 47%;}
.plus #function03{ top: 38%; left: 47%;}
.ultra #function03{ top: 38%; left: 47%;}

/*リアカメラ、フラッシュ／ライト、マイク（背面）、レンジAFセンサー*/
#function04{ display: block; top: 67.6%; left: 36.6%;}
.plus #function04{ top: 67.6%; left: 36.6%;}
.ultra #function04{ top: 68%; left: 36.9%;}

/*NFC／FeliCa®位置*/
#function05{ display: block; top: 67.5%; left: 58%;}
.plus #function05{ top: 68.5%; left: 51%;}
.ultra #function05{ top: 68.5%; left: 51%;}

/*ワイヤレス充電位置*/
#function06{ display: block; top: 79%; left: 47.0%;}
.plus #function06{ top: 79%; left: 47.0%;}
.ultra #function06{ top: 79%; left: 47.0%;}

/*送話口／マイク（上部）、排気口*/
#function07{ display: block; top: 1.2%; left: 52.5%;}
.plus #function07{ top: 1.2%; left: 52.5%;}
.ultra #function07{ top: 1.2%; left: 52.5%;}

/*音量ボタン*/
#function08{ display: block; top: 18.3%; left: 63.3%;}
.plus #function08{ top: 18.3%; left: 63.3%;}
.ultra #function08{ top: 18.3%; left: 63.3%;}

/*サイドボタン*/
#function09{ display: block; top: 23.6%; left: 63.3%;}
.plus #function09{ top: 23.6%; left: 63.3%;}
.ultra #function09{ top: 23.6%; left: 63.3%;}

/*USB Type-C接続端子、送話口／マイク（下部）、SIMカードトレイ、トレイイジェクトホール*/
#function10{ display: block; top: 52.5%; left: 43.8%;}
.plus #function10{ top: 52.5%; left: 43.8%;}
.ultra #function10{ top: 52.5%; left: 49.8%;}

/*スピーカー*/
#function11{ display: block; top: 52.5%; left: 54%;}
.plus #function11{ top: 52.5%; left: 54%;}
.ultra #function11{ top: 52.5%; left: 36.5%;}

/*Sペン*/
.ultra #function12{ display: block; top: 30%; left: 15.5%;}


ul.device-selector {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 20px auto 85px;
    z-index: 10;
}

    ul.device-selector li {
        position: relative;
        display: block;
        float: left;
        width: 33.33%;
        vertical-align: middle;
        text-align: center;
        font-size: 16px;
    }

        ul.device-selector li:first-child {
            border-left: 1px solid #d1d1d1;
        }
        ul.device-selector li:first-child.active {
            border-left: none;
        }

        ul.device-selector li span {
            cursor: pointer;
            color: #333;
            display: block;
            line-height: 45px;
            height: 45px;
            border-top: 1px solid #d1d1d1;
            border-right: 1px solid #d1d1d1;
            border-bottom: 1px solid #d1d1d1;
        }


        ul.device-selector li.active span:after,
        ul.device-selector li:hover span:after {
            width: 100%;
        }

        ul.device-selector li.active span {
            background-color: #fdeee6;
            border: 1px solid #eb5505;
        }

@media screen and (max-width: 980px) {
    ul.device-selector li {
        font-size: 15px;
    }

        ul.device-selector li.link-qanda {
            font-size: 13px;
        }
}

@media screen and (max-width: 768px) {

    ul.device-selector p {
        margin: 0 1.96%;
    }

        ul.device-selector li {
            width:33.33%;
            font-size: 14px;
        }

            ul.device-selector li:first-child a {
                border-left: none;
            }

            ul.device-selector li:nth-child(2n) a {
                border-right: none;
            }
}

@media screen and (max-width: 360px) {
    ul.device-selector li {
        font-size: 11px;
    }
}