@charset "utf-8";

/* ---------------------------------------------------------------------------------
base */

*{}

@media(max-width:750px){
	
body{ font-size:140%; }

}

li img{ width:100%;}

img{ vertical-align:bottom;}

a:link{ color:#870043;text-decoration: none;}
a:visited{ color:#870043;text-decoration: none;}
a:active{ color:#ee6fb2;text-decoration:underline;}
a:hover{ color:#ff0000;text-decoration:none;}

#gHeader *{transition: all  0.5s ease;}

body{ background:#fff ; height:100%; width:100%; }

ul li a{transition: all  0.4s ease;}
ul li a:hover{opacity: 0.4;}

@media(max-width:750px){

body{  }
 
}

p{ line-height: 1.8em;}

.hrTac img{ width:100%;}
img{ width:100%;}

body#subPage{ position:relative;}
.backgroundFix{ position:fixed; width: 100%; height: 100%;background:url(/common/images/mainBackground.jpg) no-repeat center top;
background-size: cover;}


@media(max-width:750px){
    .backgroundFix{ position:fixed; width: 100%; height: 100%;background:url(/common/images/mainBackground_sp.jpg) no-repeat center top;
        background-size: cover;}
        
}


.txtGrad{
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ---------------------------------------------------------------------------------
contents */

#contents{ padding: 0;}
#contents_inner{padding: 0;}

#subPage #contents_inner{padding:50px 0;}



.pageHeader{ border-top: 1px solid #b8045e;margin-top: 30px; height:70px;}
.pageHeader >.inner{width: auto;max-width:1200px;margin: 0 auto; position: relative;}
.pageHeader .txtArea{display: inline-block;position: absolute;background: #fff; top: -45px;left: 0;padding: 0 20px;left: -20px;}
.pageHeader h2{font-size:18px;margin-bottom: -10px;}
.pageHeader p{font-family: roboto; font-weight: 700; letter-spacing: 0.05em;font-size: 34px;}

.pageCont{ width: auto; margin: 0 auto;padding-bottom: 100px; }
.pageCont p{ margin-bottom: 1em;}

.pageCont{ width: auto; margin: 0 auto;}
.pageCont >.inner{width: auto;max-width: 1200px; margin: 0 auto;}
.pageCont >.inner.full{width: auto; max-width: none;}

.pageCont >.inner .limitCont{max-width: 1200px; margin: 0 auto;}


.pageCont >.inner .limitCont1100{max-width: 1100px; margin: 0 auto;}
.pageCont >.inner .limitCont1000{max-width: 1000px; margin: 0 auto;}
.pageCont >.inner .limitCont900{max-width: 900px; margin: 0 auto;}
.pageCont >.inner .limitCont800{max-width: 800px; margin: 0 auto;}
.pageCont >.inner .limitCont700{max-width: 700px; margin: 0 auto;}
.pageCont >.inner .limitCont600{max-width: 600px; margin: 0 auto;}



.leftBarHX{ border-left: 5px solid #b8045e; padding:5px 0 5px 12px; line-height: 1em; font-weight: 800; font-size: 20px; color: #b8045e; margin-bottom: 30px;}

.centeringRedBarHX{
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    color: #fff;
    padding: 5px 30px;
    display: block;
    width: 200px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.blackBoldHX{
    font-size: 120%;font-weight: 900;
    margin-bottom: 20px;
    margin-top: 50px;
}


.blackBoldBigHX{
    font-size: 30px;font-weight: 900;
    margin-bottom: 30px;
    line-height: 1.4em;

}
.blackBoldBigHX img{width: auto; height: 44px; vertical-align: bottom; position: relative; top: -4px;margin: 0 5px;}



.entryMoreArea{ width: 650px; margin: 0 auto;padding-top: 80px;}

@media(max-width:750px){
#contents{padding: 0;}
#contents_inner{padding: 0;}
    .entryMoreArea{ width: auto; margin: 0 50px;}

    .pageHeader{ margin-top: 20px;}
    .pageHeader >.inner{width: auto;margin: 0 auto; position: relative;}
    .pageHeader .txtArea{display: inline-block;position: absolute;background: #fff; top: -58px;left: 0;padding: 0 20px;left: 30px;}
    .pageHeader h2{font-size:24px;margin-bottom: -10px;}
    .pageHeader p{font-size: 39px;}

    .pageCont{ width: auto; margin: 0;}
    .pageCont >.inner{width: auto; margin: 0 50px;}
    .pageCont >.inner.full{width: auto; margin: 0 0;}

    


    
.leftBarHX{  padding:5px 0 5px 12px; line-height: 1em; font-weight: 800; font-size: 26px; color: #b8045e; margin-bottom: 30px;}

.centeringRedBarHX{

    padding: 5px 30px;
    width: 300px;
    font-size: 26px;
}


.blackBoldBigHX{
    font-size: 40px;

}
.blackBoldBigHX img{width: auto; height: 60px; vertical-align: bottom; position: relative; top: -4px;margin: 0 5px;}



}






.redBoldHX{
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 30px;
    line-height: 1.4em;
    font-size: 28px;
    font-weight: 800;
}

.redBoldHX span{ font-size: 70%;}

p.blackBoldIntro{font-size: 20px;font-weight: bold; margin-bottom: 50px;}
p.blackBoldIntro span{
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.underBarHX{ font-size: 22px; border-bottom: 1.5px solid #870043;padding: 0 0 15px 0; margin-bottom: 30px;}


p.intro{ margin-bottom: 50px;}



@media(max-width:750px){

    .redBoldHX{

        margin-bottom: 30px;
        line-height: 1.4em;
        font-size: 40px;
    }
    
    .underBarHX{ font-size: 26px; border-bottom: 1.5px solid #870043;padding: 0 0 15px 0; margin-bottom: 30px;}
}




.peoples{ max-width: 1100px;margin: 0 auto;}
.peoples >.inner{}

.peoples ul{
    width: auto;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 30px;
}

.peoples ul li{padding: 10px; position: relative;
    padding: 20px;
    border:1px solid #b7055f;
    background-image: -moz-linear-gradient( 0deg, rgba(240,240,240,0.99608) 0%, rgb(240,240,240) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(240,240,240,0.99608) 0%, rgb(240,240,240) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(240,240,240,0.99608) 0%, rgb(240,240,240) 0%, rgb(255,255,255) 100%);
}
.peoples ul li .triangle{ position: absolute; left: 0; top: 0;}
.peoples ul li >.inner{ position: relative;}

.peoples .number{ position: absolute;line-height: 1.1em; top: -7px; left: -7px; font-weight: 800; font-family: roboto; font-size: 24px; color: #fff;}
.peoples h3{ padding-left: 40px; font-weight: 800; font-size: 22px; color: #b7055f;padding-bottom: 20px;}
.peoples .voice{ background: #fff;padding: 13px 150px 13px 13px;margin-bottom: 20px; border-radius: 5px;font-weight: bold;}
.peoples .voice p{margin-bottom: 0;padding-bottom: 0;line-height: 1.5em;}
.peoples .prof{}
.peoples .prof p{ font-size: 13px; line-height: 1.4em;}
.peoples .image{ width: 140px;overflow: hidden; position: absolute; top: -10px; right: -10px;}

.triangle{ width: 70px; height: 70px;}


.messageLink{ position: absolute; width: 100%; bottom: -17px; left: 0;}
.messageLink a{ display: block;background: #b7055f; color: #fff; font-size: 16px; font-weight: bold; color: #fff;text-align: center;padding: 5px;width: 300px; margin: 0 auto;
    transition: all 0.3s ease-in-out;}
.messageLink a:hover{opacity: 1; position: relative;transform:scale(1.02) translate(0%, 10%);}
  





@media(max-width:750px){

    .peoples{ max-width: auto;margin: 0 50px;}

    .peoples ul{
        width: auto;
        margin: 0 auto 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 50px;
        row-gap: 70px;
    }
    
.peoples ul li{
    padding: 30px;
}
.peoples ul li .triangle{ position: absolute; left: 0; top: 0;}
.peoples ul li >.inner{ position: relative;}

.peoples .number{  top: -7px; left: -7px;  font-size: 30px; }
.peoples h3{ padding-left: 60px;  font-size: 28px; padding-bottom: 20px;}
.peoples .voice{ background: #fff;padding: 20px 150px 20px 20px;margin-bottom: 20px; border-radius: 5px;font-weight: bold;}
.peoples .prof p{ font-size: 22px; }
.peoples .image{ width: 160px;overflow: hidden; position: absolute; top: -10px; right: -10px;}

.triangle{ width: 100px; height: 100px;}


.messageLink{ position: absolute; width: 100%; bottom: -34px; left: 0;}
.messageLink a{ display: block;background: #b7055f; color: #fff; font-size: 30px; font-weight: bold; color: #fff;text-align: center;padding: 15px;width: 500px; margin: 0 auto;
    transition: all 0.3s ease-in-out;}
.messageLink a:hover{opacity: 1; position: relative;transform:scale(1.02) translate(0%, 10%);}
  


}


/* ---------------------------------------------------------------------------------
Btn */


@media(max-width:750px){

    
}

a.dBtn{ 
    display: block;
    position:relative;
    color: #fff;
    text-align: center;
    border-left:5px solid;
    border-image:linear-gradient(to top, rgb(128,0,63), rgb(192,4,99) 71%, rgb(202,0,100) 100%) 1;
    transition: all 0.3s ease-in-out;
}

a.dBtn span{
    display: block;
    padding:  0;
    position: relative;
    z-index: 0;
    height: 50px;
    
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


a.dBtn span:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-1;
    left:0;
    transition:0.8s;
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
  }
  
  a.dBtn span:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-2;
    left:0;
    background-image: -moz-linear-gradient( 180deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 180deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 180deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
  }
  
  a.dBtn span:hover:before{
    opacity:0;
  }




a.dBtn:after{
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 13px; 
    height: 13px; 
    border-top: 1px solid #fff; 
    border-right: 1px solid #fff;
    transform: rotate(45deg);

}

a.dBtn:hover{ 
    display: block;
    position:relative;
}




/* ---------------------------------------------------------------------------------
btn */



@media(max-width:750px){



    a.dBtn{ 

        border-left:10px solid;
        border-image:linear-gradient(to top, rgb(128,0,63), rgb(192,4,99) 71%, rgb(202,0,100) 100%) 1;
        transition: all 0.3s ease-in-out;
    }

    a.dBtn span{
        height: 100px;
        font-size: 30px;
    }


    a.dBtn:after{
        content: "";
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 30px;
        width: 20px; 
        height: 20px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
    }
    
    
}





@media(max-width:750px){


}





/* ---------------------------------------------------------------------------------
top concept */

#pageNavi{ width: 100%; background: #F3f3f3;padding: 15px 0;}
#pageNavi ul{width:auto; max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
    row-gap: 0;
}
#pageNavi ul li{ border-right: 1px solid #ccc;}
#pageNavi ul li:last-child{ border-right: none;}
#pageNavi ul li a{padding:20px 0px; text-align: center; display: block; color: #333; position: relative;}
#pageNavi ul li a:hover{ background:#fff; border-radius: 4px; opacity: 1;}

#pageNavi ul li a:before{
  content: '';
 display: inline-block;
position: relative;
  top: -2px;
left: -5px;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 7px solid #b8045e;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 0 solid transparent;
  transform: translateY(1px);
  box-sizing: border-box;
}

@media(max-width:750px){
#pageNavi ul li a:before{

  top: -5px;
left: -5px;

}

} /* Responsive End */










/* ---------------------------------------------------------------------------------
onebox */



@media(max-width:750px){
	

}





/* ---------------------------------------------------------------------------------
yoko */



@media(max-width:750px){

    
    
}












/* ---------------------------------------------------------------------------------
common */


.clear{ clear:both;}
.tac{ text-align:center !important;}

@media(min-width:751px){
.sp{ display:none !important;}
} /* Responsive End */

@media(max-width:750px){
.pc{ display:none !important; }
} /* Responsive End */

@media(max-width:750px){
#commonFooter{ display:none !important; }
}

@media(max-width:750px){
#commonFooter{ display:none !important; }
}


@media(max-width:750px){
.tac_pc{ text-align:left !important;}
.tac_sp{ text-align:center !important;}
}

@media(min-width:751px){
.tac_pc{ text-align:center !important;}
.tac_sp{ text-align:left !important;}
}
