@charset "UTF-8";
/* ==========================================================
   施工事例詳細の目次（.nav-sub）：スマホの下メニューをアイコン＋文字に（2026-10-04 新規）
   single-works.php から読み込み。style-sp.css の同じ指定を上書きする
   アイコン＝線画（A案）。今いる項目は scroll.js が a に .active を付ける
   ========================================================== */

/* PC：アイコンは出さない（左の目次は今のまま） */
.single-works .nav-sub .nav-ico{ display:none;}

/* スマホ（430px以下） */
@media screen and (max-width:430px){
    .single-works #box-01 .case-contents .nav-sub ul li a{ display:block; padding:9px 2px 8px; font-size:11px; line-height:1.3; color:#7B8C98; letter-spacing:0; white-space:nowrap;}
    .single-works #box-01 .case-contents .nav-sub ul li a br{ display:none;}

    /* 下向き矢印は使わない */
    .single-works #box-01 .case-contents .nav-sub ul li a::after{ display:none;}

    /* アイコン */
    .single-works .nav-sub .nav-ico{ display:block; width:22px; height:22px; margin:0 auto 3px; fill:none; stroke:#9AA9B4; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:.3s;}

    /* 今いる項目：青＋上に青い線 */
    .single-works #box-01 .case-contents .nav-sub ul li a.active{ color:#00A3DF;}
    .single-works #box-01 .case-contents .nav-sub ul li a.active .nav-ico{ stroke:#00A3DF;}
    .single-works #box-01 .case-contents .nav-sub ul li a.active::before{ content:""; position:absolute; left:25%; right:25%; top:0; height:3px; background:#00A3DF; border-radius:0 0 3px 3px;}
}