/* ==========================================================================
   講師紹介ページ用スタイル
   ========================================================================== */

.instructor-grid {
    display: grid;
    /* 画面幅に合わせて列数を自動調整 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.instructor-card {
    /* 既存のcardスタイルを継承しつつ、中の要素を中央揃えに */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instructor-card img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%; /* 画像を正円形に */
    margin-bottom: 1.2rem;
    /* 既存のカードホバーと合わせ、少しリッチな影を追加 */
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.1);
    border: 5px solid #fff; /* 白い縁取りで写真を際立たせる */
    transition: all 0.3s ease-in-out;
}

/* カードのホバーエフェクトと連動して、画像も少し動かす */
.instructor-card:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(141, 110, 99, 0.2);
}

.instructor-card .card-title {
    /* 講師名は少し濃い色にして読みやすく */
    color: var(--color-heading); 
}

.instructor-card .card-text {
    /* 経歴の文字サイズを少し調整 */
    font-size: 0.9rem;
    flex-grow: 1; /* カードの高さを揃えるため */
}

/* レスポンシブ対応 */
@media (max-width: 520px) {
    .instructor-grid {
        /* スマートフォンでは少しギャップを狭くする */
        gap: 1.5rem;
    }
}

/*
* 円形要素のスタイル
*/
.circle-text {
/* 1. 円のサイズ */
width: 140px;
height: 140px;

/* 2. 背景色 */
background-color: var(--circle-color, #007bff);

/* 3. 正円にする */
border-radius: 50%;

/* 4. テキストの色 */
color: rgb(155, 155, 155);

/* 5. Flexboxでテキストを中央揃え */
display: flex;
justify-content: center;
align-items: center;

/* 6. 複数行の場合のテキスト揃え */
text-align: center;

/* --- ↓ここから追加・変更↓ --- */

/* 7. 上下に余白を追加 (120pxの2割 = 24px) */
margin: 24px 0;
margin-top: 0px;

/* 8. 白い外縁の線を追加 (太さ 4px) */
border: 4px solid rgb(255, 255, 255);

/* 9. borderをwidth/heightの内側に含める */
box-sizing: border-box;

/* --- ↑ここまで追加・変更↑ --- */

/* 1. アニメーションを滑らかにする設定 */
/* 変化にかかる時間（0.3秒）と変化の仕方（ease-in-out）を指定 */
transition: transform 0.3s ease-in-out, 
            box-shadow 0.3s ease-in-out;

/* 2. カーソルの形を変更（クリックできることを示す） */
cursor: pointer;

/* 3. ホバー前の影を定義（最初は薄い影）*/
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

/* フォントの調整 */
font-size: 1.3rem;
/* font-weight: bold; */
font-family: "Hachi Maru Pop", cursive;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* 比較用の小さい円 */
.circle-text.small-red {
width: 60px;
height: 60px;
background-color: #dc3545;
font-size: 1rem;
margin: 12px 0; /* こちらの余白も調整 */
border-width: 2px; /* 線の太さも調整 */
}

.circle-text:hover {
/* わずかに拡大 (1.05 = 5%拡大) */
transform: scale(1.04);

/* 影を濃く、大きくする */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}