@charset "UTF-8";

@-ms-viewport	{width: device-width;}
/*--------------------------------------------------------------------------
2018~ NEWS CMS LOUIS GARNEAU
--------------------------------------------------------------------------*/

body{
	margin:0;
	padding:0;
	font-family:'メイリオ', Meiryo , '游ゴシック', YuGothic,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3','ＭＳ Ｐゴシック' , sans-serif;
	line-height: 1.6;
}
a {
    outline: none;
}
a:focus, *:focus { outline:none; }
/*------------------------------
■■■■■text■■■■■
------------------------------*/
/*
font-family: 'Roboto', sans-serif;
font-family: 'Poppins', sans-serif;
*/
.text-red{color:#a21929;}
.text-rbike{color:#82817d;}
.text-rdbike{color:#cf131b;}
.text-aike{color:#e35f0c;}
.text-caption{
	font-size:90%;
}
/*------------------------------
■■■■■header■■■■■
------------------------------*/
header{
	margin:0;
	padding-top:30px;
	padding-bottom:30px;
	background-color:#FFF;
	border-bottom:1px solid #000;
}
.head-logo{
	margin:0;
	vertical-align: top;
}
.head-logo img{
	margin:0 10px 0 auto;
	width:300px;
	height:auto;
}
header h2{
	margin:10px 0 0;
	padding:5px 0;
	color:#666;
	font-family: 'Roboto', sans-serif;
	display: inline;
	font-size:120%;
	line-height: 1.6;
}
.social-icon{
	text-align: right;
}
.social-icon img{
	width:auto;
	height:24px;
}
/*------------------------------
■■■■■footer■■■■■
------------------------------*/
footer{
	padding:20px 0;
	background-color:#fff;
	border-top:1px solid #222222;
	color:#222;
}
.f-logo-louis{
	text-align: left;
}
.f-logo-louis img{
	margin-top:6px;
	width:180px;
	height:auto;
}
.f-logo-smlc img {
    margin-top: 0;
    width: 35px;
    height: auto;
}
.f-logo-asahi{
	text-align: right;
}
.f-logo-asahi small{
	padding:5px 10px;
	color:#999;
	font-size:80%;
	display:inline-block;
}
div.f-logo-asahi img{
	width:130px;
	height:auto;
}
.text-copyright{
	margin-top:5px;
	font-size:80%;
	text-align: left;
}
/*-----<foot-menu>-----*/
.foot-menu{
	margin-bottom:30px;
	font-size:110%;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}
.foot-menu li a:link,.foot-menu li a:visited{
	color:#FFF;
	-webkit-transition: 0.2s ;
    transition: 0.2s ;
}
.foot-menu li a:hover,.foot-menu li a:active{
	color:#c40018;
	-webkit-transition: 0.2s ;
    transition: 0.2s ;
    text-decoration: none;
}
/*フッターFB埋め込み*/
.fb_iframe_widget{
	display:block!important;
}
/*フッターソーシャルアイコン*/
ul.social-icon{
	margin:5px 0 10px 0;
	list-style-type: none;
}
ul.social-icon li{
	margin-bottom:6px;
	display:inline-block;
}
ul.social-icon li img{
	margin-right:10px;
	height:26px;
	width:auto;
}
ul.social-icon li img:link,ul.social-icon li img:visited{
	filter: alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
    -webkit-transition: 0.2s ;
    transition: 0.2s ;
}
ul.social-icon li img:hover,ul.social-icon li img:active{
	filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;
    -webkit-transition: 0.2s ;
    transition: 0.2s ;
}

/*------------------------------
■■■■■text■■■■■
------------------------------*/
/*
color:#003e81;青
color:#dc0823;赤
*/
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{
	line-height: 1.2;
	font-size:50%;
	display:inline-block;
}
p{
	line-height: 1.6;
}
/*------------------------------
■■■■■news_dir■■■■■
------------------------------*/
.main-ti{
	margin:30px 0 10px;
	padding:5px 0;
	border-bottom:3px solid #222222;
	
}
/* ソーシャルブックマークの左寄せの指定 */
.social div.widget{
	float: left;
	margin-right: 0.5em;
}

/* 日付部分（右寄せ） */
.update {
	text-align: right;
	float: right;
	width: 15em;
	margin: 0;
}

/* 画像部分のコンテナ */
.imagepart {
	/*float: right;*/
	margin: 0 0 30px 0px;
}
.imagepart img{
	max-width:100%;
	width:100%;
	height:auto;
}
/* 画像１
.imagepart .mainimage {
	position: relative;
	width: 300px; /* 画像１の幅 */
	height: 225px; /* 画像１の高さ */
	margin: 0 0 8px 15px;
	overflow: hidden;
	float: left;
}
/* 画像２，３ 
.imagepart .subimage {
	position: relative;
	width: 146px; /* 画像２，３の幅 */
	height: 110px; /* 画像２，３の高さ */
	overflow: hidden;
	float: left;
}
/* 画像２ 
.imagepart .left {
	margin: 0 8px 8px 15px;
}
/* 画像３ 
.imagepart .right {
	margin: 0 0 8px 0;
}
*/

/* 全画像共通 */
.imagepart img {
	position: absolute;
	left: 0;
	top: 0;
	border: none;
	height: 100%;
	visibility: hidden;
	opacity: 0;
}
/* 記事内容部分の表示 
.textpart {
	margin: 0;
	width: 470px; /* 全体 - 画像 - 画像マージン */
	float: left;
}
.textpart p
{
	margin: 0 0 1em 0;
	line-height: 140%;
}


/* 前後リンク、一覧へのリンク部分 */
.linkpart{
	margin: 30px auto 0;
}


.filelink {
	padding-left: 20px;
	margin-right: 10px;
	background: url(./icons/general.gif) no-repeat top left;
}
.doc {
	background-image: url(./icons/doc.gif)
}
.pdf {
	background-image: url(./icons/pdf.gif)
}
.ppt {
	background-image: url(./icons/ppt.gif)
}
.img {
	background-image: url(./icons/img.gif)
}
.txt {
	background-image: url(./icons/txt.gif)
}
.xls {
	background-image: url(./icons/xls.gif)
}
.zip {
	background-image: url(./icons/zip.gif)
}
/*------------------------------
■■■■■news_index■■■■■
------------------------------*/
/* 一覧表示のためのスタイル */

/* 罫線の設定 ここから */
.ruled {
	list-style: none outside none;
	padding-left: 0;
	margin-top: 0;
	width: 100%; /* 表示幅 */
}
.ruled li {
	border-bottom: 1px dotted #999; /* 太さ、線種、色 */
	height: auto;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
/* 一番上（リストの上）の罫線 */
div.ruled {
	border-bottom: 1px dotted #999; /* 太さ、線種、色 */
}
/* 罫線の設定 ここまで */


/* 文字色・スタイルの設定 ここから */
.listdate {
	color: gray;
}

.listlink a,
.listlink a:link
{
	color: #389ABE;
	text-decoration: none;
}
.listlink a:hover,
.listlink a:active
{
	text-decoration: underline;
}
.listlink a:visited
{
	color: #9A38BE;
}
/* 文字色・スタイルの設定 ここまで */


/* マウスオーバーでの背景色の設定 ここから */
.interactive li:hover{
	background-color: #f0f0f0;
}
/* マウスオーバーで背景色を変更する時は、リンク文字の変更を止めておく */
.interactive .listlink a:hover,
.interactive .listlink a:active
{
	text-decoration: none;
}
/* マウスオーバーでの背景色の設定 ここまで */



.filelink {
	padding-left: 20px;
	margin-right: 10px;
	background: url(./icons/general.gif) no-repeat top left;
}
.doc {
	background-image: url(./icons/doc.gif)
}
.pdf {
	background-image: url(./icons/pdf.gif)
}
.ppt {
	background-image: url(./icons/ppt.gif)
}
.img {
	background-image: url(./icons/img.gif)
}
.txt {
	background-image: url(./icons/txt.gif)
}
.xls {
	background-image: url(./icons/xls.gif)
}
.zip {
	background-image: url(./icons/zip.gif)
}
/*------------------------------
■■■■■short_list■■■■■
------------------------------*/
.news-block{
	height:600px;
}
.news-block object{
	height:600px;
}
body#short_list {
	background-color: #FFF;
	
}
/* 区切り */
.item {
	border-bottom: 1px dotted gray; /* 太さ、線種、色 */
	padding-top: 16px;
	width: 100%; /* ページ内での表示を考慮して幅を決める */
}
/* アイキャッチ */
.thumbnail {
	position: relative;
	width: 90px; /* 画像幅 */
	height: 90px; /* 画像高さ */
	overflow: hidden;
	float: left;
	margin-right: 16px;
	margin-bottom: 30px; /* サマリーの量に合わせて適当なマージンを指定 */
	background-color: #FFF;
}
	.thumbnail img {
		position: absolute;
		left: 0;
		top: 0;
		border: none;
		height: 100%;
		visibility: hidden;
		opacity: 0;
	}

/* ブラウザの初期空白設定リセット */
.item .info,
.item .info h3 {
	margin: 0;
	padding: 0;
}

/* メインタイトルの表示 */
.item .info h3 {
	margin-top; 0px;
	font-size: 1.0em; /* 文字サイズ */
	font-weight: normal;
	color: #FFF;
}
/* タイトルからのリンク */
.item h3 a:link{
	color: #222222;
}
.item h3 a:hover,.item h3 a:active{
	color: #FF0000;
}
.item h3 a:visited {
	color: #666666;
}

.text-arrow{
	padding-left:12px;
	background:url('../images/common/next-arrow.svg') left center no-repeat;
}
a.text-arrow:link,a.text-arrow:visited{
	font-size:75%;
	color:#666666;
}
a.text-arrow:hover,a.text-arrow:active{
	font-size:75%;
	color:#FF0000;
}
/* 概要 */
.description
 {
	font-size: 0.8em; /* 文字サイズ */
	margin-top: 6px;
	margin-left: 0;
	color:#222;
}

/* 日付表示の設定 */
.dateinfo {
	display: block;
	margin: 6px 0 0.5em 3px;
	color: #FF0000; /* 色 */
	font-size: 0.7em; /* 文字サイズ */
}

.info h3{
	font-weight:bold;
}
/*----------------------------------------
トップに戻るボタン
----------------------------------------*/
#scroll_to_top {
	/* 「TOPに戻る」ボタンにカーソルを載せた時に、
	カーソルが指のマークになるようにしています。 */
	cursor: pointer;
/* 常にページの右下に表示されるように固定します。 */
	  position: fixed;  /* 位置を固定させます。 */
	  right: 25px;      /* 画面の右橋から20px空けます。 */
	  bottom: 60px;     /* 画面の下端から20px空けます。 */
}
#scroll_to_top img{
	max-width:100%;
	height:auto;
}
#scroll_to_top p{
	padding:2px 8px 10px 8px;
	background-color:#262626;
	display:block;
	width:38px;
	height:38px;
	color:#FFF;
	font-size:140%;
	text-align: center;
	border-radius:21px;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	-webkit-transition: 0.2s ;
    transition: 0.2s ;
}
#scroll_to_top p:hover{
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	background-color: #003e81;
	-webkit-transition: 0.2s ;
    transition: 0.2s ;
}

/*-----<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;}


.img-responsive, .carousel-inner > .item > img, .carousel-inner > .item > a > img {

    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;

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

/* ---------------------------------------------------------
～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;
	display:block;
}
header{
	background-color:#FFF;
}
/*-----------------------------------
■■■■■footer(スマホ)■■■■■
-----------------------------------*/
.f-logo-louis{
	text-align: center;
}
.f-logo-louis img{margin-bottom:10px;}
.f-logo-smlc{
	text-align: center;
}
.f-logo-asahi{
	text-align: center;
}
/*-----------------------------------
■■■■■contents(スマホ)■■■■■
-----------------------------------*/
.head-img-box_sub{
	position:relative;
	display:block;
	width:100%;
	height: 240px;
	overflow: hidden;
}
.head-img-box_sub h1{
	font-family: 'Roboto', sans-serif;
	font-size:400%;
	font-weight:200;
	color:#FFF;
	position:absolute;
	bottom:10px;
	z-index: 1;
}
.head-img-box_sub:before{
	content: "";
    margin-left:0;
    width: 0;
    height: 0;
    position:absolute;
    left:0;
    bottom:0px;
    border-style: solid;
    border-width: 80px 80px ;
    border-color:  transparent transparent #000000 #000000;
    z-index: 0;
}
.head-img-box_sub:after{
	content: "";
    margin-left:0;
    width: 0;
    height: 0;
    position:absolute;
    right:0;
    top:0;
    border-style: solid;
    border-width: 80px 80px ;
    border-color:   #ffffff #ffffff transparent transparent;
    filter: alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
    z-index: 0;
}
/*-----------------------------------
■■■■■index(スマホ)■■■■■
-----------------------------------*/

.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: 36px;
    height: 64px;
    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{bottom:5px;}
.slick-dots li button::before {
    font-family: 'slick';
    font-size: 8px;
    color: #FFF;
}
.bike-list a small{display:block;}
/*-----<top-menu-button>-----*/
.top-menu-btn{
	margin-bottom:20px;
	position:relative;
	text-align: center;
	border-radius:4px;
	height:160px;
	overflow: hidden;
}
.bike-list h2{
	font-family: 'Roboto', sans-serif;
	font-size:120%;
	font-weight:600;
	line-height: 1.2;
	color:#FFF;
	position: absolute;
	top:8%;
	display:block;
	width:100%;
	text-align: center;
}
/*-----------------------------------
■■■■■product(スマホ)■■■■■
-----------------------------------*/
.bike-description{
	margin-top:0;
	margin-bottom:10px;
	position:relative;
}
.bike-description h1{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size:340%;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
}
.bike-description h1 span{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size:100%;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
}
.bike-description h2{
	font-size:160%;
}
/*-----<block>-----*/
.block-name-box{
	position:relative;
}
/*-----<spec>-----*/
.spec tr th,.spec tr td{
	font-size:90%;
}
/*-----<geo>-----*/
.geo tr th,.geo tr td{
	font-size:90%;
}
/*------------------------------
■■■■■Bike-line up(スマホ)■■■■■
------------------------------*/
.head-img-box{
	position:relative;
	display:block;
	width:100%;
	height: auto;
}
.bike-type-description{
	padding:10px 20px;
	height: auto;
	position:relative;
}
.bike-type-description:after{
	content: "";
    margin-left:0;
    width: 0;
    height: 0;
    position:absolute;
    left:0;
    top:-120px;
    border-style: solid;
    border-width: 60px 60px ;
    border-color:  transparent transparent #000000 #000000;
    z-index: 1;
}
.bike-type-img{
	height: 240px;
}
.bike-type-img:after{
	content: "";
    margin-left:0;
    width: 0;
    height: 0;
    position:absolute;
    right:0;
    top:0;
    border-style: solid;
    border-width: 60px 60px ;
    border-color:   #ffffff #ffffff transparent transparent;
    filter: alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
    z-index: 1;
}
.head-img-box h1{
	font-family: 'Roboto', sans-serif;
	font-size:340%;
	font-weight:200;
}
.head-img-box p{
	font-size:85%;
	position:relative;
	width:100%;
	z-index: 2;
}
/*-----------------------------------
■■■■■dealers(スマホ)■■■■■
-----------------------------------*/
.map-jp-box div a{
	overflow: hidden;
}
.map-jp-box div a span{
	text-align: center;
	margin-left:-1px;
	margin-right:auto;
	display:block;
	height:1.6em;
	line-height: 1.6;
	overflow: hidden;
}
.bike-sale-icon-box{
	margin-top:5px;
	display:block;
}
.dealers tr th{
	display:block;
	width:25%;
	float: left;
	font-size:70%;
}
.dealers tr td{
	padding:1px 15px;
	display:block;
	width:100%;
	border:0;
	text-align: center;
}
.dealers tr td:first-child{
	padding-top:10px;
	padding-left:0;
	font-size:110%;
	background: none;
}
.dealers tr td:last-child{
	padding-bottom:10px;
	border-bottom:1px dotted #666;
}
/*-----<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 ul.dropdown-menu li a:link,.navbar .nav li ul.dropdown-menu li a:visited{
	color:#222;
}
.navbar .nav li ul.dropdown-menu li a:hover,.navbar .nav li ul.dropdown-menu li a:active{
	color:#dc0823;
}
.single-img{
	width:380px;
	ehight:auto;
}
}
/* -------------------------------------------------------------------------------
 768px～991px(Small/col-sm)
------------------------------------------------------------------------------- */
@media only screen and (min-width: 48.063em) and (max-width: 61.9375em) { 
/*------------------------------
■■■■■Bike-line up■■■■■
------------------------------*/
.head-img-box{
	position:relative;
	display:block;
	width:100%;
	height: auto;
}
.bike-type-description{
	padding:10px 20px;
	height: auto;
	position:relative;
}
.bike-type-description:after{
	content: "";
    margin-left:0;
    width: 0;
    height: 0;
    position:absolute;
    left:0;
    top:-120px;
    border-style: solid;
    border-width: 60px 60px ;
    border-color:  transparent transparent #000000 #000000;
    z-index: 1;
}
.bike-type-img{
	height: 480px;
}
.bike-type-img:after{
	content: "";
    margin-left:0;
    width: 0;
    height: 0;
    position:absolute;
    right:0;
    top:0;
    border-style: solid;
    border-width: 240px 240px ;
    border-color:   #ffffff #ffffff transparent transparent;
    filter: alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
    z-index: 1;
}
.head-img-box h1{
	font-family: 'Roboto', sans-serif;
	font-size:360%;
	font-weight:200;
}
.head-img-box p{
	font-size:85%;
	position:relative;
	width:100%;
	z-index: 2;
}
}
/* -------------------------------------------------------------------------------
 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) { }