@charset "UTF-8";

/* SalonList */
#SalonList {
    padding-bottom: 100px;
}

/* inner */
.inner {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}

@media screen and (max-width: 768px) {
    .inner {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* mainvisual */
.mainvisual {
    text-align: center;
}
.mainvisual img {
    max-width: 100%;
}

/* section */
.section {
    margin-top: 50px;
}
.section:first-child {
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .section {
        margin-top: 40px;
    }
}

/* headingM */
.headingM {
    color: #0372A9;
    font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    font-size: 22px;
    margin-bottom: 25px;
    padding: 5px 20px;
    background-color: #f3fafe;
}

@media screen and (max-width: 768px) {
    .headingM {
        font-size: 20px;
        margin-right: -10px;
        margin-left: -10px;
    }
}

/* headingS */
.headingS {
    color: #0372A9;
    font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    font-size: 22px;
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    .headingS {
        font-size: 18px;
    }
}

/* lead */
.lead {
    color: #000000;
    font-family: "Noto Sans Japanese", sans-serif;
    font-size: 18px;
    text-align: center;
}

/* anchorList */
.anchorList {
    display: flex;
    align-items: center;
    justify-content: center;
}
.anchorList > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    margin-right: 10px;
}
.anchorList > *:last-child {
    margin-right: 0;
}
.anchorList > *::before,
.anchorList > *:last-child::after {
    content: "";
    width: 1px;
    height: 1em;
    background-color: #000000;
}

/* anchor */
.anchor {
    color: #000000;
    font-family: "Noto Sans Japanese", sans-serif;
    font-size: 16px;
    transition: opacity 0.2s;
}
.anchor:hover {
    opacity: 0.7;
}

/* salonList */
.salonList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 40px;
}

@media screen and (max-width: 768px) {
    .salonList {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15px;
        row-gap: 15px;
    }
}

/* salon */
.salon {
    line-height: 1.2;
}
.salon__youtube {
    position: relative;
    display: block;
    transition: opacity 0.2s;
}
.salon__youtube:hover {
    opacity: 0.7;
}
.salon__youtube::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background-image: url("/images/common/btn-play.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(-50%, -50%);
}
.salon__youtube img {
    width: 100%;
}
.salon__name {
    position: relative;
    display: block;
    color: #0372A9;
    font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    font-size: 20px;
    margin-top: 20px;
    padding-bottom: 4px;
    border-bottom: solid #0372A9 1px;
    transition: opacity 0.2s;
}
.salon__name:hover {
    opacity: 0.7;
}
.salon__name::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 12px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.5px%22%20height%3D%2211.5px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20stroke%3D%22rgb(51%2C%20153%2C%20204)%22%20stroke-width%3D%221px%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20fill%3D%22none%22%20d%3D%22M0.968%2C0.959%20L7.39%2C5.31%20L0.968%2C9.101%20%22%2F%3E%3C%2Fsvg%3E');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.salon__stylist {
    font-size: 14px;
}
.salon__shop {
    font-size: 18px;
}
.salon__type {
    font-size: 18px;
    margin-top: 10px;
}
.salon__link {
    display: inline-flex;
    align-items: center;
    color: #0372A9;
    font-size: 14px;
    margin-top: 7px;
    transition: opacity 0.2s;
}
.salon__link:hover {
    opacity: 0.7;
}
.salon__link::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 12px;
    margin-bottom: 0.2em;
    margin-left: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.5px%22%20height%3D%2211.5px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20stroke%3D%22rgb(51%2C%20153%2C%20204)%22%20stroke-width%3D%221px%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20fill%3D%22none%22%20d%3D%22M0.968%2C0.959%20L7.39%2C5.31%20L0.968%2C9.101%20%22%2F%3E%3C%2Fsvg%3E');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: middle;
}
.salon__category {
    color: #999999;
    font-size: 12px;
    margin-top: 5px;
}

@media screen and (max-width: 768px) {
    .salon__name {
        font-size: 14px;
        margin-top: 15px;
    }
    .salon__name::after {
        width: 8px;
        height: calc(8px * 12 / 10);
    }
    .salon__stylist {
        font-size: 10px;
    }
    .salon__shop {
        font-size: 12px;
    }
    .salon__type {
        font-size: 12.5px;
        margin-top: 5px;
    }
    .salon__link {
        font-size: 11px;
        margin-top: 3.5px;
    }
    .salon__link::after {
        width: 8px;
        height: calc(8px * 12 / 10);
    }
    .salon__category {
        font-size: 10px;
        margin-top: 2.5px;
    }
}

.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

.isSp { display: none; }

@media screen and (max-width: 768px) {
    .isSp { display: block; }
}