@charset "UTF-8";

/******************************/
/***********BANNER*********/
/******************************/

.bannerSlideContainer .photoTrim *
{
	-ms-user-select: none; /* IE 10+ */
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.bannerSlider, .bannerSlideContainer
{
	width: 100%;
}

.bannerSlider .bannerChildren
{
	padding: 0rem;
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
/*	-webkit-align-items: center;
	align-items: center;*/
}

.bannerSlider .bannerChildren .photoWrapper > a,
.bannerSlider .bannerChildren .photoWrapper > span
{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: inherit;

/*	transform-origin: center center;
	transform: scale(.9);*/
	
/*	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;*/
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;

}

.bannerSlider .bannerChildren .photoWrapper > a
{
	overflow: hidden;
}

.bannerSlider .bannerChildren .photoWrapper > a,
.bannerSlider .bannerChildren .dragger
{
	aspect-ratio:2 / 1;
}

.bannerSlider .bannerChildren img
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
}
body:not(.ie) .bannerSlider .bannerChildren img
{
	max-width: 100%; 
}

body:not(.touch) .bannerSlider .bannerChildren:hover .photoWrapper .caption
{
/*	transform: scale(1.1);*/
}

/*.bannerSlider .bannerChildren.now .photoWrapper > a
{
	transform: scale(1);
}*/

.bannerSlider .bannerChildren .photoWrapper
{
	width: 100%;
	
	flex-wrap: nowrap;

/*	-webkit-align-items: center;
	align-items: center;*/
/*	-webkit-justify-content: center;
	justify-content: center;*/
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.bannerSlider .bannerChildren .photoWrapper.progress:after
{
	content: ""; 
	display: block;

	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid rgb(140, 140, 140);
	border-right-color: transparent;
	
	top: 50%;
	left: 50%;
	margin-top:-1.25rem;
	margin-left:-1.25rem; 

	animation: circle-spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}

.bannerSlider .bannerChildren .photoWrapper.progress img
{
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.bannerSlideContainer .photoTrim
{
/*	overflow-x:hidden;*/
	width: 100%;
	margin-bottom: 2rem;
}

.bannerSlideContainer .photoTrim .photoArea
{
/*	position: absolute;*/
} 

.bannerSlider .bannerChildren .photoWrapper .caption
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	background-color: rgba(0, 0, 0, .3);
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

.bannerSlider .bannerSlideContainer:not(.less) .bannerChildren .photoWrapper .caption
{
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.bannerSlider .bannerChildren .photoWrapper .caption > p:not(.status)
{
	font-family: Roboto-B, GG-B, 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 700;
	color: rgb(255, 255, 255);
	padding: 0 1rem;
	margin-bottom: 1rem;
}

.bannerSlider .bannerChildren .photoWrapper .caption > br
{
	display: none;
}

.bannerSlider .bannerChildren .photoWrapper .caption > p.category
{
	font-size: .8rem;
}

.bannerSlider .bannerChildren .photoWrapper .caption > p.status
{
	position: absolute;
	color: rgb(120, 120, 120);
	font-size: .8rem;
	font-family: Roboto-B, GG-B, 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 700;
	
	left: 0rem;
	top: 1rem;
	
	padding: .5em 1em;
	background-color: white;
}

.bannerSlider .bannerChildren .photoWrapper .caption > p.date
{
	font-family: 'lsm_font';
	text-transform: uppercase;
	white-space: nowrap;
	font-size: .7rem;
	line-height: 1;
	margin-bottom: 3em;
}

.bannerSlider .bannerChildren .photoWrapper .caption > p.date + p.date
{
	margin-top: -1.5em;
}

/*.bannerSlider .bannerChildren .photoWrapper .caption > p.status:before
{
	content:"";
	position: absolute;
	display: block;
	height: 5rem;
	width: 5rem;
	border: 3px dotted rgb(255, 255, 255);
	border-radius: 50%;
}*/

.bannerSlider .bannerSlideContainer .bannerChildren.now .photoWrapper .caption
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
body:not(.touch) .bannerSlider .bannerChildren:hover .photoWrapper .caption
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.bannerSlider .bannerChildren .dragger
{
	position:absolute;
	width:100%;
	top: 0;
}

.bannerSlideContainer .photoTrim .photoArea + div
{
/*	cursor: zoom-in;*/
/*	display: none;*/
}

.bannerSlideContainer .firstSrc
{
	overflow:hidden;
	line-height:0;
	width:0px;
	height:0px;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.bannerSlideContainer .photoDir
{
	width: 2rem;
	height: 2rem;
	color: rgb(0, 0, 0);
	border-radius: 50%;
	background-color: rgb(255, 255, 255);
	position:absolute;
	cursor:pointer;
	z-index:9999;
	top: calc(50% - 1.5rem);
	z-index: 9999;
	
	-webkit-transition:left, right .3s ease;
	-moz-transition:left, right .3s ease;
	-ms-transition:left, right .3s ease;
	-o-transition:left, right .3s ease;
	transition:left, right .3s ease;
	
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

.bannerSlider .bannerSlideContainer.less .photoDir.nouse
{
	display:none;
}

/*body:not(.touch) .bannerSlideContainer .photoDir:hover
{
	background-color: rgba(120, 120, 120, 1);
}*/

/*.bannerSlideContainer .photoDir:before
{
	content:"";
	position: absolute;
	display: block;
	width: 2em;
	height: 2em;
	box-sizing: border-box;
	border-radius: 50%;
}*/

/*.bannerSlideContainer .photoDir:after
{
	content: "";
	display: block;
	width: .75rem;
	height: .75rem;
	border-style: solid;
	border-width: 2px 2px 0 0;
}*/

.bannerSlideContainer .photoDirR{right: -5rem;}
.end .bannerSlideContainer .photoDirR:active{right: .25rem;}

.end .bannerSlideContainer .photoDirR
{
	right: .5rem;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
}

.bannerSlideContainer .photoDirL
{
	display:block;
	transform:rotate(180deg);
	box-shadow: -3px -3px 10px rgba(0, 0, 0, .3);
}
.bannerSlideContainer .photoDirL{left: -5rem;}
.end .bannerSlideContainer .photoDirL:active{left: .25rem;}
.end .bannerSlideContainer .photoDirL
{
	left: .5rem;
}


.bannerSlideContainer .photoDir > span
{
	position:absolute;
	right: 1.75rem;
	top: calc(50% - .5em);
	
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	align-items: center;
}

.bannerSlideContainer .photoDir > span:before
{
	content:"";
	display: block;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;

	right: 1em;
	width: .6em;
	height: .6em;
	border-top: 2px solid;
	border-right: 2px solid;
	transform: rotate(45deg) translateX(.7em)  translateY(-.65em);
}


body:not(.touch) .bannerSlider .bannerChildren:hover .dirLink
{
	color: rgb(50, 50, 50);
}

body:not(.touch) .bannerSlider .bannerChildren:hover  .dirLink._white
{
	color: rgb(255, 255, 255);
}

body:not(.touch) .bannerSlider .bannerChildren:hover .dirLink .dir > p
{
	background-image: linear-gradient(to right, rgb(50, 50, 50), rgb(50, 50, 50) 3px, transparent 3px, transparent 3px);
	animation-name: shrink_x;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

body:not(.touch) .bannerSlider .bannerChildren:hover .dirLink._white .dir > p
{
	background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255) 3px, transparent 3px, transparent 3px);
}

body:not(.touch) .bannerSlider .bannerChildren:hover .dirLink .dir > span
{
	background-color: rgb(50, 50, 50);
	animation-name: blink_3;
	animation-duration: .5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

body:not(.touch) .bannerSlider .bannerChildren:hover .dirLink._white .dir > span
{
	background-color: rgb(255, 255, 255);
}

.bannerSlider .bannerSlideContainer.less .photoDir,
.bannerSlider .bannerSlideContainer.less .sumnailWrapper
{
	display: block;
}

.bannerSlider .sumnailWrapper
{
	position: absolute;
	bottom: -2rem;
	width:100%;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.bannerSlider .sumanilContainer 
{
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.bannerSlider .sumanilContainer  > div
{
	width: 1.2rem;
	height: 1.2rem;
	cursor: pointer;
}

.bannerSlider .sumanilContainer  > div:before
{
	content:"";
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	top: calc(50% - 5px);
	left: calc(50% - 5px);
	background-color: rgb(200, 200, 200);
	
	border-radius: 50%;
	
/*	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;*/
}

.bannerSlider .sumanilContainer  > div.now:before,
.bannerSlider .sumanilContainer  > div:hover:before
{
	background-color: rgb(0, 0, 0);
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/


@media screen and  (max-width: 700px)
{
	.bannerSlider .bannerChildren .photoWrapper > a,
	.bannerSlider .bannerChildren .dragger
	{
		aspect-ratio:1.5 / 1;
	}
}

@media screen and (orientation: portrait)
{
	.bannerSlider .bannerChildren .photoWrapper > a,
	.bannerSlider .bannerChildren .dragger
	{
		aspect-ratio:1.1 / 1;
	}
}