@charset "UTF-8";
/* ==========================================================
   下層共通
============================================================= */
/* メインビジュアル */
.c-article-mv {
    font-family: var(--ff-serif);
    /* container-type: size; */
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
}
@media (width > 500px) {
    .c-article-mv {
        display: block;
        height: auto;
    }
}
@media (width > 768px) {
    .c-article-mv {
        display: block;
        height: auto;
    }
}
.c-article-mv__head {
    overflow: hidden;
}
@media (width > 768px) {
    .c-article-mv__head {
        /* height: 225px; */
    }
}
.c-article-mv__inner {
    position: relative;
    padding-block: 2.44rem 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: clamp(140px, calc(212 / 1440 * 100vw), 212px);
}
.c-article-mv__head-link {
    display: inline-block;
    height: 100%;
    img {
        height: 100%;
        width: auto;
    }
}
.c-article-mv__head-txt {

}
.c-article-mv__head-main {
    font-size: var(--txt-4xl);
    font-weight: 700;

    span {
        display: inline-block;
        padding-inline-end: .5em;
        font-size: var(--txt-xl);
    }
}

.c-article-mv__head-bg {
    position: absolute;
    bottom: 1em;
    right: -3em;
    height: 100%;
    width: auto;
    z-index: -1;
}
@media (width > 768px) {
    .c-article-mv__head-bg {
        bottom: 1em;
        right: 1em;
    }   
}
.c-article-mv__mv-main {
    width: 100dvw;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media (width > 768px) {
    .c-article-mv__mv-main {
        width: 100%;
        height: 600px;
    } 
}
.c-article-mv__ttl-wrap {
    position: relative;
    margin-inline: auto;

    height: 100%;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
}
.c-article-mv__ttl {
    position: absolute;
    bottom: 13%;
    left: 0;
    font-weight: 700;
    color: var(--cl-wt);
}
.c-article-mv__ttl-num {
    margin-block-end: 1.6rem;
    font-size: var(--txt-2xl);
}
.c-article-mv__ttl-main {
    font-size: clamp(1.75rem, 1.1071rem + 3.2143vw, 4rem);
}
.c-article-mv__ttl-sub {
    font-size: clamp(1.1875rem, 0.8839rem + 1.5179vw, 2.25rem);
} 
/* セクション */
.c-article__sec:not(:first-child) {
    margin-block: clamp(5rem, 3.5714rem + 7.1429vw, 10rem);
}
.c-section__ttl {
    margin-block-end: var(--mg-lg);
}
.c-article__box {
    display: flex;
    flex-direction: column;
    gap: var(--mg-base);
    margin-block-end: var(--mg-base);
}
.c-article__img-2 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.75rem;
}
@media (width > 768px) {
    .c-article__img-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.c-article__box2 {
    margin-block-start:  var(--mg-lg);
}
.c-article__card {
    padding: 2.25rem;
    border-radius: 10px;
}
.c-article__card.--yl {
    background: var(--cl-yl);
}

/* ===============================================
# article01 
=============================================== */
.p-theme01-mv__main {
    background-image: url(../../../assets/img/article1/img_mv_article01.jpg);
}
.p-theme01__lead {
    margin-block-start: 5.2rem;
}
/* 8月に〜 *********************/
    .p-comment {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .p-comment:not(:last-child) {
        margin-block-end: 1.5rem;
    }
    .p-comment__profile {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    .p-comment__profile-img {
        width: 4.625rem;
        height: auto;
        aspect-ratio: 1/1;
    }
    .p-comment__name {
        font-family: var(--ff-serif);
        font-weight: 700;
    }
    .p-comment__main {
        line-height: 1;
        font-size: var(--txt-2xl);
    }
    .p-comment__honorific {
        font-size: var(--txt-xl);
        font-size: .6em;
    }
    .p-comment__sub {
        margin-block-start: .5em;
        font-size: var(--txt-base);
    }
    .p-comment__cont {

    }
    .p-comment__cont-ttl {
        margin-block-end: .5em;
        font-size: var(--txt-xl);
        font-family: var(--ff-serif);
        font-weight: 700;

    }
    .p-comment__cont-txt {

    }

/* 宗像市のふるさとの光一覧 */
.p-cont-list {

}
.p-project__ttl {

}
 .p-cont-list__box {
    position: relative;
    width: 100%;
    padding: 1rem;
    border-radius: 1.875rem;
    overflow: auto;
 }

.p-cont-list__box:not(:last-child) {
    margin-block-end: 1.5rem;
}
@media (width > 768px) {
    .p-cont-list__box {
        position: relative;
        padding: 1rem;
        height: 442px;
        overflow: hidden;
     }
}
.p-cont-list__box::after {
    content: '';
    display: block;
    position: absolute;
    top: 1rem;
    left: -2em;
    width: 11.8em;
    height: 11.8em;
    border-radius: 50%;
}
.p-cont-list__box.--bl {
    border: 2px solid #91D2EA;
    background: #F7FCFD;
}
.p-cont-list__box.--bl::after {
    background-color: #E5F0F7;
}
.p-cont-list__box.--gr {
    border: 2px solid #8EB199;
    background: #F8FAF6;
}
.p-cont-list__box.--gr::after {
    background: #EEF3EA;
    
}
.p-cont-list__box.--or {
    border: 2px solid #FECD9F;
    background: #FBF9F5;
}
.p-cont-list__box.--or::after {
    background: #FFF0DF;
}


.p-cont-list__box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: clamp(1rem, -3.7857rem + 9.9702vw, 5.1875rem) 1rem;
    padding-block: clamp(1rem, -2.5rem + 7.2917vw, 4.0625rem);
    gap: 1.8rem;
    
    font-family: var(--ff-serif);
    font-weight: 700;
    z-index: 5;
}

.p-cont-list__img {
    img {
        width: 100%;
        height: auto;
    }
}
@media (width > 768px) {
    .p-cont-list__img {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: -1;
        img {
            height: 100%;
            width: auto;
        }
    } 
}

.p-cont-list__ttl {
    
}
.p-cont-list__ttl-main {
    font-size: var(--txt-3xl);
}
.p-cont-list__ttl-sub {
    margin-block-start: .4em;
    font-size: var(--txt-xl);
}
.p-cont-list__list {
    li {
        position: relative;
        padding-inline-start: 1em;

    }
    li::after {
        content: '・';
        position: absolute;
        left: 0;
        top: 0;
    }
}