@charset "UTF-8";

.people_1 { 
    background: url(/shisetsu/about/people/img/01.jpg);
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
     -ms-background-size: cover;
         background-size: cover;
}
.people_2 { 
  background: url(/shisetsu/about/people/img/02.jpg);
  background-position: center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -ms-background-size: cover;
       background-size: cover;
}

.photo_yamada { 
  background: url(/shisetsu/about/people/img/yamada_00.jpg);
  background-position: top right 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -ms-background-size: cover;
       background-size: cover;
}

.photo_ueda { 
  background: url(/shisetsu/about/people/img/ueda_00.jpg);
  background-position: top right 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -ms-background-size: cover;
       background-size: cover;
}

.photo_maeda { 
  background: url(/shisetsu/about/people/img/maeda_00.jpg);
  background-position: top right 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -ms-background-size: cover;
       background-size: cover;
}

.photo_tada { 
  background: url(/shisetsu/about/people/img/tada_00.jpg);
  background-position: top right 10%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
   -ms-background-size: cover;
       background-size: cover;
}

/* ------------------------------
  h1, h2, h3
------------------------------ */
h1 {
  padding: 1vmin 0vmin;
}

h2 {
  padding: 1vmin 2vmin 1vmin 3vmin !important;
  margin: 2vmin 0vmin;
  background: none !important;
  border-left: solid 5px #79aa29 !important;
}

h3 {
  padding: .25em .25em .25em 1em;
  color: #252525;
  border-bottom: solid 3px #e5e2da;
}

/* ------------------------------
  list
------------------------------ */
ul.people {
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.2em;
  margin: 0;
}

ul.people li {
  line-height: 1.5;
  padding: 0.25em 0;
  list-style-type: none!important;
}

ul.people li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 0em; 
  color: #92b35d;
  font-weight: 900;
  size: 1em; 
}

.udlr-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* ------------------------------
  index.html
------------------------------ */
.flex-item-p {
    position: relative;
}
    .circle {
        width:  220px;
        height: 220px;
        border-radius: 50%;
    }

    .flex-mask {
      position: relative;
      height: 100%;
      line-height: 100%;
      background: rgba(255,255,255,0.5);
      text-align: center;
      opacity: .999;
    }

      .flex-mask a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

        .flex-mask a span {
          position: relative;
          top: 45%;
          height: 100%;
        }

    .flex-mask, .fill-vert-p:before, .fill-vert-p:after {
      transition: all .35s;
    }

    .fill-vert-p {
      overflow: hidden;
      
    }
    .fill-vert-p:before, .fill-vert-p:after {
      content: '';
      width: 100%;
      height: 0;
      opacity: .1;
      position: absolute;
      left: 0;
      z-index: -1;
    }
    .fill-vert-p:before {
      top: 50%;
      background-color: #9bdb34;
    }
    .fill-vert-p:after {
      bottom: 50%;
      background-color: #9bdb34;
    }
    .fill-vert-p:hover {
      color: #fff;
    }
    .fill-vert-p:hover:before, .fill-vert-p:hover:after {
      height: 50%;
      opacity: .6;
    }

/* ------------------------------
  neumorphism card
------------------------------ */
.neumorphism {
  flex-direction: column;
  align-items: center;
  padding: 3vmin;
  position: relative;
  background: transparent;
  background-color: #fffaf7;
  box-shadow: 4px 4px 16px rgba(198, 179, 163, 0.6), -6px -6px 16px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
}
.neumorphism div {
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  display: inline-block;
  vertical-align: middle;
}