@CHARSET "UTF-8";
/*******************************************************************************
 * マツミハウジング
 * WEB SITE ver.2017
 * RESPONSIVE
 * PC width min-width:768px
 * SP max-width: 767px(iPhone6+ ヨコイチまで)
*******************************************************************************/
@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Roboto:900');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap&subset=japanese');

/*******************************************************************************
 * COMMON
*******************************************************************************/
* {
	box-sizing: border-box;
}
html,body {
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

ul {list-style: none;}
a {text-decoration: none;}
img {vertical-align: middle; image-rendering: -webkit-optimize-contrast;}
em{font-style:normal;}

/** PC ************************************************************************/
@media screen and (min-width:768px),print{
	* {font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Verdana,Geneva,Arial,Helvetica;}
}
/** SMART PHONE ***************************************************************/
@media screen and (max-width : 761px ){
	* {font-family: sans-serif;}
}

/*******************************************************************************

 * HEADER
 
*******************************************************************************/
/**住み心地感想NEW*************************************************************/
nav#headMenu>ul>li>ul>li>a>span {
	margin-left:10px;
	color:#bd002d;
}
nav#headMenu>ul>li>ul>li>a>span.tokyo-23 {display:inline-block;}
nav#headMenu>ul>li>ul>li>a>span.tokyo-tama {display:inline-block;}
nav#headMenu>ul>li>ul>li>a>span.kanagawa {display:none;}
nav#headMenu>ul>li>ul>li>a>span.saitama-others { display:inline-block;}

/** PC ************************************************************************/
@media screen and (min-width:768px),print{
	body>header {
		width: 100%;
		background: #FFF;
		position: fixed;
		z-index: 999;
		padding-top:64px;
		border-bottom:#DCDCDC solid 1px;
	}
	body>header>div.innerBox {
		width: 960px;
		margin:auto;
	}
	body>header>div.innerBox>div {
		width: 960px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/*********/
	body>header #logo {
		display: flex;
		align-items: center;
	}
	body>header #logo>a:nth-child(1) >img { width:128px; height:auto; margin-right:15px;}	
	body>header #logo>a:nth-child(2)>img:nth-child(1) { width:120px; height:auto; margin-right:8px;}	
	body>header #logo>a:nth-child(2)>img:nth-child(2){ width:280px; height:auto;}	
	
	/** BASIC MENU ****************************************************************/
	#basicMenu {
		text-align:right;
	}
	#basicMenu>div{
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-align-items: center;/* Safari etc. */
		-ms-align-items: center;/* IE10*/
		align-items: center;
	}
	#basicMenu>div>p#phones {
		display:block;
		font-size: 11px;
		text-align: center;
		line-height: 1.2;
		margin-right:10px;
		text-align:left;
	}
	#basicMenu>div>p#phones>b.freedial {
		color: #0b308e;
		font-size: 23px;
		padding-left: 36px;
		background: url(img/icon_freedial_blue.png) no-repeat left 6px;
	}
	#basicMenu>div>#snsPc {
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-align-items: center;/* Safari etc. */
		-ms-align-items: center;/* IE10*/
		align-items: center;
	}
	#basicMenu>div>#snsPc>li {
		margin-left:12px;
	}
	#basicMenu>div>#snsPc img {
		width:26px;
	}
	
	/** GLOBAL MENU ***********************************************************/
	#headMenubtn{/**スマホメニューボタン**/
		display:none;
	}
	#headMenu {
		margin-top:10px;
	}
	#headMenu>ul {
		box-sizing: border-box;
		display: flex;
		font-size: 14px;
		border-left: 1px solid #DCDCDC;
		line-height: 1.2;
		width: 960px;
		font-weight:bold;
	}
	#headMenu>ul>li {
		box-sizing: border-box;
		width:110px;
		border-right: 1px solid #DCDCDC;
		display: table;
		position: relative;
	}
	#headMenu>ul>li:first-child {
		width: 55px;
	}
	#headMenu>ul>li:nth-child(6) {/**外断熱涼温リフォーム**/
		width: 136px;
	}
    #headMenu>ul>li span.blue {/**外断熱涼温リフォーム 涼**/
        color: #0db7d6;
	}
    #headMenu>ul>li span.orange {/**外断熱涼温リフォーム 温**/
        color: #ec6d34;
	}
	#headMenu>ul>li>*:not(ul) {
		color: #333;
		text-align:center;
		vertical-align: middle;
		line-height: 1.2;
		width: 100%;
		height: 60px;
		border-bottom: 5px solid #FFF;
		display: table-cell;
		background: repeat-x left top;
		cursor: pointer;
	}
	#headMenu>ul>li>*:hover:not(ul){
		color: #eb6454;
		border-bottom: 5px solid #eb6454;
	}
	#headMenu>ul>li>ul {
		width: 300px;
		background: #FFF;
		display: none;
		position: absolute;
		top: 60px;
		left: 0;
		z-index: 1;
	}
	#headMenu>ul>li:nth-child(n+8)>ul {
		position: absolute;
		left: -190px;
	}
	#headMenu>ul>li>ul>li {
		width: 100%;
		border: 1px solid #b3b3b3;
	}
	#headMenu>ul>li>ul>li>a {
		display:block;
	}
	#headMenu>ul>li>ul>li:not(:last-child) {
		border-bottom: none;
	}
	#headMenu>ul>li>ul>li>* {
		color: #4d4d4d;
		padding: 15px 15px 15px 20px;
		display: table-cell;
	}
	#headMenu>#snsSp{
		display:none;
	}
}
/** SMART PHONE ***************************************************************/
@media screen and (max-width : 761px ){
	body>header {
		width: 100%;
		background: #FFF;
		position: fixed;
		z-index: 999;
		height:50px;
	}
	body>header>div.innerBox {
		width: 100%;
		position:relative;
	}
	body>header #logo {
		padding:12px 0 0 20px;
		text-align:left;
	}
	body>header #logo>a>img{
		margin-top:3px;
		width: 190px;
	}
	body>header #logo>a:first-child,
	body>header #logo>a:nth-child(2)>img:nth-child(1) {
		display: none;
	}
	
	/** BASIC MENU ************************************************************/
	#basicMenu {
		display:none;
	}

	/** GLOBAL MENU ***********************************************************/
	/**スマホメニューボタン**/
	#headMenubtn{
		position:absolute;
		top:0;
		right:0;
		font-weight:normal;
		width:50px;
	}
	.menu_o {
		padding-top:34px;
		text-align:center;
		background: url(img/bars_b.png) no-repeat center 10px;
		font-size: 8px;
		color:#333; 
		display:block;
		height:50px;
	}
	.menu_c {
		padding-top:34px;
		text-align:center;
		background: url(img/close_b.png) no-repeat center 10px;
		font-size: 8px;
		color:#333; 
		display:block;
		height:50px;
	}
	/*****/
	#headMenu {
		position: absolute;
		top:50px;
		width: 100%;
		background: #FFF;
		overflow-y: scroll;
		display: none;
		height: calc(100vh);
		overflow: auto;
	}
	#headMenu>ul:not(#snsSp){
		border-bottom: 1px solid #aaa;
	}
	#headMenu ul:not(#snsSp) li>*:not(ul) {
		color: #333;
		font-size: 18px;
		vertical-align: middle;
		min-height: 40px;
		padding: 20px 10px 20px 30px;
		border-top: 1px solid #aaa;
		display: block;
	}
	#headMenu>ul>li>b {
		font-weight: normal;
		background: url(img/plus.png) no-repeat 15px center;
		background-size: 10px;
	}
	#headMenu>ul>li>ul {
		background: #faf6f2;
		display: none;
		line-height:1.3;
	}
	#headMenu>ul>li>*>br {display: none;}
    #headMenu>ul>li span.blue {/**外断熱涼温リフォーム 涼**/
        color: #0db7d6;
	}
    #headMenu>ul>li span.orange {/**外断熱涼温リフォーム 温**/
        color: #ec6d34;
	}

	/** #snsSp **/
	#headMenu>#snsSp {
		display: -webkit-flex; /* Safari etc. */
		display: -ms-flexbox; /* IE10*/
		display: flex;
		-webkit-justify-content: center;/* Safari etc. */
		-ms-justify-content: center;/* IE10*/
		justify-content: center;
		-webkit-align-items: center;/* Safari etc. */
		-ms-align-items: center;/* IE10*/
		align-items: center;
		margin-bottom:40px;
		padding-bottom:100px;
	}
	#headMenu>#snsSp>li {
		margin:10px;
	}
	#headMenu>#snsSp img {
		width:30px;
	}
}

/*******************************************************************************

 * ぱんくずリスト
 
*******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	body>article>.breadcrumb{
		width: 960px;
		margin:8px auto;
		padding-left:4px;
	}
	.breadcrumb>li{
		display: inline-block;
		padding: 0;
		font-size: 13px;
		position: relative;
	}
	.breadcrumb>li:first-child{
		padding-left: 0;
	}
	.breadcrumb>li>a>span{
		color: #0b308e;
	}
	.breadcrumb>li>a:hover>span{
		color: #3769cc;
	}
	.breadcrumb li:after{
		content: '＞';
		padding-left:5px;
	}
	.breadcrumb li:last-child:after{
		content: none;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width : 761px ){
	body>article>.breadcrumb{
		width: 100%;
		margin:8px auto;
		padding:0 10px;
	}
	.breadcrumb>li{
		display: inline;
		padding: 0 0 0 0;
		font-size: 12px;
		line-height:1.5;
		position: relative;
	}
	.breadcrumb>li:first-child{
		padding-left: 0;
	}
	.breadcrumb>li>a>span{
		color: #0b308e;
	}
	.breadcrumb li:after{
		content: '＞';
		padding-left:3px;
	}
	.breadcrumb li:last-child:after{
		content: none;
	}
}

/******************************************************************************

 * sideMenu
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#sideMenu{
		position: fixed;
		top:-5px;
		left:50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 100000;
		-webkit-transition: top .3s linear;
		transition: top .3s linear;
	}
	#sideMenu>ul{
		display: flex;
		justify-content: space-between;
		border-bottom:none;
	}
	#sideMenu>ul>li>a{
		position: relative;
		width: 140px;
		height: 54px;
		margin: 0 4px;
        padding-top: 4px;
        text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size:14px;
		line-height:1.3;
		color: #fff;
		border-radius: 0 0 14px 14px;
		background:#ec6d34;
		-webkit-transition: all 0.2s ease 0s;
		-moz-transition: all 0.2s ease 0s;
		-ms-transition: all 0.2s ease 0s;
		-o-transition: all 0.2s ease 0s;
		transition: all 0.2s ease 0s;
	}
    #sideMenu>ul>li:nth-of-type(even)>a{
        background: #0db7d6;
    }
	#sideMenu ul li a:hover {
		-webkit-transform: translateY(5px);
		-moz-transform: translateY(5px);
		-ms-transform: translateY(5px);
		-o-transform: translateY(5px);
		transform: translateY(5px);
	}
	#sideMenu>ul>li>a>span>b{
		font-weight:bold;
		display:block;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width : 761px ){
	#sideMenu{
		width:100%;
		position: fixed;
		bottom:0;
		left: 0;
		z-index: 1000;
		-webkit-transition: bottom .3s linear;
		transition: bottom .3s linear;
	}
	#sideMenu>ul{
		width:100%;
		display: flex;
		justify-content: space-between;
		border-bottom:none;
	}
	#sideMenu>ul>li{
		width : calc(100%/4) ;
	}
	#sideMenu>ul>li>a{
		height:46px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		writing-mode: horizontal-tb;
		font-size:11px;
		line-height:1.3;
		color: #fff;
		text-align:center;
		color: #fff;
		border-left:2px solid #fff;
        background:#ec6d34;
	}
    #sideMenu>ul>li:nth-of-type(even)>a{
        background: #0db7d6;
    }	
    #sideMenu>ul>li:first-child>a{
		border:none;
		border-radius: 10px 0 0 0;
    }
    #sideMenu>ul>li:last-child>a{
		border-radius:0 10px 0 0;
    }
	#sideMenu>ul>li>a>span>b{
		font-weight:bold;
		display:block;
		font-size:14px;
	}
}

/******************************************************************************

 * FOOTER
 
******************************************************************************/
body>footer {}
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	body>footer {
		margin-top: 40px;
	}
	body>footer>nav,
	body>footer>#address>* {
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
    /*****************/
    /* #address ******/
    /*****************/
	#address {
		width: 100%;
		padding: 26px 0 50px;
		background: #f9f9f9;
	}
	#address>p {
		color: #333;
		font-size: 14px;
		margin-bottom: 25px;
        text-align: center;
	}
	#address>p>br {display: none;}
    /***/
	#address>ul {
		display: table;
		margin-bottom:5px;
	}
	#address>ul>li {
		color: #333;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		width: 320px;
		height: 45px;
		border-left: 1px solid #b3b3b3;
		display: table-cell;
	}
	#address>ul>li:last-child {
		border-right: 1px solid #b3b3b3;
	}
	#address>ul>li a{
		color: #333;
	}
	#address .freedial {
		padding-left: 36px;
		background: url(img/icon_freedial_black.png) no-repeat left center;
	}
	#address small {
		font-size: 80%;
		margin-right: 0.5em;
	}
	#address a[href^="tel:"] {
		pointer-events: none;
	}
    /***/
	#address>div {
		margin-top:14px;
        text-align: center;
	}
	#address>div>p {
        text-align: center;
		font-size: 12px;
        margin-top: 30px;
	}
	#address>div>p>strong {
		font-size: 18px;
		font-weight: normal;
		margin-right: 1.0em;
	}
    #address #copyright {
		color: #6d6d6d;
		font-size: 10px;
        text-align: center;
        margin-top: 20px;
	}
    /***/
    #address>div>ul {
        display:inline-flex;
        align-items: center;
        gap:30px;
	}
	#address #privacy>a{
		color: #6d6d6d;
		font-size: 24px;
        text-align: center;
	}
	#address #privacy>a>span{
		font-size: 9px;
        display: block;
        margin-top:4px;
	}
    #address #is>a{
		color: #6d6d6d;
		font-size: 9px;
        display: flex;
        justify-content: space-between;
        align-items: center;
	}
    #address #is>a>img{
        width: 70px;
        margin-right: 5px;
    }
    #address #dx>a{
		color: #6d6d6d;
		font-size: 9px;
	}
    #address #dx>a>img{
        width: 180px;
        display: block;
    }
    #address #healthcare>img{
        width: 220px;
    }
}
/** SMART PHONE **************************************************************/
@media screen and (max-width : 761px ){
	body>footer>nav,
	body>footer>#address>* {
		margin-left: auto;
		margin-right: auto;
	}
	body>footer>#address {
		text-align: center;
		width: 100%;
		padding: 0 0 80px;
		background: #f9f9f9;
	}
    /***/
	#address>p {
		color: #333;
		font-size: 14px;
		line-height: 1.2;
		height: 60px;
		padding-top :14px;
		border-top: 1px solid #b3b3b3;
		background: #FFF;
	}
    /***/
	#address>ul>li {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		height: 42px;
		padding-top: 12px;
		border-top: 1px solid #b3b3b3;
	}
	#address>ul>li a{
		color: #333;
	}
	#address .freedial {
		padding-left: 36px;
		background: url(img/icon_freedial_black.png) no-repeat left center;
	}
	#address small {
		font-size: 80%;
		margin-right: 0.5em;
	}
    /***/
	#address>div {
		color: #666;
        font-size: 12px;
		line-height: 1.5;
		border-top: 1px solid #b3b3b3;
    }
	#address>div>p>strong {
		font-weight: normal;
		display: block;
	}
    #address #copyright {
		display: block;
        margin-top: 10px;
	}
    /**/
    #address>div>ul{
        display:inline-grid;
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
        align-items: center;
        margin:10px auto 20px;
        padding: 14px;
	}
	#address #privacy>a{
		color: #6d6d6d;
		font-size: 20px;
        text-align: center;
	}
	#address #privacy>a>span{
		font-size: 9px;
        display: block;
	}
    #address #is>a{
		color: #6d6d6d;
		font-size: 9px;
        display: flex;
        justify-content: center;
        align-items: center;
	}
    #address #is>a>img{
        width: 30%;
        margin-right: 5px;
    }
    #address #dx>a{
		color: #6d6d6d;
		font-size: 9px;
        text-align: center;
	}
    #address #dx>a>img{
        width: 60%;
        display: block;
        margin: auto;
    }
    #address #healthcare>img{
        width: 90%;
    }
}

/******************************************************************************

 * FOOTER MENU
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#footMenu {
		display:table;
	}	
	/** GLOBAL MENU **/
	#footMenu>ul{
		width:960px;
		font-size:0;
	}
	#footMenu>ul>li {
		display: inline-block;
		vertical-align:top;
		font-size: 15px;
		font-weight:bold;
		width: calc((100% - 45px) / 4);
		margin-right: 15px;
	}
	#footMenu>ul>li:nth-of-type(4n) { margin-right: 0; }
	#footMenu>ul>li span.blue {/**外断熱涼温リフォーム 涼**/
        color: #0db7d6;
        padding:0 1px 0 3px;
	}
	#footMenu>ul>li span.orange {/**外断熱涼温リフォーム 温**/
        color: #ec6d34;
        padding:0 1px 0 1px;
	}
	#footMenu>ul>li>*:not(ul) {
		color: #333;
		width: 100%;
		border-bottom: 1px solid #b3b3b3;
		display: block;
		padding-bottom:5px;
	}
	#footMenu>ul>li>ul {
		margin-bottom: 60px;
	}
	#footMenu>ul>li>ul>li {
		padding: 8px 0 8px 6px;
	}
	#footMenu>ul>li>ul>li>a {
		font-size: 12px;
		line-height:1.3;
		color: #4d4d4d;
	}
	#footMenu>ul>li>ul>li>a:hover,
	#footMenu>ul>li>a:hover>b {
		opacity: 0.5;
	}
	
}
/** SMART PHONE **************************************************************/
@media screen and (max-width : 761px ){
	#footMenu {display: none;}
}

/******************************************************************************

 * pagetop
 
******************************************************************************/
	#pagetop {
	 position: fixed;
	  z-index: 900;
	  bottom:3%;
	  right:1%;
	}
	#pagetop a {
	  display: block;
	  text-align: center;
	  font-size: 12px;
	  text-decoration: none;
	  -webkit-transition: 0.25s;
	  transition: 0.25s;
	  width: 40px;
	  height: 40px;
	  background:rgba(0,0,0,0.3);
	  border-radius:50%;
	}
	#pagetop a::before {
	  content: '';
	  position: absolute;
	  top: 17px;
	  left: 15px;
	  width: 8px;
	  height: 8px;
	  margin: 0;
	  display: block;
	  display: inline-block;
	  vertical-align: middle;
	  border-top: 2px solid #fff;
	  border-right: 2px solid #fff;
	  -ms-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	}
	#pagetop>a>span{display:none;}

/** SMART PHONE **************************************************************/
@media screen and (max-width : 761px ){
	#pagetop {
	  bottom:70px;
	  right:10px;
	}
}

/******************************************************************************

 * ARTICLE
 
******************************************************************************/
body>article {}
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	body>article {
		padding-top: 176px;
		margin: 0 auto;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width : 761px ){
	body>article {
		padding-top:50px;
	}
}

/******************************************************************************

 * COMMON CLASS STYLES
 
******************************************************************************/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	.sp {display: none;}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width : 761px ){
	.pc {display: none;}
}

/******************************************************************************
 * BigRam
 * ver 1.0 2016
******************************************************************************/