@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*color*/
/*font*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
/*layout*/
/*----------------------------------------------------
	共通
----------------------------------------------------*/
.slider-container { display: none; position: relative; }
.slider-container.initialized { display: block; }

.slick-slider { font-family: "Noto Sans JP", "HiraKakuProN-W3", "HiraKakuProN-W6", sans-serif; font-weight: 500; font-size: 15px; margin-bottom: 0; }

.slick-arrow { position: absolute; top: 50%; width: 16px; height: 50px; margin-top: -25px; /* 高さの半分だけネガティブマージン */ cursor: pointer; z-index: 10; /* 重要 */ }
.slick-arrow::before { display: none; }

.slick-prev, .slick-prev:hover, .slick-prev:focus { left: 20px; background-image: url("../com/sl_arrow_prev.png"); }

.slick-next, .slick-next:hover, .slick-next:focus { right: 20px; background-image: url("../com/sl_arrow_next.png"); }

.slick-dots { position: absolute; width: 100%; bottom: 10px; text-align: center; font-size: 0; margin: 0px; padding-left: 20px; padding-right: 20px; }
.slick-dots li { display: inline-block; margin: 0 0 0 3px; width: 3px; height: 3px; }
.slick-dots li:first-child { margin-left: 0; }
.slick-dots li button { font-size: 0; position: relative; width: 3px; height: 3px; padding: 0; overflow: visible; }
.slick-dots li button::before { width: 3px; height: 3px; background-color: #000000; font-size: 0; opacity: 1; position: absolute; top: 0; left: 0; opacity: 0.5 !important; border-radius: 100%; }
.slick-dots li.slick-active button:before { opacity: 1 !important; }

.dots_l .slick-dots { text-align: left; }

.dots_r .slick-dots { text-align: right; }

.dots_out .slick-dots { position: relative; bottom: 0; padding: 0; margin-top: 20px; }

.arrow_slider .slick-slider { margin-bottom: 0; }
.arrow_slider .slider-arrows { margin-top: -40px; position: relative; z-index: 1; width: 80px; margin-left: auto; margin-right: auto; }

.dots-arrows { margin-top: 7px; max-width: 1190px; margin-left: auto; margin-right: auto; }
.dots-arrows > * { display: inline-block; vertical-align: middle; font-size: 0; }
.dots_r .dots-arrows { text-align: right; }
.dots-arrows .slick-arrow { position: relative; top: auto; width: 17px; height: 9px; margin: 0; z-index: 0; }
.dots-arrows .slick-prev, .dots-arrows .slick-prev:hover, .dots-arrows .slick-prev:focus { left: auto; right: auto; background: url("../com/arw_b.png") no-repeat center center/contain; transform: scale(-1, 1); }
.dots-arrows .slick-next, .dots-arrows .slick-next:hover, .dots-arrows .slick-next:focus { left: auto; right: auto; background: url("../com/arw_b.png") no-repeat center center/contain; transform: none; }
.dots-arrows .slick-dots { position: relative; bottom: 0; padding: 0; width: auto; margin: 0 10px; }

.dots_white .slick-dots li button::before { background-color: #FFF; }
.dots_white .dots-arrows .slick-prev, .dots_white .dots-arrows .slick-prev:hover, .dots_white .dots-arrows .slick-prev:focus { background: url("../com/arw_w.png") no-repeat center center/contain; }
.dots_white .dots-arrows .slick-next, .dots_white .dots-arrows .slick-next:hover, .dots_white .dots-arrows .slick-next:focus { background: url("../com/arw_w.png") no-repeat center center/contain; }

.sl_2000 { width: 2000px; }

.sl_1780 { width: 1780px; }

.sl_1190 { width: 1190px; }

.sl_990 { width: 990px; }

.sl_950 { width: 950px; }

.sl_550 { width: 550px; }

.sl_responsive { width: 100%; }

#sl_attraction { position: relative; }
#sl_attraction .slick-arrow { width: 45px; height: 45px; margin-top: -23px; /* 高さの半分だけネガティブマージン */ }
#sl_attraction .slick-prev, #sl_attraction .slick-prev:hover, #sl_attraction .slick-prev:focus { left: 0; background-image: url("../com/sl_arrow_prev_circle.png"); }
#sl_attraction .slick-next, #sl_attraction .slick-next:hover, #sl_attraction .slick-next:focus { right: 0; background-image: url("../com/sl_arrow_next_circle.png"); }
#sl_attraction .slick-slide { width: 400px; height: 550px; margin: 0 50px; display: flex; align-items: center; }
#sl_attraction .slick-slide figure { width: 400px; height: 400px; flex-shrink: 0; }
#sl_attraction .slick-slide figure img { width: 100%; }
#sl_attraction .slick-slide .flex { justify-content: flex-end; }
#sl_attraction .slick-slide .text { visibility: hidden; opacity: 0; width: 0; height: 0; transition: opacity .2s; align-self: center; padding: 20px 50px; }
#sl_attraction .slick-slide .text header { font-family: Arial, "Noto Sans JP", "HiraKakuProN-W3", "HiraKakuProN-W6", Roboto, sans-serif; margin-bottom: 12px; }
#sl_attraction .slick-slide .text header h4 { font-weight: bold; font-size: 20px; line-height: 1.5em; margin-bottom: 14px; }
#sl_attraction .slick-slide .text header h4::before { display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em); content: ""; }
#sl_attraction .slick-slide .text header h4::after { display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em); content: ""; }
#sl_attraction .slick-slide .text header p { font-size: 18px; }
#sl_attraction .slick-slide .text p { line-height: 2; }
#sl_attraction .slick-slide .text p::before { display: block; width: 0; height: 0; margin-top: calc((1 - 2) * .5em); content: ""; }
#sl_attraction .slick-slide .text p::after { display: block; width: 0; height: 0; margin-bottom: calc((1 - 2) * .5em); content: ""; }
#sl_attraction .slick-slide.slick-center { width: 1190px; height: 550px; margin: 0 50px; }
#sl_attraction .slick-slide.slick-center .flex { width: 1190px; padding: 0 20px; }
#sl_attraction .slick-slide.slick-center figure { width: 550px; height: 550px; }
#sl_attraction .slick-slide.slick-center figure img { width: 100%; }
#sl_attraction .slick-slide.slick-center .text { width: 640px; height: auto; visibility: visible; opacity: 1; transition-delay: .5s; }
#sl_attraction .slider-arrows { position: absolute; width: 1190px; margin-left: auto; margin-right: auto; top: 50%; left: 0; right: 0; }
#sl_attraction .slider-arrows .arrows { position: relative; }
#sl_attraction .slider-arrows .slick-arrow { position: absolute; }

/*# sourceMappingURL=slider.css.map */