@charset "utf-8";

/*
************************************************************************
* カルーセル基本スタイル
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.carousel
{
	display:none;
}
.carousel .carousel-parent
{
	margin:0;
	padding:0;
	list-style:none;
}
.carousel .carousel-parent.slick-dotted {
    margin-bottom: 2em;
}
.carousel .carousel-parent .carousel-item
{
	display:block;
	margin:0;
	padding:0;

	margin-left:0.5em;
	margin-right:0.5em;
}
.carousel .carousel-parent .carousel-item a
{
	display:block;
}
.carousel .carousel-parent .carousel-item a img {
    border-radius: 0.5em;
}

.carousel-item
{
	width:calc(347px - 0.5em);
}
.carousel-item.carousel-item-photo-gallery {
    width:calc(300px - 0.5em);
}



.carousel .slick-prev,
.carousel .slick-next
{
	z-index:100;

	overflow:hidden;
	position:absolute;

	top:50%;

	width:2.5em;
	height:2.5em;

	line-height:0;
	color:transparent;

	background-color:rgba(0,0,0,0.6);
	border-radius:100%;
	border:0px solid transparent;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.carousel .slick-prev
{
	left:0;
	transform:translate(-50%, -50%);
}
.carousel .slick-next
{
	right:0;
	transform:translate(50%, -50%);
}
.carousel .slick-prev:before,
.carousel .slick-next:before
{
	content:"";
	display:block;

	position:absolute;
	top:50%;
	left:50%;


	width:1em;
	height:1em;

	background-colro:transparent;
	border:0px solid transparent;
}
.carousel .slick-prev:before
{
	border-bottom:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	transform:translate(-30%, -50%) rotate(45deg);
}
.carousel .slick-next:before
{
	border-top:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;
	transform:translate(-70%, -50%) rotate(45deg);
}
.carousel .slick-prev:hover,
.carousel .slick-next:hover
{
	background-color:#3885FF;
}

.carousel .slick-dots
{
    position: absolute;
    bottom: -2.0em;

    display: block;

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

    list-style: none;

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

    display: inline-block;

    width: 0.8em;
    height: 0.8em;
    margin: 0 0.25em;
    padding: 0;

    cursor: pointer;
}
.carousel .slick-dots li button
{
    line-height: 1;

    display: block;

    width: 0.8em;
    height: 0.8em;
    padding: 0.25em;

    cursor: pointer;

    overflow:hidden;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.carousel .slick-dots li button:hover,
.carousel .slick-dots li button:focus
{
    outline: none;
}
.carousel .slick-dots li button:hover:before,
.carousel .slick-dots li button:focus:before
{
    opacity: 1;
}
.carousel .slick-dots li button:before
{
    content: "";

    font-family: 'slick';
    line-height: 1;

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

    width: 0.8em;
    height: 0.8em;

    content: "";

    background-color: rgba(0,0,0,0.6);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    border-radius:100%;
}
.carousel .slick-dots li.slick-active button:before
{
    opacity: 1.00;
    background-color:#3885FF;
}


/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.carousel-item
	{
		/*width:calc(50vw - 1em);*/
        width:calc(65vw - 1em);
	}
	.carousel .slick-prev,
	.carousel .slick-next
	{
		width:2.0em;
		height:2.0em;
	}
	.carousel .slick-prev:before,
	.carousel .slick-next:before
	{
		width:0.8em;
		height:0.8em;
	}
    .carousel-item.carousel-item-photo-gallery {
        width:calc(50vw - 0.5em);
    }
}