/* =============================================
   mutual_top_add.css
   既存の mutual_top.css への追加スタイル
   既存ファイルは変更せず、このファイルで上書き・追加
   ============================================= */
/* サロンページ：ReservationボタンとSNSが被らないよう調整 */
@media screen and (min-width: 768px) {
    .header--salon .header__sns {
        right: calc(5.6% + 120px);
    }
}

@media screen and (min-width: 1025px) {
    .header--salon .header__sns {
        right: calc(6.2% + 140px);
    }
}
/* ----- special-message（思想ブロック）----- */
.special-message {
    margin: 4em auto;
    width: 100%;
    padding: 3em 0;
    border-top: 1px solid #d1ccc0;
    border-bottom: 1px solid #d1ccc0;
    box-sizing: border-box;
}

.special-message__body {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    line-height: 2.2;
    text-align: center;
    color: #444;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}

/* ----- ヘッダー SNS+Blog ----- */
/* スマホは非表示 */
.header__sns {
    display: none;
    z-index: 1;
}

/* タブレット・PC */
@media screen and (min-width: 768px) {
    .header__sns {
        display: flex;
        align-items: center;
        position: absolute;
        right: calc(5.6% + 50px);
        top: 28px;
        z-index: 1;
    }

    .header__sns-list {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header__sns-list li {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header__sns-list li a img {
        width: 22px;
        height: 22px;
        display: block;
    }

    .header__blog-link a {
        font-family: "Marcellus", serif;
        font-size: 1.2rem;
        letter-spacing: 0.1em;
        color: var(--primary-black);
        border-bottom: 1px solid var(--primary-black);
        padding-bottom: 1px;
        white-space: nowrap;
    }

    .header__blog-link a:hover {
        color: var(--primary-blackLow);
        border-bottom-color: var(--primary-blackLow);
    }
}

/* PC */
@media screen and (min-width: 1025px) {
    .header__sns {
        right: calc(6.2% + 60px);
        top: 50px;
    }

    .header__sns-list li a img {
        width: 28px;
        height: 28px;
    }

    .header__blog-link a {
        font-size: 1.4rem;
    }
}

/* ----- サービス見出し ----- */
.service-heading {
    font-family: "Marcellus", serif;
    font-size: 1.9rem;
    letter-spacing: 0.1em;
    color: #444;
    margin-bottom: 0.5em;
    font-style: normal;
}

/* ----- フッター ブログリンク ----- */
.blog-section__link {
    font-family: "Marcellus", serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: #444;
    border-bottom: 0px solid #444;
    padding-bottom: 2px;
    text-decoration: none;
    display: inline-block;
}

.blog-section__link:hover {
    color: #8a7d6a;
    border-bottom-color: #8a7d6a;
}