.key-visual{
    text-align : center;
    background : #c5c3c3;
}

.problem{

}
.problem-ttl{
    color : #005bac;
    padding : 0 1em;
    display : inline-block;
    margin : 3rem auto;
    font-size : 1.875rem;
    z-index : 100;
    position : relative;
    text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.8), -2px 2px 2px rgba(255, 255, 255, 0.8), 2px -2px 2px rgba(255, 255, 255, 0.8), -2px -2px 2px rgba(255, 255, 255, 0.8), 2px 0 2px rgba(255, 255, 255, 0.8), 0 2px 2px rgba(255, 255, 255, 0.8), -2px 0 2px rgba(255, 255, 255, 0.8), 0 -2px 2px rgba(255, 255, 255, 0.8);
}
.problem-ttl--speak{
    position : relative;
    margin : 5rem auto;
}
.problem-ttl--speak::before,.problem-ttl--speak::after{
    content : "";
    position : absolute;
    top : 0;
    width : 3px;
    bottom : 0;
    background-color : #005bac;
}
.problem-ttl::before{
    left : 0;
    transform : rotate(-30deg)
}
.problem-ttl::after{
    right : 0;
    transform : rotate(30deg)
}

.problem-item{
    display : flex;
    flex-wrap : nowrap;
    justify-content: space-between;
}
.problem-whide{
    width : 76%;
    display : flex;
    flex-wrap : wrap;
    justify-content: space-between;
}
.problem-whide > p{
    width : 47%;
    margin-bottom : 5%;
}
.problem-height{
    width : 20%;
}

@media screen and (max-width: 767px) {
    .problem-ttl{
        font-size : 1rem;
        margin : 2rem auto;
    }
}



.features{
    display : flex;
    flex-wrap : nowrap;
    justify-content: space-between;
    margin-bottom : 2rem;
}

.features__sub{
    width : 48%;
}
.features:last-child{
    margin-bottom : 0;
}
@media screen and (max-width: 767px) {
    .features{
        flex-direction: column-reverse;
        margin-bottom : 3rem;
    }
    .features__sub{
        width : 100%;
        margin-bottom : 1rem;
    }
}


.ttl-mark{
    display : flex;
    flex-wrap : nowrap;
    text-align : left;
    align-items : center;
}
.ttl-mark__step{
    background : #005bac;
    border-radius : 50px;
    font-size : 1.5rem;
    color : #fff;
    font-weight : bold;
    height : 5rem;
    margin-right : .5em;
    display : flex;
    align-items: center;
    padding : 0 1em;
    margin-top : .5em;
}
.ttl-mark__step__nb{
    font-size : 4.0625rem;
}
.ttl-mark__step__tx{
    line-height : 1.2em;
}
@media screen and (max-width: 959px) {
    .ttl-mark{
        flex-direction: column;
    }
    .ttl-mark__step{
        margin-bottom : 1rem;
    }
}





.dist-media-player{

}
.dist-media-player__ttl{
    margin-top : 5rem;
    margin-bottom : 5rem;
    position : relative;
}
.dist-media-player__ttl::after{
    content : "";
    width : 70px;
    height : 2px;
    background : #005bac;
    position : absolute;
    bottom : -2rem;
    left : 50%;
    margin-left : -35px;
}
.dist-media-player-cost{
    background : #005bac;
    border-radius : 50px;
    color : #fff;
    font-weight : bold;
    font-size : 1.5rem;
    display : inline-block;
    padding : .7em 2em .4em 2em;
    line-height : 1em;
    margin-bottom : 3rem;
}
.dist-media-player .problem-ttl{
    font-size : 2.25rem;
}
@media (max-width: 767px) {
    .dist-media-player .problem-ttl{
        font-size : 1.4rem;
        margin-top : 2rem;
        margin-bottom : 1rem;
    }
    .dist-media-player__ttl .text-size--24{
        font-size : 1rem;
    }
    .dist-media-player__ttl .text-size--43{
        font-size : 1.9rem;
    }
    .dist-media-player__ttl .text-size--20{
        font-size : 0.9rem;
    }
    .dist-media-player-cost{
        font-size : .8rem;
        padding : 1.2em 2em .7em 2em;
    }
    .dist-media-player-cost .text-size--40{
        font-size : 1.4rem;
    }
}

.step-mark{
    font-size : 3.75rem;
    font-weight : bold;
    color : #005bac;
    position : relative;
    padding-left : 25px;
}
.step-mark::before{
    position : absolute;
    content : "";
    left : 0;
    bottom : .4em;
    height : 5px;
    width : 16px;
    background : #005bac;
}
@media (max-width: 767px) {
    .step-mark::before{
        bottom : 0.33em;
    }
}


.steps{
    display : flex;
    flex-wrap : nowrap;
    justify-content: space-between;
    background : #fff;
    padding : 50px;
    box-sizing : border-box;
    margin-bottom : 5rem;
    position : relative;
}
.steps::after{
    content : "";
    position : absolute;
    border-top : 50px solid #005bac;
    border-left : 40px solid transparent;
    border-right : 40px solid transparent;
    bottom : -4rem;
    left : 50%;
    margin-left : -40px;
}
.steps:last-child::after{
    content : none;
}
.steps__sub{
    width : 48%;
}
.steps__sub:nth-child(odd){
    padding-right : 2rem;
    box-sizing : border-box;
}
.steps:last-child{
    margin-bottom : 0;
}
@media (max-width: 767px) {
    .steps{
        flex-direction: column;
        padding : 23px;
    }
    .steps::after{
        content : "";
        position : absolute;
        border-top : 40px solid #005bac;
        border-left : 30px solid transparent;
        border-right : 30px solid transparent;
        bottom : -4rem;
        left : 50%;
        margin-left : -30px;
    }
    .steps__sub{
        width : 100%;

    }
    .steps__sub:nth-child(odd){
        margin-bottom : 2rem;
    }
}



.function-lists{
    display : flex;
    flex-wrap : wrap;
    margin-top : 100px;
    margin-bottom : 100px;
}
.function-lists__item{
    width : 30%;
    margin-left : 5%;
    margin-bottom : 5%;
}
.function-lists__item:nth-last-child(-n+3){
    margin-bottom : 0;
}
.function-lists__item:nth-child(3n + 1){
    margin-left : 0;
}
.function-lists__item--txt{
    margin-bottom : 1rem;
    margin-top : 1rem;
}
@media (max-width: 767px) {
    .function-lists{
        justify-content: space-between;
        margin-top : 70px;
        margin-bottom : 70px;
        align-items: flex-start;
    }
    .function-lists__item{
        width : 47%;
        margin : 0 0 3rem 0;

        justify-content: start;
        align-items: flex-start;
    }
    .function-lists__item--txt{
        margin-bottom : 0;
    }
    .function-lists__item:nth-last-child(-n+3){
        margin : 0 0 3rem 0;
    }
    .function-lists__item:nth-child(3n + 1){
        margin : 0 0 3rem 0;
    }
}


.cases-lists-wrap{
    border : 2px solid #005bac;
    border-radius : 18px;
    padding-top : 1em;
    position : relative;
}
.cases-lists-ttl{
    content : "";
    position : absolute;
    top : -1em;
    left : 1em;
    background : #005bac;
    color : #fff;
    border-radius : 50px;
    padding : .3em 1em;
    box-sizing : border-box;
}
.cases-lists{
    display : flex;
    flex-wrap : wrap;
    justify-content: flex-start;
    padding-top : 4%;
}
.cases-lists__ttl{
    background : #005bac;
    color : #fff;
    padding : 0.625rem;
    border-radius : 50px;
    display : inline;
    box-sizing : border-box;
}
.cases-lists__att{
    text-align : right;
    padding : .5em 4%;
    box-sizing : border-box;
}
.case-lists__item{
    width : 28%;
    margin-left : 4%;
    text-align : center;
    border : 1px solid #bdbbbb;
    background : #fff;
    padding : 12px;
    box-sizing : border-box;
    margin-bottom : 4%;
}
.case-lists__item:nth-last-child(-n + 3){
    margin-bottom : 0;
}
.case-lists__ttl{
    font-size : 1.25rem;
    position : relative;
    line-height : 1em;
    display : inline-block;
    padding : 1rem 0;
    box-sizing : border-box;
}
.case-lists__ttl::before,
.case-lists__ttl::after{
    content : "ー";
    position : absolute;
    color : #005bac;
}
.case-lists__ttl::before{
    left : -1.5em;
}
.case-lists__ttl::after{
    right : -1.5em;
}

.case-detail{
    text-align : center;
}
.case-detail__ttl{
    background : #005bac;
    color : #fff;
    padding : 0.625rem;
    border-radius : 50px;
    position : relative;
    box-sizing : border-box;
}
.case-detail__ttl::after{
    content : "";
    width : 0;
    height : 0;
    position : absolute;
    bottom : -9px;
    left : 50%;
    margin-left : -5px;
    border-top : 9px solid #005bac;
    border-right : 6px solid transparent;
    border-left : 6px solid transparent;
}
.case-detail__details{
    margin-top : 1rem;
    margin-bottom : 1rem;
}
.case-detail__details:last-child{
    margin-bottom : 0;
}
@media screen and (max-width: 959px) {
    .cases-lists{
        padding : 4% 4% 0 4%;
        font-size: 1rem;
    }
    .case-lists__item{
        width : 48%;
        margin : 0 4% 4% 0;
    }
    .case-lists__item:nth-child(even){
        margin-right : 0;
    }
    .case-lists__item:nth-last-child(-n + 3){
        margin-bottom : 4%;
    }
}
@media (max-width: 767px) {
    .cases-lists-ttl{
        top : -1em;
        left : 50%;
        width : 6em;
        text-align : center;
        margin-left : -3em;
    }
    .cases-lists{
        flex-direction: column;
        padding : 4% 4% 0 4%;
        font-size: 1rem;
    }
    .case-lists__ttl{
        font-size: 1rem;
    }
    .case-lists__item{
        width : 100%;
        margin : 0 0 4% 0;
    }

}



.performance-items{
    margin-bottom : 3rem;
    padding-left : 33%;
    min-height : 200px;
}
.performance-items.performance-items--01{
    background : url('../images/index/performance-item_01.jpg') no-repeat;
    background-position : top left;
    background-size : 30% auto;
}
.performance-items.performance-items--02{
    background : url('../images/index/performance-item_02.jpg') no-repeat;
    background-position : top left;
    background-size : 30% auto;
}
.performance-items.performance-items--03{
    background : url('../images/index/performance-item_03.jpg') no-repeat;
    background-position : top left;
    background-size : 30% auto;
}
.performance-items:last-child{
    margin-bottom : 0;
}


.performance-detail{
    display : flex;
    margin-top : 1.75rem;
}
.performance-detail__itm{
    margin-right : 4rem;
    position : relative;
    width : 52%;
}
.performance-detail__itm:last-child{
    margin-right : 0;
}
.performance-detail__itm:first-child::after{
    content : "";
    position : absolute;
    width : 0;
    height : 0;
    top : 50%;
    right : -3rem;
    border-left : 34px solid #005bac;
    border-top : 20px solid transparent;
    border-bottom : 20px solid transparent;
    margin-top : -17px;
}
@media (max-width: 767px) {
    .performance-items{
        margin-bottom : 4%;
        padding-top : 70%;
        padding-left : 0;
        margin-top : 1rem;
    }
    .performance-items.performance-items--01,
    .performance-items.performance-items--02,
    .performance-items.performance-items--03{
        background-size : 100%;
    }
    .performance-detail{
        flex-direction: column;
    }
    .performance-detail__itm{
        margin-right : 0;
        margin-bottom : 5rem;
        position : relative;
        width : 100%;
    }
    .performance-detail__itm:first-child::after{
        bottom : -5rem;
        top : auto;
        left : 50%;
        border-left : 20px solid transparent;
        border-top : 34px solid #005bac;
        border-right : 20px solid transparent;
        margin-left : -17px;
    }
}


.price{
    border-collapse : collapse;
    width : 100%;
    margin-top : 100px;
    margin-bottom : 2rem;
}
.price td,.price th{
    border : 1px solid #cccccc;
    padding : 1rem;
}
.price__header{
    background : #005bac;
    color : #fff;
    font-size : 1.5rem;
    text-align : left;
    padding : 1rem;
}
.price__ttl{
    background : #e7e7e7;
}
.price--pink{
    background : #fde4e7;
}
.price--blue{
    background : #e1f0fd;
}
@media (max-width: 767px) {
    .price{
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin-top : 70px;
    }
}


.accessories{
    display : flex;
    flex-wrap : nowrap;
    justify-content: space-between;
    padding-bottom : 3rem;
}
.accessories__left{
    width : 40%;
}
.accessories__right{
    width : 55%;
}
@media (max-width: 767px) {
    .accessories{
        flex-direction: column;
        padding-bottom : 1rem;
    }
    .accessories__left,.accessories__right{
        width : 100%;
    }
    .accessories__right{
        margin-top : 2rem;
    }
}



.set-sample{
    margin : 1.5em auto;
}
.cost-sample-wrap{
    padding : 0 0 2rem 0;
}
.cost-sample{
    border-collapse : collapse;
    width : 100%;
    margin : 1.5em auto;
}
.cost-sample td,.cost-sample th{
    border : 1px solid #cccccc;
    padding : 1em .5em;
    text-align : center;
}
/*
.cost-sample tr:nth-child(odd){
    background : #f1f0f0;
}
*/
.cost-sample th{
    background : #005bac;
    color : #fff;
}
@media (max-width: 767px) {
    .cost-sample{
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}