@charset "utf-8";
/**************************************************

	SUPERBOARD :: PRODUCT SKIN :: basic

**************************************************/
/* list */
.prdt-tab1{padding:10px 0;margin-bottom: 40px;text-align:center;background:#f9f9fa;border-top:2px solid #ed1b24}
.prdt-tab1 li{position:relative;display: inline-block;padding:0 15px;margin: 0 -1px -1px 0;box-sizing: border-box;vertical-align:middle}
.prdt-tab1 li:not(:last-child)::before{content:'';position:absolute;width:1px;height:10px;top:50%;right:0;transform:translateY(-50%);background:#ddd}
.prdt-tab1 li a{display: block;text-align: center;font-size: 15px;line-height: 45px;text-decoration: none;color: #000}
.prdt-tab1 li.active a{font-weight:bold;color: #ed1b24}

.prdt-tab1 li.all a{font-size:20px}

.prdt-tab2{border-top: 2px solid #313f64;background: #f7f7f7;border-bottom: 1px solid #ddd;margin-bottom: 40px;text-align: center;padding: 20px 0;}
.prdt-tab2 li{display: inline-block;margin: 5px 10px;}
.prdt-tab2 li a{font-size: 14px;color: #000;}

.prdt-list{margin: -1%;}
.prdt-list li{position: relative;display: inline-block;margin: 1%;width: 23%;vertical-align: top;}
.prdt-list li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
.prdt-list li .tmb{position: relative;padding-bottom: 100%;background-position: center center;background-repeat: no-repeat;background-size: cover !important;}
.prdt-list li .tmb:before{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid rgba(0,0,0,0.1);box-sizing: border-box;transition: all 0.1s;}
.prdt-list li:hover .tmb:before{border: 4px solid #ed1b24}
.prdt-list li .info{padding: 20px 0;}
.prdt-list li .info > span{display: block;text-align: center;}
/* .prdt-list li .info .tit{font-size: 18px;color: #222222;letter-spacing: -1px;;font-weight: 300;} */
/* .prdt-list li .info .txt{font-size: 14px;color: #888888;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} */

.prdt-no-data{margin: 50px 0;text-align: center;font-size: 14px;color: #999;background: #f7f7f7;padding: 40px 0;font-style: italic;}


/* custom */
.prdt-list li .info .tit,
.prdt-list li .info .txt{font-family:Noto Sans;line-height:34px;letter-spacing:-0.045em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prdt-list li .info .tit{font-weight:bold;font-size:15px;color:#ed1b24}
.prdt-list li .info .txt{font-weight:500;font-size:20px;color:#333}
.logoList{display:flex;flex-flow:row nowrap;align-items:center;border:solid #ddd;border-width:1px 0 0 1px;box-sizing:border-box;margin-bottom:40px}
.logoList li{position:relative;width:calc(100% / 7)}
.logoList li a{position:relative;display:block;text-decoration:none;background-position:center;background-repeat:no-repeat;background-size:cover;padding-bottom:50.62%;border:solid #ddd;border-width:0 1px 1px 0}
.logoList li.active a::before{content:'';position:absolute;width:calc(100% - 4px);height:calc(100% - 4px);top:-1px;left:-1px;border:3px solid #ed1b24;z-index:1}
.logoList li.active a::after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);border-top:15px solid #ed1b24;border-left:15px solid transparent;;border-right:15px solid transparent}

.logoList li a img{}
.topTit{margin:50px 0}
.topTit h6{font-family:Noto Sans;line-height:54px;letter-spacing:-0.045em;font-size:40px;color:#333}

/* view */
.prdt-view{display:flex;flex-flow:row nowrap;align-items:center;zoom: 1;padding-bottom: 50px;}
.prdt-view:after{display: block;content: '';clear: both;}
.prdt-view > *{float: left;box-sizing: border-box;}
.prdt-view dt{padding-right:50px;width:calc(100% / 2 - 50px)}
.prdt-view dt .bigimg{position: relative;}
.prdt-view dt .bigimg img{max-width: 100%;max-height:700px;height: auto;}
.prdt-view dt .tmb-list{margin: -0.5%;margin-top: 20px;}
.prdt-view dt .tmb-list li{position: relative;display: inline-block;margin: 0.5%;width: 24%;}
.prdt-view dt .tmb-list li a{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
.prdt-view dt .tmb-list li .tmb{position: relative;padding-bottom: 100%;background-size: cover;background-repeat: no-repeat;background-position: center center;}

.prdt-view dd{margin:0 0 0 30px;width:calc(100% / 2 - 30px)}
.prdt-view dd .head{border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 25px;}
/* .prdt-view dd .head em{display: block;margin-bottom: 5px;font-style: normal;font-size: 17px;color: #505d7e;font-weight: 300;} */
/* .prdt-view dd .head h4{display: block;font-size: 35px;line-height: 42px;color: #222222;letter-spacing: -1px;font-weight: normal;} */
/* .prdt-view dd .txt{display: block;font-size: 16px;line-height: 26px;color: #888888;} */
.prdt-view dd .down{margin-top: 40px;}
/* .prdt-view dd .down a{display: inline-block;margin-right: 2px;background: #313f64;line-height: 35px;padding: 0 20px;text-decoration: none;font-size: 14px;color: #fff;} */

.prdt-tab{margin-bottom: 30px;border-bottom: 2px solid #666666;}
.prdt-tab li{position: relative;display: inline-block;vertical-align: top;margin-right: -1px;border: 1px solid #ddd;border-bottom: none;}
.prdt-tab li a{display: block;line-height: 45px;height: 45px;text-align: center;width: 210px;font-size: 16px;color: #999;letter-spacing: -1px;text-decoration: none;box-sizing: border-box;}
.prdt-tab li.active{border: 2px solid #666666;border-bottom: none;background: #fff;height: 47px;margin-bottom: -2px;z-index: 2;}
.prdt-tab li.active a{font-weight: 300;color: #333;}
.prdt-tab li.active a:after{content: '';display: inline-block;background: url(/superboard/images/sb_slt_spr.jpg) no-repeat center center;margin-left: 10px;width: 15px;height: 15px;vertical-align: middle;}

.prdt-tabCont{margin-bottom: 80px;}
.prdt-txtbox img{max-width: 100%;height: auto;}

/* custom */
.prdt-view dd *{font-family:Noto Sans;letter-spacing:-0.045em;color:#333}
.prdt-view .bigimg li{border:1px solid #ddd;box-sizing:border-box}
.prdt-view dd .head em{display:block;font-weight:bold;font-style:normal;line-height:34px;font-size:16px;color:#ed1b24}
.prdt-view dd .head h4{display:block;line-height:54px;font-size:34px;}
.prdt-view dd .txt{display:block;font-weight:300;line-height:28px;font-size:17px;color:#666}
.prdt-view dd .txt h5{display:block;line-height:28px;margin-bottom:10px;font-size:20px}
.prdt-view dd .down a{display:inline-block;background:#161b43;line-height:60px;padding:0 103px;text-decoration: none;border-radius:24px 0 24px 0;text-align:center;font-size:18px;color:#fff}
.prdt-view dd .down a.inq{margin-left:10px;background:#eee;color:#555}
#sb-footer .center .list{display:inline-block;font-family:Noto Sans;font-weight:normal;line-height:43px;letter-spacing:0;border-radius:3px;text-decoration:none;background:#444;border:none;padding:0 54px;font-size:15px;color:#fff}


@media screen and (max-width: 1300px) {

    /* list */
    .prdt-tab1{margin-bottom: 20px;}
    .prdt-tab1 li{width: 33.33%;}
    .prdt-tab1 li a{font-size: 13px;line-height: 35px;}

    .prdt-tab2{margin-bottom: 20px;padding: 15px 0;}
    .prdt-tab2 li{margin: 5px 8px;}
    .prdt-tab2 li a{font-size: 13px;}

    .prdt-list{margin: -1%;margin-top: 15px;}
    .prdt-list li{margin: 1%;width: 48%;}
    .prdt-list li .info{padding: 10px 0;}
    .prdt-list li .info .tit{font-size: 14px;}
    .prdt-list li .info .txt{font-size: 13px;}

    .prdt-no-data{margin: 50px 0;font-size: 13px;padding: 20px 0;}

    /* view */
    .prdt-view{padding-bottom: 40px;}
    .prdt-view > *{float: none;}
    /* .prdt-view dt{padding-right: 0;width: auto;} */
    .prdt-view dt .bigimg{text-align: center;}
    .prdt-view dt .bigimg img{max-height:500px;}
    .prdt-view dt .tmb-list{margin: -0.5%;margin-top: 10px;}

    /* .prdt-view dd{margin-top: 20px;padding-top: 10px;width: auto;} */
    .prdt-view dd .head em{font-size: 13px;}
    .prdt-view dd .head h4{font-size: 16px;line-height: 20px;font-weight: 300;}
    .prdt-view dd .txt{font-size: 13px;line-height: 20px;}
    .prdt-view dd .down{margin-top: 20px;}
    .prdt-view dd .down a{font-size: 13px;}

    .prdt-tab{margin-bottom: 20px;}
    .prdt-tab li{width: 33.33%;box-sizing: border-box;}
    .prdt-tab li a{line-height: 35px;height: 35px;width: auto;font-size: 13px;}
    .prdt-tab li.active{height: 38px;}
    .prdt-tab li.active a:after{margin-left: 5px;width: 10px;height: 10px;background-size: contain;}

    .prdt-tabCont{margin-bottom: 40px;}
    .prdt-txtbox{font-size: 13px;line-height: 19px;}

    .topTit{margin:25px 0}
    .topTit h6{line-height:24px;font-size:20px}

    .prdt-view{justify-content:center}
    .prdt-view dd .down a{width:calc(100% / 2 - 10px);padding:0 60px;margin:0 5px;box-sizing:border-box}
    .prdt-view dd .down a.inq{margin:0}
}

@media screen and (max-width: 750px) {
    .prdt-view{flex-flow:column wrap}
    .prdt-view dt,
    .prdt-view dd{width:100%;padding:10px 0;margin:10px 0}


    .logoList{flex-flow:row wrap}
    .logoList li{width:calc(100% / 4)}
}

@media screen and (max-width: 450px) {
    .prdt-view dd .down a{width:100%;padding:0 60px;margin:10px 0}
}
