@charset "UTF-8";

/* quality-nav
------------------------------ */
.quality-nav {
    padding: 12rem 0 0;
}

.quality-nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 10px;
}

.quality-nav-list__item {
    position: relative;
}

.quality-nav-list__item::before,
.quality-nav-list__item::after {
    position: absolute;
    content: '';
    display: block;
    height: 2em;
    border-left: 1px solid #545454;
    top: 0;
    left: 0;
}

.quality-nav-list__item::after {
    left: unset;
    right: -1px;
}

.quality-nav-list__item a {
    display: block;
    font-size: max(14px, 1.6rem);
    padding: 0 3rem;
    height: 2em;
    transition: all 0.3s ease;
}

.quality-nav-list__item.active a {
    color: var(--black);
}

@media (hover: hover) and (pointer: fine) {
    .quality-nav-list__item a:hover {
        opacity: .8;
    }
}





/* 
------------------------------ */


.spec-main {
    margin-top: 1.6rem;
}

.structure-list {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
}

.structure-list__title {
    font-size: max(16px, 2rem);
    margin-top: 1.2rem;
}

.structure-list__text {
    font-size: max(14px, 1.5rem);
    margin-top: 1.2rem;
}

.structure-list.vertical {
    grid-template-columns: 1fr;
}

.structure-list.vertical .structure-list__title {
    margin-top: 0;
}

.structure-list.vertical .structure-list__text {
    margin-top: 0;
}

.structure-list.vertical .structure-list__image {
    margin-top: 2rem;
}

.structure-list .structure-list__image.col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.structure-list.col-2 {
    grid-template-columns: repeat(2, 1fr);
}


/* 
------------------------------ */



/* structure
------------------------------ */
.structure-title {
    text-align: center;
    color: #fff;
    line-height: 2;
}

.section-structure .structure-title {
    background-color: #74694B;
}

.section-durability .structure-title {
    background-color: #5FB681;
}

.section-termite .structure-title {
    background-color: #AA7DA4;
}

.section-fire .structure-title {
    background-color: #D15716;
}

.section-insulation .structure-title {
    background-color: #DABF5A;
}

.structure-box {
    background-color: #fff;
    padding: 4rem 8rem;
}

.termite-image {
    max-width: 650px;
    margin-inline: auto;
}


/* quality
------------------------------ */
.guaranteed-list__item {
    position: relative;
}

.max-grade::before {
    background: url(../../images/spec/icon_rank.svg) center center no-repeat;
    background-size: contain;
    content: "";
    width: 5.3rem;
    height: 5.3rem;
    display: inline-block;

    position: absolute;
    top: -.3rem;
    left: -1.3rem;
}

.guaranteed-list__item-title {
    color: var(--white);
    background-color: var(--color-main);
    padding: 0 .5rem 0 4.4rem;
    font-size: max(21px, 2.7rem);
    letter-spacing: .05em;
    margin-bottom: 0.2em;
}

.guaranteed-title {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 0.6em;
    margin-bottom: 0.6em;
}

.guaranteed-mark img {
    margin-top: 3.5rem;
    max-width: 49.4rem;
}

.guaranteed-after-title {
    margin: 7.5rem auto 0.2em;
    color: var(--white);
    background-color: var(--color-main);
    letter-spacing: 0.1em;
    padding: .5rem;
    max-width: 60rem;
    letter-spacing: .05em;
}

.guaranteed-bels-image {
    width: 60%;
    margin: 0 auto;
}

/* 
------------------------------ */