/************************************************************
jaxson.jp 個別CSS
jxsn-top.css 20170403
*************************************************************/

/************************************************************
common settings
*************************************************************/
html, body {
	background-color: #00044c;
height:100%;
}

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



/* Fonts
*************************************************************/
body { 
/*	font-family: Meiryo, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif; */
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', '游ゴシック', YuGothic, 'ＭＳ Ｐゴシック', sans-serif;

	letter-spacing:0.15em; 
}

h1{ font-size:3.5rem; }
h2{ font-size:3rem; }
h3{ font-size:2rem; }
h4{ font-size:1.5rem; }



/************************************************************
shorthands
*************************************************************/

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

/************************************************************
bootstrap custom element
*************************************************************/

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

#header{ 
	background-color: rgba(255, 255, 255, 0.3);

	box-shadow: 0 0 0 0 white;
	display: block;
	position: relative;
	cursor: default;
	left: 0;
	line-height: 2.5rem;
	position: fixed;
	width: 100%;
	height: 6rem;
	top: 0;
	left: 0;
	z-index: 100;
	transition: all 0.3s ease 0s;

}

#header #logo-menu {
	width: 100%;
	margin: 0 auto;
	right: 0;
	left: 0;
	padding: 0;
	display: flex;
}

@media screen and (min-width: 1200px) {
	#header #logo-menu { width: 1170px; }
}

#header #logo {
	left: 0;
	width: 134px;
	position: relative;
	margin-top: 0.5em;
	display:inline-block;
	padding:0;
}

.sprite{ 
/*
	border:1px solid #f00;
	overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
*/
}

#header #logo a {
	background: url("/img/header/logo-navy.svg") 0 0 no-repeat;
	background-size: contain;
	position: relative;
	display: inline-block;
	width:100%;
	height:100%;
}

#logo #nav{
/*
	display:inline-block; 
	width:90vh;
	position:relative; 
*/
}


#header nav {
	display:inline-block;
	position: relative;
	top: 0px;
	right: 0;
	left: 0;
	margin-top: 3rem;
	height: 100%;
	width:80%;
//border:1px solid #f00;

}

/* Dropotron 対策 */

	.dropotron {
//		background: rgba(39, 40, 51, 0.965);
//		background: rgba(255, 255, 255, 0.965);
		background: rgba(64, 64, 64, 0.5);
		border-radius: 0;
		list-style: none;
		margin-top: 2em;
//		padding: 0.5em 2em 1em 0;
		padding: 1em 2em 1em 1em;
		display:block;
	}

@media screen and (max-width: 1200px) {
	#logo{ margin-left:20px; }
	#header nav { width:80%; }
}

.glnv-ul{
	color: #00044c;
}
.glnv-li{
}

.glnv-li-a{
}

.glnv-li-a:hover{ 
	color:#00044c; 
}

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

.main {margin-top:0; } 

#top-mv{
    background-image: url("/img/mv/top-mv.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    width: 100%;
    padding: 0;
    height: 500px;
    max-height: 500px;
    min-height: 500px;
}

.dl-whatsnew{
}

.dl-whatsnew dt,.dl-whatsnew dd{
	letter-spacing:0.15em;
}

.dl-whatsnew dt{
	padding-top:1em;
}
.dl-whatsnew dd{
	padding-left:1em;
	padding-top:0.5em;
	border:1px dashed #ccc;
	border-width:0 0 1px 0;
	
}

.whatsnew-card-container{
	padding-top:8rem;
	padding-bottom:2rem;
	letter-spacing:0.2rem; 
}
@media screen and (max-width: 768px) {
	.whatsnew-card-container{ padding-top:2rem; }
}

.whatsnew-card{
	margin-bottom:0;

	background-color:#dde2e5;
	border:1px solid #dde2e5;
	-webkit-box-shadow :  3px 3px 0 0 #ccc;
	-moz-box-shadow    :  3px 3px 0 0 #ccc;
	box-shadow         :  3px 3px 0 0 #ccc;

}
@media screen and (max-width: 768px) {
	.whatsnew-card{ display:inline-block; margin-bottom:2rem; }
}


.whatsnew-card time{ font-weight:700; }

.whatsnew-card-a,.whatsnew-card-a img{
	display:inline-block;
	padding:5px 0;
//	background-color:;
}

/* productslist **************************************************************/
.productslist-container{
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	background-image:url(/img/bg/bg-h850.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center 80%; 

}

.productslist-cardface{
	width:99%;
	padding:3rem 3rem 1rem 0;
/*
	border:1px solid #fff;
	border-radius:5px;
*/
	display:inline-block;
	margin-bottom:4rem;

	background-size:cover; 
	background-repeat: no-repeat:
	bacground-position: 0 0;

	-moz-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	opacity:1;
	height:12em;
}

.productslist-cardface:hover{
	opacity:0.8;
}

.bgwh90{
	display:inline-block;
	padding:0.5em 1em 0.5em 1em;
	background-color:transparent;
	min-width:15rem;
	background-color:#ffffff;
	opacity:0.9;
	color:#333333;
	width:20rem;

	-webkit-box-shadow :  1px 1px 1px 0 #999999;
	-moz-box-shadow    :  1px 1px 1px 0 #999999;
	box-shadow         :  1px 1px 1px 0 #999999;

}

#productslist-cardface-spazio{ background-image: url(/products/spazio/img/spazio-thumb-top.jpg); background-position-y:bottom; }
#productslist-cardface-verosa{ background-image: url(/products/verosa/img/verosa-thumb-top.jpg); background-position-y:top; }
#productslist-cardface-collection{ background-image: url(/products/collection/img/collection-thumb-top.jpg); background-position-y:middle;}
#productslist-cardface-gioponti{ background-image: url(/img/mv/products/gioponti-thumb.jpg); }

a.a-productsname, a.a-productsname:hover{ color: #666666; font-size:120%; }


/* contentslist **************************************************************/
.contentslist-container{
	margin-top:60px;
	margin-left:auto;
	margin-right:auto;
	background-color:#ffffff;
	padding:0 30px 30px 30px ;
}

.contentslist-card{
	margin-top:0;
	margin-bottom:0;
}

.contentslist-cardface{
	width:99%;
	padding:12rem 3rem 1rem 0;
	border:1px solid #ccc;
	border-radius:5px;
	display:inline-block;
	position:relative;

	background-size: cover;
	background-position: center 70%;
	background-repeat: no-repeat:

	-moz-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
	opacity:1;
	
}

.contentslist-cardface:hover{
	opacity:0.5;
}

.bgbk50{
	display:inline-block;
	padding:5px 30px 5px 30px;
	background-color:rgba(27,27,45,0.5);
	min-width:13rem;
}

#contentslist-cardface-catalog{ background-image: url(/img/catalog/catalog-thumb.jpg); }
#contentslist-cardface-showroom{ background-image: url(/img/showroom/showroom-thumb.jpg); }

a.a-contentsname, a.a-contentsname:hover{ color: #ffffff; font-size:120%; }




@media screen and (min-width: 1200px) {
	#top-mv{
		height:auto;
    padding-top:50%;
		min-height:;
    max-height:;
		border:0 solid #f00;
    background-image: url("/img/mv/top-mv-wide.jpg");
	}
	#top-mv:before {
	    content:"";
	    display: block;
	    padding-top: 50%;
	}
	#top-mv-inside{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	}
}

/* footer.cssからのカスタマイズ */

#footer{
	background-color:#091c44;
	background-image:none;
}

#footer-panel{ color:#eee; }


.footer-nav-ul li{ color:#ffffff; }

.footer-nav-ul li a{ }
.footer-nav-ul li a:hover{ text-decoration:none; }


.footer-nav-li-l1{ }
.footer-nav-li-l1 a{ }
.footer-nav-li-l2{ }
.footer-nav-li-l3{ }
.footer-nav-li-l4{ }


.footer-nav-ul li a{ color:#ffffff; }
.footer-nav-ul li a:hover{ color:#ffffff; }

	#footer-logo{
	}

	#footer-logo a{
	}

#footer .a-fc{ 
	color:#ffffff; 
}
#footer .a-fc:hover{ 
	color:#ffffff; 
	text-decoration:none;
}



	#copyright{
		color: #ffffff;
	}

	#copyright-inner{
		color:#ffffff;
	}