@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------------------------------
* products
------------------------------------------------------------------------------------------------------------------------------- */
.main-ttl {
    background-image: url(/assets/img/products/title.jpg);
}

.products-content {
    padding: 160px 0 0;
}
@media screen and (max-width: 767px) {
    .products-content {
        padding: 16rem 5rem 0;
    }
}

.products-catch {
    text-align: center;
    color: #004386;
    font-family: 'Cinzel', serif;
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: 0.06em;
}
.products-catch-sub {
    margin: 20px 0 0;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .products-catch {
        font-size: 5.6rem;
    }
}

/* products-list */
.products-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 80px 0 0;
}
.products-list li a {
    display: flex;
    flex-direction: column;
    width: 484px;
    height: 180px;
}
.products-list li a .logo {
    height: 90px;
}
.products-list li a .logo-sankei {
    width: 208px;
}
.products-list li a .logo-dreik {
    width: 217px;
}
@media screen and (max-width: 767px) {
    .products-list {
        flex-direction: column;
        gap: 4rem 0;
        margin: 6rem 0 0;
    }
    .products-list li {
        width: 100%;
    }
    .products-list li a {
        width: 100%;
        height: 25rem;
    }
    .products-list li a .logo {
        height: auto;
        margin: 0 0 2rem;
    }
    .products-list li a .logo-sankei {
        width: 33rem;
    }
    .products-list li a .logo-dreik {
        width: 34.5rem;
    }
}


/* products-section */
.products-section-inner {
    width: 656px;
    margin: 0 auto;
}
.products-section-inner h4 {
    text-align: center;
    color: #004386;
    font-family: 'Cinzel', serif;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    margin: 0 0 20px;
}
@media screen and (max-width: 767px) {
    .products-section-inner {
        width: 100%;
    }
    .products-section-inner h4 {
        font-size: 4rem;
        margin: 0 0 4rem;
    }
}

.products-item-list {
    margin: 60px 0 0;
}
.products-item + .products-item {
    margin: 60px 0 0;
}
.products-item dl {
    padding: 20px 0 0;
}
.products-item-ttl {
    color: #004386;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
}
.products-item-type {
    font-weight: 700;
}
@media screen and (max-width: 767px) {
    .products-item-list {
        margin: 10rem 0 0;
    }
    .products-item + .products-item {
        margin: 10rem 0 0;
    }
    .products-item dl {
        padding: 4rem 0 0;
    }
    .products-item-ttl {
        font-size: 3.6rem;
    }
    .products-item-type {
        padding: 0 0 1rem 0;
        font-size: 2.4rem;
    }
}


/* sankei */
#sankei {
    padding: 180px 0 0;
}
.sankei-ttl {
    position: relative;
    width: 100%;
    height: 480px;
    background-image: url(/assets/img/products/sankei_title.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 0 110px;
}
.sankei-ttl h3 {
    position: absolute;
    left: calc(50% - 207px);
    bottom: -80px;
    width: 414px;
}
@media screen and (max-width: 767px) {
    #sankei {
        padding: 16rem 0 0;
    }
    .sankei-ttl {
        width: calc(100% + 10rem);
        height: 25rem;
        margin: 0 0 11rem -5rem;
        background-size: cover;
    }
    .sankei-ttl h3 {
        left: calc(50% - 20.7rem);
        bottom: -8rem;
        width: 41.4rem;
    }
}
@media screen and (min-width: 1440px) {
    .sankei-ttl {
        background-size: cover;
    }
}



/* dreik */
#dreik {
    padding: 180px 0 0;
}
.dreik-ttl {
    position: relative;
    width: 100%;
    height: 480px;
    background-image: url(/assets/img/products/dreik_title.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 0 110px;
}
.dreik-ttl h3 {
    position: absolute;
    left: calc(50% - 216px);
    bottom: -74px;
    width: 432px;
}
@media screen and (max-width: 767px) {
    #dreik {
        padding: 16rem 0 0;
    }
    .dreik-ttl {
        width: calc(100% + 10rem);
        height: 25rem;
        margin: 0 0 11rem -5rem;
        background-size: cover;
    }
    .dreik-ttl h3 {
        left: calc(50% - 21.6rem);
        bottom: -7.4rem;
        width: 43.2rem;
    }
}
@media screen and (min-width: 1440px) {
    .dreik-ttl {
        background-size: cover;
    }
}