





@media(max-width:750px){

    
}


/* ---------------------------------------------------------------------------------
common */

.styleContHeader{}
.styleContHeader h2{font-size: 36px; text-align: center; font-weight: bold; font-style: italic; font-weight: 900;
margin-bottom: 90px;}
.styleContHeader h2 span{ letter-spacing: 0.1em;}

.styleIntroTxt01{ text-align: center; line-height: 2em;}
.styleIntroTxt02{ text-align: center; font-size: 20px; font-weight: 900; padding-bottom: 80px;}
.styleIntroTxt02 span{ border-bottom: 3px solid #b8045e; display: inline-block; padding: 0 5px;}


@media(max-width:750px){

    .styleContHeader h2{font-size: 44px; text-align:left; line-height: 1.5em;
        margin-bottom: 90px;}
        
.styleIntroTxt01{ text-align: left; line-height: 2em;}
.styleIntroTxt02{ text-align: left; font-size: 26px; font-weight: 900; padding-bottom: 150px; line-height: 2em;}
.styleIntroTxt02 span{ border-bottom: 3px solid #b8045e; display: inline-block; padding: 0;}
}





.keywordsHouse{ position: relative;}
.keywordsHouse header{
    top: -70px;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 26px;
    font-weight: 900;
    font-style: italic;
    position: absolute;
    height: 0;
    width: 100%;    
    border-bottom: 50px solid #b8045e;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom-image:linear-gradient(to top, rgb(128,0,63), rgb(192,4,99) 71%, rgb(202,0,100) 100%) 1;
    
}

.keywordsHouse header span{ position: absolute; width: 100%; left: 0; top: 30px;}

.keywordBody{ background: #dfdfdf;padding: 30px;}
.keywordBody ul{
    text-align: center;
    margin-bottom: -15px;
}   
.keywordBody ul li{ display: inline-block;width: 32%;margin-right: 10px;margin-bottom: 10px; border:1px solid #ccc; padding: 1px; background: #fff;}

.keywordBody ul li a{ display: block; height: 130px; position:relative;
    background-image: -moz-linear-gradient( 0deg, rgba(225,225,225,0.99608) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(225,225,225,0.99608) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(225,225,225,0.99608) 0%, rgb(255,255,255) 100%);
}





@media(min-width:751px){
.keywordBody ul li a .icon{ width:50px; position:absolute;
    top:50%;
    left:20px;
    transform: translate(0, -50%);
}
.keywordBody ul li a .text{ position:absolute;
    top:50%;
    margin-left: 90px;
    transform: translate(0, -50%);
}
.keywordBody ul li:nth-child(3n){ margin-right: 0;}
.keywordBody ul li:nth-child(5n){ margin-right: 0;}

.keywordBody ul li a .en{ display: block; color: #c20464; letter-spacing: 0.05em; text-align: left;}
.keywordBody ul li a .ja{ display: block; color: #000; font-size: 20px;font-weight: 700; line-height: 1em; text-align: left;}



}





@media(max-width:750px){

    .keywordBody ul li a{ text-align: center;padding: 20px 0;}
    .keywordBody ul{

    }

    .keywordBody ul li{ display: inline-block;width: 48%;margin-right: 5px;margin-bottom: 10px; border:1px solid #ccc; padding: 1px; background: #fff;}
    .keywordBody ul li:nth-child(2n){ margin-right: 0;}
    .keywordBody ul li:nth-child(5n){ margin-right: 0;}

    
    .keywordBody ul li a .icon{ 
        width:50px; 
        margin: 0 auto;
        padding-top: 20px;
    }

    .keywordBody ul li a .text{ 
    }

.keywordBody ul li a .en{ display: block; color: #c20464; letter-spacing: 0.05em; font-size: 18px; text-align: center;}
.keywordBody ul li a .ja{ display: block; color: #000; font-size: 22px;font-weight: 700; line-height: 1em; text-align: center;}



.keywordsHouse header{
    top: -120px;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 31px;
    line-height: 1.4em;
    font-weight: 900;
    font-style: italic;
    position: absolute;
    height: 0;
    width: 100%;    
    border-bottom: 100px solid #b8045e;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom-image:linear-gradient(to top, rgb(128,0,63), rgb(192,4,99) 71%, rgb(202,0,100) 100%) 1;
}

.keywordsHouse header span{ position: absolute; width: 100%; left: 0; top: 30px;text-align: center;}





}








/* ---------------------------------------------------------------------------------
INTRO */


.oneBenefit{}
.oneBenefit header{ position:relative;border-bottom: 1px solid #aaa; margin-bottom: 20px;}
.oneBenefit header .icon{ width: 60px; margin-right: 10px; display: inline-block;vertical-align: middle; padding-bottom: 10px; }
.oneBenefit header h3{display: inline-block; vertical-align: middle; line-height: 1em; padding-bottom: 6px; font-size: 22px;}

@media(max-width:750px){
    .oneBenefit header .icon{ width: 100px;}
    .oneBenefit header{ margin-bottom: 40px;}
    .oneBenefit header h3{font-size: 32px;}

}



.oneBenefit ul{
    width: auto;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

.oneBenefit ul.grid4{
    grid-template-columns: repeat(4, 1fr);
}
.oneBenefit ul li{}
.oneBenefit ul li figure{}
.oneBenefit ul li figcaption{}
.oneBenefit ul li h4{ color: #957f55;padding: 20px 0 15px; line-height: 1em;font-size: 20px;}
.oneBenefit ul li p{}

@media(max-width:750px){

.oneBenefit ul{
    width: auto;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 30px;
}

.oneBenefit ul.grid4{
    grid-template-columns: repeat(2, 1fr);
}

.oneBenefit ul li h4{ color: #957f55;padding: 20px 0 15px; line-height: 1.4em;font-size: 30px;}

}


