@charset "UTF-8";

/* ============= */
/* MENBER        */
/* ============= */

/* カードのスタイル */
#page .card {
    border: 1px solid #ddd; /* カードのボーダー */
    border-radius: 0.4rem; /* カードの角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* カードのシャドウ */
    padding: 10px; /* カード内のパディング */
    margin-bottom: 20px; /* カードの下マージン */
    background-color: #fff; /* カードの背景色 */
}

/* カードボックスのスタイル */
.l-menber-card-box1,
.l-menber-card-box2,
.l-menber-card-box3 {
    margin-bottom: 0; /* カードボックスの下マージンを削除 */
}

.l-menber-card-box2 {
    border-bottom: 1px solid #007bff; /* カードボックスの下ボーダー */
    padding-bottom: 4px; /* カードボックスの下パディング */
    margin-bottom: 6px; /* カードボックスの下マージン */
}

/* カテゴリリストのスタイル */
.category-list {
    list-style-type: disc; /* リストのマーカーをディスク型に設定 */
    margin: 0; /* リストのマージンをリセット */
    padding: 0; /* リストのパディングをリセット */
}

.category-list li {
    margin-bottom: 0.25rem; /* リスト項目の下マージン */
    font-size: -3.6rem; /* リスト項目のフォントサイズ */
    font-weight: 400; /* リスト項目のフォントウェイト */
    letter-spacing: 0.15rem; /* リスト項目の文字間隔 */
    color: #333; /* リスト項目の文字色 */
    display: inline; /* リスト項目をインライン表示 */
}

.category-list li::after {
    content: ", "; /* リスト項目の後にカンマを追加 */
}

.category-list li:last-child::after {
    content: ""; /* 最後のリスト項目の後にカンマを削除 */
}

/* 英字のスタイル */
.name-english {
    font-size: 1.0rem; /* 英字のフォントサイズ */
    color: #666; /* 英字の文字色 */
    margin-top: 0; /* 英字の上マージンを削除 */
}

/* カードボックス3のスタイル */
.l-menber-card-box3 {
    display: flex; /* フレックスボックスでレイアウト */
    justify-content: space-between; /* フレックスアイテムを両端に配置 */
}

.more-text {
    flex-grow: 1; /* 余分なスペースを占有 */
    display: flex; /* フレックスボックスでレイアウト */
    justify-content: flex-end; /* コンテンツを右揃え */
    align-items: center; /* 垂直方向の中央揃え */
}

.more-text::before {
    content: "/ / / / / / more"; /* 「more」のテキスト */
    font-size: 1rem; /* 「more」のフォントサイズ */
    color: #000; /* 「more」の文字色 */
}

/* リンクのスタイル */
.profile-link {
    text-decoration: none; /* リンクの下線を削除 */
}
/*//////////////////////////////////////////////////////////////*/
/* モーダル全体のスタイル */
.modal-content {
    display: flex; /* フレックスボックスでレイアウト */
    flex-direction: column; /* 縦方向にレイアウト */
    height: 100%; /* 高さを100%に設定 */
    
}

.modal-body {
    flex: 1; /* フレックスアイテムとしての伸縮性 */
    overflow-y: auto; /* 縦方向のスクロールを許可 */
    border-radius: var(--bs-modal-border-radius); /* モーダルボディの角丸 */
}
/*モーダル用*/
.modal-body .row {
    --bs-gutter-x: 0; /* 行の横ガターをリセット */
    --bs-gutter-y: 0; /* 行の縦ガターをリセット */
    display: flex; /* フレックスボックスでレイアウト */
    flex-wrap: wrap; /* フレックスアイテムの折り返しを許可 */
    margin-top: calc(-1* var(--bs-gutter-y)); /* 行の上マージン */
    margin-right: calc(-0.5* var(--bs-gutter-x)); /* 行の右マージン */
    margin-left: calc(-0.5* var(--bs-gutter-x)); /* 行の左マージン */
}
/*左側*/
.profile-img-box {
    padding: 0; /* プロフィール画像ボックスのパディングを削除 */
    position: relative;
    background-color: #f0f0f0; /* 背景色を設定 */
    display: flex;
    align-items: center;
    justify-content: center;
}
    /* 画面幅が991px以下の場合に「/」を非表示 */
    @media (max-width: 991px) {
      .profile-img-box {
        height: 400px;
      }
    }
.no-data {
    position: absolute;
    font-size: 1rem;
    color: #999;
    

}

/* プロフィール画像のスタイル */
.modal-content .profile-img {
    width: 100%; /* プロフィール画像の幅を100%に設定 */
    height: 100%; /* プロフィール画像の高さを100%に設定 */
    object-fit: cover; /* 画像のサイズ調整 */
}

/*右側*/
.profile-details {
    padding: 30px; /* プロフィール詳細のパディング */
}

/*カテゴリ*/
.profile-category {
    margin-bottom: 0; /* プロフィールカテゴリーの下マージンを削除 */
    font-size: 1rem;
}

/* 名前のスタイル */
h4.modal-name {
    color: var(--font-base-color); /* 名前の文字色 */
    font-size: 2.25rem; /* 名前のフォントサイズ */
    font-weight: 900; /* 名前のフォントウェイト */
    letter-spacing: 0.15rem; /* 名前の文字間隔 */
    margin-bottom: -5px; /* 名前の下マージン */
}

/*SNSリンク*/
.profile-sns {
    margin-bottom: 1.2rem; /* プロフィールsnsの下マージン */
}
.profile-sns li{
    margin-right: 1.2rem; /* プロフィールsnsの下マージン */
}

/*挨拶文*/
.profile-description {
    margin-bottom: 2rem; /* プロフィール説明の下マージン */
    display: flex; /* フレックスボックスでレイアウト */
    flex-direction: column; /* 縦方向にレイアウト */
    justify-content: center; /* 中央揃え */
    align-items: flex-start; /* 左揃え */
}
/*挨拶文　フォント*/
.profile-description p{
    font-size: 1.2rem;
    font-weight: 400;
}

/* Showcaseセクションのスタイル */
.profile-showcase h5 {
    font-size: 0.8rem; /* Showcaseタイトルのフォントサイズ */
    font-weight: 500; /* Showcaseタイトルのフォントウェイト */
    margin-bottom: 0; /* Showcaseタイトルの下マージンを削除 */
}

.profile-showcase ul {
    list-style-type: none; /* リストのマーカーを削除 */
    padding: 0; /* リストのパディングを削除 */
    margin: 0; /* リストのマージンを削除 */
}

.profile-showcase li {
    margin-bottom: 3px; /* リスト項目の下マージン */
    display: list-item; /* リスト項目として表示 */
}

.profile-showcase li a {
    text-decoration: none; /* リンクの下線を削除 */
    color: #333; /* リンクの文字色 */
    font-size: 0.8rem; /* リンクのフォントサイズ */
    display: flex; /* フレックスボックスでレイアウト */
    align-items: center; /* 垂直方向に中央揃え */
}

    .profile-showcase a:hover {
        text-decoration: underline; /* ホバー時に下線を表示 */
    }

.profile-showcase .showcase-title {
    font-weight: 400; /* タイトルを太字に */
    margin-right: 5px; /* タイトルとセパレーターの間にスペース */
    position: relative; /* 相対位置に設定 */
    line-height: 1.1rem;
}

.profile-showcase .showcase-title::after {
    content: "/"; /* タイトルの後にスラッシュを追加 */
    margin-left: 5px; /* スラッシュと内容の間にスペース */
    color: #333; /* スラッシュの文字色 */
}

.profile-showcase .showcase-content {
    color: #666; /* 内容の文字色 */
}

/*その他*/
/* モーダルの背景に閉じるボタンを配置 */
.modal-close-button {
    position: absolute; /* 絶対位置に設定 */
    bottom: -50px; /* 下からの位置 */
    left: 45%; /* 左からの位置 */
    z-index: 1050; /* モーダルの上に配置 */
    background-color: rgba(0, 0, 0, 0); /* 半透明の背景色 */
    color: white; /* ボタンの文字色 */
    border: none; /* ボーダーなし */
    width: 50px; /* ボタンの幅 */
    height: 50px; /* ボタンの高さ */
    display: flex; /* フレックスボックスで中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
}

    /* 画面幅が991px以下の場合に「/」を非表示 */
    @media (max-width: 991px) {
      .modal-close-button {
        bottom: -50px; /* 上からの位置 */
      }
    }

.modal-close-button::before {
    content: "\00d7"; /* ×を表示 */
    font-size: 50px; /* フォントサイズ */
    font-weight: 100; /* フォントウェイト */
}