@charset "UTF-8";
/* Scss Document */
/*******************************
 
Products Top Css
 
*******************************/
/*-----------------------------
command
-----------------------------*/
body.products-top #g-navi .main-nav li.product:hover .mega{
    max-height: 0;
    display: none;
}
section {
	margin-bottom: 200px;
}
.anchor {
	margin-top: -100px;
	padding-top: 100px;
}
.align-items-center {
	align-items: center;
}
.block-main-ttl {
	font-size: 175%;
	font-weight: 600;
	letter-spacing: .1em;
	margin-bottom: 40px;
}
.block-main-ttl span {
	display: block;
	font-size: 55%;
	letter-spacing: normal;
	color: #929292;
	font-weight: normal;
}
h2.block-main-ttl {
	font-size: 200%;
	letter-spacing: .18em;
}
h2.block-main-ttl span {
	font-size: 75%;
	letter-spacing: normal;
	color: unset;
}
.flex.col-pc-3 {
	margin-right: -20px;
}
.flex.col-pc-3 .item {
	width: 33.333%;
	padding-right: 20px;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
	.flex.col-pc-3 .item {
		width: 50%;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
	.flex.col-pc-3 .item {
		width: 100%;
	}
}
/*==== tablet タブレット用css ===*/
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
	section {
		margin-bottom: 80px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
	section {
		margin-bottom: 60px;
	}
	.block-main-ttl {
		font-size: 167%;
		margin-bottom: 20px;
	}
}
/*-----------------------------
Hero
-----------------------------*/
.hero {
	background: #c5cbd3;
	margin-bottom: 160px;
	padding-top: 45px;
}
.hero .block-main-ttl {
	margin-bottom: 80px;
}
.hero .anchor-link {
	order: 2;
	width: 40%;
}
.hero .anchor-link li {
	font-size: 135%;
	text-align: left;
	margin-bottom: 60px;
}
.hero .anchor-link li a {
	display: block;
	overflow: hidden;
}
.hero .anchor-link li span {
	float: left;
	display: block;
	width: 90%;
	letter-spacing: .15em;
	border-bottom: solid 1px #9e9e9f;
	-webkit-transition: all 300ms 0s ease;
	transition: all 300ms 0s ease;
}
.hero .anchor-link li span.num {
	width: 10%;
	letter-spacing: normal;
	border-bottom: none;
}
.hero .anchor-link li a:hover span {
	color: #2C2C2C;
	border-color: #2C2C2C;
}
.hero .img {
	width: 60%;
	max-height: 380px;
	overflow: hidden;
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
	.hero {
		margin-bottom: 60px;
	}
	.hero .block-main-ttl {
		margin-bottom: 60px;
	}
	.hero .anchor-link {
		width: 65%;
	}
	.hero .anchor-link li span.num {
		width: 15%;
	}
	.hero .anchor-link li span {
		width: 85%;
	}
	.hero .img {
		width: 35%;
		padding-right: 10px;
	}
}


/*-----------------------------
select-products
-----------------------------*/
#select-products .item {
	margin-bottom: 20px;
	position: relative;
}
#select-products .btn-bd {
	opacity: .6;
	display: block;
	height: 100%;
	border: solid 1px #D8D8D8;
	padding: 20px 10px 20px 80px;
	font-size: 110%;
	font-weight: 600;
	text-align: left;
	position: relative;
}
#select-products .btn-bd:before,
#select-products .btn-bd:after{
	content: "";
    position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
    height: 0;
    border: 1px solid transparent;
}
#select-products .btn-bd:hover{
	opacity: 1;
}
#select-products .btn-bd:hover:before,
#select-products .btn-bd:hover:after{
	width: 100%;
    height: 100%;
}
#select-products .btn-bd:hover:before{
	border-top-color: #5b5b5b;
    border-right-color: #5b5b5b;
    transition: width .3s, height .3s .3s;
}
#select-products .btn-bd:hover:after{
	border-bottom-color: #5b5b5b;
    border-left-color: #5b5b5b;
    transition: height .3s, width .3s .3s;
}
#select-products .btn-bd span{
	display: block;
	height: 100%;
}
#select-products .btn-bd span:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 80px;
	height: 80px;
	margin: auto;
	background-image: url("../img/ico_sprite@2x.png");
	background-repeat: no-repeat;
	background-size: 640px auto;
}
#select-products .swing .btn-bd span:before {
	background-position: left top;
}
#select-products .adk .btn-bd span:before {
	background-position: -80px top;
}
#select-products .olive .btn-bd span:before {
	background-position: -160px top;
}
#select-products .asahiwood .btn-bd span:before {
	background-position: -240px top;
}
#select-products .avawood .btn-bd span:before {
	background-position: -320px top;
}
#select-products .aquawood .btn-bd span:before {
	background-position: -400px top;
}
#select-products .amlys .btn-bd span:before {
	background-position: -480px top;
}
#select-products .wallfitmount .btn-bd span:before {
	background-position: -560px top;
}

/*-----------------------------
select-bland
-----------------------------*/
#select-bland{
	margin-bottom: 50px;
}
.product-list {
	padding: 40px 0 0;
}
.product-list .item {
	margin-bottom: 60px;
}
.product-list .item .img {
	width: 100%;
	margin-bottom: 10px;
}
.product-list .item .img img {
	width: 100%;
}
.product-list .item .txt {
	width: 100%;
	margin-bottom: 10px;
}
.product-list .item .txt .brand-ttl {
	font-size: 115%;
	font-weight: 100;
	text-align: center;
	letter-spacing: .03em;
	margin-bottom: 10px;
}
.product-list .item .txt .brand-ttl span {
	display: block;
	font-size: 70%;
	font-weight: normal;
	color: #929292;
}
.btn-txt{
	font-size: 87%;
    text-decoration: underline;
	display: inline-block;
}
.btn-txt:after{
	content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    display: inline-block;
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
	.product-list .item {
		width: 100%;
		margin-bottom: 40px;
	}
}