@charset "utf-8";
/* CSS Document */

.banner_caption{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    width: 1024px;
    height: 100%;
    left: 0px;
    top: 0px;
    background-image: url("../images/banner_bg.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 20px 0px 80px;
}
.banner_caption h5{
    width: 300px;
    font-size: 4rem;
    color: #000;
    font-weight: 200;
    margin-bottom: 10px;
}
.banner_wording{
    width: 280px;
    font-size: 1.6rem;
    color: #333;
    line-height: 2;
}
.banner_wording p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    line-height: 1.7;
}
.products_caption{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    width: 380px;
    height: 100%;
    left: 0px;
    top: 0px;
    padding: 0px 20px 0px 60px;
    background-color: rgba(255,255,255,0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.products_caption h5{
    width: 300px;
    font-size: 4rem;
    color: #000;
    font-weight: 200;
    margin-bottom: 10px;
}
.section h3{
    width: 100%;
    color: #000;
    text-align: center;
    background-color: #ede3bf;
    margin: 0 0 20px 0;
    /*border-bottom: 1px solid #999;*/
    padding: 6px;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-image: url("../images/panel_bg.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    border-top: 4px solid #b9ad83;
    border-bottom: 1px solid #e1e1e1;
}
.items_wrap{
    width: 100%;
    padding: 0 1.1vw;
}
.section2 .items_wrap{
    padding: 0;
}
.section.promo_sort h3{
    border-bottom: 1px solid #dba200;
}
.section.promo_sort a{
    font-weight: 400;
    color: #333;
    font-size: 1.8rem;
}
.section.history_wrap h3{
    border-bottom: 1px solid #e79797;
}
.section h3:before{
    margin:-5px 5px 0 0;
    content:" ";
    display:inline-block;
    width:35px;
    height:35px;
    background-repeat: no-repeat;
    vertical-align:middle;
}
h3.promo_title:before{
    background:url("../images/box.png");
    background-size:contain;
}
h3.sort_title:before{
    background:url("../images/funnel.png");
    background-size:contain;
}
h3.company_title:before{
    background:url("../images/stock.png");
    background-size:contain;
}
h3.history_title:before{
    background:url("../images/history.png");
    background-size:contain;
}
h3.news_title:before{
    background:url("../images/newspaper.png");
    background-size:contain;
}
h3.certification_title:before {
    background: url(../images/certificate.png);
    background-size: contain;
}
h3.info_title:before {
    background: url(../images/article.png);
    background-size: contain;
}
h3.contact_title:before {
    background: url(../images/contact-mail.png);
    background-size: contain;
}
.items_wrap ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.items_wrap ul li{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 15vw;
    margin: 0 0.25vw 10px 0.25vw;
    margin-bottom: 20px;
}
.items_wrap.size3x3 ul li{
    width: 25.3vw;
}
.image_size{
    width: 100%;
    height: 10vw;
    overflow: hidden;
}
.items_wrap.size3x3 ul li .image_size{
    height: 17vw;
}
.image_wrap a img{
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.promotion ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.promotion ul li a img{
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.promotion ul li .products_title a{
    justify-content: flex-start;
    font-size: 1.6rem;
    font-weight: 500;
    color: #8f9f38;
}
.products_guide{
    font-size: 1.4rem;
    color: #000;
}
.caption_wrap{
    width: 100%;
}
.products_title{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 1.8rem;
    margin-bottom: 5px;
}
.products_title.category{
    justify-content: center;
    text-align: center;
}
.history_caption a{
    color: #fff;
}
.history_caption a:hover{
    color:#000;
}
.caption_wrap a{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.products_guide{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #666;
}
.products_guide a{
    display: inline;
}
.products_certified{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #666;
}
.history_caption .products_guide{
    color: #eee;
}
.inquiry_wrap {
    padding: 0 1.1vw;
}
@media screen and (max-width: 1366px) {

.banner_caption{
    padding: 0px 20px 0px 70px;
}
.items_wrap ul li{
    width: 17vw;
}
.image_size {
    height: 11.3vw;
}
.items_wrap.size3x3 ul li {
    width: 28.5vw;
}
.items_wrap.size3x3 ul li .image_size {
    height: 19vw;
}
}

@media screen and (max-width: 1180px) {

.items_wrap.size3x3 ul li{
    width: 28.7vw;
}
.items_wrap.size3x3 ul li .image_size {
    height: 19vw;
}
.banner_caption{
    background-position: left 0px bottom -30px;
}
}

@media screen and (max-width: 1024px) {

    .banner_caption {
        padding: 0px 20px 0px 60px;
    }
}

@media screen and (max-width: 820px) {

/*.banner_caption{
    background-position: left -50px top;
}*/
.banner_caption h5{
    margin-bottom: 0px;
}
.items_wrap ul li {
    width: 18vw;
}
.image_size {
    height: 12vw;
}
.items_wrap.size3x3 ul li {
    width: 30.3vw;
}
.items_wrap.size3x3 ul li .image_size {
    height: 20vw;
}
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 576px) {
.banner_caption h5{
    font-size: 1.8rem;
    color: #fff;
    font-weight: 600;
    text-shadow: 2px 2px 3px #333333;
}
.banner_wording{
    font-size: 1.4rem;
    color: #fff;
}
.banner_wording p {
    -webkit-line-clamp: 1;
    margin-bottom: 0px;
    text-shadow: 2px 2px 3px #333333;
}
.banner_caption{
    background-image: none;
}
.banner_caption{
    padding: 0px 20px 0px 50px;
    justify-content: flex-start;
}
.image_size {
    height: 60vw;
}
.items_wrap{
    padding: 0 10px;
}
.items_wrap h3{margin: 0 0 10px 0;}
.items_wrap ul li{
    width: 90vw;
    margin: 0 1vw 10px 1vw;
}
.items_wrap.promo_sort ul li{
    width: 42vw;
}
.items_wrap.promo_sort ul li .image_size {
    height: 28vw;
}
.items_wrap.size3x3 ul li {
    width: 90vw;
}
.items_wrap.size3x3 ul li .image_size {
    height: 60vw;
}
.products_caption {
    padding: 0px 20px 0px 50px;
    justify-content: flex-start;
    background-color:rgba(255,255,255,0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}
.products_caption h5 {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 600;
    text-shadow: 2px 2px 3px #333333;
    margin-bottom: 0px;
}
.products_caption .banner_wording{
    width: 270px;
}
.inquiry_wrap{
    padding: 10px;
}
}