@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
.mainVisual {
	position: relative;
	overflow: hidden;
}

.mainVisual .maintext01 ,
.mainVisual .maintext01-1 ,
.mainVisual .maintext02 ,
.mainVisual .maintext02-1 ,
.mainVisual .maintext03 ,
.mainVisual .maintext04 ,
.mainVisual .maintext05 ,
.mainVisual .maintext06 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	animation-delay:2s;
}

.mainVisual .maintext01 {
	animation-name: line1;
	animation-delay:2.5s;
	animation-duration: 2s;
}
.mainVisual .maintext01-1 {
	animation-name: line2;
	animation-delay:2.5s;
	animation-duration: 2s;
}
.mainVisual .maintext02 {
	animation-name: line3;
	animation-delay:2.5s;
	animation-duration: 2s;
}
.mainVisual .maintext02-1 {
	animation-name: line4;
	animation-delay:2.5s;
	animation-duration: 2s;
}


.mainVisual .maintext03 ,
.mainVisual .maintext04 ,
.mainVisual .maintext05 ,
.mainVisual .maintext06 {
	animation-name: mvtext;
}

.mainVisual .maintext03 {
	animation-delay:0.5s;
}
.mainVisual .maintext04 {
	animation-delay:1s;
}
.mainVisual .maintext05 {
	animation-delay:1.5s;
}
.mainVisual .maintext06 {
	animation-delay:2.5s;
}

@-webkit-keyframes mvtext {
  from {
    opacity: 0;
	transform: translateX(20px);
	}

  to {
    opacity: 1;
	transform: translateX(0px);
  }
}
@-webkit-keyframes line1 {
  from {
    opacity: 0;
	transform: translateX(50%);
	}

  to {
    opacity: 1;
	transform: translateX(0px);
  }
}
@-webkit-keyframes line2 {
  from {
    opacity: 0;
	transform: translateX(-50%);
	}

  to {
    opacity: 1;
	transform: translateX(0px);
  }
}
@-webkit-keyframes line3 {
  from {
    opacity: 0;
	transform: translateY(-50%);
	}

  to {
    opacity: 1;
	transform: translateY(0px);
  }
}
@-webkit-keyframes line4 {
  from {
    opacity: 0;
	transform: translateY(50%);
	}

  to {
    opacity: 1;
	transform: translateY(0px);
  }
}
.mainVisual .maintext .maintext-area {
	position: relative;
}

/*.mainVisual .main01 ,
.mainVisual .main02 ,
.mainVisual .main03 ,
.mainVisual .main04 {
	animation-delay:6s;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}

.mainVisual .main01 {
	animation-delay:0s;
}

.mainVisual .main02 {
	animation-delay:13.5s;
}

.mainVisual .main03 {
	animation-delay:6s;
}

.mainVisual .main04 {
	animation-delay:18s;
}*/

.mainVisual .item {
	position: relative;
}

.mainVisual img {
	width: 100%;
	height: auto;
}

.mainVisual .photo {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
}

.mainVisual a {
	display: block;
	z-index: 10000;
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -29px;
}

.mainVisual a img {
	width: inherit;
	height: auto;
	display: block;
	margin: 0 auto;
}

.mainVisual a img {
	-webkit-transform: rotateZ(0);
	transform: rotateZ(0);
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}

.mainVisual a img {
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: bottom center;
  -webkit-animation-name: arrow;
}

.mainVisual .slideInLeft {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;	
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

@-webkit-keyframes arrow {
  0%{
    -webkit-transform: translateY(0);
    }
  50%{
    -webkit-transform: translateY(20px);
    }
  100% {
    -webkit-transform: translateY(0px);
  }
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotateY(0) rotateZ(0) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotateY(0) rotateZ(0) translate(0, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: rotateY(0) rotateZ(0) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotateY(0) rotateZ(0) translate(0, 20px);
		opacity: 0;
	}
}

#main .photoUl {
	margin-bottom: 80px;
}

#main .photoUl li {
	float: left;
	width: 33.33%;
	position: relative;
}

#main .linkUl li span ,
#main .photoUl li span {
    text-align: center;
    display: block;
    position:absolute;
    top: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: 0.8s;
}
#main .linkUl li span.back ,
#main .photoUl li span.back {
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}
 
#main .linkUl li:hover span.front ,
#main .photoUl li:hover span.front {
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}
 
#main .linkUl li:hover span.back ,
#main .photoUl li:hover span.back {
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg);
}

#main .photoUl li > a > img {
	width: 100%;
	height: auto;
}

#main .photoUl li > a:hover img {
}

#main .photoUl li span {
	margin-top: -88px;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	display: block;
	text-align: center;
}

#main .comBox {
	margin: 0 auto;
	width: 1115px;
}

#main .linkUl {
	margin-bottom: 75px;
}

#main .linkUl li {
	float: left;
	padding-left: 59px;
}

#main .linkUl li:first-child {
	padding-left: 0;
}

#main .linkUl li a {
	display: block;
	position: relative;
}

#main .linkUl li a:hover img {
}

#main .linkUl li span {
	position: absolute;
	top: 81px;
	left: 0;
	width: 100%;
	text-align: center;
	display: block;
}

#main .lBox {
	float: left;
	width: 60%;
}

#main .lBox .ttl {
	margin: 24px 40px 0 0;
	float: left;
}

#main .lBox dl {
	padding: 6px 0 7px 30px;
	float: left;
	border-left: 1px solid #000000;
}

#main .lBox dt {
	float: left;
	padding-top: 7px;
}

#main .lBox dd {
	font-size: 14px;
	padding: 5px 0 3px 5.5em;
}

#main .rBox {
	float: right;
	width: 40%;
}

#main .rBox img {
	width: 100%;
	height: auto;
}

#main .rBox a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
}


@media all and (min-width: 768px) and (max-width: 1024px) {
}



@media all and (min-width: 0) and (max-width: 767px) {	

	.mainVisual .maintext {
		display: none;
	}
	
	.mainVisual .sptext01 ,
	.mainVisual .sptext02 ,
	.mainVisual .sptext03 ,
	.mainVisual .sptext04 ,
	.mainVisual .sptext05 ,
	.mainVisual .sptext06 ,
	.mainVisual .sptext07 ,
	.mainVisual .sptext08 {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		animation-delay:2s;
	}

	.mainVisual .sptext01 {
		animation-name: line1;
		animation-delay:2.5s;
		animation-duration: 2s;
	}
	.mainVisual .sptext02 {
		animation-name: line2;
		animation-delay:2.5s;
		animation-duration: 2s;
	}
	.mainVisual .sptext03 {
		animation-name: line4;
		animation-delay:2.5s;
		animation-duration: 2s;
	}
	.mainVisual .sptext04 {
		animation-name: line3;
		animation-delay:2.5s;
		animation-duration: 2s;
	}
	
	.mainVisual .sptext05 ,
	.mainVisual .sptext06 ,
	.mainVisual .sptext07 ,
	.mainVisual .sptext08 {
		animation-name: mvtext;
	}

	.mainVisual .sptext05 {
		animation-delay:0.5s;
	}
	.mainVisual .sptext06 {
		animation-delay:1s;
	}
	.mainVisual .sptext07 {
		animation-delay:1.5s;
	}
	.mainVisual .sptext08 {
		animation-delay:2.5s;
	}
	
	.mainVisual .photo {
		animation-delay:2s;
	}	

	.mainVisual a {
		display: none;
	}
	
	#main .photoUl {
		margin-bottom: 10px;
	}
	
	#main .photoUl li {
		float: left;
		width: 50%;
		position: relative;
	}
	
	#main .photoUl li span {
		margin-top: -42px;
	}
	
	#main .photoUl li span img {
		height: 83px;
		width: auto;
	}
	
	#main .linkUl {
		margin-bottom: 22px;
	}
	
	#main .linkUl li {
		padding: 0;
		float: none;
		width: 100%;
	}
	
	#main .linkUl li img {
		width: 100%;
		height: auto;
	}
	
	#main .comBox {
		width: auto;
	}
	
	#main .linkUl li span {
		top: 50%;
		margin-top: -24px;
	}
	
	#main .linkUl li span img {
		width: auto;
		height: 57px;
	}

	#main .lBox ,
	#main .rBox {
		width: 100%;
	}
	
	#main .lBox .ttl {
		margin: 0 0 8px;
		padding: 0 0 4px;
		border-bottom: 1px solid #000;
	}
	
	#main .lBox .ttl img {
		width: 44px;
		height: auto;
	}
	
	#main .comBox .inner {
		padding: 0 20px;
	}
	
	#main .lBox dl {
		float: none;
		clear: both;
		margin: 0 0 19px;
		padding: 0;
		border-left: 0;
	}
	
	#main .lBox dt {
		padding-top: 2px;
		font-size: 12px;
	}
	
	#main .lBox dd {
		font-size: 12px;
		padding: 1px 0 2px 6.2em;
	}
	
	#main .rBox img {
		width: 100%;
		height: auto;
	}
	
}