@charset "UTF-8";

/** ***********************************************

Last Modified:2020/08/12

*********************************************** **/

/** ***********************************************

TOP SLIDE

*********************************************** **/

#slider{padding: 0 0 30px; overflow: hidden}
#slider a:hover{opacity: 1}
#slider .slick{overflow: hidden; width: 100%; position: relative}
#slider .slick-arrow{margin-top: -60px}
#slider .slick-dots{bottom:0px}
#slider .slick-dots li{width: 12px; height: 12px; margin: 0 4px; border:solid 1px #ccc}
#slider .slick-dots li.slick-active{background-color:#0052a5;border:solid 1px #0052a5}



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

#slider .inner{padding: 0}
#slider .slick{padding-bottom: 30px}
#slider .slick-dots{bottom:0px}
#slider .slick-dots li{width: 8px; height: 8px; margin: 0 2px}

} 


/** ***********************************************

TOP TAB

*********************************************** **/
#top-tab-menu{background-color: #eee; color:#fff; font-size: 0; position: relative; padding-top: 10px}

#top-tab-menu li{display: inline-block; vertical-align: middle;}
#top-tab-menu li a{display: block; background-color: #333; color:#fff; font-size: 16px; ; position: relative; padding: 20px 50px; text-align: center; border-right:solid 1px #fff;border-top:1px solid #333;letter-spacing: 1px}

#top-tab-menu li a.selected{background-color:#fff; color:#333;}
#top-tab-menu li a i{position: absolute; top:50%; right: 20px; margin-top: -9px; font-size: 18px; color:#333}
#top-tab-menu li a.selected i{color:#333;}
#top-tab-menu a.info{color:#333;font-weight: 400; position: absolute; top:50%; margin-top: -13px; right: 20px; font-size: 15px; letter-spacing: 1px}


@media screen and (max-width: 1000px) {
#top-tab-menu li a{font-size: 14px; padding: 20px}
#top-tab-menu li a i{display: none}
} 

@media screen and (max-width: 700px) {
#top-tab-menu a.info{display: none}
}


@media screen and (max-width: 500px) {
#top-tab-menu{width: 100%; overflow: hidden}
#top-tab-menu ul{display: table-cell}
#top-tab-menu li a{padding: 20px 10px}
} 


#wrap-top-tab .wrap-panels{background-color:#fff;min-height: 500px; padding: 30px}

.top-tile li{padding: 10px; position: relative} 
.top-tile li .icon-window{width: 10px; height: auto;  margin-left: 4px; vertical-align: middle}

.top-tile li i.icon{font-size: 12px; padding: 3px 10px; color:#fff; font-style: normal;letter-spacing: 1px;display: block; width: 80px; text-align: center; margin: 20px ; margin-bottom: 0}
.top-tile li i.icon-1{background-color: #fff;border:solid 1px #de1c24; color:#de1c24}
.top-tile li i.icon-2{background-color:#e25a24;color:#fff}
.top-tile li i.icon-3{background-color:#22a673;color:#fff}




/** 新製品 **/

.top-tile li.type-1 a{background-color: #eee; display: block; min-height: 360px; position: relative; }
.top-tile li.type-1 .wrap-img{text-align: center; display: block; width:100%; height: 220px; vertical-align: middle; overflow: hidden; position: relative}
.top-tile li.type-1 .wrap-img img{max-width:200px; max-height: 200px; width: auto; height: auto;  position: absolute; top:0; left: 0; right:0; bottom:0; margin: auto;}

.top-tile li.type-1 p.p1{font-size: 13px; padding: 10px 20px 0; letter-spacing: 1px}
.top-tile li.type-1 p.p2{font-size: 16px; font-weight: bold; padding: 5px 20px; letter-spacing: 1px; margin-left: 1em; text-indent: -1em}
.top-tile li.type-1 p.p2::before{content:"▶"; font-size: 10px; margin-right: 5px}



/** 検索 **/
.top-tile li.col-search{width: 50%; display: inline-block;vertical-align: top; }
.top-tile li.col-search .in{background-color: #e4eaf2; min-height: 360px; position: relative; font-size: 14px; letter-spacing: normal}
.top-tile li.col-search .p1{font-size: 18px;font-weight: bold; padding: 20px}
.top-tile li.col-search .p1 i{margin-right:10px}
.top-tile li.col-search .bt-2{margin-top: 60px}
.top-tile li.col-search .link{text-align: center}
.top-tile li.col-search .link a{font-size: 16px;color:#0052a5}



/** 特集 **/
.top-tile li.type-2{ width :33.33333%; width : -webkit-calc((100%) / 3) ; width : calc((100%) / 3)}
.top-tile li.type-2 a{display: block;position: relative; text-align: center; background-color: #fff;border:solid 1px #fff;padding-bottom:0px}
.top-tile li.type-2 .wrap-img{background-position: 50% 50%!important; background-size: cover; }
.top-tile li.type-2 .p1{font-size: 16px; font-weight: bold; padding: 15px 0;padding-bottom: 0; letter-spacing: 1px; width: 100%; text-align: left; margin-left: 1em; text-indent: -1em}
.top-tile li.type-2 .p1::before{content:"▶"; font-size: 10px; margin-right: 5px}
.top-tile li.type-2 .p2{font-size: 15px!important; padding: 10px 20px; letter-spacing: 1px; width: 100%;text-align: left}


.top-tile li.col-2{width: 25%}
.top-tile li.event p{padding: 15px 0px; font-size: 16px; color:#333; text-align: left;letter-spacing: 1px;line-height: 160%;}
.top-tile li .no-img{background-image: url(../images/common/logo-2.svg); min-height: 180px; background-position: top 10px center;background-size: 140px 140px; background-color: #fff; border:solid 1px #ddd}




/** イベント **/
.top-tile li.type-3 a{display: block;position: relative; background-color: #fff;border:solid 1px #fff}
.top-tile li.type-3 .wrap-img{min-height: 160px; background-position: 50% 50%!important; background-size: cover; }
.top-tile li.type-3 p.p1{font-size: 16px; font-weight: bold; padding: 10px 0;padding-bottom: 0; letter-spacing: 1px; margin-left: 1em; text-indent: -1em; text-align: left}
.top-tile li.type-3 p.p1::before{content:"▶"; font-size: 10px; margin-right: 5px}
.top-tile li.type-3 p.p2{font-size: 15px!important; padding: 10px 0px; letter-spacing: 1px; width: 100%;text-align: left}
.top-tile li.ev .p2 p{font-size: 15px!important; padding: 10px 0px; letter-spacing: 1px; width: 100%;text-align: left}
.top-tile li.type-3 i.icon{margin: 10px 0 0}

/** SNS **/
.top-tile li.sns{width: 50%}
.top-tile li.sns .in{background-color: #fff; border:solid 1px #ddd; padding: 30px 0}
.top-tile li.sns .item-1{display: inline-block; width: 30%; text-align: center; vertical-align: middle}
.top-tile li.sns .item-2{display: inline-block; width: 60%; vertical-align: middle; text-align: center}
.top-tile li.sns img{width: 50px; height: 50px;}
.top-tile li.sns a{margin: 0 5px}
.top-tile li.sns .item-1 p{letter-spacing: 1.5px; line-height: 200%}
.top-tile li.sns .item-1 p strong{display:block; font-size: 16px; }




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

/** ZOOM **/
.top-tile li.type-1 .wrap-img img,
.top-tile li.type-2 .wrap-img,
.top-tile li.type-3 .wrap-img,
.top-tile li.type-4 .wrap-img,
.zoom{
	overflow: hidden;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.top-tile li.type-1:hover .wrap-img img,
.top-tile li.type-2:hover .wrap-img,
.top-tile li.type-3:hover .wrap-img,
.top-tile li.type-4:hover .wrap-img,
.zoom:hover{
	-webkit-transform: scale(1.05);
    transform: scale(1.05);
}

}



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

#wrap-top-tab .wrap-panels{padding: 30px 0}
.top-tile li.col-search .bt-2{margin: 50px 20px}
.top-tile li{padding: 5px}
.top-tile li.type-1 p{font-size: 13px}

}


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



/** 新製品 **/

.top-tile li.type-1 a{min-height: 340px}
.top-tile li.type-1 .wrap-img{height: 170px}
.top-tile li.type-1 .wrap-img img{max-width:150px; max-height: 150px}
.top-tile li.type-1 p.p1{font-size: 12px; padding: 10px 10px 0}
.top-tile li.type-1 p.p2{font-size: 14px; padding: 5px 10px}



/** 検索 **/

.top-tile li.col-search .in{min-height: 340px}
.top-tile li.col-search .p1{font-size: 16px}
.top-tile li.col-search .p1 i{margin-right:10px}
.top-tile li.col-search .bt-2{margin-top: 60px; font-size: 16px}
.top-tile li.col-search .link{text-align: center}
.top-tile li.col-search .link a{font-size: 16px;color:#0052a5}



/** 特集 **/
.top-tile li.type-2{ width :50%}
.top-tile li.type-2 a{display: block;min-height: 326px; position: relative; text-align: center; background-color: #fff;border:solid 1px #ddd}
.top-tile li.type-2 .wrap-img{min-height: 180px; background-position: 50% 50%!important; background-size: cover; }
.top-tile li.type-2 .p1{font-size: 14px;padding: 20px 20px 0 10px}
.top-tile li.type-2 .p2{padding: 10px}



/** イベント**/
.top-tile li.type-3{width: 50%}
.top-tile li.type-3 a{min-height: 326px}
.top-tile li.type-3 .wrap-img{min-height: 180px}
.top-tile li.type-3 p.p1{font-size: 14px}
.top-tile li.type-3 p.p2{font-size: 12px!important}



/** SNS **/
.top-tile li.sns{width: 100%}
.top-tile li.sns .in{padding: 20px 0}
.top-tile li.sns .item-1{display: block; width: 100%; padding-bottom: 20px}
.top-tile li.sns .item-2{display: block; width: 100%}


}

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

.top-tile li i.icon{font-size: 10px; padding: 3px 10px; width: 70px; margin: 10px; margin-bottom: 0}
.pd-all{font-size: 10px}


/** 新製品 **/
.top-tile li.type-1{width: 100%}
.top-tile li.type-1 a{min-height: inherit}
.top-tile li.type-1 .wrap-img{text-align: center; display: inline-block; width:38%; height: 150px; padding: 15px}
.top-tile li.type-1 .wrap-img img{max-width:120px; max-height: 120px; width: auto; height: auto; vertical-align: middle}
.top-tile li.type-1 .wrap-txt{display: inline-block; width:60%; vertical-align: middle; border-top:none}
.top-tile li.type-1 p.p1{font-size: 10px;padding: 10px 10px 0}
.top-tile li.type-1 p.p2{font-size: 12px; padding: 5px 10px}



/** 検索 **/
.top-tile li.col-search{width: 100%}
.top-tile li.col-search .in{min-height: inherit; padding-bottom: 30px}
.top-tile li.col-search .p1{font-size: 15px}
.top-tile li.col-search .bt-2{margin-top: 0px; margin-bottom: 20px; font-size: 14px;padding:20px 10px}
.top-tile li.col-search .link a{font-size: 12px}




/** 特集 **/
.top-tile li.type-2{width: 100%}
.top-tile li.type-2 a{min-height: 150px}
.top-tile li.type-2 .wrap-img{min-height: 150px}
.top-tile li.type-2 h4{font-size: 14px; padding: 20px; padding-bottom: 10px}
.top-tile li.type-2 p{font-size: 12px!important; padding: 0 20px 10px;}



/** イベント**/
.top-tile li.type-3{width: 100%}
.top-tile li.type-3 a{min-height: 150px}
.top-tile li.type-3 .wrap-img{min-height: 150px}
.top-tile li.type-3 p.p1{font-size: 14px}
.top-tile li.type-3 p.p2{font-size: 12px!important}



} 




/** ***********************************************

TOP TAB2

*********************************************** **/

#tab-2 h4.title-h4{margin-left: 10px;}
#tab-2 .cols-5{margin-bottom: 30px}


.top-tile li.type-cat a{background-color: #fff; display: block; min-height: 260px; position: relative; border:solid 1px #ddd}
.top-tile li.type-cat .wrap-img{text-align: center; display: block; width:100%; height: 200px; vertical-align: middle; overflow: hidden; position: relative}
.top-tile li.type-cat .wrap-img img{max-width:162px; max-height: 140px; width: auto; height: auto;  position: absolute; top:0; left: 0; right:0; bottom:0; margin: auto;}

.top-tile li.type-cat p.p1{font-size: 15px; font-weight: bold; padding: 5px 20px; letter-spacing: 1px; margin-left: 1em; text-indent: -1em}
.top-tile li.type-cat p.p1 img{width: auto; height: 10px; vertical-align: middle}
.top-tile li.type-cat p.p1::before{content:"▶"; font-size: 10px; margin-right: 5px}

.top-tile li.hojin a{background-color:#0052a5; color:#fff; border:solid 1px #0052a5}



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

.top-tile li.type-cat {width: 25%}

}

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

.top-tile li.type-cat {width: 50%}
.top-tile li.type-cat a{min-height: 200px}
.top-tile li.type-cat .wrap-img{height: 140px}
.top-tile li.type-cat .wrap-img img{max-width:120px; max-height: 120px}
.top-tile li.type-cat p.p1{font-size: 12px}
}


/** ***********************************************

TOP SHOP

*********************************************** **/

#top-shop{background-color: #fff}
#top-shop .inner{padding: 50px 0; text-align: center}
#top-shop .title-1{margin-bottom: 50px}
#top-shop .cols-2{background-color:#f0f4f7}
#top-shop .col-1{}
#top-shop .col-2{padding: 30px; text-align: left}
#top-shop .col-2 .p1{font-size: 14px; margin-bottom: 20px;letter-spacing: 1px;}
#top-shop .col-2 h4{font-size: 20px; font-weight: bold; margin-bottom: 20px; letter-spacing: 1px}
#top-shop .col-2 .p2{font-size: 16px; line-height: 180%; letter-spacing: 1px; margin-bottom: 20px}
#top-shop .col-2 a{font-size: 16px;font-weight: bold;letter-spacing: 1px; border-bottom:solid 1px #0052a5; padding-bottom: 3px}


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

#top-shop .col-1{width:100%}
#top-shop .col-2{width:100%}
#top-shop .col-2 h4{font-size: 16px}
#top-shop .col-2 .p2{font-size: 12px; line-height: 160%}

}

/** ***********************************************

TOP NEWS

*********************************************** **/

#top-news{background-color: #fff}
#top-news .inner{padding: 0 0 50px; text-align: center}
#top-news .col-1{padding: 30px 20px; text-align: left}
#top-news .col-2{padding: 30px 20px; text-align: left}

#top-news .title-1{margin-bottom: 10px}
#top-news h4{font-size: 18px; font-weight: bold; letter-spacing: 1px; padding-bottom: 15px; border-bottom:solid 1px #333;position: relative}
#top-news .fa-rss-square{color:#ef8b1e; font-size: 18px; margin-left: 10px}
#top-news .bt-news{font-size: 14px;position: absolute; top:5px; right: 5px}

.list-news{margin-top:0px;max-height:500px; overflow:auto; padding: 0 10px}
.list-news li a{color:#333; display:block; font-size:16px; letter-spacing: 1px; border-bottom:solid 1px #ddd; padding:10px 0;}

.list-news .wrap-img{display:inline-block; width:20%; vertical-align:middle; margin:5px 0; margin-right:20px; text-align:center}
.list-news .wrap-img img{display:inline-block; width:auto; height:auto; max-width:100px; max-height:100px; background-image:url(../images/common/loader-white.gif); background-position:center center; background-size:30px 30px; min-height:50px}
.list-news p{display:inline-block; width:72%; vertical-align:middle; letter-spacing: 1px; line-height: 160%}
.list-news .date{color:#666; display:block;font-size:13px; margin-bottom:5px; letter-spacing: 1px; font-weight: 300}
.list-news .icon-new{color:#CC0000; font-size:13px; font-weight:bold; margin-left:5px; font-style:bold}

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

#top-news .col-1{width:100%}
#top-news .col-2{width:100%}
.list-news li a{font-size:12px}

}

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

#top-news .bt-news{position: inherit; top:0; right: 0; margin-left: 10px}
.list-news{max-height:300px; padding: 0}
.list-news p{width:70%}
.list-news .wrap-img img{width:auto; height:auto; max-width:80px; max-height:80px; min-height:inherit}

}











/** ***********************************************

CATEGORY

*********************************************** **/



#b_navi {position:relative; max-width: 1200px; margin: 0 auto; padding-bottom: 20px}
#b_navi .inner{letter-spacing:.5; font-size:0; padding: 10px;position: absolute; top:-40px; left: 0}
#b_navi .inner li{display:inline-block; color:#999; font-size:10px; letter-spacing:normal; }
#b_navi .inner li:after{content:"/"; margin:0 5px}


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

#b_navi { padding-bottom: 0px}
#b_navi .inner{position: relative; top:0; left: 0}

}



.cat-title{position: relative; background-color: #fff; padding: 10px; border-bottom:solid 1px #333}
.cat-title .category-name{font-size: 16px; font-weight: bold}
.cat-title .info{font-size: 13px; position: absolute; top:50%;margin-top: -13px; right:10px}
.cat-title .category-name{display: inline;font-size: 18px; letter-spacing: 1.5px}




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

.cat-title .category-name{font-size: 12px}
.cat-title .info{display: none}



} 


#category .sec-1{padding: 15px 0 30px}

#cat-navi{border-bottom:solid 1px #ddd; font-size: 0}
#cat-navi li{display: inline-block; vertical-align: middle; font-size: 12px}
#cat-navi li a{display: block; padding: 10px 15px; letter-spacing: 1.5px; text-align: center; font-size: 14px; font-weight: bold}
#cat-navi li a:hover,
#cat-navi li a.on{background-color: #ddd}

#cat-bns .col-1{width: 65%; padding-right: 15px}
#cat-bns .col-2{width: 35%; padding-left: 10px}
#cat-bns .col-2 a{display: block}
#cat-bns .col-2 a:first-child{margin-bottom: 22px}


#category .title-1{text-align: center; padding: 30px 0}
#category .page-catch{text-align: center; margin-bottom: 30px;letter-spacing: 1.5px; line-height: 180%}


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

#cat-navi{border-bottom: none}
.sec-1 .inner{overflow-x: auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch}
#cat-navi li{display:table-cell; white-space: nowrap}
#cat-navi li a{padding: 10px 15px; font-size: 13px;}

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

#cat-navi li a{padding: 10px 15px; font-size: 12px;}

#category .title-1{padding: 0; font-size: 16px}
#category .page-catch{margin-bottom: 20px; font-size: 14px; padding: 0 10px; text-align: left; line-height: 160%}

}


.pd-list-1{font-size: 0; padding: 0 10px}
.pd-list-1 li{display: inline-block;width: 25%;font-size: 14px;vertical-align: top;padding: 10px;}
.pd-list-1 li a{display: block;  width: 100%;padding: 5px; text-align: center;  border:solid 1px #ddd;  position: relative}
.pd-list-1 .wrap-img{text-align: center; display: block; width:100%; height: 220px; vertical-align: middle; overflow: hidden; position: relative}
.pd-list-1 .wrap-img img{max-width: 200px; max-height: 200px; width: auto; height: auto;  position: absolute; top:0; left: 0; right:0; bottom:0; margin: auto;}
.pd-list-1 .pd-name{font-size: 16px; font-weight: bold; margin-bottom: 15px}
.pd-list-1 .desc{font-size: 14px; padding: 0 10px}
.pd-list-1 .bt{display: block; width: 100%; max-width: 200px; margin: 20px auto; padding: 8px; text-align: center; color:#fff; font-size: 13px; background-color: #0071bc; }
.pd-list-1 .bt:before{content: "▶"; font-size: 10px; margin-right: 10px}



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

.pd-list-1 li{padding: 5px;}
.pd-list-1 .wrap-img{height: 170px}
.pd-list-1 .wrap-img img{max-width: 150px; max-height: 150px; }
.pd-list-1 .pd-name{font-size: 15px}
.pd-list-1 .desc{font-size: 13px}

}

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

.pd-list-1 li{width:33.33333333333%}

}


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

.pd-list-1{padding: 0}
.pd-list-1 li{width:50%}
.pd-list-1 .wrap-img{height: 120px}
.pd-list-1 .wrap-img img{max-width: 100px; max-height: 100px; }
.pd-list-1 .pd-name{font-size: 14px}
.pd-list-1 .desc{text-align: left}
.pd-list-1 .bt{width: 80%; margin: 20px auto; padding: 8px; text-align: center; color:#fff; font-size: 12px; }
}


.clickable{cursor:pointer}

.sec-pickup{padding: 30px 0 50px}
.sec-news{padding: 50px 0}
.sec-news ul{max-width: 1024px; margin: 0 auto}



.sec-blog-bns .cols-2{padding: 0 10px}
.sec-blog-bns .col{padding: 10px}
.sec-blog-bns h4{font-size: 16px; margin: 10px 0;}
.sec-blog-bns p{font-size: 14px}



.list-pickup {padding: 0 10px}
.list-pickup li{padding: 10px}
.list-pickup .img{display: block;  width: 100%; height: 200px; background-size: cover; background-position: center}
.list-pickup li h4{font-size: 14px;margin: 10px 0; }
.list-pickup li p{font-size: 14px}




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


.list-pickup li{width: 100%!important}
.list-pickup .img{ width: 80px; height: 80px}
.list-pickup i{float:left; margin: 0 10px 10px 0}

}




/** *****************************

CATEGORY Tokina

***************************** **/


#lens-sorter{background-color: #f5f5f5; padding: 20px; max-width: 1140px; margin:  0 auto 30px; border:solid 1px #ddd}
#lens-sorter .title{font-weight: bold; text-align: center;font-size: 18px; margin-bottom: 30px; letter-spacing: 2px}

#lens-sorter .cols-2{max-width: 900px; margin: 0 auto;padding-bottom:20px}
#lens-sorter .col-1{text-align: right; font-weight: bold; width: 20%; padding-right: 15px;font-size: 16px; vertical-align: middle}
#lens-sorter .col-2{text-align: left; width: 80%; vertical-align: middle}

#lens-sorter label{margin-right: 10px; margin-top: 10px;  font-size: 16px; display: inline-block; border:solid 1px #ddd; border-radius: 5px; padding: 8px 10px; background-color: #fff; cursor:pointer}
#lens-sorter label:hover,
#lens-sorter label.on{background-color: #333; color:#fff; border:solid 1px #333}

#lens-sorter .result{text-align: center}
#lens-sorter .result span{display: none}
#lens-sorter .result .p1{font-weight: bold}

#lens-sorter .bt{background-color: #fff; max-width: 200px;border-radius: 5px; padding: 10px; text-align: center;border:solid 1px #ddd; cursor:pointer; margin: 0 auto 20px}


.is-hide {display: none!important;}
p.note{display: none; text-align: center;background-color: #f5f5f5; padding: 50px; letter-spacing: 2px}
.loader{position: fixed; top:0; left: 0; width: 100%; height: 100%;text-align: center; background-color:rgba(255,255,255,.9);display: none; z-index: 9999}
.loader img{position: absolute; max-width:200px; max-height: 200px; width: auto; height: auto;  position: absolute; top:0; left: 0; right:0; bottom:0; margin: auto;}




.situation{text-align: center; margin-bottom: 20px}
.situation .open{cursor:pointer;background-color: #0071bc; max-width: 240px;padding: 10px; margin: 0 auto; color:#fff; font-size: 14px; border-radius:3px}
.situation .open:hover{opacity: .8}
.situation span{font-size: 12px; vertical-align: middle}
.situation .search-box{padding: 10px; display: none}
.situation .search-box input{display: none}
.situation .search-box label{font-size: 14px!important}
.situation .search-box img{height: 45px; width: auto; display: block; margin:0 auto 8px}


.situation2 .search-box img{height: 150px!important; width: auto; display: block; margin:0 auto 8px}



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

#lens-sorter{padding: 20px 10px}
#lens-sorter .cols-2{max-width: inherit}
#lens-sorter .col-1{font-size: 14px;width: 10%;}
#lens-sorter .col-2{width: 90%}
#lens-sorter label{font-size: 14px}

}

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

#lens-sorter{padding: 20px 10px;}
#lens-sorter .title{font-size: 16px}
#lens-sorter .cols-2{padding: 0}
#lens-sorter .col-1{width: 100%; text-align: left; font-size: 12px; margin-bottom: 10px; background-color: #333; color:#fff; padding: 6px 10px; border-radius: 3px}
#lens-sorter .col-2{width: 100%;padding-bottom: 20px }
#lens-sorter label{font-size: 12px}
#lens-sorter .bt{font-size: 12px;}
#lens-sorter .result {font-size: 12px}

}




.pd-list-tokina{padding: 0 10px; margin-bottom: 30px}
.pd-list-tokina > li{display: inline-block;font-size: 14px;vertical-align: top;padding: 10px;position: relative}
.pd-list-tokina .waku{display: block;  width: 100%;text-align: center;  border:solid 1px #ddd;  position: relative}

.pd-list-tokina .size{position: absolute; top:0; left: 0; font-size: 10px; padding: 5px;color:#fff; letter-spacing: 1.5px}
.pd-list-tokina .waku-1 .size{background-color: rgba(200,171,145,1.00)}
.pd-list-tokina .waku-2 .size{background-color: rgba(0,162,149,1.00)}
.pd-list-tokina .waku-3 .size{background-color: rgba(0,164,220,1.00)}
.pd-list-tokina .wrap-img{text-align: center; display: block; width:100%; height: 220px; vertical-align: middle; overflow: hidden; position: relative}
.pd-list-tokina .wrap-img img{max-height: 150px; padding: 0 10px;  width: auto; height: auto;  position: absolute; top:0; left: 0; right:0; bottom:0; margin: auto;}


.pd-list-tokina .pd-name{font-size: 18px; font-weight: bold; margin-bottom: 15px;padding: 0 15px; }
.pd-list-tokina .pd-name .icon-new{font-style: normal; font-size: 12px; background-color:#de1c24; color:#fff; padding: 2px 10px; font-weight: normal;position: absolute; top:-1px; right: 0}
.pd-list-tokina .desc{padding: 0 10px; text-align: left}
.pd-list-tokina .terminated::after{content:"この製品は生産を終了しました。"; font-size: 12px;  font-weight: bold; margin-bottom: 10px; color:rgba(255,90,26,1.00); display: block}
.pd-list-tokina .fe{ padding: 0 10px; text-align: center; margin: 0 auto; max-width:300px }
.pd-list-tokina .fe li{font-size: 12px; display: inline-block; padding: 5px; border:solid 1px #333; margin-bottom: 5px}
.pd-list-tokina .price-1{margin-top: 10px}

.pd-list-tokina .bt a{display: block; width: 100%; max-width: 200px; margin: 20px auto; padding: 8px; text-align: center; color:#fff; font-size: 13px; background-color: #0071bc; letter-spacing: 1.5px}
.pd-list-tokina .bt.og a{background-color:rgba(255,140,0,1.00); margin-bottom: 10px; margin-top: 10px}
.pd-list-tokina .bt a:before{content: "▶"; font-size: 10px; margin-right: 10px}

.pd-list-tokina .shop-info{background-color:#f5f5f5; padding: 10px}
.pd-list-tokina .price-2{margin-top: 10px; font-size: 16px; font-weight: bold}
.pd-list-tokina .price-2 span{font-size: 12px; font-weight: normal}
.pd-list-tokina .price-2 span.p-tax{font-size: 16px; font-weight: bold}
.pd-list-tokina .shop-info p.end{font-size: 14px; text-align: left; padding: 10px;line-height: 160%}


.sub-category{font-size: 18px; margin: 0 0 10px 20px; letter-spacing: 2px}
.sub-category::before{content:"- "}



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

.pd-list-tokina{padding: 0}
.pd-list-tokina > li{padding: 10px}

}

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

.pd-list-tokina > li{width:50%!important}

}

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

.pd-list-tokina .fe li{font-size: 10px}
.pd-list-tokina > li{padding: 5px}
.pd-list-tokina .waku{border:none}
.pd-list-tokina .pd-name{font-size: 14px}
.pd-list-tokina .desc{display: block; font-size: 12px; margin-bottom: 10px}
.pd-list-tokina .price-1{display: none}
.pd-list-tokina .bt a{font-size: 12px}
.pd-list-tokina .shop-info{font-size: 10px; text-align: left}
}




#sec-catalog h3{font-size: 18px!important}
#sec-catalog{padding: 50px 0 0; text-align: center}
#sec-catalog .col{height: 400px}
#sec-catalog .col-1{width: 46%;margin: 0 2%;  background-color: rgba(243,247,250,1.00);padding: 20px; padding-top: 0}
#sec-catalog .col-2{width: 46%;margin: 0 2%; background-color: rgba(243,247,250,1.00);padding: 20px; padding-top: 0}

#sec-catalog .inner ul{padding-bottom: 30px}
#sec-catalog .inner p{margin-top: 10px}

#sec-catalog .wrap-img{max-width: 300px; margin: 0 auto 20px}
#sec-catalog .col-2 p{text-align: left; max-width: 300px; margin: 10px auto 0}


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

#sec-catalog .col{height: auto}
#sec-catalog .col-1{width: 100%;margin: 0 0 30px;padding: 0px}
#sec-catalog .col-2{width: 100%;margin: 0; padding: 0; padding-bottom: 20px}

}








/** *************************************************

DETAIL Tokina

************************************************* **/

.pd-titile-area{position: relative;width: 100%; padding-bottom: 10px;vertical-align: middle}
.pd-titile-area .wrap-img{width: 80px; height: 65px; vertical-align: middle;text-align: center; 
padding:0 10px; display: table-cell}
.pd-titile-area .wrap-img img{width: auto; height: auto; max-width: 100%; max-height: 65px}
.pd-titile-area .wrap-pd-name{width: 100%; padding:0 5px;vertical-align: middle}
.pd-titile-area .catch{font-size: 16px; letter-spacing: 1.5px; max-width: 80%; margin-bottom: 5px}
.pd-titile-area .pd-name{font-weight: bold; font-size: 30px; letter-spacing: 2px; }
.pd-titile-area .pd-name .icon-new{font-style: normal; font-size: 12px; background-color:#de1c24; color:#fff; padding: 2px 5px; font-weight: normal;margin-left: 20px; display: inline-block;vertical-align: middle}

#brand-logo{width: auto;height: 20px; position: absolute; right:10px; top:50%; margin-top: -28px}

.pd-name-2{display: none}
.tab-menu-detail{background-color: #f5f5f5; top:-100px; left: 0}
.tab-menu-detail.active{position: fixed; top:0; left: 0;width: 100%; text-align: center; z-index: 9999}
.tab-menu-detail.active .pd-name-2{display: block; position: absolute; top:15px; left: 10px; font-size: 16px; font-weight: bold}

.tab-menu-detail ul{border-bottom:solid 1px #ddd; text-align: center; padding-top: 10px}
.tab-menu-detail li{list-style: none; display: inline-block; background-color: #f5f5f5; vertical-align: top}
.tab-menu-detail li a{padding: 10px 15px 10px;font-size: 14px; display: block; margin-bottom: -1px;letter-spacing: 2px}
.tab-menu-detail li a.selected,
.tab-menu-detail li a.hover{background-color: #fff; font-weight: bold; border:solid 1px #ddd; border-bottom:none}

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

.pd-name-2{display: none!important}
.pd-titile-area .catch{font-size: 14px}

}


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

.pd-titile-area .wrap-img{display: none}
.pd-titile-area .catch{font-size: 12px; max-width: 100%}
.pd-titile-area .pd-name{font-size: 20px}
#brand-logo{width: auto; height: 10px; position: inherit; right:0px; top:0px; margin: 0 0 0 10px}
.tab-menu-detail{background-color: #fff;top:0!important}
.tab-menu-detail.active{top:0!important}
.tab-menu-detail ul{text-align: left; font-size:0; border-bottom:none; background-color: #fff;padding-top: 0}
.tab-menu-detail li{background-color: #f5f5f5; width:25%; font-size: 10px;display: inline-block; border:none}
.tab-menu-detail li a{padding: 8px 5px;font-size: 12px;font-weight: bold; margin-bottom: 0px;text-align: center }
.tab-menu-detail li a.selected{border:none;background-color: #333;color:#fff}

}



/** *************************************************
.tab-menu-detail{background-color: #fff; overflow-x: auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch}
.tab-menu-detail ul{text-align: center; padding-top: 10px; width: 800px}
.tab-menu-detail li{background-color: #f5f5f5; display: table-cell}
.tab-menu-detail li a{padding: 10px;font-size: 14px;margin-bottom: 0px}
DETAIL Tokina 商品画像

************************************************* **/


#pd-img-area{text-align:center; padding:30px 0;border-bottom:solid 1px #eee }
#main-img .slickslider{overflow: hidden; position: relative;  width:100%; max-width: 1024px; margin: 0 auto;margin-bottom: 50px;}
#main-img li.slick-slide{display:inline-block; width:100%; height: auto; max-width:800px ;text-align: center; vertical-align: middle;  margin: 0 50px}

#main-img li img{max-height: 500px}
#main-img li.slick-slide a:hover img{opacity:0}
#main-img li.slick-active a:hover img{opacity:1}
.slickslider li.slick-slide.slick-center{opacity:1}
.slickslider li.slick-slide{opacity:0;transition:all 300ms ease;}
#main-img li.slick-slide p{margin-top:10px}
#main-img .slickslider .slick-prev{
left:40px;width:50px; height:50px;margin-top:-50px;  position:absolute; top:50%; display:block;
z-index:999;cursor:pointer; cursor:hand; font-size:60px; color:#999; text-align:center;
}
#main-img .slickslider .slick-next{
right:40px;width:50px; height:50px;margin-top:-50px;  position:absolute; 
top:50%;  display:block;cursor:pointer; cursor:hand;font-size:60px; color:#999;text-align:center;
}
#main-img .slickslider i:hover{color:#000}

.slick-thumb{text-align: center; width: 400px ;margin: 0 auto; overflow: hidden}
.slick-thumb li{display:inline-block; vertical-align:top; height:60px; border:solid 1px #eee; margin: 0 2.5px; cursor:pointer; background-color: #fff}
.slick-thumb li img{width:auto; height:58px;opacity:1}
.slick-thumb .slick-current img{opacity:.5}
.slick-thumb .slick-current{border:solid 1px #999}
.slick-thumb li:focus{outline: none}


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

#main-img li img{max-height: 300px}
#main-img li.slick-slide p{font-size: 13px}

}

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

#pd-img-area{padding:0}
#main-img .slickslider{padding-bottom: 50px}
#main-img li.slick-slide{margin: 0 auto!important}
#main-img li img{max-height:200px; max-width: 100%; width:auto; height: auto}
#main-img li p{font-size: 10px}
.slick-thumb{display: none}
#main-img .slick-dots{text-align: center; position: absolute; bottom:0px; left: 0 ;width: 100%}
#main-img .slick-dots li{display: inline-block; width: 10px; height: 10px; margin: 0 3px; border:solid 1px #ddd; border-radius: 100%; text-indent: -9999px}
#main-img .slick-dots li.slick-active{background-color:#0052a5;border:solid 1px #0052a5;}


}



.wrap-purchase{max-width: 900px; margin: 20px auto; background-color: rgba(252,250,210,1.00); padding: 20px 50px; border:solid 2px rgba(239,139,30,1.00)}
.wrap-purchase .col{vertical-align: middle}
.wrap-purchase .bt{display: block; color:#fff; font-size:16px; font-weight: bold; text-align: center; padding: 20px; 
background-color:rgba(239,139,30,1.00); margin: 0 0 0 auto; letter-spacing: 2px; max-width: 300px}
.wrap-purchase .bt::before{content:"▶ "; font-size: 12px}


.wrap-purchase .p2{font-size: 20px ;font-weight: bold; padding: 10px}
.wrap-purchase .p2 span{font-size: 14px}
.wrap-purchase .p2 span.p-tax{font-size: 20px}


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

.wrap-purchase .col{width:100%; text-align: center}
.wrap-purchase .col-1{padding-bottom: 20px}
.wrap-purchase .bt{font-size:14px; padding: 10px;  margin: 0 auto}
.wrap-purchase .bt::before{font-size: 10px}

}



/** ***********************************************

DETAIL TAB1　商品トップ

*********************************************** **/


#tab-1 .cms p{margin-bottom: 1em; line-height: 180%; letter-spacing: 1px}
.sec-detail .tab{padding: 20px 0}
#tab-1 .block{max-width: 900px; margin: 0 auto;padding: 30px 0;}

.wrap-icons{display: none}

.lens-icons{margin-bottom: 20px}
.lens-icons li{display: inline-block; padding: 4px 10px; font-weight: bold; font-size: 14px; background-color:rgba(228,234,242,1.00); border:solid 1px #ddd; letter-spacing: 1px; margin-bottom: 10px; margin-right: 5px}
.lens-icons li.icon-1{font-size: 15px; background-color: #0071bc; color:#fff; border:solid 1px #0071bc}
.lens-icons li.icon-2{font-size: 15px; background-color: #000; color:#fff; border:solid 1px #000}


#tab-1 .cms a{color:#0052a5}
#tab-1 .cms li{margin-left: 40px; margin-top: 10px}
#tab-1 .cms p.terminated{text-align: center; font-weight: bold; border: 1px solid #ff6600; padding: 10px; color:#ff6600;width:100%; max-width: 600px}


.spec-table table{border-spacing: 0;  width: 100%; margin: 0 auto}
.spec-table th{background-color: #f5f5f5; padding: 15px;font-size: 14px; white-space: nowrap; font-weight: bold;border-bottom:solid 1px #ddd;}
.spec-table td{background-color: #fff; padding: 15px;font-size: 15px;line-height: 180%;border-bottom:solid 1px #ddd;}
.spec-table tr:first-child th,
.spec-table tr:first-child td{border-top:solid 1px #ddd}

.spec-table td span.note{font-size: 12px; display: block}
@media screen and (max-width:500px){

.lens-icons li{font-size: 12px}
.lens-icons li.icon-1{font-size: 13px}
.lens-icons li.icon-2{font-size: 13px}
#tab-1 .cms div[style]{width: auto!important}
#tab-1 .cms p{font-size: 14px}

}



.tab h3.title{font-size: 24px; letter-spacing: 2px; margin-bottom: 30px; padding-left: 20px;}




/** ***********************************************

DETAIL TAB2　特長

*********************************************** **/


#tab-2 .block{max-width: 900px; margin: 0 auto}
#tab-2 .block h4{font-size: 26px; margin-bottom: 20px; letter-spacing: 2px; padding-top: 30px}
#tab-2 .block h4:first-child{padding-top: 0}
#tab-2 .block p{font-size: 16px; margin-bottom: 10px; letter-spacing: 1.5px; line-height: 160%}
#tab-2 .block img{width: auto; height: auto; max-width: 100%}

.feat-list{padding-bottom: 50px;border-top:solid 1px #ddd;}
.feat-list li{border-bottom:solid 1px #ddd; padding: 20px 0; font-size: 0}
.feat-list .wrap-img{width: 30%;  display: inline-block; vertical-align: top; text-align: center}
.feat-list .wrap-img img{max-height: 250px}
.feat-list .txts{width: 70%;display: inline-block; vertical-align: top;font-size: 14px; padding-left: 30px }
.feat-list .txts h4{font-size: 24px!important}
.feat-list .txts p{font-size: 16px!important}


#tab-2 .feat-contents{padding-bottom: 10px}
#tab-2 .feat-contents .video{padding: 20px;}
#tab-2 .feat-contents strong{display: block; margin-top: 1em;  margin-bottom: 5px}
#tab-2 .feat-contents iframe{display: block; width: 100%; max-width: 500px;  height: 300px; margin-bottom: 20px}
#tab-2 .feat-contents {letter-spacing: 1.5px; line-height: 160%}

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

.tab h3.title{padding-left: 0px;}
.feat-list .txts h4{font-size: 20px!important}
.feat-list .txts p{font-size: 14px!important}

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

.tab h3.title{font-size: 18px}
#tab-2 .block h4{font-size: 16px;}
#tab-2 .block p{font-size: 14px;}

.feat-list .wrap-img{width: 100%; margin-bottom: 20px}
.feat-list .txts{width: 100%; padding-left: 0}

#tab-2 .feat-contents iframe{width: 100%;height: 200px}


}




/** ***********************************************

DETAIL TAB3　仕様表

*********************************************** **/

.table-style-01{padding-bottom: 50px}
.table-style-01 table{background-color: #ddd; border-spacing: 1px; width: 100%; margin: 0 auto}
.table-style-01 th{background-color: #f5f5f5; padding: 15px; text-align: center; white-space: nowrap; font-weight: bold}
.table-style-01 td{background-color: #fff; padding: 15px}
.table-style-01 td label:hover{cursor:pointer; cursor:hand}


#tab-3 .block{max-width: 900px; margin: 0 auto}
#tab-3 .cols-2{margin-top: 30px}
#tab-3 .col{padding: 10px; text-align: center}
#tab-3 .col img{width: 100%; height: auto}
#tab-3 h4{font-size: 16px; margin-bottom: 15px}

#tab-3 .note p{font-size:14px}

.slik-spec th{width: 250px}
.slik-spec .td-icon{text-align: center; width: 140px}
.slik-spec .td-icon img{max-width: 100px;}
.slik-spec .bt{display: block; background-color:#de1c24;max-width: 300px; text-align: center; font-weight: bold; color:#fff; padding: 10px; border-radius: 3px; border-bottom:solid 3px #b90c0c; letter-spacing: 1px}
.slik-spec .fa{font-size: 20px; margin-right: 10px}
.slik-spec .mb{font-weight: normal; font-size: 12px}

.slik-spec .bt-blue{background-color:rgba(0,113,179,1.00); border-bottom:solid 3px rgba(47,49,137,1.00)}


.spec-img{max-width: 500px; margin: 0 auto}


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

.table-style-01 th{padding: 10px; font-size: 12px}
.table-style-01 td{padding: 10px; font-size: 12px}
#tab-3 .col{width:100%}

.slik-spec th{width: auto;white-space: normal; text-align: left}
.slik-spec .td-icon img{max-width: 50px;}

}



/** ***********************************************

DETAIL TAB4　アクセサリー

*********************************************** **/


#tab-4 .pd-list-tokina .wrap-img img{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
#tab-4 .pd-list-tokina .desc{padding: 0 20px 10px; text-align: left}
#tab-4 .pd-list-tokina .jan{margin:5px 0 20px}


/** ***********************************************

DETAIL TAB5　撮影サンプル

*********************************************** **/


#tab-5 .slickslider2{overflow: hidden; position: relative;  width:100%;  max-width: 1024px; margin: 0 auto;margin-bottom: 20px;}
#tab-5 .slickslider2 li.slick-slide{display:inline-block;text-align: center; vertical-align: middle;  margin: 0 50px}

#tab-5 .slickslider2 li img{height: auto; width: auto; max-height: 600px}
#tab-5 .slickslider2 li.slick-slide a:hover img{opacity:0}
#tab-5 .slickslider2 li.slick-active a:hover img{opacity:1}
#tab-5 .slickslider2 li.slick-slide.slick-center{opacity:1}
#tab-5 .slickslider2 li.slick-slide{opacity:0;transition:all 300ms ease;}
#tab-5 .slickslider2 li.slick-slide p{padding:10px 0; font-size: 12px;position: relative}

#tab-5 .slickslider2 .slick-prev{
left:10px;width:50px; height:50px;margin-top:-50px;  position:absolute; top:50%; display:block;
z-index:999;cursor:pointer; cursor:hand; font-size:60px; color:#999; text-align:center;
}
#tab-5 .slickslider2 .slick-next{
right:10px;width:50px; height:50px;margin-top:-50px;  position:absolute; 
top:50%;  display:block;cursor:pointer; cursor:hand;font-size:60px; color:#999;text-align:center;
}
#tab-5 .slickslider2 i:hover{color:#000}



.wrap-thumb2{position: relative;max-width: 840px; margin: 0 auto}
.slick-thumb2{text-align: center; margin: 0 auto; max-width: 800px;  overflow: hidden; height: 120px}
.slick-thumb2 li.slick-slide{display:inline-block; vertical-align:top; cursor:pointer}
.slick-thumb2 li.slick-slide img{height: auto; width: auto; max-height: 100px}
.slick-thumb2 .slick-current img{opacity:.5}
.slick-thumb2 li:focus{outline: none}
.slick-thumb2 li.slick-slide p{display: none}


#tab-5 .slick-thumb2 .slick-prev{
left:-30px;width:50px; height:50px;position:absolute; top:65px; display:block;
z-index:999;cursor:pointer; font-size:50px; color:#000; text-align:center;
}

#tab-5 .slick-thumb2 .slick-next{
right:-30px;width:50px; height:50px;position:absolute; 
top:65px;  display:block;cursor:pointer;font-size:50px; color:#000;text-align:center;
}


.bt-ex{font-size: 12px;border:solid 1px #000; padding: 3px 5px; margin-left: 20px}
.bt-ex::before{content:"▶ "; font-size: 10px}

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

#tab-5 .slickslider2 li img{max-height: 400px}
#tab-5 li.slick-slide p{font-size: 13px}
.wrap-thumb2{max-width: 100%; padding: 0 30px}
#tab-5 .slick-thumb2 .slick-prev{left:-20px}
#tab-5 .slick-thumb2 .slick-next{right:-20px}

}

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


#tab-5 .slickslider2{padding-bottom: 50px}
#tab-5 li.slick-slide{margin: 0 auto!important}
#tab-5 .slickslider2 li img{max-height:200px; max-width: 100%; width:auto; height: auto}
#tab-5 li.slick-slide p{font-size: 10px}
#tab-5 .slick-thumb2{display: none}
#tab-5 .slick-dots{text-align: center; position: absolute; bottom:0px; left: 0 ;width: 100%}
#tab-5 .slick-dots li{display: inline-block; width: 10px; height: 10px; margin: 0 3px; border:solid 1px #ddd; border-radius: 100%; text-indent: -9999px}
#tab-5 .slick-dots li.slick-active{background-color:#0052a5;border:solid 1px #0052a5;}


}


/** ***********************************************

DETAIL TAB6　特集

*********************************************** **/


#tab-6 .cols-2{max-width: 1024px; margin: 0 auto}
#tab-6 .col{padding: 10px}
#tab-6 .wrap-img{margin-bottom: 10px; background-color: #000; text-align: center; overflow: hidden; position: relative}
#tab-6 .wrap-img img{max-height: 328px;width: auto}

#tab-6 .icon{width: 20%; height: auto;display: inline-block;vertical-align: top;}
#tab-6 .wrap-txt{width: 75%; display: inline-block;  vertical-align: top; padding: 5px 10px;}


#tab-6 .col .name{font-size: 16px; margin-bottom: 5px}
#tab-6 .col .name a{font-size: 12px; margin-left: 15px;text-decoration: underline}
#tab-6 .col .title{margin-bottom: 10px}

#tab-6 .bt{display: block; width: 150px; text-align: center; padding: 10px; font-size: 12px; letter-spacing: 1.5px;  color:#fff; background-color: #0071bc; position: relative}
#tab-6 .bt i{margin-left: 10px; font-size: 16px;}


#tab-6.review p.p1{font-size: 20px;margin-bottom: 3px }
#tab-6.review p.p2{font-size: 14px; color:#999}
#tab-6.review .wrap-txt{width: 100%; display: block}
#tab-6.review .wrap-img:hover img{	-webkit-transform: scale(1.1);transform: scale(1.1);}
#tab-6.review .wrap-img i{position: absolute; bottom:0; right:0; display: block; background-color: #fff; padding: 3px 5px}
@media screen and (max-width:1024px){

#tab-6 .col .name{font-size: 14px}

}

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

#tab-6 .icon{width: 50px}
#tab-6 .name{font-size:12px}
#tab-6 .bt{padding: 10px 30px; font-size: 12px; }
#tab-6 .bt i{margin-left: 10px; font-size: 14px; vertical-align: top}

}

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

#tab-6 .col{width: 100%}

}



/** Pop Up **/
#tab-6 .pop-up{position:fixed; top:50%; left:50%; width:400px; min-height:500px; margin:-250px 0 0 -200px; z-index:1500; background-color:#fff; color:#333; padding:20px;
-webkit-box-shadow: 0px 0px 8px #222;
-moz-box-shadow: 0px 0px 8px #222;
-ms-box-shadow: 0px 0px 8px #222;
box-shadow: 0px 0px 8px #222;
display:none
}
#tab-6 .pop-up .d-01{width:130px; display:inline-block;  vertical-align:top}
#tab-6 .pop-up .d-02{width:215px; display:inline-block;vertical-align:top}
#tab-6 .pop-up .name{font-size:18px; margin-bottom:10px; font-weight:bold}
#tab-6 .pop-up .name span{display: block; font-weight: normal;  font-size: 12px}
#tab-6 .pop-up .pf{font-size: 14px}
#tab-6 .pop-up .close{color:#333; font-style:normal; font-size:30px; position:absolute; top:5px; right:5px}
#tab-6 .pop-up .intro{line-height:200%; padding-top:30px}
#tab-6 .pop-up .intro p{line-height:200%;font-size: 14px}
#tab-6 .overlay{position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.8); z-index:10;display:none}



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

#tab-6 .pop-up .d-02{width:150px; }
#tab-6 .pop-up{position:fixed; top:50%; left:5%; width:90%; margin:-200px 0 0 0px; min-height:inherit; height:400px; overflow:auto}
#tab-6 .pop-up .close{font-size:40px; top:5px; right:15px}
#tab-6 .pop-up .intro{overflow-y:auto}

} 



.bt-shop-list a{display: block; width: 100%; max-width: 300px; text-align: center; padding: 15px; font-size: 14px;color:#fff; border:solid 1px #0052a5; margin: 0 0 0 auto; letter-spacing: 1.5px; background-color: #0052a5}
.bt-shop-list a::before{content:"→ "}

.discon a{display: block; width: 100%; max-width: 200px; text-align: center; padding: 15px; font-size: 14px;color:#fff; border:solid 1px #999; margin: 0 0 0 auto; letter-spacing: 1.5px; background-color: #999}
.discon a::before{content:"→ "}


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

.bt-shop-list a{max-width: 300px; margin: 20px auto 0}
.discon a{margin:0 auto}

} 



/** for ERUIPMENT 2020.03.30 **/
#cat_news_inner{max-width: 1024px; margin: 30px auto 0; height: 300px; overflow-x: hidden; overflow-y: auto}
#cat_news_inner .newmark {font-size: 12px; color:#666;margin-right: 10px;display: block}
#cat_news_inner .newmark .icon-new{background-color:#CC0000; color:#fff; font-size:10px; font-weight:bold; margin-left:3px;font-style:normal;padding: 0 5px; display: inline-block; vertical-align: middle}
#cat_news_inner li{margin-bottom: 5px; padding-bottom: 6px; border-bottom: solid 1px #ddd}
#cat_news_inner a{font-size: 14px;}


.local-sub-menu{text-align: center;margin-bottom: 50px; background-color: #f5f5f5;padding: 20px;padding-bottom: 10px}
.local-sub-menu li{display: inline-block; list-style: none; margin: 0 5px;font-size: 14px;border-left:solid 1px #ccc;padding-left:8px;margin-bottom: 10px}
.local-sub-menu li:first-child{border-left:none}
.local-sub-menu li::before{content:"▼ "; font-size: 12px; margin-right: 3px}
.local-sub-menu li a{color:#333}
.local-sub-menu a:hover{text-decoration: underline}


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

.local-sub-menu{text-align: left;margin-bottom: 50px;padding: 20px;padding-bottom: 5px}
.local-sub-menu li{display: block; list-style: none; margin: 0 ;font-size: 12px;border-left:none;padding-left:0px;margin-bottom: 15px}
.local-sub-menu li:first-child{border-left:none}
.local-sub-menu li::before{content:"▼ "; font-size: 12px; margin-right: 3px}
.local-sub-menu li a{color:#333}
.local-sub-menu a:hover{text-decoration: none}

} 



.sub-cat-title{background-color: #fff; border-bottom:solid 1px #ddd; padding: 5px 15px; margin-bottom: 20px;font-size: 20px;leter-spacing:2px;border-left:solid 5px #000; }



.desc{margin-bottom: 30px}
.desc-h4{margin: 10px 0 10px 20px}
.sub-items{padding-bottom: 50px;}
.sub-items h4.title{margin-left: 20px;font-size: 18px}
.sub-items h4.title::before{content:"― "}

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

.sub-cat-title{padding: 5px 10px; margin-bottom: 10px;font-size: 14px;border-left:solid 3px #000; }
.desc{margin-bottom: 20px;font-size: 12px}
.desc-h4{margin: 10px 0 10px 20px}
.sub-items{padding-bottom: 30px;}
.sub-items h4.title{margin-left: 10px;font-size: 14px}
.sub-items h4.title::before{content:"― "}

}

/** for PROTECTOR 2020.04.10 **/
.wrap-pt-items{max-width: 1000px; margin: 30px auto; padding-bottom: 30px;}

.wrap-pt-items .pd-img{position: absolute; top:10px; left: 10px;box-shadow: 0 0 3px #666; max-width: 137px;}

#pt-search{text-align: center;padding: 30px 20px; background-color: #f5f5f5; border-radius: 3px; border:solid 1px #ddd;margin-bottom: 30px;position: relative;}

#pt-search p.p1{font-weight: bold; font-size: 20px; margin-bottom: 20px}
#pt-search p.p2{font-size: 14px; margin-bottom: 10px; color:#333}

.wrapinput{position: relative;background-color: #fff; max-width: 650px; border:solid 1px #ddd; margin: 0 auto 20px;font-size: 0;border-radius: 3px}


.wrapinput .brand{padding: 10px; background-color: #333;width:25%;display: inline-block;cursor:pointer;color:#fff; font-size: 13px; vertical-align: top;border-radius: 3px 0 0 3px}
.wrapinput .brand i{font-style: normal}

.wrapinput .selector{display: none; position: absolute; top:38px; left: 0;font-size: 12px;background-color: #fff;border:solid 1px #ddd; z-index: 10}
.wrapinput .selector li{text-align: left;padding: 5px}
.wrapinput .selector li:hover{background-color: #eee}
#pt-search input[type="text"]{font-size: 16px; padding: 3px 10px; width: 75%;height: 40px;display: inline-block;border:none; vertical-align: top; background-color: transparent}


/*
#pt-search input[type="text"]{font-size: 16px; padding: 3px 10px; width: 100%; max-width: 500px; height: 40px; border:solid 1px #ccc; border-radius: 3px; margin-bottom: 20px}
*/



#pt-search button{display: block;font-size: 16px; padding: 10px; background-color: #0071bc; margin: 0 auto; color:#fff;max-width: 200px;width: 100%; border:none; border-radius: 3px; border-bottom:solid 3px #1b1464}
#pt-search button i{font-size: 16px; margin-right: 10px}

.results-hd{display: none}
.results-body li.cols-3{display: none}


.results-hd{text-align: center;}
.results-hd .p1{font-weight: bold; font-size: 20px; margin-bottom: 20px}
.results-hd .p2{font-size: 18px; margin-bottom: 20px}


@media screen and (max-width: 920px) {
  .wrapinput{ max-width: 600px; margin: 0 0 20px auto;}
  .wrapinput .brand{width:25%}
  #pt-search input[type="text"]{width: 75%;}
}
@media screen and (max-width: 768px) {
  .wrapinput{ max-width: 550px}
  .wrapinput .brand{width:25%}
  #pt-search input[type="text"]{width: 75%;}
}

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

.wrap-pt-items{margin: 0px auto; padding-bottom: 30px}
.wrap-pt-items .pd-img{position: inherit;top:inherit;left:inherit;margin:0 0 20px;max-width: 80px;}
.wrapinput{margin: 0 auto 20px auto;}
#pt-search{padding: 20px 10px;margin-bottom: 30px}
#pt-search p{font-weight: bold; font-size: 16px; margin-bottom: 20px}


.wrapinput .brand{padding: 10px; background-color: #333;width:100%;display: inline-block;cursor:pointer;color:#fff; font-size: 12px; vertical-align: top;border-radius: 3px 3px 0 0}


.wrapinput .selector{display: none; position: absolute; top:38px; left: 0;font-size: 12px;background-color: #fff;border:solid 1px #ddd; z-index: 10}
.wrapinput .selector li{text-align: left;padding: 5px}
.wrapinput .selector li:hover{background-color: #eee}
#pt-search input[type="text"]{font-size: 12px; padding: 3px 10px; width: 100%;height: 40px;display: inline-block;border:none; vertical-align: top; background-color: transparent}



#pt-search button{display: block;font-size: 16px; padding: 10px; background-color: #0071bc; margin: 0 auto; color:#fff;max-width: 200px;width: 100%; border:none; border-radius: 3px; border-bottom:solid 3px #1b1464}
#pt-search button i{font-size: 16px; margin-right: 10px}


.results-hd .p1{font-weight: bold; font-size: 16px; margin-bottom: 20px}
.results-hd .p2{font-size: 14px; margin-bottom: 10px}

}




input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


.pt-list li{border-bottom:solid 1px #ddd; padding: 10px 0; margin-bottom: 10px}

.pt-list .col{vertical-align: middle}
.pt-list .col-1{width: 20%}
.pt-list .col-2{width: 50%}
.pt-list .col-3{width: 30%}


.pt-list .wrap-img{text-align: center; display: inline-block;  height: 120px; vertical-align: middle; overflow: hidden; position: relative}
.pt-list .wrap-img img{max-height: 100%}

.pt-list .pd-name{font-size: 16px; font-weight: bold;padding: 0 10px;position: relative}

.pt-list .pd-name .icon-new{font-style: normal; font-size: 10px; background-color:#de1c24; color:#fff; padding: 2px 5px; font-weight: normal;vertical-align: middle}



.pt-list .pd-name .cat{font-size: 14px; font-weight: normal; color:#666;display: block;margin-top: 10px}
.pt-list .price-1{margin-top: 10px; font-size: 14px; font-weight: normal}



.pt-list .shop-info{padding: 10px;text-align: center}
.pt-list .bt a{display: block; width: 100%; max-width: 200px; margin: 20px auto; padding: 8px; text-align: center; color:#fff; font-size: 13px; background-color: #0071bc; letter-spacing: 1.5px}
.pt-list .bt.og a{background-color:rgba(255,140,0,1.00); margin-bottom: 10px; margin-top: 10px}
.pt-list .bt a:before{content: "▶"; font-size: 10px; margin-right: 10px}
.pt-list .price-2{margin-top: 10px; font-size: 16px; font-weight: bold}
.pt-list .price-2 span{font-size: 12px; font-weight: normal}
.pt-list .price-2 span.p-tax{font-size: 16px; font-weight: bold}
.pt-list .shop-info p.end{font-size: 14px; text-align: left; padding: 10px;line-height: 160%}




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

.pt-list li{padding: 10px 0; margin-bottom: 10px;border-bottom:none}

.pt-list .col{vertical-align: middle}
.pt-list .col-1{width: 30%}
.pt-list .col-2{width: 70%}
.pt-list .col-3{width: 100%}



.pt-list .pd-name{font-size: 14px}
.pt-list .pd-name .cat{font-size: 12px}



}





/** STAY HOME**/

#stayhome {padding-bottom: 100px}



/*
#stayhome .bnavi{text-align: center;width: 100%;margin-top:-30px;position:relative;z-index:999}
#stayhome .bnavi li{color:#eee;font-size: 13px;display:inline-block}
#stayhome .bnavi li::after{content:" / "}
#stayhome .bnavi a{color:#fff;font-size: 13px}
*/

#stayhome .wrap-title-img img{width:100%}
#stayhome .bnavi{margin:5px 20px 0}
#stayhome .bnavi li{color:#999;font-size: 13px;display:inline-block}
#stayhome .bnavi li::after{content:" / "}
#stayhome .bnavi a{font-size: 13px}


#stayhome .catch{text-align: center; font-size: 20px; font-weight: normal; letter-spacing: 1px;line-height: 180%;margin-bottom: 30px;padding-top:50px;}


#stayhome .inner{max-width: 1024px; margin: 0 auto;min-height: 500px; text-align: center}

#stayhome .block{padding: 30px 0}

#stayhome .title{letter-spacing: 2px;line-height: 180%;font-size: 30px;margin-bottom: 30px}
#stayhome .title span{font-size: 14px; display:block; color:#999}

#stayhome .cat{text-align: center}
#stayhome .cat .col{padding: 10px;padding-bottom: 20px;text-align: center}
#stayhome .cat .wrap-img{background-size: cover; background-position: center;display: block;width: 100%; height:220px; background-color: #eee; border-radius: 5px; border:solid 1px #fff; box-shadow: 0 0 3px #666;margin-bottom: 10px}
#stayhome .cat p.name{font-size: 20px; font-weight: bold;letter-spacing: 1px; margin-bottom: 10px;}
#stayhome .cat p.desc{font-size: 16px; letter-spacing: 1px;text-align: left}

#stayhome .articles{text-align: left}
#stayhome .articles .col{padding: 10px;padding-bottom: 20px;}
#stayhome .articles .wrap-img{background-size: cover; background-position: center;display: block;width: 100%; height:160px; background-color: #eee; border-radius: 5px; margin-bottom: 10px}
#stayhome p.name{font-size: 16px; font-weight: bold;letter-spacing: 1px;margin-bottom: 10px; line-height: 160%}
#stayhome p.desc{letter-spacing: 1px;margin-bottom: 10px; line-height: 160%}
#stayhome .more{display: block; font-size: 13px; color:#0052a5;font-weight: bold}



#stayhome .rec-items{text-align: left}
#stayhome .rec-items .col{padding: 10px;padding-bottom: 20px;}
#stayhome .rec-items .wrap-img{text-align: center;background-color: #eee;margin-bottom: 10px; border-radius: 5px}
#stayhome .rec-items .wrap-img img{width: auto; height: auto; max-width: 100%; max-height: 160px}



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

.wrap-title-img{overflow: hidden; text-align: center;position: relative;height: 230px}
.wrap-title-img img{width:800px!important;max-width: inherit!important; height: auto;display: block;left: 50%; top:0;position: absolute;margin-left: -400px!important}

#stayhome {padding-bottom: 50px}
#stayhome .catch{text-align: left;padding: 30px 20px 0;font-size: 18px}


#stayhome .bnavi li{color:#999;font-size: 12px}
#stayhome .bnavi a{font-size: 12px}


#stayhome .title{letter-spacing: 2px;line-height: 180%;font-size: 30px;margin-bottom: 30px}
#stayhome .title span{font-size: 14px; display:block; color:#999}

#stayhome .cat .col{padding: 10px;padding-bottom: 20px;text-align: center;width: 33.333333%;width: calc(100%/3)}
#stayhome .cat p{font-size: 18px}

#stayhome .articles .col{width: 33.333333%;width: calc(100%/3)}
#stayhome .rec-items .col{width: 33.333333%;width: calc(100%/3)}

}

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

#stayhome {padding-bottom: 30px}
#stayhome .bnavi{margin:5px 10px 0}
#stayhome .bnavi li{font-size: 10px}
#stayhome .bnavi a{font-size: 10px}
#stayhome .catch{padding: 30px 10px 0;font-size: 16px}
#stayhome .block{padding: 10px 0}

#stayhome .title{font-size: 20px;margin-bottom: 30px}
#stayhome .title span{font-size: 10px; display:block; color:#999}

#stayhome .cat .col{padding: 10px;padding-bottom: 20px;text-align: center;width: 50%}
#stayhome .cat .wrap-img{height:180px}
#stayhome .cat p{font-size: 16px}

#stayhome .articles .col{width: 50%}
#stayhome .rec-items .col{width: 50%}
#stayhome p.name{font-size: 14px}
#stayhome p.desc{font-size: 12px}
#stayhome .more{display: block; font-size: 12px; color:#0052a5;font-weight: bold}

}


/** for Feature Articles **/

.wrap-blog{max-width: 1400px; margin: 0 auto;padding:0 20px 100px; text-align: center;}
.sorter-title{margin-bottom: 20px;font-weight: bold;font-size: 20px;letter-spacing: 2px;}

.blog-sorter{border-bottom:solid 5px #000;margin-bottom: 50px;}
.blog-sorter li{list-style:none;margin: 0 2px;display: inline-block;vertical-align: bottom;}
.blog-sorter li a{color:#000;display:block;letter-spacing: 2px;font-size: 18px;cursor:pointer;padding: 5px 20px;border-radius: 3px 3px 0 0;}
.blog-sorter li.on a,
.blog-sorter li a:hover{background-color: #000; color:#fff}


ul.sp-list-style{display: flex;flex-wrap: wrap;}
.sp-list-style li{width: calc(100%/3 - 10px);padding:10px; margin:5px;background-color: #fff;list-style:none;position: relative;}

.blog-style-01 li{-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
@media (min-width: 800px) {.blog-style-01 li:hover{box-shadow: 0 0 3px #999;}}
.blog-style-01 .img{width: 100%;height: calc(100vw / 6); display: block; background-size: cover; background-position: center;background-color: #eee;overflow:hidden}
.blog-style-01 .txt{padding: 20px 10px;}

.blog-style-01 .cat{text-align:center;display:block; margin: 0 auto 20px;font-size: 18px;letter-spacing: 2px; font-weight: bold;}
.blog-style-01 .cat img{max-width: 140px;display: block;margin:0 auto}


.blog-style-01 .title{font-weight: bold; font-size: 16px;margin-bottom: 20px;letter-spacing: 1px;line-height: 160%;text-align:left}
.blog-style-01 .desc{font-size:14px;letter-spacing: 1px; line-height:180%;text-align:left}


/*
.sp-list-style li:nth-of-type(1),
.sp-list-style li:nth-of-type(2){width: calc(100%/2 - 10px)}
.sp-list-style li:nth-of-type(1) .img,
.sp-list-style li:nth-of-type(2) .img{height: calc(100vw / 4.5)}
.sp-list-style li:nth-of-type(1) .title,
.sp-list-style li:nth-of-type(2) .title{font-size: 20px;line-height: 180%;}
.sp-list-style li:nth-of-type(1) .desc,
.sp-list-style li:nth-of-type(2) .desc{font-size: 16px;line-height: 180%;}
*/


.sp-list-style li.bigger,
.sp-list-style li.bigger{width: calc(100%/2 - 10px)}
.sp-list-style li.bigger .img,
.sp-list-style li.bigger .img{height: calc(100vw / 4.5)}
.sp-list-style li.bigger .title,
.sp-list-style li.bigger .title{font-size: 20px;line-height: 180%;}
.sp-list-style li.bigger .desc,
.sp-list-style li.bigger .desc{font-size: 16px;line-height: 180%;}


.blog-bt-more{display: block; margin: 30px auto 0; background-color:#0071a2; text-align: center;padding: 20px 15px; max-width: 300px;color:#fff;border-radius: 3px; box-shadow:0 0 3px #666;font-weight: bold; font-size: 16px;position: relative;}
.blog-bt-more .fa{display: inline-block; margin-right: 10px;}

.blog-pickup{background-color: #eee;padding:40px 0 60px;margin-bottom:100px;}
.blog-pickup .heading{font-size: 30px; text-align: center;letter-spacing: 2px;font-weight: bold; margin-bottom: 40px;}

ul.blog-pickup-style{display: flex;flex-wrap: wrap;max-width:1600px;margin: 0 auto}
.blog-pickup-style li{width: calc(25% - 20px);margin:0 10px;padding:10px; background-color: #fff;list-style:none;position: relative;}
.blog-pickup-style li::after{content:"PICK UP";position: absolute;bottom:0; right:0;background-color: #b90c0c; color:#fff; font-weight: bold; font-size: 14px;padding:5px 10px;letter-spacing: 1px;}
.blog-pickup-style .img{height: calc(100vw / 8)}
.blog-pickup-style  .title{font-size: 14px}


@media (max-width: 900px) {

  .blog-sorter{padding:10px 0 0}
  .blog-sorter li{font-size: 14px}

  .sp-list-style li.bigger .title,
  .sp-list-style li.bigger .title{font-size: 16px;line-height: 180%;}
  .sp-list-style li.bigger .desc,
  .sp-list-style li.bigger .desc{font-size: 14px;line-height: 180%;}
  .sp-list-style li{width: calc(100%/2 - 10px)}
  .blog-style-01 .img{height: calc(100vw / 3.5);}
  .blog-pickup-style li{width: calc(50% - 20px);margin:10px 5px;}

}

@media (max-width: 500px) {
  .wrap-blog{padding:0 0px 100px}
  .blog-sorter{padding:10px 0;display: inherit;border-bottom:none;margin-bottom:10px}
  .blog-sorter li a{font-size: 12px;width:auto;padding: 5px 5px; border-radius: 3px;}
  ul.sp-list-style{display: block;flex-wrap:nowrap}
  .sp-list-style li{width:100%!important;margin: 0;}
  .blog-style-01 .img{height: 200px!important;}
  .blog-style-01 .title{font-size: 14px!important;}
  .blog-style-01 .desc{display: none;}
  .blog-pickup-style li{width: 100%;margin:10px 5px;}
}