/*
 * Theme Name: ST水道メンテナンス 
 * Description: ST水道メンテナンスのオリジナルテーマです
 * Author: 
 * Author URI: 
 * Version: 2.0
 */
/*商品一覧*/
#single-products-wrap{
    margin:0 auto;
    background-color: var(--colorDodgerBlue);
    background-image: radial-gradient(var(--colorPacificBlue) 20%, transparent 20%), radial-gradient(var(--colorPacificBlue) 20%, transparent 20%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
/*    font-family: "Noto Sans JP", sans-serif; */
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
#single-products-wrap .area1{
    text-align:center;
    border-top:1px solid #193264;
    border-bottom:1px solid #193264;
    padding:20px 0;
    background-color:#fff;
}
#single-products-wrap .area1 p{
    font-size:20px;
    font-weight:700;
}
#single-products-wrap .area1 p::before,
#single-products-wrap .area1 p::after{
    content:'↑↑↑';
    margin:0 20px;
}
#single-products-wrap .products-cat{
    width:100%;
    max-width:1200px;
    margin: 0 auto;
    padding: 60px 0;
}
#single-products-wrap .products-cat .cat-title{
    margin:20px auto;
    text-align:center;
    font-size:20px;
    font-weight:700;
    color:#0096eb;
    background-color:#ffffff;
    padding:10px 0;
}
#single-products-wrap .products-list{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
}
#single-products-wrap .products-items{
    border:1px solid #ffffff;
    padding:10px;
    background-color: #ffffff;
    margin: 2%;
}
#single-products-wrap .products-items .block-head{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
}
#single-products-wrap .products-items .block-head li{
    padding: 5px 4px;
    font-size: var(--fontSize13);
    min-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color:#fff;
    font-size:12px;
}
#single-products-wrap .products-items .block-head li:nth-of-type(1){
    background-color:#fd577e;
    font-size: 12px;
}
#single-products-wrap .products-items .block-head li:nth-of-type(3){background-color:#ffd665; color: inherit;}
#single-products-wrap .products-items .block-head li.type1{background-color:#f25d1c;}
#single-products-wrap .products-items .block-head li.type2{background-color:#10b7ee;}
#single-products-wrap .products-items .block-head li.type3{background-color:#00c84b;}
#single-products-wrap .products-items .thumb{
    margin:20px auto;
    display:block;
    width:100%;
    max-width:1080px;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#single-products-wrap .products-items .thumb img{
    width: 100%;
    height: 200px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}
#single-products-wrap .products-items .products_no,
#single-products-wrap .products-items .products_maker{
    margin: 5px auto;
    text-align: center;
    font-size: 18px;
}
#single-products-wrap .products-items .products_no{
    height: auto;
    min-height: calc(18px * 2 * 1.4);
    word-break: break-word;
}
#single-products-wrap .products-items .block-tags{
    display:inline-block;
    margin:10px auto;
    color: #333333;
    font-size: 12px;
    height: auto;
    min-height: calc(12px * 3 * 1.4);
}
#single-products-wrap .products-items .block-tags span{word-break: break-all;line-height: 1.4;}
#single-products-wrap .products-items .block-tags span::before{
    content:'│';
    margin:0 2px;
	display: inline-block;
}
#single-products-wrap .products-items .block-tags span:nth-of-type(1)::before{
    content:'';
}
#single-products-wrap .products-items .block-price1,
#single-products-wrap .products-items .block-price2{
    text-align: center;
    margin: 20px auto;
}
#single-products-wrap .products-items .block-price2 p{
    color:#ff0000;
    font-size:var(--fontSize20);
}
#single-products-wrap .products-items .block-price2 p span{
    font-size:var(--fontSize28);
}
#single-products-wrap .products-items .btn-block{margin: 20px auto;}
#single-products-wrap .products-items .btn-block .btn{
    background-color:#ffff00;
    width: 50%;
    height: 36px;
    margin: 0 auto;
    display: flex;
    color:var(--colorDeepSkyBlue);
    justify-content: center;
    align-items: center;
    border: 1px solid var(--colorDeepSkyBlue);
}
#single-products-wrap .products-items .btn-block .btn:hover{
    background-color: var(--colorDeepSkyBlue);
    color:#ffffff;
}
/*商品詳細*/
#page-products-wrap{
    background-color: var(--colorDodgerBlue);
    background-image: radial-gradient(var(--colorPacificBlue) 20%, transparent 20%), radial-gradient(var(--colorPacificBlue) 20%, transparent 20%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    padding: 40px 0;
/*    font-family: "Noto Sans JP", sans-serif; */
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
#page-products-wrap .products-item{
    background-color: #fff;
    width:100%;
    max-width:780px;
    margin:0 auto;
    padding: 1%;
}
#page-products-wrap .block1{
    background-color:rgba(0, 150, 235, 0.1);
    padding:15px;
    text-align:center;
    font-size:var(--fontSize20);
}
#page-products-wrap .block1 .products_tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:10px auto 0;
    font-size:var(--fontSize16);
    color: #333333;
}
#page-products-wrap .block1 .products_tags li::before{
    content:'│';
    margin:0 2px;
}
#page-products-wrap .block1 .products_tags li:nth-of-type(1)::before{
    content:'';
}
#page-products-wrap .thumb{
    position: relative;
    margin: 20px auto;
}
#page-products-wrap .thumb img{
    margin: 0 auto;
    display: block;
    width: 90%;
    height: auto;
    max-width: 400px;
}
#page-products-wrap .thumb .point{
    position: absolute;
    right: 10px;
    background-color: #fff;
    padding: 0 20px;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    box-shadow: 2px 2px 2px var(--colorGrey);
    font-size:var(--fontSize24);
}
#page-products-wrap .thumb .point1{top:10px;}
#page-products-wrap .thumb .point2{top:56px;}
#page-products-wrap .thumb .point3{top:102px;}
#page-products-wrap .block-price1{
    margin: 40px auto;
    position: relative;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
#page-products-wrap .block-price1 dt{
    background-color:rgba(0, 150, 235, 1.0);
    color:#fff;
    padding:10px;
    text-align:center;
    border:solid 1px rgba(0, 150, 235, 1.0);
    position:relative;
}
#page-products-wrap .block-price1 dt span{
    display:block;
    font-size:20px;
    margin:5px auto 0;
}
#page-products-wrap .block-price1 dt::after{
    content:'';
    position:absolute;
    top:50%;
    right:-28px;
    transform:translateY(-50%);
    border:10px solid transparent;
    border-left:16px solid rgba(0, 150, 235, 1.0);
}
#page-products-wrap .block-price1 dd{
    color:rgba(0, 150, 235, 1.0);
    font-size:30px;
    font-weight:900;
    border:solid 1px rgba(0, 150, 235, 1.0);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 10px 10px 40px;
}

#page-products-wrap .block-price2,
#page-products-wrap .block-price3{
    text-align: center;
    margin: 10px auto;
}
#page-products-wrap .block-price2 p{color: #333333;}
#page-products-wrap .block-price3 p{color:#ff0000;font-size:32px;}
#page-products-wrap .block-price3 p span{font-size:45px;}
#page-products-wrap .products_spec{
    display: grid;
    grid-template-columns: 60px 1fr;
    justify-content: center;
    align-items: stretch;
    margin: 40px auto;
    color: #333333;
}
#page-products-wrap .products_spec .label{
    border: 1px solid rgba(0, 150, 235, 0.5);
    height: 100%;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    background-color: rgba(0, 150, 235, 0.1);
}
#page-products-wrap .products_spec .tbl{
    border: 1px solid rgba(0, 150, 235, 0.5);
}
#page-products-wrap .products_spec dl{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border-bottom:1px solid rgba(0, 150, 235, 0.5);
    margin:-1px auto 0;
}
#page-products-wrap .products_spec dl:last-of-type{border-bottom: none;}
#page-products-wrap .products_spec dt{
    background-color:rgba(0, 150, 235, 0.1);
    width:30%;
    padding:10px;
}
#page-products-wrap .products_spec dd{
    width:60%;
    border-left:1px solid rgba(0, 150, 235, 0.5);
    padding:7px 10px;
}
#page-products-wrap .block-btn{
    margin:60px auto;
    width:100%;
    max-width:1080px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
#page-products-wrap .block-btn .contact-btn{
    width: 100%;
    height: 56px;
    margin: 0 auto;
    border-radius: 5px;
    gap: 0 5px;
    background-color: var(--colorCatalinaBlue);
    box-shadow: 3px 3px 3px 0.15px rgba(0, 0, 0, 0.1);
    color: var(--colorWhite);
    font-size: var(--fontSize20);
}
#page-products-wrap .block-btn .contact-btn:nth-of-type(2){background-color:#00c84b;}
#page-products-wrap .block-btn .contact-btn a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
#page-products-wrap .block-btn .contact-btn p{display: flex;align-items: center;}
#page-products-wrap .block-btn .contact-btn p::before{
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 30px;
}
#page-products-wrap .block-btn .contact-btn:nth-of-type(1) p::before{
    height: 30px;
    background-image: url(https://st-suido.com/st-suido-maintenance/wp-content/uploads/2024/09/tel.png);
    background-size: contain;
    vertical-align: middle;
}
#page-products-wrap .block-btn .contact-btn:nth-of-type(2) p::before{
    height: 28px;
    background-image: url(https://st-suido.com/st-suido-maintenance/wp-content/uploads/2024/09/icn_line.png);
    background-size: contain;
    vertical-align: middle;
}
#add-FloatingBanner{
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
}
#add-FloatingBanner ul{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

#add-FloatingBanner li{position: relative;}
#btn-closed1, #btn-closed2{display: none;}
.btn-closed1, .btn-closed2{
    position: absolute;
    top: -32px;
    right: 0;
}
#btn-closed1:checked+label+.FloatingBanner1, #btn-closed1:checked+label{display: none;}
#btn-closed2:checked+label+.FloatingBanner2, #btn-closed2:checked+label{display: none;}
/**スマホ対応**/
@media screen and (max-width: 500px) {
    #single-products-wrap .products-list{
        grid-template-columns: repeat(2, minmax(48%, 1fr));
        gap: 10px;
    }
    #single-products-wrap .area1 p{font-size: 14px;}
    #page-products-wrap .block-price1{width: 94%;}
    #page-products-wrap .block-price1 dt{font-size: 13px;}
    #page-products-wrap .block-price1 dd{
        padding: 10px 10px 10px 20px;
        font-size: 26px;
    }
    #page-products-wrap .products_spec{grid-template-columns: 1fr;}
    #page-products-wrap .products_spec .label{
        writing-mode: lr-tb;
        padding: 10px 0;
        border-bottom: none;
        border-right: 1px solid rgba(0, 150, 235, 0.5);
    }
    #page-products-wrap .block-btn{
        flex-direction: column;
        width: 94%;
    }
    #l-header .l-inner .gnv-sp li:nth-of-type(1){
        width: 50vw !important;
    }
    #l-header .l-inner .gnv-sp li a.-sale, #l-header .l-inner .gnv-sp li div.-sale{background-color: #a25595;}
    #l-header .l-inner .gnv-sp li a.-sale::before, #l-header .l-inner .gnv-sp li div.-sale::before{
        width: 6.6666666667vw;
        height: 5.7333333333vw;
        background-image: url(https://st-suido.com/st-suido-maintenance/wp-content/uploads/2024/10/sale.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    #add-FloatingBanner{
        width: 96%;
        left: 50%;
        transform: translateX(-50%);
    }
    .btn-closed1, .btn-closed2{top: -36px;}
    #add-FloatingBanner img{width: 100%;}
    #add-FloatingBanner .onlyPC{display: none;}
}
/**スマホ対応**/