width100ワイド100コンテンツを作る場合のメモ　css

.seihin_box_wrap_all{
padding: 56px 0;

@media screen and (max-width: 736px){
padding: 24px 0px;
}//@media screen 736px

}

.seihin_box_wrap{

    &:nth-child(even){ background: #fbf7f8}
    

    .seihin_box_wrap_in{

  
    
.flex_box;
padding: 36px 0;

//コンテンツサイズ
width: 1084px; 
@media screen and (max-width: 736px){
    width: 100%; 
    }//@media screen 736px

    @media screen and (min-width: 1200px){

        width: 1200px;  

    }//@media screen and (min-width: 1200px)


margin-inline: auto;


.img_box{ width: 20%; padding-right: 4%;
    .img_box_in{ img{max-width: 100%;}}
}


.disp_box{
    width: 76%;

    .title{ font-size: 24px; font-weight: bold;

        .sub_title{ font-size: 16px; font-family: 'Roboto Condensed', sans-serif; color: @site_color; padding-left: 1em; display: inline-block;}

        border-bottom: solid #e4b4c2 4px ;
        margin-bottom: 24px;
    }

    .disp{}
}
}
}

<div class="seihin_box_wrap_all">

<!--  -->
<div class="seihin_box_wrap">
<div class="seihin_box_wrap_in">
<div class="img_box">
<div class="img_box_in">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/contents01.jpg" alt="マイクロカテーテル">

</div>

</div>
<div class="disp_box">
<h4 class="title">マイクロカテーテル <span class="sub_title">Micro catheter</span></h4>

<div class="disp">
Ｘ線観察のため患部に造影剤注入、あるいは患部に薬剤注入などの処置を施す目的で使用する<br>
直径1.0mm程度のカテーテルです。サイズや硬度バランス等、様々なラインアップを揃えております。
</div>

<div class="tsuzuki_box"><a class="d_button utm d_button2" href="/事業内容/">製品一覧 <i class=" icon-right-open"></i></a></div>


</div>

</div>
</div>

<!--  -->

<!--  -->
<div class="seihin_box_wrap">
<div class="seihin_box_wrap_in">
<div class="img_box">
<div class="img_box_in">

<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/contents02.jpg" alt="オクリュージョンバルーンカテーテル">

</div>

</div>
<div class="disp_box">
<h4 class="title">オクリュージョンバルーンカテーテル <span class="sub_title">Occlusion balloon catheter</span></h4>

<div class="disp">
動脈や静脈の塞栓術、動注化学療法等を実施する際に、血流を遮断し、<br>
治療を施す目的で使用するバルーン付きカテーテルです。
</div>

<div class="tsuzuki_box"><a class="d_button utm d_button2" href="/事業内容/">製品一覧 <i class=" icon-right-open"></i></a></div>


</div>

</div>
</div>

<!--  -->




<!--  -->
<div class="seihin_box_wrap">
<div class="seihin_box_wrap_in">
<div class="img_box">
<div class="img_box_in">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/contents03.jpg" alt="カテーテルガイドワイヤー">

</div>

</div>
<div class="disp_box">
<h4 class="title">カテーテルガイドワイヤー <span class="sub_title">Catheter guide wire</span></h4>

<div class="disp">
Ｘ線観察のため患部に造影剤や薬剤を注入したり、患部に拡張や生検などの処置を施す目的で使用するカテーテルを目的部位まで誘導するためのガイドワイヤーです。
</div>

<div class="tsuzuki_box"><a class="d_button utm d_button2" href="/事業内容/">製品一覧 <i class=" icon-right-open"></i></a></div>


</div>

</div>
</div>

<!--  -->






</div><!-- /.seihin_box_wrap_all -->