/************************************************************
jaxson.jp 共通CSS
jxsn-products-item.css 20170223
*************************************************************/

/************************************************************
common settings
*************************************************************/
html, body {
//	background: rgb(28, 29, 38);
	background-color: #00044c;
height:100%;
}

input[type="text"], input[type="password"], input[type="email"], select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: border-color 0.2s ease-in-out;
	-webkit-transition: border-color 0.2s ease-in-out;
	-ms-transition: border-color 0.2s ease-in-out;
	transition: border-color 0.2s ease-in-out;
	background: rgba(0, 0, 0, 0);
	border-radius: 4px;
	border: solid 1px rgba(204, 204, 204);
	color: inherit;
	display: block;
	outline: 0;
	padding: 0 1em;
	text-decoration: none;
	width: 100%;
}
a {
	-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	text-decoration: none;
}

.sprite{
	display: block;
	text-indent: 101%;
	white-space: nowrap;
	overflow: hidden;
}

.main a,.main a:hover,.main a:active,.main a:visited{ color: #003399; }
.breadcrumb-wrapper a,.breadcrumb-wrapper a:hover,.breadcrumb-wrapper a:active,.breadcrumb-wrapper a:visited{ color: #ffffff; }

/* Fonts
*************************************************************/
/* 
【規定】font-family: Meiryo, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif; 
【変更】"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; 
見出しはbootstrap override内で指定
*/


body { 
font-family: Meiryo, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif; 
}

h1{ font-size:3.0rem; }
h2{ font-size:2.5rem; letter-spacing:0.15em; }
h3{ font-size:2rem; }
h4{ font-size:1.5rem; }
h1 .h1-low{ padding-left:1.5rem; font-size:60%; }


/************************************************************
shorthands
*************************************************************/
.cb { clear:both; }

.mr0{ margin-right: 0;}
.ml0{ margin-left: 0;}
.pr0{ padding-right: 0;}
.pl0{ padding-left: 0; }
.pl4rm{ padding-left: 4rem; }

.mt0 { margin-top: 0; }
.mt15 { margin-top: 15px; }
.mt30 { margin-top: 30px; }
.mt50 { margin-top: 50px; }
.mt75 { margin-top: 75px; }
.mt100 { margin-top: 100px; }

.fs85 { font-size:85%; }
.fs70 { font-size:70%; }

.fw700{ font-weight:700; }

.w1170{ width: 1170px; }

.mh50vh{ min-height:50vh; }

@media screen and (max-width: 1200px){
	.w1170{ width: auto; }
}

.fc-red { color:#ff0000; }
.fc-navy { color:#000099; }

.color-vetro { color:#550055; }
.color-barco { color:#531000; }
.color-spazio{ color:#9c8302; }
.color-formale{ color:#b44817; }
.color-sedere{ color:#e09100; }
.color-casa { color:#00376f; }
.color-mobile{ color:#695701; }
.color-verosa{ color:#5d3017; }
.color-collection{ color:#669999; }
.color-cipresso{ color:#577565; }
.color-gioponti{ color:#5a5d29; }

.border-vetro { border-color:#550055; }
.border-barco { border-color:#531000; }
.border-spazio{ border-color:#9c8302; }
.border-formale{ border-color:#b44817; }
.border-sedere{ border-color:#e09100; }
.border-casa { border-color:#00376f; }
.border-mobile{ border-color:#695701; }
.border-verosa{ border-color:#5d3017; }
.border-collection{ border-color:#669999; }
.border-cipresso{ border-color:#577565; }
.border-gioponti{ border-color:#5a5d29; }


.color-logo-dark{ color:#0e1944; }
.border-logo-dark{ border-color:#0e1944; }

.no-line,.no-line:hover,.no-line:active,.no-line:visited{ text-decoration:none; }

.panel-beige{ 
	background-color:#f6f6ee;
	border:1px solid #f6f6ee;
	border-radius:5px;
	-webkit-box-shadow :  2px 2px 2px 0 #ccc;
	-moz-box-shadow    :  2px 2px 2px 0 #ccc;
	box-shadow         :  2px 2px 2px 0 #ccc;

} 


/************************************************************
bootstrap override
*************************************************************/

.breadcrumb{
	background-color: #aaaaaa;
	position: relative;
	border-radius: 0;
	width: 100%;
	padding:0 0 0 0;
	margin-bottom:0;
	max-width:1170px;
	text-align:left; 
	margin:0 auto;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
font-family: Meiryo, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif; 
}


@media print {
  a[href]:after {
    content: "";
  }
  abbr[title]:after {
    content: "";
  }
}
/************************************************************
bootstrap custom element
*************************************************************/

.page-wrapper{ background-color: #ffffff; }

.main a.btn-mono{ background-color:#999999; color:#ffffff; }
.main a.btn-mono:hover{ background-color:#cccccc; color:#003399; }

/************************************************************
contents settings
*************************************************************/

.noscript-header{ font-size:130%; }

.main{ background-color: #ffffff; padding:0; }

.main{ margin-top:113px;  }/* due to #header */

@media screen and (max-width: 800px){ 
	.main{ margin-top:44px;  }/* due to #titleBar + toggle */ 
}

.li-haschild > span.alt-en{ display:inline; }
.li-haschild > span.alt-ja{ display:none; }
.li-haschild:hover .li-haschild > span.alt-en{ display:none; }
.li-haschild:hover .li-haschild > span.alt-ja{ display:inline; }

.a-bilingual span.alt-en{ display:inline; }
.a-bilingual span.alt-ja{ display:none; }
.a-bilingual:hover span.alt-en{ display:none; }
.a-bilingual:hover span.alt-ja{ display:inline; }

#menu-sns a img{
	vertical-align: top !important;
}

.breadcrumb-wrapper{
	background-color: #aaaaaa;
	text-align:center;
}

.breadcrumb{ /* bootstrap override */ }

/* パンくずの配下 breadcrumb children */
.breadcrumb-list{
	list-style: none;
	padding-left: 20px;
	display: inline-block;
	margin: 0 auto;
}

@media screen and (max-width: 1200px){ 
	.breadcrumb-list{ 
		margin-left: 0; 
		padding-left: 0;
	}
}

.breadcrumb-item{
	margin-right: 10px;
	display:inline-block;

}
.breadcrumb-item:after{
	content: ">";
	display: inline-block;
	margin-left: 10px;
	line-height: 1em;
	font-size: 14px;
	color: rgb(255, 255, 255);
	top: -1px;
	position: relative;
}
.breadcrumb-item:last-child{
	margin-right: 0;
}
.breadcrumb-item:last-child:after{
	content: "";
}
.breadcrumb-link{
	color: #fff;
	line-height: 30px;
}

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

	#slider-thumbs{
		width: 100% !important;
	}

	#listCaruousel .carousel-control.right{
		right: 1% !important;
	}

	.breadcrumb{
	    top: 4.7%;
			padding-left:45px;
	}
}

/* contents **************************************************************/

.content-header, .content-main {
	padding: 0 4%;
	margin:0 auto;
	width:1170px;
}

.content-header{
	padding-top:50px;
}



.common-content{ 
	padding: 0 4%;
	margin:0 auto;
	width:1170px;
}


@media screen and (max-width: 1200px){
	.content-header, .content-main, .common-content{ width: auto; }
}


.pad-vertical-mediaquery{
	padding-top:100px;
	padding-bottom:100px;
}
.pad-vertical-tron-mediaquery{
	padding:0 0 0 0;
}

@media screen and (max-width: 800px){ 
	.pad-vertical-mediaquery{ padding-top:40px; padding-bottom:20px; }
	.pad-vertical-tron-mediaquery{ padding-top:0; padding-bottom:20px; }
}



.row-flat{ 
	margin:0 auto;
	padding: 0 4%;
	
}


.content-header h1, h1.content-header, h1.pagetitle {
	color: #000;
	letter-spacing: 0.1em;
	line-height: 1.413;
	text-align: left;
}

.content-header p{
	color: #666666;
}


.content-body{
	margin-top: 50px;
	line-height: 1.4;
}

.h3-common1{ display:block; border:3px solid #666666; border-width:0 0 0 3px; width:100%; }
.h3-common1 span.h3-sub { display:block; border:3px solid #cccccc; border-width:0 0 1px 3px; padding-left:5px ;}

.h3-catalog{ font-size:1.8rem; }


.lnk-btn {
	color: #ffffff;
	text-align: center;
	border: double 3px #ffffff;
	line-height: 21px;
	display:inline-block;
	padding:3px 10px;
	background-color:#000033;
}
.main a.lnk-btn,.main a.lnk-btn:hover,.main a.lnk-btn:active,.main a.lnk-btn:visited{ color: #ffffff; }
.main a.lnk-btn:hover { text-decoration:none; }