@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:ital,wght@1,500&display=swap');


.wrap-content{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
.wrap-defaultcont{
    padding-bottom: 80px;
}
.wf-a{
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    font-weight: 500;
}
#products-list img{
    vertical-align: bottom;
}
#products-list section + section{
    margin-top: 120px;
}


@media only screen and (max-width:639px) {
    .wrap-defaultcont{
        padding-bottom: 24px;
    }
    #products-list section + section{
        margin-top: 64px;
    }
}

@media screen and (max-width: 480px){
    #wrapContent #wrap_mainContent .contens {
        margin: 0 auto;
        padding: 0 20px;
    }
}




#products-list .lead{
    font-size: 15px;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: 400;
}

#products-list .marker li{
    position: relative;
    padding-left: 1em;
}
#products-list .marker li:before{
    content: "";
    position: absolute;
    top: 0.9em;
    left: 0;
    display: block;
    height: 1px;
    width: 0.7em;
    background-color: #555;
}
#products-list{
    color: #333;
}

#products-list *{
    box-sizing: border-box;
    /* outline: 1px solid #00ff33; */
}

#products-list .title-wrap{
    padding: 60px 0 77px;
}
#products-list .brand-name h1{
    font-size: 60px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}
#products-list .brand-name h2{
    font-size: 24px;
    line-height: 1;
    letter-spacing: 1.71px;
    text-align: center;
    font-weight: 700;
    margin-top: 0.5em;
}
#products-list .headding{
    padding: 0;
    width: 20px;
    height: 34px;
    margin: 14px auto 0;
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22com-part1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020.9%2034.5%22%20style%3D%22enable-background%3Anew%200%200%2020.9%2034.5%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23555555%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.4%22%20y1%3D%2234.3%22%20x2%3D%2220.4%22%20y2%3D%220.3%22%2F%3E%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
}

#products-list .title-h2.new{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#products-list .title-h2.new:before{
    content: "NEW";
    display: inline-block;
    background-color: #B93D3D;
    color: #FFF;
    padding: 0.3em 0.4em;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-right: 0.5em;
}
#products-list .title-h2{
    font-size: 28px;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.2;
}
#products-list .title-h3{
    font-size: 18px;
    letter-spacing: 0;
    line-height: 29px;
    font-weight: 500;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}
#products-list .btn-wrap{
    margin-top: 20px;
}
#products-list .link-ec{
    max-width: 300px;
    text-align: center;
    margin-top: 20px;
}

#products-list .link-ec a{
    position: relative;
    font-size: 18px;
    display: block;
    color: #333;
}

#products-list .link-ec a::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 24%;
    margin: auto;
    width: 14px;
    height: 14px;
    background: url(../images/icn_blank.png) no-repeat;
    background-size: contain;
}

#products-list .link-ec a:hover{
    opacity: 0.6;
}

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

    #products-list .title-wrap{
        padding: 40px 0 32px;
    }
    #products-list .brand-name h1{
        font-size: 42px;
        font-weight: 500;
    }
    #products-list .brand-name h2{
        font-size: 16px;
        letter-spacing: 1px;
    }
    #products-list .headding{
        padding: 0;
        width: 13px;
        height: 23px;
        margin: 12px auto 0;
    }
    #products-list .title-h2.new:before{
        margin-right: 0;
        margin-right: 0.6em;
    }
    #products-list .title-h3{
        font-size: 16px;
        line-height: 26px;
        margin-top: 0.6em;
        margin-bottom: 0.6em;
    }
    #products-list .title-h3 br {
        display: none;
    }
    #products-list .lead{
        font-size: 13px;
        line-height: 23px;
    }
    #products-list .link-ec{
        margin: 20px auto 0;
    }
}



#products-list .elem-slide{
    max-width: 320px;
    margin-left: auto;
    margin-right: 12%;
}
#products-list .elem-slide img{
    width: 100%;
}

#products-list .box-imgchg{
    border: 1px solid #555;
}
#products-list .box-imgchg .thumb-bgsizer{
    opacity: 0;
    position: relative;
}
#products-list .box-btns{
    margin-top: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
#products-list .btn-imgchg+.btn-imgchg{
    margin-left: 5px;
}
#products-list .btn-imgchg{
    position: relative;
    border: 1px solid #FFF;
    width: 34px;
    height: 34px;
    padding: 4px;
}
#products-list .btn-imgchg:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #123123;
}

#products-list .btn-imgchg.active{
    border: 1px solid #555;
}

#products-list .btn-imgchg.color1a:after{
    background-color: #D8D8D8;
}
#products-list .btn-imgchg.color1b:after{
    background-color: #222222;
}
#products-list .btn-imgchg.color2a:after{
    background-color: #222222;
}
#products-list .btn-imgchg.color2b:after{
    background-color: #D8D8D8;
}
#products-list .btn-imgchg.color2c:after{
    background-color: #dbd4bd;
}
#products-list .btn-imgchg.color2d:after{
    background-color: #123123;
}
#products-list .btn-imgchg.color3a:after{
    background-color: #CA9F89;
}
#products-list .btn-imgchg.color3b:after{
    background-color: #222222;
}
#products-list .btn-imgchg.color3c:after{
    background-color: #D8D8D8;
}
#products-list .btn-imgchg.color3d:after{
    background-color: #A9D9E5;
}



@media only screen and (max-width:639px) {
    #products-list .elem-slide{
        max-width: 75%; /* 100% */
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    #products-list .box-imgchg{
        -webkit-box-flex:1;
        -ms-flex:1;
        flex:1;
    }
    #products-list .box-btns{
        width: 55px;
        margin-top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    #products-list .btn-imgchg+.btn-imgchg{
        margin-left: 0;
    }
}



#page.nolimit {
    width: 100%;
    max-width: none;
}
#wrapContent #wrap_mainContent .contens {
    padding: 0;
}
.exceptionWrap {
    /* outline: 1px solid #B93D3D; */
    max-width: 976px;
    width: 100%;
    margin: 0 auto;
    display: block;
}
@media print,screen and (max-width: 640px) {
    .exceptionWrap {
        /* padding: 0 10px; */
        padding-left: 10px;
        padding-right: 10px;
        max-width: none;
        box-sizing: border-box;
    }
    .exceptionWrap>section{
        padding-left: 10px;
        padding-right: 10px;
    }
}
#products-list .sect-ftbnr{
    background-color: #F5F5F5;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 115px;
}
#products-list .sect-ftbnr .title-h2{
    position: relative;
    display: block;
    font-size: 28px;
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid #DDD;
    margin-bottom: 32px;
    padding-bottom: 20px;
}
#products-list .sect-ftbnr .title-h2:after{
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: calc(50% - 20px);
    width: 40px;
    height: 1px;
    background-color: #555;
}

#products-list .elem-ftbnr img{
    width: 100%;
}
#products-list .elem-ftbnr{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -3.35%;
    /*動画誘導の更新*/
    margin-bottom:20px;
}
#products-list .elem-ftbnr>.box{
    width: 50%;
    padding: 0 3.35%;
}
/* #products-list .elem-ftbnr>.box:nth-child(even){
    padding-left: 6.7%;
} */

#products-list .elem-ftbnr .thumb-txt{
    font-size: 18px;
    line-height: 29px;
    font-weight: 500;
    padding-top: 1em;
    color: #333;
}
@media print,screen and (max-width: 640px) {
    #products-list .sect-ftbnr .exceptionWrap{
        padding-left: 20px;
        padding-right: 20px;
    }
    #products-list .sect-ftbnr{
        padding-top: 65px;
        padding-bottom: 65px;
    }
    #products-list .sect-ftbnr .title-h2{
        font-size: 20px;
        margin-bottom: 40px;
        padding-bottom: 20px;
    }
    #products-list .elem-ftbnr{
        display: block;
        margin: 0 auto;
        /*動画誘導の更新*/
        margin-bottom:20px;
    }
    #products-list .elem-ftbnr>.box+.box{
        margin-top: 3em;
    }
    #products-list .elem-ftbnr>.box{
        width: 100%;
        padding: 0;
    }
    #products-list .elem-ftbnr>.box:nth-child(even){
        padding-left: 0;
    }
}





.btn-imgchg{
    cursor: pointer;
    text-decoration: underline;
    /* color: #0273ab; */
}
.btn-imgchg.active{
    text-decoration: none;
    pointer-events: none;
    /* color: #b8995c; */
}
.box-imgchg{
    position: relative;
}
.box-imgchg a{
    position: relative;
    display: block;
}
.box-imgchg .thumb{
    position: absolute;
    z-index: 0;
    opacity: 0;
}
.box-imgchg .active{
    z-index: 1;
    opacity: 1;

    -webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
}
@media only screen and (min-width:640px) {
    .btn-imgchg:hover{
        opacity: 0.6;
    }
}





a.com-btn-elli{
    color: #FFF;
    text-decoration: none;
}
.com-btn-elli{
	font-size: 15px;
	height: 50px;
	line-height: 50px;
	border-radius: 25px;
	min-width: 300px;
	/* padding: 0 2em; */
	position: relative;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	color: #FFF;
    background-color: #555;
}
.com-btn-elli:hover{
    background-color: #757575;
}
.com-btn-elli:after{
	content: "";
	position: absolute;
	top: calc(50% - 6px);
	right: 14px;
	display: block;
	width: 17.5px;
	height: 12px;
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22part2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2018.2%2012.7%22%20style%3D%22enable-background%3Anew%200%200%2018.2%2012.7%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A2%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cline%20class%3D%22st0%22%20x1%3D%220%22%20y1%3D%226.4%22%20x2%3D%2217%22%20y2%3D%226.4%22%2F%3E%3Cpolyline%20class%3D%22st0%22%20points%3D%2211.5%2C0.4%2017.5%2C6.4%2011.5%2C12.4%20%22%2F%3E%3C%2Fsvg%3E');

	background-repeat: no-repeat;
	background-size: 17.5px 12px;
}



@media only screen and (max-width:639px) {
    .com-btn-elli{
        min-width: 300px;
        width: 100%;
    }
}