@charset "UTF-8";
/* CSS Document */
/* タイトル共通パーツ */
.page_container {
  width: 100%;
}
.page_title_wrap{
    width: 100%;
    background-image: linear-gradient(180deg, rgba(1, 21, 56, 1), rgba(19, 63, 113, 1) 100%);
    height: 25vw;
}
.page_title{
    background: url("../img/company/company_tit_bg.jpg") no-repeat;
    height: 35vw;
    background-position: top left;
    background-size: 80%;
    	animation: fadedown 1.7s ease 0s 1 normal;
    -webkit-animation: fadedown 1.7s ease 0s 1 normal;
}
@keyframes fadedown {
from {
    opacity: 0;
    transform: translateX(-30px);
}
to {
    opacity: 1;
    transform: translateX(0px);
}
}
.page_title h1{
    text-align: right;
    color: #fff;
    padding: 10% 10% 0 0;
    font-size: 3vw;
    font-weight: 900;
}
.page_title h1 span{
    display: block;
    font-size: 1.8vw;
}


h2,.greetings_txt{
    width: 60%;
    margin: 0 auto;
}
h2{
    color: #011538;
    font-size: 2.5vw;
    font-weight: 900;
    padding-bottom: 2%;
}
.greetings{
    color: #fff;
    background: url("../img/company/greeting_bg.jpg") no-repeat center bottom;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: space-between;
}
.greetings_txt{
    width: 100%;
    color: #fff;
    padding-left: 20%;
}
.greetings h3{
    font-size: 2vw;
    font-weight: 900;
    padding: 5% 2% 2% 0;
}
.greetings p{
    line-height: 1.8em;
    margin-bottom: 15px;
}
.ceo_name{
    text-align: right;
    padding-bottom: 5%;
}
.ceo_name span{
    font-size: 1.5vw;
    font-weight: 900;
    margin-left: 3%;
}
.greetings_ceo{
    background: url("../img/company/ceo.png") no-repeat top right;
    background-size: 80%;
    position: relative;
    width: 100%;
    margin-right: 20%;
        -webkit-transition: 1.2s ease-in-out;
    -moz-transition: 1.2s ease-in-out;
    -o-transition: 1.2s ease-in-out;
    transition: 1.2s ease-in-out;
    transform: translateY(-60px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.greetings_ceo.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateY(0);
}
.greetings_ceo p{
    padding-top: 75%;
    text-align: right;
    position: absolute;
    right:-20%;
}
.greetings_ceo img{
    width: 70%;

}
.effort {
    width: 60%;
    margin: 0 auto;
    padding: 5% 0;
}
.effort ul{
    display: flex;
    justify-content: space-between;   
}
.effort ul li{
    width: 30%;
}
.effort ul li img{
    width: 100%;
}
.effort ul li p:before {
    content: "＋";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    background: #011538;
    color: #fff;
    margin-right: 10px;
    padding: 2px;
}
.effort ul li a{
    color: #011538;
    text-decoration:none;
    
}
.company_profile{
    background-image: linear-gradient(180deg, rgba(1, 21, 56, 1), rgba(19, 63, 113, 1) 100%);
    font-size: 1vw;
    padding: 5% 0;
}
.company_profile table{
    width: 60%;
    margin: 0 auto;
}
.company_profile table,.company_profile tr th,.company_profile tr td{
         border-collapse: collapse;
         border-spacing: 0;
         color: #fff;
         border-bottom: 1px solid #fff;
         padding: 10px 0;
     }
.company_profile tr th{
    width: 30%;
    text-align: left;
    vertical-align: bottom;
        }
     .company_profile table tr td{
    text-align: left;
    font-family: Arial, Helvetica, "sans-serif";
       line-height:1.6em;
        }
  .company_profile table tr th:first-child,.company_profile table tr td:first-child{  
    padding-top:0px;
      }
.bnr{
    width: 60%;
    margin: 0 auto;
    padding: 5% 0;
}
.bnr ul li img{
    width: 30%;
}   
    
@media screen and (max-width: 1400px) {
    h2,.greetings_txt,.effort,.company_profile table,.bnr{
    width: 80%;
}
    .greetings_txt{
        padding-left: 10%;
}
    .greetings_ceo{
        margin-right: 10%;
    }
}
@media screen and (max-width: 1050px) {
    h2{
       font-size: 20px;
    }
        h2,.greetings_txt,.effort,.company_profile table,.bnr{
    width: 90%;
}
        .greetings_txt{
        padding-left: 5%;
}
    .greetings h3{
    font-size: 18px;
    }
    .greetings p,.effort ul,.company_profile table{
    font-size: 14px;
    } 
    .ceo_name span{
        font-size: 16px;
    }
}
@media screen and (max-width: 780px) {
    .page_title h1{
    font-size: 5vw;
        padding-right: 5%;
}
.page_title h1 span{
    font-size: 3vw;
}
    .greetings{
        height: 170vh;
    }
    .greetings_txt{
        padding-left: 0%;
    }
    .greetings_ceo{
        height: 100%;
        position: absolute;
        background-position: top;
        margin-right: 0;
        top:130%;
    }
    .greetings_ceo p{
        right: 0;
    }
    .greetings,.effort ul{
    flex-direction:column;
    }
    .effort ul li{
    width: 100%;
        margin-bottom: 5%;
}
    .bnr ul li img{
    width: 100%;
} 
}
@media screen and (max-width: 500px) {
     .greetings{
        height: 160vh;
    }
     .greetings_ceo{
        top:150vh;
    }


}

@media screen and (max-width: 375px) {
    .greetings{
        height: 170vh;
    }
    .greetings_ceo{
        top:160vh;
    }


}