/* 2025年度対応スタイル */

/* 教師紹介ページ レスポンシブ対応 - タブレット・スマホ閲覧時の縦1列レイアウト */
@media screen and (max-width: 948px) {
    /* コンテンツエリア全体の調整 */
    div#contents {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }
    
    div#contents div#contents-bg {
        width: 100% !important;
        background: none;
        padding: 0;
        margin: 0;
    }
    
    div#board {
        width: 100% !important;
        padding: 15px 0px;
        margin: 0;
    }
    
    #teachers {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }
    
    /* 教師紹介ボックスを縦1列に配置 */
    .tbox, .tlo, .tlarge {
        width: 100% !important;
        margin-bottom: 25px;
        float: none !important;
        display: block;
        clear: both;
        background: white !important;
        border-radius: 5px;
        overflow: hidden;
    }
    
    /* 左右のボックス(.tll, .tlr)を縦1列に */
    .tll, .tlr {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
        background: white !important;
        border: 1px solid #007bbb;
        border-radius: 5px;
        display: block;
        clear: both;
        overflow: hidden;
    }
    
    .tll {
        width: calc(100% - 4px) !important;
        border: 2px solid #007bbb;
    }
    
    .tlr {
        width: calc(100% - 4px) !important;
        border: 2px solid #007bbb;
    }
    
    /* 大きなボックス(.tlarge)の調整 */
    .tlarge {
        background: white !important;
        border-radius: 5px;
        overflow: hidden;
        width: calc(100% - 4px) !important;
        border: 2px solid #007bbb;
    }
    
    .tlarge .tface, .tlarge .tprof {
        width: 100% !important;
        float: none !important;
        clear: both;
        background: transparent !important;
    }
    
    .tlarge .tface {
        text-align: center;
        margin-bottom: 15px;
        padding: 20px 0 10px;
        background: transparent !important;
    }
    
    .tlarge .tprof {
        text-align: left;
        padding: 10px 0 20px;
        background: transparent !important;
    }
    
    .tlarge .tprof p {
        width: 95% !important;
        margin: 10px 0 0 0;
        text-align: left;
    }
    
    /* 小さなボックス(.tlo)の調整 */
    .tlo {
        background: white !important;
        border: 1px solid #007bbb;
        border-radius: 5px;
        overflow: hidden;
    }
    
    .tlo .tface, .tlo .tprof {
        width: 100% !important;
        float: none !important;
        clear: both;
        background: transparent !important;
    }
    
    .tlo .tface {
        text-align: center;
        margin-bottom: 10px;
        padding: 15px 0 5px;
        background: transparent !important;
    }
    
    .tlo .tprof {
        padding: 5px 0 15px;
        background: transparent !important;
    }
    
    .tlo .tprof p {
        width: 95% !important;
        margin: 8px auto;
        text-align: left;
    }
    
    /* 学校画像の調整 */
    .tschool img {
        margin-left: 0 !important;
        display: block;
        margin: 0 auto 15px 0 !important;
    }
    
    /* 全教師ボックスIDの統一調整 */
    #teacher01, #teacher02, #teacher03, #teacher04, #teacher05, 
    #teacher06, #teacher07, #teacher08, #teacher09, #teacher10 {
        width: 100% !important;
        margin-bottom: 25px;
        float: none !important;
        clear: both;
        background: white !important;
        border: 1px solid #007bbb;
        border-radius: 5px;
        overflow: hidden;
    }
    
    /* #teacher04から#teacher08のボーダーを削除 */
    #teacher04, #teacher05, #teacher06, #teacher07, #teacher08 {
        border: none;
    }
    
    /* #teacher01, #teacher02のボーダーを削除 */
    #teacher01, #teacher02 {
        border: none;
    }
    
    /* #teacher01から#teacher08の下マージンを0に */
    #teacher01, #teacher02, #teacher03, #teacher04, #teacher05, #teacher06, #teacher07, #teacher08 {
        margin-bottom: 0 !important;
    }
    
    /* #teacher01と#teacher02のflexレイアウト */
    #teacher01 .tlarge, #teacher02 .tlarge {
        display: flex !important;
    }
    
    #teacher01 .tlarge .tface, #teacher02 .tlarge .tface {
        width: 200px !important;
    }
    
    #teacher01 .tlarge .tprof, #teacher02 .tlarge .tprof {
        width: calc(100% - 200px) !important;
    }
    
    /* #teacher04から#teacher08のflexレイアウト */
    #teacher04 .tll, #teacher04 .tlr,
    #teacher05 .tll, #teacher05 .tlr,
    #teacher06 .tll, #teacher06 .tlr,
    #teacher07 .tll, #teacher07 .tlr,
    #teacher08 .tll, #teacher08 .tlr {
        display: flex !important;
    }
    
    #teacher04 .tll .tface, #teacher04 .tlr .tface,
    #teacher05 .tll .tface, #teacher05 .tlr .tface,
    #teacher06 .tll .tface, #teacher06 .tlr .tface,
    #teacher07 .tll .tface, #teacher07 .tlr .tface,
    #teacher08 .tll .tface, #teacher08 .tlr .tface {
        width: 140px !important;
    }
    
    #teacher04 .tll .tprof, #teacher04 .tlr .tprof,
    #teacher05 .tll .tprof, #teacher05 .tlr .tprof,
    #teacher06 .tll .tprof, #teacher06 .tlr .tprof,
    #teacher07 .tll .tprof, #teacher07 .tlr .tprof,
    #teacher08 .tll .tprof, #teacher08 .tlr .tprof {
        width: calc(100% - 140px) !important;
        padding: 15px 0 15px;
    }
    
    /* 教師名の調整 */
    .tprof .tname {
        margin-top: 0 !important;
        margin-bottom: 10px;
    }
    
    .tname_ataru {
        margin-top: 0 !important;
    }
}

/* スマホ専用の追加調整 */
@media screen and (max-width: 600px) {
    div#contents {
        padding: 10px 0 20px !important;
    }
    
    div#board {
        padding: 10px 5px;
    }
    
    .tlarge .tprof h3 {
        font-size: 105%;
        line-height: 1.5;
        margin-bottom: 15px;
    }
    
    .tface p {
        margin-left: 10px !important;
        margin-right: 5px !important;
    }
    
    .tprof p {
        margin-right: 5px !important;
        margin-left: 5px !important;
        font-size: 95%;
        line-height: 1.5;
    }
    
    .tbox, .tlo, .tlarge {
        margin-bottom: 20px;
    }
    
    .tll, .tlr {
        margin-bottom: 15px;
    }
    
    /* スマホ閲覧時の.tlarge .tprof調整 */
    .tlarge .tprof {
        padding: 10px 0 20px 10px;
    }
    
    /* #teacher01と#teacher02のスマホ専用レイアウト */
    #teacher01 .tlarge, #teacher02 .tlarge {
        display: block !important;
        position: relative;
    }
    
    #teacher01 .tlarge .tface, #teacher02 .tlarge .tface {
        width: 100% !important;
        text-align: center !important;
        padding: 15px 0 10px;
        margin-bottom: 0;
    }
    
    #teacher01 .tlarge .tface img, #teacher02 .tlarge .tface img {
        width: 140px;
        height: auto;
    }
    
    #teacher01 .tlarge .tschool, #teacher02 .tlarge .tschool {
        position: absolute;
        top: 15px;
        right: 15px;
        left: 160px;
        text-align: left;
        margin: 0;
    }
    
    #teacher01 .tlarge .tname_ataru {
        position: absolute;
        top: 75px;
        right: 15px;
        left: 160px;
        text-align: left;
        margin: 0;
    }
    
    #teacher02 .tlarge .tname {
        position: absolute;
        top: 75px;
        right: 15px;
        left: 160px;
        text-align: left;
        margin: 0;
    }
    
    #teacher01 .tlarge .tprof, #teacher02 .tlarge .tprof {
        width: 100% !important;
    }
    
    /* #teacher01と#teacher02のh3調整 */
    #teacher01 .tlarge .tprof h3, #teacher02 .tlarge .tprof h3 {
        margin-top: 0;
        margin-left: 5px !important;
    }
}

/* 極小画面対応 */
@media screen and (max-width: 320px) {
    div#board {
        padding: 5px;
    }
    
    .tface img {
        max-width: 100%;
        height: auto;
    }
    
    .tprof p {
        font-size: 90%;
        margin: 5px;
    }
    
    .tlarge .tprof h3 {
        font-size: 100%;
        margin-bottom: 10px;
    }
}