@charset "utf-8";

.fw .mainContents{
    background: #F6F6F6;
}

/* kv-area */
.kv-area{
    text-align: center;
    margin: 0 auto 60px;
}
@media screen and (max-width:768px){
    .kv-area{
        text-align: center;
        margin: 0 auto 13.33vw;
    }
}


/* enjoy-box */
.enjoy-box{
    max-width: 728px;
    width: 100%;
    margin: 0 auto 60px;
    border: 1px solid #09f;
    padding: 30px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.enjoy-box .img{
    margin-right: 20px;
}
.enjoy-box .text-large{
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
}
.enjoy-box .text{
    font-size: 15px;
    line-height: 1.8;
    margin: 20px 0 0;
}
@media screen and (max-width:768px){
    .enjoy-box{
        max-width: 89.33vw;
        margin: 0 auto 13.33vw;
        border: 0.26vw solid #09f;
        padding: 27.46vw 5.33vw 8vw;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .enjoy-box .img{
        margin-right: 4vw;
        max-width: 34.66vw;
        width: 100%;
    }
    .enjoy-box .text-large{
        font-size: 4.26vw;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 8vw;
    }
    .enjoy-box .text{
        font-size: 3.2vw;
        margin: 0;
    }
}


/* deviceArea */
.deviceArea{
    padding-bottom: 70px;
}
.deviceArea .annotation-list{
    margin-top: 15px;
}
.deviceArea .annotation-list li{
    font-size: 12px;
    line-height: 1.8;
    position: relative;
    padding-left: 1.2em;
}
.deviceArea .annotation-list li::before{
    content: '※';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
.deviceArea .overview-text{
    font-size: 13px;
    line-height: 1.8;
}
.deviceArea .flex-list{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 42px auto 41px;
}
.deviceArea .flex-list .flex-box{
    max-width: 495px;
    width: calc(100%/2 - 15px);
    border-radius: 10px;
    border: 1px solid #09F;
    margin-right: 30px;
}
.deviceArea .flex-list .flex-box:nth-child(2n){
    margin-right: 0;
}
.deviceArea .flex-list .flex-box:nth-child(n+3){
    margin-top: 30px;
}
.deviceArea .flex-list .flex-box p{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.42;
}
.deviceArea .flex-list .flex-box.type01 p.text{
    background: #09F;
    border-radius: 10px 10px 0 0;
    padding: 17px 40px 15px;
}
.deviceArea .flex-list .flex-box.type01 ul.items{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 38px 18px;
}
.deviceArea .flex-list .flex-box.type01 ul.items li{
    margin-top: 10px;
}
.deviceArea .flex-list .flex-box.type01 ul.items li:not(:last-child){
    margin-right: 30px;
}
.deviceArea .flex-list .flex-box.type01 .items li label input{
    margin: 0;
    width: 20px;
    height: 20px;
    vertical-align: sub;
}
.deviceArea .flex-list .flex-box.type01 .items li label span{
    display: inline-block;
    color: #fff;
    font-size: 15px;
    line-height: 1.17;
    background: #00ABEC;
    padding: 2px 4px 3px;
    margin-left: 8px;
    border-radius: 2px;
}

/* flex-box.type02 */
.deviceArea .flex-list .flex-box.type02{
    background: #09F;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 35px 35px 40px;
}
.deviceArea .flex-list .flex-box.type02 .item-select{
    max-width: 237px;
    width: 100%;
}
.deviceArea .flex-list .flex-box.type02 .item-select .item-list{
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 12px 34px 12px 28px;
    font-size: 15px;
    line-height: 1.6;
    color: #09F;
    border-radius: 4px;
    border: none;
    background-image: url(/service/portal/kiki/common/img/icon_select_arrow.png);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-color: #fff;
    cursor: pointer;
    white-space: inherit;
}
.deviceArea .flex-list .flex-box.type02 .item-input{
    max-width: 237px;
    width: 100%;
}
.deviceArea .flex-list .flex-box.type02 .item-input input{
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 12px 15px 12px 28px;
    font-size: 15px;
    line-height: 1.6;
    color: #999;
    border-radius: 4px;
    border: none;
}
.deviceArea .item-list::part(listbox) {
    border: none;
    height: 120px;
    margin-top: 8px;
    overflow: auto;
    padding: 8px 4px;
}
.deviceArea .result-text{
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
}
.deviceArea .result-box{
    margin-top: 20px;
    background: #F0F0F0;
}
.deviceArea .result-box table.result-list{
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}
.deviceArea .result-box table.result-list thead th{
    background: #222;
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    padding: 13px 11px;
}
.deviceArea .result-box table.result-list thead th:nth-child(1) {
    max-width: 652px;
    width: 100%;
}
.deviceArea .result-box table.result-list thead th.table-tag{
    line-height: 1.17;
}
.deviceArea .result-box table.result-list thead th.table-tag span{
    display: inline-block;
    background: #00ABEC;
    border: 2px solid #fff;
    border-radius: 2px;
    padding: 2px 2px 3px;
}
.deviceArea .result-box table.result-list tbody td{
    background: #E0EEF8;
    text-align: center;
    padding: 20px;
    min-width: 90px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}
.deviceArea .result-box table.result-list tbody td:nth-child(1){
    background: #fff;
    text-align: left;
}
.deviceArea .result-box table.result-list tbody td ul.table-category{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.deviceArea .result-box table.result-list tbody td ul.table-category li.new{
    background: #F40034;
    color: #fff;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    display: inline-block;
    padding: 4px;
}
.deviceArea .result-box table.result-list tbody td ul.table-category li:not(:last-child){
    margin-right: 20px;
}
/* .deviceArea .result-box table.result-list tbody {
    display: none;
}
.deviceArea .result-box table.result-list tbody.on {
    display: block;
} */
.deviceArea .result-box table.result-list tbody td .product-name{
    margin-top: 15px;
    display: inline-block;
}

.deviceArea #result-navi{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.deviceArea #page_number{
    display: flex;
    justify-content: center;
    align-items: center;
}
.deviceArea #page_number li:not(:last-child){
    margin-right: 8px;
}
.deviceArea #result-navi #page_after{
    margin-left: 19px;
}
.deviceArea #result-navi #page_before{
    margin-right: 19px;
}
.deviceArea #result-navi #page_after,
.deviceArea #result-navi #page_before {
    display: flex;
}
.deviceArea #result-navi #page_after li:not(:last-child),
.deviceArea #result-navi #page_before li:not(:last-child){
    margin-right: 19px;
}
#page_next,
#page_prev {
    cursor: pointer;
}
#page_next.disabled,
#page_prev.disabled {
    pointer-events: none;
    cursor: inherit;
}
.deviceArea #page_number li{
    color: #000;
    background: none;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.deviceArea #page_number li.current_page{
    color: #fff;
    background: #09F;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: inherit;
    pointer-events: none;
}
#page_before li#page_dot,
#page_after li#page_dot {
	border:none !important;
	cursor: default !important;
	display:none;
}
@media screen and (max-width:768px){
    .deviceArea{
        padding-bottom: 18.66vw;
    }
    .deviceArea .annotation-list{
        margin-top: 4vw;
    }
    .deviceArea .annotation-list li{
        font-size: 3.2vw;
    }
    .deviceArea .overview-text{
        font-size: 3.46vw;
    }
    .deviceArea .flex-list{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 8.53vw auto 10.66vw;
    }
    .deviceArea .flex-list .flex-box{
        max-width: none;
        width: calc(100%/2 - 2vw);
        border-radius: 2.66vw;
        border: 0.26vw solid #09F;
        margin-right: 4vw;
    }
    .deviceArea .flex-list .flex-box:nth-child(2n){
        margin-right: 0;
    }
    .deviceArea .flex-list .flex-box:nth-child(n+3){
        margin-top: 5.33vw;
    }
    .deviceArea .flex-list .flex-box p{
        font-size: 4.26vw;
        text-align: center;
    }
    .deviceArea .flex-list .flex-box.type01 p.text{
        border-radius: 2.66vw 2.66vw 0 0;
        padding: 2.13vw;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items{
        padding: 1.6vw 2.66vw 4.26vw;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li{
        width: 14.93vw;
        margin-top: 2.66vw;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li:not(:last-child){
        margin-right: 0;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li:nth-child(odd){
        margin-right: 0;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li:nth-child(1) {
        order: 1;
        margin-right: 4vw;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li:nth-child(2) {
        order: 2;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li:nth-child(3) {
        order: 4;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li:nth-child(4) {
        order: 3;
        margin-right: 4vw;
    }
    .deviceArea .flex-list .flex-box.type01 ul.items li label{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .deviceArea .flex-list .flex-box.type01 .items li label input{
        width: 4.26vw;
        height: 4.26vw;
    }
    .deviceArea .flex-list .flex-box.type01 .items li label span{
        font-size: 3.2vw;
        line-height: 1.25;
        padding: 0.53vw 1.06vw;
        margin-left: 2.13vw;
        border-radius: 0.53vw;
    }

    /* flex-box.type02 */
    .deviceArea .flex-list .flex-box.type02{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 1.6vw;
        min-height: 42.66vw;
    }
    .deviceArea .flex-list .flex-box.type02 .item-select{
        max-width: 34.66vw;
        margin-top: 4vw;
    }
    .deviceArea .flex-list .flex-box.type02 .item-select .item-list{
        padding: 2.93vw;
        padding-right: 8vw;
        font-size: 4.26vw;
        line-height: 1.5;
        border-radius: 1.06vw;
        background-image: url(/service/portal/kiki/common/img/icon_select_arrow.png);
        background-repeat: no-repeat;
        background-position: right 4vw center;
        text-align: center;
    }
    .deviceArea .flex-list .flex-box.type02 .item-input{
        max-width: 34.66vw;
        margin-top: 4vw;
    }
    .deviceArea .flex-list .flex-box.type02 .item-input input{
        padding: 2.93vw;
        font-size: 4.26vw;
        line-height: 1.5;
        border-radius: 1.06vw;
        text-align: center;
    }
    .deviceArea .result-text{
        font-size: 3.46vw;
    }
    .deviceArea .result-box{
        margin-top: 4vw;
    }
    .deviceArea .result-box table.result-list{
        border-spacing: 0.53vw;
    }
    .deviceArea .result-box table.result-list thead th{
        font-size: 3.2vw;
        padding: 5.86vw 1.33vw;
    }
    .deviceArea .result-box table.result-list thead th.table-tag{
        line-height: 1.25;
    }
    .deviceArea .result-box table.result-list thead th.table-tag span{
        border: 0.26vw solid #fff;
        border-radius: 0.53vw;
        padding: 0.26vw 0.8vw;
    }
    .deviceArea .result-box table.result-list tbody td{
        padding: 2.66vw 2.13vw;
        min-width: 11.2vw;
        font-size: 3.2vw;
        line-height: 1.4;
    }
    .deviceArea .result-box table.result-list tbody td:nth-child(1){
        text-align: center;
    }
    .deviceArea .result-box table.result-list tbody td ul.table-category{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
    }
    .deviceArea .result-box table.result-list tbody td ul.table-category li.new{
        border-radius: 0.53vw;
        font-size: 2.93vw;
        padding: 1.06vw;
    }
    .deviceArea .result-box table.result-list tbody td ul.table-category li:not(:last-child){
        margin-right: 0;
        margin-bottom: 2.4vw;
    }
    .deviceArea .result-box table.result-list tbody td .product-name{
        margin-top: 2.4vw;
    }

    .deviceArea #result-navi{
        margin-top: 10.66vw;
    }
    .deviceArea #page_number li:not(:last-child){
        margin-right: 2.13vw;
    }
    .deviceArea #result-navi #page_after{
        margin-left: 5.33vw;
    }
    .deviceArea #result-navi #page_before{
        margin-right: 5.33vw;
    }
    .deviceArea #result-navi #page_after li:not(:last-child),
    .deviceArea #result-navi #page_before li:not(:last-child){
        margin-right: 5.33vw;
    }
    .deviceArea #page_number li{
        font-size: 4.26vw;
        width: 8.53vw;
        height: 8.53vw;
    }
    .deviceArea #page_number li.current_page{
        width: 8.53vw;
        height: 8.53vw;
    }
}


/* otherArea */
.otherArea{
    padding-top: 70px;
}
@media screen and (max-width:768px){

}