/*01*/
.shape01{position:relative;}
.shape01:before{
    position: absolute;
    content:'';
    width: 448px;
    height: 708px;
    background: url(/images/000-darksoul/shape/01.png) no-repeat scroll center center / cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    transform: matrix(0.5,0,0,0.5,350,-200);
}

.shape01:after{
    position: absolute;
    content:'';
    width: 448px;
    height: 708px;
    background: url(/images/000-darksoul/shape/02.png) no-repeat scroll center center / cover;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    transform: matrix(0.5,0,0,0.5,-350,-200);
}




/*03*/

.shape03 h1{position:relative;width: 50%;margin: auto;}
.shape03 h1:before{
    position: absolute;
    content:'';
    width: 25px;
    height: 25px;
    background: url(/images/000-darksoul/shape/03-25.png) no-repeat scroll center center / cover;
    top: 0px;
    left: -40px;
    margin: auto;
}


.shape03 h1:after{
    position: absolute;
    content:'';
    width: 25px;
    height: 25px;
    background: url(/images/000-darksoul/shape/03-25.png) no-repeat scroll center center / cover;
    top: 0px;
    right: -40px;
    margin: auto;
}




/*menu*/

.menutitle h1 {
    position:relative;
}
.menutitle h1:before {
    left: 50%;
    transform: translate(-50%,0);
    z-index: 1;
    position: absolute;
    content:'';
    width: 300px;
    height: 156px;
    background: url(/images/000-darksoul/shape/menutitle.png) no-repeat scroll center center / cover;
    margin: auto;
    top: 0;
    bottom: 0;
}

@media(min-width:992px){
.titlepattern h1{position:relative;}
.titlepattern h1:after{
    position: absolute;
    content:'';
    width: 500px;
    height: 471px;
    background: url(/images/000-darksoul/shape/titlepattern.png) no-repeat scroll center center / cover;
    top: -240px;
    left: -32%;
    right: 0;
    margin: auto;
    transform: scale(0.06);
}}

.titlepattern-002 h1 strong{
  position:relative;
}
.titlepattern-002 h1 strong:after{
    position: absolute;
    content:'';
    width: 40px;
    height: 37px;
    background: url(/images/000-darksoul/shape/titlepattern.png) no-repeat scroll center center / cover;
    bottom: 31px;
    left: -118px;
    right: 0px;
}

/*titlepattern-001*/
.titlepattern-001{
  position:relative;
}
.titlepattern-001:after{
    position: absolute;
    content:'';
    width: 500px;
    height: 467px;
    background: url(/images/000-darksoul/shape/titlepattern.png) no-repeat scroll center center / cover;
    top: -245px;
    left: -261px;
    transform: scale(0.06);
}
@media(max-width:991px){
.titlepattern-001:after{
    position: absolute;
    content:'';
    width: 482px;
    height: 461px;
    background: url(/images/000-darksoul/shape/titlepattern.png) no-repeat scroll center center / cover;
    top: -242px;
    left: -239px;
    transform: scale(0.06);
}}




/*-----------------------------------------------------------------------
                               1194px
-------------------------------------------------------------------------*/
@media screen and (min-width:992px) and (max-width:1195px){
/*menu*/

.titlepattern h1{position:relative;}
.titlepattern h1:after{
    top: -241px;
    left: -38%;
    transform: scale(0.06);
}
}


/*-----------------------------------------------------------------------
                                412 px
-------------------------------------------------------------------------*/
@media screen and (min-width:364px) and (max-width:412px){
/*menu*/

.titlepattern h1{position:relative;}
.titlepattern h1:after{
    top: -241px;
    left: -46%;
    transform: scale(0.06);
}
}

/*-----------------------------------------------------------------------
                                360 px
-------------------------------------------------------------------------*/
@media screen and (min-width:351px) and (max-width:363px){
/*menu*/

.titlepattern h1{position:relative;}
.titlepattern h1:after{
    top: -241px;
    left: -60%;
    transform: scale(0.06);
}
}

/*-----------------------------------------------------------------------
                                350 px
-------------------------------------------------------------------------*/
@media screen and (max-width:351px){
/*menu*/

.titlepattern h1{position:relative;}
.titlepattern h1:after{
    top: -241px;
    left: -56%;
    transform: scale(0.06);
}
}

/*title-25*/

.titlepattern-25 h1{position:relative;width: 44%;margin: auto;}
.titlepattern-25 h1:before{
    position: absolute;
    content:'';
    width: 25px;
    height: 24px;
    background: url(/images/000-darksoul/shape/titlepattern-25.png) no-repeat scroll center center / cover;
    top: -16px;
    left: 0;
    margin: auto;
}


/*-----------------------------------------------------------------------
                               1194px
-------------------------------------------------------------------------*/
@media screen and (min-width:992px) and (max-width:1195px){
.titlepattern-25 h1{position:relative;width: 81%!important;margin: auto;}}
/*-----------------------------------------------------------------------
                                864 px
-------------------------------------------------------------------------*/
@media screen and (min-width:769px) and (max-width:865px){
.titlepattern-25 h1{position:relative;width: 36%!important;margin: auto;}}
/*-----------------------------------------------------------------------
                                768 px
-------------------------------------------------------------------------*/
@media screen and (min-width:481px) and (max-width:768px){
.titlepattern-25 h1{position:relative;width: 36%!important;margin: auto;}}
/*-----------------------------------------------------------------------
                                480 px
-------------------------------------------------------------------------*/
@media screen and (min-width:413px) and (max-width:480px){
.titlepattern-25 h1{position:relative;width: 56%!important;margin: auto;}}
/*-----------------------------------------------------------------------
                                412 px
-------------------------------------------------------------------------*/
@media screen and (min-width:364px) and (max-width:412px){
.titlepattern-25 h1{position:relative;width: 66%!important;margin: auto;}}
/*-----------------------------------------------------------------------
                                360 px
-------------------------------------------------------------------------*/
@media screen and (min-width:351px) and (max-width:363px){
.titlepattern-25 h1{position:relative;width: 76%!important;margin: auto;}}
/*-----------------------------------------------------------------------
                                350 px
-------------------------------------------------------------------------*/
@media screen and (max-width:351px){
.titlepattern-25 h1{position:relative;width: 80%!important;margin: auto;}}





/*cta*/
.border01{position:relative;}
.border01:before{
    position: absolute;
    content:'';
    width: 300px;
    height: 65px;
    background: url(/images/000-darksoul/shape/ctapatern001.png) no-repeat scroll center center / cover;
    top: -50%;
    left: 0;
    right: 0;
    margin: auto;

}

.border01:after{
    position: absolute;
    content:'';
    width: 300px;
    height: 65px;
    background: url(/images/000-darksoul/shape/ctapatern002.png) no-repeat scroll center center / cover;
    bottom: -90%;
    left: 0;
    right: 0;
    margin: auto;
}

/*ray*/
.ray{position:relative;}
.ray:before{
    left: 50%;
    transform: translate(-50%,0);
    z-index: 1;
    position: absolute;
    content:'';
    width: 800px;
    height: 360px;
    background: url(/images/000-darksoul/shape/titlkepattern02.png) no-repeat scroll center center / cover;
    margin: auto;
    top: 0;
}
}