/*================================================
  page-mainvisual
================================================*/

.page-mainvisual {
    background-image: url(../../image/equipment/page-mainvisual.jpg);
}

/*================================================
  page-lead
================================================*/
.page-lead h3 {
    width: 100%;
    margin-inline: auto;
    line-height: 2;
}

.page-lead::before {
    background-image: url(../../image/equipment/page-lead-bg.jpg);
    border-top-right-radius: 558px;
    border-bottom-right-radius: 558px;
    width: 98%;
}

.page-lead::after {
    content: none;
}

@media print,
screen and (min-width: 769px) {
    .page-lead h3 {
        font-size: clamp(1.6rem, 0.2638rem + 2.7802vw, 3.6rem);
    }
}


@media print,
screen and (min-width: 1600px) {
    .page-lead {
        padding-block: 7em;
    }
    .page-lead .container {
        max-width: 1280px;
    }
    .page-lead h3 {
    font-size: 4rem;
    line-height: 2.1;
    }
}

/*================================================
  equipment
================================================*/

.equipment {
    padding-block: calc(var(--layout-gap) * 2);
}

.table {
    margin-top: var(--layout-gap);
}

@media print,
screen and (min-width: 769px) {
    .equipment {
        padding-block: calc(var(--layout-gap) * 3);
    }

    .table {
        margin-top: calc(var(--layout-gap) * 2);
    }
}

/*================================================
  decoration
================================================*/

.decoration {
    position: relative;
    overflow-x: hidden;
}

.decoration::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 75%;
    background-image: url(../../image/equipment/table-bg.png);
    background-size: contain;
    background-position: center;
    aspect-ratio: 910 / 2247;
    width: 55vw;
    max-width: 900px;
    z-index: -1;
}

@media print,
screen and (min-width: 769px) {
    .decoration::after {
        width: 50vw;
    }
}

@media print,
screen and (min-width: 1200px) {
    .decoration::after {
        width: 40vw;
        left: 69%;
    }
}

/*================================================
  equipment-list
================================================*/

.equipment-list {
    padding-bottom: var(--layout-gap);
}

.equipment-list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    text-align: center;
}

@media print,
screen and (min-width: 769px) {
    .equipment-list {
        padding-bottom: calc(var(--layout-gap) * 2);
    }
}

/*================================================
  cta-bg
================================================*/

.cta-bg {
    background-color: var(--color-gray-second);
    padding-block: calc(var(--layout-gap) * 2);
}