2分割（col_2）
エリアを半分に分割します（48％）
スマートフォンでは縦並びになります。
2分割（col_1_1）
エリアを半分に分割します（48％）
スマートフォンではそのまま横並びになります。
2分割（col_1_2）
エリアを1:2に分割します（40％ 56％）
スマートフォンでは縦並びになります。
2分割（col_2_1）
エリアを二分割します（56％ 40％）
スマートフォンでは縦並びになります。
2分割（col_1_3）
エリアを1:3に分割します（25％ 71％）
スマートフォンでは縦並びになります。
2分割（col_3_1）
エリアを3:1に分割します（71％ 25％）
スマートフォンでは縦並びになります。
3分割（col_3）
エリアを3分割します（31％）
スマートフォンでは縦並びになります。
3分割スマホ2分割（col_3_sp_2）
エリアを3分割します（31％）
スマートフォンでは2分割になります。
4分割（col_4）
エリアを3分割します（23.5％）
スマートフォンでは2分割になります。
高さ揃え（matchHeight）
リスト内部のテキストや内部コンテンツの量に応じてliタグの高さを揃えます。
<ul class="col_3 matchHeight mb30"> <li class="bd1 p10"> <figure class="mb10"><img src="https://shigen-cafe.com/wp-content/themes/shigencafe-template/img/concept/img_01.jpg" alt=""></figure> <p>テキストや内部コンテンツの量に応じて→</p> </li> <li class="bd1 p10"> <figure class="mb10"><img src="https://shigen-cafe.com/wp-content/themes/shigencafe-template/img/concept/img_02.jpg" alt=""></figure> <p>高さの異なるリストを一番高いセルに合わせた高さに変更します。</p> </li> <li class="bd1 p10"> <figure class="mb10"><img src="https://shigen-cafe.com/wp-content/themes/shigencafe-template/img/concept/img_03.jpg" alt=""></figure> <p>カラム落ちを防ぐために基本的に横並びのリストには適応してください。<br> ※フレックスボックス(display:flex)はIE11のシェアが低下するまで使用を控えてください。</p> </li> </ul>
-
テキストや内部コンテンツの量に応じて→
-
高さの異なるリストを一番高いセルに合わせた高さに変更します。
-
カラム落ちを防ぐために基本的に横並びのリストには適応してください。
※フレックスボックス(display:flex)はIE11のシェアが低下するまで使用を控えてください。
流れ（flow）
数字付タイトルです。施工工程や作業の流れなどの説明に用います。
step01タイトル（flow_ttl）
数字付タイトルです。
stepの文字や数字を変えられます。（4文字まで）
step02タイトル（flow_ttl）
数字付タイトルです。
stepの文字や数字を変えられます。（4文字まで）
step03タイトル（flow_ttl）
数字付タイトルです。
stepの文字や数字を変えられます。（4文字まで）
