@charset "utf-8";
/* ============================================================================
   専門職向けページ（2026年8月25日）
   /pro/caremanager.php … 居宅介護支援事業所のケアマネジャー向け
   /pro/msw.php         … 病院の医療ソーシャルワーカー・地域連携室向け

   ・ヒーローとパンくずは column.css の指定をそのまま使っています
     （どちらも images/common/teaser.jpg を背景に使うため、新しい指定は不要でした）
   ・本文の体裁も column.css を流用しています。このファイルは、
     コラムには無い「対応できる範囲」「対応した事例」の部品だけを足すものです
   ・角丸6px・背景 #f7f7f5 は column.css の .note_box に合わせてあります
   ========================================================================== */

/* --- 対応できる範囲の表で「対応可」を目立たせます --- */
#column .article_body .pro_ok{
    color: #2f6b5e;
    font-weight: 700;
    white-space: nowrap;
}

/* --- 完全無料・1件からOK などのバッジ ---
   リード文（.summary）の直後、.article_head の区切り線の内側に置いています。
   ★2026-08-25：はじめ .article_head の外に出していたところ、
   　区切り線に張り付いて表の一部のように見えていました。中へ移しています。 */
#column .article_head .pro_badges{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
#column .article_head .pro_badges li{
    margin: 0;
    padding: 7px 14px;
    min-width: 110px;
    text-align: center;
    border-radius: 4px;
    background: #f7f7f5;
    border: 1px solid #e6e6e2;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

/* --- 対応した事例 --------------------------------------------------------
   ★事例が増えたら、この .case_item をまるごとコピーして足してください。
   　 中身は「見出し → 項目（dl） → 結果（chip）」の3ブロックです。
   ------------------------------------------------------------------------ */
#column .article_body .case_list{
    display: grid;
    gap: 16px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
#column .article_body .case_item{
    box-sizing: border-box;
    margin: 0;
    padding: 24px 28px;
    border-radius: 6px;
    background: #f7f7f5;
}
#column .article_body .case_hd{
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e4e4e0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}
#column .article_body .case_dl{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
}
#column .article_body .case_dl dt{
    margin: 0;
    font-weight: 700;
    color: #6e6e6e;
    white-space: nowrap;
}
#column .article_body .case_dl dd{
    margin: 0;
}
#column .article_body .case_res{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #e4e4e0;
    list-style: none;
}
#column .article_body .case_res li{
    margin: 0;
    padding: 6px 14px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e0e0dc;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

@media screen and (max-width: 767px) {
    #column .article_body .case_item{
        padding: 20px 18px;
    }
    #column .article_body .case_hd{
        font-size: 16px;
    }
    /* スマートフォンでは項目名と中身を縦に積みます */
    #column .article_body .case_dl{
        grid-template-columns: 1fr;
        gap: 2px 0;
        font-size: 14.5px;
    }
    #column .article_body .case_dl dd{
        margin-bottom: 12px;
    }
    #column .article_body .case_dl dd:last-child{
        margin-bottom: 0;
    }
}

/* --- コラム用の丸印（#column .article_body ul li:before）を打ち消します ---
   事例のカードは箇条書きではないため、点を出しません。
   ★バッジ（.pro_badges）はここから外しています。.article_body の外にあるので
   　もともと丸印も padding も付かず、打ち消すと逆に padding-left が 0 になって
   　文字が左に寄ってしまうためです（2026-08-25に修正）。 */
#column .article_body .case_list > li,
#column .article_body .case_res > li{
    padding-left: 0;
}
#column .article_body .case_list > li:before,
#column .article_body .case_res > li:before{
    content: none;
    display: none;
}
#column .article_body .case_list > li + li,
#column .article_body .case_res > li + li{
    margin-top: 0;
}

/* --- ヒーローの改行（2026年8月25日） ---------------------------------------
   「医療ソーシャルワーカーの皆さまへ」は16文字あり、スマートフォン（30px）では
   1行に収まりません。<br> で改行位置を決め、PCでは打ち消しています。
   ★このファイルは /pro/ の2ページからしか読まれないので、
   　コラムのヒーロー（#teaser.column）には影響しません。
   ★文言を変えるときは、改行が不要なら <br> ごと外してください。
   -------------------------------------------------------------------------- */
#teaser.column p br{
    display: none;
}
@media screen and (max-width: 767px){
    #teaser.column p br{
        display: inline;
    }
}

/* --- 図1のチェックリストに付く補足の一文（2026年8月25日） -------------------
   もともとコラム用の .fck_amt（費用の図で金額を赤で見せるための指定）を
   流用していましたが、専門職向けページでは
   ・赤が付いている項目＝対応できる
   ・付いていない項目＝対応できない
   と読めてしまうため、専用の .fck_note を用意しました。
   ★色は、同じページの「対応できる範囲」の表で使っている
   　.pro_ok の緑（#2f6b5e）に合わせています。
   ★6項目すべてに付ける前提の指定です。一部だけに付けると、
   　付いていない項目が「対応できない」に見えます。増減させるときはご注意ください。
   -------------------------------------------------------------------------- */
#column .article_body .fig_check .fck_note{
    display: block;
    margin-top: 3px;
    color: #2f6b5e;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}
@media screen and (max-width: 767px){
    #column .article_body .fig_check .fck_note{ font-size: 12px; }
}

/* ==========================================================================
   専門職の皆さま専用フォーム（2026年8月25日）
   /pro/contact.php でだけ使います。
   ★このファイルの他の指定は #column（コラムの本文）に付けていますが、
   　フォームのページには #column が無いため、ここだけ #contact に付けています。
   ========================================================================== */

/* --- 見出し・リード文・お断りの箱、3つの間隔（2026年8月25日に調整） ---
   もとの contact.php は「見出し → リード文 → 入力欄（.form は margin-top 65px）」
   の3段で、リード文のすぐ下に箱が来ることを想定していませんでした。
   そのままだと3つが詰まって見えるため、この2つだけ間隔を足しています。
   ★pro.css は /pro/ の3ページからしか読まれないので、
   　もとのお問い合わせページ（contact.php）の間隔は変わりません。 */
#contact .subtitle{
    margin-top: 24px;
    line-height: 1.9;
}
/* 見出しの <br> はスマートフォンでだけ効かせます（ヒーローと同じ考え方） */
#contact .title span br{
    display: none;
}
@media screen and (max-width: 767px){
    #contact .title span br{
        display: inline;
    }
}

/* --- 入力欄の前に置く、ご本人の個人情報についてのお断り --- */
#contact .pro_formnote{
    box-sizing: border-box;
    margin: 48px auto 34px;
    padding: 20px 24px;
    max-width: 900px;
    border: 1px solid #e4ded6;
    border-radius: 6px;
    background: #f7f7f5;
}
#contact .pro_formnote .pfn_tit{
    margin: 0 0 8px;
    color: #2f6b5e;
    font-family: var(--font-head, inherit);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}
#contact .pro_formnote p{
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
}
#contact .pro_formnote p + p{ margin-top: 10px; }
@media screen and (max-width: 767px){
    #contact .subtitle{
        margin-top: 16px;
        line-height: 1.75;
    }
    #contact .pro_formnote{
        margin: 28px auto 26px;
        padding: 16px 16px;
    }
    #contact .pro_formnote .pfn_tit{ font-size: 15px; }
    #contact .pro_formnote p{ font-size: 14px; }
}

/* --- ご職種のラジオボタン ---
   同意チェックと同じ .label_checkbox を使っているので、字の体裁はそろいます。
   ここでは「縦に並べる」ことだけを指定しています。 */
#contact .pro_radios{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* ★丸と文字の高さを合わせています。
   　ラジオは 26px 角（スマホは20px）ですが、標準では文字のベースラインに
   　載るため、26pxの丸が文字より上へはみ出して見えていました（2026-08-25に修正）。
   　flex ＋ align-items:center で中心をそろえています。 */
#contact .pro_radios .label_checkbox{
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    line-height: 1.5;
}
#contact .pro_radios .label_checkbox input[type='radio']{
    flex: 0 0 auto;
}

/* --- ご連絡先のフリーダイヤル（2026年8月25日） -------------------------------
   専門職向けの2ページは、フォームができるまで**電話だけ**でご案内しています。
   本文の中で番号がいちばん目立つように、大きく出しています。
   ★サイト全体で <meta name="format-detection" content="telephone=no"> を
   　入れているため、スマートフォンで番号をタップできるようにするには
   　<a href="tel:0120-658-109"> を明示的に書く必要があります。
   ★フォームを公開したら、この節はそのままで構いません
   　（電話とフォームを並べる形に戻すだけです）。
   -------------------------------------------------------------------------- */
#column .article_body .note_box .pro_tel{
    margin: 14px 0 2px;
    line-height: 1.1;
}
#column .article_body .note_box .pro_tel a{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fig-key);
    font-family: var(--font-head);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
}
/* ★フリーダイヤルのマークは、align-items:center だと**上に浮いて見えます**。
   　数字は文字の箱の中で下寄りに描かれる（箱の上側にアセンダの余白がある）ため、
   　箱の中心をそろえると、マークだけが数字より上にずれます。
   　3px 下げて、見た目の中心を合わせています（2026-08-25）。 */
#column .article_body .note_box .pro_tel a img{
    position: relative;
    top: 3px;
    width: 40px;
    height: auto;
    flex: 0 0 auto;
}
#column .article_body .note_box .pro_tel_sub{
    margin: 0 0 10px;
    font-size: 14px;
}
@media screen and (max-width: 767px){
    #column .article_body .note_box .pro_tel a{
        font-size: 29px;
        gap: 7px;
    }
    #column .article_body .note_box .pro_tel a img{ width: 31px; top: 2px; }
    #column .article_body .note_box .pro_tel_sub{ font-size: 13px; }
}