@charset "utf-8";
/* ===================================================================
CSS information

 file name  :style.css
 style info :L-CLASS トップCSS
=================================================================== */

#sectionContents .mod_billboard {
	position: relative;
	width: 1200px;
	height: 318px;
	z-index:1;
}

#sectionContents .title_area {
	position: absolute;
	top: 78px;
	left: 429px;
	z-index:100;
}
#sectionContents .title_area h1 {
	margin: 0;
}

.mod_billboard_block{
	padding-bottom: 40px;
	background: #000;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
#sectionContents .mod_billboard {
	position: relative;
	width: 100vw;
	height: 68vw;
	z-index:1;
	background-size: contain;
}

#sectionContents .title_area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index:100;
	width: 60vw
}


.mod_billboard_block{
	padding-bottom: 30px;
	background: #000;
}
}

/* switch ----------------------- */
.pcOnly { display: block; }
.spOnly { display: none; }

@media only screen and (max-width:640px) and (max-device-width:1280px){
	
/* ---------------------------------------------------------
                  	common
------------------------------------------------------------ */
/* switch ----------------------- */
.pcOnly { display: none; }
.spOnly { display: block; }
}
/* ex_clearfix
-----------------------------------------*/ 
.ex_clearfix:after {
  content: "";
  clear: both;
  display: block;
}
/* ex_clearfix
-----------------------------------------*/ 
#sectionContents .ex_marginB0{
 margin-bottom:0px!important;
}
#sectionContents .ex_marginBS{
 margin-bottom:10px!important;
}
#sectionContents .ex_marginBM{
 margin-bottom:20px!important;
}
#sectionContents .ex_marginT0{
 margin-top:0px!important;
}
#sectionContents .ex_marginTSS{
 margin-top:5px!important;
}
#sectionContents .ex_marginTS{
 margin-top:10px!important;
}
#sectionContents .ex_marginTM{
 margin-top:20px!important;
}
#sectionContents .ex_marginTL{
 margin-top:30px!important;
}
#sectionContents .ex_marginTLL{
 margin-top:50px!important;
}


.mod_section a {
	text-decoration:none;
	}

.lead{
	font-family: "游明朝", "YuMincho", Hiragino Mincho ProN, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 60px auto;
	text-align: center;
	line-height: 2.2;
	letter-spacing: 0.1em;
	font-weight: 500;
	font-size: 1.18em;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
.lead{
	font-size:3.8vw;
	letter-spacing: 0em;
}
}

h2{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	text-align: center;
	line-height: 2.2;
	font-size: 1.5em;
	background: -moz-linear-gradient(left, #000000, #9f9b9a);
	background: -webkit-linear-gradient(left, #000000, #9f9b9a);
	background: linear-gradient(to right, #000000, #9f9b9a);
	color: #FFF;
	letter-spacing: 0.1em;
	font-weight: 500;
	padding: 10px 0 6px;
	width: 966px;
}

h2 span{
	margin-left: 10px;
	font-size:0.88em;
	vertical-align: 3%;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
h2{
	font-size:5.6vw;
	width: auto;
	line-height: 1.4;
	letter-spacing: 0em;
	padding: 14px 0;
}

h2 span{
	vertical-align: 0%;
	margin-left: 0px;
	display: block;
	letter-spacing: 0em;
	font-size:4.8vw;
}
}

/* .menu_block
-----------------------------------------*/ 	
.menu_block{
	background: #000;
	color: #FFF;
	padding: 20px 0;
	text-align: center
	}
	
.menu_block a {
	text-decoration:none;
	color: #FFF;
	font-family: "游明朝", "YuMincho", Hiragino Mincho ProN, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.25em;
	}

.menu_block ul {
	margin: 0 auto !important;
	text-align: center
	}

.menu_block ul li {
	display: inline-block;
	border-right: 1px solid #FFF;
	padding: 0 20px;
	}

.menu_block ul li:last-child  {
	border-right: none;
	}

.menu_block ul li a{
	transition: 1.0s ;
}

.menu_block ul li a:hover{
	opacity: 0.7 ;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
.menu_block ul li {
	font-size: 2.4vw;
	padding: 0 2vw;
	}
}

/* .kitchen_block .kitchen_block
-----------------------------------------*/ 
.kitchen_block,
.bathroom_block{
	background: #000;
	width: 966px;
}

.kitchen_block{
	margin-bottom: 1px;
}

.bathroom_block{
	margin-bottom: 4em;
}

.kitchen_movie{
	float: right;
	width: 540px;
}

.bathroom_movie{
	float: left;
	width: 540px;
}

.kitchen_movie img,
.bathroom_movie img{
	width: 540px;
}

.kitchen_movie a,
.bathroom_movie a{
	transition: 1.0s ;
}

.kitchen_movie a:hover,
.bathroom_movie a:hover{
	opacity: 0.7 ;
}

.kitchen_text{
	text-align: center;
	color: #FFF;
	width: 426px;
	padding: 50px 0 0 0;
	float: left;
}

.bathroom_text{
	text-align: center;
	color: #FFF;
	width: 426px;
	padding: 50px 0 0 0;
	float: right;
}

.kitchen_text h3,
.bathroom_text h3{
	width: 224px;
	height: 94px;
	background: url(../img/bg_h3.png) no-repeat;
	margin: 0 auto 1em;!important;
	font-family: "游明朝", "YuMincho", Hiragino Mincho ProN, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.6;
	font-size: 1.625em;
	letter-spacing: 0.1em;
	padding: 16px 0 0 0;
	box-sizing: border-box;
}

.kitchen_text h3 span,
.bathroom_text h3 span{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	font-size: 0.56em;
	display: block;
}

.kitchen_text p,
.bathroom_text p{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	color: #FFF;
	font-size: 1em;
	padding: 20px 0;
	margin: 0 auto;
}

.kitchen_text .btn,
.bathroom_text .btn {
	width: 224px;
	box-sizing: border-box;
	border: #aaaaaa 1px solid;
	margin: 0 auto;
	}
.kitchen_text .btn a,
.bathroom_text .btn a {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	background-color: #000;
	color: #FFF;
	vertical-align: middle;
	text-align: center;
	padding: 4px 0px 6px 0;
	display: block;
	transition: 1.0s ;
	}

.kitchen_text .btn a:hover,
.bathroom_text .btn a:hover{
	opacity: 0.7 ;
}
	
.kitchen_text a:before,
.bathroom_text a:before{
	color:#FFF;
	content: " \f105";
	font-family: FontAwesome;
	font-size:120%;
	margin: 0 10px 0 0;
	}
	
@media only screen and (max-width:640px) and (max-device-width:1280px){
.kitchen_block,
.bathroom_block{
	width: auto;
}

.kitchen_movie,
.bathroom_movie{
	float: none;
	width: auto;
}

.kitchen_movie img,
.bathroom_movie img{
	width: auto;
}

.kitchen_text,
.bathroom_text{
	float: none;
	width: auto;
	padding: 30px 0;
}

.kitchen_text h3,
.bathroom_text h3{
	font-size: 6.6vw;
	padding: 3.6vw 0 0 1vw;
}

.kitchen_text h3 span,
.bathroom_text h3 span{
	font-size: 3.4vw;
	letter-spacing: 0.05em;
}

.kitchen_text .btn a,
.bathroom_text .btn a {
	padding: 10px 0px 12px 0;
	}
}

/* l-btn
-----------------------------------------*/ 
ul.l-btn{
	margin-bottom: 4em;
}

ul.l-btn li{
	width: 322px;
	position: relative;
	float: left;
}

ul.l-btn li a{
	transition: 1.0s ;
}

ul.l-btn li a:hover{
	opacity: 0.7 ;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
ul.l-btn li{
	width: auto;
	position: relative;
	float: none;
	margin-bottom: 1px;
}
}

ul.l-btn li .products{
	width: 224px;
	height: 58px;
	background: url(../img/bg_h3_small.png) no-repeat;
	margin: 0 auto 1em;!important;
	font-family: "游明朝", "YuMincho", Hiragino Mincho ProN, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.2;
	font-size: 1.625em;
	letter-spacing: 0.1em;
	padding: 8px 0 0 0;
	box-sizing: border-box;
	position: absolute;
	bottom: 0px;
	left: 49px;
	text-align: center;
}

ul.l-btn li a {
	color: #FFF!important;
	}

ul.l-btn li .products p{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	font-size: 0.56em;
	display: block;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
ul.l-btn li .products{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

ul.l-btn li .products h3{
	line-height: 1.2;
	font-size: 5vw;
	padding: 0 0 0 1vw!important;
	margin: 0!important;
}

ul.l-btn li .products p{
	font-size: 3vw;
	line-height: 1.2;
	padding: 0 0 0 1vw!important;
	margin: 0!important;
}

}

/* c-btn
-----------------------------------------*/ 
ul.c-btn{
	margin-bottom: 4em;
}

ul.c-btn li{
	width: 322px;
	position: relative;
	float: left;
}

ul.c-btn li a{
	transition: 1.0s ;
}

ul.c-btn li a:hover{
	opacity: 0.7 ;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
ul.c-btn li{
	width: auto;
	position: relative;
	float: none;
	margin-bottom: 1px;
}
}

ul.c-btn li .products{
	width: 224px;
	height: 58px;
	background: url(../img/bg_h3_small.png) no-repeat;
	margin: 0 auto 1em;!important;
	font-family: "游明朝", "YuMincho", Hiragino Mincho ProN, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.2;
	font-size: 1.625em;
	letter-spacing: 0.1em;
	padding: 8px 0 0 0;
	box-sizing: border-box;
	position: absolute;
	bottom: 0px;
	left: 49px;
	text-align: center;
}

ul.c-btn li .products p{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	font-size: 0.56em;
	display: block;
}

ul.c-btn li .products p:after{
	color:#FFF;
	content: " \f105";
	font-family: FontAwesome;
	font-size:108%;
	margin: 0 0 0 4px;
	letter-spacing: 0.1em;
}

ul.c-btn li a {
	color: #FFF!important;
	}
	
@media only screen and (max-width:640px) and (max-device-width:1280px){
ul.c-btn li .products{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

ul.c-btn li .products h3{
	line-height: 1.2;
	font-size: 5vw;
	padding: 0 0 0 1vw!important;
	margin: 0!important;
}

ul.c-btn li .products p{
	font-size: 3vw;
	line-height: 1.2;
	padding: 0 0 0 1vw!important;
	margin: 0!important;
}

}

.bnr_block{
	background: #000;
	padding: 30px 0;
	margin-bottom: 4em;
}
.bnr_block a{
	transition: 1.0s ;
}

.bnr_block a:hover{
	opacity: 0.7 ;
}

/*200130_Add*/
.bnr_block02{
	margin-bottom: 4em;
}
.bnr_block02 a{
	transition: 1.0s ;
}

.bnr_block02 a:hover{
	opacity: 0.7 ;
}

/*200227_Add*/
.move_area .ttl_sec_type01 {
  background: none;
  margin-bottom: .8em;
  padding: 0;
  line-height: 1.5;
  font-size: 25px;
  font-weight: bold;
  color: #222;
}
.move_area .move_box{
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
.move_area .move_box iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .move_area .ttl_sec_type01 {
    font-size: 6vw;
  }
}