.salons {
    margin-top:4.0rem;
    margin-bottom:4.0rem;
    display:flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: start;
}
.salons article {
    display:flex;
    flex-direction: column;
}
.salons .salon-cassette {
    margin-top:1.5rem;
    width:calc(50% - 1.0rem);
}

.salons .salon-cassette:nth-child(odd) {
    margin-right:1.0rem;
}
.salons .salon-cassette:nth-child(even) {
    margin-left:1.0rem;
}

.salons .salon-cassette .salon-title {
    background-color: #000;
    color:#fff;
    text-align: center;
    height: 47px;
}
.salons .salon-cassette .salon-title h3 {
    margin:0;
    padding:0;
    line-height: 47px;
}

.salons .salon-cassette .salon-body {
    padding:2.0rem;
    background-color: #F0F2F5;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.salons .salon-cassette .salon-body .image {
    aspect-ratio:16/9;
}
.salons .salon-cassette .salon-body .image img {
    object-fit: cover;
    width:100%;
    aspect-ratio:16/9
}

.salons .salon-cassette .salon-body .informations {
    margin-top:1.5rem;
    display:table;
    padding-bottom:2.0rem;
}

.salons .salon-cassette .salon-body .informations > div {
    display:table-row;
}

.salons .salon-cassette .salon-body .informations > div > div {
    display:table-cell;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.salons .salon-cassette .salon-body .informations > div > div.caption {
    color: #72777D;
    white-space: nowrap;
}

.salons .salon-cassette .salon-body .informations > div > div.inform {
    padding-left:1.5rem;
    white-space: pre-wrap;
}


.salons .salon-cassette .navigation {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
    position: relative;
}

.salons .salon-cassette .navigation > .detail-link {
    display: flex;
    height: 100%;
    align-items: end;
}
.salons .salon-cassette .navigate .arrow-right {
    padding-left: 3px;
} 
.salon-header{
    text-align: center;
}
.salon-header .pc-display{
    height: 320px;
}
@media screen and (min-width: 769px){

    .salons .salon-cassette .navigation > .reserve-sp {display:none}
    .salons .salon-cassette .navigation > .reserve-pc {
        position: absolute;
        left:50%;
        transform: translate(-50%,0)
    }
    
    .salons .salon-cassette .navigation > .reserve-pc > a {
        display:block;
        background-color: #A18243;
        text-decoration: none;
        color: #fff;
        padding: 10px 20px;
    }
    
    .salons .salon-cassette .navigation > .reserve-pc > a img {
        width:23px;
        margin-right: 10px;
        position: relative;
        top: -2px;
    }
}

@media screen and (max-width: 768px){
    .salon-header {
        height:180px;
    }
    .salon-header img {
        height:180px;
    }

    .salons {
        margin-top:4.0rem;
        display:block;
    }
    .salons .salon-cassette {
        width:100%;
    }

    .salons .salon-cassette:nth-child(n+1) {
        margin-top:2.0rem;
    }

    .salons .salon-cassette:nth-child(odd) {
        margin-right:0rem;
    }
    .salons .salon-cassette:nth-child(even) {
        margin-left:0rem;
    }
    .salons .salon-cassette .salon-body {
        padding: 24px;
    }
    .inform pre{
        white-space: pre-wrap;
        margin:0;
    }
    .sp-display{
        width: 100%;
    }
    .salons .salon-cassette .salon-body .informations > div > div:last-child {
        white-space: pre-line;
    }
    .salons .salon-cassette .salon-body .informations > div > div:first-child {
        white-space: nowrap;
    }

    .salons .salon-cassette .navigation > .reserve-pc {display:none}
    .salons .salon-cassette .navigation > .reserve-sp {
        position: absolute;
        left:40%;
        transform: translate(-50%,0)
    }
    
    .salons .salon-cassette .navigation > .reserve-sp > a {
        display:block;
        background-color: #A18243;
        text-decoration: none;
        color: #fff;
        padding: 10px 20px;
    }
    
    .salons .salon-cassette .navigation > .reserve-sp > a img {
        width:23px;
        margin-right: 10px;
        position: relative;
        top: -2px;
    }
}