@charset "UTF-8";

@-ms-viewport	{width: device-width;}
/*--------------------------------------------------------------------------
ブランド一覧サイト
--------------------------------------------------------------------------*/

body{
	font-family:'メイリオ', Meiryo , '游ゴシック', YuGothic,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3','ＭＳ Ｐゴシック' , sans-serif;
	line-height: 1.6;
}
img{
	max-width:100%; height:auto;
}
/*汎用スタイル*/
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{
	line-height: 1.2;
	font-size:55%;
	display:inline-block;
	color:#222;
}
p{
	line-height: 1.6;
}
a {
  outline: none;
}
a :focus {
   outline: none;
}
/*-----<image>-----*/
img.stretch{width:100%; height:auto; border:none; max-width:100%; vertical-align:top;}
.bg-bk{
	background-color:#000;
}
/*------------------------------
■■■■■header■■■■■
------------------------------*/
.head-logo{
	width:auto;
	height:20px;
}
.social-icon img{
	width:auto;
	height:20px;
}
.navbar{
	margin-bottom:0;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {

  display: block;    

}
/*------------------------------
■■■■■footer■■■■■
------------------------------*/
footer{
	margin-top:0;
	padding:30px 0;
	border-top:1px solid #003e81;
	background-color:#000;
}
.text-copyright{
	margin-top:10px;
	font-size:80%;
	color:#FFF;
}
/*------------------------------
■■■■■index■■■■■
------------------------------*/
.slick-box {
    text-align: center;
    box-sizing:border-box;
    max-height:768px;
    border-top:15px solid #000;
    display:block;
    overflow: hidden;
}
.slick-list{
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.4);
}
.slick-track{
	width:100%;
	box-sizing:border-box;
}
.slick-slider img {
    margin: 0 auto;
}
.slick-prev::before {
    content: '';
    display:block;
    width:60px;
    height:60px;
    background:url('../images/common/slider-arrow-left.png') center center no-repeat;
    background-size:cover;
}
.slick-next::before {
    content: '';
    display:block;
    width:60px;
    height:60px;
    background:url('../images/common/slider-arrow-right.png') center center no-repeat;
    background-size:cover;
}
.slick-prev::before, .slick-next::before {
	margin-top:-32px;
    font-family:'slick';
    font-size: 0;
    line-height: 1;
    opacity: .75;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
    left: 20px;
}
.slick-next {
    right: 20px;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    width:60px;
    height:60px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1;
}
.slick-dots li button{
	position:absolute;
	bottom:30px;
}
.brand-slider{
	position:relative;
}
.title-block{
	margin:30px 0 20px 0;
	background:url('../images/common/dot-1px.gif') left center repeat-x ;
}
.text-title{
	margin:0;
	padding:0 10px 0 0;
	font-family: 'Libre Franklin', sans-serif;
	font-size:130%;
	font-weight:900;
	background-color:#FFF;
	display:inline;
	width:auto;
}
.title-block-wh{
	margin:30px 0 20px 0;
	background:url('../images/common/dot-1px.gif') left center repeat-x ;
}
.text-title-wh{
	margin:0;
	padding:0 10px 0 0;
	font-family: 'Libre Franklin', sans-serif;
	font-size:130%;
	font-weight:900;
	background-color:#000;
	color:#FFF;
	display:inline;
	width:auto;
}
.logo-block{
	padding:0;
	position:relative;
}
.logo-box{
	text-align: center;
	display:block;
	width:100%;
	position:absolute;
	top:15%;
	
}
.logo-box > a > span{
	margin:10px;
	font-size:85%;
	display:block;
}
.logo-box a:link{
	color:#222;
	text-decoration: none;
	outline: none;
}
.logo-box a:hover,.logo-box a:active{
	color:#333;
	text-decoration: none;
	outline: none;
}
.logo-box a:visited{
	color:#666;
	text-decoration: none;
	outline: none;
}
.logo-box a:link img,.logo-box a:visited img{
	filter: alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
    -webkit-transition: 0.2s ;
    transition: 0.2s ;
}
.logo-box a:hover img,.logo-box a:active img{
	-moz-opacity:0.8;
    opacity:0.8;
    -webkit-transition: 0.2s ;
    transition: 0.2s ;
}
.logo-garneau img{
	width:320px;
	height: auto;
}
.logo-lgs img{
	width:300px;
	height: auto;
}
.logo-3t img{
	width:60px;
	height: auto;
}
.logo-birzman img{
	margin-top:10px;
	width:240px;
	height: auto;
}
.logo-moon img{
	margin-top:10px;
	width:220px;
	height: auto;
}
.logo-guee img{
	margin-top:10px;
	width:130px;
	height: auto;
}
.logo-kenda img{
	margin-top:10px;
	width:170px;
	height: auto;
}
.logo-trp img{
	margin-top:20px;
	width:150px;
	height: auto;
}
.sns-box{
	margin:0 0 30px;
	width:100%;
}
.sns-box tr{
	border-bottom:1px dotted #CCC;
}
.sns-box tr:first-child{
	border-top:1px dotted #CCC;
}
.sns-box th,.sns-box td{
	padding:18px 20px;
}
.sns-box th{
	text-align: center;
}
.sns-icon-box{
	margin:0 auto;
	padding:0;
	list-style-type: none;
}
.sns-icon-box li{
	display:inline-block;
}
.sns-icon-box li a{
	margin:auto;
	padding:5px;
	display:inline-block;
	/*border:1px solid #FFF;*/
	border-radius:50%;
}
.sns-icon-box li a:link,.sns-icon-box li a:visited{
	background-color:#000000;
	-webkit-transition: 0.2s ;
    transition: 0.2s ;
}
.sns-icon-box li a:hover,.sns-icon-box li a:active{
	background-color:#003e81;
	-webkit-transition: 0.2s ;
    transition: 0.2s ;
}
.sns-icon-box img{
	width:22px;
	height:22px;
}
.sns-garneau{
	vertical-align: middle;
	background-color:#000;
}
.sns-garneau > th > img{
	width:180px;
	height:auto;
}
.sns-louis{
	vertical-align: middle;
	background-color:#000;
}
.sns-louis > th > img{
	width:170px;
	height:auto;
}
.sns-3t{
	vertical-align: middle;
	background-color:#000;
}
.sns-3t > th > img{
	width:32px;
	height:32px;
}
.sns-birzman{
	vertical-align: middle;
	background-color:#000;
}
.sns-birzman > th > img{
	width:150px;
	height:auto;
}
.sns-moon{
	vertical-align: middle;
	background-color:#000;
}
.sns-moon > th > img{
	width:130px;
	height:auto;
}
.sns-guee{
	vertical-align: middle;
	background-color:#000;
}
.sns-guee > th > img{
	width:90px;
	height:auto;
}
.sns-tripeak{
	vertical-align: middle;
	background-color:#000;
}
.sns-tripeak > th > img{
	width:130px;
	height:auto;
}
.sns-trp{
	vertical-align: middle;
	background-color:#000;
}
.sns-trp > th > img{
	width:90px;
	height:auto;
}
.sns-xpedo{
	vertical-align: middle;
	background-color:#000;
}
.sns-xpedo > th > img{
	width:100px;
	height:auto;
}
.sns-tektro{
	vertical-align: middle;
	background-color:#000;
}
.sns-tektro > th > img{
	width:130px;
	height:auto;
}

/*News Box*/
.news-box > object{
	margin-bottom:30px;
	height:760px;
	/*border-bottom:1px solid #FFF;*/
}
/*------------------------------
■■■■■トップに戻るボタン■■■■■
------------------------------*/
#scroll_to_top {
	/* 「TOPに戻る」ボタンにカーソルを載せた時に、
	カーソルが指のマークになるようにしています。 */
	cursor: pointer;
/* 常にページの右下に表示されるように固定します。 */
	  position: fixed;  /* 位置を固定させます。 */
	  right: 25px;      /* 画面の右橋から20px空けます。 */
	  bottom: 20px;     /* 画面の下端から20px空けます。 */
}
#scroll_to_top p{
	padding:5px 8px 10px 8px;
	background-color:#666;
	display:block;
	width:38px;
	height:38px;
	color:#FFF;
	font-size:140%;
	text-align: center;
	border-radius:19px;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}
#scroll_to_top p:hover{
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	background-color: #003e81;
}
/*-----<spacer>-----*/
.ctsp0{margin-top:0!important;}
.cbsp0{margin-bottom:0!important;}
.ctsp1{margin-top:10px;}
.cbsp1{margin-bottom:10px;}
.ctsp2{margin-top:20px;}
.cbsp2{margin-bottom:20px;}
.ctsp3{margin-top:30px;}
.cbsp3{margin-bottom:30px;}
.ctsp4{margin-top:40px;}
.cbsp4{margin-bottom:40px;}

/* ---------------------------------------------------------
■■■■■■■■■■スマホ用設定ここから■■■■■■■■■■
------------------------------------------------------------*/

/* ---------------------------------------------------------
～768px(Extra small)
----------------------------------------------------------*/
@media only screen and (max-width: 48em) {
/*-----<h1><h2><h3><h4><h5><h6>-----*/
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{
	line-height: 1.2;
	font-size:50%;
	color:#222;
}
/*-----<navbar-button>-----*/
.navbar-text{
	margin-top:0;
	padding:0;
	font-size:9px;
	line-height: 0;
	font-weight: bold;
	font-family:Arial,sans-selif;
}
.navbar-toggle{
    padding: 0 7px 9px 7px;
}
.navbar-toggle .icon-bar {
    width: 28px;
    height: 3px;
    border-radius:2px;
}

button.navbar-toggle:not(.collapsed) span.bar1{
	-webkit-transform: translateY(7px) rotate(-45deg);
	transform: translateY(7px) rotate(-45deg);
	transition: all 300ms ease-in-out;
}
button.navbar-toggle:not(.collapsed) span.bar2{
	opacity: 0;
	transition: all 300ms ease-in-out;
}
button.navbar-toggle:not(.collapsed) span.bar3{
	-webkit-transform: translateY(-7px) rotate(45deg);
	transform: translateY(-7px) rotate(45deg);
	transition: all 300ms ease-in-out;
}
button.navbar-toggle span.bar1{
	-webkit-transform: translateY(0) rotate(0deg);
	transform: translateY(0) rotate(0deg);
	transition: all 300ms ease-in-out;
}
button.navbar-toggle span.bar2{
	opacity: 100;
	transition: all 300ms ease-in-out;
}
button.navbar-toggle span.bar3{
	-webkit-transform: translateY(0) rotate(0deg);
	transform: translateY(0) rotate(0deg);
	transition: all 300ms ease-in-out;
}
/*------------------------------
■■■■■ドロップダウンメニューホバー(スマホ)■■■■■
------------------------------*/
.open > .dropdown-menu {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  
  
}
.dropdown-menu {
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards; 
  -webkit-transform: scale(1, 0);
  display: block;
  width:100%;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}
.dropup .dropdown-menu {
  -webkit-transform-origin: bottom;
  transform-origin: bottom;  
}
/*-----Slick-----*/
.slick-prev::before {
    content: '';
    display:block;
    width:30px;
    height:30px;
    background:url('../images/common/slider-arrow-left.png') center center no-repeat;
    background-size:cover;
}
.slick-next::before {
    content: '';
    display:block;
    width:30px;
    height:30px;
    background:url('../images/common/slider-arrow-right.png') center center no-repeat;
    background-size:cover;
}
.slick-prev::before, .slick-next::before {
	margin-top:0;
    font-family:'slick';
    font-size: 0;
    line-height: 1;
    opacity: .75;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
    left: 5px;
}
.slick-next {
    right: 5px;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1;
}
/*index(スマホ)*/
.logo-block{
	height:120px;
}
.sns-box th,.sns-box td{
	display:block;
	text-align: center;
}
.sns-box td{
	padding-top:0;
}
/*News Box*/
.news-box > object{
	height:560px;
}
/*-----<spacer>-----*/
.ctsp1{margin-top:5px;}
.cbsp1{margin-bottom:5px;}
.ctsp2{margin-top:10px;}
.cbsp2{margin-bottom:10px;}
.ctsp3{margin-top:15px;}
.cbsp3{margin-bottom:15px;}
.ctsp4{margin-top:20px;}
.cbsp4{margin-bottom:20px;}

}
/* -------------------------------------------------------------------------------
 768px～
------------------------------------------------------------------------------- */
@media only screen and (min-width : 768px) {
/* デスクトップ表示ではホバー操作でドロップダウンを表示 */
.navbar-nav > li.dropdown:hover > .dropdown-menu{
  display: block;
}
.sp-view{
	display:none;
}
ul.sp-view,li.sp-view,div.sp-view{
	display:none;
}
}
/* -------------------------------------------------------------------------------
 768px～991px(Small/col-sm)
------------------------------------------------------------------------------- */
@media only screen and (min-width: 48.063em) and (max-width: 61.9375em) { 

}
/* -------------------------------------------------------------------------------
 992px～1199px(Medium/col-md)
------------------------------------------------------------------------------- */
@media only screen and (min-width: 62em) and (max-width: 74.9375em) {

}
/* -------------------------------------------------------------------------------
 ～1199px
------------------------------------------------------------------------------- */
@media only screen and (max-width: 74.9375em) {

}
/* -------------------------------------------------------------------------------
1200px～(Large/col-lg)
------------------------------------------------------------------------------- */
@media only screen and (min-width: 90.063em) { }