@charset "utf-8";
/*BASE*/
main article {
	background-image:url(../images/tmpl/bgimg_section-paper.gif);
}

/*NAVI*/
/*header nav .works .en {
	color:rgba(72,143,187,1) !important;
}*/
/*HEADER*/
#house .keyvisual {
	background-image:url(../images/house/keyvisual.jpg);
}
/*品目一覧*/
#menu .service-list .content-box ul.menu li::before {
	content:"・";
}
#menu .service-list .content-box ul.brand li:not(:last-child)::after {
	content:"／";
}

@media screen and (max-width: 767.98px) {
/*BASE*/

/*KeyVisual*/
.keyvisual {
	background-color:var(--color-logo);
}
.keyvisual .title-box h1 .ja span {
	display:inline-block;
	letter-spacing:normal;
	padding-left:.5rem;
	font-size:12px;
}
.keyvisual .title-box h1 .ja {
	display:block;
	letter-spacing:normal;
	font-size:16px
}
#renovation .keyvisual .title-box h1 .ja span {
	display:block;
	font-size:10px;
	line-height:1;
	padding-left:0;
}

/*品目一覧*/
#menu {
	padding:4rem 2rem;
}
#menu .service-list {
}
#menu .service-list .content-box {
	display:block;
	padding:20px 20px;
	margin-bottom:2rem;
	width:100%;
	height:100%;
	color:#333;
	background-color:#FFF;
	border:solid 1px #CCC;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0,0,0,.4);
}
#menu .service-list .content-box:not(:last-child)i {
	margin-bottom:0;
	
}
#menu .service-list .content-box .tag-box {
	margin-bottom:20px;
	position:relative;
}
#menu .service-list .content-box .tag-box h2{
	font-size:16px;
	letter-spacing:.1em;
	color:#FFF;
	background-color:rgba(31,52,81,.8);
	width:max-content;
	padding:.5em 1em;
	margin:auto;
	position:absolute;
	right: 0;
	left: 0;
}
#menu .service-list .content-box .tag-box img {
	width:100%;
}
#menu .service-list .content-box .comment-box {
	margin-bottom:20px;
}
#menu .service-list .content-box ul{
	display:flex;
	flex-flow: row wrap;
}
#menu .service-list .content-box ul li {
	font-size:12px;
}
#menu .service-list .content-box ul.menu {
	margin-bottom:10px;
}
}

@media screen and (min-width: 768px), print {
/*BASE*/

/*KeyVisual*/

/*品目一覧*/
#menu {
	padding:100px 80px;
}
#menu .service-list {
	display:grid;
	grid-template-rows:auto;
	gap:60px;
	max-width:1440px;
	margin:auto;
}
#menu .service-list .content-box {
	display:block;
	padding:20px 20px;
	width:100%;
	height:100%;
	color:#333;
	background-color:#FFF;
	border:solid 1px #CCC;
	border-radius:10px;
	box-shadow:0 0 10px rgba(0,0,0,.4);
}
#menu .service-list .content-box .tag-box {
	margin-bottom:20px;
	position:relative;
}
#menu .service-list .content-box .tag-box h2{
	font-size:clamp(14px, 1.6vw, 18px);
	letter-spacing:.1em;
	color:#FFF;
	background-color:rgba(31,52,81,.8);
	width:max-content;
	padding:1em 2em;
	margin:auto;
	position:absolute;
	right: 0;
	left: 0;
}
#menu .service-list .content-box .tag-box img {
	width:100%;
}
#menu .service-list .content-box .comment-box {
	margin-bottom:20px;
}
#menu .service-list .content-box ul{
	display:flex;
	flex-flow: row wrap;
}
#menu .service-list .content-box ul li {
	font-size:clamp(12px, 1.2vw, 14px);
}
#menu .service-list .content-box ul.menu {
	margin-bottom:10px;
}
@media screen and (max-width: 1339.98px) {
#menu .service-list {
	grid-template-columns:1fr 1fr;
}
}
@media print {
#menu .service-list {
	grid-template-columns:1fr 1fr;
}
}
@media screen and (min-width: 1340px) {
#menu .service-list {
	grid-template-columns:1fr 1fr 1fr;
}
}