@charset "utf-8";
/* CSS Document */
x#concept{
 padding: 0;
}
.ContentBox{width: 100%; background: none; padding-top: 110px;}
.ConceptBody{ width: 1200px; max-width: 100%; margin: auto; background: #fff;}
#concept-page h2 {
 padding: 60px 0 40px;
 margin: 0;
}
/*Main*/
.ConceptMain {
 padding: 0 0 40px;
}
.ConceptMain p {}
.ConceptMain p img{

}
.ConceptMain h3 {
 text-align: center;
 margin-bottom: 40px;
}
.ConceptMain h4 {
 max-width: 100%;
 width: 940px;
 padding: 0 40px;
 margin: auto;
 line-height: 2;
 letter-spacing: 0.1em;
}
.movieBBox {
 justify-content: center;
}
.movieBox a {
 display: block;
 position: relative;
}
.movieBox a span {
 position: absolute;
 width: 100%;
 display: block;
 text-align: center;
 bottom: -12px;
}
.movieBox p {
 padding-top: 12px;
}

.movie,
#movie{
	background: #f1f1f1;
	font-size: 14px;
	padding: 50px 0 50px 0;
	margin: 0 auto;}

.movie h2{
	text-align: center;
	margin-bottom: 30px;}

.movie .movieBBox2{
	width: auto;
	margin: 0 auto;
	display: flex;
text-align: center;}

.movie .movieBox{
	margin: auto;
	flex: 0 0 295px;}

.movie .movieBBox .movieBox:first-child{
	margin: auto;}


/*Section*/
.ConceptSection {
 padding: 80px 0 40px;
 border-bottom: 1px solid #ddd;
}
.ConceptSection h3 {
 text-align: center;
 margin-bottom: 64px;
}
.ConceptFlex {
 display: flex;
 justify-content: space-between;
}
.ConceptFlex-L {
 flex: 0 0 48%;
  overflow: hidden;

}
.ConceptFlex-R {
 flex: 0 0 48%;
 padding-right: 54px;
}
.ConceptBox {
 margin-bottom: 80px;
}
.ConceptBox p {
 margin-bottom: 24px;
}
.ConceptBox p span{
 color: #666;
 font-size: 13px;
}

.ConceptBox h4 {
 margin-bottom: 24px;
 font-weight: 500;
 font-size: 20px;
}
.ConceptBox .shinrai-L {
 padding-right: 12px;
}
.ConceptBox .shinrai-R {
 vertical-align: top;
}
.BtnLink a {
 border: 1px solid #36b;
 border-radius: 16px;
 text-align: center;
 display: inline-block;
 padding: 8px 24px;
 font-size: 13px;
 color: #333;
 line-height: 1.1;
}
.BtnLink a:hover {
 background: #f0f0f0;
}
.BtnLink a img {
 vertical-align: middle;
 margin: 0 0 0 8px;
 width: 18px;
}
.ConceptBoxFlex {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.ConceptBoxFlex .ConceptBox {
 flex: 0 0 45%;
}
.ConceptAnshin { padding-bottom: 8px; border-bottom: 0;}
.ConceptShinrai {}
.ConceptShinrai .ConceptBoxFlex {
 width: 712px;
 margin: auto;
 padding-top: 80px;
}
.ConceptShinrai .ConceptBox{
 margin-bottom: 40px;
}
.ConceptOperation{
 padding-bottom: 200px;
}
.ConceptOperation .ConceptBoxFlex{
 align-items: center;
}
.col50{
 flex: 0 0 48%;
}


/*Fix*/
@media screen and (min-width: 769px) {

.ConceptFlex-L{
}
.ConceptFlex-L p.FixImg{
 position: relative;
 height: 92vh;
}
.ConceptFlex-L p.FixImg img{
 position: absolute;
 height: 100%;
 width: auto;
 max-width: none;
 top: 0;
 right: 0;
}
.fix .ConceptFlex-L {
 position: fixed;
 width: 48%;
 max-width: 576px;
 top: 55px;
}
.fix .ConceptFlex-R {
 margin-left: auto;
}

.ConceptFlex{
 align-items: flex-start;
}
.ConceptFlex.endfix{
 align-items: flex-end;
}

}

xxx.ConceptFlex-L p.FixImgSlide img{
 animation: sliding 4s ease-out forwards;
}
 @media screen and (max-width: 980px) {
}

@keyframes sliding {
  0%  {right: 0; }
  100%  { right: -10%;}
 /*
    0%  {  transform: translateY(-5%);}
    100%  {  transform: translateY(-60%);}
 */
}




/*New Video*/
.movieNew{
 background: #f1f1f1;
 padding: 50px;
}
.movieNewBox{
 width: 1200px;
 max-width: 100%;
 margin: auto;
}
.movieNew li{
 width: 640px;
 max-width: 96%;
 margin: auto;
}
.movieNew li a{
 display: flex;
 color: #333;
 background: #fff;
 align-items: center;
}
.movieNew li a:hover{
 background: #f9f9f9;
}
.movieNew li a:hover img{
 opacity: 0.8;
}
.movieNew li em{
 flex: 0 0 33%;
 padding-left: 16px;
 padding-top: 40px;
 }
 .movieNew li em i{
  font-style: normal;
  position: relative;
  display: inline-block;
  flex: none;
  text-align: left;
 }
.movieNew li em i::after{
 position: absolute;
 width: 2.5em;
 height: 1px;
 background: #333;
 content: "";
 left: 0;
 bottom: -4px;
 }
.movieNew li i{
 flex: 0 0 258px;
 }
.movieNew li span{
 flex: 1 0 15%;
 padding: 40px 0 0;
 text-align: center;
 position: relative;
 font-size: 12px;
 }
.movieNew li span img{
 position: absolute;
 right: -26px;
 top: 45%;
 flex: none;
 }


@media screen and (max-width: 768px) {
	.ContentBox{padding-top: 56px;}

 .ConceptBody{
  padding: 0 16px;
 }
 .ConceptFlex{
  display: block;
 }
 .ConceptFlex-L{
  flex: 0 0 30%;
 }
 .ConceptFlex-R{
  flex: 0 0 64%;
  padding-right: 0;
 }
 .ConceptBoxFlex{
  display: block;
 }
 .ConceptShinrai .ConceptBoxFlex{
  width: auto;
 }
 
 
 
 
 
 
/*New Video*/
.movieNew{
 background: #f1f1f1;
 padding: 10px;
 width: 100%;
 margin: auto;
}
.movieNewBox{
 width: auto;
 max-width: 94%;
 margin: auto;
}
.movieNew li{
 width: auto;
 max-width: 100%;
 margin: auto;
}
.movieNew li a{
}
.movieNew li a:hover{
}
.movieNew li a:hover img{
 opacity: 0.8;
}
.movieNew li em{
 flex: 0 0 auto;
 padding: 10% 8px 0 8px;
 line-height: 1.5;
 max-width: 40%;
 }

.movieNew li em::after{
 }
 .movieNew li em i{
  flex: none;
  text-align: left;
 }
 .movieNew li i{
 flex: 0 0 60%;
  text-align: right;
  padding-right: 40px;
 }
.movieNew li img{
 margin-right: 0;
 margin-left: 0;
 flex: 0 0 70%;
 text-align: right;
 }
.movieNew li span{
 flex: none;
 padding: 0;
 text-align: center;
 position: absolute;
 right: 0;
 font-size: 12px;
 line-height: 1.1;
 }
.movieNew li span img{
 position: static;
 display: block;
 margin-right: 0;
 }

 
}