@charset "UTF-8";

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

#top
{
	background-color: rgba(34, 172, 56, 1);
}

#slideContainer
{
	margin-top: 8rem;
	margin-bottom: 2rem;

	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;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;	
}

.slideWrapper
{
	position: relative;
	margin-bottom: 0rem;
	width: 100%;
/*	max-width: 1200px;*/
	box-sizing: border-box;	
/*	padding: 0 50px;*/
	padding-right: 0rem;
}

#bannerSlider
{
	width: 100%;
	position: relative;
	z-index: 0;
/*	background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);*/
/*background: linear-gradient(27deg, rgba(180, 190, 190, .1), rgba(180, 190, 190, .2));*/
	background-color: rgba(255, 255, 255, 0);
}

#bannerSlider .photoTrim
{
	width: 100%;
}

#bannerSlider .bannerSlideContainer
{
	position: relative;
	width: 100%;
}

#bannerSlider .bannerChildren
{
	position: relative;
	box-sizing: border-box;
	padding: 2rem;
	float: left;

	width: 100%;
	height: 100%;
	
	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;
	
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-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
{
	width: 100%;
	position: relative;
	padding: 0;
	box-sizing: border-box;

	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;
	
	-webkit-flex-wrap:nowrap;
	-moz-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

#bannerSlider .bannerChildren .photoWrapper a
{
	position:relative;
}

#bannerSlider .bannerChildren .photoWrapper a > img
{
    max-width:100%;

/*	-webkit-filter: brightness(90%);
	-moz-filter: brightness(90%);
	-ms-filter: brightness(90%);
	-o-filter: brightness(90%);
	filter: brightness(90%);*/
	
	transform-origin: center center;
	transform: scale(.9, .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;
}

#bannerSlider .bannerChildren.now .photoWrapper a > img, #bannerSlider .bannerChildren .photoWrapper a:hover > img
{
/*	-webkit-filter: brightness(100%);
	-moz-filter: brightness(100%);
	-ms-filter: brightness(100%);
	-o-filter: grayscale(100%);
	filter: brightness(100%);*/
	
	box-shadow: 0px 5px 20px rgba(0, 0, 0, .7);
}

#bannerSlider .bannerChildren.now .photoWrapper a > img
{
	transform-origin: center center;
	transform: scale(1, 1);
}

#bannerSlider .bannerChildren .photoWrapper a > .caption
{
	color: rgba(255, 255, 255, 0);
	font-size: .9rem;
	font-family: roboto-B, GG-B, sans-serif;
	font-weight: 700;
	text-align: center;
	margin: 1em 0;
}

#bannerSlider .bannerChildren.now .photoWrapper a > .caption, #bannerSlider .bannerChildren .photoWrapper a:hover > .caption
{
	color: rgba(255, 255, 255, 1);
}

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

	box-sizing:border-box;
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid rgb(244, 232, 0);
	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;
}
/*#bannerSlider .bannerChildren .photoWrapper.load img
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
#bannerSlider .bannerChildren .photoWrapper.load img
{
	max-width: 100%;
	height: auto;
	
	-webkit-transition:opacity .3s ease;
	-moz-transition:opacity .3s ease;
	-ms-transition:opacity .3s ease;
	-o-transition:opacity .3s ease;
	transition:opacity .3s ease;
}*/

#slideContainer .sumnailWrapper
{
	box-sizing: border-box;
	margin-top: 2rem;
	margin-bottom: .5em;
}

#slideContainer .sumnailWrapper .sumanilContainer
{
	position: relative;
	margin: 0 2rem;
	
	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;

	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

#slideContainer .sumnailWrapper .sumanilContainer > div
{
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
	width: 2rem;
	height: 1rem;
	margin: 0 .1em;
}

#slideContainer .sumnailWrapper .sumanilContainer.nouse > div
{
	cursor: auto;
}

#slideContainer .sumnailWrapper .sumanilContainer > div:after
{
	content:"";
	position: absolute;
	width:100%;
	top: calc(50% - 2px / 2);
	height: 2px;
	background-color: rgba(100, 110, 110, .5);
}

#slideContainer .sumnailWrapper .sumanilContainer > div
{
	width: auto;
	flex: 1 1 auto;
}

#slideContainer .sumnailWrapper .sumanilContainer > div.now:after
{
	top: calc(50% - 4px / 2);
	height: 4px;
	background-color: rgba(244, 232, 0, 1);
}

#slideContainer .sumnailWrapper .sumanilContainer.nouse  > div.now:after
{
	background-color: rgba(100, 110, 110, .5);
	height: 2px;
}

body:not(.touch) #slideContainer .sumnailWrapper .sumanilContainer:not(.nouse) > div:hover:after
{
	top: calc(50% - 4px / 2);
	height: 4px;
	background-color: rgba(100, 110, 110, 1);
}

.cap
{
	position: relative;
	padding-bottom: 2em;
	min-height: 3rem;
	
	box-sizing: border-box;

/*	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;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;*/
	
	display: none;
}
.cap p
{
	position: relative;
	color: rgba(255, 255, 255, 1);
	font-size: .9rem;
	font-family: roboto-B, GG-B, sans-serif;
	font-weight: 700;
}
/*.cap.on p:before
{
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	top: calc(.3em / 1.41 + .35em);
	border-style: solid;
	border-width: 0 .35em .6em .35em;
	border-color: transparent transparent rgb(100, 110, 110) transparent;
}*/

.cap.on
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.cap.off
{	
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.cap .photoCredit{font-size: .7em; margin-left: 1em;}
.cap .photoCredit:before{content: "© ";}

#slideContainer .bannerSlideContainer .photoDir
{
	top: auto;
	margin-top: 0;
	height: 2rem;
	bottom: -3.5rem;
	color: rgb(100, 110, 110);
}

.bannerSlideContainer .photoDir
{
	right: 0;
}

.bannerSlideContainer .photoDirL
{
	left: 0;
}

.bannerSlideContainer .photoDir:after
{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - .75rem);
	width: 0;
	height: 0;
	border-style: solid;

	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}

.bannerSlideContainer .photoDirR:after
{
	right: .7em;
	border-width: .75rem 0 .75rem 1.2rem;
	border-color: transparent transparent transparent rgba(34, 172, 56, 1);
}

.bannerSlideContainer .photoDir.nouse
{
	cursor: auto;
}
.bannerSlideContainer .photoDir.nouse:after
{
	filter:alpha(opacity=30);
	-moz-opacity: .3;
	opacity: .3;
}

.bannerSlideContainer .photoDirR:not(.nouse):hover:after
{
	left: auto;
	right: .25rem;
}
.bannerSlideContainer .photoDirL:after
{
	left: .7em;
	border-width: .75rem 1.2rem .75rem 0;
	border-color: transparent rgba(34, 172, 56, 1) transparent transparent;
}
.bannerSlideContainer .photoDirL:not(.nouse):hover:after
{
	right: auto;
	left: .25rem;
}

/**********************************************************************/
/********************************* Icons *******************************/
/**********************************************************************/

#statementWrapper
{
	background-color: rgb(240, 240, 240);
	box-sizing:border-box;
	
	overflow:hidden;
	
	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;

	-webkit-align-items: center;
	align-items: center;
	
	border-bottom: 10px solid rgba(34, 172, 56, 1);
}

#statementWrapper
{
	width: 100%;
	padding: 1.5rem 12rem 2.5rem;
	-webkit-justify-content: center;
	justify-content: center;
}

#statementWrapper .statement p
{
	color: rgba(34, 172, 56, 1);
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: .1em;
	line-height: 2;
}

#statementWrapper .badge
{
	position: absolute;
	left: -1.5rem;
	top: calc(50% - 12rem / 2);
	height: 12rem;
	width: 12rem;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-image: url(../_img/badge.png);
}

#statementWrapper #entBt
{
	cursor: pointer;
	position: absolute;
	width: 4rem;
	height: 4rem;
	background-color: rgba(34, 172, 56, 1);
	border-radius: 50%;
	left: calc(50% - 2rem);
	bottom: -2rem;
}
#statementWrapper #entBt:after
{
	content:"";
	position: absolute;
	display: block;
	width: 1rem;
	height: 1rem;
	left: calc(50% - 1.41rem / 2);
	top: -.1em;
	border-style: solid;
	border-color: rgb(240, 240, 240);
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
	transform-origin: left bottom;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
#statementWrapper #entBt:hover:after
{
	top: .2em;
}

#newsList
{
	margin-top: 4rem;
}

#newsList > div
{
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

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

@media screen and  (max-width: 850px)
{
	#statementWrapper .statement p > span
	{
		display: block;
		text-align: center;
	}
}

@media screen and  (max-width: 650px)
{
	.icon > div{width: 3rem; height: 3rem;}
	.icon > p{font-size: .7rem;}
	
	.bannerSlideContainer .photoDirL
	{
		transform-origin: left center;
		transform: scale(.5, .5);
	}
	.bannerSlideContainer .photoDirR
	{
		transform-origin: right center;
		transform: scale(.5, .5);
	}
	
	#statementWrapper
	{
		width: 100%;
		padding: 1.5rem 2rem 3rem;
		-webkit-justify-content: center;
		justify-content: center;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;	
	}
	
	#statementWrapper .statement p
	{
		font-size: 1rem;
		letter-spacing: 0;
	}
	
	#statementWrapper .badge
	{
		display: none;
		position: relative;
		width: 5rem;
		height: 5rem;
		top: 0;
		left: 0;
	}
}

@media screen and (max-width: 350px)
{
	#statementWrapper .statement p
	{
		font-size: .9rem;
	}
}