@charset "UTF-8";
/* CSS Document */


.convergence-frame {
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
}
.convergence-befor {
    position:absolute;
    margin:0;
    padding:0;
    /*background-color:#000000;*/
    backface-visibility:hidden;
    -webkit-transform:scaleZ(1);
    transform:scaleZ(1) rotate(0deg);
}
.convergence-after {
    position:absolute;
    margin:0;
    padding:0;
    /*background-color:#ff0000;*/
    backface-visibility:hidden;
    -webkit-transform:scale(0);
    transform:scale(0) rotate(-120deg);
}
.convergence-frame .convergence-befor,
.convergence-frame .convergence-after {
    -webkit-transition:opacity 5s, -webkit-transform 5s;
    transition:opacity 5s, transform 5s;
}
.convergence-frame .convergence-befor,
.convergence-frame .convergence-after {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.convergence-frame:hover .convergence-befor {
    -webkit-transform:scale(0);
    transform:scale(0) rotate(-120deg);
}
.convergence-frame:hover .convergence-after {
    -webkit-transform:scaleZ(1);
    transform:scaleZ(1) rotate(0deg);
}



.kururinpa-frame,
.kururinpa0-frame {
    position:relative;
    margin:0;
    padding:0;
    perspective:1000px;
    overflow:hidden;
}
.kururinpa-befor {
    position:absolute;
    margin:0;
    padding:0;
    /*background-color:#000000;*/
    backface-visibility:hidden;
    -webkit-transform:rotateX(0);
    transform:rotateX(0);
}
.kururinpa-after {
    position:absolute;
    margin:0;
    padding:0;
    /*background-color:#ff0000;*/
    backface-visibility:hidden;
    -webkit-transform:rotateX(-180deg);
    transform:rotateX(-180deg);
}
.kururinpa-frame .kururinpa-befor,
.kururinpa-frame .kururinpa-after {
    -webkit-transition:opacity 0.3s, -webkit-transform 0.3s;
    transition:opacity 0.3s, transform 0.3s;
}
.kururinpa0-frame .kururinpa-befor,
.kururinpa0-frame .kururinpa-after {
    -webkit-transition:opacity 0, -webkit-transform 0;
    transition:opacity 0, transform 0;
}
.kururinpa-frame .kururinpa-befor,
.kururinpa-frame .kururinpa-after,
.kururinpa0-frame .kururinpa-befor,
.kururinpa0-frame .kururinpa-after  {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.kururinpa-frame:hover .kururinpa-befor,
.kururinpa0-frame:hover .kururinpa-befor {
    -webkit-transform:rotateX(180deg);
    transform:rotateX(180deg);
}
.kururinpa-frame:hover .kururinpa-after,
.kururinpa0-frame:hover .kururinpa-after {
    -webkit-transform:rotateX(0);
    transform:rotateX(0);
}


.rool15 {
    display:block;
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
}
.rool15:hover {
    transform:rotate(15deg);
    -webkit-transform:rotate(15deg);
}

ul.TurnOver {
    list-style:none;
    top:0;
    height:130px;  /* Default value */
    margin:0;
    padding:0;
    text-align:center;
    float:left;
}
ul.TurnOver li,
ul.TurnOver li dl {     /* Default value */
    width:130px;
    height:130px;
}
/*
ul {
    letter-spacing: -1em;
}
*/
ul.TurnOver li {
    display:inline-block;
    position:relative;
    overflow:hidden;
    margin:0 10px;
    letter-spacing:0;
}

ul.TurnOver dl {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    top: 0;
    margin: 0;
    padding: 7px 7px;
    color: #fff;
    background: rgba(205,92,92,.9);
}
ul.TurnOver dl dt {
    margin-bottom:0.3em;
    font-size:11px;
    letter-spacing:0em;
}
ul.TurnOver dl dd {
    margin:0;
    font-size:10px;
    line-height:1.3;
    text-align:justify;
    word-break:break-all;
}
ul.TurnOver dl dd:last-of-type {
    margin-top:10px;
    text-align:right;
}

ul.TurnOver a {
    padding:0.3em 0.5em;
    background-color:#fff;
}

.TurnOver {
    overflow:visible;
    -webkit-perspective:1000px;
    perspective:1000px;
}
 
.TurnOver img,
.TurnOver dl {
    -webkit-transition:opacity 0.6s, -webkit-transform 0.6s;
    transition:opacity 0.6s, transform 0.6s;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
 
.TurnOver:hover img {
    -webkit-transform:rotateX(180deg);
    transform:rotateX(180deg);
}
 
.TurnOver dl {
    background-color:#cd5c5c;
    -webkit-transform:rotateX(-180deg);
    transform:rotateX(-180deg);
}
 
.TurnOver:hover dl {
    -webkit-transform:rotateX(0);
    transform:rotateX(0);
}


#slideShow {
    position:relative;
    width:750px;
	height:379px;
	overflow:hidden;
}
.slideContents {
    position:relative;
    background:lightSeaGreen;
    text-align:middle;
    -webkit-user-select:none;
    user-select:none;
    width:100%;
    -webkit-transition:-webkit-transform .6s;
    transition:transform .6s;
}
.slideContents::after {
    content:"";
    display:block;
    clear:both;
}
.slideContents section {
    float:left;
	top:0;
    width:750px;
    height:0px;
    -webkit-transition:opacity .6s;
    transition:opacity .6s;
}
.slideContents section img {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    max-width:750px;
    height:auto;
    padding:0 10px;
    vertical-align:middle;
}


.slideContents section {
  -webkit-animation:autoplay 18s infinite;
  animation:autoplay 18s infinite;
}
.slideContents section {
  -webkit-transform:none;
  transform:none;
  transition:none;
}
.slideContents #slide0 {
  position: relative;
  -webkit-animation-delay:0;
  animation-delay:0;
  top:0;
}
.slideContents #slide1 {
  -webkit-animation-delay:-12s;
  animation-delay:-12s;
  top:0;
}
.slideContents #slide2 {
  -webkit-animation-delay:-6s;
  animation-delay:-6s;
}

@-webkit-keyframes autoplay {
  0% { transform: translateX(-100%); }
  10% { transform: translateX(-100%); }
  45% { transform: translateX(0); }
  90% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes autoplay {
  0% { transform: translateX(-100%); }
  10% { transform: translateX(-100%); }
  45% { transform: translateX(0); }
  90% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}


/* banner animation */
.bContainer {
	position:absolute;
	width: 100%; height: 100%;
	z-index: 0;
}
.bContents {
	position:static;
	width:100%; height:100%;
	z-index:1000;
    font-family:-apple-system,'Lucida Grande','Helvetica Neue','Hiragino Kaku Gothic ProN','游ゴシック','メイリオ',meiryo,sans-serif;
}
.bContainer h2 {
	position:static;
	top:0;
	width:100%; /*height:20px;*/
	font-size:20px;
	color:transparent;
	text-align:left;
	line-height:0.2em;
	-webkit-animation:	blurFadeIn 3S;
	-moz-animation:		blurFadeIn 3S;
	-ms-animation:		blurFadeIn 3S;
	animation:			blurFadeIn 3S;
}

.bContainer h2.fdIn3-1 {
	-webkit-animation:	none;
	-moz-animation:		none;
	-ms-animation:		none;
	animation:			none;
	color:transparent;
	/*text-shadow:0px 0px 1px #000;*/
}
.bContainer h2.fdIn3-1 span {
	-webkit-animation:	blurFadeIn 2s ease-in 5s backwards;
	-moz-animation:		blurFadeIn 2s ease-in 5s backwards;
	-ms-animation:		blurFadeIn 2s ease-in 5s backwards;
	animation:			blurFadeIn 2s ease-in 5s backwards;
	color: transparent;
	text-shadow:0px 0px 1px #000;
}
.bContainer h2.frm3-2 {
	-webkit-animation:	none;
	-moz-animation:		none;
	-ms-animation:		none;
	animation:			none;
	color:transparent;
	/*text-shadow:0px 0px 1px #000;*/
}
.bContainer h2.fdIn3-2 span {
	-webkit-animation:	blurFadeIn 6s ease-in 9s backwards;
	-moz-animation:		blurFadeIn 6s ease-in 9s backwards;
	-ms-animation:		blurFadeIn 6s ease-in 9s backwards;
	animation:			blurFadeIn 6s ease-in 9s backwards;
	color: transparent;
	text-shadow:0px 0px 1px #000;
}.bContainer h2.frm3-3 {
	-webkit-animation:	none;
	-moz-animation:		none;
	-ms-animation:		none;
	animation:			none;
	color:transparent;
	/*text-shadow:0px 0px 1px #000;*/
}
.bContainer h2.fdIn3-3 span {
	-webkit-animation:	blurFadeIn 10s ease-in 13s backwards;
	-moz-animation:		blurFadeIn 10s ease-in 13s backwards;
	-ms-animation:		blurFadeIn 10s ease-in 13s backwards;
	animation:			blurFadeIn 10s ease-in 13s backwards;
	color: transparent;
	text-shadow:0px 0px 1px #000;
}

@-webkit-keyframes blurFadeInOut{
	0%		{	opacity:0;	text-shadow:0px 0px 40px #fff;	-webkit-transform:scale(1.3);	}
	20%,75%	{	opacity:0.5;	text-shadow:0px 0px 1px #fff;	-webkit-transform:scale(1);		}
	100%	{	opacity:0;	text-shadow:0px 0px 50px #fff;	-webkit-transform:scale(1);		}
}
@-moz-keyframes blurFadeInOut{
	0%		{	opacity:0;	text-shadow:0px 0px 40px #000;	-moz-transform:scale(1.3);	}
	20%,75%	{	opacity:0.5;	text-shadow:0px 0px 1px #000;	-moz-transform:scale(1);	}
	100%	{	opacity:0;	text-shadow:0px 0px 50px #000;	-moz-transform:scale(1);	}
}
@keyframes blurFadeInOut{
	0%		{	opacity:0;	text-shadow:0px 0px 40px #000;	transform:scale(1.3);	}
	20%,75%	{	opacity:1;	text-shadow:0px 0px 1px #000;	transform:scale(1);		}
	100%	{	opacity:0;	text-shadow:0px 0px 50px #000;	transform:scale(1);		}
}
@-webkit-keyframes blurFadeIn{
	0%		{	opacity:0;		text-shadow:0px 0px 40px #fff;	-webkit-transform:scale(1.3);	}
	50%		{	opacity:0.5;	text-shadow:0px 0px 10px #fff;	-webkit-transform:scale(1.1);   }
	100%	{	opacity:1;		text-shadow:0px 0px 1px #fff;	-webkit-transform:scale(1);		}
}
@-moz-keyframes blurFadeIn{
	0%		{	opacity:0;	text-shadow:0px 0px 40px #000;	-moz-transform:scale(1.3);	}
	100%	{	opacity:1;	text-shadow:0px 0px 1px #000;	-moz-transform:scale(1);	}
}
@keyframes blurFadeIn{
	0%		{	opacity:0;		text-shadow:0px 0px 40px #000;	transform:scale(1.3);	}
	50%		{	opacity:0.5;	text-shadow:0px 0px 10px #000;	transform:scale(1.1);	}
	100%	{	opacity:1;		text-shadow:0px 0px 1px #000;	transform:scale(1);		}
}
@keyframes fadeInBack{
	0%		{	opacity:0;		transform:scale(0);	}
	50%		{	opacity:0.4;	transform:scale(2);	}
	100%	{	opacity:0.2;
		transform: scale(5);
	}
}
@keyframes fadeInRotate{
	0%		{	opacity:0;	transform:scale(0) rotate(360deg);	}
	100%	{	opacity:1;	transform:scale(1) rotate(0deg);	}
}