.profile-section {
    max-width: 1000px;
    margin: 80px auto;
    padding: 20px;
    /* display: flex; */
    justify-content: center;
}

.profile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.profile-image img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-info {
    flex: 1;
    min-width: 300px;
}

.profile-name {
    font-size: 2rem;
    margin-bottom: 10px;
}

.profile-name .en-name {
    font-size: 18px;
    color: #ffffff;
    margin-left: 10px;
}

.profile-role {
    font-size: 16px;
    font-weight: bold;
    color: #2e5fa8;
    margin-bottom: 20px;
}

.profile-details h3 {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 5px;
}

.profile-details ul {
    padding-left: 20px;
}

.profile-details ul li {
    list-style-type: disc;
    margin-bottom: 6px;
}

.member-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* はみ出し要素非表示 */
    z-index: 0;
}


/* 左右反転（reverseクラスで画像とテキストを左右逆に） */

.member-detail.reverse {
    flex-direction: row-reverse;
}


/* ===== 共通の斜め線ベース ===== */


/* 共通の斜め線ベース */

.member-detail::before {
    content: "";
    position: absolute;
    top: 47%;
    left: 50%;
    width: 200%;
    height: 500px;
    transform: translate(-50%, -50%) rotate(-10deg);
    /* 通常：右上から左下へ */
    z-index: -1;
}


/* reverse時：斜め線の向きを逆に（左上→右下） */

.member-detail.reverse::before {
    transform: translate(-50%, -50%) rotate(10deg);
    /* top: 60%; */
}


/* ===== 背景色バリエーション（メンバーごと）===== */


/* .member-detail.blue::before {
  background: linear-gradient(180deg, #2e5fa8, #6a8ecf);
}

.member-detail.yellow::before {
  background: linear-gradient(180deg, #e5b144, #f9d976);
}

.member-detail.green::before {
  background: linear-gradient(180deg, #4eb714, #c6e228);
}

.member-detail.orange::before {
  background: linear-gradient(180deg, #e58b3c, #fbbf70);
}

.member-detail.red::before {
  background: linear-gradient(180deg, #d63c3c, #f38b8b);
} */

.member-detail.blue::before {
    background: linear-gradient(180deg, #2e5fa8, #6a8ecf);
}

.member-detail.green1::before {
    background: linear-gradient(180deg, #ffdd00, #4ccb07);
}

.member-detail.yellow::before {
    background: linear-gradient(180deg, #e5b144, #f9d976);
}

.member-detail.green::before {
    background: linear-gradient(180deg, #4eb714, #c6e228);
}

.member-detail.orange::before {
    background: linear-gradient(180deg, #e58b3c, #fbbf70);
}

.member-detail.red::before {
    background: linear-gradient(180deg, #d63c3c, #f38b8b);
}


/* .social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.sns-icon {
  font-size: 24px;
  color: #444;
  transition: transform 0.3s, color 0.3s;
} */

.profile-section .btn {
    text-align: center;
}

@media screen and (max-width: 768px) {
    .profile-container {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        align-items: center;
        justify-self: center;
    }
}