@charset "utf-8";
/*共通設定*/
.blog-txt-area h2,
.blog-txt-area h3,
.blog-txt-area h4 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    color: #442810;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-align: left;
}

.blog-txt-area h5,
.blog-txt-area h6 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
}

/* ---- h2：グラデーションの帯 ---- */
.blog-txt-area h2 {
    font-size: 1.5rem;
    /* 24px */
    margin: 3.2em 0 1.4em;
    padding: 0.75em 1em;
    border-left: 5px solid #859A1F;
    border-radius: 4px;
    background: linear-gradient(135deg, #EEF5DE 0%, #FBF3E1 76%, #FAF1C9 100%);
}

/* ---- h3：左にゴールドの縦線 ---- */
.blog-txt-area h3 {
    font-size: 1.25rem;
    /* 20px */
    margin: 2.6em 0 1em;
    padding-left: 0.8em;
    border-left: 3px solid #B8932F;
}

/* ---- h4：頭に短い横線 ---- */
.blog-txt-area h4 {
    position: relative;
    font-size: 1.1rem;
    /* 17.6px */
    margin: 2.2em 0 0.9em;
    padding-left: 1.9em;
}

.blog-txt-area h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 1.2em;
    height: 2px;
    background: #B0CB2D;
}

/* ---- h5：ゴールドの文字 ---- */
.blog-txt-area h5 {
    font-size: 1rem;
    /* 16px */
    margin: 2em 0 0.8em;
    color: #8F6F1E;
}

/* ---- h6：オリーブの小さな見出し ---- */
.blog-txt-area h6 {
    font-size: 0.875rem;
    /* 14px */
    margin: 1.8em 0 0.7em;
    color: #6E7F19;
    letter-spacing: 0.12em;
}
/*終わり*/  


/*<section class="blog">*/
.blog {
    padding: 120px 5vw;
}

.blog-in {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

    /*<div class="blog-area">*/
.blog-area {
    width: 70%;
    gap: 24px;
}

.blog-date {
    color: #859A1F;
}

.blog-h2 {
    font-weight: 600;
    font-size: 24px;
}
/*終わり*/


/*<section class="contact">*/
.contact {
    background-image: url(../img/common/blog_contact_pc_bg.jpg);
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
    .blog-txt-area h2 {
        font-size: 1.3rem;
        padding: 0.7em 0.85em;
        margin: 2.6em 0 1.2em;
    }

    .blog-txt-area h3 {
        font-size: 1.125rem;
        margin: 2.2em 0 0.9em;
    }

    .blog-txt-area h4 {
        font-size: 1.0625rem;
    }
/*終わり*/  


/*<section class="blog">*/
    .blog-in {
        flex-direction: column;
        gap: 40px;
    }

    /*<div class="blog-area">*/
    .blog-area {
        width: 100%;
    }
/*終わり*/
}
  
  
/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
/*終わり*/ 


/*<section class="blog">*/
    .blog {
        padding: 64px 5vw;
    }

    /*<div class="blog-area">*/
    .blog-h2 {
        font-size: clamp(18px, 24vw / 5.99, 24px);
    }
/*終わり*/


/*<section class="contact">*/
    .contact {
        background-image: url(../img/common/blog_contact_sp_bg.jpg);
    }
/*終わり*/

}