/******************** policy ********************/
#policy{
    color:#4dc4ff;
    text-align: center;
}

#policy div.p_h2{
    padding:50px 0;
    font-size:2.4rem;
}

#policy h2{
    font-size:3.6rem;
}

#policy p{
    line-height: 2.5em;
    margin:0;
}

#policy #mission{
    background:url(/company/img/bg_mission.jpg) center top / cover no-repeat;
    padding:50px 0;
    color:#fff;
}

#policy #mission h3,
#policy #values h3{
    font-size:10rem;
    font-style: italic;
    color:rgba(255, 255, 255, 0.3);
}

#policy #mission h3 span,
#policy #values h3 span{
    font-weight:500;
    display:block;
    font-size:1.8rem;
    color:rgba(255, 255, 255,1);
    text-decoration: underline;
    margin-top: -6.8rem;
}

#policy #values h3{
    margin-bottom:-8rem;
}

#policy #mission h4{
    font-weight:500;
    margin:20px 0;
    font-size:3.6rem;
}

#policy #values{
    background:url(/company/img/bg_values.jpg) center center / cover no-repeat;
    padding:50px 0 150px;
    color:#fff;
}


#policy #values .inner{
    max-width:800px;
    width:90%;
    margin:0 auto;
}

#policy #values .inner div{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin:-40px 0;
}

#policy #values h4{
    font-weight: 900;
    font-size:26rem;
    font-style: italic;
    color:rgba(255, 255, 255, 0.5);
    width:35%;
}

#policy #values p{
    width:40%;
    text-align:left;
    margin-top:18rem;
}

#policy #values h4 span{
    font-weight:500;
    display:block;
    font-size:2.4rem;
    color:rgba(77, 196, 255,1);
    margin-top: -22rem;
    background:#fff;
    transform:Skew(-6deg, -6deg);
}


#policy #values div.v_02 h4{
    order: 0;
}
#policy #values div.v_02 p{
    order: -1;
}



/******************** about ********************/

#about{
    padding:30px 0;
}

#profile,
#histry,
#origin {
    margin:60px 0;
}


#profile dl,
#histry dl{
    display:flex;
    flex-wrap: wrap;
    margin-top:50px;
}

#profile dl dt {
    width: 30%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #4dc4ff;
  }
  
 #profile dl dd ,
 #histry dl dd{
    width: 70%;
    padding-bottom: 10px;
    padding-left:1.5em;
    margin-bottom: 10px;
    border-bottom: 1px solid #4dc4ff;
  }

  #histry dl dt{
    width: 30%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #4dc4ff;
    font-weight:400;
    text-align:right;
  }

  #origin img{
    margin:20px auto;
    max-width:300px;
    width:70%;
    display: block;
}

#origin h3{
    color:#4dc4ff;
    font-size:1.8rem;
    margin:30px 0 -10px;
}


  /******************** access ********************/
#access{
    padding:80px 0;
}

#access .inner{
    margin-top:30px;
    display: flex;
    justify-content:space-between;
}

#access .map{
    width:60%;
    height:400px;
}

#access .info{
    margin-left:20px;
    width:40%;
}

#access .info p{
    margin-top:0;
}

#access .info .pdf{
    color:blue;
}

#access .info .pdf a{
    color:blue;
    text-decoration: underline;
    display: inline;
}



/******************** sp ********************/
@media only screen and (max-width: 767px) {

    #policy #mission{
        background:url(/company/img/sp_bg_mission.jpg) center center / cover no-repeat;
    }

    #policy #values .inner div,
    #access .inner{
        display:block;
    }

    #policy #values div{
        margin-top:0;
    }

    #policy #values div h4{ 
        width:auto;
        display:inline-block;
        margin:0 auto;
    }


    #policy #values div h4 span{ 
        padding: 0 40px;
    }


    #policy #values div p{
        width:100%;
        margin-top:8rem;
    }

    #policy h2,
    #policy .read{
        margin:20px 0;
    }

    #access .inner div{
        width:100%;
    }

    #access .inner .info{
        margin:1.5rem 0 0 0;
    }

}