.blue {
  color: #40baff; }

.person li:nth-child(1) {
  z-index: 13; }
  .person li:nth-child(1) .pht-box .post {
    background-color: #6fd100; }
  .person li:nth-child(1) .prof .name .en {
    color: #6fd100; }

.person li:nth-child(2) {
  z-index: 12; }
  .person li:nth-child(2) .pht-box .post {
    background-color: #f4bf00; }
  .person li:nth-child(2) .prof .name .en {
    color: #f4bf00; }

.person li:nth-child(3) {
  z-index: 11; }
  .person li:nth-child(3) .pht-box .post {
    background-color: #6fd100; }
  .person li:nth-child(3) .prof .name .en {
    color: #6fd100; }

.person li:nth-child(4) {
  z-index: 10; }
  .person li:nth-child(4) .pht-box .post {
    background-color: #f4bf00; }
  .person li:nth-child(4) .prof .name .en {
    color: #f4bf00; }

.person li:nth-child(5) {
  z-index: 9; }
  .person li:nth-child(5) .pht-box .post {
    background-color: #6fd100; }
  .person li:nth-child(5) .prof .name .en {
    color: #6fd100; }

.person li:nth-child(6) {
  z-index: 8; }
  .person li:nth-child(6) .pht-box .post {
    background-color: #008eff; }
  .person li:nth-child(6) .prof .name .en {
    color: #008eff; }

.person li:nth-child(7) {
  z-index: 7; }
  .person li:nth-child(7) .pht-box .post {
    background-color: #40baff; }
  .person li:nth-child(7) .prof .name .en {
    color: #40baff; }

.person li:nth-child(8) {
  z-index: 6; }
  .person li:nth-child(8) .pht-box .post {
    background-color: #f270ba; }
  .person li:nth-child(8) .prof .name .en {
    color: #f270ba; }

.person li:nth-child(9) {
  z-index: 5; }
  .person li:nth-child(9) .pht-box .post {
    background-color: #f74241; }
  .person li:nth-child(9) .prof .name .en {
    color: #f74241; }

.person li:nth-child(10) {
  z-index: 4; }
  .person li:nth-child(10) .pht-box .post {
    background-color: #ff7326; }
  .person li:nth-child(10) .prof .name .en {
    color: #ff7326; }

.person li:nth-child(11) {
  z-index: 3; }
  .person li:nth-child(11) .pht-box .post {
    background-color: #8871cd; }
  .person li:nth-child(11) .prof .name .en {
    color: #8871cd; }

.person li:nth-child(12) {
  z-index: 2; }
  .person li:nth-child(12) .pht-box .post {
    background-color: #059e23; }
  .person li:nth-child(12) .prof .name .en {
    color: #059e23; }

.person li:nth-child(13) {
  z-index: 1; }
  .person li:nth-child(13) .pht-box .post {
    background-color: #f79174; }
  .person li:nth-child(13) .prof .name .en {
    color: #f79174; }

.person li:nth-child(14) {
  z-index: 0; }
  .person li:nth-child(14) .pht-box .post {
    background-color: #38e2ca; }
  .person li:nth-child(14) .prof .name .en {
    color: #38e2ca; }

@keyframes ft {
  0% {
    opacity: 0;
    transition-duration: 1s;
    transform: translateY(10px); }
  100% {
    opacity: 1;
    transition-duration: 1s;
    transform: translate(0); } }
.main-title .in {
  animation: ft 1s forwards; }

@media screen and (min-width: 769px), print {
  .fadein_t_pc {
    animation: ft 1s forwards;
    opacity: 0;
    animation-delay: 0.2s; }

  .more {
    display: block; }
    .more .pht-box {
      overflow: hidden;
      transition: opacity 0.7s ease; }
      .more .pht-box img {
        transition: all 0.7s ease-out; }
    .more .prof {
      transition: all 0.7s ease; }
    .more .btn {
      font-size: 10px;
      line-height: 1;
      margin-top: 25px;
      display: inline-block;
      position: relative;
      padding-right: 55px; }
      .more .btn::before {
        position: absolute;
        content: "";
        bottom: 3px;
        right: 5px;
        margin: auto;
        width: 40px;
        height: 6px;
        border-right: solid 1px #222;
        border-bottom: solid 1px #222;
        transform: skew(45deg);
        transition: all 0.7s ease; }
    .more:hover .fukidashi {
      opacity: 1;
      transform: translateY(0); }
    .more:hover .prof {
      opacity: 0.7; }
    .more:hover .pht-box img {
      transform: scale(1.1); }
    .more:hover .btn::before {
      opacity: 0.7;
      transform: translateX(10px) skew(45deg); }

  .main-title {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 100px;
    position: relative; }
    .main-title::after {
      content: "";
      display: block;
      background-image: url(../img/title_bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 520px;
      height: 200px;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto; }
    .main-title p.en {
      color: #6ac9ff;
      font-size: 12px; }
    .main-title h2 {
      font-size: 30px;
      padding: 20px;
      font-weight: 500; }
    .main-title p.lead {
      letter-spacing: 0.15em;
      font-size: 18px;
      font-weight: 500;
      margin-top: 85px;
      line-height: 2; }

  .content-wrap:not(:first-child) {
    margin-top: 164px; }

  .content-area {
    width: 1040px;
    margin: auto;
    margin-top: 40px;
    position: relative; }

  .person {
    width: 900px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 75px 35px; }
    .person li {
      width: 276px;
      position: relative; }
      .person li .fukidashi {
        width: 190px;
        position: absolute;
        z-index: 1;
        top: -56px;
        right: -86px;
        z-index: 1;
        transform: translateY(-10px);
        opacity: 0;
        transition: all 0.7s ease; }
      .person li .pht-box {
        position: relative; }
        .person li .pht-box .post {
          position: absolute;
          left: 0;
          bottom: 0;
          font-weight: 500;
          font-size: 18px;
          color: white;
          background-color: #008eff;
          padding: 3px 10px; }
      .person li .prof {
        margin-top: 8px; }
        .person li .prof .name {
          font-size: 20px;
          letter-spacing: 0.2em; }
          .person li .prof .name .en {
            display: block;
            font-size: 12px;
            margin: 3px 0 4px;
            letter-spacing: 0.1em; } }
@media screen and (max-width: 768px), print {
  .fadein_t_sp {
    animation: ft 1s forwards;
    opacity: 0;
    animation-delay: 0.2s; }

  .more {
    height: 100%;
    display: block;
    transition: opacity 0.7s ease; }
    .more .btn {
      font-size: 10px;
      line-height: 1;
      margin-top: 24px;
      display: inline-block;
      position: relative;
      padding-right: 55px; }
      .more .btn::before {
        position: absolute;
        content: "";
        bottom: 3px;
        right: 5px;
        margin: auto;
        width: 40px;
        height: 6px;
        border-right: solid 1px #222;
        border-bottom: solid 1px #222;
        transform: skew(45deg);
        transition: transform 0.7s ease; }

  .main-title {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 60px;
    position: relative; }
    .main-title::after {
      content: "";
      display: block;
      background-image: url(../img/title_bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 100%;
      height: 200px;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto; }
    .main-title p.en {
      color: #6ac9ff;
      font-size: 12px; }
    .main-title h2 {
      width: 100%;
      font-size: 24px;
      padding: 14px 0;
      font-weight: 500; }
    .main-title p.lead {
      font-size: 16px;
      font-weight: 500;
      margin-top: 60px;
      line-height: 2;
      letter-spacing: 0.15em; }

  .content-wrap:not(:first-child) {
    margin-top: 360px; }

  .content-area {
    padding: 0 5%;
    padding-top: 50px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative; }

  .fukidashi {
    min-width: 170px;
    width: 62%;
    max-width: 300px;
    position: absolute;
    z-index: 1;
    top: -32px;
    right: -20px;
    z-index: 1; }

  .person li:nth-child(even) .fukidashi {
    left: -20px; }

  .person {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 10px; }
    .person li {
      width: 100%;
      position: relative;
      margin-top: 10px; }
      .person li:nth-child(even) {
        margin-top: 20px; }
      .person li .pht-box {
        position: relative; }
        .person li .pht-box img {
          width: 100%; }
        .person li .pht-box .post {
          position: absolute;
          left: 0;
          bottom: 0;
          font-weight: 500;
          color: white;
          background-color: #008eff;
          padding: 3px 10px; }
      .person li .prof {
        margin-top: 8px; }
        .person li .prof .name {
          font-size: 17px;
          letter-spacing: 0.2em; }
          .person li .prof .name .en {
            display: block;
            font-size: 12px;
            margin: 4px 0 5px;
            line-height: 1.2;
            letter-spacing: 0.1em; }
        .person li .prof .other {
          line-height: 1.4; } }