@charset "utf-8";
/* ==========================================================================
   staff.css  ―  相談員紹介（一覧／個人ページ）専用スタイル
   ※既存CSS（reset/common/layout/page）および column.css は一切変更していません。
   　staff配下のページからのみ読み込まれます。
   　配色・書体はコラム（column.css）とそろえてあります。
   ========================================================================== */

/*------------------ teaser --------------------*/
#teaser.staff{
    background: url(../images/staff/teaser.png)no-repeat center center;
    background-size: cover;
}
@media screen and (max-width: 767px) {
    #teaser.staff{
        background: url(../images/staff/teaser_sp.png)no-repeat center center;
        background-size: cover;
    }
}

/*------------------ パンくず（氏名が長く2行になる場合の対応） --------------------*/
@media screen and (max-width: 767px) {
    #breadcrumb.staff{
        box-sizing: border-box;
        height: auto;
        min-height: 30px;
        padding: 7px 10px;
        line-height: 1.6;
    }
}

/*------------------ 共通 --------------------*/
#staff{
    font-family: var(--font-base);
}
#staff .staff_wrap{
    /* 上の余白 70px → 0（2026年8月14日）
       パンくずと本文の間の空きを、ご相談方法・よくある質問と同じにするためです。
       全ページでそろえてあります（README「パンくずと本文の間」をご覧ください）。 */
    padding: 0 0 100px;
}
#staff .staff_lead{
    margin: 0 auto 55px;
    max-width: 840px;
    font-size: 16px;
    line-height: 2;
    text-align: center;
}
#staff .top_contact{
    background: #fafafa;
}
#staff .top_banner{
    background: #fff;
}
@media screen and (max-width: 767px) {
    #staff .staff_wrap{
        padding: 0 0 45px;   /* 上 25px → 0（2026年8月14日） */
    }
    #staff .staff_lead{
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 1.9;
        text-align: left;
    }
}

/*==========================================================================
  一覧ページ
  ========================================================================== */

/*------------------ 一覧カード --------------------*/
#staff .staff_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    /* ★カードの高さをそろえます（2026年8月13日に変更）

       もとは align-items:start で、内容の量に合わせて高さがバラバラでした
       （実測 835〜1174px、差339px）。プロフィールが未記入の方がいた頃の
       名残で、「そろえると空欄のカードに大きな余白ができる」という
       理由でしたが、**6名とも記入ずみになったため、その前提はもうありません。**

       ★ start に戻すと、また下端がガタガタになります。 */
    align-items: stretch;
    grid-auto-rows: 1fr;
}

#staff .staff_card{
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 34px 26px 30px;
    border: 1px solid #ebebeb;
    border-top: 4px solid #e95377;
    border-radius: 6px;
    background: #fff;
    text-align: center;
    transition: .25s;
}
#staff .staff_card:hover{
    border-color: #f3c4d1;
    border-top-color: #e95377;
    box-shadow: 0 8px 24px rgba(233,83,119,.13);
}
/* 顔写真（イラスト）は120×160pxの縦長です。円形に切ると頭が欠けるため、
   元の比率のまま角丸の長方形で表示しています。
   拡大するとぼやけるので、120pxより大きくしないでください。 */
#staff .staff_card .photo{
    margin: 0 auto 18px;
    width: 120px;
}
#staff .staff_card .photo img{
    display: block;
    width: 120px;
    height: 160px;
    border-radius: 8px;
    object-fit: cover;
    background: #fdf0f4;
}
/* 肩書（2026年8月13日に調整）
   　「老人ホーム紹介サービス『住まいる』相談員」という長い肩書が、
   　お名前の**上**に6人分くり返し並び、名前より先に目に入っていました。
   　小さく・うすくして、視線がお名前へ先に向くようにしています。 */
#staff .staff_card .role{
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.6;
}
/* お名前。カードの主役なので、肩書との差をはっきりつけています */
#staff .staff_card .name{
    margin-top: 4px;
    color: #222;
    font-family: var(--font-head);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.4;
}
#staff .staff_card .name a{
    color: #111;
}
#staff .staff_card:hover .name a{
    color: #cc2b5a;
}
#staff .staff_card .kana{
    margin-top: 4px;
    color: #6e6e6e;
    font-size: 12px;
    letter-spacing: .04em;
}
#staff .staff_card .licenses{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}
#staff .staff_card .licenses span{
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #f0d3db;
    border-radius: 4px;
    background: #fdf7f9;
    color: #cc2b5a;
    font-size: 12px;
    line-height: 1.5;
}
#staff .staff_card .catch{
    margin-top: 16px;
    color: #555;
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
}
#staff .staff_card .more{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    color: #cc2b5a;
    font-size: 14px;
    text-align: center;
}
#staff .staff_card .more:after{
    content: '';
    display: inline-block;
    margin-left: 10px;
    width: 14px;
    height: 14px;
    background: url(../images/common/ico_arrow02.png)no-repeat center center;
    background-size: 14px;
    vertical-align: -1px;
}

/* --- カード内の項目（経験年数・大切にしていること・経歴・趣味） ---------
   エクセルでいただいた項目をそのままカードに並べています。
   まだ内容が届いていない相談員は .card_todo だけを表示します。 */
#staff .staff_card .card_meta{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}
#staff .staff_card .card_meta span{
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fdf2f5;
    color: #c73b5d;
    font-size: 12px;
    line-height: 1.6;
}
#staff .staff_card .card_sec{
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dotted #e3d5d9;
    text-align: left;
}
#staff .staff_card .card_sec:first-of-type{
    border-top: none;
}
#staff .staff_card .cs_hd{
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}
#staff .staff_card .cs_txt{
    margin-top: 6px;
    color: #555;
    font-size: 13.5px;
    line-height: 1.9;
}
#staff .staff_card .cs_list{
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
#staff .staff_card .cs_list li{
    position: relative;
    padding-left: 15px;
    color: #555;
    font-size: 13.5px;
    line-height: 1.85;
}
#staff .staff_card .cs_list li::before{
    content: "";
    position: absolute;
    top: .82em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f0d3db;
}
/* まだプロフィールが届いていない相談員 */
#staff .staff_card.is_todo{
    border-top-color: #dedede;
}
#staff .staff_card .card_todo{
    margin-top: 18px;
    padding: 16px 14px;
    border: 1px dashed #d0d0d0;
    border-radius: 6px;
    color: #6e6e6e;
    font-size: 13px;
    line-height: 1.85;
}
@media screen and (max-width: 1024px) {
    #staff .staff_list{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 767px) {
    #staff .staff_list{
        grid-template-columns: 1fr;
        gap: 16px;
    }
    #staff .staff_card{
        padding: 24px 18px 26px;
    }
    #staff .staff_card .photo,
    #staff .staff_card .photo img{
        width: 108px;
    }
    #staff .staff_card .photo img{
        height: 144px;
    }
    #staff .staff_card .name{
        font-size: 21px;
    }
    #staff .staff_card .catch{
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.8;
    }
    #staff .staff_card .more{
        bottom: 20px;
        font-size: 13px;
    }
}

/*------------------ 一覧下の説明ブロック --------------------*/
#staff .staff_about{
    box-sizing: border-box;
    margin-top: 55px;
    padding: 34px 40px 30px;
    border: 1px solid #f0d3db;
    border-radius: 6px;
    background: #fdf7f9;
}
#staff .staff_about .about_tit{
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 12px;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.4;
}
#staff .staff_about .about_tit:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: #e95377;
}
#staff .staff_about p{
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.95;
}
#staff .staff_about p:last-child{
    margin-bottom: 0;
}
@media screen and (max-width: 767px) {
    #staff .staff_about{
        margin-top: 35px;
        padding: 20px 16px 18px;
    }
    #staff .staff_about .about_tit{
        font-size: 17px;
    }
    #staff .staff_about p{
        font-size: 14px;
    }
}

/*==========================================================================
  個人ページ
  ========================================================================== */
#staff .staff_profile{
    max-width: 860px;
    margin: 0 auto;
}

/*------------------ プロフィールヘッド --------------------*/
#staff .profile_head{
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 34px;
    border-bottom: 1px solid #ebebeb;
}
#staff .profile_head .photo{
    flex: none;
    width: 220px;
}
#staff .profile_head .photo img{
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    background: #fdf0f4;
}
#staff .profile_head .head_dec{
    flex: 1 1 auto;
    min-width: 0;
}
#staff .profile_head .role{
    color: #6e6e6e;
    font-size: 14px;
    line-height: 1.7;
}
#staff .profile_head h1.name{
    margin-top: 8px;
    font-family: var(--font-head);
    font-size: 34px;
    line-height: 1.4;
}
#staff .profile_head h1.name .kana{
    display: block;
    margin-top: 8px;
    color: #6e6e6e;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .04em;
}
#staff .profile_head .licenses{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
#staff .profile_head .licenses span{
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #f0d3db;
    border-radius: 4px;
    background: #fdf7f9;
    color: #cc2b5a;
    font-size: 13px;
    line-height: 1.6;
}
#staff .profile_head .catch{
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.95;
}
@media screen and (max-width: 767px) {
    #staff .profile_head{
        display: block;
        padding-bottom: 22px;
        text-align: center;
    }
    #staff .profile_head .photo{
        margin: 0 auto 18px;
        width: 140px;
    }
    #staff .profile_head .photo img{
        width: 140px;
        height: 140px;
    }
    #staff .profile_head .role{
        font-size: 13px;
    }
    #staff .profile_head h1.name{
        font-size: 25px;
    }
    #staff .profile_head .licenses{
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
    }
    #staff .profile_head .licenses span{
        padding: 4px 10px;
        font-size: 12px;
    }
    #staff .profile_head .catch{
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.9;
        text-align: left;
    }
}

/*------------------ 実績の数字 --------------------*/
#staff .profile_num{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
#staff .profile_num .num_item{
    box-sizing: border-box;
    padding: 22px 16px 20px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
    text-align: center;
}
#staff .profile_num .num_item .label{
    color: #555;
    font-size: 13px;
    line-height: 1.6;
}
#staff .profile_num .num_item .val{
    margin-top: 8px;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}
#staff .profile_num .num_item .val small{
    margin-left: 4px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
}
@media screen and (max-width: 767px) {
    #staff .profile_num{
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 25px;
    }
    #staff .profile_num .num_item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        text-align: left;
    }
    #staff .profile_num .num_item .label{
        font-size: 13px;
    }
    #staff .profile_num .num_item .val{
        margin-top: 0;
        font-size: 26px;
    }
}

/*------------------ 本文パーツ --------------------*/
#staff .profile_body{
    margin-top: 55px;
}
#staff .profile_body h2{
    position: relative;
    margin: 55px 0 24px;
    padding: 14px 0 14px 22px;
    border-left: 5px solid #e95377;
    background: #fbf3f5;
    font-family: var(--font-head);
    font-size: 24px;
    line-height: 1.5;
}
#staff .profile_body h2:first-child{
    margin-top: 0;
}
#staff .profile_body h3{
    margin: 36px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e6b7c4;
    font-family: var(--font-head);
    font-size: 19px;
    line-height: 1.5;
}
#staff .profile_body p{
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 2;
}
#staff .profile_body p strong,
#staff .profile_body li strong{
    font-weight: 700;
    background: linear-gradient(transparent 62%, #fbdde5 62%);
}
#staff .profile_body a{
    color: #cc2b5a;
    text-decoration: underline;
}
#staff .profile_body a:hover{
    text-decoration: none;
}
#staff .profile_body ul{
    margin-bottom: 24px;
}
#staff .profile_body ul li{
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.9;
}
#staff .profile_body ul li+li{
    margin-top: 10px;
}
#staff .profile_body ul li:before{
    content: '';
    position: absolute;
    left: 2px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e95377;
}
@media screen and (max-width: 767px) {
    #staff .profile_body{
        margin-top: 30px;
    }
    #staff .profile_body h2{
        margin: 36px 0 18px;
        padding: 10px 0 10px 14px;
        border-left-width: 4px;
        font-size: 19px;
    }
    #staff .profile_body h3{
        margin: 26px 0 12px;
        font-size: 16px;
    }
    #staff .profile_body p{
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.95;
    }
    #staff .profile_body ul li{
        font-size: 15px;
    }
}

/*------------------ 経歴（年表） --------------------*/
#staff .career{
    margin-bottom: 28px;
}
#staff .career dl{
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ebebeb;
}
#staff .career dt{
    box-sizing: border-box;
    padding: 16px 16px 16px 0;
    width: 150px;
    border-bottom: 1px solid #ebebeb;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.7;
}
#staff .career dd{
    box-sizing: border-box;
    padding: 16px 0;
    width: calc(100% - 150px);
    border-bottom: 1px solid #ebebeb;
    font-size: 15px;
    line-height: 1.8;
}
@media screen and (max-width: 767px) {
    #staff .career dt{
        padding: 14px 0 4px;
        width: 100%;
        border-bottom: none;
        font-size: 13px;
    }
    #staff .career dd{
        padding: 0 0 14px;
        width: 100%;
        font-size: 14px;
    }
}

/*------------------ 保有資格・基本情報テーブル --------------------*/
#staff .table_wrap{
    margin-bottom: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#staff .profile_body table{
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
#staff .profile_body table th,
#staff .profile_body table td{
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #e4e4e4;
    line-height: 1.7;
    text-align: left;
    vertical-align: top;
}
#staff .profile_body table th{
    width: 28%;
    background: #fdf0f4;
    font-weight: 500;
}
@media screen and (max-width: 767px) {
    #staff .profile_body table{
        font-size: 13px;
    }
    #staff .profile_body table th,
    #staff .profile_body table td{
        padding: 10px 10px;
    }
    #staff .profile_body table th{
        width: 34%;
    }
}

/*------------------ 大切にしていること --------------------*/
#staff .policy_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}
#staff .policy_list .policy_item{
    box-sizing: border-box;
    padding: 26px 24px 24px;
    border: 1px solid #ebebeb;
    border-top: 3px solid #e95377;
    border-radius: 6px;
    background: #fff;
}
#staff .policy_list .policy_item .no{
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 13px;
    letter-spacing: .1em;
}
#staff .policy_list .policy_item .tit{
    margin-top: 6px;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.5;
}
#staff .policy_list .policy_item .txt{
    margin-top: 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.9;
}
@media screen and (max-width: 767px) {
    #staff .policy_list{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    #staff .policy_list .policy_item{
        padding: 18px 16px 16px;
    }
    #staff .policy_list .policy_item .tit{
        font-size: 16px;
    }
    #staff .policy_list .policy_item .txt{
        margin-top: 8px;
        font-size: 13px;
    }
}

/*------------------ 相談員からのメッセージ --------------------*/
#staff .message_box{
    box-sizing: border-box;
    margin-bottom: 28px;
    padding: 30px 34px 26px;
    border: 1px solid #f0d3db;
    border-radius: 6px;
    background: #fdf7f9;
}
#staff .message_box p{
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 2;
}
#staff .message_box p:last-child{
    margin-bottom: 0;
}
#staff .message_box .sign{
    margin-top: 20px;
    font-family: var(--font-head);
    font-size: 16px;
    text-align: right;
}
@media screen and (max-width: 767px) {
    #staff .message_box{
        padding: 20px 16px 18px;
    }
    #staff .message_box p{
        font-size: 15px;
        line-height: 1.95;
    }
    #staff .message_box .sign{
        font-size: 15px;
    }
}

/*------------------ 補足ボックス --------------------*/
#staff .note_box{
    box-sizing: border-box;
    margin: 0 0 28px;
    padding: 24px 28px;
    border-radius: 6px;
    background: #f7f7f5;
}
#staff .note_box .note_tit{
    margin-bottom: 10px;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 17px;
}
#staff .note_box p:last-child,
#staff .note_box ul:last-child{
    margin-bottom: 0;
}
@media screen and (max-width: 767px) {
    #staff .note_box{
        padding: 16px 16px;
    }
    #staff .note_box .note_tit{
        font-size: 15px;
    }
}

/*------------------ よくお受けするご相談（Q&A） --------------------*/
#staff .qa_list{
    margin-bottom: 28px;
}
#staff .qa_list .qa_item{
    box-sizing: border-box;
    padding: 24px 28px 20px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
}
#staff .qa_list .qa_item+.qa_item{
    margin-top: 14px;
}
#staff .qa_list .q{
    position: relative;
    padding-left: 40px;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.6;
}
#staff .qa_list .q:before{
    content: 'Q';
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e95377;
    color: #fff;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 28px;
    text-align: center;
}
#staff .qa_list .a{
    position: relative;
    margin-top: 14px;
    padding-left: 40px;
    color: #555;
    font-size: 15px;
    line-height: 1.95;
}
#staff .qa_list .a:before{
    content: 'A';
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e95377;
    background: #fff;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 26px;
    text-align: center;
}
@media screen and (max-width: 767px) {
    #staff .qa_list .qa_item{
        padding: 16px 16px 14px;
    }
    #staff .qa_list .q{
        padding-left: 32px;
        font-size: 16px;
    }
    #staff .qa_list .q:before,
    #staff .qa_list .a:before{
        width: 24px;
        height: 24px;
        font-size: 13px;
        line-height: 24px;
    }
    #staff .qa_list .a:before{
        line-height: 22px;
    }
    #staff .qa_list .a{
        padding-left: 32px;
        font-size: 14px;
    }
}

/*------------------ 担当エリア --------------------*/
#staff .area_list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
#staff .area_list span{
    display: inline-block;
    padding: 7px 16px;
    border-radius: 18px;
    background: #fdf0f4;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    #staff .area_list{
        gap: 6px;
    }
    #staff .area_list span{
        padding: 5px 12px;
        font-size: 13px;
    }
}

/*------------------ 監修コラム --------------------*/
#staff .staff_column_list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
#staff .staff_column_list a{
    display: block;
    box-sizing: border-box;
    padding: 20px 22px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-size: 15px;
    line-height: 1.7;
    text-decoration: none;
    transition: .25s;
}
#staff .staff_column_list a:hover{
    border-color: #f3c4d1;
    color: #cc2b5a;
    box-shadow: 0 6px 18px rgba(233,83,119,.12);
}
#staff .staff_column_list .cat{
    display: inline-block;
    margin-bottom: 10px;
    padding: 0 12px;
    height: 24px;
    border-radius: 12px;
    background: #e95377;
    color: #fff;
    font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
    line-height: 24px;
}
#staff .staff_column_list .cat_cost .cat{ background: #e08a2e; }
#staff .staff_column_list .cat_area .cat{ background: #4a9c8c; }
#staff .staff_column_list .cat_basic .cat{ background: #5c7fb8; }
@media screen and (max-width: 767px) {
    #staff .staff_column_list{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    #staff .staff_column_list a{
        padding: 14px 16px;
        font-size: 14px;
    }
}

/*------------------ この相談員に相談するCTA --------------------*/
#staff .staff_cta{
    box-sizing: border-box;
    margin: 55px 0 0;
    padding: 34px 36px;
    border-radius: 8px;
    background: #fdf0f4;
    text-align: center;
}
#staff .staff_cta .tit{
    margin-bottom: 12px;
    font-family: var(--font-head);
    font-size: 21px;
    line-height: 1.5;
}
#staff .staff_cta .txt{
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 1.9;
}
#staff .staff_cta .btn a{
    display: inline-block;
    box-sizing: border-box;
    padding: 0 60px 0 40px;
    width: auto;
    min-width: 300px;
    height: 60px;
    border-radius: 30px;
    background: url(../images/common/ico_arrow01.png)no-repeat center right 25px,linear-gradient(to right,#ee8a9d,#e95e7f);
    color: #fff;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
}
#staff .staff_cta .btn a:hover{
    opacity: .8;
}
#staff .staff_cta .tel{
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.8;
}
#staff .staff_cta .tel a{
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}
@media screen and (max-width: 767px) {
    #staff .staff_cta{
        margin-top: 35px;
        padding: 22px 16px;
    }
    #staff .staff_cta .tit{
        font-size: 17px;
    }
    #staff .staff_cta .txt{
        margin-bottom: 16px;
        font-size: 14px;
    }
    #staff .staff_cta .btn a{
        padding: 0 40px 0 20px;
        min-width: 0;
        width: 100%;
        height: 52px;
        font-size: 15px;
        line-height: 52px;
        background-position: center right 15px, 0 0;
    }
}

/*------------------ 注記 --------------------*/
#staff .profile_foot{
    margin-top: 45px;
    padding-top: 24px;
    border-top: 1px solid #ebebeb;
}
#staff .profile_foot p{
    color: #666;
    font-size: 13px;
    line-height: 1.9;
}
@media screen and (max-width: 767px) {
    #staff .profile_foot{
        margin-top: 30px;
        padding-top: 18px;
    }
    #staff .profile_foot p{
        font-size: 12px;
    }
}

/*------------------ ほかの相談員 --------------------*/
#staff .other_staff{
    margin-top: 60px;
}
#staff .other_staff .other_tit{
    margin-bottom: 26px;
    font-family: var(--font-head);
    font-size: 24px;
    text-align: center;
}
#staff .other_staff .other_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
#staff .other_staff .other_list a{
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 18px 20px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
    color: #111;
    text-decoration: none;
    transition: .25s;
}
#staff .other_staff .other_list a:hover{
    border-color: #f3c4d1;
    color: #cc2b5a;
    box-shadow: 0 6px 18px rgba(233,83,119,.12);
}
#staff .other_staff .other_list img{
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #fdf0f4;
}
#staff .other_staff .other_list .dec{
    display: block;
    min-width: 0;
}
#staff .other_staff .other_list .role{
    display: block;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.5;
}
#staff .other_staff .other_list .name{
    display: block;
    margin-top: 4px;
    font-family: var(--font-head);
    font-size: 17px;
    line-height: 1.4;
}
@media screen and (max-width: 767px) {
    #staff .other_staff{
        margin-top: 40px;
    }
    #staff .other_staff .other_tit{
        margin-bottom: 16px;
        font-size: 18px;
    }
    #staff .other_staff .other_list{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    #staff .other_staff .other_list a{
        padding: 14px 16px;
    }
}

/*------------------ 一覧へ戻る --------------------*/
#staff .back_link{
    margin-top: 55px;
    text-align: center;
}
#staff .back_link a{
    display: inline-block;
    box-sizing: border-box;
    padding: 0 40px;
    height: 56px;
    border: 1px solid #e95377;
    border-radius: 28px;
    background: #fff;
    color: #cc2b5a;
    font-size: 16px;
    line-height: 54px;
    text-decoration: none;
    transition: .2s;
}
#staff .back_link a:hover{
    background: #e95377;
    color: #fff;
}
@media screen and (max-width: 767px) {
    #staff .back_link{
        margin-top: 35px;
    }
    #staff .back_link a{
        padding: 0 26px;
        height: 48px;
        font-size: 14px;
        line-height: 46px;
    }
}

/* ==========================================================================
   カードの中の見出しを、横にそろえます（subgrid）

   --------------------------------------------------------------------------
   何が起きていたか
   --------------------------------------------------------------------------
   カードの高さをそろえただけでは、**中の見出しの位置がずれます。**
   保有資格の数が人によって違うためです。

   　K.C … 資格5つ（3行） → 「大切にしていること」の位置が低い
   　K.S … 資格の記載なし → 同じ見出しの位置が高い
   　N.Y … 資格1つ（1行） → その中間

   横に並べたときに、見出しの高さがそろわず、段違いに見えていました。

   --------------------------------------------------------------------------
   どう直したか
   --------------------------------------------------------------------------
   カードの中身（写真／肩書／氏名／経験年数／資格／本文3つ＝**8ブロック**）を
   親のグリッドの行に直接のせています（subgrid）。
   こうすると、**同じ行のカードどうしで、8つのブロックの高さが自動でそろい**、
   見出しの位置が横一直線になります。

   ★★★ここが大事です★★★
   　**6枚のカードは、必ず同じ8ブロックを同じ順番で持たせてください。**
   　1つでも欠けると、そのカードだけ中身が1段ずつ上にずれます。
   　　・K.S … 保有資格の記載がないため、空の <div class="licenses"></div>
   　　・O.M … 経験年数が未確定のため、空の <div class="card_meta"></div>
   　を置いてあります。**消さないでください。**
   　相談員を増やすときも、内容が空でも8ブロックそろえてください。

   　row-gap を0にしているのは、親の gap（26px）が
   　カードの中の8行すべてに入ってしまうのを止めるためです。

   --------------------------------------------------------------------------
   subgrid に対応していないブラウザについて
   --------------------------------------------------------------------------
   @supports で囲ってあるので、対応していないブラウザでは
   この節がまるごと無視され、上の「高さだけそろった状態」になります。
   （表示が壊れることはありません）
   ========================================================================== */
@supports (grid-template-rows: subgrid) {
    #staff .staff_list{
        /* subgrid のときは、行の高さは中身に合わせます。
           1fr のままだと、8行すべてが同じ高さに引き伸ばされてしまいます。 */
        grid-auto-rows: auto;
    }
    #staff .staff_card{
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 8;   /* ★カードの中のブロック数と同じ数にしてください */
        row-gap: 0;
    }
}

/* --------------------------------------------------------------------------
   subgrid にしたことで出た副作用の手当て

   .licenses と .card_meta は横並び（flex）です。subgrid で行の高さが
   そろうと、**中のタグが縦に引き伸ばされて**しまいます
   （資格が1つだけの方のタグが、縦に長い箱になっていました）。
   上ぞろえにして、タグの高さを中身のままに保ちます。
   -------------------------------------------------------------------------- */
#staff .staff_card .licenses,
#staff .staff_card .card_meta{
    align-items: flex-start;
    align-content: flex-start;
}