@charset "utf-8";

/*****************

スライドショー

*****************/
.slideshow1 {
overflow: hidden;
position: relative;
margin: 0 auto;
}

.slideshow1_body {
margin: 0;
padding: 0;
width: 100%;
height: 50vh;
position: relative;
overflow: hidden;
}

@media only screen and (min-width: 768px) {
	.slideshow1_body {
		height: 60vh;
	}
}

.slideshow1 .slide-wr {
	position: relative;
	margin-bottom: 50px;
}
.slideshow1 .slide-content {
	position: absolute;
	margin: 0;
	bottom: 1em;
	left: 1em;
	z-index: 999;
	text-shadow: 0 0 6px black;
	color: white;
}

.slideshow1 .slide-wr .slide-content > p {
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1.5;
	margin: 0;
}

.slideshow1 .slide-wr .slide-content > .strong {
	background-color: #00008B;
	padding: 0px 4px;
	margin: 4px 0 0 0;
	width: fit-content;
}

.slideshow1_body li {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
list-style: none;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 1000ms linear;
}

.slideshow1_body li:nth-of-type(1) {
background-image: url("repair01.jpg");
}

.slideshow1_body li:nth-of-type(2) {
background-image: url("repair02.jpg");
}

.slideshow1_body li:nth-of-type(3) {
background-image: url("repair03.jpg");
}

.slideshow1_body li:nth-of-type(4) {
background-image: url("repair04.jpg");
}

.slideshow1_body li .content {
color: white;
position: absolute;
bottom: 20%;
left: 32px;
z-index: 9999;
font-size: 1.5em;
font-weight: bold;
}


@media only screen and (min-width: 768px) {
	.slideshow1 .slide-wr > p {
		left: unset;
		bottom: 1em;
		right: 1em;
	}
	.slideshow1_body li .content {
   	font-size: 3em;
	}
}

/* インジケーター */
.carousel_indicator {
position: absolute;
display: flex;
align-items: center;
height: 45px;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}

.carousel_indicator > * {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 100%;
border: 2px solid #044E99;
margin: auto 8px;
cursor: pointer;
background: white;
}

.carousel_indicator .current_item {
    background: #044E99;
}


/* アロー */
.arrow {
    width: 45px;
    height: 45px;
	background-size: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    cursor: pointer;
}

.slideshow1 .carousel_arrows {
	position: absolute;
	width: 235px;
	height: 45px;
	right: 0;
	bottom: -50px;
	left: 0;
	margin: 0 auto;
}

.arrow_L {
	left: 0;
   background-image: url("carousel-arrow-l.svg");
}

.arrow_R {
	right: 0;
	background-image: url("carousel-arrow-r.svg");
}

/********
repair slideshow2
*********/
.repair-wr {
	width: 100%;
	height: 750px;
	position: relative;
	overflow-x: hidden;
}

.repair-list {
	width: 400%;
	height: 100%;
	display: flex;
}

.repair-list li {
	width: 25%;
	height: 100%;
	box-sizing: border-box;
	margin: 0 auto;
}

.slide1 {
	transform: translateX(0);
}

.slide2 {
	transform: translateX(-25%);
}

.slide3 {
	transform: translateX(-50%);
}

.slide4 {
	transform: translateX(-75%);
}

.repair-wr .btns {
	display: flex;
	align-items: center;
	justify-content:space-evenly;
	position: absolute;
	max-width: 240px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

.repair-wr .carousel_indicator {
	bottom: 6px;
	position: unset;
	transform: translateX(0);
}

.repair-wr .arrow {
	top: auto;
	background-image: url("carousel-arrow-blue.svg");
	position: unset;
}

.repair-wr .arrow_L {
	margin: 45px 0 0;
}

.repair-wr .arrow_R {
	rotate: 180deg;
	margin: 0 0 45px;
}

@media(min-width:768px){
	.repair-wr {
		position: unset;
		overflow-x: unset;
		height: auto;
	}

	.repair-list {
		flex-direction: column;
		width: 100%;
		gap: 2em;
	}

	.repair-list li {
		width: 100%;
	}

	.slide2,.slide3,.slide4 {
		transform: translateX(0);
	}

	.repair-wr .arrow,.repair-wr .carousel_indicator {
		display: none;
	}
}