@charset "utf-8";

/*================================================
Slice
================================================*/

.Slice {
  width: 100%;
  background-size: auto auto;
  background-color: rgba(51, 51, 51, 1);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 1) 10px, rgba(0, 0, 0, 1) 20px );
}
.SliceInner {
  width: 700px;
  margin: 0px auto;
}

@media (max-width: 1023px) {

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

/*================================================
FadeinUp
================================================*/

#main { overflow-x: hidden; }
.HeadlineUp { animation: SlideInUp 1.6s; } @keyframes SlideInUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
.HeadlineDown { animation: SlideInDown 1.6s; } @keyframes SlideInDown { 0% { opacity: 0; transform: translateY(-16px); } 100% { opacity: 1; transform: translateY(0); } }
.HeadlineLeft { animation: SlideInLeft 1.6s; } @keyframes SlideInLeft { 0% { opacity: 0; transform: translateX(-16px); } 100% { opacity: 1; transform: translateX(0); } }
.HeadlineRight { animation: SlideInRight 1.6s; } @keyframes SlideInRight { 0% { opacity: 0; transform: translateX(16px); } 100% { opacity: 1; transform: translateX(0); } }
.HeadlineZoom { animation: SlideInZoom 2.0s; } @keyframes SlideInZoom { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1.0); } }
.HeadlineLag { animation: SlideInLag 2.4s; } @keyframes SlideInLag { 0% { opacity: 0; transform: translateX(-16px); } 100% { opacity: 1; transform: translateX(0); } }

.FadeinUp {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}
.FadeinDown {
  opacity : 0;
  transform : translate(0, -50px);
  transition : all 500ms;
}
.FadeinLeft {
  opacity : 0;
  transform : translate(-100px, 0);
  transition : all 1000ms;
}
.FadeinRight {
  opacity : 0;
  transform : translate(100px, 0);
  transition : all 1000ms;
}
.FadeinZoomBig {
  opacity : 0;
  transform: scale(0.85,0.85);
  transition : all 750ms;
}
.FadeinZoomSmall {
  opacity : 0;
  transform: scale(1.15,1.15);
  transition : all 750ms;
}
.FadeinUp.Scrollin,
.FadeinDown.Scrollin,
.FadeinLeft.Scrollin,
.FadeinRight.Scrollin {
  opacity : 1;
  transform: scale(1.0,1.0);
  transform : translate(0, 0);
}
.FadeinZoomBig.Scrollin,
.FadeinZoomSmall.Scrollin {
  opacity : 1;
  transform: scale(1.0,1.0);
}

/*================================================
Parallel
================================================*/

.Parallel {
  width: 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: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/*================================================
clearfix
================================================*/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/*================================================
display on / off
================================================*/

.pc-br {
  display: block;
}
.sp-br {
  display: none;
}

@media (max-width: 1023px) {

  .pc-br {
    display: none;
  }
  .sp-br {
    display: block;
  }
}