Myコミュファ
Webメール
よくあるご質問
開発用Element List
見出し
飾り見出し
飾り見出し
備考無し
飾り見出し(数字付き)
STEP1
備考無し
飾り見出し(枠無し)
Point.1
備考無し
h2見出し(補足付き)
h2見出しサブテキスト
h2見出しテキスト
備考無し
h2見出し
h2見出しテキスト
備考無し
段落
段落 (揃え位置)
左揃え
段落 (左揃え)になるテキストです。段落 (左揃え)になるテキストです。
段落
(左揃え)になるテキストです。
備考無し
中央揃え
段落 (中央揃え)になるテキストです。段落 (中央揃え)になるテキストです。
段落
(中央揃え)になるテキストです。
備考無し
右揃え
段落 (右揃え)になるテキストです。段落 (右揃え)になるテキストです。
段落
(右揃え)になるテキストです。
備考無し
テキスト
テキスト (太さ)
太字
太字のテキスト
備考無し
テキスト (色)
テキスト (デフォルト)
テキスト
備考：#000000
テキスト (オレンジ)
テキスト
備考：#F76B1F
テキスト (濃いオレンジ)
テキスト
備考：#C45800
テキスト (黄色)
テキスト
備考：#FFFF01
テキスト (白)
テキスト
備考：#ffffff
テキスト (注意喚起⾊)
テキスト
備考：#DC3545
テキスト (サイズ)
テキスト (非常に大きい)
フォントサイズは26pxです。
備考無し
テキスト (とても大きい)
フォントサイズは24pxです。
備考無し
テキスト (大きい)
フォントサイズは20pxです。
備考無し
テキスト (少し大きい)
フォントサイズは18pxです。
備考無し
テキスト (標準)
フォントサイズは16pxです。
備考無し
テキスト (小さい)
フォントサイズは14pxです。
備考無し
テキスト (とても小さい)
フォントサイズは12pxです。
備考無し
強調テキスト (とても大きい)
PCは50px、SPは26px。
備考無し
強調テキスト (大きい)
PCは45px、SPは24px。
備考無し
強調テキスト (少し大きい)
PCは40px、SPは20px。
備考無し
強調テキスト (標準)
PCは30px、SPは18px。
備考無し
強調テキスト (少し小さい)
PCは28px、SPは18px。
備考無し
強調テキスト (小さい)
PCは22px、SPは16px。
備考無し
テキスト (種類)
見出しテキスト
PCは16px、SPは13px。
備考無し
本文テキスト
PCは16px、SPは14px。
備考無し
電話テキスト
Tel.0120-218-919
備考：
「no_link」が付くと電話が無効になる。safariで電話番号が自動でリンクになる仕様を防ぐクラス。
Noto Sans JP
Noto Sans JPのテキスト
備考無し
Ubuntu
Google専用のテキスト
備考無し
テキスト (装飾)
マーカー
マーカー付きテキスト
備考無し
ドット
h4と同じフォントサイズの
装飾付きテキストです
備考無し
枠
タイトルテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
画像
pc：高さ250px固定
備考：
pc：高さ250pxで表示されます。
pc：横幅350px固定
備考：
縦に長い画像を入れ込むときに使用します。pc：横幅350pxで表示されます。
imageクラスが付いているdivタグに「w350」を指定します。
pc：横幅700px固定
備考：
横に長い画像を入れ込むときに使用します。pc：横幅700pxで表示されます。
imageクラスが付いているdivタグに「w700」を指定します。
画像のhover設定、角丸指定、カラム設定
-
ダミーテキスト
-
ダミーテキスト
備考：
①画像のhover指定
親に「bnr_imgae」クラスがあるのと、imgをaタグで囲むことで、hoverアニメーションがつきます。
②角丸指定
imageクラスが付いているdivタグに「round_10」を指定します。
③カラム設定
pc：標準では高さ250pxを基準に横並びになり、幅が狭くなるとカラム落ちします。
sp：標準では1カラムで表示されます。ulタグに「sp2column」をつけることで2カラム表示になります。
リンク
リンクの種類
備考
下層用コンテナー（ctc_bottom_page_container・container.ctc_side_container）の中にあるテキストは、下線ありの青い文字で表示されます。
備考
どのページでもaタグにクラスを付ければ、オレンジの矢印アイコンがつきます。
注意：文字サイズを変更してもアイコンのサイズは変わりません。
備考
どのページでもaタグにクラスを付ければ、オレンジのウインドウアイコンがつきます。
注意：文字サイズを変更してもアイコンのサイズは変わりません
目次アンカーリンク
ローカルナビゲーション
黒いボタン(2個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
黒いボタン(3個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
黒いボタン(4個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
黒いボタン(5個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
黒いボタン(6個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
白いボタン(2個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
白いボタン(3個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
白いボタン(4個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
白いボタン(5個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
白いボタン(6個)
備考
Plain HTMLを使用する。
aタグのURLが一致した場合クラス「active」がaタグの一つ上の階層に自動付与されるように、common.js内に記述しています。
リスト
リスト（番号）
開始番号を変更する場合
- 順不同リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
- 順不同リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
start="数字"を任意の数字に変更可能
style="counter-reset: i 数字;"はjsで自動的に置き換わるので変更不要
リスト (タイプ)
順不同リスト
- 順不同リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
- 順不同リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
備考無し
順序付きリスト
- 順序付きリストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
- 順序付きリストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
備考無し
順序付きリスト(米印)
- 順序付きリスト(米印)のテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
- 順序付きリスト(米印)のテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
備考無し
順不同リスト(米印)
- 順不同リスト(米印)のテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
- 順不同リスト(米印)のテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。リストのテキストが入ります。
備考無し
hr
hr
備考無し
テーブル
テーブル（オレンジ）：SP表示時スクロールなし
| 光ネット開始月 | 2カ月目～13カ月目 | 14カ月目～ | |
|---|---|---|---|
| 月額料金 | 日割り計算 | 5,170円 | 5,170円 |
| 初期費用/ 工事費 |
契約事務手数料 770円
光ネット工事費 27,500円 |
− | − |
| キャンペーン/ 割引※12 |
●初期費用0円キャンペーン
●光ネット工事費割引 |
●コミュファ光 |
− |
| お支払料金 | 月額料金の日割り請求 | 980円 | 5,170円 |
備考：
Plain HTMLを使用する。
PC表示：横幅いっぱいに広がります。
スマホ表示：画面幅に合わせてテーブルが縮みます。
テーブル（濃いオレンジ）：SP表示時スクロールなし
| 光ネット開始月 | 2カ月目～13カ月目 | 14カ月目～ | |
|---|---|---|---|
| 月額料金 | 日割り計算 | 5,170円 | 5,170円 |
| 初期費用/
工事費 |
契約事務手数料 770円
光ネット工事費 27,500円 |
− | − |
| キャンペーン/
割引 ※12 |
●初期費用0円キャンペーン
●光ネット工事費割引
|
●コミュファ光
|
− |
| お支払料金 | 月額料金の日割り請求 | 980円 | 5,170円 |
備考：
Plain HTMLを使用する。
PC表示：横幅いっぱいに広がります。
スマホ表示：画面幅に合わせてテーブルが縮みます。
テーブル（グレー）：SP表示時スクロールなし
| 光ネット開始月 | 2カ月目～13カ月目 | 14カ月目～ | |
|---|---|---|---|
| 月額料金 | 日割り計算 | 5,170円 | 5,170円 |
| 初期費用/
工事費 |
契約事務手数料 770円
光ネット工事費 27,500円 |
− | − |
| キャンペーン/
割引 ※12 |
●初期費用0円キャンペーン
●光ネット工事費割引
|
●コミュファ光
|
− |
| お支払料金 | 月額料金の日割り請求 | 980円 | 5,170円 |
備考：
Plain HTMLを使用する。
PC表示：横幅いっぱいに広がります。
スマホ表示：画面幅に合わせてテーブルが縮みます。
テーブル：SP表示時スクロールあり
| 光ネット開始月 | 2カ月目～13カ月目 | 14カ月目～ | |
|---|---|---|---|
| 月額料金 | 日割り計算 | 5,170円 | 5,170円 |
| 初期費用/ 工事費 |
契約事務手数料 770円
光ネット工事費 27,500円 |
− | − |
| キャンペーン/ 割引※12 |
●初期費用0円キャンペーン
●光ネット工事費割引 |
●コミュファ光 |
− |
| お支払料金 | 月額料金の日割り請求 | 980円 | 5,170円 |
備考：
Plain HTMLを使用する。
PC表示：横幅いっぱいに広がります。
スクロールをつけたい場合「class="js-scrollable"」でtableを囲ってください。
スマホ表示：以下のクラス名を入れることでスクロールが発生します。
table_width_sm：スマホの時テーブル幅560px
table_width_md：スマホの時テーブル幅720px
table_width_lg：スマホの時テーブル幅860px
<div class="js-scrollable">
<table class="table_bordered table_responsive table_width_md">
<thead class="thead_primary">
<tr>
<th></th>
<th> class="text_align_center">光ネット開始月</th>
<th> class="text_align_center">2カ月目～13カ月目</th>
<th> class="text_align_center">14カ月目～</th>
</tr>
</thead>
<tbody>
<tr>
<th> class="table_primary">月額料金</th>
<td>日割り計算</td>
<td>5,170円</td>
<td>5,170円</td>
</tr>
<tr>
<th class="table_primary">初期費用/<br>工事費</th>
<td>契約事務手数料 770円
<br>光ネット工事費 27,500円</td>
<td>−</td>
<td>−</td>
</tr>
<tr>
<th class="table_primary">キャンペーン/<br>割引<sup>※12</sup></th>
<td>
<div class="em1_text_indent-1 mb_10">
<p>
●初期費用0円キャンペーン<br><b> class="text_color_primary">契約事務手数料
-770円</b>
</p>
</div>
<div class="em1_text_indent-1 mb_10">
<p>
●光ネット工事費割引<br><b> class="text_color_primary">-27,500円</b>
</p>
</div>
</td>
<td>
<div class="em1_text_indent-1">
<p>
●コミュファ光<br>1年間980円キャンペーン<br><b>
class="text_color_primary">月額料金 -4,190円</b>
</p>
</div>
</td>
<td>−</td>
</tr>
<tr>
<th> class="table_primary">お支払料金</th>
<td>月額料金の日割り請求</td>
<td><b> class="text_color_primary">980円</b></td>
<td>5,170円</td>
</tr>
</tbody>
</table>
</div>
テーブル：左列固定
| SP用：110px固定のタイトル | タイトル | タイトル | タイトル |
|---|---|---|---|
| SP用：110px固定のタイトル1 | 2 | 4 | 4 |
| SP用：110px固定のタイトル2 | 2 | 4 | 4 |
| SP用：110px固定のタイトル3 | 〇 | 〇 | 〇 |
| SP用：110px固定のタイトル4 | 〇 | 〇 | 〇 |
| SP用：110px固定のタイトル5 | 〇 | 〇 | 〇 |
| SP用：110px固定のタイトル6 | × | 〇 | 〇 |
備考：
Plain HTMLを使用する。
・セルの結合する場合、SP表示の際に表示崩れの原因となるため、「table_sticky」は外してください。
・「table_sticky」を外すと、「テーブル：SP表示時スクロールなし」と同じく、テーブルの横幅は画面サイズに依存します。
・画面幅640px以下になった時、左固定が適用されます。
<div class="js-scrollable">
<table class="table_bordered table_responsive table_sticky table_width_md">
<thead>
<tr>
<th class="table_width_2 table_black text_align_center table_middle">110px固定のタイトル</th>
<th class="text_align_center table_middle table_width_2 table_gray">タイトル</th>
<th class="text_align_center table_middle table_width_2 table_gray">タイトル</th>
<th class="text_align_center table_middle table_width_2 table_gray">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th>110px固定のテキスト1</th>
<td class="text_align_center table_middle">2</td>
<td class="text_align_center table_middle">4</td>
<td class="text_align_center table_middle">4</td>
</tr>
<tr>
<th>110px固定のテキスト2</th>
<td class="text_align_center table_middle">2</td>
<td class="text_align_center table_middle">4</td>
<td class="text_align_center table_middle">4</td>
</tr>
<tr>
<th>110px固定のテキスト3</th>
<td class="text_align_center table_middle">〇</td>
<td class="text_align_center table_middle">〇</td>
<td class="text_align_center table_middle">〇</td>
</tr>
<tr>
<th>110px固定のテキスト4</th>
<td class="text_align_center table_middle">〇</td>
<td class="text_align_center table_middle">〇</td>
<td class="text_align_center table_middle">〇</td>
</tr>
<tr>
<th>110px固定のテキスト5</th>
<td class="text_align_center table_middle">〇</td>
<td class="text_align_center table_middle">〇</td>
<td class="text_align_center table_middle">〇</td>
</tr>
<tr>
<th>110px固定のテキスト6</th>
<td class="text_align_center table_middle">×</td>
<td class="text_align_center table_middle">〇</td>
<td class="text_align_center table_middle">〇</td>
</tr>
</tbody>
</table>
</div>
テーブル：プルダウン
| select1の票が入ります | ||||||
| 見出し1 | 見出し2 | 見出し3 | ||||
| 見出し | テキスト | テキスト | テキスト | テキスト | テキスト | テキスト |
| 見出し | ||||||
| 見出し | ||||||
| 見出し | ||||||
| 見出し | ||||||
見出し1
| 見出し | 見出し | 見出し |
|---|---|---|
| 見出し | ||
| 見出し | ||
| 見出し | ||
| 見出し |
見出し2
| 見出し | 見出し | 見出し |
|---|---|---|
| 見出し | ||
| 見出し | ||
| 見出し | ||
| 見出し |
見出し3
| 見出し | 見出し | 見出し |
|---|---|---|
| 見出し | ||
| 見出し | ||
| 見出し | ||
| 見出し |
備考：
コンテンツの最大は5つまでです。
Plain HTMLを使用する。
・セルの結合する場合、SP表示の際に表示崩れの原因となるため、「table_sticky」は外してください。
・「table_sticky」を外すと、「テーブル：SP表示時スクロールなし」と同じく、テーブルの横幅は画面サイズに依存します。
注意：
PC用テーブル、SP用テーブルとわかれています。PC用、SP用の入れ込みが必要です。
<div class="selectBox mb_sm_15">
<select class="form-control selectBox mb_20" id="selectBox1">
<option value="select1">select1</option>
<option value="select2">select2</option>
<option value="select3">select3</option>
</select>
</div>
<div class="select-content">
<!-- 1：ここからselect1のコンテンツ -->
<div class="select-content">
<!-- 1：ここからselect1のコンテンツ -->
<div class="box select1">
<!-- 1：ここからselect1のテーブル（PC用） -->
<table class="table_bordered table_responsive lp_page pc_only">
<tbody>
<tr>
<td class="" rowspan="2"></td>
<td class="text_align_center table_middle table_primary" colspan="6">select1の票が入ります</td>
</tr>
<tr>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し1</td>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し2</td>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し3</sup>
</td>
</tr>
<tr>
<td>見出し</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!-- 1：ここまでselect1のテーブル（PC用） -->
<!-- 1：ここからselect1のテーブル（SP用） -->
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し1</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し2</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し3</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 1：ここまでselect1のテーブル（SP用） -->
</div>
<!-- 1：ここまでselect1のコンテンツ -->
</div>
<!-- 1：ここまでselect1のコンテンツ -->
<!-- 2：ここからselect2のコンテンツ -->
<div class="select-content">
<!-- 2：ここからselect2のコンテンツ -->
<div class="box select2" style="display: none;">
<!-- 2：ここからselect2のテーブル（PC用） -->
<table class="table_bordered table_responsive lp_page pc_only">
<tbody>
<tr>
<td class="" rowspan="2"></td>
<td class="text_align_center table_middle table_primary" colspan="6">select2の票が入ります</td>
</tr>
<tr>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し1</td>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し2</td>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し3</sup>
</td>
</tr>
<tr>
<td>見出し</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!-- 2：ここまでselect2のテーブル（PC用） -->
<!-- 2：ここからselect2のテーブル（SP用） -->
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し1</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し2</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し3</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 2：ここまでselect2のテーブル（SP用） -->
</div>
<!-- 2：ここまでselect2のコンテンツ -->
</div>
<!-- 2：ここまでselect2のコンテンツ -->
<!-- 3：ここからselect3のコンテンツ -->
<div class="select-content">
<!-- 3：ここからselect3のコンテンツ -->
<div class="box select3" style="display: none;">
<!-- 3：ここからselect3のテーブル（PC用） -->
<table class="table_bordered table_responsive lp_page pc_only">
<tbody>
<tr>
<td class="" rowspan="2"></td>
<td class="text_align_center table_middle table_primary" colspan="6">select3の票が入ります</td>
</tr>
<tr>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し1</td>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し2</td>
<td class="text_align_center table_middle table_primary_deep" colspan="2">見出し3</sup>
</td>
</tr>
<tr>
<td>見出し</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
<td class="text_align_center table_middle">テキスト</td>
<td class="text_align_center table_middle">テキスト
</td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>見出し</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!-- 3：ここまでselect3のテーブル（PC用） -->
<!-- 3：ここからselect3のテーブル（SP用） -->
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し1</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し2</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table_sticky_topLeft sp_only">
<div class="table_sticky_title table_orange_deep">
<p>見出し3</p>
</div>
<div class="js-scrollable lp_page">
<table class="table_bordered table_responsive table_sticky table_width_sm">
<tbody>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
<td class="text_align_center table_middle table_orange_pale">
見出し</td>
</tr>
<tr>
<th class="table_orange_pale">見出し
</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
<tr>
<th class="table_orange_pale">
見出し</th>
<td class="text_align_center table_middle"></td>
<td class="text_align_center table_middle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 3：ここまでselect3のテーブル（SP用） -->
</div>
<!-- 3：ここまでselect3のコンテンツ -->
</div>
<!-- 3：ここまでselect3のコンテンツ -->
</div>
テーブル用class：ヘッダーカラー
| 見出し | 見出し | 見出し |
|---|---|---|
| 見出し | 見出し | 見出し |
| 見出し | 見出し | 見出し |
| 見出し | 見出し | 見出し |
| 見出し | 見出し | 見出し |
備考：
テーブルの見出しの色を設定できます。
見出しの色を変えたいとき、theadタグに以下のclass名を設定してください。
thead_primary：オレンジ色の見出し
thead_primary_deep：濃いオレンジ
thead_gray：灰色の見出し
thead_border_black：見出しのボーダーを黒にしたい場合
テーブル用class：セルカラー
| テキスト | テキスト | テキスト | テキスト | テキスト | テキスト |
備考：
テーブルのセルの色をth,tdに設定できます。
table_primary：オレンジ色のセル
table_primary_deep：濃いオレンジのセル
table_black：黒のセル
table_gray：灰色のセル
class名なし：白色のセル
table_border_black：セルのボーダーを黒にしたい場合
テーブル用class：揃え位置
| 横方向 揃え位置 |
左 | 中央 | 右 |
|---|---|---|---|
| 縦方向 揃え位置 |
上 | 中央 | 下 |
備考：
セル内のテキストの揃える位置を設定できます。
何も指定しない場合は左寄せになります。
横方向 揃え位置
text_align_left：左
text_align_center：中央
text_align_right：右
縦方向 揃え位置
table_top：上
table_middle：中央
table_bottom：下
テーブル用class：セルの幅
| 見出し | table_width_2 |
|---|
| 見出し | table_width_4 |
|---|
| 見出し | table_width_6 |
|---|
| 見出し | table_width_8 |
|---|
| 見出し | table_width_10 |
|---|
| 見出し | table_width_12 |
|---|
| 見出し | table_width_16 |
|---|
| 見出し | table_width_18 |
|---|
| 見出し | table_width_20 |
|---|
| 見出し | table_width_22 |
|---|
| 見出し | table_width_24 |
|---|
| word-break | 123456789数字を折り返します。 |
|---|
| word-breakなし | 123456789数字を折り返します。 |
|---|
備考：
表の幅を変更できます。
table_width_2：2文字分の幅
table_width_4：4文字分の幅
table_width_6：6文字分の幅
table_width_8：8文字分の幅
table_width_10：10文字分の幅
table_width_12：12文字分の幅
table_width_14：14文字分の幅
table_width_16：16文字分の幅
table_width_18：18文字分の幅
table_width_20：20文字分の幅
table_width_22：22文字分の幅
table_width_24：24文字分の幅
word-break：英数字を折り返すことができる。
※英数字（半角）と全角では折り返す文字数が異なります。
表 (ヘッダーカラー)
オレンジ
| 光ネット開始月 | 2カ月目～13カ月目 | 14カ月目～ | |
|---|---|---|---|
| 月額料金 | 日割り計算 | 5,170円 | 5,170円 |
| 初期費用/ 工事費 |
契約事務手数料 770円
光ネット工事費 27,500円 |
− | − |
| キャンペーン/ 割引※12 |
●初期費用0円キャンペーン
●光ネット工事費割引 |
●コミュファ光 |
− |
| お支払料金 | 月額料金の日割り請求 | 980円 | 5,170円 |
備考
PC表示：横幅いっぱいに広がります。
スマホ表示：はみ出た箇所がスクロールで表示されます。
濃いオレンジ
| 光ネット開始月 | 2カ月目～13カ月目 | 14カ月目～ | |
|---|---|---|---|
| 月額料金 | 日割り計算 | 5,170円 | 5,170円 |
| 初期費用/ 工事費 |
契約事務手数料 770円
光ネット工事費 27,500円 |
− | − |
| キャンペーン/ 割引※12 |
●初期費用0円キャンペーン
●光ネット工事費割引 |
●コミュファ光 |
− |
| お支払料金 | 月額料金の日割り請求 | 980円 | 5,170円 |
備考
PC表示：横幅いっぱいに広がります。
スマホ表示：はみ出た箇所がスクロールで表示されます。
グレー
| 光ネット開始月 | 2カ月目～13カ月目 | 14カ月目～ | |
|---|---|---|---|
| 月額料金 | 日割り計算 | 5,170円 | 5,170円 |
| 初期費用/ 工事費 |
契約事務手数料 770円
光ネット工事費 27,500円 |
− | − |
| キャンペーン/ 割引※12 |
●初期費用0円キャンペーン
●光ネット工事費割引 |
●コミュファ光 |
− |
| お支払料金 | 月額料金の日割り請求 | 980円 | 5,170円 |
備考
PC表示：横幅いっぱいに広がります。
スマホ表示：はみ出た箇所がスクロールで表示されます。
モーダル
モーダル
デフォルト
トリガー側の属性にdata-toggle="modal" data-target="#exampleModal"を追加。
data-target="#exampleModal"の直は、ターゲットのmodalのidと合わせる。
ポップアップ動画
-
ダミーテキスト
トリガー側の属性に（aタグ）data-toggle="modal" data-target="#exampleModal"を追加。
data-target="#exampleModal"の直は、ターゲットのmodalのidと合わせる。
modalにclassyoutube-modalを追加する（モーダル閉じたら再生を停止）
ポップアップ動画 - カルーセル
<div class="card_default_carousel">
<ul class="js_slick_default js_slick_default_3">
<!---------------------------- １：ここから１枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="https://placehold.jp/420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のタイトル -->
<p class="card_title field-text">
ポップアップ動画01
</p>
<!-- ここまで１枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから１枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで１枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで１枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで１枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<!-- [1：モーダルtrigger] data-toggle="modal"と data-target="modal IDと合わせる" -->
<a href="" data-toggle="modal" data-target="#videoModal01">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- １：ここまで１枚目のカード ---------------------------->
<!---------------------------- ２：ここから２枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="https://placehold.jp/420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のタイトル -->
<p class="card_title field-text">
ポップアップ動画02
</p>
<!-- ここまで２枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから２枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで２枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで２枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで２枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<!-- [２：モーダルtrigger] data-toggle="modal"と data-target="modal IDと合わせる" -->
<a href="" data-toggle="modal" data-target="#videoModal02">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ２：ここまで２枚目のカード ---------------------------->
<!---------------------------- ３：ここから３枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="https://placehold.jp/420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のタイトル -->
<p class="card_title field-text">
ポップアップ動画03
</p>
<!-- ここまで３枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから３枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで３枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで３枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで３枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<!-- [３：モーダルtrigger] data-toggle="modal"と data-target="modal IDと合わせる" -->
<a href="" data-toggle="modal" data-target="#videoModal03">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ３：ここまで３枚目のカード ---------------------------->
<!---------------------------- ４：ここから４枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="https://placehold.jp/420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のタイトル -->
<p class="card_title field-text">
ポップアップ動画04
</p>
<!-- ここまで４枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから４枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで４枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで４枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで４枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<!-- [４：モーダルtrigger] data-toggle="modal"と data-target="modal IDと合わせる" -->
<a href="" data-toggle="modal" data-target="#videoModal04">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ４：ここまで４枚目のカード ---------------------------->
</ul>
<!-- [モーダルtarget] -->
<!-- [１：モーダルtarget] id="data-targetの直と合わせる" -->
<div class="modal fade youtube-modal" id="videoModal01" tabindex="-1" role="dialog" aria-labelledby="videoModal01Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WJ6vRYWvEx0?si=Ku-EMytOuefSHmua" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- [２：モーダルtarget] id="data-targetの直と合わせる" -->
<div class="modal fade youtube-modal" id="videoModal02" tabindex="-1" role="dialog" aria-labelledby="videoModal01Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/X30kTIWFuGQ?si=IKey7rj0n-2-pdpW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- [３：モーダルtarget] id="data-targetの直と合わせる" -->
<div class="modal fade youtube-modal" id="videoModal03" tabindex="-1" role="dialog" aria-labelledby="videoModal01Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gdCtRpQhDDA?si=vK6bpSFHNtu1cSuT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- [４：モーダルtarget] id="data-targetの直と合わせる" -->
<div class="modal fade youtube-modal" id="videoModal04" tabindex="-1" role="dialog" aria-labelledby="videoModal01Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VBg2BEC9LKM?si=IsigDyyGo05YWXZe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
トリガー側の属性に（aタグ）data-toggle="modal" data-target="#exampleModal"を追加。
data-target="#exampleModal"の直は、ターゲットのmodalのidと合わせる。
modalにclassyoutube-modalを追加する（モーダル閉じたら再生を停止）
カルーセル
カルーセル(色)
水色
-
作品タイトルテキスト作品タイトルテキスト作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
備考：
Plain HTMLを使用する。
カードの枚数は最大7つまで。
<div class="card_default_carousel">
<ul class="js_slick_default js_slick_default_3 card_slider">
<!---------------------------- １：ここから１枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで１枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから１枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで１枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで１枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで１枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- １：ここまで１枚目のカード ---------------------------->
<!---------------------------- ２：ここから２枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで２枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから２枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで２枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで２枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで２枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ２：ここまで２枚目のカード ---------------------------->
<!---------------------------- ３：ここから３枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで３枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから３枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで３枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで３枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで３枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ３：ここまで３枚目のカード ---------------------------->
<!---------------------------- ４：ここから４枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで４枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから４枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで４枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで４枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで４枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ４：ここまで４枚目のカード ---------------------------->
<!---------------------------- ５：ここから５枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで５枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから５枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで５枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで５枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで５枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ５：ここまで５枚目のカード ---------------------------->
<!---------------------------- ６：ここから６枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで６枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから６枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで６枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで６枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで６枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ６：ここまで６枚目のカード ---------------------------->
<!---------------------------- ７：ここから７枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで７枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから７枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで７枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで７枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで７枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ７：ここまで７枚目のカード ---------------------------->
</ul>
</div>
オレンジ
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキス作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
備考：
Plain HTMLを使用する。
カードの枚数は最大7つまで。
<div class="card_default_carousel">
<ul class="js_slick_default js_slick_default_3 card_slider">
<!---------------------------- １：ここから１枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで１枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから１枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで１枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで１枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで１枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- １：ここまで１枚目のカード ---------------------------->
<!---------------------------- ２：ここから２枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで２枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから２枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで２枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで２枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで２枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ２：ここまで２枚目のカード ---------------------------->
<!---------------------------- ３：ここから３枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで３枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから３枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで３枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで３枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで３枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ３：ここまで３枚目のカード ---------------------------->
<!---------------------------- ４：ここから４枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで４枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから４枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで４枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで４枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで４枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ４：ここまで４枚目のカード ---------------------------->
<!---------------------------- ５：ここから５枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで５枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから５枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで５枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで５枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで５枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ５：ここまで５枚目のカード ---------------------------->
<!---------------------------- ６：ここから６枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで６枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから６枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで６枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで６枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで６枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ６：ここまで６枚目のカード ---------------------------->
<!---------------------------- ７：ここから７枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange ctc_card_link">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで７枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから７枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで７枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで７枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで７枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
<div class="component link card_link_wide col-12">
<div class="component-content">
<div class="field-link">
<a href=" ">LINK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ７：ここまで７枚目のカード ---------------------------->
</ul>
</div>
カルーセル(リンク無し)
水色
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
備考：
Plain HTMLを使用する。
カードの枚数は最大7つまで。
<div class="card_default_carousel">
<ul class="js_slick_default js_slick_default_3 card_slider">
<!---------------------------- １：ここから１枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで１枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから１枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで１枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで１枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで１枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- １：ここまで１枚目のカード ---------------------------->
<!---------------------------- ２：ここから２枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで２枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから２枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで２枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで２枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで２枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ２：ここまで２枚目のカード ---------------------------->
<!---------------------------- ３：ここから３枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで３枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから３枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで３枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで３枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで３枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ３：ここまで３枚目のカード ---------------------------->
<!---------------------------- ４：ここから４枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで４枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから４枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで４枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで４枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで４枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ４：ここまで４枚目のカード ---------------------------->
<!---------------------------- ５：ここから５枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで５枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから５枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで５枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで５枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで５枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ５：ここまで５枚目のカード ---------------------------->
<!---------------------------- ６：ここから６枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで６枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから６枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで６枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで６枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで６枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ６：ここまで６枚目のカード ---------------------------->
<!---------------------------- ７：ここから７枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_light_blue">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで７枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから７枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで７枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで７枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで７枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ７：ここまで７枚目のカード ---------------------------->
</ul>
</div>
オレンジ
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
-
作品タイトルテキスト
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
配信条件：Netflix
COPYRIGHT©text
備考：
Plain HTMLを使用する。
カードの枚数は最大7つまで。
<div class="card_default_carousel">
<ul class="js_slick_default js_slick_default_3 card_slider">
<!---------------------------- １：ここから１枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで１枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから１枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで１枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで１枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから１枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで１枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- １：ここまで１枚目のカード ---------------------------->
<!---------------------------- ２：ここから２枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで２枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから２枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで２枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで２枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから２枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで２枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ２：ここまで２枚目のカード ---------------------------->
<!---------------------------- ３：ここから３枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで３枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから３枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで３枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで３枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから３枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで３枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ３：ここまで３枚目のカード ---------------------------->
<!---------------------------- ４：ここから４枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで４枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから４枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで４枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで４枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから４枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで４枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ４：ここまで４枚目のカード ---------------------------->
<!---------------------------- ５：ここから５枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで５枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから５枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで５枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで５枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから５枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで５枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ５：ここまで５枚目のカード ---------------------------->
<!---------------------------- ６：ここから６枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで６枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから６枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで６枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで６枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから６枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで６枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ６：ここまで６枚目のカード ---------------------------->
<!---------------------------- ７：ここから７枚目のカード ---------------------------->
<li class="card_slider_item">
<div class="component container col-12 ctc_card_plane bd_orange">
<div class="component-content">
<div class="row">
<div class="component image file-type-icon-media-link col-12 card_image">
<div class="component-content">
<img src="/-/media/Project/commufa/commufa/images/2022/common/dev/img_dev_420x236.png" alt="" width="420" height="236">
</div>
</div>
<div class="component container col-12 card_body">
<div class="component-content">
<div class="row">
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のタイトル -->
<p class="card_title field-text">
作品タイトルテキスト
</p>
<!-- ここまで７枚目のタイトル -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<div class="card_outline">
<!-- ここから７枚目の説明文 -->
<p class="field-text">
作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト作品紹介テキスト
</p>
<!-- ここまで７枚目の説明文 -->
</div>
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目の配信条件 -->
<p class="card_label field-text">
配信条件：Netflix
</p>
<!-- ここまで７枚目の配信条件 -->
</div>
</div>
<div class="component rich-text col-12">
<div class="component-content">
<!-- ここから７枚目のコピーライト -->
<p class="card_copyright field-text">
COPYRIGHT©text
</p>
<!-- ここまで７枚目のコピーライト -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!---------------------------- ７：ここまで７枚目のカード ---------------------------->
</ul>
</div>
矢印
矢印
備考無し
矢印/三角（オレンジ）
備考無し
矢印/三角（白）
備考無し
余白
全画面サイズに指定
外側に余白(margin)を付ける
上下左右
上下左右
上下左右の外側の余白が0になる
上下左右の外側の余白が10になる
上下左右の外側の余白が15になる
上下左右の外側の余白が20になる
上下左右の外側の余白が30になる
上下左右の外側の余白が40になる
上下左右の外側の余白が50になる
備考
全画面サイズに指定するクラスを使ってスマホの余白を指定します。
例）PCの余白は0px、スマホだけに15px余白を付けるときは「m_15」「m_sm_0」の2つを併用します。
smサイズ：画面サイズ641px~
m：マージン（外側）
p：パディング（内側）
mの値をpに置き換えると内側に余白が付くようになります。
外側に余白(margin)を付ける
上下
上下
上下の外側の余白が0になる
上下の外側の余白が10になる
上下の外側の余白が15になる
上下の外側の余白が20になる
上下の外側の余白が30になる
上下の外側の余白が40になる
上下の外側の余白が50になる
備考
y：縦軸
外側に余白(margin)を付ける
左右
左右
左右の外側の余白が0になる
左右の外側の余白が10になる
左右の外側の余白が15になる
左右の外側の余白が20になる
左右の外側の余白が30になる
左右の外側の余白が40になる
左右の外側の余白が50になる
備考
x：横軸
外側に余白(margin)を付ける
上
上
上の外側の余白が0になる
上の外側の余白が10になる
上の外側の余白が15になる
上の外側の余白が20になる
上の外側の余白が30になる
上の外側の余白が40になる
上の外側の余白が50になる
備考
t：top
外側に余白(margin)を付ける
下
下
下の外側の余白が0になる
下の外側の余白が10になる
下の外側の余白が15になる
下の外側の余白が20になる
下の外側の余白が30になる
下の外側の余白が40になる
下の外側の余白が50になる
備考
b：bottom
外側に余白(margin)を付ける
左
左
左の外側の余白が0になる
左の外側の余白が10になる
左の外側の余白が15になる
左の外側の余白が20になる
左の外側の余白が30になる
左の外側の余白が40になる
左の外側の余白が50になる
備考
l：left
外側に余白(margin)を付ける
右
右
右の外側の余白が0になる
右の外側の余白が10になる
右の外側の余白が15になる
右の外側の余白が20になる
右の外側の余白が30になる
右の外側の余白が40になる
右の外側の余白が50になる
備考
r：right
smサイズ（画面サイズ641px以上に指定）
外側に余白(margin)を付ける
上下左右
上下左右
上下左右の外側の余白が0になる
上下左右の外側の余白が10になる
上下左右の外側の余白が15になる
上下左右の外側の余白が20になる
上下左右の外側の余白が30になる
上下左右の外側の余白が40になる
上下左右の外側の余白が50になる
備考
全画面サイズに指定するクラスを使ってスマホの余白を指定します。
例）PCの余白は0px、スマホだけに15px余白を付けるときは「m_15」「m_sm_0」の2つを併用します。
smサイズ：画面サイズ641px~
m：マージン（外側）
p：パディング（内側）
mの値をpに置き換えると内側に余白が付くようになります。
外側に余白(margin)を付ける
上下
上下
上下の外側の余白が0になる
上下の外側の余白が10になる
上下の外側の余白が15になる
上下の外側の余白が20になる
上下の外側の余白が30になる
上下の外側の余白が40になる
上下の外側の余白が50になる
備考
y：縦軸
外側に余白(margin)を付ける
左右
左右
左右の外側の余白が0になる
左右の外側の余白が10になる
左右の外側の余白が15になる
左右の外側の余白が20になる
左右の外側の余白が30になる
左右の外側の余白が40になる
左右の外側の余白が50になる
備考
x：横軸
外側に余白(margin)を付ける
上
上
上の外側の余白が0になる
上の外側の余白が10になる
上の外側の余白が15になる
上の外側の余白が20になる
上の外側の余白が30になる
上の外側の余白が40になる
上の外側の余白が50になる
備考
t：top
外側に余白(margin)を付ける
下
下
下の外側の余白が0になる
下の外側の余白が10になる
下の外側の余白が15になる
下の外側の余白が20になる
下の外側の余白が30になる
下の外側の余白が40になる
下の外側の余白が50になる
備考
b：bottom
外側に余白(margin)を付ける
左
左
左の外側の余白が0になる
左の外側の余白が10になる
左の外側の余白が15になる
左の外側の余白が20になる
左の外側の余白が30になる
左の外側の余白が40になる
左の外側の余白が50になる
備考
l：left
外側に余白(margin)を付ける
右
右
右の外側の余白が0になる
右の外側の余白が10になる
右の外側の余白が15になる
右の外側の余白が20になる
右の外側の余白が30になる
右の外側の余白が40になる
右の外側の余白が50になる
備考
r：right
プルダウン
select1のコンテンツが入ります
備考：
コンテンツの最大は5つまでです。
<div class="selectBox mb_sm_15">
<select class="form-control selectBox" id="selectBox2">
<option value="select1">select1</option>
<option value="select2">select2</option>
<option value="select3">select3</option>
<option value="select4">select4</option>
<option value="select5">select5</option>
</select>
</div>
<div class="select-content">
<!---------------------------- １：ここからselect1のコンテンツ ---------------------------->
<div class="box select1">
<!-- select1のコンテンツが入ります -->
</div>
<!---------------------------- １：ここまでselect1のコンテンツ ---------------------------->
<!---------------------------- 2：ここからselect2のコンテンツ ---------------------------->
<div class="box select2" style="display: none;">
<!-- select2のコンテンツが入ります -->
</div>
<!---------------------------- 2：ここまでselect2のコンテンツ ---------------------------->
<!---------------------------- 3：ここからselect3のコンテンツ ---------------------------->
<div class="box select3" style="display: none;">
<!-- select3のコンテンツが入ります -->
</div>
<!---------------------------- 3：ここまでselect3のコンテンツ ---------------------------->
<!---------------------------- 4：ここからselect4のコンテンツ ---------------------------->
<div class="box select4" style="display: none;">
<!-- select4のコンテンツが入ります -->
</div>
<!---------------------------- 4：ここまでselect4のコンテンツ ---------------------------->
<!---------------------------- 5：ここからselect5のコンテンツ ---------------------------->
<div class="box select5" style="display: none;">
<!-- select5のコンテンツが入ります -->
</div>
<!---------------------------- 5：ここまでselect5のコンテンツ ---------------------------->
</div>
シミレーションエリア
お住まいの形態は?
備考：Plain HTMLを使用する。
最大4カラムまで。
list_col_02：2カラム
list_col_03：3カラム
list_col_04：4カラム
<div class="ctc_web_simulation_area ctc_standard_contact typeA">
<div class="ctc_web_simulation_inner">
<div class="ctc_web_simulation_panel">
<!-- 最初の選択肢 -->
<div id="qutstion_step01" class="ctc_web_simulation_nav">
<div class="ctc_web_simulation_header">
<p>お住まいの形態は?</p>
</div>
<div class="ctc_web_simulation_link_area">
<ul class="ctc_web_simulation_link_list list_col_02">
<li>
<a data-target="#qutstion_step02"
class="ctc_web_simulation_link_box ctc_web_simulation_link_transitions">
<div class="ctc_web_simulation_link_image"><img
src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_wifi_01.png"
alt=""></div>
<p class="ctc_web_simulation_link_top_title">
10ギガ・5ギガメニュー
</p>
</a>
</li>
<li>
<a data-target="#qutstion_step03"
class="ctc_web_simulation_link_box ctc_web_simulation_link_transitions">
<div class="ctc_web_simulation_link_image"><img
src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_wifi_02.png"
alt=""></div>
<p class="ctc_web_simulation_link_top_title">
それ以外・わからない
</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 次の選択肢 qutstion_step02 -->
<div id="qutstion_step02"
class="ctc_web_simulation_nav ctc_web_simulation_nav_category"
style="display: none;">
<div class="ctc_web_simulation_header">
<p>
気になるネットの
症状は？</p>
</div>
<div class="ctc_web_simulation_link_area">
<ul class="ctc_web_simulation_link_list list_col_02">
<li>
<a data-target="#diagnostic_result01"
class="ctc_web_simulation_link_box ctc_web_simulation_link_transitions">
<div class="ctc_web_simulation_link_image"><img
src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_04.png"
alt=""></div>
<p class="ctc_web_simulation_link_title">繋がりにくい部屋がある
</p>
</a>
</li>
<li>
<a data-target="#diagnostic_result02"
class="ctc_web_simulation_link_box ctc_web_simulation_link_transitions">
<div class="ctc_web_simulation_link_image"><img
src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_02.png"
alt=""></div>
<p class="ctc_web_simulation_link_title">
ゴールデンタイムにネットが遅いと感じる
、オンラインゲームにラグがある</p>
</a>
</li>
</ul>
<div class="btn_accent btn_c arrow_bottom">
<span
class="btn_link_wide field-link ctc_web_simulation_back_btn">
<a data-target="#qutstion_step01" data-variantitemid=""
data-variantfieldname="Link">前の選択肢へ戻る</a>
</span>
</div>
</div>
</div>
<!-- 次の選択肢 qutstion_step03 -->
<div id="qutstion_step03"
class="ctc_web_simulation_nav ctc_web_simulation_nav_category"
style="display: none;">
<div class="ctc_web_simulation_header">
<p>コミュファのご利用年数と気になるネットの症状は？</p>
</div>
<div class="ctc_web_simulation_link_area">
<ul class="ctc_web_simulation_link_list list_col_03">
<li>
<a data-target="#diagnostic_result03"
class="ctc_web_simulation_link_box ctc_web_simulation_link_transitions">
<div class="ctc_web_simulation_link_image"><img
src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_01.png"
alt=""></div>
<p class="ctc_web_simulation_link_title">ご利用年数8年以上
</p>
</a>
</li>
<li>
<a data-target="#diagnostic_result04"
class="ctc_web_simulation_link_box ctc_web_simulation_link_transitions">
<div class="ctc_web_simulation_link_image"><img
src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_02.png"
alt=""></div>
<p class="ctc_web_simulation_link_title">
ご利用年数8年未満・ネットが遅いと感じる</p>
</a>
</li>
<li>
<a data-target="#diagnostic_result05"
class="ctc_web_simulation_link_box ctc_web_simulation_link_transitions">
<div class="ctc_web_simulation_link_image"><img
src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_04.png"
alt=""></div>
<p class="ctc_web_simulation_link_title">
ご利用年数8年未満・繋がりにくい部屋がある</p>
</a>
</li>
</ul>
<div class="btn_accent btn_c arrow_bottom">
<span
class="btn_link_wide field-link ctc_web_simulation_back_btn">
<a data-target="#qutstion_step01" data-variantitemid=""
data-variantfieldname="Link">前の選択肢へ戻る</a>
</span>
</div>
</div>
</div>
<!-- 診断結果 #diagnostic_result01-->
<div id="diagnostic_result01"
class="ctc_web_simulation_nav ctc_web_simulation_nav_category ctc_web_simulation_nav_result"
style="display: none;">
<div class="ctc_web_simulation_header">
<p>診断結果</p>
</div>
<div class="ctc_web_simulation_link_area">
<p class="ctc_web_simulation_text"><span
class="ctc_marker">おすすめ改善案②：メッシュWi-Fi導入</span></p>
<div class="ctc_web_simulation_link_image text_align_center">
<img src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_wifi_03.png"
alt=""></div>
<p class="mb_10">建物の構造や壁の材質の影響で、Wi-Fiの電波が届いていない可能性があります。</p>
<p>メッシュWi-Fi機器を設置することでWi-Fiの届く範囲を広げます。寝室や書斎、お風呂、トイレなど、今までWi-Fiが届きにくかった場所でも快適にネットがご利用いただけるようになります。ご利用のメッシュWi-Fi機器でご自宅内をカバーできない場合は台数の追加も可能です。
</p>
<div class="btn_accent btn_orange bg_left arrow_right mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_internal_link">
<a data-target="#recommended_improvements02"
data-variantitemid=""
data-variantfieldname="Link">サービス内容を確認する</a>
</span>
</div>
<div class="btn_accent btn_c arrow_bottom mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_back_btn">
<a data-target="#qutstion_step02" data-variantitemid=""
data-variantfieldname="Link">前の選択肢へ戻る</a>
</span>
</div>
</div>
</div>
<!-- 診断結果 #diagnostic_result02-->
<div id="diagnostic_result02"
class="ctc_web_simulation_nav ctc_web_simulation_nav_category ctc_web_simulation_nav_result"
style="display: none;">
<div class="ctc_web_simulation_header">
<p>診断結果</p>
</div>
<div class="ctc_web_simulation_link_area">
<p class="ctc_web_simulation_text"><span
class="ctc_marker">おすすめ改善案③：ゲーミングカスタム導入</span></p>
<div class="ctc_web_simulation_link_image text_align_center">
<img src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_wifi_03.png"
alt=""></div>
<p class="mb_10">
オンラインゲームの通信容量の問題や混線により時間帯によって回線が重くなっている可能性があります。</p>
<p class="mb_10">
コミュファでは瞬間的に回線が混雑した場合でも、優先的に通信を通して速度と安定を維持するオプションを用意しています。これが、国内初のQoS技術を用いたファストコネクトオプション「ゲーミングカスタム」です。
</p>
<p class="mb_10">混み合う時間帯でも些細なラグさえあってほしくない、という方々に支持されています。</p>
<div class="btn_accent btn_orange bg_left arrow_right mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_internal_link">
<a data-target="#recommended_improvements03"
data-variantitemid=""
data-variantfieldname="Link">サービス内容を確認する</a>
</span>
</div>
<div class="btn_accent btn_c arrow_bottom mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_back_btn">
<a data-target="#qutstion_step02" data-variantitemid=""
data-variantfieldname="Link">前の選択肢へ戻る</a>
</span>
</div>
</div>
</div>
<!-- 診断結果 #diagnostic_result03-->
<div id="diagnostic_result03"
class="ctc_web_simulation_nav ctc_web_simulation_nav_category ctc_web_simulation_nav_result"
style="display: none;">
<div class="ctc_web_simulation_header">
<p>診断結果</p>
</div>
<div class="ctc_web_simulation_link_area">
<p class="ctc_web_simulation_text"><span
class="ctc_marker">おすすめ改善案①：10ギガメニューにグレードアップ</span></p>
<div class="ctc_web_simulation_link_image text_align_center">
<img src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_wifi_03.png"
alt=""></div>
<p class="mb_10">
長らくお使いいただきありがとうございます。ご契約変更されていない場合は、ホームゲートウェイが古くなっている可能性があります。
</p>
<p>通信速度不足や電波干渉を起こしている可能性があります。また、建物の構造や壁の材質の影響で、Wi-Fiの電波が届いていない可能性があります。
</p>
<div class="btn_accent btn_orange bg_left arrow_right mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_internal_link">
<a data-target="#recommended_improvements01"
data-variantitemid=""
data-variantfieldname="Link">サービス内容を確認する</a>
</span>
</div>
<div class="btn_accent btn_c arrow_bottom mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_back_btn">
<a data-target="#qutstion_step03" data-variantitemid=""
data-variantfieldname="Link">前の選択肢へ戻る</a>
</span>
</div>
</div>
</div>
<!-- 診断結果 #diagnostic_result04-->
<div id="diagnostic_result04"
class="ctc_web_simulation_nav ctc_web_simulation_nav_category ctc_web_simulation_nav_result"
style="display: none;">
<div class="ctc_web_simulation_header">
<p>診断結果</p>
</div>
<div class="ctc_web_simulation_link_area">
<p class="ctc_web_simulation_text"><span
class="ctc_marker">おすすめ改善案①：10ギガメニューにグレードアップ</span></p>
<div class="ctc_web_simulation_link_image text_align_center">
<img src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_wifi_03.png"
alt=""></div>
<p class="mb_10">
長らくお使いいただきありがとうございます。ご契約変更されていない場合は、ホームゲートウェイが古くなっている可能性があります。
</p>
<p>通信速度不足や電波干渉を起こしている可能性があります。また、建物の構造や壁の材質の影響で、Wi-Fiの電波が届いていない可能性があります。
</p>
<div class="btn_accent btn_orange bg_left arrow_right mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_internal_link">
<a data-target="#recommended_improvements01"
data-variantitemid=""
data-variantfieldname="Link">サービス内容を確認する</a>
</span>
</div>
<div class="btn_accent btn_c arrow_bottom mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_back_btn">
<a data-target="#qutstion_step03" data-variantitemid=""
data-variantfieldname="Link">前の選択肢へ戻る</a>
</span>
</div>
</div>
</div>
<!-- 診断結果 #diagnostic_result05-->
<div id="diagnostic_result05"
class="ctc_web_simulation_nav ctc_web_simulation_nav_category ctc_web_simulation_nav_result"
style="display: none;">
<div class="ctc_web_simulation_header">
<p>診断結果</p>
</div>
<div class="ctc_web_simulation_link_area">
<p class="ctc_web_simulation_text"><span
class="ctc_marker">おすすめ改善案②：メッシュWi-Fi導入</span></p>
<div class="ctc_web_simulation_link_image text_align_center">
<img src="-/media/Project/commufa/commufa/images/pr/user/10gmenu/img_wifi_03.png"
alt=""></div>
<p class="mb_10">建物の構造や壁の材質の影響で、Wi-Fiの電波が届いていない可能性があります。</p>
<p>メッシュWi-Fi機器を設置することでWi-Fiの届く範囲を広げます。寝室や書斎、お風呂、トイレなど、今までWi-Fiが届きにくかった場所でも快適にネットがご利用いただけるようになります。ご利用のメッシュWi-Fi機器でご自宅内をカバーできない場合は台数の追加も可能です。
</p>
<div class="btn_accent btn_orange bg_left arrow_right mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_internal_link">
<a data-target="#recommended_improvements02"
data-variantitemid=""
data-variantfieldname="Link">サービス内容を確認する</a>
</span>
</div>
<div class="btn_accent btn_c arrow_bottom mt_10">
<span
class="btn_link_wide field-link ctc_web_simulation_back_btn">
<a data-target="#qutstion_step03" data-variantitemid=""
data-variantfieldname="Link">前の選択肢へ戻る</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>