@charset "utf-8";

/* ------------------------------------------------------ */
/* common */
/* ------------------------------------------------------ */
.columnContainer {
    & > h2 {
        margin-bottom: 20px;
    }
    & > *:not(h2) + * {
        margin-top: 20px;
    }
    /* 画像を左に置く2カラム */
    .columnBox2.reverse {
        grid-template-columns: 1fr 1.4fr;
    }
    .figureCol .fig {
        width: 100%;
    }
}

/* ------------------------------------------------------ */
/* こだわり機能 */
/* ------------------------------------------------------ */
.featureList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* テキスト量に関わらず全カードの高さを揃える */
    grid-auto-rows: 1fr;
    gap: 28px;
    & > li {
        background: var(--white);
        border: solid 1px #D0D0CE;
        border-radius: 8px;
        overflow: hidden;
    }
    .featureImg img {
        display: block;
        width: 100%;
    }
    .featureText {
        padding: 24px 24px 26px;
    }
    .featureLabel {
        display: inline-block;
        padding: 3px 12px;
        background: var(--yellow);
        border-radius: 3px;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.6;
    }
    & p {
        margin-top: 9px;
        font-size: 1.4rem;
        line-height: 1.95;
    }
}
.columnContainer .featureList h3 {
    display: block;
    margin-top: 9px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.6;
}

/* ------------------------------------------------------ */
/* 製品スペック */
/* ------------------------------------------------------ */
.specTable {
    border: solid 1px #D0D0CE;
    & th,
    & td {
        padding: 14px 20px;
        border-bottom: solid 1px #D0D0CE;
        font-size: 1.4rem;
        line-height: 1.9;
        vertical-align: middle;
    }
    & tr:last-child th,
    & tr:last-child td {
        border-bottom: none;
    }
    & th {
        width: 240px;
        background: var(--light-grey);
        font-weight: 700;
    }
}

/* ------------------------------------------------------ */
/* つくり手・現場スタッフの想い */
/* ------------------------------------------------------ */
.commentBox {
    grid-template-columns: 112px auto;
    gap: 0 24px;
    align-items: center;
    .commentUser {
        .userImg {
            width: 112px;
            height: 112px;
            border-radius: 50%;
            object-fit: cover;
        }
        .userName {
            color: var(--text-gray);
            font-size: 1.2rem;
            line-height: 1.5;
        }
    }
    .commentText {
        margin-left: 0;
        padding: 20px 26px;
        border-radius: 12px;
        font-size: 1.5rem;
        line-height: 2;
        & p ~ p {
            margin-top: 1em;
        }
    }
}
.commentBox + .commentBox {
    margin-top: 32px;
}