@charset "UTF-8";

/****************************************
* 事故の看板修理 2025.6.29
* **************************************/

.illust-flow {
	padding: 30px 0 90px;
	background-color: #ffffff;
	background-image: radial-gradient(circle, #e8f3e1 3px, transparent 3px), radial-gradient(circle, #e8f3e1 3px, transparent 3px);
	background-position: 0 0, 25.5px 51px;
	background-size: 51px 102px;
}
.illust-flow .illust-items {
	width: 840px;
	margin: -32px auto 0;
	display: flex;
	flex-wrap: wrap;
}
.illust-flow .illust-items .illust-item {
	width: calc(50% - 38px);
	margin: 32px 19px 0;
	position: relative;
}
.illust-flow .illust-items .illust-item img {
	border-radius: 12px;
	border: 1px solid #568a35;
}
.illust-items .illust-item .item-caption {
	text-align: center;
	font-weight: 500;
	margin-top: 6px;
}


/* 保険使用する・しない */
.repair-insurance {
	padding: 90px 0 0;
}

.repair-insurance-tabs { /* タブ */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.repair-insurance-tabs .repair-insurance-tabsItem {
	display: block;
	width: calc(100%/2 - 120px);
	padding: 18px 18px;
	margin: 0 30px;
	line-height: 1.6;
	color: #565656;
	background: #ededed;
	text-align: center;
	font-weight: 600;
	border-radius: 120px;
	transition: all .7s ease;
}
.repair-insurance-tabs .repair-insurance-tabsItem:hover {
	opacity: 0.7;
	cursor: pointer;
}
.repair-insurance-tabs .repair-insurance-tabsItem span {
	display: inline-block;
	font-size: 1.2rem;
    margin: 0 3px;
}
.repair-insurance-tabs input[name="repair-insurance-tabsItem"] {
	display: none;
}
.repair-insurance-tabs input#tab01:checked~label#repair-insurance-nav01 {
	background: #568A35;
	color: #FFF;
}
.repair-insurance-tabs input#tab02:checked~label#repair-insurance-nav02 {
	background: #568A35;
	color: #FFF;
}

.repair-insurance-tabs .tab-content { /*タブコンテンツ*/
	display: none;
	width: 100%;
	margin-top: 60px;
	clear: both;
}
#tab01:checked~#repair-insurance-nav01-contents,
#tab02:checked~#repair-insurance-nav02-contents {
	display: block;
	animation: show1 .7s linear 0s;
	background: #568A35;
    padding: 60px;
	border-radius: 12px;
}
@keyframes show1 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#repair-insurance-nav01-contents {
	background: #FFF;
}
#repair-insurance-nav02-contents {
	background: #FFF;
}

.repair-insurance-tabs .repair-insurance-title {
	
}
.repair-insurance-tabs .repair-insurance-title span {
	display: inline-block;
    font-size: 1.5rem;
    margin: 0 3px;
}
.repair-insurance-tabs img.phone {
	float: left;
	margin: -90px 60px 30px 0;
}
.repair-insurance-tabs .repair-insurance-inbox {
	color: #FFF;
}
.repair-insurance-tabs .repair-insurance-inbox p {
	margin-bottom: 28px;
}
.repair-insurance-tabs .repair-insurance-inbox p span.num {
	display: inline-block;
    background: #FFF;
	color: #568A35;
    margin-right: 9px;
    border-radius: 4px;
    padding: 0 6px;
}
.repair-insurance-tabs .repair-insurance-inbox p:last-child {
	margin-bottom: 0;
}
.repair-insurance .repair-insurance-expensivecase {
	background: #F6FAF3;
	padding: 45px 380px 45px 45px;
	margin-top: 30px;
	border-radius: 12px;
	position: relative;
}
.repair-insurance .repair-insurance-expensivecase p.repair-insurance-expensivecaseTitle {
	font-weight: 600;
}
.repair-insurance .repair-insurance-expensivecase img.expensivecase {
	position: absolute;
	right: 30px;
    top: -90px;
	z-index: 1;
}
.repair-insurance .repair-insurance-expensivecase ul {
	margin: 0 0 0 1em;
	padding: 0;
}


/* 施工例 */
.repair-case {
	padding: 90px 0;
}
.repair-case .repair-case-items {


}
.repair-case .repair-case-item {
	margin-top: 60px;
	padding-bottom: 60px;
	border-bottom: 1px solid #eee;
}
.repair-case .repair-case-flex {
	display: flex;

}
.repair-case .repair-case-flex .repair-case-flex___num {
	width: 150px;
	background: #095034;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
}
.repair-case .repair-case-flex .repair-case-flex___num p.num {

}
.repair-case .repair-case-flex .repair-case-flex___num p.num span {
	display: block;
	text-align: center;
	font-size: 1.7rem;
	line-height: 1;
	border-bottom: 2px solid;
	margin-bottom: 6px;
	padding-bottom: 9px;
}
.repair-case .repair-case-flex .repair-case-flex___text {
	width: calc(100% - 150px);
	padding-left: 45px;
}
.repair-case .repair-case-flex .repair-case-flex___text .repair-case-item-title {

}
.repair-case .repair-case-flex .repair-case-flex___text .repair-case-item-title span {
	display: block;
	font-size: .6em;
	font-weight: 400;
}

.repair-case .repair-case-photos {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
}
.repair-case .repair-case-photos figure {
	display: block;
	width: calc(100% / 2 - 9px);
	margin-right: 0;
	margin-top: 18px;
	position: relative;
}
.repair-case .repair-case-photos figure:nth-child(odd) {
	margin-right: 18px;
}
.repair-case .repair-case-photos img {
	display: block;
	border-radius: 12px;
}
.repair-case .repair-case-photos figure figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	background: #095034;
	border-radius: 0 12px 0 12px;
	padding: 6px 18px;
	z-index: 1;
}
.repair-case p.scroll {
	display: none;
}

@media screen and (max-width: 1194px) {
	/* 保険ありなし */
	.repair-insurance-tabs .repair-insurance-tabsItem {
		width: calc(100% / 2 - 45px);
		margin: 0 18px;
	}
	.repair-insurance-tabs img.phone {
		width: 220px;
	}
	.repair-insurance .repair-insurance-expensivecase {
		padding: 45px 280px 45px 45px;
	}
	.repair-insurance .repair-insurance-expensivecase img.expensivecase {
		width: 220px;
		top: -60px;
	}
}
@media screen and (max-width: 834px) {
	/* 保険ありなし */
	.repair-insurance-tabs .repair-insurance-tabsItem {
		width: calc(100% / 2 - 30px);
		margin: 0 6px;
	}
}
@media screen and (max-width: 834px) {
	.illust-flow .illust-items {
		width: 100%;
	}
	.illust-flow .illust-items .illust-item {
		width: calc(50% - 9px);
		margin: 12px 18px 0 0;
	}
	.illust-flow .illust-items .illust-item:nth-child(even) {
		margin-right: 0;
	}
}
@media screen and (max-width: 768px) {
	/* 保険ありなし */
	.repair-insurance-tabs img.phone {
		width: 180px;
		margin: -90px 45px 30px -75px;
	}
	#tab01:checked~#repair-insurance-nav01-contents,
	#tab02:checked~#repair-insurance-nav02-contents {
		padding: 45px;
	}
	.repair-insurance .repair-insurance-expensivecase {
		padding: 45px 45px 45px 45px;
	}
	.repair-insurance .repair-insurance-expensivecase img.expensivecase {
		display: none;
	}

	/* 施工例 */
	.repair-case {
		padding: 75x 0;
	}
	.repair-case .repair-case-flex .repair-case-flex___num {
		width: 120px;
	}
	.repair-case .repair-case-flex .repair-case-flex___text {
		width: calc(100% - 120px);
		padding-left: 30px;
	}
	.repair-case .repair-case-photos {
		flex-wrap: nowrap;
		width: auto;
		overflow-x: scroll;
	}
	.repair-case .repair-case-photos figure {
		min-width: 540px;
	}
	.repair-case p.scroll {
		display: block;
		text-align: right;
		margin-top: 6px;
		font-size: .8em;
		color: #999;
		animation: blink .5s ease-in-out infinite alternate;
	}
	@keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}
}
@media screen and (max-width: 559px) {
	.illust-flow {
		padding: 30px 0 60px;
	}
	
	/* 保険ありなし */
	.repair-insurance-tabs .repair-insurance-title span {
		margin: 0 3px 0 0;
	}
	.repair-insurance-tabs {
		flex-direction: column;
	}
	.repair-insurance-tabs .repair-insurance-tabsItem {
		width: 100%;
		margin: 0;
	}
	.repair-insurance-tabs .repair-insurance-tabsItem#repair-insurance-nav02 {
		margin-top: 18px;
	}
	.repair-insurance-tabs .tab-content {
		margin-top: 30px;
	}
	#tab01:checked~#repair-insurance-nav01-contents,
	#tab02:checked~#repair-insurance-nav02-contents {
		padding: 30px;
		position: relative;
	}
	.repair-insurance-tabs img.phone {
		float: none;
		width: 120px;
		margin: 0;
		position: absolute;
		right: 30px;
        top: -30px;
	}
	.repair-insurance .repair-insurance-expensivecase {
		padding: 30px;
	}

	/* 被害があったとき */
	.repair-flow {
		padding: 60px 0;
	}
	.repair-flow .repair-items .repair-item {
		margin-top: 30px;
		padding: 45px 30px 20px;
	}
	
	/* 施工例 */
	.repair-case {
		padding: 45px 0;
	}
	.repair-case .repair-case-item {
		margin-top: 30px;
		padding-bottom: 30px;
	}
	.repair-case .repair-case-flex {
		flex-direction: column;
	}
	.repair-case .repair-case-flex .repair-case-flex___num {
		width: 90px;
		padding: 9px 0;
	}
	.repair-case .repair-case-flex .repair-case-flex___text {
		width: 100%;
		padding-left: 0;
		margin-top: 12px;
	}
	.repair-case .repair-case-flex .repair-case-flex___num p.num {
		font-size: .8em;
	}
	.repair-case .repair-case-flex .repair-case-flex___num p.num span {
		font-size: 1.4rem;
	}
	.repair-case .repair-case-flex .repair-case-flex___text .repair-case-item-title {
		margin-bottom: 12px;
	}
	.repair-case .repair-case-photos {
		width: calc(100% + 60px);
		margin-left: -30px;
	}
	.repair-case .repair-case-photos figure {
		min-width: 460px;
	}
	.repair-case .repair-case-photos figure,
	.repair-case .repair-case-photos figure:nth-child(odd) {
		margin-right: 3px;
	}
	.repair-case .repair-case-photos img {
		border-radius: 0;
	}
	.repair-case .repair-case-photos figure figcaption {
		border-radius: 0 12px 0 0;
	}
}
@media screen and (max-width: 430px) {
	.illust-flow {
		padding: 30px 0 45px;
	}
	.illust-items .illust-item .item-caption {
		font-size: .9em;
	}

	/* 保険ありなし */
	.repair-insurance-tabs img.phone {
		width: 105px;
		top: -22px;
		right: -10px;
	}
	.repair-insurance-tabs .repair-insurance-tabsItem {
		padding: 18px 9px;
	}
	

	/* 施工例 */
	.repair-case .repair-case-photos {
		width: calc(100% + 60px);
		margin-left: -30px;
	}
	.repair-case .repair-case-photos figure {
		min-width: 370px;
	}
}
@media screen and (max-width: 320px) {
	.illust-flow {
		padding: 30px 0 30px;
	}

	/* 被害があったとき */
	.repair-flow {
		padding: 30px 0;
	}

	/* 保険を使うときの注意 */
	.repair-insurance {
		padding: 30px 0;
	}
	.repair-insurance .repair-insurance-items {
		padding: 20px;
	}

	/* 台風対策 */
	.repair-countermeasure {
		padding: 30px 0;
	}

	/* 大切さ */
	.repair-maintenance {
		padding: 90px 0 30px;
	}
	.repair-maintenance ul.repair-maintenance-item li img {
		width: 120px;
	}

	/* 施工例 */
	.repair-case {
		padding: 30x 0;
	}
	.repair-case .repair-case-photos {
		width: calc(100% + 40px);
		margin-left: -20px;
	}
	.repair-case .repair-case-photos figure {
		min-width: 290px;
	}
}