/*================================================
  mainvisual
================================================*/

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

/*================================================
  product-lead
================================================*/

.page-lead::after {
    right: 0;
    background-image: url(../../image/product/product-lead-bg.jpg);
}

@media print,
screen and (min-width: 1200px) {
    .page-lead {
        margin-block: calc(var(--layout-gap) * 2.5);
    }

    .page-lead::after {
        border-top-left-radius: 558px;
        border-bottom-left-radius: 558px;
        max-width: calc(1200px + 180px + calc(50% - 600px));
    }
}

/*================================================
  product-item
================================================*/
.product-item {
    padding-block: calc(var(--layout-gap) * 1);
}

.product-item01,
.product-item03 {
    background-color: #F8F8F8;
}

.product-item-wrapper {
    padding-left: calc(var(--layout-gap) / 2);
}

.product-item-text {
    padding-block: calc(var(--layout-gap) / 1.5);
    color: var(--color-text-blue);
}

.product-item-radius {
    border-radius: 40px;
}

.arrow {
    color: var(--color-text-blue);
    position: relative;
    padding-bottom: calc(var(--layout-gap) / 2);
    text-align: center;
    margin-block: calc(var(--layout-gap) / 4) calc(var(--layout-gap) * 1.5);
}

.arrow::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    height: 20px;
    background-color: var(--color-blue-light);
}

.arrow::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 0px 22px 52px;
    border-color: transparent transparent transparent var(--color-blue-light);
    transform: rotate(0deg);
}

.product-item-img {
    display: flex;
    justify-content: space-between;
}

.product-item-img img {
    width: 48%;
}

@media print,
screen and (min-width: 689px) {
    .arrow::before {
        width: 90%;
    }
}

@media print,
screen and (min-width: 1200px) {
    .product-item {
        padding-block: calc(var(--layout-gap) * 2);
    }
}