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

/*------------------ teaser --------------------*/
#teaser.simulation{
    background: url(../images/simulation/teaser.png)no-repeat center center;
    background-size: cover;
}
@media screen and (max-width: 767px) {
    #teaser.simulation{
        background: url(../images/simulation/teaser_sp.png)no-repeat center center;
        background-size: cover;
    }
}
@media screen and (max-width: 767px) {
    #breadcrumb.simulation{
        box-sizing: border-box;
        height: auto;
        min-height: 30px;
        padding: 7px 10px;
        line-height: 1.6;
    }
}

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

/*------------------ 見出し --------------------*/
#simulation h2.sim_hdg{
    position: relative;
    margin: 70px 0 26px;
    padding: 14px 0 14px 22px;
    border-left: 5px solid #e95377;
    background: #fbf3f5;
    font-family: var(--font-head);
    font-size: 24px;
    line-height: 1.5;
}
#simulation h3.sim_hdg3{
    margin: 40px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e6b7c4;
    font-family: var(--font-head);
    font-size: 19px;
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    #simulation h2.sim_hdg{
        margin: 40px 0 18px;
        padding: 10px 0 10px 14px;
        border-left-width: 4px;
        font-size: 19px;
    }
    #simulation h3.sim_hdg3{ margin: 28px 0 12px; font-size: 16px; }
}

/*------------------ 本文パーツ --------------------*/
#simulation .sim_txt{
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 2;
}
#simulation .sim_txt strong{
    font-weight: 700;
    background: linear-gradient(transparent 62%, #fbdde5 62%);
}
#simulation .sim_ul{ margin-bottom: 24px; }
#simulation .sim_ul li{
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.9;
}
#simulation .sim_ul li+li{ margin-top: 10px; }
#simulation .sim_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) {
    #simulation .sim_txt{ margin-bottom: 18px; font-size: 15px; line-height: 1.95; }
    #simulation .sim_ul li{ font-size: 15px; }
}

/*------------------ 個人情報を送信しない旨のバッジ --------------------*/
#simulation .sim_privacy{
    display: block;
    margin: 0 auto 34px;
    max-width: 860px;
    padding: 12px 18px;
    border: 1px solid #e3ecdd;
    border-radius: 6px;
    background: #f6faf3;
    color: #4a6b3c;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}
@media screen and (max-width: 767px) {
    #simulation .sim_privacy{
        margin-bottom: 22px;
        padding: 10px 12px;
        font-size: 12px;
        text-align: left;
    }
}

/*==========================================================================
  シミュレーター本体
  ========================================================================== */
#simulation .sim_tool{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
}
@media screen and (max-width: 900px) {
    #simulation .sim_tool{ grid-template-columns: 1fr; gap: 16px; }
}

/*------------------ 入力フォーム --------------------*/
#simulation .sim_form{
    box-sizing: border-box;
    padding: 28px 28px 24px;
    border: 1px solid #ebebeb;
    border-top: 4px solid #e95377;
    border-radius: 6px;
    background: #fff;
}
#simulation .sim_form .form_tit,
#simulation .sim_result .res_tit{
    position: relative;
    margin-bottom: 22px;
    padding-bottom: 12px;
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.4;
}
#simulation .sim_form .form_tit:after,
#simulation .sim_result .res_tit:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: #e95377;
}
/* スマートフォン用の固定バー
   入力欄を操作している間、結果が画面外に出てしまわないようにするためのものです。

   ※ position:sticky ではなく position:fixed を使っています。
   　 サイト共通の #wrapper に overflow:hidden が指定されており、
   　 その中では sticky が効かないためです（共通CSSは変更していません）。
   　 表示・非表示は js/simulation.js が .is_on を付け外しして制御します。
   ※ 上部の共通ヘッダーが高さ80pxで固定されているため、top:80px に置いています。
   ※ 画面下部にはサイト共通の固定フッター（.fixed_ft）があるため、下には置けません。 */
#simulation .sim_sticky{ display: none; }
@media screen and (max-width: 900px) {
    #simulation .sim_sticky.is_on{
        display: flex;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        z-index: 20;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
        padding: 9px 16px;
        background: #e95377;
        color: #fff;
        font-size: 13px;
        line-height: 1.5;
        box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }
    #simulation .sim_sticky strong{
        flex: none;
        font-family: var(--font-base);
        font-size: 22px;
        font-weight: 700;
    }
}

#simulation .sim_field{ margin-bottom: 24px; }
#simulation .sim_field:last-child{ margin-bottom: 0; }
#simulation .sim_field .f_head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
#simulation .sim_field label{
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}
#simulation .sim_field .f_val{
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
#simulation .sim_field .f_val input[type="number"]{
    box-sizing: border-box;
    width: 92px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 19px;
    font-weight: 700;
    text-align: right;
    -moz-appearance: textfield;
}
#simulation .sim_field .f_val input[type="number"]::-webkit-outer-spin-button,
#simulation .sim_field .f_val input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
#simulation .sim_field .f_val input[type="number"]:focus{
    outline: 2px solid #f3c4d1;
    outline-offset: 1px;
    border-color: #e95377;
}
#simulation .sim_field .f_val .unit{
    color: #555;
    font-size: 14px;
}
#simulation .sim_field .f_note{
    margin-top: 6px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.7;
}

/*------------------ スライダー --------------------*/
#simulation input[type="range"]{
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    margin: 0;
    border-radius: 3px;
    background: #f0e3e7;
    cursor: pointer;
}
#simulation input[type="range"]:focus{
    outline: 2px solid #f3c4d1;
    outline-offset: 4px;
}
#simulation input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #e95377;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: pointer;
}
#simulation input[type="range"]::-moz-range-thumb{
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #e95377;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: pointer;
}
#simulation input[type="range"]::-moz-range-track{
    height: 6px;
    border-radius: 3px;
    background: #f0e3e7;
}
#simulation .sim_field .f_scale{
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    color: #6e6e6e;
    font-family: var(--font-base);
    font-size: 12px;   /* 11px → 12px（目盛りが読みにくかったため。2026年8月14日）*/
}
/* スマートフォンでは、指で操作しやすいようにつまみとレールを大きくします */
@media screen and (max-width: 767px) {
    #simulation input[type="range"]{ height: 8px; border-radius: 4px; }
    #simulation input[type="range"]::-webkit-slider-thumb{ width: 30px; height: 30px; }
    #simulation input[type="range"]::-moz-range-thumb{ width: 24px; height: 24px; }
    #simulation input[type="range"]::-moz-range-track{ height: 8px; border-radius: 4px; }
}

/*------------------ 選択ボタン（実費の見込み） --------------------*/
#simulation .f_choice{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
#simulation .f_choice button{
    box-sizing: border-box;
    padding: 10px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-family: var(--font-base);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    transition: .2s;
}
#simulation .f_choice button .amt{
    display: block;
    margin-top: 3px;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 700;
}
#simulation .f_choice button:hover{ border-color: #f3c4d1; background: #fdf7f9; }
#simulation .f_choice button[aria-pressed="true"]{
    border-color: #e95377;
    background: #e95377;
    color: #fff;
}

/*------------------ 結果 --------------------*/
#simulation .sim_result{
    box-sizing: border-box;
    padding: 28px 28px 24px;
    border: 1px solid #f0d3db;
    border-top: 4px solid #e95377;
    border-radius: 6px;
    background: #fdf7f9;
}
/* ------------------------------------------------------------------
   答えの箱（2026年8月13日に強調しました）

   このページでいちばん大事な数字です。
   もとは枠も影もない白い箱で、すぐ下の内訳の表と同じ強さで
   並んでいました。ピンクの枠と影を付けて、下地から浮かせています。

   ★ここの強さは、②の帯（ピンク一色）と釣り合うように決めています。
   　枠を細くしたり影を消したりすると、また埋もれます。
   ------------------------------------------------------------------ */
#simulation .res_main{
    padding: 26px 16px 22px;
    border: 2px solid #e95377;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(233, 83, 119, .18);
    text-align: center;
}
/* 見出しは、何の数字かがすぐ読めるよう、濃さと太さを上げています */
#simulation .res_main .res_label{
    color: #333;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}
#simulation .res_main .res_num{
    margin-top: 8px;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 62px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}
#simulation .res_main .res_num small{
    margin-left: 5px;
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 500;
}
/* 補足は、数字の邪魔をしないよう、うすいままにしています。
   上に細い区切り線を入れて、数字と読み分けられるようにしました。 */
#simulation .res_main .res_sub{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f7e4ea;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.7;
}
#simulation .res_break{
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 6px;
    background: #fff;
}
#simulation .res_break dl{
    display: flex;
    flex-wrap: wrap;
}
#simulation .res_break dt{
    box-sizing: border-box;
    width: 62%;
    padding: 7px 0;
    font-size: 13px;
    line-height: 1.6;
}
#simulation .res_break dd{
    box-sizing: border-box;
    width: 38%;
    padding: 7px 0;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}
#simulation .res_break dt.total,
#simulation .res_break dd.total{
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid #f0d3db;
}
#simulation .res_break dd.minus{ color: #6e6e6e; }
#simulation .res_break dd.total{ color: #cc2b5a; font-size: 18px; }
#simulation .sim_alert{
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #f0c9c9;
    border-radius: 6px;
    background: #fdf0f0;
    color: #c0392b;
    font-size: 13px;
    line-height: 1.8;
}
@media screen and (max-width: 767px) {
    #simulation .sim_form,
    #simulation .sim_result{ padding: 18px 16px 16px; }
    #simulation .sim_form .form_tit,
    #simulation .sim_result .res_tit{ font-size: 17px; margin-bottom: 18px; }
    #simulation .res_main{ padding: 20px 14px 18px; }
    #simulation .res_main .res_label{ font-size: 14px; }
    #simulation .res_main .res_num{ font-size: 46px; }
    #simulation .res_main .res_num small{ font-size: 17px; }
    #simulation .res_main .res_sub{ margin-top: 12px; padding-top: 10px; }
    #simulation .sim_field .f_val input[type="number"]{ width: 80px; font-size: 17px; }
}

/*------------------ 施設タイプ別の判定 --------------------*/
#simulation .sim_types{ margin-top: 10px; }
#simulation .type_item{
    padding: 14px 0;
    border-bottom: 1px solid #ececec;
}
#simulation .type_item:last-child{ border-bottom: none; }
#simulation .type_item .t_head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
#simulation .type_item .t_name{
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}
#simulation .type_item .t_judge{
    flex: none;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
}
#simulation .type_item .t_judge.ok{ background: #e8f4e2; color: #3f7a2c; }
#simulation .type_item .t_judge.maybe{ background: #fdf0f4; color: #cc2b5a; }
#simulation .type_item .t_judge.ng{ background: #f2f2f2; color: #999; }
#simulation .type_item .t_bar{
    position: relative;
    height: 16px;
    border-radius: 3px;
    background: #f4f4f4;
}
#simulation .type_item .t_range{
    position: absolute;
    top: 0;
    height: 16px;
    border-radius: 3px;
    background: #f3c4d1;
}
#simulation .type_item.is_ok .t_range{ background: #a9d69a; }
#simulation .type_item.is_ng .t_range{ background: #e2e2e2; }
#simulation .type_item .t_mark{
    position: absolute;
    top: -5px;
    width: 2px;
    height: 26px;
    background: #333;
}
#simulation .type_item .t_mark:after{
    content: '';
    position: absolute;
    top: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
}
#simulation .type_item .t_scale{
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    color: #6e6e6e;
    font-family: var(--font-base);
    font-size: 12px;   /* 11px → 12px（目盛りが読みにくかったため。2026年8月14日）*/
}
#simulation .type_item .t_note{
    margin-top: 6px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.7;
}
#simulation .types_legend{
    margin-top: 12px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.8;
}

/*------------------ 期間別の比較 --------------------*/
#simulation .sim_years table{
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ececec;
}
#simulation .sim_years th,
#simulation .sim_years td{
    padding: 11px 8px;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    line-height: 1.6;
}
#simulation .sim_years th{
    width: 40%;
    background: #fafafa;
    font-weight: 700;
    text-align: left;
}
#simulation .sim_years td{
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}
#simulation .sim_years tr.is_current th{ background: #fdf0f4; color: #cc2b5a; }
#simulation .sim_years tr.is_current td{ color: #cc2b5a; }

/*------------------ ご家族の援助（折りたたみ） --------------------*/
#simulation .sim_family{
    margin-top: 26px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fff;
}
#simulation .sim_family > summary{
    padding: 14px 18px;
    color: #cc2b5a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
#simulation .sim_family > summary::-webkit-details-marker{ display: none; }
#simulation .sim_family > summary:before{
    content: '＋';
    margin-right: 8px;
    font-family: var(--font-base);
}
#simulation .sim_family[open] > summary:before{ content: '−'; }
#simulation .sim_family .fam_body{
    padding: 4px 18px 20px;
}
#simulation .sim_family .fam_caution{
    margin-bottom: 16px;
    padding: 12px 14px;
    border-left: 3px solid #e95377;
    background: #fbf3f5;
    font-size: 13px;
    line-height: 1.9;
}
#simulation .sim_family .fam_result{
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 6px;
    background: #fdf7f9;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
}
#simulation .sim_family .fam_result strong{
    display: block;
    margin-top: 4px;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 30px;
    font-weight: 700;
}
#simulation .sim_family .fam_result .fam_sub{
    display: block;
    margin-top: 4px;
    color: #6e6e6e;
    font-size: 12px;
}
#simulation .sim_family .sim_field{ margin-bottom: 0; }

/*==========================================================================
  逆算パネル（気になる施設の月額から）
  ========================================================================== */
#simulation .sim_reverse{
    margin-top: 26px;
    box-sizing: border-box;
    padding: 28px 28px 24px;
    border: 1px solid #ebebeb;
    border-top: 4px solid #e95377;
    border-radius: 6px;
    background: #fff;
}
#simulation .sim_reverse .rev_grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: center;
}
#simulation .sim_reverse .rev_out{
    padding: 22px 16px 20px;
    border-radius: 6px;
    background: #fdf7f9;
    text-align: center;
}
#simulation .sim_reverse .rev_out .rev_label{
    color: #555;
    font-size: 14px;
    line-height: 1.7;
}
#simulation .sim_reverse .rev_out .rev_num{
    margin-top: 6px;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
}
#simulation .sim_reverse .rev_out .rev_num small{
    margin-left: 4px;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 400;
}
#simulation .sim_reverse .rev_out .rev_sub{
    margin-top: 8px;
    color: #555;
    font-size: 13px;
    line-height: 1.8;
}
#simulation .sim_reverse .rev_out.is_safe .rev_num{ font-size: 26px; line-height: 1.5; }
@media screen and (max-width: 900px) {
    #simulation .sim_reverse .rev_grid{ grid-template-columns: 1fr; gap: 18px; }
}
@media screen and (max-width: 767px) {
    #simulation .sim_reverse{ padding: 18px 16px 16px; }
    #simulation .sim_reverse .rev_out .rev_num{ font-size: 36px; }
}

/*==========================================================================
  CTA・注記・関連リンク
  ========================================================================== */
#simulation .sim_cta{
    margin-top: 34px;
    padding: 30px 30px 26px;
    border-radius: 6px;
    background: #fdf0f4;
    text-align: center;
}
#simulation .sim_cta .cta_tit{
    color: #cc2b5a;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.5;
}
#simulation .sim_cta .cta_txt{
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.95;
}
#simulation .sim_cta .cta_btn{
    margin-top: 20px;
}
#simulation .sim_cta .cta_btn a{
    display: inline-block;
    padding: 15px 54px;
    border-radius: 40px;
    background: #e95377;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: .2s;
}
#simulation .sim_cta .cta_btn a:hover{ opacity: .8; }
@media screen and (max-width: 767px) {
    #simulation .sim_cta{ margin-top: 26px; padding: 20px 16px 18px; }
    #simulation .sim_cta .cta_tit{ font-size: 18px; }
    #simulation .sim_cta .cta_txt{ font-size: 14px; }
    #simulation .sim_cta .cta_btn a{ display: block; padding: 14px 10px; font-size: 15px; }
}

#simulation .qa_list{ margin-bottom: 10px; }
#simulation .qa_item{
    padding: 24px 28px 20px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background: #fff;
}
#simulation .qa_item+.qa_item{ margin-top: 14px; }
#simulation .qa_item .q{
    position: relative;
    padding-left: 36px;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.6;
}
#simulation .qa_item .q:before{
    content: 'Q';
    position: absolute;
    left: 0;
    top: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e95377;
    color: #fff;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 26px;
    text-align: center;
}
#simulation .qa_item .a{
    margin-top: 14px;
    padding-left: 36px;
    font-size: 15px;
    line-height: 1.95;
}
@media screen and (max-width: 767px) {
    #simulation .qa_item{ padding: 16px 16px 14px; }
    #simulation .qa_item .q{ padding-left: 30px; font-size: 16px; }
    #simulation .qa_item .q:before{ width: 22px; height: 22px; font-size: 13px; line-height: 22px; }
    #simulation .qa_item .a{ margin-top: 10px; padding-left: 30px; font-size: 14px; }
}

#simulation .sim_links{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 10px;
}
#simulation .sim_links a{
    display: block;
    box-sizing: border-box;
    padding: 22px 22px 20px;
    border: 1px solid #ebebeb;
    border-top: 4px solid #e95377;
    border-radius: 6px;
    background: #fff;
    color: #111;
    text-decoration: none;
    transition: .25s;
}
#simulation .sim_links a:hover{
    border-color: #f3c4d1;
    border-top-color: #e95377;
    box-shadow: 0 8px 24px rgba(233,83,119,.13);
    transform: translateY(-3px);
}
#simulation .sim_links a .tit{
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.5;
}
#simulation .sim_links a .txt{
    margin-top: 10px;
    color: #555;
    font-size: 13px;
    line-height: 1.8;
}
#simulation .sim_links a .more{
    display: block;
    margin-top: 14px;
    color: #cc2b5a;
    font-size: 13px;
}
#simulation .sim_links a .more:after{
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 14px;
    height: 14px;
    background: url(../images/common/ico_arrow02.png)no-repeat center center;
    background-size: 14px;
    vertical-align: -1px;
}
@media screen and (max-width: 1024px) {
    #simulation .sim_links{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
    #simulation .sim_links{ grid-template-columns: 1fr; gap: 12px; }
    #simulation .sim_links a{ padding: 16px 16px 14px; }
    #simulation .sim_links a .tit{ font-size: 16px; }
}

#simulation .sim_disclaimer{
    margin-top: 45px;
    padding: 18px 22px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fafafa;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1.9;
}
#simulation .sim_disclaimer p+p{ margin-top: 8px; }
@media screen and (max-width: 767px) {
    #simulation .sim_disclaimer{ margin-top: 30px; padding: 14px; font-size: 12px; }
}

/*------------------ JavaScript が無効な場合 --------------------*/
#simulation .sim_noscript{
    margin-bottom: 26px;
    padding: 18px 22px;
    border: 1px solid #f0c9c9;
    border-radius: 6px;
    background: #fdf0f0;
    color: #c0392b;
    font-size: 14px;
    line-height: 1.9;
}

/* ==========================================================================
   目盛りの位置あわせ（2026年8月13日に追加）

   「使える資産」のスライダーは、左が細かく右にいくほど粗い2乗カーブです
   （js/simulation.js の posToValue）。
   ところが目盛りは flex の space-between で等間隔に並べていたため、
   金額と位置が合っていませんでした。

   　「1,000万」… 本来 22.4% の位置 → 33.3% に表示（10.9%のズレ）
   　「5,000万」… 本来 50.0% の位置 → 66.7% に表示（16.7%のズレ）

   そこで、目盛り1つずつに style="--at:0〜1" で位置を持たせ、
   その位置に置くようにしました。

   ★つまみの幅ぶんの補正について
   　スライダーのつまみは22pxあり、その中心が動くのは
   　「左から11px」〜「右から11px」の範囲だけです。
   　単純に left:22.4% とすると、つまみの実際の位置とわずかにずれます。
   　calc() でこの補正を入れています。
   　つまみの大きさを変えたときは、下の 11px / 22px も直してください。
   ========================================================================== */
#simulation .sim_field .f_scale_curve{
    display: block;
    position: relative;
    height: 1.5em;
}
#simulation .sim_field .f_scale_curve span{
    position: absolute;
    top: 0;
    /* 11px＝つまみの半分。100% - 22px ＝つまみの中心が動く幅 */
    left: calc(11px + (100% - 22px) * var(--at));
    transform: translateX(-50%);
    white-space: nowrap;
}
/* 両端は、外にはみ出さないように寄せます */
#simulation .sim_field .f_scale_curve span:first-child{
    transform: none;
}
#simulation .sim_field .f_scale_curve span:last-child{
    transform: translateX(-100%);
}

/* ==========================================================================
   想定居住期間（自動で決まる欄）

   入力欄ではないので、スライダーも数値入力もありません。
   年齢を動かすと、js/simulation.js が年数を書き込みます。
   ========================================================================== */
#simulation .sim_derived .f_label{
    font-weight: 700;
}
/* 「自動」であることが見て分かるように、うすい下地を敷いています */
#simulation .sim_derived{
    padding: 14px 16px;
    border-radius: 8px;
    background: #fdf7f9;
}
#simulation .sim_derived .f_val{
    color: #cc2b5a;
    font-weight: 700;
}
#simulation .sim_derived .f_val strong{
    font-size: 22px;
    line-height: 1.2;
}
#simulation .sim_derived .f_note{
    margin-top: 6px;
}

@media screen and (max-width: 767px) {
    /* スマートフォンではつまみが30pxになるため、補正の値も変わります */
    #simulation .sim_field .f_scale_curve span{
        left: calc(15px + (100% - 30px) * var(--at));
    }
    #simulation .sim_derived{
        padding: 12px 12px;
    }
    #simulation .sim_derived .f_val strong{
        font-size: 20px;
    }
}

/* ==========================================================================
   ①②の帯（2026年8月13日に追加）

   ------------------------------------------------------------------
   何のためのものか
   ------------------------------------------------------------------
   入力側（左）と結果側（右）は、どちらも「上辺4pxピンクの白い箱」で、
   見分けの手がかりが背景のうすい色だけでした。
   はじめて開いた方に「どこを触ればいいのか」が伝わりにくい状態です。

   そこで、それぞれの先頭に番号つきの帯を置き、**帯の色で役割を分けて**います。

   　① ここを動かす … うすいピンクの帯（＝操作する側）
   　② ここを見る　 … ピンク一色の帯（＝読む側）

   「濃いほうが答え」と見て分かるようにするための色分けです。
   入れ替えないでください。
   ========================================================================== */

/* 帯は箱の端までいっぱいに広げます。
   ★負の margin は、.sim_form / .sim_result の padding と同じ値です。
   　padding を変えたときは、ここも同じ値に直してください。 */
#simulation .sim_form .form_tit,
#simulation .sim_result .res_tit{
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    margin: -28px -28px 22px;
    padding: 14px 20px;
    padding-bottom: 14px;   /* 上の共通指定の padding-bottom:12px を打ち消します */
    border-radius: 5px 5px 0 0;
    font-family: var(--font-head);
    font-size: 19px;
    line-height: 1.35;
}
/* もとの「見出しの下の48pxの線」は、帯にしたので消します */
#simulation .sim_form .form_tit:after,
#simulation .sim_result .res_tit:after{
    display: none;
}

/* ① 入力側：うすいピンク。白い箱の上にのる、操作する側の帯です */
#simulation .sim_form .form_tit{
    background: #fdf2f5;
    color: #c73b5d;
}
/* ② 結果側：ピンク一色。ここが答えだと分かるようにしています */
#simulation .sim_result .res_tit{
    background: #e95377;
    color: #fff;
}

/* 番号の丸 */
#simulation .step_no{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #cc2b5a;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
#simulation .sim_form .step_no{
    border: 1px solid #f0d3db;
}

#simulation .step_txt{
    min-width: 0;
}
#simulation .step_txt small{
    display: block;
    margin-top: 3px;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}
#simulation .sim_form .step_txt small{
    color: #7a5c64;
}
#simulation .sim_result .step_txt small{
    color: #fff;   /* うすいピンク #ffe3ea（ピンク地で比2.9）→ 白（3.5）。2026年8月14日 */
}

/* 帯を付けたので、箱の上辺の4pxの線は1pxに戻します
   （4pxのままだと、帯の上に別の色の線がのって見えます） */
#simulation .sim_form,
#simulation .sim_result{
    border-top-width: 1px;
}
/* ★ここに overflow:hidden を付けないでください。
   　帯の角を切りそろえるために一度入れましたが、
   　　・箱の外にはみ出して置いている「→」の丸が切れる
   　　・スマートフォン用の固定バー（.sim_sticky）にも影響しうる
   　という不具合が出ます。
   　帯自身に border-radius:5px 5px 0 0（箱の内側の丸みと同じ値）を
   　持たせてあるので、overflow は不要です。 */

/* --------------------------------------------------------------------------
   ①から②へ向かう矢印

   2つの箱のあいだ（gap:26px）に置いています。
   スマートフォンでは縦並びになるため、下向きにします。
   -------------------------------------------------------------------------- */
#simulation .sim_result{
    position: relative;
}
#simulation .sim_result:before{
    content: '→';
    position: absolute;
    top: 22px;
    left: -13px;              /* gap(26px) の半分 */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e95377;
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   「自動」の札

   想定居住期間はスライダーではありません。ほかの入力欄と並んでいるので、
   動かせないことが分かるように札を付けています。
   -------------------------------------------------------------------------- */
#simulation .f_auto{
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 3px;
    background: #e95377;
    color: #fff;
    font-family: var(--font-base);
    font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
    font-weight: 700;
    line-height: 1.6;
    vertical-align: 1px;
}

@media screen and (max-width: 900px) {
    /* 縦並びになるので、矢印は上辺の中央で下を向かせます */
    #simulation .sim_result:before{
        top: -13px;
        left: 50%;
        margin-left: -13px;
        content: '↓';
    }
}
@media screen and (max-width: 767px) {
    /* 箱の padding が 18px 16px になるため、帯の負の margin もそろえます */
    #simulation .sim_form .form_tit,
    #simulation .sim_result .res_tit{
        margin: -18px -16px 18px;
        padding: 12px 14px;
        font-size: 17px;
    }
    #simulation .step_no{
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
    #simulation .step_txt small{
        font-size: 12px;
    }
}