@charset "utf-8";

a {
    text-decoration: none;
}


.wrapper{
    max-width:950px;
    background-color: #fff;
    margin: 20px auto;
    padding-bottom: 20px;
}

.container {
    width: 85%;
    margin: 0 auto;
    padding: 50px 0;
}


.shoulder {
    color: darkgoldenrod;
    font-weight: 800;
    line-height: 3rem;
}

.headline > h2 {
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1.2;
}

.headline > .description,
.salon > .description {
    font-family: "Meiryo UI" , "メイリオ" , Meiryo , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" ,"ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic";
    font-size: 1.6rem;
    line-height: 1.4;
    color: #666;
    margin-top: 10px;
} 

.salon {
    margin-top: 75px;
}


/* ==============   salon 紹介   ================ */

.salon {
    position: relative;
}

.areaname {
    position: absolute;
    top: -20px;
    right: 0;
}

.salon > h2 {
    color: darkgoldenrod;
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1.2;
}

.salon_photos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 15px;
}

.salon_img {
    flex-basis:calc((100% - 20px) / 2);
    max-width:calc((100% - 20px) / 2);
    margin-top:20px;
}

.salon_img:nth-of-type(1),
.salon_img:nth-of-type(2) {
    margin-top:0;
}

.salon_photos .salon_img img {
    width: 100%;
}

@media (max-width: 800px) {
    .wrapper{
        margin-top: 0px;
    }

    .headline > h2,
    .salon > h2 {
        font-size: 2.4rem;
    }

    .headline > .description,
    .salon > .description {
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .salon_photos {
        flex-direction: column;
    }

    .salon_img {
        max-width:100%;
        margin-top: 10px;      
    }

    .salon_img:nth-of-type(2) {
        margin-top: 10px;
    }
}

@media (max-width: 600px) {
    .areaname {
        display: none;
    }
}