/*

Editor	: C.I.
Version	: 1.0
Since	: 2019-12-25

 */
/* index
-----------------------------------------------------------*/
.home h2{
font-size:400%;
line-height: 1.3;
}
#content b,
#contents b{
color:#C10034
}

/* animation */
.topAnimation{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
height:100vh;
background-color:#000;
z-index:999;
}
.aText{
position:absolute;
top:50%;
left:50%;
width:40%;
height:50vh;
/*border:solid 1px #fff;*/
margin-left:-20%;
margin-top:-15%;
}
.aText .aTextLeft,
.aText .aTextRight{
position:absolute;
bottom:0;
height:100%;
width:49%;
}
.aText .aTextLeft{
left:0;
width:51.6%;
}
.aText .aTextRight{
right:0;
}
.aText .aTextLeft img,
.aText .aTextRight img{
position:absolute;
top:50%;
left:50%;
margin-left:-50%;
margin-top:-50%;
opacity: 0;
}
.aText.complete{
display: table;
}
.aText.complete .aTextLeft,
.aText.complete .aTextRight{
position:static;
bottom:0;
width:50%;
display: table-cell;
}
.aText.complete .aTextLeft img,
.aText.complete .aTextRight img{
position:static;
top:auto;
left:auto;
margin-left:0;
margin-top:0;
width:100%;
height:auto;
}
.aText.complete .aTextRight img{
margin-left:-0.1%;
}
.aText.complete .aTextLeft img{
margin-bottom:-4%;
}
.aText.complete .aTextRight img.fx,
.aText.complete .aTextRight img.fx{display: none;}

.aText .aTextLeft img.fx,
.aText .aTextRight img.fx{
height:auto;
}
.aText .aTextLeft img.fx{
width:155%;
margin-left:-80%;
margin-top:-75%;
}
.aText .aTextRight img.fx{
width:145%;
margin-left:-70%;
margin-top:-60%;
}
.alogo{
position:absolute;
bottom:-30%;
left:0;
width:100%;
text-align:center;
opacity: 0;
}

.objNAn {
	animation: swipeRight 1.1s cubic-bezier(0.6,0,0.4,1);
	animation-fill-mode: forwards;
}
@keyframes swipeRight {
	0% {
		transform: translate(0);
	}
	50%, 60% {
		transform: translate3d(100%,0,0);
	}
	100% {
		transform: translate3d(100%,0,0);
	}
}

@media only screen and (max-width: 1024px){
    .alogo{
    bottom:-50px;
    }
    .aText{
    height:25vh;
    }
}
@media only screen and (max-width: 767px){
    .alogo{
    bottom:-20px;
    }
    .aText{
    height:20vh;
    }
}
.alogo img{
width:80%;
}
/* .indexLists */
.indexLists li{
position:relative;
}
.indexLists .inTxt{
position:absolute;
width:50%;
left:50%;
top:0;
bottom:0;
background-color:#000;
opacity: 0.8; filter: alpha(opacity=80);
padding:2em 0;
}
.indexLists .inTxt strong,
.indexLists .inTxt span{
margin-left:20px;
display: block;
}
.indexLists li a strong:after{
content:"";
display: inline-block;
vertical-align: middle;
width:1.2em;
height:1em;
background:url("/asset/img_cmn/ico_arrow2.png") 0 50% no-repeat;
background-size:100% auto;
margin-left:0.5em;
}

@media only screen and (max-width: 767px){
    .indexLists .inTxt{
    position:relative;
    width:100%;
    left:auto;
    top:auto;
    bottom:auto;
    }
    .indexLists .inTxt strong{font-size:120%;}
    .indexLists .inTxt{padding:5px}
    .indexLists .inTxt strong,
    .indexLists .inTxt span{
    margin-left:0;
    display: block;
    padding:5px 0 0;
    }
    .indexLists li{
    margin-top:1em;
    }
}

/* #indexttlWrap  */
.home #headWrap {
height:100vh;
width:100%;
}
.home header{
position:absolute;
width:100%;
top:10px;
}
#indexttlWrap{
display:table;
height:100%;
}
#About .indexLists{
clear: both;
padding-top:3em;
}
#About figure figcaption{
padding:1em 0;
}


#inIndexttlWrap{
width:100%;
position:relative;
z-index:2;
display:table-cell;
vertical-align: middle;
}
#indexttlWrap h2{
display:inline-block;
padding:2em 0;
margin-top:0;
font-size:6vw;
width:50%;
}
@media only screen and (max-width: 1895px){
    #indexttlWrap h2{
    font-size:7vw;
    }
}
@media only screen and (max-width: 1024px){
    #indexttlWrap h2{
    width:100%;
    }
}
.aniTTl{
animation: SlideIn3 1s linear alternate;


}
.aniTTl2{
opacity: 0;
animation: SlideIn3 1s 0.5s linear alternate;
animation-fill-mode: forwards;
}
.aniTTl3{
opacity: 0;
animation: SlideIn3 0.5s 1s linear alternate;
animation-fill-mode: forwards;
}
@keyframes SlideIn3 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-500px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
#indexttlWrap h2 strong{
color:#C10034;
}
#indexttlWrap h2 span{font-size:100%;display: inline;}
#indexttlWrap h2 span.sub{
display: block;
font-size:26px;
}
@media only screen and (max-width: 767px){
#indexttlWrap h2 span.sub{
    display: block;
    font-size:20px;
    }
}
.ttlBg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
margin-top:0;
}
.home .ttlBg img{
    filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
    background-color:#000;
}
.topscloll{
position:absolute;
bottom:20px;
left:8%;
z-index:10;
animation: SlideIn2 2s 5s linear 5;
}


/* CSSアニメーションの設定 */
@keyframes SlideIn2 {
  0% {
    opacity: 1;/*初期状態では透明に*/
    transform: translateY(10px);
  }
  100% {
    opacity: 0.8;
    transform: translateY(0);
  }
}


@media only screen and (max-width: 1000px){
    .home .ttlBg img{
        height:100%;
        width:auto;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .home .ttlBg img{
        height:100%;
        width:auto;
    } 
}
@media only screen and (max-width: 1030px){
    #indexttlWrap {
    background-size:auto 100%;
    }
    #indexttlWrap h1{
    padding:1em 0;
    }
    #indexttlWrap h2{font-size:15vw;}
}
@media only screen and (max-width: 767px){
    #indexttlWrap {
    background-position: 50% 0;
    }
    #indexttlWrap h2{font-size:15vw;}
    #indexttlWrap h2 span.sub{font-size:10px;}
}

/* indexGuide */
#indexGuide{
margin-top:4em;
border:solid 1px #fff;
padding:10px 40px 40px;
}
@media only screen and (max-width: 767px){
    #indexGuide{
    padding:10px 15px 10px;
    }
}
#indexGuide h2{
font-size:150%;
}
#indexGuide h2:after{
content:"";
display: inline-block;
vertical-align: middle;
width:60%;
height:1px;
border-bottom:solid 1px #fff;
margin-left:1em;
}
#indexGuide .linkBtn a{display: block;padding:15px 10px;}
@media only screen and (max-width: 767px){
    #indexGuide h2:after{
    display: block;
    }
}
#indexNews{
padding-bottom:3em;
}

/* guide
-----------------------------------------------------------*/
/* flowList */
.flowList{padding-left:1.5em;margin-top:2em;position: relative;overflow: hidden;}
.flowList h2:first-child,
.flowList .columG2:first-child{margin-top:0 !important;}

.flowList:before{
content:"";
width:1px;
border-right:solid 1px #E3E3E3;
height:50000px;
position:absolute;
top:1em;
left:0.8em;
z-index:0;
}
.flowList h2{background-color:#000;text-indent: -2.5em;padding-left:1.7em;position: relative;z-index:1;}
.flowList h2:before{
content:"●";
font-size:0.8em;
vertical-align: middle;
color:#C10034;
margin-right:0.5em;
background-color:#000;
}

/* worksLists
-----------------------------------------------------------*/
.worksLists h2 a .en:after{
content:"";
display: inline-block;
vertical-align: middle;
width:1em;
height:1em;
background:url("/asset/img_cmn/ico_arrow2.png") 0 50% no-repeat;
margin-left:0.5em;
}


/* worksDetail
----------------------------------------------------------- */
.worksDetail{
padding-top:1em;
}
.worksDetail .tumList3 li{
margin-left:0;
width:33.3%;
}
@media only screen and (max-width: 767px){
    .worksDetail .tumList3 li{
    width:50%;
    }
}