@charset "utf-8";

	/* Slider */
	div.PanelSlider
	{
		transition			:	all 0.2s ease-out;
	}
	div.PanelSlider:has( .PanelSliderButtonPager )
	{
	}
	div.PanelSlider ul:first-child
	{
		list-style-type		:	none;
		margin			:	0px;
		padding			:	0px;
		text-align			:	center;
		opacity			:	0.0;
		transition			:	all 0.2s ease-out;
	}
	div.PanelSlider ul:first-child.slick-initialized
	{
		opacity			:	1.0;
	}
	div.PanelSlider ul:first-child li
	{
		margin			:	0px;
		padding			:	0px;
		text-align			:	center;
	}

	/* Arrow */
	.PanelSliderButtonArrow
	{
		position			:	absolute;
		cursor			:	pointer;
//		z-index			:	5000;
		z-index			:	90;
		background-repeat		:	no-repeat;
		background-position	:	center center;
		background-size		:	cover;
		border			:	none;
		border-radius		:	0px;
		opacity			:	0.5;
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderButtonArrow:hover
	{
		opacity			:	0.25;
	}
	.PanelSliderButtonArrow:active
	{
		scale				:	0.9;
	}
	.PanelSliderButtonArrowPrevious
	{
		top				:	50%;
		left				:	0px;
		background-image		:	url( '../image/common/Body/Slider/Arrow/Previous.webp' );
	}
	.PanelSliderButtonArrowNext
	{
		top				:	50%;
		right				:	0px;
		background-image		:	url( '../image/common/Body/Slider/Arrow/Next.webp' );
	}

	/* Pager */
	.PanelSliderButtonPager
	{
		position			:	absolute;
		display			:	block;
		bottom			:	-30px;
		width				:	100%;
		margin			:	0px;
		padding			:	0px;
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderButtonPager li
	{
		position			:	relative;
		display			:	inline-block;
		cursor			:	pointer;
		width				:	20px;
		height				:	20px;
		margin			:	0px 5px;
		padding			:	0px;
		vertical-align			:	middle;
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderButtonPager li button
	{
		display			:	block;
		width				:	inherit;
		height				:	inherit;
		padding			:	5px;
		cursor			:	pointer;
		font-size			:	0;
		line-height			:	0;
		color				:	transparent;
		background			:	transparent;
		border			:	none;
		outline			:	none;
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderButtonPager li button:before
	{
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderButtonPager li button:hover,
	.PanelSliderButtonPager li button:focus
	{
		outline			:	none;
	}
	.PanelSliderButtonPager li button:hover:before,
	.PanelSliderButtonPager li button:focus:before,
	.PanelSliderButtonPager li.slick-active button:hover:before
	{
		color				:	rgb(204,0,0);
	}
	.PanelSliderButtonPager li button:before
	{
		position			:	absolute;
		content			:	'•';
		top				:	0;
		left				:	0;
		width				:	inherit;
		height				:	inherit;
		font-family			:	'slick';
		font-size			:	10px;
		line-height			:	10px;
		text-align			:	center;
		color				:	rgba(0,0,0,0.25);
		-webkit-font-smoothing	:	antialiased;
		-moz-osx-font-smoothing	:	grayscale;
	}
	.PanelSliderButtonPager li.slick-active button:before,
	.PanelSliderButtonPager li.slick-active button:active:before
	{
		color				:	#a27d39;
	}
	.PanelSliderButtonPager .slick-dots li button:hover:before,
	.PanelSliderButtonPager .slick-dots li button:focus:before
	{
		color				:	rgb(204,0,0);
	}

	/* Index */
	.PanelSliderIndex
	{
		margin			:	1em 0px 0px 0px !important;
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderIndex li
	{
		line-height			:	0px;
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderIndex li img
	{
		cursor			:	pointer;
		transition			:	all 0.2s ease-out;
	}
	.PanelSliderIndex .slick-slide img
	{
		opacity			:	0.5;
		transform			:	scale(0.9);
		border			:	solid 1px rgba(0,0,0,0.25);
	}
	.PanelSliderIndex .slick-slide img:hover
	{
		opacity			:	1.0;
		transform			:	scale(1);
	}
	.PanelSliderIndex .slick-current img
	{
		opacity			:	1.0;
		transform			:	scale(1);
		border			:	solid 1px rgba(204,0,0,1);
	}

/*
======================================
Pc
======================================
*/
@media print, screen and (min-width:801px)
{
	/* Slider */
	div.PanelSlider:has( .PanelSliderButtonPager )
	{
		margin			:	0px 0px 60px 0px;
	}

	/* Arrow */
	.PanelSliderButtonArrowPrevious
	{
		margin-left			:	0px;
	}
	.PanelSliderButtonArrowNext
	{
		margin-right			:	0px;
	}
	.PanelSliderButtonArrowPrevious:hover
	{
		left				:	-5px;
	}
	.PanelSliderButtonArrowNext:hover
	{
		right				:	-5px;
	}
	.PanelSliderArrowOutside .PanelSliderButtonArrowPrevious
	{
		margin-left			:	-65px;
	}
	.PanelSliderArrowOutside .PanelSliderButtonArrowNext
	{
		margin-right			:	-65px;
	}
	.PanelSliderArrowInside .PanelSliderButtonArrowPrevious
	{
		margin-left			:	15px;
	}
	.PanelSliderArrowInside .PanelSliderButtonArrowNext
	{
		margin-right			:	15px;
	}
	.PanelSliderButtonArrowSmall .PanelSliderButtonArrowPrevious,
	.PanelSliderButtonArrowSmall .PanelSliderButtonArrowNext
	{
		width				:	30px;
		height				:	30px;
		margin			:	-15px 0px;
	}
	.PanelSliderButtonArrowSmall.PanelSliderArrowOutside .PanelSliderButtonArrowPrevious
	{
		margin-left			:	-35px;
	}
	.PanelSliderButtonArrowSmall.PanelSliderArrowOutside .PanelSliderButtonArrowNext
	{
		margin-right			:	-35px;
	}

	/* Index */
	.PanelSliderIndex li
	{
		margin			:	0px 4px !important;
	}
	.PanelSliderIndex li img
	{
		height				:	50px !important;
	}
}

/*
======================================
Pc Wide
======================================
*/
@media print, screen and (min-width:1281px)
{
	/* Arrow */
	.PanelSliderButtonArrow
	{
		width				:	50px;
		height				:	50px;
		margin			:	-25px 0px;
	}
}

/*
======================================
Pc Middle
======================================
*/
@media screen and (min-width:1025px) and (max-width:1280px)
{
	/* Arrow */
	.PanelSliderButtonArrow
	{
		width				:	50px;
		height				:	50px;
		margin			:	-25px 0px;
	}
}

/*
======================================
Pc Narrow
======================================
*/
@media screen and (min-width:801px) and (max-width:1024px)
{
	/* Arrow */
	.PanelSliderButtonArrow
	{
		width				:	40px;
		height				:	40px;
		margin			:	-20px 0px;
	}
}

/*
======================================
Smart Phone
======================================
*/
@media screen and (max-width:800px)
{
	/* Slider */
	div.PanelSlider:has( .PanelSliderButtonPager )
	{
		margin			:	0px 0px 50px 0px;
	}

	/* Arrow */
	.PanelSliderButtonArrow
	{
		width				:	30px;
		height				:	30px;
		margin			:	-15px 0px;
	}
	.PanelSliderArrowOutside .PanelSliderButtonArrowPrevious
	{
//		margin-left			:	-35px;
	}
	.PanelSliderArrowOutside .PanelSliderButtonArrowNext
	{
//		margin-right			:	-35px;
	}
	.PanelSliderArrowInside .PanelSliderButtonArrowPrevious
	{
		margin-left			:	5px;
	}
	.PanelSliderArrowInside .PanelSliderButtonArrowNext
	{
		margin-right			:	5px;
	}

	/* Index */
	.PanelSliderIndex li
	{
		margin			:	0px 3px !important;
	}
	.PanelSliderIndex li img
	{
		height				:	40px !important;
	}
}