@charset "utf-8";
/*
Theme Name: TENJIKU child
Theme URI:https://tcd-theme.com/tcd091/
Description:WordPressテーマ「TENJIKU」の子テーマ
Template:tenjiku_tcd091
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/
/* 全体のレイアウト（グリッド表示） */
/* =====================================
   韓TARASHI STAFF
   WordPress / TCDテーマ / ビジュアルエディタ対策版
===================================== */

.staff-container{
    max-width:900px;
    margin:0 auto;
    padding:20px;
    box-sizing:border-box;
}

/*----------------------------------
 カード
----------------------------------*/

.staff-card{
    width:100%;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    margin:0 auto 35px;
    transition:.3s;
    box-sizing:border-box;
}

.staff-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

/*----------------------------------
 アイコン
----------------------------------*/

.staff-img{
    width:140px;
    height:140px;
    margin:40px auto 22px;
    border-radius:50%;
    overflow:hidden;
    border:5px solid #f4f4f4;
    box-sizing:border-box;
}

.staff-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/*----------------------------------
 名前まわり
----------------------------------*/

.staff-info{
    padding:0 45px 40px;
    box-sizing:border-box;
}

.staff-en-name{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    font-size:14px;
    font-weight:700;
    letter-spacing:.35em;
    color:#b78945;
    margin:0 0 10px !important;
    padding:0 !important;
    line-height:1.4;
    float:none !important;
    clear:both !important;
}

.staff-name{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    float:none !important;
    clear:both !important;
    font-size:34px;
    font-weight:700;
    color:#222;
    margin:0 auto 14px !important;
    padding:0 !important;
    line-height:1.2;
}

.staff-role{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    font-size:14px;
    color:#888;
    letter-spacing:.08em;
    margin:0 0 45px !important;
    padding:0 !important;
    line-height:1.6;
    float:none !important;
    clear:both !important;
}

/*----------------------------------
 プロフィール
----------------------------------*/

.staff-profile{
    text-align:left;
    width:100%;
}

.profile-item{
    display:block !important;
    width:100%;
    padding:22px 0;
    border-bottom:1px solid #ececec;
    box-sizing:border-box;
    clear:both;
}

.profile-item:first-child{
    border-top:1px solid #ececec;
}

.profile-item:last-child{
    border-bottom:none;
}

.profile-title{
    display:block !important;
    width:max-content;
    max-width:100%;
    background:#111;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    padding:7px 15px;
    border-radius:30px;
    margin:0 0 15px !important;
    line-height:1.4;
    box-sizing:border-box;
    clear:both;
}

.profile-text{
    display:block !important;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    color:#555;
    font-size:15px;
    line-height:2;
    clear:both;
    box-sizing:border-box;
}

/* WordPressが勝手に入れる空p対策 */
.staff-container p:empty,
.staff-card p:empty,
.staff-info p:empty,
.staff-profile p:empty{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
}

/*----------------------------------
 スマホ
----------------------------------*/

@media(max-width:768px){

    .staff-container{
        padding:10px;
    }

    .staff-card{
        margin-bottom:28px;
        border-radius:14px;
    }

    .staff-img{
        width:120px;
        height:120px;
        margin:32px auto 20px;
    }

    .staff-info{
        padding:0 24px 30px;
    }

    .staff-en-name{
        font-size:12px;
        letter-spacing:.3em;
    }

    .staff-name{
        font-size:28px;
    }

    .staff-role{
        font-size:13px;
        margin-bottom:35px !important;
    }

    .profile-item{
        padding:20px 0;
    }

    .profile-title{
        font-size:12px;
        padding:6px 13px;
        margin-bottom:13px !important;
    }

    .profile-text{
        font-size:14px;
        line-height:1.9;
    }

}