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

 file name  :works.css
 style info :リフォーム実例集

=================================================================== */

/* =============================

	overwrite

=============================== */
.no-post-msg{
	margin: 4em 0 10em;
}
/* =================================== */
/*
#searchbox
---------------------------*/
#searchbox {
	border-left: 1px solid #737378;
	border-right: 1px solid #737378;
	border-bottom: 1px solid #737378;
}
#searchbox h3 {
	text-align: center;
}
#searchbox h3 a {
	position: relative;
	display: block;
	padding:0.8em 0.3em;
	font-size: 1.3rem;
	text-align: center;
	color: #fff;
	background: #737378;
	text-decoration: none;
}
#searchbox h3 a::before{
	content: '';
	position: absolute;
	right: 8px;
	top: calc(50% - 8px);
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background: #fff;
}
#searchbox h3 a::after{
	content: '';
	position: absolute;
	right: 13px;
	top: calc(50% - 3px);
	width: 6px;
	height: 6px;
	border-right: 1px solid #737378;
	border-bottom: 1px solid #737378;
	transform: rotate(45deg);
	transition: transform ease .3s;
}
#searchbox.open h3 a::after{
	top: calc(50% - 2px);
	transform: rotate(-135deg);
}
#searchbox .panel{
	display: none;
}
#searchbox .panel #searchForm {
	padding: 0 12px 12px;
}
#searchbox .panel #searchForm > ul > li {
	padding:14px 0;
	border-bottom: 1px solid #c7c7c7;
}
#searchbox .panel #searchForm > ul > li:last-child{
	border-bottom: none;
}
#searchbox .panel #searchForm > ul > li .block h4 {
	margin-bottom: 1em;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.1em;
}
#searchbox .panel #searchForm > ul > li .block ul {
	margin:0 -5px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#searchbox .panel #searchForm > ul > li .block ul li input[type=checkbox] {
	display: none;
}
#searchbox .panel #searchForm > ul > li .block ul li input[type=checkbox] + label > span{
	position: relative;
	display: inline-block;
	padding: 0.4em 0.8em;
	margin: 5px;
	border: 1px solid #737378;
	font-size: 1.2rem;
	cursor: pointer;
}
#searchbox .panel #searchForm > ul > li .block ul li input[type=checkbox]:checked + label > span{
	background: #737378 !important;
	color: #fff;
}

#searchbox .panel .btn-pic_search {
	margin: 0 15px 15px;
}
#searchbox .panel .btn-pic_search a {
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}
@media screen and (min-width: 768px){
	#searchbox h3 a {
		font-size: 1.6rem;
	}
	#searchbox h3 a::before{
		right: 20px;
		top: calc(50% - 10px);
		width: 20px;
		height: 20px;
	}
	#searchbox h3 a::after{
		right: 26px;
		top: calc(50% - 5px);
		width: 8px;
		height: 8px;
	}
	#searchbox .panel #searchForm {
		padding: 0 20px 20px;
	}
	#searchbox .panel #searchForm > ul > li {
		padding:14px 0;
	}
	#searchbox .panel #searchForm > ul > li .block h4 {
		font-size: 1.4rem;
	}
	#searchbox .panel #searchForm > ul > li .block ul li input[type=checkbox] + label > span{
		transition: background ease .3s,color ease .3s;
		font-size: 1.4rem;
	}
	#searchbox .panel #searchForm > ul > li .block ul li input[type=checkbox]:hover + label > span{
		background: #efefef;
	}
	#searchbox .panel .btn-pic_search {
		margin: 0 auto 20px;
	}

}


#main .works-idx .txt-results{
	margin: 1em 0;
	text-align: right;
}
@media screen and (min-width: 768px){
	#main .works-idx .txt-results{
		margin: 2em 0;
		font-size: 1.4rem;
	}
}


#main .article-list .works-list .works-inner {
	margin-bottom: 40px;
}
#main .article-list .works-list .works-inner a::before{
	width: 14.5%;
	padding-bottom: 100%;
}
#main .article-list .works-list .works-inner a figure {
	padding-bottom: 67.24%;
}
#main .article-list .works-list .works-inner a .ttl {
	font-size: 1.4rem;
}
#main .article-list .works-list .works-inner a .info {
	font-size: 1.2rem;
}
@media screen and (min-width: 768px){
	#main .article-list .works-list::after{
		width: 31%;
	}
	#main .article-list .works-list .works-inner {
		width: 31%;
		margin-bottom: 80px;
	}
	#main .article-list .works-list .works-inner a .ttl {
		font-size: 1.8rem;
	}
	#main .article-list .works-list .works-inner a .info {
		font-size: 1.4rem;
	}
}


/*
.pager
---------------------------*/
#main .works-idx .pager{
	margin: 50px 0 40px;
}
#main .works-idx .pager ul {
	text-align: center;
	line-height: 1.5;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
}
#main .works-idx .pager ul li {
	position: relative;
	display: inline-block;
	margin: 0 2px;
}
#main .works-idx .pager ul li.prev{	margin: 0 14px 0 0;}
#main .works-idx .pager ul li.next{	margin: 0 0 0 14px;}
#main .works-idx .pager ul li.hide{pointer-events: none; opacity: 0;}
#main .works-idx .pager ul li a,
#main .works-idx .pager ul li > span {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #737378;
	border: 1px solid #737378;
	text-decoration: none !important;
	border-radius: 100%;
	overflow: hidden;
	font-size: 1.2rem;
}
#main .works-idx .pager ul li.prev a,
#main .works-idx .pager ul li.prev > span,
#main .works-idx .pager ul li.next a,
#main .works-idx .pager ul li.next > span{
	width: 38px;
	height: 38px;
	white-space: nowrap;
	text-indent: 100%;
	background: #e4a59b;
	border: none;
}
#main .works-idx .pager ul li.prev a::before,
#main .works-idx .pager ul li.next a::before{
	content: '';
	position: absolute;
	left: calc(50% - 6px);
	top: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(-45deg);
}
#main .works-idx .pager ul li.prev a::before{
	left: calc(50% - 3px);
	transform: rotate(135deg);
}
#main .works-idx .pager ul li.current a {
	background: #737378;
	color: #fff;
}
#main .works-idx .pager ul li.more span{
	width: 20px;
	background: none;
	border: none;
}
@media screen and (min-width: 768px){
	#main .works-idx .pager{
		margin: 40px 0 120px;
	}
	#main .works-idx .pager ul li {
		margin: 0 6px;
	}
	#main .works-idx .pager ul li.prev{	margin: 0 26px 0 0;}
	#main .works-idx .pager ul li.next{	margin: 0 0 0 26px;}
	#main .works-idx .pager ul li a,
	#main .works-idx .pager ul li > span {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 1.4rem;
	}
	#main .works-idx .pager ul li.prev a,
	#main .works-idx .pager ul li.prev > span,
	#main .works-idx .pager ul li.next a,
	#main .works-idx .pager ul li.next > span{
		width: 50px;
		height: 50px;
	}
	#main .works-idx .pager ul li.prev a::before,
	#main .works-idx .pager ul li.next a::before{
		left: calc(50% - 7px);
		top: calc(50% - 5px);
		width: 10px;
		height: 10px;
	}
	#main .works-idx .pager ul li.prev a::before{
		left: calc(50% - 4px);
	}
	#main .works-idx .pager ul li.more span{
		width: 40px;
	}
	#main .works-idx .pager ul li a[href]:hover{
		background: #737378;
		color: #fff;
	}
	#main .works-idx .pager ul li.prev a[href]:hover,
	#main .works-idx .pager ul li.next a[href]:hover{
		background: #d88578;
	}
}





/*
.article-main .slider
---------------------------*/
#main .article-main {
	padding-top: 46px;
}
#main .article-main header .type {
	position: relative;
	display: inline-block;
	padding: 0.5em 20px 0.5em 44px;
	margin-bottom: 1em;
	color: #fff;
	background: #1b1b1b;
	font-size: 1.1rem;
	font-weight: 700;
}
#main .article-main header .type::before{
	content: '';
	position: absolute;
	left: 20px;
	top: calc(50% - 9px);
	width: 18px;
	height: 18px;
	background-size:contain;
	background-position: center;
	background-repeat: no-repeat;
}
#main .article-main.house header .type::before{background-image: url(../images/works/ico_house_s.svg);}
#main .article-main.mansion header .type::before{background-image: url(../images/works/ico_mansion_s.svg);}
#main .article-main.office header .type::before{background-image: url(../images/works/ico_office_s.svg);}
#main .article-main header h1 {
	margin-bottom: 0.8em;
	padding-bottom: 0.8em;
	font-size: 1.5rem;
	font-weight: 700;
	border-bottom: 1px solid #333;
}
@media screen and (min-width: 768px){
	#main .article-main {
		padding-top: 60px;
	}
	#main .article-main header .type {
		padding: 0.6em 20px 0.6em 55px;
		font-size: 1.3rem;
	}
	#main .article-main header .type::before{
		left: 20px;
		top: calc(50% - 11px);
		width: 22px;
		height: 22px;
	}
	#main .article-main header h1 {
		margin-bottom: 1.5em;
		font-size: 2.2rem;
	}
}


/*
.article-main .slider
---------------------------*/
#main .article-main .slider {
	width: 100%;
	margin-bottom: 40px;
}
#main .article-main .slider .swiper.slider-top {
	margin-bottom: 4%;
}
#main .article-main .slider .swiper.slider-top .swiper-wrapper .swiper-slide .swiper-slide-inner {
	width: 100%;
	position: relative;
	padding-bottom: 65.7142%;
	overflow: hidden;
}
#main .article-main .slider .swiper.slider-top .swiper-wrapper .swiper-slide .swiper-slide-inner img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: contain;
	font-family: 'object-fit: contain;';
}
#main .article-main .slider .slider-thumbs-wrap{
	position: relative;
	padding: 0 20px;
	opacity: 0;
}
#main .article-main .slider .slider-thumbs-wrap.loaded{opacity: 1;}
#main .article-main .slider .swiper.slider-thumbs {
	width: 100%;
}
#main .article-main .slider .swiper.slider-thumbs .swiper-wrapper .swiper-slide .swiper-slide-inner {
	width: 100%;
	position: relative;
	padding-bottom: 66.1%;
	overflow: hidden;
}
#main .article-main .slider .swiper.slider-thumbs .swiper-wrapper .swiper-slide .swiper-slide-inner img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}
#main .article-main .slider .swiper.slider-thumbs .swiper-wrapper .swiper-slide{transition: opacity ease .3s; cursor: pointer;}
#main .article-main .slider .swiper.slider-thumbs .swiper-wrapper .swiper-slide.swiper-slide-thumb-active{	opacity: 0.6;}
#main .article-main .slider .swiper-thumb-arrow{
	position: absolute;
	top: 0;
	width: 18px;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	transition: opacity ease .3s;
	cursor: pointer;
}
#main .article-main .slider .swiper-thumb-arrow.swiper-button-disabled{
	opacity: 0.2;
	pointer-events: none;
	cursor: default;
}
#main .article-main .slider .swiper-thumb-arrow::before{
	content:'';
	position: absolute;
	left: calc(50% - 6px);
	top: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(-45deg);
	z-index: 1;
}
#main .article-main .slider .swiper-thumb-prev{ left: 0;}
#main .article-main .slider .swiper-thumb-next{ right: 0;}
#main .article-main .slider .swiper-thumb-prev::before{transform: rotate(135deg);left: calc(50% - 2px);}
#main .article-main .slider .swiper-thumb-arrow::after{
	content:'';
	position: absolute;
	left: 10%;
	top: 0;
	width: 80%;
	height: 100%;
	background: #737378;
	z-index: -1;
}
@media screen and (min-width: 768px){
	#main .article-main .slider {
		width: 70%;
		margin: 0 auto 100px;
	}
	#main .article-main .slider .swiper.slider-top {
		margin-bottom: 15px;
	}
	.no_touch #main .article-main .slider .swiper-thumb-arrow:hover{
		opacity: 0.5;
	}
	.no_touch #main .article-main .slider .swiper.slider-thumbs .swiper-wrapper .swiper-slide:hover {
		opacity: 0.6;
	}
}

/*
##roomplan
---------------------------*/
#roomplan .block {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
#roomplan .block > div {
	width: calc(50% - 10px);
	position: relative;
	text-align: right;
}
#roomplan .block > div.before::after{
	content: '';
	position: absolute;
	right: -14px;
	top: calc(50% + 1em);
	width: 14px;
	height: 14px;
	border-right: 2px solid #75757a;
	border-bottom: 2px solid #75757a;
	transform: rotate(-45deg);
	z-index: 2;
}
#roomplan .block > div .floor {
	display: inline-block;
	padding: 0.1em 0.5em;
	margin-left: auto;
	font-size: 1.1rem;
	background: #737378;
	color: #fff;
}
#roomplan .block > div span.floor{opacity: 0; pointer-events: none;}
#roomplan .block > div a {
	position: relative;
	display: block;
	padding-bottom: 10px;
	height: 100%;
}
#roomplan .block > div a::after{
	content: '';
	background: url(../images/works/ico_zoom.svg) no-repeat center center / contain;
	width: 25px;
	height: 25px;
	position: absolute;
	right: 0;
	bottom: 0;
}
#roomplan .block > div a figure {
	text-align: center;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
#roomplan .block > div a figure img{
	max-height: 260px;
}
#roomplan .block > div .txt {
	margin-top: -10px;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: #737378;
}
@media screen and (min-width: 768px){
	#roomplan{
		margin-bottom: 100px;
	}
	#roomplan .plans{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	#roomplan .block {
		width: 48%;
	}
	#roomplan .block > div {
		width: calc(50% - 15px);
	}
	#roomplan .block > div.before::after{
		right: -20px;
		width: 18px;
		height: 18px;
	}
	#roomplan .block > div .floor {
		font-size: 1.4rem;
	}
	#roomplan .block > div a:hover{
		opacity: 0.6;
	}
	#roomplan .block > div a::after{
		width: 34px;
		height: 34px;
		transition: transform ease .3s;
	}
	#roomplan .block > div a:hover::after{
		transform: rotate(180deg);
	}
	#roomplan .block > div a figure img{
		max-height: 350px;
	}
	#roomplan .block > div .txt {
		font-size: 1.4rem;
	}
}

/*
#data
---------------------------*/
#data {
	margin-bottom: 30px;
}
#data > ul > li ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 1.2rem;
}
#data > ul > li ul li {
	width:calc(50% - 0.5em);
}
#data > ul > li ul li dl dt {
	padding: 1em 1em;
	font-weight: 700;
	border-bottom: 1px solid #c7c7c7;
}
#data > ul > li ul li dl dd {
	padding: 1em 1em;
	background: #f9f9f9;
}
#data > ul > li.wide ul li{
	width: 100%;
}
@media screen and (min-width: 768px){
	.data-before-wrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 100px;
	}
	#data {
		width: 48%;
		margin-bottom: 0;
	}
	#data > ul > li ul {
		font-size: 1.3rem;
	}
	#data > ul > li ul li {
		width:50%;
	}
	#data > ul > li ul li dl{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#data > ul > li ul li dl dt {
		width: 50%;
		padding: 1em 0.5em;
	}
	#data > ul > li ul li dl dd {
		width: 50%;
		padding: 1em 0.5em;
		border-bottom: 1px solid #c7c7c7;
	}
	#data > ul > li.wide ul li dl dt{
		width: 25%;
	}
	#data > ul > li.wide ul li dl dd{
		width: 75%;
	}
}


/*
#before
---------------------------*/
#before {
	margin-bottom: 40px;
}
#before h2 {
	margin-bottom: 2em;
}
#before ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#before ul li {
	width: 47.5%;
}
@media screen and (min-width: 768px){
	#before {
		width: 48%;
		margin-bottom: 0;
	}
}



/*
#comment
---------------------------*/
#comment {
	background: #737378;
	padding: 24px 10px;
	color: #fff;
}
#comment h2 {
	margin-bottom: 1em;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
}
#comment p{
	line-height: 1.7;
	font-size: 1.2rem;
}
@media screen and (min-width: 768px){
	#comment {
		padding: 60px 0;
	}
	#comment h2 {
		margin-bottom: 1.5em;
		font-size: 3rem;
	}
	#comment p{
		font-size: 1.6rem;
		line-height: 2;
	}
}


/*
#message
---------------------------*/
#message {
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 32px;
}
#message h2 {
	margin-bottom: 38px;
	text-align: center;
}
#message h2 span{
	position: relative;
	display: inline-block;
	padding: 0 24px;
	font-size: 1.6rem;
	font-weight: 700;
}
#message h2 span::before,
#message h2 span::after{
	content: '';
	background: url(../images/works/ico_huki.svg) no-repeat center / contain;
	width: 16px;
	height: 26px;
	position: absolute;
	left: 0;
	top: calc(50% - 13px);
	transform: scaleX(-1);
}
#message h2 span::after{
	right: 0;
	left: auto;
	transform: scaleX(1);
}
#message .detail {
	padding: 30px;
	border: 1px solid #e4a59b;
	font-size: 1.2rem;
}
#message .detail h3 {
	text-align: center;
	margin-top: -42px;
	margin-bottom: 24px;
}
#message .detail h3 span{
	display: inline-block;
	padding: 0.4em;
	min-width: 110px;
	position: relative;
	background: #e4a59b;
	font-weight: 700;
	color: #fff;
	border-radius: 0 0 2px 2px;
}
#message .detail h3 span::before{
	content: '';
	position: absolute;
	left: -12px;
	top: 0;
	width: 0;
	height: 0;
	transform-origin: right top;
	transform: scaleX(0.8);
	border-style: solid;
	border-width: 0 0 12px 12px;
	border-color: transparent transparent #cd8175 transparent;
}
#message .detail h3 span::after{
	content: '';
	position: absolute;
	right: -12px;
	top: 0;
	width: 0;
	height: 0;
	transform-origin: left top;
	transform: scaleX(0.8);
	border-style: solid;
	border-width: 12px 0 0 12px;
	border-color: transparent transparent transparent #cd8175;
}
#message .detail p {
	line-height: 1.7;
	margin-bottom: 1.4em;
}
#message .detail figure {
	text-align: center;
}
#message .detail figure img{
	border: 1px solid #e4a59b;
}
#message * + .btn-pic_voice{
	margin-top: 30px;
}
@media screen and (min-width: 768px){
	#message {
		padding-top: 100px;
		margin-bottom: 100px;
	}
	#message h2 {
		margin-bottom: 50px;
	}
	#message h2 span{
		padding: 0 34px;
		font-size: 2.4rem;
	}
	#message h2 span::before,
	#message h2 span::after{
		width: 20px;
		height: 30px;
		top: calc(50% - 15px);
	}
	#message .detail {
		padding: 60px 80px;
		font-size: 1.6rem;
	}
	#message .detail h3 {
		margin-top: -80px;
		margin-bottom: 40px;
	}
	#message .detail h3 span{
		padding: 0.8em;
		min-width: 200px;
		font-size: 1.8rem;
	}
	#message .detail h3 span::before{
		left: -20px;
		border-width: 0 0 20px 20px;
	}
	#message .detail h3 span::after{
		right: -20px;
		border-width: 20px 0 0 20px;
	}
	#message .detail p {
		line-height: 2;
		margin-bottom: 1.6em;
	}
	#message * + .btn-pic_voice{
		margin-top: 80px;
	}
}


/*
#staff
---------------------------*/
#staff {
	padding: 34px 0;
	background: #fefdf8;
}
#staff .staff-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#staff .staff-list li {
	width: 47.8%;
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}
#staff .staff-list li a{
	display: block;
	height: 100%;
	color: #1b1b1b;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
#staff .staff-list li figure {
	position: relative;
	width: 67%;
	padding-bottom: 67%;
	margin: 0 auto 1em;
	overflow: hidden;
	border-radius: 50%;
}
#staff .staff-list li figure img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}
#staff .staff-list li h2 {
	margin-bottom: 1em;
	text-align: center;
	font-weight: 700;
	font-size: 1.3rem;
}
#staff .staff-list li p {
	margin-bottom: 1.2em;
	font-size: 1.2rem;
}
#staff .staff-list li .btn-more{
	max-width: 200px;
	width: 100%;
	margin: auto auto 0;
}
#staff .staff-list li .btn-more a {
	padding: 0.6em 0;
}
@media screen and (min-width: 768px){
	#staff {
		padding: 80px 0;
	}
	#staff .staff-list {
		justify-content: center;
	}
	#staff .staff-list li {
		width: 20%;
		margin: 0 2% 30px;
	}
	#staff .staff-list li a:hover{
		opacity: 0.6;
	}
	#staff .staff-list li a figure img{
		transition:transform ease .3s
	}
	#staff .staff-list li a:hover figure img{transform: scale(1.1);}
	#staff .staff-list li h2 {
		font-size: 1.8rem;
	}
	#staff .staff-list li p {
		font-size: 1.4rem;
	}
}


/*
#keyword
---------------------------*/
#main .sec-inner-1100 +  .sec-inner-1100{
	margin-top: -34px;
}
#keyword{
	padding: 34px 0;
}
#keyword ul {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 -3px;
}
#keyword ul li{
	margin: 3px;
}
#keyword ul li a{
	padding: 0.4em 1em;
	display: block;
	border: 1px solid #737378;
	color: #1b1b1b;
	border-radius: 50px;
	text-decoration: none;
	font-size: 1.2rem;
}
@media screen and (min-width: 768px){
	#main .sec-inner-1100 +  .sec-inner-1100{
		margin-top: -80px;
	}
	#keyword{
		padding: 80px 0 100px;
	}
	#keyword ul {
		justify-content: center;
		margin: 0 -5px;
	}
	#keyword ul li{
		margin: 5px;
	}
	#keyword ul li a{
		font-size: 1.4rem;
	}
	#keyword ul li a:hover{
		background: #737378;
		color: #fff;
	}
}


/*
#works
---------------------------*/
#works {
	margin-bottom: 40px;
	padding: 34px 0;
	background: #fefdf8;
}
#works h3 {
	margin-bottom: 2em;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
}
#works ul.works-list {
	margin-bottom: 20px;
}
@media screen and (min-width: 768px){
	#works {
		margin-bottom: 80px;
		padding: 80px 0;
	}
	#works h3 {
		font-size: 2.4rem;
	}
}