@charset "utf-8";
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

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

/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0em;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    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: 1.5em; /*20px*/
    line-height: 1;

    opacity: .75;
    color: white;

    -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: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0em;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 0.6em; /*5px*/
    line-height: 1.5em; /*20px*/

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '?';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/*************************************************
 slider.css
**************************************************/

.slide_box .slick-dotted.slick-slider,
.slick-slider .slick-list,
.slick-slider .slick-list .slick-track,
.slick-initialized .slick-slide { margin-bottom: 0; padding-bottom: 0;}
.slide_banner .wrap,
.slide_banner .autoplay { overflow: visible;}


/*
.slick-track { display: flex; align-items: stretch;}
.slide.slick-slide { float: none; height: auto;}
.slide a { display: flex; height: 100%; align-items: center;}
*/


/* ロード完了後表示 */
#singleitem { opacity: 0; transition: opacity .3s linear;}
#singleitem.slick-initialized { opacity: 1;}


/* スライダー幅 */
.slide_box { margin: 0 auto;}


/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before { color: #000;}


/*左右の矢印の位置を変える*/
.slick-next { right: 10px; z-index: 99;}
.slick-prev { left: 10px; z-index: 100;}


/*左右の矢印調整 - バナー画像*/
#autoplay { padding-bottom: 0; overflow: visible;}
.autoplay .slick-next { right: -16px;}
.autoplay .slick-prev { left: -16px;}
.autoplay .slick-arrow { border-radius: 0.6em;}
.autoplay .slick-arrow:hover,
.autoplay .slick-arrow:focus { background-color: #fff; box-shadow: inset 0px 0px 0px 2px #D90000;}


/*スライド数のドット*/
.slick-dots { bottom: 10px;}
.slick-dots li button { position: relative; box-sizing: border-box;}
.slick-dots li button:before {
	content: ""; position: absolute; height: auto; width: auto; top: 2px; bottom: 2px; left: 2px; right: 2px; color: #fff; border-radius: 100%; opacity: 0.8;
	border: 2px solid #144E27; background-color: rgba(255,255,255,1);
}
.slick-dots li.slick-active button:before { color: #fff; border: 2px solid rgba(255,255,255,1); background-color: #144E27; opacity: 1;}


/*スライド画像の横幅可変*/
.slide_box img { max-width: 100%; height: auto;}


/*バナー画像*/
#autoplay .slick-slide img { max-width: calc(90% - 4px); margin: 2px auto;}


/*再生停止ボタン*/
.slide_box { position: relative;}
.buttons { position: absolute; bottom: 0px; right: 12px; display: flex; justify-content: center; z-index: 98;}


.top_section.slide_banner { padding-bottom: 40px;}
.autoplay .buttons { bottom: -40px;}

.buttons .button {
	position: relative; height: 28px; width: 28px; margin: 10px 5px; padding: 0; text-indent: -1000em; transition: all 300ms ease; opacity: 0.8;
	border: 2px solid rgba(0,0,0,1); background-color: rgba(255,255,255,0.9); overflow: hidden;
}
.buttons .button:hover,
.buttons .button:focus { cursor: pointer; opacity: 1; transition: all 300ms ease;}
.buttons .button:before,
.buttons .button.js-stop:after { position: absolute; display: block; content: "";}

.buttons .button.js-play:before {
	top: 50%; left: 24%; margin-top: -7px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 13px solid #fff;
}
.buttons .button.js-stop:before,
.buttons .button.js-stop:after { top: 20%; bottom: 20%; left: 25%; width: 4px; background-color: #144E27;}
.buttons .button.js-stop:after { left: inherit; right: 25%;}
.buttons .button.js-play.active,
.buttons .button.js-stop.active{ opacity: 1; background-color: #144E27; border-color: rgba(255,255,255,1);}
.buttons .button.js-play.active:before { border-left-color: rgba(255,255,255,1);}
.buttons .button.js-stop.active:before,
.buttons .button.js-stop.active:after { background-color: rgba(255,255,255,1);}

.buttons .button.js-stop:hover,
.buttons .button.js-stop:focus,
.buttons .button.js-play:hover,
.buttons .button.js-play:focus { border-color: #D90000!important;}


/*次へ戻るボタン*/
.slick-arrow { height: 30px; width: 20px;}
.slick-prev:before,
.slick-next:before { display: block; width: 100%; height: 100%; background: url("../img/autoplay_arrow.png") center center no-repeat; opacity: 1;}
.slick-prev:before { transform: scaleX(-1);}
.slick-arrow:before { content: "";}
.slick-arrow:hover,
.slick-arrow:focus { opacity: 1;}


/*画像が1枚の時、再生ボタン切り替えボタンを非表示*/
.slide_box.disable .buttons,
.slide_box.disable .slick-dots {display: none;}


/*文字サイズを相対値に修正*/
.slick-prev, 
.slick-prev:before,
.slick-next,
.slick-next:before,
.slick-dots li button,
.buttons .button
{ font-size: 0.5em;}


@media screen and (min-width:0px) and (max-width:1074px) {
  /*バナー画像 - 左右の矢印分余白を確保*/
  .autoplay { margin-left: 30px; margin-right: 30px;}
  #autoplay .slick-next { right: -20px;}
  #autoplay .slick-prev { left: -20px;}
  
}

@media screen and (min-width:0px) and (max-width:660px) {
  
}

#top_contents {
	padding: 0;
}

#singleitem {
	max-height: 670px;
	overflow: hidden;
}
	.slick-slide {
		width: 100vw;
	}
	.slick-dots {
		z-index: 98;
	}
	.slide img {
		width: 100%;
		min-width: 1300px;
		max-width: none;
	}
	.slick-dots li button::before {
		border: none;
	}
	.slick-dots li.slick-active button::before {
		border: none;
		background: #002251;
	}
	.buttons .button.js-play, .buttons .button.js-stop {
		color: #fff;
		border: 1px #FFF solid;
		border-radius: 4px;
		background: #383838;
	}
	.buttons .button.js-play.active, .buttons .button.js-stop.active {
		border: 1px #FFF solid;
		border-radius: 4px;
		background: #383838;
	}
	.buttons .button.js-stop::before, .buttons .button.js-stop::after {
		background: #FFF;
	}

.top_section.slide_banner {
	padding: 0;
	background: url("../img/slide_banner_bg.png") center center repeat-x;
	background-size: cover;
}
	.top_section.slide_banner .wrap {
		max-width: 1190px;
		margin: 0 auto;
		padding: 25px 40px 32px;
	}
		.top_section.slide_banner .ttl {
			line-height: 1;
			margin: 0 0 21px;
			font-weight: normal;
			font-size: 140%;
			text-align: center;
			text-shadow: 2px 2px 4px #FFF,2px -2px 4px #FFF,-2px -2px 4px #FFF,-2px 2px 4px #FFF;
		}
			.top_section.slide_banner .ttl img {
				margin-right: 6px;
				vertical-align: bottom;
			}
		.top_section.slide_banner .slide_box {
			padding: 13px 17px;
			background: #FFF;
		}
			.top_section.slide_banner .buttons {
				bottom: -30px;
				padding: 0;
			}
			.top_section.slide_banner #autoplay {
				padding: 0;
			}
				.top_section.slide_banner .slick-arrow {
					width: 23px;
					height: 41px;
				}
				.top_section.slide_banner .slick-prev::before,
				.top_section.slide_banner .slick-next::before {
					background-image: url("../img/slide_banner_arrow.png");
				}
				.top_section.slide_banner .slide img {
					width: auto;
					min-width: 0;
				}
				.top_section.slide_banner .autoplay .slick-prev {
					left: -55px;
				}
				.top_section.slide_banner .autoplay .slick-next {
					right: -55px;
				}
				.top_section.slide_banner .autoplay .slick-arrow:hover,
				.top_section.slide_banner .autoplay .slick-arrow:focus {
					background-color: transparent;
					box-shadow: none;
				}

				
.size-freedom{
	width: 980px;
	margin: 0 auto;
}

@media screen and (max-width:1074px) {
	#autoplay .slick-prev {
		left: -60px;
	}
	#autoplay .slick-next {
		right: -60px;
	}
	
.size-freedom{
	width: auto;
	margin: 0;
}
}

@media screen and (max-width:880px) {
	.top_section.slide_banner .wrap {
		padding: 25px 0 32px;
	}
		.top_section.slide_banner .ttl {
			margin: 0 0 18px;
			font-size: 120%;
		}
			.top_section.slide_banner .ttl img {
				height: 19px;
			}
		.top_section.slide_banner .slide_box {
			margin: 0 26px;
			padding: 13px 10px;
		}
			.top_section.slide_banner .buttons {
				display: none;
			}
			#autoplay .slick-prev {
				left: -28px;
				width: 13px;
			}
			#autoplay .slick-next {
				right: -28px;
				width: 13px;
			}
				#autoplay .slick-prev::before,
				#autoplay .slick-next::before {
					background-size: 100% auto;
				}
			.top_section.slide_banner .wrap .slick-slide {
				margin: 0 5px;
			}

}

@media screen and (max-width:580px) {
	.top_section.slide_banner {
		background-size: inherit;
		background-position: top;
	}
}

@media screen and (max-width:480px) {
	.slick-dots {
		bottom: 0;
	}
	/*---------------------------*/

	.top_section.slide_banner .wrap .slick-slide img {
		height: 60px;
	}
}