@charset "UTF-8";

/* Slider */
.slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; }

/* Icons */
@font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('../webfonts/slick.eot'); src: url('../webfonts/slick.eot?#iefix') format('embedded-opentype'), url('../webfonts/slick.woff') format('woff'), url('../webfonts/slick.ttf') format('truetype'), url('../webfonts/slick.svg#slick') format('svg'); }

/* Arrows */
.slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; }
.slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .85; color: #004BC4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev { left: -25px; }
[dir='rtl'] .slick-prev { right: -25px; left: auto; }
.slick-prev:before { content: '←'; }
[dir='rtl'] .slick-prev:before { content: '→'; }
.slick-next { right: -25px; }
[dir='rtl'] .slick-next { right: auto; left: -25px; }
.slick-next:before { content: '→'; }
[dir='rtl'] .slick-next:before { content: '←'; }


/* インデックスページ トップ */
#TopSlider { position: relative; z-index: 1; }
#TopSlider img { width: 100%; }
#TopSlider .slick-dots { display: flex; justify-content: center; gap: 8px; color: #fff; padding: 8px 0 12px 0; }

#TopSlider .slick-dots li button { font-size: 0px; width: 12px; height: 12px; border-radius: 50px; background: #C9C9C9; display: inline-block; box-sizing: border-box; cursor: pointer; }
#TopSlider .slick-dots li.slick-active button { background: var(--MainColor); }

@media screen and ( 768px <= width ), print {
	#TopSlider .slick-dots { gap: 12px; }
	/* #TopSlider .slick-dots li button { width: 40px; } */
}


/* #TopSlider {
	& { position: relative; z-index: 1; }
	& img { width: 100%; }
	& .slick-dots {
		& { display: flex; justify-content: center; gap: 8px; color: #fff; background: var(--MainColor); padding: 8px 0 12px 0; }
		& li button { font-size: 0px; width: 24px; height: 4px; background: #3372D8; display: inline-block; box-sizing: border-box; cursor: pointer; }
		& li.slick-active button { background: #fff; }

		@media screen and ( 768px <= width ), print {
			& { gap: 8px; }
			& li button { width: 40px; }
		}
	}    
} */