@charset "utf-8";

/* ##### products common ##### */

#product_headerttl {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #ffffff;
    text-align: center;
    height: 1.5em;
    line-height: 1.5em;
    margin: auto;
    font-size: 2rem;
    letter-spacing: 0.25em;
}

.sub_products {
    background: #fc7e2a;
}
.sub_products_wrap {
    background: #ffffff;
    margin: 0 15px;
    border-radius: 1rem;
}
.sub_products .com_continner {
    max-width: 992px;
}

/* ## products_main ## */
#products_mainwrapper {
    display: flex;
}
.products_main_big {
    width: 89%;
}
.products_main_big img {
    display: none;
}
.products_main_big img:first-child {
    display: block;
    border-radius: 1rem;
}
.products_main_thumb {
    width: 11%;
    padding-left: 1.75%;
}
.products_main_thumb img {
    display: block;
    border-radius: 0.25em;
    cursor: pointer;
    transition: opacity 0.3s;
}
.products_main_thumb img:hover {
    opacity: 0.7;
}
.products_main_thumb img + img {
    margin-top: 4px;
}

/* ## products_disc ## */
#products_disc .com_continner:first-child {
    padding-top: 0;
}

/* ## products_catch ## */
.products_catch {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.products_catch_photo {
    width: 29%;
}
.products_catch_photo img {
    display: block;
    border-radius: 0.25em;
}
.products_catch_text {
    width: 71%;
    padding-left: 15px;
}
.products_catch_text strong {
    color: #fc7e2a;
    font-size: 2rem;
}

/* ## products_spec ## */
#products_spec .com_continner:first-child {
    padding-top: 0;
}
#product_specttl {
    padding-top: 40px;
    border-top: 1px solid #333333;
}
.products_spec_blocks {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.products_spec_block {
    width: 50%;
}
.products_spec_block:nth-child(odd) { padding-right: 1em; }
.products_spec_block:nth-child(even) { padding-left: 1em; }

.products_spec_additionals {
    display: flex;
    align-items: flex-end;
    margin: 1.5rem 0;
}

.prodcts_spec_additioal:nth-child(odd) {
    padding-right: 1em;
    white-space: nowrap;
}
.prodcts_spec_additioal:nth-child(even) { padding-left: 3em; }

/* ## products_related ## */
#products_related .com_continner { padding-top: 0; }
.products_relatedbox {
    display: flex;
}
.products_related_photo {
    width: 29%;
    overflow: hidden;
    border-radius: 0.5em 0 0 0.5em;
    transition: opacity 0.3s;
}
.products_related_photo:hover {
    opacity: 0.7;
}
.products_related_info {
    width: 71%;
    background: #f5f4f4;
    border-radius: 0 0.5em 0.5em 0;
    padding: 1em;
    line-height: 1.7;
}
.products_related_info strong.com_wpc {
    padding-bottom: 0.5em;
    display: inline-block;
}
.products_related_info .com_price {
    margin-top: 0.35em;
}


@media screen and (max-width: 767px) {
    #product_headerttl {
        font-size: 1.45rem;
    }
    .sub_products .com_continner {
        padding: 15px;
    }
    .products_main_big {
        width: 100%;
    }
    .products_main_thumb {
        display: none;
    }
    .products_spthumbs {
        display: flex;
        flex-wrap: wrap;
        margin: 1.5rem -1%;
    }
    .products_spthumbs a {
        width: 25%;
        padding: 1%;
    }
    .products_spthumbs a img {
        display: block;
        border-radius: 0.25em;
    }
    .products_catch_photo {
        width: 50%;
    } 
    .products_catch_text {
        width: 100%;
        padding: 1em 0;
    }
    .products_catch_text strong {
        font-size: 1.75rem;
    }
    .products_spec_block:nth-child(n) {
        width: 100%;
        padding: 0;
    }
    .products_spec_block {
        font-size: 1.1rem;
    }
    .products_spec_additionals {
        flex-wrap: wrap;
    }
    .prodcts_spec_additioal:nth-child(odd) {
        text-align: right;
    }
    .prodcts_spec_additioal:nth-child(n) {
        width: 100%;
        padding: 1em 0;
    }
    .products_related_photo {
        width: 45%;
    }
    .products_related_info {
        width: 55%;
        padding: 0.75em;
    }
    .products_related_info_out {
        padding:1em 0 ;
    }
}
@media screen and (max-width: 360px) {
    .products_related_photo {
        width: 40%;
    }
    .products_related_info {
        width: 60%;
        padding: 0.5em;
    }
}