@charset "UTF-8";
/* ==========================================================================
   記事の中に置くシミュレーターの共通の見た目（名前は最初に作った医療費控除の記事のまま）
   ・column/iryouhi-koujo.php（医療費控除。計算は js/koujo-sim.js）
   ・column/tokuyo-hiyou.php（特養の費用。計算は js/tokuyo-sim.js）
   2026-09-26 作成。★ここを直すと2つの記事の見た目が同時に変わる。上げたら両方の記事を見て確かめる。

   ・色は「費用・お金」の茶（#a9600f）でそろえる（費用シミュレーション・コラムの費用カードと同じ）
   ・読む場所 → 境界（茶の帯） → 入力する場所 → 結果、の順（sumairu-tool-ux の型）
   ・字の下限：本文18px／スマホ17px、説明16px／15px、注記14px／13px。押せる面積は高さ56px
   ・★#column .article_body p（id＋class＋要素）が強いので、中の p や ul は必ず
   　 #column .article_body .ksim から書いて打ち消す（2026-08-18 の sim_banner と同じ罠）
   ========================================================================== */
#column .article_body .ksim{
    --ks-key: #a9600f;
    --ks-line: #e8d3b8;
    --ks-bg: #fffaf3;
    --ks-ink: #4a4340;
    --ks-sub: #6e6e6e;
    box-sizing: border-box;
    margin: 8px 0 34px;
    border: 2px solid var(--ks-line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
#column .article_body .ksim *{ box-sizing: border-box; }
#column .article_body .ksim p{ margin: 0; line-height: 1.75; }

/* ── 見出しの帯（ここから下が道具） */
#column .article_body .ksim .ksim_head{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 22px;
    background: var(--ks-key);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
}
#column .article_body .ksim .ksim_label{
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}
#column .article_body .ksim .ksim_lead{
    padding: 16px 22px 4px;
    color: var(--ks-ink);
    font-size: 16px;
}

/* ── 入力する場所 */
#column .article_body .ksim .ksim_in{
    margin: 14px 22px 0;
    padding: 18px 20px 6px;
    border-radius: 8px;
    background: var(--ks-bg);
}
#column .article_body .ksim .ksim_f{
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}
#column .article_body .ksim .ksim_f > label,
#column .article_body .ksim .ksim_f > legend{
    display: block;
    padding: 0;
    color: var(--ks-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}
#column .article_body .ksim .ksim_hint{
    margin-top: 2px;
    color: var(--ks-sub);
    font-size: 15px;
    line-height: 1.7;
}
#column .article_body .ksim .ksim_val{
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
}
#column .article_body .ksim input[type="text"],
#column .article_body .ksim select{
    height: 50px;
    padding: 6px 10px;
    border: 1px solid #cfc6bb;
    border-radius: 6px;
    background: #fff;
    color: var(--ks-key);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
}
#column .article_body .ksim input[type="text"]{ width: 170px; text-align: right; }
#column .article_body .ksim input.ks_short{ width: 110px; }
#column .article_body .ksim select{ width: 96px; }
#column .article_body .ksim input[type="text"]:focus,
#column .article_body .ksim select:focus{
    outline: 3px solid #f0d9bb;
    outline-offset: 1px;
    border-color: var(--ks-key);
}
#column .article_body .ksim .unit{
    color: var(--ks-ink);
    font-size: 17px;
    font-weight: 700;
}

/* 税率：押しやすい大きさの選択肢 */
/* 7段階（5〜45％）。幅に合わせて列の数が変わる格子にして、段ごとに同じ幅でそろえる（パソコンは4列、スマホは2列） */
#column .article_body .ksim .ksim_rates{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
#column .article_body .ksim .ksim_rates label{ position: relative; margin: 0; cursor: pointer; }
#column .article_body .ksim .ksim_rates input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
#column .article_body .ksim .ksim_rates span{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 56px;
    padding: 6px 12px;
    border: 1px solid #cfc6bb;
    border-radius: 8px;
    background: #fff;
    color: var(--ks-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
#column .article_body .ksim .ksim_rates span small{
    display: block;
    margin-top: 2px;
    color: var(--ks-sub);
    font-size: 13px;
    font-weight: 400;
}
#column .article_body .ksim .ksim_rates input:checked + span{
    border: 2px solid var(--ks-key);
    background: #fdf1e1;
    color: var(--ks-key);
}
#column .article_body .ksim .ksim_rates input:focus-visible + span{
    outline: 3px solid #f0d9bb;
    outline-offset: 1px;
}

/* くわしく入れる */
#column .article_body .ksim .ksim_more{
    margin: 4px 0 16px;
    border-top: 1px dashed var(--ks-line);
    padding-top: 12px;
}
#column .article_body .ksim .ksim_more summary{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    color: var(--ks-key);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
/* 開けることが分かるように、＋／－の印を付ける（display:flex にすると既定の三角が消えるため） */
#column .article_body .ksim .ksim_more summary::-webkit-details-marker{ display: none; }
#column .article_body .ksim .ksim_more summary::before{
    content: "＋";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ks-key);
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
}
#column .article_body .ksim .ksim_more[open] summary::before{ content: "－"; }
#column .article_body .ksim .ksim_more[open] summary{ margin-bottom: 10px; }

/* ── 結果 */
#column .article_body .ksim .ksim_out{ padding: 20px 22px 6px; }
#column .article_body .ksim .ksim_out_tit{
    margin-bottom: 12px;
    color: var(--ks-ink);
    font-size: 18px;
    font-weight: 700;
}
#column .article_body .ksim .ksim_cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#column .article_body .ksim .ksim_cards > li{
    margin: 0;
    padding: 14px 14px 12px;
    border: 1px solid var(--ks-line);
    border-radius: 8px;
    background: #fff;
    list-style: none;
}
#column .article_body .ksim .ksim_cards > li::before{ content: none; display: none; }
#column .article_body .ksim .kc_name{
    color: var(--ks-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}
#column .article_body .ksim .kc_rule{
    display: inline-block;
    margin-top: 6px;
    padding: 1px 8px;
    border-radius: 4px;
    background: #f6ecdf;
    color: var(--ks-key);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}
#column .article_body .ksim [data-kind="yuryo"] .kc_rule{ background: #efefef; color: #666; }
#column .article_body .ksim .kc_big{
    margin-top: 10px;
    color: var(--ks-key);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
#column .article_body .ksim [data-kind="yuryo"] .kc_big{ color: #666; }
#column .article_body .ksim .kc_split{
    color: var(--ks-ink);
    font-size: 15px;
    line-height: 1.6;
}
#column .article_body .ksim .kc_calc{
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0e7dc;
    color: var(--ks-sub);
    font-size: 14px;
    line-height: 1.6;
}
/* 3枚を横に並べたとき、中の段（施設名・タグ・金額・内訳・控除額）の高さを3枚でそろえる（2026-09-26 ユーザー指摘）。
   施設名が1行の「老健・介護医療院」と2行のほかの2枚とで、下の段がすべて1行ぶんずれていたため。
   ★subgrid で5つの段を3枚に共通にする。対応していないブラウザは、施設名と内訳の最低の高さ（2行ぶん）でそろえる */
@media (min-width: 768px){
    #column .article_body .ksim .kc_name{ min-height: 2.9em; }    /* 17px × 行間1.45 × 2行 */
    #column .article_body .ksim .kc_split{ min-height: 3.2em; }   /* 15px × 行間1.6 × 2行 */
    @supports (grid-template-rows: subgrid){
        #column .article_body .ksim .ksim_cards{ grid-template-rows: repeat(5, auto); row-gap: 0; }
        #column .article_body .ksim .ksim_cards > li{
            display: grid;
            grid-row: span 5;
            grid-template-rows: subgrid;
            row-gap: 0;
        }
        #column .article_body .ksim .ksim_cards > li > *{ align-self: start; }
        #column .article_body .ksim .ksim_cards > li > .kc_rule{ justify-self: start; }
        #column .article_body .ksim .kc_name,
        #column .article_body .ksim .kc_split{ min-height: 0; }
    }
}
#column .article_body .ksim .ksim_sum{
    margin-top: 14px;
    color: var(--ks-ink);
    font-size: 16px;
    font-weight: 700;
}
#column .article_body .ksim .ksim_notes{ padding: 12px 22px 18px; }
#column .article_body .ksim .ksim_notes p{
    color: var(--ks-sub);
    font-size: 14px;
    line-height: 1.7;
}
#column .article_body .ksim .ksim_notes p + p{ margin-top: 4px; }
#column .article_body .ksim .ksim_nojs{
    padding: 0 22px 12px;
    color: var(--ks-sub);
    font-size: 14px;
}
#column .article_body .ksim.is_ready .ksim_nojs{ display: none; }

/* ── ページの上（要約文の下）から計算機へ飛ぶボタン
   ★飛んだ先（#ksim）が固定ヘッダーの裏に隠れないよう、見出しと同じ scroll-margin-top を付ける（css/readable.css の h2[id] と同じ値）
   ★色は計算機の帯と同じ茶。ベタのピンクは「相談する」の本物のボタンだけに使う決まりなので使わない */
#column .article_body .ksim{ scroll-margin-top: 140px; }
#column .article_head .ksim_jump{ margin: 20px 0 0; padding: 0; }
#column .article_head .ksim_jump a{
    box-sizing: border-box;   /* スマホで width:100% に余白が足されて右に18pxはみ出していた */
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    min-height: 60px;
    padding: 10px 22px 10px 18px;
    border-radius: 10px;
    background: #a9600f;
    box-shadow: 0 3px 0 #7d4708;
    color: #fff;
    text-decoration: none;
    line-height: 1.4;
}
#column .article_head .ksim_jump a:hover{ background: #b86d17; color: #fff; }
#column .article_head .ksim_jump a:active{ transform: translateY(2px); box-shadow: 0 1px 0 #7d4708; }
#column .article_head .ksim_jump a:focus-visible{ outline: 3px solid #f0d9bb; outline-offset: 2px; }
#column .article_head .ksim_jump .kj_icon{ flex: none; display: flex; }
#column .article_head .ksim_jump .kj_txt{ font-size: 18px; font-weight: 700; }
#column .article_head .ksim_jump .kj_txt small{ display: block; margin-top: 2px; font-size: 14px; font-weight: 400; opacity: .92; }
#column .article_head .ksim_jump .kj_arrow{ flex: none; margin-left: 6px; font-size: 20px; font-weight: 700; }
@media (max-width: 767px){
    #column .article_body .ksim{ scroll-margin-top: 76px; }
    #column .article_head .ksim_jump{ margin-top: 16px; }
    #column .article_head .ksim_jump a{ width: 100%; padding: 10px 14px; }
    #column .article_head .ksim_jump .kj_txt{ flex: 1; font-size: 17px; }
    #column .article_head .ksim_jump .kj_txt small{ font-size: 13px; }
}
@media (min-width: 768px) and (max-width: 768.98px){
    #column .article_body .ksim{ scroll-margin-top: 174px; }
}

/* ── 2026-09-26：特養の費用の記事（column/tokuyo-hiyou.php・js/tokuyo-sim.js）でも使う共通の部品にした。
   　 ファイル名は最初に作った医療費控除の記事のまま。特養の分で足したのは、この節の指定だけ
   　 （2枚ずつ並べる .c2・選択肢の列の数 .c5/.c3・選べない状態 .is_off・地域の選択 .ts_wide・グループの見出し .ksim_grp） */
#column .article_body .ksim [hidden]{ display: none !important; }
#column .article_body .ksim .ksim_rates.c5{ grid-template-columns: repeat(5, 1fr); }
#column .article_body .ksim .ksim_rates.c3{ grid-template-columns: repeat(3, 1fr); }
#column .article_body .ksim .is_off .ksim_rates span{ opacity: .4; cursor: not-allowed; }
#column .article_body .ksim .is_off .ksim_rates label{ cursor: not-allowed; }
#column .article_body .ksim select.ts_wide{
    width: 100%;
    max-width: 480px;
    color: var(--ks-ink);
    font-size: 17px;
}
#column .article_body .ksim .ksim_grp{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 8px;
    color: var(--ks-sub);
    font-size: 15px;
    font-weight: 700;
}
#column .article_body .ksim .ksim_grp::after{ content: ""; flex: 1; border-top: 1px solid var(--ks-line); }
#column .article_body .ksim .ksim_out_tit + .ksim_grp{ margin-top: 4px; }
@media (min-width: 768px){
    #column .article_body .ksim .ksim_cards.c2{ grid-template-columns: repeat(2, 1fr); }
}

/* ── タブレット以下：カードを縦に */
@media (max-width: 767px){
    #column .article_body .ksim .ksim_head{ padding: 12px 16px; font-size: 18px; }
    #column .article_body .ksim .ksim_lead{ padding: 14px 16px 2px; font-size: 15px; }
    #column .article_body .ksim .ksim_in{ margin: 12px 12px 0; padding: 16px 14px 4px; }
    #column .article_body .ksim .ksim_f > label,
    #column .article_body .ksim .ksim_f > legend{ font-size: 17px; }
    #column .article_body .ksim .ksim_hint{ font-size: 15px; }
    #column .article_body .ksim .ksim_rates{ grid-template-columns: repeat(2, 1fr); }
    #column .article_body .ksim .ksim_rates.c5,
    #column .article_body .ksim .ksim_rates.c3{ grid-template-columns: repeat(3, 1fr); }
    #column .article_body .ksim .ksim_rates.c5.m2{ grid-template-columns: repeat(2, 1fr); }
    #column .article_body .ksim .ksim_rates span{ font-size: 17px; }
    #column .article_body .ksim .ksim_out{ padding: 18px 12px 4px; }
    #column .article_body .ksim .ksim_cards{ grid-template-columns: 1fr; }
    #column .article_body .ksim .kc_big{ font-size: 26px; }
    #column .article_body .ksim .ksim_notes{ padding: 10px 16px 16px; }
    #column .article_body .ksim .ksim_notes p{ font-size: 13px; }
}