@charset "utf-8";

/* -----------------------------------------------------------
    検索・お直し日目安
-------------------------------------------------------------- */
.search-guideline-wrap {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.s-g-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	background-color: #F1F0EF;
	border: solid 1px #A9876D;
	padding: 30px;
	width: 585px;
	position: relative;
}

.s-g-wrap .guideline-area {
	background-color: #F1F0EF;
}

.en-ttl {
	font-size: 3rem;
	font-weight: 500;
	text-align: center;
	font-family: "Libre Bodoni", serif;
	position: absolute;
	top: -17px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: 1;
}
.en-ttl::before {
	content: "";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 2.6rem;
    color: #A9876D;
    margin-right: 10px;
}
.keyword-search-area .en-ttl::before {
	content: '\f002';
}
.guideline-area .en-ttl::before {
	content: '\f073';
}

.en-ttl::after {
	content: "";
    width: 110%;
	height: 3px;
	top: 15px;
	background-color: #fff;
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: -1;
}

.free-btn-wrap {
	display: flex;
	align-items: flex-end;
}

.s-ttl {
	font-size: 2rem;
	font-weight: 500;
	margin: 20px auto;
}


/*検索*/
select {
	width: 475px;
	height: 65px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border: solid 1px #a9876d;
}

input {
	width: 400px;
	height: 65px;
    padding: 10px 20px;
    border: solid 1px #a9876d;
}

.search-btn input {
	width: 65px;
	height: 65px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border: solid 1px #a9876d;
}

.search-btn input[type="button"] {
    width: 65px;
	height: 65px;
    padding: 10px 20px;
    margin: 0 0 0 10px;
	background-color: #a9876d;
    cursor: pointer;
    background: url("../img/search-mark-white.png") no-repeat center #a9876d;
}

.search-free {
	/*margin-bottom: 5px;*/
}
.search-step p {
	font-weight: 700;
}
.search-step .num {
	font-family: "Libre Bodoni", serif;
	margin-right: 15px;
	color: #a9876d;
}

.search-step .required {
	color: red;
	margin-left: 15px;
	font-size: 1.4rem;
}


/*お直し目安*/
.s-g-wrap.guideline-area {
	background-color: #F9F5F2;
}

.search-guideline-wrap .ttl-time-wrap {
	text-align: center;
}

.search-guideline-wrap .ttl-time-wrap {
	text-align: center;
}

.repair-type-wrap {
	display: flex;
}

.now-time {
	display: flex;
	font-size: 2rem;
    font-weight: 500;
    gap: 20px;
}

.guideline {
	padding: 10px;
}

.guideline-area {
	background-color: #F9F5F2;
	border: solid 1px #4F361F;
	padding: 30px 20px 20px;
	position: relative;
}

.guideline-area .ttl-time-wrap {
	display: flex;
	align-items: center;
    gap: 0px;
    margin-bottom: 20px;
    flex-direction: column;
}

.guideline-area .ttl-time-wrap .ttl {
	font-size: 2.3rem;
}

.guideline-area .ttl-time-wrap .now-time {
	display: flex;
}

.repair-type-wrap {
	display: flex;
	justify-content: center;
    gap: 15px;
}

.guideline {
	padding: 30px 20px;
	background-color: #fff;
	width: 232px;
	border: solid 1px #4F361F;
	text-align: center;
}

.guideline .s-ttl {
	font-size: 1.8rem;
	padding-bottom: 20px;
	margin:0 0 20px 0;
	border-bottom: solid 1px #4F361F;
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

.guideline .s-ttl img {
	height: 23px;
}
.guideline.other-repair .s-ttl img {
    height: 21px;
}

.guideline .month,
.guideline .day {
	font-size: 3rem;
}

.guideline .m-d-w {
	letter-spacing: 0.1em;
}

@media screen and (max-width: 768px){
	.search-guideline-wrap {
		gap: 30px;
    	flex-direction: column;
		margin-top: 20px;
	}

	.s-g-wrap {
		gap: 10px;
		padding: 15px 10px;
		width: 100%;
		position: relative;
	}

	.en-ttl {
		font-size: 2rem;
		top: -11px;
	}
	.en-ttl::before {
		content: "";
		font-family: 'Font Awesome 5 Free';
		font-size: 1.6rem;
		margin-right: 10px;
	}

	.en-ttl::after {
		content: "";
		width: 110%;
		height: 3px;
		top: 8px;
	}

	.free-btn-wrap {
		display: flex;
	}

	.s-ttl {
		font-size: 1.8rem;
		margin: 10px auto;
	}


	/*検索*/
	select {
		width: 100%;
		height: 45px;
		padding: 10px 20px;
		margin-bottom: 10px;
		background-color: #fff;
	}

	input {
		width: 100%;
		height: 45px;
		padding: 10px 20px;
		margin-bottom: 0px;
	}
	
	.search-free-btn,
	.search-free {
		width: 100%;
	}

	.search-btn input {
		height: 45px;
		padding: 10px 20px;
		margin-bottom: 0px;
	}

	.search-btn input[type="submit"] {
		width: 45px;
		height: 45px;
		margin-left: 5px;
		background: #a9876d url("../img/search-mark-white.png") no-repeat center / 20px 20px;
		margin-bottom: 0px;
	}
	.search-btn input[type="button"] {
		width: 45px;
		height: 45px;
		margin-left: 5px;
		padding: 10px 20px;
		cursor: pointer;
		background: #a9876d url("../img/search-mark-white.png") no-repeat center / 20px 20px;;
	}
	
	
	.search-step p {
		font-size: 1.4rem;
	}
	.search-step .num {
		margin-right: 10px;
	}

	.search-step .required {
		margin-left: 10px;
		font-size: 1.2rem;
	}

	/*お直し目安*/
	.repair-type-wrap {
		display: flex;
	}

	.now-time {
		font-size: 1.6rem;
		gap: 10px;
	}

	.guideline {
		padding: 10px;
	}

	.guideline-area {
		padding: 15px 10px 15px;
		position: relative;
		gap: 0px;
	}

	.guideline-area .ttl-time-wrap {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 20px;
		flex-direction: column;
	}

	.guideline-area .ttl-time-wrap .ttl {
		font-size: 2.3rem;
	}

	.guideline-area .ttl-time-wrap .now-time {
		display: flex;
	}

	.repair-type-wrap {
		display: flex;
		justify-content: center;
		gap: 5px;
		width: 100%;
	}

	.guideline {
		padding: 10px 8px;
		width: 100%;
		text-align: center;
	}

	.guideline .s-ttl {
		font-size: 1.4rem;
		padding-bottom: 10px;
		margin:0 0 5px 0;
		gap: 0px;
		justify-content: center;
	}

	.guideline.other-repair .s-ttl img {
		height: 15px;
		margin: 0 10px 0 0;
	}
	.guideline .s-ttl img {
        height: 19px;
    }
	
	.m-d-w {
		font-size: 1.4rem;
	}

	.guideline .month,
	.guideline .day {
		font-size: 2rem;
	}

	.guideline .m-d-w {
		letter-spacing: 0.1em;
	}
}



/* -----------------------------------------------------------
    サービスリスト
-------------------------------------------------------------- */
/*.repair-menu-wrap {
	margin-bottom: 100px;
}*/

.service-menu-wrap {
	position: relative;
	margin-bottom: 100px;
}

.service-menu-wrap::before {
	content: "";
	width: calc(100% + 20%);
	height: calc(100% - 20%);
	background-color: #f9f5f2;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -2;
}

.service-list {
	display: flex;
	margin-top: 80px;
	justify-content: space-between;
	position: relative;
}

.service-list li {
	box-shadow: 0px -1px 20px -5px rgba(209, 204, 193, 1);
	width: calc((100% - 20px) / 2);
	background-color: #fff;
}

.service-list li a img {
	width: 100%;
	object-fit: cover;
}

.service-list li a .cate-ttl {
    padding: 30px 20px;
    font-size: 2rem;
    font-weight: 500;
}


.service-list.list02 {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
	justify-content: flex-start;
	gap: 20px 0px;
}

.service-list.list02 li {
	width: calc((100% - 40px) / 3);
	margin-right: 20px;
}

.service-list.list02 li:nth-child(3n) {
	margin-right: 0px;
}

.service-list li img {
	height: 250px;
}

/*-----ボタン----- */
.service-list li a {
	position: relative;
}

.cate-ttl {
	position: relative;
}

.service-list li a .btn-img{
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	right: 15px;
	transition: all .3s;
}

.service-list li a .btn-img img{
	width: 40px;
	height: 40px;
}

.service-list li a:hover .btn-img{
    right:10px;
	transition: all .3s;
}


@media screen and (max-width: 768px){
	.service-menu-wrap {
		margin-bottom: 40px;
	}
	
	.service-menu-wrap::before {
		content: "";
		width: calc(100% + 6%);
		height: calc(100% - 10%);
	}
	
	.service-list {
		margin-top: 40px;
		justify-content: space-between;
		position: relative;
		flex-direction: column;
		gap:10px;
	}

	.service-list li {
		width: 100%;
	}
	
	.service-list li a img {
		height: 150px;
	}

	.service-list li a .cate-ttl {
		padding: 15px 35px 15px 10px;
		font-size: 1.6rem;
	}

	.service-list.list02 {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		justify-content: flex-start;
		gap: 10px 0px;
		justify-content: space-between;
        flex-direction: row;
	}

	.service-list.list02 li {
		width: calc((100% - 10px) / 2);
		margin-right: 0px;
	}

	.service-list.list02 li:nth-child(3n) {
		margin-right: 0px;
	}

	.service-list li img {
		height: 250px;
	}
	
	/*-----ボタン----- */
	.service-list li a .btn-img{
		right: 10px;
	}

	.service-list li a .btn-img img{
		width: 15px;
		height: 15px;
	}

	.service-list li a:hover .btn-img{
		right:5px;
	}
	}