/* =====================================================
   災害対応・防災事業ページ（service_dpp.html）専用パーツ
   ※ hero・本文幅・page-heading・区切り線は common-additions.css を使用
===================================================== */


/* ---- 冒頭：製品名タイトル＋リード文（センター揃え） ---- */

.dpp-intro{
    text-align:center;
    margin-bottom:60px;
}

.dpp-intro h1{
    font-size:clamp(20px,2.6vw,28px);
    font-weight:700;
    color:#111;
    margin-bottom:34px;
}

.dpp-intro p{
    font-size:clamp(14px,1.6vw,17px);
    line-height:2;
    color:#222;
}


/* ---- 紺色タイトルボックス（それCoCo／製品の特長／現在の製品 など） ---- */

.dpp-title-box{
    display:inline-block;
    width:220px;              /* ← 追加：全ボックス共通の幅 */
    max-width:100%;           /* ← 追加：狭い画面ではみ出さない */
    text-align:center;        /* ← 追加：文字を中央に */
    white-space:nowrap;       /* ← 追加：折り返さない */
    background:#213269;
    color:#fff;
    font-weight:700;
    font-size:clamp(14px,1.8vw,18px);
    padding:14px 0;           /* ← 変更：左右の余白は幅で決まるので 0 に */
    margin-bottom:32px;
}


/* ---- ■ 付き小見出し ---- */

.dpp-subhead{
    font-size:clamp(15px,1.8vw,18px);
    font-weight:700;
    color:#111;
    margin-bottom:14px;
}

.dpp-block{
    margin-bottom:46px;
}

.dpp-text{
    font-size:clamp(14px,1.5vw,16px);
    line-height:1.9;
    color:#222;
    margin-bottom:20px;
}

.dpp-text:last-child{
    margin-bottom:0;
}


/* ---- サービス名の由来（S/O/Re/Co テーブル風） ---- */

.dpp-origin-table{
    margin:18px 0 8px 20px;
}

.dpp-origin-row{
    display:flex;
    gap:22px;
    margin-bottom:8px;
    font-size:clamp(14px,1.5vw,16px);
    color:#111;
}

.dpp-origin-row .dpp-origin-abbr{
    width:44px;
    flex-shrink:0;
    color:#2f7cc9;
    font-weight:700;
}

.dpp-origin-row .dpp-origin-word{
    width:180px;
    flex-shrink:0;
    font-weight:700;
}

.dpp-origin-row .dpp-origin-desc{
    flex:1;
}


/* ---- それCoCo紹介（動画） ---- */

.dpp-sorecoco-box{
    background:#fff;
    box-shadow:0 0 16px rgba(0,0,0,.08);
    padding:4% 5%;
    margin:30px 0 34px;
    text-align:center;
}

.dpp-sorecoco-box video{
    width:100%;
    max-width:920px;
    height:auto;
    display:block;
    margin:0 auto;
}


/* ---- ダウンロードボタン（画像そのものをリンク化・右寄せ） ---- */

.dpp-download-wrap{
    display:flex;
    justify-content:flex-end;
    margin:18px 0 50px;
}

.dpp-download-wrap a{
    display:block;
}

.dpp-download-wrap img{
    display:block;
    width:100%;
    max-width:540px;
    height:auto;
}



/* ---- 製品の特長：車両型／脱着式箱型（左テキスト＋右イラスト） ---- */

.dpp-feature-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
    margin-bottom:46px;
}

.dpp-feature-row .dpp-feature-text{
    flex:1;
}

.dpp-feature-row img{
    width:30%;
    max-width:260px;
    height:auto;
    flex-shrink:0;
    margin-top:6px;
}


/* ---- 現在の製品：各トラック（左テキスト＋右フロア図） ---- */

.dpp-product{
    margin-bottom:60px;
}

.dpp-product-main{
    display:flex;
    align-items:flex-start;
    gap:40px;
    margin-top:22px;
}

.dpp-product-features{
    flex:1;
    min-width:0;
}

.dpp-product-features h4{
    font-weight:700;
    font-size:clamp(14px,1.5vw,16px);
    margin-bottom:10px;
}

.dpp-product-features ul{
    list-style:none;
    margin-bottom:18px;
}

.dpp-product-features li{
    font-size:clamp(13px,1.4vw,15px);
    line-height:1.9;
    color:#222;
}

.dpp-product-note{
    font-size:clamp(12px,1.25vw,14px);
    color:#333;
    line-height:1.7;
    padding-left:1em;
    text-indent:-1em;
}

.dpp-product-floorplan{
    width:36%;
    max-width:320px;
    flex-shrink:0;
}

.dpp-product-floorplan img{
    width:100%;
    height:auto;
    display:block;
}


/* ---- 搭載設備情報：水循環システム（左図＋右テキスト） ---- */

.dpp-equip-row{
    display:flex;
    align-items:flex-start;
    gap:40px;
    margin:20px 0 10px;
}

.dpp-equip-diagram{
    flex:0 0 42%;
    max-width:420px;
}

.dpp-equip-diagram img{
    width:100%;
    height:auto;
    display:block;
}

.dpp-equip-text{
    flex:1;
    min-width:0;
    padding-top:6px;
}

.dpp-equip-text h4{
    font-weight:700;
    font-size:clamp(15px,1.6vw,18px);
    margin-bottom:16px;
    color:#111;
}

.dpp-equip-text p{
    font-size:clamp(13px,1.4vw,15px);
    line-height:1.9;
    color:#222;
    margin-bottom:22px;
}

.dpp-equip-text .dpp-download-wrap{
    margin:0;
}


/* ---- 抗菌・抗ウイルス：バナー画像 ---- */

.dpp-bio-banner{
    width:100%;
    margin:30px 0;
}

.dpp-bio-banner img{
    width:100%;
    height:auto;
    display:block;
}


/* ---- 私たちの活動：活動事例写真 ---- */

.dpp-action-photo{
    margin-top:30px;
    text-align:center;
}

.dpp-action-photo img{
    width:58%;
    max-width:600px;
    height:auto;
    display:block;
    margin:0 auto;
}


/* ---- レスポンシブ ---- */

@media(max-width:700px){


    .dpp-title-box{
        width:max(150px,34vw);
        padding:clamp(9px,2vw,14px) 0;
        margin-bottom:clamp(20px,4.6vw,32px);
    }
    
    .dpp-feature-row{
        flex-direction:column;
        align-items:center;
        text-align:left;
    }

    .dpp-feature-row img{
        width:60%;
        max-width:220px;
        margin-top:16px;
    }

    .dpp-product-main{
        flex-direction:column;
    }

    .dpp-product-floorplan{
        width:70%;
        max-width:320px;
        margin:10px auto 0;
    }

    .dpp-equip-row{
        flex-direction:column;
    }

    .dpp-equip-diagram{
        max-width:100%;
        width:80%;
        margin:0 auto;
    }

    .dpp-download-wrap{
        justify-content:center;
    }

    .dpp-download-wrap img{
        max-width:100%;
    }

    .dpp-action-photo img{
        width:90%;
    }

    .dpp-origin-row{
        flex-wrap:wrap;
    }

}