@charset "UTF-8";

/* Slide
------------------------- */
:root {
	--navy: #18275c;
}
.slideOuter {
	width: 1000px;
	margin: auto;
	border: 0;
}
.slide {
	position: relative;
	width: 1000px;
	background-color: transparent;
}
.slides { /* スライド用ulタグ */
	overflow: hidden;
	z-index: 4;
}
.slides,
.slides__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}
.slides__item { /* スライド用liタグ */
	transition: left 1.1s ease;
	display: none;
	overflow: hidden;
	line-height: 0;
}
.slides__item--photo {
	opacity: 1;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
	width: 100%;
}

/* コントローラー */
.controller {
	z-index: 3;
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	width: 1000px;
}
.forward,
.backward {
	position: relative;
	flex: 0 0 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.forward__button,
.backward__button {
	overflow: visible;
	cursor: pointer;
	width: 18px;
	height: 30px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	line-height: 0;
	font-size: 0;
}
.forward__button {
	position: relative;
	left: 36px;
}
.backward__button {
	position: relative;
	left: -36px;
}

/* ページャー */
.anchors {
	position: relative;
	flex: 1 1 calc( 100% - 60px );
	display: flex;
	justify-content: center;
	align-items: end;
}
.anchors__inner {
	display: none;
	position: relative;
	bottom: -40px;
	width: 100%;
	text-align: center;
	padding: 0 0 13px;
}
.setNumber { /* ページネーションの「○」 */
	transition: 0.4s;
	overflow: hidden;
	cursor: pointer;
	display: inline-block;
	width: 10px;
	height: 10px;
	padding: 0;
	margin: 0 5px;
	background: none;
	border: solid 1px var(--navy);
	border-radius: 5px;
	text-indent: 1000px;
	line-height: 0;
	font-size: 0;
}
.setNumber.nowAnc {
	background-color: var(--navy);
}

/* ---------------------------------
width <= 1080px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:1080px) {
	.slideOuter,
	.slide,
	.controller {
		width: 660px;
		margin: auto;
	}

/* less 1080 */
}

/* ---------------------------------
width <= 740px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:740px) {
	.slideOuter,
	.slide,
	.controller {
		width: 320px;
		margin: auto;
	}

/* less 740 */
}

/* ---------------------------------
width <= 390px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:390px) {
	.forward__button,
	.backward__button {
		width: 11px;
		height: 19px;
	}
	.forward__button img,
	.backward__button img {
		width: 11px;
		height: 19px;
	}
/* less 390 */
}

/* ---------------------------------
width <= 374px
--------------------------------- */
@media screen and (min-width:1px) and (max-width:374px) {
	.backward,
	.forward {
		display: none;
	}
/* less 374 */
}
/* End of CSS */