.rec-p1{
   font-size: 30px;
   text-align: center;
   font-weight: bold;
   margin-bottom: 90px;
}
.rec-message{
   display: flex;
   gap: 30px;
}
.rec-message .image-wrapper{
   max-width: 250px;
}
.rec-message p:first-of-type{
   margin-top: 0;
   margin-bottom: 5px;
}
.rec-message p:last-of-type{
   margin-bottom: 0;
}
.rec-p1 span.char{
   display: inline-block;
   transform: translateX(20px);
}
.rec-p1.displayed span.char{
   animation:textAnima_on 1s ease-out forwards;
}
@keyframes textAnima_on{
     0% {transform: translateX(20px);}
   100% {transform: translateX(0);}
}
.rec-p1.textAnima.displayed .subtitle{
   animation:fadeUpText 1s ease-out forwards;
}
.philosophy{
   display: flex;
   justify-content: center;
   margin: 120px 0;
}
.philosophy-item dt{
   display: flex;
   font-weight: bold;
   padding: 30px;
   height: 100%;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.philosophy-item{
   display: grid;
   grid-template-columns: 250px 1fr;
   column-gap: 20px;
   row-gap: 20px;
   align-items: center;
   border-bottom: 1px solid #ccc
}
.philosophy-item dt .en{
   font-size: 30px;
   color: #dd5252;
   line-height: 1.1em;
}
.philosophy-item dt .jp{
   font-size: 18px;
   color: #a0a0a0;
}
.philosophy-item dd{
   padding: 30px 0;
}
.philosophy-item dd .sub{
   color: #777777;
}
.philosophy-item dd strong{
   font-weight: bold;
   font-size: 18px;
}
.job-list-wrapper{
   display: flex;
   justify-content: center;
}
.job-list{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
   justify-content: center;
   gap: 20px;   gap: 10px;
   margin-top: 30px;
}
.job-item{
   display: flex;
   flex-direction: column;
   border: 1px solid #ccc;
   height: 200px;
   width: 250px;
   gap: 10px;
   padding: 15px;
}
.job-item dt{
   font-weight: bold;
   font-size: 18px;
}
h2.entry{
   margin-top: 100px;
   font-size: 35px;
   text-align: center;
}
/*************************************************************************
767px
**************************************************************************/
@media screen and (max-width:767px) {
   .rec-message {
      flex-direction: column-reverse;
      align-items: center;
   }
   .philosophy-item {
      grid-template-columns: 1fr;
   }
   .philosophy-item dd {
      padding: 0 0 60px;
   }
   .philosophy-item.mission dd,
   .philosophy-item.vision dd{
      text-align: center;
   }
}

/*************************************************************************
599px
**************************************************************************/
@media screen and (max-width:599px) {
   .philosophy{
      margin: 120px 0 70px;
   }
}