@charset "utf-8";

/* ------------------------------------------------------ */
/* common */
/* ------------------------------------------------------ */
.columnContainer {
    & > h2 {
        margin-bottom: 20px;
    }
    & > *:not(h2) + * {
        margin-top: 20px;
    }
    .figureCol .fig {
        width: 100%;
    }
}

/* ------------------------------------------------------ */
/* こだわり機能 */
/* ------------------------------------------------------ */
.featureList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    & > li {
        background: var(--white);
        border: solid 1px #D0D0CE;
        border-radius: 8px;
        overflow: hidden;
    }
    .featureImg img {
        display: block;
        width: 100%;
    }
    .featureText {
        padding: 19px 18px 20px;
    }
    .featureLabel {
        display: inline-block;
        padding: 3px 10px;
        background: var(--yellow);
        border-radius: 3px;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.6;
    }
    & p {
        margin-top: 7px;
        font-size: 1.3rem;
        line-height: 1.95;
    }
}
.columnContainer .featureList h3 {
    display: block !important;
    margin-top: 7px;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.6;
}

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

/* ------------------------------------------------------ */
/* つくり手・現場スタッフの想い */
/* ------------------------------------------------------ */
.commentBox {
    .commentUser {
        gap: 12px;
        .userImg {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            object-fit: cover;
        }
        .userName {
            margin-top: 0;
            font-size: 1.3rem;
            font-weight: 700;
            & span {
                margin-left: 0;
            }
            & span + span {
                margin-left: 0.5em;
            }
        }
    }
    .commentText {
        margin-top: 10px;
        padding: 18px;
        border-radius: 12px;
        font-size: 1.3rem;
        line-height: 2;
        & p ~ p {
            margin-top: 1em;
        }
    }
}
.commentBox + .commentBox {
    margin-top: 40px;
}

.columnPage .commentText {
    &::after {
      top: -25px;
      left: 7%;
    }
  }