/* フォント  */
/*  https://qiita.com/shotets/items/502f8093d53369eaab50   */
/*@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*        建材ナビ　スマホ             */
@media (max-width: 767px) {

#topMain {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:0px;
	padding-left:0%;
	padding-right:0%;
	padding-top: 1%;
	background-color:#FFFFFF;
	float:none;
}
#topLink_box {
	width: 100%;
	padding-top: 30px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 7%;
	background-color: #FFFFFF;
	float:none;
}
	
#top_website_h {
	width: 100%;
	margin-left: 0%;
	z-index: 100;	
	float: none;
}

#top_website_h h2 {
	text-align: center;
	font-size: 36px;
	margin-bottom: 20px;
	padding: 0px;
}	
#top_website_h h3 {
	font-family: 'Noto Sans JP';
	text-align: center;
	font-size: 15px;
	margin-bottom: 30px;
	padding: 0px;
	color: #666666;
	letter-spacing: 2px;
	line-height: 1.4em;
}	
#top_website_h h3 span {
	font-size: 18px;
	}
}

	
/*        建材ナビタブレット              */
@media (min-width: 768px) {

#topMain {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:0px;
	padding-left:0%;
	padding-right:0%;
	padding-top: 2%;
	background-color:#FFFFFF;
	min-width: 768px;
	float:none;
}


	
#top_website_h {
	width: 100%;
	margin-left: 0%;
	z-index: 100;	
	float: none;
}

#top_website_h h2 {
	text-align: center;
	font-size: 42px;
	margin-bottom: 20px;
	padding: 0px;
}	
#top_website_h h3 {
	font-family: 'Noto Sans JP';
	text-align: center;
	font-size: 19px;
	margin-bottom: 25px;
	padding: 0px;
	color: #666666;
	letter-spacing: 1px;
}	
#top_website_h h3 span {
	font-size: 24px;
	}
}
	


/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
#topKen_box {
	display: none;
}
	
/*#topKen_box_Sp {
	display: block;
	width: 100%;
}
	#topKen_box_Sp a img {
		width: 100%;
		height: auto;
	}	
*/
}


/*        建材ナビタブレット              */
@media (min-width: 768px) {	
#topKen_box_Sp {
	display: none;
}	
	
#topKen_box {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 30px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 2%;
	background-color: #FFFFFF;
	float:none;
	z-index: 0;
}	


#topKen_textWarp {
	position: absolute;
	top: 90px;
	left: 0px;
	width: 100%;
	background-color: #d90000;
	z-index: -1;
}
#topKen_textMain {
	width: 92%;
	/*max-width: 1200px;*/
	margin-right: auto;
	margin-left: auto;
}
p#topKen {
	display: block;
	width: 38%;
	padding-top: 1.5%;
	padding-bottom: 1.5%;
	color: #FFFFFF;
	font-size: 1.0em;
	line-height: 1.4em;
}	
	
#topKenMain {
	width: 92%;
	/*max-width: 1200px;*/
	margin-right: auto;
	margin-left: auto;
	z-index: 100;
}
#topKenMain:after, #topKenMain:before {
    content: "";
    clear: both;
    display: block;
}

#topKenLeft {
	width: 40%;
	float: left;
	z-index: 100;
	padding-top: 4%;
}
#topKenRight {
	width: 60%;
	float: right;
	z-index: 100;
	position: relative;
}
	
#topKenRight .topWebWarp a {
	width: 100%;
	display: block;
	color: #FFFFFF;
}

#topKenRight .topWebImgWarp {
	position: relative;
	overflow: hidden;
}
	
/*#topKenRight .topWebImgWarp img {
	width: 115%;
	height: auto;
	object-fit: cover;
}*/
	
#kenzaiImg {
	background-image: url(../img_n/top/ken.jpg);
	background-size: auto 100%;
	background-position: 20% top;
}
#kenzaiImg.topWebImg {
	/*background-size: contain;*/
	/*padding-top: 37.5%;*/
	padding-top: 50%;
}
	
	
	
#topKenLeft h2 {
	margin-bottom: 5px;
	margin-top: 0px;
	font-size: 24px;
	display: inline-block;
}
#topKenLeft h3 {
	margin-bottom: 200px;
	margin-top: 0px;
	font-size: 16px;
	display: inline-block;
}

.viewmore {
	font-size: 1.1em;
}
.viewmore img {
	width: 10%;
	height: auto;
	padding-left: 10px;
}

#vKen {
	text-align: right;
	margin-right: 5%;
}
.topWebTextContent h3.vh3 {
	display: none;
}	
	
.topWebTextContent p.vtext {
	display: none;
}

.topWebTextContent .vmore {
	display: none;
}	
/*.topWebTextWarp {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%
}
	#topKenRight .topWebTextContent {
	position: absolute;
	bottom: 0;
	width: 100%;
	}	
	
#topKenRight .topWebTextContent h3.vh3 {
	width: 100%;
	display: block;
	color: #FFFFFF;
	text-align: center;
	font-size: 1.80vw;
	font-weight: normal;
	letter-spacing: 2px;
	padding-top: 2%;
	padding-bottom: 2%;
	margin-bottom: 0%;
    transform: translateY(0px);
    opacity: 1;
    transition: all 0s ease-in-out;
	background-color: rgba(0,0,0,0.70);
}	*/

#topKenTabH3 {
	width: 100%;
	height: 100%
}	
#topKenTabH3 h3.vh3Tab {
	position: absolute;
	bottom: 0;
	width: 100%;
	display: block;
	color: #FFFFFF;
	text-align: center;
	font-size: 1.80vw;
	font-weight: normal;
	letter-spacing: 2px;
	padding-top: 2%;
	padding-bottom: 2%;
	margin-bottom: 0%;
    transform: translateY(0px);
    opacity: 1;
    transition: all 0s ease-in-out;
	background-color: rgba(0,0,0,0.70);
}
	
	
}

/*        建材ナビPC              */
@media (min-width: 992px) {

#topMain {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:0px;
	padding-left:0%;
	padding-right:0%;
	padding-top: 4%;
	background-color:#FFFFFF;
	min-width: 992px;
	float:none;
}
#topKen_box {
	position: relative;
	width: 100%;
	padding-top: 30px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0%;
	background-color: #FFFFFF;
	float:none;
	z-index: 0;
}


#topKen_textWarp {
	position: absolute;
	top: 100px;
	left: 0px;
	width: 100%;
	background-color: #d90000;
	z-index: -1;
}
#topKen_textMain {
	width: 92%;
	/*max-width: 1200px;*/
	min-width: 992px;
	margin-right: auto;
	margin-left: auto;
}
p#topKen {
	display: block;
	width: 25%;
	padding-top: 2%;
	padding-bottom: 2%;
	color: #FFFFFF;
	font-size: 1.1em;
	line-height: 1.6em;
}


#topKenMain {
	width: 92%;
	/*max-width: 1200px;*/
	min-width: 992px;
	margin-right: auto;
	margin-left: auto;
	z-index: 100;
}
#topKenMain:after, #topKenMain:before {
    content: "";
    clear: both;
    display: block;
}

#topKenLeft {
	width: 28%;
	float: left;
	z-index: 100;
	padding-top: 0%;
}
#topKenRight {
	width: 72%;
	float: right;
	z-index: 100;
	position: relative;
}
#topKenRight img {
	width: 100%;
	height: auto;
}
#topKenLeft h2 {
	width: 100%;
	margin-bottom: 5px;
	margin-top: 0px;
	display: block;
	font-size: 30px;
}
#topKenLeft h3 {
	width: 100%;
	margin-bottom: 200px;
	margin-top: 0px;
	display: block;
	font-size: 24px;
}

p.viewmore {
	font-size: 1.1em;
}
p.viewmore　vKen img {
	width: 10%;
	height: auto;
	margin-left: 10px;
}

#vKen {
	text-align: right;
	margin-right: 5%;
}

#topKenTabH3 {
	display: none;
}	
	
	
}



/* ******       他リンク　PC       *****  */

/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
	#topLink_box {
		display: none;
	}
	#topLink_box_Sp {
		display: block;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10%;
	}
	#topLink_box_Sp .topWebWarp_Sp a {
		display: block;
		width: 100%;
		margin-bottom: 8%;
	}
	#topLink_box_Sp .topWebWarp_Sp a .topWebImgWarp_Sp {
		width: 100%;
		height: 200px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
		position: relative;
	}
.topWebImg {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding-top: 50%;
}
	
	
	#kenzaiImg {
	background-image: url(../img_n/top/ken.jpg);
}
	#setsudenImg {
	background-image: url(../img_n/top/setsu.jpg);
}
	#takumiImg {
	background-image: url(../img_n/top/takumi.jpg);
}
	#goodlivingImg {
	background-image: url(../img_n/top/gl.jpg);
}
	#outletImg {
	background-image: url(../img_n/top/outlet.jpg);
}
	
	.topWebImgWarp_Sp h3.vh3_Sp {
		width: 100%;
		background-color: rgba(0,0,0,0.70);
		color: #FFFFFF;
		position: absolute;
		bottom: 0;
		text-align: center;
		font-size: 16px;
		line-height: 2.2em;
		margin: 0px;
	}
	
	.topWebWarp_Sp a p.vtext_Sp {
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 1%;
		color: #444444;
	}
	.topWebWarp_Sp a p.vtext_Sp2 {
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 1%;
		margin-bottom: 3%;
		color: #444444;
	}	
	
	
}


/*        建材ナビタブレット              */
@media (min-width: 768px) {	
	#topLink_box {
		display: none;
	}
	#topLink_box_Sp {
		display: block;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10%;
	}
	#topLink_box_Sp .topWebWarp_Sp#tabKen {
		display: none;
	}
	#topLink_box_Sp .topWebWarp_Sp a {
		display: block;
		width: 47%;
		margin-left: 1.5%;
		margin-right: 1.5%;
		float: left;
		margin-bottom: 3%;
	}
	#topLink_box_Sp .topWebWarp_Sp a .topWebImgWarp_Sp {
		width: 100%;
		height: 200px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
		position: relative;
	}


	#setsudenImg {
	background-image: url(../img_n/top/setsu.jpg);
}
	#takumiImg {
	background-image: url(../img_n/top/takumi.jpg);
}
	#goodlivingImg {
	background-image: url(../img_n/top/gl.jpg);
}
	#outletImg {
	background-image: url(../img_n/top/outlet.jpg);
}
	
	.topWebImgWarp_Sp h3.vh3_Sp {
		width: 100%;
		background-color: rgba(0,0,0,0.70);
		color: #FFFFFF;
		position: absolute;
		bottom: 0;
		text-align: center;
		font-size: 16px;
		line-height: 2.2em;
		margin: 0px;
	}
	
	.topWebWarp_Sp a p.vtext_Sp {
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 1%;
		color: #444444;
	}
	.topWebWarp_Sp a p.vtext_Sp2 {
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 1%;
		margin-bottom: 3%;
		color: #444444;
	}	
}

/*        建材ナビPC              */
@media (min-width: 992px) {
	#topLink_box_Sp {
		display: none;
	}
#topLink_box {
	display: block;
	position: relative;
	width: 92%;
	padding-top: 30px;
	padding-right: auto;
	padding-left: auto;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 7%;
	background-color: #FFFFFF;
	float:none;
	z-index: 0;
	min-width: 992px;
}

.topLink {
	margin-top: 0%;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 2%;
	padding: 0px;
	width: 46%;
}

.topWebWarp {
	margin-top: 0%;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 2%;
	padding: 0px;
	width: 48%;
}
#topKenRight.topWebWarp {
	width: 70%;
}


.topWebImg {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding-top: 50%;
}
#kenzaiImg {
	background-image: url(../img_n/top/ken.jpg);
	background-size: 100% auto;
	background-position: 0% top;
}
#kenzaiImg.topWebImg {
	background-size: contain;
	padding-top: 37.5%;
}
#setsudenImg {
	background-image: url(../img_n/top/setsu.jpg);
}
#takumiImg {
	background-image: url(../img_n/top/takumi.jpg);
}
#goodlivingImg {
	background-image: url(../img_n/top/gl.jpg);
}
#outletImg {
	background-image: url(../img_n/top/outlet.jpg);
}
a.topWeb_A:hover {
	width: 100%
}
a.topWeb_A {
	*zoom:1;
}

a.topWeb_A:hover .topWebImg_anime {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.topWebWarp:before, .topWebWarp:after {
	display: table;
	content: ""
}

.topWebWarp a {
	width: 100%;
	display: block;
	color: #FFFFFF;
}

.topWebImgWarp {
	position: relative;
	overflow: hidden;
}

.topWebImg_anime {
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1)
}


.topWebTextWarp {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}


.topWebTextBg {
	-webkit-transition-property: "opacity";
	transition-property: "opacity";
	-webkit-transition-duration: .6s;
	transition-duration: .6s;
	-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	width: 100%;
	height: 100%;
	position: relative;
	background-color: rgba(0,0,0,0.60);
	padding: 10px;
	opacity: 0
}


.topWebTextTR {
	width: 100%;
	height: 100%;
	position: relative;
}
.topWebTextTR:before, .topWebTextTR:after {
	display: block;
	position: absolute;
	background-color: rgba(255,255,255,0.5);
	content: ' '
}
.topWebTextTR:before {
	-webkit-transition-property: "width";
	transition-property: "width";
	-webkit-transition-duration: .75s;
	transition-duration: .75s;
	-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	top: 0px;
	left: 0px;
	width: 0%;
	height: 1px
}
.topWebTextTR:after {
	-webkit-transition-property: "height";
	transition-property: "height";
	-webkit-transition-duration: .75s;
	transition-duration: .75s;
	-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	top: 0px;
	right: 0px;
	width: 1px;
	height: 0%
}

.topWebTextUL {
	width: 100%;
	height: 100%;
	position: relative
}
.topWebTextUL:before, .topWebTextUL:after {
	display: block;
	position: absolute;
	background-color: rgba(255,255,255,0.5);
	content: ' '
}
.topWebTextUL:before {
	-webkit-transition-property: "width";
	transition-property: "width";
	-webkit-transition-duration: .75s;
	transition-duration: .75s;
	-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	bottom: 0;
	right: 0;
	width: 0%;
	height: 1px
}
.topWebTextUL:after {
	-webkit-transition-property: "height";
	transition-property: "height";
	-webkit-transition-duration: .75s;
	transition-duration: .75s;
	-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	bottom: 0;
	left: 0;
	width: 1px;
	height: 0%
}


.topWeb_A:hover .topWebTextBg {
	opacity: 1
}
.topWeb_A:hover .m-card-cover .m-card-cover__h {
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
.topWeb_A:hover .m-card-cover .m-card-cover__btn {
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
.topWeb_A:hover .topWebTextBg .topWebTextTR:before {
	width: 100%
}
.topWeb_A:hover .topWebTextBg .topWebTextTR:after {
	height: 100%
}
.topWeb_A:hover .topWebTextBg .topWebTextUL:before {
	width: 100%
}
.topWeb_A:hover .topWebTextBg .topWebTextUL:after {
	height: 100%
}

.topWebTextContent {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	opacity: 0;
    overflow: hidden;
}

.topWebTextContent h3.vh3 {
	width: 100%;
	display: block;
	text-align: center;
	font-size: 1.80vw;
	font-weight: bold;
	letter-spacing: 2px;
	padding-top: 8%;
	margin-bottom: 5%;
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.6s ease-in-out;
}

.topWebTextContent p.vtext {
	font-family: 'Noto Sans JP';
	width: 100%;
	display: block;
	font-size: 1.00vw;
	text-align: center;
	margin-bottom: 8%;
    opacity: 0;
    transition: 0.6s 0.6s linear;
	
}

.topWebTextContent .vmore {
	text-align: center;
	width: 30%;
	display: block;
	color: #CCCCCC;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1%;
	padding-bottom: 1%;
	border: 1px solid #FFFFFF;
	border-radius: 20px;
	background-color: rgba(0,0,0,0.60);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s linear;
}

#topKenRight .topWebTextContent h3.vh3 {
	width: 100%;
	text-align: center;
	font-size: 1.90vw;
	font-weight: bold;
	letter-spacing: 2px;
	padding-top: 4.5%;
	margin-bottom: 5%;
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.6s ease-in-out;
}

#topKenRight .topWebTextContent p.vtext {
	width: 100%;
	font-size: 1.10vw;
	text-align: center;
	margin-bottom: 6%;
    opacity: 0;
    transition: 0.6s 0.6s linear;
}

#topKenRight .topWebTextContent .vmore {
	text-align: center;
	width: 30%;
	color: #CCCCCC;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1%;
	padding-bottom: 1%;
	border: 1px solid #FFFFFF;
	border-radius: 20px;
	background-color: rgba(0,0,0,0.60);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s linear;
}

/*  マウスオーバー  */
.topWebTextContent:hover,
#topKenRight .topWebTextContent:hover {
    opacity: 1;
}
.topWebTextContent:hover h3.vh3,
.topWebTextContent:hover p.vtext,
.topWebTextContent:hover .vmore,
#topKenRight .topWebTextContent:hover h3.vh3,
#topKenRight .topWebTextContent:hover p.vtext,
#topKenRight .topWebTextContent:hover .vmore{
    opacity: 1;
    transform: translateY(0px);
}




.topLink.setsuden {
	background-image: url(../img_n/top/setsu.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.topLink.takumi {
	background-image: url(../img_n/top/takumi.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.topLink.gl {
	background-image: url(../img_n/top/gl.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.topLink.outlet {
	background-image: url(../img_n/top/outlet.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.topLink_textBox {
	width: 45%;
	background-color: #FFFFFF;
	padding: 3%;
	margin-top: 10%;
	margin-left: 10%;
	margin-bottom: 15%;
	float: none;
}

.topLink_textBox h3 {
	font-size: 1.4em;
	padding-bottom: 3px;
}
.topLink_textBox h3.setsuden {
	border-bottom: 1px solid #319c94;
}
.topLink_textBox h3.takumi {
	border-bottom: 1px solid #244988;
}
.topLink_textBox h3.gl {
	border-bottom: 1px solid #000000;
}
.topLink_textBox h3.outlet {
	border-bottom: 1px solid #ff7f00;
}

.vKen {
	text-align: right;
	margin-right: 5%;
}


}






/*  Our Business  */
/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
#top_ourbisi_h {
	width: 100%;
	margin-left: 0%;
	z-index: 100;	
	float: none;
}

#top_ourbisi_h h2 {
	text-align: center;
	font-size: 28px;
	margin-bottom: 20px;
	padding: 0px;
}
#top_ourbisi_h h3 {
	font-family: 'Noto Sans JP';
	text-align: center;
	font-size: 14px;
	margin-bottom: 20px;
	padding-top: 0%;
	padding-right: 4%;
	padding-left: 4%;
	padding-bottom: 0%;
	color: #666666;
	letter-spacing: 0px;
	line-height: 1.4em;
}
#topourbusi_box_Sp {
	display: block;
	position: relative;
	width: 100%;
	margin-bottom: 10%;
	background-color: #FFFFFF;
	float:none;
	z-index: 0;
}
#topourbusi_box {
	display: none;
}	
	#topourbusi_box_Sp ul {
		width: 100%;		
	}
	#topourbusi_box_Sp li a {
		width: 100%;	
		display: block;
		position: relative;
		margin-bottom: 8%;
		color: #555555;
	}
	#topourbusi_box_Sp li a img {
		width: 100%;
		height: auto;
		border-top: 1px solid #999999;
	}
	
#topourbusi_box_Sp .detailBox_Sp h4 {
	background: rgba(255,255,255,0.70);
	position: absolute;
	top: 31%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	/*height: 248px;*/
	color: #333333;
	font-size: 18px;
	font-weight: bold;
	line-height: 2.0em;
	letter-spacing: 2px;
	width: 50%;
/*	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)*/
}
 
#topourbusi_box_Sp .detailBox_Sp h4:before {
	content: '';
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.6)
}	
	
	#topourbusi_box_Sp .detailBox_Sp p {
		display: block;
		padding-top: 5px;
		padding-left: 3%;
		padding-right: 3%;
	}	
	
	
}


/*        建材ナビタブレット              */
@media (min-width: 768px) {	
#top_ourbisi_h {
	width: 100%;
	margin-left: 0%;
	z-index: 100;	
	float: none;
}

#top_ourbisi_h h2 {
	text-align: center;
	font-size: 42px;
	margin-bottom: 40px;
	padding: 0px;
}
#top_ourbisi_h h3 {
	text-align: center;
	font-size: 15px;
	margin-bottom: 40px;
	padding: 0px;
	color: #666666;
	letter-spacing: 2px;
}
#topourbusi_box_Sp {
	display: none;
}
#topourbusi_box {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10%;
	background-color: #FFFFFF;
	float:none;
	z-index: 0;
}

.top_ourbisi_box {
	position: absolute;
	top: 0px;
	width: 92%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	z-index: 100;	
	float: none;
}

.top_ourbisi {
	width: 100%;
	position: relative;
}
.top_ourbisi.harf {
	width: 49.85%;
}
.top_ourbisi img {
	width: 100%;
	height: auto;
}
#topourbusi_box #our_hp {
/*	background-image: url(../img_n/top/hp.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px -300px;*/
	margin-bottom: 0.3%;
	position: relative;
}




#topourbusi_box #our_cg {
/*	background-image: url(../img_n/top/cg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px -100px;*/
	margin-right: 0.3%
}

#topourbusi_box #our_vr {
/*	background-image: url(../img_n/top/vr.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px -100px;*/
}


.top_ourbisi_text {
	width: 30%;
	background-color: #FFFFFF;
	padding: 3%;
	margin-top: 10%;
	margin-bottom: 15%;
	float: none;
}

.top_ourbisi_text p {
	font-size: 12px;
	line-height: 1.6em;
}

#our_hp .top_ourbisi_text, #our_vr .top_ourbisi_text {
	margin-left: 60%;	
}

#our_cg .top_ourbisi_text {
	margin-left: 10%;	
}	
}

/*        建材ナビPC              */
@media (min-width: 992px) {
#top_ourbisi_h {
	width: 100%;
	margin-left: 0%;
	z-index: 100;	
	float: none;
}

#top_ourbisi_h h2 {
	text-align: center;
	font-size: 42px;
	margin-bottom: 40px;
	padding: 0px;
}
#top_ourbisi_h h3 {
	/*font-family: 'Noto Sans Japanese';*/
	font-family: 'Noto Sans JP';
	text-align: center;
	font-size: 19px;
	margin-bottom: 40px;
	padding: 0px;
	color: #666666;
	letter-spacing: 2px;
	line-height: 1.6em;
}
#topourbusi_box_Sp {
	display: none;
}
#topourbusi_box {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10%;
	background-color: #FFFFFF;
	float:none;
	z-index: 0;
}

.top_ourbisi_box {
	position: absolute;
	top: 0px;
	width: 92%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	z-index: 100;	
	float: none;
}

.top_ourbisi {
	width: 100%;
	position: relative;
}
.top_ourbisi.harf {
	width: 49.85%;
}
.top_ourbisi img {
	width: 100%;
	height: auto;
}
#topourbusi_box #our_hp {
/*	background-image: url(../img_n/top/hp.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px -300px;*/
	margin-bottom: 0.3%;
	position: relative;
}




#topourbusi_box #our_cg {
/*	background-image: url(../img_n/top/cg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px -100px;*/
	margin-right: 0.3%
}

#topourbusi_box #our_vr {
/*	background-image: url(../img_n/top/vr.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px -100px;*/
}


.top_ourbisi_text {
	width: 30%;
	background-color: #FFFFFF;
	padding: 3%;
	margin-top: 10%;
	margin-bottom: 15%;
	float: none;
}

.top_ourbisi_text p {
	font-size: 12px;
	line-height: 1.6em;
}

#our_hp .top_ourbisi_text, #our_vr .top_ourbisi_text {
	margin-left: 60%;	
}

#our_cg .top_ourbisi_text {
	margin-left: 10%;	
}	
	
}




/*        建材ナビタブレット              */
@media (min-width: 768px) {	
.OurList {
	width: 100%;
	overflow: hidden
}
.OurList li {
	position: relative
}
.OurList img {
	display: block;
	width: 100%
}
.OurList a {
	position: relative;
	display: block;
	overflow: hidden;
	-webkit-background-size: cover;
	background-size: cover
}
.OurList a:before {
	z-index: -10;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: opacity 0s ease-out, -webkit-transform 0s linear;
	transition: opacity 0s ease-out, transform 0s linear;
	opacity: 0
}
.OurList a:after {
	z-index: 2;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #fff
}
.OurList a:hover:before {
	opacity: 0
}
.OurList a:hover .mainName, .OurList a:hover .subName {
	opacity: 1
}
.OurList a:hover .detail {
	opacity: 1;
	-webkit-transition: opacity 0s linear 0s;
	transition: opacity 0s linear 0s
}
.OurList a:hover img {
	opacity:1.00;
	filter: alpha(opacity=100);
}	
	
.OurList .our_hp a:before {
	background: none;
	-webkit-background-size: cover;
	background-size: cover
}
.OurList .our_cg a:before {
	background: none;
	-webkit-background-size: cover;
	background-size: cover
}
.OurList .our_vr a:before {
	background: none;
	-webkit-background-size: cover;
	background-size: cover
}

.OurList .ourbox1 a:after {
	border-left: none;
	border-right: none
}
.OurList .ourbox1 .detail .infoBox {
	max-width: 630px
}
.OurList .ourbox1 .detail .size {
	width: 460px
}
.OurList .ourbox2l, .OurList .ourbox2r {
	position: relative;
	width: 50%;
	float: left
}
.OurList .ourbox2l .detail .infoBox, .OurList .ourbox2r .detail .infoBox {
	max-width: 530px
}
.OurList .ourbox2l .detail .size, .OurList .ourbox2r .detail .size {
	width: 360px
}
.OurList .ourbox2l a:after {
	border-left: none
}
.OurList .ourbox2r a:after {
	border-right: none
}
.OurList .room3l, .OurList .room3c, .OurList .room3r {
	position: relative;
	width: 33.3%;
	float: left
}
.OurList .room3l a:after {
	border-left: none
}
.OurList .room3r a:after {
	border-right: none
}
.OurList .mainName {
	background: rgba(255,255,255,0.70);
	position: absolute;
	top: 25%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	/*height: 248px;*/
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	line-height: 2.6em;
	letter-spacing: 1px;
/*	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)*/
}

.OurList .ourbox1 .mainName {
	width: 30%;	
} 
.OurList .ourbox2l .mainName, .OurList .ourbox2r .mainName {
	width: 40%;	
} 
.OurList .mainName:before {
	content: '';
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.6)
}


.OurList .detail {
	opacity: 1;
	position: absolute;
	left: 0;
	/*top: 0%;*/
	bottom: 0;
	right: 0;
	margin: 0;
	z-index: 3;
	color: #FFF;
	text-align: center;
	padding: 0 0px;
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: opacity 0s linear 0s;
	transition: opacity 0s linear 0s;
	background-color: rgba(0,0,0,0.50);
}
.OurList .detailBox {
	border: 0px solid #FFFFFF;
	margin-left: auto;
	margin-right: auto;
}
.OurList .ourbox1 .detailBox {
	width: 60%;
	padding-top: 2%;
	padding-right: 1%;
	padding-left: 1%;
	padding-bottom: 2%;
}
.OurList .ourbox2l .detailBox, .OurList .ourbox2r .detailBox {
	width: 90%;
	padding-top: 3%;
	padding-right: 2%;
	padding-left: 2%;
	padding-bottom: 3%;
}

.OurList .detail h4 {
	font-weight: normal;
	letter-spacing: 0.1em;
	text-indent: 0em;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	display: none;
	border-bottom: 0px solid #FFFFFF;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 1%;
}
.OurList .ourbox1 .detail h4 {
	font-size: 30px;
	margin-bottom: 3%;
}
.OurList .ourbox2l .detail h4, .OurList .ourbox2r .detail h4 {
	font-size: 26px;
	margin-bottom: 5%;
}

.OurList .detail p {
	font-weight: normal;
	letter-spacing: 0.1em;
	text-indent: 0em;
	display: block;
}

.OurList .ourbox1 .detail p {
	font-size: 12px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.OurList .ourbox2l .detail p, .OurList .ourbox2r .detail p {
	font-size: 12px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.OurList .detail table {
	display: none;
}
	
	
	

.OurList .detail .roomName {
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	margin: 0 0 6px
}
.OurList .detail .sub {
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	margin: 0 0 40px
}
.OurList .detail .txt {
	display: block;
	text-align: center;
	font-size: 18px;
	letter-spacing: 0.2em;
	text-indent: -0.2em;
	margin: 0 0 40px
}
.OurList .detail .infoBox {
	display: table;
	border: 0px solid #fff;
	max-width: 380px;
	margin: auto;
	position: relative
}
.OurList .detail .capacity {
	display: table-cell;
	width: 120px;
	font-size: 14px;
	vertical-align: middle;
	line-height: 1.2;
	padding: 20px 0;
	letter-spacing: 0.2em
}
.OurList .detail .capacity span {
	display: block;
	padding-top: 4px;
	font-size: 18px
}
.OurList .detail .size {
	display: table-cell;
	border-left: 0px solid #fff;
	vertical-align: middle;
	width: auto;
	margin-left: -0.3em;
	font-size: 18px;
	padding: 20px;
	letter-spacing: 0.2em
}
}

/*        建材ナビPC              */
@media (min-width: 992px) {
.OurList {
	width: 100%;
	overflow: hidden
}
.OurList li {
	position: relative
}
.OurList img {
	display: block;
	width: 100%
}
.OurList a {
	position: relative;
	display: block;
	overflow: hidden;
	-webkit-background-size: cover;
	background-size: cover
}
.OurList a:before {
	z-index: 2;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: opacity 0.4s ease-out, -webkit-transform 0.3s linear;
	transition: opacity 0.4s ease-out, transform 0.3s linear;
	opacity: 0
}
.OurList a:after {
	z-index: 2;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #fff
}
.OurList a:hover:before {
	opacity: 1
}
.OurList a:hover .mainName, .OurList a:hover .subName {
	opacity: 0
}
.OurList a:hover .detail {
	opacity: 1;
	-webkit-transition: opacity 0.3s linear 0.1s;
	transition: opacity 0.3s linear 0.1s
}
.OurList .our_hp a:before {
	background: url(../img_n/top/hp_on.jpg);
	-webkit-background-size: cover;
	background-size: cover
}
.OurList .our_cg a:before {
	background: url(../img_n/top/cg_on.jpg);
	-webkit-background-size: cover;
	background-size: cover
}
.OurList .our_vr a:before {
	background: url(../img_n/top/vr_on.jpg);
	-webkit-background-size: cover;
	background-size: cover
}

.OurList .ourbox1 a:after {
	border-left: none;
	border-right: none
}
.OurList .ourbox1 .detail .infoBox {
	max-width: 630px
}
.OurList .ourbox1 .detail .size {
	width: 460px
}
.OurList .ourbox2l, .OurList .ourbox2r {
	position: relative;
	width: 50%;
	float: left
}
.OurList .ourbox2l .detail .infoBox, .OurList .ourbox2r .detail .infoBox {
	max-width: 530px
}
.OurList .ourbox2l .detail .size, .OurList .ourbox2r .detail .size {
	width: 360px
}
.OurList .ourbox2l a:after {
	border-left: none
}
.OurList .ourbox2r a:after {
	border-right: none
}
.OurList .room3l, .OurList .room3c, .OurList .room3r {
	position: relative;
	width: 33.3%;
	float: left
}
.OurList .room3l a:after {
	border-left: none
}
.OurList .room3r a:after {
	border-right: none
}
.OurList .mainName {
	background: rgba(255,255,255,0.70);
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	/*height: 248px;*/
	color: #333333;
	font-size: 26px;
	font-weight: bold;
	line-height: 3.0em;
	letter-spacing: 2px;
/*	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)*/
}

.OurList .ourbox1 .mainName {
	width: 30%;	
} 
.OurList .ourbox2l .mainName, .OurList .ourbox2r .mainName {
	width: 40%;	
} 
.OurList .mainName:before {
	content: '';
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.6)
}
/*.OurList .mainName .ttlinr {
	display: block;
	position: absolute;
	z-index: 2;
	width: 1.5em;
	top: 50%;
	left: 50%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
.OurList .mainName .name {
	position: relative;
	z-index: 2;
	display: block;
	width: 1.5em;
	margin-top: 7px;
	color: #1c1c1c
}
.OurList .subName {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7%;
	color: #FFF;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	font-weight: normal
}
.OurList .mainName, .OurList .subName {
	opacity: 1;
	-webkit-transition: opacity 0.3s linear 0.1s;
	transition: opacity 0.3s linear 0.1s
}*/

.OurList .detail {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: inherit;
	margin: 0;
	z-index: 3;
	color: #FFF;
	text-align: center;
	padding: 0 20px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: opacity 0.3s linear 0.1s;
	transition: opacity 0.3s linear 0.1s;
	background-color: rgba(0,0,0,0.0);
}
	
.OurList .ourbox1 .detail {
	top: 45%;
}	
.OurList .ourbox2l .detail, .OurList .ourbox2r .detail {
	top: 50%;
}		
	
.OurList .detailBox {
	border: 0px solid #FFFFFF;
	margin-left: auto;
	margin-right: auto;
}
.OurList .ourbox1 .detailBox {
	width: 50%;
	padding-top: 2%;
	padding-right: 1%;
	padding-left: 1%;
	padding-bottom: 2%;
}
.OurList .ourbox2l .detailBox, .OurList .ourbox2r .detailBox {
	width: 80%;
	padding-top: 3%;
	padding-right: 2%;
	padding-left: 2%;
	padding-bottom: 3%;
}

.OurList .detail h4 {
	font-weight: normal;
	letter-spacing: 0.1em;
	text-indent: 0em;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	display: inline-block;
	border-bottom: 0px solid #FFFFFF;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 1%;
}
.OurList .ourbox1 .detail h4 {
	font-size: 34px;
	margin-bottom: 3%;
}
.OurList .ourbox2l .detail h4, .OurList .ourbox2r .detail h4 {
	font-size: 30px;
	margin-bottom: 5%;
}

.OurList .detail p {
	font-weight: normal;
	letter-spacing: 0.1em;
	text-indent: 0em;
	display: block;
}

.OurList .ourbox1 .detail p {
	font-family: 'Noto Sans JP';
	font-size: 16px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5%;
	letter-spacing: 2px;
}
.OurList .ourbox2l .detail p, .OurList .ourbox2r .detail p {
	font-family: 'Noto Sans JP';
	font-size: 15px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10%;
	letter-spacing: 1px;
}

.OurList .detail table {
	display: table;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #F4F4F4;
	border-left: 1px solid #F4F4F4;
	font-size: 16px;
}
.OurList .detail table th, .OurList .detail table td {
	border-bottom: 1px solid #F4F4F4;
	border-right: 1px solid #F4F4F4;
}	
.OurList .detail table th {
	text-align: center;
	font-weight: normal;
	width: 20%;
	padding: 5%;
}	
.OurList .detail table td {
	text-align: left;
	font-size: 14px;
	padding: 5%;
	width: 100%;
	line-height: 1.6em;
	letter-spacing: 2px;
}
.OurList .detail .roomName {
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	margin: 0 0 6px
}
.OurList .detail .sub {
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	margin: 0 0 40px
}
.OurList .detail .txt {
	display: block;
	text-align: center;
	font-size: 18px;
	letter-spacing: 0.2em;
	text-indent: -0.2em;
	margin: 0 0 40px
}
.OurList .detail .infoBox {
	display: table;
	border: 1px solid #fff;
	max-width: 380px;
	margin: auto;
	position: relative
}
.OurList .detail .capacity {
	display: table-cell;
	width: 120px;
	font-size: 14px;
	vertical-align: middle;
	line-height: 1.2;
	padding: 20px 0;
	letter-spacing: 0.2em
}
.OurList .detail .capacity span {
	display: block;
	padding-top: 4px;
	font-size: 18px
}
.OurList .detail .size {
	display: table-cell;
	border-left: 1px solid #fff;
	vertical-align: middle;
	width: auto;
	margin-left: -0.3em;
	font-size: 18px;
	padding: 20px;
	letter-spacing: 0.2em
}

}




/*   チーム   */

/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
#topteam_box {
	width: 92%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 13%;
	z-index: 100;
	float: none;
}

.topteam_text {
	float: none !important;
	padding-top: 3%;
}

.topteam_img {
	float: none !important;
		width: 100%;
}
	.topteam_img img {
		width: 90%;
		height: auto;
	margin-left: 0%;
	}
.topteam_text h3 {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 30px;
	padding: 0px;
	text-align: center;
}

.topteam_text h4 {
	font-size: 14px;
	letter-spacing: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
	padding: 0px;
	text-align: left;
	color: #666666;
}

.topteam_text p {
	display: none;
}
.topteam_img p.topteam_p_Sp {
	display: block;
	width: 94%;
	line-height: 1.4em;
	font-size: 14px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10%;
	margin-bottom: 25px;
}
	
	
}

/*        建材ナビタブレット              */
@media (min-width: 768px) {	
#topteam_box {
	width: 92%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 13%;
	z-index: 100;
	float: none;
}

.topteam_text {
	float: right !important;
	padding-top: 3%;
	width: 52%;
}

.topteam_img {
	float: left !important;
	width: 48%;
	padding-top: 8%;
}
	.topteam_img img {
		width: 80%;
		height: auto;
	}
.topteam_text h3 {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 30px;
	padding: 0px;
	text-align: center;
}

.topteam_text h4 {
	font-size: 16px;
	letter-spacing: 2px;
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
	padding: 0px;
	text-align: left;
	color: #666666;
}

.topteam_text p {
	display: inline-block;
	line-height: 1.6em;
	font-size: 14px;
}
	
	.topteam_img p.topteam_p_Sp {
		display: none;
	}	
}

/*        建材ナビPC              */
@media (min-width: 992px) {
#topteam_box {
	width: 92%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 13%;
	z-index: 100;
	float: none;
}

.topteam_text {
	float: right !important;
	padding-top: 3%;
	width: 52%;
}

.topteam_img {
	float: left !important;
	width: 46%;
}
	.topteam_img img {
		width: 80%;
		height: auto;
	}
.topteam_text h3 {
	font-weight: bold;
	font-size: 28px;
	margin-bottom: 40px;
	padding: 0px;
	text-align: center;
}

.topteam_text h4 {
	font-size: 18px;
	letter-spacing: 2px;
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 40px;
	padding: 0px;
	text-align: center;
	color: #666666;
}

.topteam_text p {
	display: inline-block;
	line-height: 2.2em;
	font-size: 14px;
}
	
	.topteam_img p.topteam_p_Sp {
		display: none;
	}	
	
}




/*   MAP   */

/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
#topmap_box {
	width: 100%;
	margin: 0px;
	padding: 0px;
	float: none;
}
#topmap_box iframe {
	width: 100%;
	margin: 0px;
	padding: 0px;	
	vertical-align: bottom;/* 下の隙間を削除 */
}
}

/*        建材ナビタブレット              */
@media (min-width: 768px) {	
#topmap_box {
	width: 100%;
	margin: 0px;
	padding: 0px;
	float: none;
}
#topmap_box iframe {
	width: 100%;
	margin: 0px;
	padding: 0px;	
	vertical-align: bottom;/* 下の隙間を削除 */
}
}

/*        建材ナビPC              */
@media (min-width: 992px) {
#topmap_box {
	width: 100%;
	margin: 0px;
	padding: 0px;
	float: none;
}
#topmap_box iframe {
	width: 100%;
	margin: 0px;
	padding: 0px;	
	vertical-align: bottom;/* 下の隙間を削除 */
}
}





/*   コンタクト   */

/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
#topcontact_box {
	width: 100%;
	background-image: url(../img_n/top/contact.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	float: none;
	background-position: 0% 28%;
	height: 200px;
	overflow: hidden;
}
#topcontact_bl {
    background-color: rgba(0,0,0,0.6);
	height: 300px;
}

#topcontact_textBox {
	display: block;
	width: 92%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 25px;	
}

#topcontact_textBox h3 {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	/*font-size: 22px;
	line-height: 1.6em;
	color: #FFFFFF;*/
	margin-bottom: 15px;
}
#topcontact_textBox h3 img {
	width: 100%;
	height: auto;
}
#topcontact_textBox p a {
	width: 50%;
	display: block;
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
	letter-spacing: 2px;
	margin-left: auto;
	margin-right: auto;
	/*padding-top: 2%;
	padding-bottom: 2%;
	border: 2px solid #FFFFFF;
	border-radius: 10px;*/
}
#topcontact_textBox p a img {
	width: 100%;
	height: auto;
}
}

/*        建材ナビタブレット              */
@media (min-width: 768px) {	
#topcontact_box {
	width: 100%;
	background-image: url(../img_n/top/contact.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	float: none;
	background-position: 0% 28%;
	height: 300px;
	overflow: hidden;
}
#topcontact_bl {
    background-color: rgba(0,0,0,0.6);
	height: 300px;
}

#topcontact_textBox {
	display: block;
	width: 92%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 70px;
	padding-bottom: 25px;	
}

#topcontact_textBox h3 {
	width: 45%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	/*font-size: 22px;
	line-height: 1.6em;
	color: #FFFFFF;*/
	margin-bottom: 15px;
}
#topcontact_textBox h3 img {
	width: 100%;
	height: auto;
}
#topcontact_textBox p a {
	width: 20%;
	display: block;
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
	letter-spacing: 2px;
	margin-left: auto;
	margin-right: auto;
	/*padding-top: 2%;
	padding-bottom: 2%;
	border: 2px solid #FFFFFF;
	border-radius: 10px;*/
}
#topcontact_textBox p a img {
	width: 100%;
	height: auto;
}
}

/*        建材ナビPC              */
@media (min-width: 992px) {
#topcontact_box {
	width: 100%;
	background-image: url(../img_n/top/contact.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	float: none;
	background-position: 0% 28%;
	height: 300px;
	overflow: hidden;
}
#topcontact_bl {
    background-color: rgba(0,0,0,0.6);
	height: 300px;
}

#topcontact_textBox {
	display: block;
	width: 92%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 25px;	
}

#topcontact_textBox h3 {
	width: 45%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	/*font-size: 22px;
	line-height: 1.6em;
	color: #FFFFFF;*/
	margin-bottom: 15px;
}
#topcontact_textBox h3 img {
	width: 100%;
	height: auto;
}
#topcontact_textBox p a {
	width: 20%;
	display: block;
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
	letter-spacing: 2px;
	margin-left: auto;
	margin-right: auto;
	/*padding-top: 2%;
	padding-bottom: 2%;
	border: 2px solid #FFFFFF;
	border-radius: 10px;*/
}
#topcontact_textBox p a img {
	width: 100%;
	height: auto;
}
}








/*   LIST   */
/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
#toplist_box {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 6%;
	padding-bottom: 15px;
	z-index: 100;
	float: none;
	background-color: #2a3338;
}

#toplist_box ul {
	width: 92%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 35px;
	float: none;
}

#toplist_box ul li a {
	width: 44%;
	margin-left: 3%;
	margin-right: 3%;
	float: left;
	margin-bottom: 15px;
}
#toplist_box ul li a span {
	color: #FFFFFF;
	font-size: 12px;
}
	
	#toplist_box ul li a img {
		width: 100%;
		height: auto;
	}	
	
}

/*        建材ナビタブレット              */
@media (min-width: 768px) {	
#toplist_box {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 5% !important;
	padding-bottom: 15px;
	z-index: 100;
	float: none;
	background-color: #2a3338;
}

#toplist_box ul {
	width: 92%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1%;
	padding-bottom: 25px;
	float: none;
}

#toplist_box ul li {
	display: block;
	width: 16%;
	margin-left: 2%;
	margin-right: 2%;
	float: left;
}
#toplist_box ul li a span {
	color: #FFFFFF;
	font-size: 12px;
	line-height: 1.0em;
}
	#toplist_box ul li a img {
		width: 100%;
		height: auto;
	}	
}

/*        建材ナビPC              */
@media (min-width: 992px) {
#toplist_box {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 4%;
	padding-bottom: 15px;
	z-index: 100;
	float: none;
	background-color: #2a3338;
}

#toplist_box ul {
	width: 92%;
	display: block;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 35px;
	float: none;
}

#toplist_box ul li {
	width: 16%;
	margin-left: 2%;
	margin-right: 2%;
	float: left;
}
#toplist_box ul li a span {
	color: #FFFFFF;
	font-size: 12px;
}
	#toplist_box ul li a img {
		width: 100%;
		height: auto;
	}	
}



/*        建材ナビ　スマホ             */
@media (max-width: 767px) {
#top_footerBox {
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	border-top: 1px solid #777777;
	
}

#top_f_logo {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	float: none;
}
#top_f_logo img {
	width: 100%;
	height: auto;
}

#top_f_menu {
	width: 90%;
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	text-align: left;
}
#top_f_menu span a {
	display: inline-block;
	margin-left: 20px;
	margin-bottom: 5px;
	color: #FFFFFF;
}

#top_footerC {
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #FFFFFF;
}
}

/*        建材ナビタブレット              */
@media (min-width: 768px) {	
#top_footerBox {
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	border-top: 1px solid #777777;
	
}

#top_f_logo {
	width: 10%;
	float: left;
}
#top_f_logo img {
	width: 100%;
	height: auto;
}

#top_f_menu {
	width: 83%;
	float: right;
	text-align: right;
}
#top_f_menu span a {
	display: inline-block;
	margin-left: 20px;
	color: #FFFFFF;
}

#top_footerC {
	width: 100%;
	text-align: right;
	font-size: 12px;
	color: #FFFFFF;
}
}

/*        建材ナビPC              */
@media (min-width: 992px) {
#top_footerBox {
	width: 92%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	border-top: 1px solid #777777;
	
}

#top_f_logo {
	width: 10%;
	float: left;
}
#top_f_logo img {
	width: 100%;
	height: auto;
}

#top_f_menu {
	width: 83%;
	float: right;
	text-align: right;
}
#top_f_menu span a {
	display: inline-block;
	margin-left: 20px;
	color: #FFFFFF;
}

#top_footerC {
	width: 100%;
	text-align: right;
	font-size: 12px;
	color: #FFFFFF;
}
}









/*   INVIEW  */
/*.list_in {
	overflow:hidden;
}
.list_in div {
	transition:.8s;
}

.list-move_in {
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.move_in {
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}*/


.list-move_in {
/*margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #ff0000;*/
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 /*0% { opacity: 0; -webkit-transform: translateY(-20px); }*/
 0% { opacity: 0; -webkit-transform: translateY(0px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 /*0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }*/
 0% { opacity: 0; -webkit-transform: translateY(0px); -ms-transform: translateY(-20px); transform: translateY(0px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}