@charset "UTF-8";

/*- the_content --------  */
/* 自由入力用 */
.main_bace{width:100%;}
.the_content.bace_page{padding:0 4% 60px 4%;}
/*.the_content.bace_page{padding:100px 4%;}*/
.the_content img{
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.the_content > section{margin-bottom:100px;}
.the_content > section:last-of-type{margin-bottom:0;}



@media only screen and (max-width:812px){
.the_content.bace_page{padding:0 4% 100px 4%;}
}


/* particular */
.quality_link{display: flex; justify-content:space-between; flex-wrap: wrap; width:100%; max-width: 1000px; margin:0 auto;}
.quality_link li a{
	display: inline-block;
	position: relative;
	background-color: #d02714;
	border: 1px solid #d02714;
	max-width: 320px;
	width: 100%;
	padding: 15px 10px;
	color: #fff;
	font-weight: 700;
	font-size: 1.6rem;
	text-align: center;
	line-height: 1;
}
.quality_link li a::after{
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -7px;
	font-family: 'icomoon' !important;
	content: "\f078";
	font-size: 1.4rem;
	font-weight: 500;
}

.qualityBox{padding:30px 0; border-bottom: 1px dashed #cccccc;}
.qualityBox h2{color:#d02714; margin-bottom: 10px;}

#quality06{border-bottom: none; padding-bottom:0;}

#quality01 figure img{width:100%; max-width: 69px;}
#quality02 figure img{width:100%; max-width: 69px;}
#quality03 figure img{width:100%; max-width: 65px;}
#quality04 figure img{width:100%; max-width: 89px;}
#quality05 figure img{width:100%; max-width: 90px;}
#quality06 figure img{width:100%; max-width: 74px;}

@media only screen and (min-width:813px){
.quality_link li{width: 32%; margin-bottom: 2%;}
.quality_link li:not(:nth-of-type(3n)){margin-right:2%; }
.qualityBox{display: flex;width:100%; max-width: 1000px; margin:0 auto; align-items: center; }
.qualityBox > figure{width:15%;}
.qualityBox h2{font-size: 2.2rem;}
	
	
	.quality_link li a{min-height: 60px;}


.qualityBox > div{width:85%; }
}
@media only screen and (max-width:812px){
.quality_link li{width: 49%; margin-bottom: 2%;}
.quality_link li:not(:nth-of-type(2n)){margin-right:2%; }
.qualityBox h2{font-size: 2.0rem;}
.qualityBox figure{margin-bottom: 20px;}
	.quality_link li a{font-size: 3.3vw; text-align: left; max-width: 100%;
}

/* company */
#message{padding:0 4%;}
#message .ceoBox p{line-height: 2;}
#message .ceoBox{margin-bottom:100px;}
#aboutus{padding:0 4%;}
#access{padding:0 4%;}
#access h2{margin-bottom:60px;}
#access .wap{width:100%; max-width:1000px; margin:0 auto 60px;}
#access .adrBox{margin-bottom:40px;}
#access .adrBox p{font-size: 1.4rem;}
.mapBox{overflow: hidden; width:100%; max-width:1000px; margin:0 auto;}
.mapBox iframe{width:100%; max-width:1000px;}
#message .ceoBox > figure img{width:100%; max-width:360px; height: auto;}

@media only screen and (min-width:813px){
#message .title03{text-align: left;}
#message .ceoBox{display: flex; align-items: center;}
#message .ceoBox > figure{order: 1; width:30%;}
#message .ceoBox > div{order: 2; width:66%; margin-left:4%;}
}
@media only screen and (max-width:812px){
#message{padding:0 6%;}
#aboutus{padding:0 6%;}
#access{padding:0 6%;}
#message .ceoBox > figure{margin-top:40px; text-align: center;}
}

.sitemap_list01{width:100%;}
.sitemap_list01 li{width:100%; text-align: center;}
.sitemap_list01 li:not(:last-child){ margin-bottom:20px;}
/*border-radius:50% 50% 50% 50% / 52% 55% 45% 48%;*/

/*article {
	margin: 70px auto;
}*/
/*.the_content h3 {
	font-size: 2.8rem;
	margin-bottom: 30px;
}
.the_content h4 {
	font-size: 2rem;
	margin-bottom: 20px;
}*/

.txtC{text-align: center;}
.mb50{margin: 50px;}


/*基礎知識*/
    .flex {
  display: flex; /*横並び*/
}
.flex .image {
  width: 50%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
  padding: 0 20px;
    text-align: justify;
}
.flex .text02 {
    width: 48%;
  padding: 20px;
    margin: 1%;
    text-align: justify;
    border: solid 2px #000;
}
@media only screen and (max-width:812px){
    .flex {
  display: block; /*横並び*/
}
.flex .image {
  width: 100%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex img {
  width: 100%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
    .flex .text {padding: 0;}
.flex .text02 {
    width: 100%;
  padding: 20px;
    margin: 1%;
    text-align: justify;
    border: solid 2px #000;
}
    .kisotishiki h2.title03{ text-align: left;}    
}
    
    
    h4.title10,h5.title10{background: #49403B; padding: 5px 10px; color: #fff; margin-bottom: 1em; font-size: 115%;}
    .brownB {background: #49403B; padding: 5px 10px; color: #fff; margin-bottom: 1em;}


table.table03,
table.table03 th,
table.table03 td{
  border: 1px solid black;

    vertical-align: middle;
}

table.table03 th{
    background: #f5f2ee;
  padding: 10px 20px;
      
}

table.table03 td{
  text-align: left;
  padding: 20px;

}
}
    
/*20220711追記　follow_link　保証*/
.follow_link{display: flex; justify-content:space-between; flex-wrap: wrap; width:100%; max-width: 1000px; margin:0 auto;}
.follow_link li a{
	display: inline-block;
	position: relative;
	background-color: #d02714;
	border: 1px solid #d02714;
	max-width: 320px;
	width: 100%;
	padding: 15px 10px;
	color: #fff;
	font-weight: 700;
	font-size: 1.6rem;
	text-align: center;
	/*line-height: 1;*/
}
.follow_link li a::after{
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -7px;
	font-family: 'icomoon' !important;
	content: "\f078";
	font-size: 1.4rem;
	font-weight: 500;
}

@media only screen and (min-width:813px){
.follow_link li{width: 32%; margin-bottom: 2%;}
.follow_link li:not(:nth-of-type(3n)){margin-right:2%; }
.follow_link li a{min-height: 60px;}
}
	
@media only screen and (max-width:812px){
.follow_link li{width: 49%; margin-bottom: 2%;}
.follow_link li:not(:nth-of-type(2n)){margin-right:2%; }
.follow_link li a{font-size: 3.3vw; text-align: left; max-width: 100%;}
}
	
	
/*20220708追記　#follow1~6　リフォームの進め方、保証*/
#follow01 figure img{width:100%; max-width: 150px;}
#follow02 figure img{width:100%; max-width: 150px;}
#follow03 figure img{width:100%; max-width: 150px;}
#follow04 figure img{width:100%; max-width: 150px;}
#follow05 figure img{width:100%; max-width: 150px;}
#follow06 figure img{width:100%; max-width: 150px;}
#follow07 figure img{width:100%; max-width: 150px;}
#follow08 figure img{width:100%; max-width: 150px;}

/*20220708追記　followBox　リフォームの進め方、保証*/
.followBox{padding:30px 0; border-bottom: 1px dashed #cccccc;}
.followBox h2{color:#d02714; margin-bottom: 10px;}

@media only screen and (min-width:813px){
.followBox{display: flex;width:100%; max-width: 1000px; margin:0 auto; align-items: center; }
.followBox > figure{width:15%; margin:0 1.5rem;}
.followBox h2{font-size: 2.2rem;}
.followBox > div{width:85%; }
}
	
@media only screen and (max-width:812px){
.followBox h2{font-size: 2.0rem;}
.followBox figure{margin-bottom: 20px;}
}
	
/*20220708追記 tablecompany 会社概要*/
.tablecompany{width:100%; margin:0 auto;}
.tablecompany thead th,.tablecompany tbody td, .tablecompany tfoot th{border: none;}
.tablecompany tbody td,.tablecompany tbody th{border-bottom:1px solid #ccc;}
.tablecompany tbody tr td:nth-child(1),.tablecompany tbody tr th:nth-child(1){font-weight: 900; color:#d02714; text-align: center;}

@media only screen and (min-width:813px){
.tablecompany th{padding:30px 0; vertical-align: middle;}
.tablecompany td{padding:30px 10px;}
.tablecompany tbody tr th{width:20%; text-align: left;}
.tablecompany tbody tr td{width:85%;}
}
@media only screen and (max-width:812px){
.tablecompany tbody td{width:100%; display: inline-block;}
.tablecompany tbody th{width:100%; display: inline-block; text-align: left; padding:10px 10px 0;}
.tablecompany tbody tr td:nth-child(1),.table01 tbody tr th:nth-child(1){border-bottom:none; padding:10px 10px 0;}
.tablecompany tbody tr td:nth-child(1),.tablecompany tbody tr th:nth-child(1){text-align: left;}
}

/*20220708追記　titleshowroom showroomflex ショールーム*/
.titleshowroom{
	background-color: #d02714;
    border: 1px solid #d02714;
    /*max-width: 440px;*/
    width: 100%;
    padding: 20px 20px;
    color: #fff;
    font-weight: 700;
    font-size: 2.3rem;
    text-align:inherit;
    min-height: 60px;
    line-height: 1;
}
.h2_showroomline{
	font-size: 2.6rem;
	margin-bottom:40px;
	font-weight:900;
	color:#d02714;
	text-align: center;
}
.showroomline{
	display: inline-block;
	background: linear-gradient(transparent 60%, #ffe900 60%);
	margin-bottom: 3rem;
}

/*20220711追記　showroommerit ショールーム*/
.showroommerit{
	display: flex;
    justify-content: space-between;
	margin: 60px 40px;
}
.showroommerit dl{
	width: 200px;
}
.showroommerit dl dd p{
	font-size: 1.6rem;
    text-align: justify;
	margin-top: 2rem;
}

.showroomflex li:nth-child(4) {margin: 20px auto 0;}

.showroomflex{
	display: flex;
    justify-content: flex-start;
	flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 40px;
    max-width: 1000px;
}
.showroomflex li{
    margin: 20px auto;
    max-width: 425px;
}
.showroomflex li > span{
	padding: 6px 10px;
    border: solid 2px #d02714;
    font-size: 1.4rem;
    font-weight: 900;
    display: inline-block;
    color: #d02714;
    margin-bottom: 10px;
    line-height: 1;
}


#showroomwrap{
	background-color: #eaeaea;
    position: relative;
    padding: 0 4%;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

.showroomhonten{
	display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto 40px;
    max-width: 1000px;
}
.showroomhonten figure{
	max-width: 500px;
}

#showroomwrap .wap a{margin-top: 10px;
    display: inline-block;
    position: relative;
    background-color: #d02714;
    border: 1px solid #d02714;
    max-width: 220px;
    width: 100%;
    padding: 14px 20px;
    color: #fff;
    font-weight: 700;
    font-size: 1.6rem;
    text-align: center;
    min-height: 48px;
    line-height: 1;}

#showroomwrap .wap a::after {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -7px;
    font-family: 'icomoon' !important;
    content: "\f061";
    font-size: 1.4rem;
    font-weight: 500;
}
/*#showroomwrap .showroomhonten{
width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    display: flex;
    align-items: center;
}
#showroomwrap .showroomhonten > div{
	width: 50%;
    margin-left: auto;
    padding: 60px 0 60px 40px;
}*/
#showroomwrap .showroomhonten > div ul span{
	text-align: center;
    font-size: 2.8rem;
    font-weight: 900;
    color: #d02714;
    display: block;
	margin-bottom: 20px;
}
#showroomwrap .showroomhonten > div ul p{
	margin: 0 60px 20px;
}

@media only screen and (min-width: 813px) {
#showroomwrap::before{
	top: 0;
    right: 50%;
    width: 50%;
    height: 100%;
    display: block;
    content: '';
    position: absolute;
    background: url(../img/top/showroom01_01.jpg) no-repeat left center;
    background-size: cover;
    z-index: 1;
}
#showroomwrap figure:nth-child(1){display: none !important;}
#showroomwrap .showroomhonten{
width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    display: flex;
    align-items: center;
}
#showroomwrap .showroomhonten > div{
	width: 50%;
    margin-left: auto;
    padding: 60px 0 60px 40px;
}
}

@media only screen and (max-width: 812px) {
.showroommerit dl dd p {font-size: 1.6rem; text-align: justify;}
#showroomwrap .showroomhonten > div h2 br{display: none;}
#showroomwrap{padding:0 6% 40px;}
#showroomwrap .showroomhonten > div{padding:60px 0 60px 0;}
#showroomwrap .showroomhonten > figure{width:100vw; margin: 0 calc(50% - 50vw);}
#showroomwrap .showroomhonten > figure img{width:100%; }
}
@media only screen and (max-width: 812px) {
.titleshowroom{text-align: center; line-height: 1.25;}
#showroomwrap .showroomhonten > div ul p {margin: 0 auto 20px;}
#showroomwrap .showroomhonten > div ul span{font-size: 1.8rem; margin-top: 15px;}
#showroomwrap .showroomhonten > div ul li a{font-size: 4.2vw; text-align: left;}
.showroomhonten{display: block; margin: 0 auto;}
#showroomwrap .showroomhonten > div{width: 100%; margin: 0 auto; padding: 0;}

.showroomline{display: inline;}
.h2_showroomline span{font-size: 2.4rem!important;}
	
.showroommerit{display: block; margin:30px 0;}
.showroommerit dl{width: auto}
.showroommerit dl dd{margin: 0 auto 30px;}
.showroommerit dt img{max-width:150px; width: 100%;}
.showroommerit dl dd span img{width: 200px;}
}


#banner{
    padding: 60px 4%;
}

.bnList {
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  width:100%;
  max-width:1000px;
  margin:0 auto;
}
.bnList a,
.bnList figure{
  text-align:center;
}
.bnList figure.bnr_pana{
    border: 1px solid #999;
}



.bnList img {
  max-width:100%;
  height:auto;
}

@media only screen and (min-width:813px) {
    .bnList{justify-content: center;}
  .bnList a,
    .bnList figure{
    width:calc((100% - 60px)/4);
  }
}
@media only screen and (max-width:812px) {
    .bnList { gap:20px;}
  .bnList a,
    .bnList figure{
    width:calc((100% - 20px)/2);
  }
}